/* Black Bond Outils : CSS du module (copie de la source effective de la maquette v12).
   Jetons : chaque variable de la maquette lit la variable globale --bb-* du design system (lot L1), repli sur la valeur v12. */
.bbsp{--bone:var(--bb-bone,#FAF7F2);--lin:var(--bb-lin,#F3ECE1);--encre:var(--bb-encre,#241E1A);--muted:var(--bb-muted,#6B6058);--argile:var(--bb-argile,#C4602F);--sauge:var(--bb-sauge,#5B6E5E);--sauge-clair:var(--bb-sauge-clair,#8FA392);--wrap:var(--bb-wrap,1200px);--gutter:var(--bb-gutter,clamp(16px,4vw,32px));--f-body:var(--bb-f-body,'Inter','Segoe UI','Helvetica Neue',system-ui,sans-serif);--f-display:var(--bb-f-display,'Poppins','Century Gothic','Futura',system-ui,sans-serif);--encre-2:var(--bb-encre-2,#3A322C);--argile-fonce:var(--bb-argile-fonce,#A44E24);--r-l:var(--bb-r-l,8px);--r-m:var(--bb-r-m,6px);--hh:var(--bb-hh,124px)}
.bbsp [hidden]{display:none!important}
/* Avertissement de relecture (maquette : healthNote8, .health8.warn9), rendu par le module */
.bbsp .health8{margin-top:18px;padding:14px 18px;border-left:4px solid var(--argile,#C4602F);background:rgba(196,96,47,.08);border-radius:8px;max-width:72ch;font-size:15px;line-height:1.55}
.bbsp .health8 p{margin:0}.bbsp .health8 p+p{margin-top:6px}
.bbsp .health8 a{text-decoration:underline}
.bbsp .warn9{margin-top:14px;padding:0;border-left-width:3px;font-size:14px;line-height:1.45}
.bbsp .warn9 summary{display:block;padding:9px 14px;cursor:pointer;list-style:none;border-radius:0 8px 8px 0}
.bbsp .warn9 summary::-webkit-details-marker{display:none}
.bbsp .warn9 summary:focus-visible{outline:2px solid var(--encre,#241E1A);outline-offset:2px}
.bbsp .warn9-s{font-weight:600;color:var(--encre,#241E1A)}
.bbsp .warn9-m{margin-left:10px;font-weight:500;color:var(--argile-fonce,#A44E24);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.bbsp .warn9-m::after{content:"";display:inline-block;width:6px;height:6px;margin-left:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.bbsp .warn9 details[open] .warn9-m::after{transform:translateY(1px) rotate(-135deg)}
.bbsp .warn9-c,.bbsp .warn9 details[open] .warn9-o{display:none}
.bbsp .warn9 details[open] .warn9-c{display:inline}
.bbsp .warn9-d{padding:0 14px 12px}
.bbsp .warn9-d p{margin:0}
.bbsp .warn9-d p+p{margin-top:6px}
.bbsp{
  --sp-bg:var(--bone,#FAF7F2); --sp-card:var(--lin,#F3ECE1); --sp-ink:var(--encre,#241E1A); --sp-muted:var(--muted,#6B6058);
  --sp-fil:var(--argile,#C4602F); --sp-sage:var(--sauge,#5B6E5E); --sp-ghost:var(--sauge-clair,#8FA392); --sp-line:rgba(36,30,26,.18);
  max-width:var(--wrap,1200px);margin:0 auto;padding:clamp(40px,6vw,80px) var(--gutter,24px);
  color:var(--sp-ink);font-family:var(--f-body,'Inter','Segoe UI',system-ui,sans-serif);background:var(--sp-bg);
}
.bbsp-head{max-width:64ch;margin-bottom:26px}
.bbsp-eyebrow{display:block;font:600 12px/1 var(--f-body,'Inter',system-ui,sans-serif);letter-spacing:.16em;text-transform:uppercase;color:var(--sp-sage);margin-bottom:16px}
.bbsp-head h2{margin:0 0 14px;font:600 clamp(28px,3.4vw,44px)/1.12 var(--f-display,'Poppins',system-ui,sans-serif);letter-spacing:-.02em}
.bbsp-lead{margin:0 0 10px;font-size:clamp(15px,1.2vw,17px);line-height:1.65;color:var(--encre-2,#3A322C)}
.bbsp-privacy{margin:0;font-size:13px;color:var(--sp-muted)}

.bbsp-ex{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.bbsp-ex-l{font-size:13px;color:var(--sp-muted);margin-right:4px}
.bbsp-exb,.bbsp-chip{min-height:36px;padding:6px 14px;border-radius:999px;border:1.5px solid var(--sp-line);background:transparent;color:var(--sp-ink);font:500 13.5px var(--f-body,'Inter',system-ui,sans-serif);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.bbsp-exb:hover,.bbsp-chip:hover{border-color:var(--sp-ink)}
.bbsp-exb[aria-pressed=true]{background:var(--sp-ink);border-color:var(--sp-ink);color:var(--sp-bg)}
.bbsp-exb--me{border-style:dashed;border-color:var(--sp-fil);color:var(--argile-fonce,#A44E24)}
.bbsp-exb:focus-visible,.bbsp-chip:focus-visible,.bbsp-links a:focus-visible{outline:3px solid var(--sp-fil);outline-offset:3px}
.bbsp-mode{margin:0 0 18px;font-size:14.5px;line-height:1.5;min-height:1.5em}
.bbsp-mode span{color:var(--sp-muted)}

/* plateau : 4 rangées, un fil SVG qui passe par les 4 curseurs */
.bbsp-board{position:relative;background:var(--sp-card);border-radius:var(--r-l,22px);padding:8px clamp(16px,3vw,36px)}
.bbsp-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:hidden;z-index:0;border-radius:var(--r-l,22px)}
.bbsp-fil{fill:none;stroke:var(--sp-fil);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.bbsp-ghost{fill:none;stroke:var(--sp-ghost);stroke-width:1.6;stroke-linecap:round;opacity:.45;stroke-dasharray:2 6;transition:opacity .4s}
.bbsp-halo{fill:none;stroke:transparent;stroke-width:1.6}
.bbsp-halo.is-q{stroke:var(--sp-fil);stroke-dasharray:3 5}
.bbsp-row{position:relative;z-index:1;display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);grid-template-areas:"hd trk" "more trk";column-gap:clamp(16px,3vw,40px);row-gap:0;align-items:start;padding:22px 0;border-top:1px solid var(--sp-line)}
.bbsp-hd{grid-area:hd}.bbsp-trk{grid-area:trk}.bbsp-more{grid-area:more}
.bbsp-row:first-of-type{border-top:0}
.bbsp-t{display:block;font:600 18px/1.25 var(--f-display,'Poppins',system-ui,sans-serif);margin-bottom:4px}
.bbsp-q{margin:0 0 10px;font-size:14px;color:var(--sp-muted);line-height:1.45}
.bbsp-who{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:10px}
.bbsp-who-l{font-size:12.5px;color:var(--sp-muted)}
.bbsp-chip{min-height:32px;padding:4px 11px;font-size:12.5px;background:var(--sp-bg)}
.bbsp-chip[aria-pressed=true]{background:var(--sp-sage);border-color:var(--sp-sage);color:var(--bone,#FAF7F2)}
.bbsp-qs{display:inline-flex;gap:8px;align-items:center;font-size:13px;color:var(--sp-muted);cursor:pointer;min-height:32px}
.bbsp-qs input{width:16px;height:16px;accent-color:var(--sp-fil)}
.bbsp-trk{padding-top:4px}
.bbsp input[type=range]{--v:50%;display:block;width:100%;height:34px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.bbsp input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--sp-ink);opacity:1;border-radius:2px;background:linear-gradient(90deg,rgba(36,30,26,.35),rgba(36,30,26,.35))}
.bbsp input[type=range]::-moz-range-track{height:2px;background:rgba(36,30,26,.35)}
.bbsp input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-12px;border-radius:50%;background:var(--sp-bg);border:3px solid var(--sp-fil);box-shadow:0 0 0 4px var(--sp-card)}
.bbsp input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--sp-bg);border:3px solid var(--sp-fil)}
.bbsp input[type=range][data-q]::-webkit-slider-thumb{border-style:dashed}
.bbsp input[type=range][data-q]::-moz-range-thumb{border-style:dashed}
.bbsp input[type=range]:focus-visible{outline:3px solid var(--sp-fil);outline-offset:4px;border-radius:8px}
.bbsp-marks{display:flex;justify-content:space-between;gap:10px;margin-top:6px;font-size:12.5px;line-height:1.35;color:var(--encre-2,#3A322C)}
.bbsp-marks span{flex:1}
.bbsp-marks span:nth-child(2){text-align:center}
.bbsp-marks span:nth-child(3){text-align:right}
.bbsp-h{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--sp-muted);max-width:60ch}

.bbsp-answer{display:flex;gap:14px;align-items:flex-start;margin:26px 0 8px;padding:18px 22px;border-radius:var(--r-m,14px);border:1.5px solid var(--sp-fil);font-size:15px;line-height:1.6;max-width:80ch}
.bbsp-answer svg{flex:none;width:36px;height:18px;margin-top:3px;fill:none;stroke:var(--sp-fil);stroke-width:2;stroke-linecap:round}
.bbsp-sum{margin:8px 0 0;font-size:13px;line-height:1.55;color:var(--sp-muted);max-width:90ch}
.bbsp-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.bbsp-note,.bbsp-links{margin-top:28px;max-width:80ch}
.bbsp-note{padding:20px 22px;background:var(--sp-card);border-radius:var(--r-m,14px);border-left:3px solid var(--sp-sage)}
.bbsp-note h3,.bbsp-links h3{margin:0 0 8px;font:600 17px var(--f-display,'Poppins',system-ui,sans-serif)}
.bbsp-note p{margin:0 0 8px;font-size:14px;line-height:1.6}
.bbsp-note p:last-child{margin:0}
.bbsp-links ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.bbsp-links a{font-size:14px;font-weight:600;color:var(--argile-fonce,#A44E24);text-underline-offset:3px}
.bbsp-links a span{font-weight:400;color:var(--sp-muted)}

.bbsp-mini{display:none}
.bbsp-mline{stroke:rgba(36,30,26,.35);stroke-width:1.6}
.bbsp-mnum{font:600 11px var(--f-body,'Inter',system-ui,sans-serif);fill:var(--sp-muted)}
.bbsp-mdot{fill:var(--sp-bg);stroke:var(--sp-fil);stroke-width:2.6}
.bbsp-mdot.is-q{stroke-dasharray:3 3}
.bbsp-mghost{stroke-width:1.2}
/* mobile : axes empilés ; le fil vit dans un mini-schéma collant, jamais sur le texte */
@media (max-width:760px){
  .bbsp-board .bbsp-svg{display:none}
  .bbsp-mini{display:block;position:sticky;top:var(--hh,0px);z-index:3;margin:0 calc(-1 * var(--gutter,16px)) 10px;padding:8px var(--gutter,16px);background:var(--sp-bg);border-bottom:1px solid var(--sp-line)}
  .bbsp-minisvg{display:block;width:100%;max-width:300px;height:auto;margin:0 auto}
  .bbsp-row{grid-template-columns:1fr;gap:10px}
  .bbsp-t::before{content:attr(data-n);display:inline-grid;place-items:center;width:20px;height:20px;margin-right:8px;border-radius:50%;background:var(--sp-ink);color:var(--sp-bg);font:600 11px var(--f-body,'Inter',system-ui,sans-serif);vertical-align:2px}
  .bbsp-marks{font-size:11.5px}
}

/* ---------- v9 ---------- */
/* le mini-schéma collant se cale sous l'en-tête du site (--hh, posé par la page) au lieu de passer dessous */
.bbsp-acc>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;cursor:pointer;list-style:none;font-size:13px;font-weight:600;color:var(--argile-fonce,#A44E24)}
.bbsp-acc>summary::-webkit-details-marker{display:none}
.bbsp-acc>summary:focus-visible{outline:2px solid var(--encre,#241E1A);outline-offset:2px;border-radius:6px}
.bbsp-chev{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
details[open]>summary>.bbsp-chev{transform:rotate(180deg)}
.bbsp-more .bbsp-acc>summary{justify-content:flex-start}
.bbsp-acc-b{padding-bottom:4px}
.bbsp-acc-b .bbsp-h{margin-top:0}
.bbsp-gl{margin:8px 0 0;font-size:12.5px;line-height:1.6;color:var(--sp-muted)}
.bbsp-gl a{color:var(--argile-fonce,#A44E24);font-weight:600;text-underline-offset:3px}
.bbsp-gl a:focus-visible,.bbsp-note a:focus-visible{outline:2px solid var(--encre,#241E1A);outline-offset:2px;border-radius:3px}
.bbsp-note a{color:var(--argile-fonce,#A44E24);font-weight:600;text-underline-offset:3px}
.bbsp-acc--box{margin-top:28px;max-width:80ch}
.bbsp-acc--box>summary{padding:4px 0;color:var(--sp-ink);border-bottom:1px solid var(--sp-line)}
.bbsp-acc--box>summary h3{margin:0;font:600 17px var(--f-display,'Poppins',system-ui,sans-serif)}
.bbsp-acc--box .bbsp-note,.bbsp-acc--box .bbsp-links{margin-top:12px}
.bbsp-ex-sw{display:none}
.bbsp-export{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:18px}
.bbsp-png{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--sp-ink);background:var(--sp-ink);color:var(--sp-bg);font:600 14px var(--f-body,'Inter',system-ui,sans-serif);cursor:pointer}
.bbsp-png svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bbsp-png:hover{background:var(--encre-2,#3A322C)}
.bbsp-png:focus-visible{outline:3px solid var(--sp-fil);outline-offset:3px}
.bbsp-png-n{margin:0;font-size:12.5px;color:var(--sp-muted)}
@media (max-width:760px){
  .bbsp-row{grid-template-columns:1fr;grid-template-areas:"hd" "trk" "more";padding:16px 0 10px}
  .bbsp-q{margin-bottom:4px}
  .bbsp-more{display:flex;flex-wrap:wrap;align-items:center;column-gap:16px}
  .bbsp-more .bbsp-acc{flex:1 1 100%}
  .bbsp-qs{min-height:44px}
  .bbsp-chip{min-height:40px}
}
@media (max-width:640px){
  .bbsp{padding:6px 0 32px}
  .bbsp-head{margin-bottom:10px}
  .bbsp-ex{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;margin:0 calc(-1 * var(--gutter,16px)) 8px;padding:2px var(--gutter,16px) 8px;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .bbsp-ex-l{flex:none;white-space:nowrap}
  .bbsp-ex-sw{display:inline}
  .bbsp-exb{flex:none;white-space:nowrap;min-height:44px}
  .bbsp-mode{margin-bottom:8px;font-size:14px}
  .bbsp-board{padding:4px 14px}
  .bbsp-answer{padding:14px 16px;font-size:14.5px}
}
@media (prefers-reduced-motion:reduce){.bbsp-chev{transition:none}}
.bbsp--reduce .bbsp-chev{transition:none}