/* ============================================================================
   Chrome des pages internes — header (pilule flottante) + footer premium.
   Miroir de landing.css : mêmes classes (.header/.nav/.footer…) et mêmes tokens
   → en-tête et pied STRICTEMENT identiques à la landing sur toutes les pages.
   Complément à app.css.
   ========================================================================== */

:root{ --gutter-app:max(clamp(18px,4vw,40px),env(safe-area-inset-left),env(safe-area-inset-right)); }

header,footer{ position:relative; z-index:2; }

/* ── Header : pilule flottante en verre dépoli ─────────────────────────────── */
.header{ position:sticky; top:0; z-index:30; padding-top:env(safe-area-inset-top); }
.header__inner{
  width:min(1080px, calc(100% - 2*var(--gutter-app)));
  margin:clamp(10px,1.6vw,18px) auto 0;
  display:flex; align-items:center; gap:24px;
  padding:12px 14px 12px 18px;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  background:var(--glass);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);
  backdrop-filter:blur(16px) saturate(1.1);
  transition:background-color .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
}
.header.is-scrolled .header__inner{ background:rgba(7,11,20,.9); border-color:var(--line-2); box-shadow:var(--shadow-card); }

/* brand (repris d'app.css) — sous-titre « Voyance » façon landing */
.header .brand__name{ font-size:1.18rem; letter-spacing:.01em; }
.header .brand__sub{ font-size:.6rem; letter-spacing:.42em; margin-top:3px; }

.nav{ margin-left:auto; display:flex; gap:30px; align-items:center; }
.nav a{ position:relative; font-size:.82rem; font-weight:500; color:var(--text-dim); letter-spacing:.01em; transition:color .3s var(--ease); }
.nav a::after{ content:""; position:absolute; left:0; bottom:-6px; width:0; height:1px;
  background:linear-gradient(90deg,var(--gold),transparent); transition:width .35s var(--ease); }
.nav a:hover{ color:var(--cream); }
.nav a:hover::after{ width:100%; }
.nav a[aria-current]{ color:var(--gold-bright); }
.nav a[aria-current]::after{ width:100%; }
.header__cta{ flex:0 0 auto; }

/* Petit bouton (CTA du header) — s'appuie sur les vars d'app.css (--py/--px) */
.btn--sm{ --py:11px; --px:18px; font-size:.7rem; letter-spacing:.1em; }

/* burger (mobile) */
.burger{ display:none; width:44px; height:44px; margin-left:auto; flex:0 0 auto;
  background:transparent; border:1px solid var(--line); border-radius:var(--r-sm); position:relative; }
.burger span{ position:absolute; left:11px; right:11px; height:1.5px; background:var(--cream); border-radius:2px;
  transition:transform .4s var(--ease),opacity .3s var(--ease); }
.burger span:nth-child(1){ top:17px; }
.burger span:nth-child(2){ bottom:17px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-5px) rotate(-45deg); }

/* menu mobile déroulant */
.mobile-menu{
  width:min(1080px, calc(100% - 2*var(--gutter-app)));
  margin:10px auto 0; padding:0 18px;
  display:flex; flex-direction:column; gap:6px;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:rgba(7,11,20,.96);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  overflow:hidden; max-height:0; opacity:0;
  transition:max-height .5s var(--ease),opacity .4s var(--ease),padding .5s var(--ease);
}
.mobile-menu.is-open{ max-height:80vh; overflow-y:auto; opacity:1; padding:14px 18px max(18px,env(safe-area-inset-bottom)); }
.mobile-menu a:not(.btn){ padding:14px 10px; min-height:48px; display:flex; align-items:center;
  color:var(--text); border-bottom:1px solid var(--line); font-size:.95rem; letter-spacing:.01em; }
.mobile-menu a:not(.btn):last-of-type{ border-bottom:0; }
.mobile-menu .btn{ margin-top:14px; }

/* ── Footer premium (identique à la landing) ───────────────────────────────── */
.container{ width:min(1080px, calc(100% - 2*var(--gutter-app))); margin-inline:auto; }
.footer{ margin-top:clamp(48px,8vw,96px); background:var(--ink-deep);
  padding-block:clamp(44px,6vw,64px); padding-bottom:max(clamp(44px,6vw,64px),env(safe-area-inset-bottom));
  border-top:1px solid var(--line); }
.footer__inner{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; }
.brand--footer{ display:inline-flex; align-items:center; gap:11px; }
.brand--footer .brand__mark{ width:34px; height:34px; }
.brand--footer .brand__name{ font-size:1.3rem; letter-spacing:.01em; }
.brand--footer .brand__sub{ font-size:.6rem; letter-spacing:.42em; margin-top:3px; }
.footer__tag{ margin:0; color:var(--text-dim); font-size:.9rem; }
.footer__nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 26px; }
.footer__nav a{ color:var(--text); font-size:.85rem; transition:color .3s var(--ease); }
.footer__nav a:hover{ color:var(--gold-bright); }
.footer__legal{ margin:8px 0 0; color:var(--text-mute); font-size:.74rem; line-height:1.7; max-width:60ch; }

/* Bandeau crédits (compte, confirmation question) */
.credits-banner{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border:1px solid var(--line-2);
  border-radius:var(--r-pill); background:rgba(205,162,95,.08); color:var(--cream); font-size:.9rem; }
.credits-banner svg{ width:16px; height:16px; color:var(--gold-bright); fill:none; stroke:currentColor; stroke-width:1.4; }
.credits-banner strong{ color:var(--gold-bright); }

/* ── Responsive : bascule burger sous 900px ────────────────────────────────── */
@media (max-width:900px){
  .nav{ display:none; }
  .header__cta{ margin-left:auto; }
  .burger{ display:block; margin-left:12px; }
}
@media (max-width:560px){
  .header__cta{ display:none; }
  .burger{ margin-left:auto; }
}