/* ============ LE MOUVEMENT — répertoire commun ============
   Quatre gestes, pas davantage. Chacun pioche dans les tokens de 00-tokens.css
   (--mo-1/2/3, --sortie, --entree-sortie, --ressort) : pour animer quelque
   chose de neuf, on REPREND un de ces gestes — on n'invente pas une durée.

     1. la vue qui change   — l'ancienne s'efface, la nouvelle se pose
     2. la modale qui s'ouvre — le voile, puis la carte qui se présente
     3. l'appui             — tout ce qui se clique s'enfonce d'un souffle
     4. le mouvement réduit — tout s'éteint d'un bloc

   Aucune bibliothèque : le changement de vue passe par l'API View Transitions
   du navigateur (natif, en dur dans Chrome/Edge/Safari ; Firefox bascule
   comme avant, sans fondu — le repli est l'absence d'effet, jamais un bug). */

/* ---- 1. LE CHANGEMENT DE VUE ----
   Seule la vue porte un nom de transition : la barre latérale, elle, ne bouge
   pas d'un pixel — c'est précisément ce qui donne l'impression de solidité.
   On coupe donc le fondu par défaut de la racine, qui embarquerait tout. */
.view.active{view-transition-name:vue;}
::view-transition-old(root),::view-transition-new(root){animation:none;}
::view-transition-old(vue){animation:moVueSortie var(--mo-2) var(--entree-sortie) both;}
::view-transition-new(vue){animation:moVueEntree var(--mo-3) var(--sortie) both;}
@keyframes moVueSortie{to{opacity:0;}}
@keyframes moVueEntree{from{opacity:0;transform:translateY(7px);}}

/* ---- 2. LA MODALE ----
   Le voile fond, la carte se pose — 4 px de montée et un souffle d'échelle,
   pas un zoom. L'animation ne rejoue pas quand le contenu de la modale est
   réécrit (fiche marque → fiche offre) : elle est accrochée à l'ouverture. */
.modal-bg.open{animation:moVoile var(--mo-2) var(--sortie);}
.modal-bg.open .modal{animation:moPose var(--mo-3) var(--sortie);}
@keyframes moVoile{from{opacity:0;}}
@keyframes moPose{from{opacity:0;transform:translateY(4px) scale(.99);}}

/* ---- 3. L'APPUI ----
   Tout ce qui se presse s'enfonce, d'un même geste. Pas de transition
   déclarée : l'enfoncement est instantané, le relâchement aussi — c'est le
   propre d'un appui, et ça ne peut interférer avec aucune transition
   existante (les .btn portent déjà les leurs, on ne les réécrit pas). */
.btn:active:not(:disabled), .of-btn:active:not(:disabled), .poste-go:active,
.rseg:active, .rfilter:active, .vol:active,
.seg:active, .rsort-trigger:active, .info-btn:active, .toast-act:active{
  transform:scale(.965);
}
/* Les boutons IMPORTANTS ont droit à un appui qui s'anime, pas seulement à un
   cran : leur transition est restée celle de 00b (fond, couleur, contour) — on
   la redit À L'IDENTIQUE en y ajoutant le transform. Redéclarer la liste
   complète est le seul moyen d'ajouter une propriété sans rien perdre. */
.btn{transition:background .15s,color .15s,border-color .15s,transform var(--mo-1) var(--sortie);}

/* ---- 4. LES LISTES QUI SE POSENT ----
   Les collections d'offres — et tous les ensembles du même genre — arrivent
   verticalement : chaque entrée monte de 6 px en fondu, les huit premières en
   léger décalé, le reste d'un bloc (une cascade de cent cartes serait une
   attente, pas un effet). Le geste sert AUSSI aux sous-parties des fiches :
   changer d'onglet dans une fiche fait descendre le nouveau contenu en place.
   La galerie des marques reste à l'écart : ses cartes sont animées par FLIP
   (flipReve), deux moteurs sur le même élément se disputeraient le transform. */
.find-list>.find-row, #veille-grid .grid>*, .postes-grille>.poste-card,
.fiche .f-corps>section:not([hidden]){
  animation:moListe var(--mo-2) var(--sortie) backwards;
}
@keyframes moListe{from{opacity:0;transform:translateY(6px);}}
.find-list>.find-row:nth-child(2), #veille-grid .grid>*:nth-child(2), .postes-grille>.poste-card:nth-child(2){animation-delay:.03s;}
.find-list>.find-row:nth-child(3), #veille-grid .grid>*:nth-child(3), .postes-grille>.poste-card:nth-child(3){animation-delay:.06s;}
.find-list>.find-row:nth-child(4), #veille-grid .grid>*:nth-child(4), .postes-grille>.poste-card:nth-child(4){animation-delay:.09s;}
.find-list>.find-row:nth-child(5), #veille-grid .grid>*:nth-child(5), .postes-grille>.poste-card:nth-child(5){animation-delay:.12s;}
.find-list>.find-row:nth-child(6), #veille-grid .grid>*:nth-child(6), .postes-grille>.poste-card:nth-child(6){animation-delay:.15s;}
.find-list>.find-row:nth-child(7), #veille-grid .grid>*:nth-child(7), .postes-grille>.poste-card:nth-child(7){animation-delay:.18s;}
.find-list>.find-row:nth-child(n+8), #veille-grid .grid>*:nth-child(n+8), .postes-grille>.poste-card:nth-child(n+8){animation-delay:.2s;}

/* ---- 5. LE MOUVEMENT RÉDUIT ---- */
@media (prefers-reduced-motion:reduce){
  .view.active{view-transition-name:none;}
  .modal-bg.open,.modal-bg.open .modal{animation:none;}
  .find-list>.find-row, #veille-grid .grid>*, .postes-grille>.poste-card,
  .fiche .f-corps>section:not([hidden]){animation:none;}
  .btn:active:not(:disabled), .of-btn:active:not(:disabled), .poste-go:active,
  .rseg:active, .rfilter:active, .vol:active,
  .seg:active, .rsort-trigger:active, .info-btn:active, .toast-act:active{transform:none;}
}