/* ============================================================
   style.css — Styles mutualisés MC Laurocheque
   Chargé par : index.html, admin.html, hub.html, swagger.html,
                403.html, 404.html
   ------------------------------------------------------------
   ARCHITECTURE CSS DU PROJET (mise à jour) :
   Chaque page HTML a désormais son propre fichier CSS dédié,
   externalisé depuis son ancien <style> inline :
     - index.html   → index.css   (design rouge/or du site public)
     - admin.html   → admin.css   (thème ardoise back-office)
     - hub.html     → hub.css
     - swagger.html → swagger.css (surcouche dark de Swagger UI)
   403.html et 404.html n'ont pas de fichier dédié : ils sont assez
   simples pour tenir entièrement dans les classes .error-page
   ci-dessous.
   ------------------------------------------------------------
   ORDRE DE CHARGEMENT IMPORTANT : ce fichier (style.css) doit être
   lié en PREMIER, AVANT le fichier CSS dédié de la page (index.css,
   admin.css, hub.css ou swagger.css). Ainsi, quand une page redéfinit
   un sélecteur présent ici (ex. son propre .btn), sa règle — plus
   tardive dans la cascade — reste prioritaire à spécificité égale.
   Aucune page ne doit donc changer d'apparence suite à un chargement
   de ce fichier ou à la réorganisation ci-dessus.
   ------------------------------------------------------------
   Ce qui est mutualisé ici (et seulement ici) :
   1) Reset de base et accessibilité — universels, sans risque
      visuel, appliqués à toutes les pages.
   2) Composants des pages d'erreur (403/404), qui partageaient
      ~95% de CSS identique — scopés sous .error-page pour ne
      jamais déborder sur les autres pages (qui ont leurs propres
      .btn/.wrap/h1/p, volontairement différents).
   Les design systems propres à chaque page restent dans leur
   fichier CSS dédié listé ci-dessus : ils sont trop divergents
   pour être fusionnés dans un seul fichier commun sans risquer des
   collisions de classes (ex. .card, .btn, .wrap ont un sens et un
   style différents sur chaque page).
   ============================================================ */

/* ── 1) Reset de base (universel, sans risque visuel) ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Rouge de marque — valeur strictement identique sur les 6 pages */
:root { --red: #c41e3a; }

/* ── Accessibilité (universelle) ──
   Chaque page peut définir des règles plus spécifiques qui
   prennent le dessus (ex. .card:focus-visible dans hub.html,
   .reel-card:focus-visible dans index.html). */
:focus-visible { outline: 2px solid var(--gold, #c9a84c); outline-offset: 2px; }

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

/* ============================================================
   2) Composants des pages d'erreur (403.html / 404.html)
   Scopés sous .error-page (classe posée sur <body>) pour ne
   jamais affecter index.html / admin.html / hub.html / swagger.html.
   ============================================================ */
.error-page {
  --gold: #c9a84c;
  --bg: #080808;
  --surface: #121212;
  --surface-2: #1a1a1a;
  --border: rgba(255,255,255,0.08);
  --text: #f2f2f2;
  --text-muted: #8a8a8a;
  --transition: 0.25s cubic-bezier(0.4,0,0.2,1);

  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  line-height: 1.6;
}
[data-theme="light"] .error-page {
  --bg: #faf9f7;
  --surface: #ffffff;
  --surface-2: #f2f0ed;
  --border: rgba(0,0,0,0.09);
  --text: #1a1a1a;
  --text-muted: #5c5c5c;
  --gold: #9c7a2e;
}

.error-page .wrap { max-width: 480px; }
.error-page .brand { width:56px; height:56px; background:var(--red); border-radius:14px; display:flex; align-items:center; justify-content:center; margin:0 auto 2rem; }
.error-page .brand span { font-size:.85rem; font-weight:700; color:#fff; letter-spacing:.05em; }
.error-page .icon-lock { width:64px; height:64px; margin:0 auto 1.5rem; color:var(--red); }
.error-page .code { font-family:'Cormorant Garamond', serif; font-weight:300; font-size:clamp(4.5rem, 16vw, 7rem); line-height:1; color:var(--text); letter-spacing:.02em; }
.error-page .code strong { color:var(--red); font-weight:600; }
.error-page h1 { font-family:'Cormorant Garamond', serif; font-weight:400; font-size:1.6rem; margin:1rem 0 .75rem; }
.error-page p { color:var(--text-muted); font-size:.95rem; margin-bottom:2rem; }
.error-page .actions { display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; }
.error-page .btn { display:inline-flex; align-items:center; gap:.5rem; padding:.85rem 1.6rem; border-radius:10px; font-size:.88rem; font-weight:500; text-decoration:none; transition:all var(--transition); border:1px solid transparent; }
.error-page .btn-primary { background:var(--red); color:#fff; }
.error-page .btn-primary:hover { filter:brightness(1.1); transform:translateY(-1px); }
.error-page .btn-ghost { background:none; border-color:var(--border); color:var(--text); }
.error-page .btn-ghost:hover { background:var(--surface-2); }
.error-page .note { margin-top:2.5rem; font-size:.8rem; color:var(--text-muted); }
.error-page .note a { color:var(--red); text-decoration:underline; text-underline-offset:3px; }