/* liste-v15.css — la liste en v15 (T5, lot 668, MARQUE_LOT668) : /campings/, les régions, les départements. La feuille de la
   maquette validée le 6/11/2026 (docs/maquettes/liste-v15/liste-v15.css), après gabarit/theme.css, sources_web/pages-v15.css et
   sources_web/accueil-v15.css ; ce que la maquette n'avait pas à écrire s'y ajoute : le sprite des icônes, le bouton de carte (un
   bouton, plus un lien), la carte des campings, l'état « depuis chez vous », la section d'un nom cherché, les [hidden] (lot 298).
   L'alphabet de la page du séjour (mesurer_theme_v15.py) : tailles 13, 14, 15, 17, 26 ; espaces 2 à 14, 16, 18, 20, 24, 32, 48 ;
   hauteurs 36, 40, 44, 48, 52, 56 ; rayons 4, 8, 10 et pilules ; 600 au plus ; fonds : blanc, --surface-2, --marque, --e, --m, --h.
   Aucun jeton déclaré. Classes en l5- et les a5- de la maquette T4 que l'accueil n'a pas. */

/* le sprite : ses symboles ne portent aucun trait, la classe .ic le donne (le cœur plein d'un favori passe par fill) */
.l5-sprite { position: absolute; width: 0; height: 0; overflow: hidden }
svg.ic { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }

/* la tête : la recherche faite, en une pilule, puis le nom d'un camping */
.l5-tete { display: grid; gap: 8px; padding: 14px 16px 0 }
.a5-pill { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 18px; border-radius: 999px; background: #ffffff;
  box-shadow: var(--ombre); text-decoration: none; color: var(--encre) }
.a5-pill > .ic { width: 20px; height: 20px; flex: none; color: var(--titre) }
.a5-pill > span { flex: 1; min-width: 0; display: grid; gap: 2px }
.a5-pill b { font: 600 15px/1.2 var(--corps); color: var(--titre) }
.a5-pill small { font: 400 13px/1.2 var(--corps); color: var(--encre-2) }
.a5-pill i { flex: none; font: 500 14px/1 var(--corps); font-style: normal; color: var(--titre); text-decoration: underline; text-underline-offset: 3px }
.l5-nom { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; padding: 0 16px; border-radius: 999px; background: #ffffff;
  box-shadow: var(--ombre-puce); color: var(--encre-2) }
.l5-nom .ic { width: 18px; height: 18px; flex: none }
.l5-nom input { flex: 1; min-width: 0; height: 24px; padding: 0; margin: 0; border: 0; outline: 0; background: transparent; appearance: none;
  font: 400 16px/1.3 var(--corps); color: var(--encre) }
.l5-nom input::placeholder { color: var(--encre-2); opacity: 1 }
.l5-nom:focus-within { outline: 2px solid var(--marque); outline-offset: 2px }
/* MARQUE_LOT676 — `main.l5 .l5-etat` (0,2,1) : `main.a5 :is(h1, h2, h3, h4, p) { margin: 0 }` (accueil-v15.css, 0,1,2) l'emportait,
   la phrase d'état collait au bord gauche ; la feuille ne nomme que ses classes (verif 668 A3) */
main.l5 .l5-etat { margin: 8px 16px 0; font: 400 13px/1.4 var(--corps); color: var(--encre-2) }
.l5-etat[hidden] { display: none }

/* le compte, la définition, les puces */
.l5-h1 { font: 600 26px/1.15 var(--titres); color: var(--titre) }
.l5-h1 b { font-weight: 600; color: var(--te) }
.l5-h1-0 { color: var(--titre) }
.a5-puces { display: flex; gap: 8px; margin: 14px -16px 0; padding: 2px 16px 4px; overflow-x: auto; scrollbar-width: none }
.a5-puces::-webkit-scrollbar { display: none }
.a5-pu { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px;
  background: #ffffff; box-shadow: var(--ombre-puce); color: var(--titre); font: 500 14px/1 var(--corps); white-space: nowrap; cursor: pointer }
.a5-pu .ic { width: 16px; height: 16px }
.a5-pu b { font-weight: 500; color: var(--encre-2) }
.a5-pu[aria-pressed="true"] { background: var(--surface-2) }
.a5-pu[hidden] { display: none }

/* une ligne de liste : le nom, la commune, le trajet ; à droite la photo, sinon le Plan IGN, sinon rien ; le cœur sous l'image */
.a5-liste { list-style: none; margin: 14px 0 0; padding: 0 }
.a5-l { position: relative }
.a5-l + .a5-l { border-top: 1px solid var(--filet) }
.a5-l-a { display: flex; gap: 12px; padding: 14px 0; text-decoration: none; color: var(--encre) }
.a5-l-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding-right: 4px }
.a5-l-t > b { font: 600 15px/1.3 var(--titres); color: var(--titre) }
.a5-l-t > small { font: 400 13px/1.3 var(--corps); color: var(--encre-2) }
.a5-l-ph { flex: none; width: 88px; display: grid; gap: 4px; align-content: start; padding-bottom: 40px }
.a5-l-ph img { display: block; width: 88px; height: 88px; border-radius: 8px; object-fit: cover; background: var(--surface-2) }
.a5-l-ph small { font: 400 13px/1.25 var(--corps); color: var(--encre-2) }
.a5-l-sans { padding-right: 48px }
.a5-l .a5-coeur { top: 14px; right: 0; width: 36px; height: 36px; box-shadow: var(--ombre-puce) }
.a5-l:has(.a5-l-ph) .a5-coeur { top: auto; bottom: 14px }
.a5-plan-c { position: relative; display: block; width: 88px; height: 88px; border-radius: 8px; overflow: hidden }
.a5-plan-c img { border-radius: 0 }
.a5-rep { position: absolute; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; transform: translate(-50%, -50%);
  box-shadow: 0 0 0 2px #ffffff, 0 1px 3px rgb(21 59 101 / .3); color: #ffffff }
.a5-rep .ic { width: 12px; height: 12px; stroke-width: 2.2 }
.a5-rep-g { background: var(--marque) }
.a5-rep-c { background: var(--e) }
.l5-plus { margin-top: 8px; text-align: center }   /* MARQUE_LOT702 — un <a> sur les territoires : le centrage du <button> */
.l5-plus[hidden] { display: none }

/* sous le trajet : les essentiels en pastilles (les fonds pleins des verdicts : --e, --m, --h), puis les sorties faciles et leur
   jauge à quatre crans (1, 5, 10, 20 : les paliers du réglage des critères) */
.l5-aut { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 6px }
.l5-qs { display: inline-flex; gap: 4px }
.l5-q { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50% }
.l5-q .ic { width: 14px; height: 14px }
.l5-q-e { background: var(--e); color: #ffffff }
.l5-q-m { background: var(--m); color: #ffffff }
.l5-q-h { background: var(--h); color: #ffffff }
.l5-q-u { background: var(--surface-2); color: var(--encre-2) }
.l5-so { display: inline-flex; align-items: center; gap: 6px; font: 400 13px/1.3 var(--corps); color: var(--encre-2) }
.l5-so > .ic { width: 16px; height: 16px; flex: none; color: var(--titre) }
.l5-so b { font-weight: 600; color: var(--titre) }
.l5-jauge { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px }
.l5-jauge i { width: 4px; background: var(--filet) }
.l5-jauge i:nth-child(1) { height: 5px }
.l5-jauge i:nth-child(2) { height: 8px }
.l5-jauge i:nth-child(3) { height: 11px }
.l5-jauge i:nth-child(4) { height: 14px }
.l5-jauge i.l5-on { background: var(--marque) }

/* un choix difficile (un favori, un camping cherché par son nom) : ses campings faciles à côté, sur l'aplat pâle */
.a5-alts { margin: 2px 0 14px; padding: 12px 14px 2px; border-radius: 8px; background: var(--surface-2) }
.a5-alts-t { display: flex; align-items: center; gap: 6px; font: 600 14px/1.3 var(--corps); color: var(--titre) }
.a5-alts-t .ic { width: 16px; height: 16px; color: var(--te) }
.a5-alts .a5-liste { margin-top: 2px }
.a5-alts .a5-l + .a5-l { border-top-color: #ffffff }
.l5-dit { margin-top: 8px; font: 400 14px/1.4 var(--corps); color: var(--encre-2) }
.l5-dit a { color: var(--titre); font-weight: 500 }

/* les critères assouplis */
.a5-as-l { list-style: none; display: grid; gap: 8px; margin: 14px 0 0; padding: 0 }
.a5-as { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 14px; border: 0; border-radius: 8px;
  background: #ffffff; box-shadow: var(--ombre-puce); color: var(--encre); font: inherit; text-align: left; cursor: pointer }
.a5-as > .ic { width: 20px; height: 20px; flex: none; color: var(--titre) }
.a5-as > span { flex: 1; min-width: 0; display: grid; gap: 2px; font: 500 15px/1.3 var(--corps); color: var(--titre) }
.a5-as small { font: 400 13px/1.3 var(--corps); color: var(--encre-2) }
.a5-as > b { flex: none; padding: 8px 10px; border-radius: 999px; background: var(--surface-2); color: var(--te); font: 600 14px/1 var(--corps) }

/* la légende des deux niveaux d'effort */
.a5-leg { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; font: 400 13px/1.35 var(--corps); color: var(--encre-2) }
.a5-leg > span { display: inline-flex; align-items: center; gap: 6px }
.a5-pt { width: 10px; height: 10px; border-radius: 50%; flex: none }
.a5-pt-1 { background: var(--m) }
.a5-pt-2 { background: var(--h) }
.a5-sec[hidden] { display: none }

/* la carte, en bouton flottant ; z-index 50, l'étage de la barre d'action (docs/CONVENTIONS.md) */
.l5-carte { position: fixed; left: 50%; bottom: 16px; z-index: 50; transform: translateX(-50%); display: inline-flex; align-items: center;
  gap: 8px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--marque); color: #ffffff;
  box-shadow: 0 4px 14px rgb(21 59 101 / .28); font: 600 15px/1 var(--corps); cursor: pointer }
.l5-carte .ic { width: 18px; height: 18px }
.l5-carte[hidden] { display: none }
main.l5 { padding-bottom: 48px }
/* la carte des campings : ouverte par le bouton, en tête de la page ; ses calques restent dans son bloc (z-index 0, CLAUDE.md § 6) */
.l5-carte-boite { position: relative; z-index: 0; height: 440px; border-radius: 8px; overflow: hidden; background: var(--surface-2) }
.l5-carte-boite .l5-attente { padding: 16px; font: 400 14px/1.4 var(--corps); color: var(--encre-2) }
.l5-repere { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-2);
  box-shadow: 0 0 0 2px #ffffff, 0 1px 3px rgb(21 59 101 / .3) }
.l5-repere-e { background: var(--e) }
.l5-repere-m { background: var(--m) }
.l5-repere-h { background: var(--h) }
.l5-bulle { font: 400 14px/1.4 var(--corps) }
.l5-bulle a { color: var(--titre); font-weight: 600 }

/* la feuille des critères : la feuille des dates de l'accueil (a5-feuille), en groupes */
.l5-crit .a5-feuille-f { max-height: 86vh; overflow-y: auto }
.l5-g { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--filet) }
.l5-g[hidden] { display: none }   /* MARQUE_LOT698 — le groupe du trajet de la feuille, sans départ (la règle du 298) */
.l5-g h3 { display: flex; align-items: center; gap: 8px; font: 600 15px/1.3 var(--titres); color: var(--titre) }
.l5-g h3 .ic { width: 18px; height: 18px }
.l5-r { display: grid; gap: 6px }
.l5-crit label.l5-r { font: inherit; color: inherit }
.l5-r > span { display: flex; justify-content: space-between; gap: 8px; font: 500 14px/1.3 var(--corps); color: var(--encre) }
.l5-r > span b { font-weight: 600; color: var(--titre) }
.l5-crit .l5-r input[type="range"] { width: 100%; min-height: 0; padding: 0; border: 0; accent-color: var(--marque) }
.l5-seg { display: flex; flex-wrap: wrap; gap: 8px }
.l5-seg .a5-pu { min-height: 36px; padding: 0 12px }
.l5-seg .a5-pu[aria-pressed="true"] { background: var(--marque); color: #ffffff }
.l5-seg .a5-pu[aria-pressed="true"] b { color: #ffffff }
.l5-crit details summary { min-height: 44px; display: flex; align-items: center; font: 500 14px/1.3 var(--corps); color: var(--titre); cursor: pointer }
.l5-crit details[open] { display: grid; gap: 10px }
.l5-crit-dit { font: 400 13px/1.4 var(--corps); color: var(--encre-2) }
.l5-crit-dit:empty { display: none }
.l5-pied { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--filet) }
.l5-pied .a5-go { margin-top: 0 }

/* MARQUE_LOT673 — la retouche validée le 7/11 (D36, D37 ; docs/maquettes/liste-v15/retouche_liste_7nov.py, CSS) : chaque ligne est une
   carte à ombre ; les rangées « Au bord de la mer » et « 10 sorties et plus » défilent à l'horizontale, leurs cartes à ombre aussi */
.a5-liste > .a5-l { background: var(--surface); border-radius: var(--rv-m); box-shadow: var(--ombre-carte); padding: 0 12px; margin-bottom: 12px }
.a5-liste > .a5-l + .a5-l { border-top: 0 }
.a5-liste > .a5-l .a5-coeur { right: 12px }
.r5-rang { list-style: none; margin: 8px -16px 20px; padding: 0 }
.r5-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 16px }
.r5-h h2 { display: flex; align-items: center; gap: 8px; font: 600 var(--fs-sec)/1.25 var(--titres); color: var(--titre) }
.r5-h h2 .ic { width: 18px; height: 18px }
.r5-h a { font: 600 var(--fs-sec2)/1.4 var(--corps); color: var(--titre); white-space: nowrap }
.r5-l { list-style: none; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0; padding: 12px 16px 16px;
  scrollbar-width: none }
.r5-l::-webkit-scrollbar { display: none }
.r5-c { flex: 0 0 272px; scroll-snap-align: start; background: var(--surface); border-radius: var(--rv-m); box-shadow: var(--ombre-carte) }
.r5-c > a { display: flex; gap: 12px; padding: 12px; text-decoration: none; color: var(--encre) }
.r5-c .a5-l-ph { padding-bottom: 0 }
.r5-t { display: grid; gap: 4px; align-content: start; min-width: 0 }
.r5-t > b { font: 600 var(--fs-carte)/1.3 var(--titres); color: var(--titre); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.r5-t > small { font: 400 var(--fs-sec2)/1.3 var(--corps); color: var(--encre-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.r5-m { font: 400 var(--fs-sec2)/1.35 var(--corps) }

@media (min-width: 760px) {
  .l5-tete { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center }
}

/* MARQUE_LOT677B — la page d'une gare : le Plan IGN en tête (recuperer_plans_gares.py), la gare et ses campings posés par la page
   (aucun trait, aucune distance) ; le lien « Partir de cette gare » dans la phrase de la gare */
.l5-gh { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-2) }
.l5-gh img { display: block; width: 100%; height: 100%; object-fit: cover }
.l5-gh figcaption { position: absolute; right: 8px; bottom: 8px; padding: 2px 6px; border-radius: 4px; background: #ffffff;
  font: 400 13px/1.3 var(--corps); color: var(--encre-2) }
.l5-gh-c { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--titre);
  box-shadow: 0 0 0 2px #ffffff, 0 1px 3px rgb(0 0 0 / .3) }
.l5-gh-g { position: absolute; display: grid; place-items: center; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%;
  background: #ffffff; color: var(--titre); box-shadow: inset 0 0 0 2px var(--titre), 0 1px 3px rgb(0 0 0 / .3) }
.l5-gh-g .ic { width: 18px; height: 18px }
main.l5 .l5-etat a { color: var(--titre); font-weight: 600; text-decoration: underline; text-underline-offset: 3px }

/* MARQUE_LOT677B — /depuis/ et /gares/ : une gare par ligne, le dépliant « Voir les N gares », la recherche (index-v15.js) */
.l5-ix { list-style: none; display: grid; gap: 8px; margin: 14px 0 0; padding: 0 }
.l5-ix[hidden] { display: none }
.l5-ix a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 14px; border-radius: 10px; background: #ffffff;
  box-shadow: var(--ombre-carte); text-decoration: none; color: var(--titre); font: 500 15px/1.3 var(--corps) }
.l5-ix span { flex: 1; min-width: 0 }
.l5-ix small { flex: none; font: 400 13px/1.3 var(--corps); color: var(--encre-2) }
.l5-ix .ic { flex: none; width: 18px; height: 18px }
.l5-ix-plus > summary { list-style: none; cursor: pointer }
.l5-ix-plus > summary::-webkit-details-marker { display: none }
.l5-ix-plus[open] > summary { display: none }
main.l5 .l5-ix-dit { margin: 12px 0 0; font: 400 14px/1.4 var(--corps); color: var(--encre-2) }
.l5-ix-dit[hidden] { display: none }