/* =============================================================================
   Mes collègues, ces héros ! — Sudinfo × Fondation Roi Baudouin
   Feuille de style unique · mobile first
   Polices : Oswald (titres) · Cream Cake (mise en évidence) · Roboto (lecture)
   Palette : Fondation Roi Baudouin
   ============================================================================= */

@font-face {
  font-family: "Cream Cake";
  src: url("../fonts/Cream-Cake-Bold.woff2") format("woff2"),
       url("../fonts/Cream-Cake-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@view-transition { navigation: auto; }

:root {
  /* Palette FRB */
  --menthe: #F2FAF8;
  --turquoise: #79CBBD;
  --turquoise-clair: #AAE5DB;
  --vert: #245F56;
  --vert-nuit: #002C31;
  --rose: #F4D2DF;
  --rose-pale: #FBEDF2;
  --rose-vif: #F7BBD5;
  --sable: #F0DDBB;
  --noir: #0B0B0B;
  --blanc: #FFFFFF;

  --texte: #111614;
  --texte-doux: #45524F;
  --ligne: rgba(0, 0, 0, .12);

  /* Typographie */
  --f-titre: "Oswald", "Arial Narrow", "Helvetica Neue", sans-serif;
  --f-texte: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-cream: "Cream Cake", "Brush Script MT", cursive;

  /* Mise en page */
  --gouttiere: clamp(1.125rem, 4.5vw, 2.5rem);
  --max: 1240px;
  --entete-h: 76px;
  --rayon: 1.25rem;
  --rayon-l: 1.75rem;
  --rayon-xl: clamp(1.75rem, 5vw, 3.5rem);
  --ombre: 0 1px 2px rgba(0, 44, 49, .06), 0 18px 40px -20px rgba(0, 44, 49, .35);
  --ombre-l: 0 2px 4px rgba(0, 44, 49, .06), 0 30px 60px -28px rgba(0, 44, 49, .45);

  /* Mouvement */
  --ease: cubic-bezier(.22, .8, .24, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}

/* ---------------------------------------------------------------- Base ---- */

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

[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--entete-h) + 1rem);
}

body {
  margin: 0;
  background: var(--menthe);
  color: var(--texte);
  font: 400 1.0625rem/1.65 var(--f-texte);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--f-titre);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.005em;
  text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
figure { margin: 0; }
blockquote { margin: 0; }

:focus-visible {
  outline: 3px solid var(--noir);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: var(--rose-vif); color: var(--noir); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.lien-evitement {
  position: fixed;
  top: .75rem; left: .75rem;
  z-index: 100;
  padding: .75rem 1.25rem;
  border-radius: 999px;
  background: var(--noir);
  color: var(--blanc);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}
.lien-evitement:focus { transform: none; }

.conteneur {
  width: min(100% - 2 * var(--gouttiere), var(--max));
  margin-inline: auto;
}
.conteneur--etroit { width: min(100% - 2 * var(--gouttiere), 46rem); }
.conteneur--moyen { width: min(100% - 2 * var(--gouttiere), 62rem); }

/* --------------------------------------------- Mise en évidence « Cream » --- */

.cream {
  font-family: var(--f-cream);
  font-weight: 700;
  font-style: normal;
  font-size: 1.3em;
  line-height: .8;
  letter-spacing: 0;
}

/* Trait de surligneur qui se dessine sous les mots en Cream Cake */
.marqueur {
  padding-inline: .08em;
  background-image: linear-gradient(var(--marqueur, var(--rose-vif)), var(--marqueur, var(--rose-vif)));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 0% .3em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 1s var(--ease) .35s;
}
.est-visible .marqueur,
.marqueur.est-visible,
.no-js .marqueur { background-size: 100% .3em; }

/* --------------------------------------------------------------- Textes ---- */

.surtitre {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  margin-bottom: 1rem;
  font-family: var(--f-titre);
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.surtitre::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  background: currentColor;
}

.titre-section {
  font-size: clamp(2.5rem, 8.5vw, 4.75rem);
  line-height: 1.04;
}
.titre-section--m { font-size: clamp(2rem, 6vw, 3.25rem); }

.intro {
  font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
  line-height: 1.6;
  color: var(--texte-doux);
}

.section__entete {
  max-width: 50rem;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}
.section__entete--centre {
  margin-inline: auto;
  text-align: center;
}
.section__entete .titre-section + * { margin-top: 1.25rem; }

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

.btn {
  --btn-fond: var(--noir);
  --btn-texte: var(--blanc);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65em;
  min-height: 3.25rem;
  padding: .85rem 1.6rem;
  border: 2px solid var(--btn-fond);
  border-radius: 999px;
  background: var(--btn-fond);
  color: var(--btn-texte);
  font: 700 1rem/1.15 var(--f-texte);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  transition: color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--btn-texte);
  transform: translateY(101%);
  transition: transform .45s var(--ease);
}
.btn:hover { color: var(--btn-fond); }
.btn:hover::before { transform: translateY(0); }
.btn:active { transform: scale(.97); }
.btn svg { width: 1.1em; height: 1.1em; flex: none; transition: transform .35s var(--ease); }
.btn:hover svg { transform: translateX(3px); }

.btn--clair { --btn-fond: var(--blanc); --btn-texte: var(--noir); }
.btn--contour {
  --btn-fond: transparent;
  --btn-texte: var(--noir);
  border-color: var(--noir);
  color: var(--noir);
}
.btn--contour::before { background: var(--noir); }
.btn--contour:hover { color: var(--blanc); }
.btn--petit { min-height: 2.6rem; padding: .5rem 1.15rem; font-size: .9rem; }

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-weight: 700;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  transition: background-size .4s var(--ease);
}
.lien-fleche:hover { background-size: 100% 2px; }
.lien-fleche svg { width: 1.1em; height: 1.1em; transition: transform .35s var(--ease); }
.lien-fleche:hover svg { transform: translateX(4px); }

.groupe-boutons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
}

/* --------------------------------------------------------------- En-tête --- */

.entete {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  padding: .625rem var(--gouttiere) 0;
  pointer-events: none;
  transition: transform .5s var(--ease);
}
.entete.est-cache { transform: translateY(-130%); }

.entete__barre {
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
  max-width: var(--max);
  height: 3.5rem;
  margin-inline: auto;
  padding: 0 .375rem 0 1.25rem;
  border-radius: 999px;
  pointer-events: auto;
}
/* Fond vitré sur un pseudo-élément : ne casse pas le position: fixed du menu mobile */
.entete__barre::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: inherit;
  background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: 0 10px 30px -18px rgba(0, 44, 49, .5);
  transition: background-color .4s;
}
.est-defile .entete__barre::before { background: rgba(255, 255, 255, .85); }

.marque {
  position: relative;
  z-index: 2;
  margin-right: auto;
  font-family: var(--f-titre);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}
.marque .cream { font-size: 1.4em; }

.entete__cta { position: relative; z-index: 2; display: none; }

.burger {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--noir);
  color: var(--blanc);
  cursor: pointer;
}
.burger span {
  grid-area: 1 / 1;
  width: 1.1rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .45s var(--ease);
}
.burger span:first-child { transform: translateY(-3.5px); }
.burger span:last-child { transform: translateY(3.5px); }
.menu-ouvert .burger span:first-child { transform: rotate(45deg); }
.menu-ouvert .burger span:last-child { transform: rotate(-45deg); }

/* Navigation — mobile : panneau plein écran révélé en cercle depuis le bouton */
.nav {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: calc(var(--entete-h) + 1.5rem) var(--gouttiere) calc(2rem + env(safe-area-inset-bottom));
  background: var(--menthe);
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  clip-path: circle(0 at calc(100% - 3rem) 2.4rem);
  transition: clip-path .7s var(--ease-in-out), visibility 0s linear .7s;
}
.menu-ouvert .nav {
  visibility: visible;
  clip-path: circle(150% at calc(100% - 3rem) 2.4rem);
  transition: clip-path .7s var(--ease-in-out), visibility 0s;
}

.nav__liste {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__liste > li {
  border-bottom: 1px solid var(--ligne);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.menu-ouvert .nav__liste > li {
  opacity: 1;
  transform: none;
  transition-delay: calc(.15s + var(--i, 0) * 60ms);
}

.nav__lien {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 0;
  border: 0;
  background: none;
  font-family: var(--f-titre);
  font-size: clamp(1.75rem, 8vw, 2.4rem);
  font-weight: 600;
  line-height: 1.1;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.nav__lien svg { width: 1.5rem; height: 1.5rem; transition: transform .4s var(--ease); }
.nav__bouton[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav__sous {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--ease);
}
.nav__groupe.est-ouvert .nav__sous { grid-template-rows: 1fr; }
.nav__sous > ul {
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
}
.nav__sous a {
  display: block;
  padding: .55rem 0 .55rem 1rem;
  border-left: 2px solid var(--turquoise);
  font-size: 1.125rem;
  text-decoration: none;
}
.nav__sous li:last-child a { margin-bottom: 1rem; }

.nav__pied {
  display: grid;
  gap: 1.5rem;
  margin-top: auto;
  opacity: 0;
  transition: opacity .5s var(--ease) .1s;
}
.menu-ouvert .nav__pied { opacity: 1; transition-delay: .5s; }
.nav__pied .btn { width: 100%; }
.nav__logos { display: flex; align-items: center; gap: 1.5rem; }
.nav__logos img { height: 2.25rem; width: auto; }

html.menu-ouvert { overflow: hidden; }

@media (min-width: 640px) {
  .entete__cta { display: inline-flex; }
}

@media (min-width: 1080px) {
  .burger { display: none; }
  .entete__barre { padding-right: .5rem; }

  .nav {
    position: relative;
    inset: auto;
    z-index: 2;
    flex-direction: row;
    padding: 0;
    background: none;
    overflow: visible;
    visibility: visible;
    clip-path: none;
    transition: none;
  }
  .nav__liste { flex-direction: row; align-items: center; gap: .25rem; }
  .nav__liste > li { position: relative; border: 0; opacity: 1; transform: none; }
  .nav__lien {
    gap: .3em;
    padding: .5rem .8rem;
    border-radius: 999px;
    font-family: var(--f-titre);
    font-size: 1rem;
    font-weight: 500;
    transition: background-color .3s;
  }
  .nav__lien svg { width: 1rem; height: 1rem; }
  .nav__lien:hover,
  .nav__groupe.est-ouvert > .nav__lien { background: rgba(0, 0, 0, .06); }
  .nav__lien[aria-current="page"] { background: var(--noir); color: var(--blanc); }

  .nav__sous {
    position: absolute;
    top: calc(100% + .75rem);
    left: 50%;
    display: block;
    min-width: 15rem;
    padding: .5rem;
    border-radius: 1.25rem;
    background: var(--blanc);
    box-shadow: var(--ombre-l);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -8px);
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s;
  }
  .nav__sous::before { /* zone tampon pour le survol */
    content: "";
    position: absolute;
    inset: -.85rem 0 auto;
    height: .85rem;
  }
  .nav__groupe.est-ouvert .nav__sous {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s;
  }
  .nav__sous > ul { overflow: visible; }
  .nav__sous a {
    padding: .65rem .9rem;
    border: 0;
    border-radius: .8rem;
    font-size: .975rem;
    white-space: nowrap;
    transition: background-color .25s;
  }
  .nav__sous a:hover { background: var(--menthe); }
  .nav__sous li:last-child a { margin-bottom: 0; }
  .nav__pied { display: none; }
}

/* CTA flottant mobile */
.cta-flottant {
  position: fixed;
  white-space: nowrap;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 55;
  box-shadow: 0 16px 34px -12px rgba(0, 0, 0, .55);
  transform: translate(-50%, 180%);
  transition: transform .55s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.cta-flottant.est-visible { transform: translate(-50%, 0); }
@media (min-width: 640px) { .cta-flottant { display: none; } }

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

.section {
  position: relative;
  padding-block: clamp(4.5rem, 11vw, 8.5rem);
}
.section--feuille {
  z-index: 1;
  margin-top: calc(-1 * var(--rayon-xl));
  border-radius: var(--rayon-xl) var(--rayon-xl) 0 0;
}
.section--feuille + .section--feuille { padding-top: calc(clamp(4.5rem, 11vw, 8.5rem) + .5rem); }

.fond-menthe { background: var(--menthe); }
.fond-turquoise { background: var(--turquoise); --marqueur: var(--rose); }
.fond-rose { background: var(--rose); --marqueur: var(--blanc); }
.fond-rose-pale { background: var(--rose-pale); --marqueur: var(--rose-vif); }
.fond-blanc { background: var(--blanc); }
.fond-sable { background: var(--sable); --marqueur: var(--blanc); }
.fond-noir { background: var(--noir); color: var(--blanc); }
.fond-nuit { background: var(--vert-nuit); color: var(--blanc); }

/* --------------------------------------------------------------- Hero ------- */
/* Le hero de l'accueil reprend la composition d'origine : texte à gauche,
   deux colonnes de photos qui défilent en continu à droite. */

.hero {
  position: relative;
  background: var(--turquoise);
  overflow: hidden;
}
.hero__grille { display: grid; grid-template-columns: 1fr; }

.hero__contenu {
  width: min(100% - 2 * var(--gouttiere), 40rem);
  margin-inline: auto;
  padding: calc(var(--entete-h) + 3rem) 0 3.5rem;
  text-align: center;
}
.hero__titre {
  margin-bottom: 1.25rem;
  color: var(--vert);
  font-size: clamp(2.75rem, 11vw, 5.8rem);
  line-height: 1.12;
}
.hero__titre .cream { font-size: 1.32em; }
.hero__accroche {
  margin-bottom: 1rem;
  color: var(--vert-nuit);
  font-family: var(--f-titre);
  font-size: clamp(1.25rem, 3.6vw, 1.5rem);
  line-height: 1.35;
}
.hero__texte {
  margin-bottom: 1.75rem;
  color: var(--vert-nuit);
  font-size: 1rem;
  line-height: 1.65;
}
.hero__boutons { justify-content: center; }

.hero__logos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  margin-top: 2.75rem;
}
.hero__logos a { display: block; transition: opacity .3s; }
.hero__logos a:hover { opacity: .75; }
.hero__logo-frb { height: 3rem; width: auto; }
/* Logo Sudinfo : toute la largeur du bloc de texte */
.hero__logos a:last-child { width: 100%; }
.hero__logo-sudinfo { width: 100%; height: auto; }

.hero__visuel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  height: 30rem;
  padding-inline: var(--gouttiere);
  overflow: hidden;
}
.hero__colonne { overflow: hidden; }
.hero__piste {
  display: grid;
  gap: 1rem;
  animation: hero-defile 34s linear infinite;
  will-change: transform;
}
.hero__colonne--decalee .hero__piste { animation-delay: -17s; }
.hero.est-hors-ecran .hero__piste { animation-play-state: paused; }

@keyframes hero-defile {
  from { transform: translateY(0); }
  to { transform: translateY(calc(-50% - .5rem)); }
}

.hero__photo {
  position: relative;
  aspect-ratio: 5 / 6;
  border-radius: 1rem;
  overflow: hidden;
  background: var(--turquoise-clair);
}
.hero__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__credit {
  position: absolute;
  right: .6rem;
  bottom: .6rem;
  margin: 0;
  padding: .25rem .6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--vert-nuit);
  font-size: .7rem;
  font-weight: 500;
}

@media (min-width: 992px) {
  .hero__grille { grid-template-columns: 1fr 1fr; align-items: center; }
  /* Bloc centré dans sa moitié d'écran, texte aligné à gauche */
  .hero__contenu {
    justify-self: center;
    width: min(35rem, 100% - 8vw);
    margin: 0;
    padding: calc(var(--entete-h) + 2rem) 0 3rem;
    text-align: left;
  }
  /* « Mes collègues, » tient toujours sur une ligne */
  .hero__titre { font-size: min(5.8rem, 6.9vw); }
  .hero__logos { align-items: flex-start; }
  .hero__boutons { justify-content: flex-start; }
  .hero__visuel {
    height: 100vh;
    height: 100svh;
    min-height: 40rem;
    padding: 0 5vw 0 0;
  }
}

/* --------------------------------------------- Apparition au défilement ---- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js [data-reveal="fondu"] { transform: none; }
.js [data-reveal="zoom"] { transform: scale(.94); }
.js [data-reveal].est-visible { opacity: 1; transform: none; }

/* --------------------------------------------- Appel à candidatures -------- */
/* Centré : texte, étapes en 3 colonnes, formulaire */

.candidature { max-width: 62rem; }
.candidature__entete { margin-bottom: clamp(2rem, 5vw, 3rem); }

.candidature__question { font-size: 1.2rem; }

.candidature__message {
  max-width: 44rem;
  margin: 0 auto clamp(2.5rem, 6vw, 4rem);
  text-align: center;
  font-size: 1.0625rem;
}
.candidature__infos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .75rem 1.5rem;
  margin-top: 1.5rem;
}
.compte {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .95rem;
  border: 1.5px solid var(--vert);
  border-radius: 999px;
  color: var(--vert);
  font-size: .95rem;
  font-weight: 500;
}
.compte::before {
  content: "";
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: currentColor;
  animation: compte-pulse 2.4s var(--ease-in-out) infinite;
}
@keyframes compte-pulse { 50% { opacity: .35; } }

.etapes {
  display: grid;
  gap: 1.75rem;
  margin: 0 auto clamp(2.5rem, 6vw, 4rem);
  padding: 0;
  list-style: none;
  counter-reset: etape;
  text-align: center;
}
.etapes li { counter-increment: etape; }
.etapes li::before {
  content: "0" counter(etape);
  display: block;
  margin-bottom: .35rem;
  color: var(--vert);
  font-family: var(--f-cream);
  font-size: 2.4rem;
  line-height: 1;
}
.etapes h3 { margin-bottom: .35rem; font-size: 1.35rem; font-weight: 600; }
.etapes p { max-width: 18rem; margin-inline: auto; color: var(--texte-doux); font-size: .975rem; }

.formulaire {
  max-width: 54rem;
  margin-inline: auto;
  padding: clamp(.25rem, 1.5vw, 1rem);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-l);
  background: var(--blanc);
}
.qualifio_wrapper { min-height: 20rem; }
.qualifio_wrapper iframe { display: block; width: 100%; border: 0; }

@media (min-width: 760px) {
  .etapes { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .etapes li + li { border-left: 1px solid var(--ligne); }
}

/* --------------------------------------------- Sélecteur de province ------ */

.provinces {
  position: sticky;
  top: calc(var(--entete-h) + .25rem);
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .75rem 1rem;
  margin: 0 auto clamp(2rem, 5vw, 3rem);
  transition: top .5s var(--ease);
}
.entete-cachee .provinces { top: .75rem; }
.provinces__label { font-family: var(--f-titre); font-size: 1.05rem; }
.provinces__choix {
  position: relative;
  display: inline-flex;
  padding: .3rem;
  border: 1.5px solid var(--noir);
  border-radius: 999px;
  background: rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.provinces__indicateur {
  position: absolute;
  top: .3rem;
  bottom: .3rem;
  left: 0;
  width: var(--w, 0);
  border-radius: 999px;
  background: var(--noir);
  transform: translateX(var(--x, 0));
  transition: transform .5s var(--ease), width .5s var(--ease);
}
.provinces__bouton {
  position: relative;
  z-index: 1;
  min-height: 2.75rem;
  padding: 0 1.4rem;
  border: 0;
  border-radius: 999px;
  background: none;
  font-family: var(--f-titre);
  font-size: 1.1rem;
  font-weight: 500;
  cursor: pointer;
  transition: color .4s var(--ease);
}
.provinces__bouton[aria-pressed="true"] { color: var(--blanc); }
.no-indicateur .provinces__bouton[aria-pressed="true"] { background: var(--noir); }

/* --------------------------------------------------------- Cartes héros ---- */

/* Flex plutôt que grille : une dernière ligne incomplète reste centrée */
.grille-heros {
  --colonnes: 2;
  --ecart: .875rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem var(--ecart);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 720px) { .grille-heros { --colonnes: 3; --ecart: 1.25rem; row-gap: 2rem; } }
@media (min-width: 1100px) { .grille-heros { --colonnes: 5; } }

.carte-heros {
  flex: 0 0 calc((100% - (var(--colonnes) - 1) * var(--ecart)) / var(--colonnes));
  min-width: 0;
  opacity: 0;
  transform: translateY(24px);
  animation: carte-entree .8s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes carte-entree { to { opacity: 1; transform: none; } }

.carte-heros__lien {
  display: block;
  color: inherit;
  text-decoration: none;
}
.carte-heros__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--rose-pale);
  box-shadow: var(--ombre);
  transform: translateZ(0);
}
.carte-heros__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease);
}
.carte-heros__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 20, 22, .72) 0%, rgba(0, 20, 22, .15) 42%, transparent 60%);
}
.carte-heros__nom {
  position: absolute;
  inset: auto .9rem .85rem;
  z-index: 1;
  color: var(--blanc);
  font-family: var(--f-titre);
  font-size: clamp(1.15rem, 3.8vw, 1.45rem);
  font-weight: 600;
  line-height: 1.05;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .3);
}
.carte-heros__nom .cream { display: block; font-size: 1.35em; line-height: .95; }
.carte-heros__plus {
  position: absolute;
  top: .7rem;
  right: .7rem;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--blanc);
  color: var(--noir);
  transform: scale(.85);
  opacity: .92;
  transition: transform .45s var(--ease), background-color .3s;
}
.carte-heros__plus svg { width: 1rem; height: 1rem; }
.carte-heros__info {
  display: block;
  margin-top: .7rem;
  font-size: .875rem;
  line-height: 1.4;
  color: var(--texte-doux);
}
.carte-heros__info strong { display: block; color: var(--texte); font-weight: 500; }

@media (hover: hover) {
  .carte-heros__lien:hover .carte-heros__media img { transform: scale(1.06); }
  .carte-heros__lien:hover .carte-heros__plus { transform: scale(1) rotate(90deg); background: var(--rose-vif); }
}

/* État d'attente (avant la désignation des héros) */
.attente {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 26rem;
  padding: 2rem 0;
}
.attente__fantomes {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .875rem;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
.attente__fantomes li {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  border-radius: var(--rayon);
  background: linear-gradient(110deg, rgba(255, 255, 255, .35) 30%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, .35) 70%) 0 0 / 250% 100%;
  animation: attente-reflet 3.2s var(--ease-in-out) infinite;
  animation-delay: calc(var(--i, 0) * 180ms);
  font-family: var(--f-cream);
  font-size: 3.5rem;
  color: rgba(0, 0, 0, .12);
}
.attente__fantomes li:nth-child(n+4) { display: none; }
@keyframes attente-reflet { from { background-position: 100% 0; } to { background-position: -150% 0; } }

.attente__carte {
  position: relative;
  max-width: 34rem;
  padding: clamp(1.75rem, 5vw, 2.75rem);
  border-radius: var(--rayon-xl);
  background: var(--blanc);
  box-shadow: var(--ombre-l);
  text-align: center;
}
.attente__carte h3 { margin-bottom: .75rem; font-size: clamp(1.75rem, 5vw, 2.4rem); }
.attente__carte p { color: var(--texte-doux); }
.attente__carte .groupe-boutons { justify-content: center; margin-top: 1.75rem; }

@media (min-width: 720px) {
  .attente__fantomes { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .attente__fantomes li:nth-child(n+4) { display: grid; }
}

/* ------------------------------------------------- Aperçu (fenêtre) ------- */

.apercu {
  width: 100%;
  max-width: 100%;
  max-height: 94dvh;
  margin: auto 0 0;
  padding: 0;
  border: 0;
  border-radius: 1.75rem 1.75rem 0 0;
  background: var(--blanc);
  color: var(--texte);
  overflow: hidden;
  transform: translateY(100%);
  transition: transform .55s var(--ease), overlay .55s allow-discrete, display .55s allow-discrete;
}
.apercu.est-ouvert { transform: none; }
.apercu::backdrop {
  background: rgba(0, 28, 31, 0);
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  transition: background-color .45s, backdrop-filter .45s;
}
.apercu.est-ouvert::backdrop {
  background: rgba(0, 28, 31, .55);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
html:has(.apercu[open]) { overflow: hidden; }

.apercu__panneau {
  display: grid;
  grid-template-rows: auto 1fr auto;
  max-height: 94dvh;
}
.apercu__poignee {
  justify-self: center;
  width: 2.75rem;
  height: 5px;
  margin: .6rem 0 0;
  border-radius: 5px;
  background: rgba(0, 0, 0, .18);
}
.apercu__defilement { overflow-y: auto; overscroll-behavior: contain; }
.apercu__media {
  position: relative;
  aspect-ratio: 16 / 10;
  margin: .75rem .75rem 0;
  border-radius: 1.25rem;
  overflow: hidden;
  background: var(--rose-pale);
}
.apercu__media img { width: 100%; height: 100%; object-fit: cover; }
.apercu__contenu { padding: 1.5rem 1.5rem 2rem; }
.apercu__tag {
  display: inline-block;
  margin-bottom: .9rem;
  padding: .3rem .8rem;
  border-radius: 999px;
  background: var(--menthe);
  font-size: .8rem;
  font-weight: 500;
}
.apercu__nom { margin-bottom: .5rem; font-size: clamp(2rem, 7vw, 2.75rem); line-height: 1.05; }
.apercu__presentation { margin-bottom: 1.25rem; color: var(--texte-doux); font-style: italic; }
.apercu__citation {
  margin-bottom: 1.25rem;
  padding-left: 1rem;
  border-left: 4px solid var(--rose-vif);
  font-family: var(--f-titre);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.3;
}
.apercu__resume { margin-bottom: 1.75rem; font-size: 1rem; color: var(--texte-doux); }
.apercu__resume p:first-child { color: var(--texte); font-weight: 500; }

.apercu__fermer {
  position: absolute;
  top: 1.15rem;
  right: 1.15rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--blanc);
  box-shadow: var(--ombre);
  cursor: pointer;
  transition: transform .35s var(--ease);
}
.apercu__fermer:hover { transform: rotate(90deg); }
.apercu__fermer svg { width: 1.1rem; height: 1.1rem; }

.apercu__nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .5rem;
  padding: .75rem .75rem calc(.75rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--ligne);
  background: var(--blanc);
}
.apercu__nav button {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-height: 3rem;
  padding: .4rem .75rem;
  border: 0;
  border-radius: .9rem;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background-color .25s;
}
.apercu__nav button:hover { background: var(--menthe); }
.apercu__nav .apercu__suivant { align-items: flex-end; text-align: right; }
.apercu__nav small {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.apercu__nav span { font-family: var(--f-titre); font-size: 1rem; font-weight: 500; line-height: 1.2; }
.apercu__compteur { font-family: var(--f-titre); font-size: .95rem; color: var(--texte-doux); font-variant-numeric: tabular-nums; }

.apercu__contenu.est-change { animation: apercu-change .45s var(--ease); }
@keyframes apercu-change { from { opacity: 0; transform: translateX(var(--sens, 16px)); } }

@media (min-width: 860px) {
  .apercu {
    width: min(1000px, 92vw);
    max-height: 88vh;
    margin: auto;
    border-radius: 2rem;
    transform: translateY(24px) scale(.97);
    opacity: 0;
    transition: transform .5s var(--ease), opacity .4s var(--ease), overlay .5s allow-discrete, display .5s allow-discrete;
  }
  .apercu.est-ouvert { transform: none; opacity: 1; }
  .apercu__panneau { grid-template-rows: 1fr auto; max-height: 88vh; }
  .apercu__poignee { display: none; }
  .apercu__defilement { display: grid; grid-template-columns: 42% 1fr; }
  .apercu__media {
    position: sticky;
    top: 0;
    aspect-ratio: auto;
    height: calc(88vh - 5rem);
    max-height: 40rem;
    margin: 1rem 0 1rem 1rem;
  }
  .apercu__contenu { padding: 2.75rem 2.75rem 2.5rem 2.5rem; }
}

/* ------------------------------------------- Que sont-ils devenus ? ------- */

.recits { display: grid; gap: 3.5rem; }
.recit__media-mobile {
  margin-bottom: 1.5rem;
  border-radius: var(--rayon-l);
  overflow: hidden;
  box-shadow: var(--ombre);
}
.recit__media-mobile { position: relative; }
.recit__media-mobile img { width: 100%; aspect-ratio: 1080 / 1015; object-fit: cover; object-position: top; }
.recit__tag {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .75rem;
  font-family: var(--f-titre);
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.recit__tag::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--turquoise); }
.recit__nom { margin-bottom: 1.25rem; font-size: clamp(2.25rem, 7vw, 3.5rem); }
.recit__texte { color: var(--texte-doux); }
.recit .lien-fleche { margin-top: 1.5rem; }
.recits__scene { display: none; }
.recits__suite { margin-top: clamp(3rem, 7vw, 5rem); text-align: center; }

@media (min-width: 992px) {
  .recits-bloc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }
  .recits__scene {
    position: sticky;
    top: calc(var(--entete-h) + 2rem);
    display: block;
    aspect-ratio: 1080 / 1015;
    border-radius: var(--rayon-xl);
    overflow: hidden;
    background: var(--rose-pale);
    box-shadow: var(--ombre-l);
  }
  .recits__vue {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .9s var(--ease);
  }
  .recits__vue.est-actif { opacity: 1; }
  .recits__vue img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity .9s var(--ease), transform 1.4s var(--ease);
  }
  .recits__vue.est-actif img { opacity: 1; transform: none; }
  .recits__puces {
    position: absolute;
    left: 1.25rem;
    top: 1.25rem;
    z-index: 2;
    display: flex;
    gap: .4rem;
  }
  .recits__puces span {
    width: 2rem;
    height: 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .5);
    transition: background-color .4s, width .4s var(--ease);
  }
  .recits__puces span.est-actif { width: 3.25rem; background: var(--blanc); }
  .recits { gap: 0; }
  .recit {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 82vh;
    padding-block: 4rem;
    opacity: .28;
    transition: opacity .6s var(--ease);
  }
  .recit.est-actif { opacity: 1; }
  .recit:first-child { padding-top: 0; min-height: 70vh; justify-content: flex-start; }
  .recit__media-mobile { display: none; }
}

/* --------------------------------------------------------------- Bandeau --- */
/* Sobre : fond menthe, vert nuit. Défilement continu piloté par assets/js/site.js */

.bandeau {
  --bandeau-marge: clamp(2rem, 5vw, 3.25rem);
  position: relative;
  z-index: 1;
  /* En bas : on ajoute la hauteur dont la section suivante remonte sur le bandeau */
  padding-block: var(--bandeau-marge) calc(var(--bandeau-marge) + var(--rayon-xl));
  overflow: hidden;
  border-top: 1px solid rgba(0, 44, 49, .08);
  background: var(--menthe);
  color: var(--vert-nuit);
}
.bandeau__ligne {
  display: flex;
  width: max-content;
  will-change: transform;
  backface-visibility: hidden;
}
.bandeau__texte {
  display: flex;
  align-items: center;
  gap: .6em;
  padding-right: .6em;
  font-family: var(--f-titre);
  font-size: clamp(2rem, 6.5vw, 5rem);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.bandeau__texte .cream { color: var(--vert); }
.bandeau__ligne--inverse .bandeau__texte { color: rgba(0, 44, 49, .26); }
.bandeau__point {
  flex: none;
  width: .22em;
  height: .22em;
  border-radius: 50%;
  background: var(--turquoise);
}

/* ------------------------------------------------- Bloc Fondation (FRB) ---- */

.frb { display: grid; gap: 2.5rem; }
.frb__titre { font-size: clamp(2rem, 6vw, 3.25rem); line-height: 1.08; }
.frb__figure { position: relative; margin-top: 2rem; border-radius: var(--rayon-l); overflow: hidden; box-shadow: var(--ombre-l); }
.frb__figure img { width: 100%; }
@media (min-width: 992px) {
  .frb { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(3rem, 7vw, 7rem); align-items: start; }
  .frb__gauche { position: sticky; top: calc(var(--entete-h) + 2rem); }
}

/* ------------------------------------------------------- Texte riche ------- */

.prose { font-size: 1.0625rem; line-height: 1.75; }
.prose > * { margin-block: 0; }
.prose > * + * { margin-top: 1.15em; }
.prose > p:first-child.chapo,
.prose .chapo {
  font-size: clamp(1.15rem, 2.5vw, 1.3rem);
  font-weight: 500;
  line-height: 1.6;
  color: var(--texte);
}
.prose h2,
.prose h3,
.prose h4 {
  margin-top: 2.25em;
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 600;
  line-height: 1.15;
}
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: .7em; }
.prose blockquote {
  position: relative;
  margin: 2em 0;
  padding: .25rem 0 .25rem 1.4rem;
  border-left: 4px solid var(--rose-vif);
  font-family: var(--f-titre);
  font-size: clamp(1.35rem, 3.5vw, 1.7rem);
  font-weight: 500;
  line-height: 1.3;
}
.prose blockquote p { margin: 0; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: .4em; }
.prose a { text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--turquoise); }
.prose a:hover { text-decoration-color: currentColor; }
.prose strong { font-weight: 700; }
.prose figure { margin: 2.5em 0; }

.fond-turquoise .prose blockquote { border-color: var(--blanc); }

/* ------------------------------------------------------------ Article ------ */

.progression {
  position: fixed;
  inset: 0 0 auto;
  z-index: 70;
  height: 4px;
  background: var(--noir);
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
  pointer-events: none;
}

.article__entete {
  padding: calc(var(--entete-h) + clamp(2rem, 6vw, 4rem)) 0 0;
  background: var(--menthe);
}
.retour {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: .5rem;
  margin-bottom: clamp(1.75rem, 5vw, 2.75rem);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
}
.retour svg { width: 1.1rem; height: 1.1rem; transition: transform .35s var(--ease); }
.retour:hover svg { transform: translateX(-4px); }

.article__tag {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: 1.25rem;
  padding: .35rem .95rem .35rem .4rem;
  border-radius: 999px;
  background: var(--blanc);
  box-shadow: var(--ombre);
  font-size: .9rem;
  font-weight: 500;
}
.article__tag:not(:has(img)) { padding-left: .95rem; }
.article__tag img { width: auto; height: 1.6rem; max-width: 4.5rem; object-fit: contain; }

.article__titre {
  margin-bottom: 1.5rem;
  font-size: clamp(2.1rem, 6.5vw, 3.75rem);
  line-height: 1.06;
}
.article__personne {
  margin-bottom: .25rem;
  font-family: var(--f-titre);
  font-size: clamp(1.4rem, 4vw, 1.75rem);
  font-weight: 600;
  line-height: 1.2;
}
.article__presentation { margin-bottom: 1rem; color: var(--texte-doux); font-style: italic; }

.article__figure {
  width: min(100% - 2 * var(--gouttiere), 72rem);
  margin: clamp(2rem, 5vw, 3.5rem) auto 0;
}
.article__figure img {
  width: 100%;
  max-height: 80vh;
  border-radius: var(--rayon-xl);
  object-fit: cover;
  box-shadow: var(--ombre-l);
}
/* L'image d'en-tête chevauche la fin du fond menthe */
.article__entete { padding-bottom: 0; }
.article__corps-fond {
  margin-top: calc(-1 * clamp(4rem, 14vw, 12rem));
  padding-top: calc(clamp(4rem, 14vw, 12rem) + clamp(2.5rem, 6vw, 4rem));
  background: var(--blanc);
}
.article__entete .article__figure { position: relative; z-index: 2; }

.article__corps { padding-bottom: clamp(3rem, 8vw, 5rem); }
.article__figure--interne { width: auto; margin: 2.5em 0; }

.partage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--ligne);
}
.partage__label { margin-right: auto; font-family: var(--f-titre); font-size: 1.15rem; }

/* Navigation précédent / suivant */
.suite {
  display: grid;
  gap: 1rem;
  margin-top: 2.5rem;
}
.suite__lien {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem;
  border: 1.5px solid var(--ligne);
  border-radius: var(--rayon);
  text-decoration: none;
  transition: border-color .3s, transform .4s var(--ease);
}
.suite__lien:hover { border-color: var(--noir); transform: translateY(-3px); }
.suite__lien img { width: 4.5rem; height: 4.5rem; border-radius: .8rem; object-fit: cover; flex: none; }
.suite__lien small { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-doux); }
.suite__lien span { font-family: var(--f-titre); font-size: 1.2rem; font-weight: 600; line-height: 1.2; }
.suite__lien--suivant { flex-direction: row-reverse; text-align: right; }
@media (min-width: 640px) { .suite { grid-template-columns: 1fr 1fr; } .suite__lien--suivant:only-child { grid-column: 2; } }

/* Bandeau d'appel en bas de page */
.appel {
  position: relative;
  overflow: hidden;
  padding: clamp(2.25rem, 6vw, 4rem);
  border-radius: var(--rayon-xl);
  background: var(--turquoise);
  text-align: center;
}
.appel h2 { margin-bottom: 1rem; font-size: clamp(2rem, 6vw, 3.25rem); }
.appel p { max-width: 36rem; margin: 0 auto 1.75rem; }

/* Cartes d'articles (Que sont-ils devenus ? 2024) */
.cartes-articles { display: grid; gap: 1.25rem; }
.carte-article {
  display: flex;
  flex-direction: column;
  border-radius: var(--rayon-l);
  overflow: hidden;
  background: var(--blanc);
  box-shadow: var(--ombre);
  text-decoration: none;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.carte-article:hover { transform: translateY(-6px); box-shadow: var(--ombre-l); }
.carte-article__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--rose-pale); }
.carte-article__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.carte-article:hover .carte-article__media img { transform: scale(1.05); }
.carte-article__corps { display: flex; flex: 1; flex-direction: column; padding: 1.5rem 1.5rem 1.75rem; }
.carte-article__tag {
  align-self: flex-start;
  margin-bottom: .9rem;
  padding: .25rem .75rem;
  border-radius: 999px;
  background: var(--rose);
  font-size: .8rem;
  font-weight: 500;
}
.carte-article h3 { margin-bottom: .75rem; font-size: clamp(1.6rem, 4vw, 2rem); }
.carte-article p { color: var(--texte-doux); font-size: 1rem; }
.carte-article .lien-fleche { margin-top: auto; padding-top: 1.25rem; align-self: flex-start; }

@media (min-width: 900px) {
  .cartes-articles { grid-template-columns: 1.35fr 1fr; grid-template-rows: auto auto; }
  .carte-article--grande { grid-row: span 2; }
  .carte-article--grande .carte-article__media { aspect-ratio: 4 / 3; }
  .carte-article--grande h3 { font-size: 2.6rem; }
  .cartes-articles--2 { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
}

/* ------------------------------------------------- Rétrospective 2025 ------ */

.retro {
  padding: calc(var(--entete-h) + 2.5rem) 0 clamp(5rem, 10vw, 7rem);
  overflow: hidden;
  background: var(--rose-pale);
}
.retro__grille { display: grid; gap: 2.5rem; align-items: center; }
.retro__visuel { position: relative; display: grid; place-items: center; }
.retro__cercle {
  position: absolute;
  width: min(100%, 34rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--turquoise);
}
.retro__magazine {
  position: relative;
  display: block;
  width: min(100%, 34rem);
  animation: flotte 7s var(--ease-in-out) infinite alternate;
}
.retro__magazine img { filter: drop-shadow(0 30px 30px rgba(0, 44, 49, .25)); }
@keyframes flotte {
  from { transform: translateY(-8px) rotate(-1.5deg); }
  to { transform: translateY(10px) rotate(1deg); }
}
.retro__fleche {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: flex-end;
  gap: .5rem;
  font-family: var(--f-titre);
  font-size: clamp(1.4rem, 4vw, 1.9rem);
  font-weight: 600;
  line-height: 1;
  transform: rotate(-6deg);
}
.retro__fleche .cream { color: var(--vert); }
.retro__titre { margin-bottom: 1.5rem; font-size: clamp(2.6rem, 8vw, 5rem); line-height: 1.05; }
.retro__texte p { font-size: clamp(1.1rem, 2.4vw, 1.3rem); }
.retro .groupe-boutons { margin-top: 2rem; }
.logos-partenaires { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; margin-top: 2.5rem; }
.logos-partenaires img { width: auto; height: 3rem; }
.logos-partenaires .logo-sudinfo { width: min(100%, 20rem); height: auto; }

@media (min-width: 992px) {
  .retro { min-height: 100svh; display: grid; align-items: center; }
  .retro__grille { grid-template-columns: 1fr 1fr; gap: 4rem; }
}

/* --------------------------------------------------------- Page 404 ------- */

.page-erreur {
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: calc(var(--entete-h) + 2rem) var(--gouttiere) 4rem;
  text-align: center;
  background: var(--turquoise);
}
.page-erreur h1 { font-size: clamp(3rem, 12vw, 7rem); color: var(--vert); }
.page-erreur p { margin: 1rem 0 2rem; font-size: 1.15rem; }

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

.pied {
  position: relative;
  overflow: clip;
  z-index: 1;
  margin-top: calc(-1 * var(--rayon-xl));
  padding: calc(var(--rayon-xl) + clamp(3rem, 8vw, 5rem)) 0 calc(1.5rem + env(safe-area-inset-bottom));
  border-radius: var(--rayon-xl) var(--rayon-xl) 0 0;
  background: var(--vert-nuit);
  color: var(--blanc);
}
.pied a { text-decoration: none; }
.pied__haut { display: grid; gap: 2.5rem; }
.pied__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2rem; }
.pied__logos img { width: auto; height: 2.75rem; }
.pied__logos a { transition: opacity .3s; }
.pied__logos a:hover { opacity: .7; }
.pied__reseaux { display: flex; gap: .6rem; margin-top: 1.5rem; }
.pied__reseaux a {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 50%;
  transition: background-color .3s, color .3s, border-color .3s;
}
.pied__reseaux a:hover { background: var(--blanc); color: var(--vert-nuit); border-color: var(--blanc); }
.pied__reseaux svg { width: 1.15rem; height: 1.15rem; }

.pied__colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
.pied__colonnes h2 {
  margin-bottom: .9rem;
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--turquoise);
}
.pied__colonnes ul { margin: 0; padding: 0; list-style: none; }
.pied__colonnes li + li { margin-top: .45rem; }
.pied__colonnes a { color: rgba(255, 255, 255, .85); transition: color .25s; }
.pied__colonnes a:hover { color: var(--blanc); text-decoration: underline; text-underline-offset: 4px; }

.pied__geant {
  margin: clamp(3rem, 8vw, 5rem) 0 1.5rem;
  font-family: var(--f-titre);
  font-size: clamp(2.6rem, 12.5vw, 10rem);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.01em;
  color: var(--turquoise);
  text-wrap: balance;
}
.pied__geant .cream { color: var(--rose-vif); }

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .15);
  font-size: .875rem;
  color: rgba(255, 255, 255, .7);
}
.pied__bas button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--blanc);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

@media (min-width: 900px) {
  .pied__haut { grid-template-columns: 1fr 1.4fr; }
  .pied__colonnes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ----------------------------------------------- Vérification du contenu -- */

.alerte-contenu {
  position: fixed;
  inset: auto 1rem 1rem;
  z-index: 200;
  max-width: 40rem;
  margin-inline: auto;
  padding: 1rem 1.25rem;
  border-radius: 1rem;
  background: #B42318;
  color: var(--blanc);
  font-size: .95rem;
  box-shadow: var(--ombre-l);
}
.alerte-contenu strong { display: block; margin-bottom: .25rem; font-size: 1.05rem; }
.alerte-contenu code { font-size: .9em; }

/* --------------------------------------------- Mouvement réduit ----------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .hero__piste, .bandeau__ligne, .retro__magazine { animation: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  @view-transition { navigation: none; }
}

/* ------------------------------------------------------------ Compléments -- */

.page-entete { padding-top: calc(var(--entete-h) + clamp(2.5rem, 7vw, 5rem)); }
.portrait { min-height: 100vh; background: var(--menthe); }
.carte-article .h3 { margin-bottom: .75rem; font-size: clamp(1.6rem, 4vw, 2rem); }
@media (min-width: 900px) { .carte-article--grande .h3 { font-size: 2.6rem; } }
.appel.fond-blanc { background: var(--blanc); box-shadow: var(--ombre-l); }
.alerte-contenu ul { margin: .35rem 0 0; padding-left: 1.1rem; }
.alerte-contenu li + li { margin-top: .25rem; }
.alerte-contenu--ok { background: var(--vert); }
.article__h1 { margin-bottom: 1rem; }
.article__h1 .article__titre,
.article__h1 .article__personne { display: block; }

/* ---------------------------------------------------------------- Légendes -- */
/* --sous : sous une grande photo · --sur : étiquette vitrée posée sur la photo */

.legende {
  font: 500 .85rem/1.45 var(--f-texte);
  letter-spacing: .005em;
}
.legende--sous {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  margin-top: 1rem;
  padding-inline: .25rem;
  color: var(--texte-doux);
}
.legende--sous::before {
  content: "";
  flex: none;
  width: 1.75rem;
  height: 2px;
  border-radius: 2px;
  background: var(--turquoise);
  transform: translateY(-.3em) scaleX(1);
  transform-origin: left;
  transition: transform 1s var(--ease) .45s;
}
.js .legende--sous:not(.est-visible)::before { transform: translateY(-.3em) scaleX(0); }

.legende--sur {
  position: absolute;
  left: .85rem;
  bottom: .85rem;
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: .55rem;
  max-width: calc(100% - 1.7rem);
  margin: 0;
  padding: .5rem .85rem;
  border-radius: .9rem;
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  backdrop-filter: blur(10px) saturate(1.4);
  color: var(--vert-nuit);
  font-size: .8rem;
  box-shadow: 0 8px 24px -12px rgba(0, 44, 49, .5);
}
.legende--sur::before {
  content: "";
  flex: none;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--turquoise);
}
.js [data-reveal="legende"] {
  transform: translateY(10px);
  transition-duration: .7s;
  transition-delay: .35s;
}
@media (min-width: 760px) { .legende--sur { left: 1.1rem; bottom: 1.1rem; max-width: min(28rem, calc(100% - 2.2rem)); } }

/* Apparition douce des textes */
.js [data-reveal="texte"] {
  transform: translateY(14px);
  transition-duration: .8s;
}

/* ------------------------------------------- Glissement des sections ------- */
/* Chaque « feuille » remonte légèrement par-dessus la précédente au défilement */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .section--feuille,
    .pied {
      animation: feuille-glisse linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
  }
}
@keyframes feuille-glisse {
  from { transform: translateY(90px); }
  to { transform: translateY(0); }
}
/* Navigateurs sans « animation-timeline » : même effet, déclenché à l'apparition */
.glisse-attente { transform: translateY(90px); }
.glisse-attente.glisse-ok { transform: none; transition: transform 1.1s var(--ease); }

/* ------------------------------------- Que sont-ils devenus ? (2024) ------- */

.devenus {
  padding: calc(var(--entete-h) + clamp(2.5rem, 7vw, 4.5rem)) 0 calc(clamp(4rem, 9vw, 6rem) + var(--rayon-xl));
  overflow: hidden;
  background: var(--rose-pale);
}
.devenus__grille { display: grid; gap: 3rem; align-items: center; }
.devenus__titre { margin-bottom: 1.25rem; font-size: clamp(2.6rem, 8vw, 5rem); line-height: 1.04; }
.devenus .intro { max-width: 34rem; }

.sommaire {
  display: grid;
  gap: .6rem;
  max-width: 30rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}
.sommaire a {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1.1rem;
  border-radius: var(--rayon);
  background: var(--blanc);
  box-shadow: 0 1px 2px rgba(0, 44, 49, .06);
  text-decoration: none;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.sommaire a:hover { transform: translateX(6px); box-shadow: var(--ombre); }
.sommaire__num { min-width: 2.2rem; color: var(--vert); font-family: var(--f-cream); font-size: 1.8rem; line-height: 1; }
.sommaire a > span:last-child { color: var(--texte-doux); font-size: .9rem; line-height: 1.35; }
.sommaire strong { display: block; color: var(--texte); font-family: var(--f-titre); font-size: 1.15rem; font-weight: 600; }

.devenus__collage { position: relative; height: clamp(18rem, 72vw, 30rem); }
.devenus__collage img {
  position: absolute;
  width: 56%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 6px solid var(--blanc);
  border-radius: var(--rayon-l);
  box-shadow: var(--ombre-l);
  transition: transform .8s var(--ease);
}
.devenus__collage img:nth-child(1) { left: 0; top: 10%; transform: rotate(-5deg); }
.devenus__collage img:nth-child(2) { left: 22%; top: 0; z-index: 1; transform: rotate(2deg); }
.devenus__collage img:nth-child(3) { right: 0; top: 16%; z-index: 2; transform: rotate(6deg); }
.devenus__collage:hover img:nth-child(1) { transform: rotate(-8deg) translateX(-10px); }
.devenus__collage:hover img:nth-child(3) { transform: rotate(9deg) translateX(10px); }

.recit .btn { align-self: flex-start; margin-top: 1.5rem; }

@media (min-width: 992px) {
  .devenus__grille { grid-template-columns: 1.05fr 1fr; gap: 4rem; }
  .devenus__collage { height: 32rem; }
  .recits-bloc--court .recit { min-height: 62vh; }
}