/* ==========================================================================
   SSIAPEUTLEFAIRE — Feuille de style principale
   Thème : "poste de contrôle PC sécurité" — fond quasi noir, accents ambre
   sobres, typo mono pour les codes techniques.
   ========================================================================== */

:root {
  --red: #e0393e;
  --red-dark: #b32e33;
  --red-light: #ff6b6f;
  --amber: #f5a524;
  --amber-dark: #c47f0f;
  --green: #34d399;
  --green-dark: #1e9c5a;
  --blue: #4f8dfd;
  --blue-dark: #2f6fed;
  --ink: #0a0d13;
  --ink-soft: #0d1119;
  --panel: #131924;
  --panel-light: #1a2130;
  --paper: #0a0d13;
  --paper-dim: #131924;
  --text: #eef1f6;
  --text-soft: #8b93a6;
  --text-inverse: #14100a;
  --border: rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.16);
  --safety-yellow: #ffce00;
  /* Accent "communauté" — distingue les éléments sociaux (avatars, badges,
     chat, activité en direct) de l'ambre/rouge réservé au registre
     "sécurité incendie" du reste du site. */
  --community: #a78bfa;
  --community-dark: #7c5cff;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.22);
  --font-head: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Consolas", "Courier New", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  background: var(--paper);
  background-image: radial-gradient(ellipse 900px 460px at 50% -8%, rgba(245,165,36,.08), transparent 60%);
  color: var(--text);
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--amber); text-decoration: none; }
a:hover { color: #ffc25c; text-decoration: underline; }

img, svg { max-width: 100%; }

/* ---------- Filet de statut décoratif (haut de page) ---------- */
.hazard-strip {
  height: 3px;
  background: linear-gradient(90deg, var(--amber), rgba(245,165,36,.15) 40%, transparent 70%);
}

/* ---------- Header / nav ---------- */
header.site-header {
  background: var(--ink);
  color: var(--text);
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--border);
}

.header-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 62px;
}
@media (max-width: 480px) {
  .header-inner { padding: 0 12px; gap: 8px; }
  .brand { gap: 7px; font-size: .96rem; }
  .brand-logo { width: 28px; height: 28px; }
  .account-chip-name { max-width: 34px; }
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: .3px;
  color: var(--text);
}
.brand:hover { text-decoration: none; }
.brand-logo { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; flex: none; display: block; }
.brand .flame { font-size: 1.5rem; filter: drop-shadow(0 0 6px rgba(245,165,36,.6)); flex: none; }
.brand .pictogram { flex: none; }
.brand .sub { font-family: var(--font-mono); font-size: .58rem; font-weight: 600; letter-spacing: 1.5px; color: var(--text-soft); text-transform: uppercase; display:block; }

nav.main-nav { display: flex; gap: 4px; flex-wrap: wrap; }
nav.main-nav a {
  color: var(--text-soft);
  padding: 9px 14px;
  border-radius: 6px;
  font-size: .84rem;
  font-weight: 500;
  font-family: var(--font-body);
}
nav.main-nav a:hover { color: var(--text); background: rgba(255,255,255,.06); text-decoration: none; }
nav.main-nav a.active { color: var(--text); background: var(--panel2, var(--panel-light)); }

/* ---- Sous-menus "Réviser" / "Communauté" ----
   Clic pour ouvrir (pas juste hover) : marche aussi bien au tactile qu'à la
   souris. Sur mobile le bouton disparaît et le sous-menu reste toujours
   déplié (voir media query plus bas) — le menu hamburger sert déjà de
   panneau dépliable, pas besoin d'un second niveau de repli. */
.nav-group { position: relative; }
.nav-group-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--text-soft); background: transparent; border: none; cursor: pointer;
  padding: 9px 14px; border-radius: 6px; font-size: .84rem; font-weight: 500; font-family: var(--font-body);
}
.nav-group-toggle:hover { color: var(--text); background: rgba(255,255,255,.06); }
.nav-group-toggle .caret { font-size: .65rem; transition: transform .15s ease; }
.nav-group.open .nav-group-toggle { color: var(--text); background: rgba(255,255,255,.06); }
.nav-group.open .nav-group-toggle .caret { transform: rotate(180deg); }
.nav-group.community.open .nav-group-toggle, .nav-group.community .nav-group-toggle:hover { color: var(--community); }
.nav-group-label { display: none; }
.nav-group-menu {
  display: none; flex-direction: column; gap: 2px;
  position: absolute; top: 100%; left: 0; margin-top: 4px; z-index: 60;
  background: var(--panel); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); padding: 6px; min-width: 210px;
}
.nav-group.open .nav-group-menu { display: flex; }
.nav-group-menu a { white-space: nowrap; }

.nav-toggle { display: none; }

@media (max-width: 860px) {
  nav.main-nav {
    display: none;
    position: absolute;
    top: 62px; left: 0; right: 0;
    background: var(--ink);
    flex-direction: column;
    padding: 8px 16px 16px;
    border-bottom: 1px solid var(--border-strong);
  }
  nav.main-nav.open { display: flex; }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    background: transparent;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    color: var(--text);
    font-size: 1.2rem;
    cursor: pointer;
  }
  /* Sous-menus toujours dépliés sur mobile, en retrait sous une petite
     étiquette de section plutôt que derrière un clic supplémentaire. */
  .nav-group-toggle { display: none; }
  .nav-group-label {
    display: block; padding: 10px 14px 2px;
    font-family: var(--font-mono); font-size: .64rem; text-transform: uppercase;
    letter-spacing: .5px; color: var(--text-soft); opacity: .75;
  }
  .nav-group-menu {
    display: flex; position: static; margin-top: 0; padding: 0;
    background: transparent; border: none; box-shadow: none; min-width: 0;
  }
}

/* ---------- Layout ---------- */
main { flex: 1; }
.container { max-width: 1180px; margin: 0 auto; padding: 36px 20px 60px; }
.container.narrow { max-width: 840px; }

section + section { margin-top: 40px; }

h1, h2, h3, h4 { font-family: var(--font-head); color: var(--text); line-height: 1.15; font-weight: 700; }
h1 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); letter-spacing: -.01em; }
h2 {
  font-family: var(--font-mono);
  font-size: 1.3rem; font-weight: 600; letter-spacing: 0;
  padding-left: 0; margin: 0 0 18px;
}
h3 { font-size: 1.05rem; margin: 0 0 8px; font-family: var(--font-body); font-weight: 700; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--amber);
  background: transparent;
  padding: 0;
  margin-bottom: 10px;
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 6px var(--amber); flex: none; }
.lede { color: var(--text-soft); font-size: 1.05rem; max-width: 62ch; }

/* ---------- Hero ---------- */
.hero {
  color: var(--text);
  position: relative;
  overflow: hidden;
}
.hero-inner {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: 52px 20px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero .eyebrow { justify-content: center; }
.hero h1 { color: var(--text); margin: 0 0 14px; }
.hero .lede { color: var(--text-soft); max-width: 520px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; justify-content: center; }

/* ---------- Cards / grid ---------- */
.grid { display: grid; gap: 20px; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 940px) { .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-soft);
}
.card.link-card { transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.card.link-card:hover {
  border-color: var(--border-strong); transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,.32); text-decoration: none;
}
.card .icon { font-size: 1.8rem; }
.card h3 { margin: 0; color: var(--text); }
.card p { margin: 0; color: var(--text-soft); font-size: .93rem; }
.card .tag {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 4px;
  background: var(--panel-light);
  color: var(--text-soft);
}
.card .tag.ssiap1 { background: rgba(245,165,36,.14); color: var(--amber); }
.card .tag.ssiap2 { background: rgba(79,141,253,.14); color: var(--blue); }

/* ---- 3 chemins d'action (accueil) ---- */
.action-card { position: relative; padding: 26px 24px; }
.action-card .action-badge {
  position: absolute; top: 18px; right: 20px;
  font-family: var(--font-mono); font-size: .64rem; font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
  padding: 3px 8px; background: rgba(245,165,36,.14); color: var(--amber); border-radius: 4px;
}
.action-card .action-icon {
  width: 44px; height: 44px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.action-card .action-icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.action-cta {
  display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 600; letter-spacing: .4px; text-transform: uppercase;
}
.action-cta svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; }

/* ---- Bande "comment ça marche" compacte ---- */
.step-strip { padding: 6px; }
.step-strip-row { display: grid; grid-template-columns: repeat(3, 1fr); }
.step-strip-item { display: flex; align-items: center; gap: 14px; padding: 18px 20px; }
.step-strip-item + .step-strip-item { border-left: 1px solid var(--border); }
.step-strip-num { font-family: var(--font-mono); font-size: 1.15rem; font-weight: 600; color: var(--amber); flex: none; }
.step-strip-title { font-size: .88rem; font-weight: 600; margin-bottom: 2px; }
.step-strip-text { font-size: .8rem; color: var(--text-soft); line-height: 1.5; }
@media (max-width: 720px) {
  .step-strip-row { grid-template-columns: 1fr; }
  .step-strip-item + .step-strip-item { border-left: none; border-top: 1px solid var(--border); }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: .93rem;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--font-body);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--amber); color: var(--text-inverse); box-shadow: 0 4px 14px rgba(245,165,36,.28); }
.btn-primary:hover { background: #ffb84d; box-shadow: 0 6px 18px rgba(245,165,36,.4); }
.btn-outline { background: transparent; border-color: var(--border-strong); color: var(--text); }
.btn-outline:hover { background: rgba(255,255,255,.06); }
.btn-dark { background: var(--panel-light); color: var(--text); border-color: var(--border-strong); }
.btn-dark:hover { background: #232c3d; }
.btn-ghost { background: var(--panel-light); color: var(--text); border-color: var(--border); }
.btn-ghost:hover { background: #232c3d; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover { transform: none; }
.btn-block { width: 100%; justify-content: center; }
.btn-sm { padding: 8px 13px; font-size: .82rem; }

/* ---------- Callouts ---------- */
.callout {
  border-radius: var(--radius);
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--amber);
  background: var(--panel);
  font-size: .92rem;
  color: var(--text-soft);
}
.callout.info { border-left-color: var(--blue); background: rgba(79,141,253,.08); border-color: rgba(79,141,253,.25); }
.callout.warn { border-left-color: var(--red); background: rgba(224,57,62,.1); border-color: rgba(224,57,62,.3); }

/* ---------- Filters / pills ---------- */
.filter-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.pill {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--panel);
  font-weight: 600;
  font-size: .85rem;
  cursor: pointer;
  color: var(--text-soft);
}
.pill.active { border-color: var(--amber); color: var(--amber); background: rgba(245,165,36,.12); }

/* ==========================================================================
   QUIZBOX — style examen officiel
   ========================================================================== */
.quizbox {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.quizbox-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  background: var(--ink-soft);
  border-bottom: 1px solid var(--border);
  gap: 12px;
  flex-wrap: wrap;
}
.qb-progress-wrap { flex: 1; min-width: 160px; }
.qb-progress-label { font-family: var(--font-mono); font-size: .68rem; color: var(--text-soft); margin-bottom: 5px; letter-spacing: .5px; text-transform: uppercase; }
.qb-progress-bar { height: 4px; background: var(--panel-light); border-radius: 999px; overflow: hidden; }
.qb-progress-fill { height: 100%; background: linear-gradient(90deg, var(--amber), #ffc25c); transition: width .3s ease; }
.qb-timer {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--amber);
  background: var(--panel-light);
  padding: 6px 14px;
  border-radius: 8px;
  letter-spacing: .5px;
  border: 1px solid var(--border-strong);
}
.qb-timer.low { color: var(--red-light); animation: pulse 1s infinite; }
.qb-exit-btn {
  flex: none;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border-strong); border-radius: 7px;
  color: var(--text-soft); font-size: .85rem; cursor: pointer;
}
.qb-exit-btn:hover { color: var(--text); background: var(--panel-light); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.qb-timer-wrap { display: flex; align-items: center; gap: 8px; }
.qb-timer-wrap .btn { background: var(--panel); color: var(--text); border: 1px solid var(--border-strong); }
.qb-timer-wrap .btn:hover { background: var(--panel-light); }

.qb-body { padding: 30px 28px 26px; }
.qb-meta { display:flex; gap:8px; margin-bottom: 14px; flex-wrap: wrap; }
.qb-meta .badge {
  font-family: var(--font-mono);
  font-size: .64rem; font-weight: 600; text-transform: uppercase; letter-spacing: .6px;
  padding: 4px 10px; border-radius: 5px; background: var(--panel-light); color: var(--text-soft);
}
.qb-question { font-size: 1.3rem; font-weight: 600; margin: 0 0 6px; color: var(--text); font-family: var(--font-head); }
.qb-hint { font-family: var(--font-mono); font-size: .72rem; color: var(--text-soft); margin-bottom: 18px; text-transform: uppercase; letter-spacing: .3px; }

.qb-choices { display: flex; flex-direction: column; gap: 10px; }
.qb-choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--ink-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 15px 18px;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.qb-choice:hover { border-color: rgba(245,165,36,.4); }
.qb-choice .letter {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 6px;
  font-family: var(--font-mono);
  background: transparent;
  border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: .85rem; color: var(--text-soft);
}
.qb-choice.selected { border-color: var(--amber); background: rgba(245,165,36,.1); }
.qb-choice.selected .letter { background: var(--amber); border-color: var(--amber); color: var(--text-inverse); }
.qb-choice.correct { border-color: var(--green); background: rgba(52,211,153,.12); }
.qb-choice.correct .letter { background: var(--green); border-color: var(--green); color: var(--text-inverse); }
.qb-choice.incorrect { border-color: var(--red); background: rgba(224,57,62,.14); }
.qb-choice.incorrect .letter { background: var(--red); border-color: var(--red); color: #fff; }
.qb-choice-text { font-size: .97rem; color: var(--text); }

.qb-explain {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 8px;
  background: var(--ink-soft);
  border-left: 3px solid var(--amber);
  font-size: .88rem;
  color: var(--text-soft);
  display: none;
}
.qb-explain.show { display: block; }

.qb-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  background: var(--ink-soft);
  border-top: 1px solid var(--border);
  gap: 10px;
  flex-wrap: wrap;
}
.qb-score-live { font-family: var(--font-mono); font-size: .78rem; color: var(--text-soft); text-transform: uppercase; letter-spacing: .3px; }
.qb-score-live b { color: var(--text); }

@media (max-width: 720px), (max-height: 600px) and (orientation: landscape) {
  /* Le bouton "Valider" du quiz solo devient une barre fixée en bas de
     l'écran : sur un long QCM (4 choix + explications), il fallait sinon
     scroller jusqu'en bas à chaque question pour le trouver. */
  #quiz-screen .qb-footer {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    border-radius: 0;
    box-shadow: 0 -6px 20px rgba(0,0,0,.4);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  }
  #quiz-screen .qb-score-live { display: none; }
  #quiz-screen .qb-footer #qb-next-btn { width: 100%; justify-content: center; }
  /* Réserve la place de la barre fixe pour que la dernière réponse et le
     pied de page du site ne se retrouvent pas cachés derrière. */
  #quiz-screen { padding-bottom: 78px; }

  /* Carte de question resserrée : sur un petit écran (ex. Galaxy S25 en
     portrait), il fallait encore scroller un peu pour voir les 4 réponses. */
  #quiz-screen .quizbox-topbar { padding: 10px 14px; }
  #quiz-screen .qb-progress-label { font-size: .62rem; margin-bottom: 4px; }
  #quiz-screen .qb-body { padding: 14px 16px 10px; }
  #quiz-screen .qb-meta { margin-bottom: 8px; gap: 6px; }
  #quiz-screen .qb-meta .badge { font-size: .6rem; padding: 3px 7px; }
  #quiz-screen .qb-question { font-size: 1.05rem; line-height: 1.28; margin-bottom: 4px; }
  #quiz-screen .qb-choices { gap: 8px; }
  #quiz-screen .qb-choice { padding: 11px 14px; gap: 10px; }
  #quiz-screen .qb-choice .letter { width: 25px; height: 25px; font-size: .76rem; }
  #quiz-screen .qb-choice-text { font-size: .9rem; }
}

/* Paysage sur petit écran (téléphone tourné) : hauteur très limitée, on
   passe les réponses en grille 2x2 et on resserre encore la carte pour
   limiter au maximum le besoin de scroller pendant le quiz. */
@media (max-height: 600px) and (orientation: landscape) {
  #quiz-screen .qb-body { padding: 6px 14px 4px; }
  #quiz-screen .qb-meta { display: none; }
  #quiz-screen .qb-question { font-size: .84rem; line-height: 1.2; margin-bottom: 4px; }
  #quiz-screen .qb-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; }
  #quiz-screen .qb-choice { padding: 5px 8px; gap: 6px; border-radius: 7px; }
  #quiz-screen .qb-choice .letter { width: 18px; height: 18px; font-size: .62rem; border-radius: 4px; }
  #quiz-screen .qb-choice-text { font-size: .74rem; line-height: 1.2; }
  #quiz-screen .quizbox-topbar { padding: 4px 14px; }
  #quiz-screen .qb-progress-label { margin-bottom: 1px; font-size: .56rem; }
  #quiz-screen .qb-progress-bar { height: 3px; }
  #quiz-screen .qb-timer { font-size: .8rem; padding: 3px 8px; }
  #quiz-screen .qb-footer { padding: 5px 16px calc(5px + env(safe-area-inset-bottom)); }
  #quiz-screen .qb-footer #qb-next-btn { padding: 7px 14px; font-size: .78rem; }
  #quiz-screen { padding-bottom: 40px; }
}

/* Result screen */
.result-hero {
  text-align: center;
  padding: 30px 20px;
}
.result-score {
  font-size: 3.4rem;
  font-weight: 700;
  font-family: var(--font-head);
  color: var(--text);
}
.result-score.pass { color: var(--green); }
.result-score.fail { color: var(--red); }
.result-sub { color: var(--text-soft); margin-bottom: 20px; }
.review-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: var(--panel);
}
.review-item.wrong { border-left: 3px solid var(--red); }
.review-item.right { border-left: 3px solid var(--green); }
.review-item .q { font-weight: 600; margin-bottom: 6px; color: var(--text); }
.review-item .a { font-size: .87rem; color: var(--text-soft); }
.review-item .a.your-wrong { color: var(--red-light); }
.review-item .a.correct-answer { color: var(--green); }

/* ---------- Footer ---------- */
footer.site-footer {
  background: var(--ink);
  color: var(--text-soft);
  border-top: 1px solid var(--border);
  padding: 26px 20px;
  font-size: .82rem;
  font-family: var(--font-mono);
  text-align: center;
}
footer.site-footer a { color: var(--text-soft); }

/* ---------- Utilities ---------- */
.stack { display: flex; flex-direction: column; gap: 14px; }
.row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.hidden { display: none !important; }
.select-input {
  padding: 11px 14px; border-radius: 7px; border: 1px solid var(--border-strong);
  /* 16px mini : sous ce seuil Safari iOS zoome automatiquement la page au focus. */
  font-size: 1rem; font-weight: 600; background: var(--panel); color: var(--text);
}

/* ==========================================================================
   QUIZBOX EN DIRECT — animateur (host) et joueur (join)
   ========================================================================== */

/* ---- Écran d'accueil animateur : configuration + lobby ---- */
.host-setup { max-width: 560px; margin: 0 auto; }
.exam-blanc-sep { text-align: center; color: var(--text-soft); font-family: var(--font-mono); font-size: .74rem; text-transform: uppercase; letter-spacing: 1px; margin: 4px 0; }

/* ---- Bouton plein écran (animateur, visible sur tous les écrans) ---- */
.fullscreen-toggle {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 200;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--panel);
  color: var(--text);
  font-size: 1.1rem;
  cursor: pointer;
}
.fullscreen-toggle:hover { background: var(--panel-light); }
@media (max-width: 860px) and (min-width: 721px) {
  /* Sous 860px le header affiche le menu hamburger dans ce même coin :
     on bascule le bouton plein écran en bas à droite pour ne pas les
     superposer (les deux étaient cliquables au même endroit). */
  .fullscreen-toggle { top: auto; bottom: 16px; right: 16px; }
}
/* "Petit écran" = téléphone en portrait (largeur réduite) OU en paysage
   (largeur normale mais hauteur très réduite, ex. Galaxy S25 tourné). Les
   deux déclenchent le même mode immersif pour le quiz solo. */
@media (max-width: 720px), (max-height: 600px) and (orientation: landscape) {
  /* Le plein écran n'apporte rien sur téléphone (API non supportée par
     Safari iOS, application déjà plein écran une fois installée en PWA) et
     le bouton finissait par chevaucher la barre "Valider" fixée en bas. */
  .fullscreen-toggle { display: none; }

  /* Quiz solo, sur téléphone : une fois une question affichée, on masque le
     bandeau et le header/footer du site pour ne garder que la question et
     ses réponses — mode immersif façon appli, tout l'écran y passe. Le ✕
     dans la carte reste le seul moyen de sortir. */
  body:has(#quiz-screen:not(.hidden)) .hazard-strip,
  body:has(#quiz-screen:not(.hidden)) .site-header,
  body:has(#quiz-screen:not(.hidden)) footer.site-footer {
    display: none;
  }
  body:has(#quiz-screen:not(.hidden)) main .container {
    padding-top: 10px;
  }
}
/* Le chapeau de la page ("Entraînement individuel" / "Réviser en solo" /
   texte d'intro) n'a plus sa place une fois le quiz lancé, quelle que soit
   la taille d'écran : seule la question compte à l'écran. */
body:has(#quiz-screen:not(.hidden)) main .container > .eyebrow,
body:has(#quiz-screen:not(.hidden)) main .container > h1,
body:has(#quiz-screen:not(.hidden)) main .container > .lede {
  display: none;
}
.lobby-card {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px 30px;
  text-align: center;
}
.lobby-code-label { font-family: var(--font-mono); font-size: .74rem; letter-spacing: 2px; text-transform: uppercase; color: var(--amber); font-weight: 600; }
.lobby-code {
  font-family: var(--font-mono);
  font-size: clamp(3rem, 10vw, 5rem);
  font-weight: 600;
  letter-spacing: 10px;
  margin: 10px 0 6px;
  color: var(--text);
}
.lobby-url { color: var(--text-soft); font-size: .95rem; margin-bottom: 18px; word-break: break-word; }
.lobby-url strong { color: var(--text); font-family: var(--font-mono); }
.lobby-qr-wrap {
  background: #fff; display: inline-block; padding: 10px; border-radius: 12px;
  margin-bottom: 22px;
}
.lobby-qr-wrap svg { display: block; width: 180px; height: 180px; }
.lobby-players-count { font-family: var(--font-mono); font-size: .78rem; color: var(--text-soft); margin-bottom: 12px; letter-spacing: .5px; text-transform: uppercase; }
.lobby-players {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  min-height: 44px; margin-bottom: 28px;
}
.lobby-player-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--panel-light);
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .88rem;
  animation: pop-in .25s ease;
}
@keyframes pop-in { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.lobby-empty { color: var(--text-soft); font-size: .9rem; padding: 10px 0; }

/* ---- Barre de progression réponses (host, pendant une question) ---- */
.qb-answer-progress { font-family: var(--font-mono); font-size: .76rem; color: var(--text-soft); text-align: center; padding: 10px; text-transform: uppercase; letter-spacing: .3px; }

/* ---- Distribution des réponses (reveal, host) ---- */
.reveal-bars { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.reveal-bar-row { display: flex; align-items: center; gap: 10px; }
.reveal-bar-letter {
  width: 28px; height: 28px; border-radius: 6px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 600; font-size: .85rem; color: var(--text); background: var(--panel-light);
  border: 1px solid var(--border-strong);
}
.reveal-bar-letter.correct { background: var(--green); border-color: var(--green); color: var(--text-inverse); }
.reveal-bar-track { flex: 1; background: var(--ink-soft); border-radius: 999px; overflow: hidden; height: 22px; }
.reveal-bar-fill { height: 100%; background: var(--panel-light); border-radius: 999px; transition: width .4s ease; }
.reveal-bar-fill.correct { background: var(--green); }
.reveal-bar-count { width: 28px; text-align: right; font-family: var(--font-mono); font-weight: 600; color: var(--text-soft); font-size: .85rem; }

/* ---- Classement (host & podium fin de partie) ---- */
.leaderboard-list { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.leaderboard-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 16px;
  color: var(--text);
}
.leaderboard-rank { font-family: var(--font-mono); font-weight: 600; font-size: 1rem; width: 26px; color: var(--amber); }
.leaderboard-name { flex: 1; font-weight: 600; }
.leaderboard-score { font-family: var(--font-mono); font-weight: 600; color: var(--text-soft); }
.rank-change { width: 16px; text-align: center; font-size: .8rem; flex: none; }
.rank-change.rank-up { color: var(--green); }
.rank-change.rank-down { color: var(--red-light); }
.rank-change.rank-same { color: var(--text-soft); }

/* ---- Résultats examen blanc (host, fin de partie) ---- */
.exam-results-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.exam-result-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 16px;
  color: var(--text);
}
.exam-result-row .name { flex: 1; font-weight: 600; }
.exam-result-row .note { font-family: var(--font-mono); font-weight: 600; color: var(--text-soft); }
.exam-badge {
  font-family: var(--font-mono);
  font-size: .68rem; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .5px; white-space: nowrap;
}
.exam-badge.admis { background: rgba(52,211,153,.16); color: var(--green); }
.exam-badge.non-admis { background: rgba(224,57,62,.16); color: var(--red-light); }

.podium { display: flex; align-items: flex-end; justify-content: center; gap: 14px; margin: 30px 0; }
.podium-step { text-align: center; }
.podium-step .medal { font-size: 2rem; }
.podium-step .name { font-weight: 600; margin: 6px 0 2px; }
.podium-step .score { font-family: var(--font-mono); color: var(--amber); font-weight: 600; font-size: .9rem; }
.podium-step .bar { border-radius: 8px 8px 0 0; margin-top: 10px; transform-origin: bottom; animation: podium-grow .5s ease backwards; }
.podium-step.first .bar { background: linear-gradient(180deg, var(--amber), var(--amber-dark)); height: 120px; width: 90px; animation-delay: .2s; }
.podium-step.second .bar { background: linear-gradient(180deg, #a8b0c0, #6b7280); height: 85px; width: 90px; animation-delay: 0s; }
.podium-step.third .bar { background: linear-gradient(180deg, #b57a4a, #8a5a30); height: 60px; width: 90px; animation-delay: .4s; }
@keyframes podium-grow { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }

/* ---- Écran joueur (smartphone) ---- */
.join-form { max-width: 380px; margin: 0 auto; }
.join-form input {
  width: 100%; padding: 16px; font-size: 1.3rem; text-align: center;
  border-radius: 10px; border: 1px solid var(--border-strong); margin-bottom: 14px;
  font-family: var(--font-mono); letter-spacing: 4px; font-weight: 600;
  background: var(--panel); color: var(--text);
}
.join-form input#pj-name { font-family: var(--font-body); letter-spacing: normal; font-size: 1.05rem; }
.join-form input::placeholder { color: var(--text-soft); }

.player-waiting { text-align: center; padding: 50px 20px; }
.player-waiting .pulse-dot {
  width: 16px; height: 16px; border-radius: 50%; background: var(--green);
  display: inline-block; margin-right: 8px; animation: blink 1s infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
.player-waiting .pulse-dot.reconnecting { background: var(--amber); }

/* ---- Bandeau de reconnexion (joueur) ---- */
.reconnect-banner {
  background: rgba(52,211,153,.12);
  color: var(--green);
  border: 1px solid rgba(52,211,153,.3);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: .85rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 14px;
}

/* ---- Choix d'avatar (rejoindre une partie) ---- */
.avatar-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 10px; margin: 18px 0 22px; }
.avatar-picker-item { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; background: none; border: none; padding: 0; font-family: var(--font-body); }
.avatar-tile {
  position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.avatar-tile svg { width: 52%; height: 52%; stroke: #fff; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.avatar-picker-item.picked .avatar-tile { box-shadow: 0 0 0 3px var(--panel), 0 0 0 5px var(--amber); }
.avatar-picker-item.picked .avatar-tile::after {
  content: "✓"; position: absolute; bottom: -2px; right: -2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--amber); color: var(--text-inverse);
  font-weight: 700; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--panel);
}
.avatar-picker-name { font-size: .68rem; color: var(--text-soft); text-align: center; line-height: 1.25; }
.avatar-picker-item.picked .avatar-picker-name { color: var(--text); }

/* ---- Badge avatar réutilisable (lobby, classement, podium) ---- */
.avatar-chip {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; flex: none;
}
.avatar-chip svg { width: 60%; height: 60%; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.leaderboard-row .avatar-chip, .exam-result-row .avatar-chip { width: 26px; height: 26px; }
.podium-step .avatar-chip { width: 34px; height: 34px; margin-bottom: 4px; }

.buzzer-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  max-width: 480px; margin: 0 auto;
}
.buzzer-btn {
  aspect-ratio: 1;
  border: none; border-radius: 16px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; font-weight: 900; color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 0 rgba(0,0,0,.35);
  transition: transform .08s ease;
}
.buzzer-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0,0,0,.35); }
.buzzer-btn.a { background: var(--red); }
.buzzer-btn.b { background: var(--blue); }
.buzzer-btn.c { background: var(--amber); }
.buzzer-btn.d { background: var(--green); }
.buzzer-btn:disabled { opacity: .4; cursor: not-allowed; }
.buzzer-btn.chosen {
  outline: 5px solid #fff; outline-offset: -5px;
  box-shadow: inset 0 0 0 4px rgba(0,0,0,.35), 0 2px 0 rgba(0,0,0,.35);
  transform: translateY(3px) scale(.96);
}
.buzzer-btn.chosen::after {
  content: "✓";
  position: absolute;
  top: 8px; right: 10px;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  color: var(--ink);
  border-radius: 50%;
  font-size: 1rem; font-weight: 900;
  box-shadow: 0 2px 4px rgba(0,0,0,.35);
}
#buzzer-validate:disabled { opacity: .45; cursor: not-allowed; }

.player-reveal { text-align: center; padding: 40px 20px; }
.player-reveal .result-icon { font-size: 4rem; }
.player-reveal .delta { font-size: 1.6rem; font-weight: 700; margin: 10px 0; }
.player-reveal .delta.correct { color: var(--green); }
.player-reveal .delta.wrong { color: var(--red); }
.player-reveal .total-score { color: var(--text-soft); }

.player-rank-badge {
  display: inline-block; font-size: .8rem; font-weight: 600;
  background: var(--panel-light); border: 1px solid var(--border-strong); color: var(--text);
  padding: 6px 14px; border-radius: 999px; margin-top: 10px;
}

/* ==========================================================================
   PICTOGRAMMES — style signalétique de sécurité incendie
   ========================================================================== */
.pictogram-tile {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; flex: none;
}
.pictogram-tile svg {
  display: block; width: 100%; height: 100%;
  fill: none; stroke: #fff; color: #fff;
  stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}
.pictogram-tile.red { background: var(--red); }
.pictogram-tile.green { background: var(--green-dark); }
.pictogram-tile.blue { background: var(--blue); }
.pictogram-tile.ink { background: var(--panel-light); }
.pictogram-tile.amber { background: var(--amber-dark); }
.pictogram-tile.sm { width: 32px; height: 32px; padding: 6px; border-radius: 6px; }
.pictogram-tile.md { width: 54px; height: 54px; padding: 11px; }
.pictogram-tile.lg { width: 92px; height: 92px; padding: 18px; border-radius: 16px; }
.card .pictogram-tile { margin-bottom: 4px; }

.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--amber); color: var(--text-inverse);
  font-family: var(--font-mono); font-weight: 600; font-size: 1.1rem;
  margin-bottom: 6px;
}

/* ==========================================================================
   Compte utilisateur (puce header + modale connexion/inscription)
   ========================================================================== */
.account-chip { display: flex; align-items: center; gap: 8px; flex: none; }
.account-chip-name {
  font-family: var(--font-mono); font-size: .78rem; font-weight: 600; color: var(--text-soft);
  white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis;
}
.account-chip-logout {
  background: transparent; border: 1px solid var(--border-strong); border-radius: 6px;
  color: var(--text-soft); font-size: .72rem; padding: 5px 9px; cursor: pointer; font-family: var(--font-body);
}
.account-chip-logout:hover { color: var(--text); background: var(--panel-light); }
/* Lien "Déconnexion (pseudo)" ajouté au menu déroulant — en clair, utile
   surtout sous 860px où la puce du header se réduit (ci-dessous) ; masqué
   sur desktop pour ne pas doubler le bouton déjà dans la puce. */
.account-nav-logout {
  display: none;
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  color: var(--text-soft); font-family: var(--font-body); font-size: .84rem; font-weight: 500;
  padding: 9px 14px; border-radius: 6px;
}
.account-nav-logout:hover { color: var(--text); background: rgba(255,255,255,.06); }
@media (max-width: 860px) {
  /* Sous 860px, le header a aussi la puce de compte à caser avant le
     hamburger : sans ça, la ligne dépasse la largeur de l'écran et le
     bouton menu se retrouve hors champ (repéré : il fallait défiler
     horizontalement pour l'atteindre). Le pseudo suffit dans la puce ; le
     vrai bouton "Déconnexion" en clair vit dans le menu déroulant. */
  .account-chip-name { max-width: 90px; font-size: .7rem; }
  .account-chip-logout { display: none; }
  .account-nav-logout { display: block; }
}

.account-modal-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(5,7,11,.7);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.account-modal {
  position: relative;
  width: 100%; max-width: 360px;
  padding: 28px 24px 24px;
}
.account-modal-close {
  position: absolute; top: 12px; right: 12px;
  background: none; border: none; color: var(--text-soft);
  font-size: 1rem; cursor: pointer; padding: 4px; line-height: 1;
}
.account-modal-close:hover { color: var(--text); }
.account-modal-tabs { display: flex; gap: 6px; margin-bottom: 18px; }
.account-tab {
  flex: 1; padding: 9px; border-radius: 7px; border: 1px solid var(--border-strong);
  background: transparent; color: var(--text-soft); font-weight: 600; font-size: .85rem; cursor: pointer;
}
.account-tab.active { background: var(--panel-light); color: var(--text); border-color: var(--amber); }
.account-google-btn { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 6px; }
.account-form-sep { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; color: var(--text-soft); font-size: .75rem; text-transform: uppercase; letter-spacing: .5px; }
.account-form-sep::before, .account-form-sep::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.account-form { display: flex; flex-direction: column; gap: 12px; }
.account-form input {
  padding: 12px 14px; border-radius: 7px; border: 1px solid var(--border-strong);
  background: var(--ink-soft); color: var(--text); font-size: 1rem; font-family: var(--font-body);
}
.account-modal-note { font-size: .76rem; color: var(--text-soft); margin: -4px 0 0; line-height: 1.4; }
.account-error { font-size: .82rem; color: var(--red-light); margin: 0; }

/* ==========================================================================
   Toast d'obtention de badge
   ========================================================================== */
.badge-toast {
  position: fixed; z-index: 250;
  top: 16px; left: 50%;
  transform: translate(-50%, -20px);
  opacity: 0;
  display: flex; align-items: center; gap: 12px;
  background: var(--panel); border: 1px solid var(--amber); border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
  padding: 12px 18px;
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.badge-toast.show { opacity: 1; transform: translate(-50%, 0); }
.badge-toast-icon { font-size: 1.8rem; flex: none; }
.badge-toast-title { font-family: var(--font-mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .8px; color: var(--amber); }
.badge-toast-name { font-weight: 700; color: var(--text); font-size: .92rem; }

/* ==========================================================================
   Page "Mes trophées"
   ========================================================================== */
.agent-card { margin-bottom: 28px; }
.agent-card-row { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.agent-card-avatar {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  background: var(--panel-light); border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
  cursor: pointer; font-family: inherit; padding: 0;
  transition: border-color .15s;
}
.agent-card-avatar:hover { border-color: var(--amber); }
.avatar-picker-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 14px 0; }
.avatar-picker-btn {
  width: 44px; height: 44px; border-radius: 50%; font-size: 1.3rem;
  background: var(--panel-light); border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color .15s, transform .1s;
}
.avatar-picker-btn:hover { border-color: var(--amber); transform: scale(1.08); }
.avatar-picker-btn.active { border-color: var(--amber); background: rgba(245,165,36,.14); }
.agent-card-name-row { display: flex; align-items: center; gap: 6px; }
.agent-card-name { font-family: var(--font-head); font-size: 1.15rem; font-weight: 700; color: var(--text); }
.agent-card-rank { font-family: var(--font-mono); font-size: .78rem; color: var(--amber); text-transform: uppercase; letter-spacing: .5px; }
.agent-card-edit {
  background: transparent; border: none; font-size: .8rem; line-height: 1; padding: 2px;
  cursor: pointer; opacity: .7; flex: none;
}
.agent-card-edit:hover { opacity: 1; }
.agent-card-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.agent-card-stat { background: var(--ink-soft); border-radius: 8px; padding: 10px; text-align: center; }
.agent-card-stat-value { font-family: var(--font-head); font-size: 1.2rem; font-weight: 700; color: var(--text); }
.agent-card-stat-label { font-size: .68rem; color: var(--text-soft); text-transform: uppercase; letter-spacing: .3px; }
.agent-card-next { margin: 12px 0 0; font-size: .82rem; color: var(--text-soft); text-align: center; }
.agent-card-logout-row { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); text-align: center; }
.agent-card-logout-row .account-chip-logout { font-size: .78rem; }

/* ==========================================================================
   Duels 1v1 asynchrones
   ========================================================================== */
.duel-waiting { text-align: center; color: var(--text-soft); padding: 30px 0; }
.duel-share-box {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  background: var(--ink-soft); border: 1px solid var(--border-strong);
  border-radius: 8px; padding: 10px 12px; margin: 16px 0 0;
}
.duel-share-box input {
  flex: 1; min-width: 160px; background: transparent; border: none; color: var(--text);
  font-family: var(--font-mono); font-size: .8rem; padding: 4px;
}
.duel-share-box input:focus { outline: none; }
.duel-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; margin: 22px 0; }
.duel-vs-side {
  padding: 18px 12px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--panel); text-align: center;
}
.duel-vs-side.winner { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.duel-vs-avatar {
  width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 10px;
  background: var(--panel-light); border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
}
.duel-vs-side.winner .duel-vs-avatar { border-color: var(--green); }
.duel-vs-name { font-weight: 700; margin-bottom: 8px; overflow-wrap: anywhere; }
.duel-vs-score { font-family: var(--font-head); font-size: 1.9rem; font-weight: 700; color: var(--text); }
.duel-vs-sep { font-family: var(--font-head); color: var(--text-soft); font-size: 1.1rem; text-align: center; }
@media (max-width: 640px) {
  .duel-vs { grid-template-columns: 1fr; }
  .duel-vs-sep { display: none; }
}

/* ==========================================================================
   Cours SSIAP 1
   ========================================================================== */
.course-index-card { display: block; padding: 22px; margin-bottom: 16px; }
.course-index-card h3 { margin: 6px 0 6px; }
.course-index-card .eyebrow { margin-bottom: 0; }
.course-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 36px; }
.course-toc a {
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border-strong);
  background: var(--panel); color: var(--text-soft); font-size: .84rem; font-weight: 600; text-decoration: none;
}
.course-toc a:hover { border-color: var(--amber); color: var(--amber); }
.course-section { margin-bottom: 50px; padding-top: 14px; scroll-margin-top: 90px; }
.course-section h2 { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.course-section h2 .seq-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; background: var(--amber); color: var(--text-inverse);
  font-family: var(--font-mono); font-weight: 700; font-size: .92rem; flex: none;
}
.course-section h3 { margin-top: 26px; margin-bottom: 10px; color: var(--amber); font-size: 1.02rem; }
.course-section p { line-height: 1.7; margin-bottom: 14px; color: var(--text); }
.course-section ul, .course-section ol { line-height: 1.7; margin-bottom: 16px; padding-left: 22px; }
.course-section li { margin-bottom: 5px; }
.course-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); margin: 18px 0 24px; }
.course-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.course-table th, .course-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.course-table th { font-family: var(--font-mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .5px; color: var(--text-soft); background: var(--ink-soft); }
.course-table tr:last-child td { border-bottom: none; }
.course-diagram { margin: 20px 0 26px; text-align: center; }
.course-diagram img { max-width: 100%; max-height: 520px; border-radius: var(--radius); border: 1px solid var(--border); background: #fff; padding: 8px; }
.course-diagram-caption { margin-top: 8px; font-size: .8rem; color: var(--text-soft); font-style: italic; }
.course-prereq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 18px 0; }
.course-prereq-grid .card { padding: 16px; }
.course-nav-links { display: flex; justify-content: space-between; gap: 12px; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--border); flex-wrap: wrap; }

/* ==========================================================================
   Communauté — bande d'activité en direct, avatars, états vides chaleureux
   ========================================================================== */
.pulse-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px;
  background: linear-gradient(135deg, rgba(245,165,36,.10), rgba(167,139,250,.10));
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 16px 24px; margin: 0 0 32px;
}
.pulse-item { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--text-soft); }
.pulse-item strong { color: var(--text); font-family: var(--font-head); font-weight: 600; }
.pulse-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green);
  flex: none; animation: pulse-glow 2s ease-in-out infinite;
}
@keyframes pulse-glow { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.pulse-avatars { display: flex; align-items: center; }
.pulse-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--panel-light);
  border: 2px solid var(--paper); display: flex; align-items: center; justify-content: center;
  font-size: 1rem; margin-left: -9px;
}
.pulse-avatar:first-child { margin-left: 0; }
.pulse-activity { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--text-soft); max-width: 100%; }
.pulse-activity .pulse-avatar { margin-left: 0; width: 26px; height: 26px; font-size: .9rem; flex: none; }
.pulse-activity span.msg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
@media (max-width: 640px) {
  .pulse-strip { padding: 14px 18px; gap: 14px; }
  .pulse-activity span.msg { max-width: 160px; }
}

/* Puce avatar+pseudo réutilisable (classement, activité...) */
.member-chip { display: inline-flex; align-items: center; gap: 8px; }
.member-chip .avatar-dot {
  width: 26px; height: 26px; border-radius: 50%; background: var(--panel-light);
  border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center;
  font-size: .92rem; flex: none;
}

/* État vide, ton chaleureux plutôt que constat froid */
.empty-invite {
  text-align: center; padding: 32px 20px; color: var(--text-soft);
  border: 1px dashed var(--border-strong); border-radius: var(--radius); margin-top: 20px;
}
.empty-invite .icon { font-size: 1.8rem; display: block; margin-bottom: 8px; }
.empty-invite strong { color: var(--text); }

/* Petite bulle mascotte (accueil) */
.mascot-banner {
  display: flex; align-items: center; gap: 14px; padding: 16px 20px;
  background: rgba(167,139,250,.08); border: 1px solid rgba(167,139,250,.25);
  border-radius: var(--radius); margin: 0 0 28px;
}
.mascot-banner .mascot-face {
  width: 42px; height: 42px; border-radius: 50%; flex: none; font-size: 1.4rem;
  display: flex; align-items: center; justify-content: center;
  background: rgba(167,139,250,.16); border: 1px solid rgba(167,139,250,.35);
}
.mascot-banner p { margin: 0; font-size: .88rem; color: var(--text); }
.mascot-banner a { color: var(--community); font-weight: 600; }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.badge-card { text-align: center; align-items: center; }
.badge-card .badge-card-icon { font-size: 2.4rem; filter: grayscale(1) opacity(.35); }
.badge-card.earned .badge-card-icon { filter: none; }
.badge-card h3 { font-size: .95rem; }
.badge-card p { font-size: .82rem; }
.badge-card .badge-card-date { font-family: var(--font-mono); font-size: .68rem; color: var(--amber); margin-top: 4px; }

/* ==========================================================================
   Chat public (bouton flottant + panneau)
   ========================================================================== */
.chat-fab {
  position: fixed; z-index: 140;
  left: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
  height: 56px; padding: 0 20px 0 18px; border-radius: 999px;
  background: var(--amber); color: var(--text-inverse);
  border: none; font-size: 1.5rem;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  box-shadow: 0 8px 24px rgba(0,0,0,.45); cursor: pointer;
}
.chat-fab::after {
  content: "Chat"; font-family: var(--font-body); font-size: .92rem; font-weight: 700;
}
@media (max-width: 480px) {
  /* Sur petit écran, l'icône seule suffit et laisse plus de place au reste.
     Un peu plus haut qu'au repos : trop près du bas, il talonne la barre de
     gestes/l'indicateur d'accueil de certains téléphones. */
  .chat-fab { padding: 0; width: 56px; bottom: calc(28px + env(safe-area-inset-bottom)); }
  .chat-fab::after { display: none; }
}
.chat-fab-badge {
  position: absolute; top: -2px; right: -2px;
  background: var(--red); color: #fff; border-radius: 999px;
  min-width: 18px; height: 18px; padding: 0 4px;
  font-family: var(--font-mono); font-size: .68rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--paper);
}
.chat-panel {
  position: fixed; z-index: 145;
  left: 16px; bottom: calc(84px + env(safe-area-inset-bottom));
  width: 400px; max-width: calc(100vw - 32px);
  height: 560px; max-height: calc(100vh - 130px - env(safe-area-inset-bottom));
  background: var(--panel); border: 1px solid var(--border-strong); border-radius: 14px;
  box-shadow: 0 16px 36px rgba(0,0,0,.5);
  display: flex; flex-direction: column; overflow: hidden;
}
.chat-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; background: var(--ink-soft); border-bottom: 1px solid var(--border);
  font-weight: 700; font-size: .88rem;
}
.chat-panel-close { background: none; border: none; color: var(--text-soft); font-size: 1rem; cursor: pointer; padding: 2px; }
.chat-panel-close:hover { color: var(--text); }
.chat-messages { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.chat-message { display: flex; gap: 8px; }
.chat-message-avatar { font-size: 1.2rem; flex: none; line-height: 1.4; }
.chat-message-body { min-width: 0; flex: 1; }
.chat-message-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chat-message-name { font-weight: 700; font-size: .78rem; color: var(--text); }
.chat-message-time { font-family: var(--font-mono); font-size: .64rem; color: var(--text-soft); }
.chat-message-text { font-size: .85rem; color: var(--text-soft); word-break: break-word; white-space: pre-wrap; }
.chat-message-bot .chat-message-name { color: var(--amber); }
.chat-message-bot .chat-message-text { color: var(--text); }
.chat-admin-controls { display: flex; gap: 4px; margin-left: auto; }
.chat-admin-btn { background: none; border: none; cursor: pointer; font-size: .78rem; padding: 0 2px; opacity: .6; }
.chat-admin-btn:hover { opacity: 1; }
.chat-status { padding: 6px 12px; font-size: .74rem; color: var(--amber); text-align: center; }
.chat-input-row { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); background: var(--ink-soft); }
.chat-input-row input {
  flex: 1; padding: 9px 12px; border-radius: 7px; border: 1px solid var(--border-strong);
  background: var(--panel); color: var(--text); font-size: .85rem; font-family: var(--font-body);
}
.chat-input-row input:disabled { opacity: .5; }
@media (max-width: 480px) {
  .chat-panel { left: 8px; right: 8px; width: auto; bottom: calc(96px + env(safe-area-inset-bottom)); }
}
/* Jamais par-dessus une question active, même raison que la bulle d'install. */
body:has(#quiz-screen:not(.hidden)) .chat-widget,
body:has(#question-screen:not(.hidden)) .chat-widget,
body:has(#buzzer-screen:not(.hidden)) .chat-widget { display: none; }

/* ==========================================================================
   Espace admin
   ========================================================================== */
.admin-stat-card { padding: 16px 18px; gap: 4px; }
.admin-stat-value { font-family: var(--font-head); font-size: 1.7rem; font-weight: 700; color: var(--amber); }
.admin-stat-label { font-size: .76rem; color: var(--text-soft); text-transform: uppercase; letter-spacing: .4px; }
.admin-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.admin-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.admin-table th, .admin-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.admin-table th { font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .5px; color: var(--text-soft); background: var(--ink-soft); }
.admin-table tr:last-child td { border-bottom: none; }
.admin-row-actions { display: flex; gap: 6px; }

/* ==========================================================================
   Bulle d'installation (PWA)
   ========================================================================== */
.install-bubble {
  position: fixed;
  z-index: 150;
  right: 16px;
  bottom: 16px;
  max-width: 320px;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
  padding: 14px 30px 14px 14px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  animation: install-bubble-in .3s ease;
}
@keyframes install-bubble-in { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.install-bubble img { width: 40px; height: 40px; border-radius: 9px; flex: none; }
.install-bubble-body { flex: 1; min-width: 0; }
.install-bubble-title { font-weight: 700; font-size: .92rem; color: var(--text); margin-bottom: 2px; }
.install-bubble-text { font-size: .8rem; color: var(--text-soft); line-height: 1.4; }
.install-bubble-actions { display: flex; gap: 8px; margin-top: 10px; }
.install-bubble-close {
  position: absolute; top: 8px; right: 8px;
  background: none; border: none; color: var(--text-soft);
  font-size: 1rem; line-height: 1; padding: 4px; cursor: pointer;
}
.install-bubble-close:hover { color: var(--text); }
@media (max-width: 480px) {
  .install-bubble { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}
/* Jamais par-dessus une question active (quiz solo, QuizBox animateur ou
   joueur) : ça chevaucherait la barre "Valider" ou le buzzer. */
body:has(#quiz-screen:not(.hidden)) .install-bubble,
body:has(#question-screen:not(.hidden)) .install-bubble,
body:has(#buzzer-screen:not(.hidden)) .install-bubble { display: none; }

/* ---- Graphique radar (bilan par thème) ---- */
.radar-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.radar-svg { width: 100%; max-width: 300px; height: auto; }
.radar-ring { fill: none; stroke: var(--border-strong); stroke-width: 1; }
.radar-axis { stroke: var(--border-strong); stroke-width: 1; }
.radar-data { fill: rgba(245,165,36,.22); stroke: var(--amber); stroke-width: 2; }
.radar-label { font-size: 10px; font-weight: 600; fill: var(--text-soft); font-family: var(--font-body); }
.radar-legend { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 6px; }
.radar-legend-row {
  display: flex; align-items: center; gap: 10px;
  font-size: .82rem; padding: 6px 4px; border-bottom: 1px solid var(--border);
}
.radar-legend-name { flex: 1; color: var(--text); text-align: left; }
.radar-legend-pct { font-family: var(--font-mono); font-weight: 600; color: var(--amber); }