/* ============================================================
   animations.css — micro-interactions et animations
   ------------------------------------------------------------
   Tout est désactivé via prefers-reduced-motion en bas de fichier.
   ============================================================ */

:root {
  --anim-duration: 700ms;
  --anim-easing: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   1 · Reveal au scroll (IntersectionObserver côté JS)
   ------------------------------------------------------------
   IMPORTANT : la classe .will-reveal est ajoutée par ui.js,
   pas par défaut en CSS. Comme ça, si JS ne tourne pas
   (file://, erreur de module, JS désactivé), les éléments
   restent visibles au lieu de disparaître.
   ============================================================ */
[data-reveal].will-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--anim-duration) var(--anim-easing),
    transform var(--anim-duration) var(--anim-easing);
  will-change: opacity, transform;
}

[data-reveal].will-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal='left'].will-reveal {
  transform: translateX(-32px);
}
[data-reveal='left'].will-reveal.is-visible {
  transform: translateX(0);
}

[data-reveal='right'].will-reveal {
  transform: translateX(32px);
}
[data-reveal='right'].will-reveal.is-visible {
  transform: translateX(0);
}

[data-reveal='scale'].will-reveal {
  transform: scale(0.94);
}
[data-reveal='scale'].will-reveal.is-visible {
  transform: scale(1);
}

/* Délais en cascade pour les enfants d'une grille */
[data-reveal-delay='100'] {
  transition-delay: 100ms;
}
[data-reveal-delay='200'] {
  transition-delay: 200ms;
}
[data-reveal-delay='300'] {
  transition-delay: 300ms;
}
[data-reveal-delay='400'] {
  transition-delay: 400ms;
}
[data-reveal-delay='500'] {
  transition-delay: 500ms;
}
[data-reveal-delay='600'] {
  transition-delay: 600ms;
}

/* ============================================================
   2 · Hero — image officielle avec un léger float
   ============================================================ */
@keyframes hero-image-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.hero__image {
  animation: hero-image-float 6s ease-in-out infinite;
}

/* ============================================================
   3 · Bulles "Comment ça marche" — float échelonné
   ============================================================ */
@keyframes bubble-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.bubble__circle {
  animation: bubble-float 5.5s ease-in-out infinite;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.bubble:nth-child(1) .bubble__circle { animation-delay: 0s; }
.bubble:nth-child(2) .bubble__circle { animation-delay: 1.2s; }
.bubble:nth-child(3) .bubble__circle { animation-delay: 2.4s; }
.bubble:nth-child(4) .bubble__circle { animation-delay: 3.6s; }

.bubble:hover .bubble__circle {
  transform: translateY(-12px) scale(1.05);
  box-shadow: var(--shadow-card-hover);
}

.bubble:hover .bubble__circle svg {
  color: var(--color-charcoal);
}

.bubble__circle svg {
  transition: color var(--transition-base);
}

/* ============================================================
   4 · Cards dispositifs — picto qui réagit au hover
   ============================================================ */
.card__icon {
  transition: transform var(--transition-base);
}

.card:hover .card__icon {
  transform: translateY(-3px) scale(1.08);
}

.card__title {
  transition: color var(--transition-fast);
}

.card:hover .card__title {
  color: var(--color-charcoal);
}

/* ============================================================
   5 · Boutons — léger flash au hover + tap feedback
   ============================================================ */
.btn {
  position: relative;
  overflow: hidden;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform 100ms ease;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.35), transparent 50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.btn:hover::before {
  opacity: 1;
}

.btn:active {
  transform: scale(0.97);
}

.btn::after {
  transition: transform var(--transition-fast);
}

.btn:hover::after {
  transform: translateX(3px) translateY(-1px);
}

/* ============================================================
   6 · Témoignages — hover lift + accent
   ============================================================ */
.testimonial {
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-top-color var(--transition-base);
}

.testimonial:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
}

.testimonial__quote::before {
  transition: transform var(--transition-base);
  transform-origin: bottom left;
}

.testimonial:hover .testimonial__quote::before {
  transform: scale(1.15) rotate(-5deg);
}

/* ============================================================
   7 · Bandeau portraits — hover individuel
   ============================================================ */
.portrait-card .portrait {
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base);
}

.portrait-card:hover .portrait {
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 8px 20px rgba(228, 24, 104, 0.18);
}

.portrait-card__name {
  transition: color var(--transition-fast);
}

.portrait-card:hover .portrait-card__name {
  color: var(--color-rose-hover);
}

/* ============================================================
   8 · Stats — chiffres qui "pop" en fin de comptage
   ============================================================ */
.stat__value {
  display: inline-block;
  transition: transform var(--transition-base);
}

@keyframes stat-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.stat__value.is-done {
  animation: stat-pop 600ms ease;
}

/* ============================================================
   9 · Quiz — pulse sur le point rose de progression
   ============================================================ */
@keyframes progress-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--color-white), 0 0 0 6px rgba(228, 24, 104, 0); }
  50% { box-shadow: 0 0 0 3px var(--color-white), 0 0 0 10px rgba(228, 24, 104, 0.2); }
}

.quiz__progress-fill::after {
  animation: progress-pulse 2.4s ease-in-out infinite;
}

/* Options : interaction tactile plus marquée */
.quiz__option-label {
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    transform 120ms ease,
    color var(--transition-fast);
}

.quiz__option-label:hover {
  transform: translateX(4px);
}

.quiz__option-input:checked + .quiz__option-label {
  transform: translateX(4px);
}

/* ============================================================
   10 · Header — ombre au scroll
   ============================================================ */
.site-header {
  transition: box-shadow var(--transition-base);
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-card);
}

/* ============================================================
   11 · Bouton scroll-to-top
   ============================================================ */
.scroll-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  background-color: var(--color-rose);
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(228, 24, 104, 0.35);
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition:
    opacity var(--transition-base),
    transform var(--transition-base),
    background-color var(--transition-fast);
  z-index: 90;
  border: none;
  cursor: pointer;
}

.scroll-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.scroll-top:hover {
  background-color: var(--color-rose-hover);
  color: var(--color-white);
  text-decoration: none;
  transform: translateY(-2px);
}

.scroll-top svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================
   12 · Hero — apparition initiale (sans IntersectionObserver,
   directement au chargement)
   ============================================================ */
@keyframes hero-enter {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero__title,
.hero__lead,
.hero__meta,
.hero__actions {
  animation: hero-enter 800ms var(--anim-easing) backwards;
}

.hero__title { animation-delay: 0ms; }
.hero__lead { animation-delay: 150ms; }
.hero__meta { animation-delay: 300ms; }
.hero__actions { animation-delay: 400ms; }

.hero__figure {
  animation: hero-enter 1000ms var(--anim-easing) 200ms backwards;
}

/* ============================================================
   Respect des préférences utilisateur (reduced-motion)
   ------------------------------------------------------------
   Approche nuancée : on coupe les animations en BOUCLE INFINIE
   (qui peuvent réellement gêner : nausée, distraction) mais on
   garde les transitions courtes (hovers, focus) qui restent
   utiles comme feedback d'interaction, et les fade-in one-shot
   modestes.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  /* Boucles infinies : OFF */
  .bubble__circle,
  .hero__image,
  .quiz__progress-fill::after {
    animation: none !important;
  }

  /* Reveals : on les rend visibles direct, sans translation */
  [data-reveal].will-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: opacity 200ms ease !important;
  }

  /* Entrée hero : on coupe les translations, on garde le fade */
  .hero__title,
  .hero__lead,
  .hero__meta,
  .hero__actions,
  .hero__figure {
    animation: hero-enter-soft 300ms ease backwards !important;
  }

  @keyframes hero-enter-soft {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* Pop des stats : on garde le compteur mais on coupe le pop */
  .stat__value.is-done {
    animation: none !important;
  }

  /* Scroll-to-top : pas de translation à l'arrivée */
  .scroll-top.is-visible {
    transform: none !important;
  }
}