/* =========================================================================
   NEUROX — socle du storefront (passe 2.1.b)

   Variables, base, mise en page, en-tete et pied. Rien de propre a une page :
   les gabarits de parcours arrivent en 2.1.d et 2.1.e.

   TOUTE COULEUR EST DECLAREE ICI ET NULLE PART AILLEURS (critere 7 du §10).
   Aucune valeur hexadecimale ne doit apparaitre dans une vue, dans un
   attribut `style`, ni plus bas dans ce fichier hors du bloc de variables.
   Les tons intermediaires se derivent par `color-mix()` a partir des jetons
   existants, plutot que d'ouvrir une variable de plus.

   Le CSS est porte par la classe racine `.nrx` (§9). Un selecteur d'element
   nu ne s'applique qu'a l'interieur d'elle.
   ========================================================================= */

/* ------------------------------------------------------------------ *
 *  1. JETONS — onze variables de couleur, plafond du §4, dégradés compris
 *
 *  Nommees par ROLE et jamais par valeur : `--nrx-texte-secondaire`, pas
 *  `--nrx-gris-6b`. Une variable nommee par sa couleur se ment a elle-meme
 *  des qu'on ajuste la teinte.
 * ------------------------------------------------------------------ */

:root {
	--nrx-fond-page: #f2f3f3;
	--nrx-fond-carte: #ffffff;
	--nrx-separation: #d3d3d3;
	--nrx-texte-tertiaire: #a8a8a8;
	--nrx-texte-secondaire: #6b6b6b;
	--nrx-texte-courant: #2c2c2c;
	--nrx-titre: #000000;
	--nrx-signal: #3bedff;
	--nrx-alerte: #e2600f;

	/* LE BLEU D INTERACTION — NOMME PAR SA FONCTION, PAS PAR SA TEINTE.

	   `--nrx-bleu` se mentirait a lui-meme des qu on ajuste la teinte, et
	   c est la regle que l en-tete de cette feuille pose depuis la passe 1.
	   Il entre pour le bouton d appreciation et servira aux autres etats
	   d interaction : un jeton pose pour un seul cas se renomme au second.

	   BLANC DESSUS : 6,94:1 — mesure le 21 aout. Au-dessus du 4,5:1 de AA
	   pour le texte, et a six centiemes du 7:1 de AAA. Le meme instrument
	   rend 5,33:1 pour `--nrx-texte-secondaire` sur blanc, qui est la
	   valeur deja consignee : il mesure donc bien ce qu il pretend. */
	--nrx-interaction: #195c98;

	/*
	 * Composition des produits sans photographie. Deux arrets, pas quatre a
	 * six : l'export en comptait jusqu'a six valeurs voisines par degrade,
	 * ce qui n'avait pas ete concu mais avait derive. Les valeurs
	 * intermediaires ne se voyaient pas.
	 *
	 * Ce n'est pas un repli. `products.image_path` demarre vide partout :
	 * c'est le rendu de la boutique entiere au lancement.
	 */
	--nrx-compo-clair: linear-gradient(150deg, #ffffff 0%, #e9eaea 100%);
	--nrx-compo-sombre: linear-gradient(150deg, #3a3a3a 0%, #1c1c1c 100%);

	/*
	 * Fonds des deux paves editoriaux. DES APLATS, PAS UN DEGRADE, et ce
	 * n'est pas qu'une question de gout : les images posees par-dessus ont
	 * un fond TRANSPARENT, et un degrade derriere un detourage en revele
	 * les bords. Un aplat ne le fait pas.
	 *
	 * Au jeton plutot qu'en dur : deux nombres ecrits a meme une regle sont
	 * deux nombres qui divergeront le jour ou la palette bougera.
	 */
	--nrx-pave-gauche: #fcfbfa;
	--nrx-pave-droit: #e9e9e9;

	/*
	 * BANDE D'APLAT RESERVEE EN HAUT DES PAVES — le vide vient du code.
	 *
	 * L'image ne peut pas occuper toute la hauteur : le balayage du canal
	 * alpha du 18 aout a montre que sa colonne centrale est couverte a 17 %
	 * a gauche et 18,8 % a droite DES LE TIERS HAUT, et que la seule plage
	 * reellement libre vaut 45 et 75 px. Le texte tombait sur les visages.
	 *
	 * FIXE, PAS PROPORTIONNELLE. Le bloc de texte a une hauteur qui ne
	 * depend pas du pave : une proportion donnerait trop de vide sur un
	 * grand ecran et pas assez sur un petit. C'est le genre de valeur qui a
	 * l'air juste et se perime — comme le `34px` de la cellule de vignette.
	 *
	 * LA VALEUR EST MESUREE, PAS ESTIMEE. Bloc titre + texte plie a
	 * 40 colonnes, dans les TROIS langues, sur les valeurs lues dans cette
	 * feuille : 48 de retrait + 39 de titre + 16 de marge + 2 lignes de
	 * 24 = 151 px, identique aux six libelles. La cible annoncee disait
	 * « environ 150 px » ; la mesure la confirme, elle ne la remplace pas.
	 *
	 * LE BOUTON EST ENTRE DANS LA BANDE LE 18 AOUT. Il tombait au bas du
	 * pave, c'est-a-dire dans l'image — sur le bureau a gauche, sur la
	 * tablette graphique a droite. Il remonte sous le texte, et la bande
	 * grandit d'autant :
	 *
	 *     bloc titre + texte, mesure          151 px
	 *     marge basse du texte (--nrx-e-3)     24 px
	 *     hauteur du bouton                    54 px
	 *     ----------------------------------------
	 *                                         229 px
	 *
	 * LES 54 PX DU BOUTON SONT LUS, PAS SUPPOSES : fonte 14 px du jeton
	 * `--nrx-t-petit`, interligne 1,6 du corps, remplissage 15 px de part
	 * et d'autre, bordure 1 px. Et les 24 px ne sont pas un ecart invente —
	 * c'est la marge basse que `.nrx-pave__texte` porte deja.
	 *
	 * ═══════════════════════════════════════════════════════════════════
	 * LA BANDE VAUT EXACTEMENT LE BLOC. IL N'Y A PLUS DE RESERVE.
	 *
	 * Elle a porte 253 px pendant une heure : 229 de bloc plus 24 d'avance,
	 * soit une ligne de texte. Ces 24 px ont ete DEPENSES le 18 aout pour
	 * elargir l'image de 9 % — un pixel de bande rendant 1,75 pixel de
	 * largeur, par le rapport des fichiers.
	 *
	 * CE QUE CA COUTE, ET IL FAUT QUE CA RESTE ECRIT : si un texte passe
	 * un jour a TROIS lignes, il n'y a plus rien pour l'absorber. Il
	 * debordera sur l'image, c'est-a-dire sur les visages — le defaut
	 * exact que cette bande existe pour fermer.
	 *
	 * Le compte de lignes a 40 colonnes est une borne HAUTE, parce que `ch`
	 * vaut la largeur du glyphe « 0 » et non celle d'un caractere de prose.
	 * C'est une borne, pas une garantie : un changement de police, un
	 * libelle rallonge ou une langue de plus la franchissent sans bruit.
	 * Un banc garde donc la LONGUEUR des six libelles, faute de reserve.
	 *
	 * ET LE SOLDE EST NUL. Toute demande d'agrandissement ulterieure ne
	 * peut plus venir d'ici : elle passera par le rognage des marges
	 * transparentes dans les fichiers — 198/136 px a gauche, 123/95 a
	 * droite, mesures le 18 aout — ou par un changement de rapport.
	 * ═══════════════════════════════════════════════════════════════════
	 */
	--nrx-pave-bande: 229px;


	/* Echelle typographique — rapport constant, pas de valeur isolee. */
	/* `nano` EST ENTRE LE 14 AOUT, ET IL VIENT D'UNE VALEUR ISOLEE.
	 *
	 * Les etiquettes d'option ont ete portees a 9 px au tiroir, puis dans la
	 * modale : deux ecritures en clair de la meme intention, que rien ne
	 * reliait. Un controle exigeait leur egalite faute de mieux — c'est le
	 * genre de garde qu'on pose quand la structure manque.
	 *
	 * Le pas existe maintenant, et les deux surfaces le lisent. « Pas de
	 * valeur isolee » est ce que dit la ligne au-dessus ; elle l'etait
	 * devenue le temps de deux commits. */
	--nrx-t-nano: 9px;
	--nrx-t-micro: 11px;
	--nrx-t-menu: 12px;
	--nrx-t-petit: 14px;
	--nrx-t-base: 15px;
	--nrx-t-lead: 17px;
	--nrx-t-marque: 19px;

	/*
	 * UN PAS D'AFFICHE, au-dessus de l'echelle courante.
	 *
	 * L'echelle s'arretait a `marque`, 19 px : elle avait ete faite pour
	 * du texte courant, et rien au catalogue n'affichait plus gros sans
	 * ecrire sa valeur en clair — le titre de pave a 34 px, le titre de
	 * banniere a `clamp(28px, 4vw, 52px)`. L'accroche du hero l'aurait
	 * fait une troisieme fois.
	 *
	 * SA VALEUR VIENT D'UNE MESURE, pas d'un choix. A 36 px, le bloc du
	 * hero demande 227 px dans une reserve qui en offre 242 a 1024 px de
	 * vue — la largeur la plus etroite ou la reserve parait encore.
	 */
	--nrx-t-affiche: 36px;

	/* Espacements — multiples de 8, une seule serie. */
	--nrx-e-1: 8px;
	--nrx-e-2: 16px;
	--nrx-e-3: 24px;
	--nrx-e-4: 32px;
	--nrx-e-5: 48px;
	--nrx-e-6: 72px;
	--nrx-e-7: 96px;

	/* Gouttiere laterale : elle change a chaque rupture, jamais ailleurs. */
	--nrx-gouttiere: 56px;

	--nrx-largeur-max: 1440px;
	--nrx-suivi-titre: 0.16em;
	--nrx-suivi-menu: 0.14em;

	--nrx-police: "Helvetica Neue", Helvetica, Arial, sans-serif;
	--nrx-police-technique: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ------------------------------------------------------------------ *
 *  2. BASE
 * ------------------------------------------------------------------ */

.nrx *,
.nrx *::before,
.nrx *::after {
	box-sizing: border-box;
}

.nrx {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--nrx-fond-page);
	color: var(--nrx-texte-courant);
	font-family: var(--nrx-police);
	font-size: var(--nrx-t-base);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	/* Le design n'a pas de variante sombre : on le dit au navigateur plutot
	   que de laisser les controles de formulaire s'inverser tout seuls. */
	color-scheme: light;
}

/*
 * STYLE DE BASE A SPECIFICITE NULLE, et c'est la seule chose qui compte
 * dans cette regle.
 *
 * Ecrite `.nrx a`, elle pesait (0,1,1) — une classe et un element — et
 * battait donc TOUT composant nomme par une seule classe. `.nrx-bouton`
 * (0,1,0) perdait : ses ancres prenaient la couleur du titre, noir, sur un
 * aplat noir. Le libelle etait dans le HTML et invisible a l'ecran. Les
 * memes boutons en `<button>` s'affichaient normalement, ce qui rendait le
 * defaut incomprehensible tant qu'on regardait le HTML.
 *
 * `:where()` ne compte pour rien dans le calcul : la regle pese desormais
 * (0,0,1), et n'importe quel composant la surclasse. Un style de base doit
 * pouvoir etre remplace sans qu'on ait a le savoir.
 */
:where(.nrx) a {
	color: var(--nrx-titre);
	text-decoration: none;
	text-underline-offset: 0.2em;
}

:where(.nrx) a:hover {
	color: var(--nrx-signal);
}

/*
 * Visible au clavier, et visible SUR TOUS LES FONDS. Un contour en
 * `currentColor` disparait des que le texte prend la couleur du fond — un
 * lien blanc sur le pied de page charcoal, par exemple. Le cyan est ici un
 * indicateur d'etat, pas une decoration : il ne compte pas dans la regle
 * du signal unique.
 */
.nrx :focus-visible {
	outline: 2px solid var(--nrx-signal);
	outline-offset: 3px;
}

.nrx img {
	max-width: 100%;
	display: block;
}

/* ET SA NEUTRALISATION — SANS ELLE, `hidden` NE CACHE AUCUNE IMAGE DU SITE.

   La regle ci-dessus pose `display: block` sur TOUTE image du gabarit.
   Elle est plus specifique que le `[hidden] { display: none }` de la
   feuille du navigateur, et elle l'ecrase donc partout.

   MESURE DU 20 AOUT, galerie de la casquette : cinq images, quatre
   portant l'attribut, CINQ PEINTES. `.nrx-fiche__media` rendait 2090 px
   de contenu pour 420 px de boite a 1280, et la colonne gauche de la
   modale debordait de 51 px.

   LE PIEGE NE SE VOIT PAS EN JAVASCRIPT : `image.hidden` rend `true`,
   puisque l'ATTRIBUT est bien pose. Seul le `display` calcule le dit —
   c'est pourquoi la premiere sonde de l'etape 4 a rendu un vert faux.

   C'est la TROISIEME occurrence du meme motif dans cette feuille, apres
   `.nrx-panneau[hidden]` et `.nrx-langue__menu[hidden]`. Celle-ci est
   posee au meme endroit que le `display` fautif, pas sur ses victimes. */
.nrx img[hidden] {
	display: none;
}

.nrx h1,
.nrx h2,
.nrx h3 {
	color: var(--nrx-titre);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 0;
	text-wrap: pretty;
}

/* ------------------------------------------------------------------ *
 *  4. MISE EN PAGE
 * ------------------------------------------------------------------ */

.nrx-w {
	width: 100%;
	max-width: var(--nrx-largeur-max);
	margin-inline: auto;
	padding-inline: var(--nrx-gouttiere);
}

.nrx__corps {
	flex: 1 0 auto;
}

/* Surtitre — la capitale espacee du systeme, employee partout. */
.nrx-surtitre {
	font-size: var(--nrx-t-micro);
	line-height: 1.5;
	letter-spacing: var(--nrx-suivi-menu);
	text-transform: uppercase;
	color: var(--nrx-texte-secondaire);
}

.nrx-horsecran {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * Lien d'evitement. Masque comme `.nrx-horsecran` tant qu'il n'a pas le
 * focus, puis pose par-dessus l'en-tete. Il ne peut pas simplement etre
 * `.nrx-horsecran` : un lien qu'on atteint au clavier sans jamais le voir ne
 * sert a personne.
 */
.nrx-evitement {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 40;
	padding: 12px var(--nrx-e-2);
	background: var(--nrx-titre);
	color: var(--nrx-fond-carte);
	font-size: var(--nrx-t-petit);
}

.nrx-evitement:focus {
	left: 0;
	color: var(--nrx-fond-carte);
}

/* ------------------------------------------------------------------ *
 *  5. EN-TETE
 * ------------------------------------------------------------------ */

.nrx-entete {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--nrx-fond-carte);
	border-bottom: 1px solid var(--nrx-separation);
}

.nrx-bar {
	min-height: 72px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nrx-e-3);
}

.nrx-marque {
	font-size: var(--nrx-t-marque);
	font-weight: 600;
	letter-spacing: var(--nrx-suivi-titre);
	color: var(--nrx-titre);
	white-space: nowrap;
}

.nrx-marque:hover {
	color: var(--nrx-titre);
}

.nrx-outils {
	display: flex;
	align-items: center;
	gap: 4px;
}

/*
 * LA BARRE N'A PLUS QUE TROIS ICONES : le globe, le panier, la silhouette.
 *
 * Le bouton de menu portait quatre entrees atteignables ailleurs — la marque
 * mene a l'accueil, le tiroir porte « Mes actifs », et le pied de page porte
 * les quatre. Verifie avant de le retirer : l'ordre inverse aurait rendu
 * « A propos » et « Contact » inatteignables.
 *
 * La barre garde ce qui tient a un etat — la langue, le panier, le compte —
 * et rien qui soit une simple page.
 */

/* `[hidden]` DOIT RESTER : le tiroir lateral est en `display: flex`, qui
   ecraserait le `display: none` par defaut de l'attribut. */
.nrx-panneau[hidden] {
	display: none;
}

/* La langue courante se lit sans la couleur seule : elle est aussi soulignee. */
.nrx-langue__choix[aria-current="true"] {
	color: var(--nrx-titre);
	font-weight: 600;
	text-decoration: underline;
}

/*
 * 48 px de cote : la cible tactile recommandee. Le SVG fait 22 px, le reste
 * est de la zone cliquable — on ne la reduit sur aucune rupture.
 */
.nrx-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	background: transparent;
	border: none;
	color: var(--nrx-texte-courant);
	cursor: pointer;
	position: relative;
	font: inherit;
}

.nrx-ico:hover {
	color: var(--nrx-titre);
}

.nrx-ico svg {
	width: 22px;
	height: 22px;
}

/* Le compteur du panier, dans l'en-tete. Il porte ce nom depuis la 2.1 ;
   le nuancier des options nomme les siennes `nrx-nuancier__pastille`, sous
   son propre bloc, pour que les deux ne se rencontrent jamais. */
.nrx-pastille {
	position: absolute;
	top: 4px;
	right: 2px;
	min-width: 15px;
	height: 15px;
	padding: 0 3px;
	background: var(--nrx-texte-courant);
	color: var(--nrx-fond-carte);
	font-size: var(--nrx-t-nano);
	line-height: 15px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ *
 *  6. SELECTEUR DE LANGUE
 *
 *  Le menu ouvert et sa persistance arrivent en 2.1.c ; la place et le
 *  comportement d'affichage se posent ici, avec le reste de la barre.
 *
 *  IL NE DISPARAIT A AUCUNE RUPTURE. L'export le masquait sous 480 px —
 *  cacher le seul moyen de changer de langue sur la largeur ou se trouve
 *  la majorite du trafic rend la fonction inatteignable pour ceux qui en
 *  ont le plus besoin.
 * ------------------------------------------------------------------ */

.nrx-langue {
	position: relative;
}

.nrx-langue__menu {
	position: absolute;
	top: calc(100% - 4px);
	right: 0;
	min-width: 168px;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	background: var(--nrx-fond-carte);
	border: 1px solid var(--nrx-separation);
	z-index: 30;
}

.nrx-langue__menu[hidden] {
	display: none;
}

.nrx-langue__choix {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nrx-e-2);
	width: 100%;
	padding: 10px var(--nrx-e-2);
	background: transparent;
	border: none;
	font: inherit;
	font-size: var(--nrx-t-petit);
	color: var(--nrx-texte-courant);
	text-align: left;
	cursor: pointer;
	white-space: nowrap;
}

.nrx-langue__choix:hover {
	background: var(--nrx-fond-page);
	color: var(--nrx-titre);
}

.nrx-langue__choix[aria-current="true"] {
	color: var(--nrx-titre);
	font-weight: 600;
}

/* Le code de langue reste lisible sans la couleur : il est aussi en gras. */
.nrx-langue__code {
	font-size: var(--nrx-t-micro);
	letter-spacing: var(--nrx-suivi-menu);
	text-transform: uppercase;
	color: var(--nrx-texte-secondaire);
}

/* ------------------------------------------------------------------ *
 *  7. AVIS
 * ------------------------------------------------------------------ */

.nrx-avis {
	margin: 0 0 var(--nrx-e-3);
	padding: 14px var(--nrx-e-2);
	font-size: var(--nrx-t-petit);
	background: var(--nrx-fond-carte);
	border-left: 3px solid var(--nrx-texte-courant);
}

.nrx-avis--erreur {
	border-left-color: var(--nrx-alerte);
	color: var(--nrx-alerte);
}

/* ------------------------------------------------------------------ *
 *  8. PIED DE PAGE
 * ------------------------------------------------------------------ */

.nrx-pied {
	flex-shrink: 0;
	margin-top: var(--nrx-e-7);
	background: var(--nrx-texte-courant);
	color: var(--nrx-fond-carte);
}

.nrx-pied a {
	color: var(--nrx-fond-carte);
}

.nrx-pied a:hover {
	color: var(--nrx-signal);
}

.nrx-fgrid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: var(--nrx-e-5);
	padding-top: var(--nrx-e-6);
	padding-bottom: var(--nrx-e-4);
}

.nrx-pied__marque {
	font-size: var(--nrx-t-marque);
	font-weight: 600;
	letter-spacing: var(--nrx-suivi-titre);
	margin-bottom: var(--nrx-e-2);
}

.nrx-pied__texte {
	font-size: var(--nrx-t-petit);
	line-height: 1.6;
	color: var(--nrx-texte-tertiaire);
	margin: 0 0 var(--nrx-e-3);
	max-width: 34ch;
}

.nrx-pied__titre {
	font-size: var(--nrx-t-micro);
	letter-spacing: var(--nrx-suivi-menu);
	text-transform: uppercase;
	color: var(--nrx-texte-tertiaire);
	margin-bottom: var(--nrx-e-2);
}

.nrx-pied__liens {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: var(--nrx-t-petit);
}

.nrx-pied__legal {
	font-size: var(--nrx-t-micro);
	letter-spacing: var(--nrx-suivi-menu);
	text-transform: uppercase;
	color: var(--nrx-texte-tertiaire);
	line-height: 1.8;
}

/*
 * Filet sur fond charcoal. Derive plutot que declare : une douzieme variable
 * pour une seule bordure aurait creve le plafond du §4 sans rien apporter.
 * Le melange suit le fond — si le charcoal bouge, le filet bouge avec lui.
 */
.nrx-pied__bas {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nrx-e-4);
	flex-wrap: wrap;
	padding-top: var(--nrx-e-3);
	padding-bottom: var(--nrx-e-5);
	border-top: 1px solid color-mix(in srgb, var(--nrx-texte-courant) 75%, var(--nrx-texte-tertiaire));
}

.nrx-moyens {
	display: flex;
	gap: var(--nrx-e-1);
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nrx-moyens li {
	font-size: 10px;
	letter-spacing: 0.1em;
	color: var(--nrx-texte-tertiaire);
	border: 1px solid color-mix(in srgb, var(--nrx-texte-courant) 75%, var(--nrx-texte-tertiaire));
	padding: 6px 10px;
}

.nrx-pied__mentions {
	display: flex;
	gap: var(--nrx-e-3);
	flex-wrap: wrap;
	font-size: var(--nrx-t-menu);
	color: var(--nrx-texte-tertiaire);
}

/* ------------------------------------------------------------------ *
 *  9. CARROUSELS — habillage de Swiper
 *
 *  Swiper 11.2.10 est servi depuis `assets/vendor/swiper/`. Sa feuille
 *  fournit la mecanique ; ces regles fournissent l'apparence, et la
 *  DENSITE : `swiper-button-lock` est la classe que Swiper pose lui-meme
 *  quand toutes les diapositives tiennent a l'ecran. La masquer suffit a
 *  tenir le critere 5 — trois articles, trois vignettes, aucune fleche
 *  inerte — sans compter les articles nous-memes.
 * ------------------------------------------------------------------ */

.nrx-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: var(--nrx-fond-carte);
	border: 1px solid var(--nrx-separation);
	color: var(--nrx-texte-courant);
	cursor: pointer;
}

.nrx-nav:hover {
	border-color: var(--nrx-texte-courant);
	color: var(--nrx-titre);
}

.nrx-nav.swiper-button-disabled {
	opacity: 0.25;
	pointer-events: none;
}

.nrx-nav.swiper-button-lock {
	display: none !important;
}

/* ------------------------------------------------------------------ *
 *  10. RUPTURES — les cinq seuils de l'export, inchanges
 *
 *  1279 · 1023 · 767 · 639 · 479
 * ------------------------------------------------------------------ */

@media (max-width: 1023px) {
	:root {
		--nrx-gouttiere: 24px;
	}

	.nrx-fgrid {
		grid-template-columns: 1fr 1fr;
		gap: var(--nrx-e-4);
	}

	/*
	 * LE GLOBE NE SE REPLIE PLUS. Il se masquait ici parce que le panneau
	 * portait les langues en secours ; le panneau ne les porte plus, et le
	 * masquer rendrait le choix inatteignable exactement sous les largeurs
	 * qui portent le gros du trafic — le defaut de l'export.
	 *
	 * Le bouton de menu n'a plus rien a faire ici non plus : il est visible
	 * partout depuis que la barre ne porte plus les quatre entrees.
	 */
}

@media (max-width: 639px) {
	:root {
		--nrx-gouttiere: 16px;
	}

	.nrx-bar {
		gap: var(--nrx-e-1);
	}
}

@media (max-width: 479px) {
	.nrx-fgrid {
		grid-template-columns: 1fr;
	}

	.nrx-pied__bas {
		justify-content: flex-start;
	}
}

/* La marque reste lisible quand la barre se resserre. */
@media (max-width: 359px) {
	.nrx-marque {
		font-size: var(--nrx-t-lead);
		letter-spacing: 0.1em;
	}
}

/* ------------------------------------------------------------------ *
 *  11. PARCOURS D'ACHAT (2.1.d)
 * ------------------------------------------------------------------ */

.nrx-section {
	padding-top: var(--nrx-e-6);
}

.nrx-section__tete {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--nrx-e-3);
	flex-wrap: wrap;
	padding-bottom: var(--nrx-e-2);
	border-bottom: 1px solid var(--nrx-titre);
}

.nrx-section__titre {
	font-size: 28px;
	line-height: 1.2;
	margin: 0;
}

.nrx-section__outils {
	display: flex;
	align-items: center;
	gap: 20px;
}

.nrx-compte {
	font-size: var(--nrx-t-micro);
	letter-spacing: var(--nrx-suivi-menu);
	text-transform: uppercase;
	color: var(--nrx-texte-tertiaire);
	white-space: nowrap;
}

.nrx-fleches {
	display: flex;
	gap: var(--nrx-e-1);
}

.nrx-nav svg {
	width: 8px;
	height: 14px;
}

/* ── la rangee ────────────────────────────────────────────────────── */

.nrx-row {
	margin-top: var(--nrx-e-4);
	overflow: hidden;
}

/*
 * DENSITE (critere 5) — « trois articles donnent trois vignettes qui
 * OCCUPENT TOUTE LA LARGEUR, sans espace vide ».
 *
 * La premiere version posait une largeur fixe de 260 px : trois cartes
 * tenaient 828 px dans un conteneur de 1440, et laissaient 600 px de vide a
 * droite. Aucune fleche inerte, mais la rangee etait creuse — le critere
 * demandait les deux.
 *
 * La largeur vient donc du NOMBRE d'articles, plafonne par ce que la
 * largeur d'ecran peut montrer. `--nrx-par-vue` est pose par le script,
 * qui connait les deux ; la feuille se contente d'en tirer la largeur.
 */
.nrx-row .swiper-slide {
	width: calc((100% - (var(--nrx-par-vue) - 1) * var(--nrx-e-2)) / var(--nrx-par-vue));
	height: auto;

	/*
	 * UNE CARTE N'EST PAS UNE BANNIERE.
	 *
	 * Le plafonnement au nombre d'articles fait ce qu'il doit — trois
	 * cartes occupent toute la largeur — et il donne un resultat absurde a
	 * UN article : la carte prend 1400 px, et le visuel 4:3 etire coupe
	 * l'objet. On voyait le socle et les pieds de la figurine, pas la
	 * figurine.
	 *
	 * La borne est la largeur d'une carte dans une rangee de trois. Trois
	 * articles et plus : elle ne mord pas, la densite du critere 5 tient.
	 * Un ou deux : la carte garde sa taille et se cale a gauche, ce que
	 * l'ordre des diapositives fait deja.
	 *
	 * C'EST L'ARBITRAGE DES PAVES, une seconde fois : le rapport commande
	 * jusqu'a un seuil, au-dela c'est la mesure absolue qui tient. Il se
	 * reverra en novembre — plusieurs categories n'auront qu'un ou deux
	 * produits au lancement.
	 */
	max-width: calc((100% - 2 * var(--nrx-e-2)) / 3);
}

/*
 * Repli sans JavaScript : les cartes gardent une largeur lisible plutot que
 * de s'etirer sur toute la rangee.
 */
.nrx-row {
	--nrx-par-vue: 4;
}


/* ── la mention sous la carte ─────────────────────────────────────────

   ELLE N'EXISTE QUE QUAND ELLE EXISTE. Aucune place reservee, aucun tiret,
   aucune hauteur minimale : le gabarit ne rend rien quand `mention` est
   `NULL`, et cette regle ne s'applique donc jamais a un bloc vide.

   SANS ASTERISQUE, NI ICI NI AU GABARIT. La mention est sous la carte
   qu'elle concerne : rien a renvoyer, donc rien a marquer. Un renvoi
   obligerait a tenir un second endroit ou vivraient les textes.

   `--nrx-t-nano` LA MET AU RANG DES NOMS D'OPTION, pas a celui du prix.
   C'est une note de bas de carte : elle doit se lire apres le prix, jamais
   avant. */
.nrx-carte__mention {
	margin: var(--nrx-e-1) 0 0;
	padding-top: var(--nrx-e-1);
	border-top: 1px solid var(--nrx-separation);
	font-size: var(--nrx-t-nano);
	line-height: 1.5;
	color: var(--nrx-texte-secondaire);
}

.nrx-carte__mention + .nrx-carte__mention {
	margin-top: var(--nrx-e-1);
	padding-top: 0;
	border-top: 0;
}

/* ── la carte ─────────────────────────────────────────────────────── */

.nrx-carte {
	background: var(--nrx-fond-carte);
	border: 1px solid var(--nrx-separation);
	display: flex;
	flex-direction: column;
	height: 100%;
}

.nrx-carte:hover {
	border-color: var(--nrx-texte-courant);
}

/*
 * LE RAPPORT DEPEND DU ROLE DE LA RANGEE, jamais du nombre d'articles
 * qu'elle contient (§4). Une rangee de trois cartes a le meme rapport
 * qu'une rangee de douze.
 *
 *   rangee de tete    portrait 2:3 — le format de production, non recadre
 *   TOUT LE RESTE      4:3 resserre vers le carre — le meme fichier,
 *                     recadre par `object-fit: cover`
 *
 * LE 4:3 EST LE DEFAUT, LE 2:3 L'EXCEPTION. C'est l'inverse de la premiere
 * version, et ce n'est pas cosmetique : une carte posee dans un contexte
 * qui n'existe pas encore — grille filtree, suggestions, comparateur —
 * prend alors le rapport commun sans qu'on ait a y penser. La regle nommee
 * en negatif « toutes les autres rangees » se serait traduite par une carte
 * SANS rapport partout ailleurs, donc par un visuel a la hauteur de son
 * contenu. Une carte est une carte.
 *
 * Le rapport est porte par le contexte et non par la carte : une carte qui
 * choisirait son propre rapport le ferait dependre d'elle-meme, donc du
 * produit, et deux produits voisins ne se ressembleraient plus.
 *
 * `flex-shrink: 0` : le visuel est un element flexible dans une carte en
 * colonne. Sans cela, une hauteur contrainte par le conteneur l'ecrase et
 * le rapport ne tient plus — l'image devient paysage sans qu'aucune regle
 * ne le demande.
 */
.nrx-carte__visuel {
	position: relative;
	flex-shrink: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--nrx-fond-carte);

	/*
	 * UN FILET, PARCE QUE LE FOND DU VISUEL EST LE FOND DE LA CARTE.
	 *
	 * La photographie de catalogue est sur blanc pur, et la carte est
	 * blanche : l'objet flotte sans limite, et rien ne dit ou s'arrete le
	 * visuel. La bordure de la carte entoure la carte entiere, pas sa
	 * vignette.
	 *
	 * Il n'est pose qu'en BAS : les trois autres cotes touchent deja la
	 * bordure de la carte, et un filet double s'y verrait.
	 */
	border-bottom: 1px solid var(--nrx-separation);
}

/* LA CLASSE NOMME LE FORMAT, PLUS LA POSITION. Elle s'appelait
   `--tete` quand le rapport suivait le rang de la rangee ; ce n'est plus
   vrai depuis que chaque rangee declare son format, et une rangee en
   queue peut porter le poster. Un nom qui decrit une garantie disparue
   est pire qu'un nom absent : on s'y fie. */
.nrx-row--poster .nrx-carte__visuel {
	aspect-ratio: 2 / 3;
}

.nrx-carte__visuel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/*
 * Composition des produits sans photographie — le rendu de tout le
 * catalogue tant que `image_path` reste vide.
 */
.nrx-compo {
	position: absolute;
	inset: 0;
	padding: var(--nrx-e-2);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background: var(--nrx-compo-clair);
	color: var(--nrx-titre);
}

.nrx-compo--sombre {
	background: var(--nrx-compo-sombre);
	color: var(--nrx-fond-carte);
}

.nrx-compo__genre,
.nrx-compo__ref {
	font-size: var(--nrx-t-nano);
	line-height: 1.4;
	letter-spacing: var(--nrx-suivi-titre);
	text-transform: uppercase;
	color: var(--nrx-texte-tertiaire);
}

.nrx-compo__nom {
	font-size: 21px;
	line-height: 1.15;
	letter-spacing: -0.02em;
	font-weight: 500;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.nrx-compo__filets {
	display: flex;
	gap: 4px;
	margin-top: var(--nrx-e-2);
}

.nrx-compo__filets span {
	height: 2px;
	width: 16px;
	background: var(--nrx-texte-tertiaire);
}

.nrx-compo__filets span:last-child {
	width: 5px;
}

/*
 * ═══════════════════════════════════════════════════════════════════
 * LE VISUEL EST UN DEPART, ET IL DOIT LE DIRE — 20 aout.
 *
 * Le bouton « VOIR LE PRODUIT » est retire des cartes : le titre et le
 * visuel menent tous deux a la fiche. Restait a le FAIRE SAVOIR.
 *
 * `cursor: pointer` NE VIENT PAS GRATUITEMENT SUR UNE IMAGE. Un `<a>`
 * qui enveloppe un `<img>` porte bien le pointeur par defaut — mais la
 * regle est posee ici quand meme, parce que ce qui la donne
 * aujourd'hui est un defaut de navigateur, pas une declaration de ce
 * depot. Une seule ligne, et l'affordance cesse de dependre d'un
 * accord tacite.
 *
 * RIEN DE PARTICULIER POUR LE TACTILE. Le survol n'y existe pas, et
 * l'affordance y vient de la disposition — une vignette au-dessus d'un
 * titre, dans une carte, se touche.
 *
 * L'ANNEAU DE FOCUS VIENT DE `.nrx :focus-visible`, et il n'est pas
 * redeclare : deux anneaux qui divergent valent moins qu'un seul.
 * `outline-offset: 3px` le pose HORS du visuel, donc visible meme sur
 * une image sombre.
 * ═══════════════════════════════════════════════════════════════════
 */
.nrx-carte__visuel-lien,
.nrx-vignette-lien {
	display: block;
	cursor: pointer;
}

/*
 * LA VIGNETTE GARDE SA TAILLE. Le lien qui l'enveloppe est un bloc de
 * plus dans la rangee du panier et du tiroir : sans ces deux lignes il
 * s'etirerait a la hauteur de la ligne, et la zone cliquable
 * deborderait sur le vide au-dessus et au-dessous de l'image.
 */
.nrx-vignette-lien {
	flex: 0 0 auto;
	align-self: flex-start;
}

/*
 * LE TITRE DE CARTE EST LE SEUL DEPART TABULABLE, et le pointeur le
 * dit aussi : il occupe la largeur de la carte, pas la seule longueur
 * de son texte.
 */
.nrx-carte__nom a,
.nrx-panier__nom a,
.nrx-panneau__article a {
	cursor: pointer;
}

.nrx-carte__corps {
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
	border-top: 1px solid var(--nrx-separation);
}

.nrx-carte__meta {
	font-size: var(--nrx-t-nano);
	letter-spacing: var(--nrx-suivi-titre);
	text-transform: uppercase;
	color: var(--nrx-texte-tertiaire);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/*
 * Deux lignes, hauteur libre. L'export figeait `height:41px` : en espagnol,
 * ou les libelles gagnent 15 a 25 %, un titre s'y serait coupe au milieu
 * d'un mot (critere 8). `min-height` garde l'alignement des cartes sans
 * interdire la troisieme ligne.
 *
 * ═══════════════════════════════════════════════════════════════════════
 * 41 -> 48 px LE 19 AOUT, ET C'EST LE TITRE A DEUX NIVEAUX QUI L'EXIGE.
 *
 * `nrx-t-principal` et `nrx-t-secondaire` posent une tete a 1,45 em et une
 * suite a 0,9 em. Avec l'interligne 1,35 herite sans unite, le bloc mesure
 * 29,36 + 18,23 = 47,59 px. LA RESERVE DE 41 px NE L'ABSORBAIT PAS.
 *
 * CE QUI SE SERAIT PASSE SANS CE CHANGEMENT, ET C'EST LE VRAI RISQUE DU
 * GESTE : dans une rangee mixte, la carte Station aurait porte un bloc
 * titre de 47,59 px et sa voisine a titre simple un bloc de 41 px. Tout ce
 * qui suit — prix, mention, bouton — se serait decale de 6,59 px d'une
 * carte a l'autre. Un decalage de six pixels ne casse rien : il se lit
 * comme un defaut d'alignement dont personne ne trouve la cause.
 *
 * 48 EST LE PREMIER PAS DE LA SERIE D'ESPACEMENT QUI CONTIENT LE BLOC —
 * 40 ne suffit pas, la tete seule en occupe 29,36. C'est aussi ce qui
 * borne `nrx-t-secondaire` par le haut : la suite prend ce que 48 laisse.
 *
 * CE QUE CA COUTE, ET IL FAUT QUE CA RESTE ECRIT : sept pixels de plus
 * sous CHAQUE titre du catalogue, y compris les cartes a une seule ligne.
 * Une reserve ne se paie pas a la carte qui en a besoin, elle se paie a
 * toutes — c'est le prix de l'alignement de la rangee.
 *
 * Deux lignes d'un titre simple font toujours 40,50 px et tiennent donc
 * toujours. La troisieme ligne deborde, comme avant : `min-height` reserve,
 * elle n'interdit pas.
 * ═══════════════════════════════════════════════════════════════════════
 */
.nrx-carte__nom {
	font-size: var(--nrx-t-base);
	line-height: 1.35;
	font-weight: 500;
	margin: 0;
	min-height: 48px;
	text-wrap: pretty;
}

.nrx-carte__nom a {
	color: var(--nrx-titre);
}

.nrx-carte__bas {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nrx-e-1);
	margin-top: auto;
	padding-top: 12px;
	flex-wrap: wrap;
}

.nrx-prix {
	font-size: 16px;
	font-weight: 500;
	color: var(--nrx-titre);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ── boutons ──────────────────────────────────────────────────────── */

.nrx-bouton {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font: inherit;
	font-size: var(--nrx-t-petit);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 500;
	padding: 15px 27px;
	border: 1px solid var(--nrx-titre);
	background: var(--nrx-titre);
	color: var(--nrx-fond-carte);
	cursor: pointer;
	text-align: center;
}

.nrx-bouton:hover {
	background: var(--nrx-texte-courant);
	border-color: var(--nrx-texte-courant);
	color: var(--nrx-fond-carte);
}

/*
 * LE SIGNAL. Un seul par ecran, et il marque l'action principale — jamais
 * un fond, jamais un titre, jamais une bordure decorative.
 */
.nrx-bouton__signal {
	width: 6px;
	height: 6px;
	background: var(--nrx-signal);
	flex: none;
}

.nrx-bouton--discret {
	background: transparent;
	border-color: var(--nrx-texte-courant);
	color: var(--nrx-texte-courant);
	padding: 8px 12px;
	font-size: var(--nrx-t-micro);
	letter-spacing: 0.08em;
}

.nrx-bouton--discret:hover {
	background: var(--nrx-texte-courant);
	color: var(--nrx-fond-carte);
}

/* ── banniere d'accueil ───────────────────────────────────────────── */

/*
 * LA BANNIERE : le texte sur la colonne du site, le panneau jusqu'au bord.
 *
 * Deux exigences qui semblaient s'exclure. L'export les conciliait par une
 * marge negative de la valeur de la gouttiere : sur un canevas large comme
 * le conteneur, le panneau atteignait le bord. Passe 1440 px il s'arretait
 * quelque part entre les deux, aligne sur rien.
 *
 * La grille n'est plus dans le conteneur : elle EST pleine largeur, en deux
 * moities. Le texte est cale a droite de sa moitie, avec une largeur
 * maximale de `(1440 / 2) - gouttiere`. Son bord gauche tombe alors sur
 * `moitie de l'ecran - 664`, ce qui est exactement le bord gauche de
 * `.nrx-w` a toute largeur — la meme colonne, obtenue par un autre chemin.
 *
 * Le panneau occupe l'autre moitie et va jusqu'au bord : c'est un fond, et
 * les fonds restent pleine largeur.
 */
.nrx-hero {
	border-bottom: 1px solid var(--nrx-separation);
	background: var(--nrx-compo-clair);
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 560px;
}

.nrx-hero__colonne {
	display: flex;
	justify-content: flex-end;
}

.nrx-hero__texte {
	align-self: center;
	width: 100%;
	max-width: calc(var(--nrx-largeur-max) / 2 - var(--nrx-gouttiere));
	padding-block: var(--nrx-e-6);
	padding-right: var(--nrx-e-6);
}

.nrx-hero__titre {
	font-size: 52px;
	line-height: 1.06;
	letter-spacing: -0.03em;
	margin: 0 0 20px;
}

.nrx-hero__intro {
	font-size: var(--nrx-t-lead);
	line-height: 1.6;
	margin: 0 0 var(--nrx-e-4);
	max-width: 52ch;
}

/*
 * LA BANNIERE RESPECTE LA LARGEUR MAXIMALE DU RESTE.
 *
 * L'export tirait le panneau hors de la gouttiere par une marge negative :
 * sur un canevas large comme le conteneur, il atteignait le bord. Passe
 * 1440 px il ne l'atteint plus, et s'arrete quelque part entre la gouttiere
 * et le bord — aligne sur rien.
 *
 * Le fond de la section reste pleine largeur ; la grille est cadree comme
 * tout le reste. Un panneau a fond perdu du seul cote droit serait la seule
 * exception du site, et se lirait comme un accident.
 */
.nrx-hero__panneau {
	background: var(--nrx-compo-sombre);
	position: relative;
}

@media (max-width: 767px) {
	.nrx-hero {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	/* Empilee, la banniere reprend la gouttiere ordinaire. */
	.nrx-hero__texte {
		max-width: none;
		padding-inline: var(--nrx-gouttiere);
	}

	.nrx-hero__titre {
		font-size: 34px;
	}

	/*
	 * Meme piege que pour les paves : avec un rapport et sans largeur
	 * explicite, l'enfant de grille se pose au debut de sa colonne au
	 * lieu de la remplir. Il n'etait pas visible ici — la grille n'a
	 * qu'une colonne sous 767 px — mais il l'aurait ete au premier ajout
	 * d'une seconde colonne.
	 */
	.nrx-hero__panneau {
		width: 100%;
		aspect-ratio: 3 / 2;
	}
}

/* ── fiche produit ────────────────────────────────────────────────── */

.nrx-fiche {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: var(--nrx-e-6);
	padding-top: var(--nrx-e-5);
}

@media (max-width: 1023px) {
	.nrx-fiche {
		grid-template-columns: 1fr;
		gap: var(--nrx-e-4);
	}
}

/* LE CADRE SUIT LA RESSOURCE QU IL RECOIT, pas l inverse.

   Il etait en 2:3 depuis la 2.1, quand la fiche n avait qu un seul role
   d image. Depuis que `affiche` et `poster` existent, la fiche demande
   une AFFICHE — 4:3 — et un cadre portrait la recadrait au tiers.

   LE DEFAUT N ETAIT PAS DANS LE GABARIT. Il demandait deja `produit()`,
   donc l affiche : c est la feuille qui imposait un portrait a une
   ressource paysage. Un correctif ecrit sur le PHP aurait ete pose
   contre un mecanisme qui n etait pas la cause (§10.5).

   LA LARGEUR RESTE BORNEE. La colonne gauche mesure 717 px, et le
   rapport y donnait 1075 px de haut en 2:3 ; en 4:3 elle donnerait
   538 px, ce qui reste beaucoup pour un visuel de fiche a cote d un
   texte court. On borne donc la largeur, et la hauteur suit :
   560 x 420. */
.nrx-fiche__media {
	position: relative;
	aspect-ratio: 4 / 3;
	max-width: 560px;
	margin-inline: auto;
	overflow: hidden;
	border: 1px solid var(--nrx-separation);
}

.nrx-fiche__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/*
 * LA BANDE DE VIGNETTES — ELLE REMPLACE LA BARRE D'ONGLETS TEXTUELS.

 * POURQUOI DES VIGNETTES. Une entree de galerie peut etre une vue de
 * detail, et demain une video ou un modele 3D. « Rouge » ne nomme aucune
 * de ces trois choses ; une vignette montre ce qu'elle est.

 * ELLE NE DEFILE PAS, ET C'EST CE QUI BORNE LA GALERIE A DIX.
 *
 * `nowrap` sans defilement est une contrainte, pas un oubli : une bande
 * qui defile cache combien il reste, et une bande qui se replie sur deux
 * lignes deplace tout ce qui la suit. Les vignettes RETRECISSENT donc
 * jusqu'a `--nrx-vignette-min`, et au-dela le verificateur refuse
 * l'entree — la borne est calculee dans `VerificateurVisuels`, a partir
 * des trois memes quantites que celles posees ici. Un banc verifie que
 * les deux ne divergent pas.
 *
 *   base 64 px, minimum 36, ecart 4, boite media 432 a la rupture etroite
 *   dix vignettes : 10 x 64 + 9 x 4 = 676 > 432, donc elles retrecissent
 *   a (432 - 36) / 10 = 39,6 px — au-dessus du minimum.

 * `flex-basis` PLUTOT QUE `flex: 1`. A cinq entrees, `flex: 1` etirerait
 * chaque vignette a 84 px et la bande n'aurait plus l'air d'une bande.
 * La base fixe donne 64 px a cinq, 39,6 a dix, et rien a decider entre.
 */
.nrx-vignettes {
	--nrx-vignette-base: 64px;
	--nrx-vignette-min: 36px;

	display: flex;
	flex-wrap: nowrap;
	gap: 4px;
	max-width: 560px;
	margin: var(--nrx-e-1) auto 0;
}

.nrx-vignette {
	flex: 0 1 var(--nrx-vignette-base);
	min-width: var(--nrx-vignette-min);
	aspect-ratio: 4 / 3;
	padding: 0;
	border: 1px solid var(--nrx-separation);
	background: none;
	cursor: pointer;
	overflow: hidden;
}

/* `aria-current` PORTE L'ETAT, ET LA FEUILLE LE LIT — l'etat n'est ecrit
   qu'une fois, la ou un lecteur d'ecran le trouve. */
.nrx-vignette[aria-current="true"] {
	border-color: var(--nrx-titre);
	outline: 1px solid var(--nrx-titre);
}

.nrx-vignette:not([aria-current="true"]) img {
	opacity: 0.55;
}

.nrx-vignette img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * LES FLECHES — CE QUI REND LA GALERIE UTILISABLE AU DOIGT.
 *
 * Une vignette de 39,6 px de large est une cible etroite ; les fleches
 * sont larges, au milieu de l'image, et n'exigent aucune visee.
 *
 * ELLES S'ARRETENT AUX EXTREMITES. `aria-disabled` et non `disabled` :
 * l'attribut sortirait le bouton du parcours au moment precis ou on
 * l'atteint, et le focus tomberait sur le corps du document.
 */
.nrx-fleche {
	position: absolute;
	top: 50%;
	z-index: 3;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--nrx-separation);
	background: var(--nrx-fond-carte);
	color: var(--nrx-titre);
	font: inherit;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.nrx-fleche--avant {
	left: var(--nrx-e-1);
}

.nrx-fleche--apres {
	right: var(--nrx-e-1);
}

.nrx-fleche[aria-disabled="true"] {
	opacity: 0.35;
	cursor: default;
}

.nrx-fiche__titre {
	font-size: 34px;
	line-height: 1.1;
	margin: 0 0 var(--nrx-e-2);
}

.nrx-fiche__description {
	font-size: var(--nrx-t-lead);
	line-height: 1.6;
	margin: 0 0 var(--nrx-e-3);
}

/* Les valeurs d'une liste d'options, sur la fiche et dans le modal.
   UNE CARACTERISTIQUE, PAS UN CHAMP : le choix se fait au panier, et rien
   ici ne doit ressembler a une commande a remplir. */
.nrx-fiche__option {
	display: inline-flex;
	align-items: center;
	gap: var(--nrx-e-1);
	margin: 0;
	color: var(--nrx-texte-courant);
	line-height: 1.5;
}


.nrx-fiche__option .nrx-note {
	display: block;
}

/* Le pouce d'appreciation. `currentColor` est tout l'interet du trace en
   ligne : l'icone suit la couleur du bouton, y compris au survol et au
   focus, sans qu'aucune regle ne l'y oblige. */
.nrx-pouce {
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
	flex: 0 0 auto;
}

/* ── LE SELECTEUR DE COULEUR ──────────────────────────────────────────
 *
 * Il remplace les pastilles d'affichage, qui se regardaient sans se
 * cliquer. Le §3 de l'addendum des options gelait le lieu du choix au
 * panier ; la clef de ligne l'a leve, et les options agissent desormais sur
 * la fiche et dans la modale.
 *
 * DEUX ETATS, ET C'EST LA FEUILLE QUI LES TIENT — pas le script.
 *
 *   sans `nrx-js` : le bouton n'existe pas, la liste est depliee. C'est le
 *                   rendu final quand le script ne s'execute pas, et il est
 *                   complet : de vrais boutons radio, postables et
 *                   navigables.
 *   avec `nrx-js` : le bouton parait, la liste se replie derriere lui et
 *                   ne s'ouvre que sur `aria-expanded="true"`.
 *
 * Le script ne pose ni ne retire aucune classe sur le composant : il ne
 * touche qu'a `aria-expanded`, qui est l'etat lui-meme et non son reflet.
 * Un attribut d'accessibilite et une classe de presentation qui disent la
 * meme chose finissent par se contredire. */
.nrx-selecteur {
	/* PLUS D'ANCRE ICI, ET C'EST VOULU.
	 *
	 * `position: relative` y vivait pour que la liste, alors en `absolute`,
	 * se place par rapport a ce conteneur. La liste est passee en `fixed`
	 * pour echapper aux `overflow` qui la rognaient : elle se place
	 * desormais par rapport a la FENETRE, et c'est le script qui la pose.
	 *
	 * Garder l'ancre ferait croire qu'elle sert encore. */
	/* EN RANGEE, SUR LES QUATRE SURFACES.
	 *
	 * Le nom etait au-dessus du controle — la mesure de la page pleine
	 * largeur — et trois regles contextuelles le ramenaient a gauche, une
	 * par surface. La quatrieme allait s'ajouter. C'est la disposition du
	 * composant, pas celle d'un endroit. */
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--nrx-e-1);
	margin: 0;
	min-width: 0;
}

/* LE NOM DE L'OPTION, UNE SEULE CLASSE POUR LES QUATRE SURFACES.
   Il y en avait trois — `nrx-fiche__option-nom`, `nrx-panier__option-nom`,
   `nrx-panneau__option-nom` — qui disaient la meme chose a un `display` et
   un `flex` pres. Elles restent pour le `<select>` et la valeur unique, qui
   gardent leur enveloppe par surface ; le selecteur, lui, porte la sienne. */
/* ── LE NOM D'UN EMPLACEMENT — UNE SEULE ECRITURE POUR QUATRE CLASSES ──
 *
 * IL Y EN AVAIT QUATRE, ET ELLES DISAIENT LA MEME CHOSE :
 * `nrx-selecteur__nom`, `nrx-fiche__option-nom`, `nrx-panier__option-nom`,
 * `nrx-panneau__option-nom`. Meme taille, meme interlettre, meme capitale,
 * meme couleur — a un `display` et un `flex` pres, poses au hasard des
 * surfaces.
 *
 * ET QUATRE BLOCS CONTEXTUELS PAR-DESSUS pour les ramener au meme reglage,
 * un par surface. La demande d'aujourd'hui — le meme style sur la fiche et
 * sur le panier — en aurait ajoute deux. Six ecritures d'une intention
 * unique, c'est la divergence garantie au premier reglage suivant.
 *
 * LES QUATRE CLASSES RESTENT — le balisage de chaque surface les nomme, et
 * les renommer est un autre chantier. Ce qui change est qu'elles lisent une
 * seule declaration.
 *
 * PAS DE `display: block` : `.nrx-fiche__option-nom` le portait, et c'est
 * lui qui gardait `TAILLE` au-dessus de sa valeur pendant que `COULEUR`
 * etait passe a gauche du sien. */
.nrx-selecteur__nom,
.nrx-fiche__option-nom,
.nrx-panier__option-nom,
.nrx-panneau__option-nom {
	font-size: var(--nrx-t-nano);
	letter-spacing: var(--nrx-suivi-menu);
	text-transform: uppercase;
	color: var(--nrx-texte-secondaire);
	flex: 0 0 auto;
	/* LA COLONNE COMMUNE. `COULEUR` fait sept caracteres ; sans largeur
	   partagee, les controles de deux emplacements demarrent a deux
	   abscisses differentes. */
	min-width: 7ch;
}

.nrx-selecteur__bouton {
	/* MASQUE PAR DEFAUT : il ne sert qu'au script. Sans lui, la liste
	   depliee EST le controle, et un bouton qui n'ouvre rien serait pire
	   qu'absent. */
	display: none;
}

.nrx-js .nrx-selecteur__bouton {
	display: inline-flex;
	align-items: center;
	gap: var(--nrx-e-1);
	/* MEME REMPLISSAGE QUE LE CADRE DE LA VALEUR UNIQUE, sur les quatre
	   surfaces. Il valait `e-1 e-2` ici et la moitie au tiroir et dans la
	   modale : deux reglages pour un seul controle. */
	padding: calc(var(--nrx-e-1) / 2) var(--nrx-e-1);
	/* LARGEUR FIXE, ET NON UN PLANCHER — c'est ce qui aligne les rangees.
	 *
	 * `min-width` laissait le bouton suivre son libelle : « Blanc » et
	 * « Rouge » ne font pas la meme largeur, et tout ce qui suit sur la
	 * rangee glissait d'un article a l'autre. Deux casquettes l'une sous
	 * l'autre ne presentaient pas `TAILLE` a la meme abscisse.
	 *
	 * 18ch ET NON 12, PARCE QUE `border-box` MANGE LE REMPLISSAGE. 12ch
	 * faisait 84 px AU TOTAL : moins 32 px de remplissage, il restait 52 px
	 * de contenu pour une pastille de 16, deux ecarts de 8, un chevron de 12
	 * — soit 44 px d'accessoires — et 8 px pour le libelle. Le chevron
	 * sortait du cadre.
	 *
	 * Le compte se refait a l'endroit : 18ch valent 126 px, moins 32 de
	 * remplissage et 44 d'accessoires, il reste 50 px de texte. « Charcoal »,
	 * le plus long du catalogue, en demande 48.
	 *
	 * UN LIBELLE PLUS LONG ELARGIT ENCORE SON BOUTON — la largeur minimale du
	 * contenu reste un plancher que rien ne franchit. L'alignement se degrade
	 * alors pour cet article, et c'est prefere a un nom de couleur tronque en
	 * silence dans un panier. */
	width: 15ch;
	background: var(--nrx-fond-carte);
	border: 1px solid var(--nrx-separation);
	border-radius: 4px;
	font: inherit;
	font-size: var(--nrx-t-menu);
	color: var(--nrx-texte-courant);
	cursor: pointer;
	text-align: left;
}

.nrx-js .nrx-selecteur__bouton:hover {
	border-color: var(--nrx-texte-secondaire);
}

.nrx-selecteur__ton {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--nrx-nuancier-ton);
	/* Le contour est sur TOUTES les taches, y compris les sombres — meme
	   raison qu'au panier : un blanc sur fond blanc disparait sans lui. */
	border: 1px solid var(--nrx-separation);
	flex: 0 0 auto;
}

.nrx-selecteur__lu {
	flex: 1 1 auto;
}

.nrx-selecteur__fleche {
	display: inline-flex;
	width: 12px;
	height: 12px;
	flex: 0 0 auto;
	color: var(--nrx-texte-secondaire);
}

.nrx-selecteur__fleche svg {
	width: 100%;
	height: 100%;
}

/* LA LISTE — DEPLIEE PAR DEFAUT, ET C'EST LE CAS SANS SCRIPT. */
.nrx-selecteur__liste {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.nrx-js .nrx-selecteur__liste {
	display: none;
	/* `fixed` ET NON `absolute` — C'EST LE SEUL MOYEN D'ECHAPPER AU
	 * ROGNAGE.
	 *
	 * Un element en position absolue est coupe par le premier ancetre
	 * portant un `overflow` autre que `visible`. Il y en a trois au-dessus
	 * de cette liste : `.nrx-panneau` en `hidden`, `.nrx-panneau__defile` en
	 * `auto`, et sur la page `.nrx-defile` dont l'`overflow-x` promeut
	 * l'autre axe. Aucun n'est de trop — le premier garde le pied de
	 * paiement sous les yeux, le dernier empeche un tableau a cinq colonnes
	 * de deborder.
	 *
	 * LA METTRE DANS LE FLUX A ETE ESSAYE, ET REFUSE : elle poussait alors
	 * l'emplacement voisin hors de la rangee, et restait prisonniere du
	 * defilement. Un menu deroulant doit passer PAR-DESSUS, pas ecarter.
	 *
	 * `fixed` se place par rapport a la fenetre : plus aucun ancetre ne la
	 * coupe. Le prix est que sa position ne peut plus venir de la feuille —
	 * c'est le script qui la pose a l'ouverture, et qui ferme au
	 * defilement plutot que de la suivre. */
	position: fixed;
	top: 0;
	left: 0;
	/* AU-DESSUS DE CE QUI SUIT DANS LA MEME PILE. Dans le tiroir, la liste
	   s'ouvre par-dessus les lignes suivantes du panier ; sans cela elle
	   serait peinte SOUS elles, visible a moitie et cliquable nulle part.
	   Ce qui la recouvre reellement se voit au navigateur (§10.13), pas
	   ici : la feuille ne decrit qu'un ordre, pas un rendu. */
	/* AU-DESSUS DU PANNEAU ET DE LA MODALE. En `fixed`, la liste reste dans
	   le contexte d'empilement de son ancetre positionne — le panneau, qui
	   vaut 60. Un rang eleve ici la met au-dessus de tout ce que ce panneau
	   contient, ce qui est ce qu'on demande. */
	z-index: 80;
	/* LA LARGEUR SUIT LE BOUTON, ET LE SCRIPT LA POSE. `min-width: 100%`
	   n'a plus de sens en `fixed` : le pourcentage se lirait sur la fenetre
	   et la liste barrerait l'ecran. Ce qui reste ici est le plafond. */
	max-width: min(16rem, 90vw);
	padding: var(--nrx-e-1);
	background: var(--nrx-fond-carte);
	border: 1px solid var(--nrx-separation);
	border-radius: 4px;
}

/* L'ADJACENCE EST EXIGEE PAR LE BALISAGE : la liste suit immediatement le
   bouton. Un element glisse entre les deux ouvrirait un selecteur qui ne
   s'ouvre plus, sans rien casser ailleurs. */
.nrx-js .nrx-selecteur__bouton[aria-expanded="true"] + .nrx-selecteur__liste {
	display: flex;
}


.nrx-selecteur__valeur {
	display: flex;
	align-items: center;
	gap: var(--nrx-e-1);
	padding: var(--nrx-e-1);
	border-radius: 3px;
	font-size: var(--nrx-t-petit);
	color: var(--nrx-texte-courant);
	cursor: pointer;
}

.nrx-selecteur__valeur:hover {
	background: var(--nrx-fond-page);
}

.nrx-selecteur__radio {
	/* TRANSPARENT, PAS SUPPRIME. `display: none` et `visibility: hidden` le
	   sortiraient de l'ordre de tabulation : la navigation aux fleches, qui
	   est tout ce qu'on gagne a prendre un vrai bouton radio, disparaitrait
	   avec. Meme regle qu'au panier. */
	width: 0;
	height: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.nrx-selecteur__tache {
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--nrx-nuancier-ton);
	border: 1px solid var(--nrx-separation);
	flex: 0 0 auto;
}

/* LA VALEUR RETENUE SE LIT SANS PERCEVOIR LA COULEUR — §4.1.
   Un anneau, donc une difference de FORME. Une simple difference de teinte
   ne se lirait pas en niveaux de gris, et c'est precisement ce que le
   composant sert a montrer. */
.nrx-selecteur__radio:checked + .nrx-selecteur__tache {
	outline: 2px solid var(--nrx-titre);
	outline-offset: 3px;
}

.nrx-selecteur__radio:focus-visible + .nrx-selecteur__tache {
	outline: 2px solid var(--nrx-signal);
	outline-offset: 3px;
}

/*
 * ═══════════════════════════════════════════════════════════════════
 * LA ZONE D INFORMATION DE REGIME — colonne gauche, sous la vignette.
 *
 * UNE ZONE NOMMEE, PAS UNE LIGNE POSEE POUR UN CAS. Elle ne porte
 * aujourd hui qu un message — la precommande — et elle est ecrite pour
 * en porter d autres. `gap` entre ses enfants plutot que des marges sur
 * chacun : le deuxieme message n aura rien a declarer pour se placer.
 *
 * ELLE PORTE L INFORMATION AU LECTEUR D ECRAN, ET ELLE EST SEULE A LE
 * FAIRE. Le bandeau du visuel est `aria-hidden` ; si cette zone
 * disparaissait, l information n existerait plus qu en pixels.
 *
 * ELLE EST DANS LA COLONNE GAUCHE PAR SA PLACE DANS LE GABARIT, et
 * aucune regle d ordre n est ecrite ici : `order` ou `tabindex`
 * feraient diverger l ordre de lecture de l ordre du document.
 * ═══════════════════════════════════════════════════════════════════
 */
.nrx-regime {
	display: flex;
	flex-direction: column;
	gap: var(--nrx-e-1);
	margin-top: var(--nrx-e-2);
	padding: var(--nrx-e-2);
	border-left: 2px solid var(--nrx-separation);
}

/*
 * DEUX POINTS DE MOINS — 21 aout, et c'est la TAILLE qui descend, pas
 * le texte.
 *
 * Le libelle a ete arbitre mot a mot le 20 aout et un fil-piege LPC le
 * garde : il dit ce qui ARRIVE — inscription sur une liste, un courriel
 * quand le produit sera disponible — et non ce qui n'arrivera pas. Le
 * raccourcir aurait touche a cet arbitrage ; le reduire ne le touche pas.
 *
 * DEUX POINTS FONT 2,67 px. De 14, cela mene a 11,33 : le jeton le plus
 * proche est `--nrx-t-micro` a 11 px, a un tiers de pixel. On descend a
 * un JETON et non a une valeur calculee — une taille ecrite en dur serait
 * la seule de la feuille.
 *
 * LE CONTRASTE NE BOUGE PAS : `--nrx-texte-secondaire` sur blanc rend
 * 5,33:1, au-dessus du 4,5:1 de AA, et AA ne fixe aucune taille minimale.
 */
.nrx-regime__mention {
	margin: 0;
	max-width: 46ch;
	font-size: var(--nrx-t-micro);
	line-height: 1.5;
	color: var(--nrx-texte-secondaire);
}

/*
 * LE RUBAN DE REGIME — ANCRE AU COIN, A 45 DEGRES.

 * IL ETAIT UNE BANDE HORIZONTALE A 79 % DE LA HAUTEUR, et ce pourcentage
 * n'etait pas un choix de mise en page : il alignait le code sur la bande
 * DESSINEE dans `poster.jpg` — 77 lignes sur 1800 — que personne ne
 * servait. Le ruban ne s'aligne plus sur un fichier, donc les 79 % n'ont
 * plus d'objet et sortent.

 * LA CLASSE GARDE SON NOM. C'est la forme qui change, pas la regle ; la
 * renommer ferait recrire deux controles de `PrecommandeTest` dont
 * l'exigence — muet, et absent hors precommande — n'a pas bouge.

 * LA GEOMETRIE, ET POURQUOI ELLE S'ECRIT AINSI.

 * `--nrx-ruban-coupe` (d) est la distance au coin ou l'axe du ruban coupe
 * chaque bord. Sa corde visible vaut donc d * racine2. La boite est posee
 * en (0,0), son centre est amene en (d/2, d/2) par la translation, puis
 * la rotation se fait autour de ce centre — qu'elle ne deplace pas.
 *
 *   tx = (d - largeur) / 2      ty = d/2 - hauteur/2
 *
 * Les pourcentages d'un `translate()` se rapportent aux dimensions de
 * l'element : `100%` est sa largeur, `50%` sa demi-hauteur. La formule
 * s'ecrit donc sans connaitre ni l'une ni l'autre.

 * `--nrx-ruban-long` (L) DOIT EXCEDER d * racine2 = 212 px, sinon les
 * extremites s'arretent AVANT les bords et le ruban devient un losange
 * pose dans le coin. A 260 px il depasse de 24 px de chaque cote, et les
 * deux conteneurs — `.nrx-fiche__media` et `.nrx-apercu__visuel` — le
 * coupent : tous deux sont `relative` ET `overflow: hidden`.

 * d = 150 px VIENT DE LA PLUS LONGUE DES TROIS LANGUES, mesuree le
 * 20 aout a 11 px, 600, suivi 0,16 em :
 *
 *   fr  BIENTOT DISPONIBLE   150,3 px   <- le cas qui decide
 *   es  PROXIMAMENTE         111,0 px
 *   en  COMING SOON          100,0 px
 *
 * La corde fait 212,1 px : le francais y laisse 30,9 px de part et
 * d'autre. Ce n'est pas le francais qui a fixe d, c'est le plus long des
 * trois — il se trouve que c'est lui.

 * `nowrap` FAIT PARTIE DE LA FORME. Un ruban dont le texte passe a la
 * ligne n'est plus un ruban : il epaissit et sa corde ne correspond plus
 * a rien de mesure.

 * `pointer-events: none` — il couvre le visuel sans rien intercepter.

 * FOND OPAQUE, ET C'EST CE QUI TIENT LIEU DE MESURE DE CONTRASTE. Il se
 * pose sur une image dont la luminosite varie d'un produit a l'autre ; un
 * fond translucide ferait dependre la lisibilite du visuel qu'il couvre,
 * et aucune mesure prise sur un produit ne vaudrait pour le suivant.
 */
.nrx-bandeau-regime {
	--nrx-ruban-coupe: 150px;
	--nrx-ruban-long: 260px;

	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: var(--nrx-ruban-long);
	margin: 0;
	padding: 6px var(--nrx-e-2);
	transform:
		translate(
			calc((var(--nrx-ruban-coupe) - 100%) / 2),
			calc(var(--nrx-ruban-coupe) / 2 - 50%)
		)
		rotate(-45deg);
	background: var(--nrx-titre);
	color: var(--nrx-fond-carte);
	font-size: var(--nrx-t-micro);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: var(--nrx-suivi-titre);
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;
	pointer-events: none;
}

.nrx-fiche__prix {
	font-size: 30px;
	font-weight: 500;
	color: var(--nrx-titre);
	font-variant-numeric: tabular-nums;
	margin: 0 0 var(--nrx-e-3);
}

.nrx-fiche__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	font-size: var(--nrx-t-menu);
	color: var(--nrx-texte-secondaire);
	margin-top: var(--nrx-e-3);
}

/* Indication de langue du contenu (§5). Discrete, et jamais en cyan. */
.nrx-languecontenu {
	font-size: var(--nrx-t-micro);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border: 1px solid var(--nrx-separation);
	padding: 4px 8px;
	color: var(--nrx-texte-secondaire);
}

/* ── formulaires ──────────────────────────────────────────────────── */

.nrx-champ {
	display: block;
	font-size: var(--nrx-t-micro);
	letter-spacing: var(--nrx-suivi-menu);
	text-transform: uppercase;
	color: var(--nrx-texte-secondaire);
	margin-bottom: var(--nrx-e-1);
}

.nrx-saisie {
	font: inherit;
	font-size: var(--nrx-t-petit);
	color: var(--nrx-texte-courant);
	background: var(--nrx-fond-carte);
	border: 1px solid var(--nrx-separation);
	padding: 12px 14px;
	width: 100%;
	max-width: 340px;
}

.nrx-saisie:focus {
	border-color: var(--nrx-texte-courant);
}

.nrx-saisie--nombre {
	max-width: 96px;
}

/* ── tableaux ─────────────────────────────────────────────────────── */

.nrx-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: var(--nrx-e-3);
}

.nrx-table th,
.nrx-table td {
	text-align: left;
	padding: 14px 12px;
	border-bottom: 1px solid var(--nrx-separation);
	vertical-align: top;
}

.nrx-table thead th {
	font-size: var(--nrx-t-micro);
	letter-spacing: var(--nrx-suivi-menu);
	text-transform: uppercase;
	color: var(--nrx-texte-secondaire);
	font-weight: 400;
	white-space: nowrap;
}

.nrx-table .col--nombre {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.nrx-table tfoot th {
	text-align: right;
	font-weight: 400;
}

.nrx-table__total td {
	font-size: 18px;
	font-weight: 600;
	color: var(--nrx-titre);
}

.nrx-typeligne {
	display: block;
	font-size: var(--nrx-t-micro);
	letter-spacing: var(--nrx-suivi-menu);
	text-transform: uppercase;
	color: var(--nrx-texte-tertiaire);
	margin-top: 4px;
}

/* Un tableau ne se met pas en colonne : il defile, dans son propre cadre. */
.nrx-defile {
	overflow-x: auto;
}

/* ── etats vides ──────────────────────────────────────────────────── */

.nrx-vide {
	padding: var(--nrx-e-6) 0;
	max-width: 56ch;
}

.nrx-vide p {
	font-size: var(--nrx-t-lead);
	line-height: 1.6;
	margin: 0 0 var(--nrx-e-3);
}

.nrx-note {
	font-size: var(--nrx-t-menu);
	line-height: 1.6;
	color: var(--nrx-texte-secondaire);
	max-width: 72ch;
	margin-top: var(--nrx-e-3);
}

/* LE POT DE MIEL DU FORMULAIRE DE DEMANDE.

   `position: absolute` HORS CADRE PLUTOT QUE `display: none`. Une part des
   robots ecarte deja ce qui porte `display: none` ou `visibility: hidden` —
   ce sont les deux premieres regles qu'un remplisseur apprend. Un champ
   pousse hors de l'ecran reste, pour eux, un champ ordinaire.

   IL NE SUFFIT PAS SEUL, ET LE GABARIT POSE LE RESTE : `aria-hidden` le
   retire de l'arbre d'accessibilite, `tabindex="-1"` de l'ordre de
   tabulation. Sans ces deux-la, une personne qui navigue au clavier
   arriverait dessus sans le voir, le remplirait, et sa demande serait
   avalee en silence — le contraire exact de ce que ce champ doit faire. */
.nrx-piege {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.nrx-etat {
	display: inline-block;
	font-size: var(--nrx-t-micro);
	letter-spacing: var(--nrx-suivi-menu);
	text-transform: uppercase;
	color: var(--nrx-texte-secondaire);
	margin-bottom: var(--nrx-e-2);
}

.nrx-retire {
	color: var(--nrx-alerte);
	font-size: var(--nrx-t-petit);
}

.nrx-titre-page {
	font-size: 40px;
	line-height: 1.1;
	margin: var(--nrx-e-5) 0 var(--nrx-e-3);
}

@media (max-width: 767px) {
	.nrx-titre-page {
		font-size: 30px;
	}

	.nrx-fiche__titre {
		font-size: 26px;
	}
}

.nrx-fil {
	padding-top: var(--nrx-e-4);
}

.nrx-fil a {
	color: var(--nrx-texte-secondaire);
}

/* ------------------------------------------------------------------ *
 *  12. PAGES DE DOCUMENT ET D'ETAT (2.1.e)
 * ------------------------------------------------------------------ */

.nrx-doc {
	max-width: 68ch;
	padding-top: var(--nrx-e-5);
	padding-bottom: var(--nrx-e-6);
}

.nrx-doc__intro {
	font-size: var(--nrx-t-lead);
	line-height: 1.6;
	margin: 0 0 var(--nrx-e-3);
}

.nrx-doc p {
	line-height: 1.7;
	margin: 0 0 var(--nrx-e-3);
}

/*
 * Termes et definitions. En colonnes tant que la place existe, empilees
 * ensuite : un terme et sa definition ne se lisent pas cote a cote sur
 * 320 px, et l'espagnol y allonge les deux.
 */
.nrx-defs {
	display: grid;
	grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
	gap: var(--nrx-e-2) var(--nrx-e-3);
	margin: var(--nrx-e-4) 0;
	padding-top: var(--nrx-e-3);
	border-top: 1px solid var(--nrx-separation);
}

.nrx-defs dt {
	margin: 0;
}

.nrx-defs dd {
	margin: 0;
	line-height: 1.6;
}

@media (max-width: 639px) {
	.nrx-defs {
		grid-template-columns: 1fr;
		gap: 4px var(--nrx-e-2);
	}

	.nrx-defs dd {
		margin-bottom: var(--nrx-e-2);
	}
}

/* Page d'attente : le contenu occupe la hauteur plutot que de flotter en tete. */
.nrx-attente {
	display: flex;
	align-items: center;
	min-height: 100vh;
}

/* ------------------------------------------------------------------ *
 *  13. PAVES EDITORIAUX
 *
 *  Deux paves cote a cote entre la banniere et la premiere rangee.
 *
 *  LE RAPPORT EST IMPOSE ET TEND VERS LE CARRE : 5:4 en bureau, 1:1 sous
 *  1024 px, 4:3 sous 768 px, puis libre sous 480 px ou une hauteur minimale
 *  remplace le rapport — a cette largeur, un rapport impose ecraserait le
 *  texte au lieu de le cadrer.
 *
 *  Le fond reprend `--nrx-compo-clair` plutot que d'ouvrir un troisieme
 *  degrade : l'export en posait un quatrieme, voisin des deux autres, que
 *  le §4 a justement demande de ramener.
 * ------------------------------------------------------------------ */

/*
 * A FOND PERDU, comme la banniere et le pied.
 *
 * La regle de la page : un bloc qui porte un fond distinct va jusqu'aux
 * bords, sinon son fond s'arrete au milieu de l'ecran et se lit comme un
 * accident. Un bloc sans fond reste dans la colonne, sinon la page perd sa
 * lecture.
 *
 * AUCUNE GOUTTIERE ENTRE LES DEUX. Ils se touchent, separes par un filet
 * d'un pixel. Le fond sombre essaye en 2.1 a ete retire : il faisait du
 * pave de droite le seul aplat fonce de la page hors pied, et attirait
 * l'oeil plus que la banniere qui porte pourtant le signal de l'ecran.
 * La distinction viendra des visuels, comme chez les references.
 *
 * LE CONTENU EST CENTRE DANS SA MOITIE (9 aout). Il calait auparavant sur
 * la couture, avec la largeur maximale de la banniere, pour faire tomber
 * le bord du bloc de texte sur le bord de la colonne du site.
 *
 * Cette calade a ete abandonnee avec le centrage, et non malgre lui :
 * c'etait un dispositif d'alignement de BORD, et un bord n'existe que par
 * le fer a gauche. Une fois le texte centre, les lignes sont inegales des
 * deux cotes et il n'y a plus de bord a aligner. Le decalage de 143 px
 * aurait survecu a l'alignement qu'il servait, en tassant les deux blocs
 * autour de la couture avec deux vides aux extremites.
 *
 * Ce n'est donc pas le centrage qui a defait la composition : c'est le
 * centrage qui l'a rendue sans objet.
 */
.nrx-edit {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

/*
 * `width: 100%` N'EST PAS UNE PRECAUTION, C'EST LA CORRECTION.
 *
 * Un enfant de grille s'etire pour remplir sa colonne — `justify-self`
 * vaut `normal`, qui se comporte comme `stretch`. MAIS la specification
 * d'alignement prevoit une exception : pour une boite qui porte un
 * RAPPORT, `normal` se comporte comme `start`.
 *
 * Le pave portait `aspect-ratio` : il cessait donc d'etre dimensionne par
 * sa colonne et se dimensionnait par sa hauteur de contenu multipliee par
 * le rapport. A 2560 px, 389 px de contenu donnaient 486 px de large au
 * lieu de 1280 — les deux paves poses au debut de leur colonne, sans se
 * toucher ni remplir la largeur.
 *
 * Rien n'etait faux dans la grille, ni dans les rapports, ni dans les
 * largeurs declarees : `1fr` valait bien la moitie de l'ecran. C'est le
 * mode de placement qui avait change, sans qu'aucune regle ne le dise.
 *
 * Une largeur explicite retire la boite du cas d'exception.
 */
.nrx-pave {
	width: 100%;
	aspect-ratio: 5 / 4;
	min-height: 340px;
	/*
	 * Le rapport donne une forme, il ne doit pas creer un probleme. Sans
	 * plafond, un pave de 1280 px de large en fait 1024 de haut pour trois
	 * lignes de texte : ce n'est plus un pave, c'est une section pleine
	 * page. Au-dela, la hauteur cesse de suivre la largeur.
	 */
	max-height: 520px;
	display: flex;
	/*
	 * `stretch` ET NON `center` : le contenu remplit desormais la hauteur
	 * du pave, parce que ses deux extremites ont chacune leur bande — le
	 * titre et le texte en haut sur l'aplat reserve, le bouton en bas sur
	 * l'aplat du bureau. Centre, le bloc entier flottait au milieu,
	 * c'est-a-dire sur les sujets.
	 */
	align-items: stretch;
	background: var(--nrx-pave-gauche);

	/*
	 * LES DEUX DECLARATIONS QUI FONT LE CADRAGE, ET ELLES VONT ENSEMBLE.
	 *
	 * `relative` donne a l'image son ancetre positionne — sans lui elle
	 * remonterait jusqu'au bloc de visualisation et se poserait sur la page.
	 * C'est le defaut de l'ancre du libelle de couleur, le 14 aout : un
	 * element absolu sans ancetre positionne n'echoue nulle part, il se
	 * place ailleurs.
	 *
	 * `overflow: hidden` EST CE QUI ROGNE LATERALEMENT. L'image est calee
	 * sur la HAUTEUR du pave ; quand le pave est plus etroit qu'elle, ce
	 * sont ses cotes qui sortent, et c'est ce rognage-la qui est permis.
	 * Sans cette ligne, l'image deborderait sur le pave voisin.
	 */
	position: relative;
	overflow: hidden;
}

.nrx-pave:first-child {
	/*
	 * La couture est un filet d'un pixel, pas un espace : les deux paves
	 * se touchent, et c'est ce trait qui les separe. Un `gap` aurait
	 * rouvert le vide que le fond perdu venait de fermer.
	 */
	border-right: 1px solid var(--nrx-separation);
}

/*
 * LE CENTRAGE SE JOUE A DEUX ENDROITS, ET IL FAUT LES DEUX.
 *
 * `justify-content` place la COLONNE au milieu du pave — c'est le pave qui
 * est en flex. `text-align` place le CONTENU au milieu de la colonne. L'un
 * sans l'autre laisse un centrage a moitie fait : une colonne centree dont
 * le texte reste ferre a gauche, ou un texte centre dans une colonne
 * toujours collee a la couture.
 */
/*
 * LE GROUPE EST REDUIT A `.nrx-pave`. `.nrx-pave--droite` ne parait
 * jamais seule — le gabarit ecrit les deux classes — donc la seconde part
 * du groupe ne selectionnait rien de plus. Elle genait : `.nrx-pave--droite`
 * porte desormais SON fond, et un lecteur de feuille qui interroge ce
 * selecteur lit le PREMIER bloc qui le porte. Le groupe l'aurait fait lire
 * une regle de centrage la ou on cherche une couleur.
 */
.nrx-pave {
	justify-content: center;
}

.nrx-pave--droite {
	background: var(--nrx-pave-droit);
}

/*
 * L'IMAGE DE FOND — le point qui decide du rendu.
 *
 * ELLE EST CALEE SUR LA HAUTEUR DU PAVE, ET SA LARGEUR EN DERIVE. C'est
 * la seule disposition ou le sujet n'est JAMAIS coupe en haut ni en bas,
 * a n'importe quelle largeur d'ecran. Ce qui sort du cadre sort par les
 * cotes, et le rognage lateral est celui qui est permis.
 *
 * `object-fit: cover` EST EXACTEMENT CE QU'IL NE FAUT PAS. Il recadrerait
 * en silence : les paves sont larges et bas, les images presque carrees,
 * et le recadrage couperait le sujet sans qu'aucun controle ne le dise.
 * C'est le defaut de la vignette de panier du 18 aout — rapport juste,
 * rendu faux, trois controles verts passes a cote. Un banc l'interdit.
 *
 * `max-width: none` N'EST PAS UNE PRECAUTION. `.nrx img` plafonne toute
 * image a `max-width: 100%` : sans cette ligne, la largeur derivee serait
 * ramenee a celle du pave et le rapport ecrase. C'est le meme plafond qui
 * a rendu la vignette de panier a 20 x 48 pour un rapport declare a 4:3.
 *
 * AUCUN `pointer-events` ICI, ET C'EST DELIBERE. L'image passe sous le
 * contenu par l'empilement, pas en se rendant intraversable. La poser
 * `none` masquerait un defaut d'empilement au lieu de le reveler, et
 * rendrait muet le controle au pointeur du §7.6.
 */
.nrx-pave__image {
	position: absolute;
	/* ACCOTEE AU BAS DE LA ZONE. Un relevé de 8 px a été posé puis retiré
	   le 18 août : il rendait une marge sous le bureau et créait, sur toute
	   la largeur, l'espace qu'on voulait justement fermer. */
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	/*
	 * L'IMAGE N'OCCUPE PLUS TOUTE LA HAUTEUR. Elle laisse la bande d'aplat
	 * du haut au titre et au texte, et prend ce qui reste — ancree en bas,
	 * donc c'est bien le HAUT de sa boite qui descend, pas le sujet.
	 *
	 * Le cadrage lui-meme ne change pas : la hauteur commande, la largeur
	 * derive, le rognage reste lateral. Les controles du §7.3 mesurent
	 * toujours ce qu'ils mesuraient.
	 */
	height: calc(100% - var(--nrx-pave-bande));
	width: auto;
	max-width: none;
}

/*
 * LE CONTENU PASSE AU-DESSUS DE L'IMAGE, ET C'EST L'EMPILEMENT QUI LE
 * FAIT. `position: relative` suffit a le sortir du flux de peinture des
 * elements positionnes-a-zero ; le `z-index` le dit explicitement plutot
 * que de dependre de l'ordre du DOM, qui se reorganise au premier
 * deplacement de balise.
 */
.nrx-pave__contenu {
	position: relative;
	z-index: 1;
	/*
	 * FLUX ORDINAIRE. La colonne en flex servait a pousser le bouton en bas
	 * par une marge automatique ; le bouton est remonte dans la bande, et
	 * la mecanique qui l'y envoyait n'a plus d'objet. Titre, texte et
	 * bouton se suivent, et `align-items: stretch` sur le pave garde le
	 * bloc en TETE plutot qu'au milieu.
	 */
	width: 100%;
	/*
	 * 40ch, et non plus la demi-largeur de la banniere. Cette valeur-la
	 * servait la calade : elle donnait au bloc la largeur de la colonne du
	 * site pour que son bord y tombe. Sans bord a aligner, elle ne laisse
	 * qu'une justification de 664 px, trop longue pour du texte centre —
	 * la lecture se degrade au-dela d'une quarantaine de signes par ligne,
	 * parce que l'oeil doit retrouver un debut de ligne qui se deplace.
	 */
	max-width: 40ch;
	margin-inline: auto;
	text-align: center;
	padding-block: var(--nrx-e-5);
	padding-inline: var(--nrx-e-3);
}

.nrx-pave__titre {
	font-size: 34px;
	line-height: 1.15;
	margin: 0 0 var(--nrx-e-2);
}

.nrx-pave__texte {
	/* Un echelon plus bas sur l'echelle declaree : `lead` 17 -> `base` 15.
	   Pas 15,94 px — une valeur hors echelle est exactement ce que
	   l'echelle existe pour empecher. */
	font-size: var(--nrx-t-base);
	line-height: 1.6;
	margin: 0 0 var(--nrx-e-3);
}

/* Le bouton est en `inline-flex` : le `text-align` de la colonne suffit a
   le centrer. Ce paragraphe ne pose donc AUCUN alignement propre, qui
   ecraserait l'heritage sans qu'on le voie. */
.nrx-pave__action {
	/* AUCUNE MARGE PROPRE. Le bouton suit le texte, et l'ecart vient de la
	   marge basse de celui-ci — une seule ecriture pour un seul espace.
	   La marge automatique qui le poussait au bas du pave est retiree : elle
	   le deposait dans l'image, sur le bureau a gauche et sur la tablette
	   graphique a droite. */
	margin: 0;
}

@media (max-width: 1023px) {
	.nrx-pave {
		aspect-ratio: 1 / 1;
	}
}

@media (max-width: 767px) {
	.nrx-edit {
		grid-template-columns: 1fr;
	}

	.nrx-pave {
		aspect-ratio: 4 / 3;
	}

	/*
	 * Empiles, les deux paves occupent toute la largeur. Ils gardent leur
	 * centrage : `justify-content: flex-start` et `max-width: none`
	 * vivaient ici pour la calade, et la calade n'existe plus.
	 *
	 * LE PLAFOND DE 40ch RESTE, contre l'attente de l'addendum qui le
	 * croyait sans effet sous 1024 px. Il mord des 1024, et a 390 il
	 * ramene la colonne sous la largeur du pave. C'est le comportement
	 * voulu : la raison de 40ch — une ligne centree trop longue se lit
	 * mal — ne depend pas de la largeur de l'ecran.
	 */
	.nrx-pave__contenu {
		padding-inline: var(--nrx-gouttiere);
	}
}

@media (max-width: 479px) {
	.nrx-pave {
		aspect-ratio: auto;
	}

	.nrx-pave__titre {
		font-size: 26px;
	}
}

/* ── Suivi de commande (§6) ──────────────────────────────────────────
   Trois etapes, dont certaines a venir. L'etape non franchie est
   attenuee et NON masquee : la faire disparaitre laisserait croire que
   le parcours s'arrete la, quand il ne fait que ne pas y etre encore.

   LES VARIABLES SONT CELLES DE LA PALETTE. Trois noms inventes —
   `--nrx-fond-doux`, `--nrx-filet`, `--nrx-texte-doux` — avaient ete
   ecrits ici. Une variable CSS inexistante ne leve rien : la declaration
   est ignoree et l'element herite, donc un fond blanc sur blanc ou un
   texte sans contraste, sans qu'aucune erreur ne paraisse. */
.nrx-suivi {
	list-style: none;
	margin: var(--nrx-e-3) 0;
	padding: 0;
	display: grid;
	gap: 2px;
}

.nrx-suivi__etape {
	display: flex;
	justify-content: space-between;
	gap: var(--nrx-e-2);
	padding: 10px 14px;
	background: var(--nrx-fond-carte);
	border-left: 3px solid var(--nrx-titre);
}

.nrx-suivi__etape--attente {
	border-left-color: var(--nrx-separation);
	color: var(--nrx-texte-tertiaire);
}

.nrx-suivi__nom { font-weight: 600; }
.nrx-suivi__date { white-space: nowrap; }

/* ── Panneau lateral (§8) ────────────────────────────────────────────
   `hidden` fait le travail d'ouverture et de fermeture : pas de classe
   d'etat en plus. Deux representations du meme etat — un attribut et une
   classe — finissent par diverger, et c'est le panneau ouvert avec un
   `aria-expanded` a false qui en resulte. */
.nrx-panneau[hidden] { display: none; }

.nrx-panneau {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(420px, 100vw);
	z-index: 60;
	display: flex;
	flex-direction: column;
	background: var(--nrx-fond-carte);
	border-left: 1px solid var(--nrx-separation);
	box-shadow: -8px 0 32px rgba(0, 0, 0, .12);
	/* LE PANNEAU NE DEFILE PLUS LUI-MEME — c'est sa zone du milieu qui
	   defile, pour que le pied de paiement reste sous les yeux. Laisser
	   `overflow-y: auto` ici ferait defiler le tout ET la zone interieure :
	   deux barres, et le pied qui repart quand meme vers le bas. */
	overflow: hidden;
}

.nrx-panneau__tete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nrx-e-2);
	padding: var(--nrx-e-2) var(--nrx-e-3);
	/* LA LIGNE EST DESCENDUE SOUS LE BOUTON DU PANIER. Elle separait
	   l'entete du contenu ; elle separe maintenant ce qui est FIXE de ce qui
	   DEFILE — sa fonction reelle. La garder ici en ferait deux. */
}

.nrx-panneau__nom {
	margin: 0;
	font-size: var(--nrx-t-marque);
	color: var(--nrx-titre);
}

/* ── DEUX ZONES, ET UNE SEULE DEFILE ─────────────────────────────────
 *
 * LE PANNEAU ENTIER DEFILAIT. Pour atteindre le bouton de paiement il
 * fallait descendre tout le panier, tous les actifs, tous les favoris : le
 * geste que le tiroir existe pour raccourcir se trouvait au bout du
 * defilement.
 *
 * La chaine tient en quatre maillons, et un seul qui manque la rompt :
 * le panneau cesse de defiler, le corps et le contenu deviennent des
 * colonnes qui remplissent, et la zone du milieu prend le defilement.
 *
 * `min-height: 0` A CHAQUE ETAGE, ET CE N'EST PAS DECORATIF. Un element de
 * flex refuse par defaut de descendre sous la hauteur de son contenu : sans
 * lui, la zone du milieu grandit au lieu de defiler, et le pied repart hors
 * de l'ecran — le defaut qu'on corrige, revenu par la porte de derriere. */
.nrx-panneau [data-nrx-panneau="corps"] {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

.nrx-panneau__contenu {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

.nrx-panneau__defile {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}

/* LE PIED NE BOUGE PAS. `flex: 0 0 auto` le tient a sa hauteur : sans base
   fixe, il se comprimerait pour laisser la place aux articles, et le champ
   de courriel disparaitrait avant le bouton. */
.nrx-panneau__pied {
	flex: 0 0 auto;
	padding: var(--nrx-e-3);
	border-top: 1px solid var(--nrx-separation);
	background: var(--nrx-fond-carte);
}

.nrx-panneau__section {
	padding: var(--nrx-e-3);
	border-bottom: 1px solid var(--nrx-separation);
	/* TEINTE DEMANDEE LE 14 AOUT, ET POSEE TELLE QUELLE.
	 *
	 * DEUX CHOSES A SAVOIR PLUTOT QU'A DEVINER :
	 *
	 * `#f8fffb` N'EST PAS DANS LA PALETTE. Toutes les couleurs de la feuille
	 * passent par un jeton — c'est ce qui permet d'en changer une sans la
	 * chercher. Celle-ci est ecrite en clair : le jour ou une seconde surface
	 * voudra le meme fond, il y aura deux ecritures a tenir d'accord.
	 *
	 * ELLE VAUT POUR LES QUATRE SECTIONS DU TIROIR, pas seulement le panier :
	 * `nrx-panneau__section` habille aussi Mes actifs, Mes favoris et Mes
	 * recompenses, qui ne paraissent qu'une fois connecte. */
	background-color: #f8fffb;
}

.nrx-panneau__titre {
	margin: 0 0 var(--nrx-e-2);
	font-size: var(--nrx-t-petit);
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--nrx-texte-secondaire);
}

/* LE TITRE DE SECTION EST UN BOUTON PLEINE LARGEUR.
 *
 * IL REMPLACE UN BOUTON DE BAS DE SECTION. Deux elements disaient la meme
 * chose — un titre qui nommait la section, un bouton qui menait a la page du
 * meme nom — et il fallait descendre tout le panier pour trouver la sortie.
 *
 * IL N'INVENTE AUCUNE APPARENCE. `nrx-bouton` porte deja le fond plein, les
 * capitales, l'interlettre et le survol de la charte ; ce bloc n'ajoute que
 * la pleine largeur — la meme ligne que `.nrx-paiement--compact .nrx-bouton`
 * pose de son cote. Un troisieme habillage de bouton serait un troisieme
 * endroit a tenir d'accord.
 *
 * `center` ET NON `space-between` : le paiement repartit trois elements —
 * signal, libelle, montant — et son ecart nait de la. Ici il y en a deux,
 * l'oeil et le mot, et ils vont ensemble.
 *
 * LE TITRE PERD SA MISE EN FORME PROPRE quand il porte le bouton : sa
 * couleur et ses capitales viendraient contredire celles de la charte. */
/* LE TITRE DU PANIER EST FIXE, ENTRE L'ENTETE ET LA ZONE QUI DEFILE.
 *
 * `flex: 0 0 auto` N'EST PAS FACULTATIF : un element de flex accepte par
 * defaut de retrecir pour laisser la place a ses freres. Sans base fixe, le
 * bouton se comprimerait des que les articles remplissent le panneau — ce
 * qui devait rester sous les yeux serait le premier a ceder.
 *
 * Il porte la ligne : elle marque le debut de ce qui defile. */
.nrx-panneau__titre--bouton {
	flex: 0 0 auto;
	margin: 0;
	padding: var(--nrx-e-2) var(--nrx-e-3);
	border-bottom: 1px solid var(--nrx-separation);
	color: inherit;
	text-transform: none;
	letter-spacing: normal;
}

.nrx-panneau__titre-action {
	width: 100%;
	justify-content: center;
	text-decoration: none;
}

/* L'OEIL SUIT LE TEXTE, en taille comme en couleur. `1em` le lie a la police
   du titre : deplacer l'echelle deplace les deux ensemble. `currentColor`
   est pose sur le `svg` lui-meme — c'est toute la raison de l'avoir en ligne
   plutot qu'en image. */
.nrx-oeil {
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
}

.nrx-panneau__liste {
	list-style: none;
	margin: 0 0 var(--nrx-e-2);
	padding: 0;
	display: grid;
	gap: var(--nrx-e-1);
}

.nrx-panneau__liste li {
	display: flex;
	justify-content: space-between;
	gap: var(--nrx-e-2);
	font-size: var(--nrx-t-petit);
}

.nrx-panneau__total {
	margin: 0 0 var(--nrx-e-2);
	font-weight: 600;
	color: var(--nrx-titre);
}

/* ── Apercu produit (§9) ─────────────────────────────────────────────
   Comme le panneau : `hidden` fait l'ouverture et la fermeture, sans
   classe d'etat en plus. Deux representations du meme etat finissent
   par diverger. */
.nrx-apercu[hidden] { display: none; }

.nrx-apercu {
	position: fixed;
	inset: 0;
	z-index: 70;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--nrx-e-3);
	background: rgba(0, 0, 0, .55);
}

/* LA BOITE NE DEFILE PLUS, ET C'ETAIT LE DEFAUT.
 *
 * Elle portait `overflow-y: auto` : la modale entiere defilait, donc l'image
 * sortait du champ pendant qu'on lisait, et le dernier paragraphe d'une
 * description un peu longue passait sous le pli. C'est ce que montrait la
 * capture du 12 aout — pas une troncature, une position de defilement. La
 * base portait bien ses cinq paragraphes et le fragment servi aussi.
 *
 * `display: grid` POUR QUE LA BORNE DESCENDE. Un seul enfant, qui herite de
 * `max-height` au lieu de deborder : sans ca, un contenu plus haut que 90vh
 * sortirait de la boite au lieu d'etre borne par elle. */
.nrx-apercu__boite {
	position: relative;
	display: grid;
	width: min(880px, 100%);
	max-height: 90vh;
	background: var(--nrx-fond-carte);
	box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
}

.nrx-apercu__fermer {
	position: absolute;
	top: var(--nrx-e-2);
	right: var(--nrx-e-2);
	z-index: 1;
}

/* LE CADRE EST CONSTANT : une fiche courte et une fiche longue rendent la
 * meme modale. La taille ne suit plus la longueur de la description.
 *
 * UN RAPPORT NON, UNE HAUTEUR OUI. La distinction est reelle et elle est le
 * coeur de cette regle.
 *
 * L'etape 3 avait pose `aspect-ratio: 8 / 3` ici, en lecture fidele d'un
 * §3.6 qui demandait « rapport constant ». UN RAPPORT COUPLE LA HAUTEUR A LA
 * LARGEUR : plus la modale est large, plus elle s'aplatit. Elle s'ecrasait
 * en bandeau et poussait hors du champ tout le bas de la colonne gauche.
 *
 * UNE HAUTEUR NE COUPLE RIEN. Deux fiches rendent le meme cadre, hauteur
 * comprise, quelle que soit la largeur et quelle que soit la longueur de la
 * description. C'est ce que « dimension fixe » demandait, et que le rapport
 * n'a jamais su donner.
 *
 * LA VALEUR EST LE SEUL NOMBRE QUE J'AI CHOISI SANS LA MAQUETTE. Elle vit
 * dans une variable pour se regler a un seul endroit, au navigateur. Elle
 * reste bornee par le `max-height: 90vh` de la boite : une hauteur fixe plus
 * grande que l'ecran rendrait le bas de la modale inatteignable, soit le
 * defaut qu'on vient de corriger, par l'autre bout. */
.nrx-apercu__contenu {
	--nrx-apercu-hauteur: 520px;

	display: grid;
	grid-template-columns: 1fr 1fr;
	height: var(--nrx-apercu-hauteur);
	/* Sans lui, un enfant qui deborde repousse la rangee et le bloc texte
	   cesse de pouvoir defiler : c'est la valeur d'usine `auto` des pistes
	   de grille qui l'exige. */
	min-block-size: 0;
}

/* LA COLONNE GAUCHE : le visuel, puis les deux barres.
 *
 * Le visuel n'est plus a fond perdu — il est ENCADRE, avec ses marges sur le
 * fond de la modale, comme la maquette le montre. Le retrait emploie le
 * jeton d'espacement en usage plutot qu'une valeur inventee : la maquette
 * est la reference, et le reglage fin se fait au navigateur. */
.nrx-apercu__colonne {
	display: flex;
	flex-direction: column;
	gap: var(--nrx-e-2);
	padding: var(--nrx-e-3);
	min-width: 0;
	min-height: 0;
}

/* DEUXIEME ANCRE — LA COLONNE GAUCHE TIENT PAR SES DEUX BOUTS.
 *
 * Le visuel est ancre en haut par son `flex: 0 0 auto`. La barre de
 * caracteristiques est ancree en bas par ce `margin-top: auto`. Les options
 * occupent ce qu'il y a entre les deux, vide compris.
 *
 * AUCUNE HAUTEUR MINIMALE N'EST RESERVEE AU BLOC D'OPTIONS, et c'est le
 * piege que le §2.2 nomme. Une reserve devrait deviner la hauteur d'un
 * contenu variable — deux options prennent plus qu'une, cinq pastilles plus
 * qu'un texte — et la valeur qui conviendrait a `CAP-01` se tromperait au
 * produit suivant. Avec deux ancres fixes il n'y a rien a deviner : le
 * milieu s'etire ou reste vide, et la barre tombe au meme endroit sur tous
 * les produits.
 *
 * `margin-top: auto` PLUTOT QU'UN `flex-grow` SUR LES OPTIONS : l'ancre
 * tient meme quand il n'y a PAS d'options du tout — la rangee n'existe alors
 * pas, et il n'y aurait rien pour s'etirer. C'est le cas de la figurine.
 *
 * L'ancre est portee dans le contexte de la modale seulement. Sur la fiche
 * pleine page, la colonne n'est pas un flex et la regle serait inerte : la
 * nommer ici dit ou elle agit. */
/* LA BARRE REPREND LE BAS DE LA COLONNE, ET LA RAISON A CHANGE.
 *
 * Son ancre du 13 aout equilibrait un bloc de trois — date, lien,
 * appreciation. La date et le lien mis en veille, elle ne tenait plus qu'un
 * compteur seul en bas d'une colonne vide, et l'ancre a ete retiree.
 *
 * Le compteur est devenu une PASTILLE, et la colonne de droite a maintenant
 * deux boutons pleine largeur en bas. Ce qui doit s'aligner n'est plus un
 * texte avec du vide : ce sont deux actions, une par colonne, sur la meme
 * ligne de base. L'ancre revient donc — pour aligner, pas pour equilibrer. */
.nrx-apercu__colonne .nrx-fiche__barre {
	margin-top: auto;
	/* EMPILEE DANS LA MODALE, COTE A COTE SUR LA FICHE.
	 *
	 * Par le contexte, a cote de l'ancre qui vit deja ici — et NON en
	 * resserrant une largeur : la colonne fait environ 392 px, les elements
	 * y tiennent, et une contrainte de largeur ne replierait rien. On
	 * croirait la correction faite.
	 *
	 * `align-items: flex-start` avec elle : la regle de base centre, ce qui
	 * en colonne centrerait horizontalement des elements de largeurs
	 * differentes — ils partiraient de trois abscisses.
	 *
	 * ELLE PORTE DEUX CHOSES DEPUIS LE 21 AOUT : la rangee des deux ronds,
	 * et rien d'autre. `Conçu le` est sorti du rendu ce jour-la, et le lien
	 * externe a rejoint l'appreciation dans `.nrx-fiche__actions`. Le
	 * commentaire d'avant parlait encore d'elements « en veille depuis le
	 * 14 aout » : ils s'etaient reveilles le 17. */
	flex-direction: column;
	align-items: flex-start;
}

/*
 * LA RANGEE DES DEUX RONDS — appreciation et lien partenaire.
 *
 * LA BARRE RESTE UNE COLONNE : elle empile ce qu'elle porte, et c'est
 * voulu. Ces deux-la ne s'empilent pas — meme nature, meme taille — et
 * cote a cote ils tiennent sur UNE rangee de 56 px au lieu de deux plus
 * une gouttiere.
 *
 * MESURE DU 21 AOUT : le lien passe en icone a COUTE 20 px au lieu d'en
 * liberer 44, un `<p>` de 35,6 px devenant un rond de 56 dans une pile.
 * La casquette est passee de 131,6 a 120 quand la seule date en valait
 * 32. Cote a cote, la barre retombe a 56.
 */
.nrx-fiche__actions {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--nrx-e-1);
}

/* LE LIEN EST LE MEME ROND QUE L'APPRECIATION, sans le chiffre : il
   herite tout de `.nrx-vote`. La classe existe pour que la feuille
   puisse le distinguer le jour ou il le faudra. */

/* LA PASTILLE DE VOTE — le pouce et le nombre, dans un rond.
 *
 * ELLE REMPLACE UNE LIGNE DE TEXTE. « 1 appreciation » suivi de
 * « Connectez-vous pour apprecier » disait en deux phrases ce que le pouce
 * et le chiffre disent d'un coup d'oeil.
 *
 * `border-radius: 50%` DEMANDE UNE BOITE CARREE : sur une boite plus large
 * que haute, il rend un ovale. D'ou une largeur MINIMALE egale a la hauteur,
 * que le contenu peut depasser quand le compte passe a trois chiffres — un
 * ovale a mille votes vaut mieux qu'un chiffre coupe.
 *
 * ELLE HABILLE UN BOUTON ET UN LIEN. Les deux existent selon qu'on est
 * connecte ou non ; la meme classe leur donne la meme apparence, et
 * `text-decoration: none` empeche le lien de se souligner. */
.nrx-vote {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	min-width: calc(var(--nrx-e-5) + var(--nrx-e-1));
	height: calc(var(--nrx-e-5) + var(--nrx-e-1));
	padding: 0 var(--nrx-e-1);
	border: 1px solid var(--nrx-separation);
	border-radius: 50%;
	background: var(--nrx-fond-carte);
	color: var(--nrx-texte-courant);
	font: inherit;
	font-size: var(--nrx-t-micro);
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}

/*
 * LE REPOS SE SUFFIT, PARCE QUE LE SURVOL N'EXISTE PAS AU DOIGT.
 *
 * Le bouton etait sur fond blanc, sur une carte blanche : seule sa bordure
 * le posait. Il prend le gris pale de la palette — `--nrx-fond-page`, le
 * seul des jetons qui soit un gris pale, `--nrx-separation` etant un gris
 * de TRAIT et trop sombre pour un fond. Le texte y rend 12,56:1.
 */
.nrx-vote {
	background: var(--nrx-fond-page);
}

/*
 * ET LE SURVOL EST UN ETAT EN PLUS, JAMAIS L'ETAT QUI RENSEIGNE.
 *
 * Blanc sur `--nrx-interaction` : 6,94:1, mesure du 21 aout — au-dessus
 * du 4,5:1 de AA. `:focus-visible` porte le meme etat, sans quoi le
 * clavier n'aurait rien de ce que la souris obtient.
 */
.nrx-vote:hover,
.nrx-vote:focus-visible {
	border-color: var(--nrx-interaction);
	background: var(--nrx-interaction);
	color: var(--nrx-fond-carte);
}

/* L'ICONE SUIT LE TEXTE. Elle est en `currentColor` : le blanc du survol
   la prend sans qu'une seconde regle ait a le redire. */

.nrx-vote .nrx-pouce {
	width: 1.2em;
	height: 1.2em;
	flex: 0 0 auto;
}

/* TROISIEME ANCRE — LE PIED DE LA COLONNE DROITE.
 *
 * Meme mecanique, meme raison : le bouton d'ajout et le lien vers la fiche
 * suivaient la longueur de la description au lieu de tenir le bas. Le bloc
 * texte occupe ce qui reste et defile, acquis de l'addendum 02. */
/* LES DEUX ACTIONS PRENNENT LA LARGEUR DE LA COLONNE.
 *
 * « Ajouter au panier » etait large et « Voir la fiche complete » un lien
 * discret a cote : les deux se lisaient comme deux rangs differents de la
 * meme chose. Elles font maintenant la meme largeur, et c'est le PLEIN
 * contre le RENVERSE qui dit laquelle est principale — la distinction de la
 * charte, pas une difference de taille. */
.nrx-apercu__pied .nrx-bouton,
.nrx-apercu__fiche .nrx-bouton {
	width: 100%;
	justify-content: center;
}

.nrx-apercu__fiche {
	margin: var(--nrx-e-1) 0 0;
}

.nrx-apercu__pied {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: var(--nrx-e-1);
	flex: 0 0 auto;
}

/* LES DEUX EMPLACEMENTS D'OPTION COTE A COTE, SUR UNE LIGNE.
 *
 * Ils occupaient une ligne chacun. `wrap` porte le repli sous la rupture —
 * pose, pas subi : deux emplacements tiennent en une ligne a largeur pleine,
 * pas necessairement en dessous. */
.nrx-fiche__options {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nrx-e-1) var(--nrx-e-3);
}

/* La barre : date, appreciation, lien. Elle se replie aussi plutot que de
   deborder. */
.nrx-fiche__barre {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--nrx-e-1) var(--nrx-e-2);
}

/* LE RYTHME VERTICAL VIENT DE LA COLONNE, PAS DES BLOCS.
 *
 * Les ecarts etaient irreguliers parce que chaque bloc apportait sa propre
 * marge — celles des `<p>` du navigateur, plus celles que la fiche leur
 * donne pour son propre usage. Deux sources d'espacement qui s'additionnent
 * ne produisent pas un rythme, elles produisent des ecarts qu'il faut
 * corriger un par un.
 *
 * La `gap` de la colonne devient donc la seule source, et les marges
 * propres des blocs sont remises a zero DANS CE CONTEXTE — pas ailleurs :
 * la fiche pleine page garde les siennes. */
.nrx-apercu__colonne > * {
	margin: 0;
}

/*
 * ET LES DESCENDANTS DE FLUX, PARCE QUE LA PORTEE ETAIT TROP COURTE.
 *
 * ═══════════════════════════════════════════════════════════════════════
 * LA REGLE CI-DESSUS ETAIT JUSTE ET N'ATTEIGNAIT PAS LA MOITIE DE SA CIBLE.
 *
 * Son commentaire dit « la `gap` de la colonne devient la seule source ».
 * Elle ne l'etait pas : `> *` ne vise que les enfants DIRECTS, et les
 * paragraphes DANS `.nrx-fiche__barre` gardaient leurs marges de
 * navigateur. Mesure du 21 aout sur la casquette :
 *
 *     nrx-fiche__concu   <p>  marges 15 / 15
 *     nrx-fiche__lien    <p>  marges 15 / 15
 *
 * Soixante pixels, dans une colonne qui debordait de 51.
 * ═══════════════════════════════════════════════════════════════════════
 *
 * ELLE NE VISE PAS `*`, ET C'EST MESURE. Trois familles de marges
 * cohabitent dans cette colonne, et une seule vient du navigateur :
 *
 *   `.nrx-fiche__barre` porte un `margin-top: auto` — 32,4 px sur
 *   Decrypto, 60,8 sur la tasse, 106 sur une Station. Il la POUSSE EN BAS
 *   de la colonne ; le mettre a zero la remonterait sur trois produits.
 *
 *   `.nrx-horsecran` porte des marges de -1 px : c'est la technique de
 *   masquage accessible. Les annuler rendrait la legende visible.
 *
 * On vise donc les elements de FLUX, dont la marge vient de la feuille du
 * navigateur et de nulle part ailleurs. Un `div` qui porte une marge l'a
 * recue de quelqu'un qui la voulait.
 */
.nrx-apercu__colonne :is(p, h1, h2, h3, h4, h5, h6, ul, ol, dl, dd, figure, blockquote) {
	margin: 0;
}

.nrx-apercu__visuel {
	position: relative;
	width: 100%;
	/* PREMIERE ANCRE — LE VISUEL NE RETRECIT PAS.
	 *
	 * Il n'avait aucune valeur `flex`, donc `flex-shrink: 1` par defaut :
	 * dans une colonne a hauteur bornee, il cedait de la place des que ses
	 * voisins en reclamaient. Deux options sur la casquette, aucune sur la
	 * figurine — d'ou deux visuels de hauteurs differentes.
	 *
	 * POSER UNE HAUTEUR AURAIT ETE DEVINER UN NOMBRE. La largeur de colonne
	 * est deja constante d'un produit a l'autre ; il suffit d'interdire le
	 * retrecissement, et le 4:3 donne alors la meme hauteur partout. Une
	 * valeur devinee vieillit mal — c'est le raisonnement du §2.2, applique
	 * ici aussi. */
	flex: 0 0 auto;
	/* LE CADRE ANNONCE LE RAPPORT DE SA RESSOURCE — une affiche 4:3. C'est
	   le seul invariant qui survit au retrait du rapport impose, et c'est
	   celui que le banc protege : un cadre qui contredit sa ressource ne
	   leve rien, `object-fit: cover` recadre et la page s'affiche. */
	aspect-ratio: 4 / 3;
	overflow: hidden;
	/* LE FILET FAIT LE TOUR, il n'est plus un separateur de colonnes. Le
	   visuel etant desormais encadre avec ses marges, un filet a droite
	   longerait un bord qui ne separe plus rien — c'est le raisonnement que
	   la rupture etroite tenait deja pour le passer en bas. */
	border: 1px solid var(--nrx-separation);
}


.nrx-apercu__visuel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* LA COLONNE DROITE NE DEFILE PAS — SEULE LA DESCRIPTION LE FAIT.
 *
 * Le defilement etait ici a l'etape 3, et c'etait un cran trop haut : le
 * bouton d'ajout et le lien vers la fiche partaient avec le texte. La
 * maquette les veut visibles sans defiler quoi que ce soit, donc ils restent
 * en pied de colonne et c'est la description qui se replie entre le prix et
 * eux. */
.nrx-apercu__corps {
	display: flex;
	flex-direction: column;
	gap: var(--nrx-e-1);
	padding: var(--nrx-e-3);
	min-height: 0;
	min-width: 0;
}

/* LE BLOC TEXTE, ET LUI SEUL, PORTE LE DEFILEMENT — POSE EXPLICITEMENT SUR
 * LES DEUX AXES.
 *
 * PIEGE DOCUMENTE, PAS REPRODUIT : `overflow-x: hidden` avec `overflow-y`
 * laisse a `visible` promeut `overflow-y` a `auto`, et l'inverse est vrai
 * aussi. Un conteneur de defilement obtenu par effet de bord apparait la ou
 * personne ne l'a demande et disparait quand on touche a l'autre axe. Les
 * deux valeurs sont donc ecrites.
 *
 * `min-height: 0` N'EST PAS COSMETIQUE. La valeur d'usine d'un element de
 * flex l'empeche de retrecir sous la hauteur de son contenu : sans elle, le
 * bloc ne defile pas — il pousse, et il chasse le bouton d'ajout hors du
 * champ. Meme mecanisme que le `min-width: 0` du `fieldset` du nuancier.
 *
 * LE RETRAIT DROIT TIENT LA BARRE A L'INTERIEUR du bloc. Sans lui, elle se
 * colle au bord de la modale et se lit comme si c'etait la modale qui
 * defilait — ce qu'elle ne fait plus. */
/* CE QUI N'EST PAS LE TEXTE NE SE COMPRIME PAS.
 *
 * LE HAUT DE LA COLONNE ETAIT ROGNE, et la cause n'est pas un `overflow` :
 * c'est le flex. Dans une colonne de 520 px, un element de flex accepte par
 * defaut de retrecir sous la hauteur de son contenu. La reference, le titre
 * et le prix cedaient donc quelques pixels chacun des que la description
 * etait longue — et la premiere ligne, la plus haute, se retrouvait coupee.
 *
 * SEULE LA DESCRIPTION DOIT CEDER : c'est elle qui porte le defilement, et
 * c'est pour ca qu'elle existe. Les autres gardent leur hauteur. */
.nrx-apercu__corps > :not(.nrx-apercu__texte) {
	flex: 0 0 auto;
}

.nrx-apercu__texte {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	padding-right: var(--nrx-e-1);
	color: var(--nrx-texte-secondaire);
	font-size: var(--nrx-t-petit);
}

.nrx-apercu__nom {
	margin: 0 0 var(--nrx-e-1);
	font-size: var(--nrx-t-marque);
	color: var(--nrx-titre);
}

@media (max-width: 719px) {
	/* EN UNE COLONNE, les deux colonnes s'empilent. Le visuel garde son 4:3
	   de la regle de base, et le defilement reste sur le bloc texte — c'est
	   la seule chose qui ne change pas d'une rupture a l'autre : ce qui
	   defile est la description, jamais la modale. */
	/* EN UNE COLONNE, LA HAUTEUR FIXE TOMBE. Empilees, les deux colonnes
	   demandent plus que 520 px, et les y forcer remettrait le bas hors du
	   champ — le defaut d'origine, sous une autre forme. La boite reprend sa
	   hauteur de contenu, bornee par son `90vh`. */
	.nrx-apercu__contenu {
		grid-template-columns: 1fr;
		grid-template-rows: auto minmax(0, 1fr);
		height: auto;
		max-height: 90vh;
	}

	.nrx-apercu__colonne { padding: var(--nrx-e-3) var(--nrx-e-3) 0; }
	.nrx-apercu__corps { padding: var(--nrx-e-3); }
}

/* ── Une commande, un bloc (§6) ──────────────────────────────────────
   Trois numeros s'enchainaient puis un bloc de suivi paraissait : rien
   ne disait a quelle commande il appartenait. Le lecteur rattache alors
   a la derniere chose lue, pas a la bonne.

   La bordure et le fond bornent le bloc ; l'espacement entre blocs est
   plus grand que l'espacement interne, sinon la separation se lit comme
   une continuation. */
.nrx-commande {
	margin-bottom: var(--nrx-e-3);
	padding: var(--nrx-e-3);
	background: var(--nrx-fond-carte);
	border: 1px solid var(--nrx-separation);
}

.nrx-commande__tete {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--nrx-e-2);
}

.nrx-commande__numero {
	margin: 0;
	font-size: var(--nrx-t-lead);
	color: var(--nrx-titre);
}

.nrx-commande__date {
	margin: 0 0 var(--nrx-e-2);
	color: var(--nrx-texte-secondaire);
	font-size: var(--nrx-t-petit);
}

/* L'adresse partagee par l'atelier et le suivi client. */
.nrx-adresse {
	margin: 0 0 var(--nrx-e-2);
	line-height: 1.5;
}

/* ── Banniere en carrousel (§9) ──────────────────────────────────────
   Pleine largeur, texte en surimpression. La regle du fond perdu du
   §10.5 s'applique : le bloc touche les bords, son CONTENU revient sur
   la colonne. */
.nrx-banniere {
	position: relative;
	width: 100%;
}

.nrx-banniere__cadre {
	width: 100%;
	/* 2560 x 1100. Le rapport est pose ici et non deduit des fichiers :
	   une image manquante ou de mauvaise taille ne doit pas faire sauter
	   la mise en page. */
	aspect-ratio: 2560 / 1100;
	/*
	 * LE PLAFOND DE HAUTEUR — retire le 9 aout, REMIS le meme jour apres
	 * mesure. Il ne mord qu'au-dela de 1443 px de large.
	 *
	 * Le retrait reposait sur une lecture fausse : on avait ecrit que le
	 * plafond faisait basculer le recadrage sur les cotes. Le navigateur
	 * dit l'inverse. A 1920 de large, plafonnee a 620, la boite prend un
	 * rapport de 3,073 — plus PLATE que l'image a 2,327. `cover` cale donc
	 * sur la largeur et rogne la hauteur :
	 *
	 *          boite      contenu couvrant   rogne lateral   rogne vertical
	 *   sans   1905x819     1906 x 819           1 px             0
	 *   avec   1905x620     1905 x 818,6         0 px         198,6 px
	 *
	 * Le recadrage reste donc vertical, sujet centre — exactement la regle
	 * du hero. Le plafond ne la contredit pas : il l'applique, et il
	 * epargne au premier ecran de faire 825 px de haut.
	 */
	max-height: 620px;
	overflow: hidden;
}

/*
 * LE RAPPORT 21:9 TIENT A TOUTES LES LARGEURS JUSQU'A 1443 px.
 *
 * Une regle s'y opposait vraiment et elle est tombee le 9 aout :
 * `aspect-ratio: 4 / 5` sous 719 px. C'etait la trace d'une AUTRE
 * decision — servir des bannieres mobiles distinctes, en portrait — et
 * elle, elle rognait bien par les cotes : une boite a 0,8 contre une
 * image a 2,327 perd les deux tiers de sa largeur. Cette decision est
 * ecartee ; la regle qui la portait part avec elle.
 *
 * CONSEQUENCE ASSUMEE : a 390 px de large, la boite fait 167 px de haut.
 * Ce n'est pas un defaut a rattraper par une hauteur minimale — une
 * hauteur minimale, elle, REINTRODUIRAIT le recadrage lateral, et le
 * sujet des bannieres vit dans le tiers gauche.
 *
 * PAS D'`overflow-x: hidden` ICI, et c'est mesure. La banniere n'a aucune
 * echappee a fabriquer : `renderSection('contenu')` est FRERE de `.nrx-w`
 * dans le gabarit, pas son enfant, et `.nrx__corps` ne borne pas la
 * largeur. Il n'y a donc ni marge negative ni `100vw` — les deux causes
 * ordinaires du debordement horizontal. Poser la parade sans la cause
 * masquerait le prochain debordement au lieu de le montrer.
 */

.nrx-banniere__vue,
.nrx-banniere__vue img {
	width: 100%;
	height: 100%;
}

.nrx-banniere__vue img {
	object-fit: cover;
	object-position: center;
	display: block;
}

/*
 * LA RESERVE — la place du bloc de texte, tenue sans rien dire (9 aout).
 *
 * NOIR A 20 %, RIEN D'AUTRE : pas de bordure, pas d'ombre, pas de texte,
 * pas d'icone. C'est un provisoire QUI SE VOIT, et c'est le but — un
 * substitut reussi cacherait qu'il manque du contenu.
 *
 * LE BLANC A 20 % A ETE ESSAYE LE MEME JOUR ET REMPLACE. Les bannieres
 * livrees ne sont pas assez sombres pour qu'un voile clair s'y detache.
 *
 * SUR LE FOND, PAS SUR L'ELEMENT. `opacity: .20` sur le conteneur
 * emporterait avec lui tout ce qu'il contiendra — le texte reviendra ici,
 * et il reviendrait a 20 %. La transparence appartient a la COULEUR, ce
 * qui laisse le contenu opaque. C'est ce que verifie le controle sur
 * `opacity`, qui doit valoir 1 : il mord si la regle est posee au mauvais
 * endroit.
 *
 * SES DIMENSIONS SUIVENT LA BOITE, elles ne sont pas fixes : 30 % de la
 * largeur, 55 % de la hauteur. Une reserve en pixels se decalerait a
 * chaque largeur d'ecran et mentirait sur la place que le contenu prendra.
 *
 * LA MARGE DROITE EGALE LA MARGE HAUTE, ce qui demande un calcul et non
 * une valeur recopiee. Centree sur 55 % de hauteur, la marge haute vaut
 * (100 - 55) / 2 = 22,5 % de la HAUTEUR. Or un pourcentage de `right` se
 * resout sur la LARGEUR : il faut donc convertir par le rapport de la
 * boite, 1100 / 2560. D'ou 22,5 % x 1100 / 2560 = 9,668 % de la largeur.
 *
 * LE `min()` EST LA A CAUSE DU PLAFOND DE HAUTEUR. Cette conversion
 * suppose que la boite tient son rapport ; passe 1443 px de large,
 * `max-height: 620px` la retient et le rapport cesse d'etre vrai. La
 * marge haute se fige alors a 22,5 % x 620 = 139,5 px pendant que la
 * marge droite continuerait de croitre avec la largeur — mesure a 139,5
 * contre 184,2 a 1920 avant correction.
 *
 * Les deux termes se croisent exactement a 1443 px, la ou le plafond
 * commence a mordre : `min()` bascule donc de lui-meme, sans coupure de
 * media et sans dependre de la largeur de la barre de defilement, qui
 * decale la boite par rapport a la fenetre.
 *
 * ELLE COMMENCE A 60,3 % ET NON AU TIERS DROIT EXACT (66,7 %) : les trois
 * contraintes — 30 % de large, marge droite egale a la marge haute, tiers
 * droit — ne peuvent pas etre tenues ensemble. Les deux premieres sont
 * chiffrees, la troisieme decrit. Ce sont les chiffres qui l'emportent, et
 * le debord de 6,3 points va vers le CENTRE, jamais vers le tiers gauche
 * ou vit le sujet des bannieres.
 */
.nrx-banniere__reserve {
	position: absolute;
	top: 22.5%;
	right: min(calc(22.5% * 1100 / 2560), calc(620px * 0.225));
	width: 30%;
	/*
	 * ═══════════════════════════════════════════════════════════════════
	 * 55 % -> 60 % LE 20 AOUT, ET LE PIRE CAS N'EST PAS CELUI QU'ON CROIT.
	 *
	 * Le texte de reference est passe de trois lignes a QUATRE. Balayage
	 * de 1024 a 1920 px, au pas de 4 px, sous Arial et sous Verdana :
	 *
	 *     a 55 %  le bloc DEBORDE de 1024 a 1068 px — pire solde -10,4 px
	 *     a 58 %  il tient partout, mais avec 2,8 px au plus serre
	 *     a 60 %  il tient partout, avec 11,6 px au plus serre
	 *
	 * ET LE CALCUL ETAIT OPTIMISTE. Mesure a l ecran, Chrome sans
	 * interface, 1024 px de vue : a 60 % le bloc DEBORDE ENCORE de
	 * 0,3 px. Le modele supposait 1024 px de mise en page ; la BARRE DE
	 * DEFILEMENT en prend une quinzaine, la reserve tombe a 303 px au
	 * lieu de 307, et la ligne de suite passe a TROIS lignes.
	 *
	 * 65 % est donc la valeur posee, et elle vient de l ecran, pas du
	 * calcul. C est la deuxieme fois de la semaine qu une largeur de mise
	 * en page differe de la largeur de vue ; un calcul qui part de
	 * `window.innerWidth` sans retirer la barre se trompe toujours dans
	 * le meme sens — celui qui rassure.
	 *
	 * LE PIRE CAS EST 1024 px, LA LARGEUR OU LA RESERVE PARAIT. Ce n'est
	 * pas 1280, qui est le pire cas de la GRILLE des cartes : deux
	 * geometries differentes n'ont aucune raison de partager leur pire cas,
	 * et le supposer aurait laisse la bande de 45 px passer.
	 *
	 * LA RAISON DU DEBORDEMENT tient a deux mecaniques qui vont en sens
	 * inverse : les tailles sont bornees PAR LE BAS — `clamp(15px, …)` —
	 * pendant que la reserve, elle, est un pourcentage d'un cadre qui
	 * continue de retrecir. Sous 1150 px environ, le texte cesse de
	 * maigrir et la boite continue.
	 *
	 * 58 % A ETE ECARTE : 2,8 px de marge n'est pas une marge, c'est un
	 * ajustement exact — et un ajustement exact tombe au premier mot
	 * rallonge ou a la premiere traduction.
	 *
	 * CE QUE CA DEPLACE : `top` reste a 22,5 %, donc la reserve grandit
	 * VERS LE BAS et son centre descend de 2,5 % du cadre — 13,75 px a
	 * 1280. Garder le centre aurait demande de bouger `top` ET la marge
	 * droite qui le reflete : trois nombres pour un gain d'equilibre que
	 * personne n'a demande.
	 * ═══════════════════════════════════════════════════════════════════
	 */
	height: 65%;
	background-color: rgba(0, 0, 0, 0.20);
	/* Le projet n'a pas de variable de rayon — il pose 2px sur les petits
	   controles. 2px sur un aplat de cette taille ne se verrait pas ; 6px
	   arrondit sans sortir de la famille. */
	border-radius: 6px;
	pointer-events: none;
	/*
	 * AU-DESSUS DU CARROUSEL, ET IL FAUT LE DIRE EXPLICITEMENT.
	 *
	 * La feuille de Swiper pose `z-index: 1` sur `.swiper`. Un frere
	 * POSITIONNE qui vient apres dans le DOM ne suffit pas a passer
	 * devant : `z-index: auto` perd contre `z-index: 1`, quel que soit
	 * l'ordre. La reserve etait donc peinte SOUS les images depuis sa
	 * pose — invisible, alors que sa boite etait exactement a sa place.
	 *
	 * Aucune mesure de position ne pouvait le voir : `getBoundingClientRect`
	 * et `getComputedStyle` decrivent une boite, pas ce qui la recouvre.
	 * C'est `elementFromPoint` au centre de la reserve qui l'a dit — il
	 * rendait `IMG`. L'instrument reglé sur autre chose que ce qu'il
	 * inspecte (§10.12 du constat 2.1).
	 *
	 * 2 et non 1 : il faut BATTRE le cadre, pas l'egaler. Les puces
	 * portent aussi 2, mais dans le contexte d'empilement du cadre, donc
	 * sans concurrence avec celui-ci.
	 */
	z-index: 2;

	/* LE TEXTE VIT DEDANS DEPUIS LE 18 AOUT. La reserve etait un aplat
	   vide ; elle porte desormais l'accroche et son explication, centrees
	   dans sa hauteur. Le blanc est le SENS du contraste : le voile
	   assombrit, donc le texte eclaire. */
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--nrx-e-2);
	padding: var(--nrx-e-3);
	color: #ffffff;
}

/*
 * SOUS 640 px, ELLE DISPARAIT. A cette largeur la boite fait 275 px de
 * haut : la reserve en occuperait 151 sur 192 de large, assez pour manger
 * la banniere sans plus rien annoncer. Une reserve qui gene ce qu'elle
 * reserve a cesse de servir.
 */
/* ── LE TEXTE DE LA ZONE HERO ─────────────────────────────────────────

   BLANC SUR LE VOILE SOMBRE DEJA EN PLACE. C'est le sens du contraste, et
   il ne changera pas : le voile reste a 20 %, et il assombrit — un texte
   fonce y perdrait a chaque banniere plus claire.

   LE VOILE N'EST PAS AUGMENTE. Le contraste mesure sur `banniere-1` — 2,0:1
   au pire carre de la zone, contre 4,5 requis par AA — a ete ECARTE COMME
   CRITERE BLOQUANT par decision, en connaissance du chiffre. Ce qui reste
   vrai : si une banniere future rend le texte illisible, c'est l'image
   qu'on reprend, jamais le voile.

   LES TAILLES SUIVENT LA LARGEUR, ET C'EST GEOMETRIQUE. La reserve fait
   30 % de la vue : 528 px utiles a 1920, 144 a 640. Une taille fixe qui
   tient en haut de plage deborde en bas. Les bornes du `clamp` viennent de
   la mesure du 18 aout — le mot le plus long de chaque langue doit tenir
   dans la colonne, `Herramientas` et `organizations` en tete. */

/*
 * LA MARQUE — LE QUATRIEME NIVEAU, ARRIVE LE 20 AOUT.
 *
 * PETITES CAPITALES PAR LA FEUILLE, JAMAIS PAR LA SAISIE. La cle de
 * langue porte « NEUROX : L'Atelier » en casse normale. Deux raisons,
 * et aucune n'est esthetique :
 *
 *   — un lecteur d'ecran EPELLE un mot saisi en capitales et LIT un
 *     mot saisi normalement ;
 *   — la projection texte — courriels, `<title>` — emporterait les
 *     capitales, alors qu'elles sont une decision d'affichage.
 *
 * `font-variant-caps` ET NON `text-transform: uppercase`. La premiere
 * rend de vraies petites capitales et laisse « NEUROX » a sa hauteur
 * de capitale ; la seconde ecraserait tout au meme corps et perdrait
 * la distinction entre la marque et le mot qui la suit.
 *
 * ELLE EST `block` PARCE QU'ELLE OCCUPE SA LIGNE, comme la suite plus
 * bas — et pour la meme raison : elles vivent dans le paragraphe de
 * l'accroche, ou le saut vient de la feuille et non d'un `<br>`.
 *
 * SA TAILLE EST CELLE DE LA SUITE. La marque n'est pas un titre : elle
 * annonce, et c'est l'accroche qui porte le poids. Reprendre le meme
 * `clamp` evite un cinquieme pas d'echelle pour un seul mot.
 */
.nrx-banniere__marque {
	display: block;
	margin-bottom: var(--nrx-e-1);
	font-size: clamp(var(--nrx-t-base), 1.2vw, var(--nrx-t-marque));
	font-variant-caps: small-caps;
	letter-spacing: var(--nrx-suivi-titre);
	line-height: 1.5;
}

.nrx-banniere__accroche {
	margin: 0;
	/* LES BORNES SONT DES JETONS, LE `vw` EST L'INTERPOLATION ENTRE ELLES.
	   Une taille en clair ici aurait ete un endroit de plus a tenir
	   d'accord le jour ou l'echelle bouge — ce que `--nrx-t-nano` a coute
	   d'apprendre sur cinq `9px` isoles.

	   LA PENTE EST DOUCE — 1,8vw — ET C'EST MESURE. A 2,0vw le bloc
	   demande 230 px a 1024 px de vue pour 242 disponibles ; a 1,8 il en
	   demande 227. La marge la plus etroite se joue en bas de plage, pas
	   en haut. */
	font-size: clamp(var(--nrx-t-marque), 1.8vw, var(--nrx-t-affiche));
	line-height: 1.2;
}

/* L'ACCROCHE ET SA SUITE N'ONT PAS LE MEME POIDS. Le `<strong>` porte la
   phrase qui accroche, la suite l'explique — sans cet ecart, on ne sait pas
   par ou entrer. La suite passe en bloc pour tomber a la ligne. */
.nrx-banniere__suite {
	display: block;
	margin-top: var(--nrx-e-1);
	font-size: clamp(var(--nrx-t-base), 1.2vw, var(--nrx-t-marque));
	font-weight: 400;
	line-height: 1.5;
}

.nrx-banniere__explication {
	margin: 0;
	/* ELLE NE GROSSIT PAS, ET C'EST CE QUI FAIT LA HIERARCHIE. Elle
	   explique, elle ne frappe pas. Seule sa borne basse passe de 13 a 14 —
	   `--nrx-t-petit`, le pas de l'echelle — et elle ne s'applique qu'entre
	   1024 et 1500 px de vue. */
	font-size: clamp(var(--nrx-t-petit), 1.0vw, var(--nrx-t-base));
	line-height: 1.6;
}

/* LE SEUIL VIENT D'UNE MESURE, ET IL COUTE QUELQUE CHOSE.

   Sous 1024 px, le bloc ne tient pas dans la reserve : mesure le 18 aout,
   il demande 237 px a 768 px de vue pour 182 disponibles, et 321 pour 151
   a 640. La colonne y descend a 144 px utiles — ce n'est plus une colonne
   de texte, c'est une gouttiere.

   La reserve etait deja masquee sous 639 px ; le seuil monte a 1023. CE QUE
   CA COUTE, ET IL FAUT QUE CA RESTE ECRIT : la proposition de valeur du
   site disparait sur tablette, pas seulement sur telephone. La parade n'est
   pas ici — elle serait de sortir le texte de la reserve et de le poser
   sous la banniere, en flux. C'est une decision de mise en page, pas une
   consequence. */
@media (max-width: 1023px) {
	.nrx-banniere__reserve { display: none; }
}

/* LE BLOC DE TEXTE REVIENT SUR LA COLONNE, alors que l'image va aux
   bords. Sans cette contrainte, l'accroche se collerait au bord gauche
   de l'ecran sur un grand moniteur.

   RETIRE DU GABARIT LE 9 AOUT, ces regles restent : elles reviendront
   avec lui, et les reecrire de memoire serait les reecrire autrement. */
.nrx-banniere__bloc {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	pointer-events: none;
}

.nrx-banniere__texte {
	width: min(100%, var(--nrx-largeur-max));
	margin-inline: auto;
	padding: var(--nrx-e-4);
	pointer-events: auto;
}

.nrx-banniere__texte > * { max-width: 34ch; }

.nrx-banniere__titre {
	margin: 0 0 var(--nrx-e-2);
	font-size: clamp(28px, 4vw, 52px);
	line-height: 1.1;
	color: var(--nrx-titre);
}

.nrx-banniere__intro {
	margin: 0 0 var(--nrx-e-3);
	color: var(--nrx-texte-courant);
}

/* LES PUCES SONT DANS LE CADRE, pas sous lui : sous l'image elles
   pousseraient la premiere rangee vers le bas a chaque chargement. */
.nrx-banniere__puces {
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--nrx-e-2);
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: var(--nrx-e-1);
}

/*
 * L'ETAT COURANT SE VOIT SANS LA COULEUR (9 aout).
 *
 * Swiper ne distingue la puce active que par son opacite et sa teinte.
 * Une personne qui ne separe pas ces deux gris n'a alors AUCUN moyen de
 * savoir ou elle en est — et sur une bannière sombre, l'ecart d'opacite
 * est le premier a disparaitre.
 *
 * La puce active s'allonge : c'est une difference de FORME, qui survit au
 * daltonisme, au contraste faible et a l'impression en noir et blanc.
 *
 * `transition` sur la largeur seulement, et coupee sous mouvement reduit
 * comme le reste.
 */
.nrx-banniere__puces .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	border-radius: 4px;
	background: rgb(255 255 255 / 55%);
	opacity: 1;
	transition: width 200ms ease, background-color 200ms ease;
}

.nrx-banniere__puces .swiper-pagination-bullet-active {
	width: 28px;
	background: var(--nrx-signal);
}

@media (prefers-reduced-motion: reduce) {
	.nrx-banniere__puces .swiper-pagination-bullet { transition: none; }
}

@media (max-width: 719px) {
	/* Le rapport ne change plus ici : voir le commentaire du cadre. */
	.nrx-banniere__texte { padding: var(--nrx-e-3); }
}

/* ===========================================================================
   PANIER — un seul ecran (refonte du 8 aout)

   Il portait quatre titres pour une operation. Les articles, le sous-total,
   la livraison, le total, le bouton : tout tient d'un regard.
   =========================================================================== */

/* Les formulaires de ligne vivent hors du tableau, leurs controles s'y
   rattachent par l'attribut `form`. Ils n'ont rien a montrer. */
.nrx-horsflux {
	display: none;
}

.nrx-panier__marque {
	/* ELLE PORTE DEUX CHOSES, ET SA LARGEUR N'EN CONNAISSAIT QU'UNE.
	 *
	 * `34px` avait ete ecrit pour un camion de 22 px, seul dans la cellule.
	 * La vignette est venue s'y ajouter : `box-sizing: border-box` fait que
	 * cette largeur INCLUT le remplissage, donc la cellule n'offrait plus que
	 * 22 px de contenu, et `.nrx img { max-width: 100% }` y plafonnait
	 * l'image. Mesure au navigateur : 20 x 48 pour un rapport declare a 4:3.
	 *
	 * LE RAPPORT ETAIT LA ET N'AVAIT PAS LA PLACE DE S'EXPRIMER. Une largeur
	 * entierement determinee par un plafond ne laisse rien a deriver.
	 *
	 * C'EST LA CELLULE QU'ON CORRIGE, PAS L'IMAGE. Lever `max-width` sur la
	 * vignette aurait donne le meme rendu — et aurait fait d'une garantie
	 * globale, « aucune image ne deborde son conteneur », une regle a
	 * exceptions. Une exception a une protection se recopie ; une largeur
	 * perimee n'existe qu'a un endroit.
	 *
	 * LA VALEUR SUIT LA VIGNETTE AU LIEU D'ETRE POSEE A COTE : meme jeton,
	 * meme rapport. Si la hauteur de la vignette change, la cellule suit.
	 * Le `12px` est le remplissage gauche declare a `.nrx-table td` —
	 * `padding-right: 0` annule l'autre, et `border-box` oblige a le compter. */
	/* ELLE NE PORTE PLUS QUE LE CAMION, et retrouve donc sa largeur. La
	   vignette est passee dans la cellule du produit : c'est la qu'elle fait
	   une rangee sur UNE ligne au lieu de deux niveaux. Le `calc()` qui
	   elargissait cette cellule n'avait plus d'objet. */
	width: 34px;
	padding-right: 0;
	color: var(--nrx-texte-secondaire);
	vertical-align: top;
}

.nrx-camion {
	width: 22px;
	height: auto;
	display: block;
}

.nrx-panier__produit {
	display: flex;
	flex-wrap: wrap;
	/* `center` ET NON `baseline` DEPUIS QUE LA VIGNETTE Y VIT. Aligner sur
	   la ligne de base collerait le nom et les emplacements au BAS d'une
	   image de 126 px. Ce qu'on veut est une rangee dont tout le contenu se
	   centre sur la hauteur du visuel — une seule ligne visuelle. */
	align-items: center;
	gap: var(--nrx-e-1) var(--nrx-e-3);
}

.nrx-panier__nom {
	min-width: 180px;
}

.nrx-panier__options {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nrx-e-2);
}

.nrx-panier__option {
	display: inline-flex;
	align-items: center;
	gap: var(--nrx-e-1);
}


/* Une liste dans une rangee ne prend que sa place. La regle generale de
   `.nrx-saisie` l'etirerait sur toute la cellule. */
.nrx-saisie--liste {
	width: auto;
	min-width: 84px;
	display: inline-block;
}


/* Une option a valeur unique se rend en texte : rien a choisir, donc aucun
   controle. Elle garde le meme aplomb que le nom qui la precede. */
.nrx-option__unique {
	font-size: var(--nrx-t-petit);
	color: var(--nrx-texte-courant);
}

/* LE CADRE DE LA VALEUR UNIQUE — §2.2.
 *
 * Il reprend l'aplomb du bouton du selecteur pour que les deux emplacements
 * s'alignent sur la rangee. C'est une MISE EN FORME, et la liste de ce qui
 * n'y figure pas est ce qui compte : pas de `cursor: pointer`, aucune regle
 * `:hover`, aucun changement au survol ni au focus.
 *
 * Le §3.4 tient : une option a valeur unique n'a rien a selectionner. Ce qui
 * a l'air cliquable sera clique, et une valeur qui ne repond pas se lit
 * comme une panne — c'est exactement ce qu'on reprochait aux pastilles
 * d'affichage avant qu'elles deviennent agissantes. */
.nrx-option__cadre {
	display: inline-flex;
	align-items: center;
	/* MEME MESURE QUE LE BOUTON DU SELECTEUR : c'est tout l'objet de ce
	   cadre — que les deux emplacements s'alignent sur la rangee. Deux
	   remplissages differents les auraient decales. */
	padding: calc(var(--nrx-e-1) / 2) var(--nrx-e-1);
	font-size: var(--nrx-t-menu);
	border: 1px solid var(--nrx-separation);
	border-radius: 4px;
	background: var(--nrx-fond-carte);
}

/* ── LA VIGNETTE DU PANIER, ET SA PLAQUE — §2.1 ──────────────────────
 *
 * LA PLAQUE EST UNE REGLE, JAMAIS UN FICHIER. Six produits sur neuf portent
 * le gabarit « visuel a produire », dont l'empreinte est comptee par `C-2` :
 * 18 aujourd'hui, 0 au lancement. Une plaque deposee dans un repertoire de
 * SKU serait un dix-neuvieme gabarit d'empreinte differente — `C-2` ne le
 * compterait pas et DESCENDRAIT sans qu'aucun visuel ait ete produit.
 *
 * ELLE SE VOIT COMME UNE ABSENCE, PAS COMME UNE IMAGE — §10.11. Un aplat, ni
 * motif ni logo : un substitut reussi cache le defaut au lieu de le
 * resoudre, et personne ne saurait au lancement lesquels des neuf produits
 * ont un visuel reel. */
/* CHAQUE SELECTEUR EST DECLARE UNE FOIS, ET CE N'EST PAS DU CONFORT.
   Les deux partageaient d'abord un bloc de geometrie, puis la plaque
   reprenait la parole pour son fond. `Denombrer::proprieteCss()` lit le
   PREMIER bloc portant un selecteur : il rendait `null` pour un fond
   pourtant declare, et le banc rougissait sur une regle juste. La
   duplication de trois lignes coute moins qu'un instrument qui ment. */
/* LES DEUX DIMENSIONS SONT POSEES, ET C'EST OBLIGATOIRE — PAS DU CONFORT.
 *
 * `dimensions_visuel()` ecrit `width="1800" height="1350"` sur la balise.
 * Ces attributs sont des indications de presentation : une declaration
 * d'auteur les bat, mais SEULEMENT sur la propriete qu'elle nomme. Le
 * premier jet ne posait que `width: 56px` et laissait `aspect-ratio`
 * deriver le reste — or `aspect-ratio` ne s'applique que si une dimension
 * est `auto`, et la hauteur valait 1350 px par l'attribut. L'image etait
 * rendue 56 x 1350, et la rangee depassait mille pixels.
 *
 * Les trois autres emplacements posent `width` ET `height` depuis toujours,
 * pour exactement cette raison. Celui-ci le fait a son tour.
 *
 * LA HAUTEUR EST POSEE, LA LARGEUR EN DECOULE. `height` vient de l'echelle,
 * `width: auto` neutralise l'attribut, et le 4:3 fait le reste : 48 px de
 * haut, donc 64 de large. Aucun nombre invente.
 *
 * Le rapport est celui de la RESSOURCE, pas un cadrage choisi ici :
 * `object-fit: cover` recadrerait en silence si le cadre le contredisait, et
 * `VisuelsTest` compare les deux. */
/* LA LARGEUR EST POSEE, LA HAUTEUR EN DECOULE — et c'est l'inverse du
 * premier jet, parce que la contrainte a change de nature.
 *
 * Tant que la vignette vivait dans la cellule du camion, la hauteur etait le
 * cote libre et la largeur celui qu'on plafonnait. Elle est maintenant le
 * premier element de la rangee du produit, ou c'est la LARGEUR qui compte :
 * c'est elle qui decide de la place laissee au nom et aux emplacements.
 *
 * 168 px depuis l'echelle — `e-7` plus `e-6` — donc 126 de haut par le 4:3.
 * Aucun nombre invente.
 *
 * LES DEUX DIMENSIONS RESTENT DECLAREES. `height: auto` est une declaration
 * d'auteur : elle neutralise l'attribut `height="1350"` de la balise, que
 * `aspect-ratio` seul ne peut pas ecarter. C'est le defaut du 14 aout, dans
 * l'autre sens.
 *
 * `flex: 0 0 auto` PARCE QUE LA RANGEE EST UN CONTENEUR EN FLEX. Sans lui,
 * un element de flex accepte de retrecir sous sa largeur : le nom et les
 * emplacements comprimeraient l'image au lieu de se replier. */
.nrx-panier__vignette {
	display: block;
	width: calc(var(--nrx-e-7) + var(--nrx-e-6));
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	flex: 0 0 auto;
	border: 1px solid var(--nrx-separation);
	border-radius: 3px;
}

.nrx-panier__plaque {
	display: block;
	/* LA MEME BOITE QUE LA VIGNETTE, SANS QU'AUCUNE IMAGE EXISTE. C'est ce
	   qui fait qu'elle se lit comme une place reservee, et non comme un
	   trou dans la rangee — donc la meme largeur, derivee du meme calcul. */
	width: calc(var(--nrx-e-7) + var(--nrx-e-6));
	height: auto;
	aspect-ratio: 4 / 3;
	flex: 0 0 auto;
	/* UN APLAT, ET SON CONTOUR PLUS SOMBRE QUE LUI. A contour identique, la
	   plaque se confondrait avec sa propre bordure. */
	background: var(--nrx-separation);
	border: 1px solid var(--nrx-texte-tertiaire);
	border-radius: 3px;
}

/* ── LE BLOC D'OPTIONS DU TIROIR — §2.3 et §2.4 ──────────────────────
 *
 * PAR LE CONTEXTE, PAS PAR UNE BRANCHE DANS LE COMPOSANT. Meme balisage,
 * meme classe ; l'entourage decide de la disposition. Troisieme application
 * de la convention, apres `.nrx-panier__options .nrx-selecteur` et
 * `.nrx-apercu__colonne .nrx-fiche__barre`. */
.nrx-panneau__options {
	display: flex;
	/* EMPILES, ET C EST ECRIT — voir le commentaire de la vignette. */
	flex-direction: column;
	align-items: stretch;
	gap: var(--nrx-e-1) var(--nrx-e-2);
	margin-top: var(--nrx-e-1);
	padding: var(--nrx-e-1) var(--nrx-e-2);
	border-radius: 4px;
	/* La teinte du §2.3 : elle detache le bloc de la ligne, elle ne le
	   souligne pas. Assez legere pour que le texte garde son contraste. */
	background: var(--nrx-fond-page);
	/* DEUX POINTS DE MOINS, PAR L'ECHELLE. `--nrx-t-petit` vaut 14 px et
	   `--nrx-t-menu` 12 : le pas existe, il n'y a rien a inventer. Au tiroir
	   seulement — sur la page les emplacements tiennent, et retrecir un
	   texte qui tient serait un reglage sans cause. */
	font-size: var(--nrx-t-menu);
}

/* LA REDUCTION N'ATTEIGNAIT PAS LES CONTROLES, ET C'EST POURQUOI LE BLOC
 * RESTAIT PLUS HAUT QUE LA CIBLE.
 *
 * `font-size: var(--nrx-t-menu)` avait ete posee sur le bloc. Mais le bouton
 * du selecteur et le cadre de la valeur unique DECLARENT leur propre taille
 * — `var(--nrx-t-petit)`, 14 px — et une declaration ne s'herite pas : elle
 * se remplace. Les deux points de moins ne changeaient donc que les
 * etiquettes, et la hauteur du bloc, qui vient des controles, ne bougeait
 * pas d'un pixel.
 *
 * `font-size: inherit` les rend a l'echelle du bloc. Leur remplissage suit
 * la meme reduction : au tiroir, pas ailleurs. */
/* LES DEUX NOMS PARTAGENT UNE COLONNE, ET LEURS CONTROLES S'ALIGNENT.
 *
 * `COULEUR` mesure 44 px, `TAILLE` 28 : leurs controles demarraient donc a
 * deux abscisses differentes. Cote a cote ca ne se voit pas ; empiles — et
 * dans un panneau de 420 px ils le sont — les deux emplacements paraissent
 * decales l'un par rapport a l'autre.
 *
 * `8ch` EST LA LARGEUR DU PLUS LONG DES DEUX, dite dans l'unite de la police
 * qui les rend. Elle suit donc l'echelle typographique au lieu de la doubler
 * : les deux points retires au tiroir retrecissent la colonne d'autant.
 *
 * Un libelle d'option plus long que `COULEUR` elargira sa propre colonne et
 * decalera de nouveau — c'est un plancher, pas une grille. Le vocabulaire du
 * manifeste tient dans huit caracteres aujourd'hui. */
/* UNE SEULE TAILLE POUR TOUT CE QUI EST UNE OPTION.
 *
 * Les noms etaient en `--nrx-t-micro`, 11 px, quand leurs valeurs heritaient
 * les 12 du bloc. Un point d'ecart entre l'etiquette et ce qu'elle etiquette
 * suffit a faire lire deux registres la ou il n'y en a qu'un.
 *
 * `inherit` PLUTOT QU'UN JETON REPETE : la taille est declaree UNE fois, sur
 * le bloc. Reecrire `--nrx-t-menu` ici en ferait une seconde ecriture de la
 * meme intention, et la prochaine reduction n'en changerait qu'une.
 *
 * LES DEUX NOMS PARTAGENT AUSSI UNE COLONNE. `COULEUR` est plus long que
 * `TAILLE` : sans largeur commune, leurs controles demarrent a deux
 * abscisses differentes, et les deux emplacements paraissent decales des
 * qu'ils s'empilent.
 *
 * `8ch` est la largeur du plus long des deux, dite dans l'unite de la police
 * qui les rend : elle suit l'echelle au lieu de la doubler. Un libelle plus
 * long elargira sa propre colonne — c'est un plancher, pas une grille. */
/* LES DEUX SURFACES DE PANIER POSENT LE NOM A GAUCHE DU CONTROLE.
 *
 * ELLE N'ETAIT ECRITE QUE POUR LE TIROIR, ET C'ETAIT L'OUBLI. Sur la page,
 * le selecteur gardait sa colonne — `COULEUR` au-dessus de son bouton —
 * pendant que l'option a valeur unique, elle, est en `inline-flex` et posait
 * `TAILLE` A COTE de sa boite. Deux emplacements de la meme rangee, deux
 * dispositions : la rangee paraissait etagee.
 *
 * LES DEUX SELECTEURS DANS LA MEME REGLE, et pas deux regles jumelles. Deux
 * ecritures de la meme intention divergent — c'est le motif que ce chantier
 * a passe deux jours a defaire. La fiche et la modale gardent leur colonne :
 * elles n'ont pas de rangee a tenir. */
/* LES DEUX EMPLACEMENTS PARTENT DE LA MEME LIGNE.
 *
 * `.nrx-panneau__option` portait `margin-top: var(--nrx-e-1)` — un ecart
 * pense du temps ou les emplacements s'empilaient, chacun sous le
 * precedent. Cote a cote, ce meme ecart pousse le second huit pixels plus
 * bas que le premier : le selecteur, lui, a sa marge annulee. Deux
 * controles de la meme rangee, deux aplombs.
 *
 * L'ecart vertical entre emplacements est desormais celui du bloc, et il
 * n'est plus porte par un seul des deux. */
/* LE `<select>` PREND LA MESURE DU BLOC, COMME LES AUTRES CONTROLES.
 *
 * `.nrx-saisie` declare 14 px et un remplissage de 12 sur 14 — pense pour
 * un formulaire de page. Dans le bloc d'options du tiroir, ou le bouton du
 * selecteur tient en 4 sur 8, cela faisait un emplacement nettement plus
 * haut que les autres : le pave gris du t-shirt depassait celui des
 * casquettes.
 *
 * MEME `inherit` QUE LES AUTRES : la taille est declaree une fois, sur le
 * bloc. Le remplissage suit la meme reduction que le bouton et le cadre. */
.nrx-fiche__option .nrx-saisie--liste,
.nrx-panier__option .nrx-saisie--liste,
.nrx-panneau__option .nrx-saisie--liste {
	font-size: var(--nrx-t-menu);
	padding: calc(var(--nrx-e-1) / 2) var(--nrx-e-1);
}

/* ── LA MODALE REPREND LES DIMENSIONS DU PANIER ──────────────────────
 *
 * Sous l'image, les emplacements avaient la mesure de la fiche pleine page :
 * nom AU-DESSUS du controle, en 14 px. Dans une colonne de modale, ça faisait
 * deux etages par emplacement et deux aplombs differents entre eux.
 *
 * Ils prennent la mesure du panier — nom a gauche, une seule taille pour tout
 * ce qui est une option, controles resserres. C'est la quatrieme application
 * de la convention : meme balisage, meme classe, l'entourage decide. */
.nrx-apercu__colonne .nrx-fiche__options {
	align-items: center;
	gap: var(--nrx-e-1) var(--nrx-e-2);
}

/* LE REPLI SE MESURE, IL NE SE SEUILLE PLUS — et c'est un retour en arriere
 * assume.
 *
 * IL Y AVAIT ICI `@container (max-width: 380px)`, POSEE POUR LA MAUVAISE
 * CAUSE. Le tiroir debordait des qu'un libelle depassait « Bleu », et j'ai
 * conclu que les deux emplacements ne tenaient pas cote a cote. Le
 * debordement etait AILLEURS : le bouton lui-meme, dont les 12ch
 * n'accordaient que 8 px au libelle une fois le remplissage retire. Le
 * contenu sortait de SON cadre, pas du panneau.
 *
 * Cette cause corrigee, les deux emplacements tiennent — et le seuil ne
 * faisait plus qu'imposer un empilement dont personne n'avait besoin, sur un
 * nombre que j'avais estime plutot que mesure.
 *
 * `flex-wrap` SUFFIT, ET IL EST PLUS JUSTE. Ma reserve d'hier — « il
 * replierait n'importe ou, un emplacement coupe entre son nom et son
 * controle » — etait fausse : un conteneur en flex passe a la ligne ENTRE
 * ses elements, jamais a l'interieur de l'un d'eux. Chaque emplacement est
 * lui-meme un element de flex en `nowrap` : il ne peut pas se scinder.
 *
 * Le repli reste donc pose — ce qui bascule est un emplacement entier — mais
 * c'est le navigateur qui decide QUAND, sur la largeur reelle, au lieu d'un
 * seuil que j'aurais deduit. */

.nrx-panier__retrait {
	width: var(--nrx-col-retrait);
	text-align: right;
}

/* La croix remplace un bouton « RETIRER » qui pesait autant que l'article.
   Zone de clic de 32 px : un `×` de 18 px seul serait intouchable au doigt. */
.nrx-croix {
	appearance: none;
	background: none;
	border: 0;
	cursor: pointer;
	width: 32px;
	height: 32px;
	line-height: 1;
	font-size: 22px;
	color: var(--nrx-texte-secondaire);
	border-radius: 2px;
}

.nrx-croix:hover,
.nrx-croix:focus-visible {
	color: var(--nrx-titre);
	background: var(--nrx-fond-page);
}

/* ── sous le tableau ──────────────────────────────────────────────────── */

.nrx-panier__pied {
	margin-top: var(--nrx-e-3);
}

.nrx-panier__somme {
	display: flex;
	justify-content: flex-end;
	align-items: baseline;
	gap: var(--nrx-e-3);
	margin: 0 0 var(--nrx-e-2);
}

.nrx-panier__montant {
	min-width: var(--nrx-col-montant);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.nrx-panier__somme--total {
	font-size: var(--nrx-t-lead);
	font-weight: 500;
	color: var(--nrx-titre);
	padding-top: var(--nrx-e-2);
	border-top: 1px solid var(--nrx-separation);
}

.nrx-panier__taxes {
	text-align: right;
	margin: 0 0 var(--nrx-e-3);
}

/* ── le pave de livraison ─────────────────────────────────────────────── */

.nrx-port {
	background: var(--nrx-fond-page);
	border: 1px solid var(--nrx-separation);
	padding: var(--nrx-e-3);
	margin: 0 0 var(--nrx-e-3);
	display: flex;
	flex-wrap: wrap;
	gap: var(--nrx-e-3);
	align-items: flex-start;
	justify-content: space-between;
}

.nrx-port__avis {
	display: flex;
	gap: var(--nrx-e-2);
	flex: 1 1 320px;
}

.nrx-port__avis p {
	margin: 0;
}

/* Deux classes plutot qu un `!important` : `.nrx-port__avis p` remet les
   marges a zero, et il faut passer devant lui. */
.nrx-port__avis .nrx-port__adresse {
	font-style: italic;
	color: var(--nrx-texte-secondaire);
	margin-top: var(--nrx-e-1);
}

.nrx-port__calcul {
	flex: 0 1 260px;
}

.nrx-port__calcul .nrx-panier__somme {
	margin-top: var(--nrx-e-2);
	margin-bottom: 0;
}

.nrx-port__reste {
	text-align: right;
	margin: var(--nrx-e-1) 0 0;
}

/* ── la ligne de paiement ─────────────────────────────────────────────── */

.nrx-panier__payer {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nrx-e-3);
	align-items: center;
	justify-content: space-between;
	padding-top: var(--nrx-e-3);
	border-top: 1px solid var(--nrx-separation);
}

.nrx-panier__securite {
	flex: 1 1 300px;
	margin: 0;
	font-style: italic;
	text-transform: uppercase;
	font-size: var(--nrx-t-micro);
	letter-spacing: 0.06em;
	color: var(--nrx-texte-secondaire);
}

.nrx-panier__payer form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nrx-e-2);
	align-items: center;
}

.nrx-panier__courriel {
	width: auto;
	min-width: 340px;
	flex: 1 1 340px;
}

@media (max-width: 719px) {
	.nrx-port,
	.nrx-panier__payer {
		flex-direction: column;
		align-items: stretch;
	}

	.nrx-panier__payer form,
	.nrx-panier__courriel {
		width: 100%;
	}
}

/* ===========================================================================
   PANIER — corrections du 8 aout, second passage
   =========================================================================== */

/*
 * UNE SEULE COLONNE DE MONTANTS.
 *
 * Les sous-totaux de ligne vivent dans un tableau, les sommes du pied dans
 * des blocs, et le montant du bouton dans un bouton : trois systemes de mise
 * en page pour une colonne que l'oeil lit comme une seule. Ils flottaient
 * chacun de leur cote.
 *
 * Deux mesures partagees suffisent a les aligner : la largeur du montant, et
 * celle de la colonne de retrait qui le suit dans le tableau. Le pied se
 * decale de la seconde pour tomber sur la premiere.
 */
:root {
	--nrx-col-montant: 140px;
	--nrx-col-retrait: 44px;
}

.nrx-panier__table td.col--nombre:nth-last-child(2) {
	width: var(--nrx-col-montant);
	min-width: var(--nrx-col-montant);
}

/* Le pied s'arrete la ou s'arrete la colonne des montants, pas au bord du
   cadre : la colonne de retrait n'a pas d'equivalent sous le tableau. */
.nrx-panier__pied {
	padding-right: var(--nrx-col-retrait);
}

.nrx-panier__payer {
	padding-right: 0;
	margin-right: calc(-1 * var(--nrx-col-retrait));
}

/* Le montant du bouton tombe lui aussi sur la colonne. */
.nrx-panier__payer .nrx-bouton {
	display: inline-flex;
	align-items: center;
	gap: var(--nrx-e-2);
}

.nrx-panier__prix-bouton {
	min-width: var(--nrx-col-montant);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* Le camion de Font Awesome : viewBox 576 x 512, donc plus large que haut. */
.nrx-camion {
	width: 20px;
	height: auto;
	display: block;
	flex: 0 0 auto;
}

.nrx-port__avis .nrx-camion {
	width: 26px;
	margin-top: 2px;
}

/* Repartir au catalogue est le second geste le plus probable de cet ecran. */
.nrx-panier__retour {
	margin-top: var(--nrx-e-4);
}

@media (max-width: 719px) {
	.nrx-panier__pied {
		padding-right: 0;
	}

	.nrx-panier__payer {
		margin-right: 0;
	}

	.nrx-panier__prix-bouton {
		min-width: 0;
	}
}

/* ===========================================================================
   ACCES CLIENT — deux colonnes

   AUCUNE LARGEUR FIXE SUR CE QUI PORTE DU TEXTE. Les deux volets sont des
   fractions, pas des pixels : l'espagnol de `avantagesCompte` fait un tiers
   de plus que le francais, et une colonne calee en pixels le couperait.
   =========================================================================== */
.nrx-acces {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--nrx-e-6);
	align-items: start;
	margin-bottom: var(--nrx-e-6);
}

.nrx-acces__volet {
	min-width: 0;
}

/* Le filet sous le titre reprend celui de la reference, au registre Neurox :
   un trait de separation, pas un bandeau colore. */
.nrx-acces__titre {
	font-size: var(--nrx-t-marque);
	color: var(--nrx-titre);
	margin: 0 0 var(--nrx-e-2);
	padding-bottom: var(--nrx-e-2);
	border-bottom: 1px solid var(--nrx-separation);
}

/* LE MOT-CLE SE VOIT AVANT LE FORMULAIRE. Il est la condition d'entree, pas
   une precision : l'apprendre au milieu du parcours fait abandonner. */
.nrx-acces__motcle {
	border-left: 2px solid var(--nrx-signal);
	padding-left: var(--nrx-e-2);
	color: var(--nrx-texte-courant);
}

@media (max-width: 899px) {
	.nrx-acces {
		grid-template-columns: 1fr;
		gap: var(--nrx-e-5);
	}
}

/* ===========================================================================
   PANIER DANS LE TIROIR — meme gabarit, 420 px

   La disposition change par la feuille de style, jamais par un second
   gabarit : c'est ce qui a coute une 500, deux vues d'accord par coincidence
   sur ce qu'elles affichaient et en desaccord sur une cle.
   =========================================================================== */

/* ── les sommes du tiroir ─────────────────────────────────────────────── */

.nrx-panneau__somme {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--nrx-e-2);
	margin: var(--nrx-e-1) 0;
}

.nrx-panneau__montant {
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.nrx-panneau__somme--total {
	font-weight: 500;
	color: var(--nrx-titre);
	padding-top: var(--nrx-e-2);
	margin-top: var(--nrx-e-2);
	border-top: 1px solid var(--nrx-separation);
}

.nrx-panneau__port {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nrx-e-2);
	margin-top: var(--nrx-e-2);
	flex-wrap: wrap;
}

.nrx-panneau__taxes {
	margin: var(--nrx-e-1) 0 var(--nrx-e-3);
}

/* ── le formulaire de paiement, en colonne ────────────────────────────── */

.nrx-paiement--compact {
	display: flex;
	flex-direction: column;
	gap: var(--nrx-e-2);
	align-items: stretch;
}

/* AUCUNE LARGEUR FIXE SUR CE QUI PORTE DU TEXTE : le tiroir fait 420 px et
   l'espagnol de « Paiement » deborderait d'un bouton cale en pixels. */
.nrx-paiement--compact .nrx-panier__courriel {
	width: 100%;
	min-width: 0;
	flex: 1 1 auto;
	/* LE CHAMP ET LE BOUTON A LA MEME LARGEUR, ET C'EST LE PLAFOND QUI LES
	   SEPARAIT. `.nrx-saisie` plafonne a 340 px — une largeur pensee pour un
	   formulaire de page, ou un champ qui traverse l'ecran promet une saisie
	   longue. Dans un panneau de 420 px, ce plafond mordait : le bouton
	   prenait toute la colonne, le champ s'arretait avant, et les deux bords
	   ne tombaient pas au meme endroit. */
	max-width: none;
}

.nrx-paiement--compact .nrx-bouton {
	justify-content: space-between;
	width: 100%;
}

.nrx-paiement--compact .nrx-panier__prix-bouton {
	min-width: 0;
}

/* ===========================================================================
   LE PANIER DANS LE TIROIR — un resume, pas la page

   Il a porte un moment les rangees de la page, repliees par la feuille de
   style. Ca ne tenait pas dans 420 px : champs de quantite vides et
   deportes, sous-totaux disparus, defilement horizontal. Un tableau a cinq
   colonnes ne se replie pas, il se refait.
   =========================================================================== */
.nrx-panneau__lignes {
	list-style: none;
	margin: 0 0 var(--nrx-e-3);
	padding: 0;
}

.nrx-panneau__ligne {
	/* LA LIGNE EST UNE RANGEE : la vignette a gauche, le corps a droite. */
	display: flex;
	align-items: flex-start;
	gap: var(--nrx-e-2);
	/* L'ECART ENTRE ARTICLES SE RESSERRE D'UN PAS. Le tiroir est un resume :
	   plus d'articles visibles sans defiler valent mieux qu'un rythme
	   confortable. Le filet qui les separe suffit a les distinguer. */
	padding: var(--nrx-e-1) 0;
	border-bottom: 1px solid var(--nrx-separation);
	/* ELLE A PORTE UN `container-type`, ET ELLE N'EN PORTE PLUS.
	 *
	 * Le bloc d'options s'empilait sous un seuil de largeur, pose parce que
	 * le tiroir debordait. Le debordement venait du BOUTON, dont la largeur
	 * fixe n'accordait que 8 px a son libelle une fois le remplissage
	 * retire — pas de la ligne, qui avait la place. Le seuil corrigeait un
	 * symptome et imposait un empilement inutile.
	 *
	 * Le repli revient a `flex-wrap`, qui passe a la ligne entre les
	 * emplacements et jamais a l'interieur de l'un d'eux. Ce qui decide est
	 * alors la largeur reelle, pas un nombre estime. */
}

/* UNE LIGNE PAR ARTICLE, SUR UNE SEULE LIGNE. Le nom prend la place qui
   reste, le montant garde la sienne — `min-width: 0` autorise le nom a se
   couper plutot qu'a pousser le montant hors du cadre. */
/* ── LA VIGNETTE AU TIROIR ────────────────────────────────────────────
 *
 * MEME BALISAGE, MEMES CLASSES QUE `/panier` — c'est la mesure qui change,
 * et elle vient du contexte. `.nrx-panier__vignette` pose 168 px de large
 * pour une rangee de tableau ; le panneau fait 420 px et n'a pas cette
 * place.
 *
 * LA HAUTEUR EST POSEE, LA LARGEUR EN DECOULE. `width: auto` neutralise
 * l'attribut `width="1800"` que `dimensions_visuel()` ecrit sur la balise —
 * une declaration d'auteur ne bat une indication de presentation que sur la
 * propriete qu'elle nomme, et c'est le defaut du 14 aout, ou l'image etait
 * rendue 56 x 1350.
 *
 * LA PLAQUE PREND LA MEME BOITE, sans qu'aucune image existe. */
.nrx-panneau__vignette {
	height: var(--nrx-e-5);
	width: auto;
	aspect-ratio: 4 / 3;
	flex: 0 0 auto;
}

/* LA LIGNE DEVIENT UNE RANGEE : la vignette a gauche, tout le reste a
   droite. Sans l'enveloppe du corps, le nom, le montant et les emplacements
   seraient trois freres que la rangee repartirait autour de l'image. */
.nrx-panneau__ligne-corps {
	flex: 1 1 auto;
	min-width: 0;
}

/* LES EMPLACEMENTS S'EMPILENT AU TIROIR, ET C'EST ECRIT.
 *
 * La vignette prend 64 px de la largeur du panneau, plus l'ecart : ce qui
 * reste ne tient plus les deux emplacements cote a cote. Le repli est POSE
 * plutot que laisse a `flex-wrap` — un repli subi replie quand il veut, et
 * on ne sait jamais s'il a eu lieu parce que la place manquait ou parce
 * qu'une largeur s'est mal calculee.
 *
 * `stretch` pour que les deux occupent la meme largeur : empiles, deux
 * blocs de largeurs differentes se liraient comme deux rangs. */
.nrx-panneau__ligne-tete {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--nrx-e-2);
}

.nrx-panneau__article {
	min-width: 0;
	color: var(--nrx-texte-courant);
}

.nrx-panneau__montant {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
	text-align: right;
	white-space: nowrap;
}

/* LA SEULE CHOSE MODIFIABLE DU TIROIR. On peut payer d'ici, donc le choix
   doit pouvoir se faire d'ici — tout le reste passe par la page. */
.nrx-panneau__option {
	display: flex;
	align-items: center;
	gap: var(--nrx-e-1);
}


.nrx-panneau__option .nrx-saisie--liste {
	flex: 1 1 auto;
	min-width: 0;
}

/* ===========================================================================
   LE MENU DE LA SILHOUETTE

   Meme construction que le menu de langue, a deux icones de la : un
   conteneur en `position: relative`, une liste absolue sous l'icone. Une
   seconde mecanique pour le meme geste aurait diverge au premier reglage.
   =========================================================================== */
.nrx-profil {
	position: relative;
	display: inline-flex;
}

.nrx-profil__menu {
	position: absolute;
	top: calc(100% - 4px);
	right: 0;
	/* PAS DE LARGEUR FIXE : « Cerrar sesión » et « Mi perfil » sont plus
	   longs que leurs equivalents francais. Le menu s'ouvre a la mesure de
	   son entree la plus longue, borne par la fenetre. */
	min-width: 180px;
	max-width: min(280px, calc(100vw - var(--nrx-e-3)));
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--nrx-fond-carte);
	border: 1px solid var(--nrx-separation);
	z-index: 30;
}

.nrx-profil__menu[hidden] {
	display: none;
}

/* LES FILETS SEPARENT, ILS N'ENCADRENT PAS. Le dernier n'a pas de bord bas :
   la bordure du menu le porte deja. */
.nrx-profil__menu li + li {
	border-top: 1px solid var(--nrx-separation);
}

.nrx-profil__menu a {
	display: flex;
	align-items: center;
	gap: var(--nrx-e-2);
	padding: var(--nrx-e-2) var(--nrx-e-3);
	color: var(--nrx-texte-courant);
	white-space: nowrap;
}

.nrx-profil__menu a:hover,
.nrx-profil__menu a:focus-visible {
	background: var(--nrx-fond-page);
	color: var(--nrx-titre);
}

.nrx-profil__sortie svg {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

/* ===========================================================================
   PAGE DE FORMULAIRE — profil, mot de passe, acces client

   UNE CLASSE A ELLE, PAS UN MODIFICATEUR DE `.nrx-doc` : `/acces-client` n a
   pas de `.nrx-doc` — ses deux volets seraient etrangles par ses 68ch. Les
   quatre ecrans de compte partagent les memes mesures et doivent se
   ressembler ; ils portent donc la meme classe.

   `.nrx-doc` est reglee pour de la prose : 48 px en haut, 72 en bas, et de
   grands intervalles entre paragraphes. Un ecran de deux champs et deux
   boutons y tient sur un ecran et demi pour ce qu'il porte.
   =========================================================================== */
.nrx-formulaire {
	padding-top: var(--nrx-e-3);
	padding-bottom: var(--nrx-e-4);
}

/*
 * UN CHAMP N'EST PAS UNE LIGNE DE TEXTE.
 *
 * `<input>` est `inline-block` : il s'assoit sur une ligne, et cette ligne
 * lui ajoute l'espace de descente sous la boite — d'ou des champs qui
 * paraissent bien plus hauts que leur bordure. En bloc, la boite fait
 * exactement sa hauteur.
 */
.nrx-saisie {
	display: block;
}

/*
 * LE RYTHME VIENT DE L'ETIQUETTE, une seule fois. Elle portait une marge
 * basse et aucune marge haute : l'ecart entre deux champs dependait donc de
 * ce qui precedait, et changeait d'un bloc a l'autre.
 */
.nrx-champ {
	margin-top: var(--nrx-e-2);
}

/*
 * PAS `:first-of-type` — il visait le mauvais element. L etiquette de
 * l adresse est un `<p>`, donc le PREMIER `<p>` du formulaire : la regle lui
 * retirait sa marge haute et la collait au champ precedent. Un selecteur qui
 * depend du nom de balise casse des qu une etiquette change de balise.
 *
 * On vise ce qui suit un titre, ce qui est le fait qu on veut decrire.
 */
.nrx-formulaire .nrx-acces__titre + .nrx-champ {
	margin-top: var(--nrx-e-2);
}

/*
 * L ETIQUETTE GARDE SON RYTHME, QU ELLE SOIT `<label>` OU `<p>`.
 * `.nrx-doc p` pose 24 px de marge basse et l emporte sur `.nrx-champ` par
 * specificite : l etiquette de l adresse s ecartait donc de sa valeur alors
 * que les autres collaient a leur champ. Deux classes suffisent a passer
 * devant, sans `!important`.
 */
.nrx-formulaire .nrx-champ {
	margin-bottom: var(--nrx-e-1);
}

/* Une valeur qu on lit sans pouvoir l editer. Meme rythme qu un champ, sans
   sa bordure : un champ grise se lirait comme une panne. */
.nrx-formulaire .nrx-valeur {
	margin: 0;
	padding: 2px 0;
	color: var(--nrx-texte-courant);
	overflow-wrap: anywhere;
}

/* MEME HAUTEUR AU-DESSUS DES DEUX TITRES. Le premier n'en a pas : le titre
   de page le precede deja. */
.nrx-formulaire .nrx-acces__titre {
	margin-top: var(--nrx-e-4);
}

.nrx-formulaire .nrx-acces__titre--premier {
	margin-top: 0;
}

/* Le bouton suit son dernier champ de pres : `.nrx-doc p` pose 24 px, ce
   qui l'eloignait de ce qu'il valide. */
.nrx-formulaire form > p {
	margin: var(--nrx-e-2) 0 0;
}

.nrx-formulaire form {
	margin-bottom: 0;
}

/*
 * UN CHAMP A LA LARGEUR DE CE QU'IL PORTE.
 *
 * `.nrx-saisie` plafonne a 340 px — la largeur d'un champ de formulaire
 * ordinaire. C'est encore deux fois trop pour un prenom : un champ large
 * promet une saisie longue, et l'oeil doit traverser du vide pour aller du
 * libelle a la valeur.
 *
 * En `ch` et non en pixels : la mesure suit la police et le contenu, et
 * l'espagnol n'y deborde pas.
 */
.nrx-formulaire .nrx-saisie {
	max-width: 24ch;
}

/* Une adresse courriel est plus longue qu'un nom, et se relit en entier. */
.nrx-saisie--large,
.nrx-formulaire .nrx-saisie--large {
	max-width: 40ch;
}

/*
 * LE BOUTON PRINCIPAL GARDE SA COULEUR, PAS SA TAILLE.
 *
 * `.nrx-bouton` fait 15 px de rembourrage et 14 px de texte, `--discret` 8
 * et 11 : le premier faisait une fois et demie la hauteur des autres sur un
 * ecran qui en porte trois. Le signal d'un ecran se marque par le contraste,
 * pas par l'encombrement.
 */
.nrx-formulaire .nrx-bouton {
	padding: 8px 16px;
	font-size: var(--nrx-t-micro);
	letter-spacing: 0.08em;
}

/* Les deux liens secondaires, hors des sections qu'ils ne concernent pas. */
.nrx-formulaire .nrx-doc__pied {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nrx-e-3);
	margin: var(--nrx-e-4) 0 0;
	padding-top: var(--nrx-e-2);
	border-top: 1px solid var(--nrx-separation);
	font-size: var(--nrx-t-petit);
}

/* ===========================================================================
   PROFIL — deux colonnes, un bouton
   =========================================================================== */
.nrx-formulaire__grille {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: var(--nrx-e-3) var(--nrx-e-5);
	align-items: start;
}

/* Le premier champ de chaque colonne colle a son titre. */
.nrx-formulaire__grille > div > .nrx-champ:first-child {
	margin-top: 0;
}

/* CE QUI DISTINGUE L'ADRESSE DES DEUX AUTRES SE DIT SOUS ELLE, en une
   ligne, plutot que par une section separee avec son propre bouton. */
.nrx-formulaire .nrx-formulaire__avis {
	margin: var(--nrx-e-1) 0 0;
	max-width: 44ch;
}

/* UNE LIGNE, PAS UN PAVE. C'est un etat de passage : l'ancienne adresse
   fonctionne toujours, et une boite encadree en ferait une alerte. */
.nrx-profil__attente {
	display: block;
	margin-top: var(--nrx-e-2);
	padding-left: var(--nrx-e-2);
	border-left: 2px solid var(--nrx-signal);
	font-size: var(--nrx-t-petit);
	color: var(--nrx-texte-secondaire);
	overflow-wrap: anywhere;
}

/* Un bouton qui se lit comme un lien. L'annulation reste un POST : un
   changement d'etat ne se fait pas par une adresse qu'un aspirateur suit. */
.nrx-lien {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	margin-left: var(--nrx-e-1);
	font: inherit;
	color: var(--nrx-texte-courant);
	text-decoration: underline;
	cursor: pointer;
}

.nrx-lien:hover,
.nrx-lien:focus-visible {
	color: var(--nrx-titre);
}

.nrx-formulaire .nrx-formulaire__action {
	margin: var(--nrx-e-4) 0 0;
}

@media (max-width: 719px) {
	.nrx-formulaire__grille {
		grid-template-columns: 1fr;
	}

	/* Empilees, la seconde colonne reprend le rythme d'un champ. */
	.nrx-formulaire__grille > div + div > .nrx-champ:first-child {
		margin-top: var(--nrx-e-2);
	}
}