:root {
      --dark:#020817;
      --navy:#061f4a;
      --cyan:#00a7e1;
      --orange:#ff7a00;
      --gold:#ffd166;
      --green:#2ec4b6;
      --white:#ffffff;
      --muted:rgba(255,255,255,.74);
    }

    * { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

    #cap-performance-scan-root {
      margin:0;
      min-height:100vh;
      font-family: Arial, Helvetica, sans-serif;
      color:white;
      overflow-x:hidden;
      background:
        radial-gradient(circle at 50% -10%, rgba(0,167,225,.55), transparent 34%),
        radial-gradient(circle at 15% 90%, rgba(255,122,0,.30), transparent 30%),
        radial-gradient(circle at 85% 85%, rgba(46,196,182,.16), transparent 26%),
        linear-gradient(135deg,#020817 0%,#061f4a 54%,#000 100%);
    }

    #cap-performance-scan-root::before {
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size:42px 42px;
      animation:grid 18s linear infinite;
      z-index:0;
    }

    @keyframes grid { from {transform:translateY(0)} to {transform:translateY(42px)} }

    .app {
      position:relative;
      z-index:1;
      min-height:100vh;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:18px;
    }

    .card {
      width:min(100%, 940px);
      min-height:min(92vh, 820px);
      border:1px solid rgba(255,255,255,.18);
      background:linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.055));
      backdrop-filter:blur(12px);
      border-radius:34px;
      padding:26px;
      box-shadow:0 24px 90px rgba(0,0,0,.42);
      overflow:hidden;
      position:relative;
    }

    .card::after {
      content:"";
      position:absolute;
      width:420px;
      height:420px;
      border-radius:50%;
      right:-180px;
      top:-210px;
      background:radial-gradient(circle, rgba(255,122,0,.26), transparent 68%);
      pointer-events:none;
    }

    .brand {
      display:flex;
      align-items:center;
      justify-content:center;
      gap:12px;
      position:relative;
      z-index:2;
    }

    .mark {
      width:48px;
      height:48px;
      border-radius:50%;
      background:conic-gradient(from 210deg,var(--orange),var(--gold),var(--cyan),var(--orange));
      box-shadow:0 0 34px rgba(255,122,0,.72);
      flex:0 0 auto;
    }

    .logo {
      font-size:clamp(24px, 5vw, 40px);
      font-weight:1000;
      text-transform:uppercase;
      letter-spacing:2px;
    }

    .logo span { color:var(--orange); }

    .screen { display:none; animation:enter .32s ease both; position:relative; z-index:2; }
    .screen.active { display:block; }

    @keyframes enter {
      from { opacity:0; transform:translateY(18px) scale(.985); }
      to { opacity:1; transform:translateY(0) scale(1); }
    }

    .hero {
      min-height:660px;
      display:flex;
      flex-direction:column;
      justify-content:center;
      text-align:center;
      align-items:center;
      gap:16px;
      padding:20px 0;
    }

    .tag {
      color:var(--gold);
      font-size:14px;
      font-weight:1000;
      letter-spacing:2px;
      text-transform:uppercase;
    }
#cap-performance-scan-root h1 {
      margin:0;
      font-size:clamp(46px, 9vw, 92px);
      text-transform:uppercase;
      line-height:.88;
      letter-spacing:-2px;
    }
#cap-performance-scan-root h1 span { color:var(--orange); }

    .hero-sub {
      max-width:680px;
      font-size:clamp(18px, 3.5vw, 26px);
      color:rgba(255,255,255,.88);
      line-height:1.3;
      margin:0;
    }

    .chips {
      display:flex;
      justify-content:center;
      gap:10px;
      flex-wrap:wrap;
      margin:10px 0;
    }

    .chip {
      border:1px solid rgba(255,255,255,.18);
      background:rgba(0,0,0,.22);
      border-radius:999px;
      padding:10px 14px;
      font-weight:900;
      text-transform:uppercase;
      font-size:13px;
      color:rgba(255,255,255,.88);
    }

    .btn {
      border:0;
      border-radius:999px;
      padding:16px 28px;
      font-size:17px;
      font-weight:1000;
      text-transform:uppercase;
      cursor:pointer;
      color:#020817;
      background:linear-gradient(135deg,var(--orange),var(--gold));
      box-shadow:0 0 36px rgba(255,122,0,.36);
      transition:.18s ease;
    }

    .btn:hover { transform:translateY(-2px) scale(1.02); }
    .btn.secondary {
      color:white;
      background:rgba(255,255,255,.12);
      border:2px solid rgba(255,255,255,.25);
      box-shadow:none;
    }

    .topbar {
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
      margin:16px 0 18px;
    }

    .progress-wrap { flex:1; }
    .progress-label {
      display:flex;
      justify-content:space-between;
      font-size:12px;
      font-weight:1000;
      text-transform:uppercase;
      color:var(--muted);
      margin-bottom:8px;
    }

    .progress {
      height:10px;
      border-radius:999px;
      background:rgba(255,255,255,.13);
      overflow:hidden;
    }

    .bar {
      height:100%;
      width:0%;
      border-radius:999px;
      background:linear-gradient(90deg,var(--cyan),var(--orange),var(--gold));
      transition:width .28s ease;
    }

    .question-title {
      font-size:clamp(30px, 6vw, 52px);
      line-height:1;
      text-transform:uppercase;
      margin:20px 0 8px;
      max-width:820px;
    }

    .question-help {
      font-size:clamp(15px, 2.5vw, 19px);
      color:rgba(255,255,255,.78);
      margin:0 0 20px;
    }

    .answers {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:14px;
    }

    .answer {
      text-align:left;
      min-height:132px;
      border:2px solid rgba(255,255,255,.15);
      background:rgba(0,0,0,.22);
      color:white;
      border-radius:24px;
      padding:18px;
      cursor:pointer;
      transition:.20s ease;
      position:relative;
      overflow:hidden;
    }

    .answer::after {
      content:"";
      position:absolute;
      inset:auto -40px -60px auto;
      width:150px;
      height:150px;
      border-radius:50%;
      background:rgba(255,122,0,.12);
      transition:.2s ease;
    }

    .answer:hover, .answer.selected {
      transform:translateY(-4px);
      border-color:rgba(255,122,0,.9);
      background:rgba(255,122,0,.18);
    }

    .answer:hover::after, .answer.selected::after { background:rgba(255,209,102,.20); }

    .answer .emoji {
      font-size:32px;
      display:block;
      margin-bottom:10px;
    }

    .answer strong {
      display:block;
      font-size:22px;
      text-transform:uppercase;
      line-height:1.05;
      margin-bottom:6px;
    }

    .answer span {
      display:block;
      color:rgba(255,255,255,.76);
      line-height:1.3;
      font-size:15px;
    }

    .contact-grid {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:13px;
      max-width:720px;
      margin:20px auto 0;
    }
#cap-performance-scan-root input {
      width:100%;
      border:2px solid rgba(255,255,255,.20);
      background:rgba(0,0,0,.25);
      color:white;
      border-radius:18px;
      padding:16px;
      font-size:18px;
      font-weight:850;
      outline:none;
    }
#cap-performance-scan-root input::placeholder { color:rgba(255,255,255,.48); }

    .full { grid-column:1/-1; }

    .check {
      display:flex;
      gap:12px;
      align-items:flex-start;
      border:2px solid rgba(255,255,255,.15);
      background:rgba(0,0,0,.22);
      border-radius:18px;
      padding:14px;
      font-size:14px;
      color:rgba(255,255,255,.82);
      line-height:1.3;
    }

    .check input {
      width:22px;
      height:22px;
      flex:0 0 auto;
      margin:0;
      accent-color:#ff7a00;
    }

    .actions {
      display:flex;
      gap:12px;
      justify-content:space-between;
      align-items:center;
      margin-top:22px;
      flex-wrap:wrap;
    }

    .error {
      margin-top:12px;
      color:#ffaaaa;
      text-align:center;
      font-weight:900;
    }

    .status {
      margin-top:10px;
      color:rgba(255,255,255,.72);
      text-align:center;
      font-size:13px;
    }

    .result-layout {
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:20px;
      align-items:center;
      margin-top:18px;
    }

    .badge {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:260px;
      border-radius:999px;
      padding:14px 24px;
      color:#020817;
      background:linear-gradient(135deg,var(--orange),var(--gold));
      box-shadow:0 0 40px rgba(255,122,0,.38);
      font-size:clamp(34px, 6vw, 58px);
      font-weight:1000;
      text-transform:uppercase;
      margin:10px 0;
    }

    .result-title {
      font-size:clamp(28px, 5vw, 48px);
      line-height:1;
      margin:8px 0 12px;
      text-transform:uppercase;
    }

    .scoreline {
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      margin:16px 0;
    }

    .scorepill {
      background:rgba(0,0,0,.25);
      border:1px solid rgba(255,255,255,.14);
      border-radius:18px;
      padding:12px 14px;
      font-weight:1000;
      text-transform:uppercase;
    }

    .scorepill b { color:var(--gold); font-size:24px; }

    .result-text {
      color:rgba(255,255,255,.86);
      font-size:18px;
      line-height:1.42;
    }

    .radar-card {
      background:rgba(0,0,0,.22);
      border:1px solid rgba(255,255,255,.14);
      border-radius:28px;
      padding:18px;
      text-align:center;
    }
#cap-performance-scan-root canvas { max-width:100%; }

    .advice-grid {
      margin-top:16px;
    }

    .advice {
      border-radius:22px;
      padding:18px;
      background:rgba(0,0,0,.25);
      border:1px solid rgba(255,255,255,.14);
    }

    .advice strong {
      display:block;
      color:var(--gold);
      text-transform:uppercase;
      margin-bottom:10px;
      font-size:14px;
      letter-spacing:1px;
    }

    .advice p {
      color:rgba(255,255,255,.86);
      font-size:16px;
      line-height:1.38;
      margin:0 0 10px;
    }

    .advice p:last-child { margin-bottom:0; }

    .coaching-link {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:999px;
      padding:14px 18px;
      margin-top:14px;
      color:#020817;
      background:linear-gradient(135deg,var(--cyan),var(--gold));
      font-size:14px;
      font-weight:1000;
      text-transform:uppercase;
      text-decoration:none;
      box-shadow:0 0 28px rgba(0,167,225,.28);
    }

    .coaching-link:hover { transform:translateY(-2px); }

    .challenge {
      margin-top:14px;
      border:2px solid rgba(255,122,0,.45);
      background:rgba(255,122,0,.14);
      border-radius:22px;
      padding:16px;
      font-size:18px;
      font-weight:950;
      text-transform:uppercase;
    }

    .qr {
      display:inline-flex;
      width:118px;
      height:118px;
      align-items:center;
      justify-content:center;
      border-radius:18px;
      color:#020817;
      background:white;
      font-size:13px;
      font-weight:1000;
      text-align:center;
      margin-top:12px;
      line-height:1.1;
    }

    .mini {
      font-size:12px;
      color:rgba(255,255,255,.62);
      margin-top:8px;
    }



    .score-reveal {
      text-align:center;
      padding:20px 0 10px;
    }

    .score-count {
      font-size:clamp(74px, 15vw, 142px);
      line-height:.9;
      font-weight:1000;
      color:var(--gold);
      text-shadow:0 0 42px rgba(255,122,0,.42);
      letter-spacing:-4px;
    }

    .score-count span {
      font-size:clamp(28px, 5vw, 48px);
      color:rgba(255,255,255,.86);
      letter-spacing:-1px;
    }

    .score-reveal-text {
      margin-top:10px;
      color:rgba(255,255,255,.78);
      font-size:18px;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:1px;
    }

    .reveal-hidden {
      opacity:0;
      transform:translateY(16px);
      max-height:0;
      overflow:hidden;
      transition:opacity .55s ease, transform .55s ease, max-height .55s ease;
    }

    .reveal-hidden.visible {
      opacity:1;
      transform:translateY(0);
      max-height:2000px;
    }

    .benchmark {
      margin-top:14px;
      border:1px solid rgba(0,167,225,.34);
      background:rgba(0,167,225,.12);
      border-radius:22px;
      padding:14px 16px;
      color:rgba(255,255,255,.88);
      font-size:16px;
      line-height:1.35;
    }

    .benchmark strong { color:var(--gold); }

    @media (max-width:760px) {
      .app { padding:10px; align-items:flex-start; }
      .card { border-radius:24px; padding:17px; min-height:calc(100vh - 20px); }
      .brand { justify-content:flex-start; }
      .hero { min-height:calc(100vh - 80px); text-align:left; align-items:flex-start; }
      .chips { justify-content:flex-start; }
      .answers, .contact-grid, .result-layout, .advice-grid { grid-template-columns:1fr; }
      .answer { min-height:auto; }
      .btn { width:100%; }
      .actions { flex-direction:column-reverse; }
      .topbar { align-items:flex-start; }
      .badge { min-width:100%; }
    }
#cap-performance-scan-root {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
}
#cap-performance-scan-root .app {
  min-height: 100vh;
}
#cap-performance-scan-root button,
#cap-performance-scan-root input {
  font-family: Arial, Helvetica, sans-serif;
}


/* Correctifs mobile WordPress / Elementor */
#cap-performance-scan-root {
  max-width: 100%;
}

#cap-performance-scan-root .card {
  max-width: 100%;
}

#cap-performance-scan-root .contact-grid {
  width: 100%;
  max-width: 720px;
}

#cap-performance-scan-root .check {
  display: flex;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

#cap-performance-scan-root .check input[type="checkbox"] {
  width: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
  margin-top: 1px !important;
  padding: 0 !important;
}

#cap-performance-scan-root .check span {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

@media (max-width: 760px) {
  #cap-performance-scan-root {
    min-height: auto;
  }

  #cap-performance-scan-root .app {
    padding: 10px;
    min-height: auto;
    align-items: flex-start;
  }

  #cap-performance-scan-root .card {
    width: 100%;
    min-height: auto;
    padding: 16px;
    border-radius: 22px;
  }

  #cap-performance-scan-root .contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: 100%;
  }

  #cap-performance-scan-root input {
    width: 100%;
    max-width: 100%;
    font-size: 17px;
  }

  #cap-performance-scan-root .check {
    font-size: 13px;
    line-height: 1.35;
    padding: 13px;
    gap: 10px;
  }

  #cap-performance-scan-root .question-title {
    font-size: clamp(28px, 9vw, 42px);
  }

  #cap-performance-scan-root .btn {
    width: 100%;
    white-space: normal;
  }
}


/* Correctifs lisibilité titres / contraste Elementor */
#cap-performance-scan-root .question-title {
  color: #ffffff !important;
  text-shadow: 0 3px 18px rgba(0,0,0,.72), 0 0 22px rgba(255,122,0,.22);
  opacity: 1 !important;
  font-weight: 1000 !important;
}

#cap-performance-scan-root .question-title::first-line {
  color: #ffffff !important;
}

#cap-performance-scan-root .question-help {
  color: rgba(255,255,255,.96) !important;
  font-weight: 800;
  text-shadow: 0 2px 10px rgba(0,0,0,.48);
}

#cap-performance-scan-root .card {
  background: linear-gradient(145deg, rgba(2,8,23,.90), rgba(6,31,74,.78)) !important;
}

#cap-performance-scan-root .answer {
  background: rgba(2,8,23,.54) !important;
  border-color: rgba(255,255,255,.26) !important;
}

#cap-performance-scan-root .answer strong {
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.50);
}

#cap-performance-scan-root .answer span {
  color: rgba(255,255,255,.92) !important;
}

#cap-performance-scan-root .progress-label {
  color: rgba(255,255,255,.92) !important;
}

#cap-performance-scan-root .topbar {
  margin-bottom: 22px;
}

@media (max-width: 760px) {
  #cap-performance-scan-root .question-title {
    font-size: clamp(34px, 11vw, 48px) !important;
    line-height: .95 !important;
  }

  #cap-performance-scan-root .question-help {
    font-size: 17px !important;
  }
}