/*
* style css pour menu_brut-v1 
* Version 1.0.beta
* mise en place le 31/10/24
* Menu Brut 
* code par quentinrenaux.com
*/


:root {
  --brut_menu-color: #fbfbfb;
  --brut_menu-background: #1b1b1b;
  --brut_menu-color-hover: grey;

  --brut_menu-souscolor: #fbfbfb;
  --brut_menu-sousbackground: #343434;
  --brut_menu-souscolor-hover: grey;

  /* pensez à changer couleur fleches dans svg */
}


/* menu / fermer*/
.brut_menu-burger#menuToggleButton {
    font-size: 55px;
    margin-top: -9px;
    font-family: arial, helvetica;
    font-weight: bold;
    cursor: pointer;
    display: inline-block;
    pointer-events: all;
}

@media (max-width: 800px) {       
  .brut_menu-burger#menuToggleButton {
      font-size: 24px;
      margin-top: -3px; /* remonter la font pour la centrer */
  }
}  

.brut_menu-burger#menuToggleButton .close-icon {
  display: none;
}

.brut_menu-burger#menuToggleButton.active .menu-icon {
  display: none;
}

.brut_menu-burger#menuToggleButton.active .close-icon {
  display: inline-block;
}



/* ---------- overlay -----------*/

/* container principal */
.open_menu_brut {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1001;
  overflow-y: auto;
  overflow-x:hidden;
  width: 460px;
  height: 100%;
  line-height: 20px;
}

/* animation ouverture */
.open_menu_brut {
  transform: translateX(100%); /* Caché par défaut */
  transition: transform 0.3s ease-in-out; /* Animation fluide */
}

/* ul : first slide */
.open_menu_brut .menu {
  list-style: none;
  padding: 10px 0;
  width: 100%;

  list-style: none;
  padding: 10px 0;
  width: 100%;
  height: 100%;

  background: var(--brut_menu-background);

  background-image: 
  linear-gradient(to right, #80808015 1px, transparent 1px),
  linear-gradient(to bottom, #80808015 1px, transparent 1px);

  background-size: 20px 20px; /* Taille d’un carreau */
  background-size: 6% 3em; /* Taille d’un carreau */

  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;

}

.open_menu_brut li, .open_menu_brut ul {
  list-style-type: none;
}

/* li */
.open_menu_brut .menu-item {
  position: relative;
}

/* link */
.open_menu_brut .menu a {
  text-decoration: none;
  display: block;
  
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 12px 10px;
  color: var(--brut_menu-color);
  /*text-transform: uppercase;*/

  font-size: 26px;
  font-family: arial, helvetica;
  font-weight: bold;
}

@media (max-width: 800px) {       
  .open_menu_brut .menu a {
    font-size: 24px;
  }
}   

.open_menu_brut .menu a:hover {
  text-decoration: none;
  color: var(--brut_menu-color-hover);
}

/* second slide (if) */
.open_menu_brut .sub-menu {
  position: fixed;
  top: 0;
  left: 0%;
  width: 460px;
  height: 100%;
  z-index: 2;

  transform: translateX(100%);
  transition: transform 0.5s ease;

  background-color: var(--brut_menu-sousbackground);

  background-image: 
  linear-gradient(to right, #80808015 1px, transparent 1px),
  linear-gradient(to bottom, #80808015 1px, transparent 1px);

  background-size: 20px 20px; /* Taille d’un carreau */
  background-size: 6% 3em; /* Taille d’un carreau */

  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}

.open_menu_brut .sub-menu .sub-menu {
  top: 0;
  left: 0%;
  z-index: 3;
}

.open_menu_brut .menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;

  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 125'><path fill='white' d='M31.3,97.5c-2.6,0-5.1-1-7.1-2.9c-3.9-3.9-3.9-10.3,0-14.2L54.5,50L24.2,19.6c-3.9-3.9-3.9-10.3,0-14.2c3.9-3.9,10.3-3.9,14.2,0l37.5,37.5c1.9,1.9,2.9,4.4,2.9,7.1s-1.1,5.2-2.9,7.1L38.4,94.6C36.4,96.5,33.8,97.5,31.3,97.5z'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 2px 3px;
}

/* couleur dans le code svg */
.open_menu_brut .menu-item-has-children > a:hover::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 125'><path fill='grey' d='M31.3,97.5c-2.6,0-5.1-1-7.1-2.9c-3.9-3.9-3.9-10.3,0-14.2L54.5,50L24.2,19.6c-3.9-3.9-3.9-10.3,0-14.2c3.9-3.9,10.3-3.9,14.2,0l37.5,37.5c1.9,1.9,2.9,4.4,2.9,7.1s-1.1,5.2-2.9,7.1L38.4,94.6C36.4,96.5,33.8,97.5,31.3,97.5z'/></svg>");
}


/* bouton retour */
.open_menu_brut .submenu-back-button {
  position: relative;
    right: inherit;
    top: inherit;
    left: inherit;
    bottom: inherit;
    padding: 12px 10px;
    background: transparent;
    color: var(--brut_menu-souscolor);
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 26px;
    font-family: arial, helvetica;
    font-weight: bold;
}

.open_menu_brut .submenu-back-button::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path fill='white' d='M68.7,2.5c2.6,0,5.1,1,7.1,2.9c3.9,3.9,3.9,10.3,0,14.2L45.5,50l30.4,30.4c3.9,3.9,3.9,10.3,0,14.2c-3.9,3.9-10.3,3.9-14.2,0L24.2,57.1c-1.9-1.9-2.9-4.4-2.9-7.1s1.1-5.2,2.9-7.1L61.6,5.4C63.6,3.5,66.2,2.5,68.7,2.5z'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-position: -2px 0px;
}

.open_menu_brut .submenu-back-button:hover {
  color: var(--brut_menu-souscolor); 
  background-color: var(--brut_menu-sousbackground); 
  text-decoration: none; 
}

.open_menu_brut .submenu-back-button:hover::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path fill='grey' d='M68.7,2.5c2.6,0,5.1,1,7.1,2.9c3.9,3.9,3.9,10.3,0,14.2L45.5,50l30.4,30.4c3.9,3.9,3.9,10.3,0,14.2c-3.9,3.9-10.3,3.9-14.2,0L24.2,57.1c-1.9-1.9-2.9-4.4-2.9-7.1s1.1-5.2,2.9-7.1L61.6,5.4C63.6,3.5,66.2,2.5,68.7,2.5z'/></svg>");
}



/* ------ mobile ------ */

@media screen and (max-width: 800px) {
  .open_menu_brut {
      width: 100%; /* Fait en sorte que le menu prenne toute la largeur de l'écran */
      transform: translateX(100%); 
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0;
  }

  .open_menu_brut .sub-menu {
      width: 100%; /* Sous-menus prennent également toute la largeur */
  }

  .open_menu_brut .submenu-back-button {
      padding: 15px 10px;
  }

  .open_menu_brut .menu-item {
      padding: 5px 10px; /* espacement element menu */
  }
}