/* ============================================================
   MON GR20 — Granite & Braise : pont pour pages "legacy"
   (1) Alias des variables de l'ancien thème -> tokens GB, pour les
       pages dont on conserve le <style> inline (layout préservé,
       couleurs/polices basculées en GB automatiquement).
   (2) Règles GB dédiées aux pages légales (.legal-*) et 404 (.error-*)
       qui n'ont AUCUN <style> inline.
   À charger APRÈS granite-braise.css + gb-article.css + tout <style> inline.
   ============================================================ */

/* (1) ---------- Alias compat : ancien thème -> GB ---------- */
:root{
  --bg:var(--granite);
  --surface:var(--stone);
  --surface2:#211d19;
  --ink:var(--bone);
  --ink2:var(--bone-dim);
  --ink3:var(--bone-dim);
  --accent:var(--ember);
  --accent2:var(--ember);
  --blaze:var(--ember);
  --blaze-btn:var(--ember);
  --border:var(--line);
  --border2:var(--line-strong);
  --radius:16px;
  --font-body:'Archivo','Helvetica Neue',Arial,sans-serif;
  --font-disp:'Fraunces',Georgia,'Times New Roman',serif;
  --font-mono:ui-monospace,'Cascadia Code',SFMono-Regular,Consolas,monospace;
}

/* Dégage la nav fixe quand <main> suit directement la nav (pages sans fil d'Ariane) */
.gb-menu + main{padding-top:clamp(100px,13vh,132px)}

/* (2) ---------- Pages légales (.legal-*) ---------- */
.legal-wrap{
  width:min(900px,calc(100% - 40px));margin:0 auto;
  padding:clamp(24px,4vw,40px) 0 clamp(80px,10vw,130px);
}
.legal-wrap .hero{margin-bottom:clamp(30px,5vw,52px)}
.legal-wrap .kicker{
  display:block;margin:0 0 16px;color:var(--ember);
  font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
}
.legal-wrap .hero h1{
  font-family:var(--font-disp);font-weight:300;
  font-size:clamp(2.4rem,6vw,4.6rem);line-height:.98;letter-spacing:-.03em;color:var(--bone);
}
.legal-wrap .lead{max-width:60ch;margin:22px 0 0;color:var(--bone-dim);font-size:clamp(1.04rem,1.6vw,1.22rem);line-height:1.7}
.legal-wrap .updated{display:block;margin-top:16px;color:var(--bone-dim);font-size:.86rem;letter-spacing:.02em}
.legal-section{
  margin-top:clamp(18px,2.6vw,26px);padding:clamp(24px,4vw,40px);
  border:1px solid var(--line);border-radius:22px;background:var(--stone);
}
.legal-section h2{font-family:var(--font-disp);font-weight:300;font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.08;letter-spacing:-.02em;color:var(--bone);margin:0 0 16px}
.legal-section h3{font-family:var(--font-disp);font-weight:500;font-size:1.18rem;color:var(--bone);margin:20px 0 8px}
.legal-section p,.legal-section li{color:var(--bone-dim);font-size:1.04rem;line-height:1.75}
.legal-section p{margin:0 0 14px}
.legal-section p:last-child{margin-bottom:0}
.legal-section a{color:var(--ember);border-bottom:1px solid transparent;transition:border-color .25s var(--ease-out)}
.legal-section a:hover,.legal-section a:focus-visible{border-color:var(--ember)}
.legal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px}
.legal-card{padding:20px;border:1px solid var(--line);border-radius:14px;background:rgba(0,0,0,.18)}
.legal-card h3{margin-top:0}
.legal-card p{margin:0;color:var(--bone-dim)}

/* (2) ---------- 404 (.error-*) ---------- */
.error-page{padding:clamp(24px,4vw,40px) 0 clamp(80px,10vw,130px)}
.error-panel{width:min(820px,calc(100% - 40px));margin:0 auto;text-align:center}
.error-code{
  display:block;font-family:var(--font-disp);font-weight:300;letter-spacing:-.04em;
  font-size:clamp(5rem,18vw,11rem);line-height:.9;color:var(--bone-dim);opacity:.5;
}
.error-panel .article-hero{margin:8px 0 0;text-align:center;border:0;background:none}
.error-panel .kicker{display:block;margin:0 0 14px;color:var(--ember);font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.error-panel .lead{max-width:54ch;margin:18px auto 0;color:var(--bone-dim);font-size:clamp(1.04rem,1.7vw,1.24rem);line-height:1.7}

/* ---------- Boutons + rangées (légal + 404 uniquement) ---------- */
.legal-wrap .link-row,.error-page .link-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.error-page .link-row{justify-content:center}
.legal-wrap .btn,.error-page .btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:46px;
  padding:0 22px;border:1px solid var(--line-strong);border-radius:999px;
  background:transparent;color:var(--bone);font-family:var(--font-body);
  font-size:.92rem;font-weight:500;letter-spacing:.02em;text-decoration:none;
  transition:border-color .25s var(--ease-out),background .25s var(--ease-out),color .25s var(--ease-out);
}
.legal-wrap .btn:hover,.error-page .btn:hover,.legal-wrap .btn:focus-visible,.error-page .btn:focus-visible{border-color:var(--bone);background:rgba(241,235,224,.06)}
.legal-wrap .btn.primary,.error-page .btn.primary,.legal-wrap .btn--primary,.error-page .btn--primary{background:var(--ember);border-color:var(--ember);color:var(--granite);font-weight:600}
.legal-wrap .btn.primary:hover,.error-page .btn.primary:hover,.legal-wrap .btn--primary:hover,.error-page .btn--primary:hover{background:#ef7a4e;border-color:#ef7a4e;color:var(--granite)}

/* section-head / eyebrow (légal + 404) */
.legal-wrap .section-head,.error-page .section-head{margin-bottom:14px}
.legal-wrap .eyebrow,.error-page .eyebrow{display:block;color:var(--ember);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;margin-bottom:8px}

/* grille de liens utiles (404) */
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:16px}
.related-grid a{
  display:flex;align-items:center;min-height:52px;padding:0 18px;
  border:1px solid var(--line);border-radius:14px;background:var(--stone);
  color:var(--bone);font-weight:500;text-decoration:none;
  transition:border-color .25s var(--ease-out),color .25s var(--ease-out);
}
.related-grid a:hover,.related-grid a:focus-visible{border-color:var(--ember);color:var(--ember)}

/* ---------- Badges d'adéquation (itinéraire 12j) : remap palette GB stricte ---------- */
/* Distinction par intensité ember vs neutre, sans couleurs sémantiques hors-palette */
.fit-badge{border:1px solid var(--line)!important;background:rgba(241,235,224,.04)!important;color:var(--bone-dim)!important}
.fit-badge--yes,.fit-badge--best{border-color:var(--ember)!important;color:var(--ember)!important;background:rgba(226,104,60,.10)!important}
.fit-badge--best{font-weight:600}
.fit-badge--maybe{border-color:var(--line-strong)!important;color:var(--bone)!important;background:rgba(241,235,224,.04)!important}
.fit-badge--no{border-color:var(--line)!important;color:var(--bone-dim)!important;background:transparent!important;opacity:.8}

/* ---------- Responsive ---------- */
@media (max-width:760px){
  .legal-grid{grid-template-columns:1fr}
  .legal-wrap .link-row,.error-page .link-row{flex-direction:column}
  .legal-wrap .btn,.error-page .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .legal-wrap .btn,.error-page .btn,.related-grid a,.legal-section a{transition:none}
}