:root{
  --accent:#2f7d4c;
  --bg:#f4f4f4;
  --text:#1e1e1e;
  --white:#fff;
}
/* ===== reset & base ===== */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Space Grotesk',sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
}

/* ===== HERO vidéo ===== */
.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.hero video {
  position: absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;
  filter: brightness(.4) saturate(.9);
}

.hero header {
  position: relative; z-index: 2;
  color: #fff; text-align: center; padding-top: 80px;
}

.hero::after {
  content: "";
  position: absolute; top:0; left:0; width:100%; height:100%;
  box-shadow: inset 0 0 200px rgba(0,0,0,.5);
}
nav a {
  color: #fff; margin:0 15px; text-decoration:none; font-weight:600; position:relative;
}

nav a::after {
  content: "";
  position:absolute; bottom:-4px; left:0; width:0; height:2px;
  background:#fff; transition:.3s;
}

nav a:hover::after { width:100%; }


/* ===== sections ===== */
section{padding:80px 20px;max-width:1000px;margin:auto;opacity:0;transform:translateY(40px);transition:opacity .6s,transform .6s}
section.visible{opacity:1;transform:none}
section h2{color:var(--accent);margin-bottom:30px;font-size:2.2em}
.second-title{margin-top:60px}

/* listes & boutons */
.tools-list{display:flex;flex-wrap:wrap;gap:30px}
.tools-list div{flex:1 1 280px;background:#fff;padding:25px;border-radius:12px;box-shadow:0 8px 16px rgba(0,0,0,.06);transition:transform .3s}
.tools-list div:hover{transform:translateY(-8px)}

.btn,.btn-link{display:inline-block;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:.3s}
.btn{background:var(--accent);color:#fff;padding:14px 28px;margin-top:25px}
.btn:hover{background:#256c3f;transform:scale(1.03)}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn-link{color:var(--accent);text-decoration:none;margin:8px 0}
.btn-link:hover{color:#1b4b2d}

/* formulaire */
#contactForm{display:flex;flex-direction:column;gap:15px;margin-top:25px}
#contactForm input,#contactForm textarea{padding:12px 14px;border:1px solid #ccc;border-radius:6px;font-family:inherit}
#contactForm textarea{resize:vertical}
.honeypot{display:none}
#merci{display:none;text-align:center;margin-top:40px}

/* back‑to‑top */
#backToTop{
  position:fixed;bottom:20px;right:20px;width:46px;height:46px;border:none;border-radius:50%;
  background:var(--accent);color:#fff;font-size:20px;display:none;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.25);cursor:pointer;z-index:9999;transition:transform .3s
}
#backToTop:hover{transform:scale(1.1)}

/* canvas particules */
#particleCanvas{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none}

/* footer */
footer{background:var(--accent);color:#fff;text-align:center;padding:20px 20px;font-size:.9em}

/* ===== responsive ===== */
@media(max-width:600px){
  .hero-content h1{font-size:2.2rem}
  .hero-content nav a{display:block;margin:10px 0}
}