/* div de présentation de la page */
.presentation-annuraire {
    font-size: 18px;
    background-color: #fff;
    border-radius: 20px;
    padding: 30px;
    margin-top: 60px;
}

/* the_content() de la page annuaire */
.presentation-annuraire p {
    margin: 0;
    background: var(--Dgrad-Bleu-Violet, var(--wp--preset--gradient--gradient-1));
    background-clip: text;
    width: fit-content;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    word-break: auto-phrase;
}

/* div bouton violet et texte */
.custom-banner {
    display: flex;
    justify-content: flex-start;
    margin-top: 20px;
}

/* bouton violet "ajouter mon association" */
.custom-button-ajout {
    color: white;
    padding: 10px 30px;
    border-radius: 40px;
    margin-right: 30px;
    font-weight: bold;
    font-family: "Josefin Sans";
    font-size: 16px;
    cursor: pointer;
}

/* icone du bouton "ajouter mon association" */
.plus-icon {
    background: url(../assets/img/plus.png) no-repeat center center;
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 10px;
    vertical-align: top;
}

/********************************************************************************/

/* titre des éléments de filtrage */
.titre-recherche {
    display: block;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 0px;
    color: #333;
}

/* hauteur des éléments de filtrage */
.select-width,
.search-title {
    height: 55px;
}

/* largeur des éléments de filtrage */
.search-banner input,
.search-banner select,
.search-banner button {
    width: 100%;
}

/* div input champ de recherche */
.search-wrapper {
    width: 100%;
    position: relative;
    display: inline-block;
}

/* input de recherche par nom */
.search-title {
    font-family: "Josefin Sans", sans-serif;
    padding: 10px 35px 10px 15px;
    border-radius: 8px;
    border: solid 2px #ccc;
    font-size: 16px;
    width: auto;
    outline: none;
    transition: border-color 0.2s ease;
}

/* couleur des bordures au focus */
.search-title:focus {
    border: 2px solid #00186D;
}

/* couleur du placeholder au focus */
.search-title:focus::placeholder {
    color: #00186D;
}

/* icone loupe pour la recherche */
.search-icon {
    background: url(../assets/img/loupe.svg) no-repeat center center;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-size: contain;
    pointer-events: none;
}

/* texte d'information sous les filtrages */
.renseignement {
    font-size: 12px;
    margin-top: 5px;
}

/* bouton de réinitialisation */
.custom-button {
    font-family: "Josefin Sans";
    padding: 16px 20px;
    border: 2px solid #6A6268;
    border-radius: 40px;
    background-color: transparent;
    color: #6A6268;
    font-size: 14px;
    cursor: pointer;
    font-weight: bold;
    margin-top: 26px;
    transition: border-color 0.2s ease, color 0.2s ease;
}

/* effet au survol du bouton de réinitialisation */
.custom-button:hover {
    border: 2px solid #00186D;
    color: #00186D;
}

/* icon pour réinitialiser les filtres */
.icon-re {
    margin-left: 15px;
}

/********************************************************************************/

/* div du chargement */
 .spinner-div {
    display:none;
    justify-content:center;
    align-items:center;
    height:50px;
    padding: 100px;
}

/* rond du chargement */
.loader {
    border: 5px solid #f3f3f3;
    border-top: 5px solid #00186D;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
}

/* texte du chargement */
.spinner-text {
    margin-left:10px; 
    font-weight:bold;
    color: #00186D;
}

/* animation rotation spinner chargement */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* div quand la requete AJAX ne renvoie aucun post */
.aucun-resultat {
    display: flex;
    justify-content: center;
    padding: 100px;
    height:50px;
    font-weight:bold;
    color: #00186D;
}

/********************************************************************************/

/* pour les écrans de plus de 1600px */
@media (min-width: 1600px) {

    /* div filtrage les un à côté des autres */
    .search-banner {
        display: flex;
        flex-direction: row;
        margin: 60px 240px;
        gap: 16px;
    }

    /* taille des éléments de la div */
    .search-banner > div {
        flex: 1 1 25%;
    }

    /* bouton réinitialiser */
    .search-banner > div:last-child {
        flex: 1 1 18%;
    }
}

/* pour les écrans de moins de 1600px */
@media (max-width: 1600px) {

    /* div filtrage les un en dessous des autres */
    .search-banner {
        display: flex;
        flex-direction: column;
        margin: 30px 40px;
    }

    /* réduction de la marche en petit format */
    .custom-button {
        margin-top: 10px;
    }

    /* taille des éléments de la div */
    .search-banner > div {
        flex: 1 1 100%;
    }
}


/* pour les écrans de moins de 1000px */
@media (max-width: 1000px) {

    /* centrer les div */
    .presentation-annuraire p,
    .custom-banner p {
        display: block;
        justify-content: center;
        text-align: center;
        align-items: center;
    }

    /* div du bouton ajout asso */
    .custom-banner {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 15px;
    }

    /* supprime la marge droite du bouton */
    .custom-button-ajout {
        padding: 20px 10px;
        margin: 10px;
        font-size: 14px;
    }

    .plus-icon {
        margin-right: 6px;
        vertical-align: bottom;
    }
}

/* pour les écrans entre 1600px et 1700px */
@media (min-width: 1600px) and (max-width: 1700px) {
    #reset-filters-button .icon-re {
        display: none;
    }

    .custom-button {
        padding: 18px 20px;
    }
}