/* Questionnaire « Où part votre temps ? » — une question par écran, puis l'analyse. */

#diag{max-width:820px;margin:0 auto;min-height:440px}

/* ---------- barre de progression ---------- */
.dg-bar{height:2px;background:var(--ink-line);border-radius:2px;overflow:hidden;margin-bottom:38px}
.dg-bar i{display:block;height:100%;background:var(--laiton);border-radius:2px;transition:width .45s cubic-bezier(.4,0,.2,1)}

/* ---------- une question ---------- */
.dg-num{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--laiton);margin-bottom:18px}
.dg-q h2{font-size:clamp(27px,3.4vw,42px);line-height:1.18;letter-spacing:-.01em}
.dg-sous{margin-top:14px;color:var(--ink-muted);font-size:16px;max-width:52ch}
.dg-q{animation:dgIn .4s cubic-bezier(.16,1,.3,1) both}
@keyframes dgIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.dg-opts{display:flex;flex-direction:column;gap:10px;margin-top:32px}
.dg-opt{text-align:left;font:inherit;font-size:17px;line-height:1.45;color:var(--creme-ink);
  background:rgba(255,255,255,.55);border:1px solid var(--ink-line);border-radius:14px;
  padding:18px 22px;cursor:pointer;transition:border-color .2s,background .2s,transform .2s;position:relative;padding-right:52px}
.dg-opt:hover{border-color:var(--laiton);background:#fff;transform:translateX(3px)}
.dg-opt::after{content:"";position:absolute;right:20px;top:50%;width:16px;height:16px;margin-top:-8px;
  border:1px solid var(--ink-line);border-radius:50%;transition:.2s}
.dg-opt:hover::after{border-color:var(--laiton)}
.dg-opt.on{border-color:var(--laiton);background:#fff}
.dg-opt.on::after{background:var(--laiton);border-color:var(--laiton);box-shadow:inset 0 0 0 3px #fff}

.dg-back{margin-top:26px;background:none;border:0;font:inherit;font-size:14.5px;color:var(--ink-muted);
  cursor:pointer;text-decoration:underline;text-underline-offset:4px;padding:0}
.dg-back:hover{color:var(--creme-ink)}

/* ---------- l'analyse ---------- */
.dg-res{animation:dgIn .5s cubic-bezier(.16,1,.3,1) both}
.dg-res .dot{margin-bottom:16px}

.dg-chiffre{border-bottom:1px solid var(--ink-line);padding-bottom:36px;margin-bottom:36px}
.dg-chiffre h2{font-size:clamp(34px,5.2vw,62px);line-height:1.08;letter-spacing:-.02em}
.dg-chiffre h2 em{display:block;font-size:.55em;margin-top:6px}
.dg-chiffre .lead{margin-top:20px;color:var(--ink-muted)}

.dg-profil{background:var(--encre);color:var(--creme);border-radius:var(--r);padding:clamp(26px,3.4vw,40px);margin-bottom:34px}
.dg-profil .dot{color:var(--creme)}
.dg-profil h3{font-size:clamp(25px,3vw,34px);margin:4px 0 14px;color:var(--laiton-2)}
.dg-profil p{color:var(--muted);line-height:1.62;max-width:62ch}

.dg-pts h3,.dg-actions h3,.dg-bon h3{font-size:clamp(21px,2.3vw,27px);margin-bottom:24px}
.dg-pt{display:flex;gap:20px;padding:22px 0;border-top:1px solid var(--ink-line)}
.dg-pt>span{flex:none;width:34px;height:34px;border-radius:50%;background:var(--laiton);color:var(--encre);
  display:grid;place-items:center;font-weight:700;font-size:15px}
.dg-pt b{display:block;font-size:18px;line-height:1.35;margin-bottom:8px}
.dg-pt p{color:var(--ink-muted);line-height:1.62;max-width:60ch}

.dg-echo{border-left:2px solid var(--laiton);padding:4px 0 4px 24px;margin:34px 0;font-size:17.5px;line-height:1.65;color:var(--creme-ink);max-width:62ch}

.dg-bon{background:rgba(196,157,95,.1);border:1px solid var(--laiton-dim);border-radius:var(--r);padding:clamp(24px,3vw,36px);margin-bottom:34px}
.dg-bon p{color:var(--ink-muted);line-height:1.62;max-width:60ch}
.dg-bon p+p{margin-top:14px}

.dg-actions{margin-top:44px;padding-top:38px;border-top:1px solid var(--ink-line)}
.dg-act{display:grid;grid-template-columns:170px 1fr;gap:20px;padding:16px 0}
.dg-act b{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--laiton);padding-top:4px}
.dg-act p{color:var(--ink-muted);line-height:1.62}
.dg-si{margin-top:22px;font-style:italic;color:var(--ink-muted);max-width:60ch}

.dg-fin{margin-top:44px;padding-top:38px;border-top:1px solid var(--ink-line)}
.dg-fin h3{font-size:clamp(22px,2.5vw,30px);margin:4px 0 16px}
.dg-fin p{line-height:1.68;max-width:62ch;font-size:17.5px}

/* ---------- le formulaire ---------- */
.dg-form{margin-top:48px;background:var(--encre);color:var(--creme);border-radius:var(--r);padding:clamp(26px,3.6vw,44px)}
.dg-form h3{font-size:clamp(22px,2.5vw,30px);margin-bottom:10px}
.dg-form>p{color:var(--muted);margin-bottom:26px}
.dg-form input[name="_honey"]{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.dg-frow{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.dg-form label{display:block;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.dg-form label small{text-transform:none;letter-spacing:0;font-weight:400;opacity:.75}
.dg-form input{width:100%;margin-top:8px;background:rgba(242,235,221,.06);border:1px solid var(--line);
  border-radius:11px;padding:15px 16px;color:var(--creme);font:inherit;font-size:16px;transition:border-color .2s}
.dg-form input:focus{outline:0;border-color:var(--laiton)}
.dg-ffoot{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:22px}
.dg-ffoot small{color:var(--muted-2);font-size:13px;max-width:34ch;line-height:1.5}
.dg-form .form-msg{margin-top:18px;font-size:15px;color:var(--laiton-2)}
.dg-form .form-msg.ok{color:var(--laiton-2)}

.dg-ou{display:flex;align-items:center;gap:16px;margin:32px 0 26px;color:var(--muted-2);font-size:13px;
  letter-spacing:.2em;text-transform:uppercase}
.dg-ou::before,.dg-ou::after{content:"";flex:1;height:1px;background:var(--line)}
.dg-appel{color:var(--muted);line-height:1.62;display:flex;align-items:center;gap:22px;flex-wrap:wrap}

.dg-methode{margin-top:34px;font-size:14px;line-height:1.66;color:var(--ink-muted);max-width:72ch}
.dg-methode b{color:var(--creme-ink)}

.dg-refaire{margin-top:26px;background:none;border:0;font:inherit;font-size:14.5px;color:var(--ink-muted);
  cursor:pointer;text-decoration:underline;text-underline-offset:4px;padding:0}
.dg-refaire:hover{color:var(--creme-ink)}

@media (max-width:760px){
  #diag{min-height:0}
  .dg-opt{font-size:16px;padding:16px 46px 16px 18px}
  .dg-opt:hover{transform:none}
  .dg-frow{grid-template-columns:1fr}
  .dg-act{grid-template-columns:1fr;gap:6px;padding:14px 0}
  .dg-pt{gap:14px}
  .dg-appel{gap:16px}
  .dg-appel .pill{width:100%;justify-content:center}
  .dg-ffoot .pill{width:100%;justify-content:center}
}