/* ─────────────────────────────────────────────────────────────────────
   declic.css — Page /declic — Diagnostic Déclic
   Étend /base.css (variables, reset, nav, boutons, animations)
   ───────────────────────────────────────────────────────────────────── */

/* ─── Hero ───────────────────────────────────────────────────────────── */
.hero {
  padding: 100px 0 60px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 20%, rgba(13,110,100,.09) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 90% 80%, rgba(196,124,46,.05) 0%, transparent 55%);
  text-align: center;
}
@media (min-width: 768px) { .hero { padding: 124px 0 72px; } }

.hero-label {
  font-family: var(--ff-m); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ac); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px;
}
.hero-label::before, .hero-label::after { content: ''; width: 18px; height: 1px; background: var(--ac); }

.hero h1 {
  font-family: var(--ff-d); font-weight: 300; letter-spacing: -.03em;
  font-size: clamp(30px, 7.5vw, 58px); line-height: 1.08; margin-bottom: 20px;
  max-width: 760px; margin-left: auto; margin-right: auto;
}
.hero h1 em { font-style: italic; color: var(--ac); }

.hero-sub {
  font-size: 16.5px; color: var(--tx2); line-height: 1.65;
  max-width: 520px; margin: 0 auto 32px;
}
@media (min-width: 768px) { .hero-sub { font-size: 17px; } }
.hero-sub strong { color: var(--tx); font-weight: 500; }

.hero-ctas {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
@media (min-width: 480px) { .hero-ctas { flex-direction: row; justify-content: center; } }

.cta-primary {
  padding: 14px 26px; background: var(--ac); color: #fff;
  border-radius: 4px; font: 500 15px var(--ff-b);
  transition: opacity .2s, transform .1s; min-height: 50px;
  display: inline-flex; align-items: center; gap: 10px;
}
.cta-primary:hover { opacity: .88; }
.cta-primary:active { transform: scale(.97); }

.cta-secondary {
  padding: 14px 22px; color: var(--tx2); font-size: 14.5px;
  border: 1px solid var(--br); border-radius: 4px;
  transition: color .2s, border-color .2s; min-height: 50px;
  display: inline-flex; align-items: center; gap: 8px;
}
.cta-secondary:hover { color: var(--tx); border-color: rgba(17,17,17,.3); }

.hero-stats {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 44px;
  margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--br);
}
.hero-stat { text-align: center; }
.hero-stat-n {
  font-family: var(--ff-d); font-size: 26px; font-weight: 300; letter-spacing: -.025em;
}
.hero-stat-l {
  font-family: var(--ff-m); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tx2); margin-top: 2px;
}

/* ─── Quiz section ───────────────────────────────────────────────────── */
.quiz-sec {
  padding: 48px 0 96px;
  background: var(--bg-warm);
  border-top: 1px solid var(--br);
}

.quiz-sec-label {
  font-family: var(--ff-m); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tx2); text-align: center; margin-bottom: 28px;
}

.quiz-card {
  background: #fff; border: 1px solid var(--br); border-radius: 8px;
  padding: 28px 22px;
  max-width: 640px; margin: 0 auto;
  box-shadow: 0 12px 48px rgba(17,17,17,.06), 0 2px 8px rgba(17,17,17,.03);
}
@media (min-width: 580px) { .quiz-card { padding: 36px 40px; } }

/* Progress bar */
.q-progress { margin-bottom: 28px; }
.q-progress-top {
  display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px;
}
.q-step-lbl {
  font-family: var(--ff-m); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tx2);
}
.q-pct { font-family: var(--ff-m); font-size: 10px; color: var(--ac); }
.q-bar-track { height: 3px; background: rgba(17,17,17,.08); border-radius: 2px; overflow: hidden; }
.q-bar-fill {
  height: 100%; background: var(--ac); border-radius: 2px;
  transition: width .4s cubic-bezier(.4,0,.2,1);
}

/* Screen transitions */
.q-screen.q-hidden { display: none; }
.q-screen.q-enter  { animation: qER .22s ease both; }
.q-screen.q-exit   { animation: qEL .22s ease both; }
.q-screen.q-enter-b { animation: qEL2 .22s ease both; }
.q-screen.q-exit-b  { animation: qER2 .22s ease both; }

@keyframes qER  { from { opacity:0; transform:translateX(26px)  } to { opacity:1; transform:none } }
@keyframes qEL  { from { opacity:1; transform:none } to { opacity:0; transform:translateX(-26px) } }
@keyframes qEL2 { from { opacity:0; transform:translateX(-26px) } to { opacity:1; transform:none } }
@keyframes qER2 { from { opacity:1; transform:none } to { opacity:0; transform:translateX(26px)  } }

/* Question block */
.qblock { margin-bottom: 18px; }
.qblock:last-of-type { margin-bottom: 0; }

.qlabel {
  font-family: var(--ff-d); font-size: 15.5px; font-weight: 300; letter-spacing: -.01em;
  line-height: 1.35; margin-bottom: 3px;
}
.qsub { font-size: 11.5px; color: var(--tx2); margin-top: 2px; margin-bottom: 10px; line-height: 1.5; }
.qhint { font-size: 11px; color: var(--ac2); margin-top: 5px; display: none; }
.qblock.has-err .qhint { display: block; }

/* Text input */
.qtxt {
  width: 100%; padding: 11px 13px;
  background: var(--bg); border: 1px solid var(--br); border-radius: 4px;
  font: 15px/1.5 var(--ff-b); color: var(--tx);
  transition: border-color .2s, background .2s; min-height: 46px;
}
.qtxt:focus { outline: none; border-color: var(--ac); background: #fff; }
.qtxt::placeholder { color: rgba(17,17,17,.3); }
.qblock.has-err .qtxt { border-color: var(--ac2); }

/* Options */
.q-opts { display: flex; flex-direction: column; gap: 6px; }
.q-opts.chips { flex-direction: row; flex-wrap: wrap; gap: 7px; }

.qopt {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 13px;
  border: 1px solid rgba(17,17,17,.1); border-radius: 5px;
  cursor: pointer; user-select: none;
  transition: border-color .15s, background .15s;
  font-size: 14px; line-height: 1.4; color: var(--tx);
  min-height: 44px; background: var(--bg);
}
.qopt:hover { border-color: rgba(13,110,100,.35); background: rgba(13,110,100,.03); }
.qopt.sel { border-color: var(--ac); background: rgba(13,110,100,.06); }
.qopt.chip { padding: 8px 14px; font-size: 13.5px; align-items: center; }
.qopt input { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; accent-color: var(--ac); }
.qopt.chip input { margin-top: 0; }
.qopt.q-excl { display: none; }

/* Name row */
.name-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qfg { display: flex; flex-direction: column; gap: 5px; }
.qfl {
  font-family: var(--ff-m); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tx2);
}
.qfl .req { color: var(--ac2); margin-left: 3px; }
.qfl .opt { color: var(--tx2); opacity: .5; text-transform: none; letter-spacing: 0; font-family: var(--ff-b); font-size: 10px; margin-left: 3px; }

/* RGPD checkbox */
.rgpd-check {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; background: var(--bg); border: 1px solid var(--br); border-radius: 4px;
  cursor: pointer; margin-top: 6px;
}
.rgpd-check input { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; accent-color: var(--ac); }
.rgpd-check span { font-size: 12.5px; color: var(--tx2); line-height: 1.55; }
.rgpd-check a { color: var(--ac); text-decoration: underline; }
.qblock.has-err .rgpd-check { border-color: var(--ac2); background: rgba(196,124,46,.04); }

/* Quiz navigation */
.qnav {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--br);
}
.qbtn-next, .qbtn-submit {
  padding: 12px 22px; background: var(--ac); color: #fff;
  border-radius: 4px; font: 500 14.5px var(--ff-b);
  transition: opacity .2s, transform .1s; min-height: 46px;
  display: inline-flex; align-items: center; gap: 8px;
}
.qbtn-next:hover, .qbtn-submit:hover { opacity: .88; }
.qbtn-next:active, .qbtn-submit:active { transform: scale(.97); }
.qbtn-next:disabled, .qbtn-submit:disabled { opacity: .38; cursor: default; }
.qbtn-back {
  padding: 12px 14px; font-size: 14px; color: var(--tx2);
  transition: color .2s; min-height: 44px;
}
.qbtn-back:hover { color: var(--tx); }

.qbtn-submit.is-loading { color: transparent !important; position: relative; pointer-events: none; }
.qbtn-submit.is-loading::after {
  content: ''; position: absolute; width: 15px; height: 15px;
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  border: 2px solid rgba(255,255,255,.25); border-top-color: #fff;
  border-radius: 50%; animation: qspin .6s linear infinite;
}
@keyframes qspin { to { transform: translate(-50%,-50%) rotate(360deg); } }

/* ─── Results screen ─────────────────────────────────────────────────── */
.r-header { text-align: center; margin-bottom: 22px; }
.r-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-m); font-size: 9px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ac); margin-bottom: 10px;
}
.r-badge::before, .r-badge::after { content: ''; width: 14px; height: 1px; background: var(--ac); }
.r-name {
  font-family: var(--ff-d); font-size: clamp(22px, 5vw, 32px); font-weight: 300;
  letter-spacing: -.02em; margin-bottom: 10px;
}
.r-accroche { font-size: 14px; color: var(--tx2); line-height: 1.65; max-width: 480px; margin: 0 auto; }

/* Score gauges */
.gauges { display: flex; flex-direction: column; gap: 12px; margin: 22px 0; }
.g-item { display: flex; align-items: center; gap: 10px; }
.g-lbl {
  font-family: var(--ff-m); font-size: 9px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--tx2); width: 88px; flex-shrink: 0; text-align: right;
}
.g-track { flex: 1; height: 7px; background: rgba(17,17,17,.08); border-radius: 4px; overflow: hidden; }
.g-bar { height: 100%; border-radius: 4px; width: 0%; transition: width .8s cubic-bezier(.22,1,.36,1); }
.g-bar.auto { background: linear-gradient(90deg, var(--ac), #18b29f); }
.g-bar.visi { background: linear-gradient(90deg, var(--ac2), #e8a040); }
.g-bar.souv { background: linear-gradient(90deg, #475569, #1e293b); }
.g-val { font-family: var(--ff-m); font-size: 11.5px; font-weight: 500; width: 30px; flex-shrink: 0; }

/* ROI box */
.roi-box {
  background: var(--bg-warm); border: 1px solid var(--br); border-radius: 6px;
  padding: 16px 18px; text-align: center; margin: 16px 0;
}
.roi-lbl {
  font-family: var(--ff-m); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tx2); margin-bottom: 5px;
}
.roi-val {
  font-family: var(--ff-d); font-size: clamp(24px, 6vw, 36px); font-weight: 300;
  letter-spacing: -.025em; color: var(--ac); line-height: 1;
}
.roi-sub { font-size: 11.5px; color: var(--tx2); margin-top: 4px; }

/* Recommendations */
.r-recos-lbl {
  font-family: var(--ff-m); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tx2); margin: 18px 0 10px;
}
.reco { display: flex; gap: 12px; margin-bottom: 10px; }
.reco-pilier {
  font-family: var(--ff-m); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ac); flex-shrink: 0; width: 80px; padding-top: 3px;
}
.reco-text { font-size: 13px; color: var(--tx); line-height: 1.6; }

/* CTA result */
.r-cta { text-align: center; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--br); }
.r-cta-title { font-size: 14.5px; font-weight: 500; margin-bottom: 14px; }
.r-cta-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; background: var(--ac); color: #fff;
  border-radius: 4px; font: 500 14.5px var(--ff-b);
  transition: opacity .2s; min-height: 50px;
}
.r-cta-btn:hover { opacity: .88; }
.r-cta-sub { font-size: 11.5px; color: var(--tx2); margin-top: 10px; }

/* Email sent notice */
.r-email-notice {
  display: flex; align-items: flex-start; gap: 9px;
  background: rgba(13,110,100,.07); border: 1px solid rgba(13,110,100,.18);
  border-radius: 4px; padding: 11px 14px;
  font-size: 12.5px; color: var(--ac); margin-top: 14px; line-height: 1.5;
}
.r-email-notice::before { content: '✓'; font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.r-email-err {
  display: none; font-size: 12px; color: var(--ac2); margin-top: 8px;
  padding: 10px 14px; background: rgba(196,124,46,.06);
  border: 1px solid rgba(196,124,46,.2); border-radius: 4px;
}

/* Footer */
footer { padding: 28px 0; border-top: 1px solid var(--br); }
.footer-in {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--tx2);
}
@media (min-width: 600px) {
  .footer-in { flex-direction: row; align-items: center; justify-content: space-between; }
}
.footer-links { display: flex; flex-wrap: wrap; gap: 16px 22px; }
.footer-links a:hover { color: var(--tx); }
.siret { font-family: var(--ff-m); font-size: 11px; color: var(--tx2); }