/* Secret Jardin Store Finder - front styles.
 * Préfixe .sjsf- pour ne pas entrer en conflit avec le thème Total.
 *
 * NOTE unités : on utilise `em` partout (pas `rem`) parce que le thème
 * Total applique html { font-size: 62.5% } (10px de base). En `rem`,
 * toutes nos tailles se retrouvent divisées par 1.6 et le texte devient
 * minuscule. En `em`, on se cale sur le font-size du parent (~15px),
 * donc le rendu reste prévisible quel que soit le thème.
 */

.sjsf-wrapper { max-width: 100%; margin: 0 auto 1.5em; }
.sjsf-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.sjsf-controls {
    display: flex; flex-wrap: wrap; gap: .75em;
    background: #f7f7f7; padding: .75em; border-radius: 8px;
    margin-bottom: .75em;
}
.sjsf-control {
    display: flex; gap: .5em; align-items: center;
    flex: 1 1 auto; min-width: 260px;
}
.sjsf-control-sec { flex: 1 1 auto; flex-wrap: wrap; }

#sjsf-search {
    flex: 1 1 auto; min-width: 0;
    padding: .55em .75em; font-size: 1em;
    border: 1px solid #ccc; border-radius: 6px; background: #fff;
    line-height: 1.4;
}
#sjsf-search:focus { outline: 2px solid #ffd400; border-color: #ffd400; }

.sjsf-btn {
    padding: .55em 1em; font-size: .95em; font-weight: 600;
    border-radius: 6px; cursor: pointer; border: 1px solid transparent;
    white-space: nowrap;
}
.sjsf-btn-primary { background: #ffd400; color: #1a1a1a; }
.sjsf-btn-primary:hover { background: #ffc800; }
.sjsf-btn-ghost { background: #fff; color: #1a1a1a; border-color: #ccc; }
.sjsf-btn-ghost:hover { border-color: #999; background: #fafafa; }
.sjsf-btn[disabled] { opacity: .6; cursor: progress; }

.sjsf-select {
    padding: .55em .75em; font-size: .95em;
    border: 1px solid #ccc; border-radius: 6px; background: #fff;
    max-width: 100%;
}
.sjsf-count { color: #555; font-size: .9em; }

.sjsf-map {
    height: 560px; width: 100%;
    border-radius: 8px; border: 1px solid #e5e5e5;
    /* Leaflet 1.9.4 force `font-size: 0.75rem` sur .leaflet-container.
       Sur un thème en 62.5% (html 10px) ça donne 7.5px illisible sur
       l'attribution et les popups. On force 14px en absolu. */
    font-size: 14px;
    /* Isole les z-index internes de Leaflet (controls 1000, markers 600,
       popups 700) dans un stacking context local. Sans ça, ils passent
       au-dessus des mega-menus du thème. */
    position: relative;
    z-index: 0;
    isolation: isolate;
}
@media (max-width: 600px) { .sjsf-map { height: 420px; } }

.sjsf-noscript {
    padding: 1em; background: #fff8d6; border: 1px solid #ffd400;
    border-radius: 6px; margin-top: .75em;
}

/* Leaflet popup styling */
.leaflet-popup-content { font-size: .95em; line-height: 1.4; min-width: 200px; }
.leaflet-popup-content strong { font-size: 1.05em; }
.leaflet-popup-content a { color: #c79100; }

/* Marker isolé (pas absorbé par un cluster) : disque jaune SJ
   pour rester visuellement cohérent avec les bulles MarkerCluster.Default. */
.sjsf-marker { background: transparent; border: 0; }
.sjsf-marker-dot {
    display: block; width: 22px; height: 22px; border-radius: 50%;
    background: #ffd400; border: 3px solid rgba(255, 255, 255, .85);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .25), 0 1px 3px rgba(0, 0, 0, .25);
}
.sjsf-marker-dot:hover { background: #ffc800; cursor: pointer; }

/* ===== Récap SEO ===== */
.sjsf-seo { margin: 2.5em 0 3em; }

/* Accordéon global qui contient toute la liste. Fermé par défaut pour ne
   pas écraser la map sous des centaines de noms ; Google indexe quand
   même le contenu du <details> fermé. */
.sjsf-seo-toggle {
    border-top: 1px solid #e5e5e5;
    padding-top: 1.5em;
}
.sjsf-seo-summary {
    list-style: none; cursor: pointer;
    padding: 1em 1.25em;
    background: #fafafa; border: 1px solid #e5e5e5; border-radius: 8px;
    display: flex; flex-direction: column; gap: .25em;
    user-select: none;
    transition: background .15s;
}
.sjsf-seo-summary::-webkit-details-marker { display: none; }
.sjsf-seo-summary:hover { background: #f3f3f3; }
.sjsf-seo-summary-title {
    font-size: 1.35em; font-weight: 700; color: #1a1a1a;
    display: flex; align-items: center; gap: .5em;
}
.sjsf-seo-summary-title::after {
    content: "▾"; margin-left: auto; transition: transform .2s; color: #888;
    font-size: .8em;
}
.sjsf-seo-toggle[open] > .sjsf-seo-summary-title::after,
.sjsf-seo-toggle[open] .sjsf-seo-summary-title::after { transform: rotate(180deg); }
.sjsf-seo-summary-hint { color: #666; font-size: .95em; }

.sjsf-seo-body {
    margin-top: 1.25em;
    display: flex; flex-direction: column; gap: .75em;
}

.sjsf-country-block {
    border: 1px solid #e5e5e5; border-radius: 6px;
    background: #fff; overflow: hidden;
}
.sjsf-country-block > summary {
    list-style: none; cursor: pointer; padding: .9em 1.1em;
    font-weight: 600; display: flex; align-items: baseline; gap: .5em;
    background: #fafafa; user-select: none;
}
.sjsf-country-block > summary::-webkit-details-marker { display: none; }
.sjsf-country-block > summary::after {
    content: "▾"; margin-left: auto; transition: transform .15s; color: #888;
}
.sjsf-country-block[open] > summary::after { transform: rotate(180deg); }
.sjsf-country-block > summary:hover { background: #f3f3f3; }
.sjsf-country-block-count {
    color: #555; font-weight: 400; font-size: .9em;
    background: #fff; padding: .1em .55em; border-radius: 999px;
    border: 1px solid #e5e5e5;
}

.sjsf-country-dealers {
    margin: 0; padding: .75em 1.1em 1.1em; list-style: none;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: .4em 1.25em;
}
.sjsf-country-dealers li { padding: .25em 0; border-bottom: 1px dotted #eee; }
.sjsf-country-dealers a {
    text-decoration: none; color: #1a1a1a; display: inline-block;
    line-height: 1.35;
}
.sjsf-country-dealers a:hover { color: #c79100; text-decoration: underline; }
.sjsf-country-dealers .sjsf-town {
    color: #777; font-size: .88em; margin-left: .35em;
}
@media (max-width: 600px) {
    .sjsf-country-dealers { grid-template-columns: 1fr; }
}