#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;}
#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: 2px; text-align: center; padding-top:10px; padding-bottom:10px; width: 98%;}
.dem{text-align: left;}
div.page{border-style: none; width: 100%;}
div #ggbApplet{border-style: none; width: 100%;}
div.conteneur{border-style: none; width: 100%;}
div.conteneur1{border-style: none; width: 100%;}
div.conteneur2{border-style: none; width: 100%;}
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);} 
h4{color: blue;}
h3{color: green;}
h2{color : blue;}
td{border-style:outset; border-color:yellow; border-width: 2px; text-align: center;padding-top:5px; padding-bottom:5px;}
tr{border-style:outset; border-color:yellow; border-width: 2px; text-align: center;padding-top:5px; padding-bottom:5px;}
table{background-color: lightblue; width: 80%;}

tr.signe{background-color: white; border-style:outset; border-color:black; border-width: 2px; text-align: center; padding-left: 10px; padding-right: 10px;
						padding-top:10px; padding-bottom:10px;}
td.signe{background-color: white;text-align: center; padding-left: 10px; padding-right: 10px;
						padding-top:10px; padding-bottom:10px;}
tr.signe>td:nth-child(odd){padding-left:1px; padding-right: 1px;}


table.signe{ font-size: 1.1em;border-style:outset; border-color:black; border-width: 3px; width: 80%;}

body{background: radial-gradient(ellipse,white,rgba(25,110,15,0.15)); margin-left: auto; margin-right: 20px; font-size: 1.2em; hyphens: auto;}
div.correc{border-style: none; width: 90%;}

@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%;}
  .conteneur1{display: grid;
			grid-template-columns: 100%;
			grid-template-rows: repeat(2, 1fr);
			grip-row-gap: 2px;
			grid-template-areas:
			"zone1" 
			"zone2";
			width: 100%;
			}
		



	.conteneur2{display: grid;
			grid-template-columns: 100%;
			grid-template-rows: repeat(2, 1fr);
			grip-row-gap: 2px;
			grid-template-areas:
			"zone1" 
			"zone2";
			width: 100%;
			}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
	body,button{font-size: 0.85em;}
  .courbe {width: 70%;}
  .conteneur1{display: grid;
			grid-template-columns: 100%;
			grid-template-rows: repeat(2, 1fr);
			grip-row-gap: 2px;
			grid-template-areas:
			"zone1" 
			"zone2";
			width: 100%;
			}
		



	.conteneur2{display: grid;
			grid-template-columns: 100%;
			grid-template-rows: repeat(2, 1fr);
			grip-row-gap: 2px;
			grid-template-areas:
			"zone1" 
			"zone2";
			width: 100%;
			}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
	body,button{font-size: 0.95em;}
  .courbe {width: 72%;}
  .conteneur1{display: grid;
			grid-template-columns: 40% 60%;
			grid-template-rows: repeat(1, 1fr);
			grip-row-gap: 2px;
			grid-template-areas:
			"zone1 zone2";
			width: 100%;
			}
		



	.conteneur2{display: grid;
			grid-template-columns: 50% 50%;
			grid-template-rows: repeat(1, 1fr);
			grip-row-gap: 2px;
			grid-template-areas:
			"zone1 zone2";
			width: 100%;
			}
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	body{font-size: 1.05em;}
  .courbe {width: 75%;}
  .conteneur1{display: grid;
			grid-template-columns: 40% 60%;
			grid-template-rows: repeat(1, 1fr);
			grip-row-gap: 2px;
			grid-template-areas:
			"zone1 zone2";
			width: 100%;
			}
		



	.conteneur2{display: grid;
			grid-template-columns: 50% 50%;
			grid-template-rows: repeat(1, 1fr);
			grip-row-gap: 2px;
			grid-template-areas:
			"zone1 zone2";
			width: 100%;
			}
} 

/* 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%;}
  .conteneur1{display: grid;
			grid-template-columns: 40% 60%;
			grid-template-rows: repeat(1, 1fr);
			grip-row-gap: 2px;
			grid-template-areas:
			"zone1 zone2";
			width: 100%;
			}
		



	.conteneur2{display: grid;
			grid-template-columns: 50% 50%;
			grid-template-rows: repeat(1, 1fr);
			grip-row-gap: 2px;
			grid-template-areas:
			"zone1 zone2";
			width: 100%;
			}
}
.formu:hover{font-size: 1.3em ; color: red;}


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



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

.gauche{grid-area: zone1;}
.droite{grid-area: zone2;}
.ex li{display: inline;}