/* Black Bond v7 : comparateur de contraception et de protection. Variables du :root de la maquette, avec valeurs de repli.
   v9 (existants, 2026-10-06) : accordéons .bbm-ct-acc (filtres, lecture des chiffres, sources), aide au choix .bbm-ct-aide,
   cartes compactes (.bbm-ct-top, grille .bbm-ct-g100), comparaison vide réduite, avertissement de fin allégé.
   Bloc « v9 » en fin de fichier : il complète ou remplace les règles v7 ci-dessus. */
.bbm-ct{--ct-ink:var(--encre,#241E1A);--ct-ink2:var(--encre-2,#3A322C);--ct-muted:var(--muted,#6B6058);--ct-bg:var(--bone,#FAF7F2);--ct-soft:var(--lin,#F3ECE1);--ct-surface:var(--surface,#EFE6D8);--ct-sable:var(--sable,#E4D8C6);--ct-line:var(--line,rgba(36,30,26,.12));--ct-acc:var(--argile,#C4602F);--ct-acc-d:var(--argile-fonce,#A44E24);--ct-sauge:var(--sauge,#5B6E5E);--ct-grenat:var(--grenat,#6E2F52);--ct-r:var(--r-m,14px);--ct-rs:var(--r-s,8px);--ct-paper:#fff;
  max-width:var(--wrap,1200px);margin-inline:auto;padding-block:clamp(32px,6vw,80px);color:var(--ct-ink);font:400 16px/1.6 var(--f-body,'Inter','Segoe UI',system-ui,sans-serif)}
.bbm-ct *,.bbm-ct *::before,.bbm-ct *::after{box-sizing:border-box}
.bbm-ct a{color:var(--ct-acc-d);text-underline-offset:3px}
.bbm-ct a:hover{color:var(--ct-ink)}
.bbm-ct :focus-visible{outline:2px solid var(--ct-acc);outline-offset:3px;border-radius:4px}
.bbm-ct [tabindex="-1"]:focus{outline:none}
.bbm-ct [tabindex="-1"]:focus-visible{outline:2px solid var(--ct-acc)}
.bbm-ct-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.bbm-ct-head{max-width:860px;margin-bottom:28px}
.bbm-ct-eyebrow{margin:0 0 10px;font:600 13px/1.3 var(--f-body,'Inter',system-ui,sans-serif);letter-spacing:.08em;text-transform:uppercase;color:var(--ct-sauge)}
.bbm-ct-h1{margin:0 0 14px;font:700 clamp(32px,5vw,56px)/1.06 var(--f-display,'Poppins','Century Gothic',system-ui,sans-serif);letter-spacing:-.02em;text-wrap:balance}
.bbm-ct-intro{margin:0 0 16px;font-size:18px;color:var(--ct-ink2);max-width:64ch}
.bbm-ct-keys{padding:16px 18px;border-radius:var(--ct-r);background:var(--ct-soft);margin-bottom:14px}
.bbm-ct-keys p{margin:0}
.bbm-ct-keys p + p{margin-top:8px}
.bbm-ct-priv{display:inline-flex;gap:10px;align-items:baseline;margin:0;font-size:14px;color:var(--ct-ink2)}
.bbm-ct-priv span{color:var(--ct-sauge);font-size:10px}
.bbm-ct-h2{margin:0 0 14px;font:600 clamp(20px,2.4vw,24px)/1.25 var(--f-display,'Poppins',system-ui,sans-serif)}

/* Filtres */
.bbm-ct-filters{padding:clamp(16px,3vw,24px);border:1px solid var(--ct-line);border-radius:var(--ct-r);background:var(--ct-paper);margin-bottom:12px}
.bbm-ct-frow{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:flex-end}
.bbm-ct-frow-end{margin-top:16px;justify-content:space-between}
.bbm-ct-seg,.bbm-ct-chks{border:0;margin:0;padding:0;min-width:0}
.bbm-ct-chks{margin-top:16px}
.bbm-ct-seg legend,.bbm-ct-chks legend,.bbm-ct-sort span{padding:0;margin-bottom:8px;font:600 14px/1.3 var(--f-display,'Poppins',system-ui,sans-serif);color:var(--ct-ink2)}
.bbm-ct-seg > div{display:inline-flex;border:1.5px solid var(--ct-ink);border-radius:999px;overflow:hidden}
.bbm-ct-seg label{position:relative;display:block}
.bbm-ct-seg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.bbm-ct-seg span{display:flex;align-items:center;min-height:44px;padding:8px 16px;font-weight:600;font-size:15px;cursor:pointer}
.bbm-ct-seg label + label span{border-left:1px solid var(--ct-line)}
.bbm-ct-seg input:checked + span{background:var(--ct-ink);color:var(--ct-bg)}
.bbm-ct-seg input:focus-visible + span{outline:2px solid var(--ct-acc);outline-offset:-4px}
.bbm-ct-chks > div{display:flex;flex-wrap:wrap;gap:10px}
.bbm-ct-chk{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 14px;border:1.5px solid var(--ct-line);border-radius:999px;cursor:pointer;background:var(--ct-bg)}
.bbm-ct-chk input{width:18px;height:18px;margin:0;accent-color:var(--ct-acc-d)}
.bbm-ct-chk:has(input:checked){border-color:var(--ct-acc-d);background:var(--ct-soft)}
.bbm-ct-chk:has(input:focus-visible){outline:2px solid var(--ct-acc);outline-offset:2px}
.bbm-ct-sort{display:flex;flex-direction:column}
.bbm-ct-sort select{min-height:44px;padding:8px 12px;border:1.5px solid var(--ct-line);border-radius:var(--ct-rs);background:var(--ct-bg);color:var(--ct-ink);font:inherit;max-width:100%}
.bbm-ct-btn{min-height:44px;padding:10px 18px;border-radius:999px;border:1.5px solid var(--ct-ink);background:var(--ct-ink);color:var(--ct-bg);font:600 15px/1.2 var(--f-display,'Poppins',system-ui,sans-serif);cursor:pointer}
.bbm-ct-ghost{background:transparent;color:var(--ct-ink)}
.bbm-ct-ghost:hover{background:var(--ct-soft)}
.bbm-ct-link{background:none;border:0;padding:0;color:var(--ct-acc-d);text-decoration:underline;font:inherit;cursor:pointer;min-height:44px}
.bbm-ct-count{margin:0 0 18px;font-weight:600;color:var(--ct-ink2)}

/* Comparaison */
.bbm-ct-cmp{margin-bottom:28px;padding:clamp(16px,3vw,24px);border-radius:var(--ct-r);background:var(--ct-soft);border:1px solid var(--ct-line)}
.bbm-ct-cmph{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-bottom:12px}
.bbm-ct-cmph .bbm-ct-h2{margin:0}
.bbm-ct-max{margin:0;color:var(--ct-muted);font-size:14px;flex:1 1 200px}
.bbm-ct-cmp-empty{margin:0;color:var(--ct-ink2)}
.bbm-ct-tw{overflow-x:auto;border-radius:var(--ct-rs);border:1px solid var(--ct-line);background:var(--ct-paper)}
.bbm-ct-table{border-collapse:collapse;width:100%;min-width:640px;font-size:15px}
.bbm-ct-table th,.bbm-ct-table td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--ct-line)}
.bbm-ct-table thead th{background:var(--ct-surface);font:600 16px/1.3 var(--f-display,'Poppins',system-ui,sans-serif);min-width:200px}
.bbm-ct-table thead td{background:var(--ct-surface)}
.bbm-ct-table tbody th{width:150px;font-weight:600;color:var(--ct-ink2);background:var(--ct-bg);position:sticky;left:0}
.bbm-ct-table ul{margin:0;padding-left:1.1em}
.bbm-ct-table li{margin-bottom:4px}
.bbm-ct-cl{color:var(--ct-muted);font-size:14px}
.bbm-ct-x{display:block;margin-top:6px;min-height:32px;padding:4px 10px;border:1px solid var(--ct-line);border-radius:999px;background:var(--ct-bg);font:500 13px var(--f-body,'Inter',system-ui,sans-serif);color:var(--ct-ink);cursor:pointer}
.bbm-ct-unit{margin:8px 0 0;font-size:13px;color:var(--ct-muted)}

/* Cartes */
.bbm-ct-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,20px)}
.bbm-ct-card{min-width:0}
.bbm-ct-card article{display:flex;flex-direction:column;height:100%;padding:18px;border:1px solid var(--ct-line);border-top:5px solid var(--c-top,var(--ct-sable));border-radius:var(--ct-r);background:var(--ct-paper)}
.bbm-ct-f-barr{--c-top:var(--ct-acc)}
.bbm-ct-f-horm{--c-top:var(--ct-sauge)}
.bbm-ct-f-diu{--c-top:var(--ct-grenat)}
.bbm-ct-f-nat{--c-top:var(--ct-sable)}
.bbm-ct-f-def{--c-top:var(--ct-ink)}
.bbm-ct-f-urg{--c-top:var(--ct-acc-d)}
.bbm-ct-fam{margin:0 0 4px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ct-muted)}
.bbm-ct-n{margin:0 0 6px;font:600 19px/1.25 var(--f-display,'Poppins',system-ui,sans-serif)}
.bbm-ct-qui{margin:0 0 12px;font-size:15px;color:var(--ct-ink2)}
.bbm-ct-tags{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.bbm-ct-tags li{padding:3px 10px;border-radius:999px;background:var(--ct-soft);font-size:13px;font-weight:500;color:var(--ct-ink2)}
.bbm-ct-tags .is-ist{background:var(--ct-sauge);color:#fff}
.bbm-ct-tags .is-def{background:var(--ct-ink);color:var(--ct-bg)}
.bbm-ct-eff{margin-bottom:12px;padding:12px;border-radius:var(--ct-rs);background:var(--ct-bg)}
.bbm-ct-eff-urg p{margin:0;font-size:15px}
.bbm-ct-lvl{margin:0 0 8px;font-weight:700;font-size:15px}
.bbm-ct-lvl span{font-weight:400;color:var(--ct-muted);font-size:13px}
.bbm-ct-lvl::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;background:currentColor;vertical-align:1px}
.bbm-ct-l1{color:#3C5A42}
.bbm-ct-l2{color:var(--ct-sauge)}
.bbm-ct-l3{color:var(--ct-acc-d)}
.bbm-ct-l4{color:#8A3A1C}
.bbm-ct-nums{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0}
.bbm-ct-nums div{padding:6px 8px;border-radius:6px;background:var(--ct-paper);border:1px solid var(--ct-line)}
.bbm-ct-nums dt{font-size:12px;color:var(--ct-muted)}
.bbm-ct-nums dd{margin:0;font:700 20px/1.2 var(--f-display,'Poppins',system-ui,sans-serif)}
.bbm-ct-eff .bbm-ct-unit{margin-top:6px}
.bbm-ct-det{margin:0 0 12px;border-top:1px solid var(--ct-line);padding-top:10px}
.bbm-ct-det summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:600;color:var(--ct-acc-d)}
.bbm-ct-dl{margin:6px 0 0}
.bbm-ct-dl dt{font-weight:600;font-size:14px;margin-top:10px}
.bbm-ct-dl dd{margin:2px 0 0;font-size:15px}
.bbm-ct-dl ul{margin:0;padding-left:1.1em}
.bbm-ct-src{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--ct-muted)}
.bbm-ct-src a{color:var(--ct-muted)}
.bbm-ct-pick{margin-top:auto;display:inline-flex;align-items:center;gap:10px;min-height:44px;align-self:flex-start;padding:6px 14px;border:1.5px solid var(--ct-ink);border-radius:999px;font-weight:600;cursor:pointer}
.bbm-ct-pick input{width:18px;height:18px;margin:0;accent-color:var(--ct-acc-d)}
.bbm-ct-pick:has(input:checked){background:var(--ct-ink);color:var(--ct-bg)}
.bbm-ct-pick:has(input:disabled){opacity:.45;cursor:not-allowed}
.bbm-ct-pick:has(input:focus-visible){outline:2px solid var(--ct-acc);outline-offset:2px}
.bbm-ct-none{padding:20px;border-radius:var(--ct-r);background:var(--ct-soft)}

/* Pied */
.bbm-ct-foot{margin-top:36px}
.bbm-ct-help{padding:clamp(16px,3vw,24px);border-radius:var(--ct-r);background:var(--ct-soft);margin-bottom:14px}
.bbm-ct-help p{margin:0 0 10px}
.bbm-ct-tel{font-weight:700;white-space:nowrap}
.bbm-ct-allsrc{margin-bottom:14px;padding:12px 16px;border:1px solid var(--ct-line);border-radius:var(--ct-r);background:var(--ct-paper)}
.bbm-ct-allsrc summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:600}
.bbm-ct-allsrc ul{padding-left:1.1em;font-size:14px}
.bbm-ct-allsrc li{margin-bottom:6px}
.bbm-ct-allsrc p{font-size:14px;color:var(--ct-muted)}
.bbm-ct-disc{margin:0;padding:14px 16px;border-radius:var(--ct-rs);background:var(--ct-ink);color:var(--ct-bg);font-weight:600}

/* Intégré dans la maquette : la page porte déjà le H1 */
.modroot .bbm-ct{padding-block:8px 48px}
.modroot .bbm-ct-h1{display:none}

@media (max-width:1024px){.bbm-ct-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .bbm-ct-grid{grid-template-columns:1fr}
  .bbm-ct-seg > div{display:flex}
  .bbm-ct-seg label{flex:1}
  .bbm-ct-seg span{justify-content:center;padding:8px 10px}
  .bbm-ct-frow{flex-direction:column;align-items:stretch}
  .bbm-ct-frow-end{align-items:stretch}
  /* Comparaison sur téléphone : le critère passe en bandeau, les méthodes restent côte à côte */
  .bbm-ct-table{display:block;min-width:0;font-size:14px}
  .bbm-ct-table thead,.bbm-ct-table tbody{display:block}
  .bbm-ct-table tr{display:grid;grid-template-columns:repeat(var(--n,2),minmax(128px,1fr))}
  .bbm-ct-table thead td{display:none}
  .bbm-ct-table thead th{min-width:0;font-size:15px;padding:10px}
  .bbm-ct-table tbody th{grid-column:1/-1;position:static;width:auto;padding:7px 10px;background:var(--ct-soft);font-size:13px;letter-spacing:.02em}
  .bbm-ct-table td{padding:10px;hyphens:auto;overflow-wrap:anywhere}
  .bbm-ct-table td + td,.bbm-ct-table thead th + th{border-left:1px solid var(--ct-line)}
}
/* ---------- v9 ---------- */
.modroot .bbm-ct{padding-block:4px 48px}
.bbm-ct-head{margin-bottom:0}
.bbm-ct-sm{min-height:44px;padding:8px 16px;font-size:14px}
/* accordéons natifs */
.bbm-ct-acc{margin:0 0 12px;border:1px solid var(--ct-line);border-radius:var(--ct-r);background:var(--ct-paper)}
.bbm-ct-acc > summary{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;min-height:48px;padding:10px 44px 10px 16px;position:relative;cursor:pointer;list-style:none;font:600 15px/1.3 var(--f-display,'Poppins',system-ui,sans-serif);color:var(--ct-ink);border-radius:var(--ct-r)}
.bbm-ct-acc > summary::-webkit-details-marker{display:none}
.bbm-ct-acc > summary::after{content:"";position:absolute;right:20px;top:50%;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.bbm-ct-acc[open] > summary::after{transform:translateY(-30%) rotate(-135deg)}
.bbm-ct .bbm-ct-acc > summary:focus-visible{outline:2px solid var(--ct-ink);outline-offset:2px}
.bbm-ct-nf{font:500 13px/1.3 var(--f-body,'Inter',system-ui,sans-serif);color:var(--ct-muted)}
.bbm-ct-facc .bbm-ct-filters{border:0;border-top:1px solid var(--ct-line);border-radius:0 0 var(--ct-r) var(--ct-r);margin:0}
.bbm-ct-keys{margin:0;padding:0 16px 14px;background:none;border-radius:0}
.bbm-ct-keys p{margin:0;font-size:15px}
.bbm-ct-keys p + p{margin-top:8px}
.bbm-ct-allsrc{padding:0}
.bbm-ct-allsrc > ul,.bbm-ct-allsrc > p{margin:0 16px 12px}
.bbm-ct-allsrc > ul{padding-left:1.1em}
/* aide au choix */
.bbm-ct-aide{margin:0 0 12px;padding:16px;border-radius:var(--ct-r);background:var(--ct-soft);border:1px solid var(--ct-line)}
.bbm-ct-aideh{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:6px}
.bbm-ct-aidet{margin:0;font:600 13px/1.3 var(--f-body,'Inter',system-ui,sans-serif);letter-spacing:.06em;text-transform:uppercase;color:var(--ct-sauge)}
.bbm-ct-step{margin:0;font-size:13px;color:var(--ct-muted)}
.bbm-ct-q{margin:0}
.bbm-ct-ql{margin:0 0 10px;font:600 clamp(18px,2.2vw,21px)/1.3 var(--f-display,'Poppins',system-ui,sans-serif)}
.bbm-ct-qo{display:flex;flex-wrap:wrap;gap:8px}
.bbm-ct-ans{min-height:44px;padding:9px 16px;border:1.5px solid var(--ct-ink);border-radius:999px;background:var(--ct-paper);color:var(--ct-ink);font:600 15px/1.25 var(--f-body,'Inter',system-ui,sans-serif);text-align:left;cursor:pointer}
.bbm-ct-ans:hover{background:var(--ct-ink);color:var(--ct-bg)}
.bbm-ct-aidef{margin:8px 0 0;font-size:14px;color:var(--ct-ink2)}
.bbm-ct-aidef .bbm-ct-link{min-height:44px;font-weight:600}
.bbm-ct-aide.is-min{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:10px 16px}
.bbm-ct-aide.is-min p{margin:0;flex:1 1 180px;font-size:14px;color:var(--ct-ink2)}
.bbm-ct-recap{margin:6px 0 10px}
.bbm-ct-aiden{margin:0 0 10px;font-size:14.5px}
.bbm-ct-aidea{display:flex;flex-wrap:wrap;gap:8px}
/* compteur, IST, comparaison */
.bbm-ct-count{margin:4px 0 8px}
.bbm-ct-ist{margin:0 0 12px;padding:10px 14px;border-left:3px solid var(--ct-sauge);background:var(--ct-paper);border-radius:0 var(--ct-rs) var(--ct-rs) 0;font-size:15px}
.bbm-ct-cmp{margin-bottom:20px}
.bbm-ct-cmp.is-empty{padding:0;background:none;border:0;margin-bottom:14px}
.bbm-ct-cmp.is-empty .bbm-ct-cmph{display:none}
.bbm-ct-cmp.is-empty .bbm-ct-cmp-empty{font-size:14px;color:var(--ct-muted)}
/* cartes compactes */
.bbm-ct-card article{padding:16px}
.bbm-ct-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:6px}
.bbm-ct-top .bbm-ct-n{margin:0}
.bbm-ct-pick{margin:0;flex:none;padding:6px 12px;font-size:14px}
.bbm-ct-qm,.bbm-ct-sum,.bbm-ct-eff.is-m{display:none}
.bbm-ct-tags{margin-bottom:10px}
.bbm-ct-eff{display:grid;grid-template-columns:64px minmax(0,1fr);gap:4px 14px;align-items:start;margin-bottom:6px}
.bbm-ct-eff-urg{display:block}
.bbm-ct-eff .bbm-ct-unit{margin-top:6px;font-size:12.5px;line-height:1.4}
.bbm-ct-lvl{margin:0 0 6px}
.bbm-ct-g100{display:block;width:64px;height:64px}
.bbm-ct-g100 circle{fill:none;stroke:var(--ct-sable);stroke-width:1.6}
.bbm-ct-g100 circle.is-on{fill:var(--ct-acc-d);stroke:var(--ct-acc-d)}
.bbm-ct-g100 circle.is-rg{fill:none;stroke:var(--ct-acc-d);stroke-width:2}
.bbm-ct-g100.is-sm{width:84px;height:84px}
.bbm-ct-det{margin:0;padding-top:4px}
.bbm-ct-det summary{min-height:44px;font-size:15px}
/* avertissement de fin : une ligne, l'avertissement de la page fait foi */
.bbm-ct-disc{padding:0;background:none;color:var(--ct-muted);font-weight:400;font-size:13.5px}
.bbm-ct-disc span{color:var(--ct-sauge);font-size:10px;margin-right:6px}
@media (max-width:640px){
  .bbm-ct-qui,.bbm-ct-card article > .bbm-ct-eff{display:none}
  .bbm-ct-qm,.bbm-ct-sum{display:block}
  .bbm-ct-eff.is-m{display:grid;grid-template-columns:84px minmax(0,1fr);margin:4px 0 6px}
  .bbm-ct-eff.is-m .bbm-ct-g100{width:84px;height:84px}
  .bbm-ct-eff-urg.is-m{display:block}
  .bbm-ct-sum{margin:0 0 6px;font-size:14.5px}
  .bbm-ct-sum span{color:var(--ct-ink2);font-weight:500;font-size:14px}
  .bbm-ct-card article{padding:14px}
  .bbm-ct-n{font-size:17px}
  .bbm-ct-tags{gap:4px}
  .bbm-ct-tags li{font-size:12.5px;padding:2px 8px}
  .bbm-ct-eff{grid-template-columns:56px minmax(0,1fr);gap:4px 12px;padding:10px}
  .bbm-ct-g100{width:56px;height:56px;margin-top:2px}
  .bbm-ct-lvl{margin-bottom:2px;font-size:14.5px}
  .bbm-ct-nums{display:flex;flex-wrap:wrap;gap:0 14px}
  .bbm-ct-nums div{display:flex;align-items:baseline;gap:6px;padding:0;border:0;background:none}
  .bbm-ct-nums dt{font-size:12.5px}
  .bbm-ct-nums dd{font-size:17px}
  .bbm-ct-eff .bbm-ct-unit{margin-top:2px;font-size:12px}
  .bbm-ct-tags{margin-bottom:8px}
  .bbm-ct-top{margin-bottom:8px}
  .bbm-ct-ans{flex:1 1 100%}
  .bbm-ct-grid{gap:10px}
  .bbm-ct-foot{margin-top:24px}
}
@media (prefers-reduced-motion:reduce){
  .bbm-ct *,.bbm-ct *::before,.bbm-ct *::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}