.btnPrimary {
    @apply bg-[#2a8d57] text-white font-bold py-2 px-4 border-b-4 rounded transition-all duration-300 ease-in-out;

    /* Bordure */
    border-color: #1e7a43;

    /* Survol */
    &:hover {
        @apply bg-[#1e7a43] border-[#155d2e];
    }

    /* Clique (État actif) */
    &:active {
        @apply bg-[#1b6b38] border-[#155d2e];
    }

    /* Focus (État focus) */
    &:focus {
        outline: none;
        box-shadow: 0 0 0 4px rgba(42, 141, 87, 0.5);
    }
}

.btnSecondary {
    @apply bg-[#2f4858] text-white font-bold py-2 px-4 border-b-4 rounded transition-all duration-300 ease-in-out;

    /* Bordure */
    border-color: #1e3c46;

    /* Survol */
    &:hover {
        @apply bg-[#1e3c46] border-[#16323a];
    }

    /* Clique (État actif) */
    &:active {
        @apply bg-[#193d49] border-[#16323a];
    }

    /* Focus (État focus) */
    &:focus {
        outline: none;
        box-shadow: 0 0 0 4px rgba(47, 72, 88, 0.5);
    }
}

.btnThird {
    @apply bg-[#c0ab4d] text-white font-bold py-2 px-4 border-b-4 rounded transition-all duration-300 ease-in-out;

    /* Bordure */
    border-color: #b0a139;

    /* Survol */
    &:hover {
        @apply bg-[#b0a139] border-[#9a8b2b];
    }

    /* Clique (État actif) */
    &:active {
        @apply bg-[#9a8b2b] border-[#6f6a1c];
    }

    /* Focus (État focus) */
    &:focus {
        outline: none;
        box-shadow: 0 0 0 4px rgba(192, 171, 77, 0.5);
    }
}

.btnAnnule {
    @apply bg-[#d54f45] text-white font-bold py-2 px-4 border-b-4 rounded transition-all duration-300 ease-in-out;

    /* Bordure */
    border-color: #a73a2d;

    /* Survol */
    &:hover {
        @apply bg-[#a73a2d] border-[#8b2d1e];
    }

    /* Clique (État actif) */
    &:active {
        @apply bg-[#90271e] border-[#8b2d1e];
    }

    /* Focus (État focus) */
    &:focus {
        outline: none;
        box-shadow: 0 0 0 4px rgba(213, 79, 69, 0.5);
    }
}