/* ═══════════════════════════════════════════════════════════════════════════
   Boutons — charte §6
   Quatre variantes seulement : primaire (Mousse), secondaire (Lichen clair),
   contour (filet fort), inversé (sur fond Tourbe).
   §4 : graisse 500, 14-16 px. §5 : rayon unique, bordure 1 px, aucune ombre,
   transition 150 ms limitée à background / color / border-color / box-shadow.
   ═══════════════════════════════════════════════════════════════════════════ */

.btn-primary,
.btn-secondaire,
.btn-contour,
.btn-inverse,
.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: var(--rayon);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 150ms, color 150ms, border-color 150ms, box-shadow 150ms;
}

/* Focus clavier commun (charte §6) */
.btn-primary:focus-visible,
.btn-secondaire:focus-visible,
.btn-contour:focus-visible,
.btn-inverse:focus-visible,
.btn-danger:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--couleur-fond), 0 0 0 4px var(--couleur-primaire);
}

/* ─── Primaire — fond Mousse, texte Craie ─────────────────────────────── */
.btn-primary {
    background-color: var(--couleur-primaire);
    color: var(--couleur-fond);
}

.btn-primary:hover {
    background-color: var(--couleur-primaire-sombre);
    color: var(--couleur-fond);
}

.btn-primary:active {
    background-color: var(--couleur-primaire-pressee);
}

/* ─── Secondaire — fond Lichen clair, texte Tourbe ────────────────────── */
.btn-secondaire {
    background-color: var(--couleur-primaire-fond);
    color: var(--couleur-texte);
}

.btn-secondaire:hover {
    background-color: var(--couleur-primaire-fond-survol);
    color: var(--couleur-texte);
}

/* ─── Contour — bordure Filet fort, fond transparent ──────────────────── */
.btn-contour {
    background-color: transparent;
    border-color: var(--couleur-filet-fort);
    color: var(--couleur-texte);
}

.btn-contour:hover {
    border-color: var(--couleur-texte);
    background-color: var(--couleur-fond-2);
    color: var(--couleur-texte);
}

/* ─── Inversé — sur fond Tourbe : fond Craie, texte Tourbe ────────────── */
.btn-inverse {
    background-color: var(--couleur-fond);
    color: var(--couleur-texte);
}

.btn-inverse:hover {
    background-color: var(--couleur-sable);
    color: var(--couleur-texte);
}

/* ─── Destructif — Terre, réservé aux actions de suppression ──────────── */
.btn-danger {
    background-color: var(--couleur-alerte);
    /* Blanc et non Craie : Craie/Terre = 4,45:1 (< 4,5), blanc = 4,76:1 (charte v1.2). */
    color: var(--couleur-surface);
}

.btn-danger:hover {
    background-color: var(--couleur-alerte-sombre);
    color: var(--couleur-surface);
}

/* ─── Désactivé (toutes variantes) ────────────────────────────────────── */
.btn-primary:disabled,
.btn-secondaire:disabled,
.btn-contour:disabled,
.btn-inverse:disabled,
.btn-danger:disabled,
.btn-primary[aria-disabled="true"],
.btn-secondaire[aria-disabled="true"],
.btn-contour[aria-disabled="true"],
.btn-inverse[aria-disabled="true"],
.btn-danger[aria-disabled="true"] {
    background-color: var(--couleur-desactive);
    border-color: transparent;
    color: var(--couleur-desactive-texte);
    cursor: not-allowed;
}

/* ─── Uniformisation des boutons de formulaire hérités ────────────────── */
.btn-uniform {
    font-size: 14px;
    font-weight: 500;
}