/* SABAB — parcours diagnostic cliente. Palette alignée sur les e-mails The SABAB Mag / Curl System™. */
.sbd{
  --ink:#3B2A22; --muted:#7E685C; --rose:#9A6A5F; --rose-2:#B07F74; --nude:#C9A096; --nude-2:#B88C81;
  --line:#E3CFC6; --blush:#EFE0D8; --paper:#FFFBF8; --bg:#F7EFEA; --err:#9B3B2E;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif; --sans:'DM Sans',Arial,Helvetica,sans-serif;
  font-family:var(--sans); color:var(--ink); background:var(--paper);
  max-width:760px; margin:0 auto; padding:28px 28px 20px; box-sizing:border-box;
  font-size:16px; line-height:1.55; text-align:left;
}
.sbd *,.sbd *::before,.sbd *::after{box-sizing:border-box}
.sbd[data-loading]{min-height:420px}
.sbd button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer}
.sbd :focus-visible{outline:2px solid var(--rose);outline-offset:3px}
.sbd h2:focus{outline:none}

/* Barre de progression */
.sbd-top{display:flex;align-items:center;gap:16px;min-height:28px;margin-bottom:28px;font-size:14px;color:var(--muted)}
.sbd-back{background:none;border:0;padding:4px 0;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.sbd-back:hover{color:var(--ink)}
.sbd-back[hidden]{display:none}
.sbd-prog{flex:1;height:2px;background:var(--line);position:relative}
.sbd-prog i{position:absolute;inset:0 auto 0 0;background:var(--rose-2);transition:width .35s ease}
.sbd-count{white-space:nowrap;font-variant-numeric:tabular-nums}

/* Écrans */
.sbd-screen{animation:sbd-in .28s ease both}
@keyframes sbd-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sbd h2{font-family:var(--serif);font-weight:500;font-size:clamp(28px,4.4vw,38px);line-height:1.12;margin:0 0 10px;color:var(--ink);letter-spacing:-.01em}
.sbd h3{font-family:var(--serif);font-weight:500;font-size:24px;line-height:1.2;margin:0 0 8px;color:var(--ink)}
.sbd p{margin:0 0 14px}
.sbd .sbd-lead{color:var(--muted);max-width:56ch;margin-bottom:24px}
.sbd a{color:var(--rose);text-underline-offset:3px}

/* Options */
.sbd-opts{display:grid;gap:8px;margin:0 0 20px}
.sbd-opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--paper);border:1px solid var(--line);padding:14px 16px;border-radius:3px;transition:border-color .15s,background .15s}
.sbd-opt:hover{border-color:var(--nude-2)}
.sbd-opt[aria-pressed="true"]{background:var(--blush);border-color:var(--rose-2)}
.sbd-opt .sbd-t{flex:1}
.sbd-opt .sbd-t b{display:block;font-weight:500}
.sbd-opt .sbd-t small{display:block;color:var(--muted);font-size:14px;margin-top:2px}
.sbd-mark{flex:none;width:20px;height:20px;border:1.5px solid var(--nude-2);border-radius:50%;display:grid;place-items:center}
.sbd-multi .sbd-mark{border-radius:3px}
.sbd-opt[aria-pressed="true"] .sbd-mark{background:var(--rose);border-color:var(--rose)}
.sbd-opt[aria-pressed="true"] .sbd-mark::after{content:"";width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
.sbd-opt.sbd-none{border-style:dashed}

/* Boutons */
.sbd-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:8px}
.sbd .sbd-btn{display:inline-block;background:var(--nude);color:var(--ink);border:0;padding:15px 30px;font-size:15px;letter-spacing:.04em;text-decoration:none;border-radius:2px;transition:background .15s}
.sbd .sbd-btn:hover{background:var(--nude-2);color:var(--ink)}
.sbd .sbd-btn[disabled]{opacity:.45;cursor:not-allowed}
.sbd .sbd-link{background:none;border:0;padding:6px 0;color:var(--rose);text-decoration:underline;text-underline-offset:3px}

/* Champ texte libre */
.sbd input[type=text],.sbd input[type=email],.sbd input[type=tel],.sbd textarea,.sbd select{width:100%;padding:13px 14px;border:1px solid var(--line);background:#fff;font:inherit;color:var(--ink);border-radius:2px}
.sbd input:focus,.sbd textarea:focus,.sbd select:focus{border-color:var(--rose-2);outline:none;box-shadow:0 0 0 3px rgba(176,127,116,.18)}
.sbd label.sbd-l{display:block;font-size:14px;color:var(--muted);margin:0 0 6px}
.sbd .sbd-field{margin-bottom:18px}
.sbd .sbd-hint{font-size:13px;color:var(--muted);margin-top:6px}
.sbd .sbd-err{color:var(--err);font-size:14px;margin:8px 0 0}

/* ===== Sélecteur de type de cheveux ===== */
.sbd-wk{margin:6px 0 18px}
.sbd-wk-row{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;align-items:end}
.sbd-wk-fam{display:grid;grid-template-columns:1fr 3fr 3fr 3fr;gap:4px;margin-top:8px;font-family:var(--serif);font-style:italic;font-size:17px;color:var(--muted)}
.sbd-wk-fam span{border-top:1px solid var(--line);padding-top:6px;text-align:center}
.sbd .sbd-wk-b{background:none;border:1px solid transparent;border-radius:3px;padding:10px 0 8px;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--rose-2);transition:background .15s,border-color .15s}
.sbd .sbd-wk-b:hover{background:var(--bg)}
.sbd .sbd-wk-b[aria-pressed="true"]{background:var(--blush);border-color:var(--rose-2);color:var(--rose)}
.sbd-wk-b svg{width:100%;max-width:52px;height:78px;overflow:visible}
.sbd-wk-b span{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--ink);line-height:1}
.sbd-wk-d{display:grid;grid-template-columns:120px 1fr;gap:24px;align-items:center;margin-top:22px;padding:22px 24px;background:var(--bg);min-height:190px}
.sbd-wk-d svg{width:120px;height:170px;color:var(--rose);overflow:visible}
.sbd-wk-code{font-family:var(--serif);font-size:56px;line-height:.9;color:var(--rose);font-weight:500}
.sbd-wk-d h3{margin:6px 0 6px}
.sbd-wk-d p{margin:0 0 6px}
.sbd-wk-d .sbd-rep{color:var(--muted);font-size:15px}
.sbd-wk-empty{color:var(--muted);grid-column:1/-1;text-align:center;font-family:var(--serif);font-style:italic;font-size:20px}
.sbd-draw path{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:sbd-draw 1.1s ease-out forwards}
.sbd-draw path:nth-child(2){animation-delay:.12s}.sbd-draw path:nth-child(3){animation-delay:.24s}
@keyframes sbd-draw{to{stroke-dashoffset:0}}

/* Photos */
.sbd-ph{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:18px}
.sbd-ph-s{position:relative;border:1px dashed var(--nude-2);background:var(--paper);min-height:190px;display:flex;flex-direction:column;justify-content:flex-end;padding:14px;border-radius:3px;overflow:hidden}
.sbd-ph-s b{font-weight:500;display:block}
.sbd-ph-s small{color:var(--muted);font-size:14px;display:block;margin-bottom:10px}
.sbd-ph-s input{position:absolute;width:1px;height:1px;opacity:0}
.sbd-ph-s .sbd-pick{align-self:flex-start;background:var(--blush);border:0;padding:9px 14px;font-size:14px;border-radius:2px}
.sbd-ph-s.has{border-style:solid;border-color:var(--rose-2);padding:0}
.sbd-ph-s img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sbd-ph-s .sbd-rm{position:absolute;top:8px;right:8px;background:rgba(255,251,248,.92);border:0;padding:6px 10px;font-size:13px;border-radius:2px}
.sbd-ph-s .sbd-cap{position:relative;margin-top:auto;background:linear-gradient(transparent,rgba(59,42,34,.65));color:#fff;padding:28px 14px 12px;font-size:14px}

/* Coordonnées */
.sbd-row2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.sbd-seg{display:flex;gap:8px;flex-wrap:wrap}
.sbd-seg .sbd-opt{width:auto;padding:10px 16px}
.sbd-check{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.5;margin:0 0 14px;cursor:pointer}
.sbd-check input{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--rose)}
.sbd-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px}
.sbd-legal{font-size:13px;color:var(--muted);margin:4px 0 20px}

/* Analyse */
.sbd-wait{text-align:center;padding:30px 0 10px}
.sbd-wait svg{width:90px;height:130px;color:var(--rose-2)}
.sbd-wait svg path{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:sbd-loop 2.6s ease-in-out infinite}
@keyframes sbd-loop{0%{stroke-dashoffset:var(--len)}55%{stroke-dashoffset:0}100%{stroke-dashoffset:calc(var(--len) * -1)}}
.sbd-wait-msg{color:var(--muted);min-height:1.6em}

/* Résultat */
.sbd-res-k{color:var(--muted);margin-bottom:6px}
.sbd-verdict{border-left:3px solid var(--rose-2);padding:4px 0 4px 18px;margin:8px 0 26px}
.sbd-verdict h2{color:var(--rose)}
.sbd-verdict.v-impossible{border-color:var(--muted)}
.sbd-verdict.v-impossible h2{color:var(--ink)}
.sbd-sec{margin:0 0 26px}
.sbd-dl{display:grid;grid-template-columns:max-content 1fr;gap:8px 20px;margin:0}
.sbd-dl dt{color:var(--muted)}
.sbd-dl dd{margin:0}
.sbd-ol{margin:0;padding-left:1.3em}
.sbd-ol li{margin-bottom:6px}
.sbd-box{background:var(--bg);padding:18px 20px;margin:0 0 26px}
.sbd-box p:last-child{margin:0}
.sbd-score{display:flex;align-items:center;gap:14px;margin:6px 0 18px}
.sbd-score-bar{flex:1;max-width:260px;height:6px;background:var(--line);position:relative}
.sbd-score-bar i{position:absolute;inset:0 auto 0 0;background:var(--rose-2)}
.sbd-score b{font-family:var(--serif);font-size:30px;font-weight:500}
.sbd-recos{list-style:none;margin:0;padding:0}
.sbd-recos li{padding:12px 0;border-top:1px solid var(--line)}
.sbd-recos li:last-child{border-bottom:1px solid var(--line)}
.sbd-recos b{font-weight:500}
.sbd-note{font-size:14px;color:var(--muted)}
.sbd-rappel{margin-top:18px;padding:20px;border:1px solid var(--line)}
.sbd-rappel[hidden]{display:none}
.sbd-ok{color:var(--rose);font-family:var(--serif);font-size:22px}

/* Pied */
.sbd-foot{margin-top:34px;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 14px;justify-content:space-between}
.sbd-foot a{color:var(--muted)}

@media (max-width:640px){
  .sbd{padding:22px 16px 16px}
  .sbd-wk-row{grid-template-columns:repeat(5,1fr);row-gap:8px}
  .sbd-wk-fam{display:none}
  .sbd-wk-d{grid-template-columns:76px 1fr;gap:16px;padding:18px 16px}
  .sbd-wk-d svg{width:76px;height:110px}
  .sbd-wk-code{font-size:44px}
  .sbd-row2{grid-template-columns:1fr}
  .sbd-dl{grid-template-columns:1fr;gap:0}
  .sbd-dl dt{font-size:14px}
  .sbd-dl dd{margin-bottom:10px}
  .sbd .sbd-actions .sbd-btn{width:100%;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .sbd *{animation:none!important;transition:none!important}
  .sbd-draw path,.sbd-wait svg path{stroke-dashoffset:0!important}
}