/* ═══════════════════════════════════════════════════════════════════════════
   BIG CITY — pages légales (bigcity.fr/app/politique-de-confidentialite/)
   ───────────────────────────────────────────────────────────────────────────
   Feuille de style des pages de texte long. Elle vient après `base.css` et
   n'ajoute qu'une chose : une colonne de lecture confortable sur fond sombre.

   PARTI PRIS. Un document juridique se lit, il ne se parcourt pas : pas
   d'effets, pas d'apparition au défilement, pas de carte. Une seule colonne
   étroite (68 caractères au maximum), une interlignes généreuse, et un
   sommaire ancré en tête pour atteindre un article précis — c'est la seule
   navigation dont ce type de page a besoin.
   ═══════════════════════════════════════════════════════════════════════════ */

.legal {
	max-width: 74ch;
	margin-inline: auto;
	padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 6vw, 5rem);
}

/* ─────────────────────────── 1. EN-TÊTE DE DOCUMENT ────────────────────── */

.legal__head {
	padding-bottom: clamp(1.75rem, 4vw, 2.5rem);
	margin-bottom: clamp(2rem, 4vw, 3rem);
	border-bottom: 1px solid var(--line);
}
.legal__head h1 {
	font-size: clamp(2rem, 4.5vw, 3rem);
	margin: 0 0 1rem;
}
.legal__intro {
	font-size: clamp(1rem, 1.2vw, 1.1rem);
	color: var(--ink-muted);
	margin: 0;
}
.legal__intro + .legal__intro { margin-top: 1rem; }
.legal__updated {
	display: inline-block;
	margin-top: 1.5rem;
	padding: .35rem .8rem;
	font-size: .78rem;
	font-weight: 500;
	color: var(--ink-soft);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
}

/* ─────────────────────────── 2. SOMMAIRE ───────────────────────────────── */

.legal__toc {
	padding: clamp(1.25rem, 3vw, 1.75rem);
	margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}
.legal__toc h2 {
	font-family: var(--font-body);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin: 0 0 1rem;
}
.legal__toc ol {
	/* Deux colonnes dès qu'il y a la place : quatorze articles en une seule
	 * colonne feraient un sommaire plus haut que les premiers articles. */
	columns: 2;
	column-gap: 2rem;
	margin: 0;
	padding-left: 1.15rem;
	font-size: .92rem;
}
.legal__toc li {
	margin-bottom: .45rem;
	break-inside: avoid;
	color: var(--green);           /* le numéro, en accent */
	font-variant-numeric: tabular-nums;
}
.legal__toc a {
	color: var(--ink-muted);
	transition: color .2s var(--ease);
}
.legal__toc a:hover { color: var(--green); }

@media (max-width: 640px) {
	.legal__toc ol { columns: 1; }
}

/* ─────────────────────────── 3. CORPS DU DOCUMENT ──────────────────────── */

.legal article {
	padding-top: clamp(1.5rem, 3vw, 2rem);
	margin-top: clamp(1.5rem, 3vw, 2rem);
	border-top: 1px solid var(--line);
	/* L'en-tête est collant : sans cette marge, un saut depuis le sommaire
	 * placerait le titre de l'article sous la barre. */
	scroll-margin-top: 88px;
}
.legal article:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }

.legal h2 {
	font-size: clamp(1.25rem, 2.2vw, 1.6rem);
	margin: 0 0 1rem;
}
.legal h2 .num {
	display: block;
	font-family: var(--font-body);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--green);
	margin-bottom: .5rem;
}

.legal p {
	color: var(--ink-muted);
	line-height: 1.7;
}
.legal p:last-child { margin-bottom: 0; }

.legal article ul {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}
.legal article li {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	padding: .35rem 0;
	color: var(--ink-muted);
	line-height: 1.6;
}
.legal article li::before {
	content: "";
	flex-shrink: 0;
	width: 6px; height: 6px;
	margin-top: .62rem;
	border-radius: 50%;
	background: var(--green);
}

/* Bloc « identité du responsable de traitement » : c'est l'information la
 * plus consultée de la page, elle mérite d'être trouvable d'un coup d'œil. */
.legal__party {
	padding: 1.25rem 1.4rem;
	margin: 0 0 1rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-left: 3px solid var(--green);
	border-radius: 0 var(--radius) var(--radius) 0;
	color: var(--ink);
	font-size: .95rem;
	line-height: 1.65;
}
.legal__party strong { color: var(--cream-bright); }

.legal a[href^="mailto:"] {
	color: var(--green);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.legal a[href^="mailto:"]:hover { color: var(--cream-bright); }

/* Renvoi en pied de document vers les autres pages du réseau. */
.legal__end {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	padding-top: clamp(1.75rem, 4vw, 2.5rem);
	border-top: 1px solid var(--line);
}
.legal__end a {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .65rem 1.15rem;
	font-size: .88rem;
	font-weight: 700;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-pill);
	transition: background .2s var(--ease), border-color .2s var(--ease);
}
.legal__end a:hover { background: var(--surface-2); border-color: var(--cream); }
.legal__end svg { width: 15px; height: 15px; }

/* ─────────────────────────── 5. PAGE DE TÉLÉCHARGEMENT ─────────────────── */
/* /app/telecharger/ réemploie la colonne de lecture ci-dessus, avec un seul
 * ajout : les badges de store y sont centrés sous un titre centré. */

.legal--center { text-align: center; }
.legal--center .legal__head { border-bottom: 0; }
.legal--center .stores { justify-content: center; margin-top: 2rem; }
.legal--center .legal__end { justify-content: center; }