:root{
  --ground:#EEF0E9; --surface:#FBFBF7; --surface-2:#F4F6EE;
  --ink:#1B211C; --muted:#5D655D; --faint:#858D83; --line:#D6D9CE;
  --accent:#2E6B4E; --accent-ink:#215239; --accent-wash:#E0EDE4;
  --warn:#8A6410; --warn-wash:#F2ECD8;
  --flag:#8C3A2B; --flag-wash:#F3E4DF;
  --serif:"Spectral",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#141713; --surface:#1B1F1A; --surface-2:#232820;
    --ink:#E7EBE2; --muted:#9BA494; --faint:#7C8577; --line:#2F352C;
    --accent:#79C199; --accent-ink:#9BD6B5; --accent-wash:#1E2C24;
    --warn:#D7B269; --warn-wash:#2B2617;
    --flag:#E09C8C; --flag-wash:#2E1F1B;
  }
}
:root[data-theme="dark"]{
  --ground:#141713; --surface:#1B1F1A; --surface-2:#232820;
  --ink:#E7EBE2; --muted:#9BA494; --faint:#7C8577; --line:#2F352C;
  --accent:#79C199; --accent-ink:#9BD6B5; --accent-wash:#1E2C24;
  --warn:#D7B269; --warn-wash:#2B2617;
  --flag:#E09C8C; --flag-wash:#2E1F1B;
}

*{box-sizing:border-box}
html,body{margin:0; padding:0}
body{
  background:var(--ground); color:var(--ink); font-family:var(--sans);
  font-size:15.5px; line-height:1.55; -webkit-font-smoothing:antialiased;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
[hidden]{display:none !important}
img{max-width:100%}
.wrap{max-width:840px; margin:0 auto; padding-inline:20px; padding-block:0 76px}

/* ------------------------------------------------ porte d'entrée */
.gate{min-height:92vh; display:grid; place-items:center; padding:32px 20px}
.gate__card{
  width:100%; max-width:420px; background:var(--surface); border:1px solid var(--line);
  border-top:3px solid var(--accent); padding:30px 28px 26px;
}
.gate__title{font-family:var(--serif); font-size:38px; font-weight:600; margin:0 0 12px; line-height:1.05; letter-spacing:-.02em}
.gate__lede{font-family:var(--serif); font-size:15.5px; color:var(--muted); margin:0 0 24px; line-height:1.55}
.gate__form{display:flex; flex-direction:column; gap:15px}
.gate__error{
  margin:0; font-size:13px; color:var(--flag); background:var(--flag-wash);
  border:1px solid color-mix(in srgb,var(--flag) 30%, transparent); padding:9px 11px; border-radius:3px;
}
.gate__switch{margin:4px 0 0; font-size:13px; color:var(--muted); text-align:center}
.hint{margin:0; font-size:12px; color:var(--faint)}
.linkish{
  background:none; border:none; padding:0; font:inherit; color:var(--accent-ink);
  cursor:pointer; text-decoration:underline; text-underline-offset:2px;
}
.linkish:hover{color:var(--accent)}
.linkish:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ------------------------------------------------ en-têtes */
.masthead{padding-block:34px 24px}
.masthead__top{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap; margin-bottom:12px}
.whoami{display:flex; gap:12px; align-items:center; font-family:var(--mono); font-size:11px; color:var(--faint); letter-spacing:.04em}
.whoami .linkish{font-family:var(--mono); font-size:11px}
.eyebrow{font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); margin:0}
h1{font-family:var(--serif); font-weight:600; font-size:clamp(32px,6.4vw,46px); line-height:1.07; letter-spacing:-.015em; margin:0 0 14px; text-wrap:balance}
.standfirst{font-family:var(--serif); font-size:17.5px; line-height:1.6; color:var(--muted); margin:0; max-width:60ch}
.standfirst em{color:var(--ink); font-style:italic}
.crumb{
  display:inline-flex; align-items:center; gap:7px; background:none; border:none; cursor:pointer;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); padding:0;
}
.crumb:hover{color:var(--accent-ink)}
.crumb:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

/* ------------------------------------------------ liste des chantiers */
.board{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); margin-top:8px}
.card{
  text-align:left; background:var(--surface); border:1px solid var(--line); border-top:2px solid var(--accent);
  padding:18px; cursor:pointer; font:inherit; color:inherit; display:flex; flex-direction:column; gap:10px;
  transition:border-color .15s, transform .15s;
}
.card:hover{border-color:var(--accent); transform:translateY(-1px)}
.card:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.card__name{font-family:var(--serif); font-size:20px; font-weight:600; line-height:1.2; margin:0}
.card__meta{font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; color:var(--faint); margin:0}
.card__bar{height:5px; border-radius:99px; background:var(--line); overflow:hidden}
.card__bar span{display:block; height:100%; background:var(--accent); border-radius:99px}
.card__stats{display:flex; gap:12px; flex-wrap:wrap; font-family:var(--mono); font-size:11px; color:var(--muted); margin:0}
.card__stats .late{color:var(--flag)}
.card--new{border-top-color:var(--line); border-style:dashed; justify-content:center; min-height:120px}
.card--new .card__name{color:var(--accent-ink)}
.empty{background:var(--surface); border:1px solid var(--line); padding:26px; margin-top:8px}
.empty h2{font-family:var(--serif); font-size:22px; font-weight:600; margin:0 0 8px}
.empty p{margin:0 0 16px; color:var(--muted); font-size:14.5px; max-width:56ch}

/* ------------------------------------------------ formulaires */
.form{background:var(--surface); border:1px solid var(--line); padding:20px; margin-top:16px; display:grid; gap:16px}
.form__grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.field{display:flex; flex-direction:column; gap:5px; min-width:0}
.field label{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
input[type=text], input[type=url], input[type=email], input[type=password], input[type=date], select, textarea{
  font-family:var(--sans); font-size:14px; color:var(--ink); background:var(--surface-2);
  border:1px solid var(--line); border-radius:3px; padding:9px 10px; min-height:38px; width:100%;
}
input[type=date]{font-family:var(--mono); font-size:13px}
textarea{resize:vertical; line-height:1.5; min-height:62px}
input:focus-visible, select:focus-visible, textarea:focus-visible{outline:2px solid var(--accent); outline-offset:-1px}
input:disabled, select:disabled, textarea:disabled{opacity:.55; cursor:not-allowed}
.form__row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.status{font-family:var(--mono); font-size:11px; color:var(--faint)}

.btn{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; background:transparent; color:var(--accent-ink);
  border:1px solid color-mix(in srgb,var(--accent) 38%, transparent); border-radius:2px; padding:7px 12px;
  cursor:pointer; transition:background .14s; white-space:nowrap;
}
.btn:hover{background:var(--accent-wash)}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn--solid{background:var(--accent); color:var(--ground); border-color:var(--accent)}
.btn--solid:hover{background:var(--accent-ink)}
.btn--quiet{color:var(--muted); border-color:var(--line)}
.btn--quiet:hover{background:var(--surface-2)}
.btn--wide{width:100%; padding-block:11px; font-size:12.5px}

/* ------------------------------------------------ suivi */
.tracker{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:30;
  background:color-mix(in srgb, var(--ground) 93%, transparent); backdrop-filter:blur(10px);
  border-block:1px solid var(--line); margin-inline:-20px; padding:10px 20px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.tracker__count{font-family:var(--mono); font-size:12.5px; font-weight:500; font-variant-numeric:tabular-nums; white-space:nowrap}
.tracker__bar{flex:1; min-width:80px; height:6px; border-radius:99px; background:var(--line); overflow:hidden}
.tracker__fill{display:block; height:100%; width:0%; background:var(--accent); border-radius:99px; transition:width .32s cubic-bezier(.4,0,.2,1)}
.tracker__late{font-family:var(--mono); font-size:11px; color:var(--flag); white-space:nowrap}
.tracker__sync{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); white-space:nowrap}
@media (max-width:660px){ .tracker__sync{display:none} }

.setup{display:flex; flex-wrap:wrap; gap:16px 24px; align-items:flex-end; margin-top:24px; padding:15px 17px; background:var(--surface); border:1px solid var(--line)}
.setup .field{flex:0 0 auto}
.setup__note{font-size:13px; color:var(--muted); max-width:38ch; margin:0}
.setup__actions{margin-left:auto}
.members{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:6px}
.members li{font-family:var(--mono); font-size:11.5px; color:var(--muted)}
.members b{color:var(--ink); font-weight:500}

.filters{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px}
.filter{font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; padding:6px 11px; border-radius:2px; cursor:pointer; background:var(--surface); color:var(--muted); border:1px solid var(--line)}
.filter[aria-pressed="true"]{background:var(--accent); color:var(--ground); border-color:var(--accent)}
.filter:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ------------------------------------------------ phases et tâches */
.phase{margin-block:40px 0; border-top:1px solid var(--line); padding-top:24px}
.phase--first{border-top:none; padding-top:26px}
.phase.empty-phase{display:none}
.phase__head{display:flex; gap:15px; align-items:flex-start}
.phase__grow{flex:1; min-width:0}
.phase__num{
  font-family:var(--mono); font-size:10px; font-weight:500; color:var(--accent-ink); background:var(--accent-wash);
  min-width:30px; height:30px; padding-inline:5px; flex:none; display:grid; place-items:center;
  border-radius:2px; margin-top:3px; font-variant-numeric:tabular-nums;
}
.phase__title{font-family:var(--serif); font-size:24px; font-weight:600; margin:0 0 4px; line-height:1.18; letter-spacing:-.01em}
.phase__lede{margin:0; color:var(--muted); font-size:14px; max-width:58ch}

.tasks{list-style:none; margin:18px 0 0; padding:0}
.task{display:grid; grid-template-columns:auto 1fr; gap:13px; padding:15px 16px; background:var(--surface); border:1px solid var(--line); border-bottom:none}
.task:last-child{border-bottom:1px solid var(--line)}
.task.hidden-by-filter{display:none}
.task--flag{background:var(--flag-wash); border-color:color-mix(in srgb,var(--flag) 26%, var(--line))}
.task input[type=checkbox]{
  appearance:none; -webkit-appearance:none; width:19px; height:19px; margin:3px 0 0; flex:none;
  border:1.5px solid var(--faint); border-radius:3px; background:transparent; cursor:pointer;
  position:relative; transition:background .14s, border-color .14s;
}
.task input[type=checkbox]:hover{border-color:var(--accent)}
.task input[type=checkbox]:checked{background:var(--accent); border-color:var(--accent)}
.task input[type=checkbox]:checked::after{content:""; position:absolute; left:5.5px; top:2px; width:5px; height:10px; border:solid var(--surface); border-width:0 2px 2px 0; transform:rotate(43deg)}
.task input[type=checkbox]:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.task input[type=checkbox]:disabled{cursor:not-allowed; opacity:.5}
.task__body{min-width:0}
.task__title{font-weight:500; font-size:15px; line-height:1.4; cursor:pointer; display:block; margin-bottom:3px}
.task.done .task__title{color:var(--faint); text-decoration:line-through; text-decoration-thickness:1px}
.task.done .task__detail{color:var(--faint)}
.task__detail{margin:0; font-size:13.5px; color:var(--muted); line-height:1.55}

.chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; align-items:center}
.chip{font-family:var(--mono); font-size:10.5px; letter-spacing:.03em; padding:2.5px 7px; border-radius:2px; background:var(--surface-2); color:var(--muted); border:1px solid var(--line)}
.chip--cost{color:var(--accent-ink); background:var(--accent-wash); border-color:transparent}
.chip--when{color:var(--warn); background:var(--warn-wash); border-color:transparent}
.chip--flag{color:var(--flag); background:transparent; border-color:color-mix(in srgb,var(--flag) 40%, transparent)}
.chip--late{color:var(--ground); background:var(--flag); border-color:var(--flag); font-weight:500}
.chip--soon{color:var(--warn); background:var(--warn-wash); border-color:transparent; font-weight:500}
.chip--done{color:var(--accent-ink); background:var(--accent-wash); border-color:transparent}

.task__foot{display:flex; flex-wrap:wrap; gap:8px 13px; align-items:center; margin-top:10px}
.due{display:flex; align-items:center; gap:7px}
.due > span{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint)}
.due input[type=date]{padding:3px 6px; min-height:28px; font-size:12.5px; width:auto}

.panel{margin-top:12px; padding:13px 14px; background:var(--surface-2); border:1px solid var(--line); border-radius:3px}
.panel__row{display:flex; gap:9px; align-items:center; margin-top:9px; flex-wrap:wrap}
.panel__row > input[type=url], .panel__row > input[type=text]{flex:1 1 180px; width:auto}
.panel__hint{font-size:12px; color:var(--faint); margin:0 0 8px}
.panel textarea{background:var(--surface)}
.answer{margin-top:12px; padding-top:12px; border-top:1px solid var(--line); font-family:var(--serif); font-size:14.5px; line-height:1.62; color:var(--ink); white-space:pre-wrap}
.answer.status-line{font-family:var(--mono); font-size:12px; color:var(--faint); white-space:normal}

/* ------------------------------------------------ fil partagé */
.thread{list-style:none; margin:0 0 12px; padding:0; display:flex; flex-direction:column; gap:12px}
.thread:empty{display:none}
.post{font-size:13.5px; line-height:1.5}
.post__meta{font-family:var(--mono); font-size:10.5px; color:var(--faint); letter-spacing:.03em; margin:0 0 3px}
.post__meta b{color:var(--accent-ink); font-weight:500}
.post__text{margin:0; color:var(--ink); white-space:pre-wrap}
.att{display:inline-flex; align-items:center; gap:8px; text-decoration:none; background:var(--surface); border:1px solid var(--line); border-radius:3px; padding:7px 10px; max-width:100%}
.att:hover{border-color:var(--accent)}
.att__icon{font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:var(--accent-ink); background:var(--accent-wash); padding:3px 5px; border-radius:2px; flex:none}
.att__name{font-size:13px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.att__size{font-family:var(--mono); font-size:10.5px; color:var(--faint); flex:none}
.att-img{display:block; margin-top:6px; max-width:260px; border:1px solid var(--line); border-radius:3px}
.drop{display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin-top:9px}
.file-input{display:none}
.drop__status{font-family:var(--mono); font-size:11px; color:var(--faint)}
.addtask{margin-top:10px}

/* ------------------------------------------------ annexes */
.budget-wrap{overflow-x:auto; margin-top:18px; border:1px solid var(--line); background:var(--surface)}
table{border-collapse:collapse; width:100%; min-width:470px; font-size:13.5px}
th,td{text-align:left; padding:10px 14px; border-bottom:1px solid var(--line); vertical-align:top}
thead th{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); font-weight:500; background:var(--surface-2)}
tbody tr:last-child td{border-bottom:none}
td.num{font-family:var(--mono); white-space:nowrap; font-variant-numeric:tabular-nums}
tfoot td{font-weight:600; background:var(--surface-2); border-top:1px solid var(--line)}
.pitfalls{list-style:none; padding:0; margin:18px 0 0; display:flex; flex-direction:column; gap:14px}
.pitfalls li{padding-left:18px; border-left:2px solid var(--flag); font-size:14px; color:var(--muted); line-height:1.55}
.pitfalls b{color:var(--ink); font-weight:600; display:block; font-size:14.5px; margin-bottom:2px}

footer{margin-top:52px; padding-top:22px; border-top:1px solid var(--line); font-size:12.5px; color:var(--faint); line-height:1.6}
footer p{margin:0 0 9px}
footer b{color:var(--muted)}
a{color:var(--accent-ink); text-underline-offset:2px}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) a{color:var(--accent)} }
:root[data-theme="dark"] a{color:var(--accent)}
@media (prefers-reduced-motion:reduce){ *{transition:none !important} }

/* ------------------------------------------------ pièces jointes par étape */
.attachments{list-style:none; margin:9px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.attachments:empty{display:none}
.attachments .att{padding:5px 9px 5px 6px}
.att__thumb{width:26px; height:26px; object-fit:cover; border-radius:2px; flex:none; border:1px solid var(--line)}
.panel--link{margin-top:10px}
#plan > .phase:first-child{border-top:none; padding-top:26px}