/* NTROPYX — gamme des familles de produits.
   Section autonome : ses 38 jetons vivent sur .ntxg-gamme, jamais sur :root,
   pour qu'aucune couleur ne puisse deriver ailleurs sur la page. .shell reste
   au site. Un seul parti d'apparence : la page est sombre. */

/* ==========================================================================
   NTROPYX — What ships, and what it treats.

   Ce que le produit TRAITE est la plus grande chose de sa rangee. Tout le
   reste se lit autour. C'est le contraste d'echelle : un chiffre enorme, une
   unite minuscule, une phrase courte — et sur la famille route, ce chiffre
   change pendant que la main tire l'axe.

   Aucune icone devant une ligne d'avantage : une pastille par puce est une
   signature de gabarit, pas de la hierarchie. La hierarchie se fait par la
   taille, la graisse et l'espace.
   ========================================================================== */

.ntxg-gamme {
  /* ---------- couleurs ----------
     Deux mondes cohabitent dans cette section : le FOND, sombre, qui la porte ;
     et la MATIERE, claire et translucide, qui porte les produits. Chaque encre
     declare sur lequel des deux elle se pose — sans quoi son contraste n'est
     pas verifiable. Aucune couleur ne se decide ailleurs que dans ce bloc.

     §12 : les encres posees sur la matiere sont OPAQUES. Une encre en alpha sur
     une surface floutee se recompose avec ce qui defile derriere : son contraste
     bouge au scroll. Les valeurs ci-dessous sont les composites mesures sur
     rgb(209,206,200) — meme rendu, mais stable. */

  /* La matiere qui porte les produits. Ivoire OPAQUE, releve au pixel sur la
     carte NTROPYX de reference : rgb(249,241,229) en haut ou la lumiere tombe,
     rgb(239,228,212) en bas ou elle se retire. Une surface translucide a 86%
     sur un sol quasi noir composait a rgb(209,206,200) — grise et eteinte ; il
     faudrait 97% d'opacite pour atteindre l'ivoire, donc plus de translucidite
     du tout. §12 reserve le verre au chrome flottant ; une surface de CONTENU
     est un objet pose, plein, tenu par son ombre. */
  --matiere-haut:          #f9f1e5;
  --matiere-bas:           #efe4d4;
  --matiere:               #f7eee1;                 /* la valeur moyenne, pour les surfaces plates */
  --matiere-lueur:         rgba(255, 255, 255, .9);
  --matiere-lueur-vive:    rgba(255, 255, 255, .95); /* l'arete quand l'objet est tenu */
  --pouce-haut:            #fbf8f0;                 /* le pouce du selecteur : sa face au jour */
  --pouce-bas:             #efe9db;                 /* et sa face a l'ombre */
  --matiere-creux:         rgba(17, 20, 17, .07);   /* le lit creuse du selecteur */
  --matiere-arete-forte:   rgba(17, 20, 17, .5);    /* sous contraste renforce */
  --matiere-creux-fort:    rgba(17, 20, 17, .12);

  /* encres posees SUR la matiere claire */
  --encre:                 #111411;
  --encre-douce:           rgb(67, 68, 65);              /* composite de .74 — 6,23:1 */
  /* Calculee sur le fond le plus SOMBRE qu'elle touche — le lit creuse du
     selecteur, aujourd'hui rgb(231,223,210) sur la matiere ivoire. L'ancienne
     valeur avait ete tiree pour un lit bien plus sombre ; sur l'ivoire elle
     rendait 7,18 contre 8,53 pour l'encre douce, soit 1,35 d'ecart : les deux
     plans se confondaient. Elle remonte donc, sans jamais passer sous 4,5. */
  --encre-tenue:           rgb(97, 96, 90);              /* 4,76:1 dans le creux */
  /* La pastille de statut n'est pas du texte : son seuil est 3:1, pas 4,5. A
     .32 elle rendait 1,88 sur l'ivoire — invisible. Elle reste NEUTRE et non
     rouge : dans cette carte la couleur signifie un benefice, un rouge de
     rupture entrerait en collision avec le rouge de la puissance. */
  --encre-puce:            rgba(17, 20, 17, .55);   /* 3,61:1 sur le bas de carte */

  /* Les couleurs qui disent le benefice. Precedent Apple : les anneaux
     d'Activite — rouge, vert, bleu — ou la couleur SEULE porte le sens, sans
     pictogramme. Mesure sur cet ivoire : les teintes vives du systeme Apple
     tombent entre 1,91 et 3,50, inutilisables pour du texte. Les variantes a
     contraste renforce passent, sauf le vert (3,50). Teinte et saturation
     d'Apple conservees, seule la luminosite descend — jusqu'a tenir 4,6 sur
     rgb(239,228,212), le point le plus sombre du degrade de carte. */
  /* Une capsule n'est pas un aplat. La carte capte 5,3 points de lumiere entre
     son haut et son bas ; une pastille posee dessous en capte autant — pas
     quatre fois plus, sinon le degrade devient un effet et non un eclairage.
     Chaque teinte porte donc son haut, son bas, et l'ombre de sa PROPRE
     couleur : une ombre noire sous un objet colore le salit. Blanc mesure de
     4,90 a 6,82 au point le plus clair. */
  --gain-conso-haut:       #0045ee;  --gain-conso-bas:      #003bcc;
  --gain-conso-ombre:      0, 64, 221;
  --gain-emissions-haut:   #218139;  --gain-emissions-bas:  #1b672d;
  --gain-emissions-ombre:  30, 116, 51;
  --gain-puissance-haut:   #df0016;  --gain-puissance-bas:  #bd0012;
  --gain-puissance-ombre:  206, 0, 20;

  /* La longevite vit au second plan : du texte, donc une seule valeur. */
  --gain-longevite:        #be3100;   /* 4,61 sur le bas de carte */

  /* encres posees SUR le fond sombre */
  --sur-fond:              #f5f5f7;
  --sur-fond-doux:         rgba(248, 243, 228, .74);

  /* l'or : trois emplois distincts, donc trois valeurs */
  --or:                    #d8c071;                 /* le filet, le trait */
  --or-vif:                #f1dda0;                 /* le sur-titre, sur fond sombre */
  --or-encre:              #64522c;                 /* le TEXTE, sur fond clair — 4,73:1 */

  /* l'action : le lien vers la boutique */
  --action:                rgba(216, 192, 113, .12);
  --action-tenue:          rgba(216, 192, 113, .22);
  --action-arete:          rgba(126, 104, 57, .42);
  --action-arete-tenue:    rgba(126, 104, 57, .62);
  --action-arete-forte:    rgba(126, 104, 57, .8);

  /* l'ombre : une seule encre, l'opacite dit la distance */
  --ombre:                 17, 20, 17;
  --ombre-nuit:            0, 0, 0;


  /* ---------- typographie ----------
     Plancher : 11 px, la plus petite fonte standard d'Apple (Caption 2). */
  --micro: .69rem;
  --serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display",
           "Segoe UI", Roboto, system-ui, sans-serif;

  /* ---------- geometrie et temps ---------- */
  --r-l: 22px;
  --r-pill: 999px;
  --cible:  44px;                                 /* cible tactile minimale d'Apple */
  --sortie: cubic-bezier(.16, 1, .3, 1);
}


* { box-sizing: border-box; min-width: 0; }



/* §14 : une bascule d'apparence systeme ne doit pas etre un a-coup de
   luminosite. Le sol et les encres de l'en-tete traversent en 450 ms, sans
   rebond — c'est un changement d'etat, pas un geste, donc pas de ressort.
   Le selecteur en est volontairement exclu : sa couleur est la reponse a
   l'appui, et §1 exige qu'elle reste immediate. */
body,
.ntxg-gamme__kicker, .ntxg-gamme__title, .ntxg-gamme__lede,
.ntxg-gamme__origine-t, .ntxg-gamme__origine-d {
  transition: background-color .45s var(--sortie), color .45s var(--sortie);
}

h1, h2, p { margin: 0; }

.ntxg-gamme { padding: clamp(56px, 7vw, 96px) 0; }

/* ---------- tete ---------- */

/* La provenance vaut pour les quatre produits : elle se dit donc une fois, a
   hauteur d'en-tete, et non quatre fois dans les cartes. Elle occupe le cote
   libre du bloc de titre — une composition, pas une pastille posee dessus. Le
   filet or est celui du sur-titre : la mention appartient au systeme. */
.ntxg-gamme__head {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: clamp(20px, 3.4vw, 54px);
  max-width: 1140px;
}

.ntxg-gamme__dire { flex: 1 1 420px; max-width: 940px; }

.ntxg-gamme__origine {
  flex: 0 1 auto; margin: 0;
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: 13px; row-gap: 6px;
}

/* La croix remplace le filet : deux ancrages pour un meme bloc se disputeraient
   le regard. Tracee aux proportions federales — branches de 6 de large, 20
   d'envergure sur un champ de 32 — et non a l'oeil. */
.ntxg-gamme__croix {
  grid-row: 1 / span 2; align-self: start;
  display: block; margin-top: 2px;
  border-radius: 2px;
}

.ntxg-gamme__origine-t {
  display: block;
  font-size: .78rem; line-height: 1.2;
  letter-spacing: .2em;                       /* petit corps : crenage franchement positif */
  text-transform: uppercase; font-weight: 600;
  color: var(--or-vif);
}

.ntxg-gamme__origine-d {
  display: block; margin-top: 7px; max-width: 24ch;
  font-size: .88rem; line-height: 1.45;       /* petit corps : interlignage plus ample */
  letter-spacing: .004em;
  color: var(--sur-fond-doux);
}

.ntxg-gamme__kicker {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--or-vif);
  font-size: .72rem; line-height: 1.25;
  letter-spacing: .16em;                      /* petit corps : crenage positif */
  text-transform: uppercase;
}

.ntxg-gamme__kicker::before {
  content: ""; width: 42px; height: 1px; flex: 0 0 42px;
  background: linear-gradient(90deg, var(--or), transparent);
}

.ntxg-gamme__title {
  margin-top: 14px; max-width: 18ch;
  font-family: var(--serif);
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.03;                          /* grand corps : interlignage serre */
  letter-spacing: -.032em;                    /* grand corps : crenage negatif */
  font-weight: 300; color: var(--sur-fond); text-wrap: balance;
}

.ntxg-gamme__lede {
  margin-top: 18px; max-width: 62ch;
  font-size: 1.02rem; line-height: 1.62;      /* petit corps : interlignage large */
  color: var(--sur-fond-doux);
}

/* ---------- la rangee ----------
   §12 : matiere translucide claire sur fond sombre. Grande surface, donc flou
   marque et ombre profonde. Le degrade de la page vit derriere : la surface
   change quand on defile, sans qu'on anime quoi que ce soit. */

.ntxg-familles { display: grid; gap: clamp(16px, 2.4vw, 26px); margin-top: clamp(30px, 4vw, 46px); }

.ntxg-famille {
  display: grid;
  grid-template-columns: minmax(0, 236px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 48px);
  padding: clamp(24px, 3vw, 40px);
  /* Pas de trait : la reference n'en a pas, et sur un sol sombre l'ivoire se
     detache seul. Le bord reste declare et transparent pour que le mode
     contraste renforce puisse le peindre sans decaler d'un pixel. */
  border: 1px solid transparent;
  border-radius: var(--r-l);
  color: var(--encre);
  /* Le degrade n'est pas un ornement : il rejoue la lumiere de la reference,
     qui tombe sur le haut de la carte et se retire vers le bas. Sans lui la
     surface est plate ; avec lui elle est eclairee. */
  /* La couleur pleine est declaree sous le degrade : un degrade seul laisse la
     couleur de fond transparente, et la surface n'a alors pas de valeur propre. */
  background-color: var(--matiere);
  background-image: linear-gradient(176deg, var(--matiere-haut) 0%, var(--matiere) 46%, var(--matiere-bas) 100%);
  box-shadow: inset 0 1px 0 var(--matiere-lueur),
              0 2px 6px -2px rgba(var(--ombre-nuit), .5),
              0 34px 70px -34px rgba(var(--ombre-nuit), .78);

  /* §12 : la matiere arrive, elle ne fait pas que s'allumer. */
  opacity: 0;
  transform: translate3d(0, 14px, 0) scale(.988);
  filter: blur(9px);
}

.ntxg-famille.is-in {
  opacity: 1; transform: none; filter: none;
  transition: opacity .58s var(--sortie), transform .72s var(--sortie), filter .58s var(--sortie),
              background-color .45s var(--sortie), border-color .45s var(--sortie);
  transition-delay: calc(var(--i) * 70ms);
}

.ntxg-famille__objet { display: flex; align-items: center; justify-content: center; gap: 14px; }

.ntxg-famille__objet img {
  display: block; width: auto; max-width: 100%;
  height: clamp(160px, 20vw, 232px); object-fit: contain;
}

.ntxg-famille__corps { display: flex; flex-direction: column; }

.ntxg-famille__carburants {
  font-size: var(--micro); line-height: 1.35;
  letter-spacing: .15em; text-transform: uppercase; color: var(--or-encre);
}

.ntxg-famille__nom {
  margin-top: 8px; font-family: var(--serif);
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1.1; letter-spacing: -.018em; font-weight: 500; color: var(--encre);
}

/* ==========================================================================
   LE CHIFFRE — ce que le produit traite. La plus grande chose de la rangee.
   ========================================================================== */

.ntxg-cle { margin-top: clamp(14px, 1.8vw, 22px); }

.ntxg-cle__n {
  display: block;
  font-family: var(--serif);
  font-size: clamp(3rem, 6.6vw, 5.2rem);
  line-height: .9;                            /* tres grand corps : interlignage tres serre */
  letter-spacing: -.046em;                    /* tres grand corps : crenage tres negatif */
  font-weight: 300;
  font-variant-numeric: tabular-nums;         /* les chiffres ne dansent pas */
  color: var(--encre);
  white-space: nowrap;
}

.ntxg-cle__u {
  font-size: .23em; letter-spacing: .015em; font-weight: 500;
  color: var(--encre-tenue); margin-left: .18em;
}

.ntxg-cle__d {
  display: block; margin-top: 12px;
  font-size: .7rem; line-height: 1.4;
  /* Mesure : --ink-dim rendait 3,69:1 ici, sous le seuil. La legende passe a
     --ink-soft (6,23:1) et le mot fort a l'encre pleine : la hierarchie tient
     alors par le poids ET par la densite, pas par un gris illisible. */
  letter-spacing: .13em; text-transform: uppercase; color: var(--encre-douce);
}

.ntxg-cle__d b { color: var(--encre); font-weight: 600; }

/* Le chiffre roule quand il change : seul le caractere qui bouge bouge. */
/* Le caractere est decoupe pour rouler seul ; l'espace des milliers en est un
   aussi, et il doit garder sa chasse au lieu d'etre avale par le decoupage. */
.ntxg-roul { position: relative; display: inline-block; overflow: hidden; height: 1em; vertical-align: baseline; }
.ntxg-roul__i { display: block; white-space: pre; will-change: transform; }

.ntxg-famille__phrase {
  margin-top: clamp(16px, 2vw, 22px); max-width: 54ch;
  font-size: .95rem; line-height: 1.6; color: var(--encre-douce);
}

/* ==========================================================================
   L'AXE — controle segmente. Radios natifs dessous, indicateur physique dessus.
   ========================================================================== */

.ntxg-axe { margin-top: clamp(18px, 2.2vw, 24px); }

.ntxg-axe__t {
  font-size: var(--micro); line-height: 1.3; letter-spacing: .14em;
  text-transform: uppercase; color: var(--encre-tenue);
}

.ntxg-segmente {
  /* Le nombre de colonnes est declare UNE fois, ici, dans la grille. Le pouce est
     une cellule de cette grille : sa largeur et sa hauteur ne sont calculees nulle
     part, elles SONT la colonne. Le script ne connait ce nombre que parce qu'il le
     lit sur la grille — il n'en detient pas de copie. --i porte le rang tenu, en
     centiemes de colonne, et l'etat au repos est juste avant qu'une seule ligne de
     JavaScript ne tourne. */
  --i: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 10px 0 0; padding: 4px; border: 0;
  /* Coins concentriques : le rang interieur est une pilule, donc son rayon vaut la
     moitie de la cible ; le champ ajoute sa marge par-dessus. Une pilule ici tenait
     tant que le champ faisait une rangee — a deux rangees elle devient un ovale de
     50 px de rayon. Cette formule redonne 26 px dans les deux cas. */
  border-radius: calc(var(--cible) / 2 + 4px);
  background: var(--matiere-creux);
  box-shadow: inset 0 1px 2px var(--matiere-creux);
  touch-action: pan-y;                        /* l'horizontale est a nous, la page garde le vertical */
  cursor: grab; overflow: hidden;
}

.ntxg-segmente.is-grabbing { cursor: grabbing; }
.ntxg-segmente legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* §12 : l'indicateur est une matiere PLEINE. Deux translucides empilees et la
   lisibilite s'effondre — le skill l'interdit. */
.ntxg-segmente__pouce {
  grid-area: 1 / 1;                           /* meme cellule que le premier segment */
  transform: translate3d(calc(var(--i) * 1%), 0, 0);
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--pouce-haut), var(--pouce-bas));
  box-shadow: 0 1px 2px rgba(var(--ombre), .16), 0 6px 16px -8px rgba(var(--ombre), .4),
              inset 0 1px 0 var(--matiere-lueur);
  will-change: transform; pointer-events: none;
  transition: opacity .22s var(--sortie);   /* §14 : un fondu, pas un deplacement */
}

/* §1 : la reponse vit sur l'appui, pas au relachement. Le pouce se souleve des
   que la main le touche — un objet qu'on tient se deplace naturellement, c'est
   ce qui rend le glissement pensable sans qu'un mot l'explique. */
.ntxg-segmente.is-press .ntxg-segmente__pouce {
  box-shadow: 0 2px 5px rgba(var(--ombre), .22), 0 14px 30px -12px rgba(var(--ombre), .55),
              inset 0 1px 0 var(--matiere-lueur-vive);
}

.ntxg-segmente.is-grabbing .ntxg-segmente__pouce {
  box-shadow: 0 2px 4px rgba(var(--ombre), .2), 0 12px 26px -10px rgba(var(--ombre), .5),
              inset 0 1px 0 var(--matiere-lueur-vive);
}

.ntxg-seg { position: relative; min-width: 0; }
.ntxg-seg:nth-of-type(1) { grid-area: 1 / 1; }
.ntxg-seg:nth-of-type(2) { grid-area: 1 / 2; }
.ntxg-seg:nth-of-type(3) { grid-area: 1 / 3; }
.ntxg-seg--mesure { grid-area: 1 / 4; }
.ntxg-seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }

.ntxg-seg span {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: var(--cible);                   /* cible tactile, par construction */
  padding: 11px 12px; border-radius: var(--r-pill);
  font-size: .76rem; line-height: 1.3; letter-spacing: .01em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--encre-tenue);
  transition: color .22s var(--sortie);
  user-select: none;
}

.ntxg-seg input:checked + span { color: var(--encre); font-weight: 600; }
/* L'or du fond clair, pas celui du fond sombre : sur la matiere, --or tombe a
   1,01:1 et l'indicateur disparait. --or-encre y tient 4,23:1. */
.ntxg-seg input:focus-visible + span { outline: 2px solid var(--or-encre); outline-offset: -3px; }
.ntxg-seg--mesure input:checked + span { color: var(--or-encre); }

/* Deux gestes coexistent et l'un des deux n'est pas devinable. Une ligne,
   discrete, nomme les deux. */
.ntxg-axe__indice {
  display: block; margin-top: 9px;
  font-size: var(--micro); line-height: 1.4; letter-spacing: .02em;
  /* Mesure : a --ink-dim cette ligne rendait a 3,69:1, sous le seuil. C'est
     elle qui enseigne les deux gestes : elle ne peut pas etre la moins
     lisible du bloc. Le jeton du corps courant la porte au-dessus. */
  color: var(--encre-douce);
}

.ntxg-axe__indice b { color: var(--encre-douce); font-weight: 600; }

/* ==========================================================================
   LES AVANTAGES — hierarchie par la taille et la graisse, pas par une icone.
   Le distinctif domine ; le commun se lit dessous, entier, sans puce.
   ========================================================================== */

.ntxg-avantages { margin-top: clamp(20px, 2.4vw, 28px); }

.ntxg-avantage-cle {
  display: block; max-width: 40ch;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.24;                          /* corps moyen : interlignage moyen */
  letter-spacing: -.014em;                    /* corps moyen : crenage leger */
  font-weight: 500; color: var(--encre);
}

/* §16.6 : huit lignes de meme taille, meme poids, meme filet et meme respiration,
   ce n'est pas une hierarchie, c'est un tableau. Les memes mots se lisent donc sur
   deux plans. Le premier porte ce que le produit FAIT, a hauteur de regard. Le
   second porte ce qu'il preserve et ce qu'il ne fait pas : meme mots, voix plus
   basse. Aucun filet sous chaque ligne — c'est l'espace qui separe, pas un trait. */
.ntxg-gains { list-style: none; margin: 0; padding: 0; }

.ntxg-gains--fait {
  /* Une pastille ne se range pas dans une grille a colonnes egales : elle coule.
     La grille serrait la plus longue sous sa largeur naturelle et la cassait en
     deux lignes — onze pastilles nettes et un losange. En flux, chacune prend sa
     mesure et passe a la ligne quand la place manque, sans jamais se plier. */
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(10px, 1.2vw, 14px) clamp(13px, 1.7vw, 24px);
  /* Pas de filet pleine largeur au-dessus : trois items alignes sous un trait
     redeviennent un en-tete de tableau. L'affirmation en serif au-dessus tient
     deja lieu d'ancrage, et l'ecart fait le reste. */
  margin-top: clamp(20px, 2.3vw, 28px);
}

/* Un item sans capsule n'est pas une pastille : il n'a rien a faire dans leur
   rangee. Dans la carte Race, l'affirmation sur l'octane y occupait 275 px en
   tete et poussait les trois capsules a 945 px sur 947 disponibles. Elle prend
   donc sa ligne, et les capsules retrouvent exactement la rangee des autres
   cartes. */
.ntxg-gains--fait li:not([data-gain]) { flex: 1 0 100%; }

.ntxg-gains--fait li {
  font-size: .95rem; line-height: 1.35;   /* corps courant : interlignage moyen */
  letter-spacing: -.002em;                /* corps courant : crenage proche de zero */
  font-weight: 500; color: var(--encre);
}

/* Le second plan porte autant de contenu que le premier : le client doit LIRE
   chaque avantage, pas le survoler. Il garde donc la meme taille et un contraste
   plein. Ce qui le distingue n'est ni la taille ni la paleur — c'est le poids
   (400 contre 500) et la trame (deux colonnes contre la rangee du dessus). Une
   ligne par avantage : dans un flux continu les items se fondent l'un dans
   l'autre, et ce qui se fond ne se voit pas. */
.ntxg-gains--tient {
  /* Deux colonnes equilibrees, et non une grille : a cinq items une grille
     laisse un orphelin seul sur sa rangee. Le multi-colonnes repartit 3/2,
     puis 2/2 — jamais un item abandonne en bas. */
  columns: 2; column-gap: clamp(20px, 2.6vw, 40px);
  margin-top: clamp(14px, 1.7vw, 19px);
}

.ntxg-gains--tient li { break-inside: avoid; margin-bottom: 9px; }

.ntxg-gains--tient li {
  font-size: .95rem; line-height: 1.35;   /* meme corps que le premier plan */
  /* §12 : sur une matiere floutee, un texte secondaire gagne un crenage
     legerement ouvert — il tient mieux quand le fond bouge derriere. */
  letter-spacing: .006em;
  font-weight: 400; color: var(--encre-douce);
}
/* §12 : « put color on a solid layer, not the translucent foreground ». Portee
   par le mot, la couleur se lit comme un lien ; portee par une surface pleine,
   elle se lit comme un benefice. Mesure : une capsule teintee claire ne tient
   pas 4,5 avec un texte de sa propre teinte — trois couleurs sur quatre
   echouent. La capsule PLEINE avec un texte blanc tient de 5,78 a 7,56, et se
   detache de la carte de 4,60 a 6,02.

   Le premier plan seul la recoit. Vingt pastilles saturees ne feraient
   ressortir aucune : c'est la retenue qui rend une couleur visible. Le second
   plan garde le mot colore — plan plus bas, voix plus basse.

   Les deux garanties restent en encre : leur absence de couleur est ce qui
   fait exister les quatre autres. */
.ntxg-gains--fait li[data-gain] {
  display: inline-flex; align-items: center;
  /* Une pastille epouse son mot. Sans cela l'element de grille s'etire sur
     toute la colonne et devient un bandeau — l'inverse d'une pastille. */
  justify-self: start;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  color: #fff;
  font-weight: 600;          /* du blanc sur couleur demande un trait plus plein */
  letter-spacing: .008em;    /* petit corps sur fond dense : crenage legerement ouvert */

  /* Meme angle que la carte : la lumiere vient du meme endroit pour tout ce que
     porte la section. La couleur pleine est declaree sous le degrade. */
  background-color: var(--cap-bas);
  background-image: linear-gradient(176deg, var(--cap-haut), var(--cap-bas));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),   /* l'arete que la lumiere accroche */
    inset 0 -1px 0 rgba(0, 0, 0, .10),        /* et le bord ou elle se retire */
    0 1px 2px -1px rgba(var(--cap-ombre), .45),
    0 7px 16px -9px rgba(var(--cap-ombre), .62);
}

.ntxg-gains--fait li[data-gain="conso"] {
  --cap-haut: var(--gain-conso-haut); --cap-bas: var(--gain-conso-bas);
  --cap-ombre: var(--gain-conso-ombre);
}
.ntxg-gains--fait li[data-gain="emissions"] {
  --cap-haut: var(--gain-emissions-haut); --cap-bas: var(--gain-emissions-bas);
  --cap-ombre: var(--gain-emissions-ombre);
}
.ntxg-gains--fait li[data-gain="puissance"] {
  --cap-haut: var(--gain-puissance-haut); --cap-bas: var(--gain-puissance-bas);
  --cap-ombre: var(--gain-puissance-ombre);
}

.ntxg-gains--tient li[data-gain="longevite"] { color: var(--gain-longevite); }


/* ---------- pied ---------- */

.ntxg-famille__pied {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: auto; padding-top: clamp(20px, 2.4vw, 28px);
}

.ntxg-vers-boutique {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 11px 19px;
  border: 1px solid var(--action-arete);
  border-radius: var(--r-pill);
  font-size: .78rem; line-height: 1.3; letter-spacing: .03em; font-weight: 600;
  color: var(--or-encre); text-decoration: none;
  background: var(--action);
  transition: transform .1s ease-out, background .2s ease, border-color .2s ease;
}

.ntxg-vers-boutique:hover { background: var(--action-tenue); border-color: var(--action-arete-tenue); }
.ntxg-vers-boutique:active { transform: scale(.97); }   /* la reponse vit sur l'appui */
.ntxg-vers-boutique:focus-visible { outline: 2px solid var(--or-encre); outline-offset: 3px; }
.ntxg-vers-boutique svg { flex: 0 0 auto; transition: transform .22s var(--sortie); }
.ntxg-vers-boutique:hover svg { transform: translateX(2px); }

.ntxg-rupture {
  display: inline-flex; align-items: center; gap: 8px;
  /* §15 : a 11,8 px ce libelle restait au crenage par defaut de la fonte. Un
     petit corps demande une ouverture legere — c'est la seule taille de la
     section qui n'etait pas reglee. Le corps courant, lui, garde `normal` :
     la fonte systeme porte deja sa table de crenage, et la surcharger serait
     la vraie faute. */
  font-size: .74rem; line-height: 1.35; letter-spacing: .014em;
  color: var(--encre-tenue);
}

.ntxg-rupture i { width: 6px; height: 6px; border-radius: 50%; background: var(--encre-puce); }

.ntxg-duo { display: flex; align-items: flex-end; justify-content: center; gap: clamp(10px, 1.6vw, 20px); }
.ntxg-duo figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 9px; }

.ntxg-duo figcaption {
  font-size: var(--micro); line-height: 1.3; letter-spacing: .13em;
  text-transform: uppercase; color: var(--encre-tenue); text-align: center;
}

/* ---------- adaptation ---------- */

@media (max-width: 900px) {
  .ntxg-famille { grid-template-columns: 1fr; }
  .ntxg-famille__objet img { height: clamp(140px, 32vw, 190px); }
}

@media (max-width: 620px) {
  .ntxg-gains--fait { flex-direction: column; align-items: flex-start; }
  .ntxg-gains--tient { columns: 1; }
  .ntxg-vers-boutique { width: 100%; justify-content: center; }
  .ntxg-seg span { font-size: var(--micro); padding: 11px 5px; }

  /* Quatre libelles dont un est une phrase ne tiennent pas sur une rangee de
     telephone : a largeurs egales un segment vaut 83 px au mieux sur le plus grand
     iPhone, et « Made to measure » mesure 91,5 px de texte. Aucun reglage ne repare
     ca. §16.6 : le chemin courant d'abord, l'option avancee un cran plus bas. L'axe
     porte les trois concentrations ; le sur-mesure prend la rangee du dessous, sur
     toute la largeur, et aucun mot n'est raccourci dans aucune langue. */
  .ntxg-segmente { grid-template-columns: repeat(3, 1fr); }
  .ntxg-seg--mesure { grid-area: 2 / 1 / 3 / -1; margin-top: 4px; }

  /* Le sur-mesure n'est pas une position sur l'axe : quand il est choisi, le pouce
     n'a plus rien a designer et s'efface, la rangee prend elle-meme la matiere.
     L'etat vit dans le CSS, pas dans une classe posee par le script. */
  .ntxg-segmente:has(.ntxg-seg--mesure input:checked) .ntxg-segmente__pouce { opacity: 0; }
  .ntxg-seg--mesure input:checked + span {
    background: linear-gradient(180deg, var(--pouce-haut), var(--pouce-bas));
    box-shadow: 0 1px 2px rgba(var(--ombre), .16), 0 6px 16px -8px rgba(var(--ombre), .4),
                inset 0 1px 0 var(--matiere-lueur);
  }
}

/* ---------- preferences systeme ---------- */

@media (prefers-reduced-motion: reduce) {
  .ntxg-famille { opacity: 1; transform: none; filter: none; }
  /* §14 : le mouvement reduit retire le deplacement, pas le fondu de couleur —
     une teinte qui traverse n'est pas vestibulaire, et elle evite l'a-coup. */
  .ntxg-famille.is-in { transition: opacity .2s ease, background-color .45s ease, border-color .45s ease; }
  .ntxg-vers-boutique:active { transform: none; }
  .ntxg-vers-boutique svg, .ntxg-vers-boutique:hover svg { transition: none; transform: none; }
}

@media (prefers-contrast: more) {
  /* La carte est deja pleine : l'aplatir lui retirerait sa lumiere sans rien
     gagner. Seul le bord se renforce, parce que lui seul manquait. */
  .ntxg-famille { border-color: var(--matiere-arete-forte); }
  .ntxg-segmente { background: var(--matiere-creux-fort); }
  .ntxg-vers-boutique { border-color: var(--action-arete-forte); }
}