@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

html
{
	background-color: #FFF;
	color: #333;
	font-family: 'Roboto', sans-serif;
}

body
{
	width: 1200px;
	margin: auto;
	margin-bottom: 100px;
}

#ombre
{
  display: none;
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index:10;
  opacity:0.6;
}

#lightbox
{
 display: none;
 position:fixed;
 top: 40%;
 left: 50%;
 width: 600px;
 max-height: 50%;
 padding: 10px;
 margin:0;
 border: 1px solid black;
 background-color: white;
 z-index:11;
 overflow: auto;
 transition-property: opacity;
 transition-duration: 5s;
}

#lightbox img.fermer
{
 height: 30px;
 position: absolute;
 top: 0px;
 right: 0px;
 cursor: pointer;
 z-index:10;
}

#lightbox30
{
 display: none;
 position:fixed;
 top: 30%;           /*la hauteur de l'écran est la même que celle du body, donc calcul facile*/
 max-height: 70%;
 left: calc(400px + (100vw - 1200px)/2);          /*par rapport au bord de l'écran*/
 width: 800px;
 padding: 10px;
 margin:0;
 border: 1px solid black;
 background-color: white;
 z-index:11;
 overflow: auto;
 transition-property: opacity;
 transition-duration: 5s;
}

#lightboxetroite
{
 display: none;
 position:fixed;
 top: 40%;           /*la hauteur de l'écran est la même que celle du body, donc calcul facile*/
 max-height: 50%;
 left: calc(800px + (100vw - 1200px)/2);          /*par rapport au bord de l'écran*/
 width: 400px;
 padding: 10px;
 margin:0;
 border: 1px solid black;
 background-color: white;
 z-index:11;
 overflow: auto;
 transition-property: opacity;
 transition-duration: 5s;
}

#lightboxetroite img.fermer
{
 height: 30px;
 position: absolute;
 top: 0px;
 right: 0px;
 cursor: pointer;
 z-index:10;
}

em
{
	font-style: italic;
	font-weight: bold;
}

div.entete
{
	/*background-image: url(picts/quidquam-150.png);*/
	height: 150px;
	/*background-repeat: no-repeat;*/
}

div.entete img.imgg
{
	float: left;
}

div.entete img.imgd
{
	float: right;
	height: 50px;
	padding: 5px;
}

div.entete img.imgdm
{
	float: right;
	padding: 5px;
	height: 30px;
	cursor: pointer;
}

#navigation div.navig
{
	margin-top: 10px;
	border: thick solid #f19434;
}

#navigation div.navig p
{
	margin: 0px;
	padding: 10px;
	padding-right: 30px;
	text-align: justify;
	font-size: 13px;
}

#navigation img.imgd
{
	float: right;
	height: 15px;
	padding: 10px;
	cursor: pointer;
}

div.titre
{
	clear: both;
}

div.titre h1
{
	color: #056da9;
}

div.titre h2,div.titresansclear h2
{
	color: #67ac25;
	text-align: left;
	font-style: italic;
	margin-top: 20px;
	font-weight: 600;
}

div.main div.entoure
{
	clear: both;
	border: thin solid Silver;
}

div.main h1
{
 /*color: #8a3185;*/
 color: #67ac25;
 font-size: 1.7rem;
 font-weight: 500;
 margin-bottom: 15px;
}

div.main h1 .niveau
{
	background-color: #8c3087;
	color: White;
	font-size: 1.3rem;
	font-weight: bold;
	padding-left: 7px;
	padding-right: 7px;
	border-radius: 10px;
}

div.main h2
{
	color: #67ac25;
	text-align: left;
	font-style: italic;
	margin-top: 20px;
	font-weight: 600;
}

div.main h2.clear
{
 clear: both;
}

div.main h3
{
	margin: 0px;
	padding: 0px;
	margin-top: 15px;
	color: #f19434;
	font-style: italic;
	font-weight: bold;
	font-size: 20px;
	clear: both;
}

div.main h3.ssclr
{
 clear: none;
}


div.main p
{
	text-align: justify;
	margin-top: 10px;
	margin-bottom: 0px;
	padding-bottom: 0px;
}

div.main p.flush
{
	clear: both;
}

div.main p a
{
	color: #333;
}

div.main p a:hover
{
	color: #97b23d;
}

div.main p a.kezako
{
	color: #f59f19;
	text-decoration: none;
	font-weight: 900;
}

div.main p a.kezako img
{
	height: 10px;
	padding-left: 5px;
}

div.main p span.bouton
{
	background-color: #1E90FF;
	padding: 5px;
	padding-left: 20px;
	padding-right: 20px;
	border-radius: 10px;
	color: White;
	cursor: pointer;
}

div.main p.faux
{
	color: Red;
	font-size: 36px;
	margin-bottom: 0px;
	margin: 0px;
	font-weight: 400;
}

div.main p.faux img
{
	height: 34px;
	vertical-align: -5px;
}

div.main p.vrai
{
	color: Green;
	font-size: 36px;
	margin: 0px;
}

div.main p.vrai img
{
	height: 34px;
	vertical-align: -5px;
}

div.main p.resultat
{
	padding-left: 20px;
	color: #ee122c;
	font-weight: bold;
}

div.main p.note
{
	font-size: 12px;
	margin: 0px;
	margin-top: 10px;
}

div.main p.center
{
 text-align: center;
}

div.main img.imgg
{
	float: left;
	padding-right: 10px;
	padding-bottom: 20px;
}

div.main div.grille2
{
 display: grid;
 grid-template-columns: auto auto;
}

div.main div.grille2 div
{
 padding: 10px;
}

#reponse1, #reponse2, #reponse3
{
 padding: 0px;
}

div.main div.g640
{
	float: left;
	padding-right: 10px;
	padding-bottom: 20px;
}

div.main div.d640
{
	float: right;
	padding-left: 10px;
	padding-bottom: 20px;
}

div.main img.imgd
{
	float: right;
	padding-left: 10px;
	padding-bottom: 20px;
}

div.main ul
{
	margin: 0px;
	margin-top: 10px;
	padding: 0px;
	padding-left: 15px;
}

div.main li
{
	margin: 0px;
	padding: 0px;
	padding-left: 5px;
	padding-bottom: 5px;
	list-style-type: "\00261E";
	font-size: 12px;
	text-align: justify;
}

div.main li.dedans
{
 list-style-position: inside;
}

div.main li u
{
 cursor: pointer;
}

div.main form p.centre
{
	text-align: center;
}

div.main form.continuer input[type="submit"]
{
	padding: 5px;
	padding-left: 15px;
	padding-right: 15px;
	background-color: #fbc944;
	border-radius: 10px;
	font-size: 20px;
	font-weight: bold;
	border-color: #ddd; /*redéfinit la couleur, notamment pour chrome*/
	cursor: pointer;
}

div.main form.continuer button
{
	padding: 5px;
	padding-left: 15px;
	padding-right: 15px;
	background-color: #fbc944;
	border-radius: 10px;
	font-size: 20px;
	font-weight: bold;
	border-color: #ddd; /*redéfinit la couleur, notamment pour chrome*/
	cursor: pointer;
}

div.main table.bouton
{
	margin: auto;
}

div.main table.couleurs
{
	margin: auto;
}

div.main table.couleurs td
{
	padding: 5px;
	width: 100px;
	text-align: center;
	color: Black;
}

#largeur, #longueur, #hauteur, #masse, #masse2, #temps, #puissance, #lambda, #lambdabrut, #surface, #surface2, #vitesse, #angle
{
	width: 50px;
	text-align: right;
	color: #056ea8;
	font-weight: bold;
	border-color: #056ea8;
	padding: 3px;
}

#unite_temps,#unite_puissance,#forme,#forme2,#tl
{
	text-align: center;
	color: #056ea8;
	font-weight: bold;
	border-color: #056ea8;
	padding: 3px;
}

div.droite
{
	width: 540px;
	/*margin-right: 640px;*/
	float: right;
	margin-left: 10px;
}

div.droite680
{
	width: 680px;
	float: right;
	margin-left: 10px;
}

div.droite780
{
	width: 780px;
	float: right;
	margin-left: 10px;
}

div.encartdroite
{
	margin: 10px;
	margin-top: 0px;
	padding: 10px;
	border: medium solid #056ea8;
	box-shadow: 10px 5px 5px grey;
	width: 350px; /*margin-right: 640px;*/
	float: right;
}

div.encartdroite h3
{
	text-align: center;
	color: #056ea8;
	margin: 0px;
	padding: 0px;
	clear: none;
}

div.encartdroite p
{
	font-size: 13px;
	text-align: justify;
}

div.encartdroite p.petit
{
	font-size: 11px;
}

#complement
{
	width: 550px; /*margin-right: 640px;*/
	float: right;
	background-color: White;
	margin-bottom: 50px;
}

#complement h1
{
	color: #e6162f;
	margin: 0px;
	padding: 0px;
	font-size: 20px;
	font-weight: bold;
	text-align: left;
}

#complement h2
{
	color: #f19433;
	margin: 0px;
	padding: 0px;
	padding-top: 10px;
	font-size: 16px;
	font-weight: bold;
	font-style: italic;
	text-align: left;
}

#complement p
{
	color: #555;
	text-align: justify;
	font-size: 13px;
	margin: 0px;
	padding: 0px;
	padding-top: 5px;
}

#complement p.center
{
	text-align: center;
}

#complement hr
{
	color: #CCC;
}

#complement div.center table
{
	margin:auto;
}

#complement div.center td,#complement div.center tr
{
	text-align: center;
	color: #555;
	font-size: 13px;
}

#complement p.remarque
{
 font-size: 12px;
}

#complement ul.remarque
{
	margin: 0px;
	margin-top: 10px;
	padding: 0px;
	padding-left: 15px;
}

#complement ul.remarque li
{
	margin: 0px;
	padding: 0px;
	padding-left: 5px;
	padding-bottom: 5px;
	list-style-type: "\00261E";
	font-size: 12px;
	text-align: justify;
}

#complement ul.remarque li a
{
	color: #555;
}

#complement p.resultat
{
	padding-left: 20px;
	color: #ee122c;
	font-weight: bold;
}

div.illcentree
{
 width: 550px;
 margin: auto;
}

div.illcentree650
{
 width: 650px;
 margin: auto;
}

div.illcentree canvas.dessin
{
 border: 1px solid #000000;
 float: right;
 width: 400px;
 height: 400px;
 margin-top: 35px;
}

#refraction canvas.dessin,#reflexion canvas.dessin,#dispersion canvas.dessin,#prisme canvas.dessin,#goutte canvas.dessin
{
 border: 1px solid #000000;
 float: right;
 width: 400px;
 height: 400px;
 margin-top: 20px;
}

#dessin_caustique
{
 border: 1px solid #000000;
 float: right;
 width: 400px;
 height: 450px;
 margin-top: 20px;
 margin-left: 10px;
}

#dessin_caustique_courbe
{
 border: 1px solid #000000;
 float: right;
 width: 100px;
 height: 450px;
 margin-top: 20px;
 margin-left: 10px;
}

#dessin_aec_spectre
{
 float: right;
 width: 100px;
 height: 450px;
 margin-top: 20px;
}

#dispersion_complete
{
 /*float: right;*/
 width: 400px;
 height: 400px;
 margin-top: 20px;
}

/*SLIDER VERTICAL 400*/

/*le slider lui-même, et notamment sa bordure*/
div.slider input[type=range][orient=vertical]
{
	writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* WebKit */
	height: 400px;
	padding: 3px;
	/*border-radius: 15px;
	border-width: 2px;
	border-style: solid;
	border-color: lightgray;*/
	width: 32px;
	/*background: #CCC; couleur de fond de la zone de déplacement*/
}

/*la piste*/
div.slider input[type=range]::-webkit-slider-runnable-track  /*webkit*/
{ 
    /*width: 3px;
    height: 400px; pas trouvé à quoi ça sert
    background: #888;*/
	background-color: transparent;
    /*border: none;
    border-radius: 3px;*/
}

div.slider input[type=range]::-moz-range-track  /*mozilla*/
{ 
    width: 5px;
    height: 400px;
    background: #888;
    border: none;
    border-radius: 3px;
}

div.slider input[type=range]::-ms-track  /*MS*/
{
}

/* barre progression avant */
div.slider input[type=range]::-webkit-fill-lower
{
  background: transparent;
}
/* barre progression après */
div.slider input[type=range]::-webkit-fill-upper
{
  background: transparent;
}

/*le curseur*/
div.slider input[type=range]::-webkit-slider-thumb  /*webkit*/
{
   -webkit-appearance: slider-vertical;
   border: none;
   height: 30px;
   width: 16px;
   border-radius: 50%;
   background: #8B008B;
   margin-top: -14px;
}

div.slider input[type=range]::-moz-range-thumb { /*mozilla*/
    border: none;
    height: 2px;
    width: 16px;
    border-radius: 0%;
    background: #8B008B;
}

div.slider input[type=range]::-ms-thumb /*MS*/
{
	height: 30px;
}

div.slider input[type=range]:focus {
    outline: none;
}

/*SLIDER VERTICAL 200*/

/*le slider lui-même, et notamment sa bordure*/
form.goutte input[type=range][orient=vertical]
{
	writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* WebKit */
	height: 200px;
	padding: 3px;
	margin-top: 100px;
	/*border-radius: 15px;
	border-width: 2px;
	border-style: solid;
	border-color: lightgray;*/
	width: 32px;
	
}

/*la piste*/
form.goutte input[type=range]::-webkit-slider-runnable-track  /*webkit*/
{ 
    width: 3px;
    height: 200px; /*pas trouvé à quoi ça sert*/
    background: #888;
    border: none;
    border-radius: 3px;
}

form.goutte input[type=range]::-moz-range-track  /*mozilla*/
{ 
    width: 5px;
    height: 200px;
    background: #888;
    border: none;
    border-radius: 3px;
}

form.goutte input[type=range]::-ms-track  /*MS*/
{
}

/*le curseur*/
form.goutte input[type=range]::-webkit-slider-thumb  /*webkit*/
{
   -webkit-appearance: slider-vertical;
   border: none;
   height: 30px;
   width: 16px;
   border-radius: 50%;
   background: #8B008B;
   margin-top: -14px;
}

forme.goutte input[type=range]::-moz-range-thumb { /*mozilla*/
    border: none;
    height: 2px;
    width: 16px;
    border-radius: 0%;
    background: #8B008B;
}

forme.goutte input[type=range]::-ms-thumb /*MS*/
{
	height: 30px;
}

forme.goutte input[type=range]:focus {
    outline: none;
}

/*le bloc contenant le slider*/
div.slider
{
	width: 30px;
	/*height: 500px;*/
	float: left;
	margin: 0px;
	margin-top: 10px;
	margin-left: 30px;
	/*padding-top: 165px;*/
}

div.slider p
{
	text-align: center;
	color: #8B008B;
	font-size: 24px;
}

div.slider p sup
{
	vertical-align: 20px;
	font-size: 24px;
}

div.quizz
{
	clear: both;
	padding: 10px;
}

div.quizzsansclear
{
	padding: 10px;
}

div.quizz h3,div.quizzsansclear h3
{
	color: #999;
	margin: 0px;
	padding-bottom: 10px;
	padding-top: 20px;
	clear: none;
}

div.quizz h3.sstop,div.quizzsansclear h3.sstop
{
	padding-top:0px;
}

div.quizz p,div.quizzsansclear p
{
	margin-top: 0px;
	padding-top: 0px;
}

div.quizz p em
{
	font-style: italic;
	font-weight: bold;
}

div.quizz p .niveau
{
	background-color: #8c3087;
	color: White;
	font-weight: bold;
	padding-left: 5px;
	padding-right: 5px;
	border-radius: 10px;
}

div.quizz p.centre
{
	text-align: center;
}

div.quizz p.centre a:hover img
{
	opacity: 0.5;
}

div.quizz img.imgg
{
	float: left;
	padding-right: 10px;
}

div.quizz div.imgg
{
	float: left;
	height: 100px;
	width: 80px;
	text-align: right;
}

div.quizz div.imgg100,div.quizzsansclear  div.imgg100
{
	float: left;
	height: 100px;
	width: 110px;
	text-align: right;
}

div.quizz div.imgg160
{
	float: left;
	height: 100px;
	width: 170px;
	text-align: right;
}

div.quizz div.imgg500
{
	float: left;
	height: 100px;
	width: 510px;
	text-align: left;
}


div.quizz div.imgg img,div.quizz div.imgg100 img,div.quizz div.imgg160 img,div.quizzsansclear div.imgg100 img
{
	height: 100px;
	padding-right: 10px;
}

div.quizz form input[type="submit"],div.quizzsansclear form input[type="submit"]
{
	padding: 5px;
	padding-left: 15px;
	padding-right: 15px;
	background-color: #fbc944;
	border-radius: 10px;
	border-color: #ddd; /*redéfinit la couleur, notamment pour chrome*/
}

div.quizz button,div.quizzsansclear button
{
	padding: 5px;
	padding-left: 15px;
	padding-right: 15px;
	background-color: #fbc944;
	border-radius: 10px;
	border-color: #ddd; /*redéfinit la couleur, notamment pour chrome*/
	cursor: pointer;
}

div.quizzsansclear table
{
	margin: auto;
}

div.menug
{
	margin: 10px;
	margin-top: 10px;
	padding: 0px;
	float: left;
	color: #086ca7;
	border-right: medium solid #086ca7;
	width: 200px;
}

div.menug p
{
	margin: 0px;
	padding: 0px;
	text-align: center;
	font-weight: bold;
	font-size: 14px;
	/*width: 180px;*/
	/*padding: 10px;*/
	padding: 10px;
}

div.menug p:hover
{
	background-color: #DDD;
}

div.menug p a
{
	text-decoration: none;
	padding: 10px;
	color: #555;
}

div.menug p a:hover
{
	background-color: #DDD;
}

div.menug p.selected
{
	background-color: #086ca7;
	color: White;
	/*padding: 10px;*/
	padding: 10px;
}

div.plusloin
{
	float: right;
	width: 950px;
	margin-top: 0px;
	margin-bottom: 100px;
}

div.plusloin h2
{
	margin: 0px;
	padding: 0px;
	color: #67ac25;
	text-align: left;
	margin-top: 20px;
	font-weight: 600;
}

div.plusloin h3
{
	margin: 0px;
	padding: 0px;
	padding-top: 10px;
	color: #f19434;
	font-style: italic;
	font-weight: bold;
	font-size: 20px;
}

div.plusloin h3.flush
{
	clear: both;
}

div.plusloin p
{
	text-align: justify;
	margin: 0px;
	padding: 0px;
	padding-top: 5px;
	color: #333;
}

div.plusloin p a
{
	color: #333;
}

div.plusloin p a.kezako img
{
	height: 10px;
	padding-left: 5px;
}

div.plusloin ul.remarque
{
	margin: 0px;
	margin-top: 10px;
	padding: 0px;
	padding-left: 15px;
}

div.plusloin ul.remarque li
{
	margin: 0px;
	padding: 0px;
	padding-left: 5px;
	padding-bottom: 5px;
	list-style-type: "\00261E";
	font-size: 12px;
	text-align: justify;
}

div.plusloin ul.remarque li a
{
	color: #555;
}

div.plusloin p.center
{
	text-align: center;
}

div.plusloin img.imgg
{
	float: left;
	padding: 10px;
	padding-left: 0px;
}

div.plusloin img.imgd
{
	float: right;
	padding: 10px;
	padding-right: 0px;
}

canvas.sims
{
	border: medium solid #A9A9A9;
}

canvas.laser
{
	/*border: medium solid #A9A9A9;*/
}

#waist
{
	width: 800px;
}

form.sims input
{
	width: 354px;
}

table.temperature
{
	margin: auto;
}

table.temperature td.froid
{
	color: Aqua;
}

table.temperature td.chaud
{
	color: Red;
}



div.logos
{
	padding: 10px;
}

div.logos img.imgleft
{
	float: left;
	height: 50px;
}

div.logos img.imgright
{
	float: right;
	height: 50px;
	padding-left: 20px;
}

div.recherche
{
	clear: both;
	margin-top: 90px;
	padding: 10px;
}

div.recherche p
{
	margin: 0px;
	margin-top: 0px;
}

div.recherche p.tous
{
	margin-top: 20px;
}

div.recherche p.tous input[type="submit"]
{
	width: 300px;
	padding: 5px;
	background-color: #6495ED;
	border-radius: 10px;
}

div.bouton_recherche
{
	margin-top: 10px;
}

div.bouton_recherche p span
{
	background-color: White;
	padding: 10px;
	border-radius: 10px;
	border: thin solid #444;
}

div.bouton_recherche input[type=image]
{
	padding: 2px;
	padding-bottom: 0px;
}

div.bouton_recherche input[type=text]
{
	border: none;
}

div.listico
{
	width: 1000px;
	margin: auto;
}

div.episode
{
	float: left;
	margin: 0px;
	width: 250px;
	text-align: center;
	height: 230px;
}

div.episode p.titre
{
	width: 220px;
	margin: auto;
	margin-top: 5px;
	font-size: 14px;
}

div.episode p.liens
{
	width: 220px;
	margin: auto;
	text-align: left;
}

div.episode p.liens img
{
	height: 25px;
}

div.image
{
	position: absolute;
	margin-left: 15px;
	height: 120px;
}


div.image p.image img
{
	width: 220px;
	height: auto;
}

div.image:hover
{
	opacity: 0.3;
	transition-duration: 0.5s
}

div.texte
{
	height: 120px;
}

div.liste
{
	width: 50%;
	float: left;
	background-color: #F1F1F1;
}

div.complement
{
	background-color: #4169E1;
}

h2
{
	font-weight: normal;
	color: #9400D3;
	text-align: center;
}

table.complements
{
	border-collapse: collapse;
}

table.complements td
{
	border-bottom: thin solid Black;
	border-top: thin solid Black;
	vertical-align: top;
	padding: 5px;
	width: 50%;
}

table.complements td a
{
	color: Navy;
	text-decoration: none;
}

table.complements td.warning
{
	color: Red;
}

div.extra div.bkBase.bkSec h1.bkBase_ti
{
	font-weight: normal;
}

#dispersion table.couleurs
{
 font-size: 13px;
 margin: auto;
 text-align: center;
}

#dispersion table td
{
 padding: 5px;
 padding-top: 2px;
 padding-bottom: 2px;
}

#dispersion table td.violet
{
 background-color: rgba(87,0,194,0.5);
}

#dispersion table td.azur
{
 background-color: rgba(0,89,220,0.5);
}

#dispersion table td.printemps
{
 background-color: rgba(0,232,162,0.5);
}

#dispersion table td.citron
{
 background-color: rgba(130,210,0,0.5);
}

#dispersion table td.orange
{
 background-color: rgba(255,75,0,0.5);
}

#dispersion table td.cerise
{
 background-color: rgba(164,0,44,0.5);
}

#dispersion table td.aec
{
 background-image: url(arc-en-ciel/picts/spectre.png);
 background-size: cover;
}

table.couleurs
{
 font-size: 13px;
 margin: auto;
 text-align: center;
}

table.couleurs td
{
 padding: 5px;
 padding-top: 2px;
 padding-bottom: 2px;
}

table.couleurs td.violet
{
 background-color: rgba(87,0,194,0.5);
}

table.couleurs td.azur
{
 background-color: rgba(0,89,220,0.5);
}

table.couleurs td.printemps
{
 background-color: rgba(0,232,162,0.5);
}

table.couleurs td.citron
{
 background-color: rgba(130,210,0,0.5);
}

table.couleurs td.orange
{
 background-color: rgba(255,75,0,0.5);
}

table.couleurs td.cerise
{
 background-color: rgba(164,0,44,0.5);
}

table.couleurs td.aec
{
 background-image: url(arc-en-ciel/picts/spectre.png);
 background-size: cover;
}

div.timeline
{
 display: grid;
 grid-template-columns: calc(100%/26) repeat(12,calc(100%/13)) calc(100%/26);
 border: solid 1px #ccc;
 border-radius: 40px;
 margin-top: 20px;
 margin-bottom: 30px;
}

div.timeline div
{
 height: 50px;
 text-align: center;
 padding-top: 1px;
}

div.timeline img
{
 height: 30px;
 margin-top: 10px;;
}

div.timeline div.flgauche
{
 border-radius: 40px 0 0 40px;
 background: linear-gradient(#fff, #efeeee 3%, #dad3d3);
}

div.timeline div.flgauche img
{
 height: 40%;
 margin-top: 35%;;
}

div.timeline div.fldroite
{
 border-radius: 0 40px 40px 0;
 background: linear-gradient(#fff, #efeeee 3%, #dad3d3);
}

div.timeline div.fldroite img
{
 height: 40%;
 margin-top: 35%;;
}

div.timeline div.ccentre
{
  background: linear-gradient(#aaa, #d5d5d5 5%, #e9e9e9);
}

div.timeline div.cgauche
{
 background: linear-gradient(#aaa, #d5d5d5 5%, #e9e9e9);
 box-shadow: inset 2px 0 #aaa;
}

div.timeline div.cdroite
{
 background: linear-gradient(#aaa, #d5d5d5 5%, #e9e9e9);
 box-shadow: inset -2px 0 #aaa;
}

div.timeline11
{
 --nb: 11;
 --nb1: calc(var(--nb) + 1);
 --nb2: calc(var(--nb1) * 2);
 display: grid;
 /*grid-template-columns: calc(100%/28) repeat(13,calc(100%/14)) calc(100%/28);*/
 grid-template-columns: calc(100%/var(--nb2)) repeat(var(--nb),calc(100%/var(--nb1))) calc(100%/var(--nb2));
 border: solid 1px #ccc;
 border-radius: 40px;
 margin-top: 20px;
 margin-bottom: 30px;
}

div.timeline11 div
{
 height: 50px;
 text-align: center;
 padding-top: 1px;
}

div.timeline11 img
{
 height: 30px;
 margin-top: 10px;;
}

div.timeline13
{
 --nb: 13;
 --nb1: calc(var(--nb) + 1);
 --nb2: calc(var(--nb1) * 2);
 display: grid;
 /*grid-template-columns: calc(100%/28) repeat(13,calc(100%/14)) calc(100%/28);*/
 grid-template-columns: calc(100%/var(--nb2)) repeat(var(--nb),calc(100%/var(--nb1))) calc(100%/var(--nb2));
 border: solid 1px #ccc;
 border-radius: 40px;
 margin-top: 20px;
 margin-bottom: 30px;
}

div.timeline13 div
{
 height: 50px;
 text-align: center;
 padding-top: 1px;
}

div.timeline13 img
{
 height: 30px;
 margin-top: 10px;;
}

div.timeline15
{
 --nb: 15;
 --nb1: calc(var(--nb) + 1);
 --nb2: calc(var(--nb1) * 2);
 display: grid;
 /*grid-template-columns: calc(100%/28) repeat(13,calc(100%/14)) calc(100%/28);*/
 grid-template-columns: calc(100%/var(--nb2)) repeat(var(--nb),calc(100%/var(--nb1))) calc(100%/var(--nb2));
 border: solid 1px #ccc;
 border-radius: 40px;
 margin-top: 20px;
 margin-bottom: 30px;
}

div.timeline15 div
{
 height: 50px;
 text-align: center;
 padding-top: 1px;
}

div.timeline15 img
{
 height: 30px;
 margin-top: 10px;;
}

div.tl_flgauche
{
 border-radius: 40px 0 0 40px;
 background: linear-gradient(#fff, #efeeee 3%, #dad3d3);
}

div.tl_flgauche img
{
 height: 40%;
 margin-top: 35%;;
}

div.tl_fldroite
{
 border-radius: 0 40px 40px 0;
 background: linear-gradient(#fff, #efeeee 3%, #dad3d3);
}

div.tl_fldroite img
{
 height: 40%;
 margin-top: 35%;;
}

div.tl_ccentre
{
  background: linear-gradient(#aaa, #d5d5d5 5%, #e9e9e9);
}

div.tl_ccentre:hover
{
 background:  linear-gradient(#ccc, #eee 5%, #fff);
}

div.tl_cgauche
{
 background: linear-gradient(#aaa, #d5d5d5 5%, #e9e9e9);
 box-shadow: inset 2px 0 #aaa;
}

div.tl_cgauche:hover
{
 background:  linear-gradient(#ccc, #eee 5%, #fff);
}

div.tl_cdroite
{
 background: linear-gradient(#aaa, #d5d5d5 5%, #e9e9e9);
 box-shadow: inset -2px 0 #aaa;
}

div.tl_cdroite:hover
{
 background:  linear-gradient(#ccc, #eee 5%, #fff);
}

form.tartine
{
 display: grid;
 grid-template-columns: 200px 200px;
 margin-top: 20px;
}

form.tartine div.gauche
{
 /*width:auto;*/
}

form.tartine div.gauche p
{
 text-align:right;
 /*width:auto;*/
}

form.tartine div.droite
{
 width: 200px;
}

form.tartine div.droite p
{
 text-align:left;
 margin-top: 7px;
}

form.tartine div.centre
{
 padding-top: 10px;
 grid-column-start: 1; 
 grid-column-end: 3;
 justify-self: center;
}

form.tartine div.centre button
{
 padding: 5px;
 padding-left: 15px;
 padding-right: 15px;
 background-color: #fbc944;
 border-radius: 10px;
 border-color: #ddd; /*redéfinit la couleur, notamment pour chrome*/
 cursor: pointer;
 font-size: 16px;
 font-weight: bold;
}

form.tartine div.resultats
{
 padding-top: 10px;
 grid-column-start: 1; 
 grid-column-end: 3;
 justify-self: start;
}

form.tartine div.resultats p
{
	padding-left: 20px;
	color: #ee122c;
	font-weight: bold;
}


/******************** animation tartine ***********************/

div.animation
{
 float: right;
 width: 700px;
}

#canvas_tartine
{
 width: 700px;
 height: 700px;
 /*border: 1px solid #000000;*/
 float: right;
}

div.animation_rel
{
 position: relative;
}

img.table
{
 position:absolute;
 left: 0px;
 top: 71px;
}

img.sol
{
 position:absolute;
 left: 0px;
 top: 641px;
}

#tartine
{
 animation-duration:3s;
 animation-name: pause;
 animation-fill-mode: forwards;
 animation-timing-function: linear;
 position: absolute;
}

@keyframes chute
{
 from
 {
  left: 100px;
  top: 50px;
 }
 
 40%
 {
  left: 200px;
  top: 50px;
  transform: rotate(0deg);
 }
 
 60%
 {
  left: 200px;
  top: 50px;
  transform-origin: 100px 21px;
  transform: rotate(60deg);
 }
 
 65%
 {
  left: 225px;
  top: 93px;
  transform-origin: 100px 21px;
  transform: rotate(60deg);
 }
 
 95%
 {
  left: 225px;
  top: 550px;
  transform-origin: 100px 21px;
  transform: rotate(210deg);
 }
 
 to
 {
  left: 225px;
  top: 600px;
  transform-origin: 100px 21px;
  transform: rotate(180deg);
 }
}

@keyframes pause
{
 from
 {
  left: 100px;
  top: 50px;
 }
 
 to
 {
  left: 100px;
  top: 50px;
 }
}



/******************************* fin animation tartine ******************************/