/* ============================================
   Timeline — frise horizontale, défilement automatique (desktop).
   Grille Satzspiegel (nav / modular) ; ruban full-bleed + blur bords (Moving Numbers).
   ============================================ */

:root {
  --iaf-timeline-max-width: var(--iaf-layout-max-width, 1440px);
  --iaf-timeline-padding-inline: var(--iaf-layout-padding-inline, 64px);
  --iaf-timeline-head-inset: max(
    var(--iaf-timeline-padding-inline),
    calc((100vw - var(--iaf-timeline-max-width)) / 2 + var(--iaf-timeline-padding-inline))
  );
  --iaf-timeline-track-inset: var(--iaf-timeline-head-inset);
  --iaf-timeline-edge: var(--iaf-bt-edge, 120px);
  --iaf-timeline-event-width: 280px;
  --iaf-timeline-event-gap: 52px;
  /* Espace autour d'un marqueur date/carré (colonne réduite à un point sur
     l'axe : la pastille flotte entre deux évènements). Gauche = avant la date,
     droite (after) = après la date, avant l'évènement suivant. */
  --iaf-timeline-marker-gap: 40px;
  --iaf-timeline-marker-gap-after: 76px;
  --iaf-timeline-line-color: var(--iaf-canvas-border-strong, #114e6d);
  --iaf-timeline-text-color: var(--iaf-canvas-heading, #114e6d);
  --iaf-timeline-tick-length: 32px;
  --iaf-timeline-tick-primary: var(--iaf-timeline-tick-length);
  --iaf-timeline-tick-secondary: var(--iaf-timeline-tick-length);
  --iaf-timeline-events-min-h: 440px;
  --iaf-timeline-sticky-top: 80px;
  --iaf-timeline-divider-title-gap: 16px;
  --iaf-timeline-title-ribbon-gap: 36px;
  --iaf-timeline-divider-gap-before: 8px;
  --iaf-timeline-exit-gap: 48px;
  /* Vitesse du défilement auto en px/s (indépendante de la largeur de frise). */
  --iaf-timeline-auto-speed: 60px;
  --iaf-timeline-controls-gap-bottom: 56px;
  --iaf-timeline-spine-gap: 12px;
  /* Espace sous le texte above avant l’axe (~2 lignes). */
  --iaf-timeline-above-axis-gap: calc(2 * var(--gt-copy-lh, 21px));
  --iaf-timeline-event-content-gap: 6px;
  --iaf-timeline-date-padding-inline: 20px;
}

/* Pas d'overflow sur la section : ancêtre overflow:hidden casse position:sticky + runway scroll. */
.iaf-timeline {
  position: relative;
  z-index: 0;
  width: 100%;
  box-sizing: border-box;
  background-color: transparent;
  overflow: visible;
}

.iaf-timeline__scroll {
  height: calc(100vh + var(--iaf-timeline-scroll, 0px) + var(--iaf-timeline-exit-gap));
}

.iaf-timeline__scroll.iaf-timeline__scroll--static {
  height: auto;
}

/* Desktop auto-scroll : hauteur normale, pas de runway vertical ni sticky pin. */
.iaf-timeline__scroll.iaf-timeline__scroll--auto {
  height: auto;
}

.iaf-timeline__scroll--auto .iaf-timeline__sticky {
  position: relative;
  top: auto;
  height: auto;
  /* Hauteur = contenu (titre + frise). Pas de 100vh : sinon un grand écran
     ajoute du vide sous la frise. */
  min-height: 0;
  overflow: hidden;
}

.iaf-timeline__scroll--auto .iaf-timeline__ribbon {
  flex: 1 1 auto;
  min-height: 0;
}

.iaf-timeline__scroll--auto .iaf-timeline__viewport {
  flex: 1 1 auto;
  min-height: var(--iaf-timeline-events-min-h);
}

/* Défilement auto piloté par une animation CSS (thread compositeur / GPU),
   pas par une boucle rAF sur le thread principal. Prouvé en debug : un blocage
   périodique du thread principal (~100ms toutes les ~1100ms, hors thème)
   faisait sauter la boucle rAF → à-coups visibles surtout sur Safari. Une
   animation CSS de `transform` tourne sur le compositeur et reste fluide même
   quand le thread principal est bloqué.
   Distance et durée pilotées par variables mises à jour en JS (largeur / vitesse). */
@keyframes iaf-timeline-autoscroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(calc(-1 * var(--iaf-timeline-overflow, 0px)), 0, 0);
  }
}

.iaf-timeline__scroll--auto .iaf-timeline__track {
  transition: none;
  animation: iaf-timeline-autoscroll var(--iaf-timeline-auto-dur, 60s) linear forwards;
  animation-play-state: paused;
}

/* JS n'active la lecture que lorsque la frise est visible (et hors focus ruban / onglet caché). */
.iaf-timeline--playing .iaf-timeline__scroll--auto .iaf-timeline__track {
  animation-play-state: running;
}

.iaf-timeline__sticky {
  position: sticky;
  top: var(--iaf-timeline-sticky-top);
  height: calc(100vh - var(--iaf-timeline-sticky-top));
  min-height: 0;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

.iaf-timeline__scroll--static .iaf-timeline__sticky {
  position: relative;
  height: auto;
  min-height: 0;
  overflow: visible;
}

/* Titre + ruban dans le même bloc épinglé : le titre reste présent pendant le scroll horizontal. */
.iaf-timeline__inner {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.iaf-timeline__sticky-head {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--iaf-timeline-divider-title-gap);
  width: 100%;
  box-sizing: border-box;
  margin-bottom: var(--iaf-timeline-title-ribbon-gap);
}

/* Espace au-dessus du filet d’entrée (timeline porte son propre filet dans sticky-head). */
.iaf-ext-spacing--has-top-divider > .iaf-timeline .iaf-timeline__sticky-head {
  padding-top: var(--iaf-timeline-divider-gap-before);
}

.iaf-timeline__divider {
  flex: 0 0 auto;
  height: 1px;
  background-color: var(--iaf-timeline-line-color);
  width: calc(100% - (var(--iaf-timeline-padding-inline) * 2));
  max-width: calc(var(--iaf-timeline-max-width) - (var(--iaf-timeline-padding-inline) * 2));
  margin: 0 auto;
  box-sizing: border-box;
}

.iaf-timeline__scroll--static .iaf-timeline__sticky-head {
  margin-bottom: var(--iaf-timeline-title-ribbon-gap);
}

.iaf-timeline__scroll--static .iaf-timeline__ribbon {
  padding-bottom: 44px;
}

/* Titre — aligné sur le filet d’entrée section (padding-inline / head-inset), pas logo inset. */
.iaf-timeline__head {
  position: relative;
  z-index: 3;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--iaf-timeline-max-width);
  margin: 0 auto;
  padding: 0 var(--iaf-timeline-padding-inline);
  min-width: 0;
}

.iaf-timeline__title-wrap {
  width: 100%;
  max-width: min(42ch, calc(var(--iaf-timeline-max-width) - (var(--iaf-timeline-padding-inline) * 2)));
}

.iaf-timeline__title {
  margin: 0;
  color: var(--iaf-canvas-heading, #114e6d);
  text-wrap: balance;
}

/* Ruban horizontal full-bleed (défilement + blur). */
.iaf-timeline__ribbon {
  position: relative;
  z-index: 1;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  left: 0;
  right: 0;
  box-sizing: border-box;
  min-width: 0;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.iaf-timeline__viewport {
  position: relative;
  z-index: 1;
  min-height: 0;
  overflow: hidden;
  width: 100%;
  flex: 1 1 auto;
}

.iaf-timeline__edge-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  min-height: 100%;
  pointer-events: none;
}

.iaf-timeline__track {
  position: relative;
  z-index: 1;
  height: 100%;
  will-change: transform;
  transform: translate3d(var(--iaf-timeline-x, 0px), 0, 0);
}

.iaf-timeline__scroll--static .iaf-timeline__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scroll-padding-left: var(--iaf-timeline-track-inset);
  scroll-padding-right: var(--iaf-timeline-edge);
}

.iaf-timeline__scroll--static .iaf-timeline__track {
  transform: none;
  will-change: auto;
  width: max-content;
  min-height: var(--iaf-timeline-events-min-h);
}

.iaf-timeline__track-inner {
  display: block;
  width: max-content;
  min-width: 100%;
  min-height: var(--iaf-timeline-events-min-h);
  padding-left: var(--iaf-timeline-track-inset);
  padding-right: var(--iaf-timeline-edge);
  box-sizing: border-box;
}

.iaf-timeline__events {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--iaf-timeline-event-gap);
  position: relative;
  z-index: 2;
  min-height: var(--iaf-timeline-events-min-h);
}

/* Drag horizontal à la souris (mode auto desktop). Le JS gère le pan ;
   ici uniquement le curseur + anti-sélection pendant le glissement. */
.iaf-timeline__controls {
  display: none;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  width: 100%;
  max-width: var(--iaf-timeline-max-width);
  margin: 16px auto var(--iaf-timeline-controls-gap-bottom, 56px);
  padding: 0 var(--iaf-timeline-padding-inline);
  box-sizing: border-box;
}

.iaf-timeline--auto .iaf-timeline__controls {
  display: flex;
}

.iaf-timeline__ctrl {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 4px 0;
  margin: 0;
  color: var(--iaf-canvas-accent, #2398ff);
  cursor: pointer;
  line-height: 0;
  transition: color var(--iaf-interaction-hover-duration, 1200ms) var(--iaf-interaction-hover-easing, cubic-bezier(0.25, 0.8, 0.25, 1));
}

.iaf-timeline__ctrl:hover,
.iaf-timeline__ctrl:focus-visible {
  color: var(--iaf-canvas-heading, #114e6d);
  outline: none;
}

.iaf-timeline__ctrl-icon svg {
  display: block;
}

.iaf-timeline__ctrl-icon--pause svg {
  width: 14px;
  height: 14px;
}

.iaf-timeline__ctrl-icon--play svg {
  width: 14px;
  height: 14px;
}

.iaf-timeline__ctrl:not([data-iaf-timeline-pause]) .iaf-timeline__ctrl-icon svg {
  width: 22px;
  height: 11px;
}

.iaf-timeline__ctrl--pause {
  margin-inline: 4px;
}

.iaf-timeline__ctrl-icon--step svg {
  width: 16px;
  height: 12px;
}

.iaf-timeline__events::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: var(--iaf-timeline-axis-y, 50%);
  transform: translateY(-50%);
  height: 1px;
  background-color: var(--iaf-timeline-line-color);
  z-index: 1;
  pointer-events: none;
}

.iaf-timeline__event {
  flex: 0 0 var(--iaf-timeline-event-width);
  width: var(--iaf-timeline-event-width);
  display: grid;
  /* Layout asymétrique : zone haute (secondaire) + axe + zone basse (primaire).
     Évite le doublement de hauteur du symétrique 1fr/1fr. Fallback 1fr si JS off. */
  grid-template-rows: var(--iaf-timeline-top-zone, 1fr) auto var(--iaf-timeline-bottom-zone, 1fr);
  align-self: stretch;
  min-height: 100%;
  scroll-snap-align: start;
  z-index: 2;
}

/* Colonnes date / carré seuls sur l’axe : pas de trait below ni de zone contenu. */
.iaf-timeline__event--axis-marker,
.iaf-timeline__event--marker {
  z-index: 4;
}

/* Marqueur date / carré = point sur l'axe (largeur ~nulle). La pastille flotte
   au centre de l'espace entre deux évènements ; les marges négatives resserrent
   les voisins (l'ordre DOM reste strictement inchangé). Un évènement peut ainsi
   chevaucher visuellement la colonne du marqueur sans en modifier l'ordre. */
.iaf-timeline__event--marker {
  flex: 0 0 auto;
  width: 0;
  min-width: 0;
  margin-left: calc(var(--iaf-timeline-marker-gap) - var(--iaf-timeline-event-gap));
  margin-right: calc(var(--iaf-timeline-marker-gap-after) - var(--iaf-timeline-event-gap));
  overflow: visible;
}

/* Date centrée sur le point du marqueur (plus de décalage hérité du mode fusionné). */
.iaf-timeline--v2 .iaf-timeline__event--marker .iaf-timeline__date--on-axis {
  --iaf-timeline-date-shift: 0px;
}

.iaf-timeline__event--marker .iaf-timeline__event-slot--bottom,
.iaf-timeline__event--axis-marker.iaf-timeline__event--primary .iaf-timeline__event-slot--bottom {
  padding-top: 0;
}

.iaf-timeline__event--marker .iaf-timeline__tick,
.iaf-timeline__event--axis-marker .iaf-timeline__tick {
  display: none;
}

.iaf-timeline__event-slot--top,
.iaf-timeline__event-slot--bottom {
  min-width: 0;
}

.iaf-timeline__event-slot--top {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.iaf-timeline__event-slot--bottom {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.iaf-timeline__event--secondary .iaf-timeline__event-slot--top {
  padding-bottom: var(--iaf-timeline-above-axis-gap);
}

.iaf-timeline__event--primary .iaf-timeline__event-slot--bottom {
  padding-top: calc(var(--iaf-timeline-tick-length) + 10px);
}

.iaf-timeline__event--secondary.iaf-timeline__event--has-below .iaf-timeline__event-slot--bottom {
  padding-top: calc(var(--iaf-timeline-tick-length) + 10px);
}

/* Above events : trait vertical pleine hauteur le long du bloc texte. */
.iaf-timeline__event-content--above {
  position: relative;
  width: 100%;
}

.iaf-timeline__event--secondary .iaf-timeline__spine {
  position: absolute;
  left: 0;
  top: 0;
  bottom: calc(-1 * var(--iaf-timeline-above-axis-gap));
  width: 1px;
  background-color: var(--iaf-timeline-line-color);
  pointer-events: none;
}

.iaf-timeline__event--secondary .iaf-timeline__event-body {
  display: flex;
  flex-direction: column;
  gap: var(--iaf-timeline-event-content-gap);
  padding-left: calc(var(--iaf-timeline-spine-gap) + 1px);
  min-width: 0;
}

.iaf-timeline__event-axis {
  position: relative;
  height: 0;
  z-index: 2;
}

.iaf-timeline__tick {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  background-color: var(--iaf-timeline-line-color);
}

.iaf-timeline__event--primary .iaf-timeline__tick,
.iaf-timeline__event--secondary.iaf-timeline__event--has-below .iaf-timeline__tick {
  height: var(--iaf-timeline-tick-length);
}

.iaf-timeline__event--secondary .iaf-timeline__tick {
  top: 0;
}

.iaf-timeline__event-content {
  display: flex;
  flex-direction: column;
  gap: var(--iaf-timeline-event-content-gap);
  min-width: 0;
  /* Typo compacte dans la frise (la hauteur dispo est contrainte par le viewport épinglé). */
  --gt-copy-size: 15px;
  --gt-copy-lh: 21px;
  --mp-copy-size: 15px;
  --mp-copy-lh: 21px;
}

.iaf-timeline__date,
.iaf-timeline__event-title {
  margin: 0;
  color: var(--iaf-timeline-text-color);
}

.iaf-timeline__text {
  margin: 0;
  color: var(--iaf-timeline-text-color);
  text-wrap: pretty;
}

/* Timeline V2 : dates alignées sur l’axe, petit rond au bout des traits,
   et typo texte légèrement plus petite. */
.iaf-timeline--v2 .iaf-timeline__event-axis {
  /* Permet au rond + à la date (positionnés en absolu) de rester visibles
     même si la row CSS de l'axe est en base à hauteur 0. */
  overflow: visible;
}

.iaf-timeline--v2 .iaf-timeline__tick::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 8px;
  height: 8px;
  background-color: var(--iaf-timeline-line-color);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Primary (sous l’axe) : trait vers le bas → rond sur la ligne (haut du trait). */
.iaf-timeline--v2 .iaf-timeline__event--primary .iaf-timeline__tick::after {
  top: 0;
}

/* Secondary (au-dessus) : rond sur l’axe (trait remplacé par la colonne verticale). */
.iaf-timeline--v2 .iaf-timeline__event--secondary .iaf-timeline__event-axis::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 8px;
  background-color: var(--iaf-timeline-line-color);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 3;
}

.iaf-timeline--v2 .iaf-timeline__event--secondary .iaf-timeline__tick::after {
  display: none;
}

.iaf-timeline--v2 .iaf-timeline__event--secondary.iaf-timeline__event--has-below .iaf-timeline__tick::after {
  display: block;
  top: 0;
}

.iaf-timeline--v2 .iaf-timeline__event--secondary.iaf-timeline__event--has-below .iaf-timeline__event-axis::after {
  display: none;
}

.iaf-timeline--v2 .iaf-timeline__event--secondary .iaf-timeline__date--on-axis {
  z-index: 5;
}

.iaf-timeline--v2 .iaf-timeline__date--on-axis {
  position: absolute;
  /* Décalage horizontal de la date par rapport à l’axe (positif = vers la droite). */
  --iaf-timeline-date-shift: 22px;
  left: 50%;
  top: 0;
  transform: translate(calc(-50% + var(--iaf-timeline-date-shift)), -50%);
  z-index: 3;
  pointer-events: none;
  white-space: nowrap;
  /* Espace blanc pour éviter que la ligne de l’axe traverse visuellement les chiffres. */
  background-color: var(--page-bg-color, #FFFFFF);
  padding: 6px var(--iaf-timeline-date-padding-inline);
  border-radius: 999px;
  /* gt-copy-bold consomme ces variables. */
  --gt-copy-size: 13px;
  --gt-copy-lh: 19px;
}

.iaf-timeline--v2 .iaf-timeline__axis-icon {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--iaf-timeline-axis-icon-size);
  height: var(--iaf-timeline-axis-icon-size);
  transform: translate(-50%, -50%);
  z-index: 3;
  pointer-events: none;
}

.iaf-timeline--v2 .iaf-timeline__text {
  /* gt-copy / mp-copy consomment ces variables depuis `.iaf-timeline__event-content`. */
  --gt-copy-size: 13px;
  --gt-copy-lh: 19px;
  --mp-copy-size: 13px;
  --mp-copy-lh: 19px;
}

.iaf-timeline--v2 {
  --iaf-timeline-above-axis-gap: calc(2 * 19px);
}

.iaf-timeline--v2 .iaf-timeline__event-title {
  /* Override : `gt-copy-bold` est une GT America sans-serif.
     V2 : on passe en serif régulier (Martina Plantijn). */
  font-family: var(--font-martina);
  font-weight: 400;
  font-style: normal;
}

/* Texte below (sous l’axe) des évènements above : même serif que le titre. */
.iaf-timeline--v2 .iaf-timeline__event--secondary.iaf-timeline__event--has-below .iaf-timeline__event-content--below .iaf-timeline__text {
  font-family: var(--font-martina);
  font-weight: 400;
  font-style: normal;
  letter-spacing: var(--mp-copy-ls, 0.01em);
}

/* Flous latéraux — même stack 7 couches que Moving Numbers (iaf-big-titles). */
.iaf-timeline__edge {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 0;
  width: var(--iaf-timeline-edge);
  max-width: min(20vw, 120px);
  height: 100%;
  min-height: 100%;
  pointer-events: none;
}

.iaf-timeline__edge--left {
  left: 0;
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 8%, rgb(0 0 0 / 65%) 55%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 8%, rgb(0 0 0 / 65%) 55%, transparent 100%);
}

.iaf-timeline__edge--right {
  right: 0;
  -webkit-mask-image: linear-gradient(to left, #000 0%, #000 8%, rgb(0 0 0 / 65%) 55%, transparent 100%);
  mask-image: linear-gradient(to left, #000 0%, #000 8%, rgb(0 0 0 / 65%) 55%, transparent 100%);
}

.iaf-timeline__edge-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.iaf-timeline__edge--left .iaf-timeline__edge-layer:nth-child(1) {
  backdrop-filter: blur(0.5px);
  -webkit-backdrop-filter: blur(0.5px);
  mask: linear-gradient(to right, rgb(0 0 0 / 100%) 0%, rgb(0 0 0 / 0) 72%);
  -webkit-mask: linear-gradient(to right, rgb(0 0 0 / 100%) 0%, rgb(0 0 0 / 0) 72%);
}

.iaf-timeline__edge--left .iaf-timeline__edge-layer:nth-child(2) {
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  mask: linear-gradient(to right, rgb(0 0 0 / 100%) 0%, rgb(0 0 0 / 0) 80%);
  -webkit-mask: linear-gradient(to right, rgb(0 0 0 / 100%) 0%, rgb(0 0 0 / 0) 80%);
}

.iaf-timeline__edge--left .iaf-timeline__edge-layer:nth-child(3) {
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  mask: linear-gradient(to right, rgb(0 0 0 / 100%) 0%, rgb(0 0 0 / 0) 86%);
  -webkit-mask: linear-gradient(to right, rgb(0 0 0 / 100%) 0%, rgb(0 0 0 / 0) 86%);
}

.iaf-timeline__edge--left .iaf-timeline__edge-layer:nth-child(4) {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  mask: linear-gradient(to right, rgb(0 0 0 / 100%) 0%, rgb(0 0 0 / 0) 92%);
  -webkit-mask: linear-gradient(to right, rgb(0 0 0 / 100%) 0%, rgb(0 0 0 / 0) 92%);
}

.iaf-timeline__edge--left .iaf-timeline__edge-layer:nth-child(5) {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  mask: linear-gradient(to right, rgb(0 0 0 / 100%) 0%, rgb(0 0 0 / 45%) 78%, rgb(0 0 0 / 0) 100%);
  -webkit-mask: linear-gradient(to right, rgb(0 0 0 / 100%) 0%, rgb(0 0 0 / 45%) 78%, rgb(0 0 0 / 0) 100%);
}

.iaf-timeline__edge--left .iaf-timeline__edge-layer:nth-child(6) {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  mask: linear-gradient(to right, rgb(0 0 0 / 100%) 0%, rgb(0 0 0 / 55%) 68%, rgb(0 0 0 / 0) 100%);
  -webkit-mask: linear-gradient(to right, rgb(0 0 0 / 100%) 0%, rgb(0 0 0 / 55%) 68%, rgb(0 0 0 / 0) 100%);
}

.iaf-timeline__edge--left .iaf-timeline__edge-layer:nth-child(7) {
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  mask: linear-gradient(to right, rgb(0 0 0 / 100%) 0%, rgb(0 0 0 / 70%) 52%, rgb(0 0 0 / 0) 100%);
  -webkit-mask: linear-gradient(to right, rgb(0 0 0 / 100%) 0%, rgb(0 0 0 / 70%) 52%, rgb(0 0 0 / 0) 100%);
}

.iaf-timeline__edge--right .iaf-timeline__edge-layer:nth-child(1) {
  backdrop-filter: blur(0.5px);
  -webkit-backdrop-filter: blur(0.5px);
  mask: linear-gradient(to left, rgb(0 0 0 / 100%) 0%, rgb(0 0 0 / 0) 72%);
  -webkit-mask: linear-gradient(to left, rgb(0 0 0 / 100%) 0%, rgb(0 0 0 / 0) 72%);
}

.iaf-timeline__edge--right .iaf-timeline__edge-layer:nth-child(2) {
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  mask: linear-gradient(to left, rgb(0 0 0 / 100%) 0%, rgb(0 0 0 / 0) 80%);
  -webkit-mask: linear-gradient(to left, rgb(0 0 0 / 100%) 0%, rgb(0 0 0 / 0) 80%);
}

.iaf-timeline__edge--right .iaf-timeline__edge-layer:nth-child(3) {
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  mask: linear-gradient(to left, rgb(0 0 0 / 100%) 0%, rgb(0 0 0 / 0) 86%);
  -webkit-mask: linear-gradient(to left, rgb(0 0 0 / 100%) 0%, rgb(0 0 0 / 0) 86%);
}

.iaf-timeline__edge--right .iaf-timeline__edge-layer:nth-child(4) {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  mask: linear-gradient(to left, rgb(0 0 0 / 100%) 0%, rgb(0 0 0 / 0) 92%);
  -webkit-mask: linear-gradient(to left, rgb(0 0 0 / 100%) 0%, rgb(0 0 0 / 0) 92%);
}

.iaf-timeline__edge--right .iaf-timeline__edge-layer:nth-child(5) {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  mask: linear-gradient(to left, rgb(0 0 0 / 100%) 0%, rgb(0 0 0 / 45%) 78%, rgb(0 0 0 / 0) 100%);
  -webkit-mask: linear-gradient(to left, rgb(0 0 0 / 100%) 0%, rgb(0 0 0 / 45%) 78%, rgb(0 0 0 / 0) 100%);
}

.iaf-timeline__edge--right .iaf-timeline__edge-layer:nth-child(6) {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  mask: linear-gradient(to left, rgb(0 0 0 / 100%) 0%, rgb(0 0 0 / 55%) 68%, rgb(0 0 0 / 0) 100%);
  -webkit-mask: linear-gradient(to left, rgb(0 0 0 / 100%) 0%, rgb(0 0 0 / 55%) 68%, rgb(0 0 0 / 0) 100%);
}

.iaf-timeline__edge--right .iaf-timeline__edge-layer:nth-child(7) {
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  mask: linear-gradient(to left, rgb(0 0 0 / 100%) 0%, rgb(0 0 0 / 70%) 52%, rgb(0 0 0 / 0) 100%);
  -webkit-mask: linear-gradient(to left, rgb(0 0 0 / 100%) 0%, rgb(0 0 0 / 70%) 52%, rgb(0 0 0 / 0) 100%);
}

@media (max-width: 1023px) {
  :root {
    --iaf-timeline-padding-inline: var(--iaf-layout-padding-inline-tablet, 24px);
    --iaf-timeline-mobile-spine-offset: 20px;
    --iaf-timeline-mobile-event-gap: 48px;
    --iaf-timeline-line-color: var(--iaf-canvas-border-strong, #114e6d);
    --iaf-timeline-tick-length: 12px;
  }

  .iaf-timeline__sticky-head {
    gap: var(--iaf-ext-divider-gap, 16px);
    margin-bottom: var(--iaf-timeline-title-ribbon-gap, 64px);
  }

  :root {
    --iaf-timeline-divider-gap-before: 24px;
  }

  /* Filet interne (wrapper ::before masqué) — même rythme que les autres extensions. */
  .iaf-ext-spacing--has-top-divider > .iaf-timeline .iaf-timeline__sticky-head {
    padding-top: var(--iaf-timeline-divider-gap-before);
  }

  .iaf-timeline__title-wrap {
    max-width: none;
  }

  /* Mobile : frise verticale — pas de sticky runway, scroll horizontal ni blur bords.
     Hauteur = contenu (évite le débordement sur l’extension suivante). */
  .iaf-timeline__scroll,
  .iaf-timeline__scroll.iaf-timeline__scroll--static {
    height: auto !important;
  }

  .iaf-timeline__sticky,
  .iaf-timeline__scroll--static .iaf-timeline__sticky {
    position: relative !important;
    top: auto !important;
    display: block;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .iaf-timeline__scroll--static .iaf-timeline__sticky-head {
    margin-bottom: var(--iaf-timeline-title-ribbon-gap, 64px);
  }

  .iaf-timeline__controls {
    display: none !important;
  }

  .iaf-timeline__edge-overlay {
    display: none;
  }

  .iaf-timeline__ribbon {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    height: auto;
  }

  .iaf-timeline__viewport,
  .iaf-timeline__scroll--static .iaf-timeline__viewport {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    scroll-snap-type: none;
  }

  .iaf-timeline__track,
  .iaf-timeline__scroll--static .iaf-timeline__track {
    transform: none !important;
    animation: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    will-change: auto;
  }

  .iaf-timeline__track-inner {
    width: 100%;
    min-width: 0;
    min-height: 0 !important;
    height: auto !important;
    padding-left: var(--iaf-timeline-padding-inline);
    padding-right: var(--iaf-timeline-padding-inline);
  }

  .iaf-timeline__events {
    flex-direction: column;
    align-items: stretch;
    gap: var(--iaf-timeline-mobile-event-gap);
    padding-left: var(--iaf-timeline-mobile-spine-offset);
    padding-bottom: var(--iaf-ext-divider-gap-before, 32px);
    min-height: 0;
  }

  /* Axe vertical — s’arrête au dernier repère, pas au-delà du contenu */
  .iaf-timeline__events::before {
    top: 0;
    bottom: var(--iaf-timeline-mobile-event-gap);
    left: 0;
    right: auto;
    width: 1px;
    height: auto;
    transform: none;
  }

  .iaf-timeline__event {
    flex: none;
    width: 100%;
    position: relative;
    scroll-snap-align: none;
    display: block;
    min-height: 0;
    padding-left: 0;
  }

  .iaf-timeline__event-slot--top,
  .iaf-timeline__event-slot--bottom {
    padding: 0 !important;
  }

  .iaf-timeline__event--secondary .iaf-timeline__event-slot--top {
    display: block;
  }

  .iaf-timeline__event--secondary .iaf-timeline__event-slot--bottom {
    display: none;
  }

  .iaf-timeline__event--secondary.iaf-timeline__event--has-below .iaf-timeline__event-slot--bottom {
    display: block;
  }

  .iaf-timeline__event--secondary .iaf-timeline__spine {
    display: none;
  }

  .iaf-timeline__event--secondary .iaf-timeline__event-body {
    padding-left: 0;
  }

  .iaf-timeline__event--primary .iaf-timeline__event-slot--top {
    display: none;
  }

  .iaf-timeline__event--primary .iaf-timeline__event-slot--bottom {
    display: block;
  }

  .iaf-timeline__event-content {
    min-height: 0;
    padding-bottom: 0;
  }

  .iaf-timeline__event-axis {
    position: absolute;
    left: calc(-1 * var(--iaf-timeline-mobile-spine-offset));
    top: 0.55em;
    width: 0;
    height: 0;
    z-index: 2;
  }

  /* V2 (dates sur l’axe + rond de terminaison) : éviter les chevauchements
     en mode frise verticale. */
  .iaf-timeline--v2 .iaf-timeline__date--on-axis {
    display: none;
  }
  .iaf-timeline--v2 .iaf-timeline__axis-icon {
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
  }
  .iaf-timeline--v2 .iaf-timeline__tick::after {
    display: none;
  }

  .iaf-timeline__tick {
    left: 0;
    top: 0;
    width: var(--iaf-timeline-tick-length);
    height: 1px;
  }

  .iaf-timeline__event--primary .iaf-timeline__tick,
  .iaf-timeline__event--secondary .iaf-timeline__tick {
    width: var(--iaf-timeline-tick-length);
    height: 1px;
    top: 0;
  }
}

@media (max-width: 768px) {
  :root {
    --iaf-timeline-padding-inline: var(--iaf-layout-padding-inline-phone, 20px);
    --iaf-timeline-mobile-event-gap: 44px;
    --iaf-timeline-title-ribbon-gap: 36px;
  }

  .iaf-timeline__sticky-head {
    margin-bottom: var(--iaf-timeline-title-ribbon-gap, 64px);
  }

  .iaf-timeline__title-wrap {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .iaf-timeline__track {
    transform: none !important;
    animation: none !important;
    will-change: auto !important;
  }

  .iaf-timeline__scroll {
    height: auto !important;
  }

  .iaf-timeline__sticky {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .iaf-timeline__viewport {
    overflow-x: auto;
  }
}