:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#0b1220;
  --muted:#4b5565;
  --blue:#0b5cff;
  --green:#12b76a;
  --border:#e6e8ef;
  --shadow: 0 14px 40px rgba(10,20,40,.10);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}
.container{width:min(1100px,92%);margin:auto}

.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:14px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:40px;width:auto}
.menu{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.menu a{color:var(--muted);font-weight:600;font-size:14px}
.menu a:hover{color:var(--text)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 14px;border-radius:14px;font-weight:700;font-size:14px;
  border:1px solid var(--border);background:transparent;color:var(--text);
}
.btn.primary{background:linear-gradient(135deg,var(--blue),#0aa4ff);border:0}
.btn.secondary{background:linear-gradient(135deg,var(--green),#11b85a);border:0;color:#062012}
.hero{
  padding:72px 0 40px;
  background:
    linear-gradient(90deg, rgba(15,17,21,.78) 0%, rgba(15,17,21,.55) 55%, rgba(15,17,21,.35) 100%),
    url('assets/hero-bg.jpg') center/cover no-repeat;
}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:center}
.kicker{color:var(--muted);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:12px}
h1{font-size:44px;line-height:1.05;margin:10px 0 14px}
.lead{color:var(--muted);font-size:16px;line-height:1.6;max-width:60ch}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.hero-card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow);
  padding:18px;
}
.hero-card img{width:100%;height:auto;border-radius:16px;border:1px solid var(--border);background:#0b0d12}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.stat{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:14px}
.stat strong{display:block;font-size:18px}
.stat span{display:block;color:var(--muted);font-size:12px;margin-top:4px}

.section{padding:46px 0}
.section h2{font-size:28px;margin:0 0 10px}
.section p{color:var(--muted);margin:0 0 18px;line-height:1.7}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{
  background:var(--card);border:1px solid var(--border);border-radius:22px;
  padding:18px;box-shadow:var(--shadow);
}
.card h3{margin:0 0 8px}
.badge{display:inline-flex;gap:8px;align-items:center;
  padding:6px 10px;border:1px solid var(--border);border-radius:999px;
  color:var(--muted);font-weight:700;font-size:12px
}
.footer{
  border-top:1px solid var(--border);
  padding:22px 0;color:var(--muted);font-size:13px
}

.form{display:grid;gap:10px}
.input, textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:#0b0d12;
  /* Le fond du formulaire est sombre : forcer un texte lisible */
  color:#ffffff;
  caret-color:#ffffff;
  outline:none;
}

.input::placeholder,
textarea::placeholder{
  color:rgba(255,255,255,.65);
}
textarea{min-height:120px;resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.small{font-size:12px;color:var(--muted)}

.whatsapp-float{
  position:fixed;
  right:18px;
  bottom:18px;
  width:56px;
  height:56px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--green),#11b85a);
  box-shadow:var(--shadow);
  z-index:999;
}
.whatsapp-float svg{width:26px;height:26px;fill:white}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  h1{font-size:36px}
  .grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .two{grid-template-columns:1fr}
}

/* Carousel */
.carousel{position:relative; margin-top:14px;}
.carousel-track{
  display:flex; gap:14px;
  overflow:auto; scroll-snap-type:x mandatory;
  padding:10px 6px;
  border:1px solid var(--border);
  border-radius:18px;
  background:rgba(255,255,255,.03);
}
.carousel-item{
  min-width:320px; max-width:460px;
  flex:0 0 auto;
  scroll-snap-align:center;
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px;
  background:rgba(255,255,255,.02);
}
.carousel-title{font-weight:800; margin-bottom:10px;}
.carousel-item img{width:100%; border-radius:14px; border:1px solid var(--border); cursor:zoom-in;}
.carousel-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:999px;
  border:1px solid var(--border);
  background:rgba(15,17,21,.6);
  color:#fff; font-size:26px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow);
}
.carousel-btn.prev{left:-10px;}
.carousel-btn.next{right:-10px;}
.carousel-dots{display:flex; gap:8px; justify-content:center; margin-top:10px;}
.carousel-dots .dot{
  width:10px; height:10px; border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.15);
}
.carousel-dots .dot.active{background:rgba(255,255,255,.75);}
@media(max-width:640px){
  .carousel-btn.prev{left:4px;}
  .carousel-btn.next{right:4px;}
  .carousel-item{min-width:270px;}
}

/* Lightbox */
.no-scroll{overflow:hidden;}
.lightbox{
  position:fixed; inset:0; display:none;
  background:rgba(0,0,0,.75);
  z-index:1000;
  padding:18px;
}
.lightbox.open{display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px;}
.lightbox-img{
  max-width:min(980px, 96vw);
  max-height:78vh;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.15);
  box-shadow:var(--shadow);
}
.lightbox-caption{color:#fff; opacity:.92; text-align:center; max-width:980px;}
.lightbox-close{
  position:absolute; top:14px; right:14px;
  width:44px; height:44px; border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.35);
  color:#fff; font-size:28px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}

/* Page backgrounds (light, distinct per page) */
body{position:relative; min-height:100vh;}
body::before{
  content:"";
  position:fixed; inset:0;
  z-index:-1;
  opacity:.12;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  filter:saturate(1.05) contrast(1.05);
}
.page-home::before{background-image:url("assets/hero-bg.jpg"); opacity:.16;}
.page-services::before{background-image:url("assets/equip_compresseur.jpg"); opacity:.10;}
.page-secteurs::before{background-image:url("assets/photo6.jpg"); opacity:.10;}
.page-realisations::before{background-image:url("assets/photo2.jpg"); opacity:.10;}
.page-apropos::before{background-image:url("assets/photo4.jpg"); opacity:.10;}
.page-contact::before{background-image:url("assets/photo1.jpg"); opacity:.08;}

.section{background:transparent;}
.card{
  background:rgba(255,255,255,.86);
  backdrop-filter: blur(6px);
}
.footer{
  background:rgba(255,255,255,.85);
  border-top:1px solid var(--border);
}
.footer-top{display:flex;align-items:center;gap:14px;margin-bottom:10px;}
.footer-logo{height:42px;width:auto;border-radius:10px;border:1px solid var(--border);background:#0f1115;padding:6px;}
.brand img{height:44px;width:auto;}


/* Lisibilité - badge en haut de la carte (hero) */
.hero-card .badge{
  background: rgba(0,0,0,0.55);
  color: #fff;
  border-color: rgba(255,255,255,0.25);
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}

/* Lisibilité - bouton "Voir nos services" sur hero */
.btn.outline{
  background: rgba(255,255,255,0.88);
  color: #0b1220;
  border: 2px solid var(--blue);
}
.btn.outline:hover{
  background: var(--blue);
  color: #fff;
}

/* Bonus: légère amélioration contraste du bloc CTA sur image */
.hero .cta .btn{
  backdrop-filter: blur(4px);
}


/* === Hero text color forced to Gold === */
.hero-content h1,
.hero-content p,
.hero-content span {
  color: #FFD700 !important;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.9);
}


/* === Force HERO text to Gold for visibility === */
.hero .kicker,
.hero h1,
.hero .lead{
  color:#FFD700 !important;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.9);
}