:root{
  --bg:#0B1610; --bg2:#101F16; --panel:#16281C; --line:rgba(201,168,76,.22);
  --au500:#C9A84C; --au400:#D9BC72; --au200:#EFD99A;
  --sage:#C3D5C2; --cream:#F3F1EA; --muted:rgba(243,241,234,.58); --faint:rgba(243,241,234,.34);
  --ff-d:'Fraunces','Cinzel',Didot,'Bodoni MT',Georgia,serif;
  --ff-b:'Inter','Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  background:var(--bg); color:var(--cream);
  font-family:var(--ff-b); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
input,textarea{font:inherit;color:inherit;}

/* -- chrome -- */
.top{
  position:sticky; top:0; z-index:30; background:rgba(11,22,16,.94);
  backdrop-filter:blur(8px); border-bottom:1px solid rgba(201,168,76,.16);
}
.top-in{
  max-width:1120px; margin:0 auto; padding:14px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.mark{font-family:var(--ff-d); font-size:14px; letter-spacing:.32em; color:var(--au500);}
.count{font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--faint);}
.rail{height:2px; background:rgba(201,168,76,.14);}
.rail-fill{height:100%; width:0%; background:var(--au500); transition:width 420ms cubic-bezier(.22,1,.36,1);}

.stage{max-width:1120px; margin:0 auto; padding:clamp(34px,7vh,72px) 22px calc(var(--navh,96px) + 56px);}
.step{display:none; animation:rise 460ms cubic-bezier(.22,1,.36,1);}
.step.on{display:block;}
@keyframes rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.step{animation:none;} *{transition:none!important;}}

.eyebrow{
  font-size:10.5px; font-weight:600; letter-spacing:.28em; text-transform:uppercase;
  color:var(--au500); display:flex; align-items:center; gap:12px; margin-bottom:22px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--au500);flex:none;}
.q{
  font-family:var(--ff-d); font-weight:600;
  font-size:clamp(28px,4.6vw,46px); line-height:1.12; letter-spacing:-.01em;
  color:var(--sage); text-wrap:balance; max-width:20ch;
}
.help{color:var(--muted); font-size:17px; margin-top:16px; max-width:56ch;}

/* -- options -- */
.opts{display:flex; flex-direction:column; gap:10px; margin-top:34px; max-width:760px;}
.opt{
  display:flex; align-items:baseline; gap:16px; width:100%; text-align:left;
  padding:19px 22px; background:var(--panel); border:1px solid transparent;
  transition:background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.opt:hover{background:#1B3123;}
.opt:focus-visible{outline:2px solid var(--au400); outline-offset:2px;}
.opt[aria-pressed="true"]{background:#1D3626; border-color:var(--au500);}
.opt .tick{
  width:9px; height:9px; flex:none; border:1px solid var(--faint); border-radius:50%;
  transform:translateY(5px); transition:background 160ms ease, border-color 160ms ease;
}
.opt[aria-pressed="true"] .tick{background:var(--au500); border-color:var(--au500);}
.opt b{font-weight:600; font-size:17px; color:var(--cream); display:block;}
.opt span{display:block; font-size:14.5px; color:var(--muted); margin-top:3px;}
.opt .anchor{
  margin-left:auto; flex:none; font-size:11px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint); transform:translateY(3px); white-space:nowrap;
}

/* -- text inputs -- */
.field{max-width:640px; margin-top:32px;}
.field label{
  display:block; font-size:10.5px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--faint); margin-bottom:9px;
}
.inp{
  width:100%; padding:15px 17px; background:var(--panel);
  border:1px solid rgba(243,241,234,.12); border-radius:0; font-size:17px;
  transition:border-color 160ms ease;
}
.inp::placeholder{color:rgba(243,241,234,.26);}
.inp:focus{outline:none; border-color:var(--au500);}
textarea.inp{min-height:130px; resize:vertical; line-height:1.65;}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
@media(max-width:620px){.grid2{grid-template-columns:1fr;}}

/* -- the radar step -- */
.radar-wrap{display:grid; grid-template-columns:1fr 400px; gap:clamp(28px,4vw,56px); margin-top:34px; align-items:start;}
@media(max-width:900px){.radar-wrap{grid-template-columns:1fr;}}
.rows{display:flex; flex-direction:column; gap:3px;}
.row{
  display:grid; grid-template-columns:1fr auto; gap:10px 18px; align-items:center;
  padding:13px 16px; background:var(--panel); transition:background 160ms ease;
}
.row.done{background:#152719;}
.row .rn{grid-column:1; grid-row:1; font-size:15.5px; font-weight:500;}
.row .rd{grid-column:1; grid-row:2; font-size:13px; color:var(--faint); margin-top:1px;}
.dots{grid-column:2; grid-row:1 / span 2; display:flex; gap:7px;}
.dot{
  width:30px; height:30px; border:1px solid rgba(243,241,234,.18); border-radius:50%;
  font-size:12.5px; color:var(--faint); display:grid; place-items:center;
  transition:all 160ms ease;
}
.dot:hover{border-color:var(--au400); color:var(--au200);}
.dot:focus-visible{outline:2px solid var(--au400); outline-offset:2px;}
.dot.set{background:var(--au500); border-color:var(--au500); color:#0B1610; font-weight:600;}
.scale-note{
  display:flex; justify-content:space-between; margin-top:14px;
  font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--faint);
}
.radar-panel{position:sticky; top:96px;}
.radar-card{background:var(--bg2); border:1px solid var(--line); padding:22px 20px 26px;}
.radar-card h3{
  font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--au500); text-align:center; margin-bottom:6px;
}
.radar-sub{text-align:center; font-size:13px; color:var(--faint); margin-bottom:10px;}
.radar-card svg{display:block; width:100%; height:auto;}
#poly{transition:opacity 200ms ease;}
.radar-empty{text-align:center; font-size:13.5px; color:var(--faint); font-style:italic; margin-top:8px;}

/* -- coach reaction -- */
.coach{
  display:none; gap:15px; align-items:flex-start; max-width:640px;
  margin-top:28px; padding:17px 20px; background:var(--bg2); border-left:2px solid var(--au500);
}
.coach.on{display:flex; animation:rise 400ms cubic-bezier(.22,1,.36,1);}
.coach .cl{
  font-size:9.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--au500); margin-bottom:6px;
}
.coach p{font-size:16px; line-height:1.6; color:var(--muted);}
.coach p em{color:var(--cream); font-style:italic;}

/* -- nav -- */
.nav{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  background:linear-gradient(to top, var(--bg) 62%, rgba(11,22,16,0));
  padding:20px 22px 22px;
}
.nav-in{max-width:1120px; margin:0 auto; display:flex; align-items:center; gap:18px;}
.back{font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--faint);}
.back:hover{color:var(--cream);}
.next{
  margin-left:auto; padding:16px 38px; background:var(--au500); color:#0B1610;
  font-size:11.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  transition:background 160ms ease, opacity 160ms ease;
}
.next:hover:not(:disabled){background:var(--au200);}
.next:disabled,.next[aria-disabled="true"]{opacity:.3; cursor:not-allowed; pointer-events:none;}
.back,.next{text-decoration:none; display:inline-block; text-align:center;}
.next:focus-visible{outline:2px solid var(--cream); outline-offset:3px;}
.hint{font-size:12px; color:var(--faint);}

/* -- verdict -- */
.verdict{text-align:center;}
.v-name{
  font-family:var(--ff-d); font-weight:600; font-size:clamp(32px,6vw,62px);
  line-height:1.06; color:var(--au400); margin-top:8px; text-wrap:balance;
}
.v-read{font-size:clamp(19px,2.4vw,24px); line-height:1.55; color:var(--sage); max-width:34ch; margin:24px auto 0;}
.v-grid{
  display:grid; grid-template-columns:340px 1fr; gap:clamp(28px,5vw,56px);
  align-items:center; margin:46px auto 0; max-width:880px; text-align:left;
}
@media(max-width:820px){.v-grid{grid-template-columns:1fr; text-align:center;}}
.v-list{display:flex; flex-direction:column; gap:18px;}
.v-item{display:flex; gap:15px; align-items:baseline;}
.v-item i{font-family:var(--ff-d); font-size:20px; color:var(--au500); font-style:normal; flex:none;}
.v-item p{font-size:17px; color:var(--muted);}
.v-item p b{color:var(--cream); font-weight:600;}
.v-cta{margin-top:52px; padding-top:38px; border-top:1px solid var(--line);}
.v-cta p{color:var(--muted); max-width:52ch; margin:0 auto 26px;}
.recap-l{font-size:10px!important; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--au500)!important; margin:0 auto 12px!important;}
.recap{font-family:var(--ff-d); font-size:clamp(17px,2.2vw,21px); color:var(--sage)!important;
  max-width:46ch!important; margin:0 auto 34px!important; line-height:1.5;}
.recap i{color:var(--au500); font-style:normal; padding:0 4px;}
.sent{
  display:inline-block; padding:17px 42px; background:var(--au500); color:#0B1610;
  text-decoration:none; font-size:11.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
}
.sent:hover{background:var(--au200);}
.v-foot{margin-top:24px; font-size:13px; color:var(--faint);}

.err{color:#E5A3A3; font-size:14px; margin-top:12px; display:none;}
.err.on{display:block;}

/* -- mobile : ajoute en fin de feuille pour gagner dans la cascade -- LAYOUT MOBILE */
@media(max-width:620px){
  /* l'etiquette Playtomic en nowrap reduisait la description a une colonne de
     trois mots : on la renvoie sous le texte. */
  .opt{flex-wrap:wrap; padding:17px 18px;}
  .opt .anchor{order:3; width:100%; margin-left:0; padding-left:25px; margin-top:9px; transform:none;}
  .opt b{font-size:16.5px;}
  .q{font-size:clamp(25px,7.2vw,33px); max-width:none;}
  .help{font-size:16px;}
  .top-in{padding:12px 18px;}
  .stage{padding-left:18px; padding-right:18px;}
  .nav{padding:16px 18px 18px;}
  .next{padding:15px 26px; letter-spacing:.14em;}
  .row{padding:12px 14px;}
  .dots{gap:5px;}
  .row .rn{font-size:15px;}
  .hint{display:none;}
  .radar-panel{position:static;}
}