/* base.css — jetons, typographie, en-tête, pied, sources, infobulles, transitions
 *
 * Direction « carte d'atlas » : un fond bleu encre (une vraie couleur, pas un
 * noir), une seule famille (Archivo) jouée sur sa chasse — élargie et grasse
 * pour les chiffres, étroite pour les légendes —, et la couleur réservée aux
 * données et aux dossiers. Pas de capitales espacées, pas d'encadrés. */

:root {
	--fond: #0e1b2c;
	--fond-2: #132439;
	--fond-3: #1a2e48;
	--trame: #233650;
	--texte: #e8eef5;
	--texte-2: #a9b8cc;
	--texte-3: #71849e;
	--trait: rgba(232, 238, 245, .14);
	--c: #e8eef5; /* couleur du dossier courant, posée par les gabarits */

	--f: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--large: 125; /* chasse élargie : chiffres */
	--etroit: 72; /* chasse étroite : légendes, axes */

	--gouttiere: clamp(16px, 4vw, 56px);
	--tete-h: 60px;

	--bp-sm: 480px;
	--bp-md: 768px;
	--bp-lg: 1024px;
	--bp-xl: 1280px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	min-height: 100vh;
	background: var(--fond);
	color: var(--texte);
	font: 400 clamp(16px, 1.05vw, 18px)/1.6 var(--f);
	font-variation-settings: "wdth" 100;
	-webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--texte); outline-offset: 3px; }

.evitement {
	position: absolute; left: -9999px; top: 8px; z-index: 100;
	padding: 8px 14px; background: var(--texte); color: var(--fond);
}
.evitement:focus { left: 8px; }

/* ── En-tête ─────────────────────────────────────────────────── */
.tete {
	position: fixed; inset: 0 0 auto; z-index: 40;
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	height: var(--tete-h); padding: 0 var(--gouttiere);
	background: linear-gradient(var(--fond) 30%, rgba(14, 27, 44, 0));
	view-transition-name: tete;
}
.admin-bar .tete { top: 32px; }
@media (max-width: 782px) { .admin-bar .tete { top: 46px; } }

.tete__marque { font-size: 22px; font-weight: 800; font-variation-settings: "wdth" var(--large); letter-spacing: -.03em; text-decoration: none; }
.tete__marque span { font-weight: 300; }
.tete__dossiers { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; }
.tete__dossiers a {
	display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
	font-size: 15px; font-weight: 500; font-variation-settings: "wdth" var(--etroit); text-decoration: none; color: var(--texte-2);
}
.tete__dossiers a::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.tete__dossiers a:hover { color: var(--texte); }

/* ── Pied ────────────────────────────────────────────────────── */
.pied { padding: 56px var(--gouttiere) 64px; color: var(--texte-3); font-size: 15px; }
.pied__marque { margin: 0 0 6px; font-size: 20px; font-weight: 800; font-variation-settings: "wdth" var(--large); color: var(--texte); }
.pied__sources { margin: 0; max-width: 64ch; }
.pied__menu { display: flex; flex-wrap: wrap; gap: 18px; margin: 18px 0 0; padding: 0; list-style: none; }

/* ── Sources : toujours cliquables ───────────────────────────── */
.source { font-size: 14px; font-variation-settings: "wdth" var(--etroit); color: var(--texte-3); }
.source a { color: var(--texte-2); }

/* ── Infobulle des graphiques ────────────────────────────────── */
.bulle {
	position: absolute; z-index: 10; pointer-events: none;
	padding: 7px 10px; border-radius: 4px; background: var(--texte); color: var(--fond);
	font-size: 14px; line-height: 1.3; font-variation-settings: "wdth" var(--etroit); white-space: nowrap;
	transform: translate(-50%, calc(-100% - 12px));
}
.bulle b { font-weight: 800; font-variation-settings: "wdth" 100; }
.bulle[hidden] { display: none; }

/* ── Transitions entre pages (View Transitions, navigateurs récents) ── */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; }
::view-transition-group(*) { animation-duration: .55s; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }

/* Transitions orientées (types posés par sens.js) : la promenade a un sens. */
@keyframes expli-sort-gauche { to { transform: translateX(-14%); opacity: 0; } }
@keyframes expli-entre-droite { from { transform: translateX(14%); opacity: 0; } }
@keyframes expli-sort-droite { to { transform: translateX(14%); opacity: 0; } }
@keyframes expli-entre-gauche { from { transform: translateX(-14%); opacity: 0; } }
@keyframes expli-recule { to { transform: scale(.9); opacity: 0; } }
@keyframes expli-approche-loin { from { transform: scale(1.08); opacity: 0; } }
@keyframes expli-plonge { to { transform: scale(1.1); opacity: 0; } }
@keyframes expli-emerge { from { transform: scale(.94); opacity: 0; } }
html:active-view-transition-type(suivant)::view-transition-old(root) { animation: .5s cubic-bezier(.65, 0, .35, 1) both expli-sort-gauche; }
html:active-view-transition-type(suivant)::view-transition-new(root) { animation: .5s cubic-bezier(.65, 0, .35, 1) both expli-entre-droite; }
html:active-view-transition-type(precedent)::view-transition-old(root) { animation: .5s cubic-bezier(.65, 0, .35, 1) both expli-sort-droite; }
html:active-view-transition-type(precedent)::view-transition-new(root) { animation: .5s cubic-bezier(.65, 0, .35, 1) both expli-entre-gauche; }
html:active-view-transition-type(recul)::view-transition-old(root) { animation: .5s cubic-bezier(.65, 0, .35, 1) both expli-recule; }
html:active-view-transition-type(recul)::view-transition-new(root) { animation: .5s cubic-bezier(.65, 0, .35, 1) both expli-approche-loin; }
html:active-view-transition-type(entree)::view-transition-old(root) { animation: .5s cubic-bezier(.65, 0, .35, 1) both expli-plonge; }
html:active-view-transition-type(entree)::view-transition-new(root) { animation: .5s cubic-bezier(.65, 0, .35, 1) both expli-emerge; }

@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media (max-width: 767px) {
	.tete { gap: 14px; }
	.tete__dossiers { gap: 14px; mask-image: linear-gradient(90deg, #000 85%, transparent); }
	.tete__dossiers a { font-size: 14px; }
}

/* ── Bouton vers le récit « … en clair » d'un dossier ─────────── */
.bouton-recit {
	display: inline-flex; align-items: center; gap: 14px; padding: 14px 24px 14px 16px; border-radius: 40px;
	background: var(--c); color: var(--fond); text-decoration: none; box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--c) 70%, transparent);
	transition: transform .25s cubic-bezier(.3, .7, .2, 1.3), box-shadow .25s;
}
.bouton-recit:hover, .bouton-recit:focus-visible { transform: translateY(-2px) scale(1.03); box-shadow: 0 16px 40px -12px color-mix(in srgb, var(--c) 85%, transparent); }
.bouton-recit:focus-visible { outline: 3px solid var(--texte); outline-offset: 3px; }
.bouton-recit__lecture { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--fond); }
.bouton-recit__lecture::after { content: ""; position: absolute; left: 17px; top: 13px; border-style: solid; border-width: 9px 0 9px 14px; border-color: transparent transparent transparent var(--c); }
.bouton-recit__texte { display: flex; flex-direction: column; line-height: 1.05; }
.bouton-recit__titre { font-size: clamp(19px, 1.7vw, 25px); font-weight: 900; font-variation-settings: "wdth" var(--large); letter-spacing: -.02em; }
.bouton-recit__sous { margin-top: 3px; font-size: 13px; font-weight: 600; font-variation-settings: "wdth" var(--etroit); opacity: .8; }
.bouton-recit--petit { padding: 9px 18px 9px 10px; gap: 10px; }
.bouton-recit--petit .bouton-recit__lecture { width: 32px; height: 32px; }
.bouton-recit--petit .bouton-recit__lecture::after { left: 12px; top: 9px; border-width: 7px 0 7px 11px; }
.bouton-recit--petit .bouton-recit__titre { font-size: 17px; }
.bouton-recit--petit .bouton-recit__sous { display: none; }