/* ==========================================================================
   DS-Consulting — animations
   Chargé après style.css : gère toutes les animations du site (apparitions
   au scroll, transitions du hero, micro-interactions). Respecte
   prefers-reduced-motion (voir la règle globale dans style.css).
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(.16, .84, .44, 1);
}

/* ==========================================================================
   Apparition au scroll (ajoutée dynamiquement par js/animations.js)
   Utilise `translate` (et non `transform`) pour ne jamais entrer en conflit
   avec les transitions transform existantes (hover des cartes, etc.).
   ========================================================================== */
.js-reveal {
  opacity: 0;
  translate: 0 28px;
  transition:
    opacity .7s var(--ease-out) var(--reveal-delay, 0s),
    translate .7s var(--ease-out) var(--reveal-delay, 0s),
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease,
    background .2s ease;
}
.js-reveal.is-visible {
  opacity: 1;
  translate: 0 0;
}

/* ==========================================================================
   Hero — entrée du contenu au chargement / au changement de diapositive
   ========================================================================== */
@keyframes heroRise {
  from { opacity: 0; translate: 0 22px; }
  to   { opacity: 1; translate: 0 0; }
}
.hero__slide.is-active .eyebrow--light,
.hero__slide.is-active .hero__title,
.hero__slide.is-active .hero__lead,
.hero__slide.is-active .hero__ctas {
  animation: heroRise .8s var(--ease-out) both;
}
.hero__slide.is-active .hero__title { animation-delay: .08s; }
.hero__slide.is-active .hero__lead  { animation-delay: .18s; }
.hero__slide.is-active .hero__ctas  { animation-delay: .28s; }

/* Effet "Ken Burns" — léger zoom continu sur le visuel de fond actif */
@keyframes kenBurns {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}
.hero__bg { transform: scale(1); }
.hero__slide.is-active .hero__bg {
  animation: kenBurns 7s var(--ease-out) forwards;
}

/* ==========================================================================
   Navigation — soulignement animé au survol
   ========================================================================== */
.main-nav a { position: relative; }
.main-nav a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand-red);
  scale: 0 1;
  transform-origin: center;
  transition: scale .25s var(--ease-out);
}
.main-nav a:hover::after { scale: 1 1; }

/* ==========================================================================
   Boutons — effet de brillance discret au survol (btn--primary)
   ========================================================================== */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-20deg);
  transition: left .55s ease;
  pointer-events: none;
}
.btn--primary:hover::after { left: 130%; }

/* ==========================================================================
   Accordéon expertises — ouverture/fermeture fluide (grille en 0fr → 1fr)
   Remplace le simple bascule [hidden] : le contenu reste dans le DOM mais
   est réduit à hauteur 0 + overflow caché, animation basée sur le contenu
   réel (pas de hauteur devinée). La visibilité pour les lecteurs d'écran
   est gérée via aria-hidden dans js/main.js.
   ========================================================================== */
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  padding: 0;
  transition: grid-template-rows .45s var(--ease-out);
}
.accordion__item.is-open .accordion__panel {
  grid-template-rows: 1fr;
}
.accordion__panel > .accordion__grid {
  overflow: hidden;
  min-height: 0;
  padding: 0 26px 26px 82px;
}

/* ==========================================================================
   Bouton flottant WhatsApp — anneau de pulsation discret
   ========================================================================== */
.whatsapp-float { position: fixed; }
.whatsapp-float::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, .55);
  animation: waPulse 2.6s ease-out infinite;
  pointer-events: none;
}
@keyframes waPulse {
  0%   { scale: .85; opacity: .9; }
  70%  { scale: 1.35; opacity: 0; }
  100% { opacity: 0; }
}

/* ==========================================================================
   Compte-à-rebours des stats — micro pop au moment du décompte
   ========================================================================== */
.stat__value { transition: color .3s ease; }