/* ================================================================
   Sourcier — carnet de terrain des sources & points d'eau de France
   Identité : papier crème, encre bleu-nuit, tampon vermillon.
   Fraunces (titres, chiffres) + Atkinson Hyperlegible (interface).
   ================================================================ */

@font-face {
	font-family: 'Fraunces';
	src: url('fonts/fraunces.woff2') format('woff2');
	font-weight: 500 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Fraunces';
	src: url('fonts/fraunces-italic.woff2') format('woff2');
	font-weight: 500 900;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'Atkinson';
	src: url('fonts/atkinson.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: 'Atkinson';
	src: url('fonts/atkinson-bold.woff2') format('woff2');
	font-weight: 700;
	font-display: swap;
}

/* La couverture, elle, est une feuille de carte : elle a sa propre typographie.
   Archivo    — le lettrage de carte : grotesque dense, qui tient en petites
                capitales espacées comme un toponyme d'état-major.
   Instrument — les hydronymes. Sur une carte IGN, tout ce qui est eau est écrit
                en italique bleue. On en fait l'accent de la marque.
   Mono       — les mentions de marge : coordonnées, échelle, série.
   Ces trois-là ne servent QUE dans #couverture : le reste de l'appli garde
   Fraunces + Atkinson (--titres / --texte), inchangés. */
@font-face {
	font-family: 'Archivo';
	src: url('fonts/archivo-400.woff2') format('woff2');
	font-weight: 100 900;
	font-display: swap;
}
@font-face {
	font-family: 'Instrument';
	src: url('fonts/instrument-serif-400.woff2') format('woff2');
	font-display: swap;
}
@font-face {
	font-family: 'Instrument';
	src: url('fonts/instrument-serif-italic-400.woff2') format('woff2');
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'Mono';
	src: url('fonts/ibm-plex-mono-400.woff2') format('woff2');
	font-display: swap;
}

:root {
	--papier: #f7f3e9;
	--carte-fond: #fffdf6;
	--encre: #1c2a33;
	--encre-2: #51626e;
	--encre-3: #8b9aa4;
	--ligne: #e4dcc8;
	--eau: #12718f;
	--tampon: #c2452d;
	--ok: #148577;
	--cible: #e0a020;   /* destination du guidage : or, à part du rouge « moi » et des pastilles fraîches */

	/* Les couleurs de la feuille de carte (couverture uniquement) : le beige
	   d'une carte pliée, le bistre des courbes de niveau, le vert des bois. */
	--sepia:  #ece3d0;
	--bistre: #a8814e;
	--foret:  #5d7a3e;

	--c-spring: #0d7a52;
	--c-hot_spring: #c2461c;
	--c-drinking_water: #125fa8;
	--c-fountain: #6b3a9e;
	--c-water_well: #7a4a22;
	--c-water_tap: #b02a5e;
	--c-abreuvoir: #8a6a10;
	--c-lavoir: #0a7285;
	--c-perte: #22303b;
	--c-point_eau: #4f7d2f;
	--c-reservoir: #3f5d78;
	--c-toponyme: #6b6459;

	--ombre: 0 2px 6px rgba(28, 42, 51, .10), 0 12px 32px rgba(28, 42, 51, .14);
	--rayon: 14px;
	--titres: 'Fraunces', Georgia, serif;
	--texte: 'Atkinson', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	height: 100%;
	font-family: var(--texte);
	color: var(--encre);
	background: var(--papier);
	overscroll-behavior: none;
}

svg { display: inline-block; }
.haut svg, .outils svg, .fiche svg, .statut svg, .legende-actions svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.haut .langue-btn__d, .haut .langue-liste a svg { stroke: none; }   /* drapeaux : aplats, pas de trait */

main { position: fixed; inset: 0; }
#carte {
	position: absolute;
	inset: 0;
	background-color: #e9e4d5;
	/* filigrane : courbes de niveau, visibles pendant le chargement des tuiles */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 140'%3E%3Cg fill='none' stroke='%2312718f' stroke-opacity='.06' stroke-width='1.2'%3E%3Cpath d='M0 34q44-16 88 0t132-8'/%3E%3Cpath d='M0 72q52-20 104 0t116-10'/%3E%3Cpath d='M0 110q46-13 92 0t128-5'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 220px 140px;
}

/* ---------- bandeau haut flottant ---------- */

.haut {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 1100;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: calc(10px + env(safe-area-inset-top)) 12px 0;
	pointer-events: none;
}
.haut > * { pointer-events: auto; }

.marque {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	padding: 8px 14px 9px;
	background: var(--encre);
	color: var(--papier);
	border-radius: var(--rayon);
	box-shadow: var(--ombre);
	text-decoration: none;
	line-height: 1.05;
	position: relative;
}
.marque__goutte {
	position: absolute;
	top: 9px; right: 10px;
	width: 14px; height: 14px;
	color: var(--papier);
	opacity: .85;
}
.marque__nom {
	font-family: var(--titres);
	font-style: italic;
	font-weight: 800;
	font-size: 1.25rem;
	letter-spacing: .01em;
	padding-right: 20px;
	font-variation-settings: "opsz" 40;
}
@keyframes goutte-vit {
	0%, 92%, 100% { transform: translateY(0) scaleY(1); }
	95%           { transform: translateY(1.5px) scaleY(1.18); }
	98%           { transform: translateY(0) scaleY(.94); }
}
.marque__goutte { animation: goutte-vit 7s ease-in-out infinite; transform-origin: 50% 20%; }
.marque__sous {
	font-size: .58rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	opacity: .75;
	margin-top: 3px;
}

.recherche {
	position: relative;
	flex: 1 1 auto;
	max-width: 430px;
}
.recherche__loupe {
	position: absolute;
	left: 13px; top: 50%;
	width: 17px; height: 17px;
	transform: translateY(-50%);
	color: var(--encre-3);
	pointer-events: none;
}
.recherche input {
	width: 100%;
	padding: 12px 16px 12px 38px;
	border-radius: var(--rayon);
	border: 1px solid var(--ligne);
	background: var(--carte-fond);
	font-family: var(--texte);
	font-size: .92rem;
	color: var(--encre);
	box-shadow: var(--ombre);
	outline: none;
}
.recherche input:focus { border-color: var(--eau); }
.recherche input::placeholder { color: var(--encre-3); }

.suggestions {
	position: absolute;
	top: calc(100% + 8px);
	left: 0; right: 0;
	background: var(--carte-fond);
	border: 1px solid var(--ligne);
	border-radius: var(--rayon);
	box-shadow: var(--ombre);
	overflow-y: auto;
	max-height: min(340px, 55vh);
	overscroll-behavior: contain;
	z-index: 1300;
}
.suggestions button {
	display: flex;
	align-items: baseline;
	gap: 8px;
	width: 100%;
	padding: 10px 14px;
	border: none;
	border-bottom: 1px solid var(--ligne);
	background: none;
	text-align: left;
	font-family: var(--texte);
	font-size: .86rem;
	color: var(--encre);
	cursor: pointer;
}
.suggestions button:last-child { border-bottom: none; }
.suggestions button.actif { background: var(--papier); }
.suggestions .s-type {
	margin-left: auto;
	flex-shrink: 0;
	font-size: .62rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--encre-2);
	border: 1px solid var(--ligne);
	border-radius: 999px;
	padding: 2px 8px;
	white-space: nowrap;
}
.s-message { padding: 12px 14px; font-size: .82rem; color: var(--encre-2); font-style: italic; }

.haut__actions { display: flex; gap: 8px; }

.bouton-rond {
	width: 42px; height: 42px;
	border-radius: 50%;
	border: 1px solid var(--ligne);
	background: var(--carte-fond);
	color: var(--encre);
	box-shadow: var(--ombre);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.bouton-rond svg { width: 19px; height: 19px; }
.bouton-rond:hover { border-color: var(--eau); color: var(--eau); }
.bouton-rond--grand { width: 48px; height: 48px; }
.bouton-rond--grand svg { width: 21px; height: 21px; }
.bouton-rond--eau { background: var(--eau); border-color: var(--eau); color: var(--carte-fond); }
.bouton-rond--eau:hover { background: #0d5f79; color: var(--carte-fond); }
#btn-menu { display: none; }   /* réservé au mobile : le bureau a la place d'afficher les outils */
#btn-recherche, #recherche-fermer { display: none; }   /* idem : le bureau garde son champ ouvert */
#calques  { display: none; }   /* idem : sous 900px il remplace le contrôle Leaflet, intouchable au doigt */

/* ---------- sélecteur de langue (drapeaux, toujours visible) ---------- */

.langues {
	position: fixed;
	top: calc(66px + env(safe-area-inset-top));
	left: 12px;
	z-index: 1090;
	display: flex;
	gap: 5px;
	padding: 5px 7px;
	background: var(--carte-fond);
	border: 1px solid var(--ligne);
	border-radius: 999px;
	box-shadow: var(--ombre);
}
.langues a {
	display: inline-flex;
	border-radius: 4px;
	line-height: 0;
	opacity: .55;
	transition: opacity .15s ease, transform .12s ease;
}
.langues a svg {
	width: 23px; height: 17px;
	border-radius: 3px;
	box-shadow: 0 0 0 1px rgba(28, 42, 51, .22);
}
.langues a:hover { opacity: 1; transform: translateY(-1px); }
.langues a.actif {
	opacity: 1;
	transform: scale(1.08);
}
.langues a.actif svg { box-shadow: 0 0 0 2px var(--encre); }

.visuallyhidden {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- sélecteur de langue : déroulant discret, à droite du logo ---------- */

.langue-menu { position: relative; flex: 0 0 auto; }

.langue-btn {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	height: 40px;
	padding: 0 6px 0 8px;
	background: var(--carte-fond);
	border: 1px solid var(--ligne);
	border-radius: 999px;
	box-shadow: var(--ombre);
	color: var(--encre-2);
	cursor: pointer;
}
.langue-btn__d {
	width: 22px; height: 16px;
	border-radius: 3px;
	box-shadow: 0 0 0 1px rgba(28, 42, 51, .22);
}
.langue-btn__c { width: 15px; height: 15px; transition: transform .18s ease; }
.langue-btn[aria-expanded="true"] { border-color: var(--eau); color: var(--eau); }
.langue-btn[aria-expanded="true"] .langue-btn__c { transform: rotate(180deg); }

.langue-liste {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 1200;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 6px;
	min-width: 158px;
	background: var(--carte-fond);
	border: 1px solid var(--ligne);
	border-radius: 12px;
	box-shadow: 0 10px 28px rgba(28, 42, 51, .18);
	animation: langue-ouvre .16s ease-out;
}
.langue-liste[hidden] { display: none; }
@keyframes langue-ouvre {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}
.langue-liste a {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 8px 9px;
	border-radius: 8px;
	text-decoration: none;
	color: var(--encre-2);
	font-size: .84rem;
	font-weight: 600;
}
.langue-liste a svg {
	width: 22px; height: 16px;
	flex: 0 0 auto;
	border-radius: 3px;
	box-shadow: 0 0 0 1px rgba(28, 42, 51, .22);
}
.langue-liste a:hover { background: var(--papier); color: var(--encre); }
.langue-liste a.actif { background: var(--encre); color: var(--papier); }

/* variante intégrée à l'en-tête des pages carnet */
.langues--encart {
	position: static;
	box-shadow: none;
	border: none;
	background: none;
	padding: 0;
	margin-left: 8px;
}


/* ---------- outils (pile droite) ---------- */

.outils {
	position: fixed;
	right: 12px;
	bottom: calc(104px + env(safe-area-inset-bottom));
	z-index: 1050;
	display: flex;
	flex-direction: column;
	align-items: flex-end;   /* icônes alignées sur le bord droit */
	gap: 8px;
	transition: opacity .2s ease, bottom .2s ease;   /* le soulèvement pendant le guidage doit glisser, pas sauter */
}

/* boutons d'action libellés (icône + texte) */
.outil {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 42px;
	padding: 0 12px 0 15px;
	border-radius: 999px;
	border: 1px solid var(--ligne);
	background: var(--carte-fond);
	color: var(--encre);
	box-shadow: var(--ombre);
	font-family: var(--texte);
	font-weight: 700;
	font-size: .82rem;
	cursor: pointer;
	position: relative;
	/* une seule déclaration : la seconde écrasait la transition de transform */
	transition: transform .1s ease, opacity .2s ease, background .15s ease, color .15s ease, border-color .15s ease;
	-webkit-tap-highlight-color: transparent;
}
.outil span { white-space: nowrap; }
.outil svg { width: 19px; height: 19px; flex-shrink: 0; }
.outil:hover { border-color: var(--eau); color: var(--eau); }
.outil:active { transform: scale(.96); }
.outil--primaire {
	height: 50px;
	padding: 0 16px 0 20px;
	background: var(--eau);
	border-color: var(--eau);
	color: #fff;
	font-family: var(--titres);
	font-style: italic;
	font-weight: 700;
	font-size: 1rem;
}
.outil--primaire:hover { background: #0d5f79; color: #fff; border-color: #0d5f79; }
.outil--primaire svg { width: 22px; height: 22px; }

/* variante sans libellé : une pastille ronde, comme les commandes de carte usuelles */
.outil--ico {
	width: 42px;
	padding: 0;
	justify-content: center;
}
.outil--ico > span { display: none; }

/* pastille « + » Où Boire+ sur les outils premium */
.outil-plus {
	position: absolute;
	top: -4px; right: 2px;
	min-width: 16px; height: 16px;
	line-height: 16px;
	padding: 0 3px;
	text-align: center;
	background: var(--eau);
	color: #fff;
	border: 1.5px solid var(--carte-fond);
	border-radius: 999px;
	font-family: var(--texte);
	font-size: .66rem;
	font-weight: 700;
}
.est-premium .outil-plus { display: none; }

/* ---------- statut (tampon) ---------- */

.statut {
	position: fixed;
	left: 50%;
	bottom: calc(72px + env(safe-area-inset-bottom));
	transform: translateX(-50%);
	z-index: 1060;
	background: var(--carte-fond);
	border: 1px solid var(--ligne);
	color: var(--encre);
	padding: 8px 18px;
	border-radius: 999px;
	font-family: var(--titres);
	font-style: italic;
	font-weight: 600;
	font-size: .88rem;
	box-shadow: var(--ombre);
	max-width: 92%;
	text-align: center;
}
.statut--erreur { border-color: var(--tampon); color: var(--tampon); }
.statut--ok { border-color: var(--ok); color: var(--ok); }
/* l'invite peut porter un picto (raccourci de géolocalisation) */
.statut-zoom svg { width: 15px; height: 15px; margin-right: 6px; vertical-align: -2px; }
.statut--charge { border-color: var(--eau); color: var(--eau); }
.statut--charge svg {
	width: 15px; height: 15px;
	vertical-align: -3px;
	margin-right: 7px;
	animation: goutte-bat 1s ease-in-out infinite;
}
@keyframes goutte-bat {
	0%, 100% { transform: scale(1); opacity: .55; }
	50%      { transform: scale(1.3); opacity: 1; }
}

/* barre d'eau de chargement, en haut de l'écran */
.chargeur {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: 4px;
	z-index: 3000;
	background: rgba(18, 113, 143, .14);
	overflow: hidden;
	pointer-events: none;
}
.chargeur[hidden] { display: none; }
.chargeur > div {
	position: absolute;
	top: 0; bottom: 0;
	width: 38%;
	border-radius: 999px;
	background: linear-gradient(90deg, transparent, var(--eau) 35%, #35a5c9 50%, var(--eau) 65%, transparent);
	animation: chargeur-va 1.1s ease-in-out infinite;
}
@keyframes chargeur-va {
	from { left: -40%; }
	to   { left: 102%; }
}
.statut--action { background: var(--encre); border-color: var(--encre); color: var(--papier); padding: 0; }
.statut-zoom {
	border: none;
	background: none;
	color: inherit;
	font: inherit;
	padding: 9px 20px;
	cursor: pointer;
}


/* ---------- légende ---------- */

.legende-zone {
	position: fixed;
	left: 12px;
	bottom: calc(150px + env(safe-area-inset-bottom));
	z-index: 1055;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	transition: opacity .2s ease, bottom .2s ease;   /* le soulèvement pendant le guidage doit glisser, pas sauter */
}

.legende {
	background: var(--carte-fond);
	border: 1px solid var(--ligne);
	border-radius: 12px;
	box-shadow: var(--ombre);
	padding: 6px;
	width: 182px;
	max-height: 38vh;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.legende[hidden] { display: none; }

.lg-ligne {
	display: flex;
	align-items: center;
	gap: 7px;
	width: 100%;
	padding: 5px 8px;
	border: none;
	border-radius: 7px;
	background: none;
	text-align: left;
	font-family: var(--texte);
	font-size: .72rem;
	font-weight: 700;
	color: var(--encre);
	cursor: pointer;
}
.lg-ligne:hover { background: var(--papier); }
.lg-ligne i {
	width: 11px; height: 11px;
	border-radius: 50%;
	flex-shrink: 0;
	border: 1.5px solid #fffdf6;
	/* L'anneau était à 18 % : assez pour souligner une couleur vive, pas assez pour qu'une
	   puce BLANCHE (le lieu-dit) se voie sur le papier crème du panneau. On l'affirme. */
	box-shadow: 0 0 0 1px rgba(28, 42, 51, .32);
}
.lg-ligne span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-ligne b { font-family: var(--titres); font-size: .72rem; color: var(--encre-2); }
.lg-ligne.lg-off { opacity: .35; }

.lg-tout {
	display: block;
	width: 100%;
	margin-top: 4px;
	padding: 7px 8px;
	border: none;
	border-top: 1px dashed var(--ligne);
	background: none;
	font-family: var(--titres);
	font-style: italic;
	font-weight: 700;
	font-size: .74rem;
	color: var(--eau);
	cursor: pointer;
}
.lg-tout:hover { color: var(--encre); }

/* rangée horizontale : bouton Légende + bouton À proximité, même taille */
.legende-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.legende-bouton {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	border: 1px solid var(--ligne);
	background: var(--carte-fond);
	color: var(--encre);
	border-radius: 999px;
	padding: 6px 13px;
	font-family: var(--titres);
	font-style: italic;
	font-weight: 700;
	font-size: .74rem;
	box-shadow: var(--ombre);
	cursor: pointer;
}
.legende-bouton i {
	width: 7px; height: 7px;
	border-radius: 50%;
	display: inline-block;
}
.legende-bouton i:nth-child(1) { background: var(--c-spring); }
.legende-bouton i:nth-child(2) { background: var(--c-drinking_water); margin-left: -3px; }
.legende-bouton i:nth-child(3) { background: var(--c-lavoir); margin-left: -3px; margin-right: 5px; }
.legende-bouton:hover { border-color: var(--eau); color: var(--eau); }

/* variante « À proximité » : icône + libellé, aligné sur la taille du bouton Légende */
.legende-bouton--action { gap: 6px; }
.legende-bouton--action svg { width: 15px; height: 15px; flex-shrink: 0; }
.legende-bouton--action:active { transform: scale(.96); }

@media (min-width: 900px) {
	.legende-zone { bottom: 100px; left: 16px; }
}

/* ---------- guidage ---------- */


.guidage {
	position: fixed;
	left: 50%;
	bottom: calc(14px + env(safe-area-inset-bottom));
	transform: translateX(-50%);
	z-index: 1075;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 12px 9px 18px;
	background: var(--encre);
	color: var(--papier);
	border-radius: 999px;
	box-shadow: var(--ombre);
	max-width: calc(100vw - 20px);
}
.guidage[hidden] { display: none; }
/* rose de compas gravée derrière la flèche */
.guidage__rose {
	position: relative;
	width: 34px; height: 34px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1.5px solid rgba(247, 243, 233, .35);
	border-radius: 50%;
}
.guidage__rose::before {
	content: "";
	position: absolute;
	inset: 2.5px;
	border-radius: 50%;
	border: 1px dotted rgba(247, 243, 233, .3);
}
.guidage__rose svg {
	width: 19px; height: 19px;
	transition: transform .4s ease;
	color: var(--papier);
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.guidage__texte { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.guidage__texte b { font-family: var(--titres); font-style: italic; font-size: 1.02rem; white-space: nowrap; }
.guidage__texte span {
	font-size: .66rem;
	opacity: .75;
	max-width: 180px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.guidage button {
	width: 30px; height: 30px;
	border-radius: 50%;
	border: none;
	background: rgba(247, 243, 233, .14);
	color: var(--papier);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
/* La croix (#i-croix) est un tracé au trait : sans stroke explicite elle hérite
   du fill:black par défaut sur un chemin sans surface → invisible sur le fond
   sombre. On la trace en blanc (--papier), bien remplie dans son bouton. */
.guidage button svg {
	width: 18px; height: 18px;
	fill: none;
	stroke: var(--papier);
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* — bouton guidage dans la fiche — */
.f-guider__t {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.2;
}
.f-guider__t small {
	font-weight: 400;
	font-size: .71rem;
	opacity: .75;
}
.f-guider svg { flex: 0 0 auto; }

.f-guider {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	text-align: left;
	margin-top: 8px;
	padding: 9px 14px;
	border-radius: 10px;
	border: 1px solid var(--eau);
	background: none;
	color: var(--eau);
	font-family: var(--texte);
	font-weight: 700;
	font-size: .78rem;
	cursor: pointer;
}
.f-guider svg { width: 16px; height: 16px; }
.f-guider:hover { background: var(--eau); color: var(--carte-fond); }

/* ---------- réglages fins ---------- */



/* ---------- fiche (bottom sheet / panneau) ---------- */

.fiche {
	position: fixed;
	left: 0; right: 0;
	bottom: 0;
	z-index: 1200;
	background: var(--carte-fond);
	border: 1px solid var(--ligne);
	border-bottom: none;
	border-radius: 20px 20px 0 0;
	box-shadow: 0 -6px 40px rgba(28, 42, 51, .25);
	max-height: 76vh;
	display: flex;
	flex-direction: column;
	transform: translateY(105%);
	transition: transform .28s cubic-bezier(.32,.72,.29,1),
	            max-height .28s cubic-bezier(.32,.72,.29,1);
	/* filigrane : lignes de niveau */
	background-image:
		radial-gradient(ellipse 340px 90px at 88% -20px, rgba(18, 113, 143, .07), transparent 70%),
		radial-gradient(ellipse 240px 60px at 82% -10px, rgba(18, 113, 143, .05), transparent 70%);
}
.fiche.ouverte { transform: translateY(0); }
.fiche[hidden] { display: none; }

/* bord de papier déchiré en haut de la feuille (mobile) */
@media (max-width: 899px) {
	.fiche {
		border-radius: 0;
		border-top: none;
		-webkit-mask:
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 12'%3E%3Cpath d='M0 12V7Q3.5 1 7 6t7-2 7 3 7-4V12z' fill='%23000'/%3E%3C/svg%3E") top/28px 12px repeat-x,
			linear-gradient(#000 0 0) 0 12px/100% calc(100% - 12px) no-repeat;
		mask:
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 12'%3E%3Cpath d='M0 12V7Q3.5 1 7 6t7-2 7 3 7-4V12z' fill='%23000'/%3E%3C/svg%3E") top/28px 12px repeat-x,
			linear-gradient(#000 0 0) 0 12px/100% calc(100% - 12px) no-repeat;
		padding-top: 8px;
	}
}

/* entrée du contenu de la fiche */
@keyframes fiche-entre {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}
.fiche.ouverte .fiche__contenu { animation: fiche-entre .28s ease-out both; }

.fiche__poignee {
	display: block;
	width: 44px; height: 4px;
	border: none;                  /* c'est un <button> : pas de cadre du navigateur */
	appearance: none;
	-webkit-appearance: none;
	-webkit-tap-highlight-color: transparent;
	border-radius: 2px;
	background: var(--ligne);
	margin: 10px auto 2px;
	padding: 8px 30px;             /* zone de saisie généreuse */
	background-clip: content-box;
	box-sizing: content-box;
	flex-shrink: 0;
	cursor: grab;
	touch-action: none;
	transition: background .15s ease, width .18s ease;
}
.fiche__poignee:hover { background: var(--encre-3); }
.fiche--haute .fiche__poignee { width: 34px; }
.fiche__fermer {
	position: absolute;
	top: 12px; right: 12px;
	width: 34px; height: 34px;
	border-radius: 50%;
	border: 1px solid var(--ligne);
	background: var(--papier);
	color: var(--encre-2);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}
.fiche__fermer svg { width: 15px; height: 15px; }

.fiche__contenu {
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 8px 18px calc(20px + env(safe-area-inset-bottom));
	/* La poignée est un <button> de 4 px de haut, mais avec 8 px de rembourrage et 12 px de
	   marge : ~32 px d'espace mort au-dessus du contenu, sur un écran où chaque ligne compte.
	   On en récupère 20 en remontant le contenu DANS cette zone. La poignée garde sa surface
	   de saisie (le rembourrage reste), elle n'a plus qu'une marge visuelle. */
	margin-top: -20px;
	touch-action: pan-y;
}

/* — entête de fiche — */
.f-cat {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .64rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--fc, var(--encre-2));
	margin-top: 4px;
}
.f-cat svg { width: 15px; height: 15px; }
/* Le titre et la VILLE partagent une ligne. Sans ce conteneur, le <h2> prend toute la
   largeur et repousse la ville dessous. Les 34 px de droite sont la place de la croix de
   fermeture, en position absolue — c'est le conteneur qui les réserve désormais, plus le
   titre. */
.f-entete {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding-right: 34px;
	margin: 4px 0 2px;
}
.f-titre {
	flex: 1 1 auto;
	min-width: 0;   /* sans lui, un long nom refuse de se comprimer et écrase la ville */
	margin: 0;
	font-family: var(--titres);
	font-weight: 700;
	font-size: 1.45rem;
	line-height: 1.15;
	font-variation-settings: "opsz" 50;
	text-wrap: balance;
}
/* souligné manuscrit sous le titre */
.f-titre::after {
	content: "";
	display: block;
	width: 74px;
	height: 7px;
	margin-top: 5px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 8'%3E%3Cpath d='M2 5q11-5 23-1t22-1 22 2 19-3' fill='none' stroke='%2312718f' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center / 90px 8px;
	opacity: .8;
}
.f-lieu { font-size: .84rem; color: var(--encre-2); margin: 2px 0 0; }
.f-lieu small { color: var(--encre-3); }
/* Le lien vers la page de commune n'avait AUCUN style : il se confondait avec le texte
   gris qui l'entoure, et personne ne le trouvait. */
.f-lieu__lien { color: var(--eau); text-decoration: underline; text-underline-offset: 2px; font-weight: 700; }

/* Entrée pleine largeur vers la page de commune : c'est là que vivent l'analyse de l'eau
   du robinet (Hub'Eau) et le bulletin des sources. Le lien existait, sur le nom de la
   commune, mais sans style : personne ne le voyait. */
.f-vers-commune {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 10px 0 0;
	padding: 12px 14px;
	border-radius: 12px;
	border: 1px solid var(--ligne);
	background: var(--papier);
	color: var(--encre);
	font-size: .82rem;
	font-weight: 700;
	text-decoration: none;
	line-height: 1.3;
}
.f-vers-commune[hidden] { display: none; }
.f-vers-commune svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--eau); }
.f-vers-commune__t { flex: 1; }
.f-vers-commune__f { color: var(--eau); flex-shrink: 0; }
.f-vers-commune:hover { border-color: var(--eau); }
.f-vers-commune:active { transform: scale(.99); }
.f-commune {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 6px;
	padding: 5px 10px;
	border-radius: 999px;
	border: 1px solid var(--ligne);
	background: var(--papier);
	color: var(--eau);
	font-size: .76rem;
	font-weight: 700;
	text-decoration: none;
	line-height: 1.3;
}
.f-commune:hover { border-color: var(--eau); }

/* — complétude — */
.f-gouttes { display: inline-flex; gap: 2px; margin-left: 8px; vertical-align: -2px; }
.f-gouttes svg { width: 11px; height: 11px; color: var(--eau); }
.f-gouttes svg.vide { opacity: .25; }

/* — badges — */
.f-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.f-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: .74rem;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 6px;
	border: 1px solid var(--ligne);
	color: var(--encre-2);
	background: var(--papier);
}
/* Sans taille explicite, l'icône (goutte des badges « potable ») s'étirait et
   rendait ces badges plus hauts que les badges sans icône (Saisonnier, altitude,
   « Eau non contrôlée »…) : tous les badges doivent avoir la même taille. */
.f-badge svg { width: 13px; height: 13px; flex-shrink: 0; }
/* La potabilité est un tampon apposé sur la fiche, quelle que soit sa réponse :
   même forme, même inclinaison, même italique — seule la couleur change. Sans quoi
   une fontaine et un point d'eau potable n'avaient pas la même fiche. */
.f-badge--tampon {
	border: 1.5px solid currentColor;
	background: none;
	color: var(--tampon);
	font-family: var(--titres);
	font-style: italic;
	transform: rotate(-1.2deg);
}
.f-badge--ok   { color: var(--ok); }
.f-badge--ko   { color: var(--tampon); }
.f-badge--info { color: var(--eau); }
.f-badge--gris { color: var(--encre-3); }

/* Avertissement sanitaire : ni repliable, ni masquable, et placé au-dessus du
   bouton « Y aller ». Discret par la couleur, insistant par la position. */
.f-avert {
	margin: 10px 0 0;
	padding: 9px 11px;
	border-left: 3px solid var(--encre-3);
	border-radius: 0 6px 6px 0;
	background: var(--papier);
	color: var(--encre-2);
	font-size: .78rem;
	line-height: 1.45;
}
.f-avert--ko { border-left-color: var(--tampon); color: var(--tampon); font-weight: 600; }

/* — notes de terrain — */
.f-notes { margin: 10px 0 0; font-size: .84rem; color: var(--encre-2); }
.f-notes p { margin: 3px 0; }

/* — actions — */
.f-actions {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin: 16px 0 0;
}
.f-actions button, .f-actions a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	padding: 10px 4px 8px;
	border-radius: 10px;
	border: 1px solid var(--ligne);
	background: var(--papier);
	color: var(--encre);
	font-family: var(--texte);
	font-size: .68rem;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}
.f-actions svg { width: 19px; height: 19px; }

/* ---------- feuille de partage ---------- */
.partage { position: fixed; inset: 0; z-index: 1300; }
.partage[hidden] { display: none; }
.partage__voile {
	position: absolute; inset: 0;
	background: rgba(28, 42, 51, .5);
	opacity: 0; transition: opacity .25s ease;
}
.partage.ouvert .partage__voile { opacity: 1; }
.partage__feuille {
	position: absolute; left: 0; right: 0; bottom: 0;
	max-width: 460px; margin: 0 auto;
	background: var(--carte-fond);
	border-radius: 20px 20px 0 0;
	padding: 6px 18px calc(18px + env(safe-area-inset-bottom));
	box-shadow: 0 -6px 30px rgba(28, 42, 51, .28);
	transform: translateY(100%);
	transition: transform .28s cubic-bezier(.22, .61, .36, 1);
}
.partage.ouvert .partage__feuille { transform: translateY(0); }
.partage__poignee { width: 42px; height: 4px; border-radius: 2px; background: var(--ligne); margin: 8px auto 12px; }
.partage__titre { margin: 0; text-align: center; font-family: var(--titres); font-size: 1.12rem; }
.partage__nom { margin: 4px 0 16px; text-align: center; color: var(--encre-2); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.partage__grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.partage__canal {
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	padding: 15px 6px 12px;
	border-radius: 14px; border: 1px solid var(--ligne);
	background: var(--papier); color: var(--encre);
	font: 700 .72rem var(--texte); cursor: pointer;
	transition: transform .12s ease;
}
.partage__canal:active { transform: scale(.96); }
.partage__canal span { color: var(--encre-2); }
/* réseaux = glyphes pleins (fill inline) colorés par currentColor ; copie = trait */
.partage__canal svg { width: 27px; height: 27px; }
.partage__canal--wa   svg { color: #25D366; }
.partage__canal--fb   svg { color: #1877F2; }
.partage__canal--ig   svg { color: #E1306C; }
.partage__canal--tt   svg { color: #111; }
.partage__canal--mail svg { color: var(--eau); }
.partage__canal--lien svg {
	color: var(--encre-2);
	fill: none; stroke: currentColor; stroke-width: 2;
	stroke-linecap: round; stroke-linejoin: round;
}
.partage__annuler {
	display: block; width: 100%; margin: 14px 0 0;
	padding: 13px; border: none; border-radius: 12px;
	background: var(--papier); color: var(--encre);
	font: 700 .86rem var(--texte); cursor: pointer;
}
.f-actions .principal { background: var(--encre); border-color: var(--encre); color: var(--papier); }
.f-actions button.fav-actif { color: var(--tampon); border-color: var(--tampon); }
.f-actions button.fav-actif svg { fill: currentColor; }

/* — eau du robinet — */
.f-eau { margin: 14px 0 0; }
.f-eau > button {
	width: 100%;
	padding: 10px;
	border-radius: 10px;
	border: 1px dashed var(--eau);
	background: none;
	color: var(--eau);
	font-family: var(--texte);
	font-weight: 700;
	font-size: .8rem;
	cursor: pointer;
}
.f-eau__resultat { font-size: .82rem; margin-top: 8px; }
.f-eau__resultat .ok { color: var(--ok); font-weight: 700; }
.f-eau__resultat .ko { color: var(--tampon); font-weight: 700; }
.f-eau__resultat small { color: var(--encre-3); }

/* Les liens du carnet ne sont pas des liens de navigateur : trait d'eau sous le
   texte, encre au survol. Les boutons déguisés en liens (.principal, .f-ligne) sont
   exclus, ils ont leur propre traitement. */
.fiche__contenu a:not(.principal):not(.f-ligne) {
	color: var(--eau);
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 100% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	padding-bottom: 1px;
	transition: color .15s ease, background-size .18s ease;
}
.fiche__contenu a:not(.principal):not(.f-ligne):hover {
	color: var(--encre);
	background-size: 100% 1.5px;
}
.fiche__contenu a:visited:not(.principal):not(.f-ligne) { color: var(--eau); }

.f-osm {
	display: inline-block;
	margin-top: 12px;
	font-size: .74rem;
	color: var(--encre-3);
}
.f-osm:not(.principal) { color: var(--encre-3); }

/* — conditions du moment — */
.f-cond {
	margin: 12px 0 0;
	padding: 10px 12px;
	background: var(--papier);
	border: 1px solid var(--ligne);
	border-left-width: 4px;
	border-radius: 8px;
	font-size: .82rem;
}
.f-cond__attente { color: var(--encre-3); font-style: italic; }
.f-cond__titre { font-family: var(--titres); font-weight: 700; font-size: .92rem; margin-bottom: 4px; }
.f-cond__titre--ok { color: var(--ok); }
.f-cond__titre--moyen { color: var(--c-abreuvoir); }
.f-cond__titre--ko { color: var(--tampon); }
.f-cond ul { margin: 0; padding-left: 18px; }
.f-cond li { margin: 2px 0; color: var(--encre-2); }
.f-cond small { color: var(--encre-3); }

/* — signalement — */
.f-signal { margin: 14px 0 0; }
.f-signal__ouvrir {
	width: 100%;
	padding: 10px;
	border-radius: 10px;
	border: 1px dashed var(--encre-3);
	background: none;
	color: var(--encre-2);
	font-family: var(--texte);
	font-weight: 700;
	font-size: .8rem;
	cursor: pointer;
}
.f-signal__form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.f-signal__choix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.f-signal__choix--4 { grid-template-columns: repeat(4, 1fr); }
.f-releve__dernier { font-size: .84rem; margin-bottom: 8px; }
.f-releve__dernier small { color: var(--encre-3); }
.f-signal__choix button {
	padding: 9px 4px;
	border-radius: 8px;
	border: 1px solid var(--ligne);
	background: var(--papier);
	color: var(--encre-2);
	font-family: var(--texte);
	font-weight: 700;
	font-size: .78rem;
	cursor: pointer;
}
.f-signal__choix button.actif { background: var(--encre); border-color: var(--encre); color: var(--papier); }
.f-signal__form input {
	padding: 9px 12px;
	border-radius: 8px;
	border: 1px solid var(--ligne);
	background: var(--carte-fond);
	font-family: var(--texte);
	font-size: .84rem;
	color: var(--encre);
}
.f-signal__envoyer {
	padding: 10px;
	border-radius: 8px;
	border: none;
	background: var(--tampon);
	color: #fff;
	font-family: var(--texte);
	font-weight: 700;
	font-size: .8rem;
	cursor: pointer;
}
.f-signal__envoyer:disabled { opacity: .4; cursor: default; }
.f-signal__form small { color: var(--encre-3); font-size: .68rem; }
.f-signal__merci { padding: 10px 0; font-size: .85rem; color: var(--ok); font-weight: 700; }
.f-signal__merci a { color: var(--eau); }

/* — export GPX — */
.f-gpx {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 2px 0 8px;
	padding: 8px 14px;
	border-radius: 10px;
	border: 1px solid var(--encre);
	background: var(--encre);
	color: var(--papier);
	font-family: var(--texte);
	font-weight: 700;
	font-size: .76rem;
	cursor: pointer;
}
.f-gpx svg { width: 15px; height: 15px; }
.f-gpx--retirer { background: none; color: var(--tampon); border-color: var(--tampon); }

/* segment sans eau (analyse d'itinéraire) */
.f-trou {
	margin: 6px 0;
	padding: 8px 12px;
	border: 1.5px solid var(--tampon);
	border-radius: 8px;
	color: var(--tampon);
	font-family: var(--titres);
	font-style: italic;
	font-weight: 700;
	font-size: .88rem;
	transform: rotate(-.6deg);
	background: rgba(194, 69, 45, .05);
}
.f-trou small { font-family: var(--texte); font-style: normal; font-weight: 400; color: var(--tampon); opacity: .8; }

/* packs hors-ligne */
.f-pack {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 4px;
	border-bottom: 1px solid var(--ligne);
}
.f-pack:last-child { border-bottom: none; }
.f-pack .fp-nom { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.f-pack .fp-nom b { font-size: .88rem; }
.f-pack .fp-nom small { color: var(--encre-3); font-size: .72rem; }
.f-pack button {
	width: 34px; height: 34px;
	border-radius: 50%;
	border: 1px solid var(--ligne);
	background: var(--papier);
	color: var(--encre-2);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.f-pack button svg { width: 14px; height: 14px; }
.f-pack .fp-suppr:hover { border-color: var(--tampon); color: var(--tampon); }
.f-pack .fp-voir:hover { border-color: var(--eau); color: var(--eau); }

.f-barre {
	height: 8px;
	border-radius: 999px;
	background: var(--ligne);
	overflow: hidden;
	margin: 12px 0 6px;
}
.f-barre > div {
	height: 100%;
	width: 0;
	background: var(--eau);
	border-radius: 999px;
	transition: width .25s ease;
}
.f-barre__texte {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: .78rem;
	color: var(--encre-2);
}
.fp-annuler {
	border: none;
	background: none;
	color: var(--tampon);
	font-family: var(--texte);
	font-weight: 700;
	font-size: .76rem;
	cursor: pointer;
	text-decoration: underline;
}

/* — listes (autour / favoris) — */
.f-l-titre {
	font-family: var(--titres);
	font-weight: 700;
	font-size: 1.25rem;
	margin: 4px 0 2px;
	padding-right: 34px;
}
.f-l-sous { font-size: .78rem; color: var(--encre-2); margin: 0 0 8px; }
.f-ligne {
	display: flex;
	align-items: center;
	gap: 11px;
	width: 100%;
	padding: 11px 4px;
	border: none;
	border-bottom: 1px solid var(--ligne);
	background: none;
	text-align: left;
	font-family: var(--texte);
	color: var(--encre);
	cursor: pointer;
}
.f-ligne:last-child { border-bottom: none; }
.f-ligne svg.fl-ic { width: 19px; height: 19px; flex-shrink: 0; }
.f-ligne .fl-txt { flex: 1; min-width: 0; }
/* `display: block` n'est pas décoratif : sans lui ces deux <span> restent en flux
   inline et le nom se colle à sa catégorie (« Fontaine d'AlbertasFONTAINE »).
   L'ellipsis du nom, elle non plus, ne s'applique pas à une boîte inline. */
.f-ligne .fl-nom { display: block; font-weight: 700; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-ligne .fl-cat { display: block; font-size: .68rem; color: var(--encre-2); letter-spacing: .06em; text-transform: uppercase; }
.fl-cat:empty { display: none; }   /* pas de ligne vide en attendant la commune */
.f-ligne .fl-dist {
	flex-shrink: 0;
	text-align: right;
	font-family: var(--titres);
	font-weight: 700;
	font-size: .92rem;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.f-ligne .fl-dist svg { width: 12px; height: 12px; color: var(--encre-3); }
.f-veille {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 12px;
	margin: 4px 0 10px;
	background: var(--papier);
	border: 1px solid var(--ligne);
	border-radius: 10px;
	cursor: pointer;
}
.f-veille input { accent-color: var(--eau); margin-top: 3px; }
.f-veille span { display: flex; flex-direction: column; }
.f-veille b { font-size: .84rem; }
.f-veille small { color: var(--encre-3); font-size: .72rem; line-height: 1.4; }

.f-vide { padding: 18px 4px; font-size: .85rem; color: var(--encre-2); font-style: italic; }
.f-vide button {
	display: block;
	margin-top: 10px;
	padding: 9px 16px;
	border-radius: 10px;
	border: none;
	background: var(--encre);
	color: var(--papier);
	font-family: var(--texte);
	font-weight: 700;
	font-size: .8rem;
	cursor: pointer;
}

/* — à propos — */
/* En-tête de marque de la popup « À propos » : verrou logo intégré et centré */
.f-ap-marque {
	text-align: center;
	margin: 4px 0 18px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--ligne);
}
.f-ap-goutte {
	width: 42px; height: 42px;
	color: var(--eau);
	fill: var(--eau) !important;
	stroke: none !important;
	filter: drop-shadow(0 3px 9px rgba(18, 113, 143, .30));
}
.f-ap-marque h2 {
	font-family: var(--titres);
	font-style: italic;
	font-weight: 900;
	font-size: 1.95rem;
	line-height: 1;
	margin: 8px 0 6px;
	color: var(--encre);
	letter-spacing: -.015em;
}
.f-ap-sous {
	font-size: .62rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--encre-2);
	margin: 0;
}

.f-apropos { font-size: .84rem; color: var(--encre-2); line-height: 1.55; }
.f-apropos h3 { font-family: var(--titres); color: var(--encre); font-size: .95rem; margin: 14px 0 4px; }
.f-apropos a { color: var(--eau); }

/* ---------- marqueur sélection : onde ---------- */

.onde { pointer-events: none; }
.onde::before, .onde::after {
	content: "";
	position: absolute;
	left: 50%; top: 50%;
	width: 14px; height: 14px;
	margin: -7px 0 0 -7px;
	border: 2px solid var(--onde-c, var(--eau));
	border-radius: 50%;
	animation: ondes 1.8s ease-out infinite;
}
.onde::after { animation-delay: .9s; }
@keyframes ondes {
	from { transform: scale(.6); opacity: .9; }
	to   { transform: scale(3.4); opacity: 0; }
}

/* états du bouton de suivi de position */
/* GPS en marche = ROUGE, exactement le rouge du point de position sur la carte (#e0301e).
   Le bouton et le point qu'il commande parlent enfin la même langue : on voit d'un coup
   d'œil que le GPS tourne. Auparavant, « suivi » virait à l'encre sombre et « libre » à un
   bleu discret — deux états ternes qu'on ne reliait ni l'un ni l'autre au point rouge. */
#localiser.suivi-actif,
#localiser.suivi-libre {
	background: #e0301e;
	border-color: #e0301e;
	color: #fff;
}
/* Suivi ACTIF (la carte colle à vous) : un halo, pour le distinguer du simple « GPS allumé ». */
#localiser.suivi-actif { box-shadow: var(--ombre), 0 0 0 3px rgba(224, 48, 30, .22); }

/* Le bouton « recentrer » n'existe que GPS allumé — et `.outil { display: inline-flex }`
   BATTRAIT le `[hidden]` du navigateur (règle d'auteur contre feuille de style UA). Sans
   cette ligne, il resterait affiché en permanence. */
#recentrer[hidden] { display: none; }

/* amas de points denses */
.amas {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--encre);
	color: var(--papier);
	border: 2px solid var(--carte-fond);
	/* tache d'encre : rond volontairement irrégulier */
	border-radius: 46% 54% 51% 49% / 53% 47% 55% 45%;
	transform: rotate(-4deg);
	box-shadow: 0 2px 10px rgba(28, 42, 51, .35);
	cursor: pointer;
	transition: transform .15s ease;
}
.amas:hover { transform: rotate(2deg) scale(1.06); }
.amas b { font-family: var(--titres); font-style: italic; font-size: .92rem; transform: rotate(4deg); font-variant-numeric: tabular-nums; }

/* infobulle survol (desktop) */
.leaflet-tooltip {
	background: var(--encre) !important;
	color: var(--papier) !important;
	border: none !important;
	border-radius: 8px !important;
	font-family: var(--texte) !important;
	font-size: .76rem !important;
	box-shadow: var(--ombre) !important;
}
.leaflet-tooltip-top:before { border-top-color: var(--encre) !important; }

/* ---------- couverture : présentation du service ---------- */

/* La couverture n'est plus une page de présentation : c'est une FEUILLE DE
   CARTE. Fond en courbes de niveau et réseau hydrographique (dessinés, pas
   dégradés), bloc-titre en cartouche à double filet, arguments rangés dans la
   légende, angles vifs et filets — aucun rayon, aucune ombre portée.
   Elle est le seul endroit de l'appli où l'on utilise Archivo / Instrument /
   Mono : la carte, elle, garde sa typographie d'interface. */
.couverture {
	position: fixed;
	inset: 0;
	z-index: 2500;
	background-color: var(--sepia);
	/* le quadrillage kilométrique + le grain du papier ; le relief est en SVG */
	background-image:
		linear-gradient(to right, rgba(32, 48, 58, .055) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(32, 48, 58, .055) 1px, transparent 1px),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.11'/%3E%3C/svg%3E");
	background-size: 64px 64px, 64px 64px, 120px 120px;
	overflow-y: auto;
	font-family: 'Archivo', system-ui, sans-serif;
	transition: opacity .4s ease, transform .4s ease;
}
.couverture.partie { opacity: 0; transform: translateY(-2.5%); pointer-events: none; }
.deja-vu .couverture { display: none; }

/* ---- le levé : deux compositions, une par format ----
   Une carte se compose pour son format. La même feuille étirée du portrait au
   paysage, c'est le fleuve en travers du texte. */
.cv-feuille { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.cv-feuille svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cv-feuille .cv-paysage { display: none; }

/* amorces de coin : les repères de découpe d'une feuille imprimée */
.cv-coin { position: fixed; z-index: 1; width: 20px; height: 20px; border: 0 solid var(--encre); opacity: .45; pointer-events: none; }
.cv-coin--hg { top: 14px; left: 14px; border-top-width: 1.5px; border-left-width: 1.5px; }
.cv-coin--hd { top: 14px; right: 14px; border-top-width: 1.5px; border-right-width: 1.5px; }
.cv-coin--bg { bottom: 14px; left: 14px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.cv-coin--bd { bottom: 14px; right: 14px; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.cv-marge {
	position: fixed;
	z-index: 1;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	font-family: 'Mono', monospace;
	font-size: 9.5px;
	letter-spacing: .08em;
	color: var(--encre-2);
	opacity: .65;
	pointer-events: none;
}
.cv-marge--nord { top: 18px; }
.cv-marge--sud  { bottom: 18px; }

.couverture__cadre {
	position: relative;
	z-index: 2;
	max-width: 560px;
	margin: 0 auto;
	padding: 38px 20px 22px;
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

/* ---- contenu éditorial sous le pli (SEO) : opaque et au-dessus du relief/repères
        fixes, pour ne masquer le premier écran en rien mais recouvrir au scroll ---- */
.cv-plus {
	position: relative;
	z-index: 3;
	background: var(--sepia);
	border-top: 1.5px solid rgba(32, 48, 58, .18);
	padding: 40px 20px 72px;
	font-family: 'Archivo', system-ui, sans-serif;
}
.cv-plus__in { max-width: 560px; margin: 0 auto; color: var(--encre); }
.cv-plus h2 { font-size: 1.5rem; line-height: 1.15; margin: 0 0 12px; }
.cv-plus h3 {
	font-size: .8rem; text-transform: uppercase; letter-spacing: .1em;
	color: var(--encre-2); margin: 28px 0 10px;
}
.cv-plus p { margin: 0 0 12px; line-height: 1.6; color: var(--encre-2); }
.cv-plus a { color: var(--eau); text-decoration: none; }
.cv-plus a:hover { text-decoration: underline; }
.cv-plus__types {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 16px;
}
.cv-plus__types a { font-weight: 600; }
.cv-plus__deps { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .92rem; }
.cv-plus__deps a { white-space: nowrap; }
.cv-plus__note {
	font-size: .84rem; font-style: italic; color: var(--encre-2);
	border-left: 2px solid var(--eau); padding-left: 12px; margin-top: 22px;
}

/* ---- le cartouche : le bloc-titre. Filet double, papier plein, angles vifs.
        Il se POSE sur la carte, il ne flotte pas au-dessus d'elle. ---- */
.cv-cartouche {
	position: relative;
	background: rgba(236, 227, 208, .94);
	border: 1.5px solid var(--encre);
	padding: 15px 16px 13px;
}
.cv-cartouche::after {
	content: "";
	position: absolute;
	inset: 3px;
	border: .5px solid var(--encre);
	opacity: .45;
	pointer-events: none;
}
.cv-serie {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 10px;
	padding-bottom: 7px;
	border-bottom: .75px solid rgba(32, 48, 58, .28);
	font-family: 'Mono', monospace;
	font-size: 9.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--encre-2);
}
.couverture__marque h1 {
	margin: 0;
	font-family: 'Archivo', sans-serif;
	font-weight: 700;
	font-size: clamp(2.1rem, 11.5vw, 3rem);
	line-height: .92;
	letter-spacing: -.035em;
	text-transform: uppercase;
	color: var(--encre);
}
/* le point d'interrogation est de l'eau : italique bleue, comme un hydronyme */
.cv-q {
	font-family: 'Instrument', serif;
	font-style: italic;
	font-weight: 400;
	color: var(--eau);
	text-transform: none;
	letter-spacing: 0;
	font-size: 1.15em;
	line-height: 0;
	display: inline-block;
	transform: translateY(.06em);
}
.couverture__sous {
	margin: 9px 0 0;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--encre-2);
}
/* une vraie échelle graphique, en escalier */
.cv-echelle { display: flex; align-items: flex-end; gap: 9px; margin-top: 11px; }
.cv-echelle__barres { display: flex; height: 7px; border: 1px solid var(--encre); }
.cv-echelle__barres i { width: 17px; height: 100%; }
.cv-echelle__barres i:nth-child(odd) { background: var(--encre); }
.cv-echelle small { font-family: 'Mono', monospace; font-size: 9px; letter-spacing: .1em; color: var(--encre-2); transform: translateY(2px); }

/* ---- la notice : aligné à gauche, posé sur du papier. Sur une feuille, aucun
        texte long ne se lit à même le relief. ---- */
.couverture__manifeste {
	margin: 16px 0 0;
	padding: 13px 15px 14px;
	background: rgba(236, 227, 208, .94);
	border-left: 1.5px solid var(--encre);
	font-size: .97rem;
	line-height: 1.5;
	color: var(--encre);
}
.couverture__manifeste em {
	font-family: 'Instrument', serif;
	font-style: italic;
	color: var(--eau);
	font-size: 1.14em;
}

/* ---- la légende : les arguments ne sont pas trois cartes arrondies à icône
        bleue. Ce sont les entrées de la légende de la carte. ---- */
.cv-legende {
	position: relative;
	margin-top: 16px;
	background: rgba(236, 227, 208, .94);
	border: 1.5px solid var(--encre);
	padding: 0 15px 3px;
}
.cv-legende::after {
	content: "";
	position: absolute;
	inset: 3px;
	border: .5px solid var(--encre);
	opacity: .45;
	pointer-events: none;
}
.cv-legende h2 {
	margin: 0;
	padding: 9px 0 8px;
	border-bottom: .75px solid rgba(32, 48, 58, .3);
	font-family: 'Mono', monospace;
	font-size: 9.5px;
	font-weight: 400;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--encre-2);
}
/* Les pictos du sprite sont des tracés : ils veulent un trait, pas un aplat.
   (On ne peut pas le dire pour tout .couverture svg — le levé, lui, a ses
   propres remplissages.) */
.cv-legende svg, .couverture__cta svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.cv-legende dl { margin: 0; display: grid; grid-template-columns: 26px 1fr; gap: 0 12px; }
.cv-legende dt { display: flex; align-items: center; justify-content: center; padding-top: 9px; }
.cv-legende dt svg { width: 21px; height: 21px; }
.cv-legende dd { margin: 0; padding: 9px 0; border-bottom: .75px dotted rgba(32, 48, 58, .3); }
.cv-legende dd:last-of-type { border-bottom: 0; }
.cv-legende b { display: block; font-size: .9rem; font-weight: 600; letter-spacing: -.005em; }
.cv-legende span { display: block; margin-top: 2px; font-size: .77rem; line-height: 1.35; color: var(--encre-2); }
.cv-l--eau    { color: var(--eau); }
.cv-l--vert   { color: var(--foret); }
.cv-l--bistre { color: var(--bistre); }

/* le cachet : il était déjà là, il reste — mais dans la marge, de travers */
.couverture__tampon {
	align-self: flex-start;
	margin: 12px 0 0 4px;
	padding: 5px 12px 6px;
	border: 1.5px solid var(--tampon);
	border-radius: 0;
	color: var(--tampon);
	font-family: 'Instrument', serif;
	font-style: italic;
	font-weight: 400;
	font-size: .85rem;
	letter-spacing: .02em;
	text-transform: none;
	transform: rotate(-3deg);
	box-shadow: inset 0 0 0 3px var(--sepia), inset 0 0 0 4px rgba(184, 61, 38, .5);
	opacity: .9;
}

/* ---- les boutons : angles vifs, filets, encre. Un bouton de carte n'a pas de
        rayon de 14 px ni d'ombre douce. ---- */
.couverture__cta { margin-top: auto; padding-top: 12px; display: flex; flex-direction: column; gap: 0; }
.couverture__cta button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 13px 16px;
	border: 1.5px solid var(--encre);
	border-radius: 0;
	font-family: 'Archivo', sans-serif;
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.couverture__cta #cv-carte { background: var(--encre); color: var(--sepia); }
.couverture__cta #cv-carte:hover { background: var(--eau); border-color: var(--eau); }
.couverture__cta #cv-proche {
	margin-top: -1.5px;
	background: rgba(236, 227, 208, .94);
	color: var(--encre);
}
.couverture__cta #cv-proche:hover { background: var(--encre); color: var(--sepia); }
.couverture__cta #cv-proche svg { width: 18px; height: 18px; }
.cv-groupe { display: flex; align-items: center; gap: 10px; }
.cta-fleche { display: inline-block; font-family: 'Mono', monospace; transition: transform .18s ease; }
#cv-carte:hover .cta-fleche, #cv-carte:focus-visible .cta-fleche { transform: translateX(5px); }

/* ---- l'ours : petites capitales de marge, sur papier (du 9 px sur des courbes
        de niveau, ça ne se lit pas) ---- */
.couverture__credits {
	margin: 12px 0 0;
	padding: 8px 12px 9px;
	background: rgba(236, 227, 208, .9);
	border-top: 1.5px solid var(--encre);
	font-family: 'Mono', monospace;
	font-size: 9.5px;
	line-height: 1.7;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--encre-2);
}
.couverture__credits a { color: var(--encre-2); text-decoration: none; border-bottom: .5px solid rgba(32, 48, 58, .35); }
.couverture__credits a:hover { color: var(--eau); border-color: var(--eau); }

.couverture__langues {
	display: inline-flex;
	vertical-align: -4px;
	margin-left: 8px;
}
.couverture__langues a {
	padding: 3px 7px;
	margin-right: -.75px;
	border: .75px solid rgba(32, 48, 58, .28);
	border-radius: 0;
	font-family: 'Mono', monospace;
	font-size: 9.5px;
	letter-spacing: .1em;
	color: var(--encre-2);
	text-decoration: none;
}
.couverture__langues a.actif {
	background: var(--encre);
	border-color: var(--encre);
	color: var(--sepia);
	font-weight: 400;
}
.f-langues a {
	display: inline-block;
	padding: 2px 7px;
	margin: 0 1px;
	border-radius: 6px;
	color: var(--eau);
	text-decoration: none;
	border: 1px solid transparent;
	font-size: .78rem;
}
.f-langues a.actif { border-color: var(--eau); font-weight: 700; }
/* Les liens de commune comptent pour le référencement : ils restent dans le
   DOM, visibles, à leur place — mais sur UNE ligne qui défile, pour ne pas
   coûter trois lignes de hauteur à une couverture qui doit tenir d'un regard. */
.couverture__villes {
	margin: 7px 0 0;
	padding-top: 7px;
	border-top: .75px dotted rgba(32, 48, 58, .3);
	display: flex;
	align-items: center;
	gap: 7px;
	overflow-x: auto;
	white-space: nowrap;
	scrollbar-width: none;
	font-family: 'Mono', monospace;
	font-size: 9px;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--encre-3);
}
.couverture__villes::-webkit-scrollbar { display: none; }
.couverture__villes a {
	flex: none;
	color: var(--encre-2);
	text-decoration: none;
	border-bottom: .5px solid rgba(32, 48, 58, .3);
}
.couverture__villes a:hover { color: var(--eau); border-color: var(--eau); }

/* ---- portrait : la couverture doit tenir d'un seul coup d'œil. Sur les
        téléphones courts, c'est le DÉCOR qui cède — jamais le contenu. ---- */
@media (max-width: 899px) {
	.cv-marge--sud { display: none; }   /* la couverture serrée vient buter dessus */
	/* La barre des communes coûte une ligne. On la reprend au-dessus des crédits :
	   rogner le bas du cadre ne servirait à rien, il est SOUS eux. */
	.couverture__cadre { padding-bottom: 12px; }
	.couverture__cta { padding-top: 6px; }
	.couverture__credits { margin-top: 10px; line-height: 1.6; }
	.couverture__villes { margin-top: 5px; padding-top: 6px; }
}
@media (max-width: 899px) and (max-height: 720px) {
	.couverture__cadre { padding: 24px 18px 14px; }
	.couverture__marque h1 { font-size: clamp(1.85rem, 9.5vw, 2.4rem); }
	.couverture__sous,
	.cv-echelle,
	.couverture__tampon { display: none; }
	.couverture__manifeste { margin-top: 12px; padding: 11px 14px 12px; font-size: .88rem; line-height: 1.42; }
	.cv-legende { margin-top: 12px; }
	.cv-legende h2 { padding: 8px 0 7px; }
	.cv-legende dt { padding-top: 7px; }
	.cv-legende dd { padding: 6px 0; }
	.cv-legende span { font-size: .73rem; line-height: 1.3; }
	.couverture__cta button { padding: 11px 15px; font-size: .78rem; }
	.couverture__credits { margin-top: 10px; padding: 7px 11px 8px; font-size: 9px; }
}

/* ---- paysage : le contenu tient en deux colonnes, et la rivière descend dans
        la gouttière entre elles. Elle ne coupe plus aucune ligne de lecture. ---- */
@media (min-width: 900px) {
	.cv-feuille .cv-portrait { display: none; }
	.cv-feuille .cv-paysage  { display: block; }

	.couverture__cadre {
		max-width: 1180px;
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
		grid-template-rows: auto auto 1fr auto auto;
		gap: 0 90px;
		padding: 74px 56px 34px;
		align-content: start;
	}
	.couverture__marque { grid-column: 1; grid-row: 1; }
	.cv-cartouche { padding: 20px 20px 16px; }
	.couverture__manifeste { grid-column: 1; grid-row: 2; margin-top: 26px; padding: 18px 22px 19px; font-size: 1.12rem; }
	.cv-legende {
		grid-column: 2;
		grid-row: 1 / span 3;
		align-self: start;
		margin-top: 0;
		padding: 0 20px 6px;
	}
	.cv-legende h2 { padding: 13px 0 12px; }
	.cv-legende dt { padding-top: 11px; }
	.cv-legende dd { padding: 11px 0 12px; }
	/* le cachet reste dans la grille : en absolu il chevaucherait les boutons */
	.couverture__tampon { grid-column: 1; grid-row: 3; align-self: start; justify-self: start; margin: 26px 0 0 4px; }
	.couverture__cta {
		grid-column: 1 / span 2;
		grid-row: 4;
		flex-direction: row;
		align-items: stretch;
		padding-top: 46px;
	}
	.couverture__cta button { flex: 1; padding: 17px 18px; }
	.couverture__cta #cv-proche { margin-top: 0; margin-left: -1.5px; }
	.couverture__credits { grid-column: 1 / span 2; grid-row: 5; margin-top: 24px; padding: 12px 16px 14px; }
}
@media (min-width: 1600px) {
	.couverture__cadre { max-width: 1340px; gap: 0 110px; padding-top: 88px; }
	.cv-cartouche { padding: 24px 26px 20px; }
	.couverture__manifeste { font-size: 1.2rem; padding: 22px 26px 23px; }
}

.moi { pointer-events: none; z-index: 900 !important; }
.moi::before {
	content: "";
	position: absolute;
	left: 50%; top: 50%;
	width: 22px; height: 22px;
	margin: -11px 0 0 -11px;
	background: #e0301e;
	border: 4px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 1.5px #e0301e, 0 2px 10px rgba(0, 0, 0, .5);
	z-index: 2;
}
.moi::after {
	content: "";
	position: absolute;
	left: 50%; top: 50%;
	width: 26px; height: 26px;
	margin: -13px 0 0 -13px;
	border-radius: 50%;
	border: 3px solid #e0301e;
	background: rgba(224, 48, 30, .25);
	animation: pouls-moi 1.6s ease-out infinite;
}
@keyframes pouls-moi {
	from { transform: scale(.8); opacity: .9; }
	to   { transform: scale(3.6); opacity: 0; }
}

/* ---------- destination du guidage ----------
   En guidage, la cible se noyait parmi les centaines de pastilles identiques. On
   pose un repère dédié — une épingle en goutte, or, dont la pointe touche le point,
   plus un halo pulsant sur les coordonnées exactes. Il vit dans le calque des
   marqueurs (au-dessus des pastilles SVG) et hors du cycle de dessiner(). */
.cible-guidage { pointer-events: none; z-index: 850 !important; }   /* au-dessus des pastilles, sous « moi » (900) */
.cible-guidage__pin {
	position: absolute;
	left: 0; top: 0;
	width: 30px; height: 30px;
	margin: -39px 0 0 -15px;          /* pointe posée sur les coordonnées */
	background: var(--cible);
	border: 3px solid #fff;
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	box-shadow: 0 4px 10px rgba(28, 42, 51, .4);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}
.cible-guidage__pin svg {
	width: 17px; height: 17px;
	transform: rotate(45deg);         /* goutte redressée dans l'épingle inclinée */
	fill: #fff;
	stroke: none;
}
.cible-guidage__halo {
	position: absolute;
	left: 0; top: 0;
	width: 16px; height: 16px;
	margin: -8px 0 0 -8px;
	border-radius: 50%;
	border: 3px solid var(--cible);
	animation: pouls-cible 1.7s ease-out infinite;
}
@keyframes pouls-cible {
	from { transform: scale(.6); opacity: .9; }
	to   { transform: scale(3.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.cible-guidage__halo { animation: none; opacity: .55; transform: scale(1.7); }
}

/* ---------- épingle recherche (popup Leaflet conservé) ---------- */

.leaflet-popup-content-wrapper {
	background: var(--carte-fond);
	color: var(--encre);
	border: 1px solid var(--ligne);
	border-radius: 12px;
	box-shadow: var(--ombre);
	font-family: var(--texte);
}
.leaflet-popup-tip { background: var(--carte-fond); }
.leaflet-popup-content { font-size: .85rem; margin: 12px 16px; }
.popup-titre { font-family: var(--titres); font-weight: 700; font-size: .98rem; }
.popup-cat { color: var(--encre-2); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; margin: 2px 0 6px; }
.popup-retirer {
	border: 1px solid var(--ligne);
	background: none;
	color: var(--encre-2);
	border-radius: 6px;
	padding: 3px 9px;
	font-family: var(--texte);
	font-size: .74rem;
	cursor: pointer;
}
.popup-retirer:hover { border-color: var(--tampon); color: var(--tampon); }

/* ---------- habillage contrôles Leaflet ---------- */

.leaflet-bar { border: 1px solid var(--ligne) !important; box-shadow: var(--ombre) !important; border-radius: 10px !important; overflow: hidden; }
.leaflet-bar a { background: var(--carte-fond) !important; color: var(--encre) !important; border-bottom-color: var(--ligne) !important; }
.leaflet-control-layers {
	border: 1px solid var(--ligne) !important;
	border-radius: 10px !important;
	background: var(--carte-fond) !important;
	box-shadow: var(--ombre) !important;
	color: var(--encre);
	font-family: var(--texte) !important;
}
.leaflet-control-attribution {
	background: rgba(255, 253, 246, .75) !important;
	color: var(--encre-2) !important;
	font-size: .58rem !important;
	font-family: var(--texte) !important;
}
.leaflet-control-attribution a { color: var(--eau) !important; }

/* positionnement des contrôles sous le bandeau / au-dessus des modes */
.leaflet-top.leaflet-right { margin-top: 66px; }
.leaflet-bottom.leaflet-left { margin-bottom: 62px; }
.leaflet-bottom.leaflet-right { margin-bottom: 62px; }

/* ---------- desktop : la fiche devient un panneau latéral ---------- */

@media (min-width: 900px) {
	.fiche {
		left: 16px;
		right: auto;
		bottom: 16px;
		width: 410px;
		border-radius: var(--rayon);
		border-bottom: 1px solid var(--ligne);
		max-height: min(640px, calc(100vh - 110px));
		transform: translateY(24px);
		opacity: 0;
		pointer-events: none;
		transition: transform .22s ease, opacity .22s ease;
	}
	.fiche.ouverte { transform: translateY(0); opacity: 1; pointer-events: auto; }
	.fiche__poignee { display: none; }
	/* Le contenu remontait de 20 px pour récupérer l'espace mort SOUS la poignée. Au bureau
	   il n'y a pas de poignée : ces 20 px n'existent pas, et les reprendre mordait sur le
	   haut du panneau. On ne corrige que ce qui est cassé. */
	.fiche__contenu { margin-top: 0; }
	.guidage { left: auto; right: 12px; bottom: 14px; transform: none; }
	.statut { bottom: auto; top: calc(74px + env(safe-area-inset-top)); }
	.outils { bottom: 72px; }   /* au-dessus de la barre de filtres */
	.leaflet-bottom.leaflet-left { margin-bottom: 0; }
	.leaflet-bottom.leaflet-right { margin-bottom: 0; }
}

/* ---------- pages « carnet » (commune, mentions) ---------- */

.page-carnet {
	display: block;
	height: auto;
	min-height: 100%;
	background-color: var(--papier);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 140'%3E%3Cg fill='none' stroke='%2312718f' stroke-opacity='.045' stroke-width='1.2'%3E%3Cpath d='M0 34q44-16 88 0t132-8'/%3E%3Cpath d='M0 72q52-20 104 0t116-10'/%3E%3Cpath d='M0 110q46-13 92 0t128-5'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 220px 140px;
	overflow-y: auto;
}

.p-entete {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 780px;
	margin: 0 auto;
	padding: 16px 18px 0;
}
.p-entete .marque { flex-direction: column; }
.p-entete__cta {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px 16px;
	border-radius: 999px;
	background: var(--eau);
	color: #fff;
	font-weight: 700;
	font-size: .82rem;
	text-decoration: none;
	box-shadow: var(--ombre);
	white-space: nowrap;
}
.p-entete__cta:hover .cta-fleche { transform: translateX(4px); }

/* ---------- pastille « est-ce que ça coule ? » (carte) ----------
   Sobre par construction : c'est un CONTEXTE, pas une promesse. Personne ne mesure le débit
   d'une source sauvage — la couleur informe, elle ne garantit rien. */
.cond-puce {
	position: fixed;
	top: calc(62px + env(safe-area-inset-top));
	left: 12px;
	z-index: 1040;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	max-width: calc(100vw - 24px);
	padding: 7px 12px 7px 10px;
	border-radius: 999px;
	border: 1px solid var(--ligne);
	background: var(--carte-fond);
	box-shadow: var(--ombre);
	color: var(--encre);
	font: 700 .76rem var(--texte);
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cond-puce[hidden] { display: none; }
.cond-puce:active { transform: scale(.97); }
.cond-puce__pt {
	width: 9px; height: 9px;
	border-radius: 50%;
	flex-shrink: 0;
	background: var(--encre-3);
}
.cond-puce--favorable   .cond-puce__pt { background: var(--ok); }
.cond-puce--mitige      .cond-puce__pt { background: #c9922a; }
.cond-puce--defavorable .cond-puce__pt { background: var(--tampon); }
/* Le bandeau de guidage prend le pas : on ne surcharge pas l'écran du marcheur. */
body.guidage-actif .cond-puce { opacity: 0; pointer-events: none; }

/* En guidage, la légende s'efface — et pas seulement sur mobile : le bandeau apparaît à
   tous les formats. Elle revient d'elle-même à la fermeture du guidage, dans l'état où on
   l'avait laissée (dépliée ou repliée) : `display: none` masque, il n'oublie rien.
   La colonne d'OUTILS, elle, reste (soulevée au-dessus du bandeau, cf. plus bas) : on veut
   toujours pouvoir se recentrer ou changer de fond de carte en cours de route. */
body.guidage-actif .legende-zone { display: none; }

/* détail, dans le panneau */
.cond-d { margin: 0 0 12px; }
.cond-d__syn { font-family: var(--titres); font-size: 1.05rem; font-style: italic; margin: 0 0 10px; }
.cond-d ul { list-style: none; padding: 0; margin: 0; }
.cond-d li { padding: 9px 0; border-bottom: 1px solid var(--ligne); font-size: .86rem; line-height: 1.45; }
.cond-d li:last-child { border-bottom: 0; }
.cond-d li b { display: block; }
.cond-d li small { color: var(--encre-2); }
.cond-d__note { margin-top: 12px; font-size: .76rem; color: var(--encre-3); line-height: 1.5; }

/* ---------- liste des points d'eau, en accordéons ----------
   Empiler 200 items d'affilée (Marseille) rendait la page illisible. Chaque catégorie se
   replie ; seules celles qui répondent à « j'ai soif » sont ouvertes d'emblée. Google indexe
   normalement le contenu d'un <details> : aucun coût SEO. */
.pt-grp {
	margin: 10px 0;
	border: 1px solid var(--ligne);
	border-radius: 12px;
	background: var(--carte-fond);
	overflow: hidden;
}
.pt-grp__s {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 15px;
	cursor: pointer;
	list-style: none;
	user-select: none;
}
.pt-grp__s::-webkit-details-marker { display: none; }
.pt-grp__s:hover { background: var(--papier); }
.pt-grp__h {
	flex: 1;
	margin: 0;
	font-family: var(--titres);
	font-size: 1.02rem;
	font-weight: 600;
	line-height: 1.25;
	border: 0;
	padding: 0;
}
.pt-grp__h::after { content: none; }   /* pas de filet : on n'est plus dans un <h2> de section */
.pt-grp__n {
	flex-shrink: 0;
	min-width: 30px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--papier);
	border: 1px solid var(--ligne);
	color: var(--encre-2);
	font-size: .78rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
/* chevron : replié → déplié */
.pt-grp__s::after {
	content: "";
	flex-shrink: 0;
	width: 8px; height: 8px;
	border-right: 2px solid var(--encre-3);
	border-bottom: 2px solid var(--encre-3);
	transform: rotate(45deg);
	transition: transform .18s ease;
	margin-left: 2px;
}
.pt-grp[open] .pt-grp__s::after { transform: rotate(-135deg); }
.pt-grp[open] .pt-grp__s { border-bottom: 1px solid var(--ligne); }
/* Le contenu d'un accordéon ouvert était collé au filet de gauche : rien ne le distinguait
   de l'en-tête qui le surplombe. On le met en RETRAIT — c'est ce décalage, et lui seul, qui
   dit « ceci est DANS ce groupe ». 15 px → 35 px. */
.pt-grp > ul { margin: 0; padding: 6px 15px 12px 35px; }
.pt-grp__ency { margin: 10px 15px 0 35px; font-size: .82rem; }
.pt-grp__ency a { color: var(--eau); }
.pt-grp__plus { margin: 0 15px 14px 35px; font-size: .82rem; }
.pt-grp__plus a { color: var(--eau); font-weight: 700; }

/* ---------- bulletins « eau du robinet » et « eau de source » ---------- */

/* La conclusion de l'ARS est citée mot pour mot : elle doit se voir comme une citation,
   pas comme notre parole. Nous n'avons pas qualité pour dire qu'une eau est potable. */
.be-ars {
	margin: 14px 0;
	padding: 12px 14px;
	border-left: 3px solid var(--eau);
	border-radius: 0 8px 8px 0;
	background: var(--papier);
	font-size: .92rem;
	line-height: 1.5;
}
.be-ars b { font-family: var(--titres); font-style: italic; }
.be-dist { font-variant: small-caps; letter-spacing: .02em; }

.be-nuance {
	margin: 10px 0;
	padding: 11px 13px;
	border-radius: 8px;
	background: var(--papier);
	border: 1px solid var(--ligne);
	font-size: .88rem;
	line-height: 1.55;
	color: var(--encre-2);
}
.be-nuance--ko { border-color: var(--tampon); color: var(--tampon); }

/* La synthèse est un contexte, jamais une promesse : couleur sobre, pas de feu vert. */
.be-syn {
	margin: 16px 0 6px;
	padding: 12px 14px;
	border-radius: 10px;
	border: 1px solid var(--ligne);
	background: var(--papier);
	line-height: 1.5;
}
.be-syn--favorable   { border-left: 4px solid var(--ok); }
.be-syn--mitige      { border-left: 4px solid var(--encre-3); }
.be-syn--defavorable { border-left: 4px solid var(--tampon); }

.page-c { max-width: 780px; margin: 0 auto; padding: 20px 18px 54px; }
.page-c h1 {
	font-family: var(--titres);
	font-style: italic;
	font-weight: 800;
	font-size: clamp(1.55rem, 5.5vw, 2.1rem);
	font-variation-settings: "opsz" 80;
	line-height: 1.14;
	margin: 18px 0 4px;
	text-wrap: balance;
}
.page-c h1::after {
	content: "";
	display: block;
	width: 84px; height: 7px;
	margin-top: 8px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 8'%3E%3Cpath d='M2 5q11-5 23-1t22-1 22 2 19-3' fill='none' stroke='%2312718f' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center / 90px 8px;
}
.page-c h2 {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--titres);
	font-size: 1.12rem;
	font-variation-settings: "opsz" 40;
	margin: 30px 0 8px;
}
.page-c h2 .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 1.5px var(--carte-fond), 0 0 0 2.5px rgba(28,42,51,.15); }
.page-c .intro { color: var(--encre-2); font-size: .95rem; line-height: 1.6; }
.page-c .intro a, .page-c li a, .p-pied a { color: var(--eau); }

/* lettrine du bloc éditorial */
.p-edito::first-letter {
	font-family: var(--titres);
	font-style: italic;
	font-weight: 800;
	font-size: 3.1em;
	line-height: .85;
	float: left;
	padding: 4px 8px 0 0;
	color: var(--encre);
}

.page-c ul { list-style: none; margin: 0; padding: 0; }
.page-c li {
	display: flex;
	align-items: baseline;
	gap: 9px;
	padding: 10px 2px;
	border-bottom: 1px dashed var(--ligne);
	font-size: .9rem;
	flex-wrap: wrap;
}
.page-c li b { font-weight: 700; }
.page-c li small { color: var(--encre-3); }
.page-c li a { margin-left: auto; font-size: .78rem; white-space: nowrap; }
.p-potable {
	font-size: .68rem;
	font-weight: 700;
	color: #fff;
	background: var(--ok);
	border-radius: 6px;
	padding: 2px 8px;
}
.p-nonpotable { background: var(--tampon); }
.p-releve { font-size: .74rem; font-weight: 700; white-space: nowrap; }

/* entrées détaillées des pages communes */
.pt-item { flex-direction: column; align-items: stretch; gap: 3px; }
.pt-l1 { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.pt-l1 a { margin-left: auto; font-size: .78rem; white-space: nowrap; color: var(--eau); }
.pt-l2 { display: flex; flex-direction: column; gap: 2px; }
.pt-l2 small { color: var(--encre-3); }
.pt-desc {
	font-family: var(--titres);
	font-style: italic;
	font-size: .84rem;
	color: var(--encre-2);
}

.p-villes {
	margin: 28px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--filet, rgba(32, 48, 58, .16));
	font-size: .92rem;
	line-height: 1.9;
}
.p-villes__t { color: var(--encre-2); font-weight: 600; margin-right: 4px; }
.p-villes a { color: var(--eau); text-decoration: none; white-space: nowrap; }
.p-villes a:hover { text-decoration: underline; }

/* FAQ de l'encyclopédie (accordéon) */
.faq { margin: 8px 0 4px; }
.faq-i {
	border-top: 1px solid var(--filet, rgba(32, 48, 58, .16));
	padding: 2px 0;
}
.faq-i:last-child { border-bottom: 1px solid var(--filet, rgba(32, 48, 58, .16)); }
.faq-i summary {
	cursor: pointer;
	padding: 12px 4px;
	font-weight: 600;
	list-style: none;
	position: relative;
	padding-right: 28px;
}
.faq-i summary::-webkit-details-marker { display: none; }
.faq-i summary::after {
	content: "+";
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	font-weight: 400;
	color: var(--eau);
	font-size: 1.3em;
}
.faq-i[open] summary::after { content: "–"; }
.faq-r { padding: 0 4px 14px; color: var(--encre-2); }
.faq-r a { color: var(--eau); }

/* liste dense des communes d'un département (page-hub) */
.p-communes {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin: 14px 0 0;
	font-size: .9rem;
	line-height: 1.7;
}
.p-communes a { color: var(--eau); text-decoration: none; white-space: nowrap; }
.p-communes a:hover { text-decoration: underline; }

.p-cta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 20px 0 0;
	padding: 14px 24px;
	border-radius: 14px;
	background: var(--encre);
	color: var(--papier) !important;
	font-weight: 700;
	text-decoration: none;
	box-shadow: var(--ombre);
}
.p-cta:hover .cta-fleche { transform: translateX(5px); }

.p-faq h3 {
	font-family: var(--titres);
	font-style: italic;
	font-size: 1rem;
	margin: 18px 0 4px;
	padding-left: 12px;
	border-left: 3px solid var(--eau);
}
.p-faq p { margin: 0 0 4px 12px; font-size: .88rem; color: var(--encre-2); line-height: 1.55; }

.p-pied {
	margin-top: 40px;
	padding-top: 16px;
	border-top: 1px solid var(--ligne);
	font-size: .78rem;
	color: var(--encre-2);
	line-height: 1.8;
}

@media (max-width: 560px) {
	.p-entete { flex-wrap: wrap; }
	.p-entete .marque .marque__sous { display: none; }
}

/* ---------- matière & micro-interactions ---------- */

/* mascotte des états vides : le sourcier à la baguette */
.f-vide { text-align: center; }
.f-vide__mascotte {
	display: block;
	width: 74px; height: 74px;
	margin: 4px auto 10px;
	color: var(--encre-3);
	stroke-width: 2.6 !important;
}

/* défilement encré, discret */
.fiche__contenu, .suggestions, .legende {
	scrollbar-width: thin;
	scrollbar-color: var(--ligne) transparent;
}
.fiche__contenu::-webkit-scrollbar, .suggestions::-webkit-scrollbar, .legende::-webkit-scrollbar { width: 5px; }
.fiche__contenu::-webkit-scrollbar-thumb, .suggestions::-webkit-scrollbar-thumb, .legende::-webkit-scrollbar-thumb {
	background: var(--ligne);
	border-radius: 99px;
}

/* la main sent le bouton : pression courte et franche */
.bouton-rond:active, .f-actions button:active, .f-actions a:active,
.f-gpx:active, .couverture__cta button:active, .f-signal__choix button:active,
.f-signal__envoyer:active, .statut-zoom:active, .legende-bouton:active, .lg-ligne:active,
.f-ligne:active, .f-guider:active, .popup-retirer:active {
	transform: scale(.96);
}
.bouton-rond, .f-gpx, .couverture__cta button, .f-guider { transition: transform .1s ease, background .15s ease, color .15s ease, border-color .15s ease; }

/* focus au trait, cohérent avec le carnet */
.bouton-rond:focus-visible, button:focus-visible,
a:focus-visible, input:focus-visible, .f-ligne:focus-visible {
	outline: 2px dashed var(--eau);
	outline-offset: 2px;
	border-radius: 6px;
}
.recherche input:focus-visible { outline: none; }
.recherche input { caret-color: var(--tampon); }

/* chiffres alignés partout où l'on compare */
.fl-dist, .guidage__texte b, .statut, .f-barre__texte, .lg-ligne b, .f-badge {
	font-variant-numeric: tabular-nums;
}

/* la pastille de statut surgit du bas */
@keyframes statut-surgit {
	from { opacity: 0; transform: translateX(-50%) translateY(8px); }
	to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.statut:not([hidden]) { animation: statut-surgit .22s ease-out; }

/* préférence de sobriété : on coupe le décoratif, on garde l'information */
@media (prefers-reduced-motion: reduce) {
	.marque__goutte, .onde::before, .onde::after, .moi::after { animation: none; }
	.onde::before, .onde::after { opacity: .5; transform: scale(1.8); }
	.fiche, .fiche.ouverte .fiche__contenu, .statut:not([hidden]) { animation: none; transition: none; }
	.guidage__rose svg, .cta-fleche { transition: none; }
}

@media (max-width: 640px) {
	.marque__sous { display: none; }
	.p-entete .marque { padding: 8px 12px; }
	.p-entete .marque__nom { font-size: 1.05rem; padding-right: 16px; }
	.p-entete .marque__goutte { width: 11px; height: 11px; top: 8px; right: 8px; }
}

/* ---------- encyclopédie ---------- */
.p-fil { font-size: .78rem; margin: 4px 0 0; }
.p-fil a { color: var(--eau); text-decoration: none; }
.y-corps p { margin: 0 0 10px; }
.y-corps code {
	font-size: .82em;
	background: var(--papier);
	border: 1px solid var(--ligne);
	border-radius: 5px;
	padding: 1px 6px;
}
.h-ency {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px; height: 20px;
	border-radius: 50%;
	border: 1.5px solid var(--eau);
	color: var(--eau) !important;
	font-size: .72rem;
	font-weight: 700;
	text-decoration: none;
	font-family: var(--texte);
	font-style: normal;
}

/* ---------- compte & abonnement ---------- */
#btn-compte.connecte { border-color: var(--eau); color: var(--eau); }
#btn-compte.premium { background: var(--eau); border-color: var(--eau); color: var(--carte-fond); }

.c-form { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.c-form input {
	padding: 12px 14px;
	border-radius: 10px;
	border: 1px solid var(--ligne);
	background: var(--carte-fond);
	font-family: var(--texte);
	font-size: .95rem;
	color: var(--encre);
}
.c-form input:focus { outline: none; border-color: var(--eau); }
.c-abo {
	padding: 13px;
	border-radius: 10px;
	border: none;
	background: var(--eau);
	color: #fff;
	font-family: var(--texte);
	font-weight: 700;
	font-size: .9rem;
	cursor: pointer;
}
.c-abo:disabled { opacity: .5; cursor: default; }
.c-retour { font-size: .85rem; line-height: 1.45; }
.c-retour--ok { color: var(--ok); font-weight: 700; }
.c-retour--ko { color: var(--tampon); font-weight: 700; }
.c-mail { font-family: var(--titres); font-size: 1.05rem; margin: 2px 0 8px; }
.c-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .78rem;
	font-weight: 700;
	padding: 5px 12px;
	border-radius: 999px;
	border: 1px solid var(--ligne);
	color: var(--encre-2);
	background: var(--papier);
}
.c-badge--plus { background: var(--eau); border-color: var(--eau); color: #fff; }
.c-badge svg { width: 14px; height: 14px; }
.c-lien {
	margin-top: 16px;
	border: none;
	background: none;
	color: var(--encre-3);
	font-family: var(--texte);
	font-size: .82rem;
	text-decoration: underline;
	cursor: pointer;
	padding: 0;
}

/* carte d'offre Où Boire+ */
.c-offre {
	margin: 14px 0 4px;
	padding: 16px;
	border: 1.5px solid var(--eau);
	border-radius: 14px;
	background: linear-gradient(180deg, rgba(18,113,143,.06), transparent);
}
.c-offre__t {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--titres);
	font-weight: 700;
	font-size: 1.02rem;
	color: var(--encre);
	margin-bottom: 10px;
}
.c-offre__t svg { width: 18px; height: 18px; color: var(--eau); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.c-offre ul { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.c-offre li { display: flex; align-items: center; gap: 9px; font-size: .86rem; color: var(--encre); }
.c-offre li svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--eau); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.c-offre__prix {
	font-family: var(--titres);
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--encre);
	margin-bottom: 12px;
	font-variant-numeric: tabular-nums;
}

/* pastille « + » Où Boire+ (fonds de carte verrouillés) */
.cl-plus {
	display: inline-block;
	margin-left: 5px;
	min-width: 15px; height: 15px;
	line-height: 15px;
	padding: 0 3px;
	text-align: center;
	background: var(--eau);
	color: #fff;
	border-radius: 999px;
	font-family: var(--texte);
	font-size: .7rem;
	font-weight: 700;
	vertical-align: middle;
}

/* pendant l'édition des filtres détaillés, on libère la place */


/* ================================================================
   MENU — feuille dépliante (mobile)
   ================================================================ */

.menu-liste { display: flex; flex-direction: column; margin-top: 6px; }
.menu-l {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 13px 8px;
	background: none;
	border: none;
	border-bottom: 1px solid var(--ligne);
	border-radius: 10px;
	color: var(--encre);
	font-family: var(--texte);
	text-align: left;
	cursor: pointer;
}
.menu-l:last-child { border-bottom: none; }
.menu-l:hover, .menu-l:active { background: var(--papier); }
.menu-l__ic { width: 21px; height: 21px; flex: 0 0 auto; color: var(--eau); }
.menu-l__t { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.menu-l__t b { font-family: var(--titres); font-weight: 600; font-size: 1rem; }
.menu-l__t small {
	color: var(--encre-3);
	font-size: .76rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.menu-l__plus {
	flex: 0 0 auto;
	font-family: var(--titres);
	font-style: italic;
	font-weight: 700;
	font-size: .72rem;
	line-height: 1;
	padding: 4px 7px;
	border-radius: 999px;
	background: var(--tampon);
	color: var(--carte-fond);
}
.est-premium .menu-l__plus { display: none; }

/* ================================================================
   MOBILE — la carte d'abord
   Une seule barre en haut (logo · langue · recherche · menu), les filtres
   en pastilles juste dessous, et deux boutons flottants en bas à droite.
   Tout le reste se replie dans le menu : c'est la grammaire des
   applications de cartographie, et elle rend la carte à l'usager.
   ================================================================ */

@media (max-width: 899px) {

	/* --- en-tête sur une seule ligne (carte seulement : le carnet garde son mot-logo) --- */
	.haut { flex-wrap: nowrap; align-items: center; gap: 7px; }
	.haut .marque {
		flex: 0 0 auto;
		width: 40px; height: 40px;
		padding: 0;
		align-items: center;
		justify-content: center;
		border-radius: 12px;
	}
	.haut .marque__nom, .haut .marque__sous { display: none; }
	.haut .marque__goutte {
		position: static;
		width: 21px; height: 21px;
		top: auto; right: auto;
		opacity: 1;
	}
	/* --- la recherche se replie derrière une loupe --- */
	.recherche { display: none; }
	#btn-recherche { display: inline-flex; }
	body.recherche-ouverte .recherche { display: block; flex: 1 1 auto; min-width: 0; max-width: none; }
	body.recherche-ouverte .marque,
	body.recherche-ouverte .langue-menu,
	body.recherche-ouverte #btn-recherche,
	body.recherche-ouverte #btn-menu { display: none; }
	body.recherche-ouverte #recherche-fermer { display: inline-flex; }
	/* Les actions sont collées à droite ; le burger ferme la marche, sous le pouce. */
	.haut__actions { flex: 0 0 auto; gap: 6px; margin-left: auto; }
	#btn-favoris, #btn-compte { display: none; }   /* → repliés dans le menu */
	/* Ordre de lecture : chercher, comprendre, puis tout le reste. */
	#btn-recherche { order: 1; }
	#btn-info { order: 2; display: inline-flex; }
	#btn-menu { order: 3; display: inline-flex; }
	#recherche-fermer { order: 4; }

	/* --- filtres en pastilles sous la recherche --- */

	/* --- messages : juste sous l'en-tête, jamais sur les boutons --- */
	.statut {
		top: calc(62px + env(safe-area-inset-top));
		bottom: auto;
	}

	/* --- la fiche d'un point n'est qu'un aperçu : la carte reste lisible --- */
	.fiche--apercu { max-height: 46vh; }
	.fiche--apercu.fiche--haute { max-height: 86vh; }

	/* --- deux boutons flottants, comme les cartes qu'on connaît --- */
	#itineraire { display: none; }   /* premium : replié dans le menu */

	/* « Emporter la zone hors-ligne » était introuvable sur mobile — replié dans le menu —
	   alors que c'est LÀ qu'il sert : on prépare une rando sur son téléphone, pas sur son
	   bureau. Il reparaît, en pastille (le libellé ne tiendrait pas), entre les calques et le
	   GPS, exactement où l'ordre du DOM le place déjà. */
	#packs {
		display: inline-flex;
		width: 42px;
		padding: 0;
		justify-content: center;
	}
	#packs > span { display: none; }   /* le libellé « Hors-ligne » : gardé pour le bureau */
	#autour { display: inline-flex; }        /* action reine : jamais à trois taps */
	#calques { display: inline-flex; }
	/* Le contrôle Leaflet est minuscule, ses radios sont intouchables, et la pastille
	   de statut passait par-dessus : sous 900px, la feuille de vignettes le remplace. */
	.leaflet-control-layers { display: none; }
	.outils { bottom: calc(22px + env(safe-area-inset-bottom)); }
	.legende-zone { bottom: calc(22px + env(safe-area-inset-bottom)); }
	.guidage { bottom: calc(22px + env(safe-area-inset-bottom)); }
	/* Le bandeau de guidage est une pilule centrée, à la MÊME hauteur que les outils : il les
	   heurte. On les EFFAÇAIT (opacity: 0) — disproportionné, car pendant un guidage on veut
	   toujours pouvoir changer de fond de carte ou se recentrer. On les SOULÈVE au-dessus du
	   bandeau (≈48 px de haut) au lieu de les supprimer. */
	body.guidage-actif .outils { bottom: calc(82px + env(safe-area-inset-bottom)); }

	/* La colonne d'outils n'était effacée que parce qu'un bouton LARGE (« Le plus proche »)
	   heurtait la légende. Ce bouton a été retiré : il ne reste que des pastilles rondes, qui
	   restent à plus de 70 px de la légende même sur un écran de 320 px. Plus rien à masquer.
	   ⚠️ Ne pas réintroduire de `opacity: 0` sur `.outils` : l'usager perdait ses calques et
	   son GPS pour avoir ouvert une légende. */

	/* --- la carte respire : on pince pour zoomer --- */
	.leaflet-control-zoom { display: none; }
	.leaflet-top.leaflet-right { margin-top: calc(62px + env(safe-area-inset-top)); }
	.leaflet-bottom.leaflet-left { margin-bottom: 0; }
	.leaflet-bottom.leaflet-right { margin-bottom: 0; }
	.leaflet-control-attribution { font-size: .62rem; }
}

/* ================================================================
   VOILE DE PROSPECTION
   La carte nue ne dit rien de vrai : tant qu'aucun point n'est relevé,
   on la couvre. Une goutte tombe, l'onde se propage — c'est le geste
   du sourcier, pas une roue qui tourne.
   ================================================================ */

.voile {
	position: absolute;
	inset: 0;
	z-index: 1250;              /* au-dessus de la fiche (1200) ; .haut est hors de main, donc toujours devant */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
	padding: 80px 24px 48px;
	background:
		repeating-radial-gradient(circle at 50% 42%,
			transparent 0 26px,
			rgba(18, 113, 143, .045) 26px 27px),
		radial-gradient(circle at 50% 42%, rgba(18, 113, 143, .08), transparent 60%),
		var(--papier);
	opacity: 1;
	transition: opacity .34s ease;
}
.voile[hidden] { display: none; }
.voile--sort { opacity: 0; pointer-events: none; }

/* la scène : trois ondes qui s'élargissent, une goutte qui tombe dedans */
.voile__scene {
	position: relative;
	width: 148px;
	height: 148px;
	flex: 0 0 auto;
}
.voile__onde {
	position: absolute;
	top: 50%; left: 50%;
	width: 140px; height: 140px;
	margin: 0;
	border: 2px solid var(--eau);
	border-radius: 50%;
	opacity: 0;
	transform: translate(-50%, -50%) scale(.12);
	animation: voile-onde 2.6s cubic-bezier(.22, .61, .36, 1) infinite;
}
.voile__onde:nth-child(2) { animation-delay: .87s; }
.voile__onde:nth-child(3) { animation-delay: 1.74s; }

.voile__goutte {
	position: absolute;
	top: 50%; left: 50%;
	width: 34px; height: 34px;
	fill: var(--eau);
	stroke: none;
	transform: translate(-50%, -170%);
	animation: voile-chute 2.6s cubic-bezier(.5, 0, .75, .3) infinite;
}

@keyframes voile-onde {
	0%   { transform: translate(-50%, -50%) scale(.12); opacity: 0; }
	14%  { opacity: .55; }
	100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}
@keyframes voile-chute {
	0%, 6%  { transform: translate(-50%, -170%) scale(.86); opacity: 0; }
	16%     { opacity: 1; }
	32%     { transform: translate(-50%, -52%) scale(1); opacity: 1; }
	38%     { transform: translate(-50%, -44%) scale(1.22, .68); opacity: .55; }
	46%,
	100%    { transform: translate(-50%, -44%) scale(.18); opacity: 0; }
}

.voile__titre {
	margin: 22px 0 4px;
	font-family: var(--titres);
	font-style: italic;
	font-size: 1.32rem;
	color: var(--encre);
	text-align: center;
}
.voile__sous {
	margin: 0;
	min-height: 1.2em;                 /* la rotation des messages ne fait pas sauter la mise en page */
	font-size: .85rem;
	color: var(--encre-2);
	text-align: center;
	animation: voile-souffle 2.4s ease-in-out infinite;
}
@keyframes voile-souffle {
	0%, 100% { opacity: .55; }
	50%      { opacity: 1; }
}

.voile__jauge {
	width: 150px; height: 3px;
	margin-top: 22px;
	border-radius: 2px;
	background: var(--ligne);
	overflow: hidden;
}
.voile__jauge i {
	display: block;
	width: 42%; height: 100%;
	border-radius: 2px;
	background: var(--eau);
	animation: voile-jauge 1.4s ease-in-out infinite;
}
@keyframes voile-jauge {
	0%   { transform: translateX(-110%); }
	100% { transform: translateX(250%); }
}

@media (prefers-reduced-motion: reduce) {
	.voile__onde,
	.voile__goutte,
	.voile__sous,
	.voile__jauge i { animation: none; }
	.voile__onde:nth-child(1) { opacity: .45; transform: translate(-50%, -50%) scale(1); }
	.voile__onde:nth-child(2) { opacity: .3;  transform: translate(-50%, -50%) scale(.66); }
	.voile__onde:nth-child(3) { opacity: .2;  transform: translate(-50%, -50%) scale(.34); }
	.voile__goutte { transform: translate(-50%, -50%); opacity: 1; }
	.voile__jauge i { width: 100%; }
}

@media (max-width: 899px) {
	.voile { padding-top: 76px; }   /* dégage l'en-tête */
	.voile__scene { width: 128px; height: 128px; }
	.voile__onde { width: 122px; height: 122px; }
	.voile__titre { font-size: 1.2rem; }
}


/* ================================================================
   FOND DE CARTE — feuille de vignettes (mobile)
   Rien ne dit mieux « satellite » ou « topographique » qu'une vraie
   tuile du fond lui-même : on montre le terrain, pas son nom.
   ================================================================ */

.calque-liste {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 8px;
}
.calque-l {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 6px;
	background: none;
	border: 1px solid var(--ligne);
	border-radius: 14px;
	font-family: var(--texte);
	color: var(--encre);
	text-align: left;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.calque-l:hover { border-color: var(--eau); }

.calque-l__vue {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: 9px;
	overflow: hidden;
	background: var(--papier);
	border: 1px solid var(--ligne);
}
.calque-l__vue img {
	display: block;
	width: 100%; height: 100%;
	object-fit: cover;
}

.calque-l__nom {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 2px 2px;
	font-size: .78rem;
	font-weight: 700;
	line-height: 1.2;
}

.calque-l.actif { border-color: var(--eau); box-shadow: 0 0 0 2px rgba(18, 113, 143, .16); }
.calque-l.actif .calque-l__nom { color: var(--eau); }
.calque-l.actif .calque-l__vue::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 9px;
	box-shadow: inset 0 0 0 2px var(--eau);
}
.calque-l.actif .calque-l__vue::before {
	content: '';
	position: absolute;
	top: 7px; right: 7px;
	z-index: 1;
	width: 21px; height: 21px;
	border-radius: 50%;
	background: var(--eau);
	box-shadow: 0 1px 4px rgba(28, 42, 51, .35);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fffdf6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");
	background-size: 13px 13px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

@media (max-width: 360px) {
	.calque-liste { grid-template-columns: 1fr; }
	.calque-l { flex-direction: row; align-items: center; gap: 10px; }
	.calque-l__vue { width: 88px; flex: 0 0 88px; }
}

/* ---------- surcouches (calques posés sur le fond) ---------- */

.sur-titre {
	margin: 20px 0 6px;
	font-family: var(--titres);
	font-style: italic;
	font-size: 1.02rem;
	color: var(--encre);
}
.sur-liste { display: flex; flex-direction: column; gap: 6px; }

.sur-l {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 11px 12px;
	background: var(--carte-fond);
	border: 1.5px solid var(--ligne);
	border-radius: 14px;
	color: var(--encre);
	font-family: var(--texte);
	text-align: left;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.sur-l:hover { border-color: var(--eau); }
.sur-l__ic { width: 22px; height: 22px; flex: 0 0 auto; color: var(--encre-3); }
.sur-l__t { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.sur-l__t b { font-family: var(--titres); font-weight: 600; font-size: .98rem; }
.sur-l__t small { color: var(--encre-3); font-size: .74rem; }

/* interrupteur : l'état se lit sans lire */
.sur-l__bascule {
	flex: 0 0 auto;
	position: relative;
	width: 38px; height: 22px;
	border-radius: 999px;
	background: var(--ligne);
	transition: background .18s ease;
}
.sur-l__bascule::after {
	content: '';
	position: absolute;
	top: 3px; left: 3px;
	width: 16px; height: 16px;
	border-radius: 50%;
	background: var(--carte-fond);
	box-shadow: 0 1px 3px rgba(28, 42, 51, .3);
	transition: transform .18s ease;
}
.sur-l.actif { border-color: var(--eau); background: rgba(18, 113, 143, .05); }
.sur-l.actif .sur-l__ic { color: var(--eau); }
.sur-l.actif .sur-l__bascule { background: var(--eau); }
.sur-l.actif .sur-l__bascule::after { transform: translateX(16px); }


/* ---------- « Aller au plus proche » : l'action héroïque, dans la feuille ---------- */

.f-proche {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	margin: 10px 0 4px;
	padding: 14px 16px;
	border: 1px solid var(--eau);
	border-radius: 14px;
	background: var(--eau);
	color: #fff;
	font-family: var(--titres);
	font-style: italic;
	font-weight: 700;
	font-size: 1.02rem;
	cursor: pointer;
	box-shadow: 0 3px 12px rgba(18, 113, 143, .3);
	transition: background .15s ease, transform .1s ease;
}
.f-proche svg { width: 20px; height: 20px; }
.f-proche:hover { background: #0d5f79; border-color: #0d5f79; }
.f-proche:active { transform: scale(.985); }


/* ================================================================
   COMMANDES DE CARTE — ce que font les cartes qu'on connaît
   ================================================================ */

/* Le bouton de position a quatre états. L'acquisition PULSE : un mouvement se
   lit en plein soleil, une teinte non. « Recentrer » se reconnaît à son anneau. */
#localiser.loc-cherche {
	border-color: var(--eau);
	color: var(--eau);
}
#localiser.loc-cherche::after {
	content: '';
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 2px solid var(--eau);
	animation: loc-pouls 1.5s cubic-bezier(.22, .61, .36, 1) infinite;
	pointer-events: none;
}
@keyframes loc-pouls {
	0%   { transform: scale(.82); opacity: .85; }
	100% { transform: scale(1.3);  opacity: 0; }
}
/* ⚠️ Il y avait ICI un `#localiser.suivi-libre { background: rgba(18, 113, 143, .08) }` :
   cette teinte REMPLAÇAIT le fond opaque du bouton par un bleu à 8 % d'opacité — on voyait
   la carte au travers, et le bouton devenait un fantôme, invisible sur fond clair. Et
   `suivi-libre` s'active dès qu'on cesse de recentrer (fermeture du guidage, main sur la
   carte) : le bouton « me localiser » s'évaporait au moment précis où l'on en avait besoin.
   Il est désormais ROUGE OPAQUE (voir plus haut, avec `suivi-actif`). Ne pas réintroduire
   une couleur de fond translucide sur un bouton posé au-dessus de la carte. */

/* Faisceau de cap : la direction se lit SUR la carte, pas dans un jargon. */
.moi__cap {
	position: absolute;
	left: 50%; top: 50%;
	width: 64px; height: 48px;
	z-index: 1;
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, -100%) rotate(0deg);
	transform-origin: 50% 100%;
	background: radial-gradient(ellipse at 50% 100%, rgba(224, 48, 30, .45), rgba(224, 48, 30, 0) 74%);
	clip-path: polygon(50% 100%, 8% 2%, 92% 2%);
	transition: opacity .22s ease;
}
.moi--cap .moi__cap { opacity: 1; }

/* Le bandeau de guidage nomme son mode : « à la boussole · à vol d'oiseau ». */
.guidage__mode {
	font-size: .62rem;
	letter-spacing: .04em;
	opacity: .6;
	white-space: nowrap;
}

/* Échelle métrique : on sait ce que vaut un centimètre. */
.leaflet-control-scale-line {
	background: rgba(255, 253, 246, .78) !important;
	border: 1px solid var(--ligne) !important;
	border-top: none !important;
	color: var(--encre-2) !important;
	font-family: var(--texte) !important;
	font-size: .62rem !important;
	line-height: 1.2 !important;
	padding: 1px 5px !important;
	text-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
	#localiser.loc-cherche::after { animation: none; opacity: .6; }
}

/* Observation ONDE hors campagne (plus de 60 jours) : on la montre, datée, mais
   elle ne pèse pas dans la synthèse — le gris le dit sans phrase. */
.f-cond__vieux { opacity: .62; }

/* Divulgation de traduction automatique (encyclopédie, langues ≠ fr). Discrète mais visible :
   Google demande que l'usage de l'IA soit « self-evident to visitors through disclosures ». */
.y-trad {
	margin: 14px 0 20px;
	padding: 10px 13px;
	border-left: 3px solid var(--eau);
	border-radius: 0 8px 8px 0;
	background: var(--papier);
	font-size: .82rem;
	line-height: 1.5;
	color: var(--encre-2);
}
.y-trad a { color: var(--eau); }

/* ---------- crédits : la liste des sources (panneau « À propos ») ----------
   Chaque source est une ligne, avec son nom en gras, sa licence et un lien vers le service.
   Une attribution qu'on ne peut pas vérifier ne vaut rien — ni pour la licence, ni pour
   l'usager qui voudrait remonter à la donnée. */
.f-apropos h4 {
	margin: 16px 0 4px;
	font-family: var(--titres);
	font-style: italic;
	font-size: .96rem;
	color: var(--encre);
}
.f-src { list-style: none; margin: 0; padding: 0; }
.f-src li {
	margin: 0 0 8px;
	padding-left: 11px;
	border-left: 2px solid var(--ligne);
	font-size: .82rem;
	line-height: 1.5;
	color: var(--encre-2);
}
.f-src a { color: var(--eau); text-decoration: none; }
.f-src a:hover { text-decoration: underline; }
.f-src b { font-weight: 700; }

/* ---------- boussole (orientation de la carte) ----------
   N'apparaît que si la carte a quitté le nord — cf. rotationCarte() dans app.js.
   ⚠️ `[hidden]` est BATTU par `.outil { display: inline-flex }` (règle d'auteur contre
   feuille de style du navigateur) : sans la ligne ci-dessous, le bouton resterait affiché
   en permanence, au nord comme ailleurs.
   ⚠️ L'aiguille est le <svg> lui-même. En faire un <span> la ferait disparaître : les
   boutons ronds masquent leurs <span> (règle `.outil--ico > span`). */
#boussole[hidden] { display: none; }

.boussole__aiguille {
	/* pas de transition : pendant le geste, l'aiguille doit COLLER au doigt, pas le suivre */
	will-change: transform;
}
.outil--ico .boussole__aiguille { width: 22px; height: 22px; }
/* Deux tons, comme une aiguille aimantée : la pointe qui montre le nord est colorée. */
.boussole__n { fill: var(--tampon, #c2452d); stroke: none; }
.boussole__s { fill: var(--encre-3, #8b9aa4); stroke: none; }

/* La voie la plus proche (BAN) et la nature IGN, dans les listes de commune.
   La voie passe DEVANT la direction : « à 1,2 km au SE du centre » ne situe rien quand dix
   fontaines partagent la même direction. « Route d'Intras, à 12 m » situe. */
.pt-voie { font-weight: 700; color: var(--encre); }
.pt-nature {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--papier);
	border: 1px solid var(--ligne);
	font-size: .7rem;
	font-weight: 600;
	color: var(--encre-2);
	vertical-align: middle;
}

/* La voie la plus proche, en tête de la fiche — c'est elle qui SITUE le point quand il
   s'appelle « Fontaine » et rien de plus (86 % des points OSM n'ont aucun nom). Elle vivait
   en <small> gris sous la commune : la seule information utile, en plus petit que le reste. */
.f-voie { display: block; color: var(--encre); font-size: .95rem; line-height: 1.3; }
.f-voie span { font-weight: 400; color: var(--encre-2); }

/* La nature déclarée par l'IGN — « Source captée », « Affleurement d'eau souterraine » —
   quand elle apporte quelque chose que le nom ne dit pas. */
.f-nature {
	margin: -2px 0 6px;
	font-family: var(--titres);
	font-style: italic;
	font-size: .92rem;
	color: var(--encre-2);
}

/* Le bouton « Aller à l'eau la plus proche » dit désormais ce qu'il VISE : il n'est pas
   « le point d'eau le plus proche », il écarte les lavoirs, abreuvoirs, mares et réservoirs. */
.f-proche__t { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.f-proche__t b { font-size: .95rem; }
.f-proche__t small { font-size: .74rem; opacity: .8; font-weight: 400; }

/* « À proximité » reste un INVENTAIRE : il montre tout. Mais cliquer une ligne lance un
   guidage — on ne peut donc pas y envoyer quelqu'un sans dire qu'on n'y boit pas. Discret :
   il n'a pas à crier, il a à être là. */
.fl-pasboire {
	display: inline-block;
	margin-top: 2px;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--papier);
	border: 1px solid var(--ligne);
	font-size: .68rem;
	font-weight: 600;
	color: var(--encre-2);
}
.fl-pasboire--ko {
	background: rgba(224, 48, 30, .08);
	border-color: rgba(224, 48, 30, .35);
	color: #b3261e;
}

/* Le chiffre de la voie disait « à 17 m » — et se lisait « à 17 m DE VOUS ». C'est la
   distance entre le POINT D'EAU et l'adresse connue la plus proche. On l'écrit. */
.f-voie__q { display: block; font-weight: 400; font-size: .78rem; color: var(--encre-2); margin-top: 1px; }

/* « À combien suis-je de ce point ? » — la première question qu'on se pose en ouvrant une
   fiche. Elle n'apparaît que si le GPS est actif : sans position, pas de chiffre inventé.
   À VOL D'OISEAU, et on le dit — le guidage, lui, donne la vraie distance à pied. */
.f-vous {
	display: flex;
	flex-direction: column;
	margin: 6px 0 2px;
	line-height: 1.25;
}
.f-vous b {
	font-family: var(--titres);
	font-style: italic;
	font-size: 1.05rem;
	color: var(--eau);
}
.f-vous small { font-size: .74rem; color: var(--encre-2); }

/* La VILLE, en tête de fiche. « Où est-ce ? » vient avant « qu'est-ce que c'est ? » — elle
   était noyée sous les badges, après le titre et la distance. */
.f-ville {
	/* À DROITE du titre, alignée sur sa première ligne de base. Elle se comprime plutôt que de
	   pousser le titre (`flex: 0 1 auto`), et ne dépasse jamais 45 % — un nom long comme
	   « Saint-Bonnet-en-Champsaur » ne doit pas manger le titre. */
	flex: 0 1 auto;
	max-width: 45%;
	margin: 0;
	text-align: right;
	font-size: .82rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: .01em;
	color: var(--encre-2);
}
.f-ville:empty { display: none; }   /* remplie en différé : pas de ligne vide qui saute */
.f-ville a { color: var(--eau); text-decoration: none; }
.f-ville a:hover { text-decoration: underline; }
.f-ville span { font-weight: 400; }

/* « à 340 m de vous (à vol d'oiseau) » — la parenthèse suffit, la phrase était de trop. */
.f-vous { flex-direction: row; align-items: baseline; gap: 6px; }
.f-vous span { font-size: .76rem; color: var(--encre-2); }

/* CHAQUE point de « À proximité » dit son statut, pas seulement les mauvais.
   Un silence, dans une liste où un point crie « non potable », se lit comme « potable » —
   alors qu'il ne veut dire que « on ne sait pas ». C'est le pire malentendu possible sur une
   carte d'eau potable. Les quatre statuts sont écrits, et ils se distinguent au premier
   coup d'œil : le rouge arrête, le vert autorise, le gris avoue. */
.fl-pot {
	display: inline-block;
	margin-top: 3px;
	padding: 1px 7px;
	border-radius: 999px;
	border: 1px solid transparent;
	font-size: .68rem;
	font-weight: 600;
	line-height: 1.5;
}
.fl-pot--ko   { background: rgba(224, 48, 30, .09);  border-color: rgba(224, 48, 30, .35);  color: #b3261e; }
.fl-pot--ok   { background: rgba(0, 161, 92, .10);   border-color: rgba(0, 161, 92, .35);   color: #00784a; }
.fl-pot--info { background: rgba(11, 95, 214, .08);  border-color: rgba(11, 95, 214, .30);  color: #0b5fd6; }
.fl-pot--gris { background: var(--papier);           border-color: var(--ligne);            color: var(--encre-2); }

/* Les cartes hors-ligne n'appartiennent pas au site, mais à l'ORIGINE — donc à la langue.
   Elles ne peuvent pas franchir un changement de langue (le navigateur cloisonne le
   stockage, et rien n'y change quoi que ce soit). On ne peut pas l'empêcher ; on peut
   empêcher que le randonneur le découvre dans une vallée sans réseau. */
.f-pack__lg {
	margin-top: 8px;
	font-size: .82rem;
	color: var(--encre-2);
}
.f-pack__dette {
	text-align: left;
	line-height: 1.5;
	border-color: rgba(201, 134, 11, .45);
	background: rgba(201, 134, 11, .07);
}
.f-pack__dette b { color: var(--encre); }
.f-pack__retour {
	display: block;
	margin-top: 10px;
	font-weight: 600;
	color: var(--eau);
}

/* La carte est PARTIELLE, et on le dit. Quand OpenStreetMap nous rationne, le serveur sert
   la dernière copie connue, ou les seuls points officiels — qui, en ville, sont presque
   rien (51 points dans tout Paris). Une carte amputée annoncée est acceptable ; une carte
   amputée silencieuse fait conclure à l'usager qu'il n'y a pas d'eau. Ambre : ce n'est pas
   une erreur, c'est une réserve. */
.statut--partiel {
	border-color: rgba(201, 134, 11, .55);
	background: #fffaf0;
	color: #8a5a06;
}
.statut--partiel svg {
	width: 15px; height: 15px;
	vertical-align: -3px;
	margin-right: 7px;
}

/* La ligne d'état de la connexion dans le loader GPS. Le GPS marche sans réseau, mais son
   PREMIER point est bien plus lent sans l'assistance réseau : on le dit, en ambre, plutôt
   que de laisser l'usager croire à un bug quand ça traîne. Discrète — c'est un avertissement,
   pas une alarme — et repliée dès que le réseau revient. */
.voile__reseau {
	margin: 10px auto 0;
	max-width: 22em;
	padding: 6px 12px;
	border-radius: 10px;
	background: rgba(201, 134, 11, .12);
	border: 1px solid rgba(201, 134, 11, .35);
	color: #8a5a06;
	font-size: .8rem;
	line-height: 1.4;
	text-align: center;
}
.voile__reseau[hidden] { display: none; }
@media (prefers-color-scheme: dark) {
	.voile__reseau { background: rgba(230, 170, 60, .14); color: #e9c07a; border-color: rgba(230, 170, 60, .4); }
}

/* ── ZOOM +/− à gauche de la barre de recherche ─────────────────────────────────
   Leaflet gère le zoom molette/pincement, mais son bouton natif est désactivé
   (zoomControl:false, design custom). Ces deux boutons le rendent, en pilule
   compacte, à gauche de la loupe — comme demandé. */
.zoom-ctrl {
	display: inline-flex;
	flex: 0 0 auto;
	background: var(--carte-fond);
	border: 1px solid var(--ligne);
	border-radius: var(--rayon);
	box-shadow: var(--ombre);
	overflow: hidden;
}
.zoom-ctrl__b {
	width: 40px;
	height: 44px;                 /* même hauteur que le champ de recherche */
	border: none;
	background: transparent;
	color: var(--encre);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.zoom-ctrl__b + .zoom-ctrl__b { border-left: 1px solid var(--ligne); }
.zoom-ctrl__b svg {
	width: 20px; height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}
.zoom-ctrl__b:hover { background: var(--papier); }
.zoom-ctrl__b:disabled { opacity: .35; cursor: default; }   /* zoom min/max atteint */

/* Mobile : la barre de recherche se replie derrière une loupe, mais le zoom reste
   utile en permanence — on le garde visible, à gauche de l'en-tête. */
@media (max-width: 900px) {
	.zoom-ctrl__b { width: 36px; height: 40px; }
	.zoom-ctrl__b svg { width: 18px; height: 18px; }
	/* Quand la recherche mobile est dépliée, elle prend tout l'en-tête : le zoom
	   s'efface le temps de la saisie, il reviendra à la fermeture. */
	body.recherche-ouverte .zoom-ctrl { display: none; }
}