.btn {
    display: inline-block;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    padding: 0.6rem 0.6rem;
    border-radius: 0.3rem;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    margin: 0 5px;
}

.btn-big {
    height: 200px;
    width: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    border-radius: 0.6rem;
    font-size: 1.5rem;
}

@media (max-width: 768px) {

    .btn-big {
        height: auto;
    }
}



.btn-max-width {
    width: 100%;
}


.btn-primary {
    background-color: var(--color-btn-bg--primary);
    border-color: var(--color-btn-border--primary);
    color: var(--color-btn-text--primary);
}

    .btn-primary:hover {
        color: var(--color-btn-text--primary-hover);
        background-color: var(--color-btn-bg--primary-hover);
        border-color: var(--color-btn-border--primary-hover);
    }

.btn-secondary {
    background-color: var(--color-btn-bg--secondary);
    color: var(--color-btn-text--secondary);
    border-color: var(--color-btn-border--secondary);
}

    .btn-secondary:hover {
        color: var(--color-btn-text--secondary-hover);
        background-color: var(--color-btn-bg--secondary-hover);
        border-color: var(--color-btn-border--secondary-hover);
    }

.btn-transparent {
    color: var(--color-btn-text--transparent);
    background-color: var(--color-btn-bg--transparent);
    border-color: var(--color-btn-border--transparent);
}

    .btn-transparent:hover {
        color: var(--color-btn-text--transparent-hover);
        background-color: var(--color-btn-bg--transparent-hover);
        border-color: var(--color-btn-border--transparent-hover);
    }

/* Bouton transparent dark */
.btn-transparent-dark {
    color: var(--color-btn-text--transparent--dark);
    background-color: var(--color-btn-bg--transparent--dark);
    border-color: var(--color-btn-border--transparent--dark);
}

    .btn-transparent-dark:hover {
        color: var(--color-btn-text--transparent-hover--dark);
        background-color: var(--color-btn-bg--transparent-hover--dark);
        border-color: var(--color-btn-border--transparent-hover--dark);
    }


/* Bouton succès */
.btn-success {
    background-color: #28a745;
    color: #ffffff;
    border-color: #28a745;
}

    .btn-success:hover {
        background-color: #218838;
        border-color: #1c7430;
    }

.btn-outline-success {
    background-color: #ffffff;
    border-color: #28a745;
    color: #28a745;
}

    .btn-outline-success:hover {
        color: #ffffff;
        background-color: #28a745;
        border-color: #28a745;
    }

/* Bouton danger */
.btn-danger {
    background-color: #dc3545;
    color: #ffffff;
    border-color: #dc3545;
}

    .btn-danger:hover {
        background-color: #bd2130;
        border-color: #a71d2a;
    }

.btn-outline-danger {
    background-color: #ffffff;
    border-color: #dc3545;
    color: #dc3545;
}

    .btn-outline-danger:hover {
        color: #ffffff;
        background-color: #dc3545;
        border-color: #dc3545;
    }

/* Bouton avertissement */
.btn-warning {
    background-color: #ffc107;
    color: #212529;
    border-color: #ffc107;
}

    .btn-warning:hover {
        background-color: #e0a800;
        border-color: #d39e00;
    }

/* Bouton information */
.btn-info {
    background-color: #17a2b8;
    color: #ffffff;
    border-color: #17a2b8;
}

    .btn-info:hover {
        background-color: #138496;
        border-color: #117a8b;
    }

/* Bouton clair */
.btn-light {
    background-color: #f8f9fa;
    color: #212529;
    border-color: #f8f9fa;
}

.btn-circle {
    display: flex;
    border-radius: 50%;
}
    .btn-circle i {
        font-size: 0.8rem;
        margin: 0; 
    }