/* ==========================================================================
   ETALL — Animations
   Tout passe par transform et opacity : ce sont les deux seules propriétés
   que le navigateur anime sans recalculer la page. C'est ce qui garantit
   la fluidité sur un téléphone d'entrée de gamme (chapitre 7).
   ========================================================================== */

/* --- Apparition au défilement --------------------------------------------- */

/* État de départ : légèrement plus bas et transparent.
   La classe « est-visible » est ajoutée par js/animations.js quand
   l'élément entre dans l'écran — une seule fois. */
.revele {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 620ms cubic-bezier(.22, .61, .36, 1),
              transform 620ms cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}

.revele.est-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Variantes de direction */
.revele--gauche { transform: translateX(-30px); }
.revele--droite { transform: translateX(30px); }

.revele--gauche.est-visible,
.revele--droite.est-visible { transform: none; }

/* Décalage en cascade pour les éléments d'une même grille */
.retard-1 { transition-delay:  90ms; }
.retard-2 { transition-delay: 180ms; }
.retard-3 { transition-delay: 270ms; }
.retard-4 { transition-delay: 360ms; }
.retard-5 { transition-delay: 450ms; }

/* --- Flottement des images ------------------------------------------------ */

@keyframes flottement {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-13px); }
}

.flotte {
  animation: flottement 6.5s ease-in-out infinite;
}

/* --- Pulsation de l'icône WhatsApp ---------------------------------------- */

@keyframes pulsation-anneau {
  0%   { transform: scale(.92); opacity: .55; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

.flottant__rond::after {
  content: "";
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--whatsapp);
  animation: pulsation-anneau 2.6s ease-out infinite;
  pointer-events: none;
}

.flottant__rond { position: relative; }
.flottant__rond svg { position: relative; z-index: 1; }

/* --- Halo animé du hero --------------------------------------------------- */

@keyframes derive {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(3%, -4%) scale(1.06); }
  66%      { transform: translate(-3%, 3%) scale(.96); }
}

.halo { animation: derive 17s ease-in-out infinite; }
.halo--decal { animation-duration: 21s; animation-delay: -6s; }

/* --- Apparition de la modale ---------------------------------------------- */

@keyframes entree-liste {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.modale[data-ouverte="true"] .choix {
  animation: entree-liste 320ms cubic-bezier(.22, .61, .36, 1) backwards;
}

/* ==========================================================================
   Respect de « prefers-reduced-motion »
   Si le visiteur a demandé à son téléphone ou à son ordinateur de limiter
   les animations, tout s'arrête net : le contenu reste entièrement visible
   et utilisable, simplement sans mouvement.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  html { scroll-behavior: auto; }

  .revele,
  .revele--gauche,
  .revele--droite {
    opacity: 1 !important;
    transform: none !important;
  }

  .flotte,
  .halo,
  .flottant__rond::after {
    animation: none !important;
  }

  .carte:hover,
  .atout:hover,
  .centre:hover,
  .bouton:hover,
  .flottant:hover {
    transform: none !important;
  }

  .carte:hover .carte__media img { transform: none !important; }
}

/* Le voyant du bandeau d'actualité. Il pulse sans jamais disparaître tout à
   fait : un point qui s'éteint complètement se lit comme un défaut
   d'affichage, pas comme un signal. */
@keyframes clignote-actu {
  0%, 100% { opacity: 1; }
  50%      { opacity: .25; }
}