/* =========================================================================
   Le coin de Lodie — carte MapLibre GL + vector tiles Protomaps (pmtiles)
   Identité éditoriale rétro-bold + riso : crème papier / terres rose / encre.
   Le rendu géo est peint par WebGL ; ce fichier habille le canvas (cartouche
   magazine, textures riso ancrées au pan, cadre, fiche, liste, barre) et les
   markers (pins) posés par MapLibre.
   ========================================================================= */

/* ---------- Police UI vendorisée (zéro CDN runtime) ---------- */
@font-face { font-family: 'Archivo'; font-weight: 400; font-style: normal; font-display: swap; src: url('assets/archivo/Archivo-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-weight: 500; font-style: normal; font-display: swap; src: url('assets/archivo/Archivo-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-weight: 600; font-style: normal; font-display: swap; src: url('assets/archivo/Archivo-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-weight: 700; font-style: normal; font-display: swap; src: url('assets/archivo/Archivo-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-weight: 800; font-style: normal; font-display: swap; src: url('assets/archivo/Archivo-ExtraBold.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-weight: 900; font-style: normal; font-display: swap; src: url('assets/archivo/Archivo-Black.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-weight: 400 900; font-style: italic; font-display: swap; src: url('assets/archivo/Archivo-Italic.woff2') format('woff2'); }

/* =========================================================================
   COLOR SCHEMES — source de vérité UNIQUE (CSS custom properties).
   Chaque thème ne redéfinit que 7 TOKENS DE BASE ; tout le reste (surfaces,
   filets, ombres, nuances) en dérive via color-mix → aucune duplication.
   Le chrome se reskin seul (tout est en var()). La map lit ces mêmes vars
   côté JS (getComputedStyle) et repeint ses couches (setPaintProperty).
   Tokens de base : --paper --land --land-2 --ink --accent --brand --echo
   ========================================================================= */
:root {
  /* --- Thème « rose » (défaut) --- */
  --paper:    #F4ECDC;   /* fond / mer / halos texte */
  --land:     #F2A0C4;   /* terres */
  --land-2:   #EF93BB;   /* bâtiments / ombré */
  --ink:      #1A1A2E;   /* encre — texte, filets, ombres */
  --accent:   #0E9B6C;   /* accent chrome — titre, toggles, géoloc */
  --brand:    #1A00FF;   /* couleur du wordmark (logo) */
  --echo:     #4F6AE0;   /* anneaux d'écho de côte (carte) */
  --white:    #FFFFFF;   /* routes / graticule / trait de côte — CONSTANT */

  /* Couleurs de catégories — CONSTANTES tous thèmes (identité sémantique des
     pins : food=jaune, café=violet, culture=vert, hôtels=bleu, spots=rouge). */
  --c-food:    #F5B301;
  --c-cafe:    #7A3FF2;
  --c-culture: #0E9B6C;
  --c-hotels:  #2E5FE8;
  --c-spots:   #F0492E;

  --bar-h: 58px;
  --pin: 17px;
  --radius: 14px;

  /* --- Tokens DÉRIVÉS (suivent automatiquement paper/ink/land du thème) --- */
  --paper-2:   color-mix(in srgb, var(--ink) 8%, var(--paper));   /* nuance panneau */
  --ink-soft:  color-mix(in srgb, var(--ink) 55%, transparent);
  /* surfaces frostées = papier du thème translucide (prend la teinte du thème) */
  --surface:   color-mix(in srgb, var(--paper) 80%, transparent);
  --surface-2: color-mix(in srgb, var(--paper) 92%, transparent);
  /* pop-bg = surface OPAQUE des cards/pills/drawer, papier éclairci */
  --pop-bg:    color-mix(in srgb, #fff 42%, var(--paper));
  --hairline:   color-mix(in srgb, var(--ink) 10%, transparent);
  --hairline-2: color-mix(in srgb, var(--ink) 16%, transparent);
  --shadow-soft:  0 10px 34px -12px color-mix(in srgb, var(--ink) 24%, transparent), 0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent);
  --shadow-lift:  0 16px 40px -14px color-mix(in srgb, var(--ink) 30%, transparent), 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent);
}

/* --- Thème « agrumes » (corail + turquoise) --- */
:root[data-theme="agrumes"] {
  --paper: #FBF0DC; --land: #F6935E; --land-2: #F07E42; --ink: #241A12;
  --accent: #12B0A0; --brand: #FF3D2E; --echo: #2FA0B5;
}
/* --- Thème « menthe » (menthe + magenta) --- */
:root[data-theme="menthe"] {
  --paper: #F2F5EC; --land: #8FD9B6; --land-2: #71C79B; --ink: #17241E;
  --accent: #E0308A; --brand: #0E8F5E; --echo: #D14F9A;
}
/* --- Thème « klein » (bleu Klein + jaune soleil) — mer crème inversée --- */
:root[data-theme="klein"] {
  --paper: #F1EFE6; --land: #3A4BD8; --land-2: #2E3EC2; --ink: #12132A;
  --accent: #F5C518; --brand: #1A00FF; --echo: #6E7CE8;
}
/* --- Thème « jaune » (soleil + violet) --- */
:root[data-theme="jaune"] {
  --paper: #FBF6E4; --land: #F7CE3E; --land-2: #EEBE2E; --ink: #2A2410;
  --accent: #6B2FF2; --brand: #6B2FF2; --echo: #7B62E8;
}

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

html, body { height: 100%; }

body {
  font-family: 'Archivo', system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.app {
  height: 100dvh;
  width: 100vw;
  position: relative;              /* ancre les contrôles flottants */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;         /* carte full-bleed, plus de ligne « bar » */
  grid-template-areas: "stage";
  background: var(--land);
}

/* ---------- Scène ---------- */
/* fond ROSE (terre) : zéro flash crème/blank avant que le WebGL peigne, et sert
   de « papier » révélé pendant le dépliage d'intro. */
/* overflow:CLIP (pas hidden) : clippe le drawer hors-cadre SANS créer de conteneur
   scrollable → le navigateur ne peut pas scroller la scène pour « atteindre » le
   drawer masqué (sinon toute la scène + carte + logo glissent → bug de décalage). */
.stage { grid-area: stage; position: relative; overflow: clip; background: var(--land); }

/* Conteneur MapLibre — remplit la scène */
#map { position: absolute; inset: 0; background: var(--land); }
#map .maplibregl-canvas { cursor: grab; }
#map .maplibregl-canvas:active { cursor: grabbing; }
/* on masque les contrôles/attribution natifs (habillage bespoke) */
.maplibregl-control-container { display: none; }

/* ---------- Textures risograph + plis (imprimées SUR le canvas) ----------
   Injectées par JS dans le canvas-container de MapLibre, entre le canvas GL
   (dessous) et les markers (dessus). Leur background-position est ancré à la
   transform de la carte (suit le pan), taille constante (grain net, pas de
   scale au zoom). */
.mapfx { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.mapfx > div { position: absolute; }

/* Moirage d'encre — couverture inégale (grosse échelle, doux).
   Bruit DÉSATURÉ (saturate 0) + multiply léger : subtile variation de densité
   d'encre, JAMAIS d'éclaircissement (soft-light créait un voile « fog »). */
.mottle {
  inset: 0;
  mix-blend-mode: multiply;
  opacity: 0.1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  background-size: 520px 520px;
}

/* Trame demi-teinte inclinée (vraie trame d'impression) */
.halftone {
  inset: -25%;
  transform: rotate(15deg);
  mix-blend-mode: multiply;
  opacity: 0.16;
  background-image: radial-gradient(circle at center, rgba(26, 26, 46, 0.6) 0.9px, transparent 1.5px);
  background-size: 4.6px 4.6px;
}

/* Grain fin — bruit désaturé (grain monochrome, pas de speckle coloré) */
.riso {
  inset: 0;
  mix-blend-mode: multiply;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* ---------- Grain risographique VIVANT (canvas WebGL) ----------
   Injecté dans le canvas-container de MapLibre → au-dessus du canvas GL + des
   textures statiques, SOUS les pins/popover et tout le chrome (z-index bas).
   Grain de film procédural + halftone qui « respire », teinte = --ink (JS
   uniform). Fade-in après l'intro. soft-light = darkening symétrique doux. */
.grain {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.grain--on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .grain { transition: none; } }

/* ---------- Cadre + coins ---------- */
.deco { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.deco::before {
  content: "";
  position: absolute; inset: 14px;
  border: 1.5px dashed color-mix(in srgb, var(--ink) 28%, transparent);
  border-radius: 3px;
}
.deco__corner {
  position: absolute; width: 26px; height: 26px;
  border: 2.5px solid var(--ink);
}
.deco__corner--tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.deco__corner--tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
.deco__corner--bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }
.deco__corner--br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }

/* ---------- Titre éditorial ---------- */
.brand {
  position: absolute; top: 34px; left: 40px; z-index: 7;
  pointer-events: none;
}
.brand__kicker {
  display: inline-block;
  font-size: 12px; font-weight: 800; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--accent);
  border-bottom: 2px solid var(--accent); padding-bottom: 3px;
}
.brand__kicker[hidden] { display: none; }
.brand__logo {
  display: block; height: auto;
  max-width: min(340px, 42vw); max-height: 120px;
  margin: 8px 0 6px;
  mix-blend-mode: multiply; /* intègre le logo au papier/rose façon sérigraphie */
}
.brand__logo[hidden] { display: none; }
/* logo inliné en SVG (pour l'anim tracé+colorisation).
   fill=currentColor → le wordmark prend var(--brand) et suit le thème. */
.brand__logo--svg { width: min(340px, 42vw); height: auto; color: var(--brand); }
.brand__logo--svg svg { display: block; width: 100%; height: auto; max-height: 120px; overflow: visible; }
.brand__title { margin: 8px 0 6px; line-height: 0.86; }
.brand__a {
  display: block;
  font-weight: 600; font-style: italic;
  font-size: clamp(20px, 2.4vw, 30px);
  letter-spacing: -0.01em; color: var(--ink);
}
.brand__b {
  display: block;
  font-weight: 900;
  font-size: clamp(52px, 7.4vw, 92px);
  letter-spacing: -0.035em; color: var(--accent);
  text-shadow: 3px 3px 0 color-mix(in srgb, var(--ink) 14%, transparent);
}
.brand__tag {
  font-size: 13px; font-weight: 600; color: var(--ink-soft);
  letter-spacing: 0.02em;
}

/* ---------- Tampon ---------- */
.stamp {
  position: absolute; top: 30px; right: 30px; z-index: 7;
  width: clamp(74px, 8vw, 104px); height: clamp(74px, 8vw, 104px);
  transform: rotate(-9deg);
  pointer-events: none;
}
.stamp svg { width: 100%; height: 100%; overflow: visible; }
.stamp__ring { fill: none; stroke: var(--ink); stroke-width: 2; }
.stamp__ring--dot { stroke-width: 1; stroke-dasharray: 1.5 3.5; }
.stamp__arc {
  fill: var(--ink); font-size: 9.2px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.stamp__n {
  fill: var(--accent); font-size: 30px; font-weight: 900;
  text-anchor: middle; dominant-baseline: central;
}
.stamp__lbl {
  fill: var(--ink); font-size: 8px; font-weight: 800; letter-spacing: 0.14em;
  text-anchor: middle; text-transform: uppercase;
}

/* ---------- Pins (markers MapLibre) ----------
   La racine .pin est positionnée par MapLibre (transform: translate) : on ne
   TOUCHE PAS à sa transform. Tout l'état visuel (scale hover/actif) vit sur
   l'enfant .pin__dot pour ne pas écraser le placement GL. */
.pin {
  width: var(--pin); height: var(--pin);
  cursor: pointer;
  will-change: transform;
}
.pin:hover { z-index: 20; }
.pin.is-active { z-index: 21; }
.pin__dot {
  display: block;
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--pin-color, var(--c-food));
  box-shadow: 0 1.5px 0 color-mix(in srgb, var(--ink) 40%, transparent);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.pin:hover .pin__dot { transform: scale(1.4); }
.pin:focus-visible { outline: none; }
.pin:focus-visible .pin__dot { outline: 3px solid var(--ink); outline-offset: 2px; }
.pin.is-active .pin__dot { transform: scale(1.55); box-shadow: 0 0 0 4px var(--paper), 0 0 0 6px var(--ink); }

/* Label de pin (nom) — au survol ou quand actif */
.pin__label {
  position: absolute;
  left: calc(100% + 7px); top: 50%;
  transform: translateY(-50%) scale(0.92);
  transform-origin: left center;
  padding: 4px 9px;
  background: var(--surface-2);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  font-size: 12px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--ink); white-space: nowrap;
  pointer-events: none;
  opacity: 0; transition: opacity 0.1s ease;
}
.pin:hover .pin__label,
.pin.is-active .pin__label { opacity: 1; }

/* Marqueur "moi" (géoloc) */
.me {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--c-hotels);
  border: 3px solid var(--white);
  box-shadow: 0 0 0 2px var(--ink), 0 0 0 9px rgba(46, 95, 232, 0.18);
  pointer-events: none;
}

/* ---------- Cartouche légende / filtres ---------- */
.panel {
  position: absolute; right: 30px; bottom: 30px; z-index: 8;
  width: 272px; max-width: calc(100% - 60px);
  background: var(--surface);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 15px 17px 13px;
  transition: opacity 0.3s ease;
}
/* En-tête = bouton (accordéon en mobile ; inerte en desktop) */
.panel__head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
  width: 100%; background: none; border: 0; padding: 0;
  font-family: inherit; color: var(--ink); text-align: left; cursor: default;
}
.panel__eyebrow {
  font-size: 11px; font-weight: 900; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink); white-space: nowrap;
}
.panel__rule { flex: 1; height: 0; border-top: 1px solid var(--hairline-2); }
/* chevron d'accordéon — masqué en desktop, révélé en mobile */
.panel__chevron {
  display: none; flex: 0 0 auto;
  width: 9px; height: 9px; margin-left: 2px;
  border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  transform: rotate(45deg); transition: transform 0.24s ease;
}
.panel__body { display: flex; flex-direction: column; }
.panel__rows { display: flex; flex-direction: column; }

.leg {
  display: flex; align-items: baseline; gap: 8px;
  width: 100%; background: none; border: 0; cursor: pointer;
  font-family: inherit; color: var(--ink);
  padding: 5px 0; text-align: left;
  transition: opacity 0.12s ease;
}
.leg__dot {
  flex: 0 0 auto; align-self: center;
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--ink); background: var(--c);
}
.leg__ic { flex: 0 0 auto; font-size: 14px; line-height: 1; filter: saturate(0.85); }
.leg__lbl { flex: 0 0 auto; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.leg__lead {
  flex: 1 1 auto; align-self: center; height: 0;
  border-bottom: 2px dotted color-mix(in srgb, var(--ink) 40%, transparent);
  margin: 0 2px;
}
.leg__n { flex: 0 0 auto; font-size: 13px; font-weight: 900; font-variant-numeric: tabular-nums; }
.leg:hover .leg__lbl { color: var(--accent); }
.leg[aria-pressed="false"] { opacity: 0.34; }
.leg[aria-pressed="false"] .leg__dot { background: transparent; }

.panel__foot {
  margin-top: 10px; padding-top: 9px;
  border-top: 1px solid var(--hairline);
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--ink-soft); text-transform: uppercase;
}

/* ---------- Switcher de thèmes (rangée de pastilles) ----------
   Vit dans le pied du panneau légende. Chaque pastille = swatch deux-tons
   (land + accent du thème, portés en inline --sw-land/--sw-accent). Active =
   anneau d'encre. Esthétique douce raccord (filet --hairline, micro-ombre). */
.themes {
  display: flex; align-items: center; gap: 8px;
  margin-top: 11px; padding-top: 10px;
  border-top: 1px solid var(--hairline);
}
.themes__lbl {
  font-size: 10px; font-weight: 900; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-soft);
  margin-right: 2px;
}
.theme {
  width: 22px; height: 22px; flex: 0 0 auto; padding: 0;
  border-radius: 50%; cursor: pointer;
  border: 1px solid var(--hairline-2);
  background: linear-gradient(135deg, var(--sw-land) 0 50%, var(--sw-accent) 50% 100%);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 16%, transparent);
  transition: transform 0.12s ease;
}
.theme:hover { transform: translateY(-1px) scale(1.08); }
.theme[aria-checked="true"] { outline: 2px solid var(--ink); outline-offset: 2px; }
.theme:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- Zoom ---------- */
.zoom {
  position: absolute;
  right: 30px; top: 152px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 9;
  transition: opacity 0.3s ease;
}
.zoom__btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: var(--surface-2);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  font-family: inherit;
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  display: grid; place-items: center;
  box-shadow: var(--shadow-soft);
  transition: transform 0.12s ease, background 0.15s ease, color 0.15s ease;
}
.zoom__btn:hover { background: var(--accent); color: var(--white); border-color: transparent; }
.zoom__btn:active { transform: scale(0.94); }

/* ---------- Fiche pin = popover ancré (maplibregl.Popup) ----------
   Surface solide (tip cohérent), filet 1px, ombre douce, image en tête. */
.lodie-pop { --pop-bg: #F8F3EB; }
.lodie-pop .maplibregl-popup-content {
  padding: 0; width: 266px; max-width: 100%;
  background: var(--pop-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  font-family: 'Archivo', system-ui, sans-serif;
}
/* tip de la même couleur que la surface, quel que soit l'ancrage auto */
.lodie-pop.maplibregl-popup-anchor-top .maplibregl-popup-tip,
.lodie-pop.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.lodie-pop.maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: var(--pop-bg); }
.lodie-pop.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.lodie-pop.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.lodie-pop.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: var(--pop-bg); }
.lodie-pop.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--pop-bg); }
.lodie-pop.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--pop-bg); }

.lodie-pop .maplibregl-popup-close-button {
  width: 26px; height: 26px; right: 8px; top: 8px; z-index: 2;
  border-radius: 50%; border: none;
  font-size: 18px; line-height: 24px; color: var(--ink);
  background: rgba(248, 243, 235, 0.82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 18%, transparent);
  transition: background 0.12s ease;
}
.lodie-pop .maplibregl-popup-close-button:hover { background: #fff; }

/* Slot IMAGE en tête — ratio fixe (jamais de trou) */
.pop__media {
  position: relative;
  aspect-ratio: 3 / 2; width: 100%;
  background-size: cover; background-position: center;
  background-color: var(--paper-2);
}
.pop__media--empty {
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 1px 1px, rgba(26,26,46,0.05) 1px, transparent 1.4px) 0 0 / 7px 7px,
    color-mix(in srgb, var(--pin-color, var(--land)) 16%, var(--paper-2));
}
.pop__ph { font-size: 34px; opacity: 0.55; filter: saturate(0.85); }
/* attribution photo (obligatoire Google) — discrète, lisible sur l'image */
.pop__attrib {
  position: absolute; right: 6px; bottom: 5px;
  max-width: calc(100% - 12px);
  font-size: 9px; font-weight: 600; letter-spacing: 0.01em;
  color: #fff; padding: 2px 6px; border-radius: 5px;
  background: rgba(26,26,46,0.42);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
}

.pop__body { padding: 13px 16px 15px; }
.pop__cat {
  display: inline-block;
  font-weight: 800; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 4px 11px; border-radius: 999px;
  background: var(--pin-color, var(--c-food)); color: var(--ink);
}
.pop__name {
  font-size: 21px; font-weight: 800;
  line-height: 1.05; margin: 10px 0 12px;
  padding-right: 6px; letter-spacing: -0.02em; color: var(--ink);
}
.pop__link {
  font-weight: 700; font-size: 13.5px;
  color: var(--ink); text-decoration: none;
  border-bottom: 2px solid var(--accent); padding-bottom: 1px;
}
.pop__link:hover { border-bottom-color: var(--ink); }

/* ---------- Vue liste = DRAWER latéral ----------
   Panneau plein-hauteur ancré à droite qui glisse sur la carte (restée visible
   derrière). Même langage que les cards popover : surface --pop-bg, filet 1px,
   ombre douce, coins arrondis. Fermé = translaté hors-cadre (slide-out). */
.list {
  position: absolute;
  top: 14px; right: 14px; bottom: 14px;
  width: min(432px, calc(100vw - 28px));
  z-index: 14;
  display: flex; flex-direction: column;
  background: var(--pop-bg);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  box-shadow: var(--shadow-lift);
  overflow: hidden;                 /* le scroll vit dans .list__scroll */
  transform: translateX(calc(100% + 26px));  /* poussé hors-cadre (ombre incluse) */
  opacity: 0;
  pointer-events: none;
  transition: transform 0.44s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s ease;
  will-change: transform;
}
.app[data-view="list"] .list {
  transform: none; opacity: 1; pointer-events: auto;
}

/* En-tête du drawer (titre + fermeture) */
.list__bar {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 16px 13px 20px;
  border-bottom: 1px solid var(--hairline);
}
.list__eyebrow {
  font-size: 12px; font-weight: 900; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink);
}
.list__close {
  width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: 50%; border: 1px solid var(--hairline);
  background: var(--surface-2); color: var(--ink);
  font-size: 20px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.list__close:hover { background: var(--accent); color: var(--white); border-color: transparent; }

/* Nav de villes (chips) — scroll horizontal, saute à la ville */
.list__cities {
  flex: 0 0 auto;
  display: flex; gap: 6px;
  padding: 11px 16px 11px 20px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-bottom: 1px solid var(--hairline);
}
.list__cities::-webkit-scrollbar { display: none; }
.citychip {
  flex: 0 0 auto; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--surface-2); color: var(--ink);
  font-family: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: -0.01em;
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.citychip__n {
  font-size: 10.5px; font-weight: 900; font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}
.citychip:hover { border-color: var(--hairline-2); }
.citychip.is-active {
  background: var(--accent); color: var(--white); border-color: transparent;
}
.citychip.is-active .citychip__n { color: color-mix(in srgb, var(--white) 78%, transparent); }

/* Corps scrollable */
.list__scroll {
  flex: 1 1 auto; min-height: 0;
  position: relative;               /* ancre offsetTop des groupes (scroll-to) */
  overflow-y: auto;
  padding: 16px 20px 26px;
  overscroll-behavior: contain;
}

.list__group { margin-bottom: 24px; }
.list__group:last-child { margin-bottom: 4px; }
.list__head {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 15px; font-weight: 900; letter-spacing: -0.01em;
  margin-bottom: 12px;
  position: sticky; top: -16px; padding: 9px 0 8px;
  background: var(--pop-bg); z-index: 1;
  border-bottom: 1px solid var(--hairline-2);
}
.list__n {
  margin-left: auto; font-variant-numeric: tabular-nums;
  font-size: 12px; font-weight: 900; color: var(--ink-soft);
  align-self: center;
}
.list__grid { display: grid; grid-template-columns: 1fr; gap: 7px; }
.list__item {
  text-align: left; width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 8px 12px 8px 8px;
  font-family: inherit;
  color: var(--ink); cursor: pointer;
  display: flex; align-items: center; gap: 11px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.list__item:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); border-color: var(--hairline-2); }
/* vignette photo */
.list__thumb {
  flex: 0 0 auto;
  width: 46px; height: 46px; border-radius: 9px;
  background-size: cover; background-position: center;
  background-color: var(--paper-2);
  border: 1px solid var(--hairline);
}
.list__thumb--empty {
  display: grid; place-items: center; font-size: 20px;
  background: color-mix(in srgb, var(--pin-color, var(--land)) 18%, var(--paper-2));
}
.list__meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.list__name {
  display: flex; align-items: center; gap: 7px;
  font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15;
}
.list__dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--pin-color); }
.list__desc {
  font-size: 12.5px; font-weight: 500; color: var(--ink-soft); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Bascule carte / liste : le drawer glisse sur la droite → on masque zoom &
   panneau (même zone) pendant que la liste est ouverte. Le drawer reste dans le
   DOM en vue carte (translaté hors-cadre) pour animer le slide. */
.app[data-view="list"] .zoom,
.app[data-view="list"] .panel { opacity: 0; pointer-events: none; }

/* ---------- Contrôles flottants (ex-barre du bas) ----------
   Plus de bandeau opaque : un conteneur transparent posé SUR la carte, qui
   laisse passer le drag dans les vides (pointer-events: none), et des « pills »
   papier translucides + blur qui, elles, restent cliquables. */
.bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 5;
  display: flex; align-items: center; gap: 12px;
  padding: 0 20px 20px;            /* décollées du bord bas */
  pointer-events: none;            /* la carte reste draggable dans les vides */
}
.bar > * { pointer-events: auto; } /* mais les contrôles captent bien les clics */

/* Socle commun aux pills flottantes — aligné sur les cards popover :
   surface --pop-bg, filet 1px --hairline, ombre douce (--shadow-lift). Léger
   blur/saturation en plus (les pills flottent sur la carte, pas les cards). */
.bar__count, .bar__toggle, .bar__src {
  background: var(--pop-bg);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  box-shadow: var(--shadow-lift);
}

.bar__count {
  font-weight: 500; font-size: 13px; white-space: nowrap; color: var(--ink);
  padding: 9px 16px;
}
.bar__count strong { font-weight: 900; }

.bar__toggle { display: flex; gap: 4px; white-space: nowrap; margin-left: 6px; padding: 4px; }
.toggle {
  font-family: inherit; font-weight: 800; font-size: 12px;
  border: none; background: transparent; color: var(--ink);
  padding: 6px 15px; border-radius: 999px; cursor: pointer;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.toggle[aria-selected="true"] { background: var(--accent); color: var(--white); }

.bar__geo {
  font-family: inherit; font-weight: 800; font-size: 12px;
  border: 1px solid rgba(9, 78, 54, 0.55); /* filet vert sombre = même densité qu'un 1px hairline */
  background: var(--accent); color: var(--white);
  padding: 10px 18px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  text-transform: uppercase; letter-spacing: 0.04em;
  box-shadow: var(--shadow-lift);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.bar__geo:hover { background: var(--pop-bg); color: var(--accent); border-color: var(--hairline); }
.bar__geo.is-loading { opacity: 0.6; pointer-events: none; }

.bar__src {
  font-weight: 800; font-size: 12px; color: var(--ink);
  text-decoration: none; white-space: nowrap;
  padding: 8px 14px;
}
.bar__src:hover { color: var(--accent); border-color: var(--accent); }

/* ==========================================================================
   Animation d'ouverture (INTRO, jouée une fois au chargement)
   - Le chrome démarre masqué DÈS le 1er paint (classe .intro sur #app posée en
     HTML) puis se « pose » en cascade quand la carte est prête (.play ajouté par
     JS). Le fond carte est déjà rose → aucun flash blank.
   - 3 variantes commutables via ?intro=fly|pose|unfold (data-intro sur #app) :
     · fly    : caméra descend d'Europe vers les pins (reveal = mouvement carte).
     · pose   : voile d'encre rose qui se dissipe (reveal = fondu du voile).
     · unfold : la carte se déplie verticalement depuis le centre (clip-path).
   - Pas de plis permanents (rejetés) : le dépliage est une transition ponctuelle.
   ========================================================================== */

/* Voile d'encre (variante pose) — au-dessus de la carte, sous le chrome */
.intro-veil {
  position: absolute; inset: 0; z-index: 5;
  background: var(--land); pointer-events: none; opacity: 0;
}

/* État initial masqué (dès le 1er paint) tant que .intro est présent */
.app.intro .brand,
.app.intro .stamp,
.app.intro .panel,
.app.intro .zoom,
.app.intro .deco::before,
.app.intro .deco__corner,
.app.intro .bar > * { opacity: 0; }

@keyframes introRise   { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes introRiseSm { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes introFade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes introFrame  { from { opacity: 0; transform: scale(1.015); } to { opacity: 1; transform: none; } }
/* tampon : « pressé » avec un léger dépassement, se cale sur son rot(-9deg) final */
@keyframes introStamp {
  0%   { opacity: 0; transform: rotate(-26deg) scale(0.5); }
  70%  { opacity: 1; transform: rotate(-6deg) scale(1.06); }
  100% { opacity: 1; transform: rotate(-9deg) scale(1); }
}

/* Cascade « mise en page magazine » — commune aux 3 variantes.
   Le chrome de bord est calé APRÈS le dépliage (qui révèle les bords en dernier) :
   la carte s'ouvre, puis la mise en page se dépose dessus. Barre du bas = hors
   carte (footer) → tôt. (Miroir des délais de la timeline GSAP.) */
.app.intro.play .bar > *       { animation: introFade .6s ease-out .15s both; }
.app.intro.play .deco::before  { animation: introFrame .8s ease-out .85s both; }
.app.intro.play .deco__corner  { animation: introFade .5s ease-out 1.0s both; }
.app.intro.play .brand         { animation: introRise .65s cubic-bezier(.22,.61,.36,1) 1.0s both; }
.app.intro.play .panel         { animation: introRise .65s cubic-bezier(.22,.61,.36,1) 1.05s both; }
.app.intro.play .zoom          { animation: introRiseSm .5s ease-out 1.2s both; }
.app.intro.play .stamp         { animation: introStamp .6s cubic-bezier(.34,1.56,.64,1) 1.15s both; }

/* pose : le voile rose se dissipe sur la carte déjà cadrée */
@keyframes introVeil { from { opacity: 1; } to { opacity: 0; } }
.app.intro[data-intro="pose"].play .intro-veil { animation: introVeil 1.15s ease-out .1s both; }

/* unfold : la carte se déplie du centre (bande fine → plein cadre) ; le rose de
   la scène apparaît derrière la zone non encore dépliée → jamais de vide sombre */
@keyframes introUnfold { from { clip-path: inset(46% 0 46% 0); } to { clip-path: inset(0 0 0 0); } }
.app.intro[data-intro="unfold"].play #map { animation: introUnfold 1.15s cubic-bezier(.22,.61,.36,1) .1s both; }

@media (prefers-reduced-motion: reduce) {
  .app.intro .brand, .app.intro .stamp, .app.intro .panel, .app.intro .zoom,
  .app.intro .deco::before, .app.intro .deco__corner, .app.intro .bar > * { opacity: 1; }
  .app.intro .intro-veil { opacity: 0 !important; }
  .app.intro.play .brand, .app.intro.play .panel, .app.intro.play .zoom,
  .app.intro.play .stamp, .app.intro.play .bar > *, .app.intro.play .deco::before,
  .app.intro.play .deco__corner, .app.intro.play .intro-veil,
  .app.intro[data-intro="unfold"].play #map { animation: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .brand { top: 18px; left: 20px; }
  .brand__b { text-shadow: 2px 2px 0 color-mix(in srgb, var(--ink) 14%, transparent); }
  .stamp { display: none; }
  .deco::before { inset: 10px; }
  .deco__corner { display: none; }

  .panel {
    right: 14px; left: 14px; bottom: 66px; width: auto; max-width: none;
    padding: 12px 15px 11px;
  }
  .panel__rows {
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px 22px;
  }
  .leg { width: 100%; }
  .leg__lead { display: none; }

  .zoom {
    left: auto; right: 14px; bottom: auto; top: 16px;
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  /* --- Contrôles flottants : une seule rangée aérée, la carte domine --- */
  .bar {
    flex-wrap: wrap; gap: 8px; padding: 0 12px 12px;
    justify-content: center;
  }
  .bar__count { display: none; }   /* redondant avec le pied du panneau */
  .bar__toggle { margin-left: 0; }
  .toggle { padding: 6px 13px; font-size: 12px; letter-spacing: 0.02em; }
  .bar__geo { margin-left: 0; padding: 8px 15px; font-size: 12px; letter-spacing: 0.02em; }
  .bar__src { display: none; }

  /* --- Panneau « Au programme » REPLIABLE : pill compact → sheet à la demande.
     Replié (défaut mobile) = seul l'en-tête visible, ancré bas-droite. Ouvert =
     le corps se déplie (slide max-height) et le panneau passe pleine largeur. --- */
  .panel {
    right: 14px; left: auto; bottom: 76px;
    width: auto; max-width: calc(100% - 28px);
    padding: 11px 15px;
  }
  .panel:not(.is-collapsed) { left: 14px; right: 14px; }
  .panel__head { margin-bottom: 0; cursor: pointer; }
  .panel__chevron { display: block; }
  .panel.is-collapsed .panel__chevron { transform: rotate(-135deg); } /* pointe ↑ = ouvrir */
  .panel__body {
    overflow: hidden;
    max-height: 60vh; opacity: 1; margin-top: 11px;
    transition: max-height 0.36s cubic-bezier(.22,.61,.36,1), opacity 0.26s ease, margin-top 0.3s ease;
  }
  .panel.is-collapsed .panel__body { max-height: 0; opacity: 0; margin-top: 0; }
  .panel__rows { gap: 2px 22px; }

  /* --- Drawer → bottom-sheet plein-largeur qui monte du bas --- */
  .list {
    top: auto; left: 0; right: 0; bottom: 0;
    width: auto; max-width: none; height: 82vh; max-height: 82vh;
    border-radius: 20px 20px 0 0;
    border-left: 1px solid var(--hairline);
    border-bottom: none;
    box-shadow: 0 -18px 44px -20px color-mix(in srgb, var(--ink) 34%, transparent);
    transform: translateY(calc(100% + 26px));
  }
  .app[data-view="list"] .list { transform: none; }
  .list__bar, .list__cities { padding-left: 16px; }
}