/* ============================================================================
   ÉCRAN DÉMO SALON - /demo/
   Scène plein écran : la carte WebGL (map-fx.js) vit derrière, les écrans
   flottent au-dessus. Deux thèmes : le CLAIR est le défaut (verre blanc sur
   fond OSM standard), le sombre est servi par html[data-theme='dark'], qui
   redéfinit les jetons ci-dessous - aucune couleur de thème n'est posée en
   dur plus bas. --accent bascule sur la couleur de la commune dès que le site
   de la mairie est lu. Sans WebGL, fond dégradé statique.
   ============================================================================ */

:root {
  --accent: #ff4d6a;
  --ink: #101014;
  --paper: rgba(255, 255, 255, 0.92);
  --text: #4a4a55;
  --border: rgba(16, 16, 20, 0.09);
  --ok: #22c583;

  /* Thème clair (défaut) : la scène et le verre. Le bloc [data-theme='dark']
     plus bas redéfinit ces mêmes jetons, et RIEN d'autre. */
  --scene-glow: #eef3f9;             /* repli sans WebGL : coeur du dégradé */
  --scene-base: #d8e2ee;             /* repli sans WebGL : bord du dégradé */
  --scrim-strong: rgba(244, 248, 252, 0.9);
  --scrim-mid: rgba(244, 248, 252, 0.55);
  --on-scene: var(--ink);            /* texte posé directement sur la carte */
  --on-scene-soft: #3d3d49;
  --on-scene-faint: #5d5d6b;
  --title-halo: rgba(255, 255, 255, 0.85);
  --glass-tint: #ffffff;             /* teinte des panneaux de verre (alpha par composant) */
  --glass-border: rgba(16, 16, 20, 0.12);
  --glass-shimmer: rgba(255, 255, 255, 0.95);
  --glass-shadow: rgba(0, 0, 0, 0.28);
  --on-glass: var(--ink);            /* texte posé sur le verre */
  --on-glass-strong: #2a2a33;        /* presque aussi appuyé que --on-glass (étapes faites) */
  --on-glass-soft: #4a4a55;
  --on-glass-faint: #71717e;
  --track: rgba(16, 16, 20, 0.14);   /* traits de liaison du stepper */
  --dot-bg: #ffffff;
  --dot-border: rgba(16, 16, 20, 0.2);
  --input-border: rgba(16, 16, 20, 0.1);
  --input-shadow: rgba(0, 0, 0, 0.25);
}

html[data-theme='dark'] {
  --scene-glow: #17203a;
  --scene-base: #0a0d16;
  --scrim-strong: rgba(5, 8, 16, 0.88);
  --scrim-mid: rgba(5, 8, 16, 0.55);
  --on-scene: #fff;
  --on-scene-soft: rgba(255, 255, 255, 0.82);
  --on-scene-faint: rgba(215, 226, 250, 0.62);
  --title-halo: rgba(0, 0, 0, 0.65);
  --glass-tint: #090d18;
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-shimmer: rgba(255, 255, 255, 0.12);
  --glass-shadow: rgba(0, 0, 0, 0.8);
  --on-glass: #fff;
  --on-glass-strong: rgba(255, 255, 255, 0.82);
  --on-glass-soft: rgba(255, 255, 255, 0.65);
  --on-glass-faint: rgba(255, 255, 255, 0.52);
  --track: rgba(255, 255, 255, 0.16);
  --dot-bg: rgba(20, 26, 42, 0.95);
  --dot-border: rgba(255, 255, 255, 0.2);
  --input-border: rgba(255, 255, 255, 0.25);
  --input-shadow: rgba(0, 0, 0, 0.65);
}

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

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: radial-gradient(1200px 800px at 70% 20%, var(--scene-glow), var(--scene-base) 70%);
  color: var(--on-scene);
  min-height: 100vh;
  overflow-x: hidden;
}

#map { position: fixed; inset: 0; z-index: 0; }
body:not(.has-map) #map { display: none; }

.maplibregl-ctrl-attrib { opacity: 0.45; font-size: 10px; }

.kiosk {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 3.5vh 3vw;
  pointer-events: none;
}
.kiosk > * { pointer-events: auto; }

.kiosk__brand { display: flex; justify-content: center; margin-bottom: 2.5vh; }
/* Règle du projet : un composant piloté par `hidden` doit le déclarer,
   sinon `display: flex` continue de gagner. */
.kiosk__brand[hidden] { display: none; }
.kiosk__logo {
  height: clamp(56px, 8vh, 88px);
  filter: drop-shadow(0 6px 22px var(--glass-shadow));
}
/* Deux encres du même logo : le CSS montre celle du thème actif */
.kiosk__logo--dark { display: none; }
html[data-theme='dark'] .kiosk__logo--light { display: none; }
html[data-theme='dark'] .kiosk__logo--dark { display: block; }

/* ─── Interrupteur clair/sombre : commande de celui qui tient le stand ─── */
.theme-toggle {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 8;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--on-glass);
  background: color-mix(in srgb, var(--glass-tint) 80%, transparent);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  box-shadow: 0 14px 40px -12px var(--glass-shadow), inset 0 1.5px 0 var(--glass-shimmer);
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.theme-toggle:hover { transform: scale(1.08); }
.theme-toggle svg { width: 20px; height: 20px; }
/* L'icône annonce la destination : lune en clair, soleil en sombre */
.theme-toggle__sun { display: none; }
html[data-theme='dark'] .theme-toggle__moon { display: none; }
html[data-theme='dark'] .theme-toggle__sun { display: block; }

.screen { display: none; flex-direction: column; align-items: center; text-align: center; flex: 1; animation: screenIn 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.screen.is-active { display: flex; }
@keyframes screenIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* ─── Écran attract + saisie ─── */

#screen-input { justify-content: center; padding-bottom: 8vh; position: relative; }

/* Scrim de lisibilité : le titre respire, la carte reste visible autour */
#screen-input::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse 62% 58% at 50% 44%, var(--scrim-strong), var(--scrim-mid) 55%, transparent 78%);
  pointer-events: none;
  z-index: -1;
}

.kiosk__title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2.6rem, 6.6vw, 5.2rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--on-scene);
  text-shadow: 0 6px 40px var(--title-halo);
}
.accent { color: var(--accent); transition: color 0.6s ease; }
.kiosk__title .accent { text-shadow: 0 0 44px color-mix(in srgb, var(--accent) 60%, transparent); }

.kiosk__subtitle {
  margin-top: 20px;
  max-width: 680px;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  line-height: 1.6;
  color: var(--on-scene-soft);
  text-shadow: 0 2px 16px var(--title-halo);
}

.search { position: relative; width: min(680px, 92vw); margin-top: 5vh; }

.search__input {
  width: 100%;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.35rem, 2.7vw, 2rem);
  font-weight: 600;
  padding: clamp(20px, 2.8vh, 28px) 32px;
  border: 2px solid var(--input-border);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
  outline: none;
  box-shadow: 0 30px 90px -18px var(--input-shadow), 0 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
  animation: inputBreath 3.2s ease-in-out infinite;
}
@keyframes inputBreath {
  0%, 100% { box-shadow: 0 30px 90px -18px var(--input-shadow), 0 0 0 6px color-mix(in srgb, var(--accent) 14%, transparent); }
  50% { box-shadow: 0 30px 90px -18px var(--input-shadow), 0 0 0 14px color-mix(in srgb, var(--accent) 7%, transparent); }
}
.search__input:focus { border-color: var(--accent); animation: none; }
.search__input::placeholder { color: #8b8b96; font-weight: 500; }

.search__suggestions {
  position: absolute;
  top: calc(100% + 12px);
  left: 0; right: 0;
  list-style: none;
  background: rgba(255, 255, 255, 0.97);
  border-radius: 20px;
  box-shadow: 0 34px 90px -20px var(--glass-shadow);
  overflow: hidden;
  z-index: 10;
  text-align: left;
}
.search__suggestions li {
  padding: 16px 26px;
  font-size: 1.1rem;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid var(--border);
  transition: background 0.15s ease;
}
.search__suggestions li:first-child { border-top: none; }
.search__suggestions li:hover,
.search__suggestions li.is-selected { background: color-mix(in srgb, var(--accent) 8%, #fff); }
.search__suggestions .s-name { font-weight: 600; }
.search__suggestions .s-meta { color: var(--text); font-size: 0.9rem; white-space: nowrap; }

/* ─── Écran génération : HUD immersif flottant sur la carte ─── */

.screen--hud { position: static; }

.topline {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: color-mix(in srgb, var(--on-scene) 9%, transparent);
  z-index: 5;
}
.topline span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #fff));
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 70%, transparent);
  transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Stepper : les 5 phases, colonne vertébrale de la linéarité du chargement.
   Lu d'un coup d'oeil : ce qui est fait (coché), l'étape en cours (accent
   pulsé), ce qui reste (grisé). */
.stepper {
  position: fixed;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  align-items: flex-start;
  gap: 0;
  list-style: none;
  background: color-mix(in srgb, var(--glass-tint) 80%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  padding: 12px 30px 14px;
  box-shadow: 0 24px 70px -18px var(--glass-shadow), inset 0 1px 0 var(--glass-shimmer);
  max-width: 94vw;
}
.step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 clamp(18px, 3.4vw, 42px);
  flex: 0 0 auto;
}
/* Trait de liaison entre deux pastilles, rempli quand l'étape est atteinte */
.step::before {
  content: '';
  position: absolute;
  top: 15px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: var(--track);
  z-index: 0;
}
.step:first-child::before { display: none; }
.step.is-done::before,
.step.is-current::before { background: color-mix(in srgb, var(--ok) 85%, transparent); }
.step__dot {
  position: relative;
  z-index: 1;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--on-glass-faint);
  background: var(--dot-bg);
  border: 2px solid var(--dot-border);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.step__label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--on-glass-faint);
  white-space: nowrap;
  transition: color 0.4s ease;
}
.step.is-current .step__dot {
  color: #fff;
  background: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 60%, #fff);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 22px color-mix(in srgb, var(--accent) 60%, transparent);
  animation: stepPulse 1.6s ease-in-out infinite;
}
.step.is-current .step__label { color: var(--on-glass); font-weight: 600; }
.step.is-done .step__dot {
  color: transparent;
  background: var(--ok);
  border-color: var(--ok);
}
.step.is-done .step__dot::after {
  content: '';
  position: absolute;
  width: 12px; height: 7px;
  border-left: 2.4px solid #fff;
  border-bottom: 2.4px solid #fff;
  transform: translateY(-1px) rotate(-45deg);
}
/* Les étapes FAITES restent presque aussi lisibles que l'étape en cours : le
   stepper se lit à 3 mètres, fait/en cours/à venir doivent rester trois tons */
.step.is-done .step__label { color: var(--on-glass-strong); }
@keyframes stepPulse {
  0%, 100% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 20%, transparent), 0 0 20px color-mix(in srgb, var(--accent) 55%, transparent); }
  50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 8%, transparent), 0 0 30px color-mix(in srgb, var(--accent) 70%, transparent); }
}

/* Pilule de statut : l'action en cours, sous le stepper, lisible à 3 mètres */
.hud-pill {
  position: fixed;
  top: 114px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 16px;
  background: color-mix(in srgb, var(--glass-tint) 82%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  padding: 13px 26px 13px 18px;
  box-shadow: 0 24px 70px -18px var(--glass-shadow), inset 0 1px 0 var(--glass-shimmer);
  max-width: min(760px, 92vw);
  animation: pillIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes pillIn { from { opacity: 0; transform: translate(-50%, -18px); } to { opacity: 1; transform: translate(-50%, 0); } }

.hud-pill__icon { width: 34px; height: 34px; display: grid; place-items: center; flex-shrink: 0; }
.hud-pill__texts { display: flex; flex-direction: column; min-width: 0; }
.hud-pill__label {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: var(--on-glass);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hud-pill__detail { font-size: 0.85rem; color: var(--on-glass-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-pill__city {
  display: flex;
  align-items: center;
  gap: 10px;
  border-left: 1px solid var(--glass-border);
  padding-left: 16px;
}
/* Logo scrapé de la mairie, posé à côté du nom de la commune */
.hud-pill__logo {
  width: 30px;
  height: 30px;
  object-fit: contain;
  border-radius: 7px;
  background: #fff;
  padding: 3px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.45);
  animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hud-pill__logo[hidden] { display: none; }
.hud-pill__commune {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--accent);
  white-space: nowrap;
}

.spinner {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2.5px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.hud-check {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--ok);
  color: #fff;
  display: grid;
  place-items: center;
  animation: pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hud-check svg { width: 14px; height: 14px; }
@keyframes pop { from { transform: scale(0.3); } to { transform: scale(1); } }

/* Compteurs cumulés du recensement : lisibles, façon salle de contrôle */
.counters {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 92px;
  z-index: 5;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 94vw;
  pointer-events: none;
}
.counter {
  display: flex;
  align-items: baseline;
  gap: 8px;
  background: color-mix(in srgb, var(--glass-tint) 78%, transparent);
  backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 8px 14px;
  animation: findingIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.counter__n {
  font-family: 'Space Grotesk', monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--accent);
  line-height: 1;
  text-shadow: 0 0 16px color-mix(in srgb, var(--accent) 60%, transparent);
}
.counter__n.is-bump { animation: bump 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes bump { 50% { transform: scale(1.35); } }
.counter__l { font-size: 0.72rem; color: var(--on-glass-soft); letter-spacing: 0.02em; }

/* Ticker : UNE trouvaille à la fois, grande et lisible */
.ticker {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 30px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  background: color-mix(in srgb, var(--glass-tint) 84%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  padding: 12px 24px;
  max-width: min(880px, 94vw);
  min-height: 48px;
  box-shadow: 0 20px 60px -18px var(--glass-shadow), inset 0 1px 0 var(--glass-shimmer);
  pointer-events: none;
}
.ticker__icon { width: 21px; height: 21px; color: var(--accent); flex-shrink: 0; }
.ticker__icon svg { width: 100%; height: 100%; }
.ticker__icon img { width: 21px; height: 21px; border-radius: 5px; }
.ticker__text {
  color: var(--on-glass);
  font-size: 0.98rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ticker__meta { font-size: 0.8rem; color: var(--on-glass-faint); white-space: nowrap; flex-shrink: 0; }
.ticker.is-swap .ticker__text, .ticker.is-swap .ticker__meta, .ticker.is-swap .ticker__icon {
  animation: tickerIn 0.35s ease;
}
@keyframes tickerIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes findingIn { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: none; } }

/* Sonar de recensement : anneaux concentriques qui se propagent depuis la
   commune (remplace l'ancien balayage conique). Trois anneaux décalés + un
   coeur pulsé. Le fondu « screen » n'a de sens que sur la carte sombre : sur
   le fond OSM clair, il éteindrait les anneaux. */
.fx-sonar {
  position: relative;
  width: 0; height: 0;
  pointer-events: none;
}
html[data-theme='dark'] .fx-sonar { mix-blend-mode: screen; }
.fx-sonar span {
  position: absolute;
  left: 0; top: 0;
  width: 40px; height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent, #ff4d6a) 80%, #fff);
  box-shadow: 0 0 26px color-mix(in srgb, var(--accent, #ff4d6a) 55%, transparent);
  opacity: 0;
  animation: sonarPing 3.4s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}
.fx-sonar span:nth-child(2) { animation-delay: 1.13s; }
.fx-sonar span:nth-child(3) { animation-delay: 2.26s; }
.fx-sonar i {
  position: absolute;
  left: 0; top: 0;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent, #ff4d6a) 90%, #fff);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent, #ff4d6a) 80%, transparent);
  animation: sonarCore 1.7s ease-in-out infinite;
}
@keyframes sonarPing {
  0% { transform: scale(0.2); opacity: 0; }
  12% { opacity: 0.9; }
  100% { transform: scale(11); opacity: 0; }
}
@keyframes sonarCore {
  0%, 100% { transform: scale(0.8); opacity: 0.75; }
  50% { transform: scale(1.25); opacity: 1; }
}

/* Photo posée sur la carte à l'emplacement du projet */
/* La vignette naît invisible et n'apparaît qu'une fois positionnée par la
   carte : sinon elle se voyait un instant en haut à gauche de l'écran, à
   l'endroit par défaut d'un marqueur pas encore placé. */
.fx-photo {
  pointer-events: none;
  opacity: 0;
}
.fx-photo.is-in {
  opacity: 1;
  animation: photoIn 0.7s cubic-bezier(0.34, 1.5, 0.64, 1);
}
.fx-photo img {
  width: 92px;
  height: 66px;
  object-fit: cover;
  border-radius: 10px;
  border: 2.5px solid #fff;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.65);
  transition: width 0.6s ease, height 0.6s ease, opacity 0.6s ease;
}
.fx-photo.is-small img { width: 44px; height: 32px; opacity: 0.9; }
@keyframes photoIn { 0% { transform: scale(0) translateY(-30px); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* Avertissement de carte courte. Même verre que le ticker, mais teinté de la
   couleur de la commune plutôt que du rouge de l'erreur : la génération
   continue, rien n'est interrompu. Il se pose au-dessus du ticker, qui reste
   lisible, et accompagne le visiteur jusqu'à l'écran de fin. */
.hud-notice[hidden] { display: none; }
.hud-notice {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 92px;
  z-index: 5;
  margin: 0;
  max-width: min(720px, 92vw);
  padding: 14px 26px;
  background: color-mix(in srgb, var(--glass-tint) 86%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 20px;
  color: var(--on-glass);
  font-size: 0.95rem;
  line-height: 1.55;
  text-align: center;
  box-shadow: 0 22px 60px -20px var(--glass-shadow), inset 0 1px 0 var(--glass-shimmer);
  animation: tickerIn 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── Écran final : le recensement est fait, l'espace attend ─── */

#screen-done { justify-content: center; }

.done {
  background: var(--paper);
  backdrop-filter: blur(26px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 30px;
  padding: clamp(28px, 4.5vh, 48px) clamp(26px, 4vw, 56px);
  box-shadow: 0 44px 120px -26px var(--glass-shadow);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: min(760px, 94vw);
}

/* Tous les emblèmes partagent le même gabarit, pour que les issues pèsent
   exactement le même poids à l'écran. Seule la couleur les distingue, et elle
   reste sobre partout ailleurs que sur la carte publiée : une issue sans
   espace n'est pas une panne. C'est le script qui montre le bon. */
.done__embleme[hidden] { display: none; }
.done__embleme {
  width: 84px; height: 84px;
  border-radius: 50%;
  color: #fff;
  display: grid;
  place-items: center;
  margin-bottom: 3vh;
  animation: pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.done__embleme svg { width: 38px; height: 38px; }
.done__embleme--ok {
  background: var(--ok);
  box-shadow: 0 24px 60px -18px rgba(34, 197, 131, 0.6);
}
.done__embleme--ok svg { width: 40px; height: 40px; }
.done__embleme--sobre {
  background: var(--ink);
  box-shadow: 0 24px 60px -18px rgba(16, 16, 20, 0.55);
}

/* Sans espace généré, le bouton d'accès, le QR code et le bandeau de chiffres
   n'ont plus d'objet : les laisser serait promettre une carte qui n'existe
   pas. */
.done--sans-espace #btn-open,
.done--sans-espace .done__qr { display: none; }

.done__title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  text-align: center;
}
.done__detail { margin-top: 12px; color: var(--text); font-size: 1.05rem; text-align: center; }

.done__stats[hidden] { display: none; }
.done__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 3.5vh;
  width: 100%;
}
.stat {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.stat__n {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}
.stat__l { font-size: 0.74rem; color: var(--text); text-align: center; line-height: 1.3; }

/* ─── Récupération de l'adresse ───
   Une ÉTAPE à part entière, pas un champ posé entre deux blocs : un filet la
   sépare de ce qui précède, sinon son intitulé se lit comme la suite du texte
   du dessus. Le champ et son bouton forment UN SEUL contrôle : côte à côte,
   l'ombre du bouton mordait sur le champ, et sur mobile les deux se séparaient
   en un faux second appel à l'action. Le bouton d'envoi est sombre, jamais
   rouge : le seul rouge de l'écran doit rester « Découvrir l'espace ».
   L'échappatoire est plus discrète que le champ, sans être cachée. */
.lead[hidden], .lead__thanks[hidden] { display: none; }

/* Le filet suit la largeur de la CARTE, pas celle du champ : cadré sur le
   champ, il flottait au milieu, plus court que la grille de statistiques juste
   au-dessus, et ne lisait plus comme une séparation. */
.lead,
.lead__thanks {
  width: 100%;
  margin-top: clamp(22px, 3.2vh, 34px);
  padding-top: clamp(22px, 3.2vh, 34px);
  border-top: 1px solid var(--border);
}

.lead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.lead__label {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
}

/* Le contrôle unifié : la bordure appartient au conteneur, pas à ses deux
   moitiés, donc rien ne peut plus se chevaucher ni se désolidariser. */
.lead__field {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 460px;
  gap: 8px;
  padding: 5px 5px 5px 20px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.lead__field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}
/* L'état d'erreur est explicite : --accent prend la couleur de la commune, qui
   peut être bleue. Un anneau bleu au-dessus d'un message rouge ne dit rien. */
.lead__field.is-error,
.lead__field.is-error:focus-within {
  border-color: #c02638;
  box-shadow: 0 0 0 4px rgba(192, 38, 56, 0.13);
}
.lead__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 0;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: none;
  border: none;
  outline: none;
}
.lead__input::placeholder { color: color-mix(in srgb, var(--text) 55%, transparent); }
.lead__input:disabled { color: var(--text); }
.lead__send {
  flex: 0 0 auto;
  padding: 13px 26px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 0.98rem;
  color: #fff;
  background: var(--ink);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.lead__send:hover { background: #33333f; }
.lead__send:disabled { opacity: 0.45; cursor: default; }

.lead__error { margin: 0; font-size: 0.86rem; color: #c02638; }
.lead__error[hidden] { display: none; }

/* Lien discret sous le formulaire. L'échappatoire du visiteur a disparu (une
   adresse est exigée pour ouvrir l'espace) : seul le bouton de relance du
   stand porte encore ce style. */
.lead__skip {
  padding: 4px 10px;
  font-family: inherit;
  font-size: 0.82rem;
  color: var(--text);
  background: none;
  border: none;
  opacity: 0.66;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.lead__skip:hover { opacity: 1; }

/* Le remerciement occupe la même place et la même largeur que le formulaire :
   la carte ne saute pas au moment de l'envoi. */
.lead__thanks {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--ok);
}
.lead__thanks svg { width: 20px; height: 20px; flex-shrink: 0; }

/* Relance du recensement : commande de celui qui tient le stand, accessible à
   tout moment sur l'écran de fin, y compris pendant l'étape de l'adresse. */
.done__relance[hidden] { display: none; }
.done__relance { margin-top: clamp(14px, 2vh, 22px); }

/* Second temps de l'écran de fin : découvert une fois l'adresse tranchée. */
.done__suite[hidden] { display: none; }
.done__suite {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: suiteIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes suiteIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.done__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: clamp(22px, 3.2vh, 34px);
}
.done__secondary { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
/* Les actions secondaires sont plus petites que l'action principale : c'est ce
   qui dit au visiteur où regarder. */
.done__secondary .btn { padding: 13px 26px; font-size: 0.98rem; }
.done__actions .btn[hidden] { display: none; }

.btn {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1.12rem;
  border-radius: 999px;
  padding: 17px 36px;
  cursor: pointer;
  text-decoration: none;
  border: none;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}
.btn--primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 18px 44px -12px color-mix(in srgb, var(--accent) 55%, transparent);
}
.btn--primary:hover { transform: scale(1.05); }
.btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--border); }
.btn--ghost:hover { border-color: var(--ink); }

.done__qr {
  margin-top: 3.5vh;
  display: flex;
  align-items: center;
  gap: 20px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px 22px;
  text-align: left;
  font-size: 0.92rem;
  color: var(--text);
  line-height: 1.5;
}
.done__qr img { width: 132px; height: 132px; border-radius: 10px; }

.done__countdown { margin-top: 2.5vh; font-size: 0.88rem; color: var(--text); min-height: 1.2em; }

/* ─── Épingles projetées sur la carte (marqueurs DOM MapLibre) ─── */

.fx-pin-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  /* Invisible tant que la carte ne l'a pas positionnée (voir .fx-photo) */
  opacity: 0;
}
.fx-pin-wrap.is-in { opacity: 1; }
.fx-pin-wrap.is-in.fx-pin-wrap--approx { opacity: 0.8; }

.fx-pin {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--pin, #ff4d6a);
  border: 2.5px solid #fff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
  animation: pinPop 0.6s cubic-bezier(0.34, 1.7, 0.64, 1);
  position: relative;
  flex-shrink: 0;
}
.fx-pin::after {
  content: '';
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 2px solid var(--pin, #ff4d6a);
  animation: pinRing 2.2s ease-out infinite;
}
@keyframes pinPop { 0% { transform: scale(0) translateY(-26px); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes pinRing { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(1.8); opacity: 0; } }

/* Étiquette du projet : lisible sur la carte, se replie ensuite */
.fx-pin-label {
  background: color-mix(in srgb, var(--glass-tint) 85%, transparent);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 6px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--on-glass);
  white-space: nowrap;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 10px 30px -10px var(--glass-shadow);
  animation: findingIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  transition: opacity 0.7s ease, max-width 0.7s ease, padding 0.7s ease;
}
.fx-pin-wrap.is-collapsed .fx-pin-label { opacity: 0; max-width: 0; padding: 6px 0; border-width: 0; }

/* Écrans étroits (hors kiosque) : le stepper garde ses pastilles, cache ses
   libellés pour tenir sur une ligne */
@media (max-width: 880px) {
  .stepper { padding: 10px 14px 12px; }
  .step { padding: 0 clamp(9px, 2.4vw, 20px); }
  .step__label { display: none; }
  .hud-pill { top: 84px; }
}

@media (max-width: 720px) {
  .done__stats { grid-template-columns: repeat(2, 1fr); }
  .done__qr { flex-direction: column; text-align: center; }
}

/* Sur écran étroit, trois pastilles de largeurs différentes s'empilaient en
   escalier (deux sur une ligne, la troisième centrée en dessous). Des boutons
   pleine largeur donnent une colonne franche, et le rouge reste seul en tête. */
@media (max-width: 560px) {
  .done__actions { align-items: stretch; width: 100%; gap: 10px; }
  .done__secondary { flex-direction: column; width: 100%; gap: 10px; }
  .done__actions .btn { width: 100%; text-align: center; }
  .lead__field { padding-left: 16px; }
  .lead__send { padding: 13px 20px; font-size: 0.94rem; }
}

@media (prefers-reduced-motion: reduce) {
  .search__input { animation: none; }
  .fx-pin::after { animation: none; opacity: 0; }
  .fx-sonar span { animation: none; opacity: 0; }
  .fx-sonar i { animation: none; opacity: 0.7; }
  .step.is-current .step__dot { animation: none; }
}

/* ─── La preuve : citation exacte relevée dans la source ───────────────────
   Posée au-dessus du ticker, elle reste 5 s puis s'efface. C'est la pièce qui
   transforme « une IA a produit une liste » en « nous avons lu cette phrase ». */
.quote {
  position: fixed;
  left: 50%;
  bottom: 96px;
  z-index: 6;
  margin: 0;
  width: min(680px, 90vw);
  padding: 16px 22px 13px;
  background: color-mix(in srgb, var(--glass-tint) 78%, transparent);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--glass-border);
  border-left: 3px solid var(--accent, #ff4d6a);
  border-radius: 14px;
  box-shadow: 0 24px 70px -20px var(--glass-shadow), inset 0 1px 0 var(--glass-shimmer);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 14px) scale(0.98);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.quote.is-on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.quote__text {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--on-glass);
  font-style: italic;
  letter-spacing: 0.1px;
}
.quote__media {
  margin-top: 8px;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent, #ff4d6a);
  opacity: 0.9;
}

/* ─── Ce que l'on refuse : gage de rigueur, pas aveu de faiblesse ───────── */
.rejected {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 8px;
  z-index: 5;
  margin: 0;
  font-size: 12.5px;
  color: var(--on-scene-faint);
  letter-spacing: 0.02em;
  pointer-events: none;
  text-align: center;
  max-width: 92vw;
}

/* ─── Survol final : le titre du projet que la caméra vient voir ────────── */
.flyover {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 6;
  transform: translate(-50%, -50%) scale(0.94);
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  text-align: center;
}
.flyover.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.flyover__title {
  display: inline-block;
  padding: 14px 28px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: clamp(22px, 3.4vw, 40px);
  font-weight: 600;
  color: var(--on-glass);
  background: color-mix(in srgb, var(--glass-tint) 62%, transparent);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: 0 30px 80px -24px var(--glass-shadow), inset 0 1.5px 0 var(--glass-shimmer);
  text-shadow: 0 2px 24px var(--title-halo);
}

@media (prefers-reduced-motion: reduce) {
  .quote, .flyover { transition: none; }
}