/* "Le compartiment": the three pieces of the base get callouts (line + round detail + words) once the sequence is open.
   Wide screens: callouts on the stage, next to each piece. Narrower screens: the same three rows inside the card. */
html:has(#card-compartiment.open) .stage{left:22%}

.parts{position:absolute;inset:0;pointer-events:none;--tx:.75}
.part{position:absolute;left:calc(var(--x)*100%);top:calc(var(--y)*100%);display:flex;align-items:center;gap:10px;transform:translate(-6px,-50%);color:var(--ink)}
.part > i{flex:none;width:12px;height:12px;border-radius:50%;border:1px solid var(--accent);background:color-mix(in srgb,var(--bg) 70%,transparent);opacity:0;transform:scale(.4);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.part > b{flex:none;width:calc((var(--tx) - var(--x))*100cqw);height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.part img{flex:none;width:clamp(44px,3.9vw,58px);height:clamp(44px,3.9vw,58px);border-radius:50%;border:1px solid var(--accent);background:color-mix(in srgb,var(--bg) 80%,transparent);object-fit:cover;opacity:0;transform:scale(.85);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.part p{margin:0;width:clamp(140px,13vw,230px);font-size:13px;line-height:1.5;color:var(--muted);opacity:0;transform:translateX(-6px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.part p strong{display:block;margin-bottom:3px;font-weight:400;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink)}
.part:nth-child(2){--d:.15s}.part:nth-child(3){--d:.3s}
html.exploded .part > i{opacity:1;transform:none;transition-delay:var(--d,0s)}
html.exploded .part > b{transform:none;transition-delay:calc(var(--d,0s) + .1s)}
html.exploded .part img{opacity:1;transform:none;transition-delay:calc(var(--d,0s) + .45s)}
html.exploded .part p{opacity:1;transform:none;transition-delay:calc(var(--d,0s) + .55s)}

/* the same pieces as rows inside the card (shown only where the stage callouts are hidden) */
.parts-list{list-style:none;margin:26px 0 0;padding:0}
.parts-list li{display:flex;align-items:center;gap:16px;padding:14px 0;border-top:1px solid var(--line)}
.parts-list li:last-child{border-bottom:1px solid var(--line)}
.parts-list img{flex:none;width:58px;height:58px;border-radius:50%;border:1px solid var(--accent);background:rgba(233,223,208,.08);object-fit:cover}
.parts-list p{margin:0;font-size:15px;line-height:1.5}
.parts-list strong{display:block;font-weight:400;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin-bottom:2px}

@media (min-width:1260px){.parts-list{display:none}}
@media (max-width:1259px){.parts{display:none}html:has(#card-compartiment.open) .stage{left:28%}}
@media (max-width:820px){html:has(#card-compartiment.open) .stage{left:50%}}
@media (prefers-reduced-motion:reduce){.part > i,.part > b,.part img,.part p{transition:none}}