/* 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. */
.bbm-my{--encre:var(--bb-encre,#241E1A);--muted:var(--bb-muted,#6B6058);--bone:var(--bb-bone,#FAF7F2);--lin:var(--bb-lin,#F3ECE1);--line:var(--bb-line,rgba(36,30,26,.12));--argile-fonce:var(--bb-argile-fonce,#A44E24);--sauge:var(--bb-sauge,#5B6E5E);--r-m:var(--bb-r-m,6px);--wrap:var(--bb-wrap,1200px);--f-body:var(--bb-f-body,'Inter','Segoe UI','Helvetica Neue',system-ui,sans-serif);--argile:var(--bb-argile,#C4602F);--g-fond:var(--bb-g-fond,radial-gradient(circle at bottom right,rgba(250,247,242,.28) 0%,#241E1A 62%));--g-mental:var(--bb-g-mental,radial-gradient(circle at top left,#6F8472 0%,#5B6E5E 55%,#3C4A3F 100%));--g-consent:var(--bb-g-consent,radial-gradient(circle at left,#F0C4A6 0%,#D9794A 45%,#C4602F 100%));--g-prat:var(--bb-g-prat,linear-gradient(180deg,#FAF7F2 0%,#EFE3D0 100%));--g-bdsm:var(--bb-g-bdsm,linear-gradient(154deg,#A5738D 0%,#6E2F52 55%,#5A2543 100%));--grenat:var(--bb-grenat,#6E2F52);--g-id:var(--bb-g-id,linear-gradient(180deg,#EDE2D0 0%,#FAF7F2 100%));--f-display:var(--bb-f-display,'Poppins','Century Gothic','Futura',system-ui,sans-serif);--f-bdsm:var(--bb-f-bdsm,'Fraunces','Iowan Old Style',Georgia,serif);--ease:var(--bb-ease,cubic-bezier(.2,.7,.2,1))}
.bbm-my [hidden]{display:none!important}
.bbm-my{--my-ink:var(--encre,#241E1A);--my-muted:var(--muted,#6B6058);--my-bg:var(--bone,#FAF7F2);--my-soft:var(--lin,#F3ECE1);--my-line:var(--line,rgba(36,30,26,.12));--my-myth:var(--argile-fonce,#A44E24);--my-real:var(--sauge,#5B6E5E);--my-r:var(--r-m,6px);
  max-width:var(--wrap,1200px);margin-inline:auto;padding-block:clamp(40px,7vw,96px);color:var(--my-ink);font:400 16px/1.6 var(--f-body,'Inter','Segoe UI',system-ui,sans-serif);position:relative}
.bbm-my a{color:inherit}
.bbm-my :focus-visible{outline:2px solid var(--argile,#C4602F);outline-offset:3px}
.bbm-my-p-fond{--c-g:var(--g-fond,#241E1A);--c-ink:var(--bone,#FAF7F2);--c-acc:var(--encre,#241E1A)}
.bbm-my-p-mental{--c-g:var(--g-mental,#5B6E5E);--c-ink:var(--bone,#FAF7F2);--c-acc:var(--sauge,#5B6E5E)}
.bbm-my-p-consent{--c-g:var(--g-consent,#C4602F);--c-ink:var(--encre,#241E1A);--c-acc:var(--argile-fonce,#A44E24)}
.bbm-my-p-prat{--c-g:var(--g-prat,#EFE3D0);--c-ink:var(--encre,#241E1A);--c-acc:var(--argile-fonce,#A44E24)}
.bbm-my-p-bdsm{--c-g:var(--g-bdsm,#6E2F52);--c-ink:var(--bone,#FAF7F2);--c-acc:var(--grenat,#6E2F52)}
.bbm-my-p-id{--c-g:var(--g-id,#EDE2D0);--c-ink:var(--encre,#241E1A);--c-acc:var(--sauge,#5B6E5E)}

.bbm-my-head{max-width:780px;margin-bottom:28px}
.bbm-my-eyebrow{margin:0 0 12px;font:500 14px/1.3 var(--f-body,'Inter',system-ui,sans-serif);color:var(--sauge,#5B6E5E)}
.bbm-my-h1{margin:0 0 18px;font:700 clamp(34px,5.4vw,64px)/1.04 var(--f-display,'Poppins','Century Gothic',system-ui,sans-serif);letter-spacing:-.025em;text-wrap:balance}
.bbm-my-h1 em{font-family:var(--f-bdsm,'Lora','Iowan Old Style',Georgia,serif);font-weight:500;font-style:italic;letter-spacing:-.01em;color:var(--argile-fonce,#A44E24)}
.bbm-my-lead{margin:0;font-size:18px;color:var(--my-muted);max-width:62ch}

.bbm-my-score{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;margin:0 0 28px;padding:14px 18px;border:1px solid var(--my-line);border-radius:var(--my-r);background:var(--my-soft);font-size:15px}
.bbm-my-score p{margin:0}

.bbm-my-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2.2vw,24px)}
.bbm-my-card{perspective:1400px;min-width:0}
.bbm-my-inner{display:grid;height:100%;min-height:340px;transform-style:preserve-3d;transition:transform .7s var(--ease,cubic-bezier(.2,.7,.2,1))}
.bbm-my-card.is-flipped .bbm-my-inner{transform:rotateY(180deg)}
.bbm-my-face{grid-area:1/1;display:flex;flex-direction:column;gap:14px;padding:22px 22px 20px;border-radius:var(--my-r);backface-visibility:hidden;-webkit-backface-visibility:hidden;min-width:0}
.bbm-my-front{background:var(--c-g);color:var(--c-ink);box-shadow:inset 0 0 0 1px var(--my-line)}
.bbm-my-back{background:#fff;color:var(--my-ink);transform:rotateY(180deg);box-shadow:inset 0 0 0 1px var(--my-line),0 12px 32px -18px rgba(36,30,26,.35);border-top:5px solid var(--c-acc)}

.bbm-my-tag{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;font-weight:500}
.bbm-my-dot{width:9px;height:9px;border-radius:50%;background:currentColor;opacity:.75}
.bbm-my-num{margin-left:auto;font:600 12px var(--f-display,'Poppins',system-ui,sans-serif);opacity:.7;letter-spacing:.04em}
.bbm-my-q{margin:auto 0 0;font:700 clamp(21px,2.1vw,25px)/1.2 var(--f-display,'Poppins',system-ui,sans-serif);letter-spacing:-.015em;text-wrap:balance}
.bbm-my-guess{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.bbm-my-g{min-height:46px;border-radius:var(--my-r);border:1.5px solid currentColor;background:transparent;color:inherit;font:600 15px var(--f-display,'Poppins',system-ui,sans-serif);cursor:pointer;transition:background .2s,color .2s}
.bbm-my-g:hover{background:var(--c-ink);color:var(--my-ink)}
.bbm-my-p-consent .bbm-my-g:hover,.bbm-my-p-prat .bbm-my-g:hover,.bbm-my-p-id .bbm-my-g:hover{color:var(--my-bg)}
.bbm-my-reveal{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;min-height:36px;padding:0;border:0;background:none;color:inherit;font:500 13.5px var(--f-body,'Inter',system-ui,sans-serif);cursor:pointer;text-decoration:underline;text-underline-offset:3px;opacity:.9}
.bbm-my svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.bbm-my-verdict{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0;font:800 clamp(28px,2.8vw,34px)/1 var(--f-display,'Poppins',system-ui,sans-serif);letter-spacing:-.02em;outline:none}
.bbm-my-verdict.is-myth{color:var(--my-myth)}
.bbm-my-verdict.is-real{color:var(--my-real)}
.bbm-my-verdict:focus-visible{outline:2px solid var(--argile,#C4602F);outline-offset:4px}
.bbm-my-res{font:500 13px var(--f-body,'Inter',system-ui,sans-serif);letter-spacing:0;color:var(--my-muted)}
.bbm-my-card.is-ok .bbm-my-res::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--my-real);margin-right:6px}
.bbm-my-card.is-ko .bbm-my-res::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;border:1.5px solid var(--my-muted);margin-right:6px}
.bbm-my-q-small{margin:0;font-size:13.5px;font-style:italic;color:var(--my-muted)}
.bbm-my-a{margin:0;font-size:15px;line-height:1.55}
.bbm-my-src{margin:auto 0 0;font-size:13.5px;color:var(--my-muted)}
.bbm-my-src a{color:var(--my-ink);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.bbm-my-tools{display:flex;flex-wrap:wrap;gap:8px}
.bbm-my-tool{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid var(--my-line);border-radius:var(--my-r);background:#fff;color:var(--my-ink);font:500 13.5px var(--f-body,'Inter',system-ui,sans-serif);cursor:pointer;transition:border-color .2s}
.bbm-my-tool:hover{border-color:var(--my-ink)}

.bbm-my-foot{margin:32px 0 0;font-size:14px;color:var(--my-muted)}
.bbm-my-foot a{text-decoration:underline;text-underline-offset:3px}
.bbm-my-toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);max-width:calc(100vw - 32px);padding:12px 18px;border-radius:var(--my-r);background:var(--my-ink);color:var(--my-bg);font-size:14px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:50}
.bbm-my-toast.is-on{opacity:1;transform:translate(-50%,0)}
.bbm-my-toast:empty{display:none}

@media (max-width:1020px){.bbm-my-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.bbm-my-grid{grid-template-columns:1fr}.bbm-my-inner{min-height:300px}}

/* v9 : carte ouverte par un lien profond */
.bbm-my-card.is-target .bbm-my-inner{border-radius:var(--my-r);box-shadow:0 0 0 3px var(--bone,#FAF7F2),0 0 0 5px var(--argile,#C4602F);animation:bbm-my-pulse 1.6s ease-out 1}
@keyframes bbm-my-pulse{0%{box-shadow:0 0 0 3px var(--bone,#FAF7F2),0 0 0 14px rgba(196,96,47,.35)}100%{box-shadow:0 0 0 3px var(--bone,#FAF7F2),0 0 0 5px var(--argile,#C4602F)}}

/* v9 : mobile, l'en-tête interne laisse la place à la première carte dans le premier écran */
@media (max-width:640px){
  .bbm-my{padding-block:8px 48px}
  .bbm-my-head{margin-bottom:14px}
  .bbm-my-eyebrow{display:none}
  .bbm-my-h1{font-size:30px;line-height:1.08;margin-bottom:10px}
  .bbm-my-lead{font-size:16px;line-height:1.5}
  .bbm-my-score{margin-bottom:16px;padding:10px 14px;font-size:14px;line-height:1.45}
  .bbm-my-inner{min-height:260px}
  .bbm-my-face{gap:12px;padding:18px 18px 16px}
  /* la face avant prend la hauteur du verso (plus long) : question et réponses en haut, « Retourner sans répondre » en bas */
  .bbm-my-q{font-size:21px;margin:10px 0 0}
  .bbm-my-reveal{min-height:44px;margin-top:auto}
  .bbm-my-tool{min-height:44px}
}

/* Mouvement réduit : pas de rotation, un simple fondu entre les deux faces */
@media (prefers-reduced-motion:reduce){
  .bbm-my-inner,.bbm-my-card.is-flipped .bbm-my-inner{transform:none;transition:none}
  .bbm-my-face{backface-visibility:visible;-webkit-backface-visibility:visible;transition:opacity .35s ease,visibility .35s}
  .bbm-my-back{transform:none;opacity:0;visibility:hidden}
  .bbm-my-card.is-flipped .bbm-my-back{opacity:1;visibility:visible}
  .bbm-my-card.is-flipped .bbm-my-front{opacity:0;visibility:hidden}
  .bbm-my-g,.bbm-my-toast{transition:none}
  .bbm-my-card.is-target .bbm-my-inner{animation:none}
}

