/* Black Bond, maquette v9 : desir (« Désir spontané ou réactif ? », pilier Mental & Émotionnel)
   Préfixe bbds-. Les schémas viennent de BBMOD.schemas (schemas.css, déjà en ligne dans la maquette). */
.bbds{
  --ds-bg:var(--bone,#FAF7F2); --ds-card:var(--lin,#F3ECE1); --ds-ink:var(--encre,#241E1A); --ds-ink2:var(--encre-2,#3A322C);
  --ds-muted:var(--muted,#6B6058); --ds-acc:var(--argile,#C4602F); --ds-acc-d:var(--argile-fonce,#A44E24);
  --ds-sage:var(--sauge,#5B6E5E); --ds-line:rgba(36,30,26,.16); --ds-rad:var(--r-l,22px);
  container-type:inline-size;
  max-width:var(--wrap,1200px);margin:0 auto;padding:clamp(4px,2vw,24px) 0 clamp(32px,5vw,64px);
  color:var(--ds-ink);font-family:var(--f-body,'Inter','Segoe UI',system-ui,sans-serif);background:var(--ds-bg);
}
.bbds *,.bbds *::before,.bbds *::after{box-sizing:border-box}

/* en-tête : court, l'outil doit rester dans le premier écran */
.bbds-head{max-width:72ch;margin-bottom:clamp(14px,2.4vw,24px)}
.bbds-eyebrow{display:block;font:600 12px/1 var(--f-body,'Inter',system-ui,sans-serif);letter-spacing:.16em;text-transform:uppercase;color:var(--ds-sage);margin-bottom:12px}
.bbds-head h2{margin:0 0 12px;font:600 clamp(26px,3.2vw,40px)/1.15 var(--f-display,'Poppins',system-ui,sans-serif);letter-spacing:-.02em;text-wrap:balance}
.bbds-note{padding:10px 14px;border-left:4px solid var(--ds-sage);background:rgba(91,110,94,.09);border-radius:8px;font-size:13.5px;line-height:1.5;color:var(--ds-ink2)}
.bbds-note p{margin:0}
.bbds-more{margin-top:4px}
.bbds-more summary{display:inline-flex;align-items:center;min-height:32px;cursor:pointer;font-weight:600;color:var(--ds-ink);text-decoration:underline;text-underline-offset:3px;list-style:none}
.bbds-more summary::-webkit-details-marker{display:none}
.bbds-more summary::after{content:'+';display:inline-block;margin-left:8px;font-weight:600;text-decoration:none}
.bbds-more[open] summary::after{content:'–'}
.bbds-more p{margin:2px 0 4px}

/* blocs */
.bbds-block{margin-top:clamp(18px,3vw,32px)}
.bbds-bh{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;margin-bottom:10px}
.bbds h3{display:flex;align-items:center;gap:12px;margin:0;font:600 clamp(19px,1.8vw,24px)/1.25 var(--f-display,'Poppins',system-ui,sans-serif);letter-spacing:-.01em;text-wrap:balance}
.bbds-num{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1.6px solid var(--ds-sage);color:var(--ds-sage);font:600 14px/1 var(--f-display,'Poppins',system-ui,sans-serif)}

/* 1. ligne / cercle */
.bbds-seg{display:inline-flex;padding:4px;border-radius:999px;background:var(--ds-card);border:1px solid var(--ds-line)}
.bbds-segb{min-height:44px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:var(--ds-ink);font:600 14px var(--f-display,'Poppins',system-ui,sans-serif);cursor:pointer;transition:background .25s,color .25s}
.bbds-segb small{font:500 11.5px var(--f-body,'Inter',system-ui,sans-serif);color:var(--ds-muted);margin-left:2px}
.bbds-segb[aria-pressed=true]{background:var(--ds-ink);color:var(--ds-bg)}
.bbds-segb[aria-pressed=true] small{color:rgba(250,247,242,.72)}
.bbds-segb:focus-visible{outline:3px solid var(--ds-acc);outline-offset:2px}
.bbds-bridge{margin:0 0 4px;max-width:70ch;font-size:15px;line-height:1.6;color:var(--ds-ink2)}
.bbds-stage{display:grid;gap:0 24px}
.bbds-fig{min-width:0}
.bbds-fig .bbsc{margin:12px 0 0}
.bbds[data-model=lin] .bbds-fig[data-m=basson],.bbds[data-model=basson] .bbds-fig[data-m=lin]{display:none}
.bbds-fb{margin-top:12px;padding:18px 20px;border-radius:var(--ds-rad);background:var(--ds-card)}
.bbds-fb-t{margin:0 0 8px;font:600 17px var(--f-display,'Poppins',system-ui,sans-serif)}
.bbds-fb ol{margin:0;padding-left:1.3em;font-size:14.5px;line-height:1.55}
@container (min-width:900px){
  .bbds-seg{display:none}
  .bbds-stage{grid-template-columns:1fr 1fr}
  .bbds[data-model] .bbds-fig[data-m]{display:block}
  .bbds-stage .bbsc{height:calc(100% - 12px)}
}

/* 2. explorateur */
.bbds-explore{padding:clamp(18px,3vw,32px);border-radius:var(--ds-rad);background:var(--ds-card)}
.bbds-xlead{margin:0;font-size:13.5px;color:var(--ds-muted)}
.bbds-prog{display:flex;gap:6px;margin:4px 0 16px}
.bbds-prog span{flex:1;height:4px;border-radius:4px;background:var(--ds-line);transition:background .3s}
.bbds-prog span.is-done{background:var(--ds-sage)}
.bbds-prog span.is-cur{background:var(--ds-ink)}
.bbds-form{margin:0}
.bbds-q{margin:0;padding:0;border:0;min-width:0}
.bbds-qt{display:block;width:100%;padding:0;margin:0 0 14px;font:600 clamp(18px,1.7vw,22px)/1.3 var(--f-display,'Poppins',system-ui,sans-serif);letter-spacing:-.01em;text-wrap:balance}
.bbds-qt:focus{outline:none}
.bbds-qt:focus-visible{outline:3px solid var(--ds-acc);outline-offset:4px;border-radius:6px}
.bbds-step{display:block;margin-bottom:6px;font:600 12px/1 var(--f-body,'Inter',system-ui,sans-serif);letter-spacing:.12em;text-transform:uppercase;color:var(--ds-sage)}
.bbds-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:10px}
.bbds-opt{position:relative;display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 16px;border-radius:14px;border:1.5px solid var(--ds-line);background:var(--ds-bg);cursor:pointer;font-size:15px;line-height:1.4;transition:border-color .2s,background .2s,transform .2s}
.bbds-opt:hover{border-color:var(--ds-ink)}
.bbds-opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.bbds-opt-b{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--ds-muted);transition:border-color .2s,box-shadow .2s}
.bbds-opt:has(input:checked){border-color:var(--ds-sage);background:rgba(91,110,94,.1)}
.bbds-opt input:checked+.bbds-opt-b{border-color:var(--ds-sage);box-shadow:inset 0 0 0 4px var(--ds-bg),inset 0 0 0 10px var(--ds-sage)}
.bbds-opt:has(input:focus-visible){outline:3px solid var(--ds-acc);outline-offset:2px}
.bbds-nav{display:flex;justify-content:space-between;gap:12px;margin-top:18px}
.bbds-q.is-in{animation:bbds-in .38s var(--ease,cubic-bezier(.2,.7,.2,1)) both}
.bbds-q.is-back{animation:bbds-back .38s var(--ease,cubic-bezier(.2,.7,.2,1)) both}
@keyframes bbds-in{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes bbds-back{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}

/* boutons et liens */
.bbds-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:999px;border:1.5px solid var(--ds-ink);background:var(--ds-ink);color:var(--ds-bg);font:600 14.5px var(--f-display,'Poppins',system-ui,sans-serif);text-decoration:none;cursor:pointer;transition:background .2s,color .2s,opacity .2s}
.bbds-btn:hover{background:var(--ds-ink2)}
.bbds-btn--ghost{background:transparent;color:var(--ds-ink)}
.bbds-btn--ghost:hover{background:var(--ds-ink);color:var(--ds-bg)}
.bbds-btn:disabled{opacity:.35;cursor:default;pointer-events:none}
.bbds-btn:focus-visible,.bbds-link:focus-visible{outline:3px solid var(--ds-acc);outline-offset:3px}
.bbds-btn svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bbds-link{font-weight:600;color:var(--ds-acc-d);text-decoration:underline;text-underline-offset:3px}

/* résultat */
.bbds-res:focus{outline:none}
.bbds-res-top{display:flex;align-items:center;gap:16px;margin-bottom:10px}
.bbds-glyph{flex:none;width:84px;height:auto;overflow:visible}
.bbds-glyph path,.bbds-glyph circle{fill:none;stroke:var(--ds-sage);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.bbds-glyph circle{fill:var(--ds-acc);stroke:none}
.bbds-glyph .bbds-gl-dash{stroke:var(--ds-acc);stroke-dasharray:.06 .05}
.bbds-glyph.is-draw path:not(.bbds-gl-dash){stroke-dasharray:1 1;animation:bbds-draw 1.3s var(--ease,cubic-bezier(.2,.7,.2,1)) both}
@keyframes bbds-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.bbds-res-t{margin:0;font:600 clamp(19px,1.9vw,24px)/1.25 var(--f-display,'Poppins',system-ui,sans-serif);letter-spacing:-.01em;text-wrap:balance;color:var(--ds-ink)}
.bbds-res-t:focus{outline:none}
.bbds-res-t:focus-visible{outline:3px solid var(--ds-acc);outline-offset:4px;border-radius:6px}
.bbds-res-p{margin:0 0 10px;max-width:70ch;font-size:15px;line-height:1.65;color:var(--ds-ink2)}
.bbds-res-c{margin:14px 0 10px;max-width:70ch;padding:12px 14px;border-left:3px solid var(--ds-acc);background:rgba(196,96,47,.07);border-radius:8px;font-size:14.5px;line-height:1.6}
.bbds-res-l{margin:0 0 12px;padding-left:1.2em;max-width:70ch;font-size:14.5px;line-height:1.6;color:var(--ds-ink2)}
.bbds-res-l li{margin-bottom:6px}
.bbds-res-l li::marker{color:var(--ds-sage)}
.bbds-care{max-width:70ch;font-size:13px;line-height:1.55;color:var(--ds-muted)}
.bbds-care p{margin:0 0 8px}
.bbds-care--strong{padding:12px 14px;border-radius:10px;border:1.5px solid var(--ds-sage);background:var(--ds-bg);font-size:14px;color:var(--ds-ink2)}
.bbds-res-a{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}

/* 3. lien vers accélérateur et frein */
.bbds-af{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;padding:18px clamp(18px,3vw,28px);border-radius:var(--ds-rad);border:1.5px dashed var(--ds-sage)}
.bbds-af-k{margin:0 0 4px;font:600 12px/1 var(--f-body,'Inter',system-ui,sans-serif);letter-spacing:.14em;text-transform:uppercase;color:var(--ds-sage)}
.bbds-af-t{margin:0;max-width:56ch;font-size:15px;line-height:1.55}

.bbds-live{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:-1px}
.bbds-src{margin-top:clamp(22px,3vw,36px);padding-top:16px;border-top:1px solid var(--ds-line);font-size:12.5px;line-height:1.6;color:var(--ds-muted);max-width:90ch}
.bbds-src p{margin:0}

/* mobile */
@container (max-width:520px){
  .bbds-bh{flex-direction:column;align-items:stretch}
  .bbds-seg{display:flex}
  .bbds-segb{flex:1;padding:0 8px}
  .bbds-nav .bbds-btn{flex:1;padding:0 12px}
  .bbds-res-a .bbds-btn{flex:1 1 100%}
  .bbds-af .bbds-btn{width:100%}
  .bbds-glyph{width:64px}
}
@media (prefers-reduced-motion:reduce){
  .bbds-q.is-in,.bbds-q.is-back,.bbds-glyph.is-draw path{animation:none!important}
  .bbds *{transition:none!important}
}
.bbds--reduce .bbds-q.is-in,.bbds--reduce .bbds-q.is-back,.bbds--reduce .bbds-glyph path{animation:none!important}

/* Schémas réutilisés (BBMOD.schemas) dans une colonne étroite : avec Poppins chargée, le mode étroit de schemas.css
   (étiquettes à 23 unités) fait se chevaucher les étiquettes de la ligne et croise « Désir réactif » avec la flèche
   du cercle. Correctif limité à cet outil ; à reporter dans schemas.css à l'intégration (voir README). */
@container (max-width:540px){
  .bbds .bbsc--phases-lineaires .bbsc-k.bbsc-sm{font-size:18px}
  .bbds .bbsc--basson .bbsc-k{font-size:20px}
}
@container (max-width:520px){
  .bbds-fig .bbsc{padding:16px 12px}
  .bbds-res-top{flex-direction:column;align-items:flex-start;gap:6px}
}