#nav2 a{background-color: silver; font-size:0.8em; 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: center;}
div#conteneur{border-style: none; width: 100%;}
div.conteneur1{border-style: none; width: 100%;}
div.demoGauche{border-style: none; width: 100%;}
div.demoDroite{border-style: none; width: 100%;}
div.page{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: 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%;}
  .conteneur1{display: grid;
				grid-template-columns: 1fr;
				grid-template-rows: repeat(2, 1fr);
				grip-row-gap: 2px;
				grid-template-areas:
				"zoneGauche"
				"zoneDroite";
				width: 100%;
				}			
}

/* 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%;}
  .conteneur1{display: grid;
				grid-template-columns: 1fr;
				grid-template-rows: repeat(2, 1fr);
				grip-row-gap: 2px;
				grid-template-areas:
				"zoneGauche"
				"zoneDroite";
				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-column-gap: 5px;
				grid-template-areas:
				"zoneGauche zoneDroite";
				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-column-gap: 5px;
				grid-template-areas:
				"zoneGauche zoneDroite";
				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-column-gap: 5px;
				grid-template-areas:
				"zoneGauche zoneDroite";
				width: 100%;
				}			
}
.formu:hover{font-size: 1.3em ; color: red;}


#sommeVectdem{grid-area: gauche;}
#sommeVectdessin{grid-area: droite;}
#mulVectdem{grid-area: gauche1;}
#mulVectdessin{grid-area: droite1;}


#tab1{display: grid;
				grid-template-columns: repeat(2, 1fr);
				grid-template-rows: repeat(1, 1fr);
				grid-template-areas: 
				"gauche2  droite2";
				width: 90%;}
#defgauche{grid-area: gauche2;}
#defdroite{grid-area: droite2;}

#conteneur{display: grid;
				grid-template-columns: 8fr 2fr;
				grid-template-rows: repeat(1, 1fr);
				grip-column-gap: 2px;
				grid-template-areas:
				"zone1 zone2";
				width: 100%;
				}
				


.demoGauche{grid-area: zoneGauche;}
.demoDroite{grid-area: zoneDroite;}				
				
#gauche{grid-area: zone1;}
#droite{grid-area: zone2;}
		
.page{display: grid;
				grid-template-columns: 12% 2% 86%;
				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;}


#background-container{
			position: absolute;
			width: 95%;
			height: 100%;
			display: bock;
			z-index: -1;
			background-position: center center;
			background-repeat: no-repeat;
	}