/* ═══════════════════════════════════════════════════════════════════
   BIOCELLVIA — la feuille de la PORTE (27/10/2026, docs/79-fiches-porte.md).

   Chargée par-dessus css/company.css, et seulement sur
   /our-companies/biocellvia/ (voir inc/company.php). La fiche tient en un
   écran, une seule bande : cette feuille ne porte que le hero. Les règles des
   bandes retirées (lame à bascule, applications, écart, chaîne, chiffre
   unique, photographie) sont supprimées avec elles ; git les garde.

   ⚠️ Aucune valeur hexadécimale ici. La teinte arrive par la règle en ligne
   qu'imprime inc/company.php : --fi-c (le magenta d'éosine, réservé au
   logotype, aux filets et au dessin), --fi-c-ink (la seule variante autorisée
   pour du texte) et --fi-c-light (le second ton, qui teinte le fond « wash »).

   Le magenta d'éosine est le colorant rose de toute lame H&E (docs/10,
   arbitrage du 24/08). Dans la figure il ne sert qu'à UNE chose — la couleur
   du tissu. Le masque, lui, prend l'encre : c'est la machine qui parle.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   LA BANDE — un écran

   Hauteur : la règle du hero d'accueil (style.css), « svh » pour ne pas
   compter la barre d'adresse rétractée d'un téléphone. C'est un MINIMUM : un
   écran très haut ouvre de l'air autour du hero, un écran bas laisse le
   contenu gagner. La barre des cinq sociétés est poussée au pied.

   Les réserves verticales sont en « svh » et non en « vw » : la contrainte de
   la porte est la HAUTEUR de l'écran. À 1280 × 800 une réserve indexée sur la
   largeur garderait l'aisance d'un écran de 900 px de haut et pousserait la
   barre sous le pli.
   ═══════════════════════════════════════════════════════════════════ */

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

/* En colonne flexible, un enfant qui porte « margin-inline: auto » — ce que la
   mise en page « constrained » de WordPress pose sur tous ses enfants directs —
   se réduit à son contenu. La largeur de ligne lui est rendue ; le max-width de
   WordPress la replafonne à 1240 px. Même parade que .fi-heroX (style.css). */
.fi-cop__gate > *:not(.fi-wash) {
	inline-size: 100%;
}

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

/* Le hero : texte, puis figure. Il prend la hauteur que la barre laisse, et se
   centre dedans. */
.fi-bcg {
	flex: 1 0 auto;
	display: grid;
	align-items: center;
	align-content: center;
	gap: var(--fi-space-l) clamp(2rem, 5vw, 5rem);
	padding-block-end: clamp(1.25rem, 3svh, 2.5rem);
}

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

/* TABLETTE (40em → 56em) : le titre et le chapô sur toute la largeur, puis la
   coupe à gauche et, à sa droite, les repères et le bouton. Empilée, la porte
   faisait 1 300 px de haut à 768 × 1024 — la figure pleine largeur en
   prenait 540 à elle seule. `display: contents` rend les enfants de la
   colonne de texte à la grille sans les retirer de l'arbre d'accessibilité,
   et l'ORDRE DU DOCUMENT ne change pas : qui, quoi, pourquoi, bouton, figure.
   La figure ne porte aucune commande, l'ordre de tabulation reste celui
   qu'on voit. */
@media (min-width: 40em) and (max-width: 55.999em) {
	.fi-bcg {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
		grid-template-rows: repeat(4, auto) 1fr;
		grid-template-areas:
			"logo  logo"
			"title title"
			"lede  lede"
			"fig   facts"
			"fig   go";
		row-gap: 0;
		column-gap: var(--fi-space-l);
		align-items: start;
	}

	.fi-bcg__text {
		display: contents;
	}

	.fi-bcg .fi-cop__logo { grid-area: logo; }
	.fi-bcg .fi-cop__h1 { grid-area: title; }
	.fi-bcg .fi-lede { grid-area: lede; max-inline-size: 40ch; }
	.fi-bcg__facts { grid-area: facts; }
	.fi-bcg__go { grid-area: go; }
	.fi-bcg__fig { grid-area: fig; }

	/* Une colonne de repères, quatre rangs : la colonne fait moins de 300 px. */
	.fi-bcg .fi-bcg__facts {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* BUREAU (56em, le seuil de la grille d'ouverture du socle) : deux colonnes
   ÉGALES. Une figure plus large faisait passer le titre sur trois lignes à
   1440 et la barre des sociétés sous le pli ; à parts égales, « From tissue
   images to / measurable biology » tient en deux, et la figure garde la
   moitié du hero — le visuel le plus fort des cinq fiches. */
@media (min-width: 56em) {
	.fi-bcg {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

/* ── Qui : le logo, plus bas que sur une fiche longue ────────────── */

.fi-cop__gate .fi-cop__logo {
	margin-block: 0 clamp(0.9rem, 3svh, 2rem);
}

.fi-cop__gate .fi-cop__logo img {
	block-size: clamp(2.75rem, 1.6rem + 2.6vw, 4rem);
}

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

/* Le titre vit dans une colonne, pas dans la largeur de bande : la parade de
   marge du socle s'y annule d'elle-même (100 % < 1240 px), et la mesure de
   20ch est ramenée à celle de la colonne. Corps réglé pour deux à trois lignes
   à toutes les largeurs du bureau. */
.fi-cop__gate .fi-cop__h1 {
	margin-block: 0 clamp(0.85rem, 2.4svh, 1.5rem);
	max-inline-size: 22ch;
	font-size: clamp(2.3rem, 1.25rem + 2.75vw, 3.85rem);
	line-height: 1.02;
	text-wrap: balance;
}

/* L'accroche du client, composée par lui en GRAS : encre pleine contre le gris
   de .fi-lede — la seule dérogation, reprise de l'ancienne ouverture. Seule
   phrase sous le titre (docs/79 § 6 : deux au plus), elle prend le corps d'un
   sous-titre. */
.fi-cop__gate .fi-lede {
	margin-block: 0 clamp(1rem, 3svh, 2rem);
	max-inline-size: 30ch;
	font-size: clamp(1.125rem, 0.98rem + 0.45vw, 1.35rem);
	line-height: 1.42;
	letter-spacing: -0.01em;
	color: var(--fi-color-ink);
}

/* ── Pourquoi y aller : quatre repères ───────────────────────────── */

/* Deux colonnes à filets — le registre de la famille (.fi-idcard), resserré.
   Les libellés sont ceux du registre et du tableau publiés, en capitales
   chasse-fixe ; les valeurs en encre, au corps du texte courant. */
.fi-bcg__facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--fi-space-m);
	margin-block: 0 clamp(1.1rem, 3.2svh, 2.25rem);
	max-inline-size: 32rem;
}

.fi-bcg__fact {
	padding-block: 0.6rem;
	border-block-start: 1px solid var(--fi-color-line);
}

.fi-bcg__fact dt {
	margin-block-end: 0.2rem;
	font-family: var(--fi-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--fi-color-muted);
}

.fi-bcg__fact dd {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--fi-color-ink);
}

/* ── Le bouton — celui des cinq portes ─────────────────────────────
   Le bouton commun, [firalis_co_go] (socle, css/company.css, .fi-cop__go*),
   monté le 27/10/2026 depuis la copie que portait cette feuille : le même
   que sur les quatre autres fiches, « comme si le site existait ». La
   sous-ligne dit la destination réelle — l'adresse du site, ou le formulaire
   du groupe tant que l'annuaire n'en publie pas — et la flèche suit (↗ ou →).
   Ici, seulement sa place. Pas de phrase sous le bouton, comme sur les trois
   portes à site (phase 2 du 27/10).

   Sous 56em (tablette et téléphone) : le bouton prend la largeur de sa
   colonne, libellé à gauche, flèche au bout. En tablette la colonne fait
   275 px à 768 et un libellé allemand long y passerait sur deux lignes : la
   flèche reste au bout de la barre, contre les deux lignes. */
@media (max-width: 55.999em) {
	.fi-bcg__go .fi-cop__godoor {
		inline-size: 100%;
	}

	.fi-bcg .fi-cop__godoor .wp-block-button__link {
		grid-template-columns: 1fr auto;
	}
}

/* ═══════════════════════════════════════════════════════════════════
   LA COUPE — la lame segmentée, condensée

   Le même champ, une seule fois, coupé en deux : brut à gauche, sous son
   masque à droite. --fi-bcg-cut (posée en ligne par le shortcode, en part du
   champ) place à la fois le rognage du masque, le filet de coupe, l'étiquette
   de droite et le relevé : une seule source pour quatre positions.
   ═══════════════════════════════════════════════════════════════════ */

.fi-bcg__fig {
	/* Deux tons nommés une fois : le fond du tissu et le collagène. Le masque
	   en dérive — son remplissage est le collagène ASSOMBRI, ce qui lui permet
	   d'être opaque sans mentir sur ce qu'il recouvre. */
	--fi-bcg-tissue: color-mix(in srgb, var(--fi-c-light) 24%, var(--fi-color-surface));
	--fi-bcg-collagen: color-mix(in srgb, var(--fi-c) 66%, var(--fi-color-surface));
	--fi-bcg-ease: cubic-bezier(0.65, 0, 0.35, 1);
	min-inline-size: 0;
	margin: 0;
}

.fi-bcg__frame {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--fi-color-line);
	border-radius: var(--fi-radius-m);
	background: var(--fi-bcg-tissue);
	box-shadow:
		0 1px 2px color-mix(in srgb, var(--fi-color-ink) 6%, transparent),
		0 28px 56px -32px color-mix(in srgb, var(--fi-c) 40%, transparent);
}

.fi-bcg__svg {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

/* Le tissu : trois tons du même magenta — le fond, la marbrure du
   parenchyme, les travées de collagène. C'est un dessin, pas du texte. */
.fi-bcg__ground {
	fill: var(--fi-bcg-tissue);
}

.fi-bcg__lobes {
	fill: color-mix(in srgb, var(--fi-c-light) 72%, var(--fi-color-surface));
	opacity: 0.3;
}

.fi-bcg__matrix {
	fill: var(--fi-bcg-collagen);
}

.fi-bcg__lumina {
	fill: var(--fi-color-surface);
	opacity: 0.7;
}

.fi-bcg__fat {
	fill: var(--fi-color-surface);
	stroke: color-mix(in srgb, var(--fi-c) 62%, var(--fi-color-surface));
	stroke-width: 1.6;
}

.fi-bcg__nuclei {
	fill: var(--fi-color-ink);
	opacity: 0.92;
}

/* La règle graphique, tracée deux fois : halo clair dessous, encre dessus. */
.fi-bcg__barhalo {
	fill: none;
	stroke: var(--fi-color-surface);
	stroke-width: 6;
	stroke-linecap: round;
	opacity: 0.85;
}

.fi-bcg__bar {
	fill: none;
	stroke: var(--fi-color-ink);
	stroke-width: 2;
	stroke-linecap: square;
}

/* ── La moitié mesurée ───────────────────────────────────────────── */

/* ── Le balayage : UNE propriété, trois consommateurs ────────────────
   La coupe glisse une fois au chargement, du bord droit au milieu : le
   rognage du masque, le filet et l'étiquette « As measured » la suivent.

   ⚠️ Ils lisent tous --fi-bcg-x, et c'est elle seule qui s'anime. Une
   première version animait `clip-path` sur le masque et `translate` sur le
   filet : deux animations aux mêmes temps, mais l'une calculée par le fil
   principal, l'autre par le compositeur — à mi-course, mesuré à 1440, le
   filet courait 40 px devant le bord du masque. Une propriété enregistrée
   (@property) est interpolée dans la même passe de style pour ses trois
   lecteurs : ils ne peuvent plus se décaler.

   Non héritée : seuls ces trois éléments sont recalculés à chaque image,
   pas les huit cents nœuds du dessin. Sans @property (navigateur ancien),
   la valeur saute à mi-animation : l'état final est le même. */
@property --fi-bcg-x {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 50%;
}

.fi-bcg__seg,
.fi-bcg__cut,
.fi-bcg__tag--seg {
	--fi-bcg-x: var(--fi-bcg-cut);
	animation: fi-bcg-sweep 1.6s var(--fi-bcg-ease) 0.45s both;
}

@keyframes fi-bcg-sweep {
	from {
		--fi-bcg-x: 100%;
	}
}

/* Le second SVG, superposé au premier au pixel (même viewBox, même boîte), et
   rogné à droite de la coupe. Le rognage est posé sur la boîte HTML et non
   dans le dessin : c'est la forme que tous les navigateurs savent rogner. */
.fi-bcg__seg {
	position: absolute;
	inset: 0;
	clip-path: inset(0 0 0 var(--fi-bcg-x));
}

/* Le voile éteint le tissu d'un cran : sans lui, le masque et le collagène se
   disputent le même contraste. */
.fi-bcg__veil {
	fill: var(--fi-color-surface);
	opacity: 0.42;
}

/* Halo d'encre épais sous un remplissage opaque de même géométrie : il ne
   reste que le liseré extérieur de l'UNION des septa, sans couture aux
   croisements. */
.fi-bcg__halo {
	fill: var(--fi-color-ink);
	stroke: var(--fi-color-ink);
	stroke-width: 3.6;
	stroke-linejoin: round;
}

.fi-bcg__mask {
	fill: color-mix(in srgb, var(--fi-color-ink) 15%, var(--fi-bcg-collagen));
}

.fi-bcg__rings {
	fill: none;
	stroke: var(--fi-color-ink);
	stroke-width: 1.6;
	opacity: 0.75;
}

/* Le filet de coupe. Une boîte de la taille du cadre dont seul le bord gauche
   se voit, décalée de la part de coupe : « translate » en pourcentage se
   calcule sur la largeur de la boîte, c'est-à-dire du cadre. Il glisse avec
   le rognage, du bord droit au milieu. */
.fi-bcg__cut {
	position: absolute;
	inset: 0;
	border-inline-start: 2px solid var(--fi-color-ink);
	margin-inline-start: -1px;
	translate: var(--fi-bcg-x) 0;
	pointer-events: none;
}

/* Deux crans d'encre aux extrémités du filet : la coupe se lit comme un
   instrument posé sur la lame, pas comme un trait de séparation. */
.fi-bcg__cut::before,
.fi-bcg__cut::after {
	content: "";
	position: absolute;
	inset-inline-start: calc(-0.3rem - 1px);
	inline-size: 0.6rem;
	block-size: 0.6rem;
	background: var(--fi-color-ink);
	rotate: 45deg;
}

.fi-bcg__cut::before {
	inset-block-start: -0.3rem;
}

.fi-bcg__cut::after {
	inset-block-end: -0.3rem;
}

/* ── Les étiquettes d'état ───────────────────────────────────────── */

/* La pastille reprend celle de l'ancienne bascule : creuse pour l'image
   brute, pleine pour la mesure. Le seul témoin d'état ne peut pas être
   qu'une couleur. L'étiquette de droite entre avec la coupe (--fi-bcg-x) :
   hors du cadre au départ, rognée par lui, posée au milieu à la fin. */
.fi-bcg__tag {
	position: absolute;
	inset-block-start: var(--fi-space-xs);
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.32rem 0.65rem 0.32rem 0.5rem;
	border-radius: var(--fi-radius-pill);
	background: color-mix(in srgb, var(--fi-color-surface) 92%, transparent);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--fi-color-ink) 10%, transparent);
	font-family: var(--fi-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.11em;
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--fi-color-ink);
}

.fi-bcg__tag--raw {
	inset-inline-start: var(--fi-space-xs);
}

.fi-bcg__tag--seg {
	inset-inline-start: calc(var(--fi-bcg-x) + var(--fi-space-xs));
}

.fi-bcg__pip {
	flex: none;
	inline-size: 0.6rem;
	block-size: 0.6rem;
	border: 1.5px solid var(--fi-color-line-strong);
	border-radius: var(--fi-radius-pill);
}

.fi-bcg__tag--seg .fi-bcg__pip {
	border-color: var(--fi-c-ink);
	background: var(--fi-c-ink);
}

/* Le libellé de la règle, en HTML : dans le SVG il suivrait l'échelle du
   dessin et tomberait sous 11 px au téléphone. Ancré au DESSIN par une marge
   en pourcentage (calculée sur la largeur, donc sur le dessin, de rapport
   fixe) : le bas du libellé à 467,5 unités d'un viewBox de 720, puis remonté
   de sa hauteur. ⚠️ Couplé aux constantes de la règle dans
   inc/company-biocellvia.php (départ à 26 unités, trait à h − 26). */
.fi-bcg__scale {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 22.5%;
	margin-block-start: calc(100% * 467.5 / 720);
	translate: 0 -100%;
	padding: 0.1rem 0.3rem;
	border-radius: var(--fi-radius-s);
	background: color-mix(in srgb, var(--fi-color-surface) 85%, transparent);
	font-family: var(--fi-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	color: var(--fi-color-ink);
}

/* ── Sous le cadre : la légende sous l'image brute, le relevé sous la mesure ── */

/* Les deux colonnes suivent la coupe : ce qui est sous la moitié droite
   décrit la moitié droite. */
.fi-bcg__below {
	display: grid;
	grid-template-columns: minmax(0, var(--fi-bcg-cut)) minmax(0, 1fr);
	align-items: start;
	margin-block-start: var(--fi-space-xs);
}

/* 59 signes en anglais, davantage en allemand : au-delà de 60 l'audit le
   compte comme texte courant, d'où le corps de 15 px d'emblée. Pas de césure
   (« gezeich- / net » à 1440) : la légende a la place de couper entre les mots. */
.fi-bcg__cap {
	padding-inline-end: var(--fi-space-m);
	-webkit-hyphens: manual;
	hyphens: manual;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--fi-color-muted);
	text-wrap: pretty;
}

/* Le relevé : trois couples. Son filet prolonge la coupe sous le cadre —
   l'encre de la machine, comme le masque. Il se met en rangs quand la moitié
   est étroite, en colonnes quand elle a la place. */
.fi-bcg__read {
	margin: 0;
	padding-inline-start: var(--fi-space-s);
	border-inline-start: 2px solid var(--fi-color-ink);
}

/* Libellé AU-DESSUS de sa valeur, à toutes les largeurs : côte à côte, dans la
   moitié d'une figure de 358 px (téléphone), « AREA FRACTION » passait sur deux
   lignes à côté de son chiffre. */
.fi-bcg__row {
	padding-block: 0 0.45rem;
}

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

.fi-bcg__row dt {
	margin-block-end: 0.1rem;
	font-family: var(--fi-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fi-color-muted);
}

.fi-bcg__row dd {
	margin: 0;
	font-family: var(--fi-font-mono);
	font-size: var(--fi-size-step-0);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--fi-color-ink);
}

/* Requête de CONTENEUR et non de média : c'est la largeur de la moitié qui
   décide, pas celle de l'écran — la figure change de colonne à 40em et à
   56em. Le conteneur est la figure ; la moitié en vaut la part de coupe (50 %,
   fixée par la géométrie du champ). Trois régimes, mesurés en anglais et en
   allemand (« FLÄCHENANTEIL » est aussi long que « AREA FRACTION ») :

   — figure < 24rem (téléphone, moitié de 179 px) : libellé au-dessus de la
     valeur, trois rangs ;
   — 24 à 35rem (tablette, 1024) : libellé et valeur sur une ligne — empilé,
     le relevé allongeait la figure de 60 px et faisait passer la barre des
     sociétés sous le pli à 768 × 1024 ;
   — 35rem et plus (bureau) : trois colonnes, valeurs au pas 1.

   Sans requête de conteneur (navigateur ancien), le premier régime : lisible. */
.fi-bcg__fig {
	container-type: inline-size;
}

@container (min-width: 24rem) {
	.fi-bcg__row {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--fi-space-2xs);
		padding-block: 0.1rem;
	}

	.fi-bcg__row dt {
		margin-block-end: 0;
	}
}

@container (min-width: 35rem) {
	.fi-bcg__read {
		display: grid;
		grid-template-columns: repeat(3, auto);
		justify-content: space-between;
		column-gap: var(--fi-space-xs);
	}

	.fi-bcg__row {
		display: block;
		padding-block: 0;
	}

	.fi-bcg__row dt {
		margin-block-end: 0.2rem;
	}

	.fi-bcg__row dd {
		font-size: var(--fi-size-step-1);
		line-height: 1.2;
	}
}

/* Les libellés en capitales ne se coupent pas DANS un mot : en allemand, la
   césure du site rendait « PEER-REVIEW-PUBLIKA- / TIONEN SEIT » au téléphone.
   Les traits d'union du mot suffisent à le couper proprement. Même parti que
   les boutons et les étiquettes en allemand (style.css). */
.fi-bcg__fact dt,
.fi-bcg__row dt,
.fi-bcg__tag {
	-webkit-hyphens: manual;
	hyphens: manual;
}

/* ── Sans mouvement ──────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.fi-bcg__seg,
	.fi-bcg__cut,
	.fi-bcg__tag--seg {
		animation: none;
	}
}