:root{
  --green-dark:#0b3d24;
  --green:#166534;
  --green-mid:#1f8a4c;
  --green-light:#e8f5ec;
  --accent:#facc15;
  --red:#dc2626;
  --ink:#0f1f16;
  --muted:#5b6b60;
  --card-bg:#ffffff;
  --border:#dfe9e2;
  --radius:18px;
  --shadow:0 10px 30px -12px rgba(11,61,36,.25);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;}

html,body{
  margin:0;
  min-height:100%;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 10% -10%, #2fae63 0%, transparent 60%),
    radial-gradient(1000px 700px at 110% 10%, #0f5c33 0%, transparent 55%),
    linear-gradient(180deg,#0b3d24 0%, #123f27 40%, #e9f4ec 40%, #eef7f0 100%);
  background-attachment:fixed;
}

.bg-deco{
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 15% 25%, rgba(255,255,255,.05) 0, transparent 3%),
    radial-gradient(circle at 85% 15%, rgba(255,255,255,.05) 0, transparent 3%),
    radial-gradient(circle at 60% 35%, rgba(255,255,255,.04) 0, transparent 3%);
  z-index:0;
}

.topbar{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px clamp(16px,5vw,56px) 10px;
}

.brand{display:flex;align-items:center;gap:12px;color:#fff;}
.flag{font-size:32px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));}
.brand-text{font-size:20px;font-weight:800;letter-spacing:.2px;display:flex;flex-direction:column;line-height:1.2;}
.brand-sub{font-size:12px;font-weight:500;color:#cdeed9;letter-spacing:.3px;}

.score-pill{
  background:rgba(255,255,255,.15);
  color:#fff;
  border:1px solid rgba(255,255,255,.25);
  padding:8px 16px;
  border-radius:999px;
  font-size:14px;
  backdrop-filter:blur(6px);
}
.score-pill strong{font-size:16px;}

.btn-history-link{
  background:rgba(255,255,255,.12);
  color:#fff;
  border:1px solid rgba(255,255,255,.25);
  padding:8px 16px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  backdrop-filter:blur(6px);
  transition:.15s background;
}
.btn-history-link:hover{background:rgba(255,255,255,.22);}

main{
  position:relative;
  z-index:1;
  max-width:760px;
  margin:0 auto;
  padding:10px 18px 60px;
}

.card{
  background:var(--card-bg);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid var(--border);
  padding:clamp(22px,5vw,42px);
}

.screen h1{
  margin:0 0 10px;
  font-size:clamp(24px,4vw,32px);
  color:var(--green-dark);
  font-weight:800;
}

.lead{color:var(--muted);line-height:1.6;font-size:15.5px;margin-bottom:26px;}
.lead strong{color:var(--green);}

.options-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;
  margin-bottom:24px;
}

.option-card{
  position:relative;
  border:2px solid var(--border);
  border-radius:14px;
  padding:16px 14px;
  display:flex;
  flex-direction:column;
  gap:4px;
  cursor:pointer;
  transition:.15s border-color, .15s background, .15s transform;
}
.option-card:hover{transform:translateY(-2px);}
.option-card input{position:absolute;opacity:0;}
.option-card:has(input:checked){
  border-color:var(--green-mid);
  background:var(--green-light);
}
.option-title{font-weight:700;color:var(--ink);font-size:15px;}
.option-desc{font-size:13px;color:var(--muted);}

.cat-filters{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-bottom:30px;
}
.cat-filters-label{font-size:13px;color:var(--muted);font-weight:600;margin-right:4px;}
.chip{
  border:1px solid var(--border);
  background:#fafdfb;
  border-radius:999px;
  padding:7px 13px;
  font-size:13px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--ink);
  transition:.15s all;
}
.chip:has(input:checked){
  background:var(--green);
  border-color:var(--green);
  color:#fff;
}
.chip input{accent-color:var(--green-dark);}

.name-field{
  margin-bottom:26px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.name-field label{font-size:13px;color:var(--muted);font-weight:600;}
.name-field input{
  padding:12px 14px;
  border-radius:10px;
  border:1.5px solid var(--border);
  font-size:15px;
  color:var(--ink);
  font-family:inherit;
}
.name-field input:focus{outline:none;border-color:var(--green-mid);}

.btn-primary,.btn-secondary{
  font-size:15px;
  font-weight:700;
  padding:14px 26px;
  border-radius:12px;
  border:none;
  cursor:pointer;
  transition:.15s transform,.15s box-shadow,.15s opacity;
}
.btn-primary{
  background:linear-gradient(135deg,var(--green-mid),var(--green-dark));
  color:#fff;
  box-shadow:0 8px 18px -6px rgba(15,92,51,.5);
  width:100%;
}
.btn-primary:hover:not(:disabled){transform:translateY(-1px);}
.btn-primary:disabled{opacity:.45;cursor:not-allowed;transform:none;}
.btn-secondary{
  background:#f1f5f2;
  color:var(--ink);
  border:1px solid var(--border);
}
.btn-secondary:hover{background:#e7ece8;}

/* QUIZ */
.progress-row{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
.progress-track{flex:1;height:8px;border-radius:999px;background:#eef1ee;overflow:hidden;}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--green-mid),var(--green-dark));border-radius:999px;transition:width .3s ease;}
.progress-text{font-size:13px;color:var(--muted);font-weight:700;white-space:nowrap;}

.cat-badge{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  letter-spacing:.4px;
  text-transform:uppercase;
  padding:5px 12px;
  border-radius:999px;
  margin-bottom:14px;
  color:#fff;
}
.cat-badge[data-cat="regles"]{background:#166534;}
.cat-badge[data-cat="etiquette"]{background:#0369a1;}
.cat-badge[data-cat="securite"]{background:#b91c1c;}
.cat-badge[data-cat="vocabulaire"]{background:#7c3aed;}
.cat-badge[data-cat="score"]{background:#b45309;}

.question-text{
  font-size:clamp(18px,3vw,22px);
  line-height:1.4;
  margin:0 0 22px;
  color:var(--ink);
}

.choices{display:flex;flex-direction:column;gap:10px;margin-bottom:18px;}

.choice-btn{
  text-align:left;
  padding:14px 16px;
  border-radius:12px;
  border:2px solid var(--border);
  background:#fff;
  font-size:15px;
  color:var(--ink);
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:12px;
  transition:.12s border-color,.12s background;
}
.choice-btn:hover:not(:disabled){border-color:var(--green-mid);background:#f6fbf7;}
.choice-btn:disabled{cursor:default;}

.choice-letter{
  width:26px;height:26px;border-radius:50%;
  background:#eef1ee;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;color:var(--muted);
  flex-shrink:0;
}

.choice-btn.correct{border-color:var(--green-mid);background:#e9f9ee;}
.choice-btn.correct .choice-letter{background:var(--green-mid);color:#fff;}
.choice-btn.wrong{border-color:var(--red);background:#fdeeee;}
.choice-btn.wrong .choice-letter{background:var(--red);color:#fff;}

.explanation{
  background:var(--green-light);
  border:1px solid #cdeed9;
  border-radius:12px;
  padding:14px 16px;
  font-size:14px;
  line-height:1.55;
  color:#0b3d24;
  margin-bottom:18px;
}
.explanation strong{display:block;margin-bottom:4px;font-size:13px;text-transform:uppercase;letter-spacing:.3px;color:var(--green-dark);}

.quiz-actions{display:flex;gap:10px;justify-content:flex-end;}
.quiz-actions .btn-primary{width:auto;}

/* RESULTS */
.result-badge{font-size:56px;text-align:center;margin-bottom:6px;}
#screen-result h1{text-align:center;}
.result-score{text-align:center;font-size:20px;font-weight:700;color:var(--ink);margin:6px 0 2px;}
.result-percent{text-align:center;color:var(--muted);margin-bottom:28px;font-size:14px;}

.cat-breakdown{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:30px;}
.cat-item{
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  text-align:center;
}
.cat-item .cat-name{font-size:11px;text-transform:uppercase;font-weight:700;color:var(--muted);letter-spacing:.3px;display:block;margin-bottom:6px;}
.cat-item .cat-score{font-size:18px;font-weight:800;color:var(--green-dark);}

.review-title{font-size:15px;color:var(--ink);margin:0 0 12px;}
.review-list{display:flex;flex-direction:column;gap:10px;margin-bottom:28px;max-height:420px;overflow-y:auto;padding-right:4px;}
.review-item{
  border:1px solid var(--border);
  border-left:4px solid var(--green-mid);
  border-radius:10px;
  padding:12px 14px;
  font-size:13.5px;
  line-height:1.5;
}
.review-item.wrong{border-left-color:var(--red);}
.review-item .rq{font-weight:700;margin-bottom:4px;color:var(--ink);}
.review-item .ra{color:var(--muted);}
.review-item .ra.your-wrong{color:var(--red);}
.review-item .ra.your-correct{color:var(--green);}

.history-empty{
  text-align:center;
  color:var(--muted);
  padding:40px 20px;
  font-size:14px;
}

.history-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:520px;
  overflow-y:auto;
  padding-right:4px;
  margin-bottom:24px;
}

.history-item{
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.history-main{display:flex;flex-direction:column;gap:3px;min-width:160px;}
.history-name{font-weight:700;font-size:14.5px;color:var(--ink);}
.history-date{font-size:12px;color:var(--muted);}

.history-device{
  display:flex;
  flex-direction:column;
  gap:3px;
  font-size:12px;
  color:var(--muted);
  min-width:170px;
}
.history-device .dev-label{font-weight:600;color:var(--ink);}
.history-device .dev-icon{margin-right:5px;}

.history-score{
  text-align:right;
  min-width:90px;
}
.history-score .hs-val{font-size:18px;font-weight:800;color:var(--green-dark);}
.history-score .hs-pct{font-size:12px;color:var(--muted);}

footer{
  position:relative;z-index:1;
  text-align:center;
  color:#dff0e5;
  font-size:12px;
  padding:10px 20px 30px;
  opacity:.85;
}

@media (max-width:480px){
  .quiz-actions{flex-direction:column-reverse;}
  .quiz-actions button{width:100%;}
}