/* =========================================================
   Finition Codex — sobre, réversible et fluide
   Cette feuille additive reste volontairement étroite : elle
   corrige les quatre points signalés sans redessiner le site.
   ========================================================= */

/* Le menu garde chaque secteur sur une seule ligne et respire mieux. */
.menu-ov {
  grid-template-columns: minmax(0, 1.55fr) minmax(18rem, .65fr);
  column-gap: clamp(3rem, 8vw, 8rem);
  padding-block: clamp(4.5rem, 10vh, 7rem);
}

.menu-ov__links {
  gap: clamp(.35rem, 1vh, .8rem);
  min-width: 0;
}

.menu-ov__links a {
  max-width: 100%;
  font-size: clamp(2rem, 4.25vw, 3.65rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.menu-ov__links a::before {
  top: .72em;
  font-size: .68rem;
}

/* Hiérarchie plus calme pour la préparation. */
#preparation .section__title {
  font-size: clamp(2.8rem, 6.2vw, 5.7rem);
}

.hk__serment {
  max-width: 43rem;
  font-size: clamp(1.25rem, 2vw, 1.72rem);
  line-height: 1.36;
  text-wrap: pretty;
}

/* Révélations des éléments injectés après le chargement de main.js. */
@media (prefers-reduced-motion: no-preference) {
  .codex-reveal {
    opacity: 0;
    transform: translate3d(2.4rem, 0, 0);
    filter: blur(3px);
    transition:
      opacity .64s cubic-bezier(.16, 1, .3, 1),
      transform .78s cubic-bezier(.16, 1, .3, 1),
      filter .58s ease;
    transition-delay: var(--codex-delay, 0ms);
  }

  html[data-scroll-dir="up"] .codex-reveal:not(.is-codex-visible) {
    transform: translate3d(-2.4rem, 0, 0);
  }

  .codex-reveal.is-codex-visible {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* Les offres restent des colonnes éditoriales stables. Le focus ou
   l'ouverture d'un détail ne doit plus provoquer un saut de 86 svh. */
#tarifs .pricing .ptier,
#tarifs .pricing .ptier:hover,
#tarifs .pricing .ptier:focus-within,
#tarifs .pricing .ptier.is-expanded,
#tarifs .pricing .ptier.is-formed,
#tarifs .pricing .ptier.is-analysis-active,
#tarifs .pricing .ptier.is-analysis-revealed {
  width: min(92vw, 1180px);
  min-height: clamp(20rem, 44svh, 29rem) !important;
  padding-block: clamp(2rem, 5vh, 3.75rem) !important;
  transform-style: flat;
}

#tarifs .ptier.is-expanded,
#tarifs .ptier:focus-within {
  transform: none !important;
}

#tarifs .ptier__detail {
  filter: none !important;
  transition: opacity .28s ease !important;
}

#tarifs .ptier.is-expanded .ptier__detail {
  max-height: 18rem;
}

#tarifs .ptier.is-expanded .ptier__price {
  transform: none;
}

#tarifs.tariff-motion-ready .pricing .ptier,
#tarifs.tariff-motion-ready .pricing .ptier.is-analysis-active,
#tarifs.tariff-motion-ready .pricing .ptier.is-analysis-revealed {
  transition: opacity .46s ease, transform .72s cubic-bezier(.16, 1, .3, 1) !important;
  filter: none !important;
  clip-path: none !important;
}

#tarifs.tariff-motion-ready .pricing .ptier:nth-child(odd):not(.is-analysis-active) {
  opacity: 0 !important;
  transform: translate3d(-2.5rem, 2.5rem, 0) !important;
}

#tarifs.tariff-motion-ready .pricing .ptier:nth-child(even):not(.is-analysis-active) {
  opacity: 0 !important;
  transform: translate3d(2.5rem, 2.5rem, 0) !important;
}

html[data-scroll-dir="up"] #tarifs.tariff-motion-ready .pricing .ptier:nth-child(odd):not(.is-analysis-active) {
  transform: translate3d(-2.5rem, -2.5rem, 0) !important;
}

html[data-scroll-dir="up"] #tarifs.tariff-motion-ready .pricing .ptier:nth-child(even):not(.is-analysis-active) {
  transform: translate3d(2.5rem, -2.5rem, 0) !important;
}

/* Lecture détaillée : une page fondue, sans carte ni ascenseur interne.
   La couche plein écran défile elle-même ; sa barre est masquée, tout en
   conservant molette, clavier et geste tactile. */
.zg-lecture {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y pinch-zoom;
  -webkit-overflow-scrolling: touch;
  /* IMPÉRATIF : PAS de `scroll-behavior: smooth` ici. Combiné au
     défilement tactile manuel (scrollTop += delta à chaque doigt), il
     animait chaque incrément et bloquait le défilement — impossible de
     descendre. En `auto`, le doigt suit et le bas est atteignable. */
  scroll-behavior: auto;
  isolation: isolate;
  padding: 0 !important;
  scrollbar-width: none;
}

.zg-lecture::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.zg-lecture__voile {
  position: fixed;
}

.zg-lecture__plan {
  width: min(100%, 64rem) !important;
  min-height: 100svh;
  max-height: none !important;
  margin: 0 auto;
  overflow: visible !important;
  overscroll-behavior: auto;
  opacity: 1;
  transform: none !important;
  transition: none !important;
  padding: clamp(5rem, 10vh, 7.5rem) clamp(1.25rem, 5vw, 3rem) clamp(4rem, 10vh, 7rem) !important;
}

.zg-lecture__fermer {
  position: fixed;
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  z-index: 5;
}

/* Téléphone : bouton de fermeture nettement plus grand et lisible, posé
   sur une pastille contrastée — on le trouve et on le touche du pouce. */
@media (max-width: 760px) {
  .zg-lecture__fermer {
    top: max(.9rem, env(safe-area-inset-top, 0px));
    right: .9rem;
    width: 3rem;
    height: 3rem;
    font-size: 1.7rem;
    background: rgba(14, 15, 19, .82);
    border-color: rgba(238, 240, 244, .32);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
  }
}

/* Dans la lecture, les textes apparaissent au fil du vrai geste. */
@media (prefers-reduced-motion: no-preference) {
  .zg-lecture .codex-reading-reveal {
    opacity: 0;
    transform: translate3d(2rem, 1rem, 0);
    filter: blur(3px);
    transition:
      opacity .58s cubic-bezier(.16, 1, .3, 1),
      transform .72s cubic-bezier(.16, 1, .3, 1),
      filter .5s ease;
    transition-delay: var(--codex-delay, 0ms);
  }

  html[data-scroll-dir="up"] .zg-lecture .codex-reading-reveal:not(.is-codex-visible) {
    transform: translate3d(-2rem, -1rem, 0);
  }

  .zg-lecture .codex-reading-reveal.is-codex-visible {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* Téléphone : on retire le flou animé (très coûteux) et on adoucit le
   déplacement. L'apparition reste nette et fluide, sans à-coups. */
@media (prefers-reduced-motion: no-preference) and (max-width: 760px) {
  .zg-lecture .codex-reading-reveal {
    transform: translate3d(0, 1.1rem, 0);
    filter: none;
    transition:
      opacity .5s cubic-bezier(.16, 1, .3, 1),
      transform .55s cubic-bezier(.16, 1, .3, 1);
  }
  html[data-scroll-dir="up"] .zg-lecture .codex-reading-reveal:not(.is-codex-visible) {
    transform: translate3d(0, -1.1rem, 0);
  }
}

@media (max-width: 900px) {
  .menu-ov {
    grid-template-columns: 1fr;
    align-content: center;
    gap: clamp(2rem, 5vh, 3.5rem);
  }

  .menu-ov__links a {
    font-size: clamp(1.75rem, 6.4vw, 3rem);
  }

  .menu-ov__aside {
    align-self: auto;
  }

  #tarifs .pricing .ptier,
  #tarifs .pricing .ptier:hover,
  #tarifs .pricing .ptier:focus-within,
  #tarifs .pricing .ptier.is-expanded {
    min-height: 0 !important;
    padding-block: 2rem !important;
  }
}

@media (max-width: 540px) {
  .menu-ov {
    padding: 5rem .75rem 2rem 2.7rem;
  }

  .menu-ov__links {
    gap: .65rem;
  }

  .menu-ov__links a {
    font-size: clamp(1.1rem, 5.45vw, 1.7rem) !important;
    letter-spacing: -.03em !important;
  }

  .menu-ov__links a::before {
    left: -1.75rem;
    font-size: .56rem;
  }

  .menu-ov__aside {
    display: none;
  }

  #preparation .section__title {
    font-size: clamp(2.45rem, 14vw, 4rem);
  }

  .hk__serment {
    font-size: clamp(1.18rem, 5.8vw, 1.45rem);
  }

  .zg-lecture__plan {
    padding: 5.25rem 1.15rem 3.5rem !important;
  }

  .zg-lecture__corps {
    min-height: calc(100dvh + 1px);
  }
}

/* Poignée tactile dédiée : elle protège le geste vertical du canvas 3D. */
.mx-mobile-scroll-guide {
  display: none;
}

@media (max-width: 720px), (pointer: coarse) and (max-width: 1024px) {
  .mx-cockpit:not(.is-atelier) .mx-workspace {
    position: relative;
  }

  /* Poignée FINE et discrète : une simple barre verticale qu'on glisse. */
  .mx-mobile-scroll-guide {
    position: absolute;
    z-index: 18;
    top: 50%;
    right: max(.35rem, env(safe-area-inset-right));
    transform: translateY(-50%);
    width: .5rem;
    min-height: min(56%, 19rem);
    padding: 0;
    display: block;
    overflow: hidden;
    color: transparent;
    background: linear-gradient(rgba(238, 240, 244, .12),
                                rgba(238, 240, 244, .34),
                                rgba(238, 240, 244, .12));
    border: 0;
    border-radius: 999px;
    /* léger halo sombre pour rester visible sur la matrice claire */
    box-shadow: 0 0 0 4px rgba(16, 17, 22, .28);
    transform-origin: center;
    /* On gère nous-mêmes le glissement (défilement de la page) : le
       navigateur ne doit rien intercepter d'autre sur cette barre. */
    touch-action: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
  }

  .mx-mobile-scroll-guide:active { cursor: grabbing; }

  /* Zone tactile élargie et invisible : la barre reste fine à l'œil,
     mais on l'attrape facilement du pouce. */
  .mx-mobile-scroll-guide::before {
    content: "";
    position: absolute;
    top: -.5rem;
    bottom: -.5rem;
    left: -.7rem;
    right: -.7rem;
  }

  /* Plus de gros libellé. */
  .mx-mobile-scroll-guide span { display: none; }

  /* Petit repère lumineux qui descend : signale qu'on peut glisser. */
  .mx-mobile-scroll-guide i {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 32%;
    background: rgba(238, 240, 244, .9);
    border-radius: 999px;
    animation: mx-mobile-scroll-cue 1.8s cubic-bezier(.16, 1, .3, 1) infinite;
  }
}

@keyframes mx-mobile-scroll-cue {
  0%   { transform: translateY(-110%); }
  55%, 100% { transform: translateY(320%); }
}

@media (prefers-reduced-motion: reduce) {
  .codex-reveal,
  .zg-lecture .codex-reading-reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* Centrage fiable de l'expérience sur tous les écrans. Les anciennes
   animations ne doivent jamais déplacer le formulaire ou son canevas. */
#mx-entry .mx-entry__lead,
#mx-entry .mx-entry__copy,
#mx-entry .mx-entry__motion,
#mx-entry .mx-form {
  box-sizing: border-box;
  margin-inline: auto !important;
}

#mx-entry .mx-entry__copy,
#mx-entry .mx-entry__motion {
  justify-self: center !important;
  transform: none !important;
}

@media (min-width: 1025px) {
  #mx-entry .mx-entry__lead {
    width: min(calc(100vw - 5rem), 1240px) !important;
  }

  #mx-entry .mx-entry__copy {
    width: min(100%, 960px) !important;
    max-width: 960px !important;
  }

  #mx-entry .mx-form {
    width: 100% !important;
  }

  #mx-entry .mx-entry__motion {
    width: 100% !important;
    max-width: 1240px !important;
  }
}

@media (max-width: 1024px) {
  #mx-entry .mx-entry__lead,
  #mx-entry .mx-entry__copy,
  #mx-entry .mx-entry__motion,
  #mx-entry .mx-form {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Le titre du hero reste géométriquement centré, indépendamment du sens du
   scroll. L'animation demeure portée par les lettres, pas par le bloc. */
#hero .hero__inner,
#hero .hero__kicker,
#hero .hero__title,
#hero .hero__tagline,
#hero .hero__title .split-line {
  box-sizing: border-box !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  transform: none !important;
}

#hero .hero__inner,
#hero .hero__title,
#hero .hero__title .split-line {
  width: 100% !important;
  max-width: 100% !important;
}

#hero .hero__inner {
  left: auto !important;
  right: auto !important;
}

@media (max-width: 720px) {
  #hero .hero__inner {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* La phrase déplacée sous le hero appartient désormais au calculateur : elle
   doit conserver le même axe central que le titre et le formulaire. */
.mx-entry__copy .mx-entry-tagline {
  box-sizing: border-box !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  transform: none !important;
  translate: none !important;
}

@media (max-width: 720px) {
  .mx-entry__copy .mx-entry-tagline {
    width: calc(100% - 2rem) !important;
    max-width: calc(100% - 2rem) !important;
    padding-inline: 0 !important;
  }
}

/* =========================================================
   FLÈCHE DE DÉFILEMENT — repère « il reste du contenu »
   ========================================================= */
/* Juste un chevron fin, fondu dans le fond — aucune bulle, aucun cadre. */
.scroll-cue {
  position: fixed;
  /* au-dessus du panneau de lecture (z 90) pour servir aussi de repère
     de défilement à l'intérieur des lectures ouvertes. */
  z-index: 95;
  /* Isolée en bas à DROITE, dans le vide : ne chevauche jamais le texte. */
  right: max(.7rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(238, 240, 244, .5);
  cursor: pointer;
  opacity: .85;
  /* une ombre douce suffit à le détacher du fond, sans bulle */
  filter: drop-shadow(0 1px 5px rgba(0, 0, 0, .55));
  transition: opacity .35s ease, transform .45s cubic-bezier(.16, 1, .3, 1);
}

.scroll-cue svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: scroll-cue-bob 1.7s ease-in-out infinite;
}

.scroll-cue.is-up svg {
  animation: scroll-cue-bob-up 1.7s ease-in-out infinite;
}

/* Un peu plus lisible quand elle flotte au-dessus d'une lecture. */
.scroll-cue.is-over-reading {
  color: rgba(238, 240, 244, .66);
}

.scroll-cue.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
}

@keyframes scroll-cue-bob {
  0%, 100% { transform: translateY(-2px); }
  50%      { transform: translateY(3px); }
}
@keyframes scroll-cue-bob-up {
  0%, 100% { transform: translateY(2px) rotate(180deg); }
  50%      { transform: translateY(-3px) rotate(180deg); }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue svg { animation: none; }
  .scroll-cue.is-up svg { transform: rotate(180deg); }
}

/* Mise en avant brève de l'offre visée par « Voir les formules ». */
.ptier.is-formules-flash {
  animation: ptier-flash 2.2s ease-out 1;
}
@keyframes ptier-flash {
  0%   { box-shadow: 0 0 0 0 rgba(238, 240, 244, .0); }
  18%  { box-shadow: 0 0 0 2px rgba(238, 240, 244, .75), 0 18px 50px rgba(0, 0, 0, .35); }
  100% { box-shadow: 0 0 0 0 rgba(238, 240, 244, .0); }
}
@media (prefers-reduced-motion: reduce) {
  .ptier.is-formules-flash { animation: none; }
}