:root{
  --ink:#111923;
  --night:#061b32;
  --blue:#0475d8;
  --cyan:#18d4df;
  --violet:#7050ff;
  --paper:#f7fafc;
  --muted:#667789;
  --line:rgba(6,27,50,.14);
  --shadow:0 28px 80px rgba(6,27,50,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(24,212,223,.24), transparent 28rem),
    radial-gradient(circle at 90% 12%, rgba(112,80,255,.12), transparent 24rem),
    linear-gradient(180deg,#ffffff 0%,#edf4f8 55%,#fbfdff 100%);
  overflow-x:hidden;
}
.grain{position:fixed;inset:0;pointer-events:none;opacity:.18;z-index:0;background-image:linear-gradient(90deg,rgba(6,27,50,.04) 1px,transparent 1px),linear-gradient(rgba(6,27,50,.035) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(#000,transparent 85%)}
.cursor-glow{position:fixed;width:22rem;height:22rem;border-radius:50%;background:radial-gradient(circle,rgba(24,212,223,.23),transparent 70%);transform:translate(-50%,-50%);pointer-events:none;z-index:1;mix-blend-mode:multiply;transition:opacity .2s ease}
.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem clamp(1rem,4vw,4rem);backdrop-filter:blur(16px);background:rgba(255,255,255,.74);border-bottom:1px solid rgba(6,27,50,.08)}
.brand{display:flex;align-items:center;gap:.7rem;color:var(--night);text-decoration:none;font-weight:900;letter-spacing:.12em}.brand-logo img{display:block;height:54px;width:auto}.brand-mark{display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:.7rem;background:linear-gradient(135deg,var(--cyan),var(--blue),var(--violet));color:white;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.nav{display:flex;gap:1.35rem;align-items:center}.nav a,.nav-cta{color:var(--ink);text-decoration:none;font-size:1rem}.nav a{opacity:.96;font-weight:800;letter-spacing:.01em}.nav a:hover{opacity:1;color:var(--night)}.nav-cta{padding:.7rem 1.05rem;border:1px solid var(--line);border-radius:99px;background:white;box-shadow:0 10px 30px rgba(6,27,50,.06);font-weight:800}
main{position:relative;z-index:2}.hero{min-height:calc(100vh - 76px);display:grid;grid-template-columns:minmax(0,1.02fr) minmax(320px,.98fr);gap:3rem;align-items:center;padding:clamp(3rem,7vw,7rem) clamp(1rem,5vw,5rem) 4rem}.status{display:inline-flex;align-items:center;gap:.55rem;padding:.55rem .85rem;border:1px solid rgba(24,212,223,.32);border-radius:99px;color:#06556a;background:rgba(255,255,255,.76);font-weight:700;font-size:.9rem}.status span{width:.62rem;height:.62rem;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 .4rem rgba(24,212,223,.12)}
h1{font-size:clamp(2.4rem,6.2vw,6.7rem);line-height:.9;margin:1.1rem 0 1.4rem;letter-spacing:-.07em;color:var(--night)}h1 em{font-style:normal;color:transparent;background:linear-gradient(90deg,var(--blue),var(--cyan),var(--violet));-webkit-background-clip:text;background-clip:text}.lead{font-size:clamp(1.05rem,1.5vw,1.35rem);line-height:1.65;max-width:58rem;color:#334455}.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}.button{display:inline-flex;align-items:center;justify-content:center;padding:1rem 1.25rem;border-radius:1.1rem;font-weight:800;text-decoration:none}.button.primary{background:var(--night);color:white;box-shadow:0 18px 40px rgba(6,27,50,.22)}.button.ghost{background:white;color:var(--night);border:1px solid var(--line)}
.hero-stage{position:relative;min-height:540px;display:grid;place-items:center}.logo-card{position:relative;z-index:2;width:min(520px,88vw);padding:1.3rem;border-radius:2rem;background:rgba(255,255,255,.78);box-shadow:var(--shadow);transform:rotate(-2deg);border:1px solid rgba(255,255,255,.9)}.logo-card img{display:block;width:100%;border-radius:1.2rem}.orbit{position:absolute;border:1px dashed rgba(4,117,216,.22);border-radius:35% 65% 60% 40%;animation:spin 26s linear infinite}.orbit-one{width:92%;height:78%}.orbit-two{width:72%;height:96%;animation-direction:reverse}.signal{position:absolute;z-index:3;padding:.45rem .7rem;border-radius:99px;background:var(--night);color:white;font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;box-shadow:0 15px 30px rgba(6,27,50,.18)}.s1{top:18%;left:9%}.s2{right:2%;top:54%}.s3{bottom:16%;left:20%}@keyframes spin{to{transform:rotate(360deg)}}
.manifesto{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;margin:1rem clamp(1rem,5vw,5rem);padding:clamp(2rem,5vw,4rem);background:var(--night);color:white;border-radius:2.2rem;box-shadow:var(--shadow);position:relative;overflow:hidden}.manifesto:after{content:"";position:absolute;inset:auto -10% -80% 45%;height:140%;background:radial-gradient(circle,rgba(24,212,223,.28),transparent 60%)}.manifesto-copy{position:relative;z-index:2;max-width:78rem}.kicker-light{color:var(--cyan)}.manifesto h2,.services h2,.method h2,.lab h2,.contact h2{font-size:clamp(2rem,4vw,4rem);line-height:1;margin:.3rem 0 1rem;letter-spacing:-.045em}.manifesto p{font-size:1.18rem;line-height:1.75;color:#dcecf5;max-width:78ch}
.services{padding:7rem clamp(1rem,5vw,5rem)}.section-kicker{font-size:.8rem;text-transform:uppercase;letter-spacing:.22em;color:var(--blue);font-weight:900}.service-rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-top:2.2rem}.service-card{min-height:27rem;padding:1.4rem;border-radius:1.6rem;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.98));border:1px solid var(--line);box-shadow:0 18px 55px rgba(6,27,50,.08);display:flex;flex-direction:column;gap:1rem;transition:transform .2s ease, box-shadow .2s ease;overflow:hidden;position:relative}.service-card:hover{transform:translateY(-8px) rotate(0deg);box-shadow:var(--shadow)}.tilt-a{transform:rotate(-2deg)}.tilt-b{transform:translateY(1.2rem) rotate(1deg)}.tilt-c{transform:rotate(-.8deg)}.tilt-d{transform:translateY(1.8rem) rotate(2deg)}.card-index{font-size:.82rem;font-weight:900;color:white;background:linear-gradient(135deg,var(--blue),var(--cyan));width:max-content;padding:.45rem .65rem;border-radius:.7rem;position:relative;z-index:2}.service-visual{height:12rem;margin:-.2rem -.1rem .2rem;border-radius:1.25rem;background-position:center;background-repeat:no-repeat;background-size:cover;border:1px solid rgba(6,27,50,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.85)}.visual-it{background-image:url("assets/service-it.svg")}.visual-tel{background-image:url("assets/service-tel.svg")}.visual-sec{background-image:url("assets/service-sec.svg")}.visual-dom{background-image:url("assets/service-dom.svg")}.service-card h3{font-size:1.55rem;margin:.2rem 0 .35rem;letter-spacing:-.02em}.service-card p{color:var(--muted);line-height:1.6;margin:0}
.method{display:grid;grid-template-columns:.82fr 1.18fr;gap:3rem;padding:6rem clamp(1rem,5vw,5rem);background:linear-gradient(135deg,#f4fbff,#fff);border-top:1px solid rgba(6,27,50,.08);border-bottom:1px solid rgba(6,27,50,.08)}.method-aside p{color:var(--muted);line-height:1.75;font-size:1.08rem}.timeline{counter-reset:step;list-style:none;padding:0;margin:0;display:grid;gap:1rem}.timeline li{counter-increment:step;position:relative;padding:1.3rem 1.3rem 1.3rem 5rem;border:1px solid var(--line);background:white;border-radius:1.3rem;box-shadow:0 10px 30px rgba(6,27,50,.06)}.timeline li:before{content:counter(step);position:absolute;left:1.2rem;top:1.15rem;width:2.55rem;height:2.55rem;display:grid;place-items:center;border-radius:50%;background:var(--night);color:white;font-weight:900}.timeline strong{display:block;font-size:1.2rem}.timeline span{display:block;color:var(--muted);margin-top:.25rem;line-height:1.5}
.lab{position:relative;margin:6rem clamp(1rem,5vw,5rem);padding:clamp(2rem,5vw,4.5rem);border-radius:2.2rem;background:linear-gradient(135deg,#061b32,#0a3157 55%,#073b4e);color:white;overflow:hidden}.lab-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);opacity:.26}.lab-grid span{border:1px solid rgba(255,255,255,.16)}.lab-content{position:relative;z-index:2;max-width:62rem}.lab p{color:#d5eaf5;line-height:1.75;font-size:1.15rem}.chips{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.5rem}.chips span{padding:.7rem .9rem;border:1px solid rgba(255,255,255,.25);border-radius:99px;background:rgba(255,255,255,.08);backdrop-filter:blur(10px)}
.contact{display:grid;grid-template-columns:1fr .9fr;gap:2rem;align-items:center;padding:5rem clamp(1rem,5vw,5rem)}.contact p{color:var(--muted);font-size:1.1rem}.contact-card{display:block;text-decoration:none;color:var(--night);padding:2rem;border-radius:1.8rem;background:white;border:1px solid var(--line);box-shadow:var(--shadow);position:relative;overflow:hidden}.contact-card:before{content:"";position:absolute;inset:0 0 auto 0;height:.5rem;background:linear-gradient(90deg,var(--blue),var(--cyan),var(--violet))}.contact-card span,.contact-card small{display:block;color:var(--muted)}.contact-card strong{display:block;font-size:clamp(1.7rem,3.3vw,3rem);margin:.5rem 0;letter-spacing:-.04em}.footer{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:2rem clamp(1rem,5vw,5rem);border-top:1px solid var(--line);color:var(--muted);font-size:.95rem}.footer a{color:var(--ink);text-decoration:none;margin-left:1rem}
@media (max-width:940px){.nav{display:none}.hero,.method,.contact{grid-template-columns:1fr}.hero-stage{min-height:420px}.service-rail{grid-template-columns:1fr 1fr}.manifesto{grid-template-columns:1fr}.cursor-glow{display:none}}
@media (max-width:620px){.topbar{align-items:flex-start}.nav-cta{display:none}.brand-logo img{height:42px}h1{font-size:3.3rem}.service-rail{grid-template-columns:1fr}.service-card,.tilt-a,.tilt-b,.tilt-c,.tilt-d{transform:none;min-height:auto}.service-visual{height:10rem}.hero{padding-top:3rem}.logo-card{transform:none}.footer a{margin-left:0;margin-right:1rem}}


@media (prefers-color-scheme: dark){
  :root{
    --ink:#edf7ff;
    --night:#f5fbff;
    --paper:#071522;
    --muted:#a9bacb;
    --line:rgba(218,239,255,.16);
    --shadow:0 28px 80px rgba(0,0,0,.42);
  }
  body{
    color:var(--ink);
    background:
      radial-gradient(circle at 12% 8%, rgba(24,212,223,.18), transparent 28rem),
      radial-gradient(circle at 90% 12%, rgba(112,80,255,.18), transparent 24rem),
      linear-gradient(180deg,#06111e 0%,#081a2a 55%,#04101d 100%);
  }
  .grain{opacity:.13;background-image:linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px)}
  .topbar{background:rgba(5,16,28,.82);border-bottom-color:rgba(218,239,255,.12)}
  .nav a,.nav-cta{color:#edf7ff}
  .nav a:hover{color:#ffffff}
  .nav-cta{background:rgba(255,255,255,.08);border-color:rgba(218,239,255,.16);box-shadow:none}
  h1{color:#f5fbff}
  .lead{color:#c2d1df}
  .status{background:rgba(255,255,255,.08);color:#dffcff;border-color:rgba(24,212,223,.34)}
  .button.ghost{background:rgba(255,255,255,.08);color:#edf7ff;border-color:rgba(218,239,255,.16)}
  .manifesto{background:linear-gradient(135deg,#061b32,#08263d)}
  .service-card{background:linear-gradient(180deg,rgba(10,28,45,.96),rgba(7,21,34,.98));border-color:rgba(218,239,255,.14);box-shadow:0 18px 55px rgba(0,0,0,.25)}
  .service-card p,.method-aside p,.contact p{color:#a9bacb}
  .method{background:linear-gradient(135deg,#071522,#0b2032);border-top-color:rgba(218,239,255,.12);border-bottom-color:rgba(218,239,255,.12)}
  .timeline li{background:rgba(255,255,255,.06);border-color:rgba(218,239,255,.14);box-shadow:none}
  .timeline span{color:#a9bacb}
  .timeline li:before{background:#0aaee0;color:#03111e}
  .lab{background:linear-gradient(135deg,#03111e,#06233a 55%,#063449)}
  .contact-card{background:rgba(255,255,255,.06);color:#edf7ff;border-color:rgba(218,239,255,.14);box-shadow:0 28px 80px rgba(0,0,0,.28)}
  .footer{border-top-color:rgba(218,239,255,.12);color:#a9bacb}
  .footer a{color:#edf7ff}
}


/* --- ESSAA v6 : logo droit + thème sombre propre --- */
.brand{
  display:flex;
  align-items:center;
  gap:.7rem;
  color:var(--night);
  text-decoration:none;
  font-weight:900;
  letter-spacing:.12em;
}

.brand-logo{
  line-height:0;
  padding:.25rem .35rem;
  border-radius:.9rem;
}

.brand-logo img{
  display:block;
  height:52px;
  width:auto;
  transform:none !important;
  filter:none !important;
}

.nav{
  display:flex;
  gap:1.35rem;
  align-items:center;
}

.nav a,
.nav-cta{
  color:var(--ink);
  text-decoration:none;
  font-size:1rem;
}

.nav a{
  opacity:.96;
  font-weight:850;
  letter-spacing:.01em;
}

.nav a:hover{
  opacity:1;
  color:var(--night);
}

.nav-cta{
  padding:.7rem 1.05rem;
  border:1px solid var(--line);
  border-radius:99px;
  background:white;
  box-shadow:0 10px 30px rgba(6,27,50,.06);
  font-weight:850;
}

.logo-card.logo-card-icon{
  width:min(420px,72vw);
  padding:2rem;
  border-radius:2.4rem;
  background:rgba(255,255,255,.78);
  box-shadow:var(--shadow);
  transform:rotate(-2deg);
  border:1px solid rgba(255,255,255,.9);
}

.logo-card.logo-card-icon img{
  display:block;
  width:100%;
  height:auto;
  border-radius:1.2rem;
  transform:none !important;
  filter:none !important;
}

@media (prefers-color-scheme: dark){
  .brand-logo{
    background:rgba(255,255,255,.96);
    border:1px solid rgba(255,255,255,.18);
    box-shadow:0 12px 32px rgba(0,0,0,.24);
  }

  .brand-logo img{
    filter:none !important;
  }

  .logo-card.logo-card-icon{
    background:rgba(255,255,255,.94);
    border:1px solid rgba(255,255,255,.88);
    box-shadow:0 26px 70px rgba(0,0,0,.34);
  }

  .logo-card.logo-card-icon img{
    filter:none !important;
    background:transparent;
  }

  .signal{
    background:#f7fbff;
    color:#061b32;
    border:1px solid rgba(6,27,50,.10);
    box-shadow:0 12px 28px rgba(0,0,0,.28);
  }

  .orbit{
    border-color:rgba(129,196,255,.20);
  }
}

@media (max-width:620px){
  .brand-logo img{height:38px}
  .brand-logo{padding:.2rem .25rem}
}

/* --- ESSAA v8 : dark mode CTA fixes --- */
@media (prefers-color-scheme: dark){
  .nav-cta{
    background:#ffffff !important;
    color:#061b32 !important;
    border-color:rgba(255,255,255,.78) !important;
    box-shadow:0 10px 30px rgba(0,0,0,.24) !important;
  }

  .nav-cta:hover{
    background:#f3f8fc !important;
    color:#04101d !important;
  }

  .hero-actions .button.primary{
    background:#ffffff !important;
    color:#061b32 !important;
    border:1px solid rgba(255,255,255,.85) !important;
    box-shadow:0 18px 40px rgba(0,0,0,.24) !important;
  }

  .hero-actions .button.primary:hover{
    background:#f3f8fc !important;
    color:#04101d !important;
  }
}