/* ============================================================
   MY DIGITAL STUDIO · Design system "Crème Studio"
   Mobile-first · Desktop ≥ 920px avec sidebar
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter+Tight:wght@700;800;900&family=Inter:wght@400;500;600;700&display=swap');
/* Poids 700 ajouté le 02/09/2026 (retour Lisa : "les gras sont trop gras") :
   le corps de texte est en Inter, mais seuls 400/500/600 étaient chargés.
   Tous les <b>/<strong> (poids 700 par défaut du navigateur) s'affichaient
   donc en gras SYNTHÉTIQUE (le 600 épaissi artificiellement), plus épais et
   moins net qu'un vrai 700. Charger le vrai 700 corrige tous les gras du
   site d'un coup, sans toucher aux tailles/poids déclarés ailleurs. */

:root{
  --bx:#4E0E1E; --bx2:#6B1830; --bg:#FAF8F4; --sf:#EAE3DC; --w:#FFFFFF;
  --card:#FFFFFF; --ink:#4E0E1E; --ink-soft:#8C6B74;
  --accent:#6B1830; --accent-soft:rgba(78,14,30,.10);
  --line:rgba(78,14,30,.10); --ok:#3D8B57; --warn-bg:#F5E9DD;
  --radius:20px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--ink);min-height:100vh}

/* Porte d'accès : la page reste masquée tant que guard.js n'a pas confirmé
   la session (voir guard.js). Empêche tout flash de contenu protégé. */
html.mds-gate-checking body{visibility:hidden}
.serif{font-family:'Instrument Serif',serif}
a{color:inherit}

/* ---------- Shell : mobile = colonne, desktop = sidebar + contenu ---------- */
.shell{display:flex;justify-content:center}
.content{width:100%;max-width:430px;padding:20px 20px 120px}

.sidenav{display:none}
.bottomnav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;
  background:rgba(250,248,244,.94);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  display:flex;justify-content:space-around;padding:10px 0 22px;z-index:50}
.bottomnav a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;font-weight:600;color:var(--ink-soft);text-decoration:none}
.bottomnav a.active{color:var(--ink)}
.bottomnav a .ico{font-size:19px}

@media(min-width:920px){
  .shell{justify-content:flex-start}
  .sidenav{display:flex;flex-direction:column;gap:4px;width:264px;min-height:100vh;position:sticky;top:0;
    padding:28px 20px;border-right:1px solid var(--line);flex-shrink:0}
  .content{max-width:720px;margin:0 auto;padding:40px 48px 80px}
  .bottomnav{display:none}
}

/* ---------- Sidenav ---------- */
.sidenav .logo{display:flex;align-items:center;gap:10px;margin-bottom:26px;text-decoration:none}
.sidenav .nav-title{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;margin:18px 10px 6px;display:inline-block;border-bottom:2px solid var(--accent);padding-bottom:3px}
.sidenav a.nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;font-size:13.5px;font-weight:600;text-decoration:none;color:var(--ink)}
.sidenav a.nav-item:hover{background:var(--card)}
.sidenav a.nav-item.active{background:var(--ink);color:var(--card)}
.sidenav a.nav-item .pc{margin-left:auto;font-size:11px;color:var(--ink-soft);font-weight:700}
.sidenav a.nav-item.active .pc{color:var(--bg)}
.sidenav a.nav-item.soon{opacity:.45;pointer-events:none}

/* ---------- Logo ---------- */
.logo{display:flex;align-items:center;gap:10px}
.logo-img{width:150px;height:auto;display:block}

/* Wordmark texte (remplace l'ancien logo image bordeaux+jaune, cf. DA
   bordeaux/crème 08/2026) : "My" en Instrument Serif italique, le reste
   en Inter Tight 900, tout en bordeaux. */
.wordmark{display:inline-flex;align-items:baseline;gap:5px;font-weight:900;font-size:22px;letter-spacing:-.01em;color:var(--bx);line-height:1}
.wordmark .wm-my{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;font-size:1.25em}
.wordmark .wm-rest{font-family:'Inter Tight',sans-serif}

/* ---------- Header mobile ---------- */
header.mobile{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
@media(min-width:920px){header.mobile .logo{display:none}}
.avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--bx2),var(--bx));display:grid;place-items:center;font-weight:700;font-size:14px;color:var(--bg)}

/* ---------- Titres ---------- */
h1.page{font-family:'Inter Tight',sans-serif;font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.18;margin-bottom:6px}
h1.page em{font-style:italic;font-weight:500}
.sub{color:var(--ink-soft);font-size:15px;margin-bottom:24px}
@media(min-width:920px){h1.page{font-size:38px}}

/* ---------- Carte reprendre ---------- */
.resume{background:linear-gradient(135deg,var(--bx2) 0%,var(--bx) 55%,#32090f 100%);color:var(--bg);border-radius:var(--radius);padding:20px;margin-bottom:28px;position:relative;overflow:hidden;display:block;text-decoration:none}
.resume .tag{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--bg);opacity:.75;font-weight:700;margin-bottom:8px;display:block}
.resume h2{font-family:'Inter Tight',sans-serif;font-size:18px;font-weight:800;margin-bottom:14px}
.resume .btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#fff 0%,var(--bg) 60%,var(--sf) 100%);color:var(--bx);font-weight:800;font-size:14px;padding:10px 18px;border-radius:99px;text-decoration:none}
.resume .btn::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(78,14,30,.16) 50%,transparent 70%);background-size:220% 100%;background-position:120% 0;animation:btnSweep 2.6s ease-in-out infinite}
@keyframes btnSweep{0%,25%{background-position:120% 0}75%,100%{background-position:-20% 0}}
@media (prefers-reduced-motion: reduce){.resume .btn::after{animation:none}}
.progress-line{height:4px;background:rgba(250,248,244,.15);border-radius:99px;margin-top:16px;overflow:hidden}
.progress-line i{display:block;height:100%;width:0%;background:var(--bg);border-radius:99px;transition:width .5s}
.progress-meta{display:flex;justify-content:space-between;font-size:11px;color:rgba(250,248,244,.55);margin-top:6px}

/* ---------- Actes & modules ---------- */
.acte{margin-bottom:26px}
.acte-label{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.acte-label .num{font-family:'Instrument Serif',serif;font-style:italic;font-size:19px;color:var(--ink-soft);border-bottom:2px solid var(--accent);padding-bottom:2px}
.acte-label h3{font-size:15px;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
@media(min-width:920px){.acte .mods{display:grid;grid-template-columns:1fr 1fr;gap:10px}}
.module{background:var(--card);border:1px solid rgba(78,14,30,.09);box-shadow:0 3px 12px rgba(78,14,30,.08);border-radius:var(--radius);padding:16px;display:flex;align-items:center;gap:14px;margin-bottom:10px;text-decoration:none;color:inherit;transition:transform .15s, box-shadow .15s}
@media(min-width:920px){.module{margin-bottom:0}.module:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(78,14,30,.1)}}
.module:active{transform:scale(.98)}
.mod-icon{width:44px;height:44px;border-radius:14px;background:var(--sf);display:grid;place-items:center;font-size:20px;flex-shrink:0}
.mod-icon svg{width:22px;height:22px;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mod-body{flex:1;min-width:0}
.mod-body b{font-size:16px;display:block;margin-bottom:2px}
.mod-body span{font-size:14px;color:var(--ink-soft)}
.ring{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:700;color:var(--ink-soft);background:conic-gradient(var(--accent) calc(var(--p)*1%), rgba(78,14,30,.08) 0);flex-shrink:0}
.ring i{width:26px;height:26px;border-radius:50%;background:var(--card);display:grid;place-items:center;font-style:normal}
.ring.full{color:var(--ok)}
.lock{width:34px;height:34px;border-radius:50%;background:var(--bg);display:grid;place-items:center;font-size:13px;opacity:.5;flex-shrink:0}
.soon-chip{font-size:9px;font-weight:700;letter-spacing:.1em;background:var(--accent);color:var(--bg);border-radius:99px;padding:3px 8px;text-transform:uppercase;flex-shrink:0}

/* ---------- CTA "Déléguer à Lisa" (accueil, sous Acte III) ----------
   Ajouté le 09/08/2026 : le lien vivait seulement dans le panneau latéral
   desktop (invisible sur mobile) ; ce bloc le rend visible partout, dans
   la même DA que les cartes module (cadre doré pour se distinguer d'une
   carte module classique). */
.delegate-cta{display:flex;align-items:center;gap:16px;background:linear-gradient(135deg,var(--bx2) 0%,var(--bx) 55%,#32090f 100%);border:none;box-shadow:0 6px 20px rgba(78,14,30,.22);border-radius:var(--radius);padding:18px 20px;margin-top:24px;text-decoration:none;color:var(--bg);transition:transform .15s, box-shadow .15s}
@media(min-width:920px){.delegate-cta:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(78,14,30,.3)}}
.delegate-cta:active{transform:scale(.98)}
.delegate-cta .d-icon{width:46px;height:46px;border-radius:14px;background:rgba(250,248,244,.14);color:var(--bg);display:grid;place-items:center;font-size:21px;flex-shrink:0}
.delegate-cta .d-body{flex:1;min-width:0}
.delegate-cta .d-body b{font-size:16px;display:block;margin-bottom:2px;color:var(--bg)}
.delegate-cta .d-body span{font-size:14px;color:rgba(250,248,244,.72)}
.delegate-cta .d-arrow{width:38px;height:38px;border-radius:50%;background:rgba(250,248,244,.14);color:var(--bg);display:grid;place-items:center;font-size:16px;flex-shrink:0}

/* ---------- Topbar leçon / module ---------- */
.topbar{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.back{width:36px;height:36px;border-radius:12px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;text-decoration:none;color:var(--ink);font-size:16px;flex-shrink:0;cursor:pointer}
.topbar .crumb{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:700}
.topbar b{display:block;font-size:13px;font-weight:600;letter-spacing:0;text-transform:none}
.focus-chip{margin-left:auto;flex-shrink:0;display:flex;align-items:center;background:var(--ink);color:var(--bg);font-size:12px;font-weight:800;padding:7px 12px;border-radius:99px;text-decoration:none;font-variant-numeric:tabular-nums}

/* ---------- Splash animé au lancement de l'app installée ---------- */
.app-splash{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:1;transition:opacity .5s ease}
.app-splash img{width:62%;max-width:290px;animation:splashIn .9s cubic-bezier(.2,.7,.3,1) both}
@keyframes splashIn{from{opacity:0;transform:scale(.86) translateY(12px)}to{opacity:1;transform:none}}
.app-splash.out{opacity:0;pointer-events:none}

/* ---------- Suggestion d'install PWA ---------- */
.install-toast{position:fixed;left:14px;right:14px;bottom:calc(86px + env(safe-area-inset-bottom,0px));max-width:420px;margin:0 auto;background:var(--ink);color:#FAF8F4;box-shadow:0 16px 40px rgba(78,14,30,.4);border-radius:18px;padding:18px;display:flex;align-items:flex-start;gap:10px;z-index:400;animation:fade .25s}
@media(min-width:920px){.install-toast{bottom:calc(16px + env(safe-area-inset-bottom,0px))}}
.install-toast .it-body{flex:1;min-width:0}
.install-toast .it-body b{display:block;font-size:16.5px;margin-bottom:6px}
.install-toast .it-body p{font-size:14.5px;color:rgba(250,248,244,.85);line-height:1.6}
.install-toast .it-kw{color:var(--bg);opacity:.85;font-weight:700}
.install-toast .it-install{background:var(--bg);color:var(--bx);border:none;border-radius:10px;padding:10px 16px;font-family:inherit;font-size:14px;font-weight:800;cursor:pointer;flex-shrink:0;align-self:center}
.install-toast .it-close{background:none;border:none;color:rgba(250,248,244,.6);font-size:16px;cursor:pointer;flex-shrink:0;padding:2px}
/* ---------- Liste de leçons (page module) ---------- */
.lesson-card{background:var(--card);border:1px solid rgba(78,14,30,.09);box-shadow:0 3px 12px rgba(78,14,30,.08);border-radius:var(--radius);padding:16px;display:flex;align-items:center;gap:14px;margin-bottom:10px;cursor:pointer;transition:transform .15s, box-shadow .15s}
.lesson-card:active{transform:scale(.98)}
@media(min-width:920px){.lesson-card:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(78,14,30,.1)}}
.lesson-card .n{width:34px;height:34px;border-radius:12px;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-size:13px;font-weight:800;flex-shrink:0}
.lesson-card.done .n{background:var(--ok);color:#fff}
.lesson-card .t{flex:1}
.lesson-card .t b{font-size:16px;display:block;margin-bottom:2px}
.lesson-card .t span{font-size:14px;color:var(--ink-soft)}
.lesson-card .go{color:var(--ink-soft);font-size:16px}
.lesson-card.done .t b{opacity:.55}

/* ---------- Intérieur de leçon ---------- */
.step-label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;margin-bottom:6px}
h1.lesson-title{font-family:'Inter Tight',sans-serif;font-size:25px;font-weight:800;letter-spacing:-.02em;line-height:1.22;margin-bottom:12px}
@media(min-width:920px){h1.lesson-title{font-size:33px}}
.intro{font-size:16px;line-height:1.65;opacity:.85;margin-bottom:20px}

.card{background:var(--card);border:1px solid rgba(78,14,30,.09);box-shadow:0 3px 12px rgba(78,14,30,.08);border-radius:var(--radius);padding:18px;margin-bottom:14px}
.card h3{font-size:15.5px;font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:8px;line-height:1.3}
.card p{font-size:15.5px;line-height:1.6;opacity:.88;margin-bottom:8px}
.card p:last-child{margin-bottom:0}
.card.warn{background:var(--warn-bg);border-color:rgba(78,14,30,.14)}
.card.warn h3{font-size:17px}
.card.danger{background:linear-gradient(150deg,#6E0F0B,#9C1C15);color:#FFF6F0;border:none;box-shadow:0 10px 30px rgba(110,15,11,.35)}
.card.danger h3{color:#FFC9C0}
.card.danger p{color:rgba(255,246,240,.94);opacity:1}
.card.danger b{color:#fff}
.card.goal{background:var(--ink);color:#FAF8F4;border:none}
.card.goal h3{color:var(--bg)}
.card.goal p{color:rgba(250,248,244,.85);opacity:1}

/* Kit générateur de prompt (questions → bouton → prompt à copier, avec étapes
   verrouillées une par une) : introduit au Module 6, réutilisé dans d'autres
   modules (ex. Module 7 · carrousel) — centralisé ici pour rester identique
   partout au lieu d'être redéfini (et de dériver) dans chaque page. */
.m6-hero-head{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:20px}
.m6-hero-head h3{display:block;flex:1;min-width:0;font-size:19px;font-weight:700;color:var(--ink);margin:0}
.m6-hero-head h3 .serif{font-size:1.15em}
.m6-hero-badge{width:48px;height:48px;border-radius:15px;flex-shrink:0;display:grid;place-items:center;font-size:22px;font-weight:800;color:var(--bg);background:linear-gradient(135deg,var(--bx2),var(--bx));box-shadow:0 2px 5px rgba(78,14,30,.5)}
.m6-hero-head .m6-head-sub{flex-basis:100%;display:block;font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-soft);margin-top:2px}
.card.goal .m6-hero-head .m6-head-sub{text-transform:none;color:rgba(250,248,244,.6);font-size:13.5px;letter-spacing:0}

.m6-connector{display:flex;justify-content:center;margin:0 0 26px;position:relative;z-index:3}
.m6-connector span{width:50px;height:50px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-size:20px;font-weight:800;box-shadow:0 4px 10px rgba(78,14,30,.3);border:4px solid var(--bg)}

.m6int-field{margin-bottom:22px;animation:fade .35s}
.m6int-field:last-of-type{margin-bottom:24px}
.m6int-hidden{display:none!important}
.m6int-q{display:block;font-size:16px;font-weight:700;margin-bottom:10px;line-height:1.4}
.m6int-input{display:block;box-sizing:border-box;width:92%;margin:0 auto;border:1.5px solid rgba(250,248,244,.25);border-radius:12px;background:rgba(250,248,244,.08);padding:15px 13px;font-family:inherit;font-size:15.5px;font-weight:500;line-height:1.45;color:#FAF8F4;resize:none;overflow:hidden;text-align:left}
.m6int-input::placeholder{color:rgba(250,248,244,.35);font-weight:400}
.m6int-input:focus{outline:none;border-color:var(--bg)}
.m6int-panel{padding:26px 22px}
.m6int-panel .prompt{margin:16px 0 22px;background:rgba(250,248,244,.07);border:1.5px solid rgba(250,248,244,.16)}
.m6int-panel > p, .m6mis [data-path] > p{margin-bottom:18px;line-height:1.55}
.m6-gen-btn{display:block;width:100%;background:var(--bg);color:var(--bx);border:1.5px solid rgba(250,248,244,.4);border-radius:99px;padding:14px 26px;font-family:inherit;font-size:15px;font-weight:800;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.25);text-align:center;margin-bottom:22px;transition:transform .15s,background .3s,color .3s,box-shadow .3s}
.m6-gen-btn.flash{background:var(--ok);color:#fff;transform:scale(.97);box-shadow:0 6px 18px rgba(61,139,87,.35)}

/* Étapes numérotées, une seule active à la fois : le numéro reste toujours
   visible (pas de coche cachée à deviner), et un bouton explicite "C'est
   fait" fait avancer et déverrouille la suivante. .m6step regroupe la coche
   ET son contenu associé (prompt, lien de téléchargement…) : le verrouillage
   s'applique à tout le bloc, pas qu'à la coche, sinon un prompt lié à une
   étape pas encore atteinte reste visible en clair, ce qui n'a pas de sens. */
.m6-steps{counter-reset:m6step}
.m6step{margin-bottom:10px}
.m6step.locked{pointer-events:none}
.m6step.locked .check .txt{opacity:.4}
.card.goal .m6-steps .m6step.locked .check .box{background:rgba(250,248,244,.14);border-color:rgba(250,248,244,.3)}
.card.goal .m6-steps .m6step.locked .check .box::before{content:'🔒';font-size:11px}
.m6step:not(.current) .prompt,
.m6step:not(.current) a.btn-cta,
.m6step:not(.current) .m6-dl-mini,
.m6step:not(.current) .m6decl-intro,
.m6step:not(.current) .m6shot{display:none}
.m6-steps .check{counter-increment:m6step;border-bottom:none;background:rgba(250,248,244,.05);border-radius:14px;padding:14px 14px;margin-bottom:10px;cursor:default}
.m6step.current .check{background:rgba(250,248,244,.18);border:1.5px solid rgba(250,248,244,.3);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.m6step.current .check .txt small{color:rgba(250,248,244,.6)}
.card.goal .m6-steps .check .box{color:transparent;position:relative;background:var(--bg);border-color:var(--bg)}
.m6-steps .check .box::before{content:counter(m6step);position:absolute;inset:0;display:grid;place-items:center;color:var(--bx);font-weight:700;font-size:12.5px}
.card.goal .m6-steps .check.on .box{color:#fff;background:var(--ok);border-color:var(--ok)}
.m6-steps .check.on .box::before{content:none}
.m6step .prompt{margin:0 0 10px;background:var(--card);border:1.5px solid rgba(78,14,30,.14)}
.m6step .prompt .p-head span{color:var(--ink-soft)}
.m6step .prompt pre{color:var(--ink)}
.m6step a.btn-cta{display:flex;width:fit-content;margin:10px auto 16px}
.m6step-btn{display:block;width:100%;background:var(--bg);border:none;color:var(--bx);border-radius:12px;padding:11px;margin:0;font-family:inherit;font-size:13.5px;font-weight:800;cursor:pointer;transition:transform .1s}
.m6step-btn:active{transform:scale(.98)}

/* "Un besoin → une leçon" (Module 8 · carte des automatisations) : chaque
   rangée porte son emoji, le besoin en gras, et un bouton bordeaux/or qui
   navigue directement vers la leçon (via data-goto, câblé dans app.js). */
.m8map{display:flex;flex-direction:column;gap:10px;margin:14px 0 4px}
.m8map-row{display:flex;align-items:center;gap:12px;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.m8map-ico{width:38px;height:38px;border-radius:12px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;font-size:18px;flex-shrink:0}
.m8map-row p{flex:1;margin:0;font-size:14.5px;line-height:1.45}
/* Les lignes .m8map gardent leur fond crème même dans une carte bordeaux (.goal) :
   le texte doit donc rester encre, sinon blanc-sur-crème illisible */
.card.goal .m8map-row p{color:var(--ink)}
.card.goal .m8map-ico{background:var(--ink);border-color:rgba(250,248,244,.28);color:var(--bg)}

/* Socle obligatoire (Modules 6 et 7, 03/08/2026) : les leçons "à la carte" restent
   verrouillées visuellement tant que les leçons socle du module ne sont pas terminées. */
.lesson-card.socle-locked:active{transform:none}
.lesson-card.socle-locked .n{background:var(--ink-soft);color:var(--card)}
.socle-note{margin:-2px 0 14px;font-size:13.5px;color:var(--ink-soft)}
.m8map-btn{flex-shrink:0;background:var(--ink);color:var(--bg);border:none;border-radius:99px;padding:10px 15px;font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap;box-shadow:0 3px 8px rgba(78,14,30,.22);transition:transform .1s}
.m8map-btn:active{transform:scale(.95)}

/* Comparatif Code vs Cowork : 2 cartes empilées, contraste fort pour bien distinguer */
.m8vs{display:flex;flex-direction:column;gap:12px;margin:14px 0 4px}
.m8vs-item{border-radius:16px;padding:16px 18px}
.m8vs-item.code{background:var(--bg);border:1.5px solid var(--line)}
.m8vs-item.cowork{background:var(--ink);border:1.5px solid var(--ink)}
.m8vs-head{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:800;margin-bottom:8px;color:var(--ink)}
.m8vs-item.cowork .m8vs-head{color:var(--bg)}
.m8vs-item p{margin:0 0 6px;font-size:14.5px;line-height:1.5}
.m8vs-item.code p{color:var(--ink-soft)}
.m8vs-item.cowork p{color:rgba(250,248,244,.85)}
.m8vs-item p:last-child{margin-bottom:0}
.m8vs-item p b{color:var(--ink)}
.m8vs-item.cowork p b{color:#FAF8F4}

/* "Comment ça marche" en 5 étapes numérotées (Module 8 · tâches programmées) :
   même famille visuelle que .m8map, pour ne pas retomber dans un pavé de texte. */
.m8how{display:flex;flex-direction:column;gap:10px;margin:14px 0 4px}
.m8how-row{display:flex;align-items:flex-start;gap:12px;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.m8how-num{width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--bg);font-size:12.5px;font-weight:800;display:grid;place-items:center;flex-shrink:0;margin-top:1px}
.m8how-txt{display:flex;flex-direction:column;gap:2px}
.m8how-txt b{font-size:14.5px}
.m8how-txt span{display:block;font-size:13px;color:var(--ink-soft);line-height:1.4}

/* Coche "checklist importante" : bordeaux par défaut, verte une fois cochée.
   .check.m6l4-prereq (et pas .m6l4-prereq seul) : ce bloc est déclaré AVANT
   .check .box plus bas, il faut une spécificité supérieure pour gagner. */
.check.m6l4-prereq .box{background:var(--ink);border-color:var(--ink);color:#FAF8F4}
.check.m6l4-prereq.on .box{background:var(--ok);border-color:var(--ok)}

/* Capture d'écran illustrant une étape */
.m6shot{display:block;width:100%;border-radius:14px;border:1.5px solid rgba(250,248,244,.18);margin:12px auto 4px;box-shadow:0 8px 20px rgba(0,0,0,.2)}
@media(min-width:920px){.m6shot{max-width:420px}}
.m6shot-sm{width:65%;margin-left:auto;margin-right:auto}
@media(min-width:920px){.m6shot-sm{max-width:260px}}

/* Sélecteur pilule (2-4 choix mutuellement exclusifs, largeurs égales) */
.m6path{display:flex;gap:6px;margin:0 0 20px;background:rgba(250,248,244,.1);border-radius:99px;padding:5px}
.m6path button{flex:1;border:none;background:none;border-radius:99px;padding:11px 8px;font-family:inherit;font-size:14.5px;font-weight:700;color:rgba(250,248,244,.65);cursor:pointer;transition:background .15s,color .15s}
.m6path button.sel{background:var(--bg);color:var(--bx)}

/* Sélecteur pilule à choix courts qui peuvent passer à la ligne (ex. type de CTA) */
.m6chip-pick{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px}
.m6chip-pick button{border:1.5px solid rgba(250,248,244,.25);background:rgba(250,248,244,.08);color:rgba(250,248,244,.75);border-radius:99px;padding:10px 16px;font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.m6chip-pick button.sel{background:var(--bg);color:var(--bx);border-color:var(--bg)}

/* Menu déroulant natif, même habillage que .m6int-input (fond sombre, .card.goal) */
.m6int-select{display:block;box-sizing:border-box;width:92%;margin:0 auto;border:1.5px solid rgba(250,248,244,.25);border-radius:12px;background-color:rgba(250,248,244,.08);padding:15px 34px 15px 13px;font-family:inherit;font-size:15.5px;font-weight:500;color:#FAF8F4;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAF8F4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:14px}
.m6int-select:focus{outline:none;border-color:var(--bg)}
.m6int-select option{color:#1c1c1c}

/* Mini-dropdown d'explication (sur fond sombre .card.goal), distinct de details.guide
   qui est prévu pour un fond clair */
.m6-subguide{margin:8px 0 12px;border:1.5px solid rgba(250,248,244,.18);border-radius:14px;overflow:hidden;background:rgba(250,248,244,.05)}
.m6-subguide summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;padding:11px 14px;font-weight:700;font-size:13.5px;color:rgba(250,248,244,.85)}
.m6-subguide summary::-webkit-details-marker{display:none}
.m6-subguide summary .chev{margin-left:auto;width:20px;height:20px;border-radius:50%;background:rgba(250,248,244,.14);color:var(--bg);font-size:9px;display:grid;place-items:center;transition:transform .25s;flex-shrink:0}
.m6-subguide[open] summary .chev{transform:rotate(180deg)}
.m6-subguide .sg-body{padding:0 14px 13px;font-size:13.5px;line-height:1.55;color:rgba(250,248,244,.65)}

/* Répéteur générique (photos, liens...) : une ligne par item, ajout/suppression libres */
.m6link-row{position:relative;border:1.5px solid rgba(250,248,244,.16);border-radius:14px;padding:14px 40px 4px 14px;margin-bottom:10px}
.m6link-num{display:block;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:rgba(250,248,244,.4);margin-bottom:8px}
.m6link-input{display:block;box-sizing:border-box;width:100%;border:1.5px solid rgba(250,248,244,.25);border-radius:10px;background:rgba(250,248,244,.08);padding:11px 12px;margin-bottom:10px;font-family:inherit;font-size:14.5px;font-weight:500;color:#FAF8F4}
.m6link-input::placeholder{color:rgba(250,248,244,.35);font-weight:400}
.m6link-input:focus{outline:none;border-color:var(--bg)}
.m6link-remove{position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:50%;border:1.5px solid rgba(250,248,244,.22);background:rgba(250,248,244,.06);color:rgba(250,248,244,.55);font-size:11px;cursor:pointer;display:grid;place-items:center;flex-shrink:0}
.m6link-remove:hover{border-color:#e07a63;color:#e07a63}
.m6link-add{display:block;width:100%;margin:2px 0 22px;border:1.5px dashed rgba(250,248,244,.32);background:none;color:rgba(250,248,244,.8);border-radius:12px;padding:12px;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer}
.m6link-add:hover{border-color:var(--bg);color:var(--bg)}

.check{display:flex;align-items:flex-start;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);cursor:pointer;user-select:none}
.check:last-child{border-bottom:none}
.check .box{width:26px;height:26px;border-radius:50%;border:2px solid rgba(78,14,30,.25);background:rgba(78,14,30,.07);flex-shrink:0;display:grid;place-items:center;font-size:13px;color:#fff;transition:all .2s;margin-top:1px}
.card.goal .check .box,.methode.dark .check .box{border-color:rgba(250,248,244,.45);background:rgba(250,248,244,.14)}
.check.on .box{background:var(--ok);border-color:var(--ok)}
.card.goal .check.on .box,.methode.dark .check.on .box{background:var(--ok);border-color:var(--ok)} /* coche verte aussi sur fond bordeaux (Lisa, 06/09/2026) */
/* Variante "coche pleine" (demande de Lisa, 09/08/2026) : par défaut .check .box
   est presque invisible tant que non cochée (fond bordeaux à 7% d'opacité) —
   voulu ailleurs, mais pas pour les checklists où Lisa veut une coche bien
   visible dès le départ : bordeaux plein, puis verte une fois cochée. */
.check-fill .box{background:var(--ink);border-color:var(--ink)}
.check-fill.on .box{background:var(--ok);border-color:var(--ok)}

/* ---------- Questionnaire à choix multiple → prompt généré (mkQuizPrompt) ---------- */
.quiz-q{margin-bottom:16px}
.quiz-q-label{font-weight:700;font-size:15px;margin-bottom:9px}
.quiz-opts{display:flex;flex-wrap:wrap;gap:8px}
.quiz-opt{border:1.5px solid var(--line);background:var(--card);color:var(--ink);border-radius:99px;padding:9px 16px;font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;transition:all .15s}
.quiz-opt:hover{border-color:var(--accent)}
.quiz-opt.sel{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.quiz-q.answered .quiz-opts{opacity:.55}
.quiz-q.answered .quiz-opts:hover{opacity:1}
.quiz-restart{display:block;width:100%;margin-top:6px;border:1.5px dashed var(--line);background:none;color:var(--ink-soft);border-radius:12px;padding:11px;font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer}
.quiz-restart:hover{border-color:var(--ink);color:var(--ink)}
.quiz-validate{display:block;width:100%;margin-top:10px;border:none;border-radius:12px;background:var(--accent);color:var(--bg);padding:11px;font-family:inherit;font-size:13.5px;font-weight:800;cursor:pointer}
.quiz-validate:disabled{opacity:.4;cursor:not-allowed}
.card.goal .quiz-validate,.methode.dark .quiz-validate{background:var(--bg);color:var(--bx)}
.card.goal .quiz-opt,.methode.dark .quiz-opt{border-color:rgba(250,248,244,.25);background:rgba(250,248,244,.08);color:rgba(250,248,244,.85)}
.card.goal .quiz-opt.sel,.methode.dark .quiz-opt.sel{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.card.goal .quiz-restart,.methode.dark .quiz-restart{border-color:rgba(250,248,244,.25);color:rgba(250,248,244,.6)}
/* Questionnaire posé dans une étape claire (.shot) à l'intérieur d'une carte bordeaux (ref-dark, Module 5/6 référence avatar) : on remet les couleurs claires, sinon texte ivoire sur ivoire (30/09/2026) */
.card.goal .shot .quiz-q-label,.methode.dark .shot .quiz-q-label{color:var(--ink)}
.card.goal .shot .quiz-opt,.methode.dark .shot .quiz-opt{border-color:var(--line);background:var(--card);color:var(--ink)}
.card.goal .shot .quiz-opt.sel,.methode.dark .shot .quiz-opt.sel{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.card.goal .shot .quiz-validate,.methode.dark .shot .quiz-validate{background:var(--accent);color:var(--bg)}
.card.goal .shot .quiz-restart,.methode.dark .shot .quiz-restart{border-color:var(--line);color:var(--ink-soft)}
.check .txt{font-size:15.5px;line-height:1.5}
.check.on .txt{opacity:.5;text-decoration:line-through}
.check .txt small{display:block;color:var(--ink-soft);font-size:14px;margin-top:2px;text-decoration:none}

.prompt{background:var(--ink);border-radius:var(--radius);padding:16px;margin:14px 0;color:#FAF8F4}
.prompt .p-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.prompt .p-head span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--bg);opacity:.75}
.copy-btn{background:var(--bg);color:var(--bx);border:none;font-family:inherit;font-size:12px;font-weight:800;padding:7px 14px;border-radius:99px;cursor:pointer;transition:transform .1s}
.copy-btn:active{transform:scale(.94)}
.copy-btn.copied{background:var(--ok);color:#fff}
.prompt pre{font-family:inherit;font-size:14.5px;line-height:1.55;white-space:pre-wrap;color:rgba(250,248,244,.85);max-height:260px;overflow-y:auto;padding-right:4px}

/* display:block (pas flex) : dès qu'un .tip contient une balise inline comme <b>,
   flexbox découpait le texte en plusieurs "items" (un par segment de texte autour du
   <b>) et les alignait en colonnes côte à côte au lieu d'un seul paragraphe qui
   s'enchaîne normalement à l'horizontale. */
.tip{display:block;background:var(--accent-soft);border-radius:14px;padding:13px 14px;font-size:15px;line-height:1.55;margin:14px 0}
.quote-list{display:flex;flex-direction:column;gap:8px;margin:14px 0}
.quote-list .qi{background:var(--bg);border-radius:12px;padding:11px 14px;font-size:14.5px;line-height:1.5;color:var(--ink-soft)}

/* Cartes outils (Module 2) */
.tool{border:1px solid var(--line);border-radius:16px;padding:15px;margin-bottom:10px;background:var(--card)}
.tool .t-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.tool .t-ico{width:36px;height:36px;border-radius:11px;background:var(--bg);display:grid;place-items:center;font-size:17px;flex-shrink:0}
.tool b{font-size:16px}
.tool .badge{margin-left:auto;font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border-radius:99px;padding:3px 9px;background:var(--accent-soft)}
.tool .badge.free{background:rgba(61,139,87,.14);color:var(--ok)}
.tool p{font-size:14.5px;line-height:1.55;color:var(--ink);opacity:.8}
.tool .use{margin-top:8px;font-size:14px;font-weight:600;color:var(--ink-soft)}

/* Tableau comparatif simple */
.compare{width:100%;border-collapse:collapse;font-size:14.5px;margin:6px 0}
.compare th{text-align:left;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);padding:8px 8px;border-bottom:1px solid var(--line)}
.compare td{padding:10px 8px;border-bottom:1px solid var(--line);line-height:1.45;vertical-align:top}
.compare tr:last-child td{border-bottom:none}

/* Choix de profil (Ton projet IA) */
.profile-pick{display:grid;gap:10px;margin:14px 0}
@media(min-width:920px){.profile-pick{grid-template-columns:1fr 1fr 1fr}}
.profile{border:2px solid var(--line);border-radius:16px;padding:16px;background:var(--card);cursor:pointer;text-align:left;font-family:inherit;transition:all .15s}
.profile .p-ico{font-size:26px;margin-bottom:8px}
.profile b{font-size:14.5px;display:block;margin-bottom:4px;color:var(--ink)}
.profile span{font-size:14px;color:var(--ink-soft);line-height:1.5;display:block}
.profile.sel{border-color:var(--ink);background:var(--ink)}
.profile.sel b{color:var(--bg)}
.profile.sel span{color:rgba(250,248,244,.7)}

/* ---------- Navigation bas de leçon ---------- */
.lesson-nav{display:flex;gap:10px;margin-top:26px}
.lesson-nav .prev{width:48px;height:48px;border-radius:14px;border:1.5px solid rgba(78,14,30,.2);background:none;font-size:17px;color:var(--ink);cursor:pointer;flex-shrink:0}
.lesson-nav .finish{flex:1;height:48px;border:none;border-radius:14px;background:var(--ink);color:var(--bg);font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;transition:transform .1s}
.lesson-nav .finish:active{transform:scale(.98)}
.lesson-nav .finish.done-state{background:var(--ok);color:#fff}

/* ---------- Vues (routing) ---------- */
.view{display:none;animation:fade .3s}
.view.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- Studio Focus (chrono) ---------- */
.focus-wrap{text-align:center;padding-top:8px}
.focus-durations{display:flex;gap:10px;justify-content:center;margin:22px 0}
.dur{border:2px solid var(--line);background:var(--card);border-radius:16px;padding:14px 0;width:92px;cursor:pointer;font-family:inherit;transition:all .15s}
.dur b{font-size:20px;font-weight:800;display:block;color:var(--ink)}
.dur span{font-size:10.5px;color:var(--ink-soft);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.dur.sel{border-color:var(--ink);background:var(--ink)}
.dur.sel b{color:var(--bg)}
.dur.sel span{color:rgba(250,248,244,.6)}
.dur-custom{display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:default}
.dur-custom input{width:44px;border:none;background:transparent;font-family:inherit;font-size:20px;font-weight:800;color:var(--ink);text-align:center;padding:0;-moz-appearance:textfield}
.dur-custom input::placeholder{color:var(--accent);font-weight:800;opacity:1}
.dur-custom input::-webkit-outer-spin-button,.dur-custom input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.dur-custom input:focus{outline:none}
.dur-custom.sel input{color:var(--bg)}
.dur-custom.sel input::placeholder{color:var(--bg);opacity:.65}

.dial{width:250px;height:250px;margin:10px auto 20px;border-radius:50%;display:grid;place-items:center;position:relative;
  background:conic-gradient(var(--accent) calc(var(--p)*1%), rgba(78,14,30,.08) 0)}
.dial .inner{width:216px;height:216px;border-radius:50%;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.dial .time{font-family:'Instrument Serif',serif;font-size:52px;font-weight:500;letter-spacing:.01em}
.dial .state{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);font-weight:700}

.focus-actions{display:flex;gap:10px;justify-content:center}
.f-btn{height:50px;padding:0 30px;border-radius:99px;border:none;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;transition:transform .1s}
.f-btn:active{transform:scale(.97)}
.f-btn.main{background:var(--ink);color:var(--bg)}
.f-btn.ghost{background:none;border:1.5px solid rgba(78,14,30,.2);color:var(--ink)}

.focus-stats{display:flex;gap:10px;margin-top:30px}
.fstat{flex:1;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px}
.fstat b{font-size:20px;font-weight:800;display:block;margin-bottom:2px}
.fstat span{font-size:11px;color:var(--ink-soft);font-weight:600;line-height:1.2;display:block}

/* ---------- Écran fin de module ---------- */
.done-screen{text-align:center;padding:40px 0}
.done-screen .big{font-size:56px;margin-bottom:16px}
.done-screen p{color:var(--ink-soft);font-size:16px;line-height:1.6;margin-bottom:24px}
.done-screen a{display:inline-block;background:var(--ink);color:var(--bg);font-weight:700;font-size:15px;padding:14px 26px;border-radius:99px;text-decoration:none}


/* ============ Animations ============ */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.6)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes glowpulse{0%,100%{box-shadow:0 0 0 0 rgba(78,14,30,.35)}50%{box-shadow:0 0 0 14px rgba(78,14,30,0)}}
.content > *{animation:rise .45s both}
.content > *:nth-child(1){animation-delay:.02s}
.content > *:nth-child(2){animation-delay:.06s}
.content > *:nth-child(3){animation-delay:.10s}
.content > *:nth-child(4){animation-delay:.14s}
.content > *:nth-child(5){animation-delay:.18s}
.content > *:nth-child(6){animation-delay:.22s}
.view.active > *{animation:rise .4s both}
.view.active > *:nth-child(2){animation-delay:.05s}
.view.active > *:nth-child(3){animation-delay:.09s}
.view.active > *:nth-child(4){animation-delay:.13s}
.view.active > *:nth-child(5){animation-delay:.17s}
.check.on .box{animation:pop .3s}
.dial.running{animation:glowpulse 2s infinite;border-radius:50%}
/* La barre d'étapes fixe (.stepnav) ne doit jamais recevoir l'animation d'entrée :
   elle écrase son propre transform de centrage (translateX(-50%) sur mobile),
   ce qui décale durablement le bouton "Étape suivante" hors de l'écran. */
.content > .stepnav{animation:none}
.module,.lesson-card,.back,.f-btn,.dur,.profile{transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s, background .18s, border-color .18s}

/* ============ Galeries d'images de lecon ============ */
.gallery{display:grid;grid-template-columns:1fr;gap:10px;margin:14px 0}
@media(min-width:920px){.gallery.multi{grid-template-columns:1fr 1fr}}
.gallery img{width:100%;border-radius:16px;border:1px solid var(--line);display:block;background:var(--card);cursor:zoom-in;transition:transform .2s}
.gallery img:hover{transform:scale(1.01)}
.img-placeholder{border:1.5px dashed rgba(78,14,30,.25);border-radius:16px;padding:26px;text-align:center;color:var(--ink-soft);font-size:13px;margin:14px 0;background:rgba(250,248,244,.5)}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(28,18,12,.9);display:none;align-items:center;justify-content:center;z-index:200;padding:20px;cursor:zoom-out}
.lightbox.open{display:flex}
.lightbox img{max-width:100%;max-height:92vh;border-radius:14px}


/* ============ Slots image a l'unite + prompt original ============ */
.imgslot{margin:12px 0}
.imgslot img{width:100%;border-radius:16px;border:1px solid var(--line);display:block;background:var(--card);cursor:zoom-in;transition:transform .2s}
.imgslot img:hover{transform:scale(1.01)}
details.orig{margin:8px 0 2px}
details.orig summary{font-size:12px;font-weight:700;color:var(--ink-soft);cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px dashed rgba(78,14,30,.3);border-radius:99px}
details.orig summary::-webkit-details-marker{display:none}
details.orig[open] summary{background:var(--card)}
.shot .prompt{margin:10px 0 4px}

/* ===== Accent serif surligné dans les titres (même marqueur que page de vente / lead magnets) ===== */
h1.page .serif,h1.page em,h1.lesson-title .serif,h1.lesson-title em{
  font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;font-size:1.14em;
  background:linear-gradient(transparent 62%,var(--sf) 62%)}

/* ===== Boutons CTA (toute la plateforme) ===== */
a.btn-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,var(--bx2),var(--bx));color:var(--bg);font-weight:800;font-size:15px;padding:14px 26px;border-radius:99px;text-decoration:none;box-shadow:0 6px 18px rgba(78,14,30,.35);transition:transform .12s;margin-top:4px}
.card.goal a.btn-cta,.methode.dark a.btn-cta{border:1.5px solid rgba(250,248,244,.35)}
a.btn-cta:active{transform:scale(.97)}
@media(min-width:920px){a.btn-cta:hover{transform:translateY(-1px)}}

/* ===== Bouton favori (cœur) dans chaque leçon ===== */
.fav-btn{margin-left:auto;width:38px;height:38px;border-radius:12px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;font-size:17px;cursor:pointer;flex-shrink:0;transition:transform .12s}
.fav-btn:active{transform:scale(.9)}
.fav-btn.on{background:var(--accent-soft);border-color:var(--accent)}

/* ===== Surlignage des [crochets] dans les prompts ===== */
.prompt pre .ph{background:rgba(250,248,244,.16);color:var(--bg);border-radius:6px;padding:1px 5px;font-weight:600}
.m6step .prompt pre .ph{background:rgba(78,14,30,.1);color:var(--ink)} /* prompts sur carte claire : texte à remplacer lisible (Lisa, 06/09/2026) */

/* ===== Bloc exemple (non copiable, fond translucide) ===== */
.prompt.example{background:rgba(78,14,30,.62);backdrop-filter:blur(2px)}

/* ===== Étapes illustrées (pastilles numérotées) ===== */
.steps-illu .s-row{display:flex;gap:14px;align-items:center;padding:11px 0}
.steps-illu .s-row+.s-row{border-top:1px solid rgba(250,248,244,.14)}
.steps-illu .s-dot{width:38px;height:38px;border-radius:13px;background:var(--bg);color:var(--bx);font-weight:800;font-size:17px;display:grid;place-items:center;flex-shrink:0;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.steps-illu .s-txt{font-size:15.5px;line-height:1.5}

/* ===== Bouton "annuler la validation" d'une leçon ===== */
.unfinish{display:block;margin:10px auto 0;background:none;border:none;font-family:inherit;font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* ===== Guide du prompt (Module 3) : sections dépliantes ===== */
details.guide{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px;overflow:hidden}
details.guide summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:16px 18px;font-weight:700;font-size:15.5px;user-select:none}
details.guide summary::-webkit-details-marker{display:none}
details.guide summary .g-ico{width:38px;height:38px;border-radius:12px;background:var(--bg);display:grid;place-items:center;font-size:18px;flex-shrink:0}
details.guide summary .g-count{margin-left:auto;font-size:11px;font-weight:700;color:var(--ink-soft);background:var(--bg);border-radius:99px;padding:4px 10px;flex-shrink:0}
details.guide summary .chev{width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--bg);font-size:10.5px;display:grid;place-items:center;flex-shrink:0;margin-left:8px;transition:transform .25s}
details.guide[open] summary .chev{transform:rotate(180deg)}
/* Accordéon « + » bien visible (leçons Tes idées, 06/09/2026) */
details.guide summary .chev.plus{width:32px;height:32px;font-size:20px;font-weight:800;margin-left:auto;line-height:1}
details.guide[open] summary .chev.plus{transform:rotate(45deg)}
details.guide summary h3{font-size:17px;font-weight:700;margin:0;color:var(--ink);flex:1;min-width:0}
details.guide .g-body p{margin:0 0 12px}
/* Flèche bordeaux sur une carte-lien (Note tes comptes d'inspiration) */
.module .go-arrow{margin-left:auto;width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-size:18px;font-weight:800;flex-shrink:0}
details.guide .g-body{padding:0 18px 14px}
.g-item{padding:11px 0;border-top:1px solid var(--line)}
.g-item b{font-size:14.5px;letter-spacing:.05em}
.g-item .fr{font-weight:600;color:var(--ink-soft);font-size:13px;letter-spacing:0}
.g-item span{display:block;font-size:14.5px;line-height:1.5;opacity:.85;margin-top:2px}
.g-item .g-pics{display:flex;gap:8px;margin-top:10px}
.g-item .g-pics img{width:32%;max-width:120px;aspect-ratio:3/4;object-fit:cover;border-radius:10px;border:1px solid var(--line);cursor:zoom-in;background:var(--bg)}
.g-item .g-vid{display:block;width:100%;max-width:520px;border-radius:12px;border:1px solid var(--line);margin:10px auto 0;background:var(--bg)}

/* ===== Méthodes en étapes numérotées (Module 3) ===== */
.methode{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:14px}
.methode .m-tag{display:inline-block;background:var(--ink);color:var(--bg);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;border-radius:99px;padding:6px 14px;margin-bottom:10px}
.methode h3{font-size:16px;font-weight:700;letter-spacing:-.01em;margin-bottom:10px}
.methode>p{font-size:15.5px;line-height:1.6;opacity:.88;margin-bottom:8px}
.methode .step{padding:16px 0 4px;border-top:1.5px solid var(--line);margin-top:12px}
.methode .s-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.methode .s-num{width:28px;height:28px;border-radius:9px;background:var(--accent);color:var(--bg);font-weight:800;font-size:14px;display:grid;place-items:center;flex-shrink:0}
.methode .s-head b{font-size:15.5px}
.methode .step p{font-size:14.5px;line-height:1.55;color:var(--ink-soft);margin-bottom:8px}

/* Variante sombre : dénote "ceci est une méthode/un workflow à suivre" (même
   traitement que .card.goal), utilisée pour le workflow commun du Module 3 */
.methode.dark{background:var(--ink);color:#FAF8F4;border-color:transparent}
.methode.dark h3{color:var(--bg)}
.methode.dark>p{color:rgba(250,248,244,.85);opacity:1}
.methode.dark .step{border-top-color:rgba(250,248,244,.16)}
.methode.dark .s-head b{color:#FAF8F4}
.methode.dark .step p{color:rgba(250,248,244,.72)}

/* ===== Étapes texte à gauche / capture à droite (Module 3, génération) ===== */
.step-split{display:grid;gap:14px;align-items:start}
@media(min-width:920px){.step-split{grid-template-columns:1fr 280px}.step-split .imgslot{margin:0}}

/* ===== Code promo mis en évidence (Module 3, scènes) ===== */
.promo-wrap{text-align:center;margin:16px 0 6px}
.promo-label{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:10px}
.promo-code{display:inline-flex;align-items:center;gap:14px;border:2px dashed var(--accent);background:var(--accent-soft);border-radius:16px;padding:14px 24px}
.promo-code b{font-size:26px;font-weight:800;letter-spacing:.18em}

/* ===== Fiches outils (Module 2) : logo + rangées de kit ===== */
.tool-logo{width:100px;height:100px;border-radius:26px;border:1px solid var(--line);background:#fff;object-fit:contain;padding:14px;display:block;margin:8px auto 26px;box-shadow:0 8px 24px rgba(78,14,30,.10)}
.tool-logo.emoji{display:grid;place-items:center;font-size:48px;padding:0}

/* Bannière de kit : le nom + le prix, impossible à rater */
.kit-banner{text-align:center;padding:6px 0 16px;border-bottom:2px solid var(--line);margin-bottom:4px}
.kit-banner .k-emoji{font-size:34px;display:block;margin-bottom:6px}
.kit-banner .k-name{font-family:'Inter Tight',sans-serif;font-size:22px;font-weight:900;letter-spacing:-.01em;display:block}
.kit-banner .k-price{display:inline-block;background:var(--accent);color:var(--bg);border-radius:99px;font-weight:800;font-size:16px;padding:8px 20px;margin-top:10px}
.kit-banner .k-sub{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;margin-top:10px}
.card.goal .kit-banner{border-bottom-color:rgba(250,248,244,.16)}
.card.goal .kit-banner .k-sub{color:var(--bg)}

.kit-row{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-top:1px solid var(--line)}
/* :first-of-type ne marche pas ici : .kit-banner (aussi un <div>) précède le 1er .kit-row,
   qui n'est donc jamais "premier de son type" → sa bordure haute s'ajoutait à celle du
   bandeau juste au-dessus, d'où le double trait. On cible plutôt le voisin direct. */
.kit-banner + .kit-row{border-top:none}
.kit-row .k-logo{width:42px;height:42px;border-radius:13px;background:#fff;border:1px solid var(--line);object-fit:contain;padding:6px;flex-shrink:0}
.kit-row .k-logos{display:flex;flex-direction:column;flex-shrink:0;width:42px}
.kit-row .k-logos .k-logo{width:100%;height:auto;aspect-ratio:1/1;margin-left:0;box-shadow:0 2px 5px rgba(0,0,0,.15)}
.kit-row .k-logos .k-logo:not(:first-child){margin-top:-14px}
.kit-row .k-body{flex:1;min-width:0}
.kit-row b{display:block;font-size:15.5px;margin-bottom:3px}
.kit-row span{display:block;font-size:14.5px;line-height:1.55;opacity:.85}
.card.goal .kit-row{border-top-color:rgba(250,248,244,.14)}
.card.goal .kit-row b{color:#FAF8F4}
.card.goal .kit-row span{color:rgba(250,248,244,.82);opacity:1}
.kit-sub{font-size:13px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin-bottom:10px}
.card.goal .kit-sub{color:var(--bg)}

/* Cartes de plan (fiches outils) */
.plan{border:1.5px solid var(--line);border-radius:16px;padding:16px;margin-bottom:20px;background:var(--card)}
.plan .p-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:4px}
.plan .p-tag{display:block;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:3px}
.plan .p-name{font-size:17px;font-weight:800}
.plan .p-price{background:var(--bg);border-radius:12px;padding:9px 14px;font-weight:800;font-size:15.5px;white-space:nowrap;flex-shrink:0}
.plan .p-line{font-size:14.5px;line-height:1.55;padding:8px 0 2px;border-top:1px solid var(--line);margin-top:8px;opacity:.9}
.plan.reco{border-color:var(--accent);box-shadow:0 8px 22px rgba(78,14,30,.22)}
.plan.reco .p-price{background:var(--accent);color:var(--bg)}

/* ===== Lexique (Module 1, Leçon 3) ===== */
details.lexique summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px}
details.lexique summary::-webkit-details-marker{display:none}
details.lexique summary h3{margin-bottom:0}
details.lexique summary .chev{width:24px;height:24px;border-radius:50%;background:rgba(250,248,244,.14);color:var(--bg);font-size:12px;display:grid;place-items:center;flex-shrink:0;transition:transform .25s}
details.lexique[open] summary .chev{transform:rotate(180deg)}
.lexique .lex-grid{display:grid;gap:14px;margin-top:14px}
@media(min-width:700px){.lexique .lex-grid{grid-template-columns:1fr 1fr}}
@media(min-width:700px){.lexique.m6l5-explain .lex-grid{grid-template-columns:1fr}}
.lexique .lex-item{border-top:1px solid rgba(250,248,244,.14);padding-top:12px}
.lexique .lex-item dt{font-family:'Instrument Serif',serif;font-style:italic;font-size:18px;color:var(--bg);margin-bottom:4px}
.lexique .lex-item dd{font-size:15.5px;line-height:1.5;color:rgba(250,248,244,.8)}
/* Variante claire : quand le lexique n'est pas dans un .card.goal (fond bordeaux) */
.lexique:not(.goal) .lex-item{border-top-color:var(--line)}
.lexique:not(.goal) .lex-item dt{color:var(--ink)}
.lexique:not(.goal) .lex-item dd{color:var(--ink-soft);opacity:.9}
/* Surlignage jaune façon feutre, pour faire ressortir les 3 titres (leçon 5) */
.lexique.m6l5-explain .lex-item dt{
  display:inline-block;background:linear-gradient(to bottom, transparent 58%, var(--accent-soft) 58%);
  padding:0 4px;margin-bottom:2px;
}

/* ===== Badges numérotés jaunes (remplacent les emoji 1️⃣2️⃣3️⃣) ===== */
.num-badge{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:8px;background:var(--accent);color:var(--bg);font-weight:800;font-size:13px;flex-shrink:0}

/* ===== Exemples d'images labellisées (Module 3, méthodes de prompt) ===== */
.ex-grid{display:flex;gap:10px;margin:12px 0;flex-wrap:wrap}
.ex-item{flex:1;min-width:90px;text-align:center}
/* Grille stricte 2x2 (au lieu du flex-wrap qui casse en "3 + 1 grande" à 4 images) */
.ex-grid.cols-2{display:grid;grid-template-columns:1fr 1fr}
.ex-grid.cols-2 .ex-item{min-width:0}
.ex-item img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:12px;border:1px solid var(--line);cursor:zoom-in;background:var(--bg);display:block;margin-bottom:6px}
.ex-item span{font-size:12.5px;color:var(--ink-soft);line-height:1.35;display:block;font-weight:600}

/* ===== Cartes "causes fréquentes" (Module 3, leçon 4) ===== */
.cause{padding:13px 0;border-top:1px solid var(--line)}
.cause:first-child{border-top:none;padding-top:2px}
.cause b{display:block;font-size:15.5px;margin-bottom:3px}
.cause span{font-size:14.5px;line-height:1.55;opacity:.85;display:block}

/* ===== Capture d'écran d'étape (Module 3, workflow) ===== */
.step-shot{width:100%;border-radius:14px;border:1px solid var(--line);display:block;margin-top:10px;cursor:zoom-in;background:var(--card)}

/* Vidéos de démonstration (Module 5) */
.vidslot{margin:14px 0}
.vidslot video{width:100%;border-radius:14px;display:block;background:#000;border:1px solid var(--line)}

/* Grille des 5 éléments d'un prompt vidéo (Module 5, leçon 2) */
.m5-struct{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.m5-struct-card{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:13px 14px}
.m5-struct-card.wide{grid-column:1/-1}
.m5-struct-card b{display:block;font-size:14px;margin-bottom:3px}
.m5-struct-card span{display:block;font-size:13.5px;color:var(--ink-soft);line-height:1.4}
@media(max-width:380px){.m5-struct{grid-template-columns:1fr}}

/* ---------- Plan MWS : verrouillage d'interface (05/09/2026) ---------- */
.module.plan-locked{opacity:.72}
.module.plan-locked .ring{background:var(--accent-soft)}
.module.plan-locked .ring i{font-size:13px}
.module.soon-locked{cursor:default}
.pc.pc-lock{background:transparent;color:var(--ink-soft)}
.plan-lock p{font-size:14px;line-height:1.6}

/* ===== Moment de fierté (06/09/2026) ===== */
.fierte-ov{position:fixed;inset:0;background:rgba(46,10,21,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:9000;display:grid;place-items:center;padding:20px;animation:fade .25s}
.fierte-card{background:var(--card);border-radius:24px;padding:28px 22px 18px;max-width:380px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(46,10,21,.4)}
.fierte-emoji{font-size:44px;margin-bottom:6px}
.fierte-card h3{font-size:20px;margin:0 0 10px;color:var(--ink)}
.fierte-card p{font-size:15px;line-height:1.55;color:var(--ink-soft);margin:0 0 18px}
.fierte-card .btn-cta{display:block;margin:0 0 12px}
.fierte-avis{display:block;font-size:14.5px;font-weight:700;color:var(--ink);text-decoration:underline;margin-bottom:14px}
.fierte-close{background:none;border:none;font:inherit;font-size:13.5px;color:var(--ink-soft);cursor:pointer;padding:6px}

/* Sommaire : cartes à emoji (formats, références) et carte Partage en bordeaux */
.lesson-card .n.emo{background:transparent;box-shadow:none;font-size:24px;color:inherit}
.lesson-card.done .n.emo{background:transparent}
.module.share-real{background:var(--ink);border-color:var(--ink);color:#FAF8F4;margin-top:22px}
.module.share-real .mod-icon{background:rgba(250,248,244,.14)}
.module.share-real .mod-body b{color:#FAF8F4}
.module.share-real .mod-body span{color:rgba(250,248,244,.8)}

.check .txt small a{color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.card.goal .check .txt small a{color:#FAF8F4}

/* Étapes séquentielles cochables en bordeaux (Mets-la en ligne, 08/09/2026) : numéro lisible sur le fond bordeaux */
.m6-steps .check.check-fill .box::before{color:#FAF8F4}
.card.goal .m6-steps .check.check-fill .box{background:var(--ink);border-color:var(--ink)}

/* Accordéon bordeaux (09/09/2026) : un bloc .card.goal qui se replie, même titre que les accordéons blancs */
details.guide.card.goal{padding:0;background:var(--ink);border-color:var(--ink);margin-bottom:14px}
details.guide.card.goal summary h3{color:#FAF8F4}
details.guide.card.goal summary .g-ico{background:rgba(250,248,244,.14)}
details.guide.card.goal summary .chev{background:#FAF8F4;color:var(--ink)}
details.guide.card.goal .g-body{padding:0 18px 20px}
details.guide.card.goal .g-body>p:first-child{margin-top:0}