/* @nextia/web 1.2.0 — source : bethel-design-system/web. Copie : ne pas modifier ici. */
/* Charte de mouvement Next-IA (motifs/mouvement.md) : trois effets seulement — révélation, retour d'interaction,
   constellation (motif de famille, voir motifs/constellation.md). N'animer que transform et opacity.
   Aucun style en ligne requis : compatible avec une CSP stricte. */

:root {
  --mv-rapide: 150ms;   /* focus, appui */
  --mv-normal: 300ms;   /* survols */
  --mv-lent: 520ms;     /* révélation au défilement */
  --mv-sortie: cubic-bezier(.2, .75, .25, 1);
  --mv-distance: 18px;  /* décalage vertical de la révélation */
  --mv-zoom: 1.04;      /* zoom interne des cartes et photos */
}

/* 1. Révélation au défilement.
   Le contenu n'est masqué que si motion.js a posé .mv-actif : sans JavaScript, tout reste lisible. */
@media (prefers-reduced-motion: no-preference) {
  .mv-actif [data-mv] {
    opacity: 0;
    transform: translateY(var(--mv-distance));
    transition: opacity var(--mv-lent) ease, transform var(--mv-lent) var(--mv-sortie);
    transition-delay: var(--mv-delai, 0ms);
  }
  .mv-actif [data-mv].mv-vu { opacity: 1; transform: none; }

  /* Hero au chargement : animation CSS pure, sans attendre le JavaScript (le texte principal reste le plus
     grand élément visible : pas de retard de LCP). Le bouton d'action est le dernier de la cascade. */
  .mv-hero > * { animation: mv-monte var(--mv-lent) var(--mv-sortie) both; }
  .mv-hero > :nth-child(2) { animation-delay: 80ms; }
  .mv-hero > :nth-child(3) { animation-delay: 160ms; }
  .mv-hero > :nth-child(4) { animation-delay: 240ms; }
  .mv-hero > :nth-child(n+5) { animation-delay: 320ms; }
  @keyframes mv-monte { from { opacity: 0; transform: translateY(var(--mv-distance)); } }
}

/* 2. Retour d'interaction : survol (appareils qui survolent seulement) et clavier. */
.mv-lien { position: relative; }
.mv-lien::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--mv-normal) ease-out;
}
.mv-lien:focus-visible::after, .mv-lien[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) { .mv-lien:hover::after { transform: scaleX(1); } }

.mv-carte { overflow: hidden; }
.mv-carte img { transition: transform var(--mv-normal) ease-out; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .mv-carte:hover img { transform: scale(var(--mv-zoom)); }
}

/* Appel à l'action : la flèche glisse au survol, le bouton s'enfonce à l'appui. */
.mv-cta .mv-fleche { display: inline-block; transition: transform var(--mv-normal) ease-out; }
@media (prefers-reduced-motion: no-preference) {
  .mv-cta:focus-visible .mv-fleche { transform: translateX(4px); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .mv-cta:hover .mv-fleche { transform: translateX(4px); }
}
.mv-cta:active { transform: translateY(1px); transition: transform var(--mv-rapide) ease; }

/* Sous « réduire les animations » : aucun mouvement, la lecture reste immédiate. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}