/* ==========================================================================
   QuanticAI — Audit en ligne (V2). Composants du questionnaire uniquement :
   les tokens (--txt, --cyan, --line, --r, --disp, --body...), le fond, l'en-tête
   et les boutons pilule (.btn / .btn-primary / .btn-ghost) viennent de
   site/audit-en-ligne.html (meme feuille de style inline que site/index.html).
   Le theme clair/sombre suit l'attribut [data-theme] du site (pas de media
   query prefers-color-scheme ici : ce serait redondant avec le bouton du site).
   ========================================================================== */

:root{
  --r-sm:12px;
  --card:#ffffff;
  --cyan-wash:rgba(18,150,216,.08);
  --cyan-wash-strong:rgba(18,150,216,.16);
  --danger:#C4392B; --danger-wash:rgba(196,57,43,.08);
  --shadow-card:0 1px 2px rgba(14,42,71,.04), 0 12px 32px rgba(14,42,71,.07);
  --dur-s:160ms; --dur-m:280ms; --dur-l:480ms;
  --ease:cubic-bezier(.2,.7,.2,1);
}

[data-theme="dark"]{
  --card:#101b2d;
  --cyan-wash:rgba(63,182,232,.1);
  --cyan-wash-strong:rgba(63,182,232,.18);
  --danger:#ff8a7a; --danger-wash:rgba(255,138,122,.1);
  --shadow-card:0 1px 2px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.35);
}

/* ---------- En-tete : pas de bandeau defilant sur cette page ---------- */
/* Le bloc <style> partage avec index.html attend --topbar-h pour placer le nav,
   le hero et le menu mobile : on le met a 0 ici (topbar retiree du HTML) et tout
   le decalage se recalcule seul (nav, hero, questionnaire ci-dessous). */
:root{ --topbar-h:0px; --nav-h:80px; }
@media(max-width:560px){ :root{ --nav-h:66px; } }

/* ---------- Hero : mention discrete sous les CTA ---------- */
.hero-note{margin-top:14px;font-size:13px;color:var(--muted)}

/* ---------- Hero : note discrete sous le visuel (astérisque de l'estimation) ---------- */
.hero-disclaimer{margin-top:-26px;padding-bottom:20px;font-size:12px;color:var(--muted);text-align:right}
@media(max-width:880px){.hero-disclaimer{text-align:center;margin-top:-10px}}

/* ---------- Hero : masque au clic sur "Demarrer mon audit" (page.js). Une classe
   dediee (pas [hidden]) : [hidden] perd face a la regle d'auteur .hero{display:grid}
   dans la cascade (l'origine "auteur" prime toujours sur l'agent utilisateur). */
.hero-hidden{display:none}

/* ---------- Hero : carte "estimation" (reprend .brandstage/.bs-orbits/.bs-card du site) ----------
   .bs-card garde un fond blanc fixe meme en theme sombre (regle du site) : on fixe donc
   ici des couleurs claires explicites plutot que var(--txt), qui basculerait en tons
   clairs en sombre et deviendrait illisible sur fond blanc. .grad (degrade cyan anime)
   vient du site, reutilise tel quel sur le chiffre. */
.estimate-card{text-align:center}
.estimate-num{font-family:var(--disp);font-weight:600;font-size:clamp(34px,5.5vw,52px);line-height:1.05}
.estimate-sub{margin-top:10px;font-size:14.5px;color:#566884}
/* 3e pastille flottante (le site n'en prevoit que 2, chip-1/chip-2) */
.chip-3{right:22px;bottom:22px;animation:chipFloat 6.6s ease-in-out 2.8s infinite}
@media(max-width:880px){.chip-3{margin-top:10px}}

/* ---------- Panneau du questionnaire (carte verre du site) ---------- */
/* padding-top de la section et scroll-margin-top du panneau : hauteur reelle de
   l'en-tete fixe (nav, plus de topbar sur cette page) + marge, a toutes les largeurs
   (cf. --nav-h ci-dessus). scrollIntoView() (page.js + app.js) cible .audit-panel. */
#questionnaire{padding-top:calc(var(--nav-h) + 24px);padding-bottom:80px}
.audit-panel{margin-top:26px;scroll-margin-top:calc(var(--nav-h) + 16px)}
.audit-panel[hidden]{display:none}

/* Resets de base scopes au panneau (le site ne stylise pas les balises brutes,
   seulement ses propres classes) : :where() garde une specificite nulle pour
   que .btn-primaire / .btn-tel / .echelle button, plus bas, gardent la main. */
.audit-panel :where(p){color:var(--muted)}
.audit-panel :where(button){font-family:inherit;font-size:inherit;color:inherit;background:none;border:0;cursor:pointer}
.audit-panel :where(input,textarea){font-family:inherit;font-size:inherit;color:inherit}
.audit-panel :where(ol,ul){list-style:none}
.audit-panel :where(a){color:var(--cyan-d)}
.audit-panel :where(:focus-visible){outline:3px solid var(--cyan);outline-offset:2px;border-radius:6px}

/* ---------- Bandeau haut : progression + chapitre + compteur ---------- */
.chrome{
  position:sticky;top:0;z-index:5;background:transparent;
  border-bottom:1px solid var(--line);margin:-34px -34px 26px;padding:20px 34px 16px;
}
.chrome-inner{display:grid;grid-template-columns:1fr auto;gap:.5rem 1.5rem;align-items:center}
.chrome-progress{grid-column:1/-1}
.chrome-steps{display:flex;gap:5px}
.chrome-steps li{flex:1;height:5px;border-radius:4px;background:var(--line)}
.chrome-steps li.fait{background:var(--cyan-d)}
.chrome-steps li.courant{background:var(--cyan)}
.chrome-chapitre-titre{font-family:var(--disp);font-weight:600;font-size:1rem;color:var(--txt)}
.chrome-chapitre-minutes{font-size:.82rem;color:var(--muted)}
.chrome-compteur{text-align:right}
.chrome-compteur-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.chrome-compteur-valeur{
  font-family:var(--disp);font-weight:600;font-size:1.35rem;color:var(--cyan-d);
  font-variant-numeric:tabular-nums;
}
.chrome-compteur-unite{font-family:var(--body);font-weight:500;font-size:.7rem;color:var(--muted);margin-left:.3em}
.chrome-compteur.a-monte .chrome-compteur-valeur{animation:audit-pulse-up var(--dur-l) var(--ease)}
@keyframes audit-pulse-up{0%{transform:scale(1)}40%{transform:scale(1.08);color:var(--cyan)}100%{transform:scale(1)}}

@media (max-width:600px){
  .chrome-inner{grid-template-columns:1fr}
  .chrome-compteur{text-align:left}
  .chrome{margin:-24px -22px 20px;padding:16px 22px 14px}
}

/* ---------- Layout general ---------- */
.app{max-width:640px;margin:0 auto}
.screen{animation:audit-entree var(--dur-m) var(--ease)}
@keyframes audit-entree{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.ecran-etroit{max-width:640px;margin:0 auto}
.titre-question{font-size:clamp(1.35rem,3.4vw,1.9rem);margin-bottom:1.6rem}
.sous-texte{margin-top:.5rem}

/* ---------- Boutons du questionnaire : memes classes que .btn du site ---------- */
.btn-primaire{background:linear-gradient(135deg,var(--cyan),var(--cyan-d));color:#04121d;box-shadow:0 0 0 1px rgba(143,226,255,.3),0 12px 34px rgba(63,201,242,.3)}
.btn-primaire:hover{box-shadow:0 0 0 1px rgba(143,226,255,.5),0 18px 48px rgba(63,201,242,.45)}
.btn-primaire:active{transform:translateY(1px) scale(.99)}
.btn-primaire:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn-tel{background:rgba(143,180,220,.06);color:var(--txt);border:1px solid var(--line)}
.btn-tel:hover{border-color:var(--cyan);color:var(--cyan)}
.btn-fantome{color:var(--muted);text-decoration:underline;text-underline-offset:3px;padding:.5em .2em;background:none;border:0}
.btn-fantome:hover{color:var(--txt)}
.rangee-actions{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;margin-top:1.8rem}

/* ---------- Cartes de choix (C1 / CN) ---------- */
.grille-options{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.8rem}
.option-carte{
  text-align:left;background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);
  padding:1.05rem 1.1rem;display:flex;align-items:center;gap:.7rem;
  transition:border-color var(--dur-s) var(--ease), background var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
}
.option-carte:hover{border-color:var(--sky);transform:translateY(-1px)}
.option-carte .touche{
  flex:0 0 auto;width:1.6em;height:1.6em;border-radius:7px;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:.78rem;color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.option-carte .libelle{font-weight:500}
.option-carte[aria-pressed="true"]{border-color:var(--cyan);background:var(--cyan-wash)}
.option-carte[aria-pressed="true"] .touche{border-color:var(--cyan);color:var(--cyan-d)}

/* ---------- Curseur (S) ---------- */
.bloc-curseur{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.6rem 1.4rem;box-shadow:var(--shadow-card)}
.curseur-valeur{font-family:var(--disp);font-weight:600;font-size:2.2rem;color:var(--cyan-d);text-align:center;margin-bottom:.4rem;font-variant-numeric:tabular-nums}
/* Pas de remplissage dynamique du rail (eviterait de manipuler style="" en JS,
   interdit par la CSP sans 'unsafe-inline') : accent-color + gros curseur suffisent. */
input[type="range"]{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;
  background:var(--line);accent-color:var(--cyan);
}
input[type="range"]::-webkit-slider-runnable-track{height:6px;border-radius:99px;background:var(--line)}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;
  border:3px solid var(--cyan);box-shadow:0 2px 8px rgba(14,42,71,.25);cursor:grab;margin-top:-10px;
}
input[type="range"]::-moz-range-thumb{
  width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid var(--cyan);cursor:grab;
}
input[type="range"]::-moz-range-track{height:6px;border-radius:99px;background:var(--line)}
input[type="range"]::-moz-range-progress{height:6px;border-radius:99px;background:var(--cyan)}
.reperes{display:flex;justify-content:space-between;margin-top:.6rem;font-size:.78rem;color:var(--muted)}

/* ---------- Echelle 1-5 (E) ---------- */
.echelle{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.echelle button{
  width:3.1rem;height:3.1rem;border-radius:50%;border:1.5px solid var(--line);background:var(--card);
  font-family:var(--disp);font-weight:600;font-size:1.15rem;
  transition:border-color var(--dur-s), background var(--dur-s), transform var(--dur-s);
}
.echelle button:hover{border-color:var(--sky);transform:translateY(-1px)}
.echelle button[aria-pressed="true"]{border-color:var(--cyan);background:var(--cyan);color:#fff}
.echelle-legende{display:flex;justify-content:space-between;font-size:.8rem;color:var(--muted);margin-top:.7rem}

/* ---------- Texte (T / TL) ---------- */
.champ-texte{width:100%;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:.9em 1em;background:var(--card);color:var(--txt)}
.champ-texte:focus{border-color:var(--cyan)}
textarea.champ-texte{min-height:8rem;resize:vertical}
.compteur-caracteres{font-size:.78rem;color:var(--muted);text-align:right;margin-top:.35rem}

/* ---------- Ne sais pas ---------- */
.nsp{margin-top:1.1rem}

/* ---------- Erreur de champ ---------- */
.erreur-champ{color:var(--danger);font-size:.86rem;margin-top:.6rem}
.erreur-champ[hidden]{display:none}

/* ---------- Carte "Ce que vous venez de nous dire" ---------- */
.carte-recap{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:1.6rem 1.5rem;box-shadow:var(--shadow-card);
}
.carte-recap h2{font-size:1.25rem;margin-bottom:.9rem}
.carte-recap ul{display:flex;flex-direction:column;gap:.55rem}
.carte-recap li{font-size:.95rem;color:var(--txt);padding-left:1.1rem;position:relative;list-style:none}
.carte-recap li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--cyan)}
.carte-recap li b{color:var(--cyan-d)}

/* ---------- Radar 7 etages ---------- */
.radar-bloc{display:flex;flex-direction:column;align-items:center;gap:.8rem}
.radar-svg{width:100%;max-width:340px;height:auto}
.radar-axe-label{font-size:.6rem;fill:var(--muted);font-family:var(--body);font-weight:500}
.radar-grille{fill:none;stroke:var(--line);stroke-width:1}
.radar-forme{fill:var(--cyan-wash-strong);stroke:var(--cyan-d);stroke-width:2;transition:d var(--dur-l) var(--ease)}
.radar-point{fill:var(--cyan-d)}

/* ---------- Email gate ---------- */
.form-grille{display:grid;gap:1rem}
.champ{display:flex;flex-direction:column;gap:.35rem}
.champ label{font-size:.86rem;font-weight:600;color:var(--txt)}
.champ .facultatif{font-weight:400;color:var(--muted)}
.consentements{display:flex;flex-direction:column;gap:.7rem;margin-top:.3rem}
.case{display:flex;gap:.7rem;align-items:flex-start;font-size:.88rem;color:var(--txt)}
.case input{margin-top:.2em;width:1.15em;height:1.15em;accent-color:var(--cyan)}
.champ-piege{position:absolute;width:1px;height:1px;overflow:hidden;left:-9999px}
.bandeau-reprise{
  background:var(--cyan-wash);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:.8rem 1rem;font-size:.85rem;color:var(--txt);margin-top:1.4rem;
}

/* ---------- Recapitulatif ---------- */
.recap-liste{display:flex;flex-direction:column;gap:.7rem;margin-top:1.4rem}
.recap-item{
  display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:.9rem 1.1rem;
}
.recap-item .q{font-size:.82rem;color:var(--muted)}
.recap-item .v{font-weight:600;margin-top:.15rem}

/* ---------- Analyse (fin) ---------- */
.analyse{text-align:center;padding-top:2vh}
.analyse-etapes{max-width:360px;margin:2rem auto 0;text-align:left;display:flex;flex-direction:column;gap:.9rem}
.analyse-etape{display:flex;align-items:center;gap:.8rem;color:var(--muted);font-size:.95rem;list-style:none}
.analyse-etape .puce{width:1.3rem;height:1.3rem;border-radius:50%;border:1.5px solid var(--line);flex:0 0 auto;position:relative}
.analyse-etape.fait{color:var(--txt)}
.analyse-etape.fait .puce{background:var(--cyan);border-color:var(--cyan)}
.analyse-etape.fait .puce::after{content:"";position:absolute;inset:0;margin:auto;width:6px;height:10px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg) translate(-1px,-2px)}
.analyse-etape.encours{color:var(--cyan-d)}

/* ---------- Teaser ---------- */
.teaser-hero{text-align:center}
.teaser-chiffre{font-family:var(--disp);font-weight:600;font-size:clamp(2.2rem,7vw,3.2rem);color:var(--cyan-d);font-variant-numeric:tabular-nums}
.teaser-chiffre .unite{font-size:.4em;color:var(--muted);font-family:var(--body);font-weight:500}
.teaser-score{margin-top:.4rem;font-size:1rem;color:var(--muted)}
.teaser-score b{color:var(--txt)}
.teaser-grille{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center;margin-top:2.2rem}
@media (max-width:680px){.teaser-grille{grid-template-columns:1fr}}
.top3{display:flex;flex-direction:column;gap:.8rem}
.top3-item{
  position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:1rem 1.1rem;overflow:hidden;
}
.top3-rang{font-family:var(--disp);color:var(--cyan-d);font-weight:600;font-size:.85rem;margin-bottom:.2rem}
.top3-titre{font-weight:600}
.top3-detail{filter:blur(4px);user-select:none;font-size:.85rem;margin-top:.3rem;color:var(--muted)}
.top3-cadenas{display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--cyan-d);margin-top:.5rem;font-weight:600}
.teaser-message{max-width:52ch;margin:2.4rem auto 0;text-align:center}
.teaser-actions{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;margin-top:1.6rem}

/* ---------- Ecran d'erreur / reprise ---------- */
.ecran-erreur{text-align:center;padding-top:2vh}
.ecran-erreur h1{margin-bottom:.8rem}

/* ---------- Bandeau hors-ligne ---------- */
.offline-banner{
  position:fixed;left:0;right:0;bottom:0;text-align:center;padding:.7rem;
  background:var(--danger-wash);color:var(--danger);font-size:.85rem;font-weight:600;
  border-top:1px solid var(--line);z-index:10;
}

/* ---------- Mobile : garantie zero scroll horizontal ---------- */
@media (max-width:400px){
  .grille-options{grid-template-columns:1fr}
}