html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, svg { max-width: 100%; }
/* Layout: comptoir funky — logo-mascotte en tête, 4 tuiles pop à bord épais et ombre décalée, onglets par échéance, tableau dense */
:root {
  --bg: #F6F1FF;
  --dot: #E4D9FF;
  --surface: #FFFFFF;
  --ink: #1D1235;
  --on-color: #1D1235;
  --muted: #6A5F86;
  --hair: #E6DEF7;
  --edge: #1D1235;
  --shadow: #1D1235;
  --accent: #7C4DFF;
  --accent-soft: #EEE7FF;
  --pink: #FF5C93; --orange: #FF9443; --lemon: #FFD93D; --sky: #5EC8FF; --mint: #2ED39A; --lilac: #C9B6FF;
  --crit: #B0124F; --crit-bg: #FFD6E5;
  --warn: #9A4A00; --warn-bg: #FFE6CC;
  --ok: #0B7A55; --ok-bg: #D3F7E8;
  --grey: #4F4670; --grey-bg: #ECE7F7;
  --zebra: #FBF9FF;
  --hover: #FFF6CC;
  --font-display: "Bricolage Grotesque", "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-body: "DM Sans", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #140C26; --dot: #21153D; --surface: #1F1537; --ink: #F3EEFF; --muted: #B3A7D6; --hair: #33275A;
    --edge: #0A0614; --shadow: #0A0614; --accent: #A98BFF; --accent-soft: #2D2152;
    --crit: #FF8DB5; --crit-bg: #4A1630; --warn: #FFB877; --warn-bg: #44290F; --ok: #6EE7B7; --ok-bg: #123D30;
    --grey: #C9C0E6; --grey-bg: #2E2450; --zebra: #231940; --hover: #3A2E12;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #140C26; --dot: #21153D; --surface: #1F1537; --ink: #F3EEFF; --muted: #B3A7D6; --hair: #33275A;
  --edge: #0A0614; --shadow: #0A0614; --accent: #A98BFF; --accent-soft: #2D2152;
  --crit: #FF8DB5; --crit-bg: #4A1630; --warn: #FFB877; --warn-bg: #44290F; --ok: #6EE7B7; --ok-bg: #123D30;
  --grey: #C9C0E6; --grey-bg: #2E2450; --zebra: #231940; --hover: #3A2E12;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  background-color: var(--bg);
  background-image: radial-gradient(var(--dot) 1.6px, transparent 1.7px);
  background-size: 22px 22px;
  color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.45;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: max(22px, env(safe-area-inset-top, 0px)) max(44px, env(safe-area-inset-bottom, 0px));
}
.wrap { max-width: 1180px; margin: 0 auto; display: grid; gap: 20px; }
h1, h2 { font-family: var(--font-display); text-wrap: balance; margin: 0; }
.num { font-variant-numeric: tabular-nums; }

/* En-tête + logo */
header.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.logo { width: 132px; height: 116px; flex: none; overflow: visible; }
h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; letter-spacing: -0.03em; line-height: .95; }
h1 .acc { color: var(--pink); -webkit-text-stroke: 1.5px var(--edge); paint-order: stroke fill; }
.tagline { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; margin: 6px 0 2px; }
.tagline em { font-style: normal; background: var(--lemon); color: var(--on-color); padding: 0 6px; border-radius: 4px; }
.sub { color: var(--muted); margin: 2px 0 0; font-size: 14px; }
.badge-ex { display: inline-block; font-family: var(--font-body); font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--on-color); background: var(--lemon); border: 2px solid var(--edge); border-radius: 999px; padding: 2px 9px; margin-left: 10px; vertical-align: 6px; transform: rotate(-4deg); }
@media (prefers-reduced-motion: no-preference) {
  .logo .clock { transform-origin: 101px 24px; animation: ring 2.6s ease-in-out infinite; }
  .logo .drop { animation: drip 2.6s ease-in infinite; }
  .logo .pupil { animation: look 5s ease-in-out infinite; }
}
@keyframes ring { 0%, 70%, 100% { transform: rotate(0); } 74% { transform: rotate(14deg); } 78% { transform: rotate(-12deg); } 82% { transform: rotate(10deg); } 86% { transform: rotate(-6deg); } 90% { transform: rotate(0); } }
@keyframes drip { 0%, 55% { transform: translateY(0); opacity: 1; } 85% { transform: translateY(10px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
@keyframes look { 0%, 40%, 100% { transform: translate(0, 0); } 50%, 90% { transform: translate(-3px, 2px); } }

/* Zone de dépôt */
.drop {
  position: relative; display: flex; align-items: center; gap: 12px; background: var(--mint); color: var(--on-color);
  border: 3px solid var(--edge); border-radius: 16px; padding: 12px 18px; cursor: pointer; min-width: 0;
  box-shadow: 5px 5px 0 var(--shadow); transition: transform .12s, box-shadow .12s;
}
.drop:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--shadow); }
.drop.over { background: var(--lemon); transform: rotate(-1.5deg) scale(1.02); }
.drop strong { font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; display: block; }
.drop small { display: block; font-size: 13px; }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop:focus-within { outline: 3px solid var(--accent); outline-offset: 3px; }

/* Tuiles */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kpi {
  text-align: left; font: inherit; color: var(--on-color); background: var(--c); border: 3px solid var(--edge);
  border-radius: 18px; padding: 14px 16px 16px; cursor: pointer; display: grid; gap: 2px; position: relative;
  box-shadow: 5px 5px 0 var(--shadow); transition: transform .12s, box-shadow .12s;
}
.kpi[data-tab="m1"] { --c: var(--pink); --tilt: -1.2deg; }
.kpi[data-tab="m3"] { --c: var(--orange); --tilt: 1deg; }
.kpi[data-tab="m6"] { --c: var(--lemon); --tilt: -0.8deg; }
.kpi[data-tab="past"] { --c: var(--lilac); --tilt: 1.2deg; }
.kpi:hover { transform: translate(-2px, -2px) rotate(var(--tilt)); box-shadow: 7px 7px 0 var(--shadow); }
.kpi[aria-pressed="true"] { transform: rotate(var(--tilt)); box-shadow: 8px 8px 0 var(--shadow); }
.kpi[aria-pressed="true"]::after { content: "VOUS ÊTES ICI"; position: absolute; top: -12px; right: 12px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; background: var(--edge); color: var(--lemon); border-radius: 999px; padding: 3px 9px; }
.kpi .big { font-family: var(--font-display); font-size: 2.7rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.kpi .lbl { font-weight: 800; font-size: 15px; }
.kpi .eur { font-size: 13.5px; font-weight: 600; opacity: .85; }
.kpi:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

.summary { display: flex; flex-wrap: wrap; gap: 8px 10px; font-size: 13.5px; }
.summary span { background: var(--surface); border: 2px solid var(--edge); border-radius: 999px; padding: 4px 12px; color: var(--muted); }
.summary b { color: var(--ink); }

/* Panneau tableau */
.panel { background: var(--surface); border: 3px solid var(--edge); border-radius: 20px; min-width: 0; box-shadow: 6px 6px 0 var(--shadow); overflow: hidden; }
.tools { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; padding: 16px 18px; border-bottom: 3px solid var(--edge); background: var(--accent-soft); }
.tools h2 { font-size: 1.45rem; font-weight: 800; margin-right: auto; letter-spacing: -0.02em; }
.tools h2 span { color: var(--muted); font-weight: 600; font-size: 0.95rem; font-family: var(--font-body); }
input[type="search"] {
  font: inherit; color: var(--ink); background: var(--surface); border: 2px solid var(--edge); border-radius: 999px;
  padding: 7px 14px; width: 250px; max-width: 100%;
}
input[type="search"]:focus-visible, .seg button:focus-visible, label.chk:focus-within, th button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
label.chk { display: inline-flex; gap: 7px; align-items: center; font-size: 14px; font-weight: 600; cursor: pointer; }
label.chk input { width: 17px; height: 17px; accent-color: var(--accent); }
.seg { display: inline-flex; border: 2px solid var(--edge); border-radius: 999px; overflow: hidden; background: var(--surface); }
.seg button { font: inherit; font-size: 14px; font-weight: 600; border: 0; background: transparent; color: var(--ink); padding: 6px 13px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--edge); color: var(--lemon); }
.explain { padding: 10px 18px; font-size: 14px; color: var(--muted); border-bottom: 2px dashed var(--hair); }

.tbl { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 820px; }
th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 800; padding: 0; border-bottom: 2px solid var(--edge); position: sticky; top: 0; background: var(--surface); }
th button { all: unset; display: block; width: 100%; box-sizing: border-box; padding: 10px; cursor: pointer; }
th button:hover { color: var(--accent); }
th.r, td.r { text-align: right; }
th[aria-sort="ascending"] button::after { content: " ▲"; color: var(--pink); }
th[aria-sort="descending"] button::after { content: " ▼"; color: var(--pink); }
td { padding: 8px 10px; border-bottom: 1px solid var(--hair); vertical-align: middle; }
tbody tr:nth-child(even) td { background: var(--zebra); }
tbody tr:hover td { background: var(--hover); }
td.prod b { font-weight: 700; display: block; }
td.prod small { color: var(--muted); font-size: 12.5px; }
td.days small { display: block; color: var(--muted); font-size: 12px; }
.pill { display: inline-block; min-width: 3.6em; text-align: right; font-weight: 800; border-radius: 999px; padding: 3px 10px; border: 2px solid currentColor; }
.pill.crit { color: var(--crit); background: var(--crit-bg); }
.pill.warn { color: var(--warn); background: var(--warn-bg); }
.pill.ok { color: var(--ok); background: var(--ok-bg); }
.pill.grey { color: var(--grey); background: var(--grey-bg); }
tr.done td { opacity: .4; }
tr.done td.prod b { text-decoration: line-through; text-decoration-color: var(--pink); text-decoration-thickness: 2px; }
td.chk { width: 36px; }
td.chk input { width: 18px; height: 18px; accent-color: var(--mint); cursor: pointer; }
.empty { padding: 30px 16px; text-align: center; color: var(--muted); font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; }
.more { display: block; margin: 14px auto; font: inherit; font-weight: 700; color: var(--on-color); background: var(--lemon); border: 2px solid var(--edge); border-radius: 999px; padding: 8px 18px; cursor: pointer; box-shadow: 3px 3px 0 var(--shadow); }

details.help { background: var(--surface); border: 3px solid var(--edge); border-radius: 16px; padding: 12px 18px; box-shadow: 4px 4px 0 var(--shadow); }
details.help summary { cursor: pointer; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; }
details.help ol { margin: 10px 0 4px; padding-left: 1.3em; display: grid; gap: 4px; color: var(--muted); }
details.help b { color: var(--ink); }
.err { color: var(--crit); background: var(--crit-bg); border: 2px solid var(--crit); border-radius: 12px; padding: 10px 14px; font-weight: 600; }
.remind { display: flex; gap: 10px; align-items: center; color: var(--on-color); background: var(--lemon); border: 3px solid var(--edge); border-radius: 14px; padding: 10px 14px; font-weight: 700; box-shadow: 4px 4px 0 var(--shadow); }
.remind svg { flex: none; }

@media (max-width: 760px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .drop { width: 100%; }
  input[type="search"] { width: 100%; }
  .tools h2 { width: 100%; }
  .logo { width: 96px; height: 84px; }
}
@media (prefers-reduced-motion: reduce) { .kpi, .drop { transition: none; } .kpi:hover, .drop:hover { transform: none; } }