@layer ancien {
/* 20-animations.css — animations § 11.1 (A-24, décision d'Anthony du 15/10) et survol des boutons § 7.2.
   Tout mouvement est déclaré sous @media (prefers-reduced-motion: no-preference) : sous reduce, rien ne bouge et
   l'état final s'affiche d'emblée. Les apparitions et le hero vivant dépendent de la classe « js » (site.js) : sans
   JavaScript, tout est visible et immobile. Seules opacity et transform (translate, scale) s'animent, plus le reflet
   du texte en dégradé (background-position, § 11.1). Les lueurs de survol sont des pseudo-éléments dont seule
   l'opacité change (aucune propriété de mise en page). */

/* Lueurs de survol : cartes (§ 11.1) et boutons actifs (§ 7.2). Pas de fond : jamais une couche sous le texte. */
.carte,
.bouton {
  position: relative;
}

.carte::after,
.bouton::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}

.carte::after {
  box-shadow: 0 14px 36px rgba(117, 80, 255, 0.28);
}

.bouton::after {
  box-shadow: 0 8px 24px rgba(117, 80, 255, 0.35);
}

.carte:hover::after,
.bouton:not([aria-disabled="true"]):hover::after,
.bouton:not([aria-disabled="true"]):focus-visible::after {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  /* En-tête : passage à l'état défilé en fondu (200 ms). */
  .entete {
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }

  /* Apparition au défilement : l'état de départ (opacité 0, 24 px plus bas) s'applique SANS transition (aucun fondu
     sortant quand site.js pose la classe) ; la transition, 600 ms ease-out, est portée par l'état d'arrivée. La 3e
     transition sert au survol des cartes (200 ms). */
  .js .apparition {
    opacity: 0;
    translate: 0 24px;
  }

  .js .apparition.est-visible {
    opacity: 1;
    translate: none;
    transition: opacity 0.6s ease-out, translate 0.6s ease-out, transform 0.2s ease-out;
  }

  /* Décalage de 80 ms entre les éléments d'une même grille (le survol n'est pas retardé). */
  .js .grille > .apparition.est-visible:nth-child(2) { transition-delay: 80ms, 80ms, 0s; }
  .js .grille > .apparition.est-visible:nth-child(3) { transition-delay: 160ms, 160ms, 0s; }
  .js .grille > .apparition.est-visible:nth-child(4) { transition-delay: 240ms, 240ms, 0s; }
  .js .grille > .apparition.est-visible:nth-child(5) { transition-delay: 320ms, 320ms, 0s; }
  .js .grille > .apparition.est-visible:nth-child(6) { transition-delay: 400ms, 400ms, 0s; }
  .js .grille > .apparition.est-visible:nth-child(7) { transition-delay: 480ms, 480ms, 0s; }
  .js .grille > .apparition.est-visible:nth-child(8) { transition-delay: 560ms, 560ms, 0s; }

  /* Survol des cartes : −4 px, 200 ms ; lueur en fondu. Les mouvements de survol dépendent aussi de la classe « js »
     (constat I-5 du tour de correction 1) : sans JavaScript, tout est immobile (§ 11.1) ; la lueur reste (aucun
     mouvement). */
  .js .carte {
    transition: transform 0.2s ease-out;
  }

  .js .carte:hover {
    transform: translateY(-4px);
  }

  .carte::after,
  .bouton::after {
    transition: opacity 0.2s ease-out;
  }

  /* Survol et focus des boutons actifs (§ 7.2) : −1 px ; la flèche glisse de 4 px (boutons et cercles FLECHE). */
  .js .bouton {
    transition: transform 0.2s ease-out;
  }

  .js .bouton:not([aria-disabled="true"]):hover,
  .js .bouton:not([aria-disabled="true"]):focus-visible {
    transform: translateY(-1px);
  }

  .js .bouton .icone,
  .js .fleche .icone {
    transition: transform 0.2s ease-out;
  }

  .js .bouton:not([aria-disabled="true"]):hover .icone,
  .js .fleche:not([aria-disabled="true"]):hover .icone {
    transform: translateX(4px);
  }

  /* Hero : contenu en fondu au chargement (500 ms), image en zoom lent (24 s, aller-retour, sans fin). */
  .js .hero__contenu {
    animation: apparition-hero 0.5s ease-out both;
  }

  .js .hero__image {
    animation: hero-zoom 24s ease-in-out infinite alternate;
  }

  /* Reflet qui glisse sur le texte en dégradé des H1 (8 s, sans fin) : une couche claire au-dessus du dégradé. */
  .js h1 .degrade {
    background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 70%),
      var(--degrade-accent);
    background-size: 50% 100%, 100% 100%;
    background-repeat: no-repeat;
    animation: reflet 8s linear infinite;
  }
}

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

@keyframes hero-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

@keyframes reflet {
  0% { background-position: -100% 0, 0 0; }
  30% { background-position: 200% 0, 0 0; }
  100% { background-position: 200% 0, 0 0; }
}

}