/* ==========================================================================
   Alliance Pédagogique
   ========================================================================== */

:root {
  /* Couleurs reprises du logo : le jaune et le rouge des deux rubans.
     Le jaune pur ne se lit pas en texte sur fond clair : --or sert aux
     aplats (boutons, pastilles), --or-fonce au texte sur fond clair,
     --or-vif au texte sur fond sombre. */
  --or:          #F8D900;
  --or-vif:      #FCE94A;
  --or-fonce:    #8A6A00;
  --or-pale:     #FEF6D2;
  --rouge:       #D6151B;
  --rouge-fonce: #A80A10;
  --rouge-pale:  #FDECEC;

  /* Accent de lecture sur fond clair : le rouge du logo, assez sombre pour
     rester lisible. Sur fond sombre c'est --or-vif qui prend le relais. */
  --accent:      #C41017;

  /* Neutres chauds : les fonds crème du site appelaient des gris chauds,
     pas les gris bleutés d'origine, qui juraient avec le jaune du logo. */
  --ardoise:     #2F2A24;
  --ardoise-900: #231E19;
  --ardoise-700: #4A423A;

  --blanc:       #FFFFFF;
  --fond:        #FAF8F4;
  --fond-2:      #F3EFE8;
  --encre:       #241F1A;
  --gris:        #6A6055;
  --gris-clair:  #918779;
  --filet:       #E4DED3;

  /* Typographie */
  --f-titre: "Playfair Display", Georgia, serif;
  --f-texte: "Karla", "Segoe UI", system-ui, sans-serif;

  --fs-hero:  clamp(2.6rem, 6vw, 4.75rem);
  --fs-h1:    clamp(2.2rem, 4.6vw, 3.5rem);
  --fs-h2:    clamp(1.9rem, 3.6vw, 2.9rem);
  --fs-h3:    clamp(1.2rem, 1.9vw, 1.5rem);
  --fs-base:  1.0625rem;
  --fs-petit: 0.875rem;

  /* Rythme */
  --section:   clamp(4rem, 8vw, 7rem);
  --gouttiere: clamp(1.25rem, 4vw, 3rem);
  --largeur:   1280px;
  --lecture:   38rem;

  --r:      14px;
  --r-petit: 8px;
  --ombre:  0 2px 8px rgba(36, 31, 26, .04), 0 12px 32px -8px rgba(36, 31, 26, .08);
  --ombre-forte: 0 8px 24px rgba(36, 31, 26, .08), 0 32px 64px -16px rgba(36, 31, 26, .18);
  --ombre-or: 0 8px 24px rgba(36, 31, 26, .08), 0 28px 56px -20px rgba(190, 146, 0, .40);

  --t: 280ms cubic-bezier(.2, .7, .3, 1);
  --t-long: 700ms cubic-bezier(.16, .84, .28, 1);
  --t-image: 1100ms cubic-bezier(.16, .84, .28, 1);

  /* Dégradé doré pour les filets et les surlignages */
  --degrade-ruban: linear-gradient(90deg, var(--filet), rgba(248, 217, 0, .95) 32%, rgba(214, 21, 27, .55) 68%, var(--filet));
}

/* --------------------------------------------------------------- Socle -- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 7rem; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--f-texte);
  font-size: var(--fs-base);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
img { height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--f-titre);
  font-weight: 600;
  line-height: 1.18;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; }
a { color: inherit; }

::selection { background: var(--or); color: var(--encre); }
:focus-visible { outline: 3px solid var(--or-fonce); outline-offset: 3px; border-radius: 3px; }

/* Sur les fonds sombres, c'est le reflet clair du ruban qui reste lisible */
.hero :focus-visible,
.pied :focus-visible,
.barre-haute :focus-visible,
.section--sombre :focus-visible { outline-color: var(--or-vif); }

.lien-evitement {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ardoise); color: #fff; padding: 1rem 1.5rem;
}
.lien-evitement:focus { left: 0; }

.visuellement-cache {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---------------------------------------------------------- Utilitaires -- */

.enveloppe {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.section { padding-block: var(--section); }
.section--claire { background: var(--blanc); }
.section--sable { background: var(--fond-2); }
.section--sombre { background: var(--ardoise); color: rgba(255, 255, 255, .82); }
.section--sombre h2, .section--sombre h3 { color: #fff; }

.mesure { max-width: var(--lecture); }
.texte-doux { color: var(--gris); }
.note { font-size: var(--fs-petit); color: var(--gris); }

/* Surtitre en capitales, précédé d'un filet doré */
.mention {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  font-family: var(--f-texte);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.1rem;
}

.mention::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: currentColor;
  flex: none;
  opacity: .7;
}

.tete-section .mention::after {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: currentColor;
  flex: none;
  opacity: .7;
}

.section--sombre .mention,
.hero .mention { color: var(--or-vif); }

.titre-section { font-size: var(--fs-h2); letter-spacing: -.015em; }
.titre-section em { font-style: italic; color: var(--accent); }
.section--sombre .titre-section em { color: var(--or-vif); }
.titre-sujet { font-size: var(--fs-h3); }

/* ------------------------------------------- Rythme vertical du site -- */

/* La première section prolonge l'en-tête de page : la respiration est déjà
   donnée par le bandeau au-dessus. Six pages écrivaient ce retrait en
   attribut style, avec trois valeurs différentes. */
.entete-page + .section { padding-top: clamp(2.75rem, 5vw, 4rem); }

/* Sauf lorsqu'elle porte un en-tête centré, qui a besoin de tout son air. */
.entete-page + .section:has(> .enveloppe > .tete-section),
.entete-page + .section:has(> .enveloppe > .appel) { padding-top: var(--section); }

/* Un titre posé seul au-dessus d'une grille : même distance partout, au lieu
   des marges écrites une par une dans les gabarits. */
.enveloppe > .titre-section { margin-bottom: clamp(2rem, 4vw, 3rem); }
.enveloppe > .titre-sujet   { margin-bottom: clamp(1.5rem, 3vw, 2rem); }
.titre-section--serre { max-width: 20ch; }

/* Échelle d'espacement : une seule série de valeurs remplace la quarantaine
   d'attributs style= qui coexistaient dans les pages. */
.espace-s   { margin-top: 1.25rem; }
.espace-m   { margin-top: 2rem; }
.espace-l   { margin-top: clamp(2rem, 4vw, 3rem); }
.dessous-xl { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* Largeur de lecture des textes secondaires : sept pages la fixaient à la
   main, entre 34 et 46 caractères. */
.mesure-courte { max-width: 42ch; }

.actions--centrees { justify-content: center; }

/* Un lien dans une note doit rester repérable */
.note a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.section--sombre .note a { color: var(--or-vif); }

/* -------------------------------------------- Appel à l'action de fin -- */

/* Même composition sur toutes les pages : sept d'entre elles le composaient
   en deux colonnes et en attributs style=, l'accueil le centrait déjà. */
.appel {
  display: grid;
  justify-items: center;
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
}

.appel .mention { justify-content: center; }
.appel__texte { color: rgba(255, 255, 255, .8); margin-top: 1.15rem; font-size: 1.08rem; }
.section:not(.section--sombre) .appel__texte { color: var(--gris); }
.appel .actions { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); justify-content: center; }

/* En-tête de section centré */
.tete-section { text-align: center; max-width: 46rem; margin: 0 auto clamp(3rem, 5.5vw, 4.5rem); }
.tete-section .mention { justify-content: center; }
.tete-section p:last-child { color: var(--gris); margin-top: 1.15rem; font-size: 1.08rem; }

.tete-rang {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 1.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.prose { max-width: var(--lecture); }
.prose p + p { margin-top: 1.15rem; }
.prose a { color: var(--or-fonce); text-decoration: underline; text-underline-offset: 3px; }

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

/* Le fond se remplit depuis la gauche au survol */
.bouton {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex; align-items: center; gap: .65rem;
  padding: 1.05rem 2.1rem;
  background: var(--or);
  color: var(--encre);
  font-family: var(--f-texte);
  font-size: .93rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
  border: 1px solid var(--or);
  border-radius: var(--r-petit);
  cursor: pointer;
  transition: transform var(--t), box-shadow var(--t), color var(--t), border-color var(--t);
}

.bouton::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: var(--encre);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-long);
}

.bouton:hover { color: #fff; border-color: var(--encre); transform: translateY(-3px); box-shadow: var(--ombre-or); }
.bouton:hover::before { transform: scaleX(1); }
.bouton svg { width: 1.05em; height: 1.05em; transition: transform var(--t); }
.bouton:hover svg { transform: translateX(4px); }

.bouton--ligne { background: transparent; color: var(--encre); border-color: var(--filet); }
.bouton--ligne:hover { color: #fff; border-color: var(--encre); box-shadow: var(--ombre-forte); }

.bouton--clair { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .4); }
.bouton--clair::before { background: #fff; }
.bouton--clair:hover { color: var(--encre); border-color: #fff; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .5); }

.actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

/* Lien fléché */
.lien-fleche {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; font-size: .95rem;
  text-decoration: none;
  color: var(--or-fonce);
  transition: gap var(--t);
}
.lien-fleche:hover { gap: .85rem; }
.lien-fleche svg { width: 1.05em; height: 1.05em; }

/* ------------------------------------------------- Barre de contact haute -- */

.barre-haute {
  background: var(--ardoise-900);
  color: rgba(255, 255, 255, .72);
  font-size: .82rem;
}

.barre-haute__interieur {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; min-height: 44px; padding-block: .3rem;
}

.barre-haute__reseaux { display: flex; gap: .25rem; }
.barre-haute__reseaux a { display: grid; place-items: center; width: 30px; height: 30px; color: inherit; transition: color var(--t); }
.barre-haute__reseaux a:hover { color: var(--or-vif); }
.barre-haute__reseaux svg { width: 16px; height: 16px; }

.barre-haute__coords { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; }
.barre-haute__coords a { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: inherit; transition: color var(--t); }
.barre-haute__coords a:hover { color: #fff; }
.barre-haute__coords svg { width: 15px; height: 15px; color: var(--or); flex: none; }

/* --------------------------------------------------------------- Entête -- */

.entete {
  position: sticky; top: 0; z-index: 80;
  background: var(--blanc);
  border-bottom: 1px solid var(--filet);
  transition: box-shadow var(--t);
}

.entete[data-pose="true"] { box-shadow: 0 2px 16px rgba(36, 31, 26, .08); }

.entete__interieur { display: flex; align-items: center; gap: 1.5rem; min-height: 80px; }

.marque { display: flex; align-items: center; gap: .85rem; text-decoration: none; margin-right: auto; }
/* Le logo officiel contient du texte : il lui faut un peu plus de place */
.marque__logo { width: 70px; height: auto; flex: none; }
.marque__nom { font-family: var(--f-titre); font-size: 1.22rem; font-weight: 600; line-height: 1.15; }
.marque__nom span {
  display: block; font-family: var(--f-texte); font-size: .62rem; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase; color: var(--gris-clair); margin-top: .1rem;
}

.nav { display: flex; align-items: center; gap: 2rem; }

.nav a {
  font-size: .97rem;
  font-weight: 500;
  text-decoration: none;
  padding-block: .4rem;
  position: relative;
  transition: color var(--t);
}

.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px; background: var(--or);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t);
}

.nav a:hover { color: var(--or-fonce); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav .bouton { padding: .7rem 1.5rem; font-size: .92rem; }
.nav .bouton::after { display: none; }

.bascule {
  display: none; width: 46px; height: 44px;
  border: 1px solid var(--filet); border-radius: var(--r-petit);
  background: transparent; cursor: pointer;
  align-items: center; justify-content: center; gap: 5px; flex-direction: column;
}
.bascule span { display: block; width: 20px; height: 2px; background: var(--encre); border-radius: 2px; }

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

.hero {
  position: relative;
  display: flex; align-items: flex-end;
  min-height: clamp(400px, 56vh, 560px);
  padding-block: clamp(2rem, 4vw, 3.25rem) clamp(2.5rem, 4vw, 3.75rem);
  background: var(--ardoise-900);
  color: #fff;
  overflow: hidden;
}

/* L'image dépasse en hauteur pour permettre le mouvement de parallaxe */
.hero__fond {
  position: absolute;
  inset: -12% 0;
  width: 100%;
  height: 124%;
  object-fit: cover;
  object-position: center 58%;
  will-change: transform;
}

.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(20, 16, 12, .95) 0%, rgba(26, 21, 17, .84) 42%, rgba(38, 32, 25, .42) 78%, rgba(38, 32, 25, .28) 100%),
    radial-gradient(120% 90% at 8% 100%, rgba(248, 217, 0, .20) 0%, transparent 55%),
    radial-gradient(95% 70% at 95% 2%, rgba(214, 21, 27, .16) 0%, transparent 62%);
}

.hero .enveloppe { position: relative; z-index: 1; }
.hero__contenu { max-width: 46rem; }

.hero h1 {
  font-size: var(--fs-hero);
  color: #fff;
  margin-bottom: 1.75rem;
  letter-spacing: -.02em;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .3);
}

.hero h1 em {
  font-style: italic;
  color: var(--or-vif);
  position: relative;
}

.hero__accroche {
  font-size: clamp(1.08rem, 1.5vw, 1.28rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, .86);
  max-width: 38rem;
}

.hero .actions { margin-top: 2.75rem; }

/* Entrée du hero, en CSS pur et sans fill-mode : l'état au repos est le texte
   lisible. Si l'animation ne joue pas — pas de JS, onglet en arrière-plan,
   capture de vignette — rien n'est masqué. */
.hero__contenu > * { animation: entree-decalee 1000ms cubic-bezier(.16, .84, .28, 1); }
.hero__contenu > *:nth-child(2) { animation-duration: 1150ms; }
.hero__contenu > *:nth-child(3) { animation-duration: 1300ms; }
.hero__contenu > *:nth-child(4) { animation-duration: 1450ms; }

/* Seul le glissement est animé, jamais l'opacité : une animation qui ne
   démarre pas laisse un texte décalé, pas un texte invisible. Le décalage
   vient de la durée et non d'un délai, pour la même raison. */
@keyframes entree-decalee {
  0%   { translate: 0 1.6rem; }
  35%  { translate: 0 1.6rem; }
  100% { translate: none; }
}

/* Invitation à faire défiler */
.hero__defilement {
  position: absolute;
  left: 50%; bottom: 1.1rem;
  transform: translateX(-50%);
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: .75rem;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  text-decoration: none;
  transition: color var(--t);
}

.hero__defilement:hover { color: #fff; }
.hero__defilement span { display: block; width: 1px; height: 3rem; background: linear-gradient(rgba(255,255,255,.5), transparent); position: relative; overflow: hidden; }

.hero__defilement span::after {
  content: "";
  position: absolute; inset: 0 0 auto;
  height: 40%;
  background: var(--or-vif);
  animation: descente 2.4s cubic-bezier(.6, 0, .4, 1) infinite;
}

@keyframes descente {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(250%); }
  100% { transform: translateY(250%); }
}

/* Bandeau de repères, posé à cheval sur la section suivante */
.reperes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 1px;
  background: var(--filet);
  border: 1px solid var(--filet);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--ombre);
  margin-top: clamp(3rem, 6vw, 4.5rem);
}

.repere { background: var(--blanc); padding: 2.25rem 1.75rem; text-align: center; transition: background var(--t); }
.repere:hover { background: var(--or-pale); }

.repere dt {
  font-family: var(--f-titre);
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  font-weight: 600;
  line-height: 1;
  color: var(--or-fonce);
  font-variant-numeric: tabular-nums;
}

.repere dd {
  margin: .7rem 0 0;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris);
}

/* ----------------------------------------------------- En-tête de page -- */

.entete-page {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(14rem, 23vw, 19rem);
  padding-block: clamp(1.75rem, 3vw, 2.5rem) clamp(2.25rem, 3.75vw, 3.25rem);
  background: var(--ardoise-900);
  color: #fff;
  overflow: hidden;
}

.entete-page__fond {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 38%;
}

.entete-page::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(22, 18, 14, .93) 0%, rgba(29, 24, 19, .82) 48%, rgba(40, 33, 26, .5) 100%),
    radial-gradient(110% 80% at 5% 100%, rgba(248, 217, 0, .18) 0%, transparent 58%),
    radial-gradient(80% 70% at 97% 0%, rgba(214, 21, 27, .14) 0%, transparent 62%);
}

.entete-page .enveloppe { position: relative; z-index: 1; width: 100%; }
.entete-page h1 { font-size: var(--fs-h1); color: #fff; letter-spacing: -.015em; text-shadow: 0 2px 24px rgba(0, 0, 0, .28); }
.entete-page p { color: rgba(255, 255, 255, .82); max-width: 44rem; margin-top: 1.1rem; }
.entete-page .mention { color: var(--or-vif); }

.entete-page__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 4vw, 3rem);
  align-items: end;
}

.entete-page__grille p { margin-top: 0; }

.fil { font-size: .85rem; color: rgba(255, 255, 255, .6); margin-bottom: 1.25rem; }
.fil a { text-decoration: none; }
.fil a:hover { color: #fff; }

/* Bandeau image */
.banniere { margin: 0; overflow: hidden; background: var(--fond-2); }
.banniere img { width: 100%; height: clamp(240px, 34vw, 440px); object-fit: cover; object-position: center 40%; }

/* ------------------------------------------------------------ Évènements -- */

.evenements {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 350px), 1fr));
  gap: clamp(1.75rem, 2.8vw, 2.5rem);
}

.evenement {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--ombre);
  transition: transform var(--t-long), box-shadow var(--t-long), border-color var(--t-long);
}

.evenement:hover {
  transform: translateY(-8px);
  box-shadow: var(--ombre-forte);
  border-color: rgba(214, 168, 0, .60);
}

.evenement--passe { opacity: .78; }

.evenement__vignette {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  background: var(--fond-2);
  overflow: hidden;
}

.evenement__vignette img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-image);
}

.evenement:hover .evenement__vignette img { transform: scale(1.07); }
.evenement--passe .evenement__vignette img { filter: grayscale(.7); }

/* Voile qui monte du bas de l'image */
.evenement__vignette::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(26, 21, 16, .55) 0%, rgba(26, 21, 16, .1) 38%, transparent 68%);
  opacity: .85;
  transition: opacity var(--t-long);
}

.evenement:hover .evenement__vignette::after { opacity: 1; }

/* Pastille de date, posée sur l'image */
.evenement__date {
  position: absolute;
  top: 1.1rem; left: 1.1rem;
  z-index: 2;
  display: grid;
  justify-items: center;
  min-width: 4.15rem;
  padding: .7rem .6rem .6rem;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(6px);
  border-radius: var(--r-petit);
  box-shadow: 0 6px 18px rgba(26, 21, 16, .22);
  line-height: 1;
  transition: transform var(--t-long);
}

.evenement:hover .evenement__date { transform: translateY(-3px); }
.evenement__date b { font-family: var(--f-titre); font-size: 1.65rem; font-weight: 700; color: var(--encre); font-variant-numeric: tabular-nums; }
.evenement__date span { margin-top: .28rem; font-size: .64rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.evenement__date em { font-style: normal; margin-top: .2rem; font-size: .58rem; letter-spacing: .1em; color: var(--gris-clair); }

.etiquette {
  position: absolute; bottom: 1.1rem; left: 1.1rem;
  z-index: 2;
  background: var(--or);
  color: var(--encre);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .4rem .9rem;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(26, 21, 16, .25);
}

.etiquette--sourde { background: rgba(255, 255, 255, .92); color: var(--gris); }

.evenement__corps {
  display: flex; flex-direction: column; gap: 1rem;
  padding: clamp(1.6rem, 2.4vw, 2rem);
  flex: 1;
}

.evenement__titre { font-size: var(--fs-h3); line-height: 1.28; }
.evenement__titre a { text-decoration: none; transition: color var(--t); }
.evenement__titre a:hover { color: var(--or-fonce); }
.evenement__titre a::before { content: ""; position: absolute; inset: 0; z-index: 1; }

.evenement__resume { color: var(--gris); font-size: .95rem; }

.evenement__infos { display: grid; gap: .65rem; margin: 0; padding: 0; list-style: none; }
.evenement__infos li { display: flex; align-items: center; gap: .75rem; font-size: .9rem; color: var(--gris); }
.evenement__infos svg { width: 17px; height: 17px; color: var(--or-fonce); flex: none; }

.evenement__pied {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem 1rem;
  margin-top: auto;
  padding-top: 1.35rem;
  position: relative;
}

/* Filet dégradé en séparateur */
.evenement__pied::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--degrade-ruban);
}

.evenement__tarif { font-family: var(--f-titre); font-size: 1.6rem; font-weight: 700; color: var(--or-fonce); font-variant-numeric: tabular-nums; }
.evenement__pied .bouton { position: relative; z-index: 2; padding: .65rem 1.35rem; font-size: .86rem; }
.evenement__etat { font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gris-clair); }

/* -------------------------------------------------------------- Filtres -- */

.filtres { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: clamp(2rem, 4vw, 3rem); }

.filtres a {
  font-size: .9rem; font-weight: 500;
  padding: .55rem 1.15rem;
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: 999px;
  text-decoration: none;
  transition: background var(--t), border-color var(--t), color var(--t);
}

.filtres a:hover { background: var(--or-pale); border-color: var(--or); color: var(--or-fonce); }
.filtres a[aria-current="true"] { background: var(--ardoise); border-color: var(--ardoise); color: #fff; }

.compteur { font-family: var(--f-texte); font-size: .9rem; font-weight: 500; color: var(--gris-clair); margin-left: .75rem; }

.etat-vide {
  background: var(--blanc);
  border: 1px dashed var(--filet);
  border-radius: var(--r);
  padding: clamp(2rem, 4vw, 3rem);
  color: var(--gris);
  max-width: 46rem;
}
.etat-vide a { color: var(--or-fonce); }

/* Le programme reprend la grille de cartes */
.programme {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: clamp(1.5rem, 2.5vw, 2rem);
}

/* Titre à gauche, contenu à droite */
.deux-temps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.deux-temps__titre { display: grid; gap: .5rem; align-content: start; }
.deux-temps__titre .titre-section { margin-bottom: .5rem; }

.chapeau {
  font-family: var(--f-titre);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--encre);
}

.mention--seule { margin-bottom: .75rem; }

/* Ancien nom du lien fléché, conservé pour les pages intérieures */
.lien-trait {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; font-size: .95rem;
  text-decoration: none;
  color: var(--or-fonce);
  transition: gap var(--t);
}
.lien-trait:hover { gap: .85rem; }
.lien-trait svg { width: 1.05em; height: 1.05em; }
.section--sombre .lien-trait { color: var(--or-vif); }

/* ---------------------------------------------------------------- Duo -- */

.duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.duo__image {
  position: relative;
  margin: 0;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--fond-2);
  box-shadow: var(--ombre-forte);
}

.duo__image img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform var(--t-image); }
.duo__image--portrait img { aspect-ratio: 4/5; }
.duo__image:hover img { transform: scale(1.03); }

/* Filet clair en retrait, comme un passe-partout */
.duo__image::after {
  content: "";
  position: absolute;
  inset: .9rem;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: calc(var(--r) - 5px);
  pointer-events: none;
}

.duo__corps { display: grid; gap: 1.4rem; align-content: center; }

/* --------------------------------------------------------- Vitrines --- */

/* Grandes cartes illustrées : l'image porte le texte */
.vitrines {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr));
  gap: clamp(1.5rem, 2.5vw, 2rem);
}

.vitrine {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(24rem, 38vw, 30rem);
  border-radius: var(--r);
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  box-shadow: var(--ombre);
  transition: transform var(--t-long), box-shadow var(--t-long);
}

.vitrine:hover { transform: translateY(-8px); box-shadow: var(--ombre-forte); }

.vitrine img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-image);
}

.vitrine:hover img { transform: scale(1.07); }

.vitrine::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(19, 15, 12, .94) 6%, rgba(19, 15, 12, .6) 44%, rgba(19, 15, 12, .12) 100%);
  transition: opacity var(--t-long);
}

.vitrine:hover::after { opacity: .92; }

.vitrine__corps {
  position: relative;
  z-index: 1;
  display: grid;
  gap: .85rem;
  padding: clamp(1.75rem, 3vw, 2.4rem);
  width: 100%;
  transition: transform var(--t-long);
}

.vitrine:hover .vitrine__corps { transform: translateY(-6px); }

.vitrine__categorie {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--or-vif);
}

.vitrine h3 { font-size: clamp(1.5rem, 2.4vw, 2.05rem); color: #fff; }
.vitrine p { color: rgba(255, 255, 255, .82); font-size: .95rem; }

.vitrine__lien {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: .4rem;
  font-size: .82rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--or-vif);
  transition: gap var(--t);
}

.vitrine:hover .vitrine__lien { gap: .9rem; }
.vitrine__lien svg { width: 1.1em; height: 1.1em; }

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

.blocs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: clamp(1.25rem, 2.2vw, 1.85rem);
}

/* Quatre cartes tenaient sur trois colonnes, la quatrième restant seule et
   collée à gauche. Deux rangées de deux, centrées, se lisent mieux. */
@media (min-width: 760px) {
  .blocs:has(> :nth-child(4)):not(:has(> :nth-child(5))) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 58rem;
    margin-inline: auto;
  }
}

.bloc {
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: var(--r);
  padding: clamp(1.75rem, 2.8vw, 2.35rem);
  display: grid;
  gap: .9rem;
  align-content: start;
  transition: transform var(--t), box-shadow var(--t);
}

.bloc:hover { transform: translateY(-4px); box-shadow: var(--ombre-forte); }

.bloc__icone {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: var(--or-pale);
  border-radius: 999px;
  margin-bottom: .35rem;
}
.bloc__icone svg { width: 26px; height: 26px; color: var(--or-fonce); }

.bloc__numero { font-size: .76rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.bloc h3 { font-size: var(--fs-h3); }
.bloc h3 a { text-decoration: none; }
.bloc h3 a:hover { color: var(--or-fonce); }
.bloc p { color: var(--gris); font-size: .96rem; }
.bloc__detail { font-size: .85rem; color: var(--gris-clair); border-top: 1px solid var(--filet); padding-top: .85rem; margin-top: .3rem; }

/* ------------------------------------------------------------- Étapes -- */

.enumeration {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.enumeration li { display: grid; gap: .6rem; align-content: start; }

.enumeration__numero {
  font-family: var(--f-titre);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--accent);
  line-height: 1;
}

.section--sombre .enumeration__numero { color: var(--or-vif); }

.enumeration strong { display: block; font-family: var(--f-titre); font-size: 1.18rem; font-weight: 600; }
.enumeration span { color: var(--gris); font-size: .95rem; }
.section--sombre .enumeration span { color: rgba(255, 255, 255, .7); }
.section--sombre .enumeration strong { color: #fff; }

/* Liste simple à puces losange */
.liste-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.liste-points li {
  display: flex; align-items: baseline; gap: .9rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--filet);
}
.liste-points li::before { content: ""; width: 8px; height: 8px; flex: none; background: var(--or-fonce); transform: rotate(45deg) translateY(-2px); }
.liste-points strong { font-weight: 600; }
.liste-points span { color: var(--gris); font-size: .9rem; margin-left: auto; text-align: right; }

/* ------------------------------------------------------------ Exergue -- */

.exergue { display: grid; gap: 1.75rem; max-width: 46rem; margin-inline: auto; text-align: center; }
.exergue blockquote { margin: 0; font-family: var(--f-titre); font-size: clamp(1.5rem, 3vw, 2.35rem); font-weight: 500; line-height: 1.35; font-style: italic; }
.exergue figcaption { font-size: .8rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.section--sombre .exergue figcaption { color: var(--or-vif); }

/* Garde-fou : le rouge du logo tombe à 2,1:1 sur l'ardoise. Partout où un
   accent se retrouve sur fond sombre, c'est le reflet clair du ruban qui
   prend le relais. */
.section--sombre .bloc__numero,
.hero .titre-section em,
.entete-page .titre-section em,
.entete-page h1 em { color: var(--or-vif); }

/* ----------------------------------------------- Questions fréquentes -- */

/* Liste de définitions en questions-réponses : plus lisible qu'un paragraphe
   continu pour des informations qu'on vient chercher une par une. */
.questions { display: grid; gap: 0; margin: 0; }

.questions > div {
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--filet);
}

.questions > div:first-child { padding-top: 0; }
.questions > div:last-child { border-bottom: 0; padding-bottom: 0; }

.questions dt {
  font-family: var(--f-titre);
  font-size: 1.12rem;
  font-weight: 600;
  margin-bottom: .5rem;
}

.questions dd { margin: 0; color: var(--gris); }
.section--sombre .questions dd { color: rgba(255, 255, 255, .78); }
.section--sombre .questions > div { border-color: rgba(255, 255, 255, .14); }

/* Cadre de l'agenda de réservation */
.cadre-agenda { border: 1px solid var(--filet); background: var(--blanc); border-radius: var(--r-petit); overflow: hidden; }
.cadre-agenda iframe { display: block; border: 0; }

/* Encart présenté seul, au centre de sa section */
.encart--centre {
  text-align: center;
  justify-items: center;
  padding-block: clamp(3rem, 7vw, 5rem);
}

/* ------------------------------------------------------------- Agenda -- */

/* Les disponibilités, un bloc par journée. Le visiteur balaie les jours puis
   choisit une heure : deux décisions simples plutôt qu'un calendrier. */
.agenda {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: clamp(1.25rem, 2.2vw, 1.85rem);
}

.agenda__jour {
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: var(--r);
  padding: 1.5rem;
  box-shadow: var(--ombre);
}

.agenda__jour h3 {
  font-size: 1.02rem;
  font-weight: 600;
  padding-bottom: .9rem;
  margin-bottom: .9rem;
  border-bottom: 1px solid var(--filet);
  text-transform: capitalize;
}

.agenda__heures { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }

.agenda__heures a {
  display: flex; align-items: baseline; gap: .6rem;
  padding: .7rem 1rem;
  border: 1px solid var(--filet);
  border-radius: var(--r-petit);
  text-decoration: none;
  transition: background var(--t), border-color var(--t), transform var(--t);
}

.agenda__heures b { font-family: var(--f-titre); font-size: 1.1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.agenda__heures span { font-size: .78rem; color: var(--gris-clair); margin-left: auto; }

.agenda__heures a:hover {
  background: var(--or-pale);
  border-color: var(--or);
  transform: translateX(3px);
}

/* Créneau choisi : le récapitulatif à gauche, le formulaire à droite */
.reservation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.reservation__heure {
  font-family: var(--f-titre);
  font-size: 1.35rem;
  font-weight: 600;
  margin-top: .6rem;
}

.reservation__heure span {
  display: block;
  font-family: var(--f-texte);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: .5rem;
}

.fiche--centre > div { grid-template-columns: 1fr; gap: .2rem; text-align: center; justify-items: center; }
.fiche--centre { max-width: 26rem; margin-inline: auto; }

@media (max-width: 900px) {
  .reservation { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------- Informations -- */

.fiche { display: grid; gap: 0; margin: 0; }
.fiche > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--filet); align-items: baseline; }
.fiche > div:last-child { border-bottom: 0; }
.fiche dt { font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gris-clair); }
.fiche dd { margin: 0; font-size: .98rem; }
.fiche dd a { color: var(--or-fonce); text-decoration: none; }

.encart {
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: var(--r);
  box-shadow: var(--ombre);
  padding: clamp(1.6rem, 2.6vw, 2.25rem);
  display: grid; gap: 1.35rem; align-content: start;
}

.encart h2 { font-family: var(--f-texte); font-size: .8rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--or-fonce); }
.encart .bouton { width: 100%; justify-content: center; }
.encart--collant { position: sticky; top: 7rem; }

/* Deux colonnes : contenu + encart */
.avec-encart {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

/* ---------------------------------------------------------- Partenaires -- */

.sponsor {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: var(--r);
  box-shadow: var(--ombre);
  padding: clamp(1.75rem, 3vw, 2.75rem);
}

.sponsor__vignette {
  display: grid; gap: 1.1rem; justify-items: center; text-align: center;
  padding: 1.75rem;
  background: var(--fond);
  border-radius: var(--r-petit);
  text-decoration: none;
  transition: background var(--t);
}
.sponsor__vignette:hover { background: var(--or-pale); }
.sponsor__vignette img { width: min(210px, 100%); }
.sponsor__vignette em { font-style: normal; font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--or-fonce); }
.sponsor__vignette span { font-size: .85rem; color: var(--gris); }

.emplacements {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 1.25rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.emplacement {
  border: 1px dashed var(--filet);
  border-radius: var(--r);
  min-height: 8.5rem;
  display: grid; place-items: center; text-align: center;
  padding: 1.5rem;
  font-size: .82rem;
  color: var(--gris-clair);
  background: var(--blanc);
}

/* Case occupée par un partenaire */
.emplacement--rempli {
  border-style: solid;
  align-content: center;
  gap: .85rem;
  text-decoration: none;
  box-shadow: var(--ombre);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}

.emplacement--rempli:hover { transform: translateY(-4px); box-shadow: var(--ombre-forte); border-color: var(--or); }
.emplacement--rempli img { width: min(160px, 100%); height: auto; }
.emplacement__nom { font-family: var(--f-titre); font-size: 1.25rem; font-weight: 600; color: var(--encre); }
.emplacement__niveau { font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--or-fonce); }

.bande-sponsor {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.5rem 2.5rem;
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: var(--r);
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.75rem, 3.5vw, 2.75rem);
}
.bande-sponsor__gauche { display: grid; gap: .9rem; }
.bande-sponsor__mention { font-size: .74rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--or-fonce); }
.bande-sponsor img { width: min(190px, 55vw); }
.bande-sponsor p { color: var(--gris); font-size: .95rem; max-width: 38ch; }

/* --------------------------------------------------------- Formulaires -- */

.formulaire { display: grid; gap: 1.5rem; max-width: 44rem; }
.formulaire fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 1.25rem; }
.formulaire legend { font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--or-fonce); padding: 0 0 .5rem; }

/* align-content: start sinon, dans une rangée, un champ sans texte d'aide
   étire ses lignes et son libellé se décolle de son champ. */
.champ { display: grid; gap: .45rem; margin: 0; align-content: start; }
.champ--piege { position: absolute; left: -9999px; }
.champ--case { display: flex; align-items: center; gap: .7rem; }
.champ label { font-size: .88rem; font-weight: 600; }
.champ label span { color: var(--rouge); }

.champ input, .champ select, .champ textarea {
  font-family: var(--f-texte); font-size: 1rem; color: var(--encre);
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: var(--r-petit);
  padding: .8rem 1rem;
  width: 100%;
  transition: border-color var(--t), box-shadow var(--t);
}

.champ--case input { width: auto; accent-color: var(--or); }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: 0; border-color: var(--or); box-shadow: 0 0 0 3px rgba(248, 217, 0, .35); }
.champ input[aria-invalid="true"], .champ textarea[aria-invalid="true"] { border-color: var(--rouge); }
.champ textarea { resize: vertical; line-height: 1.65; }
.champ input[type="date"] { min-height: 3.1rem; }
.champ input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .55; }
.champ input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }
.champ input[type="file"] { padding: .65rem .75rem; font-size: .92rem; cursor: pointer; }
.champ input[type="file"]::file-selector-button {
  margin-right: .85rem; padding: .5rem 1rem;
  border: 1px solid var(--filet); border-radius: var(--r-petit);
  background: var(--fond); color: var(--encre);
  font-family: var(--f-texte); font-weight: 600; font-size: .88rem;
  cursor: pointer; transition: background var(--t), border-color var(--t);
}
.champ input[type="file"]:hover::file-selector-button { background: var(--or-pale); border-color: var(--or); }

.champ-rang { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1.25rem; align-items: start; }

.aide { font-size: .82rem; color: var(--gris-clair); }
.erreur { font-size: .82rem; color: var(--rouge); font-weight: 600; }

.message { padding: 1.1rem 1.35rem; border-radius: var(--r-petit); border-left: 4px solid var(--or); background: var(--blanc); margin-bottom: 1.75rem; max-width: 52rem; font-size: .95rem; }
/* Le vert de confirmation reste : c'est le seul repère qui distingue une
   réussite d'un avertissement, lequel porte déjà le jaune. Il est tiré vers
   l'olive pour s'accorder au jaune du logo plutôt que de jurer avec. */
.message--succes { border-left-color: #5E7C2F; background: #F3F6E9; }
.message--erreur { border-left-color: var(--rouge); background: var(--rouge-pale); }
.message--avertissement { border-left-color: var(--or); background: var(--or-pale); }

/* ------------------------------------------------------------------ Pied -- */

.pied { background: var(--ardoise-900); color: rgba(255, 255, 255, .68); padding-top: clamp(3.5rem, 6vw, 5rem); padding-bottom: 2rem; }

.pied__haut {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 2.2fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.pied__signature { display: grid; gap: 1.25rem; align-content: start; }
.pied__marque { display: flex; align-items: center; gap: .85rem; }
.pied__marque svg, .pied__marque img { width: 70px; height: auto; flex: none; }
.pied__marque span { font-family: var(--f-titre); font-size: 1.2rem; font-weight: 600; color: #fff; }
.pied__signature p { font-size: .95rem; max-width: 32ch; }

.pied__colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 2rem; }
.pied h3 { font-family: var(--f-texte); font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--or-vif); margin-bottom: 1.1rem; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.pied a { text-decoration: none; font-size: .95rem; transition: color var(--t); }
.pied a:hover { color: var(--or-vif); }

.pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; padding-top: 1.75rem; font-size: .85rem; color: var(--gris-clair); }
.pied__reseaux { display: flex; gap: 1rem; }
.pied__reseaux a { color: inherit; }
.pied__reseaux svg { width: 19px; height: 19px; }

/* ------------------------------------------------------------ Page légale -- */

.texte-legal h2 { font-size: 1.45rem; margin: 2.5rem 0 .85rem; }
.texte-legal p, .texte-legal ul { max-width: var(--lecture); color: var(--gris); }
.texte-legal p + p { margin-top: .9rem; }
.texte-legal a { color: var(--or-fonce); }
.a-completer { background: var(--or-pale); padding: 0 .3rem; border-bottom: 2px solid var(--or); }

/* ------------------------------------------------- Révélation au scroll -- */

/* La révélation joue sur `translate`, jamais sur `transform` :
   les effets de survol des cartes gardent ainsi leur propre transform. */
.js [data-revele] { opacity: 0; translate: 0 1.75rem; }

.js [data-revele][data-vu="true"] {
  opacity: 1;
  translate: none;
  transition: opacity 800ms cubic-bezier(.16, .84, .28, 1), translate 800ms cubic-bezier(.16, .84, .28, 1);
}

/* Les cartes d'une grille révélée arrivent les unes après les autres */
.js [data-revele] .evenement,
.js [data-revele] .vitrine,
.js [data-revele] .bloc,
.js [data-revele] .repere {
  opacity: 0;
  translate: 0 1.5rem;
}

.js [data-revele][data-vu="true"] .evenement,
.js [data-revele][data-vu="true"] .vitrine,
.js [data-revele][data-vu="true"] .bloc,
.js [data-revele][data-vu="true"] .repere {
  opacity: 1;
  translate: none;
  transition: opacity 750ms cubic-bezier(.16, .84, .28, 1) var(--retard, 0ms),
              translate 750ms cubic-bezier(.16, .84, .28, 1) var(--retard, 0ms),
              transform var(--t-long), box-shadow var(--t-long), border-color var(--t-long);
}

/* ------------------------------------------------------------ Responsive -- */

@media (max-width: 1080px) {
  .avec-encart { grid-template-columns: 1fr; }
  .deux-temps { grid-template-columns: 1fr; }
  .encart--collant { position: static; }
  .sponsor { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  .bascule { display: flex; }
  .nav {
    position: absolute; inset: 100% 0 auto;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--blanc);
    border-bottom: 1px solid var(--filet);
    box-shadow: var(--ombre);
    padding: .5rem var(--gouttiere) 1.5rem;
    display: none;
  }
  .nav[data-ouvert="true"] { display: flex; }
  .nav a { padding: .95rem 0; border-bottom: 1px solid var(--filet); }
  .nav a::after { display: none; }
  .nav .bouton { margin-top: 1rem; justify-content: center; border-bottom: 0; }
  .entete__interieur { position: relative; }
  .pied__haut { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .entete-page__grille { grid-template-columns: 1fr; }

  /* L'indicateur « Découvrir » est centré en bas du hero : dès que la
     colonne se resserre, il passe sur le second bouton. Il ne sert à rien
     au doigt, on le retire. */
  .hero__defilement { display: none; }

  /* Les deux boutons du hero se lisaient de largeurs différentes */
  .hero .actions { display: grid; gap: .75rem; }
  .hero .actions .bouton { justify-content: center; width: 100%; }
}

@media (max-width: 620px) {
  .fiche > div { grid-template-columns: 1fr; gap: .2rem; }
  .liste-points span { margin-left: 0; text-align: left; width: 100%; }
  .liste-points li { flex-wrap: wrap; }

  /* Sur un téléphone tenu à la main, un en-tête plein écran fait perdre le
     contenu : on rend la hauteur au texte. */
  .hero { min-height: 74vh; }
  .entete-page { min-height: 12rem; }
  .entete-page h1 { font-size: clamp(1.75rem, 8vw, 2.4rem); }

  .barre-haute { font-size: .78rem; }
  .barre-haute__interieur { justify-content: center; gap: .35rem 1.1rem; }

  .bouton { padding: .95rem 1.5rem; }
  .filtres { gap: .5rem; }
  .filtres a { padding: .5rem 1rem; font-size: .84rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .js [data-revele],
  .js [data-revele] .evenement,
  .js [data-revele] .vitrine,
  .js [data-revele] .bloc,
  .js [data-revele] .repere { opacity: 1; translate: none; }
  .hero__contenu, .hero__contenu > * { animation: none; }
}

@media print {
  .barre-haute, .entete, .pied__haut { display: none; }
  body { background: #fff; }
}