/* Siffle Juste – design « Parquet » – © 2026 Ghislain DEMONDA – Tous droits réservés. */
/* Crème, bleu nuit et orange ballon. Police General Sans (Indian Type Foundry, licence ITF Free Font), auto-hébergée. */
@font-face{font-family:'General Sans';src:url(/assets/fonts/t1/GeneralSans-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url(/assets/fonts/t1/GeneralSans-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url(/assets/fonts/t1/GeneralSans-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url(/assets/fonts/t1/GeneralSans-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ============ Palette claire (défaut) ============ */
html:root[data-theme],html:root[data-theme][data-accent]{
  --bg:#FBF7F1;--surface:#FFFFFF;--surface-2:#F5EFE6;--border:#E3D8C7;--text:#1B2540;--muted:#5D6173;--faint:#8A8D9A;
  --ok:#2E7A4C;--ko:#A12C7B;--warn:#964219;--okbg:#E5F2E9;--kobg:#F6E6F0;--warnbg:#F8EDE4;
  --accent:#B64918;--accent-h:#9A3C12;--accent-bg:#FBEDE3;--on-accent:#FFFFFF;
  --header-bg:#FBF7F1;--header-text:#1B2540;--t1-glass:rgba(251,247,241,.9);
  --shadow:0 1px 2px rgba(27,37,64,.05),0 4px 14px rgba(27,37,64,.05);
  --t1-glow:#D9571C;--t1-night:#18223D;--t1-on-night:#FFFFFF;--t1-night-muted:#B9C0D3;
  --t1-shadow:0 2px 4px rgba(27,37,64,.04),0 18px 40px -12px rgba(27,37,64,.14);
  --t1-shadow-lg:0 30px 70px -20px rgba(27,37,64,.28),0 8px 20px -8px rgba(27,37,64,.12);
  --t1-r:22px;--t1-r-sm:12px;--t1-r-lg:30px;--t1-ease:cubic-bezier(.22,.8,.26,1);
  --t1-font:'General Sans','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  color-scheme:light;
}
html:root[data-theme][data-accent="bleu"]{--accent:#2F5AA8;--accent-h:#24478A;--accent-bg:#E6EDF8;--t1-glow:#3D6FCC}
html:root[data-theme][data-accent="violet"]{--accent:#6A3A9E;--accent-h:#522D7B;--accent-bg:#EFE7F7;--t1-glow:#8250BF}

/* ============ Palette sombre (bleu nuit) ============ */
html:root[data-theme="dark"][data-accent]{
  --bg:#121A2C;--surface:#1A2439;--surface-2:#222E48;--border:#34415F;--text:#EEF0F6;--muted:#B9C0D3;--faint:#7E88A3;
  --ok:#7DC49A;--ko:#E88BC4;--warn:#E3A07A;--okbg:#18342A;--kobg:#3A2034;--warnbg:#3A2A1E;
  --accent:#F08A55;--accent-h:#F5A57B;--accent-bg:#372723;--on-accent:#1B1206;
  --header-bg:#121A2C;--header-text:#EEF0F6;--t1-glass:rgba(18,26,44,.9);--shadow:0 1px 2px rgba(0,0,0,.3);
  --t1-glow:#F08A55;--t1-night:#0B1120;--t1-on-night:#FFFFFF;--t1-night-muted:#B9C0D3;
  --t1-shadow:0 18px 40px -16px rgba(0,0,0,.55);--t1-shadow-lg:0 30px 70px -20px rgba(0,0,0,.7);
  color-scheme:dark;
}
html:root[data-theme="dark"][data-accent="bleu"]{--accent:#7EA6E8;--accent-h:#9BBBEE;--accent-bg:#1E2B45;--on-accent:#0B1424;--t1-glow:#7EA6E8}
html:root[data-theme="dark"][data-accent="violet"]{--accent:#B79AE8;--accent-h:#C9B2EE;--accent-bg:#2C2440;--on-accent:#160E24;--t1-glow:#B79AE8}
@media (prefers-color-scheme:dark){
  html:root[data-theme="auto"][data-accent]{
    --bg:#121A2C;--surface:#1A2439;--surface-2:#222E48;--border:#34415F;--text:#EEF0F6;--muted:#B9C0D3;--faint:#7E88A3;
    --ok:#7DC49A;--ko:#E88BC4;--warn:#E3A07A;--okbg:#18342A;--kobg:#3A2034;--warnbg:#3A2A1E;
    --accent:#F08A55;--accent-h:#F5A57B;--accent-bg:#372723;--on-accent:#1B1206;
    --header-bg:#121A2C;--header-text:#EEF0F6;--t1-glass:rgba(18,26,44,.9);--shadow:0 1px 2px rgba(0,0,0,.3);
    --t1-glow:#F08A55;--t1-night:#0B1120;--t1-on-night:#FFFFFF;--t1-night-muted:#B9C0D3;
    --t1-shadow:0 18px 40px -16px rgba(0,0,0,.55);--t1-shadow-lg:0 30px 70px -20px rgba(0,0,0,.7);
    color-scheme:dark;
  }
  html:root[data-theme="auto"][data-accent="bleu"]{--accent:#7EA6E8;--accent-h:#9BBBEE;--accent-bg:#1E2B45;--on-accent:#0B1424;--t1-glow:#7EA6E8}
  html:root[data-theme="auto"][data-accent="violet"]{--accent:#B79AE8;--accent-h:#C9B2EE;--accent-bg:#2C2440;--on-accent:#160E24;--t1-glow:#B79AE8}
}
/* Contraste renforcé */
html:root[data-theme][data-accent][data-contrast="high"]{--muted:var(--text);--faint:var(--text);--border:#5D6173;--t1-night-muted:#FFFFFF}
html:root[data-theme="dark"][data-accent][data-contrast="high"]{--text:#FFFFFF;--muted:#E6E8EE;--border:#8A94AE;--bg:#000;--surface:#0D1220;--surface-2:#161D30}
@media (prefers-color-scheme:dark){
  html:root[data-theme="auto"][data-accent][data-contrast="high"]{--text:#FFFFFF;--muted:#E6E8EE;--border:#8A94AE;--bg:#000;--surface:#0D1220;--surface-2:#161D30}
}

/* ============ Base ============ */
body{font-family:var(--t1-font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--t1-font);font-weight:600;letter-spacing:-.02em;text-wrap:balance}
h1{letter-spacing:-.03em}
button,input,select,textarea{font-family:inherit}
a{color:var(--accent);text-underline-offset:.18em}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent-bg);color:var(--text)}

/* ============ En-tête ============ */
html .sj-header{background:var(--header-bg);color:var(--header-text);border-bottom:1px solid var(--border);padding:14px 24px;gap:10px 14px;min-height:68px}
html .sj-header:has(>nav.top){position:sticky;top:0;z-index:40;background:var(--t1-glass);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px)}
html .sj-brand{font-weight:700;font-size:1.25rem;letter-spacing:-.02em;gap:10px}
html .sj-header .sj-brand svg{color:var(--accent);width:34px;height:34px}
html .sj-tagline{color:var(--muted);opacity:1;font-weight:500;font-size:.8rem;letter-spacing:0}
.sj-header nav.top{gap:2px;font-size:.95rem}
.sj-header nav.top a{display:block;padding:8px 13px;border:0;border-radius:999px;color:var(--muted);font-weight:500;transition:color .2s,background-color .2s}
.sj-header nav.top a:hover{color:var(--text);background:color-mix(in srgb,var(--text) 7%,transparent)}
.sj-header nav.top a:focus-visible{outline:3px solid var(--accent);outline-offset:1px;color:var(--text)}
html .sj-header .sj-theme-btn{display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;border:1.5px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);font-weight:600;font-size:.92rem;transition:border-color .2s}
html .sj-header .sj-theme-btn:hover,html .sj-header .sj-theme-btn[aria-expanded="true"]{border-color:var(--text)}
html .sj-header .sj-theme-btn:focus-visible,html .sj-header .btn-app:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
html .sj-header .btn-app{display:inline-flex;align-items:center;min-height:40px;padding:8px 18px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-weight:600;font-size:.92rem;box-shadow:0 10px 24px -12px var(--t1-glow),inset 0 1px 0 rgba(255,255,255,.18);transition:transform .25s var(--t1-ease),box-shadow .25s var(--t1-ease),background-color .2s}
html .sj-header .btn-app:hover{background:var(--accent-h);transform:translateY(-2px);box-shadow:0 16px 30px -14px var(--t1-glow)}
html .sj-back{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;background:var(--accent-bg);color:var(--accent);opacity:1;font-weight:600;font-size:.9rem;transition:background-color .2s}
html .sj-header .sj-back{color:var(--accent)}
html .sj-back:hover{background:var(--accent-bg);color:var(--accent-h);box-shadow:inset 0 0 0 1.5px currentColor;text-decoration:none!important}
.userbar{color:var(--muted)}
.userbar a{color:var(--accent)}

/* Menu « Se connecter » */
html .sj-login>summary{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 16px;border:1.5px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);font-weight:600;font-size:.92rem;transition:border-color .2s}
html .sj-login>summary::after{content:"";width:7px;height:7px;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg);transition:transform .25s var(--t1-ease)}
html .sj-login[open]>summary,html .sj-login>summary:hover{border-color:var(--text)}
html .sj-login[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
html .sj-login>summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
html .sj-login-menu{top:calc(100% + 10px);width:330px;max-width:calc(100vw - 28px);min-width:0;padding:8px;border:1px solid var(--border);border-radius:var(--t1-r-lg);background:var(--surface);box-shadow:var(--t1-shadow-lg);transform-origin:top right;animation:t1-pop .25s var(--t1-ease)}
html .sj-header .sj-login-menu a{display:block;padding:12px 14px;border-radius:var(--t1-r-sm);color:var(--text);transition:background-color .2s}
html .sj-header .sj-login-menu a:hover,html .sj-header .sj-login-menu a:focus-visible{background:var(--accent-bg);outline-offset:-3px}
.sj-login-menu strong{display:block;font-size:.95rem;font-weight:600;line-height:1.3}
html .sj-login-menu small{color:var(--muted);font-size:.84rem;line-height:1.4;margin-top:2px}
@keyframes t1-pop{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}

/* Panneau d'affichage */
.theme-panel .card{border-radius:var(--t1-r)}
.sj-theme .seg{border-radius:999px;border-color:var(--border);background:var(--surface)}
.sj-theme .seg button{padding:7px 13px;font-weight:500}
.sj-theme .seg button[aria-pressed="true"]{background:var(--text);color:var(--bg);font-weight:600}

/* ============ Boutons, cartes, champs ============ */
html .btn{border-radius:999px;padding:10px 22px;min-height:44px;font-weight:600;font-size:.95rem;line-height:1.4;background:var(--accent);border:1.5px solid var(--accent);color:var(--on-accent);box-shadow:0 10px 24px -14px var(--t1-glow),inset 0 1px 0 rgba(255,255,255,.16);transition:transform .25s var(--t1-ease),box-shadow .25s var(--t1-ease),background-color .2s,border-color .2s}
html .btn:hover{background:var(--accent-h);border-color:var(--accent-h);transform:translateY(-2px);box-shadow:0 16px 30px -16px var(--t1-glow)}
html .btn:active{transform:none}
html .btn.sec{background:var(--surface);color:var(--text);border-color:var(--border);box-shadow:0 1px 2px rgba(27,37,64,.05)}
html .btn.sec:hover{background:var(--surface);border-color:var(--text)}
html .btn.ko{background:var(--surface);color:var(--ko);border-color:var(--ko);box-shadow:none}
html .btn.ko:hover{background:var(--kobg)}
html .btn.sm{min-height:34px;padding:5px 13px;font-size:.84rem}
html .btn:disabled,html .btn:disabled:hover{transform:none;box-shadow:none}
html .btn:disabled:hover{background:var(--accent);border-color:var(--accent)}
html .btn.sec:disabled:hover{background:var(--surface);border-color:var(--border)}
.linkbtn{color:var(--accent)}

html .card{border-radius:var(--t1-r);border-color:var(--border);padding:22px 24px;box-shadow:var(--shadow)}
.card h2,.card h1{letter-spacing:-.02em}
input,select,textarea{border-radius:var(--t1-r-sm);border:1.5px solid var(--ctl-border);padding:9px 12px;transition:border-color .2s,box-shadow .2s}
input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--text) 40%,var(--ctl-border))}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}
input[type=checkbox],input[type=radio]{accent-color:var(--accent)}
label.field{font-weight:500}
th{background:var(--surface-2);font-weight:600;color:var(--muted);font-size:.84rem}
th,td{border-bottom-color:var(--border);padding:9px 10px}
.tag{border-radius:999px;font-weight:600}
.badge{border-radius:999px}
.note,.info{border-radius:var(--t1-r-sm)}
.meta{color:var(--muted)}
html .kpi{border-radius:var(--t1-r);padding:16px 18px;box-shadow:var(--shadow)}
html .kpi .v{font-weight:600;letter-spacing:-.03em;font-size:1.8rem}
html .kpi .l{font-size:.82rem;font-weight:500}
.bar{border-radius:99px}

/* ============ Application : navigation et onglets ============ */
html .appnav{background:var(--surface);border-bottom:1px solid var(--border);box-shadow:0 6px 20px -18px rgba(27,37,64,.4)}
html .appnav .nav-main{padding:8px 12px;gap:6px}
html .appnav a,html .appnav .nav-more-btn{border-radius:999px;border-color:transparent;background:transparent;color:var(--muted);font-weight:500;padding:8px 14px;transition:background-color .2s,color .2s}
html .appnav a:hover,html .appnav .nav-more-btn:hover{border-color:transparent;background:var(--surface-2);color:var(--text)}
html .appnav a.active,html .appnav .nav-more-btn.active{background:var(--text);color:var(--bg);border-color:var(--text);font-weight:600}
html .appnav .nav-more-list{border-radius:var(--t1-r);box-shadow:var(--t1-shadow-lg);padding:8px}
html .appnav .nav-more-list a{border-radius:var(--t1-r-sm)}
html .appnav .nav-more-list a:hover{background:var(--accent-bg);color:var(--text)}
html .appnav .nav-more-list a.active:hover{background:var(--text);color:var(--bg)}
html .tab,html .dtab,html .subtab{border-radius:999px;border:1.5px solid var(--border);background:var(--surface);color:var(--text);padding:8px 16px;font-weight:500;transition:border-color .2s,background-color .2s}
html .tab:hover,html .dtab:hover,html .subtab:hover{border-color:var(--text)}
html .tab[aria-selected="true"],html .dtab.active,html .subtab.active{background:var(--text);border-color:var(--text);color:var(--bg);font-weight:600}
.tabs{border-bottom-color:var(--border);padding-bottom:12px}
html label.opt,html .dopt,html .opt-v{border-radius:14px;border:1.5px solid var(--border);padding:12px 14px;transition:border-color .2s,background-color .2s}
html label.opt:hover,html .dopt:hover{border-color:var(--accent)}
html label.opt.good,html .dopt.good,html .opt-v.good{background:var(--okbg);border-color:var(--ok)}
html label.opt.bad,html .dopt.bad,html .opt-v.bad{background:var(--kobg);border-color:var(--ko)}
.fb,.dfb{border-radius:var(--t1-r-sm)}
.welcome{border-top:4px solid var(--accent)}
.codebox{border-radius:var(--t1-r)}
.qdot{border-radius:10px}
.qdot.done{background:var(--accent-bg)}
.timer{border-radius:999px}
.offer,.gcard{border-radius:var(--t1-r)}
.kicker{color:var(--accent);font-weight:600;letter-spacing:.08em}
.theme-panel{border-bottom-color:var(--border)}

/* ============ Vitrine ============ */
.sj-main:has(>.hero){max-width:1160px;padding-inline:24px}
.sj-main:has(>.hero)~.sj-footer{max-width:1112px;width:calc(100% - 48px);padding-inline:0}
.sj-main>.hero{position:relative;padding:64px 0 40px;background:radial-gradient(closest-side,color-mix(in srgb,var(--t1-glow) 20%,transparent),transparent) 100% 40%/min(620px,110vw) min(460px,80vh) no-repeat}
.sj-main>.hero h1{font-size:clamp(2.3rem,5.4vw,4.4rem);font-weight:600;letter-spacing:-.035em;line-height:1.04;max-width:15em;margin:0 0 18px;animation:t1-up .8s var(--t1-ease) both}
.sj-main>.hero .sig{display:inline-flex;align-items:center;gap:10px;padding:6px 16px 6px 6px;margin:0 0 20px;border:1px solid var(--border);border-radius:999px;background:var(--surface);box-shadow:var(--shadow);color:var(--muted);font-size:.9rem;font-weight:500;animation:t1-up .8s var(--t1-ease) both}
.sj-main>.hero .sig::before{content:"";width:24px;height:24px;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 35%,color-mix(in srgb,var(--t1-glow) 60%,#fff),var(--t1-glow) 60%);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--t1-glow) 60%,#000)}
.sj-main>.hero p.lead{font-size:clamp(1.05rem,1.4vw,1.2rem);color:var(--muted);max-width:40em;margin:0 0 26px;animation:t1-up .8s .08s var(--t1-ease) both}
.sj-main>.hero .cta{gap:10px;animation:t1-up .8s .16s var(--t1-ease) both}
.hero .cta .btn{margin:0}
.hero .cta .btn:first-child{padding-inline:26px}
.sj-main>.hero .facts{gap:10px 30px;margin:36px 0 0;padding:20px 0;border-block:1px solid var(--border);font-size:.94rem;font-weight:500;color:var(--muted)}
.hero .facts li::before{width:6px;height:6px;background:var(--t1-glow)}
@keyframes t1-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

section.block{margin:88px 0}
section.block>h2{font-size:clamp(1.8rem,3.6vw,2.8rem);font-weight:600;letter-spacing:-.03em;line-height:1.12;max-width:20em;margin-bottom:12px}
section.block>h2::before{content:"";display:block;width:36px;height:4px;border-radius:4px;background:var(--t1-glow);margin-bottom:18px}
section.block>p.intro{font-size:1.08rem;margin-bottom:32px}
.grid{gap:18px;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr))}
.feat{position:relative;border-radius:var(--t1-r);padding:26px 24px 28px;box-shadow:var(--shadow);transition:transform .35s var(--t1-ease),box-shadow .35s var(--t1-ease),border-color .35s}
.feat:hover{transform:translateY(-4px);box-shadow:var(--t1-shadow);border-color:color-mix(in srgb,var(--accent) 35%,var(--border))}
.feat>svg{width:48px;height:48px;padding:11px;border-radius:14px;background:var(--accent-bg);color:var(--accent);margin-bottom:12px;transition:background-color .3s,color .3s}
.feat:hover>svg{background:var(--accent);color:var(--on-accent)}
.feat h3{font-size:1.15rem;font-weight:600;margin:6px 0 8px;letter-spacing:-.015em}
.feat p{font-size:.96rem;line-height:1.55}
.levels{gap:18px;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr))}
.level{border:1px solid var(--border);border-left:0;border-radius:var(--t1-r);background:var(--surface);padding:22px 24px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.level::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--t1-glow)}
.level h3{font-size:1.1rem;margin-bottom:6px}
.level p{color:var(--muted)}
.plans{gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));padding-top:12px}
.plan{border-radius:var(--t1-r-lg);padding:30px 26px;box-shadow:var(--shadow);transition:transform .35s var(--t1-ease),box-shadow .35s var(--t1-ease)}
.plan:hover{transform:translateY(-4px);box-shadow:var(--t1-shadow)}
.plan h3{font-size:1.2rem;font-weight:600}
.plan .price{font-size:2.9rem;font-weight:600;letter-spacing:-.04em;line-height:1.05;margin:16px 0 2px}
.plan .price small{display:block;font-size:.86rem;letter-spacing:0;margin-top:6px;line-height:1.4}
.plan ul{list-style:none;padding:0;margin:20px 0 26px;font-size:.95rem}
.plan li{position:relative;padding-left:28px;margin:10px 0}
.plan li::before{content:"";position:absolute;left:2px;top:.3em;width:14px;height:8px;border:solid var(--accent);border-width:0 0 2.5px 2.5px;transform:rotate(-45deg)}
.plan .btn{width:100%;margin:auto 0 0}
html .plan.best{background:var(--t1-night);color:var(--t1-on-night);border:1px solid var(--t1-night);box-shadow:var(--t1-shadow-lg);transform:translateY(-10px)}
html .plan.best:hover{transform:translateY(-14px)}
.plan.best .price small,.plan.best p,.plan.best .meta{color:var(--t1-night-muted)}
.plan.best li::before{border-color:color-mix(in srgb,var(--t1-glow) 55%,#fff)}
.plan.best a:not(.btn){color:#fff}
html .plan.best .btn{background:#F08A55;border-color:#F08A55;color:#1B1206}
html .plan.best .btn:hover{background:#F5A57B;border-color:#F5A57B}
html .plan.best .btn:focus-visible{outline-color:#fff}
.compare{border-radius:var(--t1-r)}
.compare caption{font-size:1.05rem}
.clubs{gap:24px}
.faq details{border-radius:var(--t1-r-sm);padding:0 20px;margin-bottom:10px;box-shadow:var(--shadow);transition:border-color .2s}
.faq details:hover,.faq details[open]{border-color:color-mix(in srgb,var(--text) 30%,var(--border))}
.faq summary{padding:16px 0 16px 26px;font-size:1.02rem}
.faq summary::before{top:23px}
.faq details[open] summary::before{top:20px}
html section.band{position:relative;overflow:hidden;isolation:isolate;background:var(--accent);color:var(--on-accent);border-radius:var(--t1-r-lg);padding:56px 28px;box-shadow:var(--t1-shadow)}
section.band::after{content:"";position:absolute;right:-120px;top:-140px;z-index:-1;width:380px;height:380px;border-radius:50%;border:2px solid color-mix(in srgb,var(--on-accent) 22%,transparent);box-shadow:0 0 0 60px color-mix(in srgb,var(--on-accent) 5%,transparent),0 0 0 130px color-mix(in srgb,var(--on-accent) 4%,transparent);pointer-events:none}
section.band>h2{max-width:none;color:inherit}
section.band>h2::before{display:none}
section.band p{font-size:1.08rem;margin:0 auto 22px;max-width:36em}
html section.band .btn{background:var(--on-accent);color:var(--accent);border-color:var(--on-accent);box-shadow:none}
html section.band .btn:hover{background:var(--on-accent);color:var(--accent-h)}
html section.band .btn.sec{background:transparent;color:var(--on-accent);border-color:color-mix(in srgb,var(--on-accent) 60%,transparent)}
html section.band .btn.sec:hover{border-color:var(--on-accent);background:transparent;box-shadow:inset 0 0 0 1px var(--on-accent)}
html section.band .btn:focus-visible{outline-color:var(--on-accent)}
section.band a:not(.btn){color:inherit}

/* ============ Administration (sobre, esprit Parquet) ============ */
html .adm-nav{gap:4px;padding:8px 16px;background:var(--t1-glass);border-bottom:1px solid var(--border);box-shadow:0 6px 20px -18px rgba(27,37,64,.4)}
html .adm-nav a{border-radius:999px;padding:7px 14px;color:var(--muted);font-weight:500;min-height:38px;transition:background-color .2s,color .2s}
html .adm-nav a:hover{background:var(--surface-2);color:var(--text)}
html .adm-nav a[aria-current="page"]{background:var(--text);color:var(--bg);font-weight:600}
html .adm-main>h1,html .adm-main>h2{letter-spacing:-.025em}
html .adm-main .card{border-radius:18px;padding:20px 22px}
html .adm-main .card>h2:first-child,html .adm-main .card>h1:first-child{margin-top:0}
html .adm-main .card>h2:first-child::before{content:"";display:block;width:26px;height:3px;border-radius:3px;background:var(--t1-glow);margin-bottom:10px}
html .adm-main .kpi{border-radius:16px;padding:14px 16px;box-shadow:none;background:var(--surface)}
html .adm-main .kpi .v{font-size:1.55rem}
html .adm-main .kpi .l{color:var(--muted)}
html .tbl-wrap{border:1px solid var(--border);border-radius:14px;background:var(--surface)}
html table.adm{border-collapse:collapse;width:100%}
html table.adm th{background:var(--surface-2);color:var(--muted);text-transform:none;letter-spacing:0;font-size:.8rem;text-align:left}
html table.adm td{color:var(--text)}
html table.adm tbody tr:last-child td{border-bottom:0}
html table.adm tbody tr.click:hover td{background:var(--accent-bg)}
html .toolbar{gap:10px}
html .adm-main input,html .adm-main select,html .adm-main textarea{background:var(--surface);color:var(--text)}
html .pill{border-radius:999px;padding:2px 9px;font-weight:600;color:var(--muted)}
html .preview{border-radius:16px;border-color:var(--border);background:var(--bg)}
html .preview .popt{border-radius:12px;border-width:1.5px}
html .codes{border-radius:12px}
html .thumb{border-radius:12px}
html .minibar{background:var(--t1-glow)}
html .toast{border-radius:999px;padding:11px 20px;font-weight:500;box-shadow:var(--t1-shadow-lg)}
html .toast.err{background:var(--ko);color:var(--bg)}
html details.card>summary{font-weight:600;letter-spacing:-.01em}

/* ============ Pied de page ============ */
html footer.sj-footer{margin-top:48px;padding-top:28px;padding-bottom:12px;border-top:1px solid var(--border);color:var(--muted);font-size:.84rem;line-height:1.7}
html footer.sj-footer a{color:var(--muted);font-weight:500;text-underline-offset:.2em}
html footer.sj-footer a:hover{color:var(--text)}

/* ============ Petits écrans ============ */
@media (max-width:899.98px){
  html .plan.best,html .plan.best:hover{transform:none}
  .sj-main>.hero{padding-top:40px}
}
@media (max-width:560px){
  html .sj-header{padding:10px 14px;min-height:0;gap:8px}
  html .sj-brand{font-size:1.05rem}
  html .sj-header .sj-brand svg{width:28px;height:28px}
  html .sj-header .sj-theme-btn,html .sj-header .btn-app,html .sj-login>summary{min-height:36px;padding:6px 11px;font-size:.82rem}
  html .sj-back{padding:6px 11px;font-size:.84rem}
  .sj-header nav.top{gap:0 2px;font-size:.86rem;margin:0 -8px}
  .sj-header nav.top a{padding:6px 8px}
  html .sj-login-menu{position:fixed;left:14px;right:14px;top:auto;width:auto;max-width:none;margin-top:10px}
  .sj-main:has(>.hero){padding-inline:16px}
  .sj-main:has(>.hero)~.sj-footer{width:calc(100% - 32px)}
  html .sj-header:has(>nav.top){position:relative}
  .sj-main>.hero h1{font-size:clamp(2rem,9vw,2.4rem)}
  .hero .cta .btn{flex:1 1 100%;text-align:center}
  .sj-main>.hero .facts{gap:8px 18px}
  section.block{margin:60px 0}
  html .card{padding:16px 16px;border-radius:18px}
  html .btn{padding:10px 16px}
  html section.band{padding:40px 18px}
  section.band .btn{width:100%;margin:6px 0}
  .plan{padding:26px 20px}
  .faq details{padding:0 14px}
  html .appnav a,html .appnav .nav-more-btn{padding:7px 4px}
  html .appnav .nav-main>li>a,html .appnav .nav-more-btn{border:1px solid var(--border)}
  html .appnav a.active{border-color:var(--text)}
  html .tab,html .dtab,html .subtab{padding:7px 12px}
}

/* ============ Mouvement réduit ============ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html .btn:hover,html .sj-header .btn-app:hover,.feat:hover,.plan:hover{transform:none}
  html .plan.best:hover{transform:translateY(-10px)}
}
@media print{html .sj-header{position:static;backdrop-filter:none}}
@media (min-width:1000px){.sj-header{flex-wrap:nowrap}.sj-header nav.top{min-width:0;flex-wrap:nowrap}.sj-header nav.top a{white-space:nowrap}.sj-header .sj-tagline{display:none}}
.sj-login-menu{right:0;left:auto}
/* 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:#918777;--disabled-bg:#F5EFE6;--disabled-border:#E3D8C7;--disabled-fg:#686B78;--header-text:#1B2540;--ko:#A12C7B;--muted:#5D6173;--ok:#2C794B;--warn:#964219}
@media (prefers-color-scheme:light){html:root[data-theme="auto"][data-accent][data-contrast="normal"]{--ctl-border:#918777;--disabled-bg:#F5EFE6;--disabled-border:#E3D8C7;--disabled-fg:#686B78;--header-text:#1B2540;--ko:#A12C7B;--muted:#5D6173;--ok:#2C794B;--warn:#964219}}
html:root[data-theme="dark"][data-accent][data-contrast="normal"]{--ctl-border:#6A799B;--disabled-bg:#222E48;--disabled-border:#34415F;--disabled-fg:#8D97B3;--header-text:#EEF0F6;--ko:#E88BC4;--muted:#B9C0D3;--ok:#7DC49A;--warn:#E3A07A}
@media (prefers-color-scheme:dark){html:root[data-theme="auto"][data-accent][data-contrast="normal"]{--ctl-border:#6A799B;--disabled-bg:#222E48;--disabled-border:#34415F;--disabled-fg:#8D97B3;--header-text:#EEF0F6;--ko:#E88BC4;--muted:#B9C0D3;--ok:#7DC49A;--warn:#E3A07A}}
html:root[data-theme="light"][data-accent][data-contrast="high"]{--ctl-border:#5D6173;--disabled-bg:#F5EFE6;--disabled-border:#5D6173;--disabled-fg:#1B2540;--header-text:#1B2540;--ko:#8D1469;--muted:#1B2540;--ok:#015B30;--warn:#873506}
@media (prefers-color-scheme:light){html:root[data-theme="auto"][data-accent][data-contrast="high"]{--ctl-border:#5D6173;--disabled-bg:#F5EFE6;--disabled-border:#5D6173;--disabled-fg:#1B2540;--header-text:#1B2540;--ko:#8D1469;--muted:#1B2540;--ok:#015B30;--warn:#873506}}
html:root[data-theme="dark"][data-accent][data-contrast="high"]{--ctl-border:#8A94AE;--disabled-bg:#161D30;--disabled-border:#8A94AE;--disabled-fg:#FFFFFF;--header-text:#EEF0F6;--ko:#F698D1;--muted:#E6E8EE;--ok:#85CCA2;--warn:#F1AD86}
@media (prefers-color-scheme:dark){html:root[data-theme="auto"][data-accent][data-contrast="high"]{--ctl-border:#8A94AE;--disabled-bg:#161D30;--disabled-border:#8A94AE;--disabled-fg:#FFFFFF;--header-text:#EEF0F6;--ko:#F698D1;--muted:#E6E8EE;--ok:#85CCA2;--warn:#F1AD86}}
html:root[data-theme="light"][data-accent="sarcelle"][data-contrast="normal"]{--accent:#B64918;--accent-bg:#FBEDE3;--accent-h:#9A3C12;--focus-ring:#B64918;--on-accent:#FFFFFF}
@media (prefers-color-scheme:light){html:root[data-theme="auto"][data-accent="sarcelle"][data-contrast="normal"]{--accent:#B64918;--accent-bg:#FBEDE3;--accent-h:#9A3C12;--focus-ring:#B64918;--on-accent:#FFFFFF}}
html:root[data-theme="light"][data-accent="bleu"][data-contrast="normal"]{--accent:#2F5AA8;--accent-bg:#E6EDF8;--accent-h:#24478A;--focus-ring:#2F5AA8;--on-accent:#FFFFFF}
@media (prefers-color-scheme:light){html:root[data-theme="auto"][data-accent="bleu"][data-contrast="normal"]{--accent:#2F5AA8;--accent-bg:#E6EDF8;--accent-h:#24478A;--focus-ring:#2F5AA8;--on-accent:#FFFFFF}}
html:root[data-theme="light"][data-accent="orange"][data-contrast="normal"]{--accent:#B64918;--accent-bg:#FBEDE3;--accent-h:#9A3C12;--focus-ring:#B64918;--on-accent:#FFFFFF}
@media (prefers-color-scheme:light){html:root[data-theme="auto"][data-accent="orange"][data-contrast="normal"]{--accent:#B64918;--accent-bg:#FBEDE3;--accent-h:#9A3C12;--focus-ring:#B64918;--on-accent:#FFFFFF}}
html:root[data-theme="light"][data-accent="violet"][data-contrast="normal"]{--accent:#6A3A9E;--accent-bg:#EFE7F7;--accent-h:#522D7B;--focus-ring:#6A3A9E;--on-accent:#FFFFFF}
@media (prefers-color-scheme:light){html:root[data-theme="auto"][data-accent="violet"][data-contrast="normal"]{--accent:#6A3A9E;--accent-bg:#EFE7F7;--accent-h:#522D7B;--focus-ring:#6A3A9E;--on-accent:#FFFFFF}}
html:root[data-theme="dark"][data-accent="sarcelle"][data-contrast="normal"]{--accent:#F08A55;--accent-bg:#372723;--accent-h:#F5A57B;--focus-ring:#F08A55;--on-accent:#1B1206}
@media (prefers-color-scheme:dark){html:root[data-theme="auto"][data-accent="sarcelle"][data-contrast="normal"]{--accent:#F08A55;--accent-bg:#372723;--accent-h:#F5A57B;--focus-ring:#F08A55;--on-accent:#1B1206}}
html:root[data-theme="dark"][data-accent="bleu"][data-contrast="normal"]{--accent:#7EA6E8;--accent-bg:#1E2B45;--accent-h:#9BBBEE;--focus-ring:#7EA6E8;--on-accent:#0B1424}
@media (prefers-color-scheme:dark){html:root[data-theme="auto"][data-accent="bleu"][data-contrast="normal"]{--accent:#7EA6E8;--accent-bg:#1E2B45;--accent-h:#9BBBEE;--focus-ring:#7EA6E8;--on-accent:#0B1424}}
html:root[data-theme="dark"][data-accent="orange"][data-contrast="normal"]{--accent:#F08A55;--accent-bg:#372723;--accent-h:#F5A57B;--focus-ring:#F08A55;--on-accent:#1B1206}
@media (prefers-color-scheme:dark){html:root[data-theme="auto"][data-accent="orange"][data-contrast="normal"]{--accent:#F08A55;--accent-bg:#372723;--accent-h:#F5A57B;--focus-ring:#F08A55;--on-accent:#1B1206}}
html:root[data-theme="dark"][data-accent="violet"][data-contrast="normal"]{--accent:#B79AE8;--accent-bg:#2C2440;--accent-h:#C9B2EE;--focus-ring:#B79AE8;--on-accent:#160E24}
@media (prefers-color-scheme:dark){html:root[data-theme="auto"][data-accent="violet"][data-contrast="normal"]{--accent:#B79AE8;--accent-bg:#2C2440;--accent-h:#C9B2EE;--focus-ring:#B79AE8;--on-accent:#160E24}}
html:root[data-theme="light"][data-accent="sarcelle"][data-contrast="high"]{--accent:#8B3103;--accent-bg:#FBEDE3;--accent-h:#89340C;--focus-ring:#8B3103;--on-accent:#FFFFFF}
@media (prefers-color-scheme:light){html:root[data-theme="auto"][data-accent="sarcelle"][data-contrast="high"]{--accent:#8B3103;--accent-bg:#FBEDE3;--accent-h:#89340C;--focus-ring:#8B3103;--on-accent:#FFFFFF}}
html:root[data-theme="light"][data-accent="bleu"][data-contrast="high"]{--accent:#204A96;--accent-bg:#E6EDF8;--accent-h:#24478A;--focus-ring:#204A96;--on-accent:#FFFFFF}
@media (prefers-color-scheme:light){html:root[data-theme="auto"][data-accent="bleu"][data-contrast="high"]{--accent:#204A96;--accent-bg:#E6EDF8;--accent-h:#24478A;--focus-ring:#204A96;--on-accent:#FFFFFF}}
html:root[data-theme="light"][data-accent="orange"][data-contrast="high"]{--accent:#8B3103;--accent-bg:#FBEDE3;--accent-h:#89340C;--focus-ring:#8B3103;--on-accent:#FFFFFF}
@media (prefers-color-scheme:light){html:root[data-theme="auto"][data-accent="orange"][data-contrast="high"]{--accent:#8B3103;--accent-bg:#FBEDE3;--accent-h:#89340C;--focus-ring:#8B3103;--on-accent:#FFFFFF}}
html:root[data-theme="light"][data-accent="violet"][data-contrast="high"]{--accent:#633296;--accent-bg:#EFE7F7;--accent-h:#522D7B;--focus-ring:#633296;--on-accent:#FFFFFF}
@media (prefers-color-scheme:light){html:root[data-theme="auto"][data-accent="violet"][data-contrast="high"]{--accent:#633296;--accent-bg:#EFE7F7;--accent-h:#522D7B;--focus-ring:#633296;--on-accent:#FFFFFF}}
html:root[data-theme="dark"][data-accent="sarcelle"][data-contrast="high"]{--accent:#FCA275;--accent-bg:#372723;--accent-h:#F5A57B;--focus-ring:#FCA275;--on-accent:#1B1206}
@media (prefers-color-scheme:dark){html:root[data-theme="auto"][data-accent="sarcelle"][data-contrast="high"]{--accent:#FCA275;--accent-bg:#372723;--accent-h:#F5A57B;--focus-ring:#FCA275;--on-accent:#1B1206}}
html:root[data-theme="dark"][data-accent="bleu"][data-contrast="high"]{--accent:#92BBFE;--accent-bg:#1E2B45;--accent-h:#9BBBEE;--focus-ring:#92BBFE;--on-accent:#0B1424}
@media (prefers-color-scheme:dark){html:root[data-theme="auto"][data-accent="bleu"][data-contrast="high"]{--accent:#92BBFE;--accent-bg:#1E2B45;--accent-h:#9BBBEE;--focus-ring:#92BBFE;--on-accent:#0B1424}}
html:root[data-theme="dark"][data-accent="orange"][data-contrast="high"]{--accent:#FCA275;--accent-bg:#372723;--accent-h:#F5A57B;--focus-ring:#FCA275;--on-accent:#1B1206}
@media (prefers-color-scheme:dark){html:root[data-theme="auto"][data-accent="orange"][data-contrast="high"]{--accent:#FCA275;--accent-bg:#372723;--accent-h:#F5A57B;--focus-ring:#FCA275;--on-accent:#1B1206}}
html:root[data-theme="dark"][data-accent="violet"][data-contrast="high"]{--accent:#C5A8F7;--accent-bg:#2C2440;--accent-h:#C9B2EE;--focus-ring:#C5A8F7;--on-accent:#160E24}
@media (prefers-color-scheme:dark){html:root[data-theme="auto"][data-accent="violet"][data-contrast="high"]{--accent:#C5A8F7;--accent-bg:#2C2440;--accent-h:#C9B2EE;--focus-ring:#C5A8F7;--on-accent:#160E24}}
/* 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 */