/* ============================================
   IAF Header — Landing (100vh)
   Grille : vidéo plein écran + 3 blocs superposés
   (rect bleu 40vw×50vh top-right, bloc IAF White 50vw×50vh bottom-left,
    petit rect IAF White 10vw×50vh bottom-right).

   Intro au chargement :
   - la section se révèle couche par couche, depuis la droite
   - classe `.iaf-header-landing--ready` ajoutée en JS quand la vidéo est
     prête à jouer (event `canplay`) ou après fallback
   ============================================ */

:root {
  --iaf-hl-bg: #EEEEEE;                       /* IAF White */
  --iaf-hl-blue-heavy: #0C364B;               /* Léman Blue 150 */
  --iaf-hl-blue-heavy-70: rgba(12, 54, 75, 0.7); /* Léman Blue 150 @ 70% */
  --iaf-hl-blue-light: #2398FF;               /* Léman Blue 100 */
  --iaf-hl-text: #1E1E1E;                     /* IAF Black */

  --iaf-hl-padding-top: 52px;       /* marge au-dessus de "Swiss IAF" */
  --iaf-hl-padding-x: 64px;         /* paddings horizontaux du bloc blanc */
  --iaf-hl-padding-bottom: 64px;    /* marge en bas */
  --iaf-hl-gap: 20px;               /* espace vertical entre sub et h1 */
  --iaf-hl-blue-blur: 18px;         /* flou arrière du rect bleu */
  --iaf-hl-mid-x: 50%;              /* axe vertical grille (évite 50% vs 50vw sur Safari) */
  --iaf-hl-mid-y: 50%;              /* axe horizontal grille (évite 50% vs 50vh) */
  --iaf-hl-corner-width: 10vw;      /* bande blanche bas-droite ; bord droit du bleu */

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

.iaf-header-landing {
  position: relative;
  width: 100%;
  height: 100vh;        /* fallback */
  height: 100dvh;
  overflow: hidden;
  background: transparent;
  isolation: isolate;
}

/* Vidéo plein écran (fond) */
.iaf-header-landing__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Poster (1re frame) en fond : visible instantanément, la vidéo fade par
     dessus quand elle est prête. Évite tout hero vide pendant le chargement. */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: transform, opacity;
}

.iaf-header-landing__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Fond décoratif : pas d'interaction ni contrôles natifs (iOS play overlay). */
  pointer-events: none;
}

.iaf-header-landing__video::-webkit-media-controls,
.iaf-header-landing__video::-webkit-media-controls-enclosure,
.iaf-header-landing__video::-webkit-media-controls-panel,
.iaf-header-landing__video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Rectangle bleu — haut-droite : bord droit = bord gauche du coin blanc (même repère). */
.iaf-header-landing__blue {
  position: absolute;
  top: 0;
  left: var(--iaf-hl-mid-x);
  right: var(--iaf-hl-corner-width);
  bottom: var(--iaf-hl-mid-y);
  width: auto;
  height: auto;
  background-color: var(--iaf-hl-blue-heavy-70);
  backdrop-filter: blur(var(--iaf-hl-blue-blur));
  -webkit-backdrop-filter: blur(var(--iaf-hl-blue-blur));
  z-index: 1;
  will-change: transform, opacity;
}

/* Bande IAF White bas-droite — coin sup.-gauche = coin inf.-droit du bleu. */
.iaf-header-landing__corner {
  position: absolute;
  top: var(--iaf-hl-mid-y);
  right: 0;
  bottom: 0;
  width: var(--iaf-hl-corner-width);
  height: auto;
  background-color: var(--iaf-hl-bg);
  z-index: 1;
  will-change: transform, opacity;
}

/* Tuile blanche pleine — mobile uniquement (composition 3 tuiles, comme les
   pages internes). Masquée en desktop où la géométrie diffère. */
.iaf-header-landing__tile-white {
  display: none;
  background-color: #FFFFFF;
}

/* Bloc IAF White contenu — bas-gauche ; coin sup.-droit = coin inf.-gauche du bleu. */
.iaf-header-landing__content {
  position: absolute;
  top: var(--iaf-hl-mid-y);
  left: 0;
  right: var(--iaf-hl-mid-x);
  bottom: 0;
  width: auto;
  height: auto;
  padding: var(--iaf-hl-padding-top) var(--iaf-hl-padding-x) var(--iaf-hl-padding-bottom);
  box-sizing: border-box;
  z-index: 2;
}

/* Fond blanc du bloc contenu — animé séparément (couche 2 de l'intro) */
.iaf-header-landing__content-bg {
  position: absolute;
  inset: 0;
  background-color: var(--iaf-hl-bg);
  z-index: 0;
  will-change: transform, opacity;
}

/* Wrapper du texte — purement layout (l'intro s'applique sur chaque enfant).
   Le groupe sub + H1 est centré verticalement dans le bloc IAF White bas-gauche
   (donc centré au milieu de la moitié basse du hero, cf. grille 2 lignes). */
.iaf-header-landing__text {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--iaf-hl-gap);
}

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

.iaf-header-landing__sub {
  margin: 0;
  color: var(--iaf-hl-blue-heavy);
}

.iaf-header-landing__heading {
  margin: 0;
  color: var(--iaf-hl-blue-heavy);
}

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

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

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

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

/* État initial :
   - vidéo : fade only (pas de translate)
   - rectangles + typo : translate depuis la droite + fade */
.iaf-header-landing .iaf-header-landing__media {
  opacity: 0;
}

.iaf-header-landing .iaf-header-landing__content-bg,
.iaf-header-landing .iaf-header-landing__blue,
.iaf-header-landing .iaf-header-landing__corner,
.iaf-header-landing .iaf-header-landing__tile-white {
  opacity: 0;
  transform: translateX(var(--iaf-hl-intro-dist-large));
}

.iaf-header-landing .iaf-header-landing__text > * {
  opacity: 0;
  transform: translateX(var(--iaf-hl-intro-dist-small));
}

/* Filet hero → Intro Text : déjà visible à l’arrivée (pas de stagger). */
.iaf-header-landing .iaf-header-landing__divider {
  opacity: 1;
  transform: none;
}

/* Transitions — stagger : content → text → blue → corner.
   La vidéo fade en parallèle dès le début. */
.iaf-header-landing__media {
  transition: opacity var(--iaf-hl-intro-dur-video) var(--iaf-hl-intro-easing) var(--d, 0ms);
  --d: 0ms;
}

.iaf-header-landing__content-bg {
  transition:
    opacity var(--iaf-hl-intro-dur-large) var(--iaf-hl-intro-easing) var(--d, 0ms),
    transform var(--iaf-hl-intro-dur-large) var(--iaf-hl-intro-easing) var(--d, 0ms);
  --d: 0ms;
}

/* Stagger individuel sur chaque élément de texte (espacement renforcé). */
.iaf-header-landing__text > * {
  transition:
    opacity var(--iaf-hl-intro-dur-text) var(--iaf-hl-intro-easing) var(--d, 0ms),
    transform var(--iaf-hl-intro-dur-text) var(--iaf-hl-intro-easing) var(--d, 0ms);
}

.iaf-header-landing__sub      { --d: 180ms; }
.iaf-header-landing__heading  { --d: 330ms; }

.iaf-header-landing__divider {
  transition: none;
  will-change: auto;
}

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

.iaf-header-landing__corner,
.iaf-header-landing__tile-white {
  transition:
    opacity var(--iaf-hl-intro-dur-large) var(--iaf-hl-intro-easing) var(--d, 0ms),
    transform var(--iaf-hl-intro-dur-large) var(--iaf-hl-intro-easing) var(--d, 0ms);
  --d: 630ms;
}

/* État final : déclenché via la classe `.is-ready` sur la section.
   NB : `__media` (le conteneur avec le poster en fond) fait partie de l'intro
   et apparaît avec le texte. La VIDÉO elle-même est découplée ci-dessous : elle
   n'attend pas l'intro, et l'intro n'attend pas la vidéo. */
.iaf-header-landing.is-ready .iaf-header-landing__media,
.iaf-header-landing.is-ready .iaf-header-landing__content-bg,
.iaf-header-landing.is-ready .iaf-header-landing__blue,
.iaf-header-landing.is-ready .iaf-header-landing__corner,
.iaf-header-landing.is-ready .iaf-header-landing__tile-white,
.iaf-header-landing.is-ready .iaf-header-landing__text > * {
  opacity: 1;
  transform: translateX(0);
}

/* Vidéo découplée : le poster (fond du conteneur) est visible tout de suite ;
   la vidéo fade par-dessus quand elle est jouable (classe `.is-video-ready`
   ajoutée par iaf-header-landing-intro.js sur `canplay`). Ainsi le hero
   s'affiche aussi vite que les pages internes, sans attendre le téléchargement
   de la vidéo. */
.iaf-header-landing__video {
  opacity: 0;
  transition: opacity var(--iaf-hl-intro-dur-video) var(--iaf-hl-intro-easing);
}

.iaf-header-landing.is-video-ready .iaf-header-landing__video {
  opacity: 1;
}

/* Mode "instant" — utilisé après une page transition htmx.
   Le landing arrive directement à son état final, sans intro
   interne : c'est le fade global body→htmx-swapping (200 ms) qui
   se charge du feeling d'entrée.
   Override tout (initial states, delays, transitions) pour éviter
   tout flash ou animation résiduelle. */
.iaf-header-landing--instant .iaf-header-landing__media,
.iaf-header-landing--instant .iaf-header-landing__video,
.iaf-header-landing--instant .iaf-header-landing__content-bg,
.iaf-header-landing--instant .iaf-header-landing__blue,
.iaf-header-landing--instant .iaf-header-landing__corner,
.iaf-header-landing--instant .iaf-header-landing__tile-white,
.iaf-header-landing--instant .iaf-header-landing__text > *,
.iaf-header-landing--instant .iaf-header-landing__divider {
  opacity: 1;
  transform: none;
  transition: none;
  --d: 0ms;
}

/* ============================================
   Reduced motion — fade court, pas de translate
   ============================================ */
/* ============================================
   Mobile / tablet (≤1023px) — stacked hero, no desktop tiles
   ============================================ */
@media (max-width: 1023px) {
  :root {
    --iaf-hl-padding-top: 40px;
    --iaf-hl-padding-x: var(--iaf-layout-padding-inline-tablet, 24px);
    --iaf-hl-padding-bottom: 48px;
    --iaf-hl-gap: 14px;
    /* Zone média mobile + tuiles : cluster ≈ 64% de la hauteur du hero
       (chaque tuile = 32% — 20% plus petit que l’ancien 40%). */
    --iaf-hl-m-media-h: clamp(280px, 50vh, 460px);
    --iaf-hl-m-tile: calc(var(--iaf-hl-m-media-h) * 0.32);
  }

  .iaf-header-landing {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    /* Clip l'intro horizontale des tuiles (translateX depuis la droite),
       comme le hero small. Le padding-bottom absorbe la translation du texte. */
    overflow: hidden;
    background-color: var(--iaf-hl-bg, #EEEEEE);
  }

  .iaf-header-landing__media {
    position: relative;
    flex: 0 0 auto;
    order: 1;
    width: 100%;
    height: var(--iaf-hl-m-media-h);
    inset: auto;
  }

  /* Vidéo rétablie sur mobile (autoplay + muted + playsinline). Le poster reste
     visible en fond du conteneur tant que la vidéo n'est pas prête. */
  .iaf-header-landing__video {
    display: block;
  }

  /* Formes géométriques superposées à la vidéo — même composition 3 tuiles que
     les pages internes (hero small), pour l'uniformité :
       · bleu givré    → bas-gauche du cluster
       · blanc plein   → bas-droite
       · IAF White (#EEEEEE) → au-dessus du blanc (haut-droite du cluster)
     Le cluster (2 tuiles de haut) est ancré en bas à droite de la zone média. */
  .iaf-header-landing__blue,
  .iaf-header-landing__corner,
  .iaf-header-landing__tile-white {
    display: block;
    position: absolute;
    left: auto;
    right: 0;
    width: var(--iaf-hl-m-tile);
    height: var(--iaf-hl-m-tile);
    z-index: 1;
  }

  /* NB : les tuiles sont enfants de la <section> (pas de __media). En colonne
     mobile, `bottom` référencerait le bas de toute la section (sous le texte).
     On positionne donc par le HAUT, calé sur le bas de la zone média. */

  /* IAF White (#EEEEEE) — rangée du haut, à droite. */
  .iaf-header-landing__corner {
    top: calc(var(--iaf-hl-m-media-h) - (var(--iaf-hl-m-tile) * 2));
    bottom: auto;
    right: 0;
  }

  /* Blanc plein — rangée du bas, à droite. */
  .iaf-header-landing__tile-white {
    top: calc(var(--iaf-hl-m-media-h) - var(--iaf-hl-m-tile));
    bottom: auto;
    right: 0;
  }

  /* Tuile bleue — rangée du bas, à gauche de la tuile blanche. */
  .iaf-header-landing__blue {
    top: calc(var(--iaf-hl-m-media-h) - var(--iaf-hl-m-tile));
    bottom: auto;
    right: var(--iaf-hl-m-tile);
  }

  .iaf-header-landing__content {
    position: relative;
    order: 2;
    top: auto;
    right: auto;
    left: auto;
    bottom: auto;
    width: 100%;
    max-width: 100%;
    height: auto;
    flex: 0 0 auto;
    min-height: 0;
    padding: var(--iaf-hl-padding-top) var(--iaf-hl-padding-x) var(--iaf-hl-padding-bottom);
    box-sizing: border-box;
    overflow: visible;
  }

  .iaf-header-landing__content-bg {
    transform: none;
  }

  .iaf-header-landing__text {
    height: auto;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
  }

  .iaf-header-landing__sub,
  .iaf-header-landing__heading {
    color: var(--iaf-hs-text-color-on-light, #114e6d);
  }

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

  /* Média + texte + filet : translation verticale sur mobile.
     Les tuiles géométriques, elles, gardent le glissement HORIZONTAL depuis la
     droite (translateX de base) — exactement comme le hero small des pages
     internes. On ne les inclut donc PAS ici. */
  .iaf-header-landing .iaf-header-landing__media,
  .iaf-header-landing .iaf-header-landing__text > * {
    transform: translateY(var(--iaf-hl-intro-dist-small));
  }

  .iaf-header-landing.is-ready .iaf-header-landing__media,
  .iaf-header-landing.is-ready .iaf-header-landing__text > * {
    transform: translateY(0);
  }

  .iaf-header-landing .iaf-header-landing__divider {
    opacity: 1;
    transform: none;
  }

  /* Stagger des tuiles calé sur le hero small : bleu 480 / #EEEEEE 600 / blanc 720. */
  .iaf-header-landing__corner {
    --d: 600ms;
  }

  .iaf-header-landing__tile-white {
    --d: 720ms;
  }

  .iaf-header-landing__divider {
    display: block;
    flex: 0 0 auto;
    order: 3;
    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 du rect bleu tant que l'intro n'est pas
   prête, pour alléger le compositing pendant l'animation. */
html.iaf-safari .iaf-header-landing:not(.is-ready) .iaf-header-landing__blue {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

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

@media (prefers-reduced-motion: reduce) {
  .iaf-header-landing .iaf-header-landing__media,
  .iaf-header-landing .iaf-header-landing__content-bg,
  .iaf-header-landing .iaf-header-landing__blue,
  .iaf-header-landing .iaf-header-landing__corner,
  .iaf-header-landing .iaf-header-landing__tile-white,
  .iaf-header-landing .iaf-header-landing__text > *,
  .iaf-header-landing .iaf-header-landing__divider {
    transform: none;
    transition: opacity 200ms linear;
    --d: 0ms;
  }

  .iaf-header-landing__video {
    transition: opacity 200ms linear;
  }
}