/* MJ Academy · « académique sobre » · thèmes sombre (défaut) et clair */
:root{
  color-scheme:dark;
  --bg-a:#0B1A33; --bg-b:#0F2244; --hero:linear-gradient(180deg,#0B1A33 0%,#0E2145 100%); --footer-bg:#081428;
  --text:#C6D3E8; --soft:#C6D3E8; --mute:#93A5C2; --head:#FFFFFF;
  --line:rgba(255,255,255,.14); --card:rgba(255,255,255,.045);
  --accent:#6FA4FF; --accent2:#9CC0FF; --btn:#0F5BD8; --btn-h:#1A6CF0; --btn-a:#0A47B0;
  --solid:#13284F; --input-bg:#0B1A33; --input-line:#2A4474; --ph:#7C90B0; --ph-bg:#1E3A70;
  --pos:#34D399; --neg:#F87171; --gold:#F2B705; --shadow:0 30px 60px -20px rgba(0,0,0,.55);
  /* alias des anciens noms */
  --nuit:var(--bg-a); --nuit2:var(--bg-b); --marine:var(--solid); --carte:var(--card); --bord:var(--line);
  --cyan:var(--accent); --cyan-clair:var(--accent2); --turquoise:var(--accent2); --texte:var(--head); --doux:var(--soft); --gris:var(--mute);
  --encre:var(--head); --pale:var(--bg-b); --sarcelle:var(--accent); --jaune:var(--gold);
  --r:12px;
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg-a:#FFFFFF; --bg-b:#F2F6FC; --hero:linear-gradient(180deg,#F5F8FD 0%,#E6EEFB 100%); --footer-bg:#F2F6FC;
  --text:#33466A; --soft:#33466A; --mute:#5A6C8C; --head:#0B1A33;
  --line:#DCE5F2; --card:#FFFFFF;
  --accent:#0F5BD8; --accent2:#0A47B0;
  --solid:#FFFFFF; --input-bg:#F8FAFD; --input-line:#C5D2E6; --ph:#8696B1; --ph-bg:#E7EFFD;
  --pos:#12A150; --neg:#D64545; --shadow:0 30px 60px -28px rgba(11,26,51,.3);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:16px}
body{margin:0;background:var(--bg-a);color:var(--text);font-family:'Inter',system-ui,sans-serif;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;transition:background .25s,color .25s}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent)}a:hover{color:var(--accent2)}
strong{color:var(--head)}
h1,h2,h3{font-family:'Plus Jakarta Sans','Inter',sans-serif;margin:0;color:var(--head);font-style:normal!important;letter-spacing:-.02em}
h1{font-weight:800;font-size:clamp(34px,5.2vw,58px);line-height:1.08}
h2{font-weight:800;font-size:clamp(28px,3.8vw,42px);line-height:1.15}
h3{font-weight:700;font-size:20px;line-height:1.3}
p{margin:0}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.narrow{max-width:760px;margin:0 auto;padding:0 20px}
.accent{color:var(--accent)}
.muted{color:var(--mute)}
.stack{display:flex;flex-direction:column;gap:20px}
.row{display:flex;flex-wrap:wrap;gap:32px;align-items:center}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
section{position:relative;padding:88px 0;overflow:hidden;background:var(--bg-a)}
.grid-bg{background:var(--hero)}
.glow{display:none}
.light{background:var(--bg-b)}
.cut{clip-path:none;border-radius:var(--r)}

.kicker{font-weight:700;font-size:13px;letter-spacing:.14em;color:var(--accent);text-transform:uppercase;display:flex;align-items:center;gap:10px}
.kicker::before{content:"";width:28px;height:2px;background:currentColor;flex-shrink:0}
.stack[style*="text-align:center"] .kicker{justify-content:center}

/* En-tête */
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 0;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;letter-spacing:.12em;font-size:15px;color:var(--head);text-decoration:none;margin-right:auto}
.brand:hover{color:var(--head)}
.logo-plate{display:inline-flex;width:48px;height:48px;background:#fff;border-radius:10px;overflow:hidden;flex-shrink:0;padding:3px;border:1px solid var(--line)}
.logo-plate img{width:100%;height:100%;object-fit:contain}
.nav{display:flex;gap:2px;align-items:center;flex-wrap:wrap}
.nav a{color:var(--soft);text-decoration:none;font-weight:600;font-size:15px;padding:9px 14px;border-radius:8px;min-height:40px;display:inline-flex;align-items:center}
.nav a:hover{color:var(--head);background:var(--card)}
.nav a.shop{background:var(--btn);color:#fff;margin-left:6px}
.nav a.shop:hover{background:var(--btn-h)}
.theme-toggle{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--head);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;flex-shrink:0}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent)}
.theme-toggle svg{width:20px;height:20px}
.theme-toggle .i-sun{display:none}
:root[data-theme="light"] .theme-toggle .i-sun{display:block}
:root[data-theme="light"] .theme-toggle .i-moon{display:none}
.badge{font-weight:700;font-size:12px;letter-spacing:.1em;color:#fff;background:var(--btn);padding:8px 14px;border-radius:999px}

/* Boutons */
.btn{display:inline-flex;flex-wrap:wrap;gap:0 .3em;align-items:center;justify-content:center;text-align:center;line-height:1.25;min-height:52px;padding:15px 30px;border:0;cursor:pointer;border-radius:10px;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:17px;letter-spacing:.01em;text-decoration:none;color:#fff;background:var(--btn);
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 8px 20px -8px rgba(15,91,216,.7);transition:transform .15s,background .15s,box-shadow .15s}
.btn:hover{background:var(--btn-h);color:#fff;transform:translateY(-1px)}
.btn:active{transform:translateY(0);background:var(--btn-a)}
.btn:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible,.theme-toggle:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.btn.big{font-size:18px;padding:18px 36px}
.btn.ghost{background:transparent;color:var(--head);border:1.5px solid var(--line);box-shadow:none}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent);background:transparent}
.btn.block{width:100%}
.btn.small{min-height:44px;padding:10px 20px;font-size:15px}

/* Cartes */
.card{background:var(--card);border:1px solid var(--line);padding:26px;border-radius:var(--r)}
.card h3{margin-bottom:8px}
.big-num{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:48px;line-height:1;color:var(--accent);letter-spacing:-.03em;margin-bottom:14px}
.check{display:flex;gap:12px;align-items:flex-start}
.check svg{flex-shrink:0;margin-top:5px}
.check svg path{stroke:var(--accent)}
.prompt{background:var(--solid);color:var(--text);border:1px solid var(--line);border-left:4px solid var(--btn);padding:18px 20px;font-size:15.5px;line-height:1.6;border-radius:8px}
.prompt .ph{color:var(--accent);font-weight:700;background:var(--ph-bg);padding:0 4px;border-radius:4px}
.prompt .num{font-weight:700;font-size:11px;letter-spacing:.12em;color:var(--accent);margin-bottom:8px;display:block}

/* Formulaire */
.form{background:var(--solid);color:var(--text);border:1px solid var(--line);padding:32px 28px;display:flex;flex-direction:column;gap:14px;border-radius:16px;box-shadow:var(--shadow)}
.form h3{font-size:24px}
.form .muted{color:var(--mute)}
.form label{font-weight:600;font-size:14px;display:flex;flex-direction:column;gap:6px;color:var(--head)}
.form input,.form select{font:inherit;font-size:16px;padding:13px 14px;border:1px solid var(--input-line);background:var(--input-bg);color:var(--head);min-height:48px;width:100%;border-radius:8px}
.form input:focus,.form select:focus{border-color:var(--btn)}
.form input::placeholder{color:var(--ph)}
.form .consent{flex-direction:row;align-items:flex-start;gap:10px;font-weight:400;font-size:13px;color:var(--mute)}
.form .consent input{width:20px;min-height:20px;height:20px;margin-top:2px;flex-shrink:0;accent-color:var(--btn)}
.form .note{font-size:13px;color:var(--mute);text-align:center}
.hidden{display:none!important}

/* Compte à rebours */
.countdown{display:flex;gap:10px;justify-content:center}
.countdown div{background:var(--card);border:1px solid var(--line);min-width:68px;padding:10px 8px;text-align:center;border-radius:8px}
.countdown b{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:28px;color:var(--accent);line-height:1.1}
.countdown span{font-size:10px;font-weight:600;letter-spacing:.12em;color:var(--mute)}

/* Étapes */
.steps{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;font-weight:600;font-size:12px;letter-spacing:.06em}
.steps span{padding:7px 12px;border:1px solid var(--line);color:var(--mute);border-radius:999px}
.steps span.on{border-color:var(--btn);color:#fff;background:var(--btn)}

/* Copier */
.copy{margin-top:12px;font:600 13px 'Inter',sans-serif;border:1px solid var(--btn);background:transparent;color:var(--accent);padding:8px 14px;cursor:pointer;min-height:40px;border-radius:8px}
.copy:hover{background:var(--ph-bg)}
.copy.ok{background:var(--btn);color:#fff}

/* Réseaux */
.socials{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.social{display:flex;align-items:center;gap:14px;padding:16px 20px;background:var(--card);border:1px solid var(--line);color:var(--head);text-decoration:none;min-height:64px;border-radius:10px;transition:border-color .15s}
.social:hover{border-color:var(--accent);color:var(--head)}
.social small{display:block;color:var(--mute);font-size:13px}
.social.soon{opacity:.55;pointer-events:none}
.social svg{flex-shrink:0}

/* Pied de page */
footer{padding:48px 0 56px;text-align:center;font-size:14px;color:var(--mute);border-top:1px solid var(--line);background:var(--footer-bg)}
footer a{color:var(--soft)}
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 20px}
.footer-logo{width:96px;height:96px;margin:0 auto 4px;background:#fff;border-radius:16px;padding:6px;border:1px solid var(--line)}
.footer-logo img{width:100%;height:100%;object-fit:contain}
.sticky-cta{position:fixed;left:0;right:0;bottom:0;padding:10px 14px;background:var(--bg-a);border-top:1px solid var(--line);display:none;z-index:20}

/* Composants page de vente */
.proof{background:var(--bg-b);border-bottom:1px solid var(--line);padding:0}
.proof .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.proof .item{padding:26px 18px;text-align:center;border-right:1px solid var(--line)}
.proof .item:last-child{border-right:0}
.proof b{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:34px;line-height:1.1;color:var(--accent);letter-spacing:-.02em}
.proof span{font-size:13px;color:var(--mute);font-weight:500}
.pills{display:flex;flex-wrap:wrap;gap:10px}
.pill{font-size:13px;font-weight:600;color:var(--soft);border:1px solid var(--line);border-radius:999px;padding:7px 14px;background:var(--card)}
.steps3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px;counter-reset:s}
.steps3 .s{padding-top:20px;border-top:2px solid var(--line)}
.steps3 .s::before{counter-increment:s;content:"0" counter(s);display:block;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:15px;color:var(--accent);margin-bottom:10px;letter-spacing:.08em}
.steps3 .s h3{margin-bottom:6px}
.steps3 .s p{font-size:15px}
.pain{display:flex;flex-direction:column;gap:12px;padding:24px 26px;background:var(--solid);border:1px solid var(--line);border-left:4px solid var(--neg);border-radius:8px}
.fit{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.fit>div{padding:28px;border-radius:var(--r);background:var(--solid);border:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.fit .yes{border-top:4px solid var(--pos)}
.fit .no{border-top:4px solid var(--neg)}
.price-card{background:var(--solid);border:1px solid var(--line);border-radius:20px;padding:44px 28px;box-shadow:var(--shadow);text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.price-big{display:flex;align-items:baseline;gap:10px;color:var(--accent)}
.price-big b{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:clamp(64px,12vw,96px);line-height:1;letter-spacing:-.04em}
.price-big span{font-weight:700;font-size:24px;color:var(--head)}
.secure{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;font-size:13px;color:var(--mute)}
.secure span::before{content:"✓ ";color:var(--pos);font-weight:700}

/* Images */
.hero-stack{position:relative;min-width:min(100%,400px);display:flex;justify-content:center;align-items:center;min-height:440px}
.hero-stack img{position:absolute;border-radius:6px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.hero-stack .main{position:relative;width:100%;max-width:300px;z-index:2}
.hero-stack .b-left{width:42%;max-width:170px;left:2%;top:50%;transform:translateY(-50%) rotate(-9deg);z-index:1}
.hero-stack .b-right{width:42%;max-width:170px;right:2%;top:50%;transform:translateY(-50%) rotate(9deg);z-index:1}
.cover{border-radius:6px;box-shadow:0 30px 60px -20px rgba(0,0,0,.55)}
.fig{margin:0;display:flex;flex-direction:column;gap:10px}
.fig img{width:100%;height:auto;border-radius:12px;box-shadow:0 20px 40px -20px rgba(0,0,0,.5)}
.fig figcaption{font-size:14px;color:var(--mute);text-align:center}
.phone{flex:0 0 auto;margin:0 auto;filter:drop-shadow(0 24px 30px rgba(0,0,0,.3))}
.phone svg{display:block;max-width:100%;height:auto}
.cat-icon{width:44px;height:44px;margin-bottom:16px;color:var(--accent)}

/* Formations */
.prod-feature{display:grid;grid-template-columns:minmax(0,260px) 1fr;gap:36px;align-items:center;padding:32px;background:var(--solid);border:1px solid var(--accent);border-radius:20px;box-shadow:var(--shadow)}
.tag{display:inline-block;font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--btn);padding:6px 12px;border-radius:999px;align-self:flex-start}
.prod-feature img{border-radius:6px;box-shadow:0 24px 50px -20px rgba(0,0,0,.6)}
.prod-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.prod{display:flex;flex-direction:column;gap:12px;padding:24px;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.prod.soon{border-style:dashed}
.prod .tag{font-size:11px;color:var(--accent);background:transparent;border:1px solid var(--line);padding:4px 10px}
.prod img{border-radius:8px;width:100%}
.prod .btn{margin-top:auto}
.prod .ico{width:44px;height:44px;color:var(--accent)}

/* À propos */
.about{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;align-items:center}
.about-card{display:flex;flex-direction:column;align-items:center;gap:20px;padding:36px 28px;background:var(--solid);border:1px solid var(--line);border-radius:20px;text-align:center;box-shadow:var(--shadow)}
.about-card .logo-big{width:180px;height:180px;background:#fff;border-radius:20px;padding:10px;border:1px solid var(--line)}
.about-card .logo-big img{width:100%;height:100%;object-fit:contain}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%}
.values div{padding:12px 6px;border:1px solid var(--line);border-radius:10px;font-weight:700;font-size:14px;color:var(--head)}
.values small{display:block;font-weight:400;font-size:12px;color:var(--mute);margin-top:2px}
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.pillar{display:flex;flex-direction:column;gap:6px;padding:20px;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.pillar h3{font-size:17px}
.pillar p{font-size:15px;color:var(--mute)}
.band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding:28px 32px;background:var(--solid);border:1px solid var(--line);border-radius:16px}

@media (max-width:820px){
  .about,.prod-feature{grid-template-columns:1fr}
  .prod-feature{padding:24px}
  .prod-feature>div:first-child{max-width:220px;margin:0 auto}
}
@media (max-width:720px){
  section{padding:60px 0}
  .sticky-cta{display:block}
  body.has-sticky{padding-bottom:78px}
  .countdown div{min-width:58px}
  .proof .item{border-right:0;border-bottom:1px solid var(--line);padding:18px}
  .btn.big{font-size:16px;padding:16px 18px;width:100%}
  .top{gap:10px 12px}
  .brand{margin-right:0;flex:1}
  .nav{order:3;width:100%;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding-bottom:2px}
  .nav a{white-space:nowrap}
  .hero-stack{min-height:380px}
  .hero-stack .main{max-width:230px}
  .hero-stack .b-left,.hero-stack .b-right{max-width:120px}
  .fig{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .fig img{min-width:640px;max-width:none;width:640px}
  .fig figcaption{position:sticky;left:0}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,body{transition:none}}