/* ==========================================================================
   Sablier — design « Organic » d'OnPoint Mac, transposé en web,
   avec un effet de verre liquide (translucide, flouté, liseré lumineux).
   ========================================================================== */

@font-face { font-family: "Caprasimo"; src: url("fonts/Caprasimo-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/Figtree-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/Figtree-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/Figtree-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* ----------------------------------------------------------------- Jetons */
:root {
  color-scheme: light;
  --bg: #f5ead8;
  --surface: #fbf5ea;
  --raised: #fffaf2;
  --track: #eee7db;
  --ink: 32 30 29;
  --text: rgb(var(--ink));
  --muted: rgb(var(--ink) / .55);
  --faint: rgb(var(--ink) / .32);
  --divider: rgb(var(--ink) / .10);

  --g100: #f0fae1; --g200: #e1eecc; --g300: #ccdbb2; --g400: #aebf92;
  --g500: #8fa073; --g600: #728157; --g700: #56633f; --g800: #3d472b;
  --acc: #c67139; --acc100: #fff2eb; --acc200: #ffe1d0; --acc600: #b2622d; --acc700: #8c491a;
  --hero-top: #7a8a5d; --hero-bottom: #4f5a3b; --on-hero: #fbf6ec;
  --on-g: #ffffff;

  --red: #dc2626; --green: #0a8f5f; --amber: #c2740a; --teal: #0d9488;

  --r-panel: 30px; --r-card: 24px; --r-tile: 16px; --r-kpi: 20px;
  --shadow: 0 6px 12px rgba(0, 0, 0, .05);
  --shadow-pop: 0 18px 40px rgba(40, 30, 10, .16);

  /* Verre */
  --glass: rgb(251 245 234 / .62);
  --glass-strong: rgb(251 245 234 / .80);
  --glass-edge: rgb(255 255 255 / .70);
  --glass-shine: rgb(255 255 255 / .55);
  --glass-shade: rgb(255 255 255 / .10);
  --blob-1: #ccdbb2; --blob-2: #ffd9c2; --blob-3: #e1eecc; --blob-4: #f3c9a5;

  --font-display: "Caprasimo", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #171511; --surface: #221e18; --raised: #2c2720; --track: #332f28;
    --ink: 237 231 219;
    --muted: rgb(var(--ink) / .58); --faint: rgb(var(--ink) / .34); --divider: rgb(var(--ink) / .12);
    --g100: #242b18; --g200: #2b3320; --g300: #3d472b; --g400: #56633f;
    --g500: #8fa073; --g600: #aebf92; --g700: #ccdbb2; --g800: #e1eecc;
    --acc: #d67f48; --acc100: #33241a; --acc200: #4a3122; --acc600: #e19a67; --acc700: #f0b285;
    --hero-top: #4b5637; --hero-bottom: #2a3120; --on-g: #1b1a15;
    --shadow: 0 6px 12px rgba(0, 0, 0, .22);
    --shadow-pop: 0 18px 40px rgba(0, 0, 0, .45);
    --glass: rgb(34 30 24 / .58); --glass-strong: rgb(34 30 24 / .80);
    --glass-edge: rgb(255 255 255 / .10); --glass-shine: rgb(255 255 255 / .14); --glass-shade: rgb(255 255 255 / .03);
    --blob-1: #3d472b; --blob-2: #4a3122; --blob-3: #2b3320; --blob-4: #5a3a22;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #171511; --surface: #221e18; --raised: #2c2720; --track: #332f28;
  --ink: 237 231 219;
  --muted: rgb(var(--ink) / .58); --faint: rgb(var(--ink) / .34); --divider: rgb(var(--ink) / .12);
  --g100: #242b18; --g200: #2b3320; --g300: #3d472b; --g400: #56633f;
  --g500: #8fa073; --g600: #aebf92; --g700: #ccdbb2; --g800: #e1eecc;
  --acc: #d67f48; --acc100: #33241a; --acc200: #4a3122; --acc600: #e19a67; --acc700: #f0b285;
  --hero-top: #4b5637; --hero-bottom: #2a3120; --on-g: #1b1a15;
  --shadow: 0 6px 12px rgba(0, 0, 0, .22);
  --shadow-pop: 0 18px 40px rgba(0, 0, 0, .45);
  --glass: rgb(34 30 24 / .58); --glass-strong: rgb(34 30 24 / .80);
  --glass-edge: rgb(255 255 255 / .10); --glass-shine: rgb(255 255 255 / .14); --glass-shade: rgb(255 255 255 / .03);
  --blob-1: #3d472b; --blob-2: #4a3122; --blob-3: #2b3320; --blob-4: #5a3a22;
}

/* ----------------------------------------------------------------- Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 400 14px/1.45 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--acc); text-decoration: none; }
a:hover { text-decoration: underline; }
svg { display: block; flex-shrink: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid color-mix(in srgb, var(--acc) 70%, transparent); outline-offset: 2px; }
::selection { background: var(--acc200); }
.display { font-family: var(--font-display); font-weight: 400; letter-spacing: 0; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Fond vivant derrière le verre : quelques taches de couleur floutées. */
.backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.backdrop i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .75; }
.backdrop i:nth-child(1) { width: 46vw; height: 46vw; left: -12vw; top: -14vw; background: var(--blob-1); animation: drift 38s ease-in-out infinite alternate; }
.backdrop i:nth-child(2) { width: 38vw; height: 38vw; right: -10vw; top: 6vh; background: var(--blob-2); animation: drift 46s ease-in-out infinite alternate-reverse; }
.backdrop i:nth-child(3) { width: 40vw; height: 40vw; left: 26vw; bottom: -22vw; background: var(--blob-3); animation: drift 52s ease-in-out infinite alternate; }
.backdrop i:nth-child(4) { width: 24vw; height: 24vw; right: 18vw; bottom: 8vh; background: var(--blob-4); opacity: .45; animation: drift 34s ease-in-out infinite alternate-reverse; }
@keyframes drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(4vw, 3vh) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .backdrop i { animation: none; } * { transition-duration: 0s !important; animation-duration: 0s !important; } }

/* ----------------------------------------------------------------- Verre liquide */
.glass {
  position: relative;
  background: var(--glass);
  -webkit-backdrop-filter: blur(24px) saturate(175%);
  backdrop-filter: blur(24px) saturate(175%);
  border: 1px solid var(--divider);
  box-shadow:
    inset 0 1px 0 0 var(--glass-edge),        /* liseré lumineux en haut */
    inset 0 -1px 0 0 var(--glass-shade),
    var(--shadow);
}
.glass::before {                               /* reflet en diagonale */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(120% 60% at 0% 0%, var(--glass-shine), transparent 55%),
    linear-gradient(160deg, transparent 60%, var(--glass-shade) 100%);
  opacity: .9;
}
.glass > * { position: relative; }
.glass-strong { background: var(--glass-strong); }

/* Sans backdrop-filter : des surfaces pleines, propres. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .glass-strong { background: var(--surface); }
  .glass::before { display: none; }
  .backdrop { display: none; }
}

.panel { border-radius: var(--r-card); padding: 20px; }
.panel.tight { padding: 18px; }

/* ----------------------------------------------------------------- Coque */
.shell {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 18px;
  padding: 18px;
  min-height: 100vh;
  min-height: 100dvh;
}
.rail {
  position: sticky; top: 18px;
  height: calc(100vh - 36px); height: calc(100dvh - 36px);
  width: 76px;
  border-radius: var(--r-panel);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 18px 0;
  z-index: 20;
}
.rail .logo { width: 40px; height: 40px; border-radius: 12px; margin-bottom: 16px; overflow: hidden; display: block; }
.rail .logo img { width: 100%; height: 100%; display: block; }
.rail .spacer { flex: 1; }
.nav-item {
  position: relative;
  width: 46px; height: 46px; border-radius: 15px; border: 0;
  display: grid; place-items: center;
  background: transparent; color: var(--muted);
  transition: background .18s, color .18s, transform .18s;
}
.nav-item svg { width: 20px; height: 20px; }
.nav-item:hover { background: var(--track); color: var(--text); }
.nav-item.active { background: var(--g600); color: var(--on-g); box-shadow: 0 6px 14px color-mix(in srgb, var(--g600) 35%, transparent); }
.nav-item .dot {
  position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--acc); box-shadow: 0 0 0 2px var(--surface);
}
.nav-item .label { display: none; }
.create-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 0; margin-top: 6px;
  display: grid; place-items: center;
  background: var(--acc); color: #fff;
  box-shadow: 0 4px 8px color-mix(in srgb, var(--acc) 35%, transparent), inset 0 1px 0 rgb(255 255 255 / .35);
  transition: transform .18s;
}
.create-btn svg { width: 18px; height: 18px; stroke-width: 2.6; }
.create-btn:hover { transform: scale(1.06); }
.create-btn[aria-expanded="true"] { transform: rotate(45deg); }

.main { min-width: 0; display: flex; flex-direction: column; gap: 18px; }

/* Barre du haut */
.topbar { display: flex; align-items: center; gap: 14px; min-height: 56px; position: relative; z-index: 15; }
.topbar .hello { min-width: 0; }
.topbar .date { font-size: 12px; font-weight: 600; color: var(--muted); }
.topbar h1 { margin: 0; font: 400 26px/1.15 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .grow { flex: 1; min-width: 12px; }
.search { position: relative; flex: 0 1 420px; min-width: 180px; }
.search-box {
  height: 42px; border-radius: 999px; display: flex; align-items: center; gap: 8px; padding: 0 16px;
  transition: box-shadow .2s;
}
.search-box svg { width: 16px; height: 16px; color: var(--muted); }
.search-box input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: 14px; }
.search-box input::placeholder { color: var(--faint); }
.search-box:focus-within { box-shadow: inset 0 1px 0 var(--glass-edge), 0 0 0 1.5px color-mix(in srgb, var(--acc) 55%, transparent), var(--shadow); }
.search-box kbd { font: 600 10px var(--font-body); color: var(--faint); border: 1px solid var(--divider); border-radius: 6px; padding: 1px 6px; }
.search-results {
  position: absolute; left: 0; right: 0; top: 50px; border-radius: 18px; padding: 6px; z-index: 30;
  box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow-pop);
}
.search-results .group { font: 700 10px var(--font-body); letter-spacing: 1.2px; text-transform: uppercase; color: var(--acc); padding: 8px 12px 4px; }
.result { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border: 0; border-radius: 12px; background: transparent; text-align: left; }
.result:hover, .result.sel { background: var(--track); }
.result .t { font-weight: 600; font-size: 13px; }
.result .s { font-size: 11px; color: var(--muted); margin-left: auto; white-space: nowrap; }
.icon-btn {
  position: relative; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--divider);
  display: grid; place-items: center; background: var(--glass); color: var(--text); flex-shrink: 0;
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1px 0 var(--glass-edge);
  transition: transform .15s;
}
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn:hover { transform: translateY(-1px); }
.icon-btn .badge {
  position: absolute; top: -3px; right: -4px; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px;
  background: var(--acc); color: #fff; font: 700 9px/17px var(--font-body); text-align: center;
}
.icon-btn.spin svg { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.avatar {
  width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--surface); flex-shrink: 0;
  display: grid; place-items: center; color: #fff; font: 700 15px var(--font-body);
  background: linear-gradient(135deg, var(--g600), color-mix(in srgb, var(--g600) 70%, transparent));
  box-shadow: var(--shadow); padding: 0;
}
.sync-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 20%, transparent); flex-shrink: 0; }
.sync-dot.off { background: var(--amber); box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 20%, transparent); }

/* ----------------------------------------------------------------- Mise en page des pages */
.page { display: flex; flex-direction: column; gap: 18px; min-width: 0; animation: pagein .28s ease-out; }
@keyframes pagein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.page-head { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.page-head h2 { margin: 0; font: 400 24px/1.2 var(--font-display); }
.page-head .sub { font-size: 12px; color: var(--muted); }
.page-head .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* En-tête de section */
.section-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.section-head .titles { min-width: 0; }
.section-head h3 { margin: 0; font: 700 17px/1.25 var(--font-body); }
.section-head p { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.section-head .trail { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.link-btn { border: 0; background: none; padding: 0; color: var(--acc); font: 700 12px var(--font-body); display: inline-flex; align-items: center; gap: 4px; }
.link-btn svg { width: 13px; height: 13px; }
.link-btn:hover { text-decoration: underline; }
.kicker { font: 700 11px var(--font-body); letter-spacing: 1.4px; text-transform: uppercase; color: var(--acc); }

/* Étiquette */
.tag {
  --c: var(--g600);
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font: 700 11px/1 var(--font-body); padding: 5px 9px; border-radius: 999px;
  color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent);
}
.tag.filled { color: #fff; background: var(--c); }
.tag svg { width: 11px; height: 11px; }

/* Boutons */
.btn {
  --c: var(--acc);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 16px; border-radius: 999px; border: 0;
  font: 700 13px var(--font-body); white-space: nowrap;
  color: #fff; background: var(--c);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), 0 3px 8px color-mix(in srgb, var(--c) 25%, transparent);
  transition: transform .15s, filter .15s;
}
.btn svg { width: 14px; height: 14px; }
.btn:hover { transform: translateY(-1px); filter: brightness(1.04); }
.btn:active { transform: none; }
.btn.soft { color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); box-shadow: none; }
.btn.ghost { color: var(--text); background: var(--glass); border: 1px solid var(--divider); box-shadow: inset 0 1px 0 var(--glass-edge); }
.btn.green { --c: var(--g600); color: var(--on-g); }
.btn.green.soft { color: var(--c); }
.btn.danger { --c: var(--red); }
.btn.small { height: 30px; padding: 0 12px; font-size: 12px; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn.icon { width: 36px; padding: 0; }
.btn.small.icon { width: 30px; }
.round-btn {
  --c: var(--muted);
  width: 30px; height: 30px; border-radius: 50%; border: 0; display: grid; place-items: center;
  color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); transition: transform .15s;
}
.round-btn svg { width: 13px; height: 13px; }
.round-btn:hover { transform: scale(1.08); }
.round-btn.acc { --c: var(--acc); } .round-btn.red { --c: var(--red); } .round-btn.green { --c: var(--g600); }

/* ----------------------------------------------------------------- Carte héros (chrono) */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-panel);
  padding: 30px; min-height: 280px;
  display: flex; align-items: center; gap: 28px;
  color: var(--on-hero);
  background: linear-gradient(135deg, var(--hero-top), var(--hero-bottom));
  box-shadow: 0 10px 22px rgba(0, 0, 0, .12), inset 0 1px 0 rgb(255 255 255 / .22);
}
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; z-index: -1; pointer-events: none; }
.hero::before { width: 420px; height: 420px; right: -120px; top: -230px; background: rgb(251 246 236 / .06); }
.hero::after { width: 260px; height: 260px; left: -150px; bottom: -140px; border: 34px solid rgb(251 246 236 / .08); }
.hero .shine { position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: radial-gradient(70% 55% at 12% 0%, rgb(255 255 255 / .16), transparent 60%), linear-gradient(180deg, rgb(255 255 255 / .06), transparent 40%); }
.hero-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.hero-status {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  padding: 6px 12px; border-radius: 999px; background: rgb(251 246 236 / .14);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .18);
  color: rgb(251 246 236 / .88); font: 700 12px var(--font-body); letter-spacing: 1.2px; text-transform: uppercase;
}
.hero-status .sep { width: 4px; height: 4px; border-radius: 50%; background: rgb(251 246 236 / .6); flex-shrink: 0; }
.hero-status { white-space: nowrap; }
.hero-status .sub { text-transform: none; letter-spacing: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hero-status .live { width: 8px; height: 8px; border-radius: 50%; background: #9ee6b8; box-shadow: 0 0 0 0 rgb(158 230 184 / .7); animation: pulse 1.8s infinite; flex-shrink: 0; }
.hero-status .live.paused { background: var(--acc200); animation: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgb(158 230 184 / .6); } 70% { box-shadow: 0 0 0 9px rgb(158 230 184 / 0); } 100% { box-shadow: 0 0 0 0 rgb(158 230 184 / 0); } }
.chrono { font: 400 76px/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: .5px; white-space: nowrap; }
.chrono.pause { color: var(--acc200); }
:root[data-theme="dark"] .chrono.pause { color: #ffd2b6; }
.chrono-sub { font-size: 13px; color: rgb(251 246 236 / .78); margin-top: -6px; }
.progress-row { display: flex; align-items: center; gap: 12px; }
.bar { position: relative; height: 10px; border-radius: 999px; background: rgb(251 246 236 / .2); flex: 1; max-width: 320px; overflow: hidden; }
.bar > i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--on-hero); min-width: 10px; transition: width .6s ease; }
.progress-row b { font: 700 14px var(--font-body); white-space: nowrap; }
.hero-info { font-size: 13px; color: rgb(251 246 236 / .8); }
.hero-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; flex-shrink: 0; }
.hero-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 210px;
  padding: 12px 20px; border: 0; border-radius: 999px; font: 700 14px var(--font-body);
  color: var(--on-hero); background: rgb(251 246 236 / .16);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .2);
  transition: transform .15s, background .15s;
}
.hero-btn svg { width: 14px; height: 14px; }
.hero-btn:hover { transform: translateY(-1px); background: rgb(251 246 236 / .24); }
.hero-btn.primary { background: var(--on-hero); color: var(--hero-bottom); box-shadow: 0 6px 16px rgba(0, 0, 0, .14), inset 0 1px 0 #fff; }
.hero-btn.primary:hover { background: #fff; }
.hero-btn[disabled] { opacity: .6; pointer-events: none; }
.hero-legend { font-size: 10px; text-align: center; color: rgb(251 246 236 / .6); }

/* ----------------------------------------------------------------- Tuiles de chiffres */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kpi { border-radius: var(--r-kpi); padding: 16px; display: flex; align-items: center; gap: 14px; min-height: 62px; min-width: 0; }
.kpi .ic { --c: var(--g600); width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.kpi .ic svg { width: 19px; height: 19px; }
.kpi .t { font: 600 12px var(--font-body); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .v { font: 400 24px/1.15 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .d { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi > div { min-width: 0; }

/* ----------------------------------------------------------------- Graphique */
.chart { position: relative; height: 220px; }
.chart svg { width: 100%; height: 100%; overflow: visible; }
.chart .axis { font: 500 10.5px var(--font-body); fill: var(--muted); }
.chart .grid { stroke: var(--divider); stroke-width: 1; }
.chart .goal { stroke: rgb(var(--ink) / .35); stroke-width: 1.5; stroke-dasharray: 4 3; }
.chart .hit { fill: transparent; cursor: pointer; }
.chart .bar-r { transition: opacity .15s; }
.chart .dim .bar-r { opacity: .55; }
.chart .dim .on .bar-r { opacity: 1; }
.tooltip {
  position: absolute; z-index: 5; pointer-events: none; transform: translate(-50%, -100%);
  padding: 8px 12px; border-radius: 12px; white-space: nowrap; font-size: 12px;
  box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow-pop);
}
.tooltip b { display: block; font-size: 13px; }

/* ----------------------------------------------------------------- Listes */
.list { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--divider); min-width: 0; }
.row:last-child { border-bottom: 0; }
.row .grow { flex: 1; min-width: 0; }
.row .title { font: 700 13px var(--font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .meta { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .amount { font: 700 13px var(--font-body); white-space: nowrap; text-align: right; }
.row .amount small { display: block; font: 400 11px var(--font-body); color: var(--muted); }
.swatch { width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--g600)); flex-shrink: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--g600)) 18%, transparent); }
.stripe { width: 5px; height: 30px; border-radius: 3px; background: var(--c, var(--g600)); flex-shrink: 0; }
.mono { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; color: #fff; font: 700 13px var(--font-body);
  background: linear-gradient(135deg, var(--c, var(--g600)), color-mix(in srgb, var(--c, var(--g600)) 70%, transparent)); }
.empty { text-align: center; padding: 26px 10px; color: var(--muted); font-size: 13px; }
.empty svg { width: 26px; height: 26px; margin: 0 auto 10px; color: var(--faint); stroke-width: 1.5; }
.gauge { height: 8px; border-radius: 999px; background: var(--track); overflow: hidden; position: relative; }
.gauge > i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--c, var(--g600)); min-width: 8px; }
.gauge.over > i { background: var(--red); }

/* Temps : journées */
.day-card { border-radius: var(--r-card); padding: 6px 20px 8px; }
.day-head { display: flex; align-items: baseline; gap: 10px; padding: 12px 0 6px; }
.day-head h3 { margin: 0; font: 700 15px var(--font-body); }
.day-head .tot { margin-left: auto; font: 400 18px var(--font-display); }
.day-head .amt { font-size: 12px; color: var(--muted); }
.entry .times { font: 600 12px var(--font-body); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.entry .dur { font: 700 13px var(--font-body); width: 56px; text-align: right; font-variant-numeric: tabular-nums; }
.entry .acts { display: flex; gap: 6px; opacity: .55; transition: opacity .15s; }
.entry:hover .acts, .entry:focus-within .acts { opacity: 1; }
.entry.running .dur { color: var(--green); }
.week-nav { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: 999px; }
.week-nav button { border: 0; background: transparent; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--text); }
.week-nav button:hover { background: var(--track); }
.week-nav button svg { width: 15px; height: 15px; }
.week-nav span { font: 700 13px var(--font-body); padding: 0 8px; white-space: nowrap; }

/* Clients */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; align-items: start; }
.client-card { border-radius: var(--r-card); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.client-card.archived { opacity: .65; }
.client-top { display: flex; gap: 12px; align-items: center; }
.client-top h3 { margin: 0; font: 700 16px var(--font-body); }
.client-top .meta { font-size: 12px; color: var(--muted); }
.project { border-radius: var(--r-tile); background: var(--raised); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--divider); }
.project .line1 { display: flex; align-items: center; gap: 10px; }
.project .name { font: 700 13px var(--font-body); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project .rate { font: 600 12px var(--font-body); color: var(--muted); white-space: nowrap; }
.project .budget { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--muted); }
.project .budget .gauge { flex: 1; }
.client-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.client-foot .due { margin-right: auto; }
.client-foot .due b { font: 400 20px var(--font-display); display: block; }
.client-foot .due span { font-size: 11px; color: var(--muted); }

/* Factures */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font: 700 10.5px var(--font-body); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); padding: 0 10px 10px; white-space: nowrap; }
.table td { padding: 12px 10px; border-top: 1px solid var(--divider); font-size: 13px; vertical-align: middle; }
.table tr.click { cursor: pointer; }
.table tr.click:hover td { background: color-mix(in srgb, var(--track) 60%, transparent); }
.table td:first-child, .table th:first-child { padding-left: 4px; }
.table .r { text-align: right; white-space: nowrap; }
.table .num-cell { font: 700 13px var(--font-body); white-space: nowrap; }
.inv-hero { border-radius: var(--r-panel); padding: 26px 30px; display: flex; gap: 24px; align-items: center; flex-wrap: wrap; color: var(--on-hero);
  position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(135deg, var(--hero-top), var(--hero-bottom)); box-shadow: 0 10px 22px rgba(0,0,0,.12); }
.inv-hero::before { content: ""; position: absolute; z-index: -1; width: 320px; height: 320px; right: -80px; top: -180px; border-radius: 50%; background: rgb(251 246 236 / .06); }
.inv-hero .k { font: 700 11px var(--font-body); letter-spacing: 1.4px; text-transform: uppercase; opacity: .85; }
.inv-hero .n { font: 400 34px/1.1 var(--font-display); }
.inv-hero .t { font: 400 30px/1 var(--font-display); margin-left: auto; text-align: right; }
.inv-hero .t small { display: block; font: 600 12px var(--font-body); opacity: .8; margin-top: 6px; }
.lines-editor .line { display: grid; grid-template-columns: minmax(0, 1fr) 90px 110px 100px 34px; gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--divider); }
.lines-editor .line:last-child { border-bottom: 0; }
.lines-editor .tot { text-align: right; font-weight: 700; padding-top: 9px; white-space: nowrap; }
.checks { border-radius: 16px; padding: 14px 16px; font-size: 13px; }
.checks.bad { background: color-mix(in srgb, var(--red) 9%, transparent); }
.checks.warn { background: color-mix(in srgb, var(--amber) 11%, transparent); }
.checks ul { margin: 6px 0 0; padding-left: 18px; }
.urssaf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.urssaf .q { border-radius: var(--r-tile); background: var(--raised); border: 1px solid var(--divider); padding: 12px; }
.urssaf .q b { display: block; font: 400 18px var(--font-display); }
.urssaf .q span { font-size: 11px; color: var(--muted); }
.urssaf .q.now { border-color: color-mix(in srgb, var(--acc) 50%, transparent); }

/* Messages */
.msg-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 18px; align-items: start; }
.convs { border-radius: var(--r-card); padding: 10px; display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 160px); overflow: auto; }
.conv { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 16px; border: 0; background: transparent; text-align: left; width: 100%; }
.conv:hover { background: var(--track); }
.conv.active { background: color-mix(in srgb, var(--g600) 14%, transparent); }
.conv .grow { min-width: 0; flex: 1; }
.conv .unread { min-width: 18px; height: 18px; padding: 0 6px; border-radius: 999px; background: var(--acc); color: #fff; font: 700 10px/18px var(--font-body); text-align: center; }
.thread { border-radius: var(--r-card); display: flex; flex-direction: column; min-height: 520px; max-height: calc(100vh - 160px); }
.thread-head { padding: 16px 20px; border-bottom: 1px solid var(--divider); display: flex; align-items: center; gap: 12px; }
.bubbles { flex: 1; overflow: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.bubble { max-width: 74%; padding: 10px 14px; border-radius: 20px; font-size: 14px; white-space: pre-wrap; word-wrap: break-word; }
.bubble.in { align-self: flex-start; background: var(--raised); border: 1px solid var(--divider); border-bottom-left-radius: 6px; }
.bubble.out { align-self: flex-end; background: var(--g600); color: var(--on-g); border-bottom-right-radius: 6px; box-shadow: inset 0 1px 0 rgb(255 255 255 / .2); }
.bubble-meta { font-size: 10.5px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.bubble-meta.out { align-self: flex-end; }
.bubble-meta .failed { color: var(--red); font-weight: 700; }
.day-sep { align-self: center; font: 700 10.5px var(--font-body); letter-spacing: 1px; text-transform: uppercase; color: var(--faint); padding: 8px 0 2px; }
.composer { display: flex; gap: 10px; padding: 14px; border-top: 1px solid var(--divider); align-items: flex-end; }
.composer textarea { flex: 1; resize: none; min-height: 42px; max-height: 140px; }
.banner { border-radius: 16px; padding: 12px 16px; font-size: 12.5px; display: flex; gap: 10px; align-items: flex-start; background: color-mix(in srgb, var(--teal) 10%, transparent); }
.banner svg { width: 16px; height: 16px; color: var(--teal); margin-top: 1px; }
.banner.warn { background: color-mix(in srgb, var(--amber) 12%, transparent); }
.banner.warn svg { color: var(--amber); }

/* ----------------------------------------------------------------- Formulaires */
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field > span { font: 600 12px var(--font-body); color: var(--muted); }
.field small { font-size: 11px; color: var(--faint); }
.input, .field input:not([type=checkbox]):not([type=radio]):not([type=color]), .field select, .field textarea, .composer textarea {
  width: 100%; min-height: 40px; padding: 9px 13px; border-radius: 13px;
  border: 1px solid var(--divider); background: var(--raised); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.field textarea { min-height: 76px; resize: vertical; }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus, .composer textarea:focus {
  border-color: color-mix(in srgb, var(--acc) 60%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 15%, transparent);
}
.field input[type=color] { width: 100%; height: 40px; padding: 4px; border-radius: 13px; border: 1px solid var(--divider); background: var(--raised); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.span2 { grid-column: span 2; }
.check { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; cursor: pointer; }
.switch { position: relative; width: 40px; height: 24px; flex-shrink: 0; }
.switch input { opacity: 0; position: absolute; inset: 0; margin: 0; cursor: pointer; }
.switch i { position: absolute; inset: 0; border-radius: 999px; background: var(--track); transition: background .18s; pointer-events: none; border: 1px solid var(--divider); }
.switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .18s; }
.switch input:checked + i { background: var(--g600); }
.switch input:checked + i::after { transform: translateX(16px); }
.seg { display: inline-flex; gap: 3px; padding: 3px; border-radius: 999px; background: var(--track); }
.seg button { border: 0; background: transparent; padding: 6px 14px; border-radius: 999px; font: 600 12px var(--font-body); color: var(--muted); white-space: nowrap; }
.seg button.on { background: var(--acc); color: #fff; font-weight: 700; }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.form-actions .left { margin-right: auto; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.token-box { font: 600 13px ui-monospace, SFMono-Regular, Menlo, monospace; padding: 12px; border-radius: 12px; background: var(--raised); border: 1px dashed color-mix(in srgb, var(--acc) 60%, transparent); word-break: break-all; user-select: all; }

/* ----------------------------------------------------------------- Fenêtres, menus, toasts */
.overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 18px; background: rgb(23 21 17 / .28); animation: fade .18s ease-out; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal { width: min(560px, 100%); max-height: calc(100dvh - 36px); overflow: auto; border-radius: var(--r-panel); padding: 26px; display: flex; flex-direction: column; gap: 16px;
  box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow-pop); animation: pop .22s cubic-bezier(.2, .9, .3, 1.2); }
.modal.wide { width: min(760px, 100%); }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.modal h2 { margin: 0; font: 400 22px/1.2 var(--font-display); }
.modal .sub { margin: -10px 0 0; font-size: 13px; color: var(--muted); }
.popover { position: fixed; z-index: 90; border-radius: 20px; padding: 8px; min-width: 240px; box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow-pop); animation: pop .16s ease-out; }
.menu-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 12px; background: transparent; text-align: left; font: 600 13px var(--font-body); }
.menu-row:hover { background: var(--track); }
.menu-row svg { width: 16px; height: 16px; color: var(--acc); }
.menu-row.red, .menu-row.red svg { color: var(--red); }
.menu-sep { height: 1px; background: var(--divider); margin: 6px 4px; }
.notif { display: flex; gap: 10px; padding: 10px; border-radius: 12px; }
.notif:hover { background: var(--track); cursor: pointer; }
.notif .ic { --c: var(--acc); width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.notif .ic svg { width: 15px; height: 15px; }
.notif b { font-size: 13px; display: block; }
.notif span { font-size: 12px; color: var(--muted); }
.picker-list { display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow: auto; margin: 0 -8px; }
.picker-list .group { font: 700 10.5px var(--font-body); letter-spacing: 1.2px; text-transform: uppercase; color: var(--acc); padding: 10px 12px 4px; }
.pick { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 0; background: transparent; width: 100%; text-align: left; }
.pick:hover, .pick.sel { background: var(--track); }
.pick.current { background: color-mix(in srgb, var(--g600) 14%, transparent); }
.pick .name { font: 700 14px var(--font-body); flex: 1; min-width: 0; }
.pick .rate { font-size: 12px; color: var(--muted); }
.toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { pointer-events: auto; padding: 11px 18px; border-radius: 999px; font: 600 13px var(--font-body); display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px);
  box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow-pop); animation: pop .2s ease-out; }
.toast svg { width: 15px; height: 15px; color: var(--green); flex-shrink: 0; }
.toast.err svg { color: var(--red); }

/* ----------------------------------------------------------------- Connexion */
.login { min-height: 100dvh; display: grid; place-items: center; padding: 18px; }
.login-card { width: min(400px, 100%); border-radius: var(--r-panel); padding: 34px 30px; display: flex; flex-direction: column; gap: 16px; text-align: center; }
.login-card .logo { width: 64px; height: 64px; border-radius: 18px; margin: 0 auto; overflow: hidden; box-shadow: 0 10px 22px rgba(0,0,0,.14); }
.login-card .logo img { width: 100%; height: 100%; display: block; }
.login-card h1 { margin: 0; font: 400 30px var(--font-display); }
.login-card p { margin: -8px 0 4px; color: var(--muted); font-size: 13px; }
.login-card .field { text-align: left; }
.login-card .btn { height: 44px; font-size: 14px; }
.login-card .err { color: var(--red); font-size: 13px; font-weight: 600; min-height: 18px; }

/* ----------------------------------------------------------------- Adaptatif */
@media (max-width: 1340px) {
  .home-grid { grid-template-columns: minmax(0, 1fr); }
  .home-grid > .col.side { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
}
@media (max-width: 1180px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 980px) {
  .hero { flex-direction: column; align-items: stretch; }
  .hero-actions { flex-direction: row; flex-wrap: wrap; }
  .hero-actions .hero-btn { flex: 1 1 180px; min-width: 0; }
  .hero-legend { width: 100%; }
  .msg-grid { grid-template-columns: minmax(0, 1fr); }
  .msg-grid.has-thread .convs { display: none; }
  .msg-grid:not(.has-thread) .thread { display: none; }
  .urssaf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .shell { grid-template-columns: minmax(0, 1fr); padding: 14px 14px calc(96px + env(safe-area-inset-bottom)); gap: 14px; }
  .rail {
    position: fixed; top: auto; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom));
    width: auto; height: 68px; flex-direction: row; justify-content: space-around; padding: 0 8px; gap: 2px; border-radius: 26px;
  }
  .rail .logo, .rail .spacer { display: none; }
  .rail .nav-item { width: 48px; height: 48px; }
  .rail .create-btn { margin: 0; }
  .topbar { flex-wrap: wrap; gap: 10px; }
  .topbar h1 { font-size: 22px; }
  .search { order: 5; flex: 1 1 100%; }
  .topbar .grow { display: none; }
  .topbar .hello { flex: 1; }
  .main { gap: 14px; }
  .page, .col { gap: 14px; }
  .hero { padding: 22px; min-height: 0; gap: 18px; }
  .chrono { font-size: 56px; }
  .kpis { gap: 10px; }
  .kpi { padding: 12px; gap: 10px; }
  .kpi .ic { width: 36px; height: 36px; border-radius: 12px; }
  .kpi .v { font-size: 20px; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .grid2, .grid3 { grid-template-columns: minmax(0, 1fr); }
  .span2 { grid-column: auto; }
  .lines-editor .line { grid-template-columns: minmax(0, 1fr) 80px 90px; }
  .lines-editor .line .tot { grid-column: 2 / 4; }
  .table .hide-sm { display: none; }
  .modal { padding: 20px; border-radius: 24px; }
  .entry .times { display: none; }
  .entry .acts { opacity: 1; }
  .toasts { bottom: calc(92px + env(safe-area-inset-bottom)); }
}
@media (max-width: 480px) {
  .chrono { font-size: 46px; }
  .hero-status { font-size: 11px; }
  .kpi .ic { display: none; }
  .day-card { padding: 4px 14px 6px; }
  .panel { padding: 16px; }
  .entry .acts .round-btn:not(.keep) { display: none; }
  .inv-hero { padding: 22px; }
  .inv-hero .t { margin-left: 0; text-align: left; }
}
@media print {
  .rail, .topbar, .backdrop { display: none !important; }
  .shell { display: block; }
}