html, body {margin : 0;height:100%;}
:root {
  --div-bg-color: rgba(252, 78, 2,0.7);
  --div-bg-color-hover : rgba(252, 78, 2,1);
  --div-bg-color-dilue : rgba(252, 78, 2,0.4);
  --div-bg-color-stage-fini : rgba(65, 110, 251,0.6);
  --div-bg-color-stage-fini-hover : rgba(65, 110, 251,0.8);
   --div-bg-color-plant-hover : rgba(134, 252, 150,0.8);
   --div-bg-color-plant : rgba(134, 252, 150,0.6);
    --div-bg-color-animal-hover : rgba(134, 232, 252,0.8);
   --div-bg-color-animal : rgba(134, 232, 252,0.6);
}
a{text-decoration:none;color:inherit;}
body{display:flex;flex-direction:column;}
.td_formation_3 {border:1px;border-style:solid; border-color:black; vertical-align:middle; font-size: 12pt; font-family:Arial, Helvetica, sans-serif; text-align: justify; border-collapse: collapse;}
.table_formation {margin-top:20px; margin-right:auto; margin-bottom:30px; margin-left:auto; border-width: 2pt; border-color: black; border-style: solid; font-family:Arial, Helvetica, sans-serif; text-align: center; border-collapse: collapse;}

.reset{margin-left:20px;}
.footer_fixed{position : fixed;height : auto;width : 100%;text-align:center;font-size : 16px;font-weight:bold;bottom : 0;margin-left : auto;margin-right : auto;background-color: rgba(252, 78, 2,0.7);background-color:var(--div-bg-color);transition:background-color 2s;}
.footer_fixed:hover{background-color: rgba(252, 78, 2,1);background-color:var(--div-bg-color-hover);transition:background-color 2s;}
.box_shadow {box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7);}
.bouton_envoyer{cursor: pointer;font-size:1.25em;background-color: rgba(252, 78, 2,0.7);background-color:var(--div-bg-color);margin-left:0px;margin-right:10px;margin-top:0px;text-decoration:none;transition:background-color 2s;}
.bouton_envoyer:hover {cursor: pointer;font-size:1.25em;background-color: rgba(252, 78, 2,1);background-color:var(--div-bg-color-hover);margin-left:0px;margin-right:10px;margin-top:0px;transition:background-color 2s;}
.bouton_semaine{cursor: pointer;font-size:0.8em;background-color: rgba(252, 78, 2,0.7);background-color:var(--div-bg-color);margin-left:0px;margin-right:5px;margin-top:0px;text-decoration:none;margin-bottom:2px;transition:background-color 2s;}
.bouton_semaine:hover {cursor: pointer;font-size:0.8em;background-color: rgba(252, 78, 2,1);background-color:var(--div-bg-color-hover);margin-left:0px;margin-right:5px;margin-top:0px;margin-bottom:2px;transition:background-color 2s;}

.recap_cahier_contenu{margin-left:10px;margin-right:10px;}
.recap_tuto_contenu{margin-left:10px;margin-right:10px;}
.connect{width:100%;text-align:center;font-size:1.2em;margin-top:30px;}
.container_global_1{display :flex;align-items:center;justify-content:space-around;justify-content:space-evenly;margin-top : 20px;margin-bottom : 20px;flex-wrap : wrap;}
.container_global_2{display :flex;align-items : center;justify-content:space-around;justify-content:space-evenly;margin-top : 20px;margin-bottom : 20px;flex-wrap : wrap;}
.align_div{margin-top: 5px;height: 60px;vertical-align: middle;}
.container-1{width : 200px;height: 90px;border : 1px solid black;background-color: rgba(252, 78, 2,0.7);background-color:var(--div-bg-color);font-size:1.5em;font-weight:bold;text-align:center;transition:background-color 2s;margin-top:10px;}
.container-1:hover{width : 200px;height: 90px;border : 1px solid black;background-color: rgba(252, 78, 2,1);background-color:var(--div-bg-color-hover);font-size:1.5em;font-weight:bold;text-align:center;transition:background-color 2s;}
.container-animal{width : 200px;height: 90px;border : 1px solid black;background-color: rgba(252, 78, 2,0.7);background-color:var(--div-bg-color-animal);font-size:1.6em;font-weight:bold;text-align:center;transition:background-color 2s;margin-top:10px;}
.container-animal:hover{width : 200px;height: 90px;border : 1px solid black;background-color: rgba(252, 78, 2,1);background-color:var(--div-bg-color-animal-hover);font-size:1.6em;font-weight:bold;text-align:center;transition:background-color 2s;}
.container-plant{width : 200px;height: 90px;border : 1px solid black;background-color: rgba(252, 78, 2,0.7);background-color:var(--div-bg-color-plant);font-size:1.6em;font-weight:bold;text-align:center;transition:background-color 2s;margin-top:10px;}
.container-plant:hover{width : 200px;height: 90px;border : 1px solid black;background-color: rgba(134, 252, 150,1);background-color:var(--div-bg-color-plant-hover);font-size:1.6em;font-weight:bold;text-align:center;transition:background-color 2s;}
.container-image{width : 350px;height: 200px;border : 1px solid black;font-size:1.6em;font-weight:bold;text-align:center;margin-top:10px;}
/* Ouverture page utilisation */
.r-utilisation {	margin:0;padding:0;	position : fixed;top : 85%;	left:10px;	font-size:45px;z-index:9999;}
div a.utilisation:link , div  a.utilisation:visited{color: rgba(252, 78, 2,0.7);color:var(--div-bg-color);transition:color 2s;}
div a.utilisation:hover {color: rgba(252, 78, 2,1);color:var(--div-bg-color-hover);transition:color 2s;}

/*barre de progression accueil et recap module*/
#barre{width:80%;background-color:transparent;border-width:1px 1px 1px 1px; border-style:solid;height:20px;margin-left:auto;margin-right:auto;}
.barre_progress{
	float:left;	background-color: rgba(252, 78, 2,1);background-color:var(--div-bg-color-hover);height:100%;padding-left:0px;padding-top:0.5px;padding-bottom:-1px;margin-left:0px;}
/* Retour à la page d'accueil */
.r-top {margin:0;padding:0;	position : fixed;top : 85%;	right:10px;	font-size:45px;}
.recap_contact_contenu{margin : 0 20px 0 20px;}
 label.form1 {font-size:20px;font-weight:bold;}
.message {width:35%;height:auto;text-align:center;cursor:pointer;background-color: rgba(252, 78, 2,0.7);background-color:var(--div-bg-color);color:white;font-weight:bold}
div a.top:link , div  a.top:visited{color: rgba(252, 78, 2,0.7);color:var(--div-bg-color);transition:color 2s;}
div a.top:hover {color: rgba(252, 78, 2,1);color:var(--div-bg-color-hover);transition:color 2s;}
.login_moodle{background-color:rgba(252, 78, 2,0.4);background-color:var(--div-bg-color-dilue);font-size:24px;font-weight:bold;width : 90%;height : auto;margin-left : auto;margin-right : auto;padding-left : 10px;padding-right : 10px;}
.login_moodle a {text-decoration : underline black;color:red;}
.utilisation_general{display:flex;align-items : center;justify-content:space-around;justify-content:space-evenly;margin-top : 20px;margin-bottom : 20px;flex-wrap : wrap;}
.util1{width:404px;height:auto;padding-left:20px;padding-right:20px;text-align:justify;}
.stage_general_1{display :flex;align-items:center;justify-content:space-around;justify-content:space-evenly;margin-top : 20px;margin-bottom : 20px;flex-wrap : wrap;}
.stage_1{background-color: rgba(252, 178, 2,0.8);background-color:var(--div-bg-color);width : 300px;height: auto;border : 1px solid black;font-size:1em;text-align:center;transition:background-color 2s;margin-top:10px;}
.stage_1:hover{background-color: rgba(252, 78, 2,1);background-color:var(--div-bg-color-hover);transition:background-color 2s;}
.stage_1_b{background-color: rgba(65, 110, 251,0.8);background-color:var(--div-bg-color-stage-fini);width : 300px;height: auto;border : 1px solid black;font-size:1em;text-align:center;transition:background-color 2s;margin-top:10px;}
.stage_1_b:hover{background-color: rgba(65, 110, 251,0.8);background-color:var(--div-bg-color-stage-fini-hover);width : 300px;height: auto;border : 1px solid black;font-size:1em;text-align:center;transition:background-color 2s;margin-top:10px;}
.stage_general_2{display :flex;align-items:center;justify-content:space-around;justify-content:space-evenly;margin-top : 20px;margin-bottom : 20px;flex-wrap : wrap;}
.stage_2{background-color: rgba(252, 178, 2,0.8);background-color:var(--div-bg-color);width : 300px;height: auto;border : 1px solid black;font-size:1em;text-align:center;transition:background-color 2s;margin-top:10px;}
.stage_2:hover{background-color: rgba(252, 78, 2,1);background-color:var(--div-bg-color-hover);transition:background-color 2s;}
.stage_2_b{background-color: rgba(65, 110, 251,0.8);background-color:var(--div-bg-color-stage-fini);width : 300px;height: auto;border : 1px solid black;font-size:1em;text-align:center;transition:background-color 2s;margin-top:10px;}
.stage_2_b:hover{background-color: rgba(65, 110, 251,0.8);background-color:var(--div-bg-color-stage-fini-hover);width : 300px;height: auto;border : 1px solid black;font-size:1em;text-align:center;transition:background-color 2s;margin-top:10px;}
.evaluation_general{display :flex;align-items:center;justify-content:center;justify-content:center;margin-bottom : 20px;flex-wrap : wrap;}
.evaluation{background-color: rgba(252, 178, 2,0.8);background-color:var(--div-bg-color);width:150px;height:auto;border : 1px solid black;font-size:1em;text-align:center;transition:background-color 2s;margin-top:10px;}
.evaluation:hover{background-color: rgba(252, 78, 2,1);background-color:var(--div-bg-color-hover);transition:background-color 2s;}
.table_formation_2 {margin-top:20px; margin-right:auto; margin-bottom:30px; margin-left:auto; border:1px solid black; font-family:Arial, Helvetica, sans-serif; text-align: center; border-collapse: collapse;}
.td_formation_4 {vertical-align:middle; font-size: 12pt; font-family:Arial, Helvetica, sans-serif; text-align: center;border:1px solid black; border-collapse: collapse;}
.r-registre {margin:0;padding:0;position : fixed;color:orangered;top : 80%;right:15px;font-size:50px;z-index:4;}
div a.registre:link , div  a.top:visited{
	color:orangered;
}
@media only screen and (max-width:400px){
	
	.container_global_1{display :flex;align-items : center;flex-direction : column;justify-content:space-around;justify-content:space-evenly;margin-top : 20px;margin-bottom : 20px;}
.container_global_2{display :flex;align-items : center;flex-direction : column;justify-content:space-around;justify-content:space-evenly;margin-top : 20px;margin-bottom : 20px;}
.container-1{width : 100px;height: 80px;border : 1px solid black;background-color: rgba(252, 78, 2,0.7);background-color:var(--div-bg-color);font-size:1.1em;font-weight:bold;text-align:center;margin-top : 10px;margin-bottom : 10px;transition:background-color 2s;}
.container-1:hover{width : 100px;height: 80px;border : 1px solid black;background-color: rgba(252, 78, 2,1);background-color:var(--div-bg-color-hover);font-size:1.1em;font-weight:bold;text-align:center;transition:background-color 2s;}
.container-2{width:100px;height: 80px;border : 1px solid black;background-color: rgba(252, 78, 2,0.7);background-color:var(--div-bg-color);font-size:1.1em;font-weight:bold;text-align:center;margin-top : 10px;margin-bottom : 10px;transition:background-color 2s;}
.container-2:hover{width : 100px;height: 80px;border : 1px solid black;background-color: rgba(252, 78, 2,1);background-color:var(--div-bg-color-hover);font-size:1.1em;font-weight:bold;text-align:center;transition:background-color 2s;}
.container-3{width : 100px;height: 80px;border : 1px solid black;background-color: rgba(252, 78, 2,0.7);background-color:var(--div-bg-color);font-size:1.1em;font-weight:bold;text-align:center;margin-top : 10px;margin-bottom : 10px;transition:background-color 2s;}
.container-3:hover{width : 100px;height: 80px;border : 1px solid black;background-color: rgba(252, 78, 2,1);background-color:var(--div-bg-color-hover);font-size:1.1em;font-weight:bold;text-align:center;transition:background-color 2s;}
.container-4{width : 100px;height: 80px;	border : 1px solid black;background-color: rgba(252, 78, 2,0.7);background-color:var(--div-bg-color);font-size:1.1em;font-weight:bold;text-align:center;	margin-top : 10px;margin-bottom : 10px;	transition:background-color 2s;}
.container-4:hover{width : 100px;height: 80px;border : 1px solid black;background-color: rgba(252, 78, 2,1);background-color:var(--div-bg-color-hover);font-size:1.1em;font-weight:bold;text-align:center;transition:background-color 2s;}
.container-5{width : 100px;height: 80px;border : 1px solid black;background-color: rgba(252, 78, 2,0.7);background-color:var(--div-bg-color);font-size:1.1em;font-weight:bold;text-align:center;margin-top : 10px;margin-bottom : 10px;transition:background-color 2s;}
.container-5:hover{width : 100px;height: 80px;border : 1px solid black;background-color: rgba(252, 78, 2,1);background-color:var(--div-bg-color-hover);font-size:1.1em;font-weight:bold;text-align:center;transition:background-color 2s;}
.container-6{width : 100px;height: 80px;border : 1px solid black;background-color: rgba(252, 78, 2,0.7);background-color:var(--div-bg-color);font-size:1.1em;font-weight:bold;text-align:center;margin-top : 10px;margin-bottom : 10px;transition:background-color 2s;}
.container-6:hover{width : 100px;height: 80px;border : 1px solid black;background-color: rgba(252, 78, 2,1);background-color:var(--div-bg-color-hover);font-size:1.1em;font-weight:bold;text-align:center;transition:background-color 2s;}
.container-animal{width : 200px;height: 90px;border : 1px solid black;background-color: rgba(252, 78, 2,0.7);background-color:var(--div-bg-color-animal);font-size:1.3em;font-weight:bold;text-align:center;transition:background-color 2s;margin-top:10px;}
.container-animal:hover{width : 200px;height: 90px;border : 1px solid black;background-color: rgba(252, 78, 2,1);background-color:var(--div-bg-color-animal-hover);font-size:1.3em;font-weight:bold;text-align:center;transition:background-color 2s;}
.container-plant{width : 200px;height: 90px;border : 1px solid black;background-color: rgba(252, 78, 2,0.7);background-color:var(--div-bg-color-plant);font-size:1.3em;font-weight:bold;text-align:center;transition:background-color 2s;margin-top:10px;}
.container-plant:hover{width : 200px;height: 90px;border : 1px solid black;background-color: rgba(134, 252, 150,1);background-color:var(--div-bg-color-plant-hover);font-size:1.3em;font-weight:bold;text-align:center;transition:background-color 2s;}

}