/* ============================================================
   CHANTIER — Industrial Hi-Vis Lime
   Construction chantier / rénovation énergétique
   bg: dark charcoal (#1A1A18) / text: off-white (#EDECEA) / accent: electric lime (#B8D426)
   CONTRAST GUARANTEE: bg is VERY DARK, text is VERY LIGHT (#EDECEA)
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  font-family:var(--font-body),sans-serif;
  background:var(--p);   /* dark charcoal #1A1A18 */
  color:#EDECEA;          /* off-white — NEVER var(--p) on dark bg */
  overflow-x:hidden;
  margin:0;
}

h1,h2,h3,.fd{font-family:var(--font-heading),sans-serif;letter-spacing:-.01em;text-transform:uppercase}

/* ─── Scroll Reveal ─── */
.rv{opacity:0;transform:translateY(24px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.rv.s1{transition-delay:.1s}.rv.s2{transition-delay:.2s}.rv.s3{transition-delay:.3s}
.rv.on{opacity:1;transform:none}

.rvl{opacity:0;transform:translateX(-30px);transition:opacity .65s cubic-bezier(.16,1,.3,1),transform .65s cubic-bezier(.16,1,.3,1)}
.rvl.on{opacity:1;transform:none}

/* ─── Hi-Vis CTA ─── */
.btn-lime{
  position:relative;overflow:hidden;
  background:var(--a);color:#1A1A18;font-weight:800;
  transition:transform .18s,box-shadow .18s;
  display:inline-flex;align-items:center;justify-content:center;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
}
.btn-lime::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
  transform:translateX(-120%);transition:transform .45s;
}
.btn-lime:hover::before{transform:translateX(120%)}
.btn-lime:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(var(--a-rgb),.4)}

/* ─── Dark outlined button ─── */
.btn-frame{
  background:transparent;
  border:2px solid rgba(237,236,234,.2);
  color:#EDECEA;
  transition:border-color .2s,background .2s;
  display:inline-flex;align-items:center;justify-content:center;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
}
.btn-frame:hover{border-color:var(--a);background:rgba(var(--a-rgb),.06)}

/* ─── Card hover ─── */
.ch{transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s}
.ch:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(0,0,0,.5)}

/* ─── Lime underline ─── */
.al{position:relative}
.al::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background:var(--a);transition:width .3s}
.al:hover::after{width:100%}

/* ─── Safety stripe diagonal ─── */
.safety-stripe{
  background-image:repeating-linear-gradient(
    -45deg,
    rgba(var(--a-rgb),.12) 0px,
    rgba(var(--a-rgb),.12) 4px,
    transparent 4px,
    transparent 16px
  );
}

/* ─── Grid texture bg ─── */
.grid-bg{
  background-image:
    linear-gradient(rgba(237,236,234,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(237,236,234,.04) 1px,transparent 1px);
  background-size:40px 40px;
}

/* ─── Section counter ─── */
.sn{
  font-family:var(--font-heading),sans-serif;
  font-size:clamp(100px,18vw,240px);
  font-weight:900;line-height:1;
  color:var(--a);opacity:.04;
  position:absolute;
  user-select:none;pointer-events:none;
  letter-spacing:-.04em;
}

/* ─── Section label ─── */
.sec-label{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--a);
}
.sec-label::before{content:'//';opacity:.6}

/* ─── Service card ─── */
.svc-card{
  position:relative;overflow:hidden;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%);
  transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s;
}
.svc-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(0,0,0,.5)}
.svc-card::after{
  content:'';position:absolute;top:0;right:0;
  width:0;height:0;
  border-style:solid;
  border-width:0 16px 16px 0;
  border-color:transparent var(--a) transparent transparent;
}

/* ─── Stat bar ─── */
.stat-bar{
  height:3px;
  background:rgba(237,236,234,.1);
  position:relative;overflow:hidden;
}
.stat-bar-fill{
  position:absolute;inset-y:0;left:0;
  background:var(--a);
  animation:barFill 1.2s cubic-bezier(.16,1,.3,1) forwards;
  transform-origin:left;
}
@keyframes barFill{from{width:0}to{width:var(--w,60%)}}

/* ─── Tag chips ─── */
.lime-tag{
  display:inline-flex;align-items:center;
  padding:3px 10px;
  font-size:9px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  background:rgba(var(--a-rgb),.12);
  color:var(--a);
  clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,0 100%);
}

/* ─── Testimonial ─── */
.t-card{
  border-left:3px solid rgba(var(--a-rgb),.3);
  transition:border-color .3s;
  padding-left:20px;
}
.t-card:hover{border-color:var(--a)}

/* ─── Overline ─── */
.oline{display:flex;align-items:center;gap:10px}
.oline::before{content:'';width:32px;height:2px;background:var(--a)}
.oline span{font-size:10px;font-weight:800;letter-spacing:.28em;text-transform:uppercase;color:var(--a)}

/* ─── Stat value ─── */
.stat-v{
  font-family:var(--font-heading),sans-serif;
  font-size:clamp(48px,6vw,80px);font-weight:900;line-height:1;
  color:var(--a);letter-spacing:-.02em;
}

/* ─── Contrast fix — white text on dark primary backgrounds ─── */
[style*="background:var(--p)"]{color:#fff}

/* ─── Hero badge — clears fixed nav ─── */
#hero > div{padding-top:5.5rem}

/* ─── Navbar ─── */
#nav{
  transition:background .3s,box-shadow .3s;
  background:var(--p);
  border-bottom:2px solid var(--a);
}
#nav.sc{box-shadow:0 4px 24px rgba(0,0,0,.5)}

/* ─── Mobile menu ─── */
#mmenu{transform:translateX(100%);opacity:0;pointer-events:none;transition:transform .35s cubic-bezier(.16,1,.3,1),opacity .3s}
#mmenu.op{transform:translateX(0);opacity:1;pointer-events:all}

input:focus,select:focus,textarea:focus{outline:2px solid var(--a);outline-offset:1px}