/* Température de l'eau, marées, courants (module public/assets/js/eau.js).
   Les trois niveaux : la FORME dit d'où vient la valeur, la couleur dit la température. */

.pt { --c: #888; display: inline-flex; align-items: center; justify-content: center; width: 2em; height: 2em; font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 0 2px rgba(0, 0, 0, 0.55); flex: none; }
.pt.mesure { background: var(--c); border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35); }
.pt.modele { background: repeating-linear-gradient(45deg, var(--c) 0 0.25em, color-mix(in srgb, var(--c) 60%, #fff) 0.25em 0.5em); border: 2px dashed #fff; border-radius: 0.2em; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45); }
.pt.deduite { background: #fff; color: var(--c); text-shadow: none; border: 2px dotted var(--c); border-radius: 50%; }
.pt.vide { background: #fff; color: var(--encre); text-shadow: none; border: 1px solid var(--encre); border-radius: 50%; }
.pt.derive { border-radius: 50% 50% 50% 0; }
.pt.vieux { opacity: 0.55; border-style: double; }
/* Mesure réelle que ses voisines contredisent : toujours montrée, barrée d'un « ? » */
.pt.douteuse { position: relative; opacity: 0.8; border-style: dashed; border-color: #1b1b1b; box-shadow: 0 0 0 1px #fff; }
.pt.douteuse::after { content: '?'; position: absolute; top: -0.55em; right: -0.55em; width: 1.25em; height: 1.25em; border-radius: 50%; background: #1b1b1b; color: #fff; font-size: 0.7rem; line-height: 1.25em; text-align: center; text-shadow: none; }
.eau-loin .leaflet-marker-icon.eau-pt .pt.douteuse::after { font-size: 0.7rem; }
.eau-etq.douteuse { background: #1b1b1b; color: #fff; border-color: #1b1b1b; }
.eau-doute { margin: 0.3rem 0; padding: 0.35rem 0.5rem; border-left: 3px solid #1b1b1b; background: #f3f1ea; font-size: 0.86em; }
.leaflet-marker-icon.eau-pt { background: none; border: 0; }
.leaflet-marker-icon.eau-pt .pt { width: 100%; height: 100%; }
/* Vue de loin : des pastilles sans chiffre */
.eau-loin .leaflet-marker-icon.eau-pt .pt { font-size: 0; border-width: 1px; transform: scale(0.5); }
.leaflet-marker-icon.eau-pt:focus-visible .pt { outline: 2px solid var(--bouee); outline-offset: 2px; }

.eau-aileron { color: #1d3a47; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45)); }
.eau-aileron svg { width: 100%; height: 100%; fill: currentColor; stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; }
.eau-aileron.autre { color: #3d6b3a; }
.eau-aileron.vieux { opacity: 0.45; }
.eau-goutte { color: #7a7f85; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45)); }
.eau-goutte svg { width: 100%; height: 100%; fill: currentColor; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.eau-goutte.vieux { opacity: 0.55; }
.eau-goutte.q-bonne, .eau-qualite .q-bonne { color: #1f8a4c; }
.eau-goutte.q-moyenne, .eau-qualite .q-moyenne { color: #c98a00; }
.eau-goutte.q-mauvaise, .eau-qualite .q-mauvaise { color: #c0392b; }
.eau-goutte.q-fermee, .eau-qualite .q-fermee { color: #1b1b1b; }
.eau-qualite .q-inconnue { color: #5d6368; }
.leaflet-tooltip.eau-courant { font-size: 0.78rem; font-style: italic; font-weight: 650; color: var(--encre); background: none; border: 0; box-shadow: none; padding: 0; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; white-space: nowrap; }
.leaflet-tooltip.eau-courant::before { display: none; }

/* Étiquette du niveau d'une valeur */
.eau-etq { display: inline-block; padding: 0.1em 0.55em; border-radius: 1em; font-size: 0.75rem; font-weight: 650; white-space: nowrap; }
.eau-etq.mesure { background: #e2f1e6; color: #1d5c33; border: 1px solid #b9dcc4; }
.eau-etq.modele { background: #fdf0d9; color: #7a4a05; border: 1px dashed #d9a441; }
.eau-etq.deduite { background: #fff; color: var(--encre); border: 1px dotted var(--encre); }
.eau-etq.membre { background: #ffd9cf; color: var(--encre); border: 1px solid #f3b3a3; }

/* Fiche d'une station, d'un point, et bloc « eau » de la fiche d'un lieu */
.eau-fiche { font-size: 0.9rem; line-height: 1.4; }
.eau-fiche h3 { margin: 0 1rem 0.1rem 0; font: 700 1rem/1.2 var(--texte); }
.eau-fiche p { margin: 0.35rem 0 0; }
.eau-fiche .type { margin: 0; color: var(--gris); }
.eau-fiche .valeur { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.6rem; margin: 0.5rem 0 0.1rem; }
.eau-fiche .valeur strong { font-size: 1.35rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.eau-fiche dl { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.7rem; margin: 0.6rem 0 0; }
.eau-fiche dt { color: var(--gris); }
.eau-fiche dd { margin: 0; overflow-wrap: anywhere; }
.eau-fiche .doux, .eau-legende .doux { color: var(--gris); }
.eau-fiche .ancienne, .eau-sources .ancienne { color: #a3122a; font-weight: 650; }
.eau-maree:empty { display: none; }
.eau-froid { margin: 0.5rem 0 0; padding: 0.4rem 0.55rem; border-left: 3px solid #2463c4; background: #e8f0fb; color: #12233f; }
.eau-normale { margin: 0.5rem 0 0; }
.eau-fourchette { margin: 0.6rem 0 0; padding-top: 0.5rem; border-top: 1px solid var(--trait); }
.eau-fourchette strong.grand { font-size: 1.15rem; }
.eau-fourchette ul { margin: 0.35rem 0 0; padding-left: 1.1rem; }
.eau-fourchette li { margin-top: 0.25rem; }
.eau-requin img { display: block; width: 100%; height: 8em; object-fit: cover; border-radius: 0.3em; margin-bottom: 0.4em; }
.leaflet-popup-content { max-height: 70vh; overflow-y: auto; }
.eau-membre { margin-left: 0.5rem; vertical-align: middle; }

/* Légende, visible quand un calque de l'eau est allumé */
.eau-legende { width: 15rem; max-width: 60vw; padding: 0.5rem 0.6rem; background: #ffffffee; border-radius: 0.5rem; box-shadow: 0 0.15rem 0.5rem #0005; font-size: 0.8rem; line-height: 1.35; }
.eau-degrade { height: 0.55rem; border-radius: 0.3rem; }
.eau-bornes { display: flex; justify-content: space-between; color: var(--gris); font-size: 0.72rem; }
.eau-legende ul { list-style: none; margin: 0.3rem 0 0; padding: 0; }
.eau-legende li { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.15rem; }
.eau-legende .pt { width: 1.1em; height: 1.1em; }
.eau-etat { margin: 0.35rem 0 0.2rem; color: var(--gris); }
.eau-etat:empty { display: none; }

/* Liste des sources */
.eau-sources { width: min(40rem, 94vw); max-height: 88vh; padding: 1rem 1.1rem; border: 0; border-radius: 0.6rem; background: var(--sable); color: var(--encre); box-shadow: 0 0.5rem 2rem #0007; }
.eau-sources::backdrop { background: #0b2b33aa; }
.eau-sources-tete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.eau-liste-sources { list-style: none; margin: 0.8rem 0 0; padding: 0; }
.eau-liste-sources > li { padding: 0.7rem 0; border-top: 1px solid var(--trait); font-size: 0.9rem; }
.eau-liste-sources h3 { display: flex; justify-content: space-between; gap: 1rem; font: 700 0.95rem/1.2 var(--texte); }
.eau-liste-sources h3 span { font-weight: 400; color: var(--gris); white-space: nowrap; }
.eau-liste-sources p { margin: 0.2rem 0 0; }
.eau-liste-sources details { margin-top: 0.3rem; color: var(--gris); }

@media (max-width: 40rem) {
	.eau-legende { width: 11rem; font-size: 0.74rem; }
}

/* Choix de l'unité, dans la légende */
.eau-unite { display: flex; gap: 0.25rem; margin: 0.4rem 0 0.2rem; }
.eau-unite button { font: inherit; font-weight: 600; padding: 0.1rem 0.6rem; border: 1px solid #9fb9bf; border-radius: 1rem; background: #fff; color: inherit; cursor: pointer; }
.eau-unite button[aria-pressed="true"] { background: #12343b; border-color: #12343b; color: #fff; }
.eau-legende .pt.douteuse { margin-right: 0.35em; }

/* Eau colorée par satellite : l'image est étirée par le navigateur, lissée */
.eau-image-sat { image-rendering: auto; pointer-events: none; }