/* atlas.css — la carte d'accueil, ses repères, et l'index des faits
 *
 * Un fait est un repère de carte : un point de la couleur de son dossier,
 * son chiffre, son nom. Pas de boîte. Hors de l'atlas (dossiers, fils d'une
 * fiche), les mêmes repères se rangent en index, une ligne par fait. */

/* ── Repère d'un fait ────────────────────────────────────────── */
.carte {
	position: relative; display: grid; grid-template-columns: 14px 1fr; column-gap: 12px; align-content: start;
	width: 260px; height: 190px; padding: 6px 0;
	color: var(--texte); text-decoration: none;
}
.carte::before { content: ""; grid-row: 1; width: 14px; height: 14px; margin-top: .62em; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 0 var(--c); transition: box-shadow .3s; }
.carte:hover::before, .carte:focus-visible::before { box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 30%, transparent); }
.carte__chiffre { grid-column: 2; font-size: 46px; line-height: 1.05; font-weight: 900; font-variation-settings: "wdth" var(--large); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--texte); }
.carte__chiffre small { margin-left: 6px; font-size: 15px; font-weight: 500; font-variation-settings: "wdth" var(--etroit); letter-spacing: 0; color: var(--texte-2); }
.carte__titre { grid-column: 2; font-size: 18px; line-height: 1.25; font-weight: 500; }
.carte:hover .carte__titre { text-decoration: underline; text-underline-offset: .2em; }
.carte .vignette { grid-column: 2; margin-top: 10px; width: 100%; height: 44px; fill: var(--c); stroke: var(--c); stroke-width: 1.6; opacity: .8; }
.carte .vignette path { fill: none; }

/* Les récits (pages) : un anneau au lieu d'un point. */
.carte--recit::before { background: transparent; box-shadow: inset 0 0 0 3px var(--c); }
.carte--recit .carte__titre { font-size: 22px; font-weight: 600; font-variation-settings: "wdth" var(--etroit); }
.carte__type { grid-column: 2; grid-row: 2; margin-top: 4px; font-size: 14px; font-variation-settings: "wdth" var(--etroit); color: var(--texte-3); }
.carte.is-vu .carte__titre::after { content: " (vu)"; color: var(--texte-3); font-weight: 400; }

/* ── Index : les mêmes repères, une ligne par fait ───────────── */
.cartes { display: flex; flex-direction: column; }
.cartes .carte {
	width: auto; height: auto; padding: 18px 0;
	grid-template-columns: 14px minmax(9ch, 15ch) 1fr; grid-template-areas: "point chiffre titre" ". chiffre vignette";
	align-items: baseline; border-top: 1px solid var(--trait);
}
.cartes .carte::before { grid-area: point; align-self: start; margin-top: .9em; }
.cartes .carte__chiffre { grid-area: chiffre; font-size: clamp(30px, 3.4vw, 44px); }
.cartes .carte__titre { grid-area: titre; font-size: clamp(18px, 1.6vw, 22px); }
.cartes .carte .vignette { grid-area: vignette; max-width: 360px; height: 36px; margin-top: 6px; }
.cartes .carte--recit .carte__type { grid-area: vignette; }
@media (max-width: 600px) {
	.cartes .carte { grid-template-columns: 14px 1fr; grid-template-areas: "point chiffre" ". titre" ". vignette"; }
}

/* ── L'atlas ─────────────────────────────────────────────────── */
.atlas { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--fond); }
.atlas__intro { position: absolute; z-index: 5; left: var(--gouttiere); top: calc(var(--tete-h) + 14px); max-width: 30rem; pointer-events: none; }
.admin-bar .atlas__intro { top: calc(var(--tete-h) + 46px); }
.atlas__titre { margin: 0 0 8px; font-size: clamp(34px, 4.6vw, 68px); line-height: .95; font-weight: 900; font-variation-settings: "wdth" var(--large); letter-spacing: -.035em; }
.atlas__mode { margin: 0; font-size: 15px; font-variation-settings: "wdth" var(--etroit); color: var(--texte-2); }

.atlas__vue { position: absolute; inset: 0; cursor: grab; touch-action: none; }
.atlas__vue.is-saisi { cursor: grabbing; }
.atlas__vue:focus-visible { outline-offset: -4px; }

/* Le plan porte le quadrillage de coordonnées de la carte (il zoome avec elle). */
.atlas__plan {
	position: absolute; left: 0; top: 0; width: var(--pw); height: var(--ph); transform-origin: 0 0; will-change: transform;
	background-image: linear-gradient(var(--trame) 2px, transparent 2px), linear-gradient(90deg, var(--trame) 2px, transparent 2px);
	background-size: 400px 400px; background-position: -2px -2px;
}
.atlas__plan > .carte, .repere { position: absolute; left: calc(var(--x) + var(--ox)); top: calc(var(--y) + var(--oy)); }
.atlas__fils { position: absolute; left: 0; top: 0; overflow: visible; width: 1px; height: 1px; pointer-events: none; }
.atlas__liens line { stroke: var(--texte-3); stroke-width: 1.5; stroke-dasharray: 2 6; vector-effect: non-scaling-stroke; }
.atlas__liens line.is-actif { stroke: var(--texte); stroke-dasharray: none; stroke-width: 2; }
.atlas__chemin { fill: none; stroke: var(--texte); stroke-width: 2.5; stroke-dasharray: 8 8; vector-effect: non-scaling-stroke; animation: marche 1.2s linear infinite; }
@keyframes marche { to { stroke-dashoffset: -16; } }

.repere { margin: 0; transform: translate(-50%, -50%); white-space: nowrap; }
.repere a { text-decoration: none; }
.repere a:hover { text-decoration: underline; }
.repere--dossier { padding: 0 .2em; background: var(--fond); font-size: 150px; line-height: 1; font-weight: 900; font-variation-settings: "wdth" var(--large); letter-spacing: -.04em; color: var(--c); }
.repere--sous-dossier { padding: 0 .3em; background: var(--fond); font-size: 40px; line-height: 1.1; font-weight: 600; font-variation-settings: "wdth" var(--etroit); }
.repere--sous-dossier::before { content: ""; display: inline-block; width: .3em; height: .3em; margin-right: .35em; border-radius: 50%; background: var(--c); vertical-align: .12em; }

/* Zoom sémantique : de loin, seules les grandes masses et les chiffres restent,
 * à une taille d'écran constante (--k = échelle courante, posée par atlas.js). */
.atlas { --k: 1; }
.atlas.is-loin .carte__titre, .atlas.is-loin .vignette, .atlas.is-loin .carte__type { opacity: 0; }
.atlas.is-loin .carte::before { width: calc(10px / var(--k)); height: calc(10px / var(--k)); max-width: 120px; max-height: 120px; }
.atlas.is-loin .carte { grid-template-columns: min(120px, calc(10px / var(--k))) 1fr; }
.atlas.is-loin .carte__chiffre { font-size: min(100px, calc(15px / var(--k))); }
.atlas.is-loin .carte__chiffre small { display: none; }
.atlas.is-loin .carte--recit { opacity: .5; }
/* Plafonné pour tenir dans l'écart entre deux dossiers (2 300 unités) ; les noms longs passent à la ligne. */
.atlas.is-loin .repere--dossier { font-size: min(max(150px, calc(40px / var(--k))), 300px); width: max-content; max-width: 2000px; white-space: normal; text-align: center; line-height: .9; }
.atlas.is-loin .repere--sous-dossier { font-size: min(max(40px, calc(15px / var(--k))), 130px); }

.atlas__outils { position: absolute; z-index: 5; right: var(--gouttiere); bottom: 22px; display: flex; gap: 8px; }
.atlas__outils button {
	min-width: 42px; height: 42px; padding: 0 14px; border: 0; border-radius: 21px;
	background: var(--fond-3); color: var(--texte); font: 600 16px var(--f); font-variation-settings: "wdth" var(--etroit); cursor: pointer;
}
.atlas__outils button:hover { background: var(--trame); }
.atlas > .chemin { position: absolute; z-index: 5; left: var(--gouttiere); bottom: 28px; right: 230px; }

/* Sans JavaScript (ou avant son démarrage) : une liste lisible. */
.atlas:not(.is-vivant) { height: auto; overflow: visible; padding-bottom: 60px; }
.atlas:not(.is-vivant) .atlas__intro { position: static; padding: calc(var(--tete-h) + 24px) var(--gouttiere) 24px; }
.atlas:not(.is-vivant) .atlas__vue { position: static; cursor: auto; }
.atlas:not(.is-vivant) .atlas__plan { position: static; width: auto; height: auto; display: flex; flex-wrap: wrap; gap: 16px; padding: 0 var(--gouttiere); background: none; }
.atlas:not(.is-vivant) .atlas__plan > .carte, .atlas:not(.is-vivant) .repere { position: static; transform: none; }
.atlas:not(.is-vivant) .repere { flex-basis: 100%; font-size: 40px; }
.atlas:not(.is-vivant) .repere--sous-dossier { font-size: 24px; }
.atlas:not(.is-vivant) .atlas__fils, .atlas:not(.is-vivant) .atlas__outils { display: none; }

/* ── Vue d'ensemble : un système par dossier, ses sujets en orbite ── */
@property --r { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --rot { syntax: "<angle>"; inherits: true; initial-value: 0deg; }

.orbites { display: none; }
.atlas.is-ensemble { display: flex; flex-direction: column; height: auto; min-height: 100vh; min-height: 100svh; overflow: visible; }
.atlas.is-ensemble .atlas__intro { position: relative; top: auto; left: auto; padding: calc(var(--tete-h) + 24px) var(--gouttiere) 0; max-width: 64rem; }
.atlas.is-ensemble .orbites { flex: 1; align-content: center; }
.atlas.is-ensemble .atlas__vue, .atlas.is-ensemble .atlas__outils, .atlas.is-ensemble > .chemin { display: none; }
.atlas.is-ensemble .orbites { display: grid; }
.atlas__mode--carte, .atlas.is-ensemble .atlas__mode--ensemble { display: block; }
.atlas__mode--ensemble, .atlas.is-ensemble .atlas__mode--carte { display: none; }

.orbites {
	grid-template-columns: 1fr; gap: 20px 24px; padding: clamp(24px, 5vh, 56px) var(--gouttiere) 120px;
}
@media (min-width: 640px) { .orbites { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .orbites { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.orbite { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.orbite:hover, .orbite:focus-within, .orbite.is-ouvert { z-index: 2; }
.orbite__systeme { position: relative; width: min(100%, 340px); aspect-ratio: 1; container-type: inline-size; }
.orbite__anneau {
	position: absolute; inset: 20%; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--c) 45%, transparent);
	transition: inset .7s cubic-bezier(.3, .7, .2, 1), opacity .5s; opacity: .7;
}
.orbite__astre {
	position: absolute; inset: 26%; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
	border-radius: 50%; text-align: center; text-decoration: none; color: var(--texte);
	background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--c) 38%, var(--fond-2)), var(--fond-2) 72%);
	box-shadow: inset 0 0 0 2px var(--c), 0 0 0 0 color-mix(in srgb, var(--c) 30%, transparent);
	transition: transform .6s cubic-bezier(.3, .7, .2, 1.25), box-shadow .6s;
}
.orbite__nom { padding: 0 10px; font-size: clamp(22px, 7.5cqw, 34px); line-height: .92; font-weight: 900; font-variation-settings: "wdth" var(--large); letter-spacing: -.03em; color: var(--c); }
.orbite__compte { font-size: 13px; font-variation-settings: "wdth" var(--etroit); color: var(--texte-2); }

.orbite__satellites { position: absolute; inset: 0; z-index: 3; margin: 0; padding: 0; list-style: none; pointer-events: none; --r: 18cqw; animation: gravite 90s linear infinite; }
.orbite__satellites li {
	--a: calc(var(--i) / var(--n) * 360deg + var(--rot) - 90deg);
	position: absolute; left: 50%; top: 50%; width: 0; height: 0;
	transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a)));
}
.orbite__satellites a {
	position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) scale(.6); opacity: 0;
	display: flex; flex-direction: column; align-items: center; width: max-content; max-width: 10.5em; padding: 7px 12px; border-radius: 16px;
	background: var(--fond); box-shadow: inset 0 0 0 1.5px var(--cs, var(--c)); color: var(--texte); text-align: center; text-decoration: none;
	font-size: 14px; line-height: 1.15; font-weight: 700; font-variation-settings: "wdth" var(--etroit);
	transition: opacity .45s, transform .55s cubic-bezier(.3, .7, .2, 1.3);
}
.orbite__satellites a small { font-weight: 400; font-size: 12px; color: var(--texte-2); }
.orbite__satellites a:hover, .orbite__satellites a:focus-visible { background: var(--cs, var(--c)); color: var(--fond); }
.orbite__satellites a:hover small, .orbite__satellites a:focus-visible small { color: var(--fond); }
.orbite__satellites li::before { content: ""; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--cs, var(--c)); transition: opacity .3s; }

/* Ouvert (survol, focus, ou toucher) : l'astre grandit, les sujets s'écartent et deviennent lisibles. */
.orbite:hover .orbite__astre, .orbite:focus-within .orbite__astre, .orbite.is-ouvert .orbite__astre {
	transform: scale(1.16); box-shadow: inset 0 0 0 3px var(--c), 0 0 0 14px color-mix(in srgb, var(--c) 14%, transparent);
}
.orbite:hover .orbite__anneau, .orbite:focus-within .orbite__anneau, .orbite.is-ouvert .orbite__anneau { inset: 2%; opacity: 1; }
.orbite:hover .orbite__satellites, .orbite:focus-within .orbite__satellites, .orbite.is-ouvert .orbite__satellites { --r: 48cqw; pointer-events: auto; }
.orbite:hover .orbite__satellites a, .orbite:focus-within .orbite__satellites a, .orbite.is-ouvert .orbite__satellites a { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.orbite:hover .orbite__satellites li::before, .orbite:focus-within .orbite__satellites li::before, .orbite.is-ouvert .orbite__satellites li::before { opacity: 0; }
.orbite__satellites { transition: --r .7s cubic-bezier(.3, .7, .2, 1.15); }
@keyframes gravite { to { --rot: 360deg; } }
.orbite:hover .orbite__satellites { animation-duration: 140s; }
@media (prefers-reduced-motion: reduce) { .orbite__satellites { animation: none; } }

/* Bouton « Parcourir la carte » (vue d'ensemble) et retour (carte) */
.atlas__vers-carte { display: none; }
.atlas.is-ensemble .atlas__vers-carte {
	display: block; margin: 0 auto 60px; padding: 12px 22px; border: 1px solid var(--trame); border-radius: 24px;
	background: none; color: var(--texte); font: 700 16px var(--f); font-variation-settings: "wdth" var(--etroit); cursor: pointer;
}
.atlas.is-ensemble .atlas__vers-carte:hover { border-color: var(--texte-2); }

/* ── Dans la carte : les récits deviennent de gros boutons, toujours lisibles ── */
.atlas__plan > .carte--en-clair {
	display: flex; flex-direction: column; justify-content: center; height: auto; min-height: 110px; padding: 18px 22px 18px 74px; border-radius: 60px;
	background: var(--c); color: var(--fond); box-shadow: 0 14px 40px -16px color-mix(in srgb, var(--c) 80%, transparent);
	transform-origin: 50% 0; transform: scale(var(--grand, 1)); transition: box-shadow .25s;
	z-index: 3; /* au-dessus des noms de sous-dossiers et des fils */
}
.atlas__plan > .carte--en-clair::before {
	position: absolute; left: 16px; top: 50%; width: 44px; height: 44px; margin: -22px 0 0; border-radius: 50%; background: var(--fond); box-shadow: none;
}
.atlas__plan > .carte--en-clair::after { content: ""; position: absolute; left: 33px; top: 50%; margin-top: -9px; border-style: solid; border-width: 9px 0 9px 14px; border-color: transparent transparent transparent var(--c); }
.atlas__plan > .carte--en-clair .carte__titre { font-size: 26px; line-height: 1; font-weight: 900; font-variation-settings: "wdth" var(--large); letter-spacing: -.02em; }
.atlas__plan > .carte--en-clair .carte__type { margin-top: 6px; color: var(--fond); opacity: .8; font-weight: 600; }
.atlas__plan > .carte--en-clair:hover { box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 35%, transparent); }
.atlas__plan > .carte--en-clair:hover .carte__titre { text-decoration: none; }
/* De loin, le bouton garde une taille d'écran lisible au lieu de s'effacer. */
.atlas.is-loin .atlas__plan > .carte--en-clair { opacity: 1; --grand: min(3.4, calc(0.3 / var(--k))); }
.atlas.is-loin .atlas__plan > .carte--en-clair .carte__titre, .atlas.is-loin .atlas__plan > .carte--en-clair .carte__type { opacity: 1; }
.atlas.is-loin .atlas__plan > .carte--en-clair::before { width: 44px; height: 44px; max-width: none; max-height: none; }