/* jetons.css — les valeurs autorisées de la feuille
 *
 * Camping sans voiture — 18 septembre 2026
 *
 * Ce fichier n'habille rien. Il déclare les seules valeurs que le reste
 * du CSS a le droit d'employer pour la couleur, la taille de texte, la
 * graisse, l'interligne, l'espacement, le rayon, l'ombre et l'empilement.
 *
 * Règle d'emploi, à faire tenir par une vérification :
 *   aucune autre feuille du site n'écrit un hexadécimal, un px de taille
 *   de texte, un px d'espacement, un rayon, une ombre ou un z-index en
 *   clair. Tout passe par var(--…). Les exceptions sont nommées ici même,
 *   en commentaire, et nulle part ailleurs.
 *
 * Les rapports de contraste sont mesurés (WCAG 2.1, formule de
 * luminance relative), pas estimés. Le calcul est reproductible :
 * lin(c)=c/12.92 si c<=0.03928 sinon ((c+0.055)/1.055)^2.4 ;
 * L=0.2126R+0.7152G+0.0722B ; rapport=(Lclair+0.05)/(Lsombre+0.05).
 */

:root {

  /* ---------------------------------------------------------------
   * 1. Couleur — par rôle, jamais par teinte
   *
   * Un jeton dit à quoi sert la couleur, pas de quelle couleur il
   * s'agit. « --encre-2 » se relit ; « --gris-clair » se contredit au
   * premier changement de fond.
   * --------------------------------------------------------------- */

  /* MARQUE_LOT394 — LA CHARTE A SEPT RÔLES, pas cinq : le :root de l'accueil de la maquette
     (18 septembre 2026, un seul bloc) nomme navy #153B65, ink #172B3D, sun #FFD45C, sky #EAF4FB,
     paper #FCFCF8, muted #52697E, line #D6E3EF. Les deux derniers avaient été dérivés ici à tort
     (#46586B, #D9DDE2) ; ce sont désormais les siens. Aucun autre rôle n'est à dériver.
     MARQUE_LOT390 — la palette « 2 · Marine & soleil » (Yonah, 18 septembre 2026) :
     identité #153B65, réserver #FFD45C, encadrés #EAF4FB, fond #FCFCF8, texte #172B3D.
     Chaque contraste ci-dessous est mesuré (luminance relative WCAG).
     MARQUE_LOT391 — le lot 390 avait écrit #153865 pour l'identité (un B devenu 8) : corrigé,
     contrastes recalculés ; la charte ne nomme aucun avertissement, --alerte est hérité. */
  --fond:        #FCFCF8;  /* fond de page */
  --surface:     #FFFFFF;  /* cartes, dépliants, feuilles posées sur le fond */
  --encadre:     #EAF4FB;  /* encadrés : colonne du retour, pastilles d'icône, fonds calmes
                              — jamais porteur de texte clair */

  --encre:       #172B3D;  /* texte courant et titres
                              14,09:1 sur --fond · 14,49:1 sur --surface · 12,99:1 sur --encadre */
  --encre-2:     #52697E;  /* texte secondaire, légendes, sources — MARQUE_LOT394 : la valeur
                              de la charte (« muted »), plus une dérivation à nous (#46586B)
                              5,55:1 sur --fond · 5,71:1 sur --surface · 5,12:1 sur --encadre
                              tient AA à toute taille (≥ 4,5:1) */

  --accent:      #153B65;  /* identité : liens, boutons pleins, éléments actifs, panneau du train
                              11,06:1 sur --fond · 11,38:1 sur --surface · 10,20:1 sur --encadre
                              --surface sur --accent : 11,38:1 */
  --appel:       #FFD45C;  /* « Réserver » dans la charte : la commande de réservation, nulle part
                              ailleurs — toujours avec --encre dessus : 10,23:1
                              1,38:1 sur --fond : jamais un fond de texte clair */

  --alerte:      #8A5314;  /* avertissement d'usage : correspondance courte,
                              service non garanti, dernier kilomètre incertain — la palette
                              ne nomme pas d'avertissement, une réserve reste une réserve
                              5,59:1 sur --alerte-fond · 6,14:1 sur --fond */
  --alerte-fond: #FCF0D9;

  --filet:       #D6E3EF;  /* séparation intérieure à une carte — MARQUE_LOT394 : la valeur de la
                              charte (« line »), plus une dérivation à nous (#D9DDE2 au 392) :
                              1,27:1 sur --fond, décoratif, jamais porteur */
  --filet-net:   #CBD1D8;  /* bord d'un objet, bord d'un champ
                              1,50:1 sur --fond — décoratif, jamais porteur */
  --filet-encadre: #6E8FB0;
  /* MARQUE_LOT398 — trois jetons que le :root de la maquette exige et que la charte
     n'avait pas. Contrastes calcules (verif_lot398) : --accent-fonce sur --surface
     13,7:1 (le survol d'un bouton plein, texte --surface dessus) ; --appel-survol
     sur --encre 9,0:1 (le survol de « Reserver », texte --encre dessus) ; --or sur
     --fond 5,2:1 (les etoiles, un signe, pas un texte courant). */
  --accent-fonce: #102E50;
  --appel-survol: #F6C645;
  --or:           #87651D; /* le filet d'un encadré --encadre, le seul qui se voie quand les
                              conditions sont mauvaises : 3,28:1 sur --fond · 3,03:1 sur --encadre
                              · 3,38:1 sur --surface. Un filet sous 3:1 n'est pas une garantie
                              (--filet-net vaut 1,53 sur le fond et 1,41 sur l'encadré), il
                              éteint la question. */

  /* MARQUE_LOT401 — cinq jetons que sa feuille appelait par 27 hexadécimaux sans nom. Chaque
     contraste ci-dessous est recalculé par verif_lot401 depuis ce fichier ; un rôle
     « décoratif » ne se pose jamais sur un mot (le verif compte les `color:`). */
  --transport:      #2A647A; /* le transport en commun : texte et filet d'un repère de carte et d'une
                                pastille de légende « en bus » — jamais un fond
                                6,14:1 sur --transport-fond · 6,56:1 sur --surface · 6,38:1 sur --fond */
  --transport-fond: #EFF9FF; /* le fond de ce repère et de cette pastille — --encre dessus : 13,57:1 */
  /* MARQUE_LOT439 — les couleurs de facilité des repères (plantes du lot 438),
     venues de la maquette « Repères Marine & soleil » de Yonah. Contrastes WCAG mesurés
     (verif_lot439 les recalcule). Les trois premières portent du texte (AA ≥ 4,5:1 sur
     les trois surfaces) ; --neutre est l'état « à vérifier », décoratif/UI (≥ 3:1),
     jamais du texte courant. */
  --facile:      #257653; /* facilité facile : 5,53:1 sur --surface · 5,38:1 sur --fond · 4,96:1 sur --encadre */
  --moyen:       #975D15; /* facilité moyenne : 5,40:1 sur --surface · 5,25:1 sur --fond · 4,84:1 sur --encadre */
  --difficile:   #B53C38; /* facilité difficile : 5,72:1 sur --surface · 5,57:1 sur --fond · 5,13:1 sur --encadre */
  --neutre:      #66798B; /* état à vérifier : 4,49:1 sur --surface · 4,37:1 sur --fond · 4,03:1 sur --encadre — décoratif/UI, jamais porteur */
  --focus:          #547A9E; /* l'anneau de focus clavier, 3 px, posé à 4 px hors de l'élément
                                4,51:1 sur --surface · 4,39:1 sur --fond · 4,05:1 sur --encadre
                                (un indicateur tient 3:1 ; son ambre #DF9D43 faisait 2,26:1 sur --fond) */
  --alerte-filet:   #D8C38E; /* le filet d'un encadré d'avertissement — décoratif, jamais sur un mot :
                                1,54:1 sur --alerte-fond, c'est le mot qui fait le travail */
  --encre-3:        #60758B; /* trait fin : connecteur des pas, soulignement d'un sélecteur, bord du
                                bouton secondaire du dock — décoratif, jamais sur un mot :
                                4,76:1 sur --surface · 4,63:1 sur --fond · 3,05:1 sur --encre
                                (son fichier le posait en texte de pied de page : ce texte prend --filet, 11,10:1) */

  /* MARQUE_LOT444 — les 28 nuances bespoke de la feuille candidate « reperes » (migration de
     la fiche, docs/journal/chantier-migration-fiche-reperes-marine-soleil.md, §9.5), jusque-la
     en clair dans gabarit-reperes.css (439 §7.5). Valeurs de la maquette de Yonah, nommees par
     ROLE, INCHANGEES (migration = affichage seul, § 7ter). Prefixe --rep- : locales au candidat,
     pas promues a la charte du site. Les paires etat texte/fond portent du texte (contraste WCAG
     mesure, verif_lot444 le recalcule) ; fonds, filets et ombres sont decoratifs (jamais un mot). */
  --rep-etat-facile-texte:   #206343; /* texte d'un etat « facile » (pastille, etape franchie) : 6,11:1 sur --rep-etat-facile-fond, 6,19:1 sur --rep-etape-faite-fond */
  --rep-etat-facile-fond:    #e3f0e7; /* fond de la pastille « facile » */
  --rep-etat-moyen-texte:    #895014; /* texte « moyen » : 5,81:1 sur --rep-etat-moyen-fond */
  --rep-etat-moyen-fond:     #fff0d8; /* fond de la pastille « moyen » */
  --rep-etat-difficile-texte: #9f3330; /* texte « difficile » : 5,90:1 sur --rep-etat-difficile-fond */
  --rep-etat-difficile-fond: #fbe7e4; /* fond de la pastille « difficile » */
  --rep-etat-neutre-texte:   #4f6478; /* texte « a verifier » (etat par defaut) : 5,20:1 sur --rep-etat-neutre-fond */
  --rep-etat-neutre-fond:    #e8edf2; /* fond de la pastille neutre */
  --rep-etape-faite-fond:    #e6f1e8; /* fond d'une etape franchie (panneau des reglages) */
  --rep-progres-piste:       #d0dee9; /* piste de la barre de progression — decoratif */
  --rep-surtitre-icone:      #9b741f; /* icone du surtitre (repere de lieu) : 3,83:1 sur --encadre — UI (>= 3:1), jamais un mot */
  --rep-demo-fond:           #f3f6f8; /* fond du bandeau de demonstration (supprime a la generation) */
  --rep-avatar-fond:         #fff9; /* fond translucide de l'avatar du compte — decoratif */
  --rep-favori-actif-fond:   #fff2c2; /* fond du bouton favori active — decoratif */
  --rep-tampon-filet:        #a3bbcd; /* filet pointille d'un tampon decoratif — jamais un mot */
  --rep-puce-cochee-filet:   #a9bed0; /* bord d'une puce a cocher cochee — decoratif */
  --rep-vide-filet:          #afc4d5; /* filet pointille d'un etat vide — decoratif */
  --rep-trio-fond:           #f6f9fc; /* fond du trio de plantes */
  --rep-trio-filet:          #e6edf4; /* filet du trio de plantes — decoratif */
  --rep-plante-survol-fond:  #e8f1f8; /* fond d'une plante au survol */
  --rep-credit-photo-fond:   #153b65c9; /* bandeau opaque du credit photo (§ 8, texte blanc dessus) : blanc >= 6,05:1 meme sur une photo blanche (le voile porte la lisibilite) */
  --rep-art-rando-fond:      #edf3e8; /* fond d'illustration d'un lieu — randonnee */
  --rep-art-ludique-fond:    #fff3ce; /* fond d'illustration d'un lieu — loisirs */
  --rep-art-visite-fond:     #edf1f8; /* fond d'illustration d'un lieu — visite */
  --rep-ombre-carte:         #153b650c; /* teinte de l'ombre d'une carte au survol — decoratif */
  --rep-ombre-dialogue:      #153b6538; /* teinte de l'ombre d'un dialogue — decoratif */
  --rep-ombre-toast:         #153b6522; /* teinte de l'ombre d'un toast — decoratif */
  --rep-voile-dialogue:      #102e5066; /* voile derriere un dialogue (backdrop) — decoratif */

  /* Une information n'est jamais portée par la seule couleur : un
   * avertissement porte un mot, un état actif porte une forme.
   * --filet et --filet-net ne tiennent aucun seuil de contraste de
   * texte : ils ne portent ni texte ni sens. */


  /* ---------------------------------------------------------------
   * 2. Texte — 8 tailles, 3 graisses, 3 interlignes
   *
   * La maquette mesurée en portait 19 tailles et 7 graisses. Huit
   * degrés suffisent à tout ce que la fiche dit ; au-delà, deux
   * degrés voisins ne se distinguent plus et la hiérarchie ment.
   * --------------------------------------------------------------- */

  --t-mention:  11px;     /* mention légale, crédit photo, source */
  --t-legende:  12.5px;   /* légende, étiquette, unité */
  --t-petit:    14px;     /* texte secondaire, tableau dense */
  --t-texte:    16px;     /* texte courant — le degré par défaut */
  --t-appui:    18px;     /* chapô, phrase de tête d'un bloc */
  --t-titre-3:  24px;     /* titre de section dans la fiche */
  --t-titre-2:  34px;     /* titre de la fiche */
  --t-titre-1:  54px;     /* titre d'accueil, chiffre isolé qui fait la page */

  --g-normal:   400;
  --g-appuyee:  600;      /* étiquette, titre de section, bouton */
  --g-forte:    700;      /* titre de page, total qui se lit seul */

  --i-serre:    1.2;      /* titres (--t-titre-3 et au-dessus) */
  --i-courant:  1.45;     /* étiquettes, tableaux, listes courtes */
  --i-lecture:  1.6;      /* paragraphes suivis */

  /* Familles. Le choix d'hébergement reste à trancher par une mesure :
   * deux woff2 locaux (sous-ensemble latin) contre l'appel à un tiers.
   * Tant que la mesure n'est pas faite, la pile ci-dessous rend la page
   * lisible sans aucun téléchargement. */
  /* MARQUE_LOT386 — dans le sens de la maquette : le texte en DM Sans, les titres en Manrope
     (body{font-family:'DM Sans'} ; h1,h2,h3{font-family:Manrope}) ; les deux sont servies
     depuis /polices/ (recuperer_polices.py), sous-ensembles latin et latin-ext. */
  --police-titre: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --police-texte: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --police-chiffres: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* Les durées, distances et heures s'alignent en colonne :
   * font-variant-numeric: tabular-nums partout où des chiffres
   * se comparent verticalement. */


  /* ---------------------------------------------------------------
   * 3. Espacement — une échelle de 4
   * --------------------------------------------------------------- */

  --e-1:   4px;
  --e-2:   8px;
  --e-3:  12px;
  --e-4:  16px;   /* gouttière par défaut, marge intérieure d'une carte */
  --e-5:  24px;
  --e-6:  32px;   /* entre deux sections de la fiche */
  --e-7:  48px;
  --e-8:  64px;

  /* L'espacement se pose par le conteneur (flex/grid + gap), pas par
   * une marge sur chaque enfant : deux marges voisines s'additionnent
   * ou s'effondrent selon le contexte, et l'écart cesse d'être mesurable. */


  /* ---------------------------------------------------------------
   * 4. Rayon — 4 valeurs
   * --------------------------------------------------------------- */

  --r-0:     0;
  /* MARQUE_LOT399 — l'échelle relevée sur le fichier de la maquette (100 déclarations,
     26 valeurs, 3 à 40 px) et ramenée à trois rayons : 3-9 → petit, 10-17 → moyen,
     18-40 → grand. Les jetons d'avant (6 / 12) avaient été écrits avant sa charte. */
  --r-petit: 8px;    /* champ, étiquette, vignette, pastille */
  --r-moyen: 12px;   /* bouton, carte de liste, encadré */
  --r-grand: 22px;   /* panneau, héros, dialogue, feuille */
  --r-pilule: 999px; /* pastille d'état, filtre actif */


  /* ---------------------------------------------------------------
   * 5. Ombre — 3 valeurs, une par hauteur
   *
   * Une ombre dit qu'un objet est détaché du fond. Trois hauteurs :
   * posé, soulevé par l'action, recouvrant la page.
   * --------------------------------------------------------------- */

  --o-repos:        0 1px 2px rgba(24, 58, 51, .06);
  --o-souleve:      0 4px 12px rgba(24, 58, 51, .10);
  --o-recouvrement: 0 12px 32px rgba(24, 58, 51, .18);


  /* ---------------------------------------------------------------
   * 6. Empilement — 4 étages, et rien entre les étages
   *
   * Étage A · contenu           0 à 9
   * Étage B · blocs isolés      chaque bloc pose isolation: isolate et
   *                             recompte à 0 chez lui ; ses enfants ne
   *                             sortent jamais de son contexte
   * Étage C · chrome          100 à 199
   * Étage D · recouvrements   200 à 299
   *
   * Un nombre hors de ces plages, ou un z-index écrit en clair dans une
   * feuille, est un défaut : c'est ainsi que la carte est passée
   * par-dessus la barre d'action.
   * --------------------------------------------------------------- */

  --z-calque:          1;  /* MARQUE_LOT390 — un calque local dans son bloc (étage 1) : l'étiquette
                              posée sur les photos, au-dessus des figures positionnées */
  --z-barre-action:  110;  /* barre d'action basse de la fiche */
  --z-site-head:     120;  /* en-tête du site */
  --z-haut:          130;  /* bouton « remonter » */
  --z-anc:           140;  /* ancres collantes de section */
  --z-saut:          190;  /* lien d'évitement, au clavier, au-dessus du chrome */

  --z-voile:         210;  /* voile derrière un recouvrement */
  --z-feuille:       220;  /* feuille qui monte du bas (mobile) */
  --z-detail:        230;  /* dépliant de détail ouvert par-dessus */
  --z-modale:        240;
  --z-visionneuse:   250;  /* photos en plein écran */

  /* La carte appartient à l'étage A et pose isolation: isolate.
   * Ses contrôles internes (zoom, calques, attribution) se numérotent
   * chez elle, de 1 à 9, et ne peuvent plus atteindre le chrome. */


  /* ---------------------------------------------------------------
   * 7. Mesures de ligne et de page
   * --------------------------------------------------------------- */

  --largeur-lecture: 68ch;   /* longueur de ligne d'un paragraphe suivi */
  --largeur-page:    1120px; /* largeur maximale du contenu */
  --cible-tactile:   44px;   /* hauteur et largeur minimales d'une cible */

  /* MARQUE_LOT522 — SES nuances (portee.css, portee-liste.css : le kit « À ma portée » du 4/10), nommées
     par rôle, valeurs inchangées ; gabarit_portee.JETONS_522 est la source, feuille() les pose. */
  --po-encre: #173e63;
  --po-filet-activity-cover: #c8dbe7;
  --po-filet-activity-types: #cfdfe9;
  --po-filet-arrival-warning: #d8a34c;
  --po-filet-booking-card: #d8e4ed;
  --po-filet-camp: #dfe7ed;
  --po-filet-card-footer: #e3eaf0;
  --po-filet-carte: #dce6ed;
  --po-filet-carte-activites: #dce7ee;
  --po-filet-checks: #cbdbe5;
  --po-filet-checks-actif: #b3d1bf;
  --po-filet-daily-group-content: #e1eaf0;
  --po-filet-detail-mobile-dock: #ccdde9;
  --po-filet-dock: #ccdbe6;
  --po-filet-empty-meter: #b6c7d3;
  --po-filet-family: #e2e9ee;
  --po-filet-filters: #cfdce5;
  --po-filet-gallery-button: #d9e3e9;
  --po-filet-header: #dfe6eb;
  --po-filet-input-grid: #c4d6e3;
  --po-filet-jauge-exclu: #8298a7;
  --po-filet-key-button: #93a9b9;
  --po-filet-ligne: #e2eaf0;
  --po-filet-live-preview: #d9e6ee;
  --po-filet-ludique: #ecdeb8;
  --po-filet-map-toolbar-bouton: #c5d9e6;
  --po-filet-notebook-line: #e1eaf1;
  --po-filet-partner-offer: #d5e1ea;
  --po-filet-partner-offer-survol: #668ea9;
  --po-filet-place-details-grid: #dce7ef;
  --po-filet-place-line: #e7eef3;
  --po-filet-preference-details: #d5e2eb;
  --po-filet-preview-stats: #cbdfe9;
  --po-filet-rando: #c9ddce;
  --po-filet-reading: #dce5ed;
  --po-filet-reading-key: #dde6ec;
  --po-filet-route-option: #dbe5ed;
  --po-filet-route-option-actif: #91b7a0;
  --po-filet-save-place: #d0dee8;
  --po-filet-save-place-actif: #b1d0bd;
  --po-filet-secondary: #cedce6;
  --po-filet-secondary-actif: #b8d5c2;
  --po-filet-section: #dfe8ef;
  --po-filet-section-number: #f1c445;
  --po-filet-segmented: #dae4eb;
  --po-filet-select-filter: #d3e1eb;
  --po-filet-sheet-footer: #dbe7ee;
  --po-filet-train-box: #dce9f2;
  --po-filet-train-shortcut: #dee8ef;
  --po-filet-travelers-field: #c6d9e7;
  --po-focus: #286db3;
  --po-fond-activity-map: #edf0e6;
  --po-fond-activity-media: #e9f2f7;
  --po-fond-activity-row-survol: #f2f6f9;
  --po-fond-activity-types-actif: #193e63;
  --po-fond-advanced: #f1f5f8;
  --po-fond-arrival-survol: #f5f8fa;
  --po-fond-badge-difficile: #fcece9;
  --po-fond-badge-exclu: #edf2f6;
  --po-fond-badge-facile: #eaf5ed;
  --po-fond-badge-moyen: #fff1de;
  --po-fond-checks-actif: #edf5ef;
  --po-fond-close: #edf3f7;
  --po-fond-curseur-piste: #e3ebf1;
  --po-fond-curseur-poignee: #204e77;
  --po-fond-curseur-rempli: #1e5279;
  --po-fond-demo-dot: #6c8395;
  --po-fond-demo-result: #f0f6fa;
  --po-fond-detail-notice: #f0f5f8;
  --po-fond-detail-stats: #eff4f7;
  --po-fond-dock-symbol: #fff0bb;
  --po-fond-encart: #f1f6f9;
  --po-fond-gallery: #e6eff4;
  --po-fond-jauge-difficile: #b24b43;
  --po-fond-jauge-exclu: #d1dce3;
  --po-fond-jauge-graduation: #dbe5ec;
  --po-fond-jauge-inconnu: #e9eef2;
  --po-fond-jauge-inconnu-hachure: #8399a8;
  --po-fond-jauge-moyen: #ae661b;
  --po-fond-jauge-piste: #edf2f5;
  --po-fond-live-preview: #edf4f8;
  --po-fond-ludique: #fff6e1;
  --po-fond-map-point: #153f66;
  --po-fond-next-step: #eff5f9;
  --po-fond-notebook-count: #eef3f7;
  --po-fond-notebook-line: #eef4f8;
  --po-fond-page: #f5f7f9;
  --po-fond-photo: #dae6ed;
  --po-fond-portee-carte: #eef3f6;
  --po-fond-primary-survol: #ffcb3a;
  --po-fond-rando: #edf4ee;
  --po-fond-route-option-actif: #fafdfb;
  --po-fond-save-place-actif: #edf6f0;
  --po-fond-secondary-actif: #eef6f0;
  --po-fond-segmented: #eaf0f5;
  --po-fond-summary-row-survol: #f6f9fb;
  --po-fond-train-box: #eef5fa;
  --po-icone-arrival-chevron: #55738a;
  --po-icone-chevron-down: #54778f;
  --po-icone-family-heading: #496b85;
  --po-icone-group-heading: #58768e;
  --po-icone-large-symbol: #285b7e;
  --po-icone-route-option: #55758d;
  --po-icone-row-chevron: #56768d;
  --po-icone-row-label: #536f84;
  --po-icone-summary-arrow: #607c90;
  --po-icone-summary-icon: #56758c;
  --po-ombre-booking-card: #1438590a;
  --po-ombre-camp: #14385908;
  --po-ombre-camp-map-pin: #18354e25;
  --po-ombre-curseur-poignee: #153d6850;
  --po-ombre-detail-mobile-dock: #173e6026;
  --po-ombre-dialog: #08264240;
  --po-ombre-dock: #193e6029;
  --po-ombre-gallery-button: #193e6030;
  --po-ombre-map-point: #18354e35;
  --po-ombre-segmented-actif: #193c4f13;
  --po-ombre-toast: #14385922;
  --po-selection: #183f64;
  --po-texte-activities-empty: #53768e;
  --po-texte-activity-access: #275778;
  --po-texte-activity-address: #5b798e;
  --po-texte-activity-count: #193f64;
  --po-texte-activity-cover: #315e7f;
  --po-texte-activity-description: #4e7088;
  --po-texte-activity-meta: #55778e;
  --po-texte-advanced: #4f6e85;
  --po-texte-affiliate-note: #58788f;
  --po-texte-amenities: #3b617d;
  --po-texte-arrival-warning: #875619;
  --po-texte-bouton-activite: #235e86;
  --po-texte-bouton-journee: #245a7d;
  --po-texte-bouton-resume: #225679;
  --po-texte-bouton-route: #285e84;
  --po-texte-breadcrumb: #567084;
  --po-texte-breadcrumb-lien: #335c7b;
  --po-texte-camp-link: #204e75;
  --po-texte-camp-location: #4c6a80;
  --po-texte-camp-map-pin: #153d5e;
  --po-texte-camp-sous-titre: #506d82;
  --po-texte-camp-titre: #123b61;
  --po-texte-card-footer: #5b7487;
  --po-texte-card-footer-bouton: #194d75;
  --po-texte-daily-chip: #2a506c;
  --po-texte-demo-note: #5d7587;
  --po-texte-demo-result: #4c6f88;
  --po-texte-description: #506f86;
  --po-texte-detail-image-credit: #5a788c;
  --po-texte-detail-link: #1f537b;
  --po-texte-detail-mobile-dock: #25587c;
  --po-texte-detail-notice: #486a82;
  --po-texte-difficile: #a13f35;
  --po-texte-easy-toggle: #315b78;
  --po-texte-exclu: #50677a;
  --po-texte-eyebrow: #516f84;
  --po-texte-facile: #256c4b;
  --po-texte-featured: #385872;
  --po-texte-form-feedback: #a24035;
  --po-texte-group-state: #4e6e84;
  --po-texte-input-grid: #56758b;
  --po-texte-intro: #506a7e;
  --po-texte-intro-titre: #173b61;
  --po-texte-invalid: #a54335;
  --po-texte-jauge-difficile: #a64036;
  --po-texte-jauge-moyen: #945414;
  --po-texte-key-button: #476c86;
  --po-texte-legend-items: #405d73;
  --po-texte-legende: #566f81;
  --po-texte-liste: #47647d;
  --po-texte-ludique: #85632a;
  --po-texte-map-toolbar: #476c85;
  --po-texte-method: #4a6c85;
  --po-texte-moyen: #91510c;
  --po-texte-next-step: #52718a;
  --po-texte-notebook-count: #1c496b;
  --po-texte-notebook-line: #55788f;
  --po-texte-offer-intro: #59788e;
  --po-texte-optional: #678499;
  --po-texte-out-of: #607788;
  --po-texte-page: #183a56;
  --po-texte-page-heading: #173b60;
  --po-texte-partner-offer: #204e70;
  --po-texte-partner-offer-note: #5b7990;
  --po-texte-period: #516c80;
  --po-texte-photo-controls: #285f85;
  --po-texte-place-details-terme: #5e7b90;
  --po-texte-place-details-valeur: #204c6c;
  --po-texte-place-line: #55758c;
  --po-texte-preview-feedback: #4e6e87;
  --po-texte-preview-feedback-actif: #25724f;
  --po-texte-preview-select: #1b4c71;
  --po-texte-preview-stats: #4e6d84;
  --po-texte-preview-stats-note: #5d7a90;
  --po-texte-price-line: #58778e;
  --po-texte-price-note: #637f91;
  --po-texte-primary: #153b60;
  --po-texte-profile-line: #587185;
  --po-texte-rando: #386d4e;
  --po-texte-range-ends: #58768b;
  --po-texte-reading: #4e6c82;
  --po-texte-route-duration: #58758b;
  --po-texte-route-facts: #4f6e84;
  --po-texte-route-frequency: #365f7e;
  --po-texte-route-why: #486d84;
  --po-texte-row-label: #254963;
  --po-texte-row-value: #244b66;
  --po-texte-save-place-actif: #286d4d;
  --po-texte-secondaire: #536e82;
  --po-texte-secondary: #204c6e;
  --po-texte-section-intro: #4c6b82;
  --po-texte-section-navigation: #284f6d;
  --po-texte-section-navigation-survol: #183e63;
  --po-texte-section-summary: #536e81;
  --po-texte-select-filter: #526f85;
  --po-texte-select-filter-valeur: #2d5673;
  --po-texte-slider-label: #536f83;
  --po-texte-summary-copy: #557185;
  --po-texte-summary-quantity: #275271;
  --po-texte-summary-row: #173d5f;
  --po-texte-train-heading: #55768d;
  --po-texte-travelers-field: #355c79;
  --po-texte-travelers-field-valeur: #193f60;
  --po-texte-tri: #526e82;
  --po-texte-why: #506e84;
  --po-voile-activity-media: #183d57b8;
  --po-voile-detail-mobile-dock: #fffffff9;
  --po-voile-dialog: #16334991;
  --po-voile-gallery-credit: #11354bba;
  --po-voile-photo-credit: #0b2e47b8;
  --po-voile-section-navigation: #fffffff5;
}

/* MARQUE_LOT390 — la fiche d'essai lit les jetons, pas le :root du generateur (les trois
   noms communs du lot 385 : --encre, --encre-2, --filet). Memes valeurs qu'au-dessus. */
body.p-essai {
  --encre: #172B3D;
  --encre-2: #52697E;
  --filet: #D6E3EF;
}

:root{--fam-commerce:#1D4ED8;--fam-restaurant:#B45309;--fam-sante:#BE123C;--fam-patrimoine:#7C3AED;--fam-nature:#15803D;--fam-loisir:#0891B2;--fam-tourisme:#0F766E;--fam-service:#6B7280;--tcf-monument:#7C3AED;--tcf-musee:#B45309;--tcf-nature:#15803D;--tcf-plage:#0369A1;--tcf-autre:#6B7280;}

*,*::before,*::after{box-sizing:border-box}
:root{
  /* Guinguette : turquoise et jaune soleil. La couleur est concentree sur les
     etiquettes, les boutons et les badges ; le fond reste presque blanc. Une
     page dont le fond est colore parait plus complexe, et la complexite visuelle
     est ce qui se juge le plus vite — des 17 millisecondes. */
  --bg:#FFFFFF; --bg-2:#F5F7F7; --bg-3:#E9EFEE; --card:#FFFFFF;
  --ink:#12211F; --ink-2:#586462; --ink-3:#5F6D6A; --line:#E3E8E7;
  --green:#0F6E7A; --green-d:#0A5058; --green-l:#DFF1F2; --amber:#E9960B;
  /* MARQUE_LOT161 — LES NOMS DE LA CHARTE, SUR LES PAGES QUI NE LA CHARGENT PAS.
     charte.css definit --vert, --vert-f et --blanc, mais une fiche ne la
     charge pas : elle ne recoit que style.css. jeu.css emploie pourtant
     var(--vert) 51 fois et var(--blanc) 4 fois, pages.css 5 fois de plus.
     Toutes ces references etaient invalides, donc ignorees en silence —
     dont le fond du bouton pause du lecteur, qui apparaissait blanc.
     Trois alias valent mieux que soixante renommages. */
  --vert:var(--green); --vert-f:var(--green-d); --blanc:#FFFFFF;
  /* MARQUE_LOT262 — LE MEME DEFAUT QUE CI-DESSUS, MANQUE AU LOT 161.
     `--mut` n'etait defini NULLE PART, et 18 declarations ecrivent
     `color:var(--mut)`. Une variable inexistante rend la propriete invalide
     au calcul : elle devient `unset`, donc HERITEE. Dans le corps de page le
     parent est l'encre sombre, et le texte restait lisible par accident ;
     dans le pied de page le parent est deja pale, et le badge « lien
     affilie » tombait a **1,43:1** — sur une mention legale, trouvee par
     l'audit visuel du 11 septembre.
     `--ink-2` et pas `--ink-3` : 4,97 contre 4,37 sur le fond du badge, et
     WCAG AA exige 4,5. */
  --mut:var(--ink-2);
  --r:14px; --r-l:20px; --r-xl:28px;
  --f:"Instrument Sans","Segoe UI Variable Display","Segoe UI",system-ui,
      -apple-system,Inter,"Helvetica Neue",Arial,sans-serif;
  --f-titre:"Bricolage Grotesque",var(--f);
  --sh:0 1px 2px rgba(14,26,20,.05),0 6px 20px -10px rgba(14,26,20,.16);
  --sh-h:0 2px 6px rgba(14,26,20,.07),0 22px 44px -20px rgba(14,26,20,.30);
  /* MARQUE_LOT122 — les noms de la charte, pointés sur la palette de cette
     feuille. tuile.css les emploie ; les recopier en valeurs les ferait
     diverger le jour où l'une des deux bouge. */
  --encre:var(--ink); --encre-2:var(--ink-2); --encre-3:var(--ink-3);
  --papier:var(--bg-2); --papier-2:var(--bg-3);
  --filet:var(--line); --filet-f:rgba(12,16,15,.22);
  --ambre:var(--amber);
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--f);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%;display:block}
a{color:var(--green);text-decoration:none}
a:hover{color:var(--green-d)}
h1,h2,h3,h4{font-family:var(--f-titre);font-weight:700;line-height:1.12;
  letter-spacing:-.02em;margin:0 0 .45em;font-optical-sizing:auto}
h1{font-weight:800}
h1{font-size:clamp(32px,5vw,54px)}
h2{font-size:clamp(24px,3vw,34px);margin-top:1.5em}
h3{font-size:19px;letter-spacing:-.015em}
p{margin:0 0 1em}
.wrap{max-width:1320px;margin:0 auto;padding:0 24px}
.narrow{max-width:720px}
.mut{color:var(--ink-2)}
/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
/* MARQUE_LOT383 — sous 900 px le bandeau ne porte qu'un lien (la marque) et les
   onglets sont en flux : 65 px colles pour rien sur un ecran de 667 (22,8 % du
   chrome avec la barre). Il defile avec la page. Decision du 17/09, sans
   mecanisme ; le masquage au defilement attend la mesure de ces 65 px. */
@media (max-width:899px){.site-head{position:static}}
.head-in{display:flex;align-items:center;gap:26px;height:72px}
.brand{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:800;
  letter-spacing:-.03em;color:var(--ink)}
.brand em{font-style:normal;color:var(--green)}
/* Hauteur et largeur sont dans le HTML : le navigateur reserve la place avant
   meme d'avoir charge le fichier, et l'entete ne saute pas au chargement. */
.brand .logo{display:block;width:34px;height:34px;flex:none}
@media (max-width:520px){.brand{font-size:18px;gap:8px}
  .brand .logo{width:28px;height:28px}}
.nav{display:flex;align-items:center;gap:26px;margin-left:auto;font-size:15px;font-weight:500}
.nav a{color:var(--ink-2)}
.nav a:hover{color:var(--ink)}
.nav .cta{border:1.5px solid var(--ink);border-radius:999px;padding:9px 18px;color:var(--ink);
  font-weight:600}
.nav .cta:hover{background:var(--ink);color:#fff}
@media(max-width:900px){.head-in{height:64px;gap:16px}.nav{gap:14px;font-size:13.5px}
  .nav .cta{display:none}}
@media(max-width:620px){.nav a:not(.keep){display:none}}
/* ---------- hero ---------- */
.hero{padding:34px 0 22px;background:
  radial-gradient(1200px 460px at 80% -20%,var(--green-l),transparent 68%),var(--bg)}
.hero h1{max-width:16ch}
/* La carte de France remonte a hauteur du titre : elle occupait la moitie droite
   de l'ecran plus bas, pendant que cette meme moitie restait vide en haut. */
/* L'en-tete de l'accueil poussait la carte a 420 px du haut de page. Il dit
   la meme chose en deux fois moins de haut : titre plus court, compteurs sur
   une ligne, marges resserrees. */
.hero.acc{padding:18px 0 14px}
.hero.acc h1{font-size:clamp(28px,3.4vw,40px);max-width:14ch;margin-bottom:6px}
.hero.acc .lede{margin:0;font-size:15px;max-width:74ch}
.hero.acc .stats{margin:12px 0 0;gap:8px 26px}
.hero.acc .stat{display:flex;align-items:baseline;gap:7px}
.hero.acc .stat b{display:inline;font-size:20px}
.hero.acc .stat span{font-size:13px}
@media(max-width:620px){
  .hero.acc{padding:14px 0 10px}
  .hero.acc h1{font-size:26px}
  .hero.acc .lede{font-size:14px}
  .hero.acc .stats{gap:6px 18px}
}
.acc-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,40%);
  gap:30px 40px;align-items:center}
.acc-c .pan-fr{padding:14px 16px 10px}
.acc-c .pan-fr svg{max-height:min(46vh,420px)}
/* La carte a quitte l'en-tete pour rejoindre l'explorateur : le texte
   occupe desormais toute la largeur, avec une mesure lisible. */
.acc-in{grid-template-columns:1fr}
.acc-t{max-width:78ch}
@media (max-width:900px){.acc-in{grid-template-columns:1fr}}
.hero.bande{padding:24px 0 18px}
.bande-in{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:14px 40px}
.bande-in>div{flex:1 1 380px;min-width:0}
.bande-in .liste-h1{max-width:20ch;margin-bottom:6px;font-size:clamp(27px,3.2vw,40px)}
.bande-in .lede{margin-bottom:0;font-size:16px;max-width:60ch}
/* flex:0 0 auto empechait le bandeau de retrecir : a 390 px la troisieme
   valeur sortait de l'ecran. Il retrecit et passe a la ligne. */
.bande-in .stats{flex:1 1 auto;min-width:0;margin:0;gap:10px 26px}
.bande-in .stat b{font-size:23px}
.grp.eq{grid-column:span 2}
.hero .lede{font-size:17.5px;color:var(--ink-2);max-width:64ch;margin-bottom:18px}
.searchbar{display:flex;align-items:center;gap:0;background:var(--card);border:1px solid var(--line);
  border-radius:999px;box-shadow:var(--sh);padding:5px 5px 5px 20px;max-width:560px;margin:0 0 4px}
.searchbar input{flex:1;border:0;outline:0;font:16px var(--f);padding:12px 0;background:none;color:var(--ink)}
.searchbar button{border:0;background:var(--green);color:#fff;width:46px;height:46px;
  border-radius:50%;cursor:pointer;font-size:17px;display:grid;place-items:center}
.searchbar button:hover{background:var(--green-d)}
/* Les filtres s'enroulent au lieu de defiler. Une barre en overflow-x avec la
   barre de defilement masquee rendait les derniers filtres — desserte, vie
   autour, tri — litteralement inatteignables a la souris comme au clavier. */
/* La barre de filtres colle sous l'en-tete. Sa hauteur varie avec le nombre de
   lignes qu'elle occupe : le script la mesure et la publie dans --h-barre, dont
   se sert la carte pour se caler juste dessous au lieu de passer dessous. */
/* MARQUE_LOT289 — SOUS les onglets, pas a la meme hauteur qu'eux.
   Le repli `0px` de `--h-anc` garde le comportement d'avant sur
   toute page sans barre d'onglets collante. */
.barre{position:sticky;top:calc(var(--h-head,72px) + var(--h-anc,0px));z-index:40;
  background:rgba(255,255,255,.95);backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line)}
.barre-in{padding-top:10px;padding-bottom:10px}
.rangee{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ch-q{display:inline-flex;align-items:center;gap:8px;background:var(--card);
  border:1px solid var(--line);border-radius:999px;padding:8px 15px;flex:0 1 230px}
.ch-q input{border:0;background:none;font:inherit;color:inherit;outline:0;width:100%;
  min-width:0}
.ch-q svg{opacity:.45;flex:none}
.qf{display:inline-flex;align-items:center;gap:7px;background:var(--card);
  border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:14px;
  font-weight:500;color:var(--ink);cursor:pointer;user-select:none;white-space:nowrap;
  position:relative;transition:.12s}
.qf input{position:absolute;opacity:0;width:1px;height:1px}
.qf:hover{border-color:var(--green)}
.qf:has(input:checked){background:var(--green);border-color:var(--green);color:#fff}
.qf input:focus-visible+span{outline:2px solid var(--ink);outline-offset:4px;border-radius:3px}
.ch-f{display:inline-flex;align-items:center;gap:8px;background:var(--card);
  border:1.5px solid var(--ink);border-radius:999px;padding:8px 15px;
  font:600 14px var(--f);color:var(--ink);cursor:pointer;white-space:nowrap}
.ch-f:hover{background:var(--ink);color:#fff}
.ch-f .badge{background:var(--green);color:#fff;border-radius:999px;min-width:19px;
  height:19px;display:grid;place-items:center;font-size:11.5px;padding:0 5px;font-weight:700}
.ch-f .badge[hidden]{display:none}
.ch-t{display:inline-flex;align-items:center;gap:7px;font-size:14px;color:var(--ink-2);
  background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 14px;
  cursor:pointer;white-space:nowrap}
.ch-t select{border:0;background:none;font:inherit;color:var(--ink);outline:0;cursor:pointer}
/* MARQUE_LOT266 — le compteur s'explique, il est donc plus long : il a le
   droit de passer a la ligne. `nowrap` le faisait deja deborder de sa barre
   des que « tous sur la carte, 300 fiches ci-dessous » s'y ajoutait. */
.cnt{margin-left:auto;font-size:14.5px;font-weight:700;color:var(--ink)}
.cnt-m{background:none;border:0;padding:0;font:inherit;color:var(--ink-2);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cnt-m:hover,.cnt-m:focus-visible{color:var(--ink)}
.raz{background:none;border:0;padding:0;font:600 13.5px var(--f);color:var(--ink-2);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.raz:hover{color:var(--ink)}
.raz[hidden]{display:none}
.panneau{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:16px 26px;padding:16px 0 10px;border-top:1px solid var(--line);margin-top:10px}
.panneau[hidden]{display:none}
.grp{border:0;margin:0;padding:0;min-width:0}
.grp legend{font:700 12px var(--f);color:var(--ink-3);padding:0 0 8px;
  text-transform:uppercase;letter-spacing:.06em}
.opts{display:flex;flex-wrap:wrap;gap:6px}
.opt{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
  background:var(--card);border-radius:999px;padding:5px 11px;font-size:13px;
  cursor:pointer;user-select:none}
.opt input{accent-color:var(--green);margin:0;width:13px;height:13px;flex:none}
.opt:hover{border-color:var(--green)}
.opt:has(input:checked){border-color:var(--green);background:var(--green-l);font-weight:600}
@media (max-width:640px){
  .cnt{margin-left:0;order:-1;width:100%}
  .barre-in{padding-top:8px;padding-bottom:8px}
}
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:9px;list-style:none;
  padding:2px 0 8px;margin:0}
.chips .chip{flex:0 0 auto}
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--card);
  border:1px solid var(--line);border-radius:12px;padding:9px 15px;font-size:14px;
  font-weight:500;color:var(--ink);white-space:nowrap;cursor:pointer}
.chip:hover{border-color:var(--ink-3);box-shadow:var(--sh)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.chip.raz{cursor:pointer;border-style:dashed;color:var(--ink-2)}
.chip.raz:hover{color:var(--ink);border-color:var(--ink-3)}
.grid > li[hidden],.liens > li[hidden]{display:none}
.chip svg{opacity:.72}
.chip select,.chip input{border:0;background:none;font:inherit;color:inherit;outline:0}
.stats{display:flex;flex-wrap:wrap;gap:12px 30px;margin:18px 0 0;padding:0;list-style:none}
.stat b{display:block;font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.05}
.stat span{font-size:13.5px;color:var(--ink-2)}
/* ---------- split listings + carte ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,44%);gap:0;align-items:start}
.split .col{padding-right:26px}
.split .sticky{position:sticky;top:calc(var(--h-head,72px) + var(--h-barre,60px) + 14px);
  display:flex;flex-direction:column;gap:14px;
  height:calc(100vh - var(--h-head,72px) - var(--h-barre,60px) - 34px)}
.split .sticky #map{flex:1;min-height:0;border-radius:var(--r-l);margin:0;
  border:1px solid var(--line);box-shadow:var(--sh)}
.split .sticky .pan-fr{flex:0 0 auto}
.liste-h1{font-size:clamp(28px,3.4vw,42px)}
/* Colonne de droite de l'accueil : le panneau se colle en haut mais garde sa
   hauteur naturelle, contrairement au bloc carte des pages de liste. */
.split .sticky-fr{position:sticky;top:calc(var(--h-head,72px) + 16px)}
@media(max-width:1050px){.split .sticky-fr{position:static;order:-1}}
@media(max-width:1050px){.split{grid-template-columns:1fr}.split .col{padding-right:0}
  .split .sticky{position:static;height:auto;margin-bottom:28px;order:-1}
  .split .sticky #map{height:360px;flex:none}}
/* ---------- cartes ---------- */
/* Trois colonnes plutot que quatre : la photographie est ce qui rend un site de
   voyage reconnaissable au premier coup d'oeil, et une grande image remplace
   plusieurs petits elements — elle fait donc monter la familiarite et baisser
   la complexite en meme temps. */
.grid{display:grid;gap:22px 20px;grid-template-columns:repeat(auto-fill,minmax(296px,1fr));
  margin:20px 0 0;padding:0;list-style:none}
.split .grid{grid-template-columns:repeat(auto-fill,minmax(248px,1fr))}
/* MARQUE_LOT122 — une tuile porte sa propre boîte : cette règle ne
   vaut plus que pour les cartes qui n'en sont pas. */
.card:not(.fiche){background:var(--card);display:flex;flex-direction:column;gap:11px}
.card .ph{position:relative;border-radius:var(--r-l);overflow:hidden;aspect-ratio:16/11;
  background:var(--bg-3);box-shadow:0 1px 2px rgba(14,26,20,.05)}
.card .ph img,.card .ph svg{width:100%;height:100%;object-fit:cover}
/* Le lien couvre toute la photo et ne change rien a la mise en page : c'est
   la zone visee en premier, elle doit mener quelque part. */
.card .ph-l{display:block;width:100%;height:100%;cursor:pointer}
.card:hover .ph{box-shadow:var(--sh-h)}
.ete{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:5px 11px;
  font-size:12.5px;font-weight:700;white-space:nowrap}
.ete.tempere{background:#E4F1F6;color:#125E77}
.ete.chaud{background:#FBF3E2;color:#7A5A16}
.ete.tres_chaud{background:#FBE7DA;color:#8A4B12}
.ete .lb{font-weight:600;font-size:10.5px;letter-spacing:.02em;opacity:.75}
.ete.sur{position:absolute;top:10px;right:10px;z-index:1;background:rgba(255,255,255,.95);
  box-shadow:0 2px 8px rgba(14,26,20,.14);gap:4px;padding:4px 9px}
.ete.sur.tempere{color:#125E77}
.ete.sur.chaud{color:#7A5A16}
.ete.sur.tres_chaud{color:#8A4B12}
.card .ph .far{position:absolute;top:10px;left:10px;background:rgba(255,255,255,.95);
  border-radius:999px;padding:5px 11px;font-size:12.5px;font-weight:700;color:var(--ink);
  display:flex;align-items:center;gap:5px;box-shadow:0 2px 8px rgba(14,26,20,.14)}
.tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tag{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  background:var(--green-l);color:var(--green-d);border-radius:5px;padding:3px 7px}
.tag.n{background:#FDF6DC;color:#8A6A00}
.rate{margin-left:auto;font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:3px}
.rate svg{fill:var(--amber)}
.card h3{margin:0;font-size:16.5px;font-weight:700;line-height:1.28}
.card h3 a{color:var(--ink)}
.card h3 a:hover{color:var(--green)}
.lieu{font-size:13.5px;color:var(--ink-2);margin-top:-4px}
.acces{font-size:13.5px;color:var(--ink-2);display:flex;flex-direction:column;gap:4px}
.acces span{display:flex;align-items:center;gap:7px}
.acces b{color:var(--ink);font-weight:600}
.acces svg{flex:none;opacity:.6}
.card .bas{border-top:1px solid var(--line);padding-top:9px;font-size:13.5px;
  display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.card .bas b{font-weight:700}
/* ---------- sections ---------- */
.band{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:52px 0;margin-top:64px}
.tete{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.tete h2{margin:0}
.tete a{font-weight:600;font-size:15px}
/* ---------- fiche ---------- */
/* MARQUE_LOT160 — `.fiche-page` ET NON `.fiche`.
   `.fiche` est aussi le nom de la VIGNETTE de camping (sources_web/tuile.css),
   et contenus_actifs() concatene la tuile APRES cette feuille : a specificite
   egale elle gagnait. La page de fiche entiere heritait donc de
   `display:flex`, d'une bordure, d'un rayon, d'`overflow:hidden` — qui coupait
   les bords — et d'une ombre de 30 px au survol. La colonne laterale de
   340 px passait sous le contenu au lieu d'etre a cote, sur toutes les
   fiches. Releve dans le navigateur le 8 septembre. */
.fiche-page{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:44px;align-items:start;
  margin-top:26px}
/* minmax(0,1fr) et non 1fr : `1fr` vaut `minmax(auto,1fr)`, et la colonne ne
   peut alors pas descendre sous la largeur minimale de son contenu. Un enfant
   qui refuse de retrecir fait deborder la page entiere. La regle de bureau,
   juste au-dessus, l'ecrivait deja correctement. */
@media(max-width:960px){.fiche-page{grid-template-columns:minmax(0,1fr);gap:26px}}
/* Un seul appel a l'action de poids fort : quatre boutons de meme valeur se
   neutralisent, et le visiteur d'une fiche cherche d'abord comment y aller. */
/* Le meme bloc sur les 4 301 fiches. Sa forme ne change pas selon qu'un
   partenaire existe ou non : seule une ligne s'ajoute. */
/* Le prix, colle au bouton. `margin-bottom` nul : le .btn qui suit porte
   deja son propre `margin-top:14px`, et les additionner ecarterait les deux
   lignes que le lot 87 vient de rapprocher. */
.resa-px{margin:2px 0 0;font-size:15px;line-height:1.4}
.resa-px b{font-size:19px;color:var(--green-d)}
/* Reserver ouvre desormais la colonne : sa marge haute ferait un creux
   au-dessus du premier element. */
.aside>.resa:first-child{margin-top:0}
.resa{margin:16px 0 0;padding:14px;background:var(--bg-2);
  border:1px solid var(--line);border-radius:var(--r-l)}
.resa h2{font-size:14px;text-transform:uppercase;letter-spacing:.05em;
  margin:0 0 8px;color:var(--mut)}
.resa ul{list-style:none;padding:0;margin:0;font-size:14.5px}
.resa li{padding:9px 0;line-height:1.45}
.resa li+li{border-top:1px solid var(--line)}
/* Le lien affilie est un bouton tant qu'il n'y a pas d'accord : il doit
   pourtant se lire comme un lien, sinon on le deguise. */
/* La reservation est une action, pas une note de bas de page : meme bouton
   que « Comment y aller ? », juste au-dessus. */
button.btn.af{width:100%;border:0;cursor:pointer;font-family:var(--f)}
button.btn.af svg{width:17px;height:17px;flex:none}
/* La mention obligatoire tient sous le bouton, lisible sans encombrer. */
/* La ligne qui vend : plus lisible que la mention legale, moins forte que le
   bouton. */
.af-d{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--ink)}
.af-d b{color:var(--green)}
.af-s{margin:5px 0 0;font-size:12.5px;color:var(--mut);line-height:1.5}
/* Les partenaires secondaires. Une ligne de texte, jamais un bouton : deux
   boutons identiques feraient deux actions principales, et la fiche n'en a
   qu'une. La cible tactile reste au-dessus de 24 px (WCAG 2.5.8) grace au
   remplissage vertical du lien. */
.resa-a{margin:10px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.resa-a a{color:var(--green-d);text-decoration:underline;
  padding:4px 0;display:inline-block}
/* MARQUE_LOT264 — « Y aller en train ». Trois exemples sur une ligne, le
   reste replie : a 375 px la fiche est deja dense, treize pastilles feraient
   un mur. La mention legale est DANS le titre du bloc, une seule fois. */
.sn-b{padding:10px 0 0;line-height:1.5}
.sn-t{display:block;font-size:12.5px;color:var(--mut);margin:0 0 6px}
.sn-t .af-t{margin-left:6px}
.sn-l{display:flex;flex-wrap:wrap;gap:6px}
.sn-o{display:inline-block;padding:4px 10px;border:1px solid var(--line);
  border-radius:999px;background:var(--card);color:var(--green-d);
  font-size:13.5px;text-decoration:none}
.sn-o:hover{border-color:var(--green);background:var(--green-l)}
.sn-p{margin:7px 0 0}
.sn-p summary{font-size:12.5px;color:var(--mut);cursor:pointer}
.sn-p .sn-l{margin:7px 0 0}
.sn-g{display:inline-block;margin:8px 0 0;font-size:13px;
  color:var(--ink-2);text-decoration:underline}
.af-t{display:inline-block;padding:1px 7px;border-radius:999px;
  background:var(--line);color:var(--mut);font:600 11.5px var(--f);
  text-transform:uppercase;letter-spacing:.04em}
.resa-l{list-style:none;padding:0;margin:12px 0 0;font-size:14.5px;
  border-top:1px solid var(--line)}
.resa-l li{padding:10px 0 0;line-height:1.45}
/* --- lot 176 : la liste des revendeurs -----------------------------------
   Les trois lignes d'en-tete sont des mentions obligatoires (D111-7 II) :
   elles se lisent, donc elles ne sont pas grises jusqu'a l'illisible. La
   ligne de tri porte le seul gras du bloc en dehors des prix. */
.resa-n{margin:10px 0 0;font-size:13px;line-height:1.55;color:var(--ink-2)}
.resa-tri{margin:8px 0 0;font-size:13px;line-height:1.55;color:var(--ink-2)}
.resa-tri b{color:var(--ink)}
.resa-tri a{color:var(--green-d);text-decoration:underline;
  padding:4px 0;display:inline-block}
.of-l{list-style:none;padding:0;margin:14px 0 0}
/* Une offre est une carte, pas une ligne : le trait separe deux vendeurs
   differents, et le lecteur doit voir ou l'un finit. */
.of{padding:14px 0;border-top:1px solid var(--line)}
.of-s{margin:0;font:600 15px var(--f);color:var(--ink)}
.of-px{margin:5px 0 0;font-size:14.5px;line-height:1.45;color:var(--ink)}
.of-px b{color:var(--green)}
.of-px-non{color:var(--mut)}
.of-dt{margin:3px 0 0;font-size:12px;line-height:1.5;color:var(--mut)}
.of-f{margin:5px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink-2)}
/* Le bouton de chaque offre : le meme objet que l'action principale, en
   moins haut. Aucune offre n'est mise en avant par la couleur — le
   classement est annonce au-dessus, il n'a pas a etre redit par le style. */
.btn-of{width:100%;margin-top:9px;padding:10px 16px;font-size:14.5px}
/* Le contour, pas le plein : voir le lot 176f. */
.resa-f{margin:12px 0 0;font-size:12px;line-height:1.55;color:var(--mut)}

/* --- Photos en tete de fiche ---------------------------------------------
   Une grande tuile et quatre petites sur ordinateur ; une bande qu'on fait
   glisser sous 900 px. C'est la disposition mesuree chez l'annonceur et sur
   les annuaires de campings. */
.mos{margin:20px 0 4px}
/* L'enveloppe sert de repere au bouton : pose sur la mosaique sur ordinateur,
   il redevient un bouton ordinaire sous la bande sur telephone. */
.mos-w{position:relative}
.mos-g{display:grid;grid-template-columns:2fr 1fr 1fr;
  grid-template-rows:1fr 1fr;gap:8px;height:390px;
  border-radius:var(--r-l);overflow:hidden}
.mos-g button{padding:0;border:0;background:var(--bg-2);cursor:zoom-in;
  display:block;overflow:hidden}
.mos-g img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .25s ease}
.mos-g button:hover img{transform:scale(1.035)}
.mos-g .m1{grid-row:span 2}
.mos-g button:focus-visible{outline:3px solid var(--green);outline-offset:-3px}
/* Le bouton est POSE sur la mosaique, en bas a droite : c'est la que les sites
   de reservation le placent, et il n'ajoute donc pas une ligne de plus. */
.mos-t{position:absolute;right:12px;bottom:12px;z-index:2;
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 14px;border-radius:999px;border:1px solid rgba(0,0,0,.09);
  background:#fff;color:var(--ink);font:600 13.5px var(--f);cursor:pointer;
  box-shadow:0 2px 10px rgba(12,14,16,.22)}
.mos-t:hover{background:var(--bg-2)}
.mos-c{margin:9px 0 0;font-size:12.5px;color:var(--mut);line-height:1.5}

/* La ligne d'offre : ce qu'on cherche avant de lire. Elle se lit d'un coup
   d'oeil, donc elle tient sur une ligne et se replie sans casser. */
.offre{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;
  margin:12px 0 0;font-size:15px;color:var(--ink-2)}
.offre b{color:var(--ink)}
.of-n{display:inline-flex;align-items:center;gap:6px}
.of-n svg{color:#C8860D}
.of-p b{font-size:17px;color:var(--green-d)}
.offre .mut{font-size:13px}

/* Les hebergements : une grille de cartes, photo a gauche. */
.hebs{margin:32px 0 0}
.hebs h2{font-size:19px;margin:0 0 12px}
.hb-l{list-style:none;padding:0;margin:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
.hb{display:flex;gap:12px;border:1px solid var(--line);border-radius:var(--r-l);
  background:var(--card);overflow:hidden}
.hb[hidden]{display:none}
.hb-i{flex:0 0 132px;background:var(--bg-2)}
.hb-i img{width:100%;height:100%;object-fit:cover;display:block}
.hb-c{flex:1 1 auto;padding:12px 14px 12px 0;min-width:0}
.hb-t{margin:0;font-size:15px;line-height:1.35}
.hb-n{color:var(--mut);font-weight:400;font-size:13.5px;display:block}
.hb-d{margin:5px 0 0;font-size:13px;color:var(--ink-3);line-height:1.45}
.hb-p{margin:7px 0 0;font-size:14.5px}
.hb-p b{font-size:17px;color:var(--green-d)}
.hb-c .btn{margin-top:9px;min-height:38px;font-size:13.5px}
.hb-plus{margin:12px 0 0}
.hb-m{margin:12px 0 0;font-size:12.5px;color:var(--mut);line-height:1.55;
  max-width:78ch}
@media (max-width:520px){
  .hb-i{flex-basis:104px}
  .hb-c{padding:10px 12px 10px 0}
}
/* Sous la description du partenaire : plus discrete qu'elle, plus lisible
   qu'une mention legale. */
.lede-f{margin:8px 0 0;font-size:14.5px;color:var(--ink-3);line-height:1.5}
/* MARQUE_LOT246 — LE PLI EST VISUEL, PAS TEXTUEL.
   `line-clamp` coupe a cinq LIGNES : au bon endroit quelle que soit la
   largeur. Couper a un nombre de caracteres aurait coupe au milieu d'un mot
   sur telephone et laisse un bouton sous une ligne et demie sur grand ecran.
   La classe n'est posee QUE par le script : sans lui, rien n'est replie. */
.lede-r{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;
  line-clamp:5;overflow:hidden}
.lede-b{margin:6px 0 0;padding:0;border:0;background:none;cursor:pointer;
  font:600 15px/1.4 inherit;color:var(--vert);text-decoration:underline;
  text-underline-offset:3px}
.lede-b:hover{color:var(--ink)}  /* MARQUE_LOT262 : --ink-1 n'existe pas */
.lede-b:focus-visible{outline:2px solid var(--vert);outline-offset:3px;
  border-radius:3px}

@media (max-width:899px){
  /* Une photo par ecran, et un dixieme de la suivante qui depasse : c'est ce
     qui dit qu'il y en a d'autres, sans ajouter de fleches. */
  .mos{margin:16px -20px 4px}
  .mos-g{display:flex;height:auto;gap:6px;border-radius:0;
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding:0 20px}
  .mos-g::-webkit-scrollbar{display:none}
  .mos-g button{flex:0 0 88%;scroll-snap-align:center;
    border-radius:var(--r)  /* MARQUE_LOT262 : --r-m n'existe pas */}
  .mos-g img{height:238px}
  .mos-g .m1{grid-row:auto}
  /* Dans la bande, le bouton se retrouvait apres la cinquieme photo : il
     fallait tout faire defiler pour le voir. Mesure a 406 px : hors ecran.
     Il descend donc sous la bande, en pleine largeur. */
  .mos-t{position:static;display:flex;justify-content:center;width:auto;
    margin:10px 20px 0}
  .mos-d,.mos-c{margin-left:20px;margin-right:20px}
}

/* --- Visionneuse ---------------------------------------------------------
   Elle vit dans la page et ne charge rien de plus que ce que la fiche porte
   deja : les grandes versions sont sur notre domaine. */
.vis[hidden]{display:none}
.vis{position:fixed;inset:0;z-index:3000;background:rgba(12,14,16,.95);
  display:flex;flex-direction:column}
.vis-h{display:flex;justify-content:space-between;align-items:center;
  padding:12px 16px;color:#fff;font:600 14px var(--f)}
.vis-x{background:none;border:0;color:#fff;font-size:30px;line-height:1;
  cursor:pointer;padding:0 6px}
/* La piste, et le defilement natif qu'elle apporte : c'est exactement ce que
   .mos-g fait plus haut pour la bande de la fiche. */
.vis-i{position:relative;flex:1;min-height:0}
.vis-t{display:flex;height:100%;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;overscroll-behavior-x:contain}
.vis-t::-webkit-scrollbar{display:none}
/* start, pas center : une photo occupe toute la largeur, donc sa position
   d'accrochage est son bord gauche. Avec center, le navigateur s'arretait
   40 px avant offsetLeft — mesure faite — et la position calculee par le
   compteur ne coincidait plus avec celle ou la piste se posait.
   .mos-g utilise center a bon droit : ses vignettes font 88 % de large et
   laissent volontairement depasser la suivante. */
.vis-c{flex:0 0 100%;scroll-snap-align:start;display:flex;
  align-items:center;justify-content:center;padding:0 8px 18px}
.vis-c img{max-width:100%;max-height:100%;object-fit:contain;
  border-radius:var(--r)  /* MARQUE_LOT262 : --r-m n'existe pas */}
/* Au-dessus de la piste, pas a cote : en enfants de flex, les deux fleches
   prenaient 92 px des 390 px d'un telephone. Fond sombre borde de blanc pour
   rester lisible sur une photo claire, et 44 px, la cible tactile minimale. */
.vis-f{position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(12,14,16,.62);border:1px solid rgba(255,255,255,.38);
  color:#fff;font-size:26px;line-height:1;width:44px;height:44px;
  border-radius:999px;cursor:pointer;display:flex;align-items:center;
  justify-content:center;padding:0}
.vis-g{left:10px}
.vis-d{right:10px}
.vis-f:hover{background:rgba(12,14,16,.85)}
.vis-x:focus-visible,.vis-f:focus-visible{outline:3px solid #fff;
  outline-offset:2px}
@media (max-width:699px){
  .vis-c{padding:0 4px 14px}
}
.liens-aside{list-style:none;padding:0;margin:16px 0 0;font-size:14.5px}
.liens-aside li{padding:9px 0;border-top:1px solid var(--line);line-height:1.45}
.liens-aside .mut{font-size:12.5px;display:block}
.aside{position:sticky;top:92px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-l);padding:22px;box-shadow:var(--sh)}
.kv{margin:0;font-size:14.5px}
.kv div{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line)}
.kv div:last-child{border:0}
.kv dt{color:var(--ink-2)}
.kv dd{margin:0;text-align:right;font-weight:700}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--green);
  color:#fff;border-radius:999px;padding:13px 20px;font-weight:600;font-size:15px;margin-top:14px}
.btn:hover{background:var(--green-d);color:#fff}
.btn.enligne{display:inline-flex;width:auto;margin:4px 0 0}
.btn.sec{background:var(--card);color:var(--ink);border:1.5px solid var(--line)}
.btn.sec:hover{background:var(--bg-2);color:var(--ink);border-color:var(--ink-3)}
/* La semaine : deux compteurs, puis la frise. */
/* Le tiret d'une duree retiree : present, discret, et pas confondu avec un
   chiffre. Voir duree_dite() et l'en-tete du lot 53. */
.lc-d,.stn .t{font-variant-numeric:tabular-nums}
.sem-k{display:flex;gap:10px;flex-wrap:wrap;margin:2px 0 20px}
.sem-kc{flex:1 1 190px;min-width:0;background:var(--green-l);border-radius:var(--r-l);
  padding:13px 16px}
.sem-kt{font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--green-d);opacity:.75}
.sem-kv{font-family:var(--f-titre);font-size:1.7rem;line-height:1.05;
  color:var(--green-d);margin-top:2px}
.sem-kl{font-size:.85rem;color:var(--ink-2);margin-top:3px}

/* Les sorties datees. Une pastille de date a gauche, le titre et sa phrase a
   droite : c'est la forme qui se lit le plus vite quand on cherche « qu'est-ce
   qui se passe pendant que j'y suis ». */
.evs{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:12px}
.ev-i{display:grid;grid-template-columns:74px minmax(0,1fr);gap:18px;
  align-items:start;padding:15px 18px;border:1px solid var(--line);
  border-radius:var(--r-l);background:var(--card)}
.ev-d{text-align:center;background:var(--green-l);border-radius:var(--r);
  padding:8px 4px}
.ev-d b{display:block;font-family:var(--f-titre);font-size:22px;line-height:1;
  color:var(--green-d)}
.ev-d span{font-size:11px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--green-d)}
.ev-t{font-family:var(--f-titre);font-size:18px;line-height:1.2}
.ev-x{font-size:14.5px;color:var(--ink-2);margin:4px 0 0}
.ev-m{font-size:13px;color:var(--ink-3);margin:6px 0 0}
@media(max-width:640px){.ev-i{grid-template-columns:62px minmax(0,1fr);gap:13px}}

/* --- Sections repliables ------------------------------------------------
   L'attribut « open » n'est jamais ecrit dans le HTML : l'etat par defaut est
   donc REPLIE, ce qu'on veut sur mobile. Au-dela de 900 px on redonne
   display:block au panneau meme ferme, la section redevient un titre suivi
   de son contenu, et le basculement n'a plus d'effet visible.
   L'en-tete fait 48 px de haut : le critere 2.5.8 des WCAG 2.2 en demande
   24 (niveau AA). */
.rp{border:1px solid var(--line);border-radius:var(--r);margin:24px 0;padding:0}
.rp>summary{list-style:none;cursor:pointer;position:relative;display:block;
  padding:14px 46px 14px 16px;min-height:48px}
.rp>summary::-webkit-details-marker{display:none}
.rp>summary::after{content:"";position:absolute;right:18px;top:22px;
  width:9px;height:9px;border-right:2px solid var(--ink-2);
  border-bottom:2px solid var(--ink-2);transform:rotate(45deg)}
.rp[open]>summary::after{transform:rotate(-135deg);top:26px}
.rp>summary:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.rp>summary>h2{margin:0}
.rp-r{display:block;font-size:.9rem;color:var(--ink-2);margin-top:4px}
.rp-c{padding:0 16px 18px}
/* L'en-tete de section reste affichee pendant qu'on lit le panneau : « A faire
   autour » fait 4 576 px de haut sur un telephone de 390 px, soit douze
   ecrans, et il fallait les remonter a l'aveugle pour refermer. Le titre se
   pose JUSTE sous l'en-tete du site, qui est collant lui aussi — 72 px, 64 en
   dessous de 900. L'empilement : site 60, barre d'action 50, titre 40 : le
   titre passe donc sous la barre « Réserver », qui reste au-dessus de tout. */
@media (max-width:899px){
  .rp>summary{position:sticky;top:72px;z-index:40;background:var(--bg);
    border-radius:var(--r) var(--r) 0 0}
  .rp[open]>summary{border-bottom:1px solid var(--line)}
}
@media (max-width:900px){.rp>summary{top:64px}}
/* MARQUE_LOT188 — SAUF SUR LA CARTE, OU LE TITRE COLLANT COUTE PLUS QU'IL NE
   RAPPORTE. Mesure du 9 septembre en 440x956 : le titre colle occupe
   64 -> 147, la carte 123 -> 523 ; 24 px de carte disparaissent sous une
   bande blanche, en permanence. La raison d'etre du titre collant — refermer
   une section de douze ecrans sans remonter a l'aveugle — ne vaut pas ici :
   la section de la carte fait 780 px, moins d'un ecran. */
@media (max-width:899px){#s-carte>summary{position:static}}

@media (min-width:900px){
  .rp{border:0;margin:40px 0}
  .rp>summary{padding:0;cursor:default;min-height:0}
  .rp>summary::after{display:none}
  .rp-r{display:none}
  .rp-c{padding:0}
  /* Deux mecanismes, deux regles, selon l'age du moteur. La premiere vaut
     pour les navigateurs qui cachent le contenu d'un <details> ferme en
     posant display:none sur ses enfants ; la seconde pour les moteurs
     recents, qui le cachent par le pseudo-element ::details-content en
     content-visibility:hidden — la ou rendre display:block a l'enfant ne
     sert rigoureusement a rien. Sans la seconde, un quart de la fiche
     disparaissait du grand ecran. */
  .rp:not([open])>.rp-c{display:block}
  .rp::details-content{content-visibility:visible;block-size:auto}
}

/* Le rail est un fond de la liste, pas une bordure de chaque jour : sinon il
   se brise entre deux crans. */
/* .sem-l et non .frise : ce dernier nom appartient depuis longtemps a la
   frise climatique, plus bas. Les deux regles ci-dessous s'appliquaient au
   graphique des temperatures et lui posaient un rail vertical. */
.sem-l{list-style:none;margin:0;padding:0 0 0 28px;position:relative}
.sem-l::before{content:"";position:absolute;left:5px;top:14px;bottom:22px;width:2px;
  background:var(--green-l);border-radius:2px}
/* Le disque ambre tenait la place de la photo : quand elle est la, il s'en
   va. `.fr-i img` existait deja dans la feuille — le bandeau attendait. */
.fr-i.fr-ph::after{display:none}
.fr-cr{margin:14px 0 0;font-size:12px;color:var(--ink-3);line-height:1.5}
.fr-cr a{color:var(--ink-3);text-decoration:underline}
.fr-j{position:relative;margin:0 0 16px}
.fr-j::before{content:"";position:absolute;left:-28px;top:4px;width:12px;height:12px;
  border-radius:50%;background:var(--green);box-shadow:0 0 0 3px #fff}
.fr-j.fr-pied::before{background:var(--amber)}
.fr-j.fr-rien::before{background:var(--line)}
.fr-t{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2);margin-bottom:6px}
.fr-b{border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;
  background:#fff}
/* Le bandeau : un degre de ciel et un disque ambre, dans l'esprit des
   illustrations de la maquette. Il cedera la place a la photo Commons du
   monument quand la collecte sera finie. */
.fr-i{height:88px;position:relative;
  background:linear-gradient(170deg,var(--green-l),#EFF6F6 70%,var(--bg-2))}
.fr-i::after{content:"";position:absolute;right:22px;top:20px;width:26px;height:26px;
  border-radius:50%;background:var(--amber);opacity:.9}
.fr-i img{width:100%;height:100%;object-fit:cover;display:block}
.fr-j.fr-rien .fr-i{background:var(--bg-2)}
.fr-j.fr-rien .fr-i::after{background:var(--line)}
.fr-d{padding:12px 15px 14px}
.fr-n{font-family:var(--f-titre);font-size:1.05rem;line-height:1.25;color:var(--ink)}
.fr-s{margin:3px 0 0;font-size:.9rem;color:var(--ink-2)}
.fr-h{margin:6px 0 0;font-size:.9rem;color:var(--ink);font-variant-numeric:tabular-nums}
.fr-p{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.fr-p span{font-size:.8rem;background:var(--green-l);color:var(--green-d);
  border-radius:999px;padding:3px 10px;white-space:nowrap}
.fr-p span.fr-amb{background:#FDF0DA;color:#8A5B02}
/* La liaison entre deux jours : ce qu'on marche pour aller prendre le car. */
.fr-l{font-size:.82rem;color:var(--ink-2);margin:-8px 0 14px;padding-left:2px}
/* Sur telephone, la carte fait 342 px et l'image en fait 330 : le rapport
   est de 1,04, autant dire aucun agrandissement. Le bandeau y est donc a sa
   place — on lui donne seulement un format de photographie, 2:1, au lieu du
   filet de 9,3:1 qu'il etait. */
@media(max-width:899px){
  .fr-i{height:auto;aspect-ratio:2/1}
  .fr-i.fr-ph{aspect-ratio:2/1}
}
@media(max-width:520px){.fr-d{padding:11px 13px 12px}}

/* Sur ordinateur, la photo passe a gauche du texte, en 200 x 150 px. Demander
   200 px a une image qui en fait 330, c'est la REDUIRE : la nettete est
   garantie. Le bandeau pleine largeur, lui, l'agrandissait 2,5 fois pour n'en
   montrer qu'une tranche de 88 px de haut.
   Les journees sans photo gardent la meme boite, avec leur degrade : la frise
   garde son rythme. */
@media(min-width:900px){
  .fr-b{display:flex;align-items:stretch}
  .fr-i{flex:0 0 200px;height:auto;min-height:150px}
  .fr-d{flex:1 1 auto;min-width:0}
  .fr-i::after{right:14px;top:14px}
}

/* Une journee sans photo ne reserve pas la place d'une photo. Sur la fiche
   d'Axat, 4 journees sur 7 sont dans ce cas : leur laisser 200 x 150 px
   (ordinateur) ou 312 x 156 px (telephone) de degrade, c'est mettre du vide
   en valeur. On garde la couleur — c'est elle qui distingue une journee avec
   sortie d'une journee au camping — mais reduite a une bande. */
.fr-i.fr-vide{height:48px}
.fr-i.fr-vide::after{right:auto;left:50%;top:50%;transform:translate(-50%,-50%)}
@media(max-width:899px){.fr-i.fr-vide{aspect-ratio:auto;height:48px}}
@media(min-width:900px){.fr-i.fr-vide{flex:0 0 72px;height:auto;min-height:0}}

/* L'entete en deux colonnes. La banniere pleine largeur en 16/5 fait 385 px
   de haut a 1 232 px : elle repoussait le titre a 581 px et la preuve a 666,
   tous deux sous la ligne de flottaison d'un portable. Cote a cote, la meme
   hauteur porte les deux.
   `minmax(0,...)` des deux cotes : sans lui, une colonne ne peut pas
   descendre sous la largeur minimale de son contenu et fait deborder la page
   — le defaut corrige au lot 59c, qu'on ne rejoue pas ici. */
.chapeau{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:36px;align-items:stretch;margin:14px 0 6px}
/* Une PILE, pas une simple boite : sur les fiches sans partenaire, la
   variable `banniere` porte aussi le credit « Vue aerienne : Geoplateforme
   — IGN ». En pile, la photo prend l'espace restant et le credit reste
   colle dessous ; autrement il tombait au bas de la colonne. */
.chapeau-i{min-width:0;display:flex;flex-direction:column}
.chapeau .banniere{margin:0;aspect-ratio:auto;flex:1;min-height:260px}
.chapeau-t{min-width:0;display:flex;flex-direction:column;justify-content:center}
.chapeau-t .entete{margin-bottom:10px}
.chapeau-t h1.th{margin:0}
.chapeau-t .preuve{margin:16px 0 0}
/* Le selecteur de gare de depart (lot 90). Il se lit comme une phrase —
   « Au depart de [ Nantes ] » — et non comme un formulaire : une etiquette,
   un choix, une reponse. La largeur suit celle du panneau de preuve pour que
   les deux blocs forment une colonne et non deux boites. */
.dep{margin:14px 0 0;max-width:54ch}
.dep-l{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--mut);margin:0 0 6px}
.dep-s{width:100%;padding:12px 14px;border:1.5px solid var(--line);
  border-radius:var(--r);background:var(--card);color:var(--ink);
  font-family:var(--f);font-size:15.5px;font-weight:600}
.dep-s:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.dep-r{margin:10px 0 0;font-size:15px;line-height:1.5;color:var(--ink-2)}
/* MARQUE_LOT137 — les gares proposees quand une ville en compte plusieurs. */
.dep-ch{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
.dep-c{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:8px 12px;/* MARQUE_LOT262 - --trait et --fond n'existent pas. Le
     raccourci `border` etait donc invalide EN ENTIER
     (border-style:none) et le fond transparent : la pastille
     n'avait ni bordure ni fond. */
  border:1px solid var(--line);border-radius:10px;
  background:var(--card);color:var(--ink);font:inherit;font-size:14.5px;
  font-weight:600;cursor:pointer;text-align:left}
.dep-c i{font-style:normal;font-weight:400;font-size:13px;color:var(--ink-2)}
.dep-c:hover{border-color:var(--ink-2)}
.dep-c:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.dep-r b{color:var(--ink)}
/* Le total est la seule chose que le visiteur retient : il porte la couleur
   du site, et il n'apparait que si les trois segments sont mesures. */
.dep-t{color:var(--green-d);font-weight:700}
/* Ce qui n'est pas prouve ne prend pas la couleur de ce qui l'est. */
.dep-i{color:var(--mut);font-size:14px;display:block;margin-top:2px}
/* ---- l'itineraire, depuis le lot 100 -------------------------------------
   UNE couleur porteuse de sens : celle du site, et elle ne dit qu'une chose,
   ce qui roule. Une colonne de durees, une epine, le detail. Pas de zebrage :
   c'est un itineraire, pas un tableau. */
.dj{margin:12px 0 0}
.dj-ret{margin-top:18px;padding-top:12px;border-top:1px solid var(--filet)}
.dj-h{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;
  padding:0 0 14px;border-bottom:1px solid var(--line)}
.dj-tot b{display:block;font-size:32px;line-height:1;font-weight:700;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink)}
.dj-tot span{display:block;font-size:12px;color:var(--mut);margin-top:5px}
.dj-od{margin-left:auto;text-align:right;font-size:14px;line-height:1.4}
.dj-od b{display:block;font-size:15.5px;font-weight:700;color:var(--ink)}
.dj-e{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;
  font-weight:600;margin-top:6px}
.dj-e i{width:6px;height:6px;border-radius:50%;display:block;background:currentColor}
.dj-e.ok{color:var(--green-d)} .dj-e.est{color:#9A6420}
.dj-i{list-style:none;margin:16px 0 0;padding:0}
.dj-p{display:grid;grid-template-columns:64px 22px 1fr;column-gap:12px;
  align-items:start}
.dj-d{text-align:right;font:700 14px/22px var(--f);font-variant-numeric:tabular-nums;
  color:var(--ink);white-space:nowrap}
.dj-d.mou{font-weight:400;color:var(--mut)}
/* Avec une heure, la colonne se lit sur deux lignes : l'horaire aligne en
   gras, la duree dessous. Sans heure, elle garde la duree seule. */
.modes.seule{grid-template-columns:1fr}
.dj-d.h{line-height:1.15;padding-top:2px}
.dj-d.h b{display:block;font-weight:700;color:var(--ink)}
.dj-d.h span{display:block;margin-top:2px;font-size:11.5px;font-weight:500;
  color:var(--mut)}
.dj-a{position:relative;min-height:22px;height:100%;display:block}
.dj-a::before{content:"";position:absolute;left:50%;top:20px;bottom:-6px;width:2px;
  transform:translateX(-50%);background:var(--line)}
.dj-p:last-child .dj-a::before{display:none}
.dj-p.att .dj-a::before{background:repeating-linear-gradient(180deg,
  var(--line) 0 3px,transparent 3px 7px)}
.dj-n{position:relative;z-index:1;width:22px;height:22px;border-radius:50%;
  background:var(--card);border:2px solid var(--line);display:grid;place-items:center}
.dj-n svg{width:12px;height:12px;color:var(--mut)}
.dj-p.cle .dj-n{border-color:var(--green-d);background:var(--green-d)}
.dj-p.cle .dj-n svg{color:#fff}
.dj-c{display:block;padding:0 0 16px}
.dj-p:last-child .dj-c{padding-bottom:0}
.dj-c b{display:block;font-size:15px;line-height:22px;font-weight:700;color:var(--ink)}
.dj-c em{display:block;font-style:normal;font-size:13.5px;color:var(--ink-2);margin-top:2px}
.dj-c i{display:block;font-style:normal;font-size:13px;color:var(--ink-2);margin-top:4px;
  font-variant-numeric:tabular-nums}
.dj-c i b,.dj-c em b{display:inline;font-size:inherit}
.dj-s{color:var(--green-d);font-weight:600}
/* La pastille se range au bout de l'en-tete, la ou l'oeil finit sa ligne, et
   non sous le resultat ou elle le mettait en doute avant qu'on l'ait lu. */
.dj-h .info{margin-left:auto;align-self:center}
/* La frequence, a cote du dernier troncon : discrete mais lisible. Sans
   elle, « 23 min en bus » se lit pareil qu'il y ait un bus par jour ou
   vingt — or 722 liaisons sur 3 037 en ont deux ou moins. */
.tr-f{font-weight:600;color:var(--ink-2);white-space:nowrap}  /* MARQUE_LOT262 : --terre n'existe pas ; --ink-2 est la
     couleur de la regle voisine, et l'ambre que le nom evoque
     donnerait 2,1:1 sur blanc. */
.dj-h .info p{margin:0 0 8px;font-size:13px;line-height:1.55;color:var(--ink-2)}
.dj-h .info p:last-child{margin-bottom:0}
@media(max-width:520px){
  .dj-od{margin-left:0;text-align:left;width:100%}
  .dj-tot b{font-size:28px}
  .dj-p{grid-template-columns:54px 20px 1fr;column-gap:9px}
  .dj-n{width:20px;height:20px}
  .dj-a::before{top:18px}
}
/* Sous 960 px on redevient un empilement : photo, titre, preuve. C'est
   l'ordre de tous les sites d'hebergement, et celui de la maquette. */
@media(max-width:960px){
  .chapeau{display:block}
  .chapeau-i{display:block}
  .chapeau .banniere{aspect-ratio:16/5;flex:none;min-height:0;margin:14px 0 6px}
}
.banniere{border-radius:var(--r-xl);overflow:hidden;aspect-ratio:16/5;margin:14px 0 6px;
  box-shadow:var(--sh);position:relative}
.banniere img,.banniere svg{width:100%;height:100%;object-fit:cover}
.entete{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
ul.poi{list-style:none;padding:0;margin:10px 0 18px;font-size:15px}
ul.poi li{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;padding:11px 0;
  border-bottom:1px solid var(--line)}
ul.poi .poi-t{flex:1 1 auto;min-width:0}
ul.poi .poi-d{flex:1 0 100%;margin:2px 0 0;font-size:13.5px;color:var(--ink-2);line-height:1.5}
ul.poi li:last-child{border:0}
ul.poi .dist{margin-left:auto;color:var(--ink-2);font-size:13.5px;white-space:nowrap}
ul.poi li:hover .voir-carte{border-color:var(--green)}
ul.equips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:14px 0 10px}
.eq{display:inline-flex;align-items:center;gap:8px;background:var(--green-l);
  color:var(--green-d);border-radius:10px;padding:8px 13px;font-size:14px;font-weight:600}
.eq svg{opacity:.85}
/* La pastille de reserve ferme la rangee, sans se deguiser en equipement. */
.eq-i{display:inline-flex;align-items:center;align-self:center}
.eq-i .info{margin:0}
figure.frise{margin:20px 0 8px;padding:16px 14px 8px;border:1px solid var(--line);
  border-radius:var(--r-l);background:var(--card)}
figure.frise svg{width:100%;height:auto;overflow:visible}
figure.frise figcaption{margin-top:6px;font-size:12.5px;color:var(--ink-3);line-height:1.5}
.frise .gr{stroke:var(--line);stroke-width:1}
.frise .zero{stroke:var(--ink-3)}
.frise .sais{fill:#F0F6F2}
.frise .bande{fill:#7CC4A0;fill-opacity:.55}
.frise .bande1{stroke:#7CC4A0;stroke-width:9;stroke-opacity:.55;stroke-linecap:round}
.frise .moy{fill:none;stroke:var(--green-d);stroke-width:2.4;stroke-linejoin:round;
  stroke-linecap:round}
.frise .mo{fill:var(--green-d);stroke:var(--card);stroke-width:1.6}
.frise .rec{fill:#98A5A0}
.frise .tige{stroke:#C9D2CD;stroke-width:1.2}
.frise .ax{font:11px var(--f);fill:var(--ink-2)}
.frise .fin{text-anchor:end}
.frise .mi{text-anchor:middle}
.frise .mi.fort{font-weight:700;fill:var(--ink)}
.frise .et{text-anchor:middle;font-weight:700;fill:var(--green-d)}
.frise .rc{text-anchor:middle;font-size:10px;fill:var(--ink-3)}
.leg-clim{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 10px;font-size:12.5px;
  color:var(--ink-2)}
.leg-clim .lg{display:inline-flex;align-items:center;gap:7px}
.leg-clim i{display:inline-block;flex:none;border-radius:2px}
.leg-clim .sw-bande{width:16px;height:11px;background:#7CC4A0;opacity:.55}
.leg-clim .sw-moy{width:16px;height:3px;background:var(--green-d);border-radius:2px}
.leg-clim .sw-rec{width:7px;height:7px;border-radius:50%;background:#9AA6A0}
/* MARQUE_LOT228 — LE BANDEAU D'ETE, EN JOURS COMPTES.
   Des jours reellement releves par la station, pas une moyenne : « 45 jours a
   plus de 25 degres sur 62 » se lit d'un coup d'oeil la ou « 28,3 degres de
   maximale moyenne » demande un effort. La jauge donne la proportion, les
   pastilles les seuils, et le record sa date. */
.ete-j{margin:2px 0 18px;padding:15px 16px 13px;border:1px solid var(--line);
  border-radius:14px;background:linear-gradient(180deg,#FFFBF0 0%,#FFF7E4 100%);
  max-width:66ch}
.et-t{margin:0 0 9px;font-size:16.5px;color:var(--ink)}
.et-t b{font-size:21px}
.et-t .mut{color:var(--ink-2);font-weight:400;font-size:14px}
.et-jauge{height:9px;border-radius:999px;background:#F0E2BC;overflow:hidden}
.et-jauge i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,#F0B429 0%,#DE7A22 100%)}
.et-ps{display:flex;flex-wrap:wrap;gap:7px;margin:11px 0 0}
.et-p{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;
  border-radius:999px;font:600 12.5px var(--f);border:1px solid transparent}
.et-p b{font-weight:700}
.et-p-c{background:#FDECD3;color:#8A5A10;border-color:#EBCF9B}
.et-p-tc{background:#FBDCD6;color:#96301C;border-color:#EEB7AB}
.et-p-p{background:#DDEAF7;color:#1F4B7A;border-color:#B6CFE8}
.et-rec{margin:10px 0 0;color:var(--ink-2);font-size:13.5px}
.et-rec b{color:var(--ink)}
/* Le depliant qui garde les douze mois : la courbe n'a pas ete supprimee,
   elle a ete descendue. */
.clim-d > summary{cursor:pointer;font:600 14px var(--f);color:var(--ink-2);
  padding:7px 0}
.clim-d[open] > summary{margin-bottom:2px}

.resume-clim{margin:-2px 0 14px;max-width:66ch;color:var(--ink-2)}
.resume-clim b{color:var(--ink)}

/* notes sur cinq : la jauge est un rappel visuel, le chiffre brut reste la */
.notes{display:flex;flex-direction:column;gap:8px;margin:14px 0}
.note-l{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:13.5px}
.note-t{font-weight:700;min-width:82px}
.note-n{font-weight:700}
.note-b{color:var(--ink-2)}
.note-d{color:var(--ink-3)}
.jauge{display:inline-flex;gap:3px}
.jauge i{width:9px;height:9px;border-radius:50%;background:var(--line);display:block}
.jauge i.p{background:var(--green)}
.note-l.vie .jauge i.p{background:#B07D2A}
.card .notes{margin:0;gap:4px}
.card .note-l{font-size:12px;gap:6px;flex-wrap:nowrap;white-space:nowrap}
.card .note-t{min-width:62px;font-weight:600;color:var(--ink-2)}
.card .note-b{margin-left:auto;font-size:11.5px}
.card .jauge i{width:7px;height:7px}
/* Pictogrammes d'equipement sur la vignette. Chacun garde son intitule en texte
   cache : une forme ne nomme pas un equipement, elle le rappelle. */
/* ---------- plan de ligne ---------- */
.ints{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 4px}
.int{display:inline-flex;align-items:center;gap:8px;background:var(--card);
  border:1px solid var(--line);border-radius:999px;padding:9px 15px;font:600 14px var(--f);
  color:var(--ink-2);cursor:pointer;transition:.12s}
.int:hover{border-color:var(--green);color:var(--green)}
.int[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.int .n{font-weight:700;opacity:.65;font-size:12.5px}
.ligne{list-style:none;margin:18px 0 0;padding:0;position:relative}
/* le trait de la ligne, tire d'un bout a l'autre */
.ligne::before{content:"";position:absolute;left:63px;top:14px;bottom:14px;width:3px;
  background:var(--green-l);border-radius:2px}
.stn{position:relative;margin:0}
.stn-b{all:unset;display:flex;width:100%;box-sizing:border-box;gap:18px;padding:11px 12px;
  border-radius:var(--r-l);cursor:pointer;align-items:flex-start}
.stn-b:hover{background:var(--bg-2)}
.stn-b:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.stn .t{flex:0 0 52px;text-align:right;font:700 13.5px var(--f);color:var(--ink-2);
  padding-top:2px}
.stn .c{position:relative;padding-left:22px;flex:1;min-width:0}
/* la pastille de la station, posee sur le trait */
.stn .c::before{content:"";position:absolute;left:-9px;top:5px;width:13px;height:13px;
  border-radius:50%;background:var(--card);border:3px solid var(--green)}
.stn.depart{padding:11px 12px;display:flex;gap:18px}
.stn.depart .c::before{background:var(--green);border-color:var(--green)}
.stn.depart .t{flex:0 0 52px;text-align:right;font-style:italic}
.stn b{display:block;font-size:15.5px;line-height:1.3}
.stn .m{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px}
.stn .ss{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.stn .ss .s{font-size:12.5px;background:var(--green-l);color:var(--green-d);
  border-radius:999px;padding:3px 10px}
.stn[hidden]{display:none}
.stn.sel .c::before{background:var(--amber);border-color:var(--amber);
  box-shadow:0 0 0 4px rgba(233,150,11,.22)}
.stn.sel .stn-b{background:var(--bg-2)}
@media(max-width:620px){.ligne::before{left:47px}.stn .t{flex-basis:36px;font-size:12.5px}
  .stn-b,.stn.depart{gap:12px}}
/* ---------- pastille d'information ---------- */
.th{display:flex;align-items:center;gap:9px;flex-wrap:wrap;position:relative}
/* Les etoiles doivent rester a droite du nom, pas passer a la ligne : la
   ligne ne se coupe plus, c'est le nom lui-meme qui se replie s'il est long. */
h1.th{gap:14px;flex-wrap:nowrap;align-items:center}
h1.th .nom{min-width:0}
.etoiles{display:inline-flex;align-items:center;gap:2px}
.etoiles svg{width:24px;height:24px;fill:var(--amber)}
@media (max-width:640px){.etoiles svg{width:19px;height:19px}}
h1.th .info .i{width:26px;height:26px;font-size:14px}
/* La pastille se posait sur la ligne de texte du titre : un <details> en
   inline-block herite de la hauteur de ligne du h2 (38 px pour 34 px de corps)
   et l'icone, alignee sur la ligne de base, tombait huit pixels trop bas. En
   faire une boite flex de sa propre hauteur la recentre vraiment. */
.th .info{position:static;display:flex;align-items:center;line-height:1}
.th .info>summary{display:flex}
.th .info .i{width:24px;height:24px;font-size:12px}
.th .info .info-c{left:0;right:auto;top:calc(100% + 6px);width:min(34rem,100%);
  font:400 13.5px/1.55 var(--f)}
.trj{display:inline-flex;align-items:center;gap:8px;margin-left:auto;background:var(--ink);
  border:1px solid var(--ink);border-radius:999px;padding:9px 15px;font:600 14px var(--f);
  color:#fff;cursor:pointer;transition:.12s}
.trj:hover{background:var(--green-d);border-color:var(--green-d)}
.trj[hidden]{display:none}
/* Les chiffres qui decident : distance a l'arret, marche, gare, departs. */
/* La carte des liaisons : un dessin, pas une carte glissante. Elle doit se lire
   d'un coup d'oeil et rester juste meme sans JavaScript. */
.trains-b{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:22px;align-items:center;margin-top:16px}
@media (max-width:800px){.trains-b{grid-template-columns:1fr}}
.trains-b.seule{grid-template-columns:1fr;max-width:640px}
.carte-tr{margin:0}
.carte-tr svg{width:100%;height:auto;display:block}
.carte-tr .fond path{fill:var(--bg-2);stroke:#fff;stroke-width:1.4;stroke-linejoin:round}
.carte-tr .tr line{stroke:var(--green);stroke-width:2;stroke-dasharray:5 5;opacity:.65}
.carte-tr .pt circle{fill:#fff;stroke:var(--green);stroke-width:2.5}
.carte-tr .pt circle.ici{fill:var(--amber);stroke:var(--ink);stroke-width:2.5}
.carte-tr .lb text{font:700 22px var(--f);fill:var(--ink);paint-order:stroke;
  stroke:#fff;stroke-width:6px;stroke-linejoin:round}
.carte-tr .lb .d{font-weight:500;fill:var(--ink-2)}
.carte-tr .tr line.fil{stroke:var(--ink-3);stroke-width:1.2;stroke-dasharray:none;opacity:.55}
.trains-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.trains-l li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:9px 0;border-bottom:1px solid var(--line)}
.trains-l li:last-child{border-bottom:0}
.trains-l b{font-size:15px}
.trains-l span{font-size:13px;color:var(--ink-2);white-space:nowrap;text-align:right}
.modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px;margin:16px 0 0}
/* Un bloc borde, arrondi, sur fond blanc : c'est la forme d'un element
   cliquable, et aucun de ceux-ci ne l'est. On garde un filet en tete de
   colonne — assez pour separer les modes, pas assez pour promettre un clic. */
.mode{border:0;border-top:2px solid var(--line);border-radius:0;
  padding:13px 0 4px;background:none}
.mode h3{display:flex;align-items:center;gap:8px;margin:0;font:700 12px var(--f);
  color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
.mode h3 svg{flex:none;opacity:.75;width:16px;height:16px}
.mode-v{margin:9px 0 8px;font:800 21px/1.15 var(--f-titre);letter-spacing:-.02em;
  color:var(--ink)}
.mode ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.mode li{font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.mode li b{color:var(--ink)}
/* L'alerte, elle, doit se voir : le filet passe a l'ambre et s'epaissit. */
.mode.alerte{border-top-color:var(--amber);border-top-width:3px;background:none}
.mode.alerte h3{color:#8A6100}
.acces-cles{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:10px;margin:16px 0 0;padding:0;list-style:none}
.ac{border:1px solid var(--line);border-radius:var(--r-l);padding:12px 14px 13px;
  background:var(--card)}
.ac .k{display:flex;align-items:center;gap:7px;font:700 11px var(--f);color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.05em;line-height:1.3}
.ac .k svg{flex:none;opacity:.75;width:15px;height:15px}
.ac>b{display:block;font:800 22px/1.1 var(--f-titre);letter-spacing:-.02em;margin:8px 0 3px}
.ac>span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;font-size:12.5px;color:var(--ink-2);line-height:1.4}
.ac.alerte{border-color:var(--amber);background:#FFFAF0}
.ac.alerte>span b{color:#8A5A00}
.mentions{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.mentions li{font-size:15px;line-height:1.6;padding-left:16px;position:relative}
.mentions li::before{content:"";position:absolute;left:0;top:10px;width:6px;height:6px;
  border-radius:50%;background:var(--green-l)}
.mentions mark{background:#FFF0CC;color:#7A5A16;padding:1px 6px;border-radius:4px;
  font-weight:600}
.note.alerte{border-left:4px solid var(--amber);background:#FFFAF0}
.fait{margin:12px 0 0;font-size:14px;color:var(--ink-2);line-height:1.55;max-width:70ch}
/* MARQUE_LOT118 — la chaine d'acces. Le point et les icones portent la
   couleur du niveau ; le texte reste en encre, sans quoi il tomberait sous
   le contraste exige pour du texte. */
.pacces{display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin:0 0 16px;
  font:700 13px var(--f);color:var(--ink)}
.pacces .pa-pt{width:9px;height:9px;border-radius:50%;flex:none}
.pacces .pa-m{display:inline-flex;align-items:center;gap:4px}
.pacces .pa-i{flex:none}
.pacces .pa-s{display:inline-flex;color:var(--ink-2);opacity:.65}
.pacces .pa-fin b{font-size:13.5px}
.pacces .pa-mot{margin-left:6px;font:700 11.5px var(--f);letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-2)}
.fait.alerte{border-left:3px solid var(--amber);padding-left:12px;color:var(--ink)}
/* Fenetre contextuelle « comment y aller » */
.modal{border:0;padding:0;border-radius:var(--r-xl);width:min(560px,92vw);
  background:var(--card);color:var(--ink);box-shadow:0 24px 60px rgba(14,26,20,.28)}
.modal::backdrop{background:rgba(14,26,20,.45)}
.modal:not([open]){display:none}
.modal-h{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px 20px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.modal-h b{font-size:16.5px;line-height:1.3}
.modal-x{background:none;border:0;font-size:26px;line-height:1;color:var(--ink-3);
  cursor:pointer;padding:0 2px}
.modal-x:hover{color:var(--ink)}
.modal-c{padding:18px 20px 20px}
.etapes{list-style:none;margin:18px 0 0;padding:0;counter-reset:etape}
.etapes>li{position:relative;padding-left:38px;margin-bottom:15px}
.etapes>li:last-child{margin-bottom:0}
.etapes>li::before{counter-increment:etape;content:counter(etape);position:absolute;
  left:0;top:1px;width:26px;height:26px;border-radius:50%;background:var(--green);
  color:#fff;display:grid;place-items:center;font:700 13px var(--f)}
.etapes>li>b{display:block;font-size:15px;margin-bottom:4px}
.etapes p b{color:var(--ink)}
.etapes p{margin:0 0 6px;font-size:13.5px;color:var(--ink-2);line-height:1.5}
.etape-l{display:flex;flex-wrap:wrap;gap:6px 18px}
.ymener{margin:18px 0 8px;padding:14px 16px;border:1px solid var(--line);
  border-radius:var(--r-l);background:var(--bg-2)}
.ym-lab{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;
  margin:0 0 9px;position:relative}
.ym-lab .info .info-c{left:0;width:min(34rem,78vw)}
.ym-l{display:flex;gap:9px;flex-wrap:wrap}
.ym-l input{flex:1 1 250px;min-width:0;padding:11px 15px;font:inherit;
  border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink)}
.ym-l input:focus{outline:2px solid var(--green);outline-offset:1px}
.ym-l .btn{flex:none}
.ym-s{margin:12px 0 0;font-size:14px;color:var(--ink-2);max-width:68ch}
.ym-b{display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:8px}
.lnk{font-size:13.5px;font-weight:600;color:var(--green-d);text-decoration:underline;
  text-underline-offset:3px}
.lnk:hover{color:var(--ink)}
/* Les trois modes tiennent sur une ligne dans la bulle : ce sont des choix
   equivalents, pas une action principale suivie de deux replis. */
.lieux{display:grid;grid-template-columns:repeat(auto-fill,minmax(292px,1fr));
  gap:14px;list-style:none;padding:0;margin:14px 0 0}
.lc{border:1px solid var(--line);border-radius:var(--r-l);padding:14px 16px 15px;
  background:var(--card);display:flex;flex-direction:column;gap:9px;transition:.12s}
.lc:hover{border-color:var(--green);box-shadow:var(--sh)}
.lc-h{display:flex;align-items:flex-start;gap:11px}
.lc-ic{flex:none;width:36px;height:36px;border-radius:11px;display:grid;
  place-items:center;color:#fff;background:#6B7280}
.lc-ic svg{width:19px;height:19px}
.lc-ic.visiter{background:#0F766E}.lc-ic.baigner{background:#1D4ED8}
.lc-ic.bus{background:#0F6E7A}
.lc-ic.marcher{background:#15803D}.lc-ic.amuser{background:#B45309}
.lc-n{flex:1;min-width:0}
.lc-n b{display:block;font-size:15.5px;line-height:1.3}
.lc-y{display:block;font-size:12.5px;color:var(--ink-3);margin-top:3px}
.lc-d{flex:none;text-align:right;font:700 14.5px var(--f);color:var(--ink);
  white-space:nowrap}
.lc-d i{display:block;font:400 11.5px var(--f);font-style:normal;color:var(--ink-3);
  margin-top:3px}
.lc-d.loin{font-weight:600;color:var(--ink-2)}
.lc-p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;
  overflow:hidden}
.lc-ss{display:flex;flex-wrap:wrap;gap:6px}
.lc-s{font-size:12.5px;background:var(--green-l);color:var(--green-d);
  border-radius:999px;padding:3px 10px}
.tete-bus{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-top:22px}
.tete-bus h3{margin:0}
.tete-bus .trj{margin-left:0}
/* Le bouton d'itineraire d'un lieu. « Itineraire et horaires » ecrit en
   toutes lettres apparaissait jusqu'a vingt-cinq fois sur une fiche : le
   pictogramme suffit, le texte reste pour les lecteurs d'ecran et au survol.
   Aligne a droite, la ou l'oeil termine sa lecture de la carte. */
/* `button.lc-b` et non `.lc-b` : ces boutons portent aussi la classe
   `.pop-b`, declaree plus bas avec `display:block;width:100%`. A specificite
   egale, c'est la derniere qui gagne — le bouton restait large et rectangulaire.
   Un selecteur de type suffit a trancher, sans `!important`. */
button.lc-b{margin-top:auto;align-self:flex-end;display:grid;place-items:center;
  width:38px;height:38px;background:var(--green-l);color:var(--green-d);
  border:0;border-radius:999px;padding:0;cursor:pointer;flex:none;
  transition:background .12s,color .12s}
button.lc-b:hover,button.lc-b:focus-visible{background:var(--green);color:#fff}
button.lc-b svg{width:17px;height:17px}
/* Le texte reste dans le document, hors de l'ecran : un lecteur d'ecran
   l'annonce, l'oeil ne le voit pas. */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Le bouton se place sous la liste et au centre : c'est la ou l'oeil arrive
   quand il a fini de parcourir la grille. Le chevron se retourne a l'ouverture. */
.lieux-plus{border:0;padding:0;margin:18px 0 0;text-align:center}
.lieux-plus>summary{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;
  border:1.5px solid var(--line);border-radius:999px;font:600 14px var(--f);
  color:var(--ink);background:var(--card);list-style:none;cursor:pointer;
  transition:.12s}
.lieux-plus>summary::after{content:none}
.lieux-plus>summary:hover{border-color:var(--green);color:var(--green)}
.lieux-plus>summary .chev{transition:transform .15s ease}
.lieux-plus[open]>summary .chev{transform:rotate(180deg)}
.lieux-plus[open]>summary{margin-bottom:14px}
.lieux-plus .lieux{text-align:left}
.tr-p>summary .chev{transition:transform .15s ease;vertical-align:-2px}
.tr-p[open]>summary .chev{transform:rotate(180deg)}
.pop-b{display:block;width:100%;margin-top:9px;background:var(--green);color:#fff;
  border:0;border-radius:999px;padding:8px 12px;font:700 12.5px var(--f);cursor:pointer}
.pop-b:hover{background:var(--green-d)}
/* Le panneau d'itineraire vit dans la page : aucune requete au chargement,
   aucune dependance a un service tiers pour lire un horaire. */
.trajet{margin:14px 0 4px;border:1px solid var(--line);border-radius:var(--r-l);
  background:var(--card);box-shadow:var(--sh);overflow:hidden}
.trajet[hidden]{display:none}
.tr-h{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 16px 11px;background:var(--bg-2);border-bottom:1px solid var(--line)}
.tr-h b{font-size:16.5px;line-height:1.25}
.tr-x{background:none;border:0;font-size:24px;line-height:1;color:var(--ink-3);
  cursor:pointer;padding:0 2px}
.tr-x:hover{color:var(--ink)}
/* La source, sous les durees d'une bulle de repere. Plus discrete que la
   ligne qu'elle commente : elle ne se lit que si l'on doute du chiffre. */
.pop-src{display:block;margin-top:5px;font-size:11.5px;line-height:1.45;
  color:var(--mut)}
.tr-modes{display:flex;gap:6px;padding:11px 16px 0}
.tr-modes button{flex:1 1 0;background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:9px 10px;color:var(--ink-2);cursor:pointer;
  transition:.12s;display:flex;align-items:center;justify-content:center;gap:6px}
.tr-modes button svg{width:23px;height:23px}
.tr-modes button:hover{border-color:var(--green);color:var(--green)}
.tr-modes button[aria-selected="true"]{background:var(--green);border-color:var(--green);
  color:#fff}
.tr-carte{padding:12px 16px 0}
#tr-map{height:190px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  background:var(--bg-2)}
.tr-mc{margin:7px 0 0;font-size:12px;line-height:1.45;color:var(--ink-3)}
.tr-c{padding:14px 16px 16px}
.tr-t{margin:0 0 10px;font-size:15px;color:var(--ink-2)}
.tr-t b{font-size:19px;color:var(--ink);font-weight:800}
.tr-s{border-top:1px solid var(--line);padding-top:11px;margin-top:11px}
.tr-s h4{margin:0 0 7px;font:700 13px var(--f);text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink-3)}
.tr-e{font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink-2)}
.tr-j{margin:8px 0 5px;font-size:12.5px;font-weight:700;color:var(--ink-2)}
.tr-j.vide{font-weight:400;color:var(--ink-3);font-style:italic}
/* MARQUE_LOT144 — la rangee des sept jours. Elle tient sur une ligne meme
   sur un telephone : sept boutons de 44 px minimum, ce que demandent les
   regles d'Apple (44 pt) et WCAG 2.2 (SC 2.5.5). Un jour sans depart reste
   cliquable — il faut pouvoir constater qu'il n'y a rien. */
.tr-jb{display:flex;gap:4px;margin:0 0 10px;flex-wrap:nowrap}
.tr-jb button{flex:1;min-width:0;min-height:44px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;padding:5px 2px;
  border:1px solid var(--filet);border-radius:8px;background:var(--blanc);
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  font:600 12px/1 var(--f);color:var(--encre-2);
  transition:background .15s,border-color .15s,color .15s}
.tr-jb button i{font-style:normal;font-size:10.5px;font-weight:700;opacity:.6;
  font-variant-numeric:tabular-nums}
.tr-jb button:hover{border-color:var(--filet-f)}
.tr-jb button:focus-visible{outline:2px solid var(--ambre);outline-offset:1px}
.tr-jb button[aria-pressed="true"]{background:var(--green-l);color:var(--green-d);
  border-color:var(--green-d);font-weight:700}
.tr-jb button[aria-pressed="true"] i{opacity:.85}
.tr-jb button.rien{color:var(--encre-3);background:var(--papier)}
.tr-jb button.rien i{opacity:.45}
/* Le jour reel du visiteur porte un point : la rangee dit ou l'on est, meme
   quand on est alle regarder un autre jour. */
.tr-jb button[data-auj]{position:relative}
.tr-jb button[data-auj]::after{content:"";position:absolute;top:4px;right:4px;
  width:5px;height:5px;border-radius:50%;background:var(--ambre)}
.tr-hs{display:flex;flex-wrap:wrap;gap:5px}
.tr-hs b{background:var(--green-l);color:var(--green-d);border-radius:6px;
  padding:4px 8px;font:700 13px/1 var(--f);font-variant-numeric:tabular-nums}
.tr-p{border:0;padding:0;margin:6px 0 0}
.tr-p>summary{list-style:none;cursor:pointer;display:inline-block;font:600 12.5px var(--f);
  color:var(--green-d);text-decoration:underline;text-underline-offset:3px}
.tr-p>summary::after{content:none}
.tr-p>summary::-webkit-details-marker{display:none}
.tr-p[open]>summary{margin-bottom:6px}
.tr-src{margin:11px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.tr-src.alerte{border-left:3px solid var(--amber);padding-left:11px;color:var(--ink-2)}
.tr-src.alerte b{color:var(--ink)}
.tr-c .lnk{display:inline-block;margin-top:10px}
.info{display:inline-block;vertical-align:middle;position:relative;border:0;padding:0}
.info>summary::after{content:none}
/* La FAQ pose un « + » sur tout summary et un « – » quand il est ouvert. Le
   second a la meme specificite que nos annulations et passe apres dans la
   feuille : sans ces regles, un tiret apparaissait a cote du titre ouvert. */
.info[open]>summary::after,.tr-p[open]>summary::after,
.lieux-plus[open]>summary::after,.voir-plus>details[open]>summary::after{content:none}
.voir-plus>details{border:0;padding:0}
.voir-plus>details>summary::after{content:none}
/* Le dessin fait 24 px, la zone tactile 44 : le padding negatif elargit la
   cible sans deplacer quoi que ce soit (WCAG 2.5.8 demande 24, les guides
   tactiles 44). */
.info>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;
  padding:10px;margin:-10px}
.info>summary::-webkit-details-marker{display:none}
.info .i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  border:1.5px solid var(--line);color:var(--ink-3);font:italic 700 13px var(--f-titre);
  background:var(--card);transition:.12s}
.info>summary:hover .i,.info[open] .i{border-color:var(--green);color:var(--green)}
.info>summary:focus-visible .i{outline:2px solid var(--ink);outline-offset:2px}
.info .info-c{position:absolute;z-index:40;left:0;top:32px;width:min(34rem,80vw);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:0 10px 34px rgba(18,33,31,.16);padding:16px 18px;font-size:13.5px;
  line-height:1.55;color:var(--ink-2)}
.info .info-c b{color:var(--ink)}
/* La source ferme la bulle sans encombrer la lecture : elle se consulte,
   elle ne se lit pas. */
.info .info-c .src{display:block;margin-top:9px;padding-top:8px;
  border-top:1px solid var(--line);font-size:12px;color:var(--ink-3);
  line-height:1.5}
@media(max-width:620px){.info .info-c{position:static;width:auto;margin-top:8px}}
/* Le bouton qui ouvre la tranche suivante prend la place d'une carte, sans en
   avoir l'air : pointille et fond neutre, pour qu'on ne le lise pas comme un
   camping de plus. */
.plus-liste{display:flex;align-items:center;justify-content:center;padding:22px;
  border:1px dashed var(--line);border-radius:var(--r-l);background:none;box-shadow:none}
.plus-liste:hover{box-shadow:none;transform:none}
/* ---------- listes repliees ---------- */
.voir-plus{list-style:none;padding:0}
.voir-plus>details>summary{cursor:pointer;display:inline-block;padding:8px 14px;
  border:1px dashed var(--line);border-radius:999px;font-size:13.5px;font-weight:600;
  color:var(--ink-2);list-style:none}
.voir-plus>details>summary::-webkit-details-marker{display:none}
.voir-plus>details>summary:hover{border-color:var(--green);color:var(--green)}
.voir-plus>details[open]>summary{margin-bottom:10px}
.voir-plus ul.poi{margin:0;padding:0}
.eqs{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.eqp{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:9px;
  background:var(--bg-2);border:1px solid var(--line);color:var(--ink-2);cursor:default}
.eqp svg{opacity:.85}
.eqp.plus{width:auto;padding:0 9px;font-size:12px;font-weight:600}
.card .notes{margin:2px 0 0}
/* ---------- carte de France cliquable ---------- */
.pan-fr{display:flex;flex-direction:column;gap:10px;padding:18px 18px 14px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:var(--sh)}
 /* Carte de reperage, pas seconde carte principale : hauteur fixee, largeur
   suivie, et le tout couche en ligne pour ne pas laisser un grand vide. */
.pan-fr.mini{flex-direction:row;align-items:center;gap:18px;padding:14px 18px;
  box-shadow:none;background:var(--bg-2)}
.pan-fr.mini svg{flex:none;width:auto;height:150px}
.pan-fr.mini .nom{text-align:left;font-size:14px;color:var(--ink);font-weight:600}
.pan-fr.mini .nom span{display:block;font-weight:400;font-size:12.5px;
  color:var(--ink-2);margin-top:4px}
.pan-fr svg{display:block;width:100%;height:auto;flex:1;min-height:0}
.pan-fr .rg path{fill:#E4F2F1;stroke:#fff;stroke-width:1.6;stroke-linejoin:round;
  transition:fill .12s ease}
.pan-fr .rg.n2 path{fill:#C0E3E2}
.pan-fr .rg.n3 path{fill:#8FCCCD}
.pan-fr .rg.n4 path{fill:#4FA8AF}
.pan-fr .rg.n5 path{fill:#14707C}
.pan-fr .rg:hover path,.pan-fr .rg:focus path{fill:var(--amber)}
/* La region courante ne se signale pas par la seule couleur : le trait epaissit
   aussi, et le titre de la page la nomme. */
.pan-fr .rg.ici path{fill:var(--amber);stroke:var(--ink);stroke-width:2.4}
.pan-fr .rg{outline:0}
.pan-fr .rg:focus-visible path{stroke:var(--ink);stroke-width:2.6}
.pan-fr text{font:700 26px var(--f);fill:var(--ink);paint-order:stroke;
  stroke:#fff;stroke-width:6px;stroke-linejoin:round;pointer-events:none}
.pan-fr .nom{font-size:13px;color:var(--ink-2);margin:0;text-align:center}
.pan-fr.mini text{display:none}
@media(max-width:1050px){.pan-fr{max-width:520px;margin:0 auto 26px}}

/* carte de situation : reperes, legende-filtre, infobulles */
.leg-carte{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 0}
.leg-carte button{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
  background:var(--card);border-radius:999px;padding:5px 12px 5px 5px;font:600 12.5px var(--f);
  color:var(--ink);cursor:pointer;min-height:32px}
.leg-carte button:hover{border-color:var(--green)}
.leg-carte button:focus-visible{outline:2px solid var(--green-d);outline-offset:2px}
/* Un bouton non choisi n'est plus barre : sa categorie EST visible tant que
   rien n'est selectionne. C'est le bouton choisi qui se distingue. */
.leg-carte button[aria-pressed="true"]{border-color:var(--green);
  background:var(--green-l);color:var(--green-d)}
.leg-carte button[aria-pressed="true"] .mut{color:var(--green-d);opacity:.75}
.leg-etat{align-self:center;font-size:12.5px;color:var(--mut);margin-left:2px}
td.vieux{color:#8A4B12;font-weight:600}
.leg-seule{display:flex;align-items:center;gap:9px;margin:10px 0 0;font-size:13.5px;
  color:var(--ink-2)}
.leg-seule b{color:var(--ink)}
.pastille{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;flex:none}
.pastille svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
/* le repere : 26 px, anneau blanc pour rester visible sur n'importe quelle tuile */
.poi-mk .mk{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;box-shadow:0 0 0 2px #fff,0 1px 4px rgba(14,26,20,.4);
  transition:transform .12s}
.poi-mk .mk svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.poi-mk:hover .mk,.poi-mk:focus .mk{transform:scale(1.18)}
.poi-mk:focus-visible{outline:3px solid #111;outline-offset:3px;border-radius:50%}
@media (prefers-reduced-motion: reduce){.poi-mk .mk{transition:none}}
/* grappes : la geometrie vient de la feuille du greffon, les couleurs d'ici.
   style.css etant charge avant elle, il faut un selecteur plus specifique. */
.leaflet-container .marker-cluster{background:rgba(31,122,77,.26)}
.leaflet-container .marker-cluster div{background:#1F7A4D;color:#fff;
  font:700 13px/30px var(--f);box-shadow:0 1px 4px rgba(14,26,20,.3)}
.leaflet-container .marker-cluster-medium{background:rgba(20,83,45,.26)}
.leaflet-container .marker-cluster-medium div{background:#14532D}
.leaflet-container .marker-cluster-large{background:rgba(11,58,32,.28)}
.leaflet-container .marker-cluster-large div{background:#0B3A20}
.leaflet-container .marker-cluster span{font-weight:700}
/* bouton de renvoi vers la carte, sur chaque ligne de liste */
.voir-carte{border:1px solid var(--line);background:var(--card);border-radius:999px;
  padding:4px 11px;font:600 12px var(--f);color:var(--ink-2);cursor:pointer;
  min-height:26px;align-self:start}
.voir-carte:hover{border-color:var(--green);color:var(--ink)}
.voir-carte:focus-visible{outline:2px solid var(--green-d);outline-offset:2px}
.poi-mk.camp .mk{width:34px;height:34px;background:var(--green-d);
  box-shadow:0 0 0 3px #fff,0 2px 8px rgba(14,26,20,.45)}
.poi-mk.camp .mk svg{width:19px;height:19px;stroke-width:2}
/* formulaire d'itineraire : un champ, un bouton, aucune dependance */
.itin{margin:20px 0 4px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--bg-2)}
.itin label{display:block;font-weight:700;margin-bottom:8px}
.itin-l{display:flex;gap:9px;flex-wrap:wrap}
.itin input[type=text]{flex:1 1 260px;min-width:0;padding:11px 14px;font:inherit;
  border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink)}
.itin input[type=text]:focus{outline:2px solid var(--green);outline-offset:1px}
.itin .btn{flex:none}
.itin .mut{font-size:12.5px;margin:10px 0 0;max-width:62ch}
.itin.etape2{margin-top:10px;background:var(--card)}
.itin .t2{font-weight:700;margin:0 0 6px}
.itin.etape2 p{margin:0 0 12px;max-width:62ch}
.regions{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 0}
.chip-reg{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
  background:var(--card);border-radius:999px;padding:6px 13px;font-size:13.5px;
  cursor:pointer;user-select:none}
.chip-reg:hover{border-color:var(--green)}
.chip-reg input{accent-color:var(--green);margin:0}
.chip-reg:has(input:checked){border-color:var(--green);background:var(--green-l);
  font-weight:600}
.chip-reg .mut{font-size:12px}
.leaflet-popup-content .pop-poi{min-width:172px}
.pop-poi b{display:block;font-size:14px;margin-bottom:2px}
.pop-poi span{display:block;color:var(--ink-2);font-size:12.5px}
.pop-poi .pop-d{margin-bottom:7px}
.pop-poi a{display:block;font-size:12.5px;font-weight:600}
.pop-poi .pop-s{margin-top:4px;font-weight:500;color:var(--ink-2)}
figure.rue{margin:24px 0;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line);
  background:var(--bg-2)}
figure.rue img{width:100%;aspect-ratio:16/8;object-fit:cover;display:block}
figure.rue figcaption{padding:12px 18px;font-size:13.5px;color:var(--ink-2);line-height:1.55}
.credit{font-size:12px;color:var(--ink-3);margin:6px 2px 0;text-align:right}
.credit a{color:var(--ink-3)}
.credit a:hover{color:var(--ink-2)}
.note{background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--amber);
  border-radius:0 var(--r) var(--r) 0;padding:16px 20px;font-size:14.5px;margin:22px 0;color:var(--ink-2)}
.note b{color:var(--ink)}
.demo{background:var(--ink);color:#fff;text-align:center;padding:9px 16px;font-size:13.5px}
/* z-index:0 cree un contexte d'empilement autour de la carte : les couches
   internes de Leaflet (z-index 400 a 700) y restent enfermees, au lieu de
   passer par-dessus l'en-tete colle (60) et la barre de filtres (40). */
#map{position:relative;z-index:0;
  height:380px;border-radius:var(--r-l);border:1px solid var(--line);margin:18px 0;background:var(--bg-3) repeating-linear-gradient(45deg,rgba(255,255,255,.5) 0 12px,transparent 12px 24px)}
/* Le lien d'evitement : cache jusqu'au focus, puis pose en haut a gauche.
   WCAG 2.1, critere 2.4.1 « Contourner des blocs », niveau A. */
.evitement{position:absolute;left:10px;top:-64px;z-index:200;
  background:var(--green);color:#fff;padding:12px 18px;font-weight:600;
  border-radius:0 0 var(--r) var(--r);transition:top .12s}
.evitement:focus{top:0;color:#fff}

/* Le panneau de preuve : les trois faits qui repondent a « est-ce que j'y
   arrive sans voiture ? », poses sous le titre. Ils etaient a 1 657 px du
   haut du document sur telephone — mesure du 28 aout. */
.preuve{list-style:none;margin:16px 0 20px;padding:15px 18px;
  background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r-l);display:grid;gap:10px;max-width:54ch}
.preuve li{display:flex;gap:11px;align-items:flex-start;
  font-size:15px;line-height:1.45}
.preuve svg{flex:none;margin-top:3px;color:var(--green)}

/* Sur telephone, le fil d'Ariane passait sur deux lignes et prenait 60 px
   juste au-dessus du titre. Une ligne qui defile en rend la moitie. Les liens
   restent atteignables au clavier : le navigateur les amene dans la vue quand
   ils prennent le focus. */
/* Les onglets d'ancrage (lot 88). Une fiche fait environ 9 000 px sur
   telephone et n'avait aucun repere.

   COLLANTS SUR GRAND ECRAN SEULEMENT. Sous 900 px les en-tetes de section
   sont deja collantes — voir .rp>summary et l'empilement qui y est
   documente : site 60, barre d'action 50, titre de section 40. Une barre de
   plus s'y superposerait. Sur telephone les onglets sont donc un sommaire
   pose en haut de la fiche, qui defile avec elle. */
.anc{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
  white-space:nowrap;margin:18px 0 0;padding-bottom:2px}
.anc::-webkit-scrollbar{display:none}
.anc a{flex:none;padding:8px 14px;border:1px solid var(--line);
  border-radius:999px;font-size:14px;font-weight:600;color:var(--ink-2);
  background:var(--card)}
.anc a:hover{border-color:var(--ink-3);color:var(--ink)}
.anc a[aria-current="true"]{background:var(--green);border-color:var(--green);
  color:#fff}
@media(min-width:900px){
  .anc{position:sticky;top:var(--h-head,72px);z-index:30;background:var(--bg);
    margin:10px 0 0;padding:10px 0;border-bottom:1px solid var(--line)}
  /* MARQUE_LOT269 — LA BARRE REND LA PLACE PENDANT QU'ON SE SERT DE LA CARTE.
     Elle recouvrait le champ de recherche de l'ilot de 26 px (audit, A11).
     `static` et non `display:none` : un element collant occupe deja sa place
     dans le flux, donc rien ne bouge — seule sa peinture cesse d'etre
     decalee. `jx-plein` est pose par `libereAncre()`, dans filtres.js. */
  body.jx-plein .anc{position:static}
}
/* MARQUE_LOT271 — LE BORD D'UNE BANDE QUI DEFILE.
   Un MASQUE, et non une couche posee dessus : le masque s'applique a la boite
   rendue et reste en place, la ou un `::after` defilerait avec le contenu. Les
   ombres en `background-attachment:local` auraient ete purement CSS mais se
   peignent DERRIERE des pastilles opaques — il n'en resterait que la
   gouttiere.
   `--f0` et `--f1` sont definies ICI et pas seulement dans les regles
   d'attribut : une `var()` sans definition rend la propriete invalide, donc
   heritee, donc juste par accident (lecon du lot 262).
   `data-deb` et `data-fin` sont poses par `marqueDefilement()`, filtres.js. */
.dfl{--f0:0px;--f1:0px;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--f0),
    #000 calc(100% - var(--f1)),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 var(--f0),
    #000 calc(100% - var(--f1)),transparent 100%)}
.dfl[data-deb="1"]{--f0:26px}
.dfl[data-fin="1"]{--f1:26px}
/* Le doigt s'arrete sur une pastille entiere plutot qu'en plein mot. */
.anc.dfl,.fil.dfl,.rapides.dfl{scroll-snap-type:x proximity}
.anc.dfl>*,.rapides.dfl>*{scroll-snap-align:start}

/* La cible ne doit pas se poser sous les barres collantes. */
#hb-t,#s-aller,.rp[id]{scroll-margin-top:calc(var(--h-head,72px) + 62px)}
.fil{font-size:13px;color:var(--ink-3);padding-top:18px;
  white-space:nowrap;overflow-x:auto;scrollbar-width:none}
.fil::-webkit-scrollbar{display:none}
.fil a{color:var(--ink-3)}
.fil a:hover{color:var(--ink-2)}
/* `:not(.rp)` : cette regle a ete ecrite pour les <details> de la foire aux
   questions. Les sections repliables des fiches (lot 56) en sont exclues,
   sinon elles heritent d'un rembourrage et d'un filet qu'elles n'ont pas
   demandes. */
details:not(.rp){border-bottom:1px solid var(--line);padding:16px 0}
summary{cursor:pointer;font-weight:600;font-size:16px;list-style:none;display:flex;
  justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--green);font-weight:400;font-size:22px;line-height:1}
details[open] summary::after{content:"–"}
/* Meme raison : sans cette exclusion, tous les paragraphes des quatre
   sections repliables passeraient en gris — un defaut qui ne casse rien et
   qui deteint partout. */
details:not(.rp) p{margin:12px 0 0;color:var(--ink-2)}
.liens{columns:4;column-gap:24px;list-style:none;padding:0;font-size:15px}
.liens li{break-inside:avoid;padding:5px 0}
.liens a{color:var(--ink)}
.liens a:hover{color:var(--green)}
@media(max-width:900px){.liens{columns:2}}
@media(max-width:520px){.liens{columns:1}}
table.tb{width:100%;border-collapse:collapse;font-size:14.5px;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden}
table.tb th{text-align:left;background:var(--bg-2);padding:11px 14px;font-size:12px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)}
table.tb td{padding:11px 14px;border-top:1px solid var(--line);vertical-align:top}
table.tb .puce{display:inline-block;width:.7em;height:.7em;border-radius:50%;margin-right:.45em}
ol li,ul.puces li{margin-bottom:.5em}
/* ---------- footer ---------- */
footer.site{background:var(--ink);color:#B9C6BF;margin-top:0;padding:56px 0 32px;font-size:14.5px}
footer.site a{color:#fff}
footer.site a:hover{color:var(--amber)}
footer.site h3{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:#7C8C85;
  margin:0 0 12px;font-weight:600}
.fgrid{display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.fgrid ul{list-style:none;padding:0;margin:0}
.fgrid li{padding:3px 0}
.fbot{border-top:1px solid rgba(255,255,255,.13);margin-top:38px;padding-top:20px;
  color:#7C8C85;font-size:13px;max-width:90ch}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* Le temps de trajet, sur les pages de depart : des boutons radio deguises en
   pastilles, dans la barre et non dans le panneau replie. */
.grp-dur{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
.grp-dur::before{content:"≤";color:var(--ink-3);font-size:14px;margin-right:2px}
/* ---------- accueil : d'ou partez-vous ? ---------- */
.depart{margin:22px 0 12px;display:flex;flex-direction:column;gap:9px}
.depart>label{font:600 15px var(--f);color:var(--ink)}
.depart-in{display:flex;gap:8px;align-items:center;background:var(--card);
  border:1px solid var(--line);border-radius:999px;padding:7px 8px 7px 16px;
  box-shadow:var(--sh);max-width:620px}
.depart-in svg{flex:none;opacity:.55}
.depart-in input{flex:1;min-width:0;border:0;background:none;font:16px var(--f);
  color:inherit;outline:0;padding:10px 4px}
.depart-in .btn{white-space:nowrap;min-height:44px}
.depart-ex{margin:0;font-size:13.5px;color:var(--ink-2);display:flex;gap:7px;
  flex-wrap:wrap;align-items:center}
.depart-ex .chip{padding:5px 11px;font-size:13px}
.searchbar.mince{max-width:620px;box-shadow:none;border:1px solid var(--line)}
.searchbar.mince input{font-size:15px}
@media(max-width:620px){
  .depart-in{flex-wrap:wrap;border-radius:var(--r-l);padding:10px}
  .depart-in .btn{width:100%}
}
/* ---------- « au depart de » : le temps de porte a tente ----------
   Le chiffre qui decide, sur une page de depart, n'est pas la distance a
   l'arret : c'est le temps qu'on met vraiment. Il passe donc en tete de la
   vignette, avant les equipements. */
.tr-dep{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:10px 0 0;
  padding:8px 11px;border-radius:var(--r);background:var(--green-l);
  color:var(--green-d);font-size:12.8px;line-height:1.45}
.tr-dep svg{flex:none;opacity:.8}
.tr-dep b{font-weight:700}
/* ---------- fiche : la barre d'action, la ou est le pouce ----------
   Elle n'existe que sur telephone : au-dela de 900 px, la colonne laterale de
   la fiche porte deja les memes actions, et une barre collee en bas d'un grand
   ecran ne fait que voler de la place. */
.fliens{margin:0 0 14px;font-size:13px;line-height:1.7;color:var(--ink-2)}
.fliens a{color:inherit}
.barre-action{position:sticky;bottom:0;z-index:50;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(12px);
  border-top:1px solid var(--line)}
.ba-b{display:flex;gap:9px}
.barre-action .btn{flex:1;justify-content:center;min-height:48px}
.barre-action .btn.sec{flex:0 0 auto}
/* La mention tient sur une ligne de 11,5 px : seize pixels de barre en plus,
   et le lien remunere n'est plus propose sans le dire. */
/* Le prix ne prend pas de rangee : il est la seconde ligne du bouton
   « Reserver ». Mesure du 28 aout, fiche partenaire a 390 px : pose sur une
   ligne a part, il portait la barre de 110 a 136 px. Ici il coute l'epaisseur
   d'une ligne de 12 px dans un bouton qui existe deja, et il se trouve la ou
   se prend la decision. Le bouton garde ses 48 px de haut minimum, impose
   plus bas — WCAG 2.2, critere 2.5.8. */
.barre-action .btn.ba-r{flex-direction:column;gap:0;line-height:1.15;
  padding-top:8px;padding-bottom:8px}
.ba-bp{font-weight:400;font-size:12px;opacity:.8}
.ba-m{margin:7px 0 0;font-size:11.5px;line-height:1.35;color:var(--mut);
  display:flex;align-items:center;gap:6px;justify-content:center}
@media(min-width:900px){.barre-action{display:none}}
/* MARQUE_LOT184 — tant qu'une couche recouvre la carte-jeu, la barre
   s'efface. Mesure du 9 septembre en 375x812 : panneau 572..1213,
   barre 725..812 — la barre mangeait le bas du panneau, c'est-a-dire
   ses deux boutons. La classe est posee par jeu.js (majCouvert). */
body.jx-couvert .barre-action{display:none}
/* ---------- explorateur : la carte d'abord ----------
   La feuille de resultats ne se traine pas au doigt : elle remonte avec le
   defilement de la page. Une marge negative la fait demarrer a mi-hauteur, la
   carte reste collee derriere. Aucun gestionnaire tactile maison, donc le meme
   comportement a la molette, au clavier et au lecteur d'ecran. */
/* ---------- la bascule entre les deux cartes ---------- */
/* Les deux vues occupent exactement la meme boite : basculer ne doit rien
   deplacer autour. Le bouton flotte au-dessus, en haut a gauche de la carte,
   la ou il ne recouvre ni les commandes de zoom ni l'attribution. */
/* Sur mobile, `.outils` flotte au-dessus de la carte : le champ de recherche
   recouvrait la bascule et la rendait inatteignable — mesure au clic, pas a
   l'oeil. Elle passe donc SOUS la barre. Au-dela de 900 px les outils sont
   dans la colonne de gauche, la carte est libre, et la bascule remonte. */
/* Sur mobile elle flottait sur la carte, dont elle mangeait le haut. Elle
   passe au-dessus, en pleine largeur : deux moities egales, on voit d'un coup
   d'oeil laquelle est active et on l'atteint au pouce. */
.bascule{display:flex;flex:none;gap:3px;padding:3px;margin:8px 8px 6px;
  background:var(--bg-2);border-radius:999px;border:1px solid var(--line)}
.bascule button{flex:1 1 0;justify-content:center}
.bascule button{border:0;background:none;color:var(--ink-2);border-radius:999px;
  padding:7px 13px;font:600 13px var(--f);cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px}
.bascule button svg{width:15px;height:15px;flex:none}
.bascule button.on{background:var(--green);color:#fff}
.bascule button:not(.on):hover{color:var(--ink)}
/* La carte des regions doit remplir sa boite comme le fait la carte
   interactive : meme cadre, meme centre. Le panneau qui l'enveloppe perd sa
   bordure et son ombre — il est deja dans un cadre — et le SVG se contente de
   la place disponible, sans deborder ni se tasser dans un coin. */
#carte-reg{height:100%;display:flex;align-items:center;justify-content:center;
  background:var(--bg-2);padding:60px 14px 18px;overflow:hidden}
#carte-reg .pan-fr{background:none;border:0;box-shadow:none;padding:0;
  width:100%;height:100%;justify-content:center}
#carte-reg svg{width:100%;height:auto;max-height:100%;max-width:100%;display:block}
#carte-reg[hidden],#map[hidden]{display:none}
@media(min-width:900px){
  /* Sur ecran large la carte a sa colonne : la bascule peut flotter dessus
     sans rien lui prendre, et retrouve sa taille de contenu. */
  .bascule{position:absolute;top:10px;left:10px;margin:0;width:auto;
    display:inline-flex;background:rgba(255,255,255,.92);
    box-shadow:var(--sh);backdrop-filter:blur(6px);border:0}
  .bascule button{flex:0 0 auto}
}

.expl{position:relative}
/* La barre d'outils flottait AU-DESSUS d'une carte plein ecran : `height:0`
   la sortait du flux pour ne pas manger la carte. La carte n'est plus plein
   ecran ; la barre reprend sa place dans le flux, avec un fond, et reste
   collee en haut au defilement. */
.outils{position:sticky;top:var(--h-head,65px);z-index:7;height:auto;
  display:flex;gap:8px;padding:10px 12px;align-items:center;background:var(--bg)}
.outils .ch-q{flex:1 1 auto;min-width:0;background:var(--card);box-shadow:var(--sh)}
.outils .ch-f{background:var(--card);box-shadow:var(--sh);white-space:nowrap}
/* Un bloc de hauteur definie, pas une carte plein ecran. 46 % de la hauteur
   d'ecran laisse voir la France entiere sur un telephone, et laisse de la
   place a la liste dessous sans qu'on ait a la faire remonter. */
/* `relative` et non `static` : le bouton « Rechercher dans cette zone » est un
   enfant de ce cadre et se place en absolu. En `static`, ce cadre ne lui sert
   plus de reference et le bouton va s'ancrer au document — il se retrouve tout
   en bas de la liste, a plusieurs milliers de pixels de la carte. */
.expl-carte{position:relative;height:52dvh;min-height:340px;margin:0 12px;
  border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line);z-index:0;
  display:flex;flex-direction:column}
/* La bascule est un enfant de ce cadre : en colonne, elle se pose au-dessus et
   la carte prend ce qui reste. Sans cela, `height:100%` sur la carte ajoutait
   la hauteur de la bascule et le bas de la carte passait sous le bord. */
.expl #map,#carte-reg{flex:1 1 auto;height:auto;min-height:0}
.expl #map{height:100%;margin:0;border:0;border-radius:0}
/* Il etait ancre a 64 % de la hauteur d'ecran — la ou la feuille commencait.
   Il se pose maintenant en bas de la carte, dans la carte. */
#map[hidden] ~ .expl-zone{display:none}
.expl-zone{position:absolute;left:50%;transform:translateX(-50%);bottom:12px;
  z-index:5;background:var(--ink);color:#fff;border:0;border-radius:999px;padding:11px 18px;
  font:600 14px var(--f);box-shadow:var(--sh-h);cursor:pointer}
/* Elle remontait de 62 % de l'ecran pour couvrir la carte. Elle la suit
   maintenant, simplement. */
.feuille{position:static;z-index:6;margin:16px 0 0;background:none;
  border-radius:0;box-shadow:none;min-height:0;padding:0 14px 70px}
/* La poignee servait a tirer la feuille par-dessus la carte. Plus de feuille
   glissante, plus de poignee : un element qui ne fait rien invite a un geste
   qui n'existe pas. */
.poignee{display:none}
.poignee>span:first-child{display:block;width:44px;height:5px;border-radius:99px;
  background:var(--line);margin:0 auto}
.feuille-h{font:700 20px/1.15 var(--f-titre);letter-spacing:-.02em;margin:2px 0 5px}
.feuille-tete .lede{font-size:13.5px;line-height:1.5;margin:0 0 10px;color:var(--ink-2)}
.rapides{display:flex;gap:8px;overflow-x:auto;padding-bottom:10px;scrollbar-width:none}
.rapides::-webkit-scrollbar{display:none}
.rapides .qf,.rapides .ch-t{flex:none}
.feuille-etat{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:2px 0 12px;
  border-bottom:1px solid var(--line);margin-bottom:14px}
.zone-active{background:var(--green-l);color:var(--green-d);border:0;border-radius:999px;
  padding:7px 12px;font:600 13px var(--f);cursor:pointer}
.expl .grid{margin:0}
.vide-liste,.plus-liste{grid-column:1/-1}
/* ---------- la feuille des filtres ---------- */
body.fige{overflow:hidden}
.modale[hidden]{display:none}
/* MARQUE_LOT184 — 1200 et non 90 : Leaflet pose ses coins a 1000, et la
   feuille des filtres se retrouvait sous les boutons de zoom et sous
   l'attribution de la carte-jeu. */
.modale{position:fixed;inset:0;z-index:1200;background:rgba(9,20,18,.45);
  display:flex;align-items:flex-end;justify-content:center}
.modale-in{background:var(--card);width:100%;max-height:88dvh;overflow:auto;
  border-radius:var(--r-xl) var(--r-xl) 0 0;padding:0 18px}
.modale-tete{position:sticky;top:0;z-index:2;background:var(--card);display:flex;
  align-items:center;justify-content:space-between;padding:16px 0 12px;
  border-bottom:1px solid var(--line);font:600 17px var(--f-titre)}
.modale-x{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:var(--card);cursor:pointer;font-size:15px;color:var(--ink-2)}
.modale-pied{position:sticky;bottom:0;background:var(--card);padding:12px 0 16px;
  border-top:1px solid var(--line)}
.modale-pied .btn{width:100%;justify-content:center}
.modale .opt{display:flex;align-items:center;gap:9px}
.modale .opt .n{margin-left:auto;color:var(--ink-3);font-size:12.5px;
  font-variant-numeric:tabular-nums}
.modale .opt.vide{opacity:.45}
@media(min-width:900px){
  /* Deux colonnes : la liste a gauche, la carte collee a droite. Le format
     paysage n'a aucune raison d'empiler ce que l'oeil peut comparer. */
  .expl{display:grid;grid-template-columns:minmax(360px,44%) 1fr;gap:26px;
    max-width:1500px;margin:0 auto;padding:16px 22px 0;align-items:start}
  /* Elle etait statique : elle partait avec le defilement et il fallait
     remonter toute la page pour filtrer. Collante sous l'en-tete du site,
     avec un fond opaque — sans lui, les vignettes defilent au travers. */
  .outils{position:sticky;top:calc(var(--h-head,65px) + 12px);height:auto;
    padding:10px 0;grid-column:1;grid-row:1;background:var(--bg);
    box-shadow:0 10px 12px -10px var(--bg)}
  /* La carte redevient collee et pleine hauteur dans sa colonne : les regles
     mobiles ci-dessus ne valent que pour l'empilement. */
  .expl-carte{margin:0;display:block}
  .expl #map{height:100%}
  #carte-reg{height:100%}
  .feuille{padding:14px 0 40px}
  .expl-zone{bottom:18px}
  .expl-carte{grid-column:2;grid-row:1 / span 2;position:sticky;
    top:calc(var(--h-head,65px) + 16px);height:calc(100dvh - var(--h-head,65px) - 32px);
    border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
  .feuille{grid-column:1;grid-row:2;position:static;margin:0;background:none;
    box-shadow:none;border-radius:0;min-height:0;padding:14px 0 40px}
  .poignee{display:none}
  .expl-zone{bottom:18px}
  .rapides{flex-wrap:wrap;overflow:visible}
  .modale{align-items:center}
  .modale-in{max-width:760px;border-radius:var(--r-l);max-height:82dvh}
}

/* ---------- l'onglet lateral des filtres ---------- */
/* Il est pose EN RETRAIT du bord, pas colle contre lui : les vingt premiers
   pixels appartiennent au navigateur, qui y lit son geste « page precedente ».
   Il s'ouvre au clic seul — on ne lui apprend jamais un balayage que le
   navigateur intercepterait une fois sur deux. */
/* L'accueil a sa propre barre de recherche et de filtres, collante en haut :
   l'onglet lateral y faisait doublon, et son ancrage a droite de la carte le
   posait sur la carte elle-meme. Les pages de liste, qui n'ont pas de barre,
   le gardent — c'est leur seul acces aux filtres une fois defilees. */
/* Ni sur l'accueil, qui a sa propre barre d'outils, ni sur une fiche, ou il
   n'y a rigoureusement rien a filtrer — et ou il chevauche les sections. */
/* `p-fiche` et non `fiche` : `.fiche` est deja la grille interieure de la
   page. Ecrite sur <body>, elle mettait le pied de page et le fil d'Ariane
   dans une colonne de 340 px et faisait defiler la page lateralement. Le
   prefixe `p-` reserve le mot aux corps de page. */
body.accueil .onglet-f,body.p-fiche .onglet-f{display:none}
.onglet-f{position:fixed;right:14px;top:58%;transform:translateY(-50%);z-index:80;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  background:var(--green);color:#fff;border:0;border-radius:999px;
  padding:14px 9px;min-width:38px;min-height:104px;cursor:pointer;
  font:600 12.5px/1.1 var(--f-titre);letter-spacing:.04em;
  box-shadow:0 2px 6px rgba(14,26,20,.16),0 14px 30px -12px rgba(14,26,20,.5);
  transition:transform .18s ease,opacity .18s ease}
.onglet-f:hover{background:var(--green-d)}
.onglet-lib{writing-mode:vertical-rl;text-orientation:mixed}
.onglet-n{background:#fff;color:var(--green-d);border-radius:999px;
  min-width:20px;padding:1px 5px;font-size:11.5px;font-variant-numeric:tabular-nums}
.onglet-n[hidden]{display:none}
/* WCAG 2.4.11 : un element fixe ne doit pas recouvrir ce qui recoit le focus.
   L'onglet s'ecarte le temps qu'un element sous lui soit au clavier. */
.onglet-f.ecarte{transform:translate(120%,-50%);opacity:0;pointer-events:none}
.onglet-f[hidden]{display:none}
@media(max-width:520px){.onglet-f{right:10px;top:auto;bottom:104px;transform:none}
  .onglet-f.ecarte{transform:translateX(120%)}}
@media print{.onglet-f{display:none}}


/* ---------- lot 9 : les familles de lieux ---------- */
.h-fam{display:flex;align-items:center;gap:9px;margin:26px 0 10px}
.h-fam:first-child{margin-top:0}
.h-fam .pastille{display:grid;place-items:center;width:30px;height:30px;
  border-radius:9px;background:var(--green-l);color:var(--green-d);flex:none}
.h-fam h3{margin:0;font-size:17px}
.h-fam .mut{font-weight:400;color:var(--ink-3);font-size:14px}

/* ---------- lot 8 : les sites d'exception ---------- */
/* L'or, et lui seul, pour ce qui est officiellement remarquable. Le vert du
   site dit « accessible » ; il ne doit pas dire aussi « exceptionnel », sans
   quoi les deux mots finissent par ne plus rien dire. */
/* Le bandeau du monument, au bas de la vignette. Le degrade est la pour la
   lisibilite : une photo aerienne peut etre claire ou sombre, le texte doit
   tenir sur les deux. Il ne recouvre que le tiers bas de l'image. */
.ph .exc{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;
  gap:7px;padding:22px 11px 9px;background:linear-gradient(180deg,
  rgba(15,23,28,0) 0%,rgba(15,23,28,.55) 45%,rgba(15,23,28,.82) 100%);
  color:#fff;border:0;border-radius:0;font:600 12.5px var(--f);pointer-events:none}
/* `.card .ph svg` etire l'illustration de repli a 100 % de la vignette. Sans
   cette regle, le pictogramme du bandeau heritait de la meme taille et
   occupait toute l'image. */
.ph .exc svg{width:15px;height:15px;flex:none;opacity:.9}
.ph .exc .exc-n{flex:1;min-width:0;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.ph .exc .d{color:#F0E2BC;font-weight:600;flex:none;
  text-shadow:0 1px 2px rgba(0,0,0,.35)}

.exc{display:inline-flex;align-items:center;gap:6px;background:#FBF3DC;
  color:#7A5B12;border:1px solid #E4CE8E;border-radius:999px;
  padding:3px 10px 3px 8px;font:600 12.5px var(--f);line-height:1.35;max-width:100%}
.exc svg{flex:none}
.exc .d{font-weight:400;color:#8E7333;font-variant-numeric:tabular-nums}
.exc-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .exc{margin:2px 0 0}

/* La section des sites d'exception, en tete de « ce qu'il y a autour ». */
.h-exc{display:flex;align-items:center;gap:9px;margin:0 0 10px}
.h-exc .pastille{display:grid;place-items:center;width:30px;height:30px;
  border-radius:9px;background:#FBF3DC;color:#7A5B12;flex:none}
.lc.exception{border-color:#E4CE8E;background:linear-gradient(180deg,#FEFBF3,var(--card))}
.lc.exception .lc-ic{background:#FBF3DC;color:#7A5B12}
/* .lc-lab a disparu : il repetait le libelle deja porte par .lc-y. */
.lc.exception{border-color:#E8D9A8}
/* Une carte de monument n'a pas de description : `margin-top:auto` poussait
   son bouton tout en bas et creusait deux lignes de vide sous le nom. */
.lc.exception button.lc-b{margin-top:2px}
/* Une position approximative ne doit pas annoncer un temps de marche faux. */
.lc-d.approx{color:var(--ink-3);font-weight:500}
.lc-d.approx i{font-style:normal}

/* ---------- lot 7 : la bande de liens ---------- */
/* Ce qui partait avec les paragraphes du lot 6, ce n'etait pas la prose :
   c'etaient les liens qu'ils contenaient. Ils reviennent seuls, en jetons. */
.bl{margin:34px 0 8px;display:flex;flex-direction:column;gap:14px}
.bl h2{font:700 15px var(--f-titre);margin:0 0 8px;color:var(--ink-2)}
.bl-l{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none}
.bl-l a{display:inline-flex;align-items:center;gap:6px;min-height:36px;
  padding:7px 13px;border:1px solid var(--line);border-radius:999px;
  background:var(--card);color:var(--ink);text-decoration:none;font-size:14px}
.bl-l a:hover{border-color:var(--green);color:var(--green-d)}
.bl-l .mut{color:var(--ink-3);font-variant-numeric:tabular-nums}

/* ---------- lot 6 : la barre reduite, le panneau en accordeons ---------- */
.barre-in{padding:9px 0 10px}
.rangee{display:flex;flex-wrap:nowrap;align-items:center;gap:8px}
.rangee .ch-q{flex:1 1 auto;min-width:0}
.rangee .ch-f{flex:0 0 auto;min-height:44px}
.etat-liste{display:flex;align-items:center;gap:12px;padding:8px 0 0;min-height:22px}
.etat-liste .cnt{margin-left:0}
.etat-liste .raz{margin-left:auto}

/* Le bouton Filtres : pictogramme, mot, pastille. */
.ch-f{gap:7px;padding-left:13px;padding-right:13px}
.ch-f svg{flex:none}

/* Un critere = un accordeon replie. Ouverts d'un bloc, les douze groupes
   demandaient trois ecrans de defilement avant d'atteindre le bouton. */
/* Les fiches ont leurs propres <details> — la foire aux questions — et une
   regle globale leur ajoute un « + ». Nos titres de critere portent deja leur
   chevron : deux signes pour la meme chose, c'est un de trop. */
.grp-d>summary::after,.grp-d[open]>summary::after{content:none}
.grp-d{border-bottom:1px solid var(--line);padding:0}
.grp-d:last-of-type{border-bottom:0}
.grp-d>summary{display:flex;align-items:center;gap:11px;padding:13px 2px;
  cursor:pointer;list-style:none;min-height:52px;
  font:600 15px/1.25 var(--f-titre);color:var(--ink)}
.grp-d>summary::-webkit-details-marker{display:none}
.grp-d>summary:hover{color:var(--green-d)}
.grp-d>summary:focus-visible{outline:2px solid var(--green);outline-offset:-2px;border-radius:8px}
.grp-d .gi{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;
  background:var(--green-l);color:var(--green-d);flex:none}
.grp-d .gt{flex:1 1 auto;min-width:0}
.grp-d .chev{flex:none;color:var(--ink-3);transition:transform .18s ease}
.grp-d[open] .chev{transform:rotate(180deg)}
.grp-d[open]>summary{color:var(--green-d)}
.grp-n{flex:none;background:var(--green);color:#fff;border-radius:999px;
  min-width:21px;padding:1px 6px;font:600 12px var(--f);text-align:center;
  font-variant-numeric:tabular-nums}
.grp-n[hidden]{display:none}
.grp-d .opts{padding:0 0 14px}
.grp-d .hint{padding-bottom:12px}
@media(prefers-reduced-motion:reduce){.grp-d .chev{transition:none}}

/* La gare de depart, dans le panneau. */
.dep-p{display:flex;flex-direction:column;gap:9px;padding:0 0 14px}
.dep-p input{width:100%;font:inherit;font-size:15px;padding:12px 13px;min-height:46px;
  border:1px solid var(--line);border-radius:12px;background:var(--bg-2);color:var(--ink)}
.dep-p input:focus-visible{outline:2px solid var(--green);outline-offset:1px}
.dep-p .btn{width:100%;justify-content:center;min-height:46px}
.dep-p .mut{font-size:13px;color:var(--ink-3);margin:0}

/* Remonter en haut : present partout, il n'apparait qu'une fois la page
   defilee — un bouton qui ne sert a rien occupe quand meme l'ecran. */
.haut{position:fixed;right:14px;bottom:24px;z-index:79;width:46px;height:46px;
  border-radius:999px;background:var(--card);border:1px solid var(--line);
  color:var(--ink-2);cursor:pointer;display:grid;place-items:center;
  box-shadow:0 2px 6px rgba(14,26,20,.10),0 14px 30px -14px rgba(14,26,20,.42)}
.haut:hover{color:var(--ink);border-color:var(--ink-3)}
.haut[hidden]{display:none}
/* Sur telephone, l'onglet des filtres occupe le bas du bord droit. Empiler les
   deux au meme endroit les rendait inatteignables l'un et l'autre : le
   remonter passe a gauche, ou rien ne flotte. Les deux restent dans la zone
   du pouce, et aucun ne recouvre la barre d'action des fiches. */
@media(max-width:520px){.haut{left:10px;right:auto;bottom:104px}}
@media print{.haut{display:none}}

/* L'onglet : pictogramme au-dessus du mot, l'ensemble centre. */
.onglet-f{justify-content:center;padding:13px 8px;gap:7px}
.onglet-f .oi{flex:none;display:grid;place-items:center}
.onglet-lib{writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:.05em}

/* ---------- les filtres actifs, en jetons ---------- */
/* Sans ce rappel hors du panneau, on rouvre le panneau juste pour savoir ce
   qui est coche — et l'on finit par croire qu'aucun camping ne convient. */
.jetons{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.jetons:empty{display:none}
.barre .jetons{padding:0 0 8px}
.modale .jetons{padding:12px 0 4px}
.jeton{display:inline-flex;align-items:center;gap:2px;background:var(--green-l);
  color:var(--green-d);border:1px solid rgba(15,110,122,.32);border-radius:999px;
  padding:3px 3px 3px 11px;font-size:13px;line-height:1.3;max-width:100%}
.jeton>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jeton button{width:26px;height:26px;min-width:26px;border:0;border-radius:999px;
  background:transparent;color:inherit;cursor:pointer;font-size:15px;line-height:1;
  display:grid;place-items:center}
.jeton button:hover{background:rgba(15,110,122,.16)}

/* Le pied de la feuille porte deux actions : effacer, et valider en annoncant
   le nombre. On coche dans la feuille, on applique en la fermant : le
   rafraichissement a chaque case, sur telephone, fait sauter la liste sous le
   doigt qui coche encore. */
.modale-pied{display:flex;gap:10px;align-items:center}
.modale-pied .btn{width:auto;flex:1 1 auto;justify-content:center}
.modale-pied .btn.sec{flex:0 0 auto}
.modale .opt .lib{flex:1 1 auto}
/* Une page sans liste n'a rien a compter : mieux vaut pas de nombre du tout
   qu'un nombre faux. Les nombres ecrits par le serveur, eux, restent vrais. */
.modale.sans-compte .opt .n:not([data-fixe]){display:none}
/* Deux nombres cote a cote qui ne comptent pas la meme chose, c'est un piege :
   « Piscine 11 » parle de cette page, « Bretagne 441 » parle du site entier.
   La ligne le dit, des que les deux bases different. */
.grp-d .hint{margin:2px 0 0;font-size:12.5px;color:var(--ink-3);flex-basis:100%}
.grp-d .hint[hidden]{display:none}

/* tuile.css — le style de la tuile de camping, écrit une fois.
   MARQUE_LOT121.

   Ces règles vivaient dans accueil.css et ne servaient qu'à la page d'accueil.
   Elles sont ici pour que les pages de listes servent la même tuile : une
   seule feuille à corriger, un seul dessin à l'écran.

   Elles s'appuient sur les jetons de charte.css (--encre, --papier, --filet,
   --n-facile…) : cette feuille se charge donc APRÈS elle, jamais seule. */

/* ---- fiches ---- */
/* La carte de camping. 12 px d'arrondi : 4 px (la charte) durcit une carte a
   image, 16 px la ramollit. L'exception ne vaut que pour les cartes photo. */
.fiche{position:relative;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--filet);border-radius:12px;overflow:hidden;
  box-shadow:0 1px 2px rgba(12,16,15,.04);
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s cubic-bezier(.16,1,.3,1),
             border-color .3s}
/* Au survol : trois pixels et une ombre douce, pas un decollage. */
.fiche:hover{transform:translateY(-3px);border-color:rgba(12,16,15,.05);
  box-shadow:0 14px 30px -14px rgba(12,16,15,.22)}
.fiche .cadre{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--papier-2)}
.fiche img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.fiche:hover img{transform:scale(1.03)}
.corps-fiche{padding:15px 16px 14px;display:flex;flex-direction:column;gap:9px;flex:1}
.entete-fiche{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.entete-fiche .lieu{flex:1}
.etoiles{color:var(--ambre);font-size:11px;letter-spacing:.5px;white-space:nowrap}

/* La pastille d'itineraire : elle dit ce qu'on va faire, sa couleur dit si
   c'est simple. Fond blanc translucide, lisible sur n'importe quelle photo. */
.trajet{position:absolute;left:10px;top:10px;right:10px;z-index:2;
  display:inline-flex;align-items:center;gap:7px;width:fit-content;max-width:calc(100% - 20px);
  background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  border-radius:999px;padding:6px 13px 6px 11px;
  box-shadow:0 2px 10px rgba(12,16,15,.18);white-space:nowrap;overflow:hidden}
.trajet b{font-family:var(--f);font-weight:700;font-size:12.5px;letter-spacing:-.01em;color:var(--encre)}
.trajet em{font-family:var(--f);font-style:normal;font-weight:700;font-size:12.5px;letter-spacing:-.01em}
.trajet .fl-t{color:var(--encre-3);display:inline-flex}
.trajet>.ico:first-child{color:var(--encre)}
/* MARQUE_LOT114 — la palette des pistes : verte, bleue, rouge, noire,
   grise. Elle est ORDONNEE, ce qu'un jeu de couleurs thematiques n'est pas, et
   un public francais la lit sans legende. Verifiee en deuteranopie, protanopie
   et tritanopie : chaque paire reste separee. L'ancienne ne l'etait pas —
   MARQUE_LOT434 : le 4e cran passe de #4a3aa7 a #6A2E8F (decision de Yonah,
   22 septembre 2026, devant violet-contre-marine.html). La meme valeur vit
   dans _classe_trajet.COULEUR — le verif du 434 exige qu'elles soient egales.
   #55605C et #0F6E5A tombaient a delta-E 0,4 en deuteranopie. */
:root{--n-facile:#008300;--n-moyen:#2a78d6;--n-preparer:#e34948;
  --n-difficile:#6A2E8F;--n-inconnu:#767f7a}
.trajet.facile    em,.trajet.facile    .ico:last-child{color:var(--n-facile)}
.trajet.moyen     em,.trajet.moyen     .ico:last-child{color:var(--n-moyen)}
.trajet.preparer  em,.trajet.preparer  .ico:last-child{color:var(--n-preparer)}
.trajet.difficile em,.trajet.difficile .ico:last-child{color:var(--n-difficile)}
.trajet.inconnu   em{color:var(--encre-2);font-weight:700}

/* La chaine : gare -> bus -> bus -> marche. Les maillons du milieu ne portent
   pas de texte — la pastille doit tenir sur une ligne, et le seul chiffre dont
   on se souvient est celui du bout. Le point de couleur est en tete : sur une
   photo, une icone teintee se perd, un disque plein non. */
.trajet.ch{gap:4px;padding:6px 12px 6px 10px}
.trajet .pt{width:9px;height:9px;border-radius:50%;flex:0 0 auto;margin-right:2px}
.trajet.facile    .pt{background:var(--n-facile)}
.trajet.moyen     .pt{background:var(--n-moyen)}
.trajet.preparer  .pt{background:var(--n-preparer)}
.trajet.difficile .pt{background:var(--n-difficile)}
.trajet.inconnu   .pt{background:var(--n-inconnu)}
.trajet .m{display:inline-flex;align-items:center;gap:4px;color:var(--encre);
  flex:0 0 auto}
.trajet .m b{font-family:var(--f);font-weight:700;font-size:12px;
  letter-spacing:-.02em;color:var(--encre)}
/* Le dernier maillon prend la couleur du niveau : c'est lui qui la justifie. */
/* MARQUE_LOT125 — le dernier maillon, sous son nom prefixe. */
.trajet.facile    .m.m-fin,.trajet.facile    .m.m-fin b{color:var(--n-facile)}
.trajet.moyen     .m.m-fin,.trajet.moyen     .m.m-fin b{color:var(--n-moyen)}
.trajet.preparer  .m.m-fin,.trajet.preparer  .m.m-fin b{color:var(--n-preparer)}
.trajet.difficile .m.m-fin,.trajet.difficile .m.m-fin b{color:var(--n-difficile)}
.trajet .sep{display:inline-flex;align-items:center;color:var(--filet-f);
  flex:0 0 auto}
/* MARQUE_LOT125 — deux dessinateurs d'icones servent la meme pastille : le
   sprite de l'accueil ecrit `class="ico"`, `_ico_lucide` ecrit `class="pa-i"`
   partout ailleurs. Les regles visent les deux, sinon la moitie du site n'en
   recoit aucune. */
.trajet .sep .ico,.trajet .sep .pa-i{width:12px;height:12px}
.trajet .ico,.trajet .pa-i{flex:0 0 auto}
/* La marche restante, en retrait : c'est un complement, pas le message. */
.trajet .km{display:inline-flex;align-items:center;gap:3px;margin-left:2px;padding-left:8px;
  border-left:1px solid var(--filet);font-size:11.5px;font-weight:600;color:var(--encre-2)}
.trajet .km .ico{color:var(--encre-3)}

/* Deux jauges a segments faisaient du bruit pour dire deux notes. */
.notes-c{display:flex;flex-wrap:wrap;gap:6px}
/* `.puce` est deja pris par charte.css (la pastille des boutons ambre) : les
   deux se chevauchaient sur la carte. Nom distinct. */
.note-c{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--filet);
  border-radius:999px;padding:3px 10px;font-size:11.5px;color:var(--encre-2);cursor:help;
  white-space:nowrap}
.note-c b{color:var(--encre);font-weight:700}
.pied-carte{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin-top:auto;padding-top:11px;border-top:1px solid var(--filet)}
.prix{font-size:13px;color:var(--encre-2)}
.prix b{font-family:var(--f);font-weight:700;font-size:18px;letter-spacing:-.01em;color:var(--encre)}
.prix small{font-size:11.5px}
.note-voy{display:inline-flex;align-items:baseline;gap:1px;background:var(--encre);color:#fff;
  border-radius:6px;padding:4px 8px}
.note-voy b{font-family:var(--f);font-weight:700;font-size:13.5px;letter-spacing:-.01em}
.note-voy small{font-size:10.5px;opacity:.75}

/* Un seul lien, etire sur toute la tuile : deux liens vers la meme page
   donneraient deux arrets au clavier et deux entrees au lecteur d'ecran.
   Ces deux regles vivaient en fin de accueil.css, dans les corrections
   d'audit ; elles appartiennent a la tuile, elles la suivent. */
.fiche{position:relative}
.fiche h3 a::after{content:"";position:absolute;inset:0;z-index:1}
/* MARQUE_LOT125 — la tuile decide de sa mise en page et de la couleur de son
   titre. Sans ces regles elle prenait `align-items:start` de la liste de
   l'explorateur (photo et pied qui ne s'etirent pas, bande blanche a droite)
   et le bleu canard de `a:hover` de la grande feuille. */
.fiche{align-items:stretch}
.fiche .cadre img{width:100%}
.fiche h3 a,.fiche h3 a:hover,.fiche h3 a:focus{color:inherit}

/* Le reste de la tuile, reste jusqu'ici disperse dans accueil.css. */
.fiche .cadre{display:block}
@media(hover:hover){.fiche:hover img{transform:scale(1.05)}}
.fiche .lieu{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-3)}
/* MARQUE_LOT124 — la tuile ecrit sa propre typographie.
   Sans ces deux lignes, le titre prenait la police de titres de la feuille
   hote : Instrument Sans 600 sur les pages de la charte, Bricolage Grotesque
   700 sur les autres. Meme balisage, meme composant, deux lectures. `--f` est
   lu chez l'hote, comme les couleurs : on ne recopie aucune valeur. */
.fiche{font-family:var(--f)}
.fiche h3{font-size:18.5px;letter-spacing:-.03em;font-family:var(--f);
  font-weight:600;line-height:1.25}
.fiche .equip{font-size:12.5px;color:var(--encre-3)}

/* formulaire.css — le champ de saisie du site, écrit une fois.

   D'OÙ VIENT CE FICHIER (lot 127). Ces règles vivaient dans `accueil.css`, où
   seule la barre de recherche de l'accueil pouvait les voir. La fiche de
   camping demande les mêmes gestes — « d'où partez-vous ? », « quel jour ? » —
   et les aurait recopiées : deux copies qui divergent au premier ajustement.

   CE QUE LE COMPOSANT PORTE. Le champ lui-même : son intitulé, sa ligne de
   saisie, la typographie du contrôle, le chevron du menu déroulant. Rien de
   plus.

   CE QU'IL NE PORTE PAS. Le cadre de la page qui l'accueille — le rembourrage
   et les filets de la barre de l'accueil restent dans `accueil.css`, la
   grille de la fiche reste dans `aller.css`. Un champ ne décide pas de la
   forme du panneau où il est posé.

   LES JETONS (`--f`, `--encre`, `--encre-3`) sont lus chez l'hôte, comme pour
   la tuile : les recopier en valeurs les ferait diverger. */

/* MARQUE_LOT140 — le cadre de la barre, ecrit une fois.

   Il vivait dans accueil.css sous le nom `.recherche-in`. La fiche de camping
   pose les memes champs — le commentaire du lot 127 le disait deja — et se
   retrouvait a les empiler faute d'avoir le cadre. Les valeurs sont celles de
   l'accueil, deplacees, pas recopiees : accueil.css ne les porte plus. */
.barre{display:grid;gap:0}
.barre .champ{padding:20px 0;border-bottom:1px solid var(--filet)}
.barre .champ:last-of-type{border-bottom:0}
.barre .btn{width:100%;justify-content:center;margin:22px 0 4px}
@media(min-width:900px){
  .barre{grid-template-columns:1.5fr 1fr 1fr auto;align-items:center;gap:0}
  .barre .champ{padding:26px 30px;border-bottom:0;border-left:1px solid var(--filet)}
  .barre .champ:first-of-type{padding-left:0;border-left:0}
  .barre .btn{width:auto;margin:0 0 0 30px;padding:16px 30px}
}
/* Un controle desactive doit se voir desactive : sans cela, le visiteur clique
   un menu qui ne repond pas et croit la page cassee. */
.barre .champ.off{opacity:.45}
.barre .champ.off .saisie{cursor:not-allowed}
.barre .btn[disabled]{opacity:.4;cursor:not-allowed}

.champ label{display:block;font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--encre-3)}
.champ .saisie{position:relative;display:flex;align-items:center;gap:10px;margin-top:9px;
  color:var(--encre-3)}
.champ input,.champ select{width:100%;border:0;outline:0;background:transparent;
  font-family:var(--f);font-size:16px;font-weight:500;color:var(--encre);
  padding:9px 0;min-height:40px}
.champ input::placeholder{color:#8A9390}
/* 16 px au moins sur le contrôle : en dessous, iOS zoome la page à la mise au
   point du champ et le visiteur se retrouve à faire glisser une page trop
   large. C'est la raison de la taille ci-dessus, pas une préférence. */
.champ select{appearance:none;cursor:pointer;padding-right:26px}
.chevron{position:absolute;right:0;top:50%;transform:translateY(-50%);
  pointer-events:none;color:var(--encre-3)}

/* aller.css — la section « Y aller sans voiture » d'une fiche de camping.

   D'OÙ VIENT CE FICHIER (lot 128). La fiche disait « L'arrêt le plus proche »
   et comptait des départs ; le trajet, lui, vivait dans une fenêtre à part qui
   déléguait tout à Google Maps. Or le trajet est CALCULÉ — durée, heure de
   départ, changements, lignes, marche finale, et les sept jours de la semaine,
   à l'aller comme au retour. Cette section l'affiche.

   MOBILE D'ABORD. Tout s'empile jusqu'à 720 px ; au-delà, l'aller et le retour
   se placent côte à côte et la saisie devient une barre, comme sur l'accueil.
   Les champs eux-mêmes viennent de `formulaire.css` : ce fichier ne redit rien
   de leur forme, il ne fait que les ranger.

   LES JETONS sont lus chez l'hôte (`--encre`, `--filet`, `--papier`, `--ambre`,
   `--n-facile`), comme pour la tuile. Aucune valeur n'est recopiée. */

.aller{margin:0 0 8px}

/* ---- le trajet mesuré ---- */
.al-t{border:1px solid var(--filet);border-radius:var(--r);background:var(--papier);
  padding:14px 14px 13px}
.al-p{margin:0 0 13px}
.al-g{display:grid;gap:14px}
.al-c .label{margin-bottom:7px}
.al-v{margin:0 0 9px;font-size:16.5px;line-height:1.35;color:var(--encre)}
.al-v b{font-weight:700}
.al-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.al-l li{display:flex;align-items:center;gap:8px;font-size:13.5px;line-height:1.4;
  color:var(--encre-2)}
.al-l svg{flex:0 0 auto;color:var(--encre-3)}
.al-l b{color:var(--encre);font-weight:600;font-variant-numeric:tabular-nums}
.al-d{margin:13px 0 0;font-size:12.5px;line-height:1.5;color:var(--encre-3)}

/* ---- MARQUE_LOT138 — la saisie : une seule, en tête de section ----

   Le formulaire Google Maps a été retiré : il n'était pas un calcul, et il
   était la quatrième façon de raconter le même trajet sur la même page. Reste
   le sélecteur de gares et les deux jours. Les règles `.al-f` sont conservées
   telles quelles : la barre de l'accueil s'en sert encore. */
.al-cmd{margin:0 0 14px;padding:14px;border:1px solid var(--filet);
  border-radius:var(--r);background:var(--papier)}
.al-cmd .dep{margin:0}
.al-j{display:grid;gap:0;margin:12px 0 0;border-top:1px solid var(--filet)}
.al-j .champ{padding:11px 0;border-bottom:1px solid var(--filet)}
.al-j .champ:last-child{border-bottom:0;padding-bottom:0}

/* L'étiquette qui dit que le trajet montré n'est pas encore le vôtre. */
.al-ex{margin:0 0 12px;font-size:13px;line-height:1.5;color:var(--encre-2)}
.al-ex span{display:inline-block;margin-right:8px;padding:2px 8px;
  border:1px solid var(--filet-f);border-radius:99px;font-size:11.5px;
  font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--encre-2)}
.al-ex b{color:var(--encre);font-weight:600}

/* Les sept jours : la preuve, repliée. */
.al-sem-d{margin:14px 0 0}
.al-sem-d summary{cursor:pointer;font-size:13px;color:var(--encre-2);
  padding:4px 0;list-style:revert}
.al-sem-d summary:focus-visible{outline:2px solid var(--encre);outline-offset:2px}
.al-sem-d .al-sem{margin-top:8px}

/* ---- la saisie : mêmes champs que l'accueil, rangés pour la fiche ---- */
.al-f{display:grid;margin:16px 0 0;border-top:1px solid var(--filet)}
.al-f .champ{padding:13px 0;border-bottom:1px solid var(--filet)}
.al-f .btn{width:100%;justify-content:center;margin:16px 0 0}

/* ---- le verdict des jours ---- */
.al-r{margin:15px 0 0;padding:11px 14px;border-left:3px solid var(--filet-f);
  background:var(--papier-2);border-radius:0 var(--r) var(--r) 0;
  font-size:14px;line-height:1.45;color:var(--encre)}
.al-r.oui{border-left-color:var(--n-facile)}
.al-r.non{border-left-color:var(--ambre)}

/* ---- la semaine, en clair : c'est la preuve, le verdict n'est qu'une lecture ---- */
.al-sem{width:100%;margin:13px 0 0;border-collapse:collapse;font-size:12px}
.al-sem caption{text-align:left;font-size:12.5px;color:var(--encre-3);padding:0 0 6px}
.al-sem th{font-weight:600;color:var(--encre-3);text-align:center;padding:3px 0}
.al-sem th[scope="row"]{text-align:left;color:var(--encre-2);padding-right:10px;
  white-space:nowrap}
.al-sem td{text-align:center;padding:6px 0;border-top:1px solid var(--filet);
  color:var(--encre-3)}
.al-sem td.o{color:var(--n-facile);font-weight:700}

/* ---- ce que l'arrêt ajoute, en une ligne ---- */
.al-a{margin:15px 0 0;font-size:13.5px;line-height:1.55;color:var(--encre-2)}
.al-a b{color:var(--encre);font-weight:600}

@media(min-width:720px){
  .al-t{padding:18px 20px 17px}
  .al-g{grid-template-columns:1fr 1fr;gap:0}
  .al-c+.al-c{border-left:1px solid var(--filet);padding-left:24px;margin-left:24px}
  .al-cmd{padding:18px 20px}
  .al-j{grid-template-columns:1fr 1fr;gap:0}
  .al-j .champ{padding:14px 22px;border-bottom:0;border-left:1px solid var(--filet)}
  .al-j .champ:first-child{padding-left:0;border-left:0}
  .al-j .champ:last-child{padding-bottom:14px}
  .al-f{grid-template-columns:1.6fr 1fr 1fr auto;align-items:center}
  .al-f .champ{padding:16px 22px;border-bottom:0;border-left:1px solid var(--filet)}
  .al-f .champ:first-of-type{padding-left:0;border-left:0}
  .al-f .btn{width:auto;margin:0 0 0 22px}
  .al-sem{font-size:12.5px;max-width:520px}
}

/* reseau.css — MARQUE_LOT139 — le réseau qui existe depuis le camping.

   D'OÙ VIENT CE FICHIER. La fiche portait déjà, dans son HTML, les
   destinations atteignables sans changement depuis les arrêts du camping —
   nom, coordonnées, minutes, passages par jour, lignes, horaires — et le
   tracé réel des lignes, tiré des `shapes` GTFS. Ces données ne servaient
   qu'à une liste de lieux à visiter et à l'itinéraire d'un point cliqué :
   jamais à montrer un RÉSEAU. Décision de Yonah, 7 septembre 2026 : « une
   visibilité sur le réseau de transport autour du camping, à afficher sur la
   carte », « le réseau qui existe depuis le camping, les points d'intérêt ».

   LES COULEURS sont posées ici et non dans le script : les tracés Leaflet
   portent une `className`, et la palette reste au même endroit que le reste
   du site. Les valeurs littérales des options JavaScript ne servent que de
   repli si la feuille ne charge pas.

   LES JETONS sont lus chez l'hôte (`--encre`, `--filet`, `--papier`,
   `--ambre`, `--green`). Aucune valeur n'est recopiée. */

.res-b{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  margin:0 0 10px}
.res-t{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;
  border:1px solid var(--filet-f);border-radius:99px;background:transparent;
  color:var(--encre);font:inherit;font-size:14.5px;font-weight:600;
  cursor:pointer}
.res-t svg{flex:0 0 auto}
.res-t:hover{background:var(--papier)}
.res-t:focus-visible{outline:2px solid var(--encre);outline-offset:2px}
.res-t[aria-pressed="true"]{background:var(--green,#1F7A4D);border-color:transparent;
  color:#fff}

/* Ce que le compteur annonce : un fait, pas une promesse. */
.res-n{margin:0;font-size:13px;line-height:1.5;color:var(--encre-2)}
.res-n b{color:var(--encre);font-weight:600;font-variant-numeric:tabular-nums}

/* La réserve : un trait qui relie deux points n'est pas une ligne de bus. */
.res-r{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--encre-3)}

/* La légende, sous la carte, quand le réseau est affiché. */
.res-l{display:flex;flex-wrap:wrap;gap:6px 18px;margin:10px 0 0;
  font-size:12.5px;color:var(--encre-2)}
.res-l span{display:inline-flex;align-items:center;gap:7px}
.res-l i{width:13px;height:13px;border-radius:50%;flex:0 0 auto;
  background:var(--green,#1F7A4D)}
.res-l i.g{background:var(--ambre,#E9960B);border-radius:3px}
.res-l i.t{width:22px;height:0;border-radius:0;border-top:2.5px solid var(--green,#1F7A4D)}

/* Les tracés eux-mêmes. `vector-effect` garde l'épaisseur constante quand
   Leaflet met la couche à l'échelle pendant un zoom. */
.res-trace{stroke:var(--green,#1F7A4D);stroke-opacity:.55;fill:none;
  vector-effect:non-scaling-stroke}
.res-lien{stroke:var(--encre-3,#646D69);stroke-opacity:.35;
  stroke-dasharray:3 4;fill:none}
.res-pt{stroke:#fff;fill:var(--green,#1F7A4D);fill-opacity:.9}
.res-pt.g{fill:var(--ambre,#E9960B)}

/* La bulle d'une destination : même grammaire que le reste des bulles. */
.res-i b{display:block;font-size:14.5px;line-height:1.3;color:var(--encre)}
.res-i em{display:block;margin:3px 0 0;font-style:normal;font-size:12.5px;
  color:var(--encre-2)}
.res-i ul{list-style:none;margin:7px 0 0;padding:7px 0 0;
  border-top:1px solid var(--filet)}
.res-i li{font-size:12.5px;line-height:1.45;color:var(--encre-2)}
.res-i li+li{margin-top:3px}

/* fiche.css — la fiche camping sur la structure de la maquette du 18 septembre
 * 2026, servie sur /essai/fiche/<slug>/ (lot 385). MARQUE_LOT385.
 *
 * Ecrit contre jetons.css et rien d'autre : aucune couleur, taille, graisse,
 * interligne, espacement, rayon, ombre ni z-index en clair — tout passe par
 * var(--…), et verif_lot385.py le lit sur ce fichier. Aucun des 35 anciens
 * noms du generateur (--ink, --bg, --line, --papier, --filet-2…) n'est employe.
 * Tout est prefixe .fm : la production ne porte pas cette classe.
 *
 * La normalisation, mesuree sur la maquette a 375 px (bibliotheques exclues)
 * et ramenee par ce fichier : 19 tailles -> 8, 7 graisses -> 3,
 * 31 espacements -> 8, 19 rayons -> 4, 8 ombres -> 3, 35 couleurs de texte -> 4.
 */

.p-essai { background: var(--fond); color: var(--encre); }
.fm { font-family: var(--police-texte); font-size: var(--t-texte); line-height: var(--i-lecture); color: var(--encre); }
.fm h1, .fm h2, .fm h3 { font-family: var(--police-titre); line-height: var(--i-serre); margin: 0; }
.fm p { margin: 0; }
.fm a { color: var(--accent); }
.fm .fm-small { font-size: var(--t-legende); line-height: var(--i-courant); }
.fm .fm-mut { color: var(--encre-2); }

.fm .fm-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: var(--t-mention); font-weight: var(--g-forte); color: var(--accent); margin-bottom: var(--e-2); }

/* ---- boutons et etiquettes ---- */
.fm .fm-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: var(--cible-tactile); padding: var(--e-3) var(--e-5); border: 1px solid var(--filet-net);
  border-radius: var(--r-grand); background: var(--surface); color: var(--encre); text-decoration: none;
  font-weight: var(--g-appuyee); font-size: var(--t-petit); line-height: var(--i-courant); }
.fm .fm-btn-accent { background: var(--appel); border: 2px solid var(--encre); color: var(--encre); box-shadow: var(--o-souleve); }   /* MARQUE_LOT390 — l'appel a reserver ; MARQUE_LOT391 — son filet : le principal ne peut pas etre plus faible que le secondaire (1,5 px demande, rendu 1 px par Chromium : mesure) */
.fm .fm-tag { display: inline-flex; align-items: center; gap: var(--e-1); padding: var(--e-1) var(--e-2);
  border-radius: var(--r-petit); font-size: var(--t-legende); font-weight: var(--g-appuyee); line-height: var(--i-courant);
  background: var(--surface); color: var(--encre); }
.fm .fm-tag-vert { background: var(--encadre); color: var(--accent); }   /* MARQUE_LOT390 — une distance n'est pas une reserve */
.fm .fm-prix { font-size: var(--t-legende); color: var(--encre-2); }
.fm .fm-prix strong { font-size: var(--t-appui); font-weight: var(--g-forte); color: var(--encre); }

/* ---- heros ---- */
.fm .fm-hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--e-6); align-items: stretch; margin-top: var(--e-5); }   /* MARQUE_LOT391 — la photo a gauche, le texte a droite */
.fm .fm-hero-copy { order: 2; }
.fm .fm-hero-photo { order: 1; }
.fm .fm-surtitre { display: flex; align-items: center; gap: var(--e-3); margin-bottom: var(--e-3); }
.fm .fm-lieu { position: absolute; left: var(--e-3); bottom: var(--e-3); background: var(--surface); color: var(--encre); }
.fm .fm-hero-copy { padding: var(--e-4) 0; }
.fm .fm-location { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-legende); color: var(--encre-2); margin-bottom: var(--e-3); }
.fm .fm-h1 { font-size: var(--t-titre-2); font-weight: var(--g-forte); letter-spacing: -.03em; }
.fm .fm-verdict { background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-grand);
  padding: var(--e-4); margin: var(--e-5) 0 var(--e-3); max-width: var(--largeur-lecture); box-shadow: var(--o-repos); }
.fm .fm-verdict-t { font-size: var(--t-appui); font-weight: var(--g-appuyee); margin-bottom: var(--e-2); }
/* MARQUE_LOT387 — la teinte du verdict : deux teintes seulement, prises aux jetons, jamais seules porteuses du sens */
.fm .fm-verdict { display: flex; gap: var(--e-3); align-items: flex-start; }
.fm .fm-verdict .fm-verdict-t { margin-bottom: 0; }
.fm .fm-verdict-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: var(--e-6); height: var(--e-6); border-radius: var(--r-pilule); background: var(--fond); color: var(--encre); }
.fm .fm-verdict.est-accent { border-color: var(--accent); }
.fm .fm-verdict.est-accent .fm-verdict-ico { background: var(--accent); color: var(--surface); }
.fm .fm-verdict.est-alerte { background: var(--alerte-fond); border-color: var(--alerte-fond); color: var(--alerte); }
.fm .fm-verdict.est-alerte .fm-verdict-ico { background: var(--alerte); color: var(--surface); }
/* MARQUE_LOT387 — la caution en une colonne : l'icone, puis un seul paragraphe */
.fm .fm-caution > p { margin: 0; }
.fm .fm-caution > svg { flex: 0 0 auto; margin-top: var(--e-1); }
.fm .fm-verdict .preuve { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--e-2); font-size: var(--t-petit); }
.fm .fm-caution { display: flex; gap: var(--e-2); align-items: flex-start; background: var(--alerte-fond); color: var(--alerte);
  border-radius: var(--r-petit); padding: var(--e-3); font-size: var(--t-legende); line-height: var(--i-courant); max-width: var(--largeur-lecture); }
.fm .fm-ctas { display: flex; gap: var(--e-3); align-items: center; flex-wrap: wrap; margin-top: var(--e-5); }
.fm .fm-hero-photo { position: relative; min-height: 352px; border-radius: var(--r-grand); overflow: hidden; background: var(--surface); }
.fm .fm-hero-photo .banniere, .fm .fm-hero-photo .banniere img { width: 100%; height: 100%; object-fit: cover; margin: 0; }
.fm .fm-hero-photo > .fm-tag { position: absolute; bottom: var(--e-4); left: var(--e-4); }

/* ---- trois faits ---- */
.fm .fm-facts { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--surface); border: 1px solid var(--filet);
  border-radius: var(--r-grand); padding: var(--e-5) 0; margin: var(--e-6) 0; }
.fm .fm-fait { padding: 0 var(--e-5); border-right: 1px solid var(--filet); }
.fm .fm-fait:last-child { border-right: 0; }
.fm .fm-fait strong { display: block; font-size: var(--t-petit); font-weight: var(--g-appuyee); }
.fm .fm-fait span { display: block; color: var(--encre-2); font-size: var(--t-legende); margin-top: var(--e-1); }
/* MARQUE_LOT386 — les trois faits sont les puces de bloc_preuve : trois cases, comme la maquette */
.fm .fm-facts .preuve { display: contents; list-style: none; margin: 0; padding: 0; }
.fm .fm-facts .preuve li { padding: 0 var(--e-5); border-right: 1px solid var(--filet); display: flex; gap: var(--e-2); align-items: flex-start; font-size: var(--t-petit); line-height: var(--i-courant); }
.fm .fm-facts .preuve li:last-child { border-right: 0; }
.fm .fm-facts .preuve li b { font-weight: var(--g-appuyee); }
.fm .fm-facts .preuve li svg { flex: none; color: var(--accent); }

/* ---- sections ---- */
.fm .fm-section { padding: var(--e-7) 0; }
.fm .fm-section-head { margin-bottom: var(--e-5); }
.fm .fm-section-head h2 { font-size: var(--t-titre-3); font-weight: var(--g-forte); letter-spacing: -.02em; }
.fm .fm-section-head p { color: var(--encre-2); font-size: var(--t-petit); margin-top: var(--e-2); }
.fm .fm-no { display: inline-block; font-size: var(--t-legende); font-weight: var(--g-appuyee); color: var(--encre-2); margin-right: var(--e-3); vertical-align: middle; }
.fm .fm-grid-2 { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--e-5); align-items: stretch; }
.fm .fm-panel { border: 1px solid var(--filet); border-radius: var(--r-grand); padding: var(--e-5); background: var(--surface); box-shadow: var(--o-repos); }
.fm .fm-panel h3, .fm .fm-h3 { font-size: var(--t-appui); font-weight: var(--g-appuyee); margin-bottom: var(--e-3); }
.fm .fm-panel-train { background: var(--accent); color: var(--surface); border-color: var(--accent); }
.fm .fm-panel-train a { color: var(--surface); }
.fm .fm-panel-train .fm-small { color: var(--surface); }
.fm .fm-raccourcis { display: inline-flex; flex-wrap: wrap; gap: var(--e-2); }
.fm .fm-raccourcis a { border: 1px solid var(--surface); border-radius: var(--r-pilule); padding: var(--e-1) var(--e-3); text-decoration: none; min-height: var(--e-6); display: inline-flex; align-items: center; }
.fm .fm-liens { list-style: none; margin: var(--e-3) 0 0; padding: 0; display: grid; gap: var(--e-2); }
.fm .fm-panel .resa { border: 0; padding: 0; margin: 0; background: transparent; }

/* ---- ancres — MARQUE_LOT393 : deux etats, un composant ----
 * En bas de la fenetre (fixe) tant que sa place dans le flux est sous le bord bas ;
 * en haut (collee) des qu'on l'a depassee. Le passage de l'un a l'autre est continu :
 * la barre rejoint sa place dans le flux et monte avec le contenu — aucun glissement a
 * animer, donc rien a couper sous prefers-reduced-motion. `--fm-nav-h` est la hauteur
 * mesuree de la barre (script de page) : c'est elle que lisent les scroll-margin-top. */
.fm .fm-nav { position: sticky; top: 0; z-index: var(--z-anc); background: var(--fond); border-bottom: 1px solid var(--filet); }
.fm .fm-nav-in { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.fm .fm-nav.fm-nav-bas { position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: var(--z-barre-action);
  border-bottom: 0; border-top: 1px solid var(--filet); box-shadow: var(--o-souleve); padding: 0 var(--e-4); }
.fm .fm-nav.fm-nav-bas .fm-nav-in { max-width: var(--largeur-page); margin: 0 auto; }
body.jx-couvert .fm .fm-nav.fm-nav-bas { display: none; }
.fm .fm-anchors { display: flex; gap: var(--e-5); }
.fm .fm-anchors a { display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--cible-tactile); padding: var(--e-3) 0;
  text-decoration: none; color: var(--encre); font-size: var(--t-petit); font-weight: var(--g-appuyee); border-bottom: 2px solid transparent; }
.fm .fm-anchors a .pa-i, .fm .fm-anchors a svg { color: var(--accent); }
.fm .fm-anchors a[aria-current] { color: var(--accent); font-weight: var(--g-forte); border-bottom-color: var(--accent); }
.fm .fm-anchors a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fm .fm-nav-booking { display: flex; align-items: center; gap: var(--e-4); }
.fm .fm-nav-booking .fm-prix { font-size: var(--t-legende); color: var(--encre-2); }
.fm .fm-nav-booking .fm-prix strong { font-size: var(--t-appui); color: var(--encre); }
.fm .fm-nav-booking .fm-prix small { display: none; }
.fm .fm-nav-appel.fm-btn { min-height: var(--cible-tactile); padding: var(--e-2) var(--e-4); }
.fm .fm-nav-af { font-size: var(--t-mention); color: var(--encre-2); line-height: var(--i-courant); }
.fm .fm-nav-appel[hidden], .fm .fm-nav-af[hidden] { display: none; }
#acces, #activites, #pratique { scroll-margin-top: var(--fm-nav-h, var(--e-7)); }
/* MARQUE_LOT394 — sous 680 px (le seuil de la maquette), la partie droite de la barre n'existe pas :
 * une ligne, trois ancres. L'appel est dans le héros et en bas de page ; il n'y a pas d'appel permanent
 * sur un téléphone. Mesuré au 393 : 111 px à 375, 15 % de l'écran. */
@media (max-width: 679px) {
  .fm .fm-nav-booking { display: none; }
}

/* ---- 01 y arriver ---- */
.fm .fm-arrival { border: 1px solid var(--filet); border-radius: var(--r-grand); overflow: hidden; background: var(--surface); }
.fm .fm-aller { margin-top: var(--e-5); }
.fm .fm-arrival-main { padding: var(--e-5); }
.fm .fm-arrival-head { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); }
.fm .fm-route { display: flex; align-items: center; gap: var(--e-3); margin: var(--e-5) 0; }
.fm .fm-route-stop { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-petit); font-weight: var(--g-appuyee); }
.fm .fm-route-c { flex: 1; min-width: 50px; text-align: center; font-size: var(--t-legende); color: var(--encre-2);
  padding: 0 0 var(--e-2); border-bottom: 2px solid var(--filet-net); }
.fm .fm-a-verifier { border-bottom-style: dotted; color: var(--alerte); }
.fm .fm-actions { display: flex; gap: var(--e-3); align-items: center; flex-wrap: wrap; }
.fm .fm-arrival-aside { background: var(--fond); border-left: 1px solid var(--filet); padding: var(--e-5); }
.fm .fm-arrival-aside table { font-size: var(--t-legende); border-collapse: collapse; }
.fm .fm-arrival-aside td, .fm .fm-arrival-aside th { padding: var(--e-1) var(--e-2); }
.fm .fm-jours { margin-top: var(--e-3); font-size: var(--t-petit); }
.fm .fm-reserves { margin-top: var(--e-3); font-size: var(--t-legende); color: var(--encre-2); }
.fm .fm-reserves summary, .fm .fm-dep summary { cursor: pointer; min-height: var(--cible-tactile); display: flex; align-items: center;
  justify-content: space-between; gap: var(--e-3); padding: var(--e-3) 0; font-weight: var(--g-appuyee); color: var(--encre); }
.fm .fm-reserves p { padding: 0 0 var(--e-3); max-width: var(--largeur-lecture); }

/* ---- 02 : le bloc-jeu du site, tel quel (jeu.css) ---- */
.fm #s-carte > summary { display: none; }

/* ---- a savoir ---- */
.fm .fm-grid-info { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--e-8); }
.fm .fm-info-list h2 { font-size: var(--t-titre-3); font-weight: var(--g-forte); margin-bottom: var(--e-4); }
.fm .fm-dep { border-bottom: 1px solid var(--filet); font-size: var(--t-petit); }
.fm .fm-dep-c { padding: 0 0 var(--e-4); }
.fm .fm-dep-c p, .fm .fm-dep-c .resume-clim { color: var(--encre-2); }
.fm .fm-kv { display: grid; grid-template-columns: auto 1fr; gap: var(--e-1) var(--e-4); margin: var(--e-3) 0 0; font-size: var(--t-petit); }
.fm .fm-kv dt { color: var(--encre-2); }
.fm .fm-kv dd { margin: 0; }
.fm .fm-booking-bottom { border: 1px solid var(--filet); background: var(--surface); border-radius: var(--r-grand); padding: var(--e-5); align-self: start; box-shadow: var(--o-repos); }
.fm .fm-booking-bottom h3 { font-size: var(--t-titre-3); font-weight: var(--g-forte); }
.fm .fm-booking-bottom p { font-size: var(--t-petit); color: var(--encre-2); margin: var(--e-3) 0 var(--e-4); }
.fm .fm-booking-bottom .fm-btn { width: 100%; }

/* ---- largeurs ---- */
@media (max-width: 1000px) {
  .fm .fm-hero { gap: var(--e-5); }
  .fm .fm-grid-info { gap: var(--e-6); }
}
@media (max-width: 680px) {
  .fm .fm-hero { display: flex; flex-direction: column; gap: var(--e-4); margin-top: var(--e-4); }
  .fm .fm-hero-copy { padding: 0; }
  .fm .fm-h1 { font-size: var(--t-titre-3); }
  .fm .fm-hero-photo { min-height: 180px; height: 180px; order: 2; }
  .fm .fm-facts { grid-template-columns: 1fr 1fr; padding: var(--e-4) 0; margin: var(--e-4) 0 var(--e-5); }
  .fm .fm-fait { padding: 0 var(--e-3); }
  .fm .fm-fait:nth-child(2) { border-right: 0; }
  .fm .fm-facts .preuve li:nth-child(2) { border-right: 0; }
  .fm .fm-facts .preuve li:nth-child(3) { grid-column: 1 / -1; border-top: 1px solid var(--filet); padding-top: var(--e-3); margin-top: var(--e-3); }
  .fm .fm-section { padding: var(--e-6) 0; }
  .fm .fm-grid-2, .fm .fm-grid-info { grid-template-columns: 1fr; }
  .fm .fm-arrival-aside { border-left: 0; border-top: 1px solid var(--filet); padding: var(--e-4); }
  .fm .fm-arrival-main, .fm .fm-panel { padding: var(--e-4); }
  .fm .fm-anchors { width: 100%; justify-content: space-between; gap: var(--e-2); }
  .fm .fm-anchors a { font-size: var(--t-legende); gap: var(--e-1); }
  .fm .fm-nav-booking { width: 100%; justify-content: space-between; padding-bottom: var(--e-2); }
  .fm .fm-nav-booking .fm-nav-gauche { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }
  .fm .fm-ctas .fm-btn { flex: 1; }
}

/* ==== MARQUE_LOT388 — les sept zones, forme par forme (jetons seuls) ==== */

/* ---- zone 0 : le verdict qualifie, la bande chiffre ---- */
.fm .fm-verdict > div { min-width: 0; }
.fm .fm-verdict-p { margin: var(--e-2) 0 0; font-size: var(--t-petit); line-height: var(--i-courant); color: var(--encre-2); }
.fm .fm-verdict.est-alerte .fm-verdict-p { color: var(--alerte); }
.fm .etoiles { color: var(--alerte); }
.fm .fm-prix { display: inline-block; line-height: var(--i-courant); font-size: var(--t-petit); }
.fm .fm-prix small { display: block; }
.fm .fm-prix strong { font-size: var(--t-appui); font-weight: var(--g-forte); }
.fm .fm-prix small { font-size: var(--t-mention); color: var(--encre-2); }
.fm .fm-tag-dessin { left: auto; right: var(--e-4); }

/* la bande des trois faits : titre en gras, sous-ligne en --encre-2, pile sous 768 */
.fm .fm-facts .preuve li { flex-direction: row; }
.fm .fm-facts .preuve li span { color: var(--encre-2); }
.fm .fm-facts .preuve li b { color: var(--encre); }

/* les photos defilent : un conteneur en scroll-snap, des fleches, rien de plus */
.fm .fm-carrousel { padding: 0; aspect-ratio: 3 / 2; max-height: 440px; align-self: start; }
.fm .fm-carrousel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fm .fm-car-piste { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.fm .fm-car-piste::-webkit-scrollbar { display: none; }
.fm .fm-car-vue { flex: 0 0 100%; height: 100%; margin: 0; position: relative; scroll-snap-align: start; scroll-snap-stop: always; }
.fm .fm-car-vue img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fm .fm-car-cred { position: absolute; right: var(--e-3); bottom: var(--e-3); padding: var(--e-1) var(--e-2); border-radius: var(--r-petit);
  background: var(--encre); color: var(--surface); font-size: var(--t-mention); line-height: var(--i-courant); }
.fm .fm-car-b { position: absolute; top: 50%; transform: translateY(-50%); width: var(--cible-tactile); height: var(--cible-tactile);
  border-radius: var(--r-pilule); border: 1px solid var(--filet); background: var(--surface); color: var(--encre);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--o-souleve); }
.fm .fm-car-prec { left: var(--e-3); }
.fm .fm-car-suiv { right: var(--e-3); }
.fm .fm-car-pts { position: absolute; left: 50%; transform: translateX(-50%); bottom: var(--e-3); display: flex; gap: var(--e-1); }
.fm .fm-car-pts i { display: block; width: var(--e-2); height: var(--e-2); border-radius: var(--r-pilule); background: var(--surface); opacity: .55; }
.fm .fm-car-pts i.on { opacity: 1; }
.fm .fm-car-compteur { position: absolute; top: var(--e-3); right: var(--e-3); padding: var(--e-1) var(--e-2); border-radius: var(--r-petit);
  background: var(--encre); color: var(--surface); font-size: var(--t-mention); font-weight: var(--g-appuyee); }
@media (prefers-reduced-motion: reduce) { .fm .fm-car-piste { scroll-behavior: auto; } }
.fm .fm-carrousel > .fm-tag { top: auto; left: var(--e-3); bottom: var(--e-3); z-index: var(--z-calque); }   /* MARQUE_LOT391 — la pastille de lieu, en bas a gauche comme le rendu ; le credit reste en bas a droite */   /* MARQUE_LOT390 — au-dessus des figures positionnees */
@media (max-width: 680px) { .fm .fm-carrousel { height: auto; min-height: 0; aspect-ratio: 3 / 2; } }

/* ---- zone 1 : deux panneaux de hauteur egale ---- */
.fm .fm-grid-2 { align-items: stretch; }
.fm .fm-panel { display: flex; flex-direction: column; }
.fm .fm-panel-tete { display: flex; align-items: center; gap: var(--e-3); margin-bottom: var(--e-3); }
.fm .fm-panel-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--e-7); height: var(--e-7);
  border-radius: var(--r-petit); background: var(--encadre); color: var(--accent); }
.fm .fm-panel-train .fm-panel-ico { background: var(--surface); color: var(--accent); }
.fm .fm-pilule { margin-left: auto; padding: var(--e-1) var(--e-3); border-radius: var(--r-pilule); border: 1px solid var(--filet);
  font-size: var(--t-legende); font-weight: var(--g-appuyee); white-space: nowrap; }
.fm .fm-panel-train .fm-pilule { border-color: var(--surface); color: var(--surface); }
.fm .fm-panel-sejour .resa h2 { font-size: var(--t-titre-3); font-weight: var(--g-forte); margin: 0 0 var(--e-3); text-transform: none; letter-spacing: 0; }
.fm .fm-panel-sejour .resa-n, .fm .fm-panel-sejour .resa-tri { font-size: var(--t-legende); color: var(--encre-2); margin: 0 0 var(--e-2); }
/* une ligne par offre : fond, rayon, pastille a l'initiale, nom, prix, bouton a droite */
.fm .fm-panel-sejour .of-l { list-style: none; margin: var(--e-3) 0; padding: 0; display: grid; gap: var(--e-2); }
.fm .fm-panel-sejour .of { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "s b" "px b" "dt b" "f b" "af b";
  gap: 0 var(--e-3); align-items: center; padding: var(--e-3) var(--e-4); border-radius: var(--r-grand); background: var(--fond); }
.fm .fm-panel-sejour .of-s { grid-area: s; margin: 0; font-weight: var(--g-appuyee); display: flex; align-items: center; gap: var(--e-2); }
.fm .fm-panel-sejour .of-s::first-letter { color: var(--accent); font-weight: var(--g-forte); }
.fm .fm-panel-sejour .of-px { grid-area: px; margin: 0; font-size: var(--t-petit); }
.fm .fm-panel-sejour .of-dt { grid-area: dt; margin: 0; font-size: var(--t-mention); color: var(--encre-2); }
.fm .fm-panel-sejour .of-f { grid-area: f; margin: 0; font-size: var(--t-mention); color: var(--encre-2); }
.fm .fm-panel-sejour .af-s { grid-area: af; margin: 0; }
.fm .fm-panel-sejour .btn-of { grid-area: b; margin: 0; white-space: nowrap; }
.fm .fm-panel-sejour .of:first-child .btn-of { background: var(--accent); color: var(--surface); border-color: var(--accent); }   /* MARQUE_LOT391 — le jaune, c'est Reserver, nulle part ailleurs */
.fm .fm-panel-sejour .of:not(:first-child) .btn-of { background: var(--encre); color: var(--surface); border-color: var(--encre); }
.fm .fm-panel-sejour .resa-f { font-size: var(--t-mention); color: var(--encre-2); margin: var(--e-2) 0 0; line-height: var(--i-courant); }
/* les hebergements, quand le flux les donne : une rangee de cartes defilantes sous les offres */
.fm .fm-panel-sejour .hebs { margin-top: var(--e-4); padding-top: var(--e-4); border-top: 1px solid var(--filet); }
.fm .fm-panel-sejour .hebs h2 { font-size: var(--t-appui); font-weight: var(--g-appuyee); margin: 0 0 var(--e-3); }
.fm .fm-panel-sejour .hb-l { list-style: none; margin: 0; padding: 0 0 var(--e-2); display: flex; gap: var(--e-3); overflow-x: auto; scroll-snap-type: x mandatory; }
.fm .fm-panel-sejour .hb { flex: 0 0 min(var(--largeur-lecture), 72%); scroll-snap-align: start; border: 1px solid var(--filet); border-radius: var(--r-grand);
  overflow: hidden; background: var(--surface); display: flex; flex-direction: column; }
.fm .fm-panel-sejour .hb-i img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.fm .fm-panel-sejour .hb-c { padding: var(--e-3); font-size: var(--t-petit); display: grid; gap: var(--e-1); }
.fm .fm-panel-sejour .hb-t { margin: 0; }
.fm .fm-panel-sejour .hb-d { margin: 0; color: var(--encre-2); font-size: var(--t-legende); }
.fm .fm-panel-sejour .hb-p { margin: 0; }
.fm .fm-panel-sejour .hb-m { font-size: var(--t-mention); color: var(--encre-2); margin: var(--e-2) 0 0; }
/* le panneau du train : la gare de depart (le selecteur du site), les villes, l'arrivee, l'appel colle en bas */
.fm .fm-panel-train h3 { color: var(--surface); }
.fm .fm-gare-depart { margin: var(--e-2) 0 var(--e-3); }
.fm .fm-gare-depart .champ { background: var(--surface); border-radius: var(--r-petit); color: var(--encre); }
.fm .fm-gare-depart .champ input { color: var(--encre); }
.fm .fm-gare-depart .dep-r { color: var(--surface); font-size: var(--t-legende); }
.fm .fm-raccourcis a { display: inline-block; margin: 0 var(--e-1) var(--e-1) 0; padding: var(--e-1) var(--e-2); border-radius: var(--r-pilule);
  border: 1px solid var(--surface); text-decoration: none; font-size: var(--t-legende); }
.fm .fm-arrivee { display: flex; align-items: center; gap: var(--e-2); margin: var(--e-3) 0; }
.fm .fm-train-appel { margin-top: auto; padding-top: var(--e-3); }
.fm .fm-train-appel .fm-liens { list-style: none; margin: 0; padding: 0; }
.fm .fm-train-appel .sn-o { display: flex; align-items: center; justify-content: center; gap: var(--e-2); width: 100%; min-height: var(--cible-tactile);
  border-radius: var(--r-petit); background: var(--surface); color: var(--accent); font-weight: var(--g-appuyee); text-decoration: none; }
.fm .fm-train-appel .sn-t, .fm .fm-train-appel .sn-l { font-size: var(--t-legende); }
.fm .fm-affil { text-align: center; font-size: var(--t-legende); color: var(--encre-2); margin: var(--e-4) 0 0; }
.fm .fm-affil .af-t { margin-right: var(--e-2); }

/* ---- zone 2 : une carte, deux colonnes, la droite en vert pale ---- */
.fm .fm-arrival { display: grid; grid-template-columns: 1.4fr 1fr; }
.fm .fm-arrival-head .fm-vert { color: var(--accent); margin: var(--e-1) 0 0; }
.fm .fm-route-stop span { display: inline-flex; align-items: center; justify-content: center; width: var(--e-6); height: var(--e-6);
  border-radius: var(--r-pilule); background: var(--encadre); color: var(--accent); }
.fm .fm-btn-plein { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.fm button.fm-btn { font: inherit; cursor: pointer; }
.fm .fm-arrival-aside { background: var(--encadre); border-left-color: var(--filet-encadre); }   /* MARQUE_LOT391, MARQUE_LOT392 — 1,08:1 : le filet est la garantie, donc un filet qui tient 3:1 */
.fm .fm-arrival-aside.fm-aller { margin-top: 0; }
.fm .fm-retour-lead { margin: 0 0 var(--e-3); font-size: var(--t-petit); }
.fm .fm-arrival-aside .th { font-size: var(--t-appui); font-weight: var(--g-appuyee); margin: 0 0 var(--e-2); }
.fm .fm-arrival-aside .al-cmd .barre { display: grid; gap: var(--e-2); }
.fm .fm-arrival-aside .al-a { font-size: var(--t-legende); color: var(--encre-2); }
.fm .fm-fraicheur { margin: var(--e-3) 0 0; }

/* ---- zone 4 : le dialogue « Le dernier trajet » ---- */
.fm-modale { border: 0; border-radius: var(--r-grand); padding: 0; width: min(560px, calc(100% - var(--e-6))); max-height: calc(100vh - var(--e-6));
  background: var(--surface); color: var(--encre); box-shadow: var(--o-recouvrement); }
.fm-modale::backdrop { background: var(--encre); opacity: .55; }
.fm-modale .fm-modale-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-3); padding: var(--e-5) var(--e-5) 0; }
.fm-modale h2 { font-size: var(--t-titre-3); font-weight: var(--g-forte); margin: 0; }
.fm-modale .fm-fermer { flex: none; width: var(--cible-tactile); height: var(--cible-tactile); border-radius: var(--r-pilule); border: 1px solid var(--filet);
  background: var(--surface); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.fm-modale .fm-modale-corps { padding: var(--e-4) var(--e-5) var(--e-5); }
.fm-modale .fm-modale-desc { font-size: var(--t-petit); color: var(--encre-2); margin: 0 0 var(--e-4); }
.fm-modale .fm-etapes { list-style: none; margin: 0 0 var(--e-4); padding: 0; }
.fm-modale .fm-etapes li { position: relative; display: flex; gap: var(--e-3); padding-bottom: var(--e-5); }
.fm-modale .fm-etapes li:not(:last-child)::before { content: ""; position: absolute; width: 1px; background: var(--filet-net); top: var(--e-6); bottom: 0; left: var(--e-4); }
.fm-modale .fm-etape-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--e-6); height: var(--e-6);
  border-radius: var(--r-pilule); background: var(--encadre); color: var(--accent); }
.fm-modale .fm-etape-t strong { font-size: var(--t-petit); }
.fm-modale .fm-etape-t p { font-size: var(--t-legende); color: var(--encre-2); margin: var(--e-1) 0 0; }
.fm-modale .fm-retour-alerte { padding: var(--e-3); background: var(--alerte-fond); color: var(--alerte); border-radius: var(--r-petit); font-size: var(--t-petit); margin-bottom: var(--e-4); }
.fm-modale .fm-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: var(--cible-tactile); border-radius: var(--r-petit);
  text-decoration: none; font-weight: var(--g-appuyee); }
.fm-modale .fm-btn-plein { background: var(--encre); color: var(--surface); }
.fm-modale .fm-note-bas { font-size: var(--t-mention); color: var(--encre-2); text-align: center; margin: var(--e-3) 0 0; }

/* ---- largeurs ---- */
@media (max-width: 899px) {
  .fm .fm-arrival { grid-template-columns: 1fr; }
  .fm .fm-panel-sejour .of { grid-template-columns: 1fr; grid-template-areas: "s" "px" "dt" "f" "b" "af"; }
  .fm .fm-panel-sejour .btn-of { justify-self: start; margin-top: var(--e-2); }
}
@media (max-width: 767px) {
  .fm .fm-facts { grid-template-columns: 1fr; }
  .fm .fm-facts .preuve li { border-right: 0; border-bottom: 1px solid var(--filet); padding: var(--e-3) var(--e-4); }
  .fm .fm-facts .preuve li:last-child { border-bottom: 0; }
  .fm .fm-facts .preuve li:nth-child(3) { grid-column: auto; border-top: 0; margin-top: 0; padding-top: var(--e-3); }
}

/* MARQUE_LOT396 — les volets regroupes : un sous-titre par ancien volet absorbe */
.fm .fm-dep-h { font-family: var(--police-titre); font-size: var(--t-texte); font-weight: var(--g-appuyee); color: var(--encre); margin: var(--e-4) 0 var(--e-2); }
.fm .fm-dep-h:first-child { margin-top: 0; }
.fm .fm-dep-trajet { margin-top: var(--e-4); }

/* fiche-composants.css — lot 386 : les composants repris tels quels par la fiche
 * d'essai changent d'habits, pas de donnees. Un composant existant garde ses
 * champs, ses mesures, ses libelles et son comportement (rien ne bouge dans
 * bloc_jeu.py, jeu.js, generer_site.py) ; ici, seulement ses tailles, graisses,
 * espacements, rayons, ombres et couleurs — par les jetons, sous `.fm`.
 * MARQUE_LOT386. Concatene a la suite de fiche.css dans style.css.
 * Aucun ancien nom de variable du generateur, aucune valeur en clair.
 */

/* ---- le bloc-jeu (repli < 900 px) : cadre, bandes, recherche, filtres ---- */
.fm #s-carte > .rp-c { padding: 0; }
.fm .jeu.on { border: 1px solid var(--filet); border-radius: var(--r-grand); background: var(--surface); gap: var(--e-4); }
.fm .jeu.on .jeu-c { background: var(--fond); }
.fm .jx-rech input { font-family: var(--police-texte); font-size: var(--t-texte); color: var(--encre); background: var(--surface);
  border: 1px solid var(--filet-net); border-radius: var(--r-grand); box-shadow: var(--o-repos); }
.fm .jx-rech input::placeholder { color: var(--encre-2); }
.fm .jx-fb, .fm .jeu.on .jx-fb { color: var(--surface); background: var(--accent); border: 1px solid var(--accent); border-radius: var(--r-grand); box-shadow: var(--o-repos); }
.fm .jx-modes { background: var(--fond); border-radius: var(--r-grand); padding: var(--e-1); gap: var(--e-1); }
.fm .jx-m, .fm .jeu.on .jx-m { font-family: var(--police-texte); font-size: var(--t-petit); font-weight: var(--g-appuyee); color: var(--encre); border-radius: var(--r-petit); }
.fm .jx-m[aria-pressed="true"], .fm .jeu.on .jx-m[aria-pressed="true"] { background: var(--accent); color: var(--surface); box-shadow: var(--o-repos); }
.fm .jx-m[aria-pressed="true"] .pa-i, .fm .jeu.on .jx-m[aria-pressed="true"] .pa-i { color: var(--surface); }
.fm .jx-cats { gap: var(--e-2); }
.fm .jx-cat { font-family: var(--police-texte); font-size: var(--t-petit); font-weight: var(--g-appuyee); color: var(--encre); background: var(--surface);
  border: 1px solid var(--filet-net); border-radius: var(--r-pilule); padding: 0 var(--e-3); }
.fm .jx-cat[aria-pressed="true"] { background: var(--accent); color: var(--surface); border-color: var(--accent); box-shadow: var(--o-repos); }
.fm .jx-du-t b { color: var(--accent); background: var(--alerte-fond); border-radius: var(--r-petit); padding: var(--e-1) var(--e-2); font-weight: var(--g-appuyee); }
.fm #jx-jour { font-family: var(--police-texte); font-size: var(--t-petit); color: var(--encre); background: var(--surface); border: 1px solid var(--filet-net); border-radius: var(--r-grand); }

/* la bande basse : compteur, liste des lieux, « Voir aussi N lieux » */
.fm .jeu.on .jx-bas { background: var(--surface); border-radius: var(--r-grand) var(--r-grand) var(--r-0) var(--r-0); box-shadow: var(--o-recouvrement); gap: var(--e-2); }
.fm .jeu.on .jx-cnt { padding: 0 var(--e-4); gap: var(--e-1) var(--e-3); font-family: var(--police-texte); }
.fm .jeu.on .jx-cnt b { font-family: var(--police-titre); font-size: var(--t-appui); font-weight: var(--g-forte); color: var(--encre); }
.fm .jx-eb, .fm .jx-eb2 { color: var(--encre-2); font-size: var(--t-mention); font-weight: var(--g-appuyee); }
.fm .jeu.on .jx-db, .fm .jx-plus { font-family: var(--police-texte); font-size: var(--t-petit); font-weight: var(--g-appuyee); color: var(--accent);
  background: var(--fond); border: 1px solid var(--filet); border-radius: var(--r-grand); padding: 0 var(--e-3); }
.fm .jeu.on .jx-l { gap: var(--e-3); padding: var(--e-1) var(--e-4) var(--e-2); }
.fm .jx-c-b, .fm .jeu.on .jx-c-b { font-family: var(--police-texte); color: var(--encre); background: var(--surface); border: 1px solid var(--filet);
  border-radius: var(--r-grand); padding: var(--e-3); gap: var(--e-3); box-shadow: var(--o-repos); }
.fm .jx-c-b:hover { box-shadow: var(--o-souleve); }
.fm .jx-c.sel .jx-c-b { box-shadow: var(--o-souleve); border-color: var(--accent); }
.fm .jx-c-i, .fm .jeu.on .jx-c-i { border-radius: var(--r-petit); }
.fm .jx-c-f, .fm .jeu.on .jx-c-f { font-size: var(--t-mention); font-weight: var(--g-appuyee); color: var(--encre-2); letter-spacing: .06em; text-transform: uppercase; }
.fm .jeu.on .jx-c-x b { font-family: var(--police-titre); font-size: var(--t-texte); font-weight: var(--g-forte); color: var(--encre); }
.fm .jx-c-r { font-size: var(--t-legende); color: var(--encre-2); }
.fm .jx-c-a, .fm .jx-c-t { font-size: var(--t-legende); color: var(--accent); font-weight: var(--g-appuyee); }
.fm .jx-c-d, .fm .jeu.on .jx-c-d { font-size: var(--t-legende); color: var(--accent); background: var(--fond); border-radius: var(--r-petit); padding: var(--e-1) var(--e-2); box-shadow: none; }
.fm .jx-c-o, .fm .jx-c-ch { color: var(--encre-2); }
.fm .jx-vide { font-size: var(--t-petit); color: var(--encre-2); }

/* la carte et ses commandes */
.fm .jeu-c .leaflet-bar { border: 1px solid var(--filet-net); border-radius: var(--r-petit); box-shadow: var(--o-repos); }
.fm .jeu-c .leaflet-bar a { color: var(--encre); }
.fm .jx-res, .fm .jx-autour { font-family: var(--police-texte); font-size: var(--t-petit); font-weight: var(--g-appuyee); color: var(--encre);
  background: var(--surface); border: 1px solid var(--filet-net); border-radius: var(--r-pilule); box-shadow: var(--o-repos); padding: 0 var(--e-3); }
.fm .jx-res .pa-i, .fm .jx-autour .pa-i { color: var(--accent); }
.fm .lect { background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-grand); box-shadow: var(--o-souleve); padding: var(--e-3); gap: var(--e-3); }
.fm .lect-i { background: var(--fond); color: var(--accent); border-radius: var(--r-petit); }
.fm .lect-f { color: var(--encre); border: 1px solid var(--filet-net); border-radius: var(--r-petit); }
.fm .pn-v.on { background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-grand); padding: var(--e-4); box-shadow: var(--o-souleve); }
.fm .pn-v p { font-size: var(--t-petit); }
.fm .jeu-note { font-size: var(--t-legende); color: var(--encre-2); }

/* la feuille des filtres, les sorties en bus, l'agenda */
.fm .jeu.on .jx-sh { background: var(--surface); border-radius: var(--r-grand) var(--r-grand) var(--r-0) var(--r-0); box-shadow: var(--o-recouvrement); gap: var(--e-4); }
.fm .jeu.on .jx-shh { background: var(--surface); border-radius: var(--r-grand) var(--r-grand) var(--r-0) var(--r-0); padding: var(--e-4) var(--e-3) var(--e-3) var(--e-4); gap: var(--e-3); }
.fm .jeu.on .jx-shx { color: var(--encre); border: 1px solid var(--filet-net); border-radius: var(--r-petit); }
.fm .jeu.on .jx-voir { color: var(--surface); background: var(--accent); border-radius: var(--r-grand); box-shadow: var(--o-souleve); font-family: var(--police-texte); font-weight: var(--g-appuyee); }
.fm .jx-tc h3, .fm .jx-ag h3 { font-family: var(--police-titre); font-size: var(--t-appui); font-weight: var(--g-forte); }
.fm .jx-tc .pn-s { font-size: var(--t-legende); color: var(--encre-2); }
.fm .pn-l li { font-size: var(--t-petit); gap: var(--e-2); }
.fm .pn-l b { font-weight: var(--g-appuyee); }
.fm .pn-l em { font-size: var(--t-legende); color: var(--encre-2); }
.fm .pn-go { color: var(--accent); border: 1px solid var(--filet-net); border-radius: var(--r-petit); padding: var(--e-1) var(--e-3); font-weight: var(--g-appuyee); }
.fm .jx-hb { color: var(--accent); background: var(--fond); border-radius: var(--r-petit); }
.fm .jx-hb[aria-pressed="true"] { background: var(--accent); color: var(--surface); }
.fm .ah > summary { color: var(--accent); }
.fm .ah-t { font-size: var(--t-mention); font-weight: var(--g-forte); }
.fm .ah-l li { font-size: var(--t-petit); }
.fm .ah-l span { font-size: var(--t-legende); }
.fm .jd-h span { color: var(--accent); background: var(--fond); border-radius: var(--r-petit); }
.fm .ag-d { color: var(--accent); }
.fm .ag-x em { font-size: var(--t-legende); }
.fm .jeu.on.m-ag .jx-ag { background: var(--surface); border-radius: var(--r-grand) var(--r-grand) var(--r-0) var(--r-0); box-shadow: var(--o-recouvrement); }

/* le detail d'un lieu */
.fm .jeu.on .jx-d { border-radius: var(--r-grand) var(--r-grand) var(--r-0) var(--r-0); box-shadow: var(--o-recouvrement); background: var(--surface); }
.fm .jx-d-x { color: var(--encre); background: var(--surface); border: 1px solid var(--filet-net); box-shadow: var(--o-repos); }
.fm .jx-d-b1 { background: var(--fond); padding: var(--e-4); }
.fm .jx-d-il, .fm .pn-ph.pn-il .pn-il-t, .fm .jx-d-b1 .jx-d-cr { color: var(--encre); background: var(--surface); border-radius: var(--r-pilule); }
.fm .jx-d-pt { color: var(--encre); background: var(--surface); border-radius: var(--r-petit); box-shadow: var(--o-repos); }
.fm .jx-d-t { padding: var(--e-4) var(--e-4) 0; }
.fm .jx-d-t h3 { font-family: var(--police-titre); font-size: var(--t-titre-3); font-weight: var(--g-forte); }
.fm .jx-d-s { font-size: var(--t-petit); color: var(--encre-2); }
.fm .jx-d-hs, .fm .jx-d-de, .fm .jx-d-e p { color: var(--encre-2); font-size: var(--t-petit); }
.fm .jx-d-h { padding: var(--e-3); border: 1px solid var(--filet); border-radius: var(--r-grand); background: var(--surface); }
.fm .jx-d-h a { color: var(--accent); font-weight: var(--g-appuyee); }
.fm .jx-d-m { gap: var(--e-2); padding: var(--e-4) var(--e-4) 0; }
.fm .jx-d-m div { padding: var(--e-3) var(--e-2); border: 1px solid var(--filet); border-radius: var(--r-grand); }
.fm .jx-d-m div.a { background: var(--fond); }
.fm .jx-d-m div.a .pa-i, .fm .jx-d-m div.a b { color: var(--accent); }
.fm .jx-d-m b.rien { font-size: var(--t-petit); font-weight: var(--g-normal); }
.fm .jx-d-e { padding: var(--e-3) var(--e-4); border-radius: var(--r-grand); background: var(--fond); gap: var(--e-3); }
.fm .jx-d-e .pa-i { color: var(--accent); }
.fm .jx-d-a { padding: var(--e-4); }
.fm .jx-d-go { color: var(--surface); background: var(--accent); border-radius: var(--r-grand); box-shadow: var(--o-souleve); font-family: var(--police-texte); font-weight: var(--g-appuyee); }
.fm .jx-d-go.sec { color: var(--encre); background: transparent; border: 1px solid var(--filet-net); box-shadow: none; }
.fm .jx-d-r li { font-size: var(--t-petit); }
.fm .jx-d-r li b { font-weight: var(--g-appuyee); }
.fm .jx-d-r li span { font-size: var(--t-legende); }
.fm .jx-voile { background: var(--encre); opacity: .35; border-radius: var(--r-grand); }
.fm .jx-ap svg { border-radius: var(--r-grand); background: var(--fond); }
.fm .jx-ap figcaption { font-size: var(--t-legende); color: var(--encre-2); }
.fm .jx-vt h3 { font-family: var(--police-titre); font-size: var(--t-appui); font-weight: var(--g-forte); color: var(--encre); }
.fm .jx-vt-s, .fm .jx-vt-m, .fm .jx-vt-d, .fm .jx-vt-p, .fm .jx-vt-a { color: var(--encre-2); }
.fm .jx-vt-i a { border: 1px solid var(--filet); border-radius: var(--r-grand); background: var(--surface); }
.fm .jx-vt-e { color: var(--alerte); font-weight: var(--g-forte); }
.fm .jx-vt-b { color: var(--surface); background: var(--accent); border-radius: var(--r-pilule); }

/* ---- l'ilot React (>= 900 px) : les memes jetons sur ses elements ---- */
/* l'ilot React est retire (lot 395) : ses six regles sont parties avec lui */

/* ---- « Comment s'y rendre ? » (bloc_aller) ---- */
.fm .fm-aller h2.th { font-family: var(--police-titre); font-size: var(--t-titre-3); font-weight: var(--g-forte); color: var(--encre); }
.fm .al-t, .fm .al-cmd { border: 1px solid var(--filet); border-radius: var(--r-grand); background: var(--surface); box-shadow: var(--o-repos); }
.fm .al-v { font-size: var(--t-texte); color: var(--encre); }
.fm .al-v b { font-weight: var(--g-forte); }
.fm .al-l li { font-size: var(--t-petit); color: var(--encre-2); }
.fm .al-l b, .fm .al-a b, .fm .al-ex b { color: var(--encre); font-weight: var(--g-appuyee); }
.fm .al-d, .fm .al-ex, .fm .al-a, .fm .al-sem-d summary { font-size: var(--t-petit); color: var(--encre-2); }
.fm .al-ex span { border: 1px solid var(--filet-net); border-radius: var(--r-pilule); font-size: var(--t-mention); font-weight: var(--g-appuyee); color: var(--encre-2); }
.fm .al-r { border-left: 2px solid var(--filet-net); background: var(--fond); border-radius: var(--r-0) var(--r-grand) var(--r-grand) var(--r-0); font-size: var(--t-petit); }
.fm .al-r.oui { border-left-color: var(--accent); }
.fm .al-r.non { border-left-color: var(--alerte); }
.fm .al-sem { font-size: var(--t-legende); }
.fm .al-sem caption, .fm .al-sem th { font-size: var(--t-legende); color: var(--encre-2); font-weight: var(--g-appuyee); }
.fm .al-sem td { border-top: 1px solid var(--filet); color: var(--encre-2); }
.fm .al-sem td.o { color: var(--accent); font-weight: var(--g-forte); }
.fm .al-cmd .champ label { font-family: var(--police-texte); font-size: var(--t-mention); font-weight: var(--g-appuyee); color: var(--encre-2); letter-spacing: .08em; text-transform: uppercase; }
.fm .al-cmd .champ input, .fm .al-cmd .champ select { font-family: var(--police-texte); font-size: var(--t-texte); color: var(--encre); }
.fm .al-cmd .btn-plein { font-family: var(--police-texte); font-size: var(--t-petit); font-weight: var(--g-appuyee); background: var(--accent); color: var(--surface); border-radius: var(--r-grand); }
.fm .dep-r { font-size: var(--t-petit); color: var(--encre-2); }
/* les sept jours non calcules : le choix des jours ne s'affiche pas (une commande sans effet est un mensonge d'interface) ;
   la phrase du bloc, elle, reste : elle dit deja ce qui est su */
.fm .fm-sans-jours .al-cmd .champ:has(#j-arr), .fm .fm-sans-jours .al-cmd .champ:has(#j-dep), .fm .fm-sans-jours #al-go { display: none; }

/* ---- « Réserver ou contacter » (bloc_reserver), le train (bloc_sncf) ---- */
.fm .resa h2 { font-family: var(--police-texte); font-size: var(--t-mention); font-weight: var(--g-forte); color: var(--encre-2); letter-spacing: .1em; text-transform: uppercase; }
.fm .resa ul, .fm .resa-l { font-size: var(--t-petit); }
.fm .resa li + li, .fm .resa-l { border-top: 1px solid var(--filet); }
.fm .resa-a, .fm .resa-tri, .fm .resa-n { font-size: var(--t-legende); color: var(--encre-2); }
.fm .resa-a a, .fm .resa-tri a { color: var(--accent); }
.fm .resa-f, .fm .of-dt, .fm .of-f { font-size: var(--t-legende); color: var(--encre-2); }
.fm .resa-px, .fm .of-px { font-size: var(--t-petit); color: var(--encre); }
.fm .resa-px b, .fm .of-px b, .fm .of-p b { font-size: var(--t-appui); font-weight: var(--g-forte); color: var(--encre); }
.fm .btn { font-family: var(--police-texte); font-size: var(--t-petit); font-weight: var(--g-appuyee); background: var(--accent); color: var(--surface); border-radius: var(--r-grand); }
.fm .btn.sec { background: var(--surface); color: var(--encre); border: 1px solid var(--filet-net); }
.fm .btn-of { font-size: var(--t-petit); }
.fm .af-t { border-radius: var(--r-pilule); background: var(--fond); color: var(--encre-2); border: 1px solid var(--filet); font-size: var(--t-mention); font-weight: var(--g-appuyee); }
.fm .fm-liens li { font-size: var(--t-petit); }

/* ---- equipements, climat, notes, mentions, voisins ---- */
.fm .eqp { border-radius: var(--r-petit); background: var(--fond); border: 1px solid var(--filet); color: var(--encre-2); font-size: var(--t-petit); }
.fm .eq { background: var(--fond); color: var(--accent); border-radius: var(--r-petit); font-size: var(--t-petit); font-weight: var(--g-appuyee); }
.fm .equips { font-size: var(--t-petit); }
.fm figure.frise { border: 1px solid var(--filet); border-radius: var(--r-grand); background: var(--surface); }
.fm figure.frise figcaption, .fm .clim-d > summary, .fm .resume-clim { font-size: var(--t-legende); color: var(--encre-2); }
.fm .resume-clim b { color: var(--encre); }
.fm .ete-j { border: 1px solid var(--filet); border-radius: var(--r-grand); background: var(--surface); }
.fm .ete { border-radius: var(--r-pilule); font-size: var(--t-legende); font-weight: var(--g-forte); }
.fm .note-l { font-size: var(--t-petit); }
.fm .note-t { font-weight: var(--g-forte); color: var(--encre); }
.fm .note-c { color: var(--encre-2); }
.fm .kv { font-size: var(--t-petit); }
.fm .kv dt { color: var(--encre-2); }
.fm .kv dd { font-weight: var(--g-forte); }
.fm .info .i { border: 1px solid var(--filet-net); color: var(--encre-2); background: var(--surface); }
.fm .info .info-c { background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-grand); box-shadow: var(--o-recouvrement); }
.fm .info .info-c .src { border-top: 1px solid var(--filet); font-size: var(--t-legende); color: var(--encre-2); }
.fm .grid .card { border-radius: var(--r-grand); }
.fm .card h3 { font-family: var(--police-titre); font-size: var(--t-texte); font-weight: var(--g-forte); }
.fm .card h3 a { color: var(--encre); }
.fm .card .bas { border-top: 1px solid var(--filet); font-size: var(--t-petit); }
.fm .card .note-l { font-size: var(--t-legende); }
.fm .card .ph { border-radius: var(--r-grand); background: var(--fond); box-shadow: var(--o-repos); }
.fm .hebs h2 { font-family: var(--police-titre); font-size: var(--t-appui); font-weight: var(--g-forte); }
.fm .mos-g button { border-radius: var(--r-petit); background: var(--fond); }
.fm .mos-c { font-size: var(--t-legende); color: var(--encre-2); }

/* ---- la barre d'action du generateur a quitte la page d'essai (lot 393) : la barre d'ancres la remplace ---- */

/* ---- la grille ne garde pas de colonne vide : un enfant seul prend toute la largeur ---- */
.fm .fm-grid-2 > :only-child, .fm .fm-grid-info > :only-child { grid-column: 1 / -1; }

/* ---- MARQUE_LOT393 : les trente-cinq selecteurs vivants qui restaient sans habits ----
 * (la lettre en listait 38, sa liste en porte 39 : .jx-vt-c, .jx-vt-f, .jx-vt-l et .jx-vt-v sont des regles
 * mortes de jeu.css, sans emetteur — elles ne prennent pas de jetons, elles sont dites.)
 * Aucun d'eux n'appartenait a l'animation ; celle-ci avait les siens (.lect-p, .lect-v,
 * .lj, .veh, .joue, .ouvre), sortis de jeu.css avec elle. */
.fm .jeu-c #jeu-map { background: var(--fond); }
.fm #jeu-panneau, .fm .jx-p { font-family: var(--police-texte); color: var(--encre); }
.fm .jx-h { padding: var(--e-4); gap: var(--e-3); }
.fm .jx-t { font-family: var(--police-titre); font-size: var(--t-titre-3); font-weight: var(--g-forte); line-height: var(--i-serre); color: var(--encre); margin: 0; }
.fm .jx-dep { gap: var(--e-3); padding: var(--e-2) 0; }
.fm .jx-dep-i { color: var(--accent); background: var(--encadre); border-radius: var(--r-petit); }
.fm .jx-dep-x b { font-size: var(--t-texte); font-weight: var(--g-appuyee); color: var(--encre); }
.fm .jx-dep-x em { font-size: var(--t-legende); color: var(--encre-2); font-style: normal; }
.fm .jx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.fm .jx-f { padding: var(--e-3) var(--e-4); gap: var(--e-3); }
.fm .jx-fl { font-size: var(--t-mention); font-weight: var(--g-appuyee); letter-spacing: .06em; text-transform: uppercase; color: var(--encre-2); margin: 0; }
.fm .jx-tout, .fm .jeu.on .jx-tout { color: var(--accent); background: var(--surface); border: 1px solid var(--filet-net); border-radius: var(--r-pilule); }
.fm .jx-n { font-size: var(--t-legende); color: var(--encre-2); font-variant-numeric: tabular-nums; }
.fm .jx-cnt-s { font-size: var(--t-legende); color: var(--encre-2); }
.fm .jx-repli { color: var(--encre-2); }
.fm .jx-filtre .jx-cnt b { color: var(--accent); }
.fm #jx-du { accent-color: var(--accent); margin: var(--e-2) 0; }
.fm .jx-du-e { font-size: var(--t-legende); color: var(--encre-2); margin: 0; }
.fm .jx-jr { gap: var(--e-2); padding: var(--e-3) 0; }
.fm .jx-jr-l { font-size: var(--t-petit); font-weight: var(--g-appuyee); color: var(--encre); }
.fm .jx-jr-n { font-size: var(--t-legende); color: var(--encre-2); line-height: var(--i-courant); margin: 0; }
.fm .jx-sortie { font-family: var(--police-texte); font-size: var(--t-petit); font-weight: var(--g-appuyee); color: var(--surface); background: var(--accent);
  border: 1px solid var(--accent); border-radius: var(--r-grand); padding: var(--e-2) var(--e-4); box-shadow: var(--o-repos); }
.fm .jx-sortie[hidden] { display: none; }
.fm .jx-j { gap: var(--e-3); }
.fm .jx-mot { font-size: var(--t-legende); font-weight: var(--g-appuyee); color: var(--accent); background: var(--encadre); border-radius: var(--r-pilule); padding: 0 var(--e-2); }
.fm .jx-pied { font-size: var(--t-legende); color: var(--encre-2); line-height: var(--i-courant); }
.fm .jx-shh-t { font-family: var(--police-titre); font-size: var(--t-appui); font-weight: var(--g-forte); color: var(--encre); }
.fm .jx-d-c { padding: var(--e-4); gap: var(--e-3); font-family: var(--police-texte); color: var(--encre); }
.fm .jx-d-eb { font-size: var(--t-mention); font-weight: var(--g-appuyee); letter-spacing: .06em; text-transform: uppercase; color: var(--encre-2); }
.fm .jx-d-i { gap: var(--e-3); font-size: var(--t-petit); line-height: var(--i-courant); }
.fm .jx-d-i b { color: var(--encre); font-weight: var(--g-appuyee); }
.fm #jeu-map .jx-mh .mh-p { background: var(--accent); }
.fm #jeu-map .jx-mh .mh-i { color: var(--surface); }
.fm .jx-ep { background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-grand); box-shadow: var(--o-souleve); }
.fm .jx-ep-i { border-radius: var(--r-petit) var(--r-petit) var(--r-0) var(--r-0); }
.fm .jx-ep-n { font-family: var(--police-titre); font-size: var(--t-petit); font-weight: var(--g-forte); color: var(--encre); }
.fm .jx-ep-t { font-size: var(--t-mention); color: var(--encre-2); text-transform: uppercase; letter-spacing: .05em; }
.fm .jx-vl { gap: var(--e-3); }

/* ---- MARQUE_LOT395 : les lieux joignables en car (portes de l'ilot), et le detail d'une sortie ---- */
.fm .tcl-i { border-bottom: 1px solid var(--filet); }
.fm .tcl-b { font-family: var(--police-texte); padding: var(--e-3) var(--e-1) var(--e-3) var(--e-3); gap: var(--e-3); }
.fm .tcl-b:hover { background: var(--fond); }
.fm .tcl-ic { border-radius: var(--r-petit); }
.fm .tcl-b .pn-t b { font-family: var(--police-titre); font-size: var(--t-texte); font-weight: var(--g-appuyee); color: var(--encre); }
.fm .tcl-b .pn-t em { font-size: var(--t-legende); color: var(--encre-2); }
.fm .tcl-m b { font-family: var(--police-titre); font-size: var(--t-titre-3); font-weight: var(--g-forte); color: var(--encre); }
.fm .tcl-m small { font-size: var(--t-mention); color: var(--encre-2); }
.fm .tca { border-top: 1px solid var(--filet); padding-top: var(--e-3); margin-top: var(--e-4); }
.fm .tca > summary { font-family: var(--police-texte); font-size: var(--t-petit); font-weight: var(--g-appuyee); color: var(--encre); }
.fm .jx-sit { color: var(--accent); background: var(--fond); border-radius: var(--r-petit); }
.fm .tcd-t { gap: var(--e-2); padding: var(--e-4) var(--e-4) 0; }
.fm .tcd-t div { border: 1px solid var(--filet); border-radius: var(--r-grand); padding: var(--e-3) var(--e-2); }
.fm .tcd-t b { font-family: var(--police-titre); font-size: var(--t-texte); font-weight: var(--g-forte); color: var(--encre); }
.fm .tcd-t span { font-size: var(--t-mention); color: var(--encre-2); }
.fm .tcd-c { padding: 0 var(--e-4); }
.fm .tcd-et { font-size: var(--t-mention); font-weight: var(--g-forte); color: var(--encre-2); margin: var(--e-4) 0 var(--e-2); }
.fm .tcd-l { border-left: 2px solid var(--filet-encadre); padding-left: var(--e-3); gap: var(--e-2); }
.fm .tcd-l li { font-size: var(--t-petit); line-height: var(--i-courant); color: var(--encre-2); }
.fm .tcd-l li.fort span { color: var(--encre); font-weight: var(--g-appuyee); }
.fm .tcd-l li:has(b:not(:empty)) b { color: var(--accent); font-size: var(--t-texte); }
.fm .tcd-note { background: var(--encadre); border-radius: var(--r-grand); padding: var(--e-3) var(--e-4); font-size: var(--t-legende); color: var(--encre); margin-top: var(--e-4); }
.fm .tcd-j { font-size: var(--t-legende); color: var(--encre-2); line-height: var(--i-courant); margin-top: var(--e-4); }
.fm .jx-d-a .jx-d-go2 { color: var(--encre); border: 1px solid var(--filet-net); background: var(--surface); margin-top: var(--e-2); }

/* indicateurs.css — MARQUE_LOT513B. Les indicateurs du kit « À ma portée » sur les TUILES de camping et sa légende
   (.reading-key) : ils remplacent plante.css (lot 452). Les règles de SA feuille (codex-2026-10-04/assets/css/base.css :
   .card-content, .family*, .badge, .section-summary, .coverage-copy, .daily-items, .daily-chip, .chip-value,
   .activity-count, .activity-rows, .activity-row, .row-label, .meter, .segment, .row-value, .out-of, .empty-meter,
   .state-*, .reading-key, .legend-items, .swatch), à SES valeurs de téléphone (max-width:650px) : une tuile a la largeur
   d'un téléphone. Trois écarts déclarés : (1) TOUT est borné à .card-content ou .reading-key — sa feuille pose des
   classes nues (.easy, .medium, .hard, .unknown) qui toucheraient les pages (leçon du 393) ; (2) ses couleurs d'état
   sont NOS jetons (jetons.css : --facile, --moyen, --difficile, --neutre, --rep-etat-*), les mêmes que les plantes
   avaient ; (3) pas de chevron ni de survol : sur une tuile rien ne s'ouvre (un seul lien, lot 121) — la grille d'une
   ligne de thème perd sa quatrième colonne. Une source, trois feuilles : concaténée à style.css (gares, /depuis/),
   liste-gabarit.css (/campings/, départements, régions) et accueil-gabarit.css. */
.repere-caption{display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--encre-2);margin-bottom:2px}
.card-content{display:flex;flex-direction:column;padding:0;color:var(--encre)}
.card-content svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.card-content .family{padding:12px 0;border-top:1px solid var(--filet)}
.card-content .family-heading{display:flex;align-items:center;gap:8px;margin-bottom:0}
.card-content .family-heading svg{color:var(--encre-2)}
.card-content .family-heading h4{margin:0;font-size:15px;font-weight:650;letter-spacing:-.2px;line-height:1.4;color:var(--accent)}
.card-content .family-heading .badge{margin-left:auto}
.card-content .badge{display:inline-flex;gap:4px;align-items:center;font-size:12px;font-weight:600;line-height:1.5;padding:4px 7px;border-radius:6px;white-space:nowrap;background:var(--rep-etat-neutre-fond);color:var(--rep-etat-neutre-texte)}
.card-content .badge.easy{background:var(--rep-etat-facile-fond);color:var(--rep-etat-facile-texte)}
.card-content .badge.medium{background:var(--rep-etat-moyen-fond);color:var(--rep-etat-moyen-texte)}
.card-content .badge.hard{background:var(--rep-etat-difficile-fond);color:var(--rep-etat-difficile-texte)}
.card-content .section-summary{margin:9px 0 0;font-size:14px;line-height:1.8;color:var(--encre-2)}
.card-content .section-summary strong{font-size:17px;font-weight:700;letter-spacing:-.3px;color:var(--accent)}
.card-content .coverage-copy{font-size:12px;color:var(--encre-2);white-space:nowrap}
.card-content .daily-items{display:flex;flex-wrap:wrap;gap:7px 13px;margin-top:4px}
.card-content .daily-chip{display:inline-flex;align-items:center;gap:5px;font-size:13px;line-height:1.6;padding:3px 0;min-height:30px}
.card-content .daily-chip>span:nth-child(2){color:var(--encre)}
.card-content .chip-value{font-size:12px}
.card-content .chip-value strong{font-size:15px;font-weight:650;font-variant-numeric:tabular-nums}
.card-content .activity-count{margin-left:auto;font-size:17px;font-weight:700;letter-spacing:-.4px;color:var(--accent)}
.card-content .activity-rows{margin-top:6px}
.card-content .activity-row{display:grid;grid-template-columns:91px minmax(20px,1fr) 108px;gap:7px;align-items:center;min-height:36px;padding:4px 0}
.card-content .row-label{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--encre);white-space:nowrap}
.card-content .row-label svg{width:16px;height:16px;color:var(--encre-2)}
.card-content .row-value{font-size:13px;color:var(--encre);white-space:nowrap;text-align:right}
.card-content .row-value strong{font-size:17px;font-weight:650;font-variant-numeric:tabular-nums;color:var(--accent)}
.card-content .out-of{font-size:12px;color:var(--encre-2)}
.card-content .meter{display:flex;height:7px;border-radius:4px;overflow:hidden;width:100%;background:repeating-linear-gradient(90deg,var(--rep-trio-fond) 0 calc(25% - 1px),var(--filet) calc(25% - 1px) 25%)}
.card-content .segment{height:100%;flex-shrink:0}
.card-content .segment.easy{background:var(--facile)}
.card-content .segment.medium{background:var(--moyen)}
.card-content .segment.hard{background:var(--difficile)}
.card-content .segment.unknown{background:repeating-linear-gradient(135deg,var(--neutre) 0 2px,var(--rep-etat-neutre-fond) 2px 5px)}
.card-content .segment.excluded{background:var(--rep-etat-neutre-fond);box-shadow:inset 0 0 0 1px var(--neutre)}
.card-content .empty-meter{display:block;height:1px;border-top:1px dashed var(--filet)}
.card-content .state-easy{color:var(--rep-etat-facile-texte)}
.card-content .state-medium{color:var(--rep-etat-moyen-texte)}
.card-content .state-hard{color:var(--rep-etat-difficile-texte)}
.card-content .state-unknown,.card-content .state-excluded{color:var(--rep-etat-neutre-texte)}
.reading-key{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:13px;padding:15px 0 20px;border-top:1px solid var(--filet);margin-bottom:14px}
.reading-key>div:first-child{display:flex;flex-direction:column;gap:2px;flex:1}
.reading-key strong{font-size:13px;font-weight:600;color:var(--accent)}
.reading-key>div:first-child>span{font-size:12px;color:var(--encre-2)}
.reading-key .legend-items{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.reading-key .legend-items>span{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--encre-2);white-space:nowrap}
.reading-key .swatch{width:9px;height:9px;border-radius:2px;display:inline-block}
.reading-key .swatch.easy{background:var(--facile)}
.reading-key .swatch.medium{background:var(--moyen)}
.reading-key .swatch.hard{background:var(--difficile)}
.reading-key .swatch.unknown{background:repeating-linear-gradient(135deg,var(--neutre) 0 2px,var(--rep-etat-neutre-fond) 2px 5px)}
.indicateurs-sprite{position:absolute;width:0;height:0;overflow:hidden}
@media(max-width:650px){.reading-key .legend-items{order:3;width:100%}.reading-key .legend-items>span{font-size:11px}}
@media(max-width:370px){.card-content .family-heading h4{font-size:14px}.card-content .family-heading{gap:6px}.card-content .badge{font-size:11px;padding:4px 6px}
.card-content .activity-row{grid-template-columns:85px minmax(18px,1fr) 100px;gap:5px}.card-content .row-label{font-size:12px;gap:4px}
.card-content .row-label svg{display:none}.card-content .row-value{font-size:12px}.card-content .row-value strong{font-size:15px}.card-content .out-of{font-size:11px}}