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

/* ── Variables ─────────────────────────────────────────────────── */
:root {
  --bg:        #0a0c14;
  --bg2:       #111520;
  --bg3:       #181d2e;
  --bg4:       #1e2438;
  --border:    rgba(255,255,255,0.09);
  --border2:   rgba(255,255,255,0.18);
  --text:      #eef0f8;
  --text2:     #a0aabe;
  --text3:     #6b7590;
  --font:      'Plus Jakarta Sans', sans-serif;
  --mono:      'JetBrains Mono', monospace;

  /* CCP colors */
  --bc01:      #6c63ff;
  --bc01-g:    linear-gradient(135deg,#6c63ff,#a855f7);
  --bc01-bg:   rgba(108,99,255,0.12);
  --bc01-glow: rgba(108,99,255,0.35);

  --bc02:      #00d4aa;
  --bc02-g:    linear-gradient(135deg,#00d4aa,#0ea5e9);
  --bc02-bg:   rgba(0,212,170,0.12);
  --bc02-glow: rgba(0,212,170,0.35);

  --bc03:      #ff6b35;
  --bc03-g:    linear-gradient(135deg,#ff6b35,#f59e0b);
  --bc03-bg:   rgba(255,107,53,0.12);
  --bc03-glow: rgba(255,107,53,0.35);

  --certif:    #f59e0b;
  --certif-bg: rgba(245,158,11,0.12);

  --green:     #22d3a5;
  --red:       #ff5252;
  --blue:      #4f8ef7;
  --radius:    14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:var(--font); background:var(--bg); color:var(--text); min-height:100vh; overflow-x:hidden; }
a { text-decoration:none; color:inherit; }
button { cursor:pointer; font-family:inherit; }

/* ── Background data center ─────────────────────────────────────── */
body::before {
  content:'';
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image: url('/bg-datacenter.jpg');
  background-size:cover;
  background-position:70% center;
  background-attachment:fixed;
  filter:brightness(0.30) saturate(0.8);
  transform:scale(1.0);
}
/* Voile sombre pour lisibilité maximale */
body::after {
  content:'';
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(5,8,20,0.55) 0%, rgba(5,8,20,0.70) 100%),
    radial-gradient(ellipse at 15% 50%, rgba(108,99,255,0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 20%, rgba(0,212,170,0.05) 0%, transparent 50%);
}
body { background-image: none; }

/* ── Layout ─────────────────────────────────────────────────────── */
.app { display:flex; min-height:100vh; position:relative; z-index:1; }

/* ── Sidebar ─────────────────────────────────────────────────────── */
.sidebar {
  width:260px; min-height:100vh;
  background:rgba(12,15,25,0.80);
  border-right:1px solid rgba(255,255,255,0.07);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  display:flex; flex-direction:column;
  position:fixed; top:0; left:0; bottom:0; z-index:100;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}

.sidebar-logo {
  padding:24px 20px 20px;
  border-bottom:1px solid var(--border);
}
.logo-badge {
  display:inline-flex; align-items:center; gap:10px;
  font-size:16px; font-weight:800; letter-spacing:-.5px;
}
.logo-icon {
  width:38px; height:38px; border-radius:10px;
  background:var(--bc01-g);
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
  box-shadow:0 0 20px var(--bc01-glow);
}
.logo-sub { font-size:11px; color:var(--text3); margin-top:5px; letter-spacing:.3px; }

.sidebar-user {
  padding:14px 18px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:10px;
}
.user-avatar {
  width:38px; height:38px; border-radius:50%;
  background:var(--bc01-g);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:700; color:#fff;
  box-shadow:0 0 16px var(--bc01-glow);
  flex-shrink:0;
}
.user-name  { font-size:13px; font-weight:600; }
.user-code  { font-size:11px; color:var(--text3); margin-top:1px; font-family:var(--mono); }

.sidebar-nav { padding:14px 10px; flex:1; overflow-y:auto; }
.nav-section { font-size:10px; font-weight:700; letter-spacing:1.2px; color:var(--text3); text-transform:uppercase; padding:12px 10px 6px; }
.nav-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:10px;
  font-size:13px; font-weight:500; color:var(--text2);
  transition:all .15s; cursor:pointer;
  border:none; background:none; width:100%; text-align:left;
  position:relative;
}
.nav-item:hover { background:var(--bg3); color:var(--text); }
.nav-item.active {
  background:var(--bc01-bg);
  color:var(--bc01);
  border:1px solid rgba(108,99,255,0.2);
}
.nav-item.active::before {
  content:'';
  position:absolute; left:-10px; top:50%; transform:translateY(-50%);
  width:3px; height:60%; background:var(--bc01-g); border-radius:2px;
}
.nav-icon  { font-size:17px; width:22px; text-align:center; }
.nav-badge { margin-left:auto; background:var(--bc01); color:#fff; font-size:10px; padding:2px 7px; border-radius:20px; font-weight:700; }

.sidebar-footer { padding:14px 16px; border-top:1px solid var(--border); }
.progress-global { margin-bottom:10px; }
.progress-label { display:flex; justify-content:space-between; font-size:11px; color:var(--text3); margin-bottom:6px; }
.progress-label span:last-child { font-weight:600; color:var(--bc01); }
.progress-bar { height:4px; background:var(--bg4); border-radius:2px; overflow:hidden; }
.progress-fill { height:100%; background:var(--bc01-g); border-radius:2px; transition:width .5s cubic-bezier(.4,0,.2,1); }
.btn-logout { width:100%; padding:9px; border:1px solid var(--border2); border-radius:10px; background:transparent; color:var(--text2); font-size:12px; font-weight:500; transition:all .15s; }
.btn-logout:hover { border-color:var(--red); color:var(--red); }

/* ── Main ────────────────────────────────────────────────────────── */
.main { margin-left:260px; flex:1; min-height:100vh; overflow-x:hidden; }
.page { display:none; padding:32px; max-width:1200px; animation:fadeIn .3s ease; }
.page.active { display:block; }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

.page-header { margin-bottom:30px; }
.page-title  { font-size:28px; font-weight:800; letter-spacing:-.7px; }
.page-sub    { font-size:14px; color:var(--text2); margin-top:5px; }

/* ── Login Screen ────────────────────────────────────────────────── */
.login-screen {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--bg); position:relative; overflow:hidden;
}
.login-bg-anim {
  position:absolute; inset:0; pointer-events:none; overflow:hidden;
}
.login-orb {
  position:absolute; border-radius:50%; filter:blur(80px); animation:orbFloat 6s ease-in-out infinite;
}
.login-orb:nth-child(1) { width:400px;height:400px;background:rgba(108,99,255,0.18);top:-100px;left:-100px;animation-delay:0s; }
.login-orb:nth-child(2) { width:300px;height:300px;background:rgba(0,212,170,0.12);bottom:-80px;right:-80px;animation-delay:-2s; }
.login-orb:nth-child(3) { width:250px;height:250px;background:rgba(255,107,53,0.1);top:50%;right:20%;animation-delay:-4s; }
@keyframes orbFloat { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-20px) scale(1.05)} }

.login-card {
  width:100%; max-width:440px; padding:44px;
  background:rgba(17,21,32,0.9);
  border:1px solid var(--border2);
  border-radius:var(--radius-xl);
  backdrop-filter:blur(24px);
  box-shadow:0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
  position:relative; z-index:1;
}
.login-logo { text-align:center; margin-bottom:32px; }
.login-logo-icon {
  width:70px; height:70px; margin:0 auto 16px;
  background:var(--bc01-g); border-radius:20px;
  display:flex; align-items:center; justify-content:center;
  font-size:34px;
  box-shadow:0 0 40px var(--bc01-glow);
  animation:iconPulse 3s ease-in-out infinite;
}
@keyframes iconPulse { 0%,100%{box-shadow:0 0 40px var(--bc01-glow)} 50%{box-shadow:0 0 60px var(--bc01-glow),0 0 80px rgba(108,99,255,0.2)} }
.login-logo h1  { font-size:24px; font-weight:800; letter-spacing:-.5px; }
.login-logo p   { font-size:13px; color:var(--text2); margin-top:5px; }

.login-form { display:flex; flex-direction:column; gap:16px; }
.form-group label { display:block; font-size:11px; font-weight:700; color:var(--text3); margin-bottom:7px; letter-spacing:.6px; text-transform:uppercase; }
.form-input {
  width:100%; padding:13px 16px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border2);
  border-radius:12px; color:var(--text);
  font-size:14px; transition:all .2s; outline:none;
}
.form-input:focus { border-color:var(--bc01); background:rgba(108,99,255,0.07); box-shadow:0 0 0 3px rgba(108,99,255,0.15); }
.form-input.code-input { text-transform:uppercase; font-family:var(--mono); font-size:20px; letter-spacing:5px; text-align:center; font-weight:700; }
.form-hint { font-size:11px; color:var(--text3); margin-top:5px; }
.prenom-group { display:none; }

.btn-primary {
  width:100%; padding:14px;
  background:var(--bc01-g);
  border:none; border-radius:12px;
  color:#fff; font-size:14px; font-weight:700;
  letter-spacing:.3px; transition:all .2s;
  box-shadow:0 4px 20px var(--bc01-glow);
  position:relative; overflow:hidden;
}
.btn-primary::after { content:''; position:absolute; inset:0; background:linear-gradient(rgba(255,255,255,0.1),transparent); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 30px var(--bc01-glow); }
.btn-primary:active { transform:translateY(0); }

.login-error { background:rgba(255,82,82,0.1); border:1px solid rgba(255,82,82,0.3); border-radius:10px; padding:11px 14px; font-size:13px; color:var(--red); display:none; }

.login-features { margin-top:26px; padding-top:22px; border-top:1px solid var(--border); display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.login-feat { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text2); }
.feat-dot { width:6px; height:6px; border-radius:50%; background:var(--green); flex-shrink:0; box-shadow:0 0 8px var(--green); }

/* ── Dashboard hero ──────────────────────────────────────────────── */
.dash-hero {
  border-radius:var(--radius-xl);
  padding:36px 40px;
  margin-bottom:28px;
  position:relative; overflow:hidden;
  border:1px solid rgba(108,99,255,0.25);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  min-height:180px;
}
/* Image de fond Unsplash — technicien IT, libre d'utilisation */
.dash-hero-bg {
  position:absolute; inset:0;
  background-image: url('https://images.unsplash.com/photo-1639322537228-f710d846310a?w=1200&q=80');
  background-size:cover;
  background-position:center 30%;
  filter:blur(3px) brightness(0.35) saturate(0.7);
  transform:scale(1.05);
  transition:filter .4s;
}
.dash-hero:hover .dash-hero-bg {
  filter:blur(2px) brightness(0.3) saturate(0.6);
}
/* Dégradé par-dessus l'image pour garder le texte lisible */
.dash-hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(
    100deg,
    rgba(10,12,20,0.88) 0%,
    rgba(17,16,48,0.75) 50%,
    rgba(10,12,20,0.4) 100%
  );
}
/* Lueur violette en haut à droite */
.dash-hero::after {
  content:'';
  position:absolute; top:-40px; right:-40px;
  width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(108,99,255,0.25) 0%, transparent 70%);
  pointer-events:none; z-index:1;
}
.dash-hero-text {
  position:relative; z-index:2;
}
.dash-hero-greeting { font-size:13px; color:var(--bc01); font-weight:600; letter-spacing:.5px; text-transform:uppercase; margin-bottom:8px; }
.dash-hero-title { font-size:28px; font-weight:800; letter-spacing:-.6px; margin-bottom:10px; text-shadow:0 2px 12px rgba(0,0,0,.6); }
.dash-hero-sub { font-size:14px; color:rgba(255,255,255,0.75); line-height:1.7; }
.dash-hero-svg { flex-shrink:0; opacity:.95; position:relative; z-index:2; }

/* ── Stats grid ──────────────────────────────────────────────────── */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:28px; }
.stat-card {
  border-radius:var(--radius);
  padding:20px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(10,13,25,0.45);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  position:relative; overflow:hidden;
  transition:transform .2s, border-color .2s, background .2s;
}
.stat-card:hover { transform:translateY(-3px); border-color:var(--border2); background:rgba(17,21,35,0.88); }
.stat-card::before { content:''; position:absolute; top:0; right:0; width:100px; height:100px; border-radius:50%; filter:blur(40px); opacity:.6; pointer-events:none; }
.stat-card.c1::before { background:var(--bc01); }
.stat-card.c2::before { background:var(--green); }
.stat-card.c3::before { background:var(--certif); }
.stat-card.c4::before { background:var(--bc03); }
.stat-icon { font-size:24px; margin-bottom:12px; display:block; }
.stat-label { font-size:11px; font-weight:700; color:var(--text2); text-transform:uppercase; letter-spacing:.6px; margin-bottom:6px; }
.stat-value { font-size:30px; font-weight:800; letter-spacing:-1px; line-height:1; margin-bottom:4px; }
.stat-sub { font-size:12px; color:var(--text2); font-weight:500; }
.stat-bar { height:3px; background:var(--bg4); border-radius:2px; margin-top:12px; overflow:hidden; }
.stat-bar-fill { height:100%; border-radius:2px; transition:width .6s cubic-bezier(.4,0,.2,1); }

/* ── Bloc cards ──────────────────────────────────────────────────── */
.blocs-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:28px; }
.bloc-card {
  border-radius:var(--radius-lg);
  padding:26px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(13,16,30,0.85);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  cursor:pointer;
  transition:all .25s;
  position:relative; overflow:hidden;
  box-shadow:0 4px 24px rgba(0,0,0,.3);
}
.bloc-card { cursor:pointer; }
.bloc-card * { pointer-events:none; }
.bloc-card.bc01 { border-color:rgba(108,99,255,0.25); }
.bloc-card.bc01:hover { border-color:rgba(108,99,255,0.5); box-shadow:0 12px 40px rgba(108,99,255,0.2); }
.bloc-card.bc02 { border-color:rgba(0,212,170,0.25); }
.bloc-card.bc02:hover { border-color:rgba(0,212,170,0.5); box-shadow:0 12px 40px rgba(0,212,170,0.2); }
.bloc-card.bc03 { border-color:rgba(255,107,53,0.25); }
.bloc-card.bc03:hover { border-color:rgba(255,107,53,0.5); box-shadow:0 12px 40px rgba(255,107,53,0.2); }
.bloc-card-banner {
  height:90px; border-radius:10px; margin-bottom:16px;
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
  font-size:36px;
}
.bloc-card.bc01 .bloc-card-banner { background:linear-gradient(135deg,rgba(108,99,255,0.25),rgba(168,85,247,0.15)); }
.bloc-card.bc02 .bloc-card-banner { background:linear-gradient(135deg,rgba(0,212,170,0.25),rgba(14,165,233,0.15)); }
.bloc-card.bc03 .bloc-card-banner { background:linear-gradient(135deg,rgba(255,107,53,0.25),rgba(245,158,11,0.15)); }
.bloc-card-icon { font-size:40px; filter:drop-shadow(0 0 15px currentColor); }
.bloc-card-label { font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; margin-bottom:5px; }
.bloc-card.bc01 .bloc-card-label { color:var(--bc01); }
.bloc-card.bc02 .bloc-card-label { color:var(--bc02); }
.bloc-card.bc03 .bloc-card-label { color:var(--bc03); }
.bloc-card-title { font-size:15px; font-weight:800; margin-bottom:8px; letter-spacing:-.3px; color:var(--text); }
.bloc-card-desc { font-size:12px; color:var(--text2); line-height:1.6; margin-bottom:14px; }
.bloc-card-bar { height:5px; background:var(--bg4); border-radius:3px; overflow:hidden; }
.bloc-card-fill { height:100%; border-radius:3px; transition:width .6s; }
.bloc-card.bc01 .bloc-card-fill { background:var(--bc01-g); }
.bloc-card.bc02 .bloc-card-fill { background:var(--bc02-g); }
.bloc-card.bc03 .bloc-card-fill { background:var(--bc03-g); }
.bloc-card-pct { font-size:12px; font-weight:700; margin-top:6px; }
.bloc-card.bc01 .bloc-card-pct { color:var(--bc01); }
.bloc-card.bc02 .bloc-card-pct { color:var(--bc02); }
.bloc-card.bc03 .bloc-card-pct { color:var(--bc03); }

/* ── Badges gamification ─────────────────────────────────────────── */
.badges-section { margin-bottom:28px; }
.badges-title { font-size:14px; font-weight:700; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.badges-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:12px; }
.badge-item {
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--bg2);
  padding:16px 10px; text-align:center;
  transition:all .2s;
}
.badge-item.earned { border-color:rgba(245,158,11,0.35); background:rgba(245,158,11,0.07); }
.badge-item.earned:hover { transform:translateY(-3px); box-shadow:0 8px 25px rgba(245,158,11,0.2); }
.badge-emoji { font-size:28px; display:block; margin-bottom:7px; filter:grayscale(1) opacity(.3); transition:filter .3s; }
.badge-item.earned .badge-emoji { filter:none; animation:badgeBounce .5s ease; }
@keyframes badgeBounce { 0%,100%{transform:scale(1)} 50%{transform:scale(1.25)} }
.badge-name { font-size:10px; font-weight:600; color:var(--text3); }
.badge-item.earned .badge-name { color:var(--certif); }

/* ── Quick actions ───────────────────────────────────────────────── */
.quick-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
.quick-btn {
  padding:18px; border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--bg2);
  color:var(--text); text-align:left; cursor:pointer;
  transition:all .2s;
}
.quick-btn:hover { border-color:var(--border2); transform:translateY(-3px); }
.quick-btn-icon { font-size:26px; display:block; margin-bottom:10px; }
.quick-btn-title { font-size:13px; font-weight:700; }
.quick-btn-sub { font-size:11px; color:var(--text3); margin-top:3px; }

/* ── Planning page ───────────────────────────────────────────────── */
.months-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.month-card {
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  background:var(--bg2);
  overflow:hidden; cursor:pointer;
  transition:all .2s;
}
.month-card:hover { border-color:var(--border2); transform:translateY(-3px); }
.month-banner {
  height:7px;
  background:var(--bg4);
}
.month-card.bc01 .month-banner { background:var(--bc01-g); }
.month-card.bc02 .month-banner { background:var(--bc02-g); }
.month-card.bc03 .month-banner { background:var(--bc03-g); }
.month-card.certif .month-banner { background:linear-gradient(135deg,var(--certif),#f97316); }
.month-body { padding:18px; }
.month-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.month-num { font-size:11px; color:var(--text3); font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.bloc-chip { display:inline-flex; align-items:center; padding:3px 10px; border-radius:20px; font-size:10px; font-weight:700; letter-spacing:.5px; }
.chip-bc01 { background:var(--bc01-bg); color:var(--bc01); }
.chip-bc02 { background:var(--bc02-bg); color:var(--bc02); }
.chip-bc03 { background:var(--bc03-bg); color:var(--bc03); }
.chip-certif { background:var(--certif-bg); color:var(--certif); }
.month-theme { font-size:14px; font-weight:700; margin-bottom:6px; letter-spacing:-.2px; }
.month-topics { font-size:12px; color:var(--text2); line-height:1.6; margin-bottom:12px; }
.month-progress-row { display:flex; align-items:center; gap:8px; }
.month-pct { font-size:12px; font-weight:700; min-width:30px; text-align:right; }
.month-card.bc01 .month-pct { color:var(--bc01); }
.month-card.bc02 .month-pct { color:var(--bc02); }
.month-card.bc03 .month-pct { color:var(--bc03); }
.month-card.certif .month-pct { color:var(--certif); }

.month-detail { display:none; padding:0 18px 18px; border-top:1px solid var(--border); margin-top:14px; padding-top:14px; }
.month-card.expanded .month-detail { display:block; }
.module-items { display:grid; gap:8px; }
.module-item {
  display:flex; align-items:center; gap:12px;
  padding:12px 14px;
  background:var(--bg3); border-radius:10px;
  border:1px solid var(--border);
  transition:all .15s;
}
.module-item:hover { border-color:var(--border2); background:var(--bg4); }
.module-item.done { border-color:rgba(34,211,165,0.25); background:rgba(34,211,165,0.05); }
.module-icon-wrap {
  width:36px; height:36px; border-radius:8px;
  background:var(--bg4); display:flex; align-items:center; justify-content:center;
  font-size:18px; flex-shrink:0; cursor:pointer;
  transition:transform .15s;
}
.module-icon-wrap:hover { transform:scale(1.1); }
.module-info { flex:1; cursor:pointer; }
.module-title { font-size:13px; font-weight:600; }
.module-meta  { font-size:11px; color:var(--text3); margin-top:2px; }
.module-check {
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  border:2px solid var(--border2);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; color:transparent;
  transition:all .2s; cursor:pointer;
}
.module-item.done .module-check { background:var(--green); border-color:var(--green); color:#000; font-weight:700; }

/* ── Quiz ────────────────────────────────────────────────────────── */
.quiz-layout { display:grid; grid-template-columns:1fr 300px; gap:20px; align-items:start; }
.quiz-filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.filter-btn {
  padding:7px 16px; border-radius:20px;
  border:1px solid var(--border2);
  background:transparent; color:var(--text2);
  font-size:12px; font-weight:600; transition:all .15s;
}
.filter-btn:hover { border-color:var(--bc01); color:var(--bc01); }
.filter-btn.active { background:var(--bc01); border-color:var(--bc01); color:#fff; box-shadow:0 0 15px var(--bc01-glow); }
.filter-btn.active.f02 { background:var(--bc02); border-color:var(--bc02); box-shadow:0 0 15px var(--bc02-glow); }
.filter-btn.active.f03 { background:var(--bc03); border-color:var(--bc03); box-shadow:0 0 15px var(--bc03-glow); }

.question-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; margin-bottom:16px; }
.q-header { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.q-text { font-size:15px; font-weight:600; line-height:1.6; margin-bottom:18px; }
.options-grid { display:grid; gap:9px; }
.option-btn {
  display:flex; align-items:center; gap:14px;
  padding:13px 18px; border:1px solid var(--border2);
  border-radius:10px; background:var(--bg3);
  color:var(--text); font-size:13px; text-align:left;
  transition:all .15s; width:100%;
}
.option-btn:hover:not(:disabled) { border-color:var(--bc01); background:var(--bc01-bg); }
.option-btn.correct { border-color:var(--green); background:rgba(34,211,165,0.1); color:var(--green); }
.option-btn.wrong   { border-color:var(--red);   background:rgba(255,82,82,0.1);    color:var(--red);   }
.option-btn.reveal  { border-color:rgba(34,211,165,0.2); opacity:.6; }
.opt-letter {
  width:28px; height:28px; border-radius:50%;
  background:var(--bg4); border:1px solid var(--border2);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; flex-shrink:0;
  font-family:var(--mono);
}
.expl-box { margin-top:14px; padding:13px 16px; border-radius:10px; font-size:13px; line-height:1.6; }
.expl-box.correct { background:rgba(34,211,165,0.1); border:1px solid rgba(34,211,165,0.2); color:#6ee7b7; }
.expl-box.wrong   { background:rgba(255,82,82,0.1);  border:1px solid rgba(255,82,82,0.2);  color:#fca5a5; }

.quiz-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.quiz-counter { font-size:13px; color:var(--text2); }
.btn-nav { padding:9px 20px; border:1px solid var(--border2); border-radius:10px; background:transparent; color:var(--text); font-size:13px; font-weight:500; transition:all .15s; }
.btn-nav:hover:not(:disabled) { border-color:var(--bc01); color:var(--bc01); }
.btn-nav:disabled { opacity:.3; cursor:not-allowed; }

.quiz-score-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px; position:sticky; top:20px; }
.score-title { font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--text3); font-weight:700; margin-bottom:14px; }
.score-big { font-size:44px; font-weight:800; letter-spacing:-2px; margin-bottom:4px; }
.score-sub { font-size:12px; color:var(--text2); margin-bottom:14px; }
.bloc-scores { display:grid; gap:10px; margin-top:14px; }
.bloc-score-row { display:flex; align-items:center; gap:8px; }
.bsr-label { font-size:11px; font-weight:700; width:40px; flex-shrink:0; }
.bsr-bar { flex:1; height:5px; background:var(--bg4); border-radius:3px; overflow:hidden; }
.bsr-fill { height:100%; border-radius:3px; transition:width .4s; }
.bsr-pct { font-size:11px; font-weight:700; width:32px; text-align:right; font-family:var(--mono); }
.btn-reset { width:100%; margin-top:14px; padding:9px; border:1px solid var(--border2); border-radius:10px; background:transparent; color:var(--text2); font-size:12px; font-weight:500; transition:all .15s; }
.btn-reset:hover { border-color:var(--red); color:var(--red); }

/* Diff badges */
.diff-badge { display:inline-block; padding:2px 9px; border-radius:20px; font-size:10px; font-weight:700; }
.diff-Facile   { background:rgba(34,211,165,0.15); color:var(--green); }
.diff-Moyen    { background:rgba(245,158,11,0.15);  color:var(--certif); }
.diff-Difficile{ background:rgba(255,82,82,0.15);   color:var(--red); }

/* ── CV builder ──────────────────────────────────────────────────── */
.cv-layout { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.cv-form-section { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-lg); padding:22px; }
.cv-section-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--text3); margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.cv-fields { display:grid; gap:12px; }
.cv-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.field-group { display:flex; flex-direction:column; gap:6px; }
.field-label { font-size:10px; color:var(--text3); font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
.field-input {
  padding:10px 13px; background:rgba(255,255,255,0.04);
  border:1px solid var(--border); border-radius:10px;
  color:var(--text); font-size:13px; transition:all .15s; outline:none; resize:vertical;
}
.field-input:focus { border-color:var(--bc01); background:var(--bc01-bg); }
.skills-grid { display:flex; flex-wrap:wrap; gap:7px; margin-top:4px; }
.skill-tag {
  padding:5px 11px; background:var(--bg3);
  border:1px solid var(--border2); border-radius:20px;
  font-size:11px; cursor:pointer; transition:all .15s; user-select:none;
}
.skill-tag:hover { border-color:var(--bc01); color:var(--bc01); }
.skill-tag.selected { background:var(--bc01-bg); border-color:var(--bc01); color:var(--bc01); }
.btn-save-cv { width:100%; margin-top:14px; padding:13px; background:var(--bc02-g); border:none; border-radius:12px; color:#000; font-size:14px; font-weight:700; transition:all .15s; }
.btn-save-cv:hover { opacity:.88; transform:translateY(-2px); }

.cv-preview { background:#fff; border-radius:var(--radius-lg); padding:32px; color:#1a1a2e; min-height:600px; position:sticky; top:20px; max-height:80vh; overflow-y:auto; font-family:'Plus Jakarta Sans',sans-serif; }
.cv-preview h2 { font-size:22px; font-weight:800; color:#111; }
.cv-p-job { font-size:14px; color:var(--bc01); font-weight:600; margin-top:3px; }
.cv-p-contact { font-size:12px; color:#666; margin-top:8px; display:flex; gap:16px; flex-wrap:wrap; }
.cv-p-section { margin-top:18px; }
.cv-p-section h3 { font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--bc01); border-bottom:2px solid var(--bc01); padding-bottom:5px; margin-bottom:10px; font-weight:700; }
.cv-p-section p { font-size:13px; line-height:1.6; color:#333; }
.cv-skills-row { display:flex; flex-wrap:wrap; gap:5px; }
.cv-skill-chip { padding:3px 10px; background:#f0f0ff; border-radius:5px; font-size:11px; color:#4040cc; font-weight:600; }
.btn-print { width:100%; margin-top:10px; padding:10px; border:2px dashed var(--border2); border-radius:10px; background:transparent; color:var(--text2); font-size:12px; font-weight:500; transition:all .15s; }
.btn-print:hover { border-color:var(--bc01); color:var(--bc01); }

/* ── Resources ───────────────────────────────────────────────────── */
.resources-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.resource-card {
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:20px; display:flex; flex-direction:column; gap:10px; transition:all .2s;
}
.resource-card:hover { border-color:var(--border2); transform:translateY(-3px); }
.res-icon { font-size:26px; }
.res-title { font-size:14px; font-weight:700; }
.res-desc { font-size:12px; color:var(--text2); line-height:1.5; flex:1; }
.res-tag { align-self:flex-start; font-size:10px; padding:3px 9px; border-radius:20px; font-weight:700; }
.tag-pdf   { background:rgba(255,82,82,0.15);   color:var(--red);    }
.tag-guide { background:var(--bc01-bg);          color:var(--bc01);   }
.tag-memo  { background:var(--certif-bg);        color:var(--certif); }
.btn-download {
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:9px; border:1px solid var(--border2); border-radius:10px;
  background:transparent; color:var(--text); font-size:12px; font-weight:500; transition:all .15s;
}
.btn-download:hover { border-color:var(--bc01); color:var(--bc01); background:var(--bc01-bg); }

/* ── Admin ───────────────────────────────────────────────────────── */
.admin-table { width:100%; border-collapse:collapse; font-size:13px; }
.admin-table th { text-align:left; padding:10px 14px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--text3); border-bottom:1px solid var(--border); }
.admin-table td { padding:12px 14px; border-bottom:1px solid var(--border); color:var(--text2); }
.admin-table tr:hover td { background:var(--bg3); }

/* ── Toast ───────────────────────────────────────────────────────── */
.toast {
  position:fixed; bottom:24px; right:24px;
  padding:13px 20px; background:var(--bg3);
  border:1px solid var(--border2); border-radius:12px;
  font-size:13px; font-weight:500; box-shadow:0 8px 30px rgba(0,0,0,.5);
  transform:translateY(20px); opacity:0; transition:all .25s; z-index:1000;
  display:flex; align-items:center; gap:8px; backdrop-filter:blur(10px);
}
.toast.show { transform:translateY(0); opacity:1; }
.toast.success { border-color:rgba(34,211,165,.3); }
.toast.error   { border-color:rgba(255,82,82,.3); }

/* ── Module modal ────────────────────────────────────────────────── */
.module-modal { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .25s; }
.module-modal.open { opacity:1; }
.module-modal-overlay { position:absolute; inset:0; background:rgba(0,0,0,.8); backdrop-filter:blur(6px); }
.module-modal-content {
  position:relative; z-index:1; width:98%; max-width:1400px; max-height:94vh;
  background:var(--bg2); border:1px solid var(--border2); border-radius:var(--radius-xl);
  display:flex; flex-direction:column;
  transform:translateY(20px); transition:transform .25s;
  box-shadow:0 30px 80px rgba(0,0,0,.7);
}
.module-modal.open .module-modal-content { transform:translateY(0); }
.module-modal-header { display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid var(--border); flex-shrink:0; }
.module-modal-title { font-size:17px; font-weight:700; letter-spacing:-.3px; }
.module-modal-meta  { font-size:12px; color:var(--text3); margin-top:2px; }
.module-modal-close { width:32px; height:32px; border-radius:50%; border:1px solid var(--border2); background:transparent; color:var(--text2); font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s; }
.module-modal-close:hover { border-color:var(--red); color:var(--red); }
.mc-done-btn { padding:8px 18px; border-radius:10px; border:1px solid var(--border2); background:transparent; color:var(--text2); font-size:12px; font-weight:600; cursor:pointer; transition:all .15s; }
.mc-done-btn:hover { border-color:var(--green); color:var(--green); }
.mc-done-btn.done { background:rgba(34,211,165,.12); border-color:rgba(34,211,165,.3); color:var(--green); }
.module-modal-body { flex:1; overflow-y:auto; padding:24px; }

/* Cours */
.mc-intro { font-size:14px; color:var(--text2); line-height:1.8; margin-bottom:22px; padding:16px 18px; background:var(--bc01-bg); border-left:3px solid var(--bc01); border-radius:0 10px 10px 0; }
.mc-points { display:grid; gap:12px; margin-bottom:22px; }
.mc-point { background:var(--bg3); border:1px solid var(--border); border-radius:12px; padding:16px 18px; transition:border-color .15s; }
.mc-point:hover { border-color:var(--border2); }
.mc-point-title { font-size:13px; font-weight:700; color:var(--bc01); margin-bottom:7px; }
.mc-point-text  { font-size:13px; color:var(--text2); line-height:1.75; }
.mc-section-title { font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--text3); font-weight:700; margin-bottom:10px; }
.mc-retenir { display:grid; gap:6px; margin-bottom:20px; }
.mc-retenir-item { font-size:13px; color:var(--green); background:rgba(34,211,165,.08); border:1px solid rgba(34,211,165,.15); border-radius:8px; padding:9px 13px; }
.mc-exercice { font-size:13px; color:var(--text2); line-height:1.75; background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.2); border-radius:10px; padding:16px 18px; }

/* Slides */
.mc-slides { display:flex; flex-direction:column; gap:16px; }
.slide-nav { display:flex; align-items:center; justify-content:center; gap:18px; }
.slide-btn { width:38px; height:38px; border-radius:50%; border:1px solid var(--border2); background:transparent; color:var(--text); font-size:18px; cursor:pointer; transition:all .15s; display:flex; align-items:center; justify-content:center; }
.slide-btn:hover:not(:disabled) { border-color:var(--bc01); color:var(--bc01); background:var(--bc01-bg); }
.slide-btn:disabled { opacity:.3; cursor:not-allowed; }
.slide-counter { font-size:13px; color:var(--text2); font-family:var(--mono); font-weight:500; }
.slides-track { min-height:300px; }
.slide { display:none; text-align:center; padding:24px; background:var(--bg3); border-radius:var(--radius-lg); border:1px solid var(--border); }
.slide.active { display:block; }
.slide-visual { font-size:52px; margin-bottom:16px; }
.slide-titre { font-size:19px; font-weight:700; margin-bottom:16px; letter-spacing:-.3px; }
.slide-contenu { font-size:13px; color:var(--text2); line-height:1.85; text-align:left; background:var(--bg4); border-radius:10px; padding:16px 18px; white-space:pre-line; font-family:var(--mono); }
.slide-dots { display:flex; justify-content:center; gap:7px; flex-wrap:wrap; }
.slide-dot { width:8px; height:8px; border-radius:50%; background:var(--bg4); cursor:pointer; transition:all .2s; border:1px solid var(--border2); }
.slide-dot.active { background:var(--bc01); border-color:var(--bc01); box-shadow:0 0 8px var(--bc01-glow); transform:scale(1.2); }

/* ── Responsive ──────────────────────────────────────────────────── */
.menu-toggle { display:none; position:fixed; top:16px; left:16px; z-index:200; background:var(--bg2); border:1px solid var(--border2); border-radius:10px; padding:9px 12px; font-size:18px; color:var(--text); }
@media(max-width:900px) {
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); }
  .main { margin-left:0; }
  .menu-toggle { display:block; }
  .page { padding:20px 16px; padding-top:60px; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .blocs-grid { grid-template-columns:1fr; }
  .months-grid { grid-template-columns:1fr; }
  .quiz-layout { grid-template-columns:1fr; }
  .cv-layout { grid-template-columns:1fr; }
  .dash-hero-svg { display:none; }
}

/* ── Bloc mini-menu ──────────────────────────────────────────────── */
.bloc-menu-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px;
  font-size:14px; font-weight:700;
}
.bloc-menu-close {
  width:28px; height:28px; border-radius:50%;
  border:1px solid var(--border2); background:transparent;
  color:var(--text2); font-size:13px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s;
}
.bloc-menu-close:hover { border-color:var(--red); color:var(--red); }
.bloc-menu-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:10px;
}
.bloc-menu-item {
  display:flex; align-items:center; gap:12px;
  padding:14px 16px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--bg2);
  cursor:pointer;
  transition:all .2s;
  position:relative;
}
.bloc-menu-item:hover { border-color:var(--border2); transform:translateY(-2px); background:var(--bg3); }
.bloc-menu-item.done { border-color:rgba(34,211,165,0.25); }
.bloc-menu-icon {
  width:40px; height:40px; border-radius:10px;
  background:var(--bg4); display:flex; align-items:center;
  justify-content:center; font-size:20px; flex-shrink:0;
}
.bloc-menu-item.bc01 .bloc-menu-icon { background:var(--bc01-bg); }
.bloc-menu-item.bc02 .bloc-menu-icon { background:var(--bc02-bg); }
.bloc-menu-item.bc03 .bloc-menu-icon { background:var(--bc03-bg); }
.bloc-menu-info { flex:1; min-width:0; }
.bloc-menu-name { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bloc-menu-meta { font-size:11px; color:var(--text3); margin-top:2px; }
.bloc-menu-check {
  width:22px; height:22px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700;
  border:1.5px solid var(--border2); color:transparent;
  transition:all .2s;
}
.bloc-menu-item.done .bloc-menu-check { background:var(--green); border-color:var(--green); color:#000; }
.bloc-menu-badge {
  position:absolute; top:8px; right:8px;
  font-size:9px; font-weight:700; padding:2px 7px;
  border-radius:20px;
}
.badge-slides { background:rgba(108,99,255,0.2); color:var(--bc01); }
.badge-cours  { background:rgba(0,212,170,0.15);  color:var(--bc02); }

/* ── Lecteur musique sidebar ────────────────────────────────────── */
.music-player {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color .2s;
}
.music-player:hover { border-color: var(--border2); }
.music-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; cursor: pointer; transition: background .15s;
}
.music-header:hover { background: var(--bg4); }
.music-header-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.music-icon {
  font-size: 18px; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; background: var(--bg4); flex-shrink: 0;
  transition: transform .3s;
}
.music-icon.music-playing { animation: musicPulse 1.5s ease-in-out infinite; }
@keyframes musicPulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.15); }
}
.music-info     { flex: 1; min-width: 0; }
.music-title    { font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-genre    { font-size: 10px; color: var(--text3); margin-top: 1px; }
.music-toggle-btn {
  background: none; border: none; color: var(--text3);
  font-size: 12px; cursor: pointer; padding: 2px 4px; transition: color .15s;
}
.music-toggle-btn:hover { color: var(--text); }
.music-body { padding: 0 12px 12px; }
.music-playlists { display: flex; gap: 6px; margin-bottom: 12px; }
.music-pl-btn {
  flex: 1; padding: 6px 4px; border-radius: 8px; font-size: 10px;
  font-weight: 600; border: 1px solid var(--border2);
  background: var(--bg4); color: var(--text3); cursor: pointer;
  transition: all .15s; text-align: center;
}
.music-pl-btn:hover { color: var(--text); border-color: var(--text3); }
.music-pl-btn.active { font-weight: 700; }
.music-controls {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; margin-bottom: 10px;
}
.music-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg4); border: 1px solid var(--border2);
  color: var(--text2); font-size: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.music-btn:hover { background: var(--bg2); color: var(--text); border-color: var(--text3); }
.music-btn-play {
  width: 40px; height: 40px; font-size: 14px;
  background: var(--bc01-g); border-color: transparent; color: #fff;
}
.music-btn-play:hover { opacity: .85; color: #fff; }
.music-volume-row { display: flex; align-items: center; gap: 7px; }
.music-vol-icon { font-size: 11px; }
.music-volume {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 3px; border-radius: 2px;
  background: linear-gradient(
    to right,
    var(--bc01) 0%, var(--bc01) calc(var(--val, 40) * 1%),
    var(--bg4) calc(var(--val, 40) * 1%), var(--bg4) 100%
  );
  outline: none; cursor: pointer;
}
.music-volume::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 12px;
  border-radius: 50%; background: var(--bc01);
  box-shadow: 0 0 4px rgba(108,99,255,.5);
}

/* ── Lecteur vidéo inline dans les cours ────────────────────────── */
.cours-video-wrap {
  margin: 18px 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #000;
}
.cours-video-title {
  padding: 10px 16px;
  font-size: 13px; font-weight: 700;
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
}
.cours-video-player {
  position: relative;
  background: #000;
}
.cours-video-player iframe,
.cours-video-player video {
  display: block;
  width: 100%;
}
.cours-video-player iframe { aspect-ratio: 16/9; border: none; }

/* ════════════════════════════════════════════════════════════════
   GÉNÉRATEUR DE CV — NOUVEAU DESIGN
   ════════════════════════════════════════════════════════════════ */

/* Layout général */
.cvgen-wrap {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 16px;
  height: calc(100vh - 120px);
  overflow: hidden;
  min-width: 0;
}
@media(max-width:900px) { .cvgen-wrap { grid-template-columns:1fr; height:auto; } }

/* ── Formulaire ─────────────────────────────────────────────────── */
.cvgen-form {
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
  display: flex; flex-direction: column; gap: 10px;
  min-width: 0;
}
.cvgen-form-header { margin-bottom: 4px; }
.cvgen-form-title { font-size: 18px; font-weight: 800; }
.cvgen-form-sub   { font-size: 12px; color: var(--text3); margin-top: 3px; }

.cvgen-section {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px;
  min-width: 0;
}
.cvgen-section-title {
  font-size: 11px; font-weight: 700; color: var(--text3);
  text-transform: uppercase; letter-spacing: .6px;
  margin-bottom: 12px;
}

.cvgen-field { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.cvgen-field label { font-size: 11px; font-weight: 600; color: var(--text3); }
.cvgen-field input,
.cvgen-field textarea,
.cvgen-field select {
  padding: 7px 10px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); font-size: 12px;
  outline: none; transition: border-color .15s;
  font-family: inherit; width: 100%; box-sizing: border-box;
}
.cvgen-field input:focus,
.cvgen-field textarea:focus { border-color: var(--bc01); }
.cvgen-field textarea { resize: vertical; min-height: 55px; line-height: 1.5; }
.cvgen-field select { cursor: pointer; }

.cvgen-field-row { display: flex; gap: 10px; }

/* Blocs exp/formation */
.cvgen-exp-block,
.cvgen-form-block {
  background: var(--bg4); border-radius: 10px;
  padding: 12px; margin-bottom: 10px;
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--border);
}
.cvgen-exp-header {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 700; color: var(--text3);
}
.cvgen-remove-btn {
  background: none; border: none; color: var(--text3);
  cursor: pointer; font-size: 12px; padding: 2px 6px;
  border-radius: 6px; transition: all .15s;
}
.cvgen-remove-btn:hover { background: rgba(255,82,82,.15); color: var(--red); }

.cvgen-add-btn {
  width: 100%; padding: 8px; border-radius: 8px;
  background: var(--bg3); border: 1px dashed var(--border2);
  color: var(--text3); font-size: 12px; cursor: pointer;
  transition: all .15s; margin-top: 4px;
}
.cvgen-add-btn:hover { border-color: var(--bc01); color: var(--bc01); background: var(--bc01-bg); }

/* Langues */
.cvgen-langue-row {
  display: flex; gap: 8px; align-items: center; margin-bottom: 6px;
}
.cvgen-langue-row input  { flex: 1; padding: 7px 10px; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 12px; outline: none; }
.cvgen-langue-row select { flex: 1.4; padding: 7px 10px; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 12px; outline: none; cursor: pointer; }

/* Palette couleurs */
.cvgen-colors { display: flex; gap: 8px; flex-wrap: wrap; }
.cvgen-color {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer;
  transition: all .15s; position: relative;
}
.cvgen-color.active {
  border-color: #fff;
  box-shadow: 0 0 0 2px currentColor, 0 0 0 4px rgba(255,255,255,.3);
  transform: scale(1.15);
}
.cvgen-color:hover { transform: scale(1.1); }

/* Actions */
.cvgen-actions { display: flex; gap: 10px; padding-bottom: 20px; }
.cvgen-btn-save {
  flex: 1; padding: 12px; border-radius: 10px;
  background: var(--bc01-g); color: #fff;
  border: none; cursor: pointer; font-size: 13px; font-weight: 700;
  transition: opacity .15s;
}
.cvgen-btn-save:hover { opacity: .85; }
.cvgen-btn-print {
  flex: 1; padding: 12px; border-radius: 10px;
  background: var(--bg3); color: var(--text2);
  border: 1px solid var(--border2); cursor: pointer;
  font-size: 13px; font-weight: 600; transition: all .15s;
}
.cvgen-btn-print:hover { background: var(--bg4); }

/* ── Aperçu CV ───────────────────────────────────────────────────── */
.cvgen-preview-wrap {
  overflow-y: auto;
  overflow-x: hidden;
  display: flex; flex-direction: column;
  align-items: center;
  padding: 4px 8px 20px;
  min-width: 0;
}
.cv-preview {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,.4);
  min-height: 400px;
  width: 100%;
  max-width: 640px;
}

/* ── Design CV 2 colonnes ────────────────────────────────────────── */
.cvp-wrap {
  display: flex;
  min-height: 100%;
  font-family: 'Georgia', 'Times New Roman', serif;
  color: #1a1a1a;
}

/* Colonne gauche */
.cvp-left {
  width: 195px; flex-shrink: 0;
  padding: 28px 16px;
  color: #fff;
  display: flex; flex-direction: column;
}
.cvp-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700;
  margin: 0 auto 24px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: rgba(255,255,255,.1);
}
.cvp-left-section { margin-bottom: 20px; }
.cvp-left-title {
  font-size: 9px; font-weight: 700; letter-spacing: 1.8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,.25);
  margin-bottom: 10px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.cvp-contact-item {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 9.5px; margin-bottom: 7px; line-height: 1.4;
  word-break: break-word;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.cvp-contact-icon { flex-shrink: 0; font-size: 11px; margin-top: 1px; }
.cvp-skill {
  font-size: 9.5px; padding: 3px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
  margin-bottom: 3px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.cvp-langue {
  display: flex; justify-content: space-between;
  font-size: 9.5px; margin-bottom: 6px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.cvp-langue-nom { font-weight: 700; }
.cvp-langue-niv { opacity: .75; font-style: italic; }

/* Colonne droite */
.cvp-right {
  flex: 1; padding: 28px 22px;
  background: #fff;
  display: flex; flex-direction: column;
}
.cvp-header { margin-bottom: 16px; }
.cvp-nom {
  font-size: 22px; font-weight: 300;
  letter-spacing: 2.5px; color: #1a1a1a;
  margin-bottom: 4px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.cvp-nom strong { font-weight: 800; }
.cvp-titre {
  font-size: 9px; letter-spacing: 3.5px;
  margin-bottom: 10px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.cvp-header-line { height: 1.5px; width: 100%; }

.cvp-section { margin-bottom: 16px; }
.cvp-section-title {
  font-size: 9px; font-weight: 700; letter-spacing: 2px;
  padding-bottom: 5px; border-bottom: 1.5px solid;
  margin-bottom: 10px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.cvp-text {
  font-size: 10px; line-height: 1.7; color: #333;
}

.cvp-exp { margin-bottom: 12px; }
.cvp-exp-titre {
  font-size: 11px; font-weight: 700;
  text-align: center; margin-bottom: 3px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.cvp-exp-sub {
  font-size: 10px; text-align: center;
  color: #555; margin-bottom: 5px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.cvp-exp-list { padding-left: 14px; margin-top: 4px; }
.cvp-exp-list li {
  font-size: 10px; line-height: 1.65;
  color: #333; margin-bottom: 2px;
}

.cvp-forms-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.cvp-form { text-align: center; }
.cvp-form-titre {
  font-size: 10px; font-weight: 700;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.cvp-form-sub {
  font-size: 9.5px; margin-top: 2px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.cvp-form-annee { font-size: 9px; color: #777; margin-top: 2px; }

.cvp-footer {
  margin-top: auto; padding-top: 16px;
  font-size: 8px; color: #ccc; text-align: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ── Zone photo CV ──────────────────────────────────────────────── */
.cvgen-photo-row {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 14px;
  padding: 12px;
  background: var(--bg4); border-radius: 10px;
  border: 1px solid var(--border);
}
.cvgen-photo-preview {
  width: 80px; height: 80px;
  border-radius: 50%;
  border: 2px dashed var(--border2);
  cursor: pointer;
  overflow: hidden;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg3);
  transition: border-color .2s;
  position: relative;
}
.cvgen-photo-preview:hover { border-color: var(--bc01); }
.cvgen-photo-placeholder {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; font-size: 10px; color: var(--text3); text-align: center;
  padding: 6px;
}
.cvgen-photo-placeholder span:first-child { font-size: 20px; }
.cvgen-photo-actions {
  display: flex; flex-direction: column; gap: 8px;
}
.cvgen-photo-hint {
  font-size: 11px; color: var(--text3); line-height: 1.6;
}
.cvgen-photo-remove {
  padding: 5px 10px; border-radius: 7px;
  background: rgba(255,82,82,.12); color: var(--red);
  border: 1px solid rgba(255,82,82,.25);
  cursor: pointer; font-size: 11px; font-weight: 600;
  transition: all .15s;
}
.cvgen-photo-remove:hover { background: rgba(255,82,82,.22); }

/* ── Onglets Ressources ──────────────────────────────────────────── */
.resources-tabs {
  display: flex; gap: 8px; margin-bottom: 4px;
}
.res-tab {
  padding: 10px 20px; border-radius: 10px;
  background: var(--bg3); border: 1px solid var(--border2);
  color: var(--text3); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .15s;
}
.res-tab:hover { background: var(--bg4); color: var(--text); }
.res-tab.active {
  background: var(--bc01-bg); border-color: var(--bc01);
  color: var(--bc01);
}

/* ── Job Board ───────────────────────────────────────────────────── */
.jb-header { margin-bottom: 20px; }
.jb-title  { font-size: 20px; font-weight: 800; }
.jb-sub    { font-size: 13px; color: var(--text3); margin-top: 3px; }

.jb-filters {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px; margin-bottom: 16px;
}
.jb-filter-group { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 140px; }
.jb-filter-label { font-size: 11px; font-weight: 700; color: var(--text3); }
.jb-select, .jb-input {
  padding: 9px 12px; border-radius: 9px;
  background: var(--bg3); border: 1px solid var(--border);
  color: var(--text); font-size: 13px; outline: none;
  transition: border-color .15s; font-family: inherit;
}
.jb-select:focus, .jb-input:focus { border-color: var(--bc01); }
.jb-select { cursor: pointer; }
.jb-search-btn {
  padding: 10px 22px; border-radius: 10px;
  background: var(--bc01-g); color: #fff;
  border: none; cursor: pointer;
  font-size: 13px; font-weight: 700;
  transition: opacity .15s; white-space: nowrap;
  align-self: flex-end;
}
.jb-search-btn:hover    { opacity: .85; }
.jb-search-btn:disabled { opacity: .5; }

/* Sources rapides */
.jb-sources { margin-bottom: 20px; }
.jb-sources-title { font-size: 12px; color: var(--text3); margin-bottom: 8px; }
.jb-sources-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.jb-source-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 8px;
  background: var(--bg2); border: 1px solid var(--border);
  color: var(--text2); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all .15s;
}
.jb-source-btn:hover { background: var(--bg3); border-color: var(--border2); color: var(--text); }
.jb-ft:hover     { border-color: #0056b3; color: #4f8ef7; }
.jb-indeed:hover { border-color: #2557a7; color: #4f8ef7; }
.jb-lba:hover    { border-color: var(--bc01); color: var(--bc01); }
.jb-apec:hover   { border-color: var(--bc03); color: var(--bc03); }

/* Zone vide */
.jb-empty {
  text-align: center; padding: 48px 20px;
  color: var(--text3); font-size: 14px; line-height: 1.8;
}
.jb-empty-icon { font-size: 40px; margin-bottom: 14px; }

/* Carte de redirection */
.jb-redirect-card {
  display: flex; gap: 20px; align-items: center;
  background: var(--bg2); border: 1px solid var(--bc01);
  border-radius: 14px; padding: 20px 24px; margin-bottom: 20px;
  flex-wrap: wrap;
}
.jb-redirect-icon  { font-size: 36px; flex-shrink: 0; }
.jb-redirect-text  { flex: 1; min-width: 200px; }
.jb-redirect-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.jb-redirect-sub   { font-size: 13px; color: var(--text2); margin-bottom: 10px; }
.jb-redirect-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.jb-filter-tag {
  padding: 3px 10px; border-radius: 20px;
  background: var(--bc01-bg); color: var(--bc01);
  font-size: 11px; font-weight: 700;
}
.jb-open-btn {
  padding: 12px 22px; border-radius: 10px;
  background: var(--bc01-g); color: #fff;
  text-decoration: none; font-size: 13px; font-weight: 700;
  transition: opacity .15s; flex-shrink: 0; white-space: nowrap;
}
.jb-open-btn:hover { opacity: .85; }

/* Grille autres plateformes */
.jb-also-title { font-size: 13px; font-weight: 700; color: var(--text3); margin-bottom: 12px; }
.jb-also-grid  { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: 12px; }
.jb-also-card  {
  display: flex; flex-direction: column; gap: 5px;
  padding: 16px 18px; border-radius: 12px;
  background: var(--bg2); border: 1px solid var(--border);
  text-decoration: none; transition: all .2s;
}
.jb-also-card:hover { border-color: var(--border2); transform: translateY(-2px); background: var(--bg3); }
.jb-also-logo { font-size: 13px; font-weight: 700; color: var(--text); }
.jb-also-sub  { font-size: 11px; color: var(--text3); }

/* ── Onglets ressources ──────────────────────────────────────────── */
.res-tabs { display: flex; gap: 6px; }
.res-tab {
  padding: 8px 16px; border-radius: 8px;
  background: var(--bg3); border: 1px solid var(--border2);
  color: var(--text3); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all .15s;
}
.res-tab:hover  { border-color: var(--bc01); color: var(--bc01); }
.res-tab.active { background: var(--bc01-bg); border-color: var(--bc01); color: var(--bc01); }

/* ════════════════════════════════════════════════════════════════
   AMÉLIORATIONS VISUELLES — PREMIUM
   ════════════════════════════════════════════════════════════════ */

/* ── Barre de progression globale ───────────────────────────────── */
.dash-progress-bar-wrap {
  margin-bottom: 22px;
  background: rgba(13,16,30,0.88);
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 16px;
  padding: 16px 22px;
  backdrop-filter: blur(20px);
}
.dash-progress-left {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.dash-progress-label {
  font-size: 12px; font-weight: 700; color: var(--text2);
  text-transform: uppercase; letter-spacing: .6px;
}
.dash-progress-pct {
  font-size: 18px; font-weight: 800;
  background: linear-gradient(135deg,#6c63ff,#00d4aa);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.dash-progress-track {
  height: 8px; background: rgba(255,255,255,0.08);
  border-radius: 4px; overflow: hidden; margin-bottom: 10px;
}
.dash-progress-fill {
  height: 100%;
  background: linear-gradient(90deg,#6c63ff,#a855f7,#00d4aa);
  border-radius: 4px;
  transition: width 1s cubic-bezier(.4,0,.2,1);
  position: relative;
}
.dash-progress-fill::after {
  content: '';
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 40px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3));
  border-radius: 0 4px 4px 0;
  animation: shimmer 2s ease-in-out infinite;
}
@keyframes shimmer { 0%,100%{opacity:.5} 50%{opacity:1} }

.dash-progress-msg {
  font-size: 12px; color: var(--text2); font-weight: 500;
}

/* ── Boutons CTA hero ────────────────────────────────────────────── */
.dash-hero-cta-row {
  display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap;
}
.dash-cta-btn {
  padding: 10px 20px; border-radius: 10px;
  font-size: 13px; font-weight: 700; border: none; cursor: pointer;
  transition: all .2s; letter-spacing: .2px;
}
.dash-cta-primary {
  background: linear-gradient(135deg,#6c63ff,#a855f7);
  color: #fff;
  box-shadow: 0 4px 20px rgba(108,99,255,.4);
}
.dash-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(108,99,255,.55);
}
.dash-cta-secondary {
  background: rgba(255,255,255,0.08);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
}
.dash-cta-secondary:hover {
  background: rgba(255,255,255,0.13);
  border-color: rgba(255,255,255,.25);
  transform: translateY(-2px);
}

/* ── Sidebar améliorée ───────────────────────────────────────────── */
.sidebar {
  background: rgba(8,10,20,0.95) !important;
  border-right: 1px solid rgba(255,255,255,0.07) !important;
}
.nav-section {
  font-size: 10px !important; font-weight: 700 !important;
  color: var(--text3) !important; letter-spacing: 1px !important;
  text-transform: uppercase !important;
}
.nav-item.active {
  background: rgba(108,99,255,0.18) !important;
}

/* ── Section titles plus visibles ────────────────────────────────── */
.page-title { font-size: 26px !important; }
.page-sub   { color: var(--text2) !important; font-size: 13px !important; }

/* ── Module items done — badge plus visible ──────────────────────── */
.module-item.done {
  border-color: rgba(34,211,165,0.3) !important;
  background: rgba(34,211,165,0.07) !important;
}
.module-title { font-weight: 700; font-size: 13px; }
.module-meta  { font-size: 11px; color: var(--text2) !important; }

/* ── Badges de progression plus visibles ─────────────────────────── */
.badge-card {
  background: rgba(13,16,30,0.85) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  backdrop-filter: blur(16px) !important;
}
.badge-card.earned {
  border-color: rgba(245,158,11,0.4) !important;
  background: rgba(245,158,11,0.08) !important;
}

/* ── Accès rapide cards ───────────────────────────────────────────── */
.quick-card {
  background: rgba(13,16,30,0.85) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  backdrop-filter: blur(16px) !important;
  transition: all .25s !important;
}
.quick-card:hover {
  border-color: var(--bc01) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 28px rgba(108,99,255,.2) !important;
}