/* ISIS — achromatique strict, fidèle au logo : la hiérarchie vient du contraste
   et de l'inversion, jamais de la couleur. */
:root{
  --ground:#FFFFFF; --ink:#0B0B0B; --ink-2:#4A4A4A; --ink-3:#777777;
  --surface:#F4F4F4; --surface-2:#EAEAEA; --rule:#DCDCDC; --rule-hard:#0B0B0B;
  --inv-ground:#0B0B0B; --inv-ink:#FFFFFF; --inv-ink-2:#A8A8A8;
  /* Le bandeau et la barre d'admin gardent l'aspect du logo — blanc sur noir —
     quel que soit le thème du lecteur. Definis une seule fois, jamais reinverses. */
  --hero-bg:#0B0B0B; --hero-ink:#FFFFFF; --hero-ink-2:#A6A6A6; --hero-rule:rgba(150,150,150,.42);
  --display:"Bricolage Grotesque","Archivo Black",Impact,sans-serif;
  --body:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --sp:clamp(16px,3.2vw,28px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0B0B0B; --ink:#F2F2F2; --ink-2:#ABABAB; --ink-3:#828282;
    --surface:#161616; --surface-2:#1F1F1F; --rule:#2C2C2C; --rule-hard:#F2F2F2;
    --inv-ground:#F2F2F2; --inv-ink:#0B0B0B; --inv-ink-2:#4A4A4A;
  }
}
:root[data-theme="dark"]{
  --ground:#0B0B0B; --ink:#F2F2F2; --ink-2:#ABABAB; --ink-3:#828282;
  --surface:#161616; --surface-2:#1F1F1F; --rule:#2C2C2C; --rule-hard:#F2F2F2;
  --inv-ground:#F2F2F2; --inv-ink:#0B0B0B; --inv-ink-2:#4A4A4A;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--body); font-size:16.5px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1060px; margin:0 auto; padding:0 var(--sp) 120px}

/* ---------------------------------------------------------------- marque */
.brand{display:flex; align-items:center; gap:14px; color:var(--ink)}
.brand svg{height:34px; width:auto; aspect-ratio:190/326; flex:0 0 auto; display:block}
.brand .rule{flex:1; height:1px; background:var(--rule)}
.brand .tag{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3);
}

/* ------------------------------------------------------------- bandeau */
.hero{background:var(--hero-bg); color:var(--hero-ink); border-bottom:1px solid var(--rule)}
.hero .inner{max-width:1060px; margin:0 auto; padding:26px var(--sp) clamp(38px,6vw,64px)}
.hero .brand{color:var(--hero-ink)}
.hero .brand .rule{background:var(--hero-rule)}
.hero .brand .tag{color:var(--hero-ink-2)}
.hero h1{
  font-family:var(--display); font-weight:800;
  font-size:clamp(2.2rem,6.4vw,4.15rem); line-height:.96; letter-spacing:-.03em;
  margin:clamp(30px,5vw,52px) 0 0; text-wrap:balance; max-width:16ch;
}
.hero .lede{
  margin:20px 0 0; max-width:56ch; color:var(--hero-ink-2);
  font-size:clamp(1rem,2.1vw,1.16rem); line-height:1.5;
}
.facts{display:flex; flex-wrap:wrap; gap:0; margin-top:clamp(28px,4vw,42px); border-top:1px solid var(--hero-rule)}
.fact{padding:14px 26px 0 0; margin-right:26px; border-right:1px solid var(--hero-rule)}
.fact:last-child{border-right:0}
.fact dt{font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--hero-ink-2); margin:0}
.fact dd{margin:5px 0 0; font-weight:600; font-size:1.02rem}

/* ------------------------------------------------------------- sections */
.note{
  border:1px solid var(--rule); border-left:6px solid var(--rule-hard);
  background:var(--surface); padding:18px 22px; margin:clamp(30px,5vw,46px) 0 0;
  font-size:15.5px; max-width:74ch;
}
.note p{margin:0} .note p+p{margin-top:9px}
.note b{font-weight:700}

.bloc{border-top:2px solid var(--rule-hard); margin-top:clamp(38px,5vw,58px); padding-top:0}
.bloc-head{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px;
  padding:16px 0 18px;
}
.bloc-n{
  font-family:var(--display); font-weight:800; font-size:1.05rem; line-height:1;
  width:38px; height:38px; display:grid; place-items:center;
  background:var(--inv-ground); color:var(--inv-ink);
}
.bloc-head h2{
  font-family:var(--display); font-weight:800; letter-spacing:-.02em;
  font-size:clamp(1.35rem,3.4vw,1.9rem); margin:0; line-height:1.05;
}
.bloc-dur{font-family:var(--mono); font-size:11px; color:var(--ink-3); white-space:nowrap}
.bloc-intro{margin:0 0 22px; color:var(--ink-2); max-width:72ch; font-size:15.5px}

/* ------------------------------------------------------------ questions */
.q{display:grid; grid-template-columns:56px minmax(0,1fr); gap:0 18px; padding:20px 0; border-top:1px solid var(--rule)}
.q:first-child{border-top:0}
.q-id{font-family:var(--mono); font-size:12px; font-weight:700; color:var(--ink-3); padding-top:4px}
.q-label{margin:0; font-weight:600; font-size:1.02rem; line-height:1.45}
.q-label .req{color:var(--ink-3); font-weight:400}
.q-aide{margin:6px 0 0; font-size:14px; color:var(--ink-3)}
.q-field{margin-top:12px}

input[type=text],input[type=email],input[type=number],textarea{
  width:100%; font:inherit; font-size:15.5px; color:var(--ink);
  background:var(--surface); border:1px solid var(--rule); border-radius:0;
  padding:10px 13px; transition:border-color .12s,background .12s;
}
textarea{min-height:88px; resize:vertical; line-height:1.5}
input:focus,textarea:focus{outline:0; border-color:var(--rule-hard); background:var(--ground)}
input::placeholder,textarea::placeholder{color:var(--ink-3)}

.choices{display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none}
.choices.col{flex-direction:column; align-items:stretch}
.choice{
  display:flex; align-items:flex-start; gap:9px; cursor:pointer;
  border:1px solid var(--rule); background:var(--surface);
  padding:8px 13px 8px 11px; font-size:15px; line-height:1.4; color:var(--ink-2);
  transition:border-color .12s,background .12s,color .12s;
}
.choice:hover{border-color:var(--ink-3)}
.choice input{position:absolute; opacity:0; width:0; height:0}
.choice .box{
  flex:0 0 13px; width:13px; height:13px; margin-top:4px;
  border:1.5px solid var(--ink-3); background:var(--ground); transition:all .12s;
}
.choice[data-shape=circle] .box{border-radius:50%}
.choice:has(input:checked){background:var(--inv-ground); color:var(--inv-ink); border-color:var(--inv-ground)}
.choice:has(input:checked) .box{background:var(--inv-ink); border-color:var(--inv-ink)}
.choice:has(input:focus-visible){outline:2px solid var(--rule-hard); outline-offset:2px}

.echelle{display:flex; flex-wrap:wrap; gap:6px}
.echelle .choice{padding:8px 14px; font-family:var(--mono); font-size:13px}
.echelle .choice .box{display:none}

/* -------------------------------------------------------------- matrice */
.matrice{margin-top:6px}
.matrice h3{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); margin:26px 0 0; padding-bottom:8px; border-bottom:1px solid var(--rule-hard);
}
.mrow{
  display:grid; grid-template-columns:minmax(0,1fr) 92px auto; gap:12px; align-items:center;
  padding:9px 0; border-bottom:1px solid var(--rule);
}
.mrow .tache{font-size:15px; color:var(--ink-2); min-width:0}
.mrow input[type=number]{padding:6px 9px; font-family:var(--mono); font-size:13.5px; text-align:right}
.envie{display:flex; gap:4px}
.envie label{
  cursor:pointer; font-family:var(--mono); font-size:12.5px; width:29px; height:32px;
  display:grid; place-items:center; border:1px solid var(--rule);
  background:var(--surface); color:var(--ink-3); transition:all .12s;
}
.envie input{position:absolute; opacity:0; width:0; height:0}
.envie label:has(input:checked){background:var(--inv-ground); color:var(--inv-ink); border-color:var(--inv-ground)}
.envie label:has(input:focus-visible){outline:2px solid var(--rule-hard); outline-offset:1px}
.mhead{
  display:grid; grid-template-columns:minmax(0,1fr) 92px auto; gap:12px;
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); padding:10px 0 4px;
}
.mhead span:nth-child(2){text-align:right}

/* -------------------------------------------------------------- actions */
.envoi{margin-top:clamp(40px,6vw,64px); border-top:2px solid var(--rule-hard); padding-top:26px}
.btn{
  font-family:var(--display); font-weight:800; font-size:1.05rem; letter-spacing:-.01em;
  background:var(--inv-ground); color:var(--inv-ink); border:2px solid var(--inv-ground);
  padding:15px 34px; cursor:pointer; transition:opacity .12s;
}
.btn:hover{opacity:.82}
.btn:disabled{opacity:.4; cursor:not-allowed}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--rule-hard)}
.statut{margin-top:14px; font-size:15px; color:var(--ink-2); min-height:1.4em}
.statut.err{color:var(--ink); font-weight:600}
.statut.err::before{content:"— "}

.merci{text-align:left; padding:clamp(50px,9vw,100px) 0; max-width:60ch}
.merci h1{font-family:var(--display); font-weight:800; font-size:clamp(2rem,5.5vw,3.2rem); letter-spacing:-.03em; line-height:1; margin:0 0 20px}
.merci p{font-size:1.08rem; color:var(--ink-2)}

.pied b{font-weight:700; color:var(--ink-2)}
.pied{margin-top:70px; padding-top:20px; border-top:1px solid var(--rule); font-size:13px; color:var(--ink-3); display:flex; flex-wrap:wrap; gap:8px 22px}

:focus-visible{outline:2px solid var(--rule-hard); outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

@media (max-width:640px){
  .q{grid-template-columns:1fr; gap:2px}
  .q-id{padding-top:0}
  .mrow,.mhead{grid-template-columns:1fr; gap:7px}
  .mhead{display:none}
  .mrow input[type=number]{max-width:110px; text-align:left}
  .fact{border-right:0; padding-right:0}
}

@media print{
  .hero{background:#fff; color:#000}
  .hero h1,.hero .lede,.hero .brand{color:#000}
  .envoi,.pied{display:none}
  .bloc{break-inside:avoid; page-break-inside:avoid}
  body{font-size:11pt}
}