* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg: #f4f1ea;
  --bg-alt: #ffffff;
  --text: #1c2318;
  --muted: #5a6657;
  --line: rgba(28, 35, 24, 0.12);
  --green: #2f6b43;
  --green-dark: #224d30;
  --green-soft: #dce7db;
  --sand: #ddd4c3;
  --shadow: 0 18px 40px rgba(28, 35, 24, 0.08);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.55;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(47, 107, 67, 0.1), transparent 32%),
    radial-gradient(circle at top right, rgba(221, 212, 195, 0.8), transparent 30%),
    var(--bg);
}

a {
  color: inherit;
}

.page {
  width: min(1120px, calc(100% - 2rem));
  margin: 0 auto;
}

.demo-banner {
  background: #162118;
  color: #f4f1ea;
  text-align: center;
  padding: 0.7rem 1rem;
  font: 700 0.82rem/1.2 Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(12px);
  background: rgba(244, 241, 234, 0.84);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  font: 600 0.98rem/1.2 Arial, sans-serif;
}

.header-inner nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.header-inner a {
  text-decoration: none;
}

.eyebrow {
  font: 700 0.75rem/1.2 Arial, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
}

.hero {
  padding: 3rem 0 1.55rem;
  display: grid;
  gap: 1rem;
}

.hero-copy {
  max-width: 72ch;
}

h1,
h2,
h3 {
  font-family: "Trebuchet MS", "Gill Sans", Arial, sans-serif;
  line-height: 1.08;
}

h1 {
  font-size: clamp(1.85rem, 3vw, 3.2rem);
  margin: 0.45rem 0 0.75rem;
  max-width: 16ch;
}

.lede {
  font-size: 1rem;
  color: var(--muted);
  max-width: 62ch;
}

.hero-points {
  list-style: none;
  display: grid;
  gap: 0.6rem;
  margin-top: 0.95rem;
  max-width: 56ch;
}

.hero-points li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--muted);
}

.hero-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 0.58rem;
  height: 0.58rem;
  border-radius: 999px;
  background: var(--green);
}

.cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0.85rem 1.2rem;
  border-radius: 999px;
  border: 1px solid var(--text);
  text-decoration: none;
  font: 700 0.95rem/1 Arial, sans-serif;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--green-dark);
  color: #fff;
  border-color: var(--green-dark);
  box-shadow: 0 18px 32px rgba(34, 77, 48, 0.24);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.86);
  color: var(--green-dark);
  border-color: rgba(28, 35, 24, 0.12);
}

.btn-ghost {
  background: transparent;
  color: var(--green-dark);
  border-color: rgba(47, 107, 67, 0.26);
}

.hero-panel {
  display: grid;
  gap: 1rem;
}

.contact-card,
.qr-card,
.service-card,
.info-card,
.contact-block,
.quote-form,
.estimate-card {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow);
}

.contact-card,
.qr-card,
.contact-block {
  padding: 1.25rem;
}

.card-label {
  font: 700 0.74rem/1.2 Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: 0.4rem;
}

.phone {
  display: inline-block;
  text-decoration: none;
  font: 700 clamp(1.6rem, 4vw, 2.2rem)/1.1 Arial, sans-serif;
  color: var(--green-dark);
}

.card-note {
  margin-top: 0.7rem;
  color: var(--muted);
}

.qr-card {
  display: grid;
  gap: 0.8rem;
}

.qr-placeholder {
  width: 108px;
  aspect-ratio: 1;
  border-radius: 20px;
  border: 2px dashed rgba(47, 107, 67, 0.35);
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(47, 107, 67, 0.08), rgba(221, 212, 195, 0.18));
  color: var(--green-dark);
  font: 700 1.3rem/1 Arial, sans-serif;
}

.quick-strip {
  display: grid;
  gap: 1rem;
  padding: 1rem 0 0;
}

.quick-strip article {
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 1rem;
}

.quick-strip strong {
  display: block;
  margin-bottom: 0.35rem;
  font-family: Arial, sans-serif;
}

.section {
  padding: 3.4rem 0 0;
}

.section-heading {
  max-width: 62ch;
  margin-bottom: 1.3rem;
}

.section-heading h2 {
  font-size: clamp(1.9rem, 3vw, 3rem);
  margin: 0.45rem 0 0.7rem;
}

.section-heading p {
  color: var(--muted);
}

.section-note {
  margin-top: 0.6rem;
  font: 700 0.88rem/1.45 Arial, sans-serif;
  color: rgba(34, 77, 48, 0.88);
}

.service-grid {
  display: grid;
  gap: 1rem;
}

.service-card {
  overflow: hidden;
}

.service-visual {
  min-height: 220px;
  border-bottom: 1px solid var(--line);
  background-color: #d9e3d4;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}

.service-visual::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(22, 33, 24, 0.2));
}

.service-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)),
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.2), transparent 28%);
  pointer-events: none;
}

.visual-tonte {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 420'%3E%3Crect width='800' height='420' fill='%23cfe3ea'/%3E%3Crect y='188' width='800' height='232' fill='%2379a85d'/%3E%3Cpath d='M0 235 C120 205 215 220 320 250 S545 286 800 228 L800 420 L0 420 Z' fill='%23598d47'/%3E%3Cpath d='M0 286 C130 256 225 272 332 300 S564 332 800 284 L800 420 L0 420 Z' fill='%23497a3f'/%3E%3Cg fill='none' stroke='%239fd072' stroke-width='9' opacity='.75'%3E%3Cpath d='M40 264 L760 318'/%3E%3Cpath d='M18 318 L728 372'/%3E%3C/g%3E%3Cg transform='translate(430 168)'%3E%3Crect x='-18' y='70' width='118' height='56' rx='18' fill='%232f5a34'/%3E%3Crect x='20' y='30' width='20' height='76' rx='10' fill='%2326462a'/%3E%3Cpath d='M38 34 L108 -12' stroke='%2326462a' stroke-width='10' stroke-linecap='round'/%3E%3Ccircle cx='0' cy='132' r='28' fill='%23223828'/%3E%3Ccircle cx='94' cy='128' r='18' fill='%23223828'/%3E%3Ccircle cx='0' cy='132' r='10' fill='%2391a19a'/%3E%3Ccircle cx='94' cy='128' r='7' fill='%2391a19a'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(16, 31, 18, 0.08));
}

.visual-taille {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 420'%3E%3Crect width='800' height='420' fill='%23d9ebef'/%3E%3Crect y='248' width='800' height='172' fill='%23d7ccb7'/%3E%3Cg%3E%3Crect x='72' y='76' width='656' height='208' rx='34' fill='%234f7f46'/%3E%3Cpath d='M72 170 C170 118 248 204 330 146 S500 126 584 160 S672 214 728 146 L728 284 L72 284 Z' fill='%23659757'/%3E%3Cpath d='M126 112 L126 254 M190 96 L190 248 M260 120 L260 260 M332 102 L332 252 M404 116 L404 260 M478 98 L478 252 M550 118 L550 258 M624 106 L624 252' stroke='%2389bc73' stroke-width='10' opacity='.42'/%3E%3C/g%3E%3Cg transform='translate(540 188) rotate(-12)'%3E%3Cpath d='M0 0 L92 -42' stroke='%233e4d3f' stroke-width='11' stroke-linecap='round'/%3E%3Cpath d='M0 0 L86 48' stroke='%233e4d3f' stroke-width='11' stroke-linecap='round'/%3E%3Ccircle cx='0' cy='0' r='14' fill='%233e4d3f'/%3E%3Cpath d='M82 -46 L124 -16 L94 -4 Z' fill='%238aa08a'/%3E%3Cpath d='M76 50 L124 20 L96 6 Z' fill='%238aa08a'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(16, 31, 18, 0.08));
}

.visual-entretien {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 420'%3E%3Crect width='800' height='420' fill='%23d8e8de'/%3E%3Crect y='258' width='800' height='162' fill='%2391b27a'/%3E%3Cpath d='M302 420 L474 420 L566 112 L396 112 Z' fill='%23d8d0bf'/%3E%3Cpath d='M336 420 L446 420 L518 138 L408 138 Z' fill='%23efeadb'/%3E%3Cg fill='%2356864c'%3E%3Ccircle cx='130' cy='220' r='84'/%3E%3Ccircle cx='190' cy='202' r='62'/%3E%3Ccircle cx='660' cy='214' r='78'/%3E%3Ccircle cx='602' cy='226' r='54'/%3E%3C/g%3E%3Cg transform='translate(166 158) rotate(14)'%3E%3Cpath d='M0 130 L0 8' stroke='%235e513e' stroke-width='10' stroke-linecap='round'/%3E%3Cg stroke='%235e513e' stroke-width='8' stroke-linecap='round'%3E%3Cpath d='M-28 24 L28 24'/%3E%3Cpath d='M-34 42 L34 42'/%3E%3Cpath d='M-28 60 L28 60'/%3E%3Cpath d='M-20 78 L20 78'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(16, 31, 18, 0.08));
}

.visual-remise {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 420'%3E%3Crect width='800' height='420' fill='%23dfe6de'/%3E%3Crect y='238' width='800' height='182' fill='%23779f61'/%3E%3Cpath d='M0 278 C88 236 150 316 228 286 S378 246 470 286 S620 328 800 252 L800 420 L0 420 Z' fill='%23577949'/%3E%3Cg fill='none' stroke='%233e5d38' stroke-width='10' stroke-linecap='round' opacity='.85'%3E%3Cpath d='M76 208 C96 168 112 150 130 112'/%3E%3Cpath d='M118 228 C136 184 152 164 166 126'/%3E%3Cpath d='M160 218 C176 176 190 154 206 118'/%3E%3C/g%3E%3Cg transform='translate(458 214)'%3E%3Cpath d='M0 0 L114 -24 L88 44 L-16 44 Z' fill='%23a36f41'/%3E%3Cpath d='M-6 10 L88 10' stroke='%23e3bb7a' stroke-width='8' opacity='.45'/%3E%3Cpath d='M100 40 L150 86' stroke='%23564939' stroke-width='10' stroke-linecap='round'/%3E%3Cpath d='M10 44 L-22 88' stroke='%23564939' stroke-width='10' stroke-linecap='round'/%3E%3Ccircle cx='152' cy='90' r='18' fill='%23393a34'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(16, 31, 18, 0.14));
}

.service-card h3,
.service-card p,
.service-card .service-meta {
  margin-left: 1.3rem;
  margin-right: 1.3rem;
}

.service-card h3 {
  font-size: 1.35rem;
  margin-top: 1.1rem;
  margin-bottom: 0.45rem;
}

.service-card p,
.info-card p,
.contact-block p,
.quote-form,
.contact-link {
  color: var(--muted);
}

.service-card p {
  min-height: 4.7rem;
}

.service-meta {
  display: inline-block;
  margin-top: 0.9rem;
  margin-bottom: 1.3rem;
  padding: 0.42rem 0.75rem;
  border-radius: 999px;
  background: var(--green-soft);
  font: 700 0.76rem/1.2 Arial, sans-serif;
  color: var(--green-dark);
}

.split-section {
  display: grid;
  gap: 1rem;
}

.info-card {
  padding: 1.3rem;
}

.info-card h2 {
  font-size: clamp(1.6rem, 2.4vw, 2.4rem);
  margin: 0.45rem 0 0.7rem;
}

.emphasis {
  background:
    linear-gradient(180deg, rgba(47, 107, 67, 0.1), rgba(255, 255, 255, 0.65));
}

.zone-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}

.zone-tags span {
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(47, 107, 67, 0.14);
  font: 700 0.82rem/1 Arial, sans-serif;
  color: var(--green-dark);
}

.check-list {
  list-style: none;
  display: grid;
  gap: 0.8rem;
}

.check-list li {
  position: relative;
  padding-left: 1.5rem;
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
  background: var(--green);
}

.form-layout {
  display: grid;
  gap: 1rem;
}

.quote-form {
  padding: 1rem;
  display: grid;
  gap: 0.85rem;
}

.form-intro {
  display: grid;
  gap: 0.3rem;
  padding: 0.95rem 1rem;
  border-radius: 18px;
  background: rgba(220, 231, 219, 0.45);
  border: 1px solid rgba(47, 107, 67, 0.12);
}

.form-intro strong {
  font: 700 0.98rem/1.2 Arial, sans-serif;
  color: var(--text);
}

.form-intro p {
  color: var(--muted);
}

.field-grid {
  display: grid;
  gap: 0.8rem;
}

.field {
  display: grid;
  gap: 0.5rem;
}

label {
  font: 700 0.9rem/1.2 Arial, sans-serif;
  color: var(--text);
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid rgba(28, 35, 24, 0.16);
  border-radius: 16px;
  padding: 0.95rem 1rem;
  font: inherit;
  background: rgba(255, 255, 255, 0.9);
}

textarea {
  resize: vertical;
  min-height: 140px;
}

.terrain-group {
  border: 0;
  display: grid;
  gap: 0.7rem;
}

.terrain-group legend {
  font: 700 0.9rem/1.2 Arial, sans-serif;
  color: var(--text);
}

.choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.choice-pill {
  position: relative;
  cursor: pointer;
}

.choice-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.choice-pill span {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0.8rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(28, 35, 24, 0.14);
  background: rgba(255, 255, 255, 0.9);
  font: 700 0.9rem/1 Arial, sans-serif;
  color: var(--text);
}

.choice-pill input:checked + span {
  background: var(--green-dark);
  color: #fff;
  border-color: var(--green-dark);
}

.upload-field {
  display: grid;
  gap: 0.45rem;
  padding: 1rem;
  border: 1px dashed rgba(47, 107, 67, 0.28);
  border-radius: 20px;
  background: rgba(220, 231, 219, 0.35);
}

.upload-label {
  font: 700 0.9rem/1.2 Arial, sans-serif;
  color: var(--text);
}

.upload-field p {
  color: var(--muted);
}

.estimate-card {
  padding: 0.95rem 1rem;
  background:
    linear-gradient(180deg, rgba(47, 107, 67, 0.16), rgba(255, 255, 255, 0.92));
  border-color: rgba(47, 107, 67, 0.24);
  box-shadow: 0 22px 40px rgba(34, 77, 48, 0.08);
}

.estimate-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}

.estimate-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: rgba(47, 107, 67, 0.12);
  border: 1px solid rgba(47, 107, 67, 0.16);
  font: 700 0.75rem/1 Arial, sans-serif;
  color: var(--green-dark);
}

.estimate-card strong {
  display: block;
  margin-top: 0.4rem;
  font: 700 clamp(1.85rem, 4.2vw, 2.45rem)/1.02 Arial, sans-serif;
  color: var(--green-dark);
}

#estimate-note {
  margin-top: 0.55rem;
  color: var(--muted);
  font-size: 0.98rem;
}

.estimate-disclaimer {
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(28, 35, 24, 0.08);
  font: 0.88rem/1.5 Arial, sans-serif;
  color: var(--muted);
}

.quote-form .cta-group {
  margin-top: 0;
}

.cta-group-form {
  align-items: stretch;
}

.quote-form .btn {
  width: fit-content;
}

.btn-wide {
  min-width: 220px;
}

.cta-group-form .btn-primary {
  min-width: 240px;
}

.cta-group-form .btn-secondary {
  border-color: rgba(28, 35, 24, 0.14);
  color: var(--green-dark);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: none;
}

.contact-block {
  display: grid;
  gap: 0.5rem;
  align-content: start;
}

.contact-link {
  text-decoration: none;
  font: 700 1.08rem/1.3 Arial, sans-serif;
  color: var(--green-dark);
}

.muted {
  color: var(--muted);
}

.contact-note {
  margin-top: 0.75rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}

.contact-note strong {
  font: 700 0.9rem/1.2 Arial, sans-serif;
  color: var(--text);
}

.contact-note p {
  margin-top: 0.4rem;
}

.site-footer {
  margin-top: 3.6rem;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.42);
}

.footer-inner {
  padding: 1.2rem 0 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  justify-content: space-between;
  color: var(--muted);
  font: 0.92rem/1.4 Arial, sans-serif;
}

@media (min-width: 720px) {
  .hero {
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.82fr);
    align-items: end;
    padding-top: 3.55rem;
  }

  .quick-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .split-section {
    grid-template-columns: 1.1fr 0.9fr;
  }

  .form-layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
    align-items: start;
  }

  .field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 719px) {
  .header-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .header-inner nav {
    gap: 0.7rem 1rem;
  }

  .hero {
    padding-top: 2.15rem;
  }

  .service-visual {
    min-height: 180px;
  }

  .quote-form .btn,
  .quote-form .cta-group .btn {
    width: 100%;
  }

  .estimate-head {
    align-items: flex-start;
    flex-direction: column;
  }
}