/* FormaEval — thème premium « dark-glass » (formulaire élève + espace formateur) */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');
:root{
  --bg:#0b0e1a; --bg2:#141934;
  --glass:rgba(255,255,255,.055); --stroke:rgba(255,255,255,.12); --stroke-soft:rgba(255,255,255,.07);
  --ink:#eef1fb; --muted:#9aa3c4;
  --cyan:#22d3ee; --violet:#818cf8; --grad:linear-gradient(135deg,#22d3ee,#818cf8);
  --r1:#fb5d6a; --r2:#fb923c; --r3:#fbbf24; --r4:#34d399; --r5:#22d3ee;
  --font:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; --display:'Sora',var(--font);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font);color:var(--ink);min-height:100vh;-webkit-font-smoothing:antialiased;
  background:radial-gradient(60% 50% at 15% 0%,rgba(129,140,248,.22),transparent 60%),
    radial-gradient(55% 45% at 95% 10%,rgba(34,211,238,.18),transparent 60%),
    radial-gradient(50% 40% at 50% 115%,rgba(129,140,248,.12),transparent 60%),
    linear-gradient(160deg,var(--bg),var(--bg2));background-attachment:fixed}
.wrap{max-width:680px;margin:0 auto;padding:22px 16px 64px}
.hidden{display:none!important}

/* App bar + logo + burger */
.appbar{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.appbar .grow{flex:1}
.brand{display:flex;align-items:center;gap:11px}
.brand .logo{width:42px;height:42px;border-radius:13px;background:var(--grad);display:grid;place-items:center;flex:0 0 auto;
  box-shadow:0 8px 24px rgba(34,211,238,.32),inset 0 1px 0 rgba(255,255,255,.4)}
.brand .logo svg{width:22px;height:22px;display:block}
.brand b{font-family:var(--display);font-weight:800;font-size:1.15rem;letter-spacing:.3px;line-height:1.1}
.brand small{display:block;color:var(--muted);font-weight:500;font-size:.72rem}
.burger{width:42px;height:42px;border-radius:13px;border:1px solid var(--stroke);background:var(--glass);color:var(--ink);
  display:grid;place-items:center;cursor:pointer;flex:0 0 auto;backdrop-filter:blur(10px)}
.burger svg{width:22px;height:22px}
.scrim{position:fixed;inset:0;background:rgba(5,8,18,.6);opacity:0;pointer-events:none;transition:opacity .25s;z-index:40}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;left:0;height:100%;width:82%;max-width:320px;z-index:50;transform:translateX(-105%);
  transition:transform .3s cubic-bezier(.2,.8,.2,1);background:linear-gradient(160deg,#141934,#0b0e1a);
  border-right:1px solid var(--stroke);box-shadow:20px 0 60px rgba(0,0,0,.5);padding:22px 16px;overflow-y:auto}
.drawer.open{transform:none}
.drawer .dh{font-family:var(--display);font-weight:800;font-size:1.05rem;margin:6px 6px 16px;color:var(--muted)}
.drawer button.nav{display:flex;width:100%;align-items:center;gap:12px;padding:14px;border-radius:13px;color:var(--ink);
  text-decoration:none;font-weight:700;font-size:.98rem;border:1px solid transparent;background:transparent;cursor:pointer;
  font-family:var(--font);text-align:left}
.drawer button.nav:hover{background:var(--glass);border-color:var(--stroke)}
.drawer .ic{font-size:1.15rem;width:24px;text-align:center}
.drawer .du{font-size:.78rem;color:var(--muted);margin:10px 6px 4px;word-break:break-all}

/* Cartes verre */
.glass,.card{background:var(--glass);border:1px solid var(--stroke);border-radius:20px;
  backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);
  box-shadow:0 22px 56px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.07);padding:20px;
  animation:rise .45s cubic-bezier(.2,.8,.2,1) both}
.glass+.glass,.card+.card{margin-top:15px}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

h1{font-family:var(--display);font-size:1.42rem;margin:0 0 5px;letter-spacing:.2px}
h2{font-family:var(--display);font-size:1.02rem;margin:0 0 12px}
.sub{color:var(--muted);font-size:.9rem;margin:0}
.note{font-size:.8rem;color:var(--muted)}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;padding:5px 11px;border-radius:999px;
  background:rgba(129,140,248,.16);color:#c7cdfb;border:1px solid rgba(129,140,248,.3)}
.anon{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;color:var(--muted);
  background:var(--glass);border:1px solid var(--stroke-soft);padding:8px 13px;border-radius:12px;margin-top:8px}

label.q{display:block;font-weight:700;margin:20px 0 9px;font-size:.98rem}
textarea,input[type=text],input[type=date],input[type=password]{width:100%;border:1px solid var(--stroke);border-radius:13px;
  padding:12px 14px;font-family:var(--font);font-size:1rem;color:var(--ink);background:rgba(255,255,255,.03);outline:none;
  transition:border-color .2s,background .2s,box-shadow .2s}
textarea{min-height:88px;resize:vertical}
textarea::placeholder,input::placeholder{color:#6b7398}
textarea:focus,input:focus{border-color:var(--cyan);background:rgba(34,211,238,.05);box-shadow:0 0 0 4px rgba(34,211,238,.12)}

/* Échelle de notation (Mauvais → Excellent), worded */
.rscale{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:4px}
.rtile{cursor:pointer;border:1px solid var(--stroke);border-radius:14px;background:rgba(255,255,255,.03);padding:11px 3px;
  text-align:center;transition:transform .1s,box-shadow .2s,border-color .2s}
.rtile:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.25)}
.rtile .e{font-size:1.55rem;line-height:1;filter:grayscale(.3)}
.rtile .w{display:block;margin-top:5px;font-size:.6rem;font-weight:700;color:var(--muted);white-space:nowrap}
.rtile.sel{border-color:transparent;transform:translateY(-3px)}
.rtile.sel .e{filter:none}.rtile.sel .w{color:#fff}
.rtile.sel[data-v="1"]{background:linear-gradient(160deg,#fb5d6a,#c0334a);box-shadow:0 10px 26px rgba(251,93,106,.4)}
.rtile.sel[data-v="2"]{background:linear-gradient(160deg,#fb923c,#c2541a);box-shadow:0 10px 26px rgba(251,146,60,.4)}
.rtile.sel[data-v="3"]{background:linear-gradient(160deg,#fbbf24,#b88407);box-shadow:0 10px 26px rgba(251,191,36,.4)}
.rtile.sel[data-v="4"]{background:linear-gradient(160deg,#34d399,#0f9d6b);box-shadow:0 10px 26px rgba(52,211,153,.4)}
.rtile.sel[data-v="5"]{background:var(--grad);box-shadow:0 10px 26px rgba(34,211,238,.45)}
@media(max-width:420px){.rtile .w{font-size:.54rem}.rtile .e{font-size:1.35rem}}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;font-family:var(--display);
  font-weight:800;font-size:1rem;border:none;border-radius:14px;padding:14px 18px;background:var(--grad);color:#04222c;
  box-shadow:0 14px 36px rgba(34,211,238,.36),inset 0 1px 0 rgba(255,255,255,.45);transition:transform .12s,box-shadow .2s}
.btn:hover{transform:translateY(-2px)} .btn:active{transform:scale(.99)} .btn[disabled]{opacity:.5;cursor:default}
.btn.full{width:100%;margin-top:22px;padding:16px}
.btn.ghost{background:rgba(255,255,255,.04);color:var(--ink);border:1px solid var(--stroke);box-shadow:none}
.btn.sm{padding:9px 13px;font-size:.85rem;border-radius:11px}
.btn.danger{background:rgba(251,93,106,.12);color:#fda4a8;border:1px solid rgba(251,93,106,.35);box-shadow:none}
.btn-row{display:flex;flex-wrap:wrap;gap:8px}
.err{color:#fda4a8;font-weight:700;font-size:.9rem;margin-top:10px;min-height:1.2em}

/* Remerciement */
.thanks{text-align:center;padding:38px 16px}.thanks .big{font-size:3.4rem}.thanks h1{margin:14px 0 6px}

/* Stats formateur */
.grid-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
@media(max-width:560px){.grid-stats{grid-template-columns:1fr 1fr}}
.stat{background:rgba(255,255,255,.04);border:1px solid var(--stroke-soft);border-radius:15px;padding:14px}
.stat .k{font-size:.68rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.stat .v{font-family:var(--display);font-size:1.8rem;font-weight:800;margin-top:4px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat .v small{font-size:.85rem;color:var(--muted);-webkit-text-fill-color:var(--muted)}
.dist{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.dist .row{display:grid;grid-template-columns:96px 1fr 58px;align-items:center;gap:10px;font-size:.83rem;color:var(--muted)}
.dist .bar{height:13px;border-radius:7px;background:rgba(255,255,255,.07);overflow:hidden}
.dist .bar i{display:block;height:100%;border-radius:7px;background:var(--grad)}
.dist .row[data-v="1"] .bar i{background:var(--r1)}.dist .row[data-v="2"] .bar i{background:var(--r2)}
.dist .row[data-v="3"] .bar i{background:var(--r3)}.dist .row[data-v="4"] .bar i{background:var(--r4)}
.dist .row[data-v="5"] .bar i{background:var(--r5)}
.seg{display:inline-flex;background:rgba(255,255,255,.05);border:1px solid var(--stroke);border-radius:11px;padding:3px;gap:2px}
.seg button{border:none;background:transparent;font-family:var(--font);font-weight:700;font-size:.82rem;padding:7px 13px;
  border-radius:9px;cursor:pointer;color:var(--muted)}
.seg button.on{background:var(--grad);color:#04222c}
table.series{width:100%;border-collapse:collapse;margin-top:8px;font-size:.86rem}
table.series th,table.series td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--stroke-soft)}
table.series th{color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.3px}

.flist{display:flex;flex-direction:column;gap:8px}
.fitem{display:flex;align-items:center;gap:12px;border:1px solid var(--stroke);border-radius:13px;padding:12px 14px;
  cursor:pointer;background:rgba(255,255,255,.03);transition:border-color .12s,background .12s}
.fitem:hover{border-color:rgba(255,255,255,.28)} .fitem.on{border-color:var(--cyan);background:rgba(34,211,238,.07)}
.fitem .nm{font-weight:800}.fitem .meta{font-size:.78rem;color:var(--muted)}.fitem .grow{flex:1}
.badge{font-size:.74rem;font-weight:800;color:#04222c;background:var(--grad);padding:4px 9px;border-radius:999px}

.resp{border:1px solid var(--stroke-soft);border-radius:13px;padding:13px 15px;margin-top:10px;background:rgba(255,255,255,.03)}
.resp .head{display:flex;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.chip{font-size:.74rem;font-weight:800;color:#04222c;padding:3px 10px;border-radius:999px;background:var(--grad)}
.chip[data-v="1"]{background:var(--r1);color:#fff}.chip[data-v="2"]{background:var(--r2);color:#fff}
.chip[data-v="3"]{background:var(--r3);color:#3a2a02}.chip[data-v="4"]{background:var(--r4);color:#05281b}.chip[data-v="5"]{background:var(--grad)}
.resp .when{font-size:.78rem;color:var(--muted)}
.resp .txt{font-size:.9rem;margin:5px 0}.resp .txt b{color:var(--muted);font-weight:700;font-size:.76rem;display:block}
.cscores{display:flex;flex-wrap:wrap;gap:5px;margin:4px 0 7px}
.cscore{font-size:.7rem;font-weight:800;color:#04222c;padding:2px 8px;border-radius:999px}

/* Overlay / modale */
.overlay{position:fixed;inset:0;background:rgba(5,8,18,.62);display:grid;place-items:center;padding:18px;z-index:60;
  backdrop-filter:blur(4px)}
.modal{background:linear-gradient(160deg,#161b36,#0d1122);border:1px solid var(--stroke);border-radius:20px;
  box-shadow:0 30px 70px rgba(0,0,0,.55);padding:24px;width:100%;max-width:480px;max-height:90vh;overflow-y:auto}
.modal h2{margin-top:0}

#qrbox{display:grid;place-items:center;padding:16px;background:#fff;border-radius:14px}
#qrbox img,#qrbox canvas{display:block}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#04121a;border:1px solid var(--stroke);
  color:#fff;padding:11px 18px;border-radius:12px;font-weight:700;font-size:.9rem;box-shadow:0 10px 30px rgba(0,0,0,.5);z-index:80}

/* Éditeur de questionnaire */
.qedit{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.qedit .qrow{display:flex;align-items:center;gap:8px;border:1px solid var(--stroke-soft);border-radius:11px;padding:8px 10px;background:rgba(255,255,255,.03)}
.qedit .qrow .ty{font-size:.62rem;font-weight:800;padding:3px 7px;border-radius:6px;flex:0 0 auto}
.qedit .qrow .ty.rating{background:rgba(34,211,238,.18);color:#9fe9f5}
.qedit .qrow .ty.text{background:rgba(129,140,248,.18);color:#c7cdfb}
.qedit .qrow input{flex:1;border:none;background:transparent;padding:4px;font-size:.88rem;color:var(--ink)}
.qedit .qrow input:focus{box-shadow:none;background:transparent}
.qedit .qrow .rm{cursor:pointer;color:#fda4a8;background:none;border:none;font-size:1rem;flex:0 0 auto}
.qedit-add{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}