/* A-FORCE — Élan (ocre), Veille, Planifier, Focus (bleu), Imprévu et pauses (vert).
   S'appuie sur app.css (boutons, champs, fenêtres, messages). */

body.t-elan {
  --bg: #110F0B; --surface: #1A1813; --row: #1F1C16; --border: #2E2A20; --line: #2E2A20; --grip: #5E584C;
  --accent: #E6B25A; --accent-soft: #F0C877; --accent-btn: #E6B25A; --on-accent: #2A1A00;
  --accent-deep: #241B0B; --accent-border: #4E3B17;
}
body.t-focus {
  --bg: #0D1420; --surface: #161C28; --row: #1A2130; --border: #263044; --line: #222A38; --grip: #4B5A70; --muted: #A7B3C4;
  --accent: #7DB7F5; --accent-soft: #A9CEF8; --accent-btn: #7DB7F5; --on-accent: #0B1A2C;
  --accent-deep: #132741; --accent-border: #24426A;
}
body.t-imprevu {
  --bg: #0B1410; --surface: #121C18; --row: #15211C; --border: #223930; --line: #223930; --muted: #ABBAB4;
  --accent: #69D3A7; --accent-soft: #BFE3D4; --accent-btn: #69D3A7; --on-accent: #0A291C;
  --accent-deep: #123024; --accent-border: #285D47;
}
body { --blue: #7DB7F5; --blue-soft: #A9CEF8; --blue-deep: #132741; --blue-border: #24426A; --blue-ink: #0B1A2C;
  --green: #69D3A7; --green-soft: #BFE3D4; --green-deep: #123024; --green-border: #285D47; --green-ink: #0A291C;
  --ocre-main: #E6B25A; --ocre-ink: #2A1A00; --violet-deep: #2F1740; --violet-border: #5C3678; --violet-soft: #D9B2FF; }

a { color: var(--accent-soft); }
.wrap.narrow { max-width: 860px; }
.page-head.centered { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.head-nav .icon-btn { width: 48px; height: 48px; border-radius: 12px; font-size: 20px; color: var(--muted); }
.self-start { align-self: flex-start; }
.small-link { font-size: 14px; }
.link.blue { color: var(--blue-soft); }
.link.small { font-size: 13px; }
.hint { font-size: 13px; color: var(--accent-soft); }

/* Boutons de couleur */
.btn.big { min-height: 56px; padding: 0 28px; font-size: 17px; border-radius: 12px; }
.btn.huge { min-height: 72px; padding: 0 44px; border-radius: 16px; font-family: var(--font-title); font-size: 24px; font-weight: 700; }
.btn.ocre { background: var(--ocre-main); color: var(--ocre-ink); }
.btn.green-solid { background: var(--green); color: var(--green-ink); font-weight: 700; }
.btn.ghost.green { border-color: var(--green-border); color: var(--green-soft); }
.btn.ghost.green:hover { background: var(--green-deep); }
.btn.ghost.blue { border-color: var(--blue-border); color: var(--blue-soft); }
.btn.ghost.blue:hover { background: var(--blue-deep); }
.btn.launch { min-height: 60px; padding: 0 40px; border-radius: 14px; background: var(--blue); color: var(--blue-ink); font-family: var(--font-title); font-size: 22px; font-weight: 700; }
.btn.launch.big { font-size: 20px; min-height: 64px; }
.btn.surface { background: var(--surface); border-color: var(--accent-border); }
.btn.ocre:hover, .btn.green-solid:hover, .btn.launch:hover { filter: brightness(1.08); }
.actions-center { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }

/* Puces (durée, son, type) */
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip-btn { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border); background: transparent; font-size: 14px; cursor: pointer; }
.chip-btn.on { border-color: var(--accent); background: var(--accent-deep); color: var(--accent-soft); font-weight: 700; }
.chip-btn.on.blue { border-color: var(--blue); background: var(--blue-deep); color: #DCEBFC; }
.chip-btn.on.green { border-color: var(--green); background: var(--green-deep); color: var(--green-soft); }
input.num { width: 84px; min-height: 40px; border-radius: 999px; border: 1px solid var(--border); background: transparent; padding: 0 12px; text-align: center; }
input.num.on { border-color: var(--accent); background: var(--accent-deep); font-weight: 700; }
input[type="time"], input[type="url"], input[type="number"] { color-scheme: dark; }
input[type="time"], input[type="url"], .dialog input[type="number"]:not(.num) { min-height: 44px; border: 1px solid var(--border); border-radius: 10px; padding: 0 12px; background: var(--bg); width: 100%; }

/* Barres de progression */
.bar { width: 100%; height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
.bar.blue .bar-fill, .t-focus .bar-fill { background: var(--blue); }
.bar.ocre .bar-fill { background: var(--ocre-main); }
.bar-fill { height: 100%; width: 0; background: var(--accent); transition: width .5s linear; }

/* ---------- Élan ---------- */
.hub { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.hub-main { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.hub-side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.card-head.wrap-head { flex-wrap: wrap; align-items: center; }
.card-head.wrap-head h2 { font-size: 20px; }

.pause-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; padding: 26px 28px; border-radius: 22px; background: var(--green-deep); border: 1px solid var(--green-border); }
.pause-banner.over { border-color: #8A6A2A; box-shadow: 0 0 0 2px rgba(230,178,90,.25) inset; }
.pause-timer { font-family: var(--font-title); font-size: 56px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--green); }
.pause-banner.over .pause-timer { color: var(--ocre-main); }
.pause-text { flex: 1 1 260px; display: flex; flex-direction: column; gap: 2px; }
.pause-text b { font-size: 17px; }
.pause-sub { font-size: 14px; color: var(--green-soft); }
.after-meal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 4px; font-size: 14px; color: var(--muted); }

.onboarding { background: #241B0B; border: 1px solid #6B5220; border-radius: 22px; padding: 30px 28px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.onboarding h2 { font-size: 34px; }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: 14px; color: var(--muted); }
.steps .on { font-weight: 700; color: var(--accent-soft); }

.strip { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--accent-border); }
.strip.late { border-color: #8A6A2A; }
.strip-text { flex: 1 1 200px; display: flex; flex-direction: column; min-width: 0; }
.strip-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.next-card { background: var(--blue-deep); border: 1px solid var(--blue-border); border-radius: 22px; padding: 24px 26px; display: flex; flex-direction: column; gap: 16px; }
.next-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.eyebrow.blue { color: var(--blue-soft); font-family: var(--font); font-weight: 700; letter-spacing: .06em; }
.next-card .when { font-size: 14px; color: var(--blue-soft); }
.late-badge { font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: #3A2B0F; color: #F0C877; }
.next-card .field > label, .next-card legend { color: #A7B3C4; }
select.next-project { width: auto; max-width: 100%; min-width: 220px; min-height: 44px; border-color: var(--blue-border); font-family: var(--font-title); font-size: 18px; font-weight: 700; background: #0D1420; align-self: flex-start; }
.next-row { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: flex-end; }
.next-row .btn.launch { margin-left: auto; }
.next-card .chip-btn { border-color: var(--blue-border); }
.next-card .chip-btn.on { border-color: var(--blue); background: #1B3557; color: #DCEBFC; }
.next-card input.num { border-color: var(--blue-border); }
.next-card input.num.on { border-color: var(--blue); background: #1B3557; }

.plan-card { padding: 20px 22px; gap: 10px; }
.plan-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.check-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border); font-size: 13px; color: var(--muted); cursor: pointer; }
.check-pill input, .check-line input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.check-line { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); cursor: pointer; }
.plan { display: flex; flex-direction: column; gap: 2px; }
.plan-row { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: center; min-height: 44px; padding: 4px 12px 4px 6px; margin: 0 -12px; border-radius: 12px; border: 1px solid transparent; }
.plan-row.next { background: var(--blue-deep); border-color: var(--blue-border); }
.plan-row.now { background: var(--green-deep); border-color: var(--green-border); }
.plan-row.opt { opacity: .7; }
.plan-grid { display: grid; grid-template-columns: 64px 96px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-width: 0; background: none; border: 0; padding: 4px 0; text-align: left; cursor: pointer; width: 100%; }
.plan.editable .plan-grid { grid-template-columns: 76px 96px minmax(0, 1fr) 72px; cursor: default; }
.plan.editable .plan-row { border-top: 1px solid var(--line); margin: 0; padding: 4px 10px 4px 4px; }
.plan.editable .plan-row.next, .plan.editable .plan-row.now { border-radius: 12px; }
.time-input.invalid, input.invalid { border-color: var(--danger) !important; }
#b-time { min-height: 48px; font-size: 17px; }
.plan-time { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--accent-soft); }
.plan-title { min-width: 0; font-weight: 600; overflow-wrap: anywhere; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.plan-meta { font-size: 13px; white-space: nowrap; color: var(--muted); background: none; border: 0; padding: 0; text-align: right; cursor: pointer; }
.plan-row.next .plan-time, .plan-row.next .plan-meta { color: var(--blue-soft); }
.plan-row.now .plan-time, .plan-row.now .plan-meta { color: var(--green); }
.plan-row.late .plan-meta { color: var(--ocre-main); font-weight: 700; }
.plan-row.done .plan-time, .plan-row.done .plan-meta, .plan-row.done .plan-title { color: #8D8A82; }
.plan-row.done .plan-title { text-decoration: line-through; font-weight: 400; }
.plan-row.missed { opacity: .55; }
.plan-row.missed .plan-time, .plan-row.missed .plan-meta { color: #8D8A82; }
.plan-row .grip { color: var(--grip); }
.tag-btn { background: none; border: 0; padding: 0; cursor: pointer; justify-self: start; }
.time-input { min-height: 36px !important; padding: 0 8px !important; font-weight: 600; color: var(--accent-soft); font-variant-numeric: tabular-nums; }
.proj-select { min-height: 40px; border-color: var(--blue-border); background: #0D1420; font-weight: 600; }

.tag { justify-self: start; display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.tag-focus { background: #1B3557; color: #A9CEF8; }
.tag-batch { background: #16243A; color: #A9CEF8; border: 1px dashed #24426A; }
.tag-pause { background: #123024; color: #69D3A7; }
.tag-fixe { background: #2E2A20; color: #D3D0C8; }
.tag-orga { background: #2F1740; color: #D9B2FF; }
.tag-elan { background: #3A2B0F; color: #F0C877; }

.capture-card { background: #241B0B; border-color: #4E3B17; }
.capture-card h2 { font-size: 18px; }
.inline-form .btn { min-height: 44px; }
.sched-item { display: flex; flex-direction: column; gap: 2px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.sched-item:last-child { border-bottom: 0; padding-bottom: 0; }
.stat { display: flex; flex-direction: column; gap: 6px; }
.stat-line { display: flex; justify-content: space-between; gap: 12px; }
.num-val { font-variant-numeric: tabular-nums; }
.stat .bar { height: 8px; }

/* ---------- Veille ---------- */
.timer-block { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.timer-block .bar { max-width: 420px; margin-top: 8px; }
.big-timer { font-family: var(--font-title); font-size: clamp(88px, 14vw, 140px); font-weight: 700; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: #F6F1E6; }
.big-timer.over, .mid-timer.over, .focus-timer.over { color: var(--ocre-main); }
.check-row { display: flex; align-items: center; gap: 8px; min-height: 44px; border-top: 1px solid var(--line); }
.check-row label { flex: 1 1 auto; display: flex; align-items: center; gap: 12px; font-weight: 600; cursor: pointer; min-height: 44px; }
.check-row input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.check-row.done label { color: #8D8A82; text-decoration: line-through; font-weight: 400; }
.x { flex: none; width: 34px; height: 34px; border-radius: 8px; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 20px; opacity: 0; }
.check-row:hover .x, .x:focus-visible { opacity: 1; }
.big-capture input, .big-capture .btn { min-height: 48px; }
.big-capture .btn.primary { background: #241B0B; color: #F0C877; border: 1px solid #6B5220; }

/* ---------- Planifier ---------- */
.head-timer { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.head-timer .bar { width: 160px; }
.mid-timer { font-family: var(--font-title); font-size: 44px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.quick { background: var(--violet-deep); border-color: var(--violet-border); gap: 0; }
.quick .card-head { margin-bottom: 8px; }
.quick a, .quick .small-link { color: var(--violet-soft); }
.quick-row { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-top: 1px solid var(--violet-border); text-decoration: none; color: var(--text) !important; }
.quick-row:hover b { text-decoration: underline; }
.quick-line { display: flex; justify-content: space-between; gap: 10px; }
.quick-top { color: #DDCFE8; }
.quick .n { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; color: var(--muted); }
.quick .n.hot { background: #3A2B0F; color: #F0C877; }
.quick > .small-link { padding-top: 10px; border-top: 1px solid var(--violet-border); }

/* ---------- Focus ---------- */
.status-line { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.dot { width: 8px; height: 8px; border-radius: 999px; background: var(--ocre-main); }
.dot.green { background: var(--green); }
.focus-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
@media (max-width: 820px) { .focus-grid { grid-template-columns: 1fr; } .focus-grid .motiv { order: 3; } }
.motiv { margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; text-align: center; }
.motiv-frame { flex: 1 1 auto; min-height: 260px; border-radius: 18px; overflow: hidden; background: var(--blue-deep); display: flex; align-items: center; justify-content: center; cursor: zoom-in; }
.motiv-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.motiv-frame img.dim { opacity: .6; }
.motiv-frame.empty-frame { flex-direction: column; gap: 6px; border: 1px dashed var(--blue-border); padding: 20px; cursor: default; }
.motiv-title { font-family: var(--font-title); font-size: 18px; font-weight: 600; color: #CFE0F5; }
.focus-center { container-type: inline-size; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 26px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.focus-center .eyebrow { font-family: var(--font); font-size: 14px; color: var(--blue-soft); letter-spacing: .06em; }
.focus-center .bar { max-width: 360px; margin-top: 8px; }
.focus-timer { font-family: var(--font-title); font-size: clamp(64px, 23cqw, 150px); font-weight: 700; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: #F2F6FB; }
.focus-center.paused { background: var(--green-deep); border-color: var(--green-border); }
.focus-center.paused .eyebrow { color: var(--green); }
.focus-center.paused .focus-timer { color: #E9F7F0; }
.focus-center.paused .bar { background: var(--green-border); }
.focus-center.paused .bar-fill { background: var(--green); }
.focus-center.paused .muted { color: var(--green-soft); }
.focus-side { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.side-card { gap: 8px; }
.side-card.grow { flex: 1 1 auto; }
.side-label { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.side-label.green { color: var(--green); }
.side-title { font-size: 17px; }
.side-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: auto; }
input[type="range"] { flex: 1 1 100px; accent-color: var(--blue); min-width: 80px; }
.focus-tasks { width: 100%; max-width: 760px; margin: 0 auto; gap: 6px; padding: 20px 22px; }
.ftask { display: flex; gap: 12px; align-items: center; min-height: 44px; padding: 4px 0; border-top: 1px solid var(--line); }
.ftask input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--blue); cursor: pointer; }
.ftitle { flex: 1 1 auto; min-width: 0; font-weight: 600; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.fdesc { font-size: 13px; font-weight: 400; color: var(--muted); white-space: pre-line; }
.ftask.done .ftitle { color: #8792A3; text-decoration: line-through; font-weight: 400; }
.mini-tag { flex: none; font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); }
.resume-note { margin: 0 0 6px; padding: 10px 12px; border-radius: 10px; background: var(--green-deep); border: 1px solid var(--green-border); font-size: 14px; }
.parking { margin-top: 10px; }
.parking .btn.primary { background: transparent; color: var(--text); border: 1px solid var(--accent-border); }
.image-dialog { padding: 0; border: 0; background: transparent; max-width: 96vw; max-height: 96vh; }
.image-dialog::backdrop { background: rgba(0,0,0,.9); }
.image-dialog img { display: block; max-width: 96vw; max-height: 96vh; object-fit: contain; cursor: zoom-out; }

/* ---------- Imprévu ---------- */
.imprevu-head { display: flex; justify-content: space-between; }
.eyebrow.green { color: var(--green); }
.imprevu-title { font-size: 30px; font-weight: 600; margin-bottom: 4px; }
.t-imprevu .big-timer { font-size: clamp(80px, 12vw, 120px); color: var(--text); }
.ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; padding: 16px; border-radius: 16px; border: 1px solid #8A6A2A; background: #241B0B; }
.green-card { background: var(--green-deep); border-color: var(--green-border); }
.green-card textarea { background: var(--bg); border-color: var(--green-border); }
.two { display: flex; flex-wrap: wrap; gap: 16px; }
.two > .card { flex: 1 1 300px; }
.card.soft { gap: 6px; }

/* Fenêtres en ocre */
.t-elan .dialog, .t-focus .dialog { border-color: var(--accent-border); }
.dialog .row .grow1 { flex: 1 1 120px; }
.dialog .row .grow2 { flex: 2 1 260px; }
.dialog select { min-height: 48px; font-weight: 600; }

@media (max-width: 640px) {
  .page-title { font-size: 48px; }
  .plan-grid { grid-template-columns: 52px 84px minmax(0, 1fr); }
  .plan-grid .plan-meta { display: none; }
  .plan.editable .plan-grid { grid-template-columns: 84px minmax(0, 1fr); }
  .plan.editable .tag-btn, .plan.editable .plan-meta { display: none; }
}