/* *********************************************************** */
/* SECTION Buttons in banner, various pages and outside footer */
/* *********************************************************** */

.button-wrapper .btn {
    margin-bottom: 0.5%;
    /* 5px en % de la hauteur parente */
}

.btn-custom {
    background-color: #f2f2f2;
    color: #58585a;
    border-color: #f2f2f2;
    padding: 0.3vw 0.7vw;
    text-align: center !important;
}


.btn-custom:hover {
    background-color: #e0e0e0;
    color: #58585a;
    border-color: #e0e0e0;
}


/* ******************** */
/* SECTION long Buttons */
/* ******************** */
.longbutton {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
    margin: 0vw;
    /* font-size: 4em;
    height: 3.5em; */
    font-size: 2em;
    height: 2.2em;

    /* font-weight: bold; */
    /* border-bottom-width: medium; */
    border-bottom: 1px solid #ededf0;
    border-right: none;
    border-left: none;
    border-top: none;
    border-radius: 0px;
    background-color: #ffffff;
    color: #282828;
    cursor: pointer;
    text-decoration: none;
}

/* .longbutton:disabled {
    background-color: #ffffff;
}

*/

.longbutton:hover {
    background-color: #ededf0;
    /* Couleur de fond au survol */
    color: #282828;
    /* Couleur du texte au survol */
    border: 2px solid #ededf0;
    /* Bordure visible au survol */
}

.longbutton span .text-content {
    margin-right: 1px;
    margin-left: 0.5px;
    color: #8e8a8a;
}

.longbutton .text-content {
    margin-left: 0.5em;
    padding-left: 0em;
    color: #000000;
    /* Ajustez cette valeur pour décaler le texte */
}

.longbutton:enabled .text-content {
    color: #282828;
}

.longbutton i {
    margin-left: auto;
    margin-right: 30px;
}

.longbutton:disabled i {
    color: #d0d0d0;
    /* Couleur de l'icône pour le bouton désactivé */
}

.longbutton:enabled i {
    color: #282828;
    /* Couleur de l'icône pour le bouton désactivé */
}

/* ************************* */
/* SECTION clignoter Buttons */
/* ************************* */
@keyframes clignoter {

    0%,
    70% {
        opacity: 1;
    }

    10%,
    100% {
        opacity: 0.3;
    }
}

.clignotant {
    animation: clignoter 3s infinite;
}

/* ========================= */
/* SECTION: Disabled longbutton */
/* ========================= */

/* État visuel désactivé */
.longbutton.disabled,
.longbutton[data-bikes-enabled="false"] {
    background-color: #f5f5f5;
    /* gris clair */
    color: #a0a0a0;
    /* texte gris */
    border: 1px solid #e0e0e0;
    cursor: not-allowed;
    pointer-events: none;
    /* empêche tout clic */
    text-decoration: none;
}

/* Texte du bouton désactivé */
.longbutton.disabled .text-content,
.longbutton[data-bikes-enabled="false"] .text-content {
    color: #a0a0a0;
}

/* Icône du bouton désactivé */
.longbutton.disabled i,
.longbutton[data-bikes-enabled="false"] i {
    color: #c0c0c0;
}

/* Empêche tout effet hover */
.longbutton.disabled:hover,
.longbutton[data-bikes-enabled="false"]:hover {
    background-color: #f5f5f5;
    border-color: #e0e0e0;
    color: #a0a0a0;
    text-decoration: none;
}