/* CODE COULEUR TROV : voir le bloc de référence en tête d'assets/css/index.css.
   Une couleur = un rôle (violet = action, or = premium, vert = argent,
   ambre = prudence, rouge = alerte, bleu = data). Jamais de 8e teinte. */
:root{
    --role-action:#7c6cf6;--role-premium:#f0c060;--role-money:#3ce8a8;
    --role-caution:#f5b544;--role-alert:#f56a7f;--role-data:#5aa7ff;
    --bg:#05060a;
    --surface:rgba(255,255,255,.028);
    --surface-2:rgba(255,255,255,.05);
    --border:rgba(255,255,255,.07);
    --border-strong:rgba(255,255,255,.13);
    --text:#eef1f8;
    --muted:#7d8598;
    --muted-2:#565e70;
    --accent:#7c6cf6;
    --accent-2:#a89bff;
    --accent-glow:rgba(124,108,246,.35);
    --gold:#f0c060;
    --green:#3ce8a8;
    --green-dim:rgba(60,232,168,.12);
    --amber:#f5b544;
    --red:#f56a7f;
    --r-lg:20px;--r-md:14px;--r-sm:10px;
    --font:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
    --display:'Space Grotesk','Plus Jakarta Sans',sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  ::selection{background:rgba(124,108,246,.35)}
  ::-webkit-scrollbar{width:10px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:10px;border:3px solid var(--bg)}
  html{scroll-behavior:smooth}
  body{font-family:var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
  .wrap{max-width:1140px;margin:0 auto;padding:0 22px}
  button{font-family:inherit}

  /* ===== NAV ===== */
  .nav{
    position:sticky;top:0;z-index:100;
    background:rgba(5,6,10,.75);backdrop-filter:blur(16px);
    border-bottom:1px solid var(--border);
  }
  .nav-in{display:flex;align-items:center;gap:26px;padding:14px 22px;max-width:1140px;margin:0 auto}
  .logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
  .logo-mark{width:36px;height:36px;border-radius:11px;overflow:hidden;background:transparent;filter:drop-shadow(0 4px 12px var(--accent-glow))}
  /* SVG vectoriel : plus de recadrage (le scale(1.55) servait à rogner le PNG) */
  .logo-mark img{width:100%;height:100%;object-fit:contain;transform:none}
  .logo b{font-family:var(--display);font-size:19px;letter-spacing:-.4px}
  .ai-chip{font-family:var(--display);font-size:9px;font-weight:700;letter-spacing:.8px;padding:2px 6px;border-radius:5px;background:rgba(240,192,96,.14);border:1px solid rgba(240,192,96,.4);color:var(--gold)}
  .nav-links{display:flex;gap:22px;margin-left:10px}
  .nav-links a{color:var(--muted);text-decoration:none;font-size:13.5px;font-weight:500;transition:.2s}
  .nav-links a:hover{color:var(--text)}
  .nav-cta{margin-left:auto;display:flex;gap:10px;align-items:center}
  .btn-ghost{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:9px 16px;border-radius:var(--r-sm);
    background:var(--surface);border:1px solid var(--border);
    color:var(--text);font-size:13px;font-weight:600;cursor:pointer;transition:.2s;text-decoration:none;
  }
  .btn-ghost:hover{border-color:var(--border-strong)}
  .btn-primary{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:11px 20px;border:none;border-radius:var(--r-sm);
    background:linear-gradient(135deg,#8f7ff8,#5b46e8);
    box-shadow:0 0 0 1px rgba(255,255,255,.14) inset, 0 6px 20px var(--accent-glow);
    color:#fff;font-size:13.5px;font-weight:700;cursor:pointer;transition:.2s;text-decoration:none;
  }
  .btn-primary:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(255,255,255,.2) inset, 0 10px 28px var(--accent-glow)}
  .btn-big{padding:15px 30px;font-size:15px;border-radius:13px}

  /* ===== HERO ===== */
  .hero{
    position:relative;text-align:center;padding:76px 22px 50px;overflow:hidden;
  }
  .hero::before{
    content:'';position:absolute;inset:0;z-index:-1;
    background:
      radial-gradient(800px 420px at 50% -10%, rgba(124,108,246,.28), transparent 65%),
      radial-gradient(500px 300px at 85% 20%, rgba(240,192,96,.08), transparent 60%),
      linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
    background-size:auto,auto,48px 48px,48px 48px;
  }
  .hero-badge{
    display:inline-flex;align-items:center;gap:8px;
    font-size:12px;font-weight:600;color:var(--accent-2);
    background:rgba(124,108,246,.12);border:1px solid rgba(124,108,246,.35);
    padding:7px 16px;border-radius:30px;margin-bottom:22px;
  }
  .hero h1{
    font-family:var(--display);font-weight:700;
    font-size:clamp(32px,5.4vw,56px);letter-spacing:-2px;line-height:1.08;
    max-width:820px;margin:0 auto 18px;
  }
  .hero h1 em{
    font-style:normal;
    background:linear-gradient(90deg,var(--accent-2),var(--gold));
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  }
  .hero p{font-size:clamp(14px,1.6vw,17px);color:var(--muted);max-width:640px;margin:0 auto 30px;line-height:1.65}
  .hero p b{color:var(--text)}
  .hero-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
  .hero-proof{font-size:12.5px;color:var(--muted)}
  .hero-proof .stars{color:var(--gold);letter-spacing:2px;margin-right:8px}

  /* Mockup fenêtre */
  .mockup{
    max-width:920px;margin:44px auto 0;
    background:linear-gradient(180deg,#12141d,#0b0d14);
    border:1px solid var(--border-strong);border-radius:18px;
    box-shadow:0 40px 120px rgba(0,0,0,.6), 0 0 60px rgba(124,108,246,.12);
    overflow:hidden;text-align:left;
  }
  .mock-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--border)}
  .mock-bar i{width:10px;height:10px;border-radius:50%;display:inline-block}
  .mock-url{margin-left:10px;flex:1;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:6px 12px;font-size:11px;color:var(--muted-2)}
  .mock-body{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:18px}
  .mock-card{background:var(--surface-2);border:1px solid var(--border);border-radius:14px;overflow:hidden}
  .mock-img{height:92px;position:relative}
  .mock-img img{width:100%;height:100%;object-fit:cover}
  .mock-tag{position:absolute;top:8px;left:8px;font-size:9px;font-weight:700;padding:3px 8px;border-radius:20px;background:rgba(10,40,30,.65);color:var(--green);border:1px solid rgba(60,232,168,.4)}
  .mock-in{padding:11px 13px}
  .mock-name{font-size:11.5px;font-weight:600;margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mock-line{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-bottom:4px}
  .mock-line b{color:var(--text)}
  .mock-margin{display:flex;justify-content:space-between;align-items:center;background:var(--green-dim);border:1px solid rgba(60,232,168,.25);border-radius:9px;padding:7px 10px;margin-top:8px}
  .mock-margin b{font-family:var(--display);font-size:12.5px;color:var(--green)}
  .mock-margin span{font-size:9.5px;font-weight:700;color:var(--green);background:rgba(60,232,168,.15);padding:3px 7px;border-radius:6px}

  /* ===== LOGOS PLATEFORMES ===== */
  .platforms{text-align:center;padding:40px 22px 10px}
  .platforms p{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted-2);font-weight:700;margin-bottom:18px}
  .plat-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
  .plat{
    display:inline-flex;align-items:center;gap:8px;
    padding:9px 18px;border-radius:12px;
    background:var(--surface);border:1px solid var(--border);
    font-size:13px;font-weight:600;color:var(--muted);
  }
  .plat i{width:8px;height:8px;border-radius:3px;display:inline-block}

  /* ===== SECTIONS FEATURES ===== */
  section{padding:64px 0}
  .sec-head{text-align:center;max-width:640px;margin:0 auto 44px}
  .sec-head .kicker{font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:var(--accent-2);font-weight:700;margin-bottom:12px}
  .sec-head h2{font-family:var(--display);font-size:clamp(24px,3.4vw,36px);font-weight:700;letter-spacing:-1px;line-height:1.15}
  .sec-head h2 em{font-style:normal;background:linear-gradient(90deg,var(--accent-2),var(--gold));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .sec-head p{font-size:14.5px;color:var(--muted);margin-top:12px;line-height:1.65}

  .feature{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin-bottom:70px}
  .feature.rev .f-visual{order:2}
  .f-text .kicker{font-size:11px;letter-spacing:1.8px;text-transform:uppercase;font-weight:700;margin-bottom:12px}
  .f-text h3{font-family:var(--display);font-size:clamp(21px,2.6vw,28px);font-weight:700;letter-spacing:-.7px;margin-bottom:14px;line-height:1.2}
  .f-text p{font-size:14px;color:var(--muted);line-height:1.7;margin-bottom:18px}
  .f-list{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
  .f-list li{display:flex;gap:10px;font-size:13.5px;color:var(--muted);line-height:1.5}
  .f-list li b{color:var(--text)}
  .f-list .ok{color:var(--green);font-weight:700;flex-shrink:0}
  .f-visual{
    background:linear-gradient(180deg,var(--surface-2),var(--surface));
    border:1px solid var(--border);border-radius:var(--r-lg);
    padding:22px;position:relative;overflow:hidden;
  }
  .f-visual::before{content:'';position:absolute;top:-40px;right:-40px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,var(--accent-glow),transparent 70%);opacity:.5}
  .demo-row{
    display:flex;justify-content:space-between;align-items:center;gap:10px;
    background:var(--surface);border:1px solid var(--border);border-radius:12px;
    padding:12px 15px;margin-bottom:10px;font-size:12.5px;position:relative;
  }
  .demo-row .n{display:flex;align-items:center;gap:10px;color:var(--muted)}
  .demo-row .chip{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:10px;font-weight:800;color:#fff;flex-shrink:0}
  .demo-row b{font-family:var(--display)}
  .demo-verdict{
    font-family:var(--display);font-weight:700;font-size:14px;
    background:var(--green-dim);border:1px solid rgba(60,232,168,.35);color:var(--green);
    border-radius:12px;padding:13px 16px;text-align:center;margin-bottom:10px;
  }
  .demo-note{font-size:11px;color:var(--muted-2);text-align:center}
  .wa-pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#4be381;background:rgba(37,211,102,.12);border:1px solid rgba(37,211,102,.35);padding:6px 12px;border-radius:8px}

  /* ===== BENTO ===== */
  .bento{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .b-card{
    background:linear-gradient(180deg,var(--surface-2),var(--surface));
    border:1px solid var(--border);border-radius:var(--r-lg);
    padding:24px 22px;transition:.25s;
  }
  .b-card:hover{transform:translateY(-3px);border-color:rgba(124,108,246,.4)}
  .b-ico{font-size:24px;margin-bottom:13px}
  .b-card h4{font-family:var(--display);font-size:15.5px;font-weight:700;margin-bottom:7px}
  .b-card p{font-size:12.5px;color:var(--muted);line-height:1.65}

  /* ===== TÉMOIGNAGES ===== */
  .testi{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .t-card{
    background:linear-gradient(180deg,var(--surface-2),var(--surface));
    border:1px solid var(--border);border-radius:var(--r-lg);
    padding:24px 22px;
  }
  .t-stars{color:var(--gold);letter-spacing:2px;font-size:13px;margin-bottom:13px}
  .t-card p{font-size:13px;color:var(--muted);line-height:1.7;margin-bottom:17px}
  .t-card p b{color:var(--text)}
  .t-who{display:flex;align-items:center;gap:11px}
  .t-av{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0}
  .t-name{font-size:13px;font-weight:700}
  .t-role{font-size:11px;color:var(--muted)}

  /* ===== PRICING ===== */
  .pr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch}
  .pr-card{
    background:linear-gradient(180deg,var(--surface-2),var(--surface));
    border:1px solid var(--border);border-radius:var(--r-lg);
    padding:26px 22px;display:flex;flex-direction:column;position:relative;transition:.25s;
  }
  .pr-card:hover{transform:translateY(-3px)}
  .pr-card.featured{background:linear-gradient(180deg,rgba(124,108,246,.14),rgba(124,108,246,.03));border-color:rgba(124,108,246,.45);box-shadow:0 0 40px rgba(124,108,246,.12)}
  .pr-card.gold{background:linear-gradient(180deg,rgba(240,192,96,.1),rgba(240,192,96,.02));border-color:rgba(240,192,96,.35)}
  .pr-pop{position:absolute;top:-11px;left:50%;transform:translateX(-50%);font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;background:linear-gradient(135deg,#8f7ff8,#5b46e8);color:#fff;padding:5px 14px;border-radius:20px;white-space:nowrap;box-shadow:0 4px 14px var(--accent-glow)}
  .pr-name{font-family:var(--display);font-size:15px;font-weight:700;margin-bottom:4px}
  .pr-desc{font-size:11.5px;color:var(--muted);margin-bottom:16px;line-height:1.5}
  .pr-price{font-family:var(--display);font-size:34px;font-weight:700;letter-spacing:-1.5px}
  .pr-price small{font-size:13px;color:var(--muted);font-weight:500;letter-spacing:0}
  .pr-per{font-size:11px;color:var(--muted-2);margin:2px 0 18px}
  .pr-feats{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:22px;flex:1}
  .pr-feats li{font-size:12.5px;color:var(--muted);display:flex;gap:9px;line-height:1.45}
  .pr-feats li b{color:var(--text)}
  .pr-feats .ok{color:var(--green);font-weight:700;flex-shrink:0}
  .pr-feats .no{color:var(--muted-2);flex-shrink:0}
  .pr-feats li.off{opacity:.45}
  .btn-gold{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    width:100%;padding:12px 16px;border:none;border-radius:var(--r-sm);
    background:linear-gradient(135deg,#f0c060,#d99b2b);
    box-shadow:0 0 0 1px rgba(255,255,255,.2) inset, 0 6px 20px rgba(240,192,96,.3);
    color:#1a1205;font-size:13px;font-weight:700;cursor:pointer;transition:.2s;text-decoration:none;
  }
  .btn-gold:hover{transform:translateY(-1px)}
  .pr-note{text-align:center;font-size:11.5px;color:var(--muted-2);margin-top:18px}

  /* ===== FAQ ===== */
  .faq{max-width:720px;margin:0 auto}
  details{
    background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
    padding:16px 20px;margin-bottom:10px;
  }
  details summary{font-size:14px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px}
  details summary::-webkit-details-marker{display:none}
  details summary::after{content:'+';font-family:var(--display);font-size:19px;color:var(--accent-2);flex-shrink:0}
  details[open] summary::after{content:'–'}
  details p{font-size:13px;color:var(--muted);line-height:1.7;margin-top:12px}

  /* ===== BANDEAU ACADÉMIE ===== */
  .academy-band{
    background:linear-gradient(135deg,rgba(240,192,96,.14),rgba(124,108,246,.1));
    border:1px solid rgba(240,192,96,.35);border-radius:24px;
    padding:44px 40px;display:flex;align-items:center;gap:30px;flex-wrap:wrap;
    position:relative;overflow:hidden;
  }
  .academy-band::before{content:'';position:absolute;top:-60px;right:-60px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(240,192,96,.25),transparent 70%)}
  .ab-text{flex:1;min-width:260px}
  .ab-text .kicker{color:var(--gold);font-size:11px;letter-spacing:1.8px;text-transform:uppercase;font-weight:700;margin-bottom:10px}
  .ab-text h3{font-family:var(--display);font-size:clamp(20px,2.6vw,28px);font-weight:700;letter-spacing:-.7px;margin-bottom:10px}
  .ab-text p{font-size:13.5px;color:var(--muted);line-height:1.65;max-width:520px}

  /* ===== CTA FINAL + FOOTER ===== */
  .final-cta{text-align:center;padding:80px 22px}
  .final-cta h2{font-family:var(--display);font-size:clamp(26px,4vw,42px);font-weight:700;letter-spacing:-1.4px;margin-bottom:14px}
  .final-cta h2 em{font-style:normal;background:linear-gradient(90deg,var(--accent-2),var(--gold));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .final-cta p{color:var(--muted);font-size:15px;margin-bottom:28px}
  .footer{border-top:1px solid var(--border);padding:36px 22px;text-align:center}
  .footer .logo{justify-content:center;margin-bottom:14px}
  .foot-links{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
  .foot-links a{color:var(--muted);font-size:12.5px;text-decoration:none}
  .foot-links a:hover{color:var(--text)}
  .footer small{font-size:11px;color:var(--muted-2)}

  @media(max-width:900px){
    .nav-links{display:none}
    .feature{grid-template-columns:1fr;gap:26px}
    .feature.rev .f-visual{order:0}
    .bento,.testi,.pr-grid{grid-template-columns:1fr}
    .mock-body{grid-template-columns:1fr}
    .mock-card:nth-child(n+2){display:none}
    .academy-band{padding:30px 22px}
  }
  /* ============================================================
     POLISH PREMIUM (2026-07) - couche d'affinage landing.
     Hero avec halo maillé + grain, cartes vivantes, ombres teintées,
     clic physique, focus clavier. GPU only (transform/opacity).
     ============================================================ */

  html{scroll-behavior:smooth}
  ::selection{background:rgba(124,108,246,.35);color:var(--text)}

  /* Typo : titres denses et équilibrés, prix tabulaires */
  .hero h1{letter-spacing:-.035em;text-wrap:balance}
  h2{text-wrap:balance;letter-spacing:-.02em}
  .pr-price{font-variant-numeric:tabular-nums}

  /* Hero : halo maillé (radial x2) au lieu d'un dégradé plat */
  .hero{position:relative}
  .hero::after{
    content:"";position:absolute;inset:-10% -20% auto;height:130%;z-index:-1;pointer-events:none;
    background:
      radial-gradient(720px 420px at 28% 18%, rgba(124,108,246,.16), transparent 62%),
      radial-gradient(560px 380px at 78% 8%, rgba(240,192,96,.07), transparent 58%),
      radial-gradient(420px 320px at 55% 65%, rgba(124,108,246,.07), transparent 60%);
  }

  /* Cartes (features, bento, témoignages, pricing) : relief + survol */
  .feature,.bento > *,.t-card,.pr-card,.mock-card{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 8px 24px -14px rgba(10,7,30,.6);
  }
  .pr-card,.t-card,.feature{
    transition:transform .25s cubic-bezier(.2,.7,.3,1),border-color .25s,box-shadow .25s;
  }
  .pr-card:hover,.t-card:hover{
    transform:translateY(-4px);border-color:var(--border-strong);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05),
      0 22px 44px -18px rgba(124,108,246,.26),
      0 14px 30px -16px rgba(10,7,30,.65);
  }
  /* L'offre recommandée se distingue par la couleur, pas juste la taille */
  .pr-card.featured{
    border-color:rgba(124,108,246,.55);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),
      0 0 0 1px rgba(124,108,246,.25),
      0 24px 48px -18px rgba(124,108,246,.35);
  }

  /* Boutons : respiration au survol, clic physique (les enfants de .nav-cta
     ont déjà leurs états - le conteneur ne bouge pas, sinon effet groupé) */
  .btn-primary,.btn-ghost,.btn-gold,.btn-big{
    transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s,background .18s,border-color .18s;
  }
  .btn-primary:hover,.btn-big:hover{transform:translateY(-1px)}
  .btn-primary:active,.btn-ghost:active,.btn-gold:active,.btn-big:active{transform:scale(.97)}

  /* Focus clavier visible (l'outline suit le rayon de l'élément tout seul) */
  :is(a,button,input,summary):focus-visible{outline:2px solid var(--accent);outline-offset:2px}

  /* Grain : casse la platitude numérique */
  body::after{
    content:"";position:fixed;inset:0;z-index:2147483000;pointer-events:none;opacity:.028;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* Scrollbar assortie */
  ::-webkit-scrollbar{width:10px}
  ::-webkit-scrollbar-thumb{background:rgba(124,108,246,.25);border-radius:8px;border:2px solid transparent;background-clip:content-box}

  @media (prefers-reduced-motion: reduce){
    .pr-card,.testi,.feature,.btn-primary,.btn-ghost,.btn-gold,.btn-big,.nav-cta{transition:none}
    html{scroll-behavior:auto}
  }

  /* ============================================================
     PREMIUM V2 (2026-07-22) - la couche "produit fini".
     Bordures dégradées (padding-box/border-box), nav en verre saturé,
     balayage lumineux sur le CTA, apparition au scroll (.rv posée par
     le JS de fin de page - sans JS tout reste visible). GPU only.
     ============================================================ */

  /* Nav : verre plus riche + liseré dégradé en bas */
  .nav{
    background:rgba(5,6,10,.62);
    backdrop-filter:blur(18px) saturate(160%);
    -webkit-backdrop-filter:blur(18px) saturate(160%);
    border-bottom:1px solid transparent;
    background-clip:padding-box;
  }
  .nav::after{
    content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
    background:linear-gradient(90deg,transparent,rgba(124,108,246,.5) 30%,rgba(240,192,96,.35) 70%,transparent);
    pointer-events:none;
  }
  .nav{position:sticky}

  /* Hero : titre plus grand, badge à bordure dégradée + point vivant */
  .hero h1{font-size:clamp(34px,5.8vw,62px)}
  .hero-badge{
    border:1px solid transparent;
    background:
      linear-gradient(rgba(13,11,26,.92),rgba(13,11,26,.92)) padding-box,
      linear-gradient(120deg,rgba(124,108,246,.75),rgba(240,192,96,.5)) border-box;
    box-shadow:0 4px 24px -8px var(--accent-glow);
  }

  /* CTA principal : balayage lumineux au survol */
  .btn-primary{position:relative;overflow:hidden}
  .btn-primary::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.28) 50%,transparent 58%);
    transform:translateX(-130%);transition:transform .55s ease;
  }
  .btn-primary:hover::after{transform:translateX(130%)}

  /* Mockup : anneau dégradé qui accroche la lumière */
  .mockup{
    border:1px solid transparent;
    background:
      linear-gradient(180deg,#12141d,#0b0d14) padding-box,
      linear-gradient(180deg,rgba(124,108,246,.6),rgba(124,108,246,.1) 45%,rgba(255,255,255,.07)) border-box;
  }

  /* Chips plateformes : réactives */
  .plat{transition:transform .2s cubic-bezier(.2,.7,.3,1),border-color .2s,color .2s}
  .plat:hover{transform:translateY(-2px);border-color:var(--border-strong);color:var(--text)}

  /* Visuels de features : liseré dégradé discret */
  .f-visual{
    border:1px solid transparent;
    background:
      linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.028)) padding-box,
      linear-gradient(160deg,rgba(124,108,246,.4),rgba(255,255,255,.07) 55%,rgba(255,255,255,.05)) border-box;
  }

  /* Offre Pro : bordure dégradée violette -> or (la carte "waouh") */
  .pr-card.featured{
    border:1px solid transparent;
    background:
      linear-gradient(180deg,rgba(30,26,58,.95),rgba(14,12,26,.95)) padding-box,
      linear-gradient(160deg,rgba(124,108,246,.85),rgba(240,192,96,.4) 60%,rgba(124,108,246,.3)) border-box;
  }
  .pr-card.gold{
    border:1px solid transparent;
    background:
      linear-gradient(180deg,rgba(38,30,14,.6),rgba(16,13,6,.85)) padding-box,
      linear-gradient(160deg,rgba(240,192,96,.65),rgba(240,192,96,.15) 60%,rgba(240,192,96,.3)) border-box;
  }

  /* Témoignages : anneau lumineux sur les avatars */
  .t-av{box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px rgba(124,108,246,.45)}

  /* FAQ : états survol / ouvert marqués */
  details{transition:border-color .25s,background .25s}
  details:hover{border-color:var(--border-strong)}
  details[open]{border-color:rgba(124,108,246,.4);background:rgba(124,108,246,.05)}

  /* Bandeau Académie : anneau doré dégradé */
  .academy-band{
    border:1px solid transparent;
    background:
      linear-gradient(135deg,rgba(43,34,16,.85),rgba(22,18,30,.9)) padding-box,
      linear-gradient(135deg,rgba(240,192,96,.7),rgba(124,108,246,.35)) border-box;
  }

  /* Footer : liseré dégradé en tête */
  .footer{border-top:1px solid transparent;position:relative}
  .footer::before{
    content:"";position:absolute;left:0;right:0;top:-1px;height:1px;
    background:linear-gradient(90deg,transparent,rgba(124,108,246,.4) 35%,rgba(240,192,96,.3) 65%,transparent);
  }

  /* Apparition au scroll (classe posée par le JS - inerte sans JS) */
  @media (prefers-reduced-motion: no-preference){
    .rv{opacity:0;transform:translateY(16px);transition:opacity .55s cubic-bezier(.2,.7,.3,1),transform .55s cubic-bezier(.2,.7,.3,1)}
    .rv.in{opacity:1;transform:none}
  }

  /* ============================================================
     FINITIONS AUDIT (2026-07-22) - application d'AUDIT-DESIGN.md :
     cascade orchestrée, entrée du hero, ombres teintées, lien nav
     actif, point vivant, détails typographiques. GPU only.
     ============================================================ */

  /* Cascade des grilles au scroll : décalage 70 ms par position */
  @media (prefers-reduced-motion: no-preference){
    .rv{transition-delay:calc(var(--d,0)*70ms)}
    .bento>*:nth-child(2),.testi>*:nth-child(2),.pr-grid>*:nth-child(2){--d:1}
    .bento>*:nth-child(3),.testi>*:nth-child(3),.pr-grid>*:nth-child(3){--d:2}
    .bento>*:nth-child(4){--d:3}
    .bento>*:nth-child(5){--d:4}
    .bento>*:nth-child(6){--d:5}
    /* Entrée du hero : badge -> titre -> texte -> CTA -> preuve -> mockup */
    @keyframes rise-hero{from{opacity:0;transform:translateY(14px)}}
    .hero-badge,.hero h1,.hero p,.hero-ctas,.hero-proof,.mockup{animation:rise-hero .6s cubic-bezier(.2,.7,.3,1) backwards}
    .hero h1{animation-delay:.08s}
    .hero p{animation-delay:.16s}
    .hero-ctas{animation-delay:.24s}
    .hero-proof{animation-delay:.3s}
    .mockup{animation-delay:.4s}
  }

  /* Mockup : l'ombre la plus visible de la page, teintée violet (fini le noir pur) */
  .mockup{box-shadow:0 40px 120px rgba(16,10,42,.65),0 0 60px rgba(124,108,246,.14)}

  /* Icônes bento : assises dans une tuile teintée (fini l'emoji nu) */
  .b-ico{
    width:42px;height:42px;display:grid;place-items:center;font-size:20px;
    margin-bottom:13px;border-radius:12px;background:rgba(124,108,246,.1);
    border:1px solid rgba(124,108,246,.22);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  }

  /* Lien actif de la nav sticky (classe posée par le JS au scroll) */
  .nav-links a{position:relative}
  .nav-links a.active{color:var(--text)}
  .nav-links a.active::after{
    content:'';position:absolute;left:50%;bottom:-6px;width:4px;height:4px;
    border-radius:50%;background:var(--accent-2);transform:translateX(-50%);
  }

  /* Chiffres tabulaires partout : l'argument central de la page, c'est le chiffre */
  .mock-line b,.mock-margin b,.demo-row b,.demo-verdict,.hero-proof b{font-variant-numeric:tabular-nums}

  /* Badge héro : point vivant (l'emoji ⚡ statique est retiré du HTML) */
  .hero-badge::before{
    content:'';width:6px;height:6px;border-radius:50%;background:var(--green);
    box-shadow:0 0 10px rgba(60,232,168,.7);animation:pulse-dot 2.4s ease-in-out infinite;
  }
  @keyframes pulse-dot{50%{opacity:.45;transform:scale(.8)}}

  /* FAQ : le + tourne en croix (au lieu du swap sec +/-) */
  details summary::after{transition:transform .25s cubic-bezier(.2,.7,.3,1)}
  details[open] summary::after{content:'+';transform:rotate(45deg)}

  /* Features alternées : le glow décoratif suit le sens de lecture */
  .feature.rev .f-visual::before{right:auto;left:-40px}

  /* Skip-link clavier : invisible jusqu'au focus (accessibilité) */
  .skip-link{
    position:fixed;top:-48px;left:16px;z-index:2147483001;
    padding:10px 16px;border-radius:10px;font-size:13px;font-weight:600;
    background:var(--accent);color:#fff;text-decoration:none;transition:top .2s;
  }
  .skip-link:focus{top:12px}

  /* Paragraphes : pas de mot orphelin en fin de ligne */
  .hero p,.feature p,.b-card p,details p,.t-quote{text-wrap:pretty}

  /* ============================================================
     COUCHE SOFT-SKILL (2026-07-22) - hero impactant + haptique.
     Orbe CTA "button-in-button", entrée blur-up, mockup en
     double-bezel (plaque de verre posée dans son plateau).
     ============================================================ */

  /* CTA : la flèche vit dans son propre cercle, tension cinétique au survol */
  .cta-orb{
    display:inline-grid;place-items:center;width:26px;height:26px;margin-left:4px;
    border-radius:50%;background:rgba(255,255,255,.16);font-size:13px;line-height:1;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
    transition:transform .35s cubic-bezier(.32,.72,0,1);
  }
  .btn-primary:hover .cta-orb{transform:translate(2px,-1px) scale(1.06)}

  /* Entrée du hero et des reveals : opacity + transform UNIQUEMENT.
     (Le blur animé a été RETIRÉ : filter sur des dizaines d'éléments
     pendant le scroll = rasterisation GPU massive = page qui rame.) */
  @media (prefers-reduced-motion: no-preference){
    @keyframes rise-hero{from{opacity:0;transform:translateY(14px)}}
    .rv,.rv.in{transition:opacity .55s cubic-bezier(.32,.72,0,1),transform .55s cubic-bezier(.32,.72,0,1)}
    .rv{transition-delay:calc(var(--d,0)*70ms)} /* le shorthand ci-dessus reset le delay : on le repose */
  }

  /* Mockup : double-bezel - un plateau sombre + liseré concentrique autour
     de l'anneau dégradé existant (rendu "hardware usiné") */
  .mockup{
    box-shadow:
      0 0 0 6px rgba(255,255,255,.025),
      0 0 0 7px rgba(255,255,255,.06),
      0 40px 120px rgba(16,10,42,.65),
      0 0 60px rgba(124,108,246,.14);
  }

  /* ============================================================
     SIGNATURE TROV (2026-07-22 soir) - l'identité visuelle unique.
     L'idée de marque : Trov est un AGENT QUI SCANNE les plateformes
     -> motif radar (balayage lent + anneaux) dans le hero, nav en
     îlot flottant, boutons pilule, titres à mot dégradé. GPU only.
     ============================================================ */

  /* --- Nav : îlot flottant détaché (fini le bandeau collé bord à bord) --- */
  .nav{
    background:transparent;
    backdrop-filter:none;-webkit-backdrop-filter:none;
    border-bottom:0;
    padding:14px 16px 0;
  }
  .nav::after{display:none}
  .nav-in{
    max-width:1040px;
    padding:8px 10px 8px 16px;
    border-radius:999px;
    background:rgba(8,9,15,.66);
    backdrop-filter:blur(18px) saturate(160%);
    -webkit-backdrop-filter:blur(18px) saturate(160%);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 14px 44px -14px rgba(10,7,30,.65);
  }
  .nav-links a.active::after{bottom:-7px}

  /* --- Système de formes : les BOUTONS sont des pilules (règle unique :
     boutons = pilule, cartes = 16-24px, champs = 8-12px) --- */
  .btn-primary,.btn-ghost,.btn-gold,.btn-big{border-radius:999px}
  .btn-big{padding:15px 28px 15px 30px}

  /* --- Anneaux de scan STATIQUES derrière le hero (le balayage animé
     repeignait toute la zone à chaque frame -> retiré, ça ramait) --- */
  .hero::after{
    background:
      repeating-radial-gradient(circle at 50% 30%, transparent 0 88px, rgba(124,108,246,.04) 88px 89px),
      radial-gradient(720px 420px at 28% 18%, rgba(124,108,246,.16), transparent 62%),
      radial-gradient(560px 380px at 78% 8%, rgba(240,192,96,.07), transparent 58%),
      radial-gradient(420px 320px at 55% 65%, rgba(124,108,246,.07), transparent 60%);
  }

  /* --- Titres : le mot en <em> porte le dégradé violet -> or de la marque --- */
  .hero h1 em,h2 em{
    background:linear-gradient(92deg,var(--accent-2),#f0c060 130%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }

  /* --- Témoignages : avatars squircle (fini le cercle générique) --- */
  .t-av{border-radius:14px}
  .t-av{box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px rgba(124,108,246,.45)}

  @media (max-width:900px){
    .nav{padding:10px 10px 0}
    .nav-in{padding:8px 10px}
  }
  @media (prefers-reduced-motion: reduce){
    .hero::after{animation:none}
  }

  @media (prefers-reduced-motion: reduce){
    .hero-badge::before{animation:none}
    .hero-badge,.hero h1,.hero p,.hero-ctas,.hero-proof,.mockup{animation:none}
  }

  /* ============================================================
     V3 LOOK (2026-07-22 nuit) - hero MASSIF + profondeur visible.
     ============================================================ */

  /* Le titre prend toute sa place (3-5 mots par segment = on peut monter) */
  .hero{padding:88px 22px 56px}
  .hero h1{font-size:clamp(38px,5.4vw,66px);line-height:1.04;letter-spacing:-.04em}
  .hero p{font-size:16.5px;max-width:640px;margin-left:auto;margin-right:auto}
  .hero-badge{font-size:12.5px;padding:8px 18px}

  /* Le mockup est LA preuve : halo de marque bien visible dessous */
  .mockup{
    box-shadow:
      0 0 0 6px rgba(255,255,255,.025),
      0 0 0 7px rgba(255,255,255,.06),
      0 50px 140px rgba(16,10,42,.7),
      0 0 110px rgba(124,108,246,.22);
  }

  /* Titres de section plus présents */
  .sec-head h2,h2{font-size:clamp(26px,3.6vw,40px)}

  /* Fond global : la nappe aurora continue sous les sections (fini le noir plat).
     SANS background-attachment:fixed : ça repeignait tout le fond à chaque
     frame de scroll (cause n°1 de la page qui rame sur Chrome/Windows). */
  body{
    background:
      radial-gradient(1000px 600px at -10% 30%, rgba(124,108,246,.07), transparent 60%),
      radial-gradient(900px 560px at 110% 62%, rgba(240,192,96,.05), transparent 55%),
      var(--bg);
  }