/* ==========================================================================
   Atlas Énergétique — page-atlas.php
   Hero (motif teal, sans image) + carte Leaflet (fond Mapbox Dark, choroplèthe
   électrification + tracés pipelines) + légende + attribution des sources.
   ========================================================================== */

:root {
	/* Rampe séquentielle ambre -> teal pour le choroplèthe (électrification).
	   Ancrage "mode sombre" : valeur basse = teinte sourde proche du fond,
	   valeur haute = teal lumineux qui ressort sur le fond sombre — jamais le
	   cyan néon des prototypes. Générée par interpolation OKLCH (5 paliers,
	   luminosité croissante), validée visuellement sur --color-ink. */
	--atlas-choropleth-1: #5a3c00; /* 0–20% */
	--atlas-choropleth-2: #5e590f; /* 20–40% */
	--atlas-choropleth-3: #57773a; /* 40–60% */
	--atlas-choropleth-4: #47946a; /* 60–80% */
	--atlas-choropleth-5: #37ad9f; /* 80–100% */
	--atlas-nodata-fill: rgba(248, 249, 250, 0.10);
	--atlas-nodata-stroke: rgba(248, 249, 250, 0.35);

	/* Pipelines : ambre pour le pétrole (token existant), variante teal claire
	   et désaturée pour le gaz — distincte des paliers du choroplèthe. */
	--atlas-pipeline-oil: var(--color-amber);
	--atlas-pipeline-gas: #4FD1C0;
	--atlas-pipeline-casing: rgba(var(--color-ink-rgb), 0.55);

	/* Fond de secours (Phase 3), visible seulement pendant le chargement des
	   tuiles Mapbox (Phase 5) ou si le jeton Mapbox est absent — bleu-nuit
	   très sombre, nuance distincte du teal/ambre du reste du site pour ne
	   jamais se confondre avec le choroplèthe. Proche en luminosité de
	   --color-ink, juste décalé vers le bleu. */
	--atlas-ocean-1: #12232e;
	--atlas-ocean-2: #0a1620;
}

/* --------------------------------------------------------------------------
   1. HERO — même structure que .contact-hero (motif teal, sans image,
   titre + sous-titre, pas de badge "eyebrow").
   -------------------------------------------------------------------------- */

.atlas-hero {
	position: relative;
	background-color: var(--color-teal-dark);
	overflow: hidden;
	/* Réserve toujours la hauteur du header (transparent, position: fixed) au-dessus
	   du titre — mêmes valeurs que .article-hero (single.css), calées sur les
	   breakpoints de header.css (bascule 72px à 768px, sous-menu +40px à 1200px). */
	padding-top: 96px;
	padding-bottom: var(--space-3xl);
	color: var(--color-white);
}

@media (min-width: 768px) {
	.atlas-hero {
		padding-top: 104px;
	}
}

@media (min-width: 1200px) {
	.atlas-hero {
		padding-top: 148px;
	}
}

.atlas-hero__pattern {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	background-size: 48px 48px;
	-webkit-mask-image: radial-gradient(ellipse 70% 90% at 85% 30%, black 30%, transparent 80%);
	mask-image: radial-gradient(ellipse 70% 90% at 85% 30%, black 30%, transparent 80%);
}

.atlas-hero__content {
	position: relative;
	z-index: 1;
}

.atlas-hero__title {
	color: var(--color-white);
	margin-bottom: var(--space-md);
}

.atlas-hero__subtitle {
	color: rgba(255, 255, 255, 0.85);
	max-width: 55ch;
}

/* --------------------------------------------------------------------------
   2. SECTION CARTE
   -------------------------------------------------------------------------- */

.atlas-map-section {
	background-color: var(--color-bg);
	padding-block: var(--space-3xl);
}

.atlas-map-wrap {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xl);
}

@media (min-width: 1024px) {
	.atlas-map-wrap {
		/* Colonne latérale fixe ~300–340px (légende + pipelines + filtres) à
		   côté du bloc carte, qui prend le reste de la largeur disponible du
		   contenu — pas de max-width plus étroit qu'ailleurs sur le site :
		   .atlas-map-wrap hérite du même .container (1320px) que le hero et
		   le tableau "sans tracé" en dessous. */
		grid-template-columns: 1fr 320px;
		/* stretch (pas start) : la légende est devenue plus haute que la carte
		   depuis l'ajout du groupe de filtres Statut (Phase 3) — sans stretch,
		   la carte restait figée à son min-height pendant que la légende
		   continuait sous elle, laissant un vide disgracieux à droite de la
		   carte. Avec stretch, la carte grandit pour égaler la hauteur réelle
		   de la légende (min-height reste un plancher, pas un plafond). */
		align-items: stretch;
	}
}

/* Leaflet ajoute lui-même la classe .leaflet-container directement sur
   l'élément passé à L.map() — c'est le MÊME nœud DOM que #atlas-map, pas un
   enfant séparé. Sa taille se pose donc ici, directement, en dimensions
   réelles (pas en % d'un parent), lues par Leaflet via
   getBoundingClientRect() à l'initialisation et à chaque invalidateSize().
   min-height liée au viewport plutôt qu'un aspect-ratio fixe : une carte
   nettement plus grande, sans jamais devenir plein écran (le header sticky
   et le footer du site restent dans le flux normal — pas de 100vh/position:
   fixed comme le prototype reçu). */
.atlas-map {
	position: relative;
	width: 100%;
	min-height: 55vh;
	border-radius: 12px;
	overflow: hidden;
	background: linear-gradient(160deg, var(--atlas-ocean-1) 0%, var(--atlas-ocean-2) 100%);
	font-family: var(--font-body);
	isolation: isolate;
}

@media (min-width: 768px) {
	.atlas-map {
		min-height: 75vh;
	}
}

/* Fond de carte (Phase 6) : mapbox/outdoors-v12 plutôt que dark-v11 — seul
   style Mapbox à porter un vrai relief ombré (dark-v11 est plat, aucun
   hillshading, y compris sur l'Atlas ou les hauts-plateaux éthiopiens). Son
   rendu natif est clair/verdoyant (randonnée) ; ce filtre CSS l'assombrit
   pour rester cohérent avec l'identité sombre du site, sans effacer le
   relief. brightness/saturate/contrast plutôt qu'un invert()+hue-rotate() :
   testé d'abord, l'inversion assombrit bien les teintes SOURDES du relief
   (vertes/beiges) mais un bleu océan saturé s'inverse vers un orange vif
   qu'une simple rotation de teinte ramène à un bleu clair — pas du tout
   sombre. Un assombrissement direct, lui, réduit la LUMINOSITÉ de n'importe
   quelle teinte de départ de façon prévisible (mer comme terre).
   Portée précise sur .leaflet-tile-pane : c'est UNIQUEMENT le calque de
   tuiles Mapbox (le choroplèthe et les pipelines vivent dans
   .leaflet-overlay-pane, un pane distinct, donc jamais affectés). */
.atlas-map .leaflet-tile-pane {
	filter: brightness(0.38) saturate(0.6) contrast(1.35);
}

/* Le reset sitewide `canvas { max-width:100%; height:auto }` (main.css, pensé
   pour des canvas de contenu classiques) casse le canvas du rendu Canvas de
   Leaflet (couche pipelines) : son parent (.leaflet-overlay-pane) est un
   pane positionné en transform, de largeur intrinsèque 0 — max-width:100%
   s'y calcule donc à 0, et la couche devient invisible bien que dessinée.
   On rend au canvas Leaflet sa taille pixel réelle (attributs width/height
   posés par Leaflet lui-même). */
.atlas-map canvas {
	max-width: none;
	width: auto;
	height: auto;
}

/* Même reset, côté svg : Leaflet ne le neutralise lui-même que dans
   .leaflet-overlay-pane — pas dans le pane dédié aux pipelines
   (atlas-map.js, map.createPane('pipelines')), où le svg tomberait à 0×0. */
.atlas-map .leaflet-pipelines-pane svg {
	max-width: none;
	max-height: none;
}

.atlas-map .leaflet-control-zoom a {
	background-color: rgba(var(--color-ink-rgb), 0.85);
	color: var(--color-white);
	border-color: rgba(255, 255, 255, 0.15);
}

.atlas-map .leaflet-control-zoom a:hover {
	background-color: var(--color-teal);
}

/* Attribution Mapbox/OpenStreetMap (obligatoire, posée par Leaflet en bas à
   droite — attributionControl activé depuis le fond de carte réel, Phase 5).
   Restylée pour rester lisible sur les tuiles sombres plutôt que le blanc
   opaque par défaut de Leaflet. */
.atlas-map .leaflet-control-attribution {
	background-color: rgba(var(--color-ink-rgb), 0.72);
	color: rgba(255, 255, 255, 0.75);
}

.atlas-map .leaflet-control-attribution a {
	color: rgba(255, 255, 255, 0.9);
}

.atlas-map .leaflet-tooltip {
	background-color: var(--color-surface);
	color: var(--color-text);
	border: 1px solid rgba(var(--color-ink-rgb), 0.08);
	border-radius: 10px;
	font-size: var(--text-small);
	padding: var(--space-sm) var(--space-md);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.atlas-map .leaflet-tooltip-top::before {
	border-top-color: var(--color-surface);
}

/* Contenu structuré (titre + ligne pastille/valeur), même logique visuelle
   que .contact-info__item (icône/pastille + libellé) et le panneau pays
   (.atlas-country-panel__pipeline-dot) plutôt qu'un simple texte brut. */
.atlas-tooltip__title {
	font-weight: var(--font-weight-semibold);
	color: var(--color-text);
	margin-bottom: 2px;
	white-space: nowrap;
}

.atlas-tooltip__row {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	white-space: nowrap;
}

.atlas-tooltip__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.atlas-tooltip__dot--gaz {
	background-color: var(--atlas-pipeline-gas);
}

.atlas-tooltip__dot--petrole {
	background-color: var(--atlas-pipeline-oil);
}

.atlas-tooltip__value {
	font-weight: var(--font-weight-semibold);
	color: var(--color-teal-dark);
}

.atlas-tooltip__meta {
	color: #4A5568;
	font-size: 12px;
}

.atlas-map__fallback {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--space-xl);
	margin: 0;
	color: rgba(255, 255, 255, 0.75);
	font-size: var(--text-small);
}

.atlas-map__error {
	position: absolute;
	left: var(--space-md);
	bottom: var(--space-md);
	right: var(--space-md);
	z-index: 1000;
	background-color: rgba(var(--color-ink-rgb), 0.92);
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--text-small);
	padding: var(--space-sm) var(--space-md);
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.12);
}

/* --------------------------------------------------------------------------
   3. LÉGENDE
   -------------------------------------------------------------------------- */

.atlas-legend {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
	padding: var(--space-lg);
	background-color: var(--color-surface);
	border-radius: 12px;
	border: 1px solid rgba(var(--color-ink-rgb), 0.08);
}

.atlas-legend__title {
	font-size: var(--text-small);
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-text);
	margin-bottom: var(--space-sm);
}

.atlas-legend__scale,
.atlas-legend__lines {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.atlas-legend__scale li,
.atlas-legend__lines li {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	font-size: var(--text-small);
	color: #4A5568;
}

.atlas-legend__swatch {
	display: inline-block;
	width: 16px;
	height: 16px;
	border-radius: 4px;
	flex-shrink: 0;
}

.atlas-legend__swatch--1 { background-color: var(--atlas-choropleth-1); }
.atlas-legend__swatch--2 { background-color: var(--atlas-choropleth-2); }
.atlas-legend__swatch--3 { background-color: var(--atlas-choropleth-3); }
.atlas-legend__swatch--4 { background-color: var(--atlas-choropleth-4); }
.atlas-legend__swatch--5 { background-color: var(--atlas-choropleth-5); }

.atlas-legend__swatch--nodata {
	background-color: var(--atlas-nodata-fill);
	border: 1px dashed var(--atlas-nodata-stroke);
}

.atlas-legend__line {
	display: inline-block;
	width: 20px;
	height: 3px;
	border-radius: 2px;
	flex-shrink: 0;
}

.atlas-legend__line--gas {
	background-color: var(--atlas-pipeline-gas);
}

.atlas-legend__line--oil {
	background-color: var(--atlas-pipeline-oil);
}

/* Tracé indicatif (atlas-map.js, pipelineDash) : pointillé neutre — le type
   gaz/pétrole reste porté par la couleur, le pointillé seul dit « indicatif ». */
.atlas-legend__line--indicative {
	border-radius: 0;
	background-image: repeating-linear-gradient(
		to right,
		#4A5568 0,
		#4A5568 5px,
		transparent 5px,
		transparent 9px
	);
}

/* --------------------------------------------------------------------------
   4. ATTRIBUTION — discrète, pied de section (licence CC BY 4.0 obligatoire)
   -------------------------------------------------------------------------- */

.atlas-attribution {
	margin-top: var(--space-lg);
}

.atlas-attribution__title {
	font-size: 11px;
	font-weight: var(--font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: rgba(74, 85, 104, 0.6);
	margin: 0 0 var(--space-xs);
}

.atlas-attribution__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.atlas-attribution__list li {
	font-size: 11px;
	line-height: 1.6;
	color: rgba(74, 85, 104, 0.7);
}

.atlas-attribution__label {
	font-weight: var(--font-weight-semibold);
	color: rgba(74, 85, 104, 0.9);
}

/* --------------------------------------------------------------------------
   5. CURSEUR TEMPOREL
   -------------------------------------------------------------------------- */

.atlas-timeline {
	background-color: var(--color-surface);
	border: 1px solid rgba(var(--color-ink-rgb), 0.08);
	border-radius: 12px;
	padding: var(--space-lg);
	margin-bottom: var(--space-xl);
}

.atlas-timeline__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-md);
	margin-bottom: var(--space-sm);
}

.atlas-timeline__label {
	font-size: var(--text-small);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text);
}

.atlas-timeline__year {
	font-family: var(--font-heading);
	font-size: var(--text-h3);
	font-weight: var(--font-weight-bold);
	color: var(--color-teal-dark);
	font-variant-numeric: tabular-nums;
}

/* Piste + curseur personnalisés (le comportement clavier/valeur reste 100%
   natif : <input type="range">, pas de composant custom). */
.atlas-timeline__slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	border-radius: 999px;
	background: linear-gradient(to right, var(--atlas-choropleth-1), var(--atlas-choropleth-3), var(--atlas-choropleth-5));
	cursor: pointer;
}

.atlas-timeline__slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: var(--color-white);
	border: 3px solid var(--color-teal-dark);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
	transition: transform 150ms ease;
}

.atlas-timeline__slider::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: var(--color-white);
	border: 3px solid var(--color-teal-dark);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
	transition: transform 150ms ease;
}

.atlas-timeline__slider::-moz-range-track {
	height: 6px;
	border-radius: 999px;
	background: linear-gradient(to right, var(--atlas-choropleth-1), var(--atlas-choropleth-3), var(--atlas-choropleth-5));
}

.atlas-timeline__slider:hover::-webkit-slider-thumb,
.atlas-timeline__slider:active::-webkit-slider-thumb {
	transform: scale(1.15);
}

.atlas-timeline__slider:focus-visible {
	outline: 2px solid var(--color-amber);
	outline-offset: 4px;
}

.atlas-timeline__range {
	display: flex;
	justify-content: space-between;
	margin-top: var(--space-xs);
	font-size: 11px;
	color: #4A5568;
}

/* --------------------------------------------------------------------------
   6. FILTRES
   -------------------------------------------------------------------------- */

.atlas-filters__group {
	border: none;
	margin: 0 0 var(--space-md) 0;
	padding: 0;
}

.atlas-filters__group:last-child {
	margin-bottom: 0;
}

.atlas-filters__legend {
	font-size: 11px;
	font-weight: var(--font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #4A5568;
	margin-bottom: var(--space-xs);
	padding: 0;
}

.atlas-filters__option {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	font-size: var(--text-small);
	color: var(--color-text);
	padding-block: 3px;
	cursor: pointer;
}

.atlas-filters__option input[type="checkbox"] {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	accent-color: var(--color-teal-dark);
	cursor: pointer;
}

.atlas-filters__count {
	color: #8A96A3;
	font-size: 12px;
}

.atlas-legend__hint {
	margin-top: var(--space-sm);
	font-size: 12px;
	color: #8A96A3;
}

/* --------------------------------------------------------------------------
   7. PAYS INTERACTIFS (focus clavier sur les tracés SVG Leaflet)
   -------------------------------------------------------------------------- */

.atlas-map .leaflet-interactive:focus-visible {
	outline: 2px solid var(--color-amber);
	outline-offset: 1px;
}

/* --------------------------------------------------------------------------
   8. PANNEAU DE DÉTAIL PAYS
   -------------------------------------------------------------------------- */

body.has-atlas-panel-open {
	overflow: hidden;
}

.atlas-country-panel__backdrop {
	position: fixed;
	inset: 0;
	background-color: rgba(var(--color-ink-rgb), 0.55);
	z-index: 1900;
	opacity: 0;
	visibility: hidden;
	transition: opacity 250ms ease, visibility 0s linear 250ms;
}

.atlas-country-panel__backdrop.is-visible {
	opacity: 1;
	visibility: visible;
	transition: opacity 250ms ease, visibility 0s linear 0s;
}

.atlas-country-panel {
	position: fixed;
	z-index: 1901;
	background-color: var(--color-surface);
	box-shadow: -8px 0 32px rgba(0, 0, 0, 0.24);
	overflow: hidden;
	visibility: hidden;
	transition: transform 300ms ease, visibility 0s linear 300ms;

	/* Mobile : feuille remontant du bas, hauteur plafonnée avec défilement
	   interne. `height` (pas seulement `max-height`) : .atlas-country-panel__inner
	   est en `height: 100%`, qui ne peut se résoudre en pourcentage que si CE
	   parent a une hauteur définie — avec `max-height` seule, la liste de
	   pipelines (potentiellement longue) repoussait le panneau bien au-delà
	   de 85vh au lieu d'être contenue avec défilement interne. */
	inset: auto 0 0 0;
	height: 85vh;
	border-radius: 16px 16px 0 0;
	transform: translateY(100%);
}

.atlas-country-panel.is-open {
	visibility: visible;
	transform: translateY(0);
	transition: transform 300ms ease, visibility 0s linear 0s;
}

@media (min-width: 768px) {
	.atlas-country-panel {
		inset: 0 0 0 auto;
		top: 0;
		bottom: 0;
		width: min(420px, 100vw);
		height: auto;
		border-radius: 0;
		transform: translateX(100%);
	}

	.atlas-country-panel.is-open {
		transform: translateX(0);
	}
}

.atlas-country-panel__inner {
	height: 100%;
	overflow-y: auto;
	padding: var(--space-xl) var(--space-lg) var(--space-2xl);
}

.atlas-country-panel__close {
	position: sticky;
	top: 0;
	float: right;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-bg);
	border: none;
	border-radius: 50%;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--color-text);
	cursor: pointer;
	z-index: 1;
}

.atlas-country-panel__close:hover {
	background-color: rgba(217, 164, 65, 0.16);
}

.atlas-country-panel__close:focus-visible {
	outline: 2px solid var(--color-amber);
	outline-offset: 2px;
}

.atlas-country-panel__body {
	clear: both;
}

.atlas-country-panel__name {
	margin-bottom: var(--space-lg);
	padding-right: var(--space-2xl);
}

.atlas-country-panel__stat-block {
	background-color: var(--color-bg);
	border-radius: 12px;
	padding: var(--space-lg);
	margin-bottom: var(--space-xl);
}

.atlas-country-panel__stat-label {
	font-size: var(--text-small);
	color: #4A5568;
	margin-bottom: var(--space-xs);
}

.atlas-country-panel__stat-value {
	font-family: var(--font-heading);
	font-size: var(--text-h2);
	font-weight: var(--font-weight-bold);
	color: var(--color-teal-dark);
	line-height: 1.1;
}

.atlas-country-panel__stat-delta {
	font-size: var(--text-small);
	color: #4A5568;
	margin-top: var(--space-xs);
}

.atlas-country-panel__stat-delta--up {
	color: #1A7A4C;
}

.atlas-country-panel__stat-delta--down {
	color: var(--color-error);
}

.atlas-country-panel__sparkline {
	display: block;
	width: 100%;
	height: 48px;
	margin-top: var(--space-md);
}

.atlas-country-panel__pipelines-title {
	font-size: var(--text-small);
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-text);
	margin-bottom: var(--space-sm);
}

.atlas-country-panel__pipeline {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-sm) 0;
	border-bottom: 1px solid rgba(var(--color-ink-rgb), 0.08);
	font-size: var(--text-small);
}

.atlas-country-panel__pipeline:last-child {
	border-bottom: none;
}

.atlas-country-panel__pipeline-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.atlas-country-panel__pipeline-dot--gaz {
	background-color: var(--atlas-pipeline-gas);
}

.atlas-country-panel__pipeline-dot--petrole {
	background-color: var(--atlas-pipeline-oil);
}

.atlas-country-panel__pipeline-name {
	flex: 1;
	color: var(--color-text);
}

.atlas-country-panel__pipeline-meta {
	color: #8A96A3;
	font-size: 12px;
	white-space: nowrap;
}

.atlas-country-panel__pipelines-empty {
	font-size: var(--text-small);
	color: #8A96A3;
}

/* --------------------------------------------------------------------------
   9. PIPELINES SANS TRACÉ CONNU
   -------------------------------------------------------------------------- */

.atlas-no-route {
	background-color: var(--color-surface);
	padding-block: var(--space-3xl);
}

.atlas-no-route__title {
	margin-bottom: var(--space-md);
}

.atlas-no-route__intro {
	color: #4A5568;
	max-width: 75ch;
	margin-bottom: var(--space-xl);
	line-height: var(--leading-relaxed);
}

.atlas-no-route__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	margin-bottom: var(--space-lg);
}

.atlas-no-route__search {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	flex: 1 1 320px;
	max-width: 420px;
	background-color: var(--color-surface);
	border: 1px solid rgba(var(--color-teal-rgb), 0.15);
	border-radius: 999px;
	padding-inline-start: var(--space-md);
}

.atlas-no-route__search svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: var(--color-teal);
}

.atlas-no-route__search:focus-within {
	border-color: var(--color-teal);
}

.atlas-no-route__search-input {
	flex: 1;
	min-width: 0;
	border: none;
	background: none;
	padding-block: var(--space-sm);
	font-size: var(--text-small);
	color: var(--color-text);
}

.atlas-no-route__search-input:focus-visible {
	outline: 2px solid var(--color-teal);
	outline-offset: 2px;
	border-radius: 999px;
}

.atlas-no-route__search-input::placeholder {
	color: rgba(var(--color-text-rgb), 0.45);
}

.atlas-no-route__download {
	white-space: nowrap;
}

.atlas-no-route__empty {
	padding: var(--space-xl);
	text-align: center;
	color: #8A96A3;
	font-style: italic;
}

.atlas-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-sm);
	margin-top: var(--space-xl);
}

.atlas-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding-inline: var(--space-sm);
	border-radius: 999px;
	border: 1px solid rgba(var(--color-teal-rgb), 0.15);
	background: none;
	font: inherit;
	font-size: var(--text-small);
	color: var(--color-text);
	cursor: pointer;
}

.atlas-pagination .page-numbers.current {
	background-color: var(--color-teal);
	border-color: var(--color-teal);
	color: var(--color-white);
	cursor: default;
}

.atlas-pagination .page-numbers:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.atlas-pagination .page-numbers:not(:disabled):not(.current):hover,
.atlas-pagination .page-numbers:not(:disabled):not(.current):focus-visible {
	border-color: var(--color-accent);
	color: var(--color-teal-dark);
}

.atlas-pagination .page-numbers:focus-visible {
	outline: 2px solid var(--color-amber);
	outline-offset: 2px;
}

.atlas-no-route__table-wrap {
	overflow-x: auto;
}

.atlas-no-route__table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-small);
}

.atlas-no-route__table th {
	text-align: left;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #8A96A3;
	padding: var(--space-sm) var(--space-md);
	border-bottom: 2px solid rgba(var(--color-ink-rgb), 0.1);
	white-space: nowrap;
}

.atlas-no-route__table td {
	padding: var(--space-sm) var(--space-md);
	border-bottom: 1px solid rgba(var(--color-ink-rgb), 0.06);
	color: var(--color-text);
	vertical-align: top;
}

.atlas-no-route__table tbody tr:hover {
	background-color: var(--color-bg);
}

.atlas-no-route__type {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: var(--font-weight-medium);
}

.atlas-no-route__type--gaz {
	background-color: rgba(79, 209, 192, 0.16);
	color: #0D6E5F;
}

.atlas-no-route__type--petrole {
	background-color: rgba(217, 164, 65, 0.16);
	color: var(--color-amber-text);
}

/* En dessous de 640px : table en cartes empilées (5 colonnes sont illisibles
   en scroll horizontal sur un petit écran) — les data-label deviennent les
   étiquettes de chaque valeur. */
@media (max-width: 639px) {
	.atlas-no-route__table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}

	.atlas-no-route__table,
	.atlas-no-route__table tbody,
	.atlas-no-route__table tr,
	.atlas-no-route__table td {
		display: block;
		width: 100%;
	}

	.atlas-no-route__table tr {
		padding: var(--space-md) 0;
		border-bottom: 1px solid rgba(var(--color-ink-rgb), 0.1);
	}

	.atlas-no-route__table td {
		border-bottom: none;
		padding: 4px var(--space-md);
	}

	.atlas-no-route__table td::before {
		content: attr(data-label);
		display: inline-block;
		min-width: 9em;
		font-size: 11px;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: #8A96A3;
		margin-right: var(--space-sm);
	}
}

/* --------------------------------------------------------------------------
   10. MOUVEMENT RÉDUIT
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	/* ::-webkit-slider-thumb et ::-moz-range-thumb doivent rester dans des
	   règles séparées : un pseudo-élément non supporté par un moteur invalide
	   TOUTE la liste de sélecteurs qui le contient (pas seulement lui), donc
	   les combiner ferait échouer cette règle en entier sur Chromium/Safari
	   (qui ignorent -moz-range-thumb) ET sur Firefox (qui ignore
	   -webkit-slider-thumb).

	   !important nécessaire : .atlas-country-panel.is-open et
	   .atlas-country-panel__backdrop.is-visible (2 classes) sont plus
	   spécifiques que .atlas-country-panel / .atlas-country-panel__backdrop
	   seuls (1 classe) ci-dessous, et posent elles-mêmes une transition de
	   300ms/250ms — sans !important elles gagneraient le cascade et
	   l'utilisateur mouvement-réduit garderait l'animation complète pendant
	   l'ouverture/fermeture, l'unique moment où ça compte. */
	.atlas-country-panel,
	.atlas-country-panel__backdrop,
	.atlas-timeline__slider::-webkit-slider-thumb {
		transition-duration: 0.01ms !important;
	}

	.atlas-timeline__slider::-moz-range-thumb {
		transition-duration: 0.01ms !important;
	}
}