/* Boutons du système de design : primaire, secondaire, contour, inversé (sur fond sombre), danger.
   Graisse 500, rayon unique, bordure 1 px, aucune ombre hors anneau de focus, transition 150 ms. */

.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;
}

.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 : Craie sur Mousse */
.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 : Tourbe sur Lichen clair */
.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 : 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 : Tourbe sur Craie */
.btn-inverse {
    background-color: var(--couleur-fond);
    color: var(--couleur-texte);
}

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

/* Danger, réservé aux suppressions : blanc sur Terre (Craie sur Terre n'atteint pas 4,5:1) */
.btn-danger {
    background-color: var(--couleur-alerte);
    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;
}

/* ─── Boutons grands ─────────────────────────────────────────── */
.btn-primary-large,
.btn-secondary-large,
.btn-outline-large,
.btn-inverse-large {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: var(--rayon);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 150ms, color 150ms, border-color 150ms, box-shadow 150ms;
}

.btn-primary-large:focus-visible,
.btn-secondary-large:focus-visible,
.btn-outline-large:focus-visible,
.btn-inverse-large:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--couleur-fond), 0 0 0 4px var(--couleur-primaire);
}

/* Primaire : Craie sur Mousse */
.btn-primary-large {
    background: var(--couleur-primaire);
    border-color: var(--couleur-primaire);
    color: var(--couleur-fond);
}

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

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

/* Secondaire : Tourbe sur Lichen clair */
.btn-secondary-large {
    background: var(--couleur-primaire-fond);
    border-color: var(--couleur-primaire-fond);
    color: var(--couleur-texte);
}

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

/* Contour : filet fort, texte Tourbe */
.btn-outline-large {
    background: transparent;
    border-color: var(--couleur-filet-fort);
    color: var(--couleur-texte);
}

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

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

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

.btn-inverse-large:focus-visible {
    box-shadow: 0 0 0 2px var(--couleur-texte), 0 0 0 4px var(--couleur-fond);
}