/* ================= RESET ================= */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
body { font-family:"Inter",sans-serif; background:#fff; color:#333; overflow-x:hidden; }

/* ================= HEADER ================= */
header {
  position: fixed; top:0; width:100%;
  background:#fff; padding:1rem 2rem;
  display:flex; justify-content:space-between; align-items:center;
  z-index:100; height:70px;
  box-shadow:0 4px 15px rgba(0,0,0,0.12);
}
.logo-container { display:flex; align-items:center; gap:10px; }
.logo-img { width:50px; height:50px; object-fit:contain; }
.logo { font-size:1.3rem; font-weight:700; color:#b78c67; }
nav.desktop-nav { display:none; }
nav.desktop-nav a { text-decoration:none; color:#b78c67; margin-left:1.5rem; font-weight:500; transition:0.3s; }
nav.desktop-nav a:hover { color:#916c4e; text-decoration:underline; }

/* ================= MENU MOBILE ================= */
.menu-btn { display:block; cursor:pointer; padding:0.5rem; z-index:300; position: relative; }
.menu-btn span { display:block; width:25px; height:3px; background:#b78c67; margin:5px 0; transition:0.3s; }
.menu-btn.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-btn.open span:nth-child(2) { opacity:0; }
.menu-btn.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.mobile-nav {
  position: fixed;
  top:0; right:-100%;
  width:80%; max-width:300px; height:100vh;
  background:#fff;
  padding:4rem 1rem 1rem 1rem;
  transition:0.3s; z-index: 250;
  box-shadow:-3px 0 10px rgba(0,0,0,0.1);
}
.mobile-nav.open { right:0; }
.mobile-nav a { display:block; padding:0.8rem 0; color:#b78c67; text-decoration:none; font-size:1.2rem; border-bottom:1px solid #eee; }
.mobile-nav .close-btn { position:absolute; top:10px; right:10px; font-size:3rem; color:#b78c67; cursor:pointer; }
.mobile-nav .close-btn:hover { color:#916c4e; }

/* ================= HERO ================= */
.hero { min-height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:2rem 1rem; text-align:center; }
.hero-content { max-width:1200px; display:flex; flex-direction:column; align-items:center; margin-top:10%; width:100%; }
.hero img { width:400px; margin-bottom:2rem; }
.hero-text { max-width:800px; text-align:center; padding:0 1rem; }
.hero-text h1 { font-size:2rem; margin-bottom:1.5rem; color:#b78c67; }
.hero-text p { margin-bottom:1rem; line-height:1.6; color:#000; }
.signature { font-family:"Qwitcher Grypen", cursive; font-size:5rem; color:#b78c67; margin-top:2rem; text-align:center; }

/* ================= SERVICES ================= */
.services-section { background:#fff; padding:5rem 2rem; text-align:center; }
.services-section h2 { color:#b78c67; margin-bottom:3rem; font-size:2.5rem; font-weight:700; }
.services-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:2rem; max-width:1200px; margin:0 auto; }
.service-item { background:#fff; border:1px solid #eee; border-radius:10px; padding:2rem; text-align:left; transition:transform 0.3s, box-shadow 0.3s; }
.service-item:hover { transform:translateY(-5px); box-shadow:0 10px 20px rgba(0,0,0,0.1); }
.service-icon { color:#ca9e67; font-size:2.5rem; margin-bottom:1rem; }
.service-item h3 { color:#333; margin-bottom:1rem; font-size:1.5rem; font-weight:600; }
.service-item p { color:#666; line-height:1.6; }


.devis-container {
    text-align: center;
    margin-top: 30px;
}

.btn-devis {
    display: inline-block;
    background-color: #b78c67; /* couleur or du site */
    color: white;
    padding: 12px 24px;
    border-radius: 0px;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s ease;
}

.btn-devis:hover {
    background-color: #b38743;
    transform: translateY(-2px);
}

/* ================= REALISATIONS ================= */
.realisations-section { padding:5rem 2rem; text-align:center; }
.realisations-section h2 { color:#b78c67; margin-bottom:3rem; font-size:2.5rem; font-weight:700; }
.gallery { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:15px; width:90%; margin:0 auto; }
.gallery img { width:100%; height:auto; cursor:pointer; border-radius:6px; object-fit:cover; transition: transform .3s ease; }
.gallery img:hover { transform: scale(1.03); }






/* ================= ZONES ================= */
.zones-section { background:#fff; padding:2rem; text-align:center; }
.zones-section h2 { color:#b78c67; margin-bottom:3rem; font-size:2.5rem; font-weight:700; }
.zones-list { display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; list-style:none; }
.zones-list li { font-size:1.1rem; font-weight:600; color:#b78c67; padding-bottom:3px; }

/* ================= FOOTER ================= */
footer { background:#b78c67; color:#fff; padding:1rem; text-align:center; }
.footer-content { display:flex; flex-direction:column; align-items:center; gap:1rem; }
.phone-number { color:#fff; font-weight:600; font-size:1.3rem; text-decoration:none; }
.social-links { display:flex; gap:1rem; justify-content:center; }
.social-links a { color:#fff; font-size:1.5rem; transition:0.3s; }
.social-links a:hover { color:#fff; }

/* ================= RESPONSIVE ================= */
@media(min-width:768px) {
  nav.desktop-nav { display:flex; gap:1.5rem; }
  .menu-btn { display:none; }
  .hero { flex-direction:row; padding:3rem 2rem; }
  .hero-content { flex-direction:row; gap:2rem; margin-top:0; }
  .hero img { width:600px; margin-bottom:0; }
  .hero-text { text-align:left; flex:1; }
  .gallery { grid-template-columns:repeat(3,1fr); }
}
@media(max-width:767px) {
  .zones-list li { flex:0 0 calc(50% - 0.8rem); max-width:calc(50% - 0.8rem); }
  .gallery { grid-template-columns:repeat(2,1fr); }
}