/* Siffle Juste – design « Nuit de match » – © 2026 Ghislain DEMONDA – Tous droits réservés. */
/* Polices Cabinet Grotesk et Satoshi (Fontshare, licence ITF FFL), auto-hébergées. */
@font-face{font-family:"SJ Cabinet";src:url(/assets/fonts/t2/cabinet-grotesk-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"SJ Cabinet";src:url(/assets/fonts/t2/cabinet-grotesk-800.woff2) format("woff2");font-weight:800 900;font-style:normal;font-display:swap}
@font-face{font-family:"SJ Satoshi";src:url(/assets/fonts/t2/satoshi-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"SJ Satoshi";src:url(/assets/fonts/t2/satoshi-500.woff2) format("woff2");font-weight:500 600;font-style:normal;font-display:swap}
@font-face{font-family:"SJ Satoshi";src:url(/assets/fonts/t2/satoshi-700.woff2) format("woff2");font-weight:650 900;font-style:normal;font-display:swap}
html:root[data-theme],html:root{--bg:#0A0B0D;--surface:#121418;--surface-2:#191C22;--border:#2C3139;--text:#EEF1F4;--muted:#A3AAB4;--faint:#8C939D;--ok:#8FE36B;--ko:#FF8AA8;--warn:#FFB65E;--okbg:#15230F;--kobg:#2B141C;--warnbg:#2A1F10;--accent:#C6F432;--accent-h:#D6FA66;--accent-bg:#1B220C;--on-accent:#0A0B0D;--header-bg:#0A0B0D;--header-text:#EEF1F4;--shadow:0 20px 40px -28px #000;--t2-scrim:#000;--t2-hdr:rgba(10,11,13,.82);--t2-opt:#0E1013;--t2-ink:#050607;--t2-hi:var(--accent);--t2-pitch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2800 1500' fill='none' stroke='%23262A31' stroke-width='3'%3E%3Crect width='2800' height='1500'/%3E%3Cpath d='M1400 0v1500M0 505h580v490H0M2800 505h-580v490h580M0 90h300a675 675 0 0 1 0 1320H0M2800 90h-300a675 675 0 0 0 0 1320h300'/%3E%3Ccircle cx='1400' cy='750' r='180'/%3E%3Ccircle cx='1400' cy='750' r='60'/%3E%3Ccircle cx='580' cy='750' r='180'/%3E%3Ccircle cx='2220' cy='750' r='180'/%3E%3Ccircle cx='157' cy='750' r='23' stroke='%234E5A23'/%3E%3Ccircle cx='2643' cy='750' r='23' stroke='%234E5A23'/%3E%3C/svg%3E");--t2-fchk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C6F432' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E");--t2-2:#3FE3F5;--t2-ctl:#666D78;--t2-r:14px;--t2-ease:cubic-bezier(.2,.7,.2,1);--t2-a10:color-mix(in srgb,var(--accent) 10%,transparent);--t2-a13:color-mix(in srgb,var(--accent) 13%,transparent);--t2-a18:color-mix(in srgb,var(--accent) 18%,transparent);--t2-glow:color-mix(in srgb,var(--accent) 28%,transparent);--t2-a45:color-mix(in srgb,var(--accent) 45%,transparent);--t2-c13:color-mix(in srgb,var(--t2-2) 13%,transparent);--t2-glow-2:color-mix(in srgb,var(--t2-2) 22%,transparent);--t2-c30:color-mix(in srgb,var(--t2-2) 30%,transparent);--t2-fd:"SJ Cabinet","SJ Satoshi",system-ui,sans-serif;--t2-fb:"SJ Satoshi",system-ui,-apple-system,"Segoe UI",sans-serif;color-scheme:dark}
html:root[data-theme][data-accent="bleu"]{--accent:#6CC4FF;--accent-h:#96D5FF;--accent-bg:#0F1E2B}
html:root[data-theme][data-accent="orange"]{--accent:#FFA24D;--accent-h:#FFBC7D;--accent-bg:#2A1A0C}
html:root[data-theme][data-accent="violet"]{--accent:#C9A2FF;--accent-h:#DAC0FF;--accent-bg:#211A2E}
html:root[data-theme][data-contrast="high"]{--bg:#000;--surface:#0B0C0E;--surface-2:#15171B;--text:#FFF;--muted:#E6E9ED;--faint:#C9CED5;--border:#8A919B;--t2-ctl:#AEB5BF}
/* Variante claire « Jour de match » : Clair, ou Automatique avec système clair. */
html:root[data-theme="light"]{--bg:#F3F5F7;--surface:#FFFFFF;--surface-2:#EAEEF2;--border:#D2D8DF;--text:#0E1116;--muted:#4B535E;--faint:#5B636E;--ok:#276F0A;--ko:#B3134A;--warn:#8F4A00;--okbg:#E6F4DC;--kobg:#FBE6EC;--warnbg:#FBEEDD;--accent:#436B00;--accent-h:#34540A;--accent-bg:#EBF3D6;--on-accent:#FFFFFF;--header-bg:#FFFFFF;--header-text:#0E1116;--shadow:0 1px 2px rgba(14,17,22,.05),0 14px 30px -24px rgba(14,17,22,.35);--t2-scrim:rgba(14,17,22,.3);--t2-ink:#0E1116;--t2-hdr:rgba(243,245,247,.86);--t2-opt:#F8F9FB;--t2-hi:#C6F432;--t2-on-hi:#0A0B0D;--t2-lo:#3FE3F5;--t2-2:#006B7A;--t2-ctl:#838B96;--t2-glow:color-mix(in srgb,var(--t2-hi) 45%,transparent);--t2-glow-2:color-mix(in srgb,var(--t2-2) 16%,transparent);--t2-pitch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2800 1500' fill='none' stroke='%23D6DCE3' stroke-width='3'%3E%3Crect width='2800' height='1500'/%3E%3Cpath d='M1400 0v1500M0 505h580v490H0M2800 505h-580v490h580M0 90h300a675 675 0 0 1 0 1320H0M2800 90h-300a675 675 0 0 0 0 1320h300'/%3E%3Ccircle cx='1400' cy='750' r='180'/%3E%3Ccircle cx='1400' cy='750' r='60'/%3E%3Ccircle cx='580' cy='750' r='180'/%3E%3Ccircle cx='2220' cy='750' r='180'/%3E%3Ccircle cx='157' cy='750' r='23' stroke='%23B5CF6E'/%3E%3Ccircle cx='2643' cy='750' r='23' stroke='%23B5CF6E'/%3E%3C/svg%3E");--t2-fchk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23436B00' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E");color-scheme:light}
html:root[data-theme="light"][data-accent="bleu"]{--accent:#0A5CA0;--accent-h:#084A82;--accent-bg:#E3EFF9;--t2-hi:#6CC4FF}
html:root[data-theme="light"][data-accent="orange"]{--accent:#A34700;--accent-h:#823800;--accent-bg:#FBEBDD;--t2-hi:#FFA24D}
html:root[data-theme="light"][data-accent="violet"]{--accent:#6B3DBF;--accent-h:#56309C;--accent-bg:#EFE8FA;--t2-hi:#C9A2FF}
html:root[data-theme="light"][data-contrast="high"]{--bg:#FFFFFF;--surface:#FFFFFF;--surface-2:#EEF1F4;--text:#000;--muted:#1D232B;--faint:#2E353E;--border:#5B636E;--t2-ctl:#3E454F}
@media (prefers-color-scheme:light){
html:root[data-theme="auto"]{--bg:#F3F5F7;--surface:#FFFFFF;--surface-2:#EAEEF2;--border:#D2D8DF;--text:#0E1116;--muted:#4B535E;--faint:#5B636E;--ok:#276F0A;--ko:#B3134A;--warn:#8F4A00;--okbg:#E6F4DC;--kobg:#FBE6EC;--warnbg:#FBEEDD;--accent:#436B00;--accent-h:#34540A;--accent-bg:#EBF3D6;--on-accent:#FFFFFF;--header-bg:#FFFFFF;--header-text:#0E1116;--shadow:0 1px 2px rgba(14,17,22,.05),0 14px 30px -24px rgba(14,17,22,.35);--t2-scrim:rgba(14,17,22,.3);--t2-ink:#0E1116;--t2-hdr:rgba(243,245,247,.86);--t2-opt:#F8F9FB;--t2-hi:#C6F432;--t2-on-hi:#0A0B0D;--t2-lo:#3FE3F5;--t2-2:#006B7A;--t2-ctl:#838B96;--t2-glow:color-mix(in srgb,var(--t2-hi) 45%,transparent);--t2-glow-2:color-mix(in srgb,var(--t2-2) 16%,transparent);--t2-pitch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2800 1500' fill='none' stroke='%23D6DCE3' stroke-width='3'%3E%3Crect width='2800' height='1500'/%3E%3Cpath d='M1400 0v1500M0 505h580v490H0M2800 505h-580v490h580M0 90h300a675 675 0 0 1 0 1320H0M2800 90h-300a675 675 0 0 0 0 1320h300'/%3E%3Ccircle cx='1400' cy='750' r='180'/%3E%3Ccircle cx='1400' cy='750' r='60'/%3E%3Ccircle cx='580' cy='750' r='180'/%3E%3Ccircle cx='2220' cy='750' r='180'/%3E%3Ccircle cx='157' cy='750' r='23' stroke='%23B5CF6E'/%3E%3Ccircle cx='2643' cy='750' r='23' stroke='%23B5CF6E'/%3E%3C/svg%3E");--t2-fchk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23436B00' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E");color-scheme:light}
html:root[data-theme="auto"][data-accent="bleu"]{--accent:#0A5CA0;--accent-h:#084A82;--accent-bg:#E3EFF9;--t2-hi:#6CC4FF}
html:root[data-theme="auto"][data-accent="orange"]{--accent:#A34700;--accent-h:#823800;--accent-bg:#FBEBDD;--t2-hi:#FFA24D}
html:root[data-theme="auto"][data-accent="violet"]{--accent:#6B3DBF;--accent-h:#56309C;--accent-bg:#EFE8FA;--t2-hi:#C9A2FF}
html:root[data-theme="auto"][data-contrast="high"]{--bg:#FFFFFF;--surface:#FFFFFF;--surface-2:#EEF1F4;--text:#000;--muted:#1D232B;--faint:#2E353E;--border:#5B636E;--t2-ctl:#3E454F}
}
html:root body{font-family:var(--t2-fb);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
html:root h1,html:root h2{font-family:var(--t2-fd);font-weight:800;text-transform:uppercase;letter-spacing:.01em;line-height:1.08;text-wrap:balance}
html:root h3{font-family:var(--t2-fd);font-weight:700;letter-spacing:.01em;line-height:1.2}
html:root :is(h1.h-q,h2.meta,h2.anim-q,h2.qtext,h1.qtext){text-transform:none;font-family:var(--t2-fb);letter-spacing:0}
html:root h2.meta{font-weight:600;font-size:.84rem}
html:root :focus-visible{outline:3px solid var(--t2-2);outline-offset:3px}
html:root :is(main,h1,h2,[tabindex="-1"]):focus-visible{outline:none}
::selection{background:var(--accent);color:var(--on-accent)}
.meta{color:var(--muted)}
.skip:focus{background:var(--accent)!important;color:var(--on-accent)!important;border-radius:999px;font-weight:700}
.sj-header{background:var(--header-bg);color:var(--header-text);border-bottom:1px solid var(--border);min-height:72px;padding:10px max(20px,calc((100% - 1200px)/2));gap:12px 18px}
.sj-header .sj-brand{font-family:var(--t2-fd);font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:1.3rem;line-height:1.1;color:var(--text)}
.sj-header .sj-brand svg{width:34px;height:34px;padding:5px;border-radius:9px;background:var(--t2-hi);color:var(--t2-on-hi,var(--on-accent));box-shadow:0 0 22px -4px var(--t2-glow)}
.sj-header .sj-tagline{display:block;font-family:var(--t2-fb);text-transform:none;letter-spacing:0;font-weight:500;font-size:.74rem;color:var(--muted);opacity:1}
.sj-header nav.top{gap:2px;font-size:.94rem}
.sj-header nav.top a{padding:8px 11px;border-radius:8px;border:0;color:var(--muted);font-weight:500;transition:color .2s,background .2s}
.sj-header nav.top a:hover{color:var(--text);background:var(--surface)}
.sj-header nav.top a:focus-visible{color:var(--text)}
.sj-header .sj-theme-btn,.sj-header .sj-login>summary,.sj-header .btn-app{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;font:600 .92rem/1 var(--t2-fb);white-space:nowrap;transition:border-color .2s,color .2s,transform .2s var(--t2-ease),box-shadow .25s}
.sj-header .sj-theme-btn{background:transparent;border:1px solid var(--t2-ctl);color:var(--text)}
.sj-header .sj-theme-btn:hover,.sj-header .sj-theme-btn[aria-expanded="true"]{border-color:var(--t2-2);color:var(--t2-2)}
.sj-header .btn-app{background:var(--accent);color:var(--on-accent);border:1px solid var(--accent);font-weight:700}
.sj-header .btn-app:hover{transform:translateY(-2px);box-shadow:0 10px 30px -8px var(--t2-glow),0 0 0 4px var(--t2-a18)}
.sj-header .sj-theme-btn:focus-visible,.sj-header .btn-app:focus-visible{outline:3px solid var(--t2-2);outline-offset:3px}
.sj-back{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border:1px solid var(--t2-ctl);border-radius:999px;color:var(--t2-2)!important;font-weight:700;font-size:.88rem;opacity:1}
.sj-back:hover{border-color:var(--t2-2);text-decoration:none!important}
.userbar{color:var(--muted)}
.userbar a{color:var(--accent)!important}
.sj-header .sj-login>summary{background:var(--surface);border:1px solid var(--t2-ctl);color:var(--text)}
.sj-header .sj-login>summary::after{content:"";width:8px;height:8px;margin:-3px 0 0 2px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .2s}
.sj-header .sj-login>summary:hover,.sj-header .sj-login[open]>summary{border-color:var(--t2-2)}
.sj-header .sj-login[open]>summary::after{transform:translateY(4px) rotate(225deg)}
.sj-header .sj-login>summary:focus-visible{outline:3px solid var(--t2-2);outline-offset:3px}
.sj-login-menu{width:340px;max-width:calc(100vw - 24px);top:calc(100% + 10px);background:var(--surface);border:1px solid var(--border);border-radius:var(--t2-r);padding:8px;z-index:60;box-shadow:0 30px 60px -20px var(--t2-scrim),0 0 0 1px var(--t2-c13)}
.sj-login[open] .sj-login-menu{animation:t2-drop .18s var(--t2-ease)}
.sj-header .sj-login-menu a{display:grid;grid-template-columns:34px 1fr;column-gap:12px;align-items:start;padding:12px;border-radius:10px;color:var(--text);outline-offset:-3px}
.sj-login-menu a::before{content:"";grid-area:1/1/3/2;width:34px;height:34px;border-radius:9px;background:var(--t2-c13);box-shadow:inset 0 0 0 1px var(--t2-c30)}
.sj-login-menu a::after{content:"";grid-area:1/1/3/2;width:18px;height:18px;margin:8px;background:var(--t2-2);mask:var(--t2-ico) center/contain no-repeat}
.sj-login-menu a:nth-child(1){--t2-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1-4 4-6 8-6s7 2 8 6'/%3E%3C/svg%3E")}
.sj-login-menu a:nth-child(2){--t2-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M2 20c1-3.5 3.5-5 7-5s6 1.5 7 5M16 14c3 0 5 1.5 6 5'/%3E%3C/svg%3E")}
.sj-login-menu a:nth-child(3){--t2-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16v12H4zM8 20h8M12 16v4M8 9l3 3 5-5'/%3E%3C/svg%3E")}
.sj-login-menu a:hover,.sj-login-menu a:focus-visible{background:var(--surface-2)}
.sj-login-menu strong,.sj-login-menu small{grid-column:2}
.sj-login-menu strong{font-size:.95rem;line-height:1.3}
.sj-login-menu small{color:var(--muted);font-size:.82rem;line-height:1.4;margin-top:2px}
@keyframes t2-drop{from{opacity:0;transform:translateY(-6px)}
}
.theme-panel .card,.theme-panel{border-color:var(--border)}
.sj-theme .seg{border-color:var(--t2-ctl);border-radius:999px}
.sj-theme .seg button{background:var(--surface);color:var(--text);padding:8px 14px;font-weight:600}
.sj-theme .seg button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.sj-theme .dot{outline-color:var(--t2-ctl)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--t2-r);box-shadow:var(--shadow)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border-radius:999px;font:700 .94rem/1.2 var(--t2-fb);background:var(--accent);color:var(--on-accent);border:1px solid var(--accent);transition:transform .2s var(--t2-ease),box-shadow .25s var(--t2-ease),background .2s,border-color .2s,color .2s}
.btn:hover{background:var(--accent-h);border-color:var(--accent-h);transform:translateY(-2px);box-shadow:0 10px 30px -8px var(--t2-glow),0 0 0 4px var(--t2-a18)}
.btn.sec{background:transparent;color:var(--text);border-color:var(--t2-ctl)}
.btn.sec:hover{background:transparent;border-color:var(--t2-2);color:var(--t2-2);box-shadow:none}
.btn.ko{background:transparent;color:var(--ko);border-color:var(--ko)}
.btn.ko:hover{background:var(--kobg);box-shadow:none}
.btn.sm{min-height:34px;padding:0 13px;font-size:.82rem}
.btn:disabled{transform:none;box-shadow:none}
.btn:disabled:hover{background:var(--accent);border-color:var(--accent)}
.btn.sec:disabled:hover{background:transparent;border-color:var(--t2-ctl);color:var(--text)}
input,select,textarea{background:var(--surface-2);border:1px solid var(--t2-ctl);border-radius:10px;color:var(--text);padding:10px 12px;transition:border-color .2s,box-shadow .2s}
input:hover,select:hover,textarea:hover{border-color:var(--muted)}
input:focus,select:focus,textarea:focus{border-color:var(--t2-2);box-shadow:0 0 0 3px var(--t2-glow-2)}
input[type=checkbox],input[type=radio],input[type=range]{accent-color:var(--accent)}
::placeholder{color:var(--faint);opacity:1}
label.field{color:var(--muted);font-weight:600}
th{background:var(--surface-2);color:var(--text);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em}
th,td{border-bottom-color:var(--border)}
td.num,th.num,.num{font-variant-numeric:tabular-nums lining-nums}
.tag{background:var(--accent-bg);color:var(--accent);font-weight:700}
.badge{background:var(--surface-2);font-weight:700}
.note{background:var(--warnbg);border-left-color:var(--warn);border-radius:10px}
.info{background:color-mix(in srgb,var(--t2-2) 9%,var(--bg));border-left:0;box-shadow:inset 0 0 0 1px var(--t2-c30);border-radius:10px}
.kpi{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--t2-r);padding:14px 16px;min-width:0;overflow-wrap:anywhere}
.kpi .v{font-family:var(--t2-fd);font-weight:800;font-size:1.9rem;line-height:1.05}
.kpi .l{text-transform:uppercase;letter-spacing:.08em;font-weight:700;font-size:.72rem;color:var(--muted)}
.bar{background:var(--border);height:8px}
.bar>div{background:linear-gradient(90deg,var(--t2-2),var(--accent))}
footer.sj-footer{border-top:1px solid var(--border);color:var(--muted);font-size:.84rem;padding:28px 20px 12px}
footer.sj-footer a{color:var(--muted);text-underline-offset:3px}
footer.sj-footer a:hover{color:var(--accent)}
.appnav{background:var(--bg);border-bottom:1px solid var(--border)}
.appnav a,.appnav .nav-more-btn{background:transparent;border-color:transparent;color:var(--muted);border-radius:999px;font-weight:600;padding:8px 13px;min-height:38px}
.appnav a:hover,.appnav .nav-more-btn:hover{color:var(--text);border-color:var(--t2-ctl);background:var(--surface)}
.appnav a.active,.appnav .nav-more-btn.active{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:700}
.appnav .nav-more-list{background:var(--surface);border-color:var(--border);border-radius:var(--t2-r);box-shadow:0 30px 60px -20px var(--t2-scrim)}
.appnav .nav-more-list a{border-radius:10px;color:var(--text)}
.appnav .nav-more-list a.active{color:var(--on-accent)}
.tabs{border-bottom-color:var(--border)}
.tab,.subtab,.dtab{background:transparent;border:1px solid var(--t2-ctl);color:var(--text);border-radius:999px;font-weight:600;transition:border-color .2s,color .2s}
.tab:hover,.subtab:hover,.dtab:hover{border-color:var(--t2-2)}
.tab[aria-selected="true"],.subtab.active,.dtab.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.welcome{border-top:0;box-shadow:inset 0 3px 0 var(--accent),var(--shadow);background:radial-gradient(500px 220px at 90% 0%,var(--t2-a10),transparent 70%),var(--surface)}
.welcome .lead{font-family:var(--t2-fd);font-weight:800;text-transform:uppercase;font-size:1.35rem;text-shadow:0 0 30px var(--t2-glow)}
label.opt,.opt-v,.dopt{background:var(--t2-opt);border-color:var(--border);border-radius:11px;transition:border-color .2s,background .2s}
label.opt:hover,.dopt:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--border))}
label.opt:has(input:checked),.dopt:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
label.opt.good,label.opt.good:has(input:checked),.opt-v.good,.dopt.good,.dopt.good:has(input:checked){background:var(--okbg);border-color:var(--ok)}
label.opt.bad,label.opt.bad:has(input:checked),.opt-v.bad,.dopt.bad,.dopt.bad:has(input:checked){background:var(--kobg);border-color:var(--ko)}
label.opt:focus-within,.dopt:focus-within{outline:3px solid var(--t2-2);outline-offset:2px}
.fb,.dfb{border-left:0;border-radius:11px;background:color-mix(in srgb,var(--t2-2) 8%,var(--bg));box-shadow:inset 0 0 0 1px var(--t2-c30)}
.dfb.ok{box-shadow:inset 0 0 0 1px var(--ok)}
.dfb.ko{box-shadow:inset 0 0 0 1px var(--ko)}
.timer{font-family:var(--t2-fd);font-weight:800;background:var(--t2-ink);border:1px solid var(--border);color:var(--t2-hi);border-radius:10px}
.timer.low{color:var(--t2-lo,var(--t2-2));background:var(--t2-ink)}
.big{font-family:var(--t2-fd);font-weight:800;color:var(--accent);text-shadow:0 0 24px var(--t2-glow)}
.codebox{border-color:var(--accent);background:var(--accent-bg);border-radius:var(--t2-r)}
.qdot{border-radius:9px;background:var(--surface-2);border-color:var(--border);font-family:var(--t2-fd);font-weight:700}
.qdot.done{background:var(--accent-bg);border-color:var(--accent)}
.qdot.cur{outline-color:var(--t2-2)}
.offer,.gcard,.otm-board>div{background:var(--surface-2);border-color:var(--border);border-radius:var(--t2-r)}
.price{font-family:var(--t2-fd);font-weight:800}
.flashcard{border-left:0;box-shadow:inset 3px 0 0 var(--accent),var(--shadow)}
.otm-clock{font-family:var(--t2-fd);background:var(--t2-ink);color:var(--t2-hi);border-radius:var(--t2-r)}
.blurbox{border-color:var(--t2-ctl);border-radius:var(--t2-r)}
.kicker{color:var(--t2-2);font-weight:700;letter-spacing:.14em}
.linkbtn{color:var(--accent)}
tr.cur td{background:var(--accent-bg)}
body:has(>main>.hero){overflow-x:hidden;position:relative}
body:has(>main>.hero)::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background: radial-gradient(600px 400px at 12% 8%,var(--t2-glow-2),transparent 70%),radial-gradient(700px 500px at 88% 18%,var(--t2-glow),transparent 70%),var(--t2-pitch) center/max(140vw,1500px) auto no-repeat,var(--bg);opacity:.9}
@media (min-width:561px){body:has(>main>.hero)>.sj-header{position:sticky;top:0;z-index:50;background:var(--t2-hdr);backdrop-filter:blur(14px)}
}
body:has(>main>.hero)>.theme-panel{max-width:1200px}
main:has(>.hero){max-width:1248px;padding:0 24px}
body:has(>main>.hero)>.sj-footer{width:calc(100% - 48px);max-width:1200px;margin-top:72px;padding-inline:0}
.sj-main section{scroll-margin-top:96px}
main>.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:0 56px;align-items:start;padding:64px 0 40px;counter-reset:t2blk}
main>.hero>*{grid-column:1}
main>.hero h1{grid-column:1/-1;font-size:clamp(2.3rem,5.2vw,4.6rem);line-height:1;letter-spacing:-.005em;margin:0;max-width:22ch}
main>.hero .sig{grid-column:1/-1;font-family:var(--t2-fd);font-weight:800;text-transform:uppercase;font-size:clamp(1.5rem,3vw,2.6rem);line-height:1.05;color:var(--accent);text-shadow:0 0 40px var(--t2-glow);margin:10px 0 28px}
main>.hero .sig::before{content:"";display:inline-block;width:.32em;height:.32em;border-radius:50%;background:var(--t2-hi);box-shadow:0 0 12px var(--t2-hi);margin:0 .35em .12em 0;vertical-align:middle;animation:t2-pulse 2.4s ease-in-out infinite}
main>.hero .lead{font-size:1.12rem;color:var(--muted);max-width:none;margin:0 0 28px;line-height:1.65}
main>.hero .cta{gap:12px}
main>.hero .cta .btn{margin:0}
main>.hero .facts{grid-column:2;grid-row:3/5;align-self:stretch;display:grid;gap:0;margin:0;padding:10px 22px;position:relative;list-style:none;background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--border);border-radius:20px;box-shadow:0 40px 80px -40px var(--t2-scrim),0 0 80px -40px var(--t2-glow);font-size:1rem;color:var(--text)}
main>.hero .facts::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(140deg,var(--t2-a45),transparent 35%,transparent 65%,var(--t2-c30));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
main>.hero .facts li{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px dashed var(--border);font-weight:500;line-height:1.4}
main>.hero .facts li:last-child{border-bottom:0}
main>.hero .facts li::before{flex:none;width:30px;height:30px;margin:0;border-radius:8px;background:var(--t2-a13) var(--t2-fchk) center/16px no-repeat;box-shadow:inset 0 0 0 1px var(--t2-a45)}
@keyframes t2-pulse{50%{opacity:.35}
}
main>.block{margin:0;padding:88px 0 0}
main>.block:not(.band){counter-increment:t2blk}
main>.block>h2{font-size:clamp(2rem,4.4vw,3.6rem);max-width:760px;margin:0 0 16px}
main>.block:not(.band)>h2::before{content:counter(t2blk,decimal-leading-zero) " —";content:counter(t2blk,decimal-leading-zero) " —"/"";display:block;font-size:.875rem;letter-spacing:.16em;color:var(--t2-2);margin-bottom:14px}
main>.block>p.intro{font-size:1.06rem;color:var(--muted);max-width:640px;margin:0 0 40px}
main>.block>h3{font-size:1.5rem;text-transform:uppercase;font-weight:800;margin:48px 0 16px}
main>.block>.meta{margin-top:14px}
.block .grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:dense;gap:14px}
.block .feat{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:var(--t2-r);padding:24px;box-shadow:none;transition:border-color .25s,transform .25s var(--t2-ease)}
.block .feat:nth-child(1),.block .feat:nth-child(5),.block .feat:nth-child(9){grid-column:span 2}
.block .feat:nth-child(1){background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 14%,var(--surface)),var(--surface) 60%)}
.block .feat::after{content:"";position:absolute;right:-40%;bottom:-60%;width:220px;height:220px;border-radius:50%;background:radial-gradient(closest-side,var(--t2-glow),transparent);opacity:0;transition:opacity .35s;pointer-events:none}
.block .feat:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border));transform:translateY(-3px)}
.block .feat:hover::after{opacity:1}
.block .feat svg{width:42px;height:42px;padding:9px;border-radius:10px;background:var(--t2-a13);color:var(--accent)}
.block .feat h3{font-size:1.4rem;text-transform:uppercase;font-weight:800;margin:18px 0 10px;line-height:1.05}
.block .feat p{font-size:.97rem;line-height:1.58;color:var(--muted)}
.block .feat p+p{margin-top:10px}
.block .feat p.meta{font-size:.84rem}
.block .feat a{font-weight:700}
.block .levels{gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.block .level{background:var(--surface-2);border:1px solid var(--border);border-left:0;border-radius:var(--t2-r);padding:20px 22px;box-shadow:inset 3px 0 0 var(--accent)}
.block .level+.level{box-shadow:inset 3px 0 0 var(--t2-2)}
.block .level h3{font-size:1.25rem;text-transform:uppercase;font-weight:800;margin-bottom:8px}
.block .level p{color:var(--muted)}
.block .plans{gap:14px}
.block .plan{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:17px;padding:30px 26px;box-shadow:none}
.block .plan.best{border:1px solid var(--t2-a45);background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 10%,var(--surface)),var(--surface) 55%);box-shadow:0 0 70px -30px var(--t2-glow)}
.block .plan.best::before{content:"";position:absolute;top:-1px;left:26px;right:26px;height:3px;border-radius:0 0 3px 3px;background:var(--t2-hi);box-shadow:0 0 18px var(--t2-hi)}
.block .plan h3{font-size:1.5rem;text-transform:uppercase;font-weight:800}
.block .plan .price{font-family:var(--t2-fd);font-weight:800;font-size:3.2rem;line-height:1;margin:18px 0 4px;color:var(--text);display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.block .plan.best .price{color:var(--accent);text-shadow:0 0 24px var(--t2-glow)}
.block .plan .price small{font-family:var(--t2-fb);font-size:.9rem;font-weight:500;color:var(--muted);text-shadow:none}
.block .plan{--t2-chk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5 11-11'/%3E%3C/svg%3E")}
.block .plan ul{list-style:none;padding:0;margin:22px 0 28px;display:grid;gap:10px;align-content:start;font-size:.97rem}
.block .plan li{margin:0;padding-left:28px;position:relative}
.block .plan li::before{content:"";position:absolute;left:0;top:.3em;width:16px;height:16px;background:var(--accent);mask:var(--t2-chk) center/contain no-repeat}
.block .plan .btn{margin:auto 0 0;width:100%}
.block .compare.card{margin-top:24px;padding:22px}
.block .compare caption{font-family:var(--t2-fd);font-weight:800;text-transform:uppercase;font-size:1.2rem;padding-bottom:14px}
.block .compare thead th+th{text-align:center}
.block .compare th[scope=row]{color:var(--text);text-transform:none;letter-spacing:0;font-size:.9rem;font-weight:500}
.block .compare th,.block .compare td{padding:10px 12px}
.block .compare tbody tr:hover td,.block .compare tbody tr:hover th{background:var(--surface-2)}
.block .yes{color:var(--accent)}
.block .clubs{gap:14px}
.block .clubs .card{padding:26px}
.block .clubs h3{font-size:1.2rem;text-transform:uppercase;font-weight:800;margin:26px 0 10px}
.block .clubs ul,.block .clubs ol{padding-left:1.2em;color:var(--muted)}
.block .clubs li{margin:6px 0}
.block .clubs li::marker{color:var(--accent)}
.block .clubs p{color:var(--muted)}
.block .club-form{background:linear-gradient(180deg,var(--surface-2),var(--surface))}
.block .club-form label.field{display:block;font-size:.88rem;margin:12px 0}
.block .club-form label.field>:is(input,select,textarea){display:block;margin-top:6px}
.block .club-form .btn{margin-top:12px}
.block .faq details{background:var(--surface);border:1px solid var(--border);border-radius:var(--t2-r);padding:0 20px;margin-bottom:10px;transition:border-color .2s}
.block .faq details[open]{border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}
.block .faq summary{font-weight:700;font-size:1.02rem;padding:18px 0 18px 30px}
.block .faq summary::before{left:4px;top:25px;width:9px;height:9px;border-color:var(--accent)}
.block .faq details[open] summary::before{top:22px}
.block .faq summary:hover{color:var(--accent)}
.block .faq summary:focus-visible{outline:3px solid var(--t2-2);outline-offset:2px;border-radius:6px}
.block .faq details[open] summary{border-bottom-color:var(--border);margin-bottom:12px}
.block .faq details p,.block .faq details ul{color:var(--muted);margin-bottom:16px}
main>.band{margin-top:96px;padding:64px 40px;border:1px solid var(--border);border-radius:22px;text-align:center;background:radial-gradient(600px 300px at 50% 0%,var(--t2-a10),transparent 70%),var(--surface);overflow:hidden}
html:root[data-contrast="high"] main>.band{background:var(--surface)}
main>.band>h2{font-size:clamp(2.2rem,6vw,4.6rem);margin:0 auto 18px;max-width:none}
main>.band p{color:var(--muted);max-width:520px;margin:0 auto 30px}
main>.band .btn{margin:6px}
@media (prefers-reduced-motion:no-preference){main>.hero>*{animation:t2-rise .7s var(--t2-ease) both}
main>.hero .sig{animation-delay:.08s}
main>.hero .lead{animation-delay:.14s}
main>.hero .cta{animation-delay:.2s}
main>.hero .facts{animation-delay:.26s}
html{scroll-behavior:smooth}
}
@keyframes t2-rise{from{opacity:0;transform:translateY(18px)}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media (max-width:1240px){.sj-header .sj-tagline{display:none}
.sj-header nav.top a{padding:8px 8px}
}
@media (max-width:1100px){.block .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
body:has(>main>.hero)>.sj-header nav.top{order:10;width:100%;margin:0 -8px}
}
@media (max-width:900px){main>.hero{grid-template-columns:minmax(0,1fr)}
main>.hero .facts{grid-column:1;grid-row:auto;margin-top:36px}
}
@media (max-width:640px){main:has(>.hero){padding:0 18px}
main>.hero h1{font-size:min(2.3rem,9.2vw)}
main>.block>h2{font-size:min(2rem,8.4vw)}
html:root :is(h1,h2){overflow-wrap:break-word}
main>.hero{padding:40px 0 16px}
main>.hero .lead{font-size:1.02rem}
main>.hero .cta .btn{flex:1 1 100%}
main>.hero .facts{padding:6px 16px}
main>.block{padding-top:64px}
.block .grid{grid-template-columns:1fr}
.block .feat:nth-child(n){grid-column:auto}
.block .plan{padding:26px 20px}
.block .compare.card{padding:14px}
.block .clubs{grid-template-columns:minmax(0,1fr)}
.block .clubs .card{padding:20px 16px}
main>.band{padding:44px 18px;margin-top:64px}
main>.band .btn{width:100%;margin:6px 0}
}
@media (max-width:560px){.sj-header{min-height:0;padding:10px 14px;gap:8px}
.sj-header .sj-brand{font-size:1.06rem}
.sj-header .sj-brand svg{width:30px;height:30px;padding:4px;border-radius:8px}
.sj-header .sj-theme-btn,.sj-header .btn-app,.sj-header .sj-login>summary{min-height:40px;padding:0 11px;font-size:.8rem}
.sj-header .sj-login>summary::after{display:none}
.sj-header nav.top{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -14px;padding:2px 10px 0;width:calc(100% + 28px);font-size:.88rem}
.sj-header nav.top::-webkit-scrollbar{display:none}
.sj-header nav.top{mask:linear-gradient(90deg,#000 88%,transparent)}
.sj-header .sp{display:none}
.sj-header .sj-brand{flex:1 1 auto;min-width:0}
.sj-header .sj-login{order:1}
.sj-header .sj-theme-btn{order:1}
.sj-header:has(.sj-login) .sj-theme-btn,.sj-header .btn-app{order:2;flex:1 1 40%;justify-content:center}
.sj-header .sj-back{order:3}
.sj-header .sj-login-menu{z-index:60}
.sj-header nav.top a{flex:none;padding:9px 10px}
.sj-back{min-height:36px;padding:0 11px;font-size:.8rem}
.appnav a,.appnav .nav-more-btn{padding:7px 4px;border-color:var(--border)}
.sj-login[open] .sj-login-menu{position:fixed;left:12px;right:12px;top:auto;width:auto;max-width:none;margin-top:10px}
}
@media (max-width:380px){.sj-header .sj-brand{font-size:.98rem;gap:7px}
.sj-header .sj-theme-btn,.sj-header .btn-app,.sj-header .sj-login>summary{padding:0 9px}
}
@media print{body::before{display:none}
}
html:root h1,html:root h2{text-transform:none}html:root main>.hero h1,html:root main>.block>h2{text-transform:uppercase}

.btn.big{font-family:var(--t2-fb);font-weight:700;text-shadow:none}
.btn.big:not(.sec,.ko){color:var(--on-accent)}
.adm-nav{background:var(--bg);border-bottom:1px solid var(--border);gap:4px;padding:10px max(12px,calc((100% - 1200px)/2))}
.adm-nav a{border-radius:999px;color:var(--muted);font-weight:600;padding:8px 14px;border:1px solid transparent;transition:color .2s,border-color .2s,background .2s}
.adm-nav a:hover{color:var(--text);background:var(--surface);border-color:var(--t2-ctl)}
.adm-nav a[aria-current="page"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:700}
.adm-nav a:focus-visible{outline-offset:-3px}
.adm-nav a[aria-current="page"]:focus-visible{outline-color:var(--on-accent)}
.adm-main>.card,.adm-main .card{border-radius:var(--t2-r)}
.adm-main h1,.adm-main h2{font-family:var(--t2-fd);font-weight:800;letter-spacing:.01em}
.adm-main h1{font-size:clamp(1.6rem,3vw,2.2rem)}
.adm-main h1::before{content:"";display:inline-block;width:.34em;height:.34em;border-radius:50%;background:var(--t2-hi);box-shadow:0 0 10px var(--t2-glow);margin:0 .4em .14em 0;vertical-align:middle}
details.card>summary{font-family:var(--t2-fd);font-weight:700;letter-spacing:.01em}
table.adm{border-collapse:separate;border-spacing:0;width:100%}
table.adm th{font-size:.72rem}
table.adm td,table.adm th{padding:9px 10px}
table.adm tbody tr:hover td{background:var(--surface-2)}
table.adm tr.sel td{background:var(--accent-bg);box-shadow:inset 0 -1px 0 var(--accent)}
.tbl-wrap{border:1px solid var(--border);border-radius:var(--t2-r);background:var(--surface)}
.tbl-wrap>table.adm{margin:0}
.pill{border-color:var(--t2-ctl);color:var(--muted);font-weight:600}
.preview{border-color:var(--t2-ctl);border-radius:var(--t2-r)}
.preview .popt{border-radius:11px}
.toast{border-radius:999px;font-weight:600;padding:11px 20px;box-shadow:0 20px 40px -20px var(--t2-scrim)}
.toast.err{background:var(--ko);color:var(--surface)}
.minibar{background:linear-gradient(90deg,var(--t2-2),var(--accent))}
.codes,.mono{font-variant-numeric:tabular-nums}
.adm-main .kpi .v{color:var(--text)}
.theme-panel{background:var(--surface)}
/* V3-CONTRASTE début */
/* Couleurs lisibles calculées par tools/contraste_palette.py (ne pas modifier à la main : relancer l'outil).
   Seuils : texte 4,5:1 (7:1 en contraste renforcé), contours et focus 3:1 (4,5:1 en renforcé). */
html:root[data-theme="light"][data-accent][data-contrast="normal"]{--ctl-border:#81878D;--disabled-bg:#EAEEF2;--disabled-border:#D2D8DF;--disabled-fg:#5B636E;--header-text:#0E1116;--ko:#B3134A;--muted:#4B535E;--ok:#276F0A;--t2-2:#006B7A;--t2-ctl:#7F8791;--warn:#8F4A00}
@media (prefers-color-scheme:light){html:root[data-theme="auto"][data-accent][data-contrast="normal"]{--ctl-border:#81878D;--disabled-bg:#EAEEF2;--disabled-border:#D2D8DF;--disabled-fg:#5B636E;--header-text:#0E1116;--ko:#B3134A;--muted:#4B535E;--ok:#276F0A;--t2-2:#006B7A;--t2-ctl:#7F8791;--warn:#8F4A00}}
html:root[data-theme="dark"][data-accent][data-contrast="normal"]{--ctl-border:#646A73;--disabled-bg:#191C22;--disabled-border:#2C3139;--disabled-fg:#8C939D;--header-text:#EEF1F4;--ko:#FF8AA8;--muted:#A3AAB4;--ok:#8FE36B;--t2-2:#3FE3F5;--t2-ctl:#666D78;--warn:#FFB65E}
@media (prefers-color-scheme:dark){html:root[data-theme="auto"][data-accent][data-contrast="normal"]{--ctl-border:#646A73;--disabled-bg:#191C22;--disabled-border:#2C3139;--disabled-fg:#8C939D;--header-text:#EEF1F4;--ko:#FF8AA8;--muted:#A3AAB4;--ok:#8FE36B;--t2-2:#3FE3F5;--t2-ctl:#666D78;--warn:#FFB65E}}
html:root[data-theme="light"][data-accent][data-contrast="high"]{--ctl-border:#5B636E;--disabled-bg:#EEF1F4;--disabled-border:#5B636E;--disabled-fg:#2E353E;--header-text:#0E1116;--ko:#9B013D;--muted:#1D232B;--ok:#205C09;--t2-2:#035865;--t2-ctl:#3E454F;--warn:#7A4007}
@media (prefers-color-scheme:light){html:root[data-theme="auto"][data-accent][data-contrast="high"]{--ctl-border:#5B636E;--disabled-bg:#EEF1F4;--disabled-border:#5B636E;--disabled-fg:#2E353E;--header-text:#0E1116;--ko:#9B013D;--muted:#1D232B;--ok:#205C09;--t2-2:#035865;--t2-ctl:#3E454F;--warn:#7A4007}}
html:root[data-theme="dark"][data-accent][data-contrast="high"]{--ctl-border:#8A919B;--disabled-bg:#15171B;--disabled-border:#8A919B;--disabled-fg:#C9CED5;--header-text:#EEF1F4;--ko:#FF8AA8;--muted:#E6E9ED;--ok:#8FE36B;--t2-2:#3FE3F5;--t2-ctl:#AEB5BF;--warn:#FFB65E}
@media (prefers-color-scheme:dark){html:root[data-theme="auto"][data-accent][data-contrast="high"]{--ctl-border:#8A919B;--disabled-bg:#15171B;--disabled-border:#8A919B;--disabled-fg:#C9CED5;--header-text:#EEF1F4;--ko:#FF8AA8;--muted:#E6E9ED;--ok:#8FE36B;--t2-2:#3FE3F5;--t2-ctl:#AEB5BF;--warn:#FFB65E}}
html:root[data-theme="light"][data-accent="sarcelle"][data-contrast="normal"]{--accent:#436B00;--accent-bg:#EBF3D6;--accent-h:#34540A;--focus-ring:#436B00;--on-accent:#FFFFFF}
@media (prefers-color-scheme:light){html:root[data-theme="auto"][data-accent="sarcelle"][data-contrast="normal"]{--accent:#436B00;--accent-bg:#EBF3D6;--accent-h:#34540A;--focus-ring:#436B00;--on-accent:#FFFFFF}}
html:root[data-theme="light"][data-accent="bleu"][data-contrast="normal"]{--accent:#0A5CA0;--accent-bg:#E3EFF9;--accent-h:#084A82;--focus-ring:#0A5CA0;--on-accent:#FFFFFF}
@media (prefers-color-scheme:light){html:root[data-theme="auto"][data-accent="bleu"][data-contrast="normal"]{--accent:#0A5CA0;--accent-bg:#E3EFF9;--accent-h:#084A82;--focus-ring:#0A5CA0;--on-accent:#FFFFFF}}
html:root[data-theme="light"][data-accent="orange"][data-contrast="normal"]{--accent:#A34700;--accent-bg:#FBEBDD;--accent-h:#823800;--focus-ring:#A34700;--on-accent:#FFFFFF}
@media (prefers-color-scheme:light){html:root[data-theme="auto"][data-accent="orange"][data-contrast="normal"]{--accent:#A34700;--accent-bg:#FBEBDD;--accent-h:#823800;--focus-ring:#A34700;--on-accent:#FFFFFF}}
html:root[data-theme="light"][data-accent="violet"][data-contrast="normal"]{--accent:#6B3DBF;--accent-bg:#EFE8FA;--accent-h:#56309C;--focus-ring:#6B3DBF;--on-accent:#FFFFFF}
@media (prefers-color-scheme:light){html:root[data-theme="auto"][data-accent="violet"][data-contrast="normal"]{--accent:#6B3DBF;--accent-bg:#EFE8FA;--accent-h:#56309C;--focus-ring:#6B3DBF;--on-accent:#FFFFFF}}
html:root[data-theme="dark"][data-accent="sarcelle"][data-contrast="normal"]{--accent:#C6F432;--accent-bg:#1B220C;--accent-h:#D6FA66;--focus-ring:#C6F432;--on-accent:#0A0B0D}
@media (prefers-color-scheme:dark){html:root[data-theme="auto"][data-accent="sarcelle"][data-contrast="normal"]{--accent:#C6F432;--accent-bg:#1B220C;--accent-h:#D6FA66;--focus-ring:#C6F432;--on-accent:#0A0B0D}}
html:root[data-theme="dark"][data-accent="bleu"][data-contrast="normal"]{--accent:#6CC4FF;--accent-bg:#0F1E2B;--accent-h:#96D5FF;--focus-ring:#6CC4FF;--on-accent:#0A0B0D}
@media (prefers-color-scheme:dark){html:root[data-theme="auto"][data-accent="bleu"][data-contrast="normal"]{--accent:#6CC4FF;--accent-bg:#0F1E2B;--accent-h:#96D5FF;--focus-ring:#6CC4FF;--on-accent:#0A0B0D}}
html:root[data-theme="dark"][data-accent="orange"][data-contrast="normal"]{--accent:#FFA24D;--accent-bg:#2A1A0C;--accent-h:#FFBC7D;--focus-ring:#FFA24D;--on-accent:#0A0B0D}
@media (prefers-color-scheme:dark){html:root[data-theme="auto"][data-accent="orange"][data-contrast="normal"]{--accent:#FFA24D;--accent-bg:#2A1A0C;--accent-h:#FFBC7D;--focus-ring:#FFA24D;--on-accent:#0A0B0D}}
html:root[data-theme="dark"][data-accent="violet"][data-contrast="normal"]{--accent:#C9A2FF;--accent-bg:#211A2E;--accent-h:#DAC0FF;--focus-ring:#C9A2FF;--on-accent:#0A0B0D}
@media (prefers-color-scheme:dark){html:root[data-theme="auto"][data-accent="violet"][data-contrast="normal"]{--accent:#C9A2FF;--accent-bg:#211A2E;--accent-h:#DAC0FF;--focus-ring:#C9A2FF;--on-accent:#0A0B0D}}
html:root[data-theme="light"][data-accent="sarcelle"][data-contrast="high"]{--accent:#375802;--accent-bg:#EBF3D6;--accent-h:#34540A;--focus-ring:#375802;--on-accent:#FFFFFF}
@media (prefers-color-scheme:light){html:root[data-theme="auto"][data-accent="sarcelle"][data-contrast="high"]{--accent:#375802;--accent-bg:#EBF3D6;--accent-h:#34540A;--focus-ring:#375802;--on-accent:#FFFFFF}}
html:root[data-theme="light"][data-accent="bleu"][data-contrast="high"]{--accent:#024F8D;--accent-bg:#E3EFF9;--accent-h:#084A82;--focus-ring:#024F8D;--on-accent:#FFFFFF}
@media (prefers-color-scheme:light){html:root[data-theme="auto"][data-accent="bleu"][data-contrast="high"]{--accent:#024F8D;--accent-bg:#E3EFF9;--accent-h:#084A82;--focus-ring:#024F8D;--on-accent:#FFFFFF}}
html:root[data-theme="light"][data-accent="orange"][data-contrast="high"]{--accent:#813A0B;--accent-bg:#FBEBDD;--accent-h:#823800;--focus-ring:#813A0B;--on-accent:#FFFFFF}
@media (prefers-color-scheme:light){html:root[data-theme="auto"][data-accent="orange"][data-contrast="high"]{--accent:#813A0B;--accent-bg:#FBEBDD;--accent-h:#823800;--focus-ring:#813A0B;--on-accent:#FFFFFF}}
html:root[data-theme="light"][data-accent="violet"][data-contrast="high"]{--accent:#5E2CAE;--accent-bg:#EFE8FA;--accent-h:#56309C;--focus-ring:#5E2CAE;--on-accent:#FFFFFF}
@media (prefers-color-scheme:light){html:root[data-theme="auto"][data-accent="violet"][data-contrast="high"]{--accent:#5E2CAE;--accent-bg:#EFE8FA;--accent-h:#56309C;--focus-ring:#5E2CAE;--on-accent:#FFFFFF}}
html:root[data-theme="dark"][data-accent="sarcelle"][data-contrast="high"]{--accent:#C6F432;--accent-bg:#1B220C;--accent-h:#D6FA66;--focus-ring:#C6F432;--on-accent:#0A0B0D}
@media (prefers-color-scheme:dark){html:root[data-theme="auto"][data-accent="sarcelle"][data-contrast="high"]{--accent:#C6F432;--accent-bg:#1B220C;--accent-h:#D6FA66;--focus-ring:#C6F432;--on-accent:#0A0B0D}}
html:root[data-theme="dark"][data-accent="bleu"][data-contrast="high"]{--accent:#6CC4FF;--accent-bg:#0F1E2B;--accent-h:#96D5FF;--focus-ring:#6CC4FF;--on-accent:#0A0B0D}
@media (prefers-color-scheme:dark){html:root[data-theme="auto"][data-accent="bleu"][data-contrast="high"]{--accent:#6CC4FF;--accent-bg:#0F1E2B;--accent-h:#96D5FF;--focus-ring:#6CC4FF;--on-accent:#0A0B0D}}
html:root[data-theme="dark"][data-accent="orange"][data-contrast="high"]{--accent:#FFA24D;--accent-bg:#2A1A0C;--accent-h:#FFBC7D;--focus-ring:#FFA24D;--on-accent:#0A0B0D}
@media (prefers-color-scheme:dark){html:root[data-theme="auto"][data-accent="orange"][data-contrast="high"]{--accent:#FFA24D;--accent-bg:#2A1A0C;--accent-h:#FFBC7D;--focus-ring:#FFA24D;--on-accent:#0A0B0D}}
html:root[data-theme="dark"][data-accent="violet"][data-contrast="high"]{--accent:#C9A2FF;--accent-bg:#211A2E;--accent-h:#DAC0FF;--focus-ring:#C9A2FF;--on-accent:#0A0B0D}
@media (prefers-color-scheme:dark){html:root[data-theme="auto"][data-accent="violet"][data-contrast="high"]{--accent:#C9A2FF;--accent-bg:#211A2E;--accent-h:#DAC0FF;--focus-ring:#C9A2FF;--on-accent:#0A0B0D}}
/* Règles communes aux 5 designs (source : tools/contraste_commun.css, recopiée par tools/contraste_palette.py).
   Variables dédiées : --btn-bg / --btn-fg (bouton principal), --btn-bg-h (survol), --btn2-fg (bouton secondaire),
   --accent-text (accent employé comme texte), --on-accent (texte sur accent), --disabled-bg / --disabled-fg /
   --disabled-border (état désactivé lisible), --ctl-border (contour des champs, 3:1), --focus-ring (focus, 3:1). */
html:root{--btn-bg:var(--accent);--btn-bg-h:var(--accent-h);--btn-fg:var(--on-accent);--btn2-fg:var(--text);--accent-text:var(--accent)}
/* État désactivé : plus de transparence (texte illisible) mais un fond neutre et un texte à 4,5:1 (7:1 en renforcé). */
/* Les réponses corrigées (bonne / fausse), désactivées après la réponse, gardent leurs couleurs de résultat. */
html:root body :is(.btn,button,[role=button],input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea):is(:disabled,[aria-disabled="true"]):not(.res-ok,.res-ko,.good,.bad,.ok-ans,.ko-ans){opacity:1!important;background:var(--disabled-bg)!important;background-image:none!important;color:var(--disabled-fg)!important;-webkit-text-fill-color:var(--disabled-fg);border-color:var(--disabled-border)!important;box-shadow:none!important;text-shadow:none!important;transform:none!important;cursor:not-allowed}
html:root body :is(.btn,button,[role=button]):is(:disabled,[aria-disabled="true"]):not(.res-ok,.res-ko,.good,.bad,.ok-ans,.ko-ans) *{color:inherit!important}
/* V3-JUGE : badges et pastilles dans un bouton désactivé : fond neutre, texte désactivé lisible */
html:root body :is(.btn,button,[role=button]):is(:disabled,[aria-disabled="true"]):not(.res-ok,.res-ko,.good,.bad,.ok-ans,.ko-ans) :is(.badge,.pill,.chip,.tag){background:var(--disabled-bg)!important;background-image:none!important;border-color:var(--disabled-border)!important}
html:root body input:is([type=checkbox],[type=radio]):disabled{opacity:1}
/* Texte indicatif des champs */
html:root ::placeholder{color:var(--muted);opacity:1}
/* Pastilles de couleur du panneau d'affichage : liseré et focus visibles */
html:root .sj-theme .dot{outline:1px solid var(--ctl-border);outline-offset:0}
html:root .sj-theme .dot[aria-pressed="true"]{outline:3px solid var(--text);outline-offset:1px}
html:root .sj-theme .dot:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
/* Réponses corrigées sur des boutons (atelier du chronomètre des tirs…) : couleurs de résultat quel que soit le design du bouton. */
html:root body :is(.btn,button).res-ok{background:var(--okbg)!important;border-color:var(--ok)!important;color:var(--text)!important;opacity:1!important}
html:root body :is(.btn,button).res-ko{background:var(--kobg)!important;border-color:var(--ko)!important;color:var(--text)!important;opacity:1!important}
/* V3-CONTRASTE fin */