:root{
  --bg:#05050a;
  --panel:#0f0f18;
  --panel2:#141421;
  --border:#2a2a3d;
  --text:#ffffff;
  --muted:rgba(255,255,255,.72);
  --violet:#7c3aed;
  --violet2:#a78bfa;
  --green:#22c55e;
  --red:#ef4444;
  --shadow: 0 18px 70px rgba(0,0,0,.55);
  --neon1: rgba(255,0,200,1);
  --neon2: rgba(0,200,255,1);
}

*{box-sizing:border-box}
html,body{height:100%}

/* Background DJ */
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  color:var(--text);
  overflow-x:hidden;

  background-color:#020207;
  background-image:
    radial-gradient(900px 500px at 20% 18%, rgba(255,0,200,.22), transparent 60%),
    radial-gradient(900px 500px at 82% 16%, rgba(0,200,255,.18), transparent 60%),
    radial-gradient(900px 520px at 50% 92%, rgba(124,58,237,.10), transparent 62%),
    linear-gradient(115deg,
      transparent 0%,
      rgba(255,0,200,.09) 12%,
      transparent 24%,
      rgba(0,200,255,.08) 36%,
      transparent 48%,
      rgba(255,0,200,.07) 60%,
      transparent 72%,
      rgba(0,200,255,.06) 84%,
      transparent 100%
    ),
    linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55));
  background-repeat:no-repeat;
  background-attachment:fixed;
}

body::after{
  content:"";
  position:fixed;
  inset:-20%;
  pointer-events:none;
  z-index:-2;
  background-image:
    radial-gradient(900px 520px at 28% 20%, rgba(255,0,200,.10), transparent 62%),
    radial-gradient(900px 520px at 72% 18%, rgba(0,200,255,.08), transparent 62%),
    linear-gradient(115deg,
      transparent 0%,
      rgba(255,0,200,.06) 12%,
      transparent 24%,
      rgba(0,200,255,.05) 36%,
      transparent 48%,
      rgba(255,0,200,.05) 60%,
      transparent 72%,
      rgba(0,200,255,.04) 84%,
      transparent 100%
    );
  background-repeat:no-repeat;
  opacity:.95;
  transform: rotate(-1deg);
  animation: lasers 10s ease-in-out infinite;
}
@keyframes lasers{
  0%,100%{ transform: translate3d(0,0,0) rotate(-1deg); opacity:.85; }
  50%{ transform: translate3d(-1.2%, 1%, 0) rotate(1deg); opacity:1; }
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

a{color:var(--violet2);text-decoration:none}
a:hover{opacity:.92}
.container{max-width:1160px;margin:0 auto;padding:0 18px}

/* HEADER */
.header{
  position:sticky; top:0; z-index:50;
  background: rgba(5,5,10,.72);
  backdrop-filter: blur(14px);
  border-bottom:1px solid rgba(42,42,61,.85);
}
.header__row{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:14px 0;
}
.brand{display:flex; align-items:center; gap:10px; min-width:240px}
.brand__logo{
  width:40px;height:40px;border-radius:12px; overflow:hidden;
  border:1px solid rgba(42,42,61,.9);
  background: rgba(255,255,255,.02);
  display:grid;place-items:center;
}
.brand__logo img{width:100%;height:100%;object-fit:cover}
.brand__name{font-weight:900;letter-spacing:.2px}

/* MENU */
.nav{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  padding:6px;
  border-radius:18px;
  border:1px solid rgba(42,42,61,.95);
  background: rgba(15,15,24,.62);
  box-shadow: 0 16px 50px rgba(0,0,0,.35);
  position:relative;
}
.nav a{
  position:relative;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid rgba(42,42,61,.55);
  background: rgba(20,20,33,.40);
  color:rgba(255,255,255,.88);
  font-weight:900;
  font-size:13px;
  letter-spacing:.15px;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
  white-space:nowrap;
  overflow:hidden;
}
.nav a::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:6px;
  height:2px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--neon1), var(--neon2));
  opacity:0;
  transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease;
  filter: drop-shadow(0 0 10px rgba(0,200,255,.22)) drop-shadow(0 0 14px rgba(255,0,200,.18));
}
.nav a:hover{
  transform: translateY(-1px);
  background: rgba(20,20,33,.70);
  border-color: rgba(0,200,255,.30);
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}
.nav a:hover::after{opacity:.75;transform:translateY(0)}
.nav a.active{
  background: linear-gradient(135deg, rgba(255,0,200,.50), rgba(0,200,255,.35));
  border-color: rgba(0,200,255,.35);
  box-shadow: 0 14px 35px rgba(0,200,255,.08), 0 0 0 1px rgba(255,255,255,.03) inset;
}
.nav a.active::after{opacity:1;transform:translateY(0)}

/* CTA */
.header__cta{
  display:flex; align-items:center; gap:10px; min-width:240px; justify-content:flex-end;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(42,42,61,.95);
  background: rgba(20,20,33,.85);
  color:#fff; font-weight:900;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn--primary{
  background: linear-gradient(135deg, rgba(255,0,200,.85), rgba(0,200,255,.75));
  border-color: rgba(0,200,255,.35);
}
.btn--ghost{background:transparent}

/* bouton menu mobile */
.menuBtn{
  display:none;
  width:44px;height:44px;
  border-radius:14px;
  border:1px solid rgba(42,42,61,.95);
  background: rgba(20,20,33,.78);
  color:#fff;
  font-weight:900;
  cursor:pointer;
}

/* HERO */
.hero{position:relative;padding:42px 0 26px}
.hero__wrap{
  position:relative;border-radius:24px;overflow:hidden;
  border:1px solid rgba(42,42,61,.95);
  background: linear-gradient(135deg, rgba(255,0,200,.16), rgba(0,0,0,0));
  box-shadow: var(--shadow);
}

/* ✅ 2 backgrounds superposés pour slider */
.hero__bg, .hero__bg2{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.03);
  transition: opacity 900ms ease;
}
.hero__bg{opacity:1}
.hero__bg2{opacity:0}

.hero__overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 420px at 20% 20%, rgba(255,0,200,.22), transparent 60%),
    radial-gradient(800px 420px at 85% 30%, rgba(0,200,255,.14), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.82));
}
.hero__content{
  position:relative;
  display:grid;
  grid-template-columns: 1.4fr .9fr;
  gap:18px;
  padding:28px;
}
@media (max-width: 900px){
  .hero__content{grid-template-columns:1fr}
  .brand{min-width:auto}
  .header__cta{min-width:auto}
}
.h1{margin:0 0 10px;font-size:clamp(26px,4vw,44px);line-height:1.05;letter-spacing:-.5px}
.lead{margin:0;color:rgba(255,255,255,.84);line-height:1.65;font-size:15.5px}
.hero__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border-radius:999px;border:1px solid rgba(42,42,61,.95);background:rgba(15,15,24,.72);color:rgba(255,255,255,.86);font-size:12.5px}
.hero__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}

.hero__card{
  position:relative;border-radius:18px;border:1px solid rgba(42,42,61,.95);
  background:rgba(15,15,24,.80);
  padding:14px;overflow:hidden
}
.hero__card::before{content:"";position:absolute;inset:-60px;background:radial-gradient(circle, rgba(0,200,255,.18), transparent 60%);filter:blur(8px);opacity:.9}
.hero__card > *{position:relative}

.kpi{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.kpi__box{border:1px solid rgba(42,42,61,.9);background:rgba(20,20,33,.55);border-radius:16px;padding:12px}
.kpi__n{font-weight:900;font-size:20px}
.kpi__t{color:rgba(255,255,255,.76);font-size:12px;margin-top:4px}

.eq{height:56px;display:flex;align-items:flex-end;gap:5px;margin-top:14px}
.eq span{width:10px;border-radius:10px;background:linear-gradient(180deg, rgba(0,200,255,.90), rgba(255,0,200,.65));animation:eq 1.2s ease-in-out infinite;box-shadow:0 10px 24px rgba(0,200,255,.10)}
.eq span:nth-child(2){animation-delay:.1s}
.eq span:nth-child(3){animation-delay:.2s}
.eq span:nth-child(4){animation-delay:.3s}
.eq span:nth-child(5){animation-delay:.4s}
.eq span:nth-child(6){animation-delay:.5s}
.eq span:nth-child(7){animation-delay:.6s}
@keyframes eq{0%,100%{height:16px;opacity:.7}40%{height:54px;opacity:1}70%{height:26px;opacity:.9}}

.section{padding:26px 0}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:12px}
.h2{margin:0;font-size:22px;letter-spacing:-.2px}
.sub{color:rgba(255,255,255,.70);margin:0;font-size:13.5px;line-height:1.55;max-width:620px}

.grid{display:grid;gap:12px;grid-template-columns:repeat(12,1fr)}
.card{
  grid-column:span 4;
  border:1px solid rgba(42,42,61,.95);
  background: rgba(20,20,33,.82);
  border-radius:18px;
  padding:16px;
  overflow:hidden;
  position:relative;
}
.card::before{content:"";position:absolute;inset:-80px;background:radial-gradient(circle, rgba(255,0,200,.10), transparent 55%);filter:blur(10px);opacity:.85}
.card > *{position:relative}
@media (max-width:900px){.card{grid-column:span 12}}
.icon{width:42px;height:42px;border-radius:14px;border:1px solid rgba(42,42,61,.95);background:rgba(15,15,24,.7);display:grid;place-items:center;margin-bottom:10px}
.card h3{margin:0 0 6px;font-size:16px}
.card p{margin:0;color:rgba(255,255,255,.74);line-height:1.6;font-size:13.5px}

.split{display:grid;grid-template-columns:1.2fr .8fr;gap:12px}
@media(max-width:900px){.split{grid-template-columns:1fr}}

.panel{border:1px solid rgba(42,42,61,.95);background:rgba(20,20,33,.72);border-radius:18px;padding:16px;position:relative;overflow:hidden}
.panel::before{content:"";position:absolute;inset:-80px;background:radial-gradient(circle, rgba(0,200,255,.10), transparent 60%);filter:blur(10px)}
.panel > *{position:relative}

.galleryMini{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
@media(max-width:900px){.galleryMini{grid-template-columns:repeat(2,1fr)}}
.thumb{border-radius:16px;overflow:hidden;border:1px solid rgba(42,42,61,.95);background:rgba(15,15,24,.65);height:120px}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1);transition:.25s ease}
.thumb:hover img{transform:scale(1.06)}

.notice{border:1px solid rgba(34,197,94,.35);background:rgba(34,197,94,.10);padding:12px;border-radius:16px;color:rgba(255,255,255,.9)}
.error{border:1px solid rgba(239,68,68,.35);background:rgba(239,68,68,.10);padding:12px;border-radius:16px;color:rgba(255,255,255,.9)}

.footer{padding:26px 0 40px;color: rgba(255,255,255,.62);text-align:center;border-top:1px solid rgba(42,42,61,.85);margin-top:18px}

.fade-in{opacity:0;transform: translateY(10px);transition: .6s ease}
.fade-in.is-visible{opacity:1;transform: translateY(0)}

/* ✅ Avis clients */
.testiGrid{display:grid;gap:12px;grid-template-columns:repeat(12,1fr)}
.testiCard{
  grid-column:span 4;
  border:1px solid rgba(42,42,61,.95);
  background: rgba(20,20,33,.82);
  border-radius:18px;
  padding:16px;
  position:relative;
  overflow:hidden;
}
.testiCard::before{
  content:"";
  position:absolute; inset:-80px;
  background: radial-gradient(circle, rgba(0,200,255,.10), transparent 55%);
  filter: blur(10px);
  opacity:.85;
}
.testiCard > *{position:relative}
@media(max-width:900px){.testiCard{grid-column:span 12}}
.stars{letter-spacing:1px;color:rgba(255,255,255,.90)}
.testiText{margin-top:10px;color:rgba(255,255,255,.76);line-height:1.65}
.testiMeta{margin-top:12px;color:rgba(255,255,255,.65);font-size:12.5px}

/* ✅ Social bar + WhatsApp */
.socialBar{
  display:flex; gap:10px; flex-wrap:wrap;
  margin-top:14px;
}
.socialBtn{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 12px;
  border-radius:14px;
  border:1px solid rgba(42,42,61,.95);
  background: rgba(20,20,33,.75);
  color:rgba(255,255,255,.90);
  font-weight:900;
  font-size:13px;
}
.socialBtn:hover{
  transform: translateY(-1px);
  transition:.15s ease;
  border-color: rgba(0,200,255,.30);
}

.waFloat{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:1000;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:999px;
  border:1px solid rgba(34,197,94,.45);
  background: rgba(34,197,94,.16);
  color:#fff;
  font-weight:900;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}
.waFloat:hover{transform:translateY(-1px);transition:.15s ease}

/* RESPONSIVE MENU */
@media (max-width: 980px){
  .header__row{gap:10px}
  .header__cta{min-width:auto}
  .brand{min-width:auto}

  .menuBtn{display:inline-flex; align-items:center; justify-content:center}

  .nav{
    position:absolute;
    left:18px;
    right:18px;
    top:70px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    padding:12px;
    border-radius:18px;
    background: rgba(10,10,18,.92);
    border:1px solid rgba(42,42,61,.95);
    box-shadow: 0 28px 90px rgba(0,0,0,.60);
  }
  .nav.nav--open{display:flex}

  .nav a{
    border-radius:14px;
    padding:12px 12px;
    text-align:left;
  }

  .nav a::after{
    left:14px; right:14px; bottom:8px;
  }
}