/* pages.css — pages HORS-SESSION, registre Force (N14). Charger APRÈS tokens.css.
   Contrat = `static/pages/` sous dest_path ; `static/pages/erreur.css` en est la
   copie EXACTE (test `test_pages_css_copies_are_identical`).
   Zéro hex : toute couleur vient de tokens.css. Décision Q41–Q43 (Luc 02/09).

   Position : hors la fenêtre (403/404 d'apex, 500, maintenance, hors-ligne).
   Dans la fenêtre, la 404 in-app et les erreurs de vue restent en Feuille sobre
   (`.page-erreur` de composants.css) — l'hybride se déclare, jamais une 404
   « un peu Force » dans une fenêtre. */

/* L'hôte : ni chrome, ni fenêtre. Posé sur <body>. */
.erreur-hors-session{
  margin: 0;
  background: var(--gray-canvas);
  color: var(--text-primary);
  font: 500 var(--type-body-size)/var(--type-body-leading) var(--font-sans);
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}
[data-theme="dark"] .erreur-hors-session,
html.dark .erreur-hors-session{ background: var(--surface); }

/* La page : la scène prend la hauteur, la signature reste en pied (N10b). */
.erreur-page{ min-height: 100vh; display: flex; flex-direction: column; }

/* Scène = la page à l'échelle. Dominante CONSTANTE dans les deux thèmes (Force). */
.erreur-scene{
  position: relative;
  box-sizing: border-box;
  overflow: clip;
  flex: 1;
  min-height: min(100vh, 42rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-8) var(--space-8) var(--space-12);
}
.erreur-ghost{
  position: absolute; right: -4%; top: -18%;
  font: 900 clamp(14rem, 52vw, 34rem)/.82 var(--font-sans);
  letter-spacing: -.03em; white-space: nowrap;
  pointer-events: none; user-select: none;
}
.erreur-kicker{
  position: relative; margin: 0;
  font: 400 var(--type-ref-size)/var(--type-ref-leading) var(--font-mono);
  letter-spacing: var(--type-ref-tracking); text-transform: uppercase;
}
.erreur-code{
  position: relative;
  font: 900 clamp(7rem, 26vw, 16rem)/.8 var(--font-sans);
  letter-spacing: -.03em;
  margin: var(--space-4) 0 var(--space-6) calc(var(--space-8) * -1 - var(--space-2));
}
.erreur-quoi{
  position: relative; margin: 0; max-width: 26ch;
  font: 800 var(--type-h2-size)/var(--type-h2-leading) var(--font-sans);
  letter-spacing: var(--type-h2-tracking);
}
.erreur-geste{
  position: relative; margin: var(--space-6) 0 0;
  font: 400 var(--type-cotation-size)/var(--type-cotation-leading) var(--font-mono);
  letter-spacing: var(--type-cotation-tracking); text-transform: uppercase;
}
.erreur-geste a{ color: inherit; text-underline-offset: 3px; }

/* 404 — la raison mesurée : aplat cyan, kicker « SANS BRUIT. » (Rm002Eqd). */
.erreur-scene--404{ background: var(--tension); color: var(--white); }
.erreur-scene--404 .erreur-ghost{ color: color-mix(in srgb, var(--white) 13%, transparent); }
.erreur-scene--404 .erreur-kicker,
.erreur-scene--404 .erreur-geste{ color: var(--on-tension); }
.erreur-scene--404 .erreur-geste a,
.erreur-scene--404 .erreur-geste b{ color: var(--on-tension); font-weight: 400; }

/* 403 — la porte fermée : aplat orange. La page EST un geste (orange = action, N4). */
.erreur-scene--403{ background: var(--accent); color: var(--white); }
.erreur-scene--403 .erreur-ghost{ color: color-mix(in srgb, var(--white) 13%, transparent); }
.erreur-scene--403 .erreur-kicker,
.erreur-scene--403 .erreur-geste{ color: var(--on-accent); }
.erreur-scene--403 .erreur-geste a,
.erreur-scene--403 .erreur-geste b{ color: var(--on-accent); font-weight: 400; }

/* 500 — l'écart consigné : encre. Le rouge dit l'écart, jamais l'aplat (N4). */
.erreur-scene--500{ background: var(--gray-925); color: var(--white); }
.erreur-scene--500 .erreur-ghost{ color: color-mix(in srgb, var(--white) 7%, transparent); }
.erreur-scene--500 .erreur-kicker{ color: var(--status-critical-dark); }
.erreur-scene--500 .erreur-geste{ color: color-mix(in srgb, var(--white) 55%, transparent); }
.erreur-scene--500 .erreur-geste a,
.erreur-scene--500 .erreur-geste b{ color: var(--white); font-weight: 400; }

/* Maintenance — suit le thème : rien n'est cassé, on attend. */
.erreur-scene--maintenance{ background: var(--gray-canvas); color: var(--text-primary); }
[data-theme="dark"] .erreur-scene--maintenance,
html.dark .erreur-scene--maintenance{ background: var(--surface); }
.erreur-scene--maintenance .erreur-ghost{ color: color-mix(in srgb, var(--text-primary) 6%, transparent); }
.erreur-scene--maintenance .erreur-kicker,
.erreur-scene--maintenance .erreur-geste{ color: var(--text-secondary); }
.erreur-scene--maintenance .erreur-code{ color: var(--accent); }
.erreur-scene--maintenance .erreur-geste a,
.erreur-scene--maintenance .erreur-geste b{ color: var(--text-primary); font-weight: 400; }

/* Hors-ligne (PWA) — suit le thème : le réseau est parti côté client. Le chiffre
   monumental est l'heure des données (sa source : le cache du service worker). */
.erreur-scene--hors-ligne{ background: var(--gray-canvas); color: var(--text-primary); }
[data-theme="dark"] .erreur-scene--hors-ligne,
html.dark .erreur-scene--hors-ligne{ background: var(--surface); }
.erreur-scene--hors-ligne .erreur-ghost{ color: color-mix(in srgb, var(--text-primary) 6%, transparent); }
.erreur-scene--hors-ligne .erreur-kicker,
.erreur-scene--hors-ligne .erreur-geste{ color: var(--text-secondary); }
.erreur-scene--hors-ligne .erreur-code{ color: var(--text-primary); }
.erreur-scene--hors-ligne .erreur-geste a,
.erreur-scene--hors-ligne .erreur-geste b{ color: var(--text-primary); font-weight: 400; }

/* Pied : la mention à gauche, la signature undust. à droite (N10b). Sur le canvas,
   jamais sur l'aplat — la dominante appartient à la scène. */
.erreur-pied{
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  font: 400 var(--type-ref-size)/1 var(--font-mono);
  letter-spacing: var(--type-ref-tracking); text-transform: uppercase;
  color: var(--text-secondary);
}
.erreur-sig{
  font: 800 var(--type-body-size)/1 var(--font-sans);
  letter-spacing: -.02em; text-transform: none;
  color: var(--text-primary); text-decoration: none;
}
.erreur-sig i{
  display: inline-block; width: .42em; height: .42em;
  background: var(--accent); margin-left: .08em; vertical-align: .02em;
}

/* N9 — 375 px est une cible, pas un afterthought. */
@media (max-width: 640px){
  .erreur-scene{ padding: var(--space-6) var(--space-4) var(--space-8); }
  .erreur-code{ margin-left: calc(var(--space-4) * -1 - var(--space-1)); }
}