:root{
  --bg:#F7F7F6;
  --surface:#FFFFFF;
  --surface-sunken:#F0F1F0;
  --border: rgba(20,22,20,.10);
  --border-strong: rgba(20,22,20,.18);
  --ink:#16181B;
  --ink-soft:#5B5F66;
  --ink-faint:#8B8F96;
  --shadow: 0 1px 2px rgba(20,22,20,.04), 0 4px 16px rgba(20,22,20,.05);

  --good:#1E9A5C;
  --good-soft:#E6F5EC;
  --warn:#B8790E;
  --warn-soft:#FBF0DE;
  --bad:#C63D3D;
  --bad-soft:#FBE9E9;

  --font-sans: -apple-system, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --tier-h: 66px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#131415;
    --surface:#1B1C1E;
    --surface-sunken:#212325;
    --border: rgba(240,241,240,.10);
    --border-strong: rgba(240,241,240,.18);
    --ink:#F1F2F0;
    --ink-soft:#AAAEB2;
    --ink-faint:#75797E;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.28);

    --good:#4ECB8B;
    --good-soft: rgba(78,203,139,.14);
    --warn:#E3A83F;
    --warn-soft: rgba(227,168,63,.14);
    --bad:#E56B6B;
    --bad-soft: rgba(229,107,107,.14);
  }
}
:root[data-theme="dark"]{
  --bg:#131415; --surface:#1B1C1E; --surface-sunken:#212325;
  --border: rgba(240,241,240,.10); --border-strong: rgba(240,241,240,.18);
  --ink:#F1F2F0; --ink-soft:#AAAEB2; --ink-faint:#75797E;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.28);
  --good:#4ECB8B; --good-soft: rgba(78,203,139,.14);
  --warn:#E3A83F; --warn-soft: rgba(227,168,63,.14);
  --bad:#E56B6B; --bad-soft: rgba(229,107,107,.14);
}
:root[data-theme="light"]{
  --bg:#F7F7F6; --surface:#FFFFFF; --surface-sunken:#F0F1F0;
  --border: rgba(20,22,20,.10); --border-strong: rgba(20,22,20,.18);
  --ink:#16181B; --ink-soft:#5B5F66; --ink-faint:#8B8F96;
  --shadow: 0 1px 2px rgba(20,22,20,.04), 0 4px 16px rgba(20,22,20,.05);
  --good:#1E9A5C; --good-soft:#E6F5EC;
  --warn:#B8790E; --warn-soft:#FBF0DE;
  --bad:#C63D3D; --bad-soft:#FBE9E9;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
  line-height:1.55;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

.page{ max-width:1180px; margin:0 auto; padding:3rem 1.75rem 5rem; }

/* ---------- masthead ---------- */
.masthead{ margin-bottom:2.75rem; }
.eyebrow{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-faint); display:block; margin-bottom:.9rem;
}
h1{
  font-weight:650; font-size:clamp(2.1rem,4.5vw,2.75rem); letter-spacing:-.02em;
  margin:0 0 .7rem; color:var(--ink); text-wrap:balance;
}
.epigraph{ color:var(--ink-soft); font-size:1.02rem; margin:0 0 .5rem; max-width:56ch; font-style:italic; }
.lede{ color:var(--ink-faint); font-size:.92rem; max-width:60ch; margin:0; }

/* ---------- workspace grid ---------- */
.workspace{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:start; }
@media (max-width:900px){ .workspace{ grid-template-columns:1fr; } }

.col-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:.85rem; }
h2{ font-size:.78rem; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint); margin:0; font-weight:600; }
.link-btn{
  font-size:.75rem; background:none; border:none; color:var(--ink-faint); cursor:pointer;
  text-decoration:underline; text-underline-offset:3px; padding:0;
}
.link-btn:hover{ color:var(--ink); }
.link-btn:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; border-radius:2px; }

/* ---------- profile ---------- */
.profile-scroll{
  max-height:min(74vh,880px); overflow-y:auto;
  border:1px solid var(--border); border-radius:12px; background:var(--surface); box-shadow:var(--shadow);
}
.p-section{ padding:1rem 1.25rem; border-bottom:1px solid var(--border); }
.p-section:last-child{ border-bottom:none; }
.p-section h3{ font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 .4rem; font-weight:600; }
.p-content{
  font-size:.94rem; white-space:pre-wrap; line-height:1.6; outline:none;
  border-radius:6px; padding:.15rem .4rem; margin:0 -.4rem; color:var(--ink);
}
.p-content:focus{ background:var(--surface-sunken); box-shadow:0 0 0 2px var(--border-strong) inset; }

/* ---------- project form ---------- */
.field{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:1rem; }
.field label{ font-size:.75rem; letter-spacing:.02em; color:var(--ink-faint); }
input[type=text], textarea{
  width:100%; font-family:var(--font-sans); font-size:.95rem; border:1px solid var(--border-strong);
  border-radius:8px; padding:.65rem .8rem; background:var(--surface); color:var(--ink);
}
textarea{ min-height:170px; resize:vertical; line-height:1.55; }
input[type=text]:focus-visible, textarea:focus-visible{ outline:2px solid var(--ink); outline-offset:1px; }

.actions{ display:flex; gap:1rem; align-items:center; flex-wrap:wrap; margin-top:.2rem; }
button.primary{
  font-size:.85rem; padding:.7rem 1.25rem; border-radius:8px; cursor:pointer; border:1px solid var(--ink);
  background:var(--ink); color:var(--bg); font-weight:600;
}
button.primary:hover{ opacity:.85; }
button.primary:disabled{ opacity:.4; cursor:not-allowed; }
button:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.status{ font-size:.83rem; color:var(--ink-faint); }
.status.error{ color:var(--bad); }

/* ---------- result ---------- */
.result{ margin-top:2.5rem; padding-top:2rem; border-top:1px solid var(--border); }

.verdict-strip{ display:flex; align-items:center; gap:.65rem; margin-bottom:.6rem; }
.verdict-dot{ width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.verdict-dot.aligne{ background:var(--good); }
.verdict-dot.nuance{ background:var(--warn); }
.verdict-dot.desaligne{ background:var(--bad); }
.verdict-word{ font-size:1.1rem; font-weight:650; text-transform:capitalize; }
.verdict-score{ font-family:var(--font-mono); font-size:.9rem; color:var(--ink-faint); font-variant-numeric:tabular-nums; }

.summary{ font-size:1rem; color:var(--ink-soft); max-width:66ch; margin:0 0 2rem; }

/* ---------- pyramid ---------- */
.pyramid-block{ margin-bottom:2.4rem; }
.pyramid-row{ display:flex; gap:1.25rem; }
.pyramid-labels{ display:flex; flex-direction:column; width:200px; flex-shrink:0; }
@media (max-width:640px){ .pyramid-labels{ width:130px; } }
.pyramid-label{
  height:var(--tier-h); display:flex; align-items:center; justify-content:flex-end; gap:.55rem;
  text-align:right; cursor:pointer; background:none; border:none; padding:0 .5rem 0 0; font-family:inherit;
}
.pyramid-label .dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; background:var(--ink-faint); }
.pyramid-label .dot.good{ background:var(--good); }
.pyramid-label .dot.warn{ background:var(--warn); }
.pyramid-label .dot.bad{ background:var(--bad); }
.pyramid-label .tier-name{ font-size:.82rem; color:var(--ink-faint); line-height:1.25; }
.pyramid-label.active .tier-name{ color:var(--ink); font-weight:650; }
.pyramid-label:hover .tier-name{ color:var(--ink); }
.pyramid-label:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; border-radius:4px; }

.pyramid-shape{ flex:1; max-width:440px; display:flex; flex-direction:column; }
.pyramid-tier{
  height:var(--tier-h); cursor:pointer; background:var(--surface-sunken);
  transition:filter .15s ease; position:relative;
}
.pyramid-tier:hover{ filter:brightness(0.96); }
@media (prefers-color-scheme: dark){ .pyramid-tier:hover{ filter:brightness(1.15); } }
:root[data-theme="dark"] .pyramid-tier:hover{ filter:brightness(1.15); }
.pyramid-tier.good{ background:var(--good-soft); }
.pyramid-tier.warn{ background:var(--warn-soft); }
.pyramid-tier.bad{ background:var(--bad-soft); }
.pyramid-tier.active::after{
  content:""; position:absolute; inset:0; box-shadow:0 0 0 2px var(--ink) inset; pointer-events:none;
}
.pyramid-tier:nth-child(1){ clip-path: polygon(50% 0%, 50% 0%, 60% 100%, 40% 100%); }
.pyramid-tier:nth-child(2){ clip-path: polygon(40% 0%, 60% 0%, 70% 100%, 30% 100%); }
.pyramid-tier:nth-child(3){ clip-path: polygon(30% 0%, 70% 0%, 80% 100%, 20% 100%); }
.pyramid-tier:nth-child(4){ clip-path: polygon(20% 0%, 80% 0%, 90% 100%, 10% 100%); }
.pyramid-tier:nth-child(5){ clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%); background:var(--surface-sunken) !important; }
.pyramid-tier:nth-child(5).active::after{ box-shadow:0 0 0 2px var(--ink-faint) inset; }

.tier-detail{
  margin-top:1.4rem; border:1px solid var(--border); border-radius:10px; background:var(--surface);
  box-shadow:var(--shadow); padding:1.1rem 1.3rem;
}
.tier-detail h4{ font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 .8rem; font-weight:600; }
.tier-detail .td-line{ font-size:.94rem; color:var(--ink); margin:0 0 .6rem; }
.tier-detail .td-line:last-child{ margin-bottom:0; }

.valeur-row{ display:grid; grid-template-columns:22px 160px 1fr; gap:.65rem; align-items:start; padding:.45rem 0; border-bottom:1px dotted var(--border); }
.valeur-row:last-child{ border-bottom:none; }
@media (max-width:560px){ .valeur-row{ grid-template-columns:22px 1fr; } .valeur-row .vr-text{ grid-column:1/-1; padding-left:32px; } }
.valeur-row .vr-mark{ font-family:var(--font-mono); }
.valeur-row.on .vr-mark{ color:var(--good); }
.valeur-row.off .vr-mark{ color:var(--bad); }
.valeur-row .vr-name{ font-size:.85rem; font-weight:600; color:var(--ink); }
.valeur-row .vr-text{ font-size:.88rem; color:var(--ink-soft); }

.crit-row{ display:grid; grid-template-columns:22px 190px 1fr; gap:.65rem; align-items:start; padding:.5rem 0; border-bottom:1px dotted var(--border); }
.crit-row:last-child{ border-bottom:none; }
@media (max-width:560px){ .crit-row{ grid-template-columns:22px 1fr; } .crit-row .crit-text{ grid-column:1/-1; padding-left:32px; } }
.crit-mark{ font-family:var(--font-mono); }
.crit-row.on.pos .crit-mark{ color:var(--good); }
.crit-row.on.neg .crit-mark{ color:var(--bad); }
.crit-row.off .crit-mark{ color:var(--ink-faint); }
.crit-name{ font-size:.85rem; font-weight:600; color:var(--ink); }
.crit-text{ font-size:.88rem; color:var(--ink-soft); }

.projet-text{ font-size:.9rem; color:var(--ink-soft); white-space:pre-wrap; }

/* ---------- pistes ---------- */
.pistes-block h3{ font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 .75rem; font-weight:600; }
.piste{
  border:1px solid var(--border); border-left:3px solid var(--warn); border-radius:0 8px 8px 0;
  background:var(--surface); padding:.75rem .95rem; font-size:.92rem; margin-bottom:.55rem; color:var(--ink);
}

/* ---------- log ---------- */
.log{ margin-top:3rem; }
.log-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:10px; background:var(--surface); box-shadow:var(--shadow); }
table{ border-collapse:collapse; width:100%; min-width:560px; }
th{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint);
  text-align:left; padding:.6rem .9rem; border-bottom:1px solid var(--border); font-weight:600;
}
th.num, td.num{ text-align:right; }
td{ padding:.6rem .9rem; border-bottom:1px solid var(--border); font-size:.87rem; }
tr:last-child td{ border-bottom:none; }
td.num{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.pill{
  font-size:.72rem; padding:.2rem .6rem; border-radius:999px; display:inline-block; font-weight:600;
}
.pill.aligne{ color:var(--good); background:var(--good-soft); }
.pill.nuance{ color:var(--warn); background:var(--warn-soft); }
.pill.desaligne{ color:var(--bad); background:var(--bad-soft); }
td.row-actions{ white-space:nowrap; text-align:right; }
td.row-actions button{ margin-left:.5rem; }
.empty-row{ font-style:italic; color:var(--ink-faint); }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:999px; }
::-webkit-scrollbar-track{ background:transparent; }