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

/* Héros : 88 px en haut / 28 px en bas, alors que TOUS les autres héros du site
   (.seo-hero) sont symétriques. Le chapô venait buter sur le filet.
   Et comme .seo-hero, la respiration se réduit en petit écran : le corriger en
   88/88 sec donnait un héros deux fois plus haut que les autres en 375 px. */
.dg-hero{position:relative;overflow:hidden;padding:40px 0;border-bottom:1px solid var(--hairline)}
@media(min-width:768px){ .dg-hero{padding:88px 0} }
.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}
/* Le titre courait sur 1 312 px, soit toute la largeur de page sur une seule
   ligne, pendant que le chapô juste en dessous s'arrêtait à 640 px. On lui donne
   la mesure des autres héros du site, où le titre tient sur deux lignes. */
.dg-h1{font-family:var(--font-display);font-weight:800;letter-spacing:-.045em;font-size:clamp(38px,6vw,68px);line-height:.98;margin:0;max-width:15ch}
.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)}

/* Le héros porte déjà sa respiration : la carte n'a pas besoin d'en rajouter 40.
   Réduite en petit écran, comme .section du site. */
.dg-wrap{padding:32px 0 64px}
@media(min-width:768px){ .dg-wrap{padding:56px 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(--blanc-40);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); }
/* La bordure restait sur --hairline (1,44:1) alors que le fond de l'option ne
   se détache de la carte que de 1,07:1 : au repos, rien ne délimitait le
   composant. WCAG 1.4.11 demande 3:1 ; --blanc-40 donne 3,8:1. */
.quiz-opt { background: var(--ink-3, #1b1b25); color: var(--blanc); border-color: var(--blanc-40); }
.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(--blanc-40); }
.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); }
/* Au repos la bordure est à --blanc-40 (3,8:1) : le survol doit MONTER, pas
   descendre — il était à --blanc-20, sous l'état de repos. */
.quiz-opt:hover { border-color: var(--blanc-60); }

/* L'accent n'avait pas suivi la bascule sombre ici non plus. Les .accent-i sont
   déjà repris par `body.oltanis .accent-i` (site.css) ; restent le sur-titre
   et l'état sélectionné, qui doit rester distinguable — une bordure cobalt
   plein sur #1b1b25 tombe à 2,5:1, sous les 3:1 exigés pour un élément d'IHM. */
.quiz-kick { color: var(--accent-texte); }
.quiz-opt.is-sel { border-color: var(--accent-display); }
.quiz-opt.is-sel .quiz-radio { border-color: var(--accent-display); }
.quiz-opt.is-sel .quiz-radio::after { background: var(--accent-display); }

/* Cibles de focus programmatique. Après chaque changement d'écran, diagnostic.js
   repose le focus sur le titre affiché pour que les lecteurs d'écran annoncent
   la nouvelle question — c'est le bon comportement, et il est conservé. Mais ce
   sont des TITRES, pas des commandes : l'anneau de focus autour d'un grand titre
   se lit comme un défaut d'affichage. On garde le déplacement, on retire l'anneau.
   Les vraies commandes du quiz (options, boutons) gardent le leur. */
.quiz-h2[tabindex="-1"]:focus,
.quiz-h2[tabindex="-1"]:focus-visible,
#quiz-q[tabindex="-1"]:focus,
#quiz-q[tabindex="-1"]:focus-visible { outline: none; }

/* Le titre de la section statique n'a pas de classe : il héritait de
   l'interligne du corps de texte (1,55) et plafonnait à 38 px, alors que le
   composant de titre de section du site (.section-title) est à 60 px / 1,0.
   Un titre de 38 px sur 58,9 px de hauteur de ligne se lisait comme deux lignes
   de paragraphe en gras. */
.dg-static h2 { font-size: clamp(34px, 5vw, 60px); line-height: 1; letter-spacing: -.045em; }

/* Le bloc éditorial était centré dans un conteneur de 880 px : son bord gauche
   tombait à x=344 alors que l'en-tête, le fil d'Ariane, le H1 et le pied de page
   sont tous à x=64. La page présentait deux bords gauches concurrents.
   La mesure de lecture de 880 px est conservée — elle est juste pour ces
   questions — mais posée sur le CONTENU, pas sur le conteneur de gouttière :
   le bloc repart donc de la colonne de texte du héros, qu'il prolonge.
   La carte du quiz reste centrée : c'est un panneau, pas du texte courant. */
.dg-static .page { max-width: var(--max-page); }
.dg-static .page > * { max-width: 880px; }