/* ============================================================
   DEME AGENCY — Plateforme de test CPE
   Feuille de style partagee (index.html + admin.html)
   ============================================================ */
:root{
  --bg:#FAF7F2;
  --paper:#FFFFFF;
  --paper-2:#F1ECE3;
  --ink:#1C1730;
  --ink-soft:#5B5570;
  --line:#E4DDD0;
  --violet:#584CA0;
  --violet-deep:#3D3378;
  --violet-tint:#EDEAF9;
  --gold:#C4901E;
  --gold-tint:#FBF0D9;
  --success:#2F7D5C;
  --success-tint:#E4F3EC;
  --danger:#B24444;
  --danger-tint:#FBEAEA;
  --stub-off:#E4DDD0;
  --lvl-decouverte:#8A4A2B;
  --lvl-intermediaire:#1E5F74;
  --lvl-avance:#2D5016;
  --lvl-expert:#584CA0;
  --shadow: 0 1px 2px rgba(28,23,48,.06), 0 12px 32px -12px rgba(28,23,48,.18);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#141020; --paper:#1E1832; --paper-2:#241D3B; --ink:#F2EEFB; --ink-soft:#B6AFD1;
    --line:#332B4E; --violet:#9384DE; --violet-deep:#B7ACEA; --violet-tint:#2A2348;
    --gold:#E4B24E; --gold-tint:#3A2F1A; --success:#5FC090; --success-tint:#1D3A2E;
    --danger:#E08080; --danger-tint:#3A1F1F;
    --stub-off:#332B4E;
    --lvl-decouverte:#D08A5F; --lvl-intermediaire:#5EC2DE; --lvl-avance:#7FCB63; --lvl-expert:#B7ACEA;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 20px 44px -16px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bg:#141020; --paper:#1E1832; --paper-2:#241D3B; --ink:#F2EEFB; --ink-soft:#B6AFD1;
  --line:#332B4E; --violet:#9384DE; --violet-deep:#B7ACEA; --violet-tint:#2A2348;
  --gold:#E4B24E; --gold-tint:#3A2F1A; --success:#5FC090; --success-tint:#1D3A2E;
  --danger:#E08080; --danger-tint:#3A1F1F;
  --stub-off:#332B4E;
  --lvl-decouverte:#D08A5F; --lvl-intermediaire:#5EC2DE; --lvl-avance:#7FCB63; --lvl-expert:#B7ACEA;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 20px 44px -16px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html,body{ background:var(--bg); }
body{
  margin:0; color:var(--ink);
  font-family:"Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  min-height:100vh; display:flex; justify-content:center; align-items:flex-start;
  padding: clamp(20px, 5vw, 56px) 16px 80px;
}
h1,h2,h3,.display{ font-family:"Unbounded", ui-sans-serif, system-ui, sans-serif; text-wrap:balance; letter-spacing:-0.01em; }
.stage{ width:100%; max-width:680px; }
.stage.wide{ max-width:1040px; }

.tag{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--violet-deep); background:var(--violet-tint);
  padding:6px 12px; border-radius:100px; margin-bottom:18px;
}
.tag .dot{ width:6px; height:6px; border-radius:50%; background:var(--violet-deep); }

.card{ background:var(--paper); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow); overflow:hidden; margin-bottom:20px; }
.card-pad{ padding: clamp(22px, 4vw, 40px); }

.band{ background:var(--violet); color:#fff; padding: 20px clamp(22px,4vw,40px); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.band .brand{ font-family:"Unbounded"; font-weight:700; font-size:14px; letter-spacing:.04em; }
.band .brand small{ display:block; font-family:"Hanken Grotesk"; font-weight:500; font-size:11px; opacity:.75; letter-spacing:.06em; text-transform:uppercase; margin-top:2px;}
.band a.brand{ color:#fff; text-decoration:none; }

.eyebrow{ color:var(--gold); font-weight:700; font-size:13px; letter-spacing:.09em; text-transform:uppercase; margin:0 0 10px; }
h1.title{ font-size: clamp(24px,4vw,32px); font-weight:700; margin:0 0 14px; line-height:1.15; color:var(--ink); }
.lede{ color:var(--ink-soft); font-size:16px; line-height:1.6; margin:0 0 24px; max-width:56ch; }

.facts{ display:flex; gap:22px; flex-wrap:wrap; margin-bottom:26px; }
.fact{ min-width:110px; }
.fact b{ display:block; font-family:"Unbounded"; font-size:20px; color:var(--violet-deep); }
.fact span{ font-size:12px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em; }

form{ display:grid; gap:14px; }
.field{ display:grid; gap:6px; }
.field label{ font-size:12px; font-weight:600; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em; }
.field input{ font:inherit; font-size:16px; padding:13px 14px; border-radius:12px; border:1.5px solid var(--line); background:var(--paper-2); color:var(--ink); width:100%; }
.field input:focus{ outline:2px solid var(--violet); outline-offset:1px; border-color:var(--violet); }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:520px){ .row2{ grid-template-columns:1fr; } }

button{ font-family:"Hanken Grotesk"; cursor:pointer; }
.btn{ font-weight:700; font-size:15px; border:none; border-radius:12px; padding:14px 20px; background:var(--violet); color:#fff; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:transform .15s ease, background .15s ease; text-decoration:none; }
.btn:hover{ background:var(--violet-deep); }
.btn:active{ transform:scale(.98); }
.btn:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }
.btn.ghost{ background:transparent; color:var(--violet); border:1.5px solid var(--line); }
.btn.ghost:hover{ background:var(--violet-tint); }
.btn.sm{ padding:9px 14px; font-size:13px; border-radius:10px; }
.btn.block{ width:100%; }

.note{ margin-top:16px; font-size:13px; color:var(--ink-soft); line-height:1.5; }
.notice{ padding:13px 16px; border-radius:12px; background:var(--gold-tint); color:var(--ink); font-size:13px; line-height:1.5; display:flex; gap:10px; align-items:flex-start; border:1px solid color-mix(in srgb, var(--gold) 40%, transparent); margin-top:16px; }
.notice.error{ background:var(--danger-tint); border-color:color-mix(in srgb, var(--danger) 40%, transparent); }
.notice.success{ background:var(--success-tint); border-color:color-mix(in srgb, var(--success) 40%, transparent); }

/* module grid on the learner home */
.modgrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(210px,1fr)); gap:12px; margin:6px 0 8px; }
.modcard{ border:1.5px solid var(--line); background:var(--paper-2); border-radius:14px; padding:14px 16px; text-align:left; display:flex; flex-direction:column; gap:8px; }
.modcard .mtop{ display:flex; justify-content:space-between; align-items:center; }
.modcard .mnum{ font-family:"Unbounded"; font-size:12px; font-weight:700; color:var(--violet-deep); }
.modcard .mstatus{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:3px 8px; border-radius:100px; }
.modcard .mstatus.todo{ background:var(--paper); color:var(--ink-soft); border:1px solid var(--line); }
.modcard .mstatus.done{ background:var(--success-tint); color:var(--success); }
.modcard .mtitle{ font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.3; }
.modcard .mscore{ font-size:12.5px; color:var(--ink-soft); }

/* quiz */
.stub-row{ display:flex; gap:4px; padding: 18px clamp(22px,4vw,40px) 0; }
.stub{ height:5px; border-radius:100px; flex:1; background:rgba(255,255,255,.28); }
.stub.done{ background:#fff; }
.stub.current{ background:var(--gold); }
.qmeta{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.qmeta .count{ font-family:"Unbounded"; font-size:13px; font-weight:600; color:var(--violet-deep); }
.qmeta .theme{ font-size:12px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em; }
.question{ font-size: clamp(19px,2.6vw,23px); font-weight:600; line-height:1.35; margin: 4px 0 22px; color:var(--ink); font-family:"Unbounded"; }
.options{ display:grid; gap:10px; margin-bottom:6px; }
.opt{ text-align:left; width:100%; background:var(--paper-2); border:1.5px solid var(--line); border-radius:14px; padding:14px 16px; font-size:15.5px; font-weight:500; color:var(--ink); display:flex; align-items:center; gap:12px; }
.opt .letter{ flex:0 0 26px; height:26px; border-radius:8px; background:var(--paper); border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; font-family:"Unbounded"; font-size:12px; font-weight:700; color:var(--ink-soft); }
.opt:hover:not([disabled]){ border-color:var(--violet); }
.opt:focus-visible{ outline:3px solid var(--violet); outline-offset:2px; }
.opt[disabled]{ cursor:default; }
.opt.correct{ background:var(--success-tint); border-color:var(--success); }
.opt.correct .letter{ background:var(--success); border-color:var(--success); color:#fff; }
.opt.wrong{ background:var(--gold-tint); border-color:var(--gold); opacity:.85; }
.opt.wrong .letter{ background:var(--gold); border-color:var(--gold); color:#fff; }
.opt.dim{ opacity:.5; }
.feedback{ margin-top:16px; padding:16px 18px; border-radius:14px; background:var(--violet-tint); font-size:14.5px; line-height:1.55; color:var(--ink); display:none; gap:10px; }
.feedback.show{ display:flex; }
.feedback .ic{ flex:0 0 auto; font-family:"Unbounded"; font-weight:700; color:var(--violet-deep); }
.quiz-footer{ margin-top:24px; display:flex; justify-content:flex-end; }

/* badge / result */
.badge-wrap{ display:flex; flex-direction:column; align-items:center; text-align:center; padding: 8px 0 6px; }
.medal{ width:96px; height:96px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:"Unbounded"; font-weight:800; font-size:26px; color:#fff; margin-bottom:18px; box-shadow: 0 10px 24px -8px rgba(0,0,0,.35); }
.lvl-name{ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:4px;}
.lvl-big{ font-family:"Unbounded"; font-size:clamp(26px,5vw,34px); font-weight:700; margin:0 0 6px; }
.score-line{ font-size:15px; color:var(--ink-soft); margin-bottom:22px; }
.score-line b{ color:var(--ink); font-variant-numeric:tabular-nums; }
.perforation{ display:flex; align-items:center; gap:10px; margin: 6px 0 22px; }
.perforation::before, .perforation::after{ content:""; flex:1; border-top:2px dashed var(--line); }
.perforation span{ font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.08em; }
.plan-title{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin:0 0 14px; text-align:left; }
.plan-list{ display:grid; gap:10px; text-align:left; margin-bottom:8px; }
.plan-item{ display:flex; gap:12px; padding:13px 14px; border:1.5px solid var(--line); border-radius:12px; background:var(--paper-2); }
.plan-item .num{ font-family:"Unbounded"; font-weight:700; font-size:13px; color:#fff; background:var(--violet); border-radius:8px; width:28px; height:28px; flex:0 0 28px; display:flex; align-items:center; justify-content:center; }
.plan-item .txt b{ display:block; font-size:14.5px; color:var(--ink); }
.plan-item .txt span{ font-size:13px; color:var(--ink-soft); }
.actions{ display:flex; gap:12px; margin-top:26px; flex-wrap:wrap; }
.actions .btn{ flex:1; min-width:170px; }

/* history table (synthese + admin) */
.tbl-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:14px; }
table.data{ width:100%; border-collapse:collapse; font-size:13.5px; min-width:560px; }
table.data th{ text-align:left; background:var(--violet); color:#fff; font-family:"Unbounded"; font-size:11px; text-transform:uppercase; letter-spacing:.05em; padding:11px 14px; }
table.data td{ padding:11px 14px; border-top:1px solid var(--line); color:var(--ink); }
table.data tr:nth-child(even) td{ background:var(--paper-2); }
.pill{ display:inline-block; padding:3px 10px; border-radius:100px; font-size:11.5px; font-weight:700; }
.pill.decouverte{ background:color-mix(in srgb, var(--lvl-decouverte) 18%, transparent); color:var(--lvl-decouverte); }
.pill.intermediaire{ background:color-mix(in srgb, var(--lvl-intermediaire) 18%, transparent); color:var(--lvl-intermediaire); }
.pill.avance{ background:color-mix(in srgb, var(--lvl-avance) 18%, transparent); color:var(--lvl-avance); }
.pill.expert{ background:color-mix(in srgb, var(--lvl-expert) 18%, transparent); color:var(--lvl-expert); }

.stat-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:20px; }
.stat{ background:var(--paper-2); border:1.5px solid var(--line); border-radius:14px; padding:16px; }
.stat b{ display:block; font-family:"Unbounded"; font-size:24px; color:var(--violet-deep); font-variant-numeric:tabular-nums; }
.stat span{ font-size:12px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; }

.alert-box{ border:1.5px solid var(--gold); background:var(--gold-tint); border-radius:14px; padding:16px 18px; margin-bottom:20px; }
.alert-box .a-title{ font-family:"Unbounded"; font-weight:700; font-size:13px; color:var(--gold); text-transform:uppercase; letter-spacing:.05em; margin-bottom:10px; }
.alert-row{ display:flex; justify-content:space-between; font-size:13.5px; padding:6px 0; border-top:1px dashed color-mix(in srgb, var(--gold) 40%, transparent); }
.alert-row:first-of-type{ border-top:none; }

.filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.filters input, .filters select{ font:inherit; font-size:13.5px; padding:9px 12px; border-radius:10px; border:1.5px solid var(--line); background:var(--paper-2); color:var(--ink); }

.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
[hidden]{ display:none !important; }
@media (prefers-reduced-motion: no-preference){ .card{ animation: rise .4s ease; } @keyframes rise{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none; } } }
footer.site{ text-align:center; font-size:12px; color:var(--ink-soft); margin-top:24px; }
footer.site a{ color:var(--violet-deep); }