/* ========================================
       CSS VARIABLES
       ======================================== */
    :root {
      /* --- accents --- */
      --blue: #0EA5E9;           /* cyan, accent science */
      --cyan: #0EA5E9;
      --cyan-deep: #0369A1;
      --cyan-soft: #E0F2FE;
      --green: #10B981;          /* emerald, optimal + CTA action */
      --emerald: #10B981;
      --emerald-soft: #D1FAE5;
      --red: #EF4444;            /* hors zone */
      --red-soft: #FEE2E2;
      --amber: #F59E0B;          /* à surveiller */
      --amber-soft: #FEF3C7;
      --orange: #F97316;
      --purple: #8B5CF6;         /* RÉSERVÉ aux upsell produits */
      --violet: #8B5CF6;
      --violet-deep: #6D28D9;
      --violet-soft: #EDE9FE;
      --rust: #7C2D12;           /* touche marque */
      --instrument: #0B1220;     /* bandeaux sombres */

      /* --- slate scale --- */
      --slate-50: #F8FAFC;
      --slate-100: #F1F5F9;
      --slate-200: #E2E8F0;
      --slate-300: #CBD5E1;
      --slate-400: #94A3B8;
      --slate-500: #64748B;
      --slate-600: #475569;
      --slate-700: #334155;
      --slate-800: #1E293B;
      --slate-900: #0F172A;

      /* surfaces */
      --paper: #EEF2F6;
      --card: #FFFFFF;
      --card-2: #F8FAFC;
      --line: #E2E8F0;
      --line-strong: #CBD5E1;

      --radius: 16px;
      --radius-sm: 8px;
      --r: 18px;
      --r-sm: 12px;

      --font: 'Plus Jakarta Sans', system-ui, sans-serif;
      --sans: 'Plus Jakarta Sans', system-ui, sans-serif;
      --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

      --sh-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.05);
      --sh: 0 8px 24px -8px rgba(15,23,42,.18), 0 2px 6px rgba(15,23,42,.06);
      --sh-lg: 0 28px 56px -20px rgba(11,18,32,.45);
    }

    /* ========================================
       RESET + BASE
       ======================================== */
    *, *::before, *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      font-size: 16px;
      -webkit-text-size-adjust: 100%;
    }

    body {
      font-family: var(--font);
      color: var(--slate-900);
      background:
        radial-gradient(900px 600px at 12% -8%, #DDE7EE 0%, transparent 55%),
        radial-gradient(700px 500px at 100% 0%, #E6EEF3 0%, transparent 50%),
        var(--paper);
      background-attachment: scroll; /* fixed retiré : coût de repaint élevé sur mobile */
      line-height: 1.6;
      min-height: 100vh;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* mono applies to all numeric/code content via explicit classes */
    .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

    img, svg {
      display: block;
      max-width: 100%;
    }

    button {
      font-family: inherit;
      cursor: pointer;
      border: none;
      background: none;
    }

    input {
      font-family: inherit;
    }

    /* ========================================
       HONEYCOMB BACKGROUND
       ======================================== */
    /* faint molecular dot grid overlay (instrument feel) */
    .honeycomb-bg {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      z-index: 0;
      pointer-events: none;
      opacity: 0.5;
      background-image: radial-gradient(rgba(14,165,233,.10) 1px, transparent 1.4px);
      background-size: 26px 26px;
      mask-image: linear-gradient(180deg, #000, transparent 70%);
      -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%);
    }

    /* ========================================
       FLOATING MOLECULES
       ======================================== */
    .floating-molecules {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
    }

    .molecule {
      position: absolute;
      font-family: var(--font);
      font-weight: 600;
      color: var(--blue);
      white-space: nowrap;
      will-change: transform;
    }

    @keyframes drift1 { 0%,100% { transform: translateY(0) translateX(0); } 50% { transform: translateY(-15px) translateX(10px); } }
    @keyframes drift2 { 0%,100% { transform: translateY(0) translateX(0); } 50% { transform: translateY(12px) translateX(-8px); } }
    @keyframes drift3 { 0%,100% { transform: translateY(0) translateX(0); } 50% { transform: translateY(-10px) translateX(-12px); } }
    @keyframes drift4 { 0%,100% { transform: translateY(0) translateX(0); } 50% { transform: translateY(14px) translateX(6px); } }
    @keyframes drift5 { 0%,100% { transform: translateY(0) translateX(0); } 50% { transform: translateY(-8px) translateX(14px); } }

    .mol-1  { top: 5%;  left: 8%;  font-size: 11px; opacity: 0.045; animation: drift1 28s ease-in-out infinite; color: var(--slate-400); }
    .mol-2  { top: 12%; left: 72%; font-size: 12px; opacity: 0.04;  animation: drift2 34s ease-in-out infinite; color: var(--blue); }
    .mol-3  { top: 22%; left: 35%; font-size: 10px; opacity: 0.05;  animation: drift3 25s ease-in-out infinite; color: var(--slate-400); }
    .mol-4  { top: 30%; left: 88%; font-size: 11px; opacity: 0.035; animation: drift4 38s ease-in-out infinite; color: var(--blue); }
    .mol-5  { top: 38%; left: 15%; font-size: 13px; opacity: 0.04;  animation: drift5 32s ease-in-out infinite; color: var(--slate-400); }
    .mol-6  { top: 45%; left: 60%; font-size: 10px; opacity: 0.055; animation: drift1 22s ease-in-out infinite; color: var(--blue); }
    .mol-7  { top: 55%; left: 5%;  font-size: 11px; opacity: 0.04;  animation: drift2 30s ease-in-out infinite; color: var(--slate-400); }
    .mol-8  { top: 60%; left: 80%; font-size: 12px; opacity: 0.045; animation: drift3 36s ease-in-out infinite; color: var(--blue); }
    .mol-9  { top: 68%; left: 42%; font-size: 10px; opacity: 0.035; animation: drift4 27s ease-in-out infinite; color: var(--slate-400); }
    .mol-10 { top: 75%; left: 92%; font-size: 13px; opacity: 0.04;  animation: drift5 40s ease-in-out infinite; color: var(--blue); }
    .mol-11 { top: 82%; left: 20%; font-size: 11px; opacity: 0.05;  animation: drift1 33s ease-in-out infinite; color: var(--slate-400); }
    .mol-12 { top: 88%; left: 55%; font-size: 10px; opacity: 0.06;  animation: drift2 24s ease-in-out infinite; color: var(--blue); }
    .mol-13 { top: 15%; left: 50%; font-size: 11px; opacity: 0.04;  animation: drift3 29s ease-in-out infinite; color: var(--slate-400); }
    .mol-14 { top: 48%; left: 30%; font-size: 12px; opacity: 0.035; animation: drift4 35s ease-in-out infinite; color: var(--blue); }
    .mol-15 { top: 70%; left: 68%; font-size: 10px; opacity: 0.05;  animation: drift5 26s ease-in-out infinite; color: var(--slate-400); }
    .mol-16 { top: 92%; left: 10%; font-size: 11px; opacity: 0.04;  animation: drift1 37s ease-in-out infinite; color: var(--slate-400); }
    .mol-17 { top: 35%; left: 48%; font-size: 11px; opacity: 0.045; animation: drift2 31s ease-in-out infinite; color: var(--blue); }
    .mol-18 { top: 78%; left: 38%; font-size: 12px; opacity: 0.035; animation: drift3 39s ease-in-out infinite; color: var(--slate-400); }

    /* ========================================
       CONTAINER
       ======================================== */
    .container {
      max-width: 700px;
      margin: 0 auto;
      padding: 0 20px;
    }

    /* ========================================
       BCH LOGO HEADER (wizard + results)
       ======================================== */
    .bch-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 20px;
    }

    .bch-header img {
      width: 36px;
      height: 36px;
      border-radius: 8px;
    }

    .bch-header span {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--slate-600);
    }

    /* ========================================
       GLASSMORPHISM CARDS
       ======================================== */
    .glass-card {
      background: rgba(255, 255, 255, 0.7);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: var(--radius);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .glass-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 40px rgba(14, 165, 233, 0.15);
    }

    /* ========================================
       GRADIENT TEXT
       ======================================== */
    .gradient-text {
      background: linear-gradient(135deg, #0EA5E9, #06B6D4);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* ========================================
       SCREEN 1 - WELCOME
       ======================================== */
    #screen-welcome {
      min-height: 100vh;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding: 28px 16px 60px;
      position: relative;
      z-index: 1;
    }

    .welcome-inner {
      max-width: 560px;
      width: 100%;
      text-align: left;
      color: var(--slate-900);
      position: relative;
      z-index: 2;
    }

    .welcome-card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--r);
      box-shadow: var(--sh);
      padding: 28px 22px 24px;
    }

    .welcome-logo {
      width: 56px;
      height: 56px;
      border-radius: 14px;
      margin: 0 0 18px;
    }

    .welcome-kicker {
      display: inline-block;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--cyan-deep);
      font-weight: 600;
      margin-bottom: 10px;
    }

    .welcome-inner h1 {
      font-size: 1.85rem;
      font-weight: 800;
      line-height: 1.13;
      letter-spacing: -0.025em;
      margin-bottom: 12px;
      color: var(--slate-900);
    }

    .welcome-inner h1 em {
      font-style: normal;
      color: var(--cyan-deep);
    }

    .welcome-inner .subtitle {
      font-size: 1.15rem;
      color: var(--slate-700);
      margin-bottom: 20px;
      line-height: 1.6;
    }

    /* spec row : 15 marqueurs / 5 systèmes / 2 seuils */
    .spec-row {
      display: flex;
      gap: 10px;
      margin: 20px 0 24px;
      align-items: stretch;
    }

    .spec-row .spec {
      flex: 1;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      background: linear-gradient(180deg, #fff 0%, var(--card-2) 100%);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 15px 8px 13px;
      text-align: center;
      box-shadow: var(--sh-sm);
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
      cursor: default;
    }

    .spec-row .spec:hover,
    .spec-row .spec:active {
      transform: translateY(-3px);
      box-shadow: var(--sh);
      border-color: var(--cyan);
    }

    .spec-ic {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 11px;
      margin-bottom: 3px;
    }
    .spec-ic svg { width: 19px; height: 19px; }
    .spec--a .spec-ic { background: var(--cyan-soft);    color: var(--cyan-deep); }
    .spec--b .spec-ic { background: var(--slate-100);     color: var(--slate-600); }
    .spec--c .spec-ic { background: var(--emerald-soft);  color: #047857; }

    .spec-row .spec b {
      display: block;
      font-family: var(--mono);
      font-size: 1.6rem;
      font-weight: 700;
      line-height: 1.05;
    }
    .spec--a b { color: var(--cyan-deep); }
    .spec--b b { color: var(--slate-800); }
    .spec--c b { color: #047857; }

    .spec-lbl {
      font-size: 0.74rem;
      font-weight: 600;
      letter-spacing: 0.03em;
      color: var(--slate-600);
    }

    .spec-sub {
      font-family: var(--mono);
      font-size: 0.58rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--slate-400);
      margin-top: -1px;
    }

    .disclaimer-box {
      background: var(--card-2);
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      padding: 16px;
      margin-bottom: 0;
      text-align: left;
      font-size: 0.92rem;
      line-height: 1.62;
      color: var(--slate-600);
    }

    .disclaimer-box strong {
      display: block;
      margin-bottom: 6px;
      font-size: 0.98rem;
      color: var(--slate-700);
    }

    .disclaimer-box p + p {
      margin-top: 8px;
      color: var(--slate-500);
    }

    /* dark reassurance banner (instrument) */
    .reassure {
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--instrument);
      color: var(--slate-300);
      border-radius: 14px;
      padding: 14px 16px;
      font-size: 0.8rem;
      line-height: 1.4;
      margin: 18px 0;
    }

    .reassure svg {
      width: 20px;
      height: 20px;
      flex: none;
      color: var(--cyan);
    }

    .reassure b { color: #fff; font-weight: 600; }

    /* Disclaimer in results (light bg) */
    #screen-results .disclaimer-box {
      background: rgba(255, 255, 255, 0.7);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      color: var(--slate-600);
    }

    #screen-results .disclaimer-box strong {
      color: var(--slate-700);
    }

    #screen-results .disclaimer-box p + p {
      color: var(--slate-500);
    }

    .privacy-note {
      font-size: 0.8rem;
      color: var(--slate-400);
      margin-bottom: 32px;
    }

    /* ========================================
       BUTTONS
       ======================================== */
    .btn-primary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px 32px;
      background: var(--blue);
      color: #fff;
      font-size: 1rem;
      font-weight: 600;
      border-radius: var(--radius-sm);
      transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
      box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3);
    }

    .btn-primary:hover {
      background: #0284C7;
      box-shadow: 0 4px 16px rgba(14, 165, 233, 0.4);
      transform: translateY(-1px);
    }

    .btn-primary:active {
      transform: translateY(0);
    }

    .btn-primary:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    .btn-secondary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 24px;
      background: transparent;
      color: var(--blue);
      font-size: 0.95rem;
      font-weight: 600;
      border-radius: var(--radius-sm);
      border: 2px solid var(--blue);
      transition: background 0.2s, color 0.2s;
    }

    .btn-secondary:hover {
      background: var(--blue);
      color: #fff;
    }

    .btn-ghost {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 24px;
      background: transparent;
      color: var(--slate-500);
      font-size: 0.95rem;
      font-weight: 500;
      border-radius: var(--radius-sm);
      transition: color 0.2s, background 0.2s;
    }

    .btn-ghost:hover {
      color: var(--slate-700);
      background: var(--slate-100);
    }

    /* emerald action CTA (commencer mon analyse) */
    .btn-go {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      padding: 16px;
      background: linear-gradient(180deg, var(--emerald), #0E9F70);
      color: #fff;
      font-family: var(--sans);
      font-size: 1rem;
      font-weight: 700;
      border-radius: 14px;
      box-shadow: 0 10px 22px -8px rgba(16,185,129,.6);
      transition: transform 0.12s ease, box-shadow 0.2s ease;
    }

    .btn-go:hover {
      transform: translateY(-1px);
      box-shadow: 0 14px 28px -8px rgba(16,185,129,.7);
    }

    .btn-go:active { transform: translateY(0); }

    .btn-block { width: 100%; }

    /* ========================================
       MINI-HEADER (logo BCH + retour) + FOOTER
       ======================================== */
    .mini-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      max-width: 700px;
      margin: 0 auto 18px;
    }

    .mini-header .mh-brand {
      display: flex;
      align-items: center;
      gap: 9px;
      font-weight: 800;
      letter-spacing: -0.01em;
      font-size: 0.9rem;
      color: var(--slate-900);
    }

    .mini-header .mh-brand img {
      width: 28px;
      height: 28px;
      border-radius: 8px;
    }

    .mini-header .mh-back {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 0.82rem;
      color: var(--slate-500);
      text-decoration: none;
      font-weight: 500;
    }

    .mini-header .mh-back:hover { color: var(--cyan-deep); }

    .mh-privacy {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.72rem;
      color: #047857;
      font-weight: 600;
      background: var(--emerald-soft);
      padding: 5px 10px;
      border-radius: 99px;
    }

    .mh-privacy svg { width: 13px; height: 13px; }

    .tool-footer {
      max-width: 700px;
      margin: 28px auto 0;
      padding-top: 16px;
      border-top: 1px dashed var(--line-strong);
      font-size: 0.72rem;
      color: var(--slate-400);
      line-height: 1.55;
      position: relative;
      z-index: 1;
    }

    .tool-footer .tf-privacy {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: #047857;
      font-weight: 600;
      margin-bottom: 6px;
    }

    .tool-footer .tf-privacy svg { width: 13px; height: 13px; }

    /* ========================================
       SCREEN 2 - WIZARD
       ======================================== */
    #screen-wizard {
      min-height: 100vh;
      background: transparent;
      padding: 0 0 96px;
      position: relative;
      z-index: 1;
    }

    .wizard-container {
      max-width: 600px;
      margin: 0 auto;
      padding: 0 16px;
    }

    /* Sticky progress bar at top */
    .wizard-progress {
      position: sticky;
      top: 0;
      z-index: 40;
      background: rgba(248,250,252,0.92);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--line);
      padding: 12px 16px 11px;
      margin: 0 -16px 16px;
    }

    .progress-meta {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      font-family: var(--mono);
      font-size: 0.7rem;
      color: var(--slate-500);
      margin-bottom: 7px;
    }

    .progress-meta b { color: var(--cyan-deep); font-weight: 700; }

    .progress-bar {
      width: 100%;
      height: 5px;
      background: var(--line);
      border-radius: 100px;
      overflow: hidden;
    }

    .progress-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--cyan), var(--cyan-deep));
      border-radius: 100px;
      width: 20%;
      transition: width 0.4s ease;
    }

    /* progress-label kept for JS textContent compat, visually hidden */
    .progress-label {
      position: absolute;
      width: 1px; height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
    }

    /* Wizard content - bloc card */
    .bloc-card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 22px 20px;
      margin-bottom: 16px;
      box-shadow: var(--sh-sm);
    }

    .bloc-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 22px;
    }

    .bloc-icon {
      font-size: 1.25rem;
      width: 42px;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      background: var(--cyan-soft);
    }

    .bloc-header h3 {
      font-size: 1.15rem;
      font-weight: 800;
      letter-spacing: -0.01em;
      color: var(--slate-900);
    }

    .bloc-header .bloc-subtitle {
      display: block;
      font-family: var(--mono);
      font-size: 0.62rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--slate-500);
      font-weight: 600;
      margin-bottom: 2px;
    }

    /* Input fields : each marker is a field card */
    .marker-input-group {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--r-sm);
      padding: 14px;
      margin-bottom: 12px;
      box-shadow: var(--sh-sm);
    }

    .marker-label-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
    }

    .marker-label-row label {
      font-size: 0.92rem;
      font-weight: 700;
      color: var(--slate-800);
    }

    .marker-label-row .unit {
      font-family: var(--mono);
      font-size: 0.72rem;
      color: var(--slate-500);
      font-weight: 500;
      margin-left: auto;
    }

    /* Help button */
    .help-btn {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--slate-100);
      color: var(--slate-500);
      font-size: 0.75rem;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
      transition: background 0.2s, color 0.2s;
      flex-shrink: 0;
    }

    .help-btn:hover {
      background: var(--cyan);
      color: #fff;
    }

    /* Tooltip popover */
    .help-tooltip {
      display: none;
      position: absolute;
      bottom: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%);
      background: var(--instrument);
      color: #fff;
      padding: 12px 16px;
      border-radius: var(--radius-sm);
      font-size: 0.8rem;
      font-weight: 400;
      line-height: 1.5;
      width: 280px;
      z-index: 100;
      box-shadow: 0 12px 28px -10px rgba(11,18,32,.5);
    }

    .help-tooltip::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border: 6px solid transparent;
      border-top-color: var(--instrument);
    }

    .help-btn:hover .help-tooltip,
    .help-btn:focus .help-tooltip {
      display: block;
    }

    /* Number input */
    .input-wrapper {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .input-wrapper input[type="number"] {
      width: 100%;
      padding: 12px 14px;
      font-family: var(--mono);
      font-size: 1.05rem;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      border: 1.5px solid var(--line-strong);
      border-radius: 10px;
      background: #fff;
      color: var(--slate-900);
      transition: border-color 0.2s, box-shadow 0.2s;
      -moz-appearance: textfield;
      min-height: 48px;
    }

    .input-wrapper input[type="number"]::placeholder {
      font-family: var(--sans);
      font-weight: 400;
      color: var(--slate-400);
    }

    .input-wrapper input[type="number"]::-webkit-inner-spin-button,
    .input-wrapper input[type="number"]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    .input-wrapper input[type="number"]:focus {
      outline: none;
      border-color: var(--cyan);
      box-shadow: 0 0 0 4px var(--cyan-soft);
    }

    .input-wrapper input[type="number"].input-error {
      border-color: var(--red);
      box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
    }

    .input-unit {
      font-size: 0.85rem;
      color: var(--slate-400);
      white-space: nowrap;
      min-width: 48px;
    }

    /* Validation message */
    .validation-msg {
      font-size: 0.8rem;
      color: var(--red);
      margin-top: 4px;
      min-height: 20px;
    }

    .marker-hint {
      font-size: 0.78rem;
      color: var(--slate-400);
      margin-top: 4px;
    }

    /* tiny "où trouver" link below the field */
    .field-help-line {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 0.72rem;
      color: var(--cyan-deep);
      font-weight: 600;
      margin-top: 9px;
      background: none;
      padding: 0;
    }

    .field-help-line svg { width: 13px; height: 13px; }

    /* Sticky bottom nav (clear bar, vivid accent action button) */
    .wizard-nav {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 50;
      display: flex;
      gap: 10px;
      padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
      background: var(--card);
      border-top: 1px solid var(--line);
      box-shadow: 0 -8px 24px -14px rgba(15,23,42,.25);
    }

    /* Précédent : ghost / outline lisible */
    .wizard-nav .btn-prev {
      flex: 0 0 38%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      border-radius: 12px;
      padding: 14px;
      font-family: var(--sans);
      font-weight: 700;
      font-size: 0.9rem;
      background: var(--card-2);
      border: 1px solid var(--line);
      color: var(--slate-600);
    }

    .wizard-nav .btn-prev:hover {
      background: var(--slate-100);
      color: var(--slate-700);
    }

    /* Suivant : fill accent cyan vif, texte + chevron blancs */
    .wizard-nav .btn-next {
      flex: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      border-radius: 12px;
      padding: 14px;
      font-family: var(--sans);
      font-weight: 700;
      font-size: 0.95rem;
      background: linear-gradient(180deg, var(--cyan), var(--cyan-deep));
      border: none;
      color: #fff;
      box-shadow: 0 8px 18px -8px rgba(14,165,233,.6);
    }

    .wizard-nav .btn-next .nav-chevron { color: #fff; font-family: var(--mono); }

    .wizard-nav .btn-next:hover {
      box-shadow: 0 12px 24px -8px rgba(14,165,233,.7);
      transform: translateY(-1px);
    }

    .wizard-nav .btn-next:active { transform: translateY(0); }

    /* on the last bloc, the action button turns emerald */
    .wizard-nav .btn-next.is-final {
      background: linear-gradient(180deg, var(--emerald), #0E9F70);
      box-shadow: 0 8px 18px -8px rgba(16,185,129,.6);
    }

    .wizard-nav .btn-next.is-final .nav-chevron { color: #fff; }

    .wizard-nav [hidden] { display: none !important; }

    /* ========================================
       SCREEN 3 - RESULTS
       ======================================== */
    #screen-results {
      background: transparent;
      padding: 28px 16px 60px;
      position: relative;
      z-index: 1;
    }

    .results-container {
      max-width: 700px;
      margin: 0 auto;
    }

    .results-container > h2 {
      font-size: 1.45rem;
      font-weight: 800;
      letter-spacing: -0.02em;
      color: var(--slate-900);
      margin-bottom: 18px;
    }

    /* Results overview - score "compteur" on a clear card (max legibility) */
    .score-display {
      text-align: left;
      margin-bottom: 24px;
      padding: 18px 20px;
      background: var(--card);
      border-radius: 16px;
      border: 1px solid var(--line);
      box-shadow: var(--sh-sm);
    }

    .score-number {
      font-family: var(--mono);
      font-size: 2rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      line-height: 1.1;
      margin-bottom: 4px;
      color: var(--slate-900);
    }

    .score-number.score-good u,
    .score-number.score-moderate u,
    .score-number.score-poor u { text-decoration: none; }
    .score-number.score-good u { color: var(--emerald); }
    .score-number.score-moderate u { color: var(--amber); }
    .score-number.score-poor u { color: var(--red); }

    .score-label {
      font-family: var(--mono);
      font-size: 0.7rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--slate-500);
      margin-bottom: 10px;
    }

    .score-message {
      font-size: 0.85rem;
      color: var(--slate-700);
      font-weight: 400;
      line-height: 1.5;
    }

    /* Status badges = mono chips */
    .status-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 8px;
      border-radius: 7px;
      font-family: var(--mono);
      font-size: 0.6rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .status-badge.optimal {
      background: var(--emerald-soft);
      color: #047857;
    }

    .status-badge.warning {
      background: var(--amber-soft);
      color: #B45309;
    }

    .status-badge.critical {
      background: var(--red-soft);
      color: #B91C1C;
    }

    .status-badge.missing {
      background: var(--slate-100);
      color: var(--slate-400);
    }

    /* Bloc summary cards */
    .bloc-summary-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
      margin-bottom: 40px;
    }

    .bloc-summary-card {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 16px;
      background: var(--card);
      border-radius: var(--r-sm);
      border: 1px solid var(--line);
      box-shadow: var(--sh-sm);
      transition: box-shadow 0.2s ease;
    }

    .bloc-summary-card:hover {
      box-shadow: var(--sh);
    }

    .bloc-summary-card .bloc-summary-icon {
      font-size: 1.2rem;
      width: 38px;
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 11px;
      background: var(--cyan-soft);
      flex-shrink: 0;
    }

    .bloc-summary-card .bloc-summary-info {
      flex: 1;
    }

    .bloc-summary-card .bloc-summary-name {
      font-size: 0.92rem;
      font-weight: 700;
      color: var(--slate-800);
    }

    /* Marker result cards (.mk look) */
    .marker-result-section {
      margin-bottom: 32px;
    }

    .marker-result-section h3 {
      font-size: 1.1rem;
      font-weight: 800;
      letter-spacing: -0.01em;
      color: var(--slate-900);
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .marker-result-card {
      background: var(--card);
      border-radius: 14px;
      border: 1px solid var(--line);
      padding: 14px 15px 16px;
      margin-bottom: 11px;
      box-shadow: var(--sh-sm);
    }

    .marker-result-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 4px;
    }

    .marker-result-name {
      font-size: 0.92rem;
      font-weight: 700;
      color: var(--slate-900);
      flex: 1;
      min-width: 0;
    }

    .marker-result-header .status-badge { flex: none; }

    .marker-result-value {
      font-family: var(--mono);
      font-size: 1.05rem;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      color: var(--slate-900);
    }

    .marker-result-value .mk-unit {
      font-size: 0.62rem;
      color: var(--slate-500);
      font-weight: 500;
    }

    /* ---- Signature gauge (mockup .gauge) ---- */
    .gauge {
      position: relative;
      height: 40px;
      margin: 14px 2px 6px;
    }

    .gauge__track {
      position: absolute;
      top: 24px; left: 0; right: 0;
      height: 7px;
      border-radius: 99px;
      background: #EEF2F6;
      border: 1px solid var(--line);
      overflow: hidden;
    }

    /* soft multi-zone segments laid inside the track */
    .gauge__zone {
      position: absolute;
      top: 0;
      height: 100%;
    }

    .gauge__zone.zone-red { background: var(--red-soft); }
    .gauge__zone.zone-amber { background: var(--amber-soft); }
    .gauge__zone.zone-green { background: var(--emerald-soft); }

    /* saturated optimal band overlay (most identifiable) */
    .gauge__opt {
      position: absolute;
      top: 24px;
      height: 7px;
      border-radius: 99px;
      background: linear-gradient(90deg, var(--emerald), #34D399);
    }

    .gauge__labo {
      position: absolute;
      top: 20px;
      width: 0;
      border-left: 1.5px dashed var(--line-strong);
      height: 15px;
    }

    .gauge__tick {
      position: absolute;
      top: 16px;
      width: 3px;
      height: 23px;
      border-radius: 2px;
    }

    .gauge__tick.optimal { background: var(--emerald); }
    .gauge__tick.warning { background: var(--amber); }
    .gauge__tick.critical { background: var(--red); }

    .gauge__bub {
      position: absolute;
      top: -4px;
      transform: translateX(-50%);
      font-family: var(--mono);
      font-size: 0.62rem;
      font-weight: 700;
      background: var(--instrument);
      color: #fff;
      padding: 2px 6px;
      border-radius: 6px;
      white-space: nowrap;
    }

    .gauge__bub::after {
      content: "";
      position: absolute;
      left: 50%; top: 100%;
      transform: translateX(-50%);
      border: 4px solid transparent;
      border-top-color: var(--instrument);
    }

    .gauge__ends {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      font-family: var(--mono);
      font-size: 0.56rem;
      color: var(--slate-400);
      margin-top: 2px;
      gap: 8px;
    }

    .gauge__ends .lab {
      color: var(--slate-500);
      text-align: center;
      flex: 1;
    }

    .marker-result-interpretation {
      font-size: 0.8rem;
      color: var(--slate-700);
      line-height: 1.5;
      margin-top: 8px;
    }

    .marker-result-domino {
      font-size: 0.78rem;
      color: var(--slate-500);
      line-height: 1.5;
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px solid var(--line);
      font-style: italic;
    }

    .marker-result-symptoms {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 10px;
    }

    .symptom-tag {
      padding: 3px 10px;
      border-radius: 100px;
      font-size: 0.72rem;
      background: var(--slate-100);
      color: var(--slate-500);
      font-weight: 500;
    }

    /* Ferritine flag (.flag look) */
    .mk-flag {
      display: flex;
      gap: 7px;
      align-items: flex-start;
      background: var(--amber-soft);
      border-radius: 9px;
      padding: 9px 11px;
      font-size: 0.74rem;
      color: #92400E;
      margin-top: 9px;
      line-height: 1.45;
    }

    .mk-flag svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }

    /* Cascade chain */
    .cascade-section {
      margin-bottom: 40px;
    }

    .cascade-section > h3 {
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--slate-800);
      margin-bottom: 16px;
    }

    .cascade-card {
      background: var(--card);
      border-radius: 16px;
      border: 1px solid var(--line);
      padding: 18px;
      margin-bottom: 14px;
      box-shadow: var(--sh-sm);
      transition: box-shadow 0.2s ease;
    }

    .cascade-card:hover {
      box-shadow: var(--sh);
    }

    .cascade-card.active {
      border-color: var(--red);
      border-width: 2px;
    }

    .cascade-card.inactive {
      opacity: 0.5;
    }

    .cascade-card h4 {
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--slate-800);
      margin-bottom: 4px;
    }

    .cascade-profile {
      font-size: 0.85rem;
      color: var(--slate-400);
      margin-bottom: 16px;
    }

    .cascade-chain {
      display: flex;
      align-items: center;
      gap: 0;
      overflow-x: auto;
      padding-bottom: 8px;
      margin-bottom: 16px;
    }

    .cascade-chain-step {
      flex-shrink: 0;
      padding: 8px 14px;
      background: var(--slate-100);
      border-radius: var(--radius-sm);
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--slate-600);
      text-align: center;
      white-space: nowrap;
    }

    .cascade-card.active .cascade-chain-step {
      background: rgba(239, 68, 68, 0.08);
      color: var(--red);
    }

    .cascade-chain-arrow {
      flex-shrink: 0;
      font-size: 0.9rem;
      color: var(--slate-300);
      padding: 0 4px;
    }

    .cascade-card.active .cascade-chain-arrow {
      color: var(--red);
    }

    .cascade-explanation {
      font-size: 0.88rem;
      color: var(--slate-600);
      line-height: 1.6;
    }

    .cascade-status-label {
      font-size: 0.8rem;
      font-weight: 600;
      margin-bottom: 12px;
    }

    .cascade-status-label.detected {
      color: var(--red);
    }

    .cascade-status-label.not-detected {
      color: var(--green);
    }

    .cascade-status-label.incomplete {
      color: var(--slate-400);
    }

    /* Cascade week reference */
    .cascade-week-ref {
      margin-top: 12px;
      font-size: 0.82rem;
      font-weight: 500;
      color: var(--blue);
      font-style: italic;
    }

    /* Recommendations */
    .recommendations-section {
      margin-bottom: 40px;
    }

    .recommendations-section > h3 {
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--slate-800);
      margin-bottom: 16px;
    }

    .recommendation-card {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      background: var(--card);
      border-radius: 14px;
      border: 1px solid var(--line);
      padding: 16px;
      margin-bottom: 11px;
      box-shadow: var(--sh-sm);
      transition: box-shadow 0.2s ease;
    }

    .recommendation-card:hover {
      box-shadow: var(--sh);
    }

    .recommendation-number {
      width: 30px;
      height: 30px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: var(--cyan);
      color: #fff;
      font-family: var(--mono);
      font-size: 0.82rem;
      font-weight: 700;
    }

    .recommendation-content {
      flex: 1;
    }

    .recommendation-content .reco-label {
      font-size: 0.92rem;
      font-weight: 700;
      color: var(--slate-900);
      margin-bottom: 4px;
    }

    .recommendation-content .reco-circle {
      font-size: 0.8rem;
      color: var(--cyan-deep);
      font-weight: 500;
      line-height: 1.5;
    }

    /* Continue modules section */
    .continue-modules {
      background: var(--cyan-soft);
      border: 1px solid rgba(14, 165, 233, 0.2);
      border-radius: var(--r);
      padding: 18px;
      margin-top: 20px;
      margin-bottom: 20px;
    }

    .continue-modules h4 {
      font-size: 1rem;
      font-weight: 800;
      color: var(--slate-900);
      margin-bottom: 8px;
    }

    .continue-modules > p {
      font-size: 0.88rem;
      color: var(--slate-600);
      line-height: 1.6;
      margin-bottom: 16px;
    }

    .continue-modules .module-list {
      list-style: none;
      padding: 0;
    }

    .continue-modules .module-list li {
      font-size: 0.85rem;
      color: var(--slate-700);
      padding: 8px 0;
      border-bottom: 1px solid rgba(14, 165, 233, 0.08);
      display: flex;
      align-items: flex-start;
      gap: 8px;
    }

    .continue-modules .module-list li:last-child {
      border-bottom: none;
    }

    .continue-modules .module-list .week-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--blue);
      color: #fff;
      font-size: 0.7rem;
      font-weight: 700;
      flex-shrink: 0;
    }

    /* ========================================
       UPSELL (violet) - produits BCH
       ======================================== */
    .upsell {
      background: linear-gradient(165deg, #F5F3FF, #fff);
      border: 1px solid var(--violet-soft);
      border-radius: 16px;
      padding: 18px;
      margin: 20px 0;
    }

    .upsell .upsell-kicker {
      font-family: var(--mono);
      font-size: 0.62rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--violet-deep);
      font-weight: 600;
    }

    .upsell h4 {
      font-size: 1.05rem;
      font-weight: 800;
      color: var(--slate-900);
      margin: 5px 0 5px;
    }

    .upsell > p {
      font-size: 0.82rem;
      color: var(--slate-700);
      line-height: 1.5;
      margin-bottom: 14px;
    }

    /* product buttons */
    .prod {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      width: 100%;
      border: none;
      border-radius: 12px;
      padding: 14px;
      font-family: var(--sans);
      font-weight: 700;
      font-size: 0.85rem;
      margin-bottom: 9px;
      text-align: left;
      text-decoration: none;
      cursor: pointer;
      transition: transform 0.12s ease, box-shadow 0.2s ease;
    }

    .prod:hover { transform: translateY(-1px); }

    .prod--main {
      background: linear-gradient(180deg, var(--violet), var(--violet-deep));
      color: #fff;
      box-shadow: 0 10px 22px -10px rgba(109,40,217,.6);
    }

    .prod--alt {
      background: #fff;
      border: 1px solid var(--violet-soft);
      color: var(--violet-deep);
    }

    .prod small {
      display: block;
      font-weight: 500;
      font-size: 0.66rem;
      opacity: 0.88;
      margin-top: 2px;
    }

    .prod .px {
      font-family: var(--mono);
      font-size: 0.92rem;
      flex: none;
      white-space: nowrap;
    }

    .prod--circle {
      background: var(--violet-soft);
      color: var(--violet-deep);
      cursor: default;
    }

    .prod--circle:hover { transform: none; }

    .upsell-note {
      font-size: 0.7rem;
      color: var(--slate-400);
      text-align: center;
      margin-top: 6px;
      line-height: 1.45;
    }

    /* ========================================
       COUCHE PAYANTE : email capture, mur, dossier
       ======================================== */

    /* Capture email (récap, uniquement l'adresse) */
    .email-capture {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--r);
      padding: 16px;
      margin: 8px 0 20px;
      box-shadow: var(--sh-sm);
    }

    .email-capture__head {
      display: flex;
      align-items: flex-start;
      gap: 11px;
      margin-bottom: 12px;
    }

    .email-capture__head svg {
      width: 22px; height: 22px;
      flex: none;
      color: var(--cyan-deep);
      margin-top: 2px;
    }

    .email-capture__head b {
      display: block;
      font-size: 0.95rem;
      font-weight: 800;
      color: var(--slate-900);
    }

    .email-capture__head span {
      display: block;
      font-size: 0.78rem;
      color: var(--slate-600);
      line-height: 1.5;
      margin-top: 2px;
    }

    /* Champ email natif (DA outil) */
    .email-capture__form {
      display: flex;
      gap: 8px;
      align-items: stretch;
    }

    .email-capture__input {
      flex: 1;
      min-width: 0;
      padding: 12px 14px;
      font-family: var(--sans);
      font-size: 0.95rem;
      color: var(--slate-900);
      background: var(--card-2);
      border: 1.5px solid var(--line-strong);
      border-radius: 10px;
      transition: border-color 0.2s, box-shadow 0.2s;
      min-height: 48px;
    }

    .email-capture__input::placeholder { color: var(--slate-400); }

    .email-capture__input:focus {
      outline: none;
      border-color: var(--cyan);
      box-shadow: 0 0 0 4px var(--cyan-soft);
      background: var(--card);
    }

    .email-capture__btn {
      flex: none;
      border: none;
      border-radius: 10px;
      padding: 0 18px;
      font-family: var(--sans);
      font-weight: 700;
      font-size: 0.9rem;
      color: #fff;
      background: linear-gradient(180deg, var(--cyan), var(--cyan-deep));
      cursor: pointer;
      box-shadow: 0 8px 18px -8px rgba(14,165,233,.6);
      transition: opacity 0.2s, transform 0.12s;
    }

    .email-capture__btn:hover { transform: translateY(-1px); }
    .email-capture__btn:active { transform: translateY(0); }
    .email-capture__btn:disabled { opacity: 0.55; cursor: default; transform: none; box-shadow: none; }

    .email-capture__msg {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.85rem;
      font-weight: 600;
      line-height: 1.4;
    }

    .email-capture__msg.is-ok { color: #047857; }
    .email-capture__msg.is-error { color: var(--slate-600); font-weight: 500; }
    .email-capture__msg svg { width: 17px; height: 17px; flex: none; }

    @media (max-width: 380px) {
      .email-capture__form { flex-direction: column; }
      .email-capture__btn { padding: 13px; }
    }

    /* Mur (lockzone) */
    .lockzone { position: relative; margin-top: 8px; }

    .lockzone__content--blurred {
      filter: blur(6px);
      opacity: 0.55;
      pointer-events: none;
      -webkit-user-select: none;
      user-select: none;
      max-height: 360px;
      overflow: hidden;
    }

    .lockcard {
      position: absolute;
      left: 0; right: 0; bottom: 0;
      background: linear-gradient(180deg, rgba(238,242,246,0) 0%, var(--instrument) 42%);
      border-radius: 18px;
      padding: 96px 14px 18px;
    }

    .lockcard__inner {
      background: var(--instrument);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 16px;
      padding: 20px;
      color: #fff;
      box-shadow: 0 20px 40px -16px rgba(11,18,32,.6);
    }

    .lockcard__inner h3 {
      font-size: 1.05rem;
      font-weight: 800;
      display: flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 6px;
    }

    .lockcard__inner h3 svg { width: 18px; height: 18px; color: var(--cyan); flex: none; }

    .lockcard__lead {
      font-size: 0.8rem;
      color: var(--slate-400);
      line-height: 1.5;
      margin-bottom: 14px;
    }

    .lockcard__incl {
      display: flex;
      flex-direction: column;
      gap: 9px;
      margin-bottom: 18px;
    }

    .lockcard__incl div {
      display: flex;
      gap: 9px;
      align-items: flex-start;
      font-size: 0.8rem;
      color: var(--slate-300);
      line-height: 1.45;
    }

    .lockcard__incl svg { width: 15px; height: 15px; color: var(--cyan); flex: none; margin-top: 1px; }

    .unlock {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      border: none;
      border-radius: 13px;
      padding: 15px;
      background: linear-gradient(180deg, var(--cyan), var(--cyan-deep));
      color: #fff;
      font-family: var(--sans);
      font-weight: 700;
      font-size: 0.95rem;
      cursor: pointer;
      box-shadow: 0 10px 22px -8px rgba(14,165,233,.7);
      transition: transform 0.12s ease, box-shadow 0.2s ease;
    }

    .unlock:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -8px rgba(14,165,233,.8); }
    .unlock:active { transform: translateY(0); }
    .unlock .price { font-family: var(--mono); font-size: 1.05rem; }

    .unlock-note {
      font-size: 0.68rem;
      line-height: 1.45;
      color: var(--slate-400);
      margin: 0 0 12px;
    }

    .securenote {
      text-align: center;
      font-size: 0.66rem;
      color: var(--slate-500);
      margin-top: 10px;
      font-family: var(--mono);
    }

    /* Étape précontractuelle (info conso + renonciation) avant Stripe */
    .precontract-overlay {
      position: fixed;
      inset: 0;
      z-index: 200;
      background: rgba(11,18,32,.62);
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding: 0;
    }

    .precontract-modal {
      position: relative;
      width: 100%;
      max-width: 520px;
      max-height: 92vh;
      overflow-y: auto;
      background: var(--card);
      border-radius: 18px 18px 0 0;
      padding: 22px 18px calc(20px + env(safe-area-inset-bottom, 0px));
      box-shadow: 0 -20px 50px -16px rgba(11,18,32,.5);
    }

    .precontract-close {
      position: absolute;
      top: 12px; right: 14px;
      width: 30px; height: 30px;
      border-radius: 50%;
      background: var(--card-2);
      border: 1px solid var(--line);
      color: var(--slate-500);
      font-size: 1.1rem;
      line-height: 1;
      cursor: pointer;
    }

    .precontract-modal h3 {
      font-size: 1.1rem;
      font-weight: 800;
      letter-spacing: -0.01em;
      color: var(--slate-900);
      margin: 0 36px 14px 0;
    }

    .precontract-specs {
      margin: 0 0 14px;
      border: 1px solid var(--line);
      border-radius: 12px;
      overflow: hidden;
    }

    .precontract-specs dt {
      font-family: var(--mono);
      font-size: 0.58rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--slate-500);
      font-weight: 700;
      padding: 10px 12px 2px;
    }

    .precontract-specs dd {
      margin: 0;
      padding: 0 12px 10px;
      font-size: 0.8rem;
      color: var(--slate-700);
      line-height: 1.45;
      border-bottom: 1px solid var(--line);
    }

    .precontract-specs dd:last-child { border-bottom: none; }
    .precontract-specs dd b { color: var(--slate-900); }

    .precontract-purpose {
      font-size: 0.72rem;
      color: var(--slate-500);
      line-height: 1.5;
      margin-bottom: 12px;
    }

    .precontract-legal {
      font-size: 0.74rem;
      color: var(--slate-600);
      line-height: 1.5;
      background: var(--amber-soft);
      border-radius: 10px;
      padding: 11px 13px;
      margin-bottom: 14px;
    }

    .precontract-check {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      font-size: 0.78rem;
      color: var(--slate-800);
      line-height: 1.45;
      margin-bottom: 16px;
      cursor: pointer;
    }

    .precontract-check input {
      width: 20px; height: 20px;
      flex: none;
      margin-top: 1px;
      accent-color: var(--cyan-deep);
      cursor: pointer;
    }

    .precontract-pay {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      border: none;
      border-radius: 13px;
      padding: 15px;
      background: linear-gradient(180deg, var(--cyan), var(--cyan-deep));
      color: #fff;
      font-family: var(--sans);
      font-weight: 700;
      font-size: 0.95rem;
      cursor: pointer;
      box-shadow: 0 10px 22px -8px rgba(14,165,233,.7);
      transition: opacity 0.2s ease;
    }

    .precontract-pay .price { font-family: var(--mono); font-size: 1.05rem; }

    .precontract-pay:disabled {
      opacity: 0.45;
      cursor: not-allowed;
      box-shadow: none;
    }

    .precontract-links {
      font-size: 0.7rem;
      color: var(--slate-500);
      text-align: center;
      margin-top: 12px;
      line-height: 1.5;
    }

    .precontract-links a { color: var(--cyan-deep); }

    @media (min-width: 560px) {
      .precontract-overlay { align-items: center; }
      .precontract-modal { border-radius: 18px; }
    }

    /* Dossier débloqué : badge + titre */
    .unlocked-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--mono);
      font-size: 0.6rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #047857;
      font-weight: 700;
      background: var(--emerald-soft);
      padding: 5px 10px;
      border-radius: 99px;
      margin-bottom: 12px;
    }

    .unlocked-badge svg { width: 13px; height: 13px; }

    .dossier-title {
      font-size: 1.25rem;
      font-weight: 800;
      letter-spacing: -0.02em;
      color: var(--slate-900);
      margin-bottom: 6px;
    }

    .dossier-intro {
      font-size: 0.85rem;
      color: var(--slate-600);
      line-height: 1.55;
      margin-bottom: 18px;
    }

    /* Fiche (contenu payant) */
    .fiche {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: var(--sh-sm);
      margin-bottom: 14px;
    }

    .fiche__hd {
      padding: 15px 16px;
      border-bottom: 1px solid var(--line);
      background: linear-gradient(180deg, #fff, var(--card-2));
    }

    .fiche__hd .kicker {
      font-family: var(--mono);
      font-size: 0.62rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--rust);
      font-weight: 600;
    }

    .fiche__hd h3 {
      font-size: 1.05rem;
      font-weight: 800;
      letter-spacing: -0.015em;
      color: var(--slate-900);
      margin-top: 3px;
    }

    .fiche__hd .fiche__val {
      font-family: var(--mono);
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--slate-700);
      margin-top: 4px;
    }

    .fiche__hd .fiche__val .mk-unit { font-size: 0.62rem; color: var(--slate-500); font-weight: 500; }

    .redflag {
      display: flex;
      gap: 9px;
      align-items: flex-start;
      background: var(--red-soft);
      border-left: 3px solid var(--red);
      padding: 11px 13px;
      margin: 14px 16px;
      border-radius: 0 9px 9px 0;
      font-size: 0.76rem;
      color: #991B1B;
      line-height: 1.45;
    }

    .redflag svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }

    .fiche__body { padding: 2px 16px 16px; }

    .fiche__body h4 {
      font-family: var(--mono);
      font-size: 0.62rem;
      letter-spacing: 0.13em;
      text-transform: uppercase;
      color: var(--slate-500);
      font-weight: 700;
      margin: 16px 0 7px;
    }

    .fiche__body p {
      font-size: 0.82rem;
      color: var(--slate-700);
      line-height: 1.55;
    }

    .evi {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-family: var(--mono);
      font-size: 0.6rem;
      font-weight: 700;
      color: #047857;
      background: var(--emerald-soft);
      padding: 3px 8px;
      border-radius: 6px;
      margin-top: 8px;
    }

    .levels { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }

    .lvl {
      display: flex;
      gap: 10px;
      font-size: 0.8rem;
      color: var(--slate-700);
      background: var(--card-2);
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 9px 11px;
      line-height: 1.5;
    }

    .lvl b {
      font-family: var(--mono);
      font-size: 0.66rem;
      color: var(--cyan-deep);
      flex: none;
      font-weight: 700;
      padding-top: 2px;
    }

    /* Re-test (réutilisé dans les fiches) */
    .retest {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      font-size: 0.76rem;
      color: var(--slate-700);
      background: var(--cyan-soft);
      border-radius: 10px;
      padding: 9px 12px;
      margin-top: 14px;
      line-height: 1.45;
    }

    .retest svg { width: 15px; height: 15px; color: var(--cyan-deep); flex: none; margin-top: 1px; }
    .retest b { font-family: var(--mono); color: var(--cyan-deep); }

    /* Sources scientifiques (sobre, en bas de fiche) */
    .sources {
      margin-top: 16px;
      padding-top: 12px;
      border-top: 1px solid var(--line);
    }

    .sources__title {
      font-family: var(--mono);
      font-size: 0.6rem !important;
      letter-spacing: 0.13em;
      text-transform: uppercase;
      color: var(--slate-500) !important;
      font-weight: 700;
      margin: 0 0 8px !important;
    }

    .sources__list {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .sources__list li {
      position: relative;
      font-size: 0.68rem;
      line-height: 1.5;
      color: var(--slate-500);
      padding: 3px 0 3px 12px;
    }

    .sources__list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.62em;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--line-strong);
    }

    .pmid-link {
      font-family: var(--mono);
      font-size: 0.64rem;
      color: var(--cyan-deep);
      text-decoration: none;
      font-weight: 600;
      white-space: nowrap;
    }

    .pmid-link:hover { text-decoration: underline; }

    /* Checklist médecin */
    .checklist {
      background: var(--card-2);
      border: 1px dashed var(--line-strong);
      border-radius: 14px;
      padding: 15px;
      margin-bottom: 14px;
    }

    .checklist h4 {
      font-size: 0.92rem;
      font-weight: 800;
      color: var(--slate-900);
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 11px;
    }

    .checklist h4 svg { width: 16px; height: 16px; color: var(--cyan-deep); flex: none; }

    .check {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      padding: 8px 0;
      border-bottom: 1px solid var(--line);
      font-size: 0.8rem;
      color: var(--slate-800);
      line-height: 1.5;
    }

    .check:last-child { border-bottom: none; }

    .check .box {
      width: 18px; height: 18px;
      border: 1.5px solid var(--line-strong);
      border-radius: 5px;
      flex: none;
      margin-top: 1px;
    }

    /* Note marqueur hors zone sans fiche dédiée (auto-immuns) */
    .orphan-note {
      display: flex;
      gap: 9px;
      align-items: flex-start;
      background: var(--amber-soft);
      border-left: 3px solid var(--amber);
      border-radius: 0 9px 9px 0;
      padding: 12px 14px;
      margin-bottom: 14px;
      font-size: 0.8rem;
      color: #92400E;
      line-height: 1.5;
    }

    .orphan-note svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }

    /* Results actions */
    .results-actions {
      display: flex;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 32px;
    }

    /* Bandeau de confirmation après paiement */
    .pay-success {
      position: relative;
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      background: linear-gradient(180deg, #ECFDF5 0%, #D1FAE5 100%);
      border: 1px solid #A7F3D0;
      border-radius: 14px;
      padding: 16px 18px;
      margin: 0 0 22px;
      box-shadow: var(--sh-sm);
      animation: co-pop .26s ease;
    }
    .pay-success__ic {
      flex: none;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: var(--emerald);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .pay-success__ic svg { width: 20px; height: 20px; }
    .pay-success__txt { flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px; }
    .pay-success__txt b { color: #065F46; font-size: 0.98rem; line-height: 1.3; }
    .pay-success__txt span { color: #047857; font-size: 0.88rem; line-height: 1.4; }
    .pay-success__dl {
      flex: none;
      background: var(--emerald);
      color: #fff;
      border: none;
      border-radius: 10px;
      padding: 11px 16px;
      font-weight: 700;
      font-size: 0.9rem;
      cursor: pointer;
      font-family: var(--sans);
      transition: background .15s ease, transform .15s ease;
    }
    .pay-success__dl:hover { background: #059669; transform: translateY(-1px); }
    .pay-success__close {
      position: absolute;
      top: 8px;
      right: 10px;
      background: none;
      border: none;
      font-size: 1.15rem;
      line-height: 1;
      color: #047857;
      cursor: pointer;
      opacity: 0.6;
    }
    .pay-success__close:hover { opacity: 1; }
    .pay-success__next {
      flex-basis: 100%;
      border-top: 1px solid #A7F3D0;
      margin-top: 4px;
      padding-top: 12px;
      font-size: 0.86rem;
      line-height: 1.45;
      color: #047857;
    }
    .pay-success__next b { color: #065F46; }
    .pay-success__link {
      background: none;
      border: none;
      padding: 0;
      font: inherit;
      color: var(--cyan-deep);
      font-weight: 700;
      text-decoration: underline;
      cursor: pointer;
    }
    .email-capture--pulse {
      animation: emailPulse 1.4s ease;
    }
    @keyframes emailPulse {
      0% { box-shadow: 0 0 0 0 rgba(14,165,233,0.55); }
      100% { box-shadow: 0 0 0 8px rgba(14,165,233,0); }
    }
    @media (max-width: 480px) {
      .pay-success__dl { width: 100%; }
    }

    /* Bandeau "vérification en cours" */
    .pay-verifying {
      display: flex;
      align-items: center;
      gap: 12px;
      background: var(--card-2);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 14px 18px;
      margin: 0 0 22px;
      color: var(--slate-600);
      font-size: 0.92rem;
    }
    .pay-verifying .checkout-spinner { width: 22px; height: 22px; border-width: 3px; flex: none; }

    /* Bandeau "paiement non confirmé" */
    .pay-trouble {
      position: relative;
      display: flex;
      align-items: flex-start;
      gap: 12px;
      background: linear-gradient(180deg, #FFFBEB 0%, #FEF3C7 100%);
      border: 1px solid #FDE68A;
      border-radius: 14px;
      padding: 16px 18px;
      margin: 0 0 22px;
      box-shadow: var(--sh-sm);
    }
    .pay-trouble__ic {
      flex: none;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: var(--amber);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .pay-trouble__ic svg { width: 18px; height: 18px; }
    .pay-trouble__txt { display: flex; flex-direction: column; gap: 2px; }
    .pay-trouble__txt b { color: #92400E; font-size: 0.96rem; line-height: 1.3; }
    .pay-trouble__txt span { color: #B45309; font-size: 0.88rem; line-height: 1.45; }

    /* Signal de crédibilité dans la carte de paywall */
    .lockcard-proof {
      font-size: 0.78rem;
      line-height: 1.5;
      color: var(--slate-600);
      background: var(--cyan-soft);
      border-radius: 10px;
      padding: 10px 12px;
      margin: 4px 0 14px;
      text-align: left;
    }
    .lockcard-proof b { color: var(--cyan-deep); }
    .lockcard-proof:empty { display: none; }

    /* Label de cadrage au-dessus des pastilles de symptômes */
    .symptoms-label {
      flex-basis: 100%;
      font-size: 0.72rem;
      color: var(--slate-500);
      font-style: italic;
      line-height: 1.4;
      margin-bottom: 2px;
    }

    /* Rappel calendrier dans le dossier */
    .retest-cal {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
      margin: 18px 0;
    }
    .retest-cal__btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--card-2);
      border: 1px solid var(--line-strong);
      border-radius: 10px;
      padding: 10px 14px;
      font-family: var(--sans);
      font-weight: 600;
      font-size: 0.9rem;
      color: var(--cyan-deep);
      cursor: pointer;
      transition: background .15s ease, border-color .15s ease;
    }
    .retest-cal__btn svg { width: 17px; height: 17px; flex: none; }
    .retest-cal__btn:hover { background: var(--cyan-soft); border-color: var(--cyan); }
    .retest-cal > span { font-size: 0.76rem; color: var(--slate-500); line-height: 1.4; }

    /* Bulle de jauge clampée aux extrêmes : on masque la flèche (le tick marque la position) */
    .gauge__bub--edge::after { display: none; }

    /* Note d'optionalité en haut de chaque bloc de saisie */
    .bloc-optional {
      font-size: 0.85rem;
      color: var(--slate-600);
      line-height: 1.45;
      margin: 0 0 14px;
    }

    /* Domino (cascade) dans le dossier payant */
    .fiche-domino {
      font-size: 0.92rem;
      color: var(--slate-600);
      font-style: italic;
      line-height: 1.5;
      margin: 4px 0 0;
    }
    #print-summary .fiche-domino { font-size: 9pt; font-style: italic; color: var(--slate-600); }

    /* Message inline "saisissez au moins un marqueur" (remplace alert natif) */
    .wizard-empty-warn {
      background: var(--cyan-soft);
      color: var(--cyan-deep);
      border-radius: 10px;
      padding: 12px 14px;
      font-size: 0.9rem;
      font-weight: 600;
      margin-bottom: 14px;
      text-align: center;
    }

    /* Couvertures des 3 livres dans la carte Pack Santé de l'escalier de valeur */
    .trilogie-covers {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin: 4px 0 12px;
    }
    .trilogie-covers img {
      width: 31%;
      max-width: 112px;
      height: auto;
      border-radius: 6px;
      box-shadow: 0 10px 22px -8px rgba(11,18,32,.45);
    }

    /* Print CTA URL - hidden on screen, shown in print */
    .print-cta-url {
      display: none;
      text-align: center;
      font-size: 0.85rem;
      color: var(--slate-500);
      margin-top: 16px;
    }

    /* ========================================
       RESPONSIVE
       ======================================== */
    @media (max-width: 480px) {
      .welcome-inner h1 {
        font-size: 1.6rem;
      }

      .welcome-inner .subtitle {
        font-size: 1.06rem;
      }

      .bloc-card {
        padding: 18px 16px;
      }

      .score-number {
        font-size: 1.85rem;
      }

      /* Marker result cards */
      .marker-result-header {
        flex-wrap: nowrap;
        gap: 8px;
      }

      /* Cascade chains vertical on mobile */
      .cascade-chain {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        overflow-x: visible;
      }

      .cascade-chain-step {
        padding: 6px 10px;
        font-size: 0.72rem;
      }

      .cascade-chain-arrow {
        transform: rotate(90deg);
        margin: 0;
        padding: 0 2px;
      }

      /* Results actions - full width */
      .results-actions {
        flex-direction: column;
        align-items: stretch;
      }

      .results-actions button,
      .results-actions a {
        width: 100%;
      }

      /* Help tooltip positioning - prevent overflow */
      .help-tooltip {
        max-width: 85vw;
        width: 220px;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
      }

      .help-tooltip::after {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
      }

      /* Welcome logo */
      .welcome-logo {
        width: 48px;
        height: 48px;
      }
    }

    /* ========================================
       PRINT CSS - 1 page summary table only
       ======================================== */
    @media print {
      body {
        background: #fff !important;
        font-size: 10pt;
      }

      /* Hide EVERYTHING except the print summary */
      .honeycomb-bg,
      .floating-molecules,
      #screen-welcome,
      #screen-wizard,
      #screen-results {
        display: none !important;
      }

      /* Show the print summary */
      #print-summary {
        display: block !important;
        padding: 0;
        background: #fff !important;
      }

      #print-summary .status-dot {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
      }

      #print-summary thead th {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
      }

      #print-summary .bloc-row td {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
      }

      #print-summary tbody tr:nth-child(even) {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
      }

      @page {
        size: A4;
        margin: 12mm 15mm;
      }
    }

    /* ========================================
       PRINT SUMMARY TABLE (hidden on screen)
       ======================================== */
    #print-summary {
      display: none;
    }

    #print-summary .print-header {
      text-align: center;
      margin-bottom: 20px;
    }

    #print-summary .print-header h1 {
      font-size: 18pt;
      color: var(--slate-900);
      margin-bottom: 4px;
    }

    #print-summary .print-header p {
      font-size: 10pt;
      color: var(--slate-500);
    }

    #print-summary .print-score {
      text-align: center;
      font-size: 14pt;
      font-weight: 700;
      margin: 16px 0 8px;
    }

    #print-summary .print-score-msg {
      text-align: center;
      font-size: 10pt;
      color: var(--slate-600);
      margin-bottom: 20px;
    }

    #print-summary table {
      width: 100%;
      border-collapse: collapse;
      font-size: 9pt;
    }

    #print-summary thead th {
      background: var(--slate-800);
      color: #fff;
      padding: 8px 10px;
      text-align: left;
      font-weight: 600;
      font-size: 8pt;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    #print-summary thead th:last-child {
      text-align: center;
    }

    #print-summary tbody td {
      padding: 7px 10px;
      border-bottom: 1px solid var(--slate-200);
      vertical-align: middle;
    }

    #print-summary tbody tr:nth-child(even) {
      background: var(--slate-50);
    }

    #print-summary .bloc-row td {
      background: var(--slate-100);
      font-weight: 700;
      font-size: 9pt;
      color: var(--slate-700);
      padding: 6px 10px;
      border-bottom: 2px solid var(--slate-300);
    }

    #print-summary .status-dot {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin-right: 4px;
      vertical-align: middle;
      print-color-adjust: exact;
      -webkit-print-color-adjust: exact;
    }

    #print-summary .status-dot.optimal { background: #10B981; }
    #print-summary .status-dot.warning { background: #F59E0B; }
    #print-summary .status-dot.critical { background: #EF4444; }
    #print-summary .status-dot.missing { background: #CBD5E1; }

    #print-summary .status-text {
      font-size: 8pt;
      font-weight: 600;
    }

    #print-summary .val-col { font-weight: 600; }
    #print-summary .empty-val { color: var(--slate-400); font-style: italic; }
    #print-summary .status-col { text-align: center; }

    #print-summary .print-cascades {
      margin-top: 16px;
      font-size: 9pt;
    }

    #print-summary .print-cascades h3 {
      font-size: 10pt;
      margin-bottom: 6px;
    }

    #print-summary .print-cascades p {
      margin-bottom: 4px;
    }

    #print-summary .print-footer {
      margin-top: 20px;
      padding-top: 12px;
      border-top: 1px solid var(--slate-200);
      font-size: 7.5pt;
      color: var(--slate-400);
      text-align: center;
    }

    #print-summary .print-next-col {
      font-size: 8pt;
      color: var(--slate-500);
    }

    /* Dossier complet dans le PDF (payeurs uniquement) */
    #print-summary .print-dossier {
      margin-top: 22px;
      padding-top: 16px;
      border-top: 2px solid var(--slate-300);
    }
    #print-summary .print-dossier > h2 {
      font-size: 14pt;
      color: var(--slate-900);
      margin-bottom: 4px;
    }
    #print-summary .pd-intro {
      font-size: 9pt;
      color: var(--slate-600);
      margin-bottom: 14px;
    }
    #print-summary .pf {
      margin-bottom: 14px;
      padding: 11px 13px;
      border: 1px solid var(--slate-300);
      border-radius: 6px;
      page-break-inside: avoid;
      break-inside: avoid;
    }
    #print-summary .pf-hd {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 10px;
      border-bottom: 1px solid var(--slate-200);
      padding-bottom: 6px;
      margin-bottom: 6px;
    }
    #print-summary .pf-kicker {
      display: block;
      font-size: 7pt;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--cyan-deep);
      margin-bottom: 2px;
    }
    #print-summary .pf-hd h3 { font-size: 11pt; color: var(--slate-900); margin: 0; }
    #print-summary .pf-val { font-size: 10pt; font-weight: 700; color: var(--slate-700); white-space: nowrap; }
    #print-summary .pf h4 { font-size: 9pt; color: var(--slate-800); margin: 8px 0 3px; }
    #print-summary .pf p { font-size: 9pt; line-height: 1.5; color: var(--slate-700); margin: 0; }
    #print-summary .pf-redflag {
      font-size: 8.5pt;
      color: #7C2D12;
      background: #FEF3C7;
      border-left: 3px solid #F59E0B;
      padding: 6px 8px;
      margin: 6px 0;
      line-height: 1.45;
      print-color-adjust: exact;
      -webkit-print-color-adjust: exact;
    }
    #print-summary .pf-plan { margin: 4px 0 2px; }
    #print-summary .pf-plan .pl { display: flex; gap: 8px; margin-bottom: 5px; font-size: 9pt; line-height: 1.45; }
    #print-summary .pf-plan .pl b { color: var(--cyan-deep); flex: none; }
    #print-summary .pf-evi {
      display: inline-block;
      font-size: 7.5pt;
      font-weight: 600;
      color: var(--slate-600);
      background: var(--slate-100);
      border-radius: 4px;
      padding: 2px 7px;
      margin-top: 4px;
      print-color-adjust: exact;
      -webkit-print-color-adjust: exact;
    }
    #print-summary .pf-retest { font-size: 8.5pt; color: var(--slate-600); margin-top: 6px; }
    #print-summary .pf-retest b { color: var(--slate-800); }
    #print-summary .pf-sources { margin-top: 8px; }
    #print-summary .pf-sources h4 { font-size: 8pt; margin-bottom: 3px; }
    #print-summary .pf-sources ul { margin: 0; padding-left: 15px; }
    #print-summary .pf-sources li { font-size: 7.5pt; color: var(--slate-500); line-height: 1.4; margin-bottom: 2px; }
    #print-summary .pf-sources a { color: var(--slate-500); text-decoration: none; }
    #print-summary .print-checklist { margin-top: 16px; page-break-inside: avoid; }
    #print-summary .print-checklist h3 { font-size: 11pt; margin-bottom: 6px; color: var(--slate-900); }
    #print-summary .print-checklist .ci {
      font-size: 9pt;
      line-height: 1.45;
      margin-bottom: 5px;
      padding-left: 18px;
      position: relative;
    }
    #print-summary .print-checklist .ci::before {
      content: '\2610';
      position: absolute;
      left: 0;
      top: -1px;
      font-size: 11pt;
    }
    #print-summary .pd-cascade-full { margin-top: 16px; }
    #print-summary .pd-cascade-full h3 { font-size: 11pt; margin-bottom: 6px; color: var(--slate-900); }
    #print-summary .pd-cascade-full .cf { margin-bottom: 8px; page-break-inside: avoid; }
    #print-summary .pd-cascade-full .cf b { color: var(--slate-800); font-size: 9.5pt; }
    #print-summary .pd-cascade-full .cf p { font-size: 8.5pt; color: var(--slate-600); margin-top: 2px; line-height: 1.45; }

    /* ========================================
       HIDDEN UTILITY
       ======================================== */
    [hidden] {
      display: none !important;
    }

    /* ===== Modale de paiement Stripe (injectée par checkout.js) ===== */
    .checkout-overlay {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 16px;
      background: rgba(11, 18, 32, 0.55);
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
    }
    .checkout-overlay.open { display: flex; }

    .checkout-modal {
      width: 100%;
      max-width: 480px;
      max-height: 92vh;
      display: flex;
      flex-direction: column;
      background: var(--card);
      border-radius: var(--r);
      box-shadow: var(--sh-lg);
      overflow: hidden;
      animation: co-pop .22s ease;
    }
    @keyframes co-pop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

    .checkout-modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 16px 18px;
      border-bottom: 1px solid var(--line);
    }
    .checkout-modal-title {
      font-weight: 700;
      font-size: 0.98rem;
      color: var(--slate-900);
      line-height: 1.3;
    }
    .checkout-modal-close {
      flex-shrink: 0;
      width: 34px;
      height: 34px;
      border: none;
      border-radius: 9px;
      background: var(--card-2);
      color: var(--slate-500);
      font-size: 1.2rem;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .15s ease, color .15s ease;
    }
    .checkout-modal-close:hover { background: var(--slate-200); color: var(--slate-800); }

    .checkout-modal-body {
      padding: 18px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    .checkout-loading {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      padding: 28px 12px;
      text-align: center;
      color: var(--slate-500);
      font-size: 0.92rem;
    }
    .checkout-spinner {
      width: 34px;
      height: 34px;
      border: 3px solid var(--line);
      border-top-color: var(--cyan);
      border-radius: 50%;
      animation: co-spin .8s linear infinite;
    }
    @keyframes co-spin { to { transform: rotate(360deg); } }

    #checkout-mount { min-height: 200px; }

    /* ========================================
       ACCESSIBILITÉ : prefers-reduced-motion
       (ajouté lors de l'externalisation du CSS, 2026-06-10)
       Coupe la dérive infinie des 18 molécules décoratives
       pour les utilisatrices qui préfèrent réduire les animations.
       ======================================== */
    @media (prefers-reduced-motion: reduce) {
      .molecule {
        animation: none !important;
      }
    }