[hidden] { display: none !important; }
:root {
  color-scheme: light;
  --bg: #f4f3ef;
  --surface: #fcfcfb;
  --surface-2: #f0efea;
  --line: #e2e0d9;
  --text: #0b0b0b;
  --text-2: #52514e;
  --muted: #7a7974;
  --accent: #1c5cab;
  --accent-soft: #cde2fb;
  --danger: #c23b3a;
  --good: #1a7f4b;
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100;
  --s5: #e87ba4; --s6: #008300; --s7: #6250d6; --s8: #e34948;
  --grid: #e8e6e0;
  --radius: 10px;
  --m1: #1a9850; --m2: #79c36a; --m3: #e3cf5a; --m4: #f0884a; --m5: #d73a3a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #121211; --surface: #1a1a19; --surface-2: #232321; --line: #2f2f2c;
    --text: #f0efec; --text-2: #c3c2b7; --muted: #8f8e86; --accent: #6da7ec; --accent-soft: #184f95;
    --danger: #e66767; --good: #3fbf7f;
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
    --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
    --grid: #2a2a27;
  }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #121211; --surface: #1a1a19; --surface-2: #232321; --line: #2f2f2c;
    --text: #f0efec; --text-2: #c3c2b7; --muted: #8f8e86; --accent: #6da7ec; --accent-soft: #184f95;
    --danger: #e66767; --good: #3fbf7f;
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
    --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
    --grid: #2a2a27;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.45 "Segoe UI", system-ui, -apple-system, sans-serif; }
code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
.layout { display: grid; grid-template-columns: 210px 1fr; min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; padding: 20px 12px; border-right: 1px solid var(--line);
  background: var(--surface); display: flex; flex-direction: column; gap: 2px; }
.brand { font-weight: 700; font-size: 18px; padding: 4px 10px 18px; letter-spacing: -.3px; }
.brand span { color: var(--s2); margin: 0 2px; }
.brand { display: flex; align-items: center; }
.side-toggle { margin-left: auto; border: 1px solid transparent; background: none; color: var(--muted); font-size: 16px; line-height: 1; padding: 4px 7px; border-radius: 6px; cursor: pointer; }
.side-toggle:hover { border-color: var(--line); color: var(--text); background: var(--surface-2); }
.side-show { display: none; position: fixed; top: 12px; left: 12px; z-index: 50; border: 1px solid var(--line); background: var(--surface); color: var(--text);
  border-radius: 8px; padding: 5px 10px; font-size: 16px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.side-hidden .layout { grid-template-columns: minmax(0, 1fr); }
.side-hidden .side { display: none; }
.side-hidden .side-show { display: block; }
.side-hidden main { padding-left: 64px; }
.side a { color: var(--text-2); text-decoration: none; padding: 8px 10px; border-radius: 8px; }
.side a:hover { background: var(--surface-2); color: var(--text); }
.side a.active { background: var(--accent-soft); color: var(--text); font-weight: 600; }
.side a { display: flex; align-items: center; gap: 9px; }
.side a > i { font-style: normal; width: 18px; text-align: center; font-size: 14px; }
.side { overflow-y: auto; }
.nav-grp { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.nav-h { border: 0; background: none; text-align: left; font: inherit; font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); padding: 6px 10px 4px; cursor: pointer; display: flex; align-items: center; }
.nav-h::after { content: "▾"; margin-left: auto; font-size: 11px; transition: transform .15s; }
.nav-h:hover { color: var(--text); }
.nav-grp.closed .nav-h::after { transform: rotate(-90deg); }
.nav-grp.closed > a:not(.active), .nav-grp.closed > .nav-sub { display: none; }
.nav-sub { display: flex; flex-direction: column; margin: 0 0 4px 27px; border-left: 1px solid var(--line); }
.nav-sub:empty { display: none; }
.side .nav-sub a { padding: 4px 10px; font-size: 13px; border-radius: 0 6px 6px 0; }
.side .nav-sub a.active { background: none; color: var(--accent); font-weight: 600; box-shadow: inset 2px 0 0 var(--accent); }
#page-donnees .card[data-dtab] { display: none; }
#page-donnees[data-tab="sources"] .card[data-dtab="sources"], #page-donnees[data-tab="perso"] .card[data-dtab="perso"],
#page-donnees[data-tab="exports"] .card[data-dtab="exports"] { display: block; }
.side-foot { margin-top: auto; font-size: 12px; color: var(--muted); padding: 0 10px; }
.theme-btn { margin: 8px 10px 0; align-self: flex-start; font-size: 12.5px; padding: 5px 10px; }
.theme-btn + .side-foot { margin-top: 10px; }
.theme-wrap { margin-top: auto; display: flex; flex-direction: column; }
main { padding: 24px 28px 80px; min-width: 0; }
.page { display: none; max-width: 1400px; }
.page.active { display: block; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
h1 { margin: 0; font-size: 24px; letter-spacing: -.4px; }
h2.section { font-size: 17px; margin: 28px 0 12px; }
h3 { margin: 0 0 10px; font-size: 14px; font-weight: 600; }
h3 small { font-weight: 400; color: var(--muted); margin-left: 6px; }
h3.pad { padding: 14px 16px 0; }
h3.mt { margin-top: 22px; }
.sub { margin: 4px 0 0; color: var(--text-2); }
.muted { color: var(--muted); }
.filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn { appearance: none; border: 1px solid var(--line); background: var(--surface); color: var(--text);
  padding: 7px 13px; border-radius: 8px; cursor: pointer; font: inherit; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.primary { color: #0b0b0b; } }
:root[data-theme="dark"] .btn.primary { color: #0b0b0b; }
.btn.danger { color: var(--danger); }
kbd { font-size: 11px; opacity: .7; }
.btnrow { display: flex; gap: 8px; flex-wrap: wrap; }
input, select, textarea { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line);
  border-radius: 7px; padding: 6px 9px; max-width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
textarea { width: 100%; resize: vertical; }
label.blk { display: block; margin: 10px 0; color: var(--text-2); }
label.blk input, label.blk select, label.blk textarea { display: block; width: 100%; margin-top: 4px; }
.form-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); }
.seg button { border: 0; background: none; padding: 7px 12px; cursor: pointer; color: var(--text-2); font: inherit; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--accent-soft); color: var(--text); font-weight: 600; }
.seg.small button { padding: 4px 10px; font-size: 13px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; min-width: 0; }
.card.flush { padding: 0; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; }
.grid2 .card { margin-bottom: 0; }
.grid2 + .card, .grid2 + h2 { margin-top: 16px; }
.chart { position: relative; height: 230px; }
.chart.tall { height: 300px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.kpi .lab { color: var(--text-2); font-size: 12.5px; }
.kpi .val { font-size: 24px; font-weight: 650; letter-spacing: -.5px; margin-top: 2px; }
.kpi .val small { font-size: 13px; font-weight: 400; color: var(--muted); }
.kpi .delta { font-size: 12px; color: var(--muted); }
.kpi .delta.up { color: var(--good); }
.kpi .delta.down { color: var(--danger); }
.corr { display: flex; flex-direction: column; gap: 6px; }
.corr .row { display: grid; grid-template-columns: 1fr 120px 52px; gap: 10px; align-items: center; font-size: 13px; }
.corr .bar { height: 8px; background: var(--surface-2); border-radius: 4px; position: relative; }
.corr .bar i { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.corr .r { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); }

/* Tables */
.tablewrap { overflow: auto; max-height: 70vh; }
.tbl { border-collapse: collapse; width: 100%; font-size: 13px; }
.tbl th { position: sticky; top: 0; background: var(--surface-2); text-align: left; font-weight: 600; padding: 8px 10px; white-space: nowrap; z-index: 1; }
.tbl td { padding: 7px 10px; border-top: 1px solid var(--line); vertical-align: top; }
.tbl tbody tr { cursor: pointer; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl td.wrap { max-width: 380px; }
.pill { display: inline-block; padding: 1px 8px; border-radius: 10px; background: var(--surface-2); font-size: 12px; white-space: nowrap; }
.fill { display: inline-block; width: 46px; height: 6px; background: var(--surface-2); border-radius: 3px; vertical-align: middle; position: relative; overflow: hidden; }
.fill i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--s1); }

/* Formulaire du jour */
#dayForm { display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); gap: 16px; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); margin: 0; padding: 12px 16px 14px; min-width: 0; }
legend { font-weight: 650; padding: 0 6px; }
.fld { display: grid; grid-template-columns: 170px 1fr; gap: 10px; align-items: center; padding: 5px 0; }
.fld > span { color: var(--text-2); }
.fld.wide { grid-template-columns: 1fr; }
.fld.wide > span { margin-bottom: -4px; }
.fld .hint { font-size: 11px; color: var(--muted); display: block; }
.fld.garminfill > span::after { content: " ⌚"; font-size: 11px; }
.dots { display: flex; gap: 4px; flex-wrap: wrap; }
.dots button { border: 1px solid var(--line); background: var(--surface); border-radius: 6px; min-width: 30px; height: 28px; cursor: pointer; color: var(--text-2); font: inherit; font-size: 13px; padding: 0 6px; }
.dots button.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.dots button.on.l1 { background: var(--s3); border-color: var(--s3); }
.dots button.on.l4, .dots button.on.l5 { background: var(--s8); border-color: var(--s8); }
.dots .clear { border-style: dashed; color: var(--muted); }
.yn { display: flex; gap: 4px; }
.pain-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); column-gap: 28px; }
.pain-grid .dots { flex-wrap: nowrap; }
.pain-grid .fld > span { white-space: nowrap; }
.pain-grid .fld { grid-template-columns: 1fr auto; padding: 3px 0; }
.pain-grid .dots button { min-width: 24px; height: 24px; font-size: 12px; }
.garmin-panel { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.garmin-panel .gi { display: flex; flex-direction: column; }
.garmin-panel .gi b { font-size: 17px; }
.garmin-panel .gi span { font-size: 12px; color: var(--muted); }
.savebar { position: sticky; bottom: 0; display: flex; justify-content: flex-end; align-items: center; gap: 14px;
  padding: 12px 0; background: linear-gradient(transparent, var(--bg) 35%); margin-top: 8px; }
.dirty { color: var(--s2) !important; }

/* Analyse */
.prompt-actions { display: flex; gap: 8px; align-items: center; margin: 14px 0 8px; }
.prompt-actions .muted { margin-right: auto; }
#promptText { font: 12px/1.4 Consolas, monospace; }
.analyse-grid .btn { margin-top: 8px; }
.an { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; }
.an summary { padding: 12px 16px; cursor: pointer; display: flex; gap: 12px; align-items: baseline; }
.an summary b { font-weight: 600; }
.an .md { padding: 0 20px 16px; max-width: 900px; }
.an .md h1, .an .md h2, .an .md h3 { font-size: 15px; margin: 16px 0 6px; }
.an .md table { border-collapse: collapse; } .an .md td, .an .md th { border: 1px solid var(--line); padding: 4px 8px; }
.progress { height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; margin-top: 12px; }
.progress div { height: 100%; background: var(--accent); width: 0; transition: width .3s; }

dialog { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); padding: 20px; width: min(760px, 94vw); }
dialog::backdrop { background: rgba(0,0,0,.35); }
.modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.modal-grid label { display: block; color: var(--text-2); font-size: 13px; margin: 6px 0; }
.modal-grid label.full { grid-column: 1 / -1; }
.modal-grid input, .modal-grid select, .modal-grid textarea { width: 100%; display: block; margin-top: 3px; }
.modal-actions { display: flex; gap: 8px; margin-top: 16px; }
.grow { flex: 1; }
#toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg);
  padding: 10px 16px; border-radius: 8px; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 10; }
#toast.show { opacity: 1; }
.empty { padding: 30px; text-align: center; color: var(--muted); }

@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; padding: 10px; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand { padding: 6px 10px; } .side-foot { display: none; }
  .nav-grp { flex-direction: row; flex-wrap: wrap; margin: 0; } .nav-h, .nav-sub { display: none !important; } .nav-grp.closed > a { display: flex !important; }
  main { padding: 16px; }
  .grid2, #dayForm { grid-template-columns: 1fr; }
  .fld { grid-template-columns: 1fr; gap: 4px; }
  .modal-grid { grid-template-columns: 1fr; }
}

/* Sous-onglets */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; }
.tabs button { border: 0; background: none; padding: 9px 14px; cursor: pointer; color: var(--text-2); font: inherit; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs button:hover { color: var(--text); }
.tabs button.on { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
.int { letter-spacing: 1px; color: var(--s2); font-size: 11px; white-space: nowrap; }
.gbadge { font-size: 13px; }
.day-seances { display: flex; flex-direction: column; gap: 6px; padding: 4px 0 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.day-seances .btn { align-self: flex-start; }
.seance-line { display: flex; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 8px; background: var(--surface-2); cursor: pointer; }
.seance-line:hover { outline: 1px solid var(--line); }
.addval { display: flex; gap: 4px; margin-top: 4px; }
.addval input { flex: 1; min-width: 0; }
.fld select { width: 100%; }
/* Éditeur de listes */
.listes-layout { display: grid; grid-template-columns: 230px 1fr; gap: 18px; margin-top: 10px; }
.listes-nav { display: flex; flex-direction: column; gap: 1px; max-height: 520px; overflow: auto; }
.listes-nav button { text-align: left; border: 0; background: none; padding: 6px 10px; border-radius: 6px; cursor: pointer; color: var(--text-2); font: inherit; display: flex; justify-content: space-between; }
.listes-nav button.on { background: var(--accent-soft); color: var(--text); font-weight: 600; }
.listes-nav button small { color: var(--muted); }
.lv { display: grid; grid-template-columns: 26px 1fr auto auto auto auto; gap: 6px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--line); }
.lv input { width: 100%; }
.lv .n { font-size: 12px; color: var(--muted); white-space: nowrap; min-width: 70px; text-align: right; }
.lv .btn { padding: 4px 8px; }
.lv .handle { color: var(--muted); text-align: center; font-size: 12px; }
.lv-add { display: flex; gap: 8px; margin-top: 12px; }
@media (max-width: 860px) { .listes-layout { grid-template-columns: 1fr; } .listes-nav { flex-direction: row; flex-wrap: wrap; } }

.right { float: right; margin-top: -4px; }
h3.pad { overflow: hidden; padding-bottom: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip small { color: var(--muted); }
.diary { background: var(--surface-2); border-radius: 8px; padding: 8px 10px; margin: 2px 0 8px; font-size: 13px; }
.warn { color: var(--s2); font-weight: 600; }
.q .qi { border-top: 1px solid var(--line); padding: 8px 0; }
.q .qi p { margin: 0 0 6px; color: var(--text); }
.qopts { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.qopts label { display: inline-flex !important; gap: 5px; align-items: center; margin: 0 !important; color: var(--text-2); }
.qopts input { width: auto !important; display: inline !important; margin: 0 !important; }
.rframe { width: 100%; height: 80vh; border: 1px solid var(--line); border-radius: 10px; background: #fff; margin-top: 12px; }

/* Habitudes */
.habit-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0; }
.hchip { border: 1px solid var(--line); background: var(--surface); border-radius: 18px; padding: 6px 12px; cursor: pointer; font: inherit; color: var(--text-2); }
.hchip.on { background: var(--s3); border-color: var(--s3); color: #fff; }
.hchip.auto { cursor: default; border-style: dashed; }
.hchip.auto.on { background: color-mix(in srgb, var(--s3) 70%, var(--surface)); }
.hchip small { opacity: .75; font-size: 11px; }

.heat { width: max-content; padding-bottom: 4px; }
.heat-g { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 13px); grid-auto-columns: 13px; gap: 3px; }
.heat-m { display: grid; grid-auto-flow: column; grid-auto-columns: 13px; gap: 3px; font-size: 10px; color: var(--muted); height: 14px; white-space: nowrap; }
.heat-g i, .heat-legend i { display: block; width: 13px; height: 13px; border-radius: 3px; background: var(--grid); }
.heat-g i { cursor: pointer; } .heat-g i.hx { visibility: hidden; }
.heat-g i.today { outline: 2px solid var(--text); outline-offset: -1px; }
.h0 { background: #e9e7e1 !important; } .h1 { background: #cde2fb !important; } .h2 { background: #86b6ef !important; }
.h3 { background: #3987e5 !important; } .h4 { background: #1c5cab !important; } .hn { background: transparent !important; outline: 1px dashed var(--line); outline-offset: -1px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .h0 { background: #2a2a27 !important; } :root:not([data-theme="light"]) .h1 { background: #184f95 !important; }
  :root:not([data-theme="light"]) .h2 { background: #256abf !important; } :root:not([data-theme="light"]) .h3 { background: #5598e7 !important; } :root:not([data-theme="light"]) .h4 { background: #9ec5f4 !important; } }
:root[data-theme="dark"] .h0 { background: #2a2a27 !important; } :root[data-theme="dark"] .h1 { background: #184f95 !important; }
:root[data-theme="dark"] .h2 { background: #256abf !important; } :root[data-theme="dark"] .h3 { background: #5598e7 !important; } :root[data-theme="dark"] .h4 { background: #9ec5f4 !important; }
.heat-legend { display: flex; gap: 4px; align-items: center; font-size: 11px; color: var(--muted); margin-top: 8px; }
.hb-list { display: flex; flex-direction: column; gap: 7px; }
.hbr2 { display: grid; grid-template-columns: 1fr 90px 40px 44px; gap: 8px; align-items: center; font-size: 13px; }
.hbr2 b { height: 8px; background: var(--surface-2); border-radius: 4px; position: relative; overflow: hidden; }
.hbr2 i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--s3); border-radius: 4px; }
.hbr2 em { font-style: normal; text-align: right; color: var(--text-2); }
.chart.small { height: 150px; margin-top: 12px; }
.hv { grid-template-columns: 26px 52px 1fr auto auto auto !important; }
.hv .em { text-align: center; }
@media (max-width: 860px) { .habit-layout { grid-template-columns: 1fr; } }

/* Tuiles de la vue d'ensemble */
.layout-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; margin: -4px 0 10px; font-size: 12.5px; }
.layout-bar .btn { padding: 4px 10px; font-size: 12.5px; }
.tiles-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 20px; gap: 16px; grid-auto-flow: row dense; }
.tile { margin: 0 !important; display: flex; flex-direction: column; position: relative; min-height: 0; min-width: 0; overflow: hidden; }
.tile > h3 { flex: none; display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.tile > h3 .right { margin-left: auto; float: none; }
.tile .chart, .tile .chart.tall { flex: 1 1 0; height: auto; min-height: 80px; }
.tile .corr, .tile .hb-list { flex: 1 1 0; overflow: auto; min-height: 0; }
.tile-handle { touch-action: none; cursor: grab; color: var(--muted); margin-right: 4px; user-select: none; font-size: 15px; line-height: 1; padding: 2px; border-radius: 4px; }
.tile-handle:hover { color: var(--text); background: var(--surface-2); }
.tile-rs { touch-action: none; position: absolute; right: 3px; bottom: 3px; width: 14px; height: 14px; cursor: nwse-resize; opacity: .35;
  background: linear-gradient(135deg, transparent 0 55%, var(--muted) 55% 62%, transparent 62% 72%, var(--muted) 72% 79%, transparent 79%); }
.tile:hover .tile-rs, .tile.resizing .tile-rs { opacity: 1; }
.tile.dragging { opacity: .55; outline: 2px dashed var(--accent); cursor: grabbing; }
.tile > h3 { cursor: grab; touch-action: none; user-select: none; }
.tile > h3 a, .tile > h3 button, .tile > h3 select, .tile > h3 input { cursor: pointer; }
body.tile-moving, body.tile-moving * { cursor: grabbing !important; user-select: none; }
.tile.resizing { outline: 2px solid var(--accent-soft); }
.heat-wrap { overflow-x: auto; scrollbar-width: none; flex: none; }
.heat-wrap::-webkit-scrollbar { display: none; }
.heat-slider { width: 100%; margin: 8px 0 0; accent-color: var(--accent); flex: none; }
.heat-legend .sep { margin: 0 4px; }
.heat-legend { flex-wrap: wrap; row-gap: 4px; }
.heat-legend span { white-space: nowrap; }
@media (max-width: 860px) { .tile { grid-column: 1 / -1 !important; } .tile-rs, .layout-bar { display: none; } }

.layout-bar .btnrow { align-items: center; }
.layout-bar select { padding: 4px 8px; font-size: 12.5px; }
.layout-bar .addval { margin: 0; }
.ok-state { color: var(--good); margin-left: 6px; }
.tv { grid-template-columns: 26px 1fr 1fr auto auto auto !important; }

/* Page Habitudes */
.ht-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.ht-card { margin: 0; padding: 14px 16px 12px; }
.ht-card.dragging { opacity: .45; }
.ht-head { display: flex; align-items: center; gap: 12px; }
.ht-grip { cursor: grab; color: var(--muted); font-size: 15px; user-select: none; padding: 2px; }
.ht-check { width: 42px; height: 42px; border-radius: 10px; border: 2px solid var(--line); background: transparent; color: var(--muted);
  font-size: 19px; cursor: pointer; flex: none; transition: background .12s, border-color .12s; }
.ht-check:hover:not(:disabled) { border-color: var(--hc); color: var(--hc); }
.ht-check.on { background: var(--hc); border-color: var(--hc); color: #fff; }
.ht-check:disabled { cursor: default; border-style: dashed; }
.ht-title { display: flex; flex-direction: column; line-height: 1.25; }
.ht-title b { font-size: 15px; } .ht-title small { color: var(--muted); font-size: 12px; }
.ht-streak { background: color-mix(in srgb, var(--s2) 14%, transparent); color: var(--s2); border-radius: 8px; padding: 5px 10px; font-size: 13px; white-space: nowrap; }
.ht-streak b { font-size: 16px; }
.ht-total, .ht-week { color: var(--muted); font-size: 12.5px; white-space: nowrap; } .ht-total b { color: var(--text); }
.ht-week { background: var(--surface-2); border-radius: 8px; padding: 4px 8px; }
.ht-menu { border: 0; background: none; color: var(--muted); font-size: 20px; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.ht-menu:hover { background: var(--surface-2); color: var(--text); }
.ht-sub { display: flex; justify-content: space-between; color: var(--text-2); font-size: 12.5px; margin: 12px 0 6px; }
.ht-leg { display: flex; gap: 6px; align-items: center; color: var(--muted); }
.ht-leg i { width: 11px; height: 11px; border-radius: 3px; background: var(--grid); display: inline-block; }
.ht-leg i.on { background: var(--hc); margin-left: 8px; }
.ht-scroll { overflow-x: auto; padding-bottom: 4px; }
.ht-heat { display: flex; gap: 6px; width: max-content; }
.ht-days { display: grid; grid-template-rows: 16px repeat(7, 13px); gap: 3px; font-size: 10.5px; color: var(--muted); padding-right: 2px; }
.ht-days span:first-child { height: 16px; }
.ht-months { display: grid; grid-auto-flow: column; grid-auto-columns: 13px; gap: 3px; height: 16px; font-size: 11px; color: var(--text-2); white-space: nowrap; }
.ht-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 13px); grid-auto-columns: 13px; gap: 3px; }
.ht-grid i { display: block; width: 13px; height: 13px; border-radius: 3px; background: var(--grid); cursor: pointer; }
.ht-grid.auto i { cursor: default; }
.ht-grid i.on { background: var(--hc); }
.ht-grid i.pre { opacity: .35; }
.ht-grid i.td { outline: 2px solid var(--text); outline-offset: -1px; }
.ht-grid:not(.auto) i:hover { outline: 2px solid var(--hc); outline-offset: -1px; }
.ht-colors { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; }
.ht-colors label { cursor: pointer; } .ht-colors input { display: none; }
.ht-colors i { display: block; width: 24px; height: 24px; border-radius: 6px; border: 2px solid transparent; }
.ht-colors input:checked + i { border-color: var(--text); box-shadow: 0 0 0 2px var(--surface) inset; }
@media (max-width: 700px) { .ht-head { flex-wrap: wrap; } .ht-total { display: none; } }

/* Tuiles humeur / journalling + aperçu d'un jour */
.mc-wrap { overflow-x: auto; flex: 1 1 auto; }
.j1 { background: color-mix(in srgb, var(--s7) 28%, var(--grid)) !important; } .j2 { background: color-mix(in srgb, var(--s7) 55%, var(--grid)) !important; }
.j3 { background: color-mix(in srgb, var(--s7) 80%, var(--grid)) !important; } .j4 { background: var(--s7) !important; }
.heat-legend i.j1, .heat-legend i.j2, .heat-legend i.j3, .heat-legend i.j4 { display: inline-block; }
.peek { width: min(680px, 94vw); max-height: 86vh; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); padding: 0; }
.peek::backdrop { background: rgba(0,0,0,.35); }
#peekBody { padding: 18px 22px 8px; overflow: auto; max-height: calc(86vh - 70px); }
.peek-h { margin: 0 0 10px; padding-left: 10px; border-left: 5px solid var(--mc); text-transform: capitalize; }
.peek-actions { display: flex; gap: 8px; padding: 12px 22px; border-top: 1px solid var(--line); }
.linkbtn { border: 0; background: none; color: var(--accent); cursor: pointer; padding: 2px 0; font: inherit; font-size: 12.5px; }

/* Page Carnet */
.cn-month { position: sticky; top: 0; z-index: 2; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 18px 0 10px; padding: 10px 2px;
  background: var(--bg); font-size: 19px; border-bottom: 1px solid var(--line); }
.cn-month small { font-weight: 400; color: var(--muted); font-size: 12.5px; }
.cn-day { display: grid; grid-template-columns: 62px 1fr; gap: 14px; background: var(--surface); border: 1px solid var(--line);
  border-left: 5px solid var(--mc, var(--line)); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; transition: box-shadow .3s; }
.cn-day[style*="transparent"] { border-left-color: var(--line); }
.cn-day.flash { box-shadow: 0 0 0 3px var(--accent-soft); }
.cn-date { display: flex; flex-direction: column; align-items: center; color: var(--muted); font-size: 12px; line-height: 1.15; }
.cn-date b { font-size: 26px; color: var(--text); font-weight: 650; }
.cn-date .linkbtn { margin-top: 8px; font-size: 11px; opacity: 0; }
.cn-day:hover .cn-date .linkbtn { opacity: 1; }
.cn-body { min-width: 0; }
.cn-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.cn-chips .pill { background: var(--surface-2); border-radius: 20px; padding: 2px 10px; font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.cn-chips .pill.mood { background: color-mix(in srgb, var(--mc) 22%, transparent); color: var(--text); box-shadow: inset 3px 0 0 var(--mc); }
.cn-chips .pill.warn { color: var(--danger); } .cn-chips .pill.acc { color: var(--accent); }
.cn-resume { margin: 6px 0; font-size: 15px; line-height: 1.5; }
.cn-moods { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.mchip { font-size: 11.5px; color: var(--text-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 7px 1px 6px; box-shadow: inset 3px 0 0 var(--mc); }
.cn-com { margin: 6px 0; color: var(--text-2); font-style: italic; }
.cn-journal { margin: 10px 0 4px; padding: 10px 14px; border-left: 3px solid var(--s7); background: color-mix(in srgb, var(--s7) 7%, transparent);
  border-radius: 0 8px 8px 0; white-space: pre-wrap; line-height: 1.55; font-family: Georgia, "Times New Roman", serif; font-size: 15px; }
.cn-journal.clamp { max-height: calc(1.55em * 6 + 20px); overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.cn-other { display: grid; gap: 3px; margin-top: 8px; font-size: 13px; color: var(--text-2); }
.cn-other span { display: inline-block; min-width: 82px; color: var(--muted); font-size: 12px; }
.cn-small { font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.cn-more { text-align: center; padding: 20px; }
.cn-back { margin: 6px 0 4px; }


/* Carnet en deux colonnes : calendrier vertical | fil des journées */
#page-carnet.active { display: flex; flex-direction: column; height: calc(100vh - 104px); min-height: 480px; }
#page-carnet .page-head { flex: none; margin-bottom: 12px; }
.cn-split { --calw: 252px; --cw: calc((var(--calw) - 20px - 24px - 38px - 28px) / 7); flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: var(--calw) 12px minmax(0, 1fr); gap: 6px; }
.cn-split-bar { cursor: col-resize; position: relative; touch-action: none; }
.cn-split-bar::after { content: ""; position: absolute; left: 5px; top: 30%; bottom: 30%; width: 2px; border-radius: 2px; background: var(--line); transition: background .15s; }
.cn-split-bar:hover::after, .cn-split-bar.drag::after { background: var(--accent); top: 10%; bottom: 10%; }
body.cn-resizing, body.cn-resizing * { cursor: col-resize !important; user-select: none; }
.cn-cal { margin: 0; padding: 14px 6px 0 14px; display: flex; flex-direction: column; min-height: 0; }
.cn-mode, .cn-legend, .cn-calhead { flex: none; }
.cn-mode { align-self: flex-start; margin-bottom: 8px; } .cn-mode button { padding: 4px 10px; font-size: 12.5px; }
.cn-mode button.on { background: var(--accent-soft); color: var(--text); }
.cn-legend { display: flex; align-items: center; gap: 3px; font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.cn-legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.cn-calhead, .cn-wk { display: grid; grid-template-columns: 38px repeat(7, var(--cw)); gap: 4px; }
.cn-calhead { font-size: 11px; color: var(--muted); text-align: center; padding-bottom: 4px; border-bottom: 1px solid var(--line); margin-right: 18px; }
.cn-calscroll { flex: 1 1 auto; overflow-y: auto; padding: 6px 18px 12px 0; scrollbar-width: thin; scrollbar-gutter: stable; }
.cn-wk { margin-bottom: 3px; }
.cn-wk.ny { margin-top: 10px; }
.cn-ml { font-size: 11px; color: var(--text-2); text-align: right; padding-right: 4px; line-height: min(var(--cw), 24px); white-space: nowrap; }
.cn-ml b { color: var(--text); font-size: 11.5px; }
.cn-wk i { width: var(--cw); height: min(var(--cw), 24px); border-radius: 4px; background: var(--grid); cursor: pointer; position: relative; }
.cn-wk i.x { visibility: hidden; }
.cn-wk i.hn { background: transparent; outline: 1px dashed var(--line); outline-offset: -1px; }
.cn-wk i.t::after { content: ""; position: absolute; right: 3px; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; background: color-mix(in srgb, var(--text) 55%, transparent); }
.cn-wk i.today { outline: 2px solid var(--text); outline-offset: -1px; }
.cn-wk i.cur { outline: 2.5px solid var(--accent); outline-offset: 1px; z-index: 1; }
.cn-wk i.dim { opacity: .18; }
.cn-wk i:hover { outline: 2px solid var(--accent); outline-offset: -1px; }
.cn-feed { overflow-y: auto; min-height: 0; padding-right: 6px; scroll-behavior: auto; }
.cn-feed .cn-month { background: var(--bg); }
.cn-feed > .cn-more:empty { padding: 0; }
.cn-feed .cn-list > .cn-month:first-child { margin-top: 0; }
@media (max-width: 860px) {
  .cn-split-bar { display: none; }
  #page-carnet.active { height: auto; display: block; }
  .cn-split { display: block; } .cn-cal { display: none; } .cn-feed { overflow: visible; }
  .cn-day { grid-template-columns: 1fr; } .cn-date { flex-direction: row; gap: 8px; align-items: baseline; }
}

.temps-total { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.temps-total span { color: var(--text-2); } .temps-total b { font-size: 17px; }
.temps-total.over b { color: var(--danger); }
.fld.wide textarea[rows="10"] { min-height: 220px; font-size: 14.5px; line-height: 1.5; }

.multi { display: flex; flex-wrap: wrap; gap: 6px; }

.alc-old > summary { cursor: pointer; padding: 2px 0; }
.alc-old[open] > summary { margin-bottom: 6px; }
#page-alcool .kpis { margin-bottom: 16px; }

.fld .tr-open { display: block; margin-top: 8px; font-size: 12.5px; padding: 5px 10px; }