/* =========================================================
   Adam Academy — papier, encre, filets fins.
   Texte : Schibsted Grotesk, une seule famille : la hiérarchie
   vient de la taille et du poids, pas de capitales espacées.
   Code : JetBrains Mono, réservée aux blocs de code.
   Pas de dégradé, pas d'ombre portée, pas de flou.
   ========================================================= */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
:root{
  --paper:#f4f5f7;
  --ink:#0d1117;
  --ink-soft:#4b5563;
  --ink-faint:#646c7a;
  --rule:#e3e5ea;
  --rule-strong:#cbd0d8;
  --surface:#ffffff;
  --accent:#2450e0;
  --accent-wash:#e9eeff;
  --on-accent:#ffffff;
  --danger:#a3342e;
  --danger-wash:#f9ecea;
  --warn:#b4762a;
  --radius:8px;
  --radius-lg:14px;
  --sans:'Schibsted Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --display:var(--sans);
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace; /* code uniquement */
  --ease:cubic-bezier(.2,.8,.3,1);
}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  transition:background .4s var(--ease),color .3s var(--ease);
}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hidden{display:none!important}
.screen{min-height:100vh}
.muted{color:var(--ink-soft)}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.035em;line-height:1.1}
h3{letter-spacing:-.02em}

.logo{font-family:var(--display);font-weight:700;font-size:23px;letter-spacing:-.035em;display:inline-flex;align-items:center;gap:9px}
.logo em{font-style:normal;font-weight:700;color:var(--accent)}
.logo-dot{width:8px;height:8px;border-radius:2px;background:var(--accent);display:inline-block;transform:translateY(-1px)}

.eyebrow{font-size:14px;font-weight:500;color:var(--ink-faint);margin:0 0 12px}
.lead{font-size:18px;line-height:1.6;color:var(--ink-soft);max-width:54ch}

.btn{border:1px solid var(--ink);background:var(--ink);color:var(--paper);border-radius:var(--radius);padding:12px 20px;font-size:15px;font-weight:600;line-height:1.2}
.btn:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn:disabled:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.primary{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.wide{width:100%}
.ghost-btn{border:1px solid var(--rule-strong);background:transparent;color:var(--ink);padding:9px 16px;border-radius:var(--radius);font-size:14px;font-weight:600}
.ghost-btn:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.link-btn{border:0;background:transparent;color:var(--ink-soft);padding:6px 0;font-size:14px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rule-strong)}
.link-btn:hover{color:var(--ink)}
.link-inline{border:0;background:none;padding:0;font:inherit;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.link-inline:hover{color:var(--accent)}

@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes nudge{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(3px)}50%{transform:translateX(-3px)}}
@keyframes spin{to{transform:rotate(360deg)}}
.anim,.view{animation:fade .22s var(--ease) both}
.stagger>*{animation:fade .3s var(--ease) both}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* =================== AUTH =================== */
.auth-screen{background:var(--paper);display:flex;flex-direction:column}
.auth-shell{flex:1;width:100%;max-width:1120px;margin:auto;padding:56px 32px 40px;display:grid;grid-template-columns:1.1fr .9fr;align-items:center}
.auth-copy{padding-right:72px}
.auth-copy .logo{margin-bottom:64px}
.auth-copy h1{font-size:54px;line-height:1.03;margin:0 0 22px;max-width:15ch}
.mini-proof{display:flex;flex-wrap:wrap;gap:6px 28px;margin-top:38px;padding-top:20px;border-top:1px solid var(--rule)}
.mini-proof span{font-size:14.5px;color:var(--ink-soft)}
.auth-card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-lg);padding:36px}
.auth-tabs{display:flex;gap:26px;border-bottom:1px solid var(--rule);margin:0 0 28px}
.auth-tab{border:0;background:transparent;padding:0 0 13px;color:var(--ink-faint);border-bottom:2px solid transparent;margin-bottom:-1px;font-size:15px;font-weight:600}
.auth-tab:hover{color:var(--ink)}
.auth-tab.active{color:var(--ink);border-color:var(--ink)}
.auth-card h2{font-size:28px;margin:0 0 6px}
.auth-card>div>p.muted{margin:0}
.auth-card label{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-top:20px}
.auth-card input{display:block;width:100%;margin-top:7px;padding:12px 14px;border:1px solid var(--rule-strong);border-radius:var(--radius);background:var(--paper);font-size:16px;font-weight:400}
.auth-card input:focus{outline:none;border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px var(--accent-wash)}
.auth-card input::placeholder{color:#9aa1ad}
.auth-card .btn{margin-top:26px}
.auth-card label.check{display:flex;gap:11px;align-items:flex-start;font-size:14px;font-weight:400;color:var(--ink-soft);line-height:1.5;margin-top:22px}
.auth-card label.check input{flex:none;width:18px;height:18px;margin:2px 0 0;padding:0;accent-color:var(--accent)}
.auth-card label.check input:focus{box-shadow:none}
.auth-card label.remember{margin-top:18px}
.auth-card label.check small{display:block;font-size:13px;color:var(--ink-faint);margin-top:2px;line-height:1.45}
.auth-links{display:flex;justify-content:flex-end;margin-top:6px}
.auth-links .link-btn{padding:4px 0}
.auth-back{margin-top:18px;display:block}
.notice{border:1px solid var(--rule);background:var(--paper);border-radius:var(--radius);padding:14px 16px;font-size:14.5px;line-height:1.55;color:var(--ink-soft);margin-top:22px}
.notice strong{color:var(--ink)}
.form-error{min-height:20px;color:var(--danger);font-size:14px;margin:12px 0 0}
.form-error.on{animation:nudge .35s var(--ease)}

.legal-foot{width:100%;max-width:1120px;margin:0 auto;padding:20px 32px 32px;display:flex;flex-wrap:wrap;gap:6px 24px;align-items:center;border-top:1px solid var(--rule);font-size:14px;color:var(--ink-faint)}
.legal-foot button{border:0;background:none;padding:2px 0;color:var(--ink-soft);font-size:14px}
.legal-foot button:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.legal-foot .sp{margin-left:auto}
.app-foot{margin-top:0}

.verification-card{max-width:620px;margin:auto;width:100%;padding:42px}
.verification-card h2{font-size:34px;margin:0 0 10px}
.verification-email{margin-top:20px;padding:14px 16px;border:1px solid var(--rule);background:var(--paper);font-weight:600;overflow-wrap:anywhere}
.verification-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.verification-actions .btn,.verification-actions .ghost-btn{margin-top:0}
@media(max-width:720px){.verification-card{padding:28px 22px}.verification-card h2{font-size:28px}.verification-actions{display:grid;grid-template-columns:1fr}.verification-actions button{width:100%}}

/* =================== ONBOARDING =================== */
.onboarding-wrap{max-width:1120px;margin:auto;padding:26px 32px 80px}
.simple-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:20px;border-bottom:1px solid var(--rule)}
.onboarding-intro{max-width:640px;margin:70px 0 40px}
.onboarding-intro h1{font-size:44px;margin:0 0 14px}
.onboarding-intro p:not(.eyebrow){color:var(--ink-soft);margin:0}
.path-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.path-card{position:relative;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-lg);padding:26px 24px 24px;text-align:left;cursor:pointer;transition:border-color .15s var(--ease)}
.path-card:hover{border-color:var(--ink-faint)}
.path-card[data-path="games"]{--pc:#6a3df0;--pcw:#efeaff}
.path-card[data-path="automation"]{--pc:#d4530b;--pcw:#fdeee4}
.path-card[data-path="data"]{--pc:#0a7f8a;--pcw:#e2f3f4}
.path-card[data-path="web"]{--pc:#c0267f;--pcw:#fbe8f2}
.path-card[data-path="cyber"]{--pc:#d8353d;--pcw:#fdeaeb}
.path-card[data-path="general"]{--pc:#2450e0;--pcw:#e9eeff}
.path-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:var(--pcw,var(--accent-wash));color:var(--pc,var(--accent));margin-bottom:22px}
.path-icon svg,.mobile-nav svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.path-icon svg{width:22px;height:22px}
.path-card h3{font-size:21px;margin:0 0 8px}
.path-card p{font-size:14.5px;line-height:1.55;color:var(--ink-soft);margin:0;min-height:66px}
.path-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.path-tags span{font-size:12.5px;padding:3px 10px;border:1px solid var(--rule);color:var(--ink-soft);border-radius:999px}
.path-meta{display:flex;gap:14px;font-size:13.5px;color:var(--ink-faint);margin-top:18px}
.select-path{margin-top:20px;width:100%;padding:11px;border:1px solid var(--ink);background:transparent;color:var(--ink);border-radius:var(--radius);font-size:14px;font-weight:600}
.select-path:hover{background:var(--ink);color:var(--paper)}

/* =================== TOPBAR =================== */
.topbar{height:64px;background:var(--paper);border-bottom:1px solid var(--rule);display:flex;align-items:center;padding:0 32px;position:sticky;top:0;z-index:20}
.topbar .logo{font-size:22px;margin-right:36px}
.topbar nav{display:flex;gap:2px}
.nav-btn{border:0;background:transparent;color:var(--ink-soft);padding:8px 14px;border-radius:999px;font-size:14.5px;font-weight:500}
.nav-btn:hover{color:var(--ink)}
.nav-btn.active{color:var(--ink);background:var(--rule)}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:16px}
.xp-chip{font-size:14px;font-weight:500;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.xp-chip b{color:var(--accent);font-weight:700}
.path-mini{border:1px solid var(--rule-strong);background:transparent;padding:6px 13px;border-radius:999px;font-size:13px;font-weight:500;color:var(--ink-soft)}
.path-mini:hover{border-color:var(--ink);color:var(--ink)}
.profile-menu{position:relative}
.avatar{width:34px;height:34px;border:0;border-radius:50%;background:var(--ink);color:var(--paper);font-size:14px;font-weight:700}
.avatar:hover{background:var(--accent);color:var(--on-accent)}
.profile-drop{position:absolute;right:0;top:46px;width:250px;background:var(--surface);border:1px solid var(--rule-strong);border-radius:var(--radius-lg);padding:16px;animation:fade .15s var(--ease)}
.profile-drop strong{display:block;font-size:15px;font-weight:600}
.profile-drop span{display:block;font-size:13px;color:var(--ink-faint);margin-top:2px;overflow-wrap:anywhere}
.profile-drop .link-btn{display:block;width:100%;text-align:left;margin-top:12px;padding:12px 0 0;border-top:1px solid var(--rule);text-decoration:none}
.profile-drop .link-btn+.link-btn{margin-top:0}
.profile-drop .link-btn:hover{color:var(--ink);text-decoration:underline}

/* =================== MISE EN PAGE =================== */
main{max-width:1120px;margin:auto;padding:48px 32px 64px}
.hero-dash{display:grid;grid-template-columns:1fr 320px;gap:48px;align-items:start;padding-bottom:36px;border-bottom:1px solid var(--rule);margin-bottom:8px}
.hero-dash h1{font-size:46px;margin:0 0 14px}
.hero-dash p{color:var(--ink-soft);margin:0;max-width:52ch}
.hero-dash .eyebrow{margin-bottom:12px}
.hero-progress{border-left:1px solid var(--rule);padding-left:28px}
.hero-progress .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.hero-progress b{font-family:var(--display);font-size:44px;line-height:1;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.progress-line{height:4px;border-radius:2px;background:var(--rule);margin-top:14px;overflow:hidden}
.progress-line span{display:block;height:100%;border-radius:2px;background:var(--accent);width:0;transition:width .8s var(--ease)}
.section-title{display:flex;align-items:baseline;gap:12px;font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:52px 0 18px}
.section-title small{font-size:14.5px;font-weight:400;letter-spacing:0;color:var(--ink-faint)}

.module-grid,.exercise-grid,.lesson-list,.stats-grid{display:grid;gap:12px}
.module-grid{grid-template-columns:repeat(4,1fr)}
.exercise-grid{grid-template-columns:repeat(3,1fr)}
.lesson-list{grid-template-columns:repeat(2,1fr)}
.stats-grid{grid-template-columns:repeat(4,1fr)}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-lg);transition:border-color .15s var(--ease)}
.card:hover{border-color:var(--rule-strong)}
.module-card{padding:22px}
.module-card .index{font-size:13.5px;font-weight:500;color:var(--ink-faint)}
.module-card h3{font-size:18px;margin:10px 0 8px}
.module-card p{font-size:14px;color:var(--ink-soft);margin:0 0 18px;min-height:44px;line-height:1.55}
.module-card.done{background:var(--accent-wash);border-color:var(--accent-wash)}
.module-card.done .index{color:var(--accent)}
.view>.panel{margin-top:26px}
.two-col{display:grid;grid-template-columns:1.3fr .7fr;gap:12px}
.panel{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-lg);padding:26px}
.panel strong{font-size:15px;font-weight:600;color:var(--ink);display:block;margin-bottom:10px}
.activity-row{display:flex;justify-content:space-between;gap:14px;border-bottom:1px solid var(--rule);padding:12px 0;font-size:14.5px}
.activity-row:last-child{border-bottom:0}
.activity-row span:last-child{color:var(--ink-faint);font-size:14px;white-space:nowrap;font-variant-numeric:tabular-nums}
.streak{display:flex;gap:4px;margin-top:16px}
.streak i{flex:1;height:26px;border-radius:4px;background:var(--rule)}
.streak i.on{background:var(--accent)}

/* =================== LISTES =================== */
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;padding-bottom:28px;border-bottom:1px solid var(--rule)}
.page-head h1{font-size:40px;margin:0 0 10px}
.page-head p{color:var(--ink-soft);margin:0;max-width:56ch;font-size:15.5px}
.lesson-list{margin-top:34px}
.lesson-card{padding:26px;display:flex;gap:20px}
.lesson-badge{flex:none;font-size:14px;font-weight:600;color:var(--ink-faint);padding-top:3px;font-variant-numeric:tabular-nums}
.lesson-card h3{margin:0 0 8px;font-size:20px}
.lesson-card p{color:var(--ink-soft);font-size:14.5px;margin:0 0 14px;line-height:1.6}
.chip-row{display:flex;align-items:center;gap:8px;margin-bottom:16px;font-size:13px;color:var(--ink-faint)}
.chip{border:1px solid var(--rule);padding:2px 10px;border-radius:999px;color:var(--ink-soft)}
.exercise-filters{display:flex;gap:4px;flex-wrap:wrap}
.filter{border:0;background:transparent;color:var(--ink-soft);padding:7px 14px;border-radius:999px;font-size:14.5px;font-weight:500}
.filter:hover{color:var(--ink)}
.filter.active{color:var(--ink);background:var(--rule)}
.exercise-grid{margin-top:34px}
.exercise-card{padding:24px;position:relative}
.exercise-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;font-size:13.5px;font-weight:500}
.exercise-type{color:var(--accent);font-weight:600}
.level{color:var(--ink-faint)}
.exercise-card h3{font-size:19px;margin:0 0 8px}
.exercise-card p{font-size:14px;color:var(--ink-soft);line-height:1.55;min-height:44px;margin:0 0 18px}
.exercise-card.done{background:var(--accent-wash);border-color:var(--accent-wash)}
.done-flag{position:absolute;right:24px;bottom:30px;font-size:13.5px;font-weight:600;color:var(--accent)}

/* =================== PROGRESSION =================== */
.stats-grid{margin-top:34px}
.stat{padding:24px}
.stat label{font-size:14px;font-weight:500;color:var(--ink-soft)}
.stat strong{font-family:var(--display);font-size:44px;font-weight:700;display:block;margin-top:8px;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.progress-row{display:grid;grid-template-columns:1fr 100px 20px;align-items:center;gap:16px;border-bottom:1px solid var(--rule);padding:13px 0}
.progress-row:last-child{border-bottom:0}
.progress-row b{font-weight:600;font-size:15px}
.mini-progress{height:4px;border-radius:2px;background:var(--rule);overflow:hidden}
.mini-progress span{display:block;height:100%;border-radius:2px;background:var(--accent);transition:width .7s var(--ease)}

/* =================== MODALES =================== */
.modal{position:fixed;inset:0;background:rgba(13,17,23,.45);display:grid;place-items:start center;z-index:50;overflow:auto;animation:fade .18s var(--ease)}
.modal-panel{background:var(--surface);border:0;border-radius:0;position:relative;min-height:100vh;animation:up .28s var(--ease) both}
.lesson-modal{width:min(760px,100%);padding:72px 64px 96px}
.exercise-modal{width:min(880px,100%);padding:72px 56px 96px}
.legal-modal{width:min(820px,100%);padding:64px 56px 96px}
.modal-close{position:fixed;top:18px;right:20px;width:38px;height:38px;border:1px solid var(--rule-strong);background:var(--surface);color:var(--ink-soft);font-size:20px;line-height:1;border-radius:50%;z-index:2}
.modal-close:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.lesson-content h2{font-size:44px;margin:0 0 18px;line-height:1.05}
.lesson-content h3{font-size:21px;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:48px 0 14px}
.lesson-content p,.lesson-content li{color:var(--ink-soft);line-height:1.75;font-size:16.5px}
.lesson-content>p:first-of-type{font-size:19px;color:var(--ink);line-height:1.55}
.lesson-content ul{padding-left:20px;margin:0}
.lesson-content li{margin-bottom:8px}
.lesson-steps{display:grid;border-top:1px solid var(--rule)}
.lesson-steps div{display:flex;gap:18px;align-items:baseline;border-bottom:1px solid var(--rule);padding:14px 0;font-size:15.5px;color:var(--ink-soft);line-height:1.6}
.lesson-steps b{font-size:14px;color:var(--ink-faint);font-weight:600;font-variant-numeric:tabular-nums}
.concept{border-left:3px solid var(--accent);padding:4px 0 4px 22px;margin:30px 0}
.concept strong{display:block;font-size:14px;font-weight:600;color:var(--accent);margin-bottom:6px}
.concept span{font-family:var(--display);font-weight:600;font-size:20px;line-height:1.4;letter-spacing:-.015em;color:var(--ink)}
.pitfall{border:1px solid var(--rule-strong);border-left:3px solid var(--warn);border-radius:var(--radius);padding:16px 20px;margin:32px 0 0;font-size:15px;line-height:1.7;color:var(--ink-soft)}
.pitfall strong{color:#8a5a1d;font-weight:700}
.lesson-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px;padding-top:26px;border-top:1px solid var(--rule)}
.sub-h{font-size:18px;font-weight:700;letter-spacing:-.015em;color:var(--ink);margin:30px 0 12px}

.code{background:#0d1117;color:#e6edf3;border-radius:var(--radius);padding:20px 22px;overflow:auto;font:13.5px/1.75 var(--mono);margin:0}
.code .cm{color:#7d8590}.code .kw{color:#ff7b72}.code .st{color:#a5d6ff}.code .fn{color:#d2a8ff}.code .nb{color:#79c0ff}

/* =================== EXERCICES =================== */
.exercise-modal h2{font-size:38px;margin:0 0 12px;line-height:1.06}
.exercise-modal>p.muted{font-size:16.5px;color:var(--ink-soft);line-height:1.6}
.qcm-options{display:grid;gap:10px;margin:32px 0 0}
.qcm-option{padding:15px 18px;border:1px solid var(--rule-strong);border-radius:var(--radius);background:var(--surface);text-align:left;font-size:16px;display:flex;gap:16px;align-items:baseline;color:var(--ink)}
.qcm-option b{font-size:14px;color:var(--ink-faint);font-weight:600;width:14px;flex:none}
.qcm-option:hover:not(:disabled){border-color:var(--ink)}
.qcm-option:disabled{cursor:default}
.qcm-option.correct{background:var(--accent-wash);border-color:var(--accent)}
.qcm-option.correct b{color:var(--accent)}
.qcm-option.wrong{background:var(--danger-wash);border-color:var(--danger);animation:nudge .32s var(--ease)}
.feedback{font-size:15.5px;line-height:1.7;padding:16px 20px;margin-top:22px;border-radius:var(--radius);background:var(--accent-wash);color:var(--ink-soft);animation:fade .25s var(--ease)}
.feedback.no{background:var(--danger-wash)}
.feedback strong{color:var(--ink)}
.code-editor-wrap{border-radius:var(--radius);overflow:hidden;margin-top:30px;background:#0d1117}
.editor-head{color:#7d8590;padding:12px 16px;font-family:var(--mono);font-size:12px;display:flex;align-items:center;gap:7px;border-bottom:1px solid #21262d}
.editor-head i{display:none}
.code-editor{display:block;width:100%;min-height:300px;border:0;resize:vertical;padding:20px 22px;background:#0d1117;color:#e6edf3;font:13.5px/1.75 var(--mono);tab-size:4}
.code-editor:focus{outline:none}
.test-output{margin-top:14px;background:var(--paper);color:var(--ink-soft);border:1px solid var(--rule);border-left:3px solid var(--rule-strong);border-radius:var(--radius);padding:16px 18px;white-space:pre-wrap;font:13px/1.75 var(--mono);min-height:52px}
.exercise-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.exercise-actions button{border:1px solid var(--rule-strong);background:transparent;padding:10px 16px;border-radius:var(--radius);font-size:14px;font-weight:600}
.exercise-actions button:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.exercise-actions .primary{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.exercise-actions .primary:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.hint{margin-top:22px;color:var(--ink-soft);font-size:15px;line-height:1.7}
.hint strong{color:var(--ink)}
.hint .code{margin-top:10px}
.spinner{display:inline-block;width:11px;height:11px;border:1.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite;margin-right:8px;vertical-align:-1px}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(26px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--paper);padding:12px 22px;border-radius:999px;font-size:14px;font-weight:500;z-index:80;max-width:calc(100vw - 32px);text-align:center;animation:up .25s var(--ease)}

/* =================== THÈMES PAR PARCOURS =================== */
body[data-theme="games"]{--accent:#6a3df0;--accent-wash:#efeaff;--paper:#f5f4f8}
body[data-theme="automation"]{--accent:#d4530b;--accent-wash:#fdeee4;--paper:#f7f5f4}
body[data-theme="data"]{--accent:#0a7f8a;--accent-wash:#e2f3f4;--paper:#f2f6f7}
body[data-theme="web"]{--accent:#c0267f;--accent-wash:#fbe8f2;--paper:#f7f4f6}
body[data-theme="general"]{--accent:#2450e0;--accent-wash:#e9eeff;--paper:#f4f5f7}
body[data-theme="cyber"]{
  --paper:#0b0d12;--ink:#e6e9ef;--ink-soft:#98a1b0;--ink-faint:#7b8494;
  --rule:#1c212b;--rule-strong:#2b3240;--surface:#12151c;
  --accent:#ef4d55;--accent-wash:#1f1215;--danger-wash:#2a1a19;--danger:#f0716f;
}
body[data-theme="cyber"] .code,body[data-theme="cyber"] .code-editor,body[data-theme="cyber"] .code-editor-wrap{background:#06080c}
body[data-theme="cyber"] .test-output{background:#06080c}
body[data-theme="cyber"] .pitfall{border-left-color:#c08a45}
body[data-theme="cyber"] .pitfall strong{color:#d8a869}
body[data-theme="cyber"] .modal{background:rgba(0,0,0,.6)}
body[data-theme="cyber"] .modal-close{background:var(--surface)}
body[data-theme="cyber"] .auth-card input::placeholder{color:#5b6472}

/* =================== OFFRES =================== */
.plan-chip{font-size:12.5px;font-weight:600;border:1px solid var(--rule-strong);padding:4px 11px;border-radius:999px;color:var(--ink-soft)}
.plan-chip.premium{border-color:var(--accent);color:var(--accent)}
.plan-chip.vip{border-color:#b4762a;color:#8a5a1d}
body[data-theme="cyber"] .plan-chip.vip,body[data-theme="cyber"] .tag.vip{color:#d8a869;border-color:#c08a45}
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}
.plan{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-lg);padding:30px 26px;display:flex;flex-direction:column}
.plan.current{background:var(--accent-wash);border-color:var(--accent-wash)}
.plan-top{display:flex;align-items:baseline;justify-content:space-between;font-size:14px;font-weight:500;color:var(--ink-faint)}
.plan h3{font-size:28px;margin:14px 0 6px}
.plan-pricing{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0 18px}
.plan-price-box{border:1px solid var(--rule);border-radius:12px;padding:11px 12px;background:var(--paper)}
.plan-price-label{display:block;font-size:11.5px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:4px}
.plan-price-value{display:block;font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.plan-price-note{display:block;font-size:11.5px;color:var(--ink-faint);margin-top:2px}
.plan .plan-baseline{font-size:14.5px;color:var(--ink-soft);line-height:1.6;margin:0 0 20px;min-height:62px}
.plan ul{list-style:none;padding:0;margin:0 0 24px;border-top:1px solid var(--rule)}
.plan li{font-size:14px;color:var(--ink-soft);padding:10px 0;border-bottom:1px solid var(--rule);display:flex;gap:10px;align-items:baseline}
.plan li em{font-style:normal;font-size:12.5px;font-weight:600;color:var(--accent)}
.plan .btn,.plan .ghost-btn{margin-top:auto;width:100%;text-align:center}
.plan-state{margin-top:auto;font-size:14px;font-weight:600;color:var(--accent);border-top:1px solid var(--rule);padding-top:16px}
.offer-table{margin-top:46px;border-top:1px solid var(--rule)}
.offer-row{display:grid;grid-template-columns:1fr 90px 90px 90px;align-items:center;gap:8px;border-bottom:1px solid var(--rule);padding:12px 0;font-size:14.5px}
.offer-row.head{font-size:13.5px;font-weight:600;color:var(--ink-faint);position:sticky;top:64px;background:var(--paper);z-index:5}
.offer-row.group{font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--ink);border-bottom:1px solid var(--rule-strong);padding-top:28px}
.offer-row span:not(:first-child){text-align:center;font-size:14px;color:var(--ink-faint)}
.offer-row span.yes{color:var(--accent)}
.offer-row .col-on{color:var(--ink)}
.locked{border:1px solid var(--rule);border-radius:var(--radius-lg);padding:20px 24px;margin-top:26px;display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--surface)}
.locked p{margin:6px 0 0;font-size:14.5px;color:var(--ink-soft);max-width:60ch}
.locked .eyebrow{margin:0}
@media(max-width:1000px){.plan-grid{grid-template-columns:1fr}}
@media(max-width:720px){
  .offer-row{grid-template-columns:1fr 46px 46px 46px;font-size:13.5px;gap:4px}.offer-row.head{top:0}
  .plan-pricing{grid-template-columns:1fr 1fr;gap:8px}
  .plan-price-value{font-size:18px}
}

/* =================== RESPONSIVE =================== */
@media(max-width:1000px){
  .auth-shell{grid-template-columns:1fr;gap:44px;padding:40px 24px}
  .auth-copy{padding-right:0}
  .auth-copy .logo{margin-bottom:40px}
  .auth-copy h1{font-size:44px}
  .path-grid,.module-grid,.exercise-grid,.stats-grid{grid-template-columns:repeat(2,1fr)}
  .hero-dash{grid-template-columns:1fr;gap:30px}
  .hero-progress{border-left:0;border-top:1px solid var(--rule);padding:22px 0 0}
  .two-col{grid-template-columns:1fr}
  .lesson-modal,.exercise-modal,.legal-modal{padding:60px 36px 80px}
  .legal-foot{padding:20px 24px 28px}
}
@media(max-width:720px){
  body{font-size:15.5px}
  .topbar{padding:0 18px}
  .topbar nav{display:none}
  .path-grid,.lesson-list,.exercise-grid,.module-grid,.stats-grid{grid-template-columns:1fr}
  main{padding:30px 18px 48px}
  .onboarding-wrap{padding:22px 18px 80px}
  .auth-shell{padding:32px 18px}
  .auth-card{padding:26px 22px}
  .auth-copy h1{font-size:36px}
  .onboarding-intro{margin-top:44px}
  .onboarding-intro h1{font-size:32px}
  .hero-dash h1{font-size:34px}
  .page-head{display:block}
  .page-head h1{font-size:31px}
  .exercise-filters{margin-top:18px}
  .lesson-modal,.exercise-modal,.legal-modal{padding:60px 20px 90px}
  .lesson-content h2{font-size:31px}
  .exercise-modal h2{font-size:28px}
  .path-mini,.xp-chip{display:none}
  .mobile-nav{display:flex!important}
  .legal-foot{padding:18px 18px 28px}
  .app-foot{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
}
.mobile-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:30;background:var(--paper);border-top:1px solid var(--rule);padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px))}
.mobile-nav button{flex:1;border:0;background:transparent;color:var(--ink-faint);font-size:11px;font-weight:500;padding:8px 2px 6px;display:grid;gap:3px;justify-items:center}
.mobile-nav svg{width:22px;height:22px}
.mobile-nav button.active{color:var(--ink)}

/* =========================================================
   EXTENSIONS PREMIUM & VIP — mêmes filets, même papier
   ========================================================= */
.tag{display:inline-block;font-size:12.5px;font-weight:600;border:1px solid var(--rule-strong);padding:2px 10px;border-radius:999px;color:var(--ink-soft);vertical-align:middle}
.tag.premium{border-color:var(--accent);color:var(--accent)}
.tag.vip{border-color:#b4762a;color:#8a5a1d}
.mono-s{font-size:13.5px;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.muted-s{font-size:13.5px;color:var(--ink-faint);margin:8px 0 0}
.unit{font-size:14px;font-weight:400;letter-spacing:0;color:var(--ink-faint)}
.plan-state.dim{color:var(--ink-faint)}
.is-locked{opacity:.62}
.gate{border:1px solid var(--rule);border-radius:var(--radius-lg);background:var(--surface);padding:28px 30px;margin:18px 0;max-width:640px}
.gate h2{font-size:26px;margin:0 0 10px}
.gate p{color:var(--ink-soft);margin:0 0 14px}
.gate ul{margin:0 0 20px;padding-left:18px;color:var(--ink-soft);font-size:15px}
.gate li{margin-bottom:6px}

.key-panel{display:flex;flex-wrap:wrap;gap:20px 34px;align-items:center;justify-content:space-between;border:1px solid var(--rule);border-radius:var(--radius-lg);background:var(--surface);padding:24px 26px;margin-top:22px}
.key-row{display:flex;gap:10px;flex-wrap:wrap}
.key-row input{width:280px;max-width:100%;border:1px solid var(--rule-strong);background:var(--paper);border-radius:var(--radius);padding:11px 14px;font:14px var(--mono);letter-spacing:.06em}
.key-row input:focus{outline:none;border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px var(--accent-wash)}
.key-msg{flex-basis:100%;margin:0;font-size:14px;color:var(--ink-soft);min-height:1em}
.key-msg.ko{color:var(--danger)}
.key-msg.ok{color:var(--accent)}

.tabs{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--rule);margin-top:26px}
.tab{border:0;background:transparent;padding:11px 16px;font-size:14.5px;font-weight:500;color:var(--ink-soft);border-bottom:2px solid transparent;margin-bottom:-1px}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--ink);border-bottom-color:var(--ink)}
.tab-body{padding-top:26px}

.panel.dash-tile{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:14px}
.panel strong.tile-title{font-family:var(--display);font-size:22px;letter-spacing:-.02em;color:var(--ink);margin:0;font-weight:600}

.heat{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:14px}
.heat i{aspect-ratio:1;border-radius:3px;background:var(--rule);display:block}
.heat i[style]{background:var(--accent);opacity:var(--o)}
.heat i.fut{background:transparent;border:1px dashed var(--rule)}
.bars{display:flex;align-items:flex-end;gap:5px;height:110px;margin-top:14px}
.bars div{flex:1;height:100%;display:flex;align-items:flex-end;border-bottom:1px solid var(--rule-strong)}
.bars span{display:block;width:100%;background:var(--accent);min-height:2px;border-radius:3px 3px 0 0}

.cert-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.cert-card{padding:22px;display:grid;gap:12px;align-content:start}
.cert-top{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--display);font-size:21px;font-weight:600;letter-spacing:-.02em}
.cert-top b{font-size:13.5px;font-weight:600;letter-spacing:0;color:var(--ink-faint)}
.cert-card.ready .cert-top b{color:var(--accent)}
.cert-card button:disabled{opacity:.5;cursor:not-allowed}
#certWrap{margin-top:18px;border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden}

.project-grid,.challenge-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.project-card,.challenge-card{padding:26px;display:grid;gap:12px;align-content:start}
.project-card h3,.challenge-card h3{font-size:22px;margin:0}
.project-card p,.challenge-card p{margin:0;color:var(--ink-soft);font-size:14.5px}
.project-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.proj-list{margin:0;padding-left:20px;color:var(--ink-soft);font-size:14.5px}
.proj-list li.done{color:var(--accent);text-decoration:line-through;text-decoration-color:var(--rule-strong)}
.proj-steps{display:grid;margin:22px 0}
.proj-steps>div{display:flex;gap:12px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--rule);color:var(--ink-faint);font-size:15px}
.proj-steps b{font-size:13.5px;width:18px;flex:none;font-weight:600;font-variant-numeric:tabular-nums}
.proj-steps .cur{color:var(--ink)}
.proj-steps .done{color:var(--accent)}
.challenge-card.done{background:var(--accent-wash);border-color:var(--accent-wash)}

.coach-hero{border:1px solid var(--rule);border-radius:var(--radius-lg);background:var(--surface);padding:26px 30px}
.coach-say{font-family:var(--display);font-size:24px;font-weight:600;line-height:1.3;letter-spacing:-.02em;margin:0}
.goal-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px}
.session{display:grid;gap:12px;margin-top:14px}
.session-item{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:20px 24px}
.level-hero{display:flex;gap:36px;flex-wrap:wrap;align-items:center;justify-content:space-between;border:1px solid var(--rule);border-radius:var(--radius-lg);background:var(--surface);padding:28px 32px}
.level-num{font-family:var(--display);font-size:68px;font-weight:700;line-height:1;margin:0;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.level-label{font-size:15px;font-weight:600;color:var(--accent);margin:8px 0 0}
.level-facts{display:grid;gap:10px;min-width:240px}
.level-facts div{display:flex;justify-content:space-between;gap:24px;border-bottom:1px solid var(--rule);padding-bottom:8px;font-size:14.5px;color:var(--ink-soft)}
.level-facts b{color:var(--ink);font-weight:600;font-size:14px;font-variant-numeric:tabular-nums}
.rec-list{margin:0;padding-left:18px;color:var(--ink-soft);font-size:15px;line-height:1.7}
.route{display:grid;gap:12px;margin-top:18px}
.route-step{display:flex;gap:18px;align-items:center;padding:20px 24px}
.route-step>div:not(.route-n){flex:1;min-width:0}
.route-n{flex:none;width:32px;height:32px;border:1px solid var(--rule-strong);border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:600;color:var(--ink-faint)}
.route-step.done{opacity:.75}
.route-step.done .route-n{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

.pg-tabs{display:flex;flex-wrap:wrap;border:1px solid var(--rule);border-bottom:0;border-radius:var(--radius) var(--radius) 0 0;overflow:hidden;background:var(--surface)}
.pg-tab{border:0;border-right:1px solid var(--rule);background:transparent;padding:9px 14px;font:13px var(--mono);color:var(--ink-soft)}
.pg-tab.active{background:#0d1117;color:#e6edf3}
.pg-tab.add{color:var(--accent)}
.pg-wrap{margin-top:0}
.pg-editor{min-height:340px}

.test-output.ok{border-left-color:var(--accent);color:var(--accent)}
.test-output.ko{border-left-color:var(--danger);color:var(--danger)}
.prof{margin-top:22px;border:1px solid var(--rule);border-radius:var(--radius-lg);background:var(--surface);padding:20px 24px;font-size:15px;line-height:1.7;color:var(--ink-soft)}
.prof p{margin:8px 0}
.prof-head{font-size:14px;font-weight:600;color:var(--ink);display:flex;justify-content:space-between;gap:12px}
.prof-head b{color:var(--accent);font-weight:600}
.rv{display:flex;gap:10px;margin:8px 0}
.rv span{flex:none;width:16px;color:var(--ink-faint)}
.rv.good span{color:var(--accent)}
.rv.warn span{color:var(--warn)}
.hint-step{border-left:3px solid var(--rule-strong);padding:2px 0 2px 16px;margin:14px 0}
.hint-step em{display:block;font-style:normal;font-size:13.5px;font-weight:600;color:var(--ink-faint);margin-bottom:4px}
.upsell{font-size:14.5px;color:var(--ink-soft);margin:18px 0 0}
.next-step{margin-top:22px}

.tutor-fab{position:fixed;right:22px;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:60;border:0;background:var(--ink);color:var(--paper);border-radius:999px;padding:12px 20px;font-size:14px;font-weight:600}
.tutor-fab:hover{background:var(--accent);color:var(--on-accent)}
.tutor{position:fixed;right:22px;bottom:calc(74px + env(safe-area-inset-bottom,0px));z-index:60;width:380px;max-width:calc(100vw - 24px);height:min(560px,calc(100vh - 110px));display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--rule-strong);border-radius:var(--radius-lg);overflow:hidden}
.tutor-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--rule)}
.tutor-head strong{font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:-.02em;display:block;line-height:1.1}
.tutor-head span{font-size:13px;color:var(--ink-faint)}
.tutor-x{border:0;background:transparent;font-size:22px;color:var(--ink-soft);line-height:1}
.tutor-log{flex:1;overflow:auto;padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.msg{max-width:92%;font-size:15px;line-height:1.65;color:var(--ink-soft)}
.msg p{margin:0 0 8px}
.msg p:last-child{margin-bottom:0}
.msg.user{align-self:flex-end;background:var(--ink);color:var(--paper);padding:9px 14px;border-radius:14px 14px 4px 14px}
.msg.bot{align-self:flex-start;border-left:3px solid var(--accent);padding-left:12px}
.msg .code{font-size:12.5px;overflow:auto}
.tutor-ol,.tutor-ul{margin:8px 0;padding-left:20px}
.chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 10px}
.chip-btn{border:1px solid var(--rule-strong);background:transparent;border-radius:999px;padding:5px 12px;font-size:13px;color:var(--ink-soft)}
.chip-btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tutor-input{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--rule)}
.tutor-input input{flex:1;min-width:0;border:1px solid var(--rule-strong);background:var(--paper);border-radius:var(--radius);padding:9px 12px;font-size:15px}
.tutor-input input:focus{outline:none;border-color:var(--accent)}
.tutor-input .btn{padding:9px 16px;font-size:14px}
@media(max-width:720px){
  .project-grid,.challenge-grid{grid-template-columns:1fr}
  .tutor-fab{bottom:calc(74px + env(safe-area-inset-bottom,0px))}
  .tutor{left:8px;right:8px;width:auto;max-width:none;bottom:calc(126px + env(safe-area-inset-bottom,0px));height:min(62vh,520px)}
  .level-num{font-size:56px}
}

/* champs mis en avant dans les cartes « Premium » (styles inline existants) */
.panel>div>strong[style]{font-family:var(--display);color:var(--ink);font-size:19px!important;font-weight:600;letter-spacing:-.015em}

/* =================== INFORMATIONS LÉGALES =================== */
.legal-modal .tabs{margin:0 0 30px;border-bottom:1px solid var(--rule);overflow-x:auto;flex-wrap:nowrap}
.legal-modal .tab{white-space:nowrap;padding-left:0;padding-right:0;margin-right:22px}
.legal h2{font-size:40px;margin:0 0 8px}
.legal .updated{color:var(--ink-faint);font-size:14.5px;margin:0 0 28px}
.legal h3{font-size:20px;letter-spacing:-.02em;margin:40px 0 10px}
.legal p,.legal li{font-size:16px;line-height:1.75;color:var(--ink-soft);max-width:70ch}
.legal p{margin:0 0 12px}
.legal ul{padding-left:20px;margin:8px 0 14px}
.legal li{margin-bottom:6px}
.legal strong{color:var(--ink);font-weight:600}
.legal a{color:var(--ink);text-underline-offset:3px}
.legal a:hover{color:var(--accent)}
.legal .summary{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);padding:18px 22px;margin:0 0 8px}
.legal .summary p{margin:0 0 6px;color:var(--ink)}
.legal .summary ul{margin:0}
.legal .summary li{color:var(--ink)}
.table-wrap{overflow-x:auto;margin:14px 0 6px;border:1px solid var(--rule);border-radius:var(--radius)}
.legal table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px}
.legal th{text-align:left;font-weight:600;color:var(--ink);background:var(--paper);padding:11px 14px;border-bottom:1px solid var(--rule)}
.legal td{vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--rule);color:var(--ink-soft);line-height:1.55}
.legal tr:last-child td{border-bottom:0}
.legal td:first-child{color:var(--ink);font-weight:500;width:28%}
.todo{background:#fff1b8;color:#5a4300;padding:0 5px;border-radius:4px;font-weight:500}

.consent-bar{position:fixed;left:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:70;max-width:min(560px,calc(100vw - 36px));display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;background:var(--ink);color:var(--paper);border-radius:var(--radius-lg);padding:16px 20px;font-size:14.5px;line-height:1.5;animation:up .3s var(--ease)}
.consent-bar p{margin:0;flex:1 1 260px}
.consent-bar .actions{display:flex;gap:16px;align-items:center}
.consent-bar .link-btn{color:inherit;opacity:.8;text-decoration-color:currentColor;font-size:14.5px}
.consent-bar .link-btn:hover{opacity:1;color:inherit}
.consent-bar .btn{background:var(--paper);color:var(--ink);border-color:var(--paper);padding:9px 16px;font-size:14px}
.consent-bar .btn:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
@media(max-width:720px){.consent-bar{bottom:calc(76px + env(safe-area-inset-bottom,0px))}}

/* =================== NOUVELLE IDENTITÉ VISUELLE ===================
   Direction : plateforme d'apprentissage, plus éditoriale et moins
   "interface IA". Palette papier + vert bibliothèque + orange signal.
   La logique JavaScript et la structure HTML restent inchangées.
   ================================================================ */
:root{
  --paper:#f7f3ea;
  --ink:#18211f;
  --ink-soft:#58625d;
  --ink-faint:#7a827d;
  --rule:#ded9cf;
  --rule-strong:#c7c0b4;
  --surface:#fffdf8;
  --accent:#176b57;
  --accent-wash:#e7f2ed;
  --on-accent:#ffffff;
  --danger:#a73b32;
  --danger-wash:#f8e9e5;
  --warn:#a56c22;
  --radius:6px;
  --radius-lg:10px;
  --display:var(--sans);
  --sans:'Source Sans 3',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
body{
  background:var(--paper);
  color:var(--ink);
}
.logo em{color:var(--accent)}
.logo-dot{background:#db7b2e;border-radius:50%;width:9px;height:9px}
.eyebrow{color:#6f776f}
.lead{color:#4d5953}

.btn{
  background:#1d2925;
  border-color:#1d2925;
  color:#fffdf8;
  border-radius:5px;
  box-shadow:0 2px 0 rgba(24,33,31,.12);
}
.btn:hover{background:var(--accent);border-color:var(--accent)}
.primary{background:var(--accent);border-color:var(--accent)}
.primary:hover{background:#125543;border-color:#125543}
.ghost-btn{
  border-color:#bdb6aa;
  background:#fffdf8;
  border-radius:5px;
}
.ghost-btn:hover{background:#1d2925;border-color:#1d2925}

.auth-shell{max-width:1160px;grid-template-columns:1.06fr .94fr;gap:48px}
.auth-copy{padding-right:24px;position:relative}
.auth-copy:before{
  content:"PY / LEARN / BUILD";
  display:inline-block;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.16em;
  color:#a56c22;
  border-left:3px solid #db7b2e;
  padding-left:10px;
  margin-bottom:26px;
}
.auth-copy .logo{margin-bottom:34px}
.auth-copy h1{font-size:58px;letter-spacing:-.05em}
.auth-card{
  background:var(--surface);
  border:1px solid #d7d0c3;
  border-radius:12px;
  box-shadow:0 12px 30px rgba(52,45,35,.08);
  padding:38px;
}
.auth-card input{
  background:#fbf8f1;
  border-color:#cfc7ba;
}
.auth-card input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #dfeee8}
.notice{background:#fbf8f1;border-color:#d8d0c2}

.topbar{
  height:68px;
  background:rgba(247,243,234,.96);
  border-bottom:1px solid #d8d1c5;
}
.topbar .logo{margin-right:28px}
.nav-btn{
  border-radius:5px;
  padding:8px 13px;
}
.nav-btn:hover{background:#ece7dc;color:var(--ink)}
.nav-btn.active{background:#e5eee9;color:#175946}
.path-mini{border-color:#bbb3a5;border-radius:5px;background:#fffaf2}
.avatar{background:#1d2925;color:#fffdf8}
.avatar:hover{background:#db7b2e}
.profile-drop{
  border-color:#cfc7ba;
  border-radius:9px;
  box-shadow:0 10px 24px rgba(52,45,35,.12);
}

main{max-width:1160px;padding-top:42px}
.hero-dash{
  background:#fbf8f1;
  border:1px solid #d8d0c3;
  border-bottom:3px solid #176b57;
  border-radius:10px;
  padding:30px 32px 28px;
  margin-bottom:32px;
  gap:44px;
}
.hero-dash h1{font-size:48px}
.hero-progress{border-left:1px solid #d8d0c3}
.progress-line{height:7px;background:#e1ddd4;border-radius:3px}
.progress-line span{background:#db7b2e;border-radius:3px}
.section-title{
  color:#47524d;
  margin-top:42px;
  text-transform:none;
  letter-spacing:-.01em;
}

.card,.panel{
  background:var(--surface);
  border-color:#d8d0c3;
  box-shadow:0 3px 10px rgba(52,45,35,.035);
}
.card:hover{border-color:#b9b09f;background:#fffdf8}
.module-card{border-top:3px solid #d9d2c6}
.module-card:nth-child(4n+1){border-top-color:#176b57}
.module-card:nth-child(4n+2){border-top-color:#db7b2e}
.module-card:nth-child(4n+3){border-top-color:#5e72a9}
.module-card:nth-child(4n){border-top-color:#a65a68}
.module-card.done{background:#eaf3ee;border-color:#c9ddd4}
.module-card.done .index,.exercise-type{color:var(--accent)}

.path-grid{gap:16px}
.path-card{
  border-color:#d6cec1;
  border-radius:10px;
  box-shadow:0 3px 8px rgba(52,45,35,.035);
  overflow:hidden;
}
.path-card:hover{border-color:#aaa092;transform:translateY(-1px)}
.path-icon{border-radius:8px}
.path-tags span{background:#fbf8f1;border-color:#d8d0c3}
.select-path{border-color:#1d2925;border-radius:5px}

.page-head{
  border-bottom:0;
  padding:0 0 22px;
  position:relative;
}
.page-head:after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:64px;
  height:3px;
  background:#db7b2e;
}
.lesson-list,.exercise-grid,.stats-grid,.module-grid{gap:14px}
.lesson-card,.exercise-card,.stat{box-shadow:0 3px 10px rgba(52,45,35,.03)}
.lesson-card{border-left:4px solid #176b57}
.exercise-card{border-top:3px solid #cfc7ba}
.exercise-card.done{background:#eaf3ee;border-color:#c9ddd4}
.done-flag{color:var(--accent)}
.streak i.on{background:var(--accent)}
.mini-progress{background:#e2ddd4}
.mini-progress span{background:#db7b2e}

/* panneaux Premium/VIP : couleurs franches, moins "AI SaaS" */
.plan{background:#fffdf8;border-color:#d6cec1!important;box-shadow:0 3px 10px rgba(52,45,35,.035)}
.plan.current{border-top:4px solid var(--accent)!important}
.tag.premium{background:#fff0df!important;color:#995d18!important;border-color:#efcfaa!important}
.tag.vip{background:#e9e8f7!important;color:#56528a!important;border-color:#cbc9e8!important}
.gate{background:#fbf8f1!important;border:1px solid #d8d0c3!important;border-left:4px solid #db7b2e!important;border-radius:8px!important}

/* onglets : vrais boutons de navigation, pas des pills */
.tabs{border-bottom:1px solid #d8d0c3!important;gap:18px!important}
.tab{border-radius:4px!important}
.tab.active{color:var(--accent)!important;box-shadow:inset 0 -3px 0 var(--accent)!important}

.modal{background:rgba(36,32,27,.52)}
.modal-panel{
  background:var(--surface);
  box-shadow:0 18px 50px rgba(34,30,24,.16);
}
.modal-close{border-radius:6px}

.tutor{box-shadow:0 16px 40px rgba(34,30,24,.18);border-color:#cfc7ba}
.tutor-head{background:#fbf8f1}
.msg.bot{border-left-color:var(--accent)}
.msg.user{background:#1d2925}
.chip-btn{border-color:#c8c0b4;border-radius:5px;background:#fffdf8}
.chip-btn:hover{background:var(--accent);border-color:var(--accent)}

.legal .summary{background:#fbf8f1;border-color:#d8d0c3}
.legal th{background:#f0ece3}
.consent-bar{background:#1d2925;border-radius:8px;box-shadow:0 10px 28px rgba(34,30,24,.2)}

@media(max-width:900px){
  .auth-shell{grid-template-columns:1fr;gap:28px;padding-top:34px}
  .auth-copy{padding-right:0}
  .auth-copy .logo{margin-bottom:24px}
  .auth-copy h1{font-size:46px}
  .topbar{padding:0 18px}
  .topbar .logo{margin-right:12px}
  main{padding-left:20px;padding-right:20px}
}
@media(max-width:720px){
  .auth-copy h1{font-size:40px}
  .auth-card{padding:26px 22px}
  .hero-dash{padding:24px 20px;grid-template-columns:1fr;gap:24px}
  .hero-progress{border-left:0;border-top:1px solid #d8d0c3;padding:18px 0 0}
}


/* =================== PHASE 2 — APPRENTISSAGE INTELLIGENT =================== */
.review-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:14px;margin-top:14px}
.review-queue{display:grid;gap:8px;margin-top:14px}
.review-item{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper)}
.review-item strong{font-size:14px}
.review-item span{font-size:12.5px;color:var(--ink-faint)}
.skill-tree{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.skill-node{position:relative;padding:18px;border:1px solid var(--rule);border-radius:var(--radius-lg);background:var(--surface);overflow:hidden}
.skill-node::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--skill-color,var(--accent))}
.skill-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.skill-head strong{font-size:16px}
.skill-pct{font-size:13px;font-weight:700;color:var(--skill-color,var(--accent))}
.skill-state{font-size:12.5px;color:var(--ink-soft);margin-top:4px}
.skill-node .mini-progress{margin-top:12px}
.badge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.badge-card{padding:18px;min-height:150px;display:flex;flex-direction:column;justify-content:space-between;gap:14px;opacity:.58}
.badge-card.earned{opacity:1;background:var(--accent-wash);border-color:var(--accent)}
.badge-icon{font-size:30px;line-height:1}
.badge-card strong{font-size:15px}
.badge-card p{margin:4px 0 0;font-size:12.5px;line-height:1.45;color:var(--ink-soft)}
.badge-status{font-size:12px;font-weight:700;color:var(--ink-faint)}
.badge-card.earned .badge-status{color:var(--accent)}
.review-focus{border-left:3px solid var(--accent);padding-left:14px}
.review-focus strong{font-size:18px}
.review-focus p{margin:4px 0 0;color:var(--ink-soft);font-size:13.5px}
@media(max-width:900px){.review-grid{grid-template-columns:1fr}.skill-tree{grid-template-columns:repeat(2,1fr)}.badge-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.skill-tree,.badge-grid{grid-template-columns:1fr}}

/* ---------- Favoris ---------- */
.favorite-control{
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:0;
  background:transparent;
  color:var(--ink-soft);
  padding:8px 4px;
  font-size:14px;
  font-weight:500;
  border-radius:4px;
  transition:color .16s ease,background-color .16s ease;
}
.favorite-control:hover{
  color:var(--ink);
  background:var(--paper);
}
.favorite-control:active{
  background:var(--rule);
}
.favorite-control svg{
  width:15px;
  height:15px;
  flex:none;
  stroke:currentColor;
  stroke-width:1.7;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:fill .16s ease,stroke .16s ease;
}
.favorite-control[aria-pressed="true"]{
  color:var(--accent);
  font-weight:600;
}
.favorite-control[aria-pressed="true"] svg{
  fill:currentColor;
}


/* =================== APPRENTISSAGE ADAPTATIF =================== */
.learning-setup{max-width:820px;margin:28px auto 0}.learning-setup-card{background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:28px}.learning-setup-card h2{font-size:30px;margin:0 0 10px}.learning-setup-card h3{font-size:20px;margin:24px 0 12px}.level-choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:20px 0}.level-choice{border:1px solid var(--rule);background:transparent;border-radius:10px;text-align:left;padding:18px;cursor:pointer;color:inherit}.level-choice:hover{border-color:var(--accent);background:var(--accent-wash)}.level-choice strong{display:block;font-size:17px;margin-bottom:6px}.level-choice span{display:block;color:var(--ink-soft);font-size:14px;line-height:1.5}.learning-summary{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.learning-banner{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;border:1px solid var(--accent-border);background:var(--accent-soft);border-radius:10px;padding:18px 20px;margin:22px 0}.learning-banner strong{font-size:20px}.learning-banner p{margin:5px 0 0;color:var(--ink-soft);font-size:14px;line-height:1.55}.learning-section{margin:30px 0}.learning-section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:16px}.learning-section-head h2{font-size:25px;margin:0 0 6px}.learning-section-head p{max-width:65ch;color:var(--ink-soft);margin:0;font-size:14px}.teacher-box{border:1px solid var(--accent-border);background:var(--accent-soft);border-radius:8px;padding:16px 18px;margin:22px 0}.teacher-box strong{display:block;margin-bottom:5px;color:var(--accent-deep)}.teacher-box p{margin:0 0 10px}.teacher-vocab{display:grid;gap:7px}.teacher-vocab div{display:grid;grid-template-columns:minmax(90px,140px) 1fr;gap:10px;align-items:baseline}.teacher-vocab code{font:13px var(--mono);color:var(--ink)}.teacher-vocab span{color:var(--ink-soft);font-size:14px}.path-card{cursor:pointer}.path-card .select-path{position:relative;z-index:2}.level-chip{font-size:12px;border:1px solid var(--rule-strong);padding:4px 9px;border-radius:999px;color:var(--ink-soft)}.quiz-question{font-size:22px;line-height:1.35;max-width:62ch}
@media(max-width:720px){.level-choice-grid{grid-template-columns:1fr}.learning-banner{display:block}.learning-banner .tag{display:inline-block;margin-top:10px}.learning-section-head{display:block}.teacher-vocab div{grid-template-columns:1fr;gap:2px}}

/* ====================== ADAM ACADEMY · MINIMAL LUXE ====================== */
:root{
  --paper:#f7f7f5;
  --ink:#111315;
  --ink-soft:#646a72;
  --ink-faint:#9298a0;
  --rule:#e6e7e8;
  --rule-strong:#d0d3d6;
  --surface:#ffffff;
  --accent:#1d4f91;
  --accent-wash:#edf3f9;
  --on-accent:#ffffff;
  --danger:#a53a34;
  --danger-wash:#fbefed;
  --radius:7px;
  --radius-lg:12px;
  --ease:cubic-bezier(.16,1,.3,1);
}

html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-size:15.5px}

/* La sensation premium vient de la retenue, pas des effets. */
.card,.panel,.auth-card,.path-card,.plan,.project-card,.exercise-card,.lesson-card,.stat,
.tutor,.gate,.legal .summary{
  box-shadow:0 1px 0 rgba(17,19,21,.03),0 10px 28px rgba(17,19,21,.025);
  border-color:var(--rule);
}
.card:hover,.path-card:hover,.plan:hover,.lesson-card:hover,.exercise-card:hover{
  border-color:var(--rule-strong);
  box-shadow:0 1px 0 rgba(17,19,21,.04),0 14px 34px rgba(17,19,21,.045);
}

/* Animations : lentes, courtes, avec une vraie décélération. */
.anim,.view{animation:luxFadeUp .42s var(--ease) both}
.stagger>*{animation:luxFadeUp .48s var(--ease) both;animation-delay:calc(var(--i,0)*48ms)}
@keyframes luxFadeUp{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
@keyframes luxReveal{
  from{opacity:0;transform:scale(.985) translateY(6px)}
  to{opacity:1;transform:none}
}
@keyframes luxSlide{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  .anim,.view,.stagger>*{animation:none!important}
}

/* Header */
.topbar{
  height:68px;
  background:rgba(247,247,245,.94);
  border-bottom:1px solid var(--rule);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding:0 34px;
}
.topbar .logo{font-size:21px;letter-spacing:-.045em;margin-right:42px}
.logo-dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.topbar nav{gap:4px}
.nav-btn{
  padding:8px 12px;
  border-radius:6px;
  color:#737982;
  transition:color .22s var(--ease),background .22s var(--ease),transform .22s var(--ease);
}
.nav-btn:hover{color:var(--ink);background:#efefed;transform:translateY(-1px)}
.nav-btn.active{color:var(--ink);background:#ececea}
.path-mini{border-radius:6px;background:transparent}
.avatar{background:var(--ink);border:0;color:var(--paper);transition:transform .25s var(--ease),background .2s var(--ease)}
.avatar:hover{transform:translateY(-1px);background:var(--accent)}
.profile-drop{box-shadow:0 18px 45px rgba(17,19,21,.09);border-color:var(--rule);animation:luxReveal .24s var(--ease)}

/* Typographie */
h1,h2,h3{letter-spacing:-.042em}
.hero-dash h1{font-size:48px;font-weight:650}
.page-head h1{font-size:41px;font-weight:650}
.section-title{letter-spacing:-.025em}
.eyebrow{letter-spacing:.09em;text-transform:none;font-family:var(--sans);font-size:12px;font-weight:600;color:#858a92}
.lead{color:#666c73}

/* Auth : plus sobre, moins “template SaaS”. */
.auth-shell{max-width:1080px;padding:64px 32px}
.auth-copy h1{font-size:58px;letter-spacing:-.055em;font-weight:650}
.auth-copy h1 span{color:var(--ink)}
.auth-copy h1 span:after{content:none;display:none}
.auth-copy h1:after{content:"";display:block;width:52px;height:2px;background:var(--accent);margin-top:22px}
.auth-copy .logo{margin-bottom:72px}
.auth-card{border-radius:12px;padding:38px;background:rgba(255,255,255,.9)}
.auth-tabs{gap:24px}
.auth-tab{transition:color .2s var(--ease),border-color .2s var(--ease)}
.auth-card input{background:transparent;transition:border-color .22s var(--ease),background .22s var(--ease),box-shadow .22s var(--ease)}
.auth-card input:focus{box-shadow:0 4px 0 -2px var(--accent)}

/* Boutons */
.btn,.ghost-btn,.select-path,.chip-btn{
  transition:transform .24s var(--ease),background .24s var(--ease),color .24s var(--ease),border-color .24s var(--ease),box-shadow .24s var(--ease);
}
.btn:hover,.ghost-btn:hover,.select-path:hover{transform:translateY(-1px)}
.btn:active,.ghost-btn:active,.select-path:active{transform:translateY(0) scale(.99)}
.btn{border-radius:7px}
.primary{background:var(--ink);border-color:var(--ink)}
.primary:hover{background:var(--accent);border-color:var(--accent)}
.ghost-btn{border-color:var(--rule-strong);background:rgba(255,255,255,.5)}
.ghost-btn:hover{background:var(--ink);border-color:var(--ink);color:#fff}

/* Dashboard */
main{max-width:1160px;padding:56px 34px 96px}
.hero-dash{
  grid-template-columns:1fr 300px;
  gap:56px;
  padding-bottom:42px;
}
.hero-progress{padding-left:30px}
.progress-line{height:3px;background:#e4e5e6}
.progress-line span{background:var(--accent);transition:width 1.05s var(--ease)}

/* Cartes : surfaces calmes, petits accents plutôt que couleurs partout. */
.module-grid,.exercise-grid,.lesson-list,.stats-grid{gap:14px}
.module-card,.exercise-card,.lesson-card,.stat{background:#fff}
.module-card{position:relative;overflow:hidden}
.module-card:after,.exercise-card:after,.lesson-card:after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--accent);
  transition:width .38s var(--ease);
}
.module-card:hover:after,.exercise-card:hover:after,.lesson-card:hover:after{width:34%}
.module-card.done{background:var(--accent-wash);border-color:#d8e3ee}
.exercise-card.done{background:#f3f7fb;border-color:#dfe6ed}
.lesson-card{transition:transform .32s var(--ease),border-color .25s var(--ease),box-shadow .32s var(--ease)}
.lesson-card:hover{transform:translateY(-2px)}

/* Parcours */
.path-grid{gap:14px}
.path-card{
  border-radius:10px;
  padding:28px 26px 24px;
  transition:transform .36s var(--ease),border-color .24s var(--ease),box-shadow .36s var(--ease),background .24s var(--ease);
}
.path-card:hover{transform:translateY(-3px);background:#fff}
.path-icon{border-radius:9px}
.path-tags span{background:transparent;border-color:var(--rule)}
.select-path{border-color:var(--rule-strong)}

/* Onglets */
.tabs{border-bottom:1px solid var(--rule)!important;gap:22px!important}
.tab{border-radius:0!important;transition:color .22s var(--ease),box-shadow .28s var(--ease)!important}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--ink)!important;box-shadow:inset 0 -2px 0 var(--ink)!important}

/* Progress bars */
.mini-progress{background:#eceeef}
.mini-progress span{background:var(--accent);transition:width .9s var(--ease)}
.streak i{transition:background .35s var(--ease),transform .25s var(--ease)}
.streak i:hover{transform:translateY(-1px)}
.streak i.on{background:var(--ink)}

/* Premium / VIP : luxe discret, pas de couleurs “gaming”. */
.plan{background:#fff}
.plan.current{border-top:2px solid var(--ink)!important}
.tag.premium,.tag.vip{background:#f4f5f6!important;color:#444a51!important;border-color:#dfe1e4!important}
.gate{background:#fff!important;border:1px solid var(--rule)!important;border-left:2px solid var(--ink)!important;border-radius:10px!important}

/* Modales */
.modal{background:rgba(17,19,21,.36);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.modal-panel{box-shadow:0 24px 70px rgba(17,19,21,.14);animation:luxReveal .38s var(--ease) both}
.modal-close{border-radius:7px;transition:transform .2s var(--ease),background .2s var(--ease)}
.modal-close:hover{transform:rotate(4deg);background:var(--ink);color:#fff}

/* Prof Py / panneaux */
.tutor{box-shadow:0 24px 70px rgba(17,19,21,.12)}
.tutor-head{background:#fafaf9;border-bottom:1px solid var(--rule)}
.msg.bot{border-left-color:var(--ink)}
.msg.user{background:var(--ink)}
.chip-btn{border-color:var(--rule-strong);background:#fff}
.chip-btn:hover{background:#f2f3f4;border-color:#c5c9cd;color:var(--ink)}

/* Legal / consentement */
.legal .summary{background:#fafaf9;border-color:var(--rule)}
.legal th{background:#f2f3f4}
.consent-bar{background:var(--ink);border-radius:8px;box-shadow:0 14px 42px rgba(17,19,21,.16)}

/* Apparition des éléments interactifs */
.card,.path-card,.plan,.lesson-card,.exercise-card,.stat,.panel{animation:luxSlide .42s var(--ease) both}

@media(max-width:900px){
  .topbar{padding:0 18px}
  main{padding-left:20px;padding-right:20px}
  .auth-shell{padding-top:40px}
}
@media(max-width:720px){
  .auth-copy h1{font-size:43px}
  .auth-copy .logo{margin-bottom:42px}
  .hero-dash h1{font-size:40px}
  .page-head h1{font-size:34px}
}

/* ================= CYBER THEME — DARK, CLEAN, READABLE ================= */
body[data-theme="cyber"]{
  --paper:#0a0d11;
  --ink:#edf2f7;
  --ink-soft:#a8b1bd;
  --ink-faint:#737e8d;
  --rule:#202733;
  --rule-strong:#323b49;
  --surface:#11161d;
  --accent:#5b86ff;
  --accent-wash:#141e35;
  --on-accent:#ffffff;
  --danger:#ff7373;
  --danger-wash:#2b171b;
  --warn:#e7b36a;
}

body[data-theme="cyber"] .topbar{
  background:rgba(10,13,17,.94);
  border-bottom:1px solid var(--rule);
  box-shadow:0 1px 0 rgba(255,255,255,.02);
}
body[data-theme="cyber"] .nav-btn{color:#7f8998}
body[data-theme="cyber"] .nav-btn:hover{background:#151b24;color:var(--ink)}
body[data-theme="cyber"] .nav-btn.active{background:#171e28;color:#f3f6fa}
body[data-theme="cyber"] .path-mini{background:#10151c;border-color:#303946;color:#9ca7b4}
body[data-theme="cyber"] .path-mini:hover{border-color:#536073;color:#eef2f7}
body[data-theme="cyber"] .xp-chip{color:#8d97a5}
body[data-theme="cyber"] .xp-chip b{color:#6f95ff}
body[data-theme="cyber"] .avatar{background:#eef2f7;color:#0b0e12}
body[data-theme="cyber"] .avatar:hover{background:var(--accent);color:#fff}
body[data-theme="cyber"] .profile-drop{background:#11161d;border-color:var(--rule-strong);box-shadow:0 18px 50px rgba(0,0,0,.35)}
body[data-theme="cyber"] .profile-drop .link-btn{color:#aab3bf}

body[data-theme="cyber"] main{background:transparent}
body[data-theme="cyber"] .hero-dash{
  background:#0f141a;
  border-color:var(--rule);
  border-bottom-color:#425fae;
  box-shadow:0 10px 34px rgba(0,0,0,.16);
}
body[data-theme="cyber"] .hero-dash h1,
body[data-theme="cyber"] .page-head h1,
body[data-theme="cyber"] .section-title{color:#edf2f7}
body[data-theme="cyber"] .hero-dash p,
body[data-theme="cyber"] .page-head p,
body[data-theme="cyber"] .module-card p,
body[data-theme="cyber"] .lesson-card p,
body[data-theme="cyber"] .exercise-card p{color:#a8b1bd}
body[data-theme="cyber"] .hero-progress{border-color:var(--rule)}
body[data-theme="cyber"] .progress-line{background:#252d39}
body[data-theme="cyber"] .progress-line span{background:#5b86ff}

body[data-theme="cyber"] .card,
body[data-theme="cyber"] .panel,
body[data-theme="cyber"] .module-card,
body[data-theme="cyber"] .lesson-card,
body[data-theme="cyber"] .exercise-card,
body[data-theme="cyber"] .stat,
body[data-theme="cyber"] .path-card,
body[data-theme="cyber"] .plan,
body[data-theme="cyber"] .project-card,
body[data-theme="cyber"] .gate{
  background:#11161d !important;
  border-color:#252d38 !important;
  box-shadow:0 8px 28px rgba(0,0,0,.14);
}
body[data-theme="cyber"] .card:hover,
body[data-theme="cyber"] .path-card:hover,
body[data-theme="cyber"] .plan:hover,
body[data-theme="cyber"] .lesson-card:hover,
body[data-theme="cyber"] .exercise-card:hover{
  background:#141a22 !important;
  border-color:#364151 !important;
  box-shadow:0 14px 34px rgba(0,0,0,.2);
}
body[data-theme="cyber"] .module-card.done{background:#131d31 !important;border-color:#263b62 !important}
body[data-theme="cyber"] .exercise-card.done{background:#131b29 !important;border-color:#273852 !important}
body[data-theme="cyber"] .module-card h3,
body[data-theme="cyber"] .lesson-card h3,
body[data-theme="cyber"] .exercise-card h3,
body[data-theme="cyber"] .stat strong,
body[data-theme="cyber"] .panel strong{color:#edf2f7}
body[data-theme="cyber"] .module-card .index,
body[data-theme="cyber"] .lesson-badge,
body[data-theme="cyber"] .level,
body[data-theme="cyber"] .stat label{color:#798494}
body[data-theme="cyber"] .module-card:after,
body[data-theme="cyber"] .exercise-card:after,
body[data-theme="cyber"] .lesson-card:after{background:#5b86ff}
body[data-theme="cyber"] .mini-progress{background:#252d38}
body[data-theme="cyber"] .mini-progress span{background:#5b86ff}
body[data-theme="cyber"] .done-flag,
body[data-theme="cyber"] .exercise-type{color:#7ea0ff}

body[data-theme="cyber"] .btn,
body[data-theme="cyber"] .primary{
  background:#edf2f7;
  border-color:#edf2f7;
  color:#0b0e12;
  box-shadow:none;
}
body[data-theme="cyber"] .btn:hover,
body[data-theme="cyber"] .primary:hover{
  background:#5b86ff;
  border-color:#5b86ff;
  color:#fff;
}
body[data-theme="cyber"] .ghost-btn,
body[data-theme="cyber"] .select-path{
  background:#151b23;
  border-color:#394352;
  color:#dbe2ea;
}
body[data-theme="cyber"] .ghost-btn:hover,
body[data-theme="cyber"] .select-path:hover{
  background:#1b2330;
  border-color:#5b86ff;
  color:#fff;
}

body[data-theme="cyber"] .plan-chip{background:#11161d;border-color:#394352;color:#9ba6b4}
body[data-theme="cyber"] .plan-chip.premium{border-color:#5b86ff;color:#7ea0ff}
body[data-theme="cyber"] .plan-chip.vip{border-color:#c08a45;color:#e7b36a}
body[data-theme="cyber"] .tag.premium{background:#241b11 !important;color:#e7b36a !important;border-color:#4b3821 !important}
body[data-theme="cyber"] .tag.vip{background:#19182d !important;color:#a7a3ff !important;border-color:#36345f !important}
body[data-theme="cyber"] .gate{border-left-color:#5b86ff !important}

body[data-theme="cyber"] .tabs{border-color:var(--rule) !important}
body[data-theme="cyber"] .tab{color:#7f8998}
body[data-theme="cyber"] .tab:hover{color:#e8edf3}
body[data-theme="cyber"] .tab.active{color:#7ea0ff !important;box-shadow:inset 0 -2px 0 #5b86ff !important}

body[data-theme="cyber"] .modal{background:rgba(0,0,0,.72)}
body[data-theme="cyber"] .modal-panel{background:#0f141a;border-color:var(--rule)}
body[data-theme="cyber"] .modal-close{background:#151b23;color:#b9c2cd;border-color:#364151}
body[data-theme="cyber"] .modal-close:hover{background:#edf2f7;color:#0b0e12;border-color:#edf2f7}
body[data-theme="cyber"] .tutor{background:#0f141a;border-color:#303947;box-shadow:0 18px 55px rgba(0,0,0,.38)}
body[data-theme="cyber"] .tutor-head{background:#121821;border-color:var(--rule)}
body[data-theme="cyber"] .chip-btn{background:#131922;border-color:#344050;color:#aeb8c5}
body[data-theme="cyber"] .chip-btn:hover{background:#5b86ff;color:#fff;border-color:#5b86ff}

body[data-theme="cyber"] .auth-card,
body[data-theme="cyber"] .onboarding-wrap .path-card{background:#11161d !important;border-color:#252d38 !important}
body[data-theme="cyber"] .auth-card input{color:#edf2f7;background:#0d1218;border-color:#313a47}
body[data-theme="cyber"] .auth-card input:focus{border-color:#5b86ff;background:#0f151c;box-shadow:0 0 0 3px rgba(91,134,255,.14)}
body[data-theme="cyber"] .auth-card input::placeholder{color:#566172}

/* Corrige explicitement la règle précédente qui forçait les cartes à #fff. */
body[data-theme="cyber"] .module-card,
body[data-theme="cyber"] .exercise-card,
body[data-theme="cyber"] .lesson-card,
body[data-theme="cyber"] .stat{background:#11161d !important}
body[data-theme="cyber"] .module-card{border-top-color:#2b3543 !important}
body[data-theme="cyber"] .module-card:nth-child(4n+1),
body[data-theme="cyber"] .module-card:nth-child(4n+2),
body[data-theme="cyber"] .module-card:nth-child(4n+3),
body[data-theme="cyber"] .module-card:nth-child(4n){border-top-color:#2b3543 !important}
body[data-theme="cyber"] .lesson-card{border-left-color:#35445b !important}
body[data-theme="cyber"] .exercise-card{border-top-color:#2b3543 !important}
body[data-theme="cyber"] .page-head:after{background:#5b86ff}
body[data-theme="cyber"] .section-title{border-color:#202733}


/* Account / security */
.account-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}
.account-panel h2{font-size:24px;margin:0 0 14px}
.account-panel label{display:block;color:var(--ink-soft);font-size:12px;margin-top:16px}
.account-panel input{display:block;width:100%;margin-top:7px;background:var(--surface);border:1px solid var(--rule-strong);padding:11px 12px;border-radius:var(--radius);color:var(--ink)}
.account-panel input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.account-panel input:disabled{opacity:.62}
.account-panel hr{border:0;border-top:1px solid var(--rule);margin:22px 0}
.account-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.verification-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:12px;font-size:12px;color:var(--ink-soft)}
.account-ok{min-height:20px;color:#2f7a50;font-size:13px;margin:10px 0 0}
.danger-copy{color:var(--danger);font-size:13px}
.danger-btn{border:1px solid var(--danger);background:transparent;color:var(--danger);padding:10px 14px;border-radius:var(--radius);font-weight:600;margin-top:14px}
.danger-btn:hover{background:var(--danger);color:var(--on-accent)}
.plan-actions{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:820px){.account-grid{grid-template-columns:1fr}}

/* =========================================================
   ADAM ACADEMY — MOBILE V4
   Objectif : aucune barre horizontale, aucun élément coupé,
   boutons/cartes/modal/tables lisibles sur petits écrans.
   ========================================================= */
html,body{width:100%;max-width:100%;overflow-x:hidden}
img,svg,video,canvas{max-width:100%;height:auto}
button,input,textarea,select{max-width:100%;min-width:0}
pre,code{max-width:100%}
pre{overflow-x:auto;-webkit-overflow-scrolling:touch}

@media(max-width:720px){
  /* ---------- Global ---------- */
  body{font-size:15px;padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  .screen{min-height:100dvh}
  .desktop-only{display:none!important}
  .mobile-only{display:block!important}

  /* ---------- Header ---------- */
  .topbar{
    height:58px;
    min-height:58px;
    padding:0 12px;
    gap:10px;
  }
  .topbar .logo{
    font-size:18px;
    margin-right:0;
    white-space:nowrap;
    flex:0 1 auto;
    min-width:0;
  }
  .top-actions{
    gap:7px;
    min-width:0;
    flex:0 0 auto;
  }
  .top-actions .xp-chip{display:none}
  .top-actions .path-mini{max-width:126px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:5px 9px;font-size:12px}
  .avatar{width:32px;height:32px;flex:none}
  .profile-drop{
    position:fixed;
    top:66px;
    right:10px;
    width:min(290px,calc(100vw - 20px));
    max-width:calc(100vw - 20px);
  }

  /* ---------- Bottom navigation ---------- */
  .mobile-nav{
    left:0;right:0;bottom:0;
    min-height:60px;
    padding:5px 5px calc(5px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -8px 24px rgba(17,19,21,.05);
  }
  .mobile-nav button{min-width:0;font-size:9.5px;padding:7px 1px 5px;gap:2px;line-height:1.05}
  .mobile-nav .mnav em{font-size:17px;line-height:1}
  .mobile-nav svg{width:20px;height:20px}

  /* ---------- Main / onboarding ---------- */
  main,
  .onboarding-wrap{
    width:100%;
    max-width:100%;
    padding-left:14px;
    padding-right:14px;
  }
  main{padding-top:28px;padding-bottom:86px}
  .onboarding-wrap{padding-top:16px;padding-bottom:86px}
  .simple-header{padding-bottom:14px;gap:10px;flex-wrap:wrap}
  .onboarding-intro{margin:34px 0 26px;max-width:100%}
  .onboarding-intro h1{font-size:34px;line-height:1.08;overflow-wrap:anywhere}
  .onboarding-intro p:not(.eyebrow){font-size:15px}
  .path-grid{grid-template-columns:1fr!important;gap:10px}
  .path-card{padding:19px 17px 17px}
  .path-card h3{font-size:19px}
  .path-card p{min-height:0}
  .path-meta{flex-wrap:wrap;gap:7px 12px}
  .learning-setup{width:100%;max-width:100%;margin-top:18px}
  .learning-setup-card{padding:18px 16px;border-radius:10px}
  .learning-setup-card h2{font-size:25px}
  .learning-setup-card h3{font-size:19px;margin-top:20px}
  .level-choice-grid{grid-template-columns:1fr!important;gap:9px}
  .level-choice{padding:15px}
  .level-choice strong{font-size:16px}
  .level-choice span{font-size:13.5px}
  .learning-banner{padding:15px 16px;margin:16px 0}
  .learning-banner strong{font-size:18px}

  /* ---------- Dashboard / page heads ---------- */
  .hero-dash{
    display:block!important;
    padding:20px 17px!important;
    margin-bottom:0;
    border-radius:10px;
  }
  .hero-dash h1{font-size:32px!important;overflow-wrap:anywhere}
  .hero-dash p{font-size:14.5px;max-width:100%}
  .hero-progress{
    border-left:0!important;
    border-top:1px solid var(--rule);
    padding:16px 0 0!important;
    margin-top:18px;
  }
  .hero-progress b{font-size:38px}
  .page-head{
    display:block!important;
    padding-bottom:18px;
  }
  .page-head h1{font-size:30px!important;overflow-wrap:anywhere}
  .page-head p{font-size:14.5px;max-width:100%}
  .page-head>.btn,
  .page-head>.ghost-btn,
  .page-head>.link-btn{margin-top:14px;width:100%}
  .section-title{font-size:18px;line-height:1.25;flex-wrap:wrap;margin:32px 0 14px}
  .section-title small{font-size:13px}

  /* ---------- Grids ---------- */
  .module-grid,
  .exercise-grid,
  .lesson-list,
  .stats-grid,
  .project-grid,
  .challenge-grid,
  .review-grid,
  .two-col,
  .account-grid,
  .plan-grid{grid-template-columns:1fr!important}
  .skill-tree,
  .badge-grid{grid-template-columns:1fr!important}
  .module-card,.exercise-card,.lesson-card,.panel,.stat,.project-card,.challenge-card{min-width:0}
  .module-card,.exercise-card,.lesson-card{padding:18px}
  .lesson-card{display:block}
  .lesson-card>*,.exercise-card>*,.module-card>*{min-width:0;max-width:100%}
  .card,.panel,.stat,.path-card,.plan,.gate{overflow:hidden}

  /* ---------- Flex rows that often caused overflow ---------- */
  .learning-section-head,
  .learning-banner,
  .activity-row,
  .verification-row,
  .account-actions,
  .plan-actions,
  .project-actions,
  .challenge-actions,
  .lesson-actions,
  .exercise-actions,
  .route-step,
  .offer-row{min-width:0;flex-wrap:wrap}
  .learning-section-head>* ,
  .activity-row>* ,
  .verification-row>* ,
  .route-step>*{min-width:0;max-width:100%}
  .activity-row span:last-child{white-space:normal;text-align:right}

  /* ---------- Course content ---------- */
  .teacher-box{padding:14px 15px}
  .teacher-vocab div{grid-template-columns:1fr!important;gap:1px}
  .quiz-question{font-size:19px;line-height:1.4;max-width:100%;overflow-wrap:anywhere}
  .qcm-option{
    width:100%;
    max-width:100%;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  .qcm-option b{width:16px;flex:0 0 16px}
  .learning-summary{gap:6px}
  .learning-summary>*{max-width:100%;}

  /* ---------- Editors / code ---------- */
  .code-editor{
    min-height:230px;
    padding:15px;
    font-size:12.5px;
    line-height:1.65;
    border-radius:0;
  }
  .code-output,.code-result,.result-box,.terminal{max-width:100%;overflow:auto;-webkit-overflow-scrolling:touch}
  .key-row{display:block}
  .key-row input{width:100%;margin-bottom:10px}

  /* ---------- Modals ---------- */
  .modal{padding:0!important;align-items:flex-end}
  .modal-panel,
  .lesson-modal,
  .exercise-modal,
  .legal-modal{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    max-height:92dvh;
    height:auto;
    overflow-y:auto;
    overflow-x:hidden;
    border-radius:16px 16px 0 0;
    padding:28px 17px 46px!important;
    margin:0!important;
  }
  .modal-close{
    position:absolute!important;
    top:10px!important;
    right:10px!important;
    width:34px!important;
    height:34px!important;
    z-index:3;
  }

  /* ---------- Legal pages ---------- */
  .legal{min-width:0;max-width:100%;overflow-wrap:anywhere}
  .legal h1{font-size:30px!important}
  .legal h2{font-size:22px!important}
  .legal p,.legal li{font-size:15px;line-height:1.7;overflow-wrap:anywhere}
  .legal table{
    display:block;
    width:100%;
    min-width:0!important;
    max-width:100%;
    overflow-x:auto;
    white-space:normal;
    -webkit-overflow-scrolling:touch;
  }
  .legal th,.legal td{white-space:normal;min-width:110px}

  /* ---------- Cookie banner ---------- */
  .consent-bar{
    left:8px!important;
    right:8px!important;
    bottom:calc(68px + env(safe-area-inset-bottom,0px))!important;
    width:auto!important;
    max-width:none!important;
    padding:13px 14px!important;
    font-size:13px!important;
    gap:9px 12px;
  }
  .consent-bar .btn,.consent-bar .ghost-btn{width:100%;margin-top:0}

  /* ---------- Prof Py ---------- */
  .tutor{
    left:7px!important;
    right:7px!important;
    width:auto!important;
    max-width:none!important;
    bottom:calc(72px + env(safe-area-inset-bottom,0px))!important;
    height:min(68dvh,520px)!important;
    border-radius:12px!important;
  }
  .tutor-input{padding:8px!important}
  .tutor-input button{flex:0 0 auto}

  /* ---------- Certificates / special grids ---------- */
  .cert-grid{grid-template-columns:1fr!important}
  .offer-row{grid-template-columns:1fr!important;gap:8px!important}
  .offer-row.head{display:none}

  /* ---------- Typography / long strings ---------- */
  h1,h2,h3,p,li,span,strong,label,button,a{overflow-wrap:anywhere}
  .path-mini,.level-chip,.tag,.plan-chip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
}

@media(max-width:390px){
  .topbar{padding:0 9px}
  .topbar .logo{font-size:17px}
  .top-actions .path-mini{max-width:102px}
  main,.onboarding-wrap{padding-left:10px;padding-right:10px}
  .hero-dash{padding:18px 14px!important}
  .hero-dash h1{font-size:29px!important}
  .page-head h1{font-size:28px!important}
  .modal-panel,.lesson-modal,.exercise-modal,.legal-modal{padding-left:13px!important;padding-right:13px!important}
}

/* =========================================================
   Adam Academy V8 — direction pédagogique / produit éducatif
   Inspirée de conventions observées sur des plateformes d'apprentissage :
   progression explicite, cours structurés, métadonnées visibles,
   séparation claire entre apprendre / pratiquer / progresser.
   Pas de glassmorphism, pas de gros effets flottants, pas d'UI de chatbot.
   ========================================================= */
:root{
  --paper:#f6f5f1;
  --ink:#17211e;
  --ink-soft:#58645e;
  --ink-faint:#7c857f;
  --rule:#dfe1dc;
  --rule-strong:#c7ccc5;
  --surface:#ffffff;
  --accent:#176b57;
  --accent-wash:#eaf3ef;
  --on-accent:#ffffff;
  --danger:#a73b32;
  --danger-wash:#f8ebe8;
  --warn:#9d681f;
  --radius:7px;
  --radius-lg:10px;
  --sans:'Source Sans 3',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --display:var(--sans);
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
}
html{background:var(--paper)}
body{background:var(--paper);color:var(--ink)}
button{transition:background .14s ease,color .14s ease,border-color .14s ease,transform .14s ease}

/* --- marque / en-tête : sobre, type plateforme de cours --- */
.auth-copy:before{content:"LEARN / PRACTICE / BUILD";font-size:10px;letter-spacing:.13em}
.topbar{height:66px;background:#fff;border-bottom:1px solid var(--rule);box-shadow:none}
.topbar .logo{margin-right:34px}
.topbar nav{gap:0;height:100%;align-items:stretch}
.nav-btn{height:100%;border-radius:0;padding:8px 14px;border-bottom:2px solid transparent;color:#657069}
.nav-btn:hover{background:#f5f6f3;color:var(--ink)}
.nav-btn.active{background:transparent;color:var(--ink);border-bottom-color:var(--accent)}
.path-mini{border-radius:5px;background:#fff;border-color:var(--rule-strong)}
.avatar{background:#22302a;border-radius:7px}
.avatar:hover{background:#176b57}

/* --- boutons --- */
.btn,.primary{box-shadow:none;border-radius:6px}
.ghost-btn{background:#fff;border-radius:6px;box-shadow:none}
.btn:hover,.ghost-btn:hover{transform:translateY(-1px)}
.link-btn{text-decoration:none}
.link-btn:hover{text-decoration:underline}

/* --- cartes : moins "SaaS", plus catalogue de cours --- */
.card,.panel,.auth-card,.path-card,.plan,.project-card,.exercise-card,.lesson-card,.stat,
.coach-hero,.level-hero,.learning-setup-card,.key-panel,.gate,.prof{
  box-shadow:none!important;
}
.card,.panel{border-color:var(--rule);border-radius:8px}
.card:hover{background:#fff;border-color:var(--rule-strong);transform:none}
.panel{padding:24px}

/* --- accueil : hiérarchie de cours + progression --- */
main{max-width:1160px;padding-top:34px}
.hero-dash{background:#fff;border:1px solid var(--rule);border-bottom:2px solid var(--accent);border-radius:9px;padding:30px 32px;margin-bottom:30px;gap:38px;box-shadow:none}
.hero-dash h1{font-size:46px;letter-spacing:-.045em}
.hero-dash p{max-width:60ch}
.hero-progress{border-left:1px solid var(--rule)}
.progress-line{height:6px;background:#e5e8e4;border-radius:2px}
.progress-line span{background:var(--accent);border-radius:2px}
.section-title{margin:42px 0 14px;font-size:21px;letter-spacing:-.015em}
.section-title small{color:var(--ink-faint)}

/* Modules : proche d'une liste de curriculum, avec repères de progression */
.module-grid{grid-template-columns:repeat(3,1fr);gap:12px}
.module-card{padding:22px 22px 20px;border-top:0!important;border-left:3px solid #d9ddd8;position:relative}
.module-card:nth-child(3n+1){border-left-color:#176b57}
.module-card:nth-child(3n+2){border-left-color:#c87932}
.module-card:nth-child(3n){border-left-color:#6d7897}
.module-card .index{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:12px}
.module-card h3{font-size:20px;margin:0 0 8px}
.module-card p{color:var(--ink-soft);font-size:14px;line-height:1.55;min-height:44px}
.module-card.done{background:#f1f6f3;border-color:#cfe0d8}

/* --- pages de cours / exercices --- */
.page-head{padding-bottom:22px;border-bottom:1px solid var(--rule)}
.page-head:after{width:48px;height:2px;background:#c87932}
.page-head h1{font-size:40px;letter-spacing:-.035em}
.lesson-list{grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
.lesson-card{padding:22px;border-left:3px solid #176b57;box-shadow:none!important;transition:border-color .14s ease,background .14s ease}
.lesson-card:hover{transform:none;box-shadow:none!important}
.lesson-card h3{font-size:20px}
.lesson-card p{font-size:14.5px}
.exercise-grid{grid-template-columns:repeat(3,1fr);gap:12px}
.exercise-card{padding:22px;border-top:2px solid #cfd4cf;position:relative}
.exercise-card:hover{transform:none}
.exercise-card h3{font-size:19px}
.exercise-card .exercise-type{font-size:11px;letter-spacing:.08em}
.exercise-card .level{font-size:12px;color:var(--ink-faint)}
.exercise-card.done{background:#f1f6f3;border-color:#cfe0d8}

/* --- parcours : catalogue pédagogique, pas cartes marketing --- */
.path-grid{gap:12px}
.path-card{border-radius:8px;background:#fff;padding:23px 22px 20px}
.path-card:hover{transform:none;background:#fff}
.path-icon{width:40px;height:40px;border-radius:7px;margin-bottom:18px}
.path-card h3{font-size:21px;margin-bottom:7px}
.path-card p{min-height:72px}
.path-tags span{border-radius:5px;background:#f7f8f5}
.path-meta{border-top:1px solid var(--rule);padding-top:14px}
.select-path{border-radius:6px;background:#fff}

/* --- calibration : question claire, progression visible, actions stables --- */
.learning-setup{max-width:860px}
.learning-setup-card{background:#fff;border:1px solid var(--rule);border-radius:9px;padding:30px}
.learning-setup-card h2{font-size:30px}
.level-choice-grid{gap:10px}
.level-choice{background:#fff;border-color:var(--rule-strong);border-radius:7px;padding:18px;box-shadow:none}
.level-choice:hover{border-color:var(--accent);background:#f7fbf9;transform:none}
.learning-banner{background:#f2f7f4;border-color:#cfe0d8;border-radius:7px;box-shadow:none}
.learning-banner .tag{border-radius:5px}
.quiz-question{font-size:25px;line-height:1.35;margin-top:18px}
.qcm-option{border-radius:7px!important;background:#fff!important;border-color:var(--rule-strong)!important;box-shadow:none!important}
.qcm-option:hover{background:#f7fbf9!important;border-color:var(--accent)!important}

/* --- contenu des leçons : lecture longue, moins de "dashboard" --- */
.lesson-content{max-width:760px;margin:0 auto}
.lesson-content h2{font-size:42px;letter-spacing:-.04em}
.lesson-content h3{font-size:22px;margin-top:34px}
.concept,.teacher-box,.pitfall{border-radius:6px!important;box-shadow:none!important}
.lesson-steps>div{border-bottom:1px solid var(--rule)}
.code-block,.code-wrap,.editor-wrap{border-radius:5px!important}

/* --- modales : panneaux de travail, pas fenêtres flottantes de chat --- */
.modal{background:rgba(23,33,30,.48);backdrop-filter:none;-webkit-backdrop-filter:none}
.modal-panel{box-shadow:none!important}
.modal-close{border-radius:6px;box-shadow:none}

/* --- Prof Py : style professeur / aide de cours plutôt que messagerie --- */
.tutor{border:1px solid #cdd3ce!important;border-radius:8px!important;box-shadow:0 18px 40px rgba(23,33,30,.14)!important;background:#fff!important}
.tutor-head{background:#f5f7f4!important;border-bottom:1px solid var(--rule)!important}
.tutor-log{background:#fff!important}
.msg.user{border-radius:6px!important;background:#23312b!important}
.msg.bot{border-left:3px solid var(--accent)!important;background:#f5f8f6!important;padding:10px 12px!important;border-radius:0 6px 6px 0!important}
.chip-btn{border-radius:5px!important;background:#fff!important}
.tutor-input{background:#fff!important}
.tutor-input input{border-radius:6px!important;background:#f8f9f7!important}

/* --- offres : comparaison lisible comme catalogue, pas pricing SaaS --- */
.plan{border-radius:8px!important;background:#fff!important}
.plan.current{border-top:3px solid var(--accent)!important}
.plan .btn{border-radius:6px}
.offer-table{border-top:1px solid var(--rule)}
.offer-row{min-height:48px}
.offer-row.head{background:#fff}

/* --- compte / statistiques : privilégier lignes, chiffres et repères --- */
.stat{background:#fff;border-radius:8px!important}
.stat strong{font-variant-numeric:tabular-nums}
.stats-grid{gap:12px}
.progress-row{border-bottom-color:var(--rule)!important}
.mini-progress{background:#e7ebe7!important;border-radius:2px!important}
.mini-progress span{background:var(--accent)!important;border-radius:2px!important}

/* --- petits écrans : priorité au contenu du cours --- */
@media(max-width:1000px){
  .module-grid,.exercise-grid{grid-template-columns:repeat(2,1fr)}
  .lesson-list{grid-template-columns:1fr}
}
@media(max-width:720px){
  .topbar{height:60px;padding:0 14px}
  .topbar .logo{margin-right:0;font-size:20px}
  main{padding:24px 16px 48px}
  .hero-dash{padding:22px 20px;margin-bottom:24px}
  .hero-dash h1{font-size:35px}
  .hero-progress{border-left:0;border-top:1px solid var(--rule);padding-top:18px}
  .module-grid,.exercise-grid{grid-template-columns:1fr}
  .lesson-list{grid-template-columns:1fr}
  .path-card{padding:20px}
  .learning-setup-card{padding:22px 18px}
  .quiz-question{font-size:21px}
  .lesson-content h2{font-size:31px}
  .page-head h1{font-size:32px}
}

/* =========================================================
   Adaptation explicite par type d'appareil
   Le choix est mémorisé dans localStorage pour chaque appareil.
   ========================================================= */
.device-screen{
  min-height:100dvh;
  display:grid;
  place-items:center;
  background:var(--paper);
  padding:24px;
}
.device-choice-wrap{
  width:min(900px,100%);
}
.device-choice-head{
  max-width:660px;
  margin-bottom:34px;
}
.device-choice-head h1{
  font-size:46px;
  margin:8px 0 12px;
  letter-spacing:-.045em;
}
.device-choice-head p:not(.eyebrow){
  margin:0;
  color:var(--ink-soft);
  font-size:17px;
  line-height:1.65;
  max-width:62ch;
}
.device-choice-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.device-choice{
  appearance:none;
  width:100%;
  text-align:left;
  background:var(--surface);
  color:var(--ink);
  border:1px solid var(--rule-strong);
  border-radius:12px;
  padding:24px;
  min-height:210px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:border-color .15s var(--ease),background .15s var(--ease),transform .15s var(--ease);
}
.device-choice:hover{
  border-color:var(--ink);
  background:#fffefa;
  transform:translateY(-1px);
}
.device-choice:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}
.device-choice-icon{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:1px solid var(--rule);
  border-radius:9px;
  background:var(--paper);
  color:var(--accent);
  font-size:22px;
  margin-bottom:22px;
}
.device-choice h2{
  font-size:23px;
  margin:0 0 6px;
}
.device-choice p{
  margin:0;
  color:var(--ink-soft);
  font-size:14.5px;
  line-height:1.55;
}
.device-choice small{
  display:block;
  margin-top:18px;
  color:var(--ink-faint);
  font-size:12.5px;
}
.device-choice-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:20px;
  color:var(--ink-faint);
  font-size:13px;
}
.device-auto{
  border:0;
  background:transparent;
  color:var(--ink-soft);
  padding:5px 0;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* Force le profil choisi, même si la fenêtre est redimensionnée. */
body[data-device="phone"] .topbar nav{display:none!important}
body[data-device="phone"] .top-actions .xp-chip,
body[data-device="phone"] .top-actions .path-mini{display:none!important}
body[data-device="phone"] .mobile-nav{display:flex!important}
body[data-device="phone"] main,
body[data-device="phone"] .onboarding-wrap{width:100%;max-width:100%;padding-left:14px;padding-right:14px}
body[data-device="phone"] main{padding-top:24px;padding-bottom:90px}
body[data-device="phone"] .auth-shell{grid-template-columns:1fr;gap:24px;padding:28px 16px}
body[data-device="phone"] .auth-copy{padding-right:0}
body[data-device="phone"] .auth-copy h1{font-size:38px}
body[data-device="phone"] .auth-card{padding:22px 18px}
body[data-device="phone"] .path-grid,
body[data-device="phone"] .module-grid,
body[data-device="phone"] .exercise-grid,
body[data-device="phone"] .lesson-list,
body[data-device="phone"] .stats-grid,
body[data-device="phone"] .project-grid,
body[data-device="phone"] .challenge-grid,
body[data-device="phone"] .plan-grid{grid-template-columns:1fr!important}
body[data-device="phone"] .hero-dash{display:block!important;padding:18px!important}
body[data-device="phone"] .hero-dash h1{font-size:31px!important}
body[data-device="phone"] .page-head{display:block!important}
body[data-device="phone"] .page-head h1{font-size:29px!important}
body[data-device="phone"] .topbar{height:58px;min-height:58px;padding:0 12px}
body[data-device="phone"] .topbar .logo{font-size:18px}
body[data-device="phone"] .modal{
  padding:0!important;
  align-items:flex-end;
}
body[data-device="phone"] .modal-panel,
body[data-device="phone"] .lesson-modal,
body[data-device="phone"] .exercise-modal,
body[data-device="phone"] .legal-modal{
  width:100%!important;
  max-width:100%!important;
  max-height:92dvh;
  min-width:0!important;
  overflow:auto;
  border-radius:16px 16px 0 0;
  padding:28px 16px 46px!important;
}
body[data-device="phone"] .lesson-content h2{font-size:29px}
body[data-device="phone"] .exercise-modal h2{font-size:27px}
body[data-device="phone"] .code,
body[data-device="phone"] .code-editor{
  font-size:12px;
  line-height:1.65;
}
body[data-device="phone"] .device-choice-wrap{width:100%}

body[data-device="tablet"] .topbar nav{
  display:flex!important;
  flex:1 1 auto;
  min-width:0;
  overflow-x:auto;
  scrollbar-width:none;
}
body[data-device="tablet"] .topbar nav::-webkit-scrollbar{display:none}
body[data-device="tablet"] .nav-btn{flex:none}
body[data-device="tablet"] .top-actions{gap:8px}
body[data-device="tablet"] .top-actions .xp-chip{display:none}
body[data-device="tablet"] main,
body[data-device="tablet"] .onboarding-wrap{max-width:980px;padding-left:24px;padding-right:24px}
body[data-device="tablet"] .auth-shell{
  grid-template-columns:1fr;
  max-width:860px;
  padding:34px 24px;
}
body[data-device="tablet"] .auth-copy{padding-right:0}
body[data-device="tablet"] .path-grid,
body[data-device="tablet"] .module-grid,
body[data-device="tablet"] .exercise-grid,
body[data-device="tablet"] .lesson-list,
body[data-device="tablet"] .stats-grid,
body[data-device="tablet"] .project-grid,
body[data-device="tablet"] .challenge-grid,
body[data-device="tablet"] .plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
body[data-device="tablet"] .mobile-nav{display:none!important}
body[data-device="tablet"] .hero-dash{grid-template-columns:1fr 280px}
body[data-device="tablet"] .modal-panel,
body[data-device="tablet"] .lesson-modal,
body[data-device="tablet"] .exercise-modal,
body[data-device="tablet"] .legal-modal{max-width:min(900px,calc(100vw - 32px));border-radius:12px}
body[data-device="tablet"] .onboarding-intro{margin-top:44px}

body[data-device="pc"] .mobile-nav{display:none!important}
body[data-device="pc"] main,
body[data-device="pc"] .onboarding-wrap{max-width:1160px}
body[data-device="pc"] .auth-shell{max-width:1160px}
body[data-device="pc"] .device-choice-wrap{max-width:900px}

/* Réduit les risques de débordement sur contenus longs, quel que soit le profil. */
body[data-device] img,
body[data-device] video,
body[data-device] canvas,
body[data-device] iframe{max-width:100%}
body[data-device] pre,
body[data-device] code{overflow-wrap:anywhere}
body[data-device] button,
body[data-device] input,
body[data-device] textarea{max-width:100%}

@media(max-width:900px){
  .device-choice-grid{grid-template-columns:1fr}
  .device-choice{min-height:0}
  .device-choice-head h1{font-size:38px}
}
@media(max-width:560px){
  .device-screen{padding:16px}
  .device-choice-head{margin-bottom:24px}
  .device-choice-head h1{font-size:32px}
  .device-choice-head p:not(.eyebrow){font-size:15px}
  .device-choice{padding:20px}
  .device-choice-footer{display:block}
  .device-choice-footer span{display:block;margin-bottom:6px}
}

/* =========================================================
   CERTIFICATS — identité professionnelle, compétences et preuve
   ========================================================= */
.certificate-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(380px,.9fr);
  gap:24px;
  align-items:start;
  margin-top:24px;
}
.certificate-copy{
  padding:30px;
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:8px;
}
.certificate-copy .eyebrow{color:var(--accent);font-weight:700}
.certificate-copy h2{font-size:34px;margin:0 0 12px;max-width:18ch}
.certificate-copy p{color:var(--ink-soft);margin:0;max-width:64ch}
.certificate-points{display:grid;gap:0;margin:22px 0 24px;border-top:1px solid var(--rule)}
.certificate-point{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;color:var(--ink-soft);font-size:14.5px;padding:11px 0;border-bottom:1px solid var(--rule)}
.certificate-point b{color:var(--accent);font-weight:700}
.certificate-preview-card{
  position:relative;
  padding:12px;
  background:#eef3ef;
  border:1px solid var(--rule-strong);
  border-radius:8px;
}
.certificate-preview-label{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:3px 3px 10px;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)
}
.certificate-preview-label span:last-child{color:var(--accent)}
.certificate-preview-inner{position:relative;background:#fff;overflow:hidden;border:1px solid #cbd3cd}
.certificate-preview-inner canvas{display:block;width:100%;height:auto}
.certificate-watermark{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
  color:rgba(23,107,87,.09);font-size:clamp(28px,6vw,72px);font-weight:800;letter-spacing:.12em;transform:rotate(-16deg);
  user-select:none;
}
.certificate-preview-note{font-size:12px;color:var(--ink-faint);margin:9px 3px 1px}
.certificate-framework{margin-top:20px}
.certificate-framework-title{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:9px}
.certificate-framework-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.certificate-framework-item{padding:12px;border:1px solid var(--rule);background:var(--surface);border-radius:6px}
.certificate-framework-item strong{display:block;font-size:14px;margin-bottom:3px}
.certificate-framework-item span{display:block;color:var(--ink-soft);font-size:12.5px;line-height:1.45}
.certificate-claim{margin-top:14px;padding:13px 15px;border-left:3px solid var(--accent);background:var(--accent-wash);color:var(--ink-soft);font-size:13px;line-height:1.55}
.certificate-claim strong{color:var(--ink)}
.certificate-page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.certificate-page-head h1{margin-bottom:8px}
.certificate-page-head p{margin:0;max-width:70ch}
.certificate-lock{
  margin-top:20px;
  border:1px solid var(--rule);
  background:var(--surface);
  padding:20px 22px;
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
}
.certificate-lock strong{font-size:16px}
.certificate-lock p{margin:5px 0 0;color:var(--ink-soft);font-size:14px}
.certificate-record{margin-top:18px;padding:20px 22px;border:1px solid var(--rule);background:var(--surface)}
.certificate-record-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}
.certificate-record-item{padding:11px 12px;background:var(--paper);border:1px solid var(--rule)}
.certificate-record-item span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-faint);margin-bottom:4px}
.certificate-record-item strong{display:block;font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums}
.certificate-disclaimer{margin-top:14px;color:var(--ink-faint);font-size:12px;line-height:1.55}
@media(max-width:900px){
  .certificate-hero{grid-template-columns:1fr}
  .certificate-copy{padding:24px}
  .certificate-record-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
  .certificate-page-head{display:block}
  .certificate-page-head .btn{width:100%;margin-top:14px}
  .certificate-copy h2{font-size:28px}
  .certificate-copy{padding:20px}
  .certificate-preview-card{padding:9px}
  .certificate-preview-label{font-size:10px;padding-bottom:8px}
  .certificate-framework-grid,.certificate-record-grid{grid-template-columns:1fr}
  .certificate-lock{padding:18px}
  .certificate-lock .btn{width:100%}
}

/* Compatibilité avec les barres d'hébergement injectées en bas de page
   (ex. TinyHost / mode "Shared with tinyhost"). */
body[data-device="phone"]{
  --host-sharebar-offset:56px;
  padding-bottom:calc(120px + var(--host-sharebar-offset) + env(safe-area-inset-bottom,0px)) !important;
}
body[data-device="phone"] main,
body[data-device="phone"] .onboarding-wrap{
  padding-bottom:calc(146px + var(--host-sharebar-offset) + env(safe-area-inset-bottom,0px)) !important;
}
body[data-device="phone"] .mobile-nav{
  bottom:var(--host-sharebar-offset) !important;
  padding-bottom:calc(5px + env(safe-area-inset-bottom,0px));
}
body[data-device="phone"] .tutor-fab{
  bottom:calc(74px + var(--host-sharebar-offset) + env(safe-area-inset-bottom,0px)) !important;
}
body[data-device="phone"] .tutor{
  bottom:calc(126px + var(--host-sharebar-offset) + env(safe-area-inset-bottom,0px)) !important;
}
body[data-device="phone"] .consent-bar{
  bottom:calc(68px + var(--host-sharebar-offset) + env(safe-area-inset-bottom,0px)) !important;
}

/* Sur un vrai écran mobile, même logique si le choix d'appareil n'est pas
   encore appliqué au moment du premier rendu. */
@media(max-width:720px){
  body:not([data-device]){
    padding-bottom:calc(120px + 56px + env(safe-area-inset-bottom,0px)) !important;
  }
  body:not([data-device]) main,
  body:not([data-device]) .onboarding-wrap{
    padding-bottom:calc(146px + 56px + env(safe-area-inset-bottom,0px)) !important;
  }
  body:not([data-device]) .mobile-nav{
    bottom:56px !important;
  }
}

/* =========================================================
   ADAM ACADEMY — GREEN / INK REDESIGN
   Direction: éditeur pédagogique + atelier de code.
   Green is the action color; black and white carry hierarchy.
   Motion is restrained: no floating cards, no bounce, no blur.
   ========================================================= */
:root{
  --paper:#f3f6f4;
  --ink:#0b1511;
  --ink-soft:#53615a;
  --ink-faint:#7a8780;
  --rule:#dbe4df;
  --rule-strong:#b9c7c0;
  --surface:#ffffff;
  --accent:#138a5b;
  --accent-strong:#0c6a45;
  --accent-wash:#e7f5ee;
  --on-accent:#ffffff;
  --danger:#b43832;
  --danger-wash:#faecea;
  --warn:#8a641e;
  --radius:7px;
  --radius-lg:11px;
  --shadow-sm:0 4px 14px rgba(11,21,17,.06);
  --shadow-md:0 12px 30px rgba(11,21,17,.09);
}

html{scroll-behavior:smooth}
body{
  background:var(--paper)!important;
  color:var(--ink)!important;
  font-family:'Source Sans 3',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif!important;
}
body[data-theme="games"],
body[data-theme="automation"],
body[data-theme="data"],
body[data-theme="web"],
body[data-theme="general"]{
  --paper:#f3f6f4;
  --ink:#0b1511;
  --ink-soft:#53615a;
  --ink-faint:#7a8780;
  --rule:#dbe4df;
  --rule-strong:#b9c7c0;
  --surface:#ffffff;
  --accent:#138a5b;
  --accent-wash:#e7f5ee;
  --on-accent:#ffffff;
}
body[data-theme="cyber"]{
  --paper:#080d0a;
  --ink:#eef5f1;
  --ink-soft:#aab8b1;
  --ink-faint:#7c8b83;
  --rule:#1b2922;
  --rule-strong:#2a3a31;
  --surface:#0e1712;
  --accent:#35c98a;
  --accent-strong:#27a871;
  --accent-wash:#10271d;
  --on-accent:#06100b;
  --shadow-sm:0 4px 14px rgba(0,0,0,.22);
  --shadow-md:0 12px 30px rgba(0,0,0,.3);
}

/* Motion language: one entrance, one hover, one press. */
@keyframes aa-page-in{from{transform:translateY(5px)}to{transform:translateY(0)}}
@keyframes aa-shimmer{from{transform:translateX(-110%)}to{transform:translateX(110%)}}
@keyframes aa-pulse{0%,100%{box-shadow:0 0 0 0 rgba(19,138,91,0)}50%{box-shadow:0 0 0 4px rgba(19,138,91,.10)}}

.anim,.view{animation:aa-page-in .18s cubic-bezier(.22,.61,.36,1) both!important}
.stagger>*{animation:none!important}

:focus-visible{outline:2px solid var(--accent)!important;outline-offset:3px!important}

/* Brand */
.logo{font-size:22px!important;font-weight:700!important;letter-spacing:-.04em!important}
.logo em{color:var(--accent)!important}
.logo-dot{background:var(--accent)!important;border-radius:2px!important;width:9px!important;height:9px!important}
.eyebrow{
  color:var(--accent)!important;
  font:600 11px/1.2 var(--mono)!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}

/* Controls */
.btn,.ghost-btn,.link-btn,.nav-btn,.filter,.tab,.chip-btn,.mobile-nav button,.path-mini,.select-path,
.auth-tab,.modal-close,.exercise-actions button,.tutor-x{
  border-radius:6px!important;
}
.btn{
  background:var(--ink)!important;
  border-color:var(--ink)!important;
  color:#fff!important;
  box-shadow:none!important;
  transition:transform .16s ease,border-color .16s ease,background .16s ease,color .16s ease!important;
}
.btn:hover{background:var(--accent)!important;border-color:var(--accent)!important;transform:translateY(-1px)}
.btn:active,.ghost-btn:active,.nav-btn:active,.filter:active,.tab:active,.chip-btn:active{transform:translateY(1px)!important}
.primary{background:var(--accent)!important;border-color:var(--accent)!important}
.primary:hover{background:var(--accent-strong)!important;border-color:var(--accent-strong)!important}
.ghost-btn{
  background:var(--surface)!important;
  border-color:var(--rule-strong)!important;
  color:var(--ink)!important;
}
.ghost-btn:hover{background:var(--ink)!important;border-color:var(--ink)!important;color:#fff!important;transform:translateY(-1px)}
.link-btn,.link-inline{color:var(--ink-soft)!important}
.link-btn:hover,.link-inline:hover{color:var(--accent)!important}

/* Header */
.topbar{
  height:72px!important;
  padding:0 28px!important;
  background:rgba(255,255,255,.96)!important;
  border-bottom:1px solid var(--rule)!important;
  box-shadow:0 1px 0 rgba(11,21,17,.02)!important;
}
.topbar .logo{margin-right:30px!important}
.topbar nav{gap:4px!important}
.nav-btn{
  position:relative!important;
  padding:9px 12px!important;
  background:transparent!important;
  color:var(--ink-soft)!important;
  font-weight:600!important;
  border-radius:5px!important;
}
.nav-btn::after{display:none!important;content:none!important}
.nav-btn:hover{background:transparent!important;color:var(--ink)!important;transform:none!important}
.nav-btn.active{background:transparent!important;color:var(--accent-strong)!important;font-weight:700!important}
.nav-btn.active::after{display:none!important;transform:none!important}
.avatar{background:var(--ink)!important;transition:transform .16s ease,background .16s ease!important}
.avatar:hover{background:var(--accent)!important;transform:translateY(-1px)}
.profile-drop{box-shadow:var(--shadow-md)!important;border-color:var(--rule-strong)!important}

/* Page frame */
main{max-width:1180px!important;padding:40px 28px 72px!important}
.section-title{
  margin:46px 0 18px!important;
  padding-left:13px!important;
  border-left:3px solid var(--accent)!important;
}
.page-head{padding-bottom:24px!important;border-bottom:1px solid var(--rule)!important}
.page-head h1,.hero-dash h1{letter-spacing:-.045em!important}

/* Hero: strong ink block instead of generic pale card */
.hero-dash{
  grid-template-columns:minmax(0,1fr) 300px!important;
  gap:28px!important;
  padding:34px!important;
  border:1px solid #15201b!important;
  border-radius:12px!important;
  background:#0b1511!important;
  color:#f4f8f6!important;
  box-shadow:var(--shadow-md)!important;
  position:relative!important;
  overflow:hidden!important;
}
.hero-dash::after{
  content:"";position:absolute;right:-90px;top:-110px;width:320px;height:320px;
  border:1px solid rgba(53,201,138,.18);border-radius:50%;
  box-shadow:0 0 0 28px rgba(53,201,138,.03),0 0 0 56px rgba(53,201,138,.02);
  pointer-events:none;
}
.hero-dash h1{color:#fff!important}
.hero-dash p{color:#aebbb4!important}
.hero-dash .eyebrow{color:#4ade9c!important}
.hero-progress{border-left:1px solid #26362e!important;position:relative;z-index:1}
.hero-progress .row{color:#aebbb4!important}
.hero-progress b{color:#fff!important}
.progress-line{background:#26362e!important}
.progress-line span{background:#35c98a!important}

/* Cards: editorial, not floating app tiles */
.card,.panel,.path-card,.plan,.gate,.coach-hero,.level-hero,.locked,.certificate-copy,.certificate-lock,.cert-card,.project-card,.challenge-card,.stat{
  background:var(--surface)!important;
  border:1px solid var(--rule)!important;
  border-radius:var(--radius-lg)!important;
  box-shadow:none!important;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease!important;
}
.card:hover,.panel:hover,.path-card:hover,.plan:hover,.project-card:hover,.challenge-card:hover,.cert-card:hover{
  border-color:var(--rule-strong)!important;
  transform:translateY(-2px)!important;
  box-shadow:var(--shadow-sm)!important;
}
.path-card{overflow:hidden!important}
.path-card::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .18s ease;
}
.path-card:hover::after{transform:scaleX(1)}
.path-card[data-path="games"],.path-card[data-path="automation"],.path-card[data-path="data"],.path-card[data-path="web"],.path-card[data-path="cyber"],.path-card[data-path="general"]{
  --pc:var(--accent)!important;--pcw:var(--accent-wash)!important;
}
.path-icon{border-radius:8px!important}

.module-card{padding:22px!important;border-left:3px solid var(--rule)!important}
.module-card:hover{border-left-color:var(--accent)!important}
.module-card.done{background:var(--accent-wash)!important;border-color:#cde8da!important;border-left-color:var(--accent)!important}
.exercise-card.done,.challenge-card.done{background:var(--accent-wash)!important;border-color:#cde8da!important}

/* Progress + completion */
.mini-progress,.progress-line{background:#e5ece8!important}
.mini-progress span,.progress-line span,.bars span{background:var(--accent)!important}
.streak i.on{background:var(--accent)!important}

/* Lesson / exercise content */
.lesson-content h2,.exercise-modal h2{letter-spacing:-.04em!important}
.concept{border-left-color:var(--accent)!important;background:var(--accent-wash)!important;padding:14px 18px!important;border-radius:0 7px 7px 0!important}
.pitfall{background:#fafbf9!important}
.code,.code-editor,.code-editor-wrap{border-radius:7px!important}
.editor-head{background:#0b1511!important}
.test-output{border-left-color:var(--accent)!important}
.qcm-option{transition:transform .12s ease,border-color .12s ease,background .12s ease!important}
.qcm-option:hover:not(:disabled){transform:translateX(2px)!important;border-color:var(--accent)!important}
.qcm-option.correct{background:var(--accent-wash)!important;border-color:var(--accent)!important}
.qcm-option.wrong{background:var(--danger-wash)!important}

/* Modal */
.modal{background:rgba(4,10,7,.66)!important}
.modal-panel{box-shadow:var(--shadow-md)!important;border-top:3px solid var(--accent)!important}
.modal-close{box-shadow:0 4px 14px rgba(0,0,0,.10)!important}

/* Offers */
.plan.current{background:var(--accent-wash)!important;border-color:#cde8da!important}
.plan-chip.premium,.tag.premium{border-color:var(--accent)!important;color:var(--accent-strong)!important}
.plan-chip.vip,.tag.vip{border-color:var(--ink)!important;color:var(--ink)!important}
.plan li em{color:var(--accent)!important}
.offer-row.head{top:72px!important}

/* Certificates */
.certificate-preview-card{box-shadow:var(--shadow-md)!important;background:#e9efeb!important;border-color:var(--rule-strong)!important}
.certificate-watermark{color:rgba(19,138,91,.10)!important}

/* Tutor */
.tutor-fab{background:var(--ink)!important;transition:transform .16s ease,background .16s ease!important}
.tutor-fab:hover{background:var(--accent)!important;transform:translateY(-2px)!important}
.tutor{box-shadow:var(--shadow-md)!important;border-color:var(--rule-strong)!important}
.tutor-head{background:var(--ink)!important;color:#fff!important}
.tutor-head span{color:#aebbb4!important}
.msg.bot{border-left-color:var(--accent)!important}
.chip-btn:hover{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important}

/* Mobile nav */
.mobile-nav{background:rgba(255,255,255,.98)!important;border-top:1px solid var(--rule)!important;box-shadow:0 -4px 18px rgba(11,21,17,.05)!important}
.mobile-nav button{position:relative!important}
.mobile-nav button.active{color:var(--accent)!important}
.mobile-nav button.active::before{content:"";position:absolute;top:-7px;left:25%;right:25%;height:2px;background:var(--accent);border-radius:2px}

/* Authentication + onboarding */
.auth-screen{background:var(--paper)!important}
.auth-shell{max-width:1180px!important;grid-template-columns:minmax(0,1fr) 420px!important;gap:34px!important}
.auth-copy{
  padding:48px!important;
  background:#0b1511!important;
  color:#fff!important;
  border-radius:14px!important;
  box-shadow:var(--shadow-md)!important;
  position:relative!important;
  overflow:hidden!important;
}
.auth-copy::after{
  content:"";position:absolute;right:-80px;bottom:-120px;width:260px;height:260px;border:1px solid rgba(53,201,138,.18);border-radius:50%;
}
.auth-copy:before{color:#4ade9c!important;border-left-color:#35c98a!important}
.auth-copy .logo em{color:#35c98a!important}
.auth-copy .logo-dot{background:#35c98a!important}
.auth-copy h1{color:#fff!important}
.auth-copy .lead,.auth-copy .mini-proof span{color:#aebbb4!important}
.auth-card{box-shadow:var(--shadow-md)!important;border-color:var(--rule)!important;border-radius:12px!important}
.auth-tabs{gap:20px!important}
.auth-tab.active{color:var(--accent)!important;border-color:var(--accent)!important}
.auth-card input{background:#fbfdfb!important}
.auth-card input:focus{box-shadow:0 0 0 3px rgba(19,138,91,.10)!important}
.device-screen{background:var(--paper)!important}
.device-choice{background:var(--surface)!important;border:1px solid var(--rule)!important;border-radius:11px!important;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease!important}
.device-choice:hover{transform:translateY(-2px)!important;border-color:var(--accent)!important;box-shadow:var(--shadow-sm)!important}
.device-choice-icon{color:var(--accent)!important}

/* Remove gold/purple/orange identity from legacy rules while retaining semantic warning colors. */
.plan-chip.vip,.tag.vip{background:transparent!important}

/* Performance/accessibility: no decorative motion for reduced motion users. */
@media(prefers-reduced-motion:reduce){
  .anim,.view,.card,.panel,.path-card,.plan,.project-card,.challenge-card,.cert-card,.device-choice,.btn,.ghost-btn,.avatar{transition:none!important;animation:none!important;transform:none!important}
  .path-card::after,.nav-btn::after,.mobile-nav button.active::before{transition:none!important}
}

@media(max-width:1000px){
  .auth-shell{grid-template-columns:1fr!important}
  .auth-copy{padding:34px!important}
  .hero-dash{grid-template-columns:1fr!important;padding:28px!important}
  .hero-progress{border-left:0!important;border-top:1px solid #26362e!important;padding:20px 0 0!important}
}

@media(max-width:720px){
  .topbar{height:64px!important;padding:0 16px!important}
  .topbar .logo{margin-right:0!important}
  main{padding:28px 16px 56px!important}
  .hero-dash{padding:22px!important;border-radius:10px!important}
  .hero-dash::after{right:-150px;top:-160px}
  .auth-shell{padding:20px 16px!important}
  .auth-copy{padding:26px!important;border-radius:12px!important}
  .auth-card{padding:22px!important}
  .section-title{margin-top:34px!important}
  .modal-panel{border-top-width:2px!important}
}

/* ================================================================
   V11 — GREEN / BLACK / WHITE · CONTENT-FIRST EDITORIAL UI
   Visual-only layer. JavaScript is intentionally untouched.
   ================================================================ */
:root{
  --paper:#f6f8f7;
  --ink:#111715;
  --ink-soft:#55605b;
  --ink-faint:#7a8580;
  --rule:#dfe5e2;
  --rule-strong:#c5cfca;
  --surface:#ffffff;
  --accent:#137a58;
  --accent-strong:#0b6044;
  --accent-wash:#eaf5f0;
  --on-accent:#ffffff;
  --danger:#a53a33;
  --danger-wash:#fbefec;
  --warn:#8a641f;
  --radius:5px;
  --radius-lg:8px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --shadow-none:none;
}

html{scroll-behavior:smooth}
body{
  background:var(--paper)!important;
  color:var(--ink)!important;
}

/* 01 — no glassmorphism / no blur haze */
.topbar,
.modal,
.auth-copy,
.auth-card,
.card,.panel,.path-card,.plan,.lesson-card,.exercise-card,.stat,
.tutor,.gate,.legal .summary{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* 02 — one restrained radius system, not one giant radius everywhere */
.btn,.ghost-btn,.select-path,.auth-card input,.notice,
.card,.panel,.path-card,.plan,.lesson-card,.exercise-card,.stat,
.gate,.learning-setup-card,.level-choice,.teacher-box,.learning-banner,
.code-editor-wrap,.test-output,.chip-btn,.consent-bar,.tutor,
.profile-drop,.modal-close,.device-choice{border-radius:var(--radius)!important}
.path-icon{border-radius:6px!important}
.avatar,.logo-dot{border-radius:50%!important}

/* 03 — flatter surfaces: reserve shadows for floating layers only */
.card,.panel,.auth-card,.path-card,.plan,.lesson-card,.exercise-card,.stat,
.gate,.legal .summary,.learning-setup-card,.level-choice,.teacher-box,
.learning-banner,.device-choice{
  box-shadow:none!important;
  border:1px solid var(--rule)!important;
}
.profile-drop,.modal-panel,.tutor{
  box-shadow:0 12px 32px rgba(17,23,21,.10)!important;
}

/* 04 — typography does the hierarchy; avoid decorative tracking */
h1,h2,h3{letter-spacing:-.028em!important}
.eyebrow{
  font-family:var(--sans)!important;
  font-size:12px!important;
  font-weight:650!important;
  letter-spacing:.055em!important;
  text-transform:none!important;
  color:var(--ink-faint)!important;
}
.lead,.hero-dash p,.page-head p{max-width:68ch!important}

/* 05 — remove synthetic "AI label"/code-sticker look from the auth hero */
.auth-copy:before{content:none!important;display:none!important}
.auth-copy:after{content:none!important;display:none!important}
.auth-copy h1:after{content:none!important;display:none!important}
.auth-copy{
  background:#101814!important;
  color:#f8fbfa!important;
  border-radius:8px!important;
  box-shadow:none!important;
  padding:52px!important;
  overflow:visible!important;
}
.auth-copy h1{
  font-size:clamp(46px,5vw,60px)!important;
  line-height:1.03!important;
  max-width:720px!important;
  width:100%!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  text-wrap:balance;
}
.auth-copy h1 span{color:#f8fbfa!important}
.auth-copy .lead{color:#c3d0c9!important}
.auth-copy .mini-proof{
  border-top:1px solid #3a4841!important;
}
.auth-copy .mini-proof span{color:#c3d0c9!important}
.auth-copy .logo em{color:#47b889!important}
.auth-copy .logo-dot{background:#47b889!important}

/* 06 — simple header, no frosted surface */
.topbar{
  background:var(--surface)!important;
  border-bottom:1px solid var(--rule)!important;
  box-shadow:none!important;
}
.nav-btn{
  border-radius:4px!important;
  transition:color .12s ease,background .12s ease!important;
}
.nav-btn:hover{transform:none!important;background:#f0f4f2!important;color:var(--ink)!important}
.nav-btn.active{background:var(--accent-wash)!important;color:var(--accent-strong)!important}
.path-mini{border-radius:4px!important}
.avatar{box-shadow:none!important}
.avatar:hover{transform:none!important;background:var(--accent-strong)!important}

/* 07 — buttons: state change, not floating/lift animation */
.btn,.ghost-btn,.select-path,.chip-btn{
  transition:background-color .12s ease,color .12s ease,border-color .12s ease!important;
  transform:none!important;
  box-shadow:none!important;
}
.btn:hover,.ghost-btn:hover,.select-path:hover,
.btn:active,.ghost-btn:active,.select-path:active{transform:none!important}
.btn{border-radius:4px!important}
.primary{background:var(--accent)!important;border-color:var(--accent)!important}
.primary:hover{background:var(--accent-strong)!important;border-color:var(--accent-strong)!important}
.ghost-btn{background:transparent!important;border-color:var(--rule-strong)!important}
.ghost-btn:hover{background:#f1f5f3!important;color:var(--ink)!important;border-color:var(--accent)!important}

/* 08 — remove random colored strips from ordinary cards */
.module-card,
.exercise-card,
.lesson-card{border-top:1px solid var(--rule)!important;border-left:1px solid var(--rule)!important}
.module-card:nth-child(4n+1),
.module-card:nth-child(4n+2),
.module-card:nth-child(4n+3),
.module-card:nth-child(4n){border-top-color:var(--rule)!important}
.module-card:after,.exercise-card:after,.lesson-card:after{display:none!important}
.card:hover,.path-card:hover,.plan:hover,.lesson-card:hover,.exercise-card:hover{
  transform:none!important;
  box-shadow:none!important;
  background:#fff!important;
  border-color:var(--rule-strong)!important;
}
.lesson-card{transition:border-color .12s ease,background-color .12s ease!important}

/* 09 — section hierarchy via spacing and typography, not accent bars */
.section-title{
  margin-top:50px!important;
  color:var(--ink)!important;
  letter-spacing:-.018em!important;
}
.section-title small{color:var(--ink-faint)!important}
.page-head{padding-bottom:24px!important}
.page-head:after{display:none!important}

/* 10 — progress: one semantic green */
.progress-line{height:3px!important;background:#dfe7e3!important;border-radius:2px!important}
.progress-line span{background:var(--accent)!important;border-radius:0!important;transition:width .55s ease!important}
.mini-progress{background:#e4ebe8!important}
.mini-progress span{background:var(--accent)!important;transition:width .55s ease!important}
.streak i{border-radius:2px!important}
.streak i.on{background:var(--accent)!important}

/* 11 — semantic tags only; remove premium/vip decorative color coding */
.tag.premium,.tag.vip,.plan-chip.premium,.plan-chip.vip{
  background:#f0f4f2!important;
  color:var(--ink-soft)!important;
  border-color:var(--rule)!important;
}
.plan.current{border-top:1px solid var(--accent)!important}
.gate{border-left:3px solid var(--accent)!important;background:#fbfdfc!important}

/* 12 — navigation tabs should look like navigation, not pills */
.tabs{gap:20px!important;border-bottom:1px solid var(--rule)!important}
.tab{border-radius:0!important;background:transparent!important}
.tab.active{color:var(--accent-strong)!important;box-shadow:inset 0 -2px 0 var(--accent)!important}

/* 13 — no decorative hover motion on ordinary content */
.profile-drop{animation:none!important}
.anim,.view{animation:humanFade .14s ease both!important}
.stagger>*{animation:none!important}
@keyframes humanFade{from{opacity:0}to{opacity:1}}
.modal-panel{animation:humanModal .16s ease both!important}
@keyframes humanModal{from{opacity:0}to{opacity:1}}
.toast{animation:humanFade .14s ease both!important}

/* 14 — tutor FAB / consent: useful control geometry, not chat-bubble styling */
.tutor-fab{border-radius:4px!important;box-shadow:none!important;transition:background .12s ease,color .12s ease!important}
.tutor-fab:hover{background:var(--accent)!important;transform:none!important}
.consent-bar{border-radius:5px!important;box-shadow:none!important}

/* 15 — remove colored path-by-path visual noise; path identity is textual */
.path-card[data-path="games"],
.path-card[data-path="automation"],
.path-card[data-path="data"],
.path-card[data-path="web"],
.path-card[data-path="cyber"],
.path-card[data-path="general"]{
  --pc:var(--accent)!important;
  --pcw:var(--accent-wash)!important;
}
.path-icon{background:var(--accent-wash)!important;color:var(--accent-strong)!important}
.path-tags span{background:transparent!important;border-color:var(--rule)!important}

/* ---------- learning surfaces ---------- */
.learning-banner,.teacher-box{background:#f7faf8!important;border-color:var(--rule)!important}
.teacher-box strong{color:var(--accent-strong)!important}
.review-item{border-radius:var(--radius)!important;background:#fff!important}
.skill-node{border-radius:var(--radius)!important}
.badge-card{box-shadow:none!important}

/* ---------- input focus: clear but quiet ---------- */
.auth-card input:focus,.key-row input:focus,.tutor-input input:focus{
  box-shadow:0 0 0 2px rgba(19,122,88,.16)!important;
  border-color:var(--accent)!important;
}

/* ---------- cyber theme: same identity, true dark palette ---------- */
body[data-theme="cyber"]{
  --paper:#0b100e!important;
  --ink:#edf5f1!important;
  --ink-soft:#a3b2ab!important;
  --ink-faint:#74827b!important;
  --rule:#1e2924!important;
  --rule-strong:#2a3a32!important;
  --surface:#101714!important;
  --accent:#45b987!important;
  --accent-strong:#2f966c!important;
  --accent-wash:#12251d!important;
}
body[data-theme="cyber"] .topbar{background:#0f1412!important}
body[data-theme="cyber"] .nav-btn{background:transparent!important;color:#a3b2ab!important}
body[data-theme="cyber"] .nav-btn:hover{background:transparent!important;color:#edf5f1!important}
body[data-theme="cyber"] .nav-btn.active{background:transparent!important;color:#45b987!important}
body[data-theme="cyber"] .card,
body[data-theme="cyber"] .panel,
body[data-theme="cyber"] .path-card,
body[data-theme="cyber"] .plan,
body[data-theme="cyber"] .lesson-card,
body[data-theme="cyber"] .exercise-card,
body[data-theme="cyber"] .stat{background:#101714!important;border-color:var(--rule)!important}
body[data-theme="cyber"] .progress-line{background:#22332b!important}
body[data-theme="cyber"] .mini-progress{background:#22332b!important}
body[data-theme="cyber"] .auth-copy{background:#070b09!important}

/* ---------- mobile ---------- */
@media(max-width:1000px){
  .auth-copy{padding:38px!important}
}
@media(max-width:720px){
  .auth-copy{padding:28px!important}
  .auth-copy h1{font-size:40px!important;max-width:none!important}
  .section-title{margin-top:34px!important}
  .page-head h1{max-width:100%!important;overflow-wrap:anywhere}
  .card,.panel,.path-card,.plan,.lesson-card,.exercise-card,.stat{box-shadow:none!important}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}

/* ================================================================
   V13 — FINAL UI PASS
   Objectifs :
   - Cyber réellement cohérent, y compris les pages légales.
   - Aucun accent décoratif sous les cartes de parcours.
   - Pas d'animations génériques sur les cartes.
   - Mouvement réservé aux états utiles : navigation, modal, bouton,
     progression et feedback.
   - Aucun changement JavaScript / Firebase / App Check.
   ================================================================ */

/* ---------- Base motion: restrained, state-driven ---------- */
.anim,.view{animation:v13PageFade .12s ease both!important}
.stagger>*{animation:none!important}
.card,.panel,.path-card,.plan,.lesson-card,.exercise-card,.stat,
.project-card,.challenge-card,.cert-card,.device-choice{animation:none!important}
.profile-drop{animation:v13Drop .12s ease both!important}
.modal-panel{animation:v13Modal .16s cubic-bezier(.22,.61,.36,1) both!important}
.toast{animation:v13Toast .16s ease both!important}

@keyframes v13PageFade{from{opacity:.96}to{opacity:1}}
@keyframes v13Drop{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:none}}
@keyframes v13Modal{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes v13Toast{from{opacity:0;transform:translate(-50%,4px)}to{opacity:1;transform:translate(-50%,0)}}

/* ---------- No decorative strip on curriculum/path cards ---------- */
.path-card::after,
.path-card:hover::after,
.module-card::after,
.exercise-card::after,
.lesson-card::after,
.page-head::after{display:none!important;content:none!important}
.path-card{overflow:visible!important}
.path-card:hover{transform:none!important;box-shadow:none!important}
.path-card:focus-within{border-color:var(--accent)!important;background:var(--surface)!important}

/* ---------- Hierarchy without accent bars ---------- */
.section-title{border-left:0!important;padding-left:0!important}
.hero-dash::after{display:none!important;content:none!important}

/* ---------- Realistic interaction states ---------- */
.btn,.ghost-btn,.select-path,.chip-btn,.tab,.nav-btn,.filter,.mobile-nav button{
  transition:background-color .12s ease,color .12s ease,border-color .12s ease,opacity .12s ease!important;
}
.btn:active,.ghost-btn:active,.select-path:active,.chip-btn:active,
.tab:active,.nav-btn:active,.filter:active{transform:scale(.985)!important}
.card:hover,.panel:hover,.lesson-card:hover,.exercise-card:hover,
.project-card:hover,.challenge-card:hover,.cert-card:hover,.device-choice:hover{
  transform:none!important;
  box-shadow:none!important;
}
.qcm-option:hover:not(:disabled){transform:none!important}

/* Progress is one of the few places where motion communicates actual state. */
.progress-line span,.mini-progress span{transition:width .45s cubic-bezier(.22,.61,.36,1)!important}

/* ---------- Cyber: complete dark surface system ---------- */
body[data-theme="cyber"]{
  color-scheme:dark;
}
body[data-theme="cyber"] .legal-modal,
body[data-theme="cyber"] .legal-modal .modal-panel{
  background:#0f1512!important;
  color:var(--ink)!important;
}
body[data-theme="cyber"] .legal .summary,
body[data-theme="cyber"] .legal th{
  background:#141c18!important;
  color:#edf5f1!important;
  border-color:#2a3a32!important;
}
body[data-theme="cyber"] .legal .summary p,
body[data-theme="cyber"] .legal .summary li,
body[data-theme="cyber"] .legal th{
  color:#edf5f1!important;
}
body[data-theme="cyber"] .legal td,
body[data-theme="cyber"] .legal p,
body[data-theme="cyber"] .legal li,
body[data-theme="cyber"] .legal .updated{
  color:#aab8b1!important;
}
body[data-theme="cyber"] .legal strong,
body[data-theme="cyber"] .legal td:first-child{
  color:#edf5f1!important;
}
body[data-theme="cyber"] .legal a{
  color:#69c99c!important;
}
body[data-theme="cyber"] .table-wrap{
  border-color:#2a3a32!important;
}
body[data-theme="cyber"] .legal table,
body[data-theme="cyber"] .legal th,
body[data-theme="cyber"] .legal td{
  border-color:#26342d!important;
}
body[data-theme="cyber"] .legal-modal .tabs{
  border-color:#26342d!important;
}
body[data-theme="cyber"] .legal-modal .tab{
  color:#8f9d96!important;
}
body[data-theme="cyber"] .legal-modal .tab.active{
  color:#45b987!important;
  box-shadow:inset 0 -2px 0 #45b987!important;
}
body[data-theme="cyber"] .legal-modal ::-webkit-scrollbar{width:10px;height:10px}
body[data-theme="cyber"] .legal-modal ::-webkit-scrollbar-track{background:#0f1512}
body[data-theme="cyber"] .legal-modal ::-webkit-scrollbar-thumb{background:#33443b;border-radius:5px}
body[data-theme="cyber"] .legal-modal ::-webkit-scrollbar-thumb:hover{background:#486055}

/* Cyber-readable learning states that were still inheriting light-mode surfaces. */
body[data-theme="cyber"] .learning-setup-card,
body[data-theme="cyber"] .level-choice,
body[data-theme="cyber"] .learning-banner,
body[data-theme="cyber"] .teacher-box,
body[data-theme="cyber"] .gate,
body[data-theme="cyber"] .review-item,
body[data-theme="cyber"] .skill-node,
body[data-theme="cyber"] .badge-card{
  background:#101714!important;
  color:#edf5f1!important;
  border-color:#2a3a32!important;
}
body[data-theme="cyber"] .learning-banner p,
body[data-theme="cyber"] .teacher-box p,
body[data-theme="cyber"] .level-choice span,
body[data-theme="cyber"] .gate p,
body[data-theme="cyber"] .review-item p,
body[data-theme="cyber"] .skill-state,
body[data-theme="cyber"] .badge-card p{
  color:#aab8b1!important;
}
body[data-theme="cyber"] .qcm-option{
  background:#121a16!important;
  color:#edf5f1!important;
  border-color:#34483d!important;
}
body[data-theme="cyber"] .qcm-option:hover:not(:disabled){
  background:#16221c!important;
  border-color:#45b987!important;
}
body[data-theme="cyber"] .qcm-option.correct{
  background:#153022!important;
  border-color:#45b987!important;
}
body[data-theme="cyber"] .qcm-option.wrong{
  background:#2a191b!important;
  border-color:#8f4c4c!important;
}
body[data-theme="cyber"] .pitfall{
  background:#171b18!important;
  border-color:#34483d!important;
  color:#aab8b1!important;
}
body[data-theme="cyber"] .pitfall strong{
  color:#e7b36a!important;
}
body[data-theme="cyber"] .offer-row.head{
  background:#0f1512!important;
  color:#8f9d96!important;
}
body[data-theme="cyber"] .offer-row.head span{color:#8f9d96!important}

/* No accent line in the mobile navigation: active state is typographic. */
.mobile-nav button.active::before{display:none!important;content:none!important}
.mobile-nav button.active{background:var(--accent-wash)!important;color:var(--accent)!important}

@media(prefers-reduced-motion:reduce){
  .anim,.view,.profile-drop,.modal-panel,.toast{animation:none!important}
  .btn,.ghost-btn,.select-path,.chip-btn,.tab,.nav-btn,.filter,.mobile-nav button,
  .progress-line span,.mini-progress span{transition:none!important}
}

/* V15 — interface produit sobre : moins de pills, plus de hiérarchie.
   Visuel uniquement ; logique Firebase/App Check inchangée. */
:root{
  --radius:5px;
  --radius-lg:8px;
  --sans:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --display:var(--sans);
}

/* Les formes arrondies restent pour les éléments utilitaires, pas pour toute l'UI. */
.nav-btn{border-radius:4px!important;padding:8px 12px!important}
.path-mini,.plan-chip,.tag,.chip,.filter,.chip-btn,.path-tags span{border-radius:5px!important}
.toast,.tutor-fab{border-radius:6px!important}
.btn,.ghost-btn,.select-path,.exercise-actions button,.qcm-option{border-radius:5px!important}

/* Transitions courtes et prévisibles. */
.btn,.ghost-btn,.nav-btn,.tab,.filter,.chip-btn,.path-card,.card,.panel,.plan,.lesson-card,.exercise-card,.stat,.project-card,.challenge-card{
  transition:background-color .16s ease,color .16s ease,border-color .16s ease,box-shadow .18s ease,transform .12s ease;
}

/* Pression réelle au clic ; aucun effet "floating card". */
.btn:active,.ghost-btn:active,.exercise-actions button:active,.nav-btn:active,.filter:active,.chip-btn:active{
  transform:translateY(1px);
}

/* Navigation active : texte + filet discret, pas de capsule. */
.nav-btn.active{
  background:transparent!important;
  color:var(--accent)!important;
  box-shadow:inset 0 -2px 0 var(--accent)!important;
}
.nav-btn:hover{background:rgba(23,107,87,.055)!important}

/* Les cartes réagissent par leur bordure, sans déplacement ni halo. */
.card:hover,.path-card:hover,.lesson-card:hover,.exercise-card:hover,.project-card:hover,.challenge-card:hover,.plan:hover{
  transform:none!important;
  box-shadow:none!important;
  border-color:var(--rule-strong);
}

/* Typographie moins "hero généré" : contraste par taille plutôt que par graisse. */
h1,h2,h3{letter-spacing:-.018em}
.hero-dash h1,.page-head h1,.onboarding-intro h1,.auth-copy h1{letter-spacing:-.028em}
.stat strong,.level-num,.hero-progress b{letter-spacing:-.022em}

/* Progression : l'animation représente une vraie donnée qui change. */
.progress-line span,.mini-progress span{transition:width .55s cubic-bezier(.2,.75,.25,1)}

/* Focus clavier clairement visible, sans glow massif. */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

@media(prefers-reduced-motion:reduce){
  .btn,.ghost-btn,.nav-btn,.tab,.filter,.chip-btn,.path-card,.card,.panel,.plan,.lesson-card,.exercise-card,.stat,.project-card,.challenge-card,.progress-line span,.mini-progress span{transition:none!important}
}

/* =========================================================
   ACCUEIL — gestes d'encre en mouvement.
   Direction : papier, encre, filets fins. Une chorégraphie
   d'entrée courte (filet tracé, passage de surligneur), puis
   deux boucles discrètes (curseur, repère de lecture).
   Aucun dégradé animé, aucun effet "génératif".
   ========================================================= */

/* 1. Le filet d'accent sous le titre se trace au chargement. */
.auth-copy h1::after{animation:heroRuleDraw .7s var(--ease) .15s both}
@keyframes heroRuleDraw{from{width:0}}

/* 2. Passage de surligneur sur les mots-clés du titre. */
.auth-copy h1 span{
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  padding:0 .09em;
  margin:0 -.09em;
  background-image:linear-gradient(color-mix(in srgb,var(--accent) 26%,transparent),color-mix(in srgb,var(--accent) 26%,transparent));
  background-repeat:no-repeat;
  background-position:0 54%;
  background-size:0% .94em;
  animation:heroHighlight .75s var(--ease) .55s forwards;
}
@supports not (background:color-mix(in srgb,red 10%,transparent)){
  .auth-copy h1 span{background-image:linear-gradient(var(--accent-wash),var(--accent-wash))}
}
@keyframes heroHighlight{to{background-size:100% .94em}}

/* 3. Note de marge façon REPL : texte posé, curseur qui clignote. */
.hero-note{
  margin:26px 0 0;
  padding:2px 0 2px 13px;
  border-left:2px solid var(--rule-strong);
  font:12.5px/1.7 var(--mono);
  letter-spacing:.01em;
  color:var(--ink-faint);
  animation:heroNoteIn .4s var(--ease) .9s both;
}
.hero-note .hn-prompt{color:var(--accent);font-weight:600;margin-right:8px}
.hero-note .hn-str{color:var(--accent)}
.hn-caret{
  display:inline-block;width:7px;height:1.05em;margin-left:5px;
  vertical-align:-.18em;background:var(--accent);
  animation:heroCaretBlink 1.15s steps(1) 1.4s infinite;
}
@keyframes heroNoteIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes heroCaretBlink{0%,54%{opacity:1}55%,100%{opacity:0}}

/* 4. Un repère parcourt lentement le filet au-dessus des preuves. */
.mini-proof{position:relative;overflow:hidden}
.mini-proof::before{
  content:"";position:absolute;top:-1px;left:0;height:2px;width:38px;
  background:var(--accent);
  animation:heroRuleTravel 11s ease-in-out 1.6s infinite alternate;
}
@keyframes heroRuleTravel{to{left:calc(100% - 38px)}}

/* Mouvement réduit : tout est posé, visible, sans boucle. */
@media(prefers-reduced-motion:reduce){
  .auth-copy h1::after{animation:none!important}
  .auth-copy h1 span{animation:none!important;background-size:100% .94em}
  .hero-note{animation:none!important}
  .hn-caret{animation:none!important;opacity:1}
  .mini-proof::before{animation:none!important}
}

/* =========================================================
   FOND — grille de filets de 1 px + traits qui y circulent.
   Les filets sont posés sur une grille de 64 px, plus visibles
   sur les marges que derrière le contenu. De rares traits verts
   glissent lentement le long des lignes, puis disparaissent.
   Couleurs lues dans --ink / --accent / --paper : le thème vert
   et le mode sombre suivent. Aucune interaction.
   ========================================================= */
#bgLines{
  position:fixed;top:0;left:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
  opacity:0;transition:opacity 1.6s cubic-bezier(.2,.7,.2,1);
}
#bgLines.on{opacity:1}
#app{position:relative}
body .screen.auth-screen,
body .screen.device-screen{background:transparent!important}
/* La carte de connexion était à 90 % d'opacité : on devinerait la grille à travers. */
body .auth-card{background:var(--surface)!important}
@media print{#bgLines{display:none}}

/* Refonte : moins de boîtes, plus de typographie.
   Accueil : le texte est posé sur le papier, le formulaire est séparé par un seul filet.
   Intérieur : le bandeau noir et les cartes bordées deviennent des blocs ouverts. */
html body .eyebrow{font:500 14px/1.3 var(--sans)!important;letter-spacing:0!important;text-transform:none!important;color:var(--ink-faint)!important}
html body .path-mini,html body .plan-chip,html body .tag,html body .chip{border-radius:3px!important}

/* ---------- Accueil ---------- */
html body #authScreen .auth-shell{grid-template-columns:minmax(0,1fr) 380px!important;gap:104px!important;max-width:1120px!important}
html body #authScreen .auth-copy{background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:0!important;color:var(--ink)!important}
html body #authScreen .auth-copy .logo{color:var(--ink)!important;margin-bottom:84px}
html body #authScreen .auth-copy .logo em{color:var(--accent)!important}
html body #authScreen .auth-copy h1{color:var(--ink)!important;font-size:58px!important;max-width:14ch}
html body #authScreen .auth-copy h1 span{color:var(--ink)!important}
html body #authScreen .auth-copy .lead{color:var(--ink-soft)!important}
html body #authScreen .auth-copy .hero-note{color:var(--ink-faint)!important;border-left-color:var(--accent)!important}
html body #authScreen .auth-copy .mini-proof{border-top:1px solid var(--rule)!important}
html body #authScreen .auth-copy .mini-proof span{color:var(--ink-soft)!important}
html body #authScreen .auth-card{background:transparent!important;border:0!important;border-left:1px solid var(--rule-strong)!important;border-radius:0!important;box-shadow:none!important;padding:8px 0 8px 52px!important}
html body #authScreen .auth-card input:not([type=checkbox]){background:transparent!important;border:0!important;border-bottom:1px solid var(--rule-strong)!important;border-radius:0!important;padding:10px 0!important;box-shadow:none!important}
html body #authScreen .auth-card input:not([type=checkbox]):focus{border-bottom-color:var(--accent)!important;box-shadow:none!important;outline:none}
html body #authScreen .auth-card .btn{border-radius:4px!important}
@media(max-width:900px){
  html body #authScreen .auth-shell{grid-template-columns:1fr!important;gap:48px!important}
  html body #authScreen .auth-copy .logo{margin-bottom:48px}
  html body #authScreen .auth-copy h1{font-size:40px!important}
  html body #authScreen .auth-card{border-left:0!important;border-top:1px solid var(--rule-strong)!important;padding:32px 0 0!important}
}

/* ---------- Intérieur ---------- */
html body #appScreen .topbar{background:var(--paper)!important;box-shadow:none!important}
html body #appScreen .hero-dash{background:none!important;border:0!important;border-bottom:1px solid var(--rule-strong)!important;border-radius:0!important;box-shadow:none!important;padding:8px 0 40px!important;margin-bottom:0!important;color:var(--ink)!important}
html body #appScreen .hero-dash h1{color:var(--ink)!important;font-size:48px!important}
html body #appScreen .hero-dash p,html body #appScreen .hero-dash .hero-progress,html body #appScreen .hero-dash .hero-progress span{color:var(--ink-soft)!important}
html body #appScreen .hero-dash .hero-progress b{color:var(--ink)!important}
html body #appScreen .hero-dash + .panel{background:none!important;border:0!important;border-bottom:1px solid var(--rule)!important;border-radius:0!important;box-shadow:none!important;padding:26px 0!important;margin-top:0!important}
html body #appScreen .section-title{font-size:24px!important;margin-top:72px!important;border:0!important}
html body #appScreen .section-title small{font-size:15px!important;font-weight:400!important;color:var(--ink-faint)!important}
html body #appScreen .module-grid{gap:0 44px!important}
html body #appScreen .card.module-card,html body #appScreen .lesson-card,html body #appScreen .exercise-card,html body #appScreen .project-card,html body #appScreen .challenge-card{background:none!important;border:0!important;border-top:1px solid var(--rule-strong)!important;border-radius:0!important;box-shadow:none!important;padding:20px 0 34px!important;transform:none!important}
html body #appScreen .card.module-card.done{border-top-color:var(--accent)!important}
html body #appScreen .module-card .index{font:500 13px/1 var(--mono)!important;letter-spacing:0!important;text-transform:none!important;color:var(--ink-faint)!important}
html body #appScreen .module-card.done .index{color:var(--accent)!important}
html body #appScreen .module-card h3{font-size:21px!important;margin:12px 0 8px!important}
html body #appScreen .module-card p{color:var(--ink-soft)!important}
html body #appScreen .panel,html body #appScreen .stat,html body #appScreen .plan{border-radius:4px!important;box-shadow:none!important}

@page{size:A4 landscape;margin:0}body{margin:0}img{width:100%;display:block}

/* =========================================================
   MOTION V14 — micro-interactions sobres
   Animation utile : feedback d'interaction, jamais décoration.
   ========================================================= */

/* Filières : léger changement de profondeur, sans soulèvement agressif. */
.path-card{
  transition:
    border-color .18s ease,
    background-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}
.path-card:hover{
  transform:translateY(-1px)!important;
  background:var(--surface)!important;
  border-color:var(--accent)!important;
  box-shadow:0 5px 14px rgba(15,23,20,.055)!important;
}
.path-card:active{
  transform:translateY(0)!important;
  box-shadow:0 2px 7px rgba(15,23,20,.045)!important;
}
.path-card .path-icon{
  transition:background-color .18s ease,color .18s ease,transform .18s ease;
}
.path-card:hover .path-icon{
  transform:translateY(-1px);
}

/* Boutons : pression courte au clic, comportement standard des interfaces web. */
.btn,.ghost-btn,.select-path,.chip-btn{
  transition:
    background-color .14s ease,
    color .14s ease,
    border-color .14s ease,
    transform .1s ease!important;
}
.btn:active,.ghost-btn:active,.select-path:active,.chip-btn:active{
  transform:translateY(1px)!important;
}

/* Navigation : changement d'état discret. */
.nav-btn,.tab,.filter,.link-btn,.link-inline{
  transition:color .14s ease,background-color .14s ease,border-color .14s ease!important;
}

/* Focus clavier : apparition douce plutôt qu'effet instantané. */
:focus-visible{
  transition:outline-offset .12s ease,box-shadow .12s ease;
}

/* Progression : le remplissage reste animé car il représente une donnée qui évolue. */
.progress-line span,.mini-progress span{
  transition:width .6s cubic-bezier(.22,.61,.36,1)!important;
}

/* Suppression définitive du pseudo-élément décoratif sous les filières. */
.path-card::after{display:none!important;content:none!important;}

/* Aucun mouvement automatique en mode réduction des mouvements. */
@media(prefers-reduced-motion:reduce){
  .path-card,.path-card .path-icon,.btn,.ghost-btn,.select-path,.chip-btn,
  .nav-btn,.tab,.filter,.link-btn,.link-inline,
  .progress-line span,.mini-progress span{
    transition:none!important;
    transform:none!important;
  }
}

/* ========================================================================
   PHASE 1 — PUBLIC WEBSITE
   ======================================================================== */
.public-screen{position:relative;z-index:1;min-height:100vh;background:var(--paper);color:var(--ink)}
.public-header{position:sticky;top:0;z-index:25;display:flex;align-items:center;gap:34px;min-height:72px;padding:0 clamp(18px,4vw,56px);border-bottom:1px solid var(--rule);background:var(--paper)}
.public-logo{display:inline-flex;align-items:center;gap:9px;color:var(--ink);font-family:var(--sans);font-size:22px;font-weight:700;letter-spacing:-.04em;text-decoration:none;white-space:nowrap}
.public-logo em{font-style:normal;color:var(--accent)}
.public-logo .logo-dot{width:8px;height:8px;background:#d77a31;display:inline-block}
.public-nav{display:flex;align-items:center;gap:4px}
.public-nav a,.public-login{border:0;background:transparent;color:var(--ink-soft);font:500 14.5px/1.2 var(--sans);padding:9px 12px;border-radius:5px;text-decoration:none}
.public-nav a:hover,.public-login:hover{color:var(--ink);background:var(--surface)}
.public-actions{margin-left:auto;display:flex;gap:8px;align-items:center}.public-menu-toggle{display:none;border:1px solid var(--rule-strong);background:var(--surface);color:var(--ink);padding:9px 12px;border-radius:5px;font:600 13px/1 var(--sans);cursor:pointer}.public-mobile-nav{display:none}
.public-cta,.public-login{cursor:pointer}
.public-cta{border:1px solid var(--ink);background:var(--ink);color:#fff;padding:10px 16px;border-radius:5px;font:600 14px/1.2 var(--sans)}
.public-cta:hover{background:var(--accent);border-color:var(--accent)}
.public-main{width:min(1180px,100%);margin:auto;padding:0 clamp(18px,4vw,56px)}
.public-hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);gap:clamp(40px,7vw,96px);align-items:center;min-height:650px;padding:88px 0 82px;border-bottom:1px solid var(--rule)}
.public-kicker{display:inline-flex;align-items:center;gap:9px;margin:0 0 20px;color:var(--ink-faint);font:600 12px/1.3 var(--mono);letter-spacing:.04em;text-transform:uppercase}
.public-kicker::before{content:"";width:24px;height:1px;background:var(--accent)}
.public-hero h1{max-width:11ch;margin:0;font-size:clamp(48px,6.5vw,82px);line-height:.98;letter-spacing:-.055em}
.public-hero h1 span{color:var(--accent)}
.public-hero-copy{max-width:62ch;margin:24px 0 0;font-size:19px;line-height:1.65;color:var(--ink-soft)}
.public-hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.public-button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;border-radius:5px;font:600 14px/1 var(--sans);text-decoration:none;cursor:pointer}
.public-button.primary{border:1px solid var(--accent);background:var(--accent);color:#fff}
.public-button.primary:hover{background:#0f5f49;border-color:#0f5f49}
.public-button.secondary{border:1px solid var(--rule-strong);background:var(--surface);color:var(--ink)}
.public-button.secondary:hover{border-color:var(--ink)}
.public-proof-line{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:34px;padding-top:18px;border-top:1px solid var(--rule);font-size:14px;color:var(--ink-faint)}
.public-proof-line strong{color:var(--ink)}
.public-terminal{border:1px solid var(--rule);background:#101514;color:#e8efeb;border-radius:8px;overflow:hidden;box-shadow:0 18px 48px rgba(17,23,21,.09)}
.public-terminal-head{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid #242d29;background:#151b19}
.public-terminal-head i{width:7px;height:7px;border-radius:50%;background:#6f7e77}
.public-terminal-title{margin-left:4px;color:#9eaca6;font:500 11px/1 var(--mono)}
.public-terminal pre{margin:0;padding:26px 24px 30px;white-space:pre-wrap;font:13px/1.85 var(--mono)}
.public-terminal .accent{color:#77d6af}
.public-terminal .muted{color:#83938b}
.public-section{padding:78px 0;border-bottom:1px solid var(--rule)}
.public-section-head{display:flex;justify-content:space-between;gap:28px;align-items:end;margin-bottom:30px}
.public-section-head h2{margin:0;font-size:38px;letter-spacing:-.045em}
.public-section-head p{max-width:54ch;margin:0;color:var(--ink-soft);font-size:15.5px}
.public-three-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.public-feature,.public-path-card,.public-faq,.public-about-card,.public-contact-card,.public-price-card{background:var(--surface);border:1px solid var(--rule);border-radius:8px}
.public-feature{padding:26px;min-height:210px}
.public-feature-index{font:600 12px/1 var(--mono);color:var(--ink-faint)}
.public-feature h3{margin:20px 0 8px;font-size:22px;letter-spacing:-.03em}
.public-feature p{margin:0;color:var(--ink-soft);font-size:15px;line-height:1.65}
.public-path-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.public-path-card{padding:24px;display:flex;flex-direction:column;min-height:210px}
.public-path-card .public-path-meta{display:flex;justify-content:space-between;gap:12px;color:var(--ink-faint);font:500 12px/1.3 var(--mono)}
.public-path-card h3{margin:18px 0 8px;font-size:22px}
.public-path-card p{margin:0 0 20px;color:var(--ink-soft);font-size:14.5px;line-height:1.6}
.public-path-card a{margin-top:auto;color:var(--ink);font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:4px}
.public-path-card a:hover{color:var(--accent)}
.public-steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.public-step{padding:26px;border-right:1px solid var(--rule)}
.public-step:last-child{border-right:0}
.public-step b{font:600 12px/1 var(--mono);color:var(--accent)}
.public-step h3{margin:16px 0 8px;font-size:20px}
.public-step p{margin:0;color:var(--ink-soft);font-size:14.5px;line-height:1.6}
.public-principle{padding:44px;background:var(--ink);color:#fff;border-radius:8px}
.public-principle p{max-width:48ch;margin:0;font-size:25px;line-height:1.4;letter-spacing:-.025em}
.public-principle span{display:block;margin-top:18px;color:#b7c4be;font-size:13px}
.public-page-head{padding:76px 0 44px;border-bottom:1px solid var(--rule)}
.public-page-head .public-kicker{margin-bottom:16px}
.public-page-head h1{margin:0;max-width:11ch;font-size:clamp(44px,6vw,68px);letter-spacing:-.055em;line-height:.99}
.public-page-head p{max-width:62ch;margin:22px 0 0;color:var(--ink-soft);font-size:18px;line-height:1.65}
.public-breadcrumb{display:inline-block;margin-bottom:18px;color:var(--ink-faint);font-size:13px}
.public-price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:34px}
.public-price-card{padding:28px;display:flex;flex-direction:column}
.public-price-card.featured{border-color:var(--accent)}
.public-price-card .price-label{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--ink-faint)}
.public-price-card h3{font-size:30px;margin:18px 0 6px}
.public-price-card p{margin:0 0 18px;color:var(--ink-soft);font-size:14.5px;line-height:1.6;min-height:70px}
.public-price{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:18px}
.public-price div{border:1px solid var(--rule);border-radius:6px;padding:12px;background:var(--paper)}
.public-price small{display:block;color:var(--ink-faint);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.public-price strong{display:block;margin-top:4px;font-size:20px}
.public-price-card ul{list-style:none;padding:0;margin:0 0 24px;border-top:1px solid var(--rule)}
.public-price-card li{padding:10px 0;border-bottom:1px solid var(--rule);font-size:14px;color:var(--ink-soft)}
.public-price-card li::before{content:"✓";margin-right:9px;color:var(--accent);font-weight:700}
.public-price-card .public-button{margin-top:auto}
.public-help-grid,.public-about-grid,.public-contact-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:14px;margin-top:34px}
.public-faq{padding:0;overflow:hidden}
.public-faq details{border-bottom:1px solid var(--rule);padding:20px 22px}
.public-faq details:last-child{border-bottom:0}
.public-faq summary{cursor:pointer;font-weight:600;color:var(--ink);list-style:none}
.public-faq summary::-webkit-details-marker{display:none}
.public-faq summary::after{content:"+";float:right;color:var(--ink-faint);font-weight:400}
.public-faq details[open] summary::after{content:"−"}
.public-faq p{margin:12px 32px 0 0;color:var(--ink-soft);font-size:14.5px;line-height:1.65}
.public-about-card,.public-contact-card{padding:28px}
.public-about-card h2,.public-contact-card h2{margin:0 0 12px;font-size:28px}
.public-about-card p,.public-contact-card p{color:var(--ink-soft);font-size:15px;line-height:1.7}
.public-contact-card a{color:var(--ink);font-weight:600}
.public-contact-card a:hover{color:var(--accent)}
.public-info-list{margin:22px 0 0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.public-info-list li{display:flex;justify-content:space-between;gap:22px;padding:13px 0;border-bottom:1px solid var(--rule);font-size:14px}
.public-info-list span:first-child{color:var(--ink-faint)}
.public-footer{width:min(1180px,100%);margin:auto;padding:52px clamp(18px,4vw,56px) 28px;border-top:1px solid var(--rule)}
.public-footer-top{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:36px}
.footer-logo{font-size:19px}
.public-footer-top p{color:var(--ink-faint);font-size:14px;margin:12px 0 0}
.public-footer-col{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.public-footer-col strong{font-size:13px;margin-bottom:4px;color:var(--ink)}
.public-footer-col a,.public-footer-col button{border:0;background:none;padding:0;color:var(--ink-soft);font:14px/1.4 var(--sans);text-decoration:none;cursor:pointer}
.public-footer-col a:hover,.public-footer-col button:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.public-mobile-nav a,.public-mobile-nav button{border:0;background:none;color:var(--ink-soft);text-decoration:none;text-align:left;font:500 15px/1.3 var(--sans);padding:12px 0;cursor:pointer}.public-mobile-nav a:hover,.public-mobile-nav button:hover{color:var(--ink)}.public-footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:25px;margin-top:40px;border-top:1px solid var(--rule);color:var(--ink-faint);font-size:12.5px}
.public-route-error{padding:90px 0 130px}
.public-route-error h1{font-size:56px;margin:0 0 14px}
.public-route-error p{color:var(--ink-soft)}

.plan-actions-stack{display:grid;gap:9px}
.billing-choice{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.plan-buy{width:100%;text-align:center}
.plan-key-link{justify-self:start;padding-left:0}

@media(max-width:980px){
  .public-header{gap:18px}
  .public-menu-toggle{display:block}
  .public-mobile-nav{width:100%;display:none;flex-direction:column;padding:8px 0 14px;border-top:1px solid var(--rule)}
  .public-mobile-nav.open{display:flex}
  .public-nav{display:none}
  .public-hero{grid-template-columns:1fr;min-height:auto;padding:68px 0}
  .public-hero h1{max-width:13ch}
  .public-three-grid,.public-path-grid,.public-price-grid{grid-template-columns:repeat(2,1fr)}
  .public-steps{grid-template-columns:repeat(2,1fr)}
  .public-step:nth-child(2){border-right:0}
  .public-step:nth-child(-n+2){border-bottom:1px solid var(--rule)}
  .public-help-grid,.public-about-grid,.public-contact-grid{grid-template-columns:1fr}
  .public-footer-top{grid-template-columns:2fr 1fr 1fr}
  .public-footer-col:last-child{display:none}
}
@media(max-width:680px){
  .public-header{min-height:64px;flex-wrap:wrap;position:sticky}
  .public-header .public-actions{margin-left:auto}
  .public-header{min-height:64px}
  .public-header .public-logo{font-size:20px}
  .public-actions .public-login{display:none}
  .public-cta{padding:9px 13px}
  .public-hero{padding:52px 0 58px}
  .public-hero h1{font-size:48px}
  .public-hero-copy{font-size:17px}
  .public-proof-line{gap:8px 16px}
  .public-three-grid,.public-path-grid,.public-price-grid{grid-template-columns:1fr}
  .public-steps{grid-template-columns:1fr}
  .public-step,.public-step:nth-child(2){border-right:0;border-bottom:1px solid var(--rule)}
  .public-step:last-child{border-bottom:0}
  .public-section{padding:58px 0}
  .public-section-head{display:block}
  .public-section-head h2{font-size:32px;margin-bottom:10px}
  .public-page-head{padding:58px 0 36px}
  .public-page-head h1{font-size:46px}
  .public-price{grid-template-columns:1fr}
  .public-footer-top{grid-template-columns:1fr 1fr;gap:28px}
  .public-footer-top>div:first-child{grid-column:1/-1}
  .public-footer-col:last-child{display:flex}
  .public-footer-bottom{display:block}
  .public-footer-bottom span+span{display:block;margin-top:6px}
}
@media(prefers-reduced-motion:reduce){
}

/* =================== PHASE 2 =================== */
.p2-icon-btn{position:relative;width:34px;height:34px;border:1px solid var(--rule-strong);border-radius:50%;background:transparent;color:var(--ink);font-size:16px;line-height:1;display:grid;place-items:center}
.p2-icon-btn:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.p2-count{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:11px;font-weight:700;display:grid;place-items:center}
.p2-notif{position:relative}
.p2-notif-panel{position:absolute;right:0;top:44px;width:340px;max-width:calc(100vw - 24px);max-height:420px;overflow:auto;background:var(--surface);border:1px solid var(--rule-strong);border-radius:var(--radius-lg);z-index:30;animation:fade .15s var(--ease)}
.p2-notif-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--rule)}
.p2-notif-head .link-btn{padding:0;font-size:13px}
.p2-notif-panel ul,.p2-search-panel ul{list-style:none;margin:0;padding:0}
.p2-notif-panel li{display:grid;gap:2px;padding:12px 16px;border-bottom:1px solid var(--rule);font-size:14px}
.p2-notif-panel li:last-child{border-bottom:0}
.p2-notif-panel li.unread{background:var(--accent-wash)}
.p2-notif-panel li span,.p2-notif-panel li time{color:var(--ink-soft);font-size:13px}
.p2-notif-panel li.empty,.p2-search-panel li.empty{color:var(--ink-faint);text-align:center;padding:24px 16px}
.p2-search{place-items:start center;padding:12vh 16px 16px}
.p2-search-panel{width:100%;max-width:620px;background:var(--surface);border:1px solid var(--rule-strong);border-radius:var(--radius-lg);overflow:hidden;animation:up .2s var(--ease) both}
.p2-search-panel input{width:100%;border:0;border-bottom:1px solid var(--rule);padding:18px 20px;font-size:17px;background:transparent;outline:none}
.p2-search-panel li[data-i]{display:flex;gap:14px;align-items:center;padding:11px 20px;cursor:pointer}
.p2-search-panel li.active{background:var(--accent-wash)}
.p2-search-panel li small{display:block;color:var(--ink-faint);font-size:13px}
.p2-kind-tag{flex:none;min-width:68px;font-size:12px;font-weight:600;color:var(--ink-soft);border:1px solid var(--rule-strong);border-radius:999px;padding:2px 10px;text-align:center}
.p2-hint{margin:0;padding:10px 20px;border-top:1px solid var(--rule);font-size:12.5px;color:var(--ink-faint)}
.p2-doc{display:grid;gap:18px;max-width:760px;margin:0 auto;padding:8px 0 40px}
.p2-release{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-lg);padding:24px}
.p2-release header{display:flex;justify-content:space-between;gap:12px;color:var(--ink-faint);font-size:14px}
.p2-version{font-family:var(--mono);font-weight:600;color:var(--ink)}
.p2-release h2{font-size:24px;margin:10px 0 14px}
.p2-release ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.p2-release li{display:flex;gap:12px;align-items:baseline}
.p2-kind{flex:none;min-width:76px;text-align:center;font-size:12px;font-weight:600;border:1px solid var(--rule-strong);border-radius:999px;padding:1px 10px;color:var(--ink-soft)}
.p2-kind-nouveau{border-color:var(--accent);color:var(--accent)}
.p2-kind-corrige{border-color:var(--warn);color:var(--warn)}
.p2-banner{border:1px solid var(--rule-strong);border-radius:var(--radius-lg);padding:18px 22px;font-weight:600;background:var(--surface)}
.p2-banner.up{border-color:#2f7d4f;color:#1f5e3a}
.p2-banner.down{border-color:var(--danger);color:var(--danger);background:var(--danger-wash)}
.p2-status-list{list-style:none;margin:0;padding:0;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-lg)}
.p2-status-list li{display:flex;justify-content:space-between;gap:12px;padding:16px 22px;border-bottom:1px solid var(--rule)}
.p2-status-list li:last-child{border-bottom:0}
.p2-state.up{color:#1f5e3a;font-weight:600}
.p2-state.down{color:var(--danger);font-weight:600}
.p2-note{font-size:13.5px;margin:0}
@media(max-width:720px){.p2-notif-panel{position:fixed;left:12px;right:12px;top:72px;width:auto}.p2-release li{flex-direction:column;gap:6px}}
.p2-icon-btn{padding:0}
.p2-icon-btn .p2-ico{display:block;width:18px;height:18px;pointer-events:none}

/* =====================================================================
   PHASE 3 — produit mature
   ===================================================================== */
.app-bootstrap-root{min-height:100vh;display:grid;place-items:center;padding:32px;color:var(--ink);background:var(--paper)}
.app-loading{font-family:var(--mono,monospace);font-size:14px;letter-spacing:.02em;color:var(--muted)}
.app-bootstrap-error{width:min(560px,calc(100vw - 40px));padding:32px;border:1px solid var(--rule);background:var(--panel);box-shadow:var(--shadow,0 14px 40px rgba(0,0,0,.08));border-radius:18px}
.app-bootstrap-error h1{margin:0 0 10px;font-size:30px}
.app-bootstrap-error p{margin:0 0 20px;color:var(--muted);line-height:1.65}
.app-bootstrap-error button{border:1px solid var(--ink);background:var(--ink);color:var(--paper);border-radius:10px;padding:10px 15px;cursor:pointer}
.p3-modal{z-index:1200}
.p3-panel{width:min(680px,calc(100vw - 28px));max-height:min(88vh,820px);overflow:auto}
.p3-panel h2{margin-top:0;max-width:22ch}
.p3-panel form{display:grid;gap:16px}
.p3-panel textarea,.p3-panel select,.p3-panel input{width:100%;box-sizing:border-box}
.p3-panel textarea{resize:vertical;min-height:160px}
.p3-account-card{grid-column:1/-1}
.p3-toggle-row{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:16px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.p3-toggle-row span{display:grid;gap:5px;max-width:70ch}
.p3-toggle-row small{color:var(--muted);line-height:1.55}
.p3-toggle-row input{width:22px;height:22px;margin-top:2px;flex:0 0 auto;accent-color:var(--accent)}
.p3-note{margin:12px 0 0}
.p3-install-ready{position:relative}
.p3-install-ready::after{content:"";position:absolute;inset:auto 10px -4px;display:block;height:2px;background:var(--accent);border-radius:99px;transform:translateY(100%)}

@media (max-width:700px){
  .p3-account-card{grid-column:auto}
  .p3-toggle-row{align-items:center}
  .p3-panel{padding:22px}
}

/* =====================================================================
   PHASE 3.3 — PÉDAGOGIE
   ===================================================================== */
.pedagogy-summary{display:grid;gap:18px;margin:14px 0;border-color:var(--accent-border);background:var(--accent-soft)}
.pedagogy-summary h2{margin:0 0 6px;font-size:22px}
.pedagogy-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pedagogy-metrics div{padding:12px 14px;border:1px solid var(--rule);border-radius:9px;background:var(--surface)}
.pedagogy-metrics span,.pedagogy-weak-grid small{display:block;color:var(--ink-faint);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.pedagogy-metrics strong{display:block;margin-top:4px;font-size:15px}
.pedagogy-weak-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pedagogy-weak-grid article{padding:12px;border:1px solid var(--rule);border-radius:9px;background:var(--surface)}
.pedagogy-weak-grid .skill-head{margin-bottom:7px}
.prereq-note{margin:12px 0 20px;padding:11px 13px;border:1px solid var(--rule);border-radius:8px;font-size:13px;color:var(--ink-soft);background:var(--surface)}
.prereq-note.ready{border-color:var(--accent-border)}
.prereq-note.pending{border-color:var(--warning-border,var(--rule-strong))}
.skill-desc{margin:7px 0 8px;color:var(--ink-soft);font-size:12.5px;line-height:1.45}
.skill-prereq{margin-top:9px;color:var(--ink-faint);font-size:11.5px;line-height:1.45}
.skill-chip{border-color:var(--accent-border)}
.review-due{border-color:var(--accent-border);font-weight:700}
.card-learning-note{margin:7px 0 10px;color:var(--ink-faint);font-size:11.5px}
.lesson-learning-meta,.exercise-learning-meta,.project-learning-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:10px 0}
.exercise-learning-meta small{display:block;width:100%;color:var(--ink-faint);font-size:11.5px;line-height:1.45}
.project-learning-meta .chip{white-space:normal}
.project-deliverable{margin:10px 0 0;color:var(--ink-soft);font-size:12.5px;line-height:1.5}
.project-context{display:grid;gap:12px;margin-bottom:12px}
.project-rubric{padding:13px;border:1px solid var(--rule);border-radius:9px;background:var(--surface)}
.project-rubric strong{display:block;margin-bottom:4px}
.project-rubric p{margin:0 0 10px;color:var(--ink-soft);font-size:13px}
.project-rubric ul{margin:6px 0 0;padding-left:18px;color:var(--ink-soft);font-size:12.5px;line-height:1.5}
@media(max-width:720px){.pedagogy-metrics,.pedagogy-weak-grid{grid-template-columns:1fr}.project-rubric{padding:12px}}