/* ============================================================
   DIRECTED BY WOLF — THEME v2 « CHARBON & VERRE » (2026-07)
   Chargé AVANT tout autre CSS, sur TOUTES les pages.

   LOI 1 — Rien ne brille qui ne soit fixé à une structure :
     tout glow appartient à un rail, une arête, une étagère.
   LOI 2 — Bicolore : --ember = PIGMENT/ACTION (CTA, chip active,
     play hover). --led = LUMIÈRE (rails, glows, hovers).
     Ne jamais mélanger les rôles.
   LOI 3 — Le verre est l'interface, le mur est mat : liquid glass
     sur ce qu'on touche (nav, chips, boutons, tabbar, lightbox),
     jamais en nappe sur les cartes du feed.
   LOI 4 — La marque parle en dossier technique : mono, numéros de
     série, STATUS: ACTIVE, folios. Le lockup DBW reste
     métallique/monochrome — jamais recoloré.
   ============================================================ */
/* ---------- EURO TECHNIC — la police du wordmark DBW, en display (v3) ---------- */
@font-face{font-family:'Euro Technic';src:url('../fonts/EuroTechnicBold.otf') format('opentype');
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Euro Technic Ext';src:url('../fonts/EuroTechnicExtBold.otf') format('opentype');
  font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Euro Technic Ext Outline';src:url('../fonts/EuroTechnicExtBoldOutline.otf') format('opentype');
  font-weight:800;font-style:normal;font-display:swap}

:root{
  /* -- MURS (charbon mat, biais chaud) -- */
  --coal-0:#060606;   /* noir salle — fond de page */
  --coal-1:#0C0C0E;   /* mur enduit — fond de section */
  --coal-2:#141416;   /* surface carte / plaque */
  --coal-3:#1C1C1F;   /* surface hover / élévation */
  --seam:#252523;     /* hairline 1px — joints, chaud neutre */

  /* -- LUMIÈRE (LED 2700K) -- */
  --led:#C9CFCC;      /* la LED — accent lumineux */
  --led-hot:#EDF1EF;  /* cœur du filament — glows, serif accent */
  --led-deep:#6E7370; /* ambre enfoncé — bordures actives */
  --white-led:#E8F0FF;/* LED froide — timecode, focus-visible. <2% des surfaces */

  /* -- PIGMENT (action) -- */
  --ember:#B1B7B4; --ember-hi:#C6CCC9; --ember-lo:#9AA09D;

  /* -- MÉTAL (marque DBW) -- */
  --metal-hi:#E6E8EC; --metal-lo:#7A7E86;
  --silver:#B1B7B4;   /* Wolf Silver — Brand File V2.0, échantillonné sur le métal de la réf */

  /* -- TEXTE -- */
  --bone:#EFF1F0;     /* ivoire chaud — headlines */
  --stone:#979C9A;    /* corps de texte */

  /* -- VIE -- */
  --moss:#C9CFCC;     /* pastille statut uniquement */

  /* -- VERRE (liquid glass Apple — LOI 3) -- */
  --glass-bg:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  --glass-brd:rgba(255,255,255,.13);
  --glass-hl:inset 0 1px 0 rgba(255,255,255,.12);
  --glass-blur:12px; /* 20→12 : sur verre sombre posé sur charbon quasi uni,
                        indistinguable — et le coût du flou chute nettement */

  /* -- OMBRES & LUEURS -- */
  --shadow-card:0 2px 6px rgba(0,0,0,.45),0 24px 60px -30px rgba(0,0,0,.78);
  --shadow-lift:0 18px 40px -20px rgba(0,0,0,.9),0 6px 24px -8px rgba(201,207,204,.28);
  --glow-rail:0 0 2px var(--led-hot),0 0 12px rgba(201,207,204,.55),0 0 36px rgba(201,207,204,.20);

  /* -- SYSTÈME (héritage conservé) -- */
  --ease:cubic-bezier(.22,1,.36,1);
  --sans:'Inter Tight',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  /* -- DISPLAY v3 : Euro Technic (charte logo DBW) -- */
  --euro:'Euro Technic','Inter Tight',system-ui,sans-serif;
  --euro-ext:'Euro Technic Ext','Inter Tight',system-ui,sans-serif;
  --euro-out:'Euro Technic Ext Outline','Inter Tight',system-ui,sans-serif;
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:40px;--s6:48px;--s7:64px;--s8:80px;--s9:96px;
  --s10:128px;--s11:160px; /* v3 : respiration des sections */
  --r-xs:8px;--r-s:12px;--r-m:16px;--r-l:20px;--r-xl:24px;
  --r:24px;
  --ls-1:.08em;--ls-2:.16em;--ls-3:.28em;
  --gutter:max(48px,calc(50vw - 592px));

  /* -- ALIAS DE MIGRATION (les pages v1/v2 continuent de compiler) -- */
  --ink:var(--coal-0); --card:var(--coal-2); --card-2:var(--coal-3);
  --line:var(--seam); --orange:var(--ember); --glow:var(--led-hot);
}

/* ---------- MARQUE ----------
   BRAND FILE V2.0 (2026-08-07) : loup officiel vectorisé + wordmark
   EuroTechnic Ext Outline retracé depuis la font (dbw_wordmark_official.svg).
   Toujours via mask → colorable. L'icône W accompagne aux petites tailles. */
.brand .bw-ico{height:19px;width:auto;display:block}
.brand-dbw{display:block;height:10px;aspect-ratio:46792/2153;background:var(--bone);
  -webkit-mask:url(../logo/dbw/dbw_wordmark_official.svg) no-repeat left center/contain;
          mask:url(../logo/dbw/dbw_wordmark_official.svg) no-repeat left center/contain}
.brand-dbw--foot{height:17px;background:linear-gradient(180deg,var(--metal-hi),var(--silver),var(--metal-lo))}
.brand-dbw--nav{height:13px;margin-left:12px;background:var(--bone)}

/* ---------- VERRE — la surface d'interface (LOI 3) ---------- */
.lgx{background:var(--glass-bg);border:1px solid var(--glass-brd);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.3);
          backdrop-filter:blur(var(--glass-blur)) saturate(1.3);
  box-shadow:var(--glass-hl),0 10px 34px -18px rgba(0,0,0,.8)}

/* ---------- RAIL LED — la lumière comme ligne (LOI 1) ---------- */
.rail{position:relative;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--led-hot) 12%,var(--led-hot) 88%,transparent);
  box-shadow:var(--glow-rail)}
.rail::after{content:"";position:absolute;top:2px;left:4%;right:4%;height:140px;pointer-events:none;
  background:linear-gradient(180deg,rgba(201,207,204,.13),rgba(201,207,204,.04) 45%,transparent)}
.rail--v{width:2px;height:auto;
  background:linear-gradient(180deg,transparent,var(--led-hot) 12%,var(--led-hot) 88%,transparent)}
.rail--v::after{content:none}
.rail--cool{--led-hot:var(--white-led)} /* 1 usage max par page */

/* ---------- PEGBOARD — la matière signature (procédural, réf. bureau) ---------- */
.pegboard{background-color:var(--coal-1);background-image:
  radial-gradient(circle,rgba(0,0,0,.85) 1.5px,transparent 2px),
  radial-gradient(circle,rgba(255,255,255,.028) 1.5px,transparent 2px);
  background-size:22px 22px,22px 22px;background-position:0 0,0 1px}

/* ---------- MUR — enduit charbon (procédural, sans texture image) ---------- */
.wall{background:
  radial-gradient(140% 90% at 18% -10%,rgba(255,255,255,.015),transparent 60%),
  radial-gradient(120% 80% at 82% 110%,rgba(255,255,255,.012),transparent 55%),
  var(--coal-1)}

/* ---------- LANGAGE DOSSIER (LOI 4) ---------- */
.serial{font-family:var(--mono);font-size:9.5px;letter-spacing:var(--ls-2);
  color:rgba(239,241,240,.52);font-variant-numeric:tabular-nums}
.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--moss);
  box-shadow:0 0 8px rgba(201,207,204,.8);vertical-align:middle}