:root{--green:#002822;--text:var(--green);--muted:#f7f7f7}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,Helvetica,sans-serif;color:var(--text);line-height:1.6}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
a{text-decoration:none;color:inherit}
/* Header */
.site-header{position:sticky;top:0;background:var(--green);color:#fff;z-index:1000;box-shadow:0 6px 14px rgba(0,0,0,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.logo{height:120px;display:block}
.menu{list-style:none;display:flex;gap:18px;margin:0;padding:0}
.menu a{color:#fff;font-weight:600;opacity:.95}
.menu a:hover{opacity:1}
.lang{border:1px solid rgba(255,255,255,.4);padding:4px 8px;border-radius:6px}
/* Hero */
.hero{min-height:85vh;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;background:linear-gradient(rgba(0, 40, 34,.30),rgba(0,40,34,.30)),url('/images/hero.jpg') center/cover no-repeat;padding:80px 20px}
.hero h1{font-size:clamp(32px,5vw,56px);margin:0 0 10px}
.hero p{font-size:clamp(18px,2.8vw,22px);margin:0 0 16px}
.btn{display:inline-block;background:#fff;color:var(--green);padding:12px 18px;border-radius:8px;font-weight:700}
section{padding:56px 0}
h2{text-align:center;margin:0 0 28px}
/* Before/After */
.ba-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.ba{position:relative;aspect-ratio:16/9;background:#ddd;border-radius:12px;overflow:hidden}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .after{clip-path:inset(0 calc(100% - 50%) 0 0)}
.ba input[type=range]{position:absolute;left:0;right:0;bottom:0;width:100%}
/* Footer */
.site-footer{background:var(--green);color:var(--muted);text-align:center;padding:18px;margin-top:40px}
/* Responsive */
@media (max-width:760px){.menu{gap:12px}.logo{height:60px}.ba-grid{grid-template-columns:1fr}}
.service-card {
border: 2px solid var(--green);
border-radius: 12px;
background: var(--muted); /* fond général (gris clair) */
padding: 20px;
text-align: center;
transition: transform .2s ease, box-shadow .2s ease;
}

/* Section Services (style fond vert, texte blanc) */
.services {
padding: 56px 0;
background: var(--muted); /* fond général (gris clair) */
}

.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Toujours 3 colonnes sur grand écran */
gap: 20px;
margin-top: 30px;
}

/* Tablette */
@media (max-width: 980px) {
.services-grid {
grid-template-columns: repeat(2, 1fr); /* 2 colonnes */
}
}

/* Mobile */
@media (max-width: 640px) {
.services-grid {
grid-template-columns: 1fr; /* 1 colonne */
}
}

.service-card {
background: var(--green); /* fond vert */
color: #fff; /* texte blanc */
border-radius: 10px;
padding: 20px 16px;
text-align: center;
transition: transform .2s ease, box-shadow .2s ease;
}

.service-card h3 {
font-weight: 700; /* titre en gras */
margin: 0 0 10px;
font-size: 18px;
}

.service-card ul {
margin: 0;
padding: 0;
list-style: none; /* pas de puces */
font-size: 14px;
}

.service-card li {
margin: 4px 0;
opacity: 0.9;
}

/* Effet hover */
.service-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 18px rgba(0,0,0,.15);
}

.realisations {
padding: 56px 0;
background: var(--muted); /* fond général (gris clair) */
}

.realisations .real-grid {
display: flex; /* les photos sur une seule ligne */
gap: 20px; /* espace entre elles */
justify-content: center; /* centrage horizontal */
margin-top: 30px;
flex-wrap: nowrap; /* pas de retour à la ligne */
overflow-x: auto; /* permet le défilement si ça dépasse */
}

.realisations .real-item {
flex: 0 0 auto; /* garde la taille de chaque bloc */
max-width: 320px; /* largeur max d’une photo */
text-align: center;
}

.realisations .real-item img {
width: 100%;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
/* Bouton spécifique Réalisations */
.realisations .btn {
background: var(--green); /* couleur de fond (gris foncé par ex) */
color: #fff; /* texte blanc */
}

.realisations .btn:hover {
background: #222; /* couleur au survol */
}
/* ====== Page Réalisations (galerie) ====== */
.realisations-page {
padding: 56px 0;
background: var(--muted); /* fond gris clair */
}

.realisations-page h1 {
text-align: center;
margin-bottom: 10px;
color: var(--green);
}

.realisations-page .intro {
text-align: center;
margin-bottom: 30px;
}

.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
}

.gallery-grid img {
width: 100%;
height: auto;
border-radius: 8px;
object-fit: cover;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
transition: transform .2s ease;
}

.gallery-grid img:hover {
transform: scale(1.05);
}

/* ====== Formulaire de contact ====== */
.contact {
padding: 56px 0;
background: var(--muted);
}

.contact h1 {
text-align: center;
margin-bottom: 10px;
color: var(--green);
}

.contact .intro {
text-align: center;
margin-bottom: 30px;
}

.contact-form {
max-width: 600px;
margin: 0 auto;
background: #fff;
padding: 24px;
border-radius: 10px;
box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

.form-group {
margin-bottom: 18px;
}

.form-group label {
display: block;
font-weight: 600;
margin-bottom: 6px;
color: var(--green);
}

.form-group input,
.form-group textarea {
width: 100%;
padding: 12px 14px;
border: 1px solid rgba(24,49,43,0.3);
border-radius: 6px;
font-size: 15px;
}

.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--green);
box-shadow: 0 0 0 2px rgba(24,49,43,0.2);
}

.form-submit {
text-align: center;
}

.form-submit .btn {
background: var(--green);
color: #fff;
padding: 14px 28px;
font-size: 16px;
border-radius: 6px;
border: none;
cursor: pointer;
transition: background .2s ease;
}

.form-submit .btn:hover {
background: #0f1f1b;
}