@layer modules{
/* ── Discovery : centre de formation (domaines → parcours → leçons) ──
   Vue plein écran montée dans #grid (comme Accueil / Paramètres), via le hash
   #discovery. body.in-discovery masque les colonnes latérales. */

  /* Vue plein écran : on récupère toute la largeur, comme la page Paramètres */
  body.in-discovery .col-profile,body.in-discovery .col-report{display:none}
  body.in-discovery .split{grid-template-columns:1fr}

  /* Bouton d'en-tête - secondaire, légèrement teinté accent */
  .disco-btn{position:relative}
  .disco-btn svg.ic{color:var(--accent)}
  .disco-btn:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--card))}

  /* ── Page ── */
  .disco-page{max-width:1080px;margin:0 auto;display:flex;flex-direction:column;gap:var(--sp-24)}
  .disco-top{display:flex;align-items:center;gap:var(--sp-16)}
  .disco-top-back{display:inline-flex;align-items:center;gap:var(--sp-6);flex:none;
    border:1px solid var(--line);background:var(--card);color:var(--mut);
    padding:var(--sp-6) var(--sp-12);border-radius:var(--radius-pill);font-size:var(--fs-md);font-weight:var(--fw-medium);cursor:pointer;
    transition:border-color .12s,color .12s,background .12s}
  .disco-top-back:hover{border-color:var(--accent);color:var(--txt);background:color-mix(in srgb,var(--accent) 6%,var(--card))}
  .disco-top-back svg.ic{width:15px;height:15px}
  .disco-top-title{margin:0;font-size:var(--fs-base);font-weight:var(--fw-strong);letter-spacing:-.01em;color:var(--mut2);text-transform:uppercase;letter-spacing:.06em}

  .disco{display:flex;flex-direction:column;gap:var(--sp-24);min-height:100%}

  /* ── Accueil : héro + grille de domaines ── */
  .disco-hero{display:flex;align-items:center;gap:var(--sp-24);position:relative;overflow:hidden;
    background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 13%,var(--card2)),var(--card2) 70%);
    border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));border-radius:var(--radius-modal);padding:var(--sp-28) var(--sp-32)}
  .disco-hero-txt{flex:1;min-width:0}
  .disco-hero-txt h2{margin:0 0 var(--sp-8);font-size:27px;font-weight:var(--fw-bold);letter-spacing:-.025em;line-height:1.15}
  .disco-hero-txt p{margin:0;color:var(--mut);font-size:var(--fs-base);line-height:1.6;max-width:60ch}
  .disco-hero-prog{margin-top:var(--sp-14)!important;color:var(--accent)!important;font-weight:var(--fw-strong);
    display:inline-flex;align-items:center;gap:var(--sp-6);
    background:color-mix(in srgb,var(--accent) 12%,transparent);padding:var(--sp-4) var(--sp-12);border-radius:var(--radius-pill);font-size:var(--fs-md)}
  .disco-hero-prog svg.ic{width:15px;height:15px}
  .disco-hero-art{flex:none;width:200px}
  .disco-hero-art svg{width:100%;height:auto;display:block}
  @media(max-width:720px){ .disco-hero-art{display:none} .disco-hero{padding:var(--sp-22) var(--sp-24)} .disco-hero-txt h2{font-size:var(--fs-xl)} }

  /* ── Accueil : tableau de bord (Lot 1) - niveau/XP/série, reprendre, conseils ── */
  .dd-hero{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-24);flex-wrap:wrap;
    background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 13%,var(--card2)),var(--card2) 70%);
    border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));border-radius:var(--radius-modal);padding:var(--sp-24) var(--sp-28)}
  .dd-hero-main{display:flex;align-items:center;gap:var(--sp-20);flex:1;min-width:260px}
  .dd-badge{position:relative;flex:none;width:96px;height:72px}
  .dd-badge svg{width:100%;height:auto;display:block}
  .dd-badge-lv{position:absolute;right:-6px;bottom:-4px;min-width:30px;height:30px;padding:0 var(--sp-6);
    display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-pill);
    background:var(--accent);color:var(--on-solid);font-weight:var(--fw-bold);font-size:var(--fs-base);
    box-shadow:0 2px 8px color-mix(in srgb,var(--accent) 45%,transparent);border:2px solid var(--card2)}
  .dd-hero-txt{min-width:0;flex:1}
  .dd-hello{margin:0 0 var(--sp-2);color:var(--mut);font-size:var(--fs-md);font-weight:var(--fw-medium)}
  .dd-hero-txt h2{margin:0 0 var(--sp-10);font-size:var(--fs-xl);font-weight:var(--fw-bold);letter-spacing:var(--ls-tight);line-height:1.1}
  .dd-xpbar{height:9px;border-radius:var(--radius-pill);background:var(--line2);overflow:hidden;max-width:340px}
  .dd-xpbar>span{display:block;height:100%;border-radius:var(--radius-pill);background:var(--accent);transition:width .4s}
  .dd-xp-meta{margin:var(--sp-8) 0 0;display:flex;align-items:center;gap:var(--sp-6);color:var(--mut);font-size:var(--fs-sm);font-weight:var(--fw-medium)}
  .dd-xp-meta svg.ic{width:13px;height:13px;color:var(--accent)}
  .dd-chips{display:flex;flex-direction:column;gap:var(--sp-8);flex:none}
  .dd-chip{display:inline-flex;align-items:center;gap:var(--sp-8);background:var(--card);border:1px solid var(--line);
    border-radius:var(--radius-pill);padding:var(--sp-6) var(--sp-14);font-size:var(--fs-md);font-weight:var(--fw-medium);color:var(--txt);white-space:nowrap}
  .dd-chip svg.ic{width:15px;height:15px;color:var(--accent)}
  @media(max-width:640px){ .dd-chips{flex-direction:row;flex-wrap:wrap;width:100%} .dd-hero{padding:var(--sp-22) var(--sp-22)} }

  .dd-sec{display:flex;flex-direction:column;gap:var(--sp-14)}
  .dd-sec>h3{margin:0;font-size:var(--fs-md);font-weight:var(--fw-strong);text-transform:uppercase;letter-spacing:.06em;color:var(--mut2)}
  .dd-rail{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--sp-14)}
  .dd-card{display:flex;align-items:flex-start;gap:var(--sp-14);text-align:left;cursor:pointer;
    padding:var(--sp-16);border:1px solid var(--line);border-radius:var(--radius-modal);background:var(--card);
    transition:border-color .12s,transform .12s,box-shadow .12s}
  .dd-card:hover{border-color:var(--accent);transform:translateY(-3px);
    box-shadow:0 10px 26px -14px color-mix(in srgb,var(--accent) 60%,transparent)}
  .dd-card-ico{flex:none;width:42px;height:42px;border-radius:var(--radius);display:grid;place-items:center;
    background:var(--card2);color:var(--accent)}
  .dd-card-ico svg.ic{width:21px;height:21px}
  .dd-card-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--sp-4)}
  .dd-card-dom{font-size:var(--fs-xs);font-weight:var(--fw-strong);text-transform:uppercase;letter-spacing:.05em;color:var(--mut2)}
  .dd-card-title{font-size:var(--fs-base);font-weight:var(--fw-strong);letter-spacing:-.01em;line-height:1.25;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dd-card-bar{display:block;height:5px;border-radius:var(--radius-pill);background:var(--line2);overflow:hidden;margin-top:var(--sp-1)}
  .dd-card-bar>span{display:block;height:100%;background:var(--accent);border-radius:var(--radius-pill)}
  .dd-card-meta{font-size:var(--fs-sm);color:var(--mut)}
  .dd-card-cta{flex:none;align-self:center;display:inline-flex;align-items:center;gap:var(--sp-4);
    font-size:var(--fs-sm);font-weight:var(--fw-strong);color:var(--accent);white-space:nowrap}
  .dd-card-cta svg.ic{width:14px;height:14px}
  .dd-card-cont .dd-card-ico{background:color-mix(in srgb,var(--accent) 14%,var(--card2))}

  /* ── Conteneurs diplômants : en-tête + étapes + certificat (Lot 4) ── */
  .disco-fhead{display:flex;align-items:center;gap:var(--sp-18);flex-wrap:wrap;
    background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 12%,var(--card2)),var(--card2) 72%);
    border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));border-radius:var(--radius-modal);padding:var(--sp-20) var(--sp-24)}
  .df-ico{flex:none;width:54px;height:54px;border-radius:var(--radius);display:grid;place-items:center;
    background:var(--card);border:1px solid var(--line);color:var(--accent)}
  .df-ico svg.ic{width:26px;height:26px}
  .df-txt{flex:1;min-width:200px}
  .df-eyebrow{display:flex;align-items:center;gap:var(--sp-6);font-size:var(--fs-sm);font-weight:var(--fw-strong);text-transform:uppercase;
    letter-spacing:.05em;color:var(--accent)}
  .df-eyebrow svg.ic{width:14px;height:14px}
  .df-track{color:var(--mut2)}
  .df-txt h2{margin:var(--sp-6) 0 var(--sp-4);font-size:var(--fs-xl);font-weight:var(--fw-bold);letter-spacing:var(--ls-tight);line-height:1.15}
  .df-txt p{margin:0;color:var(--mut);font-size:var(--fs-base);line-height:var(--lh-normal);max-width:62ch}
  .df-prog{flex:none;text-align:right;display:flex;flex-direction:column;gap:var(--sp-2)}
  .df-pct{font-size:var(--fs-2xl);font-weight:var(--fw-bold);letter-spacing:var(--ls-tight);color:var(--accent);line-height:var(--lh-flat)}
  .df-pmeta{font-size:var(--fs-sm);color:var(--mut)}
  @media(max-width:600px){ .df-prog{text-align:left} }

  .disco-steps{display:flex;flex-direction:column;gap:var(--sp-10)}
  .disco-step{display:flex;align-items:center;gap:var(--sp-14);text-align:left;width:100%;cursor:pointer;
    padding:var(--sp-14) var(--sp-16);border:1px solid var(--line);border-radius:var(--radius);background:var(--card);
    transition:border-color .12s,transform .12s,box-shadow .12s}
  .disco-step:not(.locked):hover{border-color:var(--accent);transform:translateX(3px);
    box-shadow:0 8px 22px -14px color-mix(in srgb,var(--accent) 60%,transparent)}
  .disco-step.locked{cursor:not-allowed;opacity:.6}
  .dstep-n{flex:none;width:34px;height:34px;border-radius:var(--radius-pill);display:grid;place-items:center;
    font-weight:var(--fw-bold);font-size:var(--fs-base);background:var(--card2);color:var(--mut2);border:1px solid var(--line)}
  .dstep-n svg.ic{width:16px;height:16px}
  .disco-step.done .dstep-n{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok);
    border-color:color-mix(in srgb,var(--ok) 40%,var(--line))}
  .disco-step.locked .dstep-n{color:var(--mut)}
  .dstep-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--sp-6)}
  .dstep-title{font-size:var(--fs-base);font-weight:var(--fw-strong);letter-spacing:-.01em;line-height:var(--lh-tight)}
  .dstep-bar{display:block;height:5px;border-radius:var(--radius-pill);background:var(--line2);overflow:hidden}
  .dstep-bar>span{display:block;height:100%;background:var(--accent);border-radius:var(--radius-pill);transition:width .3s}
  .disco-step.done .dstep-bar>span{background:var(--ok)}
  .dstep-meta{font-size:var(--fs-sm);color:var(--mut)}
  .dstep-cta{flex:none;color:var(--accent)}
  .dstep-cta svg.ic{width:16px;height:16px}

  .disco-cert{display:flex;align-items:center;gap:var(--sp-20);overflow:hidden;position:relative;
    border:1px solid color-mix(in srgb,var(--ok) 38%,var(--line));border-radius:var(--radius-modal);padding:var(--sp-22) var(--sp-26);
    background:linear-gradient(120deg,color-mix(in srgb,var(--ok) 12%,var(--card2)),var(--card2) 70%)}
  .dcert-seal{flex:none;width:64px;height:64px;border-radius:var(--radius-pill);display:grid;place-items:center;
    background:color-mix(in srgb,var(--ok) 18%,var(--card));color:var(--ok);
    border:2px solid color-mix(in srgb,var(--ok) 45%,transparent)}
  .dcert-seal svg.ic{width:32px;height:32px}
  .dcert-body{min-width:0}
  .dcert-eyebrow{display:flex;align-items:center;gap:var(--sp-6);font-size:var(--fs-sm);font-weight:var(--fw-bold);text-transform:uppercase;
    letter-spacing:.06em;color:var(--ok)}
  .dcert-eyebrow svg.ic{width:14px;height:14px}
  .dcert-body h3{margin:var(--sp-6) 0 var(--sp-4);font-size:var(--fs-lg);font-weight:var(--fw-bold);letter-spacing:var(--ls-tight);line-height:1.15}
  .dcert-name{margin:0 0 var(--sp-2);font-size:var(--fs-base);font-weight:var(--fw-strong);color:var(--txt)}
  .dcert-meta{margin:0;font-size:var(--fs-sm);color:var(--mut)}
  @media(max-width:560px){ .disco-cert{flex-direction:column;text-align:center;align-items:center} }

  /* ── Éditeur de contenu + Mes créations (Lot 5) ── */
  .dd-makerow{display:flex}
  .dd-make{display:inline-flex;align-items:center;gap:var(--sp-8);padding:var(--sp-8) var(--sp-16);border-radius:var(--radius-pill);cursor:pointer;
    font-size:var(--fs-md);font-weight:var(--fw-strong);color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--card));
    border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line))}
  .dd-make:hover{background:color-mix(in srgb,var(--accent) 15%,var(--card));border-color:var(--accent)}
  .dd-make svg.ic{width:15px;height:15px}

  /* L7 - recherche + filtres + marque-pages */
  .dd-search{display:flex;gap:var(--sp-10);flex-wrap:wrap;align-items:center;margin:0 0 var(--sp-16)}
  .dd-search-in{flex:1 1 260px;display:flex;align-items:center;gap:var(--sp-8);padding:var(--sp-10) var(--sp-14);border-radius:var(--radius);
    background:var(--card);border:1px solid var(--line);transition:border-color .14s}
  .dd-search-in:focus-within{border-color:var(--accent)}
  .dd-search-in svg.ic{width:16px;height:16px;color:var(--mut);flex:0 0 auto}
  .dd-search-in input{flex:1;min-width:0;border:0;background:transparent;color:var(--txt);font:inherit;outline:none}
  .dd-search-f{padding:var(--sp-10) var(--sp-12);border-radius:var(--radius);background:var(--card);border:1px solid var(--line);
    color:var(--txt);font:inherit;cursor:pointer}
  .dd-search-f:hover{border-color:var(--accent)}
  .dd-results:empty{display:none}
  .dd-rescount{margin:var(--sp-2) 0 var(--sp-12);color:var(--mut);font-size:var(--fs-md)}
  .dd-empty{padding:var(--sp-30) var(--sp-18);text-align:center;color:var(--mut);border:1px dashed var(--line);border-radius:var(--radius)}
  .dd-rescard{padding:0;overflow:hidden}
  .dd-rescard:hover{transform:none}
  .dd-rescard-main{flex:1;min-width:0;display:flex;align-items:flex-start;gap:var(--sp-14);padding:var(--sp-18);
    background:transparent;border:0;cursor:pointer;text-align:left;color:inherit;font:inherit}
  .dd-bm{flex:0 0 auto;width:48px;align-self:stretch;border:0;border-left:1px solid var(--line);
    background:transparent;cursor:pointer;color:var(--mut);display:grid;place-items:center;transition:color .14s,background .14s}
  .dd-bm:hover{background:color-mix(in srgb,var(--accent) 10%,var(--card2));color:var(--accent)}
  .dd-bm svg.ic{width:18px;height:18px}
  .dd-bm.on{color:var(--accent)}
  .dd-bm.on svg.ic{fill:currentColor}

  .dmine-create{border:1px dashed color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:var(--radius);
    padding:var(--sp-16) var(--sp-18);background:color-mix(in srgb,var(--accent) 4%,var(--card2))}
  .dmine-create-h{display:block;font-size:var(--fs-md);font-weight:var(--fw-strong);color:var(--mut2);margin-bottom:var(--sp-12)}
  .dmine-kinds{display:flex;gap:var(--sp-10);flex-wrap:wrap}
  .dmine-kinds button{display:inline-flex;align-items:center;gap:var(--sp-8);padding:var(--sp-10) var(--sp-16);border-radius:var(--radius);cursor:pointer;
    font-size:var(--fs-md);font-weight:var(--fw-medium);color:var(--txt);background:var(--card);border:1px solid var(--line)}
  .dmine-kinds button:hover{border-color:var(--accent);color:var(--accent)}
  .dmine-kinds button svg.ic{width:16px;height:16px;color:var(--accent)}
  .dmine-list{display:flex;flex-direction:column;gap:var(--sp-10)}
  .dmine-row{display:flex;align-items:center;gap:var(--sp-8);border:1px solid var(--line);border-radius:var(--radius);background:var(--card);padding:var(--sp-6) var(--sp-8) var(--sp-6) var(--sp-6)}
  .dmine-open{flex:1;min-width:0;display:flex;align-items:center;gap:var(--sp-12);text-align:left;cursor:pointer;
    background:transparent;border:none;padding:var(--sp-8)}
  .dmine-ico{flex:none;width:38px;height:38px;border-radius:var(--radius);display:grid;place-items:center;
    background:var(--card2);color:var(--accent)}
  .dmine-ico svg.ic{width:19px;height:19px}
  .dmine-body{min-width:0;display:flex;flex-direction:column;gap:var(--sp-2)}
  .dmine-kind{font-size:var(--fs-xs);font-weight:var(--fw-strong);text-transform:uppercase;letter-spacing:.04em;color:var(--mut2)}
  .dmine-title{font-size:var(--fs-base);font-weight:var(--fw-strong);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dmine-acts{flex:none;display:flex;gap:var(--sp-4)}
  .dmine-acts button{width:34px;height:34px;display:grid;place-items:center;border-radius:var(--radius);cursor:pointer;
    background:transparent;border:1px solid transparent;color:var(--mut)}
  .dmine-acts button:hover{background:var(--card2);color:var(--txt);border-color:var(--line)}
  .dmine-acts button.danger:hover{color:var(--err);border-color:color-mix(in srgb,var(--err) 40%,var(--line))}
  .dmine-acts svg.ic{width:16px;height:16px}
  .dmine-loading,.dmine-empty{color:var(--mut);font-size:var(--fs-base);padding:var(--sp-8) var(--sp-2)}

  .ded{max-width:760px}
  .ded-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-14);flex-wrap:wrap;margin-bottom:var(--sp-18)}
  .ded-head h2{margin:0;font-size:var(--fs-lg);font-weight:var(--fw-bold);letter-spacing:-.01em}
  .ded-actions{display:flex;gap:var(--sp-8)}
  .ded-actions svg.ic{width:15px;height:15px}
  .ded-form{display:flex;flex-direction:column;gap:var(--sp-14)}
  .ded-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-12)}
  .ded-grid2{display:grid;grid-template-columns:1fr 90px;gap:var(--sp-8)}
  @media(max-width:560px){ .ded-grid{grid-template-columns:1fr} }
  .ded-field{display:flex;flex-direction:column;gap:var(--sp-4)}
  .ded-field>span{font-size:var(--fs-sm);font-weight:var(--fw-strong);color:var(--mut2)}
  .ded-field input,.ded-field select,.ded-field textarea,
  .ded-item input,.ded-item textarea,.ded-arr input,.ded-starter textarea{
    width:100%;font-size:var(--fs-base);color:var(--txt);background:var(--card);border:1px solid var(--line);
    border-radius:var(--radius);padding:var(--sp-8) var(--sp-12);font-family:inherit}
  .ded-item textarea,.ded-field textarea,.ded-starter textarea{resize:vertical;line-height:var(--lh-normal)}
  .ded-starter textarea,.ded-item textarea[placeholder]{font-family:var(--font-mono);font-size:var(--fs-md)}
  .ded-field input:focus,.ded-field select:focus,.ded-field textarea:focus,
  .ded-item input:focus,.ded-item textarea:focus,.ded-arr input:focus{outline:none;border-color:var(--accent)}
  .ded-check{display:flex;align-items:center;gap:var(--sp-8);font-size:var(--fs-base);cursor:pointer}
  .ded-check input{width:16px;height:16px;accent-color:var(--accent)}
  .ded-sec{margin:var(--sp-8) 0 0;font-size:var(--fs-sm);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.05em;color:var(--mut2)}
  .ded-sub{font-size:var(--fs-sm);font-weight:var(--fw-strong);color:var(--mut2);margin-top:var(--sp-4)}
  .ded-hint{font-weight:var(--fw-medium);color:var(--mut)}
  .ded-list{display:flex;flex-direction:column;gap:var(--sp-12)}
  .ded-item{display:flex;flex-direction:column;gap:var(--sp-8);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-12);background:var(--card2)}
  .ded-item-h{display:flex;align-items:center;justify-content:space-between;font-size:var(--fs-sm);font-weight:var(--fw-strong);color:var(--mut2)}
  .ded-starter{display:flex;flex-direction:column;gap:var(--sp-8)}
  .ded-arrs{display:flex;flex-direction:column;gap:var(--sp-8)}
  .ded-arr{display:flex;align-items:center;gap:var(--sp-8)}
  .ded-arr input[type=radio]{flex:none;width:16px;height:16px;accent-color:var(--accent)}
  .ded-x{flex:none;width:32px;height:32px;display:grid;place-items:center;border-radius:var(--radius);cursor:pointer;
    background:transparent;border:1px solid var(--line);color:var(--mut)}
  .ded-x:hover{color:var(--err);border-color:color-mix(in srgb,var(--err) 40%,var(--line))}
  .ded-x svg.ic{width:15px;height:15px}
  .ded-add{align-self:flex-start;display:inline-flex;align-items:center;gap:var(--sp-6);padding:var(--sp-8) var(--sp-14);border-radius:var(--radius);cursor:pointer;
    font-size:var(--fs-md);font-weight:var(--fw-medium);color:var(--accent);background:transparent;border:1px dashed color-mix(in srgb,var(--accent) 35%,var(--line))}
  .ded-add:hover{background:color-mix(in srgb,var(--accent) 8%,transparent);border-style:solid}
  .ded-add svg.ic{width:14px;height:14px}

  .ditem-lesson{padding:var(--sp-16) 0;border-top:1px solid var(--line)}
  .ditem-lesson:first-of-type{border-top:none;padding-top:var(--sp-6)}
  .ditem-lesson h3{margin:0 0 var(--sp-6);font-size:var(--fs-lg);font-weight:var(--fw-strong);letter-spacing:-.01em}
  .ded-price-note{display:flex;align-items:center;gap:var(--sp-6);margin:-4px 0 0;font-size:var(--fs-sm);color:var(--mut)}
  .ded-price-note svg.ic{width:14px;height:14px;color:var(--accent);flex:none}

  /* ── Boutique de contenus (Lot 6) ── */
  .dstore-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--sp-16)}
  .dstore-card{display:flex;flex-direction:column;gap:var(--sp-8);text-align:left;cursor:pointer;
    padding:var(--sp-16);border:1px solid var(--line);border-radius:var(--radius-modal);background:var(--card);
    transition:border-color .12s,transform .12s,box-shadow .12s}
  .dstore-card:hover{border-color:var(--accent);transform:translateY(-3px);
    box-shadow:0 10px 26px -14px color-mix(in srgb,var(--accent) 60%,transparent)}
  .dstore-top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-10)}
  .dstore-ico{flex:none;width:40px;height:40px;border-radius:var(--radius);display:grid;place-items:center;
    background:var(--card2);color:var(--accent)}
  .dstore-ico svg.ic{width:20px;height:20px}
  .dstore-price{flex:none;font-size:var(--fs-base);font-weight:var(--fw-bold);color:var(--accent);
    background:color-mix(in srgb,var(--accent) 12%,transparent);padding:var(--sp-4) var(--sp-10);border-radius:var(--radius-pill)}
  .dstore-price.free{color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent)}
  .dstore-kind{font-size:var(--fs-xs);font-weight:var(--fw-strong);text-transform:uppercase;letter-spacing:.04em;color:var(--mut2)}
  .dstore-title{font-size:var(--fs-base);font-weight:var(--fw-strong);letter-spacing:-.01em;line-height:1.25}
  .dstore-tag{font-size:var(--fs-sm);color:var(--mut);line-height:1.4}
  .dstore-cta{margin-top:var(--sp-4);display:inline-flex;align-items:center;gap:var(--sp-4);font-size:var(--fs-md);font-weight:var(--fw-strong);color:var(--accent)}
  .dstore-cta.owned{color:var(--ok)}
  .dstore-cta svg.ic{width:15px;height:15px}

  /* ── Gamification (School Lot 1) ── */
  .dg-strip{display:flex;align-items:center;gap:var(--sp-18);flex-wrap:wrap;
    border:1px solid var(--line);border-radius:var(--radius-modal);padding:var(--sp-14) var(--sp-18);background:var(--card)}
  .dg-mascot{display:flex;align-items:center;gap:var(--sp-14);flex:1;min-width:240px}
  .dg-mascot>svg{flex:none;width:58px;height:58px}
  .dg-bubble{position:relative;background:var(--card2);border:1px solid var(--line);border-radius:var(--radius);
    padding:var(--sp-10) var(--sp-14);font-size:var(--fs-md);line-height:1.4;color:var(--txt);font-weight:var(--fw-medium)}
  .dg-bubble::before{content:'';position:absolute;left:-7px;top:18px;width:12px;height:12px;
    background:var(--card2);border-left:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)}
  .dg-stats{display:flex;gap:var(--sp-10);flex:none}
  .dg-stat{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);min-width:64px;cursor:pointer;
    padding:var(--sp-8) var(--sp-12);border-radius:var(--radius);background:var(--card2);border:1px solid var(--line);text-align:center}
  button.dg-stat:hover{border-color:var(--accent)}
  .dg-stat-v{font-size:var(--fs-base);font-weight:var(--fw-bold);color:var(--accent);line-height:var(--lh-flat)}
  .dg-stat-l{font-size:var(--fs-2xs);font-weight:var(--fw-strong);text-transform:uppercase;letter-spacing:.03em;color:var(--mut2)}
  .dg-daily-ring{width:26px;height:26px;border-radius:var(--radius-pill);display:grid;place-items:center;color:var(--on-solid);
    background:conic-gradient(var(--accent) calc(var(--p,0)*1%), var(--line2) 0)}
  .dg-daily-ring::after{content:'';position:absolute;width:18px;height:18px;border-radius:var(--radius-pill);background:var(--card2)}
  .dg-daily-ring{position:relative} .dg-daily-ring svg.ic{position:relative;z-index:1;width:13px;height:13px;color:var(--ok)}
  .dg-daily-ring.done{background:var(--ok)} .dg-daily-ring.done::after{display:none}
  @media(max-width:560px){ .dg-strip{padding:var(--sp-14)} .dg-stats{width:100%;justify-content:space-between} }

  .dg-badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--sp-12)}
  .dg-badge{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-6);
    padding:var(--sp-16) var(--sp-12);border:1px solid var(--line);border-radius:var(--radius);background:var(--card2);opacity:.55;filter:grayscale(.6)}
  .dg-badge.got{opacity:1;filter:none;background:var(--card);border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}
  .dg-badge-ic{width:46px;height:46px;border-radius:var(--radius-pill);display:grid;place-items:center;
    background:var(--card);color:var(--mut)}
  .dg-badge.got .dg-badge-ic{background:color-mix(in srgb,var(--accent) 14%,var(--card2));color:var(--accent)}
  .dg-badge-ic svg.ic{width:22px;height:22px}
  .dg-badge-name{font-size:var(--fs-md);font-weight:var(--fw-strong);letter-spacing:-.01em}
  .dg-badge-desc{font-size:var(--fs-xs);color:var(--mut);line-height:var(--lh-snug)}

  .dg-shop{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--sp-12)}
  .dg-cosm{display:flex;flex-direction:column;align-items:center;gap:var(--sp-8);cursor:pointer;
    padding:var(--sp-14) var(--sp-12);border:1px solid var(--line);border-radius:var(--radius);background:var(--card);transition:border-color .12s,transform .12s}
  .dg-cosm:not([disabled]):hover{border-color:var(--accent);transform:translateY(-2px)}
  .dg-cosm.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--card))}
  .dg-cosm-prev{width:54px;height:54px} .dg-cosm-prev svg{width:100%;height:100%}
  .dg-cosm-name{font-size:var(--fs-md);font-weight:var(--fw-strong)}
  .dg-cosm-cta{font-size:var(--fs-sm);font-weight:var(--fw-strong);color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);
    padding:var(--sp-2) var(--sp-10);border-radius:var(--radius-pill)}
  .dg-cosm-cta.owned{color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent)}

  /* ── Carte du voyage (School Lot 2) ── */
  .dmap{position:relative;max-width:640px;margin:0 auto;width:100%}
  .dmap-line{position:absolute;inset:0;width:100%;pointer-events:none}
  .dmap-line path{stroke:var(--line2);stroke-width:6;stroke-linecap:round;stroke-dasharray:2 16}
  .dmap-dom{position:absolute;left:0;display:inline-flex;align-items:center;gap:var(--sp-6);
    font-size:var(--fs-sm);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.05em;color:var(--mut2)}
  .dmap-dom svg.ic{width:15px;height:15px;color:var(--accent)}
  .dmap-node{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;
    align-items:center;gap:var(--sp-8);background:none;border:none;cursor:pointer;padding:0;width:120px}
  .dmap-disc{position:relative;width:60px;height:60px;border-radius:var(--radius-pill);display:grid;place-items:center;
    background:var(--card);border:2px solid var(--line);color:var(--mut2);
    box-shadow:var(--elev-2);transition:transform .12s,border-color .12s}
  .dmap-disc svg.ic{width:26px;height:26px}
  .dmap-node:hover .dmap-disc{transform:scale(1.08)}
  .dmap-node.done .dmap-disc{background:var(--accent);border-color:var(--accent);color:var(--on-solid)}
  .dmap-node.started .dmap-disc{border-color:var(--accent);color:var(--accent)}
  /* anneau de progression sur les nœuds entamés */
  .dmap-ring{position:absolute;top:-3px;left:50%;transform:translateX(-50%);width:66px;height:66px;border-radius:var(--radius-pill);
    background:conic-gradient(var(--accent) calc(var(--p,0)*1%), transparent 0);
    -webkit-mask:radial-gradient(circle 27px at 30px 30px, transparent 98%, #000 100%);
            mask:radial-gradient(circle 27px at 30px 30px, transparent 98%, #000 100%);pointer-events:none}
  .dmap-pulse{position:absolute;top:50%;left:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:var(--radius-pill);
    background:color-mix(in srgb,var(--accent) 40%,transparent);animation:dmapPulse 1.8s ease-out infinite;pointer-events:none}
  @keyframes dmapPulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(2);opacity:0}}
  @media(prefers-reduced-motion:reduce){ .dmap-pulse{animation:none;opacity:.3} }
  .dmap-label{font-size:var(--fs-sm);font-weight:var(--fw-strong);line-height:1.25;color:var(--txt);text-align:center;max-width:130px}
  .dmap-node.todo .dmap-label{color:var(--mut)}
  .dmap-label em{font-style:normal;color:var(--accent);font-weight:var(--fw-bold)}
  .dmap-node.cur{z-index:2}

  /* ── Contenu riche de leçon (School Lot 3) ── */
  .dls-callout{display:flex;flex-direction:column;gap:var(--sp-6);margin:0 0 var(--sp-14);padding:var(--sp-12) var(--sp-14);border-radius:var(--radius);
    border:1px solid var(--line);background:var(--card2);border-left:3px solid var(--accent)}
  .dls-callout-h{display:flex;align-items:center;gap:var(--sp-6);font-size:var(--fs-sm);font-weight:var(--fw-bold);text-transform:uppercase;
    letter-spacing:.04em;color:var(--accent)}
  .dls-callout-h svg.ic{width:15px;height:15px}
  .dls-callout-b{font-size:var(--fs-base);line-height:1.55;color:var(--txt)}
  .dls-callout-b p:last-child{margin-bottom:0}
  .dls-callout.tip{border-left-color:var(--ok)} .dls-callout.tip .dls-callout-h{color:var(--ok)}
  .dls-callout.warn{border-left-color:var(--warn)} .dls-callout.warn .dls-callout-h{color:var(--warn)}
  .dls-callout.info{border-left-color:var(--info)} .dls-callout.info .dls-callout-h{color:var(--info)}

  .dls-media{display:flex;flex-direction:column;gap:var(--sp-12);margin:0 0 var(--sp-18)}
  .dls-mfig{margin:0}
  .dls-mel{display:block;width:100%;max-width:100%;border-radius:var(--radius);border:1px solid var(--line);background:var(--card2)}
  audio.dls-mel{border:none;background:none}
  .dls-mfig figcaption{margin-top:var(--sp-6);font-size:var(--fs-sm);color:var(--mut);text-align:center}

  .dls-play{margin:0 0 var(--sp-20);border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));border-radius:var(--radius);overflow:hidden}
  .dls-play-h{display:flex;align-items:center;gap:var(--sp-6);padding:var(--sp-10) var(--sp-14);font-size:var(--fs-sm);font-weight:var(--fw-strong);
    color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--card2));border-bottom:1px solid var(--line)}
  .dls-play-h svg.ic{width:15px;height:15px}
  .dls-play-wrap{display:grid;grid-template-columns:1fr 1fr;min-height:200px}
  @media(max-width:620px){ .dls-play-wrap{grid-template-columns:1fr} }
  .dls-play-ed{display:flex;flex-direction:column;border-right:1px solid var(--line);min-width:0}
  .dls-play-tabs{display:flex;gap:var(--sp-2);padding:var(--sp-4) var(--sp-4) 0;background:var(--card2);border-bottom:1px solid var(--line)}
  .dls-play-tab{padding:var(--sp-4) var(--sp-12);font-size:var(--fs-xs);font-weight:var(--fw-strong);color:var(--mut);cursor:pointer;background:transparent;border:none;border-radius:var(--radius-sm) var(--radius-sm) 0 0}
  .dls-play-tab.on{color:var(--accent);background:var(--card)}
  .dls-play-pane{display:none;flex:1;min-height:0}
  .dls-play-pane.on{display:flex}
  .dls-play-code{flex:1;width:100%;border:none;outline:none;resize:none;background:var(--card);color:var(--txt);
    font-family:var(--font-mono);font-size:var(--fs-sm);line-height:var(--lh-normal);padding:var(--sp-10) var(--sp-12);min-height:150px}
  .dls-play-frame{width:100%;height:100%;min-height:180px;border:none;background:var(--paper)}

  .dsb-hints{display:flex;flex-direction:column;gap:var(--sp-8);margin:0 0 var(--sp-16)}
  .dsb-hint{display:flex;align-items:flex-start;gap:var(--sp-8);font-size:var(--fs-md);line-height:1.45;color:var(--txt);
    padding:var(--sp-8) var(--sp-12);border-radius:var(--radius);background:color-mix(in srgb,var(--accent) 5%,var(--card2));border:1px solid var(--line)}
  .dsb-hint-n{flex:none;width:18px;height:18px;border-radius:var(--radius-pill);display:grid;place-items:center;
    background:var(--accent);color:var(--on-solid);font-size:var(--fs-xs);font-weight:var(--fw-bold)}
  .dsb-hint-btn{align-self:flex-start;display:inline-flex;align-items:center;gap:var(--sp-6);padding:var(--sp-6) var(--sp-12);border-radius:var(--radius);cursor:pointer;
    font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--accent);background:transparent;border:1px dashed color-mix(in srgb,var(--accent) 35%,var(--line))}
  .dsb-hint-btn:hover{background:color-mix(in srgb,var(--accent) 8%,transparent);border-style:solid}
  .dsb-hint-btn svg.ic{width:14px;height:14px}

  /* ── Console : code réellement exécuté (School Lot 4) ── */
  .dls-con{margin:0 0 var(--sp-20);border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));border-radius:var(--radius);overflow:hidden}
  .dls-con-h{display:flex;align-items:center;gap:var(--sp-8);padding:var(--sp-8) var(--sp-14);font-size:var(--fs-sm);font-weight:var(--fw-strong);color:var(--accent);
    background:color-mix(in srgb,var(--accent) 7%,var(--card2));border-bottom:1px solid var(--line)}
  .dls-con-h svg.ic{width:15px;height:15px}
  .dls-con-status{margin-left:auto;font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--mut)}
  .dls-con-code{width:100%;border:none;outline:none;resize:vertical;background:var(--card);color:var(--txt);
    font-family:var(--font-mono);font-size:var(--fs-md);line-height:1.55;padding:var(--sp-12) var(--sp-14);min-height:120px}
  .dls-con-foot{display:flex;align-items:center;gap:var(--sp-10);flex-wrap:wrap;padding:var(--sp-10) var(--sp-14);border-top:1px solid var(--line);background:var(--card2)}
  .dls-con-foot svg.ic{width:15px;height:15px}
  .dls-con-fb{font-size:var(--fs-md);font-weight:var(--fw-medium)}
  .dls-con-fb.ok{color:var(--ok);display:inline-flex;align-items:center;gap:var(--sp-6)} .dls-con-fb.ok svg.ic{width:15px;height:15px}
  .dls-con-fb.err{color:var(--err)}
  .dls-con-out{margin:0;padding:var(--sp-12) var(--sp-14);min-height:42px;max-height:280px;overflow:auto;white-space:pre-wrap;
    font-family:var(--font-mono);font-size:var(--fs-sm);line-height:var(--lh-normal);
    background:var(--code-bg);color:var(--code-fg);border-top:1px solid var(--line)}
  .dls-con-out.err{color:#ff9b95}
  .dls-con-out:empty::before{content:'▸';color:#586069}

  /* ── Quiz noté (School Lot 5) ── */
  .dqz{margin:0 0 var(--sp-20);border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));border-radius:var(--radius);overflow:hidden;background:var(--card)}
  .dqz-h{display:flex;align-items:center;gap:var(--sp-8);padding:var(--sp-10) var(--sp-14);font-size:var(--fs-md);font-weight:var(--fw-strong);color:var(--accent);
    background:color-mix(in srgb,var(--accent) 7%,var(--card2));border-bottom:1px solid var(--line)}
  .dqz-h svg.ic{width:16px;height:16px}
  .dqz-count{color:var(--mut2);font-weight:var(--fw-medium);font-size:var(--fs-sm)}
  .dqz-timer{margin-left:auto;font-family:var(--font-mono);font-weight:var(--fw-bold);font-size:var(--fs-base);
    padding:var(--sp-2) var(--sp-10);border-radius:var(--radius-pill);background:var(--card);border:1px solid var(--line);color:var(--txt)}
  .dqz-timer.low{color:var(--err);border-color:color-mix(in srgb,var(--err) 45%,var(--line))}
  .dqz-q{padding:var(--sp-14) var(--sp-16);border-bottom:1px solid var(--line)}
  .dqz-qh{display:flex;align-items:flex-start;gap:var(--sp-10);font-size:var(--fs-base);font-weight:var(--fw-strong);line-height:1.4;margin-bottom:var(--sp-10)}
  .dqz-qn{flex:none;width:22px;height:22px;border-radius:var(--radius-pill);display:grid;place-items:center;background:var(--card2);
    border:1px solid var(--line);font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--mut2)}
  .dqz-q.ok .dqz-qn{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok);border-color:transparent}
  .dqz-q.ko .dqz-qn{background:color-mix(in srgb,var(--err) 16%,transparent);color:var(--err);border-color:transparent}
  .dqz-qt{flex:1}
  .dqz-qi{flex:none} .dqz-q.ok .dqz-qi{color:var(--ok)} .dqz-q.ko .dqz-qi{color:var(--err)} .dqz-qi svg.ic{width:18px;height:18px}
  .dqz-opts{display:flex;flex-direction:column;gap:var(--sp-6);padding-left:var(--sp-32)}
  .dqz-opt{display:flex;align-items:center;gap:var(--sp-8);padding:var(--sp-8) var(--sp-12);border:1px solid var(--line);border-radius:var(--radius);
    background:var(--card2);font-size:var(--fs-base);cursor:pointer}
  .dqz-opt:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--card))}
  .dqz-opt input{accent-color:var(--accent);width:16px;height:16px;flex:none}
  .dqz-opt.ok{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,var(--card))}
  .dqz-opt.ko{border-color:var(--err);background:color-mix(in srgb,var(--err) 10%,var(--card))}
  .dqz-opt.sol{border-color:var(--ok);border-style:dashed}
  .dqz-input{width:calc(100% - 32px);margin-left:var(--sp-32);font-size:var(--fs-base);padding:var(--sp-8) var(--sp-12);border:1px solid var(--line);
    border-radius:var(--radius);background:var(--card2);color:var(--txt)}
  .dqz-foot{display:flex;align-items:center;gap:var(--sp-12);flex-wrap:wrap;padding:var(--sp-14) var(--sp-16)}
  .dqz-foot svg.ic{width:15px;height:15px}
  .dqz-meta{font-size:var(--fs-sm);color:var(--mut)}
  .dqz-result{display:flex;align-items:center;gap:var(--sp-14);flex-wrap:wrap;padding:var(--sp-16)}
  .dqz-result.pass{background:color-mix(in srgb,var(--ok) 9%,var(--card))} .dqz-result.fail{background:color-mix(in srgb,var(--err) 8%,var(--card))}
  .dqz-score{font-size:var(--fs-3xl);font-weight:var(--fw-bold);letter-spacing:var(--ls-tight)}
  .dqz-result.pass .dqz-score{color:var(--ok)} .dqz-result.fail .dqz-score{color:var(--err)}
  .dqz-verdict{font-size:var(--fs-base);font-weight:var(--fw-strong);flex:1;min-width:120px}
  .dqz-result button{display:inline-flex;align-items:center;gap:var(--sp-6)}
  .dqz-result button svg.ic{width:15px;height:15px}

  .dcert-code{font-family:var(--font-mono);font-size:var(--fs-xs)}
  .dcert-dl{margin-top:var(--sp-12);display:inline-flex;align-items:center;gap:var(--sp-6);padding:var(--sp-8) var(--sp-14);border-radius:var(--radius);cursor:pointer;
    font-size:var(--fs-md);font-weight:var(--fw-strong);color:var(--on-solid);background:var(--ok);border:none}
  .dcert-dl:hover{filter:brightness(1.06)} .dcert-dl svg.ic{width:15px;height:15px}

  /* ── Tuteur IA & génération (School Lot 6) ── */
  .dls-tutor{display:flex;align-items:center;gap:var(--sp-12);flex-wrap:wrap;margin:0 0 var(--sp-18);padding:var(--sp-12) var(--sp-14);border-radius:var(--radius);
    background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 9%,var(--card2)),var(--card2) 75%);
    border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line))}
  .dls-tutor-h{display:inline-flex;align-items:center;gap:var(--sp-6);font-size:var(--fs-md);font-weight:var(--fw-strong);color:var(--accent)}
  .dls-tutor-h svg.ic{width:16px;height:16px}
  .dls-tutor-btns{display:flex;gap:var(--sp-8);flex-wrap:wrap}
  .dls-tutor-btns button{padding:var(--sp-6) var(--sp-12);border-radius:var(--radius);cursor:pointer;font-size:var(--fs-sm);font-weight:var(--fw-medium);
    color:var(--txt);background:var(--card);border:1px solid var(--line)}
  .dls-tutor-btns button:hover{border-color:var(--accent);color:var(--accent)}

  .ed-gen-row{display:flex;align-items:center;gap:var(--sp-12);flex-wrap:wrap;margin-bottom:var(--sp-6)}
  .ed-gen{display:inline-flex;align-items:center;gap:var(--sp-6);padding:var(--sp-8) var(--sp-14);border-radius:var(--radius);cursor:pointer;
    font-size:var(--fs-md);font-weight:var(--fw-strong);color:var(--on-solid);border:none;
    background:linear-gradient(120deg,var(--accent),color-mix(in srgb,var(--accent) 70%,#7c5cff))}
  .ed-gen:hover{filter:brightness(1.07)} .ed-gen[disabled]{opacity:.6;cursor:default}
  .ed-gen svg.ic{width:15px;height:15px}
  .ed-gen-hint{font-size:var(--fs-sm);color:var(--mut)}

  .disco-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--sp-16)}
  .disco-card{display:flex;align-items:flex-start;gap:var(--sp-14);text-align:left;
    padding:var(--sp-18);border:1px solid var(--line);border-radius:var(--radius-modal);background:var(--card);
    cursor:pointer;transition:border-color .14s,transform .14s,box-shadow .14s,background .14s}
  .disco-card:hover{border-color:var(--accent);transform:translateY(-3px);
    box-shadow:0 8px 24px -12px color-mix(in srgb,var(--accent) 45%,transparent);
    background:color-mix(in srgb,var(--accent) 4%,var(--card))}
  .dc-ico{flex:none;width:46px;height:46px;border-radius:var(--radius);display:grid;place-items:center;
    background:color-mix(in srgb,var(--accent) 14%,var(--card2));color:var(--accent);
    transition:background .14s}
  .disco-card:hover .dc-ico{background:color-mix(in srgb,var(--accent) 22%,var(--card2))}
  .dc-ico svg.ic{width:23px;height:23px}
  .dc-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--sp-2)}
  .dc-name{font-weight:var(--fw-strong);font-size:var(--fs-base);letter-spacing:-.01em}
  .dc-tag{font-size:var(--fs-sm);color:var(--mut);line-height:1.4}
  .dc-meta{font-size:var(--fs-xs);color:var(--mut2);margin-top:var(--sp-2)}
  .dc-prog{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:var(--sp-4);width:62px}
  .dc-bar{display:block;width:100%;height:5px;border-radius:var(--radius-pill);background:var(--line2);overflow:hidden}
  .dc-bar>span{display:block;height:100%;background:var(--accent);border-radius:var(--radius-pill);transition:width .3s}
  .dc-pct{font-size:var(--fs-xs);color:var(--mut);font-variant-numeric:tabular-nums}

  /* ── Fil d'Ariane ── */
  .disco-crumb{display:flex;align-items:center;gap:var(--sp-8);font-size:var(--fs-md);color:var(--mut);flex-wrap:wrap}
  .disco-crumb button{padding:var(--sp-4) var(--sp-8);font-size:var(--fs-md);background:transparent;border-color:transparent;color:var(--mut)}
  .disco-crumb button:hover{color:var(--txt);background:var(--line2);border-color:var(--line)}
  .disco-crumb button svg.ic{width:14px;height:14px}

  /* ── Vue domaine ── */
  .disco-dhead{display:flex;align-items:flex-start;gap:var(--sp-16)}
  .dd-ico{flex:none;width:52px;height:52px;border-radius:var(--radius);display:grid;place-items:center;
    background:color-mix(in srgb,var(--accent) 14%,var(--card2));color:var(--accent)}
  .dd-ico svg.ic{width:26px;height:26px}
  .disco-dhead h2{margin:0 0 var(--sp-4);font-size:var(--fs-xl);font-weight:var(--fw-bold);letter-spacing:var(--ls-tight)}
  .disco-dhead p{margin:0;color:var(--mut);font-size:var(--fs-md);line-height:var(--lh-normal);max-width:64ch}
  .dd-prog{flex:none;margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:var(--sp-4);width:90px}
  .dd-pct{font-size:var(--fs-sm);color:var(--mut);font-variant-numeric:tabular-nums}

  .disco-path{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--card)}
  .dp-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-10);
    padding:var(--sp-12) var(--sp-16);border-bottom:1px solid var(--line);background:var(--card2)}
  .dp-head h4{margin:0;font-size:var(--fs-base);font-weight:var(--fw-strong)}
  .dp-meta{font-size:var(--fs-sm);color:var(--mut)}
  .dp-level{color:var(--accent);font-weight:var(--fw-strong)}
  .dp-lessons{display:flex;flex-direction:column}

  .disco-lrow{display:flex;align-items:center;gap:var(--sp-12);text-align:left;width:100%;
    padding:var(--sp-12) var(--sp-16);background:transparent;border:none;border-top:1px solid var(--line);
    border-radius:0;cursor:pointer}
  .dp-lessons .disco-lrow:first-child{border-top:none}
  .disco-lrow:hover{background:color-mix(in srgb,var(--accent) 5%,var(--card))}
  .dl-check{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
    border:1px solid var(--line);color:var(--mut)}
  .dl-check svg.ic{width:14px;height:14px}
  .disco-lrow.done .dl-check{background:color-mix(in srgb,var(--ok) 16%,transparent);
    border-color:var(--ok);color:var(--ok)}
  .dl-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--sp-2)}
  .dl-title{font-weight:var(--fw-strong);font-size:var(--fs-base)}
  .disco-lrow.done .dl-title{color:var(--mut)}
  .dl-sum{font-size:var(--fs-sm);color:var(--mut);line-height:1.4}
  .dl-mins{flex:none;font-size:var(--fs-xs);color:var(--mut2);font-variant-numeric:tabular-nums}

  /* ── Vue leçon ── */
  .disco-lesson{max-width:720px}
  .dls-eyebrow{font-size:var(--fs-sm);font-weight:var(--fw-strong);color:var(--accent);text-transform:uppercase;letter-spacing:.04em}
  .disco-lesson h2{margin:var(--sp-6) 0 var(--sp-10);font-size:var(--fs-xl);font-weight:var(--fw-bold);letter-spacing:var(--ls-tight)}
  .dls-lead{margin:0 0 var(--sp-22);font-size:var(--fs-base);line-height:1.6;color:var(--txt)}
  .disco-lesson h5{margin:0 0 var(--sp-10);font-size:var(--fs-sm);font-weight:var(--fw-bold);text-transform:uppercase;
    letter-spacing:.05em;color:var(--mut)}
  .dls-keys{list-style:none;margin:0 0 var(--sp-22);padding:0;display:flex;flex-direction:column;gap:var(--sp-8)}
  .dls-keys li{display:flex;align-items:flex-start;gap:var(--sp-8);font-size:var(--fs-base);line-height:var(--lh-normal)}
  .dls-keys li svg.ic{flex:none;width:16px;height:16px;color:var(--accent);margin-top:var(--sp-1)}
  .dls-xp{border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));border-radius:var(--radius);
    background:color-mix(in srgb,var(--accent) 6%,var(--card2));padding:var(--sp-14) var(--sp-18);margin-bottom:var(--sp-22)}
  .dls-xp-h{display:flex;align-items:center;gap:var(--sp-8);font-weight:var(--fw-strong);font-size:var(--fs-base);margin-bottom:var(--sp-6)}
  .dls-xp-h svg.ic{width:17px;height:17px;color:var(--accent)}
  .dls-xp p{margin:0;font-size:var(--fs-base);line-height:1.55;color:var(--txt)}

  /* ── Corps de leçon riche (Markdown) - Lot 2 ── */
  .dls-body{margin:0 0 var(--sp-22);font-size:var(--fs-base);line-height:var(--lh-loose);color:var(--txt)}
  .dls-body>*:first-child{margin-top:0}
  .dls-body>*:last-child{margin-bottom:0}
  .dls-body h1,.dls-body h2,.dls-body h3,.dls-body h4{margin:var(--sp-18) 0 var(--sp-8);font-weight:var(--fw-bold);letter-spacing:-.01em;line-height:1.25}
  .dls-body h3{font-size:var(--fs-lg)} .dls-body h4{font-size:var(--fs-base)}
  .dls-body p{margin:0 0 var(--sp-12)}
  .dls-body ul,.dls-body ol{margin:0 0 var(--sp-12);padding-left:var(--sp-22);display:flex;flex-direction:column;gap:var(--sp-4)}
  .dls-body code{font-family:var(--font-mono);font-size:.9em;
    background:var(--card2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--sp-1) var(--sp-4)}
  .dls-body pre{margin:0 0 var(--sp-14);background:var(--card2);border:1px solid var(--line);border-radius:var(--radius);
    padding:var(--sp-12) var(--sp-14);overflow:auto}
  .dls-body pre code{background:none;border:none;padding:0;font-size:var(--fs-md);line-height:1.55}
  .dls-body blockquote{margin:0 0 var(--sp-14);padding:var(--sp-6) var(--sp-14);border-left:3px solid var(--accent);
    color:var(--mut);background:color-mix(in srgb,var(--accent) 5%,transparent);border-radius:0 var(--radius) var(--radius) 0}
  .dls-body a{color:var(--accent)}

  /* ── Exercice interactif - Lot 2 ── */
  .dls-ex{border:1px solid color-mix(in srgb,var(--accent) 32%,var(--line));border-radius:var(--radius);
    background:color-mix(in srgb,var(--accent) 6%,var(--card2));padding:var(--sp-16) var(--sp-18);margin-bottom:var(--sp-22)}
  .dls-ex.solved{border-color:color-mix(in srgb,var(--ok,#2faa63) 45%,var(--line));
    background:color-mix(in srgb,var(--ok,#2faa63) 8%,var(--card2))}
  .dls-ex-h{display:flex;align-items:center;gap:var(--sp-8);font-weight:var(--fw-strong);font-size:var(--fs-base)}
  .dls-ex-h svg.ic{width:17px;height:17px;color:var(--accent)}
  .dls-ex-q{margin:var(--sp-10) 0 var(--sp-12);font-size:var(--fs-base);line-height:var(--lh-normal);color:var(--txt);font-weight:var(--fw-medium)}
  .dex-opts{display:flex;flex-direction:column;gap:var(--sp-8);margin-bottom:var(--sp-14)}
  .dex-opt{display:flex;align-items:center;gap:var(--sp-10);padding:var(--sp-10) var(--sp-14);cursor:pointer;
    border:1px solid var(--line);border-radius:var(--radius);background:var(--card);font-size:var(--fs-base);
    transition:border-color .12s,background .12s}
  .dex-opt:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--card))}
  .dex-opt input{accent-color:var(--accent);width:16px;height:16px;flex:none}
  .dex-opt:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--card))}
  .dex-input,.dex-code{width:100%;font-size:var(--fs-base);color:var(--txt);background:var(--card);
    border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-10) var(--sp-12);margin-bottom:var(--sp-14);
    transition:border-color .12s}
  .dex-input:focus,.dex-code:focus{outline:none;border-color:var(--accent)}
  .dex-code{font-family:var(--font-mono);min-height:96px;resize:vertical;line-height:var(--lh-normal)}
  .dls-ex-foot{display:flex;align-items:center;gap:var(--sp-12);flex-wrap:wrap}
  .dls-ex-foot svg.ic{width:15px;height:15px}
  .dls-ex-fb{font-size:var(--fs-md);font-weight:var(--fw-medium)}
  .dls-ex-fb.ok{color:var(--ok,#2faa63);display:inline-flex;align-items:center;gap:var(--sp-6)}
  .dls-ex-fb.ok svg.ic{width:15px;height:15px}
  .dls-ex-fb.err{color:var(--err,#d6493b)}
  .dls-ex-fb.warn{color:var(--mut)}

  /* ── Bac à sable (TP / Standalone) - Lot 3 ── */
  .dsb{display:grid;grid-template-columns:340px minmax(0,1fr);gap:var(--sp-18);align-items:stretch}
  @media(max-width:880px){ .dsb{grid-template-columns:1fr} }
  .dsb-side{min-width:0;display:flex;flex-direction:column}
  .dsb-eyebrow{display:flex;align-items:center;gap:var(--sp-6);font-size:var(--fs-sm);font-weight:var(--fw-strong);
    text-transform:uppercase;letter-spacing:.05em;color:var(--accent)}
  .dsb-eyebrow svg.ic{width:14px;height:14px}
  .dsb-side h2{margin:var(--sp-8) 0 var(--sp-8);font-size:var(--fs-xl);font-weight:var(--fw-bold);letter-spacing:var(--ls-tight);line-height:1.15}
  .dsb-lead{margin:0 0 var(--sp-12);font-size:var(--fs-base);line-height:1.55;color:var(--txt)}
  .dsb-brief{font-size:var(--fs-md);line-height:1.6;color:var(--mut);margin-bottom:var(--sp-16)}
  .dsb-brief code{font-family:var(--font-mono);font-size:.9em;background:var(--card2);
    border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--sp-1) var(--sp-4)}
  .dsb-brief p{margin:0 0 var(--sp-8)} .dsb-brief>*:last-child{margin-bottom:0}
  .dsb-side h5{margin:0 0 var(--sp-10);font-size:var(--fs-sm);font-weight:var(--fw-bold);text-transform:uppercase;
    letter-spacing:.05em;color:var(--mut2)}
  .dsb-crits{list-style:none;margin:0 0 var(--sp-16);padding:0;display:flex;flex-direction:column;gap:var(--sp-8)}
  .dsb-crit{display:flex;align-items:flex-start;gap:var(--sp-8);font-size:var(--fs-md);line-height:1.45;color:var(--txt)}
  .dsb-crit-ic{flex:none;width:18px;height:18px;display:grid;place-items:center;border-radius:var(--radius-pill);
    background:var(--line2);color:var(--mut);margin-top:var(--sp-1);transition:background .15s,color .15s}
  .dsb-crit-ic svg.ic{width:12px;height:12px}
  .dsb-crit.ok .dsb-crit-ic{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok)}
  .dsb-crit.ko .dsb-crit-ic{background:color-mix(in srgb,var(--err) 16%,transparent);color:var(--err)}
  .dsb-crits.allok .dsb-crit-ic{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok)}
  .dsb-actions{display:flex;align-items:center;gap:var(--sp-10);flex-wrap:wrap;margin-top:auto}
  .dsb-actions svg.ic{width:15px;height:15px}
  .dsb-fb{font-size:var(--fs-md);font-weight:var(--fw-medium);flex-basis:100%}
  .dsb-fb.ok{color:var(--ok);display:inline-flex;align-items:center;gap:var(--sp-6)}
  .dsb-fb.ok svg.ic{width:15px;height:15px}
  .dsb-fb.err{color:var(--err)}

  .dsb-work{display:flex;flex-direction:column;gap:var(--sp-12);min-height:520px}
  .dsb-edit{display:flex;flex-direction:column;flex:1 1 45%;min-height:190px;
    border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--card)}
  .dsb-tabs{display:flex;gap:var(--sp-2);flex:none;padding:var(--sp-6) var(--sp-6) 0;background:var(--card2);border-bottom:1px solid var(--line)}
  .dsb-tab{padding:var(--sp-6) var(--sp-14);font-size:var(--fs-sm);font-weight:var(--fw-strong);color:var(--mut);cursor:pointer;
    background:transparent;border:none;border-radius:var(--radius) var(--radius) 0 0}
  .dsb-tab:hover{color:var(--txt)}
  .dsb-tab.on{color:var(--accent);background:var(--card)}
  .dsb-pane{display:none;flex:1;min-height:0}
  .dsb-pane.on{display:flex}
  .dsb-code{flex:1;width:100%;border:none;outline:none;resize:none;background:var(--card);color:var(--txt);
    font-family:var(--font-mono);font-size:var(--fs-md);line-height:1.55;padding:var(--sp-12) var(--sp-14)}
  .dsb-preview{display:flex;flex-direction:column;flex:1 1 55%;min-height:200px;
    border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
  .dsb-prev-h{display:flex;align-items:center;gap:var(--sp-6);flex:none;padding:var(--sp-8) var(--sp-12);font-size:var(--fs-sm);
    font-weight:var(--fw-strong);color:var(--mut);background:var(--card2);border-bottom:1px solid var(--line)}
  .dsb-prev-h svg.ic{width:14px;height:14px;color:var(--accent)}
  .dsb-frame{flex:1;width:100%;border:none;background:var(--paper)}

  .dls-foot{display:flex;align-items:center;gap:var(--sp-10);flex-wrap:wrap;
    padding-top:var(--sp-18);border-top:1px solid var(--line)}
  .dls-foot .sp{flex:1}
  .dls-foot svg.ic{width:15px;height:15px}
  @media(max-width:560px){ .dls-foot .sp{display:none} .dls-foot{gap:var(--sp-8)} }

}