/* Black Bond v5 : scène 3D « Six fils, une même tresse » (hub Éducation). Fond transparent sur le crème. */
.bb3d-ft{--ft-ink:var(--encre,#241E1A);--ft-muted:var(--muted-2,#5E544C);--ft-lin:var(--lin,#F3ECE1);--ft-line:var(--line,rgba(36,30,26,.12));
  max-width:1200px;margin-inline:auto;padding-block:clamp(32px,6vw,72px);color:var(--ft-ink);font-family:var(--f-body,'Inter','Segoe UI',system-ui,sans-serif);font-size:16px;line-height:1.6}
.bb3d-ft h2{font:700 clamp(30px,4.2vw,48px)/1.15 var(--f-display,'Poppins','Century Gothic',system-ui,sans-serif);letter-spacing:-.01em;margin:0}
.bb3d-ft .bb3d-eyebrow{font:500 14px/1.3 var(--f-body,system-ui,sans-serif);color:var(--sauge,#5B6E5E);margin:0 0 10px}
.bb3d-ft .bb3d-lead{font-size:18px;color:var(--ft-muted);max-width:60ch;margin:14px 0 0}
.bb3d-ft-stage{position:relative;width:100%;aspect-ratio:3/1;margin-top:12px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
.bb3d-ft-svg{position:absolute;inset:0;width:100%;height:100%;transition:opacity .7s ease}
.bb3d-ft-svg g[data-c]{cursor:pointer}
.bb3d-ft-svg path{transition:stroke .3s}
.bb3d-ft-svg.has-on g[data-c]:not(.on) path:nth-child(2){stroke:#E4D8C6}
.bb3d-ft-stage .bb3d-gl{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.bb3d-ft-stage .bb3d-gl canvas{display:block;width:100%!important;height:100%!important}
.bb3d-ft-stage.is-3d .bb3d-gl{opacity:1}
.bb3d-ft-stage.is-3d .bb3d-ft-svg{opacity:0;pointer-events:none}
.bb3d-ft-cap{position:absolute;top:2%;left:clamp(150px,var(--x,50%),calc(100% - 150px));translate:-50% 6px;margin:0;text-align:center;pointer-events:none;opacity:0;transition:opacity .35s,translate .45s cubic-bezier(.2,.7,.2,1),left .45s cubic-bezier(.2,.7,.2,1);max-width:300px}
.bb3d-ft-cap.is-on{opacity:1;translate:-50% 0}
.bb3d-ft-cap b{display:block;font:700 clamp(18px,1.9vw,24px)/1.2 var(--f-display,system-ui,sans-serif);color:var(--c,#241E1A)}
.bb3d-ft-cap span{display:block;font-size:15px;color:var(--ft-muted)}
.bb3d-ft-list{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.bb3d-ft-list a{display:grid;gap:4px;height:100%;box-sizing:border-box;padding:14px 14px 16px;border-radius:var(--r-m,6px);background:var(--ft-lin);color:var(--ft-ink);text-decoration:none;border:1px solid transparent;transition:border-color .2s,background .2s}
.bb3d-ft-list a i{display:block;height:4px;border-radius:2px;background:var(--c);margin-bottom:6px}
.bb3d-ft-list a b{font:600 15px/1.25 var(--f-display,system-ui,sans-serif)}
.bb3d-ft-list a span{font-size:13.5px;line-height:1.4;color:var(--ft-muted)}
.bb3d-ft-list a:hover,.bb3d-ft-list a.is-on{border-color:var(--c);background:#fff}
.bb3d-ft-list a:focus-visible{outline:2px solid var(--c);outline-offset:2px}
@media (max-width:980px){.bb3d-ft-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.bb3d-ft-list{grid-template-columns:1fr 1fr}.bb3d-ft-stage{aspect-ratio:16/9}.bb3d-ft-cap{left:50%!important}}
@media (prefers-reduced-motion:reduce){.bb3d-ft *{transition:none!important}}