/* =========================================================
   Matrice Ultime 2 — ERGONOMIE DU RÉCIT
   Feuille additive chargée après respiration.css.

   Trois interfaces réellement distinctes :
     · Ordinateur  ≥ 1081 px : lecture à gauche/droite, matrice en vis-à-vis
     · Tablette    721–1080  : matrice en bandeau, lecture pleine largeur
     · Téléphone   ≤ 720 px  : mini-matrice fixe, lecture confortable dessous

   Aucune couleur ni police n'est modifiée ici.
   ========================================================= */

/* =========================================================
   1. ORDINATEUR — la lecture reprend le dessus
   ---------------------------------------------------------
   Avant : la matrice occupait 54 vw et débordait de 7 vw SUR
   la colonne de texte (les premières lettres de chaque ligne
   passaient derrière la scène). Le texte, lui, était à 16 px
   sous un titre de 96 px.
   Après : matrice 44 vw, texte ~50 % avec un vrai couloir de
   respiration entre les deux, et une échelle typographique
   rééquilibrée.
   ========================================================= */
@media (min-width: 1081px) {

  /* --- La scène recule et libère la colonne de lecture --- */
  .mx-zone-story__visual,
  .mx-zone-story.is-drawer-mode .mx-zone-story__visual {
    width: 33vw !important;
    height: 100svh !important;
    padding-block: 19svh !important;   /* la scène ne fait plus toute la hauteur */
    --scene-x: 3vw;
    --scene-tilt: 1.5deg;
  }

  .mx-zone-story[data-scene-side="right"] .mx-zone-story__visual,
  .mx-zone-story.is-drawer-mode[data-scene-side="right"] .mx-zone-story__visual {
    --scene-x: 64vw;
    --scene-tilt: -1.5deg;
  }

  /* Le basculement 3D de la scène ne doit plus mordre sur le texte. */
  .mx-zone-story[data-scene-side="left"] .mx-zone-story__scene,
  .mx-zone-story[data-scene-side="right"] .mx-zone-story__scene {
    transform: none;
  }

  /* Le cadre était volontairement 6 % plus grand que sa boîte :
     c'est ce qui rognait les bulles des extrémités. */
  .mx-zone-story__frame,
  .mx-zone-story__scene.is-ready .mx-zone-story__frame {
    inset: 0;
    width: 100%;
    height: 100%;
  }

  /* --- La colonne de lecture, avec son couloir de sécurité --- */
  /* La lecture occupe désormais 7 colonnes sur 12 — c'est elle le sujet. */
  .mx-zone-chapter:not([data-preview="missions"]) .mx-zone-chapter__copy,
  .mx-zone-chapter[data-scene-side="left"] .mx-zone-chapter__copy {
    grid-column: 6 / 13 !important;
    padding-left: clamp(1.5rem, 3vw, 3rem) !important;
    padding-right: clamp(1.5rem, 3vw, 3.5rem) !important;
  }

  .mx-zone-chapter[data-scene-side="right"] .mx-zone-chapter__copy {
    grid-column: 1 / 8 !important;
    padding-left: clamp(1.5rem, 3vw, 3.5rem) !important;
    padding-right: clamp(1.5rem, 3vw, 3rem) !important;
  }

  /* --- Échelle typographique : le texte redevient le sujet --- */
  .mx-zone-chapter__copy h3,
  .mx-zone-chapter[data-title-size="long"] .mx-zone-chapter__copy h3 {
    font-size: clamp(2.8rem, 3.8vw, 4.2rem) !important;
    line-height: .98 !important;
    margin-bottom: .2rem;
  }

  .mx-zone-chapter__copy > .mx-zone-chapter__summary {
    font-size: clamp(1.28rem, 1.6vw, 1.68rem) !important;
    line-height: 1.38 !important;
    margin-top: 1.1rem;
  }

  .mx-zone-chapter__copy > .mx-zone-chapter__long {
    font-size: clamp(1.14rem, 1.32vw, 1.4rem) !important;
    line-height: 1.72 !important;
    max-width: 66ch;
    margin-top: 1rem;
  }

  /* --- Le résultat : matrice centrée, invitation à portée ---
     La colonne de scène s'étalait sur toute la largeur restante,
     laissant un couloir mort entre la matrice et le texte. */
  .mx-cockpit:not(.is-atelier) .mx-workspace {
    width: min(100%, 1420px);
    justify-self: center;
    gap: clamp(1.5rem, 3vw, 3.5rem);
  }

  /* La carte du résultat ne doit pas remplir tout l'écran : elle reste
     le sujet, mais respire. */
  .mx-cockpit:not(.is-atelier) .mx-scene {
    width: min(100%, 820px);
    height: min(100%, 76svh);
    margin-inline: auto;
  }
}

/* =========================================================
   2. TABLETTE — 721 à 1080 px
   ---------------------------------------------------------
   Le vis-à-vis latéral est trop étroit à cette largeur : la
   matrice passe en bandeau haut et la lecture prend toute la
   largeur, sans jamais se recouvrir.
   ========================================================= */
@media (min-width: 721px) and (max-width: 1080px) {

  .mx-zone-story__visual,
  .mx-zone-story[data-scene-side="left"] .mx-zone-story__visual,
  .mx-zone-story[data-scene-side="right"] .mx-zone-story__visual,
  .mx-zone-story.is-drawer-mode .mx-zone-story__visual {
    top: 4.6rem !important;
    left: 50% !important;
    width: min(78vw, 620px) !important;
    height: clamp(280px, 36svh, 400px) !important;
    min-height: 0 !important;
    margin-bottom: calc(clamp(280px, 36svh, 400px) * -1) !important;
    padding: 0 !important;
    transform: translate3d(-50%, 0, 0) !important;
    --scene-x: 0;
    --scene-tilt: 0deg;
  }

  .mx-zone-story__scene {
    border-radius: 22px !important;
    overflow: hidden !important;
  }

  .mx-zone-story[data-scene-side="left"] .mx-zone-story__scene,
  .mx-zone-story[data-scene-side="right"] .mx-zone-story__scene {
    transform: none !important;
  }

  .mx-zone-story__frame,
  .mx-zone-story__scene.is-ready .mx-zone-story__frame {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .mx-zone-chapter,
  .mx-zone-chapter[data-preview="missions"] {
    padding: calc(4.6rem + clamp(280px, 36svh, 400px) + 1.4rem)
             clamp(1.6rem, 4vw, 3rem) 1.6rem !important;
    align-items: start !important;
  }

  .mx-zone-chapter:not([data-preview="missions"]) .mx-zone-chapter__copy,
  .mx-zone-chapter[data-scene-side="left"] .mx-zone-chapter__copy,
  .mx-zone-chapter[data-scene-side="right"] .mx-zone-chapter__copy {
    grid-column: 1 / -1 !important;
    width: 100%;
    max-width: 46rem;
    margin-inline: auto;
    padding: 0 !important;
    transform: none !important;
  }

  .mx-zone-chapter__copy h3,
  .mx-zone-chapter[data-title-size="long"] .mx-zone-chapter__copy h3 {
    font-size: clamp(2.3rem, 5.2vw, 3.2rem) !important;
    line-height: 1 !important;
  }

  .mx-zone-chapter__copy > .mx-zone-chapter__summary {
    font-size: 1.06rem !important;
    line-height: 1.44 !important;
  }

  .mx-zone-chapter__copy > .mx-zone-chapter__long {
    font-size: .95rem !important;
    line-height: 1.66 !important;
  }
}

/* =========================================================
   3. TÉLÉPHONE — ≤ 720 px
   ---------------------------------------------------------
   Mini-matrice complète en haut, lecture confortable dessous.
   Les tailles de 0,76 rem des définitions étaient à la limite
   du lisible : on remonte à une taille de lecture réelle.
   ========================================================= */
@media (max-width: 720px) {

  .mx-zone-story__visual,
  .mx-zone-story[data-scene-side="left"] .mx-zone-story__visual,
  .mx-zone-story[data-scene-side="right"] .mx-zone-story__visual,
  .mx-zone-story.is-drawer-mode .mx-zone-story__visual {
    top: 4.4rem !important;
    left: 50% !important;
    width: min(90vw, 440px) !important;
    height: clamp(230px, 32svh, 320px) !important;
    min-height: 0 !important;
    margin-bottom: calc(clamp(230px, 32svh, 320px) * -1) !important;
    padding: 0 !important;
    transform: translate3d(-50%, 0, 0) !important;
    --scene-x: 0;
    --scene-tilt: 0deg;
  }

  .mx-zone-story[data-scene-side="left"] .mx-zone-story__scene,
  .mx-zone-story[data-scene-side="right"] .mx-zone-story__scene {
    transform: none !important;
  }

  .mx-zone-story__frame,
  .mx-zone-story__scene.is-ready .mx-zone-story__frame {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .mx-zone-chapter,
  .mx-zone-chapter[data-preview="missions"] {
    padding: calc(4.4rem + clamp(230px, 32svh, 320px) + 1rem)
             1.15rem 1.3rem !important;
  }

  .mx-zone-chapter__copy h3,
  .mx-zone-chapter[data-title-size="long"] .mx-zone-chapter__copy h3 {
    font-size: clamp(1.95rem, 8.6vw, 2.5rem) !important;
    line-height: 1 !important;
  }

  .mx-zone-chapter__copy > .mx-zone-chapter__summary {
    font-size: .97rem !important;
    line-height: 1.44 !important;
    margin-top: .8rem;
  }

  .mx-zone-chapter__copy > .mx-zone-chapter__long {
    font-size: .88rem !important;
    line-height: 1.62 !important;
    margin-top: .6rem;
  }
}

/* =========================================================
   4. FIN DES ARTEFACTS
   ---------------------------------------------------------
   Le chapitre sortant restait lisible et décalé pendant que
   le suivant arrivait : on lisait deux textes superposés.
   Il s'efface maintenant vite, net, et sans se déplacer
   latéralement. Le mouvement d'arrivée, lui, est conservé.
   ========================================================= */
.mx-zone-story.is-drawer-mode .mx-zone-chapter.is-drawer-closing {
  animation-duration: .26s !important;
  animation-timing-function: cubic-bezier(.4, 0, 1, 1) !important;
  pointer-events: none !important;
}

.mx-zone-story.is-drawer-mode .mx-zone-chapter.is-drawer-closing,
.mx-zone-story.is-drawer-mode .mx-zone-chapter.is-drawer-closing * {
  /* plus aucun texte lisible en double pendant la transition */
  text-shadow: none !important;
}

.mx-zone-story.is-drawer-mode .mx-zone-chapter.is-drawer-closing .mx-zone-chapter__copy {
  opacity: 0 !important;
  transition: opacity .18s linear !important;
}

/* Le chapitre inactif ne doit rien laisser dépasser. */
.mx-zone-story.is-drawer-mode .mx-zone-chapter:not(.is-active):not(.is-drawer-closing) {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Le panneau d'arrivée était flouté à 18 px sur toute la surface :
   coûteux et responsable des à-coups. On garde le mouvement de
   profondeur, on allège le flou. */
@keyframes mx-drawer-open {
  0% {
    opacity: 0;
    filter: blur(9px) brightness(.8);
    transform: translate3d(0, var(--drawer-open-shift, 5%), -180px) scale(.86);
    clip-path: inset(30% 12% 30% 12% round 40px);
  }
  60% {
    opacity: 1;
    filter: blur(0) brightness(1);
    clip-path: inset(0 round 0);
  }
  100% {
    opacity: 1;
    filter: none;
    transform: translate3d(0, 0, 0) scale(1);
    clip-path: inset(0 round 0);
  }
}

/* `will-change` uniquement PENDANT la transition. Le laisser en
   permanence promeut douze calques plein écran en mémoire GPU et
   alourdit tout le défilement de la page. */
.mx-zone-story.is-drawer-mode .mx-zone-chapter.is-active,
.mx-zone-story.is-drawer-mode .mx-zone-chapter.is-drawer-opening,
.mx-zone-story.is-drawer-mode .mx-zone-chapter.is-drawer-closing {
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* Un chapitre hors champ ne doit rien coûter : ni flou, ni masque,
   ni transformation à recomposer. */
.mx-zone-story.is-drawer-mode .mx-zone-chapter:not(.is-active):not(.is-drawer-opening):not(.is-drawer-closing) {
  filter: none !important;
  clip-path: none !important;
  transform: none !important;
  will-change: auto;
}

/* =========================================================
   5. CRANTAGE
   ---------------------------------------------------------
   Jason veut « fluide mais cranté » : le passage doit être
   franc, pas mou. On raccourcit l'arrivée du panneau et on
   supprime la latence de la scène.
   ========================================================= */
.mx-zone-story.is-drawer-mode .mx-zone-chapter.is-drawer-opening {
  animation-duration: .52s !important;
}

.mx-zone-story__scene {
  transition: transform .5s cubic-bezier(.16, 1, .3, 1) !important;
}

.matrix-story-snapping .mx-zone-chapter__copy {
  transition-duration: .42s !important;
}

@media (prefers-reduced-motion: reduce) {
  .mx-zone-story.is-drawer-mode .mx-zone-chapter.is-drawer-opening,
  .mx-zone-story.is-drawer-mode .mx-zone-chapter.is-drawer-closing {
    animation: none !important;
  }
  .mx-zone-story.is-drawer-mode .mx-zone-chapter,
  .mx-zone-story.is-drawer-mode .mx-zone-story__visual,
  .mx-zone-story.is-drawer-mode .mx-zone-story__scene {
    will-change: auto;
  }
}

/* =========================================================
   6. L'INTERFACE DE L'OUTIL NE DOIT JAMAIS APPARAÎTRE
   ---------------------------------------------------------
   Le cadre du calculateur était forcé à `opacity: 1` avant
   même que le pont d'intégration ait masqué son panneau, sa
   barre du haut et ses commandes : pendant une fraction de
   seconde, tout l'outil 3D s'affichait par-dessus le récit.
   Le cadre reste maintenant invisible tant que la scène n'a
   pas signalé qu'elle est prête.
   ========================================================= */
.mx-zone-story__scene:not(.is-ready) .mx-zone-story__frame,
.mx-scene:not(.is-ready) .mx-frame {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.mx-zone-story__scene.is-ready .mx-zone-story__frame,
.mx-scene.is-ready .mx-frame {
  visibility: visible !important;
}

/* =========================================================
   7. LES OFFRES — plus aucun fantôme
   ---------------------------------------------------------
   Une offre hors champ était translatée de 18 vh tout en
   restant à `opacity: .04` : elle se superposait à sa voisine
   et laissait un texte fantôme lisible (visible sous le prix).
   Hors champ = totalement invisible.
   ========================================================= */
/* On ne masque PAS avec `visibility` : si l'observateur ne s'exécutait
   pas, l'offre resterait définitivement invisible. Opacité nulle et
   déplacement contenu suffisent — rien de lisible ne peut plus se
   superposer à l'offre voisine. */
#tarifs.tariff-motion-ready .ptier:not(.is-analysis-active) {
  opacity: 0 !important;
  /* Une offre invisible n'a aucune raison de coûter un flou de 11 px
     sur toute sa largeur : c'était la principale source de rame au
     défilement, ce flou étant recalculé en continu. */
  filter: none !important;
  clip-path: none !important;
  pointer-events: none !important;
}

/* On n'anime plus le flou : seuls l'opacité et la transformation
   bougent, ce que le compositeur sait faire sans recalcul. */
#tarifs.tariff-motion-ready .ptier,
#tarifs.tariff-motion-ready .ptier.is-analysis-active,
#tarifs.tariff-motion-ready .ptier.is-analysis-revealed {
  transition:
    opacity .5s ease,
    transform .8s cubic-bezier(.16, 1, .3, 1) !important;
  filter: none !important;
  clip-path: none !important;
}

#tarifs.tariff-motion-ready .ptier:nth-child(odd):not(.is-analysis-active) {
  transform: translate3d(-6vw, 7vh, -200px) rotateY(7deg) rotateX(4deg) !important;
}

#tarifs.tariff-motion-ready .ptier:nth-child(even):not(.is-analysis-active) {
  transform: translate3d(6vw, 7vh, -200px) rotateY(-7deg) rotateX(4deg) !important;
}

html[data-scroll-dir="up"] #tarifs.tariff-motion-ready .ptier:nth-child(odd):not(.is-analysis-active) {
  transform: translate3d(-6vw, -7vh, -200px) rotateY(7deg) rotateX(-4deg) !important;
}

html[data-scroll-dir="up"] #tarifs.tariff-motion-ready .ptier:nth-child(even):not(.is-analysis-active) {
  transform: translate3d(6vw, -7vh, -200px) rotateY(-7deg) rotateX(-4deg) !important;
}

/* « Matrice Globale » doit toujours tenir sur deux lignes entières :
   sur les fenêtres étroites, le titre débordait et se coupait
   en « MatriceGlob ». */
#tarifs .ptier__name--global {
  display: block;
}

#tarifs .ptier__name--global > span {
  display: block;
}

#tarifs .ptier__name,
#tarifs .ptier__name--global {
  max-width: 100%;
  overflow-wrap: break-word;
  hyphens: none;
}

@media (max-width: 900px) {
  #tarifs .ptier__name,
  #tarifs .ptier__name--global {
    font-size: clamp(2rem, 9vw, 3.2rem) !important;
    line-height: .96 !important;
  }
}

/* =========================================================
   7 bis. FLUIDITÉ DU DÉFILEMENT — la vraie cause
   ---------------------------------------------------------
   Le voile plein écran du menu restait `visible` avec un
   `backdrop-filter: blur(14px)` alors même que le menu était
   fermé. Un flou d'arrière-plan plein écran oblige le
   navigateur à ré-échantillonner et refloutter TOUTE la page
   à chaque image de défilement : c'est ce qui rendait le
   scroll lourd et saccadé sur ordinateur.
   ========================================================= */
.menu-ov:not(.is-open) {
  visibility: hidden;
  pointer-events: none;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transition: visibility 0s linear .45s, opacity .45s ease;
}

.menu-ov.is-open {
  visibility: visible;
  transition: visibility 0s linear 0s, opacity .45s ease;
}

/* Même principe pour la barre du cockpit : un flou d'arrière-plan
   sur un bandeau qui suit le défilement est recalculé en continu.
   Un fond dégradé donne le même effet de surface posée, sans coût. */
.mx-command {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: linear-gradient(180deg,
    rgba(21, 22, 27, .96) 0%,
    rgba(21, 22, 27, .88) 62%,
    rgba(21, 22, 27, 0) 100%) !important;
}

/* Les panneaux invisibles ne doivent rien flouter du tout. */
.mx-reading[aria-hidden="true"],
.mx-zone-story__bokeh i {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}

/* =========================================================
   8. MISSIONS DE VIE
   ---------------------------------------------------------
   Le dernier chapitre n'affiche pas de matrice : sa lecture
   doit occuper toute la largeur et rester dans le flux, sans
   réserver la place du visuel ni laisser son intitulé
   remonter derrière la navigation.
   ========================================================= */
.mx-zone-story[data-mission-mode="true"] .mx-zone-story__visual {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.mx-zone-chapter[data-preview="missions"] .mx-zone-chapter__copy {
  grid-column: 1 / -1 !important;
  width: min(100%, 62rem);
  margin-inline: auto;
  max-height: none !important;
}

@media (min-width: 1081px) {
  /* `align-items: center` faisait remonter le titre derrière la
     navigation dès que la lecture dépassait la hauteur disponible. */
  .mx-zone-chapter[data-preview="missions"] {
    padding-top: clamp(6.5rem, 13svh, 10rem) !important;
    padding-bottom: clamp(2.5rem, 6svh, 4.5rem) !important;
    align-items: start !important;
  }
}

@media (max-width: 1080px) {
  .mx-zone-chapter[data-preview="missions"] {
    padding-top: 5.6rem !important;
    padding-bottom: 1.6rem !important;
    align-items: start !important;
  }
  .mx-zone-chapter[data-preview="missions"] .mx-zone-chapter__copy {
    padding: 0 !important;
  }
}

/* =========================================================
   9. JONCTION VIDÉO → CALCULATEUR
   ---------------------------------------------------------
   La phrase d'introduction était posée 99 px sous la fin de
   la vidéo, ce qui ajoutait une plage noire à celle du
   dégradé du hero. Elle se place maintenant exactement à la
   jonction, la date immédiatement dessous.
   ========================================================= */
.mx-entry__lead,
body:not(.portal-active) .mx-entry__lead {
  padding-top: clamp(.9rem, 2.2vh, 1.6rem) !important;
}

.mx-calc-brand {
  margin-bottom: clamp(.7rem, 1.6vh, 1.1rem) !important;
}

body.portal-active .mx-entry-tagline {
  margin-bottom: clamp(.7rem, 1.6vh, 1.1rem) !important;
}

.mx-form {
  padding-top: 0 !important;
}

/* Le dégradé de fin de vidéo est raccourci : le noir n'occupe
   plus le dernier quart du hero. */
.hero__scrim {
  background: linear-gradient(180deg,
    rgba(10, 11, 14, .28) 0%,
    rgba(10, 11, 14, .12) 42%,
    rgba(21, 22, 27, .72) 82%,
    rgba(21, 22, 27, 1) 100%) !important;
}
/* =========================================================
   10. LE RÉCIT APPARAÎT D'UN SEUL BLOC
   ---------------------------------------------------------
   L'ancienne arrivée décalait le panneau latéralement pendant
   que la matrice, elle, restait plantée : on voyait le texte
   glisser tout seul par-dessus l'image. Désormais le chapitre
   entier surgit d'un coup, en profondeur, sans aucun
   déplacement latéral.
   ========================================================= */
@keyframes mx-drawer-open {
  0% {
    opacity: 0;
    filter: blur(6px);
    transform: translate3d(0, 0, -140px) scale(.94);
    clip-path: none;
  }
  100% {
    opacity: 1;
    filter: none;
    transform: none;
    clip-path: none;
  }
}

@keyframes mx-drawer-close {
  0% { opacity: 1; filter: none; transform: none; }
  100% { opacity: 0; filter: blur(5px); transform: translate3d(0, 0, -90px) scale(.97); }
}

/* Plus aucun décalage latéral, quel que soit le sens. */
.mx-zone-story.is-drawer-mode .mx-zone-chapter.is-drawer-opening,
.mx-zone-story.is-drawer-mode .mx-zone-chapter.is-drawer-closing,
.mx-zone-story.is-drawer-mode .mx-zone-chapter.is-drawer-backward {
  --drawer-open-shift: 0%;
  --drawer-close-shift: 0%;
}

.mx-zone-story.is-drawer-mode .mx-zone-chapter.is-drawer-opening {
  animation-duration: .42s !important;
}

.mx-zone-story.is-drawer-mode .mx-zone-chapter.is-drawer-closing {
  animation-duration: .2s !important;
}

/* La matrice ne bouge plus d'un chapitre à l'autre : elle reste
   à sa place et se contente de recadrer sa caméra. */
.mx-zone-story__visual,
.mx-zone-story.is-drawer-mode .mx-zone-story__visual {
  transition: opacity .35s ease !important;
}

.mx-zone-story__scene {
  transition: none !important;
}

/* Le texte et l'image forment un ensemble : même durée, même
   départ, aucun décalage de l'un par rapport à l'autre. */
.matrix-story-snapping .mx-zone-chapter__copy {
  transition-duration: .3s !important;
}

/* =========================================================
   11. PLUS D'ÉCRAN « Votre matrice 3D » APRÈS LE CALCUL
   ---------------------------------------------------------
   Le message d'attente restait affiché à côté du premier
   chapitre tant que la scène n'avait pas fini de charger.
   ========================================================= */
body.portal-active .mx-zone-story__placeholder,
body.portal-active .mx-story-placeholder {
  display: none !important;
}
/* =========================================================
   12. LA MATRICE SE DÉPLACE AVEC LE TEXTE
   ---------------------------------------------------------
   Le vrai défaut n'était pas l'alternance gauche/droite, mais
   le fait que la lecture glissait SEULE pendant que la matrice
   restait immobile : les deux se croisaient et se
   superposaient. Ils partagent désormais la même animation,
   la même durée et le même départ. L'ensemble bouge d'un bloc.
   ========================================================= */
.mx-zone-story.is-drawer-mode.is-step-transition .mx-zone-story__visual {
  animation: mx-visuel-suit .46s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes mx-visuel-suit {
  0% {
    opacity: 0;
    transform:
      translate3d(var(--scene-x), 0, -150px)
      rotateY(var(--scene-tilt))
      scale(.93);
  }
  100% {
    opacity: 1;
    transform:
      translate3d(var(--scene-x), 0, 0)
      rotateY(var(--scene-tilt))
      scale(1);
  }
}

/* Même durée pour le chapitre : rien ne part avant l'autre. */
.mx-zone-story.is-drawer-mode .mx-zone-chapter.is-drawer-opening {
  animation-duration: .46s !important;
}

/* Le déplacement latéral revient — mais il emporte tout. */
.mx-zone-story.is-drawer-mode .mx-zone-chapter.is-drawer-opening {
  --drawer-open-shift: 0%;
}

@keyframes mx-drawer-open {
  0% {
    opacity: 0;
    filter: blur(7px);
    transform: translate3d(0, 0, -150px) scale(.93);
  }
  100% {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mx-zone-story.is-drawer-mode.is-step-transition .mx-zone-story__visual {
    animation: none !important;
  }
}

/* Le placeholder reste masqué dès qu'une matrice existe. */
body.portal-active .mx-zone-story__placeholder,
body.portal-active .mx-story-placeholder {
  display: none !important;
}