:root{
    --noir:#07070b; --noir2:#0d0d14; --blanc:#f4f2ec;
    --accent:#9d7bff; --accent2:#7a5cff;
    --gris:#8b8b96;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    background:var(--noir); color:var(--blanc);
    font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
    overflow-x:hidden; line-height:1.5;
  }
  ::selection{background:var(--accent);color:var(--noir)}

  /* ---------- NAV ---------- */
  nav{
    position:fixed; top:0; left:0; right:0; z-index:100;
    display:flex; justify-content:space-between; align-items:center;
    padding:22px 48px; mix-blend-mode:difference;
  }
  .logo{font-weight:900; font-size:1.5rem; letter-spacing:-.03em}
  .logo span{color:var(--accent); mix-blend-mode:normal}
  .nav-links{display:flex; gap:34px; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase}
  .nav-links a{color:var(--blanc); text-decoration:none; opacity:.75; transition:opacity .25s}
  .nav-links a:hover{opacity:1}
  .cta-nav{
    border:1px solid var(--blanc); border-radius:99px; padding:10px 22px;
    font-size:.8rem; text-transform:uppercase; letter-spacing:.1em;
    color:var(--blanc); text-decoration:none; transition:.3s;
  }
  .cta-nav:hover{background:var(--blanc); color:var(--noir)}

  /* ---------- HERO ---------- */
  .hero{
    min-height:100vh; display:flex; flex-direction:column; justify-content:center;
    padding:0 48px; position:relative; overflow:hidden;
  }
  #bg{position:absolute; inset:0; z-index:0}
  .halo{
    position:absolute; width:70vw; height:70vw; border-radius:50%;
    background:radial-gradient(circle, rgba(122,92,255,.22), transparent 60%);
    top:-20vw; right:-20vw; filter:blur(40px); z-index:0;
    animation:derive 14s ease-in-out infinite alternate;
  }
  .halo2{
    position:absolute; width:50vw; height:50vw; border-radius:50%;
    background:radial-gradient(circle, rgba(244,242,236,.07), transparent 60%);
    bottom:-15vw; left:-10vw; filter:blur(40px); z-index:0;
    animation:derive 18s ease-in-out infinite alternate-reverse;
  }
  @keyframes derive{from{transform:translate(0,0) scale(1)}to{transform:translate(-6vw,4vw) scale(1.15)}}
  .hero-inner{position:relative; z-index:2; max-width:1400px}
  .surtitre{
    font-size:.85rem; text-transform:uppercase; letter-spacing:.35em;
    color:var(--accent); margin-bottom:28px; opacity:0;
    animation:montee .9s .2s cubic-bezier(.2,.7,.2,1) forwards;
  }
  h1{
    font-size:clamp(3rem, 8.5vw, 8.2rem); font-weight:900; line-height:.98;
    letter-spacing:-.04em; text-wrap:balance;
  }
  h1 .ligne{display:block; overflow:hidden}
  h1 .ligne span{display:block; transform:translateY(110%); animation:montee 1s cubic-bezier(.2,.7,.2,1) forwards}
  h1 .ligne:nth-child(1) span{animation-delay:.35s}
  h1 .ligne:nth-child(2) span{animation-delay:.5s}
  h1 .ligne:nth-child(3) span{animation-delay:.65s}
  .accent{color:var(--accent)}
  .contour{
    color:transparent; -webkit-text-stroke:2px var(--blanc);
  }
  @keyframes montee{to{transform:translateY(0); opacity:1}}
  .hero-bas{
    display:flex; justify-content:space-between; align-items:flex-end;
    margin-top:64px; gap:40px; flex-wrap:wrap;
    opacity:0; animation:fondu 1s 1.1s forwards;
  }
  @keyframes fondu{to{opacity:1}}
  .hero-pitch{max-width:460px; color:var(--gris); font-size:1.05rem}
  .cta-hero{
    display:inline-flex; align-items:center; gap:14px;
    background:var(--accent); color:#0a0714; text-decoration:none;
    padding:20px 38px; border-radius:99px; font-weight:800; font-size:1rem;
    transition:transform .3s, box-shadow .3s;
  }
  .cta-hero:hover{transform:translateY(-3px); box-shadow:0 12px 40px rgba(157,123,255,.4)}
  .scroll-hint{
    position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
    font-size:.75rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gris);
    animation:pulse 2s infinite;
  }
  @keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}

  /* ---------- BANDEAU DEFILANT ---------- */
  .marquee{
    border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08);
    overflow:hidden; padding:26px 0; white-space:nowrap; background:var(--noir2);
  }
  .marquee-inner{display:inline-block; animation:defile 28s linear infinite; font-size:1.4rem; font-weight:700; letter-spacing:-.01em}
  .marquee-inner em{font-style:normal; color:var(--gris); margin:0 24px; font-weight:300}
  @keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* ---------- SECTIONS COMMUNES ---------- */
  section{padding:130px 48px; position:relative}
  .etiquette{
    font-size:.8rem; text-transform:uppercase; letter-spacing:.3em; color:var(--accent);
    display:block; margin-bottom:22px;
  }
  h2{
    font-size:clamp(2.2rem, 5vw, 4.6rem); font-weight:900; letter-spacing:-.03em;
    line-height:1.02; max-width:1000px; text-wrap:balance;
  }
  .section-intro{max-width:620px; color:var(--gris); margin-top:26px; font-size:1.08rem}
  .etapes{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:70px}
  .etape{
    border:1px solid rgba(255,255,255,.1); border-radius:24px; padding:42px 36px;
    background:linear-gradient(180deg, rgba(255,255,255,.035), transparent 70%);
    position:relative; overflow:hidden; transition:transform .35s, border-color .35s;
  }
  .etape:hover{transform:translateY(-6px); border-color:var(--accent)}
  .etape::after{content:""; position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg, var(--accent), transparent); opacity:0; transition:.35s}
  .etape:hover::after{opacity:1}
  .etape .n{font-size:.8rem; color:var(--accent); letter-spacing:.3em}
  .etape h3{font-size:1.55rem; font-weight:800; letter-spacing:-.02em; margin:16px 0 12px}
  .etape p{color:var(--gris); font-size:.96rem}
  @media(max-width:900px){.etapes{grid-template-columns:1fr}}
  .js .reveal{opacity:0; transform:translateY(48px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1)}
  .js .reveal.vu{opacity:1; transform:none}

  /* ---------- PREUVES ---------- */
  .preuves{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:2px; margin-top:80px; background:rgba(255,255,255,.08)}
  .preuve{background:var(--noir); padding:44px 36px}
  .preuve b{font-size:clamp(2.6rem,4.5vw,4rem); font-weight:900; letter-spacing:-.03em; display:block; color:var(--accent)}
  .preuve p{color:var(--gris); margin-top:10px; font-size:.95rem}

  /* ---------- PILIERS (grille de cartes) ---------- */
  .piliers{
    margin-top:70px; display:grid; gap:20px;
    grid-template-columns:repeat(auto-fit, minmax(290px, 1fr));
  }
  .pilier{
    border:1px solid rgba(255,255,255,.1); border-radius:24px; padding:34px 30px;
    background:linear-gradient(180deg, rgba(255,255,255,.035), transparent 70%);
    position:relative; overflow:hidden; cursor:pointer;
    transition:transform .35s, border-color .35s;
    display:flex; flex-direction:column; gap:12px;
  }
  .pilier:hover{transform:translateY(-6px); border-color:var(--accent)}
  .pilier::after{content:""; position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg, var(--accent), transparent); opacity:0; transition:.35s}
  .pilier:hover::after{opacity:1}
  .pilier .num{font-size:.8rem; color:var(--accent); letter-spacing:.3em}
  .pilier h3{font-size:1.35rem; font-weight:800; letter-spacing:-.02em; line-height:1.15}
  .pilier p{color:var(--gris); font-size:.93rem; margin:0}
  .pilier .fleche{margin-top:auto; padding-top:6px; font-size:1.2rem; color:var(--accent); opacity:0; transition:.3s; transform:translateX(-8px)}
  .pilier:hover .fleche{opacity:1; transform:none}

  /* ---------- IA DEMO ---------- */
  .ia-section{background:var(--noir2); border-radius:40px; margin:0 24px}
  .ia-grid{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; margin-top:60px}
  .chat{
    background:var(--noir); border:1px solid rgba(255,255,255,.12); border-radius:24px;
    padding:28px; box-shadow:0 30px 80px rgba(0,0,0,.5);
  }
  .chat-head{display:flex; align-items:center; gap:12px; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:18px}
  .pastille{width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--accent); animation:pulse 2s infinite}
  .chat-head b{font-size:.95rem}
  .chat-head span{font-size:.75rem; color:var(--gris); margin-left:auto}
  .bulle{max-width:85%; padding:14px 18px; border-radius:18px; margin-bottom:12px; font-size:.92rem}
  .js .bulle{opacity:0; transform:translateY(12px); transition:.5s}
  .js .bulle.vu{opacity:1; transform:none}
  .bulle.ia{background:rgba(122,92,255,.16); border:1px solid rgba(122,92,255,.3)}
  .bulle.humain{background:rgba(255,255,255,.07); margin-left:auto}
  .ia-texte p{color:var(--gris); font-size:1.05rem; margin-top:24px; max-width:480px}
  .ia-points{margin-top:34px; display:flex; flex-direction:column; gap:16px}
  .ia-point{display:flex; gap:14px; align-items:baseline; font-size:1rem}
  .ia-point::before{content:"→"; color:var(--accent); font-weight:800}

  /* ---------- EXPERTISES ---------- */
  .expertises{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:70px}
  .carte-exp{
    border:1px solid rgba(255,255,255,.12); border-radius:28px; padding:52px 44px;
    position:relative; overflow:hidden; min-height:340px; display:flex; flex-direction:column; justify-content:flex-end;
    transition:transform .4s, border-color .4s;
  }
  .carte-exp:hover{transform:translateY(-6px); border-color:var(--accent)}
  .carte-exp::before{
    content:""; position:absolute; inset:0;
    background:radial-gradient(circle at 80% 10%, rgba(122,92,255,.25), transparent 55%);
  }
  .carte-exp:nth-child(2)::before{background:radial-gradient(circle at 20% 10%, rgba(244,242,236,.10), transparent 55%)}
  .carte-exp h3{font-size:1.9rem; font-weight:900; letter-spacing:-.02em; position:relative}
  .carte-exp p{color:var(--gris); margin-top:14px; position:relative; font-size:.98rem}

  /* ---------- CTA FINAL ---------- */
  .final{min-height:80vh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center}
  .final h2{font-size:clamp(2.8rem,7vw,6.5rem)}
  .final .cta-hero{margin-top:48px}
  footer{
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px;
    padding:36px 48px; border-top:1px solid rgba(255,255,255,.08); color:var(--gris); font-size:.85rem;
  }
  @media(max-width:900px){
    nav{padding:18px 24px} .nav-links{display:none}
    section{padding:90px 24px}
    .ia-grid,.expertises{grid-template-columns:1fr}
    .pilier{grid-template-columns:40px 1fr; grid-template-rows:auto auto}
    .pilier p{grid-column:2}
    .hero{padding:0 24px}
  }

/* ---------- PAGES INTÉRIEURES ---------- */
.page-contenu{max-width:860px; margin:0 auto; padding:170px 32px 120px}
.page-contenu h1{font-size:clamp(2.4rem,6vw,4.5rem); font-weight:900; letter-spacing:-.03em; margin-bottom:40px}
.prose h2{font-size:1.5rem; font-weight:800; margin:44px 0 14px; letter-spacing:-.01em}
.prose p{color:var(--gris); margin-bottom:16px; line-height:1.7}
.prose a{color:var(--accent)}
.prose strong{color:var(--blanc)}