/* Black Bond v7 : outil « Quel dépistage, quand ? ». Variables du :root de la maquette, avec valeurs de repli.
   v9 (existants, 2026-10-06) : frise des délais .bbm-dp-fr (traits CSS, révélée de gauche à droite, rien en mouvement réduit),
   carte de rappel .ics (.bbm-dp-ics), avertissement de fin allégé. Bloc « v9 » avant les media queries. */
.bbm-dp{--dp-ink:var(--encre,#241E1A);--dp-ink2:var(--encre-2,#3A322C);--dp-muted:var(--muted,#6B6058);--dp-bg:var(--bone,#FAF7F2);--dp-soft:var(--lin,#F3ECE1);--dp-surface:var(--surface,#EFE6D8);--dp-line:var(--line,rgba(36,30,26,.12));--dp-acc:var(--argile,#C4602F);--dp-acc-d:var(--argile-fonce,#A44E24);--dp-sauge:var(--sauge,#5B6E5E);--dp-r:var(--r-m,14px);--dp-rs:var(--r-s,8px);
  max-width:860px;margin-inline:auto;padding-block:clamp(32px,6vw,80px);color:var(--dp-ink);font:400 16px/1.6 var(--f-body,'Inter','Segoe UI',system-ui,sans-serif)}
.bbm-dp *,.bbm-dp *::before,.bbm-dp *::after{box-sizing:border-box}
.bbm-dp a{color:var(--dp-acc-d);text-underline-offset:3px}
.bbm-dp a:hover{color:var(--dp-ink)}
.bbm-dp :focus-visible{outline:2px solid var(--dp-acc);outline-offset:3px;border-radius:4px}
.bbm-dp-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.bbm-dp-head{margin-bottom:28px}
.bbm-dp-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(--dp-sauge)}
.bbm-dp-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-dp-intro{margin:0 0 14px;font-size:18px;color:var(--dp-ink2);max-width:62ch}
.bbm-dp-priv{display:inline-flex;gap:10px;align-items:baseline;margin:0;padding:10px 14px;border-radius:999px;background:var(--dp-soft);font-size:14px;color:var(--dp-ink2)}
.bbm-dp-priv span{color:var(--dp-sauge);font-size:10px}

.bbm-dp-stage{background:#fff;background:color-mix(in srgb,var(--dp-bg) 40%,#fff);border:1px solid var(--dp-line);border-radius:var(--dp-r);padding:clamp(18px,4vw,36px);box-shadow:var(--shadow,0 1px 2px rgba(36,30,26,.06),0 12px 32px -12px rgba(36,30,26,.22))}
.bbm-dp-prog{margin-bottom:20px}
.bbm-dp-bar{height:8px;border-radius:999px;background:var(--dp-surface);overflow:hidden}
.bbm-dp-bar span{display:block;height:100%;background:var(--dp-acc);border-radius:inherit;transition:width .35s var(--ease,cubic-bezier(.2,.7,.2,1))}
.bbm-dp-count{margin:8px 0 0;font-size:14px;color:var(--dp-muted)}

.bbm-dp-fs{border:0;margin:0 0 22px;padding:0;min-width:0}
.bbm-dp-q{padding:0;margin:0 0 8px;font:600 clamp(21px,2.6vw,27px)/1.25 var(--f-display,'Poppins',system-ui,sans-serif);letter-spacing:-.01em;text-wrap:balance}
.bbm-dp-q:focus{outline:none}
.bbm-dp-q:focus-visible{outline:2px solid var(--dp-acc);outline-offset:4px}
.bbm-dp-fs + .bbm-dp-fs .bbm-dp-q{font-size:20px}
.bbm-dp-help{margin:0 0 16px;color:var(--dp-muted);max-width:64ch}
.bbm-dp-opts{display:grid;gap:10px}
.bbm-dp-opt{position:relative;display:flex;align-items:center;gap:12px;min-height:52px;padding:12px 16px;border:1.5px solid var(--dp-line);border-radius:var(--dp-rs);background:var(--dp-bg);cursor:pointer;transition:border-color .15s,background-color .15s}
.bbm-dp-opt:hover{border-color:var(--dp-acc)}
.bbm-dp-opt input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--dp-acc-d)}
.bbm-dp-opt:has(input:checked){border-color:var(--dp-acc-d);background:var(--dp-soft)}
.bbm-dp-opt:has(input:focus-visible){outline:2px solid var(--dp-acc);outline-offset:2px}

.bbm-dp-nav,.bbm-dp-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:8px}
.bbm-dp-actions{justify-content:flex-start;margin:0 0 24px}
.bbm-dp-btn{min-height:48px;padding:12px 22px;border-radius:999px;border:1.5px solid var(--dp-ink);background:var(--dp-ink);color:var(--dp-bg);font:600 15px/1.2 var(--f-display,'Poppins',system-ui,sans-serif);cursor:pointer;transition:background-color .15s,color .15s}
.bbm-dp-btn:hover{background:var(--dp-acc-d);border-color:var(--dp-acc-d)}
.bbm-dp-btn[aria-disabled="true"]{opacity:.55}
.bbm-dp-ghost{background:transparent;color:var(--dp-ink)}
.bbm-dp-ghost:hover{background:var(--dp-soft);color:var(--dp-ink);border-color:var(--dp-ink)}
.bbm-dp-err{margin:12px 0 0;color:var(--dp-acc-d);font-weight:600;text-align:right}

.bbm-dp-urg{margin:4px 0 18px;padding:16px 18px;border-radius:var(--dp-rs);border-left:5px solid var(--dp-acc-d);background:#FBE9DF;color:var(--dp-ink)}
.bbm-dp-urg p{margin:0}
.bbm-dp-urg p + p{margin-top:6px}
.bbm-dp-urg-t{font-weight:700}

.bbm-dp-rt{margin:0 0 8px;font:700 clamp(26px,3.4vw,36px)/1.15 var(--f-display,'Poppins',system-ui,sans-serif);letter-spacing:-.015em}
.bbm-dp-rt:focus{outline:none}
.bbm-dp-rt:focus-visible{outline:2px solid var(--dp-acc);outline-offset:4px}
.bbm-dp-lead{margin:0 0 16px;color:var(--dp-ink2)}
.bbm-dp-card{margin:0 0 18px;padding:clamp(16px,3vw,24px);border:1px solid var(--dp-line);border-radius:var(--dp-r);background:var(--dp-bg)}
.bbm-dp-card h3{margin:0 0 10px;font:600 20px/1.3 var(--f-display,'Poppins',system-ui,sans-serif)}
.bbm-dp-card p{margin:0 0 10px}
.bbm-dp-card ul{margin:0 0 10px;padding-left:1.2em}
.bbm-dp-card li{margin-bottom:6px}
.bbm-dp-card-urg{border:2px solid var(--dp-acc-d);background:#FBE9DF}
.bbm-dp-card-warn{border-left:5px solid var(--dp-acc);background:var(--dp-soft)}
.bbm-dp-card-soft{background:var(--dp-soft)}
.bbm-dp-tests{list-style:none;padding:0!important;display:grid;gap:12px}
.bbm-dp-tests li{margin:0;padding:14px 16px;border-radius:var(--dp-rs);background:#fff;background:color-mix(in srgb,var(--dp-bg) 30%,#fff);border:1px solid var(--dp-line)}
.bbm-dp-tn{font:600 17px/1.3 var(--f-display,'Poppins',system-ui,sans-serif);margin-bottom:6px!important;color:var(--dp-acc-d)}
.bbm-dp-how span{font-weight:600}
.bbm-dp-src{font-size:13px;line-height:1.5;color:var(--dp-muted);margin:6px 0 0!important}
.bbm-dp-src a{color:var(--dp-muted)}
.bbm-dp-note{font-size:14px;color:var(--dp-ink2)}
.bbm-dp-tw{overflow-x:auto;margin:6px 0 10px;border-radius:var(--dp-rs);border:1px solid var(--dp-line)}
.bbm-dp-table{width:100%;min-width:520px;border-collapse:collapse;font-size:15px;background:#fff;background:color-mix(in srgb,var(--dp-bg) 30%,#fff)}
.bbm-dp-table th,.bbm-dp-table td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--dp-line)}
.bbm-dp-table thead th{background:var(--dp-surface);font:600 14px/1.3 var(--f-display,'Poppins',system-ui,sans-serif)}
.bbm-dp-table tbody th{font-weight:600;width:38%}
.bbm-dp-table tr:last-child th,.bbm-dp-table tr:last-child td{border-bottom:0}
.bbm-dp-where{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.bbm-dp-w{padding:14px 16px;border-radius:var(--dp-rs);border:1px solid var(--dp-line);background:#fff;background:color-mix(in srgb,var(--dp-bg) 30%,#fff)}
.bbm-dp-wt{font:600 16px/1.3 var(--f-display,'Poppins',system-ui,sans-serif);margin-bottom:6px!important}
.bbm-dp-cost{padding:8px 10px;border-radius:6px;background:var(--dp-soft);font-weight:600;font-size:15px}
.bbm-dp-tel{font-weight:700;white-space:nowrap}
.bbm-dp-disc{margin:20px 0 0;padding:14px 16px;border-radius:var(--dp-rs);background:var(--dp-ink);color:var(--dp-bg);font-weight:600}

/* ---------- v9 ---------- */
.bbm-dp-disc{padding:0;background:none;color:var(--dp-muted);font-weight:400;font-size:13.5px}
.bbm-dp-fr{margin:4px 0 16px;padding:14px 16px 12px;border:1px solid var(--dp-line);border-radius:var(--dp-rs);background:#fff;background:color-mix(in srgb,var(--dp-bg) 30%,#fff)}
.bbm-dp-frc{margin:0 0 10px;font:600 15px/1.3 var(--f-display,'Poppins',system-ui,sans-serif)}
.bbm-dp-frl{list-style:none;margin:0;padding:0}
.bbm-dp-card .bbm-dp-frl li{margin:0 0 12px}
.bbm-dp-card .bbm-dp-frn{margin:0 0 5px;font-size:14px;line-height:1.4}
.bbm-dp-frt{position:relative;height:12px;margin-right:6px;animation:bbmDpDraw .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * .12s)}
.bbm-dp-frt span{position:absolute;top:50%;height:0;transform:translateY(-50%)}
.bbm-dp-fs-wait{border-top:2px dashed var(--dp-muted)}
.bbm-dp-fs-var{border-top:2px solid var(--dp-ink2)}
.bbm-dp-fs-ok{border-top:6px solid var(--sauge,#5B6E5E);border-radius:3px}
.bbm-dp-fs-tpe{border-top:6px solid var(--grenat,#6E2F52);border-radius:3px}
.bbm-dp-frt .bbm-dp-fs-dot{width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--sauge,#5B6E5E)}
@keyframes bbmDpDraw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.bbm-dp-frax{position:relative;height:22px;margin:2px 6px 8px 0;border-top:1px solid var(--dp-line);font-size:12px;color:var(--dp-muted)}
.bbm-dp-frax span{position:absolute;top:4px;transform:translateX(-50%);white-space:nowrap}
.bbm-dp-frax span:first-child{transform:none}
.bbm-dp-frax span:last-child{transform:translateX(-100%)}
.bbm-dp-card .bbm-dp-frk{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0 0 6px;font-size:12.5px;color:var(--dp-ink2)}
.bbm-dp-frk span{display:inline-flex;align-items:center;gap:6px}
.bbm-dp-frk i{display:inline-block;width:22px;height:0}
.bbm-dp-frk .k-wait{border-top:2px dashed var(--dp-muted)}
.bbm-dp-frk .k-var{border-top:2px solid var(--dp-ink2)}
.bbm-dp-frk .k-ok{border-top:6px solid var(--sauge,#5B6E5E);border-radius:3px}
.bbm-dp-frk .k-tpe{border-top:6px solid var(--grenat,#6E2F52);border-radius:3px}
.bbm-dp-fr .bbm-dp-note{margin:0;font-size:12.5px;color:var(--dp-muted)}
.bbm-dp-icsok{margin:0 0 10px}
.bbm-dp-ics .bbm-dp-fs{margin:0 0 12px}
.bbm-dp-icsq{margin-bottom:8px;font:600 15px/1.3 var(--f-display,'Poppins',system-ui,sans-serif)}
.bbm-dp-icsdl{display:inline-flex;align-items:center;text-decoration:none}
.bbm-dp a.bbm-dp-icsdl{color:var(--dp-bg)}

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

@media (max-width:640px){
  .bbm-dp-where{grid-template-columns:1fr}
  .bbm-dp-nav{justify-content:stretch}
  .bbm-dp-nav .bbm-dp-btn{flex:1 1 100%}
  .bbm-dp-err{text-align:left}
  .bbm-dp-priv{border-radius:var(--dp-rs);font-size:13px;padding:6px 10px}
  /* v9 (agent principal) : premières réponses dans le premier écran à 390 px */
  .modroot .bbm-dp{padding-top:0}
  .bbm-dp-help{font-size:15px;line-height:1.45;margin-bottom:12px}
  .bbm-dp-stage{padding:16px 14px}
  .bbm-dp-res .bbm-dp-card{padding:14px 12px}
  .bbm-dp-tests li,.bbm-dp-w{padding:12px}
  /* Tableau des délais empilé : pas de défilement horizontal sur téléphone */
  .bbm-dp-tw{overflow:visible;border:0}
  .bbm-dp-table{min-width:0;background:transparent}
  .bbm-dp-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .bbm-dp-table tr{display:block;margin-bottom:8px;border:1px solid var(--dp-line);border-radius:var(--dp-rs);background:#fff;background:color-mix(in srgb,var(--dp-bg) 30%,#fff)}
  .bbm-dp-table th,.bbm-dp-table td{display:block;width:auto!important;border:0;padding:8px 12px}
  .bbm-dp-table tbody th{padding-bottom:0;color:var(--dp-acc-d)}
}
@media (prefers-reduced-motion:reduce){
  .bbm-dp *,.bbm-dp *::before,.bbm-dp *::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}