:root{
  --accent:#ACC4A3; /* Bethel green */
  --black:#000000;
  --white:#FFFFFF;
  --jet:#0a0a0a;
  --gray:#1a1a1a;
}

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

.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(0,0,0,.6);backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.08)
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo{font-weight:800;letter-spacing:.5px}
.logo span{font-weight:600;color:var(--accent)}
.nav a{margin-left:18px;opacity:.9}
.nav .btn{margin-left:22px}

.btn{
  display:inline-block;padding:14px 18px;border-radius:10px;border:1px solid rgba(255,255,255,.22);
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
  font-weight:600
}
.btn:hover{transform:translateY(-2px)}
.btn.accent{background:var(--accent);color:var(--black);border-color:transparent}
.btn.outline{background:transparent}
.pulse{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(172,196,163,.6)}
  70%{box-shadow:0 0 0 18px rgba(172,196,163,0)}
  100%{box-shadow:0 0 0 0 rgba(172,196,163,0)}
}

/* Cinematic intro */
#cinematic{
  position:fixed;inset:0;background:#000;display:grid;place-items:center;text-align:center;
  gap:10px;
  animation:cinema-out 1.8s ease 2.2s forwards;
}
#cinematic .film-grain{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);background-size:3px 3px;mix-blend-mode:overlay;opacity:.4}
#cinematic .blur-stage{position:absolute;inset:0;background-image:url('assets/images/');background-size:cover;background-position:center;filter:blur(18px) brightness(.7);animation:focus-in 2s ease forwards}
#cinematic .brand{position:relative;font-size:40px;letter-spacing:3px;margin:0}
#cinematic .tagline{margin:0;color:#d7d7d7;opacity:.9}
@keyframes focus-in{from{filter:blur(22px) brightness(.5)}to{filter:blur(0) brightness(.8)}}
@keyframes cinema-out{to{opacity:0;visibility:hidden;transform:scale(1.02)}}

/* HERO */
.hero{position:relative;min-height:88svh;display:grid;align-items:end}
.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.2) brightness(.7);transform:scale(1.06);animation:hero-kenburns 14s ease-in-out infinite alternate}
@keyframes hero-kenburns{to{transform:scale(1.12)}}
.hero-media .overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.65) 65%, rgba(0,0,0,.8) 100%)} 
.hero-content{position:relative;padding:64px 0 72px}
.hero h2{font-size:44px;line-height:1.1;margin:0 0 10px}
.hero p{max-width:820px;opacity:.95}
.cta-group{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.micro-points{display:flex;gap:10px;margin-top:24px}
.point{display:inline-flex;align-items:center;justify-content:center;height:28px;padding:0 12px;border:1px solid rgba(255,255,255,.16);border-radius:20px;font-size:12px;opacity:.85}
.point::after{content:attr(data-key)}

/* SECTION: Services */
section{padding:72px 0}
.section-head h3{margin:0 0 6px;font-size:32px}
.section-head .sub{opacity:.7;margin:0 0 26px}

.process-rail{display:grid;gap:26px;grid-template-columns:repeat(3,1fr)}
.process-frame{background:var(--gray);border:1px solid rgba(255,255,255,.08);border-radius:16px;overflow:hidden}
.legend{margin:10px 14px 14px;opacity:.85;font-size:14px}

/* Before/After slider */
.before-after{position:relative;aspect-ratio:4/3;overflow:hidden}
.before-after img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.before-after .before{filter:grayscale(.9) blur(1px) brightness(.6);clip-path:inset(0 50% 0 0)}
.before-after .after{clip-path:inset(0 0 0 0)}
.before-after:hover .before{clip-path:inset(0 80% 0 0)}
.before-after .ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:rgba(255,255,255,.6);transition:left .4s ease}
.before-after:hover .ba-handle{left:80%}

/* Kenburns frame */
.kenburns{position:relative;aspect-ratio:4/3;overflow:hidden}
.kenburns img{width:100%;height:100%;object-fit:cover;transform:scale(1.05);animation:kb 12s ease-in-out infinite alternate}
@keyframes kb{to{transform:scale(1.12)}}

/* Keys lines */
.key-lines{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.key{border:1px solid rgba(255,255,255,.16);padding:10px 12px;border-radius:999px;font-size:13px;opacity:.9}

/* Gain de temps (morph) */
.gain-temps .clock-to-car{display:grid;grid-template-columns:120px 1fr;gap:22px;align-items:center}
.icon{width:100%;height:auto;color:var(--accent)}
.icon #car{opacity:0;transform:translateX(12px)}
.icon.animate #clock{opacity:0;transform:translateX(-12px);transition:all .6s ease .2s}
.icon.animate #car{opacity:1;transition:opacity .6s ease .2s, transform .6s ease .2s;transform:none}

/* Addons cards */
.cards{display:grid;gap:22px;grid-template-columns:repeat(4,1fr)}
.card{background:var(--gray);border:1px solid rgba(255,255,255,.08);border-radius:16px;overflow:hidden;transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.card h4{margin:12px 14px 0}
.card p{margin:8px 14px 16px;opacity:.85;font-size:14px}
.clip-zoom{position:relative;aspect-ratio:4/3;overflow:hidden}
.clip-zoom img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform .7s ease}
.card:hover .clip-zoom img{transform:scale(1.12)}

/* Temoignages */
.temoignages .quotes{display:grid;gap:16px}
.cards-avis{display:grid;gap:18px;grid-template-columns:repeat(3,1fr);margin-top:8px}
.avis{margin:0;padding:16px 18px;background:var(--gray);border:1px solid rgba(255,255,255,.08);border-radius:12px}
.avis .stars{letter-spacing:3px;font-size:18px;color:var(--accent);margin-bottom:8px}
.avis blockquote{margin:0 0 10px 0;opacity:.95}
.avis figcaption{opacity:.8;font-size:14px}

/* CTA Final */
.cta-final .center{text-align:center}
.cta-final h3{font-size:32px;margin:0 0 12px}
.cta-final p{opacity:.9;margin:0 0 16px}

/* Booking form */
.booking{margin:22px auto 28px;background:var(--gray);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:16px}
.booking .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.booking label{display:flex;flex-direction:column;font-size:14px;gap:6px}
.booking input,.booking select,.booking textarea{
  background:#0f0f0f;border:1px solid rgba(255,255,255,.12);color:#fff;border-radius:10px;padding:12px;font:inherit
}
.booking button{margin-top:12px}

/* Footer */
.site-footer{padding:30px 0;background:#080808;border-top:1px solid rgba(255,255,255,.08);text-align:center;opacity:.9}

/* Responsive */
@media (max-width: 1000px){
  .process-rail{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:1fr 1fr}
}
@media (max-width: 900px){
  .cards-avis{grid-template-columns:1fr 1fr}
  .booking .grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .gain-temps .clock-to-car{grid-template-columns:1fr}
  .process-rail{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .cards-avis{grid-template-columns:1fr}
  .booking .grid{grid-template-columns:1fr}
  .hero h2{font-size:34px}
}