/**
 * Styles publics du module Suivi pastoral.
 * Lisibilité prioritaire : fort contraste (usage en extérieur, plein soleil),
 * cibles tactiles larges, mobile-first.
 */

.isopast-public {
	--isopast-vert: #2f6b1f;
	--isopast-vert-fonce: #1f4a14;
	--isopast-alerte: #b3541e;
	--isopast-alerte-bg: #fff3e6;
	--isopast-texte: #1a1a1a;
	/* Couleurs de statut (cf. légende) */
	--isopast-statut-alpage: #c0392b;
	--isopast-statut-deplacement: #2e8b57;
	--isopast-statut-autre: #8a8a8a;
	/* Décalage à absorber au-dessus de la barre = padding haut de la zone de
	   contenu du thème. Si un espace subsiste, augmenter cette valeur ; si la
	   barre passe sous la barre d'admin WordPress, la diminuer. */
	--isopast-decalage-haut: 30px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--isopast-texte);
	max-width: 900px;
	margin: 0 auto;
}

.isopast-public *,
.isopast-public *::before,
.isopast-public *::after {
	box-sizing: border-box;
}

/* Barre supérieure pleine largeur (full-bleed) */
.isopast-barre-haut {
	width: 100vw;
	position: relative;
	left: 50%;
	margin-left: -50vw;
	/* Remonte la barre pour coller au haut de la zone de contenu. */
	margin-top: calc(-1 * var(--isopast-decalage-haut));
	box-sizing: border-box;
	background: var(--isopast-vert);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 10px 24px;
	margin-bottom: 14px;
}

.isopast-logos {
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
}

.isopast-logo {
	height: 42px;
	width: auto;
	display: block;
}

/* Sélecteur de langue (drapeaux) */
.isopast-langues {
	display: flex;
	align-items: center;
	gap: 10px;
}

.isopast-langue {
	display: block;
	line-height: 0;
	border-radius: 4px;
	overflow: hidden;
	border: 2px solid transparent;
	opacity: 0.65;
	transition: opacity 0.15s, border-color 0.15s;
}

.isopast-langue:hover,
.isopast-langue:focus {
	opacity: 1;
}

.isopast-langue.est-actif {
	opacity: 1;
	border-color: #fff;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.isopast-drapeau {
	width: 34px;
	height: auto;
	display: block;
}

@media (max-width: 600px) {
	.isopast-barre-haut {
		padding: 8px 14px;
		gap: 10px;
	}
	.isopast-logo {
		height: 30px;
	}
	.isopast-logos {
		gap: 14px;
	}
	.isopast-drapeau {
		width: 30px;
	}
}

/* Barre d'informations compacte (tablette/desktop, ≥768px, cf. media query
   plus bas pour l'activation). Reprend en ligne normale ce que les
   contrôles mobiles flottants font en survol sur petit écran. */
.isopast-barre-infos {
	display: none;
}

.isopast-badge-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	min-height: 40px;
	border: 2px solid var(--isopast-vert);
	border-radius: 999px;
	background: #fff;
	color: var(--isopast-vert-fonce);
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
}

.isopast-badge-btn:hover,
.isopast-badge-btn:focus-visible {
	background: var(--isopast-vert);
	color: #fff;
}

.isopast-badge-verif-desktop {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	min-height: 40px;
	border-radius: 999px;
	background: #eef6ee;
	border: 1px solid #cfe3cf;
	color: var(--isopast-vert-fonce);
	font-weight: 600;
	font-size: 13px;
	white-space: nowrap;
}

/* Liste de consignes (réutilisée dans le panneau « Consignes », bottom sheet
   mobile ou modale desktop selon la largeur d'écran). */
.isopast-bandeau-liste {
	margin: 8px 0 2px;
	padding-left: 26px;
	font-size: 13.5px;
	line-height: 1.45;
}

.isopast-bandeau-liste li {
	margin-bottom: 2px;
}

/* Bascule carte / liste */
.isopast-bascule {
	display: flex;
	gap: 4px;
	margin-bottom: 12px;
}

.isopast-bascule-btn {
	flex: 1 1 auto;
	padding: 12px;
	border: 2px solid var(--isopast-vert);
	background: #fff;
	color: var(--isopast-vert-fonce);
	font-weight: 700;
	font-size: 15px;
	border-radius: 8px;
	cursor: pointer;
}

.isopast-bascule-btn.est-actif {
	background: var(--isopast-vert);
	color: #fff;
}

/* Carte */
.isopast-carte-conteneur {
	position: relative;
}

.isopast-carte-map {
	width: 100%;
	height: 420px;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid #cfcfcf;
	position: relative;
	z-index: 0;
	background: #eef2ea;
}

.isopast-carte-chargement {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 20px;
	color: #666;
	font-size: 14px;
	text-align: center;
	pointer-events: none;
}

/* Sans cette règle, l'attribut [hidden] posé par le JS (une fois les tuiles
   chargées) n'aurait aucun effet visuel : à spécificité CSS égale avec la
   règle display:flex ci-dessus, c'est l'ordre d'apparition dans la feuille
   de style qui déciderait, pas l'attribut HTML lui-même. */
.isopast-carte-chargement[hidden] {
	display: none;
}

.isopast-carte-chargement-texte {
	margin: 0;
}

/* Message et bouton « Réessayer » : masqués tant que le chargement n'a pas
   anormalement traîné (le fond de carte OpenTopoMap est un service public
   gratuit, parfois lent ou temporairement indisponible). Révélés par JS
   après quelques secondes sans confirmation de chargement des tuiles. */
.isopast-carte-chargement-lent-texte,
.isopast-carte-chargement-reessayer {
	display: none;
}

.isopast-carte-chargement.est-lent .isopast-carte-chargement-lent-texte,
.isopast-carte-chargement.est-lent .isopast-carte-chargement-reessayer {
	display: block;
}

.isopast-carte-chargement.est-lent .isopast-carte-chargement-reessayer {
	pointer-events: auto;
	padding: 10px 20px;
	min-height: 40px;
	border: 2px solid var(--isopast-vert);
	border-radius: 999px;
	background: #fff;
	color: var(--isopast-vert-fonce);
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
}

.isopast-carte-chargement.est-lent .isopast-carte-chargement-reessayer:hover {
	background: var(--isopast-vert);
	color: #fff;
}

/* Marqueurs (divIcon) */
.isopast-pin-wrap {
	background: transparent;
	border: none;
}

.isopast-pin {
	position: relative;
	width: 44px;
	height: 44px;
	background: #fff;
	border: 3px solid var(--isopast-statut-autre);
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Couleur du marqueur selon le statut */
.isopast-pin.statut-alpage {
	border-color: var(--isopast-statut-alpage);
}

.isopast-pin.statut-deplacement {
	border-color: var(--isopast-statut-deplacement);
}

.isopast-pin.statut-autre {
	border-color: var(--isopast-statut-autre);
}

.isopast-pin-espece {
	transform: rotate(45deg);
	font-size: 20px;
	line-height: 1;
}

.isopast-pin-patou {
	position: absolute;
	top: -10px;
	right: -10px;
	transform: rotate(45deg);
	font-size: 16px;
	background: #fff;
	border-radius: 50%;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--isopast-alerte);
}

/* Popups */
.isopast-popup h3 {
	margin: 0 0 8px;
	font-size: 17px;
	color: var(--isopast-vert-fonce);
}

.isopast-popup-ligne {
	margin: 2px 0;
	font-size: 14px;
}

.isopast-popup-patou {
	margin: 8px 0;
	padding: 6px 8px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 700;
}

.isopast-popup-patou.oui {
	background: var(--isopast-alerte-bg);
	color: var(--isopast-alerte);
	border: 1px solid var(--isopast-alerte);
}

.isopast-popup-patou.non {
	color: #444;
}

.isopast-popup-consignes {
	margin: 8px 0;
	font-size: 13px;
	line-height: 1.5;
}

.isopast-popup-consignes p {
	margin: 4px 0;
}

.isopast-popup-maj {
	margin: 8px 0 0;
	font-size: 12px;
	color: #666;
	font-style: italic;
}

/* Liste de repli */
.isopast-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.isopast-liste-item {
	background: #fff;
	border: 1px solid #d8d8d8;
	border-left: 5px solid var(--isopast-vert);
	border-radius: 8px;
	padding: 14px 16px;
}

.isopast-liste-item.a-patou {
	border-left-color: var(--isopast-alerte);
}

.isopast-liste-item h3 {
	margin: 0 0 8px;
	font-size: 18px;
	color: var(--isopast-vert-fonce);
}

.isopast-liste-ligne {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 8px;
}

.isopast-tag {
	display: inline-block;
	background: #eef2ea;
	border-radius: 12px;
	padding: 3px 10px;
	font-size: 13px;
}

.isopast-liste-patou {
	margin: 6px 0;
	font-size: 14px;
}

.isopast-patou-oui {
	color: var(--isopast-alerte);
	font-weight: 700;
}

.isopast-patou-non {
	color: #444;
}

.isopast-liste-consignes {
	margin: 8px 0;
	font-size: 14px;
	line-height: 1.5;
	background: #fafafa;
	border-radius: 6px;
	padding: 8px 10px;
}

.isopast-liste-consignes p {
	margin: 4px 0;
}

.isopast-liste-maj {
	margin: 6px 0 0;
	font-size: 12px;
	color: #666;
	font-style: italic;
}

.isopast-liste-verif {
	margin: 2px 0 0;
	font-size: 12px;
	color: var(--isopast-statut-deplacement);
	font-weight: 600;
}

.isopast-aucun {
	text-align: center;
	color: #666;
	padding: 30px;
	background: #fafafa;
	border-radius: 8px;
}

/* Popup : vérification */
.isopast-popup-verif {
	margin: 4px 0 0;
	font-size: 12px;
	color: var(--isopast-statut-deplacement);
	font-weight: 600;
}

/* Lien « Lire les mentions légales complètes » : neutre par défaut, sa
   couleur/soulignement dépend du contexte où il est inséré (paragraphe du
   panneau Infos mobile, ou bouton de la barre d'informations desktop) afin
   de ne pas entrer en conflit avec le style du conteneur qui l'accueille. */
.isopast-lien-mentions {
	display: inline;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	cursor: pointer;
}

.isopast-panneau-boite p .isopast-lien-mentions,
.isopast-modale-boite p .isopast-lien-mentions {
	margin-left: 4px;
	color: #1e73be;
	font-weight: 700;
	text-decoration: underline;
}

.isopast-panneau-boite p .isopast-lien-mentions:hover,
.isopast-panneau-boite p .isopast-lien-mentions:focus,
.isopast-modale-boite p .isopast-lien-mentions:hover,
.isopast-modale-boite p .isopast-lien-mentions:focus {
	color: #124b7a;
}

/* Modale des mentions légales complètes */
.isopast-modale[hidden] {
	display: none;
}

.isopast-modale {
	position: fixed;
	inset: 0;
	z-index: 100010;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.isopast-modale-fond {
	position: absolute;
	inset: 0;
	background: rgba(20, 20, 15, 0.55);
}

.isopast-modale-boite {
	position: relative;
	max-width: 640px;
	max-height: 85vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 10px;
	padding: 32px 28px 24px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
	line-height: 1.6;
}

.isopast-modale-boite h2 {
	margin: 0 0 16px;
	padding-right: 40px;
}

.isopast-modale-boite p {
	margin: 0 0 14px;
	font-size: 14px;
}

.isopast-modale-fermer {
	position: absolute;
	top: 6px;
	right: 8px;
	width: 44px;
	height: 44px;
	border: 0;
	background: none;
	font-size: 22px;
	line-height: 1;
	color: #555;
	cursor: pointer;
}

.isopast-modale-fermer:hover {
	color: #000;
}

.isopast-modale-fermer-bas {
	margin-top: 8px;
}

/* Page/shortcode des mentions légales complètes */
.isopast-mentions-legales {
	max-width: 760px;
	margin: 0 auto;
	line-height: 1.6;
}

.isopast-mentions-titre {
	margin-bottom: 16px;
}

.isopast-mentions-legales p {
	margin: 0 0 14px;
}

/* Contrôles mobiles flottants (boutons Infos / Consignes) : masqués par
   défaut, activés sous le point de rupture mobile (cf. media query), ET en
   plein écran quelle que soit la largeur d'écran — en plein écran natif, la
   barre d'informations compacte desktop reste hors du sous-arbre affiché
   par le navigateur (hors de .isopast-carte-conteneur) et devient donc
   inatteignable : ces boutons sont alors le seul moyen d'accéder aux
   consignes et aux mentions légales sans quitter le plein écran. */
.isopast-carte-controles-haut {
	display: none;
}

.isopast-carte-conteneur:fullscreen .isopast-carte-controles-haut,
.isopast-carte-conteneur:-webkit-full-screen .isopast-carte-controles-haut,
.isopast-carte-conteneur.isopast-plein-ecran-css .isopast-carte-controles-haut {
	display: flex;
	flex-direction: column;
	gap: 8px;
	position: absolute;
	top: calc(12px + env(safe-area-inset-top, 0px));
	left: 12px;
	z-index: 1100;
}

.isopast-mobile-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 8px 12px;
	min-height: 44px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.95);
	color: var(--isopast-texte);
	font-weight: 700;
	font-size: 13px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	cursor: pointer;
}

.isopast-mobile-btn span {
	font-size: 16px;
}

/* Bouton plein écran : flottant en haut à droite de la carte, visible sur
   toutes les tailles d'écran (contrairement aux boutons Infos/Consignes,
   réservés au mobile). */
.isopast-carte-controles-droite {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 1100;
}

.isopast-btn-plein-ecran {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.95);
	color: var(--isopast-texte);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	cursor: pointer;
}

.isopast-icone-plein-ecran::before {
	content: "⛶";
	font-size: 20px;
	line-height: 1;
}

.isopast-btn-plein-ecran[aria-pressed="true"] .isopast-icone-plein-ecran::before {
	content: "✕";
}

/* Mode plein écran natif (Fullscreen API). Le navigateur promeut déjà
   l'élément au sommet de l'affichage ; on ajuste seulement ses dimensions
   internes pour que la carte occupe tout l'espace, en-tête et bordures
   compris. */
.isopast-carte-conteneur:fullscreen,
.isopast-carte-conteneur:-webkit-full-screen {
	display: flex;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
	background: #000;
}

.isopast-carte-conteneur:fullscreen .isopast-carte-map,
.isopast-carte-conteneur:-webkit-full-screen .isopast-carte-map {
	flex: 1 1 auto;
	height: auto;
	width: 100%;
	border-radius: 0;
	border: 0;
}

.isopast-carte-conteneur:fullscreen .isopast-legende,
.isopast-carte-conteneur:-webkit-full-screen .isopast-legende {
	display: none;
}

/* Mode plein écran de repli (CSS), utilisé quand l'API Fullscreen native
   n'est pas disponible ou a été refusée (certains iOS notamment). */
.isopast-carte-conteneur.isopast-plein-ecran-css {
	position: fixed;
	inset: 0;
	z-index: 100005;
	display: flex;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	background: #000;
	padding-top: env(safe-area-inset-top, 0px);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

.isopast-carte-conteneur.isopast-plein-ecran-css .isopast-carte-map {
	flex: 1 1 auto;
	height: auto;
	width: 100%;
	border-radius: 0;
	border: 0;
}

.isopast-carte-conteneur.isopast-plein-ecran-css .isopast-legende {
	display: none;
}

.isopast-corps-plein-ecran-bloque {
	overflow: hidden !important;
	height: 100% !important;
}

/* Popup centré : résultat de la géolocalisation (proximité d'un troupeau ou
   erreur). Plus visible qu'une puce discrète en bas de carte : fond
   semi-opaque + carte centrée, avec fermeture automatique (après quelques
   secondes) ou manuelle (croix, clic sur le fond, touche Échap). */
.isopast-popup-proximite[hidden] {
	display: none;
}

.isopast-popup-proximite {
	position: absolute;
	inset: 0;
	z-index: 1200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	pointer-events: none;
}

.isopast-popup-proximite-fond {
	position: absolute;
	inset: 0;
	background: rgba(20, 20, 15, 0.35);
	pointer-events: auto;
}

.isopast-popup-proximite-boite {
	position: relative;
	max-width: 300px;
	background: #fff;
	border-radius: 12px;
	padding: 18px 36px 18px 18px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
	pointer-events: auto;
}

.isopast-popup-proximite-texte {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--isopast-vert-fonce);
	text-align: center;
}

.isopast-popup-proximite-boite.est-erreur .isopast-popup-proximite-texte {
	color: var(--isopast-alerte);
}

.isopast-popup-proximite-fermer {
	position: absolute;
	top: 2px;
	right: 4px;
	width: 44px;
	height: 44px;
	border: 0;
	background: none;
	font-size: 18px;
	line-height: 1;
	color: #777;
	cursor: pointer;
}

.isopast-popup-proximite-fermer:hover {
	color: #000;
}

/* Panneaux mobiles (bottom sheets) : Infos / Consignes. Inatteignables sur
   ordinateur car leurs boutons déclencheurs sont masqués (display:none)
   au-delà du point de rupture mobile. */
.isopast-panneau[hidden] {
	display: none;
}

.isopast-panneau {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.isopast-panneau-fond {
	position: absolute;
	inset: 0;
	background: rgba(20, 20, 15, 0.5);
}

.isopast-panneau-boite {
	position: relative;
	width: 100%;
	max-height: 75vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 16px 16px 0 0;
	padding: 18px 20px calc(18px + env(safe-area-inset-bottom, 0px));
	box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.25);
}

.isopast-panneau-poignee {
	width: 40px;
	height: 4px;
	background: #ccc;
	border-radius: 2px;
	margin: 0 auto 14px;
}

.isopast-panneau-fermer {
	position: absolute;
	top: 6px;
	right: 8px;
	width: 44px;
	height: 44px;
	border: 0;
	background: none;
	font-size: 22px;
	line-height: 1;
	color: #555;
	cursor: pointer;
}

.isopast-panneau-fermer:hover {
	color: #000;
}

.isopast-panneau-titre {
	margin: 0 40px 12px 0;
	font-size: 17px;
	color: var(--isopast-vert-fonce);
}

.isopast-panneau-boite p {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.5;
}

.isopast-panneau-badge-verif {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: #eef6ee;
	border: 1px solid #cfe3cf;
	border-radius: 999px;
	font-size: 13px;
	color: var(--isopast-vert-fonce);
}

/* Bouton localiser : flottant en bas à droite de la carte, sur tous les
   écrans (le pointer-events:none sur le conteneur + auto sur le bouton
   évite de bloquer le panoramique de la carte dans la zone invisible). */
.isopast-carte-outils {
	position: absolute;
	right: 12px;
	left: 12px;
	bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	display: flex;
	justify-content: flex-end;
	z-index: 1100;
	pointer-events: none;
}

.isopast-carte-outils > * {
	pointer-events: auto;
}

.isopast-localiser {
	padding: 10px 16px;
	min-height: 44px;
	border: 2px solid #1e73be;
	background: #1e73be;
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	border-radius: 999px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	cursor: pointer;
}

.isopast-localiser:hover {
	background: #185d98;
}

.isopast-localiser:disabled {
	opacity: 0.6;
	cursor: default;
}

/* Légende (desktop/tablette ≥768px ; masquée sur mobile où elle est
   remplacée par un bouton flottant + panneau, cf. .isopast-panneau-legende).
   Rangée horizontale compacte plutôt qu'une grille à colonnes larges, pour
   éviter les zones vides quand peu d'éléments ne remplissent pas une ligne. */
.isopast-legende {
	margin-top: 10px;
	padding: 8px 14px;
	background: #fafafa;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 18px;
}

.isopast-legende-titre {
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #555;
	flex: 0 0 auto;
}

.isopast-legende-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	flex: 1 1 auto;
}

.isopast-legende-liste li {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	white-space: nowrap;
}

/* Dans le panneau (bottom sheet mobile ou modale desktop), la légende
   revient à une liste verticale classique : plus de place, plus besoin
   d'optimiser la largeur comme sous la carte. */
.isopast-panneau-boite .isopast-legende-liste {
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.isopast-panneau-boite .isopast-legende-liste li {
	font-size: 14px;
	white-space: normal;
}

.isopast-leg-emoji {
	font-size: 18px;
	line-height: 1;
	width: 22px;
	text-align: center;
}

.isopast-leg-pastille {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	flex: 0 0 auto;
	border: 2px solid rgba(0, 0, 0, 0.15);
}

.isopast-leg-pastille.statut-alpage {
	background: var(--isopast-statut-alpage);
}

.isopast-leg-pastille.statut-deplacement {
	background: var(--isopast-statut-deplacement);
}

.isopast-leg-pastille.statut-autre {
	background: var(--isopast-statut-autre);
}

/* =========================================================================
   Mobile (≤767px) : la carte devient l'élément dominant, visible sans
   défilement dès l'ouverture. La barre supérieure et les onglets restent
   compacts et fixes ; la carte (ou la liste) occupe tout l'espace restant.
   ========================================================================= */
@media (max-width: 767px) {
	.isopast-public {
		max-width: none;
		width: 100vw;
		position: relative;
		left: 50%;
		right: 50%;
		margin-left: -50vw;
		margin-right: -50vw;
		margin-top: calc(-1 * var(--isopast-decalage-haut));
		display: flex;
		flex-direction: column;
		height: 100vh;
		height: 100dvh;
		overflow: hidden;
	}

	/* La barre d'administration WordPress (connecté) est fixe et haute de
	   46px en dessous de son propre point de rupture (782px) : on la
	   déduit de la hauteur disponible pour ne pas déborder du viewport. */
	body.admin-bar .isopast-public {
		height: calc(100vh - 46px);
		height: calc(100dvh - 46px);
	}

	.isopast-barre-haut {
		flex: 0 0 auto;
		margin-top: 0;
		margin-bottom: 0;
	}

	/* La barre d'informations compacte (desktop/tablette) est déjà masquée
	   par défaut (display:none, activée à partir de 768px) : rien à faire
	   ici pour la version mobile, qui utilise ses propres contrôles
	   flottants (boutons Infos/Consignes sur la carte). */

	.isopast-bascule {
		flex: 0 0 auto;
		margin: 0;
		gap: 0;
		padding: 6px 10px;
		background: #fff;
		border-bottom: 1px solid #e2e2e2;
	}

	.isopast-bascule-btn {
		padding: 9px;
		font-size: 13px;
		border-radius: 6px;
	}

	/* Le panneau actif (carte ou liste) occupe tout l'espace vertical
	   restant. La liste défile en interne ; la carte gère son propre
	   panoramique via Leaflet, sans double défilement. */
	.isopast-carte-conteneur,
	.isopast-liste-conteneur {
		flex: 1 1 auto;
		min-height: 0;
		margin: 0;
		position: relative;
	}

	.isopast-liste-conteneur {
		overflow-y: auto;
		padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
	}

	.isopast-carte-map {
		width: 100%;
		height: 100%;
		border-radius: 0;
		border: 0;
	}

	/* Légende masquée sur mobile dans ce lot : elle réduisait la hauteur
	   disponible pour la carte. Une version accessible via bouton flottant
	   pourra être ajoutée dans un lot ultérieur si besoin. */
	.isopast-legende {
		display: none;
	}

	/* Boutons Infos / Consignes : flottants en haut à gauche de la carte. */
	.isopast-carte-controles-haut {
		display: flex;
		flex-direction: column;
		gap: 8px;
		position: absolute;
		top: calc(12px + env(safe-area-inset-top, 0px));
		left: 12px;
		z-index: 1100;
	}
}

/* Écrans très étroits : la liste de consignes (réutilisée dans le panneau
   « Consignes », mobile et desktop) reste un peu plus dense sur les très
   petits téléphones. */
@media (max-width: 600px) {
	.isopast-bandeau-liste {
		font-size: 13px;
		padding-left: 22px;
	}
}

/* =========================================================================
   Tablette et desktop (≥768px) : la barre d'informations compacte remplace
   les blocs pleine largeur (consignes, avertissement, vérification) par
   trois éléments courts sur une même ligne — repliée sur deux lignes si la
   largeur ne suffit pas (tablette portrait notamment).
   ========================================================================= */
@media (min-width: 768px) {
	.isopast-barre-infos {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 10px;
		margin-bottom: 14px;
	}

	/* Onglets Carte/Liste compacts : contrôle segmenté plutôt que deux
	   grands boutons pleine largeur. */
	.isopast-bascule {
		display: inline-flex;
		gap: 2px;
		padding: 3px;
		background: #eef2ea;
		border-radius: 999px;
		margin-bottom: 14px;
	}

	.isopast-bascule-btn {
		flex: 0 0 auto;
		padding: 9px 22px;
		min-height: 40px;
		border: 0;
		border-radius: 999px;
		font-size: 14px;
	}
}

/* =========================================================================
   Desktop (≥1024px) : la carte devient nettement plus grande et plus
   large ; les panneaux « Infos »/« Consignes » (identiques à la version
   mobile) se présentent en modale centrée plutôt qu'en tiroir depuis le bas,
   plus adaptée à un pointeur de souris qu'à un geste tactile.
   ========================================================================= */
@media (min-width: 1024px) {
	.isopast-public {
		max-width: 1180px;
		width: calc(100% - 48px);
	}

	.isopast-carte-map {
		height: min(68vh, 720px);
		min-height: 560px;
	}

	/* Panneaux Infos/Consignes : présentation modale centrée (au lieu du
	   tiroir depuis le bas utilisé sur mobile/tablette). Mêmes JS, mêmes
	   contenus : seule la mise en page change avec la largeur d'écran. */
	.isopast-panneau {
		align-items: center;
	}

	.isopast-panneau-poignee {
		display: none;
	}

	.isopast-panneau-boite {
		width: 100%;
		max-width: 480px;
		max-height: 80vh;
		border-radius: 12px;
	}
}

/* Très grands écrans (≥1440px) : encore un peu plus de largeur pour la
   carte, sans excès pour ne pas trop étirer le texte des autres blocs. */
@media (min-width: 1440px) {
	.isopast-public {
		max-width: 1280px;
	}
}

/* Respecte la préférence système de réduction des animations : neutralise
   les transitions/animations décoratives du plugin sans rien casser côté
   fonctionnel (les changements d'état restent instantanés). */
@media (prefers-reduced-motion: reduce) {
	.isopast-btn-plein-ecran {
		transition: none !important;
	}
}