:root{
  color-scheme: light dark;
  --bg:#F5F3EE; --surface:#FFFFFF; --surface-alt:#FBF9F4; --ink:#1B2027; --ink-soft:#5A6070;
  --border:#E2DED2; --border-strong:#CFC9B8;
  --accent:#0E6B67; --accent-strong:#0A4F4C; --accent-soft:#E1F0EC; --accent-ink:#FFFFFF;
  --track-a:#4C6FA5; --track-a-soft:#E7ECF6;
  --track-b:#0E6B67; --track-b-soft:#E1F0EC;
  --track-c:#B5601B; --track-c-soft:#F6E9DA;
  --track-d:#7A4FA8; --track-d-soft:#EEE6F5;
  --danger:#A23B3B;
  --focus:#0E6B67;
  --badge-ink:#FFFFFF;
  --shadow: 0 1px 2px rgba(27,32,39,.06), 0 6px 16px -8px rgba(27,32,39,.12);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#14171B; --surface:#1B1F24; --surface-alt:#20252B; --ink:#ECEDEE; --ink-soft:#A6ACB6;
    --border:#2B3138; --border-strong:#3A414A;
    --accent:#4FD1C7; --accent-strong:#7FE0D8; --accent-soft:#173330; --accent-ink:#08201E;
    --track-a:#8FB0E8; --track-a-soft:#1E2A3E;
    --track-b:#4FD1C7; --track-b-soft:#15302C;
    --track-c:#E3A25C; --track-c-soft:#332212;
    --track-d:#C4A3E8; --track-d-soft:#2A2036;
    --danger:#E08A8A;
    --badge-ink:#14171B;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 20px -8px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --bg:#14171B; --surface:#1B1F24; --surface-alt:#20252B; --ink:#ECEDEE; --ink-soft:#A6ACB6;
  --border:#2B3138; --border-strong:#3A414A;
  --accent:#4FD1C7; --accent-strong:#7FE0D8; --accent-soft:#173330; --accent-ink:#08201E;
  --track-a:#8FB0E8; --track-a-soft:#1E2A3E;
  --track-b:#4FD1C7; --track-b-soft:#15302C;
  --track-c:#E3A25C; --track-c-soft:#332212;
  --track-d:#C4A3E8; --track-d-soft:#2A2036;
  --danger:#E08A8A;
  --badge-ink:#14171B;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 20px -8px rgba(0,0,0,.5);
}

*{box-sizing:border-box;}
html,body{margin:0;}
body{
  background:var(--bg); color:var(--ink);
  font-family:'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  font-size:15px; line-height:1.5;
  padding-inline:20px; padding-block:28px 60px;
}
h1,h2,h3{font-family:'Source Serif 4', Georgia, serif; font-weight:600; text-wrap:balance; margin:0;}
.wrap{max-width:760px; margin-inline:auto;}

header.top{margin-bottom:28px;}
.eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--accent-strong); margin-bottom:10px; display:flex; align-items:center; gap:8px;
}
.eyebrow::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); display:inline-block;}
h1{font-size:clamp(26px,4.5vw,34px); color:var(--ink); margin-bottom:10px;}
.intro{color:var(--ink-soft); max-width:62ch; font-size:14.5px;}
.intro strong{color:var(--ink); font-weight:600;}

.progress-rail{
  position:sticky; top:0; z-index:5; height:4px; margin:0 0 18px;
  background:var(--border); border-radius:99px; overflow:hidden;
}
.progress-rail > div{height:100%; width:0%; background:var(--accent); transition:width .25s ease;}

nav.rail{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 30px;}
nav.rail a{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.03em;
  color:var(--ink-soft); text-decoration:none; border:1px solid var(--border); border-radius:999px;
  padding:5px 11px; background:var(--surface); transition:border-color .15s, color .15s;
}
nav.rail a:hover{border-color:var(--accent); color:var(--accent-strong);}

section.block{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:22px clamp(16px,4vw,28px); margin-bottom:16px; box-shadow:var(--shadow); scroll-margin-top:16px;
}
.block-head{display:flex; align-items:baseline; gap:11px; margin-bottom:4px;}
.block-num{
  font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--accent-strong);
  background:var(--accent-soft); border-radius:6px; padding:2px 7px; flex:none;
}
.block-head h2{font-size:18px;}
.block-sub{color:var(--ink-soft); font-size:13px; margin:4px 0 18px;}

.q{margin-bottom:18px;}
.q:last-child{margin-bottom:0;}
.q > label.qlabel{display:block; font-weight:600; font-size:13.5px; margin-bottom:8px;}
.q .hint{font-weight:400; color:var(--ink-soft); font-size:12px; display:block; margin-top:2px;}

.options{display:flex; flex-wrap:wrap; gap:7px;}
.opt{
  position:relative; display:flex; align-items:center; gap:7px;
  border:1px solid var(--border); border-radius:9px; padding:7px 12px;
  font-size:13.5px; background:var(--surface-alt); cursor:pointer; user-select:none;
}
.opt input{accent-color:var(--accent); width:14px; height:14px; flex:none;}
.opt:has(input:checked){border-color:var(--accent); background:var(--accent-soft); color:var(--accent-strong); font-weight:500;}
.opt input:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}

.scale{display:flex; gap:6px;}
.scale .opt{flex:1; justify-content:center; padding:8px 4px; flex-direction:column; gap:2px; text-align:center;}
.scale .opt .n{font-family:'IBM Plex Mono',monospace; font-size:14px; font-weight:600;}
.scale-legend{display:flex; justify-content:space-between; font-size:11px; color:var(--ink-soft); margin-top:5px;}

input[type=text], input[type=search], textarea, select{
  width:100%; font-family:inherit; font-size:13.5px; color:var(--ink);
  background:var(--surface-alt); border:1px solid var(--border); border-radius:8px;
  padding:9px 11px;
}
input[type=text]:focus, textarea:focus, select:focus{outline:2px solid var(--focus); outline-offset:1px; border-color:var(--accent);}
textarea{min-height:70px; resize:vertical;}
.other-input{margin-top:7px; max-width:320px;}

.actions{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; margin:26px 0 10px;}
button, a.btn{
  font-family:inherit; font-size:14px; font-weight:600; border-radius:9px; border:1px solid transparent;
  padding:11px 20px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:6px;
}
button.primary, a.btn.primary{background:var(--accent); color:var(--accent-ink);}
button.primary:hover, a.btn.primary:hover{background:var(--accent-strong);}
button.ghost, a.btn.ghost{background:transparent; color:var(--ink-soft); border-color:var(--border);}
button.ghost:hover, a.btn.ghost:hover{border-color:var(--border-strong); color:var(--ink);}
button:focus-visible, a.btn:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}

#result{
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  box-shadow:var(--shadow); margin-top:6px; overflow:hidden;
}
.fiche-head{display:flex; align-items:center; gap:14px; padding:20px clamp(16px,4vw,30px); border-bottom:1px solid var(--border);}
.fiche-avatar{
  flex:none; width:46px; height:46px; border-radius:50%; background:var(--accent-soft);
  color:var(--accent-strong); display:flex; align-items:center; justify-content:center;
  font-family:'Source Serif 4',serif; font-weight:700; font-size:17px;
}
.fiche-id{flex:1; min-width:0;}
.fiche-id .name{font-weight:600; font-size:15px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.fiche-id .metier{font-size:12.5px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.fiche-date{flex:none; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft); text-align:right; line-height:1.4;}

.fiche-hero{padding:26px clamp(16px,4vw,30px) 22px;}
.badge-track{
  display:inline-flex; align-items:center; gap:7px; font-family:'IBM Plex Mono',monospace;
  font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; border-radius:999px; padding:5px 13px; font-weight:600;
}
.badge-track::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; display:inline-block;}
.result-title{font-size:26px; margin:14px 0 8px;}
.result-desc{color:var(--ink-soft); font-size:14px; max-width:60ch;}

.fiche-section{padding:22px clamp(16px,4vw,30px); border-top:1px solid var(--border);}
.fiche-section-title{
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 16px;
}

.meters{display:flex; flex-direction:column; gap:14px;}
.meter-row{display:flex; flex-direction:column; gap:6px;}
.meter-top{display:flex; justify-content:space-between; align-items:baseline; font-size:13px;}
.meter-label{color:var(--ink); font-weight:500;}
.meter-value{font-family:'IBM Plex Mono',monospace; font-weight:600; color:var(--ink);}
.meter-value .meter-max{color:var(--ink-soft); font-weight:400;}
.meter-track{height:10px; border-radius:99px; background:var(--accent-soft); overflow:hidden;}
.meter-fill{height:100%; border-radius:99px; background:var(--accent); transition:width .5s cubic-bezier(.3,.8,.4,1);}

.chips-row{display:flex; flex-wrap:wrap; gap:7px;}
.chip{font-size:12px; padding:5px 11px; border-radius:999px; background:var(--surface-alt); border:1px solid var(--border); color:var(--ink-soft);}
.chip.hi{background:var(--accent-soft); color:var(--accent-strong); border-color:transparent; font-weight:500;}

.recap-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; font-size:13.5px;}
@media (max-width:480px){.recap-grid{grid-template-columns:1fr;}}
.recap-grid dt{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin-bottom:4px;}
.recap-grid dd{margin:0; color:var(--ink);}

.send-hint{font-size:12px; color:var(--ink-soft); margin-top:10px;}
.fiche-foot{display:flex; flex-direction:column; gap:12px;}

/* ---- Pages hub / admin (index, reponses) ---- */
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:24px clamp(16px,4vw,28px); box-shadow:var(--shadow); margin-bottom:16px;
}
.card h2{font-size:17px; margin-bottom:8px;}
.card p{color:var(--ink-soft); font-size:13.5px; margin:0 0 16px;}
.tile-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:560px){.tile-grid{grid-template-columns:1fr;}}
.tile{
  display:flex; flex-direction:column; gap:8px; background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:20px; box-shadow:var(--shadow); text-decoration:none; color:inherit;
  transition:border-color .15s;
}
.tile:hover{border-color:var(--accent);}
.tile .tile-eyebrow{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-strong);}
.tile h3{font-size:16px;}
.tile p{color:var(--ink-soft); font-size:13px; margin:0;}

[hidden]{display:none!important;}

@media print{
  body{background:#fff; padding:0; font-size:12.5px;}
  .no-print{display:none!important;}
  .wrap{max-width:100%;}
  #result{border:none; box-shadow:none; border-radius:0;}
  .fiche-hero, .fiche-section{padding-inline:0;}
  .fiche-head{padding-inline:0;}
  section.block{display:none!important;}
}