/************************************************************** GESTION DU MENU *****************************************************/

/* COMMUN A TOUTES LES TAILLES D'ECRAN */

/* Variables globales */
:root {
	--couleur_fond_bandeau: RGBa(182,148,94,1);
    --couleur_textes: black;
    --couleur_texte_survole: RGBa(96,40,20,1);
    --couleur_soulignement_texte_survole: var(--couleur_texte_survole);
    --couleur_ombres_boites: #222 ;
    --couleur_fond_sousmenu: RGBa(143,113,64,1);
    --couleur_fond_sousmenu_survole: RGBa(178,144,90,1);
    --couleur_fond_soussousmenu: var(--couleur_fond_sousmenu);
    --couleur_fond_soussousmenu_survole: var(--couleur_fond_sousmenu_survole);
    --couleur_barres_menu_hamburger: var(--couleur_texte_survole);
    --couleur_fond_hamburger: RGBa(190,190,190,1);
}

  /* Affichage du Menu */
  nav {
    margin: 0 auto;
    padding: 0px;
    background-color: var(--couleur_fond_bandeau);
    top:0px;
    font-size: 1.6Em;
    font-family: sans-serif;
  }

  nav ul{
    list-style-type: none;  /* Pour éviter d'avoir les puces devant les items de menu */
    padding-top: 10px;
    padding-bottom:10px;
  }

  nav ul li {
    float: left;        /* Attaché à gauche */
    width: 25%;         /* Taille de chaque item de menu */
    text-align: center;
    position: relative; /* Chaque boîte a les dimensions de celle dont il descend */
  }


  nav ul::after {  /* Permet d'afficher le menu en bandeau sur une ligne dégagée */
    content: "";
    display: table;
    clear: both;
  }

  nav a {
    display: block;    /*Les liens seront traités comme des blocs (pleine largeur) */

    /* Annule le style par défaut des liens (souligné et colorés) */
    text-decoration : none;
    color: var(--couleur_textes);

    /* Crée un soulignement invisible pour éviter le décalage lorsqu'on aura
    un soulignement visible au survol de l'item */
    border-bottom: 2px solid transparent; 
  }

  nav a:hover {    /* Action au survol */
    color: var(--couleur_texte_survole);  /* Changement de couleur */
    border-bottom: 2px solid var(--couleur_soulignement_texte_survole);        /* et soulignement visible */
  }

/* Sous-menus (niveau 2) */
  .sousmenu {
    padding: 0px;
    font-size: 1.4rem;
    display: none;                /* caché par défaut */
    box-shadow: 0px 1px 5px var(--couleur_ombres_boites); /* dessine une boîte autour du sous-menu */
    background-color: var(--couleur_fond_sousmenu);
    position:absolute;            /* Superpose le sous-menu par dessus le texte qui suit */
    width: 100%;                  /* Occupe tout l'espace sous le titre de menu */
    z-index: 1000;                /* Pour le mettre au-dessus */
  }

  .sousmenu li {   /* Items du sous-menu */
    float: none;   /* Fixes par rapport au titre du sous-menu */
    width: 100%;   /* Occupent toute la largeur */
    text-align: left;
  }

  .sousmenu a {
    padding: 0.5rem;
    border-bottom: none; /* Supprime la bordure pour éviter les décalages au survol */
  }

  /* Survol d'un item de sous-menu */
  .sousmenu a:hover, .sousmenu a:focus { 
    border-bottom: none;
    background-color: var(--couleur_fond_sousmenu_survole);
  }


/* Sous-sous menus (niveau 3)*/

  .sous-sous-menu {
    padding: 0px;
    margin-left: 100%;            /* Positionne le sous-sous-menu à droite */
    margin-top:-2.5rem;
    font-size: 1.3rem;
    display: none;                /* caché par défaut */
    box-shadow: 0px 1px 5px var(--couleur_ombres_boites); /* dessine une boîte autour du sous-menu */
    background-color: var(--couleur_fond_soussousmenu);
    position:absolute;            /* Superpose le sous-menu par dessus le texte qui suit */
    width: 75%;                   /* Occupe 75% de la largeur du sous-menu */
    z-index: 1000;                /* Pour le mettre au-dessus */
  }

  .sous-sous-menu li {   /* Items du sous-sous-menu */
    float: none;   /* Fixes par rapport au titre du sous-menu */
    width: 100%;   /* Occupent toute la largeur */
    text-align: left;
  }

  .sous-sous-menu a {
    padding: 0.5rem;
    border-bottom: none; /* Supprime la bordure pour éviter les décalages au survol */
  }

  .sous-sous-menu a:hover { /* Survol d'un item de sous-menu */
    border-bottom: none;
    background-color: var(--couleur_fond_sousmenu_survole);
  }




/* SUR ECRAN LARGE : MENU HORIZONTAL COLLANT EN HAUT */
@media (min-width:768px) {

  /* Masque le bouton de menu pour les écrans larges */
  #icone_menu, .hamburger {
      display: none;
  }

  nav {
    position: sticky;  /* Pour garder le menu en haut lors du scroll */
  }


  /* Instruction si l'appareil est capable de détecter le survol */
  @media (any-hover: hover) {
    /* Supprime les boutons d'ouverture des sous-menu dans la version grand écran */
    nav input {display: none;}
    nav label {display: none;}  

    /* Rajoute un petit signe pour repérer les items de menu ayant un sous-menu associé */
    .deroulant > a::after{
        content:" ▼";
        font-size: 1.2rem;
    }
    .lateral > a::after{
        content:" ▶";
        font-size: 1.4rem;
    }

    nav > ul li:hover .sousmenu {
    /* Les titre de sous-menu forment un bloc sous lequel
    on pourra afficher la boîte du sous-menu */
      display: block;      
    }

    nav ul .sousmenu li:hover .sous-sous-menu {
    /* Les titre de sous-sous-menu forment un bloc à côté lequel
    on pourra afficher la boîte du sous-menu */
      display: block;
    }

  }

  /* Instructions si l'appareil ne gère pas le survol. Dans ce cas on rajoute
     un bouton à droite des items de menu qui ouvre/ferme le sous-menu
     NB : Avec Firefox ou chrome, il faut any-pointer:coarse       */
  @media (any-hover: none) , (any-pointer: coarse) {

  /* Affiche les boutons d'ouverture des sous-menu car on ne peut pas
    les ouvrir au survol */
    nav input {display: block;}
    nav label {display: inline;}  
    
	/* ******** Eléments utiles pour les appareil déclarant à la fois qu'ils gèrent le survol et qu'ils ne le gèrent pas */
    /* Supprime les petit signes pour repérer les items de menu ayant un sous-menu associé */
    .deroulant > a::after{ content:""; }
    .lateral > a::after{ content:""; }
	/* Supprime les effets du survol sur les (sous-)sous-menus */
    nav > ul li:hover .sousmenu { display: none; }
    nav ul .sousmenu li:hover .sous-sous-menu { display: none; }

    nav {
      font-size:1.5rem;  /* Un peu plus petit pour avoir la place pour les boutons */
    }
    /* Positionnement de la checkbox de sous-menu */
    .checkbox-sous-menu {
      float:right;
      position: absolute;
      right: 0.4rem;
      top: 0.4rem;
      cursor: pointer;
      display: block;
      opacity: 0;   /* Rend la checkbox transparente */
      z-index: 2;
    }

    /* Ouverture du sous-menu au clic */
      nav .checkbox-sous-menu:checked ~ .sousmenu {
      display: block;
    }

    /* Ouverture du sous-sous-menu au clic */
      nav .sousmenu .checkbox-sous-menu:checked ~ .sous-sous-menu {
      display: block;
    }


    .icone_sous-menu {
      display:inline;
      position: absolute;
      right: 0rem;
      top: -0.15rem;
      height: 2rem;
      width: 2rem;
      border-radius: 0.1875rem;
      background: var(--couleur_fond_bandeau);
    }

      .icone_sous-sous-menu {
      display:inline;
      position: absolute;
      margin-right: 0.2rem;
      right: 0rem;
      top: 0.3rem;
      height: 1.6rem;
      line-height:1.8rem;
      width: 1.6rem;
      text-align:center;
      font-size:2rem;
      border-radius: 0.1875rem;
      background: var(--couleur_fond_bandeau);
    }
  }
}

/* SUR AFFICHAGE ETROIT : AFFICHAGE AVEC MENU HAMBURGER ET DEPLIAGE VERTICAL */
@media (max-width:767px) {
/*  * {background-color:red;}*/
  
  nav {
    display: none;
  }
  
  /******************************************
  * Bouton Hamburger pour affichage du Menu *
  *******************************************/
  /* Cache la checkbox et la place par-dessus l'icône hamburger */
  #icone_menu {
    float:right;
    position: absolute;
    right: 1.65rem;
    top: 1.65rem;
    cursor: pointer;
    display: block;
    opacity: 0;   /* Rend la checkbox transparente */
    z-index: 2;
  }

  /* Affichage du menu lorsqu'on coche la case */
  #icone_menu:checked ~ nav {
    display: block;
  }

  /* Bouton du menu */
  #toggle_menu {
    cursor: pointer;
    display: block;
    font-size: 0px; /* Cache le texte en mettant la taille à 0 */
    margin: 0;
    padding: 0;
  }

  .hamburger .contenu_bouton_menu{
    display: block;
    position: absolute;
    z-index: 99999;
  }

  /* Bouton hamburger */
  .hamburger {
    float: none;
    position: absolute;
    right: 1rem;
    top: 1rem;
    height: 2.5rem;
    width: 2.5rem;
    border-radius: 0.1875rem;
    border: 1px solid var(--couleur_barres_menu_hamburger);
    background: var(--couleur_fond_hamburger);
  }

  /* Barre du milieu*/
  .hamburger .contenu_bouton_menu {
    background: var(--couleur_barres_menu_hamburger);
    border-radius: 0.1875rem;
    height: 0.25rem;
    left: 0.1875rem;
    right: 0.1875rem;
    top: 1.125rem;
  }

  .hamburger .contenu_bouton_menu::before,
  .hamburger .contenu_bouton_menu::after {
    content: "";
    display: block;
    position: absolute;
    background-color: var(--couleur_barres_menu_hamburger);
    width: 100%;
    height: 0.25rem;
    left: 0;
    border-radius: 0.1875rem;
  }

  /* Barre du haut */
  .hamburger .contenu_bouton_menu::before {
    top: -0.6875rem;
    transform-origin: top;
  }

  /* Barre du bas */
  .hamburger .contenu_bouton_menu::after {
    bottom: -0.6875rem;
    transform-origin: bottom;
  }

  nav {margin-top:4rem;}  /* Affiche le menu sous le hamburger */
  
  /* Description du menu */
  nav ul{
    padding-left: 0px;
  }

  nav ul li {
    width: 100%;         /* Taille de chaque item de menu */
  }

  .sousmenu {
    font-size: 0.9Em;
    position:relative;       /* Insère le sous-menu dans le flux (avant le texte qui suit) */
  }


  /* Positionnement de la checkbox de sous-menu */
  .checkbox-sous-menu {
    position: absolute;
    right: 0.4rem;
    top: 0.4rem;
    cursor: pointer;
    display: block;
    opacity: 0;   /* Rend la checkbox transparente */
    z-index: 2;
  }

  /* Ouverture du sous-menu au clic */
  nav .checkbox-sous-menu:checked ~ ul {
    display: block;
  }
     
  /* Ouverture du sous-sous-menu au clic */
  nav .checkbox-sous-menu:checked ~ .sous-sous-menu {
    display: block;
  }
  
  .icone_sous-menu {
    position: absolute;
    right: 0rem;
    top: -0.15rem;
    height: 2rem;
    width: 2rem;
    border-radius: 0.1875rem;
    background: var(--couleur_fond_bandeau);
  }

  .sous-sous-menu {
    padding: 0px;
    position:relative;         /* Insère le sous-menu dans le flux */
    margin-left: 0;            /* Positionne le sous-sous-menu à gauche */
    margin-top:0;              /* et dessous */
    width:100%;
  }  
  
  .icone_sous-sous-menu {
    position: absolute;
    transform: rotate(90deg);   /* Pour que la flèche pointe vers le bas */
    margin-right: 0.2rem;
    right: 0rem;
    top: 0.3rem;
    height: 1.6rem;
    line-height:1.8rem;
    width: 1.6rem;
    text-align:center;
    font-size:2rem;
    border-radius: 0.1875rem;
    background: var(--couleur_fond_sousmenu);
  }
}