/* ═══════════════════════════════════════════════════════════════════
   LA PAGE /what-we-offer/ — les services, rangés par besoin

   Chargée UNIQUEMENT sur /what-we-offer/ (voir inc/offer.php).

   ⚠️ AUCUNE VALEUR CHROMATIQUE, AUCUN ESPACEMENT EN DUR. Tout passe par
   les variables --fi-*. La page est achromatique comme le groupe : la
   couleur n'y apparaît que dans la vague de chaque société (son
   logotype) et dans le filet qui se déploie au survol d'un rang. Les
   familles alternent clair / gris (08/10) : deux SURFACES de la charte,
   jamais une teinte de société — celles-ci codent déjà les sociétés.

   Trois bandes : la tête (.fi-wwo__open), l'index (.fi-wwo__band), la
   clôture (.fi-form-band, la bande formulaire de /contact/ depuis le
   08/10 — styles partagés dans style.css, rien à écrire ici). Trois
   gabarits différents, donc aucune paire de voisines identiques
   (docs/54, A7).
   ═══════════════════════════════════════════════════════════════════ */

.fi-wwo {
	/* Réserve verticale d'une famille de besoin. Celle des sections de /team/,
	   au rem près : les deux pages sont des index en rangs sous une tête, et
	   un visiteur qui passe de l'une à l'autre doit retrouver le même souffle. */
	--fi-wwo-band: clamp(2.25rem, 4vw, 3.75rem);
	/* La colonne de l'attribution, en rang large. FIXE et non « auto » : la
	   vague et le nom de la société tombent alors à la même abscisse sur les
	   sept rangs, et la colonne des sociétés se lit d'un coup d'œil. 13.5rem
	   tient « DELIVERED BY » + la vague + « BioCellvia », le nom le plus long. */
	--fi-wwo-by: 13.5rem;
	/* La flèche de rang. Variable depuis le 10/10/2026 : le rang à deux
	   sociétés (.fi-wwo__item--multi) n'a pas de flèche à lui dans la colonne
	   des flèches — chaque société porte la sienne —, et il doit donc DÉCLARER
	   la largeur de cette colonne pour que sa colonne d'attribution tombe à la
	   même abscisse que celle des autres rangs. Voir plus bas. */
	--fi-wwo-go: 1.1rem;
	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-wwo > * {
	margin-block: 0;
}

/* ── La tête ─────────────────────────────────────────────────────────
   La bande qui reçoit le fond « wash » (figure « coins », table explicite
   de inc/wash.php).

   ⚠️ UN SEUL ÉLÉMENT DEPUIS LE 17/09 : le h1. Le client a supprimé le
   titre et le chapô, et le surtitre a pris la place du titre
   (patterns/offer.php, docs/68). La bande porte donc elle-même sa réserve
   basse — elle vivait dans .fi-wwo__lead, qui n'existe plus —, et le h1
   n'a plus de marge sous lui : il n'a plus de voisin à écarter.

   ⚠️ LES RÉSERVES SONT PLUS HAUTES QU'AVANT, pas plus basses, et c'est
   contre-intuitif. Le chapô parti, les réserves d'origine donnaient une
   tête de 219 px à 1440 — contre 373 sur /about/, 395 sur /team/, 466 sur
   /our-companies/. Deux défauts mesurés à cette hauteur :
     — la page perdait l'ouverture commune aux pages intérieures, et se
       lisait comme un index posé sous l'en-tête plutôt que comme une page ;
     — le fond « wash » n'était plus une FIGURE. Son masque s'éteint au plus
       tard au bas de la bande (style.css, .fi-wash--top) : à 219 px il
       passait en plein à 136 px du haut et la figure « coins » se réduisait
       à un aplat dégradé.
   Réglées ici à 289 px à 1440 et 172 px à 390 : sous la famille — une tête
   sans chapô n'a pas à égaler une tête qui en porte un —, et au-dessus du
   seuil où la figure disparaît.
   ─────────────────────────────────────────────────────────────────── */

.fi-wwo__open {
	position: relative;
	padding-block: clamp(4.5rem, 9vw, 7.5rem) clamp(3.5rem, 7vw, 7rem);
}

/* Même parade que .fi-team__h1 et .fi-cop__h1 : 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. */
.fi-wwo__h1 {
	margin-block: 0;
	margin-inline-start: max(0px, calc((100% - var(--fi-container-max)) / 2)) !important;
	margin-inline-end: auto !important;
	max-inline-size: 20ch;
	/* Le pas 5 : arbitré le 07/09 sur CETTE page, au rang du titre du hero. */
	font-size: var(--fi-size-step-5);
	line-height: 1.01;
	letter-spacing: -0.045em;
	color: var(--fi-color-ink);
	text-wrap: balance;
}

/* ── L'index ─────────────────────────────────────────────────────────
   Une famille par besoin, filet en tête. En large, deux colonnes : le
   besoin à gauche, fer à gauche sur la grille du site, ses services à
   droite. En étroit, le besoin coiffe ses services.

   Rien ici ne suppose un NOMBRE de familles ou de rangs : pas de
   compteur, et la seule règle de rang — l'alternance des fonds — compte
   depuis la fin et tient pour deux familles comme pour cinq. Le repli de
   inc/offer.php peut ajouter une famille, et un service peut en changer
   par une ligne de JSON.
   ─────────────────────────────────────────────────────────────────── */

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

/* En une colonne, l'écart entre le besoin et son premier service vaut
   --fi-space-l et non -m : mesuré à 768, 24 px collaient la ligne de besoin
   au titre du premier rang, et les deux se lisaient comme un seul
   paragraphe au lieu d'un intertitre suivi de sa liste. */
.fi-wwo__group {
	display: grid;
	gap: var(--fi-space-l);
	align-items: start;
	padding-block: var(--fi-wwo-band);
	border-block-start: 1px solid var(--fi-color-line);
}

/* ── L'alternance des familles (revue client du 08/10/2026) ─────────
   « Il faudrait une alternance de couleur entre les gros domaines pour
   que l'œil puisse facilement les distinguer. » Une famille sur deux
   passe sur le gris de la charte, en PLEINE LARGEUR : un aplat borné au
   conteneur de 1240 px ferait des cartes, pas des bandes.

   — Comptée depuis la FIN (:nth-last-child) : la dernière famille reste
     claire, parce que la bande qui suit — le formulaire, .fi-form-band —
     est déjà grise. Comptée depuis le début, une quatrième famille de
     repli ferait deux bandes grises collées. Avec les trois familles
     d'aujourd'hui : clair, gris, clair, puis le formulaire gris.
   — La pleine largeur est une OMBRE PORTÉE de 100vmax, rognée en haut et
     en bas par clip-path : elle sort du conteneur sans élargir la page (une
     ombre ne compte pas dans le défilement horizontal) et sans toucher au
     balisage constrained du groupe parent.
   — L'aplat est sur la `<section>`, et c'est pourquoi la révélation au
     défilement (.fi-rv) est posée sur sa tête et sa liste (inc/offer.php) :
     un fond qui glisse de 14 px et s'allume ne se lit pas comme une bande.
   — Le filet de tête ne sert plus qu'à la PREMIÈRE famille quand elle est
     claire : il la sépare de la tête de page, qui a le même fond. Entre
     deux familles, le changement de fond fait la séparation ; un filet de
     1240 px posé sur un bord d'aplat pleine largeur se lirait comme un
     défaut.

   Le gris est --fi-color-surface-alt, celui du formulaire et de toutes les
   bandes grises du site. Mesuré dessus : --fi-color-muted 5,4:1 (besoin,
   « DELIVERED BY », flèche), --fi-color-ink 17:1 — AA tenu partout. */
.fi-wwo__group:nth-last-child(even) {
	background: var(--fi-color-surface-alt);
	box-shadow: 0 0 0 100vmax var(--fi-color-surface-alt);
	clip-path: inset(0 -100vmax);
}

.fi-wwo__group + .fi-wwo__group,
.fi-wwo__group:nth-last-child(even) {
	border-block-start: 0;
}

/* 56em, le seuil de toutes les grilles à deux colonnes du site (têtes de
   fiche, conseils de /team/) : en dessous, une colonne de besoin de 250 px
   ferait trois lignes hachées à côté de rangs pincés. */
@media (min-width: 56em) {
	.fi-wwo__group {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		gap: var(--fi-space-xl);
	}

	/* Une famille de repli sans titre n'a rien à mettre à gauche : ses rangs
	   restent dans la colonne des services, alignés sur ceux du dessus. */
	.fi-wwo__group--bare .fi-wwo__list {
		grid-column: 2;
	}
}

/* Entre 56em et 75em, le rapport 1/2 laisse 300 px à la colonne de gauche —
   36 signes par ligne mesurés à 1024 sur le second paragraphe de famille,
   sous le seuil de 45. Elle reprend une part au rail des services, qui a
   600 px pour des lignes de besoin de 90 signes et peut en céder : son texte
   est borné à 58ch (557 px) et ne rétrécit donc pas.

   Au-delà de 75em le rapport d'origine revient, et c'est voulu : le rail y
   accueille la colonne d'attribution en propre (--fi-wwo-by, 13.5rem) et il a
   besoin de toute sa part. La colonne de gauche y tient déjà 397 px.

   Mesuré après : 314 px à 896, 364 px à 1024, 368 px à 1200, 397 px à 1440.
   L'audit signale encore 36 signes/ligne à 896 et 1024 — c'est une MOYENNE sur
   quatre lignes dont la dernière est courte (`text-wrap: pretty` évite les
   orphelines), pas une mesure de colonne : 364 px portent 45 signes pleins.
   Le seuil de 56em n'est PAS remonté pour autant : c'est celui de toutes les
   grilles à deux colonnes du site, et le déplacer sur cette seule page
   désaccorderait /what-we-offer/ des fiches et de /team/. */
@media (min-width: 56em) and (max-width: 74.999em) {
	.fi-wwo__group {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
	}
}

/* `:first-child` et non `*` : depuis que la colonne peut porter un SECOND
   paragraphe, remettre à zéro la marge haute de tous les enfants collerait
   .fi-wwo__gp à .fi-wwo__gd. Seul le premier a une marge parasite à retirer —
   celle que WordPress pose sur le bloc de tête. */
.fi-wwo__ghead > :first-child {
	margin-block-start: 0;
}

.fi-wwo__h2 {
	margin-block: 0 var(--fi-space-xs);
	font-size: var(--fi-size-step-3);
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--fi-color-ink);
	text-wrap: balance;
}

/* Le chapô de famille et ses prolongements. Depuis le 17/09 une famille peut
   en porter DEUX (docs/68) : le premier dit à qui la famille s'adresse, le
   second ce qu'on y trouve.

   ⚠️ LA HIÉRARCHIE EST UNE COULEUR, PAS UN GRAS. Le client a bordé sa phrase
   d'attaque en gras sur deux familles sur trois ; le reprendre tel quel aurait
   fait trois colonnes de gauche qui ne se ressemblent pas, et un gras de 16 px
   sur trois lignes pleines se lit comme du titre, pas comme du texte. L'encre
   contre le gris porte le même écart sans peser — c'est déjà le geste des
   têtes de fiche et de la tête de /contact/. */
.fi-wwo__gd,
.fi-wwo__gp {
	margin-block: 0;
	max-inline-size: 42ch;
	font-size: var(--fi-size-step-0);
	line-height: 1.6;
	text-wrap: pretty;
}

.fi-wwo__gd {
	color: var(--fi-color-ink);
}

/* Le second paragraphe est du CONTEXTE : il recule d'un cran, comme le besoin
   d'un rang recule sous son titre. L'écart entre les deux vaut celui du titre
   à son chapô — la colonne de gauche garde un seul rythme. */
.fi-wwo__gp {
	margin-block-start: var(--fi-space-xs);
	color: var(--fi-color-muted);
}

/* ── La photographie de « Samples and studies » ─────────────────────
   ⚠️ 10/10/2026 — validée par l'utilisateur après l'audit des images. Une
   SEULE famille en porte une, et pourquoi celle-là : voir
   firalis_wwo_photo() (inc/offer.php).

   Elle ferme la colonne de gauche sous le chapô, dans un vide qui existait
   déjà : la rangée de la famille est dictée par ses quatre rangs, pas par
   sa tête. Mesuré à 1440 : 398 px vides sous la tête, pour une figure de
   24 + 265 px. AUCUNE hauteur ajoutée, à aucune largeur où elle s'affiche
   (896, 1024, 1280, 1440 — Δ 0 sur la page). La réserve qui reste entre le
   bas de la figure et le bas du dernier rang : 101 px à 1440, 102 à 1280,
   247 à 1024, 262 à 896 — c'est elle qui fond si la famille perd des rangs.

   ⚠️ La colonne de gauche N'EST PAS COLLANTE (rien ici ni dans style.css ne
   la fixe ; le seul « sticky » de la page est le contexte du formulaire,
   .fi-form-band__aside). La figure défile avec sa famille : aucun
   chevauchement possible avec les rangs ni avec la famille suivante.

   Traitement de bande CLAIRE, celui de l'ancienne .fi-cop__photo des fiches
   (retirée le 27/10/2026) et de .fi-study__photo : --fi-photo-tone,
   rayon s, cadrage 50 % 62 %. Pas de filet ni de voile — ils n'existent que
   sur bande sombre (.fi-statement__plate). Le rapport est celui du rôle R1
   de docs/55, 3/2, qui est aussi celui du fichier : rien n'est recadré.

   Sous 56em elle disparaît. La famille passe en une colonne, la tête coiffe
   ses rangs et il n'y a plus de vide à côté d'eux : visible, elle coûtait
   224 px à 390, entre le chapô et le premier rang. `loading="lazy"` sur une
   figure en `display: none` : le fichier n'est pas téléchargé du tout. */
.fi-wwo__photo {
	--fi-photo-ar: 3 / 2;
	position: relative;
	margin: var(--fi-space-l) 0 0;
	inline-size: 100%;
	aspect-ratio: var(--fi-photo-ar);
	overflow: clip;
	border-radius: var(--fi-radius-s);
}

/* L'image reste hors du flux : c'est le RAPPORT de la figure qui décide de
   sa hauteur, jamais la hauteur intrinsèque du fichier — même raisonnement
   que .fi-statement__plate (style.css). */
.fi-wwo__photo img {
	position: absolute;
	inset: 0;
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: 50% 62%;
	filter: var(--fi-photo-tone);
}

@media (max-width: 55.99em) {
	.fi-wwo__photo {
		display: none;
	}
}

/* ── Les rangs ───────────────────────────────────────────────────────
   Le rang entier est le lien. Titre et besoin à gauche, la société en
   attribution, la flèche au bord : l'ordre de lecture est celui de la
   question du visiteur — ce que c'est, pourquoi je le prendrais, qui le
   fait, j'y vais.
   ─────────────────────────────────────────────────────────────────── */

.fi-wwo__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fi-wwo__item {
	position: relative;
	margin: 0;
	border-block-end: 1px solid var(--fi-color-line);
}

/* Le filet du DERNIER rang ferait doublon avec celui de la famille suivante :
   deux traits séparés par la seule réserve de bande. */
.fi-wwo__item:last-child {
	border-block-end: 0;
}

/* Le filet de la société se déploie sous le rang survolé ou focalisé — la
   seule apparition de sa couleur hors de la vague, et un FILET, jamais du
   texte (docs/54, A6). Même geste que les tuiles de l'accueil. */
.fi-wwo__item::after {
	content: "";
	position: absolute;
	inset-block-end: -1px;
	inset-inline-start: 0;
	inline-size: 0;
	block-size: 2px;
	background: var(--fi-c, var(--fi-color-ink));
	transition: inline-size 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
	pointer-events: none;
}

.fi-wwo__item:hover::after,
.fi-wwo__item:focus-within::after {
	inline-size: 100%;
}

/* Sans box-sizing, le rembourrage pousserait le lien hors de son rang :
   Twenty Twenty-Five ne pose pas de remise à zéro universelle.

   .fi-wwo__row (10/10/2026) : le rang à deux sociétés, qui n'est pas un lien
   (inc/offer.php, firalis_wwo_row_multi()). Même gabarit, pour qu'il reste
   aligné sur ses voisins à toutes les largeurs. */
.fi-wwo__link,
.fi-wwo__row {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--fi-space-xs) var(--fi-space-m);
	align-items: center;
	padding-block: clamp(1.1rem, 2vw, 1.5rem);
	text-decoration: none;
	color: inherit;
}

/* Le premier rang démarre au ras du filet de famille : son titre tombe
   alors sur la même ligne que le h2 de la colonne de gauche. */
.fi-wwo__item:first-child .fi-wwo__link,
.fi-wwo__item:first-child .fi-wwo__row {
	padding-block-start: 0;
}

.fi-wwo__text {
	grid-column: 1 / -1;
	display: grid;
	gap: var(--fi-space-3xs);
}

.fi-wwo__title {
	font-family: var(--fi-font-display);
	font-size: var(--fi-size-step-2);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--fi-color-ink);
	text-wrap: balance;
}

/* Texte courant, jamais sous 15 px : c'est une phrase, pas un libellé. */
.fi-wwo__need {
	max-inline-size: 58ch;
	font-size: var(--fi-size-step-0);
	line-height: 1.55;
	color: var(--fi-color-muted);
	text-wrap: pretty;
}

.fi-wwo__by {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fi-space-2xs);
	min-inline-size: 0;
}

/* Le micro-libellé du site, en valeur : 0.6875rem, le rang unique fixé dans
   style.css pour .fi-eyebrow. Pas de classe partagée à reprendre ici — le
   filet de .fi-eyebrow n'a rien à faire devant une attribution. */
.fi-wwo__byk {
	font-family: var(--fi-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fi-color-muted);
}

/* ⚠️ `inline-size` ET `aspect-ratio`, les deux. Un `<svg>` en ligne sans
   largeur explicite prend 300 px par défaut dans Chrome, quelle que soit sa
   viewBox. */
.fi-wwo__mark {
	flex: 0 0 auto;
	display: block;
	block-size: 1.35rem;
	inline-size: auto;
	aspect-ratio: 265 / 432;
}

.fi-wwo__co {
	font-family: var(--fi-font-display);
	font-size: var(--fi-size-step-0);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--fi-color-ink);
}

/* L'affordance AU REPOS : au doigt, le survol n'existe pas, et un rang dont
   seul le filet révèle qu'il se clique ne se donne pas. En muted et non en
   filet fort — 5,9:1 contre 1,5:1 : c'est le seul signe du lien. */
.fi-wwo__go {
	display: flex;
	justify-self: end;
	color: var(--fi-color-muted);
	transition: color 0.2s ease, transform 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.fi-wwo__go .fi-arrow {
	display: block;
	inline-size: var(--fi-wwo-go);
	block-size: var(--fi-wwo-go);
}

.fi-wwo__link:hover .fi-wwo__go,
.fi-wwo__link:focus-visible .fi-wwo__go {
	color: var(--fi-color-ink);
	transform: translateX(3px);
}

/* Le focus clavier est l'anneau GLOBAL de style.css (2 px, décalé de 3 px),
   sans surcharge. Essayé rentré à -2 px le 13/09 : le lien n'a pas de
   rembourrage latéral, et l'anneau passait SUR la première lettre du titre et
   du besoin. Dehors, il tient dans la gouttière de la colonne et dans la
   réserve haute de la famille ; rien ne le rogne, aucun ancêtre n'est en
   « overflow ». */

/* En rang large, l'attribution passe dans sa propre colonne, entre le texte
   et la flèche. 75em et non 56em : sous 1200 px la colonne des services fait
   moins de 700 px, et une colonne d'attribution fixe y pinçait le besoin
   sous 45 signes par ligne. */
@media (min-width: 75em) {
	.fi-wwo__link,
	.fi-wwo__row {
		grid-template-columns: minmax(0, 1fr) var(--fi-wwo-by) auto;
		column-gap: var(--fi-space-l);
	}

	.fi-wwo__text {
		grid-column: 1;
	}
}

/* ── Le rang à deux sociétés (10/10/2026) ────────────────────────────
   « Commercialisation Services », délivré par Firalis ET IVDias — décision
   du responsable du projet sur Q-E9 (docs/76). Le rang n'est pas un lien :
   il en porte deux, un par société (inc/offer.php, firalis_wwo_row_multi()).

   Ce qu'il doit tenir : se lire comme ses voisins. Donc
     — la colonne d'attribution commence à la même abscisse, et « DELIVERED
       BY » y est à la même place : les vagues des deux sociétés tombent dans
       la colonne des vagues des autres rangs, l'une sous l'autre ;
     — chaque lien de société finit sur SA flèche, au bord droit, dans la
       colonne des flèches des autres rangs ;
     — aucun filet de rang au survol : le rang entier ne mène nulle part, et
       un filet de toute la largeur l'aurait promis. Le geste passe au lien
       survolé — son nom se souligne d'un filet à la couleur de SA société
       (la seule apparition de la couleur hors de la vague, comme le filet
       des autres rangs, docs/54 A6), et sa flèche avance.

   Cibles : 44 px de haut par lien, à toutes les largeurs (deux liens de
   2.75rem empilés, sans écart). Même règle que les rangs, qui en font plus. */
.fi-wwo__item--multi::after {
	content: none;
}

/* En étroit (< 75em), le texte prend tout le rang et l'attribution passe
   dessous, comme sur les autres rangs ; mais la flèche y est DANS chaque lien,
   et l'attribution occupe donc les deux colonnes.

   La marge NÉGATIVE rend la différence entre une cible de 2.75rem et la
   ligne d'attribution d'un rang ordinaire (une ligne de texte, 1lh) : sans
   elle, la vague de Firalis tombait 9 px plus bas sous le besoin que celle
   des voisins (34 px contre 24,8 mesurés à 1024, 768 et 390), et le rang
   finissait 9 px plus bas. Les cibles gardent leurs 44 px : elles débordent
   dans l'écart du rang (12 px) et dans sa réserve basse, où il n'y a rien à
   toucher. En large, l'attribution est centrée sur le texte : la marge,
   symétrique, n'y déplace rien. Repli en rem pour un navigateur sans `lh`. */
.fi-wwo__by--multi {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	column-gap: var(--fi-space-2xs);
	margin-block: -0.575rem;
	margin-block: calc((1lh - 2.75rem) / 2);
}

/* Le libellé se centre sur le PREMIER lien, à la hauteur de sa cible : il
   coiffe la liste au lieu de flotter à mi-hauteur des deux. */
.fi-wwo__by--multi .fi-wwo__byk {
	display: flex;
	align-items: center;
	min-block-size: 2.75rem;
}

/* Toujours la dernière colonne, libellé ou non : sans « DELIVERED BY » (clé
   byLabel vide), la liste garderait sinon la colonne « auto » et ses flèches
   quitteraient le bord droit. */
.fi-wwo__cos {
	grid-column: -2 / -1;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fi-wwo__coitem {
	margin: 0;
}

/* Même suite que .fi-wwo__by d'un rang ordinaire — vague, nom, au même écart
   —, la flèche repoussée au bord. */
.fi-wwo__colink {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: var(--fi-space-2xs);
	min-block-size: 2.75rem;
	text-decoration: none;
	color: inherit;
}

.fi-wwo__colink .fi-wwo__go {
	margin-inline-start: auto;
}

.fi-wwo__colink .fi-wwo__co {
	text-decoration-line: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
	transition: text-decoration-color 0.2s ease;
}

.fi-wwo__colink:hover .fi-wwo__co,
.fi-wwo__colink:focus-visible .fi-wwo__co {
	text-decoration-color: var(--fi-c, currentColor);
}

.fi-wwo__colink:hover .fi-wwo__go,
.fi-wwo__colink:focus-visible .fi-wwo__go {
	color: var(--fi-color-ink);
	transform: translateX(3px);
}

/* En large, l'attribution couvre la colonne des sociétés ET celle des
   flèches. ⚠️ La colonne des flèches est DÉCLARÉE à sa largeur, pas laissée
   en « auto » comme sur les autres rangs : ici aucun élément ne l'occupe en
   propre, une piste « auto » vide tomberait à zéro, le 1fr du texte prendrait
   ses 1.1rem, et « DELIVERED BY » glisserait d'autant à droite de celui des
   voisins. */
@media (min-width: 75em) {
	.fi-wwo__row {
		grid-template-columns: minmax(0, 1fr) var(--fi-wwo-by) var(--fi-wwo-go);
	}

	.fi-wwo__by--multi {
		grid-column: 2 / -1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fi-wwo__item::after,
	.fi-wwo__go,
	.fi-wwo__colink .fi-wwo__co {
		transition: none;
	}

	.fi-wwo__link:hover .fi-wwo__go,
	.fi-wwo__link:focus-visible .fi-wwo__go,
	.fi-wwo__colink:hover .fi-wwo__go,
	.fi-wwo__colink:focus-visible .fi-wwo__go {
		transform: none;
	}
}