/* ============================================================
   styles-diagcta.css - interactive mini-diagnostic CTA
   Dark "scanner" card matching the Diagnostic section.
   ============================================================ */
.dgx-wrap{ padding: clamp(36px,4vw,60px) 0; }
.dgx{
  position: relative; overflow: hidden;
  background: var(--ink); color: #fff; border-radius: 26px;
  padding: clamp(26px,3.4vw,46px);
  min-height: 340px;
  opacity: 0; transform: scale(.96) translateY(20px); filter: blur(8px);
  transition: opacity .8s var(--ease), transform .9s var(--ease), filter .8s var(--ease);
}
.dgx.is-in{ opacity: 1; transform: none; filter: blur(0); }
.dgx::before{
  content:""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 130%, var(--coral), transparent 58%);
  opacity: .42;
}
.dgx .scan-corner{ position: absolute; width: 22px; height: 22px; border: 2px solid rgba(255,255,255,.4); z-index: 2; }
.dgx .scan-corner.tl{ top: 22px; left: 22px; border-right: none; border-bottom: none; }
.dgx .scan-corner.tr{ top: 22px; right: 22px; border-left: none; border-bottom: none; }
.dgx .scan-corner.bl{ bottom: 22px; left: 22px; border-right: none; border-top: none; }
.dgx .scan-corner.br{ bottom: 22px; right: 22px; border-left: none; border-top: none; }

/* head */
.dgx-head{ position: relative; z-index: 2; max-width: 880px; margin: 0 auto clamp(26px,3vw,40px); }
.dgx-readout{ display: flex; align-items: center; justify-content: space-between; gap: 14px;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.55); white-space: nowrap; }
.dgx-readout .dot{ display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.85); }
.dgx-readout .dot::before{ content:""; width: 7px; height: 7px; border-radius: 50%; background: var(--coral-tint);
  box-shadow: 0 0 0 4px rgba(255,255,255,.08); animation: pulse 1.6s infinite; }
.dgx-prog{ height: 2px; background: rgba(255,255,255,.16); margin-top: 12px; border-radius: 2px; overflow: hidden; }
.dgx-prog > i{ display: block; height: 100%; background: var(--coral-tint); width: 0; transition: width .5s var(--ease); }

.dgx-body{ position: relative; z-index: 2; max-width: 880px; margin: 0 auto; animation: dgxFade .5s var(--ease) both; }
@keyframes dgxFade{ from{ opacity: 0; transform: translateY(12px); } to{ opacity: 1; transform: none; } }

/* ---- questions ---- */
.dgx-qmeta{ display: flex; align-items: flex-start; gap: 18px; }
.dgx-qidx{ font-family: var(--serif); font-style: italic; font-size: clamp(28px,3.4vw,42px); color: var(--coral-tint); line-height: 1; flex: none; }
.dgx-q{ font-family: var(--sans); font-weight: 800; font-size: clamp(24px,3.2vw,40px); line-height: 1.04; letter-spacing: -.03em; text-wrap: balance; }
.dgx-qsub{ color: rgba(255,255,255,.6); font-size: 15px; margin-top: 8px; }

.dgx-opts{ margin-top: clamp(16px,2vw,24px); display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dgx-opt{
  display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 13px 18px; border-radius: 14px; cursor: pointer;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); color: #fff;
  font: inherit; transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.dgx-opt:hover{ background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.34); transform: translateY(-2px); }
.dgx-opt.sel{ background: #fff; color: var(--ink); border-color: #fff; }
.dgx-opt-ico{ width: 38px; height: 38px; flex: none; border-radius: 10px; display: grid; place-items: center;
  background: rgba(255,255,255,.1); color: var(--coral-tint); transition: background .3s, color .3s; }
.dgx-opt.sel .dgx-opt-ico{ background: var(--coral-tint); color: var(--coral-deep); }
.dgx-opt-ico svg{ width: 19px; height: 19px; }
.dgx-opt-l{ font-size: 16px; font-weight: 600; flex: 1; }
.dgx-opt-go{ opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .3s; color: rgba(0,0,0,.5); }
.dgx-opt-go svg{ width: 18px; height: 18px; }
.dgx-opt:hover .dgx-opt-go{ opacity: .7; transform: none; }

.dgx-foot{ margin-top: 14px; min-height: 20px; display: flex; align-items: center; }
.dgx-back{ background: none; border: none; color: rgba(255,255,255,.7); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; padding: 0; transition: color .3s; }
.dgx-back:hover{ color: #fff; }
.dgx-note{ font-size: 13px; color: rgba(255,255,255,.45); }

/* ---- free text ---- */
.dgx-textarea{ margin-top: clamp(20px,2.6vw,30px); width: 100%; resize: none; font: inherit; font-size: 16px;
  color: #fff; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16); border-radius: 14px;
  padding: 16px 18px; line-height: 1.5; transition: border-color .3s, background .3s; }
.dgx-textarea::placeholder{ color: rgba(255,255,255,.38); }
.dgx-textarea:focus{ outline: none; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.08); }
.dgx-launch-row{ margin-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dgx-launch{ background: #fff; color: var(--ink); }
.dgx-launch:hover{ background: var(--coral-tint); }
.dgx-launch svg{ width: 18px; height: 18px; }
/* Sortie discrète : « je n'ai pas encore de site » (ne bloque personne). */
.dgx-nosite{ display: block; margin: 16px auto 0; background: none; border: none; color: rgba(255,255,255,.5);
  font: inherit; font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; transition: color .3s; }
.dgx-nosite:hover{ color: rgba(255,255,255,.85); }

/* ---- scanning ---- */
.dgx-scanning{ display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(14px,2vw,30px) 0; }
.dgx-scan-ring, .dgx-score-ring{ position: relative; width: 150px; height: 150px; }
.dgx-scan-ring svg, .dgx-score-ring svg{ width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg{ fill: none; stroke: rgba(255,255,255,.14); stroke-width: 6; }
.ring-fg{ fill: none; stroke: var(--coral-tint); stroke-width: 6; stroke-linecap: round;
  stroke-dasharray: 100; transition: stroke-dashoffset .2s linear; }
.dgx-scan-pct{ position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--sans); font-weight: 800; font-size: 34px; }
.dgx-scan-pct small{ font-size: 16px; opacity: .6; margin-left: 1px; }
.dgx-scan-txt{ margin-top: 22px; font-size: 16px; color: rgba(255,255,255,.75); }
.dgx-scan-log{ list-style: none; margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px; }
.dgx-scan-log li{ display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: rgba(255,255,255,.4); transition: color .4s; }
.dgx-scan-log li svg{ width: 15px; height: 15px; opacity: .3; transition: opacity .4s; }
.dgx-scan-log li.on{ color: rgba(255,255,255,.9); }
.dgx-scan-log li.on svg{ opacity: 1; color: var(--coral-tint); }

/* ---- result ---- */
.dgx-result{ text-align: center; }
.dgx-result .dgx-tag{ display: inline-block; }
.dgx-diag{ font-family: var(--sans); font-weight: 800; font-size: clamp(24px,3vw,40px); line-height: 1.08; letter-spacing: -.03em;
  margin: 14px auto 0; max-width: 22ch; text-wrap: balance; }
.dgx-diag-sub{ margin: 16px auto 0; max-width: 52ch; font-size: clamp(15px,1.2vw,17px); line-height: 1.6; color: rgba(255,255,255,.74); }

/* projection - the desire driver */
.dgx-projection{ position: relative; max-width: 620px; margin: clamp(24px,3vw,34px) auto 0;
  padding: clamp(22px,2.6vw,30px) clamp(24px,3vw,34px); text-align: left;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: 18px; }
.dgx-projection::before{ content:""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 3px; background: var(--coral-tint); }
.dgx-proj-label{ display: block; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--coral-tint); margin-bottom: 12px; }
.dgx-proj-txt{ font-family: var(--serif); font-size: clamp(16px,1.5vw,20px); line-height: 1.55; color: #fff; font-style: italic; }

/* roadmap teaser - substance, without the detail */
.dgx-roadmap{ max-width: 620px; margin: clamp(24px,3vw,32px) auto 0; text-align: left; }
.dgx-roadmap-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.dgx-roadmap-title{ font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.dgx-roadmap-note{ font-size: 12px; color: rgba(255,255,255,.45); font-style: italic; }
.dgx-chantiers{ display: flex; flex-direction: column; gap: 10px; }
.dgx-chantier{ display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 14px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  opacity: 0; transform: translateY(12px); animation: dgxRise .55s var(--ease) forwards; animation-delay: calc(var(--i) * .12s + .15s); }
.dgx-chantier-n{ font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--coral-tint); flex: none; line-height: 1; }
.dgx-chantier-b{ display: flex; flex-direction: column; gap: 3px; }
.dgx-chantier-t{ display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; line-height: 1.2; }
.dgx-chantier-badge{ font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); background: var(--coral-tint); padding: 3px 8px; border-radius: 999px; white-space: nowrap; flex: none; }
.dgx-chantier-g{ font-size: 13.5px; color: rgba(255,255,255,.6); }

.dgx-transition{ margin: clamp(24px,3vw,32px) auto 0; max-width: 48ch; font-size: 16px; color: rgba(255,255,255,.78); }

/* ---- formule recommandée - mini-carte d'offre compressée ---- */
.dgx-reco{ max-width: 620px; margin: clamp(22px,2.6vw,30px) auto 0; text-align: left; }
.dgx-reco-l{ display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--coral-tint); margin-bottom: 10px; }
.dgx-reco-l em{ font-style: normal; color: rgba(255,255,255,.5); }
.dgx-reco-card{ position: relative; padding: 20px 22px; border-radius: 16px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.22); }
.dgx-reco-top{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dgx-reco-name{ font-family: var(--sans); font-weight: 800; font-size: clamp(19px,2.1vw,25px); letter-spacing: -.02em; line-height: 1.1; }
.dgx-reco-price{ font-family: var(--serif); font-weight: 500; font-size: clamp(22px,2.4vw,30px); white-space: nowrap; flex: none; }
.dgx-reco-price small{ font-size: 14px; color: rgba(255,255,255,.6); margin-left: 3px; font-family: var(--sans); font-weight: 600; }
.dgx-reco-note{ display: block; font-size: 12.5px; color: rgba(255,255,255,.5); margin-top: 4px; }
.dgx-reco-engage{ display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 8px 12px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 10px;
  font-size: 13px; font-weight: 600; color: #fff; line-height: 1.3; }
.dgx-reco-engage > svg{ width: 15px; height: 15px; flex: none; color: var(--coral-tint); }
.dgx-reco-feats{ list-style: none; margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.dgx-reco-feats li{ display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; line-height: 1.4; color: rgba(255,255,255,.82); }
.dgx-reco-feats li svg{ width: 15px; height: 15px; flex: none; color: var(--coral-tint); margin-top: 2px; }
.dgx-reco-go{ display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; font-size: 13px; font-weight: 700; color: #fff; }
.dgx-reco-go svg{ width: 15px; height: 15px; transition: transform .3s var(--ease); }
.dgx-reco-go:hover svg{ transform: translateX(4px); }

/* ---- lead capture form ---- */
.dgx-form{ max-width: 620px; margin: clamp(26px,3.2vw,36px) auto 0; padding: clamp(22px,2.6vw,30px);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); border-radius: 18px; text-align: left; }
.dgx-form-intro{ display: flex; align-items: flex-start; gap: 14px; }
.dgx-form-ico{ width: 38px; height: 38px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--coral-tint); color: var(--coral-deep); }
.dgx-form-ico svg{ width: 19px; height: 19px; }
.dgx-form-title{ font-family: var(--sans); font-weight: 700; font-size: clamp(17px,1.6vw,21px); letter-spacing: -.02em; line-height: 1.2; }
.dgx-form-sub{ font-size: 14px; color: rgba(255,255,255,.62); margin-top: 5px; line-height: 1.5; }
.dgx-fields{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.dgx-field{ display: flex; flex-direction: column; gap: 6px; }
.dgx-field:last-child{ grid-column: 1 / -1; }
.dgx-field-l{ font-size: 12px; font-weight: 600; letter-spacing: .04em; color: rgba(255,255,255,.7); }
.dgx-field-l em{ font-style: normal; color: rgba(255,255,255,.4); font-weight: 400; }
.dgx-field input{ font: inherit; font-size: 15px; color: #fff; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18); border-radius: 11px; padding: 12px 14px; transition: border-color .25s, background .25s; }
.dgx-field input::placeholder{ color: rgba(255,255,255,.36); }
.dgx-field input:focus{ outline: none; border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.1); }
.dgx-field.has-err input{ border-color: #e8836b; background: rgba(232,131,107,.12); }
.dgx-form-err{ margin-top: 10px; font-size: 13px; color: #f0a591; }
.dgx-form .dgx-book{ width: 100%; margin-top: 18px; background: #fff; color: var(--ink); }
.dgx-form .dgx-book:hover{ background: var(--coral-tint); }
.dgx-form .dgx-cta-alt{ margin-top: 16px; justify-content: flex-start; }
.dgx-form .dgx-cta-alt > span:first-child{ color: rgba(255,255,255,.5); }
.dgx-form .dgx-restart{ margin-top: 14px; }

/* ---- confirmation ---- */
.dgx-sent{ text-align: center; display: flex; flex-direction: column; align-items: center; padding: clamp(12px,2vw,28px) 0; }
.dgx-sent-ico{ width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: var(--coral-tint); color: var(--coral-deep); margin-bottom: 22px; animation: dgxPop .5s var(--ease) both; }
.dgx-sent-ico svg{ width: 30px; height: 30px; }
@keyframes dgxPop{ from{ transform: scale(.4); opacity: 0; } to{ transform: scale(1); opacity: 1; } }
.dgx-sent-title{ font-family: var(--sans); font-weight: 800; font-size: clamp(26px,3.2vw,40px); letter-spacing: -.03em; }
.dgx-sent-txt{ margin-top: 14px; max-width: 46ch; font-size: 16.5px; line-height: 1.6; color: rgba(255,255,255,.82); }
.dgx-sent-note{ margin-top: 14px; max-width: 44ch; font-size: 13px; color: rgba(255,255,255,.5); line-height: 1.55; }
.dgx-sent .dgx-cta-alt{ margin-top: 24px; }
.dgx-sent .dgx-restart{ margin-top: 18px; }
.dgx-tag{ font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--coral-tint); }
.dgx-res-headline .dgx-q{ margin-top: 12px; }
.dgx-res-headline .dgx-qsub{ font-size: 16px; max-width: 48ch; }
.dgx-res-headline .dgx-qsub b{ color: #fff; font-weight: 700; }
.dgx-recap{ list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.dgx-recap li{ font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.8); background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16); padding: 6px 12px; border-radius: 999px; text-transform: capitalize; }
.dgx-score{ display: flex; flex-direction: column; align-items: center; gap: 10px; flex: none; }
.dgx-score-n{ position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--sans); font-weight: 800; font-size: 32px; color: #fff; }
.dgx-score-n small{ font-size: 15px; opacity: .6; }
.dgx-score-l{ font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); text-align: center; line-height: 1.4; }

.dgx-levers{ margin-top: clamp(26px,3.4vw,40px); display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.dgx-lever{ background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 22px 22px 24px;
  opacity: 0; transform: translateY(16px); animation: dgxRise .6s var(--ease) forwards; animation-delay: calc(var(--i) * .12s + .1s); }
@keyframes dgxRise{ to{ opacity: 1; transform: none; } }
.dgx-lever.main{ background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.35); }
.dgx-lever-h{ display: flex; align-items: center; gap: 10px; }
.dgx-lever-ico{ width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.1); color: var(--coral-tint); }
.dgx-lever.main .dgx-lever-ico{ background: var(--coral-tint); color: var(--coral-deep); }
.dgx-lever-ico svg{ width: 18px; height: 18px; }
.dgx-lever-t{ font-size: 15px; font-weight: 700; line-height: 1.15; flex: 1; }
.dgx-lever-badge{ font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); background: var(--coral-tint); padding: 4px 8px; border-radius: 999px; white-space: nowrap; flex: none; }
.dgx-lever-d{ font-size: 13.5px; color: rgba(255,255,255,.62); line-height: 1.55; margin-top: 14px; }
.dgx-lever-bar{ height: 4px; border-radius: 999px; background: rgba(255,255,255,.14); overflow: hidden; margin-top: 18px; }
.dgx-lever-bar i{ display: block; height: 100%; background: var(--coral-tint); border-radius: 999px; width: 0; animation: dgxBar 1s var(--ease) .5s forwards; }
@keyframes dgxBar{ from{ width: 0; } }

.dgx-cta{ margin-top: clamp(28px,3.4vw,40px); display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.dgx-book{ background: #fff; color: var(--ink); }
.dgx-book:hover{ background: var(--coral-tint); }
.dgx-book svg{ width: 18px; height: 18px; }
.dgx-cta-alt{ display: inline-flex; align-items: center; gap: 12px; font-size: 14px; color: rgba(255,255,255,.7); flex-wrap: wrap; justify-content: center; }
.dgx-cta-alt a{ display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.78); font-weight: 600; transition: color .3s; white-space: nowrap; }
.dgx-cta-alt a:hover{ color: #fff; }
.dgx-cta-alt a svg{ width: 16px; height: 16px; }
.dgx-dot{ opacity: .4; }
.dgx-restart{ background: none; border: none; color: rgba(255,255,255,.5); font: inherit; font-size: 13px; cursor: pointer; transition: color .3s; margin-top: 4px; }
.dgx-restart:hover{ color: rgba(255,255,255,.85); }
.dgx-res-note{ position: relative; z-index: 2; max-width: 880px; margin: 18px auto 0; text-align: center; font-size: 13px; color: rgba(255,255,255,.5); }

/* ---- responsive ---- */
@media (max-width: 760px){
  .dgx-opts{ grid-template-columns: 1fr; }
  .dgx-res-top{ grid-template-columns: 1fr; justify-items: start; }
  .dgx-score{ flex-direction: row; align-items: center; gap: 16px; }
  .dgx-score-ring, .dgx-scan-ring{ width: 120px; height: 120px; }
  .dgx-score-l{ text-align: left; }
  .dgx-levers{ grid-template-columns: 1fr; }
  .dgx-fields{ grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce){
  .dgx, .dgx-body, .dgx-lever, .dgx-lever-bar i{ animation: none !important; transition: opacity .3s ease; transform: none !important; filter: none !important; }
}