/* =============================================================
   Locatelli Paysage — Jardinier-paysagiste, Grand-Lancy (Genève)
   Site statique, aucune dépendance externe.
   Palette : vert sapin profond, ivoire chaud, sauge, charbon,
   filet de laiton réservé aux bandes sombres.
   ============================================================= */

/* ---------- Polices auto-hébergées ---------- */
@font-face {
  font-family: 'Fraunces';
  src: url('../assets/fonts/fraunces-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../assets/fonts/fraunces-latin-ext.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../assets/fonts/hanken-grotesk-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../assets/fonts/hanken-grotesk-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF;
}

/* ---------- Jetons ---------- */
:root {
  --encre: #26302A;
  --encre-douce: #46514A;
  --sapin: #1F3D2B;
  --sapin-clair: #2B5038;
  --sapin-nuit: #142A1D;
  --ivoire: #F5F1E6;
  --ivoire-doux: #FBF9F2;
  --sable: #EAE3D2;
  --sable-ligne: #DCD4BF;
  --sauge: #87A083;
  --sauge-pale: #C7D2BF;
  --lierre: #44603F;
  --laiton: #B5985A;
  --laiton-clair: #CDB279;
  --blanc: #FAF8F1;
  --wa: #1DAB54;
  --wa-fonce: #16934706;
  --wa-sombre: #169347;

  --police-titres: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --police-texte: 'Hanken Grotesk', 'Avenir Next', 'Segoe UI', sans-serif;

  --largeur: 1180px;
  --gouttiere: clamp(18px, 4vw, 40px);
  --rayon: 4px;
  --rayon-photo: 18px;
  --rayon-photo-petit: 12px;

  --duree: .55s;
  --ressort: cubic-bezier(.33, 1, .45, 1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--police-texte);
  font-weight: 430;
  font-size: 1.02rem;
  line-height: 1.68;
  color: var(--encre);
  background: var(--ivoire);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--police-titres);
  font-optical-sizing: auto;
  font-weight: 460;
  line-height: 1.08;
  letter-spacing: -0.012em;
  margin: 0 0 .55em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 6.8vw, 4.4rem); }
h2 { font-size: clamp(1.95rem, 4.2vw, 2.9rem); }
h3 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); font-weight: 520; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--lierre); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--sapin); }

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

::selection { background: var(--sauge); color: var(--sapin-nuit); }

:focus-visible {
  outline: 2px solid var(--sapin);
  outline-offset: 3px;
  border-radius: 2px;
}
.sombre :focus-visible, .pied :focus-visible, .entete--transparente :focus-visible { outline-color: var(--blanc); }

.saut {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--sapin);
  color: var(--blanc);
  padding: .7rem 1.2rem;
  z-index: 300;
}
.saut:focus { left: 12px; top: 12px; }

/* ---------- Utilitaires ---------- */
.contenu {
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.section { padding-block: clamp(70px, 11vw, 128px); }
.section--serree { padding-block: clamp(54px, 8vw, 92px); }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .82rem;
  font-weight: 620;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--lierre);
  margin-bottom: 1.1rem;
}
.kicker::before {
  content: "";
  width: 17px;
  height: 17px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%2344603F' d='M3 17C3.5 9.2 9 4.2 17.4 3.4 16.8 12 11.4 17 3.8 17.2L3 17z'/%3E%3Cpath fill='none' stroke='%23F5F1E6' stroke-width='1.1' stroke-linecap='round' d='M5.4 14.8C7.8 10.6 10.9 7.9 15 6.1'/%3E%3C/svg%3E") no-repeat center / contain;
}
.sombre .kicker { color: var(--laiton-clair); }
.sombre .kicker::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23CDB279' d='M3 17C3.5 9.2 9 4.2 17.4 3.4 16.8 12 11.4 17 3.8 17.2L3 17z'/%3E%3Cpath fill='none' stroke='%231F3D2B' stroke-width='1.1' stroke-linecap='round' d='M5.4 14.8C7.8 10.6 10.9 7.9 15 6.1'/%3E%3C/svg%3E");
}

.conduite {
  font-size: clamp(1.08rem, 1.9vw, 1.22rem);
  line-height: 1.6;
  color: var(--encre-douce);
  max-width: 62ch;
}
.sombre .conduite { color: #D9DECF; }

/* Listes à puces-feuilles — signature typographique du site */
.liste-feuilles {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
}
.liste-feuilles li {
  position: relative;
  padding: .55rem 0 .55rem 2.1rem;
  max-width: 58ch;
}
.liste-feuilles li + li { border-top: 1px solid var(--sable-ligne); }
.liste-feuilles li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .95rem;
  width: 19px;
  height: 19px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%2387A083' d='M3 17C3.5 9.2 9 4.2 17.4 3.4 16.8 12 11.4 17 3.8 17.2L3 17z'/%3E%3Cpath fill='none' stroke='%23F5F1E6' stroke-width='1.2' stroke-linecap='round' d='M5.4 14.8C7.8 10.6 10.9 7.9 15 6.1'/%3E%3C/svg%3E") no-repeat center / contain;
}
.liste-feuilles strong { font-weight: 640; }
.sombre .liste-feuilles li + li { border-top-color: rgba(250, 248, 241, .14); }
.sombre .liste-feuilles li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23C7D2BF' d='M3 17C3.5 9.2 9 4.2 17.4 3.4 16.8 12 11.4 17 3.8 17.2L3 17z'/%3E%3Cpath fill='none' stroke='%231F3D2B' stroke-width='1.2' stroke-linecap='round' d='M5.4 14.8C7.8 10.6 10.9 7.9 15 6.1'/%3E%3C/svg%3E");
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-family: var(--police-texte);
  font-size: .99rem;
  font-weight: 620;
  line-height: 1;
  padding: .95rem 1.55rem;
  border-radius: var(--rayon);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.btn:active { transform: translateY(1px); }

.btn--plein { background: var(--sapin); color: var(--blanc); }
.btn--plein:hover { background: var(--sapin-clair); color: var(--blanc); }

.btn--contour { border-color: var(--sapin); color: var(--sapin); background: transparent; }
.btn--contour:hover { background: var(--sapin); color: var(--blanc); }

.sombre .btn--plein, .btn--ivoire { background: var(--ivoire); color: var(--sapin); }
.sombre .btn--plein:hover, .btn--ivoire:hover { background: var(--blanc); color: var(--sapin-nuit); }
.sombre .btn--contour { border-color: rgba(250, 248, 241, .55); color: var(--blanc); }
.sombre .btn--contour:hover { background: rgba(250, 248, 241, .12); color: var(--blanc); }

.btn--wa { background: var(--wa); color: #fff; }
.btn--wa:hover { background: var(--wa-sombre); color: #fff; }

.btn .ico { width: 18px; height: 18px; flex: none; }

/* ---------- En-tête ---------- */
.entete {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 120;
  background: var(--ivoire);
  border-bottom: 1px solid var(--sable-ligne);
  transition: background-color .35s ease, border-color .35s ease;
}
.entete__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 72px;
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--encre);
}
.marque__glyphe { width: 30px; height: 30px; flex: none; color: var(--sapin); }
.marque__nom {
  font-family: var(--police-titres);
  font-size: 1.28rem;
  font-weight: 540;
  letter-spacing: .005em;
  white-space: nowrap;
}
.marque__nom span { color: var(--lierre); font-weight: 420; }

.nav {
  display: none;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2rem);
}
.nav a:not(.btn) {
  text-decoration: none;
  color: var(--encre);
  font-weight: 560;
  font-size: .99rem;
  padding-block: .35rem;
  border-bottom: 2px solid transparent;
  transition: border-color .25s ease, color .25s ease;
}
.nav a:not(.btn):hover { color: var(--sapin); border-bottom-color: var(--sauge); }
.nav a[aria-current="page"]:not(.btn) { border-bottom-color: var(--sapin); }
.nav__tel {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-variant-numeric: tabular-nums;
}
.nav__tel .ico { width: 16px; height: 16px; color: var(--lierre); }

/* En-tête transparente au-dessus du hero (accueil) */
.entete--transparente {
  background: transparent;
  border-bottom-color: transparent;
}
.entete--transparente .marque,
.entete--transparente .nav a:not(.btn) { color: var(--blanc); }
.entete--transparente .marque__glyphe,
.entete--transparente .nav__tel .ico { color: var(--blanc); }
.entete--transparente .marque__nom span { color: var(--sauge-pale); }
.entete--transparente .nav a:not(.btn):hover { color: #fff; border-bottom-color: var(--sauge-pale); }
.entete--transparente .nav a[aria-current="page"]:not(.btn) { border-bottom-color: var(--sauge-pale); }
.entete--transparente .btn--plein { background: var(--ivoire); color: var(--sapin); }
.entete--transparente .btn--plein:hover { background: #fff; }
.entete--transparente .burger { color: var(--blanc); }

/* Burger */
.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--encre);
}
.burger span {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .3s var(--ressort), opacity .2s ease;
}
.menu-est-ouvert .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-est-ouvert .burger span:nth-child(2) { opacity: 0; }
.menu-est-ouvert .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.menu-est-ouvert .entete { background: var(--ivoire); border-bottom-color: var(--sable-ligne); }
.menu-est-ouvert .entete .marque, .menu-est-ouvert .entete .burger { color: var(--encre); }
.menu-est-ouvert .entete .marque__glyphe { color: var(--sapin); }

/* Panneau mobile */
.panneau {
  position: fixed;
  inset: 0;
  top: 72px;
  z-index: 110;
  background: var(--ivoire);
  padding: 1.4rem var(--gouttiere) 2.2rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  transform: translateY(-12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, transform .3s var(--ressort), visibility 0s linear .3s;
  overflow-y: auto;
}
.menu-est-ouvert .panneau {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.panneau a:not(.btn) {
  font-family: var(--police-titres);
  font-size: 1.65rem;
  font-weight: 480;
  color: var(--encre);
  text-decoration: none;
  padding: .75rem 0;
  border-bottom: 1px solid var(--sable-ligne);
}
.panneau a[aria-current="page"]:not(.btn) { color: var(--lierre); }
.panneau__actions {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  margin-top: 1.6rem;
}
.panneau__note { color: var(--encre-douce); font-size: .92rem; margin-top: 1.2rem; }
body.menu-est-ouvert { overflow: hidden; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: max(640px, 100svh);
  display: flex;
  align-items: flex-end;
  color: var(--blanc);
  overflow: hidden;
  background: var(--sapin-nuit);
}

.hero-scene {
  position: absolute;
  inset: 0;
  transition: filter 1.1s ease;
}
.hero-scene__photo {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.25s ease;
}
.hero-scene__photo.est-active { opacity: 1; }
.hero-scene__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-scene__photo.est-active img { animation: hero-kenburns 9.5s ease-out forwards; }
@keyframes hero-kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.07); }
}

/* Étalonnage saisonnier de la scène */
.hero[data-saison="printemps"] .hero-scene { filter: saturate(1.1) brightness(1.04); }
.hero[data-saison="ete"] .hero-scene { filter: saturate(1.06) contrast(1.02); }
.hero[data-saison="automne"] .hero-scene { filter: sepia(.26) hue-rotate(-16deg) saturate(1.32) brightness(.98); }
.hero[data-saison="hiver"] .hero-scene { filter: saturate(.42) brightness(1.1) contrast(.94) hue-rotate(8deg); }

/* Voile d'ambiance coloré, par-dessus la photo */
.hero-ambiance {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.hero[data-saison="printemps"] .hero-ambiance {
  opacity: .5;
  background: linear-gradient(160deg, rgba(246, 215, 225, .34), rgba(255, 255, 255, 0) 46%), linear-gradient(20deg, rgba(197, 226, 188, .3), rgba(255, 255, 255, 0) 55%);
}
.hero[data-saison="ete"] .hero-ambiance {
  opacity: .42;
  background: linear-gradient(155deg, rgba(255, 221, 150, .26), rgba(255, 255, 255, 0) 52%);
}
.hero[data-saison="automne"] .hero-ambiance {
  opacity: .5;
  background: linear-gradient(150deg, rgba(201, 120, 52, .3), rgba(255, 255, 255, 0) 55%), linear-gradient(0deg, rgba(90, 45, 16, .22), rgba(255, 255, 255, 0) 45%);
}
.hero[data-saison="hiver"] .hero-ambiance {
  opacity: .55;
  background: linear-gradient(180deg, rgba(214, 226, 238, .4), rgba(255, 255, 255, 0) 55%), linear-gradient(10deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 40%);
}

/* Lisibilité du texte */
.hero-voile {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(13, 25, 17, .78) 0%, rgba(13, 25, 17, .36) 38%, rgba(13, 25, 17, 0) 62%),
    linear-gradient(to right, rgba(13, 25, 17, .5) 0%, rgba(13, 25, 17, 0) 55%),
    linear-gradient(to bottom, rgba(13, 25, 17, .42) 0%, rgba(13, 25, 17, 0) 24%);
}

.hero-particules {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__contenu {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: calc(72px + 4.5rem) clamp(4.5rem, 9vh, 6.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.6rem;
  align-items: end;
}

.hero__kicker {
  font-size: .85rem;
  font-weight: 620;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(250, 248, 241, .95);
  text-shadow: 0 1px 14px rgba(10, 20, 13, .55);
  margin: 0 0 1.1rem;
}

/* Le hero est un contexte sombre : boutons et liens en clair */
.hero .btn--contour {
  border-color: rgba(250, 248, 241, .6);
  color: var(--blanc);
  text-shadow: none;
  background: rgba(16, 28, 20, .18);
}
.hero .btn--contour:hover {
  background: rgba(250, 248, 241, .16);
  border-color: rgba(250, 248, 241, .85);
  color: #fff;
}
.hero h1 {
  margin-bottom: .5em;
  max-width: 13ch;
  text-shadow: 0 2px 28px rgba(10, 20, 13, .35);
}
.hero__texte {
  font-size: clamp(1.06rem, 1.9vw, 1.2rem);
  line-height: 1.6;
  max-width: 52ch;
  color: rgba(250, 248, 241, .94);
  margin-bottom: 1.8rem;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1rem;
  align-items: center;
}
.hero__note {
  margin-top: 1.1rem;
  font-size: .92rem;
  color: rgba(250, 248, 241, .78);
}

/* Témoins du défilé de photos */
.hero__temoins {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-top: 2.1rem;
}
.hero__temoins button {
  width: 34px;
  height: 26px;
  padding: 11px 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.hero__temoins button i {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: rgba(250, 248, 241, .4);
  transition: background-color .3s ease;
}
.hero__temoins button[aria-current="true"] i { background: var(--blanc); }
.hero__temoins .pause {
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(250, 248, 241, .75);
  border-radius: 50%;
}
.hero__temoins .pause:hover { color: #fff; }
.hero__temoins .pause svg { width: 15px; height: 15px; }
.hero__temoins .pause .ico-lecture { display: none; }
.hero__temoins .pause[aria-pressed="true"] .ico-pause { display: none; }
.hero__temoins .pause[aria-pressed="true"] .ico-lecture { display: block; }

/* Panneau « Illustration d'ambiance » */
.ambiance {
  justify-self: start;
  background: rgba(16, 28, 20, .55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(250, 248, 241, .16);
  border-radius: 10px;
  padding: 1.1rem 1.15rem 1.2rem;
  width: 100%;
  max-width: 420px;
}
.ambiance__titre {
  font-size: .72rem;
  font-weight: 620;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: rgba(250, 248, 241, .72);
  text-align: center;
  margin: 0 0 .8rem;
}
.ambiance__cadran {
  display: none;
  margin: 0 auto .9rem;
  width: 74px;
  height: 74px;
}
.ambiance__cadran svg { width: 100%; height: 100%; }
.ambiance__aiguille {
  transform-box: view-box;
  transform-origin: 50% 50%;
  transition: transform .8s var(--ressort);
}
.ambiance__saisons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .4rem;
}
.ambiance__saisons button {
  font-family: var(--police-texte);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(250, 248, 241, .66);
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: .55rem .4rem;
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease, background-color .25s ease;
}
.ambiance__saisons button:hover { color: #fff; }
.ambiance__saisons button[aria-pressed="true"] {
  color: #fff;
  border-color: rgba(250, 248, 241, .55);
  background: rgba(250, 248, 241, .08);
}

/* ---------- Bandes de contenu ---------- */
.sombre {
  background: var(--sapin);
  color: var(--blanc);
}
.sombre h2, .sombre h3 { color: var(--blanc); }
.sombre p { color: #DDE2D3; }
.sombre a:not(.btn) { color: var(--sauge-pale); }
.sombre a:not(.btn):hover { color: #fff; }

.bande-sable { background: var(--sable); }

.entete-section { max-width: 66ch; margin-bottom: clamp(2.4rem, 5vw, 3.8rem); }

/* Intro éditoriale */
.intro .contenu {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.6rem;
}
.intro p { font-size: clamp(1.12rem, 2.1vw, 1.34rem); line-height: 1.58; max-width: 56ch; color: var(--encre); }
.intro .signature {
  font-family: var(--police-titres);
  font-size: 1.05rem;
  color: var(--encre-douce);
}

/* Prestations (bande sombre, mosaïques) */
.prestation {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.2rem;
  align-items: center;
  padding-block: clamp(2.6rem, 5vw, 4.4rem);
}
.prestation + .prestation { border-top: 1px solid rgba(250, 248, 241, .13); }
.prestation__texte .btn { margin-top: 1.6rem; }

.mosaique {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 12px;
  aspect-ratio: 16 / 10.5;
}
.mosaique figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--rayon-photo-petit);
  outline: 1px solid rgba(181, 152, 90, .55);
  outline-offset: -7px;
}
.mosaique figure:first-child { grid-row: span 2; }
.mosaique img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ressort);
}
.mosaique figure:hover img { transform: scale(1.045); }

/* Pourquoi nous */
.pourquoi .contenu {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.2rem, 5vw, 4rem);
  align-items: start;
}
.pourquoi__figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--rayon-photo);
  outline: 1px solid rgba(181, 152, 90, .55);
  outline-offset: -7px;
}
.pourquoi__figure img {
  width: 100%;
  height: auto;
  transition: transform .8s var(--ressort);
}
.pourquoi__figure:hover img { transform: scale(1.045); }

/* Teaser à-propos */
.teaser .contenu {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.2rem, 5vw, 4.2rem);
  align-items: center;
}
.teaser__figure {
  margin: 0;
  border-radius: var(--rayon-photo);
  overflow: hidden;
  outline: 1px solid rgba(181, 152, 90, .55);
  outline-offset: -7px;
}
.teaser__figure img { transition: transform .8s var(--ressort); }
.teaser__figure:hover img { transform: scale(1.045); }
.citation {
  font-family: var(--police-titres);
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  font-weight: 440;
  line-height: 1.35;
  color: var(--sapin);
  margin: 0 0 1.2rem;
}
.citation + p { color: var(--encre-douce); }

/* Bande d'appel */
.appel { text-align: left; }
.appel .contenu {
  display: grid;
  gap: 1.8rem;
}
.appel__actions { display: flex; flex-wrap: wrap; gap: .9rem 1rem; }

/* ---------- Pages intérieures ---------- */
.page-tete {
  padding-top: calc(72px + clamp(3rem, 7vw, 5.5rem));
  padding-bottom: clamp(2.6rem, 6vw, 4.4rem);
}
.page-tete h1 { max-width: 20ch; }
.page-tete .conduite { margin-top: .4rem; }
.page-tete__ancres {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.9rem;
}
.page-tete__ancres a {
  text-decoration: none;
  font-size: .93rem;
  font-weight: 600;
  color: var(--sapin);
  border: 1px solid var(--sable-ligne);
  background: var(--ivoire-doux);
  border-radius: 999px;
  padding: .55rem 1.1rem;
  transition: border-color .25s ease, background-color .25s ease;
}
.page-tete__ancres a:hover { border-color: var(--sauge); background: #fff; }

/* Fiches prestations détaillées */
.fiche {
  scroll-margin-top: 90px;
}
.fiche .contenu {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.2rem, 5vw, 4.4rem);
  align-items: start;
}
.fiche__figure {
  margin: 0;
  border-radius: var(--rayon-photo);
  overflow: hidden;
  outline: 1px solid rgba(181, 152, 90, .55);
  outline-offset: -7px;
}
.fiche__figure img {
  width: 100%;
  height: auto;
  transition: transform .8s var(--ressort);
}
.fiche__figure:hover img { transform: scale(1.045); }
.fiche__duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
.fiche__duo figure {
  margin: 0;
  border-radius: var(--rayon-photo-petit);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  outline: 1px solid rgba(181, 152, 90, .55);
  outline-offset: -7px;
}
.fiche__duo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ressort);
}
.fiche__duo figure:hover img { transform: scale(1.045); }
.fiche h2 { max-width: 16ch; }
.fiche .btn { margin-top: 1.7rem; }

/* À propos */
.recit .contenu {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.2rem, 5vw, 4.4rem);
  align-items: start;
}
.recit__figure { margin: 0; }
.recit__cadre {
  border-radius: var(--rayon-photo);
  overflow: hidden;
  outline: 1px solid rgba(181, 152, 90, .55);
  outline-offset: -7px;
}
.recit__cadre img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .8s var(--ressort);
}
.recit__figure:hover .recit__cadre img { transform: scale(1.045); }
.recit__legende {
  font-size: .88rem;
  color: var(--encre-douce);
  padding-top: .85rem;
  padding-left: 8px;
}

.zone {
  border-top: 1px solid var(--sable-ligne);
}
.zone__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.2rem, 5vw, 4rem);
  align-items: center;
}
.zone__communes {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.4rem;
  padding: 0;
  list-style: none;
}
.zone__communes li {
  font-size: .93rem;
  font-weight: 560;
  color: var(--sapin);
  background: #DFE8D8;
  border: 1px solid #AFC2A6;
  border-radius: 999px;
  padding: .45rem 1rem;
  cursor: default;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.zone__communes li:hover,
.zone__communes li.est-active {
  background: var(--sauge);
  border-color: var(--sauge);
  color: var(--blanc);
}
.zone__communes li:focus-visible {
  background: var(--sauge);
  border-color: var(--sauge);
  color: var(--blanc);
  outline: 2px solid var(--sapin);
  outline-offset: 2px;
}
.zone__legende {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .88rem;
  color: var(--encre-douce);
  margin: 1.2rem 0 0;
}
.zone__puce-repere {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #3E7D4E;
  box-shadow: 0 0 0 3px rgba(135, 160, 131, .35);
}

/* Carte interactive des communes */
.zone__carte { margin: 0; position: relative; }
.carte-ge { display: block; width: 100%; height: auto; }
.carte-ge__canton {
  fill: #CAD8DA;
  stroke: #39543F;
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.carte-ge__commune {
  fill: var(--sable);
  stroke: var(--ivoire-doux);
  stroke-width: 1;
  stroke-linejoin: round;
  transition: fill .22s ease;
}
.carte-ge__commune:hover { fill: #DED5BF; }
.carte-ge__commune.est-desservie { fill: var(--sauge-pale); cursor: pointer; }
.carte-ge__commune.est-desservie:hover,
.carte-ge__commune.est-active { fill: var(--sauge); }
.carte-ge__halo {
  fill: rgba(62, 125, 78, .38);
  transform-box: fill-box;
  transform-origin: center;
  animation: carte-pouls 2.8s ease-out infinite;
  r: 28px;
}
.carte-ge__point { fill: #3E7D4E; stroke: var(--blanc); stroke-width: 2.4; r: 9.5px; }
@keyframes carte-pouls {
  0% { transform: scale(.45); opacity: .9; }
  70%, 100% { transform: scale(1.5); opacity: 0; }
}
.zone__infobulle {
  position: absolute;
  background: var(--sapin-nuit);
  color: var(--blanc);
  font-size: .84rem;
  font-weight: 560;
  padding: .32rem .7rem;
  border-radius: 6px;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 12px));
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(16, 28, 20, .25);
  z-index: 4;
}

/* ---------- Contact ---------- */
.contact-grille .contenu {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.4rem, 5vw, 4.2rem);
  align-items: start;
}

.coordonnees {
  display: grid;
  gap: 1.15rem;
}
.coordonnees__bloc {
  border-top: 1px solid var(--sable-ligne);
  padding-top: 1.05rem;
}
.coordonnees__bloc:first-child { border-top: 0; padding-top: 0; }
.coordonnees__etiquette {
  font-size: .78rem;
  font-weight: 640;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--lierre);
  margin-bottom: .3rem;
}
.coordonnees__bloc a { font-size: 1.12rem; font-weight: 560; text-decoration: none; }
.coordonnees__bloc a:hover { text-decoration: underline; }
.coordonnees__bloc address { font-style: normal; }

.carte {
  margin-top: 1.9rem;
  border-radius: var(--rayon-photo);
  overflow: hidden;
  border: 1px solid var(--sable-ligne);
}
.carte iframe { display: block; width: 100%; height: 300px; border: 0; }
.carte__lien { font-size: .9rem; display: inline-block; margin-top: .55rem; }

/* Formulaire */
.formulaire {
  background: var(--ivoire-doux);
  border: 1px solid var(--sable-ligne);
  border-radius: 8px;
  padding: clamp(1.4rem, 3.4vw, 2.3rem);
}
.formulaire h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); }
.champ { margin-top: 1.15rem; }
.champ label {
  display: block;
  font-weight: 620;
  font-size: .96rem;
  margin-bottom: .4rem;
}
.champ label small { font-weight: 480; color: var(--encre-douce); }
.champ input,
.champ select,
.champ textarea {
  width: 100%;
  font: inherit;
  color: var(--encre);
  background: #fff;
  border: 1px solid var(--sable-ligne);
  border-radius: var(--rayon);
  padding: .78rem .9rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.champ textarea { min-height: 150px; resize: vertical; }
.champ select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2326302A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .95rem center;
  padding-right: 2.6rem;
}
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none;
  border-color: var(--sapin);
  box-shadow: 0 0 0 3px rgba(31, 61, 43, .14);
}
.champ--duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.formulaire__note {
  font-size: .88rem;
  color: var(--encre-douce);
  margin-top: 1.1rem;
}
.formulaire .btn { width: 100%; margin-top: 1.1rem; }
.formulaire__confirmation {
  margin-top: 1rem;
  font-size: .95rem;
  color: var(--lierre);
  font-weight: 560;
}

/* ---------- Mentions légales ---------- */
.juridique { max-width: 760px; }
.juridique h2 { font-size: 1.45rem; margin-top: 2.6rem; }
.juridique .a-completer {
  background: #FCF6DF;
  border: 1px dashed var(--laiton);
  border-radius: 4px;
  padding: .1rem .45rem;
}

/* ---------- Jardin vivant (feuilles au curseur + bandeau paysager) ---------- */
.toile-feuilles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 50;
}
.jardin-vivant {
  position: relative;
  height: clamp(210px, 26vw, 280px);
  background: var(--ivoire);
  overflow: hidden;
}
.jardin-vivant canvas { display: block; width: 100%; height: 100%; }

/* ---------- Pied de page ---------- */
.pied {
  background: var(--sapin-nuit);
  color: #CBD4C4;
  padding-block: clamp(3.4rem, 7vw, 5.2rem) 2rem;
  font-size: .97rem;
}
.pied a { color: #E4E8DA; text-decoration: none; }
.pied a:hover { color: #fff; text-decoration: underline; }
.pied__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.4rem;
  padding-bottom: 2.6rem;
  border-bottom: 1px solid rgba(250, 248, 241, .14);
}
.pied .marque { color: var(--blanc); margin-bottom: .9rem; }
.pied .marque__glyphe { color: var(--sauge-pale); }
.pied .marque__nom span { color: var(--sauge-pale); }
.pied address { font-style: normal; line-height: 1.75; }
.pied__titre {
  font-size: .78rem;
  font-weight: 640;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--sauge-pale);
  margin: 0 0 .9rem;
}
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.pied__basse {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.6rem;
  justify-content: space-between;
  padding-top: 1.6rem;
  font-size: .88rem;
  color: #9FAC97;
}
.pied__basse a { color: #B8C2AE; }
.pied__credit {
  flex-basis: 100%;
  font-size: .76rem;
  letter-spacing: .01em;
}
.pied__credit a {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  color: #2B4535;
  text-decoration: none;
}
.pied__drapeau { width: 13px; height: 13px; flex: none; }
.pied__credit a:hover,
.pied__credit a:focus-visible { color: #B8C2AE; text-decoration: underline; }

/* ---------- Bulle WhatsApp (ordinateur) ---------- */
.bulle-wa {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  display: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--wa);
  color: #fff;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 28px rgba(16, 48, 28, .35);
  transition: transform .3s var(--ressort), background-color .25s ease;
}
.bulle-wa:hover { background: var(--wa-sombre); transform: translateY(-3px); color: #fff; }
.bulle-wa svg { width: 28px; height: 28px; }

/* ---------- Barre d'action mobile ---------- */
.barre-mobile {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--sapin-nuit);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(102%);
  transition: transform .4s var(--ressort);
}
.barre-mobile.visible { transform: none; }
.barre-mobile a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  color: var(--blanc);
  text-decoration: none;
  font-size: .95rem;
  font-weight: 620;
  padding: .95rem .5rem;
}
.barre-mobile a + a { border-left: 1px solid rgba(250, 248, 241, .14); }
.barre-mobile .ico { width: 17px; height: 17px; }
.barre-mobile .wa { background: var(--wa); }

/* ---------- Apparitions au défilement ----------
   Masquées uniquement quand le JS est là (classe js posée dans <head>) :
   sans JavaScript, tout le contenu reste visible. */
.js .apparait {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s ease, transform .8s var(--ressort);
  transition-delay: calc(var(--retard, 0) * 90ms);
}
.js .apparait.est-visible { opacity: 1; transform: none; }

/* ---------- Écrans moyens et larges ---------- */
@media (min-width: 640px) {
  .ambiance__cadran { display: block; }
}

@media (min-width: 900px) {
  .nav { display: flex; }
  .burger, .panneau, .barre-mobile { display: none; }
  .bulle-wa { display: inline-flex; }

  .hero__contenu {
    grid-template-columns: minmax(0, 1.5fr) auto;
    align-items: end;
  }
  .ambiance {
    justify-self: end;
    width: 188px;
    padding: 1.3rem 1.2rem 1.35rem;
  }
  .ambiance__saisons { grid-template-columns: 1fr; gap: .45rem; }
  .ambiance__saisons button { padding: .62rem .4rem; }

  .prestation {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(2.6rem, 5vw, 4.6rem);
  }
  .prestation--inverse .prestation__texte { order: 2; }
  .prestation--inverse .mosaique { order: 1; }

  .pourquoi .contenu { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .pourquoi__figure { position: sticky; top: 104px; }

  .teaser .contenu { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }

  .appel .contenu {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .fiche .contenu { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .fiche--inverse .fiche__texte { order: 1; }
  .fiche--inverse .fiche__visuels { order: 2; }
  .fiche__visuels { position: sticky; top: 104px; }

  .recit .contenu { grid-template-columns: minmax(0, .95fr) minmax(0, 1.2fr); }

  .zone__grille { grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); }
  .carte-ge__halo { r: 17px; }
  .carte-ge__point { r: 6px; stroke-width: 1.6; }
  .recit__figure { position: sticky; top: 104px; }

  .contact-grille .contenu { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }

  .pied__grille { grid-template-columns: 1.4fr 1fr 1fr; }

  .intro .contenu { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: end; }
}

@media (max-width: 639px) {
  .mosaique { aspect-ratio: 4 / 3.4; }
  .champ--duo { grid-template-columns: 1fr; gap: 0; }
  .champ--duo .champ { margin-top: 1.15rem; }
  .hero h1 { font-size: clamp(2.35rem, 11vw, 2.9rem); }
}

/* Hero compact sous 900px : le panneau d'ambiance doit tenir dans l'écran */
@media (max-width: 899px) {
  .hero__contenu {
    gap: 1.4rem;
    padding-top: calc(72px + 2.6rem);
    padding-bottom: calc(2.4rem + env(safe-area-inset-bottom, 0px));
  }
  .hero h1 { margin-bottom: .4em; }
  .hero__texte { margin-bottom: 1.3rem; }
  .hero__note { margin-top: .85rem; font-size: .88rem; }
  .hero__temoins { margin-top: 1.2rem; }
  .ambiance { padding: .85rem .9rem .95rem; max-width: none; }
  .ambiance__titre { margin-bottom: .55rem; }
  .ambiance__saisons button { padding: .5rem .3rem; font-size: .74rem; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .apparait { opacity: 1; transform: none; }
  .hero-scene__photo.est-active img { animation: none; }
  .hero-particules { display: none; }
}