:root{
/* Courbes — les courbes natives du navigateur manquent de nerf. Jamais d'ease-in sur une UI :
   le départ lent se lit comme une latence à l'instant précis où l'œil regarde. */
--ease-out:cubic-bezier(0.23,1,0.32,1); /* @kind other */ /* entrées, sorties, feedback de pression */
--ease-in-out:cubic-bezier(0.77,0,0.175,1); /* @kind other */ /* déplacement d'un point A à B */
--ease-hover:cubic-bezier(0.4,0,0.2,1); /* @kind other */ /* couleur, opacité, survol */
--ease-precise:var(--ease-hover); /* @kind other */ /* alias historique */

/* Durées — plafond 300ms sur tout ce qui est fonctionnel. Les grandes surfaces (tiroir,
   modale) ont droit à plus, jamais les micro-interactions. */
--duration-press:120ms; /* @kind other */
--duration-fast:130ms; /* @kind other */
--duration-base:220ms; /* @kind other */
--duration-panel:320ms; /* @kind other */
--stagger-step:50ms; /* @kind other */
}

/* Éléments pressables — le scale(0.97) confirme que l'interface a entendu le clic.
   Le survol est réservé aux pointeurs fins : sur tactile, il se déclenche au tap. */
.ws-pressable{transition:transform var(--duration-press) var(--ease-out),background var(--duration-fast) var(--ease-hover),border-color var(--duration-fast) var(--ease-hover),color var(--duration-fast) var(--ease-hover)}
.ws-pressable:active:not(:disabled){transform:scale(0.97)}
.ws-pressable:focus-visible,.ws-field:focus-visible,.ws-nav-link:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

@media (hover:hover) and (pointer:fine){
.ws-btn[data-variant="primary"]:hover:not(:disabled){background:var(--ink-700);border-color:var(--ink-700)}
.ws-btn[data-variant="secondary"]:hover:not(:disabled){border-color:var(--line-strong)}
.ws-btn[data-variant="accent"]:hover:not(:disabled){background:var(--copper-600);border-color:var(--copper-600)}
.ws-btn[data-variant="ghost"]:hover:not(:disabled){color:var(--copper-600)}
.ws-field:hover:not(:focus):not(:disabled){border-color:var(--line-strong)}
.ws-nav-link[data-tone="onDark"]:not([data-active="true"]):hover{color:#FFFFFF;background:var(--glass-light)}
.ws-nav-link[data-tone="onLight"]:not([data-active="true"]):hover{color:var(--text-primary);background:var(--surface-2)}
.ws-card-interactive:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.ws-tag-remove:hover{color:var(--text-primary)}
}

/* Champs — la bordure cuivre au focus est le seul accent de couleur d'un formulaire. */
.ws-field{transition:border-color var(--duration-fast) var(--ease-hover),background var(--duration-fast) var(--ease-hover)}
.ws-field:focus{border-color:var(--copper-500)}
.ws-nav-link{transition:color var(--duration-fast) var(--ease-hover),background var(--duration-fast) var(--ease-hover)}
.ws-tag-remove{transition:color var(--duration-fast) var(--ease-hover)}
.ws-card-interactive{transition:transform var(--duration-base) var(--ease-out),border-color var(--duration-fast) var(--ease-hover)}
.ws-card-interactive:active{transform:translateY(0) scale(0.995)}

/* Apparition au défilement. Rien ne surgit de scale(0) : une pièce a une silhouette
   même avant d'être en main. */
@keyframes ws-rise{from{opacity:0;transform:translateY(10px) scale(0.985)}to{opacity:1;transform:none}}
.ws-reveal{animation:ws-rise var(--duration-panel) var(--ease-out) both;animation-delay:calc(var(--ws-index,0) * var(--stagger-step))}

/* Mouvement réduit : on garde ce qui aide à comprendre (couleur, opacité),
   on retire le déplacement. */
@media (prefers-reduced-motion:reduce){
.ws-pressable:active:not(:disabled),.ws-card-interactive:hover,.ws-card-interactive:active{transform:none}
.ws-reveal{animation:none;opacity:1;transform:none}
}