/* Elevora CRM — css/boutons.css  [V36] 13/10/2026, document 2 de Célian, étape 11b (§9 : « animation sur TOUS les boutons du CRM »)

   UNE SEULE définition du mouvement des boutons, pour les trois espaces (Admin, Partenaire, Client). Chargée par index.html et
   client.html, en dernier : tout bouton, présent ou futur, en hérite sans rien déclarer. Elle ne touche ni aux couleurs, ni aux
   tailles, ni aux polices (ce sont celles de chaque composant) : seulement au mouvement.

   Modèle : les boutons qui avaient déjà une animation dans le CRM (.btn, .btn-p, .btn-sm… de css/elevora.css : 180 ms, courbe
   cubic-bezier(.2,.8,.3,1), relief de 1 px au survol, enfoncement à l'appui). Ces valeurs vivent maintenant ci-dessous, en variables.

   Les états, pour chaque bouton :
     survol       fondu de couleur (fond, texte, contour) + relief de 1 px vers le haut (propriété `translate`) ;
     appui        enfoncement léger (propriété `scale`, 0,97) ;
     clavier      contour visible (2 px) qui se pose en 160 ms, avec un très léger retour d'échelle ;
     chargement   [aria-busy="true"] : désactivé, atténué, petit cercle qui tourne (transform) — ElvBouton.occupe(), js/00z-animations.js ;
     désactivé    :disabled / [aria-disabled="true"] : atténué, aucun effet de survol ni d'appui ;
     succès       [data-etat="ok"] : une coche brève après un enregistrement.
   Mouvement : `translate`, `scale`, `rotate` et l'opacité seulement (compositeur du navigateur, aucun calcul de mise en page, aucun
   décalage du contenu autour). Les propriétés `translate` et `scale` s'ajoutent à un éventuel `transform` du bouton (un bouton centré
   par translateY(-50%) ne bouge pas de sa place).

   Coupé de deux façons, par les mêmes variables (le retour visuel — changement de couleur, contour — est conservé dans les deux cas) :
     · le réglage système « réduire les animations » (@media prefers-reduced-motion) ;
     · l'interrupteur « Réduire aussi les animations d'interface » des réglages du compte (Paramètres → Affichage ; Mon profil ; espace
       client → Informations) : js/00z-animations.js pose html[data-anim-ui="reduit"].
   Sur écran tactile (@media hover:none) aucun relief au survol n'est posé — il resterait bloqué après un toucher : le retour se fait
   à l'appui.

   Qui est un « bouton » : button, input de type button / submit / reset, [role=button|tab|menuitem*], summary, tout élément qui
   porte une classe en « btn » (liens en forme de bouton compris), tout élément cliquable non natif équipé en bouton par
   js/00b-clavier.js (data-a11y-clic="bouton"), les éléments de menu et onglets listés plus bas, et `.elv-bouton` pour un cas à part.
   Une carte, une ligne de tableau ou un conteneur cliquable n'est PAS un bouton et ne bouge pas.
   Écrire un `<button>` suffit : « un futur bouton aura l'animation automatiquement ». Contrôle : tests/v36-animations.py. */

:root{
  --btn-duree:.18s;                         /* fondu de couleur, opacité */
  --btn-duree-appui:.12s;                   /* relief et enfoncement */
  --btn-courbe:cubic-bezier(.2,.8,.3,1);    /* la courbe des boutons d'origine du CRM */
  --btn-relief:-1px;                        /* survol : décalage vers le haut */
  --btn-appui:.97;                          /* appui : échelle */
  --btn-focus-duree:.16s;                   /* pose du contour au clavier */
  --btn-tour:.8s;                           /* un tour du cercle de chargement */
}
@media (prefers-reduced-motion:reduce){
  :root{--btn-duree:0s;--btn-duree-appui:0s;--btn-relief:0px;--btn-appui:1;--btn-focus-duree:0s;--btn-tour:1.6s}
}
html[data-anim-ui="reduit"]{--btn-duree:0s;--btn-duree-appui:0s;--btn-relief:0px;--btn-appui:1;--btn-focus-duree:0s;--btn-tour:1.6s}

/* ── Transition commune ─────────────────────────────────────────────────────────────────────────────────────────────────── */
:is(button,input[type="button"],input[type="submit"],input[type="reset"],[role="button"],[role="tab"],[role="menuitem"],[role="menuitemradio"],[role="menuitemcheckbox"],summary,[data-a11y-clic="bouton"],[class*="btn"]:not([class*="btns"]),.elv-bouton,.nav-i,.nav-group-header,.nav-plus-page,.nav-plus-cat,.ptab,.proj-tab,.eq-tab,.compta-chip,.compta-subnav-tab,.pt-cat,.aspect-chip,.mf-item){
  transition-property:background-color,color,border-color,opacity,translate,scale!important;
  transition-duration:var(--btn-duree),var(--btn-duree),var(--btn-duree),var(--btn-duree),var(--btn-duree-appui),var(--btn-duree-appui)!important;
  transition-timing-function:var(--btn-courbe)!important;
  transition-delay:0s!important;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

/* ── Survol : relief (souris seulement) ─────────────────────────────────────────────────────────────────────────────────── */
@media (hover:hover) and (pointer:fine){
  :is(button,input[type="button"],input[type="submit"],input[type="reset"],[role="button"],[role="tab"],[role="menuitem"],[role="menuitemradio"],[role="menuitemcheckbox"],summary,[data-a11y-clic="bouton"],[class*="btn"]:not([class*="btns"]),.elv-bouton,.nav-i,.nav-group-header,.nav-plus-page,.nav-plus-cat,.ptab,.proj-tab,.eq-tab,.compta-chip,.compta-subnav-tab,.pt-cat,.aspect-chip,.mf-item):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):hover{
    translate:0 var(--btn-relief);
  }
}

/* ── Appui : enfoncement (souris, doigt, clavier) ───────────────────────────────────────────────────────────────────────── */
:is(button,input[type="button"],input[type="submit"],input[type="reset"],[role="button"],[role="tab"],[role="menuitem"],[role="menuitemradio"],[role="menuitemcheckbox"],summary,[data-a11y-clic="bouton"],[class*="btn"]:not([class*="btns"]),.elv-bouton,.nav-i,.nav-group-header,.nav-plus-page,.nav-plus-cat,.ptab,.proj-tab,.eq-tab,.compta-chip,.compta-subnav-tab,.pt-cat,.aspect-chip,.mf-item):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):active{
  translate:0 0;
  scale:var(--btn-appui);
}

/* ── Clavier : le contour se pose en douceur ────────────────────────────────────────────────────────────────────────────── */
:is(button,input[type="button"],input[type="submit"],input[type="reset"],[role="button"],[role="tab"],[role="menuitem"],[role="menuitemradio"],[role="menuitemcheckbox"],summary,[data-a11y-clic="bouton"],[class*="btn"]:not([class*="btns"]),.elv-bouton,.nav-i,.nav-group-header,.nav-plus-page,.nav-plus-cat,.ptab,.proj-tab,.eq-tab,.compta-chip,.compta-subnav-tab,.pt-cat,.aspect-chip,.mf-item):focus-visible{
  outline:2px solid var(--accent,#1B4F8A);
  outline-offset:2px;
  animation:btn-focus var(--btn-focus-duree) var(--btn-courbe);
}
@keyframes btn-focus{from{scale:1.035}to{scale:1}}

/* ── Désactivé : atténué, sans effet ────────────────────────────────────────────────────────────────────────────────────── */
:is(button,input[type="button"],input[type="submit"],input[type="reset"],[role="button"],[role="tab"],[role="menuitem"],[role="menuitemradio"],[role="menuitemcheckbox"],summary,[data-a11y-clic="bouton"],[class*="btn"]:not([class*="btns"]),.elv-bouton):is(:disabled,[aria-disabled="true"]){
  opacity:.55;
  cursor:not-allowed;
  translate:none;
  scale:none;
}

/* ── Chargement : désactivé, atténué, petit cercle qui tourne ───────────────────────────────────────────────────────────── */
:is(button,input[type="button"],input[type="submit"],input[type="reset"],[role="button"],[data-a11y-clic="bouton"],[class*="btn"]:not([class*="btns"]),.elv-bouton)[aria-busy="true"]{
  opacity:.75;
  cursor:progress;
  pointer-events:none;
}
:is(button,[role="button"],[data-a11y-clic="bouton"],[class*="btn"]:not([class*="btns"]),.elv-bouton)[aria-busy="true"]::after{
  content:"";
  display:inline-block;
  flex:0 0 auto;
  width:.95em;
  height:.95em;
  margin-left:.55em;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  vertical-align:-.12em;
  animation:btn-tour var(--btn-tour) linear infinite;
}
@keyframes btn-tour{to{transform:rotate(360deg)}}
html[data-anim-ui="reduit"] [aria-busy="true"]::after{animation:none}

/* ── Succès : une coche brève ───────────────────────────────────────────────────────────────────────────────────────────── */
:is(button,[role="button"],[data-a11y-clic="bouton"],[class*="btn"]:not([class*="btns"]),.elv-bouton)[data-etat="ok"]::after{
  content:"";
  display:inline-block;
  flex:0 0 auto;
  width:.3em;
  height:.62em;
  margin-left:.55em;
  border:solid currentColor;
  border-width:0 2px 2px 0;
  vertical-align:.05em;
  transform:rotate(45deg);
  animation:btn-coche var(--btn-duree) var(--btn-courbe);
}
@keyframes btn-coche{from{opacity:0}to{opacity:1}}

/* ── Interrupteurs (cases à glissière) : la même durée et la même courbe que les boutons ───────────────────────────────── */
.tsl,.tsl::before,.theme-track,.theme-thumb{transition-duration:var(--btn-duree);transition-timing-function:var(--btn-courbe)}

/* Cas à part : un bouton dont le mouvement est SON contenu (jauge, curseur) se déclare ainsi, avec la raison en commentaire. */
[data-bouton-propre][data-bouton-propre][data-bouton-propre]{transition-property:none!important}