/* ==========================================================
   Scroll-aware chrome — Marie Julien Cuisine
   Charge partout via : <link rel="stylesheet" href="assets/header-scroll.css?v=4">

   Comportement :
   - body.has-hero (sans .is-past-hero)  → chrome invisible (header + sidebar)
                                            le hero photo / cinematic prend tout l'espace
   - body.is-past-hero                   → fond cream #FFFEF8, chrome visible
                                            (état permanent sur les pages sans hero)

   NOTES SPECIFICITE :
   - On utilise !important sur les règles "is-past-hero" car intro-3d.css
     contient aussi des règles avec !important (body.mjc-intro-active *)
     que header-scroll.js retire dynamiquement, mais on veut ceinture ET
     bretelles pour éviter tout flash de fond navy hérité.
========================================================== */

/* ───────── Fond cream PERMANENT (toutes pages, tous états) ─────────
   Le .mjc-intro a son propre radial-gradient navy interne pour la
   cinematic 3D, donc la phase immersive reste sombre. Mais à la fin
   du cinematic / entre les sections, le body apparait cream au lieu
   de navy. Évite la cassure visuelle visible avant ce fix. */
body,
body.mjc-intro-active,
body.mjc-intro-passed,
body.has-hero,
body.is-past-hero {
  background-color: #FFFEF8 !important;
}

/* ───────── État "passé le hero" : chrome visible ─────────
   (le fond cream est déjà géré par la règle ci-dessus) */
body.is-past-hero {
  background: #FFFEF8 !important;
}
body.is-past-hero .site-header {
  background: #FFFEF8 !important;
  border-bottom-color: var(--line, rgba(36, 59, 105, 0.25)) !important;
}
body.is-past-hero .side-bar {
  background: #FFFEF8 !important;
  border-right-color: var(--line, rgba(36, 59, 105, 0.25)) !important;
}
/* Couleur du texte du chrome en navy par-dessus le cream (état au repos) */
body.is-past-hero .site-header .nav a,
body.is-past-hero .side-bar .side-text,
body.is-past-hero .lang-toggle {
  color: var(--navy, #243B69) !important;
}
body.is-past-hero .site-header .nav a {
  border-color: var(--line, rgba(36, 59, 105, 0.25)) !important;
}

/* États actif / hover : texte cream sur fond navy (préserve le design original)
   Spécificité supérieure (.active / :hover ajoute une classe) → ces règles
   gagnent contre la règle "couleur navy au repos" ci-dessus. */
body.is-past-hero .site-header .nav a.active,
body.is-past-hero .site-header .nav a:hover,
body.is-past-hero .site-header .lang-toggle:hover {
  color: var(--bg, #FFFEF8) !important;
}

/* ───────── État "dans le hero" : chrome caché, fond original ───────── */
/* Ne s'applique que si .has-hero ET PAS .is-past-hero (donc pendant l'intro) */
body.has-hero:not(.is-past-hero) .site-header {
  background: transparent !important;
  border-bottom-color: transparent !important;
}
body.has-hero:not(.is-past-hero) .side-bar {
  background: transparent !important;
  border-right-color: transparent !important;
}
body.has-hero:not(.is-past-hero) .site-header .nav,
body.has-hero:not(.is-past-hero) .site-header .nav-toggle,
body.has-hero:not(.is-past-hero) .side-bar .side-text,
body.has-hero:not(.is-past-hero) .side-bar .side-logo {
  opacity: 0 !important;
  pointer-events: none;
}

/* ───────── Transitions douces (fade des éléments + bg) ───────── */
.site-header,
.side-bar,
body {
  transition: background-color .4s ease, border-color .4s ease;
}
.site-header .nav,
.site-header .nav-toggle,
.side-bar .side-text,
.side-bar .side-logo {
  transition: opacity .4s ease;
}

/* Réduit-motion : pas de transition */
@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header .nav,
  .site-header .nav-toggle,
  .side-bar,
  .side-bar .side-text,
  .side-bar .side-logo,
  body {
    transition: none !important;
  }
}

/* ───────── Mobile : panneau de menu = cream, donc active doit être navy
   La règle desktop ci-dessus (color: var(--bg)) est faite pour les liens
   posés sur fond navy au hover. Sur mobile, le panneau du menu est cream,
   donc cream sur cream = invisible. On force navy sur mobile. */
@media (max-width: 600px) {
  body.is-past-hero .site-header .nav a.active,
  body:not(.is-past-hero) .site-header .nav a.active {
    color: var(--navy, #243B69) !important;
    background: transparent !important;
    font-weight: 600;
  }
  body.is-past-hero .site-header .nav a:hover,
  body:not(.is-past-hero) .site-header .nav a:hover {
    color: var(--navy, #243B69) !important;
    background: transparent !important;
  }
  /* Bouton langue : mêmes overrides (sinon tap-sticky hover sur mobile
     remet le fond navy via la règle desktop ci-dessus). */
  body.is-past-hero .site-header .lang-toggle,
  body.is-past-hero .site-header .lang-toggle:hover,
  body.is-past-hero .site-header .lang-toggle:active,
  body.is-past-hero .site-header .lang-toggle:focus,
  body:not(.is-past-hero) .site-header .lang-toggle:hover {
    color: var(--navy, #243B69) !important;
    background: transparent !important;
  }
}