:root {
  /* ── Fonds noirs ── */
  --bg:#000000;--s1:#0e0e0e;--s2:#161616;--s3:#1e1e1e;--s4:#242424;
  --b1:#282828;--b2:#383838;--b3:#44444444;
  /* ── Textes ── */
  --text:#ffffff;--muted:#888888;--dim:#444444;
  /* ── Couleurs logo ── */
  --rouge:#e8312a;--vert:#27a844;--bleu:#2f6db5;
  /* ── Accents ── */
  --accent:#e8312a;--a2:#2f6db5;
  /* ── Chapitres : Rouge / Bleu / Vert ── */
  --ch1:#e8312a;--ch2:#2f6db5;--ch3:#27a844;
  /* ── Statuts ── */
  --green:#27a844;--orange:#e8312a;--red:#cc2222;--yellow:#f7d44f;
}

/* ── THEME CLAIR ── */
body.light-theme {
  --bg:#f0f2f5;--s1:#ffffff;--s2:#f5f6f8;--s3:#eceef1;--s4:#e4e6ea;
  --b1:#d8dce3;--b2:#c8cdd6;--b3:#c8cdd644;
  --text:#111827;--muted:#6b7280;--dim:#d1d5db;
  --rouge:#e8312a;--vert:#27a844;--bleu:#2f6db5;
  --accent:#e8312a;--a2:#2f6db5;
  --ch1:#e8312a;--ch2:#2f6db5;--ch3:#27a844;
  --green:#27a844;--orange:#e8312a;--red:#cc2222;--yellow:#f7d44f;
}

/* ── Bouton thème ── */
.theme-toggle-btn {
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  background:var(--s2);border:1px solid var(--b1);
  border-radius:8px;cursor:pointer;font-size:15px;
  transition:all .2s;color:var(--muted);
  flex-shrink:0;
}
.theme-toggle-btn:hover{background:var(--s3);color:var(--text);}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--text);font-family:'Outfit',sans-serif;font-size:px;line-height:1.65;min-height:100vh;overflow-x:hidden;}
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-thumb{background:var(--rouge);border-radius:2px;opacity:.5;}
::selection{background:rgba(232,49,42,.25);color:#fff;}
.hidden{display:none!important;}
.mono{font-family:'JetBrains Mono',monospace;}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
@keyframes pop{0%{transform:scale(.9);opacity:0;}70%{transform:scale(1.04);}100%{transform:scale(1);opacity:1;}}
@keyframes shimmer{0%{background-position:-200% 0;}100%{background-position:200% 0;}}
.fade-up{animation:fadeUp .38s ease both;}
.screen{display:none;min-height:100vh;flex-direction:column;}
.screen.active{display:flex;}

/* ══ LOGIN ══ */
#screen-login{
  align-items:center;justify-content:center;
  background: var(--bg);
}

.login-card{
  width:520px;max-width:96vw;
  background:var(--s1);border:1px solid var(--b1);border-radius:20px;
  padding:52px 48px 44px;position:relative;z-index:1;
  box-shadow:0 48px 96px rgba(0,0,0,.8),0 0 0 1px rgba(232,49,42,.15);
}
.login-logo{text-align:center;margin-bottom:40px;}
.login-icon{
  width:102px;
  height:102px;
  margin:0 auto 18px;
  background:transparent;
  border:none;
  box-shadow:none;
  display:flex;align-items:center;justify-content:center;
  font-size:0;
}
.login-icon img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  mix-blend-mode:lighten;
}
.login-brand{font-size:30px;font-weight:900;letter-spacing:-.03em;margin-bottom:4px;}
.login-brand em{font-style:normal;background:none;-webkit-text-fill-color:var(--rouge);color:var(--rouge);background-clip:text;}
.login-sub{font-family:'JetBrains Mono',monospace;font-size:19px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;margin-top:8px;padding-top:12px;border-top:1px solid #1e1e1e;}
.tab-row{display:flex;background:var(--s2);border-radius:10px;padding:4px;gap:4px;margin-bottom:32px;}
.tab-btn{flex:1;padding:12px;border-radius:7px;border:none;background:transparent;color:var(--muted);font-family:'Outfit',sans-serif;font-size:19px;font-weight:600;cursor:pointer;transition:all .18s;}
.tab-btn.active{background:var(--s3);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.3);}
.tab-btn.teacher-tab.active{background:rgba(232,49,42,.12);color:var(--rouge);}
.fgroup{margin-bottom:20px;}
.flabel{display:block;font-family:'JetBrains Mono',monospace;font-size:19px;font-weight:700;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px;}
.finput{
  width:100%;background:var(--s2);border:1px solid var(--b1);
  color:var(--text);font-family:'Outfit',sans-serif;font-size:22px;
  padding:14px 18px;border-radius:10px;outline:none;transition:border-color .18s,box-shadow .18s;
}
.finput:focus{border-color:var(--rouge);box-shadow:0 0 0 3px rgba(232,49,42,.12);}
.finput::placeholder{color:var(--dim);}
.login-btn{
  width:100%;padding:16px;margin-top:10px;border-radius:10px;border:none;
  background:var(--rouge);
  color:white;font-family:'Outfit',sans-serif;font-size:19px;font-weight:700;
  cursor:pointer;transition:opacity .18s,transform .15s;letter-spacing:.02em;
}
.login-btn:hover{opacity:.88;transform:translateY(-1px);}
.login-btn.teacher-btn{background:var(--bleu);}
.login-err{
  margin-top:10px;padding:9px 13px;border-radius:6px;
  background:rgba(247,95,95,.1);border:1px solid rgba(247,95,95,.25);
  font-size:22px;color:var(--red);display:none;
}
.login-err.show{display:block;animation:fadeUp .2s ease;}
.demo-hint{
  margin-top:22px;padding:14px 16px;
  background:var(--s2);border:1px solid var(--b1);border-radius:8px;
  font-size:19px;color:var(--muted);line-height:1.7;
}
.demo-hint strong{font-family:'JetBrains Mono',monospace;}
.demo-hint .acc{color:var(--accent);}
.demo-hint .orc{color:var(--orange);}

/* ══ TOPBAR ══ */
.topbar{
  height:120px;min-height:px;
  background:#000000;border-bottom:1px solid #000000;
  display:flex;align-items:center;padding:0 24px;gap:14px;
  position:sticky;top:0;z-index:200;
}
.tb-brand{font-size:  50px;font-weight:900;letter-spacing:-.02em;}
.tb-brand em{font-style:normal;background:none;-webkit-text-fill-color:var(--rouge);color:var(--rouge);background-clip:text;}

.tb-user{display:flex;align-items:center;gap:10px;}
.tb-av{
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:19px;font-weight:700;
  color:white;text-transform:uppercase;flex-shrink:0;
}
.tb-name{font-size:19px;font-weight:600;}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:10px;}
.tb-prog{display:flex;align-items:center;gap:8px;font-size:22px;color:var(--muted);}
.tb-ptrack{width:80px;height:4px;background:var(--b1);border-radius:2px;overflow:hidden;}
.tb-pfill{height:100%;background:linear-gradient(90deg,var(--rouge),var(--vert));border-radius:2px;transition:width .6s;}
.tb-pill{
  font-family:'JetBrains Mono',monospace;font-size:19px;letter-spacing:.08em;text-transform:uppercase;
  padding:8px 16px;border-radius:8px;border:1px solid var(--b1);
  background:transparent;color:var(--muted);cursor:pointer;transition:all .15s;
}
.tb-pill:hover{color:var(--text);border-color:var(--b2);}
.tb-pill.danger:hover{color:var(--red);border-color:rgba(247,95,95,.3);}
.tb-pill.teacher-mode{color:var(--bleu);border-color:rgba(47,109,181,.5);}

/* ══ APP BODY ══ */
#screen-app{flex-direction:column;}
.app-body{display:flex;flex:1;overflow:hidden;height:calc(100vh - 62px);}

/* ══════════════════════════════════════
   SIDENAV — CH-CARD DESIGN LANGUAGE
══════════════════════════════════════ */
.sidenav{
  width:430px;min-width:430px;
  background:var(--bg);
  border-right:1px solid var(--b1);
  overflow-y:auto;
  display:flex;flex-direction:column;
  scrollbar-width:thin;scrollbar-color:var(--b1) transparent;
}
.sidenav::-webkit-scrollbar{width:3px;}
.sidenav::-webkit-scrollbar-thumb{background:var(--b1);border-radius:2px;}

/* ── Bloc utilisateur ── */
.sn-user-bloc{
  padding:20px 16px 16px;
  border-bottom:1px solid var(--b1);
  flex-shrink:0;
}
.sn-user-card{
  background:var(--s1);
  border:1px solid var(--b1);
  border-radius:14px;
  border-top:3px solid var(--rouge);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  position:relative;
}
.sn-user-card-top{
  display:flex;
  align-items:center;
  gap:12px;
}
.sn-user-av{
  width:100px;height:100px;border-radius:10px;
  background:var(--rouge);color:#fff;
  font-size:32px;font-weight:800;letter-spacing:-.03em;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  overflow:hidden;
}
.sn-user-av img{
  width:100px;height:100px;border-radius:10px;object-fit:cover;display:block;
}
.sn-user-card-top{
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.sn-user-info{flex:1;min-width:0;text-align:left;padding-top:2px;}
.sn-user-name{
  font-size:17px;font-weight:800;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  line-height:1.2;
}
.sn-user-role{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;color:var(--muted);margin-top:5px;
  text-transform:uppercase;letter-spacing:.08em;
}1em;
}
.sn-user-actions{display:flex;flex-direction:row;flex-wrap:nowrap;gap:4px;flex-shrink:0;margin-left:auto;}
.sn-user-btn{
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  background:var(--s2);border:1px solid var(--b1);
  border-radius:8px;cursor:pointer;font-size:14px;
  transition:all .15s;color:var(--muted);
}
.sn-user-btn:hover{background:var(--s3);color:var(--text);border-color:var(--b2);}
.sn-user-btn-logout:hover{background:rgba(247,95,95,.1);color:var(--red);border-color:rgba(247,95,95,.3);}

/* ── Progression globale ── */
.sn-progress-bloc{
  padding:16px 16px 14px;
  border-bottom:1px solid var(--b1);
  flex-shrink:0;
}
.sn-prog-card{
  background:var(--s1);
  border:1px solid var(--b1);
  border-radius:14px;
  padding:14px 16px;
}
.sn-prog-label{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:10px;
}
.sn-prog-text{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.1em;
}
.sn-prog-pct{
  font-family:'JetBrains Mono',monospace;
  font-size:13px;font-weight:700;color:var(--text);
}
.sn-prog-track{
  height:3px;background:var(--b1);border-radius:2px;overflow:hidden;
  margin-bottom:0;
}
.sn-prog-fill{
  height:100%;
  background:linear-gradient(90deg,var(--rouge),var(--vert));
  border-radius:2px;transition:width .7s;
}

/* ── Nav principale (Tableau de bord / Compétences) ── */
.sn-main-nav{
  display:flex;flex-direction:column;gap:8px;
  padding:16px 16px 14px;
  border-bottom:1px solid var(--b1);
  flex-shrink:0;
}
.sn-btn{
  width:100%;padding:14px 16px;
  background:var(--s1);
  border:1px solid var(--b1);
  border-radius:14px;
  cursor:pointer;
  display:flex;align-items:center;gap:10px;
  color:var(--muted);font-size:15px;font-weight:600;
  text-align:left;
  transition:all .2s;
  border-top-width:3px;
  border-top-color:transparent;
}
.sn-btn:hover{
  background:var(--s2);
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(0,0,0,.3);
}
.sn-btn.active{
  background:var(--s2);
  color:var(--text);
  box-shadow:0 6px 20px rgba(0,0,0,.3);
}
.sn-btn-home{border-top-color:transparent;}
.sn-btn-home.active{border-top-color:#5b8ef7;color:#7aaaff;}
.sn-btn-comp.active{border-top-color:#3ecf8e;color:#3ecf8e;}
.sn-btn-rendus.active{border-top-color:#f7a35b;color:#f7a35b;}
.sn-btn-icon{font-size:18px;flex-shrink:0;}
.sn-btn-label{font-size:15px;font-weight:600;}

/* ── Chapitres — exact ch-card language ── */
.sn-chapters{
  display:flex;flex-direction:column;gap:12px;
  padding:16px 16px 12px;
  flex:1;
}

/* Each chapter = a ch-card */
.sn-chapter{
  background:var(--s1);
  border:1px solid var(--b1);
  border-radius:14px;
  border-top:3px solid var(--cc,var(--accent));
  overflow:hidden;
  transition:all .2s;
}

/* Chapter header — calqué sur ch-card du dashboard */
.sn-chapter-head{
  padding:14px 16px 12px;
  padding-right:52px;
  border-bottom:1px solid var(--b1);
  display:flex;flex-direction:column;gap:4px;
  position:relative;
  overflow:hidden;
}
.sn-chapter-head::after{
  content:'';
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  width:clamp(28px, 8%, 38px);
  aspect-ratio:1/1;
  background-image:url('../ressources/printer.png');
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  mix-blend-mode:lighten;
  opacity:0.5;
  pointer-events:none;
}
.sn-ch-num{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;font-weight:700;
  color:var(--muted);
  letter-spacing:.15em;
  text-transform:uppercase;
}
.sn-ch-title{
  font-size:15px;font-weight:700;
  color:var(--text);line-height:1.3;
}

/* Chapter items list */
.sn-chapter-items{
  display:flex;flex-direction:column;gap:1px;
  padding:6px 8px 8px;
}

/* Individual nav item */
.sni{
  display:flex;align-items:center;gap:8px;
  width:100%;padding:9px 10px;
  border-radius:8px;
  border:1px solid transparent;
  background:none;cursor:pointer;
  color:var(--muted);font-size:15px;font-weight:500;
  text-align:left;transition:all .15s;
}
.sni:hover{
  background:var(--s2);color:var(--text);
  border-color:var(--b1);
}
.sni.active{
  background:var(--s2);color:var(--text);
  border-color:color-mix(in srgb, var(--ic) 40%, var(--b1));
  font-weight:700;
}
.sni.done .sni-num{
  color:var(--vert)!important;
}
.sni-num{
  font-family:'JetBrains Mono',monospace;
  font-size:13px;font-weight:700;
  color:var(--ic);opacity:.8;
  flex-shrink:0;min-width:24px;
}
.sni-text{flex:1;line-height:1.3;font-size:15px;}

/* Printer bullet icon */
.sni-printer-bullet{
  width:18px;height:18px;
  flex-shrink:0;
  object-fit:contain;
  opacity:.55;
  mix-blend-mode:lighten;
  transition:opacity .15s;
}
.sni:hover .sni-printer-bullet,
.sni.active .sni-printer-bullet{
  opacity:.9;
}

/* Bilan row — highlighted, like a mini-card */
.sni.sni-bilan{
  margin-top:5px;
  background:color-mix(in srgb, var(--ic) 5%, var(--s1));
  border-color:color-mix(in srgb, var(--ic) 18%, var(--b1));
  font-weight:600;
  border-radius:9px;
}
.sni.sni-bilan:hover{
  background:color-mix(in srgb, var(--ic) 12%, var(--s2));
  border-color:color-mix(in srgb, var(--ic) 40%, var(--b1));
  transform:translateX(2px);
}
.sni.sni-bilan.active{
  background:color-mix(in srgb, var(--ic) 18%, var(--s2));
  border-color:color-mix(in srgb, var(--ic) 55%, var(--b1));
}
.sni.sni-activity{
  border-style:dashed;
  border-color:color-mix(in srgb, var(--ic) 20%, var(--b1));
  color:color-mix(in srgb, var(--ic) 70%, var(--muted));
}
.sni-bilan-icon{font-size:12px;flex-shrink:0;}

/* Score badge on bilan */
.sni-badge{
  margin-left:auto;
  font-family:'JetBrains Mono',monospace;
  font-size:10px;padding:2px 7px;border-radius:5px;
  background:color-mix(in srgb, var(--ic) 12%, transparent);
  color:var(--ic);white-space:nowrap;
  border:1px solid color-mix(in srgb, var(--ic) 22%, transparent);
  flex-shrink:0;
}
.sni-badge.pass{
  background:rgba(39,168,68,.15);color:var(--vert);
  border-color:rgba(39,168,68,.3);
}
.sni-badge.fail{
  background:rgba(247,95,95,.1);color:var(--red);
  border-color:rgba(247,95,95,.25);
}


/* ══ RENDUS ══ */
.rendu-drop-zone{
  border:2px dashed var(--b2);border-radius:14px;
  padding:36px 24px;text-align:center;cursor:pointer;
  transition:all .2s;background:var(--s1);margin-bottom:20px;
}
.rendu-drop-zone:hover,.rendu-drop-zone.drag-over{
  border-color:var(--rouge);background:rgba(232,49,42,.05);
}
.rendu-drop-zone-icon{font-size:36px;margin-bottom:10px;}
.rendu-drop-zone-text{font-size:14px;color:var(--muted);line-height:1.6;}
.rendu-drop-zone-text strong{color:var(--text);display:block;font-size:15px;margin-bottom:4px;}
.rendu-form{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;}
.rendu-file-preview{
  background:var(--s2);border:1px solid var(--b1);border-radius:10px;
  padding:12px 16px;display:flex;align-items:center;gap:12px;
}
.rendu-file-icon{font-size:24px;flex-shrink:0;}
.rendu-file-name{font-size:13px;font-weight:600;color:var(--text);flex:1;word-break:break-all;}
.rendu-file-size{font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace;flex-shrink:0;}
.rendu-file-remove{background:none;border:none;color:var(--muted);cursor:pointer;font-size:16px;padding:0 4px;}
.rendu-file-remove:hover{color:var(--red);}
.rendu-list{display:flex;flex-direction:column;gap:10px;}
.rendu-card{
  background:var(--s1);border:1px solid var(--b1);border-radius:14px;
  padding:16px 18px;display:flex;align-items:flex-start;gap:14px;
  transition:all .2s;
}
.rendu-card:hover{background:var(--s2);}
.rendu-card-icon{font-size:26px;flex-shrink:0;margin-top:2px;}
.rendu-card-info{flex:1;min-width:0;}
.rendu-card-name{font-size:14px;font-weight:700;color:var(--text);margin-bottom:3px;word-break:break-all;}
.rendu-card-meta{font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-bottom:6px;}
.rendu-card-desc{font-size:12px;color:var(--muted);line-height:1.5;margin-bottom:6px;}
.rendu-card-comment{
  background:rgba(62,207,142,.07);border:1px solid rgba(62,207,142,.2);
  border-radius:8px;padding:8px 12px;font-size:12px;color:#3ecf8e;
  line-height:1.5;margin-top:6px;
}
.rendu-card-comment-label{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:3px;opacity:.7;}
.rendu-status{
  flex-shrink:0;font-size:11px;font-weight:700;padding:3px 10px;border-radius:6px;
  font-family:'JetBrains Mono',monospace;white-space:nowrap;
}
.rendu-status.pending{background:rgba(247,163,91,.1);color:#f7a35b;border:1px solid rgba(247,163,91,.25);}
.rendu-status.reviewed{background:rgba(62,207,142,.1);color:#3ecf8e;border:1px solid rgba(62,207,142,.25);}
.rendu-actions{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;}
.rendu-btn{
  padding:5px 12px;border-radius:7px;font-size:11px;font-weight:600;
  border:1px solid var(--b1);background:var(--s2);color:var(--muted);
  cursor:pointer;transition:all .15s;
}
.rendu-btn:hover{background:var(--s3);color:var(--text);}
.rendu-btn.primary{background:var(--rouge);color:#fff;border-color:var(--rouge);}
.rendu-btn.primary:hover{opacity:.85;}
.rendu-btn.danger{border-color:rgba(247,95,95,.3);color:var(--red);}
.rendu-btn.danger:hover{background:rgba(247,95,95,.08);}
/* Teacher rendus view */
.tr-student-block{margin-bottom:20px;}
.tr-student-header{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;background:var(--s2);border-radius:10px;
  border:1px solid var(--b1);margin-bottom:8px;cursor:pointer;
}
.tr-student-av{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;flex-shrink:0;}
.tr-student-name{font-size:13px;font-weight:700;color:var(--text);flex:1;}
.tr-student-count{font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace;}
.tr-comment-form{margin-top:8px;display:flex;flex-direction:column;gap:6px;}
.tr-comment-input{
  width:100%;padding:8px 12px;background:var(--s2);border:1px solid var(--b2);
  border-radius:8px;color:var(--text);font-size:12px;font-family:'Outfit',sans-serif;
  resize:vertical;min-height:60px;
}
.tr-comment-input:focus{outline:none;border-color:var(--rouge);}
.rendu-empty{text-align:center;padding:48px 20px;color:var(--dim);}
.rendu-empty-icon{font-size:40px;margin-bottom:12px;}
.rendu-empty-text{font-size:13px;line-height:1.7;}

/* ══ PAGE AREA ══ */
.page-area{flex:1;overflow-y:auto;scroll-behavior:smooth;}
.page{display:none;padding:40px 48px 80px;max-width:100%;animation:fadeUp .3s ease both;}
.page.active{display:block;}

/* ══ DASHBOARD ══ */
.welcome-card{
  background:var(--s1);
  border:1px solid var(--b1);border-radius:16px;
  padding:40px 44px;margin-bottom:32px;position:relative;overflow:hidden;
}
.welcome-card::after{
  content:'';position:absolute;right:24px;top:50%;transform:translateY(-50%);
  font-size:64px;opacity:.06;
}
.welcome-card h2{font-size:1.8rem;font-weight:800;letter-spacing:-.03em;margin-bottom:8px;color:#fff;}
.welcome-card h2 em{font-style:normal;color:#fff;background:none;-webkit-text-fill-color:#fff;}
.welcome-card p{font-size:22px;color:var(--muted);max-width:420px;line-height:1.75;}
.gp-row{display:flex;align-items:center;gap:10px;margin-top:16px;}
.gp-label{font-family:'JetBrains Mono',monospace;font-size:19px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;white-space:nowrap;}
.gp-track{flex:1;height:6px;background:var(--b1);border-radius:3px;overflow:hidden;}
.gp-fill{height:100%;background:linear-gradient(90deg,var(--rouge),var(--vert));border-radius:3px;transition:width .7s;}
.gp-val{font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:700;white-space:nowrap;}
.ch-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin-bottom:32px;}
.ch-card{
  background:var(--s1);border:1px solid var(--b1);border-radius:14px;
  padding:28px 26px;cursor:pointer;transition:all .2s;
  border-top:3px solid var(--cc,var(--accent));
}
.ch-card:hover{background:var(--s2);transform:translateY(-2px);box-shadow:0 10px 32px rgba(0,0,0,.35);}
.cc-num{
  font-family:'JetBrains Mono',monospace;font-size:19px;color:var(--muted);
  letter-spacing:.15em;text-transform:uppercase;margin-bottom:9px;
  display:flex;align-items:center;gap:8px;
}
.cc-num::before{
  content:'';
  display:inline-block;
  width:1.1em;
  height:1.1em;
  background-image:url('../ressources/logo.png');
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  mix-blend-mode:lighten;
  opacity:0.75;
  flex-shrink:0;
}
.cc-title{font-size:1.2rem;font-weight:700;margin-bottom:13px;line-height:1.3;}
.cc-bar{height:3px;background:var(--b1);border-radius:2px;overflow:hidden;margin-bottom:6px;}
.cc-bar-fill{height:100%;border-radius:2px;transition:width .5s;}
.cc-meta{display:flex;justify-content:space-between;font-size:19px;color:var(--muted);font-family:'JetBrains Mono',monospace;}

/* ══ COMPETENCES ══ */
.comp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;}
.comp-card{
  background:var(--s1);border:1px solid var(--b1);border-radius:14px;
  padding:18px 16px;
  border-top:3px solid var(--ccc,var(--accent));
  border-left:none;
  transition:all .2s;
  display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:8px;
}
.comp-card:hover{background:var(--s2);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.35);}
.comp-card.validated{background:rgba(39,168,68,.07);border-top-color:var(--vert)!important;}
.comp-card.validated .cc-status{color:var(--vert);}
.cc-header-row{
  display:flex;align-items:center;gap:8px;width:100%;
}
.cc-badge{
  font-family:'JetBrains Mono',monospace;font-size:11px;
  padding:2px 6px;border-radius:4px;border:1px solid;
  letter-spacing:.05em;display:inline-block;white-space:nowrap;
  vertical-align:middle;margin-right:5px;flex-shrink:0;
}
.cc-name{font-size:14px;font-weight:700;line-height:1.5;color:var(--text);margin:0;}
.cc-first-line{display:inline;white-space:nowrap;}
.cc-status{font-size:12px;font-family:'JetBrains Mono',monospace;color:var(--dim);}

/* ══ VISUAL COMPONENTS — C1p2 & au-delà ══ */

/* Hero banner intro */
.hero-intro{
  border-radius:16px;padding:28px 28px 24px;margin-bottom:28px;
  background:linear-gradient(135deg,rgba(91,142,247,.12),rgba(91,142,247,.03));
  border:1px solid rgba(91,142,247,.2);position:relative;overflow:hidden;
}
.hero-intro::before{
  content:'';position:absolute;top:-30px;right:-30px;width:120px;height:120px;
  border-radius:50%;background:rgba(91,142,247,.07);
}
.hero-intro-label{
  font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(91,142,247,.8);margin-bottom:10px;
}
.hero-intro-text{font-size:20px;color:var(--text);line-height:1.75;font-weight:500;}
.hero-intro-text strong{color:#7aaaff;}

/* Timeline verticale */
.timeline{position:relative;padding-left:28px;margin:8px 0 20px;}
.timeline::before{content:'';position:absolute;left:11px;top:8px;bottom:8px;width:2px;background:linear-gradient(to bottom,var(--cc,#5b8ef7),transparent);}
.tl-item{position:relative;margin-bottom:22px;}
.tl-item:last-child{margin-bottom:0;}
.tl-dot{
  position:absolute;left:-22px;top:4px;
  width:16px;height:16px;border-radius:50%;
  background:var(--cc,#5b8ef7);
  border:2px solid var(--bg);
  box-shadow:0 0 0 2px var(--cc,#5b8ef7);
}
.tl-year{
  font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:700;
  color:var(--cc,#5b8ef7);letter-spacing:.1em;margin-bottom:4px;
}
.tl-title{font-size:18px;font-weight:700;color:var(--text);margin-bottom:4px;line-height:1.3;}
.tl-desc{font-size:16px;color:var(--muted);line-height:1.6;}

/* Fact cards — chiffres marquants */
.fact-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin:16px 0 20px;}
.fact-card{
  background:var(--s1);border:1px solid var(--b1);border-radius:12px;
  padding:16px 14px;text-align:center;
  border-top:3px solid var(--fc,#5b8ef7);
}
.fact-card-number{font-size:32px;font-weight:900;color:var(--fc,#5b8ef7);font-family:'JetBrains Mono',monospace;line-height:1;margin-bottom:6px;}
.fact-card-label{font-size:14px;color:var(--muted);line-height:1.4;}

/* Quote / highlight box */
.hl-box{
  border-left:4px solid var(--cc,#5b8ef7);
  background:color-mix(in srgb, var(--cc,#5b8ef7) 6%, var(--s1));
  border-radius:0 12px 12px 0;
  padding:16px 20px;margin:16px 0;
}
.hl-box-icon{font-size:20px;margin-bottom:8px;display:block;}
.hl-box-title{font-size:16px;font-weight:700;color:var(--text);margin-bottom:6px;letter-spacing:.02em;}
.hl-box-text{font-size:18px;color:#8090bb;line-height:1.7;}
.hl-box-text strong{color:var(--text);}

/* Personne card */
.person-row{display:flex;gap:14px;flex-wrap:wrap;margin:14px 0;}
.person-card{
  flex:1;min-width:200px;
  background:var(--s1);border:1px solid var(--b1);border-radius:12px;
  padding:16px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  position:relative;
}
.person-photo{
  position:absolute;
  top:6px;right:6px;
  width:100px;height:100px;
  border-radius:10px;
  object-fit:cover;
  border:2px solid var(--b2);
  background:var(--s2);
  display:block;
}
.person-photo-placeholder{
  position:absolute;
  top:12px;right:12px;
  width:54px;height:54px;
  border-radius:10px;
  border:2px dashed var(--b2);
  background:var(--s2);
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:22px;
}
.person-flag{font-size:28px;}
.person-name{font-size:17px;font-weight:800;color:var(--text);padding-right:68px;}
.person-role{font-size:13px;color:var(--muted);font-family:'JetBrains Mono',monospace;letter-spacing:.05em;}
.person-desc{font-size:15px;color:#7090bb;line-height:1.5;}

/* Section label */
.s-label{
  font-family:'Outfit',sans-serif;font-size:22px;font-weight:800;letter-spacing:-.01em;
  text-transform:none;color:var(--text);margin-bottom:16px;margin-top:36px;
  padding-bottom:12px;border-bottom:2px solid var(--b1);
  display:flex;align-items:center;gap:10px;
}
.s-label::after{content:'';flex:1;height:2px;background:var(--b1);}

/* ══ CHAPTER PAGES ══ */
.ch-header{
  border-left:5px solid var(--chc,var(--accent));padding:28px 32px;
  padding-right:clamp(60px,14%,140px);
  background:var(--s1);border-radius:0 14px 14px 0;margin-bottom:32px;
  position:relative;overflow:hidden;
}
.ch-header::after{
  content:'';
  position:absolute;
  right:24px;top:50%;transform:translateY(-50%);
  width:clamp(80px,14%,160px);
  aspect-ratio:1/1;
  background-image:url('../ressources/printer.png');
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  mix-blend-mode:normal;
  opacity:1;
  pointer-events:none;
}
.ch-tag{
  font-family:'JetBrains Mono',monospace;font-size:32px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text);margin-bottom:11px;
  display:flex;align-items:center;gap:12px;
}
.ch-tag::before{
  content:'';
  display:inline-block;
  width:1em;height:1em;
  background-image:url('../ressources/logo.png');
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  mix-blend-mode:normal;
  flex-shrink:0;
}
.ch-title{font-size:24px;font-weight:800;letter-spacing:-.02em;margin-bottom:8px;color:var(--chc,var(--rouge));}
.ch-sub{font-size:15px;color:var(--muted);max-width:100%;line-height:1.7;}
.comp-banner{
  display:none;
}
.cb-lbl{font-family:'JetBrains Mono',monospace;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-right:3px;}
.cb-tag{font-family:'JetBrains Mono',monospace;padding:4px 10px;border-radius:5px;border:1px solid;letter-spacing:.04em;}
.sv-tag{font-family:'JetBrains Mono',monospace;padding:4px 10px;border-radius:5px;background:var(--s3);color:var(--muted);}

/* Part */
.part{margin-bottom:48px;}
.part-hdr{display:flex;align-items:center;gap:11px;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--b1);}
.part-num{font-family:'JetBrains Mono',monospace;font-size:19px;font-weight:700;padding:6px 14px;border-radius:6px;flex-shrink:0;}
.part-ttl{font-size:1.25rem;font-weight:700;}

/* Prose */
.prose{font-size:19px;color:#8898cc;line-height:1.9;}
.prose h4{font-size:1.2rem;font-weight:700;color:var(--text);margin:28px 0 14px;}
.prose p{margin-bottom:16px;}
.prose ul,.prose ol{padding-left:22px;margin-bottom:16px;}
.prose li{margin-bottom:7px;}
.prose strong{color:var(--text);font-weight:600;}

/* boxes */
.box{padding:22px 26px;border-radius:12px;margin:20px 0;border-left:4px solid;font-size:22px;line-height:1.8;}
.box-t{font-weight:700;font-size:19px;letter-spacing:.05em;text-transform:uppercase;margin-bottom:8px;}
.bi{background:rgba(47,109,181,.07);border-color:var(--bleu);color:#7aaadd;}
.bw{background:rgba(247,160,79,.07);border-color:var(--orange);color:#daa870;}
.bd{background:rgba(247,95,95,.07);border-color:var(--red);color:#d99090;}
.bs{background:rgba(39,168,68,.07);border-color:var(--vert);color:#6ec88a;}

/* table */
/* ── TABLES GLOBALES — style unifié Ch.12.1 ── */
.dt,.tp-table{width:100%;border-collapse:collapse;font-size:15px;margin:16px 0 20px;}
.dt thead tr,.tp-table thead tr{background:#0f2030;border-bottom:2px solid #06b6d4;}
.dt th,.tp-table th{padding:14px 16px;text-align:left;color:#06b6d4;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-family:'JetBrains Mono',monospace;}
.dt td,.tp-table td{padding:14px 16px;border-bottom:1px solid #1a2030;color:#b0c8e0;font-size:15px;vertical-align:top;line-height:1.55;}
.dt td:first-child,.tp-table td:first-child{font-size:15px;font-weight:700;color:#e0f0ff;}
.dt tbody tr:nth-child(even),.tp-table tbody tr:nth-child(even){background:#0b1525;}
.dt tbody tr:hover td,.tp-table tbody tr:hover td{background:rgba(6,182,212,.07);}

/* param cards */
.pg{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin:20px 0;}
.pc{background:var(--s2);border:1px solid var(--b1);border-radius:10px;padding:18px;border-top:3px solid var(--pcc,var(--accent));}
.pc-n{font-size:22px;font-weight:700;color:var(--text);margin-bottom:4px;}
.pc-v{font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:700;color:var(--pcc,var(--accent));margin-bottom:8px;}
.pc-d{font-size:19px;color:var(--muted);line-height:1.5;}

/* error cards */
.eg{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin:20px 0;}
.ec{background:var(--s2);border:1px solid var(--b1);border-radius:10px;padding:20px;border-left:4px solid var(--ecc,var(--red));}
.ec-i{font-size:22px;margin-bottom:8px;}
.ec-n{font-size:22px;font-weight:700;color:var(--text);margin-bottom:8px;}
.ec-c{font-size:19px;color:var(--muted);margin-bottom:10px;line-height:1.55;}
.ec-f{font-size:19px;color:var(--green);line-height:1.55;}
.ec-f::before{content:'✓ ';}

/* steps */
.step{display:flex;gap:16px;margin-bottom:20px;}
.step-n{
  width:36px;height:36px;
  background:none;
  font-size:0;color:transparent;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;margin-top:2px;
  background-image:url('../ressources/logo.png');
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  mix-blend-mode:normal;
}
.step-t{font-size:22px;font-weight:700;color:var(--text);margin-bottom:6px;}
.step-d{font-size:19px;color:var(--muted);line-height:1.6;}

/* ══ QCM ══ */
.qcm-wrap{background:#0c0c0c;border:1px solid #232323;border-radius:14px;margin-top:32px;overflow:hidden;}
.qcm-hd{padding:22px 28px;border-bottom:1px solid var(--b1);background:var(--s2);display:flex;align-items:center;gap:14px;}
.qcm-hd-info .qcm-title{font-size:1.25rem;font-weight:700;}
.qcm-hd-info .qcm-sub{font-size:19px;color:var(--muted);margin-top:4px;}
.qcm-pts{font-family:'JetBrains Mono',monospace;font-size:22px;padding:6px 14px;border-radius:6px;background:var(--s3);color:var(--muted);margin-left:auto;}
.qcm-body{padding:28px;}
.question{margin-bottom:28px;}
.q-num{font-family:'JetBrains Mono',monospace;font-size:22px;color:var(--muted);letter-spacing:.06em;margin-bottom:8px;}
.q-text{font-size:22px;font-weight:600;color:var(--text);padding-left:14px;border-left:3px solid var(--qcc,var(--accent));margin-bottom:14px;line-height:1.5;}
.opts{display:flex;flex-direction:column;gap:10px;}
.opt{
  display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:10px;
  border:1px solid var(--b1);cursor:pointer;font-size:19px;color:var(--muted);
  transition:all .14s;user-select:none;
}
.opt:hover:not(.locked){border-color:var(--qcc,var(--accent));color:var(--text);background:rgba(91,142,247,.05);}
.opt.sel{border-color:var(--qcc,var(--accent));color:var(--text);background:rgba(91,142,247,.07);}
.opt.correct{border-color:var(--vert)!important;background:rgba(39,168,68,.08)!important;color:var(--vert)!important;}
.opt.wrong{border-color:var(--red)!important;background:rgba(247,95,95,.07)!important;color:var(--red)!important;}
.opt.locked{cursor:default;}
.opt-r{width:16px;height:16px;border-radius:50%;border:2px solid var(--b2);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .14s;}
.opt.sel .opt-r{border-color:var(--qcc,var(--accent));background:var(--qcc,var(--accent));}
.opt.correct .opt-r{border-color:var(--vert);background:var(--vert);}
.opt.wrong .opt-r{border-color:var(--red);background:var(--red);}
.opt-r::after{content:'';width:6px;height:6px;border-radius:50%;background:white;opacity:0;transition:opacity .14s;}
.opt.sel .opt-r::after,.opt.correct .opt-r::after,.opt.wrong .opt-r::after{opacity:1;}
.opt-fb{margin-left:auto;font-size:22px;font-weight:700;opacity:0;}
.opt.correct .opt-fb,.opt.wrong .opt-fb{opacity:1;}
.qcm-ft{padding:18px 28px;border-top:1px solid var(--b1);background:var(--s2);display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.btn{font-family:'JetBrains Mono',monospace;font-size:22px;letter-spacing:.08em;text-transform:uppercase;padding:10px 22px;border-radius:8px;cursor:pointer;transition:all .14s;border:none;font-weight:600;}
.btn-p{background:var(--rouge);color:white;}
.btn-p:hover{opacity:.85;}
.btn-p:disabled{opacity:.3;cursor:default;}
.btn-g{background:transparent;border:1px solid var(--b2);color:var(--muted);}
.btn-g:hover{color:var(--text);border-color:var(--b2);}
.score-tag{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:700;display:none;}
.score-tag.show{display:block;}
.res-box{margin:0 28px 18px;padding:20px 24px;border-radius:10px;border:1px solid;font-size:19px;line-height:1.8;display:none;}
.res-box.show{display:block;animation:fadeUp .25s ease;}
.res-box.great{border-color:var(--vert);background:rgba(39,168,68,.07);color:var(--vert);}
.res-box.ok{border-color:var(--orange);background:rgba(247,160,79,.07);color:var(--orange);}
.res-box.bad{border-color:var(--red);background:rgba(247,95,95,.07);color:var(--red);}

/* mini-qcm label */
.mini-qcm-label{
  font-family:'JetBrains Mono',monospace;font-size:22px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:28px 0 10px;display:flex;align-items:center;gap:10px;
}
.mini-qcm-label::before,.mini-qcm-label::after{content:'';flex:1;height:1px;background:var(--b1);}

/* Bilan header */
.bilan-banner{
  display:flex;align-items:center;gap:20px;
  padding:24px 28px;background:var(--s2);border:1px solid var(--b1);
  border-radius:14px;margin-bottom:28px;
}
.bilan-icon{font-size:38px;}
.bilan-info .bilan-title{font-size:1.3rem;font-weight:700;margin-bottom:6px;}
.bilan-info .bilan-sub{font-size:22px;color:var(--muted);}
.bilan-threshold{
  margin-left:auto;text-align:center;
  font-family:'JetBrains Mono',monospace;font-size:22px;
}
.bilan-threshold .thr-val{font-size:28px;font-weight:700;color:var(--vert);display:block;}
.bilan-threshold .thr-lbl{font-size:19px;color:var(--muted);letter-spacing:.06em;}

/* Unlock notification */
.unlock-toast{
  position:fixed;bottom:28px;right:28px;z-index:9999;
  background:linear-gradient(135deg,rgba(39,168,68,.14),rgba(39,168,68,.07));
  border:1px solid rgba(39,168,68,.5);border-radius:14px;
  padding:18px 22px;max-width:340px;
  box-shadow:0 10px 32px rgba(0,0,0,.5);
  animation:pop .35s ease both;
}
.ut-title{font-size:22px;font-weight:700;color:var(--vert);margin-bottom:8px;}
.ut-list{padding-left:18px;font-size:22px;color:#7ecbaa;line-height:1.8;}

/* Nav buttons */
.nav-btns{display:flex;gap:12px;margin-top:36px;flex-wrap:wrap;}

/* change password */
.pw-change-card{
  background:#0e0e0e;border:1px solid #222;border-radius:14px;padding:32px;
  margin-bottom:28px;
}
.pw-change-card h3{font-size:1.2rem;font-weight:700;margin-bottom:20px;}

/* ══ TEACHER SCREEN ══ */
#screen-teacher{background:var(--bg);}
.t-topbar{height:62px;background:var(--s1);border-bottom:1px solid var(--b1);display:flex;align-items:center;padding:0 24px;gap:14px;}
.t-body{display:flex;flex:1;overflow:hidden;height:calc(100vh - 62px);}
.t-sidebar{width:280px;min-width:280px;background:#080808;border-right:1px solid #1e1e1e;overflow-y:auto;padding:14px 0;}
.ts-lbl{font-family:'JetBrains Mono',monospace;font-size:22px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);padding:14px 20px 6px;}
.ts-item{display:flex;align-items:center;gap:12px;padding:14px 20px;cursor:pointer;transition:all .14s;font-size:22px;color:var(--muted);}
.ts-item:hover{background:var(--s2);color:var(--text);}
.ts-item.active{background:var(--s2);color:var(--text);border-left:3px solid var(--rouge);}
.ts-badge{margin-left:auto;background:var(--rouge);color:#fff;font-size:11px;font-weight:700;padding:2px 7px;border-radius:10px;font-family:'JetBrains Mono',monospace;}
.ts-icon{font-size:22px;flex-shrink:0;}
.t-content{flex:1;overflow-y:auto;padding:44px 48px;}
.t-page{display:none;}
.t-page.active{display:block;animation:fadeUp .28s ease;}
.t-page-h{font-size:1.65rem;font-weight:800;letter-spacing:-.02em;margin-bottom:22px;}
.t-page-h em{font-style:normal;color:var(--orange);}

/* student table */
.stu-table{width:100%;border-collapse:collapse;font-size:22px;}
.stu-table th{background:var(--s2);padding:10px 14px;text-align:left;font-family:'JetBrains Mono',monospace;font-size:22px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--b1);}
.stu-table td{padding:12px 14px;border-bottom:1px solid var(--b1);vertical-align:middle;}
.stu-table tr:hover td{background:var(--s2);}
.stu-av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:19px;font-weight:700;color:white;text-transform:uppercase;flex-shrink:0;}
.prog-bar-wrap{display:flex;align-items:center;gap:8px;}
.prog-bar-t{width:90px;height:5px;background:var(--b1);border-radius:2px;overflow:hidden;}
.prog-bar-f{height:100%;border-radius:2px;transition:width .4s;}
.tag-pill{font-family:'JetBrains Mono',monospace;font-size:22px;padding:3px 8px;border-radius:4px;border:1px solid;}
.btn-del{background:transparent;border:1px solid rgba(247,95,95,.25);color:var(--red);font-family:'JetBrains Mono',monospace;font-size:22px;letter-spacing:.06em;text-transform:uppercase;padding:6px 11px;border-radius:4px;cursor:pointer;transition:all .14s;}
.btn-del:hover{background:rgba(247,95,95,.08);}
.btn-reset-pw{background:transparent;border:1px solid rgba(47,109,181,.4);color:var(--bleu);font-family:'JetBrains Mono',monospace;font-size:22px;letter-spacing:.04em;text-transform:uppercase;padding:6px 11px;border-radius:4px;cursor:pointer;transition:all .14s;}
.btn-reset-pw:hover{background:rgba(47,109,181,.1);}
.btn-t{background:var(--rouge);color:#07090f;font-family:'JetBrains Mono',monospace;font-size:19px;letter-spacing:.08em;text-transform:uppercase;padding:10px 20px;border-radius:6px;border:none;cursor:pointer;font-weight:700;transition:opacity .15s;}
.btn-t:hover{opacity:.85;}
.t-form{background:#0e0e0e;border:1px solid #222;border-radius:16px;padding:36px;margin-bottom:28px;}
.t-form h3{font-size:1.25rem;font-weight:700;margin-bottom:24px;}
.t-field{margin-bottom:22px;}
.t-lbl{display:block;font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:700;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px;}
.t-input{width:100%;background:var(--s2);border:1px solid var(--b1);color:var(--text);font-family:'Outfit',sans-serif;font-size:19px;padding:16px 20px;border-radius:10px;outline:none;transition:border-color .18s;}
.t-input:focus{border-color:var(--rouge);}
.t-input::placeholder{color:var(--dim);}
.t-msg{font-size:19px;padding:14px 18px;border-radius:8px;margin-top:16px;display:none;}
.t-msg.ok{background:rgba(39,168,68,.1);color:var(--vert);border:1px solid rgba(39,168,68,.25);}
.t-msg.err{background:rgba(247,95,95,.1);color:var(--red);border:1px solid rgba(247,95,95,.25);}
.t-msg.show{display:block;}

/* heatmap */
.hm-wrap{overflow-x:auto;background:#0e0e0e;border:1px solid #222;border-radius:10px;padding:16px;}
.hm-table{border-collapse:collapse;font-size:22px;}
.hm-table th{font-family:'JetBrains Mono',monospace;font-weight:500;padding:4px 3px;color:var(--muted);border-bottom:1px solid var(--b1);}
.hm-table th.rot{vertical-align:bottom;text-align:center;max-width:24px;padding-bottom:6px;}
.hm-table th.rot span{writing-mode:vertical-rl;transform:rotate(180deg);display:inline-block;max-height:70px;font-size:19px;letter-spacing:.04em;}
.hm-name{font-size:22px;white-space:nowrap;padding:5px 10px 5px 4px;color:var(--text);font-weight:600;}
.hm-cell{text-align:center;padding:3px 2px;}
.hm-dot{width:12px;height:12px;border-radius:2px;margin:0 auto;background:var(--b1);transition:all .2s;}
.hm-dot.on{background:var(--vert);}
.hm-pct{font-family:'JetBrains Mono',monospace;font-size:19px;font-weight:600;padding:0 6px;color:var(--muted);}
.hm-table tr:hover .hm-name{color:var(--accent);}
.hm-table tr:hover .hm-dot:not(.on){background:var(--b2);}

/* student detail */
.stu-detail-card{background:var(--s1);border:1px solid var(--b1);border-radius:10px;padding:20px;margin-bottom:16px;}
.stu-detail-top{display:flex;align-items:center;gap:14px;margin-bottom:14px;}
.stu-detail-av{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;text-transform:uppercase;flex-shrink:0;}
.stu-detail-name{font-size:1.25rem;font-weight:700;}
.stu-detail-id{font-family:'JetBrains Mono',monospace;font-size:19px;color:var(--muted);margin-top:2px;}
.stu-qcm-row{display:flex;gap:8px;flex-wrap:wrap;}
.qcm-badge-card{
  background:var(--s2);border:1px solid var(--b1);border-radius:6px;
  padding:10px 14px;text-align:center;min-width:90px;
}
.qbc-label{font-family:'JetBrains Mono',monospace;font-size:22px;color:var(--muted);margin-bottom:4px;letter-spacing:.06em;}
.qbc-score{font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:700;}
.qbc-pct{font-family:'JetBrains Mono',monospace;font-size:22px;color:var(--muted);}
.back-btn{display:inline-flex;align-items:center;gap:6px;font-size:19px;color:var(--muted);cursor:pointer;margin-bottom:16px;transition:color .14s;}
.back-btn:hover{color:var(--text);}

/* settings */
.settings-card{background:#0e0e0e;border:1px solid #222;border-radius:10px;padding:22px;margin-bottom:16px;}
.settings-card h3{font-size:1.0rem;font-weight:700;margin-bottom:14px;}
.setting-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--b1);}
.setting-row:last-child{border-bottom:none;}
.setting-label{font-size:22px;color:var(--text);}
.setting-desc{font-size:22px;color:var(--muted);margin-top:2px;}
.setting-val{font-family:'JetBrains Mono',monospace;font-size:19px;color:var(--orange);font-weight:700;}

/* ══ CONFIRM MODAL ══ */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:10000;display:flex;align-items:center;justify-content:center;animation:fadeUp .2s ease;}
.modal-box{background:#111;border:1px solid #333;border-radius:12px;padding:28px 28px 22px;max-width:360px;width:90vw;box-shadow:0 32px 64px rgba(0,0,0,.8);}
.modal-title{font-size:1.2rem;font-weight:700;margin-bottom:10px;}
.modal-body{font-size:19px;color:var(--muted);line-height:1.7;margin-bottom:20px;}
.modal-body strong{color:var(--text);font-family:'JetBrains Mono',monospace;}
.modal-btns{display:flex;gap:8px;justify-content:flex-end;}
.modal-cancel{background:transparent;border:1px solid #333;color:var(--muted);font-family:'JetBrains Mono',monospace;font-size:19px;letter-spacing:.08em;text-transform:uppercase;padding:7px 14px;border-radius:4px;cursor:pointer;transition:all .14s;}
.modal-cancel:hover{border-color:#555;color:var(--text);}
.modal-confirm{font-family:'JetBrains Mono',monospace;font-size:19px;letter-spacing:.08em;text-transform:uppercase;padding:7px 14px;border-radius:4px;cursor:pointer;border:none;font-weight:700;transition:opacity .14s;}
.modal-confirm:hover{opacity:.85;}

/* ── Teacher access button ── */
#teacher-access-btn:hover{color:rgba(47,109,181,.8)!important;border-color:rgba(47,109,181,.3)!important;background:rgba(47,109,181,.07)!important;}
  #screen-app #teacher-access-btn,#screen-teacher #teacher-access-btn{display:none!important;}
/* ══════════════════════════════════════
   CHAPITRE 4 — SCHEMA 3D INTERACTIF
══════════════════════════════════════ */
.schema3d-wrap { margin-top:16px; }
.schema3d-top { display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap; }

.schema3d-canvas-wrap {
  background:#0d0d14;
  border:1px solid #222;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 8px 40px rgba(0,0,0,0.6);
  flex-shrink:0;
}
#s3d-svg { display:block; max-width:100%; }

/* SVG pin boxes via foreignObject */
.s3d-box {
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  font-weight:600;
  padding:4px 8px;
  border-radius:5px;
  border:1px solid rgba(255,255,255,0.15);
  background:rgba(13,13,20,0.88);
  color:rgba(255,255,255,0.3);
  white-space:nowrap;
  text-align:center;
  backdrop-filter:blur(2px);
  user-select:none;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
}
.s3d-box.clickable {
  border-color:rgba(247,163,91,0.7);
  color:rgba(247,163,91,0.9);
  background:rgba(247,163,91,0.1);
  cursor:pointer;
  animation:s3d-pulse .8s ease-in-out infinite alternate;
}
@keyframes s3d-pulse {
  from { box-shadow:0 0 0 0 rgba(247,163,91,0); }
  to   { box-shadow:0 0 8px 3px rgba(247,163,91,0.3); }
}
.s3d-box.correct {
  border-color:rgba(62,207,142,0.7);
  background:rgba(20,60,30,0.9);
  color:#3ecf8e;
}
.s3d-box.wrong {
  border-color:rgba(247,95,95,0.7);
  background:rgba(60,10,10,0.9);
  color:#f75f5f;
  animation:s3d-shake .35s ease;
}
@keyframes s3d-shake {
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-5px)}
  75%{transform:translateX(5px)}
}

/* Sidebar */
.schema3d-sidebar {
  flex:1;
  min-width:190px;
  max-width:260px;
}
.schema3d-score-box {
  background:#0e0e16;
  border:1px solid #222;
  border-radius:10px;
  padding:14px;
  margin-bottom:12px;
  text-align:center;
}
.schema3d-list-title {
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  color:#6b6b80;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:8px;
}
.schema3d-chips { display:flex; flex-wrap:wrap; gap:6px; }
.schema3d-chip {
  background:#111118;
  border:1px solid #2a2a35;
  border-radius:6px;
  padding:5px 9px;
  font-size:11px;
  font-family:'JetBrains Mono',monospace;
  color:#b0b0c8;
  cursor:pointer;
  transition:all .15s;
  user-select:none;
}
.schema3d-chip:hover { border-color:#f7a35b; color:#f7a35b; background:rgba(247,163,91,0.07); }
.schema3d-chip.selected {
  background:rgba(247,163,91,0.15);
  border-color:#f7a35b;
  color:#f7a35b;
  box-shadow:0 0 10px rgba(247,163,91,0.25);
}
.schema3d-chip.placed {
  opacity:0.28;
  text-decoration:line-through;
  cursor:default;
  pointer-events:none;
}

/* ══════════════════════════════════════
   GALERIE IMPRIMANTES & IMAGES HISTORIQUES
══════════════════════════════════════ */
.img-grid {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 12px 0 16px;
}
.img-card {
  flex: 1;
  min-width: 180px;
  max-width: 260px;
  background: #0e0e16;
  border: 1px solid #222;
  border-radius: 8px;
  overflow: hidden;
}
.img-cap {
  padding: 7px 10px;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
  font-style: italic;
}
.printer-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
  gap: 24px;
  margin-bottom: 16px;
}
.printer-card {
  background: #0d0d16;
  border: 1px solid #222;
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.printer-card:hover {
  border-color: #f7a35b88;
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.printer-img-wrap {
  background: #0d0d14;
  overflow: hidden;
  width: 100%;
  height: 500px;
}
.printer-img-wrap img {
  display: block;
  width: 500px;
  height: 500px;
  object-fit: contain;
  padding: 20px;
  transition: transform .3s;
  box-sizing: border-box;
  margin: 0 auto;
}
.printer-card:hover .printer-img-wrap img { transform: scale(1.06); }
.printer-info {
  padding: 14px 16px 16px;
  border-top: 1px solid #1a1a28;
}
.pi-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}
.pi-brand {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
  font-family: 'JetBrains Mono', monospace;
}
.pi-specs {
  font-size: 12px;
  color: #8888aa;
  line-height: 1.6;
  margin-bottom: 9px;
}
.pi-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: .04em;
}

/* ══════════════════════════════════════
   ACTIVITÉ COMPOSANTS (CH4P3)
══════════════════════════════════════ */
.cact-wrap {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin-top: 18px;
  flex-wrap: wrap;
}
.cact-main { flex: 1; min-width: 0; }

/* Score bar */
.cact-scorebar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: #0e0e18;
  border: 1px solid #222;
  border-radius: 10px;
  margin-bottom: 20px;
}
.cact-score-num {
  font-size: 32px;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  line-height: 1;
}
.cact-progress {
  flex: 1;
  height: 6px;
  background: #1a1a28;
  border-radius: 3px;
  overflow: hidden;
}
.cact-progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .5s ease;
}

/* Grid — 2 colonnes larges */
.cact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(520px, 1fr));
  gap: 22px;
  margin-bottom: 20px;
}

/* Card */
.cact-card {
  background: #0e0e18;
  border: 1px solid #1e1e2e;
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  display: flex;
  flex-direction: column;
}
.cact-card:hover {
  border-color: rgba(247,163,91,0.35);
  transform: translateY(-3px);
  box-shadow: 0 10px 35px rgba(0,0,0,0.45);
}
.cact-card.cact-ok  { border-color: rgba(62,207,142,0.5);  box-shadow: 0 0 20px rgba(62,207,142,0.1); }
.cact-card.cact-bad { border-color: rgba(247,95,95,0.5); }

/* Image — triplée */
.cact-img-wrap {
  background: #0a0a12;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 500px;
  height: 500px;
  overflow: hidden;
  border-bottom: 1px solid #1a1a28;
  position: relative;
  margin: 0 auto;
}
.cact-card.cact-ok  .cact-img-wrap { background: rgba(10,30,15,0.8); }
.cact-card.cact-bad .cact-img-wrap { background: rgba(30,8,8,0.6); }

.cact-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 30px;
  box-sizing: border-box;
  transition: transform .3s;
}
.cact-card:hover .cact-img-wrap img { transform: scale(1.04); }

/* Badge état sur l'image */
.cact-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cact-card.cact-ok  .cact-img-wrap::after { background: rgba(62,207,142,0.04); }
.cact-card.cact-bad .cact-img-wrap::after { background: rgba(247,95,95,0.04); }

/* Zone du bas (input + bouton) */
.cact-bottom {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.cact-input {
  width: 100%;
  box-sizing: border-box;
  background: #111120;
  border: 1px solid #2a2a3a;
  border-radius: 8px;
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  padding: 10px 14px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.cact-input:focus {
  border-color: #f7a35b;
  box-shadow: 0 0 0 3px rgba(247,163,91,0.12);
}
.cact-card.cact-bad .cact-input {
  border-color: rgba(247,95,95,0.5);
  background: rgba(40,8,8,0.6);
}

/* Bouton Valider */
.cact-btn {
  width: 100%;
  padding: 11px 16px;
  background: rgba(247,163,91,0.12);
  border: 1px solid rgba(247,163,91,0.35);
  border-radius: 8px;
  color: #f7a35b;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  letter-spacing: .02em;
}
.cact-btn:hover {
  background: rgba(247,163,91,0.22);
  border-color: #f7a35b;
  transform: translateY(-1px);
}
.cact-btn:active { transform: translateY(0); }
.cact-btn.cact-btn-retry {
  background: rgba(247,95,95,0.1);
  border-color: rgba(247,95,95,0.35);
  color: #f75f5f;
}
.cact-btn.cact-btn-retry:hover {
  background: rgba(247,95,95,0.2);
  border-color: #f75f5f;
}

/* Feedback sous le bouton */
.cact-feedback {
  font-size: 13px;
  line-height: 1.5;
  padding: 8px 12px;
  border-radius: 7px;
}
.cact-feedback.ok-fb {
  background: rgba(15,45,20,0.8);
  border: 1px solid rgba(62,207,142,0.3);
  color: #3ecf8e;
  font-weight: 600;
}
.cact-feedback.bad-fb {
  background: rgba(50,10,10,0.8);
  border: 1px solid rgba(247,95,95,0.3);
  color: #f7a35b;
}

/* Sidebar */
.cact-sidebar {
  width: 240px;
  flex-shrink: 0;
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  align-self: flex-start;
}
.cact-sidebar-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #f7a35b;
  margin-bottom: 8px;
}
.cact-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.cact-chip {
  background: #0e0e18;
  border: 1px solid #2a2a35;
  border-radius: 7px;
  padding: 7px 10px;
  font-size: 12px;
  color: #b0b0c8;
  cursor: pointer;
  transition: all .14s;
  font-family: 'JetBrains Mono', monospace;
  line-height: 1.3;
}
.cact-chip:hover {
  border-color: #f7a35b;
  color: #f7a35b;
  background: rgba(247,163,91,0.07);
  transform: translateY(-1px);
}
.cact-chip.chip-ok {
  border-color: rgba(62,207,142,0.4);
  color: #3ecf8e;
  background: rgba(15,45,20,0.4);
  cursor: default;
  opacity: .7;
}

@media (max-width: 800px) {
  .cact-wrap { flex-direction: column; }
  .cact-sidebar { width: 100%; position: static; }
  .cact-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════
   POPUP "Essaye encore" 
══════════════════════════════════════ */
.cact-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  background: #1a0f0f;
  border: 2px solid #f75f5f;
  border-radius: 18px;
  padding: 32px 48px;
  text-align: center;
  z-index: 9999;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 40px rgba(247,95,95,0.15);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.cact-toast.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}
.cact-toast-emoji { font-size: 48px; display: block; margin-bottom: 12px; }
.cact-toast-msg {
  font-size: 22px;
  font-weight: 700;
  color: #f75f5f;
  margin-bottom: 6px;
}
.cact-toast-sub {
  font-size: 14px;
  color: var(--muted);
}
.cact-toast-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.cact-toast-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

/* ════════════════════════════════════════
   CLASSES MANAGEMENT
════════════════════════════════════════ */
.cls-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.cls-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 18px;
}
.cls-card {
  background: var(--s1);
  border: 1.5px solid var(--b1);
  border-radius: 14px;
  padding: 20px 22px 16px;
}
.cls-card-unassigned {
  border-color: rgba(247,160,79,.4);
  background: rgba(247,160,79,.06);
}
.cls-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.cls-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 21px;
  font-weight: 700;
}
.cls-icon { font-size: 24px; }
.cls-name-display { color: var(--fg); }
.cls-edit-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  opacity: 0.6;
  padding: 2px 5px;
  border-radius: 5px;
  transition: opacity .15s, background .15s;
}
.cls-edit-btn:hover { opacity: 1; background: var(--s2); }
.cls-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cls-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  color: var(--muted);
  border: 1px solid var(--b1);
  border-radius: 20px;
  padding: 2px 10px;
}
.cls-badge-warn {
  color: var(--orange);
  border-color: rgba(247,160,79,.5);
}
.cls-delete-btn {
  background: none;
  border: 1px solid rgba(247,95,95,.4);
  color: var(--red);
  border-radius: 8px;
  padding: 4px 12px;
  cursor: pointer;
  font-size: 17px;
  transition: background .15s;
}
.cls-delete-btn:hover { background: rgba(247,95,95,.12); }
.cls-students-area {
  min-height: 40px;
  margin-bottom: 14px;
}
.cls-stu-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cls-stu-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--s2);
  border: 1px solid var(--b1);
  border-radius: 20px;
  padding: 4px 10px 4px 5px;
  font-size: 18px;
  font-weight: 500;
}
.cls-pill-warn {
  border-color: rgba(247,160,79,.4);
  background: rgba(247,160,79,.08);
  color: var(--orange);
}
.cls-pill-av {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.cls-pill-rm {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 14px;
  padding: 0 2px;
  border-radius: 50%;
  line-height: 1;
  transition: color .15s, background .15s;
}
.cls-pill-rm:hover { color: var(--red); background: rgba(247,95,95,.15); }
.cls-empty-msg {
  font-size: 18px;
  color: var(--muted);
  font-style: italic;
}
.cls-add-row {
  display: flex;
  gap: 10px;
  align-items: center;
}
.cls-select { flex: 1; max-width: 380px; }
.cls-add-btn { flex-shrink: 0; white-space: nowrap; }
.cls-rename-input { font-size: 20px; }
.cls-empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--muted);
}

/* Modal classes */
.cls-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cls-modal {
  background: var(--s1);
  border: 1.5px solid var(--b1);
  border-radius: 16px;
  padding: 28px 30px 22px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.cls-modal-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
}
.cls-modal-btns {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}

/* ════════════════════════════════════════
   ATTEMPT SYSTEM
════════════════════════════════════════ */
.attempt-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(91,142,247,.08);
  border: 1.5px solid rgba(91,142,247,.3);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 16px;
}
.attempt-banner.warn {
  background: rgba(247,160,79,.1);
  border-color: rgba(247,160,79,.5);
}
.attempt-banner.fresh {
  background: rgba(62,207,142,.07);
  border-color: rgba(62,207,142,.3);
}
.attempt-banner.final {
  background: rgba(247,95,95,.08);
  border-color: rgba(247,95,95,.4);
}
.att-icon { font-size: 26px; flex-shrink: 0; }
.att-info { flex: 1; }
.att-title { font-size: 18px; font-weight: 600; margin-bottom: 3px; }
.att-sub { font-size: 15px; color: var(--muted); }
.att-dot {
  font-size: 16px;
  margin: 0 2px;
}
.att-dot.used { color: var(--orange); }
.att-dot.free { color: var(--muted); }

/* Reset attempts button */
.btn-reset-att {
  padding: 5px 11px;
  border-radius: 7px;
  border: 1px solid rgba(91,142,247,.4);
  background: rgba(91,142,247,.08);
  color: var(--bleu, #5b8ef7);
  cursor: pointer;
  font-size: 17px;
  transition: background .15s;
}
.btn-reset-att:hover { background: rgba(91,142,247,.18); }

/* ════════════════════════════════════════
   GRADES PANEL
════════════════════════════════════════ */
.grade-summary-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.grade-summary-card {
  flex: 1;
  min-width: 140px;
  background: var(--s1);
  border: 1.5px solid var(--b1);
  border-radius: 12px;
  padding: 14px 16px;
  text-align: center;
}
.gsc-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: 3px;
}
.gsc-name {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 8px;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gsc-avg {
  font-size: 28px;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 4px;
}
.gsc-meta {
  font-size: 13px;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
}

.grade-table {
  width: 100%;
  border-collapse: collapse;
}
.grade-table thead tr {
  background: var(--s2);
}
.grade-table thead th {
  padding: 12px 14px;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  border-bottom: 1px solid var(--b1);
}
.grade-th { min-width: 90px; }
.grade-name-cell {
  padding: 10px 16px;
  border-bottom: 1px solid var(--b1);
  text-align: left;
}
.grade-table tbody tr:hover { background: var(--s2); }
.grade-cell {
  padding: 8px 12px;
  border-bottom: 1px solid var(--b1);
  text-align: center;
  vertical-align: middle;
}
.grade-pass { background: rgba(39,168,68,.07); }
.grade-fail { background: rgba(247,95,95,.06); }
.grade-empty { color: var(--muted); }
.grade-score {
  font-size: 18px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}
.grade-max { font-size: 13px; color: var(--muted); font-weight: 400; }
.grade-pct {
  font-size: 14px;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
}
.grade-att {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  font-family: 'JetBrains Mono', monospace;
}
.grade-att.att-full {
  color: var(--red);
  font-weight: 600;
}

/* ══════════════════════════════════════
   RESPONSIVE — TOUTES TAILLES D'ÉCRAN
══════════════════════════════════════ */

/* ── Écran moyen (≤ 1399px) ── */
@media (max-width: 1399px) {
  .sidenav { width: 380px; min-width: 380px; }
  .page { padding: 36px 40px 70px; }
  .t-content { padding: 36px 40px; }
  .ch-cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .comp-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}

/* ── Écran compact (≤ 1200px) ── */
@media (max-width: 1200px) {
  .sidenav { width: 320px; min-width: 320px; }
  .page { padding: 30px 32px 60px; }
  .t-content { padding: 30px 28px; }
  .ch-cards { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
  .comp-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  .sn-ch-title { font-size: 11px; }
  .sn-btn-label { font-size: 12px; }
}

/* ── Tablette (≤ 900px) : sidebars en tiroir ── */
@media (max-width: 900px) {

  /* Topbars */
  .topbar, .t-topbar { padding: 0 14px; gap: 10px; }
  .tb-prog { display: none; }
  .tb-name { display: none; }

  /* Boutons hamburger visibles */
  .sn-toggle-btn { display: flex !important; }

  /* App body : position relative pour que les tiroirs s'ancrent dedans */
  .app-body, .t-body { position: relative; overflow: hidden; }

  /* ─ Sidebar élève en tiroir ─ */
  .sidenav {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 88vw !important; max-width: 430px;
    min-width: unset !important;
    z-index: 500;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    box-shadow: none;
  }
  .sidenav.open {
    transform: translateX(0);
    box-shadow: 12px 0 48px rgba(0,0,0,.7);
  }

  /* ─ Sidebar enseignant en tiroir ─ */
  .t-sidebar {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 82vw !important; max-width: 320px;
    min-width: unset !important;
    z-index: 500;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    box-shadow: none;
  }
  .t-sidebar.open {
    transform: translateX(0);
    box-shadow: 12px 0 48px rgba(0,0,0,.7);
  }

  /* ─ Overlay ─ */
  .sn-overlay {
    display: block !important;
    position: absolute; inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 499;
    opacity: 0; pointer-events: none;
    transition: opacity .28s;
  }
  .sn-overlay.open { opacity: 1; pointer-events: auto; }

  /* Page area pleine largeur */
  .page-area { width: 100%; }
  .t-content { flex: 1; overflow-y: auto; }
  .page { padding: 24px 20px 60px; }
  .t-content { padding: 24px 20px; }

  /* Tables scrollables */
  .stu-table-wrap, .grade-table-wrap, .hm-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Login */
  .login-card { padding: 36px 28px 32px; }

  /* QCM */
  .qcm-wrap { padding: 20px 16px; }
}

/* ── Mobile (≤ 600px) ── */
@media (max-width: 600px) {

  /* Topbar compact */
  .topbar { height: 54px; min-height: 54px; }
  .app-body { height: calc(100vh - 54px); }
  .tb-brand { font-size: 24px; }
  .tb-brand span { display: none; }

  /* Login */
  .login-card { padding: 28px 18px 28px; border-radius: 14px; width: calc(100vw - 32px); }
  .login-brand { font-size: 22px; }
  .login-sub { font-size: 15px; }
  .finput { font-size: 17px; padding: 12px 14px; }
  .login-btn { font-size: 17px; padding: 14px; }

  /* Nav ouverte pleine largeur */
  .sidenav { width: 93vw !important; }

  /* Pages */
  .page { padding: 16px 14px 60px; }
  .t-content { padding: 16px 14px; }

  /* Dashboard */
  .welcome-card { padding: 22px 18px; }
  .welcome-card h2 { font-size: 1.25rem; }
  .welcome-logo { width: 75px !important; height: 75px !important; top: 8px !important; right: 8px !important; }
  .gp-label { display: none; }
  .ch-cards { grid-template-columns: 1fr; gap: 12px; }
  .ch-card { padding: 20px 18px; }
  .comp-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .comp-card { padding: 18px 14px; aspect-ratio: unset; }

  /* QCM */
  .qcm-hd { flex-wrap: wrap; gap: 8px; }
  .qcm-pts { display: none; }
  .opt { font-size: 16px; padding: 12px 14px; }
  .qcm-ft { flex-wrap: wrap; gap: 8px; }
  .qcm-ft button { flex: 1; min-width: 120px; }

  /* Attempt banner */
  .attempt-banner { padding: 10px 12px; gap: 8px; flex-wrap: wrap; }
  .att-title { font-size: 14px; }
  .att-sub { font-size: 12px; }
  .att-dot { width: 10px; height: 10px; }

  /* Teacher */
  .t-page-h { font-size: 1.2rem; }
  .stu-table { font-size: 13px; }
  .stu-table th, .stu-table td { padding: 8px 8px; }
  .tag-pill { font-size: 11px; padding: 2px 6px; }
  .grade-summary-row { flex-direction: column; }
  .grade-summary-card { min-width: unset; }
  .t-form { padding: 18px; }

  /* Nav footer */
  .sn-footer { flex-direction: row; gap: 6px; }
  .sn-footer-btn { font-size: 11px; padding: 8px 6px; }

  /* Classes */
  .cls-card { padding: 14px 14px 12px; }
  .cls-add-row { flex-wrap: wrap; gap: 6px; }
  .cls-select { width: 100%; }
  .cls-toolbar { gap: 10px; }

  /* Boxes prose */
  .box { padding: 16px 18px; font-size: 18px; }
  .part-ttl { font-size: 1.1rem; }
}

/* ── Très petit mobile (≤ 380px) ── */
@media (max-width: 380px) {
  .login-card { padding: 20px 14px 20px; }
  .page { padding: 12px 10px 50px; }
  .comp-grid { grid-template-columns: 1fr; }
  .sn-ch-title { font-size: 10px; }
  .sn-btn-label { font-size: 12px; }
  .ch-card { padding: 16px 14px; }
}

/* ══ DOWNLOADS PAGE ══ */
.dl-grid{display:flex;flex-direction:column;gap:14px;margin:0 0 24px;}
.dl-card{
  display:flex;align-items:flex-start;gap:16px;
  background:var(--s1);border:1px solid var(--b1);border-radius:14px;
  padding:20px;transition:border-color .2s;
}
.dl-card:hover{border-color:rgba(247,163,91,.4);}
.dl-card-wide{flex-wrap:wrap;}
.dl-card-icon{
  width:52px;height:52px;border-radius:12px;
  font-size:26px;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.dl-card-body{flex:1;min-width:0;}
.dl-card-title{font-size:17px;font-weight:800;color:var(--text);margin-bottom:6px;}
.dl-card-desc{font-size:14px;color:#8090bb;line-height:1.6;margin-bottom:10px;}
.dl-card-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
.dl-tag{
  font-family:'JetBrains Mono',monospace;font-size:11px;
  padding:3px 8px;border-radius:5px;
  background:rgba(255,255,255,.05);color:var(--muted);
  border:1px solid var(--b1);
}
.dl-btn{
  flex-shrink:0;align-self:center;
  background:var(--dlc,#f7a35b);color:#fff;
  border:none;border-radius:8px;padding:10px 18px;
  font-size:14px;font-weight:700;cursor:pointer;
  transition:opacity .15s;white-space:nowrap;
}
.dl-btn:hover{opacity:.85;}
.dl-how{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;}
.dl-how-step{
  display:flex;align-items:center;gap:7px;
  font-size:13px;color:#8090bb;
}
.dl-how-n{
  width:22px;height:22px;border-radius:50%;
  background:rgba(155,92,247,.2);color:#9b5cf7;
  font-size:12px;font-weight:800;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.sn-btn-dl.active{border-top:3px solid #f7a35b;}
.sn-badge{
  background:#f75f5f;color:#fff;font-size:10px;font-weight:700;
  padding:1px 5px;border-radius:8px;margin-left:4px;
}

/* ══ TEACHER RESSOURCES PANEL ══ */
.tp-res-grid{display:flex;flex-direction:column;gap:12px;}
.tp-res-card{
  display:flex;align-items:center;gap:16px;
  background:var(--s1);border:1px solid var(--b1);border-radius:12px;
  padding:16px;transition:border-color .2s;
}
.tp-res-card:hover{border-color:rgba(255,255,255,.15);}
.tp-res-icon{
  width:48px;height:48px;border-radius:10px;
  font-size:22px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.tp-res-body{flex:1;min-width:0;}
.tp-res-title{font-size:16px;font-weight:700;color:var(--text);margin-bottom:4px;}
.tp-res-desc{font-size:13px;color:var(--muted);line-height:1.5;margin-bottom:8px;}
.tp-res-tags{display:flex;flex-wrap:wrap;gap:5px;}
.tp-res-tag{
  font-family:'JetBrains Mono',monospace;font-size:11px;
  padding:2px 7px;border-radius:4px;
  background:rgba(255,255,255,.05);color:var(--muted);border:1px solid var(--b1);
}
.tp-res-btn{
  flex-shrink:0;
  background:var(--rc,#5b8ef7);color:#fff;
  border:none;border-radius:8px;padding:9px 16px;
  font-size:13px;font-weight:700;cursor:pointer;
  text-decoration:none;white-space:nowrap;
  transition:opacity .15s;
}
.tp-res-btn:hover{opacity:.82;}

/* ══ TP TRAVAUX PRATIQUES ══ */
.tp-form { display:flex; flex-direction:column; gap:16px; margin-bottom:24px; }

.tp-q-block {
  background:var(--s1); border:1px solid var(--b1); border-radius:10px;
  padding:16px; display:flex; flex-direction:column; gap:8px;
}
.tp-q-label { font-size:14px; color:var(--text); line-height:1.5; }

.tp-q-opts { display:flex; flex-direction:column; gap:6px; }
.tp-opt {
  display:flex; align-items:flex-start; gap:10px; cursor:pointer;
  padding:8px 12px; border-radius:7px; border:1px solid var(--b1);
  transition:background .15s, border-color .15s;
}
.tp-opt:hover { background:rgba(155,92,247,.08); border-color:#9b5cf755; }
.tp-opt input[type=radio] { margin-top:2px; accent-color:#9b5cf7; flex-shrink:0; }
.tp-opt-txt { font-size:13px; color:var(--text); line-height:1.5; }

.tp-feedback {
  font-size:13px; padding:7px 12px; border-radius:6px; margin-top:2px;
}
.tp-feedback.tp-ok  { background:rgba(62,207,142,.12); border:1px solid rgba(62,207,142,.3); }
.tp-feedback.tp-err { background:rgba(247,95,95,.10);  border:1px solid rgba(247,95,95,.3); }

.tp-justif {
  background:rgba(155,92,247,.08); border-left:3px solid #9b5cf7;
  border-radius:0 6px 6px 0; padding:8px 12px; margin-top:4px;
}
.tp-justif-label { font-size:11px; font-weight:700; color:#9b5cf7; margin-bottom:3px; text-transform:uppercase; letter-spacing:.05em; }
.tp-justif-text  { font-size:13px; color:var(--muted); line-height:1.5; }

.tp-open-block { display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.tp-open-q { font-size:14px; font-weight:600; color:var(--text); padding:10px 14px; background:rgba(155,92,247,.08); border-radius:8px; border-left:3px solid #9b5cf7; }
.tp-textarea {
  width:100%; min-height:80px; background:var(--s1); border:1px solid var(--b1);
  border-radius:8px; padding:10px 14px; color:var(--text); font-size:13px;
  font-family:inherit; resize:vertical; transition:border-color .15s; box-sizing:border-box;
}
.tp-textarea:focus { outline:none; border-color:#9b5cf7; }

.tp-correction {
  background:rgba(62,207,142,.08); border:1px solid rgba(62,207,142,.25);
  border-radius:10px; padding:16px; display:flex; flex-direction:column; gap:8px;
  margin-top:8px;
}
.tp-corr-item { font-size:13px; color:var(--text); line-height:1.6; padding-left:10px; border-left:2px solid #3ecf8e; }

.tp-table-wrap { overflow-x:auto; margin-bottom:8px; }
.tp-ecart-input {
  width:72px; background:var(--s2); border:1px solid var(--b1);
  border-radius:5px; padding:4px 6px; color:var(--text); font-size:13px;
  text-align:center; transition:border-color .15s;
}
.tp-opt-inline { display:inline-flex; align-items:center; gap:4px; margin-right:10px; font-size:13px; cursor:pointer; }
.tp-opt-inline input { accent-color:#9b5cf7; }

/* ── TP NAV ITEMS ── */
.sni.sni-tp {
  opacity: 0.85;
  border-left: 2px solid var(--ic);
  background: rgba(155,92,247,.04);
}
.sni.sni-tp:hover, .sni.sni-tp.active {
  opacity: 1;
  background: rgba(155,92,247,.12);
}
.sni.sni-tp .sni-num {
  font-size: 13px;
}
.sni.sni-tp .sni-text {
  font-size: 12px;
  font-style: italic;
}

/* ── PDF VIEWER BUTTONS ── */
.tp-res-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.tp-res-btn-dl {
  text-align: center;
  font-size: 16px !important;
  padding: 6px 10px !important;
  min-width: unset !important;
  opacity: .7;
}
.tp-res-btn-dl:hover { opacity: 1; }

/* ═══════════════════════════════════
   SIMULATEUR 3D
═══════════════════════════════════ */
.sim-layout{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap;}
.sim-params{width:270px;min-width:240px;background:var(--card);border:1px solid var(--b1);border-radius:16px;padding:20px 18px;flex-shrink:0;}
.sim-section-title{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;}
.sim-param-group{margin-bottom:16px;}
.sim-label{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted);margin-bottom:6px;font-weight:500;}
.sim-val{color:#fff;font-weight:700;font-size:12px;background:rgba(155,92,247,.15);padding:2px 8px;border-radius:6px;}
.sim-range{width:100%;accent-color:#9b5cf7;cursor:pointer;}
.sim-ticks{display:flex;justify-content:space-between;opacity:.55;}
.sim-select{width:100%;background:var(--b1);border:1px solid var(--b2);border-radius:8px;color:#fff;padding:8px 12px;font-size:13px;font-family:'Outfit',sans-serif;cursor:pointer;}
.sim-toggles{display:flex;flex-direction:column;gap:10px;margin:16px 0;}
.sim-toggle{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:13px;color:var(--muted);}
.sim-toggle input{display:none;}
.sim-toggle-track{width:36px;height:20px;background:var(--b2);border-radius:10px;position:relative;transition:.2s;flex-shrink:0;}
.sim-toggle-track::after{content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;background:#555;border-radius:50%;transition:.2s;}
.sim-toggle input:checked ~ .sim-toggle-track{background:#9b5cf7;}
.sim-toggle input:checked ~ .sim-toggle-track::after{left:19px;background:#fff;}
.sim-shapes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px;}
.sim-shape-btn{background:var(--b1);border:1px solid var(--b2);border-radius:8px;color:var(--muted);padding:8px;font-size:12px;font-family:'Outfit',sans-serif;cursor:pointer;transition:.15s;font-weight:600;}
.sim-shape-btn:hover{border-color:#9b5cf7;color:#fff;}
.sim-shape-btn.active{background:rgba(155,92,247,.15);border-color:#9b5cf7;color:#9b5cf7;}
.sim-print-btn{width:100%;background:#9b5cf7;border:none;border-radius:10px;color:#fff;padding:12px;font-size:14px;font-weight:700;font-family:'Outfit',sans-serif;cursor:pointer;transition:.15s;margin-top:4px;}
.sim-print-btn:hover{opacity:.88;transform:translateY(-1px);}
.sim-canvas-zone{flex:1;min-width:280px;}
.sim-canvas-wrap{background:#08090e;border:1px solid var(--b1);border-radius:16px;padding:16px;position:relative;}
#sim-canvas{width:100%;max-width:500px;display:block;margin:0 auto;border-radius:8px;}
.sim-progress-bar{height:4px;background:var(--b1);border-radius:2px;margin-top:12px;overflow:hidden;}
.sim-progress-fill{height:100%;background:linear-gradient(90deg,#9b5cf7,#5b8ef7);border-radius:2px;transition:width .1s;}
.sim-layer-info{text-align:center;font-size:12px;color:var(--muted);margin-top:7px;font-weight:600;}
.sim-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px;}
.sim-stat{background:var(--card);border:1px solid var(--b1);border-radius:10px;padding:12px 8px;text-align:center;}
.sim-stat-val{font-size:14px;font-weight:800;color:#fff;margin-bottom:3px;}
.sim-stat-lbl{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;}
#sim-alerts{margin-top:12px;display:flex;flex-direction:column;gap:7px;}
.sim-alert{padding:9px 13px;border-radius:8px;font-size:13px;line-height:1.5;}
.sim-alert-danger{background:rgba(220,50,50,.12);border:1px solid rgba(220,50,50,.3);color:#ff7070;}
.sim-alert-warn{background:rgba(247,163,91,.1);border:1px solid rgba(247,163,91,.25);color:#f7a35b;}
.sim-alert-info{background:rgba(91,142,247,.1);border:1px solid rgba(91,142,247,.25);color:#5b8ef7;}
.sim-defect-legend{margin-top:14px;background:var(--card);border:1px solid var(--b1);border-radius:12px;padding:14px 16px;}
.sim-legend-title{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px;}
.sim-legend-item{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:#bbb;margin-bottom:8px;line-height:1.5;}
.sim-legend-item strong{color:#fff;}
.sim-legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:4px;}
@media(max-width:700px){
  .sim-layout{flex-direction:column;}
  .sim-params{width:100%;}
  .sim-stats{grid-template-columns:repeat(2,1fr);}
}
  .sim-params{width:100%;}
  .sim-stats{grid-template-columns:repeat(2,1fr);}
}

/* CHAPITRE 6 - Cases de calcul */
.calc-box{background:#0d0e16;border:1.5px solid #1a2035;border-radius:12px;padding:18px 22px;margin:14px 0;transition:border-color .2s}
.calc-question{font-size:14px;font-weight:700;color:#c8cadd;margin-bottom:8px;line-height:1.5}
.calc-hint{font-size:12px;color:#556;font-style:italic;margin-bottom:10px;padding:6px 10px;background:#0a0b12;border-left:3px solid #00bfae;border-radius:0 6px 6px 0}
.calc-input-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.calc-input{background:#060810;border:1.5px solid #1e2540;border-radius:8px;color:#e0e2f0;font-family:'JetBrains Mono',monospace;font-size:15px;padding:9px 14px;width:140px;outline:none;transition:border-color .15s}
.calc-input:focus{border-color:#00bfae}
.calc-input:disabled{opacity:.5}
.calc-unit{font-family:'JetBrains Mono',monospace;font-size:13px;color:#00bfae;font-weight:700}
.calc-fb{margin-top:10px;font-size:13px;min-height:20px;font-weight:600}

/* AVATAR PHOTO PROFIL */
.wc-avatar{width:72px;height:72px;border-radius:50%;border:3px solid rgba(255,255,255,0.25);object-fit:cover;margin-bottom:14px;display:block;background:rgba(255,255,255,0.1);}
.wc-avatar-initials{width:72px;height:72px;border-radius:50%;border:3px solid rgba(255,255,255,0.25);background:rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:800;color:#fff;letter-spacing:-1px;margin-bottom:14px;flex-shrink:0;}
.photo-upload-area{border:2px dashed var(--b1);border-radius:12px;padding:28px 20px;text-align:center;cursor:pointer;transition:border-color .2s,background .2s;margin:16px 0;background:var(--s2);}
.photo-upload-area:hover{border-color:#5b8ef7;background:#0d1020;}
.photo-upload-area input[type=file]{display:none;}
.photo-preview{width:100px;height:100px;border-radius:50%;object-fit:cover;border:3px solid #5b8ef7;margin:0 auto 12px;display:block;}
.photo-upload-label{font-size:13px;color:#778;margin-top:8px;display:block;}

/* ════ BADGES ════ */
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin:20px 0;}
.badge-card{background:var(--s1);border:1px solid var(--b1);border-radius:14px;padding:20px 16px;text-align:center;transition:transform .15s,box-shadow .15s;}
.badge-earned{border-color:var(--bc,#5b8ef7);box-shadow:0 0 0 1px var(--bc,#5b8ef7);}
.badge-earned:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,0,0,.25);}
.badge-locked{opacity:.45;filter:grayscale(1);}
.badge-icon{font-size:40px;margin-bottom:10px;width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;background:rgba(255,255,255,.07);border:2px solid var(--bc,var(--b1));}
.badge-name{font-size:14px;font-weight:800;color:var(--text);margin-bottom:4px;}
.badge-desc{font-size:11px;color:var(--muted);line-height:1.4;margin-bottom:10px;}
.badge-tag{font-size:10px;font-weight:700;padding:3px 10px;border-radius:20px;background:rgba(255,255,255,.1);color:#3ecf8e;display:inline-block;}
.badge-tag-locked{color:var(--muted);}
.badge-progress-bar{height:6px;background:var(--s2);border-radius:6px;margin:0 0 24px;overflow:hidden;}
.badge-progress-fill{height:100%;background:linear-gradient(90deg,#5b8ef7,#fbbf24);border-radius:6px;transition:width .6s ease;}
.badge-strip{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0;}
.badge-strip-empty{font-size:13px;color:var(--muted);font-style:italic;margin:8px 0;}
.badge-pip{font-size:22px;width:38px;height:38px;border-radius:50%;background:var(--s2);border:2px solid var(--bc,var(--b1));display:inline-flex;align-items:center;justify-content:center;cursor:default;transition:transform .1s;}
.badge-pip:hover{transform:scale(1.15);}
/* Toast badge */
.badge-toast{position:fixed;bottom:28px;right:28px;background:var(--s1);border:2px solid var(--btc,#fbbf24);border-radius:14px;padding:14px 18px;display:flex;align-items:center;gap:14px;z-index:9999;box-shadow:0 8px 32px rgba(0,0,0,.4);transform:translateY(80px);opacity:0;transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .35s;}
.badge-toast-in{transform:translateY(0);opacity:1;}
.badge-toast-out{transform:translateY(80px);opacity:0;}
.badge-toast-icon{font-size:28px;}
.badge-toast-title{font-size:11px;color:var(--btc,#fbbf24);font-weight:700;text-transform:uppercase;letter-spacing:.05em;}
.badge-toast-name{font-size:15px;font-weight:800;color:var(--text);}

/* ════ TEACHER DASHBOARD ════ */
.ch-stats-wrap{display:flex;flex-direction:column;gap:8px;margin-bottom:28px;}
.ch-stat-bar{display:flex;align-items:center;gap:12px;}
.ch-stat-label{font-size:12px;color:var(--text);width:130px;flex-shrink:0;}
.ch-stat-track{flex:1;height:10px;background:var(--s2);border-radius:6px;overflow:hidden;}
.ch-stat-fill{height:100%;border-radius:6px;transition:width .5s ease;}
.ch-stat-pct{font-size:12px;color:var(--muted);width:90px;text-align:right;flex-shrink:0;}
.tc-scroll{overflow-x:auto;margin-bottom:24px;}
.tc-table{width:100%;border-collapse:collapse;font-size:12px;min-width:700px;}
.tc-table thead tr{background:var(--s2);}
.tc-table th{padding:8px 10px;text-align:left;font-weight:700;color:var(--muted);font-size:11px;white-space:nowrap;border-bottom:1px solid var(--b1);}
.tc-table td{padding:8px 10px;border-bottom:1px solid var(--b1);vertical-align:middle;}
.tc-table tbody tr:hover{background:var(--s2);}
.tc-name{font-weight:700;color:var(--text);white-space:nowrap;}
.tc-prog{display:flex;align-items:center;gap:8px;min-width:120px;}
.tc-bar{flex:1;height:6px;background:var(--s2);border-radius:4px;overflow:hidden;}
.tc-bar-fill{height:100%;background:#5b8ef7;border-radius:4px;}
.tc-pct{font-size:11px;color:var(--muted);width:32px;text-align:right;flex-shrink:0;}
.tc-cell{text-align:center;font-size:13px;font-weight:700;}
.tc-ok{color:#3ecf8e;font-weight:700;}
.tc-no{color:var(--b1);}
.tc-fail{color:#f7a35b;font-size:11px;}
.tc-badges{white-space:nowrap;}

/* ════ CERTIFICAT ════ */
.cert-preview{background:linear-gradient(135deg,#fff 0%,#f0f4ff 100%);border:3px solid #5b8ef7;border-radius:16px;overflow:hidden;margin:20px 0;max-width:720px;color:#1a1a2e;}
.cert-header{background:linear-gradient(135deg,#0d0e16,#1a2035);color:#fff;padding:32px 40px;text-align:center;}
.cert-logo{font-size:36px;margin-bottom:8px;}
.cert-header-title{font-size:20px;font-weight:800;letter-spacing:.1em;color:#5b8ef7;}
.cert-header-sub{font-size:13px;color:#aab;margin-top:6px;line-height:1.5;}
.cert-body{padding:32px 40px;}
.cert-certifie{font-size:14px;color:#667;text-align:center;margin:8px 0;}
.cert-name{font-size:30px;font-weight:800;text-align:center;color:#1a1a2e;margin:12px 0;letter-spacing:-.02em;}
.cert-module{font-size:15px;font-weight:700;text-align:center;color:#5b8ef7;margin:8px 0 24px;}
.cert-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:20px 0;}
.cert-stat{text-align:center;background:rgba(91,142,247,.08);border-radius:10px;padding:14px 8px;}
.cert-stat-val{font-size:20px;font-weight:800;color:#5b8ef7;}
.cert-stat-lbl{font-size:11px;color:#667;margin-top:3px;}
.cert-badges-row{text-align:center;font-size:22px;margin:14px 0;letter-spacing:3px;}
.cert-chapitres{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-top:16px;}
.cert-ch{font-size:12px;padding:5px 10px;border-radius:6px;}
.cert-ch-ok{background:#efffef;color:#1a7a3a;font-weight:600;}
.cert-ch-ko{background:#f5f5f5;color:#aaa;}
.cert-footer{border-top:1px solid #dee2f0;padding:20px 40px;display:flex;justify-content:space-between;align-items:flex-end;background:#fafbff;}
.cert-date{font-size:13px;color:#667;}
.cert-sign{font-size:13px;color:#667;text-align:right;line-height:2;}

/* CORRIGES ENSEIGNANT */
.corr-ch{background:var(--s1);border:1px solid var(--b1);border-radius:12px;margin-bottom:12px;overflow:hidden;}
.corr-ch-hdr{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;cursor:pointer;font-weight:700;font-size:14px;color:var(--text);transition:background .15s;}
.corr-ch-hdr:hover{background:var(--s2);}
.corr-ch-body{padding:0 16px 16px;}
.corr-section{margin-top:16px;}
.corr-stitle{font-size:13px;font-weight:700;margin-bottom:10px;color:var(--text);}
.corr-na{font-size:12px;color:var(--muted);font-style:italic;}
.corr-row{background:var(--s2);border-radius:8px;padding:10px 14px;margin-bottom:8px;}
.corr-q{font-size:13px;color:var(--text);margin-bottom:6px;}
.corr-q b{color:var(--muted);margin-right:6px;}
.corr-opts{display:flex;flex-wrap:wrap;gap:6px;}
.corr-opt{font-size:12px;padding:4px 10px;border-radius:6px;background:var(--s1);border:1px solid var(--b1);color:var(--muted);}
.corr-ok{background:#3ecf8e22;border-color:#3ecf8e;color:#3ecf8e;font-weight:700;}

/* QCM PDF LISTE */
.qcm-pdf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;padding:12px 0;}
.qcm-pdf-card{background:var(--s1);border:1px solid var(--b1);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;}
.qcm-pdf-card-top{padding:12px 14px;flex:1;}
.qcm-pdf-tag{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:4px;margin-bottom:8px;}
.qcm-pdf-title{font-size:12px;font-weight:700;color:var(--text);line-height:1.3;margin-bottom:4px;}
.qcm-pdf-sub{font-size:10px;color:var(--muted);margin-bottom:6px;}
.qcm-pdf-meta{font-size:10px;color:var(--muted);font-style:italic;}
.qcm-pdf-actions{padding:10px 14px;border-top:1px solid var(--b1);}

/* ── GENERATEUR QCM PDF ─────────────────────── */
.qcm-sel-card{
  background:var(--s1);border:1px solid var(--b1);
  border-radius:14px;padding:20px 22px;margin-bottom:24px;
}
.qcm-sel-header{
  display:flex;gap:14px;align-items:flex-start;margin-bottom:18px;
}
.qcm-sel-title{
  font-size:15px;font-weight:800;color:var(--text);margin-bottom:4px;
}
.qcm-sel-sub{font-size:12px;color:var(--muted);line-height:1.5;}
.qcm-sel-row{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;
}
.qcm-sel-group{display:flex;flex-direction:column;gap:6px;}
.qcm-sel-label{
  font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:.04em;
}
.qcm-sel-select{
  background:var(--s2);border:1px solid var(--b1);border-radius:8px;
  color:var(--text);padding:9px 12px;font-size:13px;cursor:pointer;
  font-family:'Outfit',sans-serif;
}
.qcm-sel-select:disabled{opacity:.45;cursor:not-allowed;}
.qcm-sel-select:focus{outline:none;border-color:#5b8ef7;}
.qcm-sel-input{
  background:var(--s2);border:1px solid var(--b1);border-radius:8px;
  color:var(--text);padding:9px 12px;font-size:13px;
  font-family:'Outfit',sans-serif;
}
.qcm-sel-input:focus{outline:none;border-color:#5b8ef7;}
.qcm-sel-preview{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--s2);border:1px solid var(--b1);border-radius:10px;
  padding:12px 16px;margin-top:4px;gap:14px;flex-wrap:wrap;
}
.qcm-sel-btn{
  background:#3ecf8e;color:#000;border:none;border-radius:8px;
  padding:10px 20px;font-size:13px;font-weight:800;cursor:pointer;
  white-space:nowrap;transition:opacity .15s;font-family:'Outfit',sans-serif;
}
.qcm-sel-btn:hover{opacity:.85;}
.t-section-label{
  font-size:11px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em;
}

/* ── PAGE MATÉRIAUX ─────────────────────────── */
.mat-page{padding:0 0 40px;}
.mat-filters{
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;
}
.mat-filter-btn{
  background:var(--s2);border:1px solid var(--b1);color:var(--muted);
  border-radius:8px;padding:7px 14px;font-size:12px;font-weight:700;
  cursor:pointer;font-family:'Outfit',sans-serif;transition:all .15s;
}
.mat-filter-btn:hover{border-color:var(--fc,#5b8ef7);color:var(--fc,#5b8ef7);}
.mat-filter-btn.active{background:var(--fc,#5b8ef7)22;border-color:var(--fc,#5b8ef7);color:var(--fc,#5b8ef7);}

.mat-family{margin-bottom:32px;}
.mat-family-header{
  padding:10px 16px;margin-bottom:14px;
  background:var(--s2);border-radius:0 8px 8px 0;
  display:flex;flex-direction:column;gap:4px;
}
.mat-family-icon{font-size:18px;margin-right:8px;}
.mat-family-name{font-size:15px;font-weight:800;}
.mat-family-desc{font-size:12px;color:var(--muted);margin-top:2px;}

.mat-cards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:12px;
}
.mat-card{
  background:var(--s1);border:1px solid var(--b1);
  border-top:3px solid var(--mc,#5b8ef7);
  border-radius:10px;padding:14px;cursor:pointer;
  transition:transform .15s,box-shadow .15s;
  display:flex;flex-direction:column;gap:8px;
}
.mat-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.15);}
.mat-card-top{display:flex;justify-content:space-between;align-items:center;}
.mat-card-badge{
  font-size:14px;font-weight:900;padding:3px 10px;border-radius:6px;
}
.mat-card-diff{font-size:11px;}
.mat-card-full{font-size:11px;color:var(--muted);line-height:1.3;}
.mat-card-formula{
  font-family:monospace;font-size:13px;font-weight:700;
  color:var(--mc,#5b8ef7);
}
.mat-card-stats{
  display:flex;gap:8px;
}
.mat-stat{
  flex:1;background:var(--s2);border-radius:6px;
  padding:6px 4px;text-align:center;
}
.mat-stat-v{display:block;font-size:12px;font-weight:800;color:var(--text);}
.mat-stat-l{display:block;font-size:9px;color:var(--muted);text-transform:uppercase;}
.mat-card-tags{
  display:flex;flex-wrap:wrap;gap:4px;
}
.mat-tag{
  font-size:10px;background:var(--s3);color:var(--muted);
  border-radius:4px;padding:2px 7px;
}
.mat-card-more{
  font-size:11px;color:var(--mc,#5b8ef7);font-weight:700;
  margin-top:auto;text-align:right;
}