/* ===== Commandes Aqui — palette inspirée du bistro Aqui ===== */
:root{
  --forest:#1F2D22; --forest-2:#2C3D30;
  --olive:#A9A883; --sage:#B5B793; --stripe:#AEB08D; --sage-muted:#B9BE9E;
  --cream:#FFF6D8; --blush:#FBF6F2; --card:#F8FAF9;
  --danger:#A1463A;
  --r-card:22px; --r-group:16px; --r-btn:3px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --font:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --hand:'Shadows Into Light Two','Segoe Print','Bradley Hand',cursive;

  /* Jetons sémantiques (thème clair) */
  --page-a:var(--sage); --page-b:var(--olive); --page-stripe:rgba(174,176,141,.55);
  --chrome:#1F2D22; --chrome-text:var(--cream); --chrome-muted:var(--sage);
  --surface:var(--card); --surface-2:var(--blush);
  --title:#1F2D22; --ink:#1F2D22; --ink-2:#4A5A4D; --ink-3:#7D8A7F;
  --accent:#1F2D22; --on-accent:var(--cream); --accent-hover:#2C3D30;
  --line:rgba(31,45,34,.07); --line-2:rgba(31,45,34,.25); --hover:rgba(31,45,34,.045); --soft:rgba(31,45,34,.08);
  --track:rgba(31,45,34,.09); --bar-a:var(--olive); --bar-b:#1F2D22;
  --check-bg:#fff; --check-border:var(--sage-muted);
  --value-bg:rgba(169,168,131,.16); --value-ink:#3B4A3E;
  --edit-bg:rgba(255,255,255,.95); --edit-ring:var(--sage-muted);
  --tile-bg:rgba(255,246,216,.25); --tile-bg-h:rgba(255,246,216,.6); --tile-border:rgba(31,45,34,.35);
  --shadow:0 1px 2px rgba(31,45,34,.06),0 10px 30px -12px rgba(31,45,34,.28);
  --shadow-lg:0 18px 40px -12px rgba(31,45,34,.45);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --page-a:#121A14; --page-b:#18221A; --page-stripe:rgba(169,168,131,.045);
  --chrome:#0C120E; --chrome-text:var(--cream); --chrome-muted:#A9A883;
  --surface:#1B261E; --surface-2:#223026;
  --title:var(--cream); --ink:#F1EBD2; --ink-2:#C9C7AE; --ink-3:#8E9884;
  --accent:#B5B793; --on-accent:#121A14; --accent-hover:#C7C9A6;
  --line:rgba(255,246,216,.07); --line-2:rgba(255,246,216,.22); --hover:rgba(255,246,216,.05); --soft:rgba(255,246,216,.08);
  --track:rgba(255,246,216,.1); --bar-a:#6E7457; --bar-b:#D7D9B4;
  --check-bg:transparent; --check-border:#6E7660;
  --value-bg:rgba(181,183,147,.12); --value-ink:#E3DFC4;
  --edit-bg:#121A14; --edit-ring:#6E7660;
  --tile-bg:rgba(255,246,216,.03); --tile-bg-h:rgba(255,246,216,.07); --tile-border:rgba(255,246,216,.2);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 32px -14px rgba(0,0,0,.7);
  --shadow-lg:0 18px 40px -12px rgba(0,0,0,.8);
  --danger:#E08A7C;
  color-scheme:dark;
}
/* Transition douce entre thèmes (activée uniquement pendant le changement) */
.theme-anim,.theme-anim *,.theme-anim *::before,.theme-anim *::after{
  transition:background-color .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease),fill .5s,stroke .5s!important;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:var(--font);font-weight:400;color:var(--ink);
  display:flex;flex-direction:column;min-height:100vh;
  background-color:var(--page-b);
  background-image:
    repeating-linear-gradient(90deg,rgba(255,255,255,0) 0 22px,var(--page-stripe) 22px 44px),
    linear-gradient(180deg,var(--page-a) 0%,var(--page-b) 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer}
svg{flex:none}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase}

/* ===== Header ===== */
.topbar{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:18px clamp(16px,4vw,48px);background:var(--chrome);color:var(--chrome-text);
  box-shadow:0 8px 30px -14px rgba(0,0,0,.5);
}
.brand{display:flex;align-items:center;gap:16px;min-width:0}
.mark{width:30px;height:36px;color:var(--cream);transform:rotate(-8deg)}
.brand-text{min-width:0}
.brand .eyebrow{color:var(--chrome-muted);display:block;margin-bottom:2px}
.topbar h1{margin:0;font-weight:900;font-size:clamp(24px,3vw,34px);line-height:1.05;letter-spacing:-.01em}
.tagline{margin:2px 0 0;font-family:var(--hand);font-size:19px;color:var(--chrome-muted);line-height:1.2}
.actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}

.btn{
  display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:var(--r-btn);
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border:1.5px solid transparent;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s,transform .15s var(--ease);
}
.btn:active{transform:scale(.97)}
.btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-outline{background:transparent;color:var(--cream);border-color:rgba(255,246,216,.7)}
.btn-outline:hover,.btn-outline:not(.theme-btn)[aria-pressed="true"]{background:var(--cream);color:#1F2D22;border-color:var(--cream)}
.btn-cream{background:var(--cream);color:#1F2D22;border-color:var(--cream)}
.btn-cream:hover{background:#fff}
.btn-square{width:38px;padding:0;justify-content:center}
.theme-btn .sun,.theme-btn .moon{transition:transform .5s var(--ease),opacity .3s}
.theme-btn{position:relative;overflow:hidden}
.theme-btn svg{position:absolute;left:50%;top:50%;margin:-8px 0 0 -8px}
:root[data-theme="dark"] .theme-btn .moon,:root:not([data-theme="dark"]) .theme-btn .sun{opacity:0;transform:rotate(-90deg) scale(.4)}

/* ===== Board ===== */
.board-wrap{flex:1;overflow:hidden;display:flex}
.board{
  flex:1;display:flex;align-items:flex-start;gap:22px;overflow-x:auto;overflow-y:hidden;
  padding:28px clamp(16px,4vw,48px) 36px;scroll-behavior:smooth;scroll-padding:0 clamp(16px,4vw,48px);
  overscroll-behavior-x:contain;
}
.board::-webkit-scrollbar{height:10px}
.board::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:10px}

/* ===== Column ===== */
.column{
  flex:0 0 380px;max-height:calc(100vh - 210px);display:flex;flex-direction:column;
  background:var(--surface);border-radius:var(--r-card);box-shadow:var(--shadow);
  transition:box-shadow .25s var(--ease),transform .25s var(--ease);
}
.col-head{padding:20px 20px 14px;cursor:grab;border-bottom:1px solid var(--line);position:relative}
.col-head:active{cursor:grabbing}
.col-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:30px}
.col-top .eyebrow{color:var(--ink-3)}
.col-title{margin:6px 0 12px;font-size:24px;font-weight:900;line-height:1.1;letter-spacing:-.01em;color:var(--title)}
.progress{display:flex;align-items:center;gap:10px}
.bar{flex:1;height:6px;border-radius:6px;background:var(--track);overflow:hidden}
.bar>i{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,var(--bar-a),var(--bar-b));transition:width .6s var(--ease)}
.count{font-size:12px;font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums;min-width:38px;text-align:right}
.col-body{flex:1;overflow-y:auto;padding:14px 14px 4px;scrollbar-width:thin}
.groups{display:flex;flex-direction:column;gap:12px;min-height:30px;padding-bottom:4px}
.col-foot{padding:6px 14px 16px}
.add-group{
  width:100%;display:flex;align-items:center;justify-content:center;gap:8px;height:42px;
  border:1.5px dashed var(--line-2);border-radius:12px;background:transparent;color:var(--ink-2);
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;transition:all .2s var(--ease)
}
.add-group:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.add-group svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}

.add-column{
  flex:0 0 260px;height:120px;border-radius:var(--r-card);border:2px dashed var(--tile-border);
  background:var(--tile-bg);color:var(--title);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  font-weight:800;font-size:15px;transition:all .25s var(--ease)
}
.add-column:hover{background:var(--tile-bg-h);border-color:var(--title)}
.add-column .eyebrow{color:var(--ink-2)}

/* ===== Icon buttons ===== */
.icons{display:flex;gap:2px;opacity:0;transition:opacity .2s}
.column:hover .col-top .icons,.group:hover>.group-head .icons,.col-head:focus-within .icons,.group-head:focus-within .icons{opacity:1}
.btn-icon{
  width:30px;height:30px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--ink-3);
  transition:background .15s,color .15s,transform .2s var(--ease)
}
.btn-icon:hover{background:var(--soft);color:var(--title)}
.btn-icon.danger:hover{background:rgba(161,70,58,.12);color:var(--danger)}
.btn-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-icon.copied{color:var(--title);background:var(--soft)}

/* ===== Group (sous-ensemble) ===== */
.group{background:var(--surface-2);border-radius:var(--r-group);border:1px solid var(--line);transition:box-shadow .2s,background .2s}
.group:hover{box-shadow:0 6px 18px -12px rgba(0,0,0,.35)}
.group-head{display:flex;align-items:flex-start;gap:6px;padding:12px 10px 8px 8px;cursor:grab}
.group-head:active{cursor:grabbing}
.chev{margin-top:1px}
.chev svg{transition:transform .3s var(--ease)}
.group.collapsed .chev svg{transform:rotate(-90deg)}
.group-titles{flex:1;min-width:0}
.group-title{margin:0;font-size:15.5px;font-weight:800;line-height:1.25;color:var(--title);padding-top:5px}
.group-sub{margin:1px 0 0;font-family:var(--hand);font-size:16px;color:var(--ink-2);line-height:1.25}
.group-sub:empty:not(:focus){display:none}
.group:hover .group-sub:empty:not(:focus),.group-head:focus-within .group-sub:empty{display:block}
.pill{
  flex:none;margin-top:4px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;background:var(--soft);color:var(--ink-2);
  font-variant-numeric:tabular-nums;transition:background .3s,color .3s
}
.pill.full{background:var(--accent);color:var(--on-accent)}
.group-body{display:grid;grid-template-rows:1fr;transition:grid-template-rows .35s var(--ease)}
.group.collapsed .group-body{grid-template-rows:0fr}
.group-inner{overflow:hidden;min-height:0}
.items{list-style:none;margin:0;padding:0 8px;min-height:6px}

/* ===== Item : case + nom | valeur ===== */
.item{
  display:flex;align-items:flex-start;gap:10px;padding:7px 6px;border-radius:10px;max-height:400px;
  transition:background .15s,opacity .35s var(--ease),max-height .4s var(--ease),padding .4s var(--ease);
  cursor:grab;position:relative
}
.item:hover{background:var(--hover)}
.check{
  flex:none;width:20px;height:20px;margin-top:2px;border-radius:50%;border:1.8px solid var(--check-border);background:var(--check-bg);
  display:grid;place-items:center;padding:0;transition:all .25s var(--ease);position:relative
}
.check:hover{border-color:var(--accent)}
.check svg{width:12px;height:12px;fill:none;stroke:var(--on-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .3s .08s var(--ease)}
.item.done .check{background:var(--accent);border-color:var(--accent)}
.item.done .check svg{stroke-dashoffset:0}
.check::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--olive);opacity:0;transform:scale(.6)}
.item.pop .check{animation:pop .4s var(--ease)}
.item.pop .check::after{animation:ring .55s var(--ease)}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes ring{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(1.6)}}

.item-main{flex:1;min-width:0;display:grid;grid-template-columns:minmax(64px,38%) 1fr;gap:10px;align-items:start}
.cell{min-width:0;padding-top:2px}
.cell.val{padding:2px 9px 3px;border-radius:8px;background:var(--value-bg);transition:background .3s,opacity .3s}
.cell.val:has(.item-value:empty:not(.editing)){background:transparent}
.item-name,.item-value{
  display:inline;-webkit-box-decoration-break:clone;box-decoration-break:clone;word-break:break-word;line-height:1.45;
  background-image:linear-gradient(var(--ink-3),var(--ink-3));background-repeat:no-repeat;background-position:0 55%;background-size:0 1.5px;
  transition:background-size .35s var(--ease),color .35s
}
.item-name{font-size:14px;font-weight:600;color:var(--ink)}
.item-value{font-size:13.5px;font-weight:400;color:var(--value-ink)}
.item.done .item-name,.item.done .item-value{background-size:100% 1.5px;color:var(--ink-3)}
.item.done .item-value{transition-delay:.12s}
.item.done{opacity:.72}
.item-value:empty:not(.editing)::before{opacity:0;transition:opacity .2s}
.item:hover .item-value:empty::before{opacity:.6}
.item > .btn-icon{width:24px;height:24px;opacity:0;margin:0 -2px 0 0}
.item:hover > .btn-icon,.item:focus-within > .btn-icon{opacity:1}
.hide-done .item.done{max-height:0;opacity:0;padding-top:0;padding-bottom:0;overflow:hidden;transition-delay:.5s,.5s,.5s,.5s,.5s}

.add-item{display:flex;align-items:center;gap:10px;padding:6px 14px 12px}
.add-item .ghost-check{flex:none;width:20px;height:20px;border-radius:50%;border:1.8px dashed var(--check-border);display:grid;place-items:center;color:var(--ink-3)}
.add-item .ghost-check svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round}
.add-fields{flex:1;min-width:0;display:grid;grid-template-columns:minmax(64px,38%) 1fr;gap:10px}
.add-item input{min-width:0;width:100%;border:0;background:transparent;font:inherit;font-size:14px;color:var(--ink);padding:6px 0;outline:none;border-bottom:1px solid transparent;transition:border-color .2s}
.add-item input[data-add-value]{padding-left:9px;padding-right:9px;font-size:13.5px}
.add-item input::placeholder{color:var(--ink-3)}
.add-item input:focus{border-bottom-color:var(--check-border)}
.add-item:not(:focus-within) input[data-add-value]{opacity:0}
.add-item:hover input[data-add-value]{opacity:1}

/* ===== Editable ===== */
.editable{outline:none;border-radius:6px;transition:box-shadow .2s,background .2s;cursor:text}
.col-head .editable,.group-head .editable,.item .editable{cursor:inherit}
.editable.editing{cursor:text;background-color:var(--edit-bg);box-shadow:0 0 0 2px var(--edit-ring);padding-left:4px;padding-right:4px;margin-left:-4px;margin-right:-4px;color:var(--ink)}
.topbar .editable.editing{background-color:rgba(255,246,216,.08);box-shadow:0 0 0 2px rgba(255,246,216,.4);color:var(--cream)}
.editable:empty::before{content:attr(data-placeholder);color:var(--ink-3);opacity:.7;pointer-events:none}
.topbar .editable:empty::before{color:var(--chrome-muted)}
.editable:hover:not(.editing){text-decoration:underline dotted rgba(127,138,127,.6);text-underline-offset:4px}

/* ===== Drag & drop ===== */
.sortable-ghost{opacity:.35}
.group.sortable-ghost,.column.sortable-ghost{opacity:1;background:transparent;border:2px dashed var(--line-2);box-shadow:none}
.group.sortable-ghost>*,.column.sortable-ghost>*{visibility:hidden}
.item.sortable-ghost{background:var(--soft);opacity:.5}
.sortable-drag,.sortable-fallback{opacity:1!important;box-shadow:var(--shadow-lg)!important;transform:rotate(1.5deg);background:var(--surface)}
.item.sortable-fallback{background:var(--surface);border-radius:10px}
body.dragging,body.dragging *{cursor:grabbing!important;user-select:none}

/* ===== Enter / leave ===== */
.enter{animation:enter .45s var(--ease) both}
@keyframes enter{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.leaving{animation:leave .25s var(--ease) both;pointer-events:none}
@keyframes leave{to{opacity:0;transform:scale(.96)}}

/* ===== Footer ===== */
.footer{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;padding:14px 20px;background:var(--chrome);color:var(--chrome-muted);font-size:12px}
.footer .hand{font-family:var(--hand);font-size:17px;color:var(--cream)}

/* ===== Toast ===== */
.toast{
  position:fixed;left:50%;bottom:24px;z-index:50;display:flex;align-items:center;gap:16px;padding:12px 14px 12px 20px;
  background:#1F2D22;color:var(--cream);border:1px solid rgba(255,246,216,.12);border-radius:12px;box-shadow:0 18px 40px -12px rgba(0,0,0,.5);font-size:14px;
  transform:translate(-50%,140%);opacity:0;transition:transform .4s var(--ease),opacity .3s
}
.toast.show{transform:translate(-50%,0);opacity:1}
.toast button{background:transparent;color:var(--cream);border:1.5px solid rgba(255,246,216,.7);border-radius:var(--r-btn);padding:6px 12px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.toast button:hover{background:var(--cream);color:#1F2D22}
.toast button[hidden]{display:none}

/* ===== Responsive ===== */
@media (hover:none){
  .icons,.item > .btn-icon{opacity:1}
  .group-sub:empty:not(:focus){display:block}
  .add-item:not(:focus-within) input[data-add-value]{opacity:1}
  .item-value:empty:not(.editing)::before{opacity:.45}
}
@media (min-width:769px) and (max-width:900px){
  .topbar{flex-direction:column;align-items:stretch;gap:12px;padding:14px 16px}
  .actions{justify-content:flex-start}
  .conn{order:9}
}

/* ===== Connexion ===== */
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
body.booting .app-only,body.booting .login,body.locked .app-only{display:none!important}
.login{
  position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px;overflow:auto;
  background-color:var(--page-b);
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,0) 0 22px,var(--page-stripe) 22px 44px),linear-gradient(180deg,var(--page-a),var(--page-b));
}
.login[hidden]{display:none}
.login-card{
  width:min(420px,100%);background:var(--surface);color:var(--ink);border-radius:var(--r-card);box-shadow:var(--shadow-lg);
  padding:40px 36px 30px;display:flex;flex-direction:column;align-items:stretch;text-align:center;animation:enter .6s var(--ease) both
}
.login-mark{width:34px;height:40px;color:var(--title);margin:0 auto 18px;transform:rotate(-8deg)}
.login-card>.eyebrow{color:var(--ink-3)}
.login-title{margin:8px 0 2px;font-size:32px;font-weight:900;letter-spacing:-.01em;color:var(--title);line-height:1.05}
.login-hand{margin:0 0 28px;font-family:var(--hand);font-size:21px;color:var(--ink-2)}
.field{display:flex;flex-direction:column;gap:8px;text-align:left}
.field .eyebrow{color:var(--ink-2)}
.pw{position:relative;display:block}
.pw input{
  width:100%;height:50px;padding:0 48px 0 16px;border-radius:12px;border:1.5px solid var(--line-2);background:var(--surface-2);
  font:inherit;font-size:16px;font-weight:500;color:var(--ink);letter-spacing:.02em;outline:none;transition:border-color .2s,box-shadow .2s
}
.pw input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--soft)}
.pw-toggle{position:absolute;right:6px;top:7px;width:36px;height:36px;border:0;border-radius:8px;background:transparent;color:var(--ink-3);display:grid;place-items:center}
.pw-toggle:hover{color:var(--title);background:var(--soft)}
.pw-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.login-error{min-height:20px;margin:10px 0 6px;font-size:13px;font-weight:500;color:var(--danger)}
.login.shake .login-card{animation:shake .45s var(--ease)}
@keyframes shake{20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
.btn-dark{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn-dark:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-block{width:100%;height:48px;justify-content:center;font-size:13px}
.btn[disabled]{opacity:.6;cursor:progress}
.login-note{margin:16px 0 0;font-size:12px;color:var(--ink-3)}

/* ===== Statut de connexion ===== */
.conn{
  display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;margin-right:4px;border-radius:20px;border:1px solid rgba(255,246,216,.18);
  background:rgba(255,246,216,.06);color:var(--chrome-muted);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;transition:all .3s var(--ease)
}
.conn i{width:8px;height:8px;border-radius:50%;background:#C9A64A;box-shadow:0 0 0 0 rgba(201,166,74,.6);transition:background .3s}
.conn[data-state="online"] i{background:#8FBF7A;animation:live 2.4s ease-out infinite}
.conn[data-state="online"]{color:var(--cream)}
.conn[data-state="offline"] i{background:#D9735F}
.conn[data-state="offline"]{border-color:rgba(217,115,95,.5);cursor:pointer}
.conn[data-state="offline"]:hover{background:rgba(217,115,95,.15)}
.conn[data-state="connecting"] i,.conn[data-state="syncing"] i{animation:blink 1s ease-in-out infinite}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(143,191,122,.55)}70%{box-shadow:0 0 0 7px rgba(143,191,122,0)}100%{box-shadow:0 0 0 0 rgba(143,191,122,0)}}
@keyframes blink{50%{opacity:.35}}
.item.remote-flash{animation:flash 1.2s var(--ease)}
@keyframes flash{0%{background:rgba(169,168,131,.35)}100%{background:transparent}}
@media (max-width:640px){ .login-card{padding:32px 22px 24px} }

/* ===== Éléments réservés au mobile (cachés sur ordinateur) ===== */
.tabs,.fab,.more-btn,.item-more,.group-more{display:none}
.sheet-wrap[hidden]{display:none}

/* ===== Feuille du bas ===== */
.sheet-wrap{position:fixed;inset:0;z-index:200}
.sheet-backdrop{position:absolute;inset:0;background:rgba(12,18,14,.45);opacity:0;transition:opacity .28s var(--ease)}
/* le badge « Powered by Netlify » (iframe fixe en bas à droite, ~61 px) ne doit jamais couvrir les boutons des feuilles */
.sheet{
  position:absolute;left:0;right:0;bottom:var(--kb,0px);max-height:min(82dvh,640px);overflow:auto;overscroll-behavior:contain;
  background:var(--surface);color:var(--ink);border-radius:22px 22px 0 0;box-shadow:0 -10px 40px -10px rgba(0,0,0,.35);
  padding:6px 18px calc(72px + env(safe-area-inset-bottom));transform:translateY(105%);transition:transform .32s var(--ease)
}
.sheet-wrap.open .sheet-backdrop{opacity:1}
.sheet-wrap.open .sheet{transform:none}
.sheet-grip{width:40px;height:5px;border-radius:5px;background:var(--line-2);margin:4px auto 10px}
.sheet h2{margin:2px 0 4px;font-size:18px;font-weight:800;color:var(--title);line-height:1.25;word-break:break-word}
.sheet .sheet-sub{margin:0 0 12px;font-size:13px;color:var(--ink-3)}
.sheet-list{display:flex;flex-direction:column;margin:6px -6px 0}
.sheet-item{
  display:flex;align-items:center;gap:14px;min-height:52px;padding:0 12px;border:0;border-radius:12px;background:transparent;
  color:var(--ink);font:inherit;font-size:16px;font-weight:500;text-align:left;width:100%
}
.sheet-item:active,.sheet-item:hover{background:var(--hover)}
.sheet-item svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--ink-2)}
.sheet-item.danger{color:var(--danger)} .sheet-item.danger svg{color:var(--danger)}
.sheet-item[aria-current="true"]{opacity:.45;pointer-events:none}
.sheet-sep{height:1px;background:var(--line);margin:6px 12px}
.sheet-group-label{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);padding:12px 12px 4px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:12px;background:var(--soft);margin:6px 0 14px}
.seg button{height:38px;border:0;border-radius:9px;background:transparent;color:var(--ink-2);font:inherit;font-size:14px;font-weight:700}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--title);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.form{display:flex;flex-direction:column;gap:12px}
.form label{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.form input,.form select{
  height:48px;padding:0 14px;border-radius:12px;border:1.5px solid var(--line-2);background:var(--surface-2);color:var(--ink);
  font:inherit;font-size:16px;font-weight:500;letter-spacing:0;text-transform:none;outline:none;width:100%
}
.form input:focus,.form select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--soft)}
.form .row{display:flex;gap:10px}
.form .btn{height:48px;font-size:13px;justify-content:center;flex:1}
.form .btn-ghost{background:transparent;color:var(--ink-2);border-color:var(--line-2)}
.form-note{min-height:18px;margin:0;font-size:13px;color:var(--ink-3)}

/* ===== Mobile (≤ 768 px) ===== */
@media (max-width:768px){
  html,body{overflow:hidden;overscroll-behavior:none;height:100%}
  body{height:100dvh;min-height:0;background-attachment:scroll}
  body:not(.locked):not(.booting){background:var(--surface)}

  /* En-tête compact : une seule ligne fine */
  .topbar{
    position:relative;flex-direction:row;align-items:center;gap:10px;flex:none;
    padding:calc(8px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) 8px calc(14px + env(safe-area-inset-left));
    box-shadow:none
  }
  .brand{gap:10px;flex:1;min-width:0}
  .mark{width:18px;height:22px}
  .brand .eyebrow,.tagline{display:none}
  .topbar h1{font-size:19px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar h1.editing{white-space:normal;font-size:16px;padding:4px 6px}
  .actions{flex-wrap:nowrap;gap:4px}
  .actions .btn:not(.more-btn){display:none}
  .more-btn{display:inline-flex;width:40px;height:40px;border-color:transparent}
  .more-btn svg{fill:currentColor;stroke:none;width:22px;height:22px}
  .conn{height:auto;padding:6px;margin:0;border:0;background:transparent;gap:0}
  .conn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .conn i{width:9px;height:9px}
  .conn[data-state="offline"]{gap:6px;padding:4px 10px;border:1px solid rgba(217,115,95,.5);border-radius:20px}
  .conn[data-state="offline"] span{position:static;width:auto;height:auto;clip:auto;font-size:10px}

  /* Onglets de colonnes */
  .tabs{
    display:flex;gap:6px;flex:none;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
    padding:8px calc(10px + env(safe-area-inset-right)) 8px calc(10px + env(safe-area-inset-left));
    background:var(--surface);border-bottom:1px solid var(--line);scroll-behavior:smooth
  }
  .tabs::-webkit-scrollbar{display:none}
  .tab{
    flex:none;display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:18px;border:0;
    background:var(--soft);color:var(--ink-2);font:inherit;font-size:14px;font-weight:700;white-space:nowrap;
    transition:background .25s var(--ease),color .25s var(--ease);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:pan-x
  }
  .tab-name{max-width:46vw;overflow:hidden;text-overflow:ellipsis}
  .tab-count{font-size:11.5px;font-weight:600;opacity:.65;font-variant-numeric:tabular-nums}
  .tab.active{background:#1F2D22;color:var(--cream)}
  :root[data-theme="dark"] .tab.active{background:#3B5440;color:var(--cream)}
  .tab.active .tab-count{opacity:.8}
  .tab-add{width:36px;padding:0;justify-content:center;background:transparent;border:1.5px dashed var(--line-2)}
  .tab-add svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}

  /* Une colonne plein écran, glissement horizontal natif */
  .board-wrap{flex:1;min-height:0}
  .board{
    gap:0;padding:0;height:100%;align-items:stretch;scroll-snap-type:x mandatory;scroll-padding:0;
    overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch
  }
  .board::-webkit-scrollbar{display:none}
  body.dragging .board{overflow:hidden}
  .add-column,.footer{display:none!important}
  .column{
    flex:0 0 100%;width:100%;max-height:none;height:100%;border-radius:0;box-shadow:none;background:transparent;
    scroll-snap-align:start;scroll-snap-stop:always
  }
  .col-head,.col-foot{display:none}
  .col-body{
    padding:6px calc(6px + env(safe-area-inset-right)) calc(150px + env(safe-area-inset-bottom)) calc(6px + env(safe-area-inset-left));
    overscroll-behavior-y:contain
  }
  .groups{gap:4px}
  .groups:empty::before{content:"Aucun sous-ensemble. Touchez + pour en ajouter un.";display:block;padding:48px 24px;text-align:center;color:var(--ink-3);font-size:15px}

  /* Sous-ensembles légers, en-tête collant */
  .group{background:transparent;border:0;border-radius:0}
  .group:hover{box-shadow:none}
  .group-head{
    position:sticky;top:-6px;z-index:3;align-items:center;gap:2px;padding:10px 4px 6px 2px;
    background:var(--surface);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none
  }
  .group-head .chev{width:36px;height:36px;margin:0}
  .group-title{font-size:16px;padding-top:0}
  .group-sub{font-size:15px}
  .group-sub:empty:not(.editing){display:none!important}
  .pill{margin-top:0;background:transparent;padding:3px 6px}
  .pill.full{background:var(--accent)}
  .group-head .icons{display:none}
  .group-more{display:grid;width:40px;height:40px}
  .items{padding:0}
  .add-item{display:none}

  /* Éléments : grandes cases, une ligne aérée */
  .item{
    align-items:center;gap:4px;padding:2px 0 2px 2px;border-radius:12px;min-height:48px;
    -webkit-user-select:none;user-select:none;-webkit-touch-callout:none
  }
  .item:hover{background:transparent}
  .item:active{background:var(--hover)}
  .check{width:26px;height:26px;margin:0 9px}
  .check::before{content:"";position:absolute;inset:-10px}
  .check svg{width:14px;height:14px}
  .item-main{grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
  .cell{padding:0}
  .item-name{font-size:16px;font-weight:500}
  .cell.val{max-width:min(48vw,240px);justify-self:end;text-align:right;padding:3px 10px;border-radius:10px}
  .cell.val:has(.item-value:empty:not(.editing)){display:none}
  .item-value{font-size:14.5px}
  .item-value:empty:not(.editing)::before{display:none}
  .item > .btn-icon[data-action="del-item"]{display:none}
  .item-more{display:grid;width:40px;height:44px;opacity:1!important;margin:0}
  .item-more svg{fill:currentColor;stroke:none}
  .editable.editing{-webkit-user-select:text;user-select:text;font-size:16px}
  .hide-done .item.done{min-height:0}

  /* Bouton flottant, au-dessus du badge Netlify */
  .fab{
    display:grid;place-items:center;position:fixed;z-index:60;width:56px;height:56px;border-radius:50%;border:0;
    right:calc(16px + env(safe-area-inset-right));bottom:calc(76px + env(safe-area-inset-bottom));
    background:#1F2D22;color:var(--cream);box-shadow:0 10px 26px -8px rgba(0,0,0,.55);transition:transform .25s var(--ease),opacity .2s
  }
  :root[data-theme="dark"] .fab{background:var(--sage);color:#121A14}
  .fab svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
  .fab:active{transform:scale(.92)}
  body.kb-open .fab,body.dragging .fab{opacity:0;pointer-events:none;transform:scale(.8)}
  .toast{bottom:calc(140px + env(safe-area-inset-bottom));max-width:calc(100vw - 24px)}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.sheet [hidden]{display:none!important}

/* ===== Priorité des éléments (bordure de case façon TickTick) ===== */
:root{--prio-red:#D93F3F;--prio-orange:#E8891C;--prio-blue:#4772FA}
[data-theme="dark"]{--prio-red:#FF6B6B;--prio-orange:#FFA94D;--prio-blue:#6F95FF}
.item.prio-red .check{border-color:var(--prio-red);border-width:2px;background:color-mix(in srgb,var(--prio-red) 10%,transparent)}
.item.prio-orange .check{border-color:var(--prio-orange);border-width:2px;background:color-mix(in srgb,var(--prio-orange) 10%,transparent)}
.item.prio-blue .check{border-color:var(--prio-blue);border-width:2px;background:color-mix(in srgb,var(--prio-blue) 10%,transparent)}
.item.prio-blue.done .check{background:var(--prio-blue);border-color:var(--prio-blue)}
.item.prio-blue .check:hover{border-color:var(--prio-blue)} .item.prio-blue .prio-btn{color:var(--prio-blue)}
.prio-opt.p-blue i{border-color:var(--prio-blue);background:color-mix(in srgb,var(--prio-blue) 12%,transparent)}
.item.prio-red.done .check{background:var(--prio-red);border-color:var(--prio-red)}
.item.prio-orange.done .check{background:var(--prio-orange);border-color:var(--prio-orange)}
.item.prio-red .check:hover{border-color:var(--prio-red)} .item.prio-orange .check:hover{border-color:var(--prio-orange)}
.prio-btn svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.item.prio-red .prio-btn{color:var(--prio-red)} .item.prio-orange .prio-btn{color:var(--prio-orange)}
body.no-prio .prio-btn,body.no-prio .prio-seg,body.no-prio .sheet-prio{display:none!important}
.seg.prio-seg{grid-template-columns:repeat(auto-fit,minmax(0,1fr));margin:6px 0 4px}
.seg.prio-seg .prio-opt{gap:6px;font-size:13.5px;padding:0 4px}
.prio-seg .prio-opt{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600}
.prio-opt i{width:16px;height:16px;border-radius:50%;border:2px solid var(--check-border)}
.prio-opt.p-red i{border-color:var(--prio-red);background:color-mix(in srgb,var(--prio-red) 12%,transparent)}
.prio-opt.p-orange i{border-color:var(--prio-orange);background:color-mix(in srgb,var(--prio-orange) 12%,transparent)}
.sheet-prio{margin:4px 0 10px}
.sheet-prio .eyebrow{color:var(--ink-3);font-size:10px}
.form .label{display:block;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.form .label .prio-seg{text-transform:none;letter-spacing:0}
/* Navigation entre tableaux (en-tête ordinateur) */
.brand .board-nav{display:flex;gap:8px;align-items:center;margin-bottom:2px}
.brand .eyebrow[hidden],.brand .board-nav[hidden]{display:none}
.board-nav a{color:var(--chrome-muted);text-decoration:none;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.board-nav a:hover{color:var(--cream)}
.board-nav a[aria-current="page"]{color:var(--cream);border-bottom-color:currentColor}
.board-nav span{color:var(--chrome-muted);opacity:.6}
a.sheet-item{text-decoration:none;color:inherit}
@media (max-width:768px){ .item > .prio-btn{display:none} .brand .board-nav{display:none} }

/* ===== Pages : menu « / », retour au menu, page introuvable ===== */
.home,.notfound{display:none}
body.home-mode .topbar,body.home-mode .tabs,body.home-mode .board-wrap,body.home-mode .footer,body.home-mode .fab,
body.not-found .topbar,body.not-found .tabs,body.not-found .board-wrap,body.not-found .footer,body.not-found .fab{display:none!important}
body.home-mode .home{display:block}
body.not-found .notfound{display:grid}
body.home-mode{background-attachment:fixed}

.home-link{display:flex;align-items:center;gap:2px;color:inherit;text-decoration:none;border-radius:10px;flex:none}
.home-link .back-chev{display:none;width:18px;height:18px;fill:none;stroke:var(--chrome-muted);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.home-link:hover .mark{transform:rotate(-8deg) translateX(-2px)}
.home-link .mark{transition:transform .3s var(--ease)}
.brand .board-nav .back-link{display:inline-flex;align-items:center;gap:4px}
.back-link svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

.home{
  width:min(560px,100%);margin:0 auto;box-sizing:border-box;
  padding:calc(22px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) calc(110px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
  animation:homeIn .5s var(--ease) both
}
@keyframes homeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.home-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:34px}
.home-mark{width:26px;height:32px;color:var(--title);transform:rotate(-8deg)}
.home-tools{display:flex;gap:6px}
.icon-btn{position:relative;width:40px;height:40px;border-radius:50%;border:0;background:transparent;color:var(--title);display:grid;place-items:center;cursor:pointer;transition:background .2s}
.icon-btn:hover{background:var(--soft)}
.icon-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;grid-area:1/1;transition:transform .5s var(--ease),opacity .3s}
:root[data-theme="dark"] #homeTheme .moon,:root:not([data-theme="dark"]) #homeTheme .sun{opacity:0;transform:rotate(-90deg) scale(.4)}
.home-intro{margin:0 4px 22px}
.home-intro .eyebrow{color:var(--ink-2)}
.home-intro h1{margin:6px 0 2px;font-size:clamp(34px,8vw,44px);font-weight:800;letter-spacing:-.02em;color:var(--title);line-height:1.05}
.home-intro .hand{margin:0;font-family:var(--hand);font-size:19px;color:var(--ink-2)}
.page-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.page-card{
  display:flex;align-items:center;gap:14px;padding:14px 14px 14px 14px;border-radius:18px;text-decoration:none;color:var(--ink);
  background:var(--surface);box-shadow:var(--shadow);transition:transform .25s var(--ease),box-shadow .25s var(--ease)
}
.page-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.page-card:active{transform:scale(.99)}
.page-mark{flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--accent);color:var(--on-accent);font-weight:800;font-size:18px}
.page-list li:nth-child(3n+2) .page-mark{background:var(--olive);color:#1F2D22}
.page-list li:nth-child(3n+3) .page-mark{background:var(--surface-2);color:var(--title);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.page-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.page-name{font-weight:700;font-size:17px;color:var(--title);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-meta{font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-go{flex:none;width:18px;height:18px;fill:none;stroke:var(--ink-3);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.page-card:hover .page-go{transform:translateX(3px)}
.home-empty{padding:18px;text-align:center;color:var(--ink-3)}
.new-page{
  margin:14px auto 0;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:52px;border-radius:18px;
  border:1.5px dashed var(--tile-border);background:var(--tile-bg);color:var(--title);font:inherit;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;
  transition:background .2s,border-color .2s
}
.new-page:hover{background:var(--tile-bg-h)}
.new-page svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.form-note b{color:var(--title);font-weight:700}

.notfound{min-height:60vh;place-items:center;padding:24px}
.nf-card{max-width:380px;text-align:center;background:var(--surface);border-radius:22px;padding:30px 26px;box-shadow:var(--shadow)}
.nf-card .eyebrow{color:var(--ink-3)}
.nf-card h2{margin:6px 0 8px;font-size:26px;font-weight:800;color:var(--title)}
.nf-card p{margin:0 0 20px;color:var(--ink-2)}
.nf-card .btn{text-decoration:none;display:inline-flex}

@media (max-width:768px){
  body.home-mode,html:has(body.home-mode){overflow:auto;height:auto}
  body.home-mode:not(.locked):not(.booting){min-height:100dvh;background:var(--surface-2)}
  body.home-mode .page-card{box-shadow:0 1px 2px rgba(31,45,34,.06)}
  .home-link .back-chev{display:block}
  body.not-found .notfound{flex:1;min-height:100dvh}
}

/* ===== Contraste colonnes / fond (clair et sombre) ===== */
:root{--col-bg:#FFFEFA;--col-border:rgba(31,45,34,.13);--group-bg:#F6F2EA;--mob-bar:#E8EADB;
  --col-shadow:0 1px 2px rgba(31,45,34,.10),0 18px 40px -16px rgba(31,45,34,.45)}
:root[data-theme="dark"]{--page-a:#0D130F;--page-b:#121A14;--col-bg:#223127;--col-border:rgba(255,246,216,.10);--group-bg:#2A3B2F;--mob-bar:#0F1612;
  --col-shadow:0 1px 2px rgba(0,0,0,.4),0 18px 44px -14px rgba(0,0,0,.85)}
.column{background:var(--col-bg);border:1px solid var(--col-border);box-shadow:var(--col-shadow)}
.group{background:var(--group-bg);border-color:var(--col-border)}
@media (max-width:768px){
  body:not(.locked):not(.booting):not(.home-mode){background:var(--mob-bar)}
  .tabs{background:var(--mob-bar);border-bottom:0}
  .board-wrap,.board{background:var(--mob-bar)}
  .column{background:var(--col-bg);border:0;border-radius:18px 18px 0 0;box-shadow:0 -1px 0 var(--col-border),0 -8px 22px -14px rgba(0,0,0,.35)}
  .group{background:transparent}
  .group-head{background:var(--col-bg)}
}