/* Layout : fond blanc, textes quasi noirs pour la lecture, bleu marine d'Alvéoles pour la marque et tout ce qui se clique. La couleur vive n'apparaît que sur les étiquettes des tâches. Un écran à la fois ; trois colonnes d'horizon qui s'empilent sur téléphone. */
:root{
  --paper:#FFFFFF; --surface:#FFFFFF; --soft:#F2F4F8; --line:#D9DEE6; --muted:#5B6270; --ink:#14171C; --brand:#002D64;
  --t-rouge:#D0433E; --t-orange:#D9731F; --t-jaune:#C9A40C; --t-vert:#2A9356; --t-bleu:#2E69D6; --t-violet:#8347CC;
  --scrim:rgb(0 20 50 / .4);
  --logo-light:block; --logo-dark:none;
  --x-reg:#3B5BA9; --x-val:#2E9BD9;
  --f-body:"Lexend", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --r:10px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#00142E; --surface:#061D3D; --soft:#0B2548; --line:#1E3A63; --muted:#A3B0C2; --ink:#F2F5FA; --brand:#9DBDEB;
    --t-rouge:#F07C76; --t-orange:#F2A35E; --t-jaune:#E8C84A; --t-vert:#63CB8E; --t-bleu:#83A9F4; --t-violet:#B690EE;
    --scrim:rgb(0 8 20 / .6);
    --logo-light:none; --logo-dark:block;
    --x-reg:#4A66B8; --x-val:#2A9FD6;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#00142E; --surface:#061D3D; --soft:#0B2548; --line:#1E3A63; --muted:#A3B0C2; --ink:#F2F5FA; --brand:#9DBDEB;
  --t-rouge:#F07C76; --t-orange:#F2A35E; --t-jaune:#E8C84A; --t-vert:#63CB8E; --t-bleu:#83A9F4; --t-violet:#B690EE;
  --scrim:rgb(0 8 20 / .6);
  --logo-light:none; --logo-dark:block;
  --x-reg:#4A66B8; --x-val:#2A9FD6;
}

*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--paper); color:var(--ink); font:16px/1.55 var(--f-body); font-weight:400; padding:0 clamp(16px,3vw,32px)}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--brand); outline-offset:2px}
h1,h2,h3{text-wrap:balance; margin:0; line-height:1.15; font-weight:600}
.wrap{max-width:1180px; margin:0 auto; padding-block:0 48px}
.label{font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:var(--muted)}

/* En-tête */
.top{display:flex; align-items:center; gap:14px 28px; flex-wrap:wrap; padding-block:16px; border-bottom:2px solid var(--brand); position:sticky; top:env(safe-area-inset-top,0px); background:var(--paper); z-index:5}
.brand{display:flex; align-items:center}
.logo{height:44px; width:auto; max-width:100%}
.logo-light{display:var(--logo-light)}
.logo-dark{display:var(--logo-dark)}
.tabs{display:flex; gap:2px; flex-wrap:wrap}
.tab{border:0; background:transparent; padding:8px 14px; border-radius:999px; font-weight:500; color:var(--muted)}
.tab:hover{color:var(--ink); background:var(--soft)}
.tab[aria-current="page"]{background:var(--brand); color:var(--paper)}
.top-end{margin-left:auto; display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.who-me{display:flex; align-items:center; gap:8px; font-size:.9rem}
.who-me b{font-weight:600}
.who-me select{border:1px solid var(--line); background:var(--surface); border-radius:8px; padding:5px 8px; font-weight:500}

.btn{border:1px solid var(--brand); background:transparent; color:var(--brand); border-radius:999px; padding:8px 16px; font-weight:500; line-height:1.2}
.btn:hover{background:var(--soft)}
.btn-ink{background:var(--brand); color:var(--paper)}
.btn-ink:hover{background:var(--brand); opacity:.85}
.btn-sm{padding:5px 12px; font-size:.86rem}
.btn-ghost{border-color:transparent; color:var(--muted)}
.btn-ghost:hover{color:var(--ink); background:transparent; border-color:var(--line)}
.btn:disabled{opacity:.4; cursor:not-allowed}

.banner{display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; border:1px solid var(--brand); border-radius:var(--r); padding:12px 16px; margin-top:18px; font-size:.93rem}
.banner p{margin:0; max-width:80ch}
.banner-demo{border-style:dashed}

/* Cellule */
.cellhead{display:grid; gap:10px; padding-block:24px 6px}
.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:6px 14px; font-weight:500; font-size:.9rem; display:inline-flex; gap:8px; align-items:center}
.chip:hover{border-color:var(--brand)}
.chip .n{font-family:var(--f-mono); font-size:.78rem; color:var(--muted)}
.chip[aria-pressed="true"]{background:var(--brand); color:var(--paper); border-color:var(--brand)}
.chip[aria-pressed="true"] .n{color:var(--paper); opacity:.7}
.chip-add{border-style:dashed}
.cellhead h1{color:var(--brand); font-size:clamp(1.6rem,3.6vw,2.3rem); text-transform:uppercase; letter-spacing:.08em; margin-top:12px}
.raison{margin:0; color:var(--muted); max-width:65ch}
.raison b{color:var(--ink); font-weight:600}
.members{display:flex; gap:10px; align-items:center; flex-wrap:wrap; color:var(--muted); font-size:.9rem}

.av{width:30px; height:30px; flex:none; border-radius:50%; display:inline-grid; place-items:center; font-size:.7rem; font-weight:600; background:var(--soft); color:var(--ink); border:1.5px solid var(--brand); object-fit:cover}
.avs{display:flex; align-items:center}
.avs .av+.av{margin-left:-8px}

.capture{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-block:18px 6px}
.capture input{flex:1 1 320px; border:1.5px dashed var(--brand); background:var(--surface); border-radius:var(--r); padding:14px 16px; font-size:1.02rem}
.capture input:focus{border-style:solid; outline:none}
.capture small{color:var(--muted)}
.hint{border-left:3px solid var(--brand); padding:4px 0 4px 14px; font-size:.93rem; margin-block:10px; max-width:75ch}
.tagbar{display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:8px}

.board{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:16px; align-items:start}
.col{border-radius:14px; padding:14px; display:grid; gap:10px; background:var(--soft); border:2px solid transparent}
.col-now{background:var(--surface); border-color:var(--brand)}
.col-head{display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding:0 2px 4px}
.col-head h2{font-size:.95rem; text-transform:uppercase; letter-spacing:.12em}
.col-head p{margin:2px 0 0; color:var(--muted); font-size:.84rem}
.col-head .count{font-family:var(--f-mono); color:var(--muted); font-size:.85rem; font-variant-numeric:tabular-nums}
.empty{color:var(--muted); font-size:.9rem; padding:14px 6px; text-align:center; margin:0}

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:13px 14px; display:grid; gap:8px; cursor:pointer}
.card:hover{border-color:var(--brand)}
.card h3{font-size:1rem; font-weight:500; line-height:1.4}
.card-top{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.card-foot{display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:32px}
.nobody{color:var(--muted); font-size:.85rem; font-style:italic}
.waitfor{margin:0; font-size:.87rem; color:var(--muted)}
.pill{font-size:.68rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:3px 9px; border-radius:999px; border:1px solid var(--brand); white-space:nowrap}
.s-todo{border-color:var(--line); color:var(--muted)}
.s-doing{background:var(--brand); color:var(--paper)}
.s-waiting{border-style:dashed}
.s-done{border-color:var(--line); color:var(--muted); text-decoration:line-through}
.eclair{border-style:dotted; font-weight:500; text-transform:none; letter-spacing:0; font-size:.78rem}
.tag{display:inline-flex; align-items:center; gap:6px; font-size:.8rem; font-weight:500; padding:2px 10px 2px 8px; border-radius:999px; background:color-mix(in srgb, var(--c) 14%, transparent); color:var(--brand); border:1px solid color-mix(in srgb, var(--c) 45%, transparent)}
.tag::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--c)}
button.tag{cursor:pointer}
button.tag[aria-pressed="true"]{background:var(--c); color:var(--paper); border-color:var(--c)}
button.tag[aria-pressed="true"]::before{background:var(--paper)}
.c-rouge{--c:var(--t-rouge)} .c-orange{--c:var(--t-orange)} .c-jaune{--c:var(--t-jaune)} .c-vert{--c:var(--t-vert)} .c-bleu{--c:var(--t-bleu)} .c-violet{--c:var(--t-violet)}

.donebox{margin-top:20px; border-top:1px solid var(--line); padding-top:14px}
.donebox summary{cursor:pointer; font-weight:500; color:var(--muted)}
.donebox ul{list-style:none; padding:0; margin:10px 0 0; display:grid; gap:6px}
.donebox li{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.donebox li span{text-decoration:line-through; color:var(--muted)}

/* Formulaires en ligne */
.inline-form{display:grid; gap:10px; border:1.5px dashed var(--brand); border-radius:14px; padding:18px; max-width:620px; margin-top:12px}
.inline-form h2{font-size:1.05rem; text-transform:uppercase; letter-spacing:.1em}
.inline-form p{margin:0; color:var(--muted); font-size:.92rem}
.inline-form input, .inline-form textarea{width:100%; border:1px solid var(--line); background:var(--surface); border-radius:8px; padding:10px 12px}
.inline-form textarea{min-height:70px; resize:vertical}
.row{display:flex; gap:8px; flex-wrap:wrap; align-items:center}

/* Fil */
.pagehead{padding-block:28px 10px; display:grid; gap:10px}
.pagehead h1{color:var(--brand); font-size:clamp(1.6rem,3.6vw,2.3rem); text-transform:uppercase; letter-spacing:.08em}
.pagehead p{margin:0; color:var(--muted); max-width:65ch}
.feed{list-style:none; padding:0; margin:6px 0 0; max-width:800px}
.day{font-family:var(--f-mono); font-size:.76rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); padding:20px 0 6px; border-bottom:2px solid var(--brand)}
.entry{display:grid; grid-template-columns:50px 34px 1fr; gap:10px; align-items:start; padding:10px 0; border-bottom:1px solid var(--line)}
.entry time{font-family:var(--f-mono); font-size:.8rem; color:var(--muted); padding-top:5px; font-variant-numeric:tabular-nums}
.entry p{margin:0; padding-top:3px}
.entry b{font-weight:600}
.entry .why{display:block; color:var(--muted); font-style:italic; font-size:.92rem}
.entry .ctag{font-size:.74rem; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:1px 8px; margin-left:6px; white-space:nowrap}
.linklike{border:0; background:none; padding:0; color:inherit; text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px; text-align:left}
.linklike:hover{text-decoration-color:var(--brand)}

/* Qui sait quoi */
.domains{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:16px; margin-top:12px}
.domain{border:1px solid var(--brand); border-radius:14px; padding:18px; display:grid; gap:12px; align-content:start; background:var(--surface)}
.domain h2{font-size:1.1rem; text-transform:uppercase; letter-spacing:.08em}
.domain > p{margin:0; color:var(--muted); font-size:.92rem}
.people{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.person{display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center}
.person .nm b{display:block; font-weight:500}
.person .nm small{color:var(--muted); font-size:.8rem}
.lvl{font-weight:600; text-transform:uppercase; letter-spacing:.08em; font-size:.68rem}
.lvl-ref{color:var(--ink)}
.asks{border-top:1px solid var(--line); padding-top:12px; display:grid; gap:8px}
.ask{display:flex; justify-content:space-between; gap:10px; align-items:center; flex-wrap:wrap}
.ask small{color:var(--muted)}

/* Tiroir */
.scrim{position:fixed; inset:0; background:var(--scrim); z-index:20}
.drawer{position:fixed; top:0; right:0; bottom:0; width:min(480px,100%); background:var(--paper); border-left:2px solid var(--brand); z-index:21; overflow-y:auto; padding:calc(20px + env(safe-area-inset-top,0px)) 24px calc(24px + env(safe-area-inset-bottom,0px)); display:grid; gap:18px; align-content:start}
.drawer-top{display:flex; justify-content:space-between; gap:12px; align-items:center}
.field{display:grid; gap:7px}
.seg{display:flex; flex-wrap:wrap; gap:6px}
.seg button{border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:6px 12px; font-weight:500; font-size:.88rem}
.seg button:hover{border-color:var(--brand)}
.seg button[aria-pressed="true"]{background:var(--brand); color:var(--paper); border-color:var(--brand)}
.drawer textarea, .drawer input[type=text], .drawer select{width:100%; border:1px solid var(--line); background:var(--surface); border-radius:8px; padding:10px 12px}
.drawer textarea{min-height:90px; resize:vertical}
.drawer .title-edit{font-size:1.3rem; font-weight:600; border-color:transparent; padding:6px 8px; margin-left:-8px}
.drawer .title-edit:hover, .drawer .title-edit:focus{border-color:var(--line)}
.swatches{display:flex; gap:8px; flex-wrap:wrap}
.swatches label{width:26px; height:26px; border-radius:50%; background:var(--c); cursor:pointer; display:grid; place-items:center; border:2px solid transparent}
.swatches input{position:absolute; opacity:0; pointer-events:none}
.swatches input:checked + label{border-color:var(--brand); box-shadow:inset 0 0 0 3px var(--paper)}
.swatches input:focus-visible + label{outline:3px solid var(--brand); outline-offset:2px}
.hist{list-style:none; padding:0; margin:0; display:grid; gap:6px; font-size:.88rem}
.hist li{display:grid; grid-template-columns:auto 1fr; gap:8px; color:var(--muted)}
.hist time{font-family:var(--f-mono); font-size:.76rem}

/* Focus : l'écran s'inverse, une seule chose à regarder */
.focus{position:fixed; inset:0; background:var(--brand); color:var(--paper); z-index:30; display:grid; place-items:center; padding:calc(24px + env(safe-area-inset-top,0px)) 20px calc(24px + env(safe-area-inset-bottom,0px)); overflow-y:auto}
.focus-in{max-width:660px; width:100%; display:grid; gap:24px; text-align:center; justify-items:center}
.focus .eyebrow{font-family:var(--f-mono); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; opacity:.7}
.focus h2{font-size:clamp(1.7rem,4.6vw,2.8rem); font-weight:500; line-height:1.2}
.focus .note{opacity:.75; max-width:52ch; margin:0}
.focus .acts{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}
.focus .btn{border-color:var(--paper); color:var(--paper); padding:12px 22px; font-size:1.02rem}
.focus .btn:hover{background:color-mix(in srgb, var(--paper) 12%, transparent)}
.focus .btn-ink{background:var(--paper); color:var(--brand)}
.focus .btn-ghost{border-color:transparent; opacity:.7}
.dots{display:flex; gap:8px}
.dots button{width:22px; height:22px; padding:0; border:0; background:transparent; display:grid; place-items:center; cursor:pointer}
.dots button::before{content:""; width:10px; height:10px; border-radius:50%; border:1.5px solid var(--paper)}
.dots button.on::before, .dots button:hover::before{background:var(--paper)}

.loading{min-height:60vh; display:grid; place-items:center; text-align:center}
.loading div{display:grid; gap:14px; justify-items:center}

@media (prefers-reduced-motion: no-preference){
  .loading svg circle{animation:pulse 1.4s ease-in-out infinite}
  .loading svg circle:nth-child(2n){animation-delay:.3s}
  .loading svg circle:nth-child(3n){animation-delay:.6s}
  @keyframes pulse{50%{opacity:.25}}
  .drawer{animation:slide .18s ease-out}
  @keyframes slide{from{transform:translateX(24px); opacity:.6}}
}

.foot{margin-top:40px; padding-top:14px; border-top:1px solid var(--line); color:var(--muted); font-size:.84rem; display:flex; gap:12px; flex-wrap:wrap; justify-content:space-between; align-items:center}
.toast{position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); background:var(--brand); color:var(--paper); padding:10px 18px; border-radius:999px; font-weight:500; z-index:40; max-width:calc(100% - 32px); text-align:center}

@media (max-width:860px){
  .board{grid-template-columns:1fr}
  .top-end{margin-left:0}
}
@media (max-width:480px){
  .entry{grid-template-columns:44px 30px 1fr}
  .domains{grid-template-columns:1fr}
}

/* Écrans d'accueil : connexion, invitation, configuration */
.gate{min-height:100%; display:grid; place-items:center; padding-block:48px}
.gate-in{max-width:520px; display:grid; gap:18px; justify-items:center; text-align:center}
.gate .logo{height:auto; width:min(300px,100%)}
.gate h1{font-size:1.3rem}
.gate p{margin:0; color:var(--muted)}
.gate p b{color:var(--ink)}
.gate .row{justify-content:center}
.gate code{font-family:var(--f-mono); font-size:.9em}
.btn-lg{padding:13px 26px; font-size:1.05rem}
.drawer-title{font-size:1.3rem}

/* Abonnement au fil par courriel */
.digest{display:grid; gap:8px; justify-items:start; border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; max-width:640px; background:var(--surface)}
.digest small{color:var(--muted); font-size:.86rem}
.seg button:disabled{opacity:.5; cursor:not-allowed}

/* Logo cliquable */
a.brand{text-decoration:none; border-radius:6px}

/* Qui sait quoi : position de chacun sur la carte */
.quad{font-size:.68rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:3px 9px; border-radius:999px; border:1px solid var(--line); color:var(--muted); white-space:nowrap}
.q-x{border-color:var(--brand); color:var(--brand)}

/* Mon X : la carte */
.xchart{position:relative; margin-top:14px; overflow-x:auto}
.xchart svg{display:block; overflow:visible}
.xchart text{font-family:var(--f-body); fill:var(--ink)}
.xaxis{stroke:var(--brand); stroke-width:2}
.xzone{fill:var(--brand); opacity:.06}
.xa{font-size:11.5px; font-weight:600; letter-spacing:.1em; fill:var(--brand) !important}
.xc-t{font-size:12.5px; font-weight:600; letter-spacing:.08em; fill:var(--ink)}
.xc-s{font-size:12px; fill:var(--muted) !important}
.xtick{font-family:var(--f-mono) !important; font-size:10.5px; fill:var(--muted) !important}
.xl{font-size:12.5px}
.xnarrow .xc-t{font-size:10px; letter-spacing:.04em}
.xnarrow .xc-s{font-size:10px}
.xnarrow .xa{font-size:10px}
.xnarrow .xl{font-size:11px}
.xdot{cursor:default; outline:none}
.xdot:focus-visible circle:last-child{stroke:var(--ink); stroke-width:3}
.xtip{position:absolute; z-index:3; background:var(--ink); color:var(--paper); font-size:.82rem; padding:6px 10px; border-radius:8px; pointer-events:none; max-width:260px}
.xlegend{display:flex; gap:8px 18px; flex-wrap:wrap; align-items:center; font-size:.86rem; margin-top:10px}
.xlegend span{display:inline-flex; gap:8px; align-items:center}
.xdot-l{width:12px; height:12px; border-radius:50%; display:inline-block}
.xdot-v{box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--x-val)}

/* Mon X : la même information en liste, par quadrant */
.xquads{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin-top:18px}
.xq{border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; background:var(--surface)}
section.xq-x{border-color:var(--brand)}
.xq h3{font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; color:var(--brand); display:flex; justify-content:space-between; gap:8px}
.xq h3 small{color:var(--muted); font-weight:400; text-transform:none; letter-spacing:0}
.xq ul{list-style:none; margin:8px 0 0; padding:0; display:grid; gap:4px; font-size:.92rem}
.xq li{display:flex; justify-content:space-between; gap:10px}
.xn{font-family:var(--f-mono); font-size:.8rem; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap}
.xv{font-style:normal; color:var(--x-val)}

/* Mon X : mes curseurs */
.xedit{margin-top:28px; display:grid; gap:12px; max-width:760px}
.xedit h2{font-size:1rem; text-transform:uppercase; letter-spacing:.1em; color:var(--brand)}
.xrow{border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; display:grid; gap:10px; background:var(--surface)}
.xrow-new{border-color:var(--brand); box-shadow:0 0 0 1px var(--brand)}
.xrow-head{display:flex; justify-content:space-between; align-items:center; gap:10px}
.xrow-head b{font-weight:600}
.xs{display:grid; grid-template-columns:minmax(0,14rem) 1fr 2.2rem; gap:12px; align-items:center; font-size:.92rem}
.xs small{display:block; color:var(--muted); font-size:.78rem}
.xs input{width:100%; accent-color:var(--brand)}
.xs output{font-family:var(--f-mono); font-variant-numeric:tabular-nums; text-align:right; font-weight:500}
.xcheck{display:flex; gap:8px; align-items:flex-start; font-size:.88rem; color:var(--muted)}
.xcheck input{accent-color:var(--x-val); margin-top:3px}
.xedit select{border:1px solid var(--line); background:var(--surface); border-radius:8px; padding:7px 10px}
@media (max-width:560px){ .xs{grid-template-columns:1fr 2.2rem} .xs span{grid-column:1 / -1} }

/* Sur téléphone, l'en-tête occupe trop de place pour rester fixe */
@media (max-width:600px){ .top{position:static} }

/* Horizon : la frise */
.hfilters{display:flex; gap:10px 16px; flex-wrap:wrap; align-items:center}
.hlegend{display:flex; gap:8px 18px; flex-wrap:wrap; font-size:.84rem; color:var(--muted)}
.hlegend span{display:inline-flex; gap:8px; align-items:center}
.hscroll{overflow-x:auto; margin-top:14px; border-top:2px solid var(--brand)}
.hhead{display:flex; position:sticky; top:0; background:var(--paper); z-index:2}
.hhead .hlabel{position:sticky; left:0; background:var(--paper); z-index:3}
.hcell-name{font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--brand); padding:16px 0 6px; border-bottom:1px solid var(--line)}
.hcell-name small{color:var(--muted); font-family:var(--f-mono); font-weight:400; letter-spacing:0; margin-left:6px}
.hrow{display:flex; align-items:center; border-bottom:1px solid var(--line); cursor:pointer; width:max-content; min-width:100%}
.hrow:hover{background:var(--soft)}
.hrow:hover .hlabel{background:var(--soft)}
.hlabel{flex:none; position:sticky; left:0; z-index:1; background:var(--paper); display:flex; align-items:center; justify-content:space-between; gap:8px; padding:4px 10px 4px 0; min-height:30px}
.htitle{font-size:.88rem; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.hdone-t{color:var(--muted)}
.hlabel .av{width:22px; height:22px; font-size:.6rem}
.hbar{flex:none; display:block}
.hgrid{stroke:var(--line); stroke-width:1}
.hzsep{stroke:var(--line); stroke-width:1; stroke-dasharray:3 4}
.hfuture{fill:var(--brand); opacity:.04}
.htoday{stroke:var(--brand); stroke-width:2}
.htoday-l{font-size:10px; font-weight:600; letter-spacing:.1em; fill:var(--brand)}
.hnodate{font-size:11px; font-style:italic; fill:var(--muted)}
.htick{font-family:var(--f-mono); font-size:11px; fill:var(--muted)}
.hzone{font-size:10.5px; font-weight:600; letter-spacing:.08em; fill:var(--brand)}
.hs-todo{fill:var(--muted); opacity:.55}
.hs-doing{fill:var(--brand)}
.hs-waiting{fill:url(#hhatch); stroke:var(--brand); stroke-width:1.5}
.hhatch-bg{fill:var(--surface)}
.hhatch-fg{fill:var(--brand)}
.hclip{fill:none; stroke:var(--muted); stroke-width:1.5}
.hdone circle{fill:var(--brand)}
.hdone path{fill:none; stroke:var(--paper); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
@media (max-width:640px){ .htitle{white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical} }

/* Pièces jointes */
.clip{display:inline-flex; align-items:center; gap:3px; font-family:var(--f-mono); font-size:.78rem; color:var(--muted); margin-left:8px}
.atts{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.att{display:grid; grid-template-columns:44px 1fr auto; gap:10px; align-items:center; border:1px solid var(--line); border-radius:8px; padding:6px 8px; background:var(--surface)}
.att-up{opacity:.6}
.att-thumb{width:44px; height:44px; object-fit:cover; border-radius:6px; display:block}
.att-ic{width:44px; height:44px; border-radius:6px; background:var(--soft); color:var(--brand); display:grid; place-items:center; font-size:.62rem; font-weight:600; letter-spacing:.04em}
.att-txt{display:grid; min-width:0}
.att-txt a, .att-txt > span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.9rem; color:var(--ink)}
.att-txt a{text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px}
.att-txt a:hover{text-decoration-color:var(--brand)}
.att-txt small{color:var(--muted); font-size:.76rem}
.drop{display:grid; gap:2px; justify-items:center; text-align:center; border:1.5px dashed var(--brand); border-radius:10px; padding:14px; cursor:pointer; color:var(--ink); font-size:.9rem}
.drop small{color:var(--muted); font-size:.78rem}
.drop input{position:absolute; width:1px; height:1px; opacity:0}
.drop:focus-within{outline:3px solid var(--brand); outline-offset:2px}
.drop-on{background:var(--soft)}
#linkForm input{border:1px solid var(--line); background:var(--surface); border-radius:8px; padding:8px 10px; min-width:0}