*           /* 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;	
}


html, body     /*  laisser que body ? */
{
/*max-width: 1200px; livre p351*/
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;
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é*/ /*enlever car met le hamburgeur en rouge (remplcer le caractère par une image...*/
}
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 :yellow;	
/* color :white; */
/* text-decoration : underligne;  */
}
a:focus
{
}

/****************************************************************************************************************************************/

@media only screen and  (max-width: 480px)   /*  on peut aussi mettre en attribut d'une balise link pour selectionner une CCS (page513) */
{
#haut-page 
	{
/*	background:#ccc03f;   */  
	height: 0%;   /* deviendra height: 14% lors du click sur le bouton menu*/
	display: none;  /* deviendra grid lors du click sur le bouton menu*/
	/*display: grid ; */
	grid-template-columns: 1fr ;           	        
	grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-areas:"HCSat" "HCInsat" "Monoval" "Dival" "Trival" "Poly1";
	align-items: center;  
	justify-items: start;
	}
	
.tel
	{font-size: 40px;  /* bouton caractere hamburgeur pour le menu sur tel portable*/
	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 */
	background:white;
	width: 100%;
	/*border: solid;
    border-width: 5px;*/
	}
	
div[class^="famille"]           /* Menu du haut de page       selectionne toute les balises <div> dont la propriété class commence par famille  */
	{
	font-size: 10px;            /*taille du texte du menu haut de page*/
	height: 10px;               /*hauteur de la zone de texte*/               
	/*width: 90%;              /*largeur de la zone de texte*/
	text-align: left ;  /* normal  inherit   right   center    justify  */
	}
#main
	{
/*	background:#ccc03f; */
	top: 17%;
	grid-template-columns: 1fr 1fr;                     /* pour mettre les images les unes en desssous des autres et non 3 par ligne comme pour ecran large*/     	     
	grid-template-rows: repeat(6,4fr 1fr 1fr 1fr);          
	/*grid-template-rows: 4fr 1fr 1fr 1fr 4fr 1fr 1fr 1fr 4fr 1fr 1fr 1fr 4fr 1fr 1fr 1fr 4fr 1fr 1fr 1fr 4fr 1fr 1fr 1fr; */
	grid-template-areas:"HC1 HC1" "Saisie1 Saisie1"	"V1 R1" "AideNb1 AideInd1" "HC4 HC4" "Saisie4 Saisie4" "V4 R4" "AideNb4 AideInd4"
                    "HC2 HC2"                                    
                    "Saisie2 Saisie2"            
					"V2 R2"                                          
					"AideNb2 AideInd2"         
					"HC5 HC5"
					"Saisie5 Saisie5"
					"V5 R5"
					"AideNb5 AideInd5"
                    "HC3 HC3"                                    
                    "Saisie3 Saisie3"            
					"V3 R3"                                          
					"AideNb3 AideInd3"         
					"HC6 HC6"
					"Saisie6 Saisie6"
					"V6 R6"
					"AideNb6 AideInd6";
	}
	
/*#accueil
	{
	top: 17%;
	}*/
}

@media only screen and (min-width: 480px) and (max-width: 950px)
{
.tel{font-size: 0px};  /* bouton caractere hamburgeur pour le menu sur tel portable non visible pour cette taille d'écran*/
#haut-page
	{
/*	background:#5cc665;   */
	height: 14%; 
	display: grid ;
	grid-template-columns: 1fr 1fr 1fr ;           	    
	grid-template-rows: 1fr 1fr ;
	grid-template-areas:"HCSat HCInsat Monoval" "Dival Trival Poly1";
	align-items: center;
    justify-items: center;
	}
#main
	{
	/*background:#5cc665;  */
	top: 17%;
	grid-template-columns:1fr 1fr 1fr 1fr ;                     /*repeat( 150px 150px 150px 150px 150px 150px);    */      	     
	grid-template-rows: 4fr 1fr 1fr 1fr 4fr 1fr 1fr 1fr 4fr 1fr 1fr 1fr;                     /*  (200px 10px 10px 10px 200px 10px 10px 10px);*/
	grid-template-areas:"HC1 HC1 HC2 HC2"                                    /* HC image de la molécule d'hydrocarbure*/
                    "Saisie1 Saisie1 Saisie2 Saisie2"            /* Saisie1 champ pour la saisie du nom de la molécule*/
					"V1 R1 V2 R2"                                          /* V bouton vérification de la réponse  R bouton réponse*/
					"AideNb1 AideInd1 AideNb2 AideInd2"         /* AideNb1 bouton aide nombre de carbone   AideInd1 bouton aide ensemble d'indice*/
					"HC4 HC4 HC5 HC5"
					"Saisie4 Saisie4 Saisie5 Saisie5"
					"V4 R4 V5 R5"
					"AideNb4 AideInd4 AideNb5 AideInd5"
					"HC3 HC3 HC6 HC6"                                    /* HC image de la molécule d'hydrocarbure*/
                    "Saisie3 Saisie3 Saisie6 Saisie6"            /* Saisie1 champ pour la saisie du nom de la molécule*/
					"V3 R3 V6 R6"                                          /* V bouton vérification de la réponse  R bouton réponse*/
					"AideNb3 AideInd3 AideNb6 AideInd6"  ;       /* AideNb1 bouton aide nombre de carbone   AideInd1 bouton aide ensemble d'indice*/
	align-items: center;
	justify-items: center;
	}
div[class^="famille"]      /* Menu du haut de page                    selectionne toute les balises <div> dont la propriété class commence par famille  */
	{
	font-size: 14px; /*taille du texte du menu haut de page*/
	height: 30px;                             /*line-height : 15px;     pour modifier l'interligne */
	/*	width: 90%;              /*largeur de la zone de texte  PAS GERER EST PAR DEFAUT CELA SEMBLE OK MAIS DU COUP NON MAITRIS2E */
	
	}
/*#accueil
	{
	top: 17%;
	}*/
}

@media only screen and (min-width: 951px)
{
.tel{font-size: 0px};  /* bouton caractere hamburgeur pour le menu sur tel portable non visible pour cette taille d'écran*/
#haut-page
	{
/*	inline-size: 1200px;*/
/*	background:#5c5965; */
	height: 7%; 
	display: grid ;
	grid-template-columns:1fr 1fr 2fr 2fr 2fr 2fr;           	    /*pour écran ordinateur large*/
	grid-template-areas:"HCSat HCInsat Monoval Dival Trival Poly1";
	grid-template-rows: 1fr ;
	align-items: center;
    justify-items: left;   /*justify-items: center;*/
	align-content: start;    
/*max-width: 100%;   /************n'a pas d'effet****************************************************************/	
	/*	align-content: space-between;      space-between : ré­par­ti­tion uniforme de l’espace entre les cellules*/
	}
div[class^="famille"]      /* Menu du haut de page                    selectionne toute les balises <div> dont la propriété class commence par famille  */
	{
	font-size: 14px; /*taille du texte du menu haut de page*/
	height: 30px;                      /*line-height : 15px;     pour modifier l'interligne */
	/*	width: 90%;              /*largeur de la zone de texte  PAS GERER EST PAR DEFAUT CELA SEMBLE OK MAIS DU COUP NON MAITRIS2E */
	}
#main
	{
	background:#5c5965;
	top: 10%;
	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 champ 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";
	align-items: center;
	justify-items: center;     /*(on peut personnaliser chaque celllule de la grille (fond bordures etc..)*/
	}
/*#accueil
	{
	top: 10%;
	}	*/
}

#haut-page       /*  contient le menu */
{
background:#5c5965;
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%;
margin: 0;
padding: 5px;    
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*/
column-gap: 5px;        /*row-gap: 20 px;    column-gap: 20 px;           /* autre synthase pour ancien navigateur : grid-row-gap */
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  */
{
/*	overflow: auto; */
/*overflow: hidden;   /* coupe effectivement sur la hauteur mais pas pour la longueur ?*/
/*overflow: auto; /* ajout scroll si necessaire*/
/*overflow: scroll;*/
font-family: Arial, sans-serif;          /* text-decoration   et text-transform  peut être utile */
color: black;
letter-spacing: 2px;
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*/
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;
width: 100%;
height: 100%; 
margin: 0;
padding: 0;  /*padding-bottom : 160px;*/
border: none;   
/*border-top:solid;
border-width: 7px;
border-top-color:blue; */ 
display: grid ;      /* mise en page de la page *****************************************/
gap: 10px 10px;        /*row-gap: 20 px;    column-gap: 20 px;           /* autre synthase pour ancien navigateur : grid-row-gap */
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;
}
/*
#main .structure                             /* mettre toute la chaine si plusieurs imbrications un peu long mais plus sur
{
width: 20%;
height: 20%;
border-color: red;
border: solid;
margin: 0;
padding: 0;
/*border: none;*/
/*float: left;*/
/*background:#FF00FF;*/
/*}*/

	

img[class="logo"]   /*Logo de l'insa qui s'affiche sur la page d'accueil*/   /* des <BR> dans le HTML pour position....*/
{
position: static;   
/*left: 150px ;*/
/*top: 60px;*/
/*width: 100%; */
/*height: 100%; */ 
/*top: 17%;*/
display: block;
/* width: 332px;   height: 72px;    ne pas utiliser car taille différente selon écran*/ 
border: solid;
margin: 0px;
padding: 0px;
/*box-shadow: 0px 0px 15px 20px #000 inset ;  OK mais mettre des marges pour que cela soit visible*/
float: right; 
margin-right: 10px;
}

div[class^="accueil"]
{
/*border: solid;
border-color: red ;    
border-radius: 40px;
border-width: 4px;	*/
font-weight: bold ;  
font-style: normal ;    
text-align: left ;
margin-right: 10px;
margin-left: 10px;
}

div[class="accueil-1"]       /*texte qui s'affiche sur la page d'accueil*/
{
position: static;
display: block;
font-size: 2rem;
}
div[class="accueil-5"]  /*texte qui s'affiche sur la page d'accueil*/
{
position: static;	
display: block;
font-size: 2rem;
}
div[class="accueil-2"]  /*texte qui s'affiche sur la page d'accueil*/
{
position: static;	
display: block;
font-size: 1.5rem;
}
div[class="accueil-3"]  /*texte qui s'affiche sur la page d'accueil*/
{
position: static;	
display: inline;
font-size: 1rem;
}
div[class="accueil-4"]  /*texte qui s'affiche sur la page d'accueil*/
{
position: static;	
display: inline;
font-size: 1rem
}
  
}