/* ==========================================================================
   DIAGNOSTIC MC — reprend le design system de MC Design & Web Agency
   ========================================================================== */
:root{
  --green:#273D43;
  --green-deep:#0C231D;
  --green-mid:#3C5A61;
  --green-soft:#4E7078;
  --black:#0A100F;
  --white:#F6F3EC;
  --graphite:#8A9599;
  --chrome-1:#f4f6f6;
  --chrome-2:#aab2b3;
  --chrome-3:#565f61;
  --chrome-4:#e6e9e9;
  --mx:50%;
  --my:50%;
  --ang:135deg;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--green-deep);
  color:var(--white);
  font-family:'Inter',sans-serif;
  font-weight:300;
  overflow-x:hidden;
  min-height:100svh;
  cursor:none;
}
::selection{background:var(--green);color:var(--white);}
a{color:inherit;}
img{display:block;max-width:100%;}
button{font-family:inherit;}

.eyebrow{
  font-family:'Inter',sans-serif;font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--graphite);font-weight:500;
}
.chrome-text{
  background:linear-gradient(var(--ang), var(--chrome-3) 0%, var(--chrome-1) 22%, var(--chrome-4) 35%, var(--chrome-2) 50%, var(--chrome-1) 65%, var(--chrome-3) 80%, var(--chrome-2) 100%);
  background-size:220% 220%;background-position:var(--mx) var(--my);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  transition:background-position .12s linear;
}
.metal-line{
  height:1px;width:100%;
  background:linear-gradient(90deg, transparent, var(--chrome-2) 20%, var(--chrome-1) 50%, var(--chrome-2) 80%, transparent);
  opacity:.55;
}

/* ---------- cursor ---------- */
#cursor{
  position:fixed;top:0;left:0;width:24px;height:24px;border-radius:50%;
  border:1px solid var(--chrome-1);pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);transition:width .25s ease, height .25s ease, background .25s ease;
  mix-blend-mode:difference;
}
#cursor.big{width:60px;height:60px;background:conic-gradient(from var(--ang), rgba(244,246,246,.5), rgba(86,95,97,.1), rgba(244,246,246,.5));}

/* ---------- chrome decorative elements ---------- */
.chrome-orb{
  position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 32% 28%, var(--chrome-1) 0%, var(--chrome-2) 28%, var(--chrome-3) 55%, var(--green-deep) 78%);
  box-shadow:0 30px 90px -30px rgba(0,0,0,.7), inset 0 0 40px rgba(255,255,255,.08);
}
.chrome-ring{
  position:absolute;border-radius:50%;pointer-events:none;
  border:10px solid;
  border-image:conic-gradient(from var(--ang), var(--chrome-3), var(--chrome-1), var(--chrome-2), var(--chrome-1), var(--chrome-3)) 1;
  opacity:.7;
}

/* ---------- top bar ---------- */
.diag-topbar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 6vw;transition:background .4s ease, padding .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
.diag-topbar.scrolled{
  background:rgba(12,35,29,.75);backdrop-filter:blur(14px);padding:14px 6vw;
  border-bottom:1px solid rgba(244,246,246,.1);
}
.diag-logo{display:flex;align-items:center;}
.diag-logo img{height:30px;width:auto;}
.diag-back{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--graphite);
  text-decoration:none;transition:color .3s ease;display:flex;align-items:center;gap:8px;
}
.diag-back:hover{color:var(--white);}
.diag-progress-label{font-size:11px;letter-spacing:.18em;color:var(--graphite);}

/* ---------- app shell ---------- */
.diag-app{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:120px 6vw 60px;}
.diag-screen{display:none;width:100%;max-width:720px;margin:0 auto;}
.diag-screen.active{display:block;}

/* ---------- intro screen ---------- */
#screen-intro{max-width:680px;text-align:center;}
.diag-intro-badge{
  display:inline-flex;align-items:center;gap:10px;padding:9px 20px;border:1px solid rgba(244,246,246,.18);
  border-radius:30px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--graphite);margin-bottom:36px;
}
.diag-intro-badge .dot{width:6px;height:6px;border-radius:50%;background:linear-gradient(var(--ang), var(--chrome-3), var(--chrome-1), var(--chrome-2));}
.diag-title{font-family:'Bodoni Moda',serif;font-size:clamp(32px,5.2vw,54px);line-height:1.15;font-weight:500;margin-bottom:26px;}
.diag-lead{font-size:clamp(16px,1.6vw,19px);line-height:1.7;color:var(--white);opacity:.85;max-width:560px;margin:0 auto 14px;}
.diag-lead.dim{color:var(--graphite);opacity:1;}
.diag-meta-row{display:flex;gap:28px;justify-content:center;margin:38px 0 44px;flex-wrap:wrap;}
.diag-meta-row div{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite);display:flex;align-items:center;gap:8px;}
.diag-meta-row div::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--chrome-2);}

/* ---------- buttons ---------- */
.btn{
  position:relative;padding:16px 36px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;border-radius:2px;overflow:hidden;isolation:isolate;display:inline-block;
  cursor:none;border:none;font-family:inherit;
}
.btn-primary{
  color:var(--green-deep);font-weight:500;
  background:linear-gradient(var(--ang), var(--chrome-3), var(--chrome-1) 30%, var(--chrome-4) 50%, var(--chrome-2) 70%, var(--chrome-3));
  background-size:220% 220%;background-position:var(--mx) var(--my);
  transition:transform .4s ease, box-shadow .4s ease;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(244,246,246,.4);}
.btn-outline{
  color:var(--white);border:1px solid rgba(244,246,246,.35);background:transparent;
  transition:border-color .4s ease, color .4s ease;
}
.btn-outline:hover{border-color:var(--chrome-1);color:var(--chrome-1);}
.btn:disabled{opacity:.4;pointer-events:none;}

/* ---------- progress ---------- */
.diag-progress-wrap{margin-bottom:48px;}
.diag-progress-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;}
.diag-progress-count{font-family:'Bodoni Moda',serif;font-size:15px;color:var(--white);}
.diag-progress-track{height:2px;background:rgba(244,246,246,.12);position:relative;overflow:hidden;border-radius:2px;}
.diag-progress-bar{
  position:absolute;left:0;top:0;height:100%;width:12.5%;
  background:linear-gradient(90deg, var(--chrome-3), var(--chrome-1), var(--chrome-2));
  transition:width .6s cubic-bezier(.65,0,.35,1);
}

/* ---------- question ---------- */
.diag-question-cat{margin-bottom:18px;}
.diag-question-title{
  font-family:'Bodoni Moda',serif;font-size:clamp(24px,3.6vw,38px);line-height:1.25;margin-bottom:40px;
}
.diag-options{display:flex;flex-direction:column;gap:12px;}
.diag-option{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 26px;border:1px solid rgba(244,246,246,.16);background:rgba(244,246,246,.02);
  text-align:left;color:var(--white);font-size:15.5px;font-family:'Inter',sans-serif;font-weight:300;
  cursor:none;transition:border-color .35s ease, background .35s ease, transform .3s ease;
  position:relative;overflow:hidden;
}
.diag-option::before{
  content:'';position:absolute;inset:0;background:linear-gradient(90deg, transparent, rgba(244,246,246,.08), transparent);
  transform:translateX(-100%);transition:transform .6s ease;
}
.diag-option:hover{border-color:rgba(244,246,246,.4);background:rgba(244,246,246,.05);transform:translateX(4px);}
.diag-option:hover::before{transform:translateX(100%);}
.diag-option .opt-arrow{flex-shrink:0;width:16px;height:16px;opacity:0;transform:translateX(-6px);transition:opacity .3s ease, transform .3s ease;}
.diag-option:hover .opt-arrow{opacity:1;transform:translateX(0);color:var(--chrome-1);}
.diag-option.selected{border-color:var(--chrome-1);background:rgba(244,246,246,.08);}
.diag-nav-row{display:flex;justify-content:space-between;align-items:center;margin-top:40px;}
.diag-nav-back{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--graphite);background:none;border:none;
  cursor:none;display:flex;align-items:center;gap:8px;transition:color .3s ease;
}
.diag-nav-back:hover{color:var(--white);}
.diag-nav-back:disabled{opacity:0;pointer-events:none;}

/* ---------- lead capture ---------- */
#screen-lead .diag-title{font-size:clamp(26px,3.8vw,38px);}
.diag-field{margin-bottom:24px;}
.diag-field label{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--graphite);margin-bottom:10px;}
.diag-field input{
  width:100%;background:transparent;border:none;border-bottom:1px solid rgba(244,246,246,.22);
  color:var(--white);font-family:'Inter',sans-serif;font-size:16px;padding:12px 0;outline:none;
  transition:border-color .3s ease;cursor:none;
}
.diag-field input:focus{border-color:var(--chrome-1);}
.req-mark{color:var(--chrome-2);opacity:.8;}
.diag-field input.invalid{border-color:#c97b6a;}
.diag-field-error{
  display:none;font-size:12px;color:#e0a695;margin-top:8px;line-height:1.5;
}
.diag-field-error.show{display:block;}
@keyframes shake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-6px);}
  40%{transform:translateX(5px);}
  60%{transform:translateX(-4px);}
  80%{transform:translateX(3px);}
}
.diag-field.shake{animation:shake .4s ease;}
.diag-field-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.diag-privacy{font-size:11.5px;color:var(--graphite);margin-top:6px;line-height:1.6;}
.hp-field{position:absolute;left:-9999px;top:-9999px;}

/* ---------- result ---------- */
#screen-result{max-width:760px;}
.diag-result-intro{text-align:center;margin-bottom:56px;}
.diag-result-orb-wrap{display:flex;justify-content:center;margin-bottom:24px;}
.diag-result-orb{width:64px;height:64px;border-radius:50%;position:relative;
  background:radial-gradient(circle at 32% 28%, var(--chrome-1) 0%, var(--chrome-2) 30%, var(--chrome-3) 60%, var(--green-deep) 82%);
  box-shadow:0 20px 50px -18px rgba(0,0,0,.7);
}
.diag-result-ready{font-family:'Bodoni Moda',serif;font-style:italic;font-size:19px;color:var(--graphite);}
.diag-profile-label{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--graphite);text-align:center;margin-bottom:14px;}
.diag-profile-name{
  font-family:'Bodoni Moda',serif;font-size:clamp(32px,5.6vw,58px);text-align:center;margin-bottom:26px;font-weight:500;
}
.diag-profile-desc{font-size:16.5px;line-height:1.75;color:var(--white);opacity:.88;text-align:center;max-width:600px;margin:0 auto;}

.diag-result-block{margin-top:64px;}
.diag-result-block .eyebrow{display:block;margin-bottom:24px;}
.diag-priorities{display:flex;flex-direction:column;gap:1px;background:rgba(244,246,246,.1);border:1px solid rgba(244,246,246,.1);}
.diag-priority{
  background:var(--green-deep);padding:22px 26px;display:flex;align-items:baseline;gap:20px;
}
.diag-priority .p-num{font-family:'Bodoni Moda',serif;font-size:14px;color:var(--chrome-2);flex-shrink:0;}
.diag-priority .p-label{font-family:'Bodoni Moda',serif;font-size:19px;}

.diag-reco-text{font-size:16px;line-height:1.75;color:var(--white);opacity:.85;}
.diag-pack-card{
  margin-top:26px;border:1px solid rgba(244,246,246,.18);padding:28px 30px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  background:linear-gradient(160deg, rgba(60,90,97,.25), transparent);
}
.diag-pack-card .pc-label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--graphite);margin-bottom:8px;}
.diag-pack-card .pc-name{font-family:'Bodoni Moda',serif;font-size:24px;}

.diag-cta-final{margin-top:70px;text-align:center;padding-top:56px;border-top:1px solid rgba(244,246,246,.12);}
.diag-cta-final .diag-title{font-size:clamp(24px,3.4vw,34px);margin-bottom:14px;}
.diag-cta-row{display:flex;gap:16px;justify-content:center;margin-top:30px;flex-wrap:wrap;}

/* ---------- footer ---------- */
.diag-foot{text-align:center;padding:50px 6vw 40px;color:var(--green-mid);font-size:11px;letter-spacing:.08em;}

/* ---------- fade transitions ---------- */
.fade-enter{opacity:0;transform:translateY(18px);}
.fade-enter-active{opacity:1;transform:translateY(0);transition:opacity .5s ease, transform .5s ease;}
.fade-exit{opacity:1;}
.fade-exit-active{opacity:0;transform:translateY(-14px);transition:opacity .35s ease, transform .35s ease;}

@media(max-width:720px){
  .chrome-orb, .chrome-ring{display:none;}
  .diag-app{padding:100px 6vw 50px;}
  .diag-field-row{grid-template-columns:1fr;}
  .diag-option{padding:18px 20px;font-size:15px;}
  .diag-meta-row{gap:16px;}
  #cursor{display:none;}
  body{cursor:auto;}
  .diag-priority{padding:18px 20px;}
  .diag-cta-row{flex-direction:column;align-items:stretch;}
  .diag-cta-row .btn{text-align:center;}
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important;}
}