/* ═══════════════════════════════════════════════════════════════════
   IVDias — la feuille de SA porte, et rien d'autre.

   Chargée par-dessus css/company.css, uniquement sur
   /our-companies/ivdias/ (voir inc/company.php).

   ── 27/10/2026 · LA FICHE DEVIENT UNE PORTE (docs/79-fiches-porte.md) ──
   Un écran. La feuille est ÉLAGUÉE : les règles du sélecteur à onglets,
   des phases, des domaines, des livrables et de la bande sombre sont
   parties avec leurs bandes (git en garde la trace). Il ne reste que
   la porte : .fi-cop__gate et ce qu'elle contient.

   ── La composition ──────────────────────────────────────────────────
   Une FAÇADE. En haut, ce que fait la société — logo, titre, chapô à
   gauche ; trois repères et le bouton à droite, comme le cartouche d'une
   fiche technique. En pied, les QUATRE PORTES côte à côte, debout sur le
   filet de la barre des sociétés comme des portes sur un trottoir : la
   barre est le sol commun des cinq fiches, les portes sont propres à
   celle-ci. Chaque porte a son linteau (le filet de marque), ses deux
   montants (les filets de séparation) et pas de seuil : elle est ouverte
   sur la rue. Au survol, le vantail pivote sur ses gonds.

   Ce qui se lit avant d'être lu : quatre entrées numérotées, et aucune
   n'est « la première » à franchir — c'est l'angle d'IVDias depuis le
   01/09 (« on entre par où on veut »), et la phrase du client au-dessus
   des portes le dit : « We can join you at any of the four stages. »

   ⚠️ AUCUNE VALEUR CHROMATIQUE, AUCUN PIXEL EN DUR pour ce que couvre
   un jeton. La brique arrive par --fi-c / --fi-c-ink / --fi-c-light,
   imprimés en ligne par le socle depuis packages/tokens. --fi-c ne sert
   QU'aux filets (linteaux) ; tout texte de marque passe par --fi-c-ink
   (7.12:1 sur la surface). --fi-c-light ne fait que teinter les vantaux,
   jamais un texte.
   ═══════════════════════════════════════════════════════════════════ */

/* ── La bande ─────────────────────────────────────────────────────────
   Hauteur : celle du hero d'accueil (docs/79 § 3), l'écran moins l'en-tête
   mesuré par ui.js. Colonne flexible : le contenu prend la place, la barre
   des sociétés tombe en pied.

   Les réserves verticales sont en « svh » bornés : sur un écran bas
   (1280×800, 1024×768) la porte se resserre d'elle-même au lieu de passer
   sous le pli ; sur un grand écran, l'air va entre le haut et les portes. */
.fi-cop__gate {
	display: flex;
	flex-direction: column;
	min-block-size: calc(100svh - var(--fi-header-h));
	padding-block: clamp(1rem, 2.6svh, 3rem) clamp(0.25rem, 1.5svh, 1rem);
}

/* La mise en page « constrained » de WordPress pose « margin-inline: auto »
   sur chaque enfant direct : en colonne flexible, un tel enfant se réduit à
   son contenu au lieu de s'étirer. « inline-size: 100% » lui rend la ligne,
   le max-width de WordPress la replafonne à 1240px. Le fond « wash » est
   absolu et garde ses propres règles (style.css). */
.fi-cop__gate > *:not(.fi-wash) {
	inline-size: 100%;
	margin-block: 0;
}

/* Les groupes de la porte n'ont pas de marge de flux : les écarts sont
   ceux des grilles, une seule source. */
.fi-ivd > *,
.fi-ivd__top > *,
.fi-ivd__intro > *,
.fi-ivd__act > *,
.fi-ivd__entry > * {
	margin-block: 0;
}

/* ── La grille ────────────────────────────────────────────────────────
   Deux rangs : le HAUT de la façade (.fi-ivd__top), puis les PORTES. Le
   premier prend la place libre et y centre son contenu : sur un grand
   écran l'air se partage au-dessus et au-dessous du titre, les portes
   restent posées sur la barre des sociétés.

   ⚠️ Pas de rangs « vides » en fractions pour centrer : pendant le calcul
   intrinsèque de la grille, un rang 1fr vide prend la taille du plus grand
   plancher de ses voisins en fr — mesuré 40px de blanc sous l'en-tête à
   1280×800, alors même que la porte débordait de 24px. Un seul rang en
   fraction, qui porte du contenu, n'a pas ce défaut.

   Téléphone : une colonne, dans l'ordre du document — qui, quoi, les
   repères, le BOUTON, puis les portes. Le bouton passe avant les portes
   pour être vu sans défiler à 390×844 (docs/79 § 9). */
.fi-ivd {
	flex: 1 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr) auto;
	row-gap: clamp(1.25rem, 2.8svh, 2.5rem);
}

.fi-ivd__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-self: center;
	row-gap: clamp(1.25rem, 2.8svh, 2.5rem);
}

@media (min-width: 62em) {
	.fi-ivd {
		row-gap: clamp(1.5rem, 5svh, 3.5rem);
	}

	/* Le cartouche a une LARGEUR FIXE (24rem) et le titre prend le reste :
	   en fractions, la colonne de droite tombait à 308px à 1024, le règlement
	   et les étapes y passaient sur deux et trois lignes, et le cartouche
	   dépassait le titre de 62px — la porte sortait de l'écran.

	   Les deux colonnes se calent sur leur BAS : la dernière ligne du chapô
	   et le bas de la note tombent à la même hauteur. */
	.fi-ivd__top {
		grid-template-columns: minmax(0, 1fr) 24rem;
		align-items: end;
		column-gap: clamp(2.5rem, 5vw, 5rem);
	}
}

/* ── Qui, quoi ────────────────────────────────────────────────────────
   Le logo est réglé par sa HAUTEUR (socle) : on le ramène à l'échelle
   d'une porte d'un écran. */
.fi-ivd__intro .fi-cop__logo {
	margin-block-end: clamp(0.85rem, 2svh, 1.75rem);
}

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

/* Le titre du client fait treize mots. Le socle le compose pour quatre à
   sept (20ch, 4.4rem). Ici la mesure s'ouvre à la colonne — 30ch — et le
   corps plafonne à 3.2rem : trois lignes de 1024 à 1440, cinq à 390. Le
   « balance » évite « kits » seul sous trois lignes pleines au téléphone. */
.fi-ivd .fi-cop__h1 {
	max-inline-size: 30ch;
	margin-block: 0 clamp(0.9rem, 2.2svh, 1.5rem);
	font-size: clamp(1.75rem, 0.95rem + 2.4vw, 3.2rem);
	line-height: 1.04;
	text-wrap: balance;
}

/* Au bureau le corps suit la colonne du titre, et non la fenêtre seule :
   3.45vw tient trois lignes de 992 à 1440 (35px à 1024, 50px à 1440). */
@media (min-width: 62em) {
	.fi-ivd .fi-cop__h1 {
		font-size: clamp(2.1rem, 3.45vw, 3.2rem);
	}

	/* L'allemand compte cinq signes de plus et des mots plus longs
	   (« Dx-Technologien ») : au corps anglais il passait à quatre lignes de
	   1024 à 1440. Un cran plus bas, il en garde trois. Même idiome que les
	   boutons allemands de style.css. */
	:root:not(:lang(en)) .fi-ivd .fi-cop__h1 {
		font-size: clamp(2rem, 3.05vw, 2.8rem);
	}
}

.fi-ivd .fi-lede {
	max-inline-size: 54ch;
	margin-block: 0;
}

/* ── Le cartouche : trois repères ─────────────────────────────────────
   Une fiche technique, pas une grille de cartes : clé en chasse-fixe à
   gauche, valeur à droite, un filet entre les rangs. Même lettrage que
   .fi-idcard (style.css) — clé 0.625rem, la plus petite du site, valeur
   0.9375rem / 500 — pour qu'un visiteur qui vient des fiches d'étude
   reconnaisse le registre, sans en reprendre la mise en colonnes. */
.fi-ivd__facts {
	display: grid;
	margin: 0;
	border-block: 1px solid var(--fi-color-line);
}

/* 6.5rem de clé : « ARBEITET NACH », la plus longue en allemand, y tient
   sur une ligne (94px mesurés au lettrage du site). */
.fi-ivd__fact {
	display: grid;
	grid-template-columns: 6.5rem minmax(0, 1fr);
	column-gap: var(--fi-space-s);
	align-items: baseline;
	padding-block: clamp(0.55rem, 1.4svh, 0.8rem);
}

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

.fi-ivd__fact dt {
	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);
}

.fi-ivd__fact dd {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.45;
	color: var(--fi-color-ink);
	text-wrap: pretty;
	/* Une valeur de registre ne se coupe pas dans un mot : l'allemand passait
	   « Ver-markten » à la ligne (768, /de/). */
	-webkit-hyphens: manual;
	hyphens: manual;
}

/* ── 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. Le même que sur les quatre autres fiches, « comme si le site
   existait » : « Visit IVDias » ; sa sous-ligne et sa flèche suivent
   l'annuaire. Pas de note dessous (docs/79 § 5). Ici, seulement sa place. */
.fi-ivd__cta {
	margin-block-start: clamp(0.85rem, 2svh, 1.5rem);
}

/* Tablette : empilés, les repères (trois rangs) puis le bouton et sa note
   faisaient sortir la porte de 107px à 768×1024. Les repères passent en UNE
   rangée de trois colonnes, clé au-dessus de la valeur — la disposition de
   .fi-idcard sur les fiches d'étude. */
@media (min-width: 40em) and (max-width: 61.999em) {
	.fi-ivd__facts {
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
	}

	.fi-ivd__fact {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0.35rem;
		align-content: start;
		padding-inline: var(--fi-space-s);
	}

	.fi-ivd__fact:first-child {
		padding-inline-start: 0;
	}

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

/* ── Les quatre portes ────────────────────────────────────────────────
   La tête : le titre du client à gauche, la phrase qui invite à choisir
   à droite, sur la même ligne au bureau. */
.fi-ivd__doorshead {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	column-gap: var(--fi-space-l);
	row-gap: var(--fi-space-3xs);
	margin-block-end: clamp(0.75rem, 1.8svh, 1.1rem);
}

.fi-cop .fi-ivd__doorsh {
	margin: 0;
	font-size: var(--fi-size-step-2);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.022em;
	text-wrap: balance;
}

.fi-ivd__doorshint {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--fi-color-muted);
	text-wrap: pretty;
}

.fi-ivd__doors {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fi-ivd__doorli {
	display: flex;
	margin: 0;
}

/* Une porte. Téléphone : un rang — numéro, libellé, flèche — sous un filet,
   le premier rang portant le linteau de marque. Les cibles font 3.5rem
   (56px), au-dessus des 44 du projet : un libellé de deux lignes y respire. */
.fi-ivd__door {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	gap: var(--fi-space-s);
	inline-size: 100%;
	min-block-size: 3.5rem;
	padding-block: var(--fi-space-xs);
	padding-inline: var(--fi-space-xs);
	border-block-start: 1px solid var(--fi-color-line);
	color: var(--fi-color-ink);
	text-decoration: none;
	transition: color 0.2s ease;
}

.fi-ivd__doorli:first-child .fi-ivd__door {
	border-block-start: 2px solid var(--fi-c);
}

.fi-ivd__doornum {
	flex: none;
	min-inline-size: 2ch;
	font-family: var(--fi-font-mono);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
	color: var(--fi-c-ink);
}

.fi-ivd__doorlab {
	flex: 1 1 auto;
	min-inline-size: 0;
	font-family: var(--fi-font-display);
	font-size: var(--fi-size-step-0);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.fi-ivd__door :is(.fi-arrow, .fi-cop__goout) {
	flex: none;
	inline-size: 1rem;
	block-size: 1rem;
	color: var(--fi-c-ink);
	transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

/* Le jour où l'annuaire publie le site, les portes y mènent avec le bouton
   et prennent sa flèche sortante (↗, socle) : elle part en diagonale. */
.fi-ivd__door:hover .fi-cop__goout,
.fi-ivd__door:focus-visible .fi-cop__goout {
	transform: translate(2px, -2px);
}

.fi-ivd__door:focus-visible {
	outline: 2px solid var(--fi-color-brand);
	outline-offset: -2px;
}

/* Le vantail : un aplat à peine teinté, pendu à son montant de départ. Il
   est derrière le texte (z-index -1, la porte isole son empilement), et
   pivote sur ses gonds au survol. Décor seul : le texte ne change ni de
   place ni de couleur, le contraste est mesuré sur la surface. */
.fi-ivd__door::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: transparent;
	transform-origin: 0 50%;
	transition:
		transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
		background-color 0.3s ease;
}

.fi-ivd__door:hover::before,
.fi-ivd__door:focus-visible::before {
	background-color: color-mix(in srgb, var(--fi-c-light) 16%, var(--fi-color-surface));
}

/* Sous 62em, les rangées des portes et les écarts se resserrent d'un cran :
   à 768×1024, en allemand, la barre des sociétés passe sur deux lignes et la
   note sur quatre à côté du bouton — la porte sortait de 9px. Les cibles
   restent à 52px, au-dessus des 44 du projet. */
@media (max-width: 61.999em) {
	.fi-ivd,
	.fi-ivd__top {
		row-gap: clamp(1.25rem, 2.3svh, 2.5rem);
	}

	.fi-ivd__door {
		min-block-size: 3.25rem;
		padding-block: 0.6rem;
	}
}

/* Tablette : deux portes par rangée. */
@media (min-width: 40em) {
	.fi-ivd__doors {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--fi-space-m);
	}

	.fi-ivd__doorli:nth-child(-n + 2) .fi-ivd__door {
		border-block-start: 2px solid var(--fi-c);
	}
}

/* ── Bureau : la façade ───────────────────────────────────────────────
   Quatre portes côte à côte. Chacune : un LINTEAU de marque (2px, --fi-c),
   deux MONTANTS (filets), pas de seuil — elle se tient sur le filet de la
   barre des sociétés, juste dessous. Le numéro en haut comme une plaque,
   le libellé en bas, à hauteur de main ; la flèche au coin.

   Le vantail est un aplat teinté qui ferme la porte ; au survol il pivote
   sur ses gonds (perspective, 32°) et découvre un intérieur un ton plus
   chaud. Mouvement réduit : pas de pivot, seulement le ton. */
@media (min-width: 62em) {
	.fi-ivd__doors {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: 0;
		border-inline-end: 1px solid var(--fi-color-line);
	}

	.fi-ivd__door,
	.fi-ivd__doorli:first-child .fi-ivd__door,
	.fi-ivd__doorli:nth-child(-n + 2) .fi-ivd__door {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-rows: auto 1fr;
		align-items: start;
		gap: var(--fi-space-xs) var(--fi-space-s);
		min-block-size: clamp(7.25rem, 17svh, 10.5rem);
		padding-block: clamp(0.85rem, 1.8svh, 1.15rem) clamp(1rem, 2.2svh, 1.5rem);
		padding-inline: clamp(1rem, 1.6vw, 1.5rem);
		border-block-start: 2px solid var(--fi-c);
		border-inline-start: 1px solid var(--fi-color-line);
		/* Le vantail ne sort jamais de son cadre, quel que soit l'angle. */
		overflow: hidden;
		/* L'intérieur, que le vantail découvre en pivotant. */
		background: color-mix(in srgb, var(--fi-c-light) 34%, var(--fi-color-surface));
	}

	.fi-ivd__doornum {
		grid-column: 1;
		grid-row: 1;
		font-size: 0.8125rem;
	}

	.fi-ivd__door :is(.fi-arrow, .fi-cop__goout) {
		grid-column: 2;
		grid-row: 1;
		margin-block-start: 0.1rem;
	}

	.fi-ivd__doorlab {
		grid-column: 1 / -1;
		grid-row: 2;
		align-self: end;
		max-inline-size: 18ch;
		font-size: clamp(1.05rem, 0.75rem + 0.6vw, 1.3rem);
		line-height: 1.2;
		letter-spacing: -0.018em;
	}

	/* Le vantail fermé : la surface, à peine voilée de brique — il couvre
	   l'intérieur tant qu'on ne le pousse pas. Sa POIGNÉE est un trait de
	   brique au bord libre, peint DANS le fond du vantail : elle pivote avec
	   lui. C'est elle qui fait lire une porte là où il n'y aurait qu'une
	   carte ; un filet de 2px, la seule forme que la charte laisse à --fi-c.
	   Posée à 38 % de la hauteur et non au milieu : un libellé de trois lignes
	   (« Ein CE-gekennzeichnetes Kit… », 1024, /de/) montait jusqu'à elle.
	   ⚠️ Gonds à gauche, poignée à droite : écrit pour une langue de gauche à
	   droite (anglais, allemand). Une langue RTL inverserait les deux. */
	.fi-ivd__door::before {
		background:
			linear-gradient(var(--fi-c), var(--fi-c)) no-repeat
				right clamp(0.85rem, 1.2vw, 1.15rem) top 38% / 2px clamp(1.4rem, 3.4svh, 2rem),
			color-mix(in srgb, var(--fi-c-light) 9%, var(--fi-color-surface));
	}

	.fi-ivd__door:hover::before,
	.fi-ivd__door:focus-visible::before {
		/* Angle POSITIF : le bord libre RECULE dans l'embrasure. Négatif, le
		   vantail venait vers le visiteur et débordait sur le titre et sur la
		   barre des sociétés (mesuré au survol, 1440). */
		transform: perspective(42rem) rotateY(34deg);
	}
}

/* ── La barre des sociétés ────────────────────────────────────────────
   Fournie par le socle, placée ici : collée sous les portes, dont elle est
   le sol. Aucune règle de dessin — elle ne se restyle pas. */
.fi-cop__gate > .fi-cop__switch {
	margin-block-start: 0;
}

/* ── Entrée ───────────────────────────────────────────────────────────
   Les trois groupes arrivent l'un après l'autre (.fi-rv, style.css). */
.fi-ivd__act.fi-rv   { transition-delay: 0.12s; }
.fi-ivd__entry.fi-rv { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
	.fi-ivd__act.fi-rv,
	.fi-ivd__entry.fi-rv {
		transition-delay: 0s;
	}

	.fi-ivd__door,
	.fi-ivd__door::before,
	.fi-ivd__door :is(.fi-arrow, .fi-cop__goout) {
		transition: none;
	}

	/* Sans pivot, le survol se dit au ton : le vantail s'efface et laisse
	   voir l'intérieur, un cran plus chaud. */
	.fi-ivd__door:hover::before,
	.fi-ivd__door:focus-visible::before {
		transform: none;
		opacity: 0.35;
	}

	.fi-ivd__door:hover :is(.fi-arrow, .fi-cop__goout),
	.fi-ivd__door:focus-visible :is(.fi-arrow, .fi-cop__goout) {
		transform: none;
	}
}