/* ==========================================================================
   QuizQuest ADMIN — Régie de plateau
   Identité : qq-tokens.css (nuit violette, néons) — ZÉRO nouvelle palette
   ========================================================================== */

/* --------------------------------------------------------------------------
   LAYOUT RACINE
   -------------------------------------------------------------------------- */

.adm-root {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* --------------------------------------------------------------------------
   TOPBAR
   -------------------------------------------------------------------------- */

.adm-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-6);
  height: 56px;
  background: rgba(14, 11, 26, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(108, 59, 255, 0.18);
  flex-shrink: 0;
  /* zéro débordement horizontal à toutes tailles */
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.adm-logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-xl);
  letter-spacing: -0.02em;
  line-height: 1;
  text-decoration: none;
  color: var(--text);
}
.adm-logo em { font-style: normal; color: var(--accent); }

.adm-logo-badge {
  font-family: var(--font-score);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: rgba(108, 59, 255, 0.15);
  border: 1px solid rgba(108, 59, 255, 0.25);
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  margin-left: var(--space-2);
}

.adm-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.adm-nav-link {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--text-dim);
  text-decoration: none;
  /* zone cliquable ≥44px (RGAA) */
  padding: var(--space-3) var(--space-4);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-sm);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  border: none;
  background: transparent;
  cursor: pointer;
}
.adm-nav-link:hover { color: var(--text); background: rgba(108, 59, 255, 0.12); }
.adm-nav-link.is-active { color: var(--text); background: rgba(108, 59, 255, 0.20); }
.adm-nav-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.adm-nav-divider {
  width: 1px;
  height: 20px;
  background: rgba(199, 189, 240, 0.15);
  margin: 0 var(--space-2);
}

.adm-topbar-logout {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--text-dim);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  transition: color var(--t-fast) var(--ease);
}
/* Espace en cours — repère indispensable sur une machine partagée : le
   prestataire doit voir sur QUEL espace il travaille avant de lancer une partie.
   min-width:0 + ellipsis : un nom de commune long ne doit jamais pousser la nav
   hors de l'écran (la topbar est en flex, sans ça elle déborde). */
.adm-topbar-space {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  overflow: hidden;
}
.adm-topbar-space-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 32ch;
}
.adm-topbar-space-tag {
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(108, 59, 255, 0.16);
  border: 1px solid rgba(108, 59, 255, 0.32);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-2);
  white-space: nowrap;
}

/* Aide sous le champ « Code d'accès » — casse normale (pas le text-transform
   majuscule de .adm-login-sub) : la consigne « sans I, L, O ni U » doit se lire. */
.adm-login-hint {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--text-dim);
}

.adm-topbar-logout:hover { color: var(--bad); }
.adm-topbar-logout:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   PAGE SHELL
   -------------------------------------------------------------------------- */

.adm-page {
  flex: 1;
  padding: var(--space-8) var(--space-6);
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.adm-page--centered {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100dvh - 56px);
  padding: var(--space-8) var(--space-4);
}

/* --------------------------------------------------------------------------
   ÉCRAN 1 — LOGIN
   -------------------------------------------------------------------------- */

.adm-login-card {
  width: 100%;
  max-width: 400px;
}

.adm-login-logo {
  text-align: center;
  margin-bottom: var(--space-8);
}

.adm-login-neon {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-4xl);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text);
  text-shadow:
    0 0 20px rgba(108, 59, 255, 0.80),
    0 0 60px rgba(108, 59, 255, 0.40);
}
.adm-login-neon em { font-style: normal; color: var(--accent-hot); text-shadow: 0 0 24px rgba(255, 60, 128, 0.90); }

.adm-login-sub {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.adm-login-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-dim);
  margin-bottom: var(--space-2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.adm-login-pw {
  font-family: var(--font-score);
  font-size: var(--text-xl);
  letter-spacing: 0.12em;
}

.adm-login-error {
  color: var(--accent-hot);
  font-size: var(--text-sm);
  font-weight: 700;
  min-height: 1.5rem;
  margin-top: var(--space-3);
  text-align: center;
}

/* Secousse magenta sur le champ erreur */
.adm-shake {
  animation: qq-shake 400ms var(--ease);
  border-color: var(--accent-hot) !important;
  box-shadow: 0 0 0 3px rgba(255, 60, 128, 0.30) !important;
}

/* --------------------------------------------------------------------------
   ÉCRAN 2 — DASHBOARD
   -------------------------------------------------------------------------- */

.adm-dash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.adm-dash-title {
  font-size: var(--text-2xl);
  font-weight: 800;
  margin: 0;
}
.adm-dash-subtitle {
  font-size: var(--text-sm);
  color: var(--text-dim);
  font-weight: 700;
  margin: var(--space-1) 0 0;
}

/* Tuiles KPI */
.adm-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.adm-kpi {
  background: var(--bg-2);
  border: 1px solid rgba(108, 59, 255, 0.14);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--t-normal) var(--ease), border-color var(--t-normal) var(--ease);
}
.adm-kpi:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(108, 59, 255, 0.30);
}
.adm-kpi::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--kpi-accent, var(--accent));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.adm-kpi-label {
  font-family: var(--font-score);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: var(--space-3);
}

.adm-kpi-value {
  font-family: var(--font-score);
  font-size: var(--text-4xl);
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.01em;
}

.adm-kpi-delta {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-dim);
}
.adm-kpi-delta.up   { color: var(--ok); }
.adm-kpi-delta.down { color: var(--bad); }

/* Mini sparkline */
.adm-sparkline {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 32px;
  margin-top: var(--space-4);
}
.adm-spark-bar {
  flex: 1;
  background: rgba(108, 59, 255, 0.30);
  border-radius: 3px 3px 0 0;
  min-height: 4px;
  transition: background var(--t-fast) var(--ease);
}
.adm-spark-bar.current {
  background: var(--kpi-accent, var(--accent));
  box-shadow: 0 0 6px var(--kpi-accent, var(--accent));
}

/* Carte EN DIRECT */
.adm-live-card {
  background: var(--bg-2);
  border: 2px solid rgba(255, 60, 128, 0.45);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
  box-shadow: 0 0 32px rgba(255, 60, 128, 0.18);
  text-decoration: none;
  color: var(--text);
  transition: box-shadow var(--t-normal) var(--ease), border-color var(--t-normal) var(--ease);
  cursor: pointer;
}
.adm-live-card:hover {
  box-shadow: 0 0 48px rgba(255, 60, 128, 0.35);
  border-color: rgba(255, 60, 128, 0.70);
}
.adm-live-card:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }

.adm-live-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent-hot);
  box-shadow: 0 0 12px rgba(255, 60, 128, 0.80);
  flex-shrink: 0;
  animation: adm-live-pulse 1.4s ease-in-out infinite;
}
@keyframes adm-live-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255, 60, 128, 0.60); transform: scale(1); }
  50%       { box-shadow: 0 0 20px rgba(255, 60, 128, 1);   transform: scale(1.2); }
}

.adm-live-label {
  font-family: var(--font-score);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-hot);
  margin-bottom: var(--space-1);
}

.adm-live-title {
  font-weight: 800;
  font-size: var(--text-lg);
  color: var(--text);
  margin: 0;
}

.adm-live-meta {
  font-size: var(--text-sm);
  color: var(--text-dim);
  font-weight: 700;
}

.adm-live-cta {
  margin-left: auto;
}

/* Une carte EN DIRECT peut porter DEUX commandes : « Ouvrir la régie » et,
   uniquement sur une partie jamais démarrée, « Annuler la partie ».
   Seul le PREMIER bouton garde margin-left:auto. Sans cette règle, les deux
   marges auto se partageraient l'espace libre et « Ouvrir la régie » flotterait
   au milieu de la carte au lieu d'être collé à droite. Le cas « une seule
   commande » reste, lui, pixel-identique (le sélecteur ne s'applique pas). */
.adm-live-cta + .adm-live-cta { margin-left: 0; }

/* Plusieurs parties peuvent tourner en parallèle (plusieurs postes d'animation
   le même soir) : #adm-live-wrap contient alors PLUSIEURS .adm-live-card. Elles
   s'empilent via le margin-bottom déjà porté par la carte — aucune règle de
   grille n'est ajoutée, pour que le cas « une seule partie » reste
   pixel-identique à avant. */

/* min-width:0 sur l'enfant flex : sans ça un titre de quiz long refuse de se
   réduire (min-width:auto par défaut) et pousse le bouton hors de la carte. */
.adm-live-info { min-width: 0; }

/* Mobile (testé à 390px) : le bouton passe sous le titre et prend toute la
   largeur, avec une cible tactile ≥ 44px. Sans ça, titre + bouton sur une
   seule ligne débordaient. */
@media (max-width: 600px) {
  .adm-live-card { flex-wrap: wrap; gap: var(--space-4); }
  .adm-live-info { flex: 1 1 auto; }
  /* Vaut pour les DEUX commandes : à 390px « Ouvrir la régie » et
     « Annuler la partie » s'empilent pleine largeur sous le titre, chacune avec
     une cible tactile >= 44px, plutôt que d'être écrasées côte à côte. */
  .adm-live-cta  { margin-left: 0; flex: 1 1 100%; min-height: 44px; }
}

/* Grille secondaire dashboard */
.adm-dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
@media (max-width: 900px) {
  .adm-dash-grid { grid-template-columns: 1fr; }
}

.adm-section-title {
  font-size: var(--text-md);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.adm-section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(108, 59, 255, 0.15);
}

/* Liste activité récente */
.adm-activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.adm-activity-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  color: var(--text);
  transition: background var(--t-fast) var(--ease);
  min-height: 48px;
}
.adm-activity-item:hover { background: rgba(108, 59, 255, 0.12); }
.adm-activity-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.adm-activity-pin {
  font-family: var(--font-score);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.08em;
  min-width: 56px;
}

.adm-activity-info { flex: 1; min-width: 0; }
.adm-activity-name {
  font-weight: 700;
  font-size: var(--text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.adm-activity-meta {
  font-size: var(--text-xs);
  color: var(--text-dim);
  font-weight: 700;
}

/* Top quiz */
.adm-top-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.adm-top-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--surface);
  border-radius: var(--radius);
}

.adm-top-rank {
  font-family: var(--font-score);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--text-dim);
  width: 40px;
  text-align: center;
  flex-shrink: 0;
}
.adm-top-rank.gold   { color: #d89e00; text-shadow: 0 0 12px rgba(216, 158, 0, 0.60); }
.adm-top-rank.silver { color: #c0c0c0; }
.adm-top-rank.bronze { color: #cd7f32; }

.adm-top-info { flex: 1; min-width: 0; }
.adm-top-title {
  font-weight: 800;
  font-size: var(--text-md);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.adm-top-plays {
  font-size: var(--text-xs);
  color: var(--text-dim);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   ÉCRAN 3 — MES QUIZ
   -------------------------------------------------------------------------- */

.adm-quizzes-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}

.adm-quizzes-header h1 {
  font-size: var(--text-2xl);
  margin: 0;
  flex: 1;
}

.adm-quiz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-6);
}

.adm-quiz-card {
  background: var(--bg-2);
  border: 1px solid rgba(108, 59, 255, 0.12);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  cursor: pointer;
}
.adm-quiz-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(108, 59, 255, 0.35);
}
.adm-quiz-card:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }

/* Vignette dégradé déterministe */
.adm-quiz-thumb {
  height: 120px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.adm-quiz-thumb-letter {
  font-family: var(--font-score);
  font-size: 5rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.12);
  line-height: 1;
  user-select: none;
}

.adm-quiz-body {
  padding: var(--space-5) var(--space-5) var(--space-4);
}

.adm-quiz-title {
  font-weight: 800;
  font-size: var(--text-md);
  margin: 0 0 var(--space-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.adm-quiz-meta {
  display: flex;
  /* flex-wrap + gap sur DEUX axes : la pastille « en cours » s'ajoute à cette
     ligne. Sur un titre long ou à 390 px elle passe à la ligne au lieu
     d'élargir la carte (aucun décalage de la grille, aucun débordement). */
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
}
.adm-quiz-meta-item {
  font-family: var(--font-score);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* Pastille « N en cours » sur une carte de quiz — une partie est VIVANTE.
   Dans le FLUX de .adm-quiz-meta (pas de position:absolute) : elle ne peut donc
   ni déborder de la carte ni décaler la vignette. Couleur = --accent-hot, la
   même que le point EN DIRECT du tableau de bord : un seul code visuel pour
   « ça tourne en ce moment ». */
.adm-quiz-live {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-score);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.4;
  /* PAS --accent-hot brut (#ff3c80) : mesuré à 4.49:1 sur le fond composité de
     la carte, sous le 4.5:1 exigé en AA pour du 12 px (le gras n'ouvre droit au
     seuil « grand texte » qu'à partir de 18,66 px). Teinte éclaircie → 5.8:1. */
  color: rgb(255, 110, 165);
  background: rgba(255, 60, 128, 0.12);
  border: 1px solid rgba(255, 60, 128, 0.38);
  border-radius: 999px;
  padding: 2px var(--space-2);
  white-space: nowrap;
}
.adm-quiz-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--accent-hot);
  box-shadow: 0 0 8px rgba(255, 60, 128, 0.8);
  /* transform/box-shadow seulement : rien qui touche à la géométrie du flux. */
  animation: adm-live-pulse 1.4s ease-in-out infinite;
}

/* Lignes « Reprendre la partie en cours » de la modale de lancement.
   minmax(0) implicite via min-width:0 sur .adm-resume-info : sans ça un titre
   long POUSSE le bouton hors de la boîte au lieu d'être tronqué. */
.adm-resume-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  border: 1px solid rgba(108, 59, 255, 0.28);
  border-radius: var(--radius, 8px);
  background: rgba(108, 59, 255, 0.07);
}
.adm-resume-info { min-width: 0; flex: 1 1 auto; }
.adm-resume-title {
  font-weight: 800;
  font-size: var(--text-sm);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adm-resume-meta {
  font-family: var(--font-score);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-dim);
  margin-top: 2px;
}
@media (max-width: 520px) {
  /* À 390 px, titre + PIN + bouton ne tiennent pas sur une ligne : on empile,
     et le bouton prend toute la largeur (cible tactile pleine, ≥ 44 px). */
  .adm-resume-row { flex-direction: column; align-items: stretch; }
  .adm-resume-row > .qq-btn { width: 100%; }
}

/* ── Barre d'actions PERMANENTE (ex-overlay au survol) ──────────────────────
   L'ancienne version etait un calque absolu a opacity:0 revele au :hover.
   Sur tactile il n'y a pas de survol : les quatre actions etaient
   inatteignables (constate en prod le 2026-09-04). La barre fait desormais
   partie du flux de la carte : toujours visible, desktop comme mobile. */
.adm-quiz-actions {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-top: 1px solid rgba(108, 59, 255, 0.16);
  background: rgba(108, 59, 255, 0.05);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.adm-quiz-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Les 4 actions se partagent la largeur a parts egales : a 280 px de carte
     elles retrecissent au lieu de deborder. */
  flex: 1 1 0;
  min-width: 0;
  /* Cible tactile : 44 px de haut minimum (RGAA / WCAG 2.5.5). */
  min-height: 44px;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius);
  background: rgba(108, 59, 255, 0.26);
  border: 1px solid rgba(108, 59, 255, 0.42);
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  text-align: center;
}
/* Fonds renforces : la barre n'est plus posee sur un calque sombre opaque, il
   faut que chaque action se detache seule du fond de carte. */
.adm-quiz-action:hover { background: rgba(108, 59, 255, 0.46); }
.adm-quiz-action:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.adm-quiz-action.danger { background: rgba(255, 59, 92, 0.26); border-color: rgba(255, 59, 92, 0.42); }
.adm-quiz-action.danger:hover { background: rgba(255, 59, 92, 0.46); }
/* « Lancer » est l'action principale. */
.adm-quiz-action.launch { background: rgba(22, 193, 114, 0.30); border-color: rgba(22, 193, 114, 0.55); }
.adm-quiz-action.launch:hover { background: rgba(22, 193, 114, 0.50); }
.adm-quiz-action-icon {
  font-size: 1.25rem;
  line-height: 1;
}
.adm-quiz-action-label {
  font-size: var(--text-xs);
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.15;
}
@media (max-width: 400px) {
  .adm-quiz-actions { gap: var(--space-1); padding: var(--space-2) var(--space-3) var(--space-3); }
  .adm-quiz-action { padding: var(--space-2) 2px; }
  .adm-quiz-action-label { font-size: 10px; }
  .adm-quiz-action-icon { font-size: 1.1rem; }
}

/* Import btn */
.adm-btn-import {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-md);
  padding: var(--space-3) var(--space-5);
  min-height: 44px;
  border-radius: var(--radius);
  border: 2px solid rgba(108, 59, 255, 0.40);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.adm-btn-import:hover { color: var(--text); border-color: var(--accent); background: rgba(108, 59, 255, 0.10); }
.adm-btn-import:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   ÉCRAN 4 — ÉDITEUR QUIZ
   -------------------------------------------------------------------------- */

.adm-editor-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--space-6);
  height: calc(100dvh - 56px - var(--space-8) * 2);
  align-items: start;
}
@media (max-width: 960px) {
  .adm-editor-layout {
    grid-template-columns: 1fr;
    height: auto;
  }
}

/* Topbar éditeur */
.adm-editor-topbar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.adm-quiz-title-input {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-2xl);
  color: var(--text);
  background: transparent;
  border: none;
  border-bottom: 2px solid rgba(108, 59, 255, 0.20);
  border-radius: 0;
  padding: var(--space-2) 0;
  flex: 1;
  min-width: 0;
  /* empêche le débordement à 390px et tronque proprement */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
  transition: border-color var(--t-fast) var(--ease);
}
.adm-quiz-title-input:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

.adm-save-status {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-dim);
  opacity: 0;
  transition: opacity var(--t-normal) var(--ease);
  white-space: nowrap;
  /* Largeur RÉSERVÉE : l'indicateur change d'état sans jamais changer
     d'encombrement. Sans ça, chaque erreur de validation repoussait le titre
     du quiz et le champ « Code » pendant la frappe (signalé le 2026-08-26). */
  flex: 0 0 auto;
  min-width: 10.5em;
  max-width: 10.5em;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}
.adm-save-status.visible { opacity: 1; }
.adm-save-status.ok { color: var(--ok); }
.adm-save-status.error { color: var(--bad, #ff3b5c); }

/* Import .xlsx en cours : bouton neutralisé visuellement et au clic */
.adm-btn-import.is-busy { opacity: 0.55; pointer-events: none; cursor: progress; }

/* Colonne gauche — pile questions */
.adm-q-list-panel {
  background: var(--bg-2);
  border: 1px solid rgba(108, 59, 255, 0.12);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: calc(100dvh - 56px - var(--space-8) * 2 - 80px);
  position: sticky;
  top: calc(56px + var(--space-8));
}
@media (max-width: 960px) {
  .adm-q-list-panel { max-height: 320px; position: static; }
}

.adm-q-list-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid rgba(108, 59, 255, 0.12);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-dim);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.adm-q-list {
  list-style: none;
  margin: 0;
  padding: var(--space-2);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--surface);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.adm-q-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
  border: 1px solid transparent;
  user-select: none;
}
.adm-q-item:hover { background: rgba(108, 59, 255, 0.10); }
.adm-q-item.is-active {
  background: rgba(108, 59, 255, 0.18);
  border-color: rgba(108, 59, 255, 0.30);
}
.adm-q-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Poignée drag */
.adm-q-drag-handle {
  cursor: grab;
  color: var(--text-dim);
  flex-shrink: 0;
  opacity: 0.4;
  display: flex;
  align-items: center;
  transition: opacity var(--t-fast) var(--ease);
}
.adm-q-item:hover .adm-q-drag-handle { opacity: 0.8; }
.adm-q-item.is-dragging { opacity: 0.40; background: rgba(108, 59, 255, 0.08); }
.adm-q-item.drag-over { border-color: var(--accent); background: rgba(108, 59, 255, 0.15); }

.adm-q-num {
  font-family: var(--font-score);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-dim);
  min-width: 20px;
}

.adm-q-preview {
  flex: 1;
  min-width: 0;
}
.adm-q-preview-text {
  font-size: var(--text-sm);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.adm-q-preview-dur {
  font-family: var(--font-score);
  font-size: var(--text-xs);
  color: var(--text-dim);
  font-weight: 700;
}

/* Masque visuellement, garde accessible aux lecteurs d'ecran (pattern standard). */
.adm-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Controles clavier de reordonnancement (audit accessibilite 2026-08-05) —
   coexistent avec le glisser-depose, ne le remplacent pas. */
/* ⚠ CORRIGÉ 2026-08-05 : la 1re version (2 boutons + champ + bouton "Aller")
   prenait toute la largeur de la ligne et FAISAIT DISPARAÎTRE le texte de la
   question dans une liste de 90 — constaté à l'écran par le décideur. Empreinte
   réduite au minimum : boutons 18px, champ 26px, bouton "Aller" supprimé (le
   champ valide sur Entrée et sur perte de focus). flex-shrink:0 pour que ce
   bloc ne se comprime JAMAIS au détriment de sa propre lisibilité — c'est
   .adm-q-preview (flex:1, min-width:0) qui doit céder la place en premier. */
.adm-q-move {
  display: flex;
  align-items: center;
  /* 6px et pas 2px : c'est le PAS entre deux cibles. Chaque bouton étend sa zone
     cliquable à 24px de large via ::after (voir plus bas) ; sans ce pas de 24px
     (18 + 6), les zones se chevaucheraient et le bouton du dessus volerait les
     clics de son voisin — un « descendre » deviendrait un « monter ». */
  gap: 6px;
  flex-shrink: 0;
}
.adm-q-move-btn {
  width: 18px; height: 18px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px;
  line-height: 1;
  background: transparent;
  border: 1px solid var(--border, rgba(255,255,255,.14));
  border-radius: 3px;
  color: var(--text-dim);
  cursor: pointer;
  flex-shrink: 0;
}
/* ── Zone tactile étendue SANS grossir l'icône (WCAG 2.5.5 / 2.5.8) ──────────
   L'icône reste à 18px — c'est ce que le décideur a validé après le « moche ! ».
   Seule la SURFACE DE CLIC grandit, via un pseudo-élément transparent centré :
   24px de large (pas de 24px, cf. gap ci-dessus, donc zéro chevauchement) et
   44px de haut (la hauteur de la ligne l'absorbe : rien ne déborde sur la ligne
   voisine, les lignes font ≥48px). Ne JAMAIS remettre `overflow:hidden` sur
   .adm-q-item ou .adm-q-move : ça découperait ces zones. */
.adm-q-move-btn::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 24px; height: 44px;
}
.adm-q-move-btn:disabled::after { display: none; } /* pas de zone morte captant les clics de la carte */
.adm-q-move-btn:hover:not(:disabled) { color: var(--text); border-color: var(--accent); }
/* Butée haute/basse. `opacity:.3` rendait la flèche (un glyphe de 8px) quasi
   invisible ; couleur explicite = 4,87:1 sur le fond du panneau, tout en
   restant nettement plus terne que l'état actif (--text-dim #c7bdf0). */
.adm-q-move-btn:disabled {
  color: #8a83ad;
  border-color: rgba(255, 255, 255, 0.07);
  cursor: default;
}
.adm-q-move-pos {
  width: 26px;
  /* Un <input> ne peut pas porter de ::after : sa zone de clic EST sa boîte.
     24px de haut = minimum WCAG 2.5.8 AA, et reste visuellement compact. */
  height: 24px;
  font-size: 10px;
  text-align: center;
  background: transparent;
  border: 1px solid var(--border, rgba(255,255,255,.14));
  border-radius: 3px;
  color: var(--text);
  padding: 0 2px;
  flex-shrink: 0;
  /* Masque les flèches natives du input[type=number] : sur 18px de haut elles
     ne sont de toute façon pas cliquables, et ▲▼ existent déjà à côté. */
  -moz-appearance: textfield;
}
.adm-q-move-pos::-webkit-outer-spin-button,
.adm-q-move-pos::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ── Au doigt : 44×44 RÉELS, sur une 2e ligne ────────────────────────────────
   Trois cibles de 44px côte à côte = 132px+ : sur 390px, ça écraserait de
   nouveau l'énoncé (le défaut « moche ! »). On ne rétrécit donc pas les cibles,
   on leur donne leur propre ligne : l'énoncé garde toute la largeur au-dessus.
   `pointer: coarse` cible le doigt (le vrai besoin des 44px) ; la borne 560px
   couvre le cas d'un écran étroit à la souris. */
@media (pointer: coarse), (max-width: 560px) {
  .adm-q-item { flex-wrap: wrap; }
  .adm-q-preview { flex-basis: 60%; }
  .adm-q-move {
    width: 100%;
    order: 10;            /* après l'indicateur de validité, sur sa propre ligne */
    gap: var(--space-2, 8px);
    margin-top: 4px;
  }
  .adm-q-move-btn {
    width: 44px; height: 44px;
    font-size: 11px;
    border-radius: var(--radius-sm, 6px);
  }
  .adm-q-move-btn::after { display: none; } /* la boîte fait déjà 44×44 */
  .adm-q-move-pos {
    width: 56px;
    height: 44px;
    font-size: var(--text-sm, 13px);
  }
}

.adm-q-validity {
  font-size: 0.7rem;
  flex-shrink: 0;
}
.adm-q-validity.ok   { color: var(--ok); }
.adm-q-validity.warn { color: var(--accent-hot); }

.adm-q-list-footer {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid rgba(108, 59, 255, 0.12);
  flex-shrink: 0;
}

/* Colonne droite — carte édition */
.adm-q-edit-panel {
  background: var(--bg-2);
  border: 1px solid rgba(108, 59, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.adm-field-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: var(--space-2);
}

.adm-q-text-input {
  width: 100%;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius);
  border: 2px solid rgba(199, 189, 240, 0.15);
  background: var(--surface);
  color: var(--text);
  resize: vertical;
  min-height: 80px;
  transition: border-color var(--t-fast) var(--ease);
  box-sizing: border-box;
}
.adm-q-text-input:focus { outline: none; border-color: var(--accent); }

/* Grille réponses éditeur — 2x2 Buzz! */
.adm-answers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (max-width: 600px) {
  .adm-answers-grid { grid-template-columns: 1fr; }
}

.adm-answer-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  border: 2px solid rgba(255, 255, 255, 0.10);
  transition: border-color var(--t-fast) var(--ease);
}
.adm-answer-row--a1 { background: rgba(19, 104, 206, 0.15); border-color: rgba(19, 104, 206, 0.30); }
.adm-answer-row--a2 { background: rgba(244, 144, 12, 0.15); border-color: rgba(244, 144, 12, 0.30); }
.adm-answer-row--a3 { background: rgba(38, 137, 12, 0.15);  border-color: rgba(38, 137, 12, 0.30); }
.adm-answer-row--a4 { background: rgba(216, 158, 0, 0.15);  border-color: rgba(216, 158, 0, 0.30); }

.adm-answer-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.adm-answer-icon-wrap svg { width: 22px; height: 22px; }
.adm-answer-row--a1 .adm-answer-icon-wrap svg { fill: var(--a1); }
.adm-answer-row--a2 .adm-answer-icon-wrap svg { fill: var(--a2); }
.adm-answer-row--a3 .adm-answer-icon-wrap svg { fill: var(--a3); }
.adm-answer-row--a4 .adm-answer-icon-wrap svg { fill: var(--a4); }

.adm-answer-input {
  flex: 1;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  background: transparent;
  border: none;
  color: var(--text);
  padding: var(--space-1) 0;
}
.adm-answer-input:focus { outline: none; }
.adm-answer-input::placeholder { color: rgba(199, 189, 240, 0.40); }

/* Bouton étoile bonne réponse */
.adm-star-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  /* zone cliquable ≥44×44px (RGAA) via padding compensé */
  padding: 12px;
  margin: -4px;
  line-height: 1;
  color: var(--text-dim);
  opacity: 0.35;
  transition: opacity var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  border-radius: var(--radius-sm);
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.adm-star-btn:hover { opacity: 0.7; transform: scale(1.2); }
.adm-star-btn.is-correct {
  color: var(--a4);
  opacity: 1;
  text-shadow: 0 0 8px rgba(216, 158, 0, 0.70);
}
.adm-star-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Chrono slider */
.adm-chrono-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.adm-chrono-value {
  font-family: var(--font-score);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--accent-hot);
  min-width: 48px;
  text-align: right;
  line-height: 1;
}
.adm-chrono-unit {
  font-family: var(--font-score);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-dim);
}
.adm-chrono-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 99px;
  background: rgba(199, 189, 240, 0.15);
  outline: none;
  cursor: pointer;
}
.adm-chrono-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-hot);
  box-shadow: 0 0 8px rgba(255, 60, 128, 0.60);
  cursor: pointer;
}
.adm-chrono-slider:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.adm-chrono-presets {
  display: flex;
  gap: var(--space-2);
}
.adm-chrono-preset {
  font-family: var(--font-score);
  font-size: var(--text-xs);
  font-weight: 700;
  /* zone cliquable ≥44px (RGAA) */
  padding: var(--space-3) var(--space-3);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(108, 59, 255, 0.25);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.adm-chrono-preset:hover { background: rgba(108, 59, 255, 0.15); color: var(--text); }
.adm-chrono-preset:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Champ média */
.adm-media-input {
  width: 100%;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  border: 2px solid rgba(199, 189, 240, 0.15);
  background: var(--surface);
  color: var(--text);
  transition: border-color var(--t-fast) var(--ease);
  box-sizing: border-box;
}
.adm-media-input:focus { outline: none; border-color: var(--accent); }
.adm-media-input::placeholder { color: rgba(199, 189, 240, 0.35); }

/* Actions panneau édition */
.adm-q-edit-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
  padding-top: var(--space-4);
  border-top: 1px solid rgba(108, 59, 255, 0.12);
}

/* Modale aperçu */
.adm-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(14, 11, 26, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-normal) var(--ease);
}
.adm-preview-modal.is-open { opacity: 1; pointer-events: all; }

.adm-preview-inner {
  width: 100%;
  max-width: 640px;
  background: var(--bg-2);
  border: 1px solid rgba(108, 59, 255, 0.25);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  transform: scale(0.92);
  transition: transform var(--t-normal) var(--ease);
}
.adm-preview-modal.is-open .adm-preview-inner { transform: scale(1); }

.adm-preview-close {
  align-self: flex-end;
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  /* zone cliquable ≥44×44px (RGAA) */
  padding: 10px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: color var(--t-fast) var(--ease);
}
.adm-preview-close:hover { color: var(--text); }
.adm-preview-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.adm-preview-q {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-xl);
  text-align: center;
  line-height: 1.2;
}

.adm-preview-chrono {
  font-family: var(--font-score);
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--accent-hot);
  text-align: center;
  animation: qq-pulse-hot 1.2s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   ÉCRAN 5 — BILAN DE PARTIE
   -------------------------------------------------------------------------- */

.adm-bilan-header {
  margin-bottom: var(--space-8);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.adm-bilan-pin {
  font-family: var(--font-score);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 700;
}

.adm-bilan-quiz {
  font-size: var(--text-2xl);
  font-weight: 800;
  margin: var(--space-1) 0 0;
}

/* Podium */
.adm-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
  padding: var(--space-6) 0;
}

.adm-podium-place {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.adm-podium-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-score);
  font-size: var(--text-xl);
  font-weight: 800;
  position: relative;
}
.adm-podium-place:nth-child(1) .adm-podium-avatar {
  width: 72px;
  height: 72px;
  font-size: var(--text-2xl);
}

.adm-podium-name {
  font-weight: 800;
  font-size: var(--text-sm);
  text-align: center;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adm-podium-score {
  font-family: var(--font-score);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-dim);
}

.adm-podium-block {
  background: var(--bg-2);
  border-top: 3px solid var(--block-color, var(--accent));
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: var(--space-2);
}
.adm-podium-rank-num {
  font-family: var(--font-score);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--block-color, var(--accent));
}

/* Tableau classement complet */
.adm-leaderboard {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.adm-lb-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-2);
  border: 1px solid rgba(108, 59, 255, 0.10);
  border-radius: var(--radius);
}
.adm-lb-row:nth-child(1) { border-color: rgba(216, 158, 0, 0.35); background: rgba(216, 158, 0, 0.06); }
.adm-lb-row:nth-child(2) { border-color: rgba(192, 192, 192, 0.25); }
.adm-lb-row:nth-child(3) { border-color: rgba(205, 127, 50, 0.25); }

.adm-lb-rank {
  font-family: var(--font-score);
  font-size: var(--text-md);
  font-weight: 800;
  width: 32px;
  text-align: center;
  color: var(--text-dim);
  flex-shrink: 0;
}
.adm-lb-row:nth-child(1) .adm-lb-rank { color: #d89e00; }
.adm-lb-row:nth-child(2) .adm-lb-rank { color: #c0c0c0; }
.adm-lb-row:nth-child(3) .adm-lb-rank { color: #cd7f32; }

.adm-lb-name {
  flex: 1;
  font-weight: 800;
  font-size: var(--text-md);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adm-lb-score {
  font-family: var(--font-score);
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--accent);
}

/* Courbe de difficulté */
.adm-difficulty-chart {
  margin-bottom: var(--space-8);
}

.adm-diff-bars {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  height: 120px;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(108, 59, 255, 0.15);
}

.adm-diff-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  cursor: pointer;
  gap: var(--space-1);
}

.adm-diff-bar {
  width: 100%;
  border-radius: 4px 4px 0 0;
  min-height: 4px;
  transition: filter var(--t-fast) var(--ease);
}
.adm-diff-col:hover .adm-diff-bar { filter: brightness(1.25); }

.adm-diff-bar.easy   { background: var(--ok); }
.adm-diff-bar.medium { background: var(--a2); }
.adm-diff-bar.hard   { background: var(--bad); }

.adm-diff-num {
  font-family: var(--font-score);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-dim);
  flex-shrink: 0;
}

.adm-diff-badges {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

.adm-diff-badge {
  font-family: var(--font-score);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.adm-diff-badge.easy   { background: rgba(22, 193, 114, 0.20); color: var(--ok); }
.adm-diff-badge.hard   { background: rgba(255, 59, 92, 0.20);  color: var(--bad); }
.adm-diff-badge.trap   { background: rgba(255, 60, 128, 0.20); color: var(--accent-hot); }
.adm-diff-badge.speed  { background: rgba(108, 59, 255, 0.20); color: #a78bff; }
.adm-diff-badge.disc   { background: rgba(216, 158, 0, 0.20);  color: var(--a4); }

/* --------------------------------------------------------------------------
   ÉTATS COMMUNS
   -------------------------------------------------------------------------- */

.adm-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-6);
}
.adm-skeleton-card {
  height: 200px;
  border-radius: var(--radius-lg);
  background: linear-gradient(90deg, var(--surface) 25%, rgba(108, 59, 255, 0.10) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: qq-shimmer 1.4s ease-in-out infinite;
}
@keyframes qq-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.adm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-16) var(--space-8);
  color: var(--text-dim);
  text-align: center;
}
.adm-empty-icon {
  font-size: 3rem;
  line-height: 1;
  opacity: 0.5;
}
.adm-empty-title {
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--text-dim);
  margin: 0;
}
.adm-empty-hint {
  font-size: var(--text-sm);
  font-weight: 700;
  margin: 0;
  max-width: 40ch;
  opacity: 0.75;
}

/* Toast admin */
.adm-toast {
  position: fixed;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%) translateY(calc(100% + var(--space-8)));
  background: var(--bg-2);
  border: 1px solid rgba(22, 193, 114, 0.40);
  color: var(--ok);
  font-weight: 800;
  font-size: var(--text-md);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-ok);
  z-index: 300;
  transition: transform var(--t-slow) var(--ease), opacity var(--t-slow) var(--ease);
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
}
.adm-toast.error {
  border-color: rgba(255, 59, 92, 0.40);
  color: var(--bad);
  box-shadow: var(--shadow-bad);
}
.adm-toast.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* Confirm modale */
.adm-confirm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: rgba(14, 11, 26, 0.90);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-normal) var(--ease);
}
.adm-confirm-backdrop.is-open { opacity: 1; pointer-events: all; }
.adm-confirm-box {
  background: var(--bg-2);
  border: 1px solid rgba(255, 59, 92, 0.30);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  max-width: 400px;
  width: 100%;
  text-align: center;
  transform: scale(0.90);
  transition: transform var(--t-normal) var(--ease);
}
.adm-confirm-backdrop.is-open .adm-confirm-box { transform: scale(1); }
.adm-confirm-title {
  font-size: var(--text-xl);
  font-weight: 800;
  margin: 0 0 var(--space-4);
}
.adm-confirm-body {
  /* La confirmation de suppression rappelle desormais l'enonce de la question,
     separe du reste par une ligne vide. Le texte est injecte par textContent —
     volontairement, l'enonce est une donnee UTILISATEUR et ne doit jamais etre
     interprete comme du HTML — donc les \n n'ont d'effet qu'avec pre-line.
     Sans cette ligne, la modale affichait tout collE sur un seul paragraphe. */
  white-space: pre-line;
  font-size: var(--text-sm);
  color: var(--text-dim);
  font-weight: 700;
  margin: 0 0 var(--space-8);
  line-height: 1.5;
}
.adm-confirm-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
}

/* Modale de reprise : plus large que la confirmation de suppression (400 px).
   À 400 px, « Lancer quand même une nouvelle partie » s'empilait sur SEPT
   lignes et les titres de partie étaient tronqués à quatre caractères
   (constaté au rendu réel, 1440 px). */
.adm-confirm-box--wide { max-width: min(640px, calc(100vw - 2rem)); }
.adm-confirm-box--wide .adm-confirm-actions { flex-wrap: wrap; }
/* Pas de `white-space: nowrap` ici : essayé, puis retiré après l'avoir VU —
   à 768 px « Lancer quand même une nouvelle partie » débordait de 27 px hors
   de la boîte (un bouton en nowrap ne peut plus se rétrécir). La largeur des
   boutons reste dictée par le libellé via `a.flex` (posé en inline par
   openRegieModal) ; le texte revient à la ligne quand il le faut. */
@media (max-width: 520px) {
  .adm-confirm-box--wide .adm-confirm-actions .qq-btn {
    /* min-width (et non flex, posé en inline) : les deux boutons s'empilent en
       pleine largeur, alignés — pas un « Annuler » étroit posé de travers. */
    min-width: 100%;
  }
}


/* Background subtle — grille de plateau */
.adm-bg-grid {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(108, 59, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(108, 59, 255, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

/* Radial glow background */
.adm-bg-glow {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 60% 50% at 20% 30%, rgba(108, 59, 255, 0.12) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 80% 70%, rgba(255, 60, 128, 0.07) 0%, transparent 60%);
  pointer-events: none;
}

/* Responsive mobile — 390px */
@media (max-width: 480px) {
  /* D1 — zéro scroll horizontal */
  .adm-root {
    overflow-x: hidden;
    max-width: 100vw;
  }
  .adm-page {
    padding: var(--space-5) var(--space-4);
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* D2 — topbar mobile : logo sur une ligne, nav sur la suivante */
  .adm-topbar {
    padding: 0 var(--space-4);
    height: auto;
    flex-wrap: wrap;
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
    gap: var(--space-2);
  }
  .adm-logo {
    flex: 1 1 auto;
    min-width: 0;
  }
  .adm-logo-badge {
    display: none;
  }
  .adm-nav {
    flex: 0 0 100%;
    margin-left: 0;
    order: 3;
    gap: var(--space-1);
    border-top: 1px solid rgba(108, 59, 255, 0.15);
    padding-top: var(--space-1);
  }
  .adm-nav-link {
    flex: 1 1 auto;
    text-align: center;
    padding: var(--space-2) var(--space-2);
    font-size: var(--text-xs);
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* À 390px, le nom d'espace prend sa propre ligne (entre le logo et la nav)
     plutôt que de comprimer le logo jusqu'à l'illisible. */
  .adm-topbar-space {
    flex: 0 0 100%;
    order: 2;
  }
  .adm-topbar-space-name { max-width: 100%; font-size: var(--text-xs); }
  .adm-topbar-space-tag  { font-size: 0.625rem; }

  .adm-nav-divider { display: none; }
  .adm-topbar-logout {
    padding: var(--space-2) var(--space-2);
    font-size: var(--text-xs);
    min-height: 44px;
  }

  /* D1 — grille KPI et éléments de dashboard */
  .adm-kpi-grid {
    grid-template-columns: 1fr 1fr;
    max-width: 100%;
  }
  .adm-kpi {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
  }
  .adm-kpi-value { font-size: var(--text-2xl); }
  .adm-dash-grid { grid-template-columns: 1fr; }

  /* D1 — qq-card fluide (défini dans qq-tokens, surchargé ici) */
  .qq-card {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
  }

  /* D1 — activity items fluides */
  .adm-activity-item {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
  }
  .adm-activity-pin {
    min-width: 44px;
    font-size: var(--text-xs);
  }
  .adm-lb-row {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
  }

  .adm-quizzes-header { flex-direction: column; align-items: flex-start; }
}

/* Motions */
@media (prefers-reduced-motion: reduce) {
  .adm-live-dot { animation: none; }
  .adm-quiz-live::before { animation: none; }
  .adm-skeleton-card { animation: none; opacity: 0.5; }
}

/* Séries — structure 2 niveaux */
.adm-series-list {
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2);
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--surface);
}

.adm-series-block {
  border-radius: var(--radius);
  border: 1px solid rgba(108, 59, 255, 0.14);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--t-fast) var(--ease);
}
.adm-series-block.drag-over {
  border-color: var(--accent);
  background: rgba(108, 59, 255, 0.08);
}
.adm-series-block.is-dragging { opacity: 0.45; }

.adm-series-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: rgba(108, 59, 255, 0.10);
  border-bottom: 1px solid rgba(108, 59, 255, 0.10);
  cursor: grab;
  user-select: none;
}
.adm-series-header:active { cursor: grabbing; }

.adm-series-drag-handle {
  color: var(--text-dim);
  opacity: 0.5;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.adm-series-header:hover .adm-series-drag-handle { opacity: 0.9; }

.adm-series-title {
  flex: 1;
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--text);
  cursor: text;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.adm-series-title-input {
  flex: 1;
  font-size: var(--text-sm);
  font-weight: 800;
  font-family: var(--font-display);
  color: var(--text);
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--accent);
  border-radius: 0;
  padding: 0;
  min-width: 0;
  outline: none;
}

.adm-series-badge {
  font-family: var(--font-score);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-dim);
  background: rgba(108, 59, 255, 0.12);
  border: 1px solid rgba(108, 59, 255, 0.20);
  border-radius: var(--radius-pill);
  padding: 1px var(--space-2);
  white-space: nowrap;
  flex-shrink: 0;
}

.adm-series-delete-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-dim);
  font-size: 1rem;
  line-height: 1;
  /* zone cliquable ≥44×44px (RGAA) — padding compense sans changer le visuel */
  padding: 12px 10px;
  margin: -10px -4px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.adm-series-delete-btn:hover { color: var(--bad); background: rgba(255, 59, 92, 0.12); }
.adm-series-delete-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.adm-serie-q-list {
  list-style: none;
  margin: 0;
  padding: var(--space-1);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 8px;
}

.adm-series-footer {
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid rgba(108, 59, 255, 0.08);
}

.adm-series-add-q-btn {
  width: 100%;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px dashed rgba(108, 59, 255, 0.25);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  text-align: center;
  min-height: 32px;
}
.adm-series-add-q-btn:hover {
  background: rgba(108, 59, 255, 0.10);
  color: var(--text);
  border-color: var(--accent);
}
.adm-series-add-q-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.adm-add-series-btn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  border: 1px solid rgba(108, 59, 255, 0.25);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  width: 100%;
  min-height: 40px;
}
.adm-add-series-btn:hover { background: rgba(108, 59, 255, 0.10); border-color: var(--accent); }
.adm-add-series-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   ÉDITEUR REFONTE — page flex + onglets séries + liste gauche
   -------------------------------------------------------------------------- */

/* Page éditeur : colonne flex pour consommer le viewport sans overflow */
.adm-page--editor {
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  /* topbar 56px + top-padding var(--space-8) = hauteur consommée */
  height: calc(100dvh - 56px - var(--space-8));
  overflow: hidden;
}

/* Layout 2 colonnes occupe le reste de la hauteur */
.adm-page--editor .adm-editor-layout {
  height: auto;
  flex: 1;
  min-height: 0;
  align-items: stretch;
}

/* Panneau gauche : scroll interne, pas de max-height fixe */
.adm-page--editor .adm-q-list-panel {
  max-height: none;
  height: 100%;
  position: static; /* retire le sticky inutile dans ce contexte */
  overflow-y: auto;
}

/* ── Barre d'onglets manches ──────────────────────────────────────────── */

.adm-series-tabs-wrap {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-shrink: 0;
}

.adm-series-tabsbar {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 2px 0;
  border-bottom: 2px solid rgba(108, 59, 255, 0.18);
}
.adm-series-tabsbar::-webkit-scrollbar { display: none; }

.adm-serie-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3) calc(var(--space-2) + 2px);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border: 1px solid transparent;
  border-bottom: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  white-space: nowrap;
  user-select: none;
  margin-bottom: -2px; /* recouvre la bordure basse de tabsbar */
  transition:
    color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease);
}
.adm-serie-tab:hover { color: var(--text); background: rgba(108, 59, 255, 0.08); }
.adm-serie-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

.adm-serie-tab.is-active {
  color: var(--text);
  background: var(--bg-2);
  border-color: rgba(108, 59, 255, 0.22);
  border-bottom-color: var(--bg-2); /* efface la bordure basse → fusion avec le contenu */
}

.adm-serie-tab.is-dragging { opacity: 0.40; }
.adm-serie-tab.drag-over {
  background: rgba(108, 59, 255, 0.12);
  border-left-color: var(--accent);
}

.adm-serie-tab-title {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adm-serie-tab-title[contenteditable="true"] {
  outline: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 1px;
  max-width: 200px;
  color: var(--text);
}

.adm-serie-tab-badge {
  font-family: var(--font-score);
  font-size: var(--text-xs);
  font-weight: 700;
  background: rgba(108, 59, 255, 0.12);
  border-radius: var(--radius-pill);
  padding: 1px var(--space-2);
  color: var(--text-dim);
  min-width: 20px;
  text-align: center;
  flex-shrink: 0;
}
.adm-serie-tab.is-active .adm-serie-tab-badge {
  background: rgba(108, 59, 255, 0.28);
  color: var(--text);
}

.adm-serie-tab-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-dim);
  font-size: 0.85rem;
  line-height: 1;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  opacity: 0;
  padding: 0;
  transition:
    opacity var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}
.adm-serie-tab:hover .adm-serie-tab-del,
.adm-serie-tab.is-active .adm-serie-tab-del { opacity: 1; }
.adm-serie-tab-del:hover { background: rgba(255, 59, 92, 0.18); color: var(--bad); }
.adm-serie-tab-del:focus-visible { outline: 2px solid var(--bad); outline-offset: 2px; opacity: 1; }

.adm-series-tab-add {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
  min-height: 36px;
  border-radius: var(--radius);
  border: 1px dashed rgba(108, 59, 255, 0.30);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}
.adm-series-tab-add:hover {
  background: rgba(108, 59, 255, 0.10);
  border-color: var(--accent);
}
.adm-series-tab-add:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Item vide dans la liste de questions */
.adm-q-empty-hint {
  list-style: none;
  padding: var(--space-8) var(--space-4);
  text-align: center;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-dim);
  opacity: 0.70;
}

/* --------------------------------------------------------------------------
   MÉDIA UPLOAD — zone d'upload + aperçu
   -------------------------------------------------------------------------- */

.adm-media-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.adm-media-zone { width: 100%; }

.adm-media-upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-4);
  border: 2px dashed rgba(108, 59, 255, 0.22);
  border-radius: var(--radius);
  background: transparent;
  text-align: center;
  transition:
    background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}
.adm-media-upload-zone.drag-over {
  background: rgba(108, 59, 255, 0.08);
  border-color: var(--accent);
}

.adm-media-file-input { display: none; }

.adm-media-choose-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-4);
  min-height: 36px;
  border-radius: var(--radius);
  border: 1px solid rgba(108, 59, 255, 0.30);
  background: rgba(108, 59, 255, 0.08);
  color: var(--text);
  cursor: pointer;
  transition:
    background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}
.adm-media-choose-btn:hover { background: rgba(108, 59, 255, 0.16); border-color: var(--accent); }
.adm-media-choose-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Couleurs explicites plutôt qu'`opacity` (cf. `.qq-btn:disabled`,
   qq-tokens.css) : le fond de ce bouton est déjà translucide, un second
   facteur d'opacité rendait le libellé délavé sans rien signifier de plus. */
.adm-media-choose-btn:disabled {
  background: var(--btn-disabled-bg);
  border-color: var(--btn-disabled-line);
  color: var(--btn-disabled-text);
  cursor: default;
}

.adm-media-upload-hint {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-dim);
  margin: 0;
  opacity: 0.70;
}

.adm-media-upload-err {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--bad);
  margin: 0;
  min-height: 1.2em;
}

.adm-media-preview {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid rgba(108, 59, 255, 0.15);
  border-radius: var(--radius);
}

.adm-media-preview-img {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  background: rgba(108, 59, 255, 0.08);
}

.adm-media-retire-btn {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: var(--space-1) var(--space-3);
  min-height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 59, 92, 0.30);
  background: transparent;
  color: var(--bad);
  cursor: pointer;
  transition:
    background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
  margin-left: auto;
}
.adm-media-retire-btn:hover { background: rgba(255, 59, 92, 0.10); border-color: var(--bad); }
.adm-media-retire-btn:focus-visible { outline: 2px solid var(--bad); outline-offset: 2px; }

.adm-media-url-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-1);
}

.adm-media-url-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-dim);
  white-space: nowrap;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   RESPONSIVE éditeur — empilement sous 720 px
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .adm-page--editor {
    height: auto;
    overflow: visible;
  }
  .adm-page--editor .adm-editor-layout {
    grid-template-columns: 1fr;
    flex: none;
    height: auto;
  }
  .adm-page--editor .adm-q-list-panel {
    max-height: 280px;
    height: auto;
  }
  .adm-serie-tab-title { max-width: 90px; }
}

/* ============================================================
   TYPE SELECTOR — segmented control
============================================================ */
.adm-type-seg {
  display: flex;
  gap: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(108, 59, 255, 0.25);
  width: fit-content;
}

.adm-type-seg-btn {
  padding: var(--space-2) var(--space-5);
  min-height: 36px;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  white-space: nowrap;
}
.adm-type-seg-btn + .adm-type-seg-btn {
  border-left: 1px solid rgba(108, 59, 255, 0.20);
}
.adm-type-seg-btn:hover { background: rgba(108, 59, 255, 0.10); color: var(--text); }
.adm-type-seg-btn.is-active {
  background: rgba(108, 59, 255, 0.22);
  color: var(--text);
}
.adm-type-seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ============================================================
   TRUE/FALSE editor
============================================================ */
.adm-tf-row {
  display: flex;
  gap: var(--space-4);
}

.adm-tf-btn {
  flex: 1;
  min-height: 64px;
  background: var(--surface);
  border: 2px solid rgba(199, 189, 240, 0.15);
  border-radius: var(--radius-lg);
  color: var(--text-dim);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-xl);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.adm-tf-btn:hover { border-color: var(--accent); color: var(--text); }
.adm-tf-btn.is-correct {
  background: rgba(22, 193, 114, 0.12);
  border-color: var(--ok);
  color: var(--ok);
  box-shadow: 0 0 0 1px var(--ok);
}
.adm-tf-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ============================================================
   SLIDER CONFIG editor
============================================================ */
.adm-slider-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (max-width: 600px) {
  .adm-slider-fields { grid-template-columns: 1fr; }
}

.adm-slider-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.adm-slider-field-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.adm-slider-input {
  padding: var(--space-2) var(--space-3);
  min-height: 40px;
}