/* ═══════════════════════════════════════════════════════════════════
   FICHE DE SOCIÉTÉ — FIRALIS SAS · la PORTE (27/10/2026)

   Chargée par-dessus css/company.css, et UNIQUEMENT sur
   /our-companies/firalis/ (voir inc/company.php). Depuis le 27/10/2026
   (docs/79-fiches-porte.md) la fiche tient en un écran : une seule
   bande, .fi-cop__gate, et cette feuille ne porte plus que ses règles.
   Les règles de l'ancienne page longue (cartes de services, registre
   complet, programme, biobanque, recherche, Huningue) sont dans git :
     git show HEAD:sites/firalis-group/theme/css/company-firalis.css

   ⚠️ AUCUNE VALEUR CHROMATIQUE, AUCUN PIXEL EN DUR pour ce que couvre
   un jeton (hors filets d'un pixel). La couleur de marque arrive par la
   règle en ligne du socle : --fi-c pour les FILETS, --fi-c-ink pour le
   seul texte de marque autorisé.

   ── La composition ────────────────────────────────────────────────
   Au-delà de 48em, deux colonnes : à gauche une LETTRE d'industriel —
   logo, ligne d'en-tête (raison sociale · implantation · fondation),
   titre, chapô, puis la PORTE — le bouton commun des cinq, à l'encre du
   site ; à droite la PREUVE — le registre des normes, un rang par norme,
   en grands numéros comme sur une plaque.
   En deçà, une colonne : la porte passe avant le registre, et le bouton
   reste dans le premier écran du téléphone (mesuré à 390×844).

   La famille (docs/79 §6) tient au fond « wash » teinté, au logo, à la
   barre des cinq sociétés et à la sémantique du bouton — plein vers le
   site de la marque, lien texte vers le groupe. Le reste est à Firalis.
   ═══════════════════════════════════════════════════════════════════ */

/* ── La bande : un écran, l'en-tête collant déduit ───────────────────
   Même règle que le hero d'accueil (style.css, .fi-heroX) : hauteur
   MINIMALE, « svh » pour la barre d'adresse mobile. Colonne flexible :
   la composition se centre dans la hauteur libre, la barre des
   sociétés reste au pied. Quand le contenu dépasse (téléphone), il
   gagne et la page défile — très peu. */
.fi-cop__open.fi-cop__gate {
	display: flex;
	flex-direction: column;
	min-block-size: calc(100svh - var(--fi-header-h));
	padding-block: clamp(1.25rem, 3.5svh, 3rem) 0;
}

/* En colonne flexible, la mise en page « constrained » de WordPress pose
   des marges automatiques sur chaque enfant, qui se réduit alors à son
   contenu : on lui rend la ligne (même parade que .fi-heroX). */
.fi-cop__gate > :not(.fi-wash) {
	inline-size: 100%;
	margin-block: 0;
}

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

.fi-cop__gate > .fi-cop__switch {
	margin-block-start: clamp(1.25rem, 3svh, 2.5rem);
}

/* ── La grille ──────────────────────────────────────────────────────
   Trois blocs : la lettre, l'appel à l'action, le registre — dans cet
   ordre dans le document, donc au téléphone (le bouton AVANT le
   registre : dans le premier écran).

   Au-delà de 48em : lettre puis appel à gauche, registre à droite sur
   toute la hauteur. Les deux colonnes ont la même hauteur — le logo
   s'aligne sur la tête du registre, le bouton sur son dernier rang : un
   bloc net à deux bords francs, plutôt que deux colonnes centrées qui
   flottent l'une à côté de l'autre. */
.fi-fir__gate {
	display: grid;
	column-gap: clamp(1.75rem, 4.5vw, 4.5rem);
	row-gap: var(--fi-space-l);
}

.fi-fir__gate > *,
.fi-fir__lead > * {
	margin-block: 0;
}

.fi-fir__lead {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.fi-fir__lead > * {
	max-inline-size: 100%;
}

@media (min-width: 48em) {
	.fi-fir__gate {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		grid-template-rows: 1fr auto;
		grid-template-areas:
			"lead ledger"
			"go   ledger";
		row-gap: clamp(1.5rem, 5svh, 3rem);
	}

	.fi-fir__lead { grid-area: lead; }
	.fi-fir__go { grid-area: go; }
	.fi-fir__ledger { grid-area: ledger; }
}

@media (min-width: 64em) {
	.fi-fir__gate {
		grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr);
	}
}

/* ── GAUCHE · la lettre ─────────────────────────────────────────── */

/* Le logo, à la hauteur d'un en-tête et non d'une couverture : il
   partage l'écran avec tout le reste. */
.fi-fir__lead .fi-cop__logo {
	margin-block-end: var(--fi-space-s);
}

.fi-fir__lead .fi-cop__logo img {
	block-size: clamp(2.75rem, 1.9rem + 2.2vw, 3.75rem);
}

/* La ligne d'en-tête — raison sociale · implantation · fondation. Les
   capitales mono du surtitre du site, en encre de texte : ce sont des
   faits, pas une étiquette. Le séparateur est un filet de la marque,
   dessiné après chaque rang sauf le dernier : à la coupure, il ferme
   sa ligne au lieu d'ouvrir la suivante. */
.fi-fir__imprint {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	row-gap: var(--fi-space-3xs);
	margin-block: 0 clamp(1.5rem, 5svh, 3rem);
	padding: 0;
	list-style: none;
	font-family: var(--fi-font-mono);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fi-color-text);
}

.fi-fir__imprint li {
	display: inline-flex;
	align-items: center;
}

.fi-fir__imprint li:not(:last-child)::after {
	content: "";
	inline-size: 1.25rem;
	block-size: 1px;
	margin-inline: var(--fi-space-xs);
	background: var(--fi-c);
}

.fi-fir__imprintk {
	margin-inline-end: 0.5em;
	color: var(--fi-color-muted);
}

/* Le titre du client sur UNE ligne dès 64em — « Our parent company »
   tient dans la colonne à cette taille, mesuré de 1024 à 1440. */
.fi-cop .fi-fir__h1 {
	margin-block: 0 clamp(1rem, 3svh, 1.75rem);
	max-inline-size: none;
	font-size: clamp(2.5rem, 1.35rem + 3.3vw, 4.25rem);
	line-height: 1.02;
	text-wrap: balance;
}

/* Au bureau, le titre ne se coupe qu'entre les mots : « Unsere /
   Muttergesellschaft » plutôt que « Mutter- / gesellschaft », le mot
   long tenant seul dans la colonne. En deçà de 64em la colonne est trop
   étroite pour lui, et la césure allemande du site reprend la main. */
@media (min-width: 64em) {
	.fi-cop .fi-fir__h1 {
		-webkit-hyphens: manual;
		hyphens: manual;
	}
}

.fi-fir__lead .fi-fir__lede {
	max-inline-size: 54ch;
	margin-block: 0;
}

/* ── La porte : le bouton vers le vrai site ─────────────────────────
   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. Ici, seulement sa place : la zone « go » de la grille, au-delà
   de 48em (plus haut). */

/* ── DROITE · le registre des normes ────────────────────────────────
   La figure de signature de la fiche (docs/53 §7), condensée : un rang
   par norme — le numéro en grand, comme gravé sur une plaque, puis
   l'organisme, puis ce que la norme permet de faire. Un filet vertical
   de la marque court le long des numéros : la marge d'un registre.

   Le panneau est une feuille dépolie posée sur le fond « wash » : le
   halo teinté se devine à travers, le texte reste sur un fond mesuré
   (surface à 86 % — l'audit compose les couches jusqu'à l'aplat). */
.fi-fir__ledger {
	--fi-fir-no: 1.5rem;
	display: flex;
	flex-direction: column;
	padding: clamp(1.1rem, 2.2vw, 1.75rem) clamp(1.1rem, 2.2vw, 1.75rem) clamp(0.4rem, 1vw, 0.6rem);
	border: 1px solid color-mix(in srgb, var(--fi-c) 16%, var(--fi-color-line));
	border-radius: var(--fi-radius-m);
	background: color-mix(in srgb, var(--fi-color-surface) 86%, transparent);
	box-shadow: 0 1.75rem 3.5rem -2.5rem color-mix(in srgb, var(--fi-c-ink) 45%, transparent);
	-webkit-backdrop-filter: blur(0.875rem);
	backdrop-filter: blur(0.875rem);
}

.fi-fir__ledger > * {
	margin: 0;
}

.fi-fir__lhead {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--fi-space-3xs) var(--fi-space-s);
	padding-block-end: var(--fi-space-xs);
	border-block-end: 2px solid var(--fi-c);
}

.fi-fir__lhead > * {
	margin: 0;
}

/* Un h2 composé en capitales mono : c'est le titre de la figure, pas un
   titre de section. `.fi-cop h2` du socle pèse 0-1-1, d'où la double
   classe. */
.fi-cop .fi-fir__lh,
.fi-fir__lholder {
	font-family: var(--fi-font-mono);
	font-size: 0.6875rem;
	line-height: 1.5;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.fi-cop .fi-fir__lh {
	margin: 0;
	font-weight: 600;
	color: var(--fi-color-ink);
}

.fi-fir__lholder {
	font-weight: 500;
	color: var(--fi-color-muted);
}

/* Les rangs gardent leur hauteur propre ; quand la colonne voisine est
   plus haute que le registre, l'excédent se partage ÉGALEMENT entre eux
   (flex-grow) — pas « 1fr » en grille, qui donnait aux cinq la hauteur
   du plus haut : +110 px en allemand à 1024, mesuré. */
.fi-fir__lrows {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* La marge du registre : un filet du bleu clair de la marque entre les
   numéros et les normes, sur toute la hauteur de la liste. */
.fi-fir__lrows::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: calc(var(--fi-fir-no) + var(--fi-space-s) / 2);
	inline-size: 1px;
	background: var(--fi-c-light);
}

.fi-fir__lrow {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: var(--fi-fir-no) minmax(0, 1fr);
	align-content: center;
	column-gap: var(--fi-space-s);
	row-gap: 0.2rem;
	padding-block: clamp(0.55rem, 1.8svh, 1.15rem);
}

.fi-fir__lrow + .fi-fir__lrow {
	border-block-start: 1px solid var(--fi-color-line);
}

.fi-fir__lrow > * {
	grid-column: 2;
	margin: 0;
}

/* Le numéro de rang se pose sur la ligne de base de la norme : les deux
   enfants du premier rang de la grille s'alignent en « baseline ». */
.fi-fir__lrow > .fi-fir__lno {
	grid-column: 1;
	grid-row: 1;
	align-self: baseline;
	font-family: var(--fi-font-mono);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1;
	color: var(--fi-c-ink);
}

/* La norme et son organisme sur une ligne quand il y a la place, le
   second sous la première sinon — sans point de rupture : c'est la
   largeur réelle du rang qui décide, rang par rang. */
.fi-fir__ltop {
	grid-row: 1;
	align-self: baseline;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	column-gap: var(--fi-space-s);
	row-gap: 0.1rem;
}

.fi-fir__ltop > * {
	margin: 0;
}

.fi-fir__lstd {
	font-family: var(--fi-font-display);
	line-height: 1.1;
	color: var(--fi-color-ink);
	white-space: nowrap;
}

.fi-fir__lpre {
	margin-inline-end: 0.15em;
	font-family: var(--fi-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--fi-color-muted);
}

.fi-fir__lnum {
	font-size: clamp(1.35rem, 1.05rem + 0.75vw, 1.75rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.fi-fir__led {
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--fi-color-muted);
}

.fi-fir__lmeta {
	font-family: var(--fi-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fi-color-muted);
}

.fi-fir__lrow > .fi-fir__lcan {
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--fi-color-text);
	text-wrap: pretty;
}

/* ── Écrans bas ─────────────────────────────────────────────────────
   1280×800, 1024×768 : la hauteur utile tombe à 700 px et moins, et la
   porte doit y rester entière avec la barre des sociétés. On resserre
   les réserves et l'échelle du titre — jamais le texte courant. */
@media (min-width: 48em) and (max-height: 52em) {
	.fi-fir__lead .fi-cop__logo img {
		block-size: 2.75rem;
	}

	.fi-fir__lead .fi-cop__logo {
		margin-block-end: var(--fi-space-xs);
	}

	.fi-fir__imprint {
		margin-block-end: var(--fi-space-m);
	}

	.fi-fir__imprint {
		font-size: 0.6875rem;
		letter-spacing: 0.08em;
	}

	.fi-cop .fi-fir__h1 {
		margin-block-end: var(--fi-space-s);
		font-size: clamp(2.4rem, 0.5rem + 3.2vw, 3.6rem);
	}

	.fi-fir__gate {
		row-gap: var(--fi-space-l);
	}

	.fi-cop__open.fi-cop__gate {
		padding-block-start: var(--fi-space-m);
	}

	.fi-cop__gate > .fi-cop__switch {
		margin-block-start: var(--fi-space-m);
	}

	.fi-fir__ledger {
		padding-block-start: var(--fi-space-s);
	}

	.fi-fir__lrow {
		padding-block: var(--fi-space-2xs);
	}
}

/* Tablette et téléphone : la ligne d'en-tête au rang du surtitre du
   site, pour que raison sociale et implantation tiennent ensemble. */
@media (max-width: 63.99em) {
	.fi-fir__imprint {
		font-size: 0.6875rem;
		letter-spacing: 0.08em;
	}
}

/* Téléphone : le registre se resserre — c'est la partie de la page qui
   se lit après le bouton, elle ne doit pas en faire deux écrans. */
@media (max-width: 47.99em) {
	.fi-fir__ledger {
		padding: var(--fi-space-s) var(--fi-space-s) var(--fi-space-3xs);
	}

	.fi-fir__lrow {
		padding-block: var(--fi-space-2xs);
	}
}

@media (max-width: 30em) {
	.fi-fir__imprint li:not(:last-child)::after {
		inline-size: 0.875rem;
		margin-inline: var(--fi-space-2xs);
	}
}

/* L'entrée des rangs, l'un après l'autre, quand le registre se révèle
   (.fi-rv → .is-in, ui.js). Rien sans JavaScript ni en mouvement réduit :
   les rangs sont alors simplement là. */
@media (prefers-reduced-motion: no-preference) {
	html:not(.no-js) .fi-fir__ledger.fi-rv .fi-fir__lrow {
		opacity: 0;
		transform: translateY(0.5rem);
		transition:
			opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
			transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
		transition-delay: calc(0.2s + var(--fi-fir-i, 0) * 0.07s);
	}

	html:not(.no-js) .fi-fir__ledger.fi-rv.is-in .fi-fir__lrow {
		opacity: 1;
		transform: none;
	}
}