/* ═══ Header universal theming ═══
   Variables surchargeables par page (LIGHT par défaut, DARK sur pages dark theme).
   Pour passer en DARK : surcharger --header-bg, --header-text, --header-text-hover,
   --header-border dans le :root de la page.
*/
:root{
  --header-bg:rgba(248,249,251,.92);              /* LIGHT default */
  --header-dropdown-bg:var(--bg-surface);          /* dropdown background (override per page) */
  --header-text:var(--silver-2);                   /* DARK text on LIGHT bg */
  --header-text-hover:var(--accent);               /* rouge charte */
  --header-text-active:var(--accent);              /* rouge charte pour actif */
  --header-border:var(--border);                   /* border bottom */
  --header-mobile-bg:var(--bg-dark);               /* menu mobile fond */
  --header-mobile-text:#fff;                       /* menu mobile texte */
}
/* ════════════════════════════════════════════════════════════
   HEADER.CSS — Source unique pour les 16 pages du site
   Version officielle (unifiée avec la landing)
   Pour modifier le header : éditer UNIQUEMENT ce fichier
   ════════════════════════════════════════════════════════════ */

/* Variables CSS (si non définies dans la page) */
:root{
  --bg-primary:#F8F9FB;
  --bg-surface:#FFFFFF;
  --bg-elevated:#F1F3F6;
  --bg-dark:#1A1D23;
  --text-primary:#1A1D23;
  --text-secondary:#475569;
  --text-on-accent:#FFFFFF;
  --accent:#DC2626;
  --accent-dark:#991B1B;
  --accent-soft:#FEE2E2;
  --border:#E2E8F0;
  --shadow-sm:0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:0 8px 24px rgba(0,0,0,0.10);
  --shadow-accent:0 8px 24px rgba(220,38,38,0.25);
  --metal-sheen:linear-gradient(135deg,rgba(255,255,255,0.6) 0%,rgba(255,255,255,0.2) 50%,rgba(255,255,255,0.8) 100%);
  --font-sans:'Sora',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --silver:var(--text-secondary);
  --silver-2:var(--text-primary);
  --rosso:var(--accent);
  --stripe:#635BFF;
  --stripe-dark:#5046E5;
}

/* Placeholder pour éviter le layout shift pendant le chargement */
#site-header{
  min-height:84px;
  display:block;
  position:sticky;
  top:0;
  z-index:90;
}

/* ═══ FIX STICKY : overflow-x:clip sur html ET body casse position:sticky ═══ */
html{overflow-x:visible!important;overflow-y:visible!important}
body{overflow-x:visible!important}

/* ═══ ESPACE MINIMALISTE entre header et contenu ═══ */
/* Le page-hero a son propre padding-top pour l'espace minimaliste */
/* Pas de padding-top sur main pour éviter le gap/fond parasite */
#site-header + main,
#site-header + section{
  padding-top:0;
}

/* Pour les pages avec .page-hero : padding-top minimaliste unifié */
#site-header + main .page-hero,
#site-header + section.page-hero{
  padding-top:80px!important;
  padding-bottom:48px!important;
}

/* Pour index.html qui a un hero spécifique */
#site-header + main .hero{
  padding-top:80px!important;
}

/* ═══ HEADER (unifié avec la landing) ═══ */
.header{position:sticky;top:0;z-index:90;background:var(--header-bg);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid var(--border);box-shadow:inset 0 -1px 0 var(--accent)}
.header__inner{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;max-width:1080px;margin:0 auto;gap:20px}
.brand{font-family:var(--font-sans);font-weight:700;font-size:1rem;letter-spacing:.04em;color:var(--header-text);display:flex;align-items:center;gap:8px;text-transform:uppercase;flex-shrink:0}
.brand__dot{width:10px;height:10px;background:var(--accent);animation:bp 3s ease-in-out infinite}
@keyframes bp{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.6)}50%{box-shadow:0 0 0 4px rgba(220,38,38,0)}}
.header__nav{flex:1;display:flex;justify-content:center}
.header__nav-list{list-style:none;display:flex;gap:4px;padding:0;margin:0}
.header__nav-link{font-family:var(--font-sans);font-size:0.875rem;font-weight:500;color:var(--header-text);padding:12px 10px;transition:all 0.2s;letter-spacing:0.02em;position:relative;text-decoration:none;display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
.header__nav-link:hover{color:var(--header-text-hover)}
.header__nav-link::after{content:'';position:absolute;bottom:8px;left:12px;right:12px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s cubic-bezier(.16,1,.3,1)}
.header__nav-link:hover::after{transform:scaleX(1)}
.header__nav-dropdown{position:relative}
.header__nav-dropdown-toggle{background:none;border:none;cursor:pointer;font-family:var(--font-sans);font-size:0.875rem;font-weight:500;color:var(--header-text);text-transform:none;letter-spacing:0.02em;padding:12px 10px;display:inline-flex;align-items:center;gap:4px;min-height:44px;line-height:1.6;vertical-align:middle;transition:color 0.2s}
.header__nav-dropdown-toggle::after{content:'▾';font-size:.625em;opacity:.6;margin-left:4px}
.header__nav-dropdown-menu{list-style:none;padding:0;margin:0}
.header__nav-sublink{padding-left:24px!important;font-size:.8125rem!important;opacity:.8}
.header__burger{display:none;flex-direction:column;gap:4px;padding:8px;cursor:pointer;background:none;border:none}
.header__burger span{width:22px;height:2px;background:var(--header-text);transition:all .25s cubic-bezier(.16,1,.3,1)}
.header__burger[aria-expanded="true"] span{background:var(--header-text)}
.header__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.header__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.header__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav-actions{display:flex;align-items:center;gap:16px;flex-shrink:0}
.header__phone{font-family:var(--font-mono);font-size:0.8125rem;font-weight:500;color:var(--header-text);display:inline-flex;align-items:center;gap:6px;transition:color 0.2s;letter-spacing:0.02em;text-decoration:none}
.header__phone:hover{color:var(--header-text-hover)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;font-family:var(--font-sans);font-size:.875rem;font-weight:600;border-radius:0;transition:all .25s cubic-bezier(.16,1,.3,1);white-space:nowrap;cursor:pointer;text-decoration:none;letter-spacing:.04em;text-transform:uppercase;position:relative;overflow:hidden}
.btn--primary{background:var(--bg-dark);color:var(--text-on-accent);background-image:var(--metal-sheen);position:relative;overflow:hidden}
.btn--primary::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent);transition:left .6s cubic-bezier(.16,1,.3,1)}
.btn--primary:hover::before{left:100%}
.btn--primary:hover{background:var(--silver);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn--terra{background:var(--accent);color:var(--text-on-accent);box-shadow:var(--shadow-accent);position:relative;overflow:hidden}
.btn--terra::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);transition:left .6s cubic-bezier(.16,1,.3,1)}
.btn--terra:hover::before{left:100%}
.btn--terra:hover{background:var(--accent-dark);transform:translateY(-1px);box-shadow:0 12px 32px rgba(220,38,38,.4)}
.btn--ghost{background:transparent;color:var(--silver-2);border:1px solid var(--silver)}
.btn--ghost:hover{background:var(--bg-elevated);border-color:var(--accent);color:var(--accent)}
.btn--lg{padding:16px 28px;font-size:.9375rem}
.btn--block{width:100%;justify-content:center}
.btn--stripe{background:var(--stripe);color:#fff;position:relative;overflow:hidden}
.btn--stripe::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);transition:left .6s cubic-bezier(.16,1,.3,1)}
.btn--stripe:hover::before{left:100%}
.btn--stripe:hover{background:var(--stripe-dark);transform:translateY(-1px);box-shadow:0 8px 24px rgba(99,91,255,.4)}

/* ═══ RESPONSIVE ═══ */

/* Desktop : lien actif = soulignement permanent (pas de background) */
.header__nav-link.is-active{color:var(--header-text-active)!important}
.header__nav-link.is-active::after{transform:scaleX(1)!important}

@media(min-width:880px){
  .header__phone{display:inline-flex}
  .header__nav-dropdown-menu{
    position:absolute;
    top:100%;
    left:0;
    background:var(--header-dropdown-bg);
    border:1px solid var(--border);
    box-shadow:var(--shadow-md);
    min-width:200px;
    padding:8px 0;
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:all .25s cubic-bezier(.16,1,.3,1);
    z-index:100;
  }
  .header__nav-dropdown:hover .header__nav-dropdown-menu,
  .header__nav-dropdown:focus-within .header__nav-dropdown-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
  .header__nav-sublink{
    padding:10px 16px!important;
    font-size:.8125rem!important;
    opacity:1;
    display:block;
  }
  .header__nav-sublink:hover{
    background:var(--bg-elevated);
  }
}

/* Ajustement pour TOUS les écrans desktop (≥880px) : éviter le débordement du bouton */
@media(min-width:880px){
  .header__inner{
    padding:14px 16px;
    gap:12px;
  }
  .header__nav-list{
    gap:0;
  }
  .header__nav-link{
    padding:12px 6px;
    font-size:0.8125rem;
  }
  .header__nav-dropdown-toggle{
    padding:12px 6px;
    font-size:0.8125rem;
  }
  .header__phone{
    font-size:0.75rem;
  }
  .btn--primary{
    padding:10px 16px;
    font-size:0.8125rem;
  }
}

/* En dessous de 1200px : cacher le texte du téléphone pour gagner de la place */
@media(min-width:880px) and (max-width:1200px){
  .header__phone-text{
    display:none;
  }
  .header__phone{
    gap:0;
  }
}

/* En dessous de 1010px : passer en mode mobile (menu hamburger) */
@media(max-width:1009px){
  .header__nav{
    flex:0 0 auto;
    width:auto;
    justify-content:flex-start;
  }
  .header__burger{
    display:flex;
  }
  .header__nav-list{
    position:fixed;
    top:84px;
    left:0;
    right:0;
    width:100vw;
    max-width:100vw;
    flex-direction:column;
    background:var(--header-mobile-bg);
    border-bottom:1px solid var(--border);
    padding:16px 20px;
    gap:0;
    transform:translateY(-100%);
    opacity:0;
    pointer-events:none;
    transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .3s;
    z-index:89;
  }
  .header__nav-list.is-open{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }
  .header__nav-list.is-open .header__nav-link{
    color:var(--header-mobile-text);
  }
  .header__nav-list.is-open .header__nav-link:hover{
    color:var(--header-text-hover);
  }
  .header__nav-link{
    padding:14px 0;
    font-size:.9375rem;
    border-bottom:1px solid var(--border);
    width:100%;
  }
  .header__nav-link::after{
    display:none;
  }
  .header__nav-link.is-active{
    background:rgba(148,163,184,0.08);
    padding-left:12px;
  }
  .header__nav-sublink{
    padding-left:24px!important;
    font-size:.875rem!important;
  }
  .header__phone-text{
    display:none;
  }
  html{
    overflow-x:hidden;
    max-width:100vw;
  }
  body{
    overflow-x:hidden;
    max-width:100vw;
  }
}

@media(max-width:520px){
  .header__inner{
    padding:12px 14px;
    gap:8px;
  }
  .btn{
    padding:8px 12px;
    font-size:.75rem;
    letter-spacing:.02em;
  }
  .btn--primary{
    padding:8px 12px;
    font-size:.75rem;
  }
  .brand img{
    height:40px;
  }
  .header__phone{
    font-size:.75rem;
  }
  .header__phone svg{
    width:12px;
    height:12px;
  }
}

@media(max-width:420px){
  .header__inner{
    padding:10px 12px;
    gap:6px;
  }
  .brand img{
    height:36px;
  }
  .header__phone{
    display:none;
  }
  .btn--primary{
    padding:8px 10px;
    font-size:.6875rem;
    letter-spacing:.02em;
  }
}

@media(max-width:380px){
  .brand img{
    height:32px;
  }
  .btn--primary{
    padding:6px 8px;
    font-size:.625rem;
  }
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* Skip-link — accessibilité RGAA, source unique */
.skip-link{position:absolute!important;top:-100px!important;left:16px;background:var(--accent,#DC2626);color:#fff;padding:12px 20px;z-index:9999;font-weight:600;font-size:0.875rem;text-decoration:none;border-radius:0;clip-path:inset(50%)}.skip-link:focus{top:0!important;clip-path:none}