/**
 * Store Locator V7 — Pixel perfect maquette client
 * ====================================================
 * Desktop (>= 921px) : split 50/50 carte / panel droite avec design charte SOS+.
 * Mobile (<= 920px)  : layout V6 inchange (FAB + tabs liste/carte).
 */

/* ==========================================================================
   V7 DESKTOP - SPLIT 50/50
   ========================================================================== */
.sos-sl--v7 {
    background: var(--sos-bg, #F6F8FC);
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

.sos-sl--v7 .sos-sl__split {
    display: grid;
    grid-template-columns: 45% 55%;
    min-height: 100vh;
}

/* ============================================
   COLONNE GAUCHE : carte
   ============================================ */
.sos-sl--v7 .sos-sl__split-map {
    position: relative;
    background: #F6F8FC;
    overflow: hidden;
}

.sos-sl--v7 .sos-sl__split-map .sos-sl__map {
    width: 100%;
    height: 100%;
    min-height: 100vh;
}

/* ============================================
   COLONNE DROITE : panel
   ============================================ */
.sos-sl--v7 .sos-sl__panel {
    background: #FFFFFF;
    overflow-y: auto;
    display: flex;
    align-items: stretch;
}

.sos-sl--v7 .sos-sl__panel-inner {
    width: 100%;
    max-width: none;
    padding: 64px 32px 64px 56px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* ============================================
   INTRO : eyebrow + titre + lead
   ============================================ */
.sos-sl--v7 .sos-sl__eyebrow-flat {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #009FE6;
    margin: 0 0 4px;
    line-height: 1.4;
}

.sos-sl--v7 .sos-sl__title-v7 {
    font-size: clamp(28px, 2.6vw, 38px) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    color: #21326A !important;
    letter-spacing: -0.02em;
    font-family: inherit !important;
}

.sos-sl--v7 .sos-sl__title-v7 strong {
    font-weight: 700;
    background: linear-gradient(135deg, #FFCC2B 0%, #FFD955 50%, #FFCC2B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
}

.sos-sl--v7 .sos-sl__lead {
    font-size: 15px;
    color: #5A6E8C;
    margin: 4px 0 12px !important;
    line-height: 1.5;
    font-weight: 400;
}

/* ============================================
   SEARCH ROW : input radio + CTA bleu marine
   ============================================ */
.sos-sl--v7 .sos-sl__search-row {
    display: flex;
    gap: 12px;
    align-items: stretch;
    margin-top: 4px;
}

.sos-sl--v7 .sos-sl__search-row .sos-sl__search-input-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
}

.sos-sl--v7 .sos-sl__search-radio {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #009FE6;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
}

.sos-sl--v7 .sos-sl__search-radio-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #009FE6;
}

.sos-sl--v7 .sos-sl__search-input-v7 {
    width: 100%;
    height: 56px;
    padding: 0 18px 0 48px !important;
    border: 1px solid rgba(33, 50, 106, 0.14) !important;
    background: #FFFFFF !important;
    border-radius: 18px 5px 18px 5px !important;
    font-family: inherit !important;
    font-size: 15px;
    font-weight: 500;
    color: #21326A !important;
    transition: all 0.2s ease;
}

.sos-sl--v7 .sos-sl__search-input-v7::placeholder {
    color: #8B96AE;
    font-weight: 400;
}

.sos-sl--v7 .sos-sl__search-input-v7:hover {
    border-color: rgba(33, 50, 106, 0.25) !important;
}

.sos-sl--v7 .sos-sl__search-input-v7:focus {
    outline: none !important;
    border-color: #009FE6 !important;
    box-shadow: 0 0 0 3px rgba(0, 159, 230, 0.15);
}

.sos-sl--v7 .sos-sl__search-clear {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background: transparent !important;
    border: none !important;
    color: #8B96AE !important;
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    transition: all 0.2s ease;
}

.sos-sl--v7 .sos-sl__search-clear:hover {
    color: #21326A !important;
    background: rgba(33, 50, 106, 0.06) !important;
}

/* CTA "Rechercher" - bleu marine, feuille */
.sos-sl--v7 .sos-sl__cta-search {
    height: 56px;
    padding-left: 32px !important;
    padding-right: 32px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: #21326A !important;
    background-image: none !important;
    color: #FFFFFF !important;
    font-family: inherit !important;
    font-size: 15px;
    font-weight: 600;
    border: none !important;
    border-radius: 18px 5px 18px 5px !important;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: -0.01em;
}

.sos-sl--v7 .sos-sl__cta-search:hover,
.sos-sl--v7 .sos-sl__cta-search:focus,
.sos-sl--v7 .sos-sl__cta-search:focus-visible {
    background: #0E1A45 !important;
    background-image: none !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(33, 50, 106, 0.25);
    outline: none !important;
}

.sos-sl--v7 .sos-sl__cta-search:active {
    transform: translateY(0);
    background: #0E1A45 !important;
}

/* ============================================
   LIEN "Utiliser ma position GPS"
   ============================================ */
.sos-sl--v7 .sos-sl__locate-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    color: #009FE6 !important;
    font-family: inherit !important;
    font-size: 14px;
    font-weight: 500;
    padding: 4px 0 !important;
    cursor: pointer;
    transition: color 0.2s ease;
    align-self: flex-start;
    margin-top: 4px;
    margin-bottom: 8px;
}

.sos-sl--v7 .sos-sl__locate-link:hover,
.sos-sl--v7 .sos-sl__locate-link:focus,
.sos-sl--v7 .sos-sl__locate-link:focus-visible {
    color: #0E1A45 !important;
    background: transparent !important;
    outline: none !important;
}

.sos-sl--v7 .sos-sl__locate-link-icon {
    display: inline-flex;
    align-items: center;
    color: currentColor;
}

.sos-sl--v7 .sos-sl__locate-link-icon svg {
    align-self: center;
    flex-shrink: 0;
}

/* ============================================
   RESULTATS : 3 cartes affichees + scroll au-dela
   ============================================ */
.sos-sl--v7 .sos-sl__results {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Hauteur exacte pour afficher 3 cartes (76px chacune + 12px gap) */
    max-height: 276px;
    overflow-y: auto;
    /* Scrollbar invisible mais scroll fonctionnel */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.sos-sl--v7 .sos-sl__results::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.sos-sl--v7 .sos-sl__results-skeleton {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sos-sl--v7 .sos-sl__skeleton-row {
    height: 76px;
    border-radius: 12px;
    background: linear-gradient(110deg, #F6F8FC 8%, #ECF0F8 18%, #F6F8FC 33%);
    background-size: 200% 100%;
    animation: sos-shimmer 1.6s linear infinite;
}

/* CARD RESULTAT V7 - format ligne compacte */
.sos-sl--v7 .sos-sl__result-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #FFFFFF;
    border: 1px solid rgba(33, 50, 106, 0.10);
    border-radius: 12px;
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none;
}

.sos-sl--v7 .sos-sl__result-row:hover,
.sos-sl--v7 .sos-sl__result-row.is-active {
    border-color: rgba(33, 50, 106, 0.25);
    box-shadow: 0 4px 16px rgba(33, 50, 106, 0.08);
    transform: translateY(-1px);
}

.sos-sl--v7 .sos-sl__result-row-info {
    min-width: 0;
}

.sos-sl--v7 .sos-sl__result-row-name {
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #21326A !important;
    margin: 0 0 6px !important;
    line-height: 1.3 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.005em;
}

.sos-sl--v7 .sos-sl__result-row-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
    overflow: hidden;
}

.sos-sl--v7 .sos-sl__result-row-distance {
    font-size: 11px;
    font-weight: 600;
    color: #21326A;
    background: #ECF0F8;
    padding: 3px 9px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    letter-spacing: -0.005em;
    flex-shrink: 0;
}

.sos-sl--v7 .sos-sl__result-row-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.sos-sl--v7 .sos-sl__result-row-status--open {
    background: rgba(31, 167, 111, 0.10);
    color: #1FA76F;
}

.sos-sl--v7 .sos-sl__result-row-status--open .sos-sl__result-row-status-dot {
    background: #1FA76F;
    animation: sos-pulse 2s ease-in-out infinite;
}

.sos-sl--v7 .sos-sl__result-row-status--closing-soon {
    background: rgba(232, 156, 43, 0.12);
    color: #E89C2B;
}

.sos-sl--v7 .sos-sl__result-row-status--closed {
    background: #EEF2F8;
    color: #8B96AE;
}

.sos-sl--v7 .sos-sl__result-row-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.sos-sl--v7 .sos-sl__result-row-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #21326A;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.sos-sl--v7 .sos-sl__result-row-rating-star {
    color: #FFCC2B;
    font-size: 14px;
    line-height: 1;
}

/* CTA Prendre RDV - jaune feuille inline */
.sos-sl--v7 .sos-sl__result-row-cta {
    height: 40px;
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: linear-gradient(180deg, #FFD955 0%, #FFCC2B 100%) !important;
    color: #21326A !important;
    font-family: inherit !important;
    font-size: 13px;
    font-weight: 600;
    border-radius: 14px 4px 14px 4px !important;
    border: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
    box-shadow:
        0 1px 2px rgba(33, 50, 106, 0.08),
        0 4px 8px rgba(33, 50, 106, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.50),
        inset 0 -2px 0 rgba(33, 50, 106, 0.10);
    white-space: nowrap;
    text-decoration: none !important;
    cursor: pointer;
}

.sos-sl--v7 .sos-sl__result-row-cta:hover,
.sos-sl--v7 .sos-sl__result-row-cta:focus,
.sos-sl--v7 .sos-sl__result-row-cta:focus-visible {
    transform: translateY(-1px) scale(1.02);
    box-shadow:
        0 4px 8px rgba(33, 50, 106, 0.10),
        0 8px 16px rgba(255, 204, 43, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.50),
        inset 0 -2px 0 rgba(33, 50, 106, 0.10);
    outline: none !important;
}

/* Bouton expand "+" bleu clair */
.sos-sl--v7 .sos-sl__result-row-expand {
    width: 40px;
    height: 40px;
    background: #FFFFFF !important;
    border: 1px solid rgba(33, 50, 106, 0.14) !important;
    border-radius: 8px !important;
    color: #009FE6 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    padding: 0 !important;
}

.sos-sl--v7 .sos-sl__result-row-expand:hover,
.sos-sl--v7 .sos-sl__result-row-expand:focus,
.sos-sl--v7 .sos-sl__result-row-expand:focus-visible {
    border-color: #009FE6 !important;
    background: rgba(0, 159, 230, 0.08) !important;
    transform: translateY(-1px);
    outline: none !important;
}

.sos-sl--v7 .sos-sl__result-row-expand svg {
    align-self: center;
    flex-shrink: 0;
}

.sos-sl--v7 .sos-sl__results-empty {
    padding: 32px 16px;
    text-align: center;
    color: #8B96AE;
    font-size: 14px;
    background: #F6F8FC;
    border-radius: 12px;
}

/* ============================================
   CTA bottom : "Voir les X centres" + triangle SOS
   ============================================ */
.sos-sl--v7 .sos-sl__cta-all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-left: 32px !important;
    padding-right: 14px !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    height: auto;
    min-height: 64px;
    background: linear-gradient(180deg, #FFD955 0%, #FFCC2B 100%) !important;
    background-image: linear-gradient(180deg, #FFD955 0%, #FFCC2B 100%) !important;
    color: #21326A !important;
    font-family: inherit !important;
    font-size: 16px;
    font-weight: 700;
    border: none !important;
    border-radius: 18px 5px 18px 5px !important;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow:
        0 1px 2px rgba(33, 50, 106, 0.08),
        0 4px 12px rgba(33, 50, 106, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.50),
        inset 0 -2px 0 rgba(33, 50, 106, 0.10);
    width: 100%;
    letter-spacing: -0.01em;
    margin-top: 8px;
}

.sos-sl--v7 .sos-sl__cta-all:hover,
.sos-sl--v7 .sos-sl__cta-all:focus,
.sos-sl--v7 .sos-sl__cta-all:focus-visible {
    transform: translateY(-2px);
    box-shadow:
        0 4px 12px rgba(33, 50, 106, 0.10),
        0 12px 24px rgba(255, 204, 43, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.50),
        inset 0 -2px 0 rgba(33, 50, 106, 0.10);
    outline: none !important;
}

.sos-sl--v7 .sos-sl__cta-all-label {
    flex: 1;
    text-align: center;
}

.sos-sl--v7 .sos-sl__cta-all-pictogram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
}

.sos-sl--v7 .sos-sl__cta-all-img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    display: block;
}

/* ============================================
   POPUP MAP V7 : custom au design maquette
   (nom centre + note + bouton Voir la fiche jaune)
   ============================================ */
.sos-sl--v7 .maplibregl-popup-content {
    border-radius: 12px !important;
    padding: 16px !important;
    box-shadow: 0 16px 48px rgba(33, 50, 106, 0.18), 0 4px 12px rgba(33, 50, 106, 0.08) !important;
    border: 1px solid rgba(33, 50, 106, 0.10);
    background: #FFFFFF !important;
    min-width: 220px;
}

.sos-sl--v7 .maplibregl-popup-tip {
    border-top-color: #FFFFFF !important;
}

.sos-sl--v7 .maplibregl-popup-close-button {
    color: #8B96AE !important;
    font-size: 20px !important;
    padding: 4px 8px !important;
}

/* ==========================================================================
   V7 RESPONSIVE - <= 920px : on cache le split, on bascule sur mobile V6
   ========================================================================== */
@media (min-width: 921px) {
    .sos-sl--v7 .sos-sl__mobile-only,
    .sos-sl--v7 .sos-sl__mobile-fab,
    .sos-sl--v7 .sos-sl__mobile-search {
        display: none !important;
    }
}

@media (max-width: 920px) {
    /* Mobile : on garde la map dans le DOM (sinon MapLibre ne peut pas la rendre)
       Mais on cache le panel droit et on adapte le split a un layout mobile. */
    .sos-sl--v7 .sos-sl__split {
        display: block;
        min-height: 0;
    }

    .sos-sl--v7 .sos-sl__split-map {
        /* La carte est positionnee mobile via les classes .sos-sl__map-pane existantes */
        display: none;
    }

    .sos-sl--v7[data-mobile-view="map"] .sos-sl__split-map {
        display: block;
        height: calc(100vh - 220px - env(safe-area-inset-bottom, 0px));
        min-height: 480px;
    }

    .sos-sl--v7 .sos-sl__panel {
        display: none !important;
    }

    .sos-sl--v7 .sos-sl__mobile-only {
        display: block;
    }
}

@media (max-width: 1280px) and (min-width: 921px) {
    .sos-sl--v7 .sos-sl__panel-inner {
        padding: 56px 48px;
    }
}

/* ==========================================================================
   FIN BLOC V7 — apres ce point, styles legacy V6 conserves pour mobile
   ========================================================================== */

/**
 * Store Locator V4-Light — Light Mode Spatial 2026 (Bling)
 * =========================================================
 * Hero bleu marine (signature SOS, effet wow conserve).
 * Body, liste, carte : light mode propre.
 * Cards en glass blanc sur fond clair, ombres douces multi-layer.
 * Tous les fixes V4 conserves : loupe, boutons mobile, double bordure, hauteur mobile.
 */

/* ==========================================================================
   Tokens design - Light mode avec hero dark conserve
   ========================================================================== */
:root {
    /* Charte SOS - couleurs base */
    --sos-blue:        #21326A;
    --sos-blue-deep:   #0E1A45;
    --sos-blue-darker: #08123A;
    --sos-blue-darkest:#050D2C;
    --sos-blue-mid:    #2B4080;
    --sos-blue-light:  #009FE6;
    --sos-blue-cyan:   #00C2FF;
    --sos-yellow:      #FFCC2B;
    --sos-yellow-warm: #FFD955;
    --sos-yellow-deep: #E5B500;
    --sos-yellow-glow: #FFE066;

    /* Surfaces light - body et cards en clair */
    --sos-bg:          #F6F8FC;       /* fond principal clair */
    --sos-bg-deep:     #EEF2F8;       /* fond sections plus profondes */
    --sos-bg-soft:     #FAFBFD;
    --sos-surface-1:   #FFFFFF;
    --sos-surface-2:   #FBFCFE;
    --sos-surface-3:   #FFFFFF;
    --sos-surface-4:   #FFFFFF;
    --sos-surface-glow: rgba(255, 204, 43, 0.10);
    --sos-blue-soft:   #ECF0F8;
    --sos-blue-mist:   #F4F7FB;

    /* Texte light */
    --sos-text:        #21326A;
    --sos-text-soft:   #5A6E8C;
    --sos-text-muted:  #8B96AE;
    --sos-text-faded:  #B7C0D1;

    /* Texte sur hero dark uniquement */
    --sos-text-on-dark:        #FFFFFF;
    --sos-text-on-dark-soft:   rgba(255, 255, 255, 0.78);
    --sos-text-on-dark-muted:  rgba(255, 255, 255, 0.55);

    /* Borders light */
    --sos-border:      rgba(33, 50, 106, 0.10);
    --sos-border-soft: rgba(33, 50, 106, 0.05);
    --sos-border-strong: rgba(33, 50, 106, 0.18);
    --sos-border-yellow: rgba(255, 204, 43, 0.50);

    /* Borders sur hero dark */
    --sos-border-on-dark:      rgba(255, 255, 255, 0.10);
    --sos-border-on-dark-strong: rgba(255, 255, 255, 0.22);

    /* Etats semantiques light */
    --sos-success:       #1FA76F;
    --sos-success-bg:    rgba(31, 167, 111, 0.10);
    --sos-success-glow:  rgba(31, 167, 111, 0.40);
    --sos-warning:       #E89C2B;
    --sos-warning-bg:    rgba(232, 156, 43, 0.12);
    --sos-danger:        #D94F30;
    --sos-danger-bg:     rgba(217, 79, 48, 0.10);

    /* Boutons feuille SOS */
    --sos-leaf:        18px 5px 18px 5px;
    --sos-leaf-sm:     14px 4px 14px 4px;
    --sos-leaf-lg:     22px 6px 22px 6px;

    /* Radius */
    --sos-r-xs:        8px;
    --sos-r-sm:        12px;
    --sos-r-md:        16px;
    --sos-r-lg:        20px;
    --sos-r-xl:        28px;
    --sos-r-pill:      999px;

    /* Ombres light - multi-layer pour profondeur */
    --sos-elev-1:
        0 1px 2px rgba(33, 50, 106, 0.04),
        0 2px 4px rgba(33, 50, 106, 0.04);
    --sos-elev-2:
        0 1px 2px rgba(33, 50, 106, 0.04),
        0 4px 8px rgba(33, 50, 106, 0.06),
        0 8px 16px rgba(33, 50, 106, 0.04);
    --sos-elev-3:
        0 1px 2px rgba(33, 50, 106, 0.04),
        0 4px 8px rgba(33, 50, 106, 0.06),
        0 12px 24px rgba(33, 50, 106, 0.08),
        0 24px 48px rgba(33, 50, 106, 0.06);
    --sos-elev-4:
        0 4px 8px rgba(33, 50, 106, 0.06),
        0 16px 32px rgba(33, 50, 106, 0.10),
        0 32px 64px rgba(33, 50, 106, 0.12);

    /* Inset highlights pour cartes 3D */
    --sos-inset-card:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 0 rgba(33, 50, 106, 0.04);
    --sos-inset-yellow:
        inset 0 1px 0 rgba(255, 255, 255, 0.50),
        inset 0 -2px 0 rgba(33, 50, 106, 0.10);

    /* Glows */
    --sos-glow-yellow: 0 0 0 6px rgba(255, 204, 43, 0.20);
    --sos-glow-blue:   0 0 0 6px rgba(33, 50, 106, 0.10);

    /* Easings */
    --sos-ease:        cubic-bezier(0.4, 0, 0.2, 1);
    --sos-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --sos-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);
    --sos-spring-soft: cubic-bezier(0.34, 1.20, 0.64, 1);
}

/* ==========================================================================
   OVERRIDE ANTI-FRAMBOISE V6 - blindage absolu
   Le theme Hello Elementor (et autres) tend a injecter du framboise sur
   les boutons via :hover, :focus, :active. On force tous les etats.
   ========================================================================== */
.sos-sl button,
.sos-sl button:hover,
.sos-sl button:focus,
.sos-sl button:active,
.sos-sl button:focus-visible {
    background-image: none;
}

.sos-sl .sos-sl__filters-toggle,
.sos-sl .sos-sl__filters-toggle:hover,
.sos-sl .sos-sl__filters-toggle:focus,
.sos-sl .sos-sl__filters-toggle:active,
.sos-sl .sos-sl__filters-toggle:focus-visible {
    background-image: none !important;
}

/* SVG inside buttons : retirer le decalage baseline par defaut */
.sos-sl button svg,
.sos-sl a svg {
    flex-shrink: 0;
    align-self: center;
}

/* Reset cible
   ========================================================================== */
.sos-sl,
.sos-sl * {
    box-sizing: border-box;
}

.sos-sl {
    font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--sos-text);
    background: var(--sos-bg);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
    position: relative;
    overflow-x: hidden;
}

/* Fond decoratif "mesh" supprime : effet purement esthetique (degrades radiaux
   animes aux couleurs marque) non demande, qui debordait sur la section titre
   au-dessus du store locator en mode shortcode header=false. Le fond de base
   reste assure par .sos-sl { background: var(--sos-bg) }. */

@keyframes sos-mesh-drift {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(2%, -1%) scale(1.03); }
    66%  { transform: translate(-1%, 1%) scale(0.99); }
    100% { transform: translate(0, 0) scale(1); }
}

.sos-sl > * {
    position: relative;
    z-index: 1;
}

.sos-sl button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    line-height: inherit;
    color: inherit;
}

.sos-sl a {
    text-decoration: none;
    color: inherit;
}

/* Override theme hello elementor framboise - tous les boutons et inputs */
.sos-sl input,
.sos-sl select,
.sos-sl textarea,
.sos-sl button {
    font-family: inherit !important;
    color: inherit !important;
    line-height: inherit;
    border-color: inherit;
}

.sos-sl input,
.sos-sl select,
.sos-sl textarea {
    background: var(--sos-surface-2);
}

.sos-sl h1,
.sos-sl h2,
.sos-sl h3 {
    font-family: inherit !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

/* ==========================================================================
   HERO simplifie - juste une bande bleu marine de contraste
   pour faire ressortir la search bar qui flotte dessus
   ========================================================================== */
.sos-sl__header {
    position: relative;
    height: 140px;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(135deg, #08123A 0%, #0E1A45 50%, #1A2856 100%);
}

.sos-sl__header::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 75% 25%, rgba(0, 194, 255, 0.18) 0%, transparent 50%),
        radial-gradient(ellipse at 25% 80%, rgba(255, 204, 43, 0.14) 0%, transparent 50%);
    z-index: -1;
    animation: sos-mesh-drift 24s ease-in-out infinite alternate;
}

.sos-sl__header-stripe {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--sos-yellow) 30%,
        var(--sos-yellow) 70%,
        transparent 100%
    );
    opacity: 0.6;
}

/* ==========================================================================
   SEARCH BAR - capsule glass flottante avec sticky-collapse
   FIX V6 : input contraint, plus d etalement, boutons fixes
   ========================================================================== */
.sos-sl__search-wrap {
    position: relative;
    z-index: 50;
    margin: -40px auto 0;
    max-width: 1180px;
    padding: 0 24px;
    transition: padding 0.3s var(--sos-ease);
}

.sos-sl__search-wrap.is-stuck {
    position: sticky;
    top: 0;
    margin-top: 0;
    padding-top: 12px;
    padding-bottom: 12px;
    max-width: 100%;
    background: rgba(246, 248, 252, 0.92);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid var(--sos-border-soft);
}

.sos-sl__search-wrap.is-stuck .sos-sl__search-card {
    max-width: 1180px;
    margin: 0 auto;
    box-shadow: var(--sos-elev-2);
    padding: 8px;
    border-radius: var(--sos-r-lg);
}

/* Card recherche - blanche pure en levitation */
.sos-sl__search-card {
    background: var(--sos-surface-1);
    border: 1px solid var(--sos-border);
    border-radius: var(--sos-r-xl);
    padding: 12px;
    box-shadow:
        var(--sos-elev-4),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s var(--sos-ease);
    max-width: 1180px;
    margin: 0 auto;
}

.sos-sl__search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}

/* FIX loupe - position propre */
.sos-sl__search-icon {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--sos-text-muted);
    pointer-events: none;
    transition: color 0.2s var(--sos-ease);
    z-index: 2;
    flex-shrink: 0;
}

.sos-sl__search-input {
    width: 100%;
    height: 56px;
    padding: 0 56px 0 56px !important;
    border: 1px solid var(--sos-border) !important;
    background: var(--sos-bg) !important;
    border-radius: var(--sos-r-md) !important;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    color: var(--sos-text) !important;
    transition: all 0.25s var(--sos-ease);
    letter-spacing: -0.01em;
}

.sos-sl__search-wrap.is-stuck .sos-sl__search-input {
    height: 48px;
}

.sos-sl__search-input:hover {
    background: var(--sos-bg-deep) !important;
    border-color: var(--sos-border-strong) !important;
}

.sos-sl__search-input:focus {
    outline: none !important;
    background: var(--sos-surface-1) !important;
    border-color: var(--sos-blue) !important;
    box-shadow: 0 0 0 4px rgba(33, 50, 106, 0.12);
}

.sos-sl__search-input-wrap:focus-within .sos-sl__search-icon {
    color: var(--sos-blue);
}

.sos-sl__search-input::placeholder {
    color: var(--sos-text-muted);
    font-weight: 400;
}

.sos-sl__search-clear {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--sos-bg-deep) !important;
    background-image: none !important;
    border: none !important;
    border-radius: var(--sos-r-pill) !important;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sos-text-soft) !important;
    transition: all 0.2s var(--sos-spring);
    z-index: 3;
    outline: none !important;
}

.sos-sl__search-clear:hover,
.sos-sl__search-clear:focus,
.sos-sl__search-clear:focus-visible,
.sos-sl__search-clear:active {
    background: var(--sos-text-soft) !important;
    background-image: none !important;
    color: var(--sos-surface-1) !important;
    transform: translateY(-50%) scale(1.1) rotate(90deg);
    outline: none !important;
}

/* Autocomplete light */
.sos-sl__autocomplete {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    background: var(--sos-surface-1);
    border: 1px solid var(--sos-border);
    border-radius: var(--sos-r-lg);
    list-style: none;
    margin: 0;
    padding: 8px;
    max-height: 360px;
    overflow-y: auto;
    box-shadow: var(--sos-elev-4);
    z-index: 200;
    animation: sos-pop-in 0.22s var(--sos-spring-soft);
}

@keyframes sos-pop-in {
    from { opacity: 0; transform: translateY(-8px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.sos-sl__autocomplete-item {
    padding: 12px 14px;
    border-radius: var(--sos-r-sm);
    cursor: pointer;
    font-size: 14px;
    color: var(--sos-text);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.15s var(--sos-ease);
}

.sos-sl__autocomplete-item:hover,
.sos-sl__autocomplete-item.is-highlighted {
    background: var(--sos-blue-soft);
    transform: translateX(2px);
}

.sos-sl__autocomplete-item-cp {
    font-weight: 600;
    color: var(--sos-blue);
    font-variant-numeric: tabular-nums;
    background: var(--sos-blue-soft);
    padding: 4px 9px;
    border-radius: var(--sos-r-xs);
    font-size: 12px;
    flex-shrink: 0;
}

.sos-sl__autocomplete-item:hover .sos-sl__autocomplete-item-cp,
.sos-sl__autocomplete-item.is-highlighted .sos-sl__autocomplete-item-cp {
    background: var(--sos-blue);
    color: var(--sos-surface-1);
}

.sos-sl__autocomplete-item-context {
    color: var(--sos-text-muted);
    font-size: 12px;
    margin-left: auto;
    flex-shrink: 0;
}

/* ==========================================================================
   BOUTON FEUILLE SOS - signature 3D tactile (jaune sur dark = contraste max)
   FIX V5 : !important sur background et color pour casser tout override theme framboise.
   white-space nowrap garanti.
   ========================================================================== */
.sos-sl__locate-btn {
    height: 56px;
    padding-left: 28px !important;
    padding-right: 28px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: linear-gradient(180deg, var(--sos-yellow-warm) 0%, var(--sos-yellow) 100%) !important;
    color: var(--sos-blue) !important;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.4s var(--sos-spring-soft);
    white-space: nowrap;
    border-radius: var(--sos-leaf) !important;
    border: none !important;
    box-shadow:
        var(--sos-elev-2),
        var(--sos-inset-yellow);
    letter-spacing: -0.01em;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.sos-sl__search-wrap.is-stuck .sos-sl__locate-btn {
    height: 48px;
    padding: 0 18px;
}

.sos-sl__locate-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.45) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.sos-sl__locate-btn:hover,
.sos-sl__locate-btn:focus,
.sos-sl__locate-btn:focus-visible {
    transform: translateY(-2px) scale(1.02);
    background: linear-gradient(180deg, var(--sos-yellow-warm) 0%, var(--sos-yellow) 100%) !important;
    background-image: linear-gradient(180deg, var(--sos-yellow-warm) 0%, var(--sos-yellow) 100%) !important;
    color: var(--sos-blue) !important;
    box-shadow:
        var(--sos-elev-3),
        var(--sos-glow-yellow),
        var(--sos-inset-yellow);
    outline: none;
}

.sos-sl__locate-btn:hover::before {
    opacity: 1;
}

.sos-sl__locate-btn:active {
    transform: translateY(0) scale(0.98);
    transition-duration: 0.1s;
    background: linear-gradient(180deg, var(--sos-yellow-warm) 0%, var(--sos-yellow) 100%) !important;
}

.sos-sl__locate-btn[disabled] {
    opacity: 0.7;
    cursor: wait;
    transform: none;
}

.sos-sl__locate-btn--loading svg {
    animation: sos-spin 0.8s linear infinite;
}

@keyframes sos-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Toggle Filtres - ghost feuille light - tous etats blindes */
.sos-sl__filters-toggle {
    height: 56px;
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: var(--sos-surface-1) !important;
    background-image: none !important;
    border: 1px solid var(--sos-border) !important;
    border-radius: var(--sos-leaf) !important;
    color: var(--sos-text) !important;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s var(--sos-spring-soft);
    box-shadow: var(--sos-elev-1);
    flex-shrink: 0;
    white-space: nowrap;
}

.sos-sl__search-wrap.is-stuck .sos-sl__filters-toggle {
    height: 48px;
    padding: 0 16px;
}

.sos-sl__filters-toggle:hover,
.sos-sl__filters-toggle:focus,
.sos-sl__filters-toggle:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--sos-elev-2);
    border-color: var(--sos-blue) !important;
    color: var(--sos-blue) !important;
    background: var(--sos-blue-soft) !important;
    background-image: none !important;
    outline: none;
}

.sos-sl__filters-toggle:active {
    transform: translateY(0);
    background: var(--sos-blue-soft) !important;
    background-image: none !important;
}

.sos-sl__filters-toggle[aria-expanded="true"] {
    background: var(--sos-blue) !important;
    background-image: none !important;
    border-color: var(--sos-blue) !important;
    color: var(--sos-surface-1) !important;
    box-shadow: var(--sos-elev-2);
}

.sos-sl__filters-count {
    background: var(--sos-yellow) !important;
    color: var(--sos-blue) !important;
    border-radius: var(--sos-r-pill);
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 700;
    min-width: 22px;
    text-align: center;
    line-height: 1.4;
    box-shadow: var(--sos-elev-1);
}

.sos-sl__filters-toggle[aria-expanded="true"] .sos-sl__filters-count {
    background: var(--sos-yellow) !important;
    color: var(--sos-blue) !important;
}

/* ==========================================================================
   PANNEAU FILTRES light
   ========================================================================== */
.sos-sl__filters {
    margin: 14px auto 0;
    max-width: 1180px;
    background: var(--sos-surface-1);
    border: 1px solid var(--sos-border);
    border-radius: var(--sos-r-lg);
    padding: 22px 24px;
    animation: sos-slide-down 0.32s var(--sos-spring-soft);
    box-shadow: var(--sos-elev-2);
}

@keyframes sos-slide-down {
    from { opacity: 0; transform: translateY(-12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.sos-sl__filters-inner {
    display: flex;
    align-items: end;
    gap: 16px;
    flex-wrap: wrap;
}

.sos-sl__filter-group {
    flex: 1;
    min-width: 220px;
}

.sos-sl__filter-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--sos-text-soft);
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}

.sos-sl__filter-select {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border: 1px solid var(--sos-border) !important;
    border-radius: var(--sos-r-md) !important;
    font-family: inherit;
    font-size: 14px;
    color: var(--sos-text) !important;
    background: var(--sos-surface-1) !important;
    cursor: pointer;
    transition: all 0.2s var(--sos-ease);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%235A6E8C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    padding-right: 40px !important;
    box-shadow: var(--sos-elev-1);
}

.sos-sl__filter-select:focus {
    outline: none !important;
    border-color: var(--sos-blue) !important;
    box-shadow: 0 0 0 3px rgba(33, 50, 106, 0.10);
}

.sos-sl__filter-actions {
    display: flex;
    gap: 8px;
}

.sos-sl__btn--ghost {
    background: transparent;
    border: 1px solid var(--sos-border) !important;
    color: var(--sos-text);
    padding: 0 18px;
    height: 48px;
    border-radius: var(--sos-leaf-sm) !important;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s var(--sos-spring-soft);
}

.sos-sl__btn--ghost:hover {
    border-color: var(--sos-blue) !important;
    color: var(--sos-blue);
    background: var(--sos-blue-soft);
    transform: translateY(-1px);
}

/* ==========================================================================
   TABS MOBILE
   ========================================================================== */
.sos-sl__mobile-toggle {
    display: none;
    background: var(--sos-surface-1);
    border: 1px solid var(--sos-border);
    padding: 6px;
    gap: 6px;
    margin: 14px 16px 0;
    border-radius: var(--sos-r-lg);
    box-shadow: var(--sos-elev-1);
}

.sos-sl__mobile-tab {
    flex: 1;
    height: 44px;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: var(--sos-leaf) !important;
    color: var(--sos-text-soft) !important;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s var(--sos-spring-soft);
    outline: none !important;
    box-shadow: none;
}

.sos-sl__mobile-tab:focus,
.sos-sl__mobile-tab:focus-visible,
.sos-sl__mobile-tab:active {
    outline: none !important;
    box-shadow: none;
}

.sos-sl__mobile-tab.is-active {
    background: linear-gradient(180deg, var(--sos-yellow-warm) 0%, var(--sos-yellow) 100%) !important;
    background-image: linear-gradient(180deg, var(--sos-yellow-warm) 0%, var(--sos-yellow) 100%) !important;
    color: var(--sos-blue) !important;
    box-shadow: var(--sos-elev-1), var(--sos-inset-yellow);
}

.sos-sl__mobile-tab.is-active:focus,
.sos-sl__mobile-tab.is-active:focus-visible {
    outline: none !important;
}

.sos-sl__mobile-count {
    background: var(--sos-blue-soft);
    color: var(--sos-blue);
    border-radius: var(--sos-r-pill);
    padding: 2px 9px;
    font-size: 11px;
    min-width: 22px;
    font-weight: 600;
}

.sos-sl__mobile-tab.is-active .sos-sl__mobile-count {
    background: rgba(33, 50, 106, 0.18);
    color: var(--sos-blue);
}

/* ==========================================================================
   LAYOUT principal
   ========================================================================== */
.sos-sl__main {
    max-width: 1440px;
    margin: 32px auto 0;
    padding: 0 24px 32px;
    display: grid;
    grid-template-columns: 460px 1fr;
    gap: 20px;
    height: calc(100vh - 80px);
    min-height: 640px;
}

/* ==========================================================================
   LISTE - colonne gauche en light
   ========================================================================== */
.sos-sl__list-pane {
    display: flex;
    flex-direction: column;
    background: var(--sos-surface-1);
    border: 1px solid var(--sos-border-soft);
    border-radius: var(--sos-r-xl);
    overflow: hidden;
    box-shadow: var(--sos-elev-2);
}

.sos-sl__list-header {
    padding: 18px 22px;
    border-bottom: 1px solid var(--sos-border-soft);
    flex-shrink: 0;
    background: var(--sos-bg-soft);
}

.sos-sl__list-count {
    font-size: 13px;
    color: var(--sos-text-soft);
    font-weight: 400;
}

.sos-sl__list-count strong {
    color: var(--sos-blue);
    font-weight: 600;
    font-size: 14px;
}

.sos-sl__list-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--sos-text-faded) transparent;
}

.sos-sl__list-body::-webkit-scrollbar {
    width: 6px;
}

.sos-sl__list-body::-webkit-scrollbar-track {
    background: transparent;
}

.sos-sl__list-body::-webkit-scrollbar-thumb {
    background: var(--sos-text-faded);
    border-radius: var(--sos-r-pill);
}

.sos-sl__list-body::-webkit-scrollbar-thumb:hover {
    background: var(--sos-text-muted);
}

/* Skeleton light */
.sos-sl__skeleton-card {
    height: 220px;
    margin-bottom: 12px;
    border-radius: var(--sos-r-lg);
    background:
        linear-gradient(110deg, var(--sos-bg) 8%, var(--sos-bg-deep) 18%, var(--sos-bg) 33%);
    background-size: 200% 100%;
    animation: sos-shimmer 1.6s linear infinite;
}

@keyframes sos-shimmer {
    to { background-position-x: -200%; }
}

/* ============================================
   CARD CENTRE - light avec ombres profondes
   ============================================ */
.sos-sl__card {
    background: var(--sos-surface-1);
    border: 1px solid var(--sos-border-soft);
    border-radius: var(--sos-r-lg);
    padding: 22px;
    margin-bottom: 14px;
    transition: all 0.4s var(--sos-spring-soft);
    cursor: pointer;
    position: relative;
    box-shadow: var(--sos-elev-1), var(--sos-inset-card);
    overflow: hidden;
}

.sos-sl__card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 1), transparent);
    opacity: 0.7;
    pointer-events: none;
}

.sos-sl__card:hover,
.sos-sl__card.is-highlighted {
    transform: translateY(-4px);
    border-color: var(--sos-border);
    box-shadow: var(--sos-elev-3), var(--sos-inset-card);
}

/* FIX V5 : un seul layer de bordure jaune via inset, plus de barre verticale ::after */
.sos-sl__card.is-active {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow:
        inset 0 0 0 2px var(--sos-yellow),
        var(--sos-elev-3),
        0 0 0 6px rgba(255, 204, 43, 0.15);
    background: linear-gradient(180deg, var(--sos-surface-1) 0%, rgba(255, 247, 221, 0.4) 200%);
}

/* Card head */
.sos-sl__card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 4px;
}

.sos-sl__card-name {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--sos-blue) !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.015em;
}

.sos-sl__card-city {
    font-size: 13px;
    color: var(--sos-text-soft);
    margin: 0 0 14px;
    font-weight: 400;
    letter-spacing: -0.005em;
}

.sos-sl__card-distance {
    font-size: 12px;
    font-weight: 700;
    color: var(--sos-blue);
    background: linear-gradient(180deg, var(--sos-blue-soft) 0%, var(--sos-blue-mist) 100%);
    padding: 6px 13px;
    border-radius: var(--sos-r-pill);
    white-space: nowrap;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    box-shadow: var(--sos-elev-1), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.sos-sl__card-zone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 10px;
    padding: 4px 11px 4px 9px;
    border-radius: var(--sos-r-pill);
    letter-spacing: 0.01em;
    box-shadow: var(--sos-elev-1);
}

.sos-sl__card-zone--nearby {
    background: var(--sos-success-bg);
    color: var(--sos-success);
}

.sos-sl__card-zone--regional {
    background: var(--sos-blue-soft);
    color: var(--sos-blue);
}

.sos-sl__card-zone-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
}

/* Meta : note + statut */
.sos-sl__card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    flex-wrap: wrap;
}

.sos-sl__card-rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--sos-text-soft);
}

.sos-sl__card-rating-star {
    color: var(--sos-yellow);
    font-size: 16px;
    line-height: 1;
    text-shadow: 0 0 8px rgba(255, 204, 43, 0.5);
}

.sos-sl__card-rating-value {
    font-weight: 700;
    color: var(--sos-text);
    font-variant-numeric: tabular-nums;
}

.sos-sl__card-rating-count {
    color: var(--sos-text-muted);
    font-size: 12px;
}

.sos-sl__card-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 11px 4px 9px;
    border-radius: var(--sos-r-pill);
    font-size: 12px;
    font-weight: 500;
    box-shadow: var(--sos-elev-1);
}

.sos-sl__card-status--open {
    background: var(--sos-success-bg);
    color: var(--sos-success);
}

.sos-sl__card-status--open .sos-sl__card-status-dot {
    background: var(--sos-success);
    box-shadow: 0 0 8px var(--sos-success-glow);
    animation: sos-pulse 2s ease-in-out infinite;
}

@keyframes sos-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.55; transform: scale(1.4); }
}

.sos-sl__card-status--closing-soon {
    background: var(--sos-warning-bg);
    color: var(--sos-warning);
}

.sos-sl__card-status--closed {
    background: var(--sos-bg-deep);
    color: var(--sos-text-muted);
}

.sos-sl__card-status--temp-closed {
    background: var(--sos-danger-bg);
    color: var(--sos-danger);
}

.sos-sl__card-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

/* Adresse */
.sos-sl__card-address {
    font-size: 13px;
    color: var(--sos-text-soft);
    margin: 0 0 14px;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 7px;
}

.sos-sl__card-address-icon {
    color: var(--sos-text-muted);
    flex-shrink: 0;
    margin-top: 3px;
}

/* Services - pills capsules light */
.sos-sl__card-services {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 18px;
}

.sos-sl__card-service-tag {
    font-size: 12px;
    color: var(--sos-text-soft);
    background: var(--sos-bg);
    padding: 5px 12px;
    border-radius: var(--sos-r-pill);
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    border: 1px solid var(--sos-border-soft);
    transition: all 0.2s var(--sos-ease);
    text-transform: none !important;
}

.sos-sl__card:hover .sos-sl__card-service-tag {
    background: var(--sos-surface-1);
    border-color: var(--sos-border);
}

.sos-sl__card-service-tag--more {
    color: var(--sos-blue);
    font-weight: 700;
    background: linear-gradient(180deg, var(--sos-blue-soft) 0%, var(--sos-blue-mist) 100%);
    border-color: var(--sos-blue-soft);
}

/* ============================================
   ACTIONS - hierarchie 1+1+3 avec 3D tactile
   FIX : stacking mobile propre, pas de superposition
   ============================================ */
.sos-sl__card-actions {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--sos-border-soft);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sos-sl__card-action-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

/* CTA principal feuille jaune 3D */
.sos-sl__action--primary {
    flex: 2;
    height: 46px;
    padding: 0 18px;
    background: linear-gradient(180deg, var(--sos-yellow-warm) 0%, var(--sos-yellow) 100%);
    color: var(--sos-blue) !important;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.4s var(--sos-spring-soft);
    border-radius: var(--sos-leaf) !important;
    border: none !important;
    box-shadow: var(--sos-elev-1), var(--sos-inset-yellow);
    letter-spacing: -0.01em;
    text-decoration: none !important;
    position: relative;
    overflow: hidden;
}

.sos-sl__action--primary:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: var(--sos-elev-3), var(--sos-glow-yellow), var(--sos-inset-yellow);
}

.sos-sl__action--primary:active {
    transform: translateY(0) scale(0.98);
    transition-duration: 0.1s;
}

/* Action secondaire - ghost feuille light */
.sos-sl__action--secondary {
    flex: 1;
    height: 46px;
    padding: 0 14px;
    background: var(--sos-surface-1);
    border: 1px solid var(--sos-border) !important;
    color: var(--sos-blue) !important;
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.3s var(--sos-spring-soft);
    border-radius: var(--sos-leaf) !important;
    text-decoration: none !important;
    box-shadow: var(--sos-elev-1);
}

.sos-sl__action--secondary:hover {
    border-color: var(--sos-blue) !important;
    background: var(--sos-blue-soft);
    transform: translateY(-2px);
    box-shadow: var(--sos-elev-2);
}

/* Itineraire 3 boutons light */
.sos-sl__directions-row {
    display: flex;
    gap: 6px;
}

.sos-sl__action--directions {
    flex: 1;
    height: 40px;
    padding: 0 8px;
    background: var(--sos-surface-1);
    border: 1px solid var(--sos-border) !important;
    color: var(--sos-text-soft) !important;
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.3s var(--sos-spring-soft);
    border-radius: var(--sos-r-md) !important;
    text-decoration: none !important;
    min-width: 0;
    box-shadow: var(--sos-elev-1);
}

.sos-sl__action--directions:hover {
    border-color: var(--sos-blue) !important;
    color: var(--sos-blue) !important;
    transform: translateY(-2px);
    box-shadow: var(--sos-elev-2);
    background: var(--sos-blue-soft);
}

.sos-sl__action--directions svg {
    flex-shrink: 0;
}

.sos-sl__directions-label {
    font-size: 11px;
    color: var(--sos-text-muted);
    font-weight: 600;
    margin-bottom: 6px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ==========================================================================
   ZONES & EMPTY STATES dark
   ========================================================================== */
.sos-sl__zone-divider {
    margin: 20px 4px 14px;
    padding: 0;
    font-size: 11px;
    font-weight: 700;
    color: var(--sos-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    gap: 12px;
}

.sos-sl__zone-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--sos-border-strong), transparent);
}

.sos-sl__zone-divider:first-child {
    margin-top: 4px;
}

/* Lead block - hero pour empty state */
.sos-sl__lead-block {
    background: linear-gradient(135deg, var(--sos-blue-deep) 0%, var(--sos-blue) 50%, var(--sos-blue-mid) 100%);
    color: var(--sos-text-on-dark);
    padding: 32px 24px;
    border-radius: var(--sos-r-lg);
    margin: 18px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: var(--sos-elev-3);
}

.sos-sl__lead-block::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 80% 20%, rgba(255, 204, 43, 0.30) 0%, transparent 50%),
        radial-gradient(circle at 20% 80%, rgba(0, 159, 230, 0.30) 0%, transparent 50%);
    pointer-events: none;
}

.sos-sl__lead-block > * {
    position: relative;
}

.sos-sl__lead-block h3 {
    margin: 0 0 12px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--sos-text-on-dark) !important;
    letter-spacing: -0.01em;
}

.sos-sl__lead-block p {
    margin: 0 0 22px !important;
    font-size: 14px;
    color: var(--sos-text-on-dark-soft);
    line-height: 1.5;
}

.sos-sl__lead-block .sos-sl__action {
    background: linear-gradient(180deg, var(--sos-yellow-warm) 0%, var(--sos-yellow) 100%);
    color: var(--sos-blue) !important;
    height: 48px;
    padding: 0 24px;
    font-weight: 600;
    border-radius: var(--sos-leaf) !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: all 0.4s var(--sos-spring-soft);
    box-shadow: var(--sos-elev-2), var(--sos-inset-yellow);
}

.sos-sl__lead-block .sos-sl__action:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: var(--sos-elev-3), var(--sos-glow-yellow), var(--sos-inset-yellow);
}

/* Service fallback light */
.sos-sl__service-fallback {
    background: linear-gradient(180deg, #FFF7DD 0%, #FFEFB5 100%);
    border: 1px solid var(--sos-border-yellow);
    border-radius: var(--sos-r-lg);
    padding: 20px;
    margin: 16px 0;
    box-shadow: var(--sos-elev-2);
}

.sos-sl__service-fallback-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--sos-blue) !important;
    margin: 0 0 14px !important;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.4 !important;
}

.sos-sl__service-fallback-icon {
    color: var(--sos-warning);
    flex-shrink: 0;
}

.sos-sl__service-fallback-section {
    background: var(--sos-surface-1);
    border-radius: var(--sos-r-md);
    padding: 14px;
    margin-bottom: 10px;
    box-shadow: var(--sos-elev-1);
}

.sos-sl__service-fallback-section:last-child {
    margin-bottom: 0;
}

.sos-sl__service-fallback-section-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--sos-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 10px;
}

.sos-sl__service-fallback-help {
    font-size: 12px;
    color: var(--sos-text-soft);
    margin: 0 0 10px;
    line-height: 1.5;
    font-style: italic;
}

.sos-sl__service-fallback-section .sos-sl__card {
    margin: 0;
    border: none;
    box-shadow: none;
    padding: 0;
    background: transparent;
}

.sos-sl__service-fallback-section .sos-sl__card:hover {
    transform: none;
    box-shadow: none;
}

/* ==========================================================================
   PANE CARTE - colonne droite light
   ========================================================================== */
.sos-sl__map-pane {
    position: relative;
    background: var(--sos-bg);
    border-radius: var(--sos-r-xl);
    overflow: hidden;
    box-shadow: var(--sos-elev-2);
    border: 1px solid var(--sos-border-soft);
}

.sos-sl__map {
    width: 100%;
    height: 100%;
}

/* PIN SOS - email brillant 3D */
.sos-sl__pin {
    width: 36px;
    height: 46px;
    cursor: pointer;
    transition:
        transform 0.4s var(--sos-spring),
        filter 0.3s var(--sos-ease);
    transform-origin: center bottom;
    filter:
        drop-shadow(0 2px 4px rgba(33, 50, 106, 0.20))
        drop-shadow(0 4px 8px rgba(33, 50, 106, 0.15));
}

.sos-sl__pin:hover,
.sos-sl__pin.is-active {
    transform: scale(1.25) translateY(-2px);
    filter:
        drop-shadow(0 0 12px rgba(255, 204, 43, 0.6))
        drop-shadow(0 6px 12px rgba(33, 50, 106, 0.30))
        drop-shadow(0 2px 4px rgba(33, 50, 106, 0.20));
    z-index: 10;
}

/* MapLibre overrides light */
.maplibregl-ctrl-group {
    border-radius: var(--sos-r-md) !important;
    overflow: hidden;
    box-shadow: var(--sos-elev-2) !important;
    border: 1px solid var(--sos-border) !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    margin: 12px !important;
}

.maplibregl-ctrl-group button {
    background: transparent !important;
    border-radius: 0 !important;
    width: 36px !important;
    height: 36px !important;
    transition: background 0.2s var(--sos-ease);
}

.maplibregl-ctrl-group button:hover {
    background: var(--sos-blue-soft) !important;
}

.maplibregl-ctrl-attrib {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(10px);
    border-radius: var(--sos-r-sm) !important;
    font-size: 10px !important;
    padding: 3px 9px !important;
    margin: 8px !important;
}

/* Popup glass light */
.sos-sl-popup .maplibregl-popup-content {
    border-radius: var(--sos-r-lg) !important;
    box-shadow: var(--sos-elev-4) !important;
    padding: 18px 20px !important;
    border: 1px solid var(--sos-border);
    border-top: 3px solid var(--sos-yellow);
    font-family: 'Poppins', system-ui, sans-serif;
    min-width: 240px;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.sos-sl-popup .maplibregl-popup-tip {
    border-top-color: rgba(255, 255, 255, 0.98) !important;
    border-width: 12px 10px 0 !important;
}

.sos-sl-popup .maplibregl-popup-close-button {
    color: var(--sos-text-muted) !important;
    font-size: 22px !important;
    padding: 6px 10px !important;
    transition: all 0.2s var(--sos-spring);
    line-height: 1;
}

.sos-sl-popup .maplibregl-popup-close-button:hover {
    color: var(--sos-text) !important;
    background: transparent !important;
    transform: scale(1.2) rotate(90deg);
}

.sos-sl-popup__name {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--sos-blue) !important;
    margin: 0 0 4px !important;
    line-height: 1.3 !important;
    letter-spacing: -0.015em;
}

.sos-sl-popup__city {
    font-size: 12px;
    color: var(--sos-text-soft);
    margin: 0 0 12px;
}

.sos-sl-popup__rating {
    font-size: 12px;
    color: var(--sos-text-soft);
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 14px;
}

.sos-sl-popup__rating-star {
    color: var(--sos-yellow);
    font-size: 14px;
    text-shadow: 0 0 6px rgba(255, 204, 43, 0.5);
}

.sos-sl-popup__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(180deg, var(--sos-yellow-warm) 0%, var(--sos-yellow) 100%);
    color: var(--sos-blue) !important;
    padding: 9px 16px;
    border-radius: var(--sos-leaf-sm);
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s var(--sos-spring-soft);
    box-shadow: var(--sos-elev-1), var(--sos-inset-yellow);
}

.sos-sl-popup__cta:hover {
    transform: translateY(-1px);
    box-shadow: var(--sos-elev-2), var(--sos-inset-yellow);
}

/* User marker light */
.sos-sl__user-marker {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--sos-blue-light);
    border: 3px solid var(--sos-surface-1);
    box-shadow:
        0 0 0 2px rgba(0, 159, 230, 0.30),
        0 4px 12px rgba(0, 159, 230, 0.40),
        0 0 24px rgba(0, 159, 230, 0.30);
    position: relative;
}

.sos-sl__user-marker::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: var(--sos-blue-light);
    opacity: 0.25;
    animation: sos-ping 2.4s var(--sos-ease-out) infinite;
}

@keyframes sos-ping {
    0%   { transform: scale(0.7); opacity: 0.5; }
    100% { transform: scale(2.6); opacity: 0; }
}

/* ==========================================================================
   MAP SCROLL HINT - overlay informatif quand scroll sans Ctrl/Cmd
   ========================================================================== */
.sos-sl__map-pane {
    position: relative;
}

.sos-sl__map-scroll-hint {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s var(--sos-ease), visibility 0.25s var(--sos-ease);
    background: rgba(14, 26, 69, 0.18);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.sos-sl__map-scroll-hint.is-visible {
    opacity: 1;
    visibility: visible;
}

.sos-sl__map-scroll-hint-inner {
    background: rgba(14, 26, 69, 0.92);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    color: var(--sos-text-on-dark);
    padding: 14px 22px;
    border-radius: var(--sos-r-pill);
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.sos-sl__map-scroll-hint-inner svg {
    color: var(--sos-yellow);
    flex-shrink: 0;
}

.sos-sl__map-scroll-hint-text [data-modifier-key] {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--sos-r-xs);
    padding: 2px 8px;
    font-family: 'Poppins', system-ui, monospace;
    font-weight: 600;
    font-size: 13px;
    margin-right: 2px;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.20);
}

/* ==========================================================================
   MOBILE FAB + SEARCH FLOATING (V5)
   FAB rond fixe en bas. Tap : la search slide depuis le bas.
   Hidden par defaut sur desktop, affiche sur mobile uniquement.
   ========================================================================== */
.sos-sl__mobile-fab {
    display: none !important;
    position: fixed;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    height: 56px;
    padding: 0 32px 0 28px;
    background: linear-gradient(180deg, var(--sos-yellow-warm) 0%, var(--sos-yellow) 100%) !important;
    background-image: linear-gradient(180deg, var(--sos-yellow-warm) 0%, var(--sos-yellow) 100%) !important;
    color: var(--sos-blue) !important;
    font-size: 15px;
    font-weight: 600;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: var(--sos-r-pill) !important;
    border: none !important;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.20),
        0 4px 12px rgba(255, 204, 43, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.50);
    z-index: 100;
    transition: all 0.4s var(--sos-spring-soft);
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    min-width: 180px;
}

.sos-sl__mobile-fab:hover,
.sos-sl__mobile-fab:active {
    transform: translateX(-50%) translateY(-3px) scale(1.03);
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.25),
        0 8px 20px rgba(255, 204, 43, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.50);
}

.sos-sl__mobile-fab[aria-expanded="true"] {
    transform: translateX(-50%) translateY(20px) scale(0.8);
    opacity: 0;
    pointer-events: none;
}

.sos-sl__mobile-fab-label {
    letter-spacing: -0.01em;
}

/* Container search mobile - slide from bottom avec spring */
.sos-sl__mobile-search {
    display: none !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 110;
    padding: 16px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    background: var(--sos-surface-1);
    border-radius: var(--sos-r-xl) var(--sos-r-xl) 0 0;
    box-shadow: 0 -16px 48px rgba(33, 50, 106, 0.20);
    transform: translateY(100%);
    transition: transform 0.5s var(--sos-spring-soft);
    border-top: 1px solid var(--sos-border-soft);
}

.sos-sl[data-search-open="true"] .sos-sl__mobile-search {
    transform: translateY(0);
}

.sos-sl__mobile-search-handle {
    width: 44px;
    height: 4px;
    background: var(--sos-text-faded);
    border-radius: var(--sos-r-pill);
    margin: 0 auto 16px;
    opacity: 0.6;
}

.sos-sl__mobile-search-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: var(--sos-r-pill) !important;
    background: var(--sos-bg) !important;
    color: var(--sos-text-soft) !important;
    border: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s var(--sos-spring);
    z-index: 1;
}

.sos-sl__mobile-search-close:hover,
.sos-sl__mobile-search-close:active {
    background: var(--sos-text-soft) !important;
    color: var(--sos-surface-1) !important;
    transform: scale(1.1) rotate(90deg);
}

.sos-sl__mobile-search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.sos-sl__autocomplete--mobile {
    position: absolute;
    bottom: calc(100% + 8px);
    top: auto;
    left: 0;
    right: 0;
    max-height: 240px;
}

.sos-sl__mobile-search-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--sos-text-muted);
    pointer-events: none;
    z-index: 2;
}

.sos-sl__mobile-search-input {
    width: 100%;
    height: 52px;
    padding: 0 18px 0 50px !important;
    border: 1px solid var(--sos-border) !important;
    background: var(--sos-bg) !important;
    border-radius: var(--sos-r-md) !important;
    font-family: inherit !important;
    font-size: 15px;
    font-weight: 500;
    color: var(--sos-text) !important;
    transition: all 0.25s var(--sos-ease);
}

.sos-sl__mobile-search-input:focus {
    outline: none !important;
    background: var(--sos-surface-1) !important;
    border-color: var(--sos-blue) !important;
    box-shadow: 0 0 0 3px rgba(33, 50, 106, 0.10);
}

.sos-sl__mobile-search-input::placeholder {
    color: var(--sos-text-muted);
    font-weight: 400;
}

/* Actions 50/50 sur une ligne propre */
.sos-sl__mobile-search-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.sos-sl__mobile-locate,
.sos-sl__mobile-filters {
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--sos-leaf) !important;
    transition: all 0.3s var(--sos-spring-soft);
    cursor: pointer;
    font-family: inherit !important;
    white-space: nowrap;
}

.sos-sl__mobile-locate {
    background: linear-gradient(180deg, var(--sos-yellow-warm) 0%, var(--sos-yellow) 100%) !important;
    color: var(--sos-blue) !important;
    border: none !important;
    box-shadow: var(--sos-elev-1), var(--sos-inset-yellow);
}

.sos-sl__mobile-locate:active {
    transform: translateY(1px);
}

.sos-sl__mobile-filters {
    background: var(--sos-surface-1) !important;
    color: var(--sos-blue) !important;
    border: 1px solid var(--sos-border) !important;
    box-shadow: var(--sos-elev-1);
}

.sos-sl__mobile-filters:active,
.sos-sl__mobile-filters[aria-expanded="true"] {
    background: var(--sos-blue) !important;
    color: var(--sos-surface-1) !important;
    border-color: var(--sos-blue) !important;
}

/* Backdrop subtil quand search ouverte */
.sos-sl[data-search-open="true"]::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(8, 18, 58, 0.30);
    z-index: 105;
    animation: sos-fade-in 0.3s ease-out;
}

@keyframes sos-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ==========================================================================
   RESPONSIVE - mobile first avec safe-area iOS
   ========================================================================== */
@media (max-width: 1100px) {
    .sos-sl__main {
        grid-template-columns: 400px 1fr;
        gap: 16px;
    }
}

@media (max-width: 920px) {
    .sos-sl__header {
        height: 110px;
    }

    .sos-sl__search-wrap {
        margin-top: -36px;
        padding: 0 16px;
    }

    .sos-sl__search-card {
        flex-direction: column;
        gap: 8px;
        padding: 10px;
        border-radius: var(--sos-r-lg);
    }

    .sos-sl__search-input-wrap {
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    .sos-sl__search-input {
        height: 52px;
    }

    .sos-sl__locate-btn,
    .sos-sl__filters-toggle {
        width: 100%;
        justify-content: center;
        height: 52px;
    }

    .sos-sl__filters {
        margin: 14px 16px 0;
        max-width: none;
    }

    .sos-sl__mobile-toggle {
        display: flex;
    }

    /* Mobile : carte pleine hauteur safe-area-inset */
    .sos-sl__main {
        grid-template-columns: 1fr;
        gap: 0;
        height: auto;
        padding: 0 16px env(safe-area-inset-bottom, 16px);
        margin-top: 18px;
    }

    .sos-sl__list-pane,
    .sos-sl__map-pane {
        display: none;
        height: calc(100vh - 220px);
        min-height: 480px;
        max-height: calc(100vh - 220px);
    }

    .sos-sl[data-mobile-view="list"] .sos-sl__list-pane {
        display: flex;
        flex-direction: column;
    }

    .sos-sl[data-mobile-view="map"] .sos-sl__map-pane {
        display: block;
        height: calc(100vh - 220px - env(safe-area-inset-bottom, 0px));
    }

    .sos-sl__list-body {
        padding: 14px;
    }

    .sos-sl__card {
        padding: 18px 20px;
    }
}

@media (max-width: 600px) {
    .sos-sl__header {
        height: 100px;
    }

    .sos-sl__card {
        padding: 14px 16px;
    }

    .sos-sl__card-name {
        font-size: 15px !important;
    }

    /* MOBILE : cards en mode compresse par defaut.
       Tap sur la card : expand pour voir adresse, services, actions.
       Permet d avoir plusieurs centres visibles simultanement. */
    .sos-sl__card .sos-sl__card-zone,
    .sos-sl__card .sos-sl__card-address,
    .sos-sl__card .sos-sl__card-services,
    .sos-sl__card .sos-sl__card-actions {
        display: none;
    }

    .sos-sl__card.is-expanded .sos-sl__card-zone,
    .sos-sl__card.is-expanded .sos-sl__card-address,
    .sos-sl__card.is-expanded .sos-sl__card-services,
    .sos-sl__card.is-expanded .sos-sl__card-actions {
        display: flex;
    }

    .sos-sl__card.is-expanded .sos-sl__card-services {
        display: flex;
        flex-wrap: wrap;
    }

    .sos-sl__card.is-expanded .sos-sl__card-actions {
        display: flex;
        flex-direction: column;
    }

    /* Indicateur visuel : chevron qui pivote a l expand */
    .sos-sl__card::after {
        content: '';
        position: absolute;
        top: 18px;
        right: 16px;
        width: 10px;
        height: 10px;
        border-right: 2px solid var(--sos-text-muted);
        border-bottom: 2px solid var(--sos-text-muted);
        transform: rotate(45deg);
        transition: transform 0.3s var(--sos-spring-soft);
        pointer-events: none;
    }

    .sos-sl__card.is-expanded::after {
        transform: rotate(-135deg);
        top: 22px;
    }

    .sos-sl__card.is-active::after {
        border-color: var(--sos-yellow);
    }

    /* Card en mode compresse : ville + meta sur 1-2 lignes */
    .sos-sl__card-head {
        margin-bottom: 4px;
        padding-right: 24px; /* place pour le chevron */
    }

    .sos-sl__card-city {
        margin: 0 0 8px;
        font-size: 12px;
    }

    .sos-sl__card-meta {
        margin: 0;
    }

    /* FIX MOBILE actions : stack vertical clean */
    .sos-sl__card-action-row {
        flex-direction: column;
        gap: 8px;
    }

    .sos-sl__action--primary,
    .sos-sl__action--secondary {
        flex: none;
        width: 100%;
        height: 46px;
    }

    .sos-sl__directions-row {
        gap: 6px;
    }

    .sos-sl__action--directions {
        font-size: 11px;
        padding: 0 6px;
    }

    /* MOBILE : on cache la search desktop, on affiche le FAB */
    .sos-sl__search-wrap {
        display: none;
    }

    .sos-sl__mobile-fab {
        display: inline-flex !important;
    }

    .sos-sl__mobile-search {
        display: block !important;
    }

    /* Carte plein ecran sur mobile - pas de panneau liste visible */
    .sos-sl__main {
        margin-top: 12px;
    }

    .sos-sl[data-mobile-view="map"] .sos-sl__map-pane {
        height: calc(100vh - 180px - env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 380px) {
    .sos-sl__action--directions span {
        display: none;
    }

    .sos-sl__action--directions {
        height: 38px;
    }

    .sos-sl__action--directions svg {
        width: 16px;
        height: 16px;
    }
}

/* ==========================================================================
   ACCESSIBILITY - reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .sos-sl *,
    .sos-sl *::before,
    .sos-sl *::after {
        animation-duration: 0.01s !important;
        transition-duration: 0.01s !important;
    }

    .sos-sl::before,
    .sos-sl__header::before {
        animation: none;
    }
}