/* Black Bond, maquette v7 : cercleLimites (pilier Consentement & Relations)
   v9 (existants, 2026-10-06) : barre de placement (.bbcl-bar), étiquette choisie (aria-pressed), thèmes (.bbcl-packs),
   option glisser-déposer (.bbcl--drag : touch-action seulement si l'option est cochée), menu flottant retiré,
   mobile : cercle + barre + étiquettes (deux lignes à défilement horizontal) dans le même écran, accordéon
   « Pour aller plus loin » (.bbcl-acc), résumé imprimable (html.bbcl-printing + @media print). */
.bbcl{
  --cl-bg:var(--bone,#FAF7F2); --cl-card:var(--lin,#F3ECE1); --cl-ink:var(--encre,#241E1A); --cl-muted:var(--muted,#6B6058);
  --cl-acc:var(--argile,#C4602F); --cl-sage:var(--sauge,#5B6E5E); --cl-grenat:var(--grenat,#6E2F52); --cl-line:rgba(36,30,26,.16);
  position:relative;max-width:var(--wrap,1200px);margin:0 auto;padding:clamp(40px,6vw,80px) var(--gutter,24px);
  color:var(--cl-ink);font-family:var(--f-body,'Inter','Segoe UI',system-ui,sans-serif);background:var(--cl-bg);
}
.bbcl-head{max-width:64ch;margin-bottom:20px}
.bbcl-eyebrow{display:block;font:600 12px/1 var(--f-body,'Inter',system-ui,sans-serif);letter-spacing:.16em;text-transform:uppercase;color:var(--cl-acc);margin-bottom:16px}
.bbcl-head h2{margin:0 0 14px;font:600 clamp(26px,3.2vw,40px)/1.15 var(--f-display,'Poppins',system-ui,sans-serif);letter-spacing:-.02em}
.bbcl-lead{margin:0 0 10px;font-size:clamp(15px,1.2vw,17px);line-height:1.65;color:var(--encre-2,#3A322C)}
.bbcl-privacy{margin:0;font-size:13px;color:var(--cl-muted)}
.bbcl-mode{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.bbcl-mode button,.bbcl-actions button,.bbcl-add button{min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--cl-ink);background:transparent;color:var(--cl-ink);font:600 14px var(--f-body,'Inter',system-ui,sans-serif);cursor:pointer}
.bbcl-mode button[aria-pressed=true],.bbcl-next{background:var(--cl-ink)!important;color:var(--cl-bg)!important}
.bbcl button:focus-visible,.bbcl input:focus-visible,.bbcl a:focus-visible,.bbcl-step-t:focus-visible{outline:3px solid var(--cl-acc);outline-offset:3px}
.bbcl-step{margin-bottom:14px;padding:14px 18px;border-left:3px solid var(--cl-grenat);background:var(--cl-card);border-radius:0 var(--r-m,14px) var(--r-m,14px) 0;max-width:72ch}
.bbcl-step-t{margin:0 0 4px;font:600 17px var(--f-display,'Poppins',system-ui,sans-serif)}
.bbcl-step-p{margin:0;font-size:14px;line-height:1.55}

.bbcl-grid{display:grid;grid-template-columns:minmax(0,560px) minmax(260px,1fr);gap:clamp(20px,3vw,44px);align-items:start}
.bbcl-board{position:relative;width:100%;aspect-ratio:1}
.bbcl-board.is-armed{cursor:pointer}
.bbcl-board.is-armed .bbcl-c--oui{fill:rgba(91,110,94,.22)}
.bbcl-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bbcl-c{fill:none;stroke-width:.7}
.bbcl-c--non{stroke:var(--cl-grenat);fill:rgba(110,47,82,.05)}
.bbcl-c--peut{stroke:var(--cl-ink);fill:var(--cl-card);stroke-dasharray:2 2}
.bbcl-c--oui{stroke:var(--cl-sage);fill:rgba(91,110,94,.16);stroke-width:.9}
.bbcl-board[data-hover=oui] .bbcl-c--oui{fill:rgba(91,110,94,.32)}
.bbcl-board[data-hover=peut] .bbcl-c--peut{fill:#EADFCC}
.bbcl-board[data-hover=non] .bbcl-c--non{fill:rgba(110,47,82,.13)}
.bbcl-zl{font:600 5.2px var(--f-body,'Inter',system-ui,sans-serif);letter-spacing:.12em;text-transform:uppercase}
.bbcl-zl--oui{fill:var(--cl-sage)}.bbcl-zl--peut{fill:var(--cl-muted)}.bbcl-zl--non{fill:var(--cl-grenat)}
.bbcl-knot{fill:none;stroke:var(--cl-acc);stroke-width:1.2;stroke-linecap:round;opacity:0}
.bbcl[data-step=res] .bbcl-knot{opacity:0}
.bbcl-layer{position:absolute;inset:0}
.bbcl-chip{display:inline-flex;align-items:center;justify-content:center;min-height:34px;max-width:132px;padding:5px 11px;border-radius:999px;border:1.5px solid var(--cl-ink);background:var(--cl-bg);color:var(--cl-ink);font:500 12.5px/1.2 var(--f-body,'Inter',system-ui,sans-serif);text-align:center;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
.bbcl--drag .bbcl-chip{cursor:grab;touch-action:none}
.bbcl-chip.is-custom{border-style:dashed}
.bbcl-chip.is-placed{position:absolute;transform:translate(-50%,-50%);transition:left .45s cubic-bezier(.2,.7,.2,1),top .45s cubic-bezier(.2,.7,.2,1);box-shadow:0 4px 14px -8px rgba(36,30,26,.5)}
.bbcl-chip[data-z=oui]{border-color:var(--cl-sage);background:#E9EEE7}
.bbcl-chip[data-z=non]{border-color:var(--cl-grenat);color:var(--cl-grenat)}
.bbcl-chip:disabled{cursor:default;opacity:1}
.bbcl-chip.is-dragging{opacity:.3}
.bbcl-ghost{position:fixed;z-index:50;transform:translate(-50%,-50%) rotate(-3deg);pointer-events:none;box-shadow:0 10px 24px -10px rgba(36,30,26,.6)}
.bbcl--reduce .bbcl-chip.is-placed{transition:none}
.bbcl-tray{display:flex;flex-wrap:wrap;gap:8px;padding:14px;min-height:60px;border:1.5px dashed var(--cl-line);border-radius:var(--r-m,14px);background:var(--cl-card)}
.bbcl-tray.is-empty::before{content:'Toutes les étiquettes sont placées.';font-size:13px;color:var(--cl-muted)}
.bbcl[data-step=res] .bbcl-tray,.bbcl[data-step=res] .bbcl-tray-l,.bbcl[data-step=res] .bbcl-bar-b{display:none}
.bbcl[data-step=res] .bbcl-bar-t{margin:0;min-height:0}
.bbcl-add{margin-top:14px}
.bbcl-add label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px}
.bbcl-add div{display:flex;gap:8px}
.bbcl-add input{flex:1;min-width:0;min-height:44px;padding:0 14px;border-radius:999px;border:1.5px solid var(--cl-line);background:var(--cl-bg);font:400 14px var(--f-body,'Inter',system-ui,sans-serif);color:var(--cl-ink)}
.bbcl-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.bbcl-sum{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:6px;font-size:13.5px;line-height:1.5}
.bbcl-sum i{color:var(--cl-muted)}
.bbcl-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.bbcl-remind{display:flex;gap:14px;align-items:flex-start;margin-top:26px;padding:16px 20px;border:1.5px solid var(--cl-acc);border-radius:var(--r-m,14px);max-width:80ch;font-size:14.5px;line-height:1.6}
.bbcl-remind svg{flex:none;width:36px;height:18px;margin-top:3px;fill:none;stroke:var(--cl-acc);stroke-width:2;stroke-linecap:round}
.bbcl-remind p{margin:0}
.bbcl-links{display:flex;flex-direction:column;gap:6px;margin-top:20px}
.bbcl-links a{font-size:14px;font-weight:600;color:var(--argile-fonce,#A44E24);text-underline-offset:3px}
.bbcl-links a span{font-weight:400;color:var(--cl-muted)}
@media (max-width:860px){.bbcl-grid{grid-template-columns:1fr}.bbcl-chip{max-width:104px;font-size:11.5px;padding:4px 8px;min-height:30px}}

/* ---------- v9 ---------- */
.bbcl-chip[aria-pressed=true]{background:var(--cl-ink);border-color:var(--cl-ink);color:var(--cl-bg);box-shadow:0 0 0 3px rgba(196,96,47,.45);z-index:2}
.bbcl-chip.is-placed[aria-pressed=true]{box-shadow:0 0 0 3px rgba(196,96,47,.55),0 6px 16px -8px rgba(36,30,26,.6)}
.bbcl-mode{display:inline-flex;gap:0;padding:3px;border:1.5px solid var(--cl-ink);border-radius:999px}
.bbcl-mode button{border:0;min-height:40px}
.bbcl-bar{padding:12px 14px;border-radius:var(--r-m,14px);background:var(--cl-card);border-left:3px solid var(--cl-acc)}
.bbcl-bar-t{margin:0 0 10px;font-size:14px;line-height:1.45;min-height:2.9em}
.bbcl-bar-t:focus{outline:none}.bbcl-bar-t:focus-visible{outline:2px solid var(--cl-ink);outline-offset:2px}
.bbcl-bar-b{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.bbcl-bar-b button{min-height:44px;padding:0 6px;border-radius:10px;border:1.5px solid var(--cl-line);background:var(--cl-bg);color:var(--cl-ink);font:600 14px var(--f-body,'Inter',system-ui,sans-serif);cursor:pointer}
.bbcl-bar-b button[data-z=oui]{border-color:var(--cl-sage)}
.bbcl-bar-b button[data-z=non]{border-color:var(--cl-grenat);color:var(--cl-grenat)}
.bbcl-bar-b button[aria-pressed=true]{background:var(--cl-ink);color:var(--cl-bg);border-color:var(--cl-ink)}
.bbcl-bar-b button:disabled{opacity:.45;cursor:default}
.bbcl-bar-b button[hidden]{display:none}
.bbcl-bar-b:has(.bbcl-rm[hidden]){grid-template-columns:repeat(3,minmax(0,1fr))}
.bbcl-tray-l{margin:14px 0 6px;font-size:13.5px;font-weight:600}
.bbcl-tray-sw{display:none;font-weight:400;color:var(--cl-muted)}
.bbcl-chip{min-height:40px}
.bbcl-chip.is-placed{min-height:32px}
.bbcl-opts{display:grid;gap:8px;margin-top:12px}
.bbcl-opts[hidden]{display:none}
.bbcl-packs{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.bbcl-packs span{font-size:13px;color:var(--cl-muted);margin-right:2px}
.bbcl-packs button{min-height:40px;padding:0 14px;border-radius:999px;border:1.5px solid var(--cl-line);background:var(--cl-bg);color:var(--cl-ink);font:500 13.5px var(--f-body,'Inter',system-ui,sans-serif);cursor:pointer}
.bbcl-packs button[aria-pressed=true]{background:var(--cl-sage);border-color:var(--cl-sage);color:var(--bone,#FAF7F2)}
.bbcl-packs button[aria-pressed=true]::before{content:"✓ "}
.bbcl-dragopt{display:inline-flex;align-items:center;gap:8px;min-height:40px;font-size:13px;color:var(--cl-muted);cursor:pointer}
.bbcl-dragopt input{width:18px;height:18px;accent-color:var(--cl-acc)}
.bbcl-actions button[hidden]{display:none}
.bbcl-printb{border-color:var(--cl-line)!important}
.bbcl-acc{margin-top:20px;max-width:80ch;border-top:1px solid var(--cl-line)}
.bbcl-acc>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;cursor:pointer;list-style:none;font:600 15px var(--f-display,'Poppins',system-ui,sans-serif)}
.bbcl-acc>summary::-webkit-details-marker{display:none}
.bbcl-acc>summary:focus-visible{outline:2px solid var(--encre,#241E1A);outline-offset:2px;border-radius:6px}
.bbcl-chev{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.bbcl-acc[open]>summary>.bbcl-chev{transform:rotate(180deg)}
.bbcl-acc--opt{margin-top:2px;border-top:0}
.bbcl-acc--opt>summary{font:600 13.5px var(--f-body,'Inter',system-ui,sans-serif);color:var(--argile-fonce,#A44E24);justify-content:flex-start}
.bbcl-acc--opt .bbcl-add{margin-top:0}
.bbcl-acc .bbcl-links{margin-top:4px;padding-bottom:6px}
.bbcl-print{display:none}
.bbcl-grid>*,.bbcl-side{min-width:0}
@media (max-width:860px){
  .bbcl-board{max-width:380px;margin:0 auto}
}
@media (max-width:640px){
  .bbcl{padding:6px 0 32px}
  .bbcl-head{margin-bottom:8px}
  .bbcl-mode{display:flex;width:100%;margin-bottom:10px}
  .bbcl-mode button{flex:1;padding:0 10px}
  .bbcl-grid{gap:10px}
  .bbcl-tray-l{margin-top:10px}
  .bbcl-tray-sw{display:inline}
  .bbcl-tray{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:max-content;justify-content:start;overflow-x:auto;overscroll-behavior-x:contain;gap:6px;padding:8px;min-height:0;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .bbcl-tray .bbcl-chip{max-width:none;white-space:nowrap;font-size:13px;padding:4px 12px}
  .bbcl-tray.is-empty{display:block}
  .bbcl-bar{padding:10px 12px}
  .bbcl-bar-t{font-size:13.5px;margin-bottom:8px}
  .bbcl-remind{padding:14px 16px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){.bbcl-chev{transition:none}.bbcl-chip.is-placed{transition:none}}
.bbcl--reduce .bbcl-chev{transition:none}
@media print{
  html.bbcl-printing body *{visibility:hidden!important}
  html.bbcl-printing .bbcl-print,html.bbcl-printing .bbcl-print *{visibility:visible!important}
  html.bbcl-printing .bbcl-print{display:block!important;position:absolute;left:0;top:0;width:100%;padding:12mm;color:#000;background:#fff;font:12pt/1.5 'Inter',system-ui,sans-serif}
  .bbcl-print h2{margin:0 0 2mm;font:600 18pt 'Poppins',system-ui,sans-serif}
  .bbcl-print h3{margin:6mm 0 2mm;font:600 13pt 'Poppins',system-ui,sans-serif}
  .bbcl-print ul{margin:0;padding-left:6mm}
  .bbcl-print .bbcl-pr-d{margin:0;color:#444}
  .bbcl-print .bbcl-pr-n{margin-top:8mm;padding:3mm 4mm;border:1px solid #000;border-radius:3mm}
  .bbcl-print .bbcl-pr-f{margin-top:6mm;font-size:9pt;color:#444}
}