/* ============================================================
   v23.6 — WOW PACK : mini-carte trafic · partage · vote citoyen
   ============================================================ */

/* Mini-carte statique TomTom avec flux de circulation */
.wow-snap { margin: 0.2rem 0 0.9rem; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--panel); }
.wow-snap-head { font: 700 0.78rem/1.3 var(--font-display, inherit); padding: 0.55rem 0.75rem; color: var(--ink); background: linear-gradient(90deg, rgba(39,196,106,.12), rgba(247,207,47,.10)); }
.wow-snap-body { position: relative; height: 150px; background: #e8ecef; }
.wow-snap-body img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.wow-snap-body img.wow-snap-flow { z-index: 2; opacity: .95; }
.wow-snap-badge { position: absolute; right: 6px; bottom: 4px; z-index: 3; font-size: .58rem; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); text-decoration: none; }
.wow-snap:not(.ok) .wow-snap-badge { display: none; }

/* Menu partage express */
.wow-share {
  display: flex; gap: 0.4rem; margin: 0.45rem 0 0.2rem; flex-wrap: wrap;
}
.wow-share a, .wow-share button {
  font: 700 0.78rem/1 inherit; font-family: inherit;
  padding: 0.5rem 0.75rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  text-decoration: none; display: inline-flex; align-items: center; gap: 0.3rem;
}
.wow-share a:hover, .wow-share button:hover { background: var(--accent-soft, rgba(226,73,47,.08)); border-color: var(--accent, #d64500); }

/* Vote « toujours fermée ? » */
.wow-stuck {
  margin-top: 0.9rem; padding: 0.7rem 0.8rem; border-radius: 14px;
  border: 1px dashed var(--line-strong, #d8d4c9); background: var(--panel);
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
}
.wow-stuck .ws-q { font-weight: 700; font-size: 0.84rem; }
.wow-stuck .ws-btns { display: flex; gap: 0.35rem; }
.wow-stuck .ws-btns button {
  font: 700 0.8rem/1 inherit; font-family: inherit; cursor: pointer;
  padding: 0.42rem 0.7rem; border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink);
}
.wow-stuck .ws-btns button.on { background: var(--accent, #d64500); border-color: var(--accent, #d64500); color: #fff; }
.wow-stuck .ws-note { font-size: 0.68rem; color: var(--ink-soft, #5d6b7e); flex-basis: 100%; }
.wow-stuck.flash { animation: wsFlash 0.6s ease; }
@keyframes wsFlash { 0% { transform: scale(1); } 40% { transform: scale(1.03); box-shadow: 0 0 0 4px rgba(39,196,106,.18); } 100% { transform: scale(1); } }

@media (max-width: 899px) {
  .wow-snap-body { height: 130px; }
}

/* Confettis « Merci ! » après un signalement citoyen */
.wow-confetti {
  position: fixed;
  top: -12px;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  z-index: 4000;
  pointer-events: none;
  animation: confettiFall 1.6s cubic-bezier(.25,.6,.4,1) forwards;
}
@keyframes confettiFall {
  0% { transform: translateY(-10px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(105vh) rotate(540deg); opacity: 0; }
}

/* ============================================================
   v23.7 — WOW 2 : bandeau URGENCE TRAFIC + comparateur routes
   ============================================================ */
/* v272.218 (Bob : « un bouton [URGENCE] mal placé au milieu de la »
   « carte ») : la barre traverse EN HAUT de la carte — sous la pube
   du haut, à l'écart des pouces, JAMAIS au centre de la carte.
   Traversée écourtée à 10 s (lisible, puis ailleurs). */
.urgent-banner.urgent-flash {
  position: fixed;
  top: auto;
  bottom: 46vh; /* 46% du bas : sous la pub du haut, jamais au centre */
  left: 100%;
  transform: translateY(0);
  width: max-content;
  max-width: min(72vw, 560px);
  margin: 0;
  padding: 0.75rem 1.2rem;
  border: 2px solid #fff;
  border-radius: 14px;
  background: linear-gradient(90deg, #c1121f, #e2492f, #c1121f);
  z-index: 9500;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0,0,0,0.45);
  cursor: pointer;
  /* v272.218 : traversée écourtée à 10 s (avant 30 s) — lisible, et
     libère la carte plus vite. */
  animation: urgentCross 10s linear forwards;
}
@keyframes urgentCross {
  0%   { left: 100%; opacity: 1; transform: translateY(0); }
  4%   { opacity: 1; }
  5%   { opacity: 0.45; }  /* flash d'avertissement */
  6%   { opacity: 1; }
  7%   { opacity: 0.45; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { left: -100%; opacity: 0; transform: translateY(0); } /* sort à gauche → retirée du DOM */
}
/* v272.201 (Bob : « la grande ralentit, le texte intérieur presse — on
   gagne du temps des DEUX côtés ») : la barre traverse ENCORE PLUS lentement
   (22 → 30 s) : plus de temps pour lire le message pendant la traversée ; et
   le marquee interne accélère (14 → 9 s) : le message complet revient plus
   vite devant les yeux. Une traversée complète laisse donc ~1 lecture 3×. */
/* v272.218 (Bob) : la traversée remplacée ci-dessus = 10 s, calée
   SOUS la pub du haut, jamais au centre. */
/* v272.245 (Bob 13 oct : « elle défile trop rapidement … comme
   auparavant quand tout allait bien ») — retour à la traversée LENTE
   30 s de la v272.201/205 que Bob relisait bien ; le 10 s de la 218
   allait trop vite en voiture. */
.urgent-banner.urgent-flash { animation: urgentCross 30s linear forwards; }
.urgent-banner.urgent-flash.urgent-flash-out {
  transition: opacity 0.5s ease, transform 0.5s ease;
  opacity: 0 !important;
  transform: translateY(0) translateX(-30px) !important;
}
.urgent-banner.urgent-flash b { color: #fff; }
.urgent-banner.urgent-flash .ub-txt {
  display: inline-block;
  white-space: nowrap;
  color: #fff;
  font-weight: 800;
}
/* v272.79 (Bob) : LE TEXTE DÉFILE DANS LA BARRE — la barre traverse
   l'écran, mais son CONTENU défile aussi (marquee interne) : on peut
   lire le message complet même si la barre est plus courte que le texte. */
/* v272.80 (Bob, batch-14) : MARQUEE RÉEL — la v272.79 défilait de « 0 à
   -100% de SON PROPRE span » partant à 100% du parent : reste visible,
   immobile (captures 20h50/20h53 : texte figé). Technique fiable :
   span cloné 2× (wow2.js), largeur max-content, translation de 0 à
   -50% → défilement continu sans trou. */
.urgent-banner.urgent-flash .ub-txt {
  max-width: min(52vw, 420px);
  overflow: hidden;
  vertical-align: middle;
}
.urgent-banner.urgent-flash .ub-txt span {
  display: inline-block;
  white-space: nowrap;
  padding-right: 2.5rem;
  /* v272.205 (Bob, retour FINAL : « je suis PAS capable de lire ») — on
     repasse à UNE vitesse LENTE et LISIBLE : 18 s. La demande v272.201
     « presser le marquee » faisait 9 s : trop vite pour lire en
     conduisant. La bonne valeur = celle qu'on peut LIRE, point. La
     traversée de la barre reste lente (30 s) : le message fait au moins
     1,5 passage complet pendant une traversée. */
  /* v272.227 (Bob : « on l'avait bien à un moment donné, la vitesse était
     bonne, on pouvait lire au complet l'urgence pendant que la bande
     défilait ») — retour à la vitesse lisible : 18 s → 12 s. La bande
     elle-même garde sa traversée 10 s : chaque traversée montre le
     message presque une fois et demie. Essai à valider par Bob. */
  /* v272.245 (Bob 13 oct : « trop rapide, comme avant quand tout
     allait bien ») — retour à la valeur VALIDÉE de la v272.205 :
     18 s lisible. La traversée repasse à 30 s. */
  animation: urgentInTxt 18s linear infinite;
}
@keyframes urgentInTxt {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.urgent-banner.urgent-flash .ub-cta { color: #ffe08a; white-space: nowrap; }
.urgent-banner.urgent-flash .ub-pulse { background: #fff; animation: urgentFlashDot 0.8s infinite; }
@keyframes urgentFlashDot { 0%,100% { opacity: 1; } 50% { opacity: 0.2; } }
/* fin de l'ancien style bannière pleine largeur */
.urgent-banner {
  display: flex; align-items: center; gap: 0.55rem; width: calc(100% - 0.9rem);
  margin: 0.45rem 0.45rem 0.25rem; padding: 0.5rem 0.7rem;
  border: 1.5px solid #c0392b; border-radius: 12px; cursor: pointer;
  background: linear-gradient(90deg, #fdeceb, #fff5f4);
  font: inherit; text-align: left;
  animation: urgentPulse 2.2s ease-in-out infinite;
}
@keyframes urgentPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(226, 73, 47, 0.35); }
  50% { box-shadow: 0 0 0 6px rgba(226, 73, 47, 0.12); }
}
.urgent-banner .ub-pulse {
  width: 0.65rem; height: 0.65rem; border-radius: 50%; background: #e2492f; flex: 0 0 auto;
  animation: ubBlink 1.1s ease-in-out infinite;
}
@keyframes ubBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.urgent-banner b { color: #c0392b; font-size: 0.76rem; letter-spacing: 0.04em; white-space: nowrap; }
.urgent-banner .ub-txt {
  font-size: 0.78rem; color: var(--ink); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.urgent-banner .ub-cta { margin-left: auto; font-size: 0.7rem; font-weight: 800; color: var(--accent, #d64500); white-space: nowrap; }

/* Comparateur d'itinéraires (fiche détail) */
.route-compare {
  margin-top: 0.7rem; padding: 0.55rem 0.7rem; border-radius: 12px;
  border: 1px dashed var(--line-strong, #d8d4c9); background: var(--panel);
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.78rem;
}
.route-compare .rc-title { font-weight: 800; }
.route-compare .rc-load { color: var(--ink-soft); }
.route-compare .rc-us b { color: #1c8a4c; }
.route-compare .rc-others { color: var(--ink-soft); font-size: 0.68rem; }
.route-compare a {
  font-weight: 700; font-size: 0.72rem; padding: 0.3rem 0.6rem;
  border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--ink);
}
.route-compare a:hover { border-color: var(--accent, #d64500); color: var(--accent, #d64500); }