/* ==========================================================================
   LES JARDINS D'ÉRICK — Feuille de style unique
   Direction : botanique contemporaine, courbes de niveau, crème & vert forêt
   Polices auto-hébergées : Fraunces (titres) + Manrope (texte)
   ========================================================================== */

/* ---------- 1. Polices ---------- */
@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces-latin-opsz-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces-latin-wght-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../assets/fonts/manrope-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2. Variables ---------- */
:root {
  --foret: #173D32;
  --foret-deep: #102C24;
  --foret-soft: #24503F;
  --mousse: #687A4A;
  --mousse-texte: #56663C;
  --sauge: #A9B98A;
  --sauge-pale: #E4E8D6;
  --creme: #F4F0E5;
  --creme-fonce: #EAE4D3;
  --blanc: #FBFAF6;
  --terre: #75563D;
  --terre-pale: #EFE6DC;
  --pollen: #D4AD55;
  --pollen-pale: #F3E8CC;
  --encre: #202721;
  --encre-douce: #4A534A;

  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;

  --r-xs: 6px;
  --r-s: 12px;
  --r-m: 22px;
  --r-big: clamp(4.5rem, 11vw, 10rem);
  --r-pill: 999px;

  --gutter: clamp(1.25rem, 4vw, 2.75rem);
  --section: clamp(4.5rem, 9vw, 8rem);
  --max: 1240px;
  --header-h: 76px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 3. Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--encre);
  background: var(--creme);
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }

p, ul, ol, dl, figure, blockquote { margin: 0; }
ul[class], ol[class], nav ul, nav ol, footer ul, .services-index ul, .zone-group ul { list-style: none; padding: 0; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 420;
  line-height: 1.08;
  letter-spacing: -.012em;
  color: var(--foret);
  font-optical-sizing: auto;
  text-wrap: balance;
}
p { text-wrap: pretty; }

strong { font-weight: 700; }

:focus-visible {
  outline: 3px solid var(--pollen);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--sauge); color: var(--foret-deep); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 200;
  padding: .75rem 1.1rem;
  background: var(--foret);
  color: var(--creme);
  border-radius: var(--r-s);
  font-weight: 700;
  text-decoration: none;
  transition: top .2s;
}
.skip-link:focus { top: 1rem; }

.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section); }
.section--blanc { background: var(--blanc); }
.section--sauge { background: var(--sauge-pale); }
.section--foret { background: var(--foret); color: var(--creme); }
.section--foret h2,
.section--foret h3 { color: var(--creme); }
.section--tight { padding-block: calc(var(--section) * .6); }

/* Titres de section */
.heading { max-width: 46rem; }
.heading h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); }
.heading p { margin-top: 1.1rem; font-size: 1.125rem; color: var(--encre-douce); max-width: 38rem; }
.section--foret .heading p { color: var(--sauge); }
.heading--split {
  display: grid;
  gap: 1.25rem 3rem;
  max-width: none;
  align-items: end;
}
@media (min-width: 900px) {
  .heading--split { grid-template-columns: 1.1fr .9fr; }
  .heading--split p { margin-top: 0; }
}

.lead { font-size: clamp(1.125rem, 1.6vw, 1.3rem); line-height: 1.6; color: var(--encre-douce); }

.prose { max-width: 40rem; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); margin-top: 2.2em; }
.prose h3 { font-size: 1.35rem; margin-top: 1.8em; }
.prose ul { padding-left: 1.2rem; }
.prose li + li { margin-top: .4em; }
.prose li::marker { color: var(--mousse); }
.prose a { color: var(--foret); font-weight: 600; }

.note {
  font-size: .9rem;
  line-height: 1.55;
  color: var(--encre-douce);
}
.section--foret .note { color: var(--sauge); }

/* ---------- 4. Boutons ---------- */
.btn {
  --btn-bg: var(--foret);
  --btn-fg: var(--creme);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 3.25rem;
  padding: .85rem 1.6rem;
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: 700 1rem/1.2 var(--sans);
  letter-spacing: .005em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary:hover { --btn-bg: var(--foret-soft); }
.btn--pollen { --btn-bg: var(--pollen); --btn-fg: var(--foret-deep); }
.btn--pollen:hover { --btn-bg: #E0BD6C; }
.btn--light { --btn-bg: var(--creme); --btn-fg: var(--foret); }
.btn--light:hover { --btn-bg: var(--blanc); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--foret); border-color: rgba(23, 61, 50, .35); }
.btn--ghost:hover { border-color: var(--foret); --btn-bg: rgba(23, 61, 50, .05); }
.btn--ghost-light { --btn-bg: transparent; --btn-fg: var(--creme); border-color: rgba(244, 240, 229, .45); }
.btn--ghost-light:hover { border-color: var(--creme); --btn-bg: rgba(244, 240, 229, .08); }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }

.actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  color: var(--foret);
  text-decoration: underline;
  text-decoration-color: var(--sauge);
  text-decoration-thickness: 2px;
  text-underline-offset: .3em;
}
.text-link:hover { text-decoration-color: var(--foret); }
.section--foret .text-link { color: var(--creme); text-decoration-color: var(--mousse); }
.section--foret .text-link:hover { text-decoration-color: var(--pollen); }

/* ---------- 5. Identité ---------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: var(--foret);
  text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand__mark { width: 2.6rem; height: 2.6rem; flex: none; }
.brand__mark .mark-lines { stroke: currentColor; }
.brand__name { display: flex; flex-direction: column; line-height: 1; }
.brand__small {
  font: 700 .74rem/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mousse-texte);
}
.brand__big {
  font: 440 1.62rem/1.02 var(--serif);
  letter-spacing: -.015em;
  margin-top: .12rem;
}
.brand--light { color: var(--creme); }
.brand--light .brand__small { color: var(--sauge); }

/* Pastille d'enseigne : indique à quelle activité appartient un service */
.enseigne {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .4rem .85rem .4rem .5rem;
  border-radius: var(--r-pill);
  font: 700 .85rem/1.2 var(--sans);
  text-decoration: none;
  white-space: nowrap;
}
.enseigne::before {
  content: "";
  width: .85rem; height: .85rem;
  border-radius: 50%;
  flex: none;
}
.enseigne--jardins { background: var(--sauge-pale); color: var(--foret); }
.enseigne--jardins::before { background: var(--mousse); }
.enseigne--paysages { background: var(--foret); color: var(--creme); }
.enseigne--paysages::before { background: var(--pollen); }

/* ---------- 6. En-tête ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(244, 240, 229, .94);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s;
}
.site-header.is-scrolled {
  border-bottom-color: rgba(23, 61, 50, .1);
  box-shadow: 0 10px 30px -24px rgba(16, 44, 36, .55);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--header-h);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 2.9rem;
  padding: .5rem .9rem;
  border: 1.5px solid rgba(23, 61, 50, .25);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--foret);
  font: 700 .95rem/1 var(--sans);
  cursor: pointer;
}
.nav-toggle__bars { position: relative; width: 20px; height: 12px; }
.nav-toggle__bars span {
  position: absolute; left: 0;
  width: 100%; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .3s var(--ease), top .3s var(--ease), opacity .2s;
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 5px; }
.nav-toggle__bars span:nth-child(3) { top: 10px; }
.nav-open .nav-toggle__bars span:nth-child(1) { top: 5px; transform: rotate(45deg); }
.nav-open .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle__bars span:nth-child(3) { top: 5px; transform: rotate(-45deg); }

.nav a { text-decoration: none; }
.nav__list { display: flex; flex-direction: column; gap: .2rem; }
.nav__link,
.nav__sub-toggle {
  display: flex;
  align-items: center;
  gap: .35rem;
  width: 100%;
  padding: .85rem 0;
  border: 0;
  background: none;
  color: var(--foret);
  font: 600 1.35rem/1.2 var(--serif);
  text-align: left;
  cursor: pointer;
}
.nav__link[aria-current="page"],
.nav__sub-toggle.is-current { color: var(--mousse-texte); }
.nav__sub-toggle svg { width: 1rem; height: 1rem; transition: transform .25s var(--ease); }
.nav__sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.subnav { display: none; padding: 0 0 .75rem .9rem; border-left: 2px solid var(--sauge); }
.subnav.is-open { display: block; }
.subnav a {
  display: block;
  padding: .5rem 0;
  font-weight: 600;
  color: var(--encre);
}
.subnav a[aria-current="page"] { color: var(--mousse-texte); }
.subnav__group {
  display: block;
  margin: .75rem 0 .15rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--mousse-texte);
}
.nav__cta { margin-top: 1.25rem; }

/* Navigation mobile : panneau plein écran */
@media (max-width: 1099.98px) {
  /* backdrop-filter enfermerait le menu plein écran dans l'en-tête */
  .site-header { background: var(--creme); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    z-index: 90;
    overflow-y: auto;
    padding: 1.5rem var(--gutter) 7rem;
    background: var(--creme);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s;
  }
  .nav-open .nav {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s;
  }
  .nav__item { border-bottom: 1px solid rgba(23, 61, 50, .1); }
  .nav-open { overflow: hidden; }
}

/* Navigation bureau */
@media (min-width: 1100px) {
  .nav-toggle { display: none; }
  .nav { display: flex; align-items: center; gap: 1.6rem; }
  .nav__list { flex-direction: row; align-items: center; gap: .15rem; }
  .nav__item { position: relative; }
  .nav__link,
  .nav__sub-toggle {
    padding: .6rem .7rem;
    border-radius: var(--r-pill);
    font: 600 .96rem/1.2 var(--sans);
    color: var(--encre);
  }
  .nav__link:hover,
  .nav__sub-toggle:hover { background: rgba(23, 61, 50, .06); }
  .nav__link[aria-current="page"],
  .nav__sub-toggle.is-current {
    color: var(--foret);
    box-shadow: inset 0 -2px 0 var(--pollen);
    border-radius: 0;
  }
  .nav__cta { margin: 0; }
  .nav__cta .btn { min-height: 2.9rem; padding: .7rem 1.25rem; font-size: .95rem; }
  .nav__link, .nav__sub-toggle, .nav__cta .btn { white-space: nowrap; }

  .subnav {
    position: absolute;
    top: calc(100% + .6rem);
    left: -1rem;
    width: 34rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .25rem 1.5rem;
    padding: 1.4rem 1.5rem 1.2rem;
    border: 0;
    border-radius: var(--r-m);
    background: var(--blanc);
    box-shadow: 0 30px 60px -30px rgba(16, 44, 36, .45), 0 0 0 1px rgba(23, 61, 50, .07);
    visibility: hidden;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s;
  }
  .subnav::before { content: ""; position: absolute; left: 0; right: 0; top: -.8rem; height: .8rem; }
  .nav__item:hover > .subnav,
  .nav__item:focus-within > .subnav,
  .subnav.is-open {
    display: grid;
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s;
  }
  .subnav__col a { padding: .45rem .6rem; margin-inline: -.6rem; border-radius: var(--r-xs); font-size: .95rem; }
  .subnav__col a:hover { background: var(--creme); }
  .subnav__group { margin-top: 0; margin-bottom: .35rem; }
  .subnav__all { grid-column: 1 / -1; margin-top: .6rem; padding-top: .8rem; border-top: 1px solid rgba(23, 61, 50, .1); }
}

/* ---------- 7. Hero d'accueil ---------- */
.hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(34rem, 88vh, 52rem);
  display: flex;
  align-items: flex-end;
  color: var(--creme);
  overflow: hidden;
  background: var(--foret);
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(16, 44, 36, .35) 0%, rgba(16, 44, 36, 0) 30%),
    linear-gradient(90deg, rgba(16, 44, 36, .88) 0%, rgba(16, 44, 36, .55) 45%, rgba(16, 44, 36, .1) 80%),
    linear-gradient(0deg, rgba(16, 44, 36, .75) 0%, rgba(16, 44, 36, 0) 55%);
}
.hero__content { padding-block: 8rem clamp(7rem, 12vw, 9.5rem); }
.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-weight: 700;
  font-size: 1rem;
  color: var(--pollen-pale);
}
.hero__kicker svg { width: 2rem; height: 1.2rem; }
.hero h1 {
  margin-top: 1.1rem;
  max-width: 13em;
  font-size: clamp(2.55rem, 6.4vw, 5.3rem);
  font-weight: 380;
  line-height: 1.02;
  color: var(--creme);
}
.hero__text {
  margin-top: 1.4rem;
  max-width: 35rem;
  font-size: clamp(1.06rem, 1.5vw, 1.2rem);
  color: rgba(244, 240, 229, .9);
}
.hero .actions { margin-top: 2.2rem; }

/* Courbes de niveau qui se dessinent au chargement */
.hero__lines {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: -1;
  width: 100%;
  height: clamp(9rem, 18vw, 15rem);
  pointer-events: none;
}
.hero__lines path {
  fill: none;
  stroke: var(--sauge);
  stroke-width: 1.5;
  stroke-opacity: .55;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.hero__lines .hero__ground { fill: var(--creme); stroke: none; }
@media (prefers-reduced-motion: no-preference) {
  .hero__lines path:not(.hero__ground) {
    stroke-dashoffset: 1;
    animation: draw 2.4s var(--ease) forwards;
  }
  .hero__lines path:nth-child(2) { animation-delay: .25s; }
  .hero__lines path:nth-child(3) { animation-delay: .5s; }
  .hero__lines path:nth-child(4) { animation-delay: .75s; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Réassurance */
.assurances {
  position: relative;
  display: grid;
  gap: 1rem;
  padding-block: 2rem 1rem;
}
.assurance {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  font-weight: 600;
  color: var(--encre-douce);
}
.assurance strong {
  flex: none;
  min-width: 6.4rem;
  font: 440 1.55rem/1 var(--serif);
  color: var(--foret);
  white-space: nowrap;
}
@media (min-width: 760px) {
  .assurances { grid-template-columns: repeat(3, auto); justify-content: space-between; padding-block: 2.4rem 1rem; }
  .assurance + .assurance { padding-left: 2rem; border-left: 1px solid rgba(23, 61, 50, .15); }
  .assurance strong { min-width: 0; }
}

/* ---------- 8. Deux savoir-faire ---------- */
.duo { display: grid; gap: 1.25rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.duo__panel {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 34rem;
  padding: clamp(1.6rem, 3.5vw, 3rem);
  overflow: hidden;
  border-radius: var(--r-m);
  color: var(--creme);
  text-decoration: none;
}
.duo__panel:hover { text-decoration: none; }
.duo__panel--jardins { border-top-left-radius: var(--r-big); }
.duo__panel--paysages { border-top-right-radius: var(--r-big); }
.duo__media { position: absolute; inset: 0; z-index: -2; }
.duo__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.duo__panel:hover .duo__media img,
.duo__panel:focus-visible .duo__media img { transform: scale(1.045); }
.duo__panel::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  transition: opacity .5s var(--ease);
}
.duo__panel--jardins::after {
  background: linear-gradient(0deg, rgba(40, 56, 26, .95) 0%, rgba(58, 76, 38, .78) 42%, rgba(58, 76, 38, .12) 78%);
}
.duo__panel--paysages::after {
  background: linear-gradient(0deg, rgba(16, 44, 36, .97) 0%, rgba(16, 44, 36, .8) 45%, rgba(16, 44, 36, .1) 80%);
}
.duo__question {
  font: 700 .95rem/1.3 var(--sans);
  color: var(--pollen-pale);
}
.duo__brand {
  margin-top: .7rem;
  font: 400 clamp(2.2rem, 4.2vw, 3.5rem)/1 var(--serif);
  color: var(--creme);
  letter-spacing: -.02em;
}
.duo__brand small {
  display: block;
  margin-bottom: .3rem;
  font: 700 .8rem/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sauge);
}
.duo__desc { margin-top: 1rem; max-width: 26rem; color: rgba(244, 240, 229, .9); }
.duo__list {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: 1.3rem;
}
.duo__list li {
  padding: .3rem .8rem;
  border: 1px solid rgba(244, 240, 229, .35);
  border-radius: var(--r-pill);
  font-size: .9rem;
  font-weight: 600;
}
.duo__cta {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: .6rem;
  margin-top: 1.8rem;
  padding: .85rem 1.4rem;
  border-radius: var(--r-pill);
  font-weight: 700;
  transition: background-color .25s, color .25s, gap .25s var(--ease);
}
.duo__panel--jardins .duo__cta { background: var(--creme); color: var(--foret); }
.duo__panel--paysages .duo__cta { background: var(--pollen); color: var(--foret-deep); }
.duo__panel:hover .duo__cta { gap: .9rem; }
.duo__cta svg { width: 1.1rem; height: 1.1rem; }

@media (min-width: 900px) {
  .duo { grid-template-columns: 1fr 1.18fr; align-items: end; gap: 1.5rem; }
  .duo__panel--jardins { min-height: 38rem; }
  .duo__panel--paysages { min-height: 44rem; }
}

/* ---------- 9. Depuis 2008 ---------- */
.since {
  position: relative;
  overflow: hidden;
  background: var(--blanc) url("../assets/images/illustrations/topographie-sauge.svg") center / cover no-repeat;
}
.since__grid { display: grid; gap: 2rem 4rem; align-items: center; }
.since__year {
  font: 300 clamp(6.5rem, 21vw, 17rem)/.8 var(--serif);
  letter-spacing: -.05em;
  color: var(--foret);
}
.since__year span {
  display: block;
  margin-bottom: .6rem;
  font: 700 1rem/1 var(--sans);
  letter-spacing: .02em;
  color: var(--mousse-texte);
}
.since__text h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
.since__text p { margin-top: 1.1rem; color: var(--encre-douce); }
@media (min-width: 900px) {
  .since__grid { grid-template-columns: 1.15fr 1fr; }
}

/* ---------- 10. Index des services (accueil / prestations) ---------- */
.services-index {
  display: grid;
  gap: 3rem 4rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 900px) { .services-index { grid-template-columns: 1fr 1fr; } }
.services-index__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1.1rem; }
.services-index__head p { font-size: .95rem; line-height: 1.35; text-align: right; color: var(--encre-douce); }
.service-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .25rem 1rem;
  align-items: center;
  padding: 1.25rem .25rem;
  border-top: 1px solid rgba(23, 61, 50, .15);
  text-decoration: none;
  transition: background-color .3s var(--ease), padding .3s var(--ease);
}
.service-row:last-child { border-bottom: 1px solid rgba(23, 61, 50, .15); }
.service-row:hover { text-decoration: none; background: rgba(169, 185, 138, .18); padding-inline: 1rem; }
.service-row__title { font: 440 clamp(1.35rem, 2.2vw, 1.7rem)/1.15 var(--serif); color: var(--foret); }
.service-row__desc { grid-column: 1; font-size: .98rem; color: var(--encre-douce); }
.service-row__icon {
  grid-row: 1 / span 2;
  grid-column: 2;
  display: grid;
  place-items: center;
  width: 2.8rem; height: 2.8rem;
  border-radius: 50%;
  border: 1.5px solid rgba(23, 61, 50, .2);
  color: var(--foret);
  transition: background-color .3s, color .3s, border-color .3s;
}
.service-row__icon svg { width: 1.1rem; height: 1.1rem; }
.service-row:hover .service-row__icon { background: var(--foret); border-color: var(--foret); color: var(--creme); }

/* ---------- 11. Mosaïque de réalisations ---------- */
.mosaic {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.mosaic__item { position: relative; overflow: hidden; border-radius: var(--r-s); background: var(--creme-fonce); }
.mosaic__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.mosaic__item:hover img { transform: scale(1.03); }
.mosaic__item figcaption {
  position: absolute; left: .75rem; bottom: .75rem;
  padding: .35rem .75rem;
  border-radius: var(--r-pill);
  background: rgba(251, 250, 246, .92);
  color: var(--foret);
  font-size: .82rem;
  font-weight: 700;
}
.mosaic__item--tall { grid-row: span 2; }
.mosaic__item:first-child { border-top-left-radius: var(--r-big); }
@media (min-width: 900px) {
  .mosaic { grid-template-columns: 1.2fr 1fr 1fr; grid-auto-rows: 17rem; }
  .mosaic__item--wide { grid-column: span 2; }
}
@media (max-width: 899.98px) {
  .mosaic { grid-auto-rows: 13rem; }
}

/* ---------- 12. Bandeau crédit d'impôt ---------- */
.credit-band {
  position: relative;
  display: grid;
  gap: 1.5rem 3rem;
  padding: clamp(2rem, 4.5vw, 3.5rem);
  border-radius: var(--r-m);
  border-bottom-right-radius: var(--r-big);
  background: var(--pollen-pale);
  color: var(--encre);
}
.credit-band__figure {
  font: 340 clamp(4.5rem, 11vw, 8rem)/.85 var(--serif);
  letter-spacing: -.04em;
  color: var(--foret);
}
.credit-band__figure span { font-size: .5em; letter-spacing: 0; }
.credit-band h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
.credit-band p { margin-top: .9rem; }
.credit-band .note { margin-top: 1rem; }
@media (min-width: 860px) {
  .credit-band { grid-template-columns: auto 1fr; align-items: center; }
}

/* ---------- 13. Avis ---------- */
.reviews {
  position: relative;
  display: grid;
  gap: 2.5rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.reviews::before {
  content: "";
  position: absolute;
  inset: -3rem calc(-1 * var(--gutter));
  z-index: 0;
  background: url("../assets/images/illustrations/topographie-foret.svg") center / cover no-repeat;
  opacity: .8;
  pointer-events: none;
}
.review { position: relative; z-index: 1; max-width: 26rem; }
.review__stars { display: flex; gap: .2rem; color: var(--pollen); }
.review__stars svg { width: 1.1rem; height: 1.1rem; }
.review blockquote {
  margin-top: 1rem;
  font: italic 400 clamp(1.2rem, 1.8vw, 1.42rem)/1.45 var(--serif);
  color: var(--foret);
}
.review figcaption {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: 1.1rem;
  font-weight: 700;
  font-size: .95rem;
}
.review figcaption span { font-weight: 500; color: var(--encre-douce); }
.review figcaption::before { content: ""; width: 1.8rem; height: 2px; background: var(--sauge); }
@media (min-width: 900px) {
  .reviews { grid-template-columns: repeat(3, 1fr); gap: 3rem; }
  .review:nth-child(2) { margin-top: 5rem; }
  .review:nth-child(3) { margin-top: 2rem; }
}
.rating-summary {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem .8rem;
  margin-top: 1.4rem;
}
.rating-summary strong { font: 440 2rem/1 var(--serif); color: var(--foret); }

/* ---------- 14. Zone (accueil + page) ---------- */
.zone-grid { display: grid; gap: 2.5rem 4rem; align-items: center; }
@media (min-width: 900px) { .zone-grid { grid-template-columns: 1fr 1.05fr; } }
.communes {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: 1.6rem;
}
.communes li {
  padding: .35rem .85rem;
  border-radius: var(--r-pill);
  background: var(--blanc);
  border: 1px solid rgba(23, 61, 50, .12);
  font-size: .92rem;
  font-weight: 600;
}
.communes li.is-home { background: var(--foret); color: var(--creme); border-color: var(--foret); }
.map-schema {
  position: relative;
  padding: clamp(1rem, 2.5vw, 1.8rem);
  border-radius: var(--r-m);
  border-top-right-radius: var(--r-big);
  background: var(--blanc);
  box-shadow: 0 0 0 1px rgba(23, 61, 50, .08);
}
.map-schema svg { width: 100%; height: auto; }
.map-schema figcaption { margin-top: .6rem; font-size: .82rem; color: var(--encre-douce); }
.map-schema .ring { fill: none; stroke: var(--sauge); stroke-width: 1.2; }
.map-schema .ring--1 { stroke-opacity: 1; }
.map-schema .ring--2 { stroke-opacity: .7; stroke-dasharray: 5 6; }
.map-schema .ring--3 { stroke-opacity: .45; stroke-dasharray: 2 6; }
.map-schema .river { fill: none; stroke: #BCCAD0; stroke-width: 6; stroke-linecap: round; opacity: .7; }
.map-schema .dot { fill: var(--mousse); }
.map-schema .dot--home { fill: var(--pollen); stroke: var(--foret); stroke-width: 3; }
.map-schema .dot--city { fill: var(--foret); }
.map-schema text { font: 600 13px var(--sans); fill: var(--encre); }
.map-schema .label--home { font: 500 20px var(--serif); fill: var(--foret); }
.map-schema .label--city { font: 700 14px var(--sans); fill: var(--foret); }

.zone-groups { display: grid; gap: 2rem; margin-top: 3rem; }
@media (min-width: 760px) { .zone-groups { grid-template-columns: repeat(3, 1fr); } }
.zone-group h3 { font-size: 1.35rem; padding-bottom: .8rem; border-bottom: 2px solid var(--sauge); }
.zone-group ul { margin-top: .9rem; }
.zone-group li { padding: .35rem 0; font-weight: 600; }
.zone-group p { margin-top: .9rem; font-size: .95rem; color: var(--encre-douce); }

/* ---------- 15. Appel final ---------- */
.cta-final {
  position: relative;
  overflow: hidden;
  background: var(--foret) url("../assets/images/illustrations/topographie-creme.svg") center / cover no-repeat;
  color: var(--creme);
}
.cta-final__inner { display: grid; gap: 2rem 4rem; align-items: end; }
.cta-final h2 { font-size: clamp(2.4rem, 5.5vw, 4.4rem); color: var(--creme); font-weight: 380; }
.cta-final p { margin-top: 1.1rem; max-width: 32rem; color: var(--sauge); font-size: 1.1rem; }
.cta-final .actions { margin-top: 0; }
.cta-final__phone {
  display: block;
  margin-top: 1rem;
  font: 400 clamp(1.5rem, 2.6vw, 2rem)/1.2 var(--serif);
  color: var(--creme);
  text-decoration: none;
}
.cta-final__phone:hover { color: var(--pollen); text-decoration: none; }
@media (min-width: 900px) { .cta-final__inner { grid-template-columns: 1.3fr 1fr; } }

/* ---------- 16. Pied de page ---------- */
.site-footer {
  position: relative;
  background: var(--foret-deep);
  color: var(--creme);
  padding-block: clamp(4rem, 8vw, 6rem) 2rem;
}
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: var(--pollen-pale); }
.footer-top { display: grid; gap: 3rem 2.5rem; }
.footer-brand .brand__big { font-size: 2.3rem; }
.footer-brand .brand__mark { width: 3.2rem; height: 3.2rem; }
.footer-brand p { margin-top: 1.2rem; max-width: 22rem; color: var(--sauge); }
.footer-contact { margin-top: 1.6rem; display: grid; gap: .35rem; font-style: normal; }
.footer-contact a { font-weight: 700; }
.footer-col h2 {
  margin-bottom: 1rem;
  font: 700 .8rem/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sauge);
}
.footer-col li + li { margin-top: .55rem; }
.footer-col a { color: rgba(244, 240, 229, .92); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: 1.6rem;
  border-top: 1px solid rgba(244, 240, 229, .14);
  font-size: .88rem;
  color: rgba(244, 240, 229, .7);
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
@media (min-width: 760px) { .footer-top { grid-template-columns: 1.4fr 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .footer-top { grid-template-columns: 1.5fr 1fr 1fr 1fr; } .footer-brand { grid-column: auto; } }

/* ---------- 17. Barre d'action mobile ---------- */
.mobile-bar {
  position: fixed;
  left: .75rem; right: .75rem;
  bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
  z-index: 95;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .4rem;
  padding: .4rem;
  border-radius: var(--r-pill);
  background: rgba(16, 44, 36, .96);
  box-shadow: 0 16px 40px -18px rgba(0, 0, 0, .6);
}
.mobile-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 3rem;
  border-radius: var(--r-pill);
  font-weight: 800;
  font-size: .95rem;
  text-decoration: none;
  color: var(--creme);
}
.mobile-bar a:last-child { background: var(--pollen); color: var(--foret-deep); }
.mobile-bar svg { width: 1.15rem; height: 1.15rem; }
@media (max-width: 899.98px) {
  body { padding-bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 900px) { .mobile-bar { display: none; } }

/* ---------- Bouton « Retour en haut » ---------- */
.to-top {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right, 0px));
  /* Au-dessus de la barre Appeler / Devis sur mobile */
  bottom: calc(5.4rem + env(safe-area-inset-bottom, 0px));
  z-index: 94;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  border: 1px solid rgba(23, 61, 50, .14);
  border-radius: var(--r-pill);
  background: rgba(251, 250, 246, .94);
  color: var(--foret);
  box-shadow: 0 14px 30px -16px rgba(16, 44, 36, .55);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(.92);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s,
              background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s,
              background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.to-top svg { width: 1.15rem; height: 1.15rem; transition: transform .2s var(--ease); }
.to-top:hover { background: var(--foret); border-color: var(--foret); color: var(--creme); }
.to-top:hover svg { transform: translateY(-2px); }
.to-top:focus-visible { outline: 3px solid var(--pollen); outline-offset: 3px; }
.to-top:active { transform: scale(.94); }
.nav-open .to-top { opacity: 0; visibility: hidden; }
@media (min-width: 900px) {
  .to-top { right: 1.75rem; bottom: 1.75rem; width: 3rem; height: 3rem; }
}
/* Tant que le bouton peut chevaucher les liens du bas de pied de page, on leur laisse la place */
@media (min-width: 900px) and (max-width: 1399.98px) {
  .footer-bottom { padding-right: 4.25rem; }
}

/* ---------- 18. En-tête des pages intérieures ---------- */
.page-hero { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3.5rem, 7vw, 6rem); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .3rem; font-size: .88rem; color: var(--encre-douce); }
.breadcrumb li + li::before { content: "/"; margin-right: .3rem; color: var(--sauge); }
.breadcrumb a { color: var(--encre-douce); }
.breadcrumb [aria-current="page"] { color: var(--foret); font-weight: 700; }
.page-hero__grid { display: grid; gap: 2.5rem 4rem; align-items: center; margin-top: clamp(1.5rem, 3.5vw, 2.5rem); }
.page-hero h1 { margin-top: 1.1rem; font-size: clamp(2.4rem, 5.4vw, 4.4rem); font-weight: 390; }
.page-hero .lead { margin-top: 1.3rem; max-width: 36rem; }
.page-hero__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-s);
  border-top-left-radius: var(--r-big);
  background: var(--creme-fonce);
}
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__media figcaption {
  position: absolute; right: .8rem; bottom: .8rem;
  padding: .3rem .7rem;
  border-radius: var(--r-pill);
  background: rgba(251, 250, 246, .9);
  font-size: .78rem; font-weight: 700; color: var(--foret);
}
.page-hero--simple { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.page-hero--simple .page-hero__intro { max-width: 52rem; margin-top: clamp(1.5rem, 3.5vw, 2.5rem); }
.page-hero__split { display: grid; gap: 2rem 4rem; align-items: end; margin-top: clamp(1.5rem, 3.5vw, 2.5rem); }
.page-hero__split .page-hero__intro { margin-top: 0; }
.hero-note {
  position: relative;
  padding: 1.6rem 1.6rem 1.7rem;
  border-radius: var(--r-m);
  border-top-right-radius: var(--r-big);
  background: var(--sauge-pale) url("../assets/images/illustrations/topographie-sauge.svg") center / cover no-repeat;
}
.hero-note__title { font: 440 1.5rem/1.2 var(--serif); color: var(--foret); }
.hero-note p + p { margin-top: .5rem; color: var(--encre-douce); font-size: .98rem; }
.hero-note .btn { margin-top: 1.2rem; }
@media (min-width: 900px) { .page-hero__split { grid-template-columns: 1.4fr .8fr; } }
@media (min-width: 900px) {
  .page-hero__grid { grid-template-columns: 1.15fr .85fr; }
}
@media (max-width: 899.98px) {
  .page-hero__media { aspect-ratio: 4 / 3; }
}

/* ---------- 19. Blocs de contenu ---------- */
.split { display: grid; gap: 2.5rem 5rem; align-items: center; }
.split__media { position: relative; overflow: hidden; border-radius: var(--r-s); background: var(--creme-fonce); }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__media--corner { border-top-right-radius: var(--r-big); }
.split__media--corner-l { border-bottom-left-radius: var(--r-big); }
.split__media--corner-l figcaption { left: auto; right: .8rem; }
.split__media figcaption {
  position: absolute; left: .8rem; bottom: .8rem;
  padding: .3rem .7rem;
  border-radius: var(--r-pill);
  background: rgba(251, 250, 246, .9);
  font-size: .78rem; font-weight: 700; color: var(--foret);
}
.split h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.split p + p { margin-top: 1rem; }
.split .lead { margin-top: 1.2rem; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--reverse .split__media { order: 2; }
  .split--wide-text { grid-template-columns: 1.2fr .8fr; }
}

/* Liste de prestations sous forme de légende de plan */
.legend { display: grid; gap: 0; margin-top: 2rem; }
.legend__item {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: .2rem 1rem;
  padding: 1.2rem 0;
  border-top: 1px solid rgba(23, 61, 50, .14);
}
.legend__item:last-child { border-bottom: 1px solid rgba(23, 61, 50, .14); }
.legend__swatch {
  grid-row: span 2;
  width: 1.5rem; height: 1.5rem;
  margin-top: .15rem;
  border-radius: 50% 50% 50% 6px;
  background: var(--sauge);
}
.legend__item:nth-child(3n+2) .legend__swatch { background: var(--mousse); }
.legend__item:nth-child(3n) .legend__swatch { background: var(--foret); }
.legend--mineral .legend__item:nth-child(3n+2) .legend__swatch { background: #B9AE9C; }
.legend--mineral .legend__item:nth-child(3n) .legend__swatch { background: var(--terre); }
.legend__item h3 { font-size: 1.28rem; }
.legend__item p { color: var(--encre-douce); }
@media (min-width: 760px) {
  .legend--2 { grid-template-columns: 1fr 1fr; column-gap: 3rem; }
  .legend--2 .legend__item:nth-last-child(2) { border-bottom: 1px solid rgba(23, 61, 50, .14); }
}

/* Saisons */
.seasons { display: grid; gap: 1rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.season {
  position: relative;
  padding: 1.6rem 1.5rem 1.8rem;
  border-radius: var(--r-m);
  background: var(--blanc);
  border-top: 5px solid var(--season, var(--sauge));
}
.season h3 { font-size: 1.5rem; }
.season p { margin-top: .7rem; color: var(--encre-douce); font-size: .98rem; }
.season--printemps { --season: var(--sauge); }
.season--ete { --season: var(--pollen); }
.season--automne { --season: var(--terre); }
.season--hiver { --season: var(--foret); }
@media (min-width: 700px) { .seasons { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .seasons { grid-template-columns: repeat(4, 1fr); } .season:nth-child(even) { margin-top: 2rem; } }

/* Étapes : pas japonais */
.steps { position: relative; display: grid; gap: 2rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
/* Pas japonais : une pierre par étape, de plus en plus dense (pas de numéros) */
.step { position: relative; padding-left: 4.4rem; }
.step::before {
  content: "";
  position: absolute; left: 0; top: -.1rem;
  width: 3.2rem; height: 2.4rem;
  border-radius: 48% 52% 45% 55% / 55% 45% 55% 45%;
  background: var(--sauge-pale);
  box-shadow: inset 0 -3px 0 rgba(16, 44, 36, .08);
}
.step:nth-child(2)::before { background: var(--sauge); border-radius: 55% 45% 52% 48% / 45% 55% 45% 55%; transform: rotate(-6deg); }
.step:nth-child(3)::before { background: var(--mousse); border-radius: 45% 55% 50% 50% / 50% 50% 55% 45%; transform: rotate(4deg); }
.step:nth-child(4)::before { background: var(--foret); border-radius: 52% 48% 55% 45% / 48% 52% 45% 55%; }
.step h3 { font-size: 1.3rem; }
.step p { margin-top: .5rem; color: var(--encre-douce); }
@media (max-width: 899.98px) {
  .steps::before { content: ""; position: absolute; left: 1.6rem; top: 2.6rem; bottom: 2rem; border-left: 2px dotted var(--sauge); }
}
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
  .steps::before {
    content: "";
    position: absolute; left: 1.6rem; right: 12%; top: .4rem; height: 1.6rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 24' preserveAspectRatio='none'%3E%3Cpath d='M0 14 C 60 2, 110 22, 170 12 S 290 2, 400 12' fill='none' stroke='%23A9B98A' stroke-width='2' stroke-dasharray='2 7' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  }
  .step { padding-left: 0; padding-top: 4rem; }
  .step::before { top: 0; }
  .step:nth-child(even)::before { top: .5rem; }
}

/* Deux colonnes : éligible / non éligible */
.eligibility { display: grid; gap: 1.25rem; margin-top: clamp(2rem, 4vw, 3rem); }
.eligibility__col { padding: clamp(1.6rem, 3vw, 2.4rem); border-radius: var(--r-m); }
.eligibility__col h3 { display: flex; align-items: center; gap: .8rem; font-size: 1.45rem; }
.eligibility__col h3 svg { width: 2rem; height: 2rem; flex: none; }
.eligibility__col > p { margin-top: .6rem; font-size: .95rem; }
.eligibility__col ul { margin-top: 1.3rem; }
.eligibility__col li {
  display: flex;
  gap: .7rem;
  padding: .55rem 0;
  border-top: 1px solid currentColor;
  border-color: rgba(23, 61, 50, .12);
  font-weight: 600;
}
.eligibility__col li svg { width: 1.2rem; height: 1.2rem; flex: none; margin-top: .25rem; }
.eligibility__col--oui { background: var(--sauge-pale); }
.eligibility__col--oui h3 svg,
.eligibility__col--oui li svg { color: var(--mousse-texte); }
.eligibility__col--non { background: var(--terre-pale); }
.eligibility__col--non h3,
.eligibility__col--non h3 svg,
.eligibility__col--non li svg { color: var(--terre); }
@media (min-width: 860px) { .eligibility { grid-template-columns: 1fr 1fr; } }

/* Encadrés */
.callout {
  display: grid;
  gap: 1rem 2rem;
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
  border-radius: var(--r-m);
  background: var(--blanc);
  box-shadow: 0 0 0 1px rgba(23, 61, 50, .08);
}
.callout h2, .callout h3 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
.callout p + p { margin-top: .8rem; }
.callout--pollen { background: var(--pollen-pale); box-shadow: none; }
.callout--foret { background: var(--foret); color: var(--creme); box-shadow: none; }
.callout--foret h2, .callout--foret h3 { color: var(--creme); }
.callout--foret .note { color: var(--sauge); }
@media (min-width: 860px) { .callout--row { grid-template-columns: 1fr auto; align-items: center; } }

.facts { display: grid; gap: 1rem; margin-top: 2rem; }
.fact { padding: 1.4rem 1.5rem; border-radius: var(--r-m); background: var(--blanc); }
.fact strong { display: block; font: 380 clamp(2.2rem, 4vw, 3rem)/1 var(--serif); color: var(--foret); }
.fact span { display: block; margin-top: .5rem; font-weight: 600; color: var(--encre-douce); }
@media (min-width: 760px) { .facts { grid-template-columns: repeat(3, 1fr); } }

/* FAQ */
.faq { margin-top: 2rem; border-top: 1px solid rgba(23, 61, 50, .15); }
.faq details { border-bottom: 1px solid rgba(23, 61, 50, .15); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 0;
  font: 500 1.2rem/1.3 var(--serif);
  color: var(--foret);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  width: 1.6rem; height: 1.6rem;
  flex: none;
  border-radius: 50%;
  background:
    linear-gradient(var(--foret), var(--foret)) center / 10px 2px no-repeat,
    linear-gradient(var(--foret), var(--foret)) center / 2px 10px no-repeat,
    var(--sauge-pale);
  transition: transform .25s var(--ease);
}
.faq details[open] summary::after {
  background:
    linear-gradient(var(--foret), var(--foret)) center / 10px 2px no-repeat,
    var(--sauge-pale);
}
.faq details > div { padding: 0 0 1.4rem; max-width: 44rem; color: var(--encre-douce); }
.faq details > div p + p { margin-top: .7rem; }

/* Liens vers les autres services */
.related { display: grid; gap: .75rem; margin-top: 2rem; }
.related a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  border-radius: var(--r-s);
  background: var(--blanc);
  box-shadow: 0 0 0 1px rgba(23, 61, 50, .08);
  font: 500 1.15rem/1.25 var(--serif);
  color: var(--foret);
  text-decoration: none;
  transition: box-shadow .25s, transform .25s var(--ease);
}
.related a:hover { box-shadow: 0 0 0 1.5px var(--foret); transform: translateY(-2px); }
.related a small { display: block; margin-top: .2rem; font: 600 .82rem/1.2 var(--sans); color: var(--mousse-texte); }
.related svg { width: 1.1rem; height: 1.1rem; flex: none; }
@media (min-width: 760px) { .related { grid-template-columns: repeat(3, 1fr); } }

/* Offres des deux enseignes (page prestations) */
.offer {
  display: grid;
  gap: 2rem 4rem;
  padding: clamp(1.8rem, 4vw, 3.5rem);
  border-radius: var(--r-m);
}
.offer + .offer { margin-top: 1.5rem; }
.offer--jardins { background: var(--sauge-pale); border-top-left-radius: var(--r-big); }
.offer--paysages { background: var(--foret); color: var(--creme); border-bottom-right-radius: var(--r-big); }
.offer--paysages h2, .offer--paysages h3 { color: var(--creme); }
.offer h2 { margin-top: 1rem; font-size: clamp(2rem, 3.8vw, 3rem); }
.offer__intro p { margin-top: 1rem; }
.offer--paysages .offer__intro p { color: var(--sauge); }
.offer__list li + li { margin-top: .5rem; }
.offer__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--r-s);
  background: rgba(251, 250, 246, .7);
  text-decoration: none;
  transition: background-color .25s;
}
.offer__list a:hover { background: var(--blanc); }
.offer--paysages .offer__list a { background: rgba(244, 240, 229, .07); }
.offer--paysages .offer__list a:hover { background: rgba(244, 240, 229, .14); }
.offer__list strong { display: block; font: 500 1.25rem/1.2 var(--serif); }
.offer__list span { display: block; margin-top: .25rem; font-size: .95rem; opacity: .85; }
.offer__list svg { width: 1.1rem; height: 1.1rem; flex: none; }
@media (min-width: 900px) { .offer { grid-template-columns: .9fr 1.1fr; align-items: start; } }

/* ---------- 20. Réalisations ---------- */
.gallery { columns: 2 12rem; column-gap: 1rem; margin-top: 2rem; }
.gallery__item { break-inside: avoid; margin-bottom: 1rem; }
.gallery__btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--r-s);
  overflow: hidden;
  background: var(--creme-fonce);
  cursor: zoom-in;
}
.gallery__btn img { width: 100%; transition: transform .9s var(--ease); }
.gallery__btn:hover img { transform: scale(1.03); }
.gallery__btn::after {
  content: "";
  position: absolute; right: .7rem; top: .7rem;
  width: 2.2rem; height: 2.2rem;
  border-radius: 50%;
  background: rgba(251, 250, 246, .9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23173D32' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center / 1rem no-repeat;
  opacity: 0;
  transition: opacity .25s;
}
.gallery__btn:hover::after,
.gallery__btn:focus-visible::after { opacity: 1; }
.gallery__item figcaption { margin-top: .55rem; font-size: .9rem; font-weight: 600; color: var(--encre-douce); }
@media (min-width: 900px) { .gallery { columns: 3 14rem; column-gap: 1.25rem; } .gallery__item { margin-bottom: 1.25rem; } }

.chantier + .chantier { margin-top: clamp(4rem, 8vw, 6rem); }
.chantier__head { display: grid; gap: 1rem 3rem; align-items: end; }
.chantier__head h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.chantier__head p { color: var(--encre-douce); max-width: 34rem; }
@media (min-width: 900px) { .chantier__head { grid-template-columns: 1fr 1fr; } }
.chantiers-duo { display: grid; gap: clamp(3.5rem, 7vw, 5rem) 3rem; }
.chantier-solo h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.chantier-solo p { margin-top: .8rem; max-width: 30rem; color: var(--encre-douce); }
.chantier-solo .gallery__item { margin-top: 1.6rem; }
.chantier-solo .gallery__btn { aspect-ratio: 4 / 5; }
.chantier-solo .gallery__btn img { height: 100%; object-fit: cover; }
.chantier-solo:nth-child(2) .gallery__btn { border-top-right-radius: var(--r-big); }
@media (min-width: 900px) {
  .chantiers-duo { grid-template-columns: 1fr 1fr; }
  .chantier-solo:nth-child(2) { margin-top: 6rem; }
}

/* Avant / Après côte à côte */
.compare { display: grid; gap: 1rem; margin-top: 2rem; }
.compare__pair { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.compare__side { position: relative; }
.compare__side .gallery__btn { aspect-ratio: 3 / 4; }
.compare__side .gallery__btn img { height: 100%; object-fit: cover; }
.compare__label {
  position: absolute; left: .7rem; top: .7rem; z-index: 1;
  padding: .3rem .8rem;
  border-radius: var(--r-pill);
  font-size: .82rem; font-weight: 800;
  pointer-events: none;
}
.compare__label--avant { background: var(--blanc); color: var(--terre); }
.compare__label--apres { background: var(--foret); color: var(--creme); }
.compare figcaption { margin-top: .6rem; font-size: .9rem; font-weight: 600; color: var(--encre-douce); }
@media (min-width: 900px) { .compare { grid-template-columns: 1fr 1fr; gap: 2rem; } }

/* Visionneuse */
.lightbox {
  width: 100vw; max-width: 100vw;
  height: 100dvh; max-height: 100dvh;
  margin: 0; padding: 0;
  border: 0;
  background: rgba(16, 28, 23, .96);
  color: var(--creme);
}
.lightbox::backdrop { background: rgba(16, 28, 23, .7); }
.lightbox__inner {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  padding: clamp(.75rem, 2vw, 1.5rem);
}
.lightbox__top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.lightbox__count { font-weight: 700; font-size: .95rem; color: var(--sauge); }
.lightbox__figure { display: grid; place-items: center; min-height: 0; padding-block: 1rem; }
.lightbox__figure img { max-width: 100%; max-height: calc(100vh - 14.5rem); max-height: calc(100dvh - 14.5rem); width: auto; height: auto; object-fit: contain; border-radius: var(--r-xs); }
.lightbox__caption { text-align: center; font-weight: 600; min-height: 1.5em; }
.lightbox__nav { display: flex; justify-content: center; gap: .8rem; margin-top: .8rem; }
.lightbox button {
  display: inline-grid;
  place-items: center;
  width: 3rem; height: 3rem;
  border: 1.5px solid rgba(244, 240, 229, .35);
  border-radius: 50%;
  background: transparent;
  color: var(--creme);
  cursor: pointer;
}
.lightbox button:hover { border-color: var(--creme); background: rgba(244, 240, 229, .08); }
.lightbox button svg { width: 1.2rem; height: 1.2rem; }

/* ---------- 21. Formulaire ---------- */
.contact-grid { display: grid; gap: 3rem 4rem; align-items: start; }
@media (min-width: 1000px) { .contact-grid { grid-template-columns: .8fr 1.6fr; } }
.contact-card {
  padding: clamp(1.6rem, 3vw, 2.2rem);
  border-radius: var(--r-m);
  border-bottom-right-radius: var(--r-big);
  background: var(--foret);
  color: var(--creme);
}
.contact-card h2 { font-size: 1.6rem; color: var(--creme); }
.contact-card address { margin-top: 1.2rem; font-style: normal; color: var(--sauge); }
.contact-card__line { display: block; margin-top: 1rem; font: 400 1.5rem/1.2 var(--serif); color: var(--creme); text-decoration: none; overflow-wrap: anywhere; }
.contact-card__line:hover { color: var(--pollen); text-decoration: none; }
.contact-card__line--small { font: 700 1rem/1.3 var(--sans); }
.contact-card .text-link { margin-top: 1.4rem; color: var(--creme); text-decoration-color: var(--mousse); }
.contact-card .note { margin-top: 1.4rem; color: var(--sauge); }
@media (min-width: 1000px) { .contact-card { position: sticky; top: calc(var(--header-h) + 1.5rem); } }

.form {
  padding: clamp(1.4rem, 3.5vw, 2.8rem);
  border-radius: var(--r-m);
  background: var(--blanc);
  box-shadow: 0 0 0 1px rgba(23, 61, 50, .08);
}
.form__intro h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.form__intro p { margin-top: .6rem; color: var(--encre-douce); }
.form__group {
  margin: 2.2rem 0 0;
  padding: 2rem 0 0;
  border: 0;
  border-top: 1px solid rgba(23, 61, 50, .12);
  min-width: 0;
}
.form__group legend {
  float: left;
  width: 100%;
  margin-bottom: 1.2rem;
  padding: 0;
  font: 500 1.35rem/1.2 var(--serif);
  color: var(--foret);
}
.form__group legend span { display: block; margin-top: .3rem; font: 500 .9rem/1.4 var(--sans); color: var(--encre-douce); }
.form__group legend + * { clear: both; }
.form__grid { display: grid; gap: 1.1rem 1.25rem; clear: both; }
@media (min-width: 640px) { .form__grid--2 { grid-template-columns: 1fr 1fr; } .form__grid--cp { grid-template-columns: 10rem 1fr; } }
.field label,
.field__label { display: block; margin-bottom: .45rem; font-weight: 700; font-size: .95rem; }
.field .req { color: var(--terre); }
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 3.2rem;
  padding: .8rem 1rem;
  border: 1.5px solid rgba(32, 39, 33, .22);
  border-radius: var(--r-s);
  background: #fff;
  color: var(--encre);
  font: 500 1rem/1.4 var(--sans);
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:hover,
.field textarea:hover { border-color: rgba(32, 39, 33, .4); }
.field input:focus,
.field textarea:focus { outline: none; border-color: var(--foret); box-shadow: 0 0 0 4px rgba(169, 185, 138, .45); }
.field__hint { margin-top: .45rem; font-size: .88rem; color: var(--encre-douce); }
.field__error { margin-top: .45rem; font-size: .88rem; font-weight: 700; color: #9B3B22; }
.field input[type="file"] { padding: .7rem; min-height: auto; background: var(--creme); }

.choices { display: flex; flex-wrap: wrap; gap: .5rem; clear: both; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.9rem;
  padding: .55rem 1rem;
  border: 1.5px solid rgba(32, 39, 33, .2);
  border-radius: var(--r-pill);
  background: #fff;
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}
.choice span::before {
  content: "";
  width: 1rem; height: 1rem;
  flex: none;
  border: 1.5px solid rgba(32, 39, 33, .35);
  border-radius: 4px;
  background: #fff;
}
.choice input[type="radio"] + span::before { border-radius: 50%; }
.choice span:hover { border-color: var(--foret); }
.choice input:checked + span { background: var(--foret); border-color: var(--foret); color: var(--creme); }
.choice input:checked + span::before {
  border-color: var(--pollen);
  background: var(--pollen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23102C24' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / .75rem no-repeat;
}
.choice input:focus-visible + span { outline: 3px solid var(--pollen); outline-offset: 2px; }
.choices__sub { flex-basis: 100%; margin-top: .6rem; font-size: .85rem; font-weight: 700; color: var(--mousse-texte); }
.choices__sub:first-child { margin-top: 0; }

.consent {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  margin-top: 2rem;
  padding: 1.1rem 1.2rem;
  border-radius: var(--r-s);
  background: var(--creme);
  font-size: .95rem;
}
.consent input { width: 1.3rem; height: 1.3rem; margin-top: .15rem; flex: none; accent-color: var(--foret); }
.form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.8rem; }
.form__submit .note { max-width: 26rem; }

/* ---------- 22. Pages simples (merci, 404, légales) ---------- */
.simple-page {
  position: relative;
  overflow: hidden;
  min-height: 70vh;
  display: flex;
  align-items: center;
  background: var(--creme) url("../assets/images/illustrations/topographie-sauge.svg") right center / cover no-repeat;
}
.simple-page__inner { max-width: 40rem; padding-block: var(--section); }
.simple-page h1 { font-size: clamp(2.4rem, 5.6vw, 4.2rem); font-weight: 380; }
.simple-page p { margin-top: 1.2rem; font-size: 1.15rem; color: var(--encre-douce); }
.simple-page__icon { width: 4rem; height: 4rem; margin-bottom: 1.6rem; color: var(--foret); }

.legal { max-width: 46rem; }
.legal h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); margin-top: 2.6rem; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal ul, .legal dl { margin-top: 1rem; }
.legal ul { padding-left: 1.2rem; }
.legal li + li { margin-top: .35rem; }
.legal dl { display: grid; grid-template-columns: minmax(9rem, auto) 1fr; gap: .5rem 1.5rem; }
.legal dt { font-weight: 700; }
.legal dd { margin: 0; }
.legal a { color: var(--foret); font-weight: 600; }
.placeholder { padding: .05rem .35rem; border-radius: 4px; background: var(--pollen-pale); font-weight: 700; }
@media (max-width: 559.98px) { .legal dl { grid-template-columns: 1fr; gap: .15rem; } .legal dd { margin-bottom: .6rem; } }

/* ---------- 23. Apparitions discrètes ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .9s var(--ease), transform .9s var(--ease);
  }
  .js .reveal.is-visible { opacity: 1; transform: none; }
  .js .reveal-img { clip-path: inset(0 0 12% 0 round var(--r-s)); transition: clip-path 1.2s var(--ease); }
  .js .reveal-img.is-visible { clip-path: inset(0 0 0 0 round 0); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 24. Impression ---------- */
@media print {
  .site-header, .mobile-bar, .to-top, .cta-final, .nav, .skip-link { display: none !important; }
  body { background: #fff; padding: 0; }
}

/* Écrans portables (1100–1279 px) : navigation et logo restent sur une ligne */
@media (min-width: 1100px) and (max-width: 1279.98px) {
  .site-header__inner { gap: 1rem; }
  .nav { gap: 1rem; }
  .nav__list { gap: 0; }
  .nav__link, .nav__sub-toggle { padding-inline: .5rem; font-size: .92rem; }
  .nav__cta .btn { padding-inline: 1rem; }
}