/* Configuration pour écrans de type PC (horizontal) */
@media(min-width: 1001px)  and (max-width: 10000px){

html{
  background-color: black;
}
  
  body{
    width: 80%;
    margin: auto;
  }

  .ecran-smart{
    visibility: hidden;
    height: 0;
  }
 
  #Titre{
    width: 50%;
    margin: 30px auto 30px auto;
    text-align: center;
  }
  
  #conteneur{
	  width: 100%;
    background-color:rgb(0 0 0 / 0.01);
    margin: auto;
    display: grid;
    grid-template-columns:  1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows:  50px;
    grid-template-areas:
      "HTML CSS Structure Avances Annexes Javascript";
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    border-radius: 20px;
/*    border : 1px solid white;*/
  }

  .menu{
    display: grid;
    justify-content: center;
    align-content: center;
	  text-align: center;
    border-radius: 10px;
    border : 1px solid white;
  }
  .menu2{
    border : 1px solid rgb(121, 56, 56);
  }
  .menu:hover{
   transition-duration: 1s;
   background-color: white;
   color: black;
  }
  .menu2:hover{
    background-color: rgb(134, 69, 69);
    color: rgb(105, 8, 8);
   }
  .menu a{
    color: lightblue;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    transition: transform .3s;
    height: 100%;
    width: 100%;
  }
  .menu2 a{
    color: lightcoral; 
    font-size: 12px; 
  }
  .menu a:hover{
    transform: scale(1.1);
    color: black;
  }
  .menu2 a:hover{
    transform: scale(1);
    color: white;
  }
  
  #HTML{
    grid-area: HTML;
  }

  #CSS{
    grid-area: CSS;
  }
  
  #Structure{
    grid-area: Structure;
  }

  #Avances{
    grid-area: Avances;
  }
  
  #Javascript{
    grid-area: Javascript;
  }
  
  #Annexes{
    grid-area: Annexes;
  }

.tuto{
	max-width: 100%;
	margin: auto;
}
 
.cadre-tuto{
  background-color: rgb(221, 220, 220);
	max-width: 100%;
	margin: auto;
	color: black;
  border-radius: 10px;
  border : 1px solid white;
	padding: 10px;
}
 
 a{
		color: blue;
 }
}
/* Fin des éléments spécifiques aux écrans de type Pc (avec souris)*/


/*-----------------------------------------------------------------------------------------------------------------*/

/* Configuration pour écrans de type smartphone (verticaux) */
@media(max-width: 1000px){

html{
  background-color: black;
}

  
  body{
    width: 100%;
    margin: auto;
  }

  .ecran-pc{
    display:none;
  }
  
  #Titre{
    width: 100%;
    margin: 10px auto 10px auto;
	  text-align: center;
  }

  #conteneur{
  /*  position: sticky;*/
  /*  top: 0px;*/
    max-width: 95%;    
    width: 100%;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 50px 50px;
    grid-template-areas:
      "HTML CSS Structure"
      "Avances Annexes Javascript";
    grid-column-gap: 10px;
    grid-row-gap: 10px;
/*    border-radius: 20px;
    border: 1px solid white;*/
  }
  
  .menu{
    display: grid;
    justify-content: center;
    align-content: center;
    color: white;
    text-align: center;
    border-radius: 10px;
    border: 1px solid white;
  }
  .menu2{
    border : 1px solid rgb(121, 56, 56);
     /*  position: sticky;*/
     top: 0px;
  }
  .menu:hover{
   transition-duration: 1s;
   background-color: white;
   color: black;
  }
  .menu2:hover{
    background-color: rgb(134, 69, 69);
    color: rgb(105, 8, 8);
   }
  
  .menu a{
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
  }
  .menu2 a{
    color: lightcoral;  
  }
  .menu a:hover{
    color: black;
  }
  .menu2 a:hover{
    color: white;
  }
    
  #HTML{
    grid-area: HTML;
  }

  #CSS{
    grid-area: CSS;
  }
  
  #Structure{
    grid-area: Structure;
  }

  #Avances{
    grid-area: Avances;
  }
  
  #Javascript{
    grid-area: Javascript;
  }
  
  #Annexes{
    grid-area: Annexes;
  }
  
.tuto{
	max-width: 95%;
	margin: auto;
}
	
.cadre-tuto{
  background-color: rgb(221, 220, 220);
	margin: auto;
	color: black;
  border-radius: 10px;
  border : 1px solid white;
	padding: 10px;
}
}
/* Fin des éléments spécifiques aux écrans de type smartphone (verticaux) */

a{
  color:red;
}

.codehtml{
  width:90%;
  overflow: auto;
  background-color:rgb(236, 186, 186);
  margin: auto;
  padding: 10px;

}

strong{
  color: blue;
  font-size: 1.1em;
  font-weight: normal;
}
.strong1{
  color: orangered;
  font-size: 1em;
  font-weight: normal;
}

.menuselect{
  background-color: white;
  color: black; 
 }
 .menuselect2{
  background-color: rgb(172, 95, 95);
  color: white; 
 }
.menuselect a{
  background-color: white;
  color: black; 
 }
 .menuselect2 a{
  color: white; 
 } 

 .maxi:hover{
  transform: scale(1.5);
}