/* ---------- Mouvement : une seule base pour tout le site ----------
   28/10 (stabilite) : la version "mouvements doux" (hauteurs animees en grille 0fr -> 1fr, ressort,
   copie de fenetre en sortie, cascade d'animations dans les onglets) a ete jugee pire qu'avant par Kylian.
   Mesures CPU x4 dans MESURES-FLUIDITE.md (tests/e2e/fluidite.mesure.mjs). Regles gardees :
   - seulement transform et opacity, 120 a 180 ms, jamais la hauteur d'un bloc ;
   - un seul element anime a la fois (pas d'animation sur les enfants d'un element anime) ;
   - pas de rebond ; rien a la fermeture (la fenetre disparait tout de suite) ;
   - prefers-reduced-motion : theme.css coupe toutes les animations. */
:root {
  --duree-courte: 140ms;
  --duree: 180ms;
  --doux: cubic-bezier(.22, 1, .36, 1);
}

/* Questions "Si oui" : toujours dans la page (l'etape n'est plus reconstruite a chaque reponse),
   affichees ou cachees d'un coup ; seule la question qui apparait fait un fondu court (q-appear,
   pose par qSyncConds). */
.q-cond { display: none; }
.q-cond.open { display: block; }
@keyframes nsCondIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.q-cond.q-appear { animation: nsCondIn var(--duree-courte) var(--doux); }
#q-wizard-body .q-list { display: flex; flex-direction: column; gap: 1.1rem; }

/* Fenetre du questionnaire : meme hauteur a toutes les etapes. Mesure : sans elle, "Oui" / "Non" et
   Suivant decalaient toute la fenetre (layout-shift 0,047 et 0,023, centree verticalement). */
#m-questionnaire .mbox { height: 90vh; }
@media (max-width: 640px) { #m-questionnaire .mbox { height: 96vh; } }
@media (max-height: 600px) { #m-questionnaire .mbox { height: 98vh; } }

/* Changement d'etape : fondu court, sans glissement. */
.q-step-next, .q-step-prev { animation: nsFade var(--duree-courte) ease both; }

/* Fenetres : un seul fondu (fond + boite ensemble), sortie immediate. La boite ne s'anime pas en plus
   (theme.css le faisait : deux animations imbriquees). */
.overlay { animation: nsFade var(--duree-courte) ease; }
.overlay > .mbox { animation: none; }

/* Onglets : la section entre en fondu, ses blocs ne s'animent pas en plus (theme.css le faisait). */
.anim-in { animation: nsTabIn var(--duree-courte) var(--doux) both; }
.anim-in > .card, .anim-in > .dark-banner, .anim-in > .acc-card, .anim-in > div { animation: none; }

/* Notification : glisse depuis le bas, s'en va en fondu. */
@keyframes nsToastUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes nsToastOut { from { opacity: 1; } to { opacity: 0; } }
.toast { animation: nsToastUp var(--duree) var(--doux) forwards; }
.toast.ns-out { animation: nsToastOut var(--duree-courte) ease forwards; }