/* ═══════════════════════════════════════════════════════════════════════════
   LE BOUTON D'ARCHI MIND, UNE FOIS POUR TOUTES

   Léon, le 20 août 2026, capture d'écran à l'appui : « je veux ce visuel pour
   tous les boutons du CRM ». Le modèle est le bouton de l'écran « Mon diplôme »,
   qu'il a validé : contour terracotta sur fond blanc, coins doux, texte en
   terracotta qui s'inverse au survol.

   ═══════════════════════════════════════════════════════════════════════════
   POURQUOI UNE FEUILLE À PART, ET PAS UNE CORRECTION DANS CHAQUE ÉCRAN

   Relevé avant d'écrire une ligne : SOIXANTE-TROIS déclarations de bouton,
   réparties dans treize fichiers — academy.css en compte trente-trois à elle
   seule, et dashboard.php, pennylane.php, site_admin.php, user.css,
   users_read.css, session_view.php portent chacun les leurs. La feuille du CRM,
   elle, n'en contenait AUCUNE : les deux cent sept boutons des écrans prenaient
   leur apparence d'ailleurs, écran par écran.

   Corriger soixante-trois règles aurait demandé treize passes, et la
   quatorzième les aurait fait diverger à nouveau. Cette feuille les recouvre
   toutes, sans en toucher une seule.

   ═══════════════════════════════════════════════════════════════════════════
   LE SÉLECTEUR COMMENCE PAR « body », ET CE N'EST PAS UN ORNEMENT

   Plusieurs de ces treize fichiers définissent leurs boutons dans un bloc
   <style> écrit DANS la page. Un tel bloc vient après les feuilles liées : une
   règle « .btn » posée ici perdrait contre lui, quel que soit l'ordre de
   chargement.

   « body .btn » vaut une classe plus un élément — il l'emporte sur « .btn »
   seul, où qu'il soit écrit.

   ET IL A FALLU « !important » MALGRÉ TOUT, sur trois propriétés. J'avais écrit
   ici qu'on s'en passerait ; le navigateur m'a démenti. academy.css déclare
   « button { border-radius: …!important; font-weight: 950!important;
   font-size: 12px!important } » — et une déclaration importante l'emporte sur
   n'importe quelle spécificité. Relevé sur l'écran de connexion : ma règle
   « body .btnPrimary », pourtant onze fois plus spécifique, restait sans effet.

   L'escalade n'est donc pas de mon fait : elle est déjà dans la place, et une
   feuille qui unifie doit pouvoir répondre. Elle reste limitée aux trois
   propriétés concernées — la forme, la graisse, la taille — et non appliquée en
   bloc.

   Ce qu'elle ne recouvre PAS, volontairement : les attributs « style= » posés
   dans le HTML, et les règles plus spécifiques du genre « .carte .btn ». Un
   écran qui a pris la peine d'être précis garde sa raison de l'être.
   ═══════════════════════════════════════════════════════════════════════════ */

/* LES DEUX FAMILLES DE NOMS, ET LA BALISE NUE.
   Relevé sur les écrans réels avant d'écrire : le CRM et l'Academy emploient
   DEUX conventions côte à côte — « btn », « btn-sm », « btn-primary » d'un côté,
   « btnPrimary », « btnSm », « btnDanger », « btnMini » de l'autre, en casse
   chamelle. 218 boutons pour la première, 78 pour « btnPrimary » à elle seule.
   Ma première version ne couvrait que la famille à tirets : le bouton
   « Se connecter » gardait son rayon de 999 px, vérifié dans le navigateur.

   Et la balise « button » est stylée nue par academy.css : sans « body button »
   ici, tout bouton sans classe lui échappait. */
body .btn,
body .button,
body .bouton,
body .academy-btn,
body .btnPrimary,
body .btnSm,
body .btnMini,
body .btnDanger,
body .btnSuccess,
body .btnBordeaux,
body .btnSecondarySoft,
body .btnToggleActive,
body input[type="submit"],
body button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7px 14px;
  min-height: 34px;
  border: 1px solid var(--bouton-contour-trait, #a35839);
  border-radius: 6px !important;
  background: var(--bouton-contour-fond, #fff);
  color: var(--bouton-contour-texte, #a35839);
  font-family: inherit;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  /* L'ANIMATION EST DEMANDÉE, ET ELLE PORTE SUR QUATRE PROPRIÉTÉS.
     Léon, le 20 août 2026 : « je veux conserver une animation et un survol »,
     puis « sur le CRM également ».
     Ni « transition: all », qui anime aussi ce qu'on ne voit pas et fait ramer
     un tableau de cent lignes, ni une durée longue : 140 ms, c'est le seuil où
     le mouvement se perçoit sans se faire attendre. */
  transition: background-color .14s ease, color .14s ease,
              transform .14s ease, box-shadow .14s ease;
}

body .btn:hover,
body .button:hover,
body .bouton:hover,
body .academy-btn:hover,
body .btnPrimary:hover,
body .btnSm:hover,
body .btnMini:hover,
body .btnDanger:hover,
body .btnSuccess:hover,
body .btnBordeaux:hover,
body .btnSecondarySoft:hover,
body .btnToggleActive:hover,
body input[type="submit"]:hover,
body button:hover {
  background: var(--bouton-fond, #a35839);
  color: var(--bouton-texte, #fff);
  /* Le bouton se soulève d'un point : assez pour qu'on sente qu'il répond,
     pas assez pour déplacer ce qui l'entoure. */
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(163, 88, 57, .25);
}

/* AU CLIC, IL REDESCEND. Sans cet état, le bouton reste soulevé pendant qu'on
   appuie — et le geste ne semble pas avoir été pris. */
body .btn:active,
body .button:active,
body .bouton:active,
body .academy-btn:active,
body .btnPrimary:active,
body .btnSm:active,
body .btnMini:active,
body .btnDanger:active,
body .btnSuccess:active,
body .btnBordeaux:active,
body .btnSecondarySoft:active,
body .btnToggleActive:active,
body input[type="submit"]:active,
body button:active {
  transform: translateY(0);
  box-shadow: none;
}

/* ── LE MOUVEMENT SE COUPE POUR QUI LE DEMANDE ───────────────────────────────
   Certaines personnes règlent leur système sur « réduire les animations » —
   troubles vestibulaires, migraines, simple préférence. Le respecter n'est pas
   une option : c'est une préférence exprimée par l'utilisatrice elle-même.
   La couleur change toujours, elle : c'est elle qui porte l'information. */
@media (prefers-reduced-motion: reduce) {
  body .btn,
  body .button,
  body .bouton,
  body .academy-btn,
  body input[type="submit"],
  body button.btn {
    transition: background-color .14s ease, color .14s ease;
  }
  body .btn:hover,
  body .button:hover,
  body .bouton:hover,
  body .academy-btn:hover,
  body input[type="submit"]:hover,
  body button.btn:hover {
    transform: none;
    box-shadow: none;
  }
}

/* LE FOCUS RESTE VISIBLE. Un contour qui disparaît au clavier rend l'écran
   inutilisable sans souris — et le CRM se parcourt beaucoup à la tabulation. */
body .btn:focus-visible,
body .button:focus-visible,
body .bouton:focus-visible,
body .academy-btn:focus-visible,
body .btnPrimary:focus-visible,
body .btnSm:focus-visible,
body .btnMini:focus-visible,
body .btnDanger:focus-visible,
body .btnSuccess:focus-visible,
body .btnBordeaux:focus-visible,
body .btnSecondarySoft:focus-visible,
body .btnToggleActive:focus-visible,
body input[type="submit"]:focus-visible,
body button:focus-visible {
  outline: 2px solid var(--bouton-contour-trait, #a35839);
  outline-offset: 2px;
}

/* ── L'ACTION PRINCIPALE EST PLEINE ──────────────────────────────────────────
   Une page où tous les boutons se ressemblent ne dit pas lequel est le geste
   attendu. Le bouton principal s'emplit ; les autres restent en contour. */
body .btn-primary,
body .btnPrimary,
body .btn-filled,
body .button--primary {
  background: var(--bouton-fond, #a35839);
  color: var(--bouton-texte, #fff);
}
body .btn-primary:hover,
body .btnPrimary:hover,
body .btn-filled:hover,
body .button--primary:hover {
  background: var(--bouton-survol, #8c4a30);
  color: var(--bouton-texte, #fff);
}

/* ── CE QUI DÉTRUIT SE VOIT ──────────────────────────────────────────────────
   Supprimer une élève ou une séance ne doit pas ressembler à « enregistrer ».
   Le rouge n'est pas décoratif : c'est le seul indice avant un geste
   irréversible. */
body .btn-danger,
body .btnDanger,
body .btn-danger-small {
  border-color: var(--alerte, #752c22);
  color: var(--alerte, #752c22);
}
body .btn-danger:hover,
body .btnDanger:hover,
body .btn-danger-small:hover {
  background: var(--alerte, #752c22);
  color: var(--bouton-texte, #fff);
}

/* ── LES PETITS RESTENT PETITS ───────────────────────────────────────────────
   Les tableaux du CRM alignent parfois trois actions par ligne : à taille
   pleine, elles feraient sauter la hauteur des lignes. */
body .btn-sm,
body .btnSm,
body .btnMini,
body .btn-small,
body .btn-secondary-small,
body .btn-danger-small,
body .button--compact {
  padding: 4px 10px;
  min-height: 28px;
  /* Importante elle aussi : sans quoi la taille imposée plus haut écraserait
     la réduction des petits boutons. */
  font-size: 12px !important;
}

/* Un bouton désactivé doit se lire comme tel, sans qu'on ait à cliquer pour
   s'en apercevoir. */
body .btn[disabled],
body .button[disabled],
body button[disabled],
body input[type="submit"][disabled] {
  border-color: var(--trait, #ded8ce);
  background: var(--surface-2, #f4f1ec);
  color: var(--texte-faible, #8b8a87);
  cursor: not-allowed;
}

/* ─────────────────────────────────────────────────────────────────────────
   LE BOUTON PRINCIPAL PORTE LE DEGRADE DU SITE.
   Leon, le 27 aout 2026 : « que les boutons du CRM soient comme ceux du site
   internet, cote eleve comme cote Mathilde ». Reference :
   public/assets/css/brand-alignment.css, --button-base-gradient.

   LE DEGRADE EST POSE EN background-image, ET C'EST DELIBERE. Le jeton
   --bouton-fond reste une COULEUR UNIE parce qu'il ne sert pas qu'a peindre un
   fond : il porte aussi des border-color, un outline de focus, des
   accent-color de cases a cocher et un color-mix. Un degrade y serait une
   valeur invalide, et ces bordures disparaitraient sans bruit.

   Le texte passe en encre foncee : du blanc sur ce degrade tombe a 2,68 du
   cote clair. En #2b2d2f il tient 5,16 au point le plus sombre et 9,61 au plus
   clair. Le survol bascule en sauge, comme sur le site.

   Ce bloc est en FIN DE FICHIER a dessein : .crm-bouton:hover pose un
   `background` raccourci, qui remet background-image a zero. A specificite
   egale, c'est l'ordre qui tranche.
   ───────────────────────────────────────────────────────────────────────── */
:is(.crm-bouton, .btnPrimary, .btn.primary, .button-primary):not(.doux):not(.danger) {
  background-image: linear-gradient(90deg, #cf8f75, #f0d1c1);
  background-color: #cf8f75;
  color: #2b2d2f;
  border-color: transparent;
}
:is(.crm-bouton, .btnPrimary, .btn.primary, .button-primary):not(.doux):not(.danger):is(:hover, :focus-visible) {
  background-image: linear-gradient(90deg, #8b978f, #c3cec8);
  background-color: #8b978f;
  color: #2b2d2f;
}