/* ============================================================
   O'Sésame — Correctif HEADER (marges / transparence / sticky)
   Ajouté le 2026-07-08.
   Objectif : un header FIXE déterministe.
     - Accueil : nav transparente sur le hero (texte lisible).
     - Au scroll + pages internes : fond crème opaque + ombre.
   Isolé dans ce fichier : pour revenir en arrière, il suffit de
   retirer l'enqueue dans functions.php (marqueur OSESAME HEADER FIX).
   ============================================================ */

:root {
  --osesame-header-h: 132px;   /* repli ; ajusté en JS à la vraie hauteur */
  --osesame-cream: 247, 242, 236;  /* #f7f2ec — crème chaud, se détache du fond de page */
  --osesame-ink:   83, 61, 44;     /* #533d2c */
  --osesame-line:  231, 221, 210;  /* #e7ddd2 */
}

/* 1) UN SEUL sticky : tout le <header> est fixe -------------------------- */
header.elementor-location-header {
  position: fixed;
  inset: 0 0 auto 0;          /* top:0 ; left:0 ; right:0 */
  width: 100%;
  z-index: 999;
  /* Séparation nette dès le repos (fini le « clair sur clair ») */
  box-shadow: 0 8px 22px -18px rgba(58, 42, 32, .5);
  transition: box-shadow .3s ease, background-color .3s ease;
}

/* La rangée de nav ne doit plus se positionner elle-même
   (on neutralise le position:fixed custom ET le sticky natif Elementor). */
.elementor-10311 .elementor-element.elementor-element-2a7251fb.header-style,
.elementor-10311 .elementor-element.elementor-element-2a7251fb.elementor-sticky--active {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: auto !important;
  margin-bottom: 0 !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  box-shadow: none !important;
  transform: none !important;
  background-color: rgba(var(--osesame-cream), .98) !important; /* solide, toujours */
  border-bottom: 1px solid rgba(var(--osesame-line), 1) !important; /* filet de séparation */
  transition: padding .3s ease, background-color .3s ease !important;
}

/* On masque l'espaceur injecté par le sticky natif Elementor
   (c'est lui qui créait les "trous" / décalages de marge). */
header.elementor-location-header .elementor-sticky__spacer { display: none !important; }

/* Barre promo brune : toujours opaque. */
.elementor-10311 .elementor-element.elementor-element-e3f84d4 {
  background-color: #8A615D !important;
}

/* 2) Décalage déterministe du contenu ---------------------------------- */
/* Pages internes : le contenu démarre SOUS le header.
   Accueil : pas de décalage → le hero passe sous le header (transparence). */
/* Pages internes : le contenu commence sous le header fixe.
   NB : spécificité volontairement élevée — une règle inline `body{padding-top:0}`
   (Elementor) écrase un simple `body`.
   L'accueil est exclu : son hero possède déjà sa propre marge haute. */
html body:not(.home) {
  padding-top: var(--osesame-header-h);
}

/* Compat. barre d'admin WordPress connectée. */
body.admin-bar header.elementor-location-header { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar header.elementor-location-header { top: 46px; }
}

/* 3) ACCUEIL : header SOLIDE lui aussi (plus de « clair sur clair ») ----
   Le hero de l'accueil est clair : une nav transparente s'y fondait sans
   aucune séparation. On garde donc le crème opaque partout.
   (Pour retrouver la nav transparente sur un futur hero SOMBRE : remettre
   `background-color: transparent !important;` sur la règle ci-dessous,
   et passer le texte du menu en #ffffff.) */
body.home:not(.is-scrolled)
  .elementor-10311 .elementor-element.elementor-element-2a7251fb.header-style {
  background-color: rgba(var(--osesame-cream), .98) !important;
}
body.home:not(.is-scrolled)
  .elementor-10311 .elementor-element.elementor-element-3158b0f5 .elementor-nav-menu--main .elementor-item,
body.home:not(.is-scrolled)
  .elementor-10311 .elementor-element.elementor-element-3158b0f5 .elementor-menu-toggle,
body.home:not(.is-scrolled)
  .elementor-10311 .elementor-element.elementor-element-a591069 .elementor-menu-cart__toggle_button,
body.home:not(.is-scrolled)
  .elementor-10311 .elementor-element.elementor-element-a591069 svg {
  color: #533d2c !important;
  fill: #533d2c !important;
  text-shadow: none !important;
}

/* 4) État SOLIDE (défaut pages internes + accueil scrollé) -------------- */
/* Couleur de texte lisible sur le crème. */
.elementor-10311 .elementor-element.elementor-element-3158b0f5 .elementor-nav-menu--main .elementor-item {
  color: #533d2c !important;
  fill: #533d2c !important;
  transition: color .25s ease;
}

/* Ombre + léger flou quand on a défilé. */
body.is-scrolled header.elementor-location-header {
  box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .28);
}
body.is-scrolled
  .elementor-10311 .elementor-element.elementor-element-2a7251fb.header-style {
  background-color: rgba(var(--osesame-cream), .97) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* 5) Logo : taille stable (remplace 22vw / 118px) ---------------------- */
.elementor-10311 .elementor-element.elementor-element-60eb5642 img {
  width: auto !important;
  height: clamp(46px, 5vw, 66px) !important;
  transition: height .3s ease;
}
body.is-scrolled .elementor-10311 .elementor-element.elementor-element-60eb5642 img {
  height: clamp(40px, 4.2vw, 56px) !important;
}
@media (max-width: 767px) {
  .elementor-10311 .elementor-element.elementor-element-60eb5642 img {
    height: 44px !important;
  }
}

/* 6) Accessibilité : respect de « réduire les animations ». ------------- */
@media (prefers-reduced-motion: reduce) {
  header.elementor-location-header,
  header.elementor-location-header * {
    transition: none !important;
  }
}