/* ==========================================================
   Fayngo : pages de liste et outils dans le monde Atlas (étape 7)
   Destinations, Activités, Hébergements, Restaurants, Bons plans, Carte, Favoris, Planificateur (FR / EN).
   Chargé après style.css et city.css (base obsidienne, ivoire, safran) ; il ne touche que body.lists.
   Les composants gardent leur structure (js/main.js, js/pages/*.js) : seuls leurs matériaux changent.
   Angles droits, aplats sans ombre, émeraude pour « vérifié », safran pour l'action, cuivre en grand seulement.
   ========================================================== */

body.lists ::selection { background: var(--c-saffron); color: var(--c-obsidian); }
body.lists .muted, body.lists .lead { color: var(--c-ivory-2); }
body.lists h2 { font-size: clamp(2rem, 3.8vw, 3.25rem); }
body.lists a:not([class]) { text-decoration-color: rgba(242, 231, 213, .45); }
body.lists .link-arrow { color: var(--c-saffron); }

/* ---------- Ouverture : la photo, le titre en grand, le texte posé dessous ---------- */
body.lists .page-hero { min-height: min(64svh, 640px); display: flex; align-items: flex-end; padding-block: calc(var(--header-h) + 72px) clamp(40px, 6vw, 72px); color: var(--c-ivory); }
body.lists .page-hero::after { background: linear-gradient(180deg, rgba(11, 11, 13, .45) 0%, rgba(11, 11, 13, .3) 35%, rgba(11, 11, 13, .82) 75%, rgba(11, 11, 13, .95) 100%); }
body.lists .page-hero .container { width: 100%; }
body.lists .page-hero h1 { font-size: clamp(2.75rem, 7.4vw, 6rem); line-height: .94; letter-spacing: -.035em; max-width: 14ch; margin: 0; }
body.lists .page-hero p { margin: 18px 0 0; max-width: 52ch; font-size: 1.1875rem; line-height: 1.5; opacity: 1; }
body.lists .page-hero--plain { min-height: min(48svh, 480px); background: var(--c-surface-1); }
body.lists .page-hero--plain::before, body.lists .page-hero--plain::after { display: none; }

/* ---------- Sections ---------- */
body.lists .section { padding-block: clamp(56px, 7vw, 104px); }
body.lists .section--sand { background: var(--c-surface-1); }
body.lists .section-head { margin-bottom: 32px; }

/* ---------- Filtres et recherche ---------- */
/* 16 px entre les filtres et la recherche, 12 px avant le nombre de résultats */
body.lists .toolbar { margin-bottom: 12px; gap: 16px; }
body.lists .chip {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 0; border-radius: 0;
  background: var(--c-surface-1); color: var(--c-ivory); font: 500 .9375rem/1 var(--font-text);
  transition: background .2s ease, color .2s ease;
}
body.lists .chip:hover { background: var(--c-surface-2); }
/* Rangées de filtres qui défilent : sans barre (le geste suffit) ; liste de la carte : barre fine aux couleurs du monde */
body.lists .filters__chips, body.lists #tabs { scrollbar-width: none; }
body.lists .filters__chips::-webkit-scrollbar, body.lists #tabs::-webkit-scrollbar { display: none; }
body.lists .map-side, body.lists .table-wrap { scrollbar-width: thin; scrollbar-color: var(--c-ivory-2) transparent; }
body.lists .chip[aria-pressed="true"] { background: var(--c-saffron); color: var(--c-obsidian); font-weight: 600; }
body.lists .filter-select { font-weight: 500; color: var(--c-ivory-2); }
body.lists .input, body.lists .select, body.lists .textarea {
  border: 1px solid rgba(242, 231, 213, .28); border-radius: 0; background-color: var(--c-surface-1); color: var(--c-ivory);
}
body.lists .select {
  appearance: none; padding-right: 44px; cursor: pointer;
  background: var(--c-surface-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E3A72F' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px;
}
body.lists .select option { background: var(--c-surface-1); color: var(--c-ivory); }
body.lists .input:hover, body.lists .select:hover, body.lists .textarea:hover { border-color: var(--c-ivory-2); }
body.lists .input:focus, body.lists .select:focus, body.lists .textarea:focus { border-color: var(--c-saffron); box-shadow: 0 0 0 1px var(--c-saffron); }
/* Barre de recherche : 52 px de haut, fond sombre, fine bordure dorée */
body.lists .field-search { flex: 1 1 18rem; box-sizing: border-box; max-width: 100%; height: 52px; min-height: 0; gap: 12px; padding: 0 16px; border: 1px solid rgba(227, 167, 47, .6); border-radius: 0; background: var(--c-surface-1); }
/* Téléphone : la barre d’outils passe en colonne ; flex: 1 1 18rem y deviendrait une hauteur de 288 px */
@media (max-width: 600px) { body.lists .toolbar > .field-search { flex: none; width: 100%; } }
body.lists .field-search svg { color: var(--c-saffron); }
body.lists .field-search input { width: 100%; height: 100%; padding: 0; font-size: 16px; line-height: normal; color: var(--c-ivory); }
body.lists .field-search input::placeholder { color: var(--c-ivory-2); opacity: 1; }
body.lists .field-search:focus-within { border-color: var(--c-saffron); box-shadow: 0 0 0 1px var(--c-saffron); }
body.lists .results-count { margin: 0 0 24px; color: var(--c-ivory-2); font-size: .9375rem; }

/* ---------- Fiches ---------- */
body.lists .grid { gap: 8px; }
body.lists .card { background: var(--c-surface-1); border-radius: 0; box-shadow: none; transition: background .25s ease; }
body.lists .card:hover { transform: none; box-shadow: none; background: var(--c-surface-hover); }
body.lists .card__media { background: var(--c-surface-2); }
body.lists .card:hover .card__media img { transform: scale(1.04); }
body.lists .card__badge { border-radius: 0; background: rgba(11, 11, 13, .82); color: var(--c-ivory); }
body.lists .card__illus { border-radius: 0; background: rgba(11, 11, 13, .82); color: var(--c-ivory); }
body.lists .card__body { padding: 20px 22px 22px; }
body.lists .card__meta { order: 1; margin: -2px 0 10px; color: var(--c-ivory-2); font-size: .9375rem; }
body.lists .card__body > h3 { order: 0; }
body.lists .card__body > :not(h3):not(.card__meta) { order: 2; }
body.lists .card__meta svg { color: var(--c-saffron); }
body.lists .card h3 { font-size: 1.5rem; line-height: 1.12; }
body.lists .card h3 a:hover { color: var(--c-saffron); }
body.lists .card p { color: var(--c-ivory-2); font-size: 1rem; line-height: 1.55; }
body.lists .tag { border-radius: 0; background: var(--c-surface-2); color: var(--c-ivory-2); }
body.lists .price { color: var(--c-ivory-2); }
body.lists .verif { border-top-color: var(--c-surface-2); color: var(--c-ivory-2) !important; }
body.lists .verif--ok svg { color: var(--c-emerald-text); }
body.lists .verif--partial svg { color: var(--c-partial); }
body.lists .verif--pending svg { color: var(--c-copper); }
body.lists .verif a { color: var(--c-ivory); }
body.lists .card__links a, body.lists .card__route, body.lists .map-link { color: var(--c-saffron); }
body.lists .tips { border-top-color: var(--c-surface-2); }
body.lists .tips summary { color: var(--c-ivory); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(242, 231, 213, .4); }
body.lists .tips summary:hover { text-decoration-color: currentColor; }
body.lists .tip__kind { color: var(--c-copper); font-size: .8125rem; letter-spacing: 0; text-transform: none; }
body.lists .popup-type { font-size: .75rem; letter-spacing: 0; text-transform: none; }
body.lists .tips li a { color: var(--c-ivory); }
body.lists .tips__note { color: var(--c-ivory-2); font-size: .875rem; }
body.lists .tips-panel .tips { border: 0; border-radius: 0; background: var(--c-surface-1); }
body.lists .tips-panel .tips summary { font-family: var(--font-display); color: var(--c-ivory); }
body.lists .fav-btn { position: absolute; flex: none; background: rgba(11, 11, 13, .78); color: var(--c-ivory); }
body.lists .fav-btn:hover { background: var(--c-obsidian); transform: none; }
body.lists .fav-btn[aria-pressed="true"] { color: var(--c-saffron); }
body.lists .route-panel { border: 0; border-radius: 0; background: var(--c-surface-2); }
/* Grandes fiches photo (destinations) */
body.lists .dest-card { border-radius: 0; box-shadow: none; color: var(--c-ivory); }
body.lists .dest-card::after { background: linear-gradient(180deg, rgba(11, 11, 13, 0) 30%, rgba(11, 11, 13, .88)); }
body.lists .dest-card__body small { letter-spacing: 0; text-transform: none; font-size: .9375rem; color: var(--c-ivory-2); }
body.lists .dest-card__body h3 { font-size: clamp(1.75rem, 2.6vw, 2.25rem); }
body.lists .dest-card:focus-within { outline-color: var(--c-saffron); }
body.lists .empty { border: 1px dashed rgba(242, 231, 213, .3); border-radius: 0; color: var(--c-ivory-2); }
body.lists .empty h3 { color: var(--c-ivory); }

/* Note de bas de liste */
body.lists .note { border-radius: 0; background: var(--c-surface-1); color: var(--c-ivory); font-size: .9375rem; }
body.lists .note svg { color: var(--c-saffron); }
body.lists .map-note { color: var(--c-ivory-2); font-size: .875rem; }
body.lists .map-note a { text-decoration: underline; }

/* Boutons hérités de l'ancien monde : remis aux matériaux Atlas */
body.lists .btn { border-radius: 0; font-family: var(--font-text); min-height: 48px; }
body.lists .btn:hover { transform: none; }
body.lists .btn--primary, body.lists .btn--green { background: var(--c-saffron); color: var(--c-obsidian); }
body.lists .btn--primary:hover, body.lists .btn--green:hover { background: var(--c-saffron-hover); }
body.lists .btn--ghost { border: 1px solid rgba(242, 231, 213, .4); color: var(--c-ivory); }
body.lists .btn--ghost:hover { border-color: var(--c-ivory); }
body.lists .btn--light { background: var(--c-ivory); color: var(--c-obsidian); }

/* ---------- Bons plans et conseils ---------- */
body.lists .info-grid { display: block; border-bottom: 1px solid var(--c-surface-2); }
body.lists .info-card {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 8px clamp(24px, 5vw, 80px); align-items: baseline;
  border: 0; border-top: 1px solid var(--c-surface-2); border-radius: 0; box-shadow: none; background: none; padding: 28px 0 24px;
}
body.lists .info-card > * { grid-column: 2; }
body.lists .info-card > h2, body.lists .info-card > h3 { grid-column: 1; grid-row: 1 / span 4; font-size: clamp(1.625rem, 2.4vw, 2.125rem) !important; line-height: 1.1; margin: 0; }
body.lists .info-card .ico { display: none; }
body.lists .info-card ul { padding-left: 18px; display: grid; gap: 6px; }
body.lists .info-card p { margin: 0; }
body.lists .info-card p, body.lists .info-card li { color: var(--c-ivory); font-size: 1rem; }
body.lists .info-card strong { color: var(--c-ivory); }
body.lists .free-list strong { color: var(--c-ivory); }
body.lists .free-list a { color: var(--c-ivory); }
body.lists .emergency { gap: 8px; }
body.lists .emergency div { border: 0; border-radius: 0; background: var(--c-obsidian); text-align: left; padding: 22px 20px; }
body.lists .emergency strong { font: 600 3rem/1 var(--font-display); color: var(--c-saffron); margin-bottom: 8px; font-variant-numeric: tabular-nums; }
body.lists details.faq { border: 0; border-top: 1px solid var(--c-surface-2); border-radius: 0; background: none; padding: 4px 0; }
body.lists details.faq + details.faq { margin-top: 0; }
body.lists details.faq:last-of-type { border-bottom: 1px solid var(--c-surface-2); }
body.lists details.faq summary { min-height: 56px; align-items: center; font: 600 1.25rem/1.25 var(--font-display); }
body.lists details.faq summary::after { color: var(--c-saffron); }
body.lists details.faq p { color: var(--c-ivory-2); max-width: 68ch; }
body.lists .center { text-align: left; }
body.lists table { color: var(--c-ivory); }
body.lists .table-wrap { background: var(--c-surface-1); border-radius: 0; box-shadow: none; }
body.lists th, body.lists td { border-bottom-color: var(--c-surface-2); }
body.lists th { background: none; color: var(--c-ivory-2); letter-spacing: 0; }

/* ---------- Planificateur ---------- */
body.lists .planner { gap: clamp(24px, 4vw, 48px); }
body.lists .panel { background: var(--c-surface-1); border-radius: 0; box-shadow: none; }
body.lists .panel h2 { font-size: 1.75rem !important; }
body.lists .form-group > label, body.lists .form-group > .label { font-weight: 500; color: var(--c-ivory); }
body.lists .range-row input { accent-color: var(--c-saffron); }
body.lists .range-row output { font: 600 1.25rem/1 var(--font-display); color: var(--c-saffron); font-variant-numeric: tabular-nums; }
body.lists .check-grid span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 0; border-radius: 0; background: var(--c-surface-2); color: var(--c-ivory); }
body.lists .check-grid label:hover span { background: var(--c-surface-3); }
body.lists .check-grid input:checked + span { background: var(--c-saffron); color: var(--c-obsidian); font-weight: 600; }
body.lists .check-grid input:focus-visible + span { outline-color: var(--c-ivory); }
body.lists .timeline { gap: 8px; }
body.lists .day { border-radius: 0; box-shadow: none; background: var(--c-surface-1); }
body.lists .day__num { display: inline; font: inherit; letter-spacing: inherit; text-transform: none; color: var(--c-copper); }
body.lists .day__body h3 { font-size: 1.625rem; }
body.lists .day__body ul { color: var(--c-ivory); font-size: 1rem; }
body.lists .day__transfer { color: var(--c-ivory-2); font-weight: 500; font-variant-numeric: tabular-nums; }
body.lists .trip-summary .tag { background: var(--c-surface-1); color: var(--c-ivory); }

/* ---------- Carte : la liste à gauche, le fond OpenStreetMap passé au crépuscule ---------- */
/* position: relative : les libellés masqués (.visually-hidden, en absolu) restent dans la liste qui défile au lieu d'allonger la page */
body.lists .map-side { position: relative; background: var(--c-surface-1); border-right: 1px solid var(--c-surface-2); }
body.lists .map-side h1 { font-size: clamp(2.25rem, 3.4vw, 3rem); line-height: 1; letter-spacing: -.03em; margin: 8px 0 12px; }
body.lists #map { background: var(--c-obsidian); }
/* Les tuiles OSM, inversées puis teintées : mêmes données, lisibles sur fond sombre */
body.lists .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.35) sepia(.18); }
body.lists .leaflet-container { font-family: var(--font-text); background: var(--c-obsidian); }
body.lists .leaflet-control-zoom a { background: var(--c-surface-1); color: var(--c-ivory); border-color: var(--c-surface-2); }
body.lists .leaflet-control-zoom a:hover { background: var(--c-surface-2); }
body.lists .leaflet-control-attribution { background: rgba(11, 11, 13, .8) !important; color: var(--c-ivory-2); }
body.lists .leaflet-control-attribution a { color: var(--c-ivory); }
body.lists .leaflet-popup-content-wrapper, body.lists .leaflet-popup-tip { background: var(--c-surface-1); color: var(--c-ivory); border-radius: 0 !important; box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .6); }
body.lists .leaflet-container a.leaflet-popup-close-button { color: var(--c-ivory); }
body.lists .popup strong { font-family: var(--font-display); }
body.lists .popup p { color: var(--c-ivory-2); }
body.lists .pin { border-color: var(--c-obsidian); box-shadow: 0 3px 8px rgba(0, 0, 0, .55); }
body.lists .map-item { border-radius: 0; color: var(--c-ivory); }
body.lists .map-item img { border-radius: 0; }
body.lists .map-item small { color: var(--c-ivory-2); }
body.lists .map-item:hover, body.lists .map-item.is-active { background: var(--c-surface-2); border-color: transparent; }
body.lists .map-item.is-active strong { color: var(--c-saffron); }
body.lists .no-coords { color: var(--c-copper) !important; }
body.lists .type-filters .chip[aria-pressed="true"] { background: var(--c-ivory); color: var(--c-obsidian); box-shadow: none; }
body.lists .type-filters .chip[aria-pressed="false"] { opacity: 1; color: var(--c-ivory-2); }
/* La pastille de couleur reste lisible sur la puce ivoire (Activités : pastille ivoire) */
body.lists .type-filters .dot, body.lists .map-item .dot { box-shadow: 0 0 0 1.5px var(--c-obsidian), 0 0 0 2.5px rgba(242, 231, 213, .5); }
body.lists .map-fallback { border-radius: 0; background: var(--c-surface-1); color: var(--c-ivory); }
body.lists .map-fallback svg { color: var(--c-saffron); }

@media (max-width: 759px) {
  body.lists .page-hero { min-height: 56svh; padding-bottom: 36px; }
  body.lists .page-hero--plain { min-height: 0; padding-top: calc(var(--header-h) + 32px); }
  /* Favoris : les filtres en une rangée qui défile, pour garder l'état vide et son bouton au premier écran */
  body.lists #tabs { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; }
  body.lists #tabs .chip { flex: none; width: auto; }
  body.lists .info-card { grid-template-columns: minmax(0, 1fr); }
  body.lists .info-card > h2, body.lists .info-card > h3 { grid-row: auto; margin-bottom: 8px; }
  body.lists .info-card > * { grid-column: 1; }
  body.lists .page-hero p { font-size: 1.0625rem; }
  body.lists .card h3 { font-size: 1.375rem; }
}
/* FAQ : alignée sur la grille de la page ; seule la mesure du texte reste étroite */
body.lists section[aria-labelledby="h-faq"] .container { max-width: var(--container) !important; }
body.lists details.faq, body.lists section[aria-labelledby="h-faq"] h2 { max-width: 820px; }
/* Contraste élevé (couleurs forcées) : filtres et choix actifs restent repérables */
@media (forced-colors: active) {
  body.lists .chip[aria-pressed="true"], body.lists .check-grid input:checked + span { outline: 3px solid Highlight; outline-offset: -3px; text-decoration: underline; }
}

/* Planificateur : curseur et liens des journées à 44 px */
body.lists .range-row input[type="range"] { height: 44px; }
body.lists .day__body li a { display: inline-block; padding-block: 10px; }
/* ---------- Modes de déplacement (panneau d'itinéraire de la carte) ----------
   Non choisi : vert très sombre, texte et icône dorés, bordure discrète (3,2:1) ; choisi : vert émeraude, texte blanc (5,5:1).
   Même hauteur (48 px), même arrondi, icône de 20 px alignée sur le texte ; le bouton radio reste lu par les lecteurs d'écran. */
body.lists .route-modes label { position: relative; gap: 8px; min-height: 48px; padding: 0 8px; border: 1px solid rgba(232, 201, 120, .45); border-radius: 0; background: #102A25; color: #E8C978; font-size: .9375rem; white-space: nowrap; transition: background-color .15s ease, border-color .15s ease; }
body.lists .route-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.lists .route-modes label svg { width: 20px; height: 20px; flex: none; }
body.lists .route-modes input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
body.lists .route-modes label:hover { background: #17392F; border-color: #E8C978; }
body.lists .route-modes label:has(input:checked) { background: #047857; border-color: #047857; color: #FFFFFF; box-shadow: none; }
/* Coche du mode choisi (la sélection ne dépend pas que de la couleur), dans le coin, sans élargir le bouton */
body.lists .route-modes label:has(input:checked)::after { content: ""; position: absolute; top: 5px; right: 5px; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%273.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M4 12.5l5 5L20 6.5%27/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%273.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M4 12.5l5 5L20 6.5%27/%3E%3C/svg%3E") center / contain no-repeat; }
@media (forced-colors: active) { body.lists .route-modes label:has(input:checked)::after { background: CanvasText; } }
body.lists .route-modes label:has(input:focus-visible) { outline: 3px solid #E8C978; outline-offset: 2px; }
body.lists .route-modes label:has(input:disabled) { opacity: .45; cursor: not-allowed; }
@media (forced-colors: active) { body.lists .route-modes label:has(input:checked) { outline: 3px solid Highlight; } }