@charset "utf-8";
#conteneur{
  display: grid;
  grid-gap: 20px;	
}
#plan{
	background-repeat:no-repeat;
	box-shadow: 5px 7px 12px #bcbcc1;	
}
#col_droite{
	vertical-align:top;
	margin-left:20px;
	width:900px;
}
#logo{
	width:44px;
}
.inline_block{
	display:inline-block;
}
table {
 border-collapse:collapse;
 }
th, td {
 border:1px solid black;
 }
td {
 text-align:center;
 }
caption {
 font-weight:bold
 }
#sur{
	font-size:0.6em;
	color:#666;
}
#fenetre_modale{
 font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
 padding:30px;
  position: absolute; 
  z-index: 0;
  overflow: auto;
background-color: #CBE1F4;
  border-radius: 15px !important;
  width: 551px;
  height: 550px;
  margin-left: 200px;
  margin-top: 130px;
	border:#000 3px solid;
	box-shadow: 5px 7px 12px #bcbcc1;	
}	

#accueil{
	padding-left:20px;
}

#bandeau_accueil{
	margin-bottom:40px;
}

#accueil_ligne_1,#accueil_ligne_2,  .bloc_projet_cd_l1a, .bloc_projet_cd_l2, .bloc_projet_cd_l1c{
	 font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}

#accueil_ligne_1{
	font-size:5em;
}


#accueil_ligne_2{
	font-size:1.8em;
	letter-spacing: 0.5rem;	
}

#accueil_intro{
	padding:80px;
	font-size:1.9em;
	line-height: 1.3em;
	color:#333;
}

#picto_home{
	font-size:2em;
}

#accueil_projets{
	display: flex;
	flex-wrap: wrap;
	padding:20px;
}


.bloc_projet_img, .bloc_projet_col_droite, .bloc_projet_cd_l2{
	padding:15px;
}

.bloc_projet_col_droite A{
	text-decoration:none;
	color:#000;
}

.bloc_projet_img img{
	width:300px;
}

.accueil_bloc_projet{
	width:400px;
	padding:10px;
	margin:20px;
	border:thin #F00 solid;
}


.bloc_projet_cd_l1a{
	font-size:2em;
	font-weight:bold;
}

.bloc_projet_cd_l1b{
	font-size:1.2em;
	letter-spacing: 0.1rem;	
}


.bloc_projet_cd_l2 a{
	margin-top:2em;
	color:#FFF;
	letter-spacing: 0.2rem;	
	font-weight:bold;	
	text-decoration:none;
	background-color:#03C;
  border: 1px solid #797979;
	text-align: center;
padding: 4px 12px 4px 9px;
  -webkit-border-radius: 3px !important;
  -moz-border-radius: 3px !important;
  border-radius: 12px !important;
  margin-left:3px;
}

#lien_accueil{
	color:#000;
	text-decoration:none;
}

.clear{
	clear: both;
}

#bandeau_superieur{
	height:4em;
}
#bandeau_milieu{
	height:375px;
	margin-top:20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;	
	
}
#bandeau_bas{
	background: url("https://adamo.retrotechnique.org/img/degrade.png") no-repeat center top;
	margin-top:25px;
	height:370px;
	display: flex;
	align-items: flex-end;	
}

#loupe{
	width:300px;
	height:300px;
	background-repeat:no-repeat;
	margin:20px;
	border:thin solid #666;
	border-radius:50%;
	box-shadow: 5px 7px 12px #bcbcc1;
}

#cadre_nomenclature{
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;	
	margin:20px;
	width:470px;
	height:264px;
	padding:20px;
	background-color:#EEE;
	vertical-align:bottom;
	border:thin solid #666;
	border-radius:5%;
	box-shadow: 5px 7px 12px #bcbcc1;	
}
#sur_loupe{
	position:absolute;
	width:300px;
	height:300px;
	border:thin solid #F00;
	border-radius:50%;
	background-repeat:no-repeat;
}
.encadre_composant_rouge_loupe{
	padding:20px 25px 14px 33px;
	border:thick solid red;
}
.encadre_composant_vert_loupe{
	padding:20px 25px 14px 33px;
	border:thick solid green;
}

.ligne_etape{
	background-color: #fbf9ec;
	padding:20px;
	border:#666 thin solid;
	width: 100%;
	display: flex;
	align-items: flex-end;	
}
.cellule_navigation{
	text-align:left;
	margin-top:22px;
	margin-left:20px;
	font-size:2em;
	color:#333;
}
.pseudo_bouton_vert{
text-align: center;
  background-color: #92EA60;
  padding: 6px 18px;
  -webkit-border-radius: 3px !important;
  -moz-border-radius: 3px !important;
  border: 1px solid #0000FF57;
  border-radius: 15px !important;
  margin-top: 3px;
  margin-left:2px;
  text-decoration: none;
  color: #17142d;
 font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;  
  font-size: 1.2em;
  font-weight: normal;
}
#div_titre{
	font-family:Tahoma, Geneva, sans-serif;
	font-size:2.4em;
	background-color:#9A9CA2;
	color:#FFF;
	margin:6px 12px;
	padding:8px;
	width:80%;

}
.bouton_choix{
	border:#666 thin solid;
	border-radius:12px;
	padding:5px;
}
.bouton_choix_petit{
	border:#666 thin solid;
	border-radius:10px;
	padding:4px;
  text-decoration: none;
  color:#000;
  font-size:0.7em;	
}
.bouton_choix_petit a{
  text-decoration: none;
  color:#000;
  font-size:0.7em;	
	
}
.bouton_choix_petit:hover{
	background-color:#F44;
}
.bouton_choix:hover{
	background-color:#5BF;
}
.bouton_choix,  .bouton_choix a, .bouton_choix form{
  text-decoration: none;
  color:#000;
  letter-spacing:0.1em;
  font-size:1.1em;
}
.bouton{
	background-color: #EFF0F0;
  border: 1px solid #797979;
	text-align: center;
padding: 14px 12px 4px 9px;
  -webkit-border-radius: 3px !important;
  -moz-border-radius: 3px !important;
  border-radius: 12px !important;
  text-decoration: none;
  color: #17142d;
  margin-left:3px;
}
#hoveretendsuite:hover:after{
	content:" Valider et passer à la suite";
}
#hoveretendfait:hover:after{
	content:" Prochain élément à placer";
}
#hoveretendprec:hover:before{
	content:"Revoir l'étape précédente ";
}

#joystick{
	width:60px;
	  border: 1px solid red;
	  border-radius:5%;
}
.texte_gris{
	color:#999;
	font-size:0.8em;
}
.index{
	padding:10px;
	font-size:1.2em;
	color:#000;	
	text-align:center;
	font-weight:bold;
	width:80px;
}
#instructions{
	padding:12px;
	font-size:1.2em;
	letter-spacing:0.1rem;
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
#fiche{
	font-size:1.4em;
}
#div_photo{
	height:215px;
}
#photo_fiche{
	max-width:200px;
	max-height:160px;
}
.help{
	cursor:help;
}
.actif{
	color:#000;
}
.inactif{
	color:#999;
}
#pointeur {
  position: absolute;
  z-index: 9;
  border: 1px solid #d3d3d3;
  text-align: center;
  top:700px;
  left:1100px;
}
#form_pointage{
	background-color:#FFC;
}
.composant_sur_plan{
	position: absolute;
	cursor:pointer;
}
.rota_m90{
	transform: rotate(-90deg);
}
.rota_p90{
	transform: rotate(90deg);
}
.rota_180{
	transform: rotate(180deg);
}
.avatar{
	width:47px;
	border-radius:50%;
}
#div_avatar{
	padding:7px;
}
.deconnexion{
	font-size:0.4em;
}
#cestfait{
	margin-top:24px;
	margin-bottom:8px;
	font-size:0.8em;
	
}
.legende{
	height:185px;
	padding: 10px 25px 10px 25px;
}
#progression{
	display: inline-block;
	background-color:#CCCCCC3D;
	width:200px;
	border:#666 solid thin;
}
#curseur{
	height:25px;
	background-color:#92EA60;
	font-size:0.6em;
}
#conteneur_progression{
	margin-left: 60px;
  display: inline-block;
}
#liens{
	margin-top:50px;
}
#liens A, #liens form, .lien{
	font-family:Tahoma, Geneva, sans-serif;
	margin-left:25px;
	display:block;
	font-size:20px;
	text-decoration:none;
	color:black;
}
.check_vert{
	color:green;
	font-size:1.3em;
	font-weight:bold;
}
#icone{
height: 36px;
  padding-right: 30px;

}
#stats{
	margin-top:50px;
	border-top:#999 thin solid;
	border-bottom:#999 thin solid;	
	text-align:center;
	letter-spacing: .1rem;
	padding:6px;
}
#copyright{
	margin-top:5px;	
	text-align:center;
	letter-spacing: .1rem;
}
.centre{
	margin-top:25px;
	margin-left:20px;
}
.item-a {
  grid-area: composant_nom;
background-color: white;  
color:#333;
}
.item-b {
  grid-area: composant_emplacement;
background-color: white;  
color:#333;
}
.item-c {
  grid-area: composant_item;
background-color: white;  
color:#333;
}
.composant_grille {
  display: grid;
  box-sizing: border-box;
  background-color: #666;  
  grid-gap:2px;    
  grid-template-columns: 70% 30%;
  grid-template-rows: auto;
  grid-template-areas: 
    "composant_nom composant_nom"
    "composant_emplacement composant_item";
}
</style>