/* Mano — Nîmes Solidaire · prototype interactif */

:root {
  --ink: #141210;
  --paper: #FAF8F5;
  --terra: #C75B39;
  --terra-dark: #A84A2D;
  --terra-deep: #B04D2C;
  --peach: #F7E8DC;
  --apricot: #E8A87C;
  --green: #2E7D5B;
  --amber: #D68C2A;
  --amber-text: #9C6410;
  --muted: #6B655E;
  --gray: #8A8580;
  --chipbg: #F1EDE6;
  --border: #E8E3DC;
  --card: #FFFFFF;
  --cardrow: #FAF8F5;
  /* carte (ambiance journée par défaut) */
  --map-bg: #EDE7DD;
  --map-road: #FFFFFF;
  --map-block: #DCD4C6;
  --map-park: #DCE0D2;
  --sb-ink: #141210;
  --top-inset: 44px;   /* hauteur de la barre d'état simulée (cadre desktop) */
  --bot-inset: 0px;
  --rain-c1: rgba(92, 104, 126, .42);
  --rain-c2: rgba(92, 104, 126, .26);
  --shadow-soft: 0 4px 24px rgba(20, 18, 16, .06);
  --shadow-card: 0 4px 24px rgba(20, 18, 16, .05);
  --shadow-terra: 0 4px 24px rgba(199, 91, 57, .3);
  --shadow-sheet: 0 -8px 40px rgba(20, 18, 16, .10);
  --shadow-marker: 0 4px 24px rgba(20, 18, 16, .18);
  --fab-bg: #141210;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  background: #EFEBE4;
  font-family: 'General Sans', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  min-height: 100vh;
}
button { font-family: inherit; border: 0; background: none; padding: 0; color: inherit; cursor: pointer; text-align: inherit; }
a { text-decoration: none; color: inherit; }
input { font-family: inherit; }

/* ---------- Cadre téléphone ---------- */
#stage { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 28px 16px; }
.phone {
  position: relative; width: 390px; height: 844px; background: var(--paper);
  border-radius: 40px; overflow: hidden; box-shadow: 0 24px 80px rgba(20, 18, 16, .28), 0 0 0 10px #141210, 0 0 0 12px #3a3530;
  isolation: isolate;
}
@media (max-width: 500px), (max-height: 920px) and (max-width: 700px) {
  /* Coquille d'app : la page ne défile jamais, pas de rebond, pas de danse de barre Safari */
  html, body { height: 100%; width: 100%; overflow: hidden; position: fixed; inset: 0; overscroll-behavior: none; }
  #stage { padding: 0; }
  .phone {
    position: fixed; inset: 0; width: auto; height: auto; border-radius: 0; box-shadow: none;
    --top-inset: max(env(safe-area-inset-top, 0px), 12px);
    --bot-inset: env(safe-area-inset-bottom, 0px);
  }
  #statusbar, #homebar { display: none !important; }
}

/* Tap net partout (pas de zoom double-tap), la carte garde ses propres gestes */
button, a, .tab { touch-action: manipulation; }
.maplibregl-canvas { touch-action: none; }
#app { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
#app > .screen { pointer-events: auto; }

/* ---------- Carte persistante ---------- */
#map-root { position: absolute; inset: 0; z-index: 1; background: var(--map-bg); }
#map-fallback { position: absolute; inset: 0; }
#map-fallback svg { display: block; width: 100%; height: 100%; }
#map-canvas { position: absolute; inset: 0; }
#map-canvas .maplibregl-canvas { outline: none; }
#map-root .maplibregl-ctrl-top-left { top: calc(var(--top-inset) + 128px); }
.marker { pointer-events: auto; }

/* ---------- Barre d'état + barre d'accueil ---------- */
.statusbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 60; pointer-events: none;
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 24px 0; font-size: 14px; font-weight: 600; color: var(--sb-ink);
}
.homebar {
  position: absolute; left: 50%; bottom: 8px; width: 134px; height: 5px; border-radius: 100px;
  background: var(--sb-ink); opacity: .25; transform: translateX(-50%); z-index: 61; pointer-events: none;
}
.phone[data-amb="night"] .homebar, .phone.mode-night .homebar { opacity: .4; }

/* ---------- Écrans ---------- */
.screen { position: absolute; inset: 0; display: none; flex-direction: column; background: var(--paper); }
.screen.active { display: flex; }
.screen-pad-top { padding-top: var(--top-inset); }

/* ---------- Ambiances de carte ---------- */
.phone[data-amb="morning"] { --map-bg: #F2EDE2; --map-road: #FFFFFF; --map-block: #E3DACA; }
.phone[data-amb="evening"] { --map-bg: #EDE1D6; --map-road: #FAF3E8; --map-block: #DCCBBB; }
.phone[data-amb="night"], .phone.mode-night {
  /* nuit accentuée : bleu profond, l'UI au-dessus reste claire */
  --map-bg: #211E29; --map-road: #3B3550; --map-block: #2E2A3C; --map-park: #243027;
  --shadow-marker: 0 4px 28px rgba(0, 0, 0, .55);
  --shadow-sheet: 0 -8px 40px rgba(0, 0, 0, .45);
  --rain-c1: rgba(178, 192, 235, .34);
  --rain-c2: rgba(178, 192, 235, .18);
}

/* ---------- Surcouches d'ambiance (au-dessus de la carte, sous l'UI) ---------- */
.map-atmo, .map-stars, .map-weather { position: absolute; left: 0; right: 0; pointer-events: none; }
.map-atmo { top: 0; height: 0; transition: height .5s ease; }
.phone[data-amb="morning"] .map-atmo { height: 240px; background: linear-gradient(180deg, rgba(232, 168, 124, .15) 0%, rgba(232, 168, 124, .1492) 8.333%, rgba(232, 168, 124, .1447) 16.67%, rgba(232, 168, 124, .1345) 25%, rgba(232, 168, 124, .1185) 33.33%, rgba(232, 168, 124, .098) 41.67%, rgba(232, 168, 124, .075) 50%, rgba(232, 168, 124, .052) 58.33%, rgba(232, 168, 124, .0315) 66.67%, rgba(232, 168, 124, .0155) 75%, rgba(232, 168, 124, .0053) 83.33%, rgba(232, 168, 124, 0) 91.67%, rgba(232, 168, 124, 0) 100%); }
.phone[data-amb="day"][data-sun="1"] .map-atmo { height: 260px; background: linear-gradient(205deg, rgba(240, 195, 110, .13) 0%, rgba(240, 195, 110, .1293) 8.333%, rgba(240, 195, 110, .1254) 16.67%, rgba(240, 195, 110, .1165) 25%, rgba(240, 195, 110, .1027) 33.33%, rgba(240, 195, 110, .0849) 41.67%, rgba(240, 195, 110, .065) 50%, rgba(240, 195, 110, .0451) 58.33%, rgba(240, 195, 110, .0273) 66.67%, rgba(240, 195, 110, .0135) 75%, rgba(240, 195, 110, .0046) 83.33%, rgba(240, 195, 110, 0) 91.67%, rgba(240, 195, 110, 0) 100%); }
.phone[data-amb="evening"] .map-atmo { height: 260px; background: linear-gradient(180deg, rgba(205, 122, 74, .13) 0%, rgba(205, 122, 74, .1293) 8.333%, rgba(205, 122, 74, .1254) 16.67%, rgba(205, 122, 74, .1165) 25%, rgba(205, 122, 74, .1027) 33.33%, rgba(205, 122, 74, .0849) 41.67%, rgba(205, 122, 74, .065) 50%, rgba(205, 122, 74, .0451) 58.33%, rgba(205, 122, 74, .0273) 66.67%, rgba(205, 122, 74, .0135) 75%, rgba(205, 122, 74, .0046) 83.33%, rgba(205, 122, 74, 0) 91.67%, rgba(205, 122, 74, 0) 100%); }
.phone[data-amb="night"] .map-atmo, .phone.mode-night .map-atmo {
  height: 340px;
  background: linear-gradient(180deg, rgba(58, 66, 104, .42) 0%, rgba(58, 66, 104, .4179) 8.333%, rgba(58, 66, 104, .4051) 16.67%, rgba(58, 66, 104, .3765) 25%, rgba(58, 66, 104, .3319) 33.33%, rgba(58, 66, 104, .2744) 41.67%, rgba(58, 66, 104, .21) 50%, rgba(58, 66, 104, .1456) 58.33%, rgba(58, 66, 104, .0881) 66.67%, rgba(58, 66, 104, .0435) 75%, rgba(58, 66, 104, .0149) 83.33%, rgba(58, 66, 104, .0021) 91.67%, rgba(58, 66, 104, 0) 100%);
}

/* Étoiles : supprimées (décision Bryan — rendu illisible) */
.map-stars { display: none !important; }

/* Quand une météo est active, le ciel étoilé disparaît (sinon les étoiles
   ressemblent à des gouttes figées) */
.phone[data-weather="rain"] .map-stars,
.phone[data-weather="cold"] .map-stars { display: none !important; }

/* ---------- Météo (réellement visible) ---------- */
.map-weather { inset: 0; display: none; }
@keyframes ns-rainfall {
  to { background-position: -14px 260px, 10px 300px, -8px 340px; }
}
.phone[data-weather="rain"] .map-weather {
  display: block;
  background-image:
    radial-gradient(ellipse 1.1px 4.5px at 30px 40px, var(--rain-c1) 0 60%, transparent 100%),
    radial-gradient(ellipse 1px 4px at 95px 90px, var(--rain-c2) 0 60%, transparent 100%),
    radial-gradient(ellipse .9px 3.5px at 60px 20px, var(--rain-c2) 0 60%, transparent 100%);
  background-size: 130px 150px, 110px 170px, 90px 130px;
  animation: ns-rainfall 2.4s linear infinite;
}
.phone[data-weather="rain"] .map-atmo {
  height: 200px;
  background: linear-gradient(180deg, rgba(107, 101, 94, .1) 0%, rgba(107, 101, 94, .0995) 8.333%, rgba(107, 101, 94, .0965) 16.67%, rgba(107, 101, 94, .0896) 25%, rgba(107, 101, 94, .079) 33.33%, rgba(107, 101, 94, .0653) 41.67%, rgba(107, 101, 94, .05) 50%, rgba(107, 101, 94, .0347) 58.33%, rgba(107, 101, 94, .021) 66.67%, rgba(107, 101, 94, .0104) 75%, rgba(107, 101, 94, .0035) 83.33%, rgba(107, 101, 94, 0) 91.67%, rgba(107, 101, 94, 0) 100%);
}
@keyframes ns-snowfall { to { background-position: 34px 300px, -28px 260px, 18px 220px; } }
.phone[data-weather="cold"] .map-weather {
  display: block;
  background-image:
    radial-gradient(circle 2.2px at 25px 25px, rgba(255, 255, 255, .65) 0 2.2px, transparent 3px),
    radial-gradient(circle 1.7px at 70px 80px, rgba(255, 255, 255, .5) 0 1.7px, transparent 2.4px),
    radial-gradient(circle 1.3px at 45px 55px, rgba(255, 255, 255, .38) 0 1.3px, transparent 2px);
  background-size: 120px 140px, 100px 120px, 76px 96px;
  animation: ns-snowfall 7s linear infinite;
}
.phone[data-weather="heat"] .map-weather {
  display: block;
  background:
    linear-gradient(205deg, rgba(240, 180, 90, .26) 0%, rgba(240, 180, 90, .2587) 5.167%, rgba(240, 180, 90, .2508) 10.33%, rgba(240, 180, 90, .2331) 15.5%, rgba(240, 180, 90, .2054) 20.67%, rgba(240, 180, 90, .1699) 25.83%, rgba(240, 180, 90, .13) 31%, rgba(240, 180, 90, .0901) 36.17%, rgba(240, 180, 90, .0546) 41.33%, rgba(240, 180, 90, .0269) 46.5%, rgba(240, 180, 90, .0092) 51.67%, rgba(240, 180, 90, 0) 56.83%, rgba(240, 180, 90, 0) 62%);
}

/* Marqueurs */
.marker {
  position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 100px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-marker); border: 0 solid rgba(250, 248, 245, .9);
}
.marker svg { transition: transform .12s ease; }
.marker:active svg { transform: scale(.88); }
/* Pop d'arrivée en cascade (svg interne uniquement — jamais l'élément marker) */
.marker.pop svg { animation: markerPop .5s cubic-bezier(.34, 1.45, .64, 1) backwards; animation-delay: var(--pop-d, 0ms); }
@keyframes markerPop {
  from { transform: scale(0); opacity: 0; }
  62% { transform: scale(1.14); opacity: 1; }
  to { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .marker.pop svg { animation: none; } }
.marker.sm { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
.marker.xs { width: 32px; height: 32px; margin: -16px 0 0 -16px; }
.marker.open { background: var(--green); }
.marker.soon { background: var(--amber); }
.marker.closed { background: var(--gray); }
.marker.poser { background: #D97B57; }
.phone[data-amb="night"] .marker, .phone.mode-night .marker { border-width: 3px; width: 48px; height: 48px; margin: -24px 0 0 -24px; }
.phone[data-amb="night"] .marker.sm, .phone.mode-night .marker.sm { width: 42px; height: 42px; margin: -21px 0 0 -21px; }
.phone[data-amb="night"] .marker.xs, .phone.mode-night .marker.xs { width: 36px; height: 36px; margin: -18px 0 0 -18px; }
.phone[data-amb="night"] .marker.open, .phone.mode-night .marker.open { box-shadow: 0 0 22px rgba(122, 205, 165, .35), var(--shadow-marker); }
/* MapLibre positionne ses markers par transform : on neutralise uniquement nos marges,
   la position absolute de MapLibre ne doit JAMAIS être écrasée (sinon dérive au pan) */
.maplibregl-marker.marker { margin: 0 !important; }

/* ---------- Haut de la home : bandeaux + chips ---------- */
.home-top { position: absolute; top: 0; left: 0; right: 0; z-index: 10; padding-top: var(--top-inset); }

.weather-pill-row { display: flex; justify-content: center; padding: 12px 16px 0; }
.weather-pill {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 100px;
  background: #FFFFFF; color: var(--ink); font-size: 14px; font-weight: 600; box-shadow: 0 4px 24px rgba(20, 18, 16, .12);
}
.weather-pill.dark { background: #141210; color: #FAF8F5; box-shadow: 0 4px 24px rgba(20, 18, 16, .25); }

.alert-band-row { padding: 12px 16px 0; }
.alert-band {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 20px; width: 100%;
  background: #FFFFFF; box-shadow: 0 8px 32px rgba(20, 18, 16, .12); text-align: left;
}
.alert-band.dark { background: #141210; box-shadow: 0 8px 32px rgba(20, 18, 16, .25); }
.alert-band .ab-ico { flex: none; width: 40px; height: 40px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.alert-band .ab-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.alert-band .ab-t { font-size: 16px; font-weight: 600; color: var(--ink); }
.alert-band.dark .ab-t { color: #FAF8F5; }
.alert-band .ab-s { font-size: 15px; color: var(--muted); }
.alert-band.dark .ab-s { color: rgba(250, 248, 245, .8); }
.alert-band .ab-cta { flex: none; font-size: 15px; font-weight: 600; color: var(--terra); }
.alert-band.dark .ab-cta { color: #E8A87C; }
.alert-band .ab-x { flex: none; display: flex; padding: 4px; color: var(--gray); }
.alert-band.dark .ab-x { color: rgba(250, 248, 245, .6); }

.night-band-row { padding: 12px 16px 0; }
.night-band {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 20px; width: 100%;
  background: #FFFFFF; box-shadow: 0 8px 32px rgba(20, 18, 16, .12); text-align: left;
}
.night-band .nb-ico { flex: none; width: 40px; height: 40px; border-radius: 14px; background: #141210; display: flex; align-items: center; justify-content: center; color: #FAF8F5; }
.night-band .nb-t { flex: 1; font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.night-band .nb-cta { flex: none; font-size: 15px; font-weight: 600; color: var(--terra); }
.night-band .nb-sub { font-size: 15px; color: var(--muted); font-weight: 400; display: block; }
.night-band .nb-quit { flex: none; font-size: 15px; font-weight: 600; color: var(--terra); padding: 10px 4px; }

.call115-band-row { padding: 10px 16px 0; }
.call115-band {
  display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-radius: 18px; width: 100%;
  background: var(--terra); box-shadow: 0 8px 32px rgba(199, 91, 57, .4); text-align: left; color: #fff;
}
.call115-band .cb-t { font-size: 17px; font-weight: 700; display: block; }
.call115-band .cb-s { font-size: 14px; color: rgba(255, 255, 255, .85); display: block; }

/* RÈGLE : toute rangée à défilement horizontal doit poser overflow-y: hidden —
   « overflow-x: auto » seul rend AUSSI l'axe vertical scrollable (spec CSS), et le
   moindre débordement (transform d'apparition…) laisse les cartes bouger verticalement. */
.chips-row { display: flex; gap: 8px; padding: 14px 16px 8px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; }
.chips-row::-webkit-scrollbar { display: none; }
.chip {
  flex: none; display: flex; align-items: center; gap: 7px; height: 44px; padding: 0 18px; border-radius: 100px;
  background: #FFFFFF; color: var(--ink); font-size: 15px; font-weight: 500; box-shadow: var(--shadow-soft);
}
.chip.on { background: var(--terra); color: #fff; font-weight: 600; box-shadow: var(--shadow-terra); }
.phone[data-amb="night"] .chip, .phone.mode-night .chip { box-shadow: 0 4px 24px rgba(0, 0, 0, .35); }
.phone[data-amb="night"] .chip.on, .phone.mode-night .chip.on { box-shadow: 0 4px 24px rgba(0, 0, 0, .4); }

/* Boutons flottants recherche / menu */
.float-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 4px 16px 0; }
.fbtn {
  width: 44px; height: 44px; border-radius: 100px; background: #FFFFFF; color: var(--ink);
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-soft);
}

/* ---------- FAB 115 ---------- */
.fab115 {
  position: absolute; right: 16px; z-index: 40; height: 56px; padding: 0 20px 0 16px; border-radius: 100px;
  background: var(--fab-bg); display: flex; align-items: center; gap: 9px; box-shadow: 0 4px 24px rgba(20, 18, 16, .3);
  color: #fff; transition: bottom .3s cubic-bezier(.3, .9, .3, 1);
}
.fab115 .n { color: #fff; font-size: 19px; font-weight: 700; letter-spacing: .02em; }
.phone[data-amb="night"] .fab115, .phone.mode-night .fab115 { background: var(--terra); box-shadow: 0 4px 28px rgba(199, 91, 57, .5); }

/* ---------- Bottom sheet ---------- */
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 30; background: #FFFFFF;
  border-radius: 28px 28px 0 0; box-shadow: var(--shadow-sheet);
  display: flex; flex-direction: column; overflow: hidden;
  transition: height .32s cubic-bezier(.3, .9, .3, 1);
}
.sheet.dragging { transition: none; }
.sheet-grab { flex: none; display: flex; justify-content: center; padding: 14px 0 6px; cursor: grab; touch-action: none; }
.sheet-title { touch-action: none; cursor: grab; }
.sheet-grab > div { width: 44px; height: 5px; border-radius: 100px; background: var(--border); }
.sheet-title { flex: none; padding: 6px 20px 12px; font-size: 19px; font-weight: 600; color: var(--ink); }
.sheet-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 0 16px calc(16px + var(--bot-inset)); overscroll-behavior: contain; }
.sheet-body.locked { overflow: hidden; }

/* Carte lieu (rangée) */
.place-card {
  flex: none; display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 20px;
  background: var(--cardrow); text-align: left; width: 100%;
}
/* Critères d'accès sur la carte : mêmes icônes que les filtres, en discret */
.pc-acc { display: flex; gap: 9px; color: var(--gray); margin-top: 3px; min-height: 16px; align-items: center; overflow: hidden; }
.pc-acc svg { display: block; }
/* Appel direct depuis la carte */
.pc-call {
  flex: none; align-self: center; width: 42px; height: 42px; border-radius: 100px;
  background: var(--peach); color: var(--terra-deep);
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s var(--ease), background .15s var(--ease);
}
.pc-call:active { transform: scale(.88); background: var(--apricot); }
/* Fiche : « Ici, c'est possible » — les garanties d'accès, en clair */
.d-access { display: flex; flex-wrap: wrap; gap: 8px; }
.d-access-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: #EAF2EC; color: var(--green); font-size: 13.5px; font-weight: 600;
  padding: 8px 13px; border-radius: 100px;
}
.phone.hc .d-access-chip { border: 1.5px solid var(--green); }
.screen-list .place-card { background: #FFFFFF; box-shadow: var(--shadow-card); }
.place-card .pc-ico { flex: none; width: 52px; height: 52px; border-radius: 16px; background: var(--apricot); display: flex; align-items: center; justify-content: center; color: var(--terra); }
.place-card.poser .pc-ico { background: var(--peach); }
.place-card .pc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
/* Toutes les cartes se ressemblent : chaque bloc tient sur une ligne, et le nom
   réserve toujours deux lignes — sinon la hauteur dépendait de la longueur du
   texte et la liste partait dans tous les sens. */
/* La durée de marche remonte à droite du nom : le statut récupère toute la
   ligne, sinon « Ouvert · toute la nuit » se faisait couper. */
.place-card .pc-head { display: flex; align-items: flex-start; gap: 10px; }
.place-card .pc-head .pc-dist { flex: none; font-size: 15px; padding-top: 2px; }
.place-card .pc-name {
  flex: 1; min-width: 0;
  font-size: 17px; font-weight: 600; color: var(--ink); line-height: 1.28;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; min-height: 2.56em;
}
.place-card .pc-status { display: flex; align-items: center; gap: 8px; font-size: 16px; flex-wrap: nowrap; min-width: 0; min-height: 22px; }
.place-card .pc-status .st { min-width: 0; display: flex; }
.place-card .pc-status .st .dot { flex: none; }
/* L'ellipsis a besoin d'un conteneur de texte : sur le flex parent, le libellé
   était coupé net au milieu d'un mot. */
.place-card .pc-status .st-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.st .dot { width: 8px; height: 8px; border-radius: 100px; }
.st.open { color: var(--green); } .st.open .dot { background: var(--green); }
.st.soon { color: var(--amber-text); } .st.soon .dot { background: var(--amber); }
.st.closed { color: var(--muted); } .st.closed .dot { background: var(--gray); }
.st.call { color: var(--amber-text); } .st.call .dot { background: var(--amber); }
/* « Sur démarche » : accessible, mais pas à l'instant — une orientation, un
   rendez-vous ou un premier contact est nécessaire. Jamais en vert : le vert
   veut dire « vous pouvez y aller maintenant ». */
.st.request { color: var(--amber-text); } .st.request .dot { background: var(--amber); }
.pc-dist { color: var(--muted); flex: none; white-space: nowrap; }
.place-card .pc-tags { display: flex; gap: 6px; flex-wrap: nowrap; overflow: hidden; min-height: 27px; align-items: center; }
.tag { font-size: 15px; font-weight: 500; color: var(--ink); background: var(--chipbg); border-radius: 100px; padding: 3px 10px; white-space: nowrap; flex: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* Compteur des étiquettes qui ne tiennent pas sur la ligne */
.tag.tag-more { color: var(--muted); flex: none; }
.pc-offline { color: var(--muted); font-weight: 500; font-size: 16px; }

/* ---------- Fiche lieu ---------- */
.detail-scrim { position: absolute; inset: 0; z-index: 20; }
.detail-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; top: 64px; z-index: 30; background: #FFFFFF;
  border-radius: 28px 28px 0 0; box-shadow: var(--shadow-sheet); display: flex; flex-direction: column; overflow: hidden;
}
.detail-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; padding: 8px 20px calc(24px + var(--bot-inset)); overscroll-behavior: contain; }
.d-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--terra); }
.d-name { font-size: 28px; font-weight: 700; color: var(--ink); line-height: 1.15; }
.d-strip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.d-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 600; border-radius: 100px; padding: 6px 14px; }
.d-pill .dot { width: 8px; height: 8px; border-radius: 100px; }
.d-pill.open { color: var(--green); background: rgba(46, 125, 91, .1); } .d-pill.open .dot { background: var(--green); }
.d-pill.soon { color: var(--amber-text); background: rgba(214, 140, 42, .12); } .d-pill.soon .dot { background: var(--amber); }
.d-pill.closed { color: var(--muted); background: rgba(138, 133, 128, .12); } .d-pill.closed .dot { background: var(--gray); }
.d-dist { font-size: 16px; color: var(--muted); }
.d-banner { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--peach); font-size: 16px; font-weight: 600; color: var(--ink); }
.d-banner.soon { justify-content: space-between; background: rgba(214, 140, 42, .12); }
.d-banner.soon .in { font-weight: 700; color: var(--amber-text); font-variant-numeric: tabular-nums; }
.d-actions { display: flex; gap: 10px; }
.btn { height: 56px; border-radius: 100px; font-size: 17px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn.primary { background: var(--terra); color: #fff; box-shadow: var(--shadow-terra); }
.btn.outline { background: #FFFFFF; border: 2px solid var(--terra); color: var(--terra); }
.btn.neutral { background: #FFFFFF; border: 2px solid var(--border); color: var(--ink); }
.btn.ghost { color: var(--muted); font-weight: 500; }
.btn.grow { flex: 1; }
.d-services { display: flex; gap: 8px; flex-wrap: wrap; }
.d-services .tag { font-size: 16px; padding: 8px 16px; }
.d-sec-label { font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--muted); }
.amen-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.amen { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; border-radius: 16px; background: var(--cardrow); color: var(--ink); }
.amen.hi { background: var(--peach); }
.amen.hi svg { color: var(--terra); }
.amen span { font-size: 14px; font-weight: 600; }
.hours { display: flex; flex-direction: column; gap: 2px; }
.hrow { display: flex; justify-content: space-between; align-items: center; height: 32px; padding: 0 12px; font-size: 16px; color: var(--ink); border-radius: 12px; }
.hrow .t { color: var(--muted); }
.hrow.today { height: 36px; font-weight: 600; background: var(--peach); }
.hrow.today .t { color: var(--terra-deep); }
.hrow.today.closedday { background: var(--chipbg); }
.hrow.today.closedday .t { color: var(--muted); }
.hrow.next { height: 36px; font-weight: 600; background: var(--peach); }
.hrow.next .t { color: var(--terra-deep); }
.d-note { border-radius: 16px; background: var(--cardrow); padding: 14px 16px; font-size: 16px; line-height: 1.45; color: var(--ink); }
.d-addr { display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--ink); }
.d-foot { display: flex; justify-content: space-between; align-items: center; font-size: 15px; color: var(--muted); }
.d-foot .vf { display: inline-flex; align-items: center; gap: 6px; }
.d-foot .vf .dot { width: 8px; height: 8px; border-radius: 100px; background: var(--green); }
.d-foot button, .d-foot a { color: var(--muted); text-decoration: underline; font-size: 15px; }

/* ---------- Modales bas (filtres, menu, partage) ---------- */
.modal-wrap { position: absolute; inset: 0; z-index: 70; display: none; }
.modal-wrap.open { display: block; }
.modal-scrim { position: absolute; inset: 0; background: rgba(20, 18, 16, .35); }
.modal-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; background: #FFFFFF; border-radius: 28px 28px 0 0;
  box-shadow: 0 -8px 40px rgba(20, 18, 16, .18); display: flex; flex-direction: column; max-height: 92%;
}
.modal-body { overflow-y: auto; display: flex; flex-direction: column; gap: 20px; padding: 8px 20px calc(28px + var(--bot-inset)); }
.m-title { font-size: 19px; font-weight: 600; color: var(--ink); }

.fchips { display: flex; flex-wrap: wrap; gap: 8px; }
.fchip { display: flex; align-items: center; gap: 7px; height: 44px; padding: 0 18px; border-radius: 100px; background: var(--chipbg); color: var(--ink); font-size: 16px; font-weight: 500; }
.fchip.on { background: var(--terra); color: #fff; font-weight: 600; }
.trow { display: flex; justify-content: space-between; align-items: center; min-height: 44px; gap: 12px; }
.trow .lb { font-size: 16px; font-weight: 500; color: var(--ink); }
.switch { flex: none; width: 52px; height: 32px; border-radius: 100px; background: var(--border); position: relative; transition: background .2s; }
.switch::after { content: ''; position: absolute; left: 3px; top: 3px; width: 26px; height: 26px; border-radius: 100px; background: #FFFFFF; box-shadow: 0 1px 4px rgba(20, 18, 16, .2); transition: left .2s; }
.switch.on { background: var(--terra); }
.switch.on::after { left: 23px; }
.checkbox { width: 26px; height: 26px; border-radius: 9px; background: #FFFFFF; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; color: #fff; }
.checkbox.on { background: var(--terra); border-color: var(--terra); }
.seg { display: flex; height: 48px; border-radius: 100px; background: var(--chipbg); padding: 4px; }
.seg > button { flex: 1; display: flex; align-items: center; justify-content: center; border-radius: 100px; font-size: 16px; font-weight: 500; color: var(--muted); }
.seg > button.on { background: #FFFFFF; font-weight: 600; color: var(--ink); box-shadow: 0 2px 8px rgba(20, 18, 16, .08); }
.seg.auto > button { flex: none; padding: 0 20px; }

/* Menu */
.menu-item { display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 0 12px; border-radius: 16px; width: 100%; text-align: left; }
.menu-item:active { background: var(--cardrow); }
.menu-item .mi-ico { flex: none; width: 44px; height: 44px; border-radius: 14px; background: var(--peach); display: flex; align-items: center; justify-content: center; color: var(--terra); }
.menu-item .mi-main { flex: 1; display: flex; flex-direction: column; }
.menu-item .mi-t { font-size: 17px; font-weight: 600; color: var(--ink); }
.menu-item .mi-s { font-size: 15px; color: var(--muted); }
.menu-item .mi-chev { color: var(--gray); display: flex; }

/* Partage */
.share-place { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 20px; background: var(--cardrow); }
.share-grid { display: flex; gap: 18px; justify-content: space-between; padding: 4px 8px; }
.share-op { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 72px; }
.share-op .so-ico { width: 60px; height: 60px; border-radius: 100px; display: flex; align-items: center; justify-content: center; }
.share-op span { font-size: 13px; font-weight: 500; color: var(--ink); }
.share-note { border-radius: 16px; background: var(--cardrow); padding: 12px 16px; font-size: 15px; line-height: 1.45; color: var(--muted); }

/* ---------- Écrans plein-page (recherche, signalement, à propos…) ---------- */
.page-head { flex: none; display: flex; align-items: center; gap: 12px; padding: calc(var(--top-inset) + 14px) 20px 0; }
.page-head .back { flex: none; width: 44px; height: 44px; border-radius: 100px; background: #FFFFFF; box-shadow: var(--shadow-soft); display: flex; align-items: center; justify-content: center; color: var(--ink); }
.page-head .pt { font-size: 19px; font-weight: 600; color: var(--ink); }
.page-scroll { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }

/* Urgence */
.screen-urgence { background: #A8492A; }
.u-head { flex: none; display: flex; justify-content: flex-end; padding: calc(var(--top-inset) + 14px) 24px 0; }
.u-close { width: 44px; height: 44px; border-radius: 100px; background: rgba(255, 255, 255, .14); display: flex; align-items: center; justify-content: center; color: #fff; }
.u-intro { flex: none; padding: 26px 28px 8px; display: flex; flex-direction: column; gap: 8px; }
.u-intro .t { font-size: 28px; font-weight: 700; color: #fff; line-height: 1.2; }
.u-intro .s { font-size: 17px; color: rgba(255, 255, 255, .8); line-height: 1.4; }
.u-cards { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 20px 20px calc(24px + var(--bot-inset)); overflow-y: auto; overscroll-behavior: contain; }
.u-cards .u-card:first-child { margin-top: auto; }
.u-card { flex: none; border-radius: 28px; background: #FFFFFF; padding: clamp(16px, 3vh, 26px) 26px; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 8px 32px rgba(20, 18, 16, .2); text-decoration: none; }
.u-card .num { font-size: clamp(40px, 8.5vh, 64px); font-weight: 700; color: var(--ink); line-height: 1; }
.u-card .lb { font-size: 17px; font-weight: 600; color: var(--ink); }
.u-card .sb { font-size: 15px; color: var(--muted); }

/* Onboarding */
.ob-top { flex: none; display: flex; justify-content: space-between; align-items: center; padding: calc(var(--top-inset) + 14px) 24px 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.ob-skip { font-size: 15px; font-weight: 500; color: var(--muted); padding: 10px 6px; }
.ob-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(16px, 4vh, 36px); padding: 0 32px; min-height: 0; overflow: hidden; }
.ob-center .mascot-slot { width: min(220px, 28vh) !important; height: min(220px, 28vh) !important; flex: none; }
.ob-copy { display: flex; flex-direction: column; gap: 12px; text-align: center; }
.ob-copy .t { font-size: clamp(24px, 4.2vh, 32px); font-weight: 700; color: var(--ink); line-height: 1.2; text-wrap: balance; }
.ob-copy .s { font-size: 17px; color: var(--muted); line-height: 1.45; }
.ob-foot { flex: none; display: flex; flex-direction: column; gap: 14px; padding: 0 20px calc(32px + var(--bot-inset)); align-items: center; }
.ob-dots { display: flex; gap: 6px; }
.ob-dots span { width: 6px; height: 6px; border-radius: 100px; background: var(--border); }
.ob-dots span.on { width: 20px; background: var(--terra); }
.ob-foot .btn { width: 100%; }
.geo-rings { position: relative; width: 150px; height: 150px; }
.geo-rings .r1 { position: absolute; inset: 14px; border-radius: 100px; background: rgba(199, 91, 57, .1); }
.geo-rings .r2 { position: absolute; inset: 38px; border-radius: 100px; background: rgba(199, 91, 57, .16); }
.geo-rings .c { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 100px; background: var(--terra); border: 5px solid #FFFFFF; box-shadow: 0 4px 16px rgba(20, 18, 16, .2); }

/* Langue */
.lang-head { flex: none; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: calc(var(--top-inset) + 32px) 28px 8px; text-align: center; }
.lang-head .ico { width: 72px; height: 72px; border-radius: 100px; background: var(--peach); display: flex; align-items: center; justify-content: center; color: var(--terra); }
.lang-head .t { font-size: 24px; font-weight: 700; color: var(--ink); }
.lang-list { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 20px; overflow-y: auto; }
.lang-item { display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: 0 22px; border-radius: 20px; background: #FFFFFF; border: 2px solid transparent; box-shadow: var(--shadow-card); font-size: 20px; font-weight: 600; color: var(--ink); }
.lang-item.on { border-color: var(--terra); }
.lang-item .lk { width: 28px; height: 28px; border-radius: 100px; background: var(--terra); display: none; align-items: center; justify-content: center; color: #fff; }
.lang-item.on .lk { display: flex; }
.lang-foot { flex: none; padding: 0 20px calc(34px + var(--bot-inset)); }
.lang-foot .btn { width: 100%; }

/* États vides / erreurs */
.empty-hero { flex: none; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 36px 28px 8px; text-align: center; }
.empty-hero .circ { width: 88px; height: 88px; border-radius: 100px; background: var(--chipbg); display: flex; align-items: center; justify-content: center; color: var(--gray); }
.empty-hero .t { font-size: 24px; font-weight: 700; color: var(--ink); line-height: 1.25; text-wrap: balance; }
.empty-hero .s { font-size: 16px; color: var(--muted); line-height: 1.45; }
.center-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 0 32px; text-align: center; }
.q-list { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 20px; overflow-y: auto; overscroll-behavior: contain; }
.q-item { flex: none; }
.q-item { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 20px; border-radius: 16px; background: #FFFFFF; box-shadow: var(--shadow-card); font-size: 17px; font-weight: 600; color: var(--ink); }
.q-item .chev { color: var(--gray); display: flex; }
.call-strip { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 20px; background: #141210; }
.call-strip span { font-size: 16px; line-height: 1.4; color: #FAF8F5; }

/* Recherche */
.search-bar-row { flex: none; display: flex; align-items: center; gap: 10px; padding: calc(var(--top-inset) + 14px) 16px 0; }
.search-bar { flex: 1; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px; border-radius: 100px; background: #FFFFFF; border: 2px solid var(--terra); box-shadow: var(--shadow-soft); }
.search-bar input { flex: 1; border: 0; outline: 0; font-size: 17px; color: var(--ink); background: transparent; min-width: 0; }
.search-cancel { flex: none; font-size: 16px; font-weight: 500; color: var(--terra); padding: 10px 4px; }
.sr-row { display: flex; align-items: center; gap: 12px; min-height: 52px; width: 100%; text-align: left; }
.sr-row .sr-ico { flex: none; width: 40px; height: 40px; border-radius: 14px; background: var(--apricot); display: flex; align-items: center; justify-content: center; color: var(--terra); }
.sr-row .sr-main { flex: 1; display: flex; flex-direction: column; }
.sr-row .sr-t { font-size: 16px; font-weight: 600; color: var(--ink); }
.sr-row .sr-s { font-size: 15px; color: var(--muted); }
.sr-row mark { background: none; color: var(--terra); }
.recent-row { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 16px; color: var(--ink); width: 100%; text-align: left; }
.recent-row svg { color: var(--gray); }

/* Signalement */
.opt-item { display: flex; align-items: center; min-height: 52px; padding: 0 18px; border-radius: 16px; background: #FFFFFF; border: 2px solid transparent; font-size: 16px; font-weight: 500; color: var(--ink); box-shadow: var(--shadow-card); width: 100%; text-align: left; }
.opt-item.on { border-color: var(--terra); font-weight: 600; }
textarea.free {
  height: 84px; border-radius: 16px; background: #FFFFFF; border: 2px solid var(--border); padding: 14px 16px;
  font-size: 16px; color: var(--ink); resize: none; outline: none; font-family: inherit; width: 100%;
}
textarea.free::placeholder { color: var(--gray); }
.anon-note { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 16px; background: #FAF3EC; font-size: 16px; line-height: 1.45; color: var(--ink); }

/* À propos */
.about-cards { display: flex; flex-direction: column; gap: 10px; }
.about-card { display: flex; gap: 12px; padding: 16px; border-radius: 20px; background: #FFFFFF; box-shadow: var(--shadow-card); }
.about-card .ac-ico { flex: none; width: 40px; height: 40px; border-radius: 14px; background: var(--peach); display: flex; align-items: center; justify-content: center; color: var(--terra); }
.about-card .ac-main { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 16px; line-height: 1.45; color: var(--ink); }
.about-card .ac-t { font-weight: 600; }
.contact-note { border-radius: 16px; background: #FAF3EC; padding: 14px 16px; font-size: 16px; line-height: 1.45; color: var(--ink); }
.contact-note a { color: var(--ink); font-weight: 600; text-decoration: none; }

/* Liste (écran 7) */
.list-toggle-row { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; }
.sortbtn { display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px; border-radius: 100px; background: #FFFFFF; font-size: 15px; font-weight: 500; color: var(--ink); box-shadow: var(--shadow-soft); }
.list-scroll { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 0 16px 16px; }

/* Skeletons */
@keyframes ns-skl { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.skl { background: #EDE7DD; border-radius: 8px; animation: ns-skl 1.6s ease-in-out infinite; }

/* Toast */
.toast-wrap { position: absolute; left: 0; right: 0; bottom: 40px; z-index: 90; display: flex; justify-content: center; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 100px; background: #141210;
  box-shadow: 0 8px 32px rgba(20, 18, 16, .25); opacity: 0; transform: translateY(12px); transition: all .25s ease;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast .tk { flex: none; width: 22px; height: 22px; border-radius: 100px; background: var(--green); display: flex; align-items: center; justify-content: center; color: #fff; }
.toast span { font-size: 16px; font-weight: 500; color: #FAF8F5; }

/* Bandeau installation */
.install-band {
  position: absolute; left: 16px; right: 16px; z-index: 45; display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: 20px; background: #FFFFFF; box-shadow: 0 8px 32px rgba(20, 18, 16, .12);
  transition: bottom .3s cubic-bezier(.3, .9, .3, 1);
}
.install-band .ib-ico { flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--peach); display: flex; align-items: center; justify-content: center; color: var(--terra); }
.install-band .ib-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.install-band .ib-t { font-size: 16px; font-weight: 600; color: var(--ink); }
.install-band .ib-s { font-size: 15px; color: var(--muted); }
.install-band .ib-btns { flex: none; display: flex; flex-direction: column; gap: 6px; }
.install-band .ib-yes { height: 38px; padding: 0 16px; border-radius: 100px; background: var(--terra); color: #fff; font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.install-band .ib-no { height: 30px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; color: var(--muted); }

/* Mascotte (piste B — le Point de carte) */
.mascot { display: block; }

/* ---------- Mode gros contraste ---------- */
.phone.hc {
  --green: #1D5C41; --amber: #8A5A0E; --amber-text: #8A5A0E; --terra: #A84A2D;
  --muted: #3b362f; --gray: #4a453e; --border: #141210;
  --map-bg: #E7DFD0; --map-block: #CBBFA6;
  --shadow-soft: none; --shadow-card: none; --shadow-terra: none;
}
.phone.hc .chip { border: 2px solid #141210; font-weight: 600; font-size: 16px; height: 48px; }
.phone.hc .chip.on { border-color: var(--terra); font-weight: 700; font-size: 16px; }
.phone.hc .place-card { border: 2px solid #141210; background: #FFFFFF; }
.phone.hc .place-card .pc-ico { background: var(--terra); color: #fff; }
.phone.hc .sheet { border-top: 3px solid #141210; box-shadow: none; }
.phone.hc .detail-sheet { border-top: 3px solid #141210; box-shadow: none; }
.phone.hc .sheet-grab > div { background: #141210; opacity: .4; height: 6px; }
.phone.hc .sheet-title { font-size: 21px; font-weight: 700; }
.phone.hc .pc-name { font-size: 19px; font-weight: 700; }
.phone.hc .pc-status { font-size: 17px; }
.phone.hc .pc-dist { color: #141210; font-weight: 600; }
.phone.hc .st { font-weight: 700; }
.phone.hc .d-pill.open { background: var(--green); color: #fff; }
.phone.hc .d-pill.open .dot { display: none; }
.phone.hc .btn.outline { border-width: 3px; border-color: #141210; color: #141210; font-weight: 700; }
.phone.hc .btn.primary { font-weight: 700; }
.phone.hc .tag { background: #FFFFFF; border: 2px solid #141210; font-weight: 600; }
.phone.hc .marker { border: 3px solid #FFFFFF; width: 52px; height: 52px; margin: -26px 0 0 -26px; }
.phone.hc .map-road2 { stroke: #141210; opacity: .3; }
.phone.hc .fbtn { border: 2px solid #141210; }
.phone.hc .hrow.today { background: #141210; color: #fff; }
.phone.hc .hrow.today .t { color: #fff; }
.phone.hc .d-note { border: 2px solid #141210; background: #FFFFFF; font-weight: 600; }
.phone:not(.hc) .map-road2 { display: none; }

/* ---------- Panneau démo ---------- */
#demo-btn {
  position: fixed; right: 0; top: 52%; z-index: 200; width: 34px; height: 52px;
  border-radius: 14px 0 0 14px; background: rgba(20, 18, 16, .82); color: #FAF8F5;
  font-size: 16px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(20, 18, 16, .3); cursor: pointer;
}
#demo-panel {
  position: fixed; right: 12px; top: 52%; transform: translateY(-40%); z-index: 200; width: 250px;
  background: #141210; color: #FAF8F5;
  border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 16px 48px rgba(20, 18, 16, .4); font-size: 13px; max-height: 80vh; overflow-y: auto;
}
#demo-panel[hidden] { display: none; }
#demo-panel .dp-sec { display: flex; flex-direction: column; gap: 6px; }
#demo-panel .dp-lb { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; color: rgba(250, 248, 245, .55); }
#demo-panel .dp-opts { display: flex; flex-wrap: wrap; gap: 5px; }
#demo-panel .dp-opt { padding: 6px 10px; border-radius: 100px; background: rgba(250, 248, 245, .12); color: #FAF8F5; font-size: 12px; font-weight: 500; cursor: pointer; }
#demo-panel .dp-opt.on { background: #C75B39; font-weight: 600; }

/* ---------- Zones tactiles 56px (hit-area étendue, visuel inchangé) ---------- */
.chip, .fbtn, .ob-skip, .search-cancel, .sortbtn, .ab-x, .nb-quit, .ab-cta, .d-foot button {
  position: relative;
}
.chip::after, .fbtn::after, .ob-skip::after, .search-cancel::after, .sortbtn::after,
.ab-x::after, .nb-quit::after, .ab-cta::after, .d-foot button::after {
  content: ''; position: absolute; inset: -6px; border-radius: inherit;
}

/* ---------- Emplacement mascotte (castor 3D) ---------- */
.mascot-slot { position: relative; display: flex; align-items: center; justify-content: center; }
.mascot-slot img { width: 100%; height: 100%; object-fit: contain; display: block; mix-blend-mode: multiply; border-radius: 24px; }
.mascot-slot.missing {
  border: 2px dashed var(--border); border-radius: 24px;
  background: repeating-linear-gradient(-45deg, #FAF8F5 0 10px, #F4F0EA 10px 20px);
  flex-direction: column; gap: 4px;
}
.mascot-slot.missing span { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--muted); text-align: center; padding: 0 8px; }
.mascot-slot.missing.small span { display: none; }
.mascot-slot.missing.small::before { content: '🦫'; font-size: 26px; filter: grayscale(.2); }

/* ---------- Indice de fraîcheur progressif ---------- */
.d-foot .vf .dot { background: var(--green); }
.d-foot .vf.amber .dot { background: var(--amber); }
.d-foot .vf.amber { color: var(--amber-text); }
.d-foot .vf.gray .dot { background: var(--gray); }

/* ---------- Home transparente : la carte MapLibre vit derrière ---------- */
.screen-home { background: transparent !important; pointer-events: none !important; }
.screen-home > * { pointer-events: auto; }
.screen-detail { pointer-events: none !important; }
.screen-detail > * { pointer-events: auto; }

/* ---------- Attribution OSM intégrée (obligation légale, mais dans la DA) ---------- */
#map-root .maplibregl-ctrl { margin: 0 0 0 12px; }
#map-root details.maplibregl-ctrl-attrib {
  background: rgba(255, 255, 255, .78); border-radius: 100px;
  box-shadow: 0 2px 12px rgba(20, 18, 16, .08); overflow: hidden;
  font-family: 'General Sans', system-ui, sans-serif;
}
#map-root .maplibregl-ctrl-attrib summary.maplibregl-ctrl-attrib-button {
  width: 24px; height: 24px; background: none; display: flex; align-items: center; justify-content: center;
}
#map-root .maplibregl-ctrl-attrib summary.maplibregl-ctrl-attrib-button::before {
  content: 'i'; font-size: 12px; font-weight: 600; font-style: italic; font-family: Georgia, serif;
  color: var(--muted); line-height: 1;
}
#map-root .maplibregl-ctrl-attrib summary svg { display: none; }
#map-root .maplibregl-ctrl-attrib .maplibregl-ctrl-attrib-inner {
  font-size: 10.5px; color: var(--muted); padding: 5px 12px 5px 4px; line-height: 1.3;
}
#map-root .maplibregl-ctrl-attrib .maplibregl-ctrl-attrib-inner a { color: var(--muted); text-decoration: none; }
.phone[data-amb="night"] #map-root details.maplibregl-ctrl-attrib,
.phone.mode-night #map-root details.maplibregl-ctrl-attrib { background: rgba(33, 30, 41, .62); }
.phone[data-amb="night"] #map-root .maplibregl-ctrl-attrib summary.maplibregl-ctrl-attrib-button::before,
.phone[data-amb="night"] #map-root .maplibregl-ctrl-attrib .maplibregl-ctrl-attrib-inner,
.phone[data-amb="night"] #map-root .maplibregl-ctrl-attrib .maplibregl-ctrl-attrib-inner a,
.phone.mode-night #map-root .maplibregl-ctrl-attrib summary.maplibregl-ctrl-attrib-button::before,
.phone.mode-night #map-root .maplibregl-ctrl-attrib .maplibregl-ctrl-attrib-inner,
.phone.mode-night #map-root .maplibregl-ctrl-attrib .maplibregl-ctrl-attrib-inner a { color: #8F87A6; }

/* ---------- Monuments stylisés ---------- */
.monument { pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 1px; transition: opacity .35s ease; }
.monument svg { display: block; }
.monument-label {
  font-family: 'General Sans', system-ui, sans-serif; font-size: 10.5px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: #8A8175;
  text-shadow: 0 1px 3px var(--map-bg), 0 0 7px var(--map-bg);
}
.phone[data-amb="night"] .monument-label, .phone.mode-night .monument-label { color: #8F87A6; }
#map-root.monuments-hidden .monument { opacity: 0; }
.phone[data-amb="night"] .monument svg, .phone.mode-night .monument svg { filter: brightness(.62) saturate(.75); }
.phone[data-amb="night"] .monument-label, .phone.mode-night .monument-label { color: #8F87A6; }
.phone[data-amb="evening"] .monument svg { filter: brightness(.94) sepia(.12); }

/* ---------- Barre de navigation : pilule flottante, glass discret ---------- */
:root { --tabbar-h: 58px; --tabbar-clear: calc(var(--tabbar-h) + max(var(--bot-inset), 10px) + 22px); }
.tabbar {
  position: absolute; left: 50%; transform: translateX(-50%); z-index: 50;
  bottom: calc(max(var(--bot-inset), 10px) + 10px);
  height: var(--tabbar-h); padding: 7px; border-radius: 100px; gap: 6px;
  width: min(340px, calc(100% - 28px));
  background: rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  backdrop-filter: blur(16px) saturate(1.35);
  border: 1px solid rgba(255, 255, 255, .65);
  box-shadow: 0 10px 36px rgba(20, 18, 16, .16);
  display: flex; align-items: stretch; gap: 2px;
}
.tabbar .tab {
  flex: 1; display: flex; align-items: center; justify-content: center;
  color: var(--muted); border-radius: 100px;
  transition: background .25s var(--ease), color .2s var(--ease);
}
.tabbar .tab svg { transition: transform .25s var(--ease); }
.tabbar .tab.on { background: var(--peach); color: var(--terra); }
.tabbar .tab.on svg { transform: scale(1.1); }
.tabbar .tab:active svg { transform: scale(.88); }
.phone.hc .tabbar { background: #FFFFFF; border: 2px solid #141210; -webkit-backdrop-filter: none; backdrop-filter: none; }
.phone.hc .tabbar .tab.on { color: var(--terra-dark); }

/* Les écrans à onglets : le contenu glisse SOUS la barre flottante */
.with-tabbar .sheet { bottom: 0; }
.with-tabbar .sheet-body { padding-bottom: var(--tabbar-clear); }
.with-tabbar .list-scroll { padding-bottom: var(--tabbar-clear); }
.with-tabbar .page-scroll { padding-bottom: var(--tabbar-clear) !important; }

/* ---------- Point utilisateur + bouton recentrer ---------- */
.user-dot { pointer-events: none; width: 22px; height: 22px; position: relative; }
.user-dot::before {
  content: ''; position: absolute; inset: -12px; border-radius: 100px;
  background: rgba(199, 91, 57, .16);
}
.user-dot::after {
  content: ''; position: absolute; inset: 0; border-radius: 100px;
  background: var(--terra); border: 4px solid #FFFFFF; box-shadow: 0 2px 10px rgba(20, 18, 16, .25);
}
.locate-btn {
  position: absolute; right: 16px; z-index: 40; width: 44px; height: 44px; border-radius: 100px;
  background: #FFFFFF; color: var(--ink); display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-soft); transition: bottom .3s cubic-bezier(.3, .9, .3, 1);
}

/* ---------- Lien itinéraire dans la rangée adresse ---------- */
.d-addr { width: 100%; min-height: 44px; }
.d-addr .addr-txt { flex: 1; text-align: left; }
.d-addr .addr-link { display: inline-flex; align-items: center; gap: 2px; color: var(--terra); font-weight: 600; font-size: 15px; flex: none; }

/* ---------- Mes droits ---------- */
.dr-hero {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px; width: 100%; text-align: left;
  padding: 20px; border-radius: 24px; background: var(--terra); box-shadow: var(--shadow-terra);
}
.dr-hero-txt { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.dr-hero-t { font-size: 19px; font-weight: 700; color: #fff; }
.dr-hero-s { font-size: 15px; color: rgba(255, 255, 255, .85); }
.dr-hero-cta {
  flex: none; height: 42px; padding: 0 18px; border-radius: 100px; background: #FFFFFF;
  color: var(--terra); font-size: 15px; font-weight: 600; display: flex; align-items: center;
}
.dr-card {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 16px; border-radius: 20px; background: #FFFFFF; box-shadow: var(--shadow-card);
}
.dr-card-ico { flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--peach); display: flex; align-items: center; justify-content: center; color: var(--terra); }
.dr-card-main { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.dr-card-t { font-size: 17px; font-weight: 600; color: var(--ink); }
.dr-card-s { font-size: 15px; color: var(--muted); line-height: 1.35; }
.fiche-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  min-height: 56px; padding: 0 18px; border-radius: 16px; background: #FFFFFF;
  box-shadow: var(--shadow-card); font-size: 16px; font-weight: 500; color: var(--ink);
}
.fiche-row svg { color: var(--gray); flex: none; }
.fiche-row.urgent { border: 2px solid var(--peach); background: #FAF3EC; font-weight: 600; }

/* Quiz */
.quiz-progress { flex: 1; height: 6px; border-radius: 100px; background: var(--chipbg); overflow: hidden; }
.quiz-progress > div { height: 100%; border-radius: 100px; background: var(--terra); transition: width .3s ease; }
.quiz-opt {
  display: flex; align-items: center; width: 100%; text-align: left; min-height: 68px;
  padding: 14px 20px; border-radius: 20px; background: #FFFFFF; border: 2px solid transparent;
  box-shadow: var(--shadow-card); font-size: 18px; font-weight: 600; color: var(--ink); line-height: 1.3;
}
.quiz-opt:active { border-color: var(--terra); }

/* Cartes d'aides */
.aid-card {
  display: flex; flex-direction: column; gap: 8px; padding: 18px;
  border-radius: 20px; background: #FFFFFF; box-shadow: var(--shadow-card);
}
.aid-badge {
  align-self: flex-start; font-size: 13px; font-weight: 600; border-radius: 100px; padding: 5px 12px;
}
.aid-badge.probable { color: var(--green); background: rgba(46, 125, 91, .1); }
.aid-badge.possible { color: var(--amber-text); background: rgba(214, 140, 42, .12); }
.aid-title { font-size: 18px; font-weight: 700; color: var(--ink); }
.aid-why { font-size: 15.5px; color: var(--muted); line-height: 1.4; }
.aid-row { display: flex; gap: 10px; font-size: 15.5px; color: var(--ink); line-height: 1.4; }
.aid-row .aid-lb { flex: none; width: 74px; font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--gray); padding-top: 2px; }
.aid-link {
  display: inline-flex; align-items: center; gap: 4px; align-self: flex-start;
  font-size: 15px; font-weight: 600; color: var(--terra); min-height: 40px;
}

/* Fiches + courrier */
.step-row { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.45; color: var(--ink); }
.step-row .step-n {
  flex: none; width: 26px; height: 26px; border-radius: 100px; background: var(--peach); color: var(--terra);
  font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.consent-box { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 20px; background: #FFFFFF; box-shadow: var(--shadow-card); }
.consent-row { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; line-height: 1.4; color: var(--ink); }
.deadline-card {
  display: flex; flex-direction: column; gap: 2px; padding: 18px; border-radius: 20px;
  background: var(--peach); border: 2px solid rgba(199, 91, 57, .25);
}
.deadline-card .dl-lb { font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--terra-deep); }
.deadline-card .dl-date { font-size: 30px; font-weight: 700; color: var(--ink); line-height: 1.1; }
.deadline-card .dl-what { font-size: 16px; font-weight: 600; color: var(--ink); padding-top: 4px; }
.demo-tag {
  flex: none; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); background: var(--chipbg); border-radius: 100px; padding: 4px 10px;
}

/* ==================== SYSTÈME DE MOTION ====================
   Règles : uniquement transform/opacity · 200-450 ms · une seule courbe.
   Tout est coupé si l'utilisateur préfère réduire les animations. */
:root { --ease: cubic-bezier(.22, .9, .32, 1); }

@keyframes ns-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes ns-in-right { from { opacity: 0; transform: translateX(46px); } to { opacity: 1; transform: none; } }
@keyframes ns-in-left { from { opacity: 0; transform: translateX(-46px); } to { opacity: 1; transform: none; } }
@keyframes ns-out-left { to { opacity: 0; transform: translateX(-46px); } }
@keyframes ns-out-right { to { opacity: 0; transform: translateX(46px); } }
@keyframes ns-sheet-up { from { transform: translateY(56px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes ns-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ns-think { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.12); opacity: 1; } }

/* Entrée d'écran (uniquement au changement d'écran/onglet) */
.screen.anim-in { animation: ns-in .3s var(--ease) both; }
.screen.anim-in .detail-sheet { animation: ns-sheet-up .36s var(--ease) both; }
.screen.anim-in .sheet { animation: ns-sheet-up .36s var(--ease) both; }
.tabbar { animation: none; } /* la barre ne rejoue pas l'animation d'écran */

/* Transitions du quiz */
.q-swap-fwd { animation: ns-out-left .17s ease both; }
.q-swap-back { animation: ns-out-right .17s ease both; }
.screen-quiz .q-in-fwd { animation: ns-in-right .3s var(--ease) both; }
.screen-quiz .q-in-back { animation: ns-in-left .3s var(--ease) both; }
.quiz-opt { animation: ns-in .34s var(--ease) both; animation-delay: calc(var(--i, 0) * 55ms); }

/* Apparition au scroll (IntersectionObserver) */
[data-reveal] { opacity: 0; transform: translateY(16px);
  transition: opacity .5s var(--ease) var(--d, 0ms), transform .5s var(--ease) var(--d, 0ms); }
[data-reveal].revealed { opacity: 1; transform: none; }

/* Cascade de la sheet quand on change de catégorie */
.pop-in { animation: ns-in .3s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }

/* Micro-interactions d'appui — jamais sur les marqueurs carte */
.btn, .chip, .fchip, .place-card, .quiz-opt, .dr-card, .dr-hero, .fiche-row,
.menu-item, .q-item, .opt-item, .lang-item, .u-card, .aid-link, .fbtn, .locate-btn,
.share-op .so-ico, .sortbtn {
  transition: transform .13s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.btn:active, .chip:active, .fchip:active, .place-card:active, .quiz-opt:active,
.dr-card:active, .dr-hero:active, .fiche-row:active, .menu-item:active, .q-item:active,
.opt-item:active, .lang-item:active, .u-card:active, .fbtn:active, .locate-btn:active,
.share-op:active .so-ico, .sortbtn:active { transform: scale(.965); }

/* Modales : montée + fondu du voile */
.modal-wrap.open .modal-scrim { animation: ns-fade .25s ease both; }
.modal-wrap.open .modal-sheet { animation: ns-sheet-up .34s var(--ease) both; }

/* Écran de réflexion du quiz */
.think-ico {
  width: 88px; height: 88px; border-radius: 100px; background: var(--peach);
  display: flex; align-items: center; justify-content: center; color: var(--terra);
  animation: ns-think 1.4s var(--ease) infinite;
}
.think-msg { animation: ns-in .4s var(--ease) both; }
.think-dots { display: flex; gap: 7px; }
.think-dots span { width: 8px; height: 8px; border-radius: 100px; background: var(--terra); opacity: .3; animation: ns-think 1.2s ease infinite; }
.think-dots span:nth-child(2) { animation-delay: .2s; }
.think-dots span:nth-child(3) { animation-delay: .4s; }

@media (prefers-reduced-motion: reduce) {
  .screen.anim-in, .screen.anim-in .sheet, .screen.anim-in .detail-sheet,
  .quiz-opt, .pop-in, .q-swap-fwd, .q-swap-back, .screen-quiz .q-in-fwd, .screen-quiz .q-in-back,
  .modal-wrap.open .modal-scrim, .modal-wrap.open .modal-sheet { animation: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .map-weather, .map-stars { animation: none !important; }
}

/* ---------- Filtres bloquants : des conditions d'accès, pas un formulaire ---------- */
.block-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.block-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  min-height: 76px; padding: 12px 14px; border-radius: 18px;
  background: var(--cardrow); border: 2px solid var(--border);
  font-size: 15px; font-weight: 600; color: var(--ink); text-align: left; line-height: 1.2;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .13s var(--ease);
}
.block-card svg { color: var(--muted); transition: color .2s; }
.block-card:active { transform: scale(.96); }
.block-card.on { background: var(--terra); border-color: var(--terra); color: #fff; box-shadow: var(--shadow-terra); }
.block-card.on svg { color: #fff; }
.block-card .bc-check {
  position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 100px;
  background: rgba(255, 255, 255, .25); display: flex; align-items: center; justify-content: center; color: #fff;
}
.phone.hc .block-card { border-color: #141210; background: #fff; }
.phone.hc .block-card.on { background: var(--terra-dark); border-color: #141210; }

/* Bandeau des conditions actives (home + liste) */
.block-banner-row { padding: 10px 16px 0; }
.block-banner {
  display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 8px 8px 16px;
  border-radius: 100px; background: var(--terra); color: #fff;
  font-size: 14px; font-weight: 600; box-shadow: var(--shadow-terra);
}
.block-banner > svg { flex: none; }
.block-banner span { flex: 1; line-height: 1.25; }
.block-banner .bb-x {
  flex: none; width: 28px; height: 28px; border-radius: 100px; background: rgba(255, 255, 255, .22);
  display: flex; align-items: center; justify-content: center; color: #fff;
}

/* Badge sur le bouton filtres */
.fbtn.has-badge, .sortbtn.has-badge { position: relative; }
.fbadge {
  position: absolute; top: -4px; right: -4px; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 100px; background: var(--terra); color: #fff;
  font-size: 11.5px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(199, 91, 57, .4);
}
.sortbtn .fbadge { position: static; margin-left: 6px; }

/* ---------- Recherche contextuelle ---------- */
.search-entry {
  display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px;
  margin: 10px 16px 0; border-radius: 100px; background: #FFFFFF;
  box-shadow: var(--shadow-soft); color: var(--gray); font-size: 16px; width: auto;
}
.search-entry svg { color: var(--muted); flex: none; }

/* ---------- Squelette de tuiles (façon Uber) ----------
   Visible dès le boot et quand des tuiles manquent ; suit l'ambiance via les vars. */
#map-skeleton {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0; transition: opacity .45s var(--ease);
  background-color: var(--map-bg);
  background-image:
    repeating-linear-gradient(0deg, var(--map-road) 0 7px, transparent 7px 72px),
    repeating-linear-gradient(90deg, var(--map-road) 0 7px, transparent 7px 88px),
    repeating-linear-gradient(0deg, transparent 0 30px, var(--map-block) 30px 52px, transparent 52px 72px);
  background-position: 0 0, 24px 0, 0 12px;
}
#map-skeleton.on { opacity: 1; }
#map-skeleton::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
  background-size: 220% 100%;
  animation: ns-map-shimmer 1.9s ease-in-out infinite;
}
.phone[data-amb="night"] #map-skeleton::after, .phone.mode-night #map-skeleton::after {
  background: linear-gradient(100deg, transparent 30%, rgba(143, 135, 166, .16) 50%, transparent 70%);
  background-size: 220% 100%;
}
@keyframes ns-map-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { #map-skeleton::after { animation: none; } }

/* ---------- Onboarding redessiné (hero castor émergeant, fond calé sur le rendu) ---------- */
.screen-ob { background: #FCF8F3 !important; }
.screen-ob .ob-top { padding-top: calc(var(--top-inset) + 6px); }
.ob-copy2 { flex: none; display: flex; flex-direction: column; gap: 12px; text-align: center; padding: clamp(8px, 3vh, 32px) 28px 0; }
.ob-title { margin: 0; font-size: clamp(30px, 5.2vh, 40px); font-weight: 700; color: var(--ink); line-height: 1.12; letter-spacing: -.01em; }
.ob-title em { font-style: normal; color: var(--terra); }
.ob-sub { margin: 0; font-size: clamp(15px, 2.2vh, 17px); color: var(--muted); line-height: 1.45; }
.ob-hero { flex: 1; display: flex; align-items: flex-end; justify-content: center; min-height: 0; overflow: hidden; }
.ob-hero-img { display: block; width: min(100%, 540px); max-height: min(52vh, 520px); object-fit: contain; object-position: bottom center; margin: 0 auto; }
.ob-hero .geo-rings { margin: auto; }
.ob-panel {
  flex: none; display: flex; flex-direction: column; gap: 14px; align-items: center;
  background: #FDF8F4; padding: 10px 20px calc(24px + var(--bot-inset));
}
.ob-panel .btn { width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .screen-ob.anim-in .ob-hero-img { animation: ns-hero-up .6s var(--ease) both; animation-delay: .1s; }
}
@keyframes ns-hero-up { from { transform: translateY(36px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Mode vitrine (?embed) : pas d'outils internes dans la démo du site public */
html.embed #demo-btn, html.embed #demo-panel { display: none !important; }

/* ---------- Boutons flottants : fondu quand la sheet monte ---------- */
.fab115, .locate-btn, #install-band { transition: opacity .28s var(--ease), transform .28s var(--ease); }
.fab-away { opacity: 0 !important; transform: translateY(12px) scale(.92); pointer-events: none; }

/* ---------- Cœurs qui s'envolent (« Ce lieu m'a aidé ») ---------- */
.heart-fly {
  position: absolute; z-index: 95; pointer-events: none; opacity: 0;
  animation: heartFly 1.25s ease-out forwards;
}
@keyframes heartFly {
  0% { opacity: 0; transform: translate(0, 0) scale(.4); }
  14% { opacity: 1; transform: translate(calc(var(--hx, 0px) * .2), -14px) scale(1); }
  100% { opacity: 0; transform: translate(var(--hx, 0px), -130px) scale(1.15); }
}
@media (prefers-reduced-motion: reduce) { .heart-fly { display: none; } }

/* ---------- Accueil : aperçu carte + actualités ---------- */
.acc-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.acc-scroll::-webkit-scrollbar { display: none; }
.acc-map {
  position: relative; display: block; width: 100%; height: calc(196px + var(--top-inset));
  border: 0; padding: 0; background: none; cursor: pointer; text-align: left;
}
.acc-map > svg { width: 100%; height: 100%; display: block; }
.acc-map .ob-mk { width: 36px; height: 36px; }
.acc-map .ob-mk.poser { width: 31px; height: 31px; }
.acc-map .ob-mk.p1 { left: 16%; top: 38%; }
.acc-map .ob-mk.p2 { left: 66%; top: 46%; }
.acc-map .ob-mk.p3 { left: 40%; top: 64%; }
.acc-pill {
  position: absolute; top: calc(var(--top-inset) + 8px); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 5px; white-space: nowrap;
  background: #fff; color: var(--ink); border-radius: 100px; padding: 10px 16px;
  font-size: 14px; font-weight: 500; box-shadow: var(--shadow-soft);
}
.acc-pill b { font-weight: 700; }
.acc-cta {
  position: absolute; right: 14px; bottom: 34px; display: flex; align-items: center; gap: 5px;
  background: var(--fab-bg); color: #fff; border-radius: 100px; padding: 9px 14px;
  font-size: 13px; font-weight: 600; box-shadow: 0 6px 20px rgba(20, 18, 16, .22); white-space: nowrap;
}
.acc-body {
  position: relative; margin-top: -22px; border-radius: 24px 24px 0 0;
  background: var(--paper); padding: 18px 0 var(--tabbar-clear);
  box-shadow: 0 -10px 30px rgba(20, 18, 16, .07);
  display: flex; flex-direction: column;
}
.acc-sec { display: flex; align-items: center; gap: 8px; padding: 0 20px 10px; }

/* Sur l'accueil, les pilules reposent sur un fond plat (pas sur la carte) :
   ombre discrète + fine bordure, sinon l'effet « flottant » paraît trop lourd. */
.acc-body .search-entry, .acc-body .chip, .acc-body .sortbtn {
  box-shadow: 0 1px 3px rgba(20, 18, 16, .04);
  border: 1px solid var(--border);
}
.acc-body .chip.on { border-color: transparent; box-shadow: 0 2px 10px rgba(199, 91, 57, .18); }
.phone[data-amb="night"] .acc-body .chip, .phone.mode-night .acc-body .chip { box-shadow: 0 1px 3px rgba(20, 18, 16, .04); }
.phone[data-amb="night"] .acc-body .chip.on, .phone.mode-night .acc-body .chip.on { box-shadow: 0 2px 10px rgba(199, 91, 57, .18); }
.actus-row {
  display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; padding: 2px 16px 8px;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
}
.actus-row::-webkit-scrollbar { display: none; }
/* Dans une rangée horizontale, l'apparition se fait en fondu seul : le translateY
   du reveal créerait le débordement vertical qu'on vient d'interdire. */
.actus-row [data-reveal] { transform: none; }
.actu-card {
  position: relative; flex: 0 0 76%; max-width: 290px; min-height: 132px;
  border: 0; border-radius: 20px; padding: 16px 16px 15px; color: #fff; text-align: left;
  scroll-snap-align: center; overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column; gap: 5px; justify-content: flex-start;
  transition: transform .18s var(--ease);
}
.actu-card:active { transform: scale(.97); }
.actu-tag { font-size: 11px; font-weight: 700; letter-spacing: .09em; opacity: .85; }
.actu-title { font-size: 18.5px; font-weight: 700; line-height: 1.14; max-width: 88%; }
.actu-txt { font-size: 13.5px; line-height: 1.35; opacity: .92; max-width: 92%; }
.actu-ic { position: absolute; right: -14px; bottom: -18px; pointer-events: none; }
.list-cards { display: flex; flex-direction: column; gap: 10px; padding: 4px 16px 0; }

/* Accueil — météo utile */
.wx-card {
  display: flex; align-items: center; gap: 12px; width: calc(100% - 32px);
  margin: 0 16px 16px; padding: 12px 14px; background: var(--card);
  border-radius: 18px; box-shadow: var(--shadow-card); transition: transform .18s var(--ease);
}
.wx-card:active { transform: scale(.98); }
.wx-card .wx-ic { flex: none; width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.wx-card .wx-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wx-card .wx-tx b { font-size: 15px; line-height: 1.2; }
.wx-card .wx-tx span { font-size: 13px; color: var(--muted); line-height: 1.3; }

/* Accueil — « Ouvre bientôt » */
.soon-row { display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; padding: 0 16px 6px; scrollbar-width: none; }
.soon-row::-webkit-scrollbar { display: none; }
.soon-card {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  background: var(--card); border-radius: 16px; padding: 10px 14px 10px 10px;
  box-shadow: var(--shadow-card); transition: transform .18s var(--ease);
}
.soon-card:active { transform: scale(.97); }
.soon-card .sc-ic {
  flex: none; width: 36px; height: 36px; border-radius: 12px; background: var(--peach);
  color: var(--terra-deep); display: flex; align-items: center; justify-content: center;
}
.soon-card .sc-tx { display: flex; flex-direction: column; gap: 1px; }
.soon-card .sc-tx b { font-size: 14px; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soon-card .when { font-size: 12.5px; font-weight: 600; color: var(--amber-text); }

/* Accueil — bandeau observatoire */
.obs-band {
  display: flex; align-items: center; gap: 12px; width: calc(100% - 32px);
  margin: 16px 16px 2px; padding: 14px; background: var(--peach); border-radius: 18px;
  transition: transform .18s var(--ease);
}
.obs-band:active { transform: scale(.98); }
.obs-band .ob-ic {
  flex: none; width: 44px; height: 44px; border-radius: 14px; background: #fff;
  color: var(--terra); display: flex; align-items: center; justify-content: center;
}
.obs-band .ob-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.obs-band .ob-tx b { font-size: 15px; line-height: 1.2; }
.obs-band .ob-tx span { font-size: 12.5px; color: var(--muted); }

/* ---------- Onboarding v2 : slides, mini-carte vivante, blink ---------- */
.ob-slide { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.ob-slide .ob-hero { flex: 1; }
.ob-trust { font-size: 13px; font-weight: 500; color: var(--gray); letter-spacing: .02em; }
.screen-ob { touch-action: pan-y; }

/* Mini-carte de l'écran 2 : aperçu avec marqueurs vivants */
.ob-map { position: relative; width: min(86%, 380px); margin: auto auto clamp(12px, 4vh, 40px); }
.ob-map svg { display: block; width: 100%; height: auto; border-radius: 24px; box-shadow: 0 12px 44px rgba(20, 18, 16, .10); }
.ob-mk {
  position: absolute; width: 40px; height: 40px; border-radius: 100px; background: var(--green);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(20, 18, 16, .18);
}
.ob-mk.poser { background: #D97B57; width: 34px; height: 34px; }
.ob-mk::before {
  content: ''; position: absolute; inset: 0; border-radius: 100px; background: var(--green); opacity: .5;
  animation: ns-pulse 2.2s ease-out infinite;
}
.ob-mk.poser::before { background: #D97B57; }
.ob-mk svg { position: relative; z-index: 1; }
.ob-mk.p1 { left: 18%; top: 30%; }
.ob-mk.p2 { left: 62%; top: 52%; animation-delay: .4s; }
.ob-mk.p2::before { animation-delay: .7s; }
.ob-mk.p3 { left: 38%; top: 68%; }
.ob-mk.p3::before { animation-delay: 1.3s; }
@keyframes ns-pulse { 0% { transform: scale(1); opacity: .5; } 70% { transform: scale(2.3); opacity: 0; } 100% { opacity: 0; } }

/* Visage castor écran 3 : clignement au tap */
.ob-face {
  display: block; width: min(52vw, 240px, 30vh); margin: auto; cursor: pointer;
  transition: transform .25s var(--ease);
}
.ob-face:active { transform: scale(.95); }
.ob-face.blinking { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) { .ob-mk::before { animation: none; opacity: 0; } }

/* ---------- Logo ---------- */
.brand-symbol { width: 56px; height: 56px; }
.brand-symbol-sm { width: 30px; height: 30px; opacity: .95; }
.ob-top { align-items: center; }

/* ---------- Lecture audio ---------- */
.speak-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; border-radius: 100px; background: var(--chipbg); color: var(--ink);
  font-size: 15px; font-weight: 600; width: 100%;
}
.speak-btn.on { background: var(--terra); color: #fff; }

/* ---------- Espaces pro + observatoire ---------- */
.code-input {
  height: 56px; border-radius: 16px; background: #FFFFFF; border: 2px solid var(--border);
  padding: 0 18px; font-size: 22px; letter-spacing: .4em; text-align: center;
  color: var(--ink); outline: none; width: 100%;
}
.code-input:focus { border-color: var(--terra); }
.pro-place-card {
  display: flex; flex-direction: column; gap: 6px; padding: 18px;
  border-radius: 20px; background: #FFFFFF; box-shadow: var(--shadow-card);
}
.pro-row { padding: 14px 16px; border-radius: 16px; background: #FFFFFF; box-shadow: var(--shadow-card); gap: 14px; align-items: center; }
.pro-row > div:first-child { flex: 1; min-width: 0; }
.pro-row .switch, .pro-row .btn { flex: none; }
.stat-row { display: flex; gap: 10px; }
.stat-card {
  flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 16px;
  border-radius: 18px; background: #FFFFFF; box-shadow: var(--shadow-card);
}
.stat-card .stat-n { font-size: 26px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat-card .stat-l { font-size: 13.5px; color: var(--muted); }
.obs-bar-row { display: flex; align-items: center; gap: 10px; }
.obs-bar-lb { flex: none; width: 74px; font-size: 14px; font-weight: 500; color: var(--ink); }
.obs-bar { flex: 1; height: 12px; border-radius: 100px; background: var(--chipbg); overflow: hidden; }
.obs-bar > div { height: 100%; border-radius: 100px; background: var(--terra); transition: width .6s var(--ease); }
.obs-bar-v { flex: none; width: 38px; font-size: 13.5px; font-weight: 600; color: var(--muted); text-align: right; }
.faible-row {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-radius: 14px; background: #FAF3EC; font-size: 14.5px; color: var(--ink);
}
.faible-row svg { color: var(--terra); flex: none; }
.faible-n { flex: none; font-size: 13px; font-weight: 600; color: var(--terra-deep); }
.mission-card {
  display: flex; flex-direction: column; gap: 12px; padding: 18px;
  border-radius: 20px; background: #FFFFFF; box-shadow: var(--shadow-card);
}
.mission-q {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-radius: 14px; background: var(--cardrow);
  font-size: 15px; font-weight: 500; color: var(--ink);
}
.mission-q.done { background: rgba(46, 125, 91, .08); }
.mission-btn { height: 40px; padding: 0 22px; font-size: 15px; flex: none; }

/* ---------- Calendrier Mano ---------- */
.cal-head { display: flex; align-items: center; justify-content: space-between; }
.cal-month { font-size: 17px; font-weight: 600; color: var(--ink); text-transform: capitalize; }
.cal-nav { width: 38px; height: 38px; }
.cal-nav.flip { transform: rotate(180deg); }
.cal-nav[disabled] { opacity: .3; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dows span { text-align: center; font-size: 12px; font-weight: 600; color: var(--gray); padding: 2px 0; }
.cal-day {
  aspect-ratio: 1; border-radius: 100px; font-size: 15px; font-weight: 500; color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s var(--ease), color .15s var(--ease), transform .12s var(--ease);
}
.cal-day:active { transform: scale(.9); }
.cal-day[disabled] { color: var(--border); }
.cal-day.today { box-shadow: inset 0 0 0 1.5px var(--border); }
.cal-day.sel { background: var(--terra); color: #fff; font-weight: 700; box-shadow: var(--shadow-terra); }

/* ---------- Recherche bénévole ---------- */
.benev-hit {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-radius: 16px; background: #FFFFFF; box-shadow: var(--shadow-card);
}
.benev-act {
  flex: none; height: 38px; padding: 0 14px; border-radius: 100px;
  background: var(--peach); color: var(--terra-deep); font-size: 14px; font-weight: 600;
  display: flex; align-items: center; gap: 5px;
}
.benev-act.ok { background: rgba(46, 125, 91, .1); color: var(--green); }

/* ---------- « Ce lieu m'a aidé » ---------- */
.helped-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; border-radius: 100px; background: #FAF3EC; color: var(--terra-deep);
  font-size: 15px; font-weight: 600; width: 100%;
  transition: background .2s var(--ease), color .2s var(--ease), transform .13s var(--ease);
}
.helped-btn:active { transform: scale(.97); }
.helped-btn.done { background: rgba(46, 125, 91, .08); color: var(--green); }

/* ============ ARABE — sens de lecture de droite à gauche ============
   `dir="rtl"` sur la page retourne les rangées flex et l'alignement du texte,
   ce qui est exactement ce qu'on veut pour l'interface. Restent trois choses
   qui ne doivent PAS se retourner : la carte (ses coordonnées sont
   géographiques), les chiffres et heures, et les flèches qui doivent alors
   pointer dans l'autre sens. */

[dir="rtl"] #map-root,
[dir="rtl"] .maplibregl-map,
[dir="rtl"] .acc-map { direction: ltr; }

/* Heures, distances, numéros : toujours lus de gauche à droite */
[dir="rtl"] .pc-dist,
[dir="rtl"] .statusbar,
[dir="rtl"] .d-hours-row span,
[dir="rtl"] time { direction: ltr; unicode-bidi: embed; }

/* Une flèche « retour » doit ramener vers l'arrière, donc vers la droite */
[dir="rtl"] .back svg,
[dir="rtl"] .d-back svg,
[dir="rtl"] .sheet-back svg { transform: scaleX(-1); }

/* Le point de statut se place naturellement à droite du libellé */
[dir="rtl"] .st { flex-direction: row; }

/* L'arabe a besoin d'un peu plus d'interlignage pour ses diacritiques */
[dir="rtl"] body { line-height: 1.65; }
[dir="rtl"] .pc-name { line-height: 1.4; min-height: 2.8em; }