/* public/styles.css — today.paris */
:root {
  --bg: #f6f5f2;
  --card: #ffffff;
  --ink: #1c1b1a;
  --muted: #6b6862;
  --line: #e6e3dd;
  /* Le logo conserve le rouge du drapeau. L'accent interactif est volontairement plus sombre
     pour atteindre un contraste de 5,66:1 avec le blanc (WCAG AA, texte normal). */
  --accent: #c82032;
  --accent-ink: #ffffff;
  --chip: #f1efe9;
  --chip-active: #1c1b1a;
  --chip-active-ink: #ffffff;
  --good: #2e7d5b;
  --warn-bg: #fff3cd;
  --warn-ink: #6b5300;
  --warn-line: #f2d98a;
  /* Mot-marque bleu-blanc-rouge (souhait de Gérald, 04/08/2026) : bleu et rouge du drapeau
     de Paris (rendu de référence #002395 / #ED2939), point en ivoire — un blanc assez foncé
     pour rester visible sur le fond crème, entouré de deux couleurs vives il se lit « blanc ». */
  --logo-bleu: #002395;
  --logo-point: #ddd1b2;
  --logo-rouge: #ed2939;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.06);
  --maxw: 720px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17161a;
    --card: #201f24;
    --ink: #ecebe8;
    --muted: #a09c96;
    --line: #33313a;
    --accent: #ff4d5e;   /* en thème sombre : le même rouge éclairci, comme le logo */
    --accent-ink: #1a1113;
    --chip: #2a2930;
    --chip-active: #ecebe8;
    --chip-active-ink: #1a1113;
    /* Sur fond sombre, le bleu marine exact serait illisible : on éclaircit les teintes en
       gardant les mêmes tons — le rendu exact du drapeau vit en mode clair. */
    --logo-bleu: #5c7fe6;
    --logo-point: #fff9ec;
    --logo-rouge: #ff4d5e;
    --good: #6cd6a4;
    --warn-bg: #3a3212;
    --warn-ink: #f2d98a;
    --warn-line: #5c5020;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
  }

  /* COULEUR DE BASE DES LIENS, EN THÈME SOMBRE SEULEMENT — WCAG 2.1 AA, mesuré le
     09/09/2026 sur https://today.paris (Playwright + axe-core 4.13.0).

     Cette feuille ne donne de couleur qu'à SIX familles de liens : .langswitch a,
     .crumb a, .pmeta a, .prelated a, .pwiki a et .partner-fallback a. Tous les autres
     héritent du bleu par défaut du navigateur, #0000EE — une couleur que personne n'a
     choisie. En thème CLAIR ce bleu passe largement (8,62:1 sur --bg, 9,40:1 sur
     --card) : rien à corriger, donc rien n'est repeint. En thème SOMBRE il s'effondre,
     pour un seuil AA de 4,5:1 :

       1,92:1  liens du pied de page (mentions légales, confidentialité, Open-Meteo),
               sur les six pages auditées, en français comme en japonais et en arabe
       1,74:1  le NOM DU LIEU sur les pages de quartier (a.pnom > strong) — le contenu
               principal de la page, quasi invisible
       1,49:1  le crédit photo des pages de lieu (#0606B9 : le bleu délavé par
               l'opacité de .pcredit, retirée plus bas)

     POURQUOI SEULEMENT LE SOMBRE (09/09/2026). Hors de ce bloc, la même règle repeint
     aussi le thème clair, là où aucune mesure ne trouve de défaut : relevé sur le site
     publié à 1440 px, 34 liens changent de couleur sur /marais/ — dont 30 noms de lieux,
     « Cathédrale Notre-Dame de Paris » passe du bleu au rouge de la maison — 6 sur
     /mentions-legales/, 5 sur une page de lieu, 4 sur l'accueil. Étendre le rouge au
     thème clair est un CHOIX VISUEL : il revient à Gérald, pas à la mesure. Le jour où
     il le veut, la règle sort de ce bloc : --accent tient 5,19:1 sur --bg et 5,66:1 sur
     --card en clair.

     Le thème sombre n'a pas d'autre déclencheur que cette requête média : aucun attribut
     data-theme n'existe dans la feuille ni dans les pages servies (vérifié le 09/09).

     Épreuve : test/contraste-aa.test.mjs — elle relit ces jetons et refait le calcul. */
  a { color: var(--accent); }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
}

/* Bandeau démo */
.demo-banner {
  background: var(--warn-bg);
  color: var(--warn-ink);
  border-bottom: 1px solid var(--warn-line);
  font-size: 13px;
  text-align: center;
  padding: max(8px, calc(env(safe-area-inset-top, 0px) + 4px)) 16px 8px;
}

/* En-tête */
.hero {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: max(28px, calc(env(safe-area-inset-top, 0px) + 16px)) 20px 8px;
  text-align: center;
}
.langswitch { text-align: right; margin: 0 0 6px; font-size: 13px; }
.langswitch a, .langswitch .cur {
  color: var(--muted); text-decoration: none; padding: 2px 7px;
  /* Cible tactile 44×44 (Gérald, 28/08/2026, balayage 320-1400px) : un code de langue
     court (« IT », « FR ») ne faisait que ~26px de large malgré les 44px de haut. */
  min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center;
}
.langswitch a:hover { color: var(--accent); }
.langswitch .cur { color: var(--ink); font-weight: 700; }
.hero-tools { display: flex; justify-content: flex-end; margin: 0 0 2px; }
.passport-toggle {
  min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink); cursor: pointer; font-size: 12px; font-weight: 750;
}
.passport-toggle:hover, .passport-toggle[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.logo {
  font-size: clamp(30px, 7vw, 44px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
}
/* « Plus que 3 jours » : la seule mention qui a le droit d'attirer l'œil, parce qu'elle
   sert l'urgence du visiteur — pas la mise en avant d'un lieu. */
.offer-meta .urgent { color: var(--accent); font-weight: 600; }
.logo .l-bleu { color: var(--logo-bleu); }
.logo .l-point { color: var(--logo-point); }
.logo .l-rouge { color: var(--logo-rouge); }
.tagline {
  color: var(--muted);
  max-width: 30rem;
  margin: 8px auto 0;
  font-size: 15px;
}
.clock { color: var(--muted); font-size: 13px; margin: 6px 0 0; font-variant-numeric: tabular-nums; }

main {
  max-width: var(--maxw); margin: 0 auto;
  padding: 12px 16px max(40px, calc(env(safe-area-inset-bottom, 0px) + 24px));
}

.passport-panel { margin: 0 0 16px; padding: 17px 18px; }
.passport-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.passport-panel-head h2 { margin: 0; font-size: 20px; line-height: 1.25; }
.passport-panel-head .btn-ghost { flex: none; padding: 8px 11px; font-size: 12px; }
.passport-panel-count { margin: 7px 0 0; color: var(--muted); font-size: 13px; }
.passport-list { margin: 13px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.passport-list li {
  display: flex; justify-content: space-between; gap: 12px; padding: 10px 11px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font-size: 13px;
}
.passport-list time { color: var(--muted); white-space: nowrap; }
.passport-panel-privacy { margin: 12px 0 0; color: var(--muted); font-size: 12px; }
/* LA REPRISE EST UNE BANDE, PLUS UN BARRAGE (29/08/2026). Elle occupait une carte pleine
   hauteur au-dessus de tout ; elle tient maintenant sur une ligne qui accompagne la page. */
.resume-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 14px; margin: 0 0 12px; padding: 9px 13px;
  border: 1px solid var(--line); border-inline-start: 3px solid var(--accent);
  border-radius: 11px; background: var(--card);
}
.resume-bar[hidden], .passport-panel[hidden], .first-offer[hidden], .adventure-fatigue[hidden] { display: none; }
.resume-bar-text { margin: 0; min-width: 0; flex: 1 1 15rem; }
.resume-bar-title { display: block; font-size: 14px; font-weight: 750; line-height: 1.3; }
.resume-bar-note { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.resume-bar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.btn-resume, .btn-resume-ghost {
  min-height: 44px; padding: 9px 14px; border-radius: 999px; cursor: pointer;
  font-size: 13px; font-weight: 750; line-height: 1.2;
}
.btn-resume { border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); }
.btn-resume-ghost { border: 1px solid var(--line); background: transparent; color: var(--muted); }
.btn-resume-ghost:hover { color: var(--ink); border-color: var(--ink); }

/* LE BANDEAU DE LA PREMIÈRE PROPOSITION. Il annonce d'où part le programme affiché juste
   dessous et combien de temps il prend — jamais une position devinée du visiteur. */
.first-offer { margin: 4px 0 10px; }
.first-offer-title {
  margin: 0; color: var(--accent); font-size: 12px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
}
.first-offer-body { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.first-offer-adjust { margin-top: 9px; min-height: 44px; font-size: 13px; }

/* Les cinq territoires editoriaux : une identité visible, sans rendre ce choix obligatoire. */
.territories {
  margin: 10px 0 18px; padding: 18px 20px;
  border-block: 1px solid var(--line);
}
.territories-copy { max-width: 34rem; }
.territories-kicker {
  margin: 0 0 3px; color: var(--accent); font-size: 12px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
}
.territories h2 { margin: 0; font-size: clamp(20px, 4.5vw, 25px); line-height: 1.2; }
.territories-copy > p:last-child { margin: 7px 0 0; color: var(--muted); font-size: 13px; }
.territory-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; margin-top: 14px; }
.territory {
  min-width: 0; min-height: 58px; padding: 9px 8px;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--card); color: var(--ink); cursor: pointer;
  font-size: 12px; font-weight: 720; line-height: 1.2; text-align: start;
  transition: border-color .15s ease, background .15s ease, transform .08s ease;
}
.territory:hover { border-color: var(--accent); transform: translateY(-1px); }
.territory[aria-checked="true"] {
  border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--card));
  box-shadow: inset 0 3px 0 var(--accent);
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Formulaire */
.form { padding: 20px; margin-top: 12px; }
.field { margin-bottom: 18px; }
.field-label { display: block; font-weight: 650; font-size: 14px; margin-bottom: 8px; }
.duration-field { border: 0; min-width: 0; padding: 0; margin-inline: 0; }
.duration-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.duration-chips .chip {
  border-radius: 12px; padding: 12px 8px; font-size: 17px; font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.duration-chips[aria-invalid="true"] { padding: 4px; border: 2px solid var(--accent); border-radius: 14px; }
/* flex-wrap : sur un écran étroit, le bouton passe sous le menu au lieu de sortir de l'écran. */
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.select {
  flex: 1;
  /* Sans min-width:0, un menu déroulant refuse de rétrécir sous la largeur de sa plus longue
     option (« 4ᵉ — Marais / Hôtel de Ville ») : il poussait le bouton « Me localiser » hors de
     l'écran, et toute la page se mettait à défiler latéralement sur téléphone. */
  min-width: 0;
  padding: 12px 40px 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  appearance: none;
  /* chevron intégré (SVG en data-URI, teinté via --muted) pour signaler que c'est un menu */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6862' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.btn-ghost {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}
.btn-ghost:hover { border-color: var(--accent); }
.geo-status { font-size: 13px; color: var(--good); margin: 8px 0 0; }

/* Chips (choix) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--chip);
  color: var(--ink);
  font-size: 14px;
  cursor: pointer;
  transition: transform .06s ease, background .15s ease, color .15s ease;
  user-select: none;
}
.chip:hover { transform: translateY(-1px); }
.chip[aria-checked="true"] {
  background: var(--chip-active);
  color: var(--chip-active-ink);
  border-color: var(--chip-active);
}

.toggle { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); margin: 4px 0 20px; cursor: pointer; }
.toggle input { width: 18px; height: 18px; accent-color: var(--accent); }

/* Criteres secondaires replies : le parcours principal reste lieu → envie → reponse. */
.advanced {
  border: 1px solid var(--line); border-radius: 12px; margin: 2px 0 16px;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
}
.advanced > summary {
  min-height: 44px; display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; cursor: pointer; color: var(--ink); font-size: 14px; font-weight: 650;
}
.advanced > summary::marker { color: var(--muted); }
.advanced-body { border-top: 1px solid var(--line); padding: 16px 14px 2px; }
.advanced-body .field:last-of-type { margin-bottom: 12px; }

.btn-primary {
  width: 100%;
  padding: 15px 18px;
  border: none;
  border-radius: 12px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: filter .15s ease;
}
.btn-primary:hover { filter: brightness(1.05); }
.btn-primary:disabled { opacity: .6; cursor: progress; }
.decision-note { margin: 10px 2px 0; color: var(--muted); font-size: 12px; text-align: center; }
.decision-note.form-error { color: var(--accent); font-weight: 700; }

/* Le produit principal : un programme unique, chronometre et faisable a pied. */
.plan { margin-top: 22px; }
.plan:empty { display: none; }
.plan:focus { outline: none; }
.adventure {
  padding: 20px; overflow: hidden; position: relative;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.adventure::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--accent);
}
[dir="rtl"] .adventure::before { inset: 0 0 0 auto; }
.adventure-kicker {
  margin: 0 0 5px; color: var(--accent); font-size: 12px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
}
.adventure h2 { margin: 0; font-size: clamp(22px, 5vw, 28px); line-height: 1.2; }
.adventure-window { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.adventure-promise { margin: 9px 0 0; color: var(--ink); font-size: 15px; line-height: 1.55; }
.adventure-fit { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.adventure-metrics {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
  margin: 16px 0; padding: 0; list-style: none;
}
.adventure-metrics li {
  min-width: 0; padding: 9px 8px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); text-align: center; color: var(--muted); font-size: 12px;
}
.adventure-metrics strong { display: block; color: var(--ink); font-size: 15px; }
/* La ligne de budget disparaît quand aucun tarif n'est connu (jamais de tiret sous un
   libellé qui promet un chiffre) : les trois mesures restantes se partagent alors toute
   la largeur, au lieu de laisser une colonne vide à droite. */
.adventure-metrics:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.adventure-timeline { margin: 4px 0 18px; padding: 0; list-style: none; display: grid; gap: 10px; }
.adventure-step {
  display: grid; grid-template-columns: 42px 64px minmax(0, 1fr); gap: 11px;
  padding: 12px 0; border-top: 1px solid var(--line);
}
.adventure-step:first-child { border-top: 0; }

/* LE VISAGE D'UNE ÉTAPE (29/08/2026). Photo et plaque occupent la MÊME case de grille :
   l'image est posée par-dessus, et si elle ne se charge pas, la plaque déjà en place
   apparaît d'elle-même. Aucune image de secours à télécharger, aucun cadre vide. */
.astep-visuel { display: grid; width: 64px; height: 64px; }
.astep-visuel > * { grid-area: 1 / 1; }
.astep-photo {
  width: 64px; height: 64px; object-fit: cover; border-radius: 10px;
  background: var(--line);
}
/* LA PLAQUE ÉMAILLÉE DE PARIS — le visuel digne d'une étape sans photo libre (34 % des
   étapes proposées : cafés, librairies, pâtisseries, galeries, que Wikimédia n'a pas).
   Entièrement dessinée en CSS : zéro octet sur le réseau, jamais cassée. Émail vert sombre
   et filet blanc comme dans la rue ; elle garde ses couleurs en thème clair comme en thème
   sombre — une plaque de rue est un objet, pas une surface d'interface. Contraste du blanc
   sur cet émail : 8,9:1, très au-dessus du minimum AA. */
.plaque {
  --plaque-email: #123f37;
  display: grid; place-content: center; gap: 3px; overflow: hidden;
  background:
    radial-gradient(118% 132% at 28% -12%, rgba(255, 255, 255, .13), rgba(255, 255, 255, 0) 60%),
    var(--plaque-email);
  box-shadow: inset 0 0 0 3px var(--plaque-email), inset 0 0 0 4px rgba(255, 255, 255, .72);
  color: #fff; text-align: center;
}
.plaque b { display: block; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.plaque i {
  display: block; font-style: normal; line-height: 1.2; letter-spacing: .07em;
  text-transform: uppercase; opacity: .82;
}
.plaque-med { width: 64px; height: 64px; border-radius: 10px; }
.plaque-med b { font-size: 23px; }
.plaque-med i { font-size: 10px; padding: 0 4px; }
.plaque-bande {
  width: 100%; height: 168px; margin-bottom: 12px; border-radius: 12px;
  box-shadow: inset 0 0 0 5px var(--plaque-email), inset 0 0 0 6px rgba(255, 255, 255, .72);
}
.plaque-bande b { font-size: clamp(30px, 8vw, 42px); }
.plaque-bande i { font-size: 12px; padding: 0 18px; }
.adventure-chapter-photo { height: 168px; }
.adventure-step-number {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--chip-active); color: var(--chip-active-ink); font-weight: 800;
}
.adventure-step-time { margin: 0 0 2px; color: var(--accent); font-size: 12px; font-weight: 750; }
.adventure-step h3 { margin: 0; font-size: 17px; line-height: 1.25; }
.adventure-place-link { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 38%, transparent); text-underline-offset: 3px; }
.adventure-place-link:hover { color: var(--accent); text-decoration-color: currentColor; }
.adventure-step-action { margin: 5px 0; color: var(--ink); font-size: 14px; }
.adventure-step-meta { margin: 0; color: var(--muted); font-size: 12px; }
/* Les agréments d'une étape (08/09/2026) : « Banc (20 m) · Sanisette (33 m) », dans le ton de la méta.
   Séparateur DANS LE TEXTE depuis le 09/09 : pas de flex ici, son gap doublerait l'écart autour du « · ». */
.adventure-step-agrements { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.adventure-actions { display: grid; grid-template-columns: 1.3fr 1fr; gap: 8px; }
.adventure-actions .btn-primary, .adventure-actions .btn-ghost { text-align: center; text-decoration: none; }
.adventure-actions .btn-ghost { white-space: normal; }
.adventure-secondary { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.adventure-honesty { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
/* LE PARCOURS RACCOURCI SE DIT, ET SE REFUSE (09/09/2026). Une ligne discrète sous les
   chiffres du parcours : elle n'apparaît QUE lorsqu'une étape a réellement été retirée. */
.adventure-fatigue { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.adventure-fatigue-refus { padding: 2px 10px; font-size: 12px; min-height: 32px; }
.adventure-now {
  margin: 4px 0 12px; padding: 13px 14px; border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 7%, var(--card));
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
}
.adventure-now p { margin: 0; font-size: 13px; }
.adventure-now .adventure-now-label {
  margin-bottom: 3px; color: var(--accent); font-size: 12px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase;
}
.adventure-trust {
  margin: 0 0 14px; padding: 11px 12px; border-inline-start: 3px solid var(--good);
  border-radius: 9px; background: color-mix(in srgb, var(--good) 7%, transparent);
}
.adventure-trust p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.adventure-trust .adventure-trust-label { margin-bottom: 3px; color: var(--ink); }
.adventure-trust.trust-estimated { border-inline-start-color: var(--warn-ink); background: color-mix(in srgb, var(--warn-bg) 62%, transparent); }

/* Le guidage principal reste dans today.paris. Maps n'est qu'un outil secondaire. */
.adventure-player { padding-top: 18px; }
.adventure-progress-head { display: flex; justify-content: space-between; align-items: end; gap: 12px; }
.adventure-progress-head p { margin: 0; }
.adventure-progress-head > strong { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.adventure-progress-label { color: var(--ink); font-size: 14px; font-weight: 750; }
.adventure-progress {
  height: 7px; margin: 10px 0 19px; overflow: hidden;
  border-radius: 999px; background: var(--line);
}
.adventure-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .25s ease; }
.adventure-chapter {
  padding: 18px; border: 1px solid var(--line); border-radius: 13px;
  background: color-mix(in srgb, var(--bg) 72%, var(--card));
}
.adventure-chapter h2 { font-size: clamp(24px, 6vw, 32px); }
.adventure-chapter-label {
  margin: 0 0 4px; color: var(--muted); font-size: 12px; font-weight: 750;
  letter-spacing: .05em; text-transform: uppercase;
}
.adventure-chapter .adventure-step-action { margin: 14px 0 7px; }
.adventure-chapter .adventure-trust { margin: 15px 0 0; background: var(--card); }
.adventure-player-actions { margin-top: 13px; display: grid; gap: 9px; }
.adventure-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.adventure-tools .btn-ghost { min-width: 0; white-space: normal; text-align: center; text-decoration: none; }
.adventure-map-link { display: inline-flex; align-items: center; justify-content: center; }
.adventure-share { width: 100%; }
.adventure-overview { margin-top: 14px; border-top: 1px solid var(--line); }
.adventure-overview > summary {
  min-height: 48px; display: flex; align-items: center; cursor: pointer;
  color: var(--ink); font-size: 13px; font-weight: 700;
}
.adventure-overview .adventure-timeline { margin-bottom: 0; }
.adventure-step.is-complete .adventure-step-number { background: var(--good); color: #fff; }
.adventure-complete { text-align: start; }
.adventure-recap { margin-top: 17px; }
.adventure-passport {
  margin-top: 17px; padding: 15px 16px; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 13px; background: color-mix(in srgb, var(--accent) 8%, var(--card));
}
.adventure-passport .adventure-passport-title {
  margin: 0 0 4px; color: var(--accent); font-size: 12px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase;
}
.adventure-passport strong { display: block; color: var(--ink); font-size: 17px; line-height: 1.35; }
.adventure-passport p:last-child { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.next-adventure {
  margin-top: 18px; padding: 17px; border: 1px solid var(--line); border-radius: 13px;
  background: color-mix(in srgb, var(--accent) 6%, var(--card));
}
.next-adventure p { margin: 0; color: var(--muted); font-size: 12px; }
.next-adventure h3 { margin: 3px 0 13px; font-size: 20px; }
.next-adventure .next-adventure-origin { margin: -5px 0 13px; color: var(--ink); font-size: 13px; line-height: 1.45; }
.next-adventure .next-adventure-status { min-height: 18px; margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.next-adventure .adventure-share { margin-top: 8px; }
.plan-empty { padding: 24px 20px; text-align: center; }
.plan-empty h2 { margin: 0 0 8px; font-size: 20px; }
.plan-empty p { color: var(--muted); font-size: 14px; }
.explore-more { margin-top: 4px; }
.explore-more > summary {
  min-height: 48px; display: flex; align-items: center; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card);
  color: var(--ink); cursor: pointer; font-size: 14px; font-weight: 700;
}
.explore-more[open] > summary { border-radius: 12px 12px 0 0; }
.explore-list { display: grid; gap: 12px; margin-top: 12px; }

/* Résultats */
.results { margin-top: 22px; display: grid; gap: 14px; }
.results-head { font-size: 14px; color: var(--muted); margin: 4px 2px; }

.offer {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px;
  position: relative;
  animation: rise .28s ease both;
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.offer-top { display: flex; align-items: baseline; gap: 8px; }
.offer-emoji { font-size: 22px; line-height: 1; }
.offer-name { font-size: 18px; font-weight: 750; margin: 0; flex: 1; }
.offer-demo-tag {
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: var(--warn-ink); background: var(--warn-bg);
  border: 1px solid var(--warn-line); border-radius: 6px; padding: 2px 6px; text-transform: uppercase;
}
.offer-desc { color: var(--muted); font-size: 14px; margin: 6px 0 10px; }

.offer-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--ink); margin-bottom: 10px; }
.offer-meta span { display: inline-flex; align-items: center; gap: 4px; }
.offer-meta .price { font-weight: 700; }

.now-proof {
  display: grid; gap: 5px; margin: 2px 0 12px; padding: 10px 12px;
  border-inline-start: 3px solid var(--good); border-radius: 8px;
  background: color-mix(in srgb, var(--good) 8%, transparent);
  color: var(--muted); font-size: 12px; line-height: 1.45;
}
.now-proof strong { color: var(--ink); font-size: 12px; }
.now-proof-line { display: flex; flex-wrap: wrap; gap: 4px 10px; }

.reasons { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.reason {
  font-size: 12px; padding: 4px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
@supports not (background: color-mix(in srgb, red, blue)) {
  .reason { background: var(--chip); color: var(--ink); border-color: var(--line); }
}

.offer-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-action {
  padding: 10px 16px; border-radius: 10px; border: 1px solid var(--accent);
  background: transparent; color: var(--accent); font-weight: 650; font-size: 14px; cursor: pointer;
}
.btn-action:hover { background: var(--accent); color: var(--accent-ink); }
.btn-action.done { background: var(--good); border-color: var(--good); color: #fff; cursor: default; }
.btn-share {
  padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line);
  background: transparent; color: var(--muted); font-weight: 600; font-size: 13px; cursor: pointer;
  min-height: 44px; display: inline-flex; align-items: center;
}
.btn-share:hover { border-color: var(--accent); color: var(--accent); }
.btn-fallback {
  min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: transparent; color: var(--muted); font-weight: 600; font-size: 13px; cursor: pointer;
}
.btn-fallback:hover { border-color: var(--warn-ink); color: var(--ink); }
.fallback-note { margin: 0 0 10px; color: var(--good); font-size: 13px; font-weight: 700; }

.empty, .error {
  text-align: center; color: var(--muted); padding: 30px 16px;
  border: 1px dashed var(--line); border-radius: var(--radius);
}
.error { color: var(--accent); }

/* Carte des lieux */
.map {
  height: 340px;
  margin: 22px 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  z-index: 0;
}
.pin-wrap { background: none !important; border: none !important; }
.pin {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.leaflet-popup-content { font-family: inherit; font-size: 13px; }
.leaflet-container { background: var(--bg); }

/* Contenu "À propos" / FAQ (utile + indexable) */
.about { margin: 34px 4px 0; color: var(--muted); }
.about h2 { font-size: 18px; color: var(--ink); margin: 0 0 8px; }
.about > p { font-size: 14px; line-height: 1.6; margin: 0 0 14px; }
.about details {
  border-top: 1px solid var(--line);
  padding: 10px 0;
}
.about summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink); }
.about details p { font-size: 14px; margin: 8px 0 0; }

/* Pages piliers (contenu SEO) */
.crumb { font-size: 13px; color: var(--muted); margin: 0 0 6px; }
.crumb a { color: var(--muted); }
.pcta { display: inline-block; width: auto; padding: 12px 20px; margin-top: 6px; text-decoration: none; }
.page { max-width: var(--maxw); margin: 8px auto 0; }
.page h2 { font-size: 17px; margin: 26px 0 10px; }
.plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pcard {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
}
.pemoji { font-size: 20px; line-height: 1.2; }
/* Photo libre (Wikimedia Commons) d'un grand lieu, à la place de l'emoji */
.pphoto { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; flex: none; background: var(--line); }
/* Le crédit photo était délavé par `opacity: .75`, qui composait sa couleur avec le fond
   et la faisait tomber sous le seuil DANS LES DEUX THÈMES (axe-core, 09/09/2026, sur
   https://today.paris/marais/ — 19 crédits en clair, 53 en sombre) :
     clair  : #C82032 à 75 % sur blanc    -> #D65865 = 3,85:1
     sombre : #FF4D5E à 75 % sur #201F24  -> #C74250 = 3,37:1
   soit sous les 4,5:1 exigés pour du texte de 12 px. On garde la discrétion voulue, mais
   avec le jeton qui est fait pour ça : --muted donne 5,55:1 sur --card en clair et 5,99:1
   en sombre. Le soulignement du navigateur reste, donc le lien ne se reconnaît pas à sa
   seule couleur (WCAG 1.4.1).

   LA SPÉCIFICITÉ, RELEVÉE PAR CODEX SUR #679 (09/09/2026). Sur les cartes de liste, le
   crédit est un <a class="pcredit"> À L'INTÉRIEUR d'un <span class="pmeta">
   (build-pages.mjs:754). `.pmeta a` (0,1,1) l'emporte donc sur `.pcredit` (0,1,0) : le
   crédit y recevait --accent, et --muted seulement sur la fiche de lieu, où il n'a pas
   cet ancêtre. Deux couleurs pour le même élément selon la page. Aucune des deux ne
   viole AA une fois l'opacité retirée, mais la discrétion voulue n'était pas tenue : on
   nomme donc explicitement le cas gagnant. */
.pcredit, .pmeta a.pcredit { font-size: 12px; color: var(--muted); }
.pbody { display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.pmeta { font-size: 13px; color: var(--muted); }
.pmeta a { color: var(--accent); }
/* EXCEPTION CULTURELLE : « horaires inconnus » sur la fiche d'une église publiée sans
   horaire connu. Une phrase franche mérite d'être vue, jamais d'être un gris de plus. */
.pmeta.pinconnu { color: var(--ink); font-weight: 600; }
.prelated { margin: 28px 0 6px; font-size: 14px; color: var(--muted); }
.prelated a {
  color: var(--accent); display: inline-flex; align-items: center;
  min-height: 44px; margin: 0; padding-block: 6px;
}
.prelated-primary { display: grid; gap: 5px; }
.prelated-more { margin-top: 12px; border-top: 1px solid var(--line); }
.prelated-more > summary {
  min-height: 48px; display: flex; align-items: center; cursor: pointer;
  color: var(--ink); font-weight: 700;
}
.prelated-all { display: grid; gap: 5px; padding: 4px 0 8px; }
.pnote { font-size: 13px; color: var(--muted); margin: 20px 0 0; line-height: 1.6; }

.footer {
  max-width: var(--maxw); margin: 0 auto;
  padding: 20px 20px max(20px, calc(env(safe-area-inset-bottom, 0px) + 12px));
  text-align: center; color: var(--muted); font-size: 12px;
}
/* Liens légaux (mentions légales, confidentialité, contact) : même pied de page que le
   reste du site, sur les 3 pages elles-mêmes et sur toutes les pages qui y renvoient. */
.footer-legal { margin-top: 8px; }

.spinner {
  width: 22px; height: 22px; border: 3px solid var(--line); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .7s linear infinite;
}
.loading-status { min-height: 70px; display: grid; place-items: center; }
.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Photo réelle de l'événement (CDN paris.fr). Bannière en haut de la carte ; se retire seule si l'image casse. */
.offer-img {
  display: block; width: 100%; height: 168px; object-fit: cover;
  border-radius: 12px; margin-bottom: 12px; background: var(--chip);
}
/* Extrait Wikipédia sous la liste des monuments (attribution CC BY-SA liée). */
.pwiki { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 10px 2px 0; }
.pwiki a { color: var(--accent); font-size: 12px; }

/* Points utilitaires de la carte (fontaines, toilettes) : petits et discrets. */
.pin-mini { font-size: 12px; transform: scale(.8); opacity: .9; }

/* Météo du moment : discrète, sous l'accroche. */
.meteo { font-size: 14px; color: var(--muted); margin: 2px 0 0; font-variant-numeric: tabular-nums; }

/* Crédit d'une photo Wikimedia Commons (attribution CC obligatoire), discret sous l'image. */
.img-credit { display: block; font-size: 12px; color: var(--muted); margin: -8px 0 10px; text-decoration: none; }
.img-credit:hover { text-decoration: underline; }

/* Accessibilité : contour de focus visible sur tous les contrôles personnalisés. */
.chip:focus-visible, .territory:focus-visible, .passport-toggle:focus-visible, .btn-ghost:focus-visible, .btn-primary:focus-visible,
.btn-action:focus-visible, .btn-share:focus-visible, .btn-fallback:focus-visible,
.select:focus-visible, .langswitch a:focus-visible, .toggle input:focus-visible,
.advanced > summary:focus-visible, .about summary:focus-visible, .explore-more > summary:focus-visible,
.adventure-overview > summary:focus-visible, .prelated-more > summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* Cibles tactiles : au moins 44px de haut. */
.chip { min-height: 44px; }
.btn-action { min-height: 44px; display: inline-flex; align-items: center; }
.btn-ghost, .btn-primary, .select, .toggle, .about summary { min-height: 44px; }

/* Respect de « mouvement réduit » : on coupe animations et défilement doux. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}

/* Arabe — écriture de droite à gauche. `dir="rtl"` sur <html> retourne déjà le sens du texte
   et des flex ; on ne corrige ici que les éléments à ancrage PHYSIQUE (gauche/droite en dur). */
[dir="rtl"] .langswitch { text-align: left; }
[dir="rtl"] .select {
  padding: 12px 14px 12px 40px;
  background-position: left 14px center;
}
[dir="rtl"] .geo-status,
[dir="rtl"] .about summary,
[dir="rtl"] .about details p { text-align: right; }
/* Le badge démo et les emojis de préfixe restent lisibles ; la carte Leaflet reste en LTR. */
[dir="rtl"] .map { direction: ltr; }

/* Section affiliée (GetYourGuide) — encadré CLAIREMENT distinct des recommandations réelles. */
.affiliate {
  max-width: var(--maxw); margin: 22px auto 0; padding: 18px 20px;
  border: 1px dashed var(--line); border-radius: var(--radius); text-align: center;
}
.affiliate > p { margin: 0 0 12px; font-size: 15px; color: var(--ink); }
.partner-load { width: 100%; white-space: normal; line-height: 1.35; }
.partner-fallback { margin: 10px 0 0 !important; font-size: 14px !important; line-height: 1.5; }
.partner-fallback a { color: var(--accent); font-weight: 750; display: inline-flex; align-items: center; min-height: 44px; padding: 6px 4px; }
.affiliate-note { color: var(--muted); font-size: 12px; margin: 12px 0 0 !important; }
.gyg-widget.partner-loading { min-height: 64px; display: grid; place-items: center; }
.gyg-widget.partner-ready { min-height: 300px; }
.gyg-widget > span { color: var(--muted); font-size: 12px; }
[dir="rtl"] .gyg-widget { direction: ltr; } /* le widget GetYourGuide reste en LTR */

/* Bouton « voir plus » sous les premiers résultats */
.btn-more { display:block; width:100%; margin:14px 0 4px; padding:14px; font-size:16px; }

@media (max-width: 560px) {
  .hero { padding: max(16px, calc(env(safe-area-inset-top, 0px) + 12px)) 16px 4px; }
  .langswitch { margin-bottom: 2px; white-space: nowrap; overflow-x: auto; }
  main { padding: 8px 12px max(32px, calc(env(safe-area-inset-bottom, 0px) + 20px)); }
  .form { padding: 16px; margin-top: 8px; }
  .territories { margin: 5px 0 13px; padding: 15px 4px 17px; }
  .resume-bar { padding: 9px 11px; }
  .resume-bar-actions { width: 100%; }
  .btn-resume { flex: 1 1 auto; }
  .passport-list li { align-items: flex-start; }
  .territory-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .territory:last-child { grid-column: 1 / -1; min-height: 50px; }
  .field { margin-bottom: 15px; }
  .row > .btn-ghost, .row > .select { width: 100%; flex-basis: 100%; }
  .duration-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duration-chips .chip { min-height: 50px; }
  .duration-chips .chip[data-val="day"] { grid-column: 1 / -1; }
  /* Grille pleine : la dernière durée en minutes s'étale si leur nombre est impair. */
  .duration-chips .chip:nth-last-child(2):nth-child(odd) { grid-column: 1 / -1; }
  .advanced { margin-bottom: 14px; }
  .adventure { padding: 18px 16px; }
  .adventure-metrics, .adventure-metrics:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adventure-actions, .adventure-secondary { grid-template-columns: 1fr; }
  .adventure-secondary { grid-column: auto; }
  .adventure-tools { grid-template-columns: 1fr; }
  .adventure-chapter { padding: 16px 14px; }
  .map { height: 300px; }
}

/* Les cinq portes — rangée de pastilles sous l'horloge (variante A choisie par Gérald,
   27/08/2026). Elle défile du doigt si la langue est longue ; jamais de retour à la ligne. */
.portes { display: flex; gap: 8px; overflow-x: auto; padding: 12px 2px 2px; margin: 0 -2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.portes::-webkit-scrollbar { display: none; }
/* Cible tactile 44px de haut (Gérald, 28/08/2026, balayage 320-1400px) : ces pastilles
   ne faisaient que 37px malgré le padding — comme .chip et .btn-ghost plus haut. */
.porte { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--chip); color: var(--ink); border-radius: 999px; padding: 9px 14px; min-height: 44px; font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transition: transform .12s ease; }
.porte:active { transform: scale(.96); }
@media (prefers-reduced-motion: reduce) { .porte { transition: none; } .porte:active { transform: none; } }