@layer pages {
/* ============================================================================
   ACCUEIL — ce qui est PROPRE au hero pleine page.
   Tout le reste (pilules, halos, cartes discipline, chiffres, appel final,
   en-tete de page interieure) est mutualise dans components.css et sert
   desormais a toutes les pages du site.
   ========================================================================= */

/* ---- HERO --------------------------------------------------------------- */
.hero {
  position: relative;
  display: grid;
  align-items: center;
  /* Pleine hauteur d'ecran : le header est pose PAR-DESSUS (marge negative
     dans header.css), donc le hero part bien de y = 0. `svh` et non `vh` :
     sur mobile, `vh` compte la barre d'adresse retractee et fait deborder. */
  min-height: 100svh;
  isolation: isolate;
  overflow: clip;
  padding-bottom: var(--sp-12);
  text-align: center;
}

/* Les photos ne sont plus le sujet : elles texturent le noir, les halos font
   le reste. Le conteneur porte l'assombrissement commun ; chaque photo n'anime
   que sa propre opacite et son propre cadrage. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  overflow: clip;
  background: var(--c-bg);
  opacity: .24;
  filter: grayscale(.4) contrast(1.1);
  /* Le temps d'antenne d'une photo, et le tour complet du diaporama :
     --hero-cycle DOIT valoir --hero-slot x le nombre de photos. */
  --hero-slot: 6s;
  --hero-cycle: 24s;
}
/* Chaque photo occupe tout le fond ; elles se relaient en fondu croise, dans
   l'ordre du HTML, decalees d'un temps d'antenne l'une par rapport a l'autre.
   Les deux cadrages --kb-from / --kb-to bornent le zoom lent joue pendant son
   passage a l'ecran ; le retour a --kb-from se fait hors champ. */
.hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  opacity: 0;
  /* `linear` et non une courbe : chaque etape changerait de vitesse et le
     mouvement pulserait. */
  animation: hero-slide var(--hero-cycle) linear infinite;
  animation-delay: calc(var(--slide-i) * var(--hero-slot));
  will-change: opacity, transform;
}
/* La fenetre visible vaut 100 / nombre de photos, soit 25 % a quatre. Le fondu
   croise est le palier de 3 %, soit 0,72 s pour un cycle de 24 s : c'est CE
   chiffre qu'il faut bouger pour un passage plus sec ou plus doux.
   Ajouter une photo impose de reprendre ces pourcentages ET --hero-cycle. */
@keyframes hero-slide {
  0%   { opacity: 0; transform: var(--kb-from); }
  3%   { opacity: 1; }
  25%  { opacity: 1; }
  28%  { opacity: 0; transform: var(--kb-to); }
  100% { opacity: 0; transform: var(--kb-from); }
}
/* Un cadrage par photo, pour que deux passages consecutifs ne se ressemblent
   pas : on alterne zoom avant et zoom arriere, et on change de sens de derive.
   L'image doit couvrir en permanence : a l'echelle S elle deborde de (S-1)/2
   de chaque cote, donc une derive de t % n'est sure que si S >= 1 + 2t/100. */
.hero__slide:nth-child(1) {
  --slide-i: 0;
  --kb-from: scale(1.10) translate3d(-3%, -2%, 0);
  --kb-to:   scale(1.20) translate3d(3%, 2%, 0);
}
.hero__slide:nth-child(2) {
  --slide-i: 1;
  --kb-from: scale(1.18) translate3d(4%, -2%, 0);
  --kb-to:   scale(1.10) translate3d(-3%, 2%, 0);
}
.hero__slide:nth-child(3) {
  --slide-i: 2;
  --kb-from: scale(1.12) translate3d(2%, 4%, 0);
  --kb-to:   scale(1.22) translate3d(-2%, -4%, 0);
}
.hero__slide:nth-child(4) {
  --slide-i: 3;
  --kb-from: scale(1.20) translate3d(-4%, 2%, 0);
  --kb-to:   scale(1.12) translate3d(4%, -1%, 0);
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(90% 70% at 50% 42%, transparent 0%, rgb(11 11 14 / .55) 60%, var(--c-bg) 100%),
    linear-gradient(180deg, rgb(11 11 14 / .72) 0%, rgb(11 11 14 / .35) 45%, var(--c-bg) 100%);
}

/* Durees volontairement premieres entre elles (23 s / 31 s) : les deux halos
   ne repassent jamais au meme moment par leur position de depart, et la scene
   ne donne donc pas l'impression de boucler. */
.hero .glow--a {
  top: -20rem; left: 50%; translate: -50% 0;
  --glow-size: 46rem; --glow-op: .26; --glow-blur: 160px;
  --glow-dx: 10%; --glow-dy: 9%; --glow-dur: 23s;
}
.hero .glow--b {
  bottom: -18rem; left: -10rem;
  --glow-c: var(--c-red-500); --glow-size: 34rem; --glow-op: .26;
  --glow-dx: 22%; --glow-dy: -14%; --glow-dur: 31s;
}

.hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Respiration entre pilule, titre, mots-cles, texte, bouton et reseaux.
     Fluide et non fixe : le hero fait 100svh, un ecart genereux sur mobile
     ferait deborder le bloc et `overflow: clip` le rognerait. */
  gap: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem);
  max-width: 56rem;
  margin-inline: auto;
  /* Sert de reference de mesure au titre, voir .hero__title. */
  container-type: inline-size;
}

/* --fs-3xl (4,5 rem au plus) et non --fs-hero : le titre ouvre un bloc qui
   enchaine sur la ligne de mots-cles puis le paragraphe, comme sur le site de
   reference. A 6,5 rem il ecraserait les deux.

   UNE SEULE LIGNE, a toute largeur. « Beaumont Triathlon » mesure exactement
   9,66 em en Clash Display, capitale initiale (mesure faite dans le navigateur,
   constante de 320 a 1440 px) : la taille maximale qui tient est donc
   100/9,66 = 10,35 % de la largeur du conteneur. On plafonne a 10,1 % pour
   garder une marge.
   Ce ratio a deja change deux fois : 8,93 em en Anton, 11,47 em en Clash
   Display tout en capitales. La police ET la casse le font bouger.
   `cqw` et NON `vw` : la mesure porte sur le conteneur reel. Le viewport, lui,
   inclut le debordement du tiroir de navigation pousse hors ecran, et une
   valeur en vw serait donc surevaluee sur mobile — c'est exactement ce qui
   faisait passer le titre a deux lignes.
   ATTENTION : ce ratio vaut pour CETTE chaine. Changer le titre impose de le
   remesurer. */
.hero__title {
  font-family: var(--ff-display);
  font-size: min(var(--fs-3xl), 10.1cqw);
  white-space: nowrap;
  line-height: .95;
  letter-spacing: var(--ls-tightest);
  /* Capitale initiale seulement, comme le titre du site de reference : les
     h1-h3 du socle sont en capitales (typography.css), on annule ici. */
  text-transform: none;
  color: var(--c-text);
  margin: 0;
}

.hero__keywords { justify-content: center; color: var(--c-text); }

.hero__lead {
  max-width: 44rem;
  font-size: var(--fs-md);
  color: var(--c-text-muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
}
/* Logo du trail : hors du bouton, cale a sa gauche par l'ordre du DOM. */
.hero__logo { height: 2rem; width: auto; flex: none; }

/* Les reseaux sociaux forment leur propre ligne, sous le bouton ; l'ecart
   vient du `gap` du conteneur, pour garder un rythme regulier. */
.hero__social { justify-content: center; }

/* Mouvement reduit : plus de diaporama du tout, la premiere photo seule reste. */
@media (prefers-reduced-motion: reduce) {
  .hero__slide { animation: none; }
  .hero__slide:nth-child(1) { opacity: 1; }
}

/* ---- LA PROCHAINE SEANCE : etiquette, date et heure, discipline -------- */
.next-train {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: var(--bw-hair) solid var(--c-border-strong);
  border-radius: var(--r-pill);
  background: rgb(23 23 28 / .72);
  backdrop-filter: blur(10px);
  box-shadow: var(--sh-3);
  color: var(--c-text);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}
.next-train[hidden] { display: none; }

.next-train:hover, .next-train:focus-visible {
  border-color: var(--c-accent);
  box-shadow: var(--sh-gold);
  transform: translateY(-2px);
}

/* L'etiquette dit de quoi il s'agit. */
.next-train__tag {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--c-text-muted);
}

.next-train__when {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-1);
  font-size: var(--fs-sm);
}
.next-train__hour {
  font-family: var(--ff-display);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-tight);
}

@media (max-width: 599px) {
  .hero__logo { height: 1.65rem; }
  .next-train { padding: var(--sp-2) var(--sp-3); gap: var(--sp-2); border-radius: var(--r-xl); }
  .next-train__tag { width: 100%; text-align: center; }
}

/* Le meme escalier d'entree que le contenu du hero (`intro-rise`, dans
   components.css), une marche apres les reseaux sociaux. */
.hero__content > .next-train { --i: 6; }
}