/* Couche d'animations d'accompagnement (écrite à la main, non générée).
   Tout passe par les propriétés `translate`, `scale` et `opacity` pour ne jamais
   entrer en conflit avec les `transform` pilotés par app.js. */
:root { --ease-out: cubic-bezier(.2, .7, .2, 1); }

/* Révélation au scroll : guide l'ordre de lecture, une seule fois par élément. */
.motion .rv { opacity: 0; translate: 0 18px; transition: opacity .9s var(--ease-out), translate .9s var(--ease-out); transition-delay: var(--d, 0ms); }
.motion .rv.in { opacity: 1; translate: 0 0; }

/* Défilement fluide (Lenis) : il remplace le scroll-behavior natif. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* Cartes empilées sur mobile : la carte recouverte s'assombrit légèrement. */
[data-card].stack-m { filter: brightness(var(--dim, 1)); transform-origin: 50% 0; }

/* Pastille du titre : elle émet le même signal que la balise du logo. */
.hero-glyph { position: relative; }
.hero-glyph::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  border: max(1.5px, .03em) solid #7A6470; opacity: 0;
}
.motion .hero-glyph::after { animation: wm-signal 3.6s cubic-bezier(.2, .6, .3, 1) 1.6s infinite; }

/* Entrée du titre en CSS (aucun clignotement au chargement, même si le JS tarde) :
   les deux lignes montent, puis la pastille éclot avec un léger rebond. */
@media (prefers-reduced-motion: no-preference) {
  .js #accueil h1 > span { animation: hero-rise 1s cubic-bezier(.2, .7, .2, 1) backwards; }
  .js #accueil h1 > span:nth-child(2) { animation-delay: .11s; }
  .js #accueil h1 > span:last-child > span:last-child { animation: hero-pop .9s cubic-bezier(.3, 1.5, .5, 1) .55s backwards; }
}
@keyframes hero-rise { from { opacity: 0; transform: translateY(26px); } }
@keyframes hero-pop { from { opacity: 0; transform: scale(0) rotate(-120deg); } }

/* Lumière douce qui suit le curseur sur les grands panneaux. */
.spot { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s var(--ease-out);
  background: radial-gradient(circle var(--r, 440px) at var(--mx, 50%) var(--my, 50%), var(--c), transparent 70%); }
.spot.on { opacity: 1; }

/* Services : petite pastille qui accompagne le curseur au lieu d'un grand disque
   centré dessus. Décalée en haut à droite pour ne jamais masquer le nom du service. */
[data-follow] > div {
  width: 44px !important; height: 44px !important; left: -22px !important; top: -22px !important;
  box-shadow: 0 8px 20px -10px rgba(34, 33, 33, .45), inset 0 0 0 1px rgba(34, 33, 33, .06);
  transition: transform .5s cubic-bezier(.2, .9, .25, 1.15), background-color .35s ease !important;
}
[data-follow] > div > svg { left: 29% !important; top: 29% !important; width: 42% !important; height: 42% !important; transition: opacity .25s ease !important; }
/* Position lissée par motion.js (propriété `translate`) ; le placement brut du design est neutralisé. */
.motion [data-follow] { transform: none !important; transition: none !important; will-change: translate; }

/* Les liens texte indiquent qu'ils sont cliquables. */
.ulink { align-self: flex-start; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .35s var(--ease-out); }
.ulink:hover { background-size: 100% 1px; }

/* Le champ actif est mis en évidence par son libellé. */
#contact label > span:first-child { transition: color .25s var(--ease-out); }
#contact label:focus-within > span:first-child { color: #F3F2EF !important; }

@media (prefers-reduced-motion: no-preference) {
  /* La flèche annonce la direction de l'action. */
  .arrow-ico { transition: translate .35s var(--ease-out); }
  .has-arrow:hover .arrow-ico, .has-arrow:active .arrow-ico { translate: var(--nx, 3px) var(--ny, 0); }
  /* Retour tactile au clic. */
  .has-arrow { transition: scale .2s var(--ease-out); }
  .has-arrow:active { scale: .97; }
  /* La question survolée se détache légèrement. */
  .faq-q > span:nth-child(2) { transition: translate .4s var(--ease-out); }
  .faq-q:hover > span:nth-child(2) { translate: 4px 0; }
}