/* Boutons communs aux cinq modules (docs/specs/boutons-communs.md,
   arbitrage P1 du 21/08/2026). Servi sous /commun/boutons.css par chaque
   module, apres sa feuille de style (les regles de contexte des modules
   restent prioritaires par specificite, jamais par !important).

   Contrat de jetons (poses par la palette de chaque module, clair et
   sombre) : --bleu, --bleu-fonce, --bleu-pale, --bleu-pale-survol,
   --bleu-bord, --bleu-texte, --rouge, --rouge-pale, --rouge-pale-survol,
   --rouge-bord, --blanc, --rayon.

   Modele unique : un bouton seul est de largeur naturelle et aligne a
   gauche, sur grand ecran comme sur ecran etroit ; la couleur seule
   marque la fonction (principal, discret, danger). Les groupes de boutons
   se posent en .barre-boutons. Depuis le 23/08/2026, principal et discret
   ont le même rendu plein (voir plus bas). Sous 900 px, la cible tactile atteint
   44 px sans etirer le bouton. La pleine largeur est une exception
   nominative (.bouton-bloc : formulaires de connexion et d'enrolement). */

.bouton {
    display: inline-block;
    padding: .55rem 1.1rem;
    margin: 0;
    border: 1px solid transparent;
    border-radius: var(--rayon, 8px);
    font: inherit;
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: background-color .12s ease, border-color .12s ease;
}
.bouton:disabled,
.bouton[aria-disabled="true"] {
    opacity: .5;
    cursor: not-allowed;
}

/* ------------------------------------------------------------- fonctions */
.bouton-principal {
    background: var(--bleu);
    color: var(--blanc, #ffffff);
}
.bouton-principal:hover { background: var(--bleu-fonce, var(--bleu)); }

/* bouton-discret : même rendu plein que le principal (retour Yves du
   23/08/2026) ; le couple fond pâle + bordure pâle était celui des
   pastilles d'information (.flash-info, .etat) et s'y confondait. La
   classe reste posée dans les gabarits (distinction sémantique, rendu
   commun) ; seul bouton-danger garde une couleur propre. */
.bouton-discret {
    background: var(--bleu);
    color: var(--blanc, #ffffff);
}
.bouton-discret:hover { background: var(--bleu-fonce, var(--bleu)); }

.bouton-danger {
    background: var(--rouge-pale);
    border-color: var(--rouge-bord, transparent);
    color: var(--rouge);
}
.bouton-danger:hover { background: var(--rouge-pale-survol, var(--rouge-pale)); }

/* --------------------------------------------------------------- tailles */
/* variante compacte, a poser explicitement : lignes de tableaux, bandeaux,
   barre d'etat (A2 du 21/08/2026 : l'ancien bouton-discret reduit de
   projet devient bouton-petit) */
.bouton-petit {
    padding: .3rem .7rem;
    font-size: .9rem;
    font-weight: 500;
}

/* pleine largeur, libelle centre : ecrans a un champ et un bouton
   (connexion, code 2FA, enrolement). Exception nominative, jamais une
   regle « form .bouton ». */
.bouton-bloc {
    display: block;
    width: 100%;
}

/* ---------------------------------------------------------------- groupes */
/* boutons cote a cote : meme geometrie quelle que soit la variante, le
   principal en premier a gauche ; retour a la ligne si la place manque */
.barre-boutons {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.barre-boutons form { margin: 0; }

/* ------------------------------------------------------------ ecran etroit */
@media screen and (max-width: 900px) {
    /* cible tactile de 44 px (meme seuil que tableau.css) sans etirer le
       bouton : il reste de largeur naturelle et aligne a gauche */
    .bouton {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
    }
    .bouton-bloc { display: flex; }
    .bouton-petit { min-height: 36px; }
}