/* ═══════════════════════════════════════════════════════════════════
   FICHE DE SOCIÉTÉ — LODIAG · la porte

   Chargée après css/company.css, et UNIQUEMENT sur /our-companies/lodiag/
   (voir inc/company.php).

   ⚠️ 27/10/2026 — LA FICHE EST UNE « PORTE » (docs/79-fiches-porte.md) :
   un écran, une bande, le bouton vers lodiag.com visible sans défiler.
   La feuille est ÉLAGUÉE : elle ne porte plus que le hero. Les règles du
   sélecteur, de la grille pleine, du seuil, de la chaîne de garde et du
   rapport sont parties avec leurs composants (inc/company-lodiag.php).

   ⚠️ AUCUNE VALEUR CHROMATIQUE, AUCUN PIXEL EN DUR pour ce que couvre un
   jeton. La teinte vient de la règle en ligne imprimée par inc/company.php :
   --fi-c (#005751 — logotype, filets et DESSINS : les puits de la plaque),
   --fi-c-ink (la seule variante admise pour du TEXTE de marque, 5.29:1 sur
   la surface) et --fi-c-light (second ton, celui du fond « wash » et des
   filets clairs). Les 1px qui restent sont des filets, comme partout.

   ── La composition : « la plaque » ──────────────────────────────────

   Ce qui la distingue des quatre autres portes, et d'une page d'accueil de
   marque : à droite, un OBJET — la grille de couverture condensée en plaque
   à puits, coin coupé comme une microplaque de laboratoire —, et à gauche
   une colonne qui répond dans l'ordre à qui (logo et ligne d'identité en
   bloc d'en-tête de lettre), quoi (titre du client, chapô de deux
   phrases), pourquoi y aller (trois relevés publiés par Lodiag), puis le
   bouton, qui porte le domaine. La barre des cinq sociétés ferme la bande.

     ≥ 62em   copie | plaque, la plaque centrée sur la hauteur de la copie
     48–62em  la plaque monte à côté du titre et du chapô ; relevés et
              boutons passent dessous, pleine largeur
     < 48em   une colonne ; la plaque APRÈS le bouton, qui reste dans le
              premier écran du téléphone (mesuré à 390×844)

   ── Un écran ───────────────────────────────────────────────────────
   Hauteur minimale de la bande : celle du hero d'accueil (style.css), soit
   l'écran moins l'en-tête mesuré par ui.js. Les écarts verticaux et le
   corps du titre suivent la HAUTEUR de la fenêtre (svh) autant que sa
   largeur : c'est à 1280×800 et 1024×768 que la porte se joue, pas à 1440.
   ═══════════════════════════════════════════════════════════════════ */

.fi-cop--gate {
	/* L'écart vertical de la porte : 15 px à 768 de haut, 18 px à 900, plafonné
	   à 28 px sur les écrans hauts, où le surplus va plutôt au centrage. */
	--fi-lod-gap: clamp(0.875rem, 2svh, 1.75rem);
	--fi-lod-rule: color-mix(in srgb, var(--fi-c-light) 55%, var(--fi-color-line));
}

/* ── La bande ──────────────────────────────────────────────────────── */

.fi-cop__gate {
	display: flex;
	flex-direction: column;
	min-block-size: calc(100svh - var(--fi-header-h));
	padding-block: clamp(1rem, 3svh, 2.75rem) 0;
}

/* En colonne flexible, la marge automatique que WordPress pose sur chaque
   enfant d'une mise en page « constrained » les réduirait à leur contenu :
   « inline-size: 100% » leur rend la ligne, le plafond de 1240 px les recentre
   (même parade que .fi-heroX, style.css). Le fond « wash » est absolu et
   reste hors de ce jeu. */
.fi-cop__gate > :not(.fi-wash) {
	inline-size: 100%;
}

/* La porte se centre dans la hauteur libre ; la barre des sociétés est
   poussée au pied. Quand le contenu dépasse l'écran (téléphone), les marges
   automatiques retombent à zéro et rien ne bouge. */
.fi-cop__gate > .fi-lodgate {
	margin-block: auto;
	padding-block-end: clamp(1rem, 3svh, 2.75rem);
}

.fi-cop__gate > .fi-cop__switch {
	margin-block-start: 0;
}

/* ── La grille de la porte ────────────────────────────────────────── */

.fi-lodgate {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: calc(var(--fi-lod-gap) * 1.25);
	align-items: center;
}

/* « is-layout-flow » (WordPress) pose une marge haute sur tout enfant qui
   n'est pas le premier : 21 px au-dessus de la plaque, qui la décalaient sous
   le titre en tablette et faussaient son centrage au bureau. */
.fi-lodgate > * {
	margin-block: 0;
}

.fi-lodgate__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--fi-lod-gap);
}

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

@media (min-width: 62em) {
	.fi-lodgate {
		grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
		column-gap: clamp(2.5rem, 5vw, 5rem);
	}
}

/* Entre 48 et 62em la copie s'ouvre (display: contents) et ses enfants se
   rangent directement dans la grille : le logo et son bloc d'identité sur
   toute la largeur (dans la demi-colonne, le bloc passait SOUS le logo — 60 px
   de plus, et la porte allemande dépassait 1024 de haut) ; la plaque à droite
   du titre, du chapô et des relevés ; les boutons dessous, côte à côte.

   ⚠️ La rangée vide (« . plate », 1fr) n'est pas décorative : la plaque est
   souvent plus haute que la colonne de gauche, et sans elle la grille
   répartissait la différence ENTRE le logo, le titre et le chapô — mesuré à
   768 en allemand, 180 px de vide sous le titre. */
@media (min-width: 48em) and (max-width: 61.99em) {
	.fi-lodgate {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: auto auto auto auto 1fr auto;
		grid-template-areas:
			"who   who"
			"title plate"
			"lede  plate"
			"figs  plate"
			".     plate"
			"cta   cta";
		column-gap: var(--fi-space-l);
		/* Un cran plus serré : en allemand, la plaque et la barre des sociétés
		   (deux rangs à 768) ne laissaient que 4 px sous l'écran. */
		row-gap: calc(var(--fi-lod-gap) * 0.8);
		align-items: start;
	}

	.fi-lodgate__copy {
		display: contents;
	}

	/* Le chapô au corps de base : à 17.5 px dans la demi-colonne il tombait à
	   35 signes par ligne (audit, 768). La plaque ne peut pas céder de largeur —
	   sa légende allemande passait alors sur trois lignes. */
	.fi-lodgate__lede.fi-lede {
		font-size: var(--fi-size-step-0);
	}

	.fi-lodgate__who { grid-area: who; }
	.fi-lodgate__h1 { grid-area: title; }
	.fi-lodgate__lede { grid-area: lede; }
	.fi-lodgate__figs { grid-area: figs; }
	.fi-lodgate__go { grid-area: cta; }

	.fi-lodgate > .fi-lodplate {
		grid-area: plate;
	}
}

/* ── Qui : le logo et la ligne d'identité, en bloc d'en-tête ─────────── */

.fi-lodgate__who {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fi-space-xs) var(--fi-space-m);
}

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

/* Plus petit que sur les autres pages du socle (88 px à 1440) : la porte a un
   écran pour tout dire, et le logo n'est plus seul à nommer la société — la
   barre du pied le redit. */
.fi-lodgate .fi-cop__logo img {
	block-size: min(clamp(2.75rem, 2rem + 2vw, 3.75rem), 7svh);
}

/* Le bloc d'identité : le rang de micro-libellé du site (mono, capitales,
   11 px — celui de .fi-eyebrow), une valeur par ligne, séparé du logo par un
   filet VERTICAL comme le bloc d'adresse d'un papier à lettres. En atténué et
   non en encre : c'est un registre, pas un titre. Sous le logo quand la place
   manque à côté (téléphone, tablette en allemand). */
.fi-lodgate__id {
	flex: 0 1 auto;
	margin: 0;
	padding: 0.1rem 0 0.1rem var(--fi-space-m);
	border-inline-start: 1px solid var(--fi-lod-rule);
	list-style: none;
	font-family: var(--fi-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	line-height: 1.7;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fi-color-muted);
}

/* ── Quoi : le titre et le chapô ──────────────────────────────────── */

/* Le corps du socle (4.4rem au plus) est gardé en largeur ; il est borné en
   HAUTEUR pour les écrans bas — 6.6 % de la fenêtre plus 8 px, soit 59 px à
   768 de haut (mesuré : à 1366×768, en allemand, le titre à 65 px faisait
   dépasser la porte de 11 px). Le décalage de marge du socle vaut zéro ici : le titre est dans un
   groupe ordinaire, pas enfant direct de la bande contrainte. */
.fi-lodgate .fi-lodgate__h1 {
	margin: 0 !important;
	font-size: min(clamp(2.25rem, 0.9rem + 3.7vw, 4.25rem), 6.6svh + 0.5rem);
}

.fi-lodgate__lede.fi-lede {
	max-inline-size: 54ch;
	line-height: 1.6;
}

/* ── Pourquoi y aller : trois relevés publiés par la société ─────────── */

.fi-lodgate__figs {
	inline-size: 100%;
}

.fi-lodgate__figlab {
	margin-block: 0 var(--fi-space-xs);
	font-family: var(--fi-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fi-c-ink);
}

.fi-lodgate__figlist {
	display: grid;
	gap: 0;
	max-inline-size: 40rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Sous 62em, un relevé par rang : le chiffre dans sa colonne, la phrase à
   côté, un filet entre les rangs. En trois colonnes à 390, la première phrase
   tombait sur QUATRE lignes de deux mots. */
.fi-lodgate__fig {
	display: grid;
	grid-template-columns: 5.25rem minmax(0, 1fr);
	align-items: baseline;
	column-gap: var(--fi-space-s);
	padding-block: 0.55rem;
	border-block-start: 1px solid var(--fi-lod-rule);
}

.fi-lodgate__n {
	font-family: var(--fi-font-display);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--fi-c-ink);
}

.fi-lodgate__t {
	font-size: 0.9375rem;
	line-height: 1.4;
	color: var(--fi-color-muted);
	text-wrap: pretty;
}

/* Au bureau, les trois côte à côte, chacun coiffé d'un filet court du second
   ton — l'amorce des surtitres du site, posée à plat. Le chiffre est en encre
   de marque, la seule variante admise pour du texte : 5.29:1 sur la surface. */
@media (min-width: 62em) {
	.fi-lodgate__figlist {
		grid-template-columns: 1.25fr 1fr 1fr;
		column-gap: var(--fi-space-m);
	}

	.fi-lodgate__fig {
		grid-template-columns: minmax(0, 1fr);
		align-content: start;
		row-gap: 0.3rem;
		padding-block: var(--fi-space-xs) 0;
		border-block-start-width: 2px;
	}

	.fi-lodgate__n {
		font-size: min(clamp(1.6rem, 1.15rem + 1.2vw, 2.25rem), 4.4svh);
		line-height: 1;
	}
}

/* ── La photo, à côté des relevés — 27/10/2026 ────────────────────────
   La seule place où la photo de Lodiag dit quelque chose : à côté des trois
   chiffres du criblage d'eau, qu'elle montre en train de se faire
   (extraction en phase solide, cartouches PFAS). Voir le docblock de
   [firalis_lod_gate_figures].

   Au bureau ET à partir de 864 px de haut seulement (54em). La paire coûte
   40 px en anglais, 80 en allemand (les phrases passent sur deux lignes à
   côté de la photo) ; mesuré, c'est le seuil qui garde la porte dans un
   écran à 1440×864 en allemand (13 px de marge). En dessous — 1280×800,
   1366×768, 1024×768, tablette, téléphone — la figure n'existe pas et les
   relevés reprennent leur dessin habituel.

   Le coin coupé est celui de la plaque, en plus petit : les deux objets du
   même laboratoire. Traitement photo commun du site (--fi-photo-tone). */
.fi-lodgate__shot {
	display: none;
	margin: 0;
}

@media (min-width: 62em) and (min-height: 54em) {
	.fi-lodgate__figs.has-shot {
		display: grid;
		grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
		column-gap: var(--fi-space-m);
		align-items: stretch;
		max-inline-size: 42rem;
	}

	.fi-lodgate__shot {
		--fi-lod-shotcut: 0.875rem;
		display: block;
		overflow: hidden;
		border-radius: var(--fi-radius-m);
		border-start-start-radius: 0;
		clip-path: polygon(var(--fi-lod-shotcut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--fi-lod-shotcut));
	}

	.fi-lodgate__shot img {
		display: block;
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
		object-position: 46% 62%;
		filter: var(--fi-photo-tone);
	}

	.has-shot .fi-lodgate__figlist {
		grid-template-columns: minmax(0, 1fr);
	}

	.has-shot .fi-lodgate__fig {
		grid-template-columns: 5.25rem minmax(0, 1fr);
		align-items: baseline;
		column-gap: var(--fi-space-s);
		padding-block: 0.45rem;
		border-block-start-width: 1px;
	}

	.has-shot .fi-lodgate__n {
		font-size: 1.5rem;
		line-height: 1.1;
	}
}

/* ── Le bouton : vers lodiag.com, le domaine DANS le bouton ────────────
   Le bouton commun des portes, [firalis_co_go] (socle, css/company.css,
   .fi-cop__go*), monté le 27/10/2026 depuis la copie que portait cette
   feuille. Restent ici les deux réglages propres à cette porte :

   — un remplissage vertical d'un cran plus serré (0.8rem au lieu des
     0.85rem du socle), tel que la porte l'avait réglé ;
   — au téléphone, l'enveloppe prend la largeur de la colonne, qui est une
     pile flexible alignée au début (.fi-lodgate__copy) : sans cela elle se
     réduirait à son contenu et le bouton ne pourrait pas s'étirer. */
.fi-lodgate .fi-cop__godoor .wp-block-button__link {
	padding-block: 0.8rem;
}

@media (max-width: 30em) {
	.fi-lodgate__go {
		inline-size: 100%;
	}
}

/* ═══════════════════════════════════════════════════════════════════
   LA PLAQUE — la grille de couverture, condensée. FIGURE DE SIGNATURE.

   Sept familles × sept matrices, un puits par case. Quatre FORMES pour
   quatre états — plein, anneau, demi, vide — et non quatre teintes : la
   plaque se lit sans la couleur (WCAG 1.4.1), et c'est ce qu'elle a à dire
   qui saute aux yeux — dense sur l'eau, clairsemée sur le sol, le sédiment
   et le biote. Les puits sont des DESSINS : --fi-c y est permise, comme
   pour le logotype et la pastille de la barre des sociétés.

   Le coin supérieur coupé est celui d'une microplaque (le repère A1 de toute
   plaque de laboratoire). Un détail, mais c'est lui qui fait d'un tableau
   un objet du métier.
   ═══════════════════════════════════════════════════════════════════ */

.fi-lodplate {
	--fi-lod-cut: 1.375rem;
	--fi-lod-cell: clamp(1.75rem, 1.1rem + 1.6vw, 2.5rem);
	--fi-lod-well: calc(var(--fi-lod-cell) * 0.5);
	position: relative;
	justify-self: stretch;
	padding: clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
	border: 1px solid var(--fi-color-line-strong);
	border-radius: var(--fi-radius-l);
	border-start-start-radius: 0;
	/* Presque opaque : le fond « wash » se devine derrière la plaque sans
	   jamais passer sous un libellé. */
	background: color-mix(in srgb, var(--fi-color-surface) 92%, transparent);
	clip-path: polygon(var(--fi-lod-cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--fi-lod-cut));
}

/* Le filet du coin coupé : la découpe enlève la bordure, on la redessine. */
.fi-lodplate::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: calc(var(--fi-lod-cut) * 1.4142);
	block-size: 1px;
	background: var(--fi-color-line-strong);
	transform-origin: 0 0;
	transform: translateY(calc(var(--fi-lod-cut) - 0.5px)) rotate(-45deg);
}

/* Au bureau le puits suit la largeur, plafonné par la HAUTEUR : à 1366×768
   (largeur de bureau, hauteur de 1024×768) la plaque devenait la plus haute
   des deux colonnes et la porte dépassait l'écran de 11 px (21 en allemand). */
@media (min-width: 62em) {
	.fi-lodplate {
		--fi-lod-cell: min(clamp(2rem, 1rem + 1.6vw, 2.6rem), 4.5svh);
	}
}

.fi-lodplate__grid {
	inline-size: 100%;
	margin: 0;
	border-collapse: collapse;
	border: 0;
	table-layout: auto;
}

.fi-lodplate__grid :is(th, td) {
	padding: 0;
	border: 0;
	background: none;
}

/* La légende du tableau : un libellé d'appareil, pas une phrase. Elle dit
   d'abord « EU law » — la plaque ne décrit pas ce que Lodiag sait faire. */
.fi-lodplate__cap {
	caption-side: top;
	padding-block-end: var(--fi-space-xs);
	font-family: var(--fi-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-align: start;
	text-transform: uppercase;
	color: var(--fi-color-muted);
}

/* Les matrices, en têtes verticales : sept colonnes de 40 px n'ont pas la
   place d'un « Drinking water » couché. Lu de bas en haut, aligné au pied,
   comme sur toute grille de résultats. */
.fi-lodplate__col {
	inline-size: var(--fi-lod-cell);
	padding-block-end: var(--fi-space-xs) !important;
	vertical-align: bottom;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.1;
	color: var(--fi-color-muted);
}

.fi-lodplate__col > span {
	display: inline-block;
	/* Au plus 7.5em de haut : le plus long nom anglais tient (« Drinking
	   water »), un long composé allemand passe sur deux lignes verticales à sa
	   césure douce (« Oberflächen-wasser », posée dans la traduction) au lieu
	   d'allonger toute la tête de la plaque — 131 px mesurés en allemand,
	   assez pour faire dépasser 1280×800. Jamais de coupure dans un mot :
	   « overflow-wrap » du thème coupait « Grundwasse/r » à 6em. */
	max-inline-size: 7.5em;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	overflow-wrap: normal;
	word-break: normal;
	-webkit-hyphens: manual;
	hyphens: manual;
}

.fi-lodplate__row {
	padding-block: 0.2rem !important;
	padding-inline-end: var(--fi-space-s) !important;
	/* Pas de césure automatique : sur /de/ elle coupait « metaboli-tes » et
	   « Phar-maceuti-cal ». Un long composé allemand porte sa césure douce
	   dans la traduction. */
	-webkit-hyphens: manual;
	hyphens: manual;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.25;
	text-align: start;
	color: var(--fi-color-ink);
}

/* Un filet très pâle entre les rangs : il guide l'œil du nom de la famille
   à ses puits, sans dessiner de cases. */
.fi-lodplate__grid tbody tr + tr > * {
	border-block-start: 1px solid var(--fi-color-line);
}

.fi-lodplate__c {
	/* Bloc conteneur du libellé masqué de la case : sans lui, l'élément absolu
	   de .screen-reader-text se cale hors du tableau. */
	position: relative;
	block-size: var(--fi-lod-cell);
	inline-size: var(--fi-lod-cell);
	text-align: center;
	vertical-align: middle;
}

/* De 62 à 80em la plaque n'avait que 357 px utiles à 1024 : les noms de
   famille passaient sur deux lignes, chaque rang prenait 42 px et la plaque
   devenait la plus haute des deux colonnes — la porte dépassait 768 de haut.
   On lui rend de la largeur (gouttière et proportions) plutôt que de réduire
   le texte : à 1024, 400 px utiles, un nom par ligne. */
@media (min-width: 62em) and (max-width: 79.99em) {
	.fi-lodgate {
		grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
		column-gap: var(--fi-space-l);
	}

	.fi-lodplate__row {
		font-size: 0.8125rem;
	}

	.fi-lodplate__col {
		font-size: 0.75rem;
	}
}

/* En tablette la plaque partage la largeur : des puits plus serrés laissent
   leur place aux noms de famille, qui tiennent alors en deux lignes. */
@media (min-width: 48em) and (max-width: 61.99em) {
	.fi-lodplate {
		--fi-lod-cell: 1.75rem;
		padding: var(--fi-space-s);
	}

	.fi-lodplate__row {
		font-size: 0.8125rem;
	}
}

/* Au téléphone la plaque vient APRÈS le bouton : elle se resserre pour que
   la porte reste courte — puits de 26 px, noms et têtes un cran plus petits. */
@media (max-width: 47.99em) {
	.fi-lodplate {
		--fi-lod-cell: 1.625rem;
		padding: var(--fi-space-s);
	}

	.fi-lodplate__row {
		font-size: 0.8125rem;
		line-height: 1.2;
	}

	.fi-lodplate__col {
		font-size: 0.75rem;
	}
}

/* ── Les puits ─────────────────────────────────────────────────────── */

.fi-lodplate__well {
	display: inline-block;
	inline-size: var(--fi-lod-well);
	block-size: var(--fi-lod-well);
	border-radius: 50%;
	vertical-align: middle;
}

/* Valeur contraignante : le puits plein. */
.fi-lodplate__c--limit .fi-lodplate__well,
.fi-lodplate__key--limit .fi-lodplate__well {
	background: var(--fi-c);
}

/* Liste de vigilance : l'anneau — on cherche, sans seuil encore fixé. */
.fi-lodplate__c--watch .fi-lodplate__well,
.fi-lodplate__key--watch .fi-lodplate__well {
	background: color-mix(in srgb, var(--fi-c-light) 22%, transparent);
	box-shadow: inset 0 0 0 2px var(--fi-c);
}

/* Option laissée aux États membres : le demi-puits — le texte existe, la
   valeur ou la matrice se décide pays par pays. */
.fi-lodplate__c--option .fi-lodplate__well,
.fi-lodplate__key--option .fi-lodplate__well {
	background: linear-gradient(90deg, var(--fi-c) 50%, transparent 50%);
	box-shadow: inset 0 0 0 1.5px var(--fi-c);
}

/* Aucun texte de l'Union nommé ici : le puits vide. Pas un « aucune » — la
   légende le dit, et la case s'annonce avec ce mot-là. */
.fi-lodplate__c--none .fi-lodplate__well,
.fi-lodplate__key--none .fi-lodplate__well {
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fi-color-muted) 45%, var(--fi-color-line));
}

/* ── Légende et source ─────────────────────────────────────────────── */

.fi-lodplate__keys {
	display: grid;
	/* Deux colonnes, chacune à sa largeur — mais compressibles : en allemand à
	   768, « Beobachtungsliste » sortait de la plaque. */
	grid-template-columns: repeat(2, minmax(0, max-content));
	gap: var(--fi-space-2xs) var(--fi-space-m);
	margin: var(--fi-space-s) 0 0;
	padding: var(--fi-space-s) 0 0;
	border-block-start: 1px solid var(--fi-color-line);
	list-style: none;
}

.fi-lodplate__key {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	line-height: 1.3;
	color: var(--fi-color-text);
}

.fi-lodplate__key .fi-lodplate__well {
	--fi-lod-well: 0.875rem;
	flex: none;
}

.fi-lod__src {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--fi-space-2xs);
	margin-block: var(--fi-space-xs) 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--fi-color-muted);
}

.fi-lod__srclab {
	flex: 0 0 auto;
	font-family: var(--fi-font-mono);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fi-c-ink);
}

/* ── La lecture de la plaque, à l'ouverture ────────────────────────────
   Un seul mouvement sur la page, et il a un sens : la plaque se lit en
   diagonale, puits après puits, comme un passeur d'échantillons. 45 ms par
   rang de diagonale (--i, posé par le serveur), 1,3 s en tout. Il ne se
   rejoue pas, et il n'existe pas en mouvement réduit. */
@media (prefers-reduced-motion: no-preference) {
	.fi-lodplate__c .fi-lodplate__well {
		animation: fi-lod-well 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
		animation-delay: calc(var(--i, 0) * 45ms + 250ms);
	}
}

@keyframes fi-lod-well {
	from {
		opacity: 0;
		transform: scale(0.35);
	}
}