/* =========================================================
   Compositions des slides 2 et 4 à 10
   Les mises en page sont définitives ; seuls les visuels manquants
   sont matérialisés par des emplacements (.ph). Chaque emplacement
   occupe la taille exacte du visuel attendu.
   ========================================================= */

/* ---------------------------------------------------------
   Réglages communs
   --------------------------------------------------------- */

.slide-head--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.slide-body--cols {
  flex-direction: row;
  gap: 56px;
  align-items: stretch;
}

.slide-body--split {
  flex-direction: row;
  gap: 72px;
  align-items: center;
}

/* Une invite discrète : sans elle, l'ouverture au clic passe inaperçue
   pour qui consulte le lien seul. */
.head-hint {
  margin-left: auto;
  align-self: center;
  font-family: var(--font-label);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--warm-grey);
  opacity: 0.7;
  white-space: nowrap;
}

.source {
  display: block;
  font-size: 12px;
  color: var(--warm-grey);
  opacity: 0.8;
  letter-spacing: 0.01em;
}

.block__label {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 18px;
}

.block { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; }
.block__note { margin-top: 14px; font-size: 16px; color: var(--warm-grey); }
.block__note strong { color: var(--brown); }
.block__note--band {
  margin-top: 18px;
  padding: 10px 16px;
  border-radius: var(--radius);
  background: var(--cream-deep);
  border-left: 3px solid var(--gold);
  color: var(--brown);
  font-weight: 500;
}

/* ---------------------------------------------------------
   SLIDE 2 · Trois visages
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   Trois cartes, une qui s'ouvre
   Au clic — pas au survol : en projection le pointeur n'est pas forcément
   sur l'écran, et un déclenchement au passage ouvrirait des cartes au
   hasard pendant qu'on parle. La carte ouverte prend la largeur, son
   portrait passe à gauche, son texte à droite, et trois repères de suivi
   apparaissent. Les deux autres se réduisent et se rangent en bas.

   L'état vit dans la classe .is-open, posée par slide-02-personas.js ;
   toute la mise en scène reste en CSS. La grille interpole ses colonnes,
   donc l'ouverture est continue et non un saut.
   --------------------------------------------------------- */

.personas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Hauteur de rangée fixe : la composition ne bouge pas verticalement
     quand une carte s'ouvre, seule la largeur des colonnes change. Et le
     visuel de la carte ouverte y gagne un cadrage presque carré plutôt
     qu'une bande panoramique. */
  grid-auto-rows: 452px;
  gap: 28px;
  align-items: stretch;
  transition: grid-template-columns 560ms var(--ease-out);
}

.personas:has(.persona:nth-child(1).is-open) { grid-template-columns: 2.4fr 0.3fr 0.3fr; }
.personas:has(.persona:nth-child(2).is-open) { grid-template-columns: 0.3fr 2.4fr 0.3fr; }
.personas:has(.persona:nth-child(3).is-open) { grid-template-columns: 0.3fr 0.3fr 2.4fr; }

.persona {
  padding: 24px;
  max-height: 520px;   /* borne haute animable : sans elle, le repli vers 210 px sauterait */
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0 26px;
  overflow: hidden;
  transition:
    max-height 560ms var(--ease-out),
    padding 560ms var(--ease-out),
    border-color var(--dur-mid) var(--ease-out),
    box-shadow var(--dur-mid) var(--ease-out);
}
.persona { cursor: pointer; }
.persona:hover:not(.is-open) {
  border-color: var(--gold-a40);
  box-shadow: var(--shadow-sm);
}
.persona.is-open {
  cursor: default;
  border-color: var(--gold);
  box-shadow: var(--shadow-md);
}

/* La base du portrait passe de toute la largeur à un peu moins de la
   moitié : le corps de texte, qui bascule alors sur la même ligne,
   remonte à côté de lui. */
/* --- Le visuel du persona ---
   Photo pour Abdou, vidéo muette en boucle pour les deux autres. Le média
   remplit son cadre par recouvrement : il est déjà cadré en 3:4 à
   l'encodage, le object-fit n'est qu'un garde-fou. */
.persona__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--cream-deep);
}
/* Le média est sorti du flux : sinon sa hauteur intrinsèque — 616 px pour
   un 3:4 sur 44 % de largeur — pilotait celle de la carte, dépassait le
   plafond de 520 et faisait sortir « Son mur » du cadre. En absolu, c'est
   le cadre qui commande et le média s'y adapte. */
.persona__media > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Voile doré très léger : les trois visuels viennent de sources
   différentes, il les rassemble sous la même lumière. */
.persona__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(184, 134, 43, 0.06), rgba(59, 37, 16, 0.14));
  pointer-events: none;
}

.persona__figure {
  flex: 0 0 100%;
  height: 188px;
  max-height: 188px;
  margin-bottom: 14px;
  transition:
    flex-basis 560ms var(--ease-out),
    max-height 560ms var(--ease-out);
}
/* Carte ouverte : c'est le texte qui fixe la hauteur, le visuel s'y aligne.
   Laisser le visuel imposer la sienne le faisait dépasser la carte — le
   3:4 sur 44 % de largeur donne 616 px, au-delà du plafond de 520 — et la
   ligne « Son mur » sortait du cadre. */
.persona.is-open { align-content: stretch; }
.persona.is-open .persona__body { align-self: stretch; }
.persona.is-open .persona__figure {
  flex-basis: 44%;
  height: auto;
  max-height: none;
  align-self: stretch;
  margin-bottom: 0;
}

.persona__body {
  flex: 1 1 100%;
  /* Largeur plancher : en se repliant, la carte descend sous cette valeur
     et le corps déborde — il est alors rogné par l'overflow au lieu de
     rewrapper. Sans ce plancher, le texte se recomposait en colonne étroite
     pendant l'animation, la carte devenait deux fois plus haute que la
     rangée, et toute la grille débordait du slide. C'était le bug. */
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  /* Le corps s'efface vite : on ne doit pas le voir se faire rogner. */
  transition: flex-basis 560ms var(--ease-out), opacity 170ms var(--ease-out);
}
.persona.is-open .persona__body { flex-basis: 0; }

/* Les deux cartes non visées se replient vers le bas. */
.personas:has(.persona.is-open) .persona:not(.is-open) {
  align-self: end;
  max-height: 210px;
  padding: 16px;
}
.personas:has(.persona.is-open) .persona:not(.is-open) .persona__body {
  opacity: 0;
  pointer-events: none;
}
.personas:has(.persona.is-open) .persona:not(.is-open) .persona__figure {
  height: 158px;
  max-height: 158px;
}
/* Dans une carte repliée, la légende de l'emplacement déborde : on n'en
   garde que l'intitulé, réduit. */
.personas:has(.persona.is-open) .persona:not(.is-open) .ph__file {
  display: none;
}
.personas:has(.persona.is-open) .persona:not(.is-open) .ph__label {
  font-size: 8px;
  letter-spacing: 0.08em;
}

/* La citation absorbe l'espace restant : les trois cartes ont la même
   hauteur et leur pied s'aligne, sans qu'un vide ne se creuse au bas des
   deux premières. Le contenu supplémentaire de la troisième mange
   simplement cette réserve. */
.persona__quote { flex: 1 1 auto; }

/* Une fois la carte ouverte, la citation cesse de s'étirer — c'est le pied
   qui se cale en bas. Sinon un vide de trois cents pixels s'ouvrait entre
   la citation et les repères. */
.persona.is-open .persona__quote {
  flex: 0 0 auto;
  font-size: 19px;
  line-height: 1.5;
}
.persona.is-open .persona__wall { margin-top: auto; }

/* --- Les repères de suivi, révélés à l'ouverture --- */
.persona__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 480ms var(--ease-out),
    opacity 280ms var(--ease-out),
    margin 480ms var(--ease-out);
}
.persona.is-open .persona__chips {
  max-height: 120px;
  opacity: 1;
  margin: 4px 0;
}

.chip {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--cream-deep);
  border: var(--hairline) solid var(--gold-a24);
  white-space: nowrap;
}
.chip span {
  font-family: var(--font-label);
  font-size: 8.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.chip b { font-size: 15px; font-weight: 700; color: var(--brown); }
.chip i { font-size: 12px; font-style: normal; color: var(--warm-grey); margin-left: -4px; }

/* Même convention que les emplacements de visuels : ce qui reste à
   renseigner se signale au lieu d'inventer une valeur. */
.chip b.is-todo {
  font-size: 12px;
  font-weight: 500;
  font-style: italic;
  color: var(--warm-grey);
}

.persona__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 25px;
  color: var(--brown);
  line-height: 1.1;
}
.persona__name sup { font-size: 0.55em; }

.persona__role {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.persona__quote { font-size: 16px; line-height: 1.5; color: var(--ink); }
.persona__quote strong { font-weight: 600; }

/* Le chiffre et sa légende sur une seule ligne : en bloc empilé, il
   ajoutait 160 px à la troisième carte et creusait les deux autres. */
.persona__stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--gold-a08);
  border-left: 3px solid var(--gold);
}
.persona__stat-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 52px;
  line-height: 0.9;
  color: var(--gold-strong);
}
.persona__stat-unit {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  color: var(--gold-strong);
  margin-left: -6px;
}
.persona__stat-legend {
  flex: 1 1 auto;
  font-size: 13px;
  line-height: 1.3;
  color: var(--warm-grey);
}
.persona__stat-legend .source { display: inline; font-size: 11px; }
.persona__stat-legend .source::before { content: ' · '; }

/* Le mur de chacun, nommé — c'est ce qui fait « un même mur ».
   Il ferme les trois cartes sur la même ligne. */
.persona__wall {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding-top: 13px;
  border-top: var(--hairline) solid var(--gold-a24);
  font-size: 15px;
  font-weight: 600;
  color: var(--brown);
}
.persona__wall span {
  font-family: var(--font-label);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--gold-deep);
}

.persona--stat { border-color: var(--gold-a40); }

.state-band {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 28px;
  border-radius: var(--radius);
  background: var(--brown);
  color: var(--cream);
  font-size: 21px;
}
.state-band strong { color: var(--gold-light); font-weight: 600; }
.state-band__icon { width: 26px; height: 26px; flex: none; color: var(--gold-light); }

/* ---------------------------------------------------------
   SLIDE 4 · De FEMS à WURUS
   --------------------------------------------------------- */

.slide-fems .slide-body { z-index: 3; }

.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
  padding-top: 24px;
}

.timeline__step { position: relative; display: flex; flex-direction: column; gap: 10px; }

/* Le fil doré relie chaque étape à la suivante — un segment par intervalle,
   pas un trait unique : il s'arrête donc net sur la dernière icône au lieu
   de filer dans le vide.
   Géométrie : l'icône fait 108 px et commence en haut de l'étape, son centre
   est donc à 54 px — le fil s'aligne là, moins la moitié de son épaisseur.
   Il court du bord droit de l'icône (108 px) au bord gauche de la suivante,
   qui commence une gouttière plus loin (56 px au-delà de l'étape).
   GSAP anime --line-scale sur .timeline ; les segments en héritent. */
.timeline__step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 53px;
  left: 108px;
  right: -56px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-a40), var(--gold));
  transform: scaleX(var(--line-scale, 1));
  transform-origin: left center;
}
/* Le rond montre un fragment de l'illustration : l'aperçu annonce le volet,
   au lieu d'un pictogramme sans rapport avec lui. */
.timeline__icon {
  width: 108px;
  height: 108px;
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--cream-deep);
  border: 2px solid var(--gold-a24);
}
.timeline__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.88);
  transition: filter var(--dur-mid) var(--ease-out), scale var(--dur-slow) var(--ease-out);
}
.timeline__marker:is(:hover, :focus-within) .timeline__icon img {
  filter: saturate(1.05);
  scale: 1.07;
}
.timeline__marker { margin-bottom: 14px; }

.timeline__date {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.timeline__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 27px;
  color: var(--brown);
}
.timeline__detail { font-size: 17px; color: var(--warm-grey); line-height: 1.45; }

.timeline__step--now .timeline__marker .timeline__icon {
  border-color: var(--gold);
}
.timeline__step--now .timeline__title { color: var(--gold-deep); }

/* --- Le volet, ouvert au survol du rond seul ---
   Le déclencheur est le marqueur — le rond plus le volet lui-même — et non
   l'étape entière : survoler le texte n'ouvre rien, et le pointeur peut
   descendre dans le volet sans le refermer.
   Utile en Q&R quand un juré demande ce qu'était FEMS. */
.timeline__marker {
  position: relative;
  display: block;
  width: 108px;
  z-index: 1;
}
.timeline__marker:is(:hover, :focus-within) { z-index: 40; }

.timeline__pop {
  position: absolute;
  z-index: 40;
  top: calc(100% + 12px);
  left: 0;
  width: 322px;
  padding: 14px;
  border-radius: var(--radius-lg);
  background: var(--cream-hi);
  border: var(--hairline) solid var(--gold-a40);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  translate: 0 10px;
  transition:
    opacity var(--dur-mid) var(--ease-out),
    translate var(--dur-mid) var(--ease-out),
    visibility var(--dur-mid);
}
.timeline__marker:is(:hover, :focus-within) .timeline__pop {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}

/* Le dernier volet s'ouvre vers la gauche pour ne pas sortir du cadre. */
.timeline__step:last-child .timeline__pop { left: auto; right: 0; }

/* L'illustration du volet : elle est déjà cadrée en 16:9 à l'encodage,
   le ratio et le object-fit ne sont qu'un garde-fou. */
.timeline__pop-img {
  margin: 0 0 10px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--cream-deep);
}
.timeline__pop-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.timeline__pop-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--brown);
}
.timeline__pop-text {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--warm-grey);
}

/* Le rond visé se marque. */
.timeline__marker:is(:hover, :focus-within) .timeline__icon { border-color: var(--gold); }
.timeline__icon { transition: border-color var(--dur-mid) var(--ease-out); }

.pull-quote {
  font-family: var(--font-intent);
  font-size: 27px;
  line-height: 1.35;
  color: var(--brown);
  padding-left: 26px;
  border-left: 3px solid var(--gold);
}
.pull-quote strong { font-family: var(--font-body); font-weight: 700; }

/* ---------------------------------------------------------
   SLIDE 5 · Modèle & marché
   --------------------------------------------------------- */

/* Le bloc des modules a besoin de plus de largeur que les deux autres :
   quatre colonnes de ronds lisibles ne tiennent pas dans un tiers. */
.block--modules { flex: 1.35 1 0; }

/* --- Les 28 modules en colonnes défilantes ---
   Le mouvement dit l'étendue du catalogue sans qu'on ait à tout lire.
   Sens alternés et durées différentes : quatre colonnes qui glissent au
   même rythme se lisent comme un seul bloc qui tombe. */
.modules {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  min-height: 0;
  overflow: hidden;
  /* Les ronds naissent et disparaissent dans le fond : sans ce fondu, le
     défilement se coupe net en haut et en bas du bloc. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
}

.modules__col { overflow: hidden; }

/* Une colonne sur deux est décalée d'un demi-rond : la grille respire au
   lieu de former quatre rangées parfaitement alignées. */
.modules__col:nth-child(even) .modules__track { padding-top: 56px; }

.modules__track {
  display: flex;
  flex-direction: column;
  gap: 12px;
  will-change: transform;
}

.modules__chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  aspect-ratio: 1 / 1;
  padding: 6px;
  border-radius: 50%;
  background: var(--gold-a08);
  border: var(--hairline) solid var(--gold-a24);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.005em;
  text-align: center;
  color: var(--brown);
  hyphens: none;
}
.modules__icon {
  width: 32px;
  height: 32px;
  flex: none;
  color: var(--gold-deep);
}

.plans { display: flex; flex-direction: column; gap: 10px; }

/* Au survol, le plan déplie ce qu'il contient réellement — contenus repris
   de la planche tarifaire 2026. Les trois autres restent en place : c'est
   une comparaison, on ne doit pas perdre les repères. */
.plan {
  display: flex;
  flex-direction: column;
  padding: 15px 20px;
  border-radius: var(--radius);
  background: var(--cream-hi);
  border: var(--hairline) solid var(--gold-a24);
  /* `translate` et non `transform` : cf. .card--hover dans components.css */
  transition:
    translate var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-mid) var(--ease-out);
}
.plan:is(:hover, :focus-within) {
  translate: 0 -2px;
  border-color: var(--gold);
  box-shadow: var(--shadow-sm);
}

.plan__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.plan__name { font-weight: 600; font-size: 18px; color: var(--brown); }
.plan__price { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--brown); }
.plan__unit {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  color: var(--warm-grey);
  margin-left: 3px;
}

.plan--featured {
  background: var(--gold-a08);
  border-color: var(--gold);
  border-width: 2px;
}
.plan--featured .plan__price { color: var(--gold-deep); }
.plan__badge {
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-top: 4px;
}

/* --- Le détail, replié par défaut --- */
.plan__detail {
  display: grid;
  grid-template-rows: 0fr;          /* 0fr → 1fr : la hauteur s'anime */
  opacity: 0;
  transition:
    grid-template-rows 420ms var(--ease-out),
    opacity 260ms var(--ease-out),
    margin-top 420ms var(--ease-out);
}
.plan:is(:hover, :focus-within) .plan__detail {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 12px;
}

/* L'interpolation 0fr → 1fr ne porte que sur la première rangée : les trois
   blocs du détail vivent donc dans un enfant unique, qui seul se replie. */
.plan__detail-inner {
  min-height: 0;
  overflow: hidden;
}

.plan__seats {
  font-family: var(--font-label);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.plan__desc {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--warm-grey);
}
.plan__feats {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
}
.plan__feats b {
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--cream-deep);
  border: var(--hairline) solid var(--gold-a24);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--brown);
}
.plan--featured .plan__feats b { background: var(--cream-hi); }

.plans__note {
  margin-top: 12px;
  font-family: var(--font-label);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warm-grey);
  opacity: 0.75;
}

.block--market { flex: 1.2 1 0; }
.market { display: flex; flex-direction: column; gap: 20px; }

/* ---------------------------------------------------------
   Jauges de proportion
   Une part d'un tout se lit en jauge, pas en camembert à deux parts.
   Piste et remplissage dans la même rampe (or) ; l'extrémité de
   donnée est arrondie, l'origine reste ancrée à plat.
   Le fond crème impose l'or lisible (#A87621, 3,4:1) : l'or de marque
   pur n'y atteint que 2,7:1.
   --------------------------------------------------------- */

.meter { display: flex; flex-direction: column; gap: 9px; }

.meter__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 8px;
}

.meter__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 52px;
  line-height: 1;
  color: var(--gold-strong);
}
.meter__num--sm { font-size: 40px; }

.meter__unit {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  color: var(--gold-strong);
}

.meter__label {
  flex: 1 1 100%;
  font-size: 15px;
  line-height: 1.35;
  color: var(--warm-grey);
}

.meter__track {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: var(--gold-a14);
  overflow: hidden;
}
.meter__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 0 999px 999px 0;   /* l'extrémité de donnée seule est arrondie */
  background: var(--gold-strong);
}

.meter--gap { margin-top: 24px; }
.meter--gap .meter__fill { background: var(--terracotta); }
.meter__gap-note {
  font-size: 14px;
  font-weight: 600;
  color: var(--terracotta-deep);
}

/* --- Le chiffre absolu, lui, n'est pas une part : c'est une figure --- */
.market__hero {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 8px;
  margin-top: 26px;
}
.market__hero-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 112px;
  line-height: 0.94;
  color: var(--gold-strong);
}
.market__hero-unit {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 54px;
  color: var(--gold-strong);
}
.market__hero-legend {
  flex-basis: 100%;
  margin-top: 4px;
  font-size: 17px;
  color: var(--brown);
}

/* ---------------------------------------------------------
   SLIDE 6 · Traction
   --------------------------------------------------------- */

.traction__title { font-weight: 600; }

.figures {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 64px;
}

.figure-cell {
  padding: 18px 0 18px 26px;
  border-left: 2px solid rgba(212, 162, 68, 0.28);
  transition: border-color var(--dur-mid) var(--ease-out), translate var(--dur-mid) var(--ease-out);
}
.figure-cell:hover { border-left-color: var(--gold-light); translate: 0 -2px; }

.figure-cell__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 82px;
  line-height: 1;
  /* Or de marque plein : le fond sombre le rend lisible (5,5:1). */
  color: var(--gold-light);
  /* Pas de tabular-nums : à cette taille les chiffres à chasse fixe
     paraissent lâches. Le compteur tolère la variation de largeur. */
}
.figure-cell__unit { font-size: 34px; font-weight: 700; }

.figure-cell__legend { margin-top: 10px; font-size: 18px; color: var(--dark-ink); }
.figure-cell__note {
  margin-top: 6px;
  font-size: 12px;
  color: var(--dark-muted);
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-out);
}
.figure-cell:hover .figure-cell__note { opacity: 0.9; }

.norms__intro {
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 12px;
}
/* --- Les normes ---
   Pastilles typographiques, pas les logos officiels : ISO, NIST et CDP sont
   des marques déposées dont l'affichage vaut revendication de certification.
   Le script dit « construite SELON les normes », ce qui est exact et se
   défend ; poser leurs marques dirait « certifiée PAR », ce qui est autre
   chose. Nommer une norme à laquelle on s'aligne est libre et honnête.
   Cf. docs/DESIGN_NOTES.md */
.norms {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.norm {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 2px 10px;
  padding: 10px 16px 10px 13px;
  border-radius: var(--radius);
  background: rgba(245, 235, 217, 0.05);
  border: var(--hairline) solid rgba(212, 162, 68, 0.26);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.norm:hover {
  border-color: color-mix(in srgb, var(--n) 60%, transparent);
  background: rgba(245, 235, 217, 0.09);
}

/* Une teinte par norme, pour qu'on distingue les cinq d'un regard.
   Palette validée sur le fond sombre du slide : bande de clarté, plancher
   de chroma, séparation en deutéranopie et protanopie, contraste — les
   cinq contrôles passent. Le premier jet mêlait un vert et un corail
   indiscernables l'un de l'autre en deutéranopie.
   Le nom de la norme reste écrit à côté : la couleur ne porte jamais
   l'information seule. */
.norm--iso   { --n: #D45A32; }   /* terre cuite, proche de l'accent du deck */
.norm--anssi { --n: #9A5CDE; }   /* violet */
.norm--nist  { --n: #0E93A6; }   /* cyan */
.norm--cdp   { --n: #4E9E1A; }   /* vert — l'environnemental */
.norm--rgpd  { --n: #2E76CC; }   /* bleu — l'Union européenne */

.norm__icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--n) 20%, transparent);
  color: var(--n);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.norm:hover .norm__icon { background: color-mix(in srgb, var(--n) 32%, transparent); }
.norm__icon svg { width: 17px; height: 17px; }

.norm__text { display: flex; align-items: baseline; gap: 7px; }
.norm__text b {
  font-family: var(--font-label);
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--dark-ink);
}
.norm__text i {
  font-style: normal;
  font-size: 10px;
  color: var(--gold-light);
  letter-spacing: 0.02em;
}
.norm__scope {
  grid-column: 2;
  font-size: 10.5px;
  line-height: 1.2;
  color: var(--dark-muted);
}

/* ---------------------------------------------------------
   SLIDE 7 · L'équipe  (Acte V — suite)
   Deux fondateurs en grand, quatre membres en plus petit :
   la hiérarchie se lit avant les noms.
   --------------------------------------------------------- */

.slide-equipe .slide-body--split { gap: 56px; align-items: flex-start; }

.team-block { display: flex; flex-direction: column; }
.team-block--leads   { flex: 0 0 400px; }
.team-block--members { flex: 1 1 auto; }

.team { display: grid; gap: 24px; }
.team--lg { grid-template-columns: repeat(2, 1fr); }
.team--sm { grid-template-columns: repeat(5, 1fr); gap: 16px; align-items: start; }

.member { display: flex; flex-direction: column; gap: 4px; }

.member__photo {
  margin: 0 0 12px;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(245, 235, 217, 0.06);
}
.member__photo img { width: 100%; height: 100%; object-fit: cover; }
/* Les emplacements encore vides gardent leur habillage. */
.member__photo.ph { aspect-ratio: 3 / 4; }
.member__photo .ph__label { font-size: 8px; letter-spacing: 0.08em; }
.member__photo .ph__file  { font-size: 9px; }

/* --- Les deux têtes : photo en 3:4, liens toujours visibles ---
   Les pastilles se calent en bas de carte : un nom sur deux lignes ne doit
   pas désaligner la paire. */
.member--lead { height: 100%; }
.member--lead .member__links { margin-top: auto; padding-top: 10px; }

.member--lead .member__note {
  font-size: 12px;
  font-style: italic;
  color: var(--dark-muted);
  margin-top: 2px;
}
.member__links { display: flex; gap: 8px; }

/* --- Les cinq membres : le rond se retourne --- */
.member--flip { perspective: 700px; }

.member__flip {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  margin-bottom: 12px;
  transform-style: preserve-3d;
  transition: transform 620ms var(--ease-out);
}
.member--flip:is(:hover, :focus-within) .member__flip { transform: rotateY(180deg); }

.member__face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* La face avant porte la photo, ronde. Les emplacements encore vides
   gardent leur habillage hachuré, dans le même rond. */
.member__face--front > * {
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
}
.member__face--front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.member__face--front .ph {
  min-height: 0;
  padding: 10px;
  gap: 5px;
  aspect-ratio: auto;
}
.member__face--front .ph__icon { width: 22px; height: 22px; }
.member__face--front .ph__file { display: none; }

/* Un liseré doré cercle la photo, et se marque au retournement. */
.member--flip .member__face--front {
  box-shadow: inset 0 0 0 2px var(--gold-a24);
  transition: box-shadow var(--dur-mid) var(--ease-out);
}
.member--flip:is(:hover, :focus-within) .member__face--front {
  box-shadow: inset 0 0 0 2px var(--gold);
}

/* Une carte sans lien ne se retourne pas : rien à révéler. */
.member--todo .member__flip { transform: none !important; }
.member--todo { cursor: default; }

.member__face--back {
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--gold);
  border: var(--hairline) solid var(--gold-light);
}

/* --- Les pastilles sociales --- */
.social {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(36, 22, 5, 0.16);
  color: var(--brown-deep);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.social:hover { background: rgba(36, 22, 5, 0.3); }
.social__icon { width: 17px; height: 17px; }

/* Sur les têtes, les pastilles vivent sur fond sombre. */
.member--lead .social {
  width: 30px;
  height: 30px;
  background: rgba(212, 162, 68, 0.16);
  color: var(--gold-light);
}
.member--lead .social:hover { background: rgba(212, 162, 68, 0.3); }
.member--lead .social__icon { width: 15px; height: 15px; }

/* Même convention que partout : ce qui n'est pas encore fourni se signale
   plutôt que de pointer vers un lien mort. */
a.social { text-decoration: none; }
a.social:hover { color: var(--brown-deep); background: var(--gold-light); }
.member--lead a.social:hover { background: var(--gold); color: var(--brown-deep); }

/* Ce qui n'est pas encore fourni se signale plutôt que de pointer vers un
   lien mort. */
.social--todo { opacity: 0.42; cursor: help; }

.member__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.15;
  color: var(--dark-ink);
}
.team--sm .member__name { font-size: 15px; line-height: 1.2; }

.member__role {
  font-family: var(--font-label);
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-light);
}

/* Ce qui reste à renseigner se signale, comme les emplacements de visuels. */
.member__name--todo,
.member__role--todo {
  color: var(--dark-muted);
  font-style: italic;
}

.team__footnote {
  font-family: var(--font-intent);
  font-size: 22px;
  line-height: 1.4;
  color: var(--dark-muted);
  padding-left: 24px;
  border-left: 3px solid var(--gold);
}
.team__footnote strong { font-family: var(--font-body); font-weight: 600; }

/* ---------------------------------------------------------
   SLIDE 8 · Trois piliers d'impact
   --------------------------------------------------------- */

/* Trois colonnes, un accent chacune. La couleur ne décore pas : elle
   distingue les trois natures d'impact que le jury doit pouvoir citer
   séparément. Le vert n'apparaît que là, sur le pilier environnemental.
   Au survol, la colonne se détache et son filet s'épaissit. */

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  align-items: stretch;
}

.pillar {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 30px 24px 22px;
  border-radius: var(--radius-lg);
  background: var(--cream-hi);
  border: var(--hairline) solid var(--gold-a24);
  overflow: hidden;
  transition:
    translate var(--dur-mid) var(--ease-out),
    box-shadow var(--dur-mid) var(--ease-out),
    background-color var(--dur-mid) var(--ease-out);
}
.pillar:hover { translate: 0 -5px; box-shadow: var(--shadow-md); }

/* Le bandeau d'accent, en haut de la colonne : la frise de marque, dans
   la couleur du pilier. Même géométrie pour les trois — le motif fait le
   lien, la couleur fait la distinction. Un filet, pas une barre : il
   signe la colonne sans concurrencer le titre. */
.pillar__rule {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 12px;
  background-image: var(--accent-frieze);
  background-repeat: repeat-x;
  background-size: auto 100%;
  transition: height var(--dur-mid) var(--ease-out);
}
.pillar:hover .pillar__rule { height: 17px; }

.pillar--social {
  --accent: var(--gold);
  --accent-soft: var(--gold-a08);
  --accent-text: var(--gold-deep);
  --accent-frieze: url('../../assets/patterns/frieze-gold.svg');
}
.pillar--economique {
  --accent: var(--brown);
  --accent-soft: var(--brown-a08);
  --accent-text: var(--brown);
  --accent-frieze: url('../../assets/patterns/frieze-brown.svg');
}
.pillar--environnement {
  --accent: var(--leaf);
  --accent-soft: var(--leaf-soft);
  --accent-text: var(--leaf);
  --accent-frieze: url('../../assets/patterns/frieze-leaf.svg');
}

.pillar:hover { background: color-mix(in srgb, var(--accent-soft) 100%, var(--cream-hi)); }

.pillar__num {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--accent-text);
  opacity: 0.8;
}

.pillar__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent-text);
  transition: rotate var(--dur-slow) var(--ease-out);
}
.pillar:hover .pillar__icon { rotate: -6deg; }
.pillar__icon svg { width: 28px; height: 28px; }

.pillar__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  color: var(--brown);
}

.pillar__items { display: flex; flex-direction: column; gap: 11px; flex: 1 1 auto; }
.pillar__items li {
  position: relative;
  padding-left: 20px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink);
}
.pillar__items li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px; height: 7px;
  background: var(--accent);
  transform: rotate(45deg);
}
.pillar__items .is-key { font-weight: 600; color: var(--brown); }

/* La preuve ferme la colonne : un fait vérifiable sous chaque promesse. */
.pillar__proof {
  margin-top: 4px;
  padding-top: 14px;
  border-top: var(--hairline) solid var(--gold-a24);
  font-family: var(--font-intent);
  font-size: 15px;
  line-height: 1.35;
  color: var(--warm-grey);
}

.badge-cert {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--cream-hi);
  font-family: var(--font-label);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  vertical-align: middle;
}
/* ---------------------------------------------------------
   SLIDE 11 · Merci & contacts  (après le pitch)
   Cet écran vit pendant les cinq minutes de questions : tout ce qu'il
   porte doit rester lisible et actionnable à froid, sans commentaire.
   Les liens sont de vrais liens — le deck se consulte aussi seul,
   longtemps après le passage.
   --------------------------------------------------------- */

.slide-contact { justify-content: center; }

.contact {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 96px;
  align-items: center;
}

.contact__main { display: flex; flex-direction: column; align-items: flex-start; }

.contact__logo { width: 296px; margin-bottom: 40px; }
.contact__logo .logo { color: var(--gold-light); }

.contact__thanks {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 92px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--dark-ink);
}

.contact__line {
  margin-top: 16px;
  font-family: var(--font-intent);
  font-size: 30px;
  line-height: 1.35;
  color: var(--gold-light);
}
/* La question passe devant, en retrait de ton : elle ouvre la Q&R,
   l'invitation la referme. */
.contact__ask {
  display: block;
  color: var(--dark-ink);
}

.contact__cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
  width: 100%;
  margin-top: 46px;
  padding-top: 28px;
  border-top: var(--hairline) solid rgba(212, 162, 68, 0.28);
}

.contact__label {
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 14px;
}

.contact__group ul { display: flex; flex-direction: column; gap: 9px; }
.contact__group li { font-size: 17px; color: var(--dark-ink); }

.contact__group a {
  color: var(--dark-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 162, 68, 0.42);
  padding-bottom: 2px;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.contact__group a:hover {
  color: var(--gold-light);
  border-bottom-color: var(--gold-light);
}

/* La signature : WURUS ouvre l'écran, FUTURIZE le referme. */
.contact__by {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 48px;
}
.contact__by span {
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--dark-muted);
}
.contact__by img { width: 168px; height: auto; }

/* --- Le code QR ---
   Le fichier de marque est employé tel quel, sans recoloration. Il est
   doré et transparent : la carte lui donne le fond clair dont un lecteur
   a besoin, en Floral White plutôt qu'en crème pour gagner le peu de
   contraste disponible. Et il est rendu grand — à modules larges, un
   lecteur décode malgré un contraste modeste. */
.contact__qr {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Cadre sombre : l'or du code y atteint 7:1, contre 2,7:1 sur crème.
   Le code devient clair sur fond foncé — un QR inversé, que les appareils
   photo d'iOS et d'Android décodent nativement. */
.contact__qr-card {
  display: block;
  padding: 18px;
  border-radius: var(--radius-lg);
  background: #150C02;
  border: var(--hairline) solid var(--gold-a40);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.contact__qr-card img { display: block; width: 356px; height: 356px; }

/* --- L'invite et sa flèche --- */
.contact__qr-hint {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-top: 14px;
  align-self: flex-start;
  padding-left: 26px;
  font-family: var(--font-label);
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.contact__qr-arrow {
  width: 52px;
  height: 58px;
  flex: none;
  color: var(--gold);
}
.contact__qr-hint span { padding-bottom: 6px; }

/* Le bloc respire — le code, lui, reste immobile : un QR qui bouge ne se
   scanne pas. */
.contact__qr-hint { animation: wurus-hint 2.6s var(--ease-in-out) infinite; }

@keyframes wurus-hint {
  0%, 100% { translate: 0 0;    opacity: 0.82; }
  50%      { translate: 4px -8px; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .contact__qr-hint { animation: none; opacity: 1; }
}

/* ---------------------------------------------------------
   SLIDE 9 · Ambition territoriale
   --------------------------------------------------------- */

/* --- La carte et ses ondes ---
   La carte vient du design system, redéclinée en or. Les cercles sont un
   calque SVG au même viewBox : leurs coordonnées sont celles du tracé, donc
   le point de départ tombe exactement sur le Sénégal, quelle que soit la
   taille d'affichage. */
.ambition__map {
  position: relative;
  flex: 0 0 560px;
  margin: 0;
  aspect-ratio: 721 / 697;
}

.ambition__map-img {
  width: 100%;
  height: 100%;
  opacity: 0.55;
}

.ambition__rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Les ondes sont bornées au cadre de la carte : à déborder, la plus
     large traversait le titre et se lisait comme un accident. */
  overflow: hidden;
  pointer-events: none;
}

.ring {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
  opacity: 0.32;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity var(--dur-mid) var(--ease-out), stroke-width var(--dur-mid) var(--ease-out);
}
.ring[data-ring="1"] { fill: var(--gold-a08); }

/* Le point de départ, et son halo qui bat. En vert : la carte et ses
   ondes sont en or, le point doit s'en détacher — c'est le seul endroit
   de la slide où le regard doit se poser d'abord. */
.ambition__dot { fill: var(--leaf); }
.ambition__pulse {
  fill: var(--leaf);
  opacity: 0.28;
  transform-box: fill-box;
  transform-origin: center;
  animation: wurus-pulse 2.8s var(--ease-in-out) infinite;
}

@keyframes wurus-pulse {
  0%, 100% { transform: scale(1);   opacity: 0.3; }
  50%      { transform: scale(1.9); opacity: 0.04; }
}

/* --- La vague ---
   Après chaque battement, l'onde part de Dakar et traverse les trois
   anneaux : le premier s'allume, puis le deuxième, puis le troisième. Le
   cycle dure exactement celui du halo (2,8 s), les trois retards sont donc
   calés une fois pour toutes sur le battement — le premier tir attend le
   deuxième battement, le temps que les anneaux aient fini de se tracer.

   Ce sont des doubles, pas les anneaux : l'opacité de ceux-ci répond au
   survol des paliers, et une animation infinie la lui confisquerait. */
.ambition__waves {
  transition: opacity var(--dur-mid) var(--ease-out);
}
.wave {
  fill: none;
  stroke: var(--gold-light);
  stroke-width: 2.5;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.slide-ambition.is-active .wave {
  animation: wurus-onde 2.8s var(--ease-out) infinite;
}
.slide-ambition.is-active .wave[data-wave="1"] { animation-delay: 3.15s; }
.slide-ambition.is-active .wave[data-wave="2"] { animation-delay: 3.42s; }
.slide-ambition.is-active .wave[data-wave="3"] { animation-delay: 3.69s; }

/* La vague s'efface pendant qu'on interroge un palier : à ce moment-là,
   c'est l'anneau désigné qu'on regarde, pas le mouvement. */
.slide-ambition:has(.reach__step:is(:hover, :focus-within)) .ambition__waves {
  opacity: 0.15;
}

@keyframes wurus-onde {
  0%   { opacity: 0;    transform: scale(0.975); }
  14%  { opacity: 0.8;  transform: scale(1.006); }
  46%  { opacity: 0;    transform: scale(1.035); }
  100% { opacity: 0;    transform: scale(1.035); }
}

/* --- L'arrivée : la carte se dessine depuis Dakar ---
   Le continent est découvert par un cercle qui s'ouvre sur la presqu'île
   du Cap-Vert, puis les trois ondes se tracent l'une après l'autre — le
   trait suit l'ordre du récit : Sénégal, UEMOA, Afrique. Les cercles
   portent pathLength="1", le tracé s'anime donc en fraction, sans avoir
   à calculer trois circonférences.

   Rien de tout cela n'est un état de repos : hors `.is-active` (impression,
   mode lecture) la carte reste pleine et les ondes entières. */
.slide-ambition.is-active .ambition__map-img {
  animation: wurus-map-draw 1.5s var(--ease-out) 0.3s both;
}

.slide-ambition.is-active .ring {
  animation: wurus-ring-draw 1.1s var(--ease-out) both;
}
.slide-ambition.is-active .ring[data-ring="1"] { animation-delay: 0.55s; }
.slide-ambition.is-active .ring[data-ring="2"] { animation-delay: 0.75s; }
.slide-ambition.is-active .ring[data-ring="3"] { animation-delay: 0.95s; }

/* Le point s'allume une fois la presqu'île découverte. On anime
   `fill-opacity` et non `opacity` : celle-ci appartient déjà au battement
   du halo et aux survols de la colonne de droite. */
.slide-ambition.is-active .ambition__dot {
  animation: wurus-dot-in 0.5s var(--ease-out) 0.45s both;
}
.slide-ambition.is-active .ambition__pulse {
  animation:
    wurus-pulse 2.8s var(--ease-in-out) infinite,
    wurus-dot-in 0.5s var(--ease-out) 0.45s both;
}

@keyframes wurus-map-draw {
  0%   { opacity: 0;    clip-path: circle(2% at 10.5% 30%); }
  30%  { opacity: 0.55; }
  100% { opacity: 0.55; clip-path: circle(140% at 10.5% 30%); }
}

@keyframes wurus-ring-draw {
  from { stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; }
  to   { stroke-dasharray: 1; stroke-dashoffset: 0; fill-opacity: 1; }
}

@keyframes wurus-dot-in {
  from { fill-opacity: 0; }
  to   { fill-opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ambition__pulse { animation: none; }
  .slide-ambition.is-active :is(.ambition__map-img, .ring, .wave,
                                .ambition__dot, .ambition__pulse) {
    animation: none;
  }
}

/* Survoler un palier allume son onde — et seulement la sienne. */
.slide-ambition:has(.reach__step:is(:hover, :focus-within)) .ring { opacity: 0.12; }
.slide-ambition:has([data-reach="1"]:is(:hover, :focus-within)) .ring[data-ring="1"],
.slide-ambition:has([data-reach="2"]:is(:hover, :focus-within)) .ring[data-ring="2"],
.slide-ambition:has([data-reach="3"]:is(:hover, :focus-within)) .ring[data-ring="3"] {
  opacity: 0.85;
  stroke-width: 3;
}

.reach { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; }

.reach__step {
  display: grid;
  grid-template-columns: 136px 1fr;
  gap: 6px 22px;
  padding: 22px 0 22px 26px;
  border-left: 2px solid var(--gold-a24);
}
.reach__step--now { border-left-color: var(--gold); border-left-width: 4px; }

.reach__year {
  grid-row: span 2;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 38px;
  line-height: 1;
  color: var(--gold-strong);
}
.reach__zone {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  color: var(--brown);
}
.reach__detail { font-size: 16px; color: var(--warm-grey); }

/* ---------------------------------------------------------
   SLIDE 10 · L'appel
   --------------------------------------------------------- */

/* Fond sombre (cf. styles/dark.css) : le dernier écran que le jury regarde
   pendant le silence final. La poussière d'or n'y est plus une texture,
   elle est de l'or. */
/* La réserve basse tient compte du pied de page, qui est en absolu : sans
   elle, le groupe « phrase + ruban » se centrerait sur toute la hauteur et
   viendrait buter dessus. C'est aussi ce qui remonte la phrase. */
.slide-appel {
  align-items: center;
  justify-content: center;
  padding-bottom: 196px;
}

.appel__inner {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  text-align: center;
}

.appel__phrase {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 72px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--dark-ink);
}
/* « or » et « richesse » s'illuminent — cf. slide-09-appel.js */
.appel__phrase .is-lit { color: var(--gold-light); }

.appel__sub {
  margin-top: 28px;
  font-family: var(--font-intent);
  font-size: 30px;
  color: var(--dark-muted);
}

.appel__foot {
  position: absolute;
  z-index: 1;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 56px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}
.appel__contact {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--dark-muted);
}
.appel__dot { color: var(--gold-light); }
.appel__logo { width: 190px; }
.appel__logo .logo { color: var(--gold-light); }