/* ==========================================================
   Header & Mobile Navigation — Marie Julien Cuisine
   Charge partout via : <link rel="stylesheet" href="assets/header-nav.css?v=1">
   À placer APRÈS le <style> inline pour bien override les rules
========================================================== */

/* Bouton hamburger : caché en desktop */
.site-header .nav-toggle {
  display: none;
  background: none;
  border: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  margin-right: 8px;
  -webkit-tap-highlight-color: transparent;
}
.site-header .nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--navy, #243B69);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
  transform-origin: center;
}

/* Mobile : afficher hamburger, masquer la nav par défaut */
@media (max-width: 600px) {
  /* La barre du haut .site-header devient INVISIBLE sur mobile.
     Elle servait juste de container pour la nav desktop. Sur mobile,
     seul le hamburger flottant reste visible. */
  .site-header {
    background: transparent !important;
    border-bottom: 0 !important;
    height: 0 !important;
    overflow: visible;             /* le hamburger reste visible même si height=0 */
  }
  /* Du coup main n'a plus besoin de padding-top pour compenser le header */
  main { padding-top: 0 !important; }

  /* Tous les liens de la nav mobile DOIVENT être visibles dans le panneau,
     y compris la page courante (.active). Le bug "la page actuelle disparait
     du menu" venait d'un conflit avec un display:none inline.
     On utilise body + force visibility/opacity pour blinder. */
  body .site-header .nav > a,
  body .site-header .nav > a.active,
  body .site-header .nav > a:not(.active) {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Hamburger ANCRÉ en haut à droite (z-index supérieur à la sidebar 50) */
  .site-header .nav-toggle {
    display: inline-flex;
    position: fixed;
    top: 8px;
    right: 12px;
    z-index: 210;
    margin: 0;
    background: var(--bg, #FFFEF8);
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(36, 59, 105, 0.08);
  }

  /* La nav devient un panneau plein écran fermé par défaut.
     Démarre APRÈS la sidebar (left: var(--side-w)) pour ne pas être
     cachée derrière elle. */
  .site-header .nav {
    display: none !important;
    position: fixed;
    top: var(--header-h, 64px);
    left: var(--side-w, 40px);
    right: 0;
    bottom: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    background: var(--bg, #FFFEF8);
    padding: 24px 20px 40px;
    overflow-y: auto;
    z-index: 200;
    border-top: 1px solid var(--line, rgba(36,59,105,0.18));
  }
  .site-header .nav a {
    display: flex !important;
    align-items: center;
    width: 100%;
    padding: 18px 16px !important;
    font-size: 16px !important;
    border-bottom: 1px solid var(--line-soft, rgba(36,59,105,0.12));
    border-left: 0 !important;          /* annule la barre gauche desktop */
    letter-spacing: 0.04em;
  }
  /* Active : navy text/border seulement, PAS de fond plein navy
     IMPORTANT : on doit battre la spécificité de
       body.is-past-hero .site-header .nav a.active
     (header-scroll.css) qui force color: var(--bg) = cream sur le lien
     actif (prévu pour le DESKTOP où le fond passe en navy au hover). En
     mobile le panneau est cream, donc cream sur cream = lien invisible.
     On utilise body.is-past-hero ET body:not(.is-past-hero) pour couvrir
     les deux états avec une spécificité ≥ celle du sélecteur fautif. */
  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;
  }
  /* Désactive le hover navy (illisible sur mobile tap-sticky) */
  body.is-past-hero .site-header .nav a:hover,
  body:not(.is-past-hero) .site-header .nav a:hover {
    background: transparent !important;
    color: var(--navy, #243B69) !important;
  }

  /* Bouton langue (FR/EN) : par défaut height:100% pour s'aligner dans la
     barre desktop. Sur mobile, le .nav est un panneau plein écran en
     flex column → le bouton s'étire et devient un énorme rectangle.
     On le ramène à la taille d'un item de menu standard. */
  .site-header .nav .lang-toggle {
    display: flex !important;
    width: 100%;
    height: auto !important;
    min-width: 0;
    padding: 18px 16px !important;
    font-size: 16px !important;
    justify-content: flex-start !important;
    border-left: 0 !important;
    border-bottom: 1px solid var(--line-soft, rgba(36,59,105,0.12));
    background: transparent !important;
    color: var(--navy, #243B69) !important;
    letter-spacing: 0.04em;
  }
  .site-header .nav .lang-toggle:hover,
  .site-header .nav .lang-toggle:active,
  .site-header .nav .lang-toggle:focus {
    background: transparent !important;
    color: var(--navy, #243B69) !important;
  }
  .site-header .nav .lang-toggle::before {
    width: 16px;
    height: 16px;
    margin-right: 10px;
  }

  /* Quand le menu est ouvert : le panneau et le hamburger DOIVENT être
     pleinement visibles et cliquables, même si on est encore dans le
     hero photo de la home (body.has-hero:not(.is-past-hero) applique
     normalement opacity:0 + pointer-events:none via header-scroll.css).
     Sans ce safety, ouvrir le menu sur la home avant le 1er scroll
     donne un panneau invisible. */
  .site-header.is-nav-open .nav,
  body.has-hero .site-header.is-nav-open .nav {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
  }
  /* Le hamburger doit lui aussi rester visible même en zone hero,
     sinon on ne peut pas l'utiliser pour ouvrir le menu */
  body.has-hero .site-header .nav-toggle,
  body.has-hero:not(.is-past-hero) .site-header .nav-toggle {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Animer le hamburger en croix quand ouvert */
  .site-header.is-nav-open .nav-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .site-header.is-nav-open .nav-toggle span:nth-child(2) {
    opacity: 0;
  }
  .site-header.is-nav-open .nav-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Empêcher le scroll body quand menu ouvert */
  body.is-nav-locked {
    overflow: hidden;
    /* iOS bounce fix */
    position: relative;
  }
}

/* Réduit la motion pour utilisateurs sensibles */
@media (prefers-reduced-motion: reduce) {
  .site-header .nav-toggle span,
  .site-header .nav { transition: none !important; }
}

/* Scroll doux sur ancres internes (pour le CTA "Découvrir" du hero) */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}