/* Déclic · interface JenguAI (lot 1). Chargée après app.min.css.
   Reprend les écrans validés du canevas : bleu nuit, bleu électrique, or, orange ; Montserrat, Poppins, Inter. */
@font-face{font-family:Montserrat;src:url(fonts/montserrat.woff2) format("woff2");font-weight:700 800;font-display:swap}
@font-face{font-family:Poppins;src:url(fonts/poppins-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/inter.woff2) format("woff2");font-weight:400 700;font-display:swap}

:root{
  --nuit:#071b3a;--profond:#040f24;--surface:#0c2650;--bleu:#0060ff;--lumiere:#3d8bff;--ciel:#9cc3ff;
  --or:#f5b400;--or-clair:#ffd35c;--orange:#f28a1e;--texte2:#d9e2f2;--discret:#9aaed0;
  --t-titre:Montserrat,"Arial Black",sans-serif;--t-sous:Poppins,Montserrat,sans-serif;--t-texte:Inter,system-ui,sans-serif;
  color-scheme:dark;
}

/* Fond commun : bleu nuit et halos qui bougent lentement */
html,body{background:var(--nuit)}
body{color:#fff;font-family:var(--t-texte);font-size:16px}
body::before,body::after{content:"";position:fixed;z-index:-1;border-radius:999px;filter:blur(50px);pointer-events:none;animation:dj-derive 12s ease-in-out infinite alternate}
body::before{width:340px;height:340px;right:-140px;top:-80px;background:var(--bleu);opacity:.55}
body::after{width:280px;height:280px;left:-140px;bottom:-60px;background:var(--or);opacity:.22;animation-delay:-6s}
@keyframes dj-derive{0%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.18)}100%{transform:translate(-30px,40px) scale(.92)}}
h1,h2,h3{font-family:var(--t-titre)}

/* En-tête : marque Déclic + compteurs série et étincelles */
body header{background:transparent!important;border:0!important;padding:16px max(18px,calc((100% - 560px)/2)) 6px!important;display:flex;align-items:center;gap:8px}
body header .brand{color:#fff}
body header .brand strong{font-family:var(--t-titre);font-weight:800;font-size:24px;letter-spacing:-.5px}
body header .brand strong span{color:var(--or);font-family:var(--t-titre)}
body header .brand{font-size:0}
body header .brand strong{font-size:24px}
#spark-chip{display:none!important}
body header .header-offer{display:none}
.dj-compteurs{margin-left:auto;display:flex;gap:6px}
.dj-compteur{min-height:44px;display:inline-flex;align-items:center;gap:6px;padding:0 13px;border-radius:999px;border:0;font:600 14px var(--t-sous);cursor:pointer}
.dj-compteur.serie{background:linear-gradient(135deg,var(--orange),var(--or));color:var(--nuit);box-shadow:0 0 18px #f28a1e8c}
.dj-compteur.serie.eteinte{background:#ffffff1a;color:var(--texte2);box-shadow:none}
.dj-compteur.etinc{background:#f5b40026;color:var(--or-clair);box-shadow:inset 0 0 0 1.5px var(--or)}
.dj-flamme{transform-origin:50% 100%;animation:dj-flamme .5s ease-in-out infinite alternate}
@keyframes dj-flamme{from{transform:scaleY(1) rotate(-5deg)}to{transform:scaleY(1.15) rotate(5deg)}}
body[data-view="lesson"] header,body[data-view="onboard"] header{display:none}

/* Zone principale */
main{max-width:560px!important;margin:8px auto 110px!important;padding:0 18px!important}
body[data-view="lesson"] main,body[data-view="onboard"] main{margin-top:0!important;margin-bottom:24px!important}

/* Barre du bas */
body nav{background:#040f24f2!important;border-top:1px solid #ffffff1a;box-shadow:none!important;padding:6px 6px calc(10px + env(safe-area-inset-bottom))!important;gap:0!important;justify-content:space-around!important;left:0!important;right:0!important;bottom:0!important;border-radius:0!important;max-width:none!important;width:auto!important;transform:none!important}
body nav button{flex:1;min-height:54px;flex-direction:column!important;gap:3px!important;background:transparent!important;color:var(--discret)!important;font:600 12px var(--t-sous)!important;border-radius:14px!important;padding:4px!important;box-shadow:none!important}
body nav button[aria-current="page"],body nav button.active{color:var(--or)!important}

/* Composants communs */
.dj{display:flex;flex-direction:column;gap:16px;animation:dj-entree .5s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes dj-entree{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.dj p{margin:0}
.dj h1,.dj h2{margin:0;line-height:1.08;text-wrap:balance;color:#fff}
.dj h1{font-size:28px;font-weight:800}
.dj h2{font-size:24px;font-weight:800}
.dj-or{background:linear-gradient(90deg,var(--or-clair),var(--or),var(--orange));-webkit-background-clip:text;background-clip:text;color:transparent}
.dj-surtitre{font:600 12px var(--t-sous);letter-spacing:.14em;text-transform:uppercase;color:#7fb2ff}
.dj-doux{color:var(--texte2);font-size:16px;line-height:1.5}
.dj-btn{min-height:54px;width:100%;border:0;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:10px;padding:0 22px;font:800 17px var(--t-titre);cursor:pointer;text-decoration:none;position:relative;overflow:hidden;transition:transform .15s}
.dj-btn:active{transform:translateY(3px) scale(.98)}
.dj-btn.or{background:linear-gradient(90deg,var(--or-clair),var(--or));color:var(--nuit);box-shadow:0 5px 0 #b98700,0 0 26px #f5b40055}
.dj-btn.or::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#fff9 50%,transparent 70%);transform:translateX(-130%);animation:dj-reflet 2.8s ease-in-out infinite;pointer-events:none}
@keyframes dj-reflet{0%,55%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
.dj-btn.clair{background:#ffffff14;color:#fff;box-shadow:inset 0 0 0 1.5px #ffffff59}
.dj-btn.nuit{background:var(--nuit);color:var(--or-clair)}
.dj-btn:disabled{background:#ffffff1f;color:var(--discret);box-shadow:none;cursor:not-allowed}
.dj-btn:disabled::after{display:none}
.dj-lien{background:none;border:0;color:var(--ciel);font:600 16px var(--t-texte);text-decoration:underline;text-underline-offset:4px;min-height:44px;cursor:pointer;align-self:center}
.dj-carte{border-radius:22px;padding:18px;background:linear-gradient(160deg,#0060ff40,#0c2650e6);box-shadow:inset 0 0 0 1.5px #3d8bff8c}
.dj-bulle{padding:10px 14px;border-radius:16px 16px 16px 4px;background:#fff;color:var(--nuit);font:600 14px/1.35 var(--t-sous);box-shadow:0 8px 24px #0005;animation:dj-pop .5s cubic-bezier(.3,1.6,.5,1) both}
@keyframes dj-pop{from{opacity:0;transform:scale(.6) translateY(8px)}to{opacity:1;transform:none}}
.dj-presse{transition:transform .15s}.dj-presse:active{transform:translateY(3px) scale(.97)}
.dj :focus-visible,body nav button:focus-visible,.dj-compteur:focus-visible{outline:3px solid var(--or-clair);outline-offset:3px}

/* Mascotte */
.dj-goutte .oeil{transform-box:fill-box;transform-origin:center;animation:dj-cligne 4s infinite}
@keyframes dj-cligne{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.dj-balance{animation:dj-balance 2.4s ease-in-out infinite;transform-origin:50% 100%}
@keyframes dj-balance{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-8px) rotate(4deg)}}
.dj-saute{animation:dj-saute .9s cubic-bezier(.3,1.6,.5,1) infinite;transform-origin:50% 100%}
@keyframes dj-saute{0%,100%{transform:translateY(0) scale(1,1)}35%{transform:translateY(-24px) scale(.94,1.08)}65%{transform:translateY(0) scale(1.1,.9)}}
.dj-triste{animation:dj-triste .6s ease both;transform-origin:50% 100%}
@keyframes dj-triste{to{transform:rotate(-12deg) translateY(4px) scale(.95)}}

/* Ouverture */
.dj-avantapres{display:grid;gap:10px}
.dj-ap{border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.dj-ap small{font:600 12px var(--t-sous);letter-spacing:.1em;text-transform:uppercase}
.dj-ap.avant{background:#ffffff0f;box-shadow:inset 0 0 0 1.5px #ffffff26}
.dj-ap.avant small{color:var(--discret)}
.dj-ap.apres{background:linear-gradient(135deg,#ffd35c,#f5b400);color:var(--nuit)}
.dj-gains{display:flex;flex-wrap:wrap;gap:6px}
.dj-gains span{padding:6px 12px;border-radius:999px;background:#ffffff14;font:600 14px var(--t-sous);color:var(--texte2)}

/* Choix du métier (écran 1 du canevas) */
.dj-progres-onb{display:flex;gap:6px;align-items:center}
.dj-progres-onb i{flex:1;height:8px;border-radius:999px;background:#ffffff33}
.dj-progres-onb i.on{background:linear-gradient(90deg,var(--or),var(--or-clair),var(--orange),var(--or));background-size:200% 100%;animation:dj-flux 2.4s linear infinite}
@keyframes dj-flux{to{background-position:-200% 0}}
.dj-recherche{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;border-radius:14px;background:#040f24a6;box-shadow:inset 0 0 0 1.5px #3d8bff8c}
.dj-recherche input{flex:1;min-width:0;height:46px;border:0;background:transparent;color:#fff;font:16px var(--t-texte);outline:none}
.dj-recherche input::placeholder{color:var(--discret)}
.dj-familles{display:flex;gap:8px;overflow-x:auto;margin:0 -18px;padding:2px 18px;scrollbar-width:none}
.dj-familles::-webkit-scrollbar{display:none}
.dj-familles button{flex-shrink:0;min-height:44px;padding:0 15px;border:0;border-radius:999px;background:#0060ff33;box-shadow:inset 0 0 0 1.5px #3d8bff99;color:#fff;font:600 14px var(--t-sous);cursor:pointer}
.dj-familles button[aria-pressed="true"]{background:linear-gradient(90deg,var(--or-clair),var(--or));color:var(--nuit);box-shadow:0 0 16px #f5b40080}
.dj-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.dj-metier{min-height:82px;padding:11px 12px;border:0;border-radius:16px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:6px;text-align:left;cursor:pointer;background:linear-gradient(160deg,#0060ff52,#0c2650e0);box-shadow:inset 0 0 0 1.5px #3d8bff8c,0 4px 0 #0006;color:#fff;font:800 14px/1.15 var(--t-titre)}
.dj-metier[aria-pressed="true"]{background:linear-gradient(135deg,var(--or-clair),var(--or) 55%,var(--orange));color:var(--nuit);box-shadow:0 0 24px #f5b4008c,0 4px 0 #b98700;animation:dj-choisi .45s cubic-bezier(.3,1.7,.5,1) both}
@keyframes dj-choisi{from{transform:scale(.9)}to{transform:scale(1.03)}}
.dj-quotidien{display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 14px;border:0;border-radius:18px;text-align:left;cursor:pointer;background:#f5b40014;box-shadow:inset 0 0 0 1.5px #ffd35cb3;color:#fff;font:16px var(--t-texte)}
.dj-quotidien[aria-pressed="true"]{background:linear-gradient(135deg,var(--lumiere),var(--bleu));box-shadow:0 0 26px #3d8bffb3}
.dj-quotidien b{display:block;font:800 15px var(--t-titre)}
.dj-quotidien small{font-size:14px;color:var(--texte2)}
.dj-rond{flex-shrink:0;width:42px;height:42px;border-radius:999px;display:grid;place-items:center;background:#f5b4002e}

/* Accueil (écran 2 du canevas) */
.dj-jour{display:flex;align-items:center;gap:14px;padding:15px 16px;border-radius:20px;background:linear-gradient(135deg,var(--bleu),var(--lumiere));box-shadow:0 10px 30px #0060ff73}
.dj-anneau{position:relative;width:58px;height:58px;flex-shrink:0;border-radius:999px}
.dj-anneau b{position:absolute;inset:6px;border-radius:999px;background:var(--bleu);display:grid;place-items:center;font:800 14px var(--t-titre)}
.dj-chapitre{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 15px;border-radius:16px;background:#040f2499;box-shadow:inset 0 0 0 1.5px #f5b40099}
.dj-chapitre small{display:block;font:600 12px var(--t-sous);letter-spacing:.12em;text-transform:uppercase;color:var(--or-clair)}
.dj-chapitre b{font:800 16px var(--t-titre)}
.dj-chemin{position:relative;display:flex;flex-direction:column;gap:6px;padding:8px 0 4px}
.dj-chemin svg.trace{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.dj-chemin .trace path{stroke-dasharray:3 12;animation:dj-pointilles 1.2s linear infinite}
@keyframes dj-pointilles{to{stroke-dashoffset:-30}}
.dj-etape{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;width:150px}
.dj-noeud{width:66px;height:66px;border-radius:999px;border:0;display:grid;place-items:center;cursor:pointer;font:800 18px var(--t-titre)}
.dj-noeud.fait{background:linear-gradient(135deg,var(--or-clair),var(--or));color:var(--nuit);box-shadow:0 6px 0 #b98700;animation:dj-fait .7s cubic-bezier(.3,1.7,.5,1) both}
@keyframes dj-fait{from{transform:scale(.3) rotate(-90deg);opacity:0}to{transform:none;opacity:1}}
.dj-noeud.actuel{width:86px;height:86px;background:linear-gradient(135deg,var(--or-clair),var(--or) 60%,var(--orange));color:var(--nuit);animation:dj-pulse 1.8s ease-in-out infinite}
@keyframes dj-pulse{0%,100%{box-shadow:0 0 0 0 #f5b40099,0 6px 0 #b98700}50%{box-shadow:0 0 0 18px #f5b40000,0 6px 0 #b98700}}
.dj-noeud.ferme{background:#0c2650e6;box-shadow:inset 0 0 0 2px #3d8bff99;color:var(--ciel)}
.dj-noeud.libre{background:#0c2650e6;box-shadow:inset 0 0 0 2px var(--or);color:var(--or-clair)}
.dj-etape span{font-size:14px;line-height:1.25;text-align:center;color:var(--texte2)}
.dj-etape.actuelle span{color:#fff;font-weight:600}
.dj-etiquette{padding:6px 12px;border-radius:10px;background:#fff;color:var(--nuit);font:800 12px var(--t-titre);letter-spacing:1px;box-shadow:0 6px 16px #0005;animation:dj-flotte 1.6s ease-in-out infinite}
@keyframes dj-flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.dj-tout summary{min-height:48px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font:600 15px var(--t-sous);color:var(--ciel);list-style:none}
.dj-tout summary::-webkit-details-marker{display:none}
.dj-liste{display:flex;flex-direction:column;gap:8px}
.dj-liste button{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 12px;border:0;border-radius:14px;background:#ffffff0d;box-shadow:inset 0 0 0 1px #ffffff1f;color:#fff;text-align:left;cursor:pointer;font:15px var(--t-texte)}
.dj-liste i{font-style:normal;flex-shrink:0;width:34px;height:34px;border-radius:999px;display:grid;place-items:center;font:800 13px var(--t-titre);background:#ffffff14}
.dj-liste small{display:block;font-size:13px;color:var(--discret)}
.dj-essai{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:22px;background:linear-gradient(135deg,var(--bleu),var(--lumiere));box-shadow:0 10px 30px #0060ff80}
.dj-puces{display:flex;flex-wrap:wrap;gap:6px}
.dj-puces span{padding:4px 10px;border-radius:999px;background:#ffffff2e;font:600 13px var(--t-sous)}

/* Leçon */
.dj-barre{display:flex;align-items:center;gap:10px;padding-top:14px}
.dj-icone{width:44px;height:44px;flex-shrink:0;border-radius:999px;border:0;background:#ffffff14;color:#fff;display:grid;place-items:center;cursor:pointer}
.dj-icone.nu{background:none;color:var(--discret)}
.dj-icone[aria-pressed="true"]{background:var(--or);color:var(--nuit)}
.dj-progression{flex:1;height:12px;border-radius:999px;background:#ffffff26;overflow:hidden}
.dj-progression div{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--or),var(--or-clair));box-shadow:0 0 12px #f5b400cc;transition:width .5s cubic-bezier(.3,1.4,.5,1)}
.dj-ecran{min-height:calc(100vh - 110px);min-height:calc(100dvh - 110px);display:flex;flex-direction:column;gap:16px;animation:dj-glisse .45s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes dj-glisse{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
.dj-trio{display:flex;flex-direction:column;gap:8px}
.dj-trio div{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:14px;background:#ffffff12;font-weight:600;line-height:1.35}
.dj-trio span{width:30px;height:30px;border-radius:9px;flex-shrink:0;display:grid;place-items:center;font:800 15px var(--t-titre);color:var(--nuit)}
.dj-choix{display:flex;flex-direction:column;gap:12px}
.dj-choix button{min-height:70px;display:flex;align-items:center;gap:14px;padding:12px 14px;border:0;border-radius:18px;text-align:left;cursor:pointer;background:linear-gradient(160deg,#0060ff59,#0c2650e6);box-shadow:inset 0 0 0 2px #3d8bffb3,0 5px 0 #0006;color:#fff;font:500 16px/1.4 var(--t-texte)}
.dj-choix button i{flex-shrink:0;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#ffffff1f;font:800 14px var(--t-titre);font-style:normal}
.dj-choix button.bon{background:linear-gradient(135deg,var(--or-clair),var(--or));color:var(--nuit);box-shadow:0 5px 0 #b98700;animation:dj-gagne .6s cubic-bezier(.3,1.8,.5,1) both}
.dj-choix button.bon i{background:var(--nuit);color:var(--or-clair)}
.dj-choix button.faux{background:#9aaed02e;box-shadow:inset 0 0 0 2px var(--discret);animation:dj-secoue .35s ease 2}
@keyframes dj-gagne{from{transform:scale(.92)}to{transform:scale(1.02)}}
@keyframes dj-secoue{25%{transform:translateX(-8px) rotate(-1deg)}75%{transform:translateX(8px) rotate(1deg)}}
.dj-mascotte-ligne{display:flex;align-items:flex-end;gap:10px}
.dj-mascotte-ligne .dj-bulle{margin-bottom:46px}
.dj-demande{border-radius:20px;padding:14px 16px;background:linear-gradient(160deg,#0c2650,#0a2047);box-shadow:inset 0 0 0 1.5px #3d8bffb3;font-size:16px;line-height:1.7;min-height:130px;animation:dj-lueur 2.5s ease-in-out infinite}
@keyframes dj-lueur{0%,100%{box-shadow:inset 0 0 0 1.5px #3d8bffb3,0 0 18px #0060ff59}50%{box-shadow:inset 0 0 0 1.5px #3d8bffb3,0 0 34px #3d8bffb3}}
.dj-demande mark{display:inline;padding:1px 6px;border-radius:6px;font-weight:600;color:#fff;animation:dj-tombe .5s cubic-bezier(.3,1.8,.5,1) both}
@keyframes dj-tombe{from{opacity:0;transform:translateY(-26px) scale(.4)}to{opacity:1;transform:none}}
.dj-jauge{display:flex;flex-direction:column;gap:6px;font:600 14px var(--t-sous)}
.dj-jauge>span{display:flex;justify-content:space-between;color:var(--discret)}
.dj-jauge>span b{color:var(--or-clair)}
.dj-jauge div{height:12px;border-radius:999px;background:#ffffff26;overflow:hidden}
.dj-jauge i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--bleu),var(--lumiere),var(--or),var(--orange),var(--bleu));background-size:300% 100%;animation:dj-flux 3s linear infinite;transition:width .5s cubic-bezier(.3,1.5,.5,1)}
.dj-blocs{display:flex;flex-direction:column;gap:9px}
.dj-blocs button{min-height:54px;display:flex;align-items:center;gap:12px;padding:8px 14px;border:0;border-radius:16px;text-align:left;cursor:pointer;font:600 15px/1.3 var(--t-texte);box-shadow:0 5px 0 var(--ombre,#0006);transition:transform .15s}
.dj-blocs button small{flex-shrink:0;width:60px;font:600 11px var(--t-sous);letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.dj-blocs button[aria-pressed="true"]{background:transparent!important;color:var(--discret)!important;box-shadow:inset 0 0 0 1.5px #d9e2f240!important}
.dj-reponse{border-radius:20px 20px 20px 6px;padding:15px 16px;background:#ffffff14;font-size:16px;line-height:1.75}
.dj-reponse button{border:0;background:none;color:inherit;font:inherit;padding:2px 4px;border-radius:6px;cursor:pointer;text-decoration:underline dotted #ffffffa6;text-underline-offset:5px}
.dj-reponse button.trouve{background:var(--orange);color:var(--nuit);text-decoration:none;font-weight:700}
.dj-copie{border-radius:16px;padding:14px;background:#040f24;font-size:16px;line-height:1.6;color:var(--texte2);user-select:all}
.dj-outils{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.dj-outils a{min-height:52px;border-radius:14px;display:grid;place-items:center;text-decoration:none;color:#fff;font:600 15px var(--t-sous);background:#ffffff14;box-shadow:inset 0 0 0 1.5px #ffffff4d}
.dj-pied{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-bottom:12px}
.dj-panneau{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:20px max(18px,calc((100% - 560px)/2)) calc(22px + env(safe-area-inset-bottom));border-radius:26px 26px 0 0;display:flex;flex-direction:column;gap:10px;animation:dj-monte .45s cubic-bezier(.2,1.2,.4,1) both;overflow:hidden}
@keyframes dj-monte{from{transform:translateY(100%)}to{transform:none}}
.dj-panneau.bravo{background:linear-gradient(135deg,var(--or-clair),var(--or) 60%,var(--orange));color:var(--nuit);box-shadow:0 -10px 40px #f5b40080}
.dj-panneau.presque{background:linear-gradient(135deg,var(--lumiere),var(--bleu));color:#fff;box-shadow:0 -10px 40px #0060ff80}
.dj-panneau h3{margin:0;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:23px;font-weight:800}
.dj-panneau p{margin:0;font-size:16px;line-height:1.5}
.dj-gain{font:800 16px var(--t-titre);padding:6px 12px;border-radius:999px;background:var(--nuit);color:var(--or-clair);animation:dj-compte 1s cubic-bezier(.3,1.8,.5,1) .2s both}
@keyframes dj-compte{0%{transform:scale(0) translateY(10px)}60%{transform:scale(1.4)}100%{transform:none}}
.dj-panneau .dj-btn{background:var(--nuit);color:var(--or-clair);box-shadow:0 5px 0 #0005}
.dj-panneau.presque .dj-btn{background:#fff;color:var(--nuit)}
.dj-confetti{position:absolute;top:-14px;width:8px;height:12px;border-radius:2px;animation:dj-chute 2.4s linear infinite;pointer-events:none}
@keyframes dj-chute{to{transform:translateY(380px) rotate(560deg)}}

/* Victoire (écran 5 du canevas) */
.dj-victoire{align-items:center;text-align:center;position:relative;overflow:hidden}
.dj-rayons{position:relative;width:230px;height:210px;display:flex;align-items:flex-end;justify-content:center}
.dj-rayons::before{content:"";position:absolute;inset:-10px 0 0;border-radius:999px;background:repeating-conic-gradient(#ffd35c73 0deg 12deg,#ffd35c00 12deg 30deg);-webkit-mask:radial-gradient(circle,#000 30%,transparent 70%);mask:radial-gradient(circle,#000 30%,transparent 70%);animation:dj-tourne 14s linear infinite}
@keyframes dj-tourne{to{transform:rotate(360deg)}}
.dj-tampon{padding:6px 14px;border-radius:10px;background:#fff;color:var(--nuit);font:600 12px var(--t-sous);letter-spacing:.2em;text-transform:uppercase;animation:dj-tampon .6s cubic-bezier(.3,1.8,.5,1) .6s both}
@keyframes dj-tampon{from{opacity:0;transform:scale(2.2) rotate(-12deg)}to{opacity:1;transform:rotate(-4deg)}}
.dj-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%}
.dj-stats div{border-radius:18px;padding:12px 6px;display:flex;flex-direction:column;gap:2px;color:var(--nuit);font:600 13px var(--t-texte)}
.dj-stats b{font:800 24px var(--t-titre)}
.dj-savoir{width:100%;text-align:left;border-radius:18px;padding:14px 16px;background:#040f24b3;box-shadow:inset 0 0 0 1.5px #3d8bff99;display:flex;flex-direction:column;gap:6px}
.dj-savoir b{font-size:16px;line-height:1.4}

/* Offre (écran 6 du canevas) */
.dj-onglets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border-radius:999px;background:#040f2499;box-shadow:inset 0 0 0 1px #3d8bff66}
.dj-onglets button{min-height:44px;border:0;border-radius:999px;background:transparent;color:var(--texte2);font:600 15px var(--t-sous);cursor:pointer}
.dj-onglets button[aria-selected="true"]{background:linear-gradient(90deg,var(--or-clair),var(--or));color:var(--nuit);box-shadow:0 0 16px #f5b4008c}
.dj-formule{position:relative;padding:18px;border-radius:22px;display:flex;flex-direction:column;gap:10px;animation:dj-retourne .55s cubic-bezier(.3,1.4,.5,1) both}
@keyframes dj-retourne{from{opacity:0;transform:perspective(700px) rotateY(-35deg) scale(.9)}to{opacity:1;transform:none}}
.dj-formule h2{font-size:21px;color:inherit;display:flex;justify-content:space-between;align-items:center;gap:8px}
.dj-prix{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.dj-prix b{font:800 42px var(--t-titre)}
.dj-prix span{font:600 15px var(--t-sous)}
.dj-coche{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.4;font-weight:500}
.dj-coche i{flex-shrink:0;margin-top:1px;width:20px;height:20px;border-radius:999px;display:grid;place-items:center}
.dj-reco{padding:5px 10px;border-radius:999px;background:var(--nuit);color:var(--or-clair);font:600 11px var(--t-sous);letter-spacing:.08em;text-transform:uppercase;animation:dj-badge 1.6s ease-in-out infinite;white-space:nowrap}
@keyframes dj-badge{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg) scale(1.08)}}
.dj-select{width:100%;min-height:50px;border-radius:14px;border:0;padding:0 12px;font:600 16px var(--t-texte);color:var(--nuit);background:#fff}
.dj-conditions{border-radius:18px;background:#fff;color:#071b3a;padding:4px 16px}
.dj-conditions summary{min-height:52px;display:flex;align-items:center;cursor:pointer;font:600 15px var(--t-sous)}
.dj-conditions .purchase-guide,.dj-conditions .source-details{background:none!important;box-shadow:none!important;padding:0!important;margin:0 0 12px!important;color:#071b3a!important}

/* Anciens écrans (Pratiquer, Progrès, Comprendre, Compte) : cartes claires lisibles sur le fond nuit, en attendant le lot 2 */
body:not([data-view="home"]):not([data-view="lesson"]):not([data-view="onboard"]):not([data-view="offer"]) #app>*:not(.dj):not(.dj-puits){background:#fbf8f2;color:#071b3a;border-radius:24px;padding:20px;box-shadow:0 18px 40px #0006}
body #app .btn:not(.secondary){background:linear-gradient(90deg,var(--or-clair),var(--or));color:var(--nuit);border-radius:999px}

#toast{font-family:var(--t-sous)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Corrections après les captures du lot 1 */
.dj-etape.actuelle .dj-etiquette,.dj-etape .dj-etiquette{color:var(--nuit);font-weight:800}
#toast{top:calc(14px + env(safe-area-inset-top,0px))!important;bottom:auto!important;border-radius:999px!important;font:600 15px var(--t-sous)!important;background:linear-gradient(90deg,var(--or-clair),var(--or))!important;color:var(--nuit)!important;box-shadow:0 10px 30px #0006!important;z-index:30!important}
/* ---------- Version 29 : cursus ---------- */
.dj-cursus{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;margin-inline:-2px;scroll-snap-type:x proximity;scrollbar-width:none}
.dj-cursus::-webkit-scrollbar{display:none}
.dj-cursus button{scroll-snap-align:start;flex-shrink:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;min-height:48px;padding:6px 14px;border:0;border-radius:14px;background:#0c2650e6;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--c) 60%,transparent);color:#fff;font:600 14px var(--t-sous);cursor:pointer;white-space:nowrap}
.dj-cursus button[aria-pressed="true"]{background:linear-gradient(135deg,var(--or-clair),var(--or));color:var(--nuit);box-shadow:0 4px 0 #b98700}
.dj-cursus small{font:600 11px var(--t-sous);letter-spacing:.08em;text-transform:uppercase;color:var(--or-clair)}
.dj-noeud.bientot{box-shadow:inset 0 0 0 2px #ffffff33;color:var(--discret)}
.dj-palier-titre{margin:10px 0 0;display:flex;flex-direction:column;gap:2px}
.dj-palier-titre:first-child{margin-top:0}
.dj-palier-titre b{font:800 15px var(--t-titre);color:var(--or-clair)}
.dj-palier-titre small{font-size:14px;color:var(--texte2)}
.dj-liste button.bientot{opacity:.72}
.dj-version{text-align:center;font-size:13px;color:var(--discret)}
.dj-copie{white-space:pre-line}

/* ---------- Version 30 : fonds par rubrique ---------- */
body::before,body::after{display:none}
#dj-fond{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:var(--nuit);transition:background .6s ease}
#dj-fond i{position:absolute;inset:0;transition:opacity .6s ease}
#dj-fond .f-filante{display:none}
/* Parcours : ciel étoilé, nébuleuse bleue et horizon doré */
#dj-fond[data-theme="ciel"]{background:radial-gradient(ellipse 90% 45% at 50% 108%,#f5b40040,transparent 70%),radial-gradient(ellipse 60% 40% at 12% 8%,#0060ff59,transparent 70%),radial-gradient(ellipse 50% 35% at 92% 38%,#3d8bff33,transparent 70%),linear-gradient(180deg,#020a1c 0%,#071b3a 58%,#0c2650 100%)}
#dj-fond[data-theme="ciel"] .f-a{background:var(--etoiles-a) center/cover no-repeat}
#dj-fond[data-theme="ciel"] .f-b{background:var(--etoiles-b) center/cover no-repeat;animation:dj-scintille 3.6s ease-in-out infinite alternate}
#dj-fond[data-theme="ciel"] .f-c{background:linear-gradient(118deg,transparent 30%,#9cc3ff12 44%,#ffd35c0f 52%,transparent 66%);filter:blur(8px)}
#dj-fond[data-theme="ciel"] .f-filante{display:block;inset:auto;top:14%;left:62%;width:130px;height:2px;border-radius:2px;background:linear-gradient(90deg,#fff,#ffd35c88,transparent);transform:rotate(-24deg);opacity:0;animation:dj-filante 11s ease-in 2s infinite}
body[data-view="lesson"] #dj-fond .f-a,body[data-view="course"] #dj-fond .f-a{opacity:.55}
body[data-view="lesson"] #dj-fond .f-b,body[data-view="course"] #dj-fond .f-b{opacity:.5}
/* Pratiquer : établi bleu (quadrillage) et lueur orange de l'atelier */
#dj-fond[data-theme="atelier"]{background:radial-gradient(ellipse 70% 45% at 100% 100%,#f28a1e47,transparent 70%),radial-gradient(ellipse 60% 40% at 0% 0%,#0060ff4d,transparent 70%),linear-gradient(180deg,#071b3a,#0a2047)}
#dj-fond[data-theme="atelier"] .f-a{background:linear-gradient(#3d8bff1a 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,#3d8bff1a 1px,transparent 1px) 0 0/28px 28px;-webkit-mask:radial-gradient(ellipse 80% 70% at 50% 40%,#000,transparent);mask:radial-gradient(ellipse 80% 70% at 50% 40%,#000,transparent)}
#dj-fond[data-theme="atelier"] .f-b{background:var(--etoiles-b) center/cover no-repeat;opacity:.35;animation:dj-monte 40s linear infinite}
/* Mon apprentissage : constellation dorée qui se dessine, aube en haut */
#dj-fond[data-theme="constellation"]{background:radial-gradient(ellipse 80% 40% at 50% -5%,#f5b40038,transparent 70%),radial-gradient(ellipse 60% 40% at 100% 70%,#0060ff40,transparent 70%),linear-gradient(180deg,#040f24,#071b3a 60%,#0a2047)}
#dj-fond[data-theme="constellation"] .f-a{background:var(--etoiles-a) center/cover no-repeat;opacity:.6}
#dj-fond[data-theme="constellation"] .f-b{background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20400%20800%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ffd35c%22%20stroke-opacity%3D%22.28%22%20stroke-width%3D%221%22%3E%3Cpolyline%20points%3D%2240%2C120%20110%2C90%20170%2C140%20250%2C110%20330%2C160%22/%3E%3Cpolyline%20points%3D%22170%2C140%20190%2C230%20120%2C300%20160%2C380%22/%3E%3Cpolyline%20points%3D%22250%2C110%20300%2C240%20360%2C300%22/%3E%3Cpolyline%20points%3D%2260%2C520%20130%2C480%20210%2C540%20280%2C500%20350%2C560%22/%3E%3Cpolyline%20points%3D%22210%2C540%20230%2C640%20160%2C710%22/%3E%3Cpolyline%20points%3D%22280%2C500%20320%2C420%22/%3E%3C/g%3E%3Cg%20fill%3D%22%23ffd35c%22%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%22120%22%20r%3D%222%22%20opacity%3D%220.7%22/%3E%3Ccircle%20cx%3D%22110%22%20cy%3D%2290%22%20r%3D%222.6%22%20opacity%3D%220.9%22/%3E%3Ccircle%20cx%3D%22170%22%20cy%3D%22140%22%20r%3D%223%22%20opacity%3D%221%22/%3E%3Ccircle%20cx%3D%22250%22%20cy%3D%22110%22%20r%3D%222.4%22%20opacity%3D%220.8%22/%3E%3Ccircle%20cx%3D%22330%22%20cy%3D%22160%22%20r%3D%222%22%20opacity%3D%220.7%22/%3E%3Ccircle%20cx%3D%22190%22%20cy%3D%22230%22%20r%3D%222.2%22%20opacity%3D%220.8%22/%3E%3Ccircle%20cx%3D%22120%22%20cy%3D%22300%22%20r%3D%222%22%20opacity%3D%220.6%22/%3E%3Ccircle%20cx%3D%22160%22%20cy%3D%22380%22%20r%3D%222.6%22%20opacity%3D%220.9%22/%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%22240%22%20r%3D%222.2%22%20opacity%3D%220.7%22/%3E%3Ccircle%20cx%3D%22360%22%20cy%3D%22300%22%20r%3D%222%22%20opacity%3D%220.6%22/%3E%3Ccircle%20cx%3D%2260%22%20cy%3D%22520%22%20r%3D%222%22%20opacity%3D%220.6%22/%3E%3Ccircle%20cx%3D%22130%22%20cy%3D%22480%22%20r%3D%222.6%22%20opacity%3D%220.9%22/%3E%3Ccircle%20cx%3D%22210%22%20cy%3D%22540%22%20r%3D%223%22%20opacity%3D%221%22/%3E%3Ccircle%20cx%3D%22280%22%20cy%3D%22500%22%20r%3D%222.4%22%20opacity%3D%220.8%22/%3E%3Ccircle%20cx%3D%22350%22%20cy%3D%22560%22%20r%3D%222%22%20opacity%3D%220.6%22/%3E%3Ccircle%20cx%3D%22230%22%20cy%3D%22640%22%20r%3D%222.2%22%20opacity%3D%220.8%22/%3E%3Ccircle%20cx%3D%22160%22%20cy%3D%22710%22%20r%3D%222%22%20opacity%3D%220.7%22/%3E%3Ccircle%20cx%3D%22320%22%20cy%3D%22420%22%20r%3D%222.4%22%20opacity%3D%220.8%22/%3E%3C/g%3E%3C/svg%3E") center/cover no-repeat;animation:dj-scintille 5s ease-in-out infinite alternate}
/* Comprendre : réseau de neurones bleu */
#dj-fond[data-theme="savoir"]{background:radial-gradient(ellipse 60% 40% at 90% 10%,#3d8bff4d,transparent 70%),radial-gradient(ellipse 60% 40% at 0% 100%,#0060ff40,transparent 70%),linear-gradient(180deg,#040f24,#071b3a)}
#dj-fond[data-theme="savoir"] .f-a{background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22180%22%20height%3D%22180%22%20viewBox%3D%220%200%20180%20180%22%3E%3Cg%20stroke%3D%22%233d8bff%22%20stroke-opacity%3D%22.22%22%20stroke-width%3D%221%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M20%2030%20L90%2060%20L160%2025%20M90%2060%20L60%20120%20L20%20150%20M90%2060%20L140%20110%20L160%20165%20M60%20120%20L140%20110%20M20%2030%20L20%20150%22/%3E%3C/g%3E%3Cg%20fill%3D%22%239cc3ff%22%20fill-opacity%3D%22.5%22%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2230%22%20r%3D%223%22/%3E%3Ccircle%20cx%3D%2290%22%20cy%3D%2260%22%20r%3D%224%22/%3E%3Ccircle%20cx%3D%22160%22%20cy%3D%2225%22%20r%3D%223%22/%3E%3Ccircle%20cx%3D%2260%22%20cy%3D%22120%22%20r%3D%223.5%22/%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%22150%22%20r%3D%223%22/%3E%3Ccircle%20cx%3D%22140%22%20cy%3D%22110%22%20r%3D%223.5%22/%3E%3Ccircle%20cx%3D%22160%22%20cy%3D%22165%22%20r%3D%223%22/%3E%3C/g%3E%3C/svg%3E") 0 0/180px 180px;-webkit-mask:linear-gradient(180deg,#000 0%,#0008 60%,transparent);mask:linear-gradient(180deg,#000 0%,#0008 60%,transparent)}
#dj-fond[data-theme="savoir"] .f-b{background:radial-gradient(circle at 30% 30%,#9cc3ff26,transparent 30%);animation:dj-pulse-fond 6s ease-in-out infinite alternate}
/* Offres : rayons dorés */
#dj-fond[data-theme="offre"]{background:radial-gradient(ellipse 70% 40% at 50% -8%,#f5b40052,transparent 70%),linear-gradient(180deg,#071b3a,#0a2047)}
#dj-fond[data-theme="offre"] .f-a{background:repeating-conic-gradient(from 180deg at 50% -10%,#f5b40014 0 5deg,transparent 5deg 13deg);-webkit-mask:radial-gradient(ellipse 90% 70% at 50% 0,#000,transparent);mask:radial-gradient(ellipse 90% 70% at 50% 0,#000,transparent)}
#dj-fond[data-theme="offre"] .f-b{background:var(--etoiles-b) center/cover no-repeat;opacity:.45;animation:dj-scintille 4s ease-in-out infinite alternate}
/* Compte : ondes calmes */
#dj-fond[data-theme="compte"]{background:radial-gradient(ellipse 70% 40% at 50% 110%,#0060ff4d,transparent 70%),linear-gradient(180deg,#040f24,#071b3a)}
#dj-fond[data-theme="compte"] .f-a{background:repeating-radial-gradient(circle at 50% 115%,#3d8bff14 0 2px,transparent 2px 40px)}
@keyframes dj-scintille{from{opacity:.35}to{opacity:1}}
@keyframes dj-filante{0%,90%{opacity:0;transform:translate(0,0) rotate(-24deg)}92%{opacity:1}100%{opacity:0;transform:translate(-260px,120px) rotate(-24deg)}}
@keyframes dj-monte{from{background-position:center 0}to{background-position:center -1000px}}
@keyframes dj-pulse-fond{from{opacity:.4}to{opacity:1}}
@media (prefers-reduced-motion:reduce){#dj-fond i{animation:none!important}#dj-fond .f-filante{display:none!important}}

/* ---------- Version 30 : leçons offertes ---------- */
.dj-offertes{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-left:auto;padding:0 12px;border:0;border-radius:999px;background:#f5b40026;box-shadow:inset 0 0 0 1.5px var(--or);color:var(--or-clair);font:600 13px var(--t-sous);cursor:pointer}
.dj-offertes.fini{background:linear-gradient(90deg,var(--or-clair),var(--or));color:var(--nuit);box-shadow:0 3px 0 #b98700}
.dj-reste{font:600 14px var(--t-sous);color:var(--or-clair)}
.dj-fin-offertes{width:100%;display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:20px;background:linear-gradient(135deg,var(--bleu),var(--lumiere));box-shadow:0 10px 30px #0060ff80;text-align:left}
.dj-fin-offertes b{font:800 17px var(--t-titre)}
.dj-fin-offertes span{font-size:15px;color:#e6eeff}

/* ---------- Version 30 : Pratiquer et Mon apprentissage ---------- */
.dj-section{font:800 22px/1.2 var(--t-titre);margin-top:10px}
.dj-usages{display:flex;flex-direction:column;gap:12px}
.dj-usage{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:22px;background:linear-gradient(160deg,#0060ff33,#0c2650eb);box-shadow:inset 0 0 0 1.5px #3d8bff73;backdrop-filter:blur(2px)}
.dj-usage-tete{display:flex;gap:12px;align-items:flex-start}
.dj-usage h2{font:800 18px/1.25 var(--t-titre);margin:0}
.dj-usage p{margin:4px 0 0;font-size:15px;color:var(--texte2)}
.dj-num{flex-shrink:0;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font:800 16px var(--t-titre);background:linear-gradient(135deg,var(--or-clair),var(--or));color:var(--nuit);box-shadow:0 3px 0 #b98700}
.dj-outil-puce{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:#f28a1e26;color:#ffc58a;font:600 13px var(--t-sous)}
.dj-usage details{display:flex;flex-direction:column;gap:8px}
.dj-usage summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font:600 15px var(--t-sous);color:var(--or-clair)}
.dj-usage details[open] .dj-copie{margin-bottom:8px}
.dj-usage .dj-lien{align-self:flex-start;min-height:44px;font-size:14px}
.dj-onglets-outils{display:flex;overflow-x:auto;border-radius:999px;scrollbar-width:none}
.dj-onglets-outils::-webkit-scrollbar{display:none}
.dj-onglets-outils button{flex:1 0 auto;padding:0 14px}
.dj-outils-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.dj-outil{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:18px;background:#040f24cc;box-shadow:inset 0 0 0 1px #ffffff24}
.dj-outil-tete{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}
.dj-outil-tete b{font:800 17px var(--t-titre)}
.dj-outil-tete small{font:600 12px var(--t-sous);color:var(--ciel)}
.dj-outil p{margin:0;font-size:15px;color:var(--texte2)}
.dj-outil dl{margin:0;display:flex;flex-direction:column;gap:6px}
.dj-outil dl div{padding:8px 10px;border-radius:12px;background:#ffffff0d}
.dj-outil dt{font:600 12px var(--t-sous);letter-spacing:.08em;text-transform:uppercase;color:var(--or-clair)}
.dj-outil dd{margin:0;font-size:15px}
.dj-outil .dj-lien{align-self:flex-start;min-height:44px;font-size:14px}
.dj-abonnements{display:flex;flex-direction:column;gap:10px}
.dj-abonnements h2{font:800 19px var(--t-titre);margin:0}
.dj-abonnements ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:15px}
.dj-abonnements small{font-size:13px;color:var(--discret)}
.dj-apprentissage h1{font-size:28px}
.dj-stats-progres div{text-align:center}
.dj-quota{gap:12px}
.dj-mini-barre{margin-top:6px;height:8px;border-radius:999px;background:#ffffff1f;overflow:hidden}
.dj-mini-barre i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--or-clair),var(--orange))}
.dj-cursus-liste{display:flex;flex-direction:column;gap:8px}
.dj-cursus-liste button{display:grid;grid-template-columns:1fr auto;grid-template-areas:"nom compte" "barre barre";gap:6px 10px;align-items:center;padding:12px 14px;border:0;border-radius:16px;background:#040f24bf;box-shadow:inset 3px 0 0 var(--c),inset 0 0 0 1px #ffffff1f;color:#fff;text-align:left;cursor:pointer}
.dj-cursus-nom{grid-area:nom;display:flex;flex-direction:column}
.dj-cursus-nom b{font:800 15px var(--t-titre)}
.dj-cursus-nom small{font-size:13px;color:var(--discret)}
.dj-cursus-compte{grid-area:compte;font:600 14px var(--t-sous);color:var(--or-clair)}
.dj-cursus-barre{grid-area:barre;height:6px;border-radius:999px;background:#ffffff1a;overflow:hidden}
.dj-cursus-barre i{display:block;height:100%;background:var(--c);border-radius:inherit}
.dj-termine{display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 12px;border-radius:14px;background:#ffffff0d;font-size:15px}
.dj-termine i{font-style:normal;flex-shrink:0;width:30px;height:30px;border-radius:999px;display:grid;place-items:center;font:800 13px var(--t-titre)}
.dj-termine small{font-size:13px;color:var(--discret)}
.dj-savoirs{display:flex;flex-direction:column;gap:8px}
.dj-savoir-carte{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:18px;background:linear-gradient(160deg,#f5b4001f,#0c2650e6);box-shadow:inset 0 0 0 1px #f5b40059}
.dj-savoir-carte>span{flex-shrink:0;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:800 14px var(--t-titre);background:var(--or);color:var(--nuit)}
.dj-savoir-carte b{font:800 16px var(--t-titre)}
.dj-savoir-carte p{margin:3px 0 0;font-size:15px;color:var(--texte2)}
nav button{line-height:1.15!important;text-align:center}
html{background:var(--nuit)}
body{background:transparent!important}
nav button{font-size:11px!important;overflow-wrap:normal!important;word-break:normal!important;hyphens:none}
/* ---------- Version 31 : liens légaux ---------- */
.dj-legal-liens{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;margin:18px 0 0;font-size:13px}
.dj-legal-liens a{display:inline-flex;align-items:center;min-height:44px;color:var(--discret)!important;text-decoration:underline}
.dj-accepte{display:block;font-size:13px;line-height:1.4;opacity:.9}
.dj-accepte a{color:inherit;font-weight:600}
/* ---------- Version 33 : page d'accueil des visiteurs ---------- */
main:has(.dj-l){max-width:1180px!important}
.dj-l{gap:0}
.dj-l>*+*{margin-top:56px}
.dj-l-haut{display:flex;align-items:center;gap:12px;padding-top:14px}
.dj-l-logo{font:800 26px var(--t-titre);display:flex;align-items:baseline;gap:6px}
.dj-l-logo>span{color:var(--or)}
.dj-l-logo small{font:600 12px var(--t-sous);letter-spacing:.1em;text-transform:uppercase;color:#7fb2ff}
.dj-l-liens{display:none;gap:24px;margin-left:auto}
.dj-l-liens a{color:var(--texte2);text-decoration:none;font:600 15px var(--t-sous);min-height:44px;display:inline-flex;align-items:center}
.dj-l-liens a:hover{color:#fff}
.dj-l-connexion{margin-left:auto;min-height:44px;padding:0 16px;border:0;border-radius:999px;background:#ffffff14;box-shadow:inset 0 0 0 1.5px #ffffff40;color:#fff;font:600 14px var(--t-sous);cursor:pointer}
.dj-l-hero{display:flex;flex-direction:column;gap:22px;margin-top:22px!important}
.dj-l-texte{display:flex;flex-direction:column;gap:14px}
.dj-l h1{font-size:clamp(32px,8.5vw,58px)!important;line-height:1.04!important;letter-spacing:-.5px}
.dj-l h2{font-size:clamp(26px,6vw,40px)!important;line-height:1.1!important}
.dj-l-sous{font-size:17px;color:var(--texte2);max-width:58ch}
.dj-l-actions{display:flex;flex-direction:column;gap:10px}
.dj-l-rassure{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 16px;font-size:14px;color:var(--texte2)}
.dj-l-rassure li{display:inline-flex;align-items:center;gap:6px}
.dj-l-carte-demo{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:26px;background:linear-gradient(165deg,#0060ff40,#0c2650f2 55%);box-shadow:inset 0 0 0 1.5px #3d8bff80,0 24px 60px #0008}
.dj-l-demo-tete{display:flex;align-items:center;gap:12px}
.dj-l-demo-tete b{display:block;font:800 17px var(--t-titre)}
.dj-l-demo-tete span{font-size:14px;color:var(--texte2)}
#dj-l-demo{display:flex;flex-direction:column;gap:10px}
.dj-l-demo-choix{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.dj-l-demo-choix::-webkit-scrollbar{display:none}
.dj-l-demo-choix button{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 13px;border:0;border-radius:999px;background:#040f24b3;box-shadow:inset 0 0 0 1.5px #3d8bff66;color:#fff;font:600 14px var(--t-sous);cursor:pointer}
.dj-l-demo-choix button[aria-pressed="true"]{background:linear-gradient(90deg,var(--or-clair),var(--or));color:var(--nuit);box-shadow:none}
.dj-l-ap{border-radius:18px;padding:12px 14px;display:flex;flex-direction:column;gap:4px;animation:dj-pop .45s cubic-bezier(.3,1.5,.5,1) both}
.dj-l-ap small{font:600 12px var(--t-sous);letter-spacing:.1em;text-transform:uppercase}
.dj-l-ap p{margin:0;font-size:16px;line-height:1.45}
.dj-l-ap.avant{background:#ffffff0d;box-shadow:inset 0 0 0 1px #ffffff26}
.dj-l-ap.avant small{color:#ff9f6b}
.dj-l-ap.avant span{font-size:13px;color:var(--discret)}
.dj-l-ap.apres{background:linear-gradient(135deg,#ffd35c,#f5b400);color:var(--nuit);animation-delay:.12s}
.dj-l-ap.apres small{color:#6b4a00}
.dj-l-ap.apres p{font-weight:600}
.dj-l-fleche{align-self:center;margin:-4px 0}
.dj-l-jauge{display:flex;align-items:center;gap:8px;margin-top:6px;font:600 12px var(--t-sous)}
.dj-l-jauge i{flex:1;height:8px;border-radius:999px;background:#071b3a33;overflow:hidden}
.dj-l-jauge b{display:block;height:100%;width:100%;border-radius:inherit;background:var(--nuit);animation:dj-remplit 1.2s .3s cubic-bezier(.3,1,.4,1) both}
.dj-l-jauge em{font-style:normal}
@keyframes dj-remplit{from{width:8%}to{width:100%}}
.dj-l-mission{font-size:14px;color:var(--texte2)}
.dj-l-mission b{color:#fff}
.dj-l-bloc{display:flex;flex-direction:column;gap:14px;scroll-margin-top:20px}
.dj-l-etapes{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.dj-l-etapes li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;padding:16px;border-radius:20px;background:#0c2650d9;box-shadow:inset 0 0 0 1px #ffffff1f}
.dj-l-etapes i{grid-row:span 2;width:40px;height:40px;border-radius:13px;display:grid;place-items:center;font:800 18px var(--t-titre);font-style:normal;background:linear-gradient(135deg,var(--or-clair),var(--or));color:var(--nuit);box-shadow:0 4px 0 #b98700}
.dj-l-etapes b{font:800 17px var(--t-titre)}
.dj-l-etapes span{font-size:15px;color:var(--texte2)}
.dj-l-cursus{display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:10px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory;scrollbar-width:none}
.dj-l-cursus::-webkit-scrollbar{display:none}
.dj-l-cursus article{scroll-snap-align:start;display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:20px;background:linear-gradient(165deg,color-mix(in srgb,var(--c) 26%,transparent),#0c2650f2 60%);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--c) 60%,transparent)}
.dj-l-cursus b{font:800 18px var(--t-titre)}
.dj-l-cursus p{margin:0;font-size:15px}
.dj-l-cursus small{display:block;font:600 11px var(--t-sous);letter-spacing:.1em;text-transform:uppercase;color:var(--c)}
.dj-l-offre{align-self:flex-start;padding:2px 10px;border-radius:999px;background:#040f24b3;font:600 12px var(--t-sous);color:var(--or-clair)}
.dj-l-atouts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.dj-l-atouts div{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:18px;background:#0c2650d9;box-shadow:inset 0 0 0 1px #ffffff1f}
.dj-l-atouts b{font:800 16px var(--t-titre)}
.dj-l-atouts span{font-size:14px;color:var(--texte2)}
.dj-l-prix{display:grid;gap:10px}
.dj-l-prix div{display:flex;flex-direction:column;gap:2px;padding:16px;border-radius:20px;background:#0c2650d9;box-shadow:inset 0 0 0 1px #ffffff1f}
.dj-l-prix div.reco{background:linear-gradient(135deg,#ffd35c,#f5b400 55%,#f28a1e);color:var(--nuit);box-shadow:0 8px 30px #f5b40055}
.dj-l-prix small{font:600 12px var(--t-sous);letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.dj-l-prix b{font:800 28px var(--t-titre)}
.dj-l-prix span{font-size:15px}
.dj-l-prix div:not(.reco) span{color:var(--texte2)}
.dj-l-note{font-size:14px;color:var(--discret)}
.dj-l-faq{display:flex;flex-direction:column;gap:8px}
.dj-l-faq details{border-radius:16px;background:#0c2650d9;box-shadow:inset 0 0 0 1px #ffffff1f}
.dj-l-faq summary{min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px;cursor:pointer;font:600 16px var(--t-sous);list-style:none}
.dj-l-faq summary::-webkit-details-marker{display:none}
.dj-l-faq details[open] summary svg{transform:rotate(180deg)}
.dj-l-faq p{padding:0 16px 14px;font-size:15px;color:var(--texte2)}
.dj-l-final{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:28px 18px;border-radius:28px;background:radial-gradient(ellipse at 50% 0,#0060ff59,transparent 70%),#0c2650d9;box-shadow:inset 0 0 0 1.5px #3d8bff66}
.dj-l-final .dj-btn{width:100%;max-width:360px}
@media (min-width:700px){
  .dj-l-actions{flex-direction:row}
  .dj-l-actions .dj-btn{width:auto;padding:0 28px}
  .dj-l-cursus{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}
  .dj-l-atouts{grid-template-columns:repeat(4,minmax(0,1fr))}
  .dj-l-prix,.dj-l-etapes{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dj-l-etapes li{grid-template-columns:1fr;row-gap:8px}
  .dj-l-etapes i{grid-row:auto}
}
@media (min-width:1000px){
  .dj-l>*+*{margin-top:88px}
  .dj-l-liens{display:flex}
  .dj-l-connexion{margin-left:8px}
  .dj-l-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center;margin-top:48px!important}
  .dj-l-cursus{grid-template-columns:repeat(4,minmax(0,1fr))}
  .dj-l-bloc>.dj-surtitre,.dj-l-bloc>h2,.dj-l-bloc>.dj-l-sous{text-align:center;align-self:center}
  .dj-l-final{padding:48px}
}
.dj-l-faq{max-width:820px;width:100%;align-self:center}
/* ---------- Version 33 : adaptation à l'ordinateur ---------- */
.dj-principal,.dj-cote{display:flex;flex-direction:column;gap:16px;min-width:0}
@media (min-width:1000px){
  /* Barre d'onglets du bas → rail vertical à gauche */
  nav:not([hidden]){top:0!important;right:auto!important;width:108px!important;flex-direction:column!important;justify-content:flex-start!important;gap:6px!important;padding:96px 8px 20px!important;border-top:0!important;border-right:1px solid #ffffff1a}
  nav:not([hidden]) button{flex:0 0 auto!important;min-height:72px!important;font-size:12px!important}
  nav:not([hidden]) button:hover{background:#ffffff0d!important;color:#fff!important}
  body:has(nav:not([hidden])){padding-left:108px}
  body header{padding:20px max(32px,calc((100% - 1100px)/2)) 8px!important}
  main{max-width:680px!important;margin-bottom:48px!important}
  main:has(.dj-accueil),main:has(.dj-pratique){max-width:1100px!important}
  main:has(.dj-apprentissage){max-width:1000px!important}
  /* Accueil : le chemin à gauche, le cursus complet à droite */
  .dj-accueil{display:grid!important;grid-template-columns:minmax(0,1fr) 360px;gap:36px;align-items:start}
  .dj-cote{position:sticky;top:20px;padding:16px;border-radius:24px;background:#040f24b3;box-shadow:inset 0 0 0 1px #ffffff1f;max-height:calc(100vh - 40px);overflow:auto}
  .dj-cote .dj-liste{max-height:none}
  .dj-cursus{flex-wrap:wrap;overflow:visible}
  /* Pratiquer et Mon apprentissage : grilles */
  .dj-usages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .dj-outils-grille{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dj-cursus-liste,.dj-savoirs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .dj-pratique h1,.dj-apprentissage h1{font-size:40px!important}
  /* Messages de leçon : carte centrée au lieu d'un bandeau pleine largeur */
  .dj-panneau{left:50%;right:auto;width:min(620px,calc(100% - 48px));bottom:24px;padding:22px 26px;border-radius:26px;translate:-50% 0}
}
@media (min-width:1440px){
  main:has(.dj-accueil),main:has(.dj-pratique){max-width:1180px!important}
}
body header .prototype{display:none}
.dj-l-note a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}