/* ATELIER ÉPHÉMÈRE — /design/nuances/{0,1,2,3} : LES NUANCES DE LA SURFACE (canvas, papier, rampe
   de gris, filet, ombre). Supprimé AVEC sa page une fois la piste tranchée et repliée dans
   02-variables.css + 07-tables.css (CLAUDE_DESIGN/CLAUDE.md § Trancher une famille).

   MÉCANIQUE — une piste ne réécrit AUCUNE règle : elle ne fait que RE-DÉCLARER des tokens `:root`
   sur son scope. Toute la mécanique de l'app est déjà branchée sur ces tokens (les surfaces se
   peignent en var(--chip)/var(--row-alt)/…, elles héritent donc du scope sans rien savoir de
   l'atelier) — ce qui rend la pliure triviale : les valeurs de la piste retenue déménagent telles
   quelles dans le bloc :root, et ce fichier disparaît. Corollaire : ce qu'on voit ici est
   EXACTEMENT ce que rendrait la prod — aucune divergence possible.

   Le seul point de code que l'atelier AJOUTE est la ligne du bandeau ci-dessous : elle introduit
   `--band` (le bandeau d'en-tête détaché du remplissage de champ) avec un REPLI sur `--chip` — de
   sorte que les pistes qui ne cassent pas la fusion (0 et 1) retombent sur le comportement de
   production sans qu'on ait à écrire deux règles. */

/* Le CANVAS de la piste : la bande qui saigne jusqu'aux bords de la zone de contenu (elle en
   reprend le padding en marge négative — .content, 06-layout.css) pour se lire comme un vrai fond
   de page, pas comme une carte grise. Sans ce plein-cadre, un canvas se juge faux : un gris cerné
   de blanc paraît plus foncé qu'il n'est. */
.nua {
  background: var(--bg);
  margin-inline: calc(-1 * clamp(18px, 3vw, 52px));
  margin-bottom: calc(-1 * clamp(18px, 2.2vw, 36px));
  padding: clamp(18px, 2.2vw, 36px) clamp(18px, 3vw, 52px);
  border-top: 1px solid var(--line);
}
.nua-tag {
  margin: 0 0 var(--space-block);
  font-size: var(--fs-11);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* LE BANDEAU D'EN-TÊTE — le seul ajout de mécanique de l'atelier (cf. en-tête du fichier).
   `--band` non déclaré (pistes 0 et 1, fusion conservée) ⇒ repli sur `--chip` = la règle de prod
   (07-tables.css). Déclaré (pistes 2 et 3) ⇒ le bandeau quitte la rampe des champs. */
.nua .table-wrap th,
.nua table.mini th {
  background: var(--band, var(--chip));
}

/* ─────────────────────────────────────────────────────────────────────────────
   PISTE 1 — « la rampe descend » : zéro token neuf. La rampe s'écarte par les deux bouts (le
   zébrage s'éclaircit, le bandeau descend) et l'encre douce descend d'un cran — sans quoi le
   garde AA (--muted sur --chip, test/contrast.test.js) sauterait. Le bandeau reste FUSIONNÉ au
   remplissage de champ : c'est le plafond honnête de la rampe actuelle. */
.nua1 {
  --bg: #f2f2f2;
  --row-alt: #f7f7f7;
  --row-hover: #ededed;
  --chip: #e0e0e0;
  --line: #dcdcdc;
  --muted: #616161;
}

/* PISTE 2 — « le bandeau quitte les champs » : UN SEUL geste. `--band` (teinté slate, sous le
   filet) ne sert que l'en-tête ; tout le reste — canvas, papier, zébrage, survol, champs, badges,
   filet, encre — reste STRICTEMENT celui de la prod. Rayon d'impact nul, garde AA intact (un `th`
   est encré --ink, jamais --muted). Casse la fusion écrite dans GLOBAL.md § Surfaces. */
.nua2 {
  --band: #dde0e4;
}

/* PISTE 3 — « le canvas descend » : la cause plutôt que le symptôme. Le canvas descend franchement
   et prend la teinte slate de l'ombre ; le papier redevient vraiment blanc PAR CONTRASTE ; l'ombre
   s'allège (deux couches — c'est le canvas qui décolle le papier, plus elle) ; le bandeau quitte
   les champs comme en piste 2. Fait entrer une TEINTE dans une palette neutre pure. */
.nua3 {
  --bg: #e9ebef;
  --row-alt: #f7f8fa;
  --row-hover: #eef0f4;
  --chip: #e7e9ee;
  --band: #dbdfe6;
  --line: #e3e6eb;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 6px 16px -6px rgba(16, 24, 40, 0.12);
}

/* ─────────────────────────────────────────────────────────────────────────────
   LE NUANCIER (gabarit de présentation de la page, zéro style de composant — comme les `.ds-*` de
   /design). Chaque pastille est peinte par le TOKEN (var(--x)), jamais par l'hex recopié à côté :
   si la feuille et la page divergent, la pastille contredit son étiquette à l'écran. Il vit dans
   une carte de la page, HORS du banc d'essai — il porte donc lui-même la classe de scope de la
   piste (`.nua-ramp.nua<n>`, posée au call-site), sans quoi ses pastilles peindraient les tokens de
   production et les quatre nuanciers seraient identiques. */
.nua-ramp {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nua-step {
  display: flex;
  align-items: center;
  gap: var(--space-inline);
}
.nua-role {
  min-width: 130px;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-13);
}
.nua-hex {
  min-width: 80px;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--muted);
}
.nua-step code {
  min-width: 110px;
}
/* La pastille : un carré à l'échelle du contrôle, filet hairline (sans lui, un gris très clair sur
   le papier blanc de la carte n'a pas de bord et ne se lit pas). */
.nua-sw {
  flex: 0 0 auto;
  width: var(--control-h);
  height: var(--control-h);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.nua-sw-bg {
  background: var(--bg);
}
.nua-sw-panel {
  background: var(--panel);
}
.nua-sw-row-alt {
  background: var(--row-alt);
}
.nua-sw-row-hover {
  background: var(--row-hover);
}
.nua-sw-chip {
  background: var(--chip);
}
.nua-sw-line {
  background: var(--line);
}
.nua-sw-band {
  background: var(--band, var(--chip));
}
.nua-sw-muted {
  background: var(--muted);
}
/* L'ombre n'est pas une couleur : sa pastille est une carte blanche qui la PORTE. */
.nua-sw-shadow {
  background: var(--panel);
  box-shadow: var(--shadow);
}