/* = POLICE TITRE */
@font-face { font-family: 'Chewy'; src: url('fonts/Chewy.woff2') format('woff2'); url('fonts/Chewy.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap;}

/* =============================== RESETS ET FORMATAGES GERENIQUES ============================== */
html, body, header, footer, form, fieldset, legend, div, article, aside, nav, section, figure, p, ul, ol, h1, h2, h3, h4, h5, h6, img
{margin:0; padding:0;}
body {font-family: Arial, Helvetica, sans-serif; font-size:100%; background-color:rgba(242,141,0,0.3);}
main, header {max-width: 1000px; margin: 0 auto;}
header {font-family: "Chewy",Arial, Helvetica, sans-serif; text-align:center;}
header img {display:block;}
footer {padding:1rem 0; border-top:solid 1px #000; margin:40px;}
li {padding:0.3rem;}
img {max-width:100%;height:100%;}
h1 {text-align:center; font-weight:bold;}

.mandarine {margin:20px 0 15px 0; padding:20px; background-color:rgba(242,141,0,0.2);}
.pousse {margin:20px 0 15px 0; padding:20px; background-color:rgba(149,191,33,0.2);}
.azur {margin:20px 0 15px 0; padding:20px; background-color:rgba(56,171,224,0.2);}
.pivoine {margin:20px 0 15px 0; padding:20px; background-color:rgba(230,0,130,0.2);}
.rouge {margin:20px 0 15px 0; padding:20px; background-color:rgba(217,9,22,1);}
.vert {margin:20px 0 15px 0; padding:20px; background-color:rgba(25,140,47,1);}
.artichaud {margin:20px 0 15px 0; padding:20px; background-color:rgba(126,54,138,0.2);}
.perle {margin:20px 0 15px 0; padding:20px; background-color:rgba(204,204,204,1);}
.quartz {margin:20px 0 15px 0; padding:20px; background-color:rgba(153,153,153,1);}
.obsidien {margin:20px 0 15px 0; padding:20px; background-color:rgba(51,51,51,1);}

.center {text-align:center;}
.padside5 { padding:0 5px;}

.case_azur {border-left:solid 5px rgba(56,171,224,1); padding:5px 5px 5px 10px;}
.case_rouge {border-left:solid 5px rgba(217,9,22,1); padding:5px 5px 5px 10px;}
.case_vert {border-left:solid 5px rgba(25,140,47,1); padding:5px 5px 5px 10px;}
.case_azur img, .case_rouge img, .case_vert img {margin:20px 0 0 0;} 

.date {text-align:center; font-weight:bold; color:rgba(25,140,47,1);}


/* *-*-*-*-*-*-*-  DESIGN DE BASE : SANS MEDIA QUERIES  *-*-*-*-*-*-*-  */


.grid_colx {display:grid; grid-template-columns:repeat(1, 1fr); grid-gap:25px;}
header {font-size:3rem; }
h1 {font-size:1.2rem;}
h2 {font-size:1rem;}
h3 {font-size:1rem;margin:0 0 10px 0;}
.date {font-size:1.5rem;}

/* *-*-*-*-*-*-*-  ECRANS PETITS : mode Smartphone >365px *-*-*-*-*-*-*-  */
@media screen and (min-width:365px)
{
	.grid_colx {display:grid; grid-template-columns:repeat(1, 1fr); grid-gap:25px;}
	header {font-size:4rem;}
	h1 {font-size:1.3rem;}
	h2 {font-size:1rem;}
	h3 {font-size:1rem;}
	.date {font-size:1.7rem;}
}
	
/* *-*-*-*-*-*-*-  ECRANS MOYENS - Mode 700px>  *-*-*-*-*-*-*-*-*-*-*-*-*- */
@media screen and (min-width:700px)
{
	.grid_colx {display:grid; grid-template-columns:repeat(2, 1fr); grid-gap:25px;}
	header {font-size:6rem;}
	h1 {font-size:1.6rem;}
	h2 {font-size:1.5rem;}
	h3 {font-size:1rem;}
	.date {font-size:2rem;}
	
}

/* *-*-*-*-*-*-*-  ECRANS LARGE - Mode Desktop 999px>  *-*-*-*-*-*-*-*-*-*-*-*-*- */
@media screen and (min-width:999px)
{
	.grid_colx {display:grid; grid-template-columns:repeat(3, 1fr); grid-gap:25px;}
	header {font-size:7rem;}
	h1 {font-size:2rem;}
	h2 {font-size:1.5rem;}
	h3 {font-size:1rem;}
	.date {font-size:4rem;}
	
}