/* =========================================
   RESPONSIVE V2.1 — Hamburger + fallback safe
   Objectif:
   - Hamburger TOUJOURS visible en mobile
   - Menu en drawer opaque anthracite "ink"
   - Fallback: si JS/clic KO, le menu reste lisible en vertical
   ========================================= */

@media (max-width: 980px){

  /* Assure le bon layout header */
  .mast{ position: relative; }

  /* === Bouton hamburger (FORCÉ) === */
  .nav-toggle{
    position: absolute !important;
    top: 18px !important;
    right: 14px !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(200,155,79,.40) !important;
    background: rgba(0,0,0,.25) !important;
    display: inline-flex !important; /* <- clé */
    align-items: center !important;
    justify-content: center !important;
    z-index: 10002 !important;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-toggle span{
    display:block;
    width: 20px;
    height: 2px;
    background: var(--yan-gold, #c89b4f);
    margin: 4px 0;
    transition: transform .22s ease, opacity .22s ease;
  }
  body.nav-open .nav-toggle span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
  body.nav-open .nav-toggle span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

  /* === Overlay opaque (bloque la page derrière) === */
  .nav-overlay{
    position: fixed !important;
    inset: 0 !important;
    background: #000 !important;
    opacity: .92 !important;
    display: none;
    z-index: 10000 !important;
  }

  /* === Drawer menu === */
  #site-nav{
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    height: 100dvh !important;
    width: min(88vw, 380px) !important;
    padding: 86px 18px 18px !important;

    transform: translateX(110%);
    transition: transform .24s ease;
    z-index: 10001 !important;

    /* Anthracite + ink stains (opaque, premium) */
    background:
      radial-gradient(circle at 20% 28%, #131313 0%, #1b1b1b 45%),
      radial-gradient(circle at 78% 74%, #101010 0%, #1a1a1a 52%),
      linear-gradient(145deg, #1a1a1a 0%, #202020 45%, #161616 100%) !important;

    border-left: 1px solid rgba(200,155,79,.22) !important;
    box-shadow: -22px 0 60px rgba(0,0,0,.85) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.nav-open #site-nav{ transform: translateX(0); }
  body.nav-open .nav-overlay{ display: block; }
  body.nav-open{ overflow: hidden; }

  /* === Fallback lisible : menu vertical === */
  #site-nav .nav__ul{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: auto !important;
    max-height: calc(100dvh - 110px) !important;
  }

  #site-nav .nav__a{
    display:block !important;
    text-align:center !important;
    font-size: 22px !important;
    padding: 12px 12px !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.06) !important;
  }
  #site-nav .nav__a:hover{
    background: rgba(200,155,79,.10) !important;
    border-color: rgba(200,155,79,.22) !important;
  }

  /* Layouts */
  .home__grid{ grid-template-columns: 1fr !important; }
  .wrap{ padding: 20px 16px 50px !important; }

  /* Titres adaptés mobile */
  .h1{
    font-size: clamp(22px, 6.2vw, 28px) !important;
    line-height: 1.15 !important;
  }
}

@media (max-width: 420px){
  #site-nav .nav__a{ font-size: 20px !important; padding: 11px 10px !important; }
}

/* === V2.2 FIX: overlay/menu MUST be above everything (Index) === */
@media (max-width: 980px){
  .nav-overlay{ z-index: 999998 !important; }
  #site-nav{ z-index: 999999 !important; }
  .nav-toggle{ z-index: 1000000 !important; }

  /* If some elements still sit above (rare), fade the page content when menu is open */
  body.nav-open main,
  body.nav-open .wrap{
    opacity: 0.08 !important;
  }
  body.nav-open main,
  body.nav-open .wrap{
    pointer-events: none !important;
  }
  body.nav-open #site-nav,
  body.nav-open .nav-toggle,
  body.nav-open .nav-overlay{
    pointer-events: auto !important;
  }
}

/* =========================================================
   V23 — Bouton MENU (ovale, premium, fixe en mobile)
   - On garde le HTML existant (spans) mais on les masque
   ========================================================= */
@media (max-width: 980px){
  .nav-toggle{
    position: fixed !important;
    top: 14px !important;
    right: 14px !important;
    width: auto !important;
    height: 44px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;

    border: 1px solid rgba(200,155,79,.42) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%),
      radial-gradient(circle at 30% 30%, rgba(200,155,79,.10) 0%, transparent 55%),
      linear-gradient(145deg, #161616 0%, #1f1f1f 55%, #141414 100%) !important;

    box-shadow:
      0 10px 28px rgba(0,0,0,.55),
      inset 0 1px 0 rgba(255,255,255,.06) !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1000000 !important;
  }

  .nav-toggle span{ display:none !important; }

  .nav-toggle::after{
    content: "MENU";
    font-family: var(--title-font, "Cinzel", Georgia, serif);
    font-size: 13px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--yan-gold, #c89b4f);
    line-height: 1;
  }

  body.nav-open .nav-toggle::after{
    content: "✕";
    font-size: 18px;
    letter-spacing: 0;
  }
}

/* =========================================================
   V24 — Ajustement logo + Titre accueil hiérarchisé
   ========================================================= */

@media (max-width: 980px){

  /* ↓ On descend légèrement le logo */
  .logo{
    margin-top: 26px !important;
  }

  /* ===== Titre accueil en 2 lignes premium ===== */

  .h1{
    font-size: 18px !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1.2 !important;
  }

  .h1 span{
    display:block;
  }

  /* Première ligne plus discrète */
  .h1 span:first-child{
    font-size: 16px !important;
    letter-spacing: .18em;
    opacity: .85;
  }

  /* Deuxième ligne plus forte */
  .h1 span:last-child{
    font-size: 26px !important;
    letter-spacing: .08em;
    color: var(--yan-gold, #c89b4f);
    margin-top: 6px;
  }
}

/* =========================================================
   V25 — Ajustements fins logo + couleurs titre + spacing
   ========================================================= */

@media (max-width: 980px){

  /* Descendre encore le logo */
  .logo{
    margin-top: 42px !important;
  }

  /* Titre accueil couleurs précises */
  .h1 span:first-child{
    color: #f2e9dc !important; /* beige */
  }

  .h1 span:last-child{
    color: #c89b4f !important; /* doré */
  }

  /* Réduction espace sous le titre */
  .h1{
    margin-bottom: 14px !important;
  }

  /* Réduction espace avant paragraphe suivant */
  .h1 + p,
  .h1 + .lead,
  .h1 + div{
    margin-top: 6px !important;
  }

  /* === FAQ mobile : accordéon lisible, 1 colonne === */
  .faq-split{ display:none !important; }
  .faq-mobile{ display:block !important; }
  .faq-wrap{ padding: 18px !important; }

  /* FAQ mobile premium tweaks */
  .faq-mobile__head{ display:none !important; }

  /* Sur la page FAQ : bouton MENU toujours accessible (et cliquable) */
  body.page-faq .nav-toggle{
    position: fixed !important;
    top: 14px !important;
    right: 14px !important;
    z-index: 10002 !important;
    pointer-events: auto !important;
    touch-action: manipulation;
  }

}