/* version 2 */
*{box-sizing: border-box;
  font-family:system-ui;
 }
  
.section {
	display: grid;
	gap: 1rem ;
	margin-top:3rem;
	
}

@media screen and (max-width:768px) {
	img{max-height:15vh;;place-items:center;}
}

@media (min-width: 768px) {
  .section {
    grid-template-columns: repeat(2, 1fr);
	margin:auto;
	padding:30px;
  }
}

@media (min-width: 1024px) {
.section {
  
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: auto;
  
	margin:auto;
	padding:30px;	
/** les art1 à  art8 ont remplacé le code situé ci-dessous après le Flash parce que Firefox
 pas à jour 10/2025 ***/
	.art1{
		grid-column-start:1;
		grid-column-end:7;
		grid-row:1;
	}
	.art2{
		grid-column-start:7;
		grid-column-end:8;
		grid-row:1;		
	}
	.art3{
		grid-column-start:1;
		grid-column-end:3;
		grid-row:2;				
		
	}
/*	data-cs="4" data-ce="5" data-row="2"*/
	.art4{
		grid-column-start:3;
		grid-column-end:4;
		grid-row:2;						
	}	
	/*data-cs="5" data-ce="7" data-row="2"*/
	.art5{
		grid-column-start:4;
		grid-column-end:7;
		grid-row:2;					
	}	
/*data-cs="1" data-ce="5" data-row="3"	*/
	.art6{
		grid-column-start:1;
		grid-column-end:5;
		grid-row:3;						
	}
	/*data-cs="5" data-ce="8" data-row="3"*/
	.art7{
		grid-column-start:5;
		grid-column-end:8;
		grid-row:3;					
	}
	/*data-cs="2" data-ce="7" data-row="4"*/
	.art8{
		grid-column-start:2;
		grid-column-end:7;
		grid-row:4;							
	}
 
}
}

article{
	/*border-radius: 1.125em;
	padding:10px;
	background:var(--color-item);
	border:2px solid var(--color-border);
	box-shadow: 3px 3px 0 3px var(--color-border);*/

.titre{font-size: 4.4vw;	padding: 0; margin: 0;
	text-align:center;}/*3.7rem;}*/

	h1{	color: var(--color-title); /* = titre */
	/*3.3rem;*/

	}
	
	h3{	color: var(--color-title);
	font-size: 1.5rem;/*1.8rem;*//*2.3vw;*/
	padding: 0; margin: 0;
	}
	
	p {	font-weight:bold;
	font-size:1.1rem;
	text-align:justify;
	padding: 0; margin: 0;
	}
	
	h3::first-letter {
	-webkit-initial-letter: 2 2;
	initial-letter: 2 2; 
	background-color: #BE9461;
	padding: 6px 17px;
	border-top-left-radius: 3rem;
	border-bottom-right-radius: 3rem;
}

	.image{
	height:100%;
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	}

}	


/***  FLASH ***/
.btn_flash{
	font-size:3vw;
	font-weight:500;
	color: var(--color-title);
	background:var(--color-item);
	margin-right:6%;
	margin-top:3%;
	float:right;
	cursor:pointer;
	border-radius: 1em;
	box-shadow: 1px 1px 0 2px var(--color-border);
}

.btn_flash:hover, .btn_close_dial:hover{
	 color:var(--color-item);
	 background-color:var(--color-title);
}

/*** FIN FLASH ***/

/* cette partie ci-dessous ne fonctionne pas avec Firefox*/
/*
  > article {
    &[data-c] {
      grid-column: span attr(data-c type(<integer>));
    }

    &[data-cs] {
      grid-column-start: attr(data-cs type(<integer>));
    }
    &[data-ce] {
      grid-column-end: attr(data-ce type(<integer>));
    }

    &[data-row] {
      grid-row: attr(data-row type(<integer>));
    }
  }
*/