/* ═══════════════════════════════════════════════════════════════════
   FICHE AMONETA — la PORTE de /our-companies/amoneta/ (27/10/2026)

   Chargée par inc/company.php PAR-DESSUS css/company.css, et sur cette
   seule page. Contrat : docs/79-fiches-porte.md. La fiche tient en un
   écran : une seule bande, et cette feuille ne porte que sa composition.

     .fi-amogate          la bande (aussi .fi-cop__open .fi-cop__gate)
     .fi-amogate__say     colonne du dire : logo, h1, deux phrases, bouton
     .fi-amogate__go      la place du bouton commun — [firalis_co_go]
     .fi-amogate__stairs  l'escalier de qualification — [firalis_amo_stairs]

   La barre des cinq sociétés ([firalis_co_switch]) et le bouton
   ([firalis_co_go], .fi-cop__go*) appartiennent au socle : on ne fait que
   les placer.

   Les règles de l'ancienne fiche longue (tampon, escalier en rangs, fiche
   d'APO-Easy®, cibles, pipeline, renvois d'étude, photographie du kit)
   sont RETIRÉES avec leurs composants : elles sont dans git.

   ⚠️ AUCUNE VALEUR CHROMATIQUE. La couleur vient du pont posé sur .fi-cop
   par inc/company.php : --fi-c (la marque, filets et pastilles seulement),
   --fi-c-ink (le seul texte de marque admis, 6.01:1 sur surface),
   --fi-c-light (le second ton, décor). Le pas de l'escalier et la hauteur
   d'une marche sont des longueurs de composition, pas des jetons.

   ⚠️ Plancher de 15 px sur toute PHRASE. Le 0.6875rem (11 px) ne sert
   qu'aux LIBELLÉS mono en capitales — rang de .fi-eyebrow.
   ═══════════════════════════════════════════════════════════════════ */

/* ── La bande : un écran ─────────────────────────────────────────────
   Même règle de hauteur que le hero d'accueil (style.css, .fi-heroX) :
   la bande et l'en-tête collant remplissent l'écran, --fi-header-h étant
   MESURÉE par ui.js. C'est une hauteur MINIMALE : sur un écran trop bas
   pour le contenu, le contenu gagne.

   Colonne flexible : la grille prend la hauteur libre et s'y centre, la
   barre des sociétés tombe au pied. ⚠️ En colonne flexible, un enfant qui
   porte « margin-inline: auto » — ce que la mise en page « constrained »
   pose sur TOUS les enfants directs — se réduit à son contenu : d'où
   « inline-size: 100% », que le max-width de WordPress replafonne à 1240.
   Le fond « wash » (.fi-wash, absolu) est écarté de la règle. */
.fi-amogate {
	/* La hauteur d'une marche de l'escalier : bornée par la hauteur ET la
	   largeur de l'écran — c'est elle qui fait tenir la porte en un écran à
	   768 × 1024 comme à 1280 × 800. */
	--fi-amo-u: clamp(2.75rem, min(9svh, 6.2vw), 5.75rem);
	display: flex;
	flex-direction: column;
	min-block-size: calc(100svh - var(--fi-header-h));
	padding-block: clamp(1.25rem, 3.6svh, 2.75rem) 0;
}

.fi-amogate > :not(.fi-wash) {
	inline-size: 100%;
}

.fi-amogate > .fi-cop__switch {
	margin-block: auto 0;
}

.fi-amogate__grid {
	flex: 1 0 auto;
	display: grid;
	gap: clamp(1.75rem, 4.5svh, 3rem);
	align-content: center;
	padding-block-end: clamp(1.5rem, 4svh, 3rem);
}

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

/* Deux colonnes dès 64em. Entre 64 et 80em la colonne du dire est la plus
   large : le bouton et le lien de contact doivent y tenir sur une ligne, et
   l'escalier y prend sa disposition en rangs. Au-delà, l'escalier passe en
   marches côte à côte et réclame la largeur (≥ 37rem, voir § 3). */
@media (min-width: 64em) {
	.fi-amogate__grid {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
		column-gap: clamp(2.5rem, 5.5vw, 5rem);
		/* Les deux colonnes partagent leur LIGNE DE SOL : le pied de l'escalier
		   tombe au ras du bouton. */
		align-items: end;
	}
}

@media (min-width: 80em) {
	.fi-amogate__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
	}
}

/* ── 1 · Le dire ─────────────────────────────────────────────────────── */

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

/* Le logo, plus bas que sur la fiche longue : il annonce, il ne titre pas. */
.fi-amogate .fi-cop__logo {
	margin-block: 0 clamp(1rem, 3svh, 1.9rem);
}

.fi-amogate .fi-cop__logo img {
	block-size: clamp(2.5rem, 5.2svh, 3.6rem);
}

.fi-amogate__h1 {
	margin-block: 0 clamp(1rem, 2.8svh, 1.75rem);
	max-inline-size: 13ch;
	/* Le corps suit la LARGEUR et la HAUTEUR : sur un écran bas, le titre
	   rend la place que la porte n'a pas. */
	font-size: clamp(2.4rem, min(1rem + 4.2vw, 8.2svh), 4.6rem);
	line-height: 1;
	letter-spacing: -0.045em;
	color: var(--fi-color-ink);
	text-wrap: balance;
}

/* ⚠️ Langues autres que l'anglais : « Von der Entdeckung » fait 18 signes
   contre 14 pour « From discovery ». Au corps anglais, le titre allemand
   passait sur TROIS lignes à toutes les largeurs (mesuré à 768 et 1440) et
   repoussait le bas de la porte de 51px sous la ligne de flottaison à
   768 × 1024. Le corps est recalé pour que la première ligne tienne. */
:root:not(:lang(en)) .fi-amogate__h1 {
	max-inline-size: 19ch;
	font-size: clamp(2.1rem, min(0.6rem + 3.4vw, 7svh), 3.75rem);
}

.fi-amogate .fi-amogate__lede {
	margin-block: 0 clamp(0.85rem, 2.2svh, 1.25rem);
	max-inline-size: 44ch;
	font-size: clamp(1.0625rem, 0.98rem + 0.3vw, 1.1875rem);
	line-height: 1.55;
	color: var(--fi-color-text);
}

/* La PREUVE : la phrase de Lucas sur l'approbation, posée comme un relevé —
   un filet de marque à gauche, le corps courant, l'encre adoucie. */
.fi-amogate__proof {
	max-inline-size: 46ch;
	margin-block: 0 clamp(1.5rem, 4svh, 2.5rem);
	padding-inline-start: var(--fi-space-s);
	border-inline-start: 2px solid var(--fi-c);
	font-size: 1rem;
	line-height: 1.55;
	color: var(--fi-color-muted);
	text-wrap: pretty;
}

/* ── 3 · L'escalier de qualification ─────────────────────────────────
   La figure de signature, condensée. Une liste ordonnée 01 → 04, DESSINÉE
   de bas en haut. Deux dispositions selon la place dont la figure dispose
   (requête de conteneur, pas d'écran : c'est la colonne qui décide) :

   — ÉTROITE (défaut) : quatre rangs empilés, 04 en haut, chacun décalé d'un
     pas de plus vers la droite. Le profil gauche monte en escalier, la
     mesure reste pleine pour les libellés allemands ;
   — LARGE (≥ 37rem) : quatre marches côte à côte, chacune haute de son RANG
     (01 = une marche, 04 = quatre). L'escalier se lit d'un coup d'œil.

   La géométrie n'encode que l'ORDRE (voir inc/company-amoneta.php) : la
   hauteur d'une marche est un rang, jamais une mesure.

   Le contre-marche et le giron sont des FILETS de marque (--fi-c) ; le
   remplissage, un voile du second ton (--fi-c-light) qui s'épaissit à
   chaque marche — un décor, posé sous du texte en encre. */
.fi-amogate__stairs {
	position: relative;
	container-type: inline-size;
	margin: 0;
}

/* La tête de la figure : le surtitre et le titre du pipeline. */
.fi-amogate__fighead {
	margin-block-end: var(--fi-space-m);
}

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

.fi-amogate__figlab {
	display: flex;
	align-items: center;
	gap: var(--fi-space-xs);
	margin-block-end: var(--fi-space-2xs);
	font-family: var(--fi-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--fi-color-ink);
}

.fi-amogate__figlab::before {
	content: "";
	flex: none;
	inline-size: 1.7rem;
	block-size: 2px;
	background: var(--fi-c);
}

/* Un titre de légende, pas de section : il ne dispute rien au h1. */
.fi-cop .fi-amogate__figt {
	max-inline-size: 16ch;
	font-family: var(--fi-font-display);
	font-size: clamp(1.25rem, 1rem + 0.7vw, 1.6rem);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.025em;
	color: var(--fi-color-ink);
	text-wrap: balance;
}

.fi-amogate__steps {
	--fi-amo-rise: clamp(1rem, 7cqi, 2.75rem);
	display: flex;
	flex-direction: column-reverse;
	margin: 0;
	padding: 0;
	list-style: none;
	border-block-end: 1px solid var(--fi-color-line-strong);
}

.fi-amogate__step {
	box-sizing: border-box;
	margin: 0 0 0 calc((var(--fi-amo-i) - 1) * var(--fi-amo-rise));
	padding: 0.6rem 0.85rem 0.7rem;
	border-block-start: 2px solid var(--fi-c);
	border-inline-start: 1px solid var(--fi-c);
	background: linear-gradient(
		180deg,
		color-mix(in oklab, var(--fi-c-light) calc(var(--fi-amo-i) * 5% + 4%), transparent),
		color-mix(in oklab, var(--fi-c-light) calc(var(--fi-amo-i) * 2%), transparent)
	);
}

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

.fi-amogate__stepk {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 0.6rem;
}

.fi-amogate__stepn {
	font-family: var(--fi-font-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--fi-c-ink);
}

.fi-amogate__stept {
	font-family: var(--fi-font-display);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--fi-color-ink);
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: anywhere;
}

/* Un produit posé sur sa marche : le nom, puis l'ÉTAT — une pastille et la
   note sourcée (étape atteinte) ou « In progress » (étape en cours). */
.fi-amogate__prod {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 0.6rem;
	row-gap: 0.3rem;
	margin-block-start: 0.6rem;
}

.fi-amogate__pname {
	font-family: var(--fi-font-display);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--fi-color-ink);
}

.fi-amogate__pstate {
	display: inline-grid;
	grid-template-columns: auto 1fr;
	align-items: baseline;
	column-gap: 0.45rem;
	font-size: 0.9375rem;
	line-height: 1.4;
	color: var(--fi-color-muted);
}

.fi-amogate__dot {
	position: relative;
	inline-size: 0.5625rem;
	block-size: 0.5625rem;
	border-radius: 50%;
	background: var(--fi-c);
}

/* Étape EN COURS : l'état se lit comme une étiquette — capitales mono,
   pastille ouverte qui respire. Le seul mouvement continu de la page ; il
   dit « en train de se faire », et il s'arrête en mouvement réduit. */
.fi-amogate__prod--ongoing .fi-amogate__pstate {
	align-items: center;
	padding: 0.2rem 0.55rem 0.2rem 0.45rem;
	border: 1px solid var(--fi-c);
	border-radius: var(--fi-radius-pill);
	font-family: var(--fi-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--fi-c-ink);
}

.fi-amogate__prod--ongoing .fi-amogate__dot {
	background: transparent;
	box-shadow: inset 0 0 0 2px var(--fi-c);
}

.fi-amogate__prod--ongoing .fi-amogate__dot::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 1px solid var(--fi-c);
	opacity: 0;
	animation: fi-amo-breathe 2.6s ease-out infinite;
}

@keyframes fi-amo-breathe {
	0% { opacity: 0.7; transform: scale(0.6); }
	100% { opacity: 0; transform: scale(1.6); }
}

/* La marche du SOMMET tenue : un giron plus épais. */
.fi-amogate__step:last-child.fi-amogate__step--held {
	border-block-start-width: 3px;
}

/* ── Disposition LARGE : les marches côte à côte ──────────────────── */
@container (min-width: 37rem) {
	/* Le PALIER du sommet est plus large que les marches : c'est là que la
	   note sourcée du produit arrivé doit tenir en deux lignes, en anglais
	   comme en allemand (« Nach EU-IVDR CE-gekennzeichnet »). */
	.fi-amogate__steps {
		display: grid;
		grid-template-columns: repeat(calc(var(--fi-amo-n) - 1), minmax(0, 1fr)) minmax(0, 1.3fr);
		align-items: end;
	}

	/* La contre-marche n'est en couleur de marque que sur UNE hauteur de
	   marche, en tête de colonne : c'est le profil de l'escalier. Plus bas,
	   la séparation des colonnes n'est qu'un filet pâle — sans quoi quatre
	   colonnes bordées se lisent comme un histogramme. La première marche
	   monte du sol : sa contre-marche est pleine. */
	.fi-amogate__step {
		display: flex;
		flex-direction: column;
		margin: 0;
		min-block-size: calc(var(--fi-amo-i) * var(--fi-amo-u));
		padding: 0.7rem 0.65rem 0.8rem;
		border-inline-start-color: color-mix(in oklab, var(--fi-c) 22%, transparent);
		background:
			linear-gradient(var(--fi-c), var(--fi-c)) 0 0 / 1px var(--fi-amo-u) no-repeat,
			linear-gradient(
				180deg,
				color-mix(in oklab, var(--fi-c-light) calc(var(--fi-amo-i) * 5% + 4%), transparent),
				color-mix(in oklab, var(--fi-c-light) calc(var(--fi-amo-i) * 2%), transparent)
			);
		background-origin: border-box;
		/* Les marches montent de bas en haut au chargement : le dessin fait
		   le geste du titre. Découpe et non échelle — le texte ne se déforme
		   pas pendant le mouvement. */
		animation: fi-amo-rise 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
		animation-delay: calc(var(--fi-amo-i) * 90ms + 120ms);
		/* « backwards » et non « both » : la découpe ne doit PAS rester posée
		   une fois la marche montée — inset(0) rognerait tout ce qui dépasse de
		   la marche, à commencer par la photographie du kit, posée au-dessus. */
	}

	.fi-amogate__step:first-child {
		border-inline-start-color: var(--fi-c);
	}

	.fi-amogate__stepk {
		flex-direction: column;
		align-items: flex-start;
		row-gap: 0.25rem;
	}

	.fi-amogate__pname {
		font-size: 0.9375rem;
	}

	/* La tête de la figure loge dans le vide que l'escalier laisse en haut à
	   gauche, au-dessus des deux premières marches : la figure ne prend pas
	   un pixel de hauteur de plus que ses marches. */
	.fi-amogate__fighead {
		position: absolute;
		/* Calée juste au-dessus de la deuxième marche, et non en haut du
		   conteneur : sa place ne dépend plus de ce qui se dresse sur le
		   palier du sommet. */
		inset-block-end: calc(2 * var(--fi-amo-u) + var(--fi-space-m));
		inset-inline-start: 0;
		max-inline-size: calc(200% / (var(--fi-amo-n) + 0.3) - var(--fi-space-s));
		margin: 0;
	}
}

/* ── Le produit SUR sa marche : la photographie du kit ───────────────
   27/10/2026, décision de l'utilisateur : la photo n'entre que si elle a une
   vraie place. Sa place est le sommet de l'escalier — APO-Easy® est le seul
   produit arrivé en haut, et c'est son kit. La figure se DRESSE sur le giron
   de la dernière marche, de la largeur du palier, comme un objet qu'on y a
   posé : elle occupe le vide que l'escalier laisse en haut à droite, sans
   ajouter un pixel de hauteur à la porte (positionnée hors du flux).

   Elle n'existe que là où ce vide existe : marches côte à côte ET écran
   d'au moins 80em, où la colonne du dire est plus haute que l'escalier.
   Mesuré : à 768 × 1024 l'escalier est sous le bouton et la porte n'a que
   29px de réserve ; à 1024 et au téléphone l'escalier est en rangs. Cachée
   en `display: none`, l'image différée n'est pas téléchargée. */
.fi-amogate__kit {
	display: none;
	margin: 0;
}

@media (min-width: 80em) {
	@container (min-width: 37rem) {
		.fi-amogate__step--kit {
			position: relative;
		}

		.fi-amogate__kit {
			display: block;
			position: absolute;
			/* Posée SUR le giron (3px) et alignée sur la contre-marche (1px). */
			inset-block-end: calc(100% + 3px);
			inset-inline: -1px 0;
			overflow: hidden;
			border-radius: var(--fi-radius-s) var(--fi-radius-s) 0 0;
			animation: fi-amo-set 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) 1.05s backwards;
		}

		.fi-amogate__kit img {
			display: block;
			inline-size: 100%;
			block-size: auto;
			aspect-ratio: 4 / 3;
			object-fit: cover;
			/* La boîte fermée, entière, son nom et son bandeau violet : le kit
			   se reconnaît avant de se lire. Le cadre 4:3 rogne la photo
			   (1.83:1) à droite, sur le portoir de tubes. */
			object-position: 6% 50%;
			filter: var(--fi-photo-tone);
		}
	}
}

@keyframes fi-amo-set {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

@keyframes fi-amo-rise {
	from { clip-path: inset(100% 0 0 0); }
	to { clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
	.fi-amogate__step,
	.fi-amogate__kit,
	.fi-amogate__prod--ongoing .fi-amogate__dot::after {
		animation: none !important;
	}
}

/* ── Téléphone ───────────────────────────────────────────────────────
   Le bouton prend la largeur et garde sa grille (socle, .fi-cop__go). */
@media (max-width: 30em) {
	.fi-amogate__grid {
		gap: var(--fi-space-l);
	}

	.fi-amogate__step {
		padding-block: 0.5rem 0.55rem;
	}
}