*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Arial,sans-serif;color:#333;background:#f5f5f5;line-height:1.7}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:15px 8%;background:#1f2937;color:#fff}
.logo img{height:80px}
nav{display:flex;justify-content:center;gap:20px;background:#f59e0b;padding:15px}
nav a{text-decoration:none;color:#fff;font-weight:bold;padding:10px 18px;border-radius:6px;background:#2563eb}
.hero{height:420px;background:url('couvreur1.jpg') center/cover no-repeat;display:flex;align-items:center;justify-content:center}
.overlay{background:rgba(0,0,0,.55);padding:40px;color:#fff;text-align:center;border-radius:10px}
section{max-width:1200px;margin:35px auto;background:#fff;padding:40px;border-radius:10px}
h2{margin-bottom:20px;color:#1d4ed8}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.card{background:#f9fafb;border-left:5px solid #f59e0b;padding:20px;border-radius:8px}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:25px}
iframe{width:100%;height:320px;border:0;border-radius:8px}
footer{text-align:center;background:#1f2937;color:#fff;padding:25px;margin-top:30px}
@media(max-width:768px){
.topbar,.contact{grid-template-columns:1fr;display:block;text-align:center}
nav{flex-wrap:wrap}
.logo img{margin:10px auto}
}