/* ===== TOKENS ===== */
:root{
  --radius-s: 10px;
  --radius: 14px;
  --radius-xl: 18px;

  /* LIGHT – propre, lumineux */
  --bg: #f7f9fc;
  --panel: #ffffff;
  --panel-2: #f3f6fb;
  --text: #0c1220;
  --muted: #5d6e86; /* contraste un peu renforcé */
  --border: #e4eaf3;
  --shadow: 0 10px 30px rgba(16,24,40,.08);

  /* Accent (flashy maîtrisé) */
  --accent: #ff6a00;
  --accent-2: #ffae00;
  --accent-3: #ffe1b0;

  /* Chips */
  --c-core: var(--accent);
  --c-tie: #7b5cff;
  --c-prelude: #00d1a0;
  --c-after: #ff9f1c;
  --c-optional: #ff3db1;
}

/* DARK – obsidienne propre */
html[data-theme="dark"]{
  --bg: #0a0f16;
  --panel: #0f1621;
  --panel-2: #0c121b;
  --text: #f4f7fb;
  --muted: #9fb0c2;
  --border: #182334;
  --shadow: 0 10px 26px rgba(0,0,0,.35);
  --accent: #ff7a18;
  --accent-2: #ffb703;
  --accent-3: #ffd166;
}

/* Accent switch (option) */
html[data-accent="emerald"]{ --accent:#19c37d; --accent-2:#38e2a0; --accent-3:#baf3df }
html[data-accent="violet"]{ --accent:#7c5cff; --accent-2:#aa8fff; --accent-3:#dcd4ff }
html[data-accent="ice"]{ --accent:#57b3ff; --accent-2:#88ceff; --accent-3:#d7ecff }

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family: Inter, ui-sans-serif, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  color: var(--text);
  background-color: var(--bg); /* solide pour éviter tout banding */
}

/* ===== APPBAR ===== */
.appbar{
  position: sticky; top:0; z-index:30;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 0 rgba(2,8,23,.02);
}
.wrap{ max-width: 1200px; margin:0 auto; padding:16px 20px }
.brand{ margin:0; font-size: clamp(22px, 3vw, 28px); font-weight: 800;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brandline{ display:flex; align-items:center; gap:12px }
.hubbar{ display:flex; align-items:center; justify-content:space-between }
.flex-1{ flex:1 }
.r-actions{ display:flex; gap:8px; align-items:center }

/* ===== CONTROLS & BUTTONS ===== */
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 12px;
  border-radius:12px; border:1px solid var(--border);
  background: var(--panel);
  color:var(--text); cursor:pointer; text-decoration:none;
  transition: transform .06s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{ border-color: rgba(0,0,0,.12); box-shadow: var(--shadow) }
.btn:active{ transform: translateY(1px) }
.btn.secondary{ background: var(--panel-2) }
.btn.danger{ border-color: #ffd5d7; color:#b42318; background:#fff7f7 }
.btn.icon.only{ width:40px; height:40px; padding:8px; display:grid; place-items:center }
.ic{ width:20px; height:20px; fill: currentColor }
.btn:focus-visible, .search input:focus-visible, select:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

/* ===== HUB ===== */
.meta{
  display:grid; grid-template-columns: 300px 1fr; gap:18px; align-items:stretch;
  margin-top: 8px;
}
.total{
  display:flex; align-items:center; gap:14px;
  padding:14px; background: var(--panel); border:1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow)
}
.kpis{ display:grid; gap:6px }
.kpis strong{ font-size:18px }
.muted{ color: var(--muted); font-size: 12px }

.ring, .ring-lg{ width:64px; height:64px }
.ring-lg{ width:96px; height:96px }
.ring, .ring-lg{ display:grid; place-items:center }
.ring svg, .ring-lg svg{ width:100%; height:100% }

.chartbox{
  padding:14px; background: var(--panel); border:1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow)
}
.chart-title{ display:flex; align-items:baseline; gap:10px }
.chart-title h2{ margin:0; font-size:16px }
.chartbox canvas{ width:100%; height:200px; display:block }

.hub-head{ display:flex; justify-content:space-between; align-items:center; margin-top:16px }
.hub-tools{ display:flex; gap:8px; flex-wrap:wrap }
.hub-tools-adv{ display:grid; grid-template-columns: 1fr auto auto; gap:10px; align-items:center; margin-top:10px }

/* Cards grid */
.cards{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap:14px; margin-top:12px
}
.card{
  background: var(--panel); border:1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow);
  padding:14px; display:grid; gap:10px; position:relative;
  transition: transform .1s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{ transform: translateY(-2px); border-color: rgba(0,0,0,.12) }
.card h3{ margin:0; font-size:16px }
.card .row{ display:flex; align-items:center; justify-content:space-between }
.badge{ font-size:12px; color: var(--muted) }
.card .open{ justify-self:end }
.card .status{
  position:absolute; top:12px; right:12px; font-size:11px; padding:4px 8px; border-radius:999px; border:1px solid transparent;
  background:#e8fff1; color:#0f6; display:none;
}
.card.done .status{ display:inline-block } /* visible si 100% */

/* ===== SAGA PAGE ===== */
.tools-row{
  display:flex; gap:10px; align-items:center; flex-wrap: wrap;
  background: var(--panel); padding: 10px; border:1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow)
}
.saga-head{ display:grid; gap:12px; margin-top: 8px }
.saga-meta{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  background: var(--panel); border:1px solid var(--border); border-radius: var(--radius-xl); padding: 14px; box-shadow: var(--shadow)
}
.saga-stats{ display:flex; align-items:center; gap:10px }
#blocks{ margin-top: 14px }

/* Search & chips */
.search{
  display:flex; align-items:center; gap:8px;
  border-radius: var(--radius);
  background: var(--panel-2);
  border:1px solid var(--border);
  padding:10px 12px;
}
.search input{ flex:1; background:transparent; border:0; color:var(--text); font-size:14px }
.search .clear{ background:none; border:0; color:var(--muted); cursor:pointer; font-size:18px; line-height:1; visibility:hidden }
.filters{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.pill{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid var(--border); border-radius:999px; background: var(--panel-2); font-size:12px; color:var(--muted) }
.chips{ display:flex; gap:8px; flex-wrap:wrap }
.chip{ font-size:11px; padding:6px 10px; border-radius:999px; border:1px solid transparent; background: var(--panel-2); color:#344054; cursor:pointer }
.chip[aria-pressed="false"]{ opacity:.45 }

.chip.core{ background: #fff4e6; color:#8b3d00; border-color:#ffd29b }
.chip.tie{ background: #f0ecff; color:#3a2aa1; border-color:#cfc6ff }
.chip.prelude{ background: #e9fff7; color:#066a54; border-color:#b9f4e3 }
.chip.after{ background: #fff5e6; color:#7a4a00; border-color:#ffdfb0 }
.chip.optional{ background: #ffe8f6; color:#7a1456; border-color:#ffc6e9 }

/* Blocks & items */
.block{
  background: var(--panel); border:1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow);
  margin-bottom: 12px; overflow: clip;
  opacity:0; transform: translateY(6px);
  animation: rise .25s ease forwards;
}
@media (prefers-reduced-motion: reduce){ .block{ animation:none; opacity:1; transform:none } }
@keyframes rise{ to{ opacity:1; transform: none } }

.block h4{ margin:0; padding:12px 14px; border-bottom:1px solid var(--border); font-size: 14px; color: var(--muted) }

.items{ padding: 10px 12px 14px; display:grid; gap:8px }
.issue{
  display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px;
  background: var(--panel-2);
  border:1px solid var(--border);
  transition: transform .08s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
  position: relative;
}
.issue:hover{ transform: translateY(-1px); border-color: rgba(0,0,0,.12) }
.issue input[type="checkbox"]{ width:18px; height:18px }
.issue .title{ flex:1; display:flex; gap:8px; flex-wrap:wrap; align-items:center }
.issue .title .main{ font-weight:600 }
.issue .tags{ display:flex; gap:6px; flex-wrap:wrap }
.issue.checked::after{ content:""; position:absolute; right:0; top:0; bottom:0; width:6px; border-radius:0 14px 14px 0; background: linear-gradient(180deg, var(--accent), var(--accent-2)); box-shadow: 0 0 18px rgba(255,106,0,.35) }
.marked mark{ background: rgba(255, 174, 0, .25); color: inherit; padding:0 2px; border-radius:4px }

/* Tags inside items (lite) */
.issue .chip.core{ background:#fff0e0; color:#7a3b00; border-color:#ffd6a3 }
.issue .chip.tie{ background:#efeaff; color:#3a2aa1; border-color:#d5ccff }
.issue .chip.prelude{ background:#e9fff7; color:#066a54; border-color:#c8faea }
.issue .chip.after{ background:#fff5e6; color:#7a4a00; border-color:#ffe0b3 }
.issue .chip.optional{ background:#ffe8f6; color:#7a1456; border-color:#ffd0ef }

/* Progress bar (saga) */
.bar{ width:100%; height:10px; border-radius:999px; background: var(--panel-2); border:1px solid var(--border); overflow:hidden; margin-top:6px }
.bar > div{ height:100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); width:0%; transition: width .2s ease }

/* Misc */
.footer-msg{ color: var(--muted); font-size:12px; margin-top:12px }
.hidden{ display:none }
.visually-hidden{ position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }
.toast{ position:fixed; bottom:18px; left:50%; transform:translateX(-50%); background: var(--panel); color:var(--text); border:1px solid var(--border); padding:10px 14px; border-radius:12px; box-shadow: var(--shadow); display:none }

/* Scrollbars */
*{ scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.2) transparent }
::-webkit-scrollbar{ height:10px; width:10px }
::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.2); border-radius: 999px }
::-webkit-scrollbar-track{ background: transparent }

/* ===== Responsive ===== */
@media (max-width: 960px){
  .meta{ grid-template-columns: 1fr; }
  .hub-tools-adv{ grid-template-columns: 1fr; }
}
.hub-tools-adv{ display:grid; grid-template-columns: 1fr auto auto; gap:10px; align-items:center; margin-top:10px }

/* Segmented control (tri) */
.seg{
  display:inline-flex; background: var(--panel-2); border:1px solid var(--border);
  border-radius: 999px; overflow:hidden;
}
.seg-btn{
  padding:8px 12px; border:0; background:transparent; cursor:pointer; font:inherit; color:var(--text);
}
.seg-btn + .seg-btn{ border-left:1px solid var(--border) }
.seg-btn.is-active{ background: var(--panel); }