/* IAF Big Titles — chiffres GT America, ruban full-bleed, filets & blur sur toute la section. */

:root {
  /* Cadre de page pour le seul bloc titre (pas le ruban). */
  --iaf-bt-content-max: 1440px;
  --iaf-bt-padding-block: 120px;
  --iaf-bt-padding-inline: 64px;
  --iaf-bt-title-gap: 48px;
  --iaf-bt-item-pad: 0 40px;
  /* Chiffres : GT America (thème) — 350px max, responsive en clamp. */
  --iaf-bt-figure-raw: clamp(120px, 18vw, 350px);
  --iaf-bt-figure: var(--iaf-bt-figure-raw);
  /* Même hauteur de zone chiffre pour toutes les colonnes (bas de chiffres alignés). */
  --iaf-bt-figure-slot-h: calc(0.92 * var(--iaf-bt-figure-raw));
  --iaf-bt-figure-ff: var(--font-gt-america, "GT America", sans-serif);
  --iaf-bt-figure-weight: 300;
  --iaf-bt-label-gap: 12px;
  /* Décalage subtexte vers la droite (par rapport à l’axe du chiffre). */
  --iaf-bt-label-nudge: 20px;
  --iaf-bt-edge: 100px;
  --iaf-bt-min-h: 200px;
}

.iaf-big-titles {
  position: relative;
  z-index: 0;
  width: 100%;
  box-sizing: border-box;
  padding: var(--iaf-bt-padding-block) 0;
  background-color: transparent;
  overflow: hidden;
}

.iaf-big-titles__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

/* Flous : toute la hauteur de la section, au-dessus du contenu. */
.iaf-big-titles__edge-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  min-height: 100%;
  pointer-events: none;
}

.iaf-big-titles__head {
  position: relative;
  z-index: 3;
  box-sizing: border-box;
  max-width: var(--iaf-bt-content-max);
  margin: 0 auto;
  margin-bottom: var(--iaf-bt-title-gap);
  padding: 0 var(--iaf-bt-padding-inline);
  width: 100%;
  min-width: 0;
}

.iaf-big-titles__title {
  margin: 0;
  color: var(--iaf-canvas-heading);
  text-wrap: balance;
  max-width: 22ch;
}

/* Full-bleed viewport — uniquement le ruban. */
.iaf-big-titles__ribbon {
  position: relative;
  z-index: 1;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  left: 0;
  right: 0;
  min-height: var(--iaf-bt-min-h);
  box-sizing: border-box;
}

/* Ruban swipe mobile : masqué sur desktop (marquee CSS). */
.iaf-big-titles__ribbon--scroll {
  display: none;
}

.iaf-big-titles__viewport {
  position: relative;
  z-index: 1;
  overflow: hidden;
  width: 100%;
}

.iaf-big-titles__track {
  display: flex;
  flex-direction: row;
  width: max-content;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  animation: iaf-bt-scroll var(--iaf-bt-duration, 45s) linear infinite;
}

.iaf-big-titles[data-iaf-bt-motion="static"] .iaf-big-titles__track,
.iaf-big-titles--reduced .iaf-big-titles__track {
  animation: none;
  transform: none;
}

@keyframes iaf-bt-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

.iaf-big-titles__row {
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  align-content: stretch;
  min-width: 0;
  box-sizing: border-box;
  padding: 0;
}

.iaf-big-titles__row--static {
  max-width: 100%;
  width: 100%;
  min-height: var(--iaf-bt-min-h);
  margin: 0;
  flex-wrap: nowrap;
  justify-content: center;
  overflow: hidden;
}

.iaf-big-titles__item {
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  box-sizing: border-box;
  padding: var(--iaf-bt-item-pad);
  gap: 0;
  align-self: stretch;
  height: 100%;
}

/* Axe vertical gauche unique : chiffre + subtext partagent le même point de départ (pas de centrage sur la largeur du chiffre). */
.iaf-big-titles__item-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Filet vertical : pleine hauteur de l’item, aligné de façon homogène. */
.iaf-big-titles__row .iaf-big-titles__item + .iaf-big-titles__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 0;
  width: 1px;
  height: 100%;
  background-color: var(--iaf-canvas-heading);
  pointer-events: none;
}

.iaf-big-titles__row .iaf-big-titles__item + .iaf-big-titles__item,
.iaf-big-titles__row--static .iaf-big-titles__item + .iaf-big-titles__item {
  border-left: none;
}

/* Zone chiffre : hauteur commune ; glyphes en bas, alignés à gauche de la stack (jamais centrés). */
.iaf-big-titles__figure-slot {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  min-height: var(--iaf-bt-figure-slot-h);
}

.iaf-big-titles__value-wrap {
  position: relative;
  z-index: 1;
  display: block;
  flex: 0 0 auto;
  width: max-content;
  max-width: 100%;
  margin: 0;
  padding: 0;
  text-align: left;
}

.iaf-big-titles__value {
  display: block;
  margin: 0;
  padding: 0;
  text-align: left;
  font-family: var(--iaf-bt-figure-ff);
  font-size: var(--iaf-bt-figure);
  line-height: 0.9;
  font-weight: var(--iaf-bt-figure-weight);
  letter-spacing: -0.04em;
  color: var(--iaf-canvas-heading);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Subtexte : même bord gauche que le chiffre (bord de la .item-stack), premier caractère aligné sur le 1/2/1 du chiffre. */
.iaf-big-titles__label-wrap {
  position: relative;
  z-index: 1;
  display: block;
  flex: 0 0 auto;
  align-self: stretch;
  width: 100%;
  max-width: 14em;
  margin: 0;
  margin-top: var(--iaf-bt-label-gap);
  margin-left: var(--iaf-bt-label-nudge);
  padding: 0;
  text-align: left;
  box-sizing: border-box;
}

.iaf-big-titles__label {
  margin: 0;
  padding: 0;
  text-align: left;
  text-indent: 0;
  color: var(--iaf-canvas-heading);
  text-transform: none;
  text-wrap: pretty;
  font-size: var(--gt-copy-size);
  line-height: var(--gt-copy-lh);
}

.iaf-big-titles__label + .iaf-big-titles__label {
  margin-top: 0.35em;
}

.iaf-big-titles__edge {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 0;
  width: var(--iaf-bt-edge);
  max-width: min(20vw, 120px);
  height: 100%;
  min-height: 100%;
  pointer-events: none;
}

.iaf-big-titles__edge--left {
  left: 0;
}

.iaf-big-titles__edge--right {
  right: 0;
}

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

.iaf-big-titles__edge--left .iaf-big-titles__edge-layer:nth-child(1) {
  backdrop-filter: blur(0.5px);
  -webkit-backdrop-filter: blur(0.5px);
  mask: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 18%);
  -webkit-mask: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 18%);
}

.iaf-big-titles__edge--left .iaf-big-titles__edge-layer:nth-child(2) {
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  mask: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 26%);
  -webkit-mask: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 26%);
}

.iaf-big-titles__edge--left .iaf-big-titles__edge-layer:nth-child(3) {
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  mask: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 34%);
  -webkit-mask: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 34%);
}

.iaf-big-titles__edge--left .iaf-big-titles__edge-layer:nth-child(4) {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  mask: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 44%);
  -webkit-mask: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 44%);
}

.iaf-big-titles__edge--left .iaf-big-titles__edge-layer:nth-child(5) {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  mask: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 60%);
  -webkit-mask: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 60%);
}

.iaf-big-titles__edge--left .iaf-big-titles__edge-layer:nth-child(6) {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  mask: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 78%);
  -webkit-mask: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 78%);
}

.iaf-big-titles__edge--left .iaf-big-titles__edge-layer:nth-child(7) {
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  mask: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}

.iaf-big-titles__edge--right .iaf-big-titles__edge-layer:nth-child(1) {
  backdrop-filter: blur(0.5px);
  -webkit-backdrop-filter: blur(0.5px);
  mask: linear-gradient(to left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 18%);
  -webkit-mask: linear-gradient(to left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 18%);
}

.iaf-big-titles__edge--right .iaf-big-titles__edge-layer:nth-child(2) {
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  mask: linear-gradient(to left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 26%);
  -webkit-mask: linear-gradient(to left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 26%);
}

.iaf-big-titles__edge--right .iaf-big-titles__edge-layer:nth-child(3) {
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  mask: linear-gradient(to left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 34%);
  -webkit-mask: linear-gradient(to left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 34%);
}

.iaf-big-titles__edge--right .iaf-big-titles__edge-layer:nth-child(4) {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  mask: linear-gradient(to left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 44%);
  -webkit-mask: linear-gradient(to left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 44%);
}

.iaf-big-titles__edge--right .iaf-big-titles__edge-layer:nth-child(5) {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  mask: linear-gradient(to left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 60%);
  -webkit-mask: linear-gradient(to left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 60%);
}

.iaf-big-titles__edge--right .iaf-big-titles__edge-layer:nth-child(6) {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  mask: linear-gradient(to left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 78%);
  -webkit-mask: linear-gradient(to left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 78%);
}

.iaf-big-titles__edge--right .iaf-big-titles__edge-layer:nth-child(7) {
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  mask: linear-gradient(to left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask: linear-gradient(to left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}

@media (max-width: 1023px) {
  :root {
    --iaf-bt-padding-block: var(--iaf-layout-padding-block-tablet, 64px);
    --iaf-bt-padding-inline: var(--iaf-layout-padding-inline-tablet, 24px);
    --iaf-bt-title-gap: 36px;
    --iaf-bt-figure-raw: clamp(150px, 34vw, 350px);
    /* Slot chiffre = hauteur réelle du glyphe (plus de réserve desktop 0.92×). */
    --iaf-bt-figure-slot-h: auto;
    --iaf-bt-min-h: 0;
  }

  .iaf-big-titles {
    padding-top: var(--iaf-bt-padding-block);
    padding-bottom: clamp(16px, 4vh, 24px);
  }

  /* Ruban : hauteur pilotée par le contenu (plus de min-height 200px). */
  .iaf-big-titles__ribbon,
  .iaf-big-titles__row--static {
    min-height: 0;
  }

  .iaf-big-titles__row {
    align-items: flex-start;
  }

  .iaf-big-titles__item {
    height: auto;
    align-self: flex-start;
    /* Colonne visible ≈ 1 cran du carrousel : centre chiffre + label entre les filets. */
    min-width: clamp(220px, 72vw, 300px);
    align-items: center;
  }

  .iaf-big-titles__item-stack {
    align-items: center;
    width: 100%;
  }

  .iaf-big-titles__figure-slot {
    min-height: 0;
    align-items: center;
    justify-content: center;
  }

  .iaf-big-titles__value-wrap,
  .iaf-big-titles__value {
    text-align: center;
  }

  .iaf-big-titles__label-wrap {
    margin-left: 0;
    text-align: center;
    align-self: center;
    max-width: 16em;
  }

  .iaf-big-titles__label {
    text-align: center;
  }

  /* Filets verticaux : hauteur du contenu, pas du ruban forcé. */
  .iaf-big-titles__row .iaf-big-titles__item + .iaf-big-titles__item::before {
    top: 0;
    bottom: auto;
    height: 100%;
  }

  /* Mobile : swipe horizontal (marquee auto masqué). */
  .iaf-big-titles[data-iaf-bt-motion="marquee"] .iaf-big-titles__ribbon--marquee {
    display: none;
  }

  .iaf-big-titles[data-iaf-bt-motion="marquee"] .iaf-big-titles__ribbon--scroll {
    display: block;
  }

  .iaf-big-titles__ribbon--scroll .iaf-big-titles__viewport--scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    scrollbar-width: none;
  }

  .iaf-big-titles__ribbon--scroll .iaf-big-titles__viewport--scroll::-webkit-scrollbar {
    display: none;
  }

  .iaf-big-titles__ribbon--scroll .iaf-big-titles__row {
    width: max-content;
  }

  /* Pas de flou latéral sur mobile. */
  .iaf-big-titles__edge-overlay,
  .iaf-big-titles__edge--left,
  .iaf-big-titles__edge--right {
    display: none;
  }
}

@media (max-width: 768px) {
  :root {
    --iaf-bt-padding-block: 80px;
    --iaf-bt-padding-inline: var(--iaf-layout-padding-inline-phone, 20px);
    --iaf-bt-item-pad: 0 20px;
    --iaf-bt-figure-raw: clamp(130px, 32vw, 350px);
    --iaf-bt-title-gap: 32px;
  }

  .iaf-big-titles {
    padding-top: var(--iaf-bt-padding-block);
    padding-bottom: clamp(12px, 3vh, 20px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .iaf-big-titles__track {
    animation: none;
    transform: none;
  }
}
