/* ==========================================================================
   AO Craponne · prototype v2 — blocs
   Une famille de classes par bloc de la bibliothèque Figma (section « Blocs » 92:3) et des blocs
   V2 de 07-pages-ux-v2 §1. Toutes les couleurs passent par les jetons (Couleur, Saison, modes).
   ========================================================================== */

/* ---------- Repli mobile commun (pied, fil d'Ariane) : core.js pose data-replie ---------- */
@media (max-width: 1023.98px) { [data-repli][data-replie] { display: none; } }

/* ======================= D · Navigation ======================= */

/* ---------- En-tête : barre du haut (390) / en-tête desktop ---------- */
.entete { position: relative; z-index: 30; background: var(--couleur-fond); border-bottom: var(--trait-filet) solid var(--couleur-filet); }
.entete__barre { display: flex; align-items: center; gap: var(--espace-16); min-height: 64px; padding-block: var(--espace-8); }
.entete__logo { display: inline-flex; align-items: center; min-height: var(--cible-minimum); flex: none; color: var(--palette-ville-petrole); }
.logo-ville { width: 130px; height: auto; aspect-ratio: 316 / 76; }
.entete__logo--eole img { width: 82px; height: 40px; }
.entete__nav, .entete__outils { display: none; }
.etat-permanent { color: var(--couleur-texte); text-decoration: none; }
.etat-permanent:hover .etat__mot { text-decoration: underline; text-underline-offset: 0.2em; }
.etat-permanent--barre { margin-left: auto; display: flex; align-items: center; min-height: var(--cible-minimum); max-width: 196px; }
.etat-permanent--barre .etat { font-size: var(--taille-meta); line-height: var(--interlignage-meta); }
.etat-permanent--barre .etat__textes { display: flex; flex-direction: column; }
.etat-permanent--barre .etat__repere { margin-top: 6px; }

@media (min-width: 1024px) {
  .entete { position: sticky; top: 0; transition: transform calc(var(--menu-fermeture) * 1ms) var(--souffle-courbe); }
  .entete[data-masque] { transform: translateY(-100%); }
  .etat-permanent--barre { display: none; }
  .entete__barre { flex-wrap: wrap; column-gap: var(--espace-24); row-gap: 0; padding-block: 0; }
  .entete__logo { min-height: 56px; }
  .entete__nav { display: block; order: 3; flex: 1 0 100%; border-top: var(--trait-filet) solid var(--couleur-filet); }
  .entete__outils { display: flex; align-items: center; gap: var(--espace-4); margin-left: auto; margin-right: -10px; }
  .entete__rubriques { display: flex; flex-wrap: wrap; gap: 0 var(--espace-24); }
  .entete__rubrique {
    display: inline-flex; align-items: center; min-height: 48px; position: relative;
    font-size: var(--taille-libelle); line-height: var(--interlignage-libelle); font-weight: 400; color: var(--couleur-texte);
  }
  .entete__rubrique::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; }
  .entete__rubrique:hover { color: var(--couleur-action); }
  .entete__rubrique[data-courante] { font-weight: 500; }
  .entete__rubrique[data-courante]::after { background: var(--couleur-texte); height: 2px; }
  .entete__rubrique[aria-expanded="true"]::after { background: var(--couleur-action); height: 3px; }
}
@media (min-width: 1280px) {
  :root:not([data-text]) .entete__barre { flex-wrap: nowrap; min-height: 64px; }
  :root:not([data-text]) .entete__nav { order: 0; flex: 0 1 auto; border-top: 0; margin-left: var(--espace-16); }
  :root:not([data-text]) .entete__rubrique { min-height: 64px; }
}
.entete__outil {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--espace-8);
  min-width: var(--cible-minimum); min-height: var(--cible-minimum); padding: 0 10px;
  font-size: var(--taille-libelle); line-height: var(--interlignage-libelle); font-weight: 500; color: var(--couleur-texte);
}
.entete__outil:hover { color: var(--couleur-action); }
.entete__affichage-libelle { display: none; }
[data-site="ville"] .entete__outil--affichage .infobulle { display: block; }
@media (min-width: 1440px) {
  [data-site="ville"] .entete__affichage-libelle { display: inline; }
  [data-site="ville"] .entete__outil--affichage .infobulle { display: none; }
}
.infobulle {
  display: none; position: absolute; top: calc(100% + 4px); right: 0; z-index: 5; white-space: nowrap;
  padding: var(--espace-4) var(--espace-8); background: var(--couleur-pilule-fond); color: var(--couleur-pilule-texte);
  font-size: var(--taille-meta); line-height: var(--interlignage-meta); font-weight: 400;
  opacity: 0; pointer-events: none;
}
.entete__outil:hover .infobulle, .entete__outil:focus-visible .infobulle { opacity: 1; }
:root[data-infobulle-masquee] .infobulle { opacity: 0 !important; }
.entete__ville { display: none; }
@media (min-width: 1440px) {
  .entete__ville { display: inline-flex; align-items: center; min-height: var(--cible-minimum); padding-inline: 10px; font-size: var(--taille-libelle); text-decoration: underline; text-underline-offset: 0.2em; }
}
.entete__billetterie { min-height: var(--cible-minimum); margin-left: var(--espace-8); }

/* ---------- Méga-panneau (desktop, au clic) ---------- */
.mega { display: none; }
@media (min-width: 1024px) {
  .mega:not([hidden]) { display: block; }
  .mega:not(.mega--statique) {
    position: absolute; left: 0; right: 0; top: 100%;
    max-height: calc(100vh - var(--haut-entete)); overflow-y: auto;
  }
  .mega { background: var(--couleur-fond); border-bottom: var(--trait-filet) solid var(--couleur-filet); }
  .mega__grille { padding-block: var(--espace-40) var(--espace-64); row-gap: var(--espace-24); }
  .mega__intro { display: flex; flex-direction: column; gap: var(--espace-16); }
  .mega__sous-titre { margin-top: var(--espace-8); color: var(--couleur-texte-secondaire); }
  .mega__demandees { display: flex; flex-direction: column; gap: var(--espace-8); }
  .mega__entrees { display: flex; flex-direction: column; gap: var(--espace-16); }
  .mega__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--grille-gouttiere); }
  .mega__entree { display: flex; flex-direction: column; gap: var(--espace-4); min-height: 48px; padding-block: var(--espace-16); border-top: var(--trait-filet) solid var(--couleur-filet); text-decoration: none; }
  .mega__entree:hover .t-titre-ligne { color: var(--couleur-action); text-decoration: underline; text-underline-offset: 0.18em; }
  .mega__droite { display: flex; flex-direction: column; gap: var(--espace-8); }
  .mega__acces-lien { display: flex; align-items: center; gap: var(--espace-16); min-height: var(--cible-minimum); text-decoration: none; font-size: var(--taille-libelle); line-height: var(--interlignage-libelle); }
  .mega__acces-lien:hover span { text-decoration: underline; text-underline-offset: 0.18em; }
}

/* ---------- Rangée de situation (≥ 1 024) : fil c1–9 · état c10–12 ---------- */
.situation .etat-permanent--situation { display: none; }
.situation--accueil { display: none; }
@media (min-width: 1024px) {
  .situation { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grille-gouttiere); align-items: center; min-height: 48px; border-bottom: var(--trait-filet) solid var(--couleur-filet); }
  .situation--accueil { display: grid; border-bottom: 0; }
  .situation > .fil { grid-column: 1 / 10; }
  .situation .etat-permanent--situation { display: inline-flex; grid-column: 10 / 13; justify-self: end; align-items: center; min-height: var(--cible-minimum); }
  .etat-permanent--situation .etat { font-size: var(--taille-meta); line-height: var(--interlignage-meta); }
  .etat-permanent--situation .etat__repere { width: 12px; height: 12px; }
  .etat-permanent--situation .etat__precision { color: var(--couleur-texte-secondaire); }   /* cadres : la précision en gris, le mot en encre */
}

/* ---------- Fil d'Ariane ---------- */
.fil { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--espace-8); min-height: var(--cible-minimum); font-size: var(--taille-libelle); line-height: var(--interlignage-libelle); }
.fil a { display: inline-flex; align-items: center; min-height: var(--cible-minimum); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
/* parent (390) : chevron 24 du sprite (chevron-gauche) + libellé, sans soulignement (cadres Figma) ; le soulignement revient au survol */
.fil a.fil__parent { gap: var(--espace-4); text-decoration: none; }
.fil a.fil__parent:hover { text-decoration: underline; }
.fil__parent::before {
  content: ""; flex: 0 0 24px; width: 24px; height: 24px; margin-left: -6px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") center / 24px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") center / 24px no-repeat;
}
.fil__plus { min-width: var(--cible-minimum); min-height: var(--cible-minimum); font-weight: 500; }
.fil__liste { display: flex; flex-wrap: wrap; flex-basis: 100%; gap: 0 var(--espace-8); }
.fil__liste li { display: inline-flex; align-items: center; gap: var(--espace-8); }
.fil__liste li + li::before { content: "›" / ""; color: var(--couleur-texte-secondaire); }
.fil [aria-current="page"] { font-weight: 500; }
.fil__ellipse { display: none !important; }
@media (min-width: 1024px) {
  .fil .fil__parent, .fil .fil__plus { display: none; }
  .fil__liste { flex-basis: auto; }
  .fil--replie .fil__milieu { display: none !important; }
  .fil--replie .fil__ellipse { display: inline-flex !important; }
  .fil__deplier { min-width: var(--cible-minimum); min-height: var(--cible-minimum); font-weight: 500; }
}

/* ---------- Pilule (< 1 024) et son fondu (y 756 → 844 à 390 × 844) ---------- */
.pilule-zone {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  padding-top: var(--espace-16); padding-bottom: calc(var(--espace-16) + env(safe-area-inset-bottom, 0px));
  padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px);
  pointer-events: none;
}
.pilule-zone::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, transparent, var(--couleur-fond) var(--espace-16));
}
.pilule-zone[data-sur-pied]::before { background: linear-gradient(to bottom, transparent, var(--couleur-pied-fond) var(--espace-16)); }
.pilule {
  pointer-events: auto; position: relative;
  margin-inline: auto; width: max-content; max-width: calc(100% - 12px); min-height: 56px; box-sizing: border-box;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--espace-8); padding: 6px;
  border-radius: var(--rayon-pilule); background: var(--couleur-pilule-fond); color: var(--couleur-pilule-texte);
  box-shadow: 0 8px 24px rgb(22 24 26 / 0.12);
  --couleur-focus-interieur: var(--couleur-pilule-texte); --couleur-focus-exterieur: var(--couleur-pilule-fond);
}
.pilule__bouton, .pilule__billetterie {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--espace-8);
  height: var(--cible-minimum); min-width: var(--cible-minimum); border-radius: 22px; white-space: nowrap;
  font-size: var(--taille-libelle); line-height: var(--interlignage-libelle); font-weight: 500; color: inherit; text-decoration: none;
}
.pilule__bouton--menu { padding: 0 16px 0 12px; }
.pilule__billetterie { padding: 0 16px 0 12px; background: var(--couleur-action); color: var(--couleur-action-texte); }
.pilule__court { display: none; }
.pilule--fermer { box-shadow: none; }
@media (max-width: 363.98px) {
  [data-site="eole"] .pilule__rechercher { display: none; }
  .pilule__long { display: none; }
  .pilule__court { display: inline; }
}
@media (min-width: 1024px) { .pilule-zone { display: none; } }
@media (max-height: 479.98px) and (max-width: 1023.98px) {
  .pilule-zone { position: static; padding-block: var(--espace-8); }
  .pilule-zone::before { display: none; }
}

/* ---------- Panneau menu (<dialog> modal, bas d'écran) ---------- */
.panneau-menu {
  position: fixed; inset: auto 0 0 0; margin: 0; padding: 0; border: 0;
  width: 100%; max-width: 100%; height: calc(100dvh - 24px); max-height: none;
  background: var(--couleur-fond); color: var(--couleur-texte); overflow: hidden;
}
.panneau-menu[open] { display: flex; flex-direction: column; }
.panneau-menu::backdrop { background: rgb(13 13 14 / 0.4); }
.panneau-menu__bande { flex: none; height: 24px; display: grid; place-items: center; cursor: pointer; }
.panneau-menu__bande span { width: 40px; height: 4px; border-radius: 2px; background: var(--couleur-filet); }
.panneau-menu__corps { flex: 1; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: var(--espace-16); padding-bottom: var(--espace-24); }
.panneau-menu__titre { min-height: 56px; display: flex; align-items: center; }
.etat-permanent--menu { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--espace-16); min-height: 48px; border-block: var(--trait-filet) solid var(--couleur-filet); }
.etat-permanent--menu .etat { font-size: var(--taille-meta); line-height: var(--interlignage-meta); }
.panneau-menu__rubriques { border-top: var(--trait-filet) solid var(--couleur-filet); }
.panneau-menu__item { border-bottom: var(--trait-filet) solid var(--couleur-filet); }
.panneau-menu__rubrique {
  display: grid; grid-template-columns: minmax(0, 1fr) 24px; align-items: center; column-gap: var(--espace-16);
  width: 100%; min-height: 64px; padding-block: var(--espace-8); text-align: left;
}
.panneau-menu__rubrique .t-meta { grid-column: 1; }
.panneau-menu__chevron { grid-column: 2; grid-row: 1 / 3; transition: transform calc(var(--souffle-duree) * 1ms) var(--souffle-courbe); }
.panneau-menu__rubrique[aria-expanded="true"] .panneau-menu__chevron { transform: rotate(180deg); }
.panneau-menu__entrees { padding-bottom: var(--espace-16); }
.panneau-menu__sous-titre { margin-top: var(--espace-16); color: var(--couleur-texte-secondaire); }
.panneau-menu__acces .ico { color: var(--couleur-texte); }
.panneau-menu__barre { flex: none; padding: var(--espace-16) 0 calc(var(--espace-16) + env(safe-area-inset-bottom, 0px)); border-top: var(--trait-filet) solid var(--couleur-filet); background: var(--couleur-fond); }

/* ---------- Recherche : champ souligné, champ du héros, dialogue ---------- */
.recherche { display: flex; flex-direction: column; gap: var(--espace-4); position: relative; }
.recherche__ligne { display: flex; align-items: center; gap: var(--espace-8); border-bottom: var(--trait-forme) solid var(--couleur-texte); }
.recherche__champ {
  flex: 1; min-width: 0; min-height: 48px; padding: 0; border: 0; border-radius: 0; background: transparent;
  font-size: var(--taille-texte); line-height: var(--interlignage-texte); color: var(--couleur-texte);
  -webkit-appearance: none; appearance: none;
}
.recherche__champ::placeholder { color: var(--couleur-texte-secondaire); opacity: 1; }
.recherche__champ::-webkit-search-cancel-button { display: none; }
.recherche__bouton { display: inline-grid; place-items: center; width: var(--cible-minimum); height: var(--cible-minimum); flex: none; color: var(--couleur-texte); }
.recherche__bouton-libelle { display: none; }
@media (min-width: 1024px) {
  .recherche--heros .recherche__ligne { border-bottom: 0; gap: var(--espace-16); }
  .recherche--heros .recherche__champ { flex: 0 1 516px; border-bottom: var(--trait-forme) solid var(--couleur-texte); min-height: 56px; }
  .recherche--heros .recherche__bouton {
    width: auto; height: 56px; padding: 0 var(--espace-24); gap: var(--espace-8); display: inline-flex; align-items: center;
    background: var(--couleur-action); color: var(--couleur-action-texte);
    font-size: var(--taille-libelle); line-height: var(--interlignage-libelle); font-weight: 500;
  }
  .recherche--heros .recherche__bouton .ico { display: none; }
  .recherche--heros .recherche__bouton-libelle { display: inline; }
}
.recherche__aide { margin-top: var(--espace-4); }
.recherche__suggestions { margin-top: var(--espace-8); border-top: var(--trait-filet) solid var(--couleur-filet); max-height: 50vh; overflow-y: auto; }
.recherche__suggestions [role="option"] {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 var(--espace-16);
  min-height: 48px; padding: var(--espace-8) var(--espace-8); border-bottom: var(--trait-filet) solid var(--couleur-filet); cursor: pointer;
}
.recherche__suggestions [role="option"]:hover .recherche__suggestion { text-decoration: underline; }
.recherche__suggestions [aria-selected="true"] { box-shadow: inset 3px 0 0 var(--couleur-action); background: color-mix(in srgb, var(--couleur-action) 8%, var(--couleur-fond)); }
.recherche-dialogue {
  position: fixed; inset: 0 0 auto 0; margin: 0; padding: 0; border: 0; width: 100%; max-width: 100%;
  max-height: 100dvh; overflow-y: auto; background: var(--couleur-fond); color: var(--couleur-texte);
  border-bottom: var(--trait-filet) solid var(--couleur-filet);
}
.recherche-dialogue::backdrop { background: rgb(13 13 14 / 0.4); }
.recherche-dialogue__corps { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--espace-16); align-items: start; padding-block: var(--espace-24) var(--espace-40); }
@media (min-width: 1024px) {
  .recherche-dialogue { top: 64px; }
  .recherche-dialogue__corps { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grille-gouttiere); padding-block: var(--espace-40) var(--espace-64); }
  .recherche-dialogue__corps .recherche { grid-column: 1 / 9; }
  .recherche-dialogue__fermer { grid-column: 12; justify-self: end; }
}

/* ---------- Panneau « Affichage » (<dialog> non modal) ---------- */
.affichage {
  position: fixed; margin: 0; z-index: 40; inset: auto 24px calc(var(--haut-pilule) + 8px) 24px; width: auto; max-width: none;
  max-height: calc(100dvh - var(--haut-pilule) - 32px); overflow-y: auto;
  padding: var(--espace-24); border: var(--trait-filet) solid var(--couleur-champ); background: var(--couleur-fond); color: var(--couleur-texte);
}
.affichage[open], .affichage--statique { display: flex; flex-direction: column; gap: var(--espace-24); }
.affichage::backdrop { background: transparent; }
.affichage--statique { position: static; max-height: none; inset: auto; }
.affichage__tete { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-16); }
.affichage__form { display: flex; flex-direction: column; gap: var(--espace-24); }
.affichage__groupe { display: flex; flex-direction: column; gap: var(--espace-8); }
.affichage__note { margin-top: calc(var(--espace-8) * -1); }
@media (min-width: 1024px) {
  .affichage:not(.affichage--statique) { inset: calc(64px + 8px) var(--grille-marge) auto auto; width: 421px; max-height: calc(100dvh - 96px); }
}

/* ======================= B · Actions ======================= */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--espace-8);
  min-height: 56px; padding: var(--espace-16) var(--espace-24); border-radius: var(--rayon-bouton);
  border: var(--trait-forme) solid var(--couleur-action);
  font-size: var(--taille-libelle); line-height: var(--interlignage-libelle); font-weight: 500;
  text-decoration: none; text-align: center; cursor: pointer; max-width: 100%;
  transition: background-color calc(var(--souffle-duree) * 1ms) var(--souffle-courbe), color calc(var(--souffle-duree) * 1ms) var(--souffle-courbe);
}
.bouton--primaire { background: var(--couleur-action); color: var(--couleur-action-texte); }
.bouton--primaire:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.bouton--secondaire { background: transparent; color: var(--couleur-action); }
.bouton--secondaire:hover { background: var(--couleur-action); color: var(--couleur-action-texte); }
.bouton[aria-disabled="true"] { border-color: var(--couleur-filet); color: var(--couleur-texte-secondaire); background: transparent; cursor: not-allowed; text-decoration: none; }
.bouton--plein-largeur { width: 100%; justify-content: flex-start; }
.bouton--compact { min-height: var(--cible-minimum); padding-block: var(--espace-8); }
.bouton-icone { display: inline-grid; place-items: center; width: var(--cible-minimum); height: var(--cible-minimum); flex: none; color: inherit; }
.lien-fleche {
  display: inline-flex; align-items: center; gap: var(--espace-8); min-height: var(--cible-minimum);
  color: var(--couleur-action); font-size: var(--taille-libelle); line-height: var(--interlignage-libelle); font-weight: 500; text-decoration: none;
}
.lien-fleche > span:first-child { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.lien-fleche:hover > span:first-child { text-decoration-thickness: 2px; }
.lien-fleche .ico { transition: transform calc(var(--souffle-duree) * 1ms) var(--souffle-courbe); }
.lien-fleche:hover .ico { transform: translateX(4px); }
.lien-retour { display: inline-flex; align-items: center; gap: var(--espace-4); min-height: var(--cible-minimum); font-size: var(--taille-libelle); text-decoration: underline; text-underline-offset: 0.2em; }

/* ---------- Pastilles (filtres à bascule, radios d'« Affichage ») ---------- */
.pastilles { display: flex; flex-wrap: wrap; gap: var(--espace-8); }
.pastille, .pastille__corps {
  display: inline-flex; align-items: center; gap: var(--espace-8); min-height: var(--cible-minimum); padding: 0 var(--espace-16);
  border: var(--trait-forme) solid var(--couleur-champ); border-radius: 0; color: var(--couleur-texte); background: transparent;
  font-size: var(--taille-libelle); line-height: var(--interlignage-libelle); font-weight: 500; cursor: pointer;
}
.pastille--radio { padding: 0; border: 0; min-height: 0; position: relative; }
.pastille__entree { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.pastille .ico, .pastille__coche { display: none; width: 20px; height: 20px; }
.pastille[aria-pressed="true"], .pastille__entree:checked + .pastille__corps { background: var(--couleur-action); color: var(--couleur-action-texte); border-color: var(--couleur-action); }
.pastille[aria-pressed="true"] .ico, .pastille__entree:checked + .pastille__corps .pastille__coche { display: block; }
.pastille__entree:focus-visible + .pastille__corps { outline: 3px solid var(--couleur-focus-interieur); box-shadow: 0 0 0 6px var(--couleur-focus-exterieur); }
.filtres { display: flex; flex-direction: column; gap: var(--espace-24); }
.filtres__groupe { display: flex; flex-direction: column; gap: var(--espace-8); }
.filtres__legende { font-size: var(--taille-meta); line-height: var(--interlignage-meta); color: var(--couleur-texte-secondaire); }

/* ---------- Pagination ---------- */
.pagination ul { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-8); }
.pagination a, .pagination [aria-current] {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--espace-4); min-width: var(--cible-minimum); min-height: var(--cible-minimum); padding-inline: var(--espace-8);
  font-size: var(--taille-libelle); line-height: var(--interlignage-libelle); text-decoration: underline; text-underline-offset: 0.2em; color: var(--couleur-texte);
}
.pagination [aria-current="page"] { background: var(--couleur-action); color: var(--couleur-action-texte); text-decoration: none; font-weight: 500; }

/* ======================= C · Formulaires ======================= */
.champ { display: flex; flex-direction: column; gap: var(--espace-8); }
.champ__libelle { font-size: var(--taille-libelle); line-height: var(--interlignage-libelle); font-weight: 500; }
.champ__aide { font-size: var(--taille-meta); line-height: var(--interlignage-meta); color: var(--couleur-texte-secondaire); }
.champ__controle {
  width: 100%; min-height: 48px; padding: var(--espace-8) var(--espace-16); border: var(--trait-forme) solid var(--couleur-champ); border-radius: 0;   /* 48 : 1,5 + 8 + 28 + 8 + 1,5 (Champ de la bibliothèque) */
  background: var(--couleur-fond); color: var(--couleur-texte); font-size: var(--taille-texte); line-height: var(--interlignage-texte);
}
textarea.champ__controle { min-height: 144px; resize: vertical; }
.champ__erreur { display: flex; align-items: flex-start; gap: var(--espace-8); color: var(--couleur-erreur); font-weight: 500; font-size: var(--taille-libelle); line-height: var(--interlignage-libelle); }
.champ--erreur { border-left: 3px solid var(--couleur-erreur); padding-left: var(--espace-16); }
.champ--erreur .champ__controle { border-width: 3px; border-color: var(--couleur-erreur); }
.choix { display: flex; flex-direction: column; gap: var(--espace-8); }
.choix legend { margin-bottom: var(--espace-8); font-weight: 500; font-size: var(--taille-libelle); line-height: var(--interlignage-libelle); }
.option { display: flex; align-items: center; gap: var(--espace-16); min-height: var(--cible-minimum); cursor: pointer; }
.option input { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--couleur-action); }
.resume-erreurs { display: flex; flex-direction: column; gap: var(--espace-16); padding: var(--espace-24); border: 3px solid var(--couleur-erreur); }
.resume-erreurs__titre { display: flex; gap: var(--espace-8); align-items: center; color: var(--couleur-erreur); }
.resume-erreurs a { color: var(--couleur-action); font-weight: 500; text-underline-offset: 0.2em; }
.etapes ol { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--espace-8); }
.etapes li { padding-top: var(--espace-8); border-top: 3px solid var(--couleur-filet); font-size: var(--taille-meta); line-height: var(--interlignage-meta); color: var(--couleur-texte-secondaire); }
.etapes .etapes__faite { border-top-color: var(--couleur-texte); color: var(--couleur-texte); }
.etapes [aria-current="step"] { border-top-color: var(--couleur-action); color: var(--couleur-texte); font-weight: 500; }
.etapes__repere { margin-bottom: var(--espace-8); font-weight: 500; }
.lettre { display: grid; gap: var(--espace-16); }
.lettre__tete { display: flex; align-items: center; gap: var(--espace-16); }
.lettre .illustration { width: 96px; height: 96px; color: var(--couleur-texte); }
.lettre__recevrez { display: flex; flex-direction: column; gap: var(--espace-8); }
.lettre__recevrez li { display: flex; align-items: flex-start; gap: var(--espace-16); }
.lettre__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--espace-16); }
.lettre__form .champ { flex: 1 1 260px; }
.lettre__confirmation { display: flex; gap: var(--espace-8); align-items: flex-start; padding: var(--espace-16); border: var(--trait-forme) solid var(--couleur-action); }

/* ======================= E · Information ======================= */
.titre-page { display: flex; flex-direction: column; gap: var(--rythme-titre-texte); padding-block: var(--espace-40) var(--rythme-bloc); }
.titre-page__surtitre { font-size: var(--taille-meta); line-height: var(--interlignage-meta); color: var(--couleur-texte-secondaire); }
.titre-page__chapo { max-width: 38em; }
.titre-page__maj { font-size: var(--taille-meta); line-height: var(--interlignage-meta); color: var(--couleur-texte-secondaire); }
.feuilles-hote { position: relative; }
.feuilles { position: absolute; inset: 0; pointer-events: none; color: var(--couleur-decor); overflow: visible; }
.feuilles svg { position: absolute; overflow: visible; }

.reponse { display: flex; flex-direction: column; gap: var(--espace-16); }
.reponse__lignes { border-top: var(--trait-filet) solid var(--couleur-filet); }
.reponse__ligne { display: flex; flex-direction: column; gap: var(--espace-4); padding-block: var(--espace-16); border-bottom: var(--trait-filet) solid var(--couleur-filet); }
.reponse__ligne dt { font-size: var(--taille-meta); line-height: var(--interlignage-meta); color: var(--couleur-texte-secondaire); }
.reponse__actions { display: flex; flex-wrap: wrap; gap: var(--espace-16); }
.reponse__taches { display: flex; flex-direction: column; gap: var(--espace-8); }
@media (min-width: 1024px) {
  .reponse__ligne { display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: var(--espace-24); align-items: baseline; }
}

.etat { display: flex; align-items: flex-start; gap: var(--espace-8); }
.etat__repere { flex: none; width: 10px; height: 10px; margin-top: 0.45em; border: var(--trait-forme) solid var(--couleur-champ); }
.etat--ouvert .etat__repere { background: var(--couleur-action); border-color: var(--couleur-action); }
.etat__mot { font-weight: 500; }

.infos-flash { position: relative; z-index: 21; }
.infos-flash--info { background: var(--couleur-fond); border-bottom: var(--trait-filet) solid var(--couleur-filet); }
.infos-flash--important { background: var(--couleur-action); color: var(--couleur-action-texte); --couleur-focus-interieur: var(--couleur-action-texte); --couleur-focus-exterieur: var(--couleur-action); }
.infos-flash--urgence { background: var(--couleur-pilule-fond); color: var(--couleur-pilule-texte); --couleur-focus-interieur: var(--couleur-pilule-texte); --couleur-focus-exterieur: var(--couleur-pilule-fond); }
.infos-flash__corps { display: flex; align-items: flex-start; gap: var(--espace-8); padding-block: var(--espace-8); padding-right: var(--espace-8); min-height: 48px; }
.infos-flash__corps > .ico { margin-top: 10px; }
.infos-flash__texte { flex: 1; min-width: 0; padding-block: 11px; font-size: var(--taille-meta); line-height: var(--interlignage-meta); }
@media (min-width: 1024px) { .infos-flash__texte { padding-block: 8px; font-size: var(--taille-libelle); line-height: var(--interlignage-libelle); } }
.infos-flash__texte a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; font-weight: 500; }
@media (min-width: 1024px) { .infos-flash__corps { gap: var(--espace-16); padding-right: max(var(--grille-marge), env(safe-area-inset-right, 0px)); min-height: 64px; align-items: center; } .infos-flash__corps > .ico { margin-top: 0; } }

.modale-glissee {
  position: fixed; z-index: 24; left: var(--grille-marge); right: var(--grille-marge);
  bottom: calc(56px + 16px + 8px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: var(--espace-8); padding: var(--espace-16) var(--espace-16) var(--espace-8) var(--espace-24);
  background: var(--couleur-fond); color: var(--couleur-texte); border: var(--trait-filet) solid var(--couleur-champ);
}
.modale-glissee__tete { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--espace-8); }
.modale-glissee__titre { padding-top: 10px; }
.modale-glissee__texte { font-size: var(--taille-meta); line-height: var(--interlignage-meta); padding-right: var(--espace-16); }
@media (min-width: 1024px) { .modale-glissee { left: auto; width: 421px; bottom: var(--espace-24); right: var(--grille-marge); } }

.donnee-a-venir { display: flex; align-items: center; min-height: 48px; padding: var(--espace-8) var(--espace-16); border: var(--trait-forme) dashed var(--couleur-champ); font-size: var(--taille-meta); line-height: var(--interlignage-meta); color: var(--couleur-texte-secondaire); }

/* ======================= F · Listes et agenda ======================= */
.section-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--espace-8) var(--espace-24); }
.liste { border-top: var(--trait-filet) solid var(--couleur-filet); }
.ligne { border-bottom: var(--trait-filet) solid var(--couleur-filet); position: relative; }
.ligne__lien { display: flex; align-items: center; gap: var(--espace-16); min-height: 48px; padding-block: var(--espace-8); text-decoration: none; color: var(--couleur-texte); }
.ligne__lien > .ico:last-child { margin-left: auto; color: var(--couleur-action); transition: transform calc(var(--souffle-duree) * 1ms) var(--souffle-courbe); }
.ligne__lien:hover > span:not(.ligne__numero) { color: var(--couleur-action); text-decoration: underline; text-underline-offset: 0.18em; }
.ligne__lien:hover > .ico:last-child { transform: translateX(4px); }
.ligne__lien--fort { font-weight: 500; }
.ligne__numero { flex: none; min-width: 2ch; font-variant-numeric: tabular-nums; }
.ligne__textes { display: flex; flex-direction: column; gap: var(--espace-4); min-width: 0; }
.ligne--numerotee .ligne__lien { min-height: 56px; }
.ligne--meta .ligne__lien { min-height: 64px; padding-block: var(--espace-16); align-items: flex-start; }
.ligne--meta .ligne__lien > .ico:last-child { margin-top: 0; align-self: center; }
.ligne--doc .ligne__lien > .ico:first-child { color: var(--couleur-action); }

.acces-rapides { display: flex; flex-direction: column; gap: var(--espace-16); }
.acces-rapides__liste { border-top: var(--trait-filet) solid var(--couleur-filet); }
.acces-rapides__lien { display: flex; align-items: center; gap: var(--espace-8); min-height: 56px; padding-block: var(--espace-8); border-bottom: var(--trait-filet) solid var(--couleur-filet); text-decoration: none; color: var(--couleur-texte); font-size: var(--taille-texte); line-height: var(--interlignage-titre-ligne); }
.acces-rapides__lien .ico:first-child { margin-right: var(--espace-8); }
.acces-rapides__lien .ligne__numero { width: 32px; }
.acces-rapides__lien:hover .acces-rapides__libelle { color: var(--couleur-action); text-decoration: underline; text-underline-offset: 0.18em; }
@media (min-width: 1024px) {
  .acces-rapides__liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--grille-gouttiere); border-top: 0; }
  .acces-rapides__lien { flex-wrap: wrap; align-content: flex-start; min-height: 120px; padding-block: var(--espace-16); border-top: var(--trait-filet) solid var(--couleur-filet); border-bottom: 0; font-size: var(--taille-titre-ligne); }
  .acces-rapides__lien .ligne__numero { width: auto; }
  .acces-rapides__libelle { flex-basis: 100%; }
  .acces-rapides--heros .acces-rapides__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acces-rapides--heros .acces-rapides__lien { flex-wrap: nowrap; min-height: 56px; padding-block: var(--espace-8); border-top: 0; border-bottom: var(--trait-filet) solid var(--couleur-filet); font-size: var(--taille-texte); }
  .acces-rapides--heros .acces-rapides__libelle { flex-basis: auto; }
  .acces-rapides--heros .acces-rapides__liste { border-top: var(--trait-filet) solid var(--couleur-filet); }
}

/* Carte (motif commun) : le titre est un lien étendu, l'action reste séparée, le focus cerne la carte */
.carte { position: relative; display: flex; flex-direction: column; gap: var(--espace-16); }
.carte__lien { text-decoration: none; color: inherit; }
.carte__lien::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.carte__lien:hover { text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
.carte__lien:focus-visible { outline: none; box-shadow: none; }
.carte:has(.carte__lien:focus-visible) { outline: 3px solid var(--couleur-focus-interieur); box-shadow: 0 0 0 6px var(--couleur-focus-exterieur); }
.carte__action { position: relative; z-index: 1; align-self: flex-start; }
.carte__textes { display: flex; flex-direction: column; gap: var(--espace-4); }
.carte__surtitre, .carte__meta { font-size: var(--taille-meta); line-height: var(--interlignage-meta); color: var(--couleur-texte-secondaire); }
.carte__titre { font-weight: 500; font-size: var(--taille-titre-ligne); line-height: var(--interlignage-titre-ligne); text-wrap: balance; }

.carte-evt { padding-block: var(--espace-24); border-bottom: var(--trait-filet) solid var(--couleur-filet); }
.carte-evt__date { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--espace-16); }
.carte-evt__jour { font-size: var(--taille-numeros-geants); line-height: 0.85; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.carte-evt__mois { flex: 1 0 200px; color: var(--couleur-decor); font-size: var(--taille-titre-section); line-height: var(--interlignage-titre-section); }
.carte-evt--une .carte__titre { font-weight: 400; font-size: var(--taille-titre-section); line-height: var(--interlignage-titre-section); letter-spacing: -0.02em; }
[data-site="eole"] .carte-evt--photo .carte__titre { font-family: var(--police-serif); font-weight: 400; font-size: 32px; line-height: 36px; letter-spacing: -0.01em; }
@media (min-width: 1024px) {
  .carte-evt--une .carte__titre { font-weight: 500; font-size: var(--taille-titre-ligne); line-height: var(--interlignage-titre-ligne); letter-spacing: 0; }
  .carte-evt--ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--espace-24); align-items: start; }
  .carte-evt--ligne .carte__action { grid-column: 2; grid-row: 1; }
}

.carte-actu { gap: var(--espace-16); }
.carte-actu .carte__titre { font-size: var(--taille-titre-ligne); line-height: var(--interlignage-titre-ligne); }
.carte-actu--une .carte__titre { font-weight: 400; font-size: var(--taille-titre-section); line-height: var(--interlignage-titre-section); letter-spacing: -0.02em; }
.carte-actu__chapo { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.carte-actu__suite { align-self: flex-start; }
.carte-actu--ligne { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: var(--espace-16); padding-block: var(--espace-16); border-bottom: var(--trait-filet) solid var(--couleur-filet); }
@media (min-width: 1024px) { .carte-actu--ligne { grid-template-columns: 199px minmax(0, 1fr); column-gap: var(--grille-gouttiere); } }

.seance { display: grid; grid-template-columns: var(--taille-colonne-heure) minmax(0, 1fr); column-gap: var(--espace-16); row-gap: var(--espace-16); padding-block: var(--espace-24); border-bottom: var(--trait-filet) solid var(--couleur-filet); position: relative; }
.seance__heure { font-size: var(--taille-titre-section); line-height: var(--interlignage-titre-section); letter-spacing: -0.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.seance__film { display: flex; flex-direction: column; gap: var(--espace-4); min-width: 0; }
.seance .carte__action { grid-column: 2; justify-self: start; }
@media (max-width: 359.98px) { .seance { grid-template-columns: minmax(0, 1fr); } .seance .carte__action { grid-column: 1; } }
@media (min-width: 1024px) {
  .seance { grid-template-columns: var(--taille-colonne-heure) minmax(0, 1fr) auto; column-gap: var(--espace-24); align-items: start; }
  .seance .carte__action { grid-column: 3; grid-row: 1; }
  .seance--etroite { grid-template-columns: var(--taille-colonne-heure) minmax(0, 1fr); }
  .seance--etroite .carte__action { grid-column: 2; grid-row: auto; }
}

.carte-lieu .etat { font-size: var(--taille-meta); line-height: var(--interlignage-meta); }

.jour { display: flex; flex-direction: column; gap: var(--espace-16); }
.jour__numero { font-size: var(--taille-numeros-geants); line-height: 0.9; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin-left: -0.045em; }
.jour__date { font-size: var(--taille-meta); line-height: var(--interlignage-meta); font-weight: 500; color: var(--couleur-texte-secondaire); }
.jour__liste { border-top: var(--trait-filet) solid var(--couleur-filet); }
@media (min-width: 1024px) {
  .jour { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grille-gouttiere); row-gap: 0; }
  .jour__tete { grid-column: 1 / 5; display: flex; flex-direction: column; gap: var(--espace-8); }
  .jour__numero { line-height: 0.86; }
  .jour__liste { grid-column: 5 / 13; align-self: start; }
  .jour--etroit .jour__tete, .jour--etroit .jour__liste { grid-column: 1 / -1; }
  .jour--etroit .jour__numero { font-size: 96px; }
}

/* ======================= G · Images et formes ======================= */
.zone-visuelle { display: grid; place-items: center; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; border: var(--trait-forme) dashed var(--couleur-champ); font-size: var(--taille-meta); line-height: var(--interlignage-meta); color: var(--couleur-texte-secondaire); text-align: center; padding: var(--espace-16); }
.zone-visuelle--9x16 { aspect-ratio: 9 / 16; }
.zone-visuelle--1x1 { aspect-ratio: 1; }
.zone-visuelle--3x4 { aspect-ratio: 3 / 4; }

.photo { position: relative; margin: 0; max-width: 100%; }
.photo__image { display: block; width: 100%; height: auto; aspect-ratio: var(--ratio, 3 / 2); object-fit: cover; border-radius: var(--rayon-photo); background: var(--couleur-filet); }
.photo--16x9 { --ratio: 16 / 9; } .photo--3x2 { --ratio: 3 / 2; } .photo--1x1 { --ratio: 1; } .photo--4x5 { --ratio: 4 / 5; } .photo--3x1 { --ratio: 3 / 1; }
/* Bichromie d'Eole : la trame est un masque (style en ligne sur .photo__encre, chemin relatif à la page),
   la couleur est celle de la saison, posée sur la nuit */
.photo--masque .photo__image { position: relative; overflow: hidden; background: var(--couleur-fond); }
.photo--masque .photo__encre {
  position: absolute; inset: 0; background-color: var(--couleur-photo-encre);
  -webkit-mask-size: cover; mask-size: cover; -webkit-mask-position: 50% 30%; mask-position: 50% 30%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  transition: background-color calc(var(--souffle-duree) * 1ms) var(--souffle-courbe);
}
.photo--fondu .photo__image::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 80px; background: linear-gradient(to bottom, transparent, var(--couleur-fond)); }
.photo__credit {
  position: absolute; right: var(--espace-8); bottom: var(--espace-8); z-index: 1; max-width: calc(100% - 16px);
  padding: var(--espace-4) var(--espace-8); background: var(--couleur-fond); color: var(--couleur-texte-secondaire);
  font-size: var(--taille-meta); line-height: var(--interlignage-meta);
}
.photo--fondu .photo__credit { bottom: 88px; }
.photo--credit-dessous .photo__credit { position: static; display: block; padding: var(--espace-4) 0 0; background: none; }
.photo__legende { margin-top: var(--espace-8); font-size: var(--taille-meta); line-height: var(--interlignage-meta); color: var(--couleur-texte-secondaire); }
.couverture { display: block; width: 100%; height: auto; aspect-ratio: var(--ratio, 3 / 2); object-fit: cover; }
.illustration { width: 160px; height: 160px; color: var(--couleur-texte); flex: none; }
.illustration--96 { width: 96px; height: 96px; }

.riviere { display: block; width: 100%; height: auto; max-width: 100%; overflow: visible; color: var(--couleur-decor); }
.riviere path { fill: none; stroke: currentColor; stroke-width: var(--trait-forme); stroke-linecap: round; stroke-linejoin: round; }
.riviere--ratier { aspect-ratio: 1143.1 / 188.5; }
.riviere--yzeron { aspect-ratio: 1378 / 375.5; }

/* Carte de la ville : le conteneur et le bloc complet sont dans la section « V2 · carte » en fin de fichier. */

/* ---------- Carrousel de héros (fondu, lecture automatique 6 s, D17) ---------- */
.carrousel { position: relative; display: flex; flex-direction: column; }
.carrousel__diapos { display: grid; }
.carrousel__diapo { grid-area: 1 / 1; margin: 0; }
.carrousel__diapo:not(:first-child) { opacity: 0; visibility: hidden; }
/* une seule diapositive chargée au départ : les autres restent hors rendu (image différée) jusqu'à la veille de leur tour */
.carrousel__diapo:not(:first-child):not([data-chargee]) { display: none; }
.carrousel[data-pret] .carrousel__diapo { opacity: 0; visibility: hidden; transition: opacity calc(var(--carrousel-fondu) * 1ms) var(--souffle-courbe), visibility 0ms linear calc(var(--carrousel-fondu) * 1ms); }
.carrousel[data-pret] .carrousel__diapo[data-actif] { opacity: 1; visibility: visible; transition: opacity calc(var(--carrousel-fondu) * 1ms) var(--souffle-courbe), visibility 0ms; }
.carrousel__diapo .photo__image { aspect-ratio: var(--ratio-heros, 3 / 2); }
.carrousel__legende { display: none; }
.carrousel__commandes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-4); min-height: 44px; }
.carrousel__pause { margin-right: auto; }
.carrousel__points { display: none; }
.carrousel__compteur { min-width: 44px; text-align: center; font-size: var(--taille-meta); line-height: var(--interlignage-meta); font-variant-numeric: tabular-nums; }
.carrousel__point { display: inline-grid; place-items: center; width: 44px; height: 44px; }
.carrousel__point span { width: 8px; height: 8px; border: var(--trait-forme) solid var(--couleur-champ); }
.carrousel__point[aria-current="true"] span { background: var(--couleur-action); border-color: var(--couleur-action); }
@media (min-width: 1024px) {
  .carrousel__diapo .photo__image { aspect-ratio: var(--ratio-heros-d, 597 / 740); }
  .carrousel__commandes { padding-left: var(--espace-24); }
  .carrousel__legende-active { display: block; font-size: var(--taille-meta); line-height: var(--interlignage-meta); color: var(--couleur-texte-secondaire); margin-right: auto; max-width: 165px; }
  .carrousel__pause { margin-right: 0; }
  .carrousel__commandes .carrousel__compteur { display: none; }   /* héros : les points remplacent le compteur ; le carrousel de cartes le garde */
  .carrousel__points { display: flex; }
}

/* ---------- Carrousel de cartes (à la main, défilement aimanté) ---------- */
.carrousel-cartes { display: flex; flex-direction: column; gap: var(--espace-16); }
.carrousel-cartes__piste {
  display: flex; gap: var(--grille-gouttiere); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scroll-padding-inline: max(var(--grille-marge), env(safe-area-inset-left, 0px));
  padding-inline: max(var(--grille-marge), env(safe-area-inset-left, 0px)); margin-inline: calc(max(var(--grille-marge), env(safe-area-inset-left, 0px)) * -1);
  scrollbar-width: none; padding-block: 6px; /* place pour le focus */
}
.carrousel-cartes__piste::-webkit-scrollbar { display: none; }
.carrousel-cartes__item { flex: 0 0 300px; scroll-snap-align: start; min-width: 0; }
.carrousel-cartes__item--une { flex-basis: min(342px, 100%); }
.carrousel-cartes__commandes { display: flex; align-items: center; justify-content: flex-end; gap: var(--espace-4); }
.carrousel-cartes__commandes .lien-fleche { margin-right: auto; }
@media (min-width: 1024px) {
  .carrousel-cartes__item { flex: 0 0 310px; }
  .carrousel-cartes__item--une { flex: 0 0 644px; }
}

/* ---------- Section en aplat (data-mode="aplat", D19) ---------- */
.aplat { padding-block: var(--rythme-section); }
.aplat__grille { row-gap: var(--rythme-bloc); align-items: center; }
.aplat__textes { display: flex; flex-direction: column; gap: var(--rythme-titre-texte); align-items: flex-start; }
.aplat__surtitre { font-size: var(--taille-meta); line-height: var(--interlignage-meta); }
.aplat__paragraphe { max-width: 34em; }
.aplat__action { margin-top: var(--espace-8); }

/* ---------- Héros Ville (carrousel au-dessus du H1 à 390, à droite à 1440) ---------- */
.heros-ville { display: grid; grid-template-columns: minmax(0, 1fr); }
.heros-ville__media { margin-inline: calc(max(var(--grille-marge), env(safe-area-inset-left, 0px)) * -1); }
.heros-ville__media .carrousel__commandes { padding-inline: max(var(--grille-marge), env(safe-area-inset-left, 0px)) max(var(--grille-marge), env(safe-area-inset-right, 0px)); }
.heros-ville__texte { display: flex; flex-direction: column; gap: var(--espace-16); padding-top: var(--espace-24); }
@media (min-width: 1024px) {
  .heros-ville { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grille-gouttiere); align-items: start; }
  .heros-ville__texte { grid-column: 1 / 8; grid-row: 1; padding-top: var(--espace-40); gap: var(--espace-40); }
  .heros-ville__media { grid-column: 8 / 13; grid-row: 1; margin-inline: 0 calc(max(var(--grille-marge), env(safe-area-inset-right, 0px)) * -1); }
}

/* ---------- Héros Eole : l'image d'abord, le titre sous l'image, sur la nuit (R17) ---------- */
.heros-eole { position: relative; }
.heros-ville__texte > *, .heros-eole__corps > * { min-width: 0; }
.heros-eole__media, .heros-ville__media { max-width: none; }
.heros-eole__media { margin-inline: calc(max(var(--grille-marge), env(safe-area-inset-left, 0px)) * -1); }
.heros-eole__corps { display: flex; flex-direction: column; gap: var(--espace-8); padding-top: var(--espace-24); }
.heros-eole__titre { margin-block: var(--espace-8); }
.heros-eole__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-16); margin-top: var(--espace-16); }
.vent__mot { display: inline-block; white-space: nowrap; }
.vent__lettre { display: inline-block; transform-origin: 50% 85%; }
@media (min-width: 1024px) {
  .heros-eole__titre { font-size: min(var(--taille-eole-titre), 11.111vw); line-height: min(var(--interlignage-eole-titre), 10vw); }
  .heros-eole__ligne { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grille-gouttiere); align-items: center; }
  .heros-eole__meta { grid-column: 1 / 6; }
  .heros-eole__actions { grid-column: 6 / 13; margin-top: 0; }
}
.champ-ascii { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: var(--vent-champ-opacite); pointer-events: none; }
.avec-champ-ascii { position: relative; isolation: isolate; }

/* ======================= H · Pied de page (data-mode="pied") ======================= */
.pied { border-top: var(--trait-filet) solid var(--couleur-filet); }
.pied a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.pied a:hover { text-decoration-thickness: 2px; }
.pied .lien-fleche, .pied .bouton { text-decoration: none; }
.pied__haut { padding-block: var(--rythme-section) var(--espace-40); row-gap: var(--rythme-bloc); }
.pied__mairie, .pied__coord { display: flex; flex-direction: column; gap: var(--espace-16); align-items: flex-start; }
.pied__adresse { font-size: var(--taille-texte); line-height: var(--interlignage-texte); }
.pied__itineraire { display: inline-flex; align-items: center; gap: var(--espace-4); min-height: var(--cible-minimum); vertical-align: middle; }
.pied__adresse a[href^="tel:"] { display: inline-flex; align-items: center; min-height: var(--cible-minimum); }
.pied__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-16) var(--espace-24); }
.pied__groupe { display: flex; flex-direction: column; gap: var(--espace-8); }
.pied__titre { color: var(--couleur-texte); }
.pied__liste a { display: inline-flex; align-items: center; gap: var(--espace-4); min-height: var(--cible-minimum); font-size: var(--taille-libelle); line-height: var(--interlignage-libelle); }
.pied__groupe--suivre .pied__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--grille-gouttiere); }
.pied__groupe--suivre .pied__liste a { min-height: 48px; }
.pied__bascule { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; font-weight: 500; }
.pied__chevron { transition: transform calc(var(--souffle-duree) * 1ms) var(--souffle-courbe); }
.pied__bascule[aria-expanded="true"] .pied__chevron { transform: rotate(180deg); }
.pied__titre-texte { display: none; }
.pied__legal { border-top: var(--trait-filet) solid var(--couleur-filet); }
.pied__legal-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--grille-gouttiere); padding-bottom: var(--espace-16); }
.pied__legal-liste a, .pied__affichage { display: inline-flex; align-items: center; gap: var(--espace-8); min-height: var(--cible-minimum); font-size: var(--taille-meta); line-height: var(--interlignage-meta); color: inherit; }
.pied__affichage { font-weight: 500; text-decoration: underline; text-underline-offset: 0.2em; }
.pied__notes { display: flex; flex-direction: column; gap: var(--espace-8); padding-block: var(--espace-16) var(--espace-24); border-top: var(--trait-filet) solid var(--couleur-filet); }
.pied__note { color: var(--couleur-texte-secondaire); }
@media (min-width: 1024px) {
  .pied__mairie { grid-column: 1 / 5; }
  .pied__groupe--suivre { grid-column: 6 / 9; }
  .pied__groupe--sites { grid-column: 10 / 13; }
  .pied__groupe--suivre .pied__liste { grid-template-columns: 1fr; }
  .pied__groupe--suivre .pied__liste a { min-height: var(--cible-minimum); }
  .pied__bascule { display: none; }
  .pied__titre-texte:not(.sr-only) { display: inline; }
  .pied__titre-texte.sr-only { display: block; }
  .pied__legal-liste { display: flex; flex-wrap: wrap; gap: 0 var(--espace-24); padding-block: var(--espace-16); }
  .pied__legal-liste a, .pied__affichage { font-size: var(--taille-libelle); line-height: var(--interlignage-libelle); }
}
/* Horaires de la semaine (<table>) */
.horaires { display: flex; flex-direction: column; gap: var(--espace-16); width: 100%; max-width: 421px; }
.horaires__table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--taille-meta); line-height: var(--interlignage-meta); font-variant-numeric: tabular-nums; }
.horaires__titre { text-align: left; padding-bottom: var(--espace-8); }
.horaires__table th, .horaires__table td { text-align: left; vertical-align: top; padding: 4px 6px 4px 0; font-weight: 400; }
.horaires__table thead th { font-weight: 500; border-bottom: var(--trait-filet) solid var(--couleur-filet); }
.horaires__table th[scope="row"], .horaires__table thead th:first-child { width: 84px; }
.horaires__table tbody tr + tr > * { border-top: var(--trait-filet) solid var(--couleur-filet); }
.horaires__aujourdhui > * { font-weight: 500 !important; }
.horaires__aujourdhui th { box-shadow: inset 3px 0 0 currentColor; padding-left: var(--espace-8); }
.horaires__mot { display: block; font-size: var(--taille-meta); line-height: var(--interlignage-meta); font-weight: 400; }
.horaires__suite { color: var(--couleur-texte-secondaire); }
/* 390 : « 13 h 30 à 17 h 30 » sur une ligne — chiffres proportionnels (Inter), jour 23,4 % · matin 36,3 % · après-midi le reste
   (mesuré sur 342 : 80 · 124 · 138) ; à 1 024 et plus, la colonne du jour à 104 */
@media (max-width: 1023.98px) {
  .horaires__table { font-variant-numeric: normal; }
  .horaires__table th[scope="row"], .horaires__table thead th:first-child { width: 23.4%; }
  .horaires__table thead th:nth-child(2) { width: 36.3%; }
}
@media (min-width: 1024px) { .horaires__table th[scope="row"], .horaires__table thead th:first-child { width: 104px; } }
/* L'affiche « Craponne » : le mot ne bouge jamais ; la frise est construite sur ses deux « n » */
.affiche { position: relative; padding-top: var(--espace-40); overflow: clip; }
.frise { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; color: var(--couleur-pied-decor); pointer-events: none; }
.frise .trait { fill: none; stroke: currentColor; stroke-width: var(--trait-forme); stroke-linecap: round; stroke-linejoin: round; }
.frise .tirets { stroke-dasharray: 4 4; }
.frise .eau { fill: none; stroke: var(--couleur-pied-eau); stroke-width: 2; stroke-linecap: round; }
.frise .pile { transform-box: fill-box; transform-origin: 50% 100%; }
.mot { position: relative; z-index: 1; font-weight: 400; line-height: 1; letter-spacing: -0.03em; white-space: nowrap; font-size: calc((100vw - 2 * var(--grille-marge)) * 0.2303); color: var(--couleur-pied-texte); font-kerning: normal; padding-bottom: 0.09em; }
.mot__texte { display: inline-block; }
.mot__ligne { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
/* Aqueduc dessiné hors du pied (svg[data-aqueduc-dessin="frise|arcade"], aqueduc.js · initDessins) : plein = réel, tireté = suggéré */
.aqueduc-dessin { display: block; width: 100%; height: auto; overflow: visible; color: var(--couleur-decor); }
.aqd-trait { fill: none; stroke: currentColor; stroke-width: var(--trait-forme); stroke-linecap: round; stroke-linejoin: round; }
.aqd-tirets { stroke-dasharray: 4 4; stroke-linecap: butt; }
.aqd-pile { transform-box: fill-box; transform-origin: 50% 100%; }
.aqd-texte { fill: var(--couleur-texte); font-family: var(--police-sans); font-size: var(--taille-meta); }
.pied__yzeron { padding-bottom: var(--espace-24); }
.pied__yzeron .riviere { color: var(--couleur-pied-decor); }
@media (min-width: 1024px) { .affiche { padding-top: 56px; } .pied__yzeron { padding-bottom: var(--espace-40); } }
/* Pied d'Eole : nuit, sans frise ni rivière */
.pied--eole .pied__logo { width: 82px; height: 40px; }
.pied__groupes { display: grid; gap: var(--rythme-bloc); }
.pied__bas { display: flex; flex-direction: column; gap: var(--espace-24); padding-block: var(--espace-24) var(--espace-40); }
.pied__signature { max-width: 14em; }
.pied__courriel { overflow-wrap: anywhere; }
@media (min-width: 1024px) {
  .pied__coord { grid-column: 1 / 6; }
  .pied__groupes { grid-column: 7 / 13; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--grille-gouttiere); }
}

/* ---------- Saisons (démonstration du prototype) ---------- */
.saisons { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--espace-4); margin-left: calc(var(--espace-8) * -1); }
.saisons__libelle { flex-basis: 100%; padding: var(--espace-4) var(--espace-8); }
.saisons__bouton { display: inline-flex; align-items: center; gap: var(--espace-8); min-height: var(--cible-minimum); padding: 0 var(--espace-8); font-size: var(--taille-meta); line-height: var(--interlignage-meta); color: var(--couleur-texte-secondaire); }
.saisons__bouton[aria-pressed="true"] { color: var(--couleur-texte); font-weight: 500; text-decoration: underline; text-underline-offset: 0.2em; }
.saisons__pastille { width: 12px; height: 12px; flex: none; }
@media (min-width: 1024px) { .saisons__libelle { flex-basis: auto; } }

/* ==========================================================================
   Blocs partagés V2 (07-pages-ux-v2 §1.9, §1.15, §1.16–1.17, V11, V18) — ajoutés le 05/11 après le socle.
   Balisage : galerie-blocs.html (famille I) ; JS : application.js, galerie-auto.js, carte-ville.js, frise.js
   (chargés par core.js seulement si la page a le bloc). Couleurs : jetons du mode, rien en dur hors palette.
   ========================================================================== */

/* ======================= V2 · application (§1.9, R10) =======================
   Téléphone en verre 220 × 452 (390) / 300 × 616 (1 440), rayon 28 (rayon/pilule), contour 1,5 px texte à 24 %,
   verre = Blanc de linge à 60 % + flou 12 px + saturation ; liseré clair en dégradé, reflet du haut, lumière bleue
   posée sous le verre (une lumière, pas une ombre portée : la pilule reste la seule ombre du système). */
.appli {
  --appli-cadre: 220px;
  --appli-verre: rgb(246 244 239 / 0.6);
  --appli-reflet: rgb(255 255 255 / 0.95);
  --appli-lumiere: var(--palette-ville-bleu-d-azurage);
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--espace-24); align-items: start;
}
[data-site="eole"] .appli, .appli[data-site="eole"] {
  --appli-verre: rgb(243 241 236 / 0.08);
  --appli-reflet: rgb(243 241 236 / 0.7);
  --appli-lumiere: var(--saison-accent);
}
.appli__titre { margin: 0; }
.appli__chapo { max-width: 34em; margin-top: calc(var(--espace-8) * -1); }
.appli__visuel { position: relative; isolation: isolate; margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--espace-8); padding-block: var(--espace-16) 0; }
.appli__visuel::before {   /* la lumière bleue : un halo large et doux, plus dense vers le bas du téléphone */
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(calc(var(--appli-cadre) * 1.75), calc(100% + 2 * var(--grille-marge))); height: calc(var(--appli-cadre) * 2.15);
  transform: translate(-50%, -50%); pointer-events: none; filter: blur(26px);
  background:
    radial-gradient(42% 30% at 50% 74%, color-mix(in srgb, var(--appli-lumiere) 70%, transparent), transparent 100%),
    radial-gradient(closest-side, color-mix(in srgb, var(--appli-lumiere) 34%, transparent), color-mix(in srgb, var(--appli-lumiere) 10%, transparent) 70%, transparent);
}
.appli__telephone {
  position: relative; width: var(--appli-cadre); max-width: 100%; aspect-ratio: 220 / 452; padding: 8px; border-radius: var(--rayon-pilule);
  background:
    linear-gradient(165deg, var(--appli-verre), color-mix(in srgb, var(--appli-verre) 30%, transparent) 46%, var(--appli-verre)),
    linear-gradient(0deg, color-mix(in srgb, var(--appli-lumiere) 16%, transparent), transparent 40%);
  -webkit-backdrop-filter: blur(12px) saturate(1.6); backdrop-filter: blur(12px) saturate(1.6);
  box-shadow: inset 0 0 0 var(--trait-forme) color-mix(in srgb, var(--couleur-texte) 24%, transparent);   /* contour, pas une ombre */
}
.appli__telephone::before {   /* liseré clair : un dégradé sur le bord, découpé par un masque */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: var(--trait-forme); pointer-events: none;
  background: linear-gradient(150deg, var(--appli-reflet), transparent 30%, transparent 64%, color-mix(in srgb, var(--appli-reflet) 70%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.appli__telephone::after {    /* reflet du haut + reflet oblique, sur le verre et l'écran */
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--appli-reflet) 42%, transparent), transparent 22%),
    linear-gradient(118deg, transparent 18%, color-mix(in srgb, var(--appli-reflet) 22%, transparent) 30%, transparent 42%);
}
.appli__ecran { position: relative; height: 100%; overflow: hidden; border-radius: calc(var(--rayon-pilule) - 8px); background: var(--palette-ville-blanc); }
.appli__vue { position: absolute; inset: 0; margin: 0; }
.appli__vue:not([data-actif]) { opacity: 0; }
.appli__vue img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.appli__commandes { display: flex; align-items: center; justify-content: center; min-height: var(--cible-minimum); }
.appli__pause { display: inline-flex; align-items: center; gap: var(--espace-8); min-height: var(--cible-minimum); padding-inline: var(--espace-8); color: var(--couleur-texte); font-size: var(--taille-libelle); line-height: var(--interlignage-libelle); font-weight: 500; }
.appli__pause:hover span { text-decoration: underline; text-underline-offset: 0.2em; }
.appli__credit { font-size: var(--taille-meta); line-height: var(--interlignage-meta); color: var(--couleur-texte-secondaire); text-align: center; }
.appli__avantages { border-top: var(--trait-filet) solid var(--couleur-filet); }
.appli__avantages li { display: flex; align-items: center; gap: var(--espace-16); min-height: 48px; padding-block: var(--espace-8); border-bottom: var(--trait-filet) solid var(--couleur-filet); }
.appli__avantages .ico { color: var(--couleur-action); }
.appli__magasins { display: flex; flex-wrap: wrap; gap: var(--espace-16); }
.appli__magasin {
  display: inline-flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: min(100%, 163px); min-height: 48px; padding: 4px 10px;
  background: var(--couleur-pilule-fond); color: var(--couleur-pilule-texte); text-decoration: none; border-radius: var(--rayon-bouton);
}
.appli__magasin svg { width: 22px; height: 22px; flex: none; fill: currentColor; }
.appli__magasin-textes { display: flex; flex-direction: column; min-width: 0; }
.appli__magasin-sur { font-size: var(--taille-meta); line-height: calc(17px * var(--facteur-texte)); }
.appli__magasin-nom { font-size: var(--taille-libelle); line-height: calc(20px * var(--facteur-texte)); font-weight: 500; }
.appli__magasin:hover .appli__magasin-nom { text-decoration: underline; text-underline-offset: 0.2em; }
.appli__magasin:focus-visible { outline-color: var(--couleur-focus-interieur); }
.appli__qr { display: none; }
@media (min-width: 1024px) {
  .appli { --appli-cadre: 300px; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grille-gouttiere); row-gap: var(--espace-24); }
  .appli > :not(.appli__visuel) { grid-column: 1 / 6; }
  .appli__visuel { grid-column: 8 / 11; grid-row: 1 / span 6; align-self: center; padding-block: 0; }
  .appli__magasin { flex: 0 0 auto; min-width: 200px; padding-inline: 12px 16px; }
  .appli__qr { display: flex; align-items: center; gap: var(--espace-16); margin: 0; }
  .appli__qr img { width: 120px; height: 120px; padding: 8px; background: var(--palette-ville-blanc-de-linge); image-rendering: pixelated; }
  .appli__qr figcaption { max-width: 12em; font-size: var(--taille-meta); line-height: var(--interlignage-meta); color: var(--couleur-texte-secondaire); }
}

/* ======================= V2 · galerie (§1.15, R26–R27) =======================
   La mise en page dépend du nombre d'éléments (galerie-auto.js pose .galerie-auto--n1 … --n6, --plus pour 7 à 12 ;
   avant lui, les mêmes règles s'appliquent par :has(), voir plus bas).
   390 (342, écart 8) : n = 1 3:2 (vidéo 16:9) · 2 empilées · 3 grande + 2 carrées · 4 grande + 3 carrées
   · 5 grande + 2 × 2 · 6 grande + 2 × 2 + une large · 7 à 12 carrousel, un par vue.
   1 440 (c1–12, écart 24) : 1 c2–11 16:9 · 2 c1–6 | c7–12 · 3 c1–8 + 2 empilées c9–12 · 4 c1–8 + 3 empilées
   · 5 c1–6 + 2 × 2 c7–12 · 6 = 5 + une rangée c1–12 · 7 à 12 = les 6 premiers + « Voir les n photos et vidéos ». */
.galerie-auto { display: flex; flex-direction: column; gap: var(--espace-16); min-width: 0; }
.galerie-auto__liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espace-8); }
.galerie-auto__item { position: relative; min-width: 0; }
.galerie-auto__bouton { position: relative; display: block; width: 100%; height: 100%; aspect-ratio: var(--ratio, 3 / 2); overflow: hidden; background: var(--couleur-filet); cursor: zoom-in; }
.galerie-auto__bouton picture { display: contents; }
.galerie-auto__bouton img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform calc(var(--souffle-duree) * 1ms) var(--souffle-courbe); }
.galerie-auto__bouton:hover img { transform: scale(1.03); }
.galerie-auto__item--petite { --ratio: 1; }
.galerie-auto__item--seule.galerie-auto__item--video { --ratio: 16 / 9; }
.galerie-auto__lecture {   /* repère ▶ + durée d'une vidéo, sur aplat (comme le crédit) */
  position: absolute; left: var(--espace-8); bottom: var(--espace-8); z-index: 1; display: inline-flex; align-items: center; gap: var(--espace-4);
  min-height: 32px; padding: 4px var(--espace-8) 4px 4px; background: var(--couleur-fond); color: var(--couleur-texte);
  font-size: var(--taille-meta); line-height: var(--interlignage-meta); font-variant-numeric: tabular-nums;
}
.galerie-auto__lecture .ico { width: 24px; height: 24px; }
.galerie-auto__credit-cellule {
  position: absolute; right: var(--espace-8); bottom: var(--espace-8); z-index: 1; max-width: calc(100% - 16px); padding: var(--espace-4) var(--espace-8);
  background: var(--couleur-fond); color: var(--couleur-texte-secondaire); font-size: var(--taille-meta); line-height: var(--interlignage-meta);
}
@media (max-width: 1023.98px) { .galerie-auto__item--petite .galerie-auto__credit-cellule { display: none; } }
.galerie-auto__credit { font-size: var(--taille-meta); line-height: var(--interlignage-meta); color: var(--couleur-texte-secondaire); }
.galerie-auto__pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espace-8) var(--espace-16); }
.galerie-auto__commandes { display: flex; align-items: center; gap: var(--espace-4); margin-left: auto; }
.galerie-auto__tout { display: none; }
/* Avant le module (et sans JavaScript) : la même grille, posée par le nombre d'éléments (:has) — aucune cellule ne change
   de taille quand galerie-auto.js pose ses classes (.galerie-auto--nN, data-n) : pas de saut de mise en page, et une image
   différée (loading="lazy", sizes="auto, …") se charge à la taille de sa cellule. */
:where(.galerie-auto:not([data-n]):has(> .galerie-auto__liste > :nth-child(3)):not(:has(> .galerie-auto__liste > :nth-child(7)))) .galerie-auto__item:not(:first-child):not(:nth-child(6)) { --ratio: 1; }
:where(.galerie-auto:not([data-n])) .galerie-auto__item[data-type="video"]:only-child { --ratio: 16 / 9; }
/* 390 */
:is(.galerie-auto--n3, :where(.galerie-auto:not([data-n]):has(> .galerie-auto__liste > :nth-child(3):last-child))) .galerie-auto__liste, :is(.galerie-auto--n5, :where(.galerie-auto:not([data-n]):has(> .galerie-auto__liste > :nth-child(5):last-child))) .galerie-auto__liste, :is(.galerie-auto--n6, :where(.galerie-auto:not([data-n]):has(> .galerie-auto__liste > :nth-child(6):last-child))) .galerie-auto__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:is(.galerie-auto--n4, :where(.galerie-auto:not([data-n]):has(> .galerie-auto__liste > :nth-child(4):last-child))) .galerie-auto__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
:is(.galerie-auto--n3, :where(.galerie-auto:not([data-n]):has(> .galerie-auto__liste > :nth-child(3):last-child))) .galerie-auto__item:first-child, :is(.galerie-auto--n5, :where(.galerie-auto:not([data-n]):has(> .galerie-auto__liste > :nth-child(5):last-child))) .galerie-auto__item:first-child,
:is(.galerie-auto--n6, :where(.galerie-auto:not([data-n]):has(> .galerie-auto__liste > :nth-child(6):last-child))) .galerie-auto__item:first-child, :is(.galerie-auto--n6, :where(.galerie-auto:not([data-n]):has(> .galerie-auto__liste > :nth-child(6):last-child))) .galerie-auto__item:nth-child(6) { grid-column: 1 / -1; }
:is(.galerie-auto--n4, :where(.galerie-auto:not([data-n]):has(> .galerie-auto__liste > :nth-child(4):last-child))) .galerie-auto__item:first-child { grid-column: 1 / -1; }
/* 7 à 12 sous 1 024 : carrousel à la main, un élément par vue, défilement aimanté */
@media (max-width: 1023.98px) {
  :is(.galerie-auto--plus, :where(.galerie-auto:not([data-n]):has(> .galerie-auto__liste > :nth-child(7)))) .galerie-auto__liste {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none; padding-block: 6px; margin-block: -6px;
  }
  :is(.galerie-auto--plus, :where(.galerie-auto:not([data-n]):has(> .galerie-auto__liste > :nth-child(7)))) .galerie-auto__liste::-webkit-scrollbar { display: none; }
  :is(.galerie-auto--plus, :where(.galerie-auto:not([data-n]):has(> .galerie-auto__liste > :nth-child(7)))) .galerie-auto__item { scroll-snap-align: start; --ratio: 3 / 2; }
  :is(.galerie-auto--plus, :where(.galerie-auto:not([data-n]):has(> .galerie-auto__liste > :nth-child(7)))) .galerie-auto__item--petite { --ratio: 3 / 2; }
}
@media (min-width: 1024px) {
  .galerie-auto__liste { gap: var(--grille-gouttiere); grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .galerie-auto__item { grid-column: span 6; }
  .galerie-auto__item .galerie-auto__bouton { aspect-ratio: auto; }
  :is(.galerie-auto--n1, :where(.galerie-auto:not([data-n]):has(> .galerie-auto__liste > :nth-child(1):last-child))) .galerie-auto__item { grid-column: 2 / 12; }
  :is(.galerie-auto--n1, :where(.galerie-auto:not([data-n]):has(> .galerie-auto__liste > :nth-child(1):last-child))) .galerie-auto__bouton { aspect-ratio: 16 / 9; }
  :is(.galerie-auto--n2, :where(.galerie-auto:not([data-n]):has(> .galerie-auto__liste > :nth-child(2):last-child))) .galerie-auto__bouton { aspect-ratio: 3 / 2; }
  :is(.galerie-auto--n3, :where(.galerie-auto:not([data-n]):has(> .galerie-auto__liste > :nth-child(3):last-child))) .galerie-auto__liste, :is(.galerie-auto--n4, :where(.galerie-auto:not([data-n]):has(> .galerie-auto__liste > :nth-child(4):last-child))) .galerie-auto__liste, :is(.galerie-auto--n5, :where(.galerie-auto:not([data-n]):has(> .galerie-auto__liste > :nth-child(5):last-child))) .galerie-auto__liste,
  :is(.galerie-auto--n6, :where(.galerie-auto:not([data-n]):has(> .galerie-auto__liste > :nth-child(6):last-child))) .galerie-auto__liste, :is(.galerie-auto--plus, :where(.galerie-auto:not([data-n]):has(> .galerie-auto__liste > :nth-child(7)))) .galerie-auto__liste { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  :is(.galerie-auto--n3, :where(.galerie-auto:not([data-n]):has(> .galerie-auto__liste > :nth-child(3):last-child))) .galerie-auto__liste { aspect-ratio: 1312 / 578; grid-template-rows: repeat(2, minmax(0, 1fr)); }
  :is(.galerie-auto--n4, :where(.galerie-auto:not([data-n]):has(> .galerie-auto__liste > :nth-child(4):last-child))) .galerie-auto__liste { aspect-ratio: 1312 / 579; grid-template-rows: repeat(3, minmax(0, 1fr)); }
  :is(.galerie-auto--n3, :where(.galerie-auto:not([data-n]):has(> .galerie-auto__liste > :nth-child(3):last-child))) .galerie-auto__item, :is(.galerie-auto--n4, :where(.galerie-auto:not([data-n]):has(> .galerie-auto__liste > :nth-child(4):last-child))) .galerie-auto__item { grid-column: 9 / 13; }
  :is(.galerie-auto--n3, :where(.galerie-auto:not([data-n]):has(> .galerie-auto__liste > :nth-child(3):last-child))) .galerie-auto__item:first-child { grid-column: 1 / 9; grid-row: 1 / 3; }
  :is(.galerie-auto--n4, :where(.galerie-auto:not([data-n]):has(> .galerie-auto__liste > :nth-child(4):last-child))) .galerie-auto__item:first-child { grid-column: 1 / 9; grid-row: 1 / 4; }
  :is(.galerie-auto--n5, :where(.galerie-auto:not([data-n]):has(> .galerie-auto__liste > :nth-child(5):last-child))) .galerie-auto__liste { aspect-ratio: 1312 / 600; grid-template-rows: repeat(2, minmax(0, 1fr)); }
  :is(.galerie-auto--n6, :where(.galerie-auto:not([data-n]):has(> .galerie-auto__liste > :nth-child(6):last-child))) .galerie-auto__liste, :is(.galerie-auto--plus, :where(.galerie-auto:not([data-n]):has(> .galerie-auto__liste > :nth-child(7)))) .galerie-auto__liste { aspect-ratio: 1312 / 1053; grid-template-rows: 288fr 288fr 429fr; }
  :is(.galerie-auto--n5, :where(.galerie-auto:not([data-n]):has(> .galerie-auto__liste > :nth-child(5):last-child))) .galerie-auto__item, :is(.galerie-auto--n6, :where(.galerie-auto:not([data-n]):has(> .galerie-auto__liste > :nth-child(6):last-child))) .galerie-auto__item, :is(.galerie-auto--plus, :where(.galerie-auto:not([data-n]):has(> .galerie-auto__liste > :nth-child(7)))) .galerie-auto__item { grid-column: span 3; }
  :is(.galerie-auto--n5, :where(.galerie-auto:not([data-n]):has(> .galerie-auto__liste > :nth-child(5):last-child))) .galerie-auto__item:first-child, :is(.galerie-auto--n6, :where(.galerie-auto:not([data-n]):has(> .galerie-auto__liste > :nth-child(6):last-child))) .galerie-auto__item:first-child, :is(.galerie-auto--plus, :where(.galerie-auto:not([data-n]):has(> .galerie-auto__liste > :nth-child(7)))) .galerie-auto__item:first-child { grid-column: 1 / 7; grid-row: 1 / 3; }
  :is(.galerie-auto--n6, :where(.galerie-auto:not([data-n]):has(> .galerie-auto__liste > :nth-child(6):last-child))) .galerie-auto__item:nth-child(6), :is(.galerie-auto--plus, :where(.galerie-auto:not([data-n]):has(> .galerie-auto__liste > :nth-child(7)))) .galerie-auto__item:nth-child(6) { grid-column: 1 / -1; grid-row: 3; }
  :is(.galerie-auto--plus, :where(.galerie-auto:not([data-n]):has(> .galerie-auto__liste > :nth-child(7)))) .galerie-auto__item:nth-child(n + 7) { display: none; }
  :is(.galerie-auto--plus, :where(.galerie-auto:not([data-n]):has(> .galerie-auto__liste > :nth-child(7)))) .galerie-auto__tout { display: inline-flex; }
  .galerie-auto__commandes { display: none; }
}

/* Visionneuse (<dialog> modal plein écran) */
.visionneuse {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--couleur-fond); color: var(--couleur-texte); overflow: hidden;
}
.visionneuse::backdrop { background: var(--couleur-fond); }
.visionneuse__corps {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%;
  padding: max(8px, env(safe-area-inset-top, 0px)) max(var(--grille-marge), env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(var(--grille-marge), env(safe-area-inset-left, 0px));
}
.visionneuse__tete { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-16); min-height: 64px; }
.visionneuse__compteur { font-size: var(--taille-meta); line-height: var(--interlignage-meta); font-variant-numeric: tabular-nums; color: var(--couleur-texte-secondaire); }
.visionneuse__fermer { display: inline-flex; align-items: center; gap: var(--espace-8); min-height: var(--cible-minimum); padding-inline: var(--espace-8); font-weight: 500; font-size: var(--taille-libelle); line-height: var(--interlignage-libelle); }
.visionneuse__fermer:hover span { text-decoration: underline; text-underline-offset: 0.2em; }
.visionneuse__media { display: grid; place-items: center; min-height: 0; margin: 0; }
.visionneuse__media picture { display: contents; }
.visionneuse__media img, .visionneuse__media video { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; background: var(--couleur-filet); }
.visionneuse__media video { width: auto; height: auto; max-width: 100%; max-height: 100%; aspect-ratio: 16 / 9; }
@media (orientation: landscape) { .visionneuse__media video { height: 100%; } }
@media (orientation: portrait) { .visionneuse__media video { width: 100%; } }
.visionneuse__pied { display: grid; grid-template-columns: var(--cible-minimum) minmax(0, 1fr) var(--cible-minimum); gap: var(--espace-8) var(--espace-16); align-items: start; padding-top: var(--espace-16); }
.visionneuse__textes { display: flex; flex-direction: column; gap: var(--espace-4); min-width: 0; max-height: 30vh; overflow-y: auto; }
.visionneuse__legende { font-weight: 500; }
.visionneuse__credit { font-size: var(--taille-meta); line-height: var(--interlignage-meta); color: var(--couleur-texte-secondaire); }
.visionneuse__transcription summary { display: inline-flex; align-items: center; min-height: var(--cible-minimum); cursor: pointer; font-weight: 500; text-decoration: underline; text-underline-offset: 0.2em; }
.visionneuse__transcription p { font-size: var(--taille-meta); line-height: var(--interlignage-meta); max-width: 60em; }
.visionneuse .bouton-icone { border: var(--trait-forme) solid var(--couleur-champ); }
.visionneuse .bouton-icone[aria-disabled="true"] { opacity: 0.4; cursor: default; }
@media (min-width: 1024px) {
  .visionneuse__pied { grid-template-columns: var(--cible-minimum) minmax(0, 1fr) var(--cible-minimum); padding-inline: 0; }
  .visionneuse__media { padding-inline: var(--espace-64); }
}

/* ======================= V2 · carte (§1.16–1.17, V11, R20–R22) =======================
   390 : panneau (recherche, onglets de famille, pastilles), carte 390 × 420 à fond perdu, puis À la une, lieu ou
   parcours choisi, liste. 1 440 : panneau c1–4 qui défile avec la page, carte c5–12 à fond perdu à droite,
   collée sous l'en-tête (≤ 788 px de haut). Le fond (assets/img/carte/fond-carte.svg) est vectoriel, posé en ligne :
   ses couleurs sont celles du mode (Ville clair, Eole nuit, contraste renforcé). */
.carte-ville {
  --cv-terre: color-mix(in srgb, var(--couleur-filet) 32%, var(--couleur-fond));
  --cv-habite: color-mix(in srgb, var(--couleur-filet) 78%, var(--couleur-fond));
  --cv-herbe: color-mix(in srgb, var(--palette-ville-vert-d-yzeron) 12%, var(--cv-terre));
  --cv-bois: color-mix(in srgb, var(--palette-ville-vert-d-yzeron) 22%, var(--cv-terre));
  --cv-eau: color-mix(in srgb, var(--couleur-decor) 40%, var(--cv-terre));
  --cv-riviere: var(--couleur-decor);
  --cv-voie: var(--palette-ville-blanc);
  --cv-bord: color-mix(in srgb, var(--couleur-texte) 16%, var(--cv-habite));
  --cv-sentier: color-mix(in srgb, var(--couleur-texte) 38%, var(--cv-terre));
  --cv-hauteur: 420px;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espace-24); align-items: start;
}
[data-site="eole"] .carte-ville, .carte-ville[data-site="eole"] {
  --cv-terre: color-mix(in srgb, var(--couleur-filet) 45%, var(--couleur-fond));
  --cv-habite: color-mix(in srgb, var(--couleur-filet) 85%, var(--couleur-fond));
  --cv-herbe: color-mix(in srgb, var(--palette-ville-vert-d-yzeron) 22%, var(--cv-terre));
  --cv-bois: color-mix(in srgb, var(--palette-ville-vert-d-yzeron) 34%, var(--cv-terre));
  --cv-eau: color-mix(in srgb, var(--saison-accent) 30%, var(--cv-terre));
  --cv-voie: color-mix(in srgb, var(--couleur-texte) 26%, var(--cv-habite));
  --cv-bord: var(--cv-habite);
  --cv-sentier: color-mix(in srgb, var(--couleur-texte) 42%, var(--cv-terre));
}
[data-contrast="high"] .carte-ville { --cv-bord: color-mix(in srgb, var(--couleur-texte) 55%, var(--cv-habite)); --cv-sentier: var(--couleur-texte); }
.carte-ville :is(h2, h3, h4, h5, h6), .appli :is(h2, h3, h4, h5, h6) { margin: 0; }
.carte-ville__tete, .carte-ville__suite { display: flex; flex-direction: column; gap: var(--espace-24); min-width: 0; }
.carte-ville__onglets { display: flex; border-bottom: var(--trait-filet) solid var(--couleur-filet); }
.carte-ville__onglet {
  position: relative; display: inline-flex; flex-direction: column; justify-content: center; min-height: 48px; padding: var(--espace-8) var(--espace-16) var(--espace-8) 0;
  margin-right: var(--espace-16); font-weight: 500; font-size: var(--taille-libelle); line-height: var(--interlignage-libelle); color: var(--couleur-texte-secondaire);
}
.carte-ville__onglet[aria-selected="true"] { color: var(--couleur-texte); }
.carte-ville__onglet[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: var(--espace-16); bottom: -1px; height: 3px; background: var(--couleur-action); }
.carte-ville__onglet:hover { color: var(--couleur-texte); }
.carte-ville__aide { font-weight: 400; font-size: var(--taille-meta); line-height: var(--interlignage-meta); color: var(--couleur-texte-secondaire); }
.carte-ville__pastilles .pastille { padding-inline: var(--espace-16); }
.carte-ville__evitement { position: absolute; left: -10000px; }
.carte-ville__evitement:focus { position: static; align-self: flex-start; }
.carte-ville__carte {   /* la région de la carte : fond perdu à 390 */
  position: relative; height: var(--cv-hauteur); min-height: 0; margin-inline: calc(max(var(--grille-marge), env(safe-area-inset-left, 0px)) * -1);
  overflow: hidden; background: var(--cv-terre); border-block: var(--trait-filet) solid var(--couleur-filet); touch-action: pan-y;
}
.carte-ville__carte[data-etat="vide"] { display: grid; place-items: center; padding: var(--espace-24); text-align: center; font-size: var(--taille-meta); line-height: var(--interlignage-meta); color: var(--couleur-texte-secondaire); }
.cv-vue { position: absolute; inset: 0; overflow: hidden; cursor: grab; }
.cv-vue:active { cursor: grabbing; }
.cv-vue:focus-visible { outline-offset: -6px; box-shadow: inset 0 0 0 9px var(--couleur-focus-exterieur); }
.cv-plan { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.cv-plan > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cv-terre { fill: var(--cv-terre); }
.cv-habite { fill: var(--cv-habite); }
.cv-champ { fill: var(--cv-terre); }
.cv-herbe, .cv-sport { fill: var(--cv-herbe); }
.cv-bois { fill: var(--cv-bois); }
.cv-eau { fill: var(--cv-eau); }
.cv-riviere, .cv-ruisseau, .cv-sentier, .cv-bord, .cv-voie, .cv-trace, .cv-trace-halo { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.cv-riviere { stroke: var(--cv-riviere); stroke-width: calc(2.5px * var(--cv-f, 1)); }
.cv-ruisseau { stroke: var(--cv-riviere); stroke-width: calc(1.5px * var(--cv-f, 1)); }
.cv-sentier { stroke: var(--cv-sentier); stroke-width: 1px; stroke-dasharray: 2 3; }
.cv-bord { stroke: var(--cv-bord); }
.cv-voie { stroke: var(--cv-voie); }
.cv-bord.cv-r1 { stroke-width: calc(6.5px * var(--cv-f, 1)); } .cv-voie.cv-r1 { stroke-width: calc(5px * var(--cv-f, 1)); }
.cv-bord.cv-r2 { stroke-width: calc(5px * var(--cv-f, 1)); }   .cv-voie.cv-r2 { stroke-width: calc(3.6px * var(--cv-f, 1)); }
.cv-bord.cv-r3 { stroke-width: calc(3.6px * var(--cv-f, 1)); } .cv-voie.cv-r3 { stroke-width: calc(2.4px * var(--cv-f, 1)); }
.cv-bord.cv-r4 { stroke-width: calc(2.4px * var(--cv-f, 1)); } .cv-voie.cv-r4 { stroke-width: calc(1.3px * var(--cv-f, 1)); }
/* parcours : 4 px texte (tireté 4/4 = approximatif ; aucun tracé publié), contour linge 2 px */
.cv-trace-halo { stroke: var(--couleur-fond); stroke-width: 8px; }
.cv-trace { stroke: var(--couleur-texte); stroke-width: 4px; }
.cv-trace--approchee { stroke-dasharray: 4 4; stroke-linecap: butt; }
.cv-reperes { position: absolute; inset: 0; pointer-events: none; }
.cv-repere {
  position: absolute; left: 0; top: 0; z-index: 1; width: 44px; height: 44px; display: grid; place-items: center; pointer-events: auto;
  background: var(--couleur-fond); color: var(--couleur-texte); border: var(--trait-forme) solid var(--couleur-texte);
  font-weight: 500; font-size: var(--taille-libelle); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cv-repere .ico { width: 24px; height: 24px; }
.cv-repere--approchee { border-style: dashed; }
.cv-repere:hover { background: color-mix(in srgb, var(--couleur-action) 12%, var(--couleur-fond)); }
.cv-repere[aria-pressed="true"] { z-index: 3; background: var(--couleur-action); color: var(--couleur-action-texte); border-color: var(--couleur-action); box-shadow: 0 0 0 2px var(--couleur-fond); }
.cv-repere--une { z-index: 2; }
.cv-repere--une::before { content: ""; position: absolute; inset: -6px; border: 3px solid var(--couleur-action); pointer-events: none; }
.cv-repere__etiquette { display: none; }
.cv-repere--groupe { border-width: 2px; }
.cv-repere--groupe::after { content: ""; position: absolute; inset: 3px -6px -6px 3px; z-index: -1; border: var(--trait-forme) solid var(--couleur-texte); background: var(--couleur-fond); }
.cv-repere--etape { z-index: 2; }
.cv-repere--etapes { width: auto; min-width: 44px; padding-inline: 6px; font-size: var(--taille-meta); letter-spacing: -0.01em; }
.cv-repere:focus-visible { z-index: 4; }
.cv-commandes { position: absolute; right: max(8px, env(safe-area-inset-right, 0px)); bottom: 8px; z-index: 5; display: flex; flex-direction: column; gap: var(--espace-4); }
.cv-commandes .bouton-icone { background: var(--couleur-fond); color: var(--couleur-texte); border: var(--trait-forme) solid var(--couleur-texte); }
.cv-commandes .bouton-icone:hover { background: color-mix(in srgb, var(--couleur-action) 12%, var(--couleur-fond)); }
.cv-commandes .bouton-icone[aria-disabled="true"] { color: var(--couleur-texte-secondaire); border-color: var(--couleur-champ); cursor: default; }
.cv-credit {
  position: absolute; left: max(8px, env(safe-area-inset-left, 0px)); bottom: 8px; z-index: 5; max-width: calc(100% - 76px); padding: var(--espace-4) var(--espace-8);
  background: var(--couleur-fond); color: var(--couleur-texte-secondaire); font-size: var(--taille-meta); line-height: var(--interlignage-meta);
}
.cv-credit a { color: inherit; }
.cv-legende { font-size: var(--taille-meta); line-height: var(--interlignage-meta); color: var(--couleur-texte-secondaire); }
.cv-legende__echantillon { display: inline-block; width: 14px; height: 14px; margin-right: var(--espace-4); vertical-align: -2px; border: var(--trait-forme) solid var(--couleur-texte); }
.cv-legende__echantillon--approchee { border-style: dashed; }
.cv-erreur { position: absolute; inset: auto 16px 50% 16px; padding: var(--espace-16); background: var(--couleur-fond); border: var(--trait-forme) dashed var(--couleur-champ); font-size: var(--taille-meta); line-height: var(--interlignage-meta); text-align: center; }
/* À la une sur la carte (R20) */
.cv-une { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--espace-16); padding-block: var(--espace-16); border-block: var(--trait-filet) solid var(--couleur-filet); }
.cv-une__image { position: relative; width: 96px; }
.cv-une__image img { width: 96px; height: 96px; object-fit: cover; }
.cv-une__credit { display: block; margin-top: var(--espace-4); font-size: var(--taille-meta); line-height: var(--interlignage-meta); color: var(--couleur-texte-secondaire); }
.cv-une__textes { display: flex; flex-direction: column; gap: var(--espace-4); min-width: 0; }
.cv-une__surtitre { font-size: var(--taille-meta); line-height: var(--interlignage-meta); color: var(--couleur-texte-secondaire); }
.cv-une__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-8) var(--espace-24); }
/* lieu ou parcours choisi (Bloc réponse) */
.cv-choix { display: flex; flex-direction: column; gap: var(--espace-16); padding: var(--espace-16) 0; border-top: 3px solid var(--couleur-action); }
.cv-choix__surtitre { margin-bottom: calc(var(--espace-8) - var(--espace-16)); font-size: var(--taille-meta); line-height: var(--interlignage-meta); color: var(--couleur-texte-secondaire); }
.cv-choix__tete { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--espace-8); }
.cv-choix__titre { padding-top: 10px; }
.cv-choix:focus { outline: none; }
.cv-choix .liste .ligne__textes .t-meta { display: block; }
.cv-etapes .ligne__lien { cursor: default; }
/* liste des lieux (l'équivalent texte de la carte) */
.cv-liste { display: flex; flex-direction: column; gap: var(--espace-24); }
.cv-liste__section { display: flex; flex-direction: column; gap: var(--espace-8); }
.cv-liste__compte { font-size: var(--taille-meta); line-height: var(--interlignage-meta); color: var(--couleur-texte-secondaire); }
.cv-ligne { display: flex; align-items: flex-start; gap: var(--espace-16); width: 100%; min-height: 56px; padding-block: var(--espace-16); text-align: left; color: var(--couleur-texte); }
.cv-ligne > .ico:first-child { margin-top: 2px; color: var(--couleur-action); }
.cv-ligne > .ico:last-child { margin-left: auto; align-self: center; color: var(--couleur-action); }
.cv-ligne:hover .t-titre-ligne { color: var(--couleur-action); text-decoration: underline; text-underline-offset: 0.18em; }
.cv-ligne[aria-pressed="true"] { box-shadow: inset 3px 0 0 var(--couleur-action); padding-left: var(--espace-8); }
.cv-ligne__textes { display: flex; flex-direction: column; gap: var(--espace-4); min-width: 0; }
.cv-ligne__textes .t-meta { display: block; }
.cv-ligne__approchee { font-style: normal; }
@media (min-width: 1024px) {
  .carte-ville { --cv-hauteur: clamp(480px, calc(100vh - var(--haut-entete) - 48px), 788px); grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: var(--grille-gouttiere); row-gap: var(--espace-24); }
  .carte-ville__tete { grid-column: 1 / 5; grid-row: 1; }
  .carte-ville__suite { grid-column: 1 / 5; grid-row: 2; }
  .carte-ville__carte {
    grid-column: 5 / 13; grid-row: 1 / span 2; align-self: start; position: sticky; top: calc(var(--haut-entete) + 24px);
    margin-inline: 0 calc(max(var(--grille-marge), env(safe-area-inset-right, 0px)) * -1); border-block: 0; border-left: var(--trait-filet) solid var(--couleur-filet);
  }
  .cv-repere__etiquette {
    display: block; position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); padding: 2px var(--espace-8);
    background: var(--couleur-fond); color: var(--couleur-texte); border: var(--trait-filet) solid var(--couleur-filet);
    font-size: var(--taille-meta); line-height: var(--interlignage-meta); font-weight: 500;
  }
  .cv-repere[aria-pressed="true"] .cv-repere__etiquette { color: var(--couleur-texte); }
}

/* ======================= V2 · frise (V18, R24) ======================= */
@property --fc-trace { syntax: '<number>'; inherits: true; initial-value: 1; }
/* ---------------------------------------------------------------------
   <ol> des dates sourcées ; l'axe reprend l'aqueduc : trait plein = date attestée, tireté 4/4 = date incertaine
   ou sources contradictoires ; point plein 12 × 12 = date sûre, point en contour = date approchée ou discutée.
   390 : axe vertical à x 40, textes à x 64. 1 440 : dates c1–3, axe à x 410, texte c5–9, source et lien c10–12. */
.frise-chrono { display: flex; flex-direction: column; gap: var(--espace-40); }
.frise-chrono__periodes .pastille[aria-current="true"] { background: var(--couleur-action); color: var(--couleur-action-texte); border-color: var(--couleur-action); }
.frise-chrono__periodes .pastille { text-decoration: none; }
.frise-chrono__legende { display: flex; flex-wrap: wrap; gap: var(--espace-8) var(--espace-24); font-size: var(--taille-meta); line-height: var(--interlignage-meta); color: var(--couleur-texte-secondaire); }
.frise-chrono__legende span { display: inline-flex; align-items: center; gap: var(--espace-8); }
.frise-chrono__legende i { display: inline-block; width: 24px; height: 0; border-top: var(--trait-forme) solid var(--couleur-decor); }
.frise-chrono__legende i.tirets { border-top-style: dashed; }
.frise-chrono__liste { position: relative; }
.frise-chrono__entree {
  --fc-axe: 16px; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--espace-8);
  padding: 0 0 var(--espace-40) 40px; scroll-margin-top: calc(var(--haut-entete) + var(--espace-24));
}
.frise-chrono__entree::before {   /* segment d'axe : du point de cette date au point de la suivante */
  content: ""; position: absolute; left: calc(var(--fc-axe) - 0.75px); top: 14px; bottom: -14px; width: var(--trait-forme);
  background: var(--couleur-decor); transform-origin: 50% 0; transform: scaleY(var(--fc-trace));
}
.frise-chrono__entree--incertaine::before { background: repeating-linear-gradient(to bottom, var(--couleur-decor) 0 4px, transparent 4px 8px); }
.frise-chrono__entree:last-child::before { display: none; }
.frise-chrono__point { position: absolute; left: calc(var(--fc-axe) - 6px); top: 10px; width: 12px; height: 12px; background: var(--couleur-decor); border: var(--trait-forme) solid var(--couleur-decor); transform-origin: 50% 50%; }
.frise-chrono__entree--approchee .frise-chrono__point { background: var(--couleur-fond); }
.frise-chrono__entree--jalon .frise-chrono__point { top: 40px; }
.frise-chrono__entree--jalon::before { top: 46px; }
.frise-chrono__entree:has(+ .frise-chrono__entree--jalon)::before { bottom: -46px; }   /* rejoint le point plus bas d'un jalon */
.frise-chrono__date { display: inline-block; justify-self: start; color: inherit; text-decoration: none; font-size: var(--taille-titre-section); line-height: var(--interlignage-titre-section); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.frise-chrono__date:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.12em; }
.frise-chrono__entree--jalon .frise-chrono__date { font-size: 96px; line-height: 96px; letter-spacing: -0.03em; }
.frise-chrono__fait { max-width: 34em; }
.frise-chrono__source, .frise-chrono__note { font-size: var(--taille-meta); line-height: var(--interlignage-meta); color: var(--couleur-texte-secondaire); max-width: 40em; }
.frise-chrono__note strong { font-weight: 500; color: var(--couleur-texte); }
.frise-chrono__suite { display: flex; flex-direction: column; gap: var(--espace-4); align-items: flex-start; }
.frise-chrono__entree:target { background: linear-gradient(to right, transparent 32px, color-mix(in srgb, var(--couleur-action) 8%, var(--couleur-fond)) 32px); }
.frise-chrono__entree[data-a-tracer] { --fc-trace: 0; }
.frise-chrono__entree[data-a-tracer] .frise-chrono__point { transform: scale(0); }
@media (min-width: 1024px) {
  .frise-chrono__entree {
    --fc-axe: calc((100% - 11 * var(--grille-gouttiere)) / 12 * 3 + 3 * var(--grille-gouttiere) + 12px);   /* x 410 à 1 440 */
    grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grille-gouttiere); padding-left: 0; padding-bottom: var(--espace-64); align-items: start;
  }
  .frise-chrono__date { grid-column: 1 / 4; grid-row: 1 / span 3; font-size: var(--taille-titre-section); line-height: var(--interlignage-titre-section); }
  .frise-chrono__entree--jalon .frise-chrono__date { font-size: 96px; line-height: 88px; }
  .frise-chrono__entree > :not(.frise-chrono__date):not(.frise-chrono__point):not(.frise-chrono__suite) { grid-column: 5 / 10; }
  .frise-chrono__suite { grid-column: 10 / 13; grid-row: 1 / span 3; }
  .frise-chrono__point { top: 20px; }
  .frise-chrono__entree::before { top: 26px; bottom: -26px; }
  .frise-chrono__entree--jalon .frise-chrono__point { top: 42px; }
  .frise-chrono__entree--jalon::before { top: 48px; }
  .frise-chrono__entree:has(+ .frise-chrono__entree--jalon)::before { bottom: -48px; }
  .frise-chrono__entree:target { background: linear-gradient(to right, transparent calc(var(--fc-axe) + 16px), color-mix(in srgb, var(--couleur-action) 8%, var(--couleur-fond)) calc(var(--fc-axe) + 16px)); }
}
.frise-chrono__jour { display: block; font-size: var(--taille-titre-ligne); line-height: var(--interlignage-titre-ligne); letter-spacing: 0; font-weight: 500; }