/* =========================================================
   Sergana Sàrl — feuille de style
   Langage visuel : dessin technique de paysagiste (coupe, plan, carte)
   ========================================================= */

:root {
  /* couleurs */
  --chaux: #EEF0E8;        /* calcaire clair : fond */
  --chaux-2: #E3E6D8;      /* surfaces secondaires */
  --molasse: #CDD0BC;      /* grès vert de Fribourg */
  --molasse-f: #8E9275;
  --humus: #2B2117;        /* texte, terre */
  --humus-2: #4A3D2E;
  --humus-3: #211A12;
  --texte-2: #574E42;
  --gazon: #3B6A33;        /* action principale */
  --gazon-f: #2E5428;
  --pousse: #A9C64B;       /* accent, uniquement sur fond sombre */
  --ocre: #8A5A2B;
  --erreur: #B3361E;
  --erreur-clair: #F4A68D;

  /* typographie */
  --police: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --t-corps: 1.125rem;
  --t-petit: .9375rem;

  /* mise en page */
  --cadre: 1320px;
  --gouttiere: clamp(16px, 4vw, 48px);
  --h-entete: 76px;
  --sec: clamp(72px, 9vw, 136px);

  /* mouvement */
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--h-entete) + 12px); }
body {
  margin: 0;
  background: var(--chaux);
  color: var(--humus);
  font-family: var(--police);
  font-size: var(--t-corps);
  line-height: 1.6;
  font-weight: 400;
  font-stretch: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; font-weight: 800; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--gazon); outline-offset: 3px; border-radius: 2px; }
.contact :focus-visible, .pied :focus-visible { outline-color: var(--pousse); }

.evitement {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--humus); color: var(--chaux); padding: 12px 18px; border-radius: 4px; text-decoration: none; font-weight: 650;
}
.evitement:focus { top: 12px; }

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

h2 {
  font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  font-stretch: 118%;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.012em;
  text-wrap: balance;
  max-width: 18ch;
}
h3 { font-size: 1.375rem; font-stretch: 100%; font-weight: 720; line-height: 1.2; }

.sec-tete { display: grid; gap: 18px; margin-bottom: clamp(36px, 5vw, 64px); }
.sec-tete p { max-width: 52ch; color: var(--texte-2); font-size: 1.1875rem; margin: 0; }

/* ---------- boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 52px; padding: 0 1.4em;
  border: 2px solid transparent; border-radius: 4px;
  font-size: 1.0625rem; font-weight: 680; font-stretch: 104%; line-height: 1.1;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 1.1em; height: 1.1em; fill: currentColor; flex: none; }
.btn-plein { background: var(--gazon); color: #fff; }
.btn-plein:hover { background: var(--gazon-f); }
.btn-ligne { border-color: var(--humus); color: var(--humus); background: transparent; }
.btn-ligne:hover { background: var(--humus); color: var(--chaux); }
.btn-pousse { background: var(--pousse); color: var(--humus); }
.btn-pousse:hover { background: #BBD65E; }
.btn-ligne-clair { border-color: rgba(238, 240, 232, .7); color: var(--chaux); background: transparent; }
.btn-ligne-clair:hover { background: var(--chaux); color: var(--humus); }
.btn-petit { min-height: 44px; padding: 0 1.1em; font-size: 1rem; }
.btn-large { width: 100%; min-height: 58px; font-size: 1.125rem; }

/* =========================================================
   En-tête
   ========================================================= */
.entete {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--h-entete);
  transition: background-color .3s ease, box-shadow .3s ease;
}
.entete.defile { background: rgba(238, 240, 232, .95); box-shadow: 0 1px 0 rgba(43, 33, 23, .16); }
@supports (backdrop-filter: blur(6px)) { .entete.defile { background: rgba(238, 240, 232, .86); backdrop-filter: blur(10px); } }
.entete-in {
  height: 100%; max-width: var(--cadre); margin: 0 auto; padding-inline: var(--gouttiere);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.marque { display: block; flex: none; border-radius: 4px; }
.marque img { height: 42px; width: auto; }

.nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 36px); }
.nav ul { display: flex; gap: clamp(14px, 1.8vw, 28px); }
.nav ul a {
  position: relative; display: block; padding: 10px 0;
  font-size: 1rem; font-weight: 580; font-stretch: 90%; text-decoration: none; white-space: nowrap;
}
.nav ul a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 3px; background: var(--gazon);
  transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease);
}
.nav ul a:hover::after, .nav ul a[aria-current="true"]::after { transform: scaleX(1); }
.nav ul a[aria-current="true"] { color: var(--gazon); }
.nav-contact { display: flex; align-items: center; gap: 18px; }
.tel { display: inline-flex; align-items: center; gap: 8px; font-weight: 680; font-stretch: 96%; text-decoration: none; white-space: nowrap; padding: 10px 0; }
.tel svg { width: 18px; height: 18px; fill: var(--gazon); }
.tel:hover { color: var(--gazon); }

.burger {
  display: none; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 14px; border: 2px solid var(--humus); border-radius: 4px; background: transparent; cursor: pointer;
  font-weight: 680; font-stretch: 90%;
}
html:not(.js) .burger { display: none !important; }
.burger-lignes { position: relative; width: 20px; height: 12px; }
.burger-lignes span { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform .25s var(--ease), top .25s var(--ease); }
.burger-lignes span:first-child { top: 1px; }
.burger-lignes span:last-child { top: 9px; }
.burger[aria-expanded="true"] .burger-lignes span:first-child { top: 5px; transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger-lignes span:last-child { top: 5px; transform: rotate(-45deg); }

@media (max-width: 1240px) {
  :root { --h-entete: 64px; }
  .marque img { height: 36px; }
  .burger { display: inline-flex; }
  .nav {
    position: fixed; inset: var(--h-entete) 0 0 0; z-index: 49;
    flex-direction: column; align-items: stretch; justify-content: space-between; gap: 32px;
    padding: 24px var(--gouttiere) calc(28px + env(safe-area-inset-bottom));
    background: var(--chaux); overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .25s ease, transform .3s var(--ease), visibility 0s linear .3s;
  }
  .nav.ouvert { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .3s var(--ease); }
  .nav ul { flex-direction: column; gap: 0; }
  .nav ul a { padding: 16px 0; font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 760; font-stretch: 112%; border-bottom: 1px solid rgba(43, 33, 23, .18); }
  .nav ul a::after { bottom: -1px; }
  .nav-contact { flex-direction: column; align-items: stretch; gap: 10px; }
  .nav-contact .tel { justify-content: center; border: 2px solid var(--humus); border-radius: 4px; min-height: 52px; }
  .nav-contact .btn { min-height: 52px; }
  body.menu-ouvert { overflow: hidden; }
  .entete.menu { background: var(--chaux); box-shadow: 0 1px 0 rgba(43, 33, 23, .16); }
}

/* =========================================================
   Hero : la coupe qui se construit
   ========================================================= */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  padding-top: var(--h-entete);
  overflow: hidden;
}
.hero-txt {
  width: 100%; max-width: var(--cadre); margin: 0 auto;
  padding: clamp(20px, 4.5vh, 64px) var(--gouttiere) 0;
}
.hero-titre {
  font-size: clamp(2.45rem, .9rem + 5.6vw, 5.5rem);
  font-stretch: 125%;
  font-weight: 820;
  line-height: .95;
  letter-spacing: -.018em;
  max-width: 14em;
}
.hero-titre .m { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.hero-titre .m > span { display: inline-block; }
.hero-bas {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px 48px;
  margin-top: clamp(18px, 3vh, 36px);
}
.chapeau { grid-row: span 2; margin: 0; max-width: 46ch; font-size: clamp(1.0625rem, .95rem + .4vw, 1.3125rem); line-height: 1.5; color: var(--humus-2); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.promesse {
  margin: 0; justify-self: end;
  font-size: var(--t-petit); font-weight: 600; font-stretch: 82%; color: var(--gazon);
  display: flex; align-items: center; gap: 10px;
}
.promesse::before { content: ""; width: 22px; height: 2px; background: currentColor; }

.hero-coupe { position: relative; flex: 1 1 auto; min-height: 300px; margin: clamp(10px, 2.5vh, 32px) 0 0; }
.coupe { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; }

.coupe .lbl { font-family: var(--police); font-stretch: 78%; font-weight: 620; font-size: 17px; fill: var(--humus); }
.coupe .lbl-halo { paint-order: stroke; stroke: var(--chaux); stroke-width: 5px; stroke-linejoin: round; }
.coupe .lbl-in { fill: #F5ECDC; }
.coupe .lbl-sub { font-weight: 460; }
.coupe .lbl-cote { font-size: 13px; font-weight: 520; }
.coupe .ldr line, .coupe .regle { stroke: var(--humus); stroke-width: 1.3; }
.coupe .regle-halo { stroke: var(--chaux); stroke-width: 4.5; }
.coupe .ldr circle { fill: var(--humus); }

.rejouer {
  position: absolute; right: var(--gouttiere); bottom: 16px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px;
  border: 1.5px solid rgba(43, 33, 23, .5); border-radius: 4px; background: rgba(238, 240, 232, .9);
  font-size: .9375rem; font-weight: 600; font-stretch: 86%; cursor: pointer;
  transition: background-color .18s ease;
}
.rejouer svg { width: 16px; height: 16px; fill: currentColor; }
.rejouer:hover { background: var(--chaux); border-color: var(--humus); }

/* séquence d'animation : terrain, grave, mur, sable, pavés, terre, gazon, pergola, clôture, étiquettes */
.coupe .st, .coupe .grow, .coupe .canopee, .coupe .blade { transform-box: fill-box; }
.js .hero.go .hero-titre .m > span { animation: mot .95s var(--ease-out) both; animation-delay: calc(.08s + var(--k, 0) * .075s); }
.js .hero.go .hero-bas { animation: apparait .7s ease both .6s; }
.js .hero.go .rejouer { animation: apparait .4s ease both 3.4s; }
.js .hero.go .st-terrain { animation: monte .8s var(--ease) both; transform-origin: 50% 100%; }
.js .hero.go .st-ligne { animation: apparait .4s ease both .3s; }
.js .hero.go .st-grave { animation: etale .6s var(--ease) both .45s; transform-origin: 0 50%; }
.js .hero.go .st-fond { animation: apparait .35s ease both .7s; }
.js .hero.go .st-bloc { animation: pose .45s var(--ease-out) both; animation-delay: calc(.82s + var(--i) * .1s); }
.js .hero.go .st-sable { animation: etale .4s var(--ease) both 1s; transform-origin: 0 50%; }
.js .hero.go .st-bord { animation: pose .4s var(--ease-out) both 1.1s; }
.js .hero.go .st-pave { animation: pose .38s var(--ease-out) both; animation-delay: calc(1.12s + var(--i) * .04s); }
.js .hero.go .st-terre { animation: monte .55s var(--ease) both .55s; transform-origin: 50% 100%; }
.js .hero.go .st-arbre .draw { stroke-dasharray: 1; animation: trace .8s ease both 1.5s; }
.js .hero.go .st-arbre .canopee { animation: pousse .7s var(--ease-out) both 2s; transform-origin: 50% 100%; }
.js .hero.go .st-gazon .grow { animation: monte .5s var(--ease-out) both; animation-delay: calc(1.45s + var(--d)); transform-origin: 50% 100%; }
.js .hero.go .st-plot { animation: apparait .3s ease both 1.25s; }
.js .hero.go .st-poteau { animation: monte .45s var(--ease) both; animation-delay: calc(1.45s + var(--i) * .1s); transform-origin: 50% 100%; }
.js .hero.go .st-poutre { animation: etale .4s var(--ease) both 1.85s; transform-origin: 0 50%; }
.js .hero.go .st-chevron { animation: pose .3s var(--ease-out) both; animation-delay: calc(2.05s + var(--i) * .03s); }
.js .hero.go .st-rail { animation: etale .3s var(--ease) both 1.7s; transform-origin: 0 50%; }
.js .hero.go .st-lame { animation: monte .3s var(--ease) both; animation-delay: calc(1.75s + var(--i) * .035s); transform-origin: 50% 100%; }
.js .hero.go .st-regle { animation: apparait .5s ease both 2.5s; }
.js .hero.go .st-lbl > * { animation: apparait .45s ease both; }
.js .hero.go .st-lbl > :nth-child(1) { animation-delay: 2.4s; }
.js .hero.go .st-lbl > :nth-child(2) { animation-delay: 2.48s; }
.js .hero.go .st-lbl > :nth-child(3) { animation-delay: 2.56s; }
.js .hero.go .st-lbl > :nth-child(n+4) { animation-delay: 2.66s; }
.js .hero.go .st-lbl > :nth-child(n+7) { animation-delay: 2.78s; }
.js .hero.go .st-lbl > :nth-child(n+10) { animation-delay: 2.9s; }
.coupe .blade { transform-origin: 50% 100%; will-change: transform; }

@keyframes mot { from { transform: translateY(108%); } }
@keyframes apparait { from { opacity: 0; } }
@keyframes monte { from { transform: scaleY(0); } }
@keyframes etale { from { transform: scaleX(0); } }
@keyframes pose { from { transform: translateY(-46px); opacity: 0; } }
@keyframes trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pousse { from { transform: scale(0); opacity: 0; } }

@media (max-width: 980px) {
  .hero-bas { grid-template-columns: 1fr; }
  .chapeau { grid-row: auto; max-width: 52ch; }
  .promesse { justify-self: start; }
}
@media (max-width: 760px) {
  .actions .btn { flex: 1 1 200px; }
  .hero-coupe { min-height: 310px; }
  .coupe .lbl { font-size: 25px; }
  .coupe .lbl-halo { stroke-width: 7px; }
  .coupe .lbl-wide, .coupe .lbl-sub { display: none; }
  .rejouer { bottom: 10px; width: 44px; min-height: 44px; padding: 0; justify-content: center; }
  .rejouer svg { width: 20px; height: 20px; }
  .rejouer-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* =========================================================
   L'entreprise + cartouche
   ========================================================= */
.entreprise { padding-block: var(--sec); }
.ent-grille { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.ent-texte h2 { margin-bottom: 28px; }
.ent-texte > p { max-width: 60ch; }
.citation { margin: 36px 0 0; padding: 0; max-width: 34ch; }
.citation p { margin: 0; font-size: clamp(1.25rem, 1rem + .9vw, 1.625rem); line-height: 1.3; font-weight: 560; font-stretch: 92%; color: var(--gazon); }
.citation p::before { content: "«\00a0"; }
.citation p::after { content: "\00a0»"; }

.cartouche { border: 2px solid var(--humus); background: var(--chaux); }
.cartouche-titre {
  display: flex; align-items: center; gap: 12px; margin: 0;
  padding: 14px 18px; background: var(--humus); color: var(--chaux);
  font-size: 1.125rem; font-weight: 700; font-stretch: 108%;
}
.cartouche-titre img { width: 28px; height: 28px; }
.cartouche dl { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0; background: rgba(43, 33, 23, .55); border-top: 1px solid rgba(43, 33, 23, .55); }
.cartouche dl > div { padding: 12px 18px 14px; background: var(--chaux); }
.cartouche dl > div.large { grid-column: 1 / -1; }
.cartouche dt { font-size: .8125rem; font-weight: 520; font-stretch: 78%; color: var(--texte-2); letter-spacing: .01em; }
.cartouche dd { margin: 2px 0 0; font-size: 1.0625rem; font-weight: 650; }

/* =========================================================
   Prestations : plan interactif + légende
   ========================================================= */
.prestations { padding-block: var(--sec); background: var(--chaux-2); }
.prest-grille { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, .6fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.plan-cadre { position: sticky; top: calc(var(--h-entete) + 24px); }
.plan { width: 100%; height: auto; border: 2px solid var(--humus); background: #EDEFE6; }
.plan .zone { transition: opacity .3s ease; cursor: pointer; }
.plan[data-active] .zone { opacity: .2; }
.plan[data-active] .zone.on { opacity: 1; }
.plan .deblai { opacity: 0; transition: opacity .3s ease; }
.plan .zone.on .deblai { opacity: .85; }
.plan .plan-lbl { opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.plan .zone.on .plan-lbl { opacity: 1; }
.plan .plan-lbl rect { fill: var(--humus); }
.plan .plan-lbl text { fill: var(--chaux); font-family: var(--police); font-size: 16px; font-weight: 640; font-stretch: 86%; }
.plan .plan-fixe { font-family: var(--police); font-size: 18px; font-weight: 700; font-stretch: 100%; fill: var(--humus); }
.plan .arbre { fill: #CFE0A3; fill-opacity: .85; stroke: var(--gazon); stroke-width: 2.2; }
.plan .arbre-in { fill: none; stroke: var(--gazon); stroke-width: 1.2; stroke-dasharray: 3 4; }
.plan .haie circle { fill: #9DBB6A; stroke: var(--gazon); stroke-width: 1.4; }
.plan-aide { margin: 12px 0 0; font-size: var(--t-petit); color: var(--texte-2); font-stretch: 90%; min-height: 1.6em; }

.legende { border-bottom: 1px solid rgba(43, 33, 23, .25); }
.leg-item { border-top: 1px solid rgba(43, 33, 23, .25); }
.leg {
  width: 100%; display: grid; grid-template-columns: 32px minmax(0, 1fr) 22px; align-items: center; gap: 16px;
  min-height: 60px; padding: 12px 8px 12px 4px; border: 0; background: transparent; cursor: pointer; text-align: left;
  font-size: 1.1875rem; font-weight: 680; font-stretch: 100%; line-height: 1.25;
  transition: background-color .2s ease, color .2s ease;
}
.leg:hover { background: rgba(59, 106, 51, .08); }
.leg .sw { width: 32px; height: 32px; }
.leg-signe { position: relative; width: 16px; height: 16px; justify-self: end; }
.leg-signe::before, .leg-signe::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: currentColor; transition: transform .25s var(--ease); }
.leg-signe::after { transform: rotate(90deg); }
.leg[aria-expanded="true"] { color: var(--gazon); }
.leg[aria-expanded="true"] .leg-signe::after { transform: rotate(0); }
.leg-desc { padding: 0 8px 20px 52px; }
.leg-desc p { margin: 0 0 10px; font-size: 1.0625rem; color: var(--humus-2); max-width: 46ch; }
.leg-lien { font-weight: 650; color: var(--gazon); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.leg-lien:hover { color: var(--gazon-f); }

/* =========================================================
   Déroulement : quatre étapes
   ========================================================= */
.deroulement { padding-block: var(--sec); }
.etapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: etape; border-top: 2px solid var(--humus); }
.etapes li { position: relative; padding: 28px clamp(16px, 2vw, 32px) 0 0; }
.etapes li::before { content: ""; position: absolute; left: 0; top: -9px; width: 2px; height: 16px; background: var(--humus); }
.etape-n { display: block; font-size: clamp(3rem, 2rem + 3vw, 5rem); line-height: .9; font-weight: 820; font-stretch: 125%; color: var(--molasse-f); margin-bottom: 18px; }
.etapes h3 { margin-bottom: 10px; text-wrap: balance; }
.etapes p { margin: 0; color: var(--texte-2); font-size: 1.0625rem; max-width: 32ch; }

/* =========================================================
   Zone d'intervention : carte
   ========================================================= */
.zone { padding-block: var(--sec); background: var(--chaux-2); }
.zone-grille { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.zone-villes-titre { margin: 0 0 10px; font-weight: 650; }
.villes { columns: 2; column-gap: 24px; max-width: 30rem; }
.villes li { position: relative; padding: 4px 0 4px 20px; break-inside: avoid; }
.villes li::before { content: ""; position: absolute; left: 0; top: .72em; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--humus); background: var(--chaux); }
.zone-note { margin-top: 24px; color: var(--texte-2); }
.zone-note a { color: var(--gazon); font-weight: 650; text-underline-offset: 3px; }
.carte-cadre { margin: 0; border: 2px solid var(--humus); background: #EDEFE6; }
.carte { width: 100%; height: auto; }
.carte .anneaux circle { fill: none; stroke: var(--gazon); stroke-width: 1.4; stroke-dasharray: 4 6; }
.carte .km { font-family: var(--police); font-size: 13px; font-weight: 600; font-stretch: 80%; fill: var(--gazon); }
.carte .lac { fill: #BCD3D6; stroke: #5B8797; stroke-width: 1.5; }
.carte .riviere { fill: none; stroke: #7EA6B4; stroke-width: 2.4; stroke-linecap: round; }
.carte .eau { font-family: var(--police); font-size: 14px; font-weight: 520; font-stretch: 80%; fill: #2F5C6B; }
.carte .eau-lac { font-size: 17px; font-weight: 600; }
.carte .canton { font-family: var(--police); font-size: 44px; font-weight: 820; font-stretch: 125%; fill: rgba(43, 33, 23, .16); }
.carte .ville { fill: var(--chaux); stroke: var(--humus); stroke-width: 2; }
.carte .ville-n { font-family: var(--police); font-size: 15px; font-weight: 620; font-stretch: 86%; fill: var(--humus); paint-order: stroke; stroke: #EDEFE6; stroke-width: 4px; stroke-linejoin: round; }
.carte .siege circle { fill: var(--gazon); }
.carte .siege .siege-in { fill: var(--chaux); }
.carte .siege text { font-family: var(--police); font-size: 21px; font-weight: 820; font-stretch: 112%; fill: var(--humus); paint-order: stroke; stroke: #EDEFE6; stroke-width: 5px; stroke-linejoin: round; }
.carte .siege .pulse { fill: none; stroke: var(--gazon); stroke-width: 2; transform-box: fill-box; transform-origin: center; opacity: 0; }
.carte.vue .siege .pulse { animation: onde 2.2s ease-out 3 .3s; }
.carte .echelle line { stroke: var(--humus); stroke-width: 2; }
.carte .echelle text, .carte .nord text { font-family: var(--police); font-size: 14px; font-weight: 600; font-stretch: 86%; fill: var(--humus); }
.carte .nord path { fill: var(--humus); }
@media (max-width: 600px) {
  .carte .ville-n { font-size: 21px; stroke-width: 5px; }
  .carte .siege text { font-size: 28px; }
  .carte .eau { font-size: 19px; }
  .carte .eau-lac { font-size: 21px; }
  .carte .km { font-size: 17px; }
  .carte .canton { display: none; }
  .carte .ville { r: 5; }
  .carte .echelle text, .carte .nord text { font-size: 18px; }
}
@keyframes onde { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(4.5); opacity: 0; } }

/* =========================================================
   Réalisations (affichées dès que des photos sont ajoutées)
   ========================================================= */
.realisations { padding-block: var(--sec); }
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.galerie button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; text-align: left; }
.galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 2px solid var(--humus); }
.galerie .g-leg { display: block; margin-top: 8px; font-weight: 650; }
.galerie .g-lieu { display: block; font-size: var(--t-petit); color: var(--texte-2); font-stretch: 90%; }
.visionneuse { max-width: min(1100px, 94vw); padding: 0; border: 2px solid var(--humus); background: var(--chaux); }
.visionneuse::backdrop { background: rgba(33, 26, 18, .82); }
.visionneuse img { width: 100%; max-height: 78vh; object-fit: contain; background: var(--humus); }
.visionneuse p { margin: 0; padding: 12px 16px; font-weight: 600; }
.visionneuse-fermer { position: absolute; top: 10px; right: 10px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 4px; background: var(--chaux); font-weight: 680; cursor: pointer; }

/* =========================================================
   Contact
   ========================================================= */
.contact { padding-block: var(--sec); background: var(--humus); color: var(--chaux); }
.contact-grille { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.contact-infos { position: sticky; top: calc(var(--h-entete) + 32px); }
.contact-infos h2 { margin-bottom: 24px; }
.contact-infos > p { color: #D9D6CA; max-width: 40ch; }
.canaux { margin-top: 36px; border-top: 1px solid rgba(238, 240, 232, .25); }
.canaux li { border-bottom: 1px solid rgba(238, 240, 232, .25); }
.canal { display: grid; gap: 2px; padding: 16px 0; text-decoration: none; }
.canal-t { font-size: .875rem; font-weight: 520; font-stretch: 80%; color: #BDB7A7; }
.canal-v { font-size: clamp(1.25rem, 1rem + .8vw, 1.625rem); font-weight: 720; font-stretch: 104%; line-height: 1.25; overflow-wrap: anywhere; }
a.canal:hover .canal-v { color: var(--pousse); }

.formulaire { background: var(--humus-2); padding: clamp(22px, 3.5vw, 44px); border-radius: 6px; }
.formulaire h3 { font-size: 1.5rem; font-stretch: 110%; margin-bottom: 22px; }
.champs-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.champ { margin: 0 0 18px; min-width: 0; }
.champ label, .champ legend { display: block; margin-bottom: 6px; font-weight: 640; font-size: 1rem; }
.oblig, .facult { font-weight: 450; font-stretch: 84%; font-size: .875rem; color: #C9C3B3; margin-left: 4px; }
.champ input, .champ select, .champ textarea {
  width: 100%; min-height: 50px; padding: 12px 14px;
  border: 2px solid transparent; border-radius: 4px; background: #F5F5EF; color: var(--humus);
  font-size: 1.0625rem; line-height: 1.4;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.champ textarea { resize: vertical; min-height: 140px; }
.champ select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--humus) 50%), linear-gradient(135deg, var(--humus) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px; }
.champ input::placeholder, .champ textarea::placeholder { color: #8A8274; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--pousse); box-shadow: 0 0 0 3px rgba(169, 198, 75, .35); }
.champ [aria-invalid="true"] { border-color: var(--erreur-clair); box-shadow: 0 0 0 3px rgba(244, 166, 141, .25); }
.err { margin: 6px 0 0; font-size: .9375rem; font-weight: 600; color: var(--erreur-clair); }
.err:empty { display: none; }
.err::before { content: "! "; font-weight: 800; }
.compteur { margin: 6px 0 0; font-size: .8125rem; font-stretch: 84%; color: #BDB7A7; text-align: right; }

.puces { border: 0; padding: 0; }
.puces-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.puce { position: relative; display: inline-flex; cursor: pointer; }
.puce input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.puce span {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
  border: 1.5px solid rgba(238, 240, 232, .45); border-radius: 4px;
  font-size: .9688rem; font-weight: 580; font-stretch: 92%;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.puce span::before { content: ""; width: 14px; height: 14px; border: 1.5px solid currentColor; border-radius: 2px; flex: none; }
.puce:hover span { border-color: var(--chaux); }
.puce input:checked + span { background: var(--pousse); border-color: var(--pousse); color: var(--humus); }
.puce input:checked + span::before { background: var(--humus) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.2 5.8 10 11 4.2' fill='none' stroke='%23A9C64B' stroke-width='2'/%3E%3C/svg%3E") center / 12px no-repeat; border-color: var(--humus); }
.puce input:focus-visible + span { outline: 3px solid var(--pousse); outline-offset: 2px; }

.resume-err { margin-bottom: 20px; padding: 14px 16px; border-left: 4px solid var(--erreur-clair); background: rgba(244, 166, 141, .12); }
.resume-err p { margin: 0 0 6px; font-weight: 680; }
.resume-err ul { list-style: disc; padding-left: 20px; }
.resume-err a { color: var(--erreur-clair); font-weight: 600; }
.form-note { margin: 14px 0 0; font-size: .9375rem; color: #C9C3B3; }
.form-ok { margin-top: 20px; padding: 18px; border-left: 4px solid var(--pousse); background: rgba(169, 198, 75, .12); }
.form-ok-titre { font-weight: 720; color: var(--pousse); margin-bottom: 6px; }
.form-ok p:not(.form-ok-titre) { font-size: 1rem; color: #E1DED3; }

/* =========================================================
   Pied de page
   ========================================================= */
.pied { background: var(--humus-3); color: #D9D6CA; padding-top: clamp(48px, 6vw, 80px); }
.pied-grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 40px; }
.pied-marque img { height: 52px; width: auto; margin-bottom: 16px; }
.pied-marque p { max-width: 32ch; margin: 0; }
.pied-adresse { font-style: normal; line-height: 1.75; }
.pied a { text-decoration: none; }
.pied a:hover { color: var(--pousse); text-decoration: underline; text-underline-offset: 3px; }
.pied-nav li { padding: 3px 0; }
.pied-bas { padding-block: 0 28px; font-size: .875rem; color: #A9A394; }
.pied-bas p { margin: 0; padding-top: 20px; border-top: 1px solid rgba(238, 240, 232, .16); }

/* barre d'action mobile */
.barre-mobile { display: none; }
@media (max-width: 760px) {
  .barre-mobile {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(238, 240, 232, .97); box-shadow: 0 -1px 0 rgba(43, 33, 23, .18);
    transform: translateY(110%); transition: transform .3s var(--ease);
  }
  .barre-mobile.visible { transform: none; }
  .barre-mobile .btn { min-height: 50px; padding: 0 12px; }
  .pied-bas { padding-bottom: 96px; }
}

/* =========================================================
   Adaptations tablette / mobile
   ========================================================= */
@media (max-width: 980px) {
  .ent-grille, .zone-grille, .contact-grille { grid-template-columns: 1fr; }
  .contact-infos { position: static; }
  .prest-grille { grid-template-columns: 1fr; gap: 20px; }
  .plan-cadre { top: var(--h-entete); z-index: 2; margin-inline: calc(var(--gouttiere) * -1); padding: 10px var(--gouttiere) 8px; background: var(--chaux-2); }
  .plan { height: min(38vh, calc((100vw - 2 * var(--gouttiere)) * .72)); width: 100%; }
  .plan-aide { margin-top: 6px; font-size: .875rem; }
  .etapes { grid-template-columns: 1fr 1fr; row-gap: 40px; border-top: 0; }
  .etapes li { border-top: 2px solid var(--humus); }
  .etapes li::before { display: none; }
  .pied-grille { grid-template-columns: 1fr 1fr; }
  .pied-marque { grid-column: 1 / -1; }
  .carte-cadre { max-width: 720px; }
}
@media (max-width: 600px) {
  :root { --t-corps: 1.0625rem; }
  .champs-2 { grid-template-columns: 1fr; }
  .etapes { grid-template-columns: 1fr; row-gap: 0; border-left: 2px solid var(--humus); margin-left: 8px; }
  .etapes li { border-top: 0; padding: 0 0 36px 28px; }
  .etapes li::before { display: block; left: -9px; top: 10px; width: 16px; height: 2px; }
  .etape-n { font-size: 2.75rem; margin-bottom: 8px; }
  .cartouche dl { grid-template-columns: 1fr; }
  .pied-grille { grid-template-columns: 1fr; }
  .leg { font-size: 1.125rem; }
  .leg-desc { padding-left: 4px; }
}

/* mouvement réduit : tout est affiché d'emblée */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .rejouer { display: none; }
}

/* impression */
@media print {
  .entete, .barre-mobile, .rejouer, .formulaire, .burger { display: none !important; }
  .hero { min-height: auto; }
  .contact, .pied { background: none; color: #000; }
}