:root{
  --bg:#0b0b0f;
  --bg2:#11111a;
  --surface:rgba(255,255,255,.06);
  --surface2:rgba(255,255,255,.10);
  --text:#f4f6ff;
  --muted:rgba(244,246,255,.72);
  --line:rgba(255,255,255,.14);
  --accent:#e63946; /* BMN rouge */
  --accent2:#ffb000; /* clin d'œil Plex */
  --radius:18px;
  --shadow:0 14px 35px rgba(0,0,0,.45);
  --shadow2:0 10px 22px rgba(0,0,0,.35);
  --container:1100px;
  --pad:18px;
  color-scheme: dark;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  line-height:1.55;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(230,57,70,.25), transparent 55%),
    radial-gradient(900px 500px at 95% 10%, rgba(255,176,0,.16), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.88)),
    url("/bmn-site/Images/Fond_ecran/pcbred.png") center/cover no-repeat fixed;
}

img{max-width:100%; height:auto; display:block}
a{color:inherit}

.container{max-width:var(--container); margin:0 auto; padding:0 var(--pad)}

/* ---------------- Header ---------------- */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.38));
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
  padding:12px 0;
}

.brand{
  display:flex; align-items:center; gap:12px;
  text-decoration:none;
}
.brand-logo{
  width:56px; height:56px;
  border-radius:14px;
  overflow:hidden;
  box-shadow: var(--shadow2);
  border:1px solid rgba(255,255,255,.10);
}
.brand-title{display:flex; flex-direction:column; line-height:1.1}
.brand-name{font-weight:700; letter-spacing:.2px}
.brand-sub{font-size:.9rem; color:var(--muted)}

.nav{display:flex; align-items:center; gap:8px}
.nav a{
  text-decoration:none;
  padding:10px 12px;
  border-radius:12px;
  color:var(--muted);
  border:1px solid transparent;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.nav a:hover{transform: translateY(-1px); background: rgba(255,255,255,.06); color:var(--text)}
.nav a.is-active{color:var(--text); border-color: rgba(230,57,70,.55); background: rgba(230,57,70,.12)}

.menu-btn{
  display:none;
  width:44px; height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:var(--text);
  box-shadow: var(--shadow2);
}
.menu-bars{
  position:relative;
  display:block;
  width:18px; height:2px;
  background: currentColor;
  margin:0 auto;
  border-radius:2px;
}
.menu-bars::before,.menu-bars::after{
  content:"";
  position:absolute;
  left:0;
  width:18px; height:2px;
  background: currentColor;
  border-radius:2px;
}
.menu-bars::before{top:-6px}
.menu-bars::after{top:6px}

/* Drawer */
.menu-backdrop{
  position:fixed; inset:0;
  background: rgba(0,0,0,.55);
  opacity:0; pointer-events:none;
  transition: opacity .18s ease;
}
.menu-backdrop[data-open="1"]{opacity:1; pointer-events:auto}

.menu-drawer{
  position:fixed; top:0; right:0; height:100dvh;
  width:min(360px, 92vw);
  background: linear-gradient(180deg, rgba(16,16,24,.98), rgba(10,10,14,.98));
  border-left:1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
  transform: translateX(105%);
  transition: transform .20s ease;
  padding:16px;
}
.menu-drawer[data-open="1"]{transform: translateX(0)}
.menu-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:4px 2px 12px}
.menu-title{font-weight:700; letter-spacing:.2px}
.menu-close{
  width:40px; height:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:var(--text);
}
.menu-links{display:grid; gap:10px; padding-top:10px}
.menu-links a{
  text-decoration:none;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color:var(--muted);
}
.menu-links a.is-active{color:var(--text); border-color: rgba(230,57,70,.55); background: rgba(230,57,70,.12)}
.menu-links a.btn{justify-content:center}

/* ---------------- UI atoms ---------------- */
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  color:var(--muted);
  font-size:.92rem;
}
.lead{color:var(--muted); font-size:1.06rem; margin:10px 0 0}
.muted{color:var(--muted)}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:var(--text);
  text-decoration:none;
  box-shadow: var(--shadow2);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18)}
.btn-accent{
  background: linear-gradient(135deg, rgba(230,57,70,.95), rgba(230,57,70,.55));
  border-color: rgba(230,57,70,.65);
}
.btn-accent:hover{background: linear-gradient(135deg, rgba(230,57,70,1), rgba(230,57,70,.70))}
.btn-ghost{background: rgba(0,0,0,.22)}
.btn-small{padding:8px 12px; border-radius:12px; font-size:.95rem}

.cta-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}

/* ---------------- Sections ---------------- */
.section{padding:26px 0}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:14px}
.section-head h2{margin:0; font-size: clamp(1.25rem, 2.4vw, 1.6rem)}
.section-head p{margin:0}
.section-foot{display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:14px}

.page-hero{padding:28px 0 14px}
.page-hero h1{margin:8px 0 0; font-size: clamp(1.6rem, 3.2vw, 2.25rem)}

/* ---------------- Hero ---------------- */
.hero{padding:28px 0 18px}
.hero-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:18px;
  align-items:stretch;
}
.hero-copy{
  background:
    radial-gradient(900px 450px at 20% 10%, rgba(230,57,70,.22), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
  border-radius: calc(var(--radius) + 6px);
  padding: clamp(18px, 3vw, 28px);
}
.hero-copy h1{margin:10px 0 0; font-size: clamp(1.7rem, 3.4vw, 2.5rem)}

.hero-points{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.point{display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.18); color:var(--muted); font-size:.92rem}

/* ---------------- Cards & grids ---------------- */
.card{
  background: rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  padding:16px;
}
.card.media{padding:0; overflow:hidden}
.card-head{padding:16px 16px 0}
.card-title{font-weight:700}
.card-sub{display:block; margin-top:4px; color:var(--muted); font-size:.95rem}

.media-wrap{padding:16px}
.media-video{width:100%; height:auto; display:block; border-radius:16px; border:1px solid rgba(255,255,255,.10)}

.grid-3{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px}
.grid-2{display:grid; grid-template-columns: repeat(2, 1fr); gap:14px}

.card-link{text-decoration:none; display:block; transition: transform .15s ease, background .15s ease}
.card-link:hover{transform: translateY(-2px); background: rgba(255,255,255,.03)}
.card-icon{font-size:1.55rem; margin-bottom:8px}
.card-cta{display:inline-block; margin-top:10px; color:rgba(255,255,255,.82)}

/* Services page media grid */
.media-grid{display:grid; gap:12px; padding:16px}
.media-grid video{border-radius:16px}

/* ---------------- Accordion ---------------- */
.accordion{border:1px solid rgba(255,255,255,.10); border-radius:16px; overflow:hidden; margin-top:14px}
.acc-item{border-top:1px solid rgba(255,255,255,.10)}
.acc-item:first-child{border-top:0}
.acc-btn{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  background: transparent;
  border:0;
  color:var(--text);
  cursor:pointer;
  font: inherit;
}
.acc-btn .price{color:var(--accent2); font-weight:700}
.acc-icon{width:16px; height:16px; border-right:2px solid rgba(255,255,255,.65); border-bottom:2px solid rgba(255,255,255,.65); transform: rotate(45deg); transition: transform .18s ease}
.acc-panel{display:none; padding:0 16px 14px; color:var(--muted)}
.acc-panel p{margin:10px 0 0}
.acc-item[data-open="1"] .acc-panel{display:block}
.acc-item[data-open="1"] .acc-icon{transform: rotate(225deg)}
.acc-item[data-open="1"] .acc-btn{background: rgba(255,255,255,.04)}

/* ---------------- Rich text ---------------- */
.richtext h3{margin:14px 0 6px}
.richtext p{margin:0 0 10px; color:var(--muted)}
.richtext a{color:var(--accent2)}

/* ---------------- Forms ---------------- */
.form{display:grid; gap:12px; margin-top:14px}
.form label{display:grid; gap:6px}
.form label span{font-size:.92rem; color:var(--muted)}
.form input,.form textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  color:var(--text);
  outline:none;
}
.form textarea{resize:vertical}
.form input:focus,.form textarea:focus{border-color: rgba(230,57,70,.65); box-shadow: 0 0 0 4px rgba(230,57,70,.18)}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}

/* Contact pills */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px}
.contact-pill{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color:var(--muted);
  text-decoration:none;
}
.contact-pill:hover{background: rgba(255,255,255,.07); color:var(--text)}
.pill-ico{font-size:1.2rem}
.pill-text{font-weight:600}

/* ---------------- Footer ---------------- */
.site-footer{padding:26px 0 40px; color:var(--muted)}
.footer-inner{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.footer-brand{font-weight:700; color:rgba(255,255,255,.86)}
.footer-link{text-decoration:none; padding:8px 10px; border-radius:12px; border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.22)}
.footer-link:hover{background: rgba(255,255,255,.06)}
.visits{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(230,57,70,.55);
  background: rgba(0,0,0,.22);
}
#visitCount{color:var(--accent2); font-weight:800}

/* ---------------- Motion / accessibility ---------------- */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important}
  .nav a,.btn,.card-link{transition:none}
  .menu-backdrop,.menu-drawer,.acc-icon{transition:none}
}

/* ---------------- Responsive ---------------- */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
}
@media (max-width: 760px){
  .nav{display:none}
  .menu-btn{display:inline-flex; align-items:center; justify-content:center}
  body{background-attachment:scroll}
}
@media (max-width: 420px){
  :root{--pad:14px}
  .brand-sub{display:none}
  .brand-logo{width:48px; height:48px}
}


/* --- Utilities (service pages) --- */
.card-content{padding:16px}
.spacer-12{height:12px}
.spacer-16{height:16px}