/* preloader-split-panels-open — styles de l'effet, tous scopés à [data-fx="preloader-split-panels-open"].
   Thème partagé (contrat v3 §2) : l'effet LIT les rôles --fx-bg, --fx-fg, --fx-accent, --fx-font, --fx-weight-bold,
   --fx-gut et --fx-focus avec repli ; il n'en déclare jamais. Variables locales préfixées --fx-pl-*, comme
   les autres préchargeurs.
   Calque d'intro (contrat v3 §5 bis, mode « ouverture ») : il n'existe que sous [data-fx-motion="full"] tant que la
   séquence n'est pas finie (plus la fin de l'ouverture, [data-fx-leaving]). Sans JS, en mouvement réduit ou après la
   fin : display none, le hero dessous est visible tel quel.
   Géométrie entièrement en CSS (pourcentages) : aucune mesure JS, juste à toutes les tailles et au redimensionnement.
   Le JS n'anime que transform (panneaux) et opacity (marque), via la Web Animations API. */
[data-fx="preloader-split-panels-open"] {
  /* couleurs : panneaux sur l'ENCRE de la page, marque sur son fond. Le hero d'arrivée (texte : --fx-bg-2 / --fx-bg)
     reste ainsi toujours en contraste avec les panneaux, quel que soit le thème : c'est ce contraste qui fait voir
     le rideau s'ouvrir (original : panneau sombre sur page claire, retrouvé en thème crème). Replis = défauts
     inversés du thème sombre par défaut, comme le hero partagé (fond #16171b) : panneaux clairs sans thème. */
  --fx-pl-surface: var(--fx-fg, #f4f4f0);
  --fx-pl-ink: var(--fx-bg, #0c0d12);
  --fx-pl-accent: var(--fx-accent, #3b6ef5);
  /* police de la marque */
  --fx-pl-family: var(--fx-font, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  --fx-pl-weight: var(--fx-weight-bold, 800);
  /* échelle : 3rem au plus comme l'original ; suit aussi la hauteur (mobile en paysage) */
  --fx-pl-brand-size: clamp(1.6rem, 0.9rem + min(4.5vw, 8svh), 3rem);
  --fx-pl-pad: var(--fx-gut, clamp(1rem, 4vw, 2.5rem));
  --fx-pl-dot: 0.2em; /* point d'accent : pastille dessinée, indépendante de la police */
  --fx-pl-z: 100;
  --fx-pl-failsafe: 4s; /* module jamais lancé : le calque s'efface après ce délai */

  position: fixed;
  inset: 0;
  z-index: var(--fx-pl-z);
  display: none;
  overflow: clip;
  color: var(--fx-pl-ink);
  font-family: var(--fx-pl-family);
  font-weight: var(--fx-pl-weight);
}

/* Le calque n'existe que pendant la séquence (garde posé avant le premier rendu par le boot inline) */
[data-fx="preloader-split-panels-open"][data-fx-motion="full"]:not([data-fx-state="done"]),
[data-fx="preloader-split-panels-open"][data-fx-motion="full"][data-fx-leaving] {
  display: block;
}
/* Filet de sécurité : garde posé par le boot mais init() jamais appelé (module en erreur réseau…) → le calque
   s'efface quand même, la page n'est jamais bloquée derrière un écran plein */
[data-fx="preloader-split-panels-open"][data-fx-motion="full"]:not([data-fx-state]) {
  animation: fx-split-panels-open-failsafe 0.4s linear var(--fx-pl-failsafe) both;
}
@keyframes fx-split-panels-open-failsafe {
  to { opacity: 0; visibility: hidden; }
}
/* Fin de l'ouverture (après fx:done) : le hero dessous reçoit déjà les clics */
[data-fx="preloader-split-panels-open"][data-fx-leaving] {
  pointer-events: none;
}

/* ---- Panneaux : axe y = haut / bas (défaut, l'original), axe x = gauche / droite ----
   Le premier panneau déborde d'1 px sur la jointure : aucune ligne de jour sur une hauteur impaire. */
[data-fx="preloader-split-panels-open"] [data-fx-panel] {
  position: absolute;
  left: 0;
  right: 0;
  background: var(--fx-pl-surface);
}
[data-fx="preloader-split-panels-open"] [data-fx-panel="start"] {
  top: 0;
  height: calc(50% + 1px);
}
[data-fx="preloader-split-panels-open"] [data-fx-panel="end"] {
  bottom: 0;
  height: 50%;
}
[data-fx="preloader-split-panels-open"][data-fx-axis="x"] [data-fx-panel] {
  top: 0;
  bottom: 0;
  height: auto;
}
[data-fx="preloader-split-panels-open"][data-fx-axis="x"] [data-fx-panel="start"] {
  right: auto;
  width: calc(50% + 1px);
}
[data-fx="preloader-split-panels-open"][data-fx-axis="x"] [data-fx-panel="end"] {
  left: auto;
  width: 50%;
}

/* ---- Marque : centrée sur la jointure, au-dessus des deux panneaux ; s'efface quand ils s'écartent ---- */
[data-fx="preloader-split-panels-open"] [data-fx-brand] {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding-inline: var(--fx-pl-pad);
  font-size: var(--fx-pl-brand-size);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-align: center;
}
[data-fx="preloader-split-panels-open"] .fx-brand__name {
  min-width: 0;
  max-width: 100%;
  hyphens: auto; /* nom long : coupure avec trait d'union (lang de la page, ou lang posé sur la marque)… */
  overflow-wrap: anywhere; /* …et en dernier recours n'importe où : jamais de débordement */
  text-wrap: balance;
}
/* Logo à la place du texte (img ou svg) : hauteur d'une ligne de marque */
[data-fx="preloader-split-panels-open"] [data-fx-brand] :is(img, svg) {
  display: block;
  width: auto;
  max-width: 100%;
  height: 1.2em;
}
/* Point d'accent : pastille dessinée (couleur, taille et forme réglables), collée à la fin du nom */
[data-fx="preloader-split-panels-open"] [data-fx-dot] {
  display: inline-block;
  width: var(--fx-pl-dot);
  height: var(--fx-pl-dot);
  margin-inline-start: 0.06em;
  border-radius: 50%;
  background: var(--fx-pl-accent);
  vertical-align: baseline;
}

/* will-change uniquement pendant la séquence */
[data-fx="preloader-split-panels-open"][data-fx-state="playing"] [data-fx-panel] {
  will-change: transform;
}

[data-fx="preloader-split-panels-open"] :focus-visible {
  outline: 2px solid var(--fx-focus, currentColor);
  outline-offset: 3px;
}

@media (max-width: 767px) {
  /* Téléphone : pas de couche composée réservée (deux transforms par frame suffisent) */
  [data-fx="preloader-split-panels-open"][data-fx-state="playing"] [data-fx-panel],
  [data-fx="preloader-split-panels-open"] * { will-change: auto; }
  [data-fx="preloader-split-panels-open"] { --fx-pl-dot: 0.22em; }
}

/* Mouvement réduit : le préchargeur n'existe pas, le hero s'affiche directement */
@media (prefers-reduced-motion: reduce) {
  [data-fx="preloader-split-panels-open"] { display: none !important; }
}