:root{
  color-scheme: light;
  --navy-950:#0a2b28;
  --navy-900:#0f3d38;
  --navy-700:#1c6b61;
  --blue-500:#e2861f;
  --blue-100:#fdecd6;
  --gold-500:#1c8f7d;
  --gold-100:#dff3ef;
  --green-600:#2f9155;
  --green-100:#e4f5e9;
  --red-600:#c94a3f;
  --red-100:#fbe8e6;
  --bg:#f6f4ee;
  --surface:#ffffff;
  --surface-2:#f0ede3;
  --border:#e0dccd;
  --text:#20241f;
  --muted:#6b6b5c;
  --rail-bg:#0f3d38;
  --rail-text:#cfe8e2;
  --font-display:'Archivo', 'Arial Narrow', sans-serif;
  --font-body:'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#0f1613; --surface:#182420; --surface-2:#1c2b26; --border:#2c3c36;
    --text:#eef2ee; --muted:#a3b0a8; --blue-100:#3a2c17; --gold-100:#12302a;
    --green-100:#132a1d; --red-100:#2c1815; --rail-bg:#0a221f; --rail-text:#bcdcd4;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#0f1613; --surface:#182420; --surface-2:#1c2b26; --border:#2c3c36;
  --text:#eef2ee; --muted:#a3b0a8; --blue-100:#3a2c17; --gold-100:#12302a;
  --green-100:#132a1d; --red-100:#2c1815; --rail-bg:#0a221f; --rail-text:#bcdcd4;
}

*{box-sizing:border-box;}
html,body{ background:var(--bg); }
body{ color:var(--text); font-family:var(--font-body); line-height:1.5; margin:0; }
h1,h2,h3,.display{ font-family:var(--font-display); text-wrap:balance; text-transform:none; }
code,.mono,.stat,td.num,th.num{ font-family:var(--font-mono); }
button{ font-family:inherit; }
a{ color:var(--blue-500); }
img{ max-width:100%; }
::selection{ background:var(--blue-100); }

.app{ display:flex; min-height:100vh; max-width:1280px; margin:0 auto; }

/* ---------- Rail ---------- */
.rail{
  width:296px; flex:none; background:var(--rail-bg); color:var(--rail-text);
  padding:28px 20px 28px 24px; display:flex; flex-direction:column; gap:22px;
  position:sticky; top:0; align-self:flex-start; height:100vh; height:100dvh; overflow-y:auto;
}
.brand{ display:flex; align-items:center; gap:10px; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.14); }
.brand-mark{
  width:34px;height:34px;border-radius:8px;
  background:linear-gradient(155deg,var(--blue-500),#f4b93f);
  display:flex;align-items:center;justify-content:center;
  color:#fff; font-family:var(--font-display); font-weight:700; font-size:17px; flex:none; overflow:hidden;
}
.brand-mark img{ width:100%; height:100%; object-fit:contain; padding:3px; background:#fff; }
.brand-text .k1{ font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.brand-text .k2{ font-family:var(--font-display); font-size:16px; font-weight:700; color:#fff; }
.rail-back{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:rgba(255,255,255,.65); text-decoration:none; margin-top:-8px; }
.rail-back svg{ width:14px; height:14px; }
.rail-back:hover{ color:#fff; }

.rail-progress{ padding:2px 2px 4px; }
.rail-progress .pct{ font-family:var(--font-mono); font-size:22px; color:#fff; font-weight:600; }
.rail-progress .lbl{ font-size:12px; color:rgba(255,255,255,.6); margin-top:2px;}
.barbg{ height:6px; border-radius:99px; background:rgba(255,255,255,.14); margin-top:10px; overflow:hidden; }
.barfill{ height:100%; border-radius:99px; background:linear-gradient(90deg,var(--blue-500),#f4b93f); transition:width .5s ease; }

.stepper{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; position:relative; }
.step{ position:relative; display:flex; gap:12px; padding:11px 8px; border-radius:10px; cursor:pointer; align-items:flex-start; }
.step:hover{ background:rgba(255,255,255,.07); }
.step.is-current{ background:rgba(226,134,31,.24); }
.step.is-locked{ cursor:not-allowed; opacity:.55; }
.step-line{ position:absolute; left:23px; top:38px; bottom:-6px; width:2px; background:rgba(255,255,255,.16); }
.step:last-child .step-line{ display:none; }
.step.is-passed .step-line{ background:var(--green-600); }
.node{
  width:30px;height:30px;border-radius:50%; flex:none; display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.28);
  font-family:var(--font-mono); font-size:12.5px; font-weight:600; color:#fff; z-index:1;
}
.step.is-passed .node{ background:var(--green-600); border-color:var(--green-600); }
.step.is-current .node{ border-color:var(--blue-500); box-shadow:0 0 0 3px rgba(226,134,31,.28); }
.node svg{ width:14px;height:14px; }
.step-meta .t{ font-size:13.5px; font-weight:600; color:#fff; margin-top:3px; }
.step-meta .s{ font-size:11.5px; color:rgba(255,255,255,.55); margin-top:1px; }
.step-meta .score{ font-family:var(--font-mono); font-size:11px; margin-top:3px; color:#f4b93f; }
.cert-node{ margin-top:2px; }
.rail-foot{ margin-top:auto; font-size:11px; color:rgba(255,255,255,.5); line-height:1.5; padding-top:10px; border-top:1px solid rgba(255,255,255,.12); }
.rail-mobile{ display:none; }

/* ---------- Main ---------- */
.main{ flex:1; min-width:0; padding:36px 44px 80px; }
.topline{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap; margin-bottom:26px; }
.eyebrow{ font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--gold-500); font-weight:700; }
.course-title{ font-size:15px; color:var(--muted); }

.mod-head{ display:flex; gap:16px; align-items:flex-start; margin-bottom:22px; }
.mod-icon{ width:52px;height:52px;border-radius:14px; flex:none; background:var(--blue-100); color:var(--blue-500); display:flex;align-items:center;justify-content:center; }
.mod-icon svg{ width:26px;height:26px; }
.mod-num{ font-family:var(--font-mono); color:var(--muted); font-size:12.5px; letter-spacing:.04em; }
.mod-title{ font-size:29px; font-weight:800; margin:2px 0 4px; letter-spacing:-.01em; }
.mod-sub{ color:var(--muted); font-size:15px; max-width:62ch; }

.section-label{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:700; margin:34px 0 14px; display:flex; align-items:center; gap:8px; }
.section-label::after{ content:""; flex:1; height:1px; background:var(--border); }

.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; }
.card{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px 18px; display:flex; flex-direction:column; gap:6px; }
.card .ct{ font-weight:700; font-size:14.5px; }
.card .cb{ font-size:13.6px; color:var(--muted); }
.card .cb b{ color:var(--text); font-weight:700; }

.tablewrap{ overflow-x:auto; border:1px solid var(--border); border-radius:12px; }
table{ width:100%; border-collapse:collapse; font-size:13.6px; min-width:480px; }
caption{ text-align:left; padding:12px 16px 0; font-size:12.5px; color:var(--muted); caption-side:top; }
thead th{ text-align:left; padding:11px 16px; background:var(--surface-2); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; border-bottom:1px solid var(--border); }
tbody td{ padding:11px 16px; border-bottom:1px solid var(--border); vertical-align:top; }
tbody tr:last-child td{ border-bottom:none; }
tbody tr:nth-child(odd){ background:color-mix(in srgb, var(--surface-2) 45%, transparent); }
td.tag{ font-family:var(--font-mono); font-weight:700; color:var(--navy-700); }
td.num{ font-variant-numeric: tabular-nums; }

/* ---------- Matching exercise ---------- */
.match-wrap{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:20px 22px; }
.match-instructions{ font-size:13.5px; color:var(--muted); margin-bottom:14px; }
.match-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:640px){ .match-grid{ grid-template-columns:1fr; } }
.match-col-label{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:8px; font-weight:700; }
.match-item{ display:block; width:100%; text-align:left; padding:11px 14px; margin-bottom:8px; border:1.5px solid var(--border); border-radius:10px; background:var(--surface); font-size:13.8px; cursor:pointer; color:var(--text); transition:border-color .15s, background .15s; }
.match-item.term{ font-family:var(--font-mono); font-weight:700; }
.match-item:hover:not(:disabled){ border-color:var(--blue-500); }
.match-item.selected{ border-color:var(--blue-500); background:var(--blue-100); }
.match-item.solved{ border-color:var(--green-600); background:var(--green-100); cursor:default; opacity:.85; }
.match-item.wrong{ border-color:var(--red-600); background:var(--red-100); animation:shake .32s; }
.match-item:disabled{ cursor:default; }
@keyframes shake{ 0%,100%{transform:translateX(0);} 25%{transform:translateX(-4px);} 75%{transform:translateX(4px);} }
.match-status{ margin-top:12px; font-size:13px; color:var(--muted); display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.match-status.done{ color:var(--green-600); font-weight:700; }
.btn-ghost{ border:1.5px solid var(--border); background:transparent; color:var(--text); padding:7px 13px; border-radius:8px; font-size:12.8px; cursor:pointer; }
.btn-ghost:hover{ border-color:var(--blue-500); color:var(--blue-500); }

/* ---------- Quiz ---------- */
.quiz-box{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:22px 24px 24px; }
.quiz-meta{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; flex-wrap:wrap; gap:8px;}
.quiz-meta .req{ font-size:12px; color:var(--muted); }
.quiz-meta .req b{ color:var(--gold-500); font-family:var(--font-mono); }
.qitem{ padding:20px 0; border-top:1px solid var(--border); }
.qitem:first-of-type{ border-top:none; padding-top:8px; }
.qtext{ font-weight:700; font-size:15px; margin-bottom:12px; }
.qtext .qn{ color:var(--muted); font-family:var(--font-mono); font-weight:700; margin-right:6px; }
.choices{ display:flex; flex-direction:column; gap:8px; }
.choice{ display:flex; align-items:center; gap:10px; text-align:left; border:1.5px solid var(--border); border-radius:10px; padding:11px 14px; background:var(--surface); cursor:pointer; font-size:13.9px; width:100%; }
.choice:hover:not(:disabled){ border-color:var(--blue-500); }
.choice .bullet{ width:19px;height:19px;border-radius:50%; border:1.5px solid var(--border); flex:none; display:flex; align-items:center; justify-content:center; font-size:10px; color:transparent; }
.choice.picked{ border-color:var(--blue-500); background:var(--blue-100); }
.choice.picked .bullet{ border-color:var(--blue-500); background:var(--blue-500); color:#fff; }
.choice.correct{ border-color:var(--green-600); background:var(--green-100); }
.choice.correct .bullet{ border-color:var(--green-600); background:var(--green-600); color:#fff; }
.choice.incorrect{ border-color:var(--red-600); background:var(--red-100); }
.choice.incorrect .bullet{ border-color:var(--red-600); background:var(--red-600); color:#fff; }
.choice:disabled{ cursor:default; }
.qexplain{ margin-top:10px; font-size:12.8px; color:var(--muted); background:var(--surface-2); border-left:3px solid var(--blue-500); padding:9px 12px; border-radius:0 8px 8px 0; display:none; }
.qexplain.show{ display:block; }

.quiz-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:8px; }
.btn{ border:none; background:var(--blue-500); color:#fff; padding:11px 20px; border-radius:9px; font-size:13.8px; font-weight:700; cursor:pointer; }
.btn:hover{ background:var(--navy-700); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn.secondary{ background:transparent; color:var(--text); border:1.5px solid var(--border); }
.btn.secondary:hover{ border-color:var(--blue-500); color:var(--blue-500); background:transparent; }

.result-banner{ margin-top:18px; border-radius:12px; padding:16px 18px; display:none; align-items:center; gap:14px; }
.result-banner.show{ display:flex; }
.result-banner.pass{ background:var(--green-100); border:1px solid var(--green-600); }
.result-banner.fail{ background:var(--red-100); border:1px solid var(--red-600); }
.result-score{ font-family:var(--font-mono); font-size:24px; font-weight:700; flex:none; }
.result-banner.pass .result-score{ color:var(--green-600); }
.result-banner.fail .result-score{ color:var(--red-600); }
.result-text b{ display:block; font-size:14px; margin-bottom:2px; }
.result-text span{ font-size:12.8px; color:var(--muted); }

.nav-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:36px; padding-top:20px; border-top:1px solid var(--border); flex-wrap:wrap; gap:12px; }
.nav-foot .hint{ font-size:12.5px; color:var(--muted); }

/* ---------- Certificate ---------- */
.cert-card{ background:linear-gradient(160deg, var(--navy-900), var(--navy-700)); color:#fff; border-radius:18px; padding:44px 40px; text-align:center; position:relative; overflow:hidden; }
.cert-card::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 0%, rgba(226,134,31,.3), transparent 55%); }
.cert-badge{ width:64px;height:64px; margin:0 auto 16px; border-radius:50%; background:rgba(226,134,31,.18); border:1.5px solid var(--blue-500); display:flex; align-items:center; justify-content:center; position:relative;}
.cert-badge svg{ width:30px;height:30px; color:#f4b93f; }
.cert-card h2{ font-size:26px; margin:0 0 6px; position:relative; font-weight:800; }
.cert-card p{ color:rgba(255,255,255,.75); font-size:14px; max-width:52ch; margin:0 auto 26px; position:relative; }
.cert-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; position:relative; text-align:left; }
.cert-item{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:10px; padding:12px 14px; }
.cert-item .t{ font-size:12.5px; color:rgba(255,255,255,.7); }
.cert-item .v{ font-family:var(--font-mono); font-size:19px; font-weight:700; margin-top:2px; color:#f4b93f; }

@media (max-width:900px){
  .rail{ display:none; }
  .rail-mobile{ display:block; position:sticky; top:0; z-index:5; background:var(--rail-bg); color:var(--rail-text); padding:14px 16px calc(14px + env(safe-area-inset-top,0px)) 16px; padding-top:calc(14px + env(safe-area-inset-top,0px)); }
  .rail-mobile .brand{ border:none; padding:0 0 10px; }
  .rail-mobile .rail-back{ margin-bottom:8px; }
  .rail-mobile .stepper{ flex-direction:row; overflow-x:auto; gap:6px; padding-bottom:2px; }
  .rail-mobile .step{ flex-direction:column; align-items:center; text-align:center; width:72px; flex:none; padding:8px 4px; }
  .rail-mobile .step-line{ display:none; }
  .rail-mobile .step-meta{ width:100%; }
  .rail-mobile .step-meta .s, .rail-mobile .step-meta .score{ display:none; }
  .rail-mobile .step-meta .t{ font-size:10px; line-height:1.2; white-space:normal; overflow-wrap:break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .main{ padding:22px 18px 60px; }
  .mod-title{ font-size:23px; }
}

/* ================= HUB / LANDING ================= */
.hub-header{ display:flex; align-items:center; gap:14px; padding:26px 44px; border-bottom:1px solid var(--border); }
.hub-header .brand-mark{ width:48px; height:48px; border-radius:10px; }
.hub-header .hk1{ font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.hub-header .hk2{ font-family:var(--font-display); font-size:19px; font-weight:800; }
.hub-wrap{ max-width:1100px; margin:0 auto; padding:0 44px 80px; }
.hub-hero{ padding:0; position:relative; border-radius:20px; overflow:hidden; margin-top:0; color:#fff; }
.hub-hero-inner{ background:linear-gradient(155deg, var(--navy-900), var(--navy-700)); padding:56px 48px; position:relative; }
.hub-hero-inner::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 90% 10%, rgba(226,134,31,.35), transparent 55%); }
.hub-hero .eyebrow{ color:#f4b93f; position:relative; }
.hub-hero h1{ font-size:36px; font-weight:800; margin:10px 0 12px; position:relative; max-width:18ch; }
.hub-hero p{ color:rgba(255,255,255,.78); font-size:15.5px; max-width:60ch; position:relative; }
.hub-hero-stats{ display:flex; gap:28px; margin-top:26px; flex-wrap:wrap; position:relative; }
.hub-hero-stats .st{ }
.hub-hero-stats .sv{ font-family:var(--font-mono); font-size:24px; font-weight:700; color:#fff; }
.hub-hero-stats .sl{ font-size:11.5px; color:rgba(255,255,255,.65); margin-top:2px; }

.level-section{ margin-top:44px; }
.level-title{ display:flex; align-items:baseline; gap:12px; margin-bottom:18px; }
.level-title h2{ font-size:21px; font-weight:800; margin:0; }
.level-title .count{ font-size:12.5px; color:var(--muted); font-family:var(--font-mono); }
.course-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.course-card{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:22px 22px 20px; display:flex; flex-direction:column; gap:10px; text-decoration:none; color:var(--text); transition:border-color .15s, transform .15s; overflow:hidden; position:relative; }
.course-card:hover{ border-color:var(--blue-500); transform:translateY(-2px); }
.course-card .cc-icon{ width:42px; height:42px; border-radius:11px; background:var(--blue-100); color:var(--blue-500); display:flex; align-items:center; justify-content:center; }
.course-card .cc-icon svg{ width:22px; height:22px; }
.course-card .cc-title{ font-weight:800; font-size:16px; margin-top:4px; }
.course-card .cc-desc{ font-size:13.3px; color:var(--muted); flex:1; }
.course-card .cc-meta{ font-size:11.5px; color:var(--gold-500); font-family:var(--font-mono); font-weight:700; display:flex; align-items:center; gap:6px; }
.course-card.photo{ padding:0; }
.course-card.photo img{ width:100%; height:150px; object-fit:cover; display:block; }
.course-card.photo .cc-body{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:8px; }
.hub-footer{ font-size:12.5px; color:var(--muted); padding-top:30px; margin-top:20px; border-top:1px solid var(--border); }
@media (max-width:640px){
  .hub-header, .hub-wrap{ padding-left:18px; padding-right:18px; }
  .hub-hero-inner{ padding:34px 22px; }
  .hub-hero h1{ font-size:27px; }
}

/* ================= FICHE TECHNIQUE ================= */
.ft-hero{ position:relative; border-radius:20px; overflow:hidden; margin-bottom:8px; }
.ft-hero img{ width:100%; height:280px; object-fit:cover; display:block; }
.ft-hero-overlay{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(10,30,26,.88), rgba(10,30,26,.15)); display:flex; flex-direction:column; justify-content:flex-end; padding:28px 32px; }
.ft-hero-overlay .eyebrow{ color:#f4b93f; }
.ft-hero-overlay h1{ color:#fff; font-size:30px; margin:8px 0 4px; font-weight:800; }
.ft-hero-overlay p{ color:rgba(255,255,255,.82); font-size:14px; max-width:60ch; margin:0; }

.stat-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin:22px 0; }
.stat-tile{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px 16px; }
.stat-tile .sv{ font-family:var(--font-mono); font-size:23px; font-weight:700; color:var(--gold-500); }
.stat-tile .sl{ font-size:12px; color:var(--muted); margin-top:2px; }

.service-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; }
.service-card{ background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.service-card img{ width:100%; height:170px; object-fit:cover; display:block; }
.service-card .sc-body{ padding:16px 18px 18px; }
.service-card .sc-title{ font-weight:800; font-size:15.5px; margin-bottom:6px; }
.service-card ul{ margin:8px 0 0; padding-left:18px; font-size:13px; color:var(--muted); }
.service-card ul li{ margin-bottom:3px; }

.legal-box{ background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:16px 20px; font-size:12.8px; color:var(--muted); display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px 20px; }
.legal-box b{ color:var(--text); }

.team-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }
.team-card{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:18px; text-align:center; }
.team-avatar{ width:56px; height:56px; border-radius:50%; background:var(--blue-100); color:var(--blue-500); display:flex; align-items:center; justify-content:center; margin:0 auto 10px; font-family:var(--font-display); font-weight:800; font-size:19px; }
.team-card .tn{ font-weight:700; font-size:14px; }
.team-card .tr{ font-size:12px; color:var(--muted); margin-top:2px; }

.partner-row{ display:flex; flex-wrap:wrap; gap:10px; }
.partner-pill{ background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:8px 16px; font-size:12.8px; color:var(--text); font-weight:600; }

.ft-foot{ font-size:12.5px; color:var(--muted); padding-top:30px; margin-top:36px; border-top:1px solid var(--border); }