/* t527 — animations du site (Mikaël, 10 oct. 2026). Fichier de l'agent « animations » ; chargé après site.css.
   Règles : style iOS (courbe de la bulle de chat), transform/opacity/translate/scale seulement, 60 fps ;
   TOUT est dans @media (prefers-reduced-motion:no-preference) : avec « Réduire les animations », rien ne bouge.
   Sans JS (pas de classe .js) ou si un script échoue (filet du <head>, lib.py), le contenu reste visible.
   N'ajoute AUCUN fond, flou ni élément fixed pleine largeur (teinte des barres Safari, voir NOTES.md t487). */
:root{--an-ease:cubic-bezier(.32,.72,0,1);--an-dur:620ms}
@media (prefers-reduced-motion:no-preference){

/* 1. Apparitions au défilement : même mécanisme (.reveal → .is-in, site.js), courbe iOS un peu plus longue */
.js .reveal{transition:opacity var(--an-dur) var(--an-ease),transform var(--an-dur) var(--an-ease);transition-delay:calc(var(--i,0) * 70ms);transform:translateY(20px)}
.js .reveal.is-in{transform:none}
.js .reveal-img img{transition:transform 1100ms var(--an-ease),opacity 800ms var(--an-ease)}

/* 2. Héros : photo affichée tout de suite (LCP), simple zoom lent ; texte qui monte en cascade ; flèche du bouton qui fait signe une fois */
.hero .ph.load img{animation:an-zoom 1600ms var(--an-ease) both}
@keyframes an-zoom{from{transform:scale(1.06)}to{transform:none}}
.hero-in>*{animation:an-monte 700ms var(--an-ease) both;animation-delay:calc(var(--i,0) * 90ms + 40ms)}
.hero-in h1{animation:none}
@keyframes an-monte{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero-in .ctas .btn .arr{animation:an-signe 900ms var(--an-ease) 1100ms 1 backwards}
@keyframes an-signe{0%,100%{translate:0 0}40%{translate:5px 0}}
.hero-in .u,.page-hero .u{transition-duration:900ms;transition-delay:350ms}

/* 3. Pilules du haut et du bas : glissent en place au premier chargement de la visite (classe .an-entree posée dans le <head>) */
.an-entree .top .logo,.an-entree .top .nav>ul,.an-entree .top .top-actions,.an-entree .top .burger{animation:an-haut 640ms var(--an-ease) backwards}
.an-entree .top .nav>ul{animation-delay:60ms}.an-entree .top .top-actions,.an-entree .top .burger{animation-delay:120ms}
.an-entree .mbar .btn{animation:an-bas 680ms var(--an-ease) 180ms backwards}
.an-entree .mbar .btn+.btn{animation-delay:250ms}
@keyframes an-haut{from{opacity:0;translate:0 -14px}}
@keyframes an-bas{from{opacity:0;translate:0 18px}}

/* 4. Retour tactile : léger enfoncement (scale .97) au toucher ou au clic */
.btn{transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast),transform var(--dur-fast) var(--ease-out),scale 260ms var(--an-ease)}
.btn:active{scale:.97;transition-duration:var(--dur-fast),var(--dur-fast),var(--dur-fast),var(--dur-fast),90ms}
.card{transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),scale 300ms var(--an-ease)}
.card.hov:active{scale:.98;transition-duration:var(--dur),var(--dur),110ms}
.burger,.social a,.choices span,.rdv-opt-b,.rdv-day,.rdv-h,.faq summary,.brands li{-webkit-tap-highlight-color:transparent}
.burger{transition:scale 260ms var(--an-ease)}.burger:active{scale:.92;transition-duration:90ms}
.social a{transition:background var(--dur-fast),border-color var(--dur-fast),scale 260ms var(--an-ease)}.social a:active{scale:.92;transition-duration:var(--dur-fast),var(--dur-fast),90ms}
.choices span{transition:border-color var(--dur-fast),background var(--dur-fast),scale 260ms var(--an-ease)}.choices span:active{scale:.96;transition-duration:var(--dur-fast),var(--dur-fast),90ms}
.rdv-opt-b{transition:border-color var(--dur-fast),background var(--dur-fast),scale 260ms var(--an-ease)}.rdv-opt-b:active{scale:.985;transition-duration:var(--dur-fast),var(--dur-fast),90ms}
.faq summary{transition:scale 260ms var(--an-ease)}.faq summary:active{scale:.99;transition-duration:90ms}
/* choix coché (formulaires, jours et heures de rendez-vous) : petite pulsation */
.choices input:checked+span,.rdv-day[aria-pressed=true],.rdv-h[aria-pressed=true]{animation:an-tap 320ms var(--an-ease)}
@keyframes an-tap{40%{scale:1.05}}

/* 5. Icônes : apparaissent avec un petit rebond quand leur carte arrive, se soulèvent au survol */
.card .ic svg,.coord .ic svg{transition:scale 520ms var(--an-ease),opacity 420ms var(--an-ease),translate 300ms var(--an-ease);transition-delay:calc(var(--i,0) * 70ms + 220ms)}
.js .reveal:not(.is-in) .ic svg{scale:.55;opacity:0}
@media (hover:hover){.card.hov:hover .ic svg{translate:0 -2px;transition-delay:0s}}
.checks li svg{transition:scale 480ms var(--an-ease),opacity 360ms var(--an-ease)}
.js .reveal:not(.is-in) .checks li svg,.js .checks.reveal:not(.is-in) li svg{scale:.4;opacity:0}
.checks li:nth-child(1) svg{transition-delay:220ms}.checks li:nth-child(2) svg{transition-delay:300ms}.checks li:nth-child(3) svg{transition-delay:380ms}
.checks li:nth-child(4) svg{transition-delay:460ms}.checks li:nth-child(5) svg{transition-delay:540ms}.checks li:nth-child(n+6) svg{transition-delay:620ms}
.quote .stars svg{transition:scale 420ms var(--an-ease),opacity 320ms var(--an-ease);transition-delay:calc(var(--i,0) * 70ms + 240ms)}
.js .reveal:not(.is-in) .quote .stars svg,.js .quote.reveal:not(.is-in) .stars svg{scale:.5;opacity:0}
.quote .stars svg:nth-child(2){transition-delay:calc(var(--i,0) * 70ms + 300ms)}.quote .stars svg:nth-child(3){transition-delay:calc(var(--i,0) * 70ms + 360ms)}
.quote .stars svg:nth-child(4){transition-delay:calc(var(--i,0) * 70ms + 420ms)}.quote .stars svg:nth-child(5){transition-delay:calc(var(--i,0) * 70ms + 480ms)}

/* 6. Étapes « Comment ça se passe » : chaque numéro fait un petit rebond quand la ligne jaune l'atteint */
.steps.is-in .n{animation:an-pop 560ms var(--an-ease) backwards;animation-delay:calc(var(--i,0) * 300ms + 300ms)}
@keyframes an-pop{0%{scale:.82}55%{scale:1.08}100%{scale:1}}

/* 7. Marques et galerie de réalisations : arrivée en cascade */
.brands li{transition:opacity 500ms var(--an-ease),translate 600ms var(--an-ease)}
.js .brands.reveal:not(.is-in) li,.js .reveal:not(.is-in) .brands li{opacity:0;translate:0 10px}
.brands li:nth-child(2){transition-delay:50ms}.brands li:nth-child(3){transition-delay:100ms}.brands li:nth-child(4){transition-delay:150ms}
.brands li:nth-child(5){transition-delay:200ms}.brands li:nth-child(6){transition-delay:250ms}.brands li:nth-child(n+7){transition-delay:300ms}
/* galerie : fondu seulement (un translate des photos agrandit la zone de défilement horizontal et relance le scroll-snap → événements scroll qui coupent la mesure LCP de Chrome) */
.gal-track>li{transition:opacity 700ms var(--an-ease)}
.js .gal.reveal:not(.is-in) .gal-track>li{opacity:0}
.gal-track>li:nth-child(2){transition-delay:70ms}.gal-track>li:nth-child(3){transition-delay:140ms}.gal-track>li:nth-child(4){transition-delay:210ms}.gal-track>li:nth-child(n+5){transition-delay:280ms}

/* 8. Grandes photos : léger parallaxe au défilement (CSS seulement, navigateurs compatibles : Safari 26, Chrome 115+) */
@supports (animation-timeline:view()){
  main section:not(.hero) figure.ph:not(.prod)>img,.hero .ph.load img{scale:1.08;animation-name:an-par;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:view();animation-range:cover}
  .hero .ph.load img{animation-name:an-zoom,an-par;animation-duration:1600ms,auto;animation-timing-function:var(--an-ease),linear;animation-timeline:auto,view();animation-range:normal,cover}
  .gal figure.ph>img{scale:none;animation:none}
  @keyframes an-par{from{translate:0 -3.5%}to{translate:0 3.5%}}
}

/* 9. FAQ : ouverture ET fermeture en douceur (anim.js gère la fermeture) */
.faq .ans{transition:grid-template-rows 420ms var(--an-ease),opacity 360ms var(--an-ease)}
.faq .ans>div{transition:translate 420ms var(--an-ease)}
.faq details:not([open]) .ans>div,.faq details.an-ferme .ans>div,.faq details.an-ouvre .ans>div{translate:0 -6px}
.faq details.an-ouvre .ans,.faq details.an-ferme .ans{grid-template-rows:0fr;opacity:0}
.faq summary::before,.faq summary::after{transition:transform 360ms var(--an-ease)}
.faq details.an-ferme summary::before{transform:none}.faq details.an-ferme summary::after{transform:rotate(90deg)}

/* 10. Chiffres clés (montants « À partir de ») : comptent jusqu'à leur valeur (anim.js) ; largeur figée = aucun décalage */
.an-compte{display:inline-block;font-variant-numeric:tabular-nums}

/* 11. /produits : cartes qui apparaissent en cascade (générique ; aucun fichier /produits modifié) */
.js .pc.an-cache{opacity:0;translate:0 16px}
.js .pc.an-vu{transition:opacity 560ms var(--an-ease),translate 640ms var(--an-ease),transform var(--dur-fast,.15s) var(--ease-out,ease),box-shadow var(--dur-fast,.15s);transition-delay:var(--an-d,0ms),var(--an-d,0ms),0s,0s}

/* 12. Changement de page (View Transitions, Safari 18.2+ / Chrome 126+) : fondu un peu plus doux */
::view-transition-old(root){animation-duration:180ms;animation-timing-function:ease-out}
::view-transition-new(root){animation-duration:300ms;animation-timing-function:var(--an-ease)}
}