/* ════════════════════════════════════════════════════════════════════════
   shared/da.css — Design system « Boule Bretonne » 2026 (DA validée)
   Source de vérité : docs/DA_designsystem_2026.md (export Claude Design).
   Réutilisable sur TOUTES les pages de la refonte. Mode JOUR + NUIT (data-theme).
   Polices : Hanken Grotesk (corps) + Anton (display). Icônes Lucide (jamais d'emoji).
   ════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

/* ── Tokens : neutres par thème (nuit par défaut) ─────────────────────── */
:root{
  --bg:#0b0b0c; --surface:#161618; --surface2:#1f1f22; --surface3:#252529;
  --text:#fafafa; --text2:#9b9b9e; --text3:#6a6a6e;
  --border:rgba(255,255,255,.13); --hair:rgba(255,255,255,.08); --input-bg:#101012;
  --topbar:rgba(11,11,12,.82); --card-shadow:0 1px 3px rgba(0,0,0,.25);
}
[data-theme="day"]{
  --bg:#f3f2ef; --surface:#ffffff; --surface2:#faf9f6; --surface3:#efeee9;
  --text:#0b0b0c; --text2:#66666a; --text3:#9a9a9e;
  --border:rgba(0,0,0,.13); --hair:rgba(0,0,0,.07); --input-bg:#ffffff;
  --topbar:rgba(243,242,239,.85); --card-shadow:0 1px 3px rgba(0,0,0,.08);
}

/* ── Tokens : marque (indépendants du thème) ──────────────────────────── */
:root{
  --grad:linear-gradient(154deg,#fec834 0%,#e58c38 38%,#ee3b8c 100%);   /* « Flamme rosé » — grands éléments expressifs uniquement */
  --grad-btn:linear-gradient(125deg,#fed23a,#f3a838 55%,#e58c38);        /* bouton primaire */
  --acc:#e58c38; --acc-ink:#2a1402; --gold:#fec834; --pink:#ee3b8c; --bronze:#c08043; --silver:#c4c8d0;
  --success:#46c47e; --live:#e23357; --info:#5b8dee; --warn:#e8913a; --error:#e24b4a;
  --font-display:'Anton','Impact',sans-serif;
  --font-body:'Hanken Grotesk','Segoe UI',system-ui,sans-serif;
  --radius:16px; --radius-sm:12px; --radius-pill:999px;
  --spring:cubic-bezier(.34,1.56,.64,1);
}

/* ── Base ─────────────────────────────────────────────────────────────── */
.da, body.da{ background:var(--bg); color:var(--text); font-family:var(--font-body); line-height:1.5; }
.da *,.da *::before,.da *::after{ box-sizing:border-box; }
.da-display{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.02em; line-height:.95; }
.da-grad-text{ background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.da-muted{ color:var(--text2); }
.da-faint{ color:var(--text3); }

/* ── Cartes flottantes ────────────────────────────────────────────────── */
.da-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--card-shadow); }
.da-card--hover{ transition:transform .18s, border-color .18s; }
.da-card--hover:hover{ transform:translateY(-3px); border-color:var(--acc); }

/* ── Boutons ──────────────────────────────────────────────────────────── */
.da-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-body);
  font-weight:700; font-size:.92rem; cursor:pointer; border:none; border-radius:var(--radius-sm); padding:12px 22px; transition:.18s; }
.da-btn:disabled{ opacity:.45; cursor:not-allowed; }

/* Primaire = parallélogramme penché (markup : <button class="da-btn da-btn--primary"><span>Label</span></button>) */
.da-btn--primary{ position:relative; overflow:hidden; transform:skewX(-9deg); background:var(--grad-btn); color:var(--acc-ink);
  border-radius:14px; padding:14px 28px; transition:transform .4s var(--spring), filter .2s, box-shadow .2s; }
.da-btn--primary > *{ display:inline-flex; align-items:center; gap:8px; transform:skewX(9deg); }
.da-btn--primary::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.38) 50%,transparent 68%); background-size:250% 100%;
  background-position:-55% 0; transition:background-position .55s ease; }
.da-btn--primary:hover{ transform:skewX(0); filter:brightness(1.06);
  box-shadow:0 0 0 4px rgba(238,59,140,.16), 0 10px 26px -10px rgba(238,59,140,.5); }
.da-btn--primary:hover::before{ background-position:160% 0; }

.da-btn--secondary{ background:var(--surface2); color:var(--text); border:1px solid var(--border); }
.da-btn--secondary:hover{ border-color:var(--acc); }
.da-btn--ghost{ background:transparent; color:var(--text2); border:1px solid var(--border); }
.da-btn--ghost:hover{ color:var(--text); background:var(--surface2); }
.da-btn--icon{ width:40px; height:40px; padding:0; }

/* ── Champs (focus = anneau accent) ───────────────────────────────────── */
.da-field{ width:100%; background:var(--input-bg); border:1px solid rgba(127,127,127,.22); border-radius:var(--radius-sm);
  color:var(--text); font-family:var(--font-body); font-size:.9rem; padding:13px 15px; transition:.15s; }
.da-field::placeholder{ color:var(--text3); }
.da-field:focus{ outline:none; border-color:var(--acc); box-shadow:0 0 0 3px rgba(229,140,56,.18); }
.da-field.is-error{ border-color:var(--error); box-shadow:0 0 0 3px rgba(226,75,74,.16); }
.da-label{ display:block; font-size:.73rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text2); margin-bottom:.35rem; }

/* ── Chips / monogramme dégradé ───────────────────────────────────────── */
.da-chip{ display:inline-flex; align-items:center; gap:7px; padding:4px 11px 4px 5px; border-radius:var(--radius-pill);
  background:var(--surface2); border:1px solid var(--border); font-size:13px; color:var(--text); text-decoration:none; }
.da-emb{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  background:var(--grad); color:var(--acc-ink); font-family:var(--font-display); }

/* ── Badges sémantiques ───────────────────────────────────────────────── */
.da-badge{ font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:.22rem .6rem;
  border-radius:var(--radius-pill); background:var(--surface2); color:var(--text2); border:1px solid var(--border); }
.da-badge--acc{ background:rgba(229,140,56,.14); color:var(--acc); border-color:rgba(229,140,56,.3); }
.da-live{ display:inline-flex; align-items:center; gap:6px; background:var(--live); color:#fff; font-size:.66rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.05em; padding:.22rem .6rem .22rem .5rem; border-radius:var(--radius-pill); }
.da-live::before{ content:''; width:7px; height:7px; border-radius:50%; background:#fff; animation:da-pulse 1.6s infinite; }
@keyframes da-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

/* ── Navigation ───────────────────────────────────────────────────────── */
/* Top bar : onglet actif = trait épais arrondi en dégradé. */
.da-tab{ position:relative; color:var(--text2); text-decoration:none; font-weight:600; padding:6px 2px; }
.da-tab.is-active{ color:var(--text); }
.da-tab.is-active::after{ content:''; position:absolute; left:6px; right:6px; bottom:-6px; height:4px; border-radius:4px; background:var(--grad); }
/* Sidebar : item actif = pilule accent-soft. */
.da-side-item{ display:flex; align-items:center; gap:.75rem; padding:.6rem .8rem; border-radius:var(--radius-sm);
  color:var(--text2); text-decoration:none; font-weight:600; font-size:.95rem; transition:.15s; }
.da-side-item:hover{ color:var(--text); background:var(--surface2); }
.da-side-item.is-active{ background:rgba(229,140,56,.14); color:var(--acc); }

/* ── Scrollbar discrète ───────────────────────────────────────────────── */
.da ::-webkit-scrollbar{ width:7px; height:7px; } .da ::-webkit-scrollbar-thumb{ background:var(--surface3); border-radius:4px; }