/* --- Reset très léger --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:#fff; background:#000;
  line-height:1.5;
}

/* --- Fond noir avec dégradés subtils --- */
body::before, body::after{
  content:"";
  position:fixed; top:0; bottom:0; width:22vw; pointer-events:none; z-index:-1;
  background:radial-gradient(closest-side, rgba(255,255,255,0.08), rgba(0,0,0,0) 65%);
  filter:blur(10px);
}
body::before{ left:-8vw; }
body::after { right:-8vw; }

/* --- Layout --- */
.container{max-width:1100px; margin:0 auto; padding:0 20px;}

/* --- Header --- */
header{
  position:relative;
  padding:28px 0 40px;
  background:
    radial-gradient(1200px 600px at 50% -200px, rgba(255,0,60,0.18), rgba(0,0,0,0)),
    linear-gradient(180deg, #0b0b0b 0%, #000 60%);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.brand{
  display:flex; align-items:center; gap:16px; margin-bottom:28px;
}
.brand-logo{
  width:52px; height:52px; border-radius:10px;
  background:linear-gradient(135deg,#c0002a,#ff1f4d);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; letter-spacing:0.5px;
  box-shadow:0 10px 30px rgba(255,0,60,0.25);
}
.brand-logo span{ font-size:18px }
.brand h1{font-size:28px; font-weight:800}
.tagline{opacity:.85; margin-top:4px}

/* --- Sections --- */
section{padding:56px 0; border-bottom:1px solid rgba(255,255,255,0.08)}
h3{font-size:26px; margin-bottom:14px}
.grid{display:grid; gap:18px}
@media(min-width:820px){ .grid-2{grid-template-columns:1fr 1fr} }

.card{
  background:#0d0d0d; border:1px solid rgba(255,255,255,0.08);
  border-radius:14px; padding:18px;
}
.card h4{font-size:18px; margin-bottom:6px}
.muted{opacity:.75}

/* --- Tarifs --- */
.pricing{
  display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin-top:10px;
}
.price{
  font-size:30px; font-weight:800; margin:6px 0 4px;
}
.unit{opacity:.75; font-size:14px}

/* --- Footer --- */
footer{padding:24px 0; color:#bbb; font-size:14px}
footer a{color:#fff; text-decoration:none; border-bottom:1px dashed rgba(255,255,255,0.35)}

/* --- Responsive --- */
@media(max-width:860px){
  .hero{grid-template-columns:1fr; gap:18px}
  .hero-copy h2{font-size:34px}
}