/* =====================================================================
   DIAPORAMA v2 — moteur de diapositives (assets/js/slideshow.js)
   Partagé par index.php (éditeur) et view.php (visionneuse).
   Tout est scopé sous #mmc-ss ; les thèmes sont des jeux de variables
   posés sur [data-ss-theme] (réutilisés par les vignettes du sélecteur).
   ===================================================================== */

#mmc-ss {
    --ss-u: clamp(15px, min(2.4vh, 1.32vw), 48px);
    --ss-ease: cubic-bezier(.22, 1, .36, 1);
    --ss-pop: cubic-bezier(.34, 1.56, .64, 1);
    position: fixed; inset: 0; z-index: 10000;
    display: none;
    overflow: hidden;
    color: var(--fg);
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
    user-select: none; -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    background: #000;
}
#mmc-ss.ss-open { display: block; }
#mmc-ss *, #mmc-ss *::before, #mmc-ss *::after { box-sizing: border-box; }
#mmc-ss.ss-idle { cursor: none; }
#mmc-ss.ss-laser-on, #mmc-ss.ss-laser-on * { cursor: none !important; }
#mmc-ss.ss-pen-on .ss-ink { pointer-events: auto; cursor: crosshair; }
@media (max-width: 760px) { #mmc-ss { --ss-u: clamp(15px, 4.3vw, 24px); } }

/* ============================ THÈMES ============================ */
/* Interface (dock, panneaux) : sombre par défaut, claire pour les thèmes clairs */
.ss, .ss-tprev, [data-ss-theme] {
    --ui-bg: rgba(18, 20, 38, .72);
    --ui-fg: #f4f5ff;
    --ui-dim: rgba(226, 230, 255, .66);
    --ui-bd: rgba(255, 255, 255, .16);
    --ui-hi: rgba(255, 255, 255, .14);
    --ui-solid: #14162b;
    --bg-prev: initial;   /* ne doit jamais être hérité d'un thème parent (aperçus du sélecteur) */
}
[data-ss-theme="glass-light"], [data-ss-theme="classic"], [data-ss-theme="plain-white"], [data-ss-theme="plain-gray"], [data-ss-theme="plain-sand"], [data-ss-theme="candy"], [data-ss-theme="comic"],
[data-ss-theme="notebook"], [data-ss-theme="parchment"], [data-ss-theme="dys"] {
    --ui-bg: rgba(255, 255, 255, .8);
    --ui-fg: #1c2040;
    --ui-dim: rgba(40, 46, 90, .62);
    --ui-bd: rgba(30, 40, 90, .16);
    --ui-hi: rgba(30, 40, 120, .09);
    --ui-solid: #ffffff;
}


/* ============ THÈMES SOBRES ============ */
[data-ss-theme="plain-white"] {
    --bg: #ffffff; --fg: #111827; --dim: #374151; --faint: #9ca3af;
    --acc: #2563eb; --acc2: #2563eb; --acc-fg: #fff; --b1: #fff; --b2: #fff; --b3: #fff; --blob-o: 0;
    --panel: transparent; --panel-bd: #e5e7eb; --panel-sh: none; --blur: 0px;
    --title-bg: none; --title-c: #111827; --chip-bg: #f3f4f6; --chip-bd: #e5e7eb; --chip-fg: #1f2937;
    --link: #1d4ed8; --mark: rgba(250,204,21,.5); --code-bg: #f3f4f6; --code-fg: #b91c1c;
    --font: 'Inter', system-ui, sans-serif; --font-t: 'Inter', system-ui, sans-serif; --tw: 700; --radius: .8em; --lh: 1.65;
}
[data-ss-theme="plain-gray"] {
    --bg: #eceef2; --fg: #1b1f27; --dim: #3c4350; --faint: #8b93a1;
    --acc: #334155; --acc2: #64748b; --acc-fg: #fff; --b1: #fff; --b2: #fff; --b3: #fff; --blob-o: 0;
    --panel: #ffffff; --panel-bd: #dde1e8; --panel-sh: 0 1px 2px rgba(15,23,42,.06), 0 12px 30px -18px rgba(15,23,42,.25); --blur: 0px;
    --title-bg: none; --title-c: #0f172a; --chip-bg: #fff; --chip-bd: #cfd5de; --chip-fg: #1e293b;
    --link: #1d4ed8; --mark: rgba(250,204,21,.5); --code-bg: #e5e8ee; --code-fg: #334155;
    --font: 'Inter', system-ui, sans-serif; --font-t: 'Inter', system-ui, sans-serif; --tw: 700; --radius: .9em; --lh: 1.65;
}
[data-ss-theme="plain-sand"] {
    --bg: #f6f1e7; --fg: #2b2a28; --dim: #4a4640; --faint: #9a9284;
    --acc: #b45309; --acc2: #92400e; --acc-fg: #fff; --b1: #fff; --b2: #fff; --b3: #fff; --blob-o: 0;
    --panel: transparent; --panel-bd: #e3d9c6; --panel-sh: none; --blur: 0px;
    --title-bg: none; --title-c: #2b2a28; --chip-bg: #efe6d4; --chip-bd: #dccfb4; --chip-fg: #5a4a2a;
    --link: #9a3f06; --mark: rgba(217,119,6,.28); --code-bg: #ece3d0; --code-fg: #7c2d12;
    --font: 'Nunito', 'Inter', system-ui, sans-serif; --font-t: 'Playfair Display', Georgia, serif; --tw: 800; --radius: .8em; --lh: 1.7;
}
[data-ss-theme="plain-black"] {
    --bg: #0b0b0c; --fg: #f4f4f5; --dim: #c9c9cf; --faint: #7a7a85;
    --acc: #60a5fa; --acc2: #60a5fa; --acc-fg: #04101f; --b1: #fff; --b2: #fff; --b3: #fff; --blob-o: 0;
    --panel: transparent; --panel-bd: #27272a; --panel-sh: none; --blur: 0px;
    --title-bg: none; --title-c: #ffffff; --chip-bg: #18181b; --chip-bd: #3f3f46; --chip-fg: #e4e4e7;
    --link: #93c5fd; --mark: rgba(96,165,250,.3); --code-bg: #18181b; --code-fg: #fbbf24;
    --font: 'Inter', system-ui, sans-serif; --font-t: 'Inter', system-ui, sans-serif; --tw: 700; --radius: .8em; --lh: 1.65;
}
[data-ss-theme="slate"] {
    --bg: linear-gradient(160deg, #1e293b, #0f172a); --fg: #f1f5f9; --dim: #cbd5e1; --faint: #7c8aa0;
    --acc: #38bdf8; --acc2: #818cf8; --acc-fg: #04202d; --b1: #fff; --b2: #fff; --b3: #fff; --blob-o: 0;
    --panel: rgba(255,255,255,.04); --panel-bd: rgba(148,163,184,.25); --panel-sh: none; --blur: 0px;
    --title-bg: none; --title-c: #ffffff; --chip-bg: rgba(56,189,248,.12); --chip-bd: rgba(56,189,248,.4); --chip-fg: #e0f2fe;
    --link: #7dd3fc; --mark: rgba(129,140,248,.35); --code-bg: rgba(0,0,0,.3); --code-fg: #fcd34d;
    --font: 'Inter', system-ui, sans-serif; --font-t: 'Inter', system-ui, sans-serif; --tw: 700; --radius: .9em; --lh: 1.65;
}

/* ---- Verre sombre ---- */
[data-ss-theme="glass-dark"] {
    --bg: radial-gradient(140% 120% at 50% -10%, #0e1030, #05060f 62%);
    --fg: rgba(255,255,255,.96); --dim: rgba(226,230,255,.76); --faint: rgba(226,230,255,.46);
    --acc: #8b7bff; --acc2: #3aa0ff; --acc-fg: #fff;
    --b1: #6d5efc; --b2: #b15cff; --b3: #3aa0ff; --blob-o: .5;
    --panel: rgba(255,255,255,.06); --panel-bd: rgba(255,255,255,.14); --panel-sh: 0 24px 70px -30px rgba(0,0,0,.7); --blur: 18px;
    --title-bg: linear-gradient(115deg, #ffffff 10%, #d4ccff 55%, #a5d6ff);
    --title-c: transparent;
    --chip-bg: rgba(255,255,255,.1); --chip-bd: rgba(255,255,255,.2); --chip-fg: #fff;
    --link: #c9bcff; --mark: rgba(255, 213, 79, .32); --code-bg: rgba(0,0,0,.35); --code-fg: #ffd9a8;
    --font: 'Manrope', 'Inter', system-ui, sans-serif; --font-t: 'Manrope', 'Inter', system-ui, sans-serif; --tw: 800;
    --radius: 1.5em; --lh: 1.6;
}
/* ---- Verre clair ---- */
[data-ss-theme="glass-light"] {
    --bg: linear-gradient(135deg, #eef2ff 0%, #fdf2f8 52%, #ecfeff 100%);
    --fg: #1e1b4b; --dim: #4b5280; --faint: #8186ad;
    --acc: #6d5efc; --acc2: #ec4899; --acc-fg: #fff;
    --b1: #a5b4fc; --b2: #f9a8d4; --b3: #67e8f9; --blob-o: .6;
    --panel: rgba(255,255,255,.62); --panel-bd: rgba(255,255,255,.9); --panel-sh: 0 24px 60px -28px rgba(76,60,160,.35); --blur: 18px;
    --title-bg: linear-gradient(115deg, #312e81, #6d28d9 55%, #db2777);
    --title-c: transparent;
    --chip-bg: rgba(255,255,255,.75); --chip-bd: rgba(109,94,252,.25); --chip-fg: #3730a3;
    --link: #5b45e6; --mark: rgba(250, 204, 21, .45); --code-bg: rgba(99,102,241,.1); --code-fg: #4338ca;
    --font: 'Manrope', 'Inter', system-ui, sans-serif; --font-t: 'Manrope', 'Inter', system-ui, sans-serif; --tw: 800;
    --radius: 1.5em; --lh: 1.6;
}
/* ---- Aurore ---- */
[data-ss-theme="aurora"] {
    --bg: radial-gradient(120% 120% at 20% 0%, #06182b, #040a14 70%);
    --fg: #f3fffb; --dim: rgba(220,245,240,.78); --faint: rgba(220,245,240,.45);
    --acc: #4ff5c4; --acc2: #ff7ae0; --acc-fg: #042a22;
    --b1: #00e5a8; --b2: #6d5efc; --b3: #ff4ecd; --blob-o: .75;
    --panel: rgba(8,24,40,.45); --panel-bd: rgba(120,255,220,.22); --panel-sh: 0 24px 70px -30px rgba(0,0,0,.8); --blur: 16px;
    --title-bg: linear-gradient(90deg, #7dffd6, #8fb0ff 55%, #ff9fe8);
    --title-c: transparent;
    --chip-bg: rgba(79,245,196,.12); --chip-bd: rgba(79,245,196,.35); --chip-fg: #d6fff4;
    --link: #7dffd6; --mark: rgba(255, 122, 224, .3); --code-bg: rgba(0,0,0,.4); --code-fg: #9fffe3;
    --font: 'Manrope', 'Inter', system-ui, sans-serif; --font-t: 'Space Grotesk', 'Manrope', sans-serif; --tw: 700;
    --radius: 1.4em; --lh: 1.6;
}
/* ---- Classique ---- */
[data-ss-theme="classic"] {
    --bg: linear-gradient(180deg, #f6f8fc, #e9eef7);
    --fg: #0f172a; --dim: #475569; --faint: #94a3b8;
    --acc: #2563eb; --acc2: #0ea5e9; --acc-fg: #fff;
    --b1: #fff; --b2: #fff; --b3: #fff; --blob-o: 0;
    --panel: #ffffff; --panel-bd: #e2e8f0; --panel-sh: 0 18px 50px -24px rgba(15,23,42,.25); --blur: 0px;
    --title-bg: none; --title-c: #0f172a;
    --chip-bg: #e8f0fe; --chip-bd: #c7d7fb; --chip-fg: #1e40af;
    --link: #2563eb; --mark: rgba(250, 204, 21, .5); --code-bg: #eef2f7; --code-fg: #334155;
    --font: 'Inter', system-ui, sans-serif; --font-t: 'Inter', system-ui, sans-serif; --tw: 800;
    --radius: 1.1em; --lh: 1.65;
}
/* ---- Coucher de soleil ---- */
[data-ss-theme="sunset"] {
    --bg: linear-gradient(165deg, #2b1055 0%, #7a2a83 34%, #e0486f 68%, #ff9f5a 100%);
    --fg: #fff8f2; --dim: rgba(255,240,230,.82); --faint: rgba(255,240,230,.5);
    --acc: #ffd166; --acc2: #ff7a59; --acc-fg: #3a1030;
    --b1: #ff7a59; --b2: #ffd166; --b3: #b15cff; --blob-o: .55;
    --panel: rgba(40,10,50,.32); --panel-bd: rgba(255,230,210,.28); --panel-sh: 0 24px 60px -28px rgba(30,0,40,.6); --blur: 14px;
    --title-bg: linear-gradient(100deg, #fff, #ffe7b8 60%, #ffd166);
    --title-c: transparent;
    --chip-bg: rgba(255,255,255,.18); --chip-bd: rgba(255,255,255,.34); --chip-fg: #fff;
    --link: #ffe08a; --mark: rgba(255, 209, 102, .38); --code-bg: rgba(30,0,40,.4); --code-fg: #ffe0b0;
    --font: 'Nunito', 'Manrope', system-ui, sans-serif; --font-t: 'Nunito', 'Manrope', system-ui, sans-serif; --tw: 900;
    --radius: 1.5em; --lh: 1.6;
}
/* ---- Océan ---- */
[data-ss-theme="ocean"] {
    --bg: linear-gradient(180deg, #021a38 0%, #05407a 58%, #0b7cb6 100%);
    --fg: #ecf9ff; --dim: rgba(220,243,255,.82); --faint: rgba(220,243,255,.5);
    --acc: #54dcff; --acc2: #2ee6b6; --acc-fg: #022a3d;
    --b1: #1fa2ff; --b2: #12d8fa; --b3: #2ee6b6; --blob-o: .4;
    --panel: rgba(2,30,64,.42); --panel-bd: rgba(140,225,255,.28); --panel-sh: 0 24px 60px -28px rgba(0,10,30,.7); --blur: 14px;
    --title-bg: linear-gradient(100deg, #fff, #b4ecff 60%, #6ff0d0);
    --title-c: transparent;
    --chip-bg: rgba(84,220,255,.16); --chip-bd: rgba(84,220,255,.4); --chip-fg: #e0f8ff;
    --link: #8be8ff; --mark: rgba(46,230,182,.32); --code-bg: rgba(0,16,40,.5); --code-fg: #a8f0ff;
    --font: 'Nunito', 'Manrope', system-ui, sans-serif; --font-t: 'Nunito', 'Manrope', system-ui, sans-serif; --tw: 900;
    --radius: 1.5em; --lh: 1.6;
}
/* ---- Forêt ---- */
[data-ss-theme="forest"] {
    --bg: linear-gradient(165deg, #08240f 0%, #14532d 52%, #3a7a36 100%);
    --fg: #f3ffe9; --dim: rgba(230,250,215,.82); --faint: rgba(230,250,215,.5);
    --acc: #b5f23d; --acc2: #ffd54a; --acc-fg: #12300f;
    --b1: #3fae4f; --b2: #b5f23d; --b3: #1d7a45; --blob-o: .45;
    --panel: rgba(4,32,14,.4); --panel-bd: rgba(190,240,150,.26); --panel-sh: 0 24px 60px -28px rgba(0,20,0,.7); --blur: 12px;
    --title-bg: linear-gradient(100deg, #fff, #e6ffb8 60%, #b5f23d);
    --title-c: transparent;
    --chip-bg: rgba(181,242,61,.16); --chip-bd: rgba(181,242,61,.4); --chip-fg: #f0ffd0;
    --link: #d4ff7a; --mark: rgba(255,213,74,.34); --code-bg: rgba(0,24,6,.5); --code-fg: #d8ff9a;
    --font: 'Nunito', 'Manrope', system-ui, sans-serif; --font-t: 'Fredoka', 'Nunito', sans-serif; --tw: 600;
    --radius: 1.6em; --lh: 1.6;
}
/* ---- Espace ---- */
[data-ss-theme="space"] {
    --bg: radial-gradient(120% 100% at 50% 115%, #34186a 0%, #0d0824 52%, #02010a 100%);
    --fg: #f4f1ff; --dim: rgba(224,218,255,.8); --faint: rgba(224,218,255,.48);
    --acc: #b69cff; --acc2: #5ee7ff; --acc-fg: #170a40;
    --b1: #7a4dff; --b2: #ff4fd8; --b3: #3aa0ff; --blob-o: .38;
    --panel: rgba(20,12,56,.5); --panel-bd: rgba(182,156,255,.3); --panel-sh: 0 24px 70px -30px rgba(0,0,0,.9); --blur: 14px;
    --title-bg: linear-gradient(100deg, #ffffff, #d9ccff 50%, #7fe9ff);
    --title-c: transparent;
    --chip-bg: rgba(182,156,255,.16); --chip-bd: rgba(182,156,255,.42); --chip-fg: #efe9ff;
    --link: #a9ecff; --mark: rgba(255,79,216,.28); --code-bg: rgba(0,0,0,.5); --code-fg: #c9f6ff;
    --font: 'Manrope', 'Inter', system-ui, sans-serif; --font-t: 'Space Grotesk', 'Manrope', sans-serif; --tw: 700;
    --radius: 1.3em; --lh: 1.6;
}
/* ---- Néon ---- */
[data-ss-theme="neon"] {
    --bg: radial-gradient(100% 100% at 50% 0%, #1a0a33, #07040f 70%);
    --fg: #f7ecff; --dim: rgba(240,222,255,.78); --faint: rgba(240,222,255,.46);
    --acc: #ff2bd6; --acc2: #19f0ff; --acc-fg: #12001a;
    --b1: #ff2bd6; --b2: #19f0ff; --b3: #7a2bff; --blob-o: .3;
    --panel: rgba(12,4,26,.62); --panel-bd: #ff2bd6; --panel-sh: 0 0 0 1px rgba(255,43,214,.4), 0 0 30px -4px rgba(255,43,214,.55), inset 0 0 28px -12px rgba(25,240,255,.4); --blur: 6px;
    --title-bg: none; --title-c: #fff;
    --chip-bg: rgba(25,240,255,.1); --chip-bd: #19f0ff; --chip-fg: #bff9ff;
    --link: #19f0ff; --mark: rgba(255,43,214,.35); --code-bg: rgba(0,0,0,.6); --code-fg: #19f0ff;
    --font: 'Space Grotesk', 'Manrope', system-ui, sans-serif; --font-t: 'Space Grotesk', 'Manrope', sans-serif; --tw: 700;
    --radius: .9em; --lh: 1.6;
}
/* ---- Bonbon (enfants) ---- */
[data-ss-theme="candy"] {
    --bg: linear-gradient(135deg, #ffe0f0 0%, #fff3c4 48%, #d4f1ff 100%);
    --fg: #4a1d6b; --dim: #6b3a8f; --faint: #a77cc4;
    --acc: #ff4fa3; --acc2: #ffb300; --acc-fg: #fff;
    --b1: #ff8ccb; --b2: #ffd56b; --b3: #7ddcff; --blob-o: .6;
    --panel: #ffffff; --panel-bd: #ff4fa3; --panel-sh: 0 .35em 0 rgba(255,79,163,.28); --blur: 0px;
    --title-bg: linear-gradient(90deg, #ff4fa3, #ff8a3c 45%, #ffb300 75%, #3cc6ff);
    --title-c: transparent;
    --chip-bg: #fff; --chip-bd: #ff4fa3; --chip-fg: #a21a68;
    --link: #d6247f; --mark: rgba(255, 213, 79, .65); --code-bg: #ffe9f5; --code-fg: #a21a68;
    --font: 'Fredoka', 'Nunito', 'Comic Sans MS', system-ui, sans-serif; --font-t: 'Fredoka', 'Nunito', 'Comic Sans MS', sans-serif; --tw: 700;
    --radius: 1.8em; --lh: 1.6;
}
/* ---- Bande dessinée (enfants) ---- */
[data-ss-theme="comic"] {
    --bg: radial-gradient(circle, rgba(255,122,26,.55) 1.5px, transparent 2px) 0 0 / 1.35em 1.35em, linear-gradient(135deg, #ffe34d, #ffc61a);
    --bg-prev: radial-gradient(circle, rgba(255,122,26,.6) 1px, transparent 1.4px) 0 0 / 7px 7px, linear-gradient(135deg, #ffe34d, #ffc61a);
    --fg: #111; --dim: #2b2b2b; --faint: #5a4a1a;
    --acc: #e8262d; --acc2: #1f6feb; --acc-fg: #fff;
    --b1: #fff; --b2: #fff; --b3: #fff; --blob-o: 0;
    --panel: #fff; --panel-bd: #111; --panel-sh: .3em .3em 0 #111; --blur: 0px;
    --title-bg: none; --title-c: #fff;
    --chip-bg: #fff; --chip-bd: #111; --chip-fg: #111;
    --link: #1f6feb; --mark: #ffe34d; --code-bg: #f1f1f1; --code-fg: #c0171d;
    --font: 'Fredoka', 'Nunito', 'Comic Sans MS', sans-serif; --font-t: 'Bangers', 'Impact', sans-serif; --tw: 400;
    --radius: .8em; --lh: 1.55;
}
/* ---- Tableau d'école (enfants) ---- */
[data-ss-theme="chalk"] {
    --bg: radial-gradient(120% 100% at 30% 20%, #2f5a47, #1d3b2e 70%);
    --bg-prev: linear-gradient(135deg, #2f5a47, #1d3b2e);
    --fg: #f6f4ea; --dim: rgba(246,244,234,.84); --faint: rgba(246,244,234,.5);
    --acc: #ffe27a; --acc2: #ff9fc2; --acc-fg: #2a2000;
    --b1: #fff; --b2: #fff; --b3: #fff; --blob-o: .03;
    --panel: transparent; --panel-bd: rgba(246,244,234,.55); --panel-sh: none; --blur: 0px;
    --title-bg: none; --title-c: #fff;
    --chip-bg: transparent; --chip-bd: rgba(246,244,234,.7); --chip-fg: #fff;
    --link: #8fd8ff; --mark: rgba(255,226,122,.35); --code-bg: rgba(255,255,255,.1); --code-fg: #ffe27a;
    --font: 'Patrick Hand', 'Caveat', 'Comic Sans MS', cursive; --font-t: 'Caveat', 'Patrick Hand', cursive; --tw: 700;
    --radius: .9em; --lh: 1.5;
}
/* ---- Cahier à grands carreaux (enfants) ---- */
[data-ss-theme="notebook"] {
    --bg:
        linear-gradient(90deg, transparent 0 9vw, rgba(222,64,76,.6) 9vw calc(9vw + 2px), transparent calc(9vw + 2px)),
        repeating-linear-gradient(0deg, transparent 0 calc(var(--ss-u) * 2.4 - 1px), rgba(70,110,215,.3) calc(var(--ss-u) * 2.4 - 1px) calc(var(--ss-u) * 2.4)),
        repeating-linear-gradient(90deg, transparent 0 calc(var(--ss-u) * 2.4 - 1px), rgba(70,110,215,.16) calc(var(--ss-u) * 2.4 - 1px) calc(var(--ss-u) * 2.4)),
        #fffef8;
    --bg-prev:
        linear-gradient(90deg, transparent 0 14%, rgba(222,64,76,.6) 14% calc(14% + 1px), transparent calc(14% + 1px)),
        repeating-linear-gradient(0deg, transparent 0 7px, rgba(70,110,215,.3) 7px 8px),
        repeating-linear-gradient(90deg, transparent 0 7px, rgba(70,110,215,.16) 7px 8px), #fffef8;
    --fg: #1b2a6b; --dim: #35458f; --faint: #7f8bc4;
    --acc: #d6303f; --acc2: #2a56d6; --acc-fg: #fff;
    --b1: #fff; --b2: #fff; --b3: #fff; --blob-o: 0;
    --panel: transparent; --panel-bd: transparent; --panel-sh: none; --blur: 0px;
    --title-bg: none; --title-c: #d6303f;
    --chip-bg: #fff6c9; --chip-bd: #d9b800; --chip-fg: #5a4600;
    --link: #1d4fd8; --mark: rgba(255, 229, 64, .7); --code-bg: rgba(42,86,214,.1); --code-fg: #1b3fa8;
    --font: 'Patrick Hand', 'Caveat', 'Comic Sans MS', cursive; --font-t: 'Caveat', 'Patrick Hand', cursive; --tw: 700;
    --radius: .5em; --lh: 1.5;
}
/* ---- Parchemin ---- */
[data-ss-theme="parchment"] {
    --bg: radial-gradient(120% 110% at 50% 40%, #f8ecc8, #e6cd96 75%, #cfae6e);
    --fg: #3b2a14; --dim: #6b5230; --faint: #a58a5a;
    --acc: #9b2c2c; --acc2: #b7791f; --acc-fg: #fff7e6;
    --b1: #fff; --b2: #fff; --b3: #fff; --blob-o: 0;
    --panel: rgba(255,248,225,.5); --panel-bd: rgba(139,98,40,.5); --panel-sh: 0 10px 30px -14px rgba(90,60,20,.45), inset 0 0 0 4px rgba(255,248,225,.6); --blur: 0px;
    --title-bg: none; --title-c: #5a2d0c;
    --chip-bg: rgba(155,44,44,.1); --chip-bd: rgba(155,44,44,.5); --chip-fg: #7a1f1f;
    --link: #8c2323; --mark: rgba(214,158,46,.4); --code-bg: rgba(90,60,20,.12); --code-fg: #6b2f0a;
    --font: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-t: 'Playfair Display', Georgia, serif; --tw: 800;
    --radius: .4em; --lh: 1.7;
}
/* ---- Confort de lecture (dys) ---- */
[data-ss-theme="dys"] {
    --bg: #fbf5e4;
    --fg: #1a1a1a; --dim: #333; --faint: #6b6b6b;
    --acc: #1d4ed8; --acc2: #0f766e; --acc-fg: #fff;
    --b1: #fff; --b2: #fff; --b3: #fff; --blob-o: 0;
    --panel: transparent; --panel-bd: transparent; --panel-sh: none; --blur: 0px;
    --title-bg: none; --title-c: #12306b;
    --chip-bg: #e8efff; --chip-bd: #9db6f2; --chip-fg: #12306b;
    --link: #1d4ed8; --mark: rgba(255, 214, 64, .6); --code-bg: #efe6cc; --code-fg: #6a2a00;
    --font: 'Lexend', 'Verdana', 'Trebuchet MS', sans-serif; --font-t: 'Lexend', 'Verdana', sans-serif; --tw: 600;
    --radius: .8em; --lh: 1.95;
}
/* ---- Contraste élevé ---- */
[data-ss-theme="contrast"] {
    --bg: #000;
    --fg: #fff; --dim: #f2f2f2; --faint: #cfcfcf;
    --acc: #ffe600; --acc2: #00e5ff; --acc-fg: #000;
    --b1: #fff; --b2: #fff; --b3: #fff; --blob-o: 0;
    --panel: #000; --panel-bd: #fff; --panel-sh: none; --blur: 0px;
    --title-bg: none; --title-c: #ffe600;
    --chip-bg: #000; --chip-bd: #ffe600; --chip-fg: #ffe600;
    --link: #6fe3ff; --mark: #ffe600; --code-bg: #1a1a1a; --code-fg: #ffe600;
    --font: 'Lexend', 'Verdana', 'Arial', sans-serif; --font-t: 'Lexend', 'Verdana', sans-serif; --tw: 700;
    --radius: .5em; --lh: 1.8;
}
[data-ss-theme="contrast"] .ss-panel-body, [data-ss-theme="contrast"] .ss-body { border-width: 3px; }
[data-ss-theme="contrast"] mark, [data-ss-theme="comic"] mark { color: #000; }

/* ============================ FOND ============================ */
.ss-bg { position: absolute; inset: 0; background: var(--bg); overflow: hidden; }
.ss-bg i { position: absolute; border-radius: 50%; opacity: var(--blob-o, .4); filter: blur(70px); will-change: transform; }
.ss-bg i:nth-child(1) { width: 52vmax; height: 52vmax; left: -12vmax; top: -16vmax; background: var(--b1); animation: ssFloat1 26s ease-in-out infinite alternate; }
.ss-bg i:nth-child(2) { width: 46vmax; height: 46vmax; right: -14vmax; top: 8vmax; background: var(--b2); animation: ssFloat2 31s ease-in-out infinite alternate; }
.ss-bg i:nth-child(3) { width: 44vmax; height: 44vmax; left: 18vmax; bottom: -22vmax; background: var(--b3); animation: ssFloat3 36s ease-in-out infinite alternate; }
@keyframes ssFloat1 { to { transform: translate(14vmax, 10vmax) scale(1.15); } }
@keyframes ssFloat2 { to { transform: translate(-12vmax, 14vmax) scale(1.2); } }
@keyframes ssFloat3 { to { transform: translate(10vmax, -12vmax) scale(.9); } }

/* décors propres à certains thèmes */
.ss-bg::before, .ss-bg::after { content: ""; position: absolute; pointer-events: none; opacity: 0; }
#mmc-ss[data-ss-theme="space"] .ss-bg::before {
    inset: 0; opacity: 1;
    background-image:
        radial-gradient(1.6px 1.6px at 12% 22%, #fff, transparent 60%), radial-gradient(1.2px 1.2px at 34% 71%, #fff, transparent 60%),
        radial-gradient(2px 2px at 58% 14%, #fff, transparent 60%), radial-gradient(1.3px 1.3px at 79% 48%, #fff, transparent 60%),
        radial-gradient(1.8px 1.8px at 91% 83%, #fff, transparent 60%), radial-gradient(1.1px 1.1px at 6% 90%, #fff, transparent 60%),
        radial-gradient(1.5px 1.5px at 47% 44%, #cfe, transparent 60%), radial-gradient(1.3px 1.3px at 68% 92%, #fff, transparent 60%),
        radial-gradient(1.2px 1.2px at 24% 52%, #fdf, transparent 60%), radial-gradient(1.7px 1.7px at 86% 28%, #fff, transparent 60%);
    background-size: 460px 460px; animation: ssTwinkle 5s ease-in-out infinite alternate;
}
#mmc-ss[data-ss-theme="space"] .ss-bg::after {
    width: 22vmax; height: 2px; left: -30vmax; top: 18vh; opacity: 1;
    background: linear-gradient(90deg, transparent, #fff); transform: rotate(24deg);
    animation: ssShoot 9s ease-in 2s infinite;
}
@keyframes ssTwinkle { from { opacity: .55; } to { opacity: 1; } }
@keyframes ssShoot { 0% { transform: translate(0, 0) rotate(24deg); opacity: 0; } 4% { opacity: 1; } 14% { transform: translate(150vw, 60vh) rotate(24deg); opacity: 0; } 100% { transform: translate(150vw, 60vh) rotate(24deg); opacity: 0; } }
#mmc-ss[data-ss-theme="ocean"] .ss-bg::after {
    left: 0; right: 0; bottom: 0; height: 17vh; opacity: .55;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 60 C150 110 300 10 450 60 S750 110 900 60 S1050 10 1200 60 V120 H0Z' fill='%2354dcff' fill-opacity='.35'/%3E%3C/svg%3E") repeat-x;
    background-size: 50% 100%; animation: ssWave 18s linear infinite;
}
#mmc-ss[data-ss-theme="ocean"] .ss-bg::before {
    left: 0; right: 0; bottom: 0; height: 12vh; opacity: .7;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 70 C200 20 400 120 600 70 S1000 20 1200 70 V120 H0Z' fill='%23ffffff' fill-opacity='.14'/%3E%3C/svg%3E") repeat-x;
    background-size: 40% 100%; animation: ssWave 11s linear infinite reverse;
}
@keyframes ssWave { to { background-position-x: 100vw; } }
#mmc-ss[data-ss-theme="chalk"] .ss-bg::after {
    inset: 0; opacity: 1; pointer-events: none;
    box-shadow: inset 0 0 0 .9em #8a5a2b, inset 0 0 0 1.2em #5e3a17, inset 0 0 12vmin rgba(0,0,0,.55);
    background: radial-gradient(60% 40% at 25% 30%, rgba(255,255,255,.05), transparent), radial-gradient(50% 35% at 75% 70%, rgba(255,255,255,.04), transparent);
}
#mmc-ss[data-ss-theme="parchment"] .ss-bg::after {
    inset: 0; opacity: 1; box-shadow: inset 0 0 14vmin rgba(120,80,20,.55), inset 0 0 3vmin rgba(120,80,20,.4);
}
#mmc-ss[data-ss-theme="neon"] .ss-bg::after {
    inset: 0; opacity: 1; box-shadow: inset 0 0 .35em rgba(255,43,214,.9), inset 0 0 3em rgba(25,240,255,.18);
    border: 2px solid rgba(255,43,214,.55); margin: .8em; border-radius: 1.2em;
}
#mmc-ss[data-ss-theme="candy"] .ss-bg::before {
    inset: 0; opacity: .5;
    background:
        radial-gradient(circle at 8% 88%, #ff8ccb 0 5vmax, transparent 5.1vmax), radial-gradient(circle at 93% 12%, #ffd56b 0 7vmax, transparent 7.1vmax),
        radial-gradient(circle at 88% 82%, #7ddcff 0 4vmax, transparent 4.1vmax), radial-gradient(circle at 14% 10%, #c3a6ff 0 3vmax, transparent 3.1vmax);
    animation: ssTwinkle 4s ease-in-out infinite alternate;
}
#mmc-ss[data-ss-theme="forest"] .ss-bg::after {
    left: 0; right: 0; bottom: 0; height: 22vh; opacity: .5;
    background: radial-gradient(60% 100% at 10% 100%, #0a3a1a 0 60%, transparent 61%), radial-gradient(50% 90% at 45% 110%, #0f4d25 0 60%, transparent 61%), radial-gradient(60% 100% at 90% 100%, #0a3a1a 0 60%, transparent 61%);
}

/* ============================ BARRE HAUTE ============================ */
.ss-top {
    position: absolute; left: 0; right: 0; top: 0; z-index: 30;
    display: flex; align-items: center; gap: 14px; padding: 12px clamp(12px, 3vw, 28px);
    color: var(--fg); font-family: 'Manrope', 'Inter', system-ui, sans-serif; font-size: 13px; font-weight: 700;
    pointer-events: none; transition: opacity .4s, transform .4s var(--ss-ease);
}
.ss-top > * { pointer-events: auto; }
.ss-brand { display: flex; align-items: center; gap: 8px; max-width: 34vw; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-brand-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: linear-gradient(135deg, var(--acc), var(--acc2)); box-shadow: 0 0 12px var(--acc); }
.ss-brand span:last-child { overflow: hidden; text-overflow: ellipsis; }
.ss-prog { flex: 1; height: 6px; border-radius: 6px; background: var(--ui-hi); overflow: hidden; }
.ss-prog-bar { height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--acc), var(--acc2)); box-shadow: 0 0 14px var(--acc); transition: width .6s var(--ss-ease); }
.ss-count { font-variant-numeric: tabular-nums; opacity: .8; letter-spacing: .04em; min-width: 5.2em; text-align: right; }
.ss-topx { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--ui-bd); background: var(--ui-bg); color: var(--ui-fg); backdrop-filter: blur(10px); cursor: pointer; display: grid; place-items: center; padding: 0; flex: none; transition: background .2s, transform .2s var(--ss-pop); }
.ss-topx svg { width: 17px; height: 17px; } .ss-topx:hover { background: #ef4444; color: #fff; transform: scale(1.1); }
.ss-timer { display: none; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-variant-numeric: tabular-nums;
    background: var(--ui-bg); color: var(--ui-fg); border: 1px solid var(--ui-bd); backdrop-filter: blur(10px); cursor: pointer; }
.ss-timer.on { display: inline-flex; }
.ss-timer.warn { background: #f59e0b; color: #1c1300; border-color: transparent; }
.ss-timer.over { background: #ef4444; color: #fff; border-color: transparent; animation: ssPulse 1s ease-in-out infinite; }
@keyframes ssPulse { 50% { transform: scale(1.07); } }
#mmc-ss.ss-idle .ss-top { opacity: 0; transform: translateY(-14px); }

/* ============================ SCÈNE & DIAPOSITIVES ============================ */
.ss-stage { position: absolute; inset: 0; perspective: 1900px; overflow: hidden; z-index: 5; }
.ss-slide {
    position: absolute; inset: 0;
    padding: 58px clamp(16px, 6vw, 120px) 104px;
    font-size: calc(var(--ss-u) * var(--ss-scale, 1) * var(--ss-fit, 1));
    line-height: var(--lh, 1.6);
    backface-visibility: hidden; will-change: transform, opacity;
}
#mmc-ss[data-ss-theme="notebook"] .ss-slide { padding-left: calc(9vw + 3em); }
#mmc-ss[data-ss-theme="chalk"] .ss-slide { padding-left: clamp(30px, 7vw, 130px); padding-right: clamp(30px, 7vw, 130px); }
.ss-view { height: 100%; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; scrollbar-width: thin; scrollbar-color: var(--faint) transparent; }
.ss-view::-webkit-scrollbar { width: 8px; }
.ss-view::-webkit-scrollbar-thumb { background: var(--faint); border-radius: 8px; }
.ss-inner { width: 100%; margin: auto; padding: .2em 0; --ac: var(--nc, var(--acc)); }

/* ---- titres ---- */
.ss-title {
    margin: 0; font-family: var(--font-t); font-weight: var(--tw, 800); line-height: 1.08; letter-spacing: -.01em;
    color: var(--title-c, var(--fg)); background: var(--title-bg, none);
    -webkit-background-clip: text; background-clip: text;
    overflow-wrap: anywhere; text-wrap: balance;
    padding-bottom: .06em;
}
#mmc-ss[data-ss-theme="neon"] .ss-title { text-shadow: 0 0 .12em #fff, 0 0 .4em var(--acc), 0 0 .9em var(--acc); }
#mmc-ss[data-ss-theme="comic"] .ss-title { -webkit-text-stroke: .045em #111; paint-order: stroke fill; text-shadow: .06em .06em 0 #111; letter-spacing: .02em; }
#mmc-ss[data-ss-theme="chalk"] .ss-title { text-shadow: 0 0 .06em rgba(255,255,255,.8), .02em .03em 0 rgba(255,255,255,.35); letter-spacing: .01em; }
#mmc-ss[data-ss-theme="parchment"] .ss-title { text-shadow: 0 .03em 0 rgba(255,255,255,.4); }
#mmc-ss[data-ss-theme="dys"] .ss-body, #mmc-ss[data-ss-theme="contrast"] .ss-body { letter-spacing: .03em; word-spacing: .12em; }
.ss-icon { line-height: 1; filter: drop-shadow(0 .08em .18em rgba(0,0,0,.3)); }
.ss-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: .45em; font-size: .72em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); margin-bottom: .6em; }
.ss-crumb b { color: var(--ac); font-weight: 800; }
.ss-crumb i { font-style: normal; opacity: .5; }

/* ---- couverture ---- */
.ss-slide[data-layout="cover"] .ss-inner, .ss-slide[data-layout="section"] .ss-inner, .ss-slide[data-layout="end"] .ss-inner {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5em; max-width: 64em;
}
.ss-slide[data-layout="cover"] .ss-title { font-size: 4.6em; }
.ss-slide[data-layout="section"] .ss-title { font-size: 3.7em; }
.ss-slide[data-layout="end"] .ss-title { font-size: 5em; }
.ss-hero { font-size: 5.2em; line-height: 1; margin-bottom: .1em; filter: drop-shadow(0 .06em .14em rgba(0,0,0,.35)); }
.ss-slide[data-layout="section"] .ss-hero { font-size: 3.6em; }
.ss-hero-img { max-width: min(100%, 26em); max-height: 30vh; border-radius: var(--radius); box-shadow: var(--panel-sh); border: 3px solid var(--panel-bd); object-fit: cover; }
.ss-secnum {
    font-family: var(--font-t); font-weight: 900; font-size: 5.4em; line-height: .9; letter-spacing: -.03em;
    color: transparent; -webkit-text-stroke: .03em var(--ac); opacity: .85;
}
#mmc-ss[data-ss-theme="comic"] .ss-secnum { -webkit-text-stroke: .04em #111; color: var(--ac); }
.ss-rule { width: 4.2em; height: .26em; border-radius: 9px; margin: .3em auto .25em; background: linear-gradient(90deg, var(--ac), var(--acc2)); box-shadow: 0 0 1em color-mix(in srgb, var(--ac) 60%, transparent); }
#mmc-ss[data-ss-theme="notebook"] .ss-rule { height: .16em; background: var(--acc); box-shadow: none; border-radius: 0; transform: rotate(-1.2deg); width: 8em; }
#mmc-ss[data-ss-theme="chalk"] .ss-rule { background: repeating-linear-gradient(90deg, #fff 0 .5em, transparent .5em .75em); box-shadow: none; height: .14em; }
.ss-sub { margin: .2em 0 0; font-size: 1.5em; color: var(--dim); max-width: 34em; line-height: 1.45; white-space: pre-line; }
.ss-chips-label { margin-top: 1.2em; font-size: .78em; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.ss-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .55em; margin-top: .4em; }
.ss-chip {
    display: inline-flex; align-items: center; gap: .45em; padding: .45em 1.05em; border-radius: 999px; font-size: 1.05em; font-weight: 700;
    background: var(--chip-bg); color: var(--chip-fg); border: 2px solid var(--chip-bd);
    backdrop-filter: blur(var(--blur, 0px)); box-shadow: 0 .15em .6em -.3em rgba(0,0,0,.35);
}
.ss-chip .ss-cdot { width: .65em; height: .65em; border-radius: 50%; background: var(--cc, var(--ac)); flex: none; }
#mmc-ss[data-ss-theme="comic"] .ss-chip { box-shadow: .12em .12em 0 #111; border-width: 3px; }
#mmc-ss[data-ss-theme="candy"] .ss-chip { box-shadow: 0 .15em 0 rgba(255,79,163,.35); }

/* ---- en-tête de diapositive de contenu ---- */
.ss-head { display: flex; align-items: center; gap: .55em; margin-bottom: .6em; }
.ss-head .ss-icon { font-size: 2.6em; flex: none; }
.ss-head .ss-title { font-size: 2.7em; }
.ss-head-txt { min-width: 0; }
.ss-head-txt .ss-title { position: relative; }
.ss-underline { height: .22em; width: 3.2em; margin-top: .22em; border-radius: 9px; background: linear-gradient(90deg, var(--ac), var(--acc2)); }
#mmc-ss[data-ss-theme="notebook"] .ss-underline { height: .14em; width: 100%; max-width: 12em; background: var(--acc); border-radius: 0; transform: rotate(-.8deg); }
#mmc-ss[data-ss-theme="chalk"] .ss-underline { background: repeating-linear-gradient(90deg, #fff 0 .5em, transparent .5em .75em); height: .12em; width: 100%; max-width: 12em; }
#mmc-ss[data-ss-theme="comic"] .ss-underline { background: #111; height: .18em; width: 4em; }

.ss-slide[data-layout="text"] .ss-inner, .ss-slide[data-layout="media"] .ss-inner { max-width: 64em; }
.ss-slide[data-layout="media"] .ss-inner { max-width: 70em; display: flex; flex-direction: column; align-items: stretch; }
.ss-slide[data-layout="split"] .ss-inner { max-width: 82em; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); grid-template-areas: "head head" "media body"; column-gap: 2.4em; align-items: center; }
.ss-slide[data-layout="split"][data-side="right"] .ss-inner { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); grid-template-areas: "head head" "body media"; }
.ss-slide[data-layout="split"] .ss-head { grid-area: head; }
.ss-slide[data-layout="split"] .ss-media { grid-area: media; }
.ss-slide[data-layout="split"] .ss-body { grid-area: body; }

/* ---- médias ---- */
.ss-media { display: flex; flex-direction: column; gap: .9em; align-items: center; justify-content: center; min-width: 0; }
.ss-img { display: block; max-width: 100%; max-height: 24em; border-radius: var(--radius); object-fit: contain; box-shadow: var(--panel-sh), 0 1em 3em -1.4em rgba(0,0,0,.55); border: 3px solid var(--panel-bd); background: rgba(255,255,255,.04); }
.ss-slide[data-layout="media"] .ss-img { max-height: 31em; }
#mmc-ss[data-ss-theme="comic"] .ss-img { border: .16em solid #111; box-shadow: .3em .3em 0 #111; }
#mmc-ss[data-ss-theme="notebook"] .ss-img { border: .35em solid #fff; box-shadow: 0 .3em 1em -.3em rgba(0,0,0,.45); transform: rotate(-1.4deg); }
#mmc-ss[data-ss-theme="chalk"] .ss-img { border: .35em solid #f1ece0; box-shadow: 0 .3em 1.2em rgba(0,0,0,.5); transform: rotate(1deg); }
.ss-emoji-big { font-size: 9em; line-height: 1.05; filter: drop-shadow(0 .06em .14em rgba(0,0,0,.35)); animation: ssBob 3.6s ease-in-out infinite; }
@keyframes ssBob { 50% { transform: translateY(-.08em) rotate(2deg); } }
.ss-media .mmcv { width: 100%; max-width: min(100%, 52em); border-radius: var(--radius); overflow: hidden; }
.ss-map { width: 100%; height: 17em; border-radius: var(--radius); overflow: hidden; border: 3px solid var(--panel-bd); box-shadow: var(--panel-sh); }
.ss-slide[data-layout="media"] .ss-map { height: 26em; }

/* ---- corps ---- */
.ss-body {
    min-width: 0; padding: 1.1em 1.4em; border-radius: var(--radius);
    background: var(--panel); border: 2px solid var(--panel-bd); box-shadow: var(--panel-sh);
    backdrop-filter: blur(var(--blur, 0px)); -webkit-backdrop-filter: blur(var(--blur, 0px));
    font-size: 1.14em; color: var(--dim);
}
.ss-body > :first-child { margin-top: 0; } .ss-body > :last-child { margin-bottom: 0; }
#mmc-ss[data-ss-theme="chalk"] .ss-body { border-style: dashed; }
#mmc-ss[data-ss-theme="notebook"] .ss-body, #mmc-ss[data-ss-theme="dys"] .ss-body { padding: .2em 0; }
.ss-slide[data-layout="media"] .ss-body { margin-top: 1em; }
.ss-slide[data-layout="media"] .ss-media + .ss-body { text-align: center; }
.ss-desc { margin: 0 0 .7em; color: var(--fg); font-size: 1.12em; font-weight: 600; line-height: 1.5; white-space: pre-line; }
.ss-note { color: var(--dim); }
.ss-note p { margin: .45em 0; }
.ss-note strong { color: var(--fg); font-weight: 800; }
.ss-note em { color: var(--fg); }
.ss-note h1, .ss-note h2, .ss-note h3 {
    font-family: var(--font-t); font-weight: var(--tw); color: var(--ac); line-height: 1.2; margin: .9em 0 .25em;
    -webkit-text-fill-color: currentColor; background: none;
}
.ss-note h1 { font-size: 1.55em; } .ss-note h2 { font-size: 1.35em; } .ss-note h3 { font-size: 1.15em; }
.ss-note > :first-child { margin-top: 0; }
.ss-note a { color: var(--link); font-weight: 700; text-decoration: none; border-bottom: 2px solid color-mix(in srgb, var(--link) 45%, transparent); }
.ss-note ul, .ss-note ol { margin: .4em 0; padding-left: 1.3em; }
.ss-note li { margin: .4em 0; padding-left: .2em; }
.ss-note li::marker { color: var(--ac); font-weight: 900; }
.ss-note li > ul, .ss-note li > ol { margin: .2em 0; }
.ss-note mark { background: var(--mark); color: inherit; padding: .02em .28em; border-radius: .3em; }
.ss-note code { background: var(--code-bg); color: var(--code-fg); padding: .08em .4em; border-radius: .35em; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .88em; border: 0; }
.ss-note pre { background: var(--code-bg); border-radius: .7em; padding: .8em 1em; overflow-x: auto; border: 0; box-shadow: none; }
.ss-note pre code { background: none; padding: 0; color: var(--code-fg); }
.ss-note blockquote { margin: .6em 0; padding: .4em 1em; border-left: .28em solid var(--ac); background: var(--ui-hi); border-radius: 0 .6em .6em 0; color: var(--fg); font-style: italic; }
.ss-note blockquote::before { display: none; }
.ss-note hr { border: 0; height: 2px; background: var(--panel-bd); margin: 1em 0; }
.ss-note img, .ss-desc img { display: block; max-width: 100% !important; max-height: 15em !important; margin: .6em auto !important; border-radius: .8em !important; border: 3px solid var(--panel-bd) !important; box-shadow: var(--panel-sh) !important; transform: none !important; }
.ss-note .markdown-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: .7em 0; border-radius: .7em; overflow: hidden; border: 2px solid var(--panel-bd); box-shadow: none; font-size: .95em; }
.ss-note .markdown-table th { background: var(--ac); color: var(--acc-fg); padding: .5em .8em; text-align: left; border: 0; }
.ss-note .markdown-table td { padding: .45em .8em; background: var(--ui-hi); color: var(--fg); border: 0; border-bottom: 1px solid var(--panel-bd); }
.ss-note .markdown-table tr:last-child td { border-bottom: 0; }
.ss-note .markdown-table tr:hover { background: none; }
.ss-note .todo-item { display: flex; align-items: center; gap: .6em; padding: .25em .6em; margin: .2em 0; border-radius: .5em; background: var(--ui-hi); transform: none; }
.ss-note .todo-item input { width: 1.1em; height: 1.1em; accent-color: var(--ac); }
.ss-note .todo-item.todo-checked span { text-decoration: line-through; opacity: .65; color: inherit; }
.ss-note .collapsible-list { margin: .5em 0; background: var(--ui-hi); border-radius: .7em; padding: .35em .8em; }
.ss-note .collapsible-title { cursor: pointer; font-weight: 800; color: var(--fg); list-style: none; display: flex; gap: .5em; align-items: center; }
.ss-note .collapsible-title::-webkit-details-marker { display: none; }
.ss-note .collapsible-icon { transition: transform .2s; font-size: .8em; }
.ss-note .collapsible-list:not([open]) .collapsible-icon { transform: rotate(-90deg); }
.ss-note .collapsible-content { padding: .2em 0 .3em 1.2em; }
.ss-note .collapsible-content li::before { content: none; }
.ss-note .collapsible-content ul, .ss-note .collapsible-content ol { list-style: disc; padding-left: 1.1em; }
/* encarts : toujours lisibles, quel que soit le thème */
.ss-note .callout { display: flex; gap: .7em; align-items: flex-start; margin: .55em 0; padding: .6em .9em; border-radius: .8em; border: 2px solid; background: var(--ui-solid); color: #1f2937; box-shadow: 0 .15em .6em -.3em rgba(0,0,0,.35); transform: none; }
.ss-note .callout-icon { font-size: 1.5em; line-height: 1; flex: none; }
.ss-note .callout-content { line-height: 1.45; }
.ss-note .callout-content strong { color: inherit !important; margin-right: .4em; font-size: .85em; text-transform: uppercase; letter-spacing: .05em; }
.ss-note .callout-info { background: #e6f0ff; border-color: #3b82f6; } .ss-note .callout-warning { background: #fff2d6; border-color: #f59e0b; }
.ss-note .callout-tip { background: #dcf9ea; border-color: #10b981; } .ss-note .callout-important { background: #ffe2e2; border-color: #ef4444; }
.ss-note .callout-definition { background: #f1e4ff; border-color: #a855f7; } .ss-note .callout-remember { background: #ffe9d6; border-color: #f97316; }
.ss-note .callout-example { background: #dcfce7; border-color: #22c55e; } .ss-note .callout-method { background: #e0e7ff; border-color: #6366f1; }
.ss-note .callout-application { background: #cffafe; border-color: #06b6d4; } .ss-note .callout-education { background: #fae8ff; border-color: #d946ef; }
.ss-note .video-embed, .ss-note .activity-embed { position: relative; width: min(100%, 36em); aspect-ratio: 16 / 9; height: auto; min-height: 0; max-height: none; margin: .7em auto; border-radius: .8em; overflow: hidden; background: #000; }
.ss-note .activity-embed { aspect-ratio: 4 / 3; background: #fff; }
.ss-note .video-embed iframe, .ss-note .activity-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ss-note iframe[src*="youtube"], .ss-note iframe[src*="vimeo"] { width: min(100%, 36em); aspect-ratio: 16 / 9; height: auto; border: 0; display: block; margin: .6em auto; }
.ss-note .activity-card-timeline, .ss-note .activity-preview-card { margin: .8em 0 !important; padding: .9em 1.2em !important; border-radius: 1em !important; }
.ss-note .activity-card-timeline > div:first-child, .ss-note .activity-preview-card > div > div:first-child { font-size: 2.2em !important; margin-bottom: .2em !important; }
.ss-note .activity-card-timeline > div:nth-child(2) { font-size: 1.3em !important; margin-bottom: .4em !important; }
.ss-note .katex-display { margin: .6em 0; overflow-x: auto; overflow-y: hidden; }
.ss-note .mmc-html-note { margin: .6em 0; }
.ss-note .mmc-html-note iframe { background: #fff; }

/* tags, lien, pièces jointes */
.ss-tags { display: flex; flex-wrap: wrap; gap: .45em; margin-top: .9em; }
.ss-tag { padding: .18em .75em; border-radius: 999px; font-size: .78em; font-weight: 800; background: var(--chip-bg); color: var(--chip-fg); border: 2px solid var(--chip-bd); }
.ss-link { display: inline-flex; align-items: center; gap: .5em; margin-top: .9em; padding: .55em 1.2em; border-radius: 999px; font-weight: 800; font-size: .92em; text-decoration: none; background: linear-gradient(135deg, var(--ac), var(--acc2)); color: var(--acc-fg); box-shadow: 0 .3em 1em -.4em rgba(0,0,0,.6); }
.ss-link:hover { filter: brightness(1.1); }
.ss-atts { margin-top: .9em; display: flex; flex-direction: column; gap: .4em; }
.ss-atts-t { font-size: .74em; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.ss-att { display: flex; align-items: center; gap: .6em; padding: .4em .8em; border-radius: .7em; background: var(--ui-hi); border: 1px solid var(--panel-bd); font-size: .88em; color: var(--fg); }
.ss-att-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-att-size { opacity: .6; font-size: .85em; }
.ss-att button { border: 0; background: var(--ui-hi); color: inherit; border-radius: .5em; padding: .15em .5em; cursor: pointer; font-size: 1em; }

/* ---- diapo de fin ---- */
.ss-end-actions { display: flex; gap: .8em; flex-wrap: wrap; justify-content: center; margin-top: 1.4em; }
.ss-btn { border: 0; cursor: pointer; font: inherit; font-weight: 800; font-size: 1.05em; padding: .65em 1.5em; border-radius: 999px; background: var(--chip-bg); color: var(--chip-fg); border: 2px solid var(--chip-bd); transition: transform .2s var(--ss-pop), filter .2s; font-family: var(--font); }
.ss-btn.pri { background: linear-gradient(135deg, var(--acc), var(--acc2)); color: var(--acc-fg); border-color: transparent; }
.ss-btn:hover { transform: translateY(-.1em) scale(1.05); filter: brightness(1.08); }
.ss-confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }

/* ============================ RÉVÉLATION PARAGRAPHE PAR PARAGRAPHE ============================ */
.ss-reveal .ss-step:not(.ss-on) { display: none; }
.ss-reveal.ss-measure .ss-step:not(.ss-on) { display: revert !important; }
.ss-reveal .ss-step.ss-on.ss-fresh { animation: ssStepIn .65s var(--ss-pop) both, ssGlow 1.6s ease-out 1; }
@keyframes ssStepIn { from { opacity: 0; transform: translateY(.9em) scale(.97); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes ssGlow { 0% { background-color: color-mix(in srgb, var(--ac) 26%, transparent); } 100% { background-color: transparent; } }
.ss-reveal li.ss-step.ss-on.ss-fresh, .ss-reveal p.ss-step.ss-on.ss-fresh { border-radius: .5em; }
/* en mode « un par un » : le contenu s'ancre en haut pour que le titre ne bouge pas */
.ss-reveal .ss-inner { margin-top: 0; }
.ss-reveal[data-layout="split"] .ss-inner { align-items: start; }
.ss-stepind { position: absolute; left: 50%; bottom: 88px; transform: translateX(-50%); z-index: 25; display: none; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px;
    background: var(--ui-bg); border: 1px solid var(--ui-bd); backdrop-filter: blur(12px); color: var(--ui-fg); font: 800 12px 'Manrope', system-ui, sans-serif; transition: opacity .4s; }
.ss-stepind.on { display: inline-flex; }
.ss-stepind i { width: 8px; height: 8px; border-radius: 50%; background: var(--ui-hi); border: 1px solid var(--ui-dim); transition: transform .3s var(--ss-pop), background .3s; }
.ss-stepind i.d { background: var(--acc); border-color: var(--acc); transform: scale(1.15); }
.ss-stepind b { margin-left: 4px; opacity: .75; font-weight: 800; }

/* ============================ ANIMATIONS D'ÉLÉMENTS ============================ */
.ss-a { animation-duration: .8s; animation-timing-function: var(--ss-ease); animation-fill-mode: both; animation-delay: calc(var(--i, 0) * .1s + .18s); }
#mmc-ss[data-ss-anim="rise"] .ss-a { animation-name: ssRise; }
#mmc-ss[data-ss-anim="pop"] .ss-a { animation-name: ssPopIn; animation-timing-function: var(--ss-pop); animation-duration: .7s; }
#mmc-ss[data-ss-anim="bounce"] .ss-a { animation-name: ssBounceIn; animation-timing-function: ease-out; animation-duration: 1s; }
#mmc-ss[data-ss-anim="blur"] .ss-a { animation-name: ssBlurIn; animation-duration: 1s; }
#mmc-ss[data-ss-anim="none"] .ss-a { animation: none; }
@keyframes ssRise { from { opacity: 0; transform: translateY(1.6em); } to { opacity: 1; transform: none; } }
@keyframes ssPopIn { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: none; } }
@keyframes ssBlurIn { from { opacity: 0; filter: blur(14px); transform: scale(1.06); } to { opacity: 1; filter: none; transform: none; } }
@keyframes ssBounceIn {
    0% { opacity: 0; transform: translateY(-3.5em) scale(.9); } 45% { opacity: 1; transform: translateY(.45em) scale(1.02, .96); }
    65% { transform: translateY(-.5em) scale(.99, 1.02); } 82% { transform: translateY(.14em); } 100% { opacity: 1; transform: none; }
}

/* ============================ TRANSITIONS ============================ */
.ss-slide.is-in, .ss-slide.is-out { pointer-events: none; }
.ss-slide.is-in { animation: ssIn var(--dur, .7s) var(--ss-ease) var(--delay, 0s) both; z-index: 2; }
.ss-slide.is-out { animation: ssOut var(--dur, .7s) var(--ss-ease) both; z-index: 1; }
@keyframes ssIn { from { opacity: var(--in-o, 0); transform: var(--in-t, none); } to { opacity: 1; transform: none; } }
@keyframes ssOut { from { opacity: 1; transform: none; } to { opacity: var(--out-o, 0); transform: var(--out-t, none); } }
@keyframes ssCircleIn { from { clip-path: circle(0% at 50% 55%); } to { clip-path: circle(150% at 50% 55%); } }
.ss-stage[data-trans="slide"] .is-in[data-dir="fwd"] { --in-t: translateX(14%); }
.ss-stage[data-trans="slide"] .is-out[data-dir="fwd"] { --out-t: translateX(-14%); }
.ss-stage[data-trans="slide"] .is-in[data-dir="back"] { --in-t: translateX(-14%); }
.ss-stage[data-trans="slide"] .is-out[data-dir="back"] { --out-t: translateX(14%); }
.ss-stage[data-trans="zoom"] .is-in[data-dir="fwd"] { --in-t: scale(.82); }
.ss-stage[data-trans="zoom"] .is-out[data-dir="fwd"] { --out-t: scale(1.22); }
.ss-stage[data-trans="zoom"] .is-in[data-dir="back"] { --in-t: scale(1.22); }
.ss-stage[data-trans="zoom"] .is-out[data-dir="back"] { --out-t: scale(.82); }
.ss-stage[data-trans="cube"] .is-in, .ss-stage[data-trans="cube"] .is-out { --dur: .9s; backface-visibility: hidden; }
.ss-stage[data-trans="cube"] .is-in[data-dir="fwd"] { transform-origin: 0% 50%; --in-t: translateX(100%) rotateY(-90deg); --in-o: .3; }
.ss-stage[data-trans="cube"] .is-out[data-dir="fwd"] { transform-origin: 100% 50%; --out-t: translateX(-100%) rotateY(90deg); --out-o: .3; }
.ss-stage[data-trans="cube"] .is-in[data-dir="back"] { transform-origin: 100% 50%; --in-t: translateX(-100%) rotateY(90deg); --in-o: .3; }
.ss-stage[data-trans="cube"] .is-out[data-dir="back"] { transform-origin: 0% 50%; --out-t: translateX(100%) rotateY(-90deg); --out-o: .3; }
.ss-stage[data-trans="flip"] .is-out { --dur: .38s; --out-t: rotateY(88deg); --out-o: 0; }
.ss-stage[data-trans="flip"] .is-out[data-dir="back"] { --out-t: rotateY(-88deg); }
.ss-stage[data-trans="flip"] .is-in { --dur: .5s; --delay: .36s; --in-t: rotateY(-88deg); --in-o: 0; }
.ss-stage[data-trans="flip"] .is-in[data-dir="back"] { --in-t: rotateY(88deg); }
.ss-stage[data-trans="cards"] .is-in[data-dir="fwd"] { --in-t: scale(.88) translateY(7%); }
.ss-stage[data-trans="cards"] .is-out[data-dir="fwd"] { z-index: 3; --out-t: translateX(-125%) rotate(-14deg); --out-o: 1; --dur: .75s; }
.ss-stage[data-trans="cards"] .is-in[data-dir="back"] { z-index: 3; --in-t: translateX(-125%) rotate(-14deg); --in-o: 1; }
.ss-stage[data-trans="cards"] .is-out[data-dir="back"] { --out-t: scale(.88) translateY(7%); }
.ss-stage[data-trans="circle"] .is-in { animation-name: ssCircleIn; --dur: .85s; animation-timing-function: cubic-bezier(.5, 0, .2, 1); }
.ss-stage[data-trans="circle"] .is-out { --out-o: 1; --dur: .85s; }
.ss-stage[data-trans="none"] .is-in, .ss-stage[data-trans="none"] .is-out { animation-duration: .01s; }
.ss-stage[data-trans="none"] .is-out { opacity: 0; }


/* ---- Page tournée : vraie pliure (la page se plie le long d'une ligne qui avance vers la gauche) ----
   --pg (0 → 1) est animée sur la scène ; la page qui part est rognée à droite, son verso (.ss-fold) se
   rabat sur la partie gauche, avec ombres portées et reflet sur le pli. */
@property --pg { syntax: '<number>'; inherits: true; initial-value: 0; }
@keyframes ssPg { from { --pg: 0; } to { --pg: 1; } }
.ss-stage.pg-run { animation: ssPg 1.15s cubic-bezier(.55, .05, .25, 1) both; }
.ss-stage.pg-run.pg-back { animation-direction: reverse; }
/* la page qui tourne emporte une copie du fond complet du thème (halos, décors…) : voir paperBg() dans slideshow.js */
.ss-paperbg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ss-stage[data-trans="page"] .is-out[data-dir="fwd"], .ss-stage[data-trans="page"] .is-in[data-dir="back"] {
    z-index: 3; animation: none; clip-path: inset(0 calc(var(--pg) * 100%) 0 0);
}
.ss-stage[data-trans="page"] .is-in[data-dir="fwd"], .ss-stage[data-trans="page"] .is-out[data-dir="back"] { z-index: 1; animation: none; }
.ss-fold {
    position: absolute; top: 0; bottom: 0; z-index: 4; pointer-events: none;
    left: calc((1 - 2 * var(--pg)) * 100%); width: calc(var(--pg) * 100%);
    background:
        linear-gradient(90deg, rgba(0,0,0,.26) 0%, rgba(0,0,0,.04) 40%, rgba(255,255,255,.2) 80%, rgba(0,0,0,.24) 100%),
        var(--bg);
    box-shadow: -.9em 0 2.2em -.4em rgba(0,0,0,.42);
}
/* verso : face de la page en miroir, très pâle, à travers le papier */
.ss-fold-in { position: absolute; inset: 0; overflow: hidden; }
.ss-fold-in .ss-slide { position: absolute; left: 0; top: 0; bottom: 0; right: auto; transform: scaleX(-1); opacity: .16; filter: blur(.4px); }
.ss-fold-in .ss-slide *, .ss-fold-in .ss-slide *::before { animation: none !important; }
/* arête du pli : fine ligne claire + dégradé qui donne l'impression d'un papier cintré */
.ss-fold::before { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: min(5em, 100%);
    background: linear-gradient(270deg, rgba(255,255,255,.55), rgba(255,255,255,0) 22%, rgba(0,0,0,.18) 55%, rgba(0,0,0,0)); }
/* ombre portée du pli sur la page qui apparaît dessous */
.ss-fold::after { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: 6em;
    background: linear-gradient(90deg, rgba(0,0,0,.4), rgba(0,0,0,.12) 40%, rgba(0,0,0,0));
    opacity: calc(1 - var(--pg) * var(--pg) * var(--pg)); }

/* ---- agrandissement des médias ---- */
.ss-slide img:not(.ss-hero-img) { cursor: zoom-in; }
.ss-hero-img { cursor: zoom-in; }
.ss-zoomable { position: relative; }
.ss-zoombtn { position: absolute; top: .5em; right: .5em; z-index: 5; width: 2.3em; height: 2.3em; border: 0; border-radius: 50%; cursor: pointer; background: rgba(0,0,0,.6); color: #fff; font-size: .95em; display: grid; place-items: center; opacity: 0; transition: opacity .2s, transform .2s var(--ss-pop); backdrop-filter: blur(6px); }
.ss-zoomable:hover .ss-zoombtn, .ss-zoombtn:focus-visible { opacity: 1; } .ss-zoombtn:hover { transform: scale(1.12); }
@media (hover: none) { .ss-zoombtn { opacity: .85; } }
.ss-lb { position: absolute; inset: 0; z-index: 95; display: none; align-items: center; justify-content: center; background: rgba(4,6,14,.88); backdrop-filter: blur(10px); cursor: zoom-out; padding: 3vh 3vw; }
.ss-lb.open { display: flex; animation: ssSwap .35s var(--ss-ease); }
.ss-lb img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px; box-shadow: 0 30px 90px rgba(0,0,0,.7); transition: transform .3s var(--ss-ease); cursor: zoom-in; }
.ss-lb img.zoomed { transform: scale(2.4); cursor: zoom-out; }
.ss-lb iframe { width: min(94vw, 175vh); aspect-ratio: 16 / 9; height: auto; max-height: 92vh; border: 0; border-radius: 12px; background: #000; cursor: auto; }
.ss-lb iframe.tall { aspect-ratio: auto; width: min(94vw, 1100px); height: 90vh; background: #fff; }
.ss-lb-x { position: absolute; top: 14px; right: 16px; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255,255,255,.16); color: #fff; font-size: 20px; display: grid; place-items: center; }
.ss-lb-x:hover { background: #ef4444; }
.ss-lb-cap { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.75); font: 700 12px 'Manrope', system-ui, sans-serif; background: rgba(0,0,0,.5); padding: 5px 12px; border-radius: 99px; pointer-events: none; }

/* ---- logo de la charte ---- */
.ss-logo-top { height: 26px; width: auto; max-width: 120px; object-fit: contain; flex: none; border-radius: 4px; }
.ss-logo-hero { max-height: 6.2em; max-width: min(70%, 22em); object-fit: contain; margin-bottom: .3em; filter: drop-shadow(0 .06em .14em rgba(0,0,0,.25)); }
.ss-slide[data-layout="end"] .ss-logo-hero { max-height: 4.6em; }

/* ============================ FLÈCHES LATÉRALES ============================ */
.ss-nav {
    position: absolute; top: 50%; z-index: 20; width: 58px; height: 58px; border-radius: 50%; border: 1px solid var(--ui-bd); cursor: pointer;
    background: var(--ui-bg); color: var(--ui-fg); backdrop-filter: blur(12px); display: grid; place-items: center;
    transition: transform .25s var(--ss-pop), opacity .4s, background .2s; padding: 0; transform: translateY(-50%);
}
.ss-nav svg { width: 26px; height: 26px; }
.ss-nav.prev { left: clamp(8px, 2.2vw, 30px); } .ss-nav.next { right: clamp(8px, 2.2vw, 30px); }
.ss-nav:hover { transform: translateY(-50%) scale(1.12); background: var(--acc); color: var(--acc-fg); }
.ss-nav:active { transform: translateY(-50%) scale(.94); }
.ss-nav:disabled { opacity: .18; cursor: default; pointer-events: none; }
#mmc-ss.ss-idle .ss-nav { opacity: 0; pointer-events: none; }
@media (max-width: 760px), (pointer: coarse) and (max-width: 1000px) { .ss-nav { display: none; } }

/* ============================ DOCK ============================ */
.ss-dock {
    position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 40;
    display: flex; align-items: center; gap: 4px; padding: 7px; max-width: calc(100vw - 16px);
    background: var(--ui-bg); color: var(--ui-fg); border: 1px solid var(--ui-bd); border-radius: 22px;
    backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
    box-shadow: 0 18px 50px -18px rgba(0,0,0,.6); transition: opacity .4s, transform .45s var(--ss-ease);
    font-family: 'Manrope', 'Inter', system-ui, sans-serif; overflow-x: auto; scrollbar-width: none;
}
.ss-dock::-webkit-scrollbar { display: none; }
#mmc-ss.ss-idle .ss-dock { opacity: 0; transform: translate(-50%, 24px); pointer-events: none; }
.ss-sep { width: 1px; align-self: stretch; margin: 6px 4px; background: var(--ui-bd); flex: none; }
.ss-db {
    position: relative; flex: none; height: 46px; min-width: 46px; padding: 0 12px; border: 0; border-radius: 15px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: transparent; color: inherit;
    font: 800 13px 'Manrope', system-ui, sans-serif; transition: background .18s, transform .2s var(--ss-pop), color .18s;
}
.ss-db svg { width: 22px; height: 22px; flex: none; }
.ss-db:hover { background: var(--ui-hi); transform: translateY(-2px); }
.ss-db:active { transform: scale(.93); }
.ss-db:disabled { opacity: .3; pointer-events: none; }
.ss-db.on { background: linear-gradient(135deg, var(--acc), var(--acc2)); color: var(--acc-fg); }
.ss-db.pill { padding: 0 14px 0 11px; }
.ss-db .ss-sw { width: 30px; height: 18px; border-radius: 99px; background: var(--ui-hi); border: 1px solid var(--ui-dim); position: relative; transition: background .2s; flex: none; }
.ss-db .ss-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--ui-fg); transition: transform .25s var(--ss-pop); }
.ss-db.on .ss-sw { background: rgba(255,255,255,.35); border-color: transparent; } .ss-db.on .ss-sw::after { transform: translateX(12px); background: var(--acc-fg); }
.ss-db.big { background: linear-gradient(135deg, var(--acc), var(--acc2)); color: var(--acc-fg); min-width: 54px; }
.ss-db.big:hover { filter: brightness(1.1); background: linear-gradient(135deg, var(--acc), var(--acc2)); }
.ss-db .ss-autobar { position: absolute; left: 10px; right: 10px; bottom: 4px; height: 3px; border-radius: 3px; background: currentColor; transform-origin: 0 50%; transform: scaleX(0); opacity: .8; }
.ss-db.on .ss-autobar { animation: ssAuto var(--auto, 8s) linear infinite; }
@keyframes ssAuto { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ss-db[data-tip]::after {
    content: attr(data-tip); position: absolute; bottom: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(4px); white-space: nowrap;
    background: var(--ui-solid); color: var(--ui-fg); border: 1px solid var(--ui-bd); padding: 5px 10px; border-radius: 9px; font-size: 12px; font-weight: 700;
    opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; box-shadow: 0 8px 20px -8px rgba(0,0,0,.5);
}
@media (hover: hover) { .ss-db[data-tip]:hover::after { opacity: 1; transform: translateX(-50%); } }
@media (max-width: 980px) { .ss-dock [data-act="black"], .ss-dock [data-act="exit"] { display: none; } }
@media (max-width: 760px) {
    .ss-dock { bottom: 8px; gap: 1px; padding: 5px; border-radius: 18px; justify-content: flex-start; }
    .ss-db { height: 42px; min-width: 42px; padding: 0 9px; }
    .ss-db .lbl { display: none; }
    .ss-brand { display: none; }
    .ss-stepind { bottom: 72px; }
    .ss-slide { padding-top: 48px; padding-bottom: 90px; }
}

/* ============================ PANNEAUX ============================ */
.ss-sheet {
    position: absolute; top: 0; right: 0; bottom: 0; z-index: 60; width: min(420px, 100vw); display: flex; flex-direction: column;
    background: var(--ui-bg); color: var(--ui-fg); border-left: 1px solid var(--ui-bd);
    backdrop-filter: blur(26px) saturate(160%); -webkit-backdrop-filter: blur(26px) saturate(160%);
    box-shadow: -30px 0 70px -30px rgba(0,0,0,.6); transform: translateX(104%); transition: transform .5s var(--ss-ease); visibility: hidden;
    font-family: 'Manrope', 'Inter', system-ui, sans-serif; user-select: none;
}
.ss-sheet.open { transform: none; visibility: visible; }
.ss-sheet-h { display: flex; align-items: center; gap: 10px; padding: 18px 20px 12px; }
.ss-sheet-h h2 { margin: 0; font-size: 19px; font-weight: 800; flex: 1; }
.ss-x { border: 0; width: 38px; height: 38px; border-radius: 12px; background: var(--ui-hi); color: inherit; cursor: pointer; font-size: 18px; display: grid; place-items: center; }
.ss-x:hover { background: var(--acc); color: var(--acc-fg); }
.ss-sheet-b { flex: 1; overflow-y: auto; padding: 4px 20px 28px; scrollbar-width: thin; }
.ss-grp { margin: 18px 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ui-dim); }
.ss-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ss-tile { border: 2px solid transparent; background: var(--ui-hi); border-radius: 16px; padding: 7px; cursor: pointer; color: inherit; text-align: left; font: inherit; transition: transform .2s var(--ss-pop), border-color .2s; }
.ss-tile:hover { transform: translateY(-3px) scale(1.02); }
.ss-tile.sel { border-color: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 30%, transparent); }
.ss-tprev { display: grid; align-content: center; gap: 4px; height: 74px; border-radius: 11px; padding: 9px 11px; background: var(--bg-prev, var(--bg)); overflow: hidden; position: relative; border: 1px solid rgba(128,128,128,.25); }
.ss-tprev b { font: var(--tw, 800) 24px/1 var(--font-t); color: var(--title-c, var(--fg)); background: var(--title-bg, none); -webkit-background-clip: text; background-clip: text; width: fit-content; padding-right: 2px; }
.ss-tprev[data-ss-theme="comic"] b { -webkit-text-stroke: 1px #111; text-shadow: 2px 2px 0 #111; }
.ss-tprev[data-ss-theme="neon"] b { text-shadow: 0 0 6px var(--acc), 0 0 14px var(--acc); }
.ss-tprev i { display: block; height: 5px; border-radius: 4px; background: var(--dim); opacity: .55; width: 78%; }
.ss-tprev i + i { width: 52%; }
.ss-tprev em { position: absolute; right: 8px; bottom: 8px; width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(135deg, var(--acc), var(--acc2)); }
.ss-tname { display: block; padding: 7px 4px 2px; font-size: 13px; font-weight: 800; }
.ss-tname small { display: block; font-size: 11px; font-weight: 600; color: var(--ui-dim); }
.ss-set { margin-top: 18px; }
.ss-set > label, .ss-set > .ss-lab { display: block; font-size: 13px; font-weight: 800; margin-bottom: 4px; }
.ss-set p { margin: 0 0 8px; font-size: 12px; line-height: 1.4; color: var(--ui-dim); }
.ss-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.ss-opt { border: 2px solid transparent; background: var(--ui-hi); color: inherit; border-radius: 12px; padding: 8px 12px; font: 800 13px 'Manrope', system-ui, sans-serif; cursor: pointer; transition: transform .15s var(--ss-pop), background .15s; }
.ss-opt:hover { transform: translateY(-2px); }
.ss-opt.sel { background: linear-gradient(135deg, var(--acc), var(--acc2)); color: var(--acc-fg); }
.ss-toggle { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: var(--ui-hi); color: inherit; padding: 12px 14px; border-radius: 14px; cursor: pointer; font: inherit; text-align: left; }
.ss-toggle .t { flex: 1; font-size: 13px; font-weight: 800; } .ss-toggle .t small { display: block; font-weight: 600; color: var(--ui-dim); font-size: 12px; margin-top: 2px; }
.ss-toggle .ss-sw { width: 42px; height: 24px; border-radius: 99px; background: rgba(128,128,128,.4); position: relative; flex: none; transition: background .2s; }
.ss-toggle .ss-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .25s var(--ss-pop); box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.ss-toggle.sel .ss-sw { background: var(--acc); } .ss-toggle.sel .ss-sw::after { transform: translateX(18px); }
.ss-range { width: 100%; accent-color: var(--acc); }
.ss-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ss-preset { border: 2px solid transparent; background: var(--ui-hi); color: inherit; border-radius: 14px; padding: 10px 6px; cursor: pointer; font: 800 12px 'Manrope', system-ui, sans-serif; text-align: center; transition: transform .2s var(--ss-pop); }
.ss-preset:hover { transform: translateY(-3px); border-color: var(--acc); } .ss-preset span { display: block; font-size: 26px; margin-bottom: 3px; }
.ss-keys { margin-top: 22px; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 12px; color: var(--ui-dim); }
.ss-keys kbd { font: 800 11px 'Manrope', monospace; background: var(--ui-hi); border: 1px solid var(--ui-bd); border-bottom-width: 2px; border-radius: 6px; padding: 2px 7px; color: var(--ui-fg); justify-self: start; }

/* ============================ APERÇU (GRILLE) ============================ */
.ss-over { position: absolute; inset: 0; z-index: 70; display: flex; flex-direction: column; background: color-mix(in srgb, var(--ui-solid) 86%, transparent); color: var(--ui-fg); backdrop-filter: blur(24px); opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; font-family: 'Manrope', 'Inter', system-ui, sans-serif; }
.ss-over.open { opacity: 1; visibility: visible; }
.ss-over-h { display: flex; align-items: center; gap: 12px; padding: 18px clamp(16px, 4vw, 40px) 8px; }
.ss-over-h h2 { margin: 0; flex: 1; font-size: 20px; font-weight: 800; }
.ss-grid { flex: 1; overflow-y: auto; padding: 8px clamp(16px, 4vw, 40px) 40px; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; align-content: start; }
.ss-th { border: 2px solid transparent; border-radius: 16px; background: var(--ui-hi); color: inherit; font: inherit; text-align: left; padding: 0; cursor: pointer; overflow: hidden; display: flex; flex-direction: column; transition: transform .22s var(--ss-pop), border-color .2s; animation: ssRise .5s var(--ss-ease) both; animation-delay: calc(var(--k, 0) * 25ms); }
.ss-th:hover { transform: translateY(-4px) scale(1.03); border-color: var(--acc); }
.ss-th.cur { border-color: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 35%, transparent); }
.ss-th-top { height: 6px; background: var(--tc, var(--acc)); }
.ss-th-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; min-height: 118px; }
.ss-th-n { font-size: 11px; font-weight: 800; color: var(--ui-dim); letter-spacing: .08em; display: flex; justify-content: space-between; }
.ss-th-ic { font-size: 30px; line-height: 1; }
.ss-th-t { font-size: 15px; font-weight: 800; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ss-th-s { font-size: 12px; color: var(--ui-dim); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ss-th img { height: 70px; width: 100%; object-fit: cover; }

/* ============================ OUTILS : LASER / STYLO / NOIR / TOAST ============================ */
.ss-laser { position: absolute; z-index: 90; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; pointer-events: none; display: none;
    background: radial-gradient(circle, #fff 0 18%, #ff2a2a 30%, rgba(255,42,42,.0) 70%); box-shadow: 0 0 18px 6px rgba(255,42,42,.65); }
#mmc-ss.ss-laser-on .ss-laser { display: block; }
.ss-ink { position: absolute; inset: 0; z-index: 27; width: 100%; height: 100%; pointer-events: none; touch-action: none; }
.ss-pens { position: absolute; left: 50%; bottom: 82px; transform: translateX(-50%); z-index: 45; display: none; gap: 8px; align-items: center; padding: 8px 12px; border-radius: 999px; background: var(--ui-bg); border: 1px solid var(--ui-bd); backdrop-filter: blur(14px); }
#mmc-ss.ss-pen-on .ss-pens { display: flex; }
.ss-pens .done { border: 0; background: linear-gradient(135deg, var(--acc), var(--acc2)); color: var(--acc-fg); border-radius: 999px; padding: 7px 14px; font: 800 12px 'Manrope', sans-serif; cursor: pointer; }
.ss-pens .sep { width: 1px; height: 20px; background: var(--ui-bd); }
#mmc-ss.ss-pen-on .ss-dock { z-index: 70; }
.ss-pc { width: 28px; height: 28px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; padding: 0; box-shadow: 0 0 0 1px rgba(128,128,128,.4); transition: transform .15s var(--ss-pop); }
.ss-pc:hover { transform: scale(1.15); } .ss-pc.sel { border-color: var(--ui-fg); transform: scale(1.18); }
.ss-pens button.clr { border: 0; background: var(--ui-hi); color: var(--ui-fg); border-radius: 999px; padding: 6px 12px; font: 800 12px 'Manrope', sans-serif; cursor: pointer; }
.ss-black { position: absolute; inset: 0; z-index: 100; background: #000; display: none; cursor: pointer; align-items: flex-end; justify-content: center; padding-bottom: 40px; }
.ss-black button { border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.1); color: #fff; font: 700 14px 'Manrope', system-ui, sans-serif; padding: 12px 22px; border-radius: 999px; cursor: pointer; animation: ssBlackHint 6s ease both; }
.ss-black button:hover { background: rgba(255,255,255,.25); }
@keyframes ssBlackHint { 0%, 70% { opacity: 1; } 100% { opacity: .0; } }
.ss-black:hover button { opacity: 1; animation: none; }
#mmc-ss.ss-blackout .ss-black { display: flex; }
.ss-toast { position: absolute; top: 62px; left: 50%; z-index: 110; transform: translate(-50%, -10px); opacity: 0; pointer-events: none; padding: 9px 18px; border-radius: 999px; font: 800 14px 'Manrope', system-ui, sans-serif;
    background: var(--ui-solid); color: var(--ui-fg); border: 1px solid var(--ui-bd); box-shadow: 0 14px 34px -12px rgba(0,0,0,.55); transition: opacity .3s, transform .35s var(--ss-pop); white-space: nowrap; max-width: 92vw; overflow: hidden; text-overflow: ellipsis; }
.ss-toast.on { opacity: 1; transform: translate(-50%, 0); }
.ss-coach { position: absolute; left: 50%; bottom: 96px; z-index: 55; transform: translateX(-50%); display: none; align-items: center; gap: 12px; padding: 12px 20px; border-radius: 18px; background: var(--ui-solid); color: var(--ui-fg); border: 2px solid var(--acc);
    font: 700 15px 'Manrope', system-ui, sans-serif; box-shadow: 0 20px 50px -16px rgba(0,0,0,.6); animation: ssBounceIn 1s both; max-width: 92vw; }
.ss-coach.on { display: flex; } .ss-coach kbd { font: 800 13px 'Manrope', monospace; background: var(--ui-hi); border-bottom: 2px solid var(--ui-bd); border-radius: 7px; padding: 3px 9px; }
.ss-swap { animation: ssSwap .6s var(--ss-ease); } @keyframes ssSwap { from { opacity: .0; transform: scale(1.015); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .ss-bg i, .ss-bg::before, .ss-bg::after, .ss-emoji-big { animation: none !important; }
    .ss-a { animation: none !important; }
    .ss-slide.is-in, .ss-slide.is-out { animation-duration: .2s !important; --in-t: none !important; --out-t: none !important; --delay: 0s !important; }
    .ss-stage .is-in { animation-name: ssIn !important; }
}
@media print { #mmc-ss { display: none !important; } }

.ss-btn-brand { width: 100%; margin-top: 4px; border: 2px dashed var(--ui-bd); background: var(--ui-hi); color: inherit; border-radius: 14px; padding: 12px; font: 800 13px 'Manrope', system-ui, sans-serif; cursor: pointer; }
.ss-btn-brand:hover { border-color: var(--acc); }
.ss-brand.has-logo .ss-brand-dot { display: none; }

/* ============ THÈME « MA CHARTE » : la charte doit se voir ============ */
/* couverture, sections et fin : fond plein aux couleurs de la charte, texte contrasté */
#mmc-ss[data-ss-theme="brand"] .ss-slide[data-layout="cover"], #mmc-ss[data-ss-theme="brand"] .ss-slide[data-layout="section"], #mmc-ss[data-ss-theme="brand"] .ss-slide[data-layout="end"] {
    background: var(--cover-bg); color: var(--cover-fg);
}
#mmc-ss[data-ss-theme="brand"] .ss-slide[data-layout="cover"] .ss-title, #mmc-ss[data-ss-theme="brand"] .ss-slide[data-layout="section"] .ss-title, #mmc-ss[data-ss-theme="brand"] .ss-slide[data-layout="end"] .ss-title { color: var(--cover-fg); background: none; -webkit-text-fill-color: currentColor; }
#mmc-ss[data-ss-theme="brand"] .ss-slide[data-layout="cover"] .ss-sub, #mmc-ss[data-ss-theme="brand"] .ss-slide[data-layout="section"] .ss-sub, #mmc-ss[data-ss-theme="brand"] .ss-slide[data-layout="end"] .ss-sub,
#mmc-ss[data-ss-theme="brand"] .ss-slide[data-layout="cover"] .ss-chips-label, #mmc-ss[data-ss-theme="brand"] .ss-slide[data-layout="section"] .ss-chips-label { color: var(--cover-fg); opacity: .85; }
#mmc-ss[data-ss-theme="brand"] .ss-slide[data-layout="cover"] .ss-chip, #mmc-ss[data-ss-theme="brand"] .ss-slide[data-layout="section"] .ss-chip { background: rgba(255,255,255,.16); color: var(--cover-fg); border-color: color-mix(in srgb, var(--cover-fg) 55%, transparent); }
#mmc-ss[data-ss-theme="brand"] .ss-slide[data-layout="cover"] .ss-rule, #mmc-ss[data-ss-theme="brand"] .ss-slide[data-layout="section"] .ss-rule { background: var(--cover-fg); box-shadow: none; opacity: .8; }
#mmc-ss[data-ss-theme="brand"] .ss-slide[data-layout="section"] .ss-secnum { -webkit-text-stroke-color: var(--cover-fg); }
#mmc-ss[data-ss-theme="brand"] .ss-slide[data-layout="cover"] .ss-logo-hero, #mmc-ss[data-ss-theme="brand"] .ss-slide[data-layout="end"] .ss-logo-hero { background: rgba(255,255,255,.95); padding: .35em .7em; border-radius: .5em; }
#mmc-ss[data-ss-theme="brand"] .ss-slide[data-layout="end"] .ss-btn { background: rgba(255,255,255,.16); color: var(--cover-fg); border-color: color-mix(in srgb, var(--cover-fg) 55%, transparent); }
#mmc-ss[data-ss-theme="brand"] .ss-slide[data-layout="end"] .ss-btn.pri { background: var(--cover-fg); color: var(--acc); }
/* barre de commandes lisible sur les diapos colorées */
#mmc-ss[data-ss-theme="brand"][data-ss-layout="cover"] .ss-top, #mmc-ss[data-ss-theme="brand"][data-ss-layout="section"] .ss-top, #mmc-ss[data-ss-theme="brand"][data-ss-layout="end"] .ss-top { color: var(--cover-fg); }
#mmc-ss[data-ss-theme="brand"][data-ss-layout="cover"] .ss-prog-bar, #mmc-ss[data-ss-theme="brand"][data-ss-layout="section"] .ss-prog-bar, #mmc-ss[data-ss-theme="brand"][data-ss-layout="end"] .ss-prog-bar { background: var(--cover-fg); box-shadow: none; }
/* diapos de contenu : bandeau de couleur en haut, corps encadré par la couleur de la charte */
#mmc-ss[data-ss-theme="brand"] .ss-slide[data-layout="text"]::before, #mmc-ss[data-ss-theme="brand"] .ss-slide[data-layout="split"]::before, #mmc-ss[data-ss-theme="brand"] .ss-slide[data-layout="media"]::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: .55em; background: linear-gradient(90deg, var(--nc, var(--acc)), var(--acc2)); z-index: 3;
}
#mmc-ss[data-ss-theme="brand"] .ss-body { border-left: .4em solid var(--nc, var(--acc)); }
#mmc-ss[data-ss-theme="brand"] .ss-title { color: var(--nc, var(--title-c)); }
#mmc-ss[data-ss-theme="brand"] .ss-head .ss-title { color: var(--title-c); }
#mmc-ss[data-ss-theme="brand"] .ss-underline { height: .3em; width: 4em; }

/* Page tournée : la page qui se découvre est déjà « posée » — pas d'animation d'entrée des éléments (sinon ils apparaissent après coup) */
.ss-stage[data-trans="page"] .ss-a { animation: none !important; opacity: 1 !important; transform: none !important; }

/* ============ INFOS SELON LE RÔLE DU NŒUD (tâche · événement · lieu · veille) ============ */
.ss-roles { display: flex; flex-wrap: wrap; gap: .7em; margin: 0 0 .9em; }
.ss-rc { flex: 1 1 15em; min-width: 0; padding: .7em .95em; border-radius: calc(var(--radius) * .7); background: var(--ui-hi); border: 2px solid var(--panel-bd); border-left: .4em solid var(--ac); color: var(--fg); font-size: .92em; line-height: 1.35; }
.ss-rc-h { font-size: .74em; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-bottom: .45em; }
.ss-steps { display: flex; flex-wrap: wrap; gap: .3em; margin-bottom: .5em; }
.ss-stp { padding: .22em .75em; border-radius: 999px; font-size: .8em; font-weight: 800; background: var(--chip-bg); color: var(--chip-fg); border: 2px solid var(--chip-bd); opacity: .8; }
.ss-stp.past { opacity: .6; }
.ss-stp.past::before { content: '✓ '; font-weight: 900; }
.ss-stp.cur { background: var(--ac); color: var(--acc-fg); border-color: transparent; opacity: 1; box-shadow: 0 .2em .8em -.3em var(--ac); }
.ss-rc-rows { display: flex; flex-wrap: wrap; gap: .4em; }
.ss-pill { display: inline-flex; align-items: center; gap: .3em; padding: .2em .7em; border-radius: 999px; font-size: .82em; font-weight: 700; background: var(--chip-bg); color: var(--chip-fg); border: 1.5px solid var(--chip-bd); text-decoration: none; }
.ss-pill.hot { background: color-mix(in srgb, #ef4444 16%, transparent); border-color: #ef4444; }
.ss-who { display: flex; flex-wrap: wrap; gap: .4em; margin-top: .55em; }
.ss-who-i { display: inline-flex; align-items: center; gap: .4em; font-size: .82em; font-weight: 700; }
.ss-who-i b { width: 1.9em; height: 1.9em; border-radius: 50%; display: grid; place-items: center; background: var(--ac); color: var(--acc-fg); font-size: .8em; }
.ss-big { font-family: var(--font-t); font-weight: var(--tw, 800); font-size: 1.45em; line-height: 1.2; color: var(--fg); }
.ss-sm { font-size: .8em; color: var(--dim); margin-top: .25em; }
.ss-art { display: block; padding: .4em .6em; margin-top: .35em; border-radius: .6em; background: var(--ui-hi); color: inherit; text-decoration: none; }
.ss-art b { display: block; font-size: .92em; line-height: 1.3; } .ss-art span { font-size: .75em; color: var(--dim); }
a.ss-art:hover { outline: 2px solid var(--ac); }
.ss-slide[data-layout="cover"] .ss-roles, .ss-slide[data-layout="section"] .ss-roles { justify-content: center; max-width: 46em; text-align: left; margin-top: 1em; }

.ss-text { width: 100%; box-sizing: border-box; padding: .55em .7em; border-radius: 10px; border: 1px solid rgba(128,128,128,.4); background: rgba(128,128,128,.12); color: inherit; font: inherit; }
.ss-text:focus { outline: 2px solid var(--acc); }