@keyframes pulsate {
      0%, 100% { opacity: 0.6; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.05); }
    }

    /* Logos confiance */
    .logo-row{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
    @media(min-width:640px){.logo-row{grid-template-columns:repeat(4,1fr)}}
    .logo{height:44px;border-radius:12px;border:1px dashed var(--border);display:flex;align-items:center;justify-content:center;opacity:.9;padding:8px;background:rgba(255,255,255,.02)}
    .logo img{max-height:28px;width:auto;display:block}

    /* Grids */
    .grid3{display:grid;gap:var(--gap)}
    @media(min-width:740px){.grid3{grid-template-columns:repeat(3,1fr)}}
    .grid2{display:grid;gap:var(--gap)}
    @media(min-width:740px){.grid2{grid-template-columns:repeat(2,1fr)}}

    /* CARDS - ETHEREAL LIQUID GLASS + SPOTLIGHT EFFECT */
    .card{
      padding:28px; /* Slightly more padding */
      border-radius:24px; /* More rounded corners */
      background: var(--glass-medium-bg);
      backdrop-filter: blur(14px) saturate(160%);
      border:1px solid var(--glass-border-medium);
      box-shadow: var(--glass-shadow-medium);
      transition:all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
      position: relative;
      overflow: hidden;
    }

    .card::before{
      content: '';
      position: absolute;
      top: var(--mouse-y, -50%);
      left: var(--mouse-x, -50%);
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, color-mix(in srgb, var(--accent-500) 15%, transparent) 0%, transparent 70%);
      opacity: 0;
      transition: opacity 0.4s ease, transform 0.4s ease;
      pointer-events: none;
      transform: translate(-50%, -50%); /* Center the pseudo-element on its origin */
    }

    .card:hover::before{
      opacity: 1;
      transform: translate(-50%, -50%) scale(1.1); /* Slight scale on hover */
    }

    .card::after{
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,.1) 0%, transparent 50%, rgba(255,255,255,.05) 100%); /* Softer internal reflections */
      opacity: 0.4;
    }

    .card:hover {
      transform: translateY(-6px) scale(1.015); /* Slightly less aggressive */
    }

    /* Offer Card Specifics */
    .offer-card-icon {
      width: 64px;
      height: auto;
      margin: 0 auto 1rem auto;
      display: block;
      object-fit: contain;
    }
    .offer-card-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size:1.8rem;
      margin-bottom:1rem;
      color: currentColor; /* Will be set by inline style */
    }
    .offer-card-description {
      font-size:1.1rem;
      color:var(--muted);
      margin-bottom:1.5rem;
    }
    .offer-card-price {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size:2.5rem;
      font-weight:900;
      margin-bottom:0.5rem;
    }
    .offer-card-price-details {
      font-size:0.9rem;
      color:var(--muted);
      margin-bottom:1.5rem;
    }
    .card {
      text-align: center;
    }
    .card-populaire {
      border:2px solid var(--accent-500); /* Use CSS variable */
      box-shadow: var(--glass-shadow-strong), 0 0 25px color-mix(in srgb, var(--accent-500) 40%, transparent) inset 0 2px 0 var(--glass-border-strong);
    }

    /* Steps (flèches + num centrés) - ETHEREAL LIQUID GLASS */
    .steps{display:grid;gap:var(--gap)}
    @media(min-width:820px){.steps{grid-template-columns:repeat(3,1fr)}}
    .step-card{
      position:relative;
      padding:28px;
      border-radius:20px;
      background:linear-gradient(135deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.03) 100%);
      backdrop-filter: blur(10px);
      border:1px solid rgba(255,255,255,.15);
      box-shadow: 0 8px 24px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.12);
      text-align:center;
      transition:all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    }
    .step-card:hover{
      transform: translateY(-6px) scale(1.02);
      background:linear-gradient(135deg, rgba(255,255,255,.12) 0%, rgba(34,211,238,.06) 100%);
      border-color:rgba(34,211,238,.4);
      box-shadow: 0 16px 40px rgba(34,211,238,.25), inset 0 1px 0 rgba(255,255,255,.2);
    }
    /* STEP NUM - METAL CHROME EFFECT */
    .step-num{
      display:flex;align-items:center;justify-content:center;
      width:68px;height:68px;margin:0 auto 12px;border-radius:999px;
      background:linear-gradient(135deg,var(--primary-700),var(--accent-500));
      font-weight:900;font-size:24px;
      box-shadow:0 12px 40px rgba(36,81,255,.6),
                 0 0 40px rgba(34,211,238,.5),
                 0 4px 16px rgba(34,211,238,.3),
                 inset 0 3px 0 rgba(255,255,255,.5),
                 inset 0 -3px 6px rgba(0,0,0,.3);
      border: 3px solid rgba(255,255,255,.4);
      position: relative;
      overflow: hidden;
      filter: drop-shadow(0 6px 20px rgba(34,211,238,.5));
    }
    .step-num::before{
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.6) 0%, transparent 60%);
      animation: shineIntense 2.5s ease-in-out infinite;
    }
    .step-num::after{
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,.3) 0%, transparent 50%, rgba(255,255,255,.2) 100%);
      opacity: 0.6;
    }
    @keyframes shineIntense {
      0%, 100% { opacity: 0.5; transform: scale(1) rotate(0deg); }
      50% { opacity: 1; transform: scale(1.15) rotate(10deg); }
    }
    @media(min-width:820px){
      .step-card:not(:last-child)::after{content:"";position:absolute;top:50%;right:calc(-1 * (var(--gap)/2) - 8px);transform:translateY(-50%);width:40px;height:2px;background:var(--border)}
      .step-card:not(:last-child)::before{content:"";position:absolute;top:calc(50% - 6px);right:calc(-1 * (var(--gap)/2) - 8px);border-width:6px 0 6px 8px;border-style:solid;border-color:transparent transparent transparent var(--border)}
    }
    @media(max-width:819px){
      .step-card:not(:last-child)::after{content:"";position:absolute;left:50%;bottom:calc(-1 * (var(--gap)/2) - 8px);transform:translateX(-50%);width:2px;height:40px;background:var(--border)}
      .step-card:not(:last-child)::before{content:"";position:absolute;left:calc(50% - 6px);bottom:calc(-1 * (var(--gap)/2) - 8px);border-width:8px 6px 0 6px;border-style:solid;border-color:var(--border) transparent transparent transparent}
    }

    /* KPI / Résultats */
    .kpi-row{display:grid;gap:18px;margin-top:16px}
    @media(min-width:760px){.kpi-row{grid-template-columns:repeat(4,1fr)}}
    .kpi{padding:20px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid var(--border);text-align:center}
    .kpi .num{
      font-size:clamp(22px,3.6vw,28px);
      font-weight:900;line-height:1.05;
      background:linear-gradient(90deg,var(--primary-700), var(--accent-500));
      -webkit-background-clip:text;background-clip:text;color:transparent;
    }
    .kpi .label{opacity:.9}
    .kpi .sub{margin-top:6px;font-size:12px;color:var(--muted)}

    /* FAQ - LIQUID GLASS */
    .faq{display:grid;gap:12px}
    details{
      border:1px solid rgba(255,255,255,.15);
      background:linear-gradient(135deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.03) 100%);
      backdrop-filter: blur(10px);
      border-radius:16px;
      padding:16px;
      transition:all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
      box-shadow: 0 4px 16px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.1);
    }
    details:hover{
      border-color:rgba(34,211,238,.5);
      background:linear-gradient(135deg, rgba(255,255,255,.1) 0%, rgba(34,211,238,.05) 100%);
      box-shadow: 0 8px 24px rgba(34,211,238,.2), inset 0 1px 0 rgba(255,255,255,.15);
      transform: translateY(-2px);
    }
    summary{cursor:pointer;font-weight:700;position:relative;padding-right:24px;transition:color 0.3s ease}
    summary::after{content:'+';position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:1.5rem;color:var(--accent-500);transition:transform 0.3s ease}
    details[open] summary::after{content:'−';transform:translateY(-50%) rotate(180deg)}
    details[open] summary{color:var(--accent-500);margin-bottom:12px}
    details[open]{
      border-color:rgba(34,211,238,.6);
      background:linear-gradient(135deg, rgba(255,255,255,.12) 0%, rgba(34,211,238,.08) 100%);
      box-shadow: 0 12px 32px rgba(34,211,238,.25), inset 0 1px 0 rgba(255,255,255,.2);
    }
    /* FORM - LIQUID GLASS INPUTS */
    .form{display:grid;gap:12px;padding:16px}
    .input{
      width:100%;
      padding:1rem 1.1rem;
      border-radius:14px;
      border:2px solid rgba(255,255,255,.15);
      background:linear-gradient(135deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.03) 100%);
      backdrop-filter: blur(8px);
      color:var(--text);
      transition:all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
      box-shadow: 0 4px 12px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.08);
    }
    .input:focus{
      outline: none;
      border-color:rgba(34,211,238,.6);
      background:linear-gradient(135deg, rgba(255,255,255,.1) 0%, rgba(34,211,238,.05) 100%);
      box-shadow: 0 8px 24px rgba(34,211,238,.25), 0 0 20px rgba(34,211,238,.2), inset 0 1px 0 rgba(255,255,255,.15);
      transform: translateY(-2px);
    }
    .input::placeholder{color:#A0AEC0}
    .input:invalid:not(:placeholder-shown){border:2px solid #F87171;background:rgba(248,113,113,.05)}
    .input:valid:not(:placeholder-shown){
      border:2px solid rgba(34,211,238,.5);
      background:linear-gradient(135deg, rgba(255,255,255,.08) 0%, rgba(34,211,238,.04) 100%);
      box-shadow: 0 4px 16px rgba(34,211,238,.15), inset 0 1px 0 rgba(255,255,255,.1);
    }
    .footer{padding:28px 0;border-top:1px solid var(--border);font-size:14px;color:#B6C7DA;margin-top:48px}
    .footer-content {
      display:flex;
      flex-direction:column;
      gap:6px;
      justify-content:center;
      align-items:flex-start;
    }
    .version{color:#8B9DC3;font-size:12px;margin-top:6px}

    hr.divider{border:0;height:1px;margin:48px auto;width:min(1120px, calc(100% - 32px));background:linear-gradient(90deg, transparent, rgba(148,163,184,.55), transparent)}

    /* Responsive - Méthode 2 colonnes → 1 colonne */
    @media(max-width:920px){
      .method-stage{grid-template-columns:1fr!important}
      .method-stage .stage-visual{order:1}
      .method-stage .stage-content{order:2}
    }

    /* Mobile layout adjustments */
    @media(max-width:880px){
      .btn{padding:.85rem 1rem}
      section{padding:48px 0}
      .hero-media{display:none}
      .offre-grid{grid-template-columns:1fr!important}

      /* Badge POPULAIRE mobile */
      .badge-populaire {
        top: 10px !important;
        right: 10px !important;
        font-size: 0.65rem !important;
        padding: 5px 14px !important;
      }
    }
    section, :target { scroll-margin-top: calc(var(--header-h) + 8px); }
  
    /* Trust Label */
    .trust-label {
      opacity: .9;
      font-size: 18px;
      font-weight: 700;
      letter-spacing: .4px;
      margin-bottom: 12px;
    }

    .logo:hover img {
      transform: translateY(-1px);
      opacity: 1;
    }

  
    /* === Hero & Logo Layout (Consolidated) === */
    .hero {
      display: grid;
      gap: 28px;
      align-items: center;
    }

    @media (min-width: 1024px) {
      .container.hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 560px;
        gap: 28px;
        align-items: center;
      }
      .container.hero > .hero-content {
        min-width: 0;
      }
      .hero-media {
        min-height: clamp(580px, 68vh, 850px);
      }
    }

    @media (max-width: 1023.98px), (max-height: 720px) {
      .container.hero > .hero-media {
        display: none !important;
      }
    }

    /* Logo Grid */
    .logo-row {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 18px;
    }

    @media (min-width: 640px) {
      .logo-row {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media (min-width: 860px) {
      .logo-row {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    @media (min-width: 1120px) {
      .logo-row {
        grid-template-columns: repeat(5, 1fr);
      }
    }

    .logo {
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .logo img {
      max-height: 56px;
      width: auto;
      display: block;
    }

    /* Calculateur ROI - LIQUID GLASS */
    .calculator {
      background:linear-gradient(135deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.04) 100%);
      backdrop-filter: blur(12px);
      border-radius: 20px;
      padding: 28px;
      border: 1px solid rgba(255,255,255,.18);
      box-shadow: 0 12px 40px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.15);
      position: relative;
      overflow: hidden;
    }
    .calculator::before{
      content: '';
      position: absolute;
      top: -50%;
      right: -50%;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle, rgba(34,211,238,.08) 0%, transparent 70%);
      animation: rotatePulse 8s ease-in-out infinite;
      pointer-events: none; /* Fix: permet les clics sur les selects */
    }
    @keyframes rotatePulse {
      0%, 100% { transform: rotate(0deg) scale(1); opacity: 0.5; }
      50% { transform: rotate(180deg) scale(1.2); opacity: 0.8; }
    }

    /* ROI RESULT CARDS - GLASS + GLOW */
    .roi-card {
      background: linear-gradient(135deg, rgba(255,255,255,.1) 0%, rgba(34,211,238,.06) 100%) !important;
      backdrop-filter: blur(10px);
      padding: 20px !important;
      border-radius: 16px !important;
      text-align: center;
      border: 2px solid rgba(34,211,238,.3) !important;
      box-shadow: 0 8px 28px rgba(34,211,238,.2),
                  0 4px 12px rgba(36,81,255,.15),
                  inset 0 2px 0 rgba(255,255,255,.2) !important;
      transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
      position: relative;
      overflow: hidden;
    }

    .roi-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at center, rgba(34,211,238,.1) 0%, transparent 70%);
      opacity: 0;
      transition: opacity 0.4s ease;
    }

    .roi-card:hover {
      transform: translateY(-4px) scale(1.03);
      border-color: rgba(34,211,238,.6);
      box-shadow: 0 16px 40px rgba(34,211,238,.3),
                  0 8px 20px rgba(36,81,255,.2),
                  inset 0 2px 0 rgba(255,255,255,.3);
    }

    .roi-card:hover::before {
      opacity: 1;
    }

    /* BADGE POPULAIRE */
    .badge-populaire {
      position: absolute;
      top: 12px;
      right: 12px;
      background: linear-gradient(135deg, #22D3EE 0%, #2451FF 100%);
      color: #FFF;
      padding: 6px 16px;
      border-radius: 999px;
      font-size: 0.7rem;
      font-weight: 900;
      letter-spacing: 0.08em;
      box-shadow: 0 6px 20px rgba(34,211,238,.5),
                  0 0 30px rgba(34,211,238,.3),
                  inset 0 1px 0 rgba(255,255,255,.4);
      border: 2px solid rgba(255,255,255,.3);
      white-space: nowrap;
      z-index: 10;
    }

    /* EMOJI GLOW ADOUCI */
    .card > div[style*="font-size:3rem"],
    .offre-grid .card > div:first-child {
      filter: drop-shadow(0 3px 12px rgba(34,211,238,.3)) drop-shadow(0 0 20px rgba(36,81,255,.25));
      animation: emojiPulse 4s ease-in-out infinite;
    }

    @keyframes emojiPulse {
      0%, 100% {
        filter: drop-shadow(0 3px 12px rgba(34,211,238,.25)) drop-shadow(0 0 18px rgba(36,81,255,.2));
        transform: scale(1);
      }
      50% {
        filter: drop-shadow(0 4px 16px rgba(34,211,238,.4)) drop-shadow(0 0 28px rgba(36,81,255,.35));
        transform: scale(1.03);
      }
    }
    .calculator-grid {
      display: grid;
      gap: 16px;
      align-items: start;
    }
    @media (min-width: 640px) {
      .calculator-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    .calc-label {
      display: block;
      margin-bottom: 6px;
      font-weight: 600;
    }
    .calculator input:focus,
    .calculator select:focus {
      border-color: var(--primary-700);
      outline: none;
    }

    /* ROI Sliders - Ethereal Style */
    .roi-slider {
      -webkit-appearance: none;
      width: 100%;
      height: 10px;
      background: linear-gradient(90deg, var(--primary-700) 0%, var(--accent-500) 100%);
      border-radius: 5px;
      outline: none;
      margin: 10px 0;
      transition: background 0.2s ease-in-out;
      box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
    }

    .roi-slider::-webkit-slider-runnable-track {
      height: 10px;
      border-radius: 5px;
      background: rgba(255,255,255,.08);
      box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
    }

    .roi-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--accent-500);
      cursor: pointer;
      margin-top: -7px; /* Center the thumb vertically */
      box-shadow: 0 0 12px var(--accent-500), inset 0 1px 3px rgba(255,255,255,.5);
      border: 2px solid var(--text);
      transition: background 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    }

    .roi-slider::-webkit-slider-thumb:hover {
      background: var(--primary-700);
      box-shadow: 0 0 15px var(--primary-700), inset 0 1px 3px rgba(255,255,255,.5);
    }

    .roi-slider::-moz-range-track {
      height: 10px;
      border-radius: 5px;
      background: rgba(255,255,255,.08);
      box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
    }

    .roi-slider::-moz-range-thumb {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--accent-500);
      cursor: pointer;
      box-shadow: 0 0 12px var(--accent-500), inset 0 1px 3px rgba(255,255,255,.5);
      border: 2px solid var(--text);
      transition: background 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    }

    .roi-slider::-moz-range-thumb:hover {
      background: var(--primary-700);
      box-shadow: 0 0 15px var(--primary-700), inset 0 1px 3px rgba(255,255,255,.5);
    }

    /* ROI Info Box */
    .roi-info-box {
      background:color-mix(in srgb, var(--accent-500) 10%, transparent);
      border-radius:12px;
      padding:20px;
      margin-top:24px;
      text-align:center;
      border:1px solid color-mix(in srgb, var(--accent-500) 30%, transparent);
      box-shadow: var(--glass-shadow-light);
    }
    .roi-info-text {
      color:var(--accent-500);
      font-weight:600;
      margin:0;
    }

    /* Styles pour la nouvelle méthode */
    @keyframes methodFadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .method-nav-btn:hover {
      transform: translateY(-3px) scale(1.05) !important;
      box-shadow: 0 10px 30px rgba(36, 81, 255, 0.4);
    }

    .method-nav-btn.active {
      border-color: currentColor !important;
      box-shadow: 0 10px 40px currentColor;
      transform: scale(1.1) !important;
    }

    .eye-scan {
      animation: scanPulse 3s ease-in-out infinite;
    }

    @keyframes scanPulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.05); }
    }

    .scan-line {
      animation: scan 2s ease-in-out infinite;
    }

    @keyframes scan {
      0%, 100% { opacity: 0.3; }
      50% { opacity: 1; }
    }

    .hammer {
      animation: forge 2s ease-in-out infinite;
      transform-origin: bottom right;
    }

    @keyframes forge {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(-15deg); }
      50% { transform: rotate(0deg); }
    }

    .network-node {
      animation: nodePulse 2s ease-in-out infinite;
    }

    @keyframes nodePulse {
      0%, 100% { r: 8; opacity: 1; }
      50% { r: 12; opacity: 0.6; }
    }

    .network-line {
      animation: lineGlow 3s ease-in-out infinite;
    }

    @keyframes lineGlow {
      0%, 100% { stroke-opacity: 0.4; }
      50% { stroke-opacity: 1; }
    }

    .wave {
      animation: waveExpand 3s ease-out infinite;
    }

    @keyframes waveExpand {
      0% { r: 20; opacity: 1; }
      100% { r: 150; opacity: 0; }
    }

    .wave:nth-child(2) { animation-delay: 0.5s; }
    .wave:nth-child(3) { animation-delay: 1s; }
    .wave:nth-child(4) { animation-delay: 1.5s; }

    /* METHOD STAGES - ETHEREAL GLASS UPGRADE */
    .method-stage {
      background: var(--glass-medium-bg);
      backdrop-filter: blur(14px) saturate(160%);
      border: 1px solid var(--glass-border-medium);
      box-shadow: var(--glass-shadow-medium);
      transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .method-stage.active {
      border-color: var(--accent-500);
      box-shadow: 0 16px 50px color-mix(in srgb, var(--accent-500) 25%, transparent),
                  0 8px 30px color-mix(in srgb, var(--primary-700) 20%, transparent),
                  inset 0 2px 0 var(--glass-border-strong);
    }

    .method-nav-btn {
      background: var(--glass-subtle-bg);
      backdrop-filter: blur(10px);
      border: 1px solid var(--glass-border-light);
      box-shadow: var(--glass-shadow-light);
      transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .method-nav-btn:hover {
      transform: translateY(-4px) scale(1.06);
      box-shadow: 0 12px 35px color-mix(in srgb, currentColor 30%, transparent),
                  0 0 30px color-mix(in srgb, currentColor 20%, transparent),
                  inset 0 2px 0 var(--glass-border-medium);
      background: var(--glass-medium-bg);
      border-color: currentColor;
    }

    .method-nav-btn.active {
      border-color: currentColor;
      box-shadow: 0 10px 40px color-mix(in srgb, currentColor 40%, transparent),
                  0 0 35px color-mix(in srgb, currentColor 30%, transparent),
                  inset 0 2px 0 var(--glass-border-strong);
      transform: scale(1.1);
      background: var(--glass-strong-bg);
      filter: drop-shadow(0 4px 16px currentColor);
    }

    /* Method Section Typography & Boxes */
    .method-title {
      font-size:clamp(2rem,5vw,3rem);
      margin-bottom:1rem;
      font-weight:900;
      letter-spacing:-0.02em;
      color: currentColor; /* Will be set by inline style for active stage */
    }
    .method-subtitle {
      font-size:clamp(1rem,2.5vw,1.5rem);
      margin-bottom:1.5rem;
      font-weight:700;
      line-height:1.3;
    }
    .method-highlight-box {
      font-size:1.1rem;
      margin-bottom:1.5rem;
      padding:1rem;
      background:rgba(255,255,255,0.05);
      border-radius:12px;
      border-left:4px solid var(--magenta);
      color:var(--text);
      font-weight:600;
    }
    .method-outcome-list {
      font-size:1.1rem;
      margin-bottom:1.5rem;
      color:var(--accent-500);
      font-weight:700;
      line-height:1.6;
    }
    .method-receive-box {
      background:rgba(255,255,255,0.08);
      padding:1.2rem;
      border-radius:12px;
      border-left:5px solid currentColor; /* Will be set by inline style for active stage */
      font-size:1rem;
      line-height:1.6;
    }
    .method-receive-box span {
      display:block;
      margin-bottom:0.5rem;
      font-size:0.85rem;
      text-transform:uppercase;
      opacity:0.7;
      font-weight:700;
      letter-spacing:0.1em;
    }
    .method-receive-box div {
      font-size:1.1rem;
      font-weight:700;
      line-height:1.5;
    }

    @media (max-width: 968px) {
      .method-stage {
        grid-template-columns: 1fr !important;
      }

      .stage-visual {
        order: -1;
      }

      .stage-visual > div {
        width: 300px !important;
        height: 300px !important;
      }

      .method-nav {
        gap: 1rem !important;
      }

      .method-nav-btn {
        padding: 0.8rem 1.5rem !important;
        font-size: 1.2rem !important;
      }
    }

    /* Offre grid responsive */
    @media (max-width: 1100px) {
      .offre-grid {
        grid-template-columns: repeat(2, 1fr) !important;
      }
    }

    @media (max-width: 650px) {
      .offre-grid {
        grid-template-columns: 1fr !important;
      }
    }

    /* ========================================
       🚀 NOUVELLES AMÉLIORATIONS UX/UI 2024
       ======================================== */

    /* === GLASS LEVELS DIFFÉRENCIÉS === */
    .glass-subtle {
      background: rgba(255,255,255,.03);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,.08);
    }

    .glass-medium {
      background: rgba(255,255,255,.06);
      backdrop-filter: blur(12px) saturate(150%);
      border: 1px solid rgba(255,255,255,.15);
    }

    .glass-strong {
      background: rgba(255,255,255,.10);
      backdrop-filter: blur(20px) saturate(180%);
      border: 1px solid rgba(255,255,255,.25);
      box-shadow: 0 8px 32px rgba(31,38,135,.37);
    }

    /* === SCROLL-DRIVEN ANIMATIONS === */
    @supports (animation-timeline: view()) {
      .card, .step-card, .method-stage {
        animation: reveal-scroll linear;
        animation-timeline: view();
        animation-range: entry 0% cover 25%;
      }

      @keyframes reveal-scroll {
        from {
          opacity: 0;
          transform: translateY(30px) scale(0.95);
        }
        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }
    }

    /* === MOBILE OPTIMIZATIONS === */
    @media (max-width: 768px) {
      /* Input font-size 16px pour éviter zoom iOS */
      .input, input, textarea, select {
        font-size: 16px !important;
        min-height: 44px;
      }

      /* Touch targets étendus */
      .method-nav-btn, .tab, a.btn, button {
        min-height: 48px;
        min-width: 48px;
        padding: 12px 16px;
      }

      /* === BOTTOM SHEET MENU (iOS/Android style) === */
      .desktop-nav {
        display: none !important;
      }

      .menu-btn {
        display: inline-flex !important;
        margin-left: auto;
      }

      /* Show bottom sheet on mobile (overlay stays display:none until active) */
      .bottom-sheet {
        display: block !important;
      }

      /* Overlay: MUST be display:none by default to not block clicks on iOS */
      .bottom-sheet-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
        z-index: 1100;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.3s ease, visibility 0.3s ease;
      }

      .bottom-sheet-overlay.active {
        display: block;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
      }

      .bottom-sheet {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-height: 85vh;
        background: linear-gradient(135deg, rgba(15, 23, 42, 0.98) 0%, rgba(30, 41, 59, 0.98) 100%);
        backdrop-filter: blur(20px) saturate(180%);
        border-top-left-radius: 24px;
        border-top-right-radius: 24px;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
        z-index: 1200;
        transform: translateY(100%);
        transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
        padding: 0 0 env(safe-area-inset-bottom);
        overflow-y: auto;
        overscroll-behavior: contain;
      }

      .bottom-sheet.open {
        transform: translateY(0);
      }

      .bottom-sheet-header {
        position: sticky;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 12px 16px 8px;
        background: inherit;
        z-index: 1;
      }

      .bottom-sheet-handle {
        width: 40px;
        height: 5px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 3px;
        cursor: grab;
      }

      .bottom-sheet-handle:active {
        cursor: grabbing;
      }

      .bottom-sheet-close {
        position: absolute;
        right: 16px;
        top: 12px;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 12px;
        color: var(--text);
        cursor: pointer;
        transition: all 0.2s ease;
      }

      .bottom-sheet-close:hover {
        background: rgba(255, 255, 255, 0.15);
        transform: scale(1.05);
      }

      .bottom-sheet-nav {
        display: flex;
        flex-direction: column;
        padding: 8px 16px 24px;
        gap: 4px;
      }

      .sheet-link {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 16px 20px;
        border-radius: 16px;
        color: var(--text);
        font-size: 1.1rem;
        font-weight: 600;
        transition: all 0.2s ease;
        text-decoration: none;
      }

      .sheet-link:hover, .sheet-link:focus {
        background: rgba(255, 255, 255, 0.08);
        transform: translateX(4px);
      }

      .sheet-link.active {
        background: linear-gradient(135deg, rgba(34, 211, 238, 0.15) 0%, rgba(36, 81, 255, 0.1) 100%);
        border: 1px solid rgba(34, 211, 238, 0.3);
        color: var(--accent-500);
      }

      .sheet-icon {
        font-size: 1.4rem;
        width: 32px;
        text-align: center;
      }

      .sheet-divider {
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
        margin: 12px 0;
      }

      .sheet-support {
        opacity: 0.8;
      }

      .sheet-cta-group {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 16px;
        padding: 0 4px;
      }

      .sheet-cta-group .btn {
        width: 100%;
        justify-content: center;
        font-size: 1rem;
        padding: 16px 24px;
      }

      /* Animation d'entrée des liens */
      .bottom-sheet.open .sheet-link {
        animation: sheetLinkIn 0.4s ease forwards;
        opacity: 0;
        transform: translateY(10px);
      }

      .bottom-sheet.open .sheet-link:nth-child(1) { animation-delay: 0.05s; }
      .bottom-sheet.open .sheet-link:nth-child(2) { animation-delay: 0.08s; }
      .bottom-sheet.open .sheet-link:nth-child(3) { animation-delay: 0.11s; }
      .bottom-sheet.open .sheet-link:nth-child(4) { animation-delay: 0.14s; }
      .bottom-sheet.open .sheet-link:nth-child(5) { animation-delay: 0.17s; }
      .bottom-sheet.open .sheet-link:nth-child(6) { animation-delay: 0.20s; }
      .bottom-sheet.open .sheet-link:nth-child(7) { animation-delay: 0.23s; }
      .bottom-sheet.open .sheet-link:nth-child(9) { animation-delay: 0.26s; }

      @keyframes sheetLinkIn {
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      /* === HERO MOBILE - Pas d'image, juste le gradient animé === */
      #hero {
        position: relative;
      }

      .hero-content {
        position: relative;
        z-index: 1;
      }

      /* === BOTTOM STICKY CTA BAR === */
      .mobile-cta-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 12px 16px env(safe-area-inset-bottom);
        background: rgba(11, 18, 38, 0.95);
        backdrop-filter: blur(20px) saturate(180%);
        border-top: 1px solid rgba(255,255,255,.15);
        box-shadow: 0 -4px 24px rgba(0,0,0,.3);
        z-index: 1000;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
      }

      .mobile-cta-bar.visible {
        transform: translateY(0);
      }

      .mobile-cta-bar .btn {
        width: 100%;
        justify-content: center;
        font-size: 16px;
        padding: 14px 20px;
      }
    }

    /* === DEFAULT STATES FOR MOBILE ELEMENTS === */
    /* Hidden by default on all screens */
    .bottom-sheet,
    .bottom-sheet-overlay {
      display: none;
    }

    /* Masquer le bouton CTA et bottom sheet sur desktop */
    @media (min-width: 769px) {
      .mobile-cta-bar {
        display: none !important;
      }
      .menu-btn {
        display: none !important;
      }
      .desktop-nav {
        display: flex !important;
      }
    }

    /* === STICKY HEADER COMPACT === */
    .header .row {
      height: 55px !important;
    }

    /* === SKELETON LOADING === */
    .skeleton {
      background: linear-gradient(
        90deg,
        rgba(255,255,255,.05) 25%,
        rgba(255,255,255,.1) 50%,
        rgba(255,255,255,.05) 75%
      );
      background-size: 200% 100%;
      animation: shimmer 1.5s infinite;
      border-radius: 8px;
    }

    @keyframes shimmer {
      0% { background-position: -200% 0; }
      100% { background-position: 200% 0; }
    }

    /* === SMOOTH SCROLL SNAP pour mobile === */
    @media (max-width: 768px) {
      .stages-container {
        scroll-snap-type: x mandatory;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }

      .stages-container::-webkit-scrollbar {
        display: none;
      }

      .method-stage {
        scroll-snap-align: center;
        min-width: 100%;
      }
    }

    /* === MICRO-INTERACTIONS SUPPLÉMENTAIRES === */
    .card:hover {
      transform: translateY(-4px) scale(1.01);
    }

    .logo:hover, .step-card:hover {
      transform: translateY(-2px);
      border-color: rgba(34,211,238,.4);
    }

    /* Smooth focus pour accessibilité */
    *:focus-visible {
      outline: 3px solid var(--accent-500);
      outline-offset: 3px;
      box-shadow: 0 0 0 6px var(--focus);
      transition: all 0.2s ease;
    }

    /* === PROGRESSIVE ENHANCEMENT === */
    @supports (backdrop-filter: blur(20px)) {
      .card, .panel {
        backdrop-filter: blur(12px) saturate(150%);
      }
    }

    /* === REDUCED MOTION pour accessibilité === */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }

    /* === TESTIMONIALS CAROUSEL === */
    .testimonials-carousel {
      position: relative;
      overflow: hidden;
      padding: 20px 0 60px;
    }

    .carousel-track {
      display: flex;
      transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
      gap: 24px;
    }

    .testimonial-card {
      flex: 0 0 85%;
      min-width: 280px;
      max-width: 400px;
      padding: 28px;
      border-radius: 20px;
      background: linear-gradient(135deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.03) 100%);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,.12);
      box-shadow: 0 8px 24px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.1);
      text-align: left;
      transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.4s ease;
      opacity: 1; /* Default visible for no-JS */
      transform: scale(1);
    }

    /* When JS is active, non-active cards are faded */
    .testimonials-carousel.js-active .testimonial-card {
      opacity: 0.5;
      transform: scale(0.95);
    }

    .testimonials-carousel.js-active .testimonial-card.active,
    .testimonial-card.active {
      opacity: 1;
      transform: scale(1);
      border-color: rgba(34,211,238,.3);
      box-shadow: 0 12px 32px rgba(34,211,238,.15), inset 0 1px 0 rgba(255,255,255,.15);
    }

    .testimonial-card:hover {
      border-color: rgba(34,211,238,.4);
    }

    /* Navigation buttons */
    .carousel-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: linear-gradient(135deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.05) 100%);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,.2);
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      z-index: 10;
      box-shadow: 0 4px 16px rgba(0,0,0,.2);
    }

    .carousel-btn:hover {
      background: linear-gradient(135deg, var(--primary-700) 0%, var(--accent-500) 100%);
      border-color: rgba(34,211,238,.5);
      transform: translateY(-50%) scale(1.1);
      box-shadow: 0 8px 24px rgba(34,211,238,.3);
    }

    .carousel-prev { left: 8px; }
    .carousel-next { right: 8px; }

    /* Dots navigation */
    .carousel-dots {
      display: flex;
      justify-content: center;
      gap: 12px;
      margin-top: 24px;
    }

    .carousel-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: none;
      background: rgba(255,255,255,.2);
      cursor: pointer;
      transition: all 0.3s ease;
      padding: 0;
    }

    .carousel-dot:hover {
      background: rgba(255,255,255,.4);
      transform: scale(1.2);
    }

    .carousel-dot.active {
      background: var(--accent-500);
      width: 28px;
      border-radius: 10px;
      box-shadow: 0 0 12px rgba(34,211,238,.5);
    }

    /* Progress bar for auto-play */
    .carousel-progress {
      position: absolute;
      bottom: 36px;
      left: 50%;
      transform: translateX(-50%);
      width: 120px;
      height: 3px;
      background: rgba(255,255,255,.1);
      border-radius: 3px;
      overflow: hidden;
    }

    .carousel-progress-bar {
      height: 100%;
      background: linear-gradient(90deg, var(--primary-700), var(--accent-500));
      width: 0%;
      transition: width 0.1s linear;
      border-radius: 3px;
    }

    .carousel-progress-bar.paused {
      animation-play-state: paused;
    }

    .testimonial-quote {
      font-style: italic;
      font-size: 1.05rem;
      line-height: 1.7;
      color: rgba(255,255,255,.9);
      margin-bottom: 16px;
    }
    .testimonial-quote::before {
      content: '« ';
      color: var(--accent-500);
      font-weight: 700;
    }
    .testimonial-quote::after {
      content: ' »';
      color: var(--accent-500);
      font-weight: 700;
    }
    .testimonial-author {
      font-weight: 700;
      color: #fff;
    }
    .testimonial-context {
      font-size: 0.875rem;
      color: var(--muted);
      margin-top: 4px;
    }

    /* Desktop: show multiple cards */
    @media (min-width: 768px) {
      .testimonials-carousel {
        overflow: visible;
        padding: 20px 40px 60px;
      }
      .testimonial-card {
        flex: 0 0 320px;
        min-width: 300px;
        max-width: 350px;
      }
      .carousel-btn {
        width: 52px;
        height: 52px;
      }
      .carousel-prev { left: -26px; }
      .carousel-next { right: -26px; }
    }

    /* Mobile: horizontal scroll fallback + swipe */
    @media (max-width: 767px) {
      .testimonials-carousel {
        padding: 16px 0 56px;
        margin: 0 -16px;
        padding-left: 16px;
        padding-right: 16px;
      }
      .carousel-track {
        padding-right: 16px;
      }
      .carousel-btn {
        display: none;
      }
      .testimonial-card {
        flex: 0 0 calc(100vw - 64px);
        min-width: auto;
        max-width: none;
      }
    }

    /* === THEME TOGGLE === */
    .theme-toggle {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,.15);
      background: linear-gradient(135deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.04) 100%);
      backdrop-filter: blur(10px);
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }

    /* Hide desktop theme toggle on mobile (use bottom sheet one) */
    @media (max-width: 768px) {
      .desktop-nav .theme-toggle,
      #themeToggle {
        display: none !important;
      }
    }

    .theme-toggle:hover {
      border-color: var(--accent-500);
      background: linear-gradient(135deg, rgba(255,255,255,.12) 0%, rgba(34,211,238,.1) 100%);
      transform: scale(1.05);
      box-shadow: 0 4px 16px rgba(34,211,238,.25);
    }

    .theme-toggle svg {
      position: absolute;
      transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
      color: var(--text);
    }

    /* Default: dark mode - show sun */
    .theme-toggle .icon-sun {
      opacity: 1;
      transform: rotate(0deg) scale(1);
    }

    .theme-toggle .icon-moon {
      opacity: 0;
      transform: rotate(-90deg) scale(0.5);
    }

    /* Light mode - show moon */
    [data-theme="light"] .theme-toggle .icon-sun {
      opacity: 0;
      transform: rotate(90deg) scale(0.5);
    }

    [data-theme="light"] .theme-toggle .icon-moon {
      opacity: 1;
      transform: rotate(0deg) scale(1);
    }

    /* === LIGHT THEME === */
    [data-theme="light"] {
      --bg: #F8FAFC;
      --bg-mesh-start: #F8FAFC;
      --bg-mesh-end: #E2E8F0;
      --text: #1E293B;
      --muted: #475569; /* Improved contrast: 7.24:1 vs 4.55:1 */
      --panel: rgba(0,0,0,.03);
      --panel-strong: rgba(255,255,255,.9);
      --border: rgba(0,0,0,.08);
      --primary-900: #1E40AF;
      --primary-800: #2563EB;
      --primary-700: #3B82F6;
      --accent-500: #0891B2;
      --magenta: #DB2777;
      --focus: rgba(8,145,178,.3);
      --glass-light-bg: rgba(255,255,255,.7);
      --glass-medium-bg: rgba(255,255,255,.5);
      --glass-border-light: rgba(0,0,0,.05);
      --glass-border-medium: rgba(0,0,0,.08);
      --glass-shadow-light: 0 4px 12px rgba(0,0,0,.08);
      --glass-shadow-medium: 0 8px 24px rgba(0,0,0,.1);
    }

    /* Light theme adjustments */
    [data-theme="light"] body {
      background: linear-gradient(135deg, var(--bg) 0%, var(--bg-mesh-end) 100%);
    }

    [data-theme="light"] .halos .halo {
      opacity: 0.15;
    }

    [data-theme="light"] .header {
      background: linear-gradient(135deg, rgba(255,255,255,.85) 0%, rgba(241,245,249,.85) 100%);
      border-bottom-color: rgba(0,0,0,.08);
    }

    [data-theme="light"] .card {
      background: linear-gradient(135deg, rgba(255,255,255,.8) 0%, rgba(255,255,255,.6) 100%);
      border-color: rgba(0,0,0,.08);
      box-shadow: 0 8px 32px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.05);
    }

    [data-theme="light"] .card:hover {
      box-shadow: 0 16px 48px rgba(59,130,246,.15), 0 4px 12px rgba(0,0,0,.08);
      border-color: rgba(8,145,178,.3);
    }

    [data-theme="light"] .btn {
      box-shadow: 0 8px 24px rgba(59,130,246,.25), 0 2px 8px rgba(0,0,0,.1);
    }

    [data-theme="light"] .btn.outline {
      background: rgba(255,255,255,.8);
      border-color: rgba(0,0,0,.15);
      color: var(--text);
    }

    [data-theme="light"] .input {
      background: rgba(255,255,255,.9);
      border-color: rgba(0,0,0,.12);
      color: var(--text);
    }

    [data-theme="light"] .input::placeholder {
      color: var(--muted);
    }

    [data-theme="light"] .testimonial-card {
      background: linear-gradient(135deg, rgba(255,255,255,.8) 0%, rgba(255,255,255,.6) 100%);
      border-color: rgba(0,0,0,.08);
    }

    [data-theme="light"] .testimonial-quote {
      color: rgba(30,41,59,.9);
    }

    [data-theme="light"] .bottom-sheet {
      background: linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(241,245,249,.98) 100%);
    }

    [data-theme="light"] .sheet-link {
      color: var(--text);
    }

    [data-theme="light"] .theme-toggle {
      background: linear-gradient(135deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.02) 100%);
      border-color: rgba(0,0,0,.1);
    }

    [data-theme="light"] .theme-toggle:hover {
      background: linear-gradient(135deg, rgba(0,0,0,.08) 0%, rgba(8,145,178,.08) 100%);
    }

    /* Mobile theme toggle in bottom sheet */
    .sheet-theme-toggle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px;
      margin-top: 16px;
      border-top: 1px solid rgba(255,255,255,.1);
    }

    .sheet-theme-toggle span {
      font-size: 0.95rem;
      color: var(--muted);
    }

    [data-theme="light"] .sheet-theme-toggle {
      border-top-color: rgba(0,0,0,.08);
    }

    /* === LIGHT MODE - COMPLETE TEXT FIXES === */
    [data-theme="light"] h1,
    [data-theme="light"] h2,
    [data-theme="light"] h3,
    [data-theme="light"] h4 {
      color: var(--text);
      filter: none;
    }

    [data-theme="light"] p,
    [data-theme="light"] li,
    [data-theme="light"] span {
      color: var(--text);
    }

    [data-theme="light"] .nav a,
    [data-theme="light"] .nav .chip,
    [data-theme="light"] .support-link {
      color: var(--text);
    }

    [data-theme="light"] .menu-btn {
      color: var(--text);
      background: rgba(0,0,0,.05);
      border-color: rgba(0,0,0,.1);
    }

    [data-theme="light"] .brand,
    [data-theme="light"] .brand a,
    [data-theme="light"] .brand span {
      color: var(--text);
    }

    [data-theme="light"] .hero-content,
    [data-theme="light"] .hero-content h1,
    [data-theme="light"] .hero-content p {
      color: var(--text);
    }

    [data-theme="light"] .step-card,
    [data-theme="light"] .step-card h3,
    [data-theme="light"] .step-card p {
      color: var(--text);
    }

    [data-theme="light"] .method-stage,
    [data-theme="light"] .method-title,
    [data-theme="light"] .method-subtitle {
      color: var(--text);
    }

    [data-theme="light"] .kpi,
    [data-theme="light"] .kpi .label {
      color: var(--text);
    }

    [data-theme="light"] .footer {
      color: var(--muted);
      border-top-color: rgba(0,0,0,.08);
    }

    [data-theme="light"] .footer a {
      color: var(--text);
    }

    [data-theme="light"] details,
    [data-theme="light"] summary {
      color: var(--text);
      background: rgba(255,255,255,.6);
      border-color: rgba(0,0,0,.08);
    }

    [data-theme="light"] details p {
      color: var(--muted);
    }

    [data-theme="light"] .calculator {
      background: rgba(255,255,255,.8);
      border-color: rgba(0,0,0,.08);
    }

    [data-theme="light"] .calc-label {
      color: var(--text);
    }

    [data-theme="light"] .roi-card {
      background: rgba(255,255,255,.9) !important;
      border-color: rgba(0,0,0,.1) !important;
    }

    [data-theme="light"] .roi-card div {
      color: var(--text);
    }

    [data-theme="light"] .testimonial-author {
      color: var(--text);
    }

    [data-theme="light"] .panel {
      background: rgba(255,255,255,.7);
      border-color: rgba(0,0,0,.08);
    }

    [data-theme="light"] .chip {
      background: rgba(0,0,0,.05);
      color: var(--text);
    }

    [data-theme="light"] section {
      color: var(--text);
    }

    [data-theme="light"] .trust-label {
      color: var(--text);
    }

    [data-theme="light"] .logo {
      background: rgba(255,255,255,.6);
      border-color: rgba(0,0,0,.08);
    }

    [data-theme="light"] .offer-card-title,
    [data-theme="light"] .offer-card-description,
    [data-theme="light"] .offer-card-price {
      color: var(--text);
    }

    [data-theme="light"] .carousel-btn {
      background: rgba(255,255,255,.9);
      border-color: rgba(0,0,0,.1);
      color: var(--text);
    }

    [data-theme="light"] .carousel-dot {
      background: rgba(0,0,0,.2);
    }

    [data-theme="light"] .carousel-dot.active {
      background: var(--primary-700);
    }

    /* === LIGHT MODE - METHOD STAGES === */
    [data-theme="light"] .method-stage {
      background: rgba(0,0,0,.03) !important;
      border-color: rgba(0,0,0,.15) !important;
    }

    /* Force TOUS les elements dans stage-content a etre sombres */
    [data-theme="light"] .stage-content * {
      color: var(--text) !important;
    }

    /* Preserve les couleurs des titres VOIR/FORGER/etc */
    [data-theme="light"] .stage-content h2 {
      color: inherit !important;
    }

    /* Override les fonds clairs par des fonds sombres */
    [data-theme="light"] .stage-content div[style] {
      background: rgba(0,0,0,.04) !important;
    }

    /* Garde le border-left colore */
    [data-theme="light"] .stage-content div[style*="border-left"] {
      border-left-color: inherit;
    }

    [data-theme="light"] .method-nav-btn {
      border-color: rgba(0,0,0,.2) !important;
      background: rgba(255,255,255,.8) !important;
    }

    [data-theme="light"] .stage-visual {
      background: transparent !important;
    }

    /* === LIGHT MODE - MOBILE CTA BAR === */
    [data-theme="light"] .mobile-cta-bar {
      background: linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(241,245,249,.95) 100%) !important;
      border-top-color: rgba(0,0,0,.1) !important;
      box-shadow: 0 -4px 20px rgba(0,0,0,.1) !important;
    }

    [data-theme="light"] .mobile-cta-bar .btn {
      box-shadow: 0 4px 12px rgba(59,130,246,.3) !important;
    }

    /* === LIGHT MODE - CTA BOX === */
    [data-theme="light"] .cta-box {
      background: linear-gradient(135deg, var(--primary-700), var(--accent-500)) !important;
    }

    [data-theme="light"] .cta-box h2,
    [data-theme="light"] .cta-box p {
      color: #fff !important;
    }

    /* === LIGHT MODE - BLOG CARDS === */
    [data-theme="light"] .blog-card,
    [data-theme="light"] .blog-preview {
      background: rgba(255,255,255,.8) !important;
      border-color: rgba(0,0,0,.08) !important;
    }

    [data-theme="light"] .blog-card h3,
    [data-theme="light"] .blog-preview h3,
    [data-theme="light"] .blog-card p,
    [data-theme="light"] .blog-preview p {
      color: var(--text) !important;
    }

    /* === LIGHT MODE - INLINE COLOR FIXES === */
    [data-theme="light"] [style*="color:#fff"],
    [data-theme="light"] [style*="color: #fff"] {
      color: var(--text) !important;
    }

    /* === LIGHT MODE - OFFER CARDS === */
    [data-theme="light"] .offer-card {
      background: rgba(255,255,255,.8) !important;
      border-color: rgba(0,0,0,.08) !important;
    }

    [data-theme="light"] .offer-card h3,
    [data-theme="light"] .offer-card p,
    [data-theme="light"] .offer-card li {
      color: var(--text) !important;
    }

    /* === LIGHT MODE - INFO PANEL === */
    [data-theme="light"] .info-panel {
      background: rgba(255,255,255,.8) !important;
      border-color: rgba(0,0,0,.08) !important;
    }

    [data-theme="light"] .info-panel h2,
    [data-theme="light"] .info-panel p,
    [data-theme="light"] .info-panel li,
    [data-theme="light"] .info-panel strong {
      color: var(--text) !important;
    }

    /* === LIGHT MODE - FORM === */
    [data-theme="light"] .contact-form {
      background: rgba(255,255,255,.9) !important;
      border-color: rgba(0,0,0,.08) !important;
    }

    [data-theme="light"] .contact-form label {
      color: var(--text) !important;
    }

    [data-theme="light"] select,
    [data-theme="light"] textarea {
      background: rgba(255,255,255,.9) !important;
      border-color: rgba(0,0,0,.12) !important;
      color: var(--text) !important;
    }

    /* === LIGHT MODE - HERO BADGE === */
    [data-theme="light"] .hero-badge {
      background: rgba(0,0,0,.05) !important;
      border-color: rgba(0,0,0,.1) !important;
      color: var(--text) !important;
    }

    /* === LIGHT MODE - STATS/KPI === */
    [data-theme="light"] .stat-item,
    [data-theme="light"] .stat-value,
    [data-theme="light"] .stat-label {
      color: var(--text) !important;
    }

    /* === LIGHT MODE - LINKS === */
    [data-theme="light"] a:not(.btn) {
      color: var(--primary-700);
    }

    [data-theme="light"] a:not(.btn):hover {
      color: var(--primary-800);
    }

    /* === BLOG CARDS STYLES === */
    .blog-card {
      background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 16px;
      padding: 24px;
      text-decoration: none;
      transition: all .3s;
      display: block;
    }

    .blog-card:hover {
      transform: translateY(-4px);
      border-color: var(--accent-500);
      box-shadow: 0 8px 24px rgba(34,211,238,.15);
    }

    .blog-tag {
      display: inline-block;
      background: linear-gradient(135deg, var(--primary-700), var(--accent-500));
      color: #fff;
      font-size: .7rem;
      font-weight: 700;
      text-transform: uppercase;
      padding: 4px 10px;
      border-radius: 12px;
      margin-bottom: 10px;
    }

    .blog-title {
      color: var(--text);
      font-size: 1.1rem;
      margin: 0 0 8px;
      font-weight: 600;
    }

    .blog-excerpt {
      color: var(--muted);
      font-size: .9rem;
      margin: 0;
    }

    [data-theme="light"] .blog-card {
      background: rgba(255,255,255,.8);
      border-color: rgba(0,0,0,.08);
    }

    [data-theme="light"] .blog-card:hover {
      box-shadow: 0 8px 24px rgba(59,130,246,.15);
    }

    [data-theme="light"] .blog-title {
      color: var(--text);
    }

    [data-theme="light"] .blog-excerpt {
      color: var(--muted);
    }