/* =========================================================================
   Phoss vivant — la couche de mouvement (27.09.2026)
   Ce qui bouge, et pourquoi : une page qui entre en cascade dit qu'elle est
   neuve ; une barre qui pousse dit qu'un chiffre vient d'être calculé ; une
   pastille qui apparaît d'un ressort attire l'œil sur un état ; un message
   qui glisse puis s'efface ne réclame rien. Tout s'éteint sous
   prefers-reduced-motion. Les jetons de durée et d'aisance viennent de
   transitions.dev (transitions.css).
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {

  /* --- La page entre en cascade ------------------------------------------- */
  @keyframes phoss-entre {
    from { opacity: 0; transform: translateY(8px); filter: blur(2px); }
    to   { opacity: 1; transform: none; filter: blur(0); }
  }
  .contenu > .carte, .contenu > .index-chiffres > .carte, .contenu > .fiche-entete,
  .contenu > .barre-actions, .grille-tableau-bord > .carte, .grille-fiche > .carte,
  .contenu > .entete-module {
    animation: phoss-entre var(--duration-slow, 400ms) var(--ease-smooth-out, cubic-bezier(.22, 1, .36, 1)) backwards;
  }
  .contenu > *:nth-child(2) { animation-delay: 40ms; }
  .contenu > *:nth-child(3) { animation-delay: 80ms; }
  .contenu > *:nth-child(4) { animation-delay: 120ms; }
  .contenu > *:nth-child(5) { animation-delay: 160ms; }
  .contenu > *:nth-child(6) { animation-delay: 200ms; }
  .index-chiffres > .carte:nth-child(2), .grille-tableau-bord > .carte:nth-child(2) { animation-delay: 60ms; }
  .index-chiffres > .carte:nth-child(3), .grille-tableau-bord > .carte:nth-child(3) { animation-delay: 120ms; }
  .index-chiffres > .carte:nth-child(4) { animation-delay: 180ms; }

  /* --- Les chiffres arrivent en dernier, nets ------------------------------- */
  @keyframes phoss-chiffre {
    from { opacity: 0; transform: translateY(6px) scale(.98); filter: blur(3px); }
    to   { opacity: 1; transform: none; filter: blur(0); }
  }
  .indicateur-carte .valeur { animation: phoss-chiffre 500ms var(--ease-smooth-out, cubic-bezier(.22, 1, .36, 1)) 180ms backwards; }

  /* --- Les barres du graphe poussent -------------------------------------- */
  @keyframes phoss-pousse { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  .graphe-barres .barre {
    transform-box: fill-box; transform-origin: bottom center;
    animation: phoss-pousse 600ms var(--ease-smooth-out, cubic-bezier(.22, 1, .36, 1)) backwards;
  }
  .graphe-barres .barre:nth-child(2)  { animation-delay: 40ms; }
  .graphe-barres .barre:nth-child(3)  { animation-delay: 80ms; }
  .graphe-barres .barre:nth-child(4)  { animation-delay: 120ms; }
  .graphe-barres .barre:nth-child(5)  { animation-delay: 160ms; }
  .graphe-barres .barre:nth-child(6)  { animation-delay: 200ms; }
  .graphe-barres .barre:nth-child(7)  { animation-delay: 240ms; }
  .graphe-barres .barre:nth-child(8)  { animation-delay: 280ms; }
  .graphe-barres .barre:nth-child(9)  { animation-delay: 320ms; }
  .graphe-barres .barre:nth-child(10) { animation-delay: 360ms; }
  .graphe-barres .barre:nth-child(11) { animation-delay: 400ms; }
  .graphe-barres .barre:nth-child(12) { animation-delay: 440ms; }

  /* --- Les pastilles de statut apparaissent d'un ressort -------------------- */
  @keyframes phoss-ressort {
    from { opacity: 0; transform: scale(.8); }
    60%  { transform: scale(1.06); }
    to   { opacity: 1; transform: scale(1); }
  }
  .pastille-statut { animation: phoss-ressort 380ms var(--ease-bounce, cubic-bezier(.34, 1.36, .64, 1)) 120ms backwards; }

  /* --- Les lignes d'un tableau se posent une à une ------------------------- */
  @keyframes phoss-ligne { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
  table.liste tbody tr { animation: phoss-ligne 260ms ease-out backwards; }
  table.liste tbody tr:nth-child(2) { animation-delay: 30ms; }
  table.liste tbody tr:nth-child(3) { animation-delay: 60ms; }
  table.liste tbody tr:nth-child(4) { animation-delay: 90ms; }
  table.liste tbody tr:nth-child(5) { animation-delay: 120ms; }
  table.liste tbody tr:nth-child(6) { animation-delay: 150ms; }
  table.liste tbody tr:nth-child(n+7) { animation-delay: 180ms; }

  /* --- Ce que HTMX remplace se fond, il ne saute pas ------------------------ */
  .htmx-settling table.liste tbody tr, .htmx-settling.carte { animation: phoss-entre 250ms ease-out backwards; }
  .htmx-request .htmx-indicator { opacity: 1; }

  /* --- Les entrées de menu, les boutons, les cartes réagissent au doigt ------ */
  .laterale a.entree .icone, .onglets-bas .onglet .icone { transition: transform 200ms var(--ease-bounce, cubic-bezier(.34, 1.36, .64, 1)); }
  .laterale a.entree:hover .icone, .onglets-bas .onglet.actif .icone { transform: scale(1.12); }
  .btn { transition: background-color 150ms, border-color 150ms, color 150ms, transform 160ms var(--ease-bounce, cubic-bezier(.34, 1.36, .64, 1)), box-shadow 160ms; }
  .btn:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(10, 10, 10, .08); }
  .btn:active:not(:disabled) { transform: translateY(1px) scale(.98); box-shadow: none; }
  .carte { transition: box-shadow 200ms, border-color 200ms; }
  .filtre-pastille { transition: background-color 150ms, color 150ms, transform 160ms var(--ease-bounce, cubic-bezier(.34, 1.36, .64, 1)); }
  .filtre-pastille:hover { transform: translateY(-1px); }

  /* --- Les messages : un toast qui glisse, une coche qui se dessine --------- */
  .flashes { position: fixed; top: calc(var(--bandeau, 58px) + 8px); right: 16px; left: 16px; max-width: none; z-index: 90; display: grid; gap: 8px; justify-items: end; pointer-events: none; }
  .flash {
    pointer-events: auto; display: inline-flex; align-items: center; gap: 10px; max-width: 520px;
    padding: 10px 16px; border-radius: 14px; background: var(--encre); color: var(--surface);
    box-shadow: 0 12px 32px rgba(10, 10, 10, .18); font-weight: 500;
  }
  .flash-error { background: var(--danger); }
  .flash-success .t-success-check svg { width: 18px; height: 18px; }
  .flash-success .t-success-check svg path { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
  .flash.t-toast { --toast-distance: -12px; --toast-scale: .96; --toast-blur: 4px; --toast-open: 380ms; --toast-close: 250ms; --toast-ease: cubic-bezier(.22, 1, .36, 1); }
  .flash.t-toast.is-fermeture { opacity: 0; transform: translateY(-12px) scale(.96); filter: blur(4px); }

  /* --- La saisie refusée tremble ------------------------------------------ */
  @keyframes phoss-tremble {
    10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); }
  }
  .champ.champ--refuse input, .champ.champ--refuse select, .champ.champ--refuse textarea {
    animation: phoss-tremble 500ms cubic-bezier(.36, .07, .19, .97) backwards; border-color: var(--danger);
  }

  .flash-error.t-toast.is-open { animation: phoss-tremble 500ms cubic-bezier(.36, .07, .19, .97) 380ms backwards; }

  /* --- L'état vide se révèle en mosaïque ------------------------------------ */
  .etat-vide-mosaique { display: block; margin: 0 auto 8px; width: 64px; height: 64px; }
}

/* Sans mouvement : tout est visible d'emblée, rien ne dépend d'une animation. */
@media (prefers-reduced-motion: reduce) {
  .flashes { position: fixed; top: calc(var(--bandeau, 58px) + 8px); right: 16px; left: 16px; max-width: none; z-index: 90; display: grid; gap: 8px; justify-items: end; }
  .flash { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 14px; background: var(--encre); color: var(--surface); font-weight: 500; }
  .flash-error { background: var(--danger); }
  .flash.t-toast { opacity: 1; transform: none; filter: none; }
  .t-success-check { opacity: 1; }
  .etat-vide-mosaique { display: none; }
}