/* Les couleurs (--bleu, --turquoise, etc.) viennent de tokens.css, chargé avant ce fichier */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-principale);color:var(--noir);background:transparent;line-height:1.55}

/* ---------- BOUTONS (réutilisés dans tout le widget) ---------- */
.cta{display:inline-flex;align-items:center;gap:12px;background:var(--bleu);color:#fff;
  font-family:inherit;font-weight:700;font-size:1.08rem;border:none;cursor:pointer;
  padding:17px 34px;border-radius:99px;transition:transform .15s,background .15s,box-shadow .15s;
  box-shadow:0 10px 30px rgba(55,60,245,.28)}
.cta:hover{background:var(--bleu-f1);transform:translateY(-2px)}
.cta:focus-visible{outline:3px solid var(--turquoise-2);outline-offset:3px}
.cta .bolt{font-size:1.2em}
.cta[disabled]{opacity:.6;cursor:not-allowed;transform:none!important}
.cta.ghost{background:transparent;border:2px solid var(--bleu-l);box-shadow:none;color:#fff}
.cta.ghost:hover{background:rgba(104,119,255,.12)}

/* ---------- WIDGET DIAGNOSTIC (contenu de l'iframe) ---------- */
.diag{padding:24px;max-width:760px;margin:0 auto}
.diag-shell{background:var(--noir);border-radius:30px;padding:46px;color:#fff;min-height:480px;
  display:flex;flex-direction:column;position:relative;overflow:hidden}
.diag-shell::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--turquoise)}
.progress-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:34px;gap:16px}
.progress-label{font-size:.85rem;color:var(--gris-2);font-weight:400;white-space:nowrap}
.progress-label b{color:var(--turquoise);font-weight:700}
.ptrack{flex:1;height:8px;border-radius:99px;background:#3a3a3a}
.pfill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--bleu-l),var(--turquoise));
  width:0%;transition:width .4s ease}
.q-theme{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--turquoise);margin-bottom:10px}
.q-text{font-size:1.45rem;font-weight:700;line-height:1.3;margin-bottom:28px;max-width:44rem}
.answers{display:grid;gap:12px}
.answer{background:#333;border:2px solid transparent;border-radius:16px;padding:16px 20px;
  color:#eee;font-family:inherit;font-size:.98rem;font-weight:400;text-align:left;cursor:pointer;
  transition:border-color .12s,background .12s,transform .12s;display:flex;gap:14px;align-items:center}
.answer:hover{background:#3d3d3d;border-color:var(--bleu-l);transform:translateX(4px)}
.answer:focus-visible{outline:3px solid var(--turquoise-2);outline-offset:2px}
.answer .k{width:30px;height:30px;min-width:30px;border-radius:9px;background:#4b4b4b;color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem}
.answer:hover .k{background:var(--bleu)}
.diag-nav{margin-top:auto;padding-top:26px}
.back-btn{background:none;border:none;color:var(--gris-2);font-family:inherit;font-size:.9rem;
  cursor:pointer;padding:8px 0;display:none}
.back-btn:hover{color:#fff}

/* Ecran d'intro du diag */
.diag-intro{text-align:center;margin:auto;max-width:34rem}
.diag-intro .big-bolt{font-size:3.4rem;margin-bottom:10px;display:block}
.diag-intro h2{font-weight:800;font-size:2rem;color:#fff;margin-bottom:12px}
.diag-intro h2 .ia{color:var(--turquoise)}
.diag-intro p{color:var(--gris-2);font-weight:300;margin-bottom:28px}

/* ---------- RESULTAT ---------- */
.result{display:none;text-align:center;margin:auto;width:100%}
.gauge-wrap{position:relative;width:210px;height:210px;margin:0 auto 18px}
.gauge-wrap svg{transform:rotate(-90deg)}
.gauge-bg{fill:none;stroke:#3a3a3a;stroke-width:14}
.gauge-val{fill:none;stroke:var(--turquoise);stroke-width:14;stroke-linecap:round;
  stroke-dasharray:565;stroke-dashoffset:565;transition:stroke-dashoffset 1.4s cubic-bezier(.25,.7,.3,1)}
.gauge-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.gauge-num .val{font-size:3.1rem;font-weight:800;line-height:1}
.gauge-num .sur{font-size:.9rem;color:var(--gris-2)}
.res-profil{font-size:1.5rem;font-weight:800;color:var(--turquoise);margin-bottom:6px}
.res-benchmark{display:inline-block;font-size:.85rem;font-weight:700;color:var(--bleu-l);
  background:rgba(104,119,255,.14);border:1px solid rgba(104,119,255,.4);border-radius:99px;
  padding:8px 18px;margin:0 auto 16px;max-width:36rem}
.res-desc{color:var(--gris-2);font-weight:300;max-width:33rem;margin:0 auto 30px}
.axes{max-width:22rem;margin:0 auto 34px}
.radar-svg{width:100%;display:block;overflow:visible}
.radar-grille{fill:none;stroke:#3a3a3a;stroke-width:1}
.radar-spoke{stroke:#3a3a3a;stroke-width:1}
.radar-data{fill:rgba(84,222,217,.28);stroke:var(--turquoise);stroke-width:2;
  transform-box:fill-box;transform-origin:center;transform:scale(0);opacity:0;
  transition:transform .8s cubic-bezier(.25,.7,.3,1),opacity .5s}
.radar-data.visible{transform:scale(1);opacity:1}
.radar-label{fill:#DDD;font-size:9.5px;font-family:var(--font-principale);font-weight:700}
.radar-valeur{fill:var(--turquoise);font-size:9.5px;font-family:var(--font-principale);font-weight:700}
.commentaire-ia{background:#2b2b2b;border:1px solid #3a3a3a;border-radius:16px;padding:22px 26px;
  max-width:40rem;margin:0 auto 30px;text-align:left;font-size:.95rem;color:#DDD;font-weight:300;
  line-height:1.6}
.commentaire-ia.chargement{color:var(--gris-2);font-style:italic;text-align:center}
.res-cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta-sous-texte{color:var(--gris-2);font-size:.82rem;font-weight:300;margin-top:12px}

/* ---------- EMAIL GATE ---------- */
.email-gate{display:none;text-align:center;margin:auto;max-width:36rem;width:100%}
.email-gate .lock{font-size:2.8rem;display:block;margin-bottom:12px}
.email-gate h2{font-weight:800;font-size:1.8rem;color:#fff;margin-bottom:10px}
.email-gate h2 .ia{color:var(--turquoise)}
.email-gate p{color:var(--gris-2);font-weight:300;margin-bottom:26px}
.champs-contact{display:flex;flex-direction:column;gap:12px;max-width:26rem;margin:0 auto 16px}
.champs-contact input{padding:16px 20px;border-radius:14px;border:2px solid #4b4b4b;
  background:#333;color:#fff;font-family:inherit;font-size:1rem;transition:border-color .15s;width:100%}
.champs-contact input::placeholder{color:#888}
.champs-contact input:focus{outline:none;border-color:var(--turquoise-2)}
.champs-contact input.err{border-color:#FF6B6B}
.email-error{color:#FF8787;font-size:.85rem;min-height:1.3em;margin-bottom:10px;font-weight:400}
.consentement-texte{font-size:.78rem;color:var(--gris-2);font-weight:300;line-height:1.5;
  max-width:30rem;margin:16px auto 0;text-align:left}
.consentement-texte a{color:var(--turquoise-2);text-decoration:underline}
/* ---------- ECRAN DE CHARGEMENT (entre l'envoi et l'affichage du résultat) ---------- */
.ecran-chargement{display:none;text-align:center;margin:auto;max-width:22rem}
.chargement-spinner{width:60px;height:60px;margin:0 auto 32px;border:5px solid #3a3a3a;
  border-top-color:var(--turquoise);border-radius:50%;animation:tourner 1s linear infinite}
@keyframes tourner{to{transform:rotate(360deg)}}
.etapes{list-style:none;text-align:left;display:inline-block}
.etape{display:flex;align-items:center;gap:12px;padding:9px 0;color:var(--gris-2);
  font-size:.98rem;font-weight:400;opacity:.5;transition:opacity .3s}
.etape.active{opacity:1;color:#fff;font-weight:700}
.etape.fait{opacity:1;color:var(--turquoise)}
.etape .puce{width:22px;height:22px;min-width:22px;border-radius:50%;border:2px solid #4b4b4b;
  display:flex;align-items:center;justify-content:center;font-size:.75rem;color:var(--noir);
  transition:background .2s,border-color .2s}
.etape.active .puce{border-color:var(--turquoise)}
.etape.fait .puce{background:var(--turquoise);border-color:var(--turquoise)}

@media (max-width:820px){
  .diag{padding:12px}
  .diag-shell{padding:30px 22px}
  .axes{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}