*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font:17px/1.72 Arial,sans-serif;background:#101820;color:#f7f7f5}
.wrap{max-width:1180px;margin:auto;padding:0 24px}
header{position:sticky;top:0;z-index:20;background:#10171c;padding:15px 0;backdrop-filter:blur(10px)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.logo{text-align:left;font-weight:900;font-size:21px;color:#fff}
.mark{display:inline-block;width:48px;height:35px;border:6px solid #e63631;border-bottom:0;transform:skew(-25deg);vertical-align:middle;margin-right:10px}
.logo small{display:block;font-size:9px;letter-spacing:1.7px;color:#e63631}
nav{display:flex;gap:8px;flex-wrap:wrap}nav a{padding:9px 14px;text-decoration:none;color:#f7f7f5;border:1px solid #e63631;border-radius:4px 28px}
.hero{min-height:650px;display:grid;align-items:center;background:linear-gradient(90deg,#101820f8,#10182078),url('photos/la-tremblade-toiture.jpg') center/cover;clip-path:polygon(0 0,100% 0,100% 90%,68% 100%,0 88%)}
.heroIn{max-width:790px;padding:85px 0 120px}.tag{font-weight:900;letter-spacing:2px;color:#e63631}
h1{font:900 clamp(42px,6vw,72px)/1.03 Arial}h2{font-size:clamp(29px,4vw,45px);line-height:1.14}
.btn{display:inline-block;background:#e63631;color:white;text-decoration:none;font-weight:bold;padding:14px 22px;border-radius:4px 28px;margin:8px 8px 0 0}
.lead{padding:75px 0 15px;max-width:900px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:35px 0 75px}
.card{padding:30px;background:#ffffff10;border:1px solid #e63631;border-radius:4px 28px;box-shadow:0 15px 40px #0001}.card span{font-size:34px;font-weight:900;color:#e63631}
.feature{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center;padding:70px 0}.photo{width:100%;height:420px;object-fit:cover;clip-path:polygon(8% 0,100% 0,92% 100%,0 88%)}
.zone{padding:48px;background:#e63631;color:white;border-radius:4px 28px;margin:20px 0 75px}footer{background:#10171b;color:white;padding:35px 0}
@media(max-width:780px){.nav{justify-content:center}.logo{width:100%;text-align:center}nav{justify-content:center}.cards,.feature{grid-template-columns:1fr}.hero{min-height:540px;clip-path:none}.photo{clip-path:none;border-radius:24px;height:300px}}