:root {
  --ink: #24372f;
  --green: #577663;
  --sage: #e8efe8;
  --cream: #fbf7ef;
  --gold: #b59a5b;
  --text: #2c3631;
  --white: #fff;
  --radius: 22px;
  --shadow: 0 16px 44px rgba(36, 55, 47, .10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: var(--cream);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
.container { width: min(1120px, 88%); margin-inline: auto; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 16px; z-index: 99; padding: 10px 14px; background: white; }

.site-header { position: absolute; inset: 0 0 auto; z-index: 5; }
.nav { min-height: 94px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: flex; align-items: center; gap: 12px; color: white; text-decoration: none; font-weight: 850; letter-spacing: .08em; }
.brand img { width: 58px; height: 58px; object-fit: contain; border-radius: 14px; background: white; }
.nav-links { display: flex; gap: 28px; }
.nav-links a { color: white; text-decoration: none; font-size: .94rem; font-weight: 700; }

.hero { min-height: 760px; display: grid; align-items: center; padding: 150px 0 90px; color: white; background: radial-gradient(circle at 76% 34%, rgba(181,154,91,.28), transparent 23%), linear-gradient(135deg, #1e3029 0%, #2f4b3f 55%, #577663 100%); }
.hero-grid { display: grid; grid-template-columns: 1.18fr .82fr; align-items: center; gap: 64px; }
.hero-copy { max-width: 730px; }
.eyebrow { margin: 0 0 12px; color: var(--gold); font-size: .78rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.hero .eyebrow, .section-dark .eyebrow { color: #ead9a9; }
h1, h2, h3 { color: var(--ink); line-height: 1.12; letter-spacing: -.03em; }
h1 { margin: 0 0 22px; color: white; font-size: clamp(3rem, 6vw, 5.3rem); max-width: 900px; }
h2 { margin: 0 0 18px; font-size: clamp(2rem, 4vw, 3.25rem); }
h3 { margin: 0 0 10px; font-size: 1.25rem; }
p { margin-top: 0; }
.lead { max-width: 720px; margin-bottom: 30px; font-size: clamp(1.12rem, 2vw, 1.35rem); color: rgba(255,255,255,.9); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 14px 24px; border-radius: 999px; background: var(--gold); color: white; text-decoration: none; text-transform: uppercase; font-size: .88rem; font-weight: 900; letter-spacing: .035em; box-shadow: 0 10px 26px rgba(0,0,0,.14); transition: transform .2s ease, filter .2s ease; }
.btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.btn:focus-visible, a:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.btn-small { min-height: 44px; padding: 10px 18px; font-size: .76rem; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 10px 20px; padding: 0; margin: 24px 0 0; list-style: none; color: rgba(255,255,255,.85); font-weight: 750; }
.hero-proof li::before { content: "✓"; margin-right: 8px; color: #ead9a9; }
.hero-card { padding: 34px; border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius); background: rgba(255,255,255,.10); backdrop-filter: blur(8px); box-shadow: 0 24px 60px rgba(0,0,0,.17); }
.hero-card h2 { color: white; font-size: 2rem; }
.card-kicker { margin-bottom: 6px; color: #ead9a9; font-weight: 800; }
.check-list { padding: 0; margin: 22px 0 0; list-style: none; }
.check-list li { padding: 12px 0 12px 30px; border-top: 1px solid rgba(255,255,255,.12); position: relative; }
.check-list li::before { content: "✓"; position: absolute; left: 0; color: #ead9a9; font-weight: 900; }

.trust-strip { background: white; border-bottom: 1px solid rgba(36,55,47,.08); }
.trust-grid { display: grid; grid-template-columns: repeat(3,1fr); }
.trust-grid p { margin: 0; padding: 28px 26px; border-right: 1px solid rgba(36,55,47,.08); }
.trust-grid p:last-child { border-right: 0; }
.trust-grid strong, .trust-grid span { display: block; }
.trust-grid strong { color: var(--ink); }
.trust-grid span { color: #667069; font-size: .92rem; }

.section { padding: 94px 0; }
.section-heading { max-width: 810px; margin-bottom: 42px; }
.section-heading > p:last-child { font-size: 1.08rem; color: #5f6963; }
.narrow { max-width: 720px; }
.benefit-grid, .service-grid, .area-grid { display: grid; gap: 22px; }
.benefit-grid { grid-template-columns: repeat(3,1fr); }
.benefit-grid article, .area-grid article { padding: 30px; border-radius: var(--radius); background: white; box-shadow: var(--shadow); }
.number { display: inline-block; margin-bottom: 24px; color: var(--gold); font-weight: 900; }
.section-dark { background: var(--ink); color: white; }
.section-dark h2, .section-dark h3 { color: white; }
.service-grid { grid-template-columns: repeat(4,1fr); }
.service-grid article { padding: 28px; border-radius: 18px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); }
.service-grid p { color: rgba(255,255,255,.78); }
.center-cta { margin-top: 34px; text-align: center; }
.area-grid { grid-template-columns: repeat(2,1fr); }
.final-cta { padding-top: 24px; }
.final-card { display: flex; align-items: center; justify-content: space-between; gap: 34px; padding: 46px; border-radius: 28px; background: var(--sage); }
.final-card h2 { max-width: 720px; }
.final-card p { margin-bottom: 0; }
.final-card .btn { flex: 0 0 auto; }
.footer { padding: 36px 0; background: #1c2b25; color: rgba(255,255,255,.78); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr auto; align-items: end; gap: 24px; }
.footer strong { color: white; letter-spacing: .08em; }
.footer p { margin: 5px 0; }
.footer a { text-decoration: none; }

@media (max-width: 980px) {
  .nav-links { display: none; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero { min-height: auto; }
  .hero-card { max-width: 720px; }
  .service-grid { grid-template-columns: repeat(2,1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > p:last-child { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .container { width: min(100% - 32px, 1120px); }
  .nav { min-height: 80px; }
  .brand img { width: 50px; height: 50px; }
  .brand span { display: none; }
  .btn-small { padding: 9px 13px; font-size: .68rem; }
  .hero { padding-top: 120px; }
  .hero-grid { gap: 38px; }
  .trust-grid, .benefit-grid, .service-grid, .area-grid { grid-template-columns: 1fr; }
  .trust-grid p { border-right: 0; border-bottom: 1px solid rgba(36,55,47,.08); padding-inline: 0; }
  .section { padding: 68px 0; }
  .final-card { display: block; padding: 30px; }
  .final-card .btn { margin-top: 24px; width: 100%; }
  .footer-grid { grid-template-columns: 1fr; align-items: start; }
  .footer-grid > p:last-child { grid-column: auto; }
}

/* ==========================================================
   NOVANEST V4.2 PREMIUM DEFINITIVE — FINITIONS GRAPHIQUES
   Uniquement des ajustements visuels : contenu et HTML inchangés.
   ========================================================== */

:root {
  --premium-beige: #ead9b8;
  --premium-beige-hover: #f3e5c8;
  --teal-elegant: #073f3e;
  --glass-bg: rgba(255, 255, 255, .18);
  --glass-blur: 12px;
  --glass-border-final: rgba(255, 255, 255, .48);
  --glass-radius-final: 22px;
  --glass-shadow-final: 0 18px 46px rgba(26, 34, 30, .18);
}

/* Logo fourni : mise en valeur sans fond ni effet de vignette. */
.brand {
  gap: 10px;
}
.brand img {
  width: 68px;
  height: 68px;
  object-fit: cover;
  transform: scale(1.36);
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .2));
}

/* Boutons beige premium, texte canard et icône discrète. */
.btn,
.mobile-cta {
  gap: 10px;
  min-height: 52px;
  padding: 14px 24px;
  border: 1px solid rgba(255, 255, 255, .48);
  background: var(--premium-beige);
  color: var(--teal-elegant);
  box-shadow: 0 11px 27px rgba(31, 28, 22, .18);
}
.btn::before,
.mobile-cta::before {
  content: "✦";
  font-size: .9em;
  line-height: 1;
}
.btn:hover,
.mobile-cta:hover {
  background: var(--premium-beige-hover);
  filter: none;
}
.btn-small {
  min-height: 44px;
  padding: 10px 18px;
}

/* Carte de la page 1 : hiérarchie de la maquette. */
.hero-card h2 {
  color: var(--teal-elegant);
  font-size: clamp(2rem, 2.6vw, 2.55rem);
}
.hero-card .card-kicker {
  font-size: 1.08rem;
  line-height: 1.45;
}

/* Page 2 : aucune bande blanche, trois engagements en verre sur la photo. */
.trust-strip {
  padding: 28px 0;
  border: 0;
  background-image: url("assets/hero-interieur-lac-leman.webp");
  background-size: cover;
  background-position: center 76%;
}
.trust-grid {
  gap: 22px;
}
.trust-grid p {
  padding: 24px 26px;
  border: 1px solid var(--glass-border-final);
  border-radius: var(--glass-radius-final);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-shadow-final);
}
.trust-grid p:last-child {
  border: 1px solid var(--glass-border-final);
}
.trust-grid strong,
.trust-grid span {
  text-shadow: 0 1px 10px rgba(255, 255, 255, .65);
}

/* Le glassmorphism de la page Services est la référence commune. */
.hero-card,
.benefit-grid article,
.service-grid article,
.review-card,
.area-grid article {
  border: 1px solid var(--glass-border-final);
  border-radius: var(--glass-radius-final);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-shadow-final);
}
#avis .review-card {
  background: var(--glass-bg);
}

/* Petits titres : taille et contraste renforcés. */
#services .eyebrow,
#avis .eyebrow,
#secteurs .eyebrow {
  font-size: clamp(.96rem, 1.45vw, 1.15rem);
  line-height: 1.35;
  letter-spacing: .12em;
}

/* Secteurs : pictogrammes et texte d'introduction lisible. */
#secteurs .section-heading > p:last-child {
  max-width: 760px;
  color: var(--teal-elegant);
  font-size: 1.16rem;
  font-weight: 750;
  text-shadow: 0 1px 12px rgba(255, 255, 255, .9);
}
.area-grid h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--teal-elegant);
}
.area-grid h3::before {
  content: "⌂";
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 50%;
  background: var(--premium-beige);
  color: var(--teal-elegant);
  font-size: 1.15rem;
  box-shadow: 0 6px 16px rgba(7, 63, 62, .14);
}
.area-grid article + article h3::before {
  content: "⌖";
}

/* Conclusion : canard profond élégant, footer plus compact. */
.final-cta .final-card {
  border-color: rgba(234, 217, 184, .38);
  background: rgba(7, 63, 62, .92);
  color: rgba(255, 255, 255, .9);
}
.final-cta .final-card h2,
.final-cta .final-card .eyebrow {
  color: #fff;
  text-shadow: none;
}
.footer {
  padding: 20px 0;
  background: var(--teal-elegant);
}

@media (max-width: 720px) {
  .brand img {
    width: 58px;
    height: 58px;
  }
  .trust-strip {
    padding: 22px 0;
    background-position: 62% 72%;
  }
  .trust-grid {
    gap: 14px;
  }
  .trust-grid p,
  .trust-grid p:last-child {
    padding: 20px;
    border: 1px solid var(--glass-border-final);
  }
  .btn,
  .mobile-cta {
    padding-inline: 16px;
  }
  .footer {
    padding: 18px 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* Avis voyageurs */
.reviews-section { background: #fff; }
.reviews-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.review-card { margin: 0; padding: 30px; border: 1px solid rgba(36,55,47,.10); border-radius: var(--radius); background: var(--cream); box-shadow: var(--shadow); }
.review-card p { margin: 18px 0 20px; color: var(--ink); font-size: 1.08rem; font-weight: 700; }
.review-card footer { color: #68716c; font-size: .9rem; }
.rating { color: var(--gold); font-weight: 900; letter-spacing: .08em; }
.mobile-cta { display: none; }

@media (max-width: 720px) {
  body { padding-bottom: 76px; }
  h1 { font-size: clamp(2.55rem, 12vw, 3.6rem); }
  .reviews-grid { grid-template-columns: 1fr; }
  .benefit-grid { grid-template-columns: 1fr; }
  .mobile-cta {
    display: flex;
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: 12px;
    z-index: 30;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    border-radius: 999px;
    background: var(--gold);
    color: #fff;
    box-shadow: 0 12px 30px rgba(0,0,0,.24);
    text-decoration: none;
    text-transform: uppercase;
    font-size: .8rem;
    font-weight: 900;
    letter-spacing: .03em;
  }
}

/* ==========================================================
   NOVANEST V4.2 — HARMONISATION VISUELLE FINALE
   HTML, textes, liens, menus, SEO et structure inchangés.
   Trois photographies seulement : sections 1–2, 3–4, 5–6.
   Aucun voile vert sur les photographies.
   ========================================================== */

:root {
  --teal-deep: #0b4f4d;
  --glass-light: rgba(255, 255, 255, .36);
  --glass-border: rgba(255, 255, 255, .54);
  --glass-shadow: 0 18px 46px rgba(40, 31, 24, .15);
}

/* Bon monogramme Novanest, sans carré blanc. */
.brand img {
  object-fit: contain;
  border-radius: 0;
  background: transparent;
  filter: drop-shadow(0 2px 7px rgba(0, 0, 0, .16));
}

/* Les petits titres beige/taupe deviennent vert canard profond. */
.eyebrow,
.hero .eyebrow,
.section-dark .eyebrow,
.card-kicker {
  color: var(--teal-deep);
  text-shadow: 0 1px 10px rgba(255, 255, 255, .42);
}

/* 1 + 2 : une seule photographie, sans voile vert. */
.hero {
  background-color: #a88f78;
  background-image:
    linear-gradient(90deg,
      rgba(81, 65, 52, .56) 0%,
      rgba(116, 94, 75, .38) 38%,
      rgba(229, 213, 192, .14) 66%,
      rgba(255, 255, 255, .02) 100%),
    url("assets/hero-interieur-lac-leman.webp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* La bande d'engagement garde tout son contenu mais ne forme plus
   une rupture blanche : elle reprend la photo 1 avec un verre clair. */
.trust-strip {
  position: relative;
  background-color: #efe6d9;
  background-image:
    linear-gradient(rgba(255,255,255,.70), rgba(255,255,255,.70)),
    url("assets/hero-interieur-lac-leman.webp");
  background-size: cover;
  background-position: center 76%;
  border-bottom-color: rgba(11,79,77,.10);
}

/* Page 2 : fond pleine largeur tout en conservant la largeur et la
   disposition originales du contenu. */
#avantages,
#secteurs {
  position: relative;
  isolation: isolate;
  background: transparent;
}
#avantages::before,
#secteurs::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 50%;
  width: 100vw;
  transform: translateX(-50%);
  background-repeat: no-repeat;
  background-size: cover;
}
#avantages::before {
  background-color: #eadfce;
  background-image:
    linear-gradient(100deg,
      rgba(250,246,239,.76) 0%,
      rgba(250,246,239,.51) 43%,
      rgba(250,246,239,.18) 76%,
      rgba(255,255,255,.03) 100%),
    url("assets/hero-interieur-lac-leman.webp");
  background-position: center center;
}

/* Verre uniforme : les cartes laissent apparaître la photographie. */
.hero-card,
.benefit-grid article,
.service-grid article,
.review-card,
.area-grid article,
.final-cta .final-card {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}
.hero-card {
  background: rgba(255,255,255,.17);
}
.benefit-grid article,
.area-grid article {
  background: var(--glass-light);
}

/* 3 + 4 : même photographie. */
#services,
#avis {
  background-color: #9a806c;
  background-image:
    linear-gradient(105deg,
      rgba(68,54,44,.50) 0%,
      rgba(92,73,59,.31) 48%,
      rgba(243,225,203,.10) 100%),
    url("assets/services-interieur-chaleureux.webp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
#services .service-grid article {
  background: rgba(255,255,255,.16);
}
#avis {
  color: var(--text);
  background-image:
    linear-gradient(105deg,
      rgba(250,246,239,.61) 0%,
      rgba(250,246,239,.42) 48%,
      rgba(255,255,255,.17) 100%),
    url("assets/services-interieur-chaleureux.webp");
}
#avis .review-card {
  background: rgba(255,255,255,.44);
}

/* 5 + 6 : même photographie des deux tasses. Les deux sections
   restent distinctes dans le HTML et pour le SEO, mais forment une
   conclusion visuelle cohérente. */
#secteurs::before {
  background-color: #c38c55;
  background-image:
    linear-gradient(102deg,
      rgba(250,246,239,.67) 0%,
      rgba(250,246,239,.43) 47%,
      rgba(250,246,239,.12) 78%,
      rgba(255,255,255,.02) 100%),
    url("assets/cta-terrasse-tasses-lac-leman.webp");
  background-position: center 35%;
}
.final-cta {
  padding-top: 54px;
  padding-bottom: 54px;
  background-color: #c38c55;
  background-image:
    linear-gradient(100deg,
      rgba(250,246,239,.36) 0%,
      rgba(250,246,239,.17) 51%,
      rgba(255,255,255,.02) 100%),
    url("assets/cta-terrasse-tasses-lac-leman.webp");
  background-size: cover;
  background-position: center 70%;
  background-repeat: no-repeat;
}
.final-cta .final-card {
  background: rgba(255,255,255,.43);
}

@media (max-width: 720px) {
  .hero {
    background-image:
      linear-gradient(180deg,
        rgba(81,65,52,.55) 0%,
        rgba(110,88,70,.37) 55%,
        rgba(236,218,196,.16) 100%),
      url("assets/hero-interieur-lac-leman.webp");
    background-position: 62% center;
  }
  .trust-strip {
    background-position: 62% 72%;
  }
  #avantages::before {
    background-image:
      linear-gradient(180deg,
        rgba(250,246,239,.72) 0%,
        rgba(250,246,239,.48) 57%,
        rgba(250,246,239,.19) 100%),
      url("assets/hero-interieur-lac-leman.webp");
    background-position: 62% center;
  }
  #services,
  #avis {
    background-position: center center;
  }
  #avis {
    background-image:
      linear-gradient(180deg,
        rgba(250,246,239,.63) 0%,
        rgba(250,246,239,.39) 58%,
        rgba(255,255,255,.16) 100%),
      url("assets/services-interieur-chaleureux.webp");
  }
  #secteurs::before {
    background-image:
      linear-gradient(180deg,
        rgba(250,246,239,.68) 0%,
        rgba(250,246,239,.42) 58%,
        rgba(250,246,239,.14) 100%),
      url("assets/cta-terrasse-tasses-lac-leman.webp");
    background-position: 56% center;
  }
  .final-cta {
    background-image:
      linear-gradient(180deg,
        rgba(250,246,239,.35) 0%,
        rgba(250,246,239,.15) 58%,
        rgba(255,255,255,.02) 100%),
      url("assets/cta-terrasse-tasses-lac-leman.webp");
    background-position: 56% center;
  }
}

/* Priorité finale des finitions Premium après les fonds V4.2. */
.brand img { width: 68px; height: 68px; object-fit: cover; transform: scale(1.36); }
.btn,
.mobile-cta { gap: 10px; min-height: 52px; padding: 14px 24px; border: 1px solid rgba(255,255,255,.48); background: var(--premium-beige); color: var(--teal-elegant); box-shadow: 0 11px 27px rgba(31,28,22,.18); }
.btn:hover,
.mobile-cta:hover { background: var(--premium-beige-hover); filter: none; }
.btn-small { min-height: 44px; padding: 10px 18px; }
.hero-card h2 { color: var(--teal-elegant); font-size: clamp(2rem,2.6vw,2.55rem); }
.hero-card .card-kicker { font-size: 1.08rem; line-height: 1.45; }
.trust-strip { padding: 28px 0; border: 0; background-image: url("assets/hero-interieur-lac-leman.webp"); }
.trust-grid { gap: 22px; }
.trust-grid p,
.trust-grid p:last-child,
.hero-card,
.benefit-grid article,
.service-grid article,
.review-card,
.area-grid article { border: 1px solid var(--glass-border-final); border-radius: var(--glass-radius-final); background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--glass-shadow-final); }
#avis .review-card { background: var(--glass-bg); }
.final-cta .final-card { border-color: rgba(234,217,184,.38); background: rgba(7,63,62,.92); color: rgba(255,255,255,.9); }
.final-cta .final-card h2,
.final-cta .final-card .eyebrow { color: #fff; text-shadow: none; }
.footer { padding: 20px 0; background: var(--teal-elegant); }
@media (max-width:720px) {
  .brand img { width: 58px; height: 58px; }
  .trust-strip { padding: 22px 0; }
  .trust-grid { gap: 14px; }
  .trust-grid p,
  .trust-grid p:last-child { padding: 20px; border: 1px solid var(--glass-border-final); }
  .btn,
  .mobile-cta { padding-inline: 16px; }
  .footer { padding: 18px 0; }
}

/* ==========================================================
   REFERENCE FINALE : PAGE 1 DE LA MAQUETTE
   ========================================================== */
.site-header {
  background: rgba(250, 244, 232, .96);
  border-bottom: 1px solid rgba(7, 63, 62, .08);
  box-shadow: 0 4px 18px rgba(64, 47, 31, .05);
  backdrop-filter: blur(10px);
}
.nav {
  min-height: 102px;
}
.brand,
.nav-links a {
  color: var(--teal-elegant);
}
.brand {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: .1em;
}
.brand img {
  width: 76px;
  height: 64px;
  object-fit: contain;
  transform: none;
  filter: none;
}
.nav-links a {
  font-weight: 720;
}

.hero {
  min-height: 820px;
  padding-top: 176px;
  color: var(--teal-elegant);
  background-image:
    linear-gradient(90deg,
      rgba(250, 244, 232, .98) 0%,
      rgba(250, 244, 232, .95) 34%,
      rgba(250, 244, 232, .76) 52%,
      rgba(250, 244, 232, .18) 72%,
      rgba(250, 244, 232, .02) 100%),
    url("assets/hero-interieur-lac-leman.webp");
}
.hero-grid {
  grid-template-columns: 1.12fr .88fr;
  gap: 54px;
}
.hero-copy {
  max-width: 700px;
}
.hero .eyebrow {
  color: #796a4c;
  font-size: .9rem;
  letter-spacing: .17em;
  text-shadow: none;
}
.hero h1 {
  max-width: 720px;
  margin-bottom: 24px;
  color: var(--teal-elegant);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.5rem, 5.65vw, 5.35rem);
  font-weight: 500;
  line-height: .99;
  letter-spacing: -.045em;
}
.hero .lead {
  max-width: 650px;
  color: #173c39;
  font-size: clamp(1.08rem, 1.55vw, 1.28rem);
  line-height: 1.5;
}
.btn,
.mobile-cta {
  border-color: rgba(178, 132, 64, .25);
  background: linear-gradient(180deg, #e8c889 0%, #ddb56f 100%);
  color: var(--teal-elegant);
  font-weight: 900;
  box-shadow: 0 9px 24px rgba(153, 108, 49, .2);
}
.btn::before,
.mobile-cta::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border: 2px solid currentColor;
  border-radius: 3px;
  background:
    linear-gradient(currentColor,currentColor) 3px -4px / 2px 7px no-repeat,
    linear-gradient(currentColor,currentColor) 9px -4px / 2px 7px no-repeat,
    linear-gradient(currentColor,currentColor) 0 4px / 100% 2px no-repeat;
}
.btn:hover,
.mobile-cta:hover {
  background: linear-gradient(180deg, #efd59f 0%, #e4bf7c 100%);
}
.hero-proof {
  color: var(--teal-elegant);
}
.hero-proof li::before {
  display: inline-grid;
  width: 23px;
  height: 23px;
  margin-right: 8px;
  place-items: center;
  border-radius: 50%;
  background: var(--teal-elegant);
  color: #fff;
  font-size: .78rem;
}
.hero-card {
  padding: 36px;
  border-color: var(--glass-border);
  background: rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--glass-shadow);
}
.hero-card .card-kicker {
  max-width: 310px;
  color: #173c39;
  font-size: 1.08rem;
  font-weight: 650;
  text-shadow: none;
}
.hero-card h2 {
  max-width: 390px;
  color: var(--teal-elegant);
  font-size: clamp(2rem, 2.6vw, 2.55rem);
}
.check-list {
  border-top: 1px solid rgba(183, 145, 81, .55);
}
.check-list li {
  border-top: 0;
  color: #173c39;
}
.check-list li::before {
  display: grid;
  width: 23px;
  height: 23px;
  top: 10px;
  place-items: center;
  border-radius: 50%;
  background: var(--teal-elegant);
  color: #fff;
  font-size: .78rem;
}

@media (max-width: 980px) {
  .hero {
    min-height: auto;
    background-image:
      linear-gradient(90deg, rgba(250,244,232,.96), rgba(250,244,232,.78)),
      url("assets/hero-interieur-lac-leman.webp");
  }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-card { max-width: 720px; }
}
@media (max-width: 720px) {
  .nav { min-height: 82px; }
  .brand img { width: 56px; height: 50px; }
  .hero {
    padding-top: 126px;
    background-image:
      linear-gradient(180deg, rgba(250,244,232,.97) 0%, rgba(250,244,232,.86) 60%, rgba(250,244,232,.68) 100%),
      url("assets/hero-interieur-lac-leman.webp");
    background-position: 62% center;
  }
  .hero h1 {
    font-size: clamp(2.75rem, 13vw, 4rem);
    line-height: 1.02;
  }
  .hero-card { padding: 28px; }
}

/* Transparence validée : référence exacte des cartes de la page 3. */
.trust-grid p,
.trust-grid p:last-child,
.hero-card,
.benefit-grid article,
.service-grid article,
.review-card,
.area-grid article {
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--glass-shadow);
}
#avis .review-card {
  background: rgba(255, 255, 255, .16);
}