/* =====================================================
   BERONYX — COUCHE GLOBALE "DARK VOID" v2
   Chargée en dernier sur toutes les pages publiques
   (injectée par includes/header.php)
===================================================== */
:root{
  --bx-void:#000; --bx-card:#050505; --bx-text:#fff;
  --bx-muted:#9a9a9a; --bx-muted2:#bdbdbd;
  --bx-blue:#0055FF; --bx-green:#00E5A3;
}
html{ scroll-behavior:smooth; }
body{ overflow-x:hidden; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; }

/* ---------- Transition de page (fondu au noir) ---------- */
#bx-fade{ position:fixed; inset:0; background:#000; z-index:99999; pointer-events:none; opacity:0; transition:opacity .45s ease; }
#bx-fade.on{ opacity:1; pointer-events:all; }
body.bx-enter{ animation:bxEnter .7s ease both; }
@keyframes bxEnter{ from{ opacity:0; } to{ opacity:1; } }

/* ---------- Typographie uniforme ---------- */
h1,h2{ font-weight:400 !important; letter-spacing:-0.04em !important; line-height:1.04; color:#fff; }
h1{ font-size:clamp(40px,6vw,88px); }
h2{ font-size:clamp(30px,4.2vw,58px); }
h3,h4{ font-weight:400; letter-spacing:-0.02em; color:#fff; }
p, li{ font-weight:200; font-size:18px; line-height:1.65; color:var(--bx-muted2); }
a{ transition:color .25s ease; }

/* ---------- Liens secondaires : texte nu, surlignage discret ---------- */
main a:not(.btn):not(.bx-pill):not(.bx-pill-ghost):not([class*="btn"]),
.footer-col a, .foot-links a{
  background-image:linear-gradient(var(--bx-blue),var(--bx-blue));
  background-repeat:no-repeat; background-position:0 100%; background-size:0 1px;
  transition:background-size .35s ease, color .25s ease;
}
main a:not(.btn):not(.bx-pill):not(.bx-pill-ghost):not([class*="btn"]):hover,
.footer-col a:hover, .foot-links a:hover{ background-size:100% 1px; color:#fff; }

/* ---------- Boutons pilule + micro-interaction lumineuse ---------- */
.bx-pill, .btn-primary, .btn-sub{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px; border-radius:999px; background:var(--bx-blue); color:#fff !important;
  font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; border:0; cursor:pointer;
  position:relative; overflow:hidden; text-decoration:none;
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.bx-pill::after, .btn-primary::after, .btn-sub::after{
  content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg); transition:left .6s ease;
}
.bx-pill:hover::after, .btn-primary:hover::after, .btn-sub:hover::after{ left:140%; }
.bx-pill:hover, .btn-primary:hover, .btn-sub:hover{ transform:translateY(-2px); box-shadow:0 10px 34px rgba(0,85,255,.5) !important; background:#1a66ff !important; }
.bx-pill-ghost{
  display:inline-flex; align-items:center; padding:13px 27px; border-radius:999px; background:transparent;
  border:1px solid rgba(255,255,255,.28); color:#fff !important; font-size:14px; font-weight:600;
  text-transform:uppercase; letter-spacing:.05em; text-decoration:none; transition:all .3s ease;
}
.bx-pill-ghost:hover{ border-color:var(--bx-green); color:var(--bx-green) !important; transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,229,163,.22); }

/* ---------- Structure par le vide : cartes flottantes ---------- */
.service-card,.pricing-card,.sub-card,.service-block,.project-card,.avis-card,.avis-form-box,.audit-box,.why-card{
  background:transparent !important; border:0 !important; box-shadow:none !important;
  position:relative; transition:transform .45s cubic-bezier(.2,.7,.2,1), background .45s ease;
}
.service-card:hover,.pricing-card:hover,.sub-card:hover,.service-block:hover,.project-card:hover{
  transform:translateY(-8px); background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(0,85,255,.14),transparent 60%) !important;
}
.pricing-card.featured{ background:radial-gradient(500px circle at 50% 0%,rgba(0,229,163,.13),transparent 65%) !important; }
.pricing-card li{ border-bottom:0 !important; }
.avis-card p,.avis-empty,.avis-form-box p,.audit-box p{ color:var(--bx-muted2) !important; }
.avis-empty{ background:transparent !important; }
.avis-error,.audit-error{ background:rgba(255,60,60,.1) !important; color:#ff8a8a !important; border-radius:24px; }
[style*="background:#f8f9fa"],[style*="background:#f0fdf4"],[style*="background:#f0f9ff"],[style*="background:#f8f9fb"]{
  background:transparent !important; color:var(--bx-muted2) !important; border-color:transparent !important;
}
.tech-tag{ background:transparent !important; color:var(--bx-green) !important; border:1px solid rgba(0,229,163,.35); }

/* ---------- Formulaires : ligne fine, focus bleu ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=range]),
textarea, select{
  background:transparent !important; color:#fff !important; border:0 !important;
  border-bottom:1px solid var(--bx-muted) !important; border-radius:0 !important;
  padding:14px 2px !important; font-family:inherit; font-weight:200; font-size:17px; outline:none !important;
  box-shadow:none !important; transition:border-color .3s ease, box-shadow .3s ease !important;
}
input::placeholder, textarea::placeholder{ color:var(--bx-muted) !important; font-weight:200; }
input:focus, textarea:focus, select:focus{
  border-bottom-color:var(--bx-blue) !important; box-shadow:0 1px 0 0 var(--bx-blue), 0 12px 18px -14px rgba(0,85,255,.9) !important;
}
select option{ background:#000; color:#fff; }
label{ color:var(--bx-muted2); font-weight:400; font-size:14px; }
button[type=submit]:not(.btn-sub){ background:var(--bx-blue); color:#fff; border:0; border-radius:999px; padding:14px 30px; font-weight:600; cursor:pointer; transition:all .3s ease; }
button[type=submit]:not(.btn-sub):hover{ background:#1a66ff; transform:translateY(-2px); box-shadow:0 10px 30px rgba(0,85,255,.5); }
.form-wrapper-blue,.contact-card-container{ background:transparent !important; box-shadow:none !important; border:0 !important; }

/* ---------- Header transparent -> flou au scroll ---------- */
header{ position:fixed !important; top:0; left:0; right:0; background:transparent !important; backdrop-filter:none; transition:background .4s ease, backdrop-filter .4s ease, padding .3s ease; padding:14px 0 !important; }
header.bx-scrolled{ background:rgba(0,0,0,.78) !important; backdrop-filter:blur(16px); }
body{ padding-top:0; }
.floating-logo{ display:flex !important; align-items:center; text-decoration:none; }
.floating-logo svg{ transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.floating-logo:hover svg{ transform:rotate(90deg); }

/* ---------- Révélation au scroll (bas -> haut + léger flou) ---------- */
.bx-reveal{ opacity:0; transform:translateY(30px); filter:blur(7px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1), filter .9s ease; transition-delay:var(--d,0s); }
.bx-reveal.bx-in{ opacity:1; transform:none; filter:blur(0); }

/* ---------- Accueil ---------- */
.bx-hero{ min-height:100vh; display:flex; align-items:center; padding:150px 0 90px; position:relative; }
.bx-wrap{ max-width:1240px; margin:0 auto; padding:0 32px; width:100%; }
.bx-hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; }
.bx-eyebrow{ font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.15em; color:var(--bx-green); margin-bottom:24px; display:block; }
.bx-hero h1{ margin-bottom:28px; }
.bx-hero h1 em{ font-style:normal; color:var(--bx-blue); }
.bx-hero-sub{ max-width:490px; margin-bottom:42px; }
.bx-btns{ display:flex; gap:16px; flex-wrap:wrap; }
.bx-visual{ position:relative; aspect-ratio:1/1; max-width:540px; justify-self:end; width:100%; }
.bx-visual canvas{ width:100%; height:100%; display:block; }
.bx-sec{ padding:120px 0; }
.bx-label{ font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:var(--bx-muted); display:block; margin-bottom:18px; }
.bx-list{ margin-top:64px; display:grid; gap:64px; }
.bx-cols3{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.bx-item h3{ font-size:24px; margin-bottom:12px; }
.bx-item p{ font-size:16px; color:var(--bx-muted); }
.bx-item .bx-ico{ width:40px; height:40px; margin-bottom:22px; stroke:var(--bx-blue); fill:none; stroke-width:1.2; transition:transform .5s ease, stroke .3s ease; }
.bx-item:hover .bx-ico{ transform:translateY(-4px) scale(1.08); stroke:var(--bx-green); }
.bx-work{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:60px; margin-top:64px; }
.bx-work article{ padding:8px 0; transition:transform .45s cubic-bezier(.2,.7,.2,1); }
.bx-work article:hover{ transform:translateY(-8px); }
.bx-work h3{ font-size:26px; margin:22px 0 12px; }
.bx-work p{ font-size:16px; color:var(--bx-muted); }
.bx-tags{ display:flex; gap:8px; flex-wrap:wrap; margin:18px 0 22px; }
.bx-tags span{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--bx-green); border:1px solid rgba(0,229,163,.35); border-radius:999px; padding:5px 12px; }
.bx-steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:40px; margin-top:64px; }
.bx-step-n{ width:38px; height:38px; border-radius:50%; border:1px solid var(--bx-blue); color:var(--bx-blue); display:flex; align-items:center; justify-content:center; font-size:14px; margin-bottom:22px; transition:all .35s ease; }
.bx-step:hover .bx-step-n{ background:var(--bx-blue); color:#fff; box-shadow:0 0 30px rgba(0,85,255,.6); }
.bx-step h4{ font-size:19px; margin-bottom:8px; } .bx-step p{ font-size:15px; color:var(--bx-muted); }
.bx-stars{ color:var(--bx-green); letter-spacing:3px; font-size:14px; margin-bottom:16px; }
.bx-quote p{ font-style:italic; font-size:17px; }
.bx-faq{ margin-top:56px; max-width:800px; }
.bx-faq details{ padding:24px 0; }
.bx-faq summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; font-size:20px; font-weight:400; color:#fff; }
.bx-faq summary::-webkit-details-marker{ display:none; }
.bx-faq summary i{ font-style:normal; font-size:26px; color:var(--bx-muted); transition:transform .35s ease, color .3s ease; }
.bx-faq details[open] summary i{ transform:rotate(45deg); color:var(--bx-blue); }
.bx-faq details p{ font-size:16px; color:var(--bx-muted); margin-top:14px; max-width:660px; }
.bx-cta{ text-align:center; padding:160px 0; position:relative; }
.bx-cta h2{ max-width:820px; margin:0 auto 24px; } .bx-cta p{ max-width:540px; margin:0 auto 42px; color:var(--bx-muted); }

/* ---------- Footer ---------- */
footer{ position:relative; overflow:hidden; border-top:0 !important; padding:120px 0 40px !important; background:#000 !important; }
.footer-top{ position:relative; z-index:2; }
.footer-col h4{ font-size:13px !important; font-weight:600 !important; text-transform:uppercase; letter-spacing:.1em; color:var(--bx-muted) !important; margin-bottom:18px; }
.footer-col li,.footer-col a{ font-size:15px; font-weight:400; }
.bx-foot-big{ font-size:clamp(70px,17vw,260px); font-weight:500; letter-spacing:-0.05em; line-height:.8; text-align:center; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.14); user-select:none; margin:70px 0 10px; transition:-webkit-text-stroke-color .6s ease; }
footer:hover .bx-foot-big{ -webkit-text-stroke-color:rgba(0,85,255,.55); }
.footer-bottom{ border:0 !important; position:relative; z-index:2; }
.footer-legal-links a{ font-weight:600; text-transform:uppercase; letter-spacing:.08em; font-size:12px; }

/* ---------- Pages internes : respiration ---------- */
main section, .container > section{ padding-top:60px; padding-bottom:60px; }
hr{ display:none; }

@media (max-width:900px){
  .bx-hero-grid{ grid-template-columns:1fr; }
  .bx-visual{ justify-self:center; max-width:340px; }
  .bx-sec{ padding:80px 0; }
  p,li{ font-size:16px; }
}
@media (prefers-reduced-motion:reduce){
  .bx-reveal{ opacity:1; transform:none; filter:none; transition:none; }
  html{ scroll-behavior:auto; } body.bx-enter{ animation:none; }
}

/* =====================================================
   CORRECTIFS v9 : fond noir global, logo, menu, avis
===================================================== */
html, body{ background:#000 !important; color:#fff; font-family:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif; }
main, section, .container, .avis-wrap, .audit-wrap, [class*="-container"]:not(.header-container){ background-color:transparent; }
[style*="background:#fff"],[style*="background: #fff"],[style*="background:white"],[style*="background: white"],[style*="background:#ffffff"]{
  background:transparent !important; color:#fff !important; border:1px solid rgba(255,255,255,.28) !important; box-shadow:none !important;
}
label, .avis-form-box label, .audit-box label{ color:var(--bx-muted2) !important; font-weight:400; }
.avis-form-box, .audit-box{ padding:20px 0 !important; }
.avis-card{ padding:8px 0 !important; }
.avis-card, .avis-card *{ color:var(--bx-muted2); } .avis-card strong,.avis-card h3,.avis-card h4{ color:#fff; }
.avis-empty i,.avis-empty .fa-comment-dots{ color:var(--bx-blue) !important; }
.stars i, .avis-card .stars{ color:var(--bx-green) !important; }
a[href*="g.page"], a[href*="google"][class*="avis"]{ background:transparent !important; border:1px solid rgba(255,255,255,.28) !important; color:#fff !important; border-radius:999px !important; box-shadow:none !important; }
a[href*="g.page"]:hover{ border-color:var(--bx-green) !important; color:var(--bx-green) !important; }

/* Logo : bulle conservée, texte BERONYX de nouveau lisible */
header .floating-logo{
  position:fixed !important; top:12px !important; left:20px !important; z-index:2000;
  width:112px !important; height:112px !important; padding:0 !important; border-radius:50% !important;
  background:#fff !important; box-shadow:0 0 0 1px rgba(255,255,255,.9), 0 0 40px rgba(0,85,255,.35) !important; filter:none !important;
  display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:5px; overflow:hidden;
  transition:transform .4s ease, box-shadow .4s ease !important;
}
header .floating-logo:hover{ transform:scale(1.06); box-shadow:0 0 0 1px #fff, 0 0 55px rgba(0,229,163,.5) !important; }
header .floating-logo svg{ width:36px !important; height:36px !important; margin:0 !important; }
header .floating-logo svg rect{ stroke:#000 !important; }
header .floating-logo span{ margin:0 !important; color:#000 !important; font-size:13.5px !important; font-weight:600 !important; letter-spacing:.06em !important; line-height:1; display:block; }
.header-container::before{ width:135px !important; flex:none; }

/* Menu : une seule ligne, sans chevauchement */
.header-container{ gap:18px; }
.nav-menu{ gap:26px !important; flex-wrap:nowrap; align-items:center; }
.nav-menu a{ white-space:nowrap; font-size:13px !important; letter-spacing:.06em !important; }
.nav-menu a.bx-pill{ padding:11px 20px; }
.header-phone-cta{ white-space:nowrap; flex:none; background:transparent !important; border:1px solid rgba(255,255,255,.28); box-shadow:none !important; }
@media (max-width:1180px){ .nav-menu{ gap:16px !important; } .nav-menu a{ font-size:12px !important; } .header-phone-cta{ display:none !important; } }
@media (max-width:900px){ header .floating-logo{ width:88px !important; height:88px !important; top:8px !important; left:12px !important; } header .floating-logo svg{ width:28px !important; height:28px !important; } header .floating-logo span{ font-size:11px !important; } .header-container::before{ width:100px !important; } }