/* ---------- Animations et survols ----------
   Tout passe par transform et opacity. Sans JavaScript, ou si le visiteur a demandé moins d'animations, rien ne bouge et tout est visible. */
.js .r { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 70ms); }
.js .r.vu { opacity: 1; transform: none; }

/* Illustrations des fonctions : elles se jouent en arrivant à l'écran */
.js .maq-chat .bulle, .js .maq-chat .offre-env, .js .maq-fans .ligne:not(.entete), .js .maq-bord .kpi, .js .maq-bord .afaire { opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.js .maq.anime .bulle, .js .maq.anime .offre-env, .js .maq.anime .ligne, .js .maq.anime .kpi, .js .maq.anime .afaire { opacity: 1; transform: none; }
.js .maq.anime .bulle:nth-child(2), .js .maq.anime .ligne:nth-child(3), .js .maq.anime .kpi:nth-child(2) { transition-delay: .25s; }
.js .maq.anime .bulle:nth-child(3), .js .maq.anime .ligne:nth-child(4), .js .maq.anime .kpi:nth-child(3), .js .maq.anime .afaire:nth-of-type(1) { transition-delay: .5s; }
.js .maq.anime .offre-env, .js .maq.anime .ligne:nth-child(5), .js .maq.anime .afaire:nth-of-type(2) { transition-delay: .75s; }
.js .maq-bord .jauge i { width: 0; transition: width 1.1s cubic-bezier(.2, .8, .2, 1) .35s; }
.js .maq-bord.anime .jauge i { width: 65%; }

/* Liens de la barre : un trait rouge qui se déroule */
.top .lien { position: relative; }
.top .lien::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: var(--rouge); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }

.btn { transition: background-color .15s ease, border-color .15s ease, transform .2s cubic-bezier(.2, .8, .2, 1); }
.btn:active { transform: scale(.97); }
.case, .etapes li, .autre, .offre, .palier, .marque, .maq, .nous, .etiquette, .sticker, .haut, .vitrine .anneau, .notif, .faq summary, .point { transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .2s ease, color .2s ease, background-color .2s ease; }

@media (hover: hover) {
  .top .lien:hover::after { transform: scaleX(1); }
  .btn:hover { transform: translateY(-2px); }
  .case:hover, .etapes li:hover { transform: translateY(-5px); border-color: var(--rouge); }
  .autre:hover { transform: translateY(-4px) rotate(-1deg); }
  .nous:hover { transform: rotate(0deg) scale(1.02); }
  .offre:hover { border-color: var(--rouge); }
  .palier:hover { transform: translateY(-4px); }
  .marque:hover { transform: rotate(-7deg) scale(1.1); }
  .maq:hover, .duo.inverse .maq:hover { transform: rotate(0deg) scale(1.02); }
  .cote:hover .etiquette { transform: rotate(-8deg) scale(1.08); }
  h1:hover .sticker, h2:hover .sticker { transform: rotate(2deg) scale(1.04); }
  .vitrine:hover .anneau { transform: translate(34%, -40%) scale(1.1); }
  .vitrine:hover .notif.n1 { transform: translateX(-10px); } .vitrine:hover .notif.n2 { transform: translateX(6px); } .vitrine:hover .notif.n3 { transform: translateX(-4px); }
  .faq summary:hover { color: var(--rouge-texte); }
  .faq summary:hover .num { color: var(--rouge-texte); }
  .point:hover { border-top-color: var(--rouge); }
  .haut:hover { transform: translateY(-4px); }
  .bande:hover .defile { animation-play-state: paused; }
  .langues a, .themes button, .souligne, footer a { transition: color .2s ease, background-color .2s ease; }
}
.faq summary .num { transition: color .2s ease; }
.faq summary::after { transition: transform .25s ease; }
.faq details[open] summary::after { transform: rotate(180deg); }

/* Les notifications du hero flottent doucement */
@media (prefers-reduced-motion: no-preference) {
  .notifs { animation: flotte 6s ease-in-out 1.2s infinite alternate; }
  @keyframes flotte { to { translate: 0 -8px; } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .r, .js .maq .bulle, .js .maq .offre-env, .js .maq .ligne, .js .maq .kpi, .js .maq .afaire { opacity: 1 !important; transform: none !important; }
  .js .maq-bord .jauge i { width: 65% !important; }
}