/* ==========================================================================
   AO Craponne · prototype v2 — base
   Remise à zéro, styles de texte (= les 9 styles Figma), grille 4/24/16 → 12/64/24,
   focus en deux couleurs (décision 7, D15), lien d'évitement, sr-only, mouvement réduit.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--haut-entete) + var(--espace-16));
  scroll-padding-bottom: var(--haut-pilule);
}
body {
  margin: 0;
  min-height: 100%;
  background: var(--couleur-fond);
  color: var(--couleur-texte);
  font-family: var(--police-sans);
  font-size: var(--taille-texte);
  line-height: var(--interlignage-texte);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  overflow-x: clip;
}
/* sous 1 024 : la pilule et son fondu ne couvrent jamais la fin de page */
body { padding-bottom: var(--haut-pilule); }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--couleur-action); color: var(--couleur-action-texte); }
address { font-style: normal; }
time, .chiffres { font-variant-numeric: tabular-nums; }

/* ---------- Styles de texte (Figma) ---------- */
.t-titre-accueil {            /* Ville/Titre d'accueil */
  font-family: var(--police-sans); font-weight: 400;
  font-size: var(--taille-ville-titre-accueil); line-height: var(--interlignage-ville-titre-accueil);
  letter-spacing: -0.03em; text-wrap: balance;
}
.t-eole-titre {               /* Eole/Titre — jamais sous 32 px */
  font-family: var(--police-serif); font-weight: 400;
  font-size: var(--taille-eole-titre); line-height: var(--interlignage-eole-titre);
  letter-spacing: -0.01em; text-wrap: balance;
}
.t-eole-titre-spectacle {     /* Eole/Titre de spectacle */
  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; text-wrap: balance;
}
/* Titres d'Eole à 320 et en texte agrandi : la largeur décide (jamais de défilement horizontal) — identiques à 390 et à 1 440 */
.t-eole-titre-spectacle { font-size: min(var(--taille-eole-titre-spectacle), 17vw); line-height: min(var(--interlignage-eole-titre-spectacle), 15.8vw); overflow-wrap: break-word; }
.t-eole-titre { font-size: min(var(--taille-eole-titre), 19vw); line-height: min(var(--interlignage-eole-titre), 17.8vw); overflow-wrap: break-word; }
@media (min-width: 1024px) {
  .t-eole-titre-spectacle { font-size: var(--taille-eole-titre-spectacle); line-height: var(--interlignage-eole-titre-spectacle); }
  .t-eole-titre { font-size: min(var(--taille-eole-titre), 11.111vw); line-height: min(var(--interlignage-eole-titre), 10vw); }
}
/* un mot plus long que la colonne (« l’audiodescription » à 320) se coupe plutôt que de déborder */
h1, h2, h3, .t-titre-accueil, .t-titre-section { overflow-wrap: break-word; }
h1 { max-width: 100%; }
.t-eole-titre, .t-eole-titre-spectacle { overflow-wrap: anywhere; }
.t-titre-section {            /* Commun/Titre de section */
  font-family: var(--police-sans); font-weight: 400;
  font-size: var(--taille-titre-section); line-height: var(--interlignage-titre-section);
  letter-spacing: -0.02em; text-wrap: balance;
}
.t-titre-ligne {              /* Commun/Titre de ligne */
  font-weight: 500; font-size: var(--taille-titre-ligne); line-height: var(--interlignage-titre-ligne);
  text-wrap: balance;
}
.t-texte { font-size: var(--taille-texte); line-height: var(--interlignage-texte); }
.t-meta {                     /* Commun/Méta */
  font-size: var(--taille-meta); line-height: var(--interlignage-meta); color: var(--couleur-texte-secondaire);
}
.t-numeros-geants {           /* Commun/Numéros géants */
  font-weight: 400; font-size: var(--taille-numeros-geants); line-height: var(--interlignage-numeros-geants);
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.t-libelle { font-weight: 500; font-size: var(--taille-libelle); line-height: var(--interlignage-libelle); }
.texte-courant { max-width: 38em; }
.texte-courant > * + * { margin-top: var(--rythme-titre-texte); }
.texte-courant a { color: var(--couleur-action); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

/* ---------- Grille : 4 colonnes, marges 24, gouttière 16 → 12 / 64 / 24 à ≥ 1 024 ---------- */
.conteneur {
  padding-left: max(var(--grille-marge), env(safe-area-inset-left, 0px));
  padding-right: max(var(--grille-marge), env(safe-area-inset-right, 0px));
}
.grille {
  display: grid;
  grid-template-columns: repeat(var(--grille-colonnes), minmax(0, 1fr));
  column-gap: var(--grille-gouttiere);
}
.grille > * { grid-column: var(--col, 1 / -1); min-width: 0; }
@media (min-width: 1024px) {
  .grille > * { grid-column: var(--col-d, var(--col, 1 / -1)); }
}
.section { padding-block: var(--rythme-section); }
.section + .section { padding-top: 0; }
.pile { display: flex; flex-direction: column; gap: var(--rythme-bloc); }
.pile--serree { gap: var(--rythme-titre-texte); }

/* ---------- Focus en deux couleurs : 3 px intérieur collé + 3 px extérieur ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--couleur-focus-interieur);
  outline-offset: 0;
  box-shadow: 0 0 0 6px var(--couleur-focus-exterieur);
}
[tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }

/* ---------- Bande et lien d'évitement (premiers éléments du body, dans le flux) ---------- */
.evitement {
  display: flex; flex-wrap: wrap; gap: var(--espace-8) var(--espace-24); align-items: center;
  background: var(--couleur-pilule-fond); color: var(--couleur-pilule-texte);
  padding-block: 0;
  height: 0; overflow: hidden;
}
.evitement:focus-within { height: auto; min-height: 64px; padding-block: 10px; overflow: visible; }
.evitement__lien {
  display: inline-flex; align-items: center; min-height: var(--cible-minimum); padding-inline: var(--espace-8);
  font-weight: 500; font-size: var(--taille-libelle); line-height: var(--interlignage-libelle);
  text-decoration: underline; text-underline-offset: 0.2em;
}
.evitement .evitement__lien:focus-visible {
  outline-color: var(--couleur-pilule-texte); box-shadow: 0 0 0 6px var(--couleur-pilule-fond);
}

/* ---------- Utilitaires ---------- */
.sr-only {
  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;
}
.ico { width: 24px; height: 24px; flex: none; }
.ico--20 { width: 20px; height: 20px; }
.seulement-mobile { }
.seulement-desktop { display: none !important; }
@media (min-width: 1024px) {
  .seulement-mobile { display: none !important; }
  .seulement-desktop { display: revert !important; }
}
.note-prototype { font-size: var(--taille-meta); line-height: var(--interlignage-meta); }

/* ---------- Mouvement réduit : préférence du système ou panneau « Affichage » ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}
:root[data-motion="reduced"] *, :root[data-motion="reduced"] *::before, :root[data-motion="reduced"] *::after {
  transition-duration: 0ms !important; animation-duration: 0ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important;
}

/* ---------- Points d'ancrage de la navigation commune (réservent la place avant le rendu) ---------- */
[data-chrome="entete"] { min-height: 64px; }
@media (min-width: 1024px) { [data-chrome="entete"] { min-height: 104px; } }
main:focus { outline: none; }
:root[data-site="eole"] .seulement-ville, :root[data-site="ville"] .seulement-eole { display: none !important; }