.iaf-flip-through-keywords {
  position: relative;
  --iaf-flip-through-tail: 0px;
  --iaf-flip-through-fade-duration: 520ms;
  --iaf-flip-through-sticky-top: clamp(64px, 10vh, 120px);
  color: #eeeeee;
  background: #0c364b;
  padding: 0;
  min-height: max(90vh, 760px);
}

.iaf-flip-through-keywords__bg-clip {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  margin-bottom: -100vh;
  z-index: 0;
  pointer-events: none;
}

.iaf-flip-through-keywords.is-bg-ended {
  background-color: transparent;
}

.iaf-flip-through-keywords.is-bg-ended .iaf-flip-through-keywords__bg-item.is-active {
  opacity: 0;
  transition: opacity var(--iaf-flip-through-fade-duration) cubic-bezier(0.22, 1, 0.36, 1);
}

.iaf-flip-through-keywords__bg-item {
  position: absolute;
  inset: 0;
  /* Taille/position gérées en inline (image centrée, hauteur en vh, ratio conservé).
     La couche couvre 100vh : la couleur de fond remplit toute la zone. */
  background-repeat: no-repeat;
  background-size: auto;
  background-position: center;
  opacity: 0;
  transition: opacity var(--iaf-flip-through-fade-duration) cubic-bezier(0.22, 1, 0.36, 1);
}

.iaf-flip-through-keywords__bg-item.is-active {
  opacity: 1;
}

.iaf-flip-through-keywords__bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: rgba(12, 54, 75, var(--iaf-flip-through-overlay-opacity, 0.15));
  transition: none;
}

.iaf-flip-through-keywords__bg-clip.is-solid-bg .iaf-flip-through-keywords__bg-overlay {
  opacity: 0;
}

.iaf-flip-through-keywords__container {
  position: relative;
  z-index: 1;
  width: calc(100% - (var(--iaf-separator-inline-padding, 64px) * 2));
  max-width: calc(var(--iaf-separator-max-width, 1440px) - (var(--iaf-separator-inline-padding, 64px) * 2));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(380px, 1fr);
  gap: clamp(32px, 6vw, 110px);
  padding: clamp(72px, 10vh, 112px) 0 clamp(150px, 21vh, 260px);
}

.iaf-flip-through-keywords + * {
  position: relative;
  z-index: 2;
}

/* Filet interne sticky — remplace le filet wrapper ; le clip des keywords
   est appliqué en JS (`clip-path` sur __right), sans masque coloré. */
.iaf-flip-through-keywords__top-rule {
  display: block;
  grid-column: 1 / -1;
  grid-row: 1;
  position: sticky;
  top: var(--iaf-flip-through-sticky-top);
  z-index: 4;
  flex: 0 0 auto;
  height: var(--iaf-separator-thickness, 1px);
  width: 100%;
  margin: 0 0 var(--iaf-ext-divider-gap, 60px);
  background-color: var(--iaf-separator-color, rgba(238, 238, 238, 0.35));
  pointer-events: none;
}

/* Option back-end : masquer le filet au-dessus du titre.
   L'élément reste présent (mesure du clip JS + espacement conservé) ;
   seule la ligne visible est retirée. */
.iaf-flip-through-keywords.is-top-rule-hidden .iaf-flip-through-keywords__top-rule {
  background-color: transparent;
}

/* Wrapper top divider → filet interne sticky (même logique que Card Slides). */
.iaf-ext-spacing--has-top-divider:has(> .iaf-flip-through-keywords)::before {
  display: none;
}

.iaf-ext-spacing--has-top-divider > .iaf-flip-through-keywords .iaf-flip-through-keywords__container {
  padding-top: 0;
}

/* Intro Text → Keywords : pas de double filet ; le filet vit dans Keywords. */
.iaf-ext-spacing--has-bottom-divider:has(+ .iaf-ext-spacing > .iaf-flip-through-keywords)::after {
  display: none;
}

.iaf-flip-through-keywords__content {
  display: contents;
}

.iaf-flip-through-keywords__left {
  grid-column: 1;
  grid-row: 2;
  position: sticky;
  top: calc(
    var(--iaf-flip-through-sticky-top)
    + var(--iaf-separator-thickness, 1px)
    + var(--iaf-ext-divider-gap, 60px)
  );
  align-self: start;
  z-index: 2;
}

.iaf-flip-through-keywords__headline {
  margin: 0;
  color: #eeeeee;
  max-width: 16ch;
}

.iaf-flip-through-keywords__right {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  width: min(100%, 34rem);
  position: relative;
  z-index: 1;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.iaf-flip-through-keywords__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.iaf-flip-through-keywords__item {
  margin: 0;
  min-height: clamp(76px, 12.5vh, 126px);
  display: flex;
  align-items: center;
  font-family: var(--font-gt-america, "GT America", "Helvetica Neue", Arial, sans-serif);
  font-weight: var(--gt-copy-weight, 300);
  font-size: clamp(28px, 3.3vw, 46px);
  line-height: 1;
  letter-spacing: 0;
  color: #eeeeee;
  transition: none;
}

.iaf-flip-through-keywords__item.is-active {
  color: var(--iaf-primary-1, #2398ff);
}

/* Fond White / Pure White (mot actif) : texte Léman 150 (#0C364B) ; le mot highlight reste Primary 1. */
.iaf-flip-through-keywords.is-light-bg .iaf-flip-through-keywords__headline,
.iaf-flip-through-keywords.is-light-bg .iaf-flip-through-keywords__item {
  color: #0c364b;
}

.iaf-flip-through-keywords.is-light-bg .iaf-flip-through-keywords__item.is-active {
  color: var(--iaf-primary-1, #2398ff);
}

/* Filet interne (__top-rule) : masqué sur fond clair (ligne parasite au-dessus du titre). */
.iaf-flip-through-keywords.is-light-bg .iaf-flip-through-keywords__top-rule {
  background-color: transparent;
}

@media (max-width: 1023px) {
  .iaf-flip-through-keywords {
    --iaf-flip-through-sticky-top: 0;
    min-height: auto;
    overflow: visible;
    /* Fond MOBILE : la section est transparente. La couleur du mot actif est
       poussée sur le fond de page GLOBAL (data-iaf-bg-color → page-bg-color.js
       → --page-bg-color sur <body>, transition 1100ms). Le fond est donc
       CONTINU avec les sections voisines (pas de rectangle opaque à la
       jonction) et transitionne comme partout ailleurs. Cf. iaf-flip-through-keywords.js. */
    background-color: transparent;
  }

  /* Mobile : pas d'images ni de calques de fond — la couleur vit sur le fond global. */
  .iaf-flip-through-keywords__bg-clip {
    display: none !important;
  }

  .iaf-flip-through-keywords__container {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: calc(100% - 48px);
    max-width: none;
    padding: var(--iaf-ext-divider-gap-before, 32px) 0 clamp(72px, 14vh, 112px);
  }

  .iaf-flip-through-keywords__content {
    display: flex;
    flex-direction: column;
    gap: clamp(52px, 11vh, 80px);
  }

  .iaf-flip-through-keywords__top-rule {
    margin-bottom: var(--iaf-ext-divider-gap, 16px);
  }

  .iaf-flip-through-keywords__left {
    grid-column: auto;
    grid-row: auto;
    position: relative;
    top: auto;
    text-align: left;
  }

  .iaf-flip-through-keywords__headline {
    max-width: none;
    margin-inline: 0;
    color: #eeeeee;
  }

  .iaf-flip-through-keywords__right {
    grid-column: auto;
    grid-row: auto;
    justify-self: stretch;
    width: 100%;
    /* Desktop clippe pour le sticky ; mobile doit montrer le mot entier. */
    overflow: visible;
  }

  .iaf-flip-through-keywords__list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(24px, 6.5vh, 40px);
  }

  .iaf-flip-through-keywords__item {
    min-height: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: block;
    justify-content: flex-start;
    text-align: left;
    font-size: var(--iaf-m-keyword);
    line-height: 1.15;
    color: #eeeeee;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
  }

  .iaf-flip-through-keywords__item.is-active {
    color: var(--iaf-primary-1, #2398ff); /* Léman 100 */
  }
}