:root{--brand:#00486a;--brand-2:#00a896;--dark:#1c1f24;--light:#f6f7f9;--text:#2c2f36;--accent:#f0b429}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;color:var(--text);background:#fff;line-height:1.55}
a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}
.container{max-width:1120px;margin:0 auto;padding:0 16px}
header{position:sticky;top:0;background:#fff;border-bottom:1px solid #eceff1;z-index:9}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0}
.nav .brand{display:flex;align-items:center;gap:12px}.nav img.logo{height:42px;width:auto}
.nav .menu{display:flex;gap:18px;align-items:center}.nav .menu a{font-weight:600}
.burger{display:none;border:0;background:transparent;font-size:28px}
@media (max-width: 840px){.nav .menu{display:none;position:absolute;top:60px;left:0;right:0;background:#fff;border-bottom:1px solid #eceff1;flex-direction:column;padding:12px}.nav.open .menu{display:flex}.burger{display:block}}
.hero{background:linear-gradient(120deg,var(--brand),var(--brand-2));color:#fff}
.hero .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center;padding:48px 0}
.hero h1{font-size:clamp(28px,4.5vw,44px);margin:0 0 10px}.hero p{opacity:.95;margin:0 0 20px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}.hero .cta a{background:#fff;color:var(--dark);padding:12px 18px;border-radius:10px;font-weight:700;border:2px solid transparent}
.hero .cta a.secondary{background:transparent;color:#fff;border-color:#fff}
.badges{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}.badge{background:#fff;color:var(--dark);padding:6px 10px;border-radius:999px;font-size:12px}
.section{padding:48px 0}.section.alt{background:var(--light)}
h2{font-size:clamp(22px,4vw,34px);margin:0 0 12px}.lead{max-width:70ch;opacity:.9}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}@media (max-width: 900px){.grid-3{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid #eceff1;border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.card img{width:100%;height:220px;object-fit:cover;background:#eee}.card .pad{padding:14px}
.card h3{margin:0 0 6px;font-size:20px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.stat{background:#fff;border:1px solid #eceff1;border-radius:12px;padding:14px;text-align:center}.stat .num{font-size:26px;font-weight:800;color:var(--brand)}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.gallery img{width:100%;height:160px;object-fit:cover;border-radius:10px}@media (max-width: 900px){.gallery{grid-template-columns:repeat(2,1fr)}}
.cta-bar{background:var(--dark);color:#fff;padding:22px 0}.cta-bar .wrap{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cta-bar a{background:var(--brand-2);color:#fff;padding:10px 16px;border-radius:10px;font-weight:700}
footer{background:#0f1115;color:#c9d1d9;padding:24px 0}footer a{color:#c9d1d9}
.notice{border-left:4px solid var(--accent);background:#fff7e6;padding:12px;border-radius:8px}
.form{display:grid;gap:12px;max-width:720px}
input,textarea,select{width:100%;padding:12px;border:1px solid #dfe3e8;border-radius:10px;font:inherit}
button{padding:12px 16px;border-radius:10px;border:0;background:var(--brand);color:#fff;font-weight:700;cursor:pointer}
button.secondary{background:#e1f5f4;color:#075e5c}
small.muted{opacity:.7}
.table{width:100%;border-collapse:collapse}.table th,.table td{border-bottom:1px solid #eceff1;padding:10px;text-align:left}



/* ===== Modal Devis ===== */
.gc-modal{position:fixed;inset:0;z-index:1000;display:none}
.gc-modal[aria-hidden="false"]{display:block}
.gc-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.gc-modal__dialog{
  position:relative;z-index:2;max-width:640px;margin:6vh auto;background:#fff;
  border-radius:14px;padding:18px;box-shadow:0 10px 35px rgba(0,0,0,.25)
}
.gc-modal__close{
  position:absolute;right:10px;top:10px;border:0;background:#edf2f7;
  border-radius:8px;width:38px;height:38px;font-size:22px;cursor:pointer
}

/* === CSS extrait de index.html === */
.site-header{
      position:sticky;top:0;z-index:50;
      background:#fff;border-bottom:1px solid #eceff1
    }
    .site-header .bar{
      max-width:1120px;margin:0 auto;
      padding:10px 16px;
      display:flex;align-items:center;justify-content:space-between;gap:12px
    }
    .brand{display:flex;align-items:center;gap:10px;font-weight:800;color:#00486a}
    .brand img{height:40px;width:auto;display:block}
    /* Menu mobile caché */
    .menu{
      display:none;position:absolute;left:0;right:0;top:58px;
      background:#fff;border-bottom:1px solid #eceff1
    }
    .menu a{
      display:block;padding:12px 16px;border-top:1px solid #f1f3f5;
      color:#1d232a;text-decoration:none;font-weight:600
    }
    .menu a:hover{background:#f7f9fb}
    /* Burger */
    .burger{
      display:inline-flex;align-items:center;justify-content:center;
      width:40px;height:40px;border:0;background:#00486a;color:#fff;
      border-radius:10px;font-size:22px;cursor:pointer
    }
    .site-header.open .menu{display:block}
    /* Desktop */
    @media (min-width: 900px){
      .menu{all:unset;display:flex;gap:18px}
      .menu a{all:unset;cursor:pointer;color:#1d232a;font-weight:600}
      .menu a:hover{text-decoration:underline}
      .burger{display:none}
    }


/* === CSS extrait de index.html === */
.hero-new{
      background:#00486a;
      color:#fff;
      overflow:hidden;
    }
    .hero-new .wrap{
      max-width:1120px;margin:0 auto;padding:24px 16px;display:grid;gap:20px;
    }
    /* Image : ratio stable + cover (pas d’étirement) */
    .hero-new .media{
      width:100%;
      aspect-ratio: 16 / 10;
      border-radius:14px;
      overflow:hidden;
      background:#0b5f5e;
    }
    .hero-new .media img{
      width:100%;height:100%;object-fit:cover;display:block;
      transform:translateZ(0); /* meilleure netteté mobile */
    }
    .hero-new h1{
      margin:0 0 8px;
      font-size:clamp(26px, 5.2vw, 44px);
      line-height:1.15;
      text-align:center;
    }
    .hero-new p.lead{
      margin:0 auto 14px;
      max-width:68ch;
      opacity:.95;
      text-align:center;
      font-size:clamp(14px, 2.8vw, 18px);
    }
    .hero-new .cta{
      display:flex;gap:10px;justify-content:center;flex-wrap:wrap
    }
    .hero-new .cta a{
      background:#fff;color:#0f1720;border-radius:12px;padding:12px 18px;font-weight:700;text-decoration:none
    }
    .hero-new .cta a.secondary{
      background:transparent;color:#fff;border:2px solid #ffffffcc
    }
    /* Desktop : texte à gauche / image à droite, tout reste centré verticalement */
    @media (min-width: 940px){
      .hero-new .wrap{grid-template-columns: 1.1fr 1fr;align-items:center;padding:42px 16px;}
      .hero-new h1, .hero-new p.lead, .hero-new .cta{ text-align:left; justify-content:flex-start; }
    }