/* agenda-mouvement.css — grammaire du mouvement de l'agenda (brique B8 ; spec 2026-10-15-planning-agenda-refonte-design § 5).
   Préfixe `ag-m-` pour les classes, `--m-*` pour les jetons. Aucune couleur littérale : l'ombre et le voile viennent de tokens.css.

   Règles de la grammaire : seulement `transform` / `opacity` (jamais height, top, box-shadow animés : l'ombre passe par l'opacité
   d'un pseudo-élément), ≤ 370 ms, un mouvement focal par action, ni lueur ni rebond gratuit.

   Intensité : attribut `data-mouvement` sur UN ancêtre (de préférence <html>, pour que les View Transitions le suivent).
     sobre (défaut, sans attribut) : rebond nul ou quasi (≤ 0,2 %), durées basses de la plage, levée 1,02.
     expressif : ressorts avec léger dépassement (≤ 10 %), durées hautes de la plage (≤ 370 ms), levée 1,03.
   `prefers-reduced-motion: reduce` (ou `data-mouvement-reduit`, posé par forcerReduit() de mouvement.js pour le banc) : aucun
   déplacement, aucune échelle, fondus ≤ 140 ms, plus de décalage entre éléments.

   Les chaînes `linear()` des ressorts sont calculées par `ressortLineaire(zeta, k)` de js/agenda/mouvement.js (masse 1, depuis le
   repos) : sobre settle ζ 1 k 1600 · sheet ζ 1 k 600 · pop ζ 0,9 k 800 ; expressif settle ζ 0,9 k 700 · sheet ζ 0,8 k 380 ·
   pop ζ 0,6 k 800 (tests/agenda_mouvement.test.mjs refait le calcul et compare). */

/* ---------- Jetons : sobre (défaut) ---------- */
:root,
[data-mouvement="sobre"] {
  --m-d-press: 60ms;
  --m-d-fast: 120ms;
  --m-d-base: 180ms;
  --m-d-slow: 280ms;
  --m-d-vue: 280ms;
  --m-d-settle: 186ms;
  --m-d-sheet: 303ms;
  --m-d-pop: 193ms;

  --m-out: cubic-bezier(.2, 0, 0, 1);
  --m-in: cubic-bezier(.3, 0, 1, 1);
  --m-emph-out: cubic-bezier(.05, .7, .1, 1);
  /* Repli sans linear() : la courbe de sortie. Remplacé plus bas quand le moteur connaît linear(). */
  --m-spring-settle: var(--m-out);
  --m-spring-sheet: var(--m-out);
  --m-spring-pop: var(--m-out);

  --m-levee-echelle: 1.02;
  --m-levee-ombre: var(--shadow-elevated);
  --m-decalage: 6px;
  --m-feuille-decalage: 100%;
  --m-stagger: 25ms;
}

/* ---------- Jetons : expressif ---------- */
[data-mouvement="expressif"] {
  --m-d-press: 80ms;
  --m-d-fast: 140ms;
  --m-d-base: 220ms;
  --m-d-slow: 340ms;
  --m-d-vue: 320ms;
  --m-d-settle: 207ms;
  --m-d-sheet: 370ms;
  --m-d-pop: 322ms;

  --m-levee-echelle: 1.03;
  --m-decalage: 10px;
}

/* ---------- Ressorts en linear() ---------- */
@supports (animation-timing-function: linear(0, 1)) {
  :root,
  [data-mouvement="sobre"] {
    --m-spring-settle: linear(0, 0.0245, 0.084, 0.1625, 0.2492, 0.3369, 0.4214, 0.5, 0.5713, 0.635, 0.691, 0.7397, 0.7817, 0.8176, 0.8481, 0.8739, 0.8956, 0.9138, 0.929, 0.9416, 0.9521, 0.9607, 0.9679, 0.9738, 0.9786, 0.9826, 0.9858, 0.9885, 0.9906, 0.9924, 0.9938, 1);
    --m-spring-sheet: linear(0, 0.0245, 0.084, 0.1624, 0.249, 0.3367, 0.4212, 0.4998, 0.5711, 0.6348, 0.6908, 0.7395, 0.7815, 0.8175, 0.848, 0.8738, 0.8955, 0.9137, 0.9289, 0.9415, 0.952, 0.9607, 0.9678, 0.9737, 0.9785, 0.9825, 0.9858, 0.9884, 0.9906, 0.9924, 0.9938, 1);
    --m-spring-pop: linear(0, 0.014, 0.0504, 0.1021, 0.1637, 0.2307, 0.2999, 0.369, 0.436, 0.4998, 0.5595, 0.6147, 0.6651, 0.7107, 0.7516, 0.788, 0.8201, 0.8483, 0.8728, 0.894, 0.9123, 0.928, 0.9413, 0.9525, 0.962, 0.9698, 0.9764, 0.9818, 0.9862, 0.9898, 0.9926, 1);
  }

  [data-mouvement="expressif"] {
    --m-spring-settle: linear(0, 0.014, 0.0505, 0.1023, 0.1639, 0.2309, 0.3003, 0.3693, 0.4364, 0.5002, 0.5599, 0.6151, 0.6655, 0.7111, 0.752, 0.7884, 0.8205, 0.8486, 0.8731, 0.8943, 0.9126, 0.9282, 0.9415, 0.9527, 0.9621, 0.97, 0.9765, 0.9819, 0.9863, 0.9898, 0.9927, 1);
    --m-spring-sheet: linear(0, 0.0239, 0.0843, 0.1671, 0.2617, 0.36, 0.4566, 0.5477, 0.6308, 0.7046, 0.7688, 0.8235, 0.8691, 0.9064, 0.9363, 0.9598, 0.9778, 0.9912, 1.0009, 1.0075, 1.0117, 1.014, 1.0151, 1.0151, 1.0144, 1.0133, 1.0119, 1.0105, 1.009, 1.0075, 1.0062, 1);
    --m-spring-pop: linear(0, 0.0381, 0.1342, 0.2641, 0.4085, 0.5526, 0.6862, 0.8027, 0.8989, 0.9738, 1.0284, 1.0647, 1.0856, 1.0941, 1.0934, 1.0861, 1.0748, 1.0614, 1.0476, 1.0345, 1.0228, 1.0129, 1.005, 0.9991, 0.995, 0.9925, 0.9913, 0.991, 0.9915, 0.9925, 0.9937, 1);
  }
}

/* ---------- Mouvement réduit : fondus seulement, ≤ 140 ms ----------
   Même bloc deux fois : la requête système et l'attribut `data-mouvement-reduit` (banc de recette). Doit rester APRÈS les deux
   intensités et le bloc linear() ci-dessus (même spécificité, le dernier gagne). */
@media (prefers-reduced-motion: reduce) {
  :root,
  [data-mouvement] {
    --m-d-press: 60ms;
    --m-d-fast: 100ms;
    --m-d-base: 140ms;
    --m-d-slow: 140ms;
    --m-d-vue: 140ms;
    --m-d-settle: 140ms;
    --m-d-sheet: 140ms;
    --m-d-pop: 140ms;
    --m-spring-settle: var(--m-out);
    --m-spring-sheet: var(--m-out);
    --m-spring-pop: var(--m-out);
    --m-levee-echelle: 1;
    --m-decalage: 0px;
    --m-feuille-decalage: 0%;
    --m-stagger: 0ms;
  }
}

:root[data-mouvement-reduit],
[data-mouvement-reduit] [data-mouvement],
[data-mouvement][data-mouvement-reduit] {
  --m-d-press: 60ms;
  --m-d-fast: 100ms;
  --m-d-base: 140ms;
  --m-d-slow: 140ms;
  --m-d-vue: 140ms;
  --m-d-settle: 140ms;
  --m-d-sheet: 140ms;
  --m-d-pop: 140ms;
  --m-spring-settle: var(--m-out);
  --m-spring-sheet: var(--m-out);
  --m-spring-pop: var(--m-out);
  --m-levee-echelle: 1;
  --m-decalage: 0px;
  --m-feuille-decalage: 0%;
  --m-stagger: 0ms;
}

/* ---------- Levée / pose ----------
   L'élément doit être positionné (les blocs de la grille le sont) ; :where() garde la spécificité à 0 pour ne pas contrarier
   un `position: absolute` du bloc ; `isolation` fait de l'élément son propre contexte d'empilement (l'ombre, z-index -1, reste au-dessus
   des fonds de ses ancêtres). Limite : un élément en `overflow: hidden` rogne son propre ::after, donc son ombre : porter la classe
   par l'enveloppe du bloc et rogner le contenu par un enfant. L'échelle est animée en WAAPI par soulever() / poser() ; la classe `ag-m-leve` tient l'état
   d'arrivée. L'ombre n'est JAMAIS animée en box-shadow : elle est portée par ::after dont seule l'opacité change. */
:where(.ag-m-ombre) { position: relative; isolation: isolate; }

.ag-m-ombre::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--m-levee-ombre);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transition: opacity var(--m-d-settle) var(--m-out);
}

.ag-m-leve {
  scale: var(--m-levee-echelle);
}

.ag-m-leve::after {
  opacity: 1;
  transition-duration: var(--m-d-fast);
}

/* Posé : état de repos explicite (retire levée et ombre, retour en ressort si la classe est utilisée seule). */
.ag-m-pose {
  scale: 1;
  transition: scale var(--m-d-settle) var(--m-spring-settle);
}

/* ---------- Apparition / sortie ---------- */
@keyframes ag-m-apparition {
  from { opacity: 0; transform: translateY(var(--m-decalage)); }
  to { opacity: 1; transform: none; }
}

@keyframes ag-m-sortie {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(calc(var(--m-decalage) * -.5)); }
}

.ag-m-apparition {
  animation: ag-m-apparition var(--m-d-base) var(--m-emph-out) backwards;
}

.ag-m-sortie {
  animation: ag-m-sortie var(--m-d-fast) var(--m-in) forwards;
}

/* ---------- Feuille ouverte / fermée et voile ---------- */
@keyframes ag-m-feuille-entree {
  from { transform: translateY(var(--m-feuille-decalage)); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes ag-m-feuille-sortie {
  from { transform: none; opacity: 1; }
  to { transform: translateY(var(--m-feuille-decalage)); opacity: 0; }
}

@keyframes ag-m-voile-entree {
  from { opacity: 0; }
  to { opacity: 1; }
}

.ag-m-feuille-ouverte {
  animation: ag-m-feuille-entree var(--m-d-sheet) var(--m-spring-sheet) backwards;
}

.ag-m-feuille-fermee {
  animation: ag-m-feuille-sortie var(--m-d-base) var(--m-in) forwards;
}

.ag-m-voile {
  background: var(--voile);
  animation: ag-m-voile-entree var(--m-d-base) var(--m-out) backwards;
}

.ag-m-voile[hidden],
.ag-m-feuille-ouverte[hidden],
.ag-m-feuille-fermee[hidden] {
  display: none;
}

/* ---------- Toast ---------- */
.ag-m-toasts {
  position: fixed;
  inset-inline: 0;
  bottom: calc(var(--ag-toast-bas, 16px) + env(safe-area-inset-bottom, 0px));
  z-index: var(--ag-toast-z, 2000);
  display: flex;
  justify-content: center;
  padding-inline: 16px;
  pointer-events: none;
}

.ag-m-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-3, 14px);
  max-width: min(100%, 420px);
  padding: var(--sp-2, 10px) var(--sp-3, 14px);
  border: 1px solid var(--ligne-2);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  color: var(--texte);
  box-shadow: var(--shadow-card-hover);
  font: inherit;
  line-height: 1.35;
}

.ag-m-toast-entree {
  animation: ag-m-apparition var(--m-d-base) var(--m-emph-out) backwards;
}

.ag-m-toast-texte {
  min-width: 0;
  overflow-wrap: anywhere;
  hyphens: none;
}

.ag-m-toast-action {
  flex: none;
  min-height: 44px;
  min-width: 44px;
  margin: calc(var(--sp-2, 10px) * -1) calc(var(--sp-3, 14px) * -1) calc(var(--sp-2, 10px) * -1) 0;
  padding: 0 var(--sp-3, 14px);
  border: 0;
  border-radius: var(--r-lg);
  background: none;
  color: var(--texte);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.ag-m-toast-action:focus-visible {
  outline: 2px solid var(--texte-2);
  outline-offset: -2px;
}

/* ---------- Changement de vue (View Transitions) ----------
   La nouvelle vue apparaît en fondu PAR-DESSUS l'ancienne (320 ms, `--m-d-vue` ; 140 ms en mouvement réduit) : pas de fondu
   croisé additif (mix-blend-mode), donc pas de creux de luminosité, et aucune animation de width / height du groupe racine
   (celles de la feuille de style du navigateur sont coupées) : opacity seulement. Les jetons sont lus sur <html> : poser
   `data-mouvement` sur <html> pour que la transition suive l'intensité. L'overlay ne doit JAMAIS bloquer un geste :
   pointer-events none (et mouvement.js interrompt la transition au premier appui). */
::view-transition {
  pointer-events: none;
}

::view-transition-group(root) {
  animation: none;
}

::view-transition-old(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-new(root) {
  animation: ag-m-voile-entree var(--m-d-vue) var(--m-out) backwards;
  mix-blend-mode: normal;
}