/* ==========================================================================
   SITE-73 · INTRANET DE LA FONDATION
   Feuille de style commune à toutes les pages.
   Thème unique, sombre par choix : l'intranet d'une installation souterraine.
   ========================================================================== */

/* ---------- 1. Jetons ---------------------------------------------------- */
:root {
  color-scheme: dark;

  /* Acier (neutres teintés bleu-vert) */
  --bg: #0C1215;
  --bg-2: #0F171B;
  --surface: #131C21;
  --surface-2: #182329;
  --surface-3: #1F2C33;
  --line: #243239;
  --line-2: #34464E;
  --text: #DCE4E2;
  --text-2: #A5B5B3;
  --text-3: #7A8E8C;

  /* Jaune signalisation : toutes les actions */
  --signal: #F2C230;
  --signal-2: #FFD65C;
  --signal-ink: #1A1405;

  /* Papier des dossiers */
  --paper: #E8E2D3;
  --paper-2: #DAD2BF;
  --paper-ink: #1E1C17;
  --paper-mute: #676050;
  --paper-line: #BDB39D;
  --stamp: #B42318;

  /* Classes d'objet */
  --c-sur: #4FC49B;
  --c-euclide: #F59331;
  --c-keter: #EF4747;
  --c-thaumiel: #A08CFF;
  --c-neutralise: #8C999C;
  --c-attente: #6FA8DC;

  /* Niveaux d'alerte */
  --a-vert: #3FCF8E;
  --a-jaune: #F2C230;
  --a-orange: #F7862F;
  --a-rouge: #FF4545;
  --a-noir: #E4E0FF;
  --alert: var(--a-vert);

  /* Dangers (plan) */
  --d1: #3FCF8E;
  --d2: #F2C230;
  --d3: #F7862F;
  --d4: #FF4545;

  /* Caviardage sur fond sombre */
  --rd-a: #2E3E45;
  --rd-b: #1B272C;

  /* Typographie */
  --font-display: "Big Shoulders Stencil Display", "Arial Narrow", Impact, sans-serif;
  --font-head: "IBM Plex Sans Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-doc: "Courier Prime", "Courier New", Courier, monospace;

  --fs-xs: 0.72rem;
  --fs-sm: 0.86rem;
  --fs-md: 1rem;
  --fs-lg: 1.18rem;
  --fs-xl: 1.5rem;
  --fs-2xl: clamp(1.7rem, 3.2vw, 2.3rem);

  --gutter: clamp(16px, 4vw, 40px);
  --max: 1240px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

html[data-alert="jaune"]  { --alert: var(--a-jaune); }
html[data-alert="orange"] { --alert: var(--a-orange); }
html[data-alert="rouge"]  { --alert: var(--a-rouge); }
html[data-alert="noir"]   { --alert: var(--a-noir); }

/* ---------- 2. Base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
::selection { background: var(--signal); color: var(--signal-ink); }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
dl, dd { margin: 0; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 16px; top: -60px; z-index: 200;
  background: var(--signal); color: var(--signal-ink); padding: 10px 14px;
  font-family: var(--font-mono); font-size: var(--fs-sm); text-decoration: none;
}
.skip-link:focus { top: 16px; }

/* ---------- 3. Atmosphère ----------------------------------------------- */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, rgb(120 160 160 / .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(120 160 160 / .045) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 20%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 20%, #000 20%, transparent 75%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette {
  position: fixed; inset: 0; z-index: 80; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at center, transparent 45%, color-mix(in srgb, var(--alert) 38%, transparent) 100%);
  transition: opacity .6s var(--ease);
}
html[data-alert="orange"] .vignette { opacity: .35; }
html[data-alert="rouge"] .vignette { opacity: 1; animation: pulse-vignette 1.6s ease-in-out infinite; }
html[data-alert="noir"] .vignette { opacity: .8; animation: flicker 3.2s steps(1) infinite; }
@keyframes pulse-vignette { 0%, 100% { opacity: .35; } 50% { opacity: .95; } }
@keyframes flicker { 0%, 100% { opacity: .75; } 7% { opacity: .2; } 9% { opacity: .9; } 55% { opacity: .6; } 57% { opacity: .15; } 59% { opacity: .8; } }

/* ---------- 4. Typo utilitaire ------------------------------------------ */
.eyebrow, .label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.eyebrow { display: inline-flex; align-items: center; gap: .6em; color: var(--text-2); }
.eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--signal); }
.h2 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-2xl);
  line-height: 1.1;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.h3 { font-family: var(--font-head); font-weight: 600; font-size: var(--fs-lg); line-height: 1.25; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--text-2); }
.prose { max-width: 65ch; color: var(--text-2); }
.prose p + p { margin-top: .9em; }

/* ---------- 5. Mise en page -------------------------------------------- */
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.sec { padding-block: clamp(48px, 7vw, 88px); }
.sec--tight { padding-block: clamp(24px, 4vw, 40px); }
.sec--line { border-top: 1px solid var(--line); }
.sec__head { display: grid; gap: 12px; margin-bottom: clamp(24px, 4vw, 40px); max-width: 760px; }
.sec__lede { color: var(--text-2); max-width: 62ch; }
.sec__row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; margin-bottom: clamp(24px, 4vw, 40px); }
.sec__row .sec__head { margin-bottom: 0; }

/* ---------- 6. Boutons, puces, champs ---------------------------------- */
.btn {
  --b: var(--line-2);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 44px; padding: 10px 18px;
  font-family: var(--font-head); font-weight: 600; font-size: .95rem;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  color: var(--text); background: transparent;
  border: 1px solid var(--b); border-radius: 0;
  transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease);
}
.btn::before, .btn::after {
  content: ""; position: absolute; width: 7px; height: 7px; pointer-events: none;
  border: 2px solid var(--signal); transition: transform .2s var(--ease);
}
.btn::before { top: -4px; left: -4px; border-right: 0; border-bottom: 0; }
.btn::after { bottom: -4px; right: -4px; border-left: 0; border-top: 0; }
.btn:hover { border-color: var(--text-3); background: var(--surface-2); }
.btn:hover::before { transform: translate(-2px, -2px); }
.btn:hover::after { transform: translate(2px, 2px); }
.btn:active { transform: translateY(1px); }
.btn--signal { background: var(--signal); color: var(--signal-ink); border-color: var(--signal); }
.btn--signal::before, .btn--signal::after { border-color: var(--signal-2); }
.btn--signal:hover { background: var(--signal-2); border-color: var(--signal-2); color: var(--signal-ink); }
.btn--danger { --b: color-mix(in srgb, var(--a-rouge) 60%, transparent); color: #FFD8D8; }
.btn--danger::before, .btn--danger::after { border-color: var(--a-rouge); }
.btn--danger:hover { background: color-mix(in srgb, var(--a-rouge) 16%, transparent); border-color: var(--a-rouge); }
.btn--sm { min-height: 36px; padding: 6px 12px; font-size: .82rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }

.chip {
  --c: var(--text-3);
  display: inline-flex; align-items: center; gap: .45em;
  padding: 3px 8px;
  font-family: var(--font-mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  color: color-mix(in srgb, var(--c) 85%, white);
  background: color-mix(in srgb, var(--c) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
}
.chip::before { content: ""; width: 6px; height: 6px; background: var(--c); flex: none; }
.chip--plain::before { display: none; }

.field { display: grid; gap: 6px; }
.field > span, .field > label { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.input, .select, .textarea {
  width: 100%; min-height: 44px; padding: 10px 12px;
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--line-2); border-radius: 0;
  transition: border-color .2s, background .2s;
}
.textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--text-3); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--signal); background: var(--surface); }
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.select { appearance: none; -webkit-appearance: none; padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px; background-repeat: no-repeat;
}

.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button {
  --c: var(--text-3);
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 4px 10px;
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-2); background: var(--bg-2); border: 1px solid var(--line-2);
  transition: border-color .2s, color .2s, background .2s;
}
.seg button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.seg button:hover { border-color: var(--c); color: var(--text); }
.seg button[aria-pressed="true"], .seg button[aria-checked="true"] {
  color: var(--text); border-color: var(--c); background: color-mix(in srgb, var(--c) 16%, var(--bg-2));
}

/* ---------- 7. En-tête ------------------------------------------------- */
.sysbar {
  background: #080D0F; border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3);
}
.sysbar__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 28px; }
.sysbar__group { display: flex; gap: 20px; align-items: center; min-width: 0; }
.sysbar b { color: var(--text-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--a-vert); margin-left: 6px; vertical-align: 1px; box-shadow: 0 0 8px var(--a-vert); animation: blink 2.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }

.bar-sticky { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 60; }
.bar {
  /* Au-dessus de la barre de navigation mobile : ses menus (Hab., Plus) passent devant */
  position: relative; z-index: 1;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border-bottom: 1px solid var(--line);
}
.bar__in { display: flex; align-items: center; gap: 20px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.brand svg { width: 38px; height: 38px; color: var(--text); transition: transform .8s var(--ease); }
.brand:hover svg { transform: rotate(120deg); }
.brand__txt { display: grid; line-height: 1; gap: 4px; }
.brand__name { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; letter-spacing: .02em; }
.brand__name i { font-style: normal; color: var(--alert); transition: color .4s; }
.brand__sub { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }

.nav { display: flex; align-items: center; gap: 2px; margin-inline: auto; }
.nav__link {
  position: relative; padding: 8px 11px;
  font-family: var(--font-head); font-weight: 500; font-size: .86rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-2); text-decoration: none; transition: color .2s;
}
.nav__link::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: 2px; height: 2px;
  background: var(--signal); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.nav__link:hover { color: var(--text); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--text); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.bar__tools { display: flex; align-items: center; gap: 8px; flex: none; }
.alert-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 10px;
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text); text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--alert) 50%, transparent);
  background: color-mix(in srgb, var(--alert) 12%, transparent);
  transition: border-color .4s, background .4s;
}
.alert-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--alert); box-shadow: 0 0 10px var(--alert); animation: blink 1.8s ease-in-out infinite; }
html[data-alert="rouge"] .alert-chip i { animation-duration: .5s; }

.icon-btn {
  display: inline-grid; place-items: center; width: 40px; height: 36px;
  font-family: var(--font-mono); font-size: .8rem; font-weight: 600;
  color: var(--text-2); background: transparent; border: 1px solid var(--line-2); text-decoration: none;
  transition: color .2s, border-color .2s, background .2s;
}
.icon-btn:hover { color: var(--text); border-color: var(--text-3); background: var(--surface-2); }
.icon-btn svg { width: 18px; height: 18px; }
.menu-btn { display: none; }

.clr { position: relative; }
.clr__btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 10px;
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-2); background: var(--bg-2); border: 1px solid var(--line-2);
}
.clr__btn b { font-size: .95rem; color: var(--signal); font-weight: 600; }
.clr__btn:hover { border-color: var(--text-3); color: var(--text); }
.clr__pop {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 70; width: min(320px, calc(100vw - 32px));
  background: var(--surface); border: 1px solid var(--line-2);
  box-shadow: 0 24px 60px rgb(0 0 0 / .55);
  padding: 14px;
}
.clr__pop p { font-size: var(--fs-sm); color: var(--text-2); margin-bottom: 10px; line-height: 1.45; }
.clr__list { display: grid; gap: 4px; list-style: none; }
.clr__opt {
  width: 100%; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px;
  padding: 8px 10px; text-align: left; background: transparent; border: 1px solid transparent;
  transition: background .15s, border-color .15s;
}
.clr__opt:hover { background: var(--surface-2); border-color: var(--line-2); }
.clr__opt b { font-family: var(--font-display); font-size: 1.4rem; line-height: 1; color: var(--text-2); }
.clr__opt span { font-family: var(--font-head); font-weight: 500; letter-spacing: .04em; }
.clr__opt small { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.clr__opt[aria-checked="true"] { border-color: var(--signal); background: color-mix(in srgb, var(--signal) 10%, transparent); }
.clr__opt[aria-checked="true"] b { color: var(--signal); }

.hazard {
  height: 5px;
  background: repeating-linear-gradient(-45deg, var(--alert) 0 10px, #0A0F11 10px 20px);
  background-size: 28.28px 28.28px;
  opacity: .9; transition: background-color .4s;
}
html[data-alert="rouge"] .hazard, html[data-alert="noir"] .hazard { height: 7px; animation: hazard-move .6s linear infinite; }
@keyframes hazard-move { to { background-position: 28.28px 0; } }

.drawer {
  position: fixed; inset: 0; z-index: 100; display: grid; grid-template-rows: auto 1fr;
  background: var(--bg);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.drawer__head { display: flex; align-items: center; justify-content: space-between; min-height: 64px; border-bottom: 1px solid var(--line); }
.drawer__nav { display: grid; align-content: start; overflow-y: auto; }
.drawer__nav a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 12px var(--gutter); border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; letter-spacing: .02em; text-transform: uppercase; text-decoration: none;
}
.drawer__nav a small { font-family: var(--font-mono); font-weight: 400; font-size: .7rem; letter-spacing: .14em; color: var(--text-3); }
.drawer__nav a[aria-current="page"] { color: var(--signal); }

/* ---------- 8. Pied de page ------------------------------------------- */
.ftr { position: relative; margin-top: clamp(40px, 6vw, 72px); border-top: 1px solid var(--line); background: var(--bg-2); overflow: hidden; }
.ftr__mark { position: absolute; right: -80px; bottom: -120px; width: 420px; height: 420px; color: var(--surface-2); pointer-events: none; }
.ftr__in { position: relative; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; padding-block: 56px 32px; }
.ftr__brand p { color: var(--text-2); font-size: var(--fs-sm); max-width: 44ch; margin-top: 14px; }
.ftr h2 { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 14px; }
.ftr__links { display: grid; gap: 8px; list-style: none; }
.ftr__links a { color: var(--text-2); text-decoration: none; font-size: var(--fs-sm); }
.ftr__links a:hover { color: var(--signal); }
.ftr__legal { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-block: 20px; border-top: 1px solid var(--line); font-size: .76rem; color: var(--text-3); }
.ftr__legal a { color: var(--text-2); }
.ftr__motto { font-family: var(--font-mono); letter-spacing: .2em; text-transform: uppercase; }

/* ---------- 9. En-tête de page (signalétique) ------------------------ */
.sign { position: relative; border-bottom: 1px solid var(--line); overflow: hidden; }
.sign__in { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 32px; padding-block: clamp(40px, 7vw, 80px) clamp(28px, 4vw, 44px); }
.sign__main { display: grid; gap: 14px; min-width: 0; }
.sign__title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(3rem, 10vw, 7.5rem); line-height: .82; letter-spacing: .01em; text-transform: uppercase; overflow-wrap: anywhere;
  background: linear-gradient(180deg, var(--text) 30%, #93A3A2 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sign__lede { color: var(--text-2); max-width: 60ch; font-size: var(--fs-lg); }
.sign__code {
  position: absolute; right: calc(var(--gutter) - 12px); top: 50%; transform: translateY(-58%);
  font-family: var(--font-display); font-weight: 900; font-size: clamp(8rem, 24vw, 20rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--line-2); pointer-events: none; user-select: none;
  z-index: 0;
}
.sign__meta {
  position: relative; z-index: 1; display: grid; gap: 0; min-width: 220px;
  border: 1px solid var(--line-2); background: color-mix(in srgb, var(--bg) 80%, transparent);
  font-family: var(--font-mono); font-size: .74rem;
}
.sign__meta div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.sign__meta div:last-child { border-bottom: 0; }
.sign__meta dt { color: var(--text-3); letter-spacing: .1em; text-transform: uppercase; }
.sign__meta dd { color: var(--text); text-align: right; }

/* ---------- 10. Caviardage ------------------------------------------- */
.rd {
  color: transparent; cursor: help;
  background: repeating-linear-gradient(-45deg, var(--rd-a) 0 3px, var(--rd-b) 3px 6px);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 0 2px; border-radius: 1px; user-select: none;
  transition: filter .2s;
}
.rd:hover, .rd:focus-visible { filter: brightness(1.5); }
.rd.is-denied { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.rv {
  --c: var(--signal);
  background: linear-gradient(transparent 62%, color-mix(in srgb, var(--c) 28%, transparent) 62%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.rv::after {
  content: "N" attr(data-lvl);
  font-family: var(--font-mono); font-size: .58em; font-weight: 600; letter-spacing: .06em;
  vertical-align: super; margin-left: 2px; color: var(--text-3);
}
.rv.is-new { animation: declass 1.2s var(--ease); }
@keyframes declass { from { background-color: color-mix(in srgb, var(--signal) 45%, transparent); } to { background-color: transparent; } }
.sup { font-family: var(--font-mono); font-weight: 600; font-size: .9em; letter-spacing: .04em; color: var(--text); background: #000; padding: 0 4px; }

/* ---------- 11. Notification ---------------------------------------- */
.toast-zone { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 150; display: grid; gap: 8px; width: min(440px, calc(100vw - 32px)); pointer-events: none; }
.toast {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--line-2); border-left: 3px solid var(--signal);
  box-shadow: 0 16px 40px rgb(0 0 0 / .5);
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .02em; color: var(--text);
  animation: toast-in .35s var(--ease);
}
.toast--warn { border-left-color: var(--a-rouge); }
.toast b { color: var(--signal); font-weight: 600; }
.toast.is-out { animation: toast-out .3s var(--ease) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(10px); } }

/* ---------- 12. Dossier (fenêtre papier) ---------------------------- */
.modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px)); }
.modal__backdrop { position: absolute; inset: 0; background: rgb(3 6 8 / .78); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fade .25s; }
.modal__frame { position: relative; width: min(820px, 100%); max-height: 100%; display: grid; grid-template-rows: auto 1fr; animation: doc-in .45s var(--ease); }
@keyframes fade { from { opacity: 0; } }
@keyframes doc-in { from { opacity: 0; transform: translateY(24px) rotate(-.6deg); } }
.modal__nav { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-bottom: 10px; }
.modal__nav .grp { display: flex; gap: 8px; }
.modal__nav .icon-btn { background: var(--surface); }
.modal__scroll { overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 30px 80px rgb(0 0 0 / .6); }

.paper {
  position: relative; color: var(--paper-ink); background-color: var(--paper);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgb(255 255 255 / .25), transparent 30%, rgb(120 100 60 / .08));
}
.paper .rd { background: var(--paper-ink); }
.paper .rv { --c: #C99400; }
.paper .rv::after { color: var(--paper-mute); }
.paper .sup { background: var(--paper-ink); color: var(--paper); }
.doc { padding: clamp(22px, 5vw, 48px); font-family: var(--font-doc); font-size: 1.02rem; line-height: 1.62; }
.doc__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 16px; border-bottom: 2px solid var(--paper-ink); }
.doc__org { display: flex; gap: 12px; align-items: center; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .86rem; line-height: 1.35; }
.doc__org svg { width: 46px; height: 46px; flex: none; color: var(--paper-ink); }
.doc__org small { display: block; font-weight: 400; letter-spacing: .04em; color: var(--paper-mute); text-transform: none; font-size: .82rem; }
.doc__stamp {
  flex: none; padding: 6px 12px; border: 3px solid var(--stamp); color: var(--stamp);
  font-family: var(--font-head); font-weight: 700; font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; text-align: center; line-height: 1.15;
  transform: rotate(6deg); opacity: .85; mix-blend-mode: multiply;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='s'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='s'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
}
.doc__title { margin-top: 26px; font-family: var(--font-display); font-weight: 900; font-size: clamp(2.6rem, 8vw, 4.2rem); line-height: .9; letter-spacing: .01em; }
.doc__title small { display: block; font-family: var(--font-doc); font-weight: 700; font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; color: var(--paper-mute); margin-bottom: 8px; }
.doc__name { font-size: 1.2rem; font-style: italic; margin-top: 6px; }
.doc__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-top: 22px; border-top: 1px solid var(--paper-line); border-left: 1px solid var(--paper-line); }
.doc__fields div { padding: 8px 12px; border-right: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line); }
.doc__fields dt { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--paper-mute); }
.doc__fields dd { font-weight: 700; }
.doc__class { display: inline-flex; align-items: center; gap: 8px; }
.doc__class::before { content: ""; width: 12px; height: 12px; background: var(--c); border: 1px solid var(--paper-ink); }
.doc section { margin-top: 26px; }
.doc h3 { font-family: var(--font-doc); font-weight: 700; font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px dashed var(--paper-line); }
.doc__foot { display: flex; flex-wrap: wrap; gap: 12px 20px; justify-content: space-between; align-items: center; margin-top: 30px; padding-top: 14px; border-top: 2px solid var(--paper-ink); font-size: .84rem; color: var(--paper-mute); }
.doc__foot button { font-family: var(--font-doc); font-weight: 700; font-size: .84rem; padding: 6px 12px; background: transparent; border: 1px solid var(--paper-ink); color: var(--paper-ink); }
.doc__foot button:hover { background: var(--paper-ink); color: var(--paper); }
.doc__menace { letter-spacing: .1em; }

/* ---------- 13. Démarrage ------------------------------------------ */
.boot {
  position: fixed; inset: 0; z-index: 180; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(ellipse at center, #0F191C, #05090A 75%);
  font-family: var(--font-mono); color: var(--text-2);
}
.boot__box { width: min(620px, 100%); display: grid; gap: 18px; }
.boot__logo { display: flex; align-items: center; gap: 16px; }
.boot__logo svg { width: 56px; height: 56px; color: var(--text); animation: spin-in 1.6s var(--ease); }
@keyframes spin-in { from { transform: rotate(-240deg) scale(.6); opacity: 0; } }
.boot__logo b { font-family: var(--font-display); font-size: 2.4rem; font-weight: 900; color: var(--text); letter-spacing: .02em; line-height: 1; }
.boot__logo small { display: block; font-size: .7rem; letter-spacing: .16em; color: var(--text-3); }
.boot__log { min-height: 11.5em; font-size: .82rem; line-height: 1.75; white-space: pre-wrap; }
.boot__log .ok { color: var(--a-vert); }
.boot__log .hl { color: var(--signal); }
.boot__bar { height: 4px; background: var(--line); overflow: hidden; }
.boot__bar i { display: block; height: 100%; width: 0; background: var(--signal); transition: width .2s linear; }
.boot__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.boot__skip { background: none; border: 1px solid var(--line-2); color: var(--text-2); padding: 6px 12px; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
.boot__skip:hover { color: var(--text); border-color: var(--text-3); }
.boot.is-done { animation: boot-out .5s var(--ease) forwards; }
.boot__granted { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 7vw, 3.2rem); letter-spacing: .04em; color: var(--a-vert); line-height: 1; }
@keyframes boot-out { to { opacity: 0; visibility: hidden; } }

/* ---------- 14. Portes blindées (transition entre pages) ---------- */
.doors { position: fixed; inset: 0; z-index: 170; pointer-events: none; display: grid; grid-template-columns: 1fr 1fr; }
.doors__l, .doors__r {
  position: relative; background: linear-gradient(90deg, #11191D, #172227 60%, #11191D);
  transition: transform .42s cubic-bezier(.7, 0, .3, 1);
}
.doors__l { transform: translateX(-101%); border-right: 1px solid var(--line-2); }
.doors__r { transform: translateX(101%); border-left: 1px solid var(--line-2); }
.doors__l::after, .doors__r::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 22px;
  background: repeating-linear-gradient(-45deg, var(--signal) 0 12px, #0A0F11 12px 24px);
}
.doors__l::after { right: 0; }
.doors__r::after { left: 0; }
.doors__r::before {
  content: "SITE-73"; position: absolute; left: 40px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-display); font-weight: 900; font-size: clamp(2.6rem, 9vw, 6rem); color: var(--surface-3);
}
.doors.is-closed .doors__l, .doors.is-closed .doors__r { transform: none; }
.doors.is-closed { pointer-events: all; }

/* ---------- 15. Accueil -------------------------------------------- */
.ticker { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); background: var(--bg-2); overflow: hidden; }
.ticker__label {
  flex: none; display: flex; align-items: center; gap: 8px; padding: 0 14px 0 var(--gutter);
  font-family: var(--font-mono); font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--signal-ink); background: var(--signal);
}
.ticker__view { flex: 1; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.ticker__track { display: flex; width: max-content; animation: ticker 60s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__track span { padding: 9px 28px; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .04em; color: var(--text-2); white-space: nowrap; }
.ticker__track span::after { content: "◆"; margin-left: 28px; color: var(--line-2); }
@keyframes ticker { to { transform: translateX(-50%); } }

.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero__in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding-block: clamp(40px, 7vw, 88px) clamp(40px, 6vw, 72px); }
.hero__copy { display: grid; gap: 22px; min-width: 0; }
.hero__title {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(5.2rem, 17vw, 12.5rem); line-height: .78; letter-spacing: .005em;
  background: linear-gradient(180deg, #F1F5F4 25%, #8FA09F 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-left: -.04em;
}
.hero__title i { font-style: normal; background: var(--alert); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__motto { display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: var(--font-mono); font-size: .8rem; letter-spacing: .26em; text-transform: uppercase; color: var(--text-2); }
.hero__motto span + span::before { content: "/"; margin-right: 14px; color: var(--signal); }
.hero__lede { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--text-2); max-width: 54ch; }
.hero__lede strong { color: var(--text); font-weight: 500; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__facts { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 0; margin-top: 6px; border-top: 1px solid var(--line); }
.hero__facts div { padding: 12px 22px 0 0; margin-right: 22px; border-right: 1px solid var(--line); }
.hero__facts div:last-child { border-right: 0; margin-right: 0; }
.hero__facts dt { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.hero__facts dd { font-family: var(--font-head); font-weight: 600; font-size: 1.25rem; font-variant-numeric: tabular-nums; }

.dial { position: relative; width: min(100%, 460px); aspect-ratio: 1; margin-inline: auto; max-width: 100%; }
.dial__sweep {
  position: absolute; inset: 9%; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 290deg, color-mix(in srgb, var(--alert) 35%, transparent) 355deg, transparent 360deg);
  animation: spin 6s linear infinite; transition: background .4s;
}
html[data-alert="rouge"] .dial__sweep { animation-duration: 1.6s; }
.dial__glow { position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--alert) 22%, transparent), transparent 70%); filter: blur(20px); }
.dial > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dial__ring { transform-origin: 200px 200px; animation: spin 90s linear infinite reverse; }
.dial__ticks { transform-origin: 200px 200px; animation: spin 240s linear infinite; }
.dial__text { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 5.2px; fill: var(--text-2); text-transform: uppercase; }
.dial__emblem { color: var(--text); }
.dial__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px; fill: var(--text-3); }
@keyframes spin { to { transform: rotate(360deg); } }

.status { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; border: 1px solid var(--line-2); background: var(--surface); }
.status__cell { display: grid; align-content: start; gap: 10px; padding: 22px; border-right: 1px solid var(--line); min-width: 0; }
.status__cell:last-child { border-right: 0; }
.status__big { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: .95; text-transform: uppercase; letter-spacing: .01em; }
.status__big.mono { font-family: var(--font-mono); font-weight: 500; font-size: clamp(1.3rem, 2.2vw, 1.75rem); letter-spacing: 0; line-height: 1.1; }
.status__alert .status__big { color: var(--alert); transition: color .4s; }
.status__txt { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.45; }
.stack { display: flex; height: 8px; gap: 2px; }
.stack i { display: block; height: 100%; background: var(--c); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 12px; list-style: none; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend li::before { content: ""; width: 8px; height: 8px; background: var(--c); }

.split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); align-items: stretch; }
.memo { padding: clamp(24px, 4vw, 44px); font-family: var(--font-doc); font-size: 1.02rem; line-height: 1.65; transform: rotate(-.4deg); box-shadow: 0 24px 50px rgb(0 0 0 / .45); }
.memo__head { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 2px solid var(--paper-ink); font-size: .9rem; }
.memo__head dt { font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.memo__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 4vw, 2.8rem); line-height: .95; margin-bottom: 14px; }
.memo p + p { margin-top: .8em; }
.memo__sign { margin-top: 22px; display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; }
.memo__sign .doc__stamp { transform: rotate(-5deg); }

.daily { position: relative; display: grid; align-content: space-between; gap: 22px; padding: clamp(22px, 3vw, 32px); border: 1px solid var(--line-2); background: var(--surface); overflow: hidden; }
.daily::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--c, var(--line-2)); }
.daily__num { font-family: var(--font-display); font-weight: 900; font-size: clamp(5rem, 11vw, 8rem); line-height: .8; color: var(--text); letter-spacing: -.01em; }
.daily__num small { display: block; font-family: var(--font-mono); font-weight: 500; font-size: .8rem; letter-spacing: .14em; color: var(--text-3); margin-bottom: 12px; }
.daily__name { font-family: var(--font-head); font-size: 1.5rem; font-weight: 600; }
.daily__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.daily p { color: var(--text-2); }

.sectors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); }
.sector {
  position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; min-height: 230px; padding: 24px;
  background: var(--surface); text-decoration: none; overflow: hidden;
  transition: background .25s;
}
.sector::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  background: repeating-linear-gradient(-45deg, var(--signal) 0 8px, transparent 8px 16px);
  transform: translateY(100%); transition: transform .3s var(--ease);
}
.sector:hover { background: var(--surface-2); }
.sector:hover::after { transform: none; }
.sector__code { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--signal); }
.sector__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.2rem, 3.6vw, 2.9rem); line-height: .9; text-transform: uppercase; }
.sector__txt { color: var(--text-2); font-size: var(--fs-sm); }
.sector__go { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); transition: color .2s; }
.sector__go svg { width: 22px; height: 22px; transition: transform .3s var(--ease); }
.sector:hover .sector__go { color: var(--text); }
.sector:hover .sector__go svg { transform: translateX(4px); }

.comms { display: grid; list-style: none; border-top: 1px solid var(--line-2); }
.comm { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.comm time { font-family: var(--font-mono); font-size: .8rem; color: var(--text-3); letter-spacing: .06em; padding-top: 3px; }
.comm h3 { font-family: var(--font-head); font-weight: 600; font-size: 1.2rem; margin-bottom: 6px; }
.comm p { color: var(--text-2); max-width: 70ch; }

/* ---------- 16. Dossiers -------------------------------------------- */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px; border: 1px solid var(--line-2); background: var(--surface); }
.search { position: relative; flex: 1 1 260px; }
.search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-3); pointer-events: none; }
.search .input { padding-left: 40px; }
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filters button { --c: var(--text-3); }
.filters button b { font-weight: 600; color: var(--text-3); }
.sort { display: flex; align-items: center; gap: 10px; }
.sort span { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.sort .select { min-height: 38px; width: auto; }
.db-count { margin: 18px 0 14px; font-family: var(--font-mono); font-size: .76rem; letter-spacing: .08em; color: var(--text-3); }

.cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.cell {
  --c: var(--text-3);
  position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 8px;
  padding: 18px 18px 16px; color: var(--text);
  background: linear-gradient(180deg, var(--surface-2), var(--surface) 60%);
  border: 1px solid var(--line-2); overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.cell::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); }
.cell::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--c) 18%, transparent), transparent 55%);
  transition: opacity .3s;
}
.cell:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 60%, var(--line-2)); box-shadow: 0 18px 40px rgb(0 0 0 / .4); }
.cell:hover::after { opacity: 1; }
.cell__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.cell__status { display: inline-flex; align-items: center; gap: 6px; }
.cell__status i { width: 7px; height: 7px; border-radius: 50%; background: var(--a-vert); box-shadow: 0 0 8px var(--a-vert); }
.cell__status.is-warn i { background: var(--a-jaune); box-shadow: 0 0 8px var(--a-jaune); }
.cell__status.is-off i { background: var(--text-3); box-shadow: none; }
.cell__status.is-breach i { background: var(--a-rouge); box-shadow: 0 0 10px var(--a-rouge); animation: blink .5s infinite; }
.cell__num { font-family: var(--font-display); font-weight: 900; font-size: 4.2rem; line-height: .85; letter-spacing: -.005em; }
.cell__name { font-family: var(--font-head); font-weight: 600; font-size: 1.15rem; line-height: 1.2; }
.cell__resume { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.5; }
.cell__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--line); }
.cell__zone { font-family: var(--font-mono); font-size: .7rem; color: var(--text-3); letter-spacing: .06em; }
.meter { display: inline-flex; gap: 3px; }
.meter i { width: 10px; height: 10px; border: 1px solid var(--line-2); }
.meter i.on { background: var(--m, var(--a-orange)); border-color: transparent; }
.empty { padding: 48px 24px; text-align: center; border: 1px dashed var(--line-2); color: var(--text-2); }
.empty b { display: block; font-family: var(--font-display); font-size: 2.4rem; font-weight: 900; color: var(--text); margin-bottom: 6px; }

.classes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.classes > div { display: grid; gap: 6px; padding: 20px; background: var(--bg-2); }
.classes h3 { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 900; font-size: 1.9rem; line-height: 1; text-transform: uppercase; }
.classes h3::before { content: ""; width: 14px; height: 14px; background: var(--c); }
.classes p { color: var(--text-2); font-size: var(--fs-sm); }

/* ---------- 17. Plan ----------------------------------------------- */
.map-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; margin-bottom: 16px; }
.map-tools__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.map-frame { position: relative; border: 1px solid var(--line-2); background: var(--bg-2); overflow-x: auto; }
.map-frame svg { display: block; width: 100%; height: auto; min-width: 720px; }
.map-hint { position: absolute; left: 12px; bottom: 10px; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); pointer-events: none; }

.m-sky { fill: #0E171B; }
.m-rock { fill: url(#m-hatch); }
.m-mountain { fill: #1A252B; stroke: #3C5058; stroke-width: 1.2; }
.m-snow { fill: #C9D4D3; opacity: .8; }
.m-ground { stroke: #4A5F66; stroke-width: 1.5; }
.m-level { stroke: #2A3A41; stroke-dasharray: 3 6; }
.m-level-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; fill: var(--text-3); }
.m-level-depth { font-family: var(--font-mono); font-size: 10px; fill: #56696C; }
.m-shaft { fill: #0A1113; stroke: #3A4C53; }
.m-car { fill: var(--signal); animation: elevator 14s ease-in-out infinite; }
html[data-alert="rouge"] .m-car, html[data-alert="noir"] .m-car { animation-play-state: paused; fill: var(--a-rouge); }
@keyframes elevator { 0%, 8% { transform: translateY(0); } 30%, 38% { transform: translateY(330px); } 60%, 68% { transform: translateY(520px); } 92%, 100% { transform: translateY(0); } }
.m-note { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; fill: #56696C; }
.m-cable { stroke: #56696C; stroke-dasharray: 4 4; fill: none; }
.m-room { cursor: pointer; outline: none; }
.m-room rect, .m-room path { fill: #16222A; stroke: var(--dz); stroke-width: 1.2; transition: fill .2s, stroke-width .2s; }
.m-room text { font-family: var(--font-head); font-size: 13px; font-weight: 600; fill: var(--text); pointer-events: none; letter-spacing: .3px; }
.m-room .m-sub { font-family: var(--font-mono); font-size: 9.5px; font-weight: 400; fill: var(--text-3); letter-spacing: .6px; }
.m-room .m-pip { fill: var(--dz); stroke: none; }
.m-room:hover rect, .m-room:hover path, .m-room:focus-visible rect, .m-room:focus-visible path { fill: #1F2F38; stroke-width: 2; }
.m-room.is-active rect, .m-room.is-active path { fill: color-mix(in srgb, var(--signal) 14%, #16222A); stroke: var(--signal); stroke-width: 2.4; }
.m-room.is-breach rect, .m-room.is-breach path { stroke: var(--a-rouge); stroke-width: 3; animation: breach-fill .7s steps(2) infinite; }
@keyframes breach-fill { 50% { fill: color-mix(in srgb, var(--a-rouge) 45%, #16222A); } }
.m-room.is-sealed rect { stroke-dasharray: 6 4; }

.zone-panel { position: sticky; top: 96px; display: grid; gap: 16px; padding: 22px; border: 1px solid var(--line-2); background: var(--surface); }
.zone-panel__lvl { display: flex; justify-content: space-between; gap: 12px; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.zone-panel h2 { font-family: var(--font-display); font-weight: 900; font-size: 2.3rem; line-height: .92; text-transform: uppercase; }
.zone-panel p { color: var(--text-2); font-size: var(--fs-sm); }
.kv { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.kv div { padding: 8px 10px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kv dt { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.kv dd { font-family: var(--font-head); font-weight: 600; }
.ticks { list-style: none; display: grid; gap: 6px; font-size: var(--fs-sm); color: var(--text-2); }
.ticks li { display: flex; gap: 10px; }
.ticks li::before { content: ""; flex: none; width: 8px; height: 2px; margin-top: .72em; background: var(--signal); }
.tagrow { display: flex; flex-wrap: wrap; gap: 6px; }
.tagrow button { cursor: pointer; }
.tagrow button:hover { filter: brightness(1.25); }

.breach-log { margin-top: 16px; border: 1px solid color-mix(in srgb, var(--a-rouge) 55%, var(--line-2)); background: #120B0C; }
.breach-log__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid color-mix(in srgb, var(--a-rouge) 35%, transparent); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #FFB4B4; }
.breach-log__head b { font-variant-numeric: tabular-nums; color: #fff; }
.breach-log ol { list-style: none; display: grid; gap: 4px; padding: 12px 14px; font-family: var(--font-mono); font-size: .8rem; line-height: 1.5; max-height: 260px; overflow-y: auto; }
.breach-log li { color: #E7CACA; animation: toast-in .3s var(--ease); }
.breach-log li time { color: #9B6B6B; margin-right: 10px; }
.breach-log li.is-crit { color: #FF8C8C; }
.breach-log li.is-ok { color: var(--a-vert); }

.zone-index { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.zone-index > div { display: grid; align-content: start; gap: 8px; padding: 18px; background: var(--bg-2); }
.zone-index h3 { font-family: var(--font-mono); font-weight: 500; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.zone-index button {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; text-align: left; font-family: var(--font-head); font-weight: 500;
  background: var(--surface); border: 1px solid var(--line); transition: border-color .2s;
}
.zone-index button:hover { border-color: var(--signal); }
.zone-index button i { flex: none; width: 8px; height: 8px; background: var(--dz); }

/* ---------- 18. Personnel ----------------------------------------- */
.dept { display: grid; grid-template-columns: 290px minmax(0, 1fr); border: 1px solid var(--line-2); background: var(--surface); }
.dept__tabs { display: grid; align-content: start; border-right: 1px solid var(--line-2); background: var(--bg-2); }
.dept__tab {
  display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 12px;
  padding: 12px 16px; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--line);
  color: var(--text-2); transition: background .2s, color .2s;
}
.dept__tab b { font-family: var(--font-mono); font-size: .72rem; font-weight: 600; letter-spacing: .1em; color: var(--text-3); }
.dept__tab span { font-family: var(--font-head); font-weight: 500; line-height: 1.25; }
.dept__tab:hover { background: var(--surface); color: var(--text); }
.dept__tab[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: inset 3px 0 0 var(--signal); }
.dept__tab[aria-selected="true"] b { color: var(--signal); }
.dept__panel { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px 36px; padding: clamp(22px, 3vw, 36px); align-content: start; }
.dept__head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.dept__code { font-family: var(--font-display); font-weight: 900; font-size: clamp(3.6rem, 7vw, 5.4rem); line-height: .8; color: transparent; -webkit-text-stroke: 1.5px var(--text-3); }
.dept__name { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: .95; text-transform: uppercase; margin-top: 8px; }
.dept__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dept__panel h3 { font-family: var(--font-mono); font-weight: 500; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 12px; }
.dept__resume { color: var(--text); font-size: 1.05rem; margin-bottom: 20px; }

.ladder { list-style: none; display: grid; gap: 0; counter-reset: rank; }
.ladder li { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0 9px 26px; border-bottom: 1px solid var(--line); }
.ladder li::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; background: var(--line-2); }
.ladder li::after { content: ""; position: absolute; left: 2px; top: 50%; width: 10px; height: 10px; transform: translateY(-50%) rotate(45deg); background: var(--surface); border: 2px solid var(--text-3); }
.ladder li.is-entry::after { background: var(--signal); border-color: var(--signal); }
.ladder em { font-style: normal; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--signal-ink); background: var(--signal); padding: 1px 5px; margin-left: 8px; vertical-align: 2px; }
.ladder span { font-family: var(--font-head); font-weight: 500; }
.ladder small { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; color: var(--text-3); white-space: nowrap; }

.clearance { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); }
.clearance__lvl { --k: 0; position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 8px; padding: 20px 16px 16px; background: color-mix(in srgb, var(--signal) calc(var(--k) * 3%), var(--surface)); }
.clearance__lvl::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(4px + var(--k) * 2px); background: color-mix(in srgb, var(--signal) calc(20% + var(--k) * 16%), var(--line-2)); }
.clearance__num { font-family: var(--font-display); font-weight: 900; font-size: 3.6rem; line-height: .8; }
.clearance__name { font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.clearance__lvl p { color: var(--text-2); font-size: .82rem; line-height: 1.45; }
.clearance__lvl .btn { justify-self: start; }
.clearance__lvl.is-mine { outline: 2px solid var(--signal); outline-offset: -2px; }
.clearance__mine { position: absolute; right: 12px; top: 16px; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--signal-ink); background: var(--signal); padding: 2px 6px; }

.pclasses { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.pclasses > div { display: grid; align-content: start; gap: 8px; padding: 18px; background: var(--bg-2); }
.pclasses b { font-family: var(--font-display); font-weight: 900; font-size: 3rem; line-height: .85; }
.pclasses > div:nth-child(4) b { color: var(--a-orange); }
.pclasses p { color: var(--text-2); font-size: .86rem; }

.units { list-style: none; display: grid; border-top: 1px solid var(--line-2); }
.unit { display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1.4fr) auto; align-items: center; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.unit__insignia { position: relative; width: 60px; height: 68px; display: grid; place-items: center; }
.unit__insignia svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.unit__insignia b { position: relative; font-family: "Times New Roman", Georgia, serif; font-size: 1.9rem; font-style: italic; color: var(--text); }
.unit__code { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--signal); }
.unit__name { font-family: var(--font-display); font-weight: 900; font-size: 1.7rem; line-height: .95; text-transform: uppercase; }
.unit p { color: var(--text-2); font-size: var(--fs-sm); }

.groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.group { display: grid; align-content: start; gap: 10px; padding: 20px; border: 1px solid var(--line-2); background: var(--surface); }
.group h3 { font-family: var(--font-head); font-weight: 600; font-size: 1.2rem; line-height: 1.2; }
.group p { color: var(--text-2); font-size: var(--fs-sm); }

/* ---------- 19. Archives ----------------------------------------- */
.tl { list-style: none; position: relative; display: grid; }
.tl::before { content: ""; position: absolute; left: 150px; top: 0; bottom: 0; width: 1px; background: var(--line-2); }
.tl__year { position: relative; padding: 28px 0 12px 0; font-family: var(--font-display); font-weight: 900; font-size: 3rem; line-height: 1; color: var(--text-3); }
.tl__year::after { content: ""; position: absolute; left: 146px; bottom: 22px; width: 9px; height: 9px; background: var(--bg); border: 1px solid var(--text-3); transform: rotate(45deg); }
.tl__item { --c: var(--text-3); position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 0; }
.tl__date { padding: 22px 24px 0 0; font-family: var(--font-mono); font-size: .8rem; letter-spacing: .06em; color: var(--text-2); text-align: right; }
.tl__date b { display: block; font-family: var(--font-display); font-weight: 900; font-size: 1.8rem; color: var(--text); line-height: 1; }
.tl__body { position: relative; margin: 12px 0 12px 28px; padding: 18px 20px; border: 1px solid var(--line-2); background: var(--surface); display: grid; gap: 8px; }
.tl__body::before { content: ""; position: absolute; left: -33px; top: 26px; width: 11px; height: 11px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px var(--bg); }
.tl__body h3 { font-family: var(--font-head); font-weight: 600; font-size: 1.2rem; }
.tl__body p { color: var(--text-2); max-width: 72ch; }
.tl__item[data-type="incident"] { --c: var(--a-rouge); }
.tl__item[data-type="incident"] .tl__body { border-left: 3px solid var(--a-rouge); }
.tl__item[data-type="communique"] { --c: var(--signal); }
.tl__item[data-type="historique"] { --c: var(--c-attente); }

/* ---------- 20. Terminal ----------------------------------------- */
.crt {
  position: relative; border: 1px solid var(--line-2); background: #050A08;
  box-shadow: inset 0 0 120px rgb(0 0 0 / .8), 0 30px 80px rgb(0 0 0 / .45);
  overflow: hidden;
}
.crt::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: repeating-linear-gradient(180deg, rgb(255 255 255 / .035) 0 1px, transparent 1px 3px);
}
.crt::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(ellipse at center, transparent 55%, rgb(0 0 0 / .55));
}
.crt__bar { position: relative; z-index: 3; display: flex; justify-content: space-between; gap: 12px; padding: 8px 14px; border-bottom: 1px solid #1B2A22; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: #5E8A6E; }
.crt__screen { position: relative; z-index: 1; height: clamp(420px, 62vh, 640px); overflow-y: auto; padding: 18px 18px 8px; font-family: var(--font-mono); font-size: .9rem; line-height: 1.55; color: #B8F5C8; text-shadow: 0 0 6px rgb(120 255 160 / .35); cursor: text; }
.crt__out > div { white-space: pre-wrap; word-break: break-word; }
.crt__out .t-dim { color: #5E8A6E; text-shadow: none; }
.crt__out .t-hl { color: #F2E7A5; text-shadow: 0 0 6px rgb(242 231 165 / .35); }
.crt__out .t-err { color: #FF8A80; text-shadow: 0 0 6px rgb(255 100 90 / .35); }
.crt__out .t-cmd { color: #E6FFEE; }
.crt__out .t-rd { color: #2C4A38; text-shadow: none; }
.crt__out a { color: #F2E7A5; }
.crt__line { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; }
.crt__prompt { color: #F2E7A5; white-space: nowrap; }
.crt__line input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: #E6FFEE; font-family: var(--font-mono); font-size: .9rem; caret-color: #B8F5C8; text-shadow: inherit; }
.term-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.term-quick button { font-family: var(--font-mono); font-size: .76rem; padding: 7px 12px; background: var(--surface); border: 1px solid var(--line-2); color: var(--text-2); }
.term-quick button:hover { border-color: var(--signal); color: var(--text); }

/* ---------- 21. Règlement ---------------------------------------- */
.rules-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.rules-toc { position: sticky; top: 96px; display: grid; gap: 16px; }
.rules-toc nav { display: grid; border-top: 1px solid var(--line-2); }
.rules-toc nav a { display: grid; grid-template-columns: 36px 1fr; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--text-2); font-family: var(--font-head); font-weight: 500; transition: color .2s; }
.rules-toc nav a b { font-family: var(--font-mono); font-size: .72rem; font-weight: 500; color: var(--text-3); padding-top: 3px; }
.rules-toc nav a:hover, .rules-toc nav a.is-active { color: var(--text); }
.rules-toc nav a.is-active b { color: var(--signal); }
.chapter { padding-bottom: 36px; }
.chapter + .chapter { padding-top: 36px; border-top: 1px solid var(--line); }
.chapter__head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 18px; }
.chapter__num { font-family: var(--font-display); font-weight: 900; font-size: 3.4rem; line-height: .8; color: transparent; -webkit-text-stroke: 1.5px var(--signal); }
.articles { list-style: none; display: grid; gap: 0; }
.article { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px dashed var(--line); }
.article b { font-family: var(--font-mono); font-size: .78rem; font-weight: 600; color: var(--signal); padding-top: 3px; letter-spacing: .04em; }
.article p { color: var(--text); max-width: 68ch; }
.article mark { background: var(--signal); color: var(--signal-ink); padding: 0 2px; }
.rules-empty { padding: 24px; border: 1px dashed var(--line-2); color: var(--text-2); }

.table-wrap { overflow-x: auto; border: 1px solid var(--line-2); }
.table { width: 100%; border-collapse: collapse; min-width: 640px; background: var(--surface); }
.table th, .table td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.table th { font-family: var(--font-mono); font-size: .7rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); background: var(--bg-2); }
.table td:first-child { font-family: var(--font-head); font-weight: 600; white-space: nowrap; }
.table td { color: var(--text-2); }
.table tr:last-child td { border-bottom: 0; }
.sev { display: inline-flex; gap: 3px; margin-right: 10px; vertical-align: 1px; }
.sev i { width: 6px; height: 12px; background: var(--line-2); }
.sev i.on { background: var(--m); }

.glossary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.glossary > div { padding: 16px 18px; background: var(--bg-2); }
.glossary dt { font-family: var(--font-display); font-weight: 900; font-size: 1.6rem; line-height: 1; text-transform: uppercase; margin-bottom: 6px; }
.glossary dd { color: var(--text-2); font-size: var(--fs-sm); }

.quiz { position: relative; display: grid; gap: 18px; max-width: 860px; padding: clamp(22px, 4vw, 40px); border: 1px solid var(--line-2); background: var(--surface); overflow: hidden; }
.quiz__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.quiz__progress { flex: 1; max-width: 260px; height: 4px; background: var(--line); }
.quiz__progress i { display: block; height: 100%; background: var(--signal); transition: width .4s var(--ease); }
.quiz__q { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.2rem, 2.2vw, 1.5rem); line-height: 1.3; }
.quiz__opts { display: grid; gap: 8px; }
.quiz__opt {
  display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 12px;
  padding: 12px 14px; text-align: left; background: var(--bg-2); border: 1px solid var(--line-2); color: var(--text);
  transition: border-color .2s, background .2s;
}
.quiz__opt b { font-family: var(--font-mono); font-size: .8rem; color: var(--text-3); }
.quiz__opt:hover:not([disabled]) { border-color: var(--signal); }
.quiz__opt[disabled] { cursor: default; }
.quiz__opt.is-right { border-color: var(--a-vert); background: color-mix(in srgb, var(--a-vert) 12%, var(--bg-2)); }
.quiz__opt.is-wrong { border-color: var(--a-rouge); background: color-mix(in srgb, var(--a-rouge) 12%, var(--bg-2)); }
.quiz__fb { min-height: 1.6em; color: var(--text-2); }
.quiz__fb b { color: var(--text); }
.quiz__foot { display: flex; justify-content: flex-end; gap: 10px; }
.quiz__result { display: grid; gap: 14px; justify-items: start; }
.quiz__score { font-family: var(--font-display); font-weight: 900; font-size: clamp(4rem, 10vw, 6.5rem); line-height: .8; }
.quiz__stamp {
  position: absolute; right: clamp(16px, 5vw, 48px); top: clamp(20px, 5vw, 44px);
  padding: 10px 18px; border: 4px solid var(--c); color: var(--c);
  font-family: var(--font-display); font-weight: 900; font-size: clamp(1.4rem, 3.4vw, 2.2rem); letter-spacing: .06em; text-transform: uppercase; line-height: 1;
  transform: rotate(-8deg); animation: stamp .5s cubic-bezier(.2, 1.6, .4, 1);
}
@keyframes stamp { from { transform: rotate(-8deg) scale(2.2); opacity: 0; } }

/* ---------- 22. Rejoindre ---------------------------------------- */
.steps { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); counter-reset: step; }
.step { position: relative; display: grid; align-content: start; gap: 10px; padding: 22px 18px; background: var(--surface); counter-increment: step; }
.step::before { content: counter(step, decimal-leading-zero); font-family: var(--font-display); font-weight: 900; font-size: 3rem; line-height: .8; color: var(--signal); }
.step h3 { font-family: var(--font-head); font-weight: 600; font-size: 1.1rem; text-transform: uppercase; letter-spacing: .04em; }
.step p { color: var(--text-2); font-size: .88rem; }

.creator { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(20px, 4vw, 48px); align-items: start; }
.creator__form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.creator__form .full { grid-column: 1 / -1; }
.creator__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
.creator__preview { position: sticky; top: 96px; display: grid; gap: 18px; }
.creator__caption { display: flex; justify-content: space-between; gap: 12px; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }

.idcard-stage { perspective: 1200px; }
.idcard {
  --dc: var(--signal); --lc: var(--signal);
  position: relative; aspect-ratio: 85.6 / 54; width: 100%; max-width: 100%;
  display: grid; grid-template-rows: auto 1fr auto;
  color: #111618; background: #EDEFEA; border-radius: 10px; overflow: hidden;
  box-shadow: 0 30px 60px rgb(0 0 0 / .5), 0 0 0 1px rgb(255 255 255 / .06);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d;
  transition: transform .25s var(--ease);
  font-family: var(--font-body);
  container-type: inline-size;
}
.idcard::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / .75) var(--sh, 45%), transparent 60%),
              linear-gradient(115deg, rgb(120 200 255 / .18), rgb(255 120 220 / .15), rgb(255 230 120 / .18));
  opacity: .7;
}
.idcard__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 3.2cqw 4cqw; background: #0F1619; color: #EDEFEA; }
.idcard__org { display: flex; align-items: center; gap: 2.4cqw; }
.idcard__org svg { width: 7.5cqw; height: 7.5cqw; }
.idcard__org b { display: block; font-family: var(--font-head); font-weight: 700; font-size: 3.1cqw; letter-spacing: .12em; text-transform: uppercase; line-height: 1.1; }
.idcard__org small { display: block; font-family: var(--font-mono); font-size: 2cqw; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.idcard__site { font-family: var(--font-display); font-weight: 900; font-size: 6cqw; line-height: 1; }
.idcard__site i { font-style: normal; color: var(--alert); }
.idcard__mid { display: grid; grid-template-columns: 27% 1fr; gap: 4cqw; padding: 3.4cqw 4cqw; min-height: 0; }
.idcard__photo { position: relative; background: var(--dc); overflow: hidden; border: 1px solid rgb(0 0 0 / .25); }
.idcard__photo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.idcard__photo b { position: absolute; left: 6%; top: 4%; font-family: var(--font-mono); font-size: 2.4cqw; font-weight: 600; color: rgb(0 0 0 / .55); }
.idcard__fields { display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 1.6cqw 3cqw; min-width: 0; }
.idcard__fields div { min-width: 0; }
.idcard__fields .wide { grid-column: 1 / -1; }
.idcard__fields dt { font-family: var(--font-mono); font-size: 1.8cqw; letter-spacing: .14em; text-transform: uppercase; color: #5C6769; }
.idcard__fields dd { font-family: var(--font-head); font-weight: 600; font-size: 3.2cqw; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idcard__fields .name dd { font-family: var(--font-display); font-weight: 900; font-size: 6.4cqw; line-height: .95; text-transform: uppercase; }
.idcard__bot { display: flex; align-items: center; justify-content: space-between; gap: 3cqw; padding: 2.2cqw 4cqw; background: var(--lc); color: #0F1619; }
.idcard__lvl { display: flex; align-items: center; gap: 2cqw; font-family: var(--font-mono); font-weight: 600; font-size: 2.4cqw; letter-spacing: .12em; text-transform: uppercase; }
.idcard__lvl b { font-family: var(--font-display); font-weight: 900; font-size: 6cqw; line-height: .8; letter-spacing: 0; }
.idcard__bar { height: 7cqw; width: 42%; }
.idcard__bar svg { width: 100%; height: 100%; display: block; }

.output { position: relative; border: 1px solid var(--line-2); background: var(--bg-2); }
.output__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.output pre { margin: 0; padding: 14px; max-height: 260px; overflow: auto; font-family: var(--font-mono); font-size: .78rem; line-height: 1.55; color: var(--text-2); white-space: pre-wrap; word-break: break-word; }

.faq { display: grid; border-top: 1px solid var(--line-2); max-width: 900px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; cursor: pointer; list-style: none;
  font-family: var(--font-head); font-weight: 600; font-size: 1.15rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line-2); font-family: var(--font-mono); font-weight: 400; color: var(--signal); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 20px; color: var(--text-2); max-width: 70ch; }

.cta-band { position: relative; overflow: hidden; border: 1px solid var(--line-2); background: var(--surface); }
.cta-band::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 14px; background: repeating-linear-gradient(-45deg, var(--signal) 0 10px, #0A0F11 10px 20px); }
.cta-band__in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; padding: clamp(28px, 5vw, 52px) clamp(28px, 5vw, 52px) clamp(28px, 5vw, 52px) calc(clamp(28px, 5vw, 52px) + 14px); }
.cta-band h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.4rem, 5.4vw, 4rem); line-height: .9; text-transform: uppercase; max-width: 16ch; }
.cta-band p { color: var(--text-2); margin-top: 12px; max-width: 52ch; }

/* ---------- 23. Adaptatif ---------------------------------------- */
@media (max-width: 1220px) {
  .nav { display: none; }
  .menu-btn { display: inline-grid; }
  .bar__tools { margin-left: auto; }
}
@media (max-width: 1140px) {
  .status { grid-template-columns: 1fr 1fr; }
  .status__cell:nth-child(2) { border-right: 0; }
  .status__cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .map-layout { grid-template-columns: minmax(0, 1fr); }
  .zone-panel { position: static; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps .step:last-child { grid-column: 1 / -1; }
  .clearance { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pclasses { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .zone-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .hero__in { grid-template-columns: minmax(0, 1fr); }
  .hero__visual { order: -1; max-width: 340px; width: 100%; margin-inline: auto; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .classes, .groups, .glossary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dept { grid-template-columns: minmax(0, 1fr); }
  .dept__tabs { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line-2); }
  .dept__tab { grid-template-columns: auto auto; border-bottom: 0; border-right: 1px solid var(--line); }
  .dept__tab[aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--signal); }
  .dept__panel { grid-template-columns: minmax(0, 1fr); }
  .rules-layout { grid-template-columns: minmax(0, 1fr); }
  .rules-toc { position: static; }
  .creator { grid-template-columns: minmax(0, 1fr); }
  .creator__preview { position: static; order: -1; }
  .ftr__in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ftr__brand { grid-column: 1 / -1; }
  .unit { grid-template-columns: 64px minmax(0, 1fr) auto; }
  .unit p { grid-column: 2 / -1; }
  .sign__in { grid-template-columns: minmax(0, 1fr); }
  .sign__meta { justify-self: start; }
}
@media (max-width: 640px) {
  .sysbar__group--wide { display: none; }
  .brand__sub { display: none; }
  .brand svg { width: 32px; height: 32px; }
  .brand__name { font-size: 1.4rem; }
  .alert-chip span { display: none; }
  .alert-chip { padding: 4px 12px; }
  .clr__btn .clr__lbl { display: none; }
  .hero__facts { grid-template-columns: 1fr 1fr; }
  .hero__facts div { border-right: 0; margin-right: 0; padding-right: 0; }
  .status { grid-template-columns: minmax(0, 1fr); }
  .status__cell { border-right: 0; border-bottom: 1px solid var(--line); }
  .status__cell:last-child { border-bottom: 0; }
  .sectors, .classes, .groups, .glossary, .pclasses, .zone-index, .clearance { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .steps .step:last-child { grid-column: auto; }
  .comm { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .tl::before { left: 6px; }
  .tl__year::after { left: 2px; }
  .tl__year { padding-left: 26px; font-size: 2.4rem; }
  .tl__item { grid-template-columns: minmax(0, 1fr); }
  .tl__date { text-align: left; padding: 14px 0 0 26px; }
  .tl__date b { display: inline; font-size: 1.1rem; margin-right: 6px; }
  .tl__body { margin: 8px 0 8px 26px; }
  .tl__body::before { left: -25px; top: 20px; }
  .creator__form { grid-template-columns: minmax(0, 1fr); }
  .ftr__in { grid-template-columns: minmax(0, 1fr); }
  .unit { grid-template-columns: 56px minmax(0, 1fr); }
  .unit > .chip { grid-column: 2; justify-self: start; }
  .article { grid-template-columns: 48px minmax(0, 1fr); gap: 10px; }
  .doc__head { flex-direction: column; }
  .doc__stamp { align-self: flex-end; margin-top: -8px; }
  .quiz__stamp { position: static; justify-self: start; }
  .sign__code { display: none; }
}

/* ---------- 24. Mouvement réduit --------------------------------- */
html[data-motion="reduit"] { scroll-behavior: auto; }
html[data-motion="reduit"] *, html[data-motion="reduit"] *::before, html[data-motion="reduit"] *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important;
}
/* Le bandeau reste sur une ligne : on le fait défiler à la main */
html[data-motion="reduit"] .ticker__view { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
html[data-motion="reduit"] .ticker__track { animation: none; }
html[data-motion="reduit"] .ticker__track span[aria-hidden] { display: none; }

/* ---------- 25. Compléments ------------------------------------- */
.hint { font-size: .78rem; color: #FF9B9B; }
.hint:empty { display: none; }
.dept__panel:focus-visible { outline-offset: -2px; }
.noscript { padding: 24px; margin: 24px var(--gutter); border: 1px solid var(--line-2); color: var(--text-2); }
.link { color: var(--signal); text-decoration: underline; text-underline-offset: 3px; }
.link:hover { color: var(--signal-2); }
.paper { --emb-bg: var(--paper); }
.ftr { --emb-bg: var(--bg-2); }
.boot { --emb-bg: #0F191C; }
.idcard__top { --emb-bg: #0F1619; }

/* ==========================================================================
   26. NOUVEAUTÉS : navigation, recherche, carnet, pages outils
   ========================================================================== */
kbd {
  display: inline-block; font-family: var(--font-mono); font-size: .72em; line-height: 1.4;
  padding: 0 5px; margin: 0 1px; border: 1px solid var(--line-2); border-bottom-width: 2px;
  background: var(--bg-2); color: var(--text-2);
}
.is-target { animation: target 2.2s ease-out; }
@keyframes target { 0%, 30% { box-shadow: 0 0 0 2px var(--signal), 0 0 30px color-mix(in srgb, var(--signal) 40%, transparent); } 100% { box-shadow: 0 0 0 2px transparent; } }
.bar-progress { height: 6px; background: var(--line); margin-top: 10px; max-width: 460px; }
.bar-progress i { display: block; height: 100%; background: var(--signal); transition: width .5s var(--ease); }
.icon-btn.is-on { color: var(--signal); border-color: var(--signal); }
.icon-btn.is-on svg path { fill: currentColor; }
.btn--signal svg path { stroke: currentColor; }

/* Effets désactivés */
html[data-fx="off"] body::before, html[data-fx="off"] body::after, html[data-fx="off"] .vignette { display: none; }
html[data-fx="off"] .dial__sweep { animation: none; opacity: .35; }

/* Menu « Plus » */
.more { position: relative; }
.more__btn { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; cursor: pointer; }
.more__btn svg { width: 14px; height: 14px; transition: transform .2s; }
.more__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.more__btn.is-current { color: var(--text); }
.more__btn.is-current::after { transform: scaleX(1); }
.more__pop {
  position: absolute; right: -80px; top: calc(100% + 16px); z-index: 70;
  width: min(600px, calc(100vw - 32px)); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--surface); border: 1px solid var(--line-2); box-shadow: 0 24px 60px rgb(0 0 0 / .55);
  animation: toast-in .2s var(--ease);
}
.more__grp { display: grid; align-content: start; gap: 2px; padding: 14px; border-right: 1px solid var(--line); }
.more__grp:last-child { border-right: 0; }
.more__grp p { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
.more__link { display: grid; gap: 2px; padding: 8px 10px; text-decoration: none; border-left: 2px solid transparent; transition: background .15s, border-color .15s; }
.more__link b { font-family: var(--font-head); font-weight: 600; font-size: .98rem; }
.more__link small { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em; color: var(--text-3); text-transform: uppercase; }
.more__link:hover { background: var(--surface-2); border-left-color: var(--signal); }
.more__link[aria-current="page"] b { color: var(--signal); }

.carnet-btn { position: relative; }
.carnet-btn .count {
  position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  background: var(--signal); color: var(--signal-ink); font-family: var(--font-mono); font-size: .62rem; font-weight: 600; line-height: 18px; text-align: center;
}
.drawer__grp { padding: 18px var(--gutter) 6px; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--signal); border-bottom: 1px solid var(--line); }

.ftr__ext { margin-top: 18px; }
.ftr__keys { font-size: .78rem; color: var(--text-3); margin-top: 14px; }

/* Notification de distinction */
.toast--medal { border-left-color: var(--signal); align-items: center; }
.toast__medal {
  flex: none; display: grid; place-items: center; min-width: 42px; height: 46px; padding: 0 6px;
  background: linear-gradient(160deg, var(--signal-2), #B8860B); color: var(--signal-ink);
  font-family: var(--font-display); font-weight: 900; font-size: 1.05rem;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* Recherche globale */
.palette { position: fixed; inset: 0; z-index: 140; display: grid; justify-items: center; align-items: start; padding: max(9vh, 16px) 16px 16px; }
.palette__backdrop { position: absolute; inset: 0; background: rgb(3 6 8 / .78); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fade .2s; }
.palette__box {
  position: relative; width: min(700px, 100%); max-height: min(640px, 82vh);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--surface); border: 1px solid var(--line-2); box-shadow: 0 30px 80px rgb(0 0 0 / .6);
  animation: doc-in .3s var(--ease);
}
.palette__bar { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.palette__bar svg { width: 20px; height: 20px; color: var(--signal); flex: none; }
.palette__bar input { flex: 1; min-width: 0; min-height: 40px; background: transparent; border: 0; outline: none; font-size: 1.08rem; color: var(--text); }
.palette__bar input::-webkit-search-cancel-button { display: none; }
.palette__esc { flex: none; font-family: var(--font-mono); font-size: .68rem; padding: 4px 8px; background: var(--bg-2); border: 1px solid var(--line-2); color: var(--text-2); }
.palette__list { list-style: none; overflow-y: auto; overscroll-behavior: contain; padding: 6px; }
.palette__list li[role="option"] { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 12px; cursor: pointer; border-left: 3px solid transparent; }
.palette__list li[aria-selected="true"] { background: var(--surface-2); border-left-color: var(--signal); }
.palette__type { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.palette__txt { display: grid; min-width: 0; }
.palette__txt b { font-family: var(--font-head); font-weight: 600; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette__txt small { font-size: .8rem; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette__empty { padding: 28px 16px; text-align: center; color: var(--text-2); }
.palette__foot { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 10px 14px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: .66rem; letter-spacing: .06em; color: var(--text-3); }

/* Protocole Oméga */
.omega { position: fixed; inset: 0; z-index: 190; display: grid; place-items: center; padding: 24px; background: rgb(2 2 6 / .94); animation: fade .3s; }
.omega__box { max-width: 540px; display: grid; gap: 14px; justify-items: center; text-align: center; }
.omega__box svg { width: 88px; height: 88px; color: var(--a-noir); --emb-bg: #020206; animation: flicker 2.4s steps(1) infinite; }
.omega__box h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.6rem, 9vw, 4.6rem); line-height: .9; text-transform: uppercase; letter-spacing: .04em; color: var(--a-noir); }
.omega__box p { color: var(--text-2); }
.omega__small { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3) !important; }

/* Accueil : prochain événement & carnet */
.duo { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
.next {
  --c: var(--signal); position: relative; display: grid; align-content: start; gap: 14px;
  padding: 22px 24px; border: 1px solid var(--line-2); background: var(--surface); overflow: hidden;
}
.next::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); }
.next__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: .92; text-transform: uppercase; margin-top: 6px; }
.next__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: var(--fs-sm); color: var(--text-2); margin-top: 10px; }
.next__meta span:not(.chip) + span:not(.chip)::before { content: "·"; margin-right: 14px; color: var(--text-3); }
.next__timer { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.1; margin-top: 4px; }
.next__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.next--carnet { --c: var(--c-attente); justify-content: space-between; }
.comm__link { text-decoration: none; }
.comm__link:hover { color: var(--signal); }
.daily .hero__cta { gap: 10px; }

/* Dossiers : suivis et lus */
.cell__hit { position: absolute; inset: 0; z-index: 1; width: 100%; background: transparent; border: 0; cursor: pointer; }
.cell__hit:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }
.cell__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.cell__fav { position: relative; z-index: 2; display: grid; place-items: center; width: 38px; height: 38px; margin: -4px -6px 0 0; background: transparent; border: 1px solid transparent; color: var(--text-3); transition: color .2s, border-color .2s, transform .2s var(--ease); }
.cell__fav svg { width: 20px; height: 20px; }
.cell__fav:hover { color: var(--signal); border-color: var(--line-2); }
.cell__fav.is-on { color: var(--signal); }
.cell__fav.is-on svg path { fill: currentColor; }
.cell__fav:active { transform: scale(.85); }
.cell__seen { font-style: normal; margin-left: 6px; padding: 0 5px; border: 1px solid var(--line-2); font-size: .6rem; color: var(--text-2); vertical-align: 1px; }

/* Plan : itinéraire */
.m-route { fill: none; stroke: var(--signal); stroke-width: 3; stroke-dasharray: 8 6; stroke-linejoin: round; animation: route-dash .8s linear infinite; pointer-events: none; }
.m-route-dot { fill: var(--signal); pointer-events: none; }
.m-route-end { fill: none; stroke: var(--signal); stroke-width: 2; pointer-events: none; animation: ring 1.3s ease-out infinite; }
@keyframes route-dash { to { stroke-dashoffset: -14; } }
@keyframes ring { from { r: 5; opacity: 1; } to { r: 18; opacity: 0; } }
.route { list-style: none; counter-reset: r; display: grid; gap: 6px; margin-top: 12px; }
.route li { counter-increment: r; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 8px 10px; border: 1px solid var(--line); font-size: .84rem; color: var(--text-2); }
.route li::before { content: counter(r); font-family: var(--font-mono); font-size: .72rem; color: var(--signal); }
.route li small { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .06em; }
.route li.is-ok small { color: var(--a-vert); }
.route li.is-ko { border-color: color-mix(in srgb, var(--a-rouge) 50%, var(--line)); }
.route li.is-ko small { color: var(--a-rouge); }

/* Règlement : lecture */
.rules-progress { display: grid; gap: 4px; }
.rules-progress .bar-progress { margin-top: 2px; }
.rules-toc nav a.is-read b { color: var(--a-vert); }
.chapter__read { margin-top: 18px; }
.chapter__read.is-on { border-color: var(--a-vert); color: var(--a-vert); }
.chapter.is-read .chapter__num { -webkit-text-stroke-color: var(--a-vert); }

/* Rejoindre : orientation */
.orient__code { font-family: var(--font-display); font-weight: 900; font-size: clamp(4rem, 12vw, 7rem); line-height: .8; color: transparent; -webkit-text-stroke: 2px var(--signal); }

/* Événements */
.evt-hero { --c: var(--signal); position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) auto; gap: 24px 40px; align-items: center; padding: clamp(22px, 4vw, 40px); border: 1px solid var(--line-2); background: var(--surface); overflow: hidden; }
.evt-hero::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: repeating-linear-gradient(-45deg, var(--c) 0 10px, transparent 10px 20px); }
.evt-hero__info { display: grid; gap: 10px; }
.evt-hero__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.4rem, 5.4vw, 4rem); line-height: .88; text-transform: uppercase; }
.evt-hero__count { display: grid; gap: 10px; }
.cd { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cd div { display: grid; justify-items: center; gap: 4px; min-width: 76px; padding: 14px 8px; border: 1px solid var(--line-2); background: var(--bg-2); }
.cd b { font-size: clamp(1.9rem, 3.8vw, 2.8rem); font-weight: 500; line-height: 1; }
.cd span { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.evt-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); align-items: start; }
.cal { position: sticky; top: 96px; padding: 14px; border: 1px solid var(--line-2); background: var(--surface); }
.cal__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.cal__title { font-family: var(--font-head); font-weight: 600; font-size: 1.1rem; letter-spacing: .06em; text-transform: uppercase; }
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.cal__grid > span { padding: 4px 0; text-align: center; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.cal__cell { display: grid; align-content: space-between; justify-items: start; min-height: 46px; min-width: 0; padding: 5px; background: var(--bg-2); border: 1px solid var(--line); color: var(--text-2); text-align: left; }
.cal__cell b { font-family: var(--font-mono); font-weight: 500; font-size: .76rem; }
.cal__cell.is-empty { background: transparent; border-color: transparent; }
.cal__cell.is-today { border-color: var(--text-3); }
.cal__cell.is-today b { color: var(--signal); }
.cal__cell.has-evt { background: var(--surface-2); border-color: var(--line-2); color: var(--text); cursor: pointer; }
.cal__cell.has-evt:hover { border-color: var(--signal); }
.cal__dots { display: flex; gap: 3px; }
.cal__dots i { width: 7px; height: 7px; background: var(--c); }
.cal__name { display: none; }
.evt-list { display: grid; gap: 12px; }
.evt { --c: var(--signal); display: grid; grid-template-columns: 96px minmax(0, 1fr); border: 1px solid var(--line-2); background: var(--surface); }
.evt__date { display: grid; align-content: start; justify-items: center; gap: 2px; padding: 16px 8px; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--c) 9%, var(--bg-2)); text-align: center; }
.evt__date b { font-family: var(--font-display); font-weight: 900; font-size: 2.8rem; line-height: .85; }
.evt__date span { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.evt__date small { font-family: var(--font-mono); font-size: .62rem; color: var(--text-3); }
.evt__body { display: grid; gap: 8px; padding: 16px 18px; min-width: 0; }
.evt__meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: .76rem; color: var(--text-3); }
.evt__count { margin-left: auto; color: var(--text-2); }
.evt h3 { font-family: var(--font-head); font-weight: 600; font-size: 1.3rem; line-height: 1.2; }
.evt__lieu { font-family: var(--font-mono); font-size: .74rem; color: var(--text-3); }
.evt p { color: var(--text-2); }
.evt__cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.evt.is-past { opacity: .62; }
.evt-past-title { margin-top: 18px; }

/* Protocoles */
.proto-ctrl { display: grid; gap: 14px; margin-bottom: 16px; }
.proto-ctrl > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; align-items: center; }
.proto-ctrl .seg button[aria-checked="true"] { color: var(--text); }
.proc { --c: var(--a-vert); position: relative; padding: clamp(22px, 3vw, 34px); padding-top: calc(clamp(22px, 3vw, 34px) + 6px); border: 1px solid var(--line-2); background: var(--surface); }
.proc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: repeating-linear-gradient(-45deg, var(--c) 0 10px, transparent 10px 20px); }
.proc__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.proc__code { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: .9; text-transform: uppercase; color: var(--c); }
.proc__title { font-family: var(--font-head); font-weight: 600; font-size: 1.25rem; text-transform: uppercase; letter-spacing: .04em; }
.proc__txt { color: var(--text-2); margin-top: 8px; max-width: 70ch; }
.proc__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 22px; }
.proc__list { list-style: none; counter-reset: p; display: grid; gap: 8px; margin-top: 10px; }
.proc__list li { counter-increment: p; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; padding: 10px 12px; background: var(--bg-2); border-left: 3px solid var(--c); }
.proc__list li::before { content: counter(p, decimal-leading-zero); font-family: var(--font-mono); font-size: .76rem; color: var(--c); padding-top: 2px; }
.proc__list--role li { border-left-color: var(--signal); }
.proc__list--role li::before { color: var(--signal); }
.codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.code { display: grid; gap: 2px; padding: 12px 14px; background: var(--bg-2); }
.code b { font-family: var(--font-mono); font-weight: 600; color: var(--signal); }
.code span { color: var(--text-2); font-size: .86rem; }
.phon { display: grid; gap: 14px; align-content: start; padding: 20px; border: 1px solid var(--line-2); background: var(--surface); }
.phon__row { display: flex; gap: 10px; }
.phon__row .input { flex: 1; }
.phon__out { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 44px; }
.phon__w { padding: 6px 10px; border: 1px solid var(--line-2); background: var(--bg-2); font-family: var(--font-mono); font-size: .84rem; color: var(--text-2); }
.phon__w b { color: var(--signal); font-weight: 600; }
.phon__sep { width: 14px; }
.pa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); border: 1px solid var(--line-2); background: var(--surface); }
.pa__form { display: grid; gap: 14px; align-content: start; padding: 22px; border-right: 1px solid var(--line); }
.pa__out { display: grid; grid-template-rows: auto 1fr auto; gap: 16px; padding: 22px; background: #0A1013; }
.pa__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pa__speaker { display: flex; align-items: center; gap: 14px; }
.pa__grill { width: 58px; height: 58px; border-radius: 50%; border: 2px solid var(--line-2); background: radial-gradient(circle, #2E3E45 1.4px, transparent 1.8px) 0 0 / 7px 7px, #10181B; }
.pa__wave { display: flex; align-items: center; gap: 3px; height: 40px; }
.pa__wave i { width: 4px; height: 6px; background: var(--line-2); }
.pa.is-live .pa__wave i { background: var(--signal); animation: wave .7s ease-in-out infinite; }
.pa.is-live .pa__wave i:nth-child(2n) { animation-delay: -.2s; }
.pa.is-live .pa__wave i:nth-child(3n) { animation-delay: -.45s; }
.pa.is-live .pa__wave i:nth-child(5n) { animation-delay: -.1s; }
@keyframes wave { 50% { height: 36px; } }
.pa__onair { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.pa.is-live .pa__onair { color: var(--a-rouge); }
.pa.is-live .pa__onair::before { content: "● "; animation: blink .6s infinite; }
.pa__text { padding: 14px; border: 1px dashed var(--line-2); font-family: var(--font-mono); font-size: .92rem; line-height: 1.65; color: var(--text); }
.pa__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Laboratoire */
.m914-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 32px); align-items: start; }
.m914 { position: relative; padding: 12px; border: 1px solid var(--line-2); background: var(--bg-2); }
.m914 svg { display: block; width: 100%; height: auto; }
.m914__housing { fill: #16222A; stroke: #3A4C53; stroke-width: 2; }
.m914__cabin { fill: #121B20; stroke: #3A4C53; stroke-width: 2; }
.m914__window { fill: #0A1013; stroke: #2A3A41; }
.m914__pipe { fill: #1B2830; stroke: #3A4C53; }
.m914__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; fill: var(--text-3); }
.m914__plate { font-family: var(--font-display); font-weight: 900; font-size: 22px; fill: var(--text-2); letter-spacing: 1px; }
.m914__gear { fill: none; stroke: #5B6F74; transform-box: fill-box; transform-origin: center; }
.m914__hub { fill: #2A3A41; stroke: #5B6F74; }
.m914__lamp { fill: #2A3A41; transition: fill .2s; }
.m914__knob { fill: #1F2C33; stroke: #7A8E8C; stroke-width: 2; }
.m914__needle { transform-origin: 300px 104px; transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.m914__needle line { stroke: var(--signal); stroke-width: 4; stroke-linecap: round; }
.m914__dl { font-family: var(--font-mono); font-size: 10px; letter-spacing: .5px; fill: var(--text-3); cursor: pointer; }
.m914__dl.is-on { fill: var(--signal); font-weight: 600; }
.m914__key { transform-box: fill-box; transform-origin: 50% 90%; }
.m914.is-running .m914__g1 { animation: spin 1.6s linear infinite; }
.m914.is-running .m914__g2 { animation: spin 1.1s linear infinite reverse; }
.m914.is-running .m914__g3 { animation: spin .8s linear infinite; }
.m914.is-running .m914__key { animation: spin 2.4s steps(8) infinite; }
.m914.is-running .m914__lamp { fill: var(--signal); animation: blink .4s infinite; }
.m914.is-running { animation: rumble .12s linear infinite; }
@keyframes rumble { 50% { transform: translate(.6px, -.6px); } }
.m914-ctrl { display: grid; gap: 16px; align-content: start; }
.m914-out { display: grid; gap: 8px; align-content: start; min-height: 150px; padding: 18px; border: 1px solid var(--line-2); background: var(--surface); }
.m914-out.is-ready { border-color: var(--signal); animation: declass .9s var(--ease); }
.m914__res { font-family: var(--font-doc); font-size: 1.12rem; line-height: 1.5; color: var(--text); }
.m914__in { font-family: var(--font-mono); font-size: .72rem; color: var(--text-3); }
.m914__wait { font-family: var(--font-mono); color: var(--text-2); animation: blink 1s infinite; }
.m914-log { list-style: none; display: grid; gap: 6px; max-height: 280px; overflow-y: auto; font-size: .86rem; }
.m914-log li { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 4px 10px; padding: 8px 10px; border: 1px solid var(--line); background: var(--bg-2); }
.m914-log time { font-family: var(--font-mono); font-size: .72rem; color: var(--text-3); padding-top: 2px; }
.m914-log em { grid-column: 2; font-style: normal; color: var(--text-2); }
.m914-log li.muted { display: block; border-style: dashed; }
.gen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.gen__form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gen__form .full { grid-column: 1 / -1; }
.gen__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
.gen__preview { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; box-shadow: 0 24px 50px rgb(0 0 0 / .45); }
.gen__preview .doc { font-size: .96rem; }
.syntax { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .78rem; color: var(--text-3); }
.syntax button { font-family: var(--font-mono); font-size: .72rem; padding: 4px 8px; background: var(--bg-2); border: 1px solid var(--line-2); color: var(--text-2); }
.syntax button:hover { border-color: var(--signal); color: var(--text); }
.range-row { display: grid; gap: 6px; padding: 14px; border: 1px solid var(--line-2); background: var(--surface); }
.range-row input { width: 100%; accent-color: var(--signal); }
.range-row output { font-family: var(--font-mono); font-size: .8rem; color: var(--signal); }

/* Entraînement */
.game-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.game-side { display: grid; gap: 16px; align-content: start; }
.game-side .ticks { font-size: .9rem; }
.g173 { --step: 5; position: relative; height: clamp(320px, 46vw, 460px); overflow: hidden; border: 1px solid var(--line-2); background: #080B0C; user-select: none; }
.g173__room { position: absolute; inset: 0; width: 100%; height: 100%; }
.g173__room line, .g173__room path { stroke: #25343A; fill: none; }
.g173__room .wall { fill: #0D1316; }
.g173__room .floor { fill: #0F1518; }
.g173__room .lampstrip { fill: #C9D4D3; opacity: .55; }
.g173__statue { position: absolute; left: 50%; bottom: calc(8% + var(--step) * 4.2%); width: 120px; transform: translateX(-50%) scale(calc(1.75 - var(--step) * .27)); transform-origin: 50% 100%; z-index: 1; }
.g173__statue svg { display: block; width: 100%; height: auto; }
.g173__dark { position: absolute; inset: 0; z-index: 2; background: #000; opacity: 0; pointer-events: none; transition: opacity .06s; }
.g173.is-dark .g173__dark { opacity: .97; }
.g173.is-lit .g173__dark { opacity: .92; -webkit-mask-image: radial-gradient(circle at 50% 62%, transparent 0 16%, #000 30%); mask-image: radial-gradient(circle at 50% 62%, transparent 0 16%, #000 30%); }
.g173.is-dead { animation: shake .45s; }
.g173.is-dead .g173__dark { opacity: .8; background: #2A0000; }
.g173.is-win { border-color: var(--a-vert); }
.g173__hud { position: absolute; left: 12px; right: 12px; top: 10px; z-index: 3; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: #9FD8B4; }
.g173__hud b { color: #E6FFEE; font-weight: 500; }
.bat { display: inline-flex; gap: 2px; vertical-align: -2px; margin-left: 6px; }
.bat i { width: 7px; height: 12px; border: 1px solid #5E8A6E; }
.bat i.on { background: #9FD8B4; }
.g173__msg { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3; padding: 0 16px; text-align: center; font-family: var(--font-mono); font-size: .84rem; color: var(--text); text-shadow: 0 1px 4px #000; }
.g173__msg.is-ok { color: var(--a-vert); }
.g173__msg.is-ko { color: #FF8A80; }
.g173__msg.is-warn { color: var(--signal); }
.g173-ctrl { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.simon { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: min(380px, 100%); aspect-ratio: 1; padding: 10px; border: 1px solid var(--line-2); background: var(--bg-2); }
.simon__pad {
  --c: var(--a-vert); position: relative; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 6vw, 3rem);
  color: color-mix(in srgb, var(--c) 55%, var(--text-3));
  background: color-mix(in srgb, var(--c) 8%, var(--surface));
  border: 2px solid color-mix(in srgb, var(--c) 40%, transparent);
  transition: background .08s, box-shadow .08s, color .08s;
}
.simon__pad small { position: absolute; left: 10px; top: 8px; font-family: var(--font-mono); font-size: .6rem; font-weight: 400; letter-spacing: .14em; color: var(--text-3); }
.simon__pad.is-on { background: var(--c); color: var(--bg); box-shadow: 0 0 40px var(--c); }
.simon.is-fail { animation: shake .4s; }
.simon.is-fail .simon__pad { border-color: var(--a-rouge); }
.simon-hud { display: flex; gap: 20px; font-family: var(--font-mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.simon-hud b { font-size: 1.2rem; color: var(--text); font-weight: 500; margin-left: 6px; }

/* Carnet */
.carnet-top { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: start; }
.carnet-id { display: grid; gap: 14px; }
.carnet-sum { display: grid; gap: 18px; align-content: start; }
.carnet-big { font-family: var(--font-display); font-weight: 900; font-size: clamp(3.4rem, 8vw, 5.4rem); line-height: .82; }
.carnet-big small { font-size: .45em; color: var(--text-3); }
.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.stat { display: grid; gap: 6px; align-content: start; padding: 14px; background: var(--bg-2); }
.stat b { font-size: 1.6rem; font-weight: 500; line-height: 1; }
.stat b small { font-size: .55em; color: var(--text-3); }
.stat span { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); line-height: 1.35; }
.badges { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.badge { display: grid; justify-items: center; align-content: start; gap: 6px; padding: 16px 10px; text-align: center; border: 1px solid var(--line); background: var(--bg-2); opacity: .5; transition: opacity .3s; }
.badge.is-got { opacity: 1; border-color: var(--line-2); background: var(--surface); }
.badge__medal {
  display: grid; place-items: center; width: 60px; height: 68px; margin-bottom: 4px;
  background: var(--line-2); color: var(--text-3);
  font-family: var(--font-display); font-weight: 900; font-size: 1.25rem;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.badge.is-got .badge__medal { background: linear-gradient(160deg, var(--signal-2), #B8860B); color: var(--signal-ink); }
.badge__name { font-family: var(--font-head); font-weight: 600; font-size: .92rem; line-height: 1.2; }
.badge__txt { font-size: .74rem; line-height: 1.35; color: var(--text-2); }
.badge__date { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.seen-grid { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; }
.seen { --c: var(--text-3); position: relative; display: grid; place-items: center; aspect-ratio: 1; border: 1px solid var(--line); background: var(--bg-2); color: var(--text-3); font-family: var(--font-display); font-weight: 900; font-size: 1.2rem; transition: border-color .2s; }
.seen:hover { border-color: var(--signal); }
.seen.is-on { border-color: var(--c); background: color-mix(in srgb, var(--c) 14%, var(--bg-2)); color: var(--text); }
.seen i { position: absolute; top: 2px; right: 5px; font-style: normal; font-size: .7rem; color: var(--signal); }
.plan-list { list-style: none; display: grid; border-top: 1px solid var(--line-2); }
.plan-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.plan-list a { display: grid; text-decoration: none; }
.plan-list a b { font-family: var(--font-head); font-weight: 600; }
.plan-list a span { font-size: .8rem; color: var(--text-2); }
.plan-list .mono { font-size: .8rem; color: var(--text-2); }
.settings { display: grid; border: 1px solid var(--line-2); background: var(--surface); }
.setting { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.setting:last-child { border-bottom: 0; }
.setting > div:first-child { min-width: 0; flex: 1 1 260px; }
.setting b { display: block; font-family: var(--font-head); font-weight: 600; }
.setting span { font-size: .86rem; color: var(--text-2); }
.setting__act { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.switch { position: relative; flex: none; width: 54px; height: 30px; padding: 0; border: 1px solid var(--line-2); border-radius: 15px; background: var(--bg-2); transition: background .2s, border-color .2s; }
.switch i { position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--text-3); transition: transform .2s var(--ease), background .2s; }
.switch[aria-checked="true"] { background: color-mix(in srgb, var(--signal) 22%, var(--bg-2)); border-color: var(--signal); }
.switch[aria-checked="true"] i { transform: translateX(24px); background: var(--signal); }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); align-items: start; }

/* Adaptatif des nouveautés */
@media (max-width: 1140px) {
  .badges { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .game-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .duo, .evt-layout, .proc__cols, .pa, .m914-layout, .gen, .carnet-top, .two { grid-template-columns: minmax(0, 1fr); }
  .evt-hero { grid-template-columns: minmax(0, 1fr); }
  .cal { position: static; }
  .pa__form { border-right: 0; border-bottom: 1px solid var(--line); }
  .gen__preview { position: static; max-height: none; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proto-ctrl > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}
@media (max-width: 640px) {
  .carnet-btn { display: none; }
  .palette__list li[role="option"] { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .seen-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .evt { grid-template-columns: 70px minmax(0, 1fr); }
  .evt__date b { font-size: 2.2rem; }
  .evt__count { margin-left: 0; width: 100%; }
  .cd div { min-width: 0; padding: 10px 4px; }
  .gen__form { grid-template-columns: minmax(0, 1fr); }
  .more__pop { display: none; }
  .badge__txt { display: none; }
}
.gen__side { position: sticky; top: 96px; display: grid; gap: 12px; }
.gen__side .gen__preview { position: static; max-height: calc(100vh - 210px); }
@media (max-width: 960px) {
  .gen__side { position: static; }
  .gen__side .gen__preview { max-height: none; }
}

#join-note { white-space: normal; }
.map-layout > * { min-width: 0; }

/* ==========================================================================
   27. SESSION DISCORD & ESPACE STAFF
   ========================================================================== */
.av {
  display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface-3) center / cover no-repeat; color: var(--text-2);
  font-family: var(--font-head); font-weight: 600; font-size: .8rem; letter-spacing: .02em;
  border: 1px solid var(--line-2); overflow: hidden;
}
.av[style*="background-image"] { color: transparent; }
.av--sm { width: 20px; height: 20px; font-size: .55rem; }
.clr__btn .av { margin-right: 2px; }
.who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.who > div { display: grid; min-width: 0; line-height: 1.25; }
.who b { font-family: var(--font-head); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who small { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clr__pop { display: grid; gap: 10px; }
.clr__pop p { margin: 0; }
.clr__pop .who { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.clr__pop .clr__horsligne { display: inline-flex; align-items: center; gap: 8px; justify-self: start; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--a-rouge); }
.clr__horsligne::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; animation: blink 1.2s infinite; }
.clr__profils button { flex: 1; justify-content: center; }
.clr__acts { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.clr__login { width: 100%; }
.doc__foot a { font-family: var(--font-doc); font-weight: 700; font-size: .84rem; padding: 6px 12px; border: 1px solid var(--paper-ink); color: var(--paper-ink); text-decoration: none; }
.doc__foot a:hover { background: var(--paper-ink); color: var(--paper); }
.comm__by { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .04em; color: var(--text-3); margin-bottom: 4px; }
.compte { display: grid; gap: 10px; padding: 16px 18px; border: 1px solid var(--line-2); background: var(--surface); }
.compte p { color: var(--text-2); font-size: .9rem; }

.guard { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 28px; align-items: center; padding: clamp(24px, 4vw, 44px); border: 1px solid var(--line-2); background: var(--surface); position: relative; overflow: hidden; }
.guard::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: repeating-linear-gradient(-45deg, var(--a-rouge) 0 10px, transparent 10px 20px); }
.guard__lock { width: 110px; height: 110px; color: var(--line-2); }
.guard__lock svg { width: 100%; height: 100%; }
.guard__body { display: grid; gap: 14px; justify-items: start; margin-top: 12px; color: var(--text-2); max-width: 62ch; }
.st-resume { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 2fr); }
.st-repart { gap: 10px; }
.st-repart .stack { height: 10px; }
.st-alerte { display: grid; gap: 16px; padding: 20px; border: 1px solid var(--line-2); background: var(--surface); }
.st-alerte p { color: var(--text-2); max-width: 70ch; }
.st-table td { vertical-align: middle; }
.st-table .select { min-height: 38px; width: auto; min-width: 190px; }
.st-table .chip { white-space: nowrap; }
.st-by { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: .64rem; color: var(--text-3); }
.st-date { font-size: .8rem; white-space: nowrap; }
.st-list { list-style: none; display: grid; gap: 8px; }
.st-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px 18px; flex-wrap: wrap; padding: 14px 16px; border: 1px solid var(--line-2); background: var(--surface); }
.st-item > div:first-child { display: grid; gap: 6px; min-width: 0; flex: 1 1 240px; justify-items: start; }
.st-item b { font-family: var(--font-head); font-weight: 600; }
.st-item small { font-family: var(--font-mono); font-size: .68rem; color: var(--text-3); }
.st-item.is-past { opacity: .6; }
.st-extrait { color: var(--text-2); font-size: .86rem; }
.st-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.st-journal { list-style: none; display: grid; border-top: 1px solid var(--line-2); max-height: 480px; overflow-y: auto; }
.st-journal li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .9rem; color: var(--text-2); }
.st-journal time { font-size: .76rem; color: var(--text-3); }
.st-journal b { color: var(--text); font-weight: 600; }
@media (max-width: 960px) {
  .st-resume { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .st-repart { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .guard { grid-template-columns: minmax(0, 1fr); }
  .guard__lock { width: 64px; height: 64px; }
  .st-resume { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-journal li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
.table-wrap { position: relative; }
@media (max-width: 1440px) { .bar .brand__sub { display: none; } }

.toast { pointer-events: auto; }
.toast__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.toast__acts button { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--text); }
.toast__acts button:first-child { background: var(--signal); border-color: var(--signal); color: var(--signal-ink); }
.setting .seg button { min-height: 32px; }
.hero__copy { grid-template-columns: minmax(0, 1fr); }

/* ==========================================================================
   28. BARRE DE NAVIGATION (écrans moyens et petits) & ANIMATIONS
   ========================================================================== */
.navstrip { display: none; }
@media (max-width: 1220px) {
  .navstrip {
    display: flex; gap: 2px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    padding-inline: var(--gutter);
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2);
    border-bottom: 1px solid var(--line);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
  }
  .navstrip::-webkit-scrollbar { display: none; }
  .navstrip a {
    position: relative; flex: none; padding: 11px 12px 10px;
    font-family: var(--font-head); font-weight: 500; font-size: .84rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-2); text-decoration: none; white-space: nowrap; transition: color .2s;
  }
  .navstrip a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; background: var(--signal); transform: scaleX(0); transition: transform .3s var(--ease); }
  .navstrip a:hover { color: var(--text); }
  .navstrip a[aria-current="page"] { color: var(--text); }
  .navstrip a[aria-current="page"]::after { transform: scaleX(1); }
  .menu-btn { display: none; }
}
@media (max-width: 640px) {
  .menu-btn { display: inline-grid; }
}

/* ----- Apparitions au défilement (activées par le script) ----- */
@keyframes rv-up { from { opacity: 0; transform: translateY(22px); } }
@keyframes rv-pop { from { opacity: 0; transform: scale(.9); } }
@keyframes rv-left { from { opacity: 0; transform: translateX(-24px); } }
@keyframes rv-right { from { opacity: 0; transform: translateX(24px); } }
html[data-motion="normal"] .rv-wait > * { opacity: 0; }
html[data-motion="normal"] .rv-wait-b { opacity: 0; transform: translateY(26px); }
html[data-motion="normal"] .rv-go > * { animation: rv-up .6s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
html[data-motion="normal"] .rv-go-b { animation: rv-up .75s var(--ease) backwards; }
html[data-motion="normal"] .badges.rv-go > *, html[data-motion="normal"] .seen-grid.rv-go > * { animation-name: rv-pop; }

/* ----- En-tête de page : titre peint au pochoir ----- */
@keyframes sign-paint { from { clip-path: inset(0 100% 0 0); filter: blur(8px); } 70% { filter: blur(0); } to { clip-path: inset(0 0 0 0); } }
@keyframes sign-scan { from { transform: translateY(-100%); opacity: 1; } to { transform: translateY(100%); opacity: 0; } }
@keyframes code-drift { from { transform: translateY(-58%); } to { transform: translateY(-52%) translateX(-14px); } }
@keyframes code-in { from { opacity: 0; } }
html[data-motion="normal"] .sign__title { animation: sign-paint 1.1s var(--ease) .1s backwards; }
html[data-motion="normal"] .sign .eyebrow { animation: rv-left .7s var(--ease) backwards; }
html[data-motion="normal"] .sign__lede { animation: rv-up .8s var(--ease) .45s backwards; }
html[data-motion="normal"] .sign__meta div { animation: rv-right .5s var(--ease) backwards; }
html[data-motion="normal"] .sign__meta div:nth-child(1) { animation-delay: .5s; }
html[data-motion="normal"] .sign__meta div:nth-child(2) { animation-delay: .62s; }
html[data-motion="normal"] .sign__meta div:nth-child(3) { animation-delay: .74s; }
html[data-motion="normal"] .sign__meta div:nth-child(4) { animation-delay: .86s; }
html[data-motion="normal"] .sign__code { animation: code-in 1.6s ease backwards, code-drift 14s ease-in-out 1.6s infinite alternate; }
.sign::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100%; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent 0, color-mix(in srgb, var(--alert) 14%, transparent) 48%, transparent 52%);
}
html[data-motion="normal"] .sign::after { animation: sign-scan 1.6s ease-out .2s; }

/* ----- Accueil ----- */
@keyframes glitch {
  0%, 100% { clip-path: inset(0 0 0 0); transform: none; }
  20% { clip-path: inset(10% 0 55% 0); transform: translateX(-6px); }
  40% { clip-path: inset(60% 0 8% 0); transform: translateX(5px); }
  60% { clip-path: inset(30% 0 35% 0); transform: translateX(-3px); }
}
html[data-motion="normal"] .hero__title { animation: rv-up .9s var(--ease) backwards, glitch .45s steps(2) 1s, glitch .3s steps(2) 7s; }
html[data-motion="normal"] .hero__motto { animation: rv-left .7s var(--ease) .35s backwards; }
html[data-motion="normal"] .hero__lede { animation: rv-up .8s var(--ease) .5s backwards; }
html[data-motion="normal"] .hero__cta { animation: rv-up .8s var(--ease) .65s backwards; }
html[data-motion="normal"] .dial { animation: rv-pop 1.2s var(--ease) .2s backwards; }
html[data-motion="normal"] .ticker { animation: rv-up .6s var(--ease) backwards; }

/* ----- Partout ----- */
.hazard { animation: hazard-move 2.6s linear infinite; }
@keyframes brand-spin { from { transform: rotate(-240deg); } }
html[data-motion="normal"] .bar .brand svg { animation: brand-spin 1.4s var(--ease) backwards; }
html[data-motion="normal"] .ftr__mark { animation: spin 160s linear infinite; }
html[data-motion="normal"] .bar-progress i { animation: fill-bar 1.2s var(--ease) .3s backwards; }
@keyframes fill-bar { from { width: 0; } }

/* ----- Contenus qui changent (onglets, questions, consignes…) ----- */
html[data-motion="normal"] .dept__panel > * { animation: rv-up .5s var(--ease) backwards; }
html[data-motion="normal"] .dept__panel > :nth-child(2) { animation-delay: .08s; }
html[data-motion="normal"] .dept__panel > :nth-child(3) { animation-delay: .16s; }
html[data-motion="normal"] .ladder li { animation: rv-left .45s var(--ease) backwards; }
html[data-motion="normal"] .ladder li:nth-child(2) { animation-delay: .05s; }
html[data-motion="normal"] .ladder li:nth-child(3) { animation-delay: .1s; }
html[data-motion="normal"] .ladder li:nth-child(4) { animation-delay: .15s; }
html[data-motion="normal"] .ladder li:nth-child(5) { animation-delay: .2s; }
html[data-motion="normal"] .ladder li:nth-child(n+6) { animation-delay: .25s; }
html[data-motion="normal"] .proc__list li { animation: rv-left .45s var(--ease) backwards; }
html[data-motion="normal"] .proc__list li:nth-child(2) { animation-delay: .08s; }
html[data-motion="normal"] .proc__list li:nth-child(3) { animation-delay: .16s; }
html[data-motion="normal"] .proc__code { animation: rv-left .5s var(--ease) backwards; }
html[data-motion="normal"] .quiz__q { animation: rv-up .45s var(--ease) backwards; }
html[data-motion="normal"] .quiz__opt { animation: rv-right .45s var(--ease) backwards; }
html[data-motion="normal"] .quiz__opt:nth-child(2) { animation-delay: .07s; }
html[data-motion="normal"] .quiz__opt:nth-child(3) { animation-delay: .14s; }
html[data-motion="normal"] .quiz__opt:nth-child(4) { animation-delay: .21s; }
html[data-motion="normal"] .quiz__opt:nth-child(5) { animation-delay: .28s; }
html[data-motion="normal"] .zone-panel > * { animation: rv-up .45s var(--ease) backwards; }
html[data-motion="normal"] .zone-panel > :nth-child(2) { animation-delay: .05s; }
html[data-motion="normal"] .zone-panel > :nth-child(n+3) { animation-delay: .1s; }
html[data-motion="normal"] .m914-out.is-ready .m914__res { animation: rv-up .5s var(--ease) backwards; }
html[data-motion="normal"] .badge.is-got .badge__medal { animation: medal .9s cubic-bezier(.2, 1.6, .4, 1) backwards; }
@keyframes medal { from { transform: scale(.3) rotate(-30deg); opacity: 0; } }
html[data-motion="normal"] .evt-hero .cd div { animation: rv-pop .6s var(--ease) backwards; }

/* ----- Plan : salles critiques qui clignotent ----- */
html[data-motion="normal"] .m-room[style*="--d4"] .m-pip { animation: blink 1.1s ease-in-out infinite; }

/* ----- Terminal : balayage de l'écran cathodique ----- */
html[data-motion="normal"] .crt { animation: crt-on .9s ease-out backwards, crt-flicker 6s steps(1) 1s infinite; }
@keyframes crt-on { 0% { filter: brightness(3) saturate(0); transform: scaleY(.02); } 45% { transform: scaleY(1); filter: brightness(1.6); } 100% { filter: none; } }
@keyframes crt-flicker { 0%, 100% { opacity: 1; } 42% { opacity: .96; } 43% { opacity: 1; } 71% { opacity: .97; } 72% { opacity: 1; } }

/* ==========================================================================
   29. MODE STAFF (bandeau, sas, console) & NOUVELLES ANIMATIONS
   ========================================================================== */
/* ----- Bandeau du mode staff, en haut de chaque page ----- */
.staffbar {
  position: relative; z-index: 61; overflow: hidden;
  font-family: var(--font-mono); font-size: .72rem; color: var(--text-2);
  background: linear-gradient(90deg, color-mix(in srgb, var(--signal) 14%, var(--bg)), var(--bg) 55%);
  border-bottom: 1px solid color-mix(in srgb, var(--signal) 55%, transparent);
}
.staffbar::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: repeating-linear-gradient(-45deg, var(--signal) 0 8px, transparent 8px 16px);
  animation: hazard-move 1.6s linear infinite;
}
.staffbar__in { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding-block: 9px 7px; }
.staffbar__tag {
  display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px;
  background: var(--signal); color: var(--signal-ink); font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
}
.staffbar__tag i { width: 7px; height: 7px; border-radius: 50%; background: #B42318; animation: blink 1s ease-in-out infinite; }
.staffbar__who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--text); }
.staffbar__who b { font-family: var(--font-head); font-weight: 600; font-size: .86rem; letter-spacing: .02em; max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staffbar__ctl { display: inline-flex; align-items: center; gap: 6px; letter-spacing: .12em; text-transform: uppercase; }
.staffbar__sel {
  min-height: 30px; padding: 3px 8px; font: inherit; font-size: .74rem; letter-spacing: .03em; text-transform: none;
  color: var(--text); background: var(--bg-2); border: 1px solid color-mix(in srgb, var(--signal) 45%, var(--line-2)); border-radius: 0;
}
.staffbar__sel:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }
.staffbar__acts { display: flex; gap: 6px; margin-left: auto; }
.staffbar__btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; min-height: 30px; padding: 4px 10px;
  font: inherit; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; cursor: pointer;
  color: var(--signal); background: transparent; border: 1px solid var(--signal); transition: background .2s, color .2s;
}
.staffbar__btn:hover { background: var(--signal); color: var(--signal-ink); }
@keyframes staff-drop { from { transform: translateY(-100%); opacity: 0; } }
html[data-motion="normal"] .staffbar:not([hidden]) { animation: staff-drop .5s var(--ease); }
@media (max-width: 640px) {
  .staffbar__in { gap: 6px; padding-block: 8px 6px; }
  .staffbar__who, .staffbar__ctl span { display: none; }
  .staffbar__tag { padding: 3px 8px; letter-spacing: .12em; }
  .staffbar__sel { max-width: 34vw; }
  .staffbar__acts { margin-left: auto; }
  .staffbar__btn { padding: 4px 8px; letter-spacing: .08em; }
}

/* Cadre lumineux : on sait toujours qu'on est en mode staff */
.cadre-staff { display: none; }
html[data-staff="on"] .cadre-staff {
  display: block; position: fixed; inset: 0; z-index: 95; pointer-events: none;
  border: 2px solid color-mix(in srgb, var(--signal) 70%, transparent);
  box-shadow: inset 0 0 36px color-mix(in srgb, var(--signal) 10%, transparent);
}
.cadre-staff span {
  position: absolute; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); padding: 3px 9px;
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--signal-ink); background: var(--signal);
}
@keyframes cadre { 50% { border-color: color-mix(in srgb, var(--signal) 35%, transparent); } }
html[data-motion="normal"][data-staff="on"] .cadre-staff { animation: cadre 3s ease-in-out infinite; }
html[data-staff="on"] .clr__btn { border-color: var(--signal); color: var(--signal); }

/* Menu « Hab. », accueil, pied de page */
.clr__staff { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: .68rem !important; letter-spacing: .16em; text-transform: uppercase; color: var(--signal) !important; }
.clr__staff i { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 8px var(--signal); animation: blink 1.2s infinite; }
.clr__staff-link, .ftr__staff, .status__lock {
  display: inline-flex; align-items: center; gap: 7px; justify-self: start;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); text-decoration: none;
}
.clr__staff-link svg, .ftr__staff svg, .status__lock svg { width: 13px; height: 13px; flex: none; }
.clr__staff-link:hover, .ftr__staff:hover { color: var(--signal); }
.clr__staff-link { padding-top: 10px; border-top: 1px solid var(--line); width: 100%; }
.status__staff { display: grid; gap: 8px; padding-top: 10px; border-top: 1px dashed color-mix(in srgb, var(--signal) 50%, transparent); }

/* ----- Page staff : l'en-tête devient celui de la console ----- */
.cons-tag { display: none; }
body[data-page="staff"] .bar .nav, body[data-page="staff"] .navstrip { display: none; }
body[data-page="staff"] .cons-tag { display: flex; align-items: center; gap: 16px; margin-right: auto; min-width: 0; }
.cons-tag__lbl { flex: none; padding: 3px 10px; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--signal-ink); background: var(--signal); }
.cons-tag__back { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-family: var(--font-head); font-size: .84rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); text-decoration: none; white-space: nowrap; }
.cons-tag__back svg { width: 16px; height: 16px; flex: none; transition: transform .2s var(--ease); }
.cons-tag__back:hover { color: var(--text); }
.cons-tag__back:hover svg { transform: translateX(-3px); }
@media (max-width: 760px) { .cons-tag__lbl { display: none; } }
@media (max-width: 420px) { .cons-tag__back { font-size: 0; gap: 0; } .cons-tag__back svg { width: 20px; height: 20px; } }

/* ----- Sas d'accès ----- */
.sas {
  position: relative; overflow: hidden; display: grid; align-items: center; min-height: min(760px, calc(100vh - 110px));
  border-bottom: 1px solid var(--line);
  background: radial-gradient(ellipse at 28% 50%, color-mix(in srgb, var(--signal) 7%, transparent), transparent 60%);
}
.sas__grille {
  position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(ellipse at 28% 50%, #000 10%, transparent 65%); mask-image: radial-gradient(ellipse at 28% 50%, #000 10%, transparent 65%);
}
.sas__in { position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 6vw, 80px); align-items: center; padding-block: clamp(36px, 7vw, 88px); }
.sas__scan { position: relative; width: min(100%, 340px); aspect-ratio: 1; margin-inline: auto; display: grid; place-items: center; }
.sas__ring { position: absolute; border-radius: 50%; border: 1px dashed var(--line-2); transition: border-color .3s; }
.sas__ring--1 { inset: 0; border: 2px solid color-mix(in srgb, var(--signal) 25%, transparent); border-top-color: var(--signal); border-right-color: var(--signal); }
.sas__ring--2 { inset: 11%; }
.sas__ring--3 { inset: 22%; border-style: dotted; border-color: color-mix(in srgb, var(--signal) 45%, transparent); }
.sas__emblem { position: relative; width: 44%; color: var(--text-2); transition: color .3s; }
.sas__emblem svg { display: block; width: 100%; height: auto; }
.sas__beam { position: absolute; left: 12%; right: 12%; top: 50%; height: 2px; background: linear-gradient(90deg, transparent, var(--signal), transparent); box-shadow: 0 0 18px var(--signal); }
@keyframes sas-beam { 0%, 100% { top: 16%; opacity: .25; } 50% { top: 84%; opacity: 1; } }
html[data-motion="normal"] .sas__ring--1 { animation: spin 7s linear infinite; }
html[data-motion="normal"] .sas__ring--2 { animation: spin 26s linear infinite reverse; }
html[data-motion="normal"] .sas__ring--3 { animation: spin 13s linear infinite; }
html[data-motion="normal"] .sas__beam { animation: sas-beam 2.8s ease-in-out infinite; }
html[data-motion="normal"] .sas__scan { animation: rv-pop 1s var(--ease) backwards; }
.sas.is-refus { --signal: var(--a-rouge); }
.sas.is-refus .sas__emblem { color: var(--a-rouge); }
html[data-motion="normal"] .sas.is-refus .sas__body { animation: shake .3s 2; }
.sas__panel { display: grid; gap: 16px; justify-items: start; min-width: 0; }
.sas__title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(3rem, 8vw, 5.8rem); line-height: .85; }
html[data-motion="normal"] .sas__title { animation: sign-paint 1s var(--ease) .1s backwards; }
html[data-motion="normal"] .sas .eyebrow { animation: taper 1s steps(26) .1s backwards; }
html[data-motion="normal"] .sas__lede { animation: rv-up .7s var(--ease) .35s backwards; }
html[data-motion="normal"] .sas__body { animation: rv-up .7s var(--ease) .5s backwards; }
.sas__lede { max-width: 54ch; font-size: 1.05rem; color: var(--text-2); }
.sas__body {
  position: relative; display: grid; gap: 14px; justify-items: start; width: 100%; max-width: 580px; padding: 22px 20px 20px;
  border: 1px solid var(--line-2); background: color-mix(in srgb, var(--surface) 88%, transparent);
}
.sas__body::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: repeating-linear-gradient(-45deg, var(--signal) 0 8px, transparent 8px 16px); }
.sas__body > p { color: var(--text-2); }
.sas__etat { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: .72rem !important; letter-spacing: .16em; text-transform: uppercase; color: var(--signal) !important; }
.sas__etat i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; animation: blink 1.2s infinite; }
.sas__etat--ok { color: var(--a-vert) !important; }
.sas__etat--refus { color: var(--a-rouge) !important; }
.sas__note { font-size: .82rem !important; color: var(--text-3) !important; max-width: 60ch; }
@media (max-width: 860px) {
  .sas { min-height: 0; }
  .sas__in { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .sas__scan { width: min(52vw, 210px); }
}

/* ----- Console staff (adm) ----- */
body[data-page="staff"] .staffbar, body[data-page="staff"] .ftr { display: none; }
.adm {
  display: grid; grid-template-columns: 248px minmax(0, 1fr); align-items: start; min-height: calc(100vh - var(--barre, 72px)); border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, var(--bg-2) 0 247px, var(--line) 247px 248px, transparent 248px);
}
/* Menu collant : sa hauteur suit son contenu, il défile seulement si l'écran est trop bas */
.adm__side {
  position: sticky; top: var(--barre, 72px); z-index: 5; display: flex; flex-direction: column; gap: 16px;
  max-height: calc(100vh - var(--barre, 72px)); min-width: 0; padding: 22px 14px 18px; overflow-y: auto;
}
.adm__id { display: grid; gap: 10px; padding: 0 4px 16px; border-bottom: 1px solid var(--line); min-width: 0; }
.adm__badge { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--signal-ink); background: var(--signal); }
.adm__badge i { width: 7px; height: 7px; border-radius: 50%; background: #B42318; animation: blink 1s ease-in-out infinite; }
.adm__nav { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adm__nav button {
  position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%;
  padding: 10px 10px 10px 12px; text-align: left; cursor: pointer; overflow: hidden;
  font-family: var(--font-head); font-weight: 500; font-size: .9rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-2); background: none; border: 0; border-left: 3px solid transparent; transition: color .2s, background .2s, border-color .2s;
}
.adm__nav button svg { width: 18px; height: 18px; opacity: .75; }
.adm__nav button:hover { color: var(--text); background: var(--surface); }
.adm__nav button[aria-selected="true"] { color: var(--text); background: color-mix(in srgb, var(--signal) 11%, transparent); border-left-color: var(--signal); }
.adm__nav button[aria-selected="true"] svg { opacity: 1; color: var(--signal); }
.adm__nav button:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }
.adm__pill { min-width: 22px; padding: 1px 6px; text-align: center; font-family: var(--font-mono); font-size: .64rem; font-weight: 500; letter-spacing: .04em; color: var(--text-3); border: 1px solid var(--line-2); }
.adm__pill:empty { display: none; }
.adm__pill[data-cons-alerte] { color: var(--c); border-color: var(--c); }
.adm__out { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.adm__main { min-width: 0; padding: 26px clamp(16px, 3vw, 44px) 72px; }
.adm__load { color: var(--text-3); font-family: var(--font-mono); font-size: .8rem; }
.adm__panel { display: grid; gap: 22px; min-width: 0; }
.adm__head { display: grid; gap: 8px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.adm__title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1; margin: 2px 0 0; }
.adm__lede { max-width: 72ch; color: var(--text-2); }
.adm__lede code { font-family: var(--font-mono); font-size: .88em; color: var(--text); background: var(--bg-2); padding: 1px 5px; }
@keyframes panel-in { from { opacity: 0; transform: translateY(12px); } }
html[data-motion="normal"] .adm__panel:not([hidden]) { animation: panel-in .4s var(--ease); }
html[data-motion="normal"] .adm__panel:not([hidden]) .adm__title { animation: sign-paint .7s var(--ease) .05s backwards; }

/* Tableau de bord */
.adm__stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.adm__stat { display: grid; gap: 6px; align-content: start; padding: 14px; text-align: left; background: var(--bg-2); border: 0; color: var(--text); cursor: pointer; transition: background .2s; }
.adm__stat:hover { background: var(--surface-2); }
.adm__stat b { font-size: 1.7rem; font-weight: 500; line-height: 1; }
.adm__stat span { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.adm__repart { grid-column: 1 / -1; display: grid; gap: 10px; padding: 14px; background: var(--bg-2); }
.adm__repart .stack { height: 10px; }
.adm__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.adm__card { position: relative; display: grid; gap: 10px; align-content: start; min-width: 0; padding: 18px; border: 1px solid var(--line-2); background: var(--surface); }
.adm__card--alerte { --c: var(--alert); justify-items: start; border-color: color-mix(in srgb, var(--c) 55%, var(--line-2)); background: linear-gradient(135deg, color-mix(in srgb, var(--c) 14%, var(--surface)), var(--surface) 65%); }
.adm__card--alerte > p:not(.adm__alerte) { color: var(--text-2); }
.adm__alerte { font-family: var(--font-display); font-weight: 900; font-size: 2.4rem; line-height: 1; text-transform: uppercase; color: var(--c); text-shadow: 0 0 24px color-mix(in srgb, var(--c) 40%, transparent); }
.adm__raccourcis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.adm__rac { position: relative; overflow: hidden; display: grid; gap: 2px; padding: 12px; text-align: left; color: var(--text); background: var(--bg-2); border: 1px solid var(--line-2); cursor: pointer; transition: border-color .2s, transform .25s var(--ease); }
.adm__rac b { font-family: var(--font-head); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.adm__rac span { font-size: .8rem; color: var(--text-3); }
.adm__rac:hover { border-color: var(--signal); transform: translateY(-2px); }
.st-mini { list-style: none; display: grid; gap: 12px; }
.st-mini li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 10px; align-items: start; font-size: .88rem; color: var(--text-2); }
.st-mini li.muted { display: block; }
.st-mini li > i { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--c, var(--signal)); box-shadow: 0 0 8px var(--c, var(--signal)); }
.st-mini b { color: var(--text); font-weight: 600; }
.st-mini small { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: .68rem; color: var(--text-3); }

/* Alerte : 5 cartes */
.al-choix { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.al-carte {
  --c: var(--text-3); position: relative; overflow: hidden; display: grid; align-content: start; gap: 6px; min-height: 168px; padding: 16px 14px 14px;
  text-align: left; cursor: pointer; color: var(--text); background: var(--bg-2); border: 1px solid var(--line-2); border-top: 4px solid var(--c);
  transition: border-color .2s, background .2s, transform .25s var(--ease), box-shadow .25s;
}
.al-carte:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 60%, var(--line-2)); }
.al-carte[aria-checked="true"] { background: color-mix(in srgb, var(--c) 14%, var(--bg-2)); border-color: var(--c); box-shadow: 0 0 0 1px var(--c), 0 10px 30px color-mix(in srgb, var(--c) 18%, transparent); }
.al-carte:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.al-carte__code { font-family: var(--font-display); font-weight: 900; font-size: 1.5rem; line-height: 1; text-transform: uppercase; color: var(--c); }
.al-carte__titre { font-family: var(--font-head); font-weight: 600; letter-spacing: .02em; }
.al-carte__txt { font-size: .8rem; line-height: 1.45; color: var(--text-2); }
.al-carte__actuel { position: absolute; top: 10px; right: 10px; padding: 1px 7px; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bg); background: var(--c); }
.al-bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 16px 18px; border: 1px solid var(--line-2); background: var(--surface); }
.al-bas p { color: var(--text-2); max-width: 70ch; }

/* Formulaires en deux colonnes */
.adm__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 28px; align-items: start; }
.adm__cols > div > .label { margin-bottom: 10px; }
.adm__form { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--line-2); background: var(--surface); }
.adm__form .field > span { display: flex; gap: 6px; align-items: baseline; }
.adm__duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.adm__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.adm__erreur { min-height: 0; color: var(--a-rouge); font-family: var(--font-mono); font-size: .78rem; }
.adm__erreur:empty { display: none; }
.st-list { list-style: none; display: grid; gap: 8px; }
.st-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px 16px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--line-2); background: var(--surface); }
.st-item > div:first-child { display: grid; gap: 5px; min-width: 0; flex: 1 1 220px; justify-items: start; }
.st-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.st-acts .btn--sm { min-height: 32px; padding: 4px 10px; font-size: .74rem; }

/* Membres : tableau, en cartes sur petit écran */
.st-table td { vertical-align: middle; }
.st-table .select { min-height: 38px; width: auto; min-width: 180px; }
.st-table .chip { white-space: nowrap; }

/* Fiches */
.adm__cols--fiche { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.adm__apercu { position: sticky; top: calc(var(--barre, 72px) + 16px); display: grid; gap: 12px; min-width: 0; }
.adm__apercu .output pre { max-height: 220px; }
.adm__registre { display: grid; gap: 12px; padding-top: 8px; border-top: 1px solid var(--line); }
.fiches { list-style: none; display: grid; gap: 8px; }
.fiches > .muted { padding: 12px 0; }
.fiche {
  --dc: var(--line-2); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; align-items: center; gap: 10px 18px;
  padding: 12px 14px; border: 1px solid var(--line-2); border-left: 4px solid var(--dc); background: var(--surface);
}
.fiche__id { display: grid; gap: 2px; min-width: 0; }
.fiche__id b { font-family: var(--font-head); font-weight: 600; font-size: 1.02rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fiche__id small { font-size: .8rem; color: var(--text-3); }
.fiche__mat { font-size: .68rem; letter-spacing: .1em; color: var(--text-3); }
.fiche__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; font-size: .82rem; }
.fiche__lien { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); }
.fiche__rbx { font-size: .7rem; color: var(--text-3); }

@media (max-width: 1180px) {
  .adm__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .al-choix { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .adm__cols, .adm__cols--fiche { grid-template-columns: minmax(0, 1fr); }
  .adm__apercu { position: static; max-width: 560px; }
  .fiche { grid-template-columns: minmax(0, 1fr) auto; }
  .fiche__meta { grid-column: 1; }
  .fiche .st-acts { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 960px) {
  .adm { grid-template-columns: minmax(0, 1fr); background: none; }
  .adm__side { position: static; max-height: none; overflow: visible; background: var(--bg-2); padding: 14px var(--gutter) 0; gap: 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  .adm__id { grid-template-columns: auto minmax(0, 1fr); align-items: center; padding: 0 0 12px; }
  .adm__nav {
    position: sticky; top: var(--barre, 72px); z-index: 6; flex-direction: row; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); background: var(--bg); border-bottom: 1px solid var(--line);
  }
  .adm__nav::-webkit-scrollbar { display: none; }
  .adm__nav button { flex: none; width: auto; grid-template-columns: 16px auto auto; padding: 12px 12px 10px; border-left: 0; border-bottom: 3px solid transparent; }
  .adm__nav button[aria-selected="true"] { border-bottom-color: var(--signal); }
  .adm__out { display: flex; flex-wrap: wrap; margin: 0; padding: 12px 0; border-top: 0; }
  .adm__main { padding-top: 20px; }
  .adm__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .adm__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .al-choix { grid-template-columns: minmax(0, 1fr); }
  .al-carte { min-height: 0; }
  .adm__duo { grid-template-columns: minmax(0, 1fr); }
  .fiche { grid-template-columns: minmax(0, 1fr); }
  .fiche .st-acts { grid-column: 1; grid-row: auto; }
  /* Tableau des membres en cartes */
  .adm__table { overflow: visible; border: 0; }
  .st-table, .st-table tbody, .st-table tr, .st-table td { display: block; width: 100%; min-width: 0; background: none; }
  .st-table td:first-child { white-space: normal; }
  .st-table .who b, .st-table .who small { white-space: normal; }
  .st-table thead { display: none; }
  .st-table tr { margin-bottom: 10px; padding: 12px 14px; border: 1px solid var(--line-2); background: var(--surface); }
  .st-table td { padding: 6px 0; border: 0; }
  .st-table td[data-label]:not([data-label=""])::before { content: attr(data-label); display: block; margin-bottom: 4px; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
  .st-table td[data-label=""]:empty { display: none; }
  .st-table .select { width: 100%; min-width: 0; }
}
@media (max-width: 420px) { .adm__raccourcis { grid-template-columns: minmax(0, 1fr); } }

/* ----- Écran « Accès autorisé » / « Mode staff désactivé » ----- */
.acces { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: 16px; pointer-events: none; }
.acces--off { --signal: #C9D4D2; }
.acces__vol { position: absolute; left: 0; right: 0; height: 50.5%; background: repeating-linear-gradient(0deg, #0E1518 0 3px, #121C21 3px 6px); }
.acces__vol--h { top: 0; border-bottom: 3px solid var(--signal); animation: vol-h 2.1s var(--ease) both; }
.acces__vol--b { bottom: 0; border-top: 3px solid var(--signal); animation: vol-b 2.1s var(--ease) both; }
.acces__vol--h::after, .acces__vol--b::after { content: ""; position: absolute; left: 0; right: 0; height: 10px; background: repeating-linear-gradient(-45deg, var(--signal) 0 10px, transparent 10px 20px); opacity: .7; }
.acces__vol--h::after { top: 18%; }
.acces__vol--b::after { bottom: 18%; }
@keyframes vol-h { 0% { transform: translateY(-100%); } 18%, 74% { transform: none; } 100% { transform: translateY(-100%); } }
@keyframes vol-b { 0% { transform: translateY(100%); } 18%, 74% { transform: none; } 100% { transform: translateY(100%); } }
.acces__c { position: relative; z-index: 1; display: grid; justify-items: center; gap: 10px; text-align: center; animation: acces-c 2.1s var(--ease) both; }
@keyframes acces-c { 0%, 16% { opacity: 0; transform: scale(.92); } 26%, 70% { opacity: 1; transform: none; } 82%, 100% { opacity: 0; transform: scale(1.04); } }
.acces--off .acces__vol, .acces--off .acces__c { animation-duration: 1.6s; }
.acces__ring { display: grid; place-items: center; width: 108px; height: 108px; border-radius: 50%; color: var(--signal); border: 2px solid var(--signal); box-shadow: 0 0 40px color-mix(in srgb, var(--signal) 35%, transparent), inset 0 0 24px color-mix(in srgb, var(--signal) 20%, transparent); animation: spin-in .9s var(--ease) .3s backwards; }
.acces__ring svg { width: 68%; height: auto; }
.acces__k { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); }
.acces__t { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.4rem, 9vw, 5.4rem); line-height: .9; text-transform: uppercase; color: var(--signal); text-shadow: 0 0 34px color-mix(in srgb, var(--signal) 45%, transparent); animation: tampon .55s cubic-bezier(.2, 1.5, .4, 1) .45s backwards; }
@keyframes tampon { from { transform: scale(1.9) rotate(-5deg); opacity: 0; } }
.acces__s { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }

/* ----- Alarme : changement du niveau d'alerte ----- */
.alarme { position: fixed; inset: 0; z-index: 480; display: grid; place-items: center; overflow: hidden; pointer-events: none; animation: alarme-fond 2.9s ease both; transition: opacity .5s; }
.alarme.is-out { opacity: 0; }
@keyframes alarme-fond {
  0% { background: transparent; } 8% { background: color-mix(in srgb, var(--c) 32%, transparent); } 16% { background: color-mix(in srgb, var(--c) 6%, transparent); }
  24% { background: color-mix(in srgb, var(--c) 28%, transparent); } 40%, 80% { background: color-mix(in srgb, var(--c) 10%, transparent); } 100% { background: transparent; }
}
.alarme__gyro { position: absolute; top: 50%; width: 150vmax; height: 150vmax; margin-top: -75vmax; border-radius: 50%; opacity: .55; background: conic-gradient(from 0deg, transparent 0 300deg, color-mix(in srgb, var(--c) 50%, transparent) 348deg, transparent 360deg); animation: spin 1.1s linear infinite; }
.alarme__gyro--g { left: -75vmax; }
.alarme__gyro--d { right: -75vmax; animation-direction: reverse; }
.alarme__bande { position: relative; width: 100%; display: grid; justify-items: center; gap: 6px; padding: 22px 16px; text-align: center; background: color-mix(in srgb, #0C1215 84%, transparent); border-block: 3px solid var(--c); box-shadow: 0 0 60px color-mix(in srgb, var(--c) 40%, transparent); animation: bande 2.9s var(--ease) both; }
@keyframes bande { 0% { transform: scaleY(0); } 12%, 84% { transform: none; } 100% { transform: scaleY(0); } }
.alarme__k { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--text-2); }
.alarme__t { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.6rem, 10vw, 6rem); line-height: .9; text-transform: uppercase; color: var(--c); text-shadow: 0 0 30px color-mix(in srgb, var(--c) 55%, transparent); animation: blink .45s steps(1) .3s 3; }
.alarme__s { font-family: var(--font-head); font-size: 1.05rem; letter-spacing: .06em; color: var(--text); }

/* ----- Partout : progression, onde, lueur, balise, caviardage ----- */
.lecture { position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; pointer-events: none; }
.lecture i { display: block; height: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--signal), var(--alert)); box-shadow: 0 0 8px color-mix(in srgb, var(--signal) 60%, transparent); }
.seg button { position: relative; overflow: hidden; }
.onde { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.onde i { position: absolute; border-radius: 50%; background: currentColor; opacity: .22; transform: scale(0); animation: onde .65s ease-out forwards; }
@keyframes onde { to { transform: scale(1); opacity: 0; } }
html[data-motion="normal"] .lueur:not(.adm__card--alerte) { background-image: radial-gradient(240px circle at var(--lx) var(--ly), color-mix(in srgb, var(--signal) 8%, transparent), transparent 70%); }
@keyframes balise { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--alert) 70%, transparent); } to { box-shadow: 0 0 0 10px transparent; } }
html[data-motion="normal"]:is([data-alert="orange"], [data-alert="rouge"], [data-alert="noir"]) .alert-chip i { animation: balise 1s ease-out infinite, blink .5s ease-in-out infinite; }
@keyframes rd-glisse { to { background-position: 8.49px 0; } }
html[data-motion="normal"] .rd:hover { animation: rd-glisse .5s linear infinite; }
@keyframes taper { from { clip-path: inset(0 100% 0 0); } }
html[data-motion="normal"] .sign .eyebrow, html[data-motion="normal"] .hero .eyebrow { animation: taper 1.1s steps(28) .15s backwards; }
.neige { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; transition: opacity .6s; }
.hero__in { position: relative; z-index: 1; }
html[data-motion="normal"] .ftr__staff svg { animation: blink 2.4s ease-in-out infinite; }

/* ----- Carte d'identité : photo Roblox ou Discord ----- */
.idcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.idcard__photo b { z-index: 1; }
.idcard__photo.has-photo svg { opacity: 0; }
.idcard__photo.has-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 60%, rgb(0 0 0 / .18)), repeating-linear-gradient(0deg, rgb(0 0 0 / .05) 0 1px, transparent 1px 3px);
}
@keyframes photo-scan { from { clip-path: inset(0 0 100% 0); filter: brightness(2.2) saturate(0); } 60% { filter: brightness(1.2) saturate(.5); } to { clip-path: inset(0 0 0 0); filter: none; } }
html[data-motion="normal"] .idcard__img:not(.is-vu) { animation: photo-scan .9s var(--ease) both; }
.field > span small { text-transform: none; letter-spacing: 0; }

/* Pourquoi le serveur du site ne répond pas */
.clr__raison, .sas__raison { font-size: .78rem !important; line-height: 1.45; color: var(--signal) !important; padding: 8px 10px; border: 1px dashed color-mix(in srgb, var(--signal) 55%, transparent); background: color-mix(in srgb, var(--signal) 7%, transparent); }

/* ----- Connexion et « Mon compte » (connexion.html) ----- */
.sas--compte .sas__body { gap: 16px; }
.cx-onglets { display: grid; grid-template-columns: 1fr 1fr; width: 100%; border: 1px solid var(--line-2); }
.cx-onglets button {
  min-height: 44px; padding: 8px 12px; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-2); background: transparent; border: 0; cursor: pointer; transition: color .2s, background .2s;
}
.cx-onglets button + button { border-left: 1px solid var(--line-2); }
.cx-onglets button:hover { color: var(--text); }
.cx-onglets button[aria-selected="true"] { color: var(--signal-ink); background: var(--signal); }
.cx-form { display: grid; gap: 14px; width: 100%; }
.cx-form[hidden] { display: none; }
.cx-form .input { width: 100%; }
.cx-form--mdp { padding-top: 18px; border-top: 1px solid var(--line); }
.cx-sous { font-family: var(--font-mono); font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); }
.cx-aide { font-size: .78rem; line-height: 1.4; color: var(--text-3); }
.cx-mdp { position: relative; display: block; }
.cx-mdp .input { padding-right: 80px; }
.cx-voir {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%); min-height: 32px; padding: 0 10px;
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-2); background: var(--bg-2); border: 1px solid var(--line-2); cursor: pointer;
}
.cx-voir:hover, .cx-voir[aria-pressed="true"] { color: var(--text); border-color: var(--text-3); }
.cx-msg { font-family: var(--font-mono); font-size: .8rem !important; line-height: 1.45; color: var(--a-rouge) !important; }
.cx-msg:empty { display: none; }
.cx-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Mot de passe provisoire affiché une seule fois (console staff) */
.st-mdp { display: grid; gap: 8px; margin-bottom: 14px; padding: 14px 16px; border: 1px dashed color-mix(in srgb, var(--signal) 60%, transparent); background: color-mix(in srgb, var(--signal) 7%, transparent); }
.st-mdp[hidden] { display: none; }
.st-mdp__code { font-size: 1.35rem; letter-spacing: .12em; color: var(--signal); user-select: all; overflow-wrap: anywhere; }