.home .section-recherche-applicateur {background-color: var(--couleur-principale);}
.recherche-applicateur-container {flex-direction: column;}
.home .recherche-applicateur-container {margin: 70px auto 70px; flex-direction: row;}
.section-recherche-applicateur>.flex-container {column-gap: 50px; row-gap: 15px; padding: 20px 20px;}
.section-recherche-applicateur p, .section-recherche-applicateur h2 {color: var(--couleur-blanc);}
.section-recherche-applicateur-txt h2, .section-recherche-applicateur-txt p {display: none;}
.home .section-recherche-applicateur-txt h2, .home .section-recherche-applicateur-txt p {display: block;}
.home .section-recherche-applicateur-txt {width: 100%; flex-direction: column; justify-content: center; display: flex;}
.section-recherche-applicateur-txt h2 {font-weight: 400;}



#searchForm {display: flex; justify-content: center;gap: 0; margin-left: 0; margin-right: 0; flex-wrap: nowrap;}
.home #searchForm {justify-content: left;}
#searchForm button[type="submit"], #searchForm input[type="text"] {border: none;}
#searchForm button[type="submit"] {background-color: var(--couleur-principale); color: var(--couleur-blanc); border-radius: 0 8px 8px 0;}
.home #searchForm button[type="submit"] {background-color: var(--couleur-noir);}
#searchForm button[type="submit"]:hover {background-color: var(--couleur-gris);}
#searchForm input[type="text"] {border-radius: 8px 0 0 8px; flex: 1; flex: 1;}



/*.vignette-applicateur-carte {gap: 20px; flex-direction: column;  justify-content: space-between; margin: 20px 0; align-items: center;}*/
.vignette-applicateur-carte {column-gap: 30px; align-items: center; max-width: 700px; margin: 30px auto; border-bottom: 1px solid #F5F5F5; padding-bottom: 30px; flex-direction: column;}
.home .vignette-applicateur-carte {background-color: var(--couleur-blanc); border-radius: 20px; padding: 18px 30px; margin: 20px auto;}
.section-recherche-applicateur .photo-applicateur {width: 100px; height: 100px; border-radius: 50%; overflow: hidden;}
.section-recherche-applicateur .photo-applicateur img {object-fit: cover; height: 100%; width: 100%;}

.home #applicateurInfo {margin-top: 30px !important;}
.vignette-applicateur-detail {text-align: center; flex: 1;}
.vignette-applicateur-detail h3 {color: var(--couleur-principale); font-size: 23px; font-weight: 800;}
.vignette-applicateur-detail h3, .vignette-applicateur-detail p {margin: 0;}
.vignette-applicateur-detail h4 {margin-bottom: 0; margin-top: 10px;}
.vignette-applicateur-detail .localisation-applicateur {color: var(--couleur-principale);}
.vignette-applicateur-detail p {color: var(--couleur-noir); display: block; text-align: center;} 

.section-recherche-applicateur #map {min-height: 500px; z-index: 1;}
.home .section-recherche-applicateur #map {aspect-ratio: 1/1; z-index: 0; height: inherit; min-height: auto; max-height: 400px;}

/* Styles pour le placeholder de chargement de la carte */
.map-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 500px;
    background-color: #f5f5f5;
    border-radius: 8px;
}

.map-loading {
    text-align: center;
    color: var(--couleur-principale);
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e0e0e0;
    border-top: 4px solid var(--couleur-principale);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.map-loading p {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}

.map-error {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 500px;
    background-color: #ffebee;
    border-radius: 8px;
    color: #d32f2f;
}

.map-error p {
    margin: 0;
    font-size: 16px;
}

.vignette-applicateur-btn {align-items: end; margin-top: 15px;}
.vignette-applicateur-btn a {display: block; background-color: var(--couleur-principale); text-decoration: none; color: var(--couleur-blanc); padding: 6px 20px; border-radius: 20px;}
.vignette-applicateur-btn a:hover {background-color: var(--couleur-noir);}

button.hideApplicateurInfo {background-color: var(--couleur-noir); border: none; border-radius: 50%; height: 25px; width: 25px; margin-left: calc(50% - 20px); margin-top: 40px; margin-bottom: 20px;}
.home button.hideApplicateurInfo {margin-top: 10px;}
button.hideApplicateurInfo i::before {color: var(--couleur-blanc); font-size: 15px;}

.no-applicateur-message {background-color: var(--couleur-blanc); padding: 20px; margin-top: 30px; max-width: 700px; margin: auto; border-top: 1px solid #F5F5F5;}
.home .no-applicateur-message {border-radius: 20px;}
.no-applicateur-message p, .no-applicateur-message .nf-form-fields-required {color: var(--couleur-noir) !important; font-size: 14px; display: block;}
.no-applicateur-message nf-fields-wrap {display: flex; flex-wrap: wrap; column-gap: 40px; margin-top: 10px;}
.no-applicateur-message nf-field {width: 100%;}
.no-applicateur-message nf-field:nth-last-child(2) {width: 100%;}
.no-applicateur-message nf-field:last-of-type {margin: auto; text-align: center;}
.no-applicateur-message nf-field:last-of-type input {padding: 15px 25px;}
.no-applicateur-message nf-field:last-of-type input:hover {background-color: var(--couleur-gris); color: var(--couleur-blanc);}

.no-applicateur-message .contact-applicateur, .no-applicateur-message .contact-applicateur input, .no-applicateur-message .contact-applicateur select {width: 100%;}
.no-applicateur-message .contact-applicateur>p {margin-top: 10px; margin-bottom: 10px;}
.no-applicateur-message .contact-applicateur.section-select p {position: relative;}
.no-applicateur-message .contact-applicateur.section-select p::after {content: "\f078"; font-weight: 900; font-family: "FontAwesome"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: var(--couleur-principale);}

.leaflet-popup-content .vignette-applicateur-carte {max-width: 100%; border: none; padding-bottom: 0; flex-wrap: wrap; margin: 20px 0;}
.home .leaflet-popup-content .vignette-applicateur-carte {padding: 0; flex-direction: column;}
.leaflet-popup-content .vignette-applicateur-carte .vignette-applicateur-btn {width: 100%; margin-top: 15px; width: 100% !important;}
.leaflet-popup-content .vignette-applicateur-detail p, .leaflet-popup-content .vignette-applicateur-detail h4 {text-align: left;}

#map .leaflet-popup-close-button {display: none;}
#map .leaflet-marker-icon:focus-visible {outline: none !important;}

/************************************************/
/**                                            **/
/**                  Responsive                **/
/**                                            **/
/************************************************/


@media screen and (min-width: 768px) {

    .home .section-recherche-applicateur-txt {width: 58%; padding: 25px 0;}
    .home .section-recherche-applicateur #map {flex: 1; height: inherit; aspect-ratio: auto; max-height: 100%;}
    .vignette-applicateur-carte {flex-direction: row;}
    .vignette-applicateur-detail {text-align: left;}
    .vignette-applicateur-img {width: max-content; align-items: center;}
    .no-applicateur-message nf-field {width: calc(50% - 20px); display: inline-block;}
    .vignette-applicateur-detail p {text-align: left;}
    .vignette-applicateur-btn {margin-top: 0;}
    #map .leaflet-popup-content {min-width: 500px;}
    .home #map .leaflet-popup-content {min-width: auto;}
    .leaflet-popup-content .vignette-applicateur-carte .vignette-applicateur-btn {margin-left: 130px;}
    .home .leaflet-popup-content .vignette-applicateur-carte .vignette-applicateur-btn {margin-left: 0;}
    #searchForm input[type="text"] {max-width: 300px;}
    .section-recherche-applicateur.page-recherche-applicateur #searchForm {margin-left: auto; margin-right: auto;}
}


@media screen and (min-width: 1000px) {
.no-applicateur-message .contact-applicateur:not(.section-select) {width: calc(50% - 10px);}
}

@media screen and (min-width: 1200px) {
    .section-recherche-applicateur>.flex-container {padding: 0;}
    .section-recherche-applicateur-txt h2 strong {display: block;}
    .home .recherche-applicateur-container {width: 90%; max-width: 1180px; margin: 70px auto 70px;}
}