/* 42.fr · avant / après : comparateur à frontière glissante entre les maquettes 2016 et la refonte */
.ba{padding-top:clamp(24px,3vw,48px);padding-bottom:clamp(80px,9vw,140px)}
.ba-lay{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:28px;align-items:start}
.ba-txt{grid-column:1/4}
.ba-txt p{margin-bottom:1em}
.ba-txt .mono{color:var(--muted)}
.ba-stage{grid-column:4/13;min-width:0}
.ba-cmp{position:relative;aspect-ratio:16/10;max-width:100%;overflow:hidden;background:#000;box-shadow:0 40px 80px -50px rgba(0,0,0,.6);touch-action:pan-y;user-select:none;-webkit-user-select:none;--x:50%}
.ba-cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;pointer-events:none}
.ba-cmp .after{clip-path:inset(0 0 0 var(--x))}
.ba-line{position:absolute;top:0;bottom:0;left:var(--x);width:0;pointer-events:none}
.ba-line::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.ba-knob{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);display:grid;grid-template-columns:repeat(2,8px);gap:4px;padding:12px;background:#fff;box-shadow:0 10px 30px -10px rgba(0,0,0,.5)}
.ba-knob b{width:8px;height:8px;background:var(--ink)}
.ba-knob b:nth-child(2),.ba-knob b:nth-child(3){background:#04809f}
.ba-tag{position:absolute;bottom:14px;padding:6px 10px;background:rgba(0,0,0,.72);color:#fff;pointer-events:none}
.ba-tag.l{left:14px}.ba-tag.r{right:14px;background:#fff;color:var(--ink)}
.ba-cmp input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba-cmp:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:4px}
.ba-cmp.anim .after{transition:clip-path .9s cubic-bezier(.65,0,.35,1)}
.ba-cmp.anim .ba-line{transition:left .9s cubic-bezier(.65,0,.35,1)}
.ba-foot{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.ba-tabs{display:flex;gap:4px 24px;flex-wrap:wrap}
.ba-tabs button{display:flex;align-items:center;gap:10px;min-height:44px;background:none;border:0;padding:0;cursor:pointer;color:var(--muted);font:inherit}
.ba-tabs button i{display:block;width:10px;height:10px;border:1px solid currentColor}
.ba-tabs button[aria-current=true]{color:var(--ink)}
.ba-tabs button[aria-current=true] i{background:currentColor}
.ba-tabs button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.ba-cap{color:var(--muted)}
.ba-dec{grid-column:4/13;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:clamp(28px,3vw,44px) 0 0;padding:0}
.ba-dec li{list-style:none;border-top:1px solid var(--ink);padding-top:14px}
.ba-dec b{display:block;font-weight:500;margin-bottom:6px}
.ba-dec p{color:var(--muted);font-size:.9em}
@media (max-width:1180px){.ba-txt{grid-column:1/-1;max-width:40em}.ba-stage,.ba-dec{grid-column:1/-1}}
@media (max-width:860px){.ba-dec{grid-template-columns:1fr;gap:16px}.ba-cmp{aspect-ratio:4/3}}
@media (max-width:600px){.ba-tag .lg{display:none}.ba-tag{bottom:10px}.ba-tag.l{left:10px}.ba-tag.r{right:10px}}
@media (prefers-reduced-motion:reduce){.ba-cmp.anim .after,.ba-cmp.anim .ba-line{transition:none}}
/* six décisions en grille compacte : 3 × 2 sur grand écran, 2 × 3 en mobile */
.ba-dec{row-gap:18px}
.ba-dec li{padding-top:10px}
.ba-dec b{margin-bottom:2px}
.ba-dec p{font-size:.85em;line-height:1.45}
@media (max-width:860px){.ba-dec{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}}
@media (max-width:420px){.ba-dec b{font-size:.92em}.ba-dec p{font-size:.8em}}
.ba{padding-bottom:clamp(64px,7vw,110px)}