/**
 * HEADER CSS - COPIÉ EXACTEMENT du WordPress app.css lignes 482-995
 */

header {
  position: absolute;
  top: 0;
  z-index: 200;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  padding-bottom: 150px;
  /* Le header est en position absolue, sans fond, et son padding-bottom de
     150px lui donne pres de 300px de haut : il forme donc un bouclier
     invisible sur tout le haut de page, et son z-index de 200 lui fait
     intercepter les clics destines a ce qui passe dessous. Le fil d'Ariane,
     a 250px, n'etait pas cliquable — verifie sur la preprod en ligne.
     Le header laisse desormais passer les clics ; ses enfants, eux, les
     reprennent, si bien que logo, menu et burger restent cliquables. */
  pointer-events: none;
}

header > * {
  pointer-events: auto;
}
/* Voile decoratif du haut de page : le bord de papier dechire.
 *
 * Il etait porte par header::before. Or le header est en z-index 200, donc tout
 * ce qu'il contient se peint AU-DESSUS du contenu de la page. Ce voile de 240px
 * recouvrait ainsi 58px du titre de chaque page (60% de sa hauteur), et le fil
 * d'Ariane en entier. En mix-blend-mode: color-burn, qui assombrit, le titre
 * passait du delave au illisible selon la teinte du voile a cet endroit — d'ou
 * un rendu different d'un ecran a l'autre, et pire encore sous WebKit, qui
 * ordonne mal un groupe de fusion vis-a-vis du contenu qui suit.
 *
 * Il est donc rattache a body et pose en z-index -1 : il reste visible sur le
 * fond de page, mais le texte se peint desormais par-dessus. Sa couleur de fond
 * doit rester sur html, voir la note dans global.css.
 */
body::before {
  content: "";
  width: 100%;
  height: 240px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  /* Au-dessus des bannieres photo, en dessous du texte de page.
     .banner porte z-index: 0 et position: relative : elle forme donc un
     contexte d'empilement, et un z-index de 1 suffit a passer par-dessus
     l'image ENTIERE — c'est ce qui fait mordre la dechirure dans la photo,
     comme sur le site d'origine, ou le voile vivait dans le header (z-index 50)
     et surplombait la banniere pour la meme raison.
     Le texte des pages reste lisible : il commence a 250px, sous les 240px du
     voile, et le fil d'Ariane porte de son cote un z-index de 5. */
  z-index: 1;
  /* Purement decoratif : ne doit intercepter aucun clic. */
  pointer-events: none;
  transform: scaleY(-1);
  background-image: url("../images/header-overlay.svg");
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 1;
  /* PAS de mix-blend-mode. Le CSS d'origine posait bien color-burn, mais sur
     header::before — or le header porte un z-index, donc un contexte
     d'empilement, qui isole le mélange : le fond du voile y était transparent,
     et color-burn sur un fond transparent laisse la source inchangée. La règle
     n'avait donc aucun effet visible sur le site d'origine.
     Rattaché à body, ce garde-fou disparaît : le mélange s'appliquait pour de
     bon contre le fond de page et virait la déchirure au jaune-olive saturé,
     là où l'original la montre crème avec une frange mousse discrète. */
}
header .burger-menu {
  display: none;
}
@media (max-width: 1024px) {
  header .burger-menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 200;
    width: 2rem;
    height: 2rem;
    padding: 0;
    /* Le burger est fixe : il survole n'importe quel contenu au defilement.
       Sans fond, ses trois barres se confondaient avec le texte qui passe
       dessous (titre « Les avantages du Team Building », par exemple). */
    background-color: rgba(244, 242, 232, 0.82);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border: none;
    border-radius: 50%;
    box-shadow: 0 0 0 6px rgba(244, 242, 232, 0.82);
  }
}
header .burger-menu div {
  background-color: #C19A59;
  width: 25px;
  height: 3px;
  margin: 2px 0;
  transition: all 0.3s ease;
}
header .burger-menu.active div:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
header .burger-menu.active div:nth-child(2) {
  opacity: 0;
}
header .burger-menu.active div:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}
header .header__top {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  margin: 0rem 0 0 0;
  z-index: 10;
  width: 1280px;
}
@media (max-width: 1200px) {
  header .header__top {
    width: 100%;
  }
}
@media (max-width: 992px) {
  header .header__top {
    justify-content: center;
  }
}
@media (max-width: 430px) {
  header .header__top {
    flex-direction: column;
  }
}
header .header__top .phone_number {
  width: 15%;
  display: flex;
  flex-direction: row;
  align-items: center;
}
@media (max-width: 1200px) {
  header .header__top .phone_number {
    width: 25%;
  }
}
@media (max-width: 992px) {
  header .header__top .phone_number {
    width: auto;
  }
}
@media (max-width: 430px) {
  header .header__top .phone_number {
    display: none;
  }
}
header .header__top .phone_number i, header .header__top .phone_number a {
  color: #483C3C !important;
  font-weight: 700;
}
@media (max-width: 576px) {
  header .header__top .phone_number a {
    font-size: 0.8rem;
  }
}
header .header__top .phone_number i {
  margin: 0 1rem;
}
header .header__top .reviews {
  width: auto;
  display: flex;
  align-items: center;
  margin: 0 1rem;
}
header .header__top .reviews .ti-widget-container {
  display: flex;
  align-items: center;
}
header .header__top .reviews .ti-header {
  display: flex;
  align-items: center;
  text-decoration: none;
}
header .header__top .reviews .ti-fade-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
header .header__top .reviews .ti-small-logo {
  display: flex;
  align-items: center;
}
header .header__top .reviews .ti-stars {
  display: flex;
  align-items: center;
  gap: 2px;
}
header .header__top .reviews .ti-mob-row {
  display: flex;
  align-items: center;
}
header .header__top .reviews .nowrap {
  white-space: nowrap;
}
header .header__top .reviews .ti-separator {
  margin: 0 0.25rem;
}
header .header__top .trad-social {
  display: flex;
}
header .header__top .trad-social .socials:after {
  content: "";
  position: absolute;
  width: 1px;
  height: 50%;
  background-color: rgba(72, 60, 60, 0.2);
  right: 0;
}
header .header__top .trad-social .socials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: auto;
  position: relative;
  padding: 0 1rem;
}
@media (max-width: 1200px) {
  header .header__top .trad-social .socials {
    width: 10%;
  }
}
@media (max-width: 992px) {
  header .header__top .trad-social .socials {
    width: auto;
  }
}
header .header__top .trad-social .socials a svg {
  width: 17px;
  height: 17px;
}
header .header__top .trad-social .socials a svg * {
  fill: black;
}
header .header__bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
@media (max-width: 1200px) {
  header .header__bottom {
    width: 95%;
    flex-direction: column;
    align-items: center;
  }
}
header .header__bottom .logo::after {
  content: "";
  position: absolute;
  top: -17rem;
  left: -11rem;
  background-image: url("../images/general/Smoke.webp");
  background-size: contain;
  background-position: center;
  width: 25rem;
  height: 25rem;
  z-index: -1;
  opacity: 0.7;
}
@media (max-width: 1024px) {
  header .header__bottom .logo::after {
    background-position: left;
    top: -19rem;
    left: -20rem;
    opacity: 0.5;
  }
}
header .header__bottom .logo {
  position: relative;
  width: 20%;
}
@media (max-width: 1200px) {
  header .header__bottom .logo {
    width: 15%;
  }
}
@media (max-width: 1024px) {
  header .header__bottom .logo {
    width: 30%;
    height: 5rem;
    z-index: 100;
  }
}
@media (max-width: 576px) {
  header .header__bottom .logo {
    width: 100%;
    margin: 2rem 0 0 0;
  }
}
@media (max-width: 1024px) {
  header .header__bottom .logo a {
    width: 100%;
    height: 100%;
  }
}
header .header__bottom .logo a img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
header .header__bottom nav {
  width: 80%;
  display: flex;
  flex-direction: row;
}
@media (max-width: 1200px) {
  header .header__bottom nav {
    width: 100%;
  }
}
@media (max-width: 1024px) {
  header .header__bottom nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    /* 100dvh suit la zone reellement visible : sur iOS, 100vh inclut la place
       des barres Safari, qui reapparaissent justement en bas de page. */
    height: 100vh;
    height: 100dvh;
    /* Fond opaque. A 0.9, les 10 % restants suffisaient a laisser transparaitre
       le logo LIFE'SCAPE et le texte de la page derriere les entrees du menu :
       « NOS SALLES » et les noms de salles se lisaient par-dessus le filigrane.
       Le tiroir passait deja devant le contenu, c'est bien l'alpha qui trahit. */
    background-color: #483c3c;
    /* Le menu ouvert peut depasser l'ecran (sous-menu deplie : 976px pour
       635px utiles). overflow:hidden rendait 5 liens sur 14 inatteignables. */
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    z-index: 100;
    transition: width 0.5s ease;
    display: flex;
    flex-direction: column;
    /* 'safe' retombe sur flex-start des que ca deborde : un centrage simple
       coupe le menu en haut ET en bas, sans moyen d'y acceder. */
    justify-content: center;
    justify-content: safe center;
    align-items: flex-start !important;
    padding: 4.5rem 0 2rem;
  }
}
@media (max-width: 1024px) {
  header .header__bottom nav.active {
    width: 100%;
  }

  /* Tiroir ouvert : le <header> passe devant tout le contenu de page.
     Son z-index de 200 le laissait derriere plusieurs elements — les calques
     Leaflet de la page Contact montent a 1000 — et le tiroir, simple
     descendant, ne pouvait pas remonter plus haut que son propre header.
     9990 reste sous le bandeau cookies (99998/99999), qui doit rester devant. */
  header.menu-open {
    z-index: 9990;
  }

  /* Le contournement qui neutralisait header.menu-open::before n'a plus d'objet :
     le voile n'appartient plus au header et se peint desormais en z-index -1,
     donc derriere le tiroir comme derriere tout le reste. */

  /* Tiroir ouvert, le fond clair du burger n'a plus lieu d'etre : la croix se
     detache deja sur le voile sombre. */
  header.menu-open .burger-menu {
    background-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
}
header .header__bottom nav .menu {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between !important;
}
@media (max-width: 1024px) {
  header .header__bottom nav .menu {
    flex-direction: column;
    /* 100 % de large PLUS 2rem de marge gauche : la liste debordait de 32px a
       droite, et avec elle les panneaux de sous-menu, coupes sur tous les
       ecrans. La marge est deduite de la largeur. */
    width: calc(100% - 2rem);
    align-items: flex-start;
    justify-content: flex-start;
    margin: 0 0 0 2rem;
  }
}
header .header__bottom nav .menu > .menu-item:last-child:after {
  display: none;
}
header .header__bottom nav .menu > .menu-item::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 0%;
  height: 1px;
  background-color: #483C3C;
}
header .header__bottom nav .menu > .menu-item:hover::after {
  width: 80%;
  height: 2px;
  background-color: #483C3C;
  transition: width 0.5s ease;
}
@media (max-width: 1024px) {
  header .header__bottom nav .menu > li:last-child {
    width: auto;
    display: flex;
    justify-content: center !important;
    align-items: center;
    align-self: center;
    padding: 0 1rem;
  }
}
header .header__bottom nav .menu > li:last-child a {
  background-color: #C19A59;
  border-radius: 2rem;
  height: 2.5rem;
  color: #ffffff !important;
}
@media (max-width: 1024px) {
  header .header__bottom nav .menu > li:last-child a {
    text-align: center;
    width: 100% !important;
  }
}
header .header__bottom nav .menu > li {
  align-items: center;
  color: #C19A59 !important;
  display: flex;
  flex-direction: column;
  font-family: "Work Sans", sans-serif;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 600;
  height: 100% !important;
  justify-content: center;
  letter-spacing: 0.0375rem;
  line-height: 0.75rem;
  list-style: none;
  position: relative;
  text-transform: uppercase;
  transition: width 0.5s ease;
  width: auto;
  white-space: nowrap;
}
header .header__bottom nav .menu > li.has-children::after {
  content: "";
  position: absolute;
  bottom: -3.5rem;
  left: -2rem;
  right: -2rem;
  width: auto;
  height: 4rem;
  background: transparent;
  z-index: 10;
}
/* Hover state must not override the bridge height/width */
header .header__bottom nav .menu > li.has-children:hover::after {
  width: auto;
  height: 4rem;
  background: transparent;
}
@media (max-width: 1024px) {
  header .header__bottom nav .menu > li {
    width: 100%;
    text-align: flex-start;
    margin: 1rem 0;
  }
}
header .header__bottom nav .menu > li a {
  color: #ffffff !important;
}
@media (max-width: 1024px) {
  header .header__bottom nav .menu > li a {
    color: #ffffff;
    font-size: 1.25rem;
    padding: 1rem;
    display: flex;
    justify-content: flex-start !important;
  }
}
@media (max-width: 992px) {
  header .header__bottom nav .menu .menu-item.has-children:hover {
    position: relative;
    z-index: 100;
    left: -1rem;
  }
}
/* Desktop: CSS hover natif (identique au CSS WordPress original ligne 992) */
@media (min-width: 1025px) {
  header .header__bottom nav .menu .menu-item.has-children:hover > .sub-menu {
    display: flex;
  }
}

@media (max-width: 1024px) {
  header .header__bottom nav .menu .menu-item.has-children:hover .sub-menu {
    background-color: unset;
    border-bottom: unset !important;
    border-left: unset !important;
    border-right: unset;
  }
}
header .header__bottom nav .menu > li .sub-menu {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  list-style: none;
  min-width: 250px;
  width: max-content;
  max-width: 350px;
  padding: 1rem;
  background-color: #E0DDC7;
  border: 1px solid rgba(72, 60, 60, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  z-index: 1000;
}
header .header__bottom nav .menu > li .sub-menu.show {
  display: flex;
}
@media (max-width: 1024px) {
  header .header__bottom nav .menu > li .sub-menu {
    display: none;
    flex-direction: column;
    background-color: primary;
    padding: 1rem 0;
    position: relative;
    top: 0;
    border-bottom: unset;
    border-left: unset;
    border-right: unset;
    width: 100%;
    /* Le panneau heritait du gabarit desktop — min-width: 250px,
       max-width: 350px et le centrage par left: 50% / translateX(-50%). Pose
       dans le tiroir mobile, il debordait de 32px a droite sur 320 comme sur
       375px, et ce pour les quatre sous-menus. */
    min-width: 0;
    max-width: 100%;
    left: 0;
    transform: none;
  }
  header .header__bottom nav .menu > li .sub-menu.active {
    display: flex;
  }
}
header .header__bottom nav .menu > li .sub-menu li::before {
  content: "›";
  width: auto;
  height: auto;
  position: absolute;
  z-index: 2;
  left: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25rem;
  color: #C19A59;
  font-weight: bold;
}
header .header__bottom nav .menu > li .sub-menu li {
  display: flex;
  height: auto;
  width: 100%;
  position: relative;
  margin-bottom: 0.25rem;
  padding-left: 1.5rem;
}
@media (max-width: 1024px) {
  header .header__bottom nav .menu > li .sub-menu li {
    width: 100%;
  }
}
header .header__bottom nav .menu > li .sub-menu li a {
  padding: 0.75rem 1rem;
  width: 100%;
  height: auto;
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  white-space: normal;
  line-height: 1.4;
  transition: all 0.2s ease;
  border-radius: 4px;
}
@media (max-width: 1024px) {
  header .header__bottom nav .menu > li .sub-menu li a {
    font-size: 1rem;
    padding: 0.5rem 1rem;
    color: #ffffff;
  }
}
header .header__bottom nav .menu > li .sub-menu li a:hover {
  color: #C19A59 !important;
  background-color: rgba(193, 154, 89, 0.1);
  padding-left: 1.25rem;
}
header .header__bottom nav .menu > li a {
  text-decoration: none;
  color: #483C3C !important;
  padding: 0.5rem 1rem;
  text-transform: uppercase;
  font-weight: 800;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
}
@media (max-width: 992px) {
  header .header__bottom nav .menu > li a {
    color: #ffffff !important;
  }
}

/* === Variantes mobiles des images de fond (généré) === */
/* Un téléphone n'a pas besoin d'une image de 1600 px de large.
   Seule l'URL change : taille, position et répétition restent celles
   de la règle d'origine, donc le rendu est identique.
   Généré par _docs/tooling/css-mobile-backgrounds.py — ne pas éditer. */
@media (max-width: 768px) {
    header .header__bottom .logo::after {
        background-image: url("../images/general/Smoke-800w.webp");
    }
}


/* === Bordure déchirée du header : version mobile (généré) === */
/* Le SVG d'origine pèse 342 Ko de vecteur (925 tracés) et constitue l'élément
   LCP de la page : c'est lui qui retardait l'affichage sur mobile. Sa version
   rastérisée à 800 px ne pèse que 9 Ko — soit 97 % de moins — pour un rendu
   indiscernable à cette taille d'écran. Le desktop conserve le SVG vectoriel. */
@media (max-width: 768px) {
    /* Le voile a quitte le header pour body, voir le commentaire en tete de
       fichier. Le selecteur suit, sans quoi le mobile rechargerait le SVG de
       342 Ko et perdrait le gain sur le LCP. */
    body::before {
        background-image: url("../images/header-overlay-800w.webp");
    }
}

/* ============================================================
   Menu mobile : indicateur de sous-menu
   ============================================================
   Le <span class="dropdown-toggle"> présent dans le balisage n'avait aucun
   style : c'était un élément vide et invisible. Rien n'indiquait donc au
   visiteur qu'une entrée était dépliable — il fallait le deviner.
   ============================================================ */

@media (max-width: 1024px) {
    header .header__bottom nav .menu > li.has-children > a {
        /* Le chevron est poussé à droite, à l'opposé du libellé. */
        justify-content: space-between !important;
        align-items: center;
    }

    header .header__bottom nav .menu > li.has-children > a .dropdown-toggle {
        display: inline-block;
        width: 0.6rem;
        height: 0.6rem;
        margin-left: 0.75rem;
        border-right: 2px solid #C19A59;
        border-bottom: 2px solid #C19A59;
        transform: rotate(45deg) translate(-0.15rem, -0.15rem);
        transition: transform 0.25s ease;
        flex-shrink: 0;
    }

    /* Sous-menu ouvert : le chevron pointe vers le haut. La classe est posée
       par main.js sur l'élément de menu au moment du basculement. */
    header .header__bottom nav .menu > li.has-children.submenu-open > a .dropdown-toggle {
        transform: rotate(-135deg) translate(-0.15rem, -0.15rem);
    }
}