/**
 * Page « Bioproduction » (/products/bioproduction-ce-ivdr/) — styles propres à
 * la page. Mise en file automatique (clé de vue « bioproduction-ce-ivdr »).
 * Composants partagés : style.css (/components/). Couleurs et tailles : --fsa-*.
 *
 * 13/11/2026 — REFONTE 0.9.0, direction C « Cristal matière » (lot P2,
 * docs/85-refonte-design/lots/p2-catalogue.md ; maquette C § 5 et § 6) :
 * - hero Catalogue : bloc bleu à l'habit HEXAGONE de la page, tuile = CHAÎNE
 *   (produits critiques → kit → ventes, libellés mono) ; même famille que Products
 *   (trio) et Biobank (éventail), composition propre ;
 * - les quatre services deviennent le PROCESSUS COLLANT du socle (.fsa-proc) : panneau
 *   navy à gauche, le treillis cristallise étape par étape ; les ancres restent sur les
 *   sections d'étape ;
 * - l'usine (#facility) : panneau en débord gauche — TEINTÉ et sans treillis depuis la
 *   passe G (le processus collant est le seul moment fort) ;
 * - le CTA prend l'habit de la page.
 * Aucun style fondé sur la position d'une bande ; rien ne suppose une longueur de texte.
 */

/* ═══ 1. Hero Catalogue — bloc bleu hexagonal, tuile en chaîne ═════════════════
   Le socle pose la composition (texte sur papier 1–6, bloc bleu en débord droit,
   tuile au pied du bloc, sous-onglets dessous). Ici : la hauteur (texte court : un
   bloc plus bas que le socle, la page tient sa hauteur 0.8.0) et la tuile. */
.fsa-bioproduction-ce-ivdr__hero { --fsa-sig-h: clamp(132px, 11vw, 158px); }
@media (min-width: 1024px) {
	.fsa-bioproduction-ce-ivdr__hero .fsa-hero-inner__grid { min-height: clamp(400px, 32vw, 460px); padding-bottom: clamp(3rem, 5vw, 4rem); }
}

/* Passe G : le corps du H1 Catalogue au bureau et le bloc 2:1 au téléphone sont au socle (style.css § 6). */
/* Tuile : la chaîne du socle, en blanc, libellés en Plex Sans (passe G ; mono avant). Toujours en
   rangée (la chaîne verticale du socle sous 760 px serait trop haute dans la tuile). */
.fsa-bioproduction-ce-ivdr__sig .fsa-sig__fig { max-width: 30rem; }
.fsa-bioproduction-ce-ivdr__sig .fsa-chain { grid-template-columns: repeat(var(--k), minmax(0, 1fr)); }
.fsa-bioproduction-ce-ivdr__sig .fsa-chain::before { display: block; }
.fsa-bioproduction-ce-ivdr__sig .fsa-chain > li { display: block; padding: 0 12px 0 0; }
.fsa-bioproduction-ce-ivdr__sig .fsa-chain > li::after { content: none; }
.fsa-bioproduction-ce-ivdr__sig .fsa-chain__lbl {
	margin-top: 12px;
	font: 500 .71875rem/1.25 var(--fsa-font-sans); /* libellé (passe G) : le mono reste à la norme de la légende */
	letter-spacing: .02em;
	color: var(--fsa-paper);
}
/* < 1024 : bloc 16:9 et tuile montée sur son pied — dans le socle depuis la passe F. */

/* ═══ 2. Processus collant (les quatre services) ═══════════════════════════════
   Socle : .fsa-proc (panneau collant, nav, champ qui lit --fsa-p ; étapes à droite).
   Ici, la FORME regagne la hauteur (la page tient sa hauteur 0.8.0 malgré le rythme C) :
   au bureau, chaque étape est sur deux colonnes — le texte, puis sa chaîne en VERTICAL
   dans une colonne de marge (filet pointillé) — au lieu d'une chaîne posée dessous ;
   panneau 4 / étapes 8. La note du certificat et les étiquettes suivent la maquette. */
.fsa-bioproduction-ce-ivdr__proc { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.fsa-bioproduction-ce-ivdr__proc .fsa-proc__panel { height: min(calc(100svh - var(--fsa-hdr-h) - 48px), 560px); }
.fsa-bioproduction-ce-ivdr__proc .fsa-proc__step {
	min-height: 0;
	padding-block: 0 clamp(2rem, 3vw, 2.5rem);
	/* Ancres du contrat : en-tête collant + 24 px (socle) ; arrivée par #distribution
	   (301 de /about/distributors-firalis/), #supply-chain… depuis le pied et l'accueil. */
}
.fsa-bioproduction-ce-ivdr__proc .fsa-proc__step + .fsa-proc__step { padding-top: clamp(2rem, 3vw, 2.5rem); }
.fsa-bioproduction-ce-ivdr__proc .fsa-proc__step:last-child { padding-bottom: 0; }
.fsa-bioproduction-ce-ivdr__proc .fsa-proc__step > :where(h2, .fsa-h2) { margin: 0; }
.fsa-bioproduction-ce-ivdr__proc .fsa-proc__step > p:not(.fsa-links) { margin-top: 16px; max-width: 60ch; line-height: 1.6; }
.fsa-bioproduction-ce-ivdr__more { align-items: baseline; gap: 10px 24px; margin: 16px 0 0; }
/* Passe G (a11y P2-6) : au doigt, les liens empilés gardent l'écart de 20 px du socle
   (.fsa-links) — chaque lien déborde de 10 px pour sa cible de 44 px. */
@media (max-width: 1080px) {
	.fsa-bioproduction-ce-ivdr__more { row-gap: 20px; }
}

/* Note du certificat ISO 13485 (Kitting) : la donnée en mono, son périmètre dessous. */
.fsa-bioproduction-ce-ivdr__note { flex: 1 0 100%; font: 500 var(--fsa-fs-data)/1.5 var(--fsa-font-mono); color: var(--fsa-fg-strong); }
.fsa-bioproduction-ce-ivdr__note > span { display: block; font: 400 var(--fsa-fs-m)/1.5 var(--fsa-font-sans); color: var(--fsa-fg-soft); }

/* Étiquettes de Regulatory affairs : carrés à filet (socle), en Plex Sans (maquette). */
.fsa-bioproduction-ce-ivdr__tags { margin-top: 18px; }
.fsa-bioproduction-ce-ivdr__tags > li {
	padding: 7px 10px;
	background: color-mix(in srgb, var(--fsa-paper) 55%, transparent);
	font: 500 var(--fsa-fs-sm)/1.25 var(--fsa-font-sans);
	letter-spacing: 0;
}

/* Chaîne d'une étape (socle .fsa-chain) : nœuds aval et amont en gris, l'actif plein et
   ses clés. 760–1023 px : sous le texte, en rangée, sous un filet pointillé (maquette). */
.fsa-bioproduction-ce-ivdr__proc .fsa-proc__step .fsa-chain { margin-top: 26px; padding-top: 22px; }
.fsa-bioproduction-ce-ivdr__proc .fsa-proc__step .fsa-chain::before { top: 31px; }
.fsa-bioproduction-ce-ivdr__chain > li:not(.is-on) .fsa-chain__lbl { color: var(--fsa-fg-soft); }

@media (min-width: 1024px) {
	.fsa-bioproduction-ce-ivdr__step {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(11.5rem, 15rem);
		column-gap: clamp(28px, 3.4vw, 52px);
		align-content: start;
	}
	.fsa-bioproduction-ce-ivdr__step > * { grid-column: 1; }
	.fsa-bioproduction-ce-ivdr__proc .fsa-proc__step > .fsa-chain {
		grid-column: 2;
		grid-row: 1 / span 3;
		align-self: start;
		grid-template-columns: minmax(0, 1fr);
		margin: 0;
		padding: 10px 0 0 22px;
		border-top: 0;
		border-left: 1px dashed var(--fsa-rule-strong);
	}
	/* La chaîne verticale du socle (< 760 px), reprise dans la colonne de marge. */
	.fsa-bioproduction-ce-ivdr__chain::before { display: none; }
	.fsa-bioproduction-ce-ivdr__chain > li { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 14px; padding: 0 0 16px; }
	.fsa-bioproduction-ce-ivdr__chain > li:last-child { padding-bottom: 0; }
	.fsa-bioproduction-ce-ivdr__chain > li:not(:last-child)::after { content: ""; position: absolute; left: 8px; top: 26px; bottom: 4px; width: 4px; background: radial-gradient(circle closest-side, var(--fsa-accent) 0 55%, transparent 75%) 50% 0 / 4px 9px repeat-y; opacity: .7; }
	.fsa-bioproduction-ce-ivdr__chain .fsa-chain__dot { grid-row: 1 / span 2; }
	.fsa-bioproduction-ce-ivdr__chain .fsa-chain__lbl { margin-top: 1px; }
	.fsa-bioproduction-ce-ivdr__chain > li > :not(.fsa-chain__dot) { grid-column: 2; }
	.fsa-bioproduction-ce-ivdr__chain .fsa-keys { margin-top: 8px; }
}

/* Tablette et téléphone (< 1024 : le socle empile, panneau 16:10 au-dessus des étapes) :
   le panneau devient un SOMMAIRE compact — la matière en bandeau, la navigation en
   deux colonnes — pour ne pas allonger la page. */
@media (max-width: 1023px) {
	.fsa-bioproduction-ce-ivdr__proc { grid-template-columns: minmax(0, 1fr); }
	.fsa-bioproduction-ce-ivdr__proc .fsa-proc__panel { aspect-ratio: auto; height: auto; min-height: 0; padding-top: clamp(72px, 14vw, 132px); margin-bottom: clamp(2rem, 5vw, 3rem); }
	.fsa-bioproduction-ce-ivdr__proc .fsa-proc__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; padding: 12px 18px 14px; background: linear-gradient(to top, var(--fsa-navy) 82%, color-mix(in srgb, var(--fsa-navy) 0%, transparent)); }
}
@media (max-width: 760px) {
	/* Chaîne verticale du socle : nœuds un peu plus serrés (téléphone). */
	.fsa-bioproduction-ce-ivdr__proc .fsa-proc__step .fsa-chain { margin-top: 22px; padding-top: 18px; }
	.fsa-bioproduction-ce-ivdr__chain > li { padding-bottom: 12px; }
	.fsa-bioproduction-ce-ivdr__chain > li:last-child { padding-bottom: 0; }
	.fsa-bioproduction-ce-ivdr__proc .fsa-proc__panel { padding-top: 56px; }
}
@media (max-width: 420px) {
	.fsa-bioproduction-ce-ivdr__proc .fsa-proc__nav a { font-size: var(--fsa-fs-m); gap: 10px; }
}

/* ═══ 3. L'usine (#facility) — panneau teinté ════════════════════════════════
   Passe G (13/11, audit design P1-1 et P1-3, arbitrage 4 du brief 41) : le processus
   collant est LE moment de la page ; l'usine passe en panneau TEINTÉ en débord gauche,
   sans treillis (plus de second navy, plus de fente navy / papier / bleu avant le CTA,
   rien sous le texte). Sur une bande déjà teintée (ordre libre : fond calculé), le panneau
   prend le papier — par voisinage de ton, jamais par position. La matière d'angle du socle
   (.fsa-panel::after) tomberait sous le texte (débord gauche) : retirée. */
.fsa-bioproduction-ce-ivdr__plant { background: var(--fsa-bg); color: var(--fsa-fg); }
.fsa-bioproduction-ce-ivdr__plant::after { content: none; }
.fsa-sec--alt .fsa-bioproduction-ce-ivdr__plant { --fsa-bg: var(--fsa-surface); }
.fsa-bioproduction-ce-ivdr__facility .fsa-panel { scroll-margin-top: 1.5rem; }
/* Un panneau d'information, plus un moment : réserve intérieure resserrée (72 → 56 px à
   1440), et la bande qui le porte prend les trois quarts de la réserve de bande — le
   panneau a déjà la sienne (sans cela : 192 px d'air entre la bande du processus et le
   texte du panneau). Page tenue sous sa hauteur 0.8.0 à 1440. */
.fsa-bioproduction-ce-ivdr__facility { padding-block: calc(var(--fsa-section) * .75); }
.fsa-bioproduction-ce-ivdr__plant { padding-block: clamp(2rem, 4vw, 3.5rem); }

/* Graphe : dessin (aria-hidden) puis jalons en texte, trois colonnes égales —
   leurs centres tombent sur ceux des tubes (1/6, 1/2, 5/6 du viewBox). */
.fsa-bioproduction-ce-ivdr__growth { width: 100%; max-width: 26rem; margin: 0; justify-self: end; }
/* Sur le panneau clair, le bleu clair des tubes et des liaisons passe à un bleu moyen
   (le dessin était réglé pour le navy). */
.fsa-bioproduction-ce-ivdr__growth { --fsa-svg-light: color-mix(in srgb, var(--fsa-brand) 55%, var(--fsa-brand-light)); }
.fsa-bioproduction-ce-ivdr__growth svg { display: block; width: 100%; height: auto; overflow: visible; }
.fsa-bioproduction-ce-ivdr__growth-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: .9rem 0 0;
	padding: 0;
	list-style: none;
	text-align: center;
}
.fsa-bioproduction-ce-ivdr__growth-steps > li { margin: 0; padding: 0 .2rem; min-width: 0; }
.fsa-bioproduction-ce-ivdr__growth-y {
	display: block;
	/* « Becoming » doit tenir dans un tiers de colonne au téléphone (≈ 88 px à 360). */
	font: 500 clamp(1rem, .75rem + 1.25vw, var(--fsa-fs-num))/1.15 var(--fsa-font-title);
	letter-spacing: -.02em;
	color: var(--fsa-fg-strong);
}
.fsa-bioproduction-ce-ivdr__growth-steps > li.is-now .fsa-bioproduction-ce-ivdr__growth-y { color: var(--fsa-link); }
/* L'avenir (3ᵉ jalon, éprouvette en pointillé) : le mot du client en ton doux. */
.fsa-bioproduction-ce-ivdr__growth-steps > li.is-next .fsa-bioproduction-ce-ivdr__growth-y { color: var(--fsa-fg-soft); }
.fsa-bioproduction-ce-ivdr__growth-t {
	display: block;
	margin-top: .35rem;
	font-size: var(--fsa-fs-s);
	line-height: 1.4;
	color: var(--fsa-fg-soft);
}
@media (max-width: 960px) {
	.fsa-bioproduction-ce-ivdr__growth { justify-self: start; }
}