/* ==========================================================================
   AO Craponne · prototype v2 — pages du groupe « eole-accueil »
   E1 Home Eole · E3 La saison 2026-2027 · E9 Actualités d'Eole (liste et article).
   Cadres Figma : section 228:31911 (07-pages-v2-eole-notes.md). Seulement des compléments
   locaux aux blocs du socle (blocs.css n'est pas modifié) ; toutes les couleurs par les jetons.
   ========================================================================== */

/* ---------- Socle, écarts V2 relevés sur les cadres (corrigés ici, signalés dans les notes) ---------- */
/* Séance V2 : rangée de 88 à 1 440 (16 + 56 + 16), 176 à 390 : padding 16, pas 24 */
.seance { padding-block: var(--espace-16); }
.liste--sans-filet { border-top: 0; }
.insecable { white-space: nowrap; }
.carte__quand { font-weight: 500; font-size: var(--taille-libelle); line-height: var(--interlignage-libelle); }

/* ---------- Démonstration de la couleur de saison (E1, demandé par Vi) ---------- */
.saison-demo { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--espace-16); padding-block: var(--espace-16) 0; }
.saison-demo__libelle { flex-basis: 100%; }
.saison-demo__choix { display: flex; flex-wrap: wrap; gap: 0 var(--espace-8); margin-left: calc(var(--espace-8) * -1); }
.saison-demo__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);
}
.saison-demo__bouton[aria-pressed="true"] { color: var(--couleur-texte); font-weight: 500; text-decoration: underline; text-underline-offset: 0.2em; }
.saison-demo__pastille { width: 16px; height: 16px; flex: none; background: var(--c); }
.saison-demo__bouton[aria-pressed="true"] .saison-demo__pastille { outline: var(--trait-forme) solid var(--couleur-texte); outline-offset: 2px; }
.saison-demo__etats { display: flex; flex-wrap: wrap; gap: 0 var(--espace-16); flex-basis: 100%; }
.saison-demo__etats a { display: inline-flex; align-items: center; min-height: var(--cible-minimum); font-size: var(--taille-meta); line-height: var(--interlignage-meta); color: var(--couleur-texte-secondaire); text-underline-offset: 0.2em; }
@media (min-width: 1024px) { .saison-demo__libelle { flex-basis: auto; } }

/* ---------- E1 · Héros : l'image d'abord (390 × 390 / 1 440 × 480), le titre sous l'image (R17) ---------- */
/* Une seule image, son masque par largeur (une url() écrite dans la feuille se résout depuis la feuille). */
.heros-eole--tcl .photo__image { aspect-ratio: 1; }
.heros-eole--tcl .photo__encre { -webkit-mask-image: url('../../img/eole/tout-contre-la-terre-masque-390.webp'); mask-image: url('../../img/eole/tout-contre-la-terre-masque-390.webp'); -webkit-mask-position: 50% 50%; mask-position: 50% 50%; }
.heros-eole .photo--fondu .photo__credit { bottom: var(--espace-8); }
/* 390 : surtitre 478–500 · titre 508–612 · date 620–648 · compagnie 652–674 · « Réserver » 694–750 (≤ 756) */
.heros-eole__corps { gap: 0; padding-top: var(--espace-24); }
.heros-eole__ligne, .heros-eole__meta { display: contents; }
.heros-eole__surtitre { order: 1; }
.heros-eole__titre { order: 2; margin-block: var(--espace-8) 0; }
.heros-eole__date { order: 3; margin-top: var(--espace-8); display: block; width: fit-content; }
.heros-eole__compagnie { order: 4; margin-top: var(--espace-4); }
.heros-eole__actions { order: 5; margin-top: 20px; }
@media (min-width: 1024px) {
  .heros-eole--tcl .photo__image { aspect-ratio: 3 / 1; }
  .heros-eole--tcl .photo__encre { -webkit-mask-image: url('../../img/eole/tout-contre-la-terre-masque-1440.webp'); mask-image: url('../../img/eole/tout-contre-la-terre-masque-1440.webp'); }
  /* 1 440 : image 112–592 · titre 160/144 sur une ligne 616–760 · rangée 784–840 */
  .heros-eole__corps { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grille-gouttiere); }
  .heros-eole__titre, .heros-eole__surtitre, .heros-eole__date, .heros-eole__compagnie, .heros-eole__actions { order: 0; }
  .heros-eole__titre { grid-row: 1; grid-column: 1 / -1; margin: 0; }
  .heros-eole__ligne { display: grid; grid-row: 2; grid-column: 1 / -1; margin-top: var(--espace-24); }
  .heros-eole__meta { display: block; grid-column: 1 / 6; }
  .heros-eole__surtitre, .heros-eole__date { display: inline-block; margin: 0; color: var(--couleur-texte); font-size: var(--taille-meta); line-height: var(--interlignage-meta); }
  .heros-eole__surtitre::after { content: " · "; white-space: pre; }
  .heros-eole__compagnie { margin-top: 0; }
  .heros-eole__actions { grid-column: 6 / 10; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--grille-gouttiere); margin-top: 0; }
  .heros-eole__actions > .bouton { grid-column: 1 / 3; justify-self: start; }
  .heros-eole__actions > .lien-fleche { grid-column: 3 / 5; justify-self: start; }
}

/* ---------- Têtes de section : titre puis méta (16), puis le contenu (16 à 390, 40 à 1 440) ---------- */
.tete-section { display: flex; flex-direction: column; gap: var(--rythme-titre-texte); }
.tete-section + * { margin-top: var(--rythme-titre-texte); }
.section-pile > * + * { margin-top: var(--rythme-bloc); }
@media (min-width: 1024px) { .tete-section + * { margin-top: var(--rythme-bloc); } }

/* ---------- E1 · Cette semaine au Cin'Eole : une rangée par jour à 1 440 (numéro 96 c1–2, séances c3–12) ---------- */
.jours-cineole { display: flex; flex-direction: column; gap: var(--rythme-bloc); }
.jours-cineole .jour__tete { display: flex; flex-direction: column; gap: var(--espace-8); }
.jours-cineole .jour__numero { font-size: 96px; line-height: 96px; }
@media (min-width: 1024px) {
  .jours-cineole .jour__tete { grid-column: 1 / 3; }
  .jours-cineole .jour__liste { grid-column: 3 / 13; border-top: 0; }
}
.periode { display: flex; flex-direction: column; gap: var(--espace-16); }
.periode__libelle { display: none; }
.carte-periode { gap: var(--espace-4); }
.carte-periode .carte__titre { font-family: var(--police-serif); font-weight: 400; font-size: var(--taille-eole-titre-spectacle); line-height: var(--interlignage-eole-titre-spectacle); letter-spacing: -0.01em; padding-block: var(--espace-4); }
.carte-periode .carte__quand { font-weight: 500; font-size: var(--taille-libelle); line-height: var(--interlignage-libelle); }
@media (min-width: 1024px) {
  .periode { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grille-gouttiere); }
  .periode__libelle { display: block; grid-column: 1 / 3; }
  .periode .carte-periode { grid-column: 3 / 7; }
}

/* ---------- Carte spectacle · Eole (Carte événement avec photo, couleur réelle D16, crédit D18) ---------- */
.cartes-spectacle { display: grid; row-gap: var(--rythme-bloc); column-gap: var(--grille-gouttiere); }
.carte-spectacle { padding-block: 0; border-bottom: 0; height: 100%; }
.carte-spectacle .photo__image { background: var(--couleur-filet); }
.carte-spectacle .carte__date { font-size: var(--taille-meta); line-height: var(--interlignage-meta); color: var(--couleur-texte); }
.carte-spectacle .carte__titre { padding-block: var(--espace-4); }
.carte-spectacle .carte__action { margin-top: auto; }
.carte-spectacle .couverture { aspect-ratio: 3 / 2; }
@media (min-width: 1024px) {
  .cartes-spectacle--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  [data-site="eole"] .carte-spectacle .carte__titre { font-size: 56px; line-height: 52px; }
  .carte-spectacle .carte__textes { margin-bottom: var(--espace-24); }
}
.saison-suite { display: flex; flex-direction: column; gap: var(--espace-16); }
.ligne--doc .ligne__lien { min-height: 84px; padding-block: var(--espace-16); align-items: flex-start; }
.ligne--doc .ligne__lien > .ico:first-child { margin-top: 2px; }
.ligne__lien .lien-texte { color: var(--couleur-action); font-weight: 500; font-size: var(--taille-libelle); line-height: var(--interlignage-libelle); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.ligne--doc .liste, .saison-suite .liste { border-top: 0; }
@media (min-width: 1024px) {
  .saison-suite { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grille-gouttiere); align-items: center; }
  .saison-suite > .lien-fleche { grid-column: 1 / 5; }
  .saison-suite > .liste { grid-column: 5 / 13; }
}

/* ---------- Section en aplat Eole (D19) : texte c1–7 à 1 440 ---------- */
/* 390 : titre → paragraphe 40, paragraphe → méta 16, méta → bouton 24 (cadre 228:36120) */
.aplat__textes > .aplat__paragraphe { margin-top: var(--espace-24); }
.aplat__meta { font-size: var(--taille-meta); line-height: var(--interlignage-meta); }

/* ---------- Actualités d'Eole (R19) : les cartes de la Ville en mode Eole ---------- */
.actus-eole { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--espace-24); }
.actus-eole > * { min-width: 0; }
.actus-eole .carrousel-cartes { margin-top: var(--espace-16); }
.carte-actu .photo__image, .carte-actu .couverture { aspect-ratio: 3 / 2; }
.carte-actu__chapo { font-size: var(--taille-texte); line-height: var(--interlignage-texte); }
.carte-actu--une .carte__textes { gap: var(--espace-8); }
@media (min-width: 1024px) {
  .actus-eole { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grille-gouttiere); row-gap: var(--rythme-bloc); align-items: start; }
  .actus-eole > h2 { grid-column: 1 / 9; }
  .actus-eole > .carte-actu--une { grid-column: 1 / 7; }
  .actus-eole > .carrousel-cartes { grid-column: 7 / 13; margin-top: 0; min-width: 0; }
  .actus-eole .carrousel-cartes__piste { margin-inline: -6px; padding-inline: 6px; scroll-padding-inline: 6px; }
  /* ‹ › et « Toutes les actualités » dans l'en-tête de section, à droite (c9–12) */
  .actus-eole .carrousel-cartes__commandes { position: absolute; top: 4px; right: max(var(--grille-marge), env(safe-area-inset-right, 0px)); }
  .actus-eole .carrousel-cartes__commandes .lien-fleche { order: 2; margin: 0 0 0 var(--espace-24); }
}

/* ---------- Eole, pour tous les publics : 4 lignes avec icône (R1) ; 4 × 3 colonnes à 1 440 ---------- */
.publics { border-top: 0; }
.publics .ligne__lien { min-height: 56px; font-size: var(--taille-titre-ligne); line-height: var(--interlignage-titre-ligne); }
@media (min-width: 1024px) {
  .publics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--grille-gouttiere); border-top: 0; }
  .publics .ligne__lien { height: 100%; min-height: 88px; }
}

/* ---------- Lettre d'Eole (R15) ---------- */
.lettre .t-titre-section { min-width: 0; }
.lettre__recevrez li { padding-bottom: var(--espace-16); border-bottom: var(--trait-filet) solid var(--couleur-filet); }
/* le champ sur toute la largeur, « S'inscrire » dessous (cadres 228:35827 / 228:38265) */
.lettre__form { flex-direction: column; align-items: flex-start; }
.lettre__form .champ { flex: none; width: 100%; }

/* ---------- Pages intérieures : titre, fil ---------- */
/* 390 : fil 64–108, H1 à 132 (24 sous le fil) ; 1 440 : 40 sous la rangée de situation */
.titre-page--eole { padding-top: var(--espace-24); padding-bottom: var(--espace-24); }
@media (min-width: 1024px) { .titre-page--eole { padding-top: var(--espace-40); padding-bottom: var(--espace-40); } }

/* ---------- E3 · Filtres d'agenda, compteur, onglets Liste · Mois ---------- */
.saison-filtres { display: flex; flex-direction: column; gap: var(--espace-24); }
.saison-filtres .champ { max-width: 240px; }
.saison-filtres .filtres__legende { font-weight: 500; font-size: var(--taille-libelle); line-height: var(--interlignage-libelle); color: var(--couleur-texte); }
.saison-compte { min-height: 0; }
.saison-compte:empty { display: none; }
.saison-vide { display: flex; flex-direction: column; gap: var(--espace-8); align-items: flex-start; }
.onglets { display: flex; gap: var(--espace-40); border-bottom: var(--trait-filet) solid var(--couleur-filet); }
.onglets__onglet {
  position: relative; display: inline-flex; align-items: center; min-height: 48px;
  font-weight: 500; font-size: var(--taille-libelle); line-height: var(--interlignage-libelle); color: var(--couleur-texte-secondaire);
}
.onglets__onglet:hover { color: var(--couleur-texte); }
.onglets__onglet[aria-selected="true"] { color: var(--couleur-texte); }
.onglets__onglet[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--couleur-action); }
.saison-mois { display: flex; flex-direction: column; gap: var(--espace-16); }
.saison-mois + .saison-mois { margin-top: var(--espace-64); }
.saison-liste { padding-top: var(--espace-64); }
.saison-liste .cartes-spectacle { row-gap: var(--rythme-bloc); }
.saison-fin { display: flex; flex-direction: column; gap: var(--espace-16); align-items: flex-start; }
.saison-fin .liste { align-self: stretch; border-top: 0; }
[data-site="eole"] .carte-spectacle--periode .carte__titre { font-family: var(--police-sans); font-size: var(--taille-titre-section); line-height: var(--interlignage-titre-section); letter-spacing: -0.02em; }
@media (min-width: 1024px) {
  .saison-fin .liste { max-width: 644px; }
  [data-site="eole"] .carte-spectacle--periode .carte__titre { font-size: var(--taille-titre-section); line-height: var(--interlignage-titre-section); }
}
@media (min-width: 1024px) {
  .saison-liste .cartes-spectacle { row-gap: 0; }
  /* une rangée par spectacle : visuel c1–3 (310 × 207) · texte c4–9 · « Réserver » c11–12 */
  .carte-spectacle--rangee { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grille-gouttiere); row-gap: 0; align-items: start; padding-block: var(--espace-24); border-bottom: var(--trait-filet) solid var(--couleur-filet); }
  .carte-spectacle--rangee > .photo, .carte-spectacle--rangee > .couverture { grid-column: 1 / 4; grid-row: 1 / 3; }
  .carte-spectacle--rangee > .carte__textes { grid-column: 4 / 10; grid-row: 1; margin: 0; }
  .carte-spectacle--rangee > .carte__action, .carte-spectacle--rangee > .carte-spectacle__action-groupe { grid-column: 11 / 13; grid-row: 1; margin: 0; justify-self: start; }
  .saison-mois { gap: var(--espace-24); }
}

/* Vue « Mois » : un tableau par mois, les jours de spectacle en boutons (44) qui ouvrent la carte dans la liste */
.calendrier { display: flex; flex-direction: column; gap: var(--espace-64); padding-top: var(--espace-64); }
.calendrier__mois { display: flex; flex-direction: column; gap: var(--espace-16); }
.calendrier__table { width: 100%; max-width: 616px; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.calendrier__table th { padding-bottom: var(--espace-8); font-weight: 400; font-size: var(--taille-meta); line-height: var(--interlignage-meta); color: var(--couleur-texte-secondaire); text-align: center; }
.calendrier__table td { height: 48px; padding: 2px; text-align: center; vertical-align: middle; border-top: var(--trait-filet) solid var(--couleur-filet); font-size: var(--taille-libelle); color: var(--couleur-texte-secondaire); }
.calendrier__jour {
  display: inline-grid; place-items: center; width: 100%; max-width: 64px; min-height: var(--cible-minimum);
  font-weight: 500; font-size: var(--taille-libelle); color: var(--couleur-action-texte); background: var(--couleur-action);
}
.calendrier__jour:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.calendrier__liste { display: flex; flex-direction: column; }
.calendrier__liste li { border-bottom: var(--trait-filet) solid var(--couleur-filet); }
.calendrier__liste button { display: flex; flex-wrap: wrap; gap: 0 var(--espace-16); width: 100%; min-height: 48px; padding-block: var(--espace-8); text-align: left; font-size: var(--taille-libelle); line-height: var(--interlignage-libelle); }
.calendrier__liste button span:first-child { color: var(--couleur-texte-secondaire); min-width: 9ch; }
.calendrier__liste button:hover span:last-child { color: var(--couleur-action); text-decoration: underline; text-underline-offset: 0.18em; }

/* ---------- E9 · Liste : Mise en avant + lignes à vignette (390) ; Mise en avant c1–6 + 2 × 2 c7–12 puis une rangée (1 440) ---------- */
/* une seule liste : la Mise en avant puis les autres, posées par la grille (auto-placement) */
.actus-liste__une { margin-bottom: var(--rythme-bloc); }
.actus-liste__une + li > .carte-actu--vignette { border-top: var(--trait-filet) solid var(--couleur-filet); }
@media (max-width: 1023.98px) {
  .carte-actu--vignette { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: var(--espace-16); align-items: start; padding-block: var(--espace-16); border-bottom: var(--trait-filet) solid var(--couleur-filet); }
  .carte-actu--vignette > .photo, .carte-actu--vignette > .couverture { grid-column: 1; grid-row: 1 / 3; }
  .carte-actu--vignette .photo__image, .carte-actu--vignette > .couverture { aspect-ratio: 1; }
  .carte-actu--vignette .photo__credit { position: static; display: block; max-width: none; padding: var(--espace-4) 0 0; background: none; }
  .carte-actu--vignette > .carte__textes { grid-column: 2; }
}
@media (min-width: 1024px) {
  .actus-liste { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grille-gouttiere); row-gap: var(--rythme-bloc); align-items: start; }
  .actus-liste > li { grid-column: span 3; }
  .actus-liste > .actus-liste__une { grid-column: 1 / 7; grid-row: span 2; margin-bottom: 0; }
  .actus-liste__une + li > .carte-actu--vignette { border-top: 0; }
}
.actus-vide { font-size: var(--taille-texte); line-height: var(--interlignage-texte); }

/* ---------- E9 · Article : une colonne (c3–8), sans colonne de droite (D23) ---------- */
.article-eole__tete { display: flex; flex-direction: column; gap: var(--rythme-titre-texte); align-items: flex-start; padding-block: var(--espace-24) 0; }
.article-eole__chapo { max-width: 38em; }
.article-eole__tete h1, .titre-page--eole h1 { overflow-wrap: break-word; }
.article-eole__action { margin-top: var(--espace-8); }
.article-eole__image { margin-top: var(--espace-64); }
.article-eole__corps > * + * { margin-top: var(--rythme-section); }
.article-eole__corps > .partager { margin-top: var(--rythme-bloc); }
.article-eole__galerie { margin-top: var(--espace-40); }
@media (min-width: 1024px) { .article-eole__galerie { margin-top: var(--espace-64); } }
.article-eole__texte { display: flex; flex-direction: column; gap: var(--espace-16); align-items: flex-start; }
.article-eole .galerie-auto { margin-inline: 0; }
.partager { display: flex; flex-direction: column; gap: var(--espace-16); }
.partager__actions { display: flex; flex-wrap: wrap; gap: var(--espace-16); }
.meme-categorie__liste { border-top: var(--trait-filet) solid var(--couleur-filet); }
@media (min-width: 1024px) {
  .article-eole__tete { grid-column: 3 / 11; padding-top: var(--espace-64); }
  .article-eole__colonne { grid-column: 3 / 9; }
  .article-eole__large { grid-column: 1 / -1; }
  .meme-categorie__liste { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grille-gouttiere); border-top: 0; }
  .meme-categorie__liste > li { grid-column: span 3; }
}