/* Layout : noir et blanc strict, comme le logo Entreprise Affranchie. La couleur 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:#F3F3F3; --line:#DCDCDC; --muted:#5C5C5C; --ink:#0A0A0A;
  --t-rouge:#D0433E; --t-orange:#D9731F; --t-jaune:#C9A40C; --t-vert:#2A9356; --t-bleu:#2E69D6; --t-violet:#8347CC;
  --scrim:rgb(0 0 0 / .4);
  --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:#0A0A0A; --surface:#141414; --soft:#1B1B1B; --line:#2E2E2E; --muted:#A6A6A6; --ink:#F4F4F4;
    --t-rouge:#F07C76; --t-orange:#F2A35E; --t-jaune:#E8C84A; --t-vert:#63CB8E; --t-bleu:#83A9F4; --t-violet:#B690EE;
    --scrim:rgb(0 0 0 / .6);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#0A0A0A; --surface:#141414; --soft:#1B1B1B; --line:#2E2E2E; --muted:#A6A6A6; --ink:#F4F4F4;
  --t-rouge:#F07C76; --t-orange:#F2A35E; --t-jaune:#E8C84A; --t-vert:#63CB8E; --t-bleu:#83A9F4; --t-violet:#B690EE;
  --scrim:rgb(0 0 0 / .6);
}

*{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(--ink); 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(--ink); position:sticky; top:env(safe-area-inset-top,0px); background:var(--paper); z-index:5}
.brand{display:flex; align-items:center; gap:12px}
.brand svg{width:38px; height:38px; flex:none}
.brand b{display:block; font-weight:600; font-size:1.15rem; letter-spacing:.22em; line-height:1.1}
.brand small{display:block; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.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(--ink); 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(--ink); background:transparent; border-radius:999px; padding:8px 16px; font-weight:500; line-height:1.2}
.btn:hover{background:var(--soft)}
.btn-ink{background:var(--ink); color:var(--paper)}
.btn-ink:hover{background:var(--ink); 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(--ink); 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(--ink)}
.chip .n{font-family:var(--f-mono); font-size:.78rem; color:var(--muted)}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.chip[aria-pressed="true"] .n{color:var(--paper); opacity:.7}
.chip-add{border-style:dashed}
.cellhead h1{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(--ink); object-fit:cover; filter:grayscale(1)}
.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(--ink); 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(--ink); 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(--ink)}
.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(--ink)}
.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(--ink); white-space:nowrap}
.s-todo{border-color:var(--line); color:var(--muted)}
.s-doing{background:var(--ink); 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(--ink); 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(--ink); 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{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(--ink)}
.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(--ink)}

/* 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(--ink); 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(--ink); 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(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.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(--ink); box-shadow:inset 0 0 0 3px var(--paper)}
.swatches input:focus-visible + label{outline:3px solid var(--ink); 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(--ink); 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(--ink)}
.focus .btn-ghost{border-color:transparent; opacity:.7}
.dots{display:flex; gap:8px}
.dots i{width:9px; height:9px; border-radius:50%; border:1.5px solid var(--paper)}
.dots i.on{background:var(--paper)}

.loading{min-height:60vh; display:grid; place-items:center; text-align:center}
.loading div{display:grid; gap:14px; justify-items:center}
.loading svg{width:64px; height:64px}
@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(--ink); 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-in svg{width:96px; height:96px; color:var(--ink)}
.gate-brand b{display:block; font-weight:600; font-size:2rem; letter-spacing:.24em}
.gate-brand small{display:block; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}
.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}