/* ==========================================================================
   Échappée Studio — variante « Maison » (v2) : mouvements.
   Tout est conditionné à html.fx (posée par boot.js, absente si l'utilisateur
   a demandé moins de mouvement). Sans JavaScript, la page est complète.
   Règle : aucun texte ne bouge au survol.
   ========================================================================== */

:root {
  --fx-out: cubic-bezier(0.16, 1, 0.3, 1);
  --fx-io: cubic-bezier(0.65, 0, 0.35, 1);
}

/* --- Ouverture (première page de la session) : le symbole se pose ----------- */
/* (top/right/bottom/left plutôt que « inset » : compris aussi par Safari < 14.1) */
html.fx-intro:not(.fx-ready) body::before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 199;
  background: #F5F3ED;
}
html.fx-intro.fx-loaded body::before { display: none; }

.mx-loader {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: #F5F3ED;
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.1s var(--fx-io);
}
.mx-loader.is-out { clip-path: inset(0 0 100% 0); }
.mx-loader__mark { display: grid; justify-items: center; gap: 28px; }
.mx-loader svg { width: 84px; overflow: visible; }
.mx-loader path {
  fill: #171717;
  opacity: 0;
  transform: translateX(-28px);
  transition: transform 1s var(--fx-out), opacity 0.6s ease;
}
.mx-loader path:first-child { fill: #2457FF; transition-delay: 0.3s; }
.mx-loader path:nth-child(2) { transition-delay: 0.15s; }
.mx-loader.is-play path { opacity: 1; transform: none; }
.mx-loader__name {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #171717;
  opacity: 0;
  transition: opacity 0.8s ease 0.5s;
}
.mx-loader.is-play .mx-loader__name { opacity: 1; }

/* --- Hero ----------------------------------------------------------------------- */
html.fx .mx-hero__title .mx-line > span {
  transform: translateY(105%);
  transition: transform 1.5s var(--fx-out);
}
html.fx .mx-hero__title .mx-line:nth-child(2) > span { transition-delay: 0.12s; }
/* 0.01 et non 0 : invisible à l'œil, mais le navigateur compte ces textes comme
   affichés dès le chargement (mesure « LCP » de Google, sinon retardée de 2 s) */
html.fx .mx-over,
html.fx .mx-hero__lead,
html.fx .mx-actions,
html.fx .mx-hero__base {
  opacity: 0.01;
  transition: opacity 1.3s ease;
}
html.fx .mx-hero__lead { transition-delay: 0.35s; }
html.fx .mx-actions { transition-delay: 0.5s; }
html.fx .mx-hero__base { transition-delay: 0.8s; }
html.fx.mx-go .mx-hero__title .mx-line > span { transform: none; }
html.fx.mx-go .mx-over,
html.fx.mx-go .mx-hero__lead,
html.fx.mx-go .mx-actions,
html.fx.mx-go .mx-hero__base { opacity: 1; }

/* invitation à défiler : un trait descend lentement dans son filet */
html.fx .mx-scroll__line::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 45%;
  background: var(--mx-ink);
  animation: mx-scroll 2.6s var(--fx-io) infinite;
}
@keyframes mx-scroll {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(230%); }
}

/* --- Titres : les lignes montent derrière leur masque ------------------------ */
.mx-w {
  display: inline-block;
  overflow: hidden;
  padding: 0 0.04em 0.14em;
  margin: 0 -0.04em -0.14em;
  vertical-align: top;
}
.mx-w__in { display: inline-block; }
html.fx .mx-split-on .mx-w__in {
  transform: translateY(110%);
  transition: transform 1.2s var(--fx-out);
  transition-delay: var(--d, 0s);
}
html.fx .mx-split-on.is-in .mx-w__in { transform: none; }
/* copie du texte réservée aux lecteurs d'écran : exclue du copier-coller (sinon le
   texte copié serait en double) */
.mx-split-on > .visually-hidden,
[data-mx-fill] > .visually-hidden { -webkit-user-select: none; user-select: none; }

/* --- Manifeste : les mots s'éclairent au fil du défilement ------------------- */
html.fx .mx-fw { opacity: 0.22; transition: opacity 0.35s ease; }
html.fx .mx-fw.is-lit { opacity: 1; }

/* --- Filets qui se tracent ------------------------------------------------- */
html.fx .mx-draw { position: relative; border-top-color: transparent; }
html.fx .mx-draw::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: var(--mx-hair);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.4s var(--fx-io);
}
html.fx .mx-draw.is-in::before { transform: scaleX(1); }
html.fx .mx-who__list.mx-draw::before { transform-origin: center; }

/* --- Apparitions douces ------------------------------------------------------ */
html.fx .mx-fade {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.1s ease, transform 1.3s var(--fx-out);
  transition-delay: var(--d, 0s);
}
html.fx .mx-fade.is-in { opacity: 1; transform: none; }
/* un lien atteint au clavier se montre aussitôt, sans attendre son apparition */
html.fx .mx-fade:focus-within {
  opacity: 1;
  transform: none;
  transition-delay: 0s;
  transition-duration: 0.15s;
}

/* --- Vignettes : rideau qui se lève, image qui se pose ----------------------- */
html.fx .mx-vignette {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.4s var(--fx-io);
}
html.fx .mx-vignette .mx-vignette__in { transform: scale(1.14); }
html.fx .mx-vignette.is-in { clip-path: inset(0 0 0 0); }
html.fx .mx-vignette.is-in .mx-vignette__in { transform: none; }
@media (hover: hover) and (pointer: fine) {
  html.fx .mx-craft__item:hover .mx-vignette.is-in .mx-vignette__in { transform: scale(1.025); }
}

/* --- En-tête : s'efface en descendant, revient en remontant ------------------ */
html.fx .site-header { transition: transform 0.7s var(--fx-io); }
html.fx .site-header.is-hidden { transform: translateY(-101%); }
/* menu ouvert : l'en-tête (et le menu qu'il contient) reste toujours à l'écran */
html.fx .site-header.is-open { transform: none; }

/* --- Le grand aplat bleu s'ouvre en entrant dans l'écran -------------------- */
html.fx .mx-saas { clip-path: inset(var(--mx-inset, 0px) var(--mx-inset, 0px) 0 var(--mx-inset, 0px)); }

/* --- Pied de page en rideau : la page glisse et découvre le pied ------------ */
html.mx-curtain main { position: relative; z-index: 1; background: var(--c-ivory); }
html.mx-curtain .mx-footer { position: sticky; bottom: 0; z-index: 0; }
html.fx .mx-footer__logo .es-logo {
  transform: translate3d(0, calc(var(--mx-lp, 0) * 55%), 0);
}

/* --- Changement de page ------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: mx-vt-out 0.5s var(--fx-io) both; }
  ::view-transition-new(root) { animation: mx-vt-in 0.8s var(--fx-out) both; }
}
@keyframes mx-vt-out { to { opacity: 0; } }
@keyframes mx-vt-in { from { opacity: 0; transform: translateY(24px); } }

/* --- Filet de sécurité : si anim.js ne démarre pas --------------------------- */
html.fx-ready .mx-hero__title .mx-line > span,
html.fx-ready .mx-split-on .mx-w__in,
html.fx-ready .mx-fade,
html.fx-ready .mx-vignette .mx-vignette__in { transform: none; opacity: 1; }
html.fx-ready .mx-over,
html.fx-ready .mx-hero__lead,
html.fx-ready .mx-actions,
html.fx-ready .mx-hero__base,
html.fx-ready .mx-fw { opacity: 1; }
html.fx-ready .mx-vignette { clip-path: none; }
html.fx-ready .mx-draw::before { transform: scaleX(1); }

/* --- Impression et « Enregistrer en PDF » : tout le contenu, tout de suite ----
   Ce qui n'est pas encore apparu à l'écran (plus bas que le défilement) doit
   quand même s'imprimer ; aucune transition ne doit figer un état intermédiaire. */
@media print {
  html.fx *,
  html.fx *::before,
  html.fx *::after { transition: none !important; animation: none !important; }
  html.fx-intro body::before,
  .mx-loader { display: none !important; }
  html.fx .mx-hero__title .mx-line > span,
  html.fx .mx-split-on .mx-w__in,
  html.fx .mx-fade,
  html.fx .mx-vignette .mx-vignette__in,
  html.fx .mx-draw::before,
  html.fx .mx-footer__logo .es-logo,
  html.fx .site-header { transform: none !important; }
  html.fx .mx-over,
  html.fx .mx-hero__lead,
  html.fx .mx-actions,
  html.fx .mx-hero__base,
  html.fx .mx-fade,
  html.fx .mx-fw { opacity: 1 !important; }
  html.fx .mx-vignette,
  html.fx .mx-saas { clip-path: none !important; }
}

/* --- Mode allégé (appareil lent, économie de données) -------------------------
   anim.js coupe les effets continus ; ici, les changements de page deviennent
   instantanés. */
html.fx-lite::view-transition-old(root),
html.fx-lite::view-transition-new(root) { animation: none; }