/* VRAI JARDIN — homepage (lead demo, LEAD-2026-026), « grădina fixă » version (Iulian, 2026-09-27).
   The garden stands still behind the whole page; the texts sit on green frosted glass (86 %, blur 22 — contrast ≥ 6.4:1
   measured on the real pixels); every photo is whole, in a 12 px frame of the same glass; cut-out garden objects rest
   on the edges. Layout B: the glass under the text, the photo beside it, slipped 72 px under the glass edge.
   Phone first (< 768), tablet stacked (768–1099), two columns from 1100, the PC header from 1200.
   Colours: the client's sheet (verts #229946 / #1C7E32 / #71C740, bleu marine #052B63). Fonts self-hosted, zero external
   request: Lora (titles and text; OFL) + Ms Madi (the handwriting; OFL). One corner for every button: the pill. */

@font-face{font-family:"Lora";src:url("assets/fonts/lora-400-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Lora";src:url("assets/fonts/lora-700-latin.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Lora";src:url("assets/fonts/lora-400i-latin.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Ms Madi";src:url("assets/fonts/ms-madi-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --navy:#052B63;              /* titles, strong text */
  --vert:#1C7E32;              /* buttons, accents, icons (white on it: 5.15:1) */
  --vert-profond:#0E3B22;      /* second line of the titles */
  --texte:#3A4466;             /* paragraphs */
  --texte-doux:#5B6270;        /* small grey text */
  --creme:#F8F9F2;
  --blanc:#FFFFFF;
  --ligne:#E3E8DA;
  --f:"Lora",Georgia,"Times New Roman",serif;
  --gut:20px;
  --entete-h:68px;
  --r-bouton:999px;
  /* the glass (Iulian: « verdele mai plin ») and its frame */
  --sticla:236 244 228;
  --sticla-a:.86;
  --sticla-blur:22px;
  --raza:36px;
  --rama-w:12px;
  --lat:1240px;                /* the content width; wider screens show more garden */
}

html{container-type:inline-size;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--entete-h) + 8px);
  background:var(--creme)}
/* the cream sits on <html>, not on <body>: container-type on <html> stops the body's background from moving to the
   canvas, so a cream <body> would be painted OVER the fixed garden (z-index -1). Found at the first capture. */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;color:var(--texte);font:400 17px/1.55 var(--f);overflow-x:clip}
img{display:block;max-width:100%;height:auto}
svg{display:block}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
button,input,textarea{font:inherit;color:inherit}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.saut{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--blanc);color:var(--navy);padding:10px 14px;border-radius:8px}
.saut:focus{left:12px}
:focus-visible{outline:2px solid var(--vert);outline-offset:3px;border-radius:2px}
.ic{fill:currentColor;color:var(--vert)}

/* ─── type ─── */
.titre{font-family:var(--f);font-weight:700;color:var(--navy);line-height:1.04;letter-spacing:-.02em;text-wrap:balance;
  font-size:clamp(32px,8.8vw,46px)}
.titre .l2,.titre .acc{color:var(--vert-profond)}
.titre .l2v{color:var(--vert)}
h3{font-family:var(--f);font-weight:700;color:var(--navy);line-height:1.2}
.chapo{margin-top:14px;color:var(--texte);font-size:17px;line-height:1.6}
.acc{color:var(--vert)}

/* ─── buttons ─── */
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 26px;
  border-radius:var(--r-bouton);background:var(--vert);color:var(--blanc);font:400 18px/1.2 var(--f);
  text-decoration:none;white-space:nowrap;border:0;cursor:pointer;transition:background-color .2s ease}
.bouton:hover{background:#156528}
.bouton .ic{color:currentColor;flex:none;width:22px;height:22px}
.bouton .chev{width:9px;height:15px}
.bouton .fleche{width:18px;height:14px}
.bouton--contour{background:var(--blanc);color:var(--navy);font-weight:700;box-shadow:inset 0 0 0 2px var(--navy)}
.bouton--contour:hover{background:#EEF2F7}

/* ═══ HEADER — one floating bar of the page's green glass (Iulian, 2026-09-27: variant A), set off the top edge;
   --entete-h = the air above it + the bar. Phone / tablet: logo left, call + menu right (rule 10). The glass is on a
   ::before layer, not on the bar: a backdrop-filter on the bar would become the frame of the fixed phone menu inside it. ═══ */
.entete{position:sticky;top:0;z-index:100;padding:8px var(--gut) 0}
.entete__scena{position:relative;display:flex;align-items:center;height:calc(var(--entete-h) - 8px);padding:0 7px 0 16px;border-radius:999px}
.entete__scena::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:rgb(var(--sticla) / .9);
  -webkit-backdrop-filter:blur(var(--sticla-blur)) saturate(1.15);backdrop-filter:blur(var(--sticla-blur)) saturate(1.15);
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .6),0 18px 40px -20px rgb(12 40 18 / .5)}
.entete__logo{display:block;height:44px}
.entete__logo .logo{height:100%;width:auto}
.entete__trait,.entete__pastille,.entete__pin,.entete__adr{display:none}
.entete__actions{display:flex;align-items:center;gap:6px;margin-left:auto}
.entete__tel,.burger{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;color:var(--vert);background:none;border:0;cursor:pointer}
.entete__tel{width:42px;height:42px;background:var(--vert);color:var(--blanc)}   /* the call, green as on the PC bar */
.entete__tel svg{width:21px;height:21px;fill:currentColor}
.burger{grid-template-rows:repeat(3,3px);row-gap:6px;align-content:center;justify-items:center;color:var(--navy)}
.burger span{display:block;width:28px;height:3px;border-radius:2px;background:currentColor;transition:transform .25s ease,opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
.menu{display:none}
/* the phone menu: a glass card under the bar (the bar and its cross stay free above it) */
.js .menu{display:flex;position:fixed;left:var(--gut);right:var(--gut);top:calc(var(--entete-h) + 8px);z-index:100;flex-direction:column;
  gap:24px;max-height:calc(100dvh - var(--entete-h) - 24px);padding:18px 22px 24px;border-radius:28px;overflow-y:auto;overscroll-behavior:contain;
  background:rgb(var(--sticla) / .97);-webkit-backdrop-filter:blur(var(--sticla-blur));backdrop-filter:blur(var(--sticla-blur));
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .6),0 26px 52px -24px rgb(12 40 18 / .55);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}
.js .menu.est-ouvert{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .2s ease}
.menu__liste{display:grid}
.menu__liste li + li{border-top:1px solid rgb(5 43 99 / .1)}
.menu__liste a{display:block;padding:15px 2px;font:700 21px/1.2 var(--f);color:var(--navy);text-decoration:none}
.menu__devis{align-self:stretch}
html:not(.js) .burger{display:none}
html:not(.js) .entete{position:relative}
html:not(.js) .entete__scena{flex-wrap:wrap;height:auto;padding:10px 20px;border-radius:28px}
html:not(.js) .menu{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;order:3;width:100%;padding:8px 0 4px}
html:not(.js) .menu__liste{display:flex;flex-wrap:wrap;gap:4px 18px;border:0}
html:not(.js) .menu__liste li{border:0}
html:not(.js) .menu__liste a{padding:10px 0;font-size:17px}
html:not(.js) .menu__devis{display:none}
/* the lock is on <html> only: a <body> with overflow:hidden under a locked <html> becomes its own scroll box, the sticky
   bar then sticks to it and leaves the screen with the menu open mid-page — and its cross, the menu's only close button */
html.menu-ouvert{overflow:hidden}

/* ═══ THE GARDEN — one tall image behind everything; fixed without JS, drifting slower than the page with it (script.js) ═══ */
.gradina{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}   /* script.js makes it drift */
.gradina__strat{position:absolute;inset:0}
.gradina__strat + .gradina__strat{opacity:0}   /* a next layer, if any, fades in through script.js */
/* the size script.js gives it, so the first paint and the page without JS match it: the window covered by one generated
   piece (1024 rows of the 1536-wide PC image, 1536 of the 1024-wide phone one), the top of the garden in view */
.gradina img{position:absolute;top:0;left:50%;width:max(100vw,150vh);height:auto;max-width:none;transform:translateX(-50%)}
@media (orientation:portrait){.gradina img{width:max(100vw,66.667vh)}}

/* ═══ THE GLASS, THE FRAMES, THE OBJECTS ═══ */
.g__text,.saison,.realisation,.pas > li,.bande,.pied .scena{
  background:rgb(var(--sticla) / var(--sticla-a));
  -webkit-backdrop-filter:blur(var(--sticla-blur)) saturate(1.15);backdrop-filter:blur(var(--sticla-blur)) saturate(1.15);
  border-radius:var(--raza);
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .5),0 26px 52px -26px rgb(12 40 18 / .4)}
/* a band inside a glass panel is not glass again: a lighter leaf of the same panel */
.g__text .bande{background:rgb(255 255 255 / .5);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .g__text,.saison,.realisation,.pas > li,.bande,.pied .scena,.rama,.entete__scena::before{background-color:rgb(var(--sticla) / .95)}}
@media (prefers-reduced-transparency:reduce){
  .g__text,.saison,.realisation,.pas > li,.bande,.pied .scena,.rama,.entete__scena::before{background-color:rgb(var(--sticla) / .97)}}

/* the frame IS the glass (Iulian: « 12 px, aceeași culoare ca containerul verde »): the photo covers the middle */
.rama{position:relative;margin:0;border:var(--rama-w) solid transparent;border-radius:var(--raza);overflow:hidden;
  background:rgb(var(--sticla) / var(--sticla-a));
  -webkit-backdrop-filter:blur(var(--sticla-blur)) saturate(1.15);backdrop-filter:blur(var(--sticla-blur)) saturate(1.15);
  outline:1px solid rgb(255 255 255 / .5);outline-offset:-1px;box-shadow:0 26px 50px -22px rgb(12 40 18 / .5)}
.rama img{width:100%;height:100%;object-fit:cover}

/* objects: whole cut-outs; the shadow is code and falls right, as the sun comes from the left */
.obiect{position:absolute;z-index:3;height:auto;max-width:none;pointer-events:none;user-select:none;
  filter:drop-shadow(6px 12px 10px rgb(18 34 12 / .34))}
.obiect--spate{z-index:-1}

/* discs holding an icon */
.rond{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:rgb(255 255 255 / .8);flex:none}
.rond .ic{width:26px;height:26px}
.rond--plein{background:var(--vert)}
.rond--plein .ic{color:var(--blanc)}
.cerc{display:block;border-radius:50%;background:rgb(255 255 255 / .8)}
.cerc--blanc{background:var(--blanc)}
.cerc--plein{background:var(--vert)}
.cerc--nuit{background:#0B1F54}

/* ═══ SECTIONS (phone first: stacked, the photo under its glass with a gap — Iulian, 2026-09-27: « nicio poză
   acoperită »: no glass, card or other photo ever sits over a photo; the before / after lost its « Avant » under it) ═══ */
section{position:relative}
.g{padding:clamp(56px,9vw,112px) var(--gut) 0}
.g1{padding-top:clamp(28px,5vw,64px)}
.g9{padding-bottom:clamp(56px,9vw,112px)}
.g__rand{position:relative;max-width:var(--lat);margin-inline:auto;display:flex;flex-direction:column}
.g__text{position:relative;z-index:1;padding:30px 22px 32px}
.g__foto{position:relative;margin-top:14px}
.g__rand--stanga > .g__foto{order:1}
.g__rand--col{gap:26px}
.g__text--centre{text-align:left}
.g__text > .bouton,.g__text > .accueil__actions{margin-top:26px}
.accueil__actions{display:flex;flex-wrap:wrap;gap:12px}
.accueil__actions .bouton{flex:1 1 150px}
.g1 .titre{font-size:clamp(36px,10.4vw,52px)}

/* lists: an icon in a disc, then the words (services, approach, benefits, promises) */
.services,.etapes,.benefices{display:grid;gap:18px;margin-top:26px}
.services li,.etapes li,.benefices li,.promesses li{display:grid;grid-template-columns:52px 1fr;column-gap:14px;align-content:start}
.services .cerc,.etapes .cerc,.benefices .cerc,.promesses .cerc{grid-area:1/1/3/2;width:52px;height:52px}
.services .ic,.etapes .ic,.benefices .ic,.promesses .ic{grid-area:1/1/3/2;width:28px;height:28px;place-self:start center;margin-top:12px}
.services h3,.etapes h3,.benefices h3{grid-column:2;font-size:18px;margin-top:3px}
.services p,.etapes p,.benefices p{grid-column:2;font-size:15.5px;line-height:1.5;margin-top:4px}

/* the handwriting of the hero, on the photo */
.g-mana{position:absolute;z-index:4;right:6%;bottom:12%;margin:0;font:400 22px/1.22 "Ms Madi",cursive;color:var(--blanc);
  transform:rotate(-9deg);transform-origin:0 0;pointer-events:none;user-select:none;
  text-shadow:0 1px 2px rgb(0 0 0 / .45),0 0 14px rgb(0 0 0 / .3)}

/* frames per section (phone) */
.g1 .rama,.g3__mare,.g2 .rama,.g5 .rama,.g9 .rama{aspect-ratio:4/3}
.g1 .rama img{object-position:60% 50%}
.g7 .rama,.g8 .rama{aspect-ratio:4/3}
.g3__mica{display:none}

/* ─── S04 — before / after, in the glass frame ─── */
.avap{position:relative;aspect-ratio:3/2;--pos:41.5%}
.avap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.avap__avant{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.avap__trait{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:var(--blanc);pointer-events:none}
.avap__poignee{position:absolute;top:50%;left:var(--pos);width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;
  background:#F7FBF4;box-shadow:0 2px 8px rgba(0,0,0,.18);display:grid;place-items:center;pointer-events:none}
.avap__poignee .ic{width:24px;height:14px;color:var(--vert)}
.avap__et{position:absolute;top:8%;display:flex;align-items:center;justify-content:center;min-width:72px;padding:6px 14px;border-radius:999px;font:700 15px/1 var(--f);pointer-events:none}
.avap__et--avant{left:6%;background:var(--blanc);color:var(--navy)}
.avap__et--apres{right:6%;background:var(--vert);color:var(--blanc)}
.avap__curseur{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
html:not(.js) .avap__curseur,html:not(.js) .avap__poignee{display:none}
.avap:has(.avap__curseur:focus-visible) .avap__poignee{outline:3px solid var(--vert);outline-offset:3px}

/* ─── cards (seasons, achievements, steps): a glass card whose 12 px padding is the photo's frame ─── */
.saison,.realisation,.pas > li{position:relative;padding:var(--rama-w);display:flex;flex-direction:column}
.carte__foto{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:calc(var(--raza) - var(--rama-w))}
.carte__t{display:grid;grid-template-columns:48px 1fr;column-gap:12px;align-items:start;padding:14px 8px 8px}
.carte__t h3{font-size:19px;margin-top:2px}
.carte__t p{font-size:15px;line-height:1.45;margin-top:4px;color:var(--texte)}

/* S05 — the four seasons: a strip that slides with the finger on the phone */
.saisons__liste{display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,300px);gap:16px;overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);padding:56px var(--gut) 14px;margin:0 calc(-1 * var(--gut));
  scrollbar-width:none}
.saisons__liste::-webkit-scrollbar{display:none}
.saison{scroll-snap-align:start}

/* S06 — achievements: filters, then a strip on the phone */
.filtres{display:flex;gap:8px;overflow-x:auto;margin:22px -22px 0;padding:2px 22px;scrollbar-width:none}
.filtres::-webkit-scrollbar{display:none}
.filtre{flex:none;display:flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;border:0;
  background:rgb(255 255 255 / .8);box-shadow:inset 0 0 0 1px #D5DCCB;color:var(--navy);font:400 16px/1 var(--f);cursor:pointer}
.filtre[aria-pressed="true"]{background:var(--vert);color:var(--blanc);box-shadow:none;font-weight:700}
html:not(.js) .filtres{display:none}
.galerie{display:grid;grid-auto-flow:column;grid-auto-columns:min(80vw,320px);gap:14px;overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);padding:4px var(--gut) 12px;margin:0 calc(-1 * var(--gut));scrollbar-width:none}
.galerie::-webkit-scrollbar{display:none}
.realisation{scroll-snap-align:start;transition:opacity .25s ease}
.realisation[hidden]{display:none}
.realisation.est-estompe{opacity:.32}

/* quote bands */
.bande{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:26px 22px}
.bande__titre{font-size:26px}
.bande__texte{font-size:16px;line-height:1.5;color:var(--texte)}
.bande .bouton{margin-top:6px}
.bande--devis > .cerc--nuit{width:56px;height:56px}
.bande--devis > .ic{position:absolute;left:35px;top:39px;width:30px;height:30px;margin:0;color:var(--blanc)}
.bande__plus{display:flex;flex-wrap:wrap;gap:6px 16px}
.bande__plus li{display:flex;align-items:center;gap:6px;font-size:15px;color:var(--texte)}
.bande__plus .ic{width:20px;height:20px}

/* S07 — steps and the glass card over the photo */
.pas{display:grid;grid-template-columns:1fr;gap:16px;max-width:var(--lat);margin:40px auto 0}
.verre{display:none}
.g7 .g__rand--col{margin-top:26px}

/* S08 — FAQ, on the glass */
.faq__liste{display:grid;gap:10px;margin-top:24px}
.q{background:rgb(255 255 255 / .72);border-radius:18px;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .7);overflow:hidden}
.q summary{display:grid;grid-template-columns:44px 1fr 30px;align-items:center;gap:12px;padding:10px 14px;cursor:pointer;list-style:none}
.q summary::-webkit-details-marker{display:none}
.q .cerc{width:44px;height:44px;display:grid;place-items:center;background:var(--creme)}
.q .cerc .ic{width:24px;height:24px}
.q__t{font:700 17px/1.3 var(--f);color:var(--navy)}
.q__pm{position:relative;width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--vert)}
.q__pm::before,.q__pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--vert);border-radius:1px}
.q__pm::after{transform:rotate(90deg);transition:transform .2s ease}
.q[open] .q__pm{background:var(--vert);box-shadow:none}
.q[open] .q__pm::before,.q[open] .q__pm::after{background:var(--blanc)}
.q[open] .q__pm::after{transform:rotate(0)}
.q__r{padding:12px 18px 16px 70px;background:#EEF4E7;font-size:16px;line-height:1.55;color:var(--texte)}
.q__r a{color:var(--vert);font-weight:700}
.bande--question{margin-top:18px}
.bande--question > .cerc{width:56px;height:56px;display:grid;place-items:center}
.bande--question > .cerc .ic{width:30px;height:30px;color:var(--blanc)}
.bande--question .bande__titre{font-size:22px}

/* S09 — contact */
.g9__col{display:flex;flex-direction:column}
.promesses{display:grid;gap:14px;margin-top:24px}
.promesses li{align-items:center}
.promesses .cerc{grid-area:1/1/2/2}
.promesses .ic{grid-area:1/1/2/2;margin:0;place-self:center}
.promesses p{grid-column:2;font-size:15px;line-height:1.35;color:var(--texte-doux)}
.promesses strong{display:block;color:var(--navy);font-size:17px}
.promesses span{display:block}
/* the call card: a darker glass, white text on it */
.appel{position:relative;z-index:1;display:grid;grid-template-columns:62px 1fr;column-gap:14px;align-items:center;
  margin:14px 0 0;padding:22px 18px;border-radius:26px;color:var(--blanc);
  background:rgb(16 54 34 / .9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .22),0 20px 40px -20px rgb(0 0 0 / .5)}
.appel__cerc{grid-area:1/1/3/2;position:relative;width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 2px var(--blanc)}
.appel > .ic{grid-area:1/1/3/2;position:relative;width:28px;height:28px;place-self:center;color:var(--blanc)}
.appel h3{grid-column:2;position:relative;color:var(--blanc);font-size:21px}
.appel p{grid-column:2;position:relative;font-size:16px;line-height:1.5;color:#E4EFE7}
.appel__tel{grid-column:1/-1;position:relative;justify-self:start;display:inline-flex;align-items:center;gap:10px;margin-top:16px;
  min-height:50px;padding:0 22px;border-radius:999px;background:var(--blanc);color:var(--navy);font:700 19px/1 var(--f);text-decoration:none}
.appel__tel .ic{width:22px;height:22px;color:var(--vert)}
/* the form: a white card (the fields need a plain ground) */
.devis{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:40px;padding:26px 20px;
  border-radius:var(--raza);background:rgb(255 255 255 / .94);box-shadow:0 26px 52px -26px rgb(12 40 18 / .45)}
.devis h3{font-size:26px}
#s9-f-sub{font-size:16px;line-height:1.5;color:var(--texte-doux);margin-top:-4px}
.champ{position:relative;display:block}
.champ .ic{position:absolute;left:16px;top:15px;width:20px;height:20px;color:#8A9097;pointer-events:none}
.champ input,.champ textarea{display:block;width:100%;min-height:52px;padding:12px 14px 12px 48px;border:0;border-radius:12px;
  background:#FEFEFE;box-shadow:inset 0 0 0 1px #D9DEE3;font-size:16px;color:var(--navy)}
.champ textarea{min-height:110px;resize:vertical}
.champ input::placeholder,.champ textarea::placeholder{color:#737A83;opacity:1}
.champ input:focus-visible,.champ textarea:focus-visible{outline:2px solid var(--vert);outline-offset:1px}
.devis__envoi{width:100%;font-weight:700;padding:0 16px;white-space:normal;text-align:center}
.devis__envoi .ic{width:22px;height:20px}
.devis__note{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;line-height:1.4;color:var(--texte-doux)}
.devis__note .ic{flex:none;width:14px;height:16px;color:#1F2A2E;margin-top:1px}
.devis__retour{font-size:15px;line-height:1.45;color:var(--vert);font-weight:700}
.devis__retour:empty{display:none}

/* ─── footer: one glass panel floating above the bottom edge of the page, the gutter's width under it (Iulian,
   2026-09-27: the legal band is gone; 2026-09-28: « lasă puțin loc » under it, so no longer glued to the edge).
   Gap + bottom padding (20 + 76 / 40 + 56) keep the WhatsApp button off the text exactly as far as the glued panel
   did, wherever the button falls over the panel (below 1400 px wide). ─── */
.pied{padding:0 var(--gut) var(--gut)}
.pied .scena{display:grid;gap:30px;max-width:var(--lat);margin:0 auto;padding:32px 24px 76px}
.pied__col{display:grid;gap:14px;align-content:start}
.pied__logo{display:block;width:140px}
.pied__logo .logo{width:100%;height:auto}
.pied__texte{font-size:15px;line-height:1.5;color:var(--texte-doux)}
.pied__h{font:700 14px/1.2 var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--vert)}
#s9-ic-pin,#s9-ic-tel3{display:none}
.pied__adr,.pied__tel{font-size:16px;line-height:1.5;color:var(--texte)}
.pied__tel{display:inline-block;min-height:44px;padding:10px 0;font-weight:700;color:var(--navy);text-decoration:none}
.pied__services{display:grid;gap:8px}
.pied__services li{display:flex;align-items:center;gap:10px;font-size:15.5px;color:var(--texte)}
.pied__services .ic{flex:none;width:16px;height:16px}
.pied__zone{font-size:16px;color:var(--texte)}
.harta{position:relative;aspect-ratio:422/233;border-radius:14px;overflow:hidden;background:#E9ECEB}
.harta > svg:first-child{width:100%;height:100%}
.harta__et{position:absolute;font:400 12px/1 var(--f);color:#3E4A44;white-space:nowrap;pointer-events:none}
.harta__et--baza{font-weight:700;color:#0B2A1A;font-size:13px}
.harta__pin{position:absolute;width:20px;height:27px;margin:-27px 0 0 -10px;color:var(--vert)}
/* MAP:start (copied from 07_SITE) */
#s9-m1{left:64.79%;top:34.81%;transform:translate(-50%,-82%)}
#s9-m2{left:70.55%;top:54.72%;transform:translate(0,-82%)}
#s9-m3{left:36.00%;top:59.66%;transform:translate(-50%,-82%)}
#s9-m4{left:61.92%;top:82.83%;transform:translate(-50%,-82%)}
#s9-m5{left:56.66%;top:69.23%;transform:translate(-100%,-82%)}
.harta__pin{left:59.03%;top:68.37%}
/* MAP:end */

/* WhatsApp (rule 14) */
.wa-float{position:fixed;right:20px;bottom:max(20px,env(safe-area-inset-bottom));z-index:90;display:grid;place-items:center;
  width:56px;height:56px;border-radius:50%;background:#25D366;color:var(--blanc);box-shadow:0 10px 26px -8px rgba(8,12,16,.6);
  transition:transform .2s ease,box-shadow .2s ease}
.wa-float:hover{transform:translateY(-3px);box-shadow:0 16px 32px -10px rgba(8,12,16,.65)}
.wa-float svg{width:30px;height:30px;fill:currentColor}
@media (max-width:600px){.wa-float{right:14px;bottom:max(14px,env(safe-area-inset-bottom));width:52px;height:52px}.wa-float svg{width:28px;height:28px}}

/* ─── objects on the phone: one per section, small, on a corner that holds no text ─── */
@media (max-width:1099.98px){
  :root{--rama-w:9px;--raza:28px}
  .obiect--pc,.o-feuilles,.o-tuyau,.o-carnet,.o-rameau9,.o-olivier{display:none}
  .o-rameau{right:-16px;top:-92px;width:98px;transform:rotate(-16deg)}   /* 2026-09-28: off the end of the title */
  .o-arrosoir{right:20px;bottom:calc(100% - 8px);width:128px}
  .o-gants{right:-12px;top:-60px;width:108px;transform:rotate(14deg)}
  .o-brouette{right:18px;bottom:calc(100% - 10px);width:140px}
  .o-cerisier{right:-10px;top:-50px;width:118px;transform:rotate(12deg)}
  /* resting on the band it covered the last step card's text; on its right corner the FAQ's pot stood in front of it */
  .o-gazon{left:14px;top:calc(100% - 18px);width:116px}
  .o-jeune{right:12px;bottom:calc(100% - 8px);width:86px}   /* 2026-09-28: clear of the band's button above */
  .o-lavande9{right:22px;bottom:calc(100% - 8px);width:88px}
}

/* ═══ TABLET (768–1099): still stacked, wider paddings, cards in two columns ═══ */
@media (min-width:768px){
  :root{--gut:40px;--entete-h:76px}
  .entete{padding-top:12px}
  .entete__scena{height:calc(var(--entete-h) - 12px);padding:0 13px 0 22px}   /* rule 10: logo and burger lines 62 px from the edges */
  .entete__logo{height:48px}
  .titre{font-size:clamp(40px,5.4vw,56px)}
  .g__text{padding:44px 48px 46px}
  .g__foto,.appel{margin-top:18px}
  .accueil__actions .bouton{flex:0 0 auto}
  .services{grid-template-columns:1fr 1fr;gap:24px 30px}
  .etapes,.benefices{grid-template-columns:repeat(3,1fr);gap:24px}
  .etapes li,.benefices li{grid-template-columns:1fr;row-gap:10px}
  .etapes .cerc,.benefices .cerc{grid-area:1/1}
  .etapes .ic,.benefices .ic{grid-area:1/1;place-self:start;margin:12px 0 0 12px}
  .etapes h3,.etapes p,.benefices h3,.benefices p{grid-column:1}
  .saisons__liste{grid-auto-flow:row;grid-template-columns:1fr 1fr;grid-auto-columns:auto;overflow:visible;
    max-width:var(--lat);margin:0 auto;padding:56px 0 0;gap:22px}
  .galerie{grid-auto-flow:row;grid-template-columns:1fr 1fr;grid-auto-columns:auto;overflow:visible;margin:0;padding:0;gap:22px}
  .filtres{flex-wrap:wrap;overflow:visible;margin-inline:0;padding:0}
  .pas{grid-template-columns:1fr 1fr;gap:22px}
  .bande{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:24px;padding:30px 34px}
  .bande__titre{flex:1 1 100%}
  .pied .scena{grid-template-columns:1fr 1fr;gap:40px;padding:40px 44px 56px}
  .g-mana{font-size:26px}
}
@media (min-width:768px) and (max-width:1099.98px){
  .g__rand,.saisons__liste,.pas{max-width:720px}
}

/* ═══ TWO COLUMNS (≥ 1100): layout B — the glass under the text, the photo beside it, 32 px apart (no overlap) ═══ */
@media (min-width:1100px){
  :root{--rama-w:12px;--raza:36px}
  .g__rand{display:grid;align-items:center;column-gap:32px}
  .g__rand--dreapta{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .g__rand--stanga{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .g__rand--col{display:flex;flex-direction:column;gap:32px}
  .g__text{padding:54px 58px}
  .g__foto{margin-top:0}
  .g__rand--stanga > .g__foto{order:0}
  .titre{font-size:clamp(34px,3.7vw,54px)}
  .g1 .titre{font-size:clamp(40px,4.6vw,64px)}
  .chapo{font-size:18.5px}
  .g__text--centre{text-align:center}
  .g__text--centre .chapo{max-width:44em;margin-inline:auto}
  .g__text--centre .filtres{justify-content:center}

  /* S01 */
  .g1 .rama{aspect-ratio:1/1}
  .g-mana{right:7%;bottom:auto;top:50%;font-size:27px}
  /* S02 */
  .g2 .rama{aspect-ratio:4/5}
  /* S03: the big photo and the small one side by side, the small one lower (no longer over the big one) */
  .g3__fotos{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);column-gap:16px;align-items:end}
  .g3__mare{aspect-ratio:4/5}
  .g3__mica{display:block;aspect-ratio:3/4}
  /* S04: the slider needs the width */
  .g4 .g__rand{grid-template-columns:minmax(0,6fr) minmax(0,6fr)}
  /* its three benefits: rows (icon, then the words), not the tablet's three narrow columns */
  .g4 .benefices{grid-template-columns:1fr;gap:16px}
  .g4 .benefices li{grid-template-columns:52px 1fr;row-gap:0}
  .g4 .benefices .cerc{grid-area:1/1/3/2}
  .g4 .benefices .ic{grid-area:1/1/3/2;place-self:start center;margin:12px 0 0}
  .g4 .benefices h3,.g4 .benefices p{grid-column:2}
  /* S05 */
  .g5 .rama{aspect-ratio:3/2}
  .saisons__liste{grid-template-columns:repeat(4,minmax(0,1fr));max-width:var(--lat)}
  /* S06 */
  .galerie{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .g6 .bande{display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:40px;padding:34px 44px}
  .g6 .bande__titre{flex:none}
  /* S07: the photo, the dark glass card under it, then the four steps */
  .g7 .rama{aspect-ratio:1/1}
  .verre{display:grid;grid-template-columns:48px 1fr;column-gap:14px;align-items:center;position:relative;z-index:2;margin-top:16px;
    padding:18px 22px;border-radius:24px;color:var(--blanc);background:rgba(12,48,58,.8);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
  .verre .cerc{grid-area:1/1/3/2;width:48px;height:48px}
  .verre > .ic{grid-area:1/1/3/2;place-self:center;width:26px;height:26px;position:relative}
  .verre h3{grid-column:2;color:var(--blanc);font-size:18px}
  .verre p{grid-column:2;color:#D6E0E4;font-size:15px;line-height:1.4}
  .pas{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:56px}
  .g7 .g__rand--col{margin-top:40px}
  .bande--devis{display:grid;grid-template-columns:56px auto 1fr auto;align-items:center;column-gap:26px;row-gap:8px;padding:30px 40px}
  .bande--devis > .cerc--nuit{grid-area:1/1/3/2}
  .bande--devis > .ic{left:53px;top:50%;margin-top:-15px}
  .bande--devis .bande__titre{grid-column:2;grid-row:1}
  .bande--devis .bande__plus{grid-column:2;grid-row:2}
  .bande--devis .bande__texte{grid-column:3;grid-row:1/3;max-width:26em}
  .bande--devis .bouton{grid-column:4;grid-row:1/3;margin:0}
  /* S08 */
  .g8 .rama{aspect-ratio:4/5}
  .bande--question{display:grid;grid-template-columns:56px 1fr auto;align-items:center;column-gap:22px;padding:20px 24px}
  .bande--question .bouton{margin:0}
  /* S09: text + photo with the call card on the left, the form on the right */
  .g__rand--contact{grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:start;column-gap:48px}
  .g9__col .g__foto{margin:24px 0 0}
  .g9 .rama{aspect-ratio:16/9}   /* the call card now sits under the photo: a wider photo keeps the column as tall as before */
  .appel{margin:16px 0 0}
  .devis{margin-top:0;padding:34px 32px}

  /* objects, PC (the sun from the left: every shadow falls right) */
  /* the old objects moved off the titles and buttons they touched (Iulian, 2026-09-28: « mută-le ») */
  .o-rameau{left:-96px;top:-104px;width:190px;transform:rotate(-16deg)}
  .o-lavande{right:30px;bottom:calc(100% - 16px);width:128px}
  .o-graminees{left:-112px;bottom:-6px;width:270px}   /* toward its photo, away from the text card */
  .o-arrosoir{right:24px;bottom:calc(100% - 12px);width:220px}
  .o-pierres{left:26px;bottom:calc(100% - 14px);width:196px}
  .o-secateur{right:-58px;bottom:-46px;width:210px;transform:rotate(10deg)}
  .o-gants{right:-72px;top:-128px;width:190px;transform:rotate(14deg)}
  .o-transplantoir{left:-50px;bottom:-128px;width:180px;transform:rotate(-14deg)}
  .o-olivier{left:40px;bottom:calc(100% - 14px);width:156px}   /* on the big photo: the small one starts lower */
  .o-hortensia{right:-70px;bottom:-54px;width:230px;transform:rotate(-6deg)}
  .o-brouette{right:40px;bottom:calc(100% - 14px);width:240px}
  .o-rateau{right:-46px;bottom:-66px;width:250px;transform:rotate(-8deg)}
  .o-cerisier{left:-46px;top:-58px;width:176px;transform:rotate(-12deg)}
  /* the corners below, measured once the objects arrived (2026-09-28): the lower corners held the card text, the last
     filter and — resting on the band — the text of the step cards above it */
  .o-feuilles{right:-34px;top:-52px;width:150px}
  .o-tuyau{right:-112px;top:-36px;width:200px}   /* past the end of the centred title */
  .o-carnet{left:-44px;top:-62px;width:190px;transform:rotate(-8deg)}
  .o-gazon{left:-44px;top:calc(100% - 36px);width:210px}
  .o-jeune{right:48px;bottom:calc(100% - 12px);width:120px}
  .o-hortensia8{right:-70px;bottom:-50px;width:220px;transform:rotate(-6deg)}
  .o-rameau9{left:-92px;top:-100px;width:170px;transform:rotate(-16deg)}
  .o-lavande9{right:36px;bottom:calc(100% - 14px);width:120px}
}

/* ═══ PC HEADER (≥ 1200): the bar as wide as the content — logo, the menu in one row, the address, the green call ═══ */
@media (min-width:1200px){
  :root{--entete-h:84px}
  .entete__scena{max-width:var(--lat);margin-inline:auto;height:72px;padding:0 12px 0 28px;gap:22px}
  .entete__logo{height:52px}
  .js .menu,.menu{display:flex;position:static;flex:1;justify-content:center;opacity:1;visibility:visible;transform:none;
    padding:0;background:none;overflow:visible;
    max-height:none;border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}   /* none of the phone card */
  .menu__liste,html:not(.js) .menu__liste{display:flex;gap:30px;border:0}
  .menu__liste li,.menu__liste li + li,html:not(.js) .menu__liste li{border:0}
  .menu__liste a,html:not(.js) .menu__liste a{position:relative;padding:8px 0;font:400 16px/1.2 var(--f);color:var(--navy)}
  .menu__liste a[aria-current]{font-weight:700}
  .menu__liste a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:1px;background:#22622B}
  .menu__devis,.entete__actions{display:none}
  html:not(.js) .entete__scena{flex-wrap:nowrap;height:72px;padding:0 12px 0 28px;border-radius:999px}
  html:not(.js) .menu{order:0;width:auto;padding:0}
  .entete__pastille{order:4;display:flex;align-items:center;gap:10px;height:50px;padding:0 22px;border-radius:999px;background:var(--vert);
    color:var(--blanc);font-weight:700;text-decoration:none;white-space:nowrap}
  .entete__pastille:hover{background:#156528}
  .entete__pastille .ic{width:20px;height:20px;color:var(--blanc)}
  .entete__pin{order:2;display:block;width:16px;height:22px;color:var(--navy);flex:none}
  .entete__adr{order:3;display:block;margin-left:-14px;font-size:14px;line-height:1.3;color:var(--navy);white-space:nowrap}
  .pied .scena{grid-template-columns:1.1fr 1fr 1.2fr 1.3fr;gap:36px;padding:44px 48px 56px}
}
@media (min-width:1400px){.pied .scena{padding-bottom:48px}}   /* the WhatsApp button now falls beside the panel */

/* ═══ reduced motion, print ═══ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}
@media print{.wa-float,.gradina,.obiect{display:none}}

/* ═══ Motion — GSAP + Lenis (/lead-animatii, 2026-09-28). Everything sits behind .a-anim, which script.js puts on <html>
   only without reduced motion and takes back if animatii.js has not started within 3 s: the reduced-motion visitor,
   the no-JS visitor and a failed load all get the page as it was. Past the house limit of 0.8 s on purpose (up to
   ~2 s): the premium layer Iulian chose on CONF-M (2026-09-27). The gesture: the logo's leaf is a window onto the
   garden — it opens the loading screen, then the hero photo, then every framed photo as it arrives. ═══ */

/* Loading screen (rule 8 — at every load, 2–3 s, no skipping). The logo has several colours, so no negative: the
   glass colour of the page behind it, the logo in its own greens and navy, each path traced and filled in its colour.
   Logo 295.89 units wide: 360 px on PC, 250 px on the phone → line 1.5 × 295.89 / width = 1.23 / 1.78 units; the
   letters sit in a group scaled 1.55, so their line is divided by 1.55. */
:root{--a-ecran-fond:rgb(var(--sticla));--a-ecran-cerneala:var(--vert);--a-ecran-l:360px;--a-ecran-sw:1.23}
@media (max-width:599px){:root{--a-ecran-l:250px;--a-ecran-sw:1.78}}
.a-ecran{display:none}
.a-anim .a-ecran{position:fixed;inset:0;z-index:2147483600;display:flex;align-items:center;justify-content:center;
  background:var(--a-ecran-fond);animation:a-ecran-plasa 1ms linear 3.5s forwards}
.a-ecran-gata .a-ecran{pointer-events:none}
.a-ecran__logo{display:block;width:var(--a-ecran-l);height:auto;overflow:visible;
  animation:a-ecran-apropie 1.9s cubic-bezier(.2,.7,.2,1) both}
.a-ecran__logo path{fill:var(--c,var(--a-ecran-cerneala));fill-opacity:0;stroke:var(--c,var(--a-ecran-cerneala));stroke-opacity:1;
  stroke-width:var(--a-ecran-sw);stroke-linejoin:round;stroke-dasharray:1 2;stroke-dashoffset:1;
  animation:a-ecran-traseaza .95s cubic-bezier(.65,0,.35,1) .1s forwards,a-ecran-umple .5s ease 1.05s forwards}
.a-ecran__semn path:nth-child(1){--c:#229946}
.a-ecran__semn path:nth-child(2){--c:#1C7E32}
.a-ecran__semn path:nth-child(3){--c:#71C740}
.a-ecran__semn path:nth-child(4){--c:#5DAF3F}
.a-ecran__semn path:nth-child(5){--c:#71C740}
.a-ecran__semn path:nth-child(4n+2){animation-delay:.16s,1.09s}
.a-ecran__semn path:nth-child(4n+3){animation-delay:.22s,1.13s}
.a-ecran__semn path:nth-child(4n){animation-delay:.28s,1.17s}
.a-ecran__nume path{--c:#229946;stroke-width:calc(var(--a-ecran-sw) / 1.55);animation-delay:.3s,1.25s}
.a-ecran__nume path:nth-child(4n+2){animation-delay:.36s,1.29s}
.a-ecran__nume path:nth-child(4n+3){animation-delay:.42s,1.33s}
.a-ecran__nume path:nth-child(4n){animation-delay:.48s,1.37s}
/* « PAYSAGISTE » is too fine to trace: it rises once the name is drawn */
.a-ecran__rest{animation:a-ecran-urca .6s cubic-bezier(.2,.7,.2,1) 1.25s both}
.a-ecran__rest path{--c:var(--navy);fill-opacity:1;stroke:none;animation:none}
@keyframes a-ecran-traseaza{to{stroke-dashoffset:0}}
@keyframes a-ecran-umple{to{fill-opacity:1;stroke-opacity:0}}
@keyframes a-ecran-urca{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@keyframes a-ecran-apropie{from{scale:.94}to{scale:1}}
@keyframes a-ecran-plasa{to{visibility:hidden;opacity:0}}

/* Lenis (smooth wheel; touch scrolling stays native): its own required rules; the page's CSS smooth scrolling steps
   aside for it */
html.lenis,html.lenis body{height:auto}
html.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}

/* the hero waits hidden for its entrance (released by .a-pret, the moment animatii.js has set its first frame): its
   glass too, so the leaf opens onto the garden alone */
.a-anim:not(.a-pret) :is(.g1 .g__text,.g1 .rama,.g1 .titre,.g1 .accueil__chapo,.g1 .accueil__actions,.g1 .g-mana,.g1 .rama img,.g1 .obiect),
.a-anim:not(.a-pret) .entete{visibility:hidden}

/* the cut-out objects sprout and drift through variables read by the individual translate / scale properties: these
   compose with each object's own rotation (transform, per width) instead of replacing it */
.a-anim .obiect{translate:0 calc(var(--a-dy,0px) + var(--a-py,0px));scale:var(--a-s,1)}

/* SplitText's line masks: a clip-path reaching a little past the line (accents, descenders) replaces its inline
   overflow:clip — no padding, which would grow the title */
.a-anim .a-ligne-mask{overflow:visible !important;clip-path:inset(-.25em -.1em -.28em -.1em)}

/* the answer to the mouse (the main buttons are magnetic in animatii.js): cards lift a little */
@media (hover:hover){
  .a-anim :is(.saison,.realisation,.pas > li){transition:translate .45s cubic-bezier(.2,.7,.2,1),opacity .25s ease}
  .a-anim :is(.saison,.realisation,.pas > li):hover{translate:0 -6px}
}

/* printing mid-page: every element shows in its place, whatever the scroll had reached */
@media print{
  .a-ecran{display:none !important}
  .a-anim [style*="opacity"]{opacity:1 !important}
  .a-anim [style*="visibility"]{visibility:visible !important}
  .a-anim main [style*="transform"],.a-anim .entete[style*="transform"]{transform:none !important}
  .a-anim main [style*="clip-path"]{clip-path:none !important}
}