/*===========================================
  MENU HORIZONTAL
 ==========================================*/
#header_horizontal
{
  padding: 1rem;
  border: 0.2rem solid #196861; /*  vert niveau 3  */
  border-radius: 0.5rem;
  box-shadow: 1px 1px 3px -1px #333333;
  background-image: /*  4 teintes de vert  1 2 3 4 */ linear-gradient(to top, #88A7A6 0%, #4A8B86 48%, #186760 51%, #78C6CB 100%);
  background-size: 100% 100%;
  height: 7rem; /* Hauteur du menu fixe*/
  overflow: visible;
}

#menu_table
{
  overflow: visible;
}

/* Menu FlexBox global ===========*/
ul#menu_table.menu_flex
{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

/*============================================================
    Les menus principaux peuvent être augmentés ou raccourcis
============================================================*/
.menu_table > li
{
  flex: 1 1 auto;
}

/*=================================================================
   Largeur des menus principaux
=================================================================*/

/* Menu Accueil principal - Largeur minimale du bouton */
#menu_table li.menu_accueil
{
  width: 20rem;
}

/* Menu Le Cabinet principal - Largeur minimale du bouton  */
#menu_table li.menu_cabinet
{
  width: 20rem;
}

/* Menu Mon Soutien Psy principal - Largeur minimale du bouton */
#menu_table li.menu_soutienpsy
{
  width: 24rem;
}

/* Menu Consultations principal - Largeur minimale du bouton */
#menu_table li.menu_consultations
{
  width: 24rem;
}

/* Menu Contact principal - Largeur minimale du bouton */
#menu_table li.menu_contact
{
  width: 20rem;
}

/*============================================================
Le <UL> principal
============================================================*/
#menu_table
{
  margin: 0;
  padding: 0;
  line-height: 0;
  font-size: 0;
  display: inline-block;
  width: auto;
}

/*=====================================================
    Tous les <a> des menus et sous-menus
=====================================================*/
#menu_table li a
{
  line-height: 2.3rem;
  font-size: 1.7rem;
  font-family: "Segoe UI", sans-serif;
  text-decoration: none;
  color: #000000; /* noir   */
  font-style: normal;
  padding: 1.3rem 1.5rem 0 0;
  /* BLOCK */
  display: block;
  cursor: pointer;
  white-space: nowrap;
  width: 100%;
  height: 100%;
}

/* Graisse des Menus principaux */
#menu_table li a.gras700
{
  font-weight: 700;
}

/* Menu souligné */
.souligne
{
  box-shadow: 0 -0.5rem 0 0 #FFFF00 inset;
  border-radius: 0.5rem;
}

/* Menu desssouligné */
.dessouligne
{
  box-shadow : none;
  border-radius : 0.5rem;
}

/* graisse des Sous menus */
#menu_table li .arrow a:not(.gras700)
{
  font-weight: 400;
}

#menu_table li div.buttonbg
{
  height: 5rem;
  /* Mettre la largeur dans le <li> enfant de #menu-table */
  /*width: 18rem;*/
  line-height: 0;
  background-color: transparent;
  border: 0 solid transparent;

  /* Mettre arrondis pour les menus principaux */
  border-radius: 0.7rem;
  padding: 0;
  box-shadow: 0 3px 4px -1px #FFFFFF inset; /*  blanc  */
  text-align: center;
}

#menu_table li:hover div.buttonbg a,
#menu_table li a:hover
{
  color: #FFFFB2; /* jaune clair   */
  font-style: normal;
  font-weight: bold;
  text-decoration: none;
}

/*=================================================
 Bordure jaune bord haut en jaune au survol
 des menus principaux
=================================================*/
/*#menu_table li.expanded div.buttonbg,*/
#menu_table li:hover div.buttonbg
{
  background-color: transparent;
  /* Deux box-shadow sur un élément séparés par une virgule */
  /* bord haut jaune */
  box-shadow: 0 1px 2px -1px #FFFF00 inset,
    /*  bord bas selection jaune  */ 0 -0.5rem 0 0 #FFFF00 inset; /* bord bas jaune menu hover */
}

#menu_table li.expanded div.buttonbg,
#menu_table li:hover div.buttonbg
{
  border-color: transparent;
}

/* on arrondit les quatre angles de l'élément */
#menu_table li.first_button.last_button div.buttonbg
{
  border-radius: 0.5rem;
}

#menu_table ul li:hover > a
{
  color: #FFFF3D; /*  jaune vif  */
  font-family: "Segoe UI", sans-serif;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: bold;
  text-decoration: none;
  /* BLOCK */
  display: block;
}

#menu_table ul li a:hover
{
  color: #FFFF3D; /*  jaune vif  */
  font-family: "Segoe UI", sans-serif;
  font-size: 1.6rem;
  /* font normal ( n'est pas italique) italic ou oblique xxdeg*/
  font-style: normal;
  /* de graisse de 100 à 900 - Normal : 400*/
  font-weight: bold;

  /* Mettre une ligne au-dessus, sur ou au-dessous le texte
     text-decoration => shorthand 3 paramètres :
     underline (sous le texte) dotted (pointillé) red (couleur)
  */
  text-decoration: none;
}

#menu_table ul li:hover
{
  border-color: #FFFF3D; /*  jaune vif  */
  background-color: transparent;
  /*
     Ajoute une ombre à la boite de l'élément
     en fait dessine un rectangle SOUS l'élément
     on ne voit donc que les parties du rectangle qui dépasse
     L'élément du dessus est OPAQUE
     box-shadow : horizontal vertical flou étalement couleur
   */
  box-shadow: none;
}

#menu_table ul
{
  margin: 0;
  border: 1px solid #196861; /* vert foncé */
  padding: 0.4rem;
  /* supprime la couleur de fond */
  background: transparent;
  font-size: 0;
  border-radius: 0.5rem;
}

#menu_table ul li a
{
  padding: 0.7rem 1.5rem 0.7rem 1.3rem;
  text-align: left;
}

#menu_table ul li.separator
{
  padding: 0.7rem;
  cursor: default;
  background: none;
  box-shadow: none;
  border-width: 0;
}

#menu_table ul li.separator div
{
  border-top: 1px solid #FFFFFF; /*  blanc  */
  font-size: 0;
}

#menu_table ul li
{
  border-style: solid;
  border-color: #000000; /*  noir   */
  border-width: 0;
  height: auto;
  width: auto;
  text-align: left;
  line-height: 0;
  font-size: 0;
  cursor: pointer;
  margin: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  background-color: transparent;
  display: block;
}

#menu_table ul li.first_item
{
  border-radius: 0.4rem 0.4rem 0 0;
}

#menu_table ul li.last_item
{
  border-radius: 0 0 0.4rem 0.4rem;
}

#menu_table ul
{
  box-shadow: 0 0 0.7rem -1px #666666; /*  gris  */
}

#menu_table a img
{
  border: none;
}

#menu_table li
{
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-block;
}

#menu_table.css_menu li
{
  position: relative;
}

#menu_table.css_menu ul li:hover > ul
{
  opacity: 1;
}

/* Position des SOUS-MENUS niveau 1 */
#menu_table.css_menu li:hover > ul
{
  top: 100%;
  left: 0;
  right: auto;
  opacity: 1;
}

/*========================================================
    SOUS-SOUS-MENUS niveau 2 pour :
    consultations > Les Différentes approches
=========================================================*/
#menu_table.css_menu ul li:hover > ul
{
  /* valeurs originales */
  /*top: -1px;*/
  /*left: 100%;*/
  /*right: auto;*/

  /*
      Position du sous-sous-menu situé au MEME niveau top que le li
      left : 100% de la largeur du li + 10pixels
  */
  top: -0.3rem;
  left: calc(-100% + 2rem);
}

#menu_table.css_menu ul
{
  transition-duration: 0.3s;
  transition-property: opacity;
  opacity: 0;
}

#menu_table ul
{
  position: absolute;
  /* ul hors viewport invisible */
  top: -100rem;
  z-index: 4000;
}

#menu_table ul ul
{
  position: absolute;
  z-index: 5000;
}

/* Gradient des sous-menus */
/* La classe "gradient_menu" est dans chaque menu principal */
#menu_table ul.gradient_menu
{
  /*  vert niveau 2 et 3  */
  background-image: linear-gradient(to top, #8EC7CC 0%, #48AEB1 100%);
}

/*================================================================
    LARGEUR DES  SOUS-MENUS
================================================================*/
/* Largeur du sous-menu Accueil */
#menu_table ul.largeur_accueil
{
  width: 20rem;
}

/* Largeur du sous-menu Cabinet */
#menu_table ul.largeur_cabinet
{
  width: 20rem;
}

/* Largeur du sous-menu Consultations */
#menu_table ul.largeur_consulations
{
  width: 24rem;
}

/* Largeur du sous-menu Mon Soutien Psy */
#menu_table ul.largeur_soutienpsy
{
  width: 24rem;
}

/* Largeur du sous-sous-menu Approches */
#menu_table ul.largeur_approches
{
  width: 21rem;
}

#menu_table li a.button_5,
#menu_table li div a.button_5
{
  padding-right: 0;
}

/* Fleche NOIR BAS - MENUS PRINCIPAUX */
#menu_table div.arrow
{
  /* Noir Bas */
  background-image: url(../fleches/fleche_bas_noir.png);
  background-repeat: no-repeat;
  /* Fleche à 5% du bord droit */
  background-position: right 5% center;
  /* on redimentionne la fleche
  valeurs de base : largeur : 1.1rem Hauteur : 0.5rem*/
  background-size: 1.1rem 1.4rem;
  height: 100%;
}

/* Fleche JAUNE BAS - MENUS PRINCIPAUX  */
#menu_table li:hover div.arrow
{
  /* jaune bas*/
  background-image: url(../fleches/fleche_bas_jaune.png);
}

#menu_table ul li a.with_arrow
{
  /* noir droit */
  background-image: url(../fleches/fleche_droit_noir.png);
  background-repeat: no-repeat;
  background-position: right center;
  padding-right: 10rem;
}

#menu_table ul li a.with_arrow:hover,
#menu_table ul li:hover > a.with_arrow
{
  /* jaune droit  */
  background-image: url(../fleches/fleche_droit_jaune.png);
}