/* ============================================================
   CHARTE GO PERF LUCIDE - tokens + composants partagés
   Source unique de vérité, mutualisée par les 5 pages.
   Ne JAMAIS modifier une valeur du bloc :root (charte du Portail).
   Le CSS propre à une page (layouts, .matrice/.scene/.schema,
   géométrie .card/.btn/.field tunée par écran) reste dans sa page.
   ============================================================ */
:root {
  --navy: #1B2A4A;
  --navy-deep: #111D35;
  --navy-soft: #B8C4D6;
  --or: #C9A84C;
  --or-light: #E3C777;
  --or-deep: #A88A35;
  --or-tint: #FDF6E7;
  --blanc: #FFFFFF;
  --offwhite: #F7F6F2;
  --offwhite-2: #F1EFE8;
  --gris-line: #E5E3DC;
  --gris-line-soft: #EFEDE6;
  --anthracite: #2D2D2D;
  --gris: #6B7280;
  --gris-light: #9CA3AF;
  --etat-vert: #22A06B;
  --etat-orange: #E89B3C;
  --etat-rouge: #E5403A;
  --etat-teal: #3C9EAF;
  --font-serif: Georgia, "Times New Roman", serif;
  --font-sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;
  --radius: 4px; --radius-lg: 8px;
  --shadow-sm: 0 1px 2px rgba(15,30,60,.06);
  --logo-cyan: #1090b0;
  --logo-gris: #c0c0c0;
}

* { box-sizing: border-box; }
body { margin:0; background:var(--offwhite); color:var(--anthracite);
  font-family:var(--font-sans); font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; }
h1,h2,h3 { font-family:var(--font-serif); font-weight:700; color:var(--navy); margin:0; }
p { margin:0 0 12px; }

/* En-tête — commun aux 5 pages */
.doc-header { background:var(--navy); border-bottom:3px solid var(--or); padding:0 22px; height:56px;
  display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:20; }
.logo { font-weight:700; font-size:15px; letter-spacing:2px; color:var(--logo-cyan); }
.logo span { color:var(--logo-gris); }
.doc-header .sign { font-family:var(--font-serif); font-style:italic; font-size:12px; color:var(--navy-soft); }

/* Barre de navigation — commune aux 7 pages, collée sous l'en-tête.
   Défile horizontalement sur mobile (Samsung), lien courant surligné or. */
.doc-nav { background:var(--navy-deep); position:sticky; top:56px; z-index:19;
  display:flex; gap:2px; padding:0 10px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  border-bottom:1px solid rgba(255,255,255,.08); }
.doc-nav a { flex:0 0 auto; color:var(--navy-soft); text-decoration:none;
  font-size:12px; font-weight:600; letter-spacing:.3px; padding:11px 13px; white-space:nowrap;
  border-bottom:2px solid transparent; }
.doc-nav a:hover { color:#fff; }
.doc-nav a.active { color:var(--or-light); border-bottom-color:var(--or); }

/* Libellés */
.eyebrow { font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--or-deep); }
.hint { font-family:var(--font-serif); font-style:italic; font-size:12px; color:var(--gris); margin:0 0 8px; }

/* Card — liseré haut commun (padding/marge réglés par page) */
.card-sec { border-top:1px solid var(--gris-line); }

/* Boutons — variantes de couleur (géométrie .btn réglée par page) */
.btn-primary { background:var(--navy); color:#fff; }
.btn-primary:hover { background:var(--navy-deep); }
.btn-primary:disabled { background:var(--gris-line); color:var(--gris-light); cursor:not-allowed; }
.btn-ghost { background:transparent; color:var(--gris); border-color:var(--gris-line); }
.btn-ghost:hover { color:var(--navy); border-color:var(--navy); }

/* Alertes — variantes de couleur (base .alert réglée par page) */
.alert p { margin:0; }
.alert-label { font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:4px; }
.alert-vert { background:#F0F9F4; border-color:var(--etat-vert); }
.alert-vert .alert-label { color:var(--etat-vert); }
.alert-rouge { background:#FBEEEE; border-color:var(--etat-rouge); }
.alert-rouge .alert-label { color:var(--etat-rouge); }
.alert-teal { background:#EDF7F8; border-color:var(--etat-teal); }
.alert-teal .alert-label { color:var(--etat-teal); }
.alert-amber { background:var(--or-tint); border-color:var(--etat-orange); }
.alert-amber .alert-label { color:var(--etat-orange); }

/* Accessibilité */
:focus-visible { outline:2px solid var(--or); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }