/* Plan de vie : style « carnet ». Repris de reference/ui_v2_reference.html (validé le 29/10/2026).
   Un rapport annuel écrit pour soi : une colonne, des filets, pas de cartes. Thème clair unique, assumé. */

@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/instrument-serif-latin.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400 600;font-display:swap;
  src:url(../fonts/dm-sans-latin.woff2) format("woff2")}

:root{
  --paper:#FBFAF7; --ink:#1A1A1A; --soft:#5E5B55; --rule:#D9D5CC; --faint:#EFECE5;
  --green:#2F5D50; --ochre:#B08A3E; --slate:#4A6378; --plum:#7A4E5C; --sand:#C9BBA0;
  --pos:#2F6B3F; --neg:#A3352B; --warnc:#9A6A12;
  --display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --body:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6}
a{color:var(--ink);text-underline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:20px;top:8px;background:var(--paper);padding:4px 8px;z-index:2}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- en-tête et chapitres ---------- */
header.top{max-width:900px;margin:0 auto;padding:28px 20px 0;display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.linkbtn{font:inherit;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.linkbtn:hover{color:var(--ink);background:none}
nav{max-width:900px;margin:14px auto 0;padding:0 20px;border-bottom:1px solid var(--ink);display:flex;gap:4px 18px;flex-wrap:wrap}
nav a{font-size:14px;text-decoration:none;color:var(--soft);padding:8px 0;border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap}
nav a:hover{color:var(--ink)}
nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink);font-weight:500}
main{max-width:900px;margin:0 auto;padding:30px 20px 80px}

/* ---------- typographie ---------- */
h1{font-family:var(--display);font-weight:400;font-size:52px;line-height:1.05;margin:0 0 10px;text-wrap:balance}
h2{font-family:var(--display);font-weight:400;font-size:30px;line-height:1.15;margin:44px 0 6px;text-wrap:balance}
h3{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);font-weight:500;margin:26px 0 8px}
.lede{font-size:18px;max-width:640px;color:#33312D;margin:0 0 8px}
.small{font-size:13px;color:var(--soft)}
.big{font-family:var(--display);font-size:72px;line-height:1;margin:6px 0}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.pos{color:var(--pos)} .neg{color:var(--neg)} .warn{color:var(--warnc)}
hr{border:0;border-top:1px solid var(--rule);margin:30px 0}

/* ---------- chiffres clés : une rangée de filets, pas de tuiles ---------- */
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0;border-top:1px solid var(--ink);margin-top:18px}
.fig{padding:12px 16px 10px 0;border-bottom:1px solid var(--rule)}
.fig .v{font-family:var(--display);font-size:32px;line-height:1.1}
.fig .l{font-size:13px;color:var(--soft)}

/* ---------- registres ---------- */
.ledger{width:100%;border-collapse:collapse;font-size:15px}
.ledger th{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);font-weight:500;text-align:left;padding:8px 10px 6px 0;border-bottom:1px solid var(--ink)}
.ledger td{padding:8px 10px 8px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.ledger td.r,.ledger th.r{text-align:right}
.ledger tr.total td{border-top:1px solid var(--ink);border-bottom:none;font-weight:600}
.ledger tr.total + tr.total td{border-top:0}
.ledger td.edit{text-align:right;width:1%;white-space:nowrap}
.ledger td.edit a{font-size:13px;color:var(--soft)}
.ledger td.edit a:hover{color:var(--ink)}
.wrap{overflow-x:auto}
.wrap .ledger{min-width:560px}

.aside{border-left:2px solid var(--ink);padding:4px 0 4px 16px;margin:18px 0;font-family:var(--display);font-size:22px;line-height:1.35;max-width:680px}
.aside.warn{border-color:var(--warnc);color:var(--ink)}
.aside.neg{border-color:var(--neg);color:var(--ink)}
ul.notes{padding-left:18px;margin:8px 0} ul.notes li{margin:5px 0}

/* ---------- graphiques ---------- */
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--soft);margin-top:8px}
.sw{display:inline-block;margin-right:6px;vertical-align:-1px}
.chart{display:block;width:100%;height:auto;margin:10px 0 4px}
svg text{font-family:var(--body);font-size:11px}
svg text:not([fill]){fill:var(--soft)}
svg text.serif{font-family:var(--display);font-size:30px;fill:var(--ink)}
.bar100{display:block;width:100%;height:16px;margin-top:10px}
.progress{display:block;width:100%;height:6px;margin:10px 0 18px}
.donuts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px;align-items:center;text-align:center}
.donut{max-width:100%;height:auto}

.two{display:grid;grid-template-columns:1fr 1fr;gap:32px}

/* ---------- listes cochables ---------- */
.check{display:flex;gap:12px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--rule)}
.check form{display:contents}
.check input[type=checkbox]{width:20px;height:20px;margin:3px 0 0;accent-color:var(--green);flex:none;cursor:pointer}
.check .when{font-size:13px;color:var(--soft);min-width:96px;flex:none}
.check .txt{flex:1}
.check.done .txt{text-decoration:line-through;color:var(--soft)}
.check .edit{font-size:13px;color:var(--soft);flex:none}
.check label{display:flex;gap:12px;flex:1;cursor:pointer}

/* ---------- champs : soulignés, sans cadre ---------- */
input[type=text],input[type=date],input[type=password],select{font:inherit;font-size:16px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink);padding:3px 2px;border-radius:0}
input.amount{width:120px;text-align:right;font-variant-numeric:tabular-nums}
input.short{width:64px;text-align:right;font-variant-numeric:tabular-nums}
input.wide{width:100%}
select{padding-right:4px}
button{font:inherit;font-size:14px;font-weight:500;background:var(--ink);color:var(--paper);border:1px solid var(--ink);padding:9px 16px;cursor:pointer;border-radius:2px}
button:hover{background:var(--green);border-color:var(--green)}
a.button{display:inline-block;font-size:14px;font-weight:500;background:var(--ink);color:var(--paper);border:1px solid var(--ink);padding:9px 16px;border-radius:2px;text-decoration:none}
a.button:hover{background:var(--green);border-color:var(--green)}
button.quiet{background:transparent;color:var(--neg);border-color:var(--neg)}
button.quiet:hover{background:var(--neg);color:var(--paper)}
:focus-visible{outline:2px solid var(--ochre);outline-offset:2px}
.field{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:6px 0;border-bottom:1px solid var(--faint)}
.field .unit{font-size:13px;color:var(--soft);display:inline-block;min-width:36px}
.row{display:flex;gap:16px 22px;align-items:baseline;flex-wrap:wrap;margin-top:16px}
.row label{display:flex;gap:8px;align-items:baseline}
.actions-bar{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:22px}
.error{border-left:2px solid var(--neg);padding:2px 0 2px 12px;color:var(--neg);margin:14px 0}
.status{font-size:12px;letter-spacing:.06em;text-transform:uppercase}
select.status{font-size:12px;border-bottom-color:var(--rule)}
.st-todo{color:var(--soft)} .st-encours{color:var(--warnc)} .st-fait{color:var(--pos)}
.inline-form{display:flex;gap:10px;align-items:baseline}

/* ---------- confirmation après enregistrement ---------- */
.save{position:fixed;right:18px;bottom:18px;background:var(--ink);color:var(--paper);padding:8px 14px;font-size:13px;animation:fade 2.6s forwards}
@keyframes fade{0%,75%{opacity:.95}100%{opacity:0;visibility:hidden}}

.foot{max-width:900px;margin:0 auto;padding:0 20px 40px;font-size:12px;color:var(--soft)}

/* ---------- connexion ---------- */
.login{max-width:420px;margin:0 auto;padding:12vh 20px 60px}
.login h1{margin-bottom:24px}
.login label{display:block;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);margin:22px 0 4px}
.login input{width:100%}
.login input[name=code]{letter-spacing:.3em;font-variant-numeric:tabular-nums;width:9em}
.login button{margin-top:30px}

/* ---------- ajouts : libellés cliquables, annulation, saisie de la semaine ---------- */
.rowlink{text-decoration:none;color:var(--ink)}
.rowlink:hover,.rowlink:focus-visible{text-decoration:underline}
.lab{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);font-weight:500;margin:26px 0 8px}
figure{margin:0}
.undo{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;font-size:14px;padding:6px 0;border-bottom:1px solid var(--rule)}
.undo .linkbtn{letter-spacing:normal;text-transform:none;font-size:14px;color:var(--ink)}
.week{margin-top:12px}
.hint{font-size:12px;color:var(--soft)}
.check .edit{padding:4px 0 4px 8px}
::selection{background:#E4DCC8;color:var(--ink)}
input{caret-color:var(--green)}
input::placeholder{color:var(--soft);opacity:1}

/* ---------- graphiques : une version large, une version téléphone ---------- */
.chart-m{display:none}

@media (max-width:700px){
  h1{font-size:38px} .big{font-size:54px} h2{font-size:26px}
  .two{grid-template-columns:1fr}
  nav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
      -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
      mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);padding-right:28px}
  .check .when{min-width:74px}
  .field{flex-wrap:wrap}
  .chart-d{display:none}
  .chart-m{display:block}
  .chart-m text{font-size:13px}
  .figs{grid-template-columns:1fr 1fr}
  .fig .v{font-size:26px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.field input.wide{flex:1;max-width:540px}
.row .grow{flex:1}
.row .grow input{flex:1;min-width:0}
.back{font-size:14px;margin:0 0 6px}
.back a{color:var(--soft)}
.back a:hover{color:var(--ink)}