/* SBEST - effets sur mesure */
.sbfx{--sb-blue:#0B5FA5;--sb-mark:#C2410C;--sb-ink:#0E1C26;--sb-soft:#56707F;--sb-rule:#C3CED6;--sb-grid:rgba(11,95,165,.10)}
@media (prefers-color-scheme:dark){.sbfx{--sb-ink:#DCE6ED;--sb-soft:#8AA3B2;--sb-rule:#20384A;--sb-blue:#4FA3E3;--sb-mark:#F07B4F;--sb-grid:rgba(79,163,227,.13)}}

/* 01 plan */
.sbfx-plan{position:relative;width:100%;max-width:100%;border:1px solid var(--sb-rule);border-radius:3px;background-image:linear-gradient(var(--sb-grid) 1px,transparent 1px),linear-gradient(90deg,var(--sb-grid) 1px,transparent 1px);background-size:26px 26px}
.sbfx-plan svg{display:block;width:100%;height:auto}
.sbfx-plan .sb-w{fill:none;stroke:var(--sb-blue);stroke-width:3;stroke-linecap:square;stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.sbfx-plan .sb-d{fill:none;stroke:var(--sb-mark);stroke-width:1.2;stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.sbfx-plan text{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;fill:var(--sb-soft);opacity:0}
.sbfx-plan.sb-go .sb-w{animation:sbDraw 1.5s cubic-bezier(.65,.02,.25,1) forwards}
.sbfx-plan.sb-go .sb-d{animation:sbDraw 1s ease-out .9s forwards}
.sbfx-plan.sb-go text{animation:sbFade .5s ease-out 1.3s forwards}
@keyframes sbDraw{to{stroke-dashoffset:0}}
@keyframes sbFade{to{opacity:1}}

/* 02 avant / apres */
.sbfx-ba{position:relative;border:1px solid var(--sb-rule);border-radius:3px;overflow:hidden;max-width:100%;touch-action:none;background:#2a3a44}
.sbfx-ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;margin:0;max-width:none}
.sbfx-ba .sb-before{clip-path:inset(0 50% 0 0)}
.sbfx-ba .sb-tag{position:absolute;bottom:12px;z-index:3;font:500 11px/1 ui-monospace,monospace;letter-spacing:.12em;background:rgba(0,0,0,.6);color:#fff;padding:5px 10px;border-radius:2px}
.sbfx-ba .sb-tag.l{left:12px}.sbfx-ba .sb-tag.r{right:12px}
.sbfx-ba .sb-bar{position:absolute;top:0;bottom:0;left:50%;width:2px;z-index:4;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.35);pointer-events:none}
.sbfx-ba .sb-knob{position:absolute;top:50%;left:50%;z-index:5;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;background:#fff;border:2px solid var(--sb-blue);display:grid;place-items:center;color:var(--sb-blue);font-size:16px;pointer-events:none}
.sbfx-ba input[type=range]{position:absolute;inset:0;z-index:6;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;padding:0}

/* 03 chiffres */
.sbfx-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--sb-rule);border:1px solid var(--sb-rule);border-radius:3px;overflow:hidden}
.sbfx-nums .sb-n{background:#fff;padding:24px 16px;text-align:center}
@media (prefers-color-scheme:dark){.sbfx-nums .sb-n{background:#0E1C26}}
.sbfx-nums .sb-v{font-weight:800;font-size:clamp(30px,6vw,46px);letter-spacing:-.03em;color:var(--sb-blue);font-variant-numeric:tabular-nums;line-height:1}
.sbfx-nums .sb-k{margin-top:8px;font-size:13px;color:var(--sb-soft)}

/* 04 reveal */
html.sbfx-on .sbfx-rv{opacity:0;transform:translateY(26px)}
html.sbfx-on .sbfx-rv.sbfx-in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}

/* 05 coupe */
.sbfx-coupe{display:grid;grid-template-columns:1.2fr .9fr;gap:18px;align-items:center}
@media (max-width:640px){.sbfx-coupe{grid-template-columns:1fr}}
.sbfx-coupe svg{width:100%;height:auto;border:1px solid var(--sb-rule);border-radius:3px;display:block}
.sbfx-coupe .sb-l{cursor:pointer;transition:opacity .2s ease}
.sbfx-coupe.sb-dim .sb-l{opacity:.3}
.sbfx-coupe.sb-dim .sb-l.sb-on{opacity:1}
.sbfx-coupe .sb-leg{min-width:0}
.sbfx-coupe .sb-ln{font-weight:600;font-size:19px;color:var(--sb-ink)}
.sbfx-coupe .sb-ls{font-family:ui-monospace,monospace;font-size:13px;color:var(--sb-mark);margin-top:4px}
.sbfx-coupe .sb-ld{font-size:14.5px;color:var(--sb-soft);margin-top:10px}

@media (prefers-reduced-motion:reduce){
  .sbfx-plan .sb-w,.sbfx-plan .sb-d{stroke-dashoffset:0}
  .sbfx-plan text{opacity:1}
  html.sbfx-on .sbfx-rv{opacity:1;transform:none}
}