/* ── Design showcase — les 3 signatures explorées (slug /design) ───────────────
   Référence vivante des directions « violet dégradé ». Orchidée a été RETENUE et est
   désormais le primaire global (:root --brand/--brand-grad) → `.dpv-orchidee` reflète
   exactement le chrome réel. Chaque `.dpv-<nom>` repointe juste un dégradé `--g` + un
   violet plein `--dpv-*` sur un mock du chrome ; tout reste isolé sous `.dpv-*`. */
.dpv-intro { max-width: 64ch; color: var(--muted); margin-bottom: 18px; }
.dpv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 18px; }
.dpv-card { border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; background: var(--panel); display: flex; flex-direction: column; }
.dpv-swatch { height: 96px; background: var(--g); position: relative; }
.dpv-swatch-name { position: absolute; left: 16px; bottom: 11px; color: var(--white); font-weight: var(--fw-heavy); font-size: var(--fs-20); letter-spacing: -.01em; text-shadow: 0 1px 3px rgba(0,0,0,.28); }
.dpv-chosen { font-size: var(--fs-11); font-weight: var(--fw-bold); background: rgba(255,255,255,.22); padding: 1px 8px; border-radius: 999px; vertical-align: middle; }
.dpv-swatch-hex { position: absolute; right: 14px; bottom: 12px; color: rgba(255,255,255,.92); font-size: var(--fs-11); font-weight: var(--fw-semibold); letter-spacing: .02em; }
.dpv-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.dpv-desc { color: var(--muted); font-size: var(--fs-13); }
.dpv-frame { display: flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.dpv-side { width: 138px; flex-shrink: 0; background: var(--dpv-side); border-right: 1px solid var(--line); padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; }
.dpv-brand { display: flex; align-items: center; gap: 8px; font-weight: var(--fw-bold); font-size: var(--fs-14); color: var(--ink); padding: 2px 4px 10px; }
.dpv-logo { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px; background: var(--g); color: var(--white); font-weight: var(--fw-heavy); font-size: var(--fs-13); }
/* couleur figée (pas `--sidebar-ink`, désormais clair pour le menu graphite réel) :
   ce mock reste une sidebar CLAIRE, l'encre doit rester graphite. */
.dpv-nav-item { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border-radius: 7px; font-size: var(--fs-13); font-weight: var(--fw-medium); color: #525252; }
.dpv-nav-item .ic { width: 15px; height: 15px; background-color: var(--dpv-strong); }
.dpv-nav-item.hover { background: var(--dpv-wash); color: var(--dpv-ink); }
.dpv-nav-item.hover .ic { background-color: var(--dpv-ink); }
.dpv-nav-item.active { background: var(--g); color: var(--white); font-weight: var(--fw-semibold); }
.dpv-nav-item.active .ic { background-color: var(--white); }
.dpv-main { flex: 1; min-width: 0; padding: 12px; display: flex; flex-direction: column; gap: 11px; background: var(--panel); }
.dpv-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dpv-btn { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: var(--radius); font-size: var(--fs-13); font-weight: var(--fw-bold); border: 1px solid transparent; }
.dpv-btn-primary { background-image: var(--g); background-origin: border-box; color: var(--white); font-weight: var(--fw-semibold); }
.dpv-btn-ghost { background: var(--white); border-color: var(--line); color: var(--ink); font-weight: var(--fw-normal); }
.dpv-btn-soft { background: var(--dpv-wash); color: var(--dpv-ink); }
.dpv-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.dpv-chip { font-size: var(--fs-11); font-weight: var(--fw-bold); padding: 2px 9px; border-radius: 999px; background: var(--dpv-wash); color: var(--dpv-ink); }
.dpv-chip-solid { background: var(--g); color: var(--white); }
.dpv-link { color: var(--dpv-ink); font-weight: var(--fw-semibold); font-size: var(--fs-13); }
.dpv-input { width: 100%; border: 1px solid var(--dpv-strong); border-radius: var(--radius); padding: 6px 9px; font-size: var(--fs-13); color: var(--ink); background: var(--white); box-shadow: 0 0 0 3px var(--dpv-ring); }
.dpv-input::placeholder { color: var(--muted); }
.dpv-meta { font-size: var(--fs-11); color: var(--muted); }

/* Trois signatures — même âme violette, trois températures.
   Améthyste = violet royal équilibré ; Orchidée = camaïeu chaud vers le magenta
   (= primaire global) ; Crépuscule = camaïeu froid (vers l'indigo/bleu nuit). */
.dpv-amethyste  { --g: linear-gradient(135deg, #4c1d95 0%, #7c3aed 52%, #a855f7 100%); --dpv-strong: #7c3aed; --dpv-ink: #5b21b6; --dpv-wash: #f1eafe; --dpv-ring: rgba(124,58,237,.22); --dpv-side: #faf7ff; }
.dpv-orchidee   { --g: linear-gradient(130deg, #7c3aed 0%, #a21caf 50%, #e040c8 100%); --dpv-strong: #a21caf; --dpv-ink: #86198f; --dpv-wash: #fbe8fb; --dpv-ring: rgba(162,28,175,.20); --dpv-side: #fdf6fd; }
.dpv-crepuscule { --g: linear-gradient(150deg, #312e81 0%, #6d28d9 48%, #818cf8 100%); --dpv-strong: #5b50e6; --dpv-ink: #4338ca; --dpv-wash: #eaeafe; --dpv-ring: rgba(91,80,230,.22); --dpv-side: #f6f6ff; }

/* ---- Showcase menu latéral (/design/menu) ---------------------------------
   Trois traitements du FOND de la sidebar (le rose pâle actuel n'est pas « tout
   public »). Chrome identique ; chaque `.smv-<key>` repointe les tokens locaux du
   menu (`--m*`) + son fond. Mock isolé sous `.smv-*` (zéro impact sur le chrome réel,
   tant qu'aucune piste n'est retenue). routes/design.js. */
.smv-intro { max-width: 70ch; color: var(--muted); margin-bottom: 18px; }
.smv-intro strong { color: var(--ink); font-weight: var(--fw-semibold); }
.smv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px 18px; }
.smv-card { display: flex; flex-direction: column; gap: 11px; }
.smv-head { display: flex; flex-direction: column; gap: 3px; }
.smv-name { font-weight: var(--fw-semibold); font-size: var(--fs-17); letter-spacing: -.01em; color: var(--ink); }
.smv-chosen { font-size: var(--fs-11); font-weight: var(--fw-bold); color: var(--brand-d); vertical-align: middle; }
.smv-desc { color: var(--muted); font-size: var(--fs-13); line-height: 1.45; }
.smv-frame { display: flex; height: 348px; border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; }
/* Sidebar mock : layout commun, couleurs via les tokens --m* posés par la variante. */
.smv-side { width: 186px; flex-shrink: 0; display: flex; flex-direction: column;
  color: var(--mink); border-right: 1px solid var(--mline); padding: 12px 9px; }
.smv-brand { display: flex; align-items: center; gap: 8px; padding: 3px 5px 12px;
  font-weight: var(--fw-bold); font-size: var(--fs-15); color: var(--mtitle); }
.smv-logo { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 7px; background: var(--brand-grad); color: var(--white); font-weight: var(--fw-heavy);
  font-size: var(--fs-14); flex-shrink: 0; }
.smv-search { font-size: var(--fs-12); color: var(--mmuted); background: var(--msearch);
  border: 1px solid var(--msearch-line); border-radius: 8px; padding: 6px 9px; margin-bottom: 8px; }
.smv-nav { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.smv-group { font-size: var(--fs-10); font-weight: var(--fw-bold); text-transform: uppercase;
  letter-spacing: .07em; color: var(--mgroup); padding: 9px 8px 2px; }
.smv-item { display: flex; align-items: center; gap: 9px; padding: 5px 8px; border-radius: 8px;
  font-size: var(--fs-13); font-weight: var(--fw-medium); color: var(--mink); }
.smv-item .ic { width: 16px; height: 16px; background-color: var(--mic); flex-shrink: 0; }
.smv-item.hover { background: var(--mhover); color: var(--mhover-ink); }
.smv-item.hover .ic { background-color: var(--mhover-ink); }
.smv-foot { padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--mline); }
.smv-who { display: flex; flex-direction: column; font-size: var(--fs-12); color: var(--mtitle); }
.smv-who small { color: var(--mgroup); text-transform: uppercase; font-size: var(--fs-10); letter-spacing: .05em; }
/* Aperçu du contenu à droite — juste pour situer le contraste du menu. */
.smv-stage { flex: 1; min-width: 0; background: var(--bg); padding: 14px; display: flex; flex-direction: column; gap: 9px; }
.smv-stage-h { height: 15px; width: 46%; border-radius: 6px; background: var(--chip); }
.smv-stage-row { height: 44px; border-radius: var(--radius); border: 1px solid var(--line); }
.smv-stage-row.short { width: 62%; }
/* Item actif « lame » de marque (graphite + blanc) : dégradé Orchidée plein, fixe,
   miroir du chrome réel (.nav-item.active). */
.smv-graphite .smv-item.active, .smv-blanc .smv-item.active {
  background-image: var(--brand-grad); background-origin: border-box;
  color: var(--white); font-weight: var(--fw-semibold); }
.smv-graphite .smv-item.active .ic, .smv-blanc .smv-item.active .ic { background-color: var(--white); }

/* 1 — Dégradé plein : le fond entier porte le dégradé Orchidée, texte blanc. */
.smv-degrade {
  background-image: var(--brand-grad);
  --mink: rgba(255,255,255,.84); --mtitle: #fff; --mgroup: rgba(255,255,255,.62); --mic: rgba(255,255,255,.84);
  --mhover: rgba(255,255,255,.12); --mhover-ink: #fff; --mmuted: rgba(255,255,255,.72);
  --mline: rgba(255,255,255,.18); --msearch: rgba(255,255,255,.14); --msearch-line: rgba(255,255,255,.26); }
.smv-degrade .smv-logo { background: rgba(255,255,255,.18); }
.smv-degrade .smv-item.active { background: rgba(255,255,255,.20); color: #fff; font-weight: var(--fw-semibold); }
.smv-degrade .smv-item.active .ic { background-color: #fff; }

/* 2 — Graphite sombre : ardoise neutre, marque sur le logo + l'item actif. */
.smv-graphite {
  background: #17171b;
  --mink: #c6c6cd; --mtitle: #fff; --mgroup: #6e6e79; --mic: #b6b6c0;
  --mhover: rgba(255,255,255,.07); --mhover-ink: #fff; --mmuted: #8a8a94;
  --mline: rgba(255,255,255,.09); --msearch: rgba(255,255,255,.06); --msearch-line: rgba(255,255,255,.13); }

/* 3 — Blanc épuré : blanc franc, encre graphite, icônes magenta, marque sur l'actif. */
.smv-blanc {
  background: #fff;
  --mink: #404048; --mtitle: var(--ink); --mgroup: #8a8a94; --mic: var(--brand);
  --mhover: #f4f4f5; --mhover-ink: var(--ink); --mmuted: var(--muted);
  --mline: var(--line); --msearch: #fff; --msearch-line: var(--line); }
.smv-blanc .smv-item.hover .ic { background-color: var(--brand); }

/* ---- Showcase boutons (/design/boutons) ----------------------------------
   Layout du showcase uniquement. Le système de boutons est **adopté** : la page rend
   désormais de vrais `.btn-*` (défini plus haut, bloc « buttons »), donc ces helpers
   `.btv-*` ne portent plus que la grille/les libellés, jamais de style de bouton. */
.btv-intro { max-width: 72ch; color: var(--muted); margin-bottom: 18px; }
.btv-intro strong { color: var(--ink); font-weight: var(--fw-semibold); }
.btv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 18px 16px; }
.btv-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.btv-name { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--ink); }
.btv-usage { font-size: var(--fs-12); color: var(--muted); line-height: 1.4; }
.btv-blockwrap { max-width: 360px; margin-top: 16px; }