/**
 * 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 {
    /* Lot 0 : min-height:100vh retiré (résidu plein-page = cause du blanc en header="false"
       et des hauteurs excessives en page Elementor). La hauteur vit UNIQUEMENT sur .sos-sl__split. */
    background: var(--sos-bg, #F6F8FC);
    margin: 0;
    padding: 0;
}

.sos-sl--v7 .sos-sl__split {
    display: grid;
    grid-template-columns: 45% 55%;
    /* La hauteur n'est PAS imposée ici : c'est la colonne droite (recherche + GPS +
       liste figée à 3 items) qui donne la hauteur de la ligne grid. La carte (colonne
       gauche, sans hauteur intrinsèque) s'étire pour matcher via le stretch grid par
       défaut. → carte = hauteur colonne droite, jamais l'inverse. Plus de var --sos-sl-height. */
    align-items: stretch;
}

/* ============================================
   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%; /* remplit la ligne grid, dont la hauteur est donnée par la colonne droite */
}

/* ============================================
   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;
    /* Plus de bande blanche : le vertical était à 64px (= le blanc avant la recherche
       ET après la liste). On le rabote à 10px (juste de quoi ne pas coller au bord +
       contenir le halo de focus de l'input). L'horizontal est conservé. */
    padding: 10px 32px 10px 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;
    /* Boîte responsive calée sur EXACTEMENT 3 items + un léger padding. La hauteur n'est
       plus un nombre magique : le JS mesure les 3 premières lignes réellement rendues et
       écrit --sos-sl-results-h (= 3 lignes + gaps, le padding-block ci-dessous fait le
       "léger padding"). Fallback 252px tant que le JS n'a pas mesuré.
       flex:none = ne se laisse pas écraser par le panel ; overflow-y:auto = le reste défile. */
    flex: none;
    height: var(--sos-sl-results-h, 252px);
    padding-block: 8px;
    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;
}

/* Intercalaire "Nos autres centres" (Lot 1) : insere apres les 3 plus proches quand
   une recherche/GPS est active. Petit label + filet ; revele au scroll sous les 3 premiers. */
.sos-sl--v7 .sos-sl__results-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 2px 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8B96AE;
    white-space: nowrap;
}

.sos-sl--v7 .sos-sl__results-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: rgba(33, 50, 106, 0.10);
}

/* 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) {
    /* Les onglets Liste/Carte (.sos-sl__mobile-only) sont APRES la carte (.sos-sl__split)
       dans le DOM. En mode carte, la carte s'affichait donc AU-DESSUS des onglets. On
       reordonne en flex pour garder les onglets toujours en tête, comme en mode liste. */
    .sos-sl--v7 {
        display: flex;
        flex-direction: column;
    }
    .sos-sl--v7 .sos-sl__mobile-only { order: 1; }
    .sos-sl--v7 .sos-sl__split       { order: 2; }

    /* 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;
        /* Lot 0 : hauteur bornée mobile (surchargeable). Ajuster sur vrai téléphone (50vh souvent mieux). */
        height: var(--sos-sl-height-mobile, 60vh);
    }

    .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: 10px 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);
    /* Lot 0 : pas de plancher 100vh sur le root (qui porte .sos-sl ET .sos-sl--v7).
       La hauteur ne vit QUE sur .sos-sl__split (var --sos-sl-height). Ce min-height
       laissait une bande de fond (--sos-bg) sous le split en page Elementor + hauteur excessive. */
    -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;
}

/* Groupe droit de l'en-tête : distance + « + » fiche. */
.sos-sl__card-head-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* « + » -> fiche centre (permalink). Reprend la DA du bouton « + » des lignes desktop. */
.sos-sl__card-expand {
    width: 36px;
    height: 36px;
    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;
    flex-shrink: 0;
    text-decoration: none !important;
    padding: 0 !important;
}

.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 - goutte sobre (reprise des pages zone), sans lettre */
.sos-sl__pin {
    width: 28px;
    height: 36px;
    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 {
    /* Cale la croix DANS la boite (avant : top/right 0 -> deborde du radius + du filet
       jaune du haut). Position absolue explicite, largeur fixe, centree. */
    position: absolute;
    top: 6px !important;
    right: 6px !important;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sos-text-muted) !important;
    font-size: 20px !important;
    padding: 0 !important;
    border-radius: 999px;
    transition: color 0.2s var(--sos-spring), background 0.2s var(--sos-spring);
    line-height: 1;
}

.sos-sl-popup .maplibregl-popup-close-button:hover {
    color: var(--sos-text) !important;
    background: rgba(33, 50, 106, 0.06) !important;
}

.sos-sl-popup__name {
    display: block;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--sos-blue) !important;
    margin: 0 22px 10px 0 !important; /* marge droite = place pour la croix */
    line-height: 1.3 !important;
    letter-spacing: -0.015em;
    text-decoration: none;
}

.sos-sl-popup__name:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Meta = distance (si recherche) + statut d'ouverture, alignes comme dans la liste. */
.sos-sl-popup__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
}

.sos-sl-popup__distance {
    font-size: 11px;
    font-weight: 600;
    color: var(--sos-blue);
    background: #ECF0F8;
    padding: 3px 9px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

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

.sos-sl-popup__status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

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

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

.sos-sl-popup__status--closed {
    background: #EEF2F8;
    color: #8B96AE;
}

.sos-sl-popup__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    background: linear-gradient(180deg, var(--sos-yellow-warm) 0%, var(--sos-yellow) 100%);
    color: var(--sos-blue) !important;
    padding: 10px 16px;
    border-radius: var(--sos-leaf-sm);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.3s var(--sos-spring-soft), box-shadow 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;
        /* min-height:640px (base desktop) NON neutralisé -> en mode carte, .sos-sl__main
           (vide, la liste étant masquée) gardait 640px de haut et poussait la carte tout
           en bas = le grand vide sous les onglets. En mobile la hauteur vient du list-pane
           (mode liste) ou de la carte (mode carte), jamais de main. */
        min-height: 0;
        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;
    }
}
/* ==========================================================================
   MODE PLEIN-CARTE — page INTERNE (/centres-interne/) uniquement
   ==========================================================================
   Active exclusivement par [sos_store_locator fullmap="true"], qui pose la
   classe .sos-sl--fullmap sur le <main>. TOUT ce bloc est scope sous cette
   classe : /centres/ (page publique) n'est touchee par aucune de ces regles.

   Desktop : la carte occupe 100 % de la largeur, le panneau de recherche
   devient une carte flottante par-dessus (facon Google Maps), et le bouton
   « Agrandir » bascule le bloc en plein ecran (API Fullscreen, repli CSS).
   Mobile : layout inchange, la carte est juste plus haute.

   Hauteur reglable sans toucher au CSS :
   .sos-sl--fullmap { --sos-sl-fullmap-h: 82vh; }
   ========================================================================== */

@media (min-width: 921px) {

    .sos-sl--v7.sos-sl--fullmap .sos-sl__split {
        position: relative;
        display: block;                                    /* fin du grid 45/55 */
        height: var(--sos-sl-fullmap-h, calc(100vh - 200px));
        min-height: 520px;
    }

    .sos-sl--v7.sos-sl--fullmap .sos-sl__split-map {
        position: absolute;
        inset: 0;
        height: 100%;
    }

    /* Panneau de recherche : carte flottante posee sur la carte. */
    .sos-sl--v7.sos-sl--fullmap .sos-sl__panel {
        position: absolute;
        top: 16px;
        left: 16px;
        bottom: 16px;
        width: 380px;
        max-width: calc(100% - 32px);
        z-index: 5;
        border-radius: 16px;
        box-shadow: 0 12px 32px rgba(33, 50, 106, 0.18);
        overflow: hidden;
    }

    .sos-sl--v7.sos-sl--fullmap .sos-sl__panel-inner {
        padding: 16px 18px;
        gap: 14px;
        overflow-y: auto;
    }

    /* La boite resultats n'est plus figee a 3 items : elle prend la hauteur
       restante du panneau flottant (qui est, lui, borne par la carte). */
    .sos-sl--v7.sos-sl--fullmap .sos-sl__results {
        flex: 1 1 auto;
        height: auto;
        min-height: 0;
    }

    /* ------------------------------------------------------------------
       Cartes de resultat : nom sur toute la largeur, boutons EN DESSOUS.
       Sur /centres/ le panneau fait ~55 % de l'ecran et la ligne
       « nom | Prendre RDV | + » tient. Ici le panneau flottant fait 380px :
       la colonne 1fr etait ecrasee et tous les centres s'affichaient
       « SOS PARE-BRI... », impossible de les distinguer. On passe donc en
       deux rangees — uniquement en fullmap, la page publique ne bouge pas.
       ------------------------------------------------------------------ */
    .sos-sl--v7.sos-sl--fullmap .sos-sl__result-row {
        grid-template-columns: 1fr auto;
        row-gap: 10px;
    }

    /* Rangee 1 : le bloc nom + meta occupe les deux colonnes. */
    .sos-sl--v7.sos-sl--fullmap .sos-sl__result-row-info {
        grid-column: 1 / -1;
    }

    /* Nom complet : on annule l'ellipsis, le nom passe a la ligne. */
    .sos-sl--v7.sos-sl--fullmap .sos-sl__result-row-name {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    /* Meta (distance / statut / note) : idem, plus de troncature a droite. */
    .sos-sl--v7.sos-sl--fullmap .sos-sl__result-row-meta {
        flex-wrap: wrap;
        overflow: visible;
        row-gap: 6px;
    }

    /* Rangee 2 : « Prendre RDV » prend la largeur restante, « + » reste carre. */
    .sos-sl--v7.sos-sl--fullmap .sos-sl__result-row-cta {
        width: 100%;
    }

}

/* Bouton « Agrandir » : hors media query — il sert aussi en vue Carte mobile.
   Positionne a gauche du zoom MapLibre (top-right), jamais par-dessus. */
.sos-sl--fullmap .sos-sl__expand {
    position: absolute;
    top: 12px;
    right: 52px;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border: 1px solid rgba(33, 50, 106, 0.12);
    border-radius: 10px;
    background: #FFFFFF;
    color: #21326A;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(33, 50, 106, 0.14);
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.sos-sl--fullmap .sos-sl__expand:hover {
    background: #F6F8FC;
    box-shadow: 0 4px 12px rgba(33, 50, 106, 0.2);
}

/* Plein ecran natif : le bloc devient l'ecran entier. Les selecteurs :fullscreen
   et :-webkit-full-screen NE PEUVENT PAS etre groupes (un selecteur inconnu
   invalide toute la regle sur les navigateurs qui ne le connaissent pas). */
.sos-sl__split:fullscreen {
    height: 100vh !important;
    min-height: 0 !important;
    background: #F6F8FC;
}

.sos-sl__split:-webkit-full-screen {
    height: 100vh !important;
    min-height: 0 !important;
    background: #F6F8FC;
}

/* Repli si l'API Fullscreen est refusee (iframe sans allowfullscreen, Safari ancien) :
   on simule le plein ecran en position fixed. Echap ferme (gere en JS). */
.sos-sl--fullmap .sos-sl__split.is-pseudo-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 99999;
    height: 100vh !important;
    min-height: 0 !important;
    background: #F6F8FC;
}

/* En plein ecran, la carte remplit le bloc — y compris en vue mobile, ou elle
   est sinon bornee a 78vh et masquee en vue Liste. Non groupable : cf. ci-dessus. */
.sos-sl__split:fullscreen .sos-sl__split-map {
    display: block !important;
    position: absolute;
    inset: 0;
    height: 100% !important;
}

.sos-sl__split:-webkit-full-screen .sos-sl__split-map {
    display: block !important;
    position: absolute;
    inset: 0;
    height: 100% !important;
}

.sos-sl--fullmap .sos-sl__split.is-pseudo-fullscreen .sos-sl__split-map {
    display: block !important;
    position: absolute;
    inset: 0;
    height: 100% !important;
}

html.sos-sl-fullmap-locked,
html.sos-sl-fullmap-locked body {
    overflow: hidden;
}

/* Mobile : on ne touche a rien d'autre que la hauteur de la carte. */
@media (max-width: 920px) {
    .sos-sl--v7.sos-sl--fullmap[data-mobile-view="map"] .sos-sl__split-map {
        height: var(--sos-sl-height-mobile, 78vh);
    }
}