/* .evq-related-row (public-table.js's river-pill preview sub-rows) matches
   here too — they lose the .evq-section-row class on purpose (see
   wrapRiverPills() in public-table.js) but are just as clickable to open the
   details panel (see section-details.js's delegated handlers), so they need
   the same pointer cursor/focus styling, not just the same click behavior. */
.evq-section-row,
.evq-related-row {
	cursor: pointer;
}

.evq-section-row:focus-visible,
.evq-related-row:focus-visible {
	outline: 2px solid var( --evq-accent, #1B4C96 );
	outline-offset: -2px;
}

.evq-col-hydro {
	white-space: nowrap;
}

/* --- Docked details sidebar (public-table.php only — the id is unique to
   that page's markup) -----------------------------------------------------
   A real flex column that sits to the left of the table and pushes it over,
   not an overlay: nothing here should ever dim or block interaction with the
   table. Open/closed state is the explicit .evq-details-collapsed class
   (toggled from .evq-details-toggle-btn or the panel's own .evq-details-close
   — never from clicking elsewhere on the page, see section-details.js) rather
   than a `hidden` attribute, so the width/opacity transition below always has
   something to animate and the panel's scroll position/loaded content survive
   a collapse. .evq-sections-layout is the flex row (sidebar + gutter + table)
   and also the element that breaks out to full viewport width — see the
   matching override of .evq-sections-table-wrap's own (now redundant) copy of
   that same trick in public-table.css. */
.evq-sections-layout {
	display: flex;
	align-items: flex-start;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
	padding: 0 24px 24px;
	box-sizing: border-box;
	gap: 4px;
}

.evq-sections-layout .evq-sections-table-wrap {
	width: auto;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	padding: 0;
	flex: 1 1 auto;
	min-width: 0; /* let the table card's own horizontal scroll do its job instead of forcing this flex item wider than the row */
}

.evq-section-details {
	flex: 0 0 auto;
	box-sizing: border-box;
	width: var( --evq-details-width, 380px );
	min-width: 280px;
	max-width: min( 720px, 90vw );
	position: sticky;
	top: 12px;
	max-height: calc( 100vh - 24px );
	overflow-y: auto;
	overflow-x: hidden;
	background: var( --evq-bg, #fff );
	border: 1px solid var( --evq-border, #e5e7eb );
	border-radius: var( --evq-radius, 10px );
	box-shadow: 0 1px 4px var( --evq-shadow, rgba( 0, 0, 0, 0.12 ) );
	transition: width 200ms ease, min-width 200ms ease, opacity 150ms ease, border-color 200ms ease;
}

.evq-section-details.evq-details-collapsed {
	width: 0;
	min-width: 0;
	border-color: transparent;
	box-shadow: none;
	opacity: 0;
	pointer-events: none;
}

@media ( max-width: 700px ) {
	.evq-section-details {
		width: var( --evq-details-width, 280px );
		min-width: 220px;
	}
}

/* Sits between the sidebar and the table at all times (even while the
   sidebar is collapsed) so its toggle button is always reachable to reopen
   the panel — only the drag handle inside it is hidden while collapsed,
   since there's nothing to resize. position:sticky (in addition to its
   scroll-docking job) also establishes the containing block the toggle
   button below is centered against via absolute positioning. */
.evq-details-gutter {
	flex: 0 0 auto;
	width: 20px;
	align-self: stretch;
	position: sticky;
	top: 12px;
	max-height: calc( 100vh - 24px );
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Widened from a bare 6px and given a faint always-on background (instead of
   fully transparent until hover) so the drag-to-resize handle actually reads
   as draggable at rest — previously indistinguishable from empty gutter
   space, so the panel's resizability wasn't discoverable without already
   knowing it was there. Now the gutter's only flex-flow child (the toggle
   button below was taken out of flow to float over it, see that rule), so
   flex:1 1 auto alone makes it span the gutter's full height rather than
   sharing it with a second item stacked below. */
.evq-details-resizer {
	flex: 1 1 auto;
	width: 8px;
	margin-top: 8px;
	border-radius: 4px;
	cursor: col-resize;
	background: var( --evq-border, #e5e7eb );
	opacity: 0.5;
	touch-action: none;
}

.evq-details-resizer:hover,
.evq-details-resizer.evq-details-resizing {
	opacity: 1;
}

.evq-section-details.evq-details-collapsed ~ .evq-details-gutter .evq-details-resizer {
	visibility: hidden;
}

/* ID-scoped (rather than the .evq-details-toggle-btn class alone) plus
   `all: revert` first, same defense as #evq-section-details .evq-details-close
   above: Elementor's global kit CSS (`.elementor-kit-7 button`) applies its
   own filled-pill look to every <button> on the page, and a plain class
   selector here doesn't reliably out-specify that combined class+element
   selector — confirmed live as this button rendering with Elementor's pill
   padding/background instead of the compact 20x40 chevron control below. An
   ID always wins regardless, and `all: revert` clears any other Elementor
   property (padding, box-shadow, font-family, ...) this rule doesn't
   explicitly re-declare, rather than fixing them one at a time as they turn up.

   position:absolute + top/left 50% + translate(-50%,-50%) takes it out of
   the gutter's flex flow entirely and centers it over the now full-height
   resizer track (see above) instead of being flex-stacked below it, which
   is what pinned it to the very bottom of the sidebar's height before. Its
   own DOM position (after the resizer) is what keeps it painting on top of
   that track without needing an explicit z-index. */
#evq-section-details-toggle {
	all: revert;
	box-sizing: border-box;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	width: 20px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font: inherit;
	border: 1px solid var( --evq-border, #e5e7eb );
	border-radius: 6px;
	background: var( --evq-bg, #fff );
	color: var( --evq-muted, #6b7280 );
	cursor: pointer;
	font-size: 13px;
	line-height: 1;
}

#evq-section-details-toggle:hover {
	color: var( --evq-accent, #1B4C96 );
	border-color: var( --evq-accent, #1B4C96 );
}

.evq-details-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 240px;
	padding: 24px;
	margin: 0;
	text-align: center;
	color: var( --evq-muted, #6b7280 );
	font-size: 14px;
	line-height: 1.5;
}

.evq-details-card {
	background: var( --evq-bg, #fff );
	padding: 20px;
	box-sizing: border-box;
	min-height: 100%;
}

.evq-details-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	border-bottom: 1px solid var( --evq-border, #e5e7eb );
	padding-bottom: 16px;
	margin-bottom: 16px;
}

.evq-details-header h3 {
	margin: 0 0 8px;
	font-size: 20px;
}

.evq-details-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

/* `.evq-details-close` isn't a .evq-btn, so (like .evq-create-trip-btn below)
   it needs its own defense against the site theme's global button CSS. */
#evq-section-details .evq-details-close {
	all: revert;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font: inherit;
	cursor: pointer;
	background: transparent;
	border: 1px solid var( --evq-border, #e5e7eb );
	border-radius: 999px;
	width: 32px;
	height: 32px;
	padding: 0;
	font-size: 18px;
	line-height: 1;
	color: var( --evq-muted, #6b7280 );
	flex-shrink: 0;
}

/* Fully self-contained (doesn't lean on .evq-btn/.evq-btn-primary) and
   !important throughout: the site theme's Elementor kit styles every bare
   <button> (`.elementor-kit-7 button` — one class + one element,
   specificity 0,1,1) which out-ranks a single plain class like `.evq-btn`
   alone (0,1,0) — so without this, the theme's 13px/35px padding + 36px
   radius + larger accent font-size were winning over ours, rendering this
   button oversized. `all: revert !important` first clears every property
   (not just the handful re-declared below) back to the UA default so
   nothing else the theme sets on `button` (letter-spacing, box-shadow, …)
   can leak in either; each property re-declared after it needs its own
   !important since `revert` doesn't carry the next declaration's priority. */
.evq-create-trip-btn {
	all: revert !important;
	box-sizing: border-box !important;
	flex-shrink: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	white-space: nowrap !important;
	font: inherit !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	padding: 8px 16px !important;
	border: 1px solid var( --evq-accent, #1B4C96 ) !important;
	border-radius: 999px !important;
	background: var( --evq-accent, #1B4C96 ) !important;
	color: #fff !important;
	text-decoration: none !important;
	cursor: pointer !important;
	box-shadow: 0 1px 2px var( --evq-shadow, rgba( 0, 0, 0, 0.12 ) ) !important;
	transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, border-color 120ms ease !important;
}

.evq-create-trip-btn:hover,
.evq-create-trip-btn:focus {
	background: var( --evq-accent-hover, #163c78 ) !important;
	border-color: var( --evq-accent-hover, #163c78 ) !important;
	color: #fff !important;
	transform: translateY( -1px );
	box-shadow: 0 4px 10px var( --evq-shadow, rgba( 0, 0, 0, 0.12 ) );
}

.evq-create-trip-btn:active {
	transform: translateY( 0 );
	box-shadow: 0 1px 2px var( --evq-shadow, rgba( 0, 0, 0, 0.12 ) );
}

.evq-create-trip-icon {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}

.evq-details-trips {
	margin-bottom: 26px;
}

.evq-details-comments {
	border-top: 1px solid var( --evq-border, #e5e7eb );
	padding-top: 20px;
	margin-top: 26px;
}

.evq-details-comments h4 {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --evq-muted, #6b7280 );
}

.evq-comments-list {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.evq-comment {
	border: 1px solid var( --evq-border, #e5e7eb );
	border-radius: var( --evq-radius, 10px );
	padding: 10px 12px;
	background: var( --evq-bg-subtle, #fafbfc );
}

.evq-comment-meta {
	font-size: 12px;
	margin-bottom: 4px;
}

.evq-comment-body {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	white-space: pre-wrap;
}

.evq-comment-actions {
	display: flex;
	gap: 12px;
	margin-top: 6px;
}

/* Reply/delete carry .evq-btn .evq-btn-link (see account-connect.css) — the
   theme-proof primitive. Nothing to declare here: a bare
   `background:none;border:none` rule, which is what used to be here, loses to
   the theme's global `button` styling. */

/* Replies nest arbitrarily deep (the tree is built client-side from
   parent_id), so the indent is per-level rather than a fixed set of depth
   classes. Kept small — this panel is a ~380px-wide docked column by default,
   and a larger step ran a deep thread out of usable width. */
.evq-comment-replies {
	list-style: none;
	margin: 10px 0 0;
	padding-left: 12px;
	border-left: 2px solid var( --evq-border, #e5e7eb );
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Empty until its comment's "Répondre" is clicked — no margin while empty, so
   it doesn't leave a gap under every comment in the thread. */
.evq-comment-reply-slot:not( :empty ) {
	margin-top: 10px;
}

.evq-comment-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.evq-comment-form textarea {
	font: inherit;
	font-size: 14px;
	padding: 8px 10px;
	border-radius: 6px;
	border: 1px solid var( --evq-border, #e5e7eb );
	background: var( --evq-bg, #fff );
	color: var( --evq-text, #1f2430 );
	min-height: 70px;
	resize: vertical;
}

.evq-comment-reply-form textarea {
	min-height: 54px;
}

/* Shown instead of the composer for a logged-out visitor (see
   commentLoginGateHtml() in section-details-core.js) — asking for the login
   before the writing, not after. */
.evq-comment-login-gate {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 12px;
	border: 1px dashed var( --evq-border, #e5e7eb );
	border-radius: var( --evq-radius, 10px );
	background: var( --evq-bg-subtle, #fafbfc );
}

.evq-comment-login-gate p {
	margin: 0;
	font-size: 13px;
}

.evq-comment-form-actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
}

/* --- Trips using this section (renderSectionTrips() in section-details-core.js) --- */

.evq-section-trips-list {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.evq-section-trip {
	border: 1px solid var( --evq-border, #e5e7eb );
	border-radius: var( --evq-radius, 10px );
	padding: 8px 12px;
	background: var( --evq-bg-subtle, #fafbfc );
	font-size: 14px;
}

.evq-section-trip a {
	color: var( --evq-accent, #1B4C96 );
	text-decoration: none;
	font-weight: 600;
}

.evq-section-trip a:hover {
	text-decoration: underline;
}

.evq-section-trip .evq-muted {
	font-size: 12px;
	font-weight: 400;
}

#evq-section-details .evq-details-close:hover {
	background: var( --evq-row-hover, #f7f9fc );
	color: var( --evq-text, #1f2430 );
}

.evq-details-description {
	font-size: 15px;
	line-height: 1.6;
	color: var( --evq-text, #1f2430 );
	margin: 0 0 20px;
}

.evq-details-links-group {
	margin-bottom: 20px;
}

.evq-details-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.evq-details-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	box-sizing: border-box;
	border: 1px solid var( --evq-border, #e5e7eb );
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	color: var( --evq-accent, #1B4C96 );
	background: var( --evq-bg-subtle, #fafbfc );
	transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.evq-details-link:hover {
	background: var( --evq-row-hover, #f7f9fc );
	border-color: var( --evq-accent, #1B4C96 );
	transform: translateY( -1px );
}

.evq-details-link-icon {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

/* Real file names (unlike the old flat "Carte 1"/"Carte 2" labels) can run
   long — clipped with an ellipsis rather than stretching the pill or wrapping
   mid-word; the full name is still available via the anchor's title attribute
   (set in buildLinks(), section-details-core.js) and, of course, the link
   target itself. */
.evq-details-link span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 220px;
}

.evq-details-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
	margin-bottom: 20px;
}

/* Every block in the panel is wrapped in this (buildInfoHtml() /
   buildRiverInfoHtml() in section-details-core.js). They carried no spacing of
   their own and ran into each other, leaning on whatever margin their inner
   elements happened to have — hence the explicit rhythm here. */
.evq-details-group {
	margin-bottom: 26px;
}

.evq-details-group:last-child {
	margin-bottom: 0;
}

.evq-details-group h4 {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --evq-muted, #6b7280 );
}

.evq-details-dl {
	margin: 0;
}

/* Boolean characteristics as pills (buildInfoGrid() in
   section-details-core.js) — same teal tag the public table's traits column
   uses. `.evq-tag` itself is declared here rather than borrowed from
   public-table.css: the fullmap and trip-planner pages render this panel
   without ever loading that stylesheet. */
.evq-details-traits {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 12px;
}

.evq-details-traits:last-child {
	margin-bottom: 0;
}

.evq-details-traits .evq-tag {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
}

.evq-details-traits .evq-tag-teal {
	background: var( --evq-tag-teal-bg, #e0f7f5 );
	color: var( --evq-tag-teal-fg, #0f766e );
}

/* Sources: attribution, not content — deliberately the quietest block in the
   panel (it had no styling at all and rendered at full body size, competing
   with the section's actual information). Long unbroken source URLs would
   otherwise push the panel into a horizontal scroll. */
.evq-details-sources {
	font-size: 12px;
	color: var( --evq-muted, #6b7280 );
}

.evq-details-sources h4 {
	margin-bottom: 4px;
	font-size: 11px;
}

.evq-details-sources p {
	margin: 0;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.evq-details-sources a {
	color: inherit;
	text-decoration: underline;
}

.evq-details-sources a:hover {
	color: var( --evq-accent, #1B4C96 );
}

.evq-details-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 0;
	border-bottom: 1px dashed var( --evq-border, #e5e7eb );
	font-size: 13px;
}

.evq-details-row:last-child {
	border-bottom: none;
}

.evq-details-row dt {
	color: var( --evq-muted, #6b7280 );
	font-weight: 600;
}

.evq-details-row dd {
	margin: 0;
	text-align: right;
	color: var( --evq-text, #1f2430 );
}

.evq-details-access p {
	font-size: 13px;
	line-height: 1.5;
	margin: 0 0 8px;
}

.evq-muted {
	color: var( --evq-muted, #6b7280 );
	font-size: 13px;
}

/* --- Hydro card --- */

.evq-details-hydro {
	background: var( --evq-bg-subtle, #fafbfc );
	border: 1px solid var( --evq-border, #e5e7eb );
	border-radius: var( --evq-radius, 10px );
	padding: 16px;
}

.evq-hydro-current {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	padding: 6px 14px;
	border-radius: 999px;
	margin-bottom: 6px;
}

.evq-hydro-value {
	font-size: 18px;
	font-weight: 700;
}

.evq-hydro-label {
	font-size: 13px;
	font-weight: 600;
}

.evq-hydro-chart {
	margin-top: 10px;
}

.evq-chart-title {
	display: block;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var( --evq-muted, #6b7280 );
	margin-bottom: 4px;
}

.evq-sparkline,
.evq-forecast-chart,
.evq-season-chart {
	display: block;
	width: 100%;
	height: auto;
	max-width: 730px;
	color: var( --evq-accent, #1B4C96 );
}

.evq-chart-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 3px 12px;
	margin-top: 4px;
}

.evq-chart-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	color: var( --evq-muted, #6b7280 );
}

.evq-chart-legend-swatch {
	display: inline-block;
	width: 10px;
	height: 2px;
	border-radius: 1px;
}

.evq-hydro-station,
.evq-hydro-attribution {
	font-size: 12px;
	color: var( --evq-muted, #6b7280 );
	margin: 8px 0 0;
}

.evq-hydro-missing-info {
	font-size: 12px;
	line-height: 1.5;
	color: var( --evq-tag-amber-fg, #9a6700 );
	background: var( --evq-tag-amber-bg, #fff8e1 );
	border-radius: 8px;
	padding: 8px 10px;
	margin: 8px 0 0;
}

/* --- Map --- */

.evq-leaflet-map-wrap {
	position: relative;
	/* Contains Leaflet's own internal z-index stack (zoom controls at 1000,
	   popups at 700 — leaflet.css) to this element, same reasoning as
	   .evq-overview-map-panel (sections-overview-map.css) — without an
	   explicit z-index, position:relative alone doesn't create a new
	   stacking context, so those values (and .evq-map-fullscreen-btn's own
	   1000 below) compete directly against the site's sticky header instead
	   of staying scoped to the map. */
	z-index: 0;
}

/* "Plein écran" — icon-only, monochrome (the accent blue read as a loud
   call-to-action for what is a secondary control). Sits right under the
   composition block, pulled up against it. Tokens, so it inverts cleanly in
   dark mode: white ground / black glyph in light, the reverse in dark. */
.evq-details-fullscreen {
	display: flex;
	justify-content: flex-end;
	margin: -16px 0 26px;
}

.evq-fullscreen-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var( --evq-border, #e5e7eb );
	border-radius: 8px;
	background: var( --evq-bg, #fff );
	color: var( --evq-text, #1f2430 );
	text-decoration: none;
	transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.evq-fullscreen-btn:hover,
.evq-fullscreen-btn:focus-visible {
	background: var( --evq-text, #1f2430 );
	border-color: var( --evq-text, #1f2430 );
	color: var( --evq-bg, #fff );
	outline: none;
}

.evq-map-fullscreen-btn {
	position: absolute;
	right: 10px;
	bottom: 30px;
	z-index: 1000;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var( --evq-accent, #1B4C96 );
	color: #fff;
	border-radius: 999px;
	padding: 7px 16px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.25 );
}

.evq-map-fullscreen-btn:hover {
	background: #163c78;
	color: #fff;
}

.evq-map-fullscreen-icon {
	font-size: 14px;
	line-height: 1;
}

.evq-leaflet-map {
	aspect-ratio: 1 / 1;
	max-height: 560px;
	min-height: 320px;
	border-radius: var( --evq-radius, 10px );
	overflow: hidden;
	border: 1px solid var( --evq-border, #e5e7eb );
}

.evq-map-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin-top: 10px;
	font-size: 12px;
	color: var( --evq-muted, #6b7280 );
}

/* --- Layers control: expanded by default (see addLayersMinimizeToggle in
   section-details-core.js), with a manual minimize/expand button since
   Leaflet's own `collapsed` option is all-or-nothing. --- */

.evq-layers-header {
	display: flex;
	justify-content: flex-end;
	padding: 2px 2px 0;
}

.evq-layers-minimize {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	color: #666;
	text-decoration: none;
	border-radius: 3px;
}

.evq-layers-minimize:hover {
	background: #f0f0f0;
	color: #000;
}

.leaflet-control-layers.evq-layers-minimized .leaflet-control-layers-list {
	display: none;
}

.evq-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.evq-legend-swatch {
	display: inline-block;
	width: 10px;
	height: 10px;
	flex-shrink: 0;
}

.evq-legend-dot {
	border-radius: 999px;
}

.evq-legend-line {
	height: 3px;
	border-radius: 2px;
}

.evq-leaflet-map .leaflet-popup-content,
#evq-fullmap-map .leaflet-popup-content {
	font-size: 13px;
	line-height: 1.5;
}

/* Rapid class label, sitting directly on its line (see addRapideLineLabel() in
   section-details-core.js) — the divIcon wrapper is unstyled/zero-size, placed
   exactly at the line's midpoint; this inner box is translated to center on
   that point, then rotated to follow the line's local angle. Order matters:
   translate(-50%,-50%) first (percentages resolve against the label's own
   size, centering it on the anchor point), *then* rotate (around the box's
   own center, which is now sitting on that point) — reversing the order would
   rotate around the wrong origin. */
.evq-rapide-line-label-icon {
	background: transparent;
	border: none;
}

.evq-rapide-line-label {
	display: inline-block;
	white-space: nowrap;
	background: none;
	border: none;
	padding: 0;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
	/* Black outline around the text itself (not a box) — legible over any
	   basemap/line color without needing a background card. */
	text-shadow:
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;
	cursor: pointer;
	pointer-events: auto;
}

/* The other tier of the same label — a rapid too short on screen for the
   on-line text above to read, but long enough that a plain dot/nothing would
   lose real information (see renderRapideLabel() in section-details-core.js).
   A small card instead of on-line text specifically *because* it needs its
   own background here — offset from the line, so nothing to sit "on top of"
   the way the rotated text above does. */
.evq-rapide-card-icon {
	background: transparent;
	border: none;
}

.evq-rapide-card {
	transform: translate( -50%, -50% );
	display: inline-block;
	white-space: nowrap;
	background: var( --evq-bg, #fff );
	border: 1px solid var( --evq-border, #e5e7eb );
	border-bottom-width: 3px; /* color set inline per rapid — the same rapideColor() the line itself uses */
	border-radius: 4px;
	padding: 2px 6px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
	color: var( --evq-text, #1f2430 );
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.3 );
	cursor: pointer;
	pointer-events: auto;
}

.evq-popup-coords {
	margin-top: 4px;
}

.evq-popup-photos {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 6px;
}

.evq-popup-photos img {
	display: block;
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 6px;
	border: 1px solid var( --evq-border, #e5e7eb );
}

.evq-popup-attribution {
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px solid var( --evq-border, #e5e7eb );
	font-size: 12px;
}

.evq-popup-coords-label {
	color: var( --evq-muted, #6b7280 );
}

.evq-copy-coords {
	border: none;
	background: none;
	padding: 0;
	margin: 0;
	font: inherit;
	font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
	font-size: 12px;
	color: var( --evq-accent, #1B4C96 );
	text-decoration: underline dotted;
	cursor: pointer;
}

.evq-copy-coords:hover {
	text-decoration-style: solid;
}

/* Connected-section overlay (fullmap only, see initMap()'s showConnectedSections
   opt) — a sibling section's own line, drawn greyed-out via this CSS class (not
   an inline color) so it follows the light/dark theme automatically. */
.evq-connected-section-line {
	stroke: var( --evq-muted, #6b7280 );
}

/* Répertoire overview sections on the planner map (core.createOverviewTiers()):
   the accent, since these are the things to pick — the greyed connected
   siblings above are "same river, not selected". */
.evq-overview-section-line {
	stroke: var( --evq-accent, #1B4C96 );
}

.evq-connected-section-popup .evq-connected-section-actions {
	display: flex;
	gap: 6px;
	margin-top: 6px;
}

.evq-connected-section-popup button {
	font: inherit;
	font-size: 12px;
	padding: 4px 8px;
	border-radius: 6px;
	border: 1px solid var( --evq-border, #e5e7eb );
	background: var( --evq-bg-subtle, #fafbfc );
	color: var( --evq-text, #1f2430 );
	cursor: pointer;
}

.evq-connected-section-popup button:hover:not( :disabled ) {
	border-color: var( --evq-accent, #1B4C96 );
	color: var( --evq-accent, #1B4C96 );
}

.evq-connected-section-popup button:disabled {
	cursor: default;
	opacity: 0.55;
}

/* --- Feature summary (buildFeatureSummary() in section-details-core.js) ---
   Stat tiles tallying every traced portage/rapide/POI in view — shown on both
   a single section's details panel and a river group's (see
   EVQ_Sections_Geo_Repository::summarize_nearby()). */

.evq-feature-tiles {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 130px, 1fr ) );
	gap: 10px;
}

.evq-feature-tile {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 12px;
	border: 1px solid var( --evq-border, #e5e7eb );
	border-radius: var( --evq-radius, 10px );
	background: var( --evq-bg-subtle, #fafbfc );
}

.evq-feature-tile-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-bottom: 4px;
	border-radius: 50%;
}

.evq-feature-tile-count {
	font-size: 18px;
	font-weight: 700;
	color: var( --evq-text, #1f2430 );
	line-height: 1.1;
}

.evq-feature-tile-label {
	font-size: 12px;
	color: var( --evq-muted, #6b7280 );
}

.evq-feature-tile-length {
	font-size: 12px;
	color: var( --evq-muted, #6b7280 );
}

/* --- River group sidebar (window.EVQRiverDetails.open(), section-details.js) --- */

.evq-river-sections-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.evq-river-section-item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 8px 10px;
	border: 1px solid var( --evq-border, #e5e7eb );
	border-radius: var( --evq-radius, 10px );
	background: var( --evq-bg-subtle, #fafbfc );
	cursor: pointer;
}

/* River grouping admin control (canManageRivers — see buildRiverSectionsList()'s
   own doc comment) — the "add a section" row/search box at the bottom of the
   list, wired up by section-details.js's "add-to-river" delegate. */
.evq-river-section-add-row {
	list-style: none;
}

.evq-river-section-add {
	width: 100%;
	padding: 8px 10px;
	border: 1px dashed var( --evq-border, #e5e7eb );
	border-radius: var( --evq-radius, 10px );
	background: none;
	color: var( --evq-muted, #6b7280 );
	font-size: 13px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.evq-river-section-add:hover {
	border-color: var( --evq-accent, #1B4C96 );
	color: var( --evq-accent, #1B4C96 );
}

.evq-river-section-search {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 6px;
	padding: 8px;
	border: 1px solid var( --evq-border, #e5e7eb );
	border-radius: var( --evq-radius, 10px );
	background: #fff;
}

.evq-river-section-item:hover,
.evq-river-section-item:focus-visible {
	border-color: var( --evq-accent, #1B4C96 );
	background: var( --evq-row-hover, #f7f9fc );
}

.evq-river-section-item:focus-visible {
	outline: 2px solid var( --evq-accent, #1B4C96 );
	outline-offset: -2px;
}

.evq-river-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
}

.evq-river-section-name {
	font-weight: 600;
	color: var( --evq-text, #1f2430 );
	font-size: 13px;
}

.evq-river-section-meta {
	font-size: 12px;
	color: var( --evq-muted, #6b7280 );
}

.evq-river-station {
	padding: 10px 0;
	border-bottom: 1px dashed var( --evq-border, #e5e7eb );
}

.evq-river-station:last-child {
	border-bottom: none;
}

.evq-river-station-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 13px;
}

.evq-river-station-head a {
	font-weight: 600;
	color: var( --evq-accent, #1B4C96 );
}

.evq-river-photos-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 76px, 1fr ) );
	gap: 6px;
}

.evq-river-photos-grid a {
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 8px;
	border: 1px solid var( --evq-border, #e5e7eb );
}

.evq-river-photos-grid img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- Profile bar (buildProfileBar() in section-details-core.js) — the
   "makeup of a river" graphic. preserveAspectRatio="none" on the <svg> itself
   (set in JS) is what lets a fixed-viewBox bar stretch to the container's
   real width here via plain CSS, same technique the sparkline/season charts
   above use. */

.evq-profile-bar-wrap {
	width: 100%;
}

.evq-profile-bar {
	display: block;
	width: 100%;
	height: auto;
	color: var( --evq-text, #1f2430 ); /* the calm-water baseline rect uses fill="currentColor" */
}

.evq-profile-seg {
	cursor: default;
}

/* Once an admin has actually recorded a judgment (see is_optional's own doc
   comment in class-evq-sections-schema.php) — a dashed outline for "you can
   skip this rapide" vs. a solid one for "this is the only way past", instead
   of every portage looking identical regardless of whether that's known. */
.evq-profile-seg-optional {
	stroke: var( --evq-bg, #fff );
	stroke-width: 1;
	stroke-dasharray: 2, 1.5;
}

.evq-profile-seg-mandatory {
	stroke: var( --evq-bg, #fff );
	stroke-width: 1;
}

.evq-profile-bar-compact {
	margin-top: 2px;
}

.evq-profile-empty {
	margin: 6px 0 0;
}

.evq-profile-legend {
	margin-top: 10px;
}

/* Icon-pin markers for accès/aire de repos/stationnement/obstacle/points
   d'intérêt/portage (section-details-core.js's poiDivIcon()) — same shape as
   trip-planner.css's own .evq-pin-marker-wrap/.evq-pin-marker for a trip's
   user-placed points, duplicated here so pages that don't load
   trip-planner.css (the public table, the fullscreen map) still get it. */
.evq-pin-marker-wrap {
	background: transparent;
	border: none;
}

.evq-pin-marker {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.35 );
	color: #fff;
}

.evq-pin-marker svg {
	width: 16px;
	height: 16px;
}