:root{
  --bg:#040a14;
  --bg-2:#07111f;
  --panel:#0a1626;
  --panel-2:#0e1d34;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(111,211,255,.22);
  --text:#f4f8ff;
  --muted:#8ea3c2;
  --turquoise:#6fd3ff;
  --turquoise-2:#3ec0f0;
  --blue-deep:#2d7dff;
  --accent-grad:linear-gradient(135deg,#3ec0f0 0%,#2d7dff 100%);
  --shadow-card:0 24px 60px rgba(0,0,0,.45);
  --radius:20px;
  --radius-sm:14px;
  --wrap:min(1240px, calc(100% - 48px));
  --font-display:'Space Grotesk','Inter',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  color:var(--text);
  background:var(--bg);
  line-height:1.65;
  font-size:16px;
  overflow-x:hidden;
  position:relative;
}

/* Fond animé "lumières qui montent" - inspiré techsogroup */
.bg-lights{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 15% -5%, rgba(62,192,240,.18), transparent 45%),
    radial-gradient(ellipse at 85% 105%, rgba(45,125,255,.14), transparent 45%),
    radial-gradient(ellipse at 50% 50%, rgba(111,211,255,.03), transparent 60%),
    linear-gradient(180deg,#040a14 0%,#07111f 50%,#040a14 100%);
}
/* Grille subtile cyberpunk */
.bg-lights::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(111,211,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111,211,255,.045) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse at 50% 40%, black 0%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%, black 0%, transparent 75%);
  opacity:.6;
}
/* Points lumineux en bas */
.bg-lights::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(1px 1px at 15% 92%, rgba(111,211,255,.9), transparent),
    radial-gradient(1px 1px at 28% 88%, rgba(111,211,255,.7), transparent),
    radial-gradient(1.2px 1.2px at 45% 95%, rgba(111,211,255,.8), transparent),
    radial-gradient(1px 1px at 62% 90%, rgba(62,192,240,.6), transparent),
    radial-gradient(1.2px 1.2px at 78% 93%, rgba(111,211,255,.9), transparent),
    radial-gradient(1px 1px at 92% 87%, rgba(62,192,240,.7), transparent),
    radial-gradient(1px 1px at 8% 96%, rgba(111,211,255,.5), transparent),
    radial-gradient(1.2px 1.2px at 35% 84%, rgba(62,192,240,.5), transparent),
    radial-gradient(1px 1px at 55% 98%, rgba(111,211,255,.6), transparent),
    radial-gradient(1px 1px at 70% 82%, rgba(62,192,240,.5), transparent);
  background-size:100% 100%;
  opacity:.85;
  animation:twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle{
  0%{opacity:.55}
  100%{opacity:.95}
}
.bg-lights .beam{
  position:absolute;
  bottom:0;
  width:1px;
  background:linear-gradient(to top, rgba(111,211,255,1), rgba(62,192,240,.4) 40%, rgba(111,211,255,0));
  animation:beam-rise linear infinite;
  opacity:.7;
  box-shadow:0 0 6px rgba(111,211,255,.5);
}
@keyframes beam-rise{
  0%{height:0;opacity:0;transform:translateY(0)}
  8%{opacity:.9}
  88%{opacity:.5}
  100%{height:95vh;opacity:0;transform:translateY(-10px)}
}

/* Scan line cybersec */
.scan-line{
  position:fixed;
  left:0;right:0;top:0;
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(111,211,255,.6),rgba(62,192,240,.9),rgba(111,211,255,.6),transparent);
  box-shadow:0 0 20px rgba(111,211,255,.7);
  z-index:0;
  pointer-events:none;
  animation:scan 11s linear infinite;
  opacity:.55;
}
@keyframes scan{
  0%{transform:translateY(0)}
  100%{transform:translateY(100vh)}
}

/* Typo */
h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.02em;line-height:1.15;font-weight:700}
h1{font-size:clamp(2.4rem,5vw,4.8rem);letter-spacing:-.04em;line-height:1.02}
h2{font-size:clamp(1.8rem,3vw,2.8rem)}
h3{font-size:clamp(1.15rem,1.5vw,1.4rem);font-weight:600}
p{color:var(--muted);line-height:1.75}
.lead{font-size:clamp(1.05rem,1.3vw,1.22rem);color:#cad8ed;max-width:65ch}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* Layout */
.wrap{width:var(--wrap);margin:0 auto}
section{padding:clamp(60px,8vw,120px) 0;position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.82rem;color:var(--turquoise);font-weight:600;letter-spacing:.18em;text-transform:uppercase;margin-bottom:18px}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--turquoise);display:inline-block}

/* Nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(4,10,20,.78);backdrop-filter:blur(20px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.brand{display:flex;align-items:center}
.brand img{width:160px;height:auto}
.menu{display:flex;align-items:center;gap:30px;font-size:.95rem}
.menu a{color:var(--muted);font-weight:500;transition:color .2s;position:relative}
.menu a:hover,.menu a.active{color:var(--text)}
.menu a.active::after{content:"";position:absolute;left:0;right:0;bottom:-22px;height:2px;background:var(--accent-grad)}
.nav-cta{background:var(--accent-grad);color:#02111f!important;padding:10px 20px;border-radius:10px;font-weight:700;transition:transform .2s}
.nav-cta:hover{transform:translateY(-1px)}

/* Hamburger */
.burger{display:none;background:none;border:1px solid var(--line-2);padding:10px;border-radius:10px;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--text);margin:5px 0;transition:.3s}
.burger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:rotate(-45deg) translate(7px,-6px)}

/* Hero */
.hero{padding:clamp(70px,10vw,140px) 0 clamp(40px,5vw,80px);position:relative}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.hero h1{margin-bottom:24px}
.hero h1 .gradient{
  background:linear-gradient(135deg,var(--turquoise) 0%,var(--blue-deep) 50%,var(--turquoise) 100%);
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:shimmer 4.5s ease-in-out infinite;
  filter:drop-shadow(0 0 18px rgba(111,211,255,.35));
}
@keyframes shimmer{
  0%,100%{background-position:0% center}
  50%{background-position:100% center}
}
.hero .lead{margin-bottom:36px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:44px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:12px;font-weight:600;font-size:.95rem;transition:all .25s;cursor:pointer;border:none}
.btn-primary{background:var(--accent-grad);color:#02111f}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(62,192,240,.35)}
.btn-ghost{background:rgba(255,255,255,.04);color:var(--text);border:1px solid var(--line-2)}
.btn-ghost:hover{background:rgba(111,211,255,.08);border-color:var(--turquoise)}
.btn-arrow::after{content:"→";margin-left:8px;transition:transform .2s}
.btn-arrow:hover::after{transform:translateX(3px)}

/* Stats hero */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:540px}
.stat-num{font-family:var(--font-display);font-size:clamp(1.8rem,3vw,2.6rem);color:var(--turquoise);font-weight:700;letter-spacing:-.03em}
.stat-label{color:var(--muted);font-size:.88rem;margin-top:4px}

/* Hero visual - radar cyber animé */
.hero-visual{position:relative;aspect-ratio:1;max-width:540px;margin:0 auto}
.hero-visual::before{
  content:"";position:absolute;inset:-10%;
  background:radial-gradient(circle,rgba(111,211,255,.22) 0%,rgba(62,192,240,.08) 40%,transparent 70%);
  border-radius:50%;animation:pulse 4s ease-in-out infinite;
  filter:blur(8px);
}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.08);opacity:.5}}
.hero-visual .shield{position:relative;z-index:1;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.hero-visual .radar-ring{
  position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(111,211,255,.18);
  animation:radar-expand 3.6s ease-out infinite;
}
.hero-visual .radar-ring:nth-child(2){animation-delay:1.2s}
.hero-visual .radar-ring:nth-child(3){animation-delay:2.4s}
@keyframes radar-expand{
  0%{transform:scale(.5);opacity:0;border-color:rgba(111,211,255,.7)}
  50%{opacity:.5}
  100%{transform:scale(1.1);opacity:0;border-color:rgba(111,211,255,.1)}
}
.hero-visual .radar-sweep{
  position:absolute;inset:6%;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(111,211,255,.22) 60deg,transparent 120deg);
  animation:sweep 4s linear infinite;
  pointer-events:none;
}
@keyframes sweep{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}
.hero-visual .node{
  position:absolute;width:10px;height:10px;border-radius:50%;
  background:var(--turquoise);
  box-shadow:0 0 14px var(--turquoise),0 0 28px rgba(111,211,255,.6);
  animation:node-pulse 2.4s ease-in-out infinite;
}
.hero-visual .node.n1{top:18%;left:50%;animation-delay:0s}
.hero-visual .node.n2{top:50%;left:82%;animation-delay:.4s}
.hero-visual .node.n3{top:80%;left:60%;animation-delay:.8s}
.hero-visual .node.n4{top:70%;left:22%;animation-delay:1.2s}
.hero-visual .node.n5{top:35%;left:15%;animation-delay:1.6s}
@keyframes node-pulse{
  0%,100%{transform:scale(1);opacity:.9}
  50%{transform:scale(1.4);opacity:.6}
}

/* Cards grid */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-top:50px}
.card{background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%);border:1px solid var(--line);padding:32px;border-radius:var(--radius);transition:all .35s;position:relative;overflow:hidden}
.card::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:var(--accent-grad);transform:scaleX(0);transform-origin:left;transition:transform .4s}
.card::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:var(--radius);
  background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),rgba(111,211,255,.08),transparent 45%);
  opacity:0;transition:opacity .3s;
}
.card:hover{transform:translateY(-8px);border-color:var(--line-2);box-shadow:var(--shadow-card),0 0 0 1px rgba(111,211,255,.15)}
.card:hover::before{transform:scaleX(1)}
.card:hover::after{opacity:1}
.card-icon{width:52px;height:52px;border-radius:12px;background:rgba(111,211,255,.1);display:flex;align-items:center;justify-content:center;margin-bottom:20px;color:var(--turquoise)}
.card-icon svg{width:26px;height:26px}
.card h3{margin-bottom:12px;color:var(--text)}
.card p{font-size:.95rem}
.card-count{font-family:var(--font-display);font-size:2.4rem;font-weight:800;background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;display:block;margin-bottom:4px}
.card-count-label{color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.1em}

/* Section title */
.section-title{text-align:center;max-width:780px;margin:0 auto 50px}
.section-title h2{margin-bottom:16px}
.section-title p{font-size:1.08rem}

/* Footer */
footer{background:var(--bg-2);border-top:1px solid var(--line);padding:60px 0 30px;margin-top:60px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
.footer-brand img{width:180px;margin-bottom:16px}
.footer-brand p{font-size:.92rem;max-width:300px}
.footer h4{color:var(--text);font-size:1rem;margin-bottom:18px}
.footer ul{list-style:none}
.footer li{margin-bottom:10px}
.footer li a{color:var(--muted);font-size:.92rem;transition:color .2s}
.footer li a:hover{color:var(--turquoise)}
.footer-bottom{border-top:1px solid var(--line);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:.85rem}

/* Mobile Nav (panneau déroulant avec croix de fermeture) */
.mobile-menu{position:fixed;inset:0;background:rgba(4,10,20,.96);backdrop-filter:blur(24px);z-index:100;opacity:0;visibility:hidden;transition:all .3s}
.mobile-menu.open{opacity:1;visibility:visible}
.mobile-menu-inner{padding:70px 28px 40px;height:100%;overflow-y:auto;max-width:420px;margin:0 auto}
.mobile-menu a{display:block;padding:14px 0;border-bottom:1px solid var(--line);color:var(--text);font-size:1.02rem;font-weight:500;letter-spacing:.01em}
.mobile-menu a:hover{color:var(--turquoise)}
.mobile-menu .nav-cta{display:inline-block;margin-top:20px;padding:10px 22px;font-size:.95rem}
.mobile-menu-close{position:absolute;top:18px;right:18px;width:42px;height:42px;background:rgba(111,211,255,.08);border:1px solid var(--line-2);border-radius:50%;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;z-index:102}
.mobile-menu-close:hover{background:rgba(111,211,255,.18);border-color:var(--turquoise);transform:rotate(90deg)}
.mobile-menu-close svg{width:18px;height:18px}

/* Responsive */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-visual{max-width:380px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:720px){
  :root{--wrap:calc(100% - 32px)}
  .menu:not(.mobile-menu .menu){display:none}
  .burger{display:block}
  .stats{grid-template-columns:repeat(2,1fr);gap:20px}
  .footer-grid{grid-template-columns:1fr}
  .hero-actions{flex-direction:column;align-items:stretch}
  .btn{width:100%;justify-content:center}
}

/* Sections spécifiques — pages intérieures */
.page-hero{padding:80px 0 40px;border-bottom:1px solid var(--line);margin-bottom:30px}
.page-hero h1{font-size:clamp(2rem,4vw,3.6rem);margin-bottom:16px}
.page-hero .breadcrumb{color:var(--muted);font-size:.9rem;margin-bottom:16px}
.page-hero .breadcrumb a{color:var(--turquoise)}

/* NIS2 page - stepper */
.stepper{display:grid;grid-template-columns:1fr;gap:20px;margin-top:40px}
.step{display:grid;grid-template-columns:80px 1fr;gap:24px;padding:24px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);transition:all .3s}
.step:hover{border-color:var(--line-2)}
.step-num{font-family:var(--font-display);font-size:2.5rem;font-weight:800;background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.step h3{margin-bottom:8px}
.step p{font-size:.95rem}

/* Team cards */
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px;margin-top:40px}
.team-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:all .3s}
.team-card:hover{transform:translateY(-4px);border-color:var(--line-2)}
.team-photo{aspect-ratio:1;background:linear-gradient(135deg,var(--panel-2),var(--panel));display:flex;align-items:center;justify-content:center;position:relative}
.team-photo .initials{font-family:var(--font-display);font-size:3.5rem;font-weight:800;background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.team-photo.ai::before{content:"IA";position:absolute;top:14px;right:14px;background:var(--accent-grad);color:#02111f;padding:4px 10px;border-radius:999px;font-size:.75rem;font-weight:700;letter-spacing:.05em}
.team-info{padding:20px}
.team-info h3{margin-bottom:4px}
.team-role{color:var(--turquoise);font-size:.9rem;font-weight:500;margin-bottom:10px}
.team-bio{font-size:.88rem}

/* Client logos */
.logos{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:30px;align-items:center;margin-top:40px;padding:40px;background:var(--panel);border-radius:var(--radius)}
.logo-item{display:flex;align-items:center;justify-content:center;padding:20px;opacity:.7;transition:opacity .3s;color:var(--muted);font-weight:700;font-size:1.1rem;letter-spacing:.05em}
.logo-item:hover{opacity:1;color:var(--text)}

/* Form */
.form-card{background:var(--panel);padding:40px;border-radius:var(--radius);border:1px solid var(--line);max-width:680px;margin:0 auto}
.form-group{margin-bottom:20px}
.form-group label{display:block;color:var(--muted);font-size:.88rem;margin-bottom:8px;font-weight:500}
.form-group input,.form-group textarea,.form-group select{width:100%;background:var(--bg-2);border:1px solid var(--line);padding:14px;border-radius:10px;color:var(--text);font-family:inherit;font-size:.95rem;transition:border-color .2s}
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--turquoise)}
.form-group textarea{min-height:140px;resize:vertical}

/* Utilities */
.text-center{text-align:center}
.mt-40{margin-top:40px}
.mb-0{margin-bottom:0}