#nav2 a{background-color: silver; font-size:0.9em; display: flex; flex-direction: column;}
.header{position: sticky; top: 0em; z-index: 1;}
.header1{position: sticky; top: 3em; z-index: 1;}
.header1 a{font-size:0.8em;}
#haut{color: white; background-color: lightblue; margin: 0 0 10px 0; animation: tourneX 1s forwards;}
#navigateur{color: white;background-color: silver; margin 0 0 10px 0;} 
h1{color: red;width: 100%;}
div{border-style:outset; border-color:yellow; border-width: 3px; text-align: center; padding-top:10px; padding-bottom:10px; width: 98%;}
.dem{text-align: left;}
div>ul>li::first-letter{font-style: italic; font-size: 1.4em; color: rgb(239,53,181);}
div p::first-letter{font-style: italic; font-size: 1.6em; color: rgb(239,53,181);}
div.tab{border-style: none; width: 100%;}
.conteneur{border-style: none; width: 100%;}
.conteneur2{border-style: none; width: 100%;}
.def{border-style: none; width: 100%;}
.dessin{border-style: none; width: 100%;}
h4{color: blue;}
h3{color: green;}
h2{color : blue;}
td{border-style:outset; border-color:yellow; border-width: 3px; text-align: center;padding-top:10px; padding-bottom:10px;}
tr{border-style:outset; border-color:yellow; border-width: 3px; text-align: center;padding-top:10px; padding-bottom:10px;}
table{background-color: lightblue; width: 90%;}
body{background: radial-gradient(ellipse,white,rgba(25,110,15,0.15)); margin-left: auto; margin-right: 20px; font-size: 1.2em; hyphens: auto;}


@keyframes 'tourneX' { 
						0%{transform: rotateX(0deg);}
						10%{transform: rotateX(36deg);}
						20%{transform: rotateX(72deg);}
						30%{transform: rotateX(108deg);}
						40%{transform: rotateX(144deg);}
						50%{transform: rotateX(180deg);}
						60%{transform: rotateX(216deg);}
						70%{transform: rotateX(252deg);}
						80%{transform: rotateX(288deg);}
						90%{transform: rotateX(324deg);}
						100%{transform: rotateX(360deg);}
						}
						
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
   body,button{font-size: 0.75em;}
  .courbe {width: 90%;}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
	body,button{font-size: 0.9em;}
  .courbe {width: 70%;}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
	body,button{font-size: 0.95em;}
  .courbe {width: 72%;}
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	body{font-size: 1.05em;}
  .courbe {width: 75%;}
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
	body{font-size: 1.1em;}
  .courbe {width: 85%;}
}
.formu:hover{font-size: 1.3em ; color: red;}
#p1:hover{transform: scale(1.3); border: 3px solid blue; transition transform 3s ease-out;}
#p2:hover{transform: scale(1.3); border: 3px solid blue; transition transform 3s ease-out;}
#p3:hover{transform: scale(1.3); border: 3px solid blue; transition transform 3s ease-out;}
#p4:hover{transform: scale(1.3); border: 3px solid blue; transition transform 3s ease-out;}
#p5:hover{transform: scale(1.3); border: 3px solid blue; transition transform 3s ease-out;}
#p6:hover{transform: scale(1.3); border: 3px solid blue; transition transform 3s ease-out;}

@media only screen and (min-width: 600px){
	.conteneur2{display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: repeat(2, 1fr);
			grip-row-gap: 2px;
			grid-template-areas:
			"zone1" 
			"zone2" 
			width: 100%;
		}	
			
	.conteneur{display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: repeat(2, 1fr);
			grip-row-gap: 5px;
			grid-template-areas:
			"zone1"
			"zone2";
			width: 100%;
		}
	
}

@media only screen and (min-width: 992px){
	.conteneur2{display: grid;
			grid-template-columns: 70% 30%;
			grid-template-rows: repeat(1, 1fr);
			grip-row-gap: 2px;
			grid-template-areas:
			"zone1 zone2";
			width: 100%;
			
		}	
	
	
	.conteneur{display: grid;
			grid-template-columns: 50% 50%;
			grid-template-rows: repeat(1, 1fr);
			grip-row-gap: 2px;
			grid-template-areas:
			"zone1 zone2";
			width: 100%;
		}
	
}





		

.def{grid-area: zone1;}
.dessin{grid-area: zone2;}

.droite{grid-area: zone2;}
.gauche{grid-area: zone1;}

.page{display: grid;
				grid-template-columns: 8% 2% 90%;
				grid-template-rows: repeat(1, 1fr);
				grid-template-areas:
				"navPlace . pagePlace";
				width: 100%;
				}
				
#placenav2{grid-area: navPlace;position: fixed; left:0; top: 20%; width: 10%;flex-direction: column; overflow-y: scroll; overflow-x: hidden;z-index:1;}
#corpus{grid-area: pagePlace;}