/* ============================================================================
   Oltanis — Diagnostic de gestion (questionnaire). Styles charte.
   3 tons (blanc / encre #0A0A0A / cobalt #1846DC), réutilise .demo-form de landing.css.
   ========================================================================== */

.dg-hero{position:relative;overflow:hidden;padding:88px 0 28px;border-bottom:1px solid var(--hairline)}
.dg-hero::before{content:"";position:absolute;inset:-30% -10% auto auto;width:60%;height:170%;background:var(--glow-cobalt);pointer-events:none;z-index:0}
.dg-hero .page{position:relative;z-index:1}
.dg-hero .seo-eyebrow{margin-bottom:18px}
.dg-h1{font-family:var(--font-display);font-weight:800;letter-spacing:-.045em;font-size:clamp(34px,5.4vw,56px);line-height:1;margin:0}
.dg-h1 .accent-i{font-style:italic;color:var(--cobalt)}
.dg-lead{max-width:640px;margin:18px 0 0;font-size:clamp(16px,2.2vw,19px);line-height:1.55;color:rgba(10,10,10,.7)}

.dg-wrap{padding:40px 0 96px}

/* Carte du questionnaire */
.quiz-card{max-width:760px;margin:0 auto;border:1px solid var(--hairline);border-radius:18px;
  background:var(--blanc);padding:clamp(24px,4vw,44px);box-shadow:var(--shadow-lg)}

.quiz-kick{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--cobalt)}
.quiz-h2{font-family:var(--font-display);font-weight:800;letter-spacing:-.04em;font-size:clamp(26px,4vw,38px);line-height:1.04;margin:14px 0 0}
.quiz-h2 .accent-i{font-style:italic;color:var(--cobalt)}
.quiz-lead{font-size:17px;line-height:1.55;color:rgba(10,10,10,.72);margin:14px 0 0}

/* Intro */
.quiz-intro{text-align:center}
.quiz-intro .quiz-lead{max-width:560px;margin:14px auto 26px}
.quiz-intro .btn{margin:0 auto}
.quiz-fine{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--muted,#6B6B6B);margin:20px 0 0}

/* Barre de progression */
.quiz-progress{height:4px;border-radius:999px;background:var(--hairline);overflow:hidden;margin:0 0 22px}
.quiz-progress span{display:block;height:100%;background:var(--cobalt);border-radius:999px;transition:width .4s cubic-bezier(.4,0,.2,1)}
@media(prefers-reduced-motion:reduce){.quiz-progress span{transition:none}}

.quiz-meta{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.quiz-step{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted,#6B6B6B)}
.quiz-q{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;font-size:clamp(21px,3.2vw,28px);line-height:1.12;margin:12px 0 22px}

/* Options */
.quiz-opts{display:grid;gap:10px}
.quiz-opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
  border:1px solid var(--hairline);border-radius:12px;background:var(--blanc);
  padding:16px 18px;font-family:var(--font-sans);font-size:16px;color:var(--encre);
  transition:border-color var(--dur-ui) var(--ease),background var(--dur-ui) var(--ease),box-shadow var(--dur-ui) var(--ease),transform var(--dur-ui) var(--ease)}
.quiz-opt:hover{border-color:var(--encre);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.quiz-opt:active{transform:translateY(1px)}
.quiz-opt.is-sel{border-color:var(--cobalt);background:rgba(24,70,220,.05)}
.quiz-radio{flex:0 0 auto;width:20px;height:20px;border-radius:999px;border:2px solid var(--hairline);position:relative;transition:border-color .15s}
.quiz-opt.is-sel .quiz-radio{border-color:var(--cobalt)}
.quiz-opt.is-sel .quiz-radio::after{content:"";position:absolute;inset:3px;border-radius:999px;background:var(--cobalt)}
.quiz-opt-t{line-height:1.35}

/* Navigation */
.quiz-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:26px 0 0}
.quiz-nav .btn[disabled]{opacity:.4;pointer-events:none}

/* Résultat */
.quiz-result .quiz-score{display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  padding:0 0 26px;border-bottom:1px solid var(--hairline)}
.quiz-gauge{flex:0 0 auto;width:118px;height:118px;border-radius:999px;display:grid;place-items:center;
  background:conic-gradient(var(--cobalt) calc(var(--p)*1%),var(--hairline) 0)}
.quiz-gauge::before{content:"";position:absolute;width:90px;height:90px;border-radius:999px;background:var(--blanc)}
.quiz-gauge{position:relative}
.quiz-gauge-n{position:relative;font-family:var(--font-display);font-weight:800;letter-spacing:-.04em;font-size:30px;color:var(--encre)}
.quiz-gauge-n small{font-size:14px;color:var(--muted,#6B6B6B);font-weight:700}
.quiz-score-txt{flex:1 1 240px}
.quiz-score-txt .quiz-h2{font-size:clamp(24px,3.4vw,32px)}

.quiz-sub{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;font-size:20px;margin:30px 0 14px}
.quiz-axes{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.quiz-axes li{border:1px solid var(--hairline);border-left:2px solid var(--cobalt);border-radius:10px;padding:14px 16px}
.quiz-axe-t{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cobalt);margin:0 0 5px}
.quiz-axe-d{display:block;font-size:15px;line-height:1.5;color:rgba(10,10,10,.78)}
.quiz-axes-none{font-size:16px;line-height:1.55;color:rgba(10,10,10,.72);border:1px solid var(--hairline);border-radius:10px;padding:16px}

.quiz-send{margin:34px 0 0;padding:28px 0 0;border-top:1px solid var(--hairline)}
.quiz-send-lead{font-size:15px;color:rgba(10,10,10,.7);margin:0 0 18px}
.quiz-restart{margin:18px auto 0;display:inline-flex}

/* Le formulaire .demo-form est pensé pour fond sombre : on l'adapte au fond clair de la carte */
.quiz-card .demo-form{max-width:none}
.quiz-card .demo-form input,.quiz-card .demo-form textarea{color:var(--encre);background:var(--blanc);border-color:var(--hairline)}
.quiz-card .demo-form input::placeholder,.quiz-card .demo-form textarea::placeholder{color:var(--muted,#6B6B6B)}
.quiz-card .demo-form input:focus,.quiz-card .demo-form textarea:focus{border-color:var(--cobalt)}
.quiz-card .demo-consent{color:rgba(10,10,10,.66)}
.quiz-card .demo-consent a{color:var(--cobalt)}
.quiz-card .demo-status{color:rgba(10,10,10,.7)}
.quiz-card .demo-status.ok{color:var(--encre);border-left:3px solid var(--cobalt);padding-left:10px}
.quiz-card .demo-status.err{color:var(--encre);border-left:3px solid var(--hairline);padding-left:10px}

@media(max-width:560px){
  .quiz-nav{flex-direction:row}
  .quiz-result .quiz-score{gap:18px}
  .quiz-gauge{width:96px;height:96px}
  .quiz-gauge::before{width:72px;height:72px}
  .quiz-gauge-n{font-size:24px}
}

/* Transitions entre étapes du questionnaire (chaque carte re-rendue entre en fondu) */
@media (prefers-reduced-motion: no-preference) {
  .quiz-card { animation: quizCardIn 380ms var(--ease-out); }
  @keyframes quizCardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  /* options : légère cascade à l'arrivée d'une question */
  .quiz-opt { animation: quizOptIn 360ms var(--ease-out) both; }
  .quiz-opts .quiz-opt:nth-child(1) { animation-delay: 60ms; }
  .quiz-opts .quiz-opt:nth-child(2) { animation-delay: 110ms; }
  .quiz-opts .quiz-opt:nth-child(3) { animation-delay: 160ms; }
  .quiz-opts .quiz-opt:nth-child(4) { animation-delay: 210ms; }
  @keyframes quizOptIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* ===== Thème sombre — diagnostic ===== */
.quiz-card { background: var(--ink-2, #14141d); }
.quiz-opt { background: var(--ink-3, #1b1b25); color: var(--blanc); }
.quiz-opt.is-sel { background: rgba(24,70,220,0.16); }
.quiz-gauge::before { background: var(--ink-2, #14141d); }
.dg-lead, .quiz-lead, .quiz-send-lead, .quiz-axe-d { color: var(--blanc-80); }
.quiz-axes-none { color: var(--blanc-80); border-color: var(--hairline); }
.quiz-fine, .quiz-step, .quiz-gauge-n small { color: var(--blanc-60); }
.quiz-card .demo-form input, .quiz-card .demo-form textarea { background: var(--ink-3, #1b1b25); color: var(--blanc); border-color: var(--hairline); }
.quiz-card .demo-form input::placeholder, .quiz-card .demo-form textarea::placeholder { color: var(--blanc-60); }
.quiz-card .demo-consent { color: var(--blanc-70); }
.quiz-card .demo-status { color: var(--blanc-80); }
.quiz-card .demo-status.ok, .quiz-card .demo-status.err { color: var(--blanc); }
.quiz-gauge-n { color: var(--blanc); }
.quiz-opt:hover { border-color: var(--blanc-20); }