/* ═══════════════════════════════════════════════════════════════════
   LA PAGE /about/ — d'où vient le groupe, où il est, vers où continuer

   Chargée UNIQUEMENT sur /about/ (voir inc/about.php). Elle ne pèse sur
   aucune autre page.

   ⚠️ AUCUNE VALEUR CHROMATIQUE, AUCUN ESPACEMENT EN DUR. Tout passe par
   les variables --fi-*, injectées par firalis-core depuis
   packages/tokens/tokens.json. La page est achromatique comme le groupe :
   la couleur n'y apparaît que dans les VAGUES des sociétés et dans le
   filet qui souligne leur nom — un logotype et un filet, les deux seuls
   usages que docs/10-charte-graphique.md lui accorde.

   Quatre morceaux, et deux bandes voisines ne partagent jamais leur
   gabarit (grille A7 de docs/54) :
     tête        h1, chapô
     ligne       liste ordonnée pleine largeur, filet vertical — SANS en-tête
     trois pays  en-tête (texte | photo dès 64em) | trois colonnes à filets
     aiguillage  titre et phrase | trois rangs-liens

   ⚠️ 17/09/2026 — la tête a perdu son surtitre et la ligne son en-tête
   entier : suppressions du CLIENT sur sa copie corrigée, relevées dans
   docs/67-revue-client-about.md. Les règles qui les servaient ont été
   retirées d'ici, pas commentées. Ne pas les réécrire.

   Classes du socle réutilisées TELLES QUELLES, jamais redéclarées :
   .fi-eyebrow, .fi-lede, .fi-body, .fi-hl, .fi-rv, .fi-arrow.
   ═══════════════════════════════════════════════════════════════════ */

.fi-about {
	/* Une seule réserve de bande pour les trois bandes de corps : elles
	   n'ont pas de raison de respirer différemment (grille A1). */
	--fi-about-band: clamp(3rem, 5.5vw, 5.5rem);
	/* La ligne des dates. La colonne des années est dimensionnée sur le
	   mot le plus large qu'elle porte, « Today », pas sur « 2008 » : à
	   5.75rem le libellé touchait la vague. */
	--fi-about-year: 6.5rem;
	--fi-about-node: 1.75rem;
	--fi-about-gap: clamp(0.75rem, 1.6vw, 1.5rem);
	/* Hauteur de la boîte d'une année — line-height 1. Trois choses s'y
	   calent : la vague, le cran, et le point où le filet vertical commence
	   et s'arrête. Une seule valeur, sans quoi le filet partirait à côté du
	   premier repère. */
	--fi-about-yearsize: var(--fi-size-step-2);
	background: var(--fi-color-surface);
}

@media (min-width: 40em) {
	.fi-about {
		--fi-about-yearsize: var(--fi-size-step-3);
	}
}

/* WordPress pose une marge haute sur tout bloc frère : elle décale les
   bandes les unes des autres et casse les filets de séparation. */
.fi-about > *,
.fi-about__band > *,
.fi-about__close > *,
.fi-about__split > *,
.fi-about__head > *,
.fi-about__openbody > * {
	margin-block-start: 0;
}

/* ── La tête ─────────────────────────────────────────────────────────
   La bande qui reçoit le fond « wash » (figure attribuée par
   firalis_wash_figure). L'enveloppe .fi-about en est exclue, sans quoi
   le canvas s'étirerait sur toute la page.
   ─────────────────────────────────────────────────────────────────── */

.fi-about__open {
	position: relative;
	padding-block: clamp(3rem, 6vw, 5.5rem) clamp(2.5rem, 5vw, 4rem);
}

/* Même parade que .fi-team__h1, .fi-cop__h1 et .fi-study__h1 : WordPress
   force « margin-left: auto !important » sur les enfants directs d'une mise
   en page « constrained », et tout enfant plus étroit que le conteneur s'y
   retrouve CENTRÉ. Le décalage vaut la DEMI-MARGE du conteneur, pas zéro.
   Le h1 était imprimé par [firalis_about_h1], retiré le 17/09 ; c'est
   maintenant un bloc de titre ordinaire, enfant direct de la bande comme
   l'autre l'était — le piège, lui, n'a pas changé. */
.fi-about__h1 {
	margin-block: 0 clamp(1.5rem, 2.5vw, 2.25rem);
	margin-inline-start: max(0px, calc((100% - var(--fi-container-max)) / 2)) !important;
	margin-inline-end: auto !important;
	max-inline-size: 20ch;
	font-size: var(--fi-size-step-5);
	line-height: 1.01;
	letter-spacing: -0.045em;
}

/* Le chapô est ENVELOPPÉ (.fi-about__openbody), et c'est la parade
   ci-dessus sous une autre forme : posé nu dans la bande, un paragraphe
   borné à 52ch serait centré lui aussi. L'enveloppe prend toute la largeur
   du conteneur et le chapô s'y cale à gauche. */
.fi-about__openbody .fi-lede {
	margin-block: 0;
	max-inline-size: 52ch;
}

/* Le lien du chapô de la bande des pays — vers /contact/. Le texte reste en
   encre, le soulignement prend le filet décoratif du site. */
.fi-about .fi-lede a {
	color: var(--fi-color-ink);
	text-decoration-line: underline;
	text-decoration-color: var(--fi-color-wash);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.22em;
}

.fi-about .fi-lede a:hover {
	text-decoration-color: var(--fi-color-ink);
}

/* ── Les bandes de corps ─────────────────────────────────────────────── */

.fi-about__band,
.fi-about__close {
	padding-block: var(--fi-about-band);
	border-block-start: 1px solid var(--fi-color-line);
}

/* La bande des pays prend l'aplat secondaire : c'est le seul changement de
   fond de la page, et il tombe entre les deux bandes dont les gabarits se
   ressemblent le plus en une colonne. */
.fi-about__band--place {
	background: var(--fi-color-surface-alt);
}

/* En-tête et contenu côte à côte — l'AIGUILLAGE seul depuis le 17/09 : la
   ligne des dates n'a plus d'en-tête à mettre à côté de quoi que ce soit.
   L'aiguillage passe en deux colonnes à 64em. */
.fi-about__split {
	display: grid;
	gap: clamp(2rem, 4vw, 3rem);
	align-items: start;
}

@media (min-width: 64em) {
	.fi-about__split--close {
		grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
		gap: clamp(3rem, 6vw, 6rem);
	}
}

/* La ligne prend le rang que son en-tête occupait. Elle est désormais SEULE
   dans sa bande : au pas des autres figures elle se lisait comme une note de
   bas de page sous le chapô, alors qu'elle est le corps de la page. Les années
   montent donc d'un pas — step-3 → step-4 — au seuil où la bande a la place de
   les porter.

   ⚠️ L'AUGMENTATION EST BORNÉE À CETTE BANDE, et c'est pour cela qu'elle passe
   par les variables et non par « .fi-about__when ». « --fi-about-yearsize »
   règle aussi le nom de ville de la bande des pays, qui vit dans une colonne de
   tiers de page : « Weil am Rhein » au pas 4 y passerait sur deux lignes. Les
   deux rangs partageaient une taille tant que les deux figures se répondaient ;
   depuis que l'une porte sa bande à elle seule, elles ne se répondent plus.

   La colonne des années suit : 10rem est mesuré sur « Today », le mot le plus
   large qu'elle porte, comme 6.5rem l'était au pas 3. Et la colonne du repère
   avec elle — la vague fait la hauteur de l'année pour 0,61 fois sa largeur,
   soit 30px au pas 4 : elle débordait des 28px de 1.75rem. */
@media (min-width: 72em) {
	.fi-about__band--line {
		--fi-about-year: 10rem;
		--fi-about-yearsize: var(--fi-size-step-4);
		--fi-about-node: 2.25rem;
	}
}

/* ⚠️ 17/09 — LA BANDE DE LA LIGNE N'A PLUS D'EN-TÊTE. Le client a supprimé le
   surtitre, le h2 et le chapô (docs/67-revue-client-about.md) ; la liste est
   seule dans sa bande et y prend toute la largeur du conteneur. Deux règles
   sont parties avec l'en-tête, et il ne faut pas les chercher plus haut :
   le gabarit à deux colonnes de « .fi-about__band--line .fi-about__split »,
   et l'en-tête collant qui tenait la moitié gauche pendant qu'on descendait
   la liste (grille A9). Plus d'en-tête, plus de moitié vide : la ligne
   commence au bord gauche du conteneur, comme le h1 et le chapô au-dessus
   d'elle, et les trois s'alignent sur la même verticale. */

.fi-about__head h2 {
	margin-block: 0 var(--fi-space-s);
	max-inline-size: 16ch;
}

.fi-about__head .fi-lede {
	margin-block-end: 0;
	max-inline-size: 42ch;
}

.fi-about__head .fi-body {
	margin-block-end: 0;
	max-inline-size: 44ch;
}

/* L'en-tête de la bande des pays est pleine largeur et porte la réserve qui
   le sépare de la figure. Pas de h2 plus large pour autant : le titre garde
   sa mesure, c'est la figure qui prend la largeur — et, dès 64em depuis le
   10/10/2026, la photographie qui prend la moitié droite (plus bas). */
.fi-about__head--wide {
	margin-block-end: clamp(2rem, 4vw, 3rem);
}

.fi-about__head--wide .fi-lede {
	max-inline-size: 52ch;
}

/* ── La photographie de la bande des pays ────────────────────────────
   ⚠️ 10/10/2026 — validée par l'utilisateur après l'audit des images. À
   DROITE du titre et du chapô, dans la colonne que l'en-tête laissait vide
   au-dessus des trois pays. La place écrite jusque-là — sous la figure,
   plein bord — coûtait +579 px à 1440 et éloignait l'image de la phrase
   qu'elle prouve : voir l'en-tête de patterns/about-group.php.

   Rapport 21/9, celui du rôle R4 (lieu) de docs/55 : la vraie photo — le
   Rhin à Huningue, la Passerelle des Trois Pays — se cadre en largeur, et
   remplacer le fichier ne déplacera rien. Traitement de bande claire,
   --fi-photo-tone, et un FILET de la famille claire : sur l'aplat gris de
   la bande, il fait de la photo une ouverture et non un rectangle posé —
   le geste de .fi-events__photo, sans le voile navy, qui n'existe que sur
   bande sombre.

   ⚠️ SUBSTITUT (assets/lab.jpg) : il affirme ici « Huningue = ce labo ».
   Voir inc/about.php, [firalis_about_photo]. */
.fi-about__photo {
	--fi-photo-ar: 21 / 9;
	position: relative;
	margin: 0;
	inline-size: 100%;
	aspect-ratio: var(--fi-photo-ar);
	overflow: clip;
	border-radius: var(--fi-radius-s);
	outline: 1px solid var(--fi-color-line);
	outline-offset: -1px;
}

/* L'image hors du flux : c'est le RAPPORT de la figure qui fait sa hauteur,
   jamais la hauteur intrinsèque du fichier (.fi-statement__plate). */
.fi-about__photo img {
	position: absolute;
	inset: 0;
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: 50% 62%;
	filter: var(--fi-photo-tone);
}

/* Sous 64em, PAS DE PHOTO. L'en-tête n'a qu'une colonne : la figure y
   passerait au-dessus des pays en pleine largeur, +340 px à 768 et +179 à
   390 mesurés, pour une image qui n'est qu'un substitut. Le seuil est celui
   où l'en-tête passe en deux colonnes — et celui des trois pays et de
   l'aiguillage —, pas les 60em du formulaire : entre les deux, il n'y a
   toujours qu'une colonne, donc toujours rien à côté de quoi la poser.
   `loading="lazy"` + `display: none` : le fichier n'est pas téléchargé. */
@media (max-width: 63.99em) {
	.fi-about__photo {
		display: none;
	}
}

/* Dès 64em, l'en-tête passe en deux colonnes : le texte à gauche, la photo à
   droite, à l'écart de l'aiguillage (clamp(3rem, 6vw, 6rem)). La photo prend
   la plus grande part, 1.08 contre 0.92 : le texte n'y perd presque rien —
   531 px à 1440 pour un chapô borné à 52ch (559), sans ligne de plus — et la
   photo bute à droite sur le bord des trois pays, au pixel.

   ⚠️ LA GRILLE EST CONDITIONNÉE À LA FIGURE (`:has()`). Si le fichier manque,
   firalis_group_photo() ne rend rien, et un en-tête en deux colonnes dont la
   droite est vide vaudrait moins que l'en-tête pleine largeur d'avant.
   Repli : un navigateur sans `:has()` garderait l'en-tête d'une colonne et
   poserait la photo dessous, en pleine largeur — le cas écarté sous 64em.
   Le bloc `@supports` la masque : il retrouve l'en-tête d'avant, à
   l'identique.

   ⚠️ TROIS RANGS EXPLICITES, et le dernier en `1fr`. La photo (21/9 → 267 px
   à 1440) est un peu plus haute que le texte (≈ 250 px) : un rang souple
   absorbe la différence SOUS le chapô, et le surtitre, le titre et le chapô
   gardent leur rythme. Trois rangs « auto » auraient réparti l'écart entre
   eux — vérifié : 24 px du surtitre au titre, 16 du titre au chapô, avec ou
   sans photo. Mesuré sur la page : +16 px à 1440, +22 à 1280, +29 à 1024.
   À 1024 ce n'est plus la photo (212 px, plus basse que le texte) mais le
   chapô : dans sa demi-colonne de 421 px il prend une ligne de plus.

   Si l'en-tête gagne un quatrième enfant de texte, il passera dans un rang
   implicite, SOUS la photo : ajouter un rang ici. */
@media (min-width: 64em) {
	.fi-about__head--wide:has(> .fi-about__photo) {
		display: grid;
		grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
		grid-template-rows: auto auto 1fr;
		column-gap: clamp(3rem, 6vw, 6rem);
		align-items: start;
	}

	.fi-about__head--wide:has(> .fi-about__photo) > :not(.fi-about__photo) {
		grid-column: 1;
	}

	.fi-about__head--wide > .fi-about__photo {
		grid-column: 2;
		grid-row: 1 / -1;
		align-self: end;
	}

	@supports not selector(:has(*)) {
		.fi-about__photo {
			display: none;
		}
	}
}

/* ── La ligne des dates ──────────────────────────────────────────────
   Figure de la page. Trois colonnes au-delà de 40em — l'année, le
   repère, le fait — et un filet vertical qui passe par tous les repères.

   ⚠️ PAS DE FILET HORIZONTAL ENTRE LES RANGS. Les rangs de /team/ en
   portent un chacun ; ici le seul trait est vertical, et c'est lui qui
   fait la figure. Deux systèmes de filets feraient un tableau.

   ⚠️ LES RANGS SONT ESPACÉS RÉGULIÈREMENT, pas au prorata des années :
   voir [firalis_about_history] dans inc/about.php.

   Sous 40em l'année passe AU-DESSUS du fait : trois colonnes dans 358px
   laissaient au texte 30 signes par ligne. Le filet reste à gauche, les
   repères restent dessus.
   ─────────────────────────────────────────────────────────────────── */

.fi-about__line {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fi-about__step {
	position: relative;
	display: grid;
	grid-template-columns: var(--fi-about-node) minmax(0, 1fr);
	grid-template-areas:
		"node when"
		".    what";
	column-gap: var(--fi-about-gap);
	row-gap: var(--fi-space-2xs);
	align-items: start;
	padding-block-end: clamp(1.75rem, 3vw, 2.5rem);
}

.fi-about__step:last-child {
	padding-block-end: 0;
}

@media (min-width: 40em) {
	.fi-about__step {
		grid-template-columns: var(--fi-about-year) var(--fi-about-node) minmax(0, 1fr);
		grid-template-areas: "when node what";
	}
}

/* Le filet. Un segment par rang, bord à bord : le rang n'a pas de marge,
   seulement une réserve basse, donc les segments se touchent. Il commence
   au MILIEU du premier repère et s'arrête au milieu du dernier — une ligne
   qui déborde au-dessus de 2008 ou sous « Today » dirait qu'elle continue. */
.fi-about__step::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: calc(var(--fi-about-node) / 2);
	inline-size: 1px;
	background: var(--fi-color-line-strong);
}

@media (min-width: 40em) {
	.fi-about__step::before {
		inset-inline-start: calc(var(--fi-about-year) + var(--fi-about-gap) + var(--fi-about-node) / 2);
	}
}

.fi-about__step:first-child::before {
	inset-block-start: calc(var(--fi-about-yearsize) / 2);
}

.fi-about__step:last-child::before {
	inset-block-end: auto;
	block-size: calc(var(--fi-about-yearsize) / 2);
}

/* Un seul rang : pas de ligne du tout. Un trait d'une demi-hauteur sous un
   repère isolé ne relie rien. */
.fi-about__step:only-child::before {
	content: none;
}

.fi-about__when {
	grid-area: when;
	margin: 0;
	font-family: var(--fi-font-display);
	font-size: var(--fi-about-yearsize);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.03em;
	/* Chiffres à chasse fixe : 2012, 2014, 2015 et 2018 se lisent en
	   colonne, et le 1 ne rentre pas sous les autres. */
	font-variant-numeric: tabular-nums;
	color: var(--fi-color-ink);
}

/* Le second fait d'une même année (2026 depuis le 08/10) : l'année sort de
   l'écran mais reste lue — masquage accessible, pas « display: none ». Le
   repère garde sa place sur le filet : c'est lui qui dit « un autre fait ». */
.fi-about__step--same .fi-about__when {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Sous 40em l'année a sa propre ligne, à côté du repère : vidée, elle
   laisserait le repère seul au-dessus d'un blanc. Le fait remonte donc à
   côté du repère, sur une seule ligne de grille. */
@media (max-width: 39.99em) {
	.fi-about__step--same {
		grid-template-areas: "node what";
	}
}

/* Le repère. Il masque le filet sur sa hauteur par l'aplat de la bande :
   la vague se POSE sur la ligne au lieu d'être traversée par elle. */
.fi-about__node {
	grid-area: node;
	position: relative;
	display: grid;
	place-items: center;
	block-size: var(--fi-about-yearsize);
	background: var(--fi-color-surface);
}

.fi-about__mark {
	display: block;
	block-size: 100%;
	inline-size: auto;
	aspect-ratio: 265 / 432;
}

/* Le cran des rangs sans société : il TRAVERSE le filet, sans aplat — ce
   n'est pas un logotype posé sur la ligne, c'est une graduation. Le filet
   décoratif du site, celui des surtitres. */
.fi-about__node--tick {
	background: none;
}

.fi-about__node--tick::after {
	content: "";
	inline-size: 0.75rem;
	block-size: 2px;
	background: var(--fi-color-wash);
}

/* Le fait. Texte courant au PAS 0 à toutes les largeurs, et c'est mesuré :
   au pas 1 il tombait à 19,2px à 1440, entre le 16px du corps et le 17,92px
   du chapô — trois tailles en 3,2px, le défaut A2 de docs/54. La paire
   corps / chapô est celle de tout le site ; la ligne n'avait pas à lui
   ajouter un troisième rang. Ce qui distingue le fait, c'est la couleur
   (texte, pas « muted ») et la colonne, pas la taille.
   La marge haute aligne la première ligne sur le corps de l'année — mesurée
   à la capture : les deux polices n'ont pas la même hauteur de capitale. */
.fi-about__what {
	grid-area: what;
	margin: 0;
	max-inline-size: 58ch;
	font-size: var(--fi-size-step-0);
	line-height: 1.6;
	color: var(--fi-color-text);
	text-wrap: pretty;
}

@media (min-width: 40em) {
	.fi-about__what {
		padding-block-start: 0.35em;
	}
}

.fi-about__step--now .fi-about__what {
	color: var(--fi-color-ink);
}

/* Le nom d'une société, lié à sa fiche. Encre pour le texte, couleur de la
   marque pour le filet (voir firalis_about_company_link). Pas de transition :
   l'épaisseur d'un soulignement ne s'anime pas proprement d'un navigateur à
   l'autre, et un saut net de 2 à 3px se lit mieux qu'un fondu raté. */
.fi-about__co {
	color: inherit;
	text-decoration-line: underline;
	text-decoration-color: var(--fi-c, var(--fi-color-line-strong));
	text-decoration-thickness: 2px;
	text-underline-offset: 0.22em;
	/* ⚠️ 14/09 — Cible tactile : 20px de haut mesurés, 44 après. Même parade que
	   les titres de la liste d'actualités — le remplissage agrandit la cible, la
	   marge négative le reprend, et le lien reste « inline » : ni la ligne ni le
	   soulignement ne bougent. */
	padding-block: 0.75rem;
	margin-block: -0.75rem;
}

.fi-about__co:hover {
	color: var(--fi-color-ink);
	text-decoration-thickness: 3px;
}

.fi-about__co:focus-visible,
.fi-about .fi-lede a:focus-visible {
	outline: 2px solid var(--fi-color-ink);
	outline-offset: 2px;
	border-radius: var(--fi-radius-s);
}

/* ── Les trois pays ──────────────────────────────────────────────────
   Trois colonnes à filets au-delà de 64em. Entre 40 et 64em, trois
   rangs, chacun sur une ligne : le nom à gauche, ce qu'on en dit à
   droite — trois colonnes de 240px à 768 laissaient 25 signes par ligne.
   Sous 40em, tout s'empile.
   ─────────────────────────────────────────────────────────────────── */

.fi-about__placefig > * {
	margin-block: 0;
}

.fi-about__tri {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	border-block: 1px solid var(--fi-color-line-strong);
}

.fi-about__country {
	display: grid;
	gap: var(--fi-space-2xs) var(--fi-space-l);
	padding-block: var(--fi-space-m);
	border-block-start: 1px solid var(--fi-color-line);
}

.fi-about__country:first-child {
	border-block-start: 0;
}

.fi-about__cname > *,
.fi-about__cbody > * {
	margin-block: 0;
}

@media (min-width: 40em) and (max-width: 63.99em) {
	.fi-about__country {
		grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
		align-items: baseline;
	}
}

@media (min-width: 64em) {
	.fi-about__tri {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.fi-about__country {
		align-content: start;
		gap: var(--fi-space-s);
		padding-block: var(--fi-space-l);
		padding-inline: var(--fi-space-l) var(--fi-space-m);
		border-block-start: 0;
		border-inline-start: 1px solid var(--fi-color-line);
	}

	.fi-about__country:first-child {
		padding-inline-start: 0;
		border-inline-start: 0;
	}
}

/* Le pays : le rang du micro-libellé du site, 0.6875rem en mono capitales —
   la valeur de .fi-eyebrow, pas une voisine à 0,2px d'écart. */
.fi-about__land,
.fi-about__herelab {
	font-family: var(--fi-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--fi-color-muted);
}

/* Posée APRÈS la remise à zéro de « .fi-about__cname > * », à spécificité
   égale : l'ordre suffit, sans !important. */
.fi-about__land {
	margin-block-end: var(--fi-space-2xs);
}

/* La ville, au rang des années de la ligne : même police, même pas. Deux
   figures, un seul rang de « grand nom » sur la page (grille A2). */
.fi-about__town {
	font-family: var(--fi-font-display);
	font-size: var(--fi-about-yearsize);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--fi-color-ink);
}

.fi-about__note {
	max-inline-size: 40ch;
	font-size: var(--fi-size-step-0);
	line-height: 1.6;
	color: var(--fi-color-text);
	text-wrap: pretty;
}

.fi-about__herelab {
	margin-block: var(--fi-space-s) var(--fi-space-2xs);
}

/* Les sociétés déclarées ici. ⚠️ Le <li> N'EST PAS un conteneur flexible, et
   ce n'est pas un oubli : un enfant de flex est « blockifié », le lien du nom
   aurait perdu son « display: inline » et serait devenu une cible tactile
   de 24px au lieu d'un lien de texte. La vague reste en ligne, calée sur la
   ligne de base. */
.fi-about__here {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fi-space-2xs) var(--fi-space-m);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fi-about__here > li {
	font-size: var(--fi-size-step-0);
	font-weight: 500;
	line-height: 1.6;
	color: var(--fi-color-ink);
}

.fi-about__heremark {
	display: inline-block;
	block-size: 1.15em;
	inline-size: auto;
	aspect-ratio: 265 / 432;
	margin-inline-end: 0.4em;
	vertical-align: -0.22em;
}

/* La société déclarée AILLEURS qu'à Huningue, sous la figure. Une phrase et
   non une quatrième colonne : ce n'est pas un pays de la frontière. */
.fi-about__elsewhere {
	margin-block-start: var(--fi-space-s);
	max-inline-size: 62ch;
	font-size: var(--fi-size-step-0);
	line-height: 1.6;
	color: var(--fi-color-muted);
}

/* ── L'aiguillage ────────────────────────────────────────────────────
   Trois rangs, et le rang entier est le lien : la cible tactile fait la
   hauteur du rang, bien au-dessus de 44px à toutes les largeurs.
   ─────────────────────────────────────────────────────────────────── */

.fi-about__routes {
	margin: 0;
	padding: 0;
	list-style: none;
	border-block-start: 1px solid var(--fi-color-line-strong);
}

.fi-about__routes > li {
	border-block-end: 1px solid var(--fi-color-line);
}

.fi-about__route {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"lab  arrow"
		"desc arrow";
	gap: 0.25rem var(--fi-space-m);
	align-items: center;
	padding-block: var(--fi-space-s);
	color: var(--fi-color-ink);
	text-decoration: none;
}

@media (min-width: 48em) {
	.fi-about__route {
		grid-template-columns: minmax(0, 10rem) minmax(0, 1fr) auto;
		grid-template-areas: "lab desc arrow";
		padding-block: var(--fi-space-m);
	}
}

.fi-about__rlab {
	grid-area: lab;
	font-family: var(--fi-font-display);
	font-size: var(--fi-size-step-2);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.02em;
	/* Le soulignement de survol, préparé à l'état de repos pour ne pas faire
	   bouger la ligne quand il apparaît. */
	text-decoration-line: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

.fi-about__rdesc {
	grid-area: desc;
	max-inline-size: 48ch;
	font-size: var(--fi-size-step-0);
	line-height: 1.5;
	color: var(--fi-color-muted);
	text-wrap: pretty;
}

.fi-about__route .fi-arrow {
	grid-area: arrow;
	inline-size: 1.1rem;
	block-size: 1.1rem;
	color: var(--fi-color-muted);
	transition: translate 0.25s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.25s ease;
}

.fi-about__route:hover .fi-about__rlab,
.fi-about__route:focus-visible .fi-about__rlab {
	text-decoration-color: var(--fi-color-wash);
}

/* « translate » et non une propriété logique : il n'en existe pas pour les
   transformations. Le site est écrit de gauche à droite, la flèche avance
   vers la droite. */
.fi-about__route:hover .fi-arrow,
.fi-about__route:focus-visible .fi-arrow {
	translate: 0.25rem 0;
	color: var(--fi-color-ink);
}

.fi-about__route:focus-visible {
	outline: 2px solid var(--fi-color-ink);
	outline-offset: 2px;
	border-radius: var(--fi-radius-s);
}

@media (prefers-reduced-motion: reduce) {
	.fi-about__route .fi-arrow {
		transition: none;
	}

	.fi-about__route:hover .fi-arrow,
	.fi-about__route:focus-visible .fi-arrow {
		translate: none;
	}
}