/*
 * Recitoria — feuille de base : STRUCTURE ET RYTHME SEULS.
 *
 * ⚠️ Règle d'architecture, à ne jamais enfreindre :
 *   aucune couleur, aucune police, aucun rayon, aucune ombre littérale ici.
 *   Tout passe par un token défini dans assets/directions/{direction}.css.
 *   Une valeur en dur dans ce fichier rend la bascule de direction menteuse.
 *
 * Ordre de chargement imposé par functions.php :
 *   base.css → directions/{dir}.css → responsive.css
 * Une feuille de direction chargée après le responsive écraserait toutes les
 * media queries du gabarit.
 */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-fond);
  color: var(--encre-texte);
  font-family: var(--police-texte);
  font-size: var(--taille-texte);
  line-height: var(--interligne-texte);
  -webkit-font-smoothing: antialiased;
}

body { overflow-x: clip; }

h1, h2, h3, h4 {
  font-family: var(--police-titre);
  font-weight: var(--graisse-titre);
  font-variation-settings: "wght" var(--graisse-titre);
  letter-spacing: var(--interlettre-titre);
  text-transform: var(--casse-titre);
  color: var(--encre-titre);
  line-height: 1.18;
  margin: 0 0 0.75rem;
  text-wrap: balance;
}

h1 { font-size: var(--taille-h1); }
h2 { font-size: var(--taille-h2); }
h3 { font-size: var(--taille-h3); }

p, ul, ol { margin: 0 0 1.15rem; }
strong { font-weight: 700; }
img { max-width: 100%; height: auto; }
a { color: inherit; }

.conteneur {
  width: 100%;
  max-width: var(--largeur-conteneur);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* Accessibilité : lien d'évitement visible seulement au clavier. */
.saut-contenu { position: absolute; left: -9999px; }
.saut-contenu:focus {
  left: 1rem; top: 1rem; z-index: 100;
  padding: 0.5rem 0.75rem;
  background: var(--accent-action);
  color: var(--encre-sur-accent);
}

/* -------------------------------------------------------------------------
 * En-tête : fond PLEIN, jamais translucide.
 * ---------------------------------------------------------------------- */

.entete {
  background: var(--surface-entete);
  border-bottom: var(--filet-epaisseur) solid transparent;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 0 0 0 transparent;
  padding-block: 0;
  transition: background-color .4s cubic-bezier(.22,1,.36,1),
              border-color .4s cubic-bezier(.22,1,.36,1),
              box-shadow .4s cubic-bezier(.22,1,.36,1),
              padding-block .4s cubic-bezier(.22,1,.36,1);
}

/* Au scroll, l'en-tête plein cède la place à un bloc flottant : fond de
   l'en-tête rendu transparent, la pastille visible se reporte sur
   .entete__interieur (rétréci, arrondi, légèrement translucide). */
.entete--au-scroll {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  padding-block: 0.7rem;
}

.entete__interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 72px;
  border-radius: 0;
  transition: background-color .4s cubic-bezier(.22,1,.36,1),
              box-shadow .4s cubic-bezier(.22,1,.36,1),
              border-radius .4s cubic-bezier(.22,1,.36,1),
              min-height .4s cubic-bezier(.22,1,.36,1),
              max-width .4s cubic-bezier(.22,1,.36,1),
              padding-inline .4s cubic-bezier(.22,1,.36,1),
              opacity .4s cubic-bezier(.22,1,.36,1);
}

.entete--au-scroll .entete__interieur {
  background: var(--surface-entete);
  opacity: 0.9;
  min-height: 58px;
  max-width: min(calc(var(--largeur-conteneur) - 3rem), calc(100% - 2rem));
  border-radius: var(--rayon-bouton);
  padding-inline: 1.5rem;
  box-shadow: 0 14px 32px -14px rgba(6, 22, 16, 0.4);
}

.marque { text-decoration: none; display: inline-flex; align-items: center; flex: 0 0 auto; }
.marque__logo {
  display: block;
  width: 214px;
  max-width: 58vw;
  height: auto;
  transition: width .4s cubic-bezier(.22,1,.36,1);
}

.entete--au-scroll .marque__logo { width: 178px; }
.marque__nom {
  font-family: var(--police-titre);
  font-weight: var(--graisse-marque);
  font-variation-settings: "wght" var(--graisse-marque);
  letter-spacing: var(--interlettre-marque);
  text-transform: var(--casse-marque);
  font-size: 1.32rem;
  color: var(--encre-titre);
}
.marque__signe {
  font-family: var(--police-donnee);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-action);
}

.nav__liste {
  display: flex;
  align-items: center;
  gap: 1.35rem;
  margin: 0; padding: 0;
  list-style: none;
}
.nav { min-width: 0; }
.nav__liste li { margin: 0; }
.nav__liste a,
.nav__liste span {
  text-decoration: none;
  font-family: var(--police-bouton);
  font-size: 0.945rem;
  font-weight: var(--graisse-nav);
  letter-spacing: var(--interlettre-bouton);
  text-transform: var(--casse-nav);
  color: var(--encre-texte);
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
}
.nav__liste a:hover { color: var(--accent-action); border-bottom-color: var(--accent-action); }

/* -------------------------------------------------------------------------
 * Bascule mobile : bouton et icônes cachés au-dessus du point de rupture
 * (voir responsive.css pour le comportement < 941px). Sur desktop,
 * .nav__deroulant est un simple conteneur transparent, jamais un panneau.
 * ---------------------------------------------------------------------- */

.nav__bascule {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  padding: 0.5rem 0.2rem;
  font-family: var(--police-bouton);
  font-size: 0.94rem;
  font-weight: var(--graisse-nav);
  color: var(--encre-titre);
  cursor: pointer;
}

.nav__bascule-icone { width: 22px; height: 22px; }
.nav__bascule-icone--fermer { display: none; }
.nav__bascule[aria-expanded="true"] .nav__bascule-icone--ouvrir { display: none; }
.nav__bascule[aria-expanded="true"] .nav__bascule-icone--fermer { display: block; }

/* -------------------------------------------------------------------------
 * Boutons
 * ---------------------------------------------------------------------- */

.bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--police-bouton);
  font-weight: var(--graisse-bouton);
  font-size: 1rem;
  letter-spacing: var(--interlettre-bouton);
  text-transform: var(--casse-bouton);
  text-decoration: none;
  padding: 0.85rem 1.6rem;
  border-radius: var(--rayon-bouton);
  border: var(--filet-epaisseur) solid transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.bouton--principal {
  background: var(--accent-cta);
  color: var(--encre-sur-accent);
  box-shadow: var(--ombre-bouton);
}
.bouton--principal:hover { background: var(--accent-cta-survol); }

.bouton--secondaire {
  background: transparent;
  color: var(--encre-titre);
  border-color: var(--filet-fort);
}
.bouton--secondaire:hover { border-color: var(--accent-action); color: var(--accent-action); }

/* -------------------------------------------------------------------------
 * Hero
 * ---------------------------------------------------------------------- */

.hero {
  background: var(--surface-hero);
  border-bottom: var(--filet-epaisseur) solid var(--filet-couleur);
  padding-block: 4rem 3.25rem;
  position: relative;
  overflow: hidden;
}

.hero__interieur { display: grid; grid-template-columns: 1.35fr 1fr; gap: 3rem; align-items: start; }
.hero__texte { min-width: 0; max-width: 100%; }

.hero--photo {
  min-height: 560px;
  padding-block: 5rem 3.1rem;
  display: flex;
  align-items: flex-end;
  border-bottom: none;
}

.hero__fond,
.hero__voile {
  position: absolute;
  inset: 0;
}

.hero__fond { z-index: 0; }
.hero__voile {
  z-index: 1;
  background: var(--hero-voile);
}

.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Le sujet (foule, fumée, flammes) vit vers 55-75% de la hauteur de la
     photo source : un centrage plus haut ne montre que le ciel et le haut
     des gradins, la partie la plus terne du cliché. */
  object-position: center 62%;
  display: block;
}

.hero__interieur--photo {
  position: relative;
  z-index: 2;
  grid-template-columns: minmax(0, 760px);
  gap: 2.2rem;
  width: 100%;
  min-width: 0;
}

.hero--photo .hero__titre {
  color: var(--encre-titre-sur-photo);
  max-width: 13ch;
}

.hero--photo .hero__chapo {
  color: var(--encre-sur-photo);
  max-width: 42ch;
}

.hero--photo .bouton--secondaire {
  color: var(--bouton-secondaire-sur-photo-texte);
  border-color: var(--bouton-secondaire-sur-photo-bord);
}

.hero--photo .bouton--secondaire:hover {
  color: var(--bouton-secondaire-sur-photo-hover);
  border-color: var(--bouton-secondaire-sur-photo-hover);
}

.hero__titre { color: var(--encre-titre-sur-hero); font-size: var(--taille-h1); margin-bottom: 1.1rem; }

.hero__chapo {
  font-size: var(--taille-chapo);
  line-height: 1.55;
  color: var(--encre-sur-hero);
  margin-bottom: 1.9rem;
  max-width: 40ch;
}
/* Lettrine : posée par la direction, absente ailleurs (--lettrine-affichage). */
.hero__chapo::first-letter {
  float: var(--lettrine-flottement);
  display: var(--lettrine-affichage);
  font-family: var(--police-titre);
  font-size: var(--lettrine-taille);
  line-height: 0.82;
  padding-right: 0.12em;
  padding-top: 0.06em;
  color: var(--lettrine-couleur, var(--accent-action));
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; min-width: 0; }

.hero__reperes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  background: var(--surface-carte);
  border: var(--filet-epaisseur) solid var(--filet-couleur);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-carte);
  padding: 1.6rem 1.7rem;
}

.hero__reperes--ligne {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 900px;
  background: var(--surface-hero-reperes);
}

.repere { display: flex; align-items: baseline; gap: 0.85rem; min-width: 0; }
.repere + .repere { border-top: var(--filet-epaisseur) solid var(--filet-couleur); padding-top: 0.9rem; }
.hero__reperes--ligne .repere + .repere {
  border-top: 0;
  border-left: var(--filet-epaisseur) solid var(--filet-hero-reperes);
  padding-top: 0;
  padding-left: 1rem;
}
.repere__valeur {
  font-family: var(--police-donnee);
  font-size: var(--taille-repere);
  font-weight: var(--graisse-donnee);
  font-variation-settings: "wght" var(--graisse-donnee);
  color: var(--accent-action);
  line-height: 1;
  min-width: 2.6ch;
}
.repere__libelle { font-size: 0.955rem; color: var(--encre-attenuee); min-width: 0; }
.hero--photo .repere__valeur { color: var(--accent-sur-photo); }
.hero--photo .repere__libelle { color: var(--encre-repere-sur-photo); }

/* -------------------------------------------------------------------------
 * Mini-galerie de home
 * ---------------------------------------------------------------------- */

.section--mini-galerie {
  padding-block: 0 2.6rem;
}

.mini-galerie {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1rem;
  margin-top: -2rem;
  position: relative;
  z-index: 3;
}

.mini-carte {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  min-width: 0;
  background: var(--surface-carte);
  border: var(--filet-epaisseur) solid var(--filet-couleur);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-carte);
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow .16s ease, transform .16s ease;
}

.mini-carte:hover {
  box-shadow: var(--ombre-carte-survol);
  transform: var(--carte-survol-deplacement);
}

.mini-carte__image {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--accent-doux);
}

.mini-carte__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mini-carte__rubrique {
  font-family: var(--police-donnee);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: var(--interlettre-rubrique);
  text-transform: uppercase;
  color: var(--accent-action);
  padding: 0.9rem 0.95rem 0.25rem;
  overflow-wrap: anywhere;
}

.mini-carte__titre {
  font-family: var(--police-titre);
  font-weight: var(--graisse-titre);
  font-variation-settings: "wght" var(--graisse-titre);
  font-size: 1rem;
  line-height: 1.25;
  color: var(--encre-titre);
  padding: 0 0.95rem 1rem;
  overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------------
 * Modules visuels de home
 * ---------------------------------------------------------------------- */

.home-visual {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.42fr);
  gap: 1.7rem;
  align-items: center;
  margin: 0 0 2.2rem;
}

.home-visual--inverse {
  grid-template-columns: minmax(0, 1.42fr) minmax(0, 0.88fr);
}

.home-visual__texte {
  max-width: 46ch;
  min-width: 0;
}

.home-visual__texte .rubrique::after { max-width: 90px; }

.home-visual__titre {
  font-size: 1.42rem;
  margin-bottom: 0.65rem;
}

.home-visual__texte p:last-child { margin-bottom: 0; }

.home-visual__images {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  min-height: 360px;
}

.home-visual__image,
.home-stack__image {
  position: relative;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-carte);
  background: var(--accent-doux);
}

.home-visual__image--large { grid-row: 1 / span 2; }

.home-visual__img,
.home-stack__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Le crop par défaut centre horizontalement : sur une photo dont le sujet
   n'est pas au milieu du cadre (enseigne, écriteau), il faut le dire. */
.home-visual__img--gauche { object-position: left center; }
.home-visual__img--droite { object-position: right center; }

/* Ces vignettes juxtaposent des photos personnelles prises à des heures et
   conditions de lumière différentes (plein jour terne, spectacle nocturne).
   Sans traitement commun, la vignette de nuit fait un trou noir à côté des
   vignettes de jour. Deux calques : un lavis vert de marque en multiply
   (assombrit et teinte les photos claires, quasi sans effet sur les photos
   déjà sombres) et un dégradé bas qui ancre le badge dans la même famille
   de teinte sur toutes les vignettes. */
.home-visual__image::before,
.home-stack__image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent-action);
  opacity: 0.16;
  mix-blend-mode: multiply;
  z-index: 1;
  pointer-events: none;
}

.home-visual__image::after,
.home-stack__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 59, 52, 0) 58%, rgba(6, 59, 52, 0.5) 100%);
  z-index: 1;
  pointer-events: none;
}

.home-visual__label { z-index: 2; }

.home-visual__label {
  position: absolute;
  left: 0.8rem;
  bottom: 0.8rem;
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.35rem 0.7rem;
  border-radius: var(--rayon-pastille);
  background: var(--surface-badge-sur-image);
  color: var(--encre-badge-sur-image);
  font-family: var(--police-donnee);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: var(--interlettre-rubrique);
  text-transform: uppercase;
}

.home-stack {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 0.85rem;
  margin-bottom: 1.15rem;
}

.home-stack__image { aspect-ratio: 4 / 3; }

/* -------------------------------------------------------------------------
 * Sections
 * ---------------------------------------------------------------------- */

.section { padding-block: 3.4rem; }
.section--accentuee { background: var(--surface-accentuee); }
.section + .section { border-top: var(--filet-section); }

.section__entete { max-width: 62ch; margin-bottom: 2.1rem; }

/* Rubrique : <p> stylé, jamais un Hn. Un titre ici polluerait le plan. */
.rubrique {
  font-family: var(--police-donnee);
  font-size: 0.735rem;
  font-weight: 700;
  letter-spacing: var(--interlettre-rubrique);
  text-transform: uppercase;
  color: var(--accent-action);
  margin: 0 0 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.rubrique::after {
  content: "";
  flex: 1;
  height: var(--filet-rubrique-epaisseur);
  background: var(--filet-rubrique-couleur);
}

.section__chapo { color: var(--encre-attenuee); margin-bottom: 0; max-width: 58ch; }

/* -------------------------------------------------------------------------
 * Grilles : colonnes FIXES par palier, jamais auto-fit.
 * Le compte réel est publié par le PHP en classe --n{compte}.
 * ---------------------------------------------------------------------- */

.grille { display: grid; gap: 1.4rem; }
.grille--n2 { grid-template-columns: repeat(2, 1fr); }
.grille--n3 { grid-template-columns: repeat(3, 1fr); }
.grille--n4 { grid-template-columns: repeat(4, 1fr); }
.grille--n5 { grid-template-columns: repeat(5, 1fr); }
.grille--n6 { grid-template-columns: repeat(3, 1fr); }
.grille--n7 { grid-template-columns: repeat(4, 1fr); }
.grille--n8 { grid-template-columns: repeat(4, 1fr); }

/* -------------------------------------------------------------------------
 * Cartes
 * ---------------------------------------------------------------------- */

.carte {
  display: flex;
  flex-direction: column;
  background: var(--surface-carte);
  border: var(--filet-epaisseur) solid var(--filet-couleur);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-carte);
  padding: 1.5rem 1.55rem 1.35rem;
  transition: box-shadow .16s ease, border-color .16s ease, transform .16s ease;
}
a.carte { text-decoration: none; }
a.carte:hover { box-shadow: var(--ombre-carte-survol); border-color: var(--accent-action); transform: var(--carte-survol-deplacement); }

.carte__vignette {
  height: 6px;
  width: var(--carte-vignette-largeur);
  border-radius: var(--rayon-pastille);
  background: var(--accent-action);
  margin-bottom: 1.1rem;
}
.carte__titre { font-size: var(--taille-h3); margin-bottom: 0.5rem; }
.carte__texte { color: var(--encre-attenuee); font-size: 0.975rem; margin-bottom: 1rem; }
.carte__pied { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.carte__mention {
  font-family: var(--police-donnee);
  font-size: 0.8rem;
  font-weight: var(--graisse-donnee);
  color: var(--accent-action);
  letter-spacing: var(--interlettre-bouton);
  text-transform: var(--casse-bouton);
}
.carte__note { font-family: var(--police-donnee); font-size: 0.82rem; color: var(--encre-attenuee); }

.badge {
  display: inline-block;
  font-family: var(--police-donnee);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.28rem 0.6rem;
  border-radius: var(--rayon-pastille);
  background: var(--accent-doux);
  color: var(--accent-action-survol);
}

/* -------------------------------------------------------------------------
 * Calendrier d'affluence : l'atout du site, et le test le plus dur pour une
 * palette, puisqu'il lui demande quatre niveaux lisibles côte à côte.
 * ---------------------------------------------------------------------- */

.affluence { display: grid; grid-template-columns: 1.05fr 1fr; gap: 2.6rem; align-items: center; }

.affluence__bande {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}

.mois {
  border-radius: var(--rayon-carte);
  border: var(--filet-epaisseur) solid var(--filet-couleur);
  padding: 0.85rem 0.6rem 0.8rem;
  text-align: center;
}

/* Variante interactive : le calendrier de /affluence/ rend les mois cliquables,
   celui de la home reste un <div> non interactif. Même classe, comportement en plus. */
button.mois {
  font: inherit;
  cursor: pointer;
  width: 100%;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
button.mois:hover { transform: translateY(-2px); }
button.mois:focus-visible { outline: 2px solid var(--accent-action); outline-offset: 2px; }
button.mois.mois--actif { box-shadow: 0 0 0 3px var(--accent-action) inset; }

.affluence-outil { margin-bottom: 1.2rem; }
.affluence__pourquoi {
  margin-top: 1.1rem;
  padding: 0.9rem 1.1rem;
  background: var(--accent-doux);
  border-radius: var(--rayon-carte);
  font-size: 0.92rem;
  line-height: 1.5;
}
.mois__nom {
  display: block;
  font-family: var(--police-donnee);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.mois__etat { display: block; font-size: 0.8rem; line-height: 1.3; }

.mois--niveau1 { background: var(--niveau-1); color: var(--encre-sur-niveau-clair); }
.mois--niveau2 { background: var(--niveau-2); color: var(--encre-sur-niveau-clair); }
.mois--niveau3 { background: var(--niveau-3); color: var(--encre-sur-niveau-3); }
.mois--niveau4 { background: var(--niveau-4); color: var(--encre-sur-niveau-fort); }
.mois--ferme   { background: var(--niveau-ferme); color: var(--encre-attenuee); }

.legende { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.3rem; padding: 0; list-style: none; }
.legende li { display: flex; align-items: center; gap: 0.45rem; font-size: 0.87rem; color: var(--encre-attenuee); }
.legende span { width: 14px; height: 14px; border-radius: var(--rayon-pastille); border: var(--filet-epaisseur) solid var(--filet-couleur); }

/* -------------------------------------------------------------------------
 * Bloc de décision : la question d'entrée du visiteur
 * ---------------------------------------------------------------------- */

.decision { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.decision--n1 { grid-template-columns: 1fr; }
.decision--n2 { grid-template-columns: repeat(2, 1fr); }
.decision--n3 { grid-template-columns: repeat(3, 1fr); }

.piste {
  background: var(--surface-carte);
  border: var(--filet-epaisseur) solid var(--filet-couleur);
  border-top: var(--piste-liseret-epaisseur) solid var(--accent-action);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-carte);
  padding: 1.7rem 1.6rem 1.5rem;
  display: flex;
  flex-direction: column;
}
.piste__duree {
  font-family: var(--police-donnee);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent-action);
  margin-bottom: 0.7rem;
}
.piste__titre { font-size: var(--taille-h3); margin-bottom: 0.7rem; }
.piste__texte { font-size: 0.98rem; color: var(--encre-attenuee); }
.piste__lien {
  margin-top: auto;
  font-family: var(--police-bouton);
  font-weight: var(--graisse-bouton);
  font-size: 0.95rem;
  color: var(--accent-action);
  text-decoration: none;
  border-bottom: 2px solid var(--accent-doux);
  align-self: flex-start;
  padding-bottom: 2px;
}
.piste__lien:hover { border-bottom-color: var(--accent-action); }

/* -------------------------------------------------------------------------
 * Bandeau d'appel
 * ---------------------------------------------------------------------- */

.appel {
  background: var(--surface-appel);
  border: var(--filet-epaisseur) solid var(--filet-appel);
  border-radius: var(--rayon-carte);
  padding: 2.1rem 2.2rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.8rem;
  align-items: center;
}
.appel__titre { color: var(--encre-sur-appel-titre); margin-bottom: 0.45rem; }
.appel__texte { color: var(--encre-sur-appel); margin: 0; max-width: 58ch; }

/* -------------------------------------------------------------------------
 * FAQ : <details>/<summary>, jamais de JavaScript pour ouvrir un paragraphe.
 * ---------------------------------------------------------------------- */

.faq-bloc { max-width: 74ch; }
.faq-bloc details {
  border-bottom: var(--filet-epaisseur) solid var(--filet-couleur);
  padding: 0.15rem 0;
}
.faq-bloc summary {
  cursor: pointer;
  list-style: none;
  padding: 1.05rem 2.2rem 1.05rem 0;
  position: relative;
  font-family: var(--police-titre);
  font-weight: var(--graisse-titre);
  font-variation-settings: "wght" var(--graisse-titre);
  font-size: 1.09rem;
  color: var(--encre-titre);
}
.faq-bloc summary::-webkit-details-marker { display: none; }
.faq-bloc summary::after {
  content: "+";
  position: absolute;
  right: 0.2rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--police-donnee);
  font-size: 1.3rem;
  color: var(--accent-action);
}
.faq-bloc details[open] summary::after { content: "–"; }
.faq-bloc details p { margin: 0 0 1.1rem; color: var(--encre-attenuee); }

/* -------------------------------------------------------------------------
 * Pied de page : aucun Hn, ce sont des blocs de navigation.
 * ---------------------------------------------------------------------- */

.pied {
  background: var(--surface-pied);
  color: var(--encre-sur-pied);
  padding-block: 3rem 2.2rem;
  margin-top: 3.5rem;
}
.pied__entete { margin-bottom: 2rem; }
.pied__marque {
  display: inline-flex;
  align-items: center;
  background: var(--surface-carte);
  border-radius: var(--rayon-carte);
  padding: 0.45rem 0.7rem;
  line-height: 0;
}
.pied__logo {
  display: block;
  width: 232px;
  max-width: 72vw;
  height: auto;
}
.pied__colonnes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2rem; margin-bottom: 2.4rem; }
.pied__intitule {
  font-family: var(--police-donnee);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-sur-pied-fort);
  margin: 0 0 0.85rem;
}
.pied__liste { margin: 0; padding: 0; list-style: none; }
.pied__liste li { margin-bottom: 0.45rem; }
.pied__liste a, .pied__liste span { text-decoration: none; font-size: 0.94rem; color: var(--encre-sur-pied); }
.pied__liste a:hover { color: var(--encre-sur-pied-fort); text-decoration: underline; }

.pied__bas {
  border-top: 1px solid var(--filet-pied);
  padding-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem 1.5rem;
  text-align: center;
}
.pied__mention, .pied__copyright { margin: 0; font-size: 0.88rem; color: var(--encre-sur-pied); }
.pied__liens-legaux { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem 1.1rem; margin: 0; padding: 0; list-style: none; }
.pied__liens-legaux a { font-size: 0.85rem; color: var(--encre-sur-pied); text-decoration: none; }
.pied__liens-legaux a:hover { color: var(--encre-sur-pied-fort); text-decoration: underline; }

/* -------------------------------------------------------------------------
 * Pré-hero et corps d'article (gabarits intérieurs)
 * ---------------------------------------------------------------------- */

.prehero {
  position: relative;
  min-height: 300px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--surface-hero);
}

.prehero__media,
.prehero__voile {
  position: absolute;
  inset: 0;
}

.prehero__media {
  z-index: 0;
  inset: -28px;
}
.prehero__voile {
  z-index: 1;
  background: var(--prehero-voile);
}

.prehero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: blur(13px) saturate(.92);
  transform: scale(1.05);
}

.prehero__interieur {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 2rem;
  padding-block: 2.8rem 2.6rem;
}

.prehero__texte { min-width: 0; }

.prehero__badge {
  display: inline-flex;
  align-items: center;
  min-height: 2.1rem;
  margin: 0 0 0.8rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--rayon-pastille);
  background: var(--surface-prehero-badge);
  color: var(--encre-prehero-badge);
  font-family: var(--police-donnee);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: var(--interlettre-rubrique);
  text-transform: uppercase;
}

.prehero__titre {
  max-width: 18ch;
  margin: 0;
  color: var(--encre-titre-sur-photo);
  text-shadow: var(--ombre-titre-sur-photo);
}

.prehero__macaron {
  width: clamp(160px, 18vw, 238px);
  aspect-ratio: 1;
  margin: 0;
  padding: 0.62rem;
  border-radius: var(--rayon-pastille);
  background: var(--surface-prehero-macaron);
  box-shadow: var(--ombre-prehero-macaron);
  transform: rotate(2deg);
}

.prehero__macaron-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--rayon-pastille);
  box-shadow: inset 0 0 0 1px var(--filet-prehero-macaron);
}

.article { padding-block: 2.6rem; max-width: 74ch; min-width: 0; }
.article--avec-prehero { padding-top: 2.4rem; }
.titre-page { margin-top: 0; }

/* -------------------------------------------------------------------------
 * Rail des fiches : occupe la largeur laissée vide par la colonne de
 * lecture (74ch) dans le conteneur (1180px). Carte CTA uniquement, jamais
 * de Hn (voir CLAUDE.md racine, « Rail, pied de page, sommaire »).
 * ---------------------------------------------------------------------- */

.conteneur--avec-rail {
  display: grid;
  grid-template-columns: minmax(0, 74ch) minmax(260px, 1fr);
  gap: 2.6rem;
  /* align-items: stretch (par défaut) : le rail doit occuper toute la
     hauteur de la ligne de grille, pas seulement celle de sa carte, sinon
     la carte sticky perd son ancrage avant la fin de l'article et laisse
     du vide en dessous pour le reste du scroll. */
}

.rail { padding-top: 2.6rem; min-width: 0; }

.rail__cta {
  position: sticky;
  top: calc(72px + 1.6rem);
  background: var(--surface-appel);
  border: var(--filet-epaisseur) solid var(--filet-appel);
  border-radius: var(--rayon-carte);
  padding: 1.6rem 1.7rem;
}

.rail__cta-titre {
  font-family: var(--police-titre);
  font-size: 1.15rem;
  font-weight: var(--graisse-titre);
  color: var(--encre-sur-appel-titre);
  margin: 0 0 0.5rem;
}

.rail__cta-texte {
  color: var(--encre-sur-appel);
  margin: 0 0 1.2rem;
  font-size: 0.94rem;
}

.rail__cta-bouton { width: 100%; justify-content: center; }
.article__featured {
  margin: 1.25rem 0 2.1rem;
  aspect-ratio: 16 / 9;
  border-radius: var(--rayon-carte);
  overflow: hidden;
  box-shadow: var(--ombre-carte);
  background: var(--accent-doux);
}
.article__featured-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.corps h2 { margin-top: 2.4rem; }
.corps h3 { margin-top: 1.8rem; }

/* -------------------------------------------------------------------------
 * Composants d'article Gutenberg (protocole REDACTION.md)
 *
 * Contrat entre le thème et les scripts de production : classes reprises
 * telles quelles dans le contenu édité en page. Structure seule ici, les
 * couleurs et formes viennent des tokens de la direction.
 * ---------------------------------------------------------------------- */

.article-intro {
  font-size: var(--taille-chapo);
  color: var(--encre-attenuee);
  margin-bottom: 1.6rem;
}

.sommaire {
  background: var(--surface-carte);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-carte);
  padding: 1.4rem 1.7rem;
  margin: 1.8rem 0 2.2rem;
}
.sommaire__titre {
  font-family: var(--police-donnee);
  font-size: 0.78rem;
  font-weight: var(--graisse-nav);
  text-transform: var(--casse-nav);
  letter-spacing: var(--interlettre-rubrique);
  color: var(--encre-attenuee);
  margin: 0 0 0.8rem;
}
.sommaire ol, .sommaire ul { margin: 0; padding-left: 1.2rem; }
.sommaire li { margin-bottom: 0.4rem; }
.sommaire a { color: var(--encre-titre); text-decoration: none; border-bottom: 1px solid var(--filet-fort); }
.sommaire a:hover { color: var(--accent-action); border-bottom-color: var(--accent-action); }

.info-box {
  background: var(--accent-doux);
  border-radius: var(--rayon-carte);
  padding: 1.2rem 1.5rem;
  margin: 1.8rem 0;
}
.info-box p { margin: 0; color: var(--encre-titre); }
.info-box strong { color: var(--encre-titre); }

.cta-box {
  border-radius: var(--rayon-carte);
  padding: 1.6rem 1.8rem;
  margin: 2.2rem 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
}
.cta-box p { margin: 0; max-width: 46ch; }
.cta-box--primary {
  background: var(--surface-appel);
  box-shadow: var(--ombre-carte);
}
.cta-box--primary p { color: var(--encre-sur-appel); }
.cta-box--primary strong { color: var(--encre-sur-appel-titre); }
.cta-box--secondary {
  background: var(--surface-carte);
  box-shadow: var(--ombre-carte);
}
.cta-box--secondary p, .cta-box--secondary strong { color: var(--encre-titre); }

.cta-btn {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  font-family: var(--police-bouton);
  font-weight: var(--graisse-bouton);
  text-transform: var(--casse-bouton);
  letter-spacing: var(--interlettre-bouton);
  border-radius: var(--rayon-bouton);
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  white-space: nowrap;
}
.cta-btn--primary {
  background: var(--accent-cta);
  color: var(--encre-sur-accent);
  box-shadow: var(--ombre-bouton);
}
.cta-btn--primary:hover { background: var(--accent-cta-survol); }
.cta-btn--secondary {
  background: transparent;
  color: var(--accent-action);
  box-shadow: inset 0 0 0 2px var(--accent-doux);
}
.cta-btn--secondary:hover { box-shadow: inset 0 0 0 2px var(--accent-action); }

.article-list { margin: 1.4rem 0; padding-left: 0; list-style: none; }
.article-list li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.7rem;
  color: var(--encre-texte);
}
.article-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: var(--rayon-pastille);
  background: var(--accent-action);
}

.tarifs-table-wrap { overflow-x: auto; margin: 1.8rem 0; }
.tarifs-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.tarifs-table th, .tarifs-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: var(--filet-epaisseur) solid var(--filet-fort);
}
.tarifs-table th { font-family: var(--police-donnee); color: var(--encre-attenuee); font-weight: var(--graisse-nav); }

.faq-block { max-width: 74ch; margin: 1.8rem 0; }
.faq-block__item {
  border-bottom: var(--filet-epaisseur) solid var(--filet-fort);
  padding: 1.1rem 0;
}
.faq-block__question {
  cursor: pointer;
  list-style: none;
  font-family: var(--police-titre);
  font-weight: var(--graisse-titre);
  color: var(--encre-titre);
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.faq-block__question::-webkit-details-marker { display: none; }
.faq-block__question::after {
  content: "+";
  font-family: var(--police-donnee);
  color: var(--accent-action);
  font-size: 1.3rem;
  flex-shrink: 0;
}
.faq-block__item[open] .faq-block__question::after { content: "\2013"; }
.faq-block__answer { margin-top: 0.8rem; }
.faq-block__answer p { margin: 0; color: var(--encre-attenuee); }

/* -------------------------------------------------------------------------
 * Icônes Lucide
 *
 * Les SVG sont inlinés sans width ni height : la taille se prend sur la
 * typographie environnante, jamais sur un attribut du fichier source.
 * ---------------------------------------------------------------------- */

.icone {
  width: 1.25em;
  height: 1.25em;
  flex: 0 0 auto;
  stroke-width: 1.75;
  color: var(--accent-action);
}

/* La vignette de carte était un simple trait : elle porte l'icône du sujet. */
.carte__vignette {
  height: auto;
  width: auto;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--rayon-pastille);
  background: var(--accent-doux);
}
.carte__vignette .icone { width: 1.4rem; height: 1.4rem; }

.piste__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--rayon-pastille);
  background: var(--accent-doux);
  margin-bottom: 1rem;
}
.piste__icone .icone { width: 1.3rem; height: 1.3rem; }

/* -------------------------------------------------------------------------
 * Ce qu'on vient y voir : le bloc qui distingue le parc d'un parc à manèges
 * ---------------------------------------------------------------------- */

.propos { display: grid; grid-template-columns: 1.15fr 1fr; gap: 2.8rem; align-items: start; }
.propos__texte p { margin-bottom: 1rem; }
.propos__texte p:last-child { margin-bottom: 0; }

.reperes-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.9rem; }
.reperes-liste li {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  background: var(--surface-carte);
  border: var(--filet-epaisseur) solid var(--filet-couleur);
  border-radius: var(--rayon-carte);
  padding: 1rem 1.15rem;
  font-size: 0.96rem;
  color: var(--encre-attenuee);
}
.reperes-liste strong { color: var(--encre); font-weight: 600; }
.reperes-liste .icone { margin-top: 0.15rem; }

/* -------------------------------------------------------------------------
 * Aperçu local : ce qui n'existe pas encore ne doit pas ressembler à un lien
 *
 * Le gabarit inerte sert à juger une page complète avant qu'elle le soit.
 * Peindre ses libellés à la couleur d'action ferait valider un parcours qui
 * n'existe pas : l'inerte s'affiche donc en gris, sans soulignement ni
 * survol, et la carte perd son ombre de survol.
 * ---------------------------------------------------------------------- */

.est-inerte { color: var(--encre-attenuee); border-bottom-color: transparent; cursor: default; }
.piste__lien.est-inerte { border-bottom-color: var(--filet-couleur); }
div.carte.est-inerte { box-shadow: none; border-style: dashed; }
div.carte.est-inerte .carte__vignette { background: var(--filet-couleur); }
div.carte.est-inerte .icone { color: var(--encre-attenuee); }
.bouton.est-inerte { background: none; color: var(--encre-attenuee); border-color: var(--filet-couleur); box-shadow: none; }