/* 15-designn.css — APERÇU isolé « clinical blueprint on frosted paper » (DESIGN.md à
   la racine). Scopé sous .designn (route /designn) : redéfinit les tokens de marque,
   de surface et d'élévation pour la SEULE page produit d'aperçu ; tout le reste de
   l'app est intact (ce fichier ne matche que .designn). À promouvoir en :root
   (02-variables) ou à retirer une fois la direction tranchée. CSP : zéro inline. */
.designn {
  /* --- Surfaces : canvas gris → papier blanc → remplissage d'input (DESIGN.md) --- */
  --panel: #ffffff;
  --bg: #f5f5f5;
  --chip: #f5f5f5;
  --row-hover: #fafafa;

  /* --- Encre & neutres achromatiques --- */
  --ink: #0a0a0a;
  --ink-2: #171717;
  --muted: #737373;
  --line: #e5e5e5;
  --title-zone: #0a0a0a;

  /* Rayons : on GARDE nos valeurs (--radius 10px / --radius-card 14px de 02-variables),
     PAS la pilule 18/24 de DESIGN.md — décision actée dans DESIGN.md. Donc aucun override. */

  /* --- Élévation : lift PREMIUM, doux et diffus (slate teinté, 3 couches à spread
     négatif → tuck) — le « whisper-quiet » shadcn (noir pur, tassé) rendait plat/cheap.
     On garde le filet hairline de la carte pour l'arête nette + cette ombre riche qui
     décolle vraiment le bloc du canvas gris ; pas d'anneau 1px (doublon du filet).
     Décision actée dans DESIGN.md. --- */
  --shadow:
    0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 10px -2px rgba(16, 24, 40, 0.06),
    0 16px 32px -12px rgba(16, 24, 40, 0.14);

  /* --- Dé-marquage : violet → graphite monochrome (public cible) —
     --brand-grad reste un gradient VALIDE (solide) : un seul token alimente à la
     fois background, background-image (.btn-primary) ET le masque des icônes (.ic),
     donc le remplacer par une couleur nue casserait background-image. */
  --brand: #171717;
  --brand-d: #0a0a0a;
  --brand-deep: #171717;
  --brand-light: #404040;
  --grad-stops: #171717 0%, #171717 100%;
  --brand-grad: linear-gradient(0deg, #171717, #171717);
  --brand-wash: #f5f5f5;
  --link: #0a0a0a;
  --focus-ring: rgba(10, 10, 10, 0.14);

  /* --- Rouge « ember » = seule chromie, réservée au destructif (DESIGN.md) --- */
  --bad: #e7000b;
  --bad-d: #b60009;

  /* --- Pastilles auteur : le camaïeu 8 teintes portait un violet (--av-2) et un
     magenta (--av-4) → repointés graphite pour bannir le violet ; les autres teintes
     fonctionnelles restent (bleu/vert/ambre/sarcelle/rouge/ardoise). --- */
  --av-2: #52525b;
  --av-4: #3f3f46;

  /* --- Canvas plein-cadre : bleed sur le padding de .content (mêmes tokens de
     clamp) pour que le fond gris atteigne les bords, la carte blanche flotte dessus. */
  --designn-py: clamp(18px, 2.2vw, 36px);
  --designn-px: clamp(18px, 3vw, 52px);
  background: var(--bg);
  color: var(--ink);
  margin: calc(-1 * var(--designn-py)) calc(-1 * var(--designn-px));
  padding: var(--designn-py) var(--designn-px);
  min-height: 100vh;
}

/* Titre de page : tracking serré « engineered » de Geist aux grandes tailles. */
.designn .page-head h1 {
  letter-spacing: -0.02em;
}

/* Carte : padding 20px (densité compacte DESIGN.md), seule retouche d'espacement. */
.designn .card {
  padding: 18px 20px;
}

/* --- Typographie : hiérarchie de POIDS claire — un TITRE/EN-TÊTE est toujours plus
   LOURD que le texte qu'il coiffe, jamais plus fin (règle Lucas). Palette Geist
   400/500/600. Rôles :
     (1) TITRE de bloc      = 600 ink — carte/section (h3, legend) ;
     (2) EN-TÊTE de tableau = 600 ink, compact, sans majuscule — le « titre » d'une
         colonne, plus LOURD et plus foncé que ses cellules (15px/400 ink) ;
     (2b) ÉTIQUETTE de fait (kv-k) = 12px/500 grise, effacée — ce n'est PAS un titre :
          une légende au-dessus de sa valeur, la valeur reste ce qu'on lit ;
     (3) VALEUR/donnée      = normal (kv-v 14px/400 ink, strong démoté) — le poids
         appartient au titre, aucun gras ne rivalise.
   Corrige : titres/en-têtes rendus plus fins que le corps. Décision : DESIGN.md. --- */

/* (1) Titre de bloc = seul semibold ink de la carte (letter-spacing engineered). */
.designn .card > h3,
.designn .form-section > legend {
  font-size: var(--fs-15);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* Icône permanente à gauche des titres SUPPRIMÉE (fin de la règle « icône permanente »).
   Le markup l'émet encore app-wide (ui.card impose opts.icon dès qu'il y a un titre,
   garde-fou test/ui-card-icon-rule) → on la masque ici en aperçu ; à la propagation on
   retirera l'icône du markup + le garde-fou. */
.designn .card > h3 > .sec-ic,
.designn .form-section > legend > .sec-ic {
  display: none;
}

/* (2) En-tête de tableau = TITRE de colonne : plus LOURD et plus foncé que ses cellules
   (15px/400 ink), jamais plus fin. Bold ink, compact, sans majuscule. */
.designn .table-wrap th,
.designn table.mini th {
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
}

/* (2b) Étiquette de fait (kv-k) = légende discrète AU-DESSUS de sa valeur (≠ titre) :
   grise, effacée — ici c'est la valeur qu'on lit, pas le label. */
.designn .kv-cell .kv-k {
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  color: var(--muted);
  letter-spacing: 0;
}

/* (3) Valeur/donnée : poids NORMAL, ink — plus de gras qui rivalise avec le titre. */
.designn .kv-cell .kv-v {
  font-size: var(--fs-14);
  font-weight: var(--fw-normal);
  color: var(--ink-2);
}
.designn .card strong,
.designn .card b,
.designn td strong,
.designn td b {
  font-weight: var(--fw-medium);
  color: var(--ink-2);
}