/* ═══════════════════════════════════════════════════════════════════
   LES PAGES /legal-notice/ ET /privacy-policy/ — deux textes de référence

   Chargée UNIQUEMENT sur ces deux pages (voir inc/legal.php).

   ⚠️ UNE PAGE DE RÉFÉRENCE N'A PAS DE FIGURE. Pas de fond « wash », pas
   de révélation au défilement, pas d'image, pas de transition : on vient
   ici lire, et chercher une mention. La parenté avec le reste du site
   tient au fer à gauche sur la grille de 1240px, au surtitre, aux filets
   et aux jetons --fi-* — pas à un effet.

   ⚠️ AUCUNE VALEUR CHROMATIQUE, AUCUN ESPACEMENT EN DUR, comme les autres
   feuilles de page. Les marqueurs d'attente gardent l'ambre de .fi-pending
   (style.css), non redéclaré ici.

   Aucune animation n'est déclarée ici. Le seul mouvement de la page est le
   défilement vers une ancre du sommaire, et style.css le rend déjà
   instantané sous « prefers-reduced-motion: reduce ».
   ═══════════════════════════════════════════════════════════════════ */

.fi-legal {
	/* LA MESURE. Tout le corps s'y tient, sommaire et fiches compris : une
	   colonne qui change de largeur d'une rubrique à l'autre se lit comme deux
	   documents. ⚠️ Elle PLAFONNE aussi .fi-body, dont les 62ch sont écrasés
	   par la règle « .fi-legal__body > * » plus bas. Mesuré le 13/09 : à 42rem
	   le texte courant passait à 92 signes par ligne ; 33rem le ramène dans la
	   cible 66–74. */
	--fi-legal-measure: 33rem;
	/* La colonne des libellés d'une fiche d'identité : assez large pour
	   « Data protection officer » sur une ligne à 1440. */
	--fi-legal-key: 11.5rem;
	padding-block: clamp(3rem, 6vw, 5.5rem) clamp(4rem, 8vw, 7rem);
	background: var(--fi-color-surface);
	overflow-wrap: break-word;
}

/* WordPress pose une marge haute sur tout bloc frère (blockGap) : les deux
   étages de la page et chacun de leurs enfants règlent la leur ici. */
.fi-legal > *,
.fi-legal__head > *,
.fi-legal__body > * {
	margin-block: 0;
}

/* ── La tête ─────────────────────────────────────────────────────────
   Surtitre, titre, date, une phrase. Le titre est au pas 4 et non au pas
   display des pages de marque : c'est l'intitulé d'un document, pas une
   accroche.
   ─────────────────────────────────────────────────────────────────── */

.fi-legal__head {
	padding-block-end: clamp(2rem, 4vw, 3rem);
	border-block-end: 1px solid var(--fi-color-line);
}

.fi-legal__head > .fi-eyebrow {
	margin-block-end: var(--fi-space-m);
}

.fi-legal__h1 {
	max-inline-size: 20ch;
	font-size: var(--fi-size-step-4);
	line-height: 1.05;
	letter-spacing: -0.035em;
	color: var(--fi-color-ink);
	text-wrap: balance;
}

/* La date en mono : c'est un relevé, pas une phrase. 15px de plancher, la
   valeur mesurée ailleurs sur le site pour un texte qui se LIT. */
.fi-legal__head > .fi-legal__date {
	margin-block-start: var(--fi-space-s);
	font-family: var(--fi-font-mono);
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--fi-color-muted);
}

.fi-legal__head > .fi-lede {
	margin-block-start: var(--fi-space-m);
	max-inline-size: 52ch;
}

/* ── Le corps ────────────────────────────────────────────────────────
   Une colonne, au fer à gauche. Les enfants d'un groupe « default » ne
   sont pas centrés par WordPress (seuls ceux d'un « constrained » le
   sont) : la mesure suffit, sans la parade de la demi-marge.
   ─────────────────────────────────────────────────────────────────── */

.fi-legal__body {
	padding-block-start: clamp(2rem, 4vw, 3rem);
	counter-reset: fi-legal;
}

.fi-legal__body > * {
	max-inline-size: var(--fi-legal-measure);
}

/* Le texte courant en --fi-color-text et non dans le gris de .fi-body :
   ailleurs sur le site le corps accompagne une figure et se parcourt ; ici
   il EST la page, et se lit jusqu'au bout. La mesure et l'interlignage de
   .fi-body restent les siens. */
.fi-legal__body .fi-body {
	color: var(--fi-color-text);
}

.fi-legal__body > .fi-body,
.fi-legal__body > .fi-legal__list,
.fi-legal__body > .fi-legal__card {
	margin-block-start: var(--fi-space-s);
}

/* ⚠️ La réserve d'ancre de style.css (« [id][class*="fi-"] », 7rem) est une
   valeur FIXE. L'en-tête collant, lui, est mesuré par ui.js dans
   --fi-header-h — 97px à 1440, 92px à 390. On s'appuie sur la mesure, et
   le sélecteur est porté à la même spécificité que celui de style.css pour
   passer devant lui. */
.fi-legal .fi-legal__body [id] {
	scroll-margin-block-start: calc(var(--fi-header-h) + var(--fi-space-m));
}

/* Les rubriques, numérotées par compteur : le sommaire et les titres
   comptent de la même façon sans qu'un seul chiffre soit saisi. Le numéro
   en mono dans la marge du titre — l'idiome « 01 » du site. */
.fi-legal__h2 {
	display: flex;
	align-items: baseline;
	gap: var(--fi-space-s);
	margin-block-start: clamp(2.75rem, 5vw, 3.75rem);
	padding-block-start: var(--fi-space-m);
	border-block-start: 1px solid var(--fi-color-line);
	font-size: var(--fi-size-step-2);
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--fi-color-ink);
	text-wrap: balance;
}

.fi-legal__h2::before {
	counter-increment: fi-legal;
	content: counter(fi-legal, decimal-leading-zero);
	flex: 0 0 auto;
	min-inline-size: 1.75rem;
	font-family: var(--fi-font-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--fi-color-muted);
}

/* Les sous-rubriques : pas de numéro — elles n'entrent pas au sommaire —
   mais le même retrait que le texte du h2, pour qu'elles se lisent comme
   ses enfants. */
.fi-legal__h3 {
	margin-block-start: var(--fi-space-l);
	font-size: var(--fi-size-step-1);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--fi-color-ink);
}

.fi-legal__body > .fi-legal__h2 + *,
.fi-legal__body > .fi-legal__h3 + * {
	margin-block-start: var(--fi-space-s);
}

/* ── Les listes ──────────────────────────────────────────────────────
   Deux usages : les champs du formulaire et les droits (des énumérations),
   et les résumés de traitement « Purpose / Legal basis / … », dont le
   libellé en gras suffit à faire un tableau lisible à 390px — un <table>
   y déborderait.
   ─────────────────────────────────────────────────────────────────── */

.fi-legal__list {
	padding-inline-start: 1.25rem;
}

.fi-legal__list > li {
	max-inline-size: 62ch;
	font-size: var(--fi-size-step-0);
	line-height: 1.68;
	color: var(--fi-color-text);
}

.fi-legal__list > li + li {
	margin-block-start: var(--fi-space-2xs);
}

.fi-legal__list > li::marker {
	color: var(--fi-color-muted);
}

.fi-legal__list strong {
	font-weight: 600;
	color: var(--fi-color-ink);
}

/* ── Les liens du texte ──────────────────────────────────────────────
   Soulignés, toujours. L'encre des liens (--fi-color-brand) et celle du
   texte (--fi-color-text) sont deux quasi-noirs : sans soulignement, un
   lien ne se distingue que par une nuance invisible (WCAG 1.4.1).
   ─────────────────────────────────────────────────────────────────── */

.fi-legal__body p a,
.fi-legal__body li a,
.fi-legal__card a {
	color: var(--fi-color-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.fi-legal__body p a:hover,
.fi-legal__body li a:hover,
.fi-legal__card a:hover {
	text-decoration-thickness: 2px;
}

/* ── Les fiches d'identité ───────────────────────────────────────────
   Éditeur, directeur de la publication, hébergeur, responsable du
   traitement. En rangs à filets, comme les registres du site : une
   mention légale se cherche, un libellé en marge se trouve.
   ─────────────────────────────────────────────────────────────────── */

.fi-legal__card {
	border-block-start: 1px solid var(--fi-color-line);
}

.fi-legal__card > div {
	display: grid;
	gap: var(--fi-space-3xs) var(--fi-space-m);
	padding-block: var(--fi-space-xs);
	border-block-end: 1px solid var(--fi-color-line);
}

@media (min-width: 40em) {
	.fi-legal__card > div {
		grid-template-columns: var(--fi-legal-key) minmax(0, 1fr);
		align-items: baseline;
	}
}

/* Le libellé au rang de micro-libellé du site (0.6875rem, voir .fi-eyebrow). */
.fi-legal__card dt {
	font-family: var(--fi-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--fi-color-muted);
}

.fi-legal__card dd {
	margin: 0;
	font-size: var(--fi-size-step-0);
	line-height: 1.55;
	color: var(--fi-color-ink);
}

/* ── Le sommaire ─────────────────────────────────────────────────────
   En tête du corps et non en colonne latérale collante : une colonne
   latérale prend la place de la mesure à 1024, et disparaît de toute façon
   sous 56em. Deux colonnes dès 40em pour tenir neuf entrées sur cinq rangs.
   ─────────────────────────────────────────────────────────────────── */

.fi-legal__toc {
	padding: var(--fi-space-s) var(--fi-space-m);
	border-radius: var(--fi-radius-m);
	background: var(--fi-color-surface-alt);
}

.fi-legal__toclab {
	margin-block: var(--fi-space-2xs) var(--fi-space-3xs);
	font-family: var(--fi-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fi-color-muted);
}

.fi-legal__toclist {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: fi-legal-toc;
}

@media (min-width: 40em) {
	.fi-legal__toclist {
		columns: 2;
		column-gap: var(--fi-space-l);
	}
}

.fi-legal__toclist > li {
	break-inside: avoid;
	counter-increment: fi-legal-toc;
}

/* 44px de plancher : la cible est le rang entier, pas le seul libellé —
   neuf liens empilés se touchent au pouce. */
.fi-legal .fi-legal__toclist a {
	display: flex;
	align-items: center;
	gap: var(--fi-space-xs);
	min-block-size: 44px;
	color: var(--fi-color-ink);
	font-size: var(--fi-size-step-0);
	line-height: 1.3;
	text-decoration: none;
}

.fi-legal__toclist a::before {
	content: counter(fi-legal-toc, decimal-leading-zero);
	flex: 0 0 auto;
	min-inline-size: 1.75rem;
	font-family: var(--fi-font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	color: var(--fi-color-muted);
}

.fi-legal__toclist a:hover span,
.fi-legal__toclist a:focus-visible span {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}