@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --or: #E67E22; --or-d: #D35400; --or-bg: rgba(230,126,34,.1);
  --bl: #1B4F72; --bl2: #2E86C1; --bl-bg: rgba(27,79,114,.08);
  --green: #27AE60; --red: #E74C3C;
  --sb-bg: #0d1b2a; --sb-w: 230px;
  --bg: #F4F6F9; --card: #fff;
  --txt: #1C2833; --txt2: #5D6D7E; --txt3: #95A5A6;
  --brd: #E5E8EC; --brd2: #D0D3D8;
  --h: 56px;
  --r: 10px; --r-sm: 6px;
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.04);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;color:var(--txt);background:var(--bg)}

/* ── LAYOUT ── */
.layout{display:flex;height:100vh;overflow:hidden}
.sidebar{width:var(--sb-w);min-width:var(--sb-w);background:var(--sb-bg);display:flex;flex-direction:column;overflow-y:auto}
.main-col{flex:1;display:flex;flex-direction:column;overflow:hidden}
.topbar{height:var(--h);min-height:var(--h);background:var(--card);border-bottom:1px solid var(--brd);display:flex;align-items:center;padding:0 24px;gap:12px}
.content-area{flex:1;overflow-y:auto;padding:28px 28px}

/* ── SIDEBAR ── */
.sb-brand{display:flex;align-items:center;gap:10px;padding:18px 16px 12px;border-bottom:1px solid rgba(255,255,255,.07)}
.sb-logo{width:36px;height:36px;background:var(--or);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:16px;color:#fff;flex-shrink:0}
.sb-name{font-size:16px;font-weight:800;color:#fff;letter-spacing:-.4px}
.sb-name b{color:var(--or)}
.sb-sect{font-size:10px;font-weight:700;color:rgba(255,255,255,.28);text-transform:uppercase;letter-spacing:1.8px;padding:16px 16px 4px}
.sb-link{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 16px;color:rgba(255,255,255,.55);font-size:13px;font-weight:500;cursor:pointer;border-left:3px solid transparent;transition:all .15s;text-decoration:none}
.sb-link:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.85)}
.sb-link.active{color:var(--or);background:rgba(230,126,34,.12);border-left-color:var(--or);font-weight:700}
.sb-link svg{width:15px;height:15px;flex-shrink:0;opacity:.7}
.sb-link.active svg{opacity:1}
.sb-badge{margin-left:auto;background:rgba(230,126,34,.22);color:var(--or);font-size:10px;font-weight:700;padding:1px 7px;border-radius:20px}
.sb-user{margin-top:auto;border-top:1px solid rgba(255,255,255,.07);padding:12px 16px;display:flex;align-items:center;gap:10px}
.sb-user-av{width:32px;height:32px;border-radius:50%;background:var(--bl2);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;color:#fff;flex-shrink:0}
.sb-user-name{font-size:12px;color:rgba(255,255,255,.65);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-user-role{font-size:10px;color:rgba(255,255,255,.35)}
.sb-logout{color:rgba(255,255,255,.35);font-size:11px;text-decoration:none;padding:3px 6px;border-radius:4px;transition:color .15s}
.sb-logout:hover{color:var(--or)}

/* ── TOPBAR ── */
.tb-title{font-size:15px;font-weight:700;color:var(--txt);flex:1}
.tb-crumb{font-size:12px;color:var(--txt3)}
.tb-crumb a{color:var(--bl2);text-decoration:none}
.tb-actions{display:flex;align-items:center;gap:8px}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--r-sm);font-family:inherit;font-size:13px;font-weight:600;border:none;cursor:pointer;transition:all .15s;text-decoration:none}
.btn-primary{background:var(--or);color:#fff}.btn-primary:hover{background:var(--or-d)}
.btn-blue{background:var(--bl);color:#fff}.btn-blue:hover{background:#16436A}
.btn-ghost{background:transparent;color:var(--txt2);border:1px solid var(--brd2)}.btn-ghost:hover{background:var(--bg);border-color:var(--brd2)}
.btn-danger{background:var(--red);color:#fff}
.btn-sm{padding:5px 12px;font-size:12px}
.btn-xs{padding:3px 8px;font-size:11px}

/* ── CARDS ── */
.card{background:var(--card);border-radius:var(--r);border:1px solid var(--brd);box-shadow:var(--shadow)}
.card-hdr{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--brd)}
.card-hdr h3{font-size:14px;font-weight:700;flex:1}
.card-body{padding:20px}
.card-footer{padding:12px 20px;border-top:1px solid var(--brd);display:flex;gap:8px;justify-content:flex-end;background:var(--bg);border-radius:0 0 var(--r) var(--r)}

/* ── STATS ── */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:24px}
.stat-box{background:var(--card);border-radius:var(--r);border:1px solid var(--brd);padding:16px 20px;box-shadow:var(--shadow)}
.stat-lbl{font-size:11px;font-weight:600;color:var(--txt2);text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px}
.stat-val{font-size:26px;font-weight:800;color:var(--txt);line-height:1}
.stat-val.or{color:var(--or)}.stat-val.bl{color:var(--bl2)}.stat-val.gr{color:var(--green)}
.stat-sub{font-size:11px;color:var(--txt3);margin-top:4px}

/* ── FORMS ── */
.form-grid{display:grid;gap:16px}
.form-grid.cols2{grid-template-columns:1fr 1fr}
.form-grid.cols3{grid-template-columns:1fr 1fr 1fr}
.field{display:flex;flex-direction:column;gap:5px}
.field label,.field-label{font-size:12px;font-weight:700;color:var(--txt2);text-transform:uppercase;letter-spacing:.5px}
.field input,.field select,.field textarea{background:var(--bg);border:1px solid var(--brd2);border-radius:var(--r-sm);color:var(--txt);padding:9px 12px;font-size:13px;font-family:inherit;transition:border-color .15s;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--or);background:#fff}
.field textarea{resize:vertical;min-height:72px;line-height:1.5}
.field-hint{font-size:11px;color:var(--txt3);margin-top:2px}
.field-error{font-size:11px;color:var(--red);margin-top:2px}

/* ── TABLE ── */
.tbl-wrap{overflow-x:auto;border-radius:var(--r);border:1px solid var(--brd)}
table.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl thead tr{background:var(--bg)}
.tbl th{padding:10px 14px;font-size:11px;font-weight:700;color:var(--txt2);text-transform:uppercase;letter-spacing:.4px;text-align:left;border-bottom:1px solid var(--brd);white-space:nowrap}
.tbl td{padding:10px 14px;border-bottom:1px solid var(--brd);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr:hover td{background:rgba(230,126,34,.03)}

/* ── BADGES ── */
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:700}
.badge-tbm{background:rgba(39,174,96,.12);color:#1A8A4A}
.badge-ms{background:rgba(46,134,193,.12);color:var(--bl2)}
.badge-mf{background:rgba(230,126,34,.12);color:var(--or)}
.badge-mi{background:rgba(231,76,60,.12);color:var(--red)}
.badge-d{background:var(--bg);color:var(--txt3)}
.badge-orange{background:var(--or-bg);color:var(--or)}
.badge-blue{background:var(--bl-bg);color:var(--bl2)}
.badge-green{background:rgba(39,174,96,.1);color:var(--green)}

/* ── PROGRESS ── */
.prog-wrap{background:var(--brd);border-radius:4px;height:7px;overflow:hidden}
.prog-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--green),var(--bl2));transition:width .4s}
.prog-fill.orange{background:linear-gradient(90deg,var(--or),#C0392B)}

/* ── GRADE SELECT ── */
.grade-sel{border:1px solid var(--brd2);border-radius:4px;padding:3px 6px;font-size:12px;font-family:'JetBrains Mono',monospace;background:var(--bg);cursor:pointer;transition:border-color .15s}
.grade-sel:focus{outline:none;border-color:var(--or)}
.gr-tbm{color:#1A8A4A;font-weight:700}.gr-ms{color:var(--bl2);font-weight:700}
.gr-mf{color:var(--or);font-weight:700}.gr-mi{color:var(--red);font-weight:700}
.gr-d{color:var(--txt3)}

/* ── CODE CHIP ── */
.code-chip{font-family:'JetBrains Mono',monospace;font-size:11px;background:var(--bl-bg);color:var(--bl2);padding:2px 7px;border-radius:4px;white-space:nowrap}

/* ── PILIER CARDS ── */
.pilier-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.pilier-card{background:var(--card);border-radius:var(--r);border:1px solid var(--brd);padding:14px;transition:border-color .2s}
.pilier-card:hover{border-color:var(--bl2)}
.pilier-card.active{border-color:var(--or);background:rgba(230,126,34,.03)}
.pilier-roman{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;background:var(--bl);color:#fff;border-radius:5px;font-size:11px;font-weight:900;margin-bottom:8px}
.pilier-pct{font-size:20px;font-weight:800;color:var(--txt)}
.pilier-nom{font-size:11px;font-weight:700;color:var(--txt2);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}

/* ── TABS ── */
/* ── Shadcn-style pill tabs ─────────────────────────────────────────── */
.tabs{
  display:inline-flex;gap:2px;
  background:var(--bg2);
  border:1px solid var(--brd);
  border-radius:8px;
  padding:3px;
  margin-bottom:20px;
}
.tab{
  padding:6px 14px;
  font-size:12px;
  font-weight:500;
  color:var(--txt2);
  cursor:pointer;
  border-radius:6px;
  border:none;
  background:transparent;
  transition:all .18s ease;
  text-decoration:none;
  white-space:nowrap;
  line-height:1.5;
}
.tab:hover{color:var(--txt);background:rgba(0,0,0,.04)}
.tab.active{
  background:var(--card);
  color:var(--txt);
  font-weight:600;
  box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.06);
}

/* ── MISC ── */
.avatar{width:36px;height:36px;border-radius:50%;background:var(--bl2);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0}
.page-hdr{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:24px;gap:12px}
.page-hdr h2{font-size:22px;font-weight:800;letter-spacing:-.5px}
.page-hdr p{font-size:13px;color:var(--txt2);margin-top:3px}
.empty-state{text-align:center;padding:60px 20px;color:var(--txt2)}
.empty-state .ico{font-size:40px;margin-bottom:12px;opacity:.4}
.sep{height:1px;background:var(--brd);margin:20px 0}
.mono{font-family:'JetBrains Mono',monospace;font-size:12px}
.alert-info{background:rgba(46,134,193,.08);border:1px solid rgba(46,134,193,.2);border-radius:var(--r-sm);padding:10px 14px;font-size:12px;color:var(--bl2)}
.alert-success{background:rgba(39,174,96,.08);border:1px solid rgba(39,174,96,.2);border-radius:var(--r-sm);padding:10px 14px;font-size:12px;color:var(--green)}
.fm-tag{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;border:1.5px solid;transition:all .15s}
.fm-tag-off{background:var(--bg);color:var(--txt2);border-color:var(--brd2)}
.fm-tag-on-c{background:rgba(230,126,34,.1);color:var(--or);border-color:var(--or)}
.fm-tag-on-i{background:var(--bl-bg);color:var(--bl2);border-color:var(--bl2)}
/* Login */
.login-bg{min-height:100vh;background:#0d1b2a;display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{background:#fff;border-radius:16px;padding:40px;width:100%;max-width:380px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.login-logo{display:flex;align-items:center;gap:12px;margin-bottom:32px;justify-content:center}
.login-circle{width:48px;height:48px;background:var(--or);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:20px;color:#fff}
.login-title{font-size:24px;font-weight:900;color:#0d1b2a}
.login-title b{color:var(--or)}
.htmx-indicator{opacity:0;transition:opacity .2s}
.htmx-request .htmx-indicator{opacity:1}

/* ── SKELETON LOADING ── */
@keyframes shimmer {
  0%   { background-position: 200% 0 }
  100% { background-position: -200% 0 }
}
.sk {
  background: linear-gradient(90deg, var(--bg) 25%, var(--brd) 50%, var(--bg) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
}
.sk-line   { height:13px; margin-bottom:8px }
.sk-line.w-60  { width:60% }
.sk-line.w-40  { width:40% }
.sk-line.w-80  { width:80% }
.sk-line.w-100 { width:100% }
.sk-h      { height:24px; margin-bottom:10px }
.sk-card   { background:var(--card);border:1px solid var(--brd);border-radius:var(--r);padding:20px }
.sk-avatar { width:44px;height:44px;border-radius:50% }
.sk-badge  { width:60px;height:20px;border-radius:10px;display:inline-block }

/* ── IDENTITÉ READ-ONLY ── */
.id-field   { padding:10px 0;border-bottom:0.5px solid var(--brd);display:flex;align-items:baseline;gap:8px }
.id-field:last-child { border-bottom:none }
.id-lbl     { font-size:11px;font-weight:700;color:var(--txt2);text-transform:uppercase;letter-spacing:.5px;min-width:130px;flex-shrink:0 }
.id-val     { font-size:14px;color:var(--txt);font-weight:500 }
.id-val.mono { font-family:'JetBrains Mono',monospace;font-size:13px }
.id-val.empty { color:var(--txt3);font-style:italic;font-size:12px }

/* appréciation par enseignant */
.appr-card  { border:1px solid var(--brd);border-radius:8px;padding:12px 14px;margin-bottom:8px }
.appr-card.mine { border-color:rgba(230,126,34,.3);background:rgba(230,126,34,.03) }
.appr-header { display:flex;align-items:center;gap:8px;margin-bottom:6px }
.appr-author { font-size:11px;font-weight:700;color:var(--bl2) }
.appr-domain { font-size:10px;padding:2px 7px;border-radius:10px;background:var(--bl-bg);color:var(--bl2);font-weight:600 }
.appr-content { font-size:13px;line-height:1.6;color:var(--txt) }
.appr-meta  { font-size:10px;color:var(--txt3);margin-top:4px }

/* tab loading overlay */
#tab-content.loading { opacity:.4;pointer-events:none;transition:opacity .2s }

/* ── Wizard FM labels ── */
.fm-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 8px;
  transition: border-color .15s, background .15s;
  border: 1px solid var(--brd);
  background: transparent;
}
.fm-label:hover { border-color: var(--or); }