/* ==========================================================================
   AO Craponne · prototype v2 — pages Eole du groupe « eole-pages »
   E2 hub Jeune public · E4 fiche spectacle · E5 séances · E6 fiche film · E7 série · E8 billetterie
   et Venir à Eole · E10 formulaire · E11 recherche et 404 · E12 accessibilité de la salle.
   Seulement ce que le socle n'a pas (blocs.css reste intact) ; couleurs et tailles par les jetons.
   Placements : 390 = 4 col. / 24 / 16 ; 1 440 = 12 col. / 64 / 24 (c1 64 · c7 732 · c8 843 · c9 955 · c10 1 066).
   ========================================================================== */

/* ---------- Utilitaires ---------- */
@media (max-width: 1023.98px) {
  .ep-sr-mobile {            /* titre présent pour la structure, masqué à 390 comme dans le cadre Figma */
    position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
}
.ep-lien { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.ep-lien:hover { text-decoration-thickness: 2px; }
.ep-lien-action {           /* lien dans une valeur (Itinéraire, Qui a droit…) : souligné, couleur d'action, cible 44 */
  display: inline-flex; align-items: center; gap: var(--espace-4); min-height: var(--cible-minimum);
  color: var(--couleur-action); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px;
}
.ep-lien-action:hover { text-decoration-thickness: 2px; }
.ep-courriel { overflow-wrap: anywhere; }
.ep-secondaire { color: var(--couleur-texte-secondaire); }
.ep-fort { font-weight: 500; }
.ep-pile { display: flex; flex-direction: column; gap: var(--rythme-titre-texte); align-items: flex-start; }
.ep-pile > * { max-width: 100%; }

/* Titres d'Eole fluides à 320 : dans le socle (base.css) */

/* Titre de page : 24 sous le fil à 390 (cadres E2–E12 : H1 à y 132 pour un fil 64–108), 40 à 1 440 */
@media (max-width: 1023.98px) { .titre-page { padding-top: var(--espace-24); } }

/* Section de page : rythme 64 / 120 entre les sections, 40 entre les blocs */
.ep-section { padding-bottom: var(--rythme-section); }
.ep-section > .grille, .ep-section.grille { row-gap: var(--rythme-bloc); }
.ep-tete { display: flex; flex-direction: column; gap: var(--rythme-titre-texte); }

/* ---------- Bloc réponse : variantes de page ---------- */
.reponse__ligne dd { min-width: 0; }
.reponse__ligne dd .etat { font-size: inherit; }
.reponse__ligne dd .etat__precision, .titre-page .etat__precision { color: var(--couleur-texte-secondaire); }
.reponse__actions { align-items: center; }
.ep-essentiel__lignes .reponse__ligne dd { display: flex; flex-direction: column; align-items: flex-start; }
@media (max-width: 1023.98px) {
  .ep-essentiel--libre .reponse__lignes { border-top: 0; }
  .ep-essentiel--libre .reponse__ligne { border-bottom: 0; padding-top: 0; }
}

/* E2 · « Les plus demandées » : 3 Boutons secondaires, icône après le libellé ; pleine largeur à 390 */
.ep-taches { display: flex; flex-direction: column; gap: var(--espace-8); width: 100%; }
.ep-taches .bouton { width: 100%; }
.ep-taches .bouton .ico { color: currentColor; }
@media (min-width: 1024px) {
  .ep-taches { flex-direction: row; flex-wrap: wrap; }
  .ep-taches .bouton { width: auto; }
}

/* E2 · « Dans cette rubrique » : 2 × 2 (colonne par colonne) à ≥ 1 024 */
.ep-rubrique .ligne__lien > .ico:first-child { align-self: flex-start; margin-top: 0; }
@media (min-width: 1024px) {
  .ep-rubrique { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, auto); grid-auto-flow: column; column-gap: var(--grille-gouttiere); }
}

/* ---------- Cartes ---------- */
.ep-cartes { display: grid; grid-template-columns: minmax(0, 1fr); }
.ep-cartes .carte-evt { border-bottom: 0; }
.ep-cartes > li { min-width: 0; display: flex; }
.ep-cartes > li > .carte { flex: 1; }
.ep-cartes .carte__action { margin-top: auto; }
@media (min-width: 1024px) {
  .ep-cartes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--grille-gouttiere); }
  .ep-cartes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--grille-gouttiere); }
  .ep-cartes--2 .carte-evt, .ep-cartes--3 .carte-evt { padding-top: 0; }
}
/* Carte sans image d'Eole : numéro géant et mois de la saison, titre en Instrument Serif 56/52 */
.ep-cartes .carte-evt__jour { color: var(--couleur-decor); }
[data-site="eole"] .ep-cartes .carte-evt--sans-image .carte__titre {
  font-family: var(--police-serif); font-weight: 400; letter-spacing: -0.01em;
  font-size: min(calc(56px * var(--facteur-titre)), 15vw); line-height: min(calc(52px * var(--facteur-titre)), 14vw); overflow-wrap: break-word;
}
[data-site="eole"] .ep-cartes .carte-evt--photo .carte__titre { font-size: calc(32px * var(--facteur-titre)); line-height: calc(36px * var(--facteur-titre)); }
@media (min-width: 1024px) {
  [data-site="eole"] .ep-cartes .carte-evt--photo .carte__titre { font-size: calc(40px * var(--facteur-titre)); line-height: calc(44px * var(--facteur-titre)); }
}
.ep-quand { font-weight: 500; font-size: var(--taille-libelle); line-height: var(--interlignage-libelle); }
.carte .carte__textes .ep-quand { margin-top: var(--espace-4); }

/* E2 · « Prochains rendez-vous » : h2 + lien c1–4, cartes c5–12 */
.ep-rdv { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--rythme-bloc); }
@media (min-width: 1024px) {
  .ep-rdv { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grille-gouttiere); row-gap: var(--espace-16); align-items: start; }
  .ep-rdv__titre { grid-column: 1 / 5; grid-row: 1; }
  .ep-rdv__suite { grid-column: 1 / 5; grid-row: 2; }
  .ep-rdv__liste { grid-column: 5 / 13; grid-row: 1 / span 3; row-gap: var(--rythme-bloc); }
}

/* ---------- E4 · Fiche spectacle : le visuel d'abord, le titre sous l'image (R17) ---------- */
.ep-fiche { display: grid; grid-template-columns: minmax(0, 1fr); }
.ep-fiche__photo { margin-inline: calc(max(var(--grille-marge), env(safe-area-inset-left, 0px)) * -1); max-width: none; }
.ep-fiche__corps { display: flex; flex-direction: column; gap: var(--espace-8); padding-top: var(--espace-16); align-items: flex-start; }
.ep-fiche__corps > * { max-width: 100%; }
.ep-fiche__titre { margin-block: var(--espace-4) 0; }
.ep-fiche__premier { display: flex; flex-direction: column; gap: var(--espace-16); align-items: flex-start; margin-top: var(--espace-8); }
.ep-fiche__reponse { padding-top: var(--espace-40); }
@media (min-width: 1024px) {
  .ep-fiche { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grille-gouttiere); align-items: start; }
  .ep-fiche__photo { grid-column: 8 / 13; grid-row: 1 / span 2; margin: 0 calc(max(var(--grille-marge), env(safe-area-inset-right, 0px)) * -1) 0 0; }
  .ep-fiche__corps { grid-column: 1 / 8; grid-row: 1; padding-top: var(--espace-40); }
  .ep-fiche__reponse { grid-column: 1 / 8; grid-row: 2; padding-top: var(--espace-24); }
}
.ep-chapo { font-weight: 500; max-width: 38em; }
.ep-fiche__photo .photo__credit { bottom: var(--espace-8); }   /* cadre E4 V2 : le crédit devant le fondu, coin bas droit */
.ep-fiche__compagnie { color: var(--couleur-texte-secondaire); }
@media (min-width: 1024px) { .ep-fiche__compagnie { font-size: var(--taille-meta); line-height: var(--interlignage-meta); } }
cite { font-style: normal; }

/* ---------- Séances : colonne d'heure, film, action ---------- */
.seance__film .carte__meta a { color: inherit; }
.ep-seances-soir { margin-top: var(--espace-8); }
/* E5 · la semaine : trois colonnes de 421 (c1–4 · c5–8 · c9–12) à ≥ 1 024 */
.ep-semaine { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--rythme-bloc); }
.ep-semaine__filtres { display: flex; flex-direction: column; gap: var(--espace-16); align-items: flex-start; }
.ep-semaine__filtres .champ { width: 100%; max-width: 240px; }
.ep-semaine .jour--etroit .jour__numero { font-size: var(--taille-numeros-geants); }
@media (min-width: 1024px) {
  .ep-semaine { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--grille-gouttiere); align-items: start; }
  .ep-semaine__titre { grid-column: 1 / -1; }
  .ep-semaine__filtres { grid-column: 3; grid-row: 2; padding-top: var(--espace-16); }
  .ep-semaine .jour--etroit { display: flex; flex-direction: column; gap: var(--espace-16); }
}
.ep-programme { display: flex; flex-direction: column; gap: var(--rythme-bloc); width: 100%; }
.ep-programme:empty { display: none; }
.ep-programme .jour { display: flex; flex-direction: column; gap: var(--espace-16); }
.ep-programme .jour__numero { font-size: 96px; line-height: 0.9; }
.ep-programme__vide { font-size: var(--taille-texte); line-height: var(--interlignage-texte); }
.ep-lien-suite { display: inline-flex; align-items: center; gap: var(--espace-4); min-height: var(--cible-minimum); color: var(--couleur-action); font-size: var(--taille-libelle); line-height: var(--interlignage-libelle); text-decoration: underline; text-underline-offset: 0.2em; }

/* Ligne document à deux lignes (titre + « Télécharger … (PDF, n pages, poids) ») */
.ep-doc .ligne__lien { align-items: flex-start; padding-block: var(--espace-16); }
.ep-doc .ligne__lien > .ico:first-child { color: var(--couleur-action); }
.ep-doc .ligne__textes .ep-doc__action { color: var(--couleur-action); font-size: var(--taille-meta); line-height: var(--interlignage-meta); font-weight: 500; text-decoration: underline; text-underline-offset: 0.2em; }
.ep-doc .ligne__lien:hover .t-titre-ligne { color: var(--couleur-texte); text-decoration: none; }

/* ---------- Colonne visuelle d'une destination (E6, E7) : couverture décorative à 1 440 seulement ---------- */
.ep-visuel .couverture { width: 100%; }

/* ---------- E8 · billetterie : tarifs, sommaire collé ---------- */
.ep-tarifs { border-top: var(--trait-filet) solid var(--couleur-filet); }
.ep-tarifs > li { display: flex; flex-direction: column; gap: var(--espace-4); padding-block: var(--espace-16); border-bottom: var(--trait-filet) solid var(--couleur-filet); }
.ep-tarifs__montant { font-weight: 500; font-size: var(--taille-titre-ligne); line-height: var(--interlignage-titre-ligne); }
.ep-tarifs + .t-titre-ligne { margin-top: var(--espace-24); }
.ep-horaires .horaires { max-width: 100%; }
@media (min-width: 1024px) {
  .ep-horaires .horaires { max-width: 421px; }
  .ep-sommaire { position: sticky; top: calc(var(--haut-entete) + var(--espace-24)); grid-row: 1 / span 2; }
  .ep-rang-1 { grid-row: 1; }
  .ep-rang-2 { grid-row: 2; margin-top: var(--rythme-bloc); }
}
.ep-sommaire .ligne__lien { font-weight: 500; font-size: var(--taille-titre-ligne); line-height: var(--interlignage-titre-ligne); }
@media (min-width: 1024px) { .ep-titre-ligne-d { font-size: var(--taille-titre-ligne); line-height: var(--interlignage-titre-ligne); font-weight: 500; letter-spacing: 0; } }
.ep-ancre { scroll-margin-top: calc(var(--haut-entete) + var(--espace-24)); }

/* ---------- E8 · Venir à Eole : extrait de la carte de la ville (fond vectoriel local, en ligne) ---------- */
.ep-extrait {
  --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-riviere: var(--couleur-decor);
  --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));
  display: flex; flex-direction: column; gap: var(--espace-8);
}
.ep-extrait__carte { position: relative; aspect-ratio: 342 / 240; overflow: hidden; background: var(--cv-terre); border: var(--trait-filet) solid var(--couleur-filet); }
.ep-extrait__fond, .ep-extrait__fond svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ep-extrait__repere {
  position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; transform: translate(-50%, -50%);
  display: grid; place-items: center; background: var(--couleur-fond); border: var(--trait-forme) solid var(--couleur-texte);
  font-weight: 500; font-size: var(--taille-libelle); line-height: 1;
}
.ep-extrait__credit { position: absolute; left: 0; bottom: 0; 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); }
.ep-extrait .liste .ligne { display: flex; align-items: center; gap: var(--espace-16); min-height: 56px; }
.ep-extrait .ligne__numero { color: var(--couleur-texte-secondaire); }

/* E7 · lettre en colonne (cadre : champ pleine largeur, bouton dessous) */
.ep-lettre .lettre__form { flex-direction: column; align-items: flex-start; }
.ep-lettre .lettre__form .champ { flex: none; width: 100%; }

/* ---------- E10 · formulaire ---------- */
.ep-formulaire { display: flex; flex-direction: column; gap: var(--espace-16); align-items: stretch; }
@media (max-width: 1023.98px) { .ep-titre-serre { padding-bottom: var(--espace-16); } }
.ep-formulaire .bouton { align-self: flex-start; }
.ep-formulaire .resume-erreurs:focus-visible { outline: 3px solid var(--couleur-focus-interieur); box-shadow: 0 0 0 6px var(--couleur-focus-exterieur); }
.ep-confirmation { display: flex; flex-direction: column; gap: var(--espace-24); align-items: flex-start; }

/* ---------- E11 · recherche ---------- */
.ep-recherche { display: flex; flex-direction: column; gap: var(--rythme-bloc); }
.ep-filtres-recherche { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-16) var(--espace-24); }
.ep-filtres-recherche .filtres__groupe { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--espace-8); }
.ep-filtres-recherche .filtres__legende { min-width: 40px; }
.ep-recherche .recherche__aide {   /* aide du combobox gardée pour les lecteurs d'écran (aria-describedby), masquée comme dans le cadre */
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.ep-resultats-compte { min-height: var(--interlignage-meta); }
@media (max-width: 1023.98px) {
  /* le cadre 390 garde « Acheter » au premier écran : la réponse directe passe avant les pastilles (ordre visuel seulement) */
  .ep-recherche__filtres { order: 2; }
  .ep-recherche__soir { order: 1; }
  .ep-recherche__liste { order: 3; }
  .ep-recherche__aide { order: 4; }
}
.ep-surligne { background: none; color: inherit; font-weight: 500; text-decoration: underline; text-decoration-color: var(--couleur-action); text-decoration-thickness: 2px; text-underline-offset: 0.18em; }