/**
Bouton
*/
.jaune{
color:#fcd21c
}   


.btn-yellow {
    background-color: #fcd21c;
    border-color: #fcd21c;
    border-radius: 0 !important;
    color: #000;
}

.btn-yellow:hover {
    background-color: #fcd21c;
    border-color: #fcd21c;
    border-radius: 0 !important;
    color: #000;
}

/**
Etape 1 choisir club
*/

.search-bar {
    margin-bottom: 20px;
}

.search-bar input {
    padding: 10px;
    width: 70%;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.search-bar button {
    padding: 10px 20px;
    background-color: #000;
    color: #fff;
    border: none;
    cursor: pointer;
}

.club {
    display: flex;
    align-items: center;
    background-color: #f8f8f8;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 5px;
}

.club img {
    width: 120px;
    height: 120px;
    margin-right: 20px;
}

.club-info h2 {
    margin: 0;
    font-size: 18px;
}

.club-info p {
    margin: 5px 0 0;
}

#viewAll {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #000;
    color: #fff;
    border: none;
    cursor: pointer;
}

/**
Etape du formulaire
*/
.steps {
    --si-steps-number-size: 3.625rem;
    --si-steps-number-inner-size: 2.625rem;
}

.steps .step-number-inner {
    font-size: 20px;
}

/* Etape formule */
.card-pointer {
    cursor: pointer !important;
}

#loader {
    /* HTML: <div class="loader"></div> */
    width: 50px;
    aspect-ratio: 1;
    border-radius: 50%;
    padding: 3px;
    background: radial-gradient(farthest-side, #fcd21c 95%, #0000) 50% 0/12px 12px no-repeat,
    radial-gradient(farthest-side, #0000 calc(100% - 5px), #fcd21c calc(100% - 4px)) content-box;
    animation: l6 2s infinite;
}
@keyframes l6 {to{transform: rotate(1turn)}}

#content-card.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 20rem;
}

@media screen and (min-width: 0px) and (max-width: 991px) {

    .cacher-mobile{
        display: none;
    }

}