/* ==========================================================================
   Boutons
   --------------------------------------------------------------------------
   ÉCART ASSUMÉ AVEC LES FILAIRES : les filaires donnent des paddings qui
   produisent des boutons d'environ 33 px de haut (header, badges d'action).
   La règle d'accessibilité du projet impose des cibles tactiles ≥ 44 px et
   n'est pas négociable : `min-height: 44px` s'applique donc à TOUTES les
   tailles, y compris `sm`. Le header mobile est de ce fait un peu plus haut
   que sur la maquette.
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-8);
    min-height: var(--tap-min);
    box-sizing: border-box;
    border: 1.5px solid transparent;
    border-radius: var(--r-10);
    font-family: var(--font-body);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* ---- Tailles --------------------------------------------------------- */
.btn--md {
    padding: var(--sp-13) var(--sp-18);
    font-size: 16px;
}

.btn--sm {
    padding: var(--sp-8) var(--sp-13);
    border-radius: var(--r-8);
    font-size: 14px;
}

.btn--block {
    display: flex;
    width: 100%;
}

/* ---- Variantes ------------------------------------------------------- */
.btn--primary {
    background: var(--c-orange);
    color: #ffffff;
}

.btn--primary:hover {
    background: #e06a24;
    color: #ffffff;
}

.btn--secondary {
    border-color: var(--c-blue);
    color: var(--c-blue);
    background: transparent;
}

.btn--secondary:hover {
    background: var(--c-blue-bg);
    color: var(--c-blue);
}

.btn--blue {
    background: var(--c-blue);
    color: #ffffff;
}

.btn--blue:hover {
    background: #15304c;
    color: #ffffff;
}

.btn--green {
    background: var(--c-green);
    color: #ffffff;
}

.btn--green:hover {
    background: #1d6543;
    color: #ffffff;
}

.btn--ghost {
    border-color: #999999;
    color: #555555;
    background: var(--c-surface);
}

.btn--ghost:hover {
    border-color: var(--c-blue);
    color: var(--c-blue);
}

.btn--dashed {
    border-style: dashed;
    border-color: var(--c-blue);
    color: var(--c-blue);
    background: var(--c-surface);
}

.btn--dashed:hover {
    background: var(--c-blue-bg);
    color: var(--c-blue);
}

/* ---- Désactivé ------------------------------------------------------- *
 * Teintes imposées par le handoff pour le bouton « Valider et signer »
 * tant que la case n'est pas cochée ET que le pad est vierge (écran 1f).  */
.btn:disabled,
.btn[aria-disabled='true'] {
    background: var(--c-disabled-bg);
    border-color: transparent;
    color: var(--c-disabled-text);
    cursor: not-allowed;
}

/* Un bouton de contour désactivé reste un contour : deux blocs gris pleins
   côte à côte — « Recommencer » et « Valider et signer » — se liraient comme
   deux actions de même poids, alors qu'une seule est l'action principale. */
.btn--ghost:disabled,
.btn--ghost[aria-disabled='true'] {
    background: var(--c-surface);
    border-color: var(--c-border-pill);
    color: var(--c-disabled-text);
}