/**
 * Dashboard public Météo-Oisans (Front) — mobile-first.
 *
 * Calqué sur la partie « Voir le site public » de sources/site.html, mais en
 * composant AUTONOME et responsive : tout est scopé sous .mof-dashboard afin de
 * cohabiter sans conflit avec le thème et Elementor. Pas de mise en page 100vh :
 * le composant s'insère dans le flux normal de la page.
 *
 * @package Meteo_Oisans_Front
 */

.mof-dashboard {
	--mof-blue: #005696;
	--mof-bg: #f4f7f9;
	--mof-border: #dddddd;
	--mof-radius: 10px;
	box-sizing: border-box;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color: #2c3e50;
	background: var(--mof-bg);
	padding: 12px;
	border-radius: var(--mof-radius);
	width: 100%;
	/* Largeur du composant élargie (~+25 %) : la barre latérale étant plafonnée
	   (max-width 340px), tout le surplus de largeur profite à la carte. */
	max-width: 1650px;
	margin: 0 auto;
	line-height: 1.45;
}
.mof-dashboard *,
.mof-dashboard *::before,
.mof-dashboard *::after {
	box-sizing: border-box;
}

/* États de chargement / erreur ------------------------------------------- */
.mof-loading,
.mof-message {
	padding: 30px 16px;
	text-align: center;
	color: #5a6b7b;
	font-size: 15px;
}
.mof-message.mof-error {
	color: #a94442;
	background: #fdecea;
	border: 1px solid #f5c6cb;
	border-radius: 8px;
}

/* Timeline des échéances -------------------------------------------------- */
.mof-timeline {
	display: flex;
	gap: 0;
	overflow-x: auto;
	background: #fff;
	border: 1px solid var(--mof-border);
	border-radius: var(--mof-radius);
	margin-bottom: 12px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}
.mof-time-step {
	flex: 1 0 auto;
	min-width: 96px;
	/* Barre des échéances plus fine en hauteur (mobile #8) : padding vertical réduit. */
	padding: 6px 8px;
	text-align: center;
	cursor: pointer;
	border-right: 1px solid #eee;
	font-weight: 700;
	font-size: 13px;
	transition: background 0.15s, color 0.15s;
	white-space: nowrap;
}
.mof-time-step:last-child {
	border-right: 0;
}
.mof-time-step small {
	display: block;
	font-weight: 400;
	font-size: 11px;
	opacity: 0.75;
}
/* Libellés d'échéance : forme LONGUE par défaut (desktop) ; la forme COURTE
   (jour sur 3 lettres, « ap-midi ») n'apparaît que sur smartphone (voir media query). */
.mof-ech-short {
	display: none;
}
/* Point 5 — date « JJ/MM » à côté du jour : un peu plus légère que le nom du jour. */
.mof-ech-date {
	font-weight: 400;
	opacity: 0.8;
	font-size: 0.92em;
}
.mof-time-step:hover {
	/* Spec §2.2 : au survol, l'échéance apparaît en gris foncé. */
	background: #4a5568;
	color: #fff;
}
.mof-time-step.active {
	/* Spec §2.2 : échéance sélectionnée en bleu Météo Oisans (#005696).
	   Placée après :hover (même spécificité) pour rester bleue même au survol. */
	background: var(--mof-blue);
	color: #fff;
}
.mof-time-step.active small {
	opacity: 0.9;
}

/* Barre d'outils carte --------------------------------------------------- */
.mof-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid var(--mof-border);
	border-radius: 8px;
	padding: 8px 10px;
	margin-bottom: 12px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
	font-size: 12px;
}
.mof-alt-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-left: auto;
}
.mof-alt-btn,
.mof-ech-btn {
	padding: 6px 10px;
	border: 1px solid #ccd6df;
	background: #fff;
	color: #556;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	border-radius: 6px;
	transition: 0.15s;
}
.mof-alt-btn:hover,
.mof-ech-btn:hover {
	background: #eef6fd;
	color: var(--mof-blue);
}
.mof-alt-btn.active,
.mof-ech-btn.active {
	background: var(--mof-blue);
	color: #fff;
	border-color: var(--mof-blue);
}

/* Zone principale : carte + colonne latérale ----------------------------- */
.mof-content {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.mof-map-section {
	position: relative;
	display: flex;
	flex-direction: column;
}
.mof-map-outer {
	position: relative;
	border-radius: 12px;
	border: 3px solid #fff;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
	overflow: hidden;
	background: #e5e3df;
	/* Confine les overlays de la carte (boutons de mode, badge de mise à jour…)
	   dans leur propre contexte d'empilement : sans cela, leur z-index élevé les
	   fait passer DEVANT le menu sticky du thème au défilement. */
	isolation: isolate;
}
.mof-map {
	width: 100%;
	height: 62vw;
	min-height: 340px;
	max-height: 460px;
	z-index: 1;
}
/* Point 6 : la phrase d'aide (« Cliquer sur un lieu pour les détails ») n'est plus
   sous la carte mais AU-DESSUS, juste à droite de la date de dernière mise à jour
   (regroupées dans .mof-update-line). */
.mof-map-caption {
	text-align: left;
	color: #7f8c8d;
	font-size: 12px;
	font-style: italic;
}
.mof-update-line {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	min-width: 0;
}

/* Barre AU-DESSUS de la carte (mobile #4/#10) : date de mise à jour (sous la barre
   des échéances) et, en mode risques, le bouton « retour prévisions ». Ces éléments
   ne sont plus posés en overlay sur la carte → cartes épurées. */
.mof-map-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}
/* Date de mise à jour en flux normal (plus un overlay) : conserve l'aspect « badge »
   défini par .mof-update-badge, sans positionnement absolu. */
.mof-update-above {
	display: inline-block;
}
/* La date de mise à jour est rendue en DEUX formes (voir renderUpdateBadge) : longue
   « j F Y à HHhMM » (bureau) et compacte « JJ/MM à HHhMM » (mobile). Par défaut on
   montre la longue ; la media query mobile bascule sur la compacte. */
.mof-upd-short {
	display: none;
}
.mof-upd-full {
	display: inline;
}

/* « Choisir ma commune » / « Choisir une zone » : menus déroulants SOUS la carte, RÉSERVÉS
   AU MOBILE (sur bureau on clique directement les marqueurs/secteurs). Masqués par défaut ;
   affichés en media query. La commune ouvre le détail d'un lieu (prévisions), la zone ouvre
   le détail d'un secteur (risques) — même présentation/emplacement (point 6). */
.mof-commune-wrap,
.mof-secteur-wrap {
	display: none;
	margin-top: 8px;
}
.mof-commune-select,
.mof-secteur-select {
	width: 100%;
	padding: 10px 12px;
	font-size: 15px;
	font-weight: 600;
	color: var(--mof-blue);
	background: #fff;
	border: 1px solid var(--mof-blue);
	border-radius: 8px;
	cursor: pointer;
}

/* Rangée des boutons de mode SOUS la barre d'échéances : utilisée uniquement sur
   smartphone (voir media query). Sur desktop, ces boutons restent en overlay sur la
   carte (.mof-overlay-tr) → cette rangée est masquée. */
.mof-mode-row {
	display: none;
}

/* Légende des risques SOUS la carte (mobile #9/#10) : uniquement les carrés de couleur
   par défaut + un bouton « Afficher la légende » qui déplie le détail des niveaux. */
.mof-risk-legend-below {
	margin-top: 8px;
}
.mof-legend-compact {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.mof-legend-toggle {
	background: #fff;
	border: 1px solid var(--mof-blue);
	color: var(--mof-blue);
	border-radius: 6px;
	padding: 5px 10px;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	transition: 0.15s;
}
.mof-legend-toggle:hover,
.mof-legend-toggle.open {
	background: var(--mof-blue);
	color: #fff;
}
.mof-legend-full {
	margin-top: 8px;
	background: #fff;
	border: 1px solid var(--mof-border);
	border-radius: 8px;
	padding: 8px 10px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
}
.mof-legend-full .mof-legend-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 4px 0;
}
.mof-legend-full .mof-legend-txt {
	font-size: 13px;
	font-weight: 600;
	color: #34495e;
}

/* Overlays sur la carte -------------------------------------------------- */
.mof-overlay {
	position: absolute;
	z-index: 1000;
	pointer-events: auto;
}
.mof-overlay-tr {
	top: 12px;
	right: 12px;
	display: flex;
	/* Boutons de mode CÔTE À CÔTE (mobile #5) : « Afficher les risques » au même niveau
	   que le bouton de bascule, pas empilé dessous. Enroulement autorisé si trop étroit. */
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: flex-end;
	align-items: flex-start;
	max-width: calc(100% - 24px);
}
.mof-overlay-br {
	bottom: 12px;
	right: 12px;
}
.mof-overlay-bl {
	bottom: 12px;
	left: 12px;
}
.mof-overlay-tl {
	top: 12px;
	left: 12px;
	max-width: calc(100% - 24px);
}
.mof-update-badge {
	background: rgba(255, 255, 255, 0.95);
	color: #445;
	padding: 6px 10px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 600;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
	border: 1px solid var(--mof-border);
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mof-update-badge strong {
	color: var(--mof-blue);
	font-weight: 800;
}
.mof-map-btn {
	background: rgba(255, 255, 255, 0.95);
	border: 2px solid var(--mof-blue);
	color: var(--mof-blue);
	border-radius: 8px;
	padding: 8px 14px;
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
	transition: 0.15s;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
}
.mof-map-btn:hover {
	background: var(--mof-blue);
	color: #fff;
}
.mof-confidence {
	background: rgba(255, 255, 255, 0.95);
	color: var(--mof-blue);
	padding: 7px 11px;
	border-radius: 6px;
	font-weight: 700;
	font-size: 13px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	border: 1px solid var(--mof-blue);
}
.mof-download {
	background: linear-gradient(135deg, #f1c40f, #f39c12);
	color: #fff;
	border: 0;
	padding: 8px 14px;
	border-radius: 24px;
	font-weight: 800;
	font-size: 12px;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(243, 156, 18, 0.5);
	text-transform: uppercase;
}
.mof-download:hover {
	filter: brightness(1.06);
}

/* Panneau de filtre d'altitude posé sur la carte (bas-gauche) : fond blanc
   légèrement transparent, titre en gras + boutons d'étage. */
.mof-alt-panel {
	background: rgba(255, 255, 255, 0.82);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 8px;
	padding: 8px 10px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
	max-width: min(340px, calc(100% - 24px));
}
.mof-alt-panel-title {
	font-size: 12px;
	font-weight: 800;
	color: #2c3e50;
	margin-bottom: 6px;
	line-height: 1.25;
}
.mof-alt-panel .mof-alt-filter {
	display: flex;
	/* Les 3 étages tiennent sur UNE seule ligne (mobile #3) : pas d'enroulement,
	   petit espacement, texte compact (voir taille des boutons ci-dessous). */
	flex-wrap: nowrap;
	gap: 4px;
	margin-left: 0;
}
.mof-alt-panel .mof-alt-btn {
	padding: 5px 7px;
	font-size: 10.5px;
	line-height: 1.15;
	white-space: nowrap;
}

/* Légende « conseils de comportement » des risques (#71) : boîte blanche posée
   en bas à gauche de la carte, visible seulement en mode vigilance/risques. */
.mof-risk-legend {
	background: rgba(255, 255, 255, 0.9);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 8px;
	padding: 8px 10px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
	max-width: min(280px, calc(100% - 24px));
}
.mof-legend-title {
	font-size: 12px;
	font-weight: 800;
	color: #2c3e50;
	margin-bottom: 6px;
	line-height: 1.2;
}
.mof-legend-row {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 3px 0;
}
.mof-legend-swatch {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	border-radius: 4px;
	border: 1px solid rgba(0, 0, 0, 0.25);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.mof-legend-txt {
	font-size: 12px;
	font-weight: 600;
	color: #34495e;
	line-height: 1.2;
}

/* Colonne latérale : vigilance + bulletin -------------------------------- */
.mof-sidebar {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.mof-vigi-box {
	border-radius: 8px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	padding: 18px;
	background: #fff;
	cursor: default;
}
.mof-vigi-title {
	font-size: 20px;
	font-weight: 900;
	letter-spacing: 1px;
	margin: 0 0 12px;
	text-align: center;
	border-bottom: 2px solid rgba(0, 0, 0, 0.12);
	padding-bottom: 8px;
}
.mof-vigi-box p {
	margin: 0;
}
.mof-bulletin {
	background: #fff;
	padding: 16px 18px;
	border-left: 6px solid var(--mof-blue);
	border-radius: 6px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
	font-size: 14px;
}
.mof-bulletin h4 {
	color: var(--mof-blue);
	margin: 0 0 8px;
	font-size: 15px;
}
.mof-bulletin-body {
	line-height: 1.55;
}
/* Bulletin de prévision : bloc blanc placé SOUS la carte (#51 ; auparavant en
   bandeau au-dessus). */
.mof-bulletin-banner {
	background: #fff;
	border: 1px solid var(--mof-border);
	border-left: 6px solid var(--mof-blue);
	border-radius: 8px;
	padding: 10px 14px;
	margin-top: 10px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
	font-size: 14px;
	/* Plus de hauteur plafonnée ni de barre de défilement (mobile #7) : le bulletin
	   s'affiche en entier, la boîte s'adapte à la taille du texte. */
}
.mof-bulletin-banner .mof-bulletin-body {
	line-height: 1.5;
}
.mof-info-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 10px;
	font-size: 13px;
}
.mof-chip {
	background: #eef6fd;
	color: var(--mof-blue);
	border: 1px solid #d3e6f6;
	border-radius: 16px;
	padding: 4px 12px;
	font-weight: 700;
}

/* Marqueurs (divIcon Leaflet) -------------------------------------------- */
/* Point 2 — le CENTRE de l'icône coïncide EXACTEMENT avec la coordonnée Lat/Long.
   La boîte divIcon est ancrée sur le point (iconSize null + iconAnchor [0,0]) : le
   conteneur .mof-marker-inner est un repère 0×0 posé sur la coordonnée, et l'icône
   comme le nom sont positionnés en ABSOLU par rapport à ce point. L'icône est centrée
   via translate(-50%,-50%) → position indépendante de sa TAILLE (identique mobile/PC,
   fin du décalage vertical qui variait avec la taille responsive du picto). */
.mof-marker-inner {
	position: relative;
	cursor: pointer;
}
.mof-marker-icon {
	position: absolute;
	left: 0;
	top: 0;
	transform: translate(-50%, -50%); /* centre l'icône sur la coordonnée */
	display: flex;
	align-items: center;
	justify-content: center;
}
.mof-marker-picto {
	width: 34px;
	height: 34px;
	display: block;
	/* Halo net SANS décalage directionnel : une ombre portée décalée (0 1px) donnait
	   au picto l'aspect d'être « affiché deux fois, l'un sur l'autre ». */
	filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.45));
}
.mof-marker-picto:hover {
	transform: scale(1.12);
}
.mof-marker-emoji {
	font-size: 26px;
	line-height: 1;
	filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.45));
}
.mof-marker-name {
	/* Point 2 — nom positionné en ABSOLU sous la coordonnée (le conteneur est 0×0 sur le
	   point) : centré horizontalement via translate(-50%,0) et posé ~13px sous le point,
	   pour dégager l'icône centrée au-dessus. Le décalage utilisateur (nameDx/nameDy) est
	   appliqué en ligne : transform:translate(calc(-50% + dx), dy). */
	position: absolute;
	left: 0;
	top: 13px;
	transform: translate(-50%, 0);
	font-size: 9px;
	color: #111;
	font-weight: 400;
	text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.9), 1px -1px 0 rgba(255, 255, 255, 0.9),
		-1px 1px 0 rgba(255, 255, 255, 0.9), 1px 1px 0 rgba(255, 255, 255, 0.9);
	/* Point 1 : plus de troncature « … » (max-width/overflow retirés) → les noms longs
	   s'affichent EN ENTIER. Chaque ligne reste sur une ligne (nowrap) ; l'utilisateur
	   force un retour à la ligne en insérant « // » dans le nom du lieu (rendu <br> côté
	   carte), pour les libellés longs ou proches d'un bord (ex. « Grand Pic de//Belledonne »). */
	white-space: nowrap;
	line-height: 1.1;
	text-align: center;
}

/* Tooltips interactifs --------------------------------------------------- */
.mof-dashboard .leaflet-tooltip.mof-tt {
	border-radius: 8px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
	padding: 0;
	border: 1px solid #ccc;
	font-family: inherit;
	overflow: hidden;
	background: #fff;
	/* CAUSE RACINE du « le clic n'ouvre pas le détail » (mobile #11) : ce tooltip forçait
	   pointer-events:auto → une fois ouvert (au survol/tap), il se posait par-dessus le
	   marqueur/secteur et CAPTAIT le tap, empêchant le clic d'ouvrir le détail. Le tooltip
	   est purement informatif → pointer-events:none : le tap le TRAVERSE et atteint le
	   marqueur/polygone → détail ouvert au 1er tap. */
	pointer-events: none !important;
}
.mof-tt-content {
	width: 240px;
	cursor: pointer;
}
.mof-tt-header {
	padding: 9px 10px;
	font-size: 13px;
	font-weight: 700;
	color: var(--mof-blue);
	border-bottom: 1px solid #eee;
	text-transform: uppercase;
	text-align: center;
}
.mof-tt-header span {
	font-weight: 400;
	font-size: 10px;
	color: #888;
}
.mof-tt-body {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
}
.mof-tt-body .mof-tt-picto {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
}
.mof-tt-meta {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-size: 11px;
}
.mof-tt-label {
	font-weight: 700;
	color: #333;
}
.mof-gauge-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
}
.mof-gauge {
	height: 6px;
	border-radius: 3px;
	position: relative;
	margin-top: 3px;
}
.mof-gauge-cursor {
	position: absolute;
	top: -3px;
	width: 4px;
	height: 12px;
	background: #222;
	border-radius: 2px;
	transform: translateX(-50%);
	box-shadow: 0 0 2px #fff;
}
.mof-tt-cta {
	background: var(--mof-bg);
	color: var(--mof-blue);
	text-align: center;
	padding: 8px;
	font-size: 11px;
	font-weight: 700;
	border-top: 1px solid #eee;
}

/* Polygones de vigilance ------------------------------------------------- */
.mof-dashboard .leaflet-interactive.mof-vigi-polygon {
	cursor: pointer;
}
/* Point 8 (#185) — le SURVOL (remplissage plus vif + contour renforcé) est piloté en
   JavaScript (renderVigi → setStyle sur mouseover/mouseout), car la carte vectorielle est
   rendue en CANVAS (preferCanvas:true) : il n'existe aucun élément SVG par secteur, donc
   une règle CSS `.mof-vigi-polygon:hover` ne s'appliquerait à RIEN (cause du « aucun
   changement au survol »). Voir dashboard.js. */
.mof-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}
.mof-legend-item {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
}
.mof-legend-swatch {
	width: 16px;
	height: 16px;
	border-radius: 4px;
	border: 1px solid rgba(0, 0, 0, 0.15);
}
/* Bascule Aujourd'hui/Demain de la carte des risques (#114) : même taille et même
   forme que la timeline des échéances de la carte des prévisions (.mof-time-step),
   pour une cohérence visuelle entre les 2 pages, et centrée au-dessus de la carte. */
.mof-ech-toggle {
	display: flex;
	gap: 0;
	justify-content: center;
	width: -moz-fit-content;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto 12px;
	background: #fff;
	border: 1px solid var(--mof-border);
	border-radius: var(--mof-radius);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
	overflow: hidden;
}
/* Boutons calqués sur .mof-time-step (segments joints, même métrique). */
.mof-ech-toggle .mof-ech-btn {
	flex: 1 0 auto;
	min-width: 96px;
	/* Aligné sur .mof-time-step : barre plus fine (mobile #8). */
	padding: 6px 8px;
	text-align: center;
	border: 0;
	border-right: 1px solid #eee;
	border-radius: 0;
	background: #fff;
	color: inherit;
	font-weight: 700;
	font-size: 13px;
	transition: background 0.15s, color 0.15s;
	white-space: nowrap;
}
.mof-ech-toggle .mof-ech-btn:last-child {
	border-right: 0;
}
.mof-ech-toggle .mof-ech-btn:hover {
	background: #4a5568;
	color: #fff;
}
.mof-ech-toggle .mof-ech-btn.active {
	background: var(--mof-blue);
	color: #fff;
}

/* Modale de détail ------------------------------------------------------- */
.mof-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
	z-index: 99999;
	display: none;
	justify-content: center;
	align-items: center;
	padding: 16px;
}
.mof-modal-overlay.open {
	display: flex;
}
.mof-modal {
	background: #fff;
	width: 100%;
	max-width: 900px;
	max-height: 90vh;
	border-radius: 12px;
	overflow-y: auto;
	position: relative;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
	padding: 22px;
}
.mof-modal-close {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 5;
	/* Point 3 : bouton PARFAITEMENT ROND. Les styles de bouton du thème (padding,
	   min-width, line-height) déformaient le cercle en ovale → on neutralise tout et on
	   fige des dimensions carrées (width == height, padding 0, box-sizing border-box).
	   !important pour l'emporter sur les règles génériques « button » du thème actif. */
	box-sizing: border-box !important;
	width: 36px !important;
	height: 36px !important;
	min-width: 36px !important;
	max-width: 36px !important;
	padding: 0 !important;
	margin: 0 !important;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	color: #333;
	font-weight: 700;
	background: #fff;
	border: 1px solid var(--mof-border);
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
	-webkit-appearance: none;
	appearance: none;
}
.mof-modal-close:hover {
	color: #000;
	background: var(--mof-bg);
	border-color: var(--mof-blue);
}
.mof-modal h3 {
	color: var(--mof-blue);
	text-align: center;
	/* Marges latérales pour que le titre centré ne passe pas sous la croix. */
	margin: 0 0 4px;
	padding: 0 44px;
	font-size: 22px;
}
.mof-modal .mof-modal-sub {
	text-align: center;
	color: #777;
	font-size: 12px;
	margin-bottom: 14px;
}
/* Boutons d'export PNG réseaux sociaux (détail d'un lieu + cartes) --------- */
.mof-export-actions {
	text-align: center;
	margin-top: 16px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	justify-content: center;
}
/* Barre d'export sous la carte (vue prévisions / risques). */
.mof-export-bar {
	margin-top: 6px;
}
.mof-export-btn {
	display: inline-block;
	padding: 9px 18px;
	background: var(--mof-blue);
	color: #fff;
	border-radius: var(--mof-radius);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: opacity 0.15s ease;
}
.mof-export-btn::before {
	content: "\2B07\FE0F"; /* ⬇️ */
	margin-right: 7px;
}
.mof-export-btn:hover {
	opacity: 0.88;
	color: #fff;
}
/* Libellé complet « Télécharger <sujet> <format> (png) », remplacé sur smartphone par
   le libellé court « Télécharger <format> » (même seuil que les autres règles mobiles). */
.mof-export-btn .mof-export-short {
	display: none;
}
@media (max-width: 679px) {
	.mof-export-btn .mof-export-full {
		display: none;
	}
	.mof-export-btn .mof-export-short {
		display: inline;
	}
}
/* Animation de génération : le bouton affiche un spinner pendant le rendu du PNG. */
.mof-export-btn.is-loading {
	position: relative;
	color: transparent !important;
	pointer-events: none;
	opacity: 0.85;
}
.mof-export-btn.is-loading::before {
	display: none; /* masque l'icône ⬇️ pendant le chargement. */
}
.mof-export-btn.is-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	border: 3px solid rgba( 255, 255, 255, 0.45 );
	border-top-color: #fff;
	border-radius: 50%;
	animation: mof-export-spin 0.7s linear infinite;
}
@keyframes mof-export-spin {
	to { transform: rotate( 360deg ); }
}
.mof-modal-table-wrap {
	overflow-x: auto;
}
.mof-modal table {
	width: 100%;
	border-collapse: collapse;
	min-width: 520px;
}
.mof-modal th,
.mof-modal td {
	border: 1px solid #eee;
	padding: 8px 6px;
	text-align: center;
	font-size: 12px;
}
.mof-modal th {
	background: #f4f7f9;
	color: #444;
}
.mof-modal td.mof-row-head,
.mof-modal th.mof-row-head {
	background: #f8f9fa;
	text-align: left;
	font-weight: 700;
	white-space: nowrap;
}
.mof-modal td img {
	width: 38px;
	height: 38px;
}

/* Tableau du détail par commune (#52) : colonnes d'échéance à largeur FIXE et
   ÉGALES → les pictos (centrés) et les points des courbes tombent au milieu de
   chaque colonne. La 1re colonne (intitulés) a une largeur fixe. */
.mof-detail-table {
	table-layout: fixed;
}
/* Ligne « Indice de confiance » du détail (point 4) : affichée en DERNIÈRE ligne du
   tableau, sur mobile ET sur PC. (Sur PC, l'indice reste EN PLUS posé en overlay bas-droite
   de la carte — décision utilisateur.) */
.mof-detail-confidence {
	display: table-row;
}
.mof-detail-table .mof-row-head {
	width: 104px;
}
/* « Indice de confiance » est l'intitulé le plus long : on l'autorise à passer sur
   2 lignes dans sa colonne (les autres intitulés, plus courts, gardent le nowrap de
   .mof-row-head) → il ne déborde plus du cadre du tableau. */
.mof-detail-table .mof-detail-confidence td.mof-row-head {
	white-space: normal;
	line-height: 1.15;
}
/* Picto « Temps prévu » centré dans sa colonne (le média est en display:block). */
.mof-detail-table td img {
	display: inline-block;
	margin: 0 auto;
}
/* #218 — « Temps prévu » : picto 52 px (PC ET mobile, !important pour primer sur les
   tailles génériques des images de la modale et des thèmes) + libellé centré dessous,
   comme sur l'export « fiche site » (2 lignes si expression longue). */
.mof-detail-weather {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
}
.mof-modal .mof-detail-table img.mof-detail-picto {
	display: block;
	width: 52px !important;
	height: 52px !important;
	max-width: none;
	margin: 0 auto;
}
.mof-detail-emoji {
	font-size: 40px;
	line-height: 52px;
}
.mof-detail-weather-label {
	font-size: 11px;
	font-weight: 600;
	line-height: 1.2;
	color: #333;
	overflow-wrap: anywhere;
}

/* Courbes d'évolution T° / iso 0 °C — INTÉGRÉES au tableau détail (#52) :
   chaque courbe est une ligne du tableau (cellule `colspan`) dont les points
   sont centrés sur les colonnes d'échéance. */
.mof-chart-rowhead {
	white-space: normal;      /* titre long autorisé à passer à la ligne */
	vertical-align: middle;
}
.mof-chart-cell {
	padding: 4px 2px !important;
	vertical-align: middle;
}
.mof-chart-svg {
	width: 100%;
	height: auto;
	display: block;
	overflow: visible;
}
/* Libellé (ressenti/altitude) au-dessus du point ; valeur (°C) en dessous.
   #128 — écriture plus fine et plus petite (le 800 « faisait trop grossier »). */
.mof-chart-note {
	font-size: 8.5px;
	font-weight: 500;
}
.mof-chart-sub {
	font-size: 9.5px;
	fill: #334155;
	font-weight: 700;
}
/* Badge de température (J / J+1) : °C noir dans un rond blanc à fin contour noir. */
.mof-chart-badge {
	font-size: 10px;
	font-weight: 800;
	fill: #111;
}
.mof-chart-empty {
	font-size: 12px;
	color: #7f8c8d;
	padding: 10px 4px;
	text-align: center;
}
.mof-vigi-banner {
	padding: 12px 14px;
	border-radius: 10px;
	font-weight: 700;
	margin-bottom: 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

/* ════ Lot B — hub 3 modes (temps / ressenti / vigilance) ════════════════ */

/* Boutons de bascule de mode (overlay haut-droite) : .mof-map-btn existant. */
.mof-vigi-cta {
	font-weight: 800;
}

/* Marqueur thermomètre (mode ressenti) */
.mof-thermo-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.mof-thermo {
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}
.mof-thermo-val {
	font-size: 10px;
	font-weight: 800;
	color: #222;
	line-height: 1;
	margin-top: -2px;
	text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}

/* Pastille de température (#52) : °C noir dans un rond blanc à fin contour noir,
   posée sur la carte en mode ressenti là où une température est disponible
   (J / J+1) — même présentation que le badge °C de la fenêtre détail. */
.mof-temp-pastille {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 30px;
	padding: 0 5px;
	background: #fff;
	border: 1px solid #111;
	border-radius: 999px;
	color: #111;
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	white-space: nowrap;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* Ovale de température (#121) : °C sur fond de la couleur choisie côté back (repli
   dégradé), texte contrasté (inline). Remplace partout l'ancien « rond noir sur fond
   blanc » : carte (mode ressenti), tooltips, fenêtre détail. Couleur de fond posée en
   style inline. */
.mof-temp-oval {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 22px;
	padding: 0 8px;
	border: 1px solid rgba(0, 0, 0, 0.25);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	white-space: nowrap;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
/* Variante « grande » : élément central d'un tooltip (T° = info la plus grosse). */
.mof-temp-oval-lg {
	min-width: 56px;
	height: 34px;
	padding: 0 14px;
	font-size: 20px;
	border-width: 2px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
/* Goutte du risque de pluie agrandie dans les tooltips (#113). */
.mof-tt-drop {
	font-size: 17px;
	line-height: 1;
}

/* Tooltip lieu (spec §4.1) — variantes temps / ressenti */
.mof-tt-strong {
	text-align: center;
	font-weight: 700;
	font-size: 12px;
	color: #333;
	padding: 6px 10px 0;
}
.mof-tt-central {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 5px 10px;
}
.mof-tt-foot {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	padding: 6px 10px 8px;
	font-size: 11px;
	flex-wrap: wrap;
}
.mof-tt-item {
	display: flex;
	align-items: center;
	gap: 4px;
}
.mof-tt-ressenti {
	font-weight: 700;
}

/* Tooltip secteur de vigilance (spec §3.2) */
.mof-vt {
	padding: 8px 10px;
	border-radius: 6px;
	min-width: 150px;
	max-width: 220px;
}
.mof-vt-name {
	font-weight: 800;
	margin-bottom: 4px;
}
.mof-vt-line {
	font-size: 12px;
	line-height: 1.35;
}
.mof-vt-cta {
	font-style: italic;
	font-size: 11px;
	opacity: 0.9;
	margin-top: 5px;
}

/* Pictos de phénomènes posés au centre des secteurs. Le marqueur est ancré en
   (0,0) sur le centroïde ; on recentre le bloc d'icônes SUR ce point via
   translate(-50%,-50%) (taille du contenu variable → centrage fiable). */
/* Les pictos de phénomènes posés au CENTRE des secteurs ne doivent PAS intercepter le
   tap (mobile #11) : sans cela, toucher le centre d'un secteur (là où est l'icône) ne
   fait rien — l'icône, non interactive, avale le clic sans le transmettre au polygone
   (canvas) sous-jacent, d'où l'obligation de « taper à plusieurs endroits ». En
   pointer-events:none, le tap traverse jusqu'au polygone → détail ouvert du 1er coup. */
.mof-phen-icon,
.mof-phen-icon span,
.mof-phen-img {
	pointer-events: none;
}
.mof-phen-icon span {
	display: inline-block;
	transform: translate(-50%, -50%);
	font-size: 19px;   /* #70 : icônes de risque légèrement agrandies */
	line-height: 1;
	white-space: nowrap;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
}
/* Icône image d'un phénomène de risque (repli emoji si absente/erreur) */
.mof-phen-img {
	display: inline-block;
	vertical-align: middle;
	object-fit: contain;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
}

/* Bulletin de vigilance permanent, structuré (sidebar) — boîte blanche */
.mof-vb-head {
	display: flex;
	flex-direction: column;
	gap: 2px;
	border-bottom: 2px solid rgba(0, 0, 0, 0.14);
	padding-bottom: 8px;
	margin-bottom: 10px;
}
.mof-vb-title {
	font-size: 20px;
	font-weight: 900;
	letter-spacing: 1px;
	color: #1a1a1a;
}
.mof-vb-stamp {
	font-size: 11px;
	font-weight: 400;
	color: #6a7683;
}
.mof-vb-risks {
	background: #eef3f7;
	border: 1px solid #dbe4ec;
	border-radius: 6px;
	padding: 8px 10px;
	font-size: 13px;
	margin-bottom: 10px;
}
.mof-vb-phen {
	border: 2px solid #ccc;
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 8px;
}
.mof-vb-phen-title {
	padding: 7px 10px;
	font-weight: 800;
	font-size: 13px;
	text-decoration: underline;
}
.mof-vb-phen-body {
	padding: 9px 11px;
	font-size: 15px;
	line-height: 1.5;
	color: #2c3e50;
}
.mof-vb-text {
	font-size: 15px;
	line-height: 1.55;
	margin-top: 6px;
	color: #2c3e50;
}

/* Modale détail secteur : blocs par phénomène */
.mof-vd-phen {
	border: 2px solid #ccc;
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 8px;
}
.mof-vd-phen-title {
	padding: 8px 12px;
	font-weight: 800;
	font-size: 14px;
}
.mof-vd-phen-body {
	padding: 11px 13px;
	font-size: 16px;
	line-height: 1.55;
	color: #2c3e50;
}
.mof-vd-none {
	margin: 10px 0;
	color: #5a6b7b;
}
.mof-vd-bulletin {
	margin-top: 12px;
	font-size: 16px;
	line-height: 1.6;
	color: #2c3e50;
}

/* Breakpoints ------------------------------------------------------------ */
/* Sur très petit écran, la carte au zoom fixe est dense : on masque les noms
   sous les pictos (toujours accessibles au tap via le tooltip). */
@media (max-width: 679px) {
	/* Noms sur mobile (points 3/4) : masqués par défaut, affichés UNIQUEMENT pour les lieux
	   dont la coche « Afficher le nom (mobile) » est active (classe mof-name-mob, back v16). */
	.mof-dashboard .mof-marker-name:not(.mof-name-mob) {
		display: none;
	}
	/* Date de mise à jour AU-DESSUS de la carte : SANS cadre (juste le texte) et date
	   au format compact « JJ/MM à HHhMM ». On retire fond, bordure, ombre et rembourrage
	   du badge, et on bascule la forme longue → compacte. */
	.mof-dashboard .mof-update-badge {
		background: none;
		border: none;
		box-shadow: none;
		padding: 0;
		font-size: 12px;
		max-width: 100%;
	}
	.mof-dashboard .mof-upd-full {
		display: none;
	}
	.mof-dashboard .mof-upd-short {
		display: inline;
	}
	/* « Choisir ma commune » : affiché sous la carte sur smartphone. */
	.mof-dashboard .mof-commune-wrap,
	.mof-dashboard .mof-secteur-wrap {
		display: block;
	}
	/* Compacité mobile : viser l'essentiel visible sans scroll (spec §1). */
	.mof-dashboard {
		/* Point 7 : on remet une TOUTE PETITE bordure gauche/droite (8px) — la carte ne
		   colle plus au bord de l'écran. Le cadrage de la carte garde une marge interne
		   (padX = 18px, voir makeMap().fitT) pour que les pictos des lieux les plus à
		   l'ouest/est ne soient pas coupés aux extrémités. */
		padding: 8px 8px;
	}
	.mof-timeline,
	.mof-toolbar {
		margin-bottom: 8px;
	}
	/* Échéances compactes (smartphone) : jour de la semaine sur 3 lettres + « APM »
	   au lieu de « Aujourd'hui / Demain / après-midi », et jour + moment sur UNE seule
	   ligne → barre des échéances plus basse. */
	.mof-ech-full {
		display: none;
	}
	.mof-ech-short {
		display: inline;
	}
	.mof-timeline .mof-time-step small {
		display: inline;
		margin-left: 4px;
		font-size: inherit;
		opacity: 0.85;
	}
	/* (L'indice de confiance dans le détail est désormais affiché mobile ET PC — voir la
	   règle .mof-detail-confidence de base ; plus de bascule spécifique au smartphone.) */
	/* Boutons de mode (« Températures/Prévisions » + « Afficher les risques ») déplacés
	   SOUS la barre d'échéances sur smartphone : la rangée s'affiche et l'overlay posé
	   sur la carte est masqué. Rangée vide (mode vigilance) → repliée. */
	.mof-mode-row {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		justify-content: center;
		margin-bottom: 8px;
	}
	.mof-mode-row:empty {
		display: none;
	}
	.mof-overlay-tr {
		display: none;
	}
	.mof-map {
		height: 54vw;
		/* Plancher mobile abaissé 260 → 210 px : quand la hauteur calculée par le
		   rapport de l'emprise (JS) est plus petite, ce plancher forçait le conteneur
		   plus haut → Leaflet centrait l'emprise → espace vide en haut/bas. Réduire le
		   plancher supprime cet espace (carte plus compacte) sans rogner les lieux. */
		min-height: 210px;
	}
	.mof-map-btn {
		padding: 6px 9px;
		font-size: 11px;
	}
	/* Pictos de temps et températures ENCORE réduits sur la carte (mobile). Les styles
	   inline imposent 34/30px → !important pour ne rétrécir QUE sur smartphone (desktop
	   inchangé). */
	.mof-dashboard .mof-marker-picto {
		width: 20px !important;
		height: 20px !important;
	}
	.mof-dashboard .mof-marker-emoji {
		font-size: 16px !important;
	}
	/* Ovale de température posé sur les marqueurs (mode ressenti, J/J+1) : réduit —
	   scopé aux marqueurs pour ne pas toucher les tooltips ni la fenêtre détail. */
	.mof-dashboard .mof-marker-custom .mof-temp-oval {
		min-width: 24px;
		height: 17px;
		padding: 0 5px;
		font-size: 10px;
	}
	/* Thermomètre coloré posé sur les marqueurs (mode ressenti, dès J+2) : réduit
	   (inline 30px → CSS gagne sur l'attribut de dimension du SVG). */
	.mof-dashboard .mof-thermo-wrap .mof-thermo {
		width: 22px;
		height: 22px;
	}
	.mof-bulletin-banner {
		padding: 8px 12px;
		font-size: 13px;
	}
	.mof-vigi-box {
		padding: 14px;
	}
	/* Indice de confiance masqué sur smartphone : le filtre d'altitude occupe désormais
	   toute la largeur en bas de la carte (mobile #3) et le chevaucherait ; on épure la
	   carte (l'indice reste affiché sur écran large). !important pour battre le
	   display:block posé en ligne par renderPrev. */
	.mof-dashboard .mof-confidence {
		display: none !important;
	}
	/* Panneau de filtre compact sur petite carte (3 étages sur une ligne, mobile #3). */
	/* Filtre d'altitude SANS cadre blanc sur mobile (point 1) : plus de fond/bordure/ombre,
	   les 3 boutons flottent directement sur la carte, espacement resserré entre eux. */
	.mof-alt-panel {
		background: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		border: none;
		box-shadow: none;
		padding: 0;
		max-width: calc(100% - 16px);
	}
	.mof-alt-panel .mof-alt-filter {
		gap: 3px;
	}
	.mof-alt-panel .mof-alt-btn {
		padding: 4px 6px;
		font-size: 10px;
	}
	/* #218 (retour recette) — fenêtre « détail par lieu » sur smartphone : picto 52 → 40 px
	   et colonnes d'échéance d'au moins 64 px (--mof-nech posé par openLieuDetail) → le
	   picto tient dans sa colonne (centré) et les libellés ne coupent plus les mots ; le
	   tableau défile horizontalement (comme avant). Marge latérale des cellules réduite. */
	.mof-modal .mof-detail-table {
		min-width: calc(104px + var(--mof-nech, 7) * 64px);
	}
	.mof-modal .mof-detail-table td {
		padding-left: 3px;
		padding-right: 3px;
	}
	.mof-modal .mof-detail-table img.mof-detail-picto {
		width: 40px !important;
		height: 40px !important;
	}
	.mof-dashboard .mof-detail-emoji {
		font-size: 31px;
		line-height: 40px;
	}
	.mof-dashboard .mof-detail-weather-label {
		font-size: 10.5px;
		overflow-wrap: normal;
	}
	/* Point 2 : dans la fenêtre « détail par lieu », sur smartphone, on grossit un peu le
	   TRAIT des courbes Température/Isotherme 0 et le TEXTE (mots du ressenti + altitude de
	   l'iso 0°). Le SVG est réduit à l'écran → ces tailles (en unités du viewBox) le
	   compensent. Desktop inchangé (hors media query). */
	.mof-dashboard .mof-chart-note {
		font-size: 11px;
	}
	.mof-dashboard .mof-chart-sub {
		font-size: 12px;
	}
	.mof-dashboard .mof-chart-badge {
		font-size: 12.5px;
	}
	.mof-dashboard .mof-chart-line {
		stroke-width: 2.4px;
	}
}

@media (min-width: 680px) {
	.mof-map {
		height: 48vw;
		max-height: 520px;
	}
	/* Noms sur PC (points 3/4) : affichés UNIQUEMENT pour les lieux dont la coche
	   « Afficher le nom (PC) » est active (classe mof-name-desk, back v10). */
	.mof-dashboard .mof-marker-name:not(.mof-name-desk) {
		display: none;
	}
	.mof-time-step,
	.mof-ech-toggle .mof-ech-btn {
		font-size: 14px;
	}
}

@media (min-width: 1024px) {
	.mof-content {
		flex-direction: row;
		align-items: stretch;
	}
	.mof-map-section {
		flex: 3;
	}
	/* Hauteur inchangée : l'agrandissement demandé porte sur la LARGEUR (cf.
	   .mof-dashboard max-width), pas la hauteur. */
	.mof-map {
		height: 600px;
		min-height: 540px;
		max-height: none;
	}
	.mof-sidebar {
		flex: 1;
		min-width: 260px;
		max-width: 340px;
	}
	/* #131 — Thermomètres de la carte « ressenti » agrandis sur Ordinateur
	   (uniquement les marqueurs de carte, via .mof-thermo-wrap ; les
	   thermomètres des tooltips gardent leur taille inline). */
	.mof-thermo-wrap .mof-thermo {
		width: 44px;
		height: 44px;
	}
}

/* Pleine largeur (shortcode full="1") : lève le plafond de largeur et agrandit
   la carte pour une page Elementor pleine largeur (décision 2026-08-04). */
.mof-dashboard.mof-full {
	max-width: none;
}
/* En dessous du bureau (mobile + tablette), « full » doit AUSSI aller BORD À BORD :
   le débordement pleine largeur n'existait qu'en ≥1024px, donc sur mobile le contenu
   restait dans le conteneur Elementor (marges gauche/droite résiduelles). On sort du
   conteneur via un débordement centré 100vw et on supprime les marges/paddings latéraux
   + les coins arrondis. ⚠️ Même limite qu'au-dessus : un ancêtre en `overflow-x:hidden`
   rognerait le débord (lever alors la « content width » côté Elementor/thème). */
@media (max-width: 1023.98px) {
	.mof-dashboard.mof-full {
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		padding-left: 0;
		padding-right: 0;
		border-radius: 0;
	}
}
@media (min-width: 1024px) {
	/* « full » DOIT occuper toute la largeur — même à l'intérieur d'un conteneur
	   Elementor/thème plafonné par sa « content width » (souvent ~1200px). Comme
	   on ne peut pas dépasser le max-width d'un parent, on « sort » du parent avec
	   des marges négatives centrées sur la fenêtre, borné à 1700px. Aucun
	   `transform` (sinon la modale `position:fixed` serait cadrée sur le composant
	   au lieu de la fenêtre). ⚠️ Si un ancêtre a `overflow-x:hidden`, le débord est
	   rogné → il faut alors lever la « content width » côté Elementor/thème. */
	.mof-dashboard.mof-full {
		width: min(calc(100vw - 24px), 1700px);
		margin-left: calc(50% - min(calc(50vw - 12px), 850px));
		margin-right: 0;
	}
	.mof-full .mof-map-section {
		flex: 4;
	}
	.mof-full .mof-map {
		height: 72vh;
		min-height: 600px;
		max-height: 900px;
	}
	.mof-full .mof-sidebar {
		max-width: 400px;
	}
}

/* Masque les contrôles Leaflet non désirés (zoom, attribution étendue) */
.mof-dashboard .leaflet-control-zoom {
	display: none;
}
.mof-dashboard .leaflet-control-attribution {
	font-size: 10px;
	background: rgba(255, 255, 255, 0.7);
}