/* ──────────────────────────────────────────
   StoreLocatore – Public CSS
   Variables injectées dynamiquement via PHP
   ────────────────────────────────────────── */

:root {
	--sl-primary:   #1a1a2e;
	--sl-secondary: #16213e;
	--sl-accent:    #e94560;
	--sl-text:      #f0f0f0;
	--sl-bg:        #0f3460;
	--sl-font:      'Inter', sans-serif;
	--sl-radius:    14px;
	--sl-shadow:    0 8px 32px rgba(0,0,0,.18);
	--sl-transition:all .3s cubic-bezier(.4,0,.2,1);
}

/* ── Layout ── */
.sl-store-page { font-family: var(--sl-font); color: var(--sl-text); background: var(--sl-primary); min-height: 50vh; }

/* ── Hero ── */
.sl-hero {
	position: relative;
	height: 380px;
	overflow: hidden;
	background: var(--sl-secondary);
}
.sl-hero-img {
	width: 100%; height: 100%;
	object-fit: cover;
	filter: brightness(.65);
}
.sl-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(26,26,46,.85) 0%, rgba(233,69,96,.2) 100%);
}
.sl-hero-content {
	position: absolute;
	bottom: 32px; left: 40px; right: 40px;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 16px;
}
.sl-store-name {
	font-size: clamp(28px, 4vw, 48px);
	font-weight: 800;
	color: #fff;
	margin: 0;
	text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.sl-hero-status {
	display: flex;
	align-items: center;
	gap: 10px;
}
.sl-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 18px;
	border-radius: 50px;
	font-size: 14px;
	font-weight: 700;
	backdrop-filter: blur(8px);
}
.sl-badge-open { background: rgba(16,185,129,.9); color: #fff; }
.sl-badge-closed { background: rgba(239,68,68,.9); color: #fff; }
.sl-badge::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .7; }
.sl-badge-open::before { background: #a7f3d0; }
.sl-badge-closed::before { background: #fecaca; }

/* ── Main layout ── */
.sl-store-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 24px;
}
.sl-store-grid {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 32px;
	align-items: start;
}
@media (max-width: 900px) { .sl-store-grid { grid-template-columns: 1fr; } }

/* ── Cards ── */
.sl-card {
	background: var(--sl-primary);
	border-radius: var(--sl-radius);
	padding: 28px;
	box-shadow: var(--sl-shadow);
	border: 1px solid rgba(255,255,255,.07);
}
.sl-card + .sl-card { margin-top: 24px; }
.sl-card-title {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: var(--sl-accent);
	margin: 0 0 18px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.sl-card-title svg { width: 16px; height: 16px; }

/* ── Horaires ── */
.sl-hours-list { list-style: none; margin: 0; padding: 0; }
.sl-hours-list li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid rgba(255,255,255,.06);
	font-size: 14px;
	transition: var(--sl-transition);
}
.sl-hours-list li:last-child { border-bottom: none; }
.sl-hours-list li.sl-today {
	font-weight: 700;
	background: rgba(233,69,96,.1);
	margin: 0 -12px;
	padding: 10px 12px;
	border-radius: 8px;
	border-bottom: none;
}
.sl-hours-day { color: rgba(255,255,255,.7); }
.sl-hours-list li.sl-today .sl-hours-day { color: var(--sl-accent); }
.sl-hours-time { font-weight: 600; }
.sl-hours-time.closed { color: rgba(255,255,255,.35); font-style: italic; }
.sl-today-date {
	font-size: 12px;
	color: var(--sl-accent);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 14px;
	display: flex;
	align-items: center;
	gap: 6px;
}

/* ── Info items ── */
.sl-info-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 12px 0;
	border-bottom: 1px solid rgba(255,255,255,.06);
	font-size: 14px;
	line-height: 1.6;
}
.sl-info-item:last-child { border-bottom: none; }
.sl-info-icon {
	width: 36px; height: 36px;
	background: rgba(233,69,96,.15);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--sl-accent);
}
.sl-info-icon svg { width: 18px; height: 18px; }
.sl-info-label { font-size: 11px; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 2px; }
.sl-info-value { font-weight: 500; }
.sl-info-value a { color: var(--sl-text); text-decoration: none; transition: var(--sl-transition); }
.sl-info-value a:hover { color: var(--sl-accent); }

/* ── Chips (services, paiements) ── */
.sl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.sl-chip {
	padding: 6px 14px;
	background: rgba(233,69,96,.12);
	border: 1px solid rgba(233,69,96,.25);
	border-radius: 50px;
	font-size: 12px;
	font-weight: 600;
	color: var(--sl-text);
	letter-spacing: .3px;
}

/* ── Buttons ── */
.sl-buttons { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.sl-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: 50px;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: var(--sl-transition);
	letter-spacing: .3px;
}
.sl-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.sl-btn svg { width: 18px; height: 18px; }
.sl-btn-primary { background: var(--sl-accent); color: #fff; }
.sl-btn-primary:hover { background: #c73652; color: #fff; }
.sl-btn-secondary {
	background: transparent;
	color: var(--sl-text);
	border: 2px solid rgba(255,255,255,.25);
}
.sl-btn-secondary:hover { border-color: var(--sl-accent); color: var(--sl-accent); }

/* ── Map ── */
.sl-map-section { margin-top: 40px; }
.sl-map-section h2 { font-size: 20px; margin-bottom: 16px; color: var(--sl-text); }
#sl-map {
	width: 100%;
	height: 380px;
	border-radius: var(--sl-radius);
	overflow: hidden;
	box-shadow: var(--sl-shadow);
	border: 1px solid rgba(255,255,255,.08);
}

/* ── Sections globales ── */
.sl-section {
	background: var(--sl-primary);
	padding: 64px 24px;
	margin-top: 0;
}
.sl-section-inner { max-width: 1200px; margin: 0 auto; }
.sl-section-header { text-align: center; margin-bottom: 44px; }
.sl-section-label {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--sl-accent);
	margin-bottom: 10px;
}
.sl-section-title { font-size: clamp(24px, 3vw, 36px); font-weight: 800; margin: 0; color: var(--sl-text); }
.sl-section-subtitle { color: rgba(255,255,255,.55); margin-top: 10px; font-size: 15px; }

/* Gallery */
.sl-gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
}
.sl-gallery-item {
	aspect-ratio: 4/3;
	overflow: hidden;
	border-radius: 12px;
	cursor: pointer;
}
.sl-gallery-item img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.sl-gallery-item:hover img { transform: scale(1.07); }

/* Lightbox */
.sl-lightbox {
	position: fixed; inset: 0;
	background: rgba(0,0,0,.92);
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.sl-lightbox.active { display: flex; }
.sl-lightbox-img { max-width: 90vw; max-height: 85vh; border-radius: 12px; }
.sl-lightbox-close {
	position: absolute; top: 20px; right: 24px;
	font-size: 32px; color: #fff; cursor: pointer;
	line-height: 1;
	background: none; border: none;
}
.sl-lightbox-nav {
	position: absolute;
	top: 50%; transform: translateY(-50%);
	background: rgba(255,255,255,.15);
	border: none; color: #fff;
	width: 48px; height: 48px;
	border-radius: 50%;
	font-size: 22px;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: var(--sl-transition);
}
.sl-lightbox-nav:hover { background: var(--sl-accent); }
.sl-lightbox-prev { left: 16px; }
.sl-lightbox-next { right: 16px; }

/* Reviews */
.sl-reviews-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
}
.sl-review-card {
	background: var(--sl-secondary);
	border: 1px solid rgba(255,255,255,.07);
	border-radius: var(--sl-radius);
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.sl-review-header { display: flex; align-items: center; gap: 12px; }
.sl-review-avatar {
	width: 44px; height: 44px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--sl-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 700;
	color: #fff;
	flex-shrink: 0;
}
.sl-review-meta { flex: 1; }
.sl-review-author { font-weight: 700; font-size: 14px; }
.sl-review-date { font-size: 12px; color: rgba(255,255,255,.45); margin-top: 2px; }
.sl-stars { color: #f59e0b; font-size: 15px; letter-spacing: 2px; }
.sl-review-text { font-size: 14px; color: rgba(255,255,255,.75); line-height: 1.7; font-style: italic; }
.sl-review-source { display: flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255,255,255,.35); }

/* Instagram */
.sl-instagram-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 12px;
}
@media (max-width: 768px) { .sl-instagram-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .sl-instagram-grid { grid-template-columns: repeat(2, 1fr); } }
.sl-ig-item {
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 12px;
	position: relative;
	cursor: pointer;
}
.sl-ig-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.sl-ig-item:hover img { transform: scale(1.08); }
.sl-ig-overlay {
	position: absolute; inset: 0;
	background: rgba(233,69,96,.0);
	display: flex; align-items: center; justify-content: center;
	transition: var(--sl-transition);
	color: #fff; font-size: 24px;
}
.sl-ig-item:hover .sl-ig-overlay { background: rgba(233,69,96,.55); }
.sl-ig-error {
	text-align: center;
	padding: 40px;
	color: rgba(255,255,255,.45);
	font-size: 14px;
}

/* FAQ */
.sl-faq-list { max-width: 800px; margin: 0 auto; }
.sl-faq-item {
	border-bottom: 1px solid rgba(255,255,255,.08);
	overflow: hidden;
}
.sl-faq-question {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 0;
	cursor: pointer;
	font-weight: 600;
	font-size: 16px;
	color: var(--sl-text);
	gap: 16px;
}
.sl-faq-question:hover { color: var(--sl-accent); }
.sl-faq-icon {
	width: 28px; height: 28px;
	background: rgba(233,69,96,.15);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	color: var(--sl-accent);
	font-size: 18px;
	flex-shrink: 0;
	transition: var(--sl-transition);
}
.sl-faq-item.active .sl-faq-icon { transform: rotate(45deg); background: var(--sl-accent); color: #fff; }
.sl-faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height .35s ease;
	color: rgba(255,255,255,.65);
	font-size: 14px;
	line-height: 1.8;
}
.sl-faq-answer-inner { padding: 0 0 20px; }
.sl-faq-item.active .sl-faq-answer { max-height: 500px; }

/* Alternating section bg */
.sl-section:nth-child(even) { background: var(--sl-secondary); }

/* ── Section "À propos" / Contenu SEO ── */
.sl-about-grid {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 48px;
	align-items: start;
}
@media (max-width: 900px) { .sl-about-grid { grid-template-columns: 1fr; gap: 32px; } }

.sl-about-text {
	font-size: 16px;
	line-height: 1.75;
}
.sl-about-text h3 {
	font-size: 22px;
	margin: 32px 0 16px;
	color: var(--sl-accent, #e94560);
}
.sl-long-description p,
.sl-why-us p {
	color: rgba(255,255,255,.78);
	margin-bottom: 14px;
}

.sl-about-card {
	background: var(--sl-secondary, #16213e);
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 14px;
	padding: 24px;
	position: sticky;
	top: 24px;
}
.sl-about-card h3 {
	margin: 0 0 16px;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--sl-accent, #e94560);
}
.sl-about-card dl {
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 10px 16px;
	font-size: 14px;
}
.sl-about-card dt {
	font-weight: 600;
	color: rgba(255,255,255,.55);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .5px;
	align-self: center;
}
.sl-about-card dd {
	margin: 0;
	color: var(--sl-text, #f0f0f0);
}

/* Schema.org invisible */
.sl-seo-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ── Bannière fermeture exceptionnelle ── */
.sl-special-banner {
	padding: 14px 24px;
	font-family: var(--sl-font, 'Inter', sans-serif);
	font-size: 14px;
	text-align: center;
}
.sl-special-banner.sl-banner-closed { background: #fef2f2; color: #991b1b; border-bottom: 2px solid #ef4444; }
.sl-special-banner.sl-banner-info   { background: #dbeafe; color: #1e40af; border-bottom: 2px solid #3b82f6; }
.sl-special-banner-inner { max-width: 1200px; margin: 0 auto; display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; }
.sl-special-banner strong { font-weight: 700; }
.sl-special-banner span { opacity: .8; }

/* Responsive */
@media (max-width: 600px) {
	.sl-hero { height: 260px; }
	.sl-hero-content { bottom: 20px; left: 20px; right: 20px; }
	.sl-store-container { padding: 24px 16px; }
	.sl-card { padding: 20px; }
	.sl-buttons { flex-direction: column; }
	.sl-btn { justify-content: center; }
}

/* ──────────────────────────────────────────
   Carrousel "Liste de boutiques"
   ────────────────────────────────────────── */

.sl-stores-carousel-wrap {
	--cols-desktop: 3;
	--cols-tablet:  2;
	--cols-mobile:  1.2;
	--gap: 20px;
	font-family: var(--sl-font, 'Inter', sans-serif);
	color: var(--sl-text, #f0f0f0);
	width: 100%;
}

.sl-carousel-container {
	position: relative;
}

.sl-carousel-track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--cols-desktop) - 1) * var(--gap)) / var(--cols-desktop));
	gap: var(--gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding: 4px 4px 24px;
	-webkit-overflow-scrolling: touch;
}
.sl-carousel-track::-webkit-scrollbar { display: none; }

@media (max-width: 1024px) {
	.sl-carousel-track {
		grid-auto-columns: calc((100% - (var(--cols-tablet) - 1) * var(--gap)) / var(--cols-tablet));
	}
}
@media (max-width: 640px) {
	.sl-carousel-track {
		grid-auto-columns: calc((100% - (var(--cols-mobile) - 1) * var(--gap)) / var(--cols-mobile));
		--gap: 14px;
	}
}

/* Card */
.sl-card-store {
	scroll-snap-align: start;
	background: var(--sl-secondary, #16213e);
	color: var(--sl-text, #f0f0f0);
	border-radius: 16px;
	overflow: hidden;
	transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s ease;
	display: flex;
	flex-direction: column;
	border: 1px solid rgba(255,255,255,.06);
	box-shadow: 0 4px 20px rgba(0,0,0,.12);
}
.sl-card-store:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 40px rgba(0,0,0,.25);
}
.sl-card-store-link {
	color: inherit;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.sl-card-store-img {
	position: relative;
	aspect-ratio: 16/10;
	overflow: hidden;
	background: rgba(0,0,0,.2);
}
.sl-card-store-img img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}
.sl-card-store:hover .sl-card-store-img img { transform: scale(1.06); }

.sl-card-store-placeholder {
	width: 100%; height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 56px;
	opacity: .35;
}

.sl-card-store-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: 50px;
	font-size: 12px;
	font-weight: 700;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.sl-card-store-badge::before {
	content: '';
	width: 6px; height: 6px;
	border-radius: 50%;
	background: currentColor;
	opacity: .7;
}
.sl-card-store-badge.sl-badge-open  { background: rgba(16,185,129,.92); color: #fff; }
.sl-card-store-badge.sl-badge-closed{ background: rgba(239,68,68,.92);  color: #fff; }

.sl-card-store-body {
	padding: 22px 22px 24px;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.sl-card-store-title {
	margin: 0 0 4px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: inherit;
	transition: color .25s ease;
}
.sl-card-store-address,
.sl-card-store-hours {
	margin: 0;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13px;
	line-height: 1.5;
}
.sl-card-store-address svg,
.sl-card-store-hours svg {
	flex-shrink: 0;
	margin-top: 3px;
}
.sl-card-store-btn {
	margin-top: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 18px;
	background: var(--sl-accent, #e94560);
	color: #fff;
	border-radius: 50px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .3px;
	transition: gap .25s ease, transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
	align-self: stretch;
}
.sl-card-store:hover .sl-card-store-btn { gap: 12px; }

/* Arrows */
.sl-carousel-arrow {
	position: absolute;
	top: 38%;
	transform: translateY(-50%);
	width: 48px; height: 48px;
	background: #fff;
	color: var(--sl-accent, #e94560);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 16px rgba(0,0,0,.15);
	z-index: 10;
	transition: all .25s ease;
}
.sl-carousel-arrow:hover {
	transform: translateY(-50%) scale(1.08);
	box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.sl-carousel-prev { left: -22px; }
.sl-carousel-next { right: -22px; }
@media (max-width: 1024px) {
	.sl-carousel-prev { left: 8px; }
	.sl-carousel-next { right: 8px; }
}
@media (max-width: 640px) {
	.sl-carousel-arrow { display: none; }
}

/* Dots */
.sl-carousel-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 24px;
}
.sl-carousel-dot {
	width: 10px; height: 10px;
	border-radius: 50%;
	background: rgba(255,255,255,.25);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: all .25s ease;
}
.sl-carousel-dot.active {
	background: var(--sl-accent, #e94560);
	width: 28px;
	border-radius: 50px;
}
.sl-carousel-dot:hover { background: rgba(255,255,255,.5); }
.sl-carousel-dot.active:hover { background: var(--sl-accent, #e94560); }

/* ──────────────────────────────────────────
   Store Locator (liste + carte)
   ────────────────────────────────────────── */

.sl-locator-wrap {
	font-family: var(--sl-font, 'Inter', sans-serif);
	width: 100%;
}

.sl-locator-mobile-tabs {
	display: none;
	gap: 0;
	margin-bottom: 16px;
	border: 1px solid #e5e7eb;
	border-radius: 50px;
	overflow: hidden;
	background: #f9fafb;
}
.sl-locator-tab {
	flex: 1;
	background: transparent;
	border: none;
	padding: 12px 20px;
	font-size: 14px;
	font-weight: 600;
	color: #6b7280;
	cursor: pointer;
	transition: all .2s;
}
.sl-locator-tab.active {
	background: #1f2937;
	color: #fff;
}
@media (max-width: 900px) {
	.sl-locator-wrap[data-mobile="tabs"] .sl-locator-mobile-tabs { display: flex; }
}

.sl-locator {
	display: flex;
	gap: 0;
	height: 90vh;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 8px 32px rgba(0,0,0,.08);
}

/* ── Sidebar / Liste ── */
.sl-locator-sidebar {
	flex: 0 0 380px;
	max-width: 380px;
	background: #000;
	color: #fff;
	padding: 24px 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-height: 0;
}

.sl-locator-title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	color: #fbbf24;
	line-height: 1.3;
}

.sl-locator-search {
	display: flex;
	gap: 8px;
	align-items: stretch;
}
.sl-locator-search input {
	flex: 1;
	padding: 12px 16px;
	border-radius: 8px;
	border: 1px solid transparent;
	background: #fff;
	color: #1f2937;
	font-size: 14px;
	font-family: inherit;
	outline: none;
	transition: border-color .2s;
}
.sl-locator-search input:focus { border-color: #f97316; }

.sl-locator-geo {
	width: 44px;
	height: 44px;
	border: none;
	background: #f97316;
	color: #fff;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all .2s;
	flex-shrink: 0;
}
.sl-locator-geo:hover { transform: scale(1.05); }
.sl-locator-geo.loading svg {
	animation: sl-spin 1s linear infinite;
}
@keyframes sl-spin { to { transform: rotate(360deg); } }

/* ── Liste scrollable ── */
.sl-locator-list {
	flex: 1;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-right: 4px;
	margin-right: -4px;
	scrollbar-width: thin;
	scrollbar-color: rgba(255,255,255,.2) transparent;
}
.sl-locator-list::-webkit-scrollbar { width: 6px; }
.sl-locator-list::-webkit-scrollbar-track { background: transparent; }
.sl-locator-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 3px; }

.sl-locator-empty {
	padding: 30px 20px;
	text-align: center;
	color: rgba(255,255,255,.5);
	font-size: 14px;
}

/* ── Card boutique ── */
.sl-locator-card {
	background: #fff;
	color: #1f2937;
	padding: 20px;
	border-radius: 12px;
	cursor: pointer;
	transition: all .25s ease;
	border: 2px solid transparent;
	display: flex;
	gap: 14px;
	align-items: flex-start;
}
.sl-locator-card:hover,
.sl-locator-card.active {
	background: #fff7ed;
	border-color: #f97316;
	transform: translateX(2px);
}
.sl-locator-card-body {
	flex: 1;
	min-width: 0;
}
.sl-locator-card-img {
	flex-shrink: 0;
	width: 90px;
	height: 90px;
	border-radius: 12px;
	background-size: cover;
	background-position: center;
	background-color: #f3f4f6;
}

.sl-locator-card-name {
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: #1f2937;
}

.sl-locator-card-address {
	margin: 0 0 12px;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13px;
	line-height: 1.5;
	color: #4b5563;
}
.sl-locator-card-address svg {
	flex-shrink: 0;
	margin-top: 3px;
	color: #f97316;
}

.sl-locator-card-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}
.sl-locator-card-action {
	font-size: 12px;
	font-weight: 600;
	color: #1f2937;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color .2s;
}
.sl-locator-card-action:hover {
	color: #f97316;
}
.sl-locator-card-action + .sl-locator-card-action {
	border-left: 1px solid #d1d5db;
	padding-left: 12px;
	margin-left: -2px;
}

/* ── Map ── */
.sl-locator-map {
	flex: 1;
	min-width: 0;
	background: #f3f4f6;
	position: relative;
}
.sl-locator-map-canvas {
	width: 100%;
	height: 100%;
}

/* ── Pin Leaflet customisé ── */
.sl-locator-pin {
	display: block;
	filter: drop-shadow(0 2px 4px rgba(0,0,0,.3));
}

/* ── Popup customisé ── */
.sl-popup-wrap .leaflet-popup-content-wrapper {
	border-radius: 14px;
	padding: 0;
	overflow: hidden;
	box-shadow: 0 8px 32px rgba(0,0,0,.18);
}
.sl-popup-wrap .leaflet-popup-content {
	margin: 0 !important;
	padding: 0;
	line-height: 1.4;
}
.sl-popup-wrap .leaflet-popup-close-button {
	color: #fff !important;
	font-size: 22px !important;
	width: 28px !important;
	height: 28px !important;
	line-height: 28px !important;
	top: 8px !important;
	right: 8px !important;
	background: rgba(0,0,0,.45) !important;
	border-radius: 50% !important;
	z-index: 2;
}
.sl-popup-wrap .leaflet-popup-close-button:hover { background: rgba(0,0,0,.7) !important; }
.sl-popup {
	font-family: var(--sl-font, 'Inter', sans-serif);
	display: block;
	width: 320px;
	max-width: 100%;
}
.sl-popup-img {
	width: 100%;
	height: 160px;
	background-size: cover;
	background-position: center;
	background-color: #f3f4f6;
}
.sl-popup-body {
	padding: 16px 20px 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.sl-popup-body strong {
	display: block;
	font-size: 17px;
	font-weight: 700;
	color: #1f2937;
	line-height: 1.3;
	white-space: normal;
	word-wrap: normal;
	overflow-wrap: break-word;
}
.sl-popup-body small {
	display: block;
	font-size: 13px;
	color: #6b7280;
	line-height: 1.5;
	white-space: normal;
	word-wrap: normal;
	overflow-wrap: break-word;
}
.sl-popup-link {
	display: inline-block;
	margin-top: 6px;
	font-weight: 700;
	font-size: 13px;
	text-decoration: none;
	white-space: nowrap;
}
.sl-popup-link:hover { text-decoration: underline; }

/* ── Icône bouton géoloc (Elementor icons) ── */
.sl-locator-geo i,
.sl-locator-geo svg {
	width: 20px;
	height: 20px;
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ── Cluster customisé ── */
.sl-marker-cluster-wrap { background: transparent; }
.sl-marker-cluster {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 14px;
	color: #fff;
	background: #fbbf24;
	box-shadow: 0 0 0 6px rgba(251,191,36,.25), 0 4px 12px rgba(0,0,0,.2);
	transition: transform .2s;
}
.sl-marker-cluster:hover { transform: scale(1.1); }

/* ── Override Leaflet.markercluster default ── */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large { background: transparent !important; }
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div { background: transparent !important; }

/* ── Responsive ── */
@media (max-width: 900px) {
	.sl-locator {
		flex-direction: column !important;
		height: auto;
		border-radius: 12px;
	}
	.sl-locator-sidebar {
		flex: none;
		max-width: none;
		width: 100%;
		min-height: 60vh;
		max-height: 70vh;
	}
	.sl-locator-map {
		min-height: 50vh;
	}
	/* Mode tabs : afficher seulement le pane actif */
	.sl-locator-wrap[data-mobile="tabs"] [data-pane] {
		display: none;
	}
	.sl-locator-wrap[data-mobile="tabs"] [data-pane].mobile-active {
		display: flex;
	}
	.sl-locator-wrap[data-mobile="tabs"] .sl-locator-sidebar[data-pane="list"] {
		display: flex;
	}
	.sl-locator-wrap[data-mobile="tabs"] [data-pane="map"].mobile-active {
		display: block;
	}
}