/* Quiz CDSD — feuille de style unique.
   Thème clair, polychrome : chaque bloc porte sa couleur, appliquée au panneau,
   au titre, au bouton, au chrono et au score. La couleur encode le bloc, elle
   ne décore pas. */

:root{
  color-scheme: light;

  --page:#f3f5fb;
  --surface:#ffffff;
  --ink:#171a2c;
  --ink-2:#525a75;
  --ink-3:#8189a4;
  --rule:#e3e7f2;
  --rule-strong:#c6cde0;

  --h0:#5a6280;   /* partie mixte */
  --h1:#2f5bea;   /* cobalt   */
  --h2:#0f9c7c;   /* jade     */
  --h3:#7b3fe4;   /* violet   */
  --h4:#df3f5d;   /* rose     */
  --h5:#c97605;   /* ambre    */

  --warn:#c97605;
  --alert:#df3f5d;
  --good:#0f9c7c;

  --hue:var(--h1);
  --tint:color-mix(in srgb, var(--hue) 9%, #ffffff);
  --tint-strong:color-mix(in srgb, var(--hue) 16%, #ffffff);
  --edge:color-mix(in srgb, var(--hue) 26%, #ffffff);

  --r:14px;
  --r-sm:10px;
  --shell:min(74rem, 100% - 3rem);
}

.b0{--hue:var(--h0)} .b1{--hue:var(--h1)} .b2{--hue:var(--h2)}
.b3{--hue:var(--h3)} .b4{--hue:var(--h4)} .b5{--hue:var(--h5)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0; min-height:100vh; display:flex; flex-direction:column;
  background:var(--page); color:var(--ink);
  font:400 1rem/1.62 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-feature-settings:"kern" 1;
}

/* ---------- Typographie ---------- */

h1,h2,h3{margin:0; line-height:1.14; font-weight:700; letter-spacing:-0.028em; color:var(--ink)}
h1{font-size:clamp(1.9rem,4.2vw,2.9rem)}
h2{font-size:1.3rem; letter-spacing:-0.02em}
h3{font-size:1.06rem; letter-spacing:-0.015em}
p{margin:0 0 1rem; max-width:64ch}
a{color:var(--hue); text-decoration-thickness:1.5px; text-underline-offset:3px}
.muted{color:var(--ink-2); font-size:.93rem}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:2.5px solid var(--hue); outline-offset:3px; border-radius:4px}

/* ---------- Ossature ---------- */

.topbar{
  width:var(--shell); margin:0 auto; padding:1.15rem 0;
  display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;
}
.brand{
  margin-right:auto; display:flex; align-items:center; gap:.55rem;
  color:var(--ink); text-decoration:none; font-weight:700;
  font-size:1.08rem; letter-spacing:-0.03em;
}
.brand .mark{
  width:1.55rem; height:1.55rem; border-radius:7px; flex:0 0 auto;
  background:linear-gradient(140deg,var(--h1),var(--h3) 55%,var(--h4));
}
.topbar nav{display:flex; align-items:center; gap:1.35rem; flex-wrap:wrap}
.topbar nav a{color:var(--ink-2); text-decoration:none; font-size:.95rem; font-weight:500}
.topbar nav a:hover{color:var(--ink)}
.who{
  color:var(--ink); font-size:.9rem; font-weight:600;
  background:var(--surface); border:1px solid var(--rule);
  border-radius:99px; padding:.3rem .8rem;
}
.inline{display:inline}

main{width:var(--shell); margin:0 auto; padding:1.4rem 0 4.5rem; flex:1 0 auto}
main > section + section{margin-top:3.2rem}
.narrow{max-width:25rem}

footer{
  width:var(--shell); margin:0 auto; padding:1.4rem 0 2.6rem;
  border-top:1px solid var(--rule); color:var(--ink-3); font-size:.84rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}

/* ---------- Contrôles ---------- */

.cta,.ghost{
  display:inline-block; border-radius:var(--r-sm); padding:.68rem 1.25rem;
  font:inherit; font-size:.96rem; font-weight:600; text-decoration:none;
  cursor:pointer; border:1.5px solid transparent;
  transition:filter .12s ease, border-color .12s ease, background-color .12s ease;
}
.cta{background:var(--hue); color:#fff}
.cta:hover{filter:brightness(1.08) saturate(1.05)}
.ghost{background:var(--surface); color:var(--ink); border-color:var(--rule-strong)}
.ghost:hover{border-color:var(--hue); color:var(--hue)}
.cta[disabled],.ghost[disabled]{opacity:.45; cursor:not-allowed}
.big{padding:.85rem 1.6rem; font-size:1rem}
.wide{display:block; width:100%; text-align:center}

button.link{background:none; border:0; padding:0; font:inherit; font-size:.95rem; color:var(--ink-2); cursor:pointer}
button.link:hover{color:var(--ink)}
button.link.danger{color:var(--alert)}

/* ---------- Accueil ---------- */

.intro{
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--r);
  padding:clamp(1.6rem,4vw,2.6rem); margin-bottom:2.6rem;
}
.intro h1{max-width:16ch}
.intro .lede{color:var(--ink-2); max-width:52ch; margin:.9rem 0 1.5rem; font-size:1.05rem}

.pill{
  display:inline-flex; align-items:center; gap:.5rem; border-radius:99px;
  padding:.4rem .95rem; font-size:.9rem; font-weight:600;
  background:var(--tint); color:var(--hue); border:1px solid var(--edge);
}
.pill b{font-variant-numeric:tabular-nums; font-weight:700}

.keyfigures{display:flex; gap:2.6rem; flex-wrap:wrap; margin-top:1.7rem; padding-top:1.6rem; border-top:1px solid var(--rule)}
.keyfigures div{min-width:7rem}
.keyfigures .k{
  display:block; font-size:2rem; font-weight:700; line-height:1.05;
  letter-spacing:-0.04em; font-variant-numeric:tabular-nums;
}
.keyfigures .l{display:block; color:var(--ink-2); font-size:.88rem; margin-top:.25rem}
.keyfigures div:nth-child(1) .k{color:var(--h1)}
.keyfigures div:nth-child(2) .k{color:var(--h3)}
.keyfigures div:nth-child(3) .k{color:var(--h2)}

/* ---------- Panneaux de bloc ---------- */

.blocs{display:grid; gap:1.15rem; margin-top:1.5rem; grid-template-columns:repeat(auto-fit,minmax(19rem,1fr))}
.bloc-card{
  display:flex; flex-direction:column; gap:.85rem;
  padding:1.5rem; border-radius:var(--r);
  background:var(--tint); border:1px solid var(--edge);
  transition:border-color .14s ease, background-color .14s ease;
}
.bloc-card:hover{background:var(--tint-strong); border-color:var(--hue)}
.bloc-card h3{color:var(--hue); font-size:1.1rem}
.bloc-card .count{margin:0; font-size:.88rem; font-weight:600; color:var(--ink-2); font-variant-numeric:tabular-nums}
.bloc-card p:not(.count){margin:0; font-size:.93rem; color:var(--ink-2)}
.bloc-card .cta,.bloc-card .ghost{margin-top:auto}
.bloc-card.mixte{background:var(--surface); border-style:dashed; border-color:var(--rule-strong)}
.bloc-card.mixte h3{color:var(--ink)}

.chips{display:flex; flex-wrap:wrap; gap:.4rem; padding:0; margin:0; list-style:none}
.chips li{
  background:var(--surface); border:1px solid var(--edge); border-radius:99px;
  padding:.26rem .68rem; font-size:.79rem; color:var(--ink-2); white-space:nowrap;
}

/* ---------- Chiffres et tableaux ---------- */

.stats{display:flex; gap:2.8rem; flex-wrap:wrap}
.stat .k{display:block; font-size:1.9rem; font-weight:700; letter-spacing:-0.035em; font-variant-numeric:tabular-nums; line-height:1.1; color:var(--hue)}
.stat .l{display:block; color:var(--ink-2); font-size:.87rem; margin-top:.2rem}

.card{background:var(--surface); border:1px solid var(--rule); border-radius:var(--r); padding:.4rem 1.25rem}
table{width:100%; border-collapse:collapse; font-size:.94rem}
th,td{padding:.72rem .55rem; text-align:left; border-bottom:1px solid var(--rule)}
th{font-weight:600; font-size:.82rem; color:var(--ink-3)}
tbody tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}
tbody tr:hover{background:var(--page)}
.rank{width:2.6rem; color:var(--ink-3); font-variant-numeric:tabular-nums}
tr.me{background:var(--tint)}
tr.me:hover{background:var(--tint)}
tr.me td{font-weight:600}
.table-wrap{overflow-x:auto}

.tag{
  display:inline-flex; align-items:center; gap:.4rem; border-radius:99px;
  padding:.18rem .6rem .18rem .5rem; font-size:.8rem; font-weight:600;
  background:var(--tint); color:var(--hue); border:1px solid var(--edge); white-space:nowrap;
}
.tag::before{content:""; width:.45rem; height:.45rem; border-radius:50%; background:var(--hue)}

/* ---------- Formulaires ---------- */

.field{margin-bottom:1.35rem}
.field:last-of-type{margin-bottom:1.9rem}
label{display:block; font-weight:600; font-size:.93rem; margin-bottom:.42rem}
input[type="email"],input[type="password"],input[type="text"]{
  display:block; width:100%; padding:.72rem .85rem; font:inherit;
  border:1.5px solid var(--rule-strong); border-radius:var(--r-sm);
  background:var(--surface); color:var(--ink);
}
input[type="email"]:focus,input[type="password"]:focus,input[type="text"]:focus{
  border-color:var(--hue); outline:none; box-shadow:0 0 0 4px var(--tint);
}
.hint{color:var(--ink-3); font-size:.83rem; margin:.38rem 0 0}
.errors{
  list-style:none; margin:0 0 1.5rem; padding:.8rem 1.1rem; font-size:.93rem;
  background:color-mix(in srgb,var(--alert) 9%,#fff);
  border:1px solid color-mix(in srgb,var(--alert) 30%,#fff); border-radius:var(--r-sm);
}
.errors li + li{margin-top:.3rem}
.form-foot{margin-top:1.7rem; color:var(--ink-2); font-size:.93rem}

select{padding:.55rem .75rem; font:inherit; font-size:.94rem; border-radius:var(--r-sm); border:1.5px solid var(--rule-strong); background:var(--surface); color:var(--ink)}
.filter{display:flex; gap:.7rem; align-items:center; flex-wrap:wrap; margin-bottom:1.4rem}
.filter label{margin:0; font-weight:400; font-size:.9rem; color:var(--ink-2)}

/* ---------- Partie en cours ---------- */

.timerbar{position:sticky; top:0; z-index:20; height:5px; width:100vw; margin-left:calc(50% - 50vw); background:var(--rule)}
.timerbar span{display:block; height:100%; width:100%; transform-origin:left center; background:var(--hue); transition:background-color .35s linear}
.timerbar.warn span{background:var(--warn)}
.timerbar.critical span{background:var(--alert)}

.quizhead{display:flex; align-items:center; gap:1rem; flex-wrap:wrap; padding:1.6rem 0 1.1rem}
.step{font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink-2)}
.step em{font-style:normal; color:var(--ink-3); font-weight:400}
.countdown{
  margin-left:auto; font-variant-numeric:tabular-nums; line-height:1;
  font-size:2.6rem; font-weight:700; letter-spacing:-0.05em;
  color:var(--hue); min-width:2.4ch; text-align:right;
}
.countdown.warn{color:var(--warn)}
.countdown.critical{color:var(--alert)}

.meta{display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; font-size:.84rem}
.theme-tag{background:var(--tint); color:var(--hue); border:1px solid var(--edge); border-radius:99px; padding:.2rem .7rem; font-weight:600}
.diff{color:var(--hue); letter-spacing:.14em; font-size:.72rem}

.question{border:0; padding:0; margin:0; min-inline-size:0}
.question[hidden]{display:none}
.prompt{font-size:clamp(1.2rem,2.4vw,1.55rem); line-height:1.3; margin:1.4rem 0 1.7rem; max-width:44ch}

.options{display:grid; gap:.55rem; max-width:52rem}
.option{
  position:relative; display:grid; grid-template-columns:2.1rem 1fr; align-items:start;
  gap:.9rem; padding:.95rem 1.1rem; cursor:pointer; background:var(--surface);
  border:1.5px solid var(--rule); border-radius:var(--r-sm);
  transition:border-color .1s ease, background-color .1s ease;
}
.option:hover{border-color:var(--hue); background:var(--tint)}
.option input[type="radio"]{position:absolute; width:1px; height:1px; margin:0; opacity:0; pointer-events:none}
.option .key{
  display:grid; place-items:center; width:2.1rem; height:2.1rem; border-radius:8px;
  background:var(--page); border:1.5px solid var(--rule-strong);
  font-size:.85rem; font-weight:700; color:var(--ink-2);
}
.option .text{padding-top:.24rem; line-height:1.45}
.option:has(input:checked),.option.selected{border-color:var(--hue); background:var(--tint)}
.option:has(input:checked) .key,.option.selected .key{background:var(--hue); border-color:var(--hue); color:#fff}
.option:has(input:focus-visible){outline:2.5px solid var(--hue); outline-offset:2px}

.quiz.locked .option{cursor:default; opacity:.5}
.quiz.locked .option:hover{border-color:var(--rule); background:var(--surface)}
.quiz.locked .option:has(input:checked),.quiz.locked .option.selected{opacity:1}

.quizfoot{margin-top:1.7rem; min-height:2.2rem; font-size:.88rem}
.status{color:var(--ink-2)}
.status.timeout{color:var(--alert); font-weight:600}

@keyframes advance{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
.question.entering{animation:advance .17s ease-out}
@media (prefers-reduced-motion: reduce){
  .question.entering{animation:none}
  .timerbar span{transition:none}
}

/* ---------- Résultat ---------- */

.scorecard{
  background:var(--tint); border:1px solid var(--edge); border-radius:var(--r);
  padding:clamp(1.4rem,3.5vw,2.1rem); display:flex; align-items:flex-end;
  gap:1.8rem; flex-wrap:wrap;
}
.scorecard .big-num{
  font-size:clamp(3.2rem,9vw,4.8rem); font-weight:700; line-height:.85;
  letter-spacing:-0.055em; font-variant-numeric:tabular-nums; color:var(--hue);
}
.scorecard .pct{font-size:1.2rem; color:var(--ink-2); font-variant-numeric:tabular-nums; padding-bottom:.35rem}
.scorecard .side{margin-left:auto; text-align:right; color:var(--ink-2); font-size:.91rem; line-height:1.55}

.notice{
  padding:.85rem 1.1rem; margin:1.2rem 0 0; font-size:.93rem; border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--alert) 9%,#fff);
  border:1px solid color-mix(in srgb,var(--alert) 28%,#fff);
}
.actions{display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.6rem}

.meters{display:grid; gap:.7rem; max-width:40rem}
.meter{display:grid; grid-template-columns:1fr 6rem 3.2rem; gap:1rem; align-items:center; font-size:.94rem}
.meter .track{height:8px; background:var(--rule); border-radius:99px; overflow:hidden}
.meter .track i{display:block; height:100%; background:var(--hue); border-radius:99px}
.meter .val{text-align:right; color:var(--ink-2); font-variant-numeric:tabular-nums; font-size:.88rem}

.review{
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--r);
  padding:1.3rem 1.4rem; margin-bottom:.9rem;
  display:grid; grid-template-columns:2.1rem 1fr; gap:0 1rem;
}
.review.ok{border-left:4px solid var(--good)}
.review.ko{border-left:4px solid var(--alert)}
.review .verdict{grid-row:1 / span 4; width:2.1rem; height:2.1rem; border-radius:50%; display:grid; place-items:center; font-size:.95rem; font-weight:700; color:#fff}
.review.ok .verdict{background:var(--good)}
.review.ko .verdict{background:var(--alert)}
.review .rmeta{display:flex; gap:.7rem; flex-wrap:wrap; font-size:.81rem; color:var(--ink-3)}
.review h3{margin:.35rem 0 .85rem; max-width:52ch}

.answers{list-style:none; margin:0 0 .95rem; padding:0; display:grid; gap:.3rem; max-width:52rem}
.answers li{display:grid; grid-template-columns:1.4rem 1fr auto; gap:.7rem; align-items:baseline; padding:.5rem .7rem; border-radius:8px; font-size:.94rem; color:var(--ink-2)}
.answers li.right{background:color-mix(in srgb,var(--good) 12%,#fff); color:var(--ink)}
.answers li.wrong{background:color-mix(in srgb,var(--alert) 10%,#fff); color:var(--ink)}
.answers .mark{font-weight:700}
.answers li.right .mark{color:var(--good)}
.answers li.wrong .mark{color:var(--alert)}
.yours{font-size:.78rem; color:var(--ink-3); white-space:nowrap}
.explanation{border-left:3px solid var(--rule-strong); padding-left:1rem; margin:0; color:var(--ink-2); font-size:.93rem; max-width:64ch}

/* ---------- Navigation secondaire ---------- */

.subnav{display:flex; gap:.5rem; flex-wrap:wrap; margin:.6rem 0 1.9rem}
.subnav a{
  color:var(--ink-2); text-decoration:none; font-size:.92rem; font-weight:500;
  padding:.42rem .9rem; border-radius:99px; border:1px solid var(--rule); background:var(--surface);
}
.subnav a:hover{border-color:var(--rule-strong); color:var(--ink)}
.subnav a.on{background:var(--hue); border-color:var(--hue); color:#fff; font-weight:600}
.rowactions{display:flex; gap:.9rem; white-space:nowrap}

/* ---------- Écrans étroits ---------- */

@media (max-width:46rem){
  :root{--shell:calc(100% - 1.6rem)}
  main{padding:.8rem 0 3rem}
  main > section + section{margin-top:2.3rem}
  .intro{padding:1.4rem; margin-bottom:2rem}
  .keyfigures{gap:1.6rem}
  .keyfigures .k{font-size:1.6rem}
  .countdown{font-size:2rem}
  .quizhead{padding:1.1rem 0 .8rem}
  .review{grid-template-columns:1.8rem 1fr; gap:0 .75rem; padding:1.1rem}
  .review .verdict{width:1.8rem; height:1.8rem; font-size:.85rem}
  .scorecard .side{margin-left:0; text-align:left; width:100%}
  .meter{grid-template-columns:1fr 3.5rem 2.8rem; gap:.6rem}
  .topbar{gap:.8rem; padding:.9rem 0}
  .topbar nav{gap:1rem}
  .card{padding:.3rem .9rem}
}