/* ═══════════════════════════════════════════════════════════
   Map Nova — Frontend CSS  v4.2.0
   Full-bleed (breakout Divi) · sidebar · Barlow + Montserrat
   ═══════════════════════════════════════════════════════════ */

/* Empêche le débordement horizontal introduit par la technique de
   full-bleed (100vw + marges négatives) ci-dessous — sur certains
   mobiles, 100vw peut être très légèrement plus large que le viewport
   réellement visible, ce qui rend la page scrollable horizontalement
   et laisse apparaître une bande blanche sur le côté. */
html, body { overflow-x: hidden; max-width: 100%; }

/* ── Widget racine — full-bleed, aucun cadre ─────────────── */
.mn-widget {
	--mn-h:        620px;
	--mn-sidebar:  380px;
	--mn-accent:   #0891b2;
	--mn-accent-d: #0e7490;
	--mn-accent-l: #e0f2fe;
	--mn-text:     #0f172a;
	--mn-soft:     #334155;
	--mn-muted:    #94a3b8;
	--mn-bg:       #f8fafc;
	--mn-bg2:      #f1f5f9;
	--mn-border:   rgba(15,23,42,.07);
	--mn-border2:  rgba(15,23,42,.14);
	--mn-ease:     cubic-bezier(.16,1,.3,1);
	--mn-ease-std: cubic-bezier(.25,.46,.45,.94);
	--mn-font-h:   'Barlow', system-ui, sans-serif;
	--mn-font-b:   'Montserrat', system-ui, sans-serif;

	position:   relative;
	width:      100vw;
	max-width:  100vw;
	height:     var(--mn-h);
	display:    flex;
	overflow:   hidden;
	background: #f8fafc;

	/* Breakout technique — sort du container Divi/page */
	margin-left:  calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.mn-widget *, .mn-widget *::before, .mn-widget *::after {
	box-sizing: border-box; margin: 0; padding: 0;
}

/* ── Carte — flex:1, jamais redimensionnée ───────────────── */
.mn-map-el {
	flex:      1;
	min-width: 0;
	position:  relative;
	z-index:   1;
}

/* Leaflet controls */
.mn-widget .leaflet-control-zoom {
	border:     none !important;
	box-shadow: 0 4px 16px rgba(0,0,0,.08) !important;
}
.mn-widget .leaflet-control-zoom a {
	background:    #fff !important;
	color:         #0f172a !important;
	border:        1px solid rgba(15,23,42,.14) !important;
	width:         34px !important; height: 34px !important;
	line-height:   34px !important; font-size: 15px !important;
	font-weight:   300 !important;
}
.mn-widget .leaflet-control-zoom a:hover {
	background:   #0891b2 !important;
	color:        #fff !important;
	border-color: #0891b2 !important;
}
.mn-widget .leaflet-bar {
	border-radius: 10px !important; overflow: hidden !important; border: none !important;
}
.mn-widget .leaflet-control-attribution {
	font-size:         10px !important;
	background:        rgba(255,255,255,.78) !important;
	backdrop-filter:   blur(4px) !important;
	-webkit-backdrop-filter: blur(4px) !important;
}

/* Tooltip marqueur agence */
.mn-map-tooltip.leaflet-tooltip {
	background:    #fff !important;
	border:        1px solid rgba(15,23,42,.14) !important;
	border-radius: 10px !important;
	box-shadow:    0 6px 24px rgba(0,0,0,.1) !important;
	padding:       0 !important;
	font-family:   'Montserrat', sans-serif !important;
	pointer-events: none !important;
}
.mn-map-tooltip.leaflet-tooltip-top::before {
	border-top-color: rgba(15,23,42,.14) !important;
}
.mn-tt { padding: 9px 13px; }
.mn-tt strong {
	display: block; font-family: 'Barlow', sans-serif;
	font-size: 13px; font-weight: 700; color: #0f172a; margin-bottom: 2px;
}
.mn-tt span { font-size: 11.5px; color: #94a3b8; font-weight: 300; }

/* Marqueur agence — neutralise TOUT le style Leaflet par défaut */
.mn-marker-root {
	background:       transparent !important;
	border:           none !important;
	box-shadow:       none !important;
	padding:          0 !important;
	cursor:           pointer;
	transform-origin: bottom center !important;
	will-change:      transform, opacity, filter;
}
/* Marqueur actif — non cliquable pour éviter recadrage accidentel */
.mn-marker-root.mn-marker-active {
	pointer-events: none;
	cursor:         default;
}
/* Le highlight (scale/translate) s'applique à ce wrapper, jamais à
   .mn-marker-root qui porte le transform de positionnement Leaflet */
.mn-pin-wrap { transform-origin: bottom center; }

/* Icône POI — idem */
.mn-poi-icon {
	background: transparent !important;
	border:     none !important;
	box-shadow: none !important;
	padding:    0 !important;
	cursor:     pointer;
}

/* ── Sidebar ─────────────────────────────────────────────── */
.mn-sidebar {
	width:          var(--mn-sidebar);
	height:         100%;
	flex-shrink:    0;
	display:        flex;
	flex-direction: column;
	background:     #fff;
	border-left:    1px solid rgba(15,23,42,.09);
	position:       relative;
	z-index:        10;
	box-shadow:     -4px 0 24px rgba(0,0,0,.06);
}

/* ══════════════════════════════════════════
   VUE LISTE
   ══════════════════════════════════════════ */
.mn-list-view { display: flex; flex-direction: column; height: 100%; }
.mn-list-view[hidden] { display: none; }

.mn-sidebar-head {
	padding:       14px 18px;
	border-bottom: 1px solid rgba(15,23,42,.07);
	flex-shrink:   0;
}
.mn-sidebar-count {
	font-family: 'Montserrat', sans-serif;
	font-size:   11.5px;
	font-weight: 500;
	color:       #94a3b8;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.mn-agency-list {
	flex: 1; overflow-y: auto; padding: 8px 10px 16px;
}
.mn-agency-list::-webkit-scrollbar { width: 4px; }
.mn-agency-list::-webkit-scrollbar-thumb { background: rgba(15,23,42,.12); border-radius: 4px; }

/* Carte agence */
.mn-agency-card {
	border-radius: 12px;
	border:        1px solid rgba(15,23,42,.07);
	background:    #fff;
	cursor:        pointer;
	transition:    border-color .18s, box-shadow .18s, transform .18s;
	overflow:      hidden;
	margin-bottom: 8px;
	outline:       none;
}
.mn-agency-card:hover {
	border-color: rgba(8,145,178,.35);
	box-shadow:   0 4px 18px rgba(8,145,178,.1);
	transform:    translateY(-1px);
}
.mn-agency-card.mn-active {
	border-color: #0891b2;
	box-shadow:   0 0 0 3px rgba(8,145,178,.12), 0 4px 18px rgba(8,145,178,.12);
}
.mn-agency-card:focus-visible { box-shadow: 0 0 0 3px rgba(8,145,178,.3); }

.mn-card-thumb {
	width: 100%; height: 90px;
	background-size: cover; background-position: center;
	background-color: #f1f5f9;
}
.mn-card-body {
	display: flex; align-items: center; gap: 12px;
	padding: 12px 12px 12px 14px;
}
.mn-card-icon {
	width: 38px; height: 38px; border-radius: 10px;
	display: flex; align-items: center; justify-content: center;
	font-size: 16px; color: #fff; flex-shrink: 0;
	box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.mn-card-info {
	flex: 1; min-width: 0;
	display: flex; flex-direction: column; gap: 3px;
}
.mn-card-title {
	font-family:   'Barlow', sans-serif;
	font-size:     14px; font-weight: 700; color: #0f172a;
	white-space:   nowrap; overflow: hidden; text-overflow: ellipsis;
	line-height:   1.25;
}
.mn-card-addr,
.mn-card-poi-count {
	font-family: 'Montserrat', sans-serif;
	font-size:   11px; font-weight: 400; color: #94a3b8;
	display:     flex; align-items: center; gap: 5px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mn-card-addr i, .mn-card-poi-count i { font-size: 9px; flex-shrink: 0; }
.mn-card-poi-count { color: #0891b2; font-weight: 500; }

.mn-card-arrow {
	font-size: 11px; color: #cbd5e1; flex-shrink: 0;
	transition: color .18s, transform .18s;
}
.mn-agency-card:hover .mn-card-arrow { color: #0891b2; transform: translateX(2px); }

/* ══════════════════════════════════════════
   VUE DÉTAIL
   ══════════════════════════════════════════ */
.mn-detail-view { display: flex; flex-direction: column; height: 100%; }
.mn-detail-view[hidden] { display: none; }

.mn-detail-topbar {
	display: flex; align-items: center; justify-content: space-between;
	padding: 12px 14px; border-bottom: 1px solid rgba(15,23,42,.07);
	flex-shrink: 0; gap: 10px;
}
.mn-detail-topbar[hidden] { display: none; }
.mn-back-btn {
	display: flex; align-items: center; gap: 7px;
	font-family: 'Montserrat', sans-serif;
	font-size: 12px; font-weight: 600; color: #0891b2;
	background: #e0f2fe; border: 1px solid rgba(8,145,178,.2);
	border-radius: 8px; padding: 6px 12px; cursor: pointer;
	transition: background .17s, transform .14s; white-space: nowrap;
}
.mn-back-btn:hover { background: rgba(8,145,178,.15); transform: translateX(-2px); }
.mn-back-btn i { font-size: 10px; }

.mn-detail-nav { display: flex; align-items: center; gap: 6px; }
.mn-nav-btn {
	width: 30px; height: 30px; border-radius: 50%;
	border: 1px solid rgba(15,23,42,.14); background: #f8fafc;
	color: #334155; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	font-size: 10px; padding: 0; font-family: inherit;
	transition: background .16s, color .16s, transform .18s;
}
.mn-nav-btn:hover { background: #0891b2; color: #fff; border-color: #0891b2; transform: scale(1.06); }
.mn-nav-counter {
	font-family: 'Montserrat', sans-serif;
	font-size: 11px; font-weight: 500; color: #94a3b8;
	min-width: 36px; text-align: center;
	font-variant-numeric: tabular-nums;
}

.mn-detail-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; }
.mn-detail-scroll::-webkit-scrollbar { width: 4px; }
.mn-detail-scroll::-webkit-scrollbar-thumb { background: rgba(15,23,42,.14); border-radius: 4px; }

/* ── Carrousel ───────────────────────────────────────────── */
.mn-carousel {
	position: relative; width: 100%; aspect-ratio: 16/9;
	overflow: hidden; background: #f1f5f9;
}
.mn-carousel.mn-empty { display: none; }

.mn-car-track {
	display: flex; height: 100%;
	transition: transform .44s cubic-bezier(.25,.46,.45,.94);
	will-change: transform;
}
.mn-car-slide { flex: 0 0 100%; width: 100%; height: 100%; }
.mn-car-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mn-car-arrow {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 34px; height: 34px;
	display: flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,.9);
	backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
	border: 1px solid rgba(255,255,255,.5); border-radius: 50%;
	color: #0f172a; cursor: pointer; font-size: 10px;
	z-index: 5; padding: 0;
	box-shadow: 0 2px 8px rgba(0,0,0,.12);
	transition: background .17s, transform .17s, box-shadow .17s;
}
.mn-car-arrow:hover {
	background: #0891b2; color: #fff;
	transform: translateY(-50%) scale(1.08);
	box-shadow: 0 4px 12px rgba(8,145,178,.28);
}
.mn-car-prev { left: 10px; }
.mn-car-next { right: 10px; }

.mn-car-dots {
	position: absolute; bottom: 9px; left: 50%; transform: translateX(-50%);
	display: flex; gap: 5px; z-index: 5;
}
.mn-car-dot {
	width: 7px; height: 7px; border-radius: 50%;
	background: rgba(255,255,255,.42);
	cursor: pointer; border: none; padding: 0; transition: all .22s;
}
.mn-car-dot.mn-on { background: #fff; width: 22px; border-radius: 3px; }

/* ── Contenu détail ──────────────────────────────────────── */
.mn-detail-content {
	padding: 20px 20px 48px;
	display: flex; flex-direction: column; gap: 16px;
}
.mn-detail-head { display: flex; gap: 13px; align-items: flex-start; }
.mn-detail-icon {
	width: 48px; height: 48px; border-radius: 12px;
	display: flex; align-items: center; justify-content: center;
	font-size: 19px; color: #fff; flex-shrink: 0;
	box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.mn-detail-info { flex: 1; min-width: 0; }
.mn-detail-title {
	font-family:    'Barlow', sans-serif !important;
	font-size:      19px !important; font-weight: 700 !important;
	letter-spacing: -.02em !important; line-height: 1.2 !important;
	color:          #0f172a !important; margin: 0 0 7px !important;
	padding:        0 !important; border: none !important;
	background:     none !important; text-transform: none !important;
}
.mn-detail-addr {
	display: flex; align-items: flex-start; gap: 6px;
	font-family: 'Montserrat', sans-serif;
	font-size: 12px; color: #334155; line-height: 1.45; font-weight: 400;
}
.mn-detail-addr i { margin-top: 2px; font-size: 10px; opacity: .55; flex-shrink: 0; }

.mn-sep { height: 1px; background: rgba(15,23,42,.07); flex-shrink: 0; }

.mn-description {
	font-family: 'Montserrat', sans-serif;
	font-size: 13px; font-weight: 300; line-height: 1.8; color: #334155;
}
.mn-description p       { margin: 0; }
.mn-description p + p   { margin-top: 8px; }
.mn-description ul,
.mn-description ol      { padding-left: 18px; }
.mn-description li + li { margin-top: 4px; }
.mn-description strong  { font-weight: 600; color: #0f172a; }

.mn-contacts { display: flex; flex-direction: column; gap: 6px; }
.mn-contact {
	display: flex; align-items: center; gap: 10px;
	padding: 9px 13px;
	background: #f8fafc; border: 1px solid rgba(15,23,42,.07);
	border-radius: 10px; color: #334155; text-decoration: none;
	font-family: 'Montserrat', sans-serif; font-size: 12.5px; font-weight: 500;
	transition: background .17s, border-color .17s, transform .16s, color .17s;
}
.mn-contact:hover {
	background: #f1f5f9; border-color: rgba(15,23,42,.14);
	color: #0f172a; transform: translateX(2px);
}
.mn-contact i { width: 13px; text-align: center; font-size: 11px; opacity: .5; flex-shrink: 0; }
.mn-contact:hover i { opacity: 1; }
.mn-contact-web { color: #0891b2; background: #e0f2fe; border-color: rgba(8,145,178,.2); font-weight: 600; }
.mn-contact-web:hover { background: rgba(8,145,178,.1); }
.mn-contact-ext { margin-left: auto; font-size: 9px; opacity: .4; }

/* POI chips */
.mn-poi-section-head {
	display: flex; align-items: center; gap: 6px;
	font-family: 'Barlow', sans-serif;
	font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
	color: #94a3b8; margin-bottom: 8px;
}
.mn-poi-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mn-poi-chip {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 4px 10px; border-radius: 18px;
	font-family: 'Montserrat', sans-serif; font-size: 11.5px; font-weight: 500;
	border: 1.5px solid;
	background:   color-mix(in srgb, var(--ch) 9%, transparent);
	border-color: color-mix(in srgb, var(--ch) 22%, transparent);
	color:        color-mix(in srgb, var(--ch) 75%, #0f172a);
	cursor: default; transition: transform .14s;
}
.mn-poi-chip:hover { transform: translateY(-1px); }
.mn-poi-chip i { font-size: 9px; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 860px) {
	.mn-widget { --mn-sidebar: 300px; }
}
@media (max-width: 620px) {
	/* Le shortcode pose "style='--mn-h:...px'" EN LIGNE sur .mn-widget
	   (voir includes/shortcode.php) — un style en ligne l'emporte toujours
	   sur une règle externe, donc "--mn-h:auto" ci-dessous ne suffisait
	   pas à lui seul : .mn-widget restait bloqué à sa hauteur fixe
	   (620px par défaut) avec overflow:hidden, tronquant tout le contenu
	   en dessous quel que soit ce qu'on change à l'intérieur (liste,
	   détail...). Le !important force la vraie propriété "height" à
	   s'appliquer malgré le style en ligne.  */
	.mn-widget { --mn-h: auto; height: auto !important; flex-direction: column; }
	.mn-map-el  { height: var(--mn-hm, 320px); flex: none; }
	/* Plus de plafond de hauteur ni de scroll interne sur mobile, ni pour
	   la liste ni pour le détail (voir plus bas) : tout s'affiche en
	   entier, c'est la page qui défile normalement. Évite d'avoir à
	   deviner une hauteur "suffisante" qui tronque dès qu'il y a plus de
	   sites ou des photos. */
	.mn-sidebar     { width: 100%; border-left: none; border-top: 1px solid rgba(15,23,42,.07); max-height: none; }
	.mn-agency-list { flex: none; overflow-y: visible; }

	/* La largeur du carrousel est bien plus réduite qu'en bureau : un
	   recadrage "cover" y rogne trop la photo (sujet coupé, cadrage qui
	   paraît décentré). On laisse la photo dicter sa propre hauteur pour
	   qu'elle occupe toute la largeur, en entier, sans marge ni recadrage
	   (le cadre fixe 16/9 forçait sinon des bandes vides sur les côtés
	   dès que la photo n'était pas exactement à ce format). */
	.mn-carousel   { aspect-ratio: auto; }
	.mn-car-track  { height: auto; align-items: flex-start; }
	.mn-car-slide  { height: auto; }
	.mn-car-slide img { height: auto; object-fit: initial; }

	/* La vue détail avait son propre scroll interne (héritage du panneau
	   desktop à hauteur fixe), cantonné à 380px — dès que la photo (à
	   présent en hauteur libre) dépassait ce budget à elle seule, elle se
	   retrouvait à défiler indépendamment de la carte juste au-dessus,
	   d'où l'effet visuel de passer "sous" la carte pendant le scroll.
	   Sur mobile, le détail suit maintenant le flux normal de la page :
	   plus de scroll imbriqué, la photo reste toujours entièrement
	   visible en défilant la page. */
	.mn-detail-view   { height: auto; }
	.mn-detail-scroll { flex: none; overflow-y: visible; }
}
@media print { .mn-sidebar { display: none !important; } }