/* ==========================================================
   Salon 6ter — animations
   Un seul moment animé : l'entrée du bandeau d'accueil au
   chargement, et sa version douce quand l'appareil demande
   moins d'animations.
   Chargé après les autres feuilles : il doit pouvoir les surcharger.
   ========================================================== */

/* Hero : entrée en cascade au chargement */
.js .hero__texte > * { animation: monte .9s var(--courbe) both; }
.js .hero__texte > :nth-child(1) { animation-delay: .1s; }
.js .hero__texte > :nth-child(2) { animation-delay: .22s; }
.js .hero__texte > :nth-child(3) { animation-delay: .38s; }
.js .hero__texte > :nth-child(4) { animation-delay: .5s; }
.js .hero__texte > :nth-child(5) { animation-delay: .65s; }
/* Nom du salon et grand titre : visibles dès le premier affichage (ils glissent
   sans fondu), sinon Google mesure un affichage du contenu principal plus tardif */
.js .hero__texte > :nth-child(-n+2) { animation-name: glisse; }
.js .souligne path { animation: trace 1.1s .9s var(--courbe) both; }
.js .arche { animation: devoile 1.3s .15s var(--courbe) both; }
.js .arche img { animation: dezoome 1.8s .15s var(--courbe) both; }
.js .hero__cadre::before { animation: contour 1.2s .7s var(--courbe) both; }
.js .hero__badge { animation: tampon .9s 1.1s var(--courbe) both; }

@keyframes monte {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}
@keyframes glisse {
  from { transform: translateY(26px); }
  to { transform: none; }
}
@keyframes trace {
  from { stroke-dashoffset: 220; }
  to { stroke-dashoffset: 0; }
}
@keyframes contour {
  from { opacity: 0; transform: translate(0, 0); }
  to { opacity: 1; transform: translate(var(--decalage), calc(-1 * var(--decalage))); }
}
@keyframes devoile {
  from { clip-path: inset(100% 0 0 0 round 999px 999px 0 0); }
  to { clip-path: inset(0 0 0 0 round 999px 999px 0 0); }
}
@keyframes dezoome {
  from { transform: scale(1.18); }
  to { transform: scale(1); }
}
@keyframes tampon {
  from { opacity: 0; transform: scale(.4) rotate(-40deg); }
  to { opacity: 1; transform: none; }
}

/* Barre sous les titres de section */
.titre-section h2::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 3px;
  margin-top: 1rem;
  background: var(--jaune);
  border-radius: 3px;
}
.titre-section--centre h2::after { margin-inline: auto; }

/* « Réduire les animations » activé sur l'appareil : on supprime les mouvements
   (glissements, zooms, rotations) mais on garde des fondus doux. */
@keyframes fondu {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .membre__faces { transform: none !important; transition: none; }
  .membre__dos { transform: none; opacity: 0; transition: opacity .5s; z-index: 3; }
  .membre:hover .membre__dos,
  .membre.retournee .membre__dos { opacity: 1; }
  .js .hero__texte > *,
  .js .arche,
  .js .hero__badge,
  .js .hero__cadre::before { animation-name: fondu; }
  .js .arche img,
  .js .hero__texte > :nth-child(-n+2) { animation: none; }
  .statut--ouvert .statut__point::after { animation: none; }
  .bouton:hover .i-tel { animation: none; }
  .bouton:hover { transform: none; }
}