/* ===== Design System — Boutons =====
   BEM : .btn (base) + .btn--{variante} + .btn--{modificateur}

   Variantes :
     .btn--primary    → action principale (fond primaire)
     .btn--secondary  → action secondaire (contour primaire)
     .btn--link       → lien-bouton (texte uniquement)

   Modificateurs de taille (hauteur fixe + centrage flex, comme la base) :
     .btn--block      → pleine largeur
     .btn--sm         → taille compacte (modales, listes) — 2.1rem
     .btn--md         → taille intermédiaire (actions secondaires en liste) — 3rem
     .btn--lg         → taille large (footers, actions principales de page) — 3.5rem
     (base, sans modificateur de taille) → 2.75rem — action principale de page (CTA de tunnel)
     Rayon (0.375rem), bordure (0.0625rem) et graisse (bold) sont hérités de la base par toutes
     les tailles — une seule source de vérité, pas de redéfinition par taille.

   Modificateur de variante :
     .btn--error      → action destructive/critique, se combine avec .btn--primary ou .btn--secondary
                         (ex. class="btn btn--primary btn--error")

   États :
     :hover                  → géré par variante (voir .btn--primary / .btn--secondary / .btn--error)
     :focus-visible          → anneau de focus uniforme, géré globalement (Default/css/base/utilities.css)
     :disabled               → bloqué (pointer-events: none), rendu neutre gris (--color-disabled)
     [aria-disabled="true"]  → désactivé sémantique (reste cliquable, relance la validation), même rendu que :disabled

   Toutes les pages/vues Visa utilisent ce système — pas de classe legacy .btn-primary/
   .btn-secondary conservée (migré/nettoyé — cf. mémoire projet_button_states_redesign).
*/

/* ===== Base =====
   Dimensions converties depuis la maquette (1rem = 16px, cf. Default/css/base/variables.css) :
   padding 24px → 1.5rem ; hauteur 44px → 2.75rem ;
   rayon 6px → 0.375rem ; bordure 1px → 0.0625rem ; police 16px → 1rem. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs3);
    padding: 0 var(--spacing-md);
    height: var(--control-height);
    font-family: var(--font-family-btn);
    font-size: var(--font-size-base); /* explicite, pas d'hériter de body — nécessaire hors du flux normal (ex. modale) */
    font-weight: var(--font-weight-bold);
    line-height: 1;
    border-radius: 0.375rem;
    border: 0.0625rem solid transparent;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);

    &:active:not(:disabled):not([aria-disabled="true"]) {
        transform: scale(0.98);
    }
}

/* ===== Modificateurs de mise en forme ===== */
.btn--block {
    display: flex;
    width: 100%;
}

.btn--sm {
    padding: 0 var(--spacing-xs6);
    height: 2.1rem;
    font-size: var(--font-size-sm);
    line-height: 1;
}

.btn--md {
    padding: 0 var(--spacing-md);
    height: 3rem;
    font-size: var(--font-size-base);
    line-height: 1;
}

.btn--lg {
    padding: 0 var(--spacing-lg);
    height: 3.5rem;
    font-size: var(--font-size-base);
    line-height: 1;
}

/* ===== Modificateur — action destructive/critique =====
   Se combine avec .btn--primary ou .btn--secondary (ex. bouton de suppression/annulation).
   Couleurs dédiées --color-btn-error* (Visa/css/base/variables.css) — distinctes de
   --color-error/--color-error-text utilisés ailleurs (formulaires, callouts…).
   ⚠️ Doit être défini AVANT .btn--primary / .btn--secondary : à spécificité égale,
   ceci garantit que leur état :disabled (gris neutre) reste prioritaire sur l'erreur. */
.btn--error {
    &.btn--primary {
        background: var(--color-btn-error);
        border-color: var(--color-btn-error);

        &:not(:disabled):not([aria-disabled="true"]):hover {
            background: var(--color-btn-error-hover);
            border-color: var(--color-btn-error-hover);
        }
    }

    &.btn--secondary {
        background: var(--color-btn-secondary-error-bg);
        color: var(--color-btn-error);
        border-color: var(--color-btn-error);

        &:not(:disabled):not([aria-disabled="true"]):hover {
            background: var(--color-error-bg-subtle);
        }
    }
}

/* ===== Variante primaire — action principale (fond rempli) ===== */
.btn--primary {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);

    &:not(:disabled):not([aria-disabled="true"]):hover {
        background: var(--color-btn-primary-hover);
        border-color: var(--color-btn-primary-hover);
    }

    &:disabled,
    &[aria-disabled="true"] {
        cursor: not-allowed;
        background: var(--color-disabled);
        border-color: var(--color-disabled-border);
        color: var(--color-white);
    }

    &:disabled {
        pointer-events: none;
    }
}

/* ===== Variante secondaire — action alternative (contour) =====
   Fond par défaut légèrement teinté (≈ 2 % de --color-primary sur blanc, maquette #FAFCFF) :
   --color-btn-secondary-bg (Visa/css/base/variables.css). */
.btn--secondary {
    background: var(--color-btn-secondary-bg);
    color: var(--color-primary);
    border-color: var(--color-primary);

    &:not(:disabled):not([aria-disabled="true"]):hover {
        background: var(--color-btn-secondary-hover-bg);
        color: var(--color-btn-primary-hover); /* #0E2594 */
        border-color: var(--color-btn-primary-hover);
    }

    &:disabled,
    &[aria-disabled="true"] {
        cursor: not-allowed;
        background: var(--color-white);
        border-color: var(--color-disabled-border);
        color: var(--color-disabled);
    }

    &:disabled {
        pointer-events: none;
    }
}

/* ===== Lien-bouton ===== */
/* Action de style « lien » : « Mot de passe oublié », « Retour à la connexion »… */
.btn--link {
    padding: 0;
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: var(--font-size-base);
    font-family: var(--font-family-btn);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    transition: none;

    &:hover {
        text-decoration: underline;
    }

    &:active {
        transform: none;
    }
}

/* Design inversé de .btn--link : souligné par défaut, non souligné au survol
   (ex. cartes .contact-action). Se combine avec .btn--link (class="btn btn--link btn--underline"). */
.btn--underline {
    text-decoration: underline;

    &:hover {
        text-decoration: none;
    }
}