:root{
  --bg:#111528;
  --bg-deep:#0d1122;

  --panel:rgba(40,46,75,.85);
  --panel-2:rgba(52,58,92,.9);

  --line:rgba(255,255,255,.14);

  --text:#ffffff;
  --muted:#d2d9f0;

  --badge:#ffffff;

  --radius:18px;

  /* gradients plus visibles */
  --grad-1:rgba(255,150,100,.35);
  --grad-2:rgba(150,120,255,.32);
  --grad-3:rgba(100,210,255,.28);

  --header-height:60px;

}



*{box-sizing:border-box}

/* ===== BACKGROUND GLOBAL ===== */
html{
  margin:0;
  padding:0;
  min-height:100%;
  background:linear-gradient(180deg,#06070f 0%,#090d18 38%,#060912 100%);
}

body{
  margin:0;
  min-height:100vh;
  background:transparent;
  color:var(--text);
  font:16px/1.6 Inter,system-ui,-apple-system,Segoe UI,Roboto;
  position:relative;
  overflow-x:hidden;
}

/* Glow background */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at 15% 18%, var(--grad-1), transparent 32%),
    radial-gradient(circle at 82% 12%, var(--grad-2), transparent 28%),
    radial-gradient(circle at 50% 45%, var(--grad-3), transparent 34%);
  pointer-events:none;
  z-index:-2;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at 22% 76%, rgba(255,126,74,.08), transparent 24%),
    radial-gradient(circle at 80% 66%, rgba(124,92,255,.10), transparent 26%),
    radial-gradient(circle at 50% 100%, rgba(4,8,18,.72), transparent 40%);
  pointer-events:none;
  z-index:-3;
}

/* ===== HEADER ===== */
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:var(--header-height);
  z-index:1000;

  background:transparent;
  border-bottom:none;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;

  display:flex;
  align-items:center;

  transition:transform .28s ease, opacity .28s ease;
}

.site-header.is-hidden{
  transform:translateY(-110%);
  opacity:0;
  pointer-events:none;
}

.site-header.is-top{
  transform:translateY(0);
  opacity:1;
}

/* ===== LAYOUT ===== */
.container{
  max-width:1200px;
  margin:0 auto;
  padding:24px;
}

/* 🔥 spacing propre sous header */
body[data-page="index"] main.site-main > :first-child{
  padding-top:10px;
}


/* ===== HERO ===== */
.hero{
  background:linear-gradient(180deg,rgba(22,22,34,.5),rgba(11,11,15,0));
  border-bottom:1px solid var(--line);
}

.hero-wrap{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:24px;
  align-items:center;
}

.hero h1{
  margin:0;
  font-size:36px;
  line-height:1.15;
  font-weight:900;
}

.hero p{
  margin:12px 0 0;
  color:var(--muted);
}

/* ===== GRID ===== */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:18px;
}

.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:.16s;
}

.card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(0,0,0,.35);
}

/* ===== FOOTER ===== */
.site-footer{
  border-top:1px solid var(--line);
  background:linear-gradient(180deg, rgba(10,12,22,.65), rgba(7,9,18,.92));
  color:var(--muted);
}

/* ===== RESPONSIVE ===== */
@media (max-width:900px){
  .hero-wrap{
    grid-template-columns:1fr;
  }
}

/* ===== ACCESSIBILITY ===== */
.visually-hidden{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
}