/* CARTE INTERACTIVE (publique) — CSS brut hors chaîne SCSS, copié tel quel par Encore :
ses tokens sont définis localement sur .umpp-carte-app. */

.umpp-carte-app {
  --vert: #95b134;
  --vert-fonce: #6d8620;
  --vert-sombre: #4e6116;
  --brun: #705e47;
  --encre: #123a2f;
  --papier: #f4f7f2;

  /* Palette complète de la carte (jamais de couleur littérale hors de ce bloc) */
  --blanc: #ffffff;
  --scene: #e8ebe8;
  --ambre: #d4730d;
  --ambre-fonce: #a85800;
  --texte-olive: #55663f;
  --texte-aide: #4a6152;
  --texte-panneau: #2c4438;
  --sur-vert: #22300a;
  --filet: #d7e0d2;
  --filet-fort: #b9c8b2;
  --stat-1: #f2f6ea;
  --stat-2: #e7efd9;
  --stat-bord: #dde7cd;
  --alerte-fond: #fdf1e3;
  --alerte-bord: #e8c9a2;
  --alerte-texte: #7a4b12;
  --lavis-1: #3a84b0;
  --lavis-2: #60adcd;
  --lavis-3: #296a96;
  --lavis-4: #7ec1dd;
  --lavis-5: #4e97c2;
  --lavis-6: #3d84b4;
  --sombre-surface: #242a2c;
  --sombre-panneau: #1c2123;
  --sombre-texte: #ecefee;
  --sombre-texte-2: #a9b2b0;
  --sombre-texte-panneau: #d7ddda;
  --sombre-stat-1: #22281f;
  --sombre-stat-2: #1c2317;
  --sombre-alerte-fond: #3a2a12;
  --sombre-alerte-bord: #6b4a1c;
  --sombre-alerte-texte: #f0c896;

  /* Rapport exact de l'image : la scène ne se déforme jamais. */
  --ratio: 2.181;
  /* Hauteur de l'en-tête + ligne d'aide, déduite de la fenêtre. */
  --chrome: 120px;

  --rayon: 16px;
  --ombre: 0 18px 40px -22px color-mix(in srgb, var(--encre) 45%, transparent);

  /* Aller rapide qui se pose (réponse au clic), retour plus long et symétrique. */
  --duree-cadrage: .85s;
  --duree-retour: 1s;
  --courbe: cubic-bezier(.22, .8, .24, 1);
  --courbe-retour: cubic-bezier(.36, 0, .22, 1);
}

.umpp-carte-app, .umpp-carte-app * { box-sizing: border-box; }

.umpp-carte-app {
  background: var(--papier);
  color: var(--encre);
  font: 400 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.umpp-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* --- En-tête --- */

/* Cartouche en bas à gauche, dans la fenêtre (insensible au zoom). Purement décoratif : ne capte pas le curseur. */
.umpp-entete {
  /* Repli sans unités de conteneur. */
  --logo: 74px;
  --bulle: 1rem;
  position: absolute;
  z-index: 4;
  bottom: clamp(10px, 1.5vw, 18px);
  left: clamp(10px, 1.5vw, 18px);
  max-width: calc(100% - clamp(20px, 3vw, 36px));
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  pointer-events: none;
}

.umpp-entete__declencheur {
  flex: none;
  display: block;
  width: var(--logo); height: var(--logo);
  border-radius: calc(var(--logo) * .24);
}

.umpp-entete__declencheur img {
  width: 100%; height: 100%;
  display: block;
  border-radius: calc(var(--logo) * .24);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blanc) 90%, transparent), 0 12px 26px -12px color-mix(in srgb, var(--encre) 80%, transparent);
}

.umpp-entete__bulle {
  padding: calc(var(--bulle) * .55) calc(var(--bulle) * 1.1);
  border-radius: calc(var(--bulle) * .85);
  background: color-mix(in srgb, var(--blanc) 90%, transparent);
  backdrop-filter: blur(8px) saturate(1.15);
  box-shadow: 0 10px 26px -16px color-mix(in srgb, var(--encre) 70%, transparent);
}

/* Planchers de lisibilité du site (--text-*, repli en px hors du site) : la bulle rétrécit, pas le texte sous 13/14px. */
.umpp-entete__sur {
  margin: 0;
  font-size: max(var(--text-3xs, 13px), calc(var(--bulle) * .74));
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vert-sombre);
}

.umpp-entete__titre {
  margin: 1px 0 0;
  font-size: max(var(--text-xs, 14px), calc(var(--bulle) * 1.42));
  line-height: 1.12;
  letter-spacing: -.01em;
  text-wrap: balance;
}

@supports (width: 1cqw) {
  .umpp-entete {
    --logo: clamp(34px, 5.8cqw, 74px);
    --bulle: clamp(.5rem, .86cqw, 1.09rem);
  }
}

/* Surtitre à 13px trop large pour une petite carte : le titre de la bulle suffit. */
@media (max-width: 600px) {
  .umpp-entete__sur { display: none; }
}

/* --- Carte --- */

.umpp-carte {
  position: relative;
  flex: 1;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(12px, 2vw, 22px) clamp(16px, 3vw, 34px) 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* safe : un contenu qui déborde ne repousse pas le haut hors de portée. */
  justify-content: safe center;
}

/* Cadre fluide sans palier : largeur ≤ hauteur × rapport du dessin, hauteur ≤ largeur / --ratio-mini.
Paysage sur grand écran, portrait sur téléphone ; dès que le dessin déborde, la carte devient déplaçable. */
.umpp-carte__scene {
  /* Le plus portrait que le cadre puisse devenir. */
  --ratio-mini: .72;
  position: relative;
  /* size (et non inline-size) : le cartouche et la scène lisent aussi la hauteur. */
  container-type: size;
  width: min(100%, calc((100svh - var(--chrome)) * var(--ratio-carte, 2.183)));
  aspect-ratio: var(--ratio-mini);
  max-height: calc(100svh - var(--chrome));
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--rayon);
  background: var(--scene);
  box-shadow: var(--ombre);
  /* Geste horizontal = déplacer la carte, vertical = défiler la page. */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

/* Le dessin garde son rapport et déborde du cadre, jamais l'inverse. */
.umpp-carte__stage {
  --z: 1;
  --px: 0px;
  --py: 0px;
  --inv: 1;
  position: absolute;
  top: 0; left: 0;
  /* Repli sans unités de conteneur. */
  height: 100%;
  aspect-ratio: var(--ar-carte, 1853 / 849);
  /* Référence des marqueurs : la largeur du dessin rendu (même rapport au paysage, entier ou débordant). */
  container-type: inline-size;
  /* Origine en haut à gauche : translation = simple décalage en pixels (cadrage comme glisser). */
  transform: translate(var(--px), var(--py)) scale(var(--z));
  transform-origin: 0 0;
  transition: transform var(--duree-cadrage) var(--courbe);
  will-change: transform;
}

/* Le dessin couvre exactement le cadre (pas de bandes vides). */
@supports (width: 1cqh) {
  .umpp-carte__stage {
    width: max(100cqw, calc(100cqh * var(--ratio-carte, 2.183)));
    height: max(100cqh, calc(100cqw / var(--ratio-carte, 2.183)));
    aspect-ratio: auto;
  }
}

.umpp-carte__scene[data-deplacable] { cursor: grab; }
.umpp-carte__scene[data-saisi] { cursor: grabbing; }
.umpp-carte__scene[data-saisi] .umpp-carte__stage { transition: none; }

/* data-ouvert est retiré dès le début de la fermeture : scène et marqueurs restent solidaires au retour. */
.umpp-carte:not([data-ouvert]) .umpp-carte__stage,
.umpp-carte:not([data-ouvert]) .umpp-marqueur {
  transition-duration: var(--duree-retour);
  transition-timing-function: var(--courbe-retour);
}

/* Image posée par carte.js (fond saisonnier de CartePayload). */
.umpp-carte__fond {
  position: absolute;
  inset: 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: var(--scene);
}

/* --- Eau animée : masque du tracé de la Seine (river-mask-{saison}.png), l'animation s'arrête aux berges --- */

.umpp-carte__eau {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* mask-image posé par carte.js (nom de fichier à empreinte). */
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Sans masque : pas d'eau animée du tout. */
@supports not ((mask-image: url(#a)) or (-webkit-mask-image: url(#a))) {
  .umpp-carte__eau { display: none; }
}

.umpp-carte__lavis,
.umpp-carte__courant,
.umpp-carte__reflet,
.umpp-carte__eclats {
  position: absolute;
  inset: -25%;
  display: block;
}

/* 1. Lavis : deux nappes de bleu en multiply, le fleuve peint reste visible dessous. */
.umpp-carte__lavis {
  background:
    radial-gradient(60% 120% at 20% 30%, color-mix(in srgb, var(--lavis-1) 60%, transparent), color-mix(in srgb, var(--lavis-1) 0%, transparent) 70%),
    radial-gradient(50% 110% at 70% 70%, color-mix(in srgb, var(--lavis-2) 50%, transparent), color-mix(in srgb, var(--lavis-2) 0%, transparent) 72%),
    radial-gradient(70% 130% at 45% 15%, color-mix(in srgb, var(--lavis-3) 40%, transparent), color-mix(in srgb, var(--lavis-3) 0%, transparent) 68%),
    linear-gradient(150deg, var(--lavis-4), var(--lavis-5) 60%, var(--lavis-6));
  background-size: 340px 210px, 260px 170px, 420px 250px, 100% 100%;
  mix-blend-mode: multiply;
  opacity: .62;
  animation: umpp-lavis 23s ease-in-out infinite alternate;
}

@keyframes umpp-lavis {
  from { background-position: 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 120px -40px, -90px 50px, 60px 30px, 0 0; }
}

/* 2. Crêtes : traits ondulés flous (flou cuit dans le SVG), trois trames de périodes 210/150/96px sans
diviseur commun, dont une à contre-courant. */
.umpp-carte__courant {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='104'%3E%3Cfilter id='f' x='-15%25' y='-15%25' width='130%25' height='130%25'%3E%3CfeGaussianBlur stdDeviation='1.1'/%3E%3C/filter%3E%3Cg filter='url(%23f)' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M14 24c9-7 18-7 27 0s18 7 27 0'/%3E%3Cpath d='M116 16c8-6 16-6 24 0s16 6 24 0'/%3E%3Cpath d='M44 66c9-7 18-7 27 0s18 7 27 0'/%3E%3Cpath d='M140 80c8-6 16-6 24 0s16 6 24 0'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='78'%3E%3Cfilter id='f' x='-15%25' y='-15%25' width='130%25' height='130%25'%3E%3CfeGaussianBlur stdDeviation='.9'/%3E%3C/filter%3E%3Cg filter='url(%23f)' fill='none' stroke='%231d5f88' stroke-width='2.4' stroke-linecap='round' opacity='.75'%3E%3Cpath d='M18 52c7-5 14-5 21 0s14 5 21 0'/%3E%3Cpath d='M86 26c6-4 12-4 18 0s12 4 18 0'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='58'%3E%3Cfilter id='f' x='-15%25' y='-15%25' width='130%25' height='130%25'%3E%3CfeGaussianBlur stdDeviation='.7'/%3E%3C/filter%3E%3Cg filter='url(%23f)' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' opacity='.6'%3E%3Cpath d='M10 40c5-4 10-4 15 0s10 4 15 0'/%3E%3Cpath d='M56 18c4-3 9-3 13 0s9 3 13 0'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 210px 104px, 150px 78px, 96px 58px;
  opacity: .52;
  animation: umpp-courant 17s linear infinite;
}

@keyframes umpp-courant {
  from { background-position: 0 0, 0 0, 0 0; }
  to   { background-position: 210px -26px, -150px 39px, 96px 12px; }
}

/* 3. Reflet : bande de lumière lente d'amont en aval, cycle de 29s. */
.umpp-carte__reflet {
  background: linear-gradient(103deg,
    color-mix(in srgb, var(--blanc) 0%, transparent) 42%,
    color-mix(in srgb, var(--blanc) 50%, transparent) 50%,
    color-mix(in srgb, var(--blanc) 0%, transparent) 58%);
  background-size: 260% 100%;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  opacity: .55;
  animation: umpp-reflet 29s cubic-bezier(.45, 0, .55, 1) infinite;
}

@keyframes umpp-reflet {
  from { background-position: -130% 0; }
  to   { background-position: 230% 0; }
}

/* 4. Grain : granulation du pigment sur le papier. */
.umpp-carte__eclats {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23g)' opacity='.42'/%3E%3C/svg%3E");
  background-repeat: repeat;
  mix-blend-mode: overlay;
  animation: umpp-eclats 11s ease-in-out infinite alternate;
}

@keyframes umpp-eclats {
  from { opacity: .3; background-position: 0 0; }
  to   { opacity: .5; background-position: 22px 14px; }
}

/* --- Marqueurs : point sans dimension sur le spot, badge et étiquette débordent ; --inv garde leur taille au zoom --- */

.umpp-carte__marqueurs {
  position: absolute;
  inset: 0;
  /* Repli sans unités de conteneur. */
  --marqueur: 46px;
  --etiquette: 15px;
}

@supports (width: 1cqw) {
  .umpp-carte__marqueurs {
    /* 3.7cqw = 46px sur grand écran, bornes pour téléphone et très grand écran. */
    --marqueur: clamp(21px, 3.7cqw, 46px);
    /* Plancher 12px : sous cette taille, les noms de villes ne se lisent plus. */
    --etiquette: clamp(12px, 1.2cqw, 15px);
  }
}

.umpp-marqueur {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: 0; height: 0;
  padding: 0; margin: 0; border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transform: scale(var(--inv, 1));
  /* L'opacité transite aussi (sinon les marqueurs estompés reviennent d'un coup). */
  transition:
    transform var(--duree-cadrage) var(--courbe),
    opacity .45s ease;
}

/* Cible tactile indépendante de la taille visible. */
.umpp-marqueur::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: max(var(--marqueur), 40px);
  height: max(var(--marqueur), 40px);
  translate: -50% -50%;
}

.umpp-marqueur:focus { outline: none; }

.umpp-marqueur__badge {
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  width: var(--marqueur); height: var(--marqueur);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--vert);
  color: var(--brun);
  --cerne-repos:
    0 0 0 calc(var(--marqueur) * .087) color-mix(in srgb, var(--blanc) 90%, transparent),
    0 8px 18px -6px color-mix(in srgb, var(--encre) 60%, transparent);
  --cerne-eveil:
    0 0 0 calc(var(--marqueur) * .135) var(--blanc),
    0 8px 20px -6px color-mix(in srgb, var(--encre) 60%, transparent);
  box-shadow: var(--cerne-repos);
  transition: background .25s, scale .25s;
}

/* Images non draggables : le glisser-déposer natif coupe le flux d'événements du pointeur. */
.umpp-carte__scene img { -webkit-user-drag: none; }

.umpp-marqueur__glyphe {
  width: calc(var(--marqueur) * .65);
  height: calc(var(--marqueur) * .67);
  object-fit: contain;
  /* Silhouette brune passée au blanc par filtre pour le marqueur actif. */
  transition: filter .25s;
}

.umpp-marqueur[aria-pressed="true"] .umpp-marqueur__glyphe { filter: brightness(0) invert(1); }

/* Onde blanche depuis le cerne du badge ; décalage --i (carte.js) pour que les halos ne battent pas ensemble. */
.umpp-marqueur__halo {
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  width: var(--marqueur); height: var(--marqueur);
  border-radius: 50%;
  border: max(1.5px, calc(var(--marqueur) * .07)) solid color-mix(in srgb, var(--blanc) 95%, transparent);
  opacity: 0;
  animation: umpp-halo 4.2s cubic-bezier(.16, .7, .3, 1) infinite;
  animation-delay: calc(var(--i, 0) * .5s);
  pointer-events: none;
}

@keyframes umpp-halo {
  0%   { opacity: .85; scale: 1; }
  55%  { opacity: 0;   scale: 1.75; }
  100% { opacity: 0;   scale: 1.75; }
}

/* Le cerne respire au même rythme que l'onde. */
.umpp-marqueur__badge {
  animation: umpp-cerne 4.2s cubic-bezier(.16, .7, .3, 1) infinite;
  animation-delay: calc(var(--i, 0) * .5s);
}

@keyframes umpp-cerne {
  0%, 55%, 100% { box-shadow: var(--cerne-repos); }
  12%           { box-shadow: var(--cerne-eveil); }
}

.umpp-marqueur__nom {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  white-space: nowrap;
  padding: calc(var(--etiquette) * .33) calc(var(--etiquette) * .73);
  border-radius: 999px;
  background: color-mix(in srgb, var(--blanc) 90%, transparent);
  color: var(--encre);
  font-size: var(--etiquette);
  font-weight: 650;
  letter-spacing: -.01em;
  box-shadow: 0 4px 12px -6px color-mix(in srgb, var(--encre) 50%, transparent);
  transition: background .25s, color .25s, opacity .2s ease;
}

.umpp-marqueur[data-cote="droite"] .umpp-marqueur__nom { left: calc(var(--marqueur) * .65); }
.umpp-marqueur[data-cote="gauche"] .umpp-marqueur__nom { right: calc(var(--marqueur) * .65); }

.umpp-marqueur:hover .umpp-marqueur__badge,
.umpp-marqueur:focus-visible .umpp-marqueur__badge {
  background: var(--vert-fonce);
  scale: 1.12;
}

.umpp-marqueur:focus-visible .umpp-marqueur__badge {
  box-shadow: 0 0 0 4px var(--blanc), 0 0 0 7px var(--encre);
}

.umpp-marqueur:hover .umpp-marqueur__nom,
.umpp-marqueur:focus-visible .umpp-marqueur__nom {
  background: var(--encre);
  color: var(--blanc);
}

.umpp-marqueur[aria-pressed="true"] .umpp-marqueur__badge {
  background: var(--encre);
  color: var(--blanc);
  scale: 1.18;
}

.umpp-marqueur[aria-pressed="true"] .umpp-marqueur__nom {
  background: var(--encre);
  color: var(--blanc);
}

.umpp-marqueur[aria-pressed="true"] .umpp-marqueur__halo,
.umpp-marqueur[aria-pressed="true"] .umpp-marqueur__badge { animation: none; }
.umpp-marqueur[aria-pressed="true"] .umpp-marqueur__halo { opacity: 0; }
.umpp-marqueur:hover .umpp-marqueur__badge,
.umpp-marqueur:focus-visible .umpp-marqueur__badge { animation: none; }

/* Ville hors cadre : représentée par la pastille du radar. */
.umpp-marqueur[data-hors] {
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

/* Un spot ouvert : les autres s'estompent. */
.umpp-carte[data-ouvert] .umpp-marqueur:not([aria-pressed="true"]) { opacity: .55; }
.umpp-carte[data-ouvert] .umpp-marqueur:not([aria-pressed="true"]):hover { opacity: 1; }

/* Prochaine sortie programmée : badge ambre. */
.umpp-marqueur[data-prochaine-sortie] .umpp-marqueur__badge {
  background: var(--ambre);
}
.umpp-marqueur[data-prochaine-sortie] .umpp-marqueur__halo {
  border-color: color-mix(in srgb, var(--ambre) 90%, transparent);
}
.umpp-marqueur[data-prochaine-sortie] .umpp-marqueur__glyphe {
  filter: brightness(0) invert(1);
}
.umpp-marqueur[data-prochaine-sortie]:hover .umpp-marqueur__badge,
.umpp-marqueur[data-prochaine-sortie]:focus-visible .umpp-marqueur__badge {
  background: var(--ambre-fonce);
}

/* --- Radar : flèches sur le bord pour les villes sorties du cadre --- */

.umpp-radar {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

/* La pastille se range contre le bord de sortie, sans déborder. */
.umpp-radar__ville {
  position: absolute;
  left: var(--rx); top: var(--ry);
  translate: -50% -50%;
  display: flex;
  align-items: center;
  gap: 5px;
  /* 70 % : « Saint-Martin-la-Garenne » tient en entier au plancher de 12px sur téléphone. */
  max-width: 70%;
  min-height: 32px;
  padding: 4px 10px 4px 7px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--encre) 90%, transparent);
  color: var(--blanc);
  font: inherit;
  font-size: clamp(12px, 1.15cqw, var(--text-3xs, 13px));
  font-weight: 650;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--encre) 80%, transparent);
  opacity: 0;
  scale: .9;
  animation: umpp-radar-entree .35s var(--courbe) forwards;
}

@keyframes umpp-radar-entree {
  to { opacity: 1; scale: 1; }
}

.umpp-radar__ville[data-bord="gauche"] { translate: 0 -50%; }
.umpp-radar__ville[data-bord="droite"] { translate: -100% -50%; }
.umpp-radar__ville[data-bord="haut"]   { translate: -50% 0; }
.umpp-radar__ville[data-bord="bas"]    { translate: -50% -100%; }

.umpp-radar__ville:hover { background: var(--vert-sombre); }
.umpp-radar__ville:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--blanc), 0 0 0 4px var(--encre);
}

/* La flèche porte la direction. */
.umpp-radar__fleche {
  flex: none;
  width: 1.15em; height: 1.15em;
  rotate: var(--angle);
  fill: var(--vert);
}

.umpp-carte__aide {
  margin: 14px auto 0;
  text-align: center;
  font-size: .95rem;
  color: var(--texte-aide);
  /* Réapparaît une fois la carte revenue en place. */
  transition: opacity .35s ease .45s;
}

.umpp-carte__legende {
  margin: 6px auto 0;
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: var(--text-xs, 14px);
  color: var(--texte-aide);
  transition: opacity .35s ease .45s;
}

.umpp-legende__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.umpp-legende__item::before {
  content: '';
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--blanc) 90%, transparent), 0 2px 6px -2px color-mix(in srgb, var(--encre) 40%, transparent);
}

.umpp-legende__item--vert::before  { background: var(--vert); }
.umpp-legende__item--orange::before { background: var(--ambre); }

/* Grand écran : la ligne s'efface mais garde sa place (sinon la carte saute au centrage). */
.umpp-carte[data-ouvert] .umpp-carte__aide,
.umpp-carte[data-ouvert] .umpp-carte__legende {
  opacity: 0;
  transition: opacity .2s ease;
}

.umpp-carte__erreur {
  margin: 14px auto 0;
  max-width: 46ch;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--alerte-fond);
  border: 1px solid var(--alerte-bord);
  color: var(--alerte-texte);
  text-align: center;
}

/* --- Panneau d'un spot --- */

.umpp-panneau {
  position: absolute;
  z-index: 5;
  right: clamp(16px, 3vw, 34px);
  top: 0;
  width: min(38%, 430px);
  max-height: calc((100svh - var(--chrome)));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 22px 24px;
  border-radius: var(--rayon);
  background: color-mix(in srgb, var(--blanc) 95%, transparent);
  backdrop-filter: blur(6px);
  box-shadow: 0 24px 60px -28px color-mix(in srgb, var(--encre) 70%, transparent);
  opacity: 0;
  translate: 22px 0;
  scale: .985;
  transform-origin: 70% 40%;
  /* Sortie lente, calée sur le retour de la carte. */
  transition:
    opacity .62s ease,
    translate .62s var(--courbe-retour),
    scale .62s var(--courbe-retour);
}

.umpp-panneau[hidden] { display: none; }

/* Entrée franche. */
.umpp-panneau.umpp-est-visible {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  transition:
    opacity .3s ease-out,
    translate .4s var(--courbe),
    scale .4s var(--courbe);
}

.umpp-panneau__retour {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  padding: 7px 13px 7px 9px;
  border: 1px solid var(--filet);
  border-radius: 999px;
  background: var(--blanc);
  color: var(--encre);
  font: inherit;
  font-size: var(--text-xs, 14px);
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}

.umpp-panneau__retour:hover { background: var(--papier); border-color: var(--filet-fort); }
.umpp-panneau__retour:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; }

.umpp-panneau__sur {
  margin: 1rem 0;
  font-size: var(--text-3xs, 13px);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vert-sombre);
}

.umpp-panneau__titre {
  margin: 2px 0 16px;
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  line-height: 1.1;
  letter-spacing: -.02em;
}

.umpp-panneau__titre:focus { outline: none; }

.umpp-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.umpp-stats__item {
  padding: 11px 12px;
  border-radius: 12px;
  background: linear-gradient(170deg, var(--stat-1), var(--stat-2));
  border: 1px solid var(--stat-bord);
}

.umpp-stats__valeur {
  display: block;
  font-size: 1.5rem;
  font-weight: 750;
  line-height: 1.05;
  color: var(--vert-sombre);
  font-variant-numeric: tabular-nums;
}

.umpp-stats__libelle {
  display: block;
  margin-top: 3px;
  font-size: var(--text-xs, 14px);
  line-height: 1.25;
  color: var(--texte-olive);
}

.umpp-panneau__texte {
  margin: 0 0 24px;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--texte-panneau);
}

.umpp-cta {
  display: grid;
  gap: 8px;
}

.umpp-cta:not(:empty) {
  margin-top: 12px;
}

.umpp-cta__bouton {
  display: block;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1.5px solid var(--encre);
  color: var(--encre);
  background: var(--blanc);
  font-size: .95rem;
  font-weight: 650;
  text-align: center;
  text-decoration: none;
  transition: background .2s, color .2s, translate .2s;
}

.umpp-cta__bouton:hover { translate: 0 -1px; background: var(--papier); }
.umpp-cta__bouton:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }

.umpp-cta__bouton--plein {
  background: var(--vert);
  border-color: var(--vert);
  color: var(--sur-vert);
}

.umpp-cta__bouton--plein:hover { background: var(--vert-sombre); border-color: var(--vert-sombre); color: var(--blanc); }

/* --- Prochaine sortie de la ville + bannière de fin de saison --- */

.umpp-panneau__sortie {
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(170deg, var(--stat-1), var(--stat-2));
  border: 1px solid var(--stat-bord);
  display: grid;
  gap: 2px;
}

.umpp-panneau__sortie[hidden] { display: none; }

.umpp-panneau__sortie-sur {
  font-size: var(--text-3xs, 13px);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vert-sombre);
}

.umpp-panneau__sortie-date {
  font-size: 1.05rem;
  color: var(--encre);
  letter-spacing: -.01em;
}

.umpp-panneau__sortie-places { font-size: var(--text-xs, 14px); color: var(--texte-olive); }

.umpp-panneau__sortie-vide {
  font-size: .9rem;
  color: var(--texte-olive);
}

.umpp-carte__saison {
  margin: 14px auto 0;
  max-width: 52ch;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--alerte-fond);
  border: 1px solid var(--alerte-bord);
  color: var(--alerte-texte);
  text-align: center;
  font-size: .92rem;
}

.umpp-carte__saison[hidden] { display: none; }

/* --- Écrans étroits : le panneau devient une feuille basse dans le flux, la carte se recadre vers le haut --- */

@media (max-width: 860px) {
  .umpp-carte-app { --chrome: 104px; }

  .umpp-entete { gap: 9px; }
  .umpp-entete__sur { letter-spacing: .1em; }

  .umpp-panneau {
    position: static;
    width: auto;
    max-height: none;
    overflow: visible;
    margin-top: 14px;
    translate: 0 14px;
    box-shadow: 0 18px 40px -26px color-mix(in srgb, var(--encre) 60%, transparent);
  }

  .umpp-carte__aide { font-size: .88rem; }

  /* Ici la ligne est repliée (le panneau vient juste dessous). */
  .umpp-carte[data-ouvert] .umpp-carte__aide,
  .umpp-carte[data-ouvert] .umpp-carte__legende {
    height: 0;
    margin: 0;
    overflow: hidden;
  }

  /* Étiquettes masquées par défaut, révélées au survol/focus/ouverture : au plus une visible, aucun chevauchement. */
  .umpp-marqueur__nom {
    opacity: 0;
    pointer-events: none;
  }

  .umpp-marqueur:hover .umpp-marqueur__nom,
  .umpp-marqueur:focus-visible .umpp-marqueur__nom,
  .umpp-marqueur[aria-pressed="true"] .umpp-marqueur__nom {
    opacity: 1;
  }
}

/* --- Mouvement réduit : l'eau se fige, les cadrages sont instantanés --- */

@media (prefers-reduced-motion: reduce) {
  .umpp-carte__lavis,
  .umpp-carte__courant,
  .umpp-carte__reflet,
  .umpp-carte__eclats,
  .umpp-marqueur__halo,
  .umpp-marqueur__badge { animation: none; }

  .umpp-carte__eclats { opacity: .38; }
  /* Reflet figé en milieu de course. */
  .umpp-carte__reflet { background-position: 50% 0; }

  .umpp-carte__stage,
  .umpp-marqueur,
  .umpp-panneau,
  .umpp-entete__bulle,
  .umpp-entete__declencheur,
  .umpp-carte__legende {
    transition-duration: .01ms;
  }

  .umpp-radar__ville { animation-duration: .01ms; }
}

/* --- Grand écran : la carte tient entière, sans déplacement --- */

@media (min-width: 861px) {
  .umpp-carte__scene { --ratio-mini: var(--ratio-carte, 2.183); }
}

/* --- Intégrée dans une page (.umpp-carte-app--embed) : bande panoramique dans le flux --- */

.umpp-carte-app--embed { min-height: 0; }
.umpp-carte-app--embed .umpp-carte { padding-top: 0; }
.umpp-carte-app--embed .umpp-carte__scene { max-height: min(68vh, 620px); }

/* --- Plein écran (carte-pleinecran.js) : API Fullscreen, ou classe de repli --- */

.umpp-btn-pleinecran {
  position: absolute;
  top: .75rem;
  right: .75rem;
  z-index: 20;
  padding: .45rem .55rem;
  border: 1px solid color-mix(in srgb, var(--encre) 12%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--blanc) 85%, transparent);
  color: var(--encre);
  line-height: 0;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background .15s;
}

.umpp-btn-pleinecran:hover { background: var(--blanc); }
.umpp-btn-pleinecran:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; }

@media (max-width: 767px) {
  .umpp-btn-pleinecran { display: none; }
}

#umpp-carte-app:fullscreen,
.umpp-carte-app--fullscreen { --chrome: 0px; }

/* Safari < 16.4 : règles à part, une pseudo-classe inconnue invaliderait toute la liste. */
#umpp-carte-app:-webkit-full-screen { --chrome: 0px; }

#umpp-carte-app:-webkit-full-screen .umpp-carte {
  height: 100svh;
  max-width: 100%;
  padding: 0;
}

#umpp-carte-app:-webkit-full-screen .umpp-carte__scene { max-height: 100svh; }

/* Repli sans API Fullscreen : au-dessus de la barre de navigation du site. */
.umpp-carte-app--fullscreen {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 1050);
}

#umpp-carte-app:fullscreen .umpp-carte,
.umpp-carte-app--embed.umpp-carte-app--fullscreen .umpp-carte {
  height: 100svh;
  max-width: 100%;
  padding: 0;
}

#umpp-carte-app:fullscreen .umpp-carte__scene,
.umpp-carte-app--embed.umpp-carte-app--fullscreen .umpp-carte__scene {
  max-height: 100svh;
}

/* --- Sélecteur de thème saisonnier --- */

.umpp-selecteur-theme {
  position: absolute;
  top: clamp(8px, 1.4cqw, 14px);
  left: clamp(8px, 1.4cqw, 14px);
  z-index: 4;
  pointer-events: auto;
}

.umpp-theme-trigger {
  width: clamp(32px, 3.6cqw, 38px);
  height: clamp(32px, 3.6cqw, 38px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--blanc) 80%, transparent);
  backdrop-filter: blur(5px);
  box-shadow: 0 3px 12px -6px color-mix(in srgb, var(--encre) 50%, transparent);
  cursor: pointer;
  font-size: clamp(.85rem, 1.7cqw, 1.15rem);
  line-height: 1;
  transition: background .18s, scale .2s;
}

.umpp-theme-trigger:hover { background: var(--blanc); scale: 1.08; }
.umpp-theme-trigger:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }

.umpp-theme-popup {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--blanc) 90%, transparent);
  backdrop-filter: blur(8px) saturate(1.15);
  box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--encre) 60%, transparent);
  white-space: nowrap;
  opacity: 0;
  scale: .9;
  translate: 0 -6px;
  pointer-events: none;
  transform-origin: top left;
  transition:
    opacity .18s ease,
    scale .2s cubic-bezier(.2, .9, .3, 1.4),
    translate .2s cubic-bezier(.2, .9, .3, 1.4);
}

.umpp-selecteur-theme[data-ouvert] .umpp-theme-popup {
  opacity: 1;
  scale: 1;
  translate: 0 0;
  pointer-events: auto;
}

.umpp-theme-btn {
  display: flex;
  align-items: center;
  gap: .35em;
  padding: .3em .65em;
  border: 1.5px solid transparent;
  border-radius: 7px;
  background: none;
  cursor: pointer;
  font: 600 var(--text-xs, 14px) / 1.35 system-ui, sans-serif;
  color: var(--encre);
  transition: background .15s, color .15s, border-color .15s;
}

.umpp-theme-btn:hover {
  background: color-mix(in srgb, var(--vert) 20%, transparent);
  border-color: color-mix(in srgb, var(--vert) 40%, transparent);
}

.umpp-theme-btn:focus-visible {
  outline: 2px solid var(--encre);
  outline-offset: 2px;
}

/* Blanc sur --vert : 2,4:1 ; --sur-vert : 5,8:1 (règles sombres en fin de fichier). */
.umpp-theme-btn--actif {
  background: var(--vert);
  color: var(--sur-vert);
  border-color: var(--vert-fonce);
}

.umpp-theme-btn--actif:hover {
  background: var(--vert-sombre);
  border-color: var(--vert-sombre);
  color: var(--blanc);
}

/* --- Thème sombre (html[data-theme="dark"]), palette alignée sur les tokens sombres du site ---
--encre n'est pas redéclarée : elle sert aussi de fond de pastille toujours sombre sous texte blanc.
Seuls ses usages en texte sur fond clair littéral sont réécrits. Le thème saisonnier n'est pas affecté. */

[data-theme="dark"] .umpp-carte-app {
  --papier: #1b1f21;
  color: var(--sombre-texte);
}

[data-theme="dark"] .umpp-entete__bulle {
  background: color-mix(in srgb, var(--sombre-surface) 90%, transparent);
}

/* --vert-sombre tombe sous 3:1 sur fond sombre ; --vert y fait 4,5:1 au moins (bulle) et 5,9:1 (panneau). */
[data-theme="dark"] .umpp-entete__sur,
[data-theme="dark"] .umpp-panneau__sur,
[data-theme="dark"] .umpp-panneau__sortie-sur {
  color: var(--vert);
}

/* Fond neutre visible pendant le chargement de l'image saisonnière. */
[data-theme="dark"] .umpp-carte__scene,
[data-theme="dark"] .umpp-carte__fond {
  background-color: var(--sombre-surface);
}

[data-theme="dark"] .umpp-carte__aide,
[data-theme="dark"] .umpp-carte__legende {
  color: var(--sombre-texte-2);
}

[data-theme="dark"] .umpp-carte__erreur,
[data-theme="dark"] .umpp-carte__saison {
  background: var(--sombre-alerte-fond);
  border-color: var(--sombre-alerte-bord);
  color: var(--sombre-alerte-texte);
}

/* Étiquette au repos (pastille claire) ; survol/actif restent sur --encre. */
[data-theme="dark"] .umpp-marqueur__nom {
  background: color-mix(in srgb, var(--sombre-surface) 90%, transparent);
  color: var(--sombre-texte);
}

[data-theme="dark"] .umpp-panneau {
  background: color-mix(in srgb, var(--sombre-panneau) 95%, transparent);
}

[data-theme="dark"] .umpp-panneau__retour {
  background: var(--sombre-surface);
  border-color: color-mix(in srgb, var(--blanc) 16%, transparent);
  color: var(--sombre-texte);
}

[data-theme="dark"] .umpp-panneau__retour:hover {
  border-color: color-mix(in srgb, var(--blanc) 30%, transparent);
}

[data-theme="dark"] .umpp-panneau__texte {
  color: var(--sombre-texte-panneau);
}

[data-theme="dark"] .umpp-stats__item,
[data-theme="dark"] .umpp-panneau__sortie {
  background: linear-gradient(170deg, var(--sombre-stat-1), var(--sombre-stat-2));
  border-color: color-mix(in srgb, var(--blanc) 10%, transparent);
}

/* Le vert d'accent des chiffres manque de contraste sur le fond de tuile sombre. */
[data-theme="dark"] .umpp-stats__valeur {
  color: var(--blanc);
}

[data-theme="dark"] .umpp-stats__libelle,
[data-theme="dark"] .umpp-panneau__sortie-places,
[data-theme="dark"] .umpp-panneau__sortie-vide {
  color: var(--sombre-texte-2);
}

[data-theme="dark"] .umpp-panneau__sortie-date {
  color: var(--sombre-texte);
}

/* Bouton contour : texte clair ; la variante pleine garde son vert (règle suivante). */
[data-theme="dark"] .umpp-cta__bouton:not(.umpp-cta__bouton--plein) {
  background: var(--sombre-surface);
  border-color: color-mix(in srgb, var(--blanc) 30%, transparent);
  color: var(--sombre-texte);
}

[data-theme="dark"] .umpp-theme-trigger {
  background: color-mix(in srgb, var(--sombre-surface) 80%, transparent);
}

[data-theme="dark"] .umpp-theme-trigger:hover {
  background: var(--sombre-surface);
}

[data-theme="dark"] .umpp-theme-popup {
  background: color-mix(in srgb, var(--sombre-panneau) 95%, transparent);
}

[data-theme="dark"] .umpp-theme-btn {
  color: var(--sombre-texte);
}

/* L'icône suit l'encre claire du thème : sans ce fond sombre, elle disparaîtrait sur le blanc. */
[data-theme="dark"] .umpp-btn-pleinecran {
  background: color-mix(in srgb, var(--sombre-surface) 80%, transparent);
  border-color: color-mix(in srgb, var(--blanc) 16%, transparent);
  color: var(--sombre-texte);
}

[data-theme="dark"] .umpp-btn-pleinecran:hover { background: var(--sombre-surface); }

/* Après [data-theme="dark"] .umpp-theme-btn (même spécificité) : le texte clair y ferait 2,1:1 sur --vert. */
[data-theme="dark"] .umpp-theme-btn--actif { color: var(--sur-vert); }
[data-theme="dark"] .umpp-theme-btn--actif:hover { color: var(--blanc); }

/* --encre n'est pas redéclarée en sombre : un anneau --encre y serait invisible (1,1:1). */
[data-theme="dark"] .umpp-panneau__retour:focus-visible,
[data-theme="dark"] .umpp-cta__bouton:focus-visible,
[data-theme="dark"] .umpp-theme-trigger:focus-visible,
[data-theme="dark"] .umpp-theme-btn:focus-visible,
[data-theme="dark"] .umpp-btn-pleinecran:focus-visible {
  outline-color: var(--sombre-texte);
}