*           /* selecteur universel selectionne toutes les balises pour remettre à zéro (il y a des valeurs par defaut via le navigateur) permet de tout controler*/
{
margin: 0;
padding: 0;	
}

/*
iframe.choix     visiblement ne fonctionne pas 
{
border: solid;
 border-width: 5px;    
 width: 100%;
 height: 100%;  
background:blue ;  
}
*/

html, body
{
width: 100%;
height: 100%;
margin: 0;  /* pour les 4 coté ou séparement padding-bottom , padding-left , padding-right, padding-top*/
padding: 0;
border: none;
background:#5c5965; 
/*background:#D2CAEC; */
font-family: Arial, sans-serif;   
color: black;                                 
font-size: 14px;
font-weight: normal ;  /* 400 normal,700 pour mettre en gras (entre 100 et 900 mais vérifier si OK pour navigateur) */
font-style: normal ;   /* italic     inherit pour récuperer le style du parent*/
text-align: left ;  /* normal  inherit   right   center    justify  */
/*line-height : 15px;     pour modifier l'interligne */
/* text-decoration   et text-transform  peut être utile */

}

/*********** PSEUDOCLASS  POUR LES LIENS ou autre objet *****************************************************************************************************************************/
a:link   /* link pseudoclass */   /* possible de regrouper a:link ,a:visited {  } */  /* a:matches(:link,:visited,:hover,:active) {  } active le style si un des cas entre parenthèse est vrai  */
{
color :black; 
text-decoration: none;    /* text-decoration : underligne;  */
}
a:visited   /* boolén pseudoclass */
{
color :red;	 /*   couleur du lien déjà visité*/
}
a:hover   /* survol du lien pseudoclass */     /*  utilisable pour les boites correspondant à un <div> ou <article> contenant text ou image*/
{
}
a:active   /*  quand le lien vient d'êtte cliquer (pseudoclass)    si le clic recharche la page l'effet ne sera pas visible*/
{
color :red;	
/* color :white; */
/* text-decoration : underligne;  */
}
a:focus
{
}
/****************************************************************************************************************************************/

@media only screen and (max-width: 500px)   /*  OK OK CONTINUER CELA MARCHE reDIMENSIONER GRID UNE SEULE COLONNE  (et taille image ?) */
{
#haut-page {background:#ccc03f;     }
}
@media only screen and (min-width: 500px)
{
#haut-page {background:#5c5965;;     }
}

#haut-page
{
position:fixed;   /*boite haut de page reste à la même position*/    
left: 0px;
top:0px;	
z-index:100;  /*calque : reste en avant en cas de défilement non utilisable si position:static */
width: 100%;
height: 7%; /**/
/*height: 50px;*/
margin: 0;
padding: 10px; 
border: solid;
border-width: 0;
border-bottom-color:black;
border-bottom-width : 4px;

/*background:#5c5965 ;   */  /*gris foncé  92  89  101*/      /* #D2CAEC;    210  202  236 gris clai violet initial*/

display: grid ;
grid-template-columns: 1fr 1fr 2fr 2fr 2fr 2fr;   /* repeat (6, 1fr);  */        	     /* defini le nombre de colonnes*/
grid-template-rows: 1fr ;
grid-template-areas:"HCSat HCInsat Monoval Dival Trival Poly1";
					/*" Poly1 Poly2 Poly3 Poly4 Poly5 ";*/
gap: 10px 10px;        /*row-gap: 20 px;    column-gap: 20 px;           /* autre synthase pour ancien navigateur : grid-row-gap */
align-items: center;
justify-items: center;
grid-auto-flow: row;  /* valeur par défaut correspond au remplissage de la grille par rangée à partir de la gauche*/
/*pour aligner les rangées et les colonnes dans la grille mais dimension grille avec fr donc valeur stretch pour "align-content:" et "align-content:"      align-content: center;  align-content: center; */
}

.famille1 {grid-area:HCSat;}      /* Menu du haut de page */
.famille2 {grid-area:HCInsat;}
.famille3 {grid-area:Monoval;}
.famille4 {grid-area:Dival;}
.famille5 {grid-area:Trival;}
.famille6 {grid-area:Poly1;}
/*.famille7 {grid-area:Poly2;}
.famille8 {grid-area:Poly3;}
.famille9 {grid-area:Poly4;}
.famille10 {grid-area:Poly5;}
.famille11 {grid-area:Poly6;}
.famille12 {grid-area:Poly7;}*/

.famille1:hover {background:rgb(99,163,245);}     /*bleu plus foncé  #63a3f2*/  /* Menu du haut de page */
.famille2:hover {background:rgb(99,163,245);}
.famille3:hover {background:rgb(99,163,245);}
.famille4:hover {background:rgb(99,163,245);}
.famille5:hover {background:rgb(99,163,245);}
.famille6:hover {background:rgb(99,163,245);}

/*.famille1:focus*/


div[class^="famille"]      /* Menu du haut de page                    selectionne toute les balises <div> dont la propriété class commence par famille  */
{
height: 30px;                             /*line-height : 15px;     pour modifier l'interligne */
font-family: Arial, sans-serif;          /* text-decoration   et text-transform  peut être utile */
color: black;
letter-spacing: 2px;
font-size: 14px; 
font-weight: bold ;  /* 400 normal,700 pour mettre en gras (entre 100 et 900 mais vérifier si OK pour navigateur) */
font-style: normal ;   /* italic     inherit pour récuperer le style du parent*/
text-align: center ;  /* normal  inherit   right   center    justify  */
margin: 0;   /*pour les 4 coté ou séparement padding-bottom , padding-left , padding-right, padding-top*/
padding: 5px;
padding-left: 10px; 
padding-right:10px; 
border:none;
border-radius: 40px;
/*border:solid;
border-radius: 40px;
border-width: 3px;
border-color: black; */
background:rgb(176,205,242);   /* #b0cdf2   bleu gris clair*/
}



#main
{
position:absolute;  
left: 0px;
top:35px;	
width: 100%;
height: 86%; /*
height: 100%;*/
margin: 0;
padding: 0;
border: none;
/*//border: solid;
//border-width: 7px;
//border-top-color:blue;*/

background:#5c5965;
    
display: grid ;      /* mise en page de la page *****************************************/
/*grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;          	     /* defini le nombre de colonnes repeat (6 ,1fr);   */
/*grid-template-rows: 6fr 1fr 1fr 1fr 6fr 1fr 1fr 1fr;*/
grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;                     /*repeat( 150px 150px 150px 150px 150px 150px);    */      	     
grid-template-rows: 4fr 1fr 1fr 1fr 4fr 1fr 1fr 1fr;                     /*  (200px 10px 10px 10px 200px 10px 10px 10px);*/
grid-template-areas:"HC1 HC1 HC2 HC2 HC3 HC3"                                    /* HC image de la molécule d'hydrocarbure*/
                    "Saisie1 Saisie1 Saisie2 Saisie2 Saisie3 Saisie3"            /* Saisie1 hamp pour la saisie du nom de la molécule*/
					"V1 R1 V2 R2 V3 R3"                                          /* V bouton vérification de la réponse  R bouton réponse*/
					"AideNb1 AideInd1 AideNb2 AideInd2 AideNb3 AideInd3"         /* AideNb1 bouton aide nombre de carbone   AideInd1 bouton aide ensemble d'indice*/
					"HC4 HC4 HC5 HC5 HC6 HC6"
					"Saisie4 Saisie4 Saisie5 Saisie5 Saisie6 Saisie6"
					"V4 R4 V5 R5 V6 R6"
					"AideNb4 AideInd4 AideNb5 AideInd5 AideNb6 AideInd6";
					
gap: 1px 1px;        /*row-gap: 20 px;    column-gap: 20 px;           /* autre synthase pour ancien navigateur : grid-row-gap */
align-items: center;
justify-items: center;
grid-auto-flow: row;     /* fin mp de la page *******************************/
}
/* Position des images dans la grille*/
.structure1 {grid-area:HC1; } 
.structure2 {grid-area:HC2; } 
.structure3 {grid-area:HC3; } 
.structure4 {grid-area:HC4; }
.structure5 {grid-area:HC5; } 
.structure6 {grid-area:HC6; } 
/* Position du champ de saisie du nom de la molécule*/
.nom1 {grid-area:Saisie1; } 
.nom2 {grid-area:Saisie2; } 
.nom3 {grid-area:Saisie3; } 
.nom4 {grid-area:Saisie4; } 
.nom5 {grid-area:Saisie5; } 
.nom6 {grid-area:Saisie6; } 
/* Position du bouton vérifier la réponse*/
.verifier1 {grid-area:V1;} 
.verifier2 {grid-area:V2;} 
.verifier3 {grid-area:V3;} 
.verifier4 {grid-area:V4;} 
.verifier5 {grid-area:V5;}
.verifier6 {grid-area:V6;}
/* Position du bouton donnant la réponse*/
.verifierReponse1 {grid-area:R1;} 
.verifierReponse2 {grid-area:R2;} 
.verifierReponse3 {grid-area:R3;} 
.verifierReponse4 {grid-area:R4;} 
.verifierReponse5 {grid-area:R5;} 
.verifierReponse6 {grid-area:R6;} 
/* Position du bouton aide nombre de carbone*/
.verifierNb1 {grid-area:AideNb1;} 
.verifierNb2 {grid-area:AideNb2;} 
.verifierNb3 {grid-area:AideNb3;} 
.verifierNb4 {grid-area:AideNb4;} 
.verifierNb5 {grid-area:AideNb5;} 
.verifierNb6 {grid-area:AideNb6;} 
/* Position du bouton aide ensemble d'indice*/
.verifierIndice1 {grid-area:AideInd1;} 
.verifierIndice2 {grid-area:AideInd2;} 
.verifierIndice3 {grid-area:AideInd3;} 
.verifierIndice4 {grid-area:AideInd4;} 
.verifierIndice5 {grid-area:AideInd5;} 
.verifierIndice6 {grid-area:AideInd6;} 
   

img[class^="structure"]      /*image des molécules*/      /*selectionne toute les balises <img> dont la propriété class commence par structure  */
{
margin: 0;                  
margin-top: 40px;
padding:5px;                 /*pour les 4 coté ou séparement padding-bottom , padding-left , padding-right, padding-top*/
border:solid;
border-radius: 40px;
border-width: 2px;
border-color: black;
background:#CCC;
max-width:100%;     /* permet d'ajuster automatiquement la taille de l'image dans l'item grid)  marche ?*/
height:auto;
}


#bas-page
{
position:fixed;   /*boite haut de page reste à la même position*/    
left: 0px;
bottom:0px;	
z-index:100;  /*calque : reste en avant en cas de défilement non utilisable si position:static */	
/*position:absolute;  
left: 0px;
top:460px;*/
width: 100%;
height: 7%; /*
height: 54px;*/
margin: 0;
padding: 0;
background:#5c5965;
border: solid;
border-width: 0;
border-top-color:black;
border-top-width : 4px;
}
#titre       /* le titre est dans le bas de page #bas-page */
{
position:relative;
left:200px;
top: 12px;
border: none;
font-family: Arial, sans-serif;   
color: black;                                 
font-size: 20px;
font-weight: bold ;  /* 400 normal,700 pour mettre en gras (entre 100 et 900 mais vérifier si OK pour navigateur) */
font-style: normal ;   /* italic     inherit pour récuperer le style du parent*/
text-align: right ;
}
#logo   /*Logo de l'insa qui s'affiche en bas à gauche*/
{
width: 221px;
height: 48px;
border: none;
margin: 0px;
padding: 0px;
/*box-shadow: 0px 0px 15px 20px #000 inset ;  OK mais mettre des marges pour que cela soit visible*/
float: left;
background:#5c5965;
}

#main .structure                             /* mettre toute la chaine si plusieurs imbrications un peu long mais plus sur*/
{
width: 20%;
height: 20%;
border-color: black;
border: solid;
margin: 0;
padding: 0;
/*border: none;*/
/*float: left;*/
background:#FF00FF;
}

/*background-image: url("../Images/montagne.jpg");*/