/* Motion sobre — transform et opacity uniquement.
   Le contenu reste lisible sans JavaScript : rien n'est masqué
   tant que la classe .js (main.js) ou .pa (motion.js) n'est pas posée. */

@keyframes pa-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes pa-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes pa-up {
  from { transform: translateY(10px); }
  to { transform: none; }
}
@keyframes pa-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes pa-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@keyframes pa-pop {
  0% { transform: scale(.86); }
  65% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* En-tête : fondu court, sans transform (le header est sticky). */
.top { animation: pa-fade .35s ease both; }

/* Titres : le surlignage se trace, le bandeau intérieur entre en cascade. */
.hl::after {
  transform-origin: left center;
  animation: pa-draw .65s .32s ease both;
}
.phero-txt > * { animation: pa-rise .55s ease both; }
.phero-txt > *:nth-child(2) { animation-delay: .06s; }
.phero-txt > *:nth-child(3) { animation-delay: .12s; }
.phero-txt > *:nth-child(4) { animation-delay: .18s; }
.phero-txt > *:nth-child(5) { animation-delay: .24s; }
.phero-ic { animation: pa-pop .45s .12s ease backwards; }

/* Accueil : la photo (LCP) ne bouge pas ; la carte de suivi, oui. */
.hero-chips { animation: pa-rise .6s .12s ease both; }
.cs-steps li { animation: pa-up .45s ease both; }
.cs-steps li:nth-child(1) { animation-delay: .22s; }
.cs-steps li:nth-child(2) { animation-delay: .30s; }
.cs-steps li:nth-child(3) { animation-delay: .38s; }
.cs-steps li:nth-child(4) { animation-delay: .46s; }

.deco-1 { animation: pa-float 7.5s ease-in-out infinite; }
.deco-2 { animation: pa-float 9s ease-in-out infinite; }

/* Après la révélation .rv, le survol et le focus retrouvent leur mouvement
   (la règle .js .rv.in { transform: none } est plus spécifique que :hover). */
.js .card.rv.in,
.js .who.rv.in,
.js a.ccard.rv.in,
.js .box.rv.in,
.js .step.rv.in { transition: opacity .6s ease, transform .3s ease; }
.js .card.rv.in:hover,
.js .card.rv.in:focus-visible { transform: translateY(-6px); }
.js .who.rv.in:hover { transform: translateY(-3px); }
.js a.ccard.rv.in:hover,
.js a.ccard.rv.in:focus-visible { transform: translateY(-3px); }
.js .box.rv.in:hover { transform: translateY(-4px); }
.js .step.rv.in:hover { transform: translateY(-4px); }

.card:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 4px;
}
.card:focus-visible .card-img img { transform: scale(1.06); }
.card:focus-visible .more .ic { transform: translateX(4px); }
a.ccard:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
}
.btn:focus-visible {
  transform: translateY(-2px);
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}
.btn:active { transform: translateY(0) scale(.98); }
.btn-ghost:focus-visible { outline-color: #fff; }

.nav a:focus-visible,
.mnav a:focus-visible,
.toc a:focus-visible,
.link:focus-visible,
footer a:focus-visible,
.legal a:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
}
.nav a:focus-visible { background: var(--navy-l); }

.link .ic { transition: transform .2s ease; }
.link:hover .ic,
.link:focus-visible .ic { transform: translateX(4px); }

.card-ic,
.who .bi,
a.ccard .bi,
.feat .fi,
.box .bi,
.step .si {
  transition: transform .3s ease;
}
.card:hover .card-ic,
.card:focus-visible .card-ic,
.who:hover .bi,
a.ccard:hover .bi,
a.ccard:focus-visible .bi,
.feat:hover .fi,
.feat:focus-within .fi,
.box:hover .bi { transform: scale(1.08); }

.choice:hover span,
.choice:focus-within span { transform: translateY(-2px); }

.tags span { transition: transform .2s ease; }
.tags span:hover { transform: translateY(-3px); }

.wa-fab { transition: transform .2s ease; }
.wa-fab:hover,
.wa-fab:focus-visible {
  transform: scale(1.08);
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}

.thanks.show { animation: pa-rise .4s ease both; }

/* Icônes : un léger pop au moment où le bloc entre dans l'écran.
   fill-mode backwards pour ne pas bloquer le survol ensuite. */
.js .card.rv.in .card-ic,
.js .who.rv.in .bi,
.js .step.rv.in .num,
.js .step.rv.in .si,
.js .rv.in .feat .fi,
.js .box.rv.in .checks li .ic,
.js .tags.rv.in > span {
  animation-delay: var(--pa-d, 0ms);
}
.js .card.rv.in .card-ic,
.js .who.rv.in .bi,
.js .step.rv.in .num,
.js .rv.in .feat .fi,
.js .box.rv.in .checks li .ic { animation-name: pa-pop; animation-duration: .45s; animation-timing-function: ease; animation-fill-mode: backwards; }
.js .step.rv.in .si { animation-name: pa-pop; animation-duration: .45s; animation-delay: calc(var(--pa-d, 0ms) + 80ms); animation-fill-mode: backwards; }
.js .tags.rv.in > span { animation-name: pa-up; animation-duration: .45s; animation-timing-function: ease; animation-fill-mode: backwards; }
.js .rv.in .feat:nth-child(2) .fi { animation-delay: calc(var(--pa-d, 0ms) + 70ms); }
.js .rv.in .feat:nth-child(3) .fi { animation-delay: calc(var(--pa-d, 0ms) + 140ms); }
.js .rv.in .feat:nth-child(4) .fi { animation-delay: calc(var(--pa-d, 0ms) + 210ms); }
.js .box.rv.in .checks li:nth-child(2) .ic { animation-delay: calc(var(--pa-d, 0ms) + 45ms); }
.js .box.rv.in .checks li:nth-child(3) .ic { animation-delay: calc(var(--pa-d, 0ms) + 90ms); }
.js .box.rv.in .checks li:nth-child(4) .ic { animation-delay: calc(var(--pa-d, 0ms) + 135ms); }
.js .box.rv.in .checks li:nth-child(5) .ic { animation-delay: calc(var(--pa-d, 0ms) + 180ms); }
.js .tags.rv.in > span:nth-child(2) { animation-delay: calc(var(--pa-d, 0ms) + 35ms); }
.js .tags.rv.in > span:nth-child(3) { animation-delay: calc(var(--pa-d, 0ms) + 70ms); }
.js .tags.rv.in > span:nth-child(4) { animation-delay: calc(var(--pa-d, 0ms) + 105ms); }
.js .tags.rv.in > span:nth-child(5) { animation-delay: calc(var(--pa-d, 0ms) + 140ms); }
.js .tags.rv.in > span:nth-child(6) { animation-delay: calc(var(--pa-d, 0ms) + 175ms); }
.js .tags.rv.in > span:nth-child(7) { animation-delay: calc(var(--pa-d, 0ms) + 210ms); }
.js .tags.rv.in > span:nth-child(8) { animation-delay: calc(var(--pa-d, 0ms) + 245ms); }
.js .tags.rv.in > span:nth-child(9) { animation-delay: calc(var(--pa-d, 0ms) + 280ms); }
.js .tags.rv.in > span:nth-child(10) { animation-delay: calc(var(--pa-d, 0ms) + 315ms); }
.js .tags.rv.in > span:nth-child(11) { animation-delay: calc(var(--pa-d, 0ms) + 350ms); }

/* Bandeau partenaires de l'accueil : pas de classe .rv dans le HTML. */
html.pa .partners .wrap > .eyebrow,
html.pa .partners .wrap > p,
html.pa .partners .link {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}
html.pa .partners .wrap > .eyebrow.pa-in,
html.pa .partners .wrap > p.pa-in,
html.pa .partners .link.pa-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .top,
  .hl::after,
  .phero-txt > *,
  .phero-ic,
  .hero-chips,
  .cs-steps li,
  .deco-1,
  .deco-2,
  .thanks.show,
  .card-ic,
  .who .bi,
  .ccard .bi,
  .feat .fi,
  .box .bi,
  .step .si,
  .step .num,
  .checks li .ic,
  .tags span,
  .btn,
  .btn:hover,
  .btn:focus-visible,
  .btn:active,
  .card,
  .card:hover,
  .card:focus-visible,
  .card:hover .card-img img,
  .card:focus-visible .card-img img,
  .card:hover .more .ic,
  .card:focus-visible .more .ic,
  .who,
  .who:hover,
  .feat,
  .feat:hover,
  a.ccard,
  a.ccard:hover,
  a.ccard:focus-visible,
  .box,
  .box:hover,
  .step,
  .step:hover,
  .wa-fab,
  .wa-fab:hover,
  .wa-fab:focus-visible,
  .choice span,
  .link .ic,
  .js .card.rv.in,
  .js .card.rv.in:hover,
  .js .card.rv.in:focus-visible,
  .js .who.rv.in,
  .js .who.rv.in:hover,
  .js a.ccard.rv.in,
  .js a.ccard.rv.in:hover,
  .js a.ccard.rv.in:focus-visible,
  .js .box.rv.in,
  .js .box.rv.in:hover,
  .js .step.rv.in,
  .js .step.rv.in:hover {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  .top,
  .phero-txt > *,
  .hero-chips,
  .thanks.show,
  html.pa .partners .wrap > .eyebrow,
  html.pa .partners .wrap > p,
  html.pa .partners .link {
    opacity: 1 !important;
  }
}

@media print {
  .top,
  .hl::after,
  .phero-txt > *,
  .hero-chips,
  .cs-steps li,
  .deco-1,
  .deco-2,
  .thanks.show {
    animation: none !important;
    transform: none !important;
  }
  .top,
  .phero-txt > *,
  .hero-chips,
  .cs-steps li,
  .thanks.show { opacity: 1 !important; }
}