/******responsive  (cf theme.css dans quinting)**********/
@media (min-width: 576px) {            
  .hidden-sm-up { display: none; } }

@media (max-width: 575px) {          
  .hidden-xs-down { display: none; } }  


/******Boutons vert rouge gris**********/
input[type="radio"].ouiFonce,
input[type="radio"].oui,
input[type="radio"].ouiClair, 
input[type="radio"].non,
input[type="radio"].blanc {
  display: none;
}
input[type="radio"].ouiFonce + label,
input[type="radio"].oui + label,
input[type="radio"].ouiClair + label,
input[type="radio"].non + label,
input[type="radio"].blanc + label {
  position: relative;
  padding-left: 1.3rem;
}
input[type="radio"].ouiFonce + label::before,
input[type="radio"].ouiFonce + label::after,
input[type="radio"].oui + label::before,
input[type="radio"].oui + label::after,
input[type="radio"].ouiClair + label::before,
input[type="radio"].ouiClair + label::after,
input[type="radio"].non + label::before,
input[type="radio"].non + label::after,
input[type="radio"].blanc + label::before,
input[type="radio"].blanc + label::after {
  display: block;
  position: absolute;
  box-sizing: border-box;
  bottom: 0;
  left: 0;
  content:'';
  width: 1rem;
  height: 1rem; 
  border-radius: 1rem;
}
input[type="radio"].ouiFonce + label::before {
  border: 2px solid #0CAC0C;    //#088B09
  background-color: #eee;
  background-color: #eee; //répète, sinon ne prend pas en compte
}
input[type="radio"].ouiFonce:checked + label::after {
  background-color: #0CAC0C;
}
input[type="radio"].oui + label::before {
  border: 2px solid #01DF01;   
  background-color: #eee;
}
input[type="radio"].oui:checked + label::after {
  background-color: #01DF01;
}
input[type="radio"].ouiClair + label::before {
  border: 2px solid #85FF2E;    //#81FF01
  background-color: #eee;
  background-color: #eee;
}
input[type="radio"].ouiClair:checked + label::after {
  background-color: #85FF2E;
}
input[type="radio"].non + label::before {
  border: 2px solid red;
  background-color: #eee;
}
input[type="radio"].non:checked + label::after {
  background-color: red;
}
input[type="radio"].blanc + label::before {
  border: 2px solid grey;
  background-color: #eee;
}
input[type="radio"].blanc:checked + label::after {
  background-color: grey;
}

/**********rectangles de texte***********************************/
#cadre {
 	 margin-top: 25px; margin-bottom: 25px;      /*espace avec le cadre d'avant (avant et après le cadre)*/  
   /*margin-left: auto; margin-right: auto;*/      /*centrer*/
  	/* width: 650px; */
	 text-align: justify;
	 background-color: #cceeff;
   padding-top: 10px;
   padding-bottom: 10px;
   padding-left: 10px;
   padding-right: 10px;
   border-radius: 10px;
}
@media (max-width: 767px) {
  #cadre { margin-left: 2px; } }    /*seulement pour petit écran sinon fout le bordel sur grands écrans ; à droite : marche pas avec Bootstrap */
#cadre_voyelle {
 	 margin-top: 25px; margin-bottom: 25px;      /*espace avec le cadre d'avant (avant et après le cadre)*/  
	 text-align: justify;
	 background-color: #eeddff;  
   padding-top: 10px;
   padding-bottom: 10px;
   padding-left: 10px;
   padding-right: 10px;
   border-radius: 10px;
}
@media (max-width: 767px) { #cadre_voyelle { margin-left: 2px; } } 
#cadre_regle {
 	 margin-top: 25px; margin-bottom: 25px; 
	 text-align: justify;
	 background-color: #ddf5ee;       
   padding-top: 10px;
   padding-bottom: 10px;
   padding-left: 10px;
   padding-right: 10px;
   border-radius: 10px;
}
@media (max-width: 767px) { #cadre_regle { margin-left: 2px; } } 
#cadre_anomalie {
 	 margin-top: 25px; margin-bottom: 25px;     
	 text-align: justify;
	 background-color: #FFFFDD;           
   padding-top: 10px;
   padding-bottom: 10px;
   padding-left: 10px;
   padding-right: 10px;
   border-radius: 10px;
}
@media (max-width: 767px) { #cadre_anomalie { margin-left: 2px; } }
#cadre_page_regle {
 	 margin-top: 25px; margin-bottom: 25px; 
	 text-align: justify;
	 background-color: #eeeeee;       
   padding-top: 10px;
   padding-bottom: 10px;
   padding-left: 10px;
   padding-right: 10px;
   border-radius: 10px;
}
@media (max-width: 767px) { #cadre_page_regle { margin-left: 2px; } }  
#cadre_ex {
 	 margin-top: 10px;            /*espace avec le cadre d'avant */
   margin-left: auto; margin-right: auto;     /*centrer*/ 	 
 /* 	 width: 450px;   */
	 text-align: justify;
	 background-color: #ffcc66;
   padding-top: 4px;           /*marge entre le texte et le cadre*/ 
   padding-bottom: 4px;
   padding-left: 10px;
   padding-right: 10px;
   border-radius: 10px;
}
@media (max-width: 767px) { #cadre_ex { margin-left: 2px; } } 
#cadre_phonetique {
 	 margin-top: 25px; margin-bottom: 25px;     
	 text-align: justify;
	 background-color: #ffddaa;           
   padding-top: 10px;
   padding-bottom: 10px;
   padding-left: 10px;
   padding-right: 10px;
   border-radius: 10px;
}
@media (max-width: 767px) { #cadre_phonetique { margin-left: 2px; } } 
#cadre_titre {
 	 margin-top: 25px; margin-bottom: 25px;      /*espace avec le cadre d'avant (avant et après le cadre)*/  
	 text-align: justify;
	 background-color: #aaffaa;  
   padding-top: 10px;
   padding-bottom: 10px;
   padding-left: 10px;
   padding-right: 10px;
   border-radius: 10px;
}

/* ******************** Menu hamburger ****************************************************/
.sidenav {  /* Sidenav menu */
  height: 100%;
  width: 510px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: -510px;
  background-color: #e8e8e8;
  padding-top: 1px;      //position du tableau par rapport au haut
  transition: left 0.5s ease;
}
.regles {  /* Sidenav page regles */
  width: 220px;
}
.sidenav a { /* Sidenav menu links */
  padding: 8px 6px 8px 6px;    /*top right bottom left*/
  text-decoration: none;
  font-size: 16px;
  color: #818181;
  display: block;
  transition: 0.3s;
}
.sidenav li {   line-height : 1em;  } /*interligne pour <br> ASJ*/
.sidenav a:hover {
  color: #111;
}
.sidenav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.sidenav.active { /* Active class */
  left: 0;
}
.sidenav .close { /* Close btn */
  position: absolute;
  top: 0;
  right: 10px;
  font-size: 20px;
}
.burger-icon span { /* Icône burger */
  display: block;
 /* width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 2px;  */
  position: fixed;
}
/*@media (max-width: 510px) {   //ascenseur du menu (invisible sur smartphone!)
   .scrollbar {
     //width: 100%;
     overflow-x: hidden;
   }
   .scrollbar:hover {    
     width: 83%;
     overflow-x: scroll;
   }
}  */