/* ── style.css — refondu sur tokens.css ───────────────────────────────────── */
@import url('tokens.css');

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

html, body {
  height: 100%;
  overflow: hidden;
  max-width: 100%;
  /* Empêche tout débord horizontal sur iOS Safari (Safari respecte parfois
     mal max-width: 100% si un enfant a un width: 100vw ou un padding mal géré) */
  width: 100%;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(10,10,10,0.06) 1px, transparent 1px);
  background-size: 22px 22px;
  z-index: 0;
}

.app {
  position: relative; z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 28px 16px;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: var(--space-3);
}

.header-actions { display: flex; gap: var(--space-2); align-items: center; }

.btn-collection, .btn-nav {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper);
  border: var(--border-thick);
  box-shadow: var(--sh-sm);
  padding: 9px 16px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
  flex-shrink: 0;
  white-space: nowrap;
  cursor: pointer;
}
.btn-collection:hover, .btn-collection:focus-visible,
.btn-nav:hover, .btn-nav:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 0 var(--ink);
}
.btn-nav .ico { display: inline-flex; }
/* Bouton icône seule (ex : paramètres rouage) : carré, sans texte */
.btn-nav.btn-icon-only {
  padding: 9px 11px;
  font-family: inherit;
}

.site-title {
  font-family: var(--font-display);
  font-size: clamp(18px, 3.8vw, 44px);
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  flex: 1 1 0;
  /* min-width: 0 indispensable sinon flex items refusent de shrink en dessous
     de leur largeur de contenu (par défaut min-width: auto). Pas d'overflow
     hidden (tronquait l'emoji avec son drop-shadow vertical). */
  min-width: 0;
  display: flex;
  align-items: center;
}
/* ── Réduire les animations (accessibilité, opt-in via paramètres) ────── */
html.reduce-motion *,
html.reduce-motion *::before,
html.reduce-motion *::after {
  animation-duration: 0.001s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001s !important;
}

/* ── Menu Paramètres ───────────────────────────────────────────────────── */
.settings-backdrop {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(10,10,10,0.7);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
}
.settings-backdrop.show { display: flex; }
.settings-modal {
  background: var(--paper);
  border: var(--border-thick);
  box-shadow: var(--sh-lg);
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-thick);
  background: var(--yellow);
  position: sticky;
  top: 0;
  z-index: 1;
}
.settings-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 3vw, 28px);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 0;
}
.settings-close {
  width: 32px;
  height: 32px;
  background: var(--paper);
  border: var(--border-thick);
  box-shadow: var(--sh-sm);
  font-family: var(--font-display);
  font-size: 16px;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.settings-close:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 0 var(--ink); }
.settings-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.settings-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.settings-sub {
  font-family: var(--font-display);
  font-size: clamp(13px, 1.4vw, 17px);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 0 0 4px 0;
  border-bottom: 3px solid var(--ink);
  padding-bottom: 6px;
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.settings-row > span {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
}
.settings-row-input input[type="text"] {
  flex: 1;
  min-width: 0;
  max-width: 60%;
  font-family: var(--font-body);
  font-size: 14px;
  padding: 6px 10px;
  border: var(--border-thick);
  background: var(--paper-2);
  outline: none;
}
.settings-row-input input[type="text"]:focus {
  background: var(--paper);
  box-shadow: 3px 3px 0 0 var(--ink);
}
/* Toggle minimaliste néobrut sur les checkboxes */
.settings-row-toggle input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  width: 52px;
  height: 28px;
  background: var(--paper-2);
  border: var(--border-thick);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--dur-fast);
  margin: 0;
}
.settings-row-toggle input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 4px;
  width: 14px;
  height: 14px;
  background: var(--ink);
  transform: translateY(-50%);
  transition: left var(--dur-fast);
}
.settings-row-toggle input[type="checkbox"]:checked {
  background: var(--green);
}
.settings-row-toggle input[type="checkbox"]:checked::after {
  left: calc(100% - 18px);  /* 14 (thumb) + 4 (right padding) = 18 */
}
.settings-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  opacity: 0.7;
  line-height: 1.4;
  margin: 0;
}
.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.settings-btn {
  font-family: var(--font-display);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 8px 14px;
  background: var(--paper);
  border: var(--border-thick);
  box-shadow: var(--sh-sm);
  cursor: pointer;
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}
.settings-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 0 var(--ink);
}
.settings-btn-danger {
  background: var(--red);
  color: var(--paper);
}
.settings-about {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}
.settings-about a { color: var(--ink); text-decoration: underline; }

/* Emoji "Classical Building" 🏛️ utilisé avant les titres de page —
   stroke fin pour détacher du fond + grosse ombre portée en bas-droite
   (façon tampon néobrut). Légèrement superposé au début du titre. */
.site-emoji {
  display: inline-block;
  position: relative;
  z-index: 2;               /* passe au-dessus du fond coloré du .accent */
  font-size: 1.15em;
  line-height: 1;
  vertical-align: middle;
  margin-right: -0.3em;     /* mord franchement le titre qui suit */
  transform: rotate(-6deg) translateY(-0.05em);
  filter:
    /* Stroke ~2 px (cardinales + diagonales pour combler) */
    drop-shadow( 2px  0   0 var(--ink))
    drop-shadow(-2px  0   0 var(--ink))
    drop-shadow( 0    2px 0 var(--ink))
    drop-shadow( 0   -2px 0 var(--ink))
    drop-shadow( 1.5px  1.5px 0 var(--ink))
    drop-shadow(-1.5px  1.5px 0 var(--ink))
    drop-shadow( 1.5px -1.5px 0 var(--ink))
    drop-shadow(-1.5px -1.5px 0 var(--ink))
    /* Grosse ombre portée d'un côté (en bas-droite) — effet néobrut */
    drop-shadow(5px 5px 0 var(--ink));
  flex-shrink: 0;
}

.site-title .accent {
  /* fond + texte définis dynamiquement par applyRandomTitleColor() ;
     var(--blue) en fallback avant que le JS s'exécute */
  background: var(--blue);
  color: var(--paper);
  padding: 1px 8px;
  border: var(--border-thick);
  box-shadow: var(--sh-sm);
  display: inline-block;
  transform: rotate(-1deg);
  margin-left: 6px;
  text-transform: uppercase;
  transition: background-color var(--dur-base), color var(--dur-base);
  user-select: none;
}
.site-title .accent:hover {
  transform: rotate(-1deg) translate(-1px, -1px);
  box-shadow: 5px 5px 0 0 var(--ink);
}

/* ── Icon utility ────────────────────────────────────────────────────────── */
.ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ico-svg { display: block; }

/* ── Main grid ───────────────────────────────────────────────────────────── */
.main {
  display: grid;
  grid-template-columns: clamp(200px, calc((100dvh - 142px) * 0.75 + 42px), 48%) 1fr;
  grid-template-rows: 1fr;
  gap: var(--space-4);
  flex: 1;
  min-height: 0;
  overflow: visible;
}

/* ── Card stack ──────────────────────────────────────────────────────────── */
.card-stack {
  position: relative;
  height: 100%;
  min-height: 0;
}

.deputy-card-shadow {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--white);
  border: var(--border-thick);
  box-shadow: var(--sh-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
}
.shadow-photo-wrap {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow: visible;
  border: var(--border-thick);
  background: var(--paper-2);
}
.shadow-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
}

.deputy-card {
  background: var(--white);
  border: var(--border-thick);
  box-shadow: var(--sh-lg);
  padding: var(--space-4);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
  overflow: hidden;
  transition: transform 0.55s cubic-bezier(0.45, 0.05, 0.55, 0.95);
  will-change: transform;
}
.deputy-card.swiping-out {
  /* Trajectoire de chute : X linéaire dans le temps, Y quadratique (gravité).
     Linear timing — la courbe vient des positions des keyframes elles-mêmes. */
  animation: swipeOutCurve 0.55s linear forwards;
}
@keyframes swipeOutCurve {
  /* X(p) = p × X_final  (linéaire — vitesse horizontale constante)
     Y(p) = p² × Y_final (quadratique — accélération vers le bas)
     rot(p) = p × rot_final  ·  scale(p) = 1 + p × (scale_final − 1) */
  0% {
    transform: translate(0, 0) rotate(0) scale(1);
  }
  25% {
    transform:
      translate(calc(var(--swipe-x, -120vw) * 0.25), calc(var(--swipe-y, 80vh) * 0.0625))
      rotate(calc(var(--swipe-rot, -25deg) * 0.25))
      scale(calc(1 + (var(--swipe-scale, 0.75) - 1) * 0.25));
  }
  50% {
    transform:
      translate(calc(var(--swipe-x, -120vw) * 0.50), calc(var(--swipe-y, 80vh) * 0.25))
      rotate(calc(var(--swipe-rot, -25deg) * 0.50))
      scale(calc(1 + (var(--swipe-scale, 0.75) - 1) * 0.50));
  }
  75% {
    transform:
      translate(calc(var(--swipe-x, -120vw) * 0.75), calc(var(--swipe-y, 80vh) * 0.5625))
      rotate(calc(var(--swipe-rot, -25deg) * 0.75))
      scale(calc(1 + (var(--swipe-scale, 0.75) - 1) * 0.75));
  }
  100% {
    transform:
      translate(var(--swipe-x, -120vw), var(--swipe-y, 80vh))
      rotate(var(--swipe-rot, -25deg))
      scale(var(--swipe-scale, 0.75));
  }
}

/* ── Shiny card — apparaît ~1/15 fois, double les points ──────────────── */
/* Glow doré pulsant autour de la carte (box-shadow, ne couvre aucun bouton) */
.deputy-card.shiny {
  animation: shinyGlow 1.8s ease-in-out infinite;
}
/* Quand une carte shiny part en swipe-out, on combine les deux animations
   (sinon shiny gagne par cascade et le swipe-out n'a pas lieu). */
.deputy-card.shiny.swiping-out {
  animation:
    shinyGlow 1.8s ease-in-out infinite,
    swipeOutCurve 0.55s linear forwards;
}
@keyframes shinyGlow {
  0%, 100% { box-shadow: var(--sh-lg), 0 0 0 rgba(245, 197, 24, 0); }
  50%      { box-shadow: var(--sh-lg), 0 0 28px rgba(245, 197, 24, 0.75); }
}

/* Couche dédiée aux effets shiny — clip ses propres pseudos sans toucher le post-it */
.shiny-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
  display: none;
}
.deputy-card.shiny .shiny-fx {
  display: block;
}
/* Bordure dorée pulsante */
.deputy-card.shiny .shiny-fx::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 4px solid #f5c518;
  pointer-events: none;
  animation: shinyBorderPulse 1.8s ease-in-out infinite;
}
@keyframes shinyBorderPulse {
  0%, 100% { box-shadow: inset 0 0 8px rgba(255, 215, 0, 0.4); }
  50%      { box-shadow: inset 0 0 22px rgba(255, 230, 102, 0.8); }
}
/* Shimmer diagonal — 2× la largeur, translaté en transform3d (GPU) */
.deputy-card.shiny .shiny-fx::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background: linear-gradient(115deg,
    transparent 42%,
    rgba(255, 232, 120, 0.5) 50%,
    transparent 58%);
  transform: translate3d(-50%, 0, 0);
  animation: shinyShimmer 2.8s linear infinite;
  will-change: transform;
}
@keyframes shinyShimmer {
  0%   { transform: translate3d(-50%, 0, 0); }
  100% { transform: translate3d(50%, 0, 0); }
}

/* Étoile shiny sur la carte Collection (SVG net, contour propre) */
.dcard .shiny-star {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 4;
  width: 22px;
  height: 22px;
  display: inline-block;
  line-height: 0;
  pointer-events: none;
  filter: drop-shadow(0 1px 0 var(--ink)) drop-shadow(1px 0 0 var(--ink));
}
.dcard .shiny-star svg { display: block; }

/* Variante "shiny" du bumper qui s'envole vers le bouton Collection */
.collection-fly.shiny {
  background: #f5c518;
  color: var(--ink);
  border-color: var(--ink);
}
.collection-fly.shiny .shiny-mark {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin-right: 4px;
}

.photo-wrap {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow: visible;
  border: var(--border-thick);
  background: var(--paper-2);
  container-type: inline-size;
}
.deputy-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  user-select: none;
}
.scan-lines {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(10,10,10,0) 0 4px, rgba(10,10,10,0.04) 4px 5px);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.corner {
  position: absolute;
  width: 16px; height: 16px;
  border: 3px solid var(--ink);
  pointer-events: none;
}
.corner.tl { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }

/* Stamp ✓/✗ on card — neo-brutalist block */
.stamp {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-8deg) scale(0.3);
  width: clamp(140px, 28vw, 240px);
  height: clamp(140px, 28vw, 240px);
  padding: 22px;
  border: 6px solid var(--ink);
  border-radius: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  box-shadow: 10px 10px 0 0 var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.stamp svg { width: 100%; height: 100%; display: block; }
.stamp[data-tone="correct"] { background: var(--green); color: var(--ink); }
.stamp[data-tone="wrong"]   { background: var(--m-gauche); color: var(--ink); }
.stamp.show {
  animation: stampSlam 360ms cubic-bezier(.18,.89,.32,1.28) forwards;
}
@keyframes stampSlam {
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(2.2); }
  55%  { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(0.94); }
  78%  { transform: translate(-50%, -50%) rotate(-8deg) scale(1.04); }
  100% { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(1); }
}
.corner.tr { top: 8px; right: 8px; border-left: 0; border-bottom: 0; }
.corner.bl { bottom: 8px; left: 8px; border-right: 0; border-top: 0; }
.corner.br { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }

/* ── Post-it Indice ──────────────────────────────────────────────────────── */
.hint-postit {
  position: absolute;
  top: -10px;
  right: 14px;
  z-index: 25;
  background: var(--yellow);
  border: var(--border-thick);
  box-shadow: var(--sh-sm);
  padding: 6px 12px 8px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transform: rotate(4deg);
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hint-postit:hover, .hint-postit:focus-visible {
  transform: rotate(2deg) translate(-2px, -2px);
  box-shadow: 5px 5px 0 0 var(--ink);
}
.hint-postit.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.hint-postit .cost {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  background: var(--ink);
  color: var(--yellow);
  padding: 1px 5px;
  margin-left: 4px;
  letter-spacing: 0;
}

/* (Le menu déroulant des 3 indices a été remplacé par un clic unique
   sur le post-it qui élimine un macro/groupe faux dans l'hémicycle.
   Les anciennes règles .hint-menu et .hint-option ont été supprimées.) */

/* ── Right col / Panel ───────────────────────────────────────────────────── */
.right-col { display: flex; flex-direction: column; gap: var(--space-4); height: 100%; min-height: 0; }

.game-panel {
  background: var(--paper);
  border: var(--border-thick);
  box-shadow: var(--sh-md);
  padding: var(--space-4);
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: relative;
}
.panel-title {
  font-family: var(--font-display);
  font-size: clamp(13px, 1.4vw, 18px); text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
}
.num-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--ink-2); color: var(--paper);
  padding: 2px 8px;
  flex-shrink: 0;
}

/* ── Hémicycle ───────────────────────────────────────────────────────────── */
.hemicycle-wrap {
  flex: none;
  aspect-ratio: 2 / 1;
  position: relative;
  overflow: visible;
}
.hemicycle-wrap svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  transition: opacity var(--dur-base);
}
.pop-sector {
  transition: transform var(--dur-fast) var(--ease-out);
  transform-box: view-box;
  transform-origin: 50% 90%;
  will-change: transform;
}
/* Hover : seulement sur périphériques avec un vrai hover (souris/trackpad).
   Sur tactile (iOS, Android), :hover reste collé après le tap → quand un
   sub-group apparaît sous le doigt à l'expansion d'un macro, il prend
   tout de suite l'état hover et se présente comme pré-sélectionné. */
@media (hover: hover) {
  .pop-sector:hover  { transform: scale(1.08); }
  .hemicycle-wrap svg.easy .macro:hover { transform: scale(1.08); }
  .hemicycle-wrap svg.animating .pop-sector:hover { transform: none; }
}
.hemicycle-wrap svg.easy .macro {
  transition: transform var(--dur-fast) var(--ease-out);
  transform-box: view-box;
  transform-origin: 50% 90%;
  cursor: pointer;
  will-change: transform;
}
.hemicycle-wrap svg.easy .macro:active { transform: scale(0.94); transition-duration: 70ms; }
.hemicycle-wrap svg.animating .pop-sector { transition: none; }
.pop-sector.armed  { transform: scale(1.12); }
.pop-sector:active { transform: scale(0.94); transition-duration: 70ms; }
.pop-sector.armed-pulse { animation: armedPulse 700ms infinite alternate; }
@keyframes armedPulse {
  from { transform: scale(1.08); }
  to   { transform: scale(1.18); }
}

.sector-reveal-correct,
.sector-reveal-wrong {
  transform-box: view-box;
  transform-origin: 50% 90%;
}
.sector-reveal-correct { animation: sectorCorrect 0.45s var(--ease-pop) forwards; }
.sector-reveal-wrong   { animation: sectorWrong 0.38s ease-out forwards; }
@keyframes sectorCorrect {
  0% { transform: scale(1); }
  50% { transform: scale(1.13); }
  100% { transform: scale(1.04); }
}
@keyframes sectorWrong {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(0.95) rotate(-2deg); }
  60% { transform: scale(0.98) rotate(1deg); }
}

/* ── Élimination (indices) — flash puis grisage ─────────────────── */
.elim-flash {
  transform-box: view-box;
  transform-origin: 50% 90%;
  animation: elimFlash 700ms ease-out forwards;
}
@keyframes elimFlash {
  0%   { filter: brightness(1)   drop-shadow(0 0 0 transparent); transform: scale(1); }
  20%  { filter: brightness(2.2) drop-shadow(0 0 14px var(--red)); transform: scale(1.12); }
  40%  { filter: brightness(0.6); transform: scale(0.95); }
  60%  { filter: brightness(2.2) drop-shadow(0 0 14px var(--red)); transform: scale(1.08); }
  80%  { filter: brightness(0.6); transform: scale(0.96); }
  100% { filter: brightness(1); transform: scale(1); }
}
.eliminated {
  pointer-events: none;
}
.eliminated path {
  filter: grayscale(1);
  transition: opacity 200ms ease-out, fill 200ms ease-out;
}

/* Indication "Touche une famille…" : retirée pour libérer la place sous
   l'hémicycle. L'élément reste dans le DOM (accédé par app.js) mais caché. */
.hover-hint { display: none !important; }

/* ── Reveal screen plein cadre (remplace hémicycle pendant la révélation) ── */
.reveal-screen {
  position: relative;
  width: 100%;
  background: var(--paper);
  border: var(--border-thick);
  box-shadow: var(--sh-md);
  padding: var(--space-4);
  padding-bottom: 28px;
  gap: var(--space-3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms var(--ease-out);
  display: none;
}
/* Desktop : wrappers transparents, items positionnés par grid-area pour
   préserver l'ordre vertical original (verdict, name, party, sub). */
.reveal-col-left,
.reveal-col-right { display: contents; }
.reveal-screen.visible .reveal-verdict   { grid-area: verdict; }
.reveal-screen.visible .reveal-name      { grid-area: name; }
.reveal-screen.visible .reveal-party     { grid-area: party; }
.reveal-screen.visible .reveal-party-sub { grid-area: sub; }
.reveal-screen.visible {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "verdict"
    "name"
    "party"
    "sub";
  opacity: 1;
  pointer-events: auto;
}
.game-panel:has(.reveal-screen.visible) .hemicycle-wrap,
.game-panel:has(.reveal-screen.visible) .hover-hint {
  display: none;
}
.reveal-screen.visible {
  opacity: 1;
  pointer-events: auto;
}
.reveal-verdict {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1;
  text-transform: uppercase;
  padding: 6px 16px;
  border: var(--border-thick);
  box-shadow: var(--sh-sm);
  align-self: flex-start;
  transform: rotate(-2deg);
  animation: revealPop 360ms var(--ease-pop) both;
}
.reveal-verdict[data-tone="correct"] { background: var(--green);  color: var(--ink); }
.reveal-verdict[data-tone="wrong"]   { background: var(--red);    color: var(--paper); }
.reveal-verdict[data-tone="almost"]  { background: var(--orange); color: var(--ink); }
@keyframes revealPop {
  0% { opacity: 0; transform: rotate(-2deg) scale(0.4); }
  60% { opacity: 1; transform: rotate(-2deg) scale(1.15); }
  100% { transform: rotate(-2deg) scale(1); }
}
.reveal-name {
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 44px);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  animation: revealSlide 400ms var(--ease-out) both 100ms;
  word-break: break-word;
}
/* .reveal-party-wrap a été retiré du HTML — animation déplacée sur les items */
.reveal-party,
.reveal-party-sub { animation: revealSlide 400ms var(--ease-out) both 200ms; }
.reveal-party {
  align-self: flex-start;
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(16px, 2.4vw, 26px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  padding: 8px 14px 10px;
  border: var(--border-thick);
  box-shadow: var(--sh-md);
  transform: rotate(-1deg);
}
.reveal-party-sub {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 18px;
  opacity: 0.95;
  color: var(--ink);
}
.reveal-party-sub::before {
  content: "Groupe ";
  opacity: 0.5;
  margin-right: 4px;
}
@keyframes revealSlide {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

.reveal-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: 4px;
  animation: revealSlide 400ms var(--ease-out) both 350ms;
}
.reveal-meta-chip {
  background: var(--paper-2);
  border: var(--border-thin);
  padding: 8px 10px;
  min-width: 0;
}
.reveal-meta-chip .label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.6;
}
.reveal-meta-chip .value {
  font-family: var(--font-display);
  font-size: 14px;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.1;
  word-break: break-word;
}

/* Auto-advance progress bar */
.reveal-progress {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 6px;
  background: var(--ink);
  overflow: hidden;
}
.reveal-progress-fill {
  height: 100%;
  background: var(--green);
  width: 100%;
  transform-origin: left;
  animation: progress var(--auto-dur, 3200ms) linear forwards;
}
/* Couleur de la barre de progression assortie au verdict.
   `data-verdict` est posé sur .reveal-screen lui-même → toujours résolvable
   peu importe la structure interne (col-wrappers en display:contents/flex). */
.reveal-screen[data-verdict="correct"] .reveal-progress-fill { background: var(--green); }
.reveal-screen[data-verdict="almost"]  .reveal-progress-fill { background: var(--orange); }
.reveal-screen[data-verdict="wrong"]   .reveal-progress-fill { background: var(--red); }
@keyframes progress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

.reveal-next { display: none !important; }
  z-index: 2;
  font-family: var(--font-display);
  background: var(--ink);
  color: var(--paper);
  border: var(--border-thick);
  box-shadow: var(--sh-sm);
  padding: 6px 12px;
  cursor: pointer;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.reveal-next:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 0 var(--ink); }

/* ── Controls panel (stats compact 3 cards + modes) ───────────────────────── */
.controls-panel {
  background: var(--paper);
  border: var(--border-thick);
  box-shadow: var(--sh-md);
  padding: var(--space-4);
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  justify-content: center;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(13px, 1.4vw, 18px);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.section-title.section-mode { margin-top: var(--space-3); }
.section-tag {
  background: var(--ink-2);
  color: var(--paper);
  padding: 4px 6px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.section-tag .ico { width: 16px; height: 16px; }

.stats-compact { display: flex; gap: var(--space-3); }
.stat-card {
  background: var(--paper-2);
  border: var(--border-thick);
  box-shadow: var(--sh-md);
  padding: 10px 12px;
  flex: 1;
  min-width: 0;
  position: relative;
  overflow: visible;
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat-card[data-tone="points"]   { background: #4b3cd1; color: var(--paper); }
.stat-card[data-tone="streak"]   { background: var(--orange); }
.stat-card[data-tone="acc"]      { background: var(--green); }
.stat-card[data-tone="lives"]    { background: var(--red); color: var(--paper); }

.stat-head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 700;
  opacity: 0.85;
}
.stat-head .ico {
  width: 22px; height: 22px;
  background: var(--ink-2); color: var(--paper);
  border-radius: 50%;
}
.stat-card[data-tone="points"] .stat-head .ico { background: var(--paper); color: #4b3cd1; }
.stat-card[data-tone="lives"]  .stat-head .ico { background: var(--paper); color: var(--red); }
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 36px); line-height: 1;
  letter-spacing: -0.02em;
}
.stat-sub {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.95;
}
.stat-sub-acc {
  display: flex;
  align-items: center;
  gap: 10px;
}
.stat-sub-acc .acc-good,
.stat-sub-acc .acc-bad {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 900;
}
.stat-sub-acc .acc-sep {
  opacity: 0.5;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 900;
}
.stat-sub-acc .ico {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
}
.stat-sub-acc .ico svg {
  width: 16px;
  height: 16px;
}
.stat-sub:not(.stat-sub-acc) span {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: -0.01em;
  font-weight: 900;
  text-transform: none;
  vertical-align: -1px;
}

.modes {
  display: flex; gap: var(--space-2);
  align-items: center; flex-wrap: wrap;
  flex-shrink: 0;
}
.mode-btn {
  font-family: var(--font-display);
  font-size: clamp(10px, 1.1vw, 13px); letter-spacing: 0.02em; text-transform: uppercase;
  background: var(--paper);
  border: var(--border-thick);
  box-shadow: var(--sh-sm);
  padding: 8px 14px;
  cursor: pointer; color: var(--ink);
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap;
  flex: 1;
  justify-content: center;
  min-width: 80px;
}
.mode-btn:hover, .mode-btn:focus-visible { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 0 var(--ink); }
.mode-btn.active {
  box-shadow: var(--sh-md); transform: translate(-2px,-2px);
}
.mode-btn.active[data-mode="normal"] { background: var(--blue);     color: var(--paper); }
.mode-btn.active[data-mode="easy"]   { background: var(--green);    color: var(--ink); }
.mode-btn.active[data-mode="speed"]  { background: var(--yellow);   color: var(--ink); }
.mode-btn.active[data-mode="survie"] { background: var(--m-gauche); color: var(--paper); }
.mode-btn.active[data-mode="daily"]  { background: var(--violet);   color: var(--paper); }
.mode-btn .ico { width: 16px; height: 16px; }

.mode-desc {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.75;
  margin: 10px 2px 0;
  line-height: 1.4;
}

/* ── Mobile-only ─────────────────────────────────────────────────────────── */
.stats-trigger            { display: none; }
.mobile-footer-nav        { display: none; }
.stats-backdrop           { display: none; }
.stats-close-btn          { display: none; }
.btn-collection-mobile-only { display: none; }

/* ── Combo bumper (bandeau qui traverse) ─────────────────────────────────── */
.combo-banner {
  position: fixed;
  top: 38%;
  left: -100%;
  z-index: 500;
  font-family: var(--font-display);
  font-size: clamp(28px, 6vw, 60px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 14px 40px 18px;
  border: var(--border-thick);
  box-shadow: var(--sh-lg);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  white-space: nowrap;
  pointer-events: none;
  transform: rotate(-3deg);
}
.combo-banner.show {
  animation: comboSwoop 1500ms cubic-bezier(.2,.7,.3,1) forwards;
}
.combo-banner[data-tier="1.5"] { background: var(--yellow); color: var(--ink); }
.combo-banner[data-tier="2"]   { background: var(--orange); color: var(--ink); }
.combo-banner[data-tier="3"]   { background: var(--red); color: var(--paper); }
.combo-banner[data-tier="5"]   { background: var(--ink); color: var(--yellow); }
.combo-mult {
  font-size: 1.4em;
  -webkit-text-stroke: 2px var(--ink);
}
.combo-banner[data-tier="5"] .combo-mult { -webkit-text-stroke: 2px var(--yellow); }
@keyframes comboSwoop {
  0% { left: -100%; opacity: 0; }
  20% { left: 50%; transform: translateX(-50%) rotate(-3deg); opacity: 1; }
  80% { left: 50%; transform: translateX(-50%) rotate(-3deg); opacity: 1; }
  100% { left: 110%; opacity: 0; }
}

/* Flash écran pour combo ×3 et ×5 */
.combo-flash {
  position: fixed; inset: 0;
  z-index: 499;
  pointer-events: none;
  background: var(--yellow);
  opacity: 0;
}
.combo-flash.flash { animation: comboFlash 280ms ease-out; }
@keyframes comboFlash {
  0% { opacity: 0; }
  20% { opacity: 0.6; }
  100% { opacity: 0; }
}

/* ── Achievement toast ───────────────────────────────────────────────────── */
.ach-toast-zone {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 600;
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-2);
  pointer-events: none;
}
/* Le reveal a priorité : on cache les toasts pendant qu'il est visible
   (sinon, en cas de cascade de succès, ils chevauchent le reveal).
   En complément, le déclenchement des toasts est différé jusqu'au début de
   la nouvelle question (cf. app.js — pendingAchievementToasts). */
body:has(.reveal-screen.visible) .ach-toast-zone {
  visibility: hidden;
}
/* Sur mobile, les toasts apparaissent en HAUT (sous le titre), pas en bas
   où ils gênaient la lecture du panel et du footer. */
@media (max-width: 860px) {
  .ach-toast-zone {
    top: 80px;
    bottom: auto;
    right: 12px;
    left: 12px;
    align-items: stretch;
    flex-direction: column;
  }
  .ach-toast {
    min-width: 0;
    max-width: 100%;
  }
}
.ach-toast {
  background: var(--paper);
  border: var(--border-thick);
  box-shadow: var(--sh-md);
  padding: var(--space-3);
  display: flex;
  gap: var(--space-3);
  align-items: center;
  min-width: 280px;
  max-width: 360px;
  animation: toastIn 400ms var(--ease-pop), toastOut 400ms ease 4.6s forwards;
}
.ach-toast .ico-big {
  width: 44px; height: 44px;
  background: var(--ink); color: var(--paper);
  display: grid; place-items: center;
  flex-shrink: 0;
  border: var(--border-thick);
}
.ach-toast[data-tier="silver"] .ico-big   { background: #c0c0c0; color: var(--ink); }
.ach-toast[data-tier="gold"] .ico-big     { background: var(--yellow); color: var(--ink); }
.ach-toast[data-tier="platinum"] .ico-big { background: #e5e4e2; color: var(--ink); }
.ach-toast .ach-label {
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  opacity: 0.6;
}
.ach-toast .ach-name {
  font-family: var(--font-display);
  font-size: 15px; text-transform: uppercase;
}
.ach-toast .ach-desc {
  font-family: var(--font-body);
  font-size: 12px;
  margin-top: 2px;
}
@keyframes toastIn {
  from { transform: translateY(80px) rotate(2deg); opacity: 0; }
  to   { transform: translateY(0)    rotate(0);    opacity: 1; }
}
@keyframes toastOut {
  to { transform: translateX(380px) rotate(3deg); opacity: 0; }
}

/* ── Score bump ──────────────────────────────────────────────────────────── */
.score-bump {
  position: absolute;
  top: -10px;
  left: 50%;
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1;
  padding: 2px 11px 6px;
  background: var(--paper);
  border: var(--border-thick);
  box-shadow: var(--sh-sm);
  pointer-events: none;
  z-index: 50;
  white-space: nowrap;
  animation: scoreBump 1.15s ease-out both;
  will-change: transform, opacity;
}
@keyframes scoreBump {
  0%   { transform: translateX(-50%) translateY(0)     rotate(var(--bump-rot, -6deg)) scale(0);    opacity: 0; }
  20%  { transform: translateX(-50%) translateY(0)     rotate(var(--bump-rot, -6deg)) scale(1.2);  opacity: 1; }
  40%  { transform: translateX(-50%) translateY(0)     rotate(var(--bump-rot, -6deg)) scale(1);    opacity: 1; }
  70%  { transform: translateX(-50%) translateY(-20px) rotate(var(--bump-rot, -6deg)) scale(1);    opacity: 1; }
  100% { transform: translateX(-50%) translateY(-58px) rotate(var(--bump-rot, -6deg)) scale(0.8);  opacity: 0; }
}

/* ── Speed timer (post-it jaune, sablier, millisecondes) ──────────────── */
/* Positionné dans .hemicycle-wrap, donc ne chevauche jamais le titre du panneau */
/* Bloc et contenu tournent ensemble : l'icône et les chiffres suivent
   l'inclinaison du post-it jaune, conservant un alignement cohérent. */
.speed-timer {
  position: absolute;
  top: 4px;
  right: 4px;
  padding: 7px 12px;
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  z-index: 30;
  white-space: nowrap;
  transform: rotate(-4deg);
  transform-origin: center;
}
.speed-timer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--yellow);
  border: var(--border-thick);
  box-shadow: var(--sh-md);
  z-index: -1;
  transition: background-color 200ms;
}
.speed-timer .ico,
.speed-timer .speed-num,
.speed-timer .speed-unit {
  position: relative; /* au-dessus du ::before */
}
.speed-timer .ico {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.speed-timer .ico > svg {
  width: 20px !important;
  height: 20px !important;
  display: block;
}
.speed-timer .speed-num {
  font-variant-numeric: tabular-nums;
  min-width: 58px;
  text-align: right;
  flex: 0 0 auto;
}
.speed-timer .speed-unit {
  font-size: 0.55em;
  opacity: 0.6;
  margin-left: -2px;
  flex: 0 0 auto;
}
.speed-timer.warning { color: var(--paper); }
.speed-timer.warning::before {
  background: var(--red);
  animation: timerPulse 380ms infinite alternate;
}
@keyframes timerPulse {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

/* ── Confirm modal (changement de mode) ────────────────────────────── */
.confirm-backdrop {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10,10,10,0.6);
  z-index: 250;
  padding: 20px;
}
.confirm-backdrop.show { display: flex; }
.confirm-card {
  background: var(--paper);
  border: var(--border-thick);
  box-shadow: var(--sh-lg);
  padding: var(--space-5) var(--space-5) var(--space-4);
  max-width: 440px;
  width: 100%;
  text-align: center;
  animation: confirmIn 0.32s var(--ease-pop) both;
}
@keyframes confirmIn {
  from { transform: scale(0.7) rotate(-2deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}
.confirm-card h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 32px);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
}
.confirm-card p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.45;
  margin-bottom: var(--space-4);
  opacity: 0.85;
}
.confirm-buttons {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
}
.confirm-buttons button {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 12px 22px;
  border: var(--border-thick);
  cursor: pointer;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--sh-sm);
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}
.confirm-buttons button:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--sh-md);
}
.confirm-buttons .btn-primary {
  background: var(--ink);
  color: var(--paper);
}

/* ── Score bump anchors sur Série et Précision ──────────────────────── */
.stat-card { position: relative; }

/* ── Daily post-it (compteur de députés restants) ──────────────────── */
.daily-postit {
  position: absolute;
  top: 28px;
  left: -24px;
  transform: rotate(-7deg);
  background: var(--yellow);
  color: var(--ink);
  border: var(--border-thick);
  box-shadow: var(--sh-md);
  padding: 9px 13px 10px;
  z-index: 5;
  font-family: var(--font-display);
  text-align: center;
  min-width: 86px;
  pointer-events: none;
  transition: transform 280ms var(--ease-pop);
}
.daily-postit.bump { transform: rotate(-7deg) scale(1.18); }
.daily-postit-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 4px;
}
.daily-postit-num {
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.daily-postit-num .daily-postit-sep {
  opacity: 0.35;
  margin: 0 1px;
}
.daily-postit-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 4px;
  opacity: 0.6;
}
@media (max-width: 760px) {
  .daily-postit {
    top: 10px;
    left: 10px;
    transform: rotate(-5deg);
    padding: 7px 10px 8px;
    min-width: 72px;
  }
  .daily-postit.bump { transform: rotate(-5deg) scale(1.15); }
  .daily-postit-num { font-size: 20px; }
}

/* ── Collection fly-in (lorsqu'un député est obtenu pour la 1ère fois) ── */
.collection-fly {
  position: fixed;
  z-index: 200;
  pointer-events: none;
  background: var(--green);
  color: var(--ink);
  border: var(--border-thick);
  box-shadow: var(--sh-md);
  padding: 8px 12px;
  font-family: var(--font-display);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transform: translate(-50%, -50%) rotate(-3deg) scale(1);
  white-space: nowrap;
}
.collection-fly .ico { width: 18px; height: 18px; }

/* ── Loading ─────────────────────────────────────────────────────────────── */
#loading {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 80px 20px; gap: 18px;
}
.spinner {
  width: 44px; height: 44px;
  border: 4px solid var(--paper-2);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
#loading p {
  font-family: var(--font-mono);
  font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
}

#error { display: flex; flex-direction: column; align-items: center; padding: 60px 20px; }
.error-box {
  background: var(--paper-2);
  border: var(--border-thick); box-shadow: var(--sh-lg);
  padding: 36px 44px; text-align: center;
}
.error-icon { font-size: 2.5rem; margin-bottom: 12px; }
#error-msg { font-family: var(--font-body); font-size: 1rem; margin-bottom: 20px; }
.btn-retry {
  font-family: var(--font-display);
  font-size: 15px; text-transform: uppercase;
  background: var(--ink-2); color: var(--paper);
  border: var(--border-thick); box-shadow: var(--sh-sm);
  padding: 12px 28px; cursor: pointer;
}

/* ── Game over modal (mode Survie) ───────────────────────────────────────── */
.gameover-backdrop {
  position: fixed; inset: 0;
  background: rgba(10,10,10,0.7);
  z-index: 700;
  display: none;
}
.gameover-backdrop.show { display: grid; place-items: center; }
.gameover-card {
  background: var(--paper);
  border: var(--border-thick);
  box-shadow: var(--sh-lg);
  padding: var(--space-6);
  max-width: 480px;
  width: calc(100% - 32px);
  text-align: center;
  animation: revealPop 400ms var(--ease-pop) both;
}
.gameover-card h2 {
  font-family: var(--font-display);
  font-size: 36px;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
  color: var(--red);
  -webkit-text-stroke: 1px var(--ink);
}
.gameover-stats { display: flex; gap: var(--space-3); justify-content: center; margin: var(--space-4) 0; }
.gameover-stat { background: var(--paper-2); border: var(--border-thick); padding: var(--space-3); min-width: 100px; }
.gameover-stat .label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; }
.gameover-stat .value { font-family: var(--font-display); font-size: 28px; }
.gameover-replay {
  font-family: var(--font-display);
  font-size: 15px;
  background: var(--ink); color: var(--paper);
  border: var(--border-thick); box-shadow: var(--sh-sm);
  padding: 12px 28px; cursor: pointer;
  text-transform: uppercase;
}

.hidden { display: none !important; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  /* Padding latéral généreux pour ne pas tronquer les box-shadow néobrut. */
  .app { padding: 12px 20px 16px 16px; overflow: visible; }
  /* Pas d'overflow:hidden sur ces containers — sinon les box-shadow des
     enfants au bord droit/bas sont rognées. MAIS overflow-x: clip sur .main
     pour bloquer le débord horizontal causé par le swipe-out de .deputy-card
     (transform translate(±160vw)) qui sinon étend la zone de scroll sur
     iOS Safari. `clip` ne crée pas de scroll container, donc les shadows
     verticales restent libres. */
  .main { overflow: visible; overflow-x: clip; }
  .right-col { overflow: visible; }
  .site-title { font-size: clamp(18px, 7.5vw, 44px); }
  .header .btn-collection, .header .btn-nav { display: none; }
  .btn-collection-mobile-only { display: flex; width: 100%; justify-content: center; }

  /* Bouton indice : plus compact, vertical, et déborde franchement à droite
     hors de la photo pour ne plus la recouvrir. */
  .hint-postit {
    top: -8px;
    right: -10px;
    padding: 4px 8px 6px;
    font-size: 11px;
    gap: 2px;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.1;
  }
  .hint-postit .cost {
    font-size: 10px;
    padding: 1px 5px;
    margin-left: 0;
  }
  .hint-postit .ico { display: none; }  /* économise l'horizontal */

  /* Footer navigation mobile : remplace l'ancien bouton Collection isolé.
     Pas de margin-top — le gap du .right-col (16px) suffit, et matche ainsi
     l'écart entre la barre Points et le cadre hémicycle au-dessus. */
  .mobile-footer-nav {
    display: flex;
    gap: 8px;
  }
  .mobile-nav-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink);
    background: var(--paper);
    border: var(--border-thick);
    box-shadow: var(--sh-sm);
    padding: 10px 6px;
    cursor: pointer;
    white-space: nowrap;
    min-width: 0;
  }
  .mobile-nav-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 0 var(--ink);
  }
  .mobile-nav-btn .ico { flex-shrink: 0; }
  /* Bouton "icône seule" : ne prend pas de place horizontale superflue,
     laisse les boutons texte profiter du flex:1 restant. */
  .mobile-nav-btn-icon-only {
    flex: 0 0 auto;
    width: 44px;
    padding: 10px 0;
    justify-content: center;
  }

  /* Variante : footer collé au bas de l'écran (pages Collection et Succès) */
  .mobile-footer-nav.is-fixed {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 50;
    background: var(--paper);
    border-top: var(--border-thick);
    /* Padding généreux pour absorber les box-shadow 3×3 px des boutons,
       + env() pour la barre d'accueil iOS. */
    padding: 10px 12px calc(14px + env(safe-area-inset-bottom, 0px)) 10px;
    margin-top: 0;
  }
  body:has(.mobile-footer-nav.is-fixed) .app {
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
  }
  /* overflow: visible nécessaire pour que les box-shadow des cadres internes
     (game-panel, deputy-card, etc.) ne soient pas tronquées au bord droit ;
     cf. règle plus haut `.main, .right-col { overflow: visible }`.
     padding-right : marge de respiration pour absorber les box-shadow à droite
     des cartes — sinon clippées par `overflow-x: clip` sur .main.
     Row 1 (photo) agrandie : le titre de panneau est masqué + padding game-panel
     réduit ; row 1 prend la place libérée. */
  .main { grid-template-columns: 1fr; grid-template-rows: clamp(170px, calc(100dvh - 400px), 46vh) 1fr; gap: 12px; padding-right: 14px; }
  .shadow-photo-wrap, .photo-wrap { flex: 1; min-height: 0; width: auto; aspect-ratio: 3/4; align-self: center; max-width: 100%; }
  /* Carte photo : shadow alignée sur celle du game-panel (--sh-md) pour cohérence
     visuelle et économiser 4px en bas/à droite. */
  .deputy-card,
  .deputy-card-shadow { box-shadow: var(--sh-md); }
  /* Game-panel : padding asymétrique pour pousser le contenu (hémicycle) un
     peu plus bas dans le cadre + côtés très resserrés pour donner ~12px de
     plus à la largeur du SVG (= ~6px de plus en hauteur via le ratio 2:1). */
  .game-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 16px 4px 4px 4px; }
  /* Titre du panneau masqué en mobile : "Quel est son groupe parlementaire ?"
     superflu une fois le jeu compris ; libère l'espace pour la photo. */
  .panel-title { display: none; }
  .hemicycle-wrap { flex: 1; min-height: 0; aspect-ratio: unset; width: 100%; }
  /* Sur mobile, le reveal prend la place de l'hémicycle. Layout grille :
       ┌───────────┬─────────────────┐
       │ BRAVO !   │  Prénom         │
       │           │  Nom            │
       │ PARTI     │  Groupe parl…   │
       ├───────────┴─────────────────┤
       │ ▓▓ progress ▓▓▓▓▓▓▓▓▓▓▓ │
       └─────────────────────────────┘
     • Col 1 : verdict (row 1) + pill du parti (row 2)
     • Col 2 : prénom + nom (sur 2 lignes via \n + white-space:pre-line)
                puis groupe parlementaire en dessous
     • Le wrapper .reveal-party-wrap est en `display: contents` pour que
       ses enfants se placent directement dans la grille. */
  .reveal-screen.visible {
    flex: 1 1 0;
    min-height: 0;
    padding: 12px 14px 14px;
    /* Sur mobile : 2 colonnes (col-left | col-right), 1 row centrée
       verticalement. Chaque col-wrapper devient un flex column qui empile
       ses items localement avec un simple interligne. */
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "left right";
    column-gap: 22px;
    align-items: center;
  }
  /* Mobile : les wrappers reprennent leur rôle de container flex. */
  .reveal-col-left,
  .reveal-col-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .reveal-col-left  { grid-area: left; }
  .reveal-col-right { grid-area: right; }
  /* Désactive les grid-area que le desktop applique aux items individuels :
     en mobile, les items ne sont plus enfants directs du grid. */
  .reveal-screen.visible .reveal-verdict,
  .reveal-screen.visible .reveal-name,
  .reveal-screen.visible .reveal-party,
  .reveal-screen.visible .reveal-party-sub { grid-area: auto; }
  .reveal-verdict   {
    font-size: clamp(20px, 6vw, 28px);
    padding: 4px 12px;
  }
  .reveal-name      {
    /* Le textContent contient un \n entre prénom et nom — affichage sur
       deux lignes uniquement en mobile. */
    white-space: pre-line;
    font-size: clamp(17px, 5.5vw, 26px);
    line-height: 1.1;
  }
  .reveal-party     {
    font-size: clamp(13px, 3.6vw, 18px);
    padding: 5px 10px 7px;
  }
  .reveal-party-sub {
    font-size: 10px;
    margin-top: 0;
    letter-spacing: 0.06em;
  }
  /* .reveal-progress n'est plus dans le grid : il est en position:absolute
     pour faire partie de la bordure inférieure (cf. règle plus haut). */
  /* Panneau stats : bottom-sheet */
  .controls-panel {
    position: fixed; bottom: calc(-100% - 30px); left: 0; right: 0;
    z-index: 200; justify-content: flex-start;
    border-top: var(--border-thick); border-left: var(--border-thick); border-right: var(--border-thick);
    box-shadow: -6px -6px 0 0 var(--ink);
    max-height: 82dvh; overflow-y: auto;
    transition: bottom 320ms var(--ease-pop);
  }
  .controls-panel.stats-open { bottom: 0; }
  .stats-close-btn {
    display: flex; align-self: flex-end; margin-bottom: var(--space-2);
    font-family: var(--font-display); font-size: 16px;
    background: var(--paper-2); border: var(--border-thick); box-shadow: var(--sh-sm);
    padding: 1px 10px; cursor: pointer; color: var(--ink);
  }
  .stats-backdrop {
    display: block; position: fixed; inset: 0;
    background: rgba(10,10,10,0.5); z-index: 199;
    visibility: hidden; opacity: 0; transition: opacity 0.2s;
  }
  .stats-backdrop.visible { visibility: visible; opacity: 1; }
  .stats-trigger {
    display: flex; align-items: center; gap: 10px;
    background: #4b3cd1; color: var(--paper);
    border: var(--border-thick); box-shadow: var(--sh-sm);
    padding: 10px 14px; cursor: pointer; flex-shrink: 0; width: 100%;
    position: relative;
  }
  .stats-trigger:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 0 var(--ink); }
  /* Bloc points : nombre proéminent (×2 par rapport à avant) suivi de "points" en label */
  .trigger-pts { display: flex; align-items: baseline; gap: 8px; position: relative; }
  .trigger-num   { font-family: var(--font-display); font-size: 34px; line-height: 1; }
  .trigger-label { font-family: var(--font-display); font-size: 18px; line-height: 1; text-transform: uppercase; letter-spacing: 0.02em; }
  /* Hint à droite : "Stats et modes de jeu" + chevron up */
  .trigger-hint {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-mono); font-size: 11px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.95;
    text-align: right;
  }
  .trigger-hint .ico { color: var(--paper); }

  /* Stat-cards (visibles dans le bottom-sheet) : compactées en mobile pour
     ne pas saturer le sheet ouvert et laisser respirer le mode-de-jeu. */
  .stats-compact { gap: var(--space-2); }
  .stat-card     { padding: 7px 9px; gap: 2px; }
  .stat-head     { font-size: 9px; letter-spacing: 0.12em; }
  .stat-head .ico { width: 18px; height: 18px; }
  .stat-head .ico svg { width: 14px !important; height: 14px !important; }
  .stat-num      { font-size: 22px !important; }
  .stat-sub      { font-size: 10px; letter-spacing: 0.02em; }
  .stat-sub-acc .acc-good,
  .stat-sub-acc .acc-bad,
  .stat-sub-acc .acc-sep { font-size: 13px; }
  .stat-sub-acc .ico,
  .stat-sub-acc .ico svg { width: 13px !important; height: 13px !important; }
  .stat-sub:not(.stat-sub-acc) span { font-size: 13px; }

  /* Mode buttons : moins d'air autour de l'icône et du libellé. */
  .modes         { gap: var(--space-1); }
  .mode-btn      { padding: 6px 10px; font-size: 10px !important; gap: 5px; min-width: 70px; }
  .mode-btn .ico { width: 13px; height: 13px; }
  .mode-btn .ico svg { width: 13px !important; height: 13px !important; }
  .mode-desc     { font-size: 11px; }
}

@media (max-width: 480px) {
  /* Padding gauche/droite généreux pour les box-shadow néobrut sans débord. */
  .app { padding: 10px 18px 14px 14px; }
  .reveal-meta { grid-template-columns: 1fr; }
  /* Titre réduit pour ne plus déborder (en 7.5vw il atteignait ≈30 px sur
     iPhone et la chaîne "DEVINE LE PARTI" + emoji + drop-shadow forçait .header
     plus large que .app content area). */
  .site-title { font-size: clamp(15px, 6vw, 24px); }
  /* .panel-title masqué via la règle 860px — pas d'override 480px nécessaire. */
  /* Stats-trigger : padding/gap un poil resserrés pour iPhone, mais on
     préserve la taille du num/label (priorité visuelle). */
  .stats-trigger { gap: 8px; padding: 9px 12px; }
  .trigger-num   { font-size: 30px; }
  .trigger-label { font-size: 16px; }
  .trigger-hint  { font-size: 10px; letter-spacing: 0.04em; gap: 4px; }
  .trigger-hint  .ico-svg { width: 16px !important; height: 16px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}