/* ============================================
   IAF Header — Small (50vh, pages internes)
   Grille 2 colonnes 50vw :
   - gauche : texte centré verticalement (comme le landing),
   - droite : sous-grille 3 × 2 avec image + 3 tuiles (bleu, #EEEEEE, #FFFFFF).

   Intro au chargement :
   - même principe que le landing (translateX depuis la droite + fade, stagger)
   - classe `.is-ready` ajoutée en JS quand l'image est prête
     (event `load`) ou après fallback.
   ============================================ */

:root {
  --iaf-hs-bg: #ffffff;
  --iaf-hs-text-color: var(--iaf-canvas-heading);
  --iaf-hs-text-color-on-light: #114e6d;
  --iaf-hs-blue-heavy-70: rgba(12, 54, 75, 0.7);  /* Léman Blue 150 @ 70% — mêmes props que le landing */
  --iaf-hs-blue-blur: 18px;
  --iaf-hs-tile-soft: #EEEEEE;                     /* IAF White */
  --iaf-hs-tile-white: #FFFFFF;

  --iaf-hs-padding-top: 52px;
  --iaf-hs-padding-x: 64px;
  --iaf-hs-padding-bottom: 64px;
  --iaf-hs-gap: 20px;                              /* espace vertical sub / H1 */
  --iaf-hs-text-offset-y: 20px;                    /* décalage du bloc texte vers le bas depuis le centre */

  /* Motion d'intro — reload / arrivée page (hero small uniquement). */
  --iaf-hs-intro-easing: cubic-bezier(0.33, 0, 0.2, 1);
  --iaf-hs-intro-dist-large: 64px;                 /* tuiles + image */
  --iaf-hs-intro-dist-small: 32px;                 /* typographie */
  --iaf-hs-intro-dur-large: 780ms;
  --iaf-hs-intro-dur-image: 930ms;
  --iaf-hs-intro-dur-text: 600ms;
}

.iaf-header-small {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  height: var(--iaf-hs-height, 50vh);
  height: calc(var(--iaf-hs-height-num, 50) * 1dvh);
  background: transparent;
  overflow: hidden;
  isolation: isolate;
}

/* Bande supérieure — fond distinct du canvas global (section background). */
.iaf-header-small::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--iaf-hs-height, 50vh);
  height: calc(var(--iaf-hs-height-num, 50) * 1dvh);
  background-color: var(--iaf-hs-upper-bg, #ffffff);
  z-index: -1;
  pointer-events: none;
}

/* -------- Colonne gauche : texte -------- */

.iaf-header-small__left {
  position: relative;
  padding:
    calc(var(--iaf-hs-padding-top) * var(--iaf-hs-scale, 1))
    calc(var(--iaf-hs-padding-x) * var(--iaf-hs-scale, 1))
    calc(var(--iaf-hs-padding-bottom) * var(--iaf-hs-scale, 1));
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.iaf-header-small__text {
  display: flex;
  flex-direction: column;
  gap: calc(var(--iaf-hs-gap) * var(--iaf-hs-scale, 1));
  width: 100%;
  transform: translateY(calc(var(--iaf-hs-text-offset-y) * var(--iaf-hs-scale, 1)));
}

.iaf-header-small__text > * {
  will-change: transform, opacity;
}

.iaf-header-small__sub {
  margin: 0;
  color: var(--iaf-hs-text-color);
}

.iaf-header-small__heading {
  margin: 0;
  color: var(--iaf-hs-text-color);
  /* Secours si le contenu ACF ne contient qu'un \n (sans <br>) : affiche le saut de ligne. */
  white-space: pre-line;
}

.iaf-header-small__heading em {
  font-style: italic;
}

/* Headline desktop uniquement : cible ~58px max, sans impacter mobile/tablette. */
@media (min-width: 1024px) {
  .iaf-header-small__heading {
    font-size: clamp(52px, 3.2vw, 58px);
    line-height: 1.08;
    letter-spacing: -0.01em;
  }
}

/* Fond supérieur clair : eyebrow + H1 en bleu foncé (indépendant de data-iaf-theme). */
.iaf-header-small--upper-light {
  --iaf-hs-text-color: var(--iaf-hs-text-color-on-light);
}

/* -------- Colonne droite : sous-grille 3 × 2 -------- */

.iaf-header-small__right {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.iaf-header-small__right > * {
  will-change: transform, opacity;
}

.iaf-header-small__image {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.iaf-header-small__blue {
  grid-column: 2;
  grid-row: 1;
  background-color: var(--iaf-hs-blue-heavy-70);
  backdrop-filter: blur(var(--iaf-hs-blue-blur));
  -webkit-backdrop-filter: blur(var(--iaf-hs-blue-blur));
  z-index: 1;
}

.iaf-header-small__tile--soft {
  grid-column: 3;
  grid-row: 1;
  background-color: var(--iaf-hs-tile-soft);
  z-index: 1;
}

.iaf-header-small__tile--white {
  grid-column: 3;
  grid-row: 2;
  background-color: var(--iaf-hs-tile-white);
  z-index: 1;
}

/* Filet bas de section — mobile uniquement ; masqué desktop. */
.iaf-header-small__divider {
  display: none;
}

/* ============================================
   Intro — états initial / transition / final
   ============================================ */

/* État initial : toutes les couches (image comprise) glissent depuis la droite
   + fade. L'image n'est PAS traitée comme un "fond" statique à la manière de
   la vidéo du landing : elle est considérée comme un élément de composition
   au même titre que les tuiles et se comporte visuellement comme tel. */
.iaf-header-small .iaf-header-small__image,
.iaf-header-small .iaf-header-small__blue,
.iaf-header-small .iaf-header-small__tile {
  opacity: 0;
  transform: translateX(var(--iaf-hs-intro-dist-large));
}

.iaf-header-small .iaf-header-small__text > *,
.iaf-header-small .iaf-header-small__divider {
  opacity: 0;
  transform: translateX(var(--iaf-hs-intro-dist-small));
}

/* Transitions — stagger : image → sub → H1 → blue → tuiles. */
.iaf-header-small__image {
  transition:
    opacity var(--iaf-hs-intro-dur-image) var(--iaf-hs-intro-easing) var(--d, 0ms),
    transform var(--iaf-hs-intro-dur-image) var(--iaf-hs-intro-easing) var(--d, 0ms);
  --d: 0ms;
}

.iaf-header-small__text > * {
  transition:
    opacity var(--iaf-hs-intro-dur-text) var(--iaf-hs-intro-easing) var(--d, 0ms),
    transform var(--iaf-hs-intro-dur-text) var(--iaf-hs-intro-easing) var(--d, 0ms);
}

.iaf-header-small__sub     { --d: 180ms; }
.iaf-header-small__heading { --d: 330ms; }
.iaf-header-small__divider { --d: 780ms; }

.iaf-header-small__divider {
  transition:
    opacity var(--iaf-hs-intro-dur-text) var(--iaf-hs-intro-easing) var(--d, 0ms),
    transform var(--iaf-hs-intro-dur-text) var(--iaf-hs-intro-easing) var(--d, 0ms);
  will-change: transform, opacity;
}

.iaf-header-small__blue {
  transition:
    opacity var(--iaf-hs-intro-dur-large) var(--iaf-hs-intro-easing) var(--d, 0ms),
    transform var(--iaf-hs-intro-dur-large) var(--iaf-hs-intro-easing) var(--d, 0ms);
  --d: 480ms;
}

.iaf-header-small__tile--soft {
  transition:
    opacity var(--iaf-hs-intro-dur-large) var(--iaf-hs-intro-easing) var(--d, 0ms),
    transform var(--iaf-hs-intro-dur-large) var(--iaf-hs-intro-easing) var(--d, 0ms);
  --d: 600ms;
}

.iaf-header-small__tile--white {
  transition:
    opacity var(--iaf-hs-intro-dur-large) var(--iaf-hs-intro-easing) var(--d, 0ms),
    transform var(--iaf-hs-intro-dur-large) var(--iaf-hs-intro-easing) var(--d, 0ms);
  --d: 720ms;
}

/* État final : déclenché via la classe `.is-ready` sur la section. */
.iaf-header-small.is-ready .iaf-header-small__image,
.iaf-header-small.is-ready .iaf-header-small__blue,
.iaf-header-small.is-ready .iaf-header-small__tile,
.iaf-header-small.is-ready .iaf-header-small__text > *,
.iaf-header-small.is-ready .iaf-header-small__divider {
  opacity: 1;
  transform: translateX(0);
}

/* Mode "instant" — après une page transition, pour éviter tout flash
   d'intro alors que le fade global body→view-transition s'est déjà chargé
   du feeling d'entrée. */
.iaf-header-small--instant .iaf-header-small__image,
.iaf-header-small--instant .iaf-header-small__blue,
.iaf-header-small--instant .iaf-header-small__tile,
.iaf-header-small--instant .iaf-header-small__text > *,
.iaf-header-small--instant .iaf-header-small__divider {
  opacity: 1;
  transform: none;
  transition: none;
  --d: 0ms;
}

/* ============================================
   Reduced motion — fade court, pas de translate
   ============================================ */
/* ============================================
   Mobile / tablet (≤1023px) — image first (top, cover), content below on a
   light surface. Comportement aligné sur le hero landing : image collée en
   haut (~50vh), puis bloc texte gauche dans une zone claire, sans superposition.
   ============================================ */
@media (max-width: 1023px) {
  :root {
    --iaf-hs-padding-top: 40px;
    --iaf-hs-padding-x: var(--iaf-layout-padding-inline-tablet, 24px);
    --iaf-hs-padding-bottom: 48px;
    --iaf-hs-gap: 14px;
    --iaf-hs-text-offset-y: 0px;
    /* Zone média mobile + tuiles : le cluster (2 tuiles de haut) occupe 80% de
       la hauteur du hero → chaque tuile = 40% de cette hauteur. */
    --iaf-hs-m-media-h: clamp(280px, 50vh, 460px);
    --iaf-hs-m-tile: calc(var(--iaf-hs-m-media-h) * 0.4);
  }

  .iaf-header-small {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    height: auto;
    min-height: 0;
    /* Zone de contenu sur fond clair (identique au landing : IAF White). */
    background-color: var(--iaf-hl-bg, #EEEEEE);
    /* Texte toujours foncé/lisible sur le fond clair, quelle que soit la
       configuration desktop (upper-bg sombre/clair). */
    --iaf-hs-text-color: var(--iaf-hs-text-color-on-light);
  }

  /* Bande supérieure desktop inutile en empilé : le fond clair de la section
     gère la zone de contenu, l'image gère sa propre zone. */
  .iaf-header-small::before {
    display: none;
  }

  /* 1) Image — en haut, collée, ~50vh, cover. */
  .iaf-header-small__right {
    order: 1;
    display: block;
    position: relative;
    width: 100%;
    height: var(--iaf-hs-m-media-h);
  }

  .iaf-header-small__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    grid-column: auto;
    grid-row: auto;
  }

  /* Formes géométriques (rappel desktop) superposées à l'image, ancrées en bas
     à droite. Agencement relatif identique à la grille desktop :
       [bleu givré][#EEEEEE]
                   [#FFFFFF]
     Le bleu est à gauche de la tuile #EEEEEE ; le blanc est sous #EEEEEE. */
  .iaf-header-small__blue,
  .iaf-header-small__tile {
    display: block;
    position: absolute;
    width: var(--iaf-hs-m-tile);
    height: var(--iaf-hs-m-tile);
    grid-column: auto;
    grid-row: auto;
    z-index: 1;
  }

  .iaf-header-small__tile--white {
    right: 0;
    bottom: 0;
  }

  .iaf-header-small__tile--soft {
    right: 0;
    bottom: var(--iaf-hs-m-tile);
  }

  /* Tuile bleue : alignée en bas (à gauche de la blanche) plutôt qu'en haut. */
  .iaf-header-small__blue {
    right: var(--iaf-hs-m-tile);
    bottom: 0;
  }

  /* 2) Contenu — directement sous l'image, aligné à gauche, marges mobiles. */
  .iaf-header-small__left {
    order: 2;
    flex: 1 1 auto;
    padding:
      var(--iaf-hs-padding-top)
      var(--iaf-hs-padding-x)
      var(--iaf-hs-padding-bottom);
  }

  .iaf-header-small__text {
    transform: none;
  }

  .iaf-header-small__heading {
    line-height: 1.12;
    letter-spacing: -0.01em;
  }

  /* Intro : image + texte + filet en translation verticale sur mobile. */
  .iaf-header-small .iaf-header-small__image,
  .iaf-header-small .iaf-header-small__text > *,
  .iaf-header-small .iaf-header-small__divider {
    transform: translateY(var(--iaf-hs-intro-dist-small));
  }

  .iaf-header-small.is-ready .iaf-header-small__image,
  .iaf-header-small.is-ready .iaf-header-small__text > *,
  .iaf-header-small.is-ready .iaf-header-small__divider {
    transform: translateY(0);
  }

  .iaf-header-small__divider {
    display: block;
    order: 3;
    flex: 0 0 auto;
    width: calc(100% - (var(--iaf-separator-inline-padding, 24px) * 2));
    max-width: calc(var(--iaf-separator-max-width, 1440px) - (var(--iaf-separator-inline-padding, 24px) * 2));
    height: var(--iaf-separator-thickness, 1px);
    margin: 0 auto;
    background-color: var(--iaf-separator-color, var(--iaf-canvas-border-strong));
    box-sizing: border-box;
  }
}

/* Safari — slide + stagger identiques à Chrome (l'intro est jouée APRÈS le
   crossfade de la View Transition, cf. iaf-view-transition.js). On garde juste
   la désactivation du backdrop-filter de la tuile bleue tant que l'intro n'est
   pas prête, pour alléger le compositing pendant l'animation. */
html.iaf-safari .iaf-header-small:not(.is-ready) .iaf-header-small__blue {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@media (max-width: 768px) {
  :root {
    --iaf-hs-padding-x: var(--iaf-layout-padding-inline-phone, 20px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .iaf-header-small .iaf-header-small__image,
  .iaf-header-small .iaf-header-small__blue,
  .iaf-header-small .iaf-header-small__tile,
  .iaf-header-small .iaf-header-small__text > *,
  .iaf-header-small .iaf-header-small__divider {
    transform: none;
    transition: opacity 200ms linear;
    --d: 0ms;
  }
}