/* ============================================================
   CTF Academy BJ — Design System « Cyber Range » v6.0
   Univers graphite, signal corail et jaune de mission.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

:root {
  /* Graphite chaud — neutre chaud, sans mauve */
  --bg: #0B0A09;
  --bg-subtle: #080706;
  --surface: #141210;
  --surface-hover: #1C1916;
  --surface-2: #1F1B18;
  --border: #2E2924;
  --border-subtle: rgba(255, 244, 230, 0.07);
  --border-strong: #4A423A;

  /* Terminal charbon olivâtre neutre */
  --terminal-bg: #0A0B09;
  --terminal-chrome: #121410;
  --terminal-border: #2A2E27;
  --terminal-text: #D8DDD2;
  --terminal-muted: #8A9184;

  /* Texte */
  --text: #F3EFEA;
  --text-muted: #A39E97;
  --text-subtle: #7A746C;

  /* Marque corail + mission ambre */
  --brand: #F15A38;
  --brand-hover: #D9462B;
  --brand-soft: rgba(241, 90, 56, 0.12);
  --brand-border: rgba(241, 90, 56, 0.32);
  --on-brand: #1A0A05;
  --signal: #F3B952;
  --signal-soft: rgba(243, 185, 82, 0.12);
  --signal-border: rgba(243, 185, 82, 0.3);

  /* États */
  --success: #5CB88A;
  --success-soft: rgba(92, 184, 138, 0.12);
  --success-border: rgba(92, 184, 138, 0.28);
  --warn: #E8A23A;
  --warn-soft: rgba(232, 162, 58, 0.12);
  --warn-border: rgba(232, 162, 58, 0.28);
  --danger: #F15A38;
  --danger-soft: rgba(241, 90, 56, 0.12);
  --danger-border: rgba(241, 90, 56, 0.28);

  /* Typographie */
  --font: "Sora", "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Formes et ombres naturelles */
  --radius: 8px;
  --radius-sm: 5px;
  --radius-lg: 11px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 36px -6px rgba(0, 0, 0, 0.6);

  /* Grille */
  --container: 1140px;
  --container-wide: 1260px;

  /* Courbe d'animation dynamique */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.15s ease;
  --transition-smooth: 0.25s var(--ease);
}

html {
  -webkit-text-size-adjust: 100%;
  color-scheme: dark;
}

body {
  margin: 0;
  position: relative;
  isolation: isolate;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* Fond ambiant animé (toutes pages) */
.ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.ambient-grid {
  position: absolute;
  inset: -10%;
  background-image:
    linear-gradient(rgba(210, 190, 170, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(210, 190, 170, 0.035) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 78%);
  animation: ambientDrift 48s linear infinite;
}
.ambient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  opacity: .55;
  will-change: transform;
}
.ambient-orb-a {
  top: -12%;
  left: -8%;
  width: 42vw;
  height: 42vw;
  max-width: 520px;
  max-height: 520px;
  background: rgba(241, 90, 56, 0.16);
  animation: orbFloatA 22s ease-in-out infinite alternate;
}
.ambient-orb-b {
  right: -10%;
  bottom: -18%;
  width: 48vw;
  height: 48vw;
  max-width: 620px;
  max-height: 620px;
  background: rgba(243, 185, 82, 0.1);
  animation: orbFloatB 28s ease-in-out infinite alternate;
}
.ambient-orb-c {
  top: 38%;
  left: 42%;
  width: 28vw;
  height: 28vw;
  max-width: 360px;
  max-height: 360px;
  background: rgba(241, 90, 56, 0.07);
  animation: orbFloatC 19s ease-in-out infinite alternate;
}
.ambient-scan {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(243, 185, 82, 0.03) 48%,
    transparent 52%
  );
  background-size: 100% 220%;
  animation: ambientScan 14s ease-in-out infinite;
  opacity: .7;
}
.ambient-wires {
  position: absolute;
  inset: 0;
  opacity: .35;
  background:
    radial-gradient(circle at 18% 72%, transparent 0 1px, rgba(241, 90, 56, .18) 1px 2px, transparent 3px) 0 0 / 180px 140px,
    radial-gradient(circle at 78% 28%, transparent 0 1px, rgba(243, 185, 82, .16) 1px 2px, transparent 3px) 40px 20px / 220px 160px;
  animation: ambientPulse 8s ease-in-out infinite;
}

@keyframes ambientDrift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-52px, -52px, 0); }
}
@keyframes ambientScan {
  0%, 100% { background-position: 0 -40%; }
  50% { background-position: 0 140%; }
}
@keyframes ambientPulse {
  0%, 100% { opacity: .22; }
  50% { opacity: .42; }
}
@keyframes orbFloatA {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(8%, 12%, 0) scale(1.08); }
}
@keyframes orbFloatB {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-10%, -8%, 0) scale(1.12); }
}
@keyframes orbFloatC {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-14%, 10%, 0); }
}

/* ============================================================
   Animations visibles, tactiles & dynamiques
   ============================================================ */

@keyframes cascadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes loadProgress {
  from { width: 0; }
}

@keyframes cursorBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes accordionExpand {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Classes d'animation en cascade visible */
.animate-enter {
  animation: cascadeIn 0.5s var(--ease) both;
}
.stagger-1 { animation: cascadeIn 0.5s var(--ease) 0.06s both; }
.stagger-2 { animation: cascadeIn 0.5s var(--ease) 0.14s both; }
.stagger-3 { animation: cascadeIn 0.5s var(--ease) 0.22s both; }
.stagger-4 { animation: cascadeIn 0.5s var(--ease) 0.30s both; }

/* ============================================================
   Icônes SVG vectorielles
   ============================================================ */

.ico {
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: middle;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  flex-shrink: 0;
  transition: transform var(--transition-smooth), stroke var(--transition-fast);
}
.ico-sm { width: 14px; height: 14px; }
.ico-md { width: 20px; height: 20px; }
.ico-lg { width: 26px; height: 26px; }

.icon-box {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--brand); margin-bottom: 16px;
  transition: transform var(--transition-smooth), background var(--transition-smooth), border-color var(--transition-smooth);
}
.card:hover .icon-box {
  transform: translateY(-2px) scale(1.08);
  background: var(--brand-soft);
  border-color: var(--brand-border);
}

/* ---------- Typographie soignée ---------- */
h1, h2, h3, h4 {
  color: var(--text);
  font-weight: 600;
  line-height: 1.28;
  margin: 0 0 .5em;
  letter-spacing: -0.015em;
}

h1 { font-size: 2.2rem; font-weight: 700; letter-spacing: -0.03em; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }
h4 { font-size: 0.95rem; }

p { margin: 0 0 1em; color: var(--text-muted); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--brand);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: #FF8967; text-decoration: none; }

code, kbd {
  font-family: var(--mono);
  font-size: .88em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: .15em .4em;
  color: #EDE7DF;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

::selection {
  background: rgba(241, 90, 56, 0.3);
  color: #FFFFFF;
}

/* Utilitaires */
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; width: 100%; }
.container-wide { max-width: var(--container-wide); margin: 0 auto; padding: 0 24px; width: 100%; }

.muted { color: var(--text-muted); }
.subtle { color: var(--text-subtle); }
.strong { color: var(--text); font-weight: 600; }
.small { font-size: .85rem; }
.tabnum { font-variant-numeric: tabular-nums; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brand); color: var(--on-brand); padding: 8px 16px;
  border-radius: 0 0 6px 0; font-weight: 600;
}
.skip:focus { left: 0; }

/* ---------- Barre de navigation supérieure ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(20, 18, 16, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; height: 60px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--text); font-weight: 600; font-size: 0.98rem;
  letter-spacing: -0.015em;
  transition: transform var(--transition-fast);
}
.brand:hover {
  color: #FFFFFF;
  transform: translateY(-1px);
}
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: var(--brand); color: var(--on-brand); border-radius: 6px;
  font-family: var(--mono); font-size: .78rem; font-weight: 800;
}
.brand-bj {
  color: var(--brand);
  font-weight: 700;
}
.nav {
  display: flex; align-items: center; gap: 4px;
}
.nav a {
  padding: 7px 14px; border-radius: var(--radius-sm);
  color: var(--text-muted); font-weight: 500; font-size: .9rem;
  transition: all var(--transition-fast);
}
.nav a:hover {
  color: var(--text); background: rgba(255, 255, 255, 0.05);
}
.nav a.active {
  color: #FFFFFF; background: var(--surface-2); font-weight: 600;
}
.topbar-right {
  display: flex; align-items: center; gap: 12px;
}
.points-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-border);
  color: var(--signal); font-weight: 600; font-size: .84rem;
  padding: 4px 12px; border-radius: 999px;
  transition: all var(--transition-fast);
}
.points-pill:hover {
  background: rgba(243, 185, 82, 0.14);
  border-color: rgba(243, 185, 82, 0.4);
}

/* ---------- Boutons dynamiques & tactiles ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 16px; border-radius: var(--radius-sm);
  font: inherit; font-weight: 500; font-size: .88rem;
  cursor: pointer; transition: all var(--transition-smooth);
  white-space: nowrap; text-decoration: none; border: 1px solid transparent;
  user-select: none;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px) scale(0.98); }

.btn-primary {
  background: var(--brand); color: var(--on-brand); font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.btn-primary:hover {
  background: #FF7956;
  color: #1C0B05;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(241, 90, 56, 0.28);
}

.btn-outline, .btn-secondary {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}
.btn-outline:hover, .btn-secondary:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  color: #FFFFFF;
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent; color: var(--text-muted);
}
.btn-ghost:hover {
  background: var(--surface-2); color: var(--text);
}

.btn-brand {
  background: var(--brand); color: var(--on-brand); font-weight: 600;
}
.btn-brand:hover {
  background: #FF7956;
  color: #1C0B05;
  transform: translateY(-2px);
}

/* ---------- Menu mobile ---------- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-2);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  margin: 0 auto;
  background: var(--text);
  transition: transform .2s var(--ease), opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}
body.nav-open { overflow: hidden; }

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed;
    z-index: 60;
    inset: 58px 0 auto 0;
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: 16px 20px 22px;
    border-bottom: 1px solid #2E2924;
    background: rgba(11, 10, 9, .98);
    box-shadow: 0 24px 40px -20px #000;
  }
  .nav.is-open { display: flex; }
  .nav a {
    padding: 12px 14px;
    font-size: .82rem;
  }
  .topbar-right .points-pill { display: none; }
}

.btn-sm { padding: 6px 12px; font-size: .82rem; }
.btn-lg { padding: 11px 22px; font-size: .95rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .4; cursor: not-allowed; transform: none !important; }

/* ---------- Badges, Chips & Statuts ---------- */
.badge, .chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .78rem; font-weight: 500;
  padding: 3px 9px; border-radius: 6px;
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.chip-cat {
  background: var(--brand-soft);
  color: var(--brand);
  border-color: var(--brand-border);
}

.level {
  display: inline-flex; align-items: center;
  font-size: .76rem; font-weight: 600;
  padding: 3px 8px; border-radius: 5px;
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.lv-n1 { color: var(--brand); border-color: rgba(241, 90, 56, 0.3); }
.lv-n2 { color: var(--signal); border-color: rgba(243, 185, 82, 0.3); }
.lv-n3 { color: var(--signal); border-color: rgba(251, 191, 36, 0.3); }
.lv-n4, .lv-n5 { color: #FF8165; border-color: rgba(248, 113, 113, 0.3); }

.status {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .78rem; font-weight: 500;
}
.st-done { color: var(--brand); }
.st-progress { color: var(--signal); }
.st-open { color: var(--text-muted); }
.st-locked { color: var(--text-subtle); }

/* ---------- Cartes interactives animées au survol ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform var(--transition-smooth), border-color var(--transition-smooth), box-shadow var(--transition-smooth);
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--brand-border);
  box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.55);
}

.card-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 14px;
}
.card-title {
  font-size: 1.1rem; font-weight: 600; margin: 0 0 8px;
}
.card-desc {
  font-size: .89rem; color: var(--text-muted); margin: 0 0 18px;
  line-height: 1.55;
}
.card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: auto; padding-top: 16px;
  border-top: 1px solid var(--border);
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-fast);
}
.panel:hover {
  border-color: var(--border-strong);
}
.panel-title {
  font-size: 1.1rem; font-weight: 600; margin: 0 0 18px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}

/* Grilles */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 860px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .hero-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .topbar-inner { height: auto; min-height: 60px; flex-wrap: wrap; gap: 8px 16px; padding-top: 10px; padding-bottom: 10px; }
  .nav { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: 0 0 auto; }
  .topbar-right { margin-left: auto; }
}

/* ---------- Héros sobre & équilibré ---------- */
.hero {
  padding: 64px 0 54px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.hero-grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center;
}
.hero-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .82rem; font-weight: 500; color: var(--brand);
  background: var(--brand-soft); border: 1px solid var(--brand-border);
  padding: 4px 12px; border-radius: 999px; margin-bottom: 18px;
}
.hero-title {
  font-size: clamp(2.1rem, 4vw, 2.85rem);
  line-height: 1.18; letter-spacing: -0.03em;
  margin-bottom: 18px; font-weight: 700; color: #FFFFFF;
}
.hero-sub {
  font-size: 1.05rem; line-height: 1.65; color: var(--text-muted);
  max-width: 52ch; margin-bottom: 28px;
}
.hero-actions {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
}

/* Terminal d'exercice */
.term {
  background: var(--terminal-bg);
  border: 1px solid var(--terminal-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transition: border-color var(--transition-fast), transform var(--transition-smooth);
}
.term:hover {
  border-color: rgba(241, 90, 56, .38);
  transform: translateY(-2px);
}
.term-head {
  display: flex; align-items: center; gap: 7px;
  padding: 12px 16px; background: var(--terminal-chrome);
  border-bottom: 1px solid var(--terminal-border);
}
.term-dot { width: 10px; height: 10px; border-radius: 50%; opacity: 0.8; }
.term-dot.r { background: #E85D45; }
.term-dot.y { background: #F59E0B; }
.term-dot.g { background: var(--success); }
.term-title {
  color: var(--terminal-muted); font-size: .8rem; font-family: var(--mono);
  margin-left: 8px;
}
.term-body {
  margin: 0; padding: 20px; font-family: var(--mono);
  font-size: .84rem; line-height: 1.75; color: var(--terminal-text);
  background: transparent; border: none; overflow-x: auto;
}
.term-body .p { color: var(--brand); font-weight: 600; }
.term-body .c { color: var(--terminal-muted); }
.term-body .o { color: #AEB6A8; }
.term-body .f { color: var(--signal); font-weight: 600; }
.term-cursor {
  display: inline-block; width: 8px; height: 15px;
  background: var(--brand); vertical-align: -2px; margin-left: 3px;
  animation: cursorBlink 1s infinite;
}

/* ---------- Accueil : portail de défis ---------- */
.home-page {
  position: relative;
  isolation: isolate;
  background: var(--bg);
}
.home-page::before, .home-page::after {
  position: fixed;
  z-index: 0;
  inset: 0;
  content: "";
  pointer-events: none;
}
.home-page::before {
  opacity: .38;
  background-image:
    linear-gradient(rgba(190, 175, 155, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(190, 175, 155, .055) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 82%);
  animation: gridDrift 48s linear infinite;
}
.home-page::after {
  opacity: .7;
  background:
    radial-gradient(ellipse 40% 36% at 15% 15%, rgba(241, 90, 56, .09), transparent 75%),
    radial-gradient(ellipse 32% 42% at 86% 45%, rgba(241, 90, 56, .055), transparent 75%);
  animation: atmosphere 18s ease-in-out infinite alternate;
}
.home-page > *:not(.topbar) { position: relative; z-index: 1; }
.home-page .topbar { background: rgba(11, 10, 9, .78); }
.home-hero {
  position: relative;
  overflow: hidden;
  padding: 26px 0 42px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(20, 18, 16, .38), rgba(11, 10, 9, .14));
}
.home-hero::before {
  position: absolute;
  top: -170px;
  right: -100px;
  width: 600px;
  height: 600px;
  content: "";
  border: 1px solid rgba(241, 90, 56, .08);
  border-radius: 50%;
  box-shadow: 0 0 0 60px rgba(241, 90, 56, .018), 0 0 0 120px rgba(241, 90, 56, .014);
  animation: orbitBreathe 12s ease-in-out infinite;
  pointer-events: none;
}
.home-hero > .container { position: relative; z-index: 1; }
.hub-topline, .hub-brandline, .hub-session {
  display: flex;
  align-items: center;
}
.hub-topline {
  min-height: 38px;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(190, 175, 155, .12);
}
.hub-brandline, .hub-session, .hub-index, .mission-code, .mission-art-label,
.mission-coordinate, .operation-id, .operations-total, .operation-points {
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
}
.hub-brandline { gap: 9px; color: var(--text-muted); }
.hub-mark {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 4px;
  color: var(--on-brand);
  background: var(--brand);
  font-size: .62rem;
  font-weight: 800;
}
.hub-divider, .hub-index { color: var(--brand); }
.hub-session {
  gap: 9px;
  color: var(--text-subtle);
  font-size: .61rem;
}
.hub-session > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 0 rgba(241, 90, 56, .4);
  animation: sessionPulse 2.4s ease-out infinite;
}
.hub-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 32px 0 22px;
}
.eyebrow {
  display: block;
  margin-bottom: 8px;
  color: var(--signal);
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .11em;
}
.hub-index { margin-left: 9px; font-size: .62rem; }
.hub-title {
  margin: 0;
  font-size: clamp(2.25rem, 5vw, 3.8rem);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -.06em;
}
.hub-title > span { color: var(--brand); }
.mission-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, .7fr);
  min-height: 310px;
  overflow: hidden;
  border: 1px solid rgba(241, 90, 56, .21);
  border-radius: var(--radius-lg);
  background: linear-gradient(112deg, rgba(20, 18, 16, .98) 0%, rgba(20, 18, 16, .94) 57%, rgba(28, 20, 16, .9) 100%);
  box-shadow: 0 24px 60px -36px rgba(0, 0, 0, .9);
}
.mission-main {
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(24px, 4vw, 46px);
}
.mission-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.mission-code {
  margin-left: 5px;
  color: var(--text-subtle);
  font-size: .6rem;
}
.mission-main h2 {
  max-width: 17ch;
  margin: 23px 0 9px;
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  line-height: 1.13;
  letter-spacing: -.04em;
}
.mission-main > p { max-width: 46ch; margin-bottom: 26px; font-size: .92rem; }
.mission-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.mission-points { color: var(--text-muted); font-size: .82rem; }
.mission-points strong { color: var(--text); font-family: var(--mono); font-size: 1.02rem; }
.mission-art {
  position: relative;
  display: grid;
  min-height: 310px;
  overflow: hidden;
  place-items: center;
  border-left: 1px solid rgba(190, 175, 155, .08);
  background:
    linear-gradient(90deg, rgba(241, 90, 56, .035) 1px, transparent 1px),
    linear-gradient(rgba(241, 90, 56, .035) 1px, transparent 1px),
    radial-gradient(circle at center, rgba(241, 90, 56, .11), transparent 54%);
  background-size: 32px 32px, 32px 32px, auto;
}
.mission-art::before, .mission-art::after {
  position: absolute;
  content: "";
  pointer-events: none;
}
.mission-art::before {
  top: -25%;
  left: 0;
  width: 100%;
  height: 40%;
  background: linear-gradient(180deg, transparent, rgba(241, 90, 56, .09), transparent);
  animation: scanSweep 7s ease-in-out infinite;
}
.mission-art::after {
  width: 210px;
  height: 210px;
  border: 1px dashed rgba(241, 90, 56, .2);
  border-radius: 50%;
  animation: rotateOrbit 38s linear infinite;
}
.mission-orbit {
  position: absolute;
  width: 172px;
  height: 172px;
  border: 1px solid rgba(241, 90, 56, .16);
  border-radius: 50%;
  animation: rotateOrbit 28s linear infinite;
}
.orbit-a::before, .orbit-b::before {
  position: absolute;
  top: 50%;
  left: -4px;
  width: 7px;
  height: 7px;
  content: "";
  border: 1px solid #F5C97A;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 16px rgba(241, 90, 56, .6);
}
.orbit-b { width: 126px; height: 126px; border-style: dashed; animation-direction: reverse; animation-duration: 22s; }
.orbit-b::before { top: 17%; left: 88%; width: 5px; height: 5px; background: #F5C97A; }
.mission-crosshair {
  position: absolute;
  width: 82px;
  height: 82px;
  border: 1px solid rgba(241, 90, 56, .2);
  transform: rotate(45deg);
}
.mission-crosshair::before, .mission-crosshair::after {
  position: absolute;
  content: "";
  background: rgba(241, 90, 56, .18);
}
.mission-crosshair::before { top: 50%; left: -15px; width: 110px; height: 1px; }
.mission-crosshair::after { top: -15px; left: 50%; width: 1px; height: 110px; }
.mission-symbol {
  z-index: 1;
  color: #F5C97A;
  font-family: var(--mono);
  font-size: 2rem;
  font-weight: 600;
  text-shadow: 0 0 24px rgba(241, 90, 56, .5);
}
.mission-coordinate { position: absolute; color: rgba(167, 243, 208, .56); font-size: .58rem; }
.coordinate-a { top: 24px; left: 24px; }
.coordinate-b { right: 24px; bottom: 48px; }
.mission-art-label {
  position: absolute;
  right: 20px;
  bottom: 17px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-subtle);
  font-size: .56rem;
}
.mission-art-label i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  animation: sessionPulse 2.4s ease-out infinite;
}
.home-operations { padding: 36px 0 64px; }
.home-operations .section-head { align-items: flex-end; margin-bottom: 18px; }
.home-operations .eyebrow { margin-bottom: 5px; }
.home-operations .section-title { font-size: 1.25rem; }
.operations-total { color: var(--text-subtle); font-size: .62rem; }
.featured-challenges { gap: 16px; }
.operation-card {
  min-height: 206px;
  padding: 22px 24px;
  background: rgba(20, 18, 16, .82);
  transition: transform var(--transition-smooth), border-color var(--transition-smooth), background var(--transition-smooth);
}
.operation-card:hover { background: var(--surface-hover); }
.operation-card .card-meta { justify-content: flex-start; margin-bottom: 13px; }
.operation-id { display: block; margin-bottom: 7px; color: var(--text-subtle); font-size: .57rem; }
.operation-card .card-title { margin-bottom: 6px; }
.operation-card .card-desc { margin-bottom: 10px; }
.operation-card .card-foot { padding-top: 13px; }
.operation-points { color: var(--text); font-size: .79rem; }
.operation-points span { color: var(--text-subtle); font-size: .6rem; }
.operation-card .btn-outline span { color: var(--brand); }
.home-page .footer { background: rgba(8, 7, 6, .8); }
.home-page .footer-tagline { color: var(--text-subtle); }
.catalog-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 5px;
  color: var(--text);
  font-size: .86rem;
  font-weight: 500;
  border-bottom: 1px solid var(--border-strong);
}
.catalog-link span { color: var(--brand); font-size: 1rem; transition: transform var(--transition-fast); }
.catalog-link:hover { color: #F5C97A; border-color: var(--brand); }
.catalog-link:hover span { transform: translate(2px, -2px); }

@keyframes gridDrift {
  to { background-position: 54px 54px, 54px 54px; }
}
@keyframes atmosphere {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  to { transform: translate3d(2%, 1.5%, 0) scale(1.08); }
}
@keyframes orbitBreathe {
  0%, 100% { transform: scale(.96); opacity: .65; }
  50% { transform: scale(1.04); opacity: 1; }
}
@keyframes rotateOrbit {
  to { transform: rotate(360deg); }
}
@keyframes scanSweep {
  0%, 100% { transform: translateY(-40%); opacity: 0; }
  18%, 75% { opacity: .8; }
  50% { transform: translateY(310%); opacity: .55; }
}
@keyframes sessionPulse {
  0% { box-shadow: 0 0 0 0 rgba(241, 90, 56, .42); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(241, 90, 56, 0); }
}

/* ---------- Sections & En-têtes ---------- */
.section { padding: 44px 0; }
.section-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; flex-wrap: wrap; margin-bottom: 24px;
}
.section-title { font-size: 1.3rem; font-weight: 600; margin: 0; }
.section-sub { color: var(--text-muted); font-size: .9rem; margin: 5px 0 0; }

.page-head { padding: 32px 0 18px; }
.crumbs {
  font-size: .84rem; color: var(--text-subtle); margin-bottom: 14px;
  display: flex; align-items: center; gap: 6px;
}
.crumbs a { color: var(--text-muted); }
.crumbs a:hover { color: var(--text); }
.crumbs .sep { color: var(--text-subtle); font-size: .75rem; }

.head-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px; flex-wrap: wrap;
}

/* ---------- Tableaux fluides avec survol animé ---------- */
.table-wrap {
  width: 100%; overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.table {
  width: 100%; border-collapse: collapse; text-align: left; font-size: .89rem;
}
.table th {
  padding: 12px 18px; background: var(--surface-2);
  color: var(--text-muted); font-weight: 500; font-size: .78rem;
  border-bottom: 1px solid var(--border);
  text-transform: uppercase; letter-spacing: .05em;
}
.table td {
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  color: var(--text); vertical-align: middle;
  transition: background var(--transition-fast);
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: var(--surface-hover); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table th.num { text-align: right; }

/* ---------- Barres de progression avec chargement animé ---------- */
.progress {
  height: 6px; background: var(--surface-2);
  border-radius: 999px; overflow: hidden; width: 100%;
}
.progress-bar {
  height: 100%; background: var(--brand);
  border-radius: 999px; transition: width 0.6s var(--ease);
  animation: loadProgress 0.9s var(--ease);
}
.progress-bar.done {
  background: var(--brand);
}
.progress-label {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .82rem; color: var(--text-muted); margin-bottom: 7px;
}

/* ---------- Callouts d'information sobres ---------- */
.callout {
  display: flex; gap: 14px; padding: 14px 18px;
  border-radius: var(--radius-sm); font-size: .89rem;
  line-height: 1.55; margin-bottom: 18px;
  border: 1px solid transparent;
}
.callout .ico { flex: none; margin-top: 2px; }
.callout-info {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text);
}
.callout-info .ico { color: var(--brand); }
.callout-warn {
  background: var(--warn-soft);
  border-color: var(--warn-border);
  color: var(--signal);
}
.callout-warn strong { color: #FFFFFF; }
.callout-danger {
  background: var(--danger-soft);
  border-color: var(--danger-border);
  color: #FF9A82;
}
.callout-danger strong { color: #FFFFFF; }
.callout-success {
  background: var(--success-soft);
  border-color: var(--success-border);
  color: var(--signal);
}
.callout-success strong { color: #FFFFFF; }

/* ---------- Formulaires & Entrées ---------- */
.field { margin-bottom: 18px; }
.label {
  display: block; font-size: .84rem; font-weight: 500;
  color: var(--text); margin-bottom: 7px;
}
.input, .textarea, .select {
  width: 100%; padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text); font: inherit; font-size: .9rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(241, 90, 56, 0.2);
}
.input::placeholder, .textarea::placeholder { color: var(--text-subtle); }
.hint-text { font-size: .79rem; color: var(--text-subtle); margin-top: 5px; }

/* Zone de soumission du flag */
.flag-form {
  display: flex; gap: 10px; align-items: stretch; margin: 18px 0;
}
.flag-input {
  flex: 1; font-family: var(--mono); font-size: .92rem;
}

/* ---------- Statistiques (Tableau de bord) ---------- */
.stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px; margin-bottom: 28px;
}
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  transition: transform var(--transition-smooth), border-color var(--transition-smooth);
}
.stat:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
}
.stat-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
}
.stat-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 6px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--brand);
}
.stat-value {
  font-size: 1.85rem; font-weight: 700; color: var(--text);
  line-height: 1.15; margin-bottom: 4px; letter-spacing: -0.025em;
}
.stat-label {
  font-size: .83rem; color: var(--text-muted); font-weight: 500;
}

@media (max-width: 768px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Mise en page 2 colonnes ---------- */
.split {
  display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start;
}
@media (max-width: 980px) {
  .split { grid-template-columns: 1fr; }
}

/* ---------- Accordéons animés ---------- */
details.hint, details.correction {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  margin-bottom: 14px; overflow: hidden;
  transition: border-color var(--transition-fast);
}
details.hint:hover, details.correction:hover {
  border-color: var(--border-strong);
}
details summary {
  padding: 13px 18px; cursor: pointer; font-size: .9rem; font-weight: 500;
  color: var(--text); user-select: none; transition: background var(--transition-fast);
  display: flex; align-items: center; justify-content: space-between;
}
details summary:hover { background: var(--surface-hover); }
details[open] summary { border-bottom: 1px solid var(--border); }
details summary::after {
  content: "▾";
  font-size: .85rem;
  color: var(--text-subtle);
  transition: transform 0.2s var(--ease);
}
details[open] summary::after {
  transform: rotate(180deg);
  color: var(--brand);
}
details[open] .hint-body {
  animation: accordionExpand 0.25s var(--ease);
}
.hint-body { padding: 16px 18px; font-size: .89rem; color: var(--text-muted); line-height: 1.6; }

/* ---------- Pied de page ---------- */
.footer {
  border-top: 1px solid var(--border);
  padding: 40px 0; margin-top: auto;
  background: var(--bg-subtle);
}
.footer-inner {
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; flex-wrap: wrap; font-size: .88rem; color: var(--text-muted);
}
.footer-links { display: flex; gap: 20px; }
.footer-links a { color: var(--text-muted); }
.footer-links a:hover { color: var(--text); }

/* ---------- Administration Shell ---------- */
.admin-shell {
  display: grid; grid-template-columns: 240px 1fr; gap: 32px;
  padding-top: 24px; padding-bottom: 48px;
}
@media (max-width: 900px) {
  .admin-shell { grid-template-columns: 1fr; }
}
.sidebar { display: flex; flex-direction: column; gap: 4px; }
.sidebar-title {
  font-size: .75rem; font-weight: 600; text-transform: uppercase;
  color: var(--text-subtle); letter-spacing: .05em; padding: 12px 10px 4px;
}
.sidebar a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-radius: var(--radius-sm);
  color: var(--text-muted); font-size: .88rem; font-weight: 500;
  transition: all var(--transition-fast);
}
.sidebar a:hover {
  background: var(--surface-hover); color: var(--text); text-decoration: none;
}
.sidebar a.active {
  background: var(--surface-2); color: #FFFFFF; font-weight: 600;
}
.sidebar-sep { height: 1px; background: var(--border); margin: 8px 0; }
.sidebar .count {
  font-size: .75rem; background: var(--brand-soft); color: var(--brand);
  padding: 2px 6px; border-radius: 999px;
}
.admin-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; margin-bottom: 24px; flex-wrap: wrap;
}

@media (max-width: 860px) {
  .mission-card { grid-template-columns: minmax(0, 1fr) minmax(220px, .62fr); }
}

@media (max-width: 700px) {
  .mission-card { grid-template-columns: 1fr; }
  .mission-art {
    min-height: 190px;
    border-top: 1px solid rgba(190, 175, 155, .08);
    border-left: 0;
  }
  .mission-main h2 { max-width: 22ch; }
  .featured-challenges { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .home-hero { padding-top: 14px; }
  .hub-topline { align-items: flex-start; flex-direction: column; gap: 9px; padding: 8px 0 11px; }
  .hub-session { font-size: .56rem; }
  .hub-heading { align-items: flex-start; flex-direction: column; gap: 16px; padding: 26px 0 18px; }
  .hub-title { font-size: clamp(2.5rem, 12vw, 3.5rem); }
  .mission-main { padding: 22px; }
  .mission-main h2 { font-size: 1.65rem; }
  .mission-art { min-height: 170px; }
  .home-operations { padding: 28px 0 44px; }
  .operation-card { min-height: 0; }
  .home-page .section-head { align-items: flex-start; }
  .footer-links { flex-wrap: wrap; gap: 12px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .home-page::before, .home-page::after, .mission-art::before, .mission-art::after,
  .mission-orbit, .hub-session > span, .mission-art-label i {
    animation: none !important;
  }
}

/* ============================================================
   CYBER RANGE — refonte globale
   Graphite neutre, signal corail, carte de progression tactique.
   ============================================================ */

body:not(.home-map-page):not(.home-command-page) {
  background: var(--bg);
}
body:not(.home-map-page):not(.home-command-page)::before {
  display: none;
}

a:hover { color: #FF8967; }
.brand { font-family: var(--mono); font-size: .84rem; letter-spacing: .035em; }
.brand-mark {
  border-radius: 3px;
  background: var(--brand);
  box-shadow: 0 0 20px rgba(241, 90, 56, .18);
}
.brand-bj { color: #FF8967; }
.topbar {
  background: rgba(11, 10, 9, .94);
  border-bottom-color: #2A2520;
  backdrop-filter: blur(18px);
}
.topbar-inner { height: 58px; }
.nav { gap: 3px; }
.nav a {
  border-radius: 3px;
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .015em;
}
.nav a.active {
  color: #F3EFED;
  background: #1F1B18;
  box-shadow: inset 0 -2px var(--brand);
}
.points-pill {
  color: var(--signal);
  background: rgba(243, 185, 82, .07);
  border-color: rgba(243, 185, 82, .2);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: .76rem;
}
.points-pill .ico { color: var(--signal); }

h1, h2, h3, h4 { letter-spacing: -.035em; }
h1 { font-size: clamp(1.8rem, 4vw, 2.7rem); }
.page-head { padding-top: 36px; padding-bottom: 16px; }
.page-head h1 { margin-bottom: 7px; }
.page-sub { max-width: 70ch; font-size: .91rem; }
.crumbs, .small, .section-sub { letter-spacing: .005em; }
.eyebrow, .operation-id, .mission-code, .operations-total {
  color: #F18564;
  font-family: var(--mono);
  letter-spacing: .1em;
}

.btn {
  border-radius: 4px;
  font-size: .82rem;
  letter-spacing: .005em;
}
.btn-primary, .btn-brand {
  color: var(--on-brand);
  background: var(--brand);
  box-shadow: 0 4px 18px rgba(241, 90, 56, .12);
}
.btn-primary:hover, .btn-brand:hover {
  color: #1C0B05;
  background: #FF7956;
  box-shadow: 0 6px 24px rgba(241, 90, 56, .2);
}
.btn-outline, .btn-secondary {
  background: #181512;
  border-color: #352F28;
}
.btn-outline:hover, .btn-secondary:hover {
  background: #241F1A;
  border-color: #5A4B42;
}
.btn-ghost { color: var(--text-muted); }

.chip, .badge, .level {
  border-radius: 3px;
  font-family: var(--mono);
  font-size: .69rem;
  letter-spacing: .02em;
}
.chip-cat {
  color: #F58A6A;
  background: rgba(241, 90, 56, .1);
  border-color: rgba(241, 90, 56, .26);
}
.lv-n1, .lv-n2 { color: var(--signal); border-color: rgba(243, 185, 82, .28); }
.lv-n3 { color: #F6B34D; border-color: rgba(246, 179, 77, .3); }
.lv-n4, .lv-n5 { color: #FF8165; border-color: rgba(255, 129, 101, .3); }
.st-done { color: var(--success); }
.st-progress { color: var(--signal); }

.card, .panel, .stat, .podium-card {
  background: rgba(17, 17, 22, .9);
  border-color: #2E2924;
  border-radius: 7px;
  box-shadow: 0 12px 32px -26px rgba(0, 0, 0, .9);
}
.card:hover, .panel:hover, .stat:hover {
  border-color: rgba(241, 90, 56, .38);
}
.card:hover { box-shadow: 0 16px 36px -24px rgba(0, 0, 0, .95); }
.panel { padding: 24px; }
.panel-title { letter-spacing: -.02em; }
.card-foot { border-top-color: rgba(255, 255, 255, .08); }
.table-wrap {
  overflow: auto;
  border: 1px solid #2E2924;
  border-radius: 7px;
  background: rgba(17, 17, 22, .88);
}
.table th {
  background: #1A1714;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: .68rem;
}
.table td { border-bottom-color: #2E2924; }
.table tbody tr:hover td { background: #1F1B18; }
.progress { background: #2C2823; }
.progress-bar { background: var(--brand); }
.progress-bar.done { background: var(--success); }
.input, .textarea, .select {
  background: #0C0A08;
  border-color: #352F28;
  border-radius: 4px;
}
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(241, 90, 56, .13);
}
.term {
  --terminal-bg: #09090B;
  --terminal-chrome: #141210;
  --terminal-border: #352F28;
  --terminal-text: #D7D2D4;
  --terminal-muted: var(--text-subtle);
  border-color: var(--terminal-border);
  border-radius: 6px;
  box-shadow: 0 14px 36px -28px #000;
}
.term-head { background: var(--terminal-chrome); border-bottom-color: var(--terminal-border); }
.term-title { color: var(--terminal-muted); }
.term-body { color: var(--terminal-text); }
.term-body .p { color: #F5815E; }
.term-cursor { background: #F5815E; }
.term-body .c { color: var(--text-subtle); }
.term-body .o { color: #AAA4AA; }
.term-body .f { color: var(--signal); }
.callout-info { background: #1A1714; border-color: #3A342E; }
.callout-info .ico { color: #F18564; }
.callout-success { background: rgba(84, 201, 138, .08); border-color: rgba(84, 201, 138, .25); }
.footer {
  background: rgba(7, 7, 10, .96);
  border-top-color: #2A2520;
  color: var(--text-subtle);
}
.footer strong { color: #DDD6CE; font-family: var(--mono); font-size: .78rem; letter-spacing: .05em; }
.footer-links a { font-family: var(--mono); font-size: .75rem; }
.sidebar a.active { background: #211A19; box-shadow: inset 2px 0 var(--brand); }
.sidebar .count { color: #FF8967; background: rgba(241, 90, 56, .12); }

/* ---------- Carte de progression de la page d'accueil ---------- */
.home-map-page {
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse at 48% 52%, rgba(241, 90, 56, .035), transparent 50%),
    #0B0A09;
}
.home-map-page::before, .home-map-page::after {
  position: fixed;
  z-index: -1;
  inset: 0;
  content: "";
  pointer-events: none;
}
.home-map-page::before {
  opacity: .24;
  background-image: radial-gradient(rgba(190, 183, 192, .46) .65px, transparent .75px);
  background-size: 27px 27px;
  mask-image: radial-gradient(ellipse at 52% 49%, #000 0%, transparent 77%);
  animation: rangeDust 45s linear infinite;
}
.home-map-page::after {
  background:
    radial-gradient(ellipse at 26% 53%, rgba(241, 90, 56, .085), transparent 34%),
    radial-gradient(ellipse at 78% 37%, rgba(190, 126, 86, .065), transparent 28%),
    linear-gradient(115deg, transparent 20%, rgba(224, 210, 188, .018) 50%, transparent 80%);
  animation: rangeAtmosphere 20s ease-in-out infinite alternate;
}
.home-map-page > * { position: relative; z-index: 1; }
.home-map-page > .topbar { position: sticky; }
.home-map-page .topbar {
  z-index: 50;
  border-bottom-color: #262329;
  background: rgba(11, 10, 9, .94);
}
.home-map-page .topbar-inner { max-width: 1450px; }
.home-map-page .brand { font-size: .75rem; }
.home-map-page .nav a { font-size: .71rem; }
.map-main { flex: 1; }
.map-shell {
  width: min(1450px, 100%);
  margin: 0 auto;
  padding: 0 28px;
}
.map-toolbar {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(200, 185, 168, .12);
}
.map-coordinates, .map-status {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #8F877E;
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .08em;
}
.map-coordinates b, .map-status > span { color: var(--brand); }
.map-cross { color: #F15A38; font-size: 1.05rem; }
.map-season { margin-left: 7px; color: #6B645C; font-size: .58rem; }
.map-status { color: #7A746C; font-size: .58rem; }
.map-status i, .map-footer-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #F3B952;
  box-shadow: 0 0 0 0 rgba(243, 185, 82, .42);
  animation: rangePulse 2.5s ease-out infinite;
}
.map-heading {
  display: flex;
  min-height: 88px;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}
.map-kicker, .map-legend, .map-footer {
  color: #847C72;
  font-family: var(--mono);
  font-size: .59rem;
  font-weight: 600;
  letter-spacing: .1em;
}
.map-kicker b { margin-left: 8px; color: var(--brand); }
.map-heading h1 {
  margin: 7px 0 0;
  color: #EDE7DF;
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  letter-spacing: -.055em;
}
.map-heading h1 span { color: #F3B952; }
.map-legend { display: flex; align-items: center; gap: 19px; font-size: .56rem; letter-spacing: .04em; }
.map-legend > span { display: inline-flex; align-items: center; gap: 7px; }
.map-legend i, .map-legend-mobile i { width: 7px; height: 7px; border-radius: 50%; }
.legend-live { background: #F3B952; box-shadow: 0 0 10px rgba(243, 185, 82, .3); }
.legend-done { background: #F15A38; box-shadow: 0 0 10px rgba(241, 90, 56, .3); }
.legend-locked { background: #524A42; }
.map-viewport {
  height: min(660px, calc(100vh - 210px));
  min-height: 480px;
  overflow: hidden;
  border-top: 1px solid rgba(200, 185, 168, .08);
  border-bottom: 1px solid rgba(200, 185, 168, .1);
  background: radial-gradient(ellipse at 42% 57%, rgba(38, 27, 26, .24), transparent 58%);
}
.operation-map {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.terrain-lines {
  fill: none;
  stroke: #94848B;
  stroke-opacity: .15;
  stroke-width: 1;
  stroke-dasharray: 2 5;
  transform-box: fill-box;
  transform-origin: center;
  animation: terrainShift 24s ease-in-out infinite alternate;
}
.route {
  fill: none;
  stroke-linecap: round;
  stroke-width: 2;
  stroke-dasharray: 7 11;
}
.route-complete { stroke: #F15A38; stroke-opacity: .65; animation: routeFlow 22s linear infinite; }
.route-open { stroke: var(--signal); stroke-opacity: .68; animation: routeFlow 18s linear infinite; }
.route-locked { stroke: #5A524A; stroke-opacity: .23; stroke-width: 1.4; }
.route-points { fill: #FF7652; filter: drop-shadow(0 0 5px rgba(241, 90, 56, .8)); }
.map-node { font-family: var(--mono); text-anchor: middle; }
.map-node .challenge-card {
  fill: rgba(17, 16, 20, .94);
  stroke: #51464A;
  stroke-width: 1;
  transition: fill .2s ease, stroke .2s ease, filter .2s ease;
}
.map-node .challenge-state { fill: #F3B952; }
.map-node .challenge-category {
  fill: #BAA7A5;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .11em;
  text-anchor: start;
}
.map-node .challenge-title { font-size: 11px; font-weight: 600; text-anchor: start; }
.map-node .challenge-meta { font-size: 8px; letter-spacing: .08em; text-anchor: start; }
.map-node .challenge-meta tspan { fill: #6E6872; }
.map-node .challenge-arrow { fill: none; stroke: #F3B952; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.map-node .challenge-check { fill: none; stroke: #F15A38; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.map-node-done .challenge-card { fill: rgba(29, 18, 18, .9); stroke: rgba(241, 90, 56, .43); }
.map-node-done .challenge-category { fill: #D8755B; }
.map-node-done .challenge-title { fill: #D3C7C6; }
.map-node-done .challenge-meta { fill: #A27065; }
.map-node-open { cursor: pointer; outline: none; }
.map-node-open .challenge-card { fill: rgba(29, 25, 21, .97); stroke: #B78345; stroke-width: 1.3; }
.map-node-open .challenge-category { fill: #E2B467; }
.map-node-open .challenge-title { fill: #F0E8E0; }
.map-node-open .challenge-meta { fill: #B4A291; }
.map-node-open .challenge-state { fill: #F3B952; filter: drop-shadow(0 0 4px rgba(243, 185, 82, .7)); }
.map-node-open:hover .challenge-card, .map-node-open:focus .challenge-card {
  fill: #30251E;
  stroke: #F3B952;
  filter: drop-shadow(0 0 12px rgba(243, 185, 82, .2));
}
.map-node-open:hover .challenge-arrow, .map-node-open:focus .challenge-arrow { stroke: #FFE0A0; }
.map-node-locked { opacity: .38; }
.map-node-locked .challenge-card { fill: rgba(17, 16, 20, .52); stroke: #564E46; stroke-dasharray: 3 4; }
.map-node-locked .challenge-state { fill: #6B645C; }
.map-node-locked .challenge-title { fill: #8A837A; font-size: 8px; font-weight: 500; }
.map-legend-mobile { display: none; }
.map-footer {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: #6D6871;
  font-size: .55rem;
}
.map-footer > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.map-footer-pulse { width: 5px; height: 5px; background: #F15A38; }
.map-footer a { color: #A9A2AD; }
.map-footer a b { margin-left: 5px; color: #F3B952; }
.map-page-footer { padding: 14px 0; }
.map-page-footer .footer-inner { min-height: 26px; }
.map-page-footer .footer-inner > div:first-child { font-family: var(--mono); font-size: .65rem; letter-spacing: .03em; }
.map-page-footer .footer-inner > div:first-child span { color: #6E6872; }

@keyframes rangeDust { to { background-position: 27px 27px; } }
@keyframes rangeAtmosphere {
  from { transform: translate3d(-1%, 0, 0) scale(1); opacity: .7; }
  to { transform: translate3d(1.5%, -1%, 0) scale(1.08); opacity: 1; }
}
@keyframes routeFlow { to { stroke-dashoffset: -360; } }
@keyframes terrainShift { from { transform: translate(-5px, 2px); opacity: .65; } to { transform: translate(5px, -2px); opacity: 1; } }
@keyframes rangePulse {
  0% { box-shadow: 0 0 0 0 rgba(243, 185, 82, .35); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(243, 185, 82, 0); }
}

@media (max-width: 900px) {
  .map-shell { padding-right: 20px; padding-left: 20px; }
  .map-viewport { height: 590px; min-height: 430px; }
  .map-legend { gap: 11px; }
  .map-legend > span { font-size: .52rem; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .topbar-inner { gap: 8px 14px; padding-top: 8px; padding-bottom: 8px; }
  .brand { font-size: .7rem; }
  .topbar-right { gap: 6px; }
  .points-pill { padding: 4px 7px; font-size: .67rem; }
  .topbar-right .btn { padding: 5px 8px; font-size: .7rem; }
  .nav { gap: 2px; }
  .nav a { padding: 6px 10px; font-size: .67rem; }
  .map-shell { padding-right: 15px; padding-left: 15px; }
  .map-toolbar { align-items: flex-start; flex-direction: column; justify-content: center; gap: 6px; padding: 9px 0; }
  .map-coordinates, .map-status { font-size: .54rem; }
  .map-heading { min-height: 95px; align-items: flex-start; flex-direction: column; justify-content: center; gap: 11px; }
  .map-heading h1 { font-size: 1.85rem; }
  .map-legend { gap: 13px; }
  .map-viewport { display: none; }
  .map-legend-mobile { display: grid; gap: 8px; padding: 8px 0 16px; }
  .map-legend-mobile a {
    display: flex;
    min-height: 64px;
    align-items: center;
    gap: 12px;
    padding: 10px 13px;
    border: 1px solid #2E2924;
    border-radius: 5px;
    background: rgba(17, 17, 22, .9);
  }
  .map-legend-mobile a:hover { border-color: rgba(243, 185, 82, .45); background: #1A1714; }
  .map-legend-mobile i { width: 8px; height: 8px; flex: 0 0 8px; }
  .map-legend-mobile span { display: grid; gap: 3px; }
  .map-legend-mobile b { color: #E7E2E5; font-size: .84rem; font-weight: 600; }
  .map-legend-mobile small { color: #8E8791; font-family: var(--mono); font-size: .64rem; text-transform: uppercase; }
  .map-legend-mobile strong { margin-left: auto; color: #F3B952; font-size: 1rem; }
  .map-footer { min-height: 42px; font-size: .5rem; }
  .map-hint { display: none; }
  .map-page-footer { padding: 12px 0; }
  .map-page-footer .footer-inner { align-items: flex-start; flex-direction: column; }
  .map-page-footer .footer-links { gap: 10px 15px; }
  .page-head { padding-top: 24px; }
  .panel { padding: 18px; }
  .stats { gap: 10px; }
  .stat { padding: 15px; }
  .stat-value { font-size: 1.55rem; }
  .podium { grid-template-columns: 1fr; align-items: stretch; }
  .podium-card.first { transform: none; }
  .podium-card.first:hover { transform: translateY(-4px); }
  .admin-shell { gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-map-page::before, .home-map-page::after, .terrain-lines, .route-complete, .route-open,
  .map-status i, .map-footer-pulse {
    animation: none !important;
  }
}

/* ---------- Accueil : centre de dispatch des opérations ---------- */
.home-command-page {
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(36, 25, 23, .3), transparent 58%),
    #0B0A09;
}
.home-command-page .topbar { z-index: 50; }
.command-main {
  position: relative;
  z-index: 0;
  flex: 1;
  overflow: hidden;
}
.structure-backdrop {
  position: fixed;
  z-index: 0;
  inset: 58px 0 44px;
  overflow: hidden;
  opacity: .74;
  pointer-events: none;
  mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
}
.structure-backdrop::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, #0B0A09 0%, transparent 22%, transparent 66%, #0B0A09 100%);
}
.structure-backdrop svg { width: 100%; height: 100%; }
.structure-wires { opacity: .78; }
.structure {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: structureRise 13s ease-in-out infinite alternate;
}
.structure-center { animation-delay: -6s; animation-duration: 16s; }
.structure-right { animation-delay: -3s; animation-duration: 19s; }
.structure-link {
  stroke: #F18564;
  stroke-width: .8;
  stroke-dasharray: 2 10;
  stroke-opacity: .26;
  animation: circuitTravel 24s linear infinite;
}
.glint-line {
  opacity: .28;
  stroke-dasharray: 60 620;
  animation: glintTravel 11s ease-in-out infinite;
}
.glint-two { animation-delay: -4s; }
.glint-three { animation-delay: -7s; }
.glint {
  fill: #F3B952;
  opacity: 0;
  filter: drop-shadow(0 0 8px #F3B952);
  animation: glintPulse 5s ease-in-out infinite;
}
.dispatch-board {
  position: relative;
  z-index: 1;
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 24px 28px 48px;
}
.dispatch-topline, .dispatch-topline > span {
  display: flex;
  align-items: center;
}
.dispatch-topline {
  min-height: 34px;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid rgba(196, 180, 162, .12);
  color: #A39E97;
  font: 600 .62rem var(--mono);
  letter-spacing: .085em;
}
.dispatch-topline > span { gap: 9px; }
.dispatch-topline b { color: #F18564; }
.dispatch-mark {
  width: 7px;
  height: 7px;
  border: 1px solid #F18564;
  transform: rotate(45deg);
}
.dispatch-online { color: #8A837A; font-size: .57rem !important; }
.dispatch-online i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #68C78D;
  box-shadow: 0 0 10px rgba(104, 199, 141, .48);
}
.dispatch-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 27px 0 20px;
}
.dispatch-kicker {
  color: #A39E97;
  font: 600 .62rem var(--mono);
  letter-spacing: .12em;
}
.dispatch-kicker b { color: #F3B952; }
.dispatch-heading h1 {
  margin: 8px 0 0;
  color: #F3EFEA;
  font-size: clamp(2.1rem, 4vw, 3.1rem);
  line-height: 1;
  letter-spacing: -.06em;
}
.dispatch-index {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding-bottom: 7px;
  border-bottom: 1px solid #4A4146;
  color: #B8AFA6;
  font: 600 .61rem var(--mono);
  letter-spacing: .07em;
}
.dispatch-index span { color: #F3B952; font-size: .9rem; transition: transform .2s ease; }
.dispatch-index:hover { color: #F3B952; }
.dispatch-index:hover span { transform: translate(2px, -2px); }
.dispatch-feature {
  position: relative;
  display: grid;
  min-height: 230px;
  grid-template-columns: minmax(0, 1fr) 218px;
  overflow: hidden;
  border: 1px solid rgba(205, 164, 140, .24);
  border-radius: 5px;
  background:
    linear-gradient(105deg, rgba(24, 20, 22, .97) 0%, rgba(19, 17, 21, .94) 72%, rgba(34, 25, 23, .9) 100%);
  box-shadow: 0 24px 60px -42px #000;
  animation: dispatchEnter .6s var(--ease) both;
}
.dispatch-feature::before {
  position: absolute;
  top: -120px;
  left: 24%;
  width: 420px;
  height: 420px;
  content: "";
  border: 1px solid rgba(241, 90, 56, .08);
  border-radius: 50%;
  box-shadow: 0 0 0 54px rgba(241, 90, 56, .018), 0 0 0 108px rgba(241, 90, 56, .012);
  pointer-events: none;
}
.dispatch-feature-index {
  position: absolute;
  top: -39px;
  right: 215px;
  color: rgba(255, 255, 255, .025);
  font: 700 19rem/.9 var(--mono);
  letter-spacing: -.12em;
  pointer-events: none;
}
.dispatch-feature-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 34px clamp(24px, 5vw, 52px);
}
.dispatch-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: #C4B8AE;
  font: 600 .63rem var(--mono);
  letter-spacing: .08em;
}
.dispatch-state { display: inline-flex; align-items: center; gap: 7px; color: #F3B952; }
.dispatch-state i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #F3B952;
  box-shadow: 0 0 9px rgba(243, 185, 82, .55);
}
.dispatch-separator { color: #564E46; }
.dispatch-feature h2 {
  max-width: 24ch;
  margin: 20px 0 25px;
  color: #F3EFEA;
  font-size: clamp(1.5rem, 3.2vw, 2.25rem);
  line-height: 1.14;
  letter-spacing: -.045em;
}
.dispatch-feature-bottom { display: flex; align-items: center; gap: 22px; }
.dispatch-feature-bottom .btn { min-height: 45px; }
.dispatch-score {
  color: #EEE5E4;
  font: 600 .95rem var(--mono);
}
.dispatch-score small { color: #8F877E; font-size: .61rem; }
.dispatch-feature-side {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  overflow: hidden;
  padding: 24px;
  border-left: 1px solid rgba(205, 164, 140, .16);
  background:
    linear-gradient(140deg, rgba(241, 90, 56, .09), transparent 58%),
    repeating-linear-gradient(135deg, transparent 0 11px, rgba(240, 224, 213, .025) 11px 12px);
}
.feature-side-label, .feature-side-category, .feature-side-coord {
  position: relative;
  z-index: 1;
  color: #A89A90;
  font: 600 .57rem var(--mono);
  letter-spacing: .12em;
}
.feature-side-number {
  position: relative;
  z-index: 1;
  color: #F3B952;
  font: 500 3.4rem/.95 var(--mono);
  letter-spacing: -.1em;
}
.feature-side-number span { color: #7A6A62; font-size: 1rem; letter-spacing: 0; }
.feature-side-rule { width: 100%; height: 1px; background: rgba(205, 164, 140, .25); }
.feature-side-category { color: #F18564; line-height: 1.7; }
.feature-side-coord { position: absolute; right: 18px; bottom: 15px; color: #7A7268; font-size: .52rem; }
.dispatch-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 32px 2px 12px;
}
.dispatch-list-head h2 {
  margin: 0;
  color: #E8E1D8;
  font-size: 1.08rem;
  letter-spacing: -.025em;
}
.dispatch-list-head > span {
  color: #7A746C;
  font: 600 .57rem var(--mono);
  letter-spacing: .08em;
}
.dispatch-list-head i {
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 7px 2px;
  border-radius: 50%;
  background: #F18564;
}
.dispatch-list {
  border-top: 1px solid rgba(198, 180, 160, .18);
}
.mission-row {
  display: grid;
  min-height: 78px;
  grid-template-columns: 48px minmax(0, 1fr) 74px 112px 20px;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(198, 180, 160, .14);
  background: rgba(12, 11, 15, .63);
  transition: background .2s ease, padding .2s var(--ease), border-color .2s ease;
}
.mission-row:hover {
  padding-right: 12px;
  padding-left: 20px;
  border-bottom-color: rgba(243, 185, 82, .42);
  background: rgba(27, 23, 24, .88);
}
.mission-row-index {
  color: #7A746C;
  font: 500 1rem var(--mono);
}
.mission-row-main { display: grid; gap: 5px; min-width: 0; }
.mission-row-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #8A837A;
  font: 600 .55rem var(--mono);
  letter-spacing: .11em;
}
.mission-row-meta b { color: #D47A5F; font-weight: 600; }
.mission-row-meta i { width: 3px; height: 3px; border-radius: 50%; background: #5E564E; }
.mission-row-main > strong {
  overflow: hidden;
  color: #D9D2CA;
  font-size: .88rem;
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mission-row-points {
  color: #D4C8BE;
  font: 600 .75rem var(--mono);
  text-align: right;
}
.mission-row-points small { color: #827981; font-size: .55rem; }
.mission-row-status {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  color: #9A9188;
  font: 600 .55rem var(--mono);
  letter-spacing: .06em;
  white-space: nowrap;
}
.mission-row-status i:not(.mark-ok) {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 8px rgba(243, 185, 82, .45);
}
.mission-complete .mission-row-status {
  color: var(--success);
}
.mission-row-status .mark-ok {
  margin-right: 2px;
}
.mission-row-arrow { color: #F3B952; text-align: right; }
.command-footer { position: relative; z-index: 1; background: rgba(7, 7, 10, .94); }
.command-footer .footer-inner > div:first-child span { color: var(--text-subtle); }

@keyframes structureRise {
  from { transform: translateY(8px) scaleY(.985); opacity: .62; }
  to { transform: translateY(-8px) scaleY(1.015); opacity: .88; }
}
@keyframes circuitTravel { to { stroke-dashoffset: -240; } }
@keyframes glintTravel {
  0%, 100% { stroke-dashoffset: 700; opacity: 0; }
  25%, 75% { opacity: .45; }
  50% { stroke-dashoffset: -80; opacity: .2; }
}
@keyframes glintPulse {
  0%, 100% { opacity: .06; }
  50% { opacity: .8; }
}
@keyframes dispatchEnter {
  from { transform: translateY(12px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@media (max-width: 760px) {
  .dispatch-board { padding: 20px 20px 38px; }
  .dispatch-feature { grid-template-columns: minmax(0, 1fr) 160px; }
  .dispatch-feature-side { padding: 18px; }
  .dispatch-feature-index { right: 150px; font-size: 15rem; }
  .mission-row { grid-template-columns: 36px minmax(0, 1fr) 62px 18px; gap: 11px; }
  .mission-row-status { display: none; }
}
@media (max-width: 540px) {
  .structure-backdrop { inset: 110px -140px 30px; opacity: .38; }
  .structure-backdrop svg { width: 760px; max-width: none; transform: translateX(-170px); }
  .dispatch-board { padding: 14px 15px 32px; }
  .dispatch-topline { align-items: flex-start; flex-direction: column; justify-content: center; gap: 7px; padding: 10px 0; }
  .dispatch-heading { align-items: flex-start; flex-direction: column; gap: 13px; padding: 22px 0 17px; }
  .dispatch-heading h1 { font-size: 2.35rem; }
  .dispatch-feature { display: block; min-height: 0; }
  .dispatch-feature-content { min-height: 205px; padding: 24px 20px; }
  .dispatch-feature h2 { margin: 19px 0 20px; font-size: 1.55rem; }
  .dispatch-feature-side { display: none; }
  .dispatch-feature-index { top: auto; right: 12px; bottom: -55px; font-size: 12rem; }
  .dispatch-feature-bottom { gap: 14px; }
  .dispatch-feature-bottom .btn { padding: 10px 12px; font-size: .75rem; }
  .dispatch-list-head { padding-top: 25px; }
  .dispatch-list-head > span { font-size: .5rem; }
  .mission-row {
    min-height: 73px;
    grid-template-columns: 27px minmax(0, 1fr) 52px 14px;
    gap: 8px;
    padding-right: 9px;
    padding-left: 9px;
  }
  .mission-row:hover { padding-right: 7px; padding-left: 11px; }
  .mission-row-index { font-size: .8rem; }
  .mission-row-main > strong { font-size: .77rem; }
  .mission-row-meta { gap: 5px; font-size: .48rem; }
  .mission-row-points { font-size: .65rem; }
  .mission-row-points small { font-size: .48rem; }
  .mission-row-arrow { font-size: .8rem; }
  .command-footer { padding-top: 18px; padding-bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .structure, .structure-link, .glint, .glint-line, .dispatch-feature {
    animation: none !important;
  }
}

/* ============================================================
   Auth + Landing publique
   ============================================================ */

.auth-page {
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(241, 90, 56, .08), transparent 42%),
    var(--bg);
}
.auth-shell {
  display: grid;
  min-height: 100vh;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 480px);
}
.auth-visual {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: clamp(32px, 6vw, 72px);
  border-right: 1px solid #2E2924;
  background:
    linear-gradient(160deg, rgba(20, 16, 18, .2), rgba(11, 10, 9, .85)),
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(240, 224, 213, .03) 14px 15px),
    #100E0C;
}
.auth-visual::before {
  position: absolute;
  inset: 12% 18% auto auto;
  width: 280px;
  height: 280px;
  content: "";
  border: 1px solid rgba(241, 90, 56, .18);
  border-radius: 50%;
  box-shadow: 0 0 0 48px rgba(241, 90, 56, .04);
  animation: structureRise 14s ease-in-out infinite alternate;
}
.auth-visual-inner { position: relative; z-index: 1; max-width: 36ch; }
.auth-kicker {
  display: block;
  margin-bottom: 14px;
  color: #F3B952;
  font: 600 .62rem var(--mono);
  letter-spacing: .14em;
}
.auth-brand {
  margin: 0 0 16px;
  color: #F3EFEA;
  font: 700 clamp(2rem, 4vw, 3rem)/1 var(--font);
  letter-spacing: -.05em;
}
.auth-brand b { color: var(--brand); }
.auth-tagline {
  margin: 0;
  color: var(--text-muted);
  font-size: .95rem;
  line-height: 1.55;
}
.auth-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 5vw, 56px);
  background: rgba(11, 10, 14, .96);
}
.auth-logo { margin-bottom: 28px; width: fit-content; }
.auth-panel h1 {
  margin-bottom: 6px;
  font-size: clamp(1.6rem, 3vw, 2rem);
}
.auth-sub {
  margin-bottom: 28px;
  color: var(--text-muted);
  font-size: .9rem;
}
.auth-form { display: grid; gap: 16px; }
.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.auth-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: .82rem;
  cursor: pointer;
}
.auth-check input { accent-color: var(--brand); }
.auth-check-block { align-items: flex-start; line-height: 1.45; }
.auth-switch {
  margin: 22px 0 0;
  color: var(--text-muted);
  font-size: .88rem;
}
.auth-demo { margin-top: 14px; }

.landing-page { background: #0B0A09; }
.landing-hero {
  position: relative;
  min-height: min(88vh, 760px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 72px 0 64px;
  border-bottom: 1px solid #2A2520;
}
.landing-hero-inner { position: relative; z-index: 1; max-width: 720px; }
.landing-brand {
  margin: 0 0 18px;
  color: #B8AFA6;
  font: 700 .78rem var(--mono);
  letter-spacing: .14em;
}
.landing-brand span { color: var(--brand); }
.landing-hero h1 {
  margin: 0 0 18px;
  color: #F3EFEA;
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.06em;
}
.landing-lead {
  max-width: 46ch;
  margin: 0 0 28px;
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.55;
}
.landing-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.landing-section { padding: 72px 0; }
.landing-section-alt {
  border-top: 1px solid #2A2520;
  background: rgba(16, 13, 10, .72);
}
.landing-section .eyebrow {
  margin-bottom: 10px;
}
.landing-section h2 {
  margin-bottom: 10px;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
}
.landing-tracks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 32px 0 24px;
}
.landing-track {
  padding: 22px 18px;
  border: 1px solid #2E2924;
  border-radius: 7px;
  background: rgba(17, 17, 22, .88);
  transition: border-color .2s ease, transform .2s var(--ease);
}
.landing-track:hover {
  border-color: rgba(241, 90, 56, .4);
  transform: translateY(-3px);
}
.landing-track-id {
  display: block;
  margin-bottom: 14px;
  color: #F18564;
  font: 600 .68rem var(--mono);
  letter-spacing: .12em;
}
.landing-track h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}
.landing-track p {
  margin: 0;
  font-size: .86rem;
  color: var(--text-muted);
}
.landing-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #B8AFA6;
  font: 600 .72rem var(--mono);
  letter-spacing: .06em;
}
.landing-more:hover { color: #F3B952; }
.landing-methode {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr);
  gap: 40px;
  align-items: start;
}
.landing-points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}
.landing-points li {
  padding: 16px 18px;
  border: 1px solid #2E2924;
  border-radius: 7px;
  background: rgba(17, 17, 22, .88);
  color: var(--text-muted);
  font-size: .9rem;
}
.landing-points strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text);
}

.sidebar a.is-soon {
  opacity: .55;
  cursor: default;
}
.sidebar a.is-soon:hover {
  background: transparent;
  color: var(--text-muted);
}

.flag-feedback {
  display: none;
  margin-top: 12px;
}
.flag-feedback.is-visible { display: flex; }

@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-visual { min-height: 220px; border-right: 0; border-bottom: 1px solid #2E2924; }
  .landing-tracks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing-methode { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 540px) {
  .landing-tracks { grid-template-columns: 1fr; }
  .landing-hero { min-height: auto; padding: 48px 0 40px; }
  .landing-section { padding: 48px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-glow, .auth-visual::before { animation: none !important; }
}

.points-pill { text-decoration: none; }
.points-pill:hover { color: var(--signal); }

@media (max-width: 700px) {
  .search-wrapper { width: 100% !important; max-width: 100%; }
  .head-row { flex-direction: column; align-items: stretch !important; gap: 14px; }
  .podium { grid-template-columns: 1fr !important; }
  .podium-card.first { transform: none !important; }
}

/* Ambient: reduced motion + page polish */
@media (prefers-reduced-motion: reduce) {
  .ambient-grid, .ambient-orb, .ambient-scan, .ambient-wires {
    animation: none !important;
  }
  .ambient-orb { opacity: .28; }
  .ambient-scan { opacity: .25; }
}

.home-command-page .ambient-orb { opacity: .28; }
.home-command-page .ambient-grid { opacity: .55; }
.landing-page .ambient-orb-a { opacity: .7; }
.auth-page .ambient { opacity: .85; }

/* Check mark sans emoji */
.mark-ok {
  display: inline-grid;
  width: 15px;
  height: 15px;
  place-items: center;
  border: 1px solid var(--success);
  border-radius: 50%;
  color: var(--success);
  font-size: 0;
}
.mark-ok::before {
  content: "";
  width: 7px;
  height: 4px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg) translate(0, -1px);
}
.mark-block {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1em;
  height: 1.1em;
  border: 1.5px solid var(--danger);
  border-radius: 2px;
  color: var(--danger);
  font: 700 .65rem/.1 var(--mono);
}
.mark-block::before { content: "x"; }

/* Arrow sans emoji */
.mark-arrow { color: var(--signal); }

/* Topbar warmer */
.topbar {
  background: rgba(11, 10, 9, .94) !important;
  border-bottom-color: #2A2520 !important;
}


/* ============================================================
   Polish pages — motion & surfaces
   ============================================================ */

.card, .panel, .stat, .podium-card, .landing-track, .mission-row, .dispatch-feature {
  backdrop-filter: blur(6px);
}

.card {
  transition: transform .28s var(--ease), border-color .2s ease, box-shadow .28s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -28px rgba(0, 0, 0, .95), 0 0 0 1px rgba(241, 90, 56, .12);
}

.stat {
  transition: transform .25s var(--ease), border-color .2s ease;
}
.stat:hover { transform: translateY(-3px); }

.landing-hero-inner {
  animation: cascadeIn .7s var(--ease) both;
}
.landing-brand {
  animation: cascadeIn .6s var(--ease) .05s both;
}
.landing-hero h1 {
  animation: cascadeIn .7s var(--ease) .12s both;
}
.landing-lead, .landing-cta {
  animation: cascadeIn .7s var(--ease) .22s both;
}
.landing-track {
  animation: cascadeIn .55s var(--ease) both;
}
.landing-track:nth-child(1) { animation-delay: .08s; }
.landing-track:nth-child(2) { animation-delay: .16s; }
.landing-track:nth-child(3) { animation-delay: .24s; }
.landing-track:nth-child(4) { animation-delay: .32s; }

.auth-panel {
  animation: cascadeIn .55s var(--ease) both;
}
.auth-visual-inner {
  animation: cascadeIn .7s var(--ease) .1s both;
}

.table tbody tr {
  transition: background .18s ease, transform .18s ease;
}
.table tbody tr:hover {
  transform: translateX(2px);
}

.progress-bar {
  animation: loadProgress 1.1s var(--ease) both;
}

.podium-card.first {
  border-color: rgba(243, 185, 82, .45) !important;
  box-shadow: 0 16px 40px -20px rgba(243, 185, 82, .18);
}
.podium-silver { color: #C4BBB0 !important; }
.podium-gold { color: var(--signal) !important; }
.podium-bronze { color: #C47A2A !important; }

/* ---------- Parcours unifié : progression guidée des défis ---------- */
.learning-page { padding-bottom: 24px; }
.learning-kicker, .route-index, .route-state, .route-points, .route-note {
  font-family: var(--mono); letter-spacing: .08em;
}
.learning-kicker {
  display: flex; align-items: center; gap: 9px; color: var(--text-muted);
  font-size: .68rem; font-weight: 600;
}
.learning-kicker > span, .route-pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--signal);
  box-shadow: 0 0 12px rgba(243, 185, 82, .55);
}
.learning-kicker i { color: var(--text-subtle); font-style: normal; }
.learning-heading {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  margin: 15px 0 24px;
}
.learning-heading h1 { margin-bottom: 8px; }
.learning-heading .page-sub { max-width: 58ch; margin-bottom: 0; }
.learning-count { display: flex; align-items: center; gap: 10px; color: var(--text-subtle); }
.learning-count strong {
  color: var(--signal); font: 600 2.4rem/1 var(--mono); letter-spacing: -.08em;
}
.learning-count span { font: 500 .58rem/1.6 var(--mono); letter-spacing: .06em; }
.learning-progress { max-width: 480px; }
.learning-progress .progress-label { font-size: .76rem; }
.learning-guide {
  display: grid; grid-template-columns: 46px minmax(220px, 1fr) minmax(270px, .85fr);
  gap: 20px; align-items: center; padding: 21px 24px;
  border: 1px solid rgba(241, 90, 56, .22); border-radius: var(--radius);
  background: linear-gradient(112deg, rgba(42, 26, 23, .92), rgba(24, 22, 21, .88) 62%, rgba(33, 28, 21, .9));
}
.guide-mark {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  color: var(--signal); background: var(--brand-soft); font-size: 1.3rem;
}
.guide-copy .eyebrow { margin: 0 0 6px; color: var(--signal); font-size: .62rem; }
.guide-copy h2 { margin: 0 0 5px; font-size: 1rem; }
.guide-copy > p:last-child { max-width: 64ch; margin: 0; color: var(--text-muted); font-size: .79rem; line-height: 1.6; }
.guide-scale { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.guide-scale > div { display: grid; justify-items: center; gap: 7px; min-width: 62px; }
.guide-scale > div b { color: var(--text-muted); font-size: .62rem; font-weight: 500; }
.guide-scale > i { flex: 1; height: 1px; min-width: 12px; background: linear-gradient(90deg, var(--brand), var(--border)); }
.guide-dot {
  display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--border);
  border-radius: 50%; color: var(--text-subtle); background: var(--surface); font: 500 .62rem var(--mono);
}
.guide-dot-active { color: var(--on-brand); border-color: var(--brand); background: var(--brand); }
.guide-dot-mid { color: var(--signal); border-color: rgba(243, 185, 82, .35); }
.learning-route { padding-top: 48px; }
.learning-section-head { align-items: flex-end; }
.learning-section-head .eyebrow { margin-bottom: 5px; color: var(--text-subtle); font-size: .62rem; }
.learning-section-head .section-title { font-size: 1.35rem; }
.route-note { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: .6rem; }
.route-pulse { width: 6px; height: 6px; animation: routePulse 1.8s ease-in-out infinite; }
.route-list { position: relative; display: grid; gap: 15px; }
.route-list::before {
  position: absolute; z-index: 0; top: 25px; bottom: 25px; left: 19px; width: 1px;
  content: ""; background: linear-gradient(var(--brand), rgba(113, 97, 79, .48) 35%, rgba(113, 97, 79, .15));
}
.route-step { position: relative; z-index: 1; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 17px; }
.route-marker {
  display: grid; place-items: center; align-self: start; width: 40px; height: 40px;
  border: 1px solid var(--border-strong); border-radius: 50%; color: var(--text-muted);
  background: #151311; font: 600 .72rem var(--mono);
}
.route-done .route-marker { color: #0C1510; border-color: var(--success); background: var(--success); }
.route-active .route-marker {
  color: var(--on-brand); border: 4px solid rgba(241, 90, 56, .2); background: var(--brand);
  box-shadow: 0 0 0 1px var(--brand), 0 0 20px rgba(241, 90, 56, .2);
}
.route-card {
  min-width: 0; padding: 20px 23px; border: 1px solid var(--border);
  border-radius: var(--radius); background: rgba(22, 20, 18, .93);
  transition: border-color var(--transition-smooth), background var(--transition-smooth), transform var(--transition-smooth);
}
.route-card-top, .route-identity, .route-foot { display: flex; align-items: center; }
.route-card-top { justify-content: space-between; gap: 16px; }
.route-identity { gap: 12px; flex-wrap: wrap; }
.route-index { color: var(--text-muted); font-size: .63rem; font-weight: 600; }
.route-index i { color: var(--text-subtle); font-style: normal; }
.route-state { display: inline-flex; align-items: center; gap: 6px; font-size: .56rem; font-weight: 600; }
.state-done { color: var(--success); }
.state-active { color: var(--signal); }
.state-active > span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.state-locked { color: var(--text-subtle); }
.route-points { flex: none; color: var(--text); font-size: .82rem; font-weight: 600; }
.route-points small { color: var(--text-subtle); font-size: .55rem; }
.route-card h3 { margin: 12px 0 5px; color: var(--text); font-size: 1.05rem; }
.route-card > p { margin: 0; color: var(--text-muted); font-size: .81rem; line-height: 1.55; }
.route-foot { gap: 9px 13px; flex-wrap: wrap; margin-top: 16px; }
.assist-tag, .notion-tag {
  display: inline-flex; align-items: center; gap: 6px; min-height: 25px; padding: 4px 9px;
  border: 1px solid var(--border); border-radius: 4px; color: var(--text-muted);
  font-size: .65rem; line-height: 1.35;
}
.assist-tag > span { color: var(--signal); }
.assist-full { border-color: rgba(241, 90, 56, .26); color: #E8B0A0; background: rgba(241, 90, 56, .07); }
.assist-full > span { color: var(--brand); }
.assist-hints { border-color: rgba(243, 185, 82, .2); color: #D4B982; }
.assist-independent { color: #A6C4AE; border-color: rgba(116, 177, 132, .22); }
.assist-independent > span { color: var(--success); }
.notion-tag { color: var(--text-subtle); border-color: transparent; padding-left: 0; }
.route-link { margin-left: auto; color: var(--text-muted); font-size: .72rem; font-weight: 600; }
.route-link span { margin-left: 4px; color: var(--signal); }
.route-meter { max-width: 460px; margin-top: 15px; }
.route-meter .progress-label { margin-bottom: 6px; font-size: .67rem; }
.route-active .route-card { border-color: rgba(241, 90, 56, .45); background: linear-gradient(110deg, rgba(39, 25, 22, .96), rgba(22, 20, 18, .96) 70%); }
.route-active .route-card h3 { font-size: 1.2rem; }
.route-active .route-card:hover { transform: translateY(-2px); border-color: var(--brand); }
.route-done .route-card { background: rgba(24, 23, 20, .82); }
.route-locked .route-card { border-style: dashed; background: rgba(18, 17, 16, .72); }
.route-locked .route-card h3 { color: #AAA39B; }
.route-locked .route-card > p { color: #827B73; }
.route-locked .route-points { color: var(--text-muted); }
.route-unlock { margin-left: auto; color: var(--text-subtle); font-size: .66rem; }
.route-disclaimer { margin: 16px 0 0 57px; color: var(--text-subtle); font-size: .68rem; }
.walkthrough-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.walkthrough-heading .panel-title { margin: 5px 0 0; }
.walkthrough-visible {
  flex: none; padding: 6px 9px; border: 1px solid rgba(241, 90, 56, .28);
  border-radius: 4px; color: #E8B0A0; background: rgba(241, 90, 56, .07);
  font: 600 .56rem var(--mono); letter-spacing: .06em;
}
.challenge-walkthrough > p { max-width: 76ch; margin: 12px 0 15px; }
.walkthrough-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.walkthrough-steps li {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 11px;
  padding: 12px 0; border-top: 1px solid var(--border);
}
.walkthrough-steps li > span { color: var(--brand); font: 600 .68rem var(--mono); }
.walkthrough-steps strong { color: var(--text); font-size: .82rem; }
.walkthrough-steps p { margin: 4px 0 0; color: var(--text-muted); font-size: .77rem; line-height: 1.55; }
@keyframes routePulse { 50% { opacity: .45; box-shadow: 0 0 3px rgba(243, 185, 82, .25); } }

.map-legend {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin: -5px 0 13px;
  color: var(--text-muted); font: 500 .64rem var(--mono); letter-spacing: .04em;
}
.map-legend span { display: inline-flex; align-items: center; gap: 7px; }
.map-legend svg {
  width: 16px; height: 16px; fill: none; stroke: var(--text-subtle);
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.route-map {
  position: relative; min-height: 1180px; overflow: hidden; isolation: isolate;
  border: 1px solid rgba(143, 123, 99, .25); border-radius: 14px;
  background-color: #171512;
  background-image:
    radial-gradient(ellipse at 22% 15%, rgba(87, 103, 73, .17), transparent 27%),
    radial-gradient(ellipse at 83% 38%, rgba(103, 71, 53, .14), transparent 30%),
    radial-gradient(ellipse at 30% 76%, rgba(87, 103, 73, .12), transparent 25%),
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(188, 164, 128, .045) 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(188, 164, 128, .045) 40px);
  box-shadow: inset 0 0 90px rgba(0, 0, 0, .42), 0 18px 50px -36px #000;
}
.route-map::before, .route-map::after {
  position: absolute; z-index: -1; width: 440px; height: 300px; border: 1px solid rgba(131, 151, 105, .11);
  border-radius: 48% 52% 61% 39% / 51% 38% 62% 49%; content: "";
  transform: rotate(-21deg); pointer-events: none;
}
.route-map::before { top: 6%; left: -5%; box-shadow: 0 0 0 14px rgba(0,0,0,0), 0 0 0 15px rgba(131,151,105,.08), 0 0 0 30px rgba(0,0,0,0), 0 0 0 31px rgba(131,151,105,.06); }
.route-map::after { right: -8%; bottom: 10%; width: 520px; height: 360px; border-color: rgba(161, 119, 84, .1); box-shadow: 0 0 0 16px rgba(0,0,0,0), 0 0 0 17px rgba(161,119,84,.07), 0 0 0 34px rgba(0,0,0,0), 0 0 0 35px rgba(161,119,84,.05); }
.map-coordinate {
  position: absolute; z-index: 1; color: rgba(185, 173, 155, .48);
  font: 500 .55rem var(--mono); letter-spacing: .12em; pointer-events: none;
}
.map-coordinate-nw { top: 22px; left: 25px; }
.map-coordinate-ne { top: 22px; right: 25px; }
.map-coordinate-sw { bottom: 22px; left: 25px; }
.map-compass {
  position: absolute; z-index: 1; top: 54px; right: 27px; display: grid; justify-items: center; gap: 1px;
  color: rgba(185, 173, 155, .55); font: 500 .54rem var(--mono);
}
.map-compass i { color: var(--signal); font-size: .8rem; font-style: normal; }
.map-route-art { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; }
.map-road-bed {
  fill: none; stroke: rgba(4, 4, 3, .8); stroke-width: 44; stroke-linecap: round;
  stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
.map-road-line {
  fill: none; stroke: rgba(179, 154, 116, .2); stroke-width: 30; stroke-linecap: round;
  stroke-linejoin: round; stroke-dasharray: 2 12; vector-effect: non-scaling-stroke;
}
.map-road-progress {
  fill: none; stroke: rgba(92, 184, 138, .6); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 7 8; vector-effect: non-scaling-stroke;
}
.map-waypoint { fill: #201D19; stroke: rgba(179, 154, 116, .48); stroke-width: 2; vector-effect: non-scaling-stroke; }
.map-waypoint-done { fill: var(--success); stroke: #B7E3C8; }
.map-waypoint-active { fill: var(--signal); stroke: #FFE2A1; filter: drop-shadow(0 0 9px rgba(243, 185, 82, .7)); }
.map-stop {
  position: absolute; z-index: 2; display: grid; grid-template-columns: 1fr;
  width: 43%; min-height: 174px; padding: 17px 18px 16px 74px;
  border: 1px solid rgba(139, 125, 107, .36); border-radius: 11px;
  background: rgba(23, 21, 19, .96); box-shadow: 0 10px 28px rgba(0, 0, 0, .34);
  transition: transform var(--transition-smooth), border-color var(--transition-smooth), box-shadow var(--transition-smooth);
}
.map-stop-1 { top: 1.5%; left: 3%; }
.map-stop-2 { top: 21.5%; right: 3%; }
.map-stop-3 { top: 41.5%; left: 3%; }
.map-stop-4 { top: 61.5%; right: 3%; }
.map-stop-5 { top: 81.5%; left: 28.5%; }
.map-stop-icon {
  position: absolute; top: 18px; left: 17px; display: grid; place-items: center;
  width: 42px; height: 42px; border: 1px solid rgba(185, 173, 155, .22);
  border-radius: 12px; color: #B8A98E; background: rgba(141, 121, 91, .1);
}
.map-stop-icon svg {
  width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.map-stop-content { min-width: 0; }
.map-stop .route-card-top { min-height: 20px; }
.map-stop .route-identity { gap: 8px; }
.map-stop .route-index { font-size: .58rem; }
.map-stop .route-state { font-size: .51rem; }
.map-stop .route-points { font-size: .75rem; }
.map-stop h3 { margin: 11px 0 5px; color: var(--text); font-size: .91rem; line-height: 1.35; }
.map-stop > .map-stop-content > p { margin: 0; color: var(--text-muted); font-size: .72rem; line-height: 1.5; }
.map-stop-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 13px; }
.map-stop .assist-tag { min-height: 23px; padding: 3px 7px; font-size: .59rem; }
.map-stop .assist-tag b { font-size: .76rem; font-weight: 600; }
.map-stop .route-link { margin-left: auto; font-size: .67rem; }
.map-stop .route-unlock { margin-left: auto; font-size: .58rem; }
.map-stop .route-meter { margin-top: 9px; }
.map-stop .route-meter .progress-label { margin-bottom: 4px; font-size: .59rem; }
.map-stop .btn { padding: 6px 10px; font-size: .65rem; }
.map-stop.route-done { border-color: rgba(92, 184, 138, .4); }
.map-stop.route-done .map-stop-icon { color: var(--success); border-color: rgba(92, 184, 138, .35); background: rgba(92, 184, 138, .09); }
.map-stop.route-active {
  border-color: rgba(243, 185, 82, .67);
  background: linear-gradient(120deg, rgba(43, 33, 23, .98), rgba(24, 22, 19, .98) 68%);
  box-shadow: 0 12px 36px rgba(0, 0, 0, .42), 0 0 32px rgba(243, 185, 82, .08);
}
.map-stop.route-active .map-stop-icon { color: var(--signal); border-color: rgba(243, 185, 82, .46); background: rgba(243, 185, 82, .1); }
.map-stop.route-active h3 { color: #FFF3D8; }
.map-stop.route-active:hover { transform: translateY(-3px); border-color: var(--signal); box-shadow: 0 16px 36px rgba(0, 0, 0, .45), 0 0 36px rgba(243, 185, 82, .13); }
.map-stop.route-locked { border-color: rgba(139, 125, 107, .2); background: rgba(20, 19, 17, .9); }
.map-stop.route-locked .map-stop-icon { color: #787165; border-style: dashed; background: rgba(110, 101, 88, .06); }
.map-stop.route-locked h3 { color: #B1AAA0; }
.map-stop.route-locked > .map-stop-content > p { color: #8A837A; }
.map-stop.route-locked .route-points { color: #B1AAA0; }
.map-stop.route-final { width: 43%; }
.route-disclaimer { margin: 12px 0 0; color: var(--text-subtle); font-size: .68rem; }

@media (max-width: 900px) {
  .learning-guide { grid-template-columns: 42px minmax(0, 1fr); }
  .guide-scale { grid-column: 2; max-width: 380px; }
  .route-map { min-height: 1120px; }
  .map-stop { width: 46%; padding-left: 65px; }
  .map-stop-5 { left: 27%; }
  .map-stop-icon { left: 13px; width: 38px; height: 38px; }
  .map-stop .route-identity { gap: 6px; }
  .map-stop .route-index { font-size: .54rem; }
  .map-stop .route-state { font-size: .47rem; }
}
@media (max-width: 640px) {
  .learning-heading { align-items: flex-start; }
  .learning-count { gap: 6px; }
  .learning-count strong { font-size: 1.8rem; }
  .learning-count span { font-size: .49rem; }
  .learning-guide { grid-template-columns: 34px minmax(0, 1fr); gap: 13px; padding: 17px; }
  .guide-mark { width: 34px; height: 34px; }
  .guide-copy h2 { font-size: .92rem; }
  .guide-copy > p:last-child { font-size: .73rem; }
  .guide-scale { grid-column: 1 / -1; width: 100%; }
  .learning-route { padding-top: 36px; }
  .map-legend { gap: 10px 15px; font-size: .58rem; }
  .route-map {
    display: grid; gap: 12px; min-height: 0; padding: 44px 12px 18px 20px;
    overflow: hidden; background-size: auto, auto, auto, 28px 28px, 28px 28px;
  }
  .route-map::before { top: 0; left: -240px; }
  .route-map::after { right: -300px; bottom: 0; }
  .map-route-art, .map-compass { display: none; }
  .map-coordinate { font-size: .48rem; }
  .map-coordinate-nw { top: 15px; left: 17px; }
  .map-coordinate-ne { top: 15px; right: 17px; }
  .map-coordinate-sw { display: none; }
  .route-map .map-stop {
    position: relative; inset: auto; width: 100%; min-height: 0; padding: 15px 13px 14px 62px;
    border-radius: 9px;
  }
  .route-map .map-stop::before {
    position: absolute; z-index: -1; top: 50%; right: calc(100% + 10px); width: 22px;
    border-top: 2px dashed rgba(179, 154, 116, .42); content: "";
  }
  .route-map .map-stop-icon { top: 15px; left: 12px; width: 36px; height: 36px; border-radius: 10px; }
  .route-map .map-stop-icon svg { width: 20px; height: 20px; }
  .route-map .map-stop h3 { margin-top: 9px; font-size: .85rem; }
  .route-map .map-stop > .map-stop-content > p { font-size: .69rem; }
  .route-map .map-stop .route-identity { gap: 7px; }
  .route-map .map-stop .route-index { font-size: .53rem; }
  .route-map .map-stop .route-state { font-size: .46rem; }
  .route-map .map-stop .route-points { font-size: .68rem; }
  .route-map .map-stop-foot { gap: 7px; margin-top: 10px; }
  .route-map .map-stop .assist-tag { font-size: .55rem; }
  .route-map .map-stop .route-unlock { margin-left: 0; font-size: .54rem; }
  .route-disclaimer { line-height: 1.5; }
  .walkthrough-heading { align-items: flex-start; flex-direction: column; }
}

/* Carte de progression par catégories : itinéraire continu jusqu'à l'arrivée. */
.route-map {
  height: 1000px;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
.map-departure {
  position: absolute;
  z-index: 2;
  top: 1.2%;
  left: 50%;
  padding: 5px 11px;
  transform: translateX(-50%);
  border: 1px solid rgba(92, 184, 138, .45);
  border-radius: 999px;
  color: #B8E3C8;
  background: #17221B;
  font: 600 .58rem var(--mono);
  letter-spacing: .12em;
}
.route-map .map-route-art {
  display: block;
}
.route-map .map-road-bed {
  stroke: rgba(5, 5, 4, .92);
  stroke-width: 48;
}
.route-map .map-road-line {
  stroke: rgba(195, 157, 95, .68);
  stroke-width: 34;
  stroke-dasharray: none;
}
.route-map .map-road-center {
  fill: none;
  stroke: rgba(255, 225, 166, .82);
  stroke-width: 2.5;
  stroke-dasharray: 3 12;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.route-map .map-road-progress {
  stroke: #8BD3A6;
  stroke-width: 5;
  stroke-dasharray: 8 10;
}
.map-category {
  position: absolute;
  z-index: 3;
  top: var(--map-y);
  left: var(--map-x);
  display: grid;
  width: 76px;
  height: 76px;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(203, 177, 132, .8);
  border-radius: 50%;
  color: #D7C5A5;
  background: radial-gradient(circle at 35% 25%, #393127, #171512 72%);
  box-shadow: 0 0 0 8px rgba(10, 9, 8, .58), 0 8px 22px rgba(0, 0, 0, .55);
}
.map-category svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.map-category.map-done {
  color: #A4E1B8;
  border-color: #69BA84;
  background: radial-gradient(circle at 35% 25%, #284735, #122119 72%);
}
.map-category.map-current {
  color: #FFE1A3;
  border-color: #F3B952;
  background: radial-gradient(circle at 35% 25%, #5C4524, #21190F 72%);
  box-shadow: 0 0 0 9px rgba(243, 185, 82, .14), 0 0 28px rgba(243, 185, 82, .35), 0 8px 22px rgba(0, 0, 0, .55);
  animation: mapCurrentPulse 2.4s ease-in-out infinite;
}
.map-category.map-locked {
  color: #827B70;
  border-color: rgba(141, 130, 112, .5);
  border-style: dashed;
  background: radial-gradient(circle at 35% 25%, #302C26, #161513 72%);
}
.map-finish {
  position: absolute;
  z-index: 3;
  top: var(--map-y);
  left: var(--map-x);
  display: grid;
  justify-items: center;
  gap: 7px;
  transform: translate(-50%, -50%);
}
.map-finish-icon {
  display: grid;
  width: 70px;
  height: 70px;
  place-items: center;
  border: 2px solid #F15A38;
  border-radius: 50%;
  color: #FFD0C3;
  background: radial-gradient(circle at 35% 25%, #713421, #271611 75%);
  box-shadow: 0 0 0 9px rgba(241, 90, 56, .13), 0 0 36px rgba(241, 90, 56, .32), 0 8px 24px rgba(0, 0, 0, .55);
}
.map-finish-icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.map-finish strong {
  padding: 5px 9px;
  border: 1px solid rgba(241, 90, 56, .45);
  border-radius: 3px;
  color: #FFD0C3;
  background: #251713;
  font: 600 .56rem var(--mono);
  letter-spacing: .08em;
  white-space: nowrap;
}
@keyframes mapCurrentPulse {
  50% { box-shadow: 0 0 0 13px rgba(243, 185, 82, .08), 0 0 36px rgba(243, 185, 82, .22), 0 8px 22px rgba(0, 0, 0, .55); }
}
@media (max-width: 640px) {
  .route-map {
    display: block;
    height: 900px;
    padding: 0;
  }
  .route-map .map-route-art {
    display: block;
  }
  .route-map .map-category {
    width: 60px;
    height: 60px;
    box-shadow: 0 0 0 5px rgba(10, 9, 8, .62), 0 6px 18px rgba(0, 0, 0, .55);
  }
  .route-map .map-category svg {
    width: 27px;
    height: 27px;
  }
  .route-map .map-category.map-current {
    box-shadow: 0 0 0 7px rgba(243, 185, 82, .14), 0 0 22px rgba(243, 185, 82, .3), 0 6px 18px rgba(0, 0, 0, .55);
  }
  .route-map .map-finish-icon {
    width: 58px;
    height: 58px;
  }
  .route-map .map-finish-icon svg {
    width: 25px;
    height: 25px;
  }
  .route-map .map-finish strong {
    font-size: .49rem;
  }
  .route-map .map-departure {
    top: .8%;
    font-size: .5rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .route-pulse { animation: none; }
  .map-category.map-current { animation: none; }
}

.filter-btn.active {
  color: var(--on-brand) !important;
}

/* Page sections breathe above ambient */
main, .admin-shell, .auth-shell, .command-main {
  position: relative;
  z-index: 1;
}
.topbar, .footer {
  position: relative;
  z-index: 2;
}
.topbar { position: sticky; z-index: 50; }

/* ---------- Finition globale : transitions, focus et hiérarchie ---------- */
:focus-visible {
  outline: 2px solid var(--signal) !important;
  outline-offset: 3px;
}
.btn, .nav a, .sidebar a, .footer-links a, .brand {
  transition: color .18s ease, background .22s ease, border-color .22s ease,
    box-shadow .25s var(--ease), transform .25s var(--ease);
}
.btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,.28), 0 0 20px rgba(241,90,56,.12);
}
.btn:active:not(:disabled) { transform: translateY(0) scale(.985); }
.btn:disabled { cursor: not-allowed; opacity: .55; }
.input, .select, .textarea {
  transition: border-color .2s ease, box-shadow .25s ease, background .2s ease;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: rgba(243,185,82,.72);
  box-shadow: 0 0 0 3px rgba(243,185,82,.1), 0 0 24px rgba(243,185,82,.06);
}
.page-head { animation: cascadeIn .56s var(--ease) both; }
.section > .split > div > .panel,
.section > .split > aside > .panel {
  animation: cascadeIn .52s var(--ease) both;
}
.section > .split > div > .panel:nth-child(2) { animation-delay: .07s; }
.section > .split > div > .panel:nth-child(3) { animation-delay: .14s; }
.section > .split > div > .panel:nth-child(4) { animation-delay: .21s; }
.section > .split > aside > .panel:nth-child(2) { animation-delay: .1s; }

/* Auth: un panneau de connexion plus vivant et cohérent avec le Cyber Range. */
.auth-shell { overflow: hidden; }
.auth-visual {
  isolation: isolate;
  min-height: 100vh;
  background-image:
    linear-gradient(rgba(241,90,56,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(241,90,56,.055) 1px, transparent 1px),
    linear-gradient(160deg, rgba(20,16,18,.16), rgba(11,10,9,.86)),
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(240,224,213,.03) 14px 15px),
    #100E0C;
  background-size: 46px 46px, 46px 46px, auto, auto, auto;
}
.auth-visual::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  opacity: .42;
  background: linear-gradient(180deg, transparent 46%, rgba(243,185,82,.09) 50%, transparent 54%);
  background-size: 100% 240%;
  animation: authScan 9s ease-in-out infinite;
}
@keyframes authScan {
  0%, 100% { background-position: 0 -100%; }
  50% { background-position: 0 100%; }
}
.auth-radar {
  position: absolute;
  width: clamp(230px, 31vw, 430px);
  aspect-ratio: 1;
  top: 12%;
  left: 50%;
  transform: translateX(-15%);
  border: 1px solid rgba(243,185,82,.16);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(243,185,82,.08), rgba(241,90,56,.025) 42%, transparent 69%);
  box-shadow: 0 0 80px rgba(241,90,56,.08), inset 0 0 50px rgba(243,185,82,.04);
}
.radar-ring { position: absolute; inset: 15%; border: 1px solid rgba(243,185,82,.14); border-radius: 50%; }
.ring-2 { inset: 30%; border-color: rgba(241,90,56,.2); }
.ring-3 { inset: 45%; border-color: rgba(243,185,82,.22); }
.radar-cross::before, .radar-cross::after { position:absolute; content:""; background:rgba(243,185,82,.14); }
.radar-cross::before { left:50%; top:5%; bottom:5%; width:1px; }
.radar-cross::after { top:50%; left:5%; right:5%; height:1px; }
.radar-sweep {
  position: absolute; inset: 4%; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 78%, rgba(243,185,82,.18) 92%, transparent 100%);
  animation: radarRotate 12s linear infinite;
}
@keyframes radarRotate { to { transform: rotate(360deg); } }
.radar-point { position:absolute; z-index:1; width:6px; height:6px; border-radius:50%; background:var(--signal); box-shadow:0 0 13px rgba(243,185,82,.95); animation: radarPing 2.8s ease-in-out infinite; }
.point-a { top:28%; left:67%; }
.point-b { top:61%; left:32%; animation-delay:.8s; background:var(--brand); }
.point-c { top:73%; left:71%; animation-delay:1.5s; }
@keyframes radarPing { 0%,100% { opacity:.42; transform:scale(.72); } 50% { opacity:1; transform:scale(1.4); } }
.radar-center { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:rgba(243,239,234,.62); font:600 .58rem var(--mono); letter-spacing:.12em; }
.auth-visual-inner { margin-bottom: 2vh; }
.auth-kicker { display:flex; align-items:center; gap:10px; }
.auth-kicker::before { content:""; width:20px; height:1px; background:var(--signal); box-shadow:0 0 10px var(--signal); }
.auth-brand { text-shadow:0 10px 50px rgba(241,90,56,.12); }
.auth-panel {
  position: relative;
  background: radial-gradient(ellipse at 80% 8%, rgba(241,90,56,.07), transparent 38%), rgba(11,10,9,.97);
  border-left: 1px solid rgba(255,244,230,.035);
}
.auth-panel::before {
  position:absolute; content:""; top:11%; left:0; width:2px; height:62px;
  background:linear-gradient(transparent,var(--brand),transparent); opacity:.7;
}
.auth-form .field { animation: authFieldIn .5s var(--ease) both; }
.auth-form .field:nth-child(2) { animation-delay:.07s; }
.auth-form .field:nth-child(3) { animation-delay:.14s; }
.auth-form .field:nth-child(4) { animation-delay:.21s; }
@keyframes authFieldIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.auth-message, .form-feedback {
  margin:0; padding:10px 12px; border:1px solid var(--signal-border); border-radius:var(--radius-sm);
  background:var(--signal-soft); color:var(--text); font-size:.82rem;
}
.auth-message[hidden], .form-feedback[hidden], [hidden] { display:none !important; }
.auth-row .muted { line-height:1.4; }
.auth-demo { padding-top:12px; border-top:1px solid var(--border-subtle); }

@media (max-width: 900px) {
  .auth-visual { min-height: 36vh; }
  .auth-radar { width:clamp(170px,33vw,260px); top:4%; left:auto; right:5%; transform:none; }
  .auth-visual-inner { margin:0; }
  .auth-panel { border-left:0; }
}
@media (max-width: 540px) {
  .auth-visual { min-height:250px; padding:28px 24px; }
  .auth-radar { width:160px; top:8px; right:-24px; opacity:.8; }
  .auth-panel { padding:30px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-visual::after, .radar-sweep, .radar-point, .auth-form .field { animation:none !important; }
  .section > .split > div > .panel, .section > .split > aside > .panel { animation:none !important; }
}