/* mymapmodule/views/css/storelocator.css */
.sticky {
    z-index: 99999 !important;
}
.sl-container {
    /*max-width: 1200px;*/
    margin: 2em auto;
    padding: 0 15px; /* Pour mobile */
    color: #333;
    font-family: ff-dax-web-pro, sans-serif;
}

.sl-header {
    margin-bottom: 1.5em;
    box-shadow: none;
}

.sl-title {
    font-family: ff-dax-web-pro, sans-serif;
    font-weight: 400;
    font-size: 40px; /* Taille mobile demandée */
    line-height: 1.2; /* Ajuster pour une meilleure lisibilité */
    letter-spacing: 0;
    color: #000000;
    text-align: center;
    margin: 0.5em 0 1.5em 0; /* Augmenté marge en bas */
}

@media (min-width: 768px) { /* Desktop */
    .sl-title {
        font-size: 55px; /* Taille desktop depuis Figma */
    }
}

.sl-controls {
    display: flex;
    flex-direction: column;
    gap: 1em;
    margin-bottom: 1.5em;
    align-items: self-start;; /* Centrer les contrôles */
}

.sl-search-form {
    width: 100%;
    max-width: 450px; /* Limiter la largeur du champ de recherche */
}

.sl-input-wrapper {
    position: relative;
    width: 100%;
}

.sl-input-wrapper input[type="text"] {
    width: 100%;
    height: 48px;
    padding: 0 45px 0 15px; /* Espace pour le bouton loupe */
    border: 1px solid #E7E7E7;
    /*border-radius: 24px;  Plus arrondi */
    font-size: 1rem;
    box-sizing: border-box;
    color: black;
    font-weight: 400;       /* Depuis Figma */
    font-size: 17px;        /* Depuis Figma */
    line-height: 1;         /* Depuis Figma (100%) */
    letter-spacing: 0%;     /* Depuis Figma */
}
.sl-input-wrapper input[type="text"]::placeholder  {
    color: black;
    opacity: 1.0;
    font-weight: 400;
}

.sl-input-wrapper button {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sl-input-wrapper button img {
    width: 20px; /* Ajuster la taille de l'icône */
    height: 20px;
}

.sl-filters {
    display: flex;
    gap: 1.5em;
    align-items: center;
    justify-content: center; /* Centrer les filtres */
    flex-wrap: wrap;
}

.sl-filters label {
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.sl-filters input[type="checkbox"] {
    margin-right: 0.5em;
    accent-color: #007E3C; /* Vert Avogel */
    width: 18px; /* Assurez-vous que ce n'est pas 0 */
    height: 18px; /* Assurez-vous que ce n'est pas 0 */
    /* Ajoutez pour s'assurer qu'elles sont visibles : */
    opacity: 1 !important;
    visibility: visible;
    position: static; /* ou relative, mais pas absolute qui pourrait les cacher */
    display: inline-block; /* ou block */
}


.sl-main {
    display: grid;
    grid-template-columns: 1fr; /* Mobile first: une colonne */
    gap: 1.5em;
}

@media (min-width: 768px) { /* Tablette et plus */
    .sl-main {
        grid-template-columns: 350px 1fr; /* Liste à gauche, carte à droite */
    }
    .sl-controls {
        /*flex-direction: row; /* Contrôles sur une ligne */
        justify-content: space-between;
        align-items: self-start;
    }
    .sl-search-form {
        max-width: 350px;
    }

}

.sl-list-wrapper {
    position: relative; /* Pour le message "aucun résultat" */
}

/* Dégradé en bas de la liste pour indiquer le scroll */
.sl-list-wrapper::after {
    margin-right: 20px;
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0; /* S'étend sur toute la largeur */
    height: 40px; /* Hauteur du dégradé */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 90%); /* Dégradé de transparent vers blanc */
    /* Si le fond de ta liste n'est pas blanc pur, ajuste la couleur rgba(255, 255, 255, 1) */
    pointer-events: none; /* Permet de cliquer à travers le dégradé */
    /* Optionnel: masquer le dégradé si la liste n'est pas scrollable ou est au bout */
    /* Cela nécessiterait du JavaScript pour détecter l'état du scroll. */
    /* Pour une version pure CSS, le dégradé sera toujours là mais ne gênera pas. */
    /* On peut aussi jouer avec la couleur de fond du .sl-list-wrapper pour que ça se fonde bien */
}


.sl-list {
    max-height: 550px; /* Hauteur de la carte - padding */
    overflow-y: auto;
    padding-right: 10px; /* Pour la scrollbar */
    list-style: none;
    margin: 0;
    padding: 0;
}
/* Style de la scrollbar (optionnel, pour Webkit) */
.sl-list::-webkit-scrollbar { width: 8px; }
.sl-list::-webkit-scrollbar-track { background: #f1f1f1; /*border-radius: 4px;*/}
.sl-list::-webkit-scrollbar-thumb { background: #ccc; /*border-radius: 4px;*/}
.sl-list::-webkit-scrollbar-thumb:hover { background: #aaa; }


.sl-store-item {
    position: relative;
    background: #fff;
    border: 1px solid #eee;
    /*border-left: 4px solid transparent; /* Pour l'état actif */
    /*border-radius: 0 8px 8px 0;*/
    padding: 1em 1.2em;
    margin-bottom: 1em;
    cursor: pointer;
    margin-right: 10px;
    transition: box-shadow .2s, background .2s, border-color .2s;
}

.sl-store-item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.sl-store-item.active {
    border-left-color: #e10079; /* Rose Avogel */
    background: #f9f9f9;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border-left-width: 5px;
}

.sl-store-item h3 {
    margin: 0 0 0.3em 0;
    font-size: 1.1rem; /* Ajusté */
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sl-store-item .sl-distance {
    font-size: 0.85rem;
    color: #555;
    font-weight: normal;
    white-space: nowrap;
    margin-left: 10px;
}

.sl-store-item p {
    margin: 0.2em 0;
    font-size: 0.9rem; /* Ajusté */
    line-height: 1.4;
    color: #444;
}
.sl-store-item p.sl-phone {
    /* Style spécifique si besoin */
}

.sl-no-results {
    padding: 2em;
    text-align: center;
    color: #777;
}

.sl-map {
    width: 100%;
    height: 400px; /* Hauteur mobile */
   /* border-radius: 8px;*/
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
@media (min-width: 768px) {
    .sl-map {
        height: 670px; /* Hauteur desktop */
    }
}


/* Popup Leaflet */
.leaflet-popup-content-wrapper {
    border-radius: unset;
}

.leaflet-container .leaflet-control-attribution {
    display: none;
}
.leaflet-popup-content-wrapper {
    /*border-radius: 6px !important;*/
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}
.leaflet-popup-content {
    font-size: 0.9rem;
    line-height: 1.5;
}
.leaflet-popup-content h4 {
    font-size: 16px;
    margin: 0 0 8px 0;
    font-weight: 600;
    text-transform: uppercase;
}
.leaflet-popup-content p {
    margin: 4px 0;
    font-size: 14px;
}
.leaflet-popup-content a.sl-popup-directions {
    display: inline-block;
    margin-top: 8px;
    color: black;
    font-size: 14px;
    text-decoration: underline;
    font-weight: 400;
}
.leaflet-popup-content a.sl-popup-directions:hover {
    text-decoration: underline;
}


/* Section "Devenir point de vente" */
.sl-become {
    position: relative;
    margin: 3em 0;
    /*border-radius: 8px;*/
    overflow: hidden;
    min-height: 300px; /* Hauteur minimale */
    display: flex; /* Pour centrer le contenu */
    align-items: center;
    justify-content: center;
    background-color: black;
}

.sl-bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    z-index: 1;
    opacity: 70%;

}

.sl-become-content {
    position: relative;
    padding: 3em 2em;
    text-align: center;
    z-index: 2;


}


.sl-become-content h2 { /* Titre h2 de la section "Devenir point de vente" */
    font-family: ff-dax-web-pro, sans-serif;
    font-size: 30px;        /* Depuis tes retours mobile */
    line-height: 35px;      /* Depuis tes retours mobile */
    font-weight: 700;       /* Depuis tes retours (bold) */
    margin-bottom: 1em;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6); /* Ombre un peu plus forte pour lisibilité */
}
@media (min-width: 768px) { /* Desktop */
    .sl-become-content h2 {
        font-size: 2.2rem; /* Ajuster pour desktop si besoin, sinon garde 30px */
        line-height: 1.3;
    }
}
.sl-btn-contact,
a.sl-btn-contact { /* Pour cibler le lien aussi */
    background-color: #007E3C !important; /* Vert Avogel */
    color: #fff !important;
    padding: 0.8em 1.8em !important;
    font-size: 19px;
    text-decoration: none !important;
    font-weight: 400 !important;
    border: none !important;
    transition: background-color .2s;
}
.sl-btn-contact:hover,
a.sl-btn-contact:hover {
    background-color: #006633 !important; /* Vert plus foncé au survol */
}

/* Styles personnalisés pour les clusters Leaflet MarkerCluster */

/* Style de base pour tous les clusters */
.marker-cluster span{
    color: #FFFFFF !important;             /* Couleur du texte (nombre) en blanc */
    font-weight: bold;          /* Nombre en gras */
    font-size: unset;
}

/* --- Petit Cluster --- */
.marker-cluster-small {
    background-color: #007E3C33; /* Vert Avogel avec ~20% opacité pour le cercle extérieur */
}
.marker-cluster-small div {
    background-color: #007E3C;   /* Vert Avogel plein pour le cercle intérieur */
    /* Si besoin d'ajuster la taille du texte spécifiquement pour les petits clusters : */
    /* font-size: 11px; */
}

/* --- Cluster Moyen --- */
.marker-cluster-medium {
    background-color: #007E3C33; /* Vert Avogel avec ~20% opacité */
}
.marker-cluster-medium div {
    background-color: #007E3C;   /* Vert Avogel plein */
    /* Si besoin d'ajuster la taille du texte spécifiquement pour les clusters moyens : */
    /* font-size: 12px; */
}

/* --- Grand Cluster --- */
.marker-cluster-large {
    background-color: #007E3C33; /* Vert Avogel avec ~20% opacité */
}
.marker-cluster-large div {
    background-color: #007E3C;   /* Vert Avogel plein */
    /* Si besoin d'ajuster la taille du texte spécifiquement pour les grands clusters : */
    /* font-size: 13px; */
}

/* --- Fallback pour les anciens navigateurs (IE 6-8) --- */
/* Pour IE, on ne peut pas utiliser RGBA ou les codes hexadécimaux à 8 chiffres pour l'opacité.
   On utilise donc la couleur pleine pour le cercle extérieur, ou une version pré-calculée.
   Pour #007E3C33, il n'y a pas d'équivalent RGB simple sans opacité qui ait le même rendu.
   On pourrait utiliser une couleur légèrement plus claire du vert plein, ou la même.
   Ici, on utilise le vert plein pour le cercle extérieur comme fallback simple. */

.leaflet-oldie .marker-cluster-small,
.leaflet-oldie .marker-cluster-medium,
.leaflet-oldie .marker-cluster-large {
    background-color: #007E3C; /* Vert plein pour le cercle extérieur en fallback */
}

.leaflet-oldie .marker-cluster-small div,
.leaflet-oldie .marker-cluster-medium div,
.leaflet-oldie .marker-cluster-large div {
    background-color: #006A31; /* Un vert légèrement plus foncé pour le cercle intérieur pour créer un contraste */
    color: #FFFFFF;
}


.sl-list-disclaimer {
    margin-top: 60px; /* Espace au-dessus du texte */
    /* border-radius: 4px; */ /* Enlevé si tu veux tout en carré */
    font-size: 0.85rem; /* Texte un peu plus petit */
    line-height: 1.5;
    color: #555555; /* Couleur de texte un peu plus discrète */
}

.sl-list-disclaimer p {
    margin: 0;
}