/**
 * Roddier App — Kit de mouvement & états (lot C, purement additif)
 * ──────────────────────────────────────────────────────────────────────
 * Chargé APRÈS app.css, ui-kit.css, brand-signature.css et components-kit.css :
 * consomme leurs tokens (--dur-*, --ease, --ease-spring, --bg-*, --label-*,
 * --fill-*, --separator, --system-*, --radius-*, --shadow-*, --tint, --r-pill…)
 * et n'en REDÉFINIT aucun existant.
 *
 * Tout ici est OPT-IN : aucune transition ni animation globale sur `*` ou
 * `body`. On n'ajoute QUE des sélecteurs sous des préfixes inédits, et on
 * RÉUTILISE les primitives déjà présentes :
 *   - .skeleton / .skeleton-text / .skeleton-circle existent DÉJÀ dans
 *     ui-kit.css (shimmer + coupure reduced-motion). On NE les redéfinit PAS.
 *     On AJOUTE seulement les composites .skeleton-line et .skeleton-card,
 *     bâtis par-dessus la primitive .skeleton.
 *   - le système flash/toast (.app-flash, #app-toast-stack, .app-island,
 *     window.appToast) existe DÉJÀ dans app.css + public/toast.js. Le CONTRAT
 *     SERVEUR est intact : on ne change ni le markup .app-flash ni l'API JS.
 *     On AJOUTE un raffinement OPT-IN derrière [data-toast-autodismiss] :
 *     glissement depuis le haut + barre de progression d'auto-dismiss, piloté
 *     par public/js/toast-autodismiss.js (idempotent, sélecteur opt-in).
 *
 * Charte : navy #0f2544 + halos bleus DÉSATURÉS. Transitions 150–200 ms,
 * jamais tape-à-l'œil. Bleu saturé évité. Pas d'émoji (SVG côté vue).
 * reduced-motion neutralise shimmer / glissement / transitions introduites ici.
 *
 * Sommaire :
 *   1. Transitions douces utilitaires — .u-transition (+ --fast / --slow)
 *   2. Skeletons composites — .skeleton-line / .skeleton-card
 *   3. Flash auto-dismiss — [data-toast-autodismiss] (slide-in + progression)
 *   4. reduced-motion — neutralise les ajouts ci-dessus
 *   5. Dark mode — variantes de couleur (skeleton renfort / barre flash)
 */

/* ════════════════════════════════════════════════════════════════════
   1. Transitions douces utilitaires — .u-transition
   Opt-in : à poser sur un élément pour lui donner des transitions sobres
   sur les propriétés visuelles courantes (color, background, border,
   box-shadow, transform). JAMAIS `transition: all` (coûteux + casse des
   choses). Durée par défaut 180 ms ; variantes --fast (150) / --slow (200).
   Consomme --ease d'app.css.
   ════════════════════════════════════════════════════════════════════ */
.u-transition {
  transition-property: color, background-color, border-color, box-shadow, transform, opacity;
  transition-duration: 0.18s;
  transition-timing-function: var(--ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.u-transition--fast { transition-duration: var(--dur-fast, 0.15s); }
.u-transition--slow { transition-duration: 0.2s; }

/* ════════════════════════════════════════════════════════════════════
   2. Skeletons composites — .skeleton-line / .skeleton-card
   S'appuient sur la primitive .skeleton (ui-kit.css) : poser .skeleton
   ET un composite. Le shimmer + sa coupure reduced-motion sont déjà
   gérés par .skeleton dans ui-kit.css → on n'ajoute ici que des FORMES.
   Opt-in (Julien / JS posent les classes pendant le chargement).
   Exemple : <div class="skeleton skeleton-card">…lignes…</div>
   ════════════════════════════════════════════════════════════════════ */

/* Ligne de texte (épaisseur par défaut), avec largeurs utilitaires. */
.skeleton-line {
  height: 0.85em;
  margin: 0.45em 0;
  border-radius: var(--radius-sm, 6px);
}
.skeleton-line--sm { height: 0.7em; }
.skeleton-line--lg { height: 1.1em; }
.skeleton-line--w90 { width: 90%; }
.skeleton-line--w75 { width: 75%; }
.skeleton-line--w60 { width: 60%; }
.skeleton-line--w40 { width: 40%; }

/* Bloc « carte » de chargement : surface neutre + padding, à remplir de
   .skeleton-line. Hérite du shimmer si on lui ajoute aussi .skeleton. */
.skeleton-card {
  display: block;
  padding: 1rem 1.1rem;
  border: 1px solid var(--separator);
  border-radius: var(--radius-lg, 14px);
  background: var(--bg-secondary);
}
.skeleton-card > .skeleton-line:last-child { margin-bottom: 0; }

/* ════════════════════════════════════════════════════════════════════
   3. Flash auto-dismiss — [data-toast-autodismiss]
   Raffinement OPT-IN d'une bannière .app-flash existante (markup serveur
   INCHANGÉ : on ne fait qu'ajouter l'attribut data-* côté vue si on le
   souhaite). Apporte un glissement d'entrée depuis le haut + une barre de
   progression matérialisant l'auto-dismiss. La barre s'anime via CSS ;
   le retrait du nœud est piloté par public/js/toast-autodismiss.js, qui
   pose .toast-dismissing pour la sortie.
   ════════════════════════════════════════════════════════════════════ */
.app-flash[data-toast-autodismiss] {
  position: relative;
  overflow: hidden;
  animation: motionFlashSlideIn 0.28s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) both;
}

/* Barre de progression : durée pilotée par --toast-duration (posée par le JS,
   repli 4 s). Couleur teintée selon le type, via la variable --toast-bar. */
.app-flash[data-toast-autodismiss]::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  transform-origin: left center;
  background: var(--toast-bar, var(--label-tertiary));
  animation: motionFlashProgress var(--toast-duration, 4000ms) linear both;
}
.app-flash-success[data-toast-autodismiss] { --toast-bar: var(--system-green); }
.app-flash-error[data-toast-autodismiss]   { --toast-bar: var(--system-red); }
.app-flash-warning[data-toast-autodismiss] { --toast-bar: var(--system-orange); }
.app-flash-info[data-toast-autodismiss]    { --toast-bar: var(--system-blue); }

/* Survol : le JS pose .toast-paused → on suspend la barre de progression
   (le ::after ne peut pas être ciblé par JS, d'où ce relais CSS). */
.app-flash[data-toast-autodismiss].toast-paused::after {
  animation-play-state: paused;
}

/* Sortie : repli vers le haut + fondu (posée par le JS avant le retrait). */
.app-flash[data-toast-autodismiss].toast-dismissing {
  animation: motionFlashSlideOut 0.24s var(--ease, ease) both;
}

@keyframes motionFlashSlideIn {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes motionFlashSlideOut {
  from { opacity: 1; transform: none; max-height: 12rem; }
  to   { opacity: 0; transform: translateY(-12px); max-height: 0; }
}
@keyframes motionFlashProgress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* ════════════════════════════════════════════════════════════════════
   4. reduced-motion — neutralise tout ce qu'on introduit ici
   (Le shimmer .skeleton et les toasts existants sont déjà coupés ailleurs ;
   ici on coupe NOS ajouts : transitions utilitaires, glissement + barre.)
   ════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .u-transition,
  .u-transition--fast,
  .u-transition--slow { transition: none; }

  .app-flash[data-toast-autodismiss] { animation: none; }
  .app-flash[data-toast-autodismiss]::after { animation: none; display: none; }
  .app-flash[data-toast-autodismiss].toast-dismissing {
    animation: none;
    opacity: 0;
  }
}

/* ════════════════════════════════════════════════════════════════════
   5. Dark mode — variantes de couleur
   Les surfaces (.skeleton-card) et la barre de progression suivent déjà les
   tokens (donc le thème). On renforce juste le contraste de la piste de
   progression sombre pour qu'elle reste perceptible sur fond élevé.
   ════════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] .skeleton-card {
  background: var(--bg-elevated, #1c1c1e);
}
:root[data-theme="dark"] .app-flash[data-toast-autodismiss]::after {
  opacity: 0.9;
}