/* ═══════════════════════════════════════════════════════════════════
   FICHES DE SOCIÉTÉ — le socle des cinq, et l'index qui les chapeaute

   Chargée UNIQUEMENT sur /our-companies/<slug>/ et sur /our-companies/
   (voir inc/company.php). Depuis le 27/10/2026 les fiches sont des
   « portes » d'un écran (docs/79-fiches-porte.md) : elle porte ce que les
   cinq portes ont en partage — le logo, le titre, le bouton
   [firalis_co_go], la barre des cinq sociétés — et la page d'index. La
   composition de chaque porte vit dans css/company-<slug>.css, chargée
   par-dessus.

   Retirées le même jour avec leurs composants (git les garde) : la
   clôture, la fiche signalétique au-delà de cinq rangs et l'étape en
   jeton, la section Commercialisation, les sociétés sœurs, le nom
   composé, la vague, les photographies de fiche, et les variantes de
   bande des fiches longues (--alt, --dark, têtes de bande, chapô en
   plusieurs paragraphes).

   ⚠️ AUCUNE VALEUR CHROMATIQUE ICI. La couleur d'une fiche vient d'une
   règle en ligne imprimée par inc/company.php depuis packages/tokens :
   --fi-c (la vague), --fi-c-ink (le texte de marque, seule variante
   autorisée pour du texte) et --fi-color-wash, que le shader de fond lit
   pour dériver sa rampe. C'est ce dernier jeton qui fait ouvrir la page
   d'Amoneta en violet et celle de Lodiag en vert, sans une ligne de
   JavaScript de plus.

   Le vocabulaire est celui du reste du site — .fi-lede, .fi-body,
   .fi-eyebrow, .fi-hl, .fi-rv —, et les boutons sont ceux de style.css :
   ce qui change d'une porte à l'autre, c'est la COMPOSITION, pas le
   lettrage.
   ═══════════════════════════════════════════════════════════════════ */

.fi-cop {
	/* Deux valeurs de bande, comme les fiches d'étude depuis la révision du
	   28/08. La page en portait quatre à l'époque, dont deux séparées de sept
	   pixels : assez pour dérégler le rythme, trop peu pour qu'on voie
	   pourquoi. Les bandes ordinaires prennent la première, les respirations
	   et les bandes à chiffre la seconde. */
	--fi-cop-band: clamp(3rem, 5.5vw, 5.5rem);
	--fi-cop-band-tight: clamp(2.25rem, 4vw, 3.75rem);
	background: var(--fi-color-surface);
}

/* WordPress pose une marge haute sur tout bloc frère : elle décale les bandes
   les unes par rapport aux autres et casse les filets de séparation. */
.fi-cop > * {
	margin-block: 0;
}

.fi-cop h2 {
	margin-block: 0 var(--fi-space-s);
	font-size: clamp(1.75rem, 1.1rem + 2.4vw, 2.9rem);
	line-height: 1.07;
	letter-spacing: -0.035em;
	color: var(--fi-color-ink);
	text-wrap: balance;
}

.fi-cop h3 {
	margin-block: 0 var(--fi-space-2xs);
	font-size: var(--fi-size-step-1);
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--fi-color-ink);
}

/* ── Bandes génériques ───────────────────────────────────────────────
   Nommées par leur RÔLE et non par leur contenu. Les fiches d'étude ont
   commencé par l'inverse (.fi-study__sieveband, .fi-study__gov) et une
   retouche de la gouvernance risquait de casser une section sans rapport.
   Depuis que les fiches sont des portes d'une seule bande, seule la page
   d'index /our-companies/ en emploie (la bande de la liste, --tight). */

.fi-cop__band {
	padding-block: var(--fi-cop-band);
	background: var(--fi-color-surface);
}

.fi-cop__band--tight {
	padding-block: var(--fi-cop-band-tight);
}

/* ── 01 · L'ouverture ────────────────────────────────────────────────
   La bande qui reçoit le fond « wash » : c'est la première bande pleine
   largeur du contenu, et inc/wash.php y glisse le canvas. L'enveloppe
   .fi-cop est exclue de l'injection pour cette raison — sans quoi le halo
   s'étirerait sur toute la hauteur de la page. Sur une porte, c'est LA
   bande (.fi-cop__open.fi-cop__gate), que la feuille de la société
   recompose ; .fi-cop__opengrid ne sert plus qu'à l'index : le titre et
   le chapô à gauche, l'entrée par les services à droite. */

.fi-cop__open {
	position: relative;
	padding-block: clamp(3rem, 6vw, 5.5rem) 0;
}

.fi-cop__opengrid {
	display: grid;
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: start;
	padding-block-end: clamp(2rem, 4vw, 3.25rem);
}

@media (min-width: 56em) {
	.fi-cop__opengrid {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
		gap: clamp(2.5rem, 5vw, 4.5rem);
	}
}

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

.fi-cop__opengrid > .fi-lede {
	margin-block: 0;
	max-inline-size: 52ch;
}

/* ⚠️ 17/09 — La copie corrigée met du gras DANS le chapô et dans le corps :
   « But finding a signal is only the start. », « discovery towards diagnostic
   application », « APOE », « different responsibilities ». `.fi-lede` et
   `.fi-body` sortent tous deux en « muted » ; un gras de la même couleur que ce
   qui l'entoure ne se voit qu'à la graisse, c'est-à-dire presque pas à 16px.
   L'emphase passe donc en encre pleine — exactement la règle posée le même jour
   sur les fiches d'étude (`.fi-study :is(.fi-lede, .fi-body) strong`). */
.fi-cop :is(.fi-lede, .fi-body) strong {
	color: var(--fi-color-ink);
	font-weight: 600;
}

/* ── Le LOGO de la société, en tête d'ouverture — 13/09 ──────────────
   A remplacé la vague ET le bloc « Company / nom » sur les cinq fiches
   (leurs règles sont retirées le 27/10/2026). Voir [firalis_co_logo] dans
   inc/company.php — IVDias et BioCellvia portent des déclinaisons
   PROVISOIRES, construites faute de fichier client. Chaque porte règle sa
   hauteur dans sa propre feuille.

   Réglé par la HAUTEUR, pas par la largeur : les trois logos partagent la
   même vague, qui occupe toute la hauteur de l'image une fois les marges
   rognées. À hauteur égale la vague est identique d'une fiche à l'autre et
   seul le mot change de longueur.

   Le <p> reste pleine largeur : plus étroit, WordPress le centrerait
   dans la mise en page « constrained ». */
.fi-cop__logo {
	margin-block: 0 clamp(1.5rem, 2.5vw, 2.25rem);
}

.fi-cop__logo img {
	display: block;
	inline-size: auto;
	max-inline-size: 100%;
	block-size: clamp(3.5rem, 2.4rem + 3.4vw, 5.5rem);
	object-fit: contain;
	object-position: left center;
}

/* Même parade que .fi-study__h1 et .fi-hero__content : 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 —
   à zéro le titre se colle au bord de la bande pleine largeur. */
.fi-cop__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: clamp(2.4rem, 1rem + 4.4vw, 4.4rem);
	line-height: 1.01;
	letter-spacing: -0.045em;
	color: var(--fi-color-ink);
}

/* La colonne de droite de l'ouverture de l'index : l'entrée par les
   services (.fi-cop__seek, juste dessous). */
.fi-cop__aside > * {
	margin-block-start: 0;
}

.fi-cop__aside .fi-lede,
.fi-cop__aside .fi-body {
	margin-block: 0;
	max-inline-size: 42ch;
}

/* ── L'entrée par les services — index /our-companies/ seulement ─────
   Revue client du 08/10 : le renvoi vers /what-we-offer/ n'est plus un lien
   dans une phrase mais un second temps de la tête — un h2, une phrase, un
   bouton. Le h2 descend au pas 2 : il ne doit pas disputer son rang au h1
   d'à côté, seulement annoncer un autre chemin. Le filet haut le détache du
   chapô quand les deux colonnes s'empilent sous 56em. */
.fi-cop__seek {
	display: grid;
	gap: var(--fi-space-s);
	align-content: start;
	padding-block-start: var(--fi-space-m);
	border-block-start: 1px solid var(--fi-color-line);
}

.fi-cop__seek .fi-cop__seekh {
	margin-block: 0;
	font-size: var(--fi-size-step-2);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.022em;
}

.fi-cop__seek .wp-block-buttons {
	margin-block: var(--fi-space-2xs) 0;
}

/* ═══════════════════════════════════════════════════════════════════
   L'INDEX — /our-companies/, la page qui chapeaute les cinq fiches

   Elle n'est PAS une fiche : aucun pont de couleur ne lui est posé, cinq
   marques y coexistent et teinter la page de l'une d'elles serait faux.
   Chaque RANG, lui, porte la sienne : c'est le seul endroit du site, avec
   l'annuaire du hero, où les cinq vagues se voient ensemble.

   En rangs et non en colonnes, contrairement à l'annuaire du hero. Un rang
   a la place de porter, à côté du nom, ce que la société délivre et où elle
   se tient sur le continuum — les deux choses qui permettent de choisir, et
   que cinq colonnes de 200 px ne peuvent pas dire.
   ═══════════════════════════════════════════════════════════════════ */

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

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

/* ⚠️ Trois colonnes même en étroit — vague, contenu, flèche — et non deux.
   En deux colonnes la flèche tombait SOUS les relevés, seule sur une ligne :
   cinq lignes de presque rien sur une page qui en compte cinq. Placée en
   tête de rang, à droite du nom, elle dit ce qu'elle doit dire (« ce rang
   mène quelque part ») à l'endroit où l'œil arrive. */
.fi-copx__link {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: var(--fi-space-xs) var(--fi-space-m);
	align-items: start;
	padding-block: clamp(1.25rem, 2.5vw, 2rem);
	color: inherit;
	text-decoration: none;
}

/* Trois colonnes à partir de 56em : la vague, l'identité, puis les relevés.
   Sous ce seuil les relevés passent SOUS l'identité — en troisième colonne
   ils tombaient à 150 px, où « Bioproduction & CE-IVDR · Biobanking &
   clinical samples · Clinical & translational research » fait huit lignes. */
@media (min-width: 56em) {
	.fi-copx__link {
		grid-template-columns: auto minmax(0, 1.05fr) minmax(0, 0.95fr) auto;
		align-items: center;
		gap: var(--fi-space-l);
	}
}

.fi-copx__mark {
	inline-size: auto;
	block-size: 2.25rem;
	grid-row: 1 / -1;
}

@media (min-width: 56em) {
	.fi-copx__mark {
		block-size: 2.75rem;
		grid-row: auto;
	}
}

.fi-copx__head {
	display: grid;
	gap: 0.3rem;
}

.fi-copx__name {
	font-size: var(--fi-size-step-2);
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.1;
	color: var(--fi-color-ink);
}

.fi-copx__blurb {
	max-inline-size: 44ch;
	font-size: var(--fi-size-step-0);
	line-height: 1.55;
	color: var(--fi-color-muted);
	text-wrap: pretty;
}

.fi-copx__meta {
	display: grid;
	gap: 0.4rem;
	margin: 0;
	grid-column: 2 / 4;
}

@media (min-width: 56em) {
	.fi-copx__meta {
		grid-column: auto;
	}
}

.fi-copx__row {
	display: grid;
	grid-template-columns: 5.5rem minmax(0, 1fr);
	gap: var(--fi-space-2xs);
	align-items: baseline;
}

.fi-copx__k {
	margin: 0;
	font-family: var(--fi-font-mono);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fi-color-muted);
}

/* 15px de plancher : ce sont des valeurs, pas un libellé. Quatrième
   occurrence de la même correction dans ce projet. */
.fi-copx__v {
	margin: 0;
	font-size: var(--fi-size-step-0);
	line-height: 1.5;
	color: var(--fi-color-text);
}

.fi-copx__go {
	grid-column: 3;
	grid-row: 1;
	padding-block-start: 0.35rem;
	color: var(--fi-color-muted);
}

@media (min-width: 56em) {
	.fi-copx__go {
		grid-column: auto;
		grid-row: auto;
		padding-block-start: 0;
	}
}

.fi-copx__go .fi-arrow {
	inline-size: 1.125rem;
	block-size: 1.125rem;
	transition: transform 0.2s ease, color 0.2s ease;
}

/* La couleur de la société n'arrive qu'au survol, et sur la flèche seule :
   au repos, cinq accents colorés sur cinq rangs feraient une liste bariolée
   là où la vague suffit à distinguer. */
.fi-copx__item:hover .fi-copx__go,
.fi-copx__link:focus-visible .fi-copx__go {
	color: var(--fi-c-ink);
}

.fi-copx__item:hover .fi-arrow,
.fi-copx__link:focus-visible .fi-arrow {
	transform: translateX(4px);
}

.fi-copx__item:hover .fi-copx__name,
.fi-copx__link:focus-visible .fi-copx__name {
	text-decoration: underline;
	text-underline-offset: 0.3em;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--fi-c);
}

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

/* ═══════════════════════════════════════════════════════════════════
   L'APPEL À L'ACTION D'UNE PORTE — [firalis_co_go] (27/10/2026)

   Monté dans le socle le 27/10/2026 : les cinq portes en portaient chacune
   une copie, valeurs comprises, sous leurs propres classes (.fi-amogate__door,
   .fi-fir__door, .fi-lodgate__door, .fi-ivd__go, .fi-bcg__door), toutes
   reprises de la porte d'Amoneta. La sémantique du bouton est la part
   « famille » de la porte (docs/79 § 6) : une seule écriture. Et un seul
   bouton pour les cinq, « comme si le site existait » (décision de
   l'utilisateur du 27/10/2026) : libellé « Visit … » partout ; seule la
   destination change, décidée par l'annuaire — voir inc/company.php.

   Le bouton garde le dessin du site (style.css, boutons sous .fi-cop :
   encre, rayon, corps). Ce qui s'y ajoute : une SOUS-LIGNE en chasse-fixe,
   plus petite, sous le libellé — le nom de domaine du vrai site, ou la
   destination quand la société n'en a pas —, et la flèche à droite sur les
   deux lignes, ↗ vers un autre site (.fi-cop__goout), → sur celui-ci
   (.fi-arrow). La preuve qu'on change de site se lit dans le geste même.
   Le contact du groupe passe en lien texte, visiblement second : une seule
   action principale.

   PLACEMENT : chaque porte pose sa classe sur l'enveloppe (attribut
   « class » du shortcode : .fi-amogate__go, .fi-fir__go, .fi-lodgate__go,
   .fi-ivd__cta, .fi-bcg__go) et règle dans SA feuille la zone de grille,
   les marges, la largeur du bouton par écran et la phrase sous le bouton
   (.fi-cop__gonote). Elle ne restyle pas la forme.

   ⚠️ Aucune valeur chromatique : le fond et le texte du bouton viennent de
   style.css, la sous-ligne prend --fi-color-on-dark-muted, le lien second
   --fi-color-ink puis --fi-c-ink au survol.
   ═══════════════════════════════════════════════════════════════════ */

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

.fi-cop__godoor {
	margin: 0;
}

/* Trois classes : la règle commune des boutons (style.css) pèse 0-2-0 et
   passe le lien en `display: block` sous 30em. Pas une de plus : hors de
   l'anglais, style.css resserre le remplissage latéral sous 30em à 0-4-0, et
   ce resserrement doit continuer de l'emporter. */
.fi-cop .fi-cop__godoor .wp-block-button__link {
	display: grid;
	grid-template-columns: auto auto;
	align-items: center;
	column-gap: var(--fi-space-l);
	row-gap: 0.15rem;
	padding: 0.85rem 1.25rem 0.85rem 1.5rem;
	text-align: start;
}

.fi-cop__golab {
	font-size: 1.0625rem;
	line-height: 1.2;
}

.fi-cop__gosub {
	grid-column: 1;
	font-family: var(--fi-font-mono);
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.3;
	color: var(--fi-color-on-dark-muted);
}

.fi-cop__godoor :is(.fi-arrow, .fi-cop__goout) {
	grid-column: 2;
	grid-row: 1 / span 2;
	inline-size: 1.25rem;
	block-size: 1.25rem;
	transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.fi-cop__godoor .wp-block-button__link:is(:hover, :focus-visible) .fi-arrow {
	transform: translateX(0.1875rem);
}

.fi-cop__godoor .wp-block-button__link:is(:hover, :focus-visible) .fi-cop__goout {
	transform: translate(0.125rem, -0.125rem);
}

/* Le contact du groupe, en lien second — état « site publié » seulement. */
.fi-cop__goalt {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-block-size: 44px;
	font-family: var(--fi-font-display);
	font-size: 1rem;
	font-weight: 600;
	color: var(--fi-color-ink);
	text-decoration: none;
}

.fi-cop__goalt .fi-arrow {
	inline-size: 1rem;
	block-size: 1rem;
	transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.fi-cop__goalt:is(:hover, :focus-visible) {
	color: var(--fi-c-ink);
}

.fi-cop__goalt:is(:hover, :focus-visible) .fi-arrow {
	transform: translateX(0.1875rem);
}

/* La phrase sous le bouton (attribut « note ») : sur sa propre ligne, au
   corps du texte courant (15 px, le plancher du projet). Sa mesure, sa marge
   et les écrans où elle paraît appartiennent à la porte. */
.fi-cop__gonote {
	flex-basis: 100%;
	margin: 0;
	font-size: 0.9375rem;
	color: var(--fi-color-muted);
	text-wrap: pretty;
}

/* Téléphone : le bouton prend la largeur (règle des boutons de bande sous
   30em) et garde sa grille — libellé, sous-ligne, flèche au bout. */
@media (max-width: 30em) {
	.fi-cop__go {
		display: grid;
		justify-items: start;
	}

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

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

@media (prefers-reduced-motion: reduce) {
	.fi-cop__godoor :is(.fi-arrow, .fi-cop__goout),
	.fi-cop__goalt .fi-arrow {
		transition: none;
	}
}

/* ═══════════════════════════════════════════════════════════════════
   LA BARRE DES CINQ SOCIÉTÉS — [firalis_co_switch] (27/10/2026)

   Fiches « porte » (docs/79-fiches-porte.md) : la page tient en un écran,
   et cette barre, posée en DERNIER enfant du hero de chaque fiche, dit où
   l'on est — sur le site du groupe, devant l'une de ses cinq sociétés.
   Elle remplace la bande « The other four companies ».

   Part « famille » de la page : le hero au-dessus appartient à la société,
   la barre est la même sur les cinq. Aucune feuille de société ne la
   restyle ; elle se place (marge, alignement) par son parent.
   ═══════════════════════════════════════════════════════════════════ */

.fi-cop__switch {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: var(--fi-space-l);
	row-gap: var(--fi-space-2xs);
	padding-block: var(--fi-space-xs);
	border-block-start: 1px solid var(--fi-color-line);
}

.fi-cop__switchlab {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	font-family: var(--fi-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--fi-color-muted);
	text-decoration: none;
}

.fi-cop__switchlab:hover,
.fi-cop__switchlab:focus-visible {
	color: var(--fi-color-ink);
}

.fi-cop__switchlist {
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--fi-space-m);
	row-gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fi-cop__switchlink {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-block-size: 44px;
	font-size: var(--fi-size-step-0);
	font-weight: 500;
	color: var(--fi-color-muted);
	text-decoration: none;
	transition: color 0.2s ease;
}

.fi-cop__switchlink:hover,
.fi-cop__switchlink:focus-visible {
	color: var(--fi-color-ink);
}

.fi-cop__switchdot {
	inline-size: 0.5rem;
	block-size: 0.5rem;
	border-radius: 50%;
	background: var(--fi-c);
	flex: none;
}

/* La société de la page : encre pleine et filet de sa couleur sous le nom.
   Le filet est un dessin, la couleur de marque y est permise (--fi-c). */
.fi-cop__switchlink[aria-current="page"] {
	color: var(--fi-color-ink);
	font-weight: 600;
}

.fi-cop__switchlink[aria-current="page"]::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0.55rem;
	block-size: 2px;
	background: var(--fi-c);
}

/* Téléphone : les cinq noms sur UN rang. Mesuré le 27/10/2026 à 390 : avec
   pastilles et écart m, la liste prenait deux rangs et la barre 165px — un
   tiers du défilement d'une porte. Sans pastille et à écart 2xs, les cinq noms
   font ~314px : un rang dès 375 (un iPhone SE), deux rangs seulement à 360. La
   société courante garde son filet de couleur ; les autres perdent la pastille,
   pas le nom. */
@media (max-width: 33.99em) {
	.fi-cop__switch {
		row-gap: 0;
	}

	.fi-cop__switchlist {
		column-gap: var(--fi-space-2xs);
	}

	.fi-cop__switchdot {
		display: none;
	}
}

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