body{margin:0;font-family:Arial;background:#f4f4f4}
header{background:#111;color:#fff;padding:10px;text-align:center}
.logo{position:fixed;top:0;left:0;padding:0px;z-index:1000; border:none;padding:0px 0px;border-radius:0px;cursor:pointer}
.logotitre{font-size:28px;font-weight:bold}



#menu-btn {
  position:fixed;
top:20px;
right:20px;
font-size:28px;
color:white;
background:#ff6600;
padding:10px 15px;
border-radius:8px;
cursor:pointer;
z-index:9999;
}

#side-menu {
  position: fixed;
  right: -220px;
  top: 0;
  height: 100%;
  width: 200px;
  background: #ff6600;
  transition: right 0.5s;
  padding-top: 60px;
}

#side-menu.open {
  right: 0;
}

#side-menu ul {
  list-style: none;
  padding: 0;
}

#side-menu li {
  margin: 20px;
}

#side-menu a {
  color: white;
  text-decoration: none;
}

.hero{
  padding:100px 20px;
  text-align:center;
  color:white;
  background:url('./background.jpg') center/cover; 
  background-color:rgba(0,0,0,0.7);
  background-blend-mode:overlay;
}
.section{padding:40px 20px;text-align:center}
.services{display:flex;flex-wrap:wrap;justify-content:center}
.card{background:white;margin:10px;padding:20px;width:280px;border-radius:10px;box-shadow:0 0 10px rgba(0,0,0,0.1)}
.gallery{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.gallery img{
  width:300px;
  max-height: 200px;
  border-radius:10px;
}
.before-after{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.before-after img{width:300px;border-radius:10px}
.reviews{max-width:800px;margin:auto}
.review{background:white;padding:15px;margin:10px;border-radius:10px;box-shadow:0 0 5px rgba(0,0,0,0.1)}
.contact{background:#222;color:white;padding:40px}
form{max-width:500px;margin:auto}
input,textarea{width:100%;padding:10px;margin:10px 0;border:none;border-radius:5px}
button{padding:10px;background:#ff6600;color:white;border:none;border-radius:5px;cursor:pointer}
.call-btn{display:inline-block;margin-top:10px;background:#28a745;color:white;padding:10px 15px;border-radius:5px;text-decoration:none}
footer{background:#111;color:#fff;text-align:center;padding:15px}

@media(max-width:768px){
.gallery img,.before-after img{width:90%}
}

/* Lightbox */
.lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
}
.lightbox img {
  max-width: 90%;
  max-height: 80%;
  border-radius: 10px;
}