button,
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 1rem 2rem; // plus gros
    // font-size: 1.2rem; // plus gros aussi
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    text-decoration: none;

    color: $elementum-primary;

    // fond doré un peu patiné
    background: linear-gradient(145deg,
            lighten($elementum-secondary, 4%),
            darken($elementum-secondary, 10%));

    text-shadow: 0 1px 0 rgba($elementum-secondary, 0.6);

    transition: .3s ease-in-out;

    // léger liseré intérieur façon métal gravé
    &::before {
        content: "";
        position: absolute;
        inset: 4px;
        clip-path: inherit;
        border-radius: 5px; // pas nécessaire mais explicite
        border: 1px solid rgba($elementum-primary, 0.55);
        pointer-events: none;
    }

    &:hover {
        transform: translateY(2px);
    }

    &:active {
        transform: translateY(3px);
    }

    &:disabled {
        opacity: 0.45;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

    &:focus-visible {
        outline: 1px solid $elementum-secondary;
        outline-offset: 2px;
    }
}