/* Moteur d'apparition et de mouvement.
   ------------------------------------------------------------------
   Une seule mécanique pour tout le site : un élément marqué [data-reveal]
   démarre légèrement décalé et flou de rien du tout, puis se pose. Les
   enfants d'un même groupe se décalent de quelques centièmes pour que
   l'ensemble arrive « en vague » plutôt que d'un bloc.

   Les distances restent volontairement courtes (14 px) : le mouvement doit
   se sentir sans se voir. */

[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  filter: blur(4px);
  transition:
    opacity var(--dur-3) var(--ease-sortie) var(--reveal-delay, 0s),
    transform var(--dur-3) var(--ease-sortie) var(--reveal-delay, 0s),
    filter var(--dur-3) var(--ease-sortie) var(--reveal-delay, 0s),
    clip-path var(--dur-3) var(--ease-sortie) var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: none;
  will-change: auto;
}

/* Variantes : le titre se dévoile par un volet, l'image par un fondu
   d'échelle, la ligne par un trait qui se tire. */
[data-reveal="volet"] {
  clip-path: inset(0 0 102% 0);
  transform: none;
}
[data-reveal="volet"].is-in { clip-path: inset(0 0 -12% 0); }

[data-reveal="cadre"] { transform: translate3d(0, 20px, 0) scale(1.02); }
[data-reveal="cadre"].is-in { transform: none; }

[data-reveal="cote"] { transform: translate3d(-16px, 0, 0); }
[data-reveal="cote"].is-in { transform: none; }

[data-reveal="trait"] {
  opacity: 1;
  transform: scaleX(0);
  transform-origin: left;
}
[data-reveal="trait"].is-in { transform: scaleX(1); }

.no-js [data-reveal] { opacity: 1; transform: none; clip-path: none; filter: none; }

/* L'intro d'un titre de section arrive un souffle après lui. */
.section-tete[data-reveal] .section-intro {
  opacity: 0;
  translate: 0 10px;
  transition: opacity var(--dur-3) var(--ease-sortie) 0.14s, translate var(--dur-3) var(--ease-sortie) 0.14s;
}
.section-tete[data-reveal].is-in .section-intro,
.no-js .section-tete .section-intro { opacity: 1; translate: none; }

/* ------------------------------------------------------------ arrivée
   Au chargement, dès que le voile s'efface, les premiers éléments de la
   page se posent l'un après l'autre : ils montent de quelques pixels et
   passent du flou au net, à 90 ms d'écart — pas un simple fondu, pas un
   bloc qui tombe d'un coup. js/arrivee.js pose puis retire les classes.
   `translate` et `scale` plutôt que `transform` : ils s'ajoutent aux
   transformations propres des éléments au lieu de les remplacer. */
.arrivee-prete [data-arrivee] {
  opacity: 0;
  translate: 0 18px;
  filter: blur(6px);
}
.arrivee-prete .hero-scene[data-arrivee] { translate: none; scale: 1.035; filter: blur(10px); }
.arrivee-prete.est-arrive [data-arrivee] {
  opacity: 1;
  translate: none;
  scale: none;
  filter: none;
  transition:
    opacity 0.8s var(--ease-sortie) var(--arrivee-delai, 0ms),
    translate 1.1s var(--ease-elan) var(--arrivee-delai, 0ms),
    scale 1.4s var(--ease-elan) var(--arrivee-delai, 0ms),
    filter 0.8s var(--ease-sortie) var(--arrivee-delai, 0ms);
}
[data-arrivee="1"] { --arrivee-delai: 90ms; }
[data-arrivee="2"] { --arrivee-delai: 180ms; }
[data-arrivee="3"] { --arrivee-delai: 270ms; }
[data-arrivee="4"] { --arrivee-delai: 360ms; }
[data-arrivee="5"] { --arrivee-delai: 450ms; }
[data-arrivee="6"] { --arrivee-delai: 540ms; }
[data-arrivee="7"] { --arrivee-delai: 630ms; }

/* Parallaxe : js/motion.js écrit --shift, le CSS l'applique. Séparer les
   deux permet de composer avec d'autres transformations sans conflit. */
[data-parallax] {
  transform: translate3d(0, var(--shift, 0px), 0);
  will-change: transform;
}

/* Suivi du curseur : profondeur de quelques pixels seulement. */
[data-curseur] {
  transform: translate3d(
    calc(var(--mx) * var(--curseur-x, 6px)),
    calc(var(--my) * var(--curseur-y, 6px)),
    0
  );
  transition: transform 0.9s var(--ease-sortie);
}

/* Survol standard des blocs cliquables : ils avancent d'un cheveu. */
.leve {
  transition:
    transform var(--dur-2) var(--ease-sortie),
    box-shadow var(--dur-2) var(--ease-sortie),
    border-color var(--dur-2) var(--ease-sortie),
    background-color var(--dur-2) var(--ease-sortie);
}
.leve:hover { transform: translateY(-3px); }

/* Micro-interactions — ce qu'on presse s'enfonce d'un cheveu, ce qu'on
   survole s'avance à peine. `scale` et `translate` s'ajoutent aux
   transformations existantes au lieu de les écraser. */
.porte, .hub-carte, .entete-formules a, .vitrine-fenetre, .faq-question, .entete-inclus li {
  transition-property: background-color, color, opacity, box-shadow, transform, scale, translate;
}
.porte:active, .hub-carte:active, .entete-formules a:active { scale: 0.985; }
.vitrine:active .vitrine-fenetre { scale: 0.97; }
.entete-formules a:hover { translate: 0 -2px; }
.faq-question > span:first-child { transition: translate var(--dur-2) var(--ease-elan); }
.faq-question:hover > span:first-child { translate: 4px 0; }
.entete-inclus li { transition: translate var(--dur-2) var(--ease-elan); }
.entete-inclus li:hover { translate: 4px 0; }

/* Bug numérique (js/glitch.js) : pendant que le texte se brouille, un
   léger dédoublement orange et bleu, comme un signal qui décroche. */
.est-glitch { text-shadow: 1px 0 rgb(255 80 0 / 0.55), -1px 0 rgb(47 92 224 / 0.55); }

/* Compteurs : le chiffre monte, l'unité reste fixe. */
.chiffre-valeur { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; clip-path: none; filter: none; }
  [data-parallax], [data-curseur] { transform: none; }
}