/* ============================================================================
   MesCours ENA — feuille de style
   ========================================================================== */
:root{
  --accent:#2563eb;
  --accent-light:#dbeafe;
  --bg:#f4f6fb;
  --bg-panel:#ffffff;
  --bg-elevated:#ffffff;
  --text:#1a2233;
  --text-soft:#5b6478;
  --text-faint:#8a93a6;
  --border:#e4e8f1;
  --border-soft:#eef1f7;
  --success:#16a34a;
  --danger:#dc2626;
  --warning:#d97706;
  --radius:14px;
  --radius-sm:9px;
  --shadow:0 1px 2px rgba(20,24,40,.04), 0 8px 24px -12px rgba(20,24,40,.12);
  --shadow-lg:0 12px 40px -16px rgba(20,24,40,.28);
  --font:'Source Sans Pro','Segoe UI',system-ui,-apple-system,Helvetica,Arial,sans-serif;
  --font-serif:'Source Serif Pro',Georgia,'Times New Roman',serif;
}
[data-theme="dark"]{
  --accent:#60a5fa;
  --accent-light:#1e3a5f;
  --bg:#0f1420;
  --bg-panel:#161d2c;
  --bg-elevated:#1c2436;
  --text:#e7ebf3;
  --text-soft:#a8b1c4;
  --text-faint:#6b7690;
  --border:#262f43;
  --border-soft:#1f2738;
  --shadow:0 1px 2px rgba(0,0,0,.2), 0 8px 24px -12px rgba(0,0,0,.5);
  --shadow-lg:0 20px 50px -16px rgba(0,0,0,.6);
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  font-size:15.5px;
  line-height:1.55;
}
a{color:var(--accent);}
button{font-family:inherit;}

/* ---------- Écran de connexion (comptes utilisateurs) ---------- */
.auth-screen{
  position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
  background:var(--bg); padding:20px;
}
.auth-card{
  width:100%; max-width:380px; background:var(--bg-panel); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:28px 26px;
}
.auth-brand{
  display:flex; align-items:center; gap:10px; font-weight:700; font-size:19px;
}
.auth-brand .dot{
  width:11px;height:11px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),#8b5cf6);
}
.auth-sub{color:var(--text-faint); font-size:12.5px; margin:4px 0 20px;}
.auth-tabs{display:flex; gap:6px; margin-bottom:18px; background:var(--border-soft); padding:4px; border-radius:11px;}
.auth-tab{
  flex:1; border:none; background:transparent; color:var(--text-soft); padding:8px 10px;
  border-radius:8px; font-size:13px; font-weight:700; cursor:pointer;
}
.auth-tab.active{background:var(--bg-panel); color:var(--text); box-shadow:var(--shadow);}
.auth-form{display:flex; flex-direction:column; gap:12px;}
.auth-form label{display:flex; flex-direction:column; gap:5px; font-size:12.5px; color:var(--text-soft); font-weight:600;}
.auth-form .opt{font-weight:400; color:var(--text-faint);}
.auth-form input{
  border:1px solid var(--border); background:var(--bg); color:var(--text);
  padding:9px 12px; border-radius:9px; font-size:14px; outline:none; font-family:var(--font);
}
.auth-form input:focus{border-color:var(--accent);}
.auth-form .btn{margin-top:4px;}
.auth-error{color:var(--danger); font-size:12.5px; min-height:1em;}
.auth-note{margin-top:18px; padding-top:16px; border-top:1px solid var(--border-soft); color:var(--text-faint); font-size:11.5px; line-height:1.6;}
.auth-offline p{margin:0 0 10px; color:var(--text-soft); font-size:13.5px; line-height:1.6;}
.auth-offline .btn{margin-top:6px;}

/* ---------- Badge utilisateur connecté (sidebar) ---------- */
.sidebar-user{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 18px; border-bottom:1px solid var(--border-soft); background:var(--accent-light);
}
.sidebar-user .who{font-size:12.5px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* ---------- Layout ---------- */
#app{display:flex; height:100vh; overflow:hidden;}

.sidebar{
  width:300px; flex:none;
  background:var(--bg-panel);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  overflow:hidden;
}
.sidebar-header{
  padding:20px 18px 14px;
  border-bottom:1px solid var(--border-soft);
}
.sidebar-header .brand{
  display:flex; align-items:center; gap:10px;
  font-weight:700; font-size:17px; letter-spacing:.2px;
}
.sidebar-header .brand .dot{
  width:10px;height:10px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),#8b5cf6);
}
.sidebar-header .subtitle{color:var(--text-faint); font-size:12.5px; margin-top:4px;}
.sidebar-search{
  margin:12px 18px 6px;
}
.sidebar-search input{
  width:100%; padding:9px 12px; border-radius:10px;
  border:1px solid var(--border); background:var(--bg);
  color:var(--text); font-size:13.5px; outline:none;
}
.sidebar-search input:focus{border-color:var(--accent);}
.course-list{
  flex:1; overflow-y:auto; padding:8px 12px 16px;
}
.course-item{
  display:flex; align-items:center; gap:10px;
  padding:10px 10px; border-radius:11px; cursor:pointer;
  margin-bottom:4px; border:1px solid transparent;
  transition:background .12s, border-color .12s;
}
.course-item:hover{background:var(--border-soft);}
.course-item.active{background:var(--accent-light); border-color:var(--accent);}
.course-item .icon{
  width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-size:16px; flex:none;
  background:var(--bg-elevated); border:1px solid var(--border-soft);
}
.course-item .meta{min-width:0; flex:1;}
.course-item .name{font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.course-item .progress-wrap{height:4px; background:var(--border-soft); border-radius:4px; margin-top:6px; overflow:hidden;}
.course-item .progress-bar{height:100%; background:var(--accent); border-radius:4px;}
.course-item.soon{opacity:.5; cursor:default;}
.course-item.soon .name{font-style:italic;}
.badge-soon{font-size:10px; background:var(--border-soft); color:var(--text-faint); padding:2px 6px; border-radius:6px; flex:none;}

.add-course-hint{
  margin:6px 6px 0; padding:10px 12px; border-radius:10px;
  border:1px dashed var(--border); color:var(--text-faint); font-size:12px; line-height:1.5;
}

.sidebar-footer{
  padding:12px 18px; border-top:1px solid var(--border-soft);
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.icon-btn{
  border:1px solid var(--border); background:var(--bg); color:var(--text-soft);
  width:32px;height:32px;border-radius:9px; display:flex;align-items:center;justify-content:center;
  cursor:pointer; font-size:14px;
}
.icon-btn:hover{background:var(--border-soft); color:var(--text);}

/* ---------- Main ---------- */
.main{flex:1; display:flex; flex-direction:column; min-width:0;}
.topbar{
  height:60px; flex:none; display:flex; align-items:center; gap:14px;
  padding:0 24px; border-bottom:1px solid var(--border); background:var(--bg-panel);
}
.topbar h1{font-size:16px; margin:0; font-weight:700;}
.topbar .path{color:var(--text-faint); font-size:12.5px;}
.tabs{display:flex; gap:4px; margin-left:auto;}
.tab-btn{
  border:1px solid var(--border); background:var(--bg); color:var(--text-soft);
  padding:7px 14px; border-radius:9px; font-size:13px; font-weight:600; cursor:pointer;
}
.tab-btn.active{background:var(--accent); border-color:var(--accent); color:#fff;}

.content{flex:1; overflow-y:auto; padding:26px 0 80px;}
.content-inner{max-width:900px; margin:0 auto; padding:0 28px;}

.welcome{max-width:640px; margin:60px auto; text-align:center; color:var(--text-soft);}
.welcome h2{color:var(--text); font-size:22px;}

/* ---------- Course TOC (within reading view) ---------- */
.course-hero{
  background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:22px 24px; margin-bottom:22px; box-shadow:var(--shadow);
}
.course-hero .k{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--accent); font-weight:700;}
.course-hero h2{margin:6px 0 4px; font-size:22px;}
.course-hero .prof{color:var(--text-soft); font-size:13.5px;}
.course-hero .intro{margin-top:12px; color:var(--text-soft); font-size:14px; line-height:1.6;}

.toc-grid{display:grid; grid-template-columns:1fr; gap:10px; margin-top:18px;}
.toc-part{border:1px solid var(--border); border-radius:12px; overflow:hidden;}
.toc-part-head{padding:12px 16px; font-weight:700; font-size:13.5px; background:var(--border-soft);}
.toc-sections{padding:6px;}
.toc-section-row{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px; cursor:pointer;
}
.toc-section-row:hover{background:var(--border-soft);}
.toc-section-row .num{color:var(--text-faint); font-size:11.5px; width:44px; flex:none;}
.toc-section-row .t{flex:1; font-size:13.5px;}
.toc-section-row .check{color:var(--success); font-size:14px; flex:none;}
.toc-section-row .stars{color:var(--warning); font-size:11px; flex:none;}

/* ---------- Reading view ---------- */
.reader-nav{
  display:flex; align-items:center; gap:8px; margin-bottom:18px; flex-wrap:wrap;
}
.reader-nav button{
  border:1px solid var(--border); background:var(--bg-panel); color:var(--text-soft);
  padding:6px 12px; border-radius:8px; font-size:12.5px; cursor:pointer;
}
.reader-nav button:hover{color:var(--text);}
.reader-nav .crumb{color:var(--text-faint); font-size:12.5px;}

.section-card{
  background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:24px 26px; margin-bottom:20px; box-shadow:var(--shadow);
}
.section-card h3{margin:0 0 2px; font-size:19px;}
.section-card .slides-ref{color:var(--text-faint); font-size:12px; margin-bottom:16px;}

.verbatim{font-family:var(--font-serif); font-size:15.5px; line-height:1.75;}
.verbatim .v-h{font-family:var(--font); font-weight:700; font-size:14.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--accent); margin:16px 0 8px;}
.verbatim .v-h:first-child{margin-top:0;}
.verbatim .v-p{margin:0 0 12px;}
.verbatim ul{margin:6px 0 14px; padding-left:22px;}
.verbatim li{margin:5px 0;}
.verbatim .v-l2{list-style:'– '; padding-left:20px;}
.verbatim .v-l3{list-style:'» '; padding-left:20px; color:var(--text-soft);}
.verbatim table{width:100%; border-collapse:collapse; margin:10px 0 16px; font-family:var(--font); font-size:13px;}
.verbatim table td, .verbatim table th{border:1px solid var(--border); padding:7px 10px; text-align:left; vertical-align:top;}
.verbatim table tr:first-child td{background:var(--border-soft); font-weight:700;}
.verbatim .v-source{display:block; font-family:var(--font); font-size:11.5px; color:var(--text-faint); margin:-8px 0 14px; word-break:break-all;}

.term{
  border-bottom:1.5px dotted var(--accent); cursor:help; color:inherit; position:relative;
}
[data-theme="dark"] .term{border-bottom-color:var(--accent);}

.commentary-box{
  margin-top:16px; padding:16px 18px; border-radius:12px;
  background:linear-gradient(135deg, var(--accent-light), transparent 120%);
  border:1px solid var(--border);
  border-left:3px solid var(--accent);
}
.commentary-box .cb-label{
  font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  color:var(--accent); margin-bottom:8px; display:flex; align-items:center; gap:6px;
}
.commentary-box p{margin:0 0 10px; font-size:14px; color:var(--text);}
.commentary-box p:last-child{margin-bottom:0;}

.section-tools{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:18px; padding-top:16px; border-top:1px solid var(--border-soft); flex-wrap:wrap;
}
.rating-stars{display:flex; gap:3px; font-size:17px; cursor:pointer;}
.rating-stars .star{color:var(--border); transition:color .1s;}
.rating-stars .star.filled{color:var(--warning);}
.mark-read{
  display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text-soft); cursor:pointer; user-select:none;
}
.notes-toggle{
  border:1px solid var(--border); background:var(--bg); color:var(--text-soft);
  padding:6px 12px; border-radius:8px; font-size:12px; cursor:pointer;
}
.notes-area{margin-top:12px; display:none;}
.notes-area.open{display:block;}
.notes-area textarea{
  width:100%; min-height:80px; border-radius:9px; border:1px solid var(--border);
  background:var(--bg); color:var(--text); padding:10px 12px; font-size:13.5px; font-family:var(--font); resize:vertical;
}

/* ---------- Tooltip popover ---------- */
.tooltip-pop{
  position:fixed; max-width:320px; background:var(--bg-elevated); color:var(--text);
  border:1px solid var(--border); border-radius:10px; padding:12px 14px; font-size:13px;
  box-shadow:var(--shadow-lg); z-index:999; line-height:1.5; font-family:var(--font);
}
.tooltip-pop .tt-term{font-weight:800; color:var(--accent); text-transform:capitalize; margin-bottom:4px; display:block;}

/* ---------- Annotations utilisateur (sélection de texte) ---------- */
mark.user-annot{
  background:rgba(217,119,6,.22); color:inherit; border-bottom:2px solid var(--warning);
  cursor:pointer; border-radius:2px; padding:0 1px;
}
[data-theme="dark"] mark.user-annot{ background:rgba(251,191,36,.22); }

.select-comment-btn{
  position:fixed; z-index:500; border:none; background:var(--text); color:var(--bg);
  padding:7px 13px; border-radius:20px; font-size:12.5px; font-weight:700; cursor:pointer;
  box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:5px;
}

.annot-editor, .annot-pop{
  position:fixed; z-index:500; width:300px; max-width:88vw;
  background:var(--bg-elevated); border:1px solid var(--border); border-radius:12px;
  padding:14px; box-shadow:var(--shadow-lg); font-size:13px;
}
.annot-editor-quote, .annot-pop .annot-quote{
  font-style:italic; color:var(--text-soft); font-size:12.5px; margin-bottom:8px;
  border-left:2px solid var(--warning); padding-left:8px; max-height:80px; overflow:auto;
}
.annot-pop .annot-author, .annot-item-author{
  font-size:11.5px; color:var(--text-faint); margin-bottom:6px;
}
.annot-pop .annot-date{color:var(--text-faint);}
.annot-editor textarea{
  width:100%; min-height:70px; border-radius:8px; border:1px solid var(--border);
  background:var(--bg); color:var(--text); padding:8px 10px; font-family:var(--font); font-size:13px; resize:vertical;
}
.annot-editor-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:10px;}
.annot-pop .annot-comment{margin-bottom:10px; line-height:1.5;}
.annot-pop .annot-del{
  border:1px solid var(--border); background:var(--bg); color:var(--danger);
  padding:5px 10px; border-radius:8px; font-size:12px; cursor:pointer;
}
.annot-item{ border:1px solid var(--border-soft); border-radius:10px; padding:10px 12px; margin-bottom:8px; }
.annot-item-quote{ font-style:italic; color:var(--text-soft); font-size:12.5px; border-left:2px solid var(--warning); padding-left:8px; margin-bottom:6px; }
.annot-item-comment{ font-size:13.5px; margin-bottom:8px; }
.annot-item-del{
  border:1px solid var(--border); background:var(--bg); color:var(--danger);
  padding:4px 9px; border-radius:7px; font-size:11.5px; cursor:pointer;
}

/* ---------- QCM ---------- */
.qcm-progress{display:flex; align-items:center; gap:12px; margin-bottom:18px;}
.qcm-progress .bar{flex:1; height:8px; background:var(--border-soft); border-radius:8px; overflow:hidden;}
.qcm-progress .bar-fill{height:100%; background:var(--accent);}
.qcm-progress .score{font-size:13px; font-weight:700; color:var(--text-soft); white-space:nowrap;}
.qcm-progress #btnResetQcm{padding:6px 12px; font-size:12px; white-space:nowrap;}

.qcm-card{background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius); padding:22px 24px; box-shadow:var(--shadow);}
.qcm-q{font-size:16px; font-weight:700; margin-bottom:16px;}
.qcm-options{display:flex; flex-direction:column; gap:9px;}
.qcm-opt{
  text-align:left; border:1px solid var(--border); background:var(--bg); color:var(--text);
  padding:11px 14px; border-radius:10px; cursor:pointer; font-size:14px; display:flex; gap:10px; align-items:flex-start;
}
.qcm-opt:hover{border-color:var(--accent);}
.qcm-opt .letter{font-weight:800; color:var(--text-faint); flex:none;}
.qcm-opt.correct{border-color:var(--success); background:rgba(22,163,74,.08);}
.qcm-opt.wrong{border-color:var(--danger); background:rgba(220,38,38,.08);}
.qcm-opt[disabled]{cursor:default;}
.qcm-explain{margin-top:16px; padding:14px 16px; border-radius:10px; background:var(--border-soft); font-size:13.5px; display:none;}
.qcm-explain.show{display:block;}
.qcm-nav{display:flex; justify-content:space-between; margin-top:20px;}
.btn{
  border:none; background:var(--accent); color:#fff; padding:9px 18px; border-radius:9px;
  font-weight:700; font-size:13.5px; cursor:pointer;
}
.btn:disabled{opacity:.4; cursor:default;}
.btn.ghost{background:var(--bg); color:var(--text-soft); border:1px solid var(--border);}
.qcm-result{text-align:center; padding:40px 20px;}
.qcm-result .big-score{font-size:44px; font-weight:800; color:var(--accent);}

/* ---------- Open questions ---------- */
.oq-card{background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius); padding:22px 24px; margin-bottom:18px; box-shadow:var(--shadow);}
.oq-q{font-weight:700; font-size:15px; margin-bottom:12px;}
.oq-card textarea{
  width:100%; min-height:110px; border-radius:9px; border:1px solid var(--border);
  background:var(--bg); color:var(--text); padding:11px 13px; font-size:14px; font-family:var(--font); resize:vertical;
}
.oq-actions{display:flex; gap:10px; margin-top:10px; align-items:center;}
.oq-feedback{margin-top:14px; padding:14px 16px; border-radius:10px; background:var(--accent-light); font-size:13.5px; display:none; white-space:pre-wrap;}
.oq-feedback.show{display:block;}
.spinner{
  width:14px;height:14px;border-radius:50%; border:2px solid rgba(255,255,255,.4); border-top-color:#fff;
  animation:spin .7s linear infinite; display:inline-block;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- AI Chat ---------- */
.chat-fab{
  position:fixed; right:26px; bottom:26px; width:54px; height:54px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent),#8b5cf6); color:#fff; border:none; cursor:pointer;
  font-size:22px; box-shadow:var(--shadow-lg); z-index:200; display:flex; align-items:center; justify-content:center;
}
.chat-panel{
  position:fixed; right:26px; bottom:96px; width:380px; max-width:90vw; height:520px; max-height:70vh;
  background:var(--bg-panel); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow-lg);
  display:none; flex-direction:column; overflow:hidden; z-index:200;
}
.chat-panel.open{display:flex;}
.chat-head{padding:14px 16px; border-bottom:1px solid var(--border-soft); display:flex; align-items:center; justify-content:space-between;}
.chat-head .t{font-weight:700; font-size:14px;}
.chat-head .sub{font-size:11.5px; color:var(--text-faint);}
.chat-msgs{flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:10px;}
.msg{max-width:85%; padding:9px 12px; border-radius:12px; font-size:13.5px; line-height:1.5; white-space:pre-wrap;}
.msg.user{align-self:flex-end; background:var(--accent); color:#fff; border-bottom-right-radius:3px;}
.msg.ai{align-self:flex-start; background:var(--border-soft); color:var(--text); border-bottom-left-radius:3px;}
.msg.system-note{align-self:center; background:none; color:var(--text-faint); font-size:11.5px; text-align:center;}
.chat-input{display:flex; gap:8px; padding:12px; border-top:1px solid var(--border-soft);}
.chat-input textarea{
  flex:1; resize:none; border:1px solid var(--border); border-radius:10px; padding:8px 11px;
  background:var(--bg); color:var(--text); font-family:var(--font); font-size:13.5px; max-height:80px;
}
.chat-input button{
  border:none; background:var(--accent); color:#fff; width:38px; border-radius:10px; cursor:pointer; font-size:16px;
}
.ai-offline-banner{
  background:#fef3c7; color:#92400e; font-size:11.5px; padding:8px 12px; text-align:center;
}
[data-theme="dark"] .ai-offline-banner{background:#3a2e0f; color:#fbbf24;}

/* ---------- misc ---------- */
::-webkit-scrollbar{width:9px; height:9px;}
::-webkit-scrollbar-thumb{background:var(--border); border-radius:8px;}
::-webkit-scrollbar-track{background:transparent;}

@media (max-width: 860px){
  .sidebar{position:fixed; z-index:300; height:100%; transform:translateX(-100%); transition:transform .2s;}
  .sidebar.open{transform:translateX(0);}
  .chat-panel{right:12px; left:12px; width:auto;}
}