/* ---------- Simulateur façon Sunlite Suite 3 (couleurs fixes, sombres) ---------- */
.sl{position:relative;--pc:#4F9DEB}
.sl.dlgopen{min-height:560px}
.sl button{-webkit-tap-highlight-color:transparent}
.sl button:focus-visible,.sl input:focus-visible,.sl-xy:focus-visible,.sl-hf:focus-visible{outline:2px solid #F2A65A;outline-offset:2px}
.sl-crumb{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.06em;font-size:.86rem;color:#B8C3CF;min-width:0}
.sl-crumb b{font-weight:700}

/* Ruban */
.sl-rib{display:flex;flex-wrap:wrap;gap:5px;align-items:center;background:#171C24;border:1px solid #26303B;border-radius:7px;padding:5px 7px}
.sl-rib .rl{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.1em;font-size:.7rem;color:#8FA0B2;margin-right:4px}
.sl-ib{font:inherit;font-size:.8rem;background:#222A35;color:#DCE3EA;border:1px solid #33404D;border-radius:4px;padding:4px 9px;cursor:pointer}
.sl-ib:hover{border-color:#5CC8D1}

/* Onglets de pages */
.sl-tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:3px solid var(--pc);padding-bottom:0}
.sl-tab{--tc:#4F9DEB;font:inherit;font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.86rem;background:#1A2029;color:#DCE3EA;border:1px solid #33404D;border-bottom:0;border-top:3px solid var(--tc);border-radius:6px 6px 0 0;padding:5px 11px 4px;cursor:pointer;display:inline-flex;gap:5px;align-items:center}
.sl-tab[aria-selected="true"]{background:var(--tc);color:#0B0F14;border-color:var(--tc)}
.sl-tab .st{color:#F2C14E;font-size:.8rem}
.sl-tab[aria-selected="true"] .st{color:#0B0F14}
.sl-tab.add{border-top-color:#5A606C;color:#B8C3CF;background:transparent;border-style:dashed}

/* Barre d'outils de page */
.sl-tool{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
.sl-tb{font:inherit;font-family:var(--f-display);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:.84rem;display:inline-flex;align-items:center;gap:5px;background:#1A232D;color:#DCE3EA;border:1px solid #33404D;border-radius:5px;padding:6px 10px;cursor:pointer}
.sl-tb:hover{border-color:#5CC8D1}
.sl-tb.on{background:#3A3010;border-color:#F2C14E;color:#FFE28A}
.sl-tb.sw{color:#FF8A80}
.sl-note{font-size:.84rem;color:#F2C089}
.sl-fade{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;background:#0B1015;border:1px solid #26303B;border-radius:6px;padding:4px 8px}
.sl-tm{display:inline-flex;flex-direction:column;gap:1px;align-items:center}
.sl-tm .tl{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.05em;font-size:.66rem;color:#8FA0B2}
.sl-tm output,.sl-st output{font-family:var(--f-mono);font-size:.76rem;color:#F4F6F8}

/* Corps : potards de page + boutons */
.sl-body{display:flex;gap:10px;align-items:flex-start}
.sl-body.nod .sl-dials{display:none}
.sl-dials{flex:0 0 84px;display:grid;gap:4px;justify-items:center;background:#0B1015;border:1px solid #26303B;border-radius:8px;padding:6px 2px}
.sl-area{flex:1 1 auto;display:grid;gap:10px;min-width:0}
.sl-grp{min-width:0}
.sl-bs{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:6px}
.sl-bw{position:relative;display:block;min-width:0}
.sl-b{font:inherit;width:100%;min-height:54px;text-align:left;background:#20262F;color:#E9EDF2;border:1px solid #39424E;border-radius:6px;padding:6px 26px 6px 8px;cursor:pointer;font-size:.86rem;font-weight:700;line-height:1.2;position:relative;overflow:hidden;word-break:break-word}
.sl-b small{display:block;font-weight:400;font-size:.68rem;color:#8FA0B2;margin-top:2px}
.sl-b.sw{color:#FF8A80}
.sl-b:hover{border-color:#5CC8D1}
.sl-b.on{background:#E8F0F8;color:#0B0F14;border-color:#FFFFFF;box-shadow:0 0 0 2px var(--pc)}
.sl-b.on small{color:#3A4552}
.sl-b.sw.on{color:#B3261E}
.sl-b .kb{position:absolute;left:8px;bottom:5px;font-family:var(--f-mono);font-size:.64rem;padding:0 4px;border-radius:3px;background:#3A444F;color:#F4F6F8}
.sl-b.on .kb{background:#0B0F14}
.sl-b .kb.fl{background:#7A4A12;color:#FFE28A}
.sl-b:has(.kb){padding-bottom:20px}
.sl-mn{position:absolute;top:3px;right:3px;font:inherit;font-weight:700;width:22px;height:24px;line-height:1;background:transparent;color:#8FA0B2;border:0;border-radius:4px;cursor:pointer}
.sl-mn:hover{background:#33404D;color:#F4F6F8}

/* Bas : clavier + master */
.sl-mst{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;background:#0B1015;border:1px solid #26303B;border-radius:8px;padding:7px 9px}
.sl-kcs{display:flex;flex-wrap:wrap;gap:5px;align-items:center;min-width:0}
.sl-kcs .mq-lab{margin:0 4px 0 0}
.sl-kc{font:inherit;font-family:var(--f-mono);font-weight:600;font-size:.86rem;min-width:44px;background:#3A444F;color:#F4F6F8;border:0;border-bottom:3px solid #161B22;border-radius:5px;padding:4px 7px 3px;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;text-align:center;line-height:1.1}
.sl-kc small{display:block;font-family:var(--f-body);font-size:.6rem;color:#B8C3CF;font-weight:400;max-width:7em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-kc.dn{background:#F2A65A;color:#1A1006;border-bottom-width:1px;transform:translateY(2px)}
.sl-kc.dn small{color:#3A2410}
.sl-mr{display:flex;align-items:center;gap:8px;flex:1 1 220px;justify-content:flex-end;min-width:0}
.sl-mr .mq-lab{margin:0}
.sl-hf{position:relative;height:26px;flex:1 1 120px;max-width:220px;min-width:90px;cursor:ew-resize;touch-action:none;outline:none;border-radius:4px}
.sl-hf .tr{position:absolute;left:8px;right:8px;top:10px;height:6px;background:#05080C;border:1px solid #26303B;border-radius:3px}
.sl-hf .fi{position:absolute;left:0;top:10px;height:6px;background:#F2C14E;border-radius:3px;opacity:.8}
.sl-hf .cp{position:absolute;top:3px;width:14px;height:20px;margin-left:-7px;background:#DCE3EA;border-radius:3px;border-right:2px solid #8FA0B2;box-shadow:0 2px 4px rgba(0,0,0,.5)}
.sl-mv{font-family:var(--f-mono);font-size:.76rem;color:#F4F6F8;min-width:4ch;text-align:right}
.sl-bo{font:inherit;font-family:var(--f-display);font-weight:700;letter-spacing:.06em;font-size:.9rem;background:#3A1A18;color:#FFB4AB;border:1px solid #7A2A22;border-radius:5px;padding:6px 12px;cursor:pointer}
.sl-bo.on{background:#D93A2E;color:#fff;border-color:#FF8A80}

/* Éditeur de bouton */
.sl-ed{display:grid;gap:9px;background:#0B1015;border:1px solid #3B4A5A;border-radius:8px;padding:8px;min-width:0}
.sl-edh{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 10px;font-size:.86rem;color:#DCE3EA}
.sl-edh b{color:#F2C14E}
.sbt.pri{background:#1B5E3A;border-color:#63CF93;color:#E9FFF1}
.sl-edfix .mq-lab{margin-bottom:4px}
.sl-edw{min-width:0}
.sl-fnbar{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-bottom:8px}
.sl-fnbar .mq-lab{margin:0 4px 0 0}
.sl-fnbar small{flex-basis:100%;font-size:.76rem;color:#8FA0B2}
.sl-fn{font:inherit;font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.8rem;border-radius:4px;padding:4px 9px;cursor:pointer;border:1px solid transparent}
.fn-off{background:#2A313B;color:#B8C3CF}
.fn-on{background:#1E4D33;color:#A9F0C6}
.fn-es{background:#173C5E;color:#A8D4FF}
.fn-et{background:#3E2558;color:#DDB8FF}
.sl-fn.armed{border-color:#F2A65A;box-shadow:0 0 0 2px #F2A65A}
.sl-chs{display:flex;gap:4px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.sl-ch{flex:0 0 62px;display:grid;justify-items:center;gap:4px;background:#121921;border:1px solid #26303B;border-radius:6px;padding:4px 2px 5px}
.sl-chh{font:inherit;width:58px;font-size:.66rem;font-weight:700;line-height:1.15;border-radius:4px;padding:3px 2px;cursor:pointer;border:1px solid transparent;text-align:center;word-break:break-word}
.sl-chh small{display:block;font-weight:400;font-size:.6rem;opacity:.85}
.sl-ch .v{font-family:var(--f-mono);font-size:.64rem;color:#F4F6F8;text-align:center;min-height:1.2em;max-width:58px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-ch .ad{font-family:var(--f-mono);font-size:.58rem;color:#6F7E8E;min-height:1.1em}
.fd.off{opacity:.35;cursor:not-allowed}
.sl-pre{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start}
.sl-sws{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.sl-sw{height:34px;border:2px solid #0B1015;border-radius:6px;cursor:pointer;box-shadow:0 0 0 1px #39424E}
.sl-sw:hover{box-shadow:0 0 0 2px #F4F6F8}
.sl-mt{margin-top:10px}
.sl-xy{position:relative;width:100%;max-width:260px;aspect-ratio:9/8;background:#05080C;border:1px solid #33404D;border-radius:6px;touch-action:none;cursor:crosshair;outline:none;overflow:hidden;background-image:linear-gradient(#141B23 1px,transparent 1px),linear-gradient(90deg,#141B23 1px,transparent 1px);background-size:12.5% 12.5%}
.sl-xy .ax{position:absolute;background:#26303B}
.sl-xy .ax-x{left:0;right:0;top:50%;height:1px}
.sl-xy .ax-y{top:0;bottom:0;left:50%;width:1px}
.sl-xy .yl{position:absolute;left:6px;font-size:.62rem;color:#6F7E8E;font-family:var(--f-display);text-transform:uppercase;letter-spacing:.06em}
.sl-xy .yl.t{top:4px}
.sl-xy .yl.b{bottom:4px}
.sl-xy .xl{position:absolute;right:6px;top:calc(50% + 3px);font-size:.62rem;color:#6F7E8E;font-family:var(--f-display);text-transform:uppercase;letter-spacing:.06em}
.sl-xy .dot{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#F2C14E;border:2px solid #0B0F14;box-shadow:0 0 0 2px #F2C14E,0 0 12px rgba(242,193,78,.6);left:50%;top:50%}
.sl-xy.off{opacity:.4;cursor:not-allowed}
.sl-xy.off .dot{display:none}
.sl-es{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:12px;align-items:start}
.sl-esl{min-width:0}
.sl-stw{overflow-x:auto}
.mq-tab.sl-st{min-width:0}
.sl-st td{vertical-align:middle}
.sl-st .sbt{padding:4px 8px;font-size:.78rem}
.sl-hint{font-size:.78rem;color:#8FA0B2;margin:.4rem 0 0;line-height:1.4}
.sl-tl{display:grid;gap:4px;margin:10px 0 8px;background:#05080C;border:1px solid #26303B;border-radius:6px;padding:6px}
.sl-tlr{display:grid;grid-template-columns:6.5rem minmax(30px,1fr) auto auto;gap:6px;align-items:center;font-size:.76rem;padding:2px 4px;border-radius:4px}
.sl-tlr.cur{background:#1A232D}
.sl-tlr .nm{color:#DCE3EA;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-tlr .bar{height:10px;border-radius:3px;background:var(--c);opacity:.85}
.sl-tlr .hs{font-family:var(--f-mono);font-size:.66rem;color:#8FA0B2}
.sl-x{font:inherit;width:22px;height:22px;background:#3A1A18;color:#FFB4AB;border:0;border-radius:4px;cursor:pointer;line-height:1}

/* Dialogues */
.sl-dlg{position:absolute;inset:0;z-index:4;background:rgba(5,8,12,.78);border-radius:12px;padding:12px;overflow:auto;display:flex;align-items:flex-start;justify-content:center}
.sl-box{width:100%;max-width:600px;background:#161C24;border:1px solid #3B4A5A;border-radius:9px;padding:12px;box-shadow:0 12px 40px rgba(0,0,0,.6);display:grid;gap:9px}
.sl-box h4{margin:0;font-family:var(--f-display);text-transform:uppercase;letter-spacing:.06em;font-size:1rem;color:#F2C14E}
.sl-np{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:12px;align-items:start}
.sl-lib{display:grid;gap:4px;align-content:start;min-width:0}
.sl-npr{display:grid;gap:8px;align-content:start;min-width:0}
.sl-fold{font-size:.8rem;color:#B8C3CF;font-weight:700;padding:2px 2px}
.sl-li{font:inherit;width:100%;text-align:left;background:#1F2630;color:#DCE3EA;border:1px solid #33404D;border-radius:5px;padding:5px 8px;cursor:pointer;font-size:.84rem;line-height:1.25}
.sl-li small{display:block;font-size:.68rem;color:#8FA0B2}
.sl-li:hover{border-color:#5CC8D1}
.sl-li.on{background:#11323A;border-color:#5CC8D1;color:#9FE3EA}
.sl-li.sl-fold{background:transparent;border-style:dashed;color:#8FA0B2}
.sl-fl{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:.84rem;color:#B8C3CF}
.sl-fl input{font:inherit;font-size:.92rem;width:6.5rem;padding:5px 7px;background:#05080C;color:#F4F6F8;border:1px solid #33404D;border-radius:5px}
.sl-fl input[type="text"]{width:11rem}
.sl-fl output{font-family:var(--f-mono);font-size:.84rem;color:#F4F6F8;min-width:2ch;text-align:center}
.sl-warn{margin:0;font-size:.8rem;color:#FFB4AB;background:#2A1311;border:1px solid #7A2A22;border-radius:5px;padding:5px 8px}
.sl-okm{margin:0;font-size:.8rem;color:#A9F0C6}
.sl-dbtn{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;border-top:1px solid #26303B;padding-top:9px}
.sl-rad{border:1px solid #33404D;border-radius:6px;padding:6px 10px 8px;margin:0;display:grid;gap:5px}
.sl-rad legend{font-size:.76rem;color:#8FA0B2;padding:0 4px}
.sl-rad label,.sl-chk{display:flex;gap:7px;align-items:baseline;font-size:.86rem;color:#DCE3EA;cursor:pointer;flex-wrap:wrap}
.sl-rad small,.sl-chk small{font-size:.72rem;color:#8FA0B2}
.sl-kk{font-family:var(--f-mono);background:#3A444F;color:#F4F6F8;border-radius:4px;padding:1px 7px}
.sl-menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.sl-menu .sbt{text-align:left}
.sl-prio{display:grid;gap:4px}
.sl-prio .sl-li b{color:#F2C14E;margin-right:4px;font-family:var(--f-mono)}
.sl-sa{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:12px;align-items:start}
.sl-sal{display:grid;gap:4px}
.sl-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.sl-slot{font:inherit;text-align:left;font-size:.74rem;background:#11161D;color:#8FA0B2;border:1px dashed #33404D;border-radius:4px;padding:4px 6px;cursor:pointer;min-height:2.6em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-slot b{font-family:var(--f-mono);color:#6F7E8E;margin-right:5px}
.sl-slot i{font-style:normal;opacity:.6}
.sl-slot.full{border-style:solid;color:#DCE3EA;background:#1A232D}
.sl-slot.cur{border-color:#63CF93;box-shadow:inset 0 0 0 1px #63CF93}
.sl-ifc{display:grid;gap:7px;background:#0E1218;border:1px solid #33404D;border-radius:8px;padding:9px}
.sl-ifl{display:flex;align-items:center;gap:8px;font-size:.8rem;color:#B8C3CF}
.sl-ifl b{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.08em;color:#DCE3EA}
.sl-led{width:10px;height:10px;border-radius:50%;background:#2A313B;border:1px solid #39424E}
.sl-led.on{background:#63CF93;box-shadow:0 0 8px #63CF93}
.sl-lcd{font-family:var(--f-mono);font-size:.84rem;background:#122014;color:#9FE8A8;border:1px solid #2F4A33;border-radius:4px;padding:6px 9px;letter-spacing:.04em}

/* Calculateur du module 04 */
#slCalc .tbl{max-height:260px;overflow:auto}

@media (max-width:640px){
  .sl-body{flex-direction:column;align-items:stretch}
  .sl-dials{flex:none;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 10px}
  .sl-dials .mq-lab{flex-basis:100%;text-align:center;margin:0}
  .sl-bs{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
  .sl-pre,.sl-es,.sl-np,.sl-sa{grid-template-columns:minmax(0,1fr)}
  .sl-xy{max-width:300px;margin-inline:auto}
  .sl-menu{grid-template-columns:minmax(0,1fr)}
  .sl-dlg{position:static;padding:0;background:none;overflow:visible;display:block}
  .sl.dlgopen>:not(.sl-dlg):not(.mq-status){display:none!important}
  .sl-box{padding:10px;box-shadow:none}
  .sl.dlgopen{min-height:0}
  .sl-mr{justify-content:flex-start}
  .sl-tab{font-size:.8rem;padding:5px 8px 4px}
  .sl-tlr{grid-template-columns:5.2rem minmax(20px,1fr) auto auto}
}
@media (prefers-reduced-motion: reduce){
  .sl-kc.dn{transform:none}
}

/* ---------- Mode Défis (couleurs de la page, thème clair et sombre) ---------- */
.df-head{display:grid;gap:4px 14px;margin-top:.5rem}
.df-head .ls-label{margin-top:6px}
@media (min-width:600px){.df-head{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}.df-head .ls-label{margin-top:0}}
.df-crit{margin-top:.5rem}
.df-crit li{padding:6px 10px;font-size:.95rem}
.df-brief{margin:0;padding:10px 12px;border-left:3px solid var(--accent);background:var(--surface-2);border-radius:0 8px 8px 0;font-size:.98rem;line-height:1.5}
.df-best{color:var(--accent);letter-spacing:.1em;font-size:1rem}
.df-tgt{margin-top:6px}
.sl-tgt{position:relative;max-width:360px;background:#06090D;border:1px solid #1F2831;border-radius:10px;overflow:hidden}
.sl-tgt canvas{display:block;width:100%;height:auto}
.df-cap{margin:.35rem 0 0;font-size:.86rem;color:var(--muted)}
.df-help{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.df-help .btn:disabled{opacity:.55;cursor:default}
.df-rule{margin:.4rem 0 0;font-size:.8rem;color:var(--muted)}
.df-hints{margin:.6rem 0 0;padding:0;list-style:none;display:grid;gap:6px;counter-reset:dh}
.df-hints li{counter-increment:dh;padding:8px 10px 8px 2.2rem;position:relative;border-radius:8px;background:var(--cyan-soft);font-size:.93rem;line-height:1.45;outline:none}
.df-hints li::before{content:counter(dh);position:absolute;left:10px;top:8px;width:1.2rem;height:1.2rem;border-radius:50%;background:var(--cyan);color:var(--surface);font-size:.75rem;font-weight:700;display:grid;place-items:center}
.df-sol{margin-top:10px;padding:10px 12px;border:1px dashed var(--line);border-radius:8px;outline:none}
.df-sol ol{margin:.3rem 0 0;padding-left:1.3rem;display:grid;gap:6px}
.df-sol li{line-height:1.5}
.df-sol li .what{display:block;font-size:.88rem;color:var(--muted)}
.df-list button{grid-template-columns:1.8rem minmax(0,1fr) auto}
.df-list .ck{color:var(--accent);letter-spacing:.06em;white-space:nowrap}

/* ---------- Bilan de chapitre ---------- */
.sl-recap{margin-top:.8rem;padding:12px 14px;border:2px solid var(--ok);border-radius:10px;background:var(--surface)}
.sl-recap .rc-t{margin:0;font-family:var(--f-display);text-transform:uppercase;letter-spacing:.06em;font-weight:700;font-size:1.05rem;color:var(--ok)}
.sl-recap ul{margin:.3rem 0 0;padding-left:1.2rem;font-size:.95rem;line-height:1.5}
.sl-recap .cmds{margin:.4rem 0 0}
.sl-recap .cmd{padding:7px 10px}

/* ---------- Aide clavier ---------- */
.sl-kh{margin-top:10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:8px 12px}
.sl-kh summary{cursor:pointer;font-family:var(--f-display);text-transform:uppercase;letter-spacing:.06em;font-weight:700;font-size:.9rem;color:var(--muted)}
.sl-kh p{margin:.5rem 0 0;font-size:.9rem;color:var(--muted)}
.sl-kh .cmds{margin:.5rem 0 .2rem}
.sl-kh .cmd{padding:7px 10px}
.sl-kh .cmd .what{font-size:.88rem}
@media (max-width:640px){
  .sl-tgt{max-width:none}
}