:root {
--deep: #04240f; --forest: #1f6b31; --forest-soft: #2f7d3f;
--lime: #c3eb51; --lime-deep: #a6cf39;
--bark: #7a5230; --bark-soft: #a67c52;
--beige: #efe7d8; --beige-deep: #e2d6c2;
--off: #f6f2ea;
--ink: #10130d; --ink-soft: #2a2f26;
--muted: #5f6659;
--white: #ffffff;
--line: rgba(16, 19, 13, 0.12);
--line-light: rgba(255, 255, 255, 0.16);
--shadow-sm: 0 8px 24px rgba(4, 36, 15, 0.10);
--shadow: 0 26px 70px rgba(4, 36, 15, 0.20);
--shadow-lg: 0 40px 120px rgba(4, 36, 15, 0.32);
--radius: 22px;
--radius-lg: 34px;
--container: min(1200px, calc(100vw - 44px));
--container-wide: min(1420px, calc(100vw - 44px));
--font-title: "Fraunces", Georgia, "Times New Roman", serif;
--font-body: "Source Sans 3", system-ui, -apple-system, sans-serif;
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--dur: 0.7s;
} *,
*::before,
*::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%; overflow-x: clip;
}
body {
margin: 0;
color: var(--ink);
background: var(--off);
font-family: var(--font-body);
font-size: 18px;
line-height: 1.65;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
overflow-x: clip;
}
body.menu-open,
body.no-scroll { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a {
color: var(--forest);
text-decoration-thickness: 0.08em;
text-underline-offset: 0.18em;
transition: color 0.25s var(--ease);
}
a:hover { color: var(--deep); }
h1, h2, h3, h4 {
margin: 0 0 0.5em;
color: var(--deep);
font-family: var(--font-title);
font-weight: 600;
line-height: 1.02;
letter-spacing: -0.02em;
}
h1 { font-size: clamp(2.6rem, 6vw, 5.6rem); }
h2 { font-size: clamp(2rem, 4vw, 3.6rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); }
p { margin: 0 0 1rem; }
input, select, textarea, button { font: inherit; }
input, select, textarea {
width: 100%;
border: 1px solid rgba(4, 36, 15, 0.2);
border-radius: 14px;
padding: 0.9rem 1.05rem;
background: rgba(255, 255, 255, 0.9);
color: var(--ink);
transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus,
button:focus-visible, a:focus-visible, summary:focus-visible {
outline: 3px solid rgba(195, 235, 81, 0.7);
outline-offset: 2px;
border-color: var(--forest);
}
.container { width: var(--container); margin-inline: auto; }
.container.narrow { width: min(820px, calc(100vw - 44px)); }
.container.wide { width: var(--container-wide); }
.section { padding-block: clamp(3.5rem, 8vw, 7.5rem); }
.section-muted { background: var(--beige); }
.section-dark { background: var(--deep); color: rgba(255, 255, 255, 0.86); }
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--white); }
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; left: 12px; top: -60px; z-index: 2000;
background: var(--deep); color: var(--white); padding: 0.7rem 1.1rem;
border-radius: 12px; transition: top 0.25s var(--ease);
}
.skip-link:focus { top: 12px; color: var(--white); }
.eyebrow {
display: inline-flex; align-items: center; gap: 0.6rem;
margin: 0 0 1rem; font-size: 0.82rem; font-weight: 700;
letter-spacing: 0.22em; text-transform: uppercase; color: var(--forest);
}
.eyebrow::before {
content: ""; width: 26px; height: 2px; background: var(--lime-deep);
}
.section-dark .eyebrow, .hero__eyebrow { color: var(--lime); }
.lead { font-size: clamp(1.15rem, 1.6vw, 1.4rem); color: var(--ink-soft); }
.muted { color: var(--muted); }
.section-heading { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.section-heading p { color: var(--muted); font-size: 1.1rem; } .button {
--btn-bg: var(--forest);
--btn-fg: #fff;
position: relative;
display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
min-height: 3.2rem; padding: 0.85rem 1.6rem;
border: 1px solid transparent; border-radius: 999px;
background: var(--btn-bg); color: var(--btn-fg);
font-weight: 700; letter-spacing: 0.01em; text-decoration: none; cursor: pointer;
overflow: hidden; isolation: isolate;
transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}
.button::after {
content: ""; position: absolute; inset: 0; z-index: -1;
background: var(--lime); transform: translateY(102%);
transition: transform 0.42s var(--ease);
}
.button:hover, .button:focus-visible {
color: var(--deep); transform: translateY(-2px);
box-shadow: 0 16px 34px rgba(4, 36, 15, 0.26);
}
.button:hover::after, .button:focus-visible::after { transform: translateY(0); }
.button-primary { --btn-bg: var(--forest); }
.button-secondary { --btn-bg: var(--bark); }
.button-dark { --btn-bg: var(--ink); }
.button-ghost {
--btn-bg: transparent; color: var(--deep);
border-color: rgba(4, 36, 15, 0.28);
}
.button-ghost:hover, .button-ghost:focus-visible { color: var(--deep); }
.section-dark .button-ghost, .hero__actions .button-ghost {
color: #fff; border-color: rgba(255, 255, 255, 0.4);
}
.section-dark .button-ghost:hover, .hero__actions .button-ghost:hover { color: var(--deep); }
.button-light { --btn-bg: var(--lime); color: var(--deep); }
.button-light:hover { color: var(--deep); }
.button-light::after { background: #fff; }
.button-outline-light {
--btn-bg: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.5);
}
.button-outline-light:hover { color: var(--deep); }
.button-row { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.2rem; } .cursor, .cursor-dot { display: none; }
@media (hover: hover) and (pointer: fine) {
body.has-cursor { cursor: none; }
body.has-cursor a,
body.has-cursor button,
body.has-cursor [data-menu-toggle],
body.has-cursor input,
body.has-cursor textarea,
body.has-cursor select { cursor: none; }
.cursor {
display: block; position: fixed; top: 0; left: 0; z-index: 4000;
width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%;
border: 1.5px solid rgba(195, 235, 81, 0.9);
pointer-events: none; mix-blend-mode: difference;
transition: width 0.25s var(--ease), height 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease);
will-change: transform;
}
.cursor-dot {
display: block; position: fixed; top: 0; left: 0; z-index: 4001;
width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
background: var(--lime); pointer-events: none; will-change: transform;
}
body.cursor-hover .cursor {
width: 66px; height: 66px; margin: -33px 0 0 -33px;
background: rgba(195, 235, 81, 0.16); border-color: var(--lime);
}
} .site-header {
position: fixed; top: 0; left: 0; right: 0; z-index: 1200;
transition: transform 0.4s var(--ease), background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.site-header.is-solid {
background: rgba(246, 242, 234, 0.92);
backdrop-filter: blur(16px);
box-shadow: 0 10px 40px rgba(4, 36, 15, 0.12);
}
.site-header.is-hidden { transform: translateY(-100%); }
.top-strip {
background: var(--deep); color: rgba(255, 255, 255, 0.82);
font-size: 0.85rem;
transition: max-height 0.4s var(--ease), opacity 0.3s var(--ease);
}
.top-strip .container {
display: flex; align-items: center; justify-content: space-between;
gap: 1rem; padding-block: 0.4rem;
}
.top-strip a { color: var(--lime); }
.top-strip__aside { display: flex; align-items: center; gap: 1rem; }
.site-header.is-solid .top-strip { max-height: 0; opacity: 0; overflow: hidden; padding: 0; }
.nav-shell {
display: grid; grid-template-columns: auto 1fr auto;
align-items: center; gap: 1.4rem; padding-block: 0.7rem;
transition: padding 0.4s var(--ease);
}
.brand { display: inline-flex; line-height: 0; }
.brand img { width: 200px; height: auto; transition: width 0.4s var(--ease); filter: drop-shadow(0 6px 16px rgba(0,0,0,0.18)); }
.site-header.is-solid .brand img { width: 154px; }
.primary-nav .menu {
display: flex; align-items: center; gap: 0.4rem;
list-style: none; margin: 0; padding: 0; justify-content: center;
}
.primary-nav .menu a {
position: relative; display: inline-block; padding: 0.5rem 0.85rem;
color: var(--off); font-weight: 600; text-decoration: none; border-radius: 10px;
}
.site-header.is-solid .primary-nav .menu a { color: var(--deep); }
.primary-nav .menu a::after {
content: ""; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 0.35rem;
height: 2px; background: var(--lime-deep); transform: scaleX(0); transform-origin: left;
transition: transform 0.32s var(--ease);
}
.primary-nav .menu a:hover::after,
.primary-nav .menu .current-menu-item > a::after { transform: scaleX(1); }
.nav-social { display: none; }
.header-actions { display: flex; align-items: center; gap: 0.9rem; }
.phone-link {
font-weight: 800; color: var(--off); text-decoration: none; letter-spacing: 0.01em;
}
.site-header.is-solid .phone-link { color: var(--deep); }
.phone-link:hover { color: var(--lime); }
.site-header.is-solid .phone-link:hover { color: var(--forest); } .menu-toggle {
display: none; position: relative; z-index: 1400;
width: 52px; height: 52px; border: 1px solid var(--line-light);
border-radius: 50%; background: rgba(4, 36, 15, 0.4); cursor: pointer;
}
.menu-toggle span {
display: block; position: absolute; left: 14px; right: 14px; height: 2px;
background: var(--off); transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.menu-toggle span:nth-child(1) { top: 19px; }
.menu-toggle span:nth-child(2) { top: 25px; }
.menu-toggle span:nth-child(3) { top: 31px; }
.site-header.is-solid .menu-toggle { background: var(--deep); }
body.menu-open .menu-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
body.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
body.menu-open .menu-toggle { background: var(--deep); } .hero {
position: relative; min-height: 100svh; display: flex; align-items: flex-end;
padding: 0 0 clamp(3rem, 7vw, 6rem); overflow: hidden; color: #fff;
background: var(--ink);
}
.hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__media img {
width: 100%; height: 120%; object-fit: cover;
will-change: transform; transform: scale(1.08);
}
.hero__overlay {
position: absolute; inset: 0; z-index: 1;
background:
linear-gradient(180deg, rgba(4, 36, 15, 0.55) 0%, rgba(4, 36, 15, 0.15) 32%, rgba(4, 36, 15, 0.35) 62%, rgba(4, 22, 10, 0.92) 100%),
radial-gradient(120% 80% at 15% 90%, rgba(4, 36, 15, 0.6), transparent 60%);
}
.hero__inner { position: relative; z-index: 2; width: var(--container-wide); margin-inline: auto; }
.hero__eyebrow { color: var(--lime); }
.hero__title {
margin: 0 0 1.2rem; color: #fff; font-size: clamp(2.7rem, 7.2vw, 7rem);
line-height: 0.98; letter-spacing: -0.025em; text-transform: uppercase;
max-width: 16ch;
}
.hero__line { display: block; overflow: hidden; }
.hero__line > span { display: block; }
.hero__sub {
max-width: 46ch; font-size: clamp(1.1rem, 1.7vw, 1.4rem);
color: rgba(255, 255, 255, 0.9); margin-bottom: 1.8rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.hero__scroll {
position: absolute; z-index: 2; left: 50%; bottom: 1.6rem; transform: translateX(-50%);
display: inline-flex; flex-direction: column; align-items: center; gap: 0.5rem;
color: rgba(255, 255, 255, 0.8); font-size: 0.76rem; letter-spacing: 0.2em; text-transform: uppercase;
}
.hero__scroll .mouse {
width: 26px; height: 42px; border: 1.5px solid rgba(255, 255, 255, 0.6); border-radius: 14px;
position: relative;
}
.hero__scroll .mouse::after {
content: ""; position: absolute; top: 7px; left: 50%; width: 3px; height: 8px;
border-radius: 3px; background: var(--lime); transform: translateX(-50%);
animation: mouseScroll 1.8s var(--ease) infinite;
}
@keyframes mouseScroll { 0% { opacity: 0; transform: translate(-50%, -4px); } 40% { opacity: 1; } 80% { opacity: 0; transform: translate(-50%, 12px); } 100% { opacity: 0; } } [data-reveal] { opacity: 0; transform: translateY(34px); }
[data-reveal].is-in { opacity: 1; transform: none; transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal-line { display: block; overflow: hidden; }
.reveal-line > span { display: block; } body.anim-on .reveal-line > span { transform: translateY(110%); } .manifesto { background: var(--deep); color: rgba(255,255,255,0.9); }
.manifesto .container { padding-block: clamp(1rem, 2vw, 2rem); }
.manifesto__text {
font-family: var(--font-title); font-weight: 600; letter-spacing: -0.02em;
font-size: clamp(1.8rem, 4vw, 3.4rem); line-height: 1.12; color: #fff; max-width: 20ch;
}
.manifesto__text b { color: var(--lime); font-weight: 600; }
.manifesto__grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.manifesto__aside p { color: rgba(255,255,255,0.72); } .stats { background: var(--ink); color: #fff; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.stat { border-left: 2px solid rgba(195, 235, 81, 0.4); padding-left: 1.2rem; }
.stat__num {
font-family: var(--font-title); font-weight: 600; color: var(--lime);
font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1; letter-spacing: -0.03em;
}
.stat__label { color: rgba(255, 255, 255, 0.74); font-size: 0.98rem; margin-top: 0.4rem; } .prestations { background: var(--deep); color: #fff; position: relative; }
.prestations__stage {
display: grid; grid-template-columns: 1fr 1fr;
align-items: start; gap: clamp(1.5rem, 4vw, 4rem);
width: var(--container-wide); margin-inline: auto;
padding-block: clamp(3.5rem, 7vh, 6rem);
}
.prestations__media {
position: sticky; top: 12vh; aspect-ratio: 4 / 5; max-height: 76vh;
border-radius: var(--radius-lg); overflow: hidden;
box-shadow: var(--shadow-lg); background: #06180c;
}
.prestations__frame { position: absolute; inset: 0; opacity: 0; transition: opacity 0.55s var(--ease); }
.prestations__frame img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); }
.prestations__frame.is-active { opacity: 1; }
.prestations__badge {
position: absolute; left: 1.1rem; bottom: 1.1rem; z-index: 3;
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.5rem 0.9rem; border-radius: 999px; font-size: 0.82rem; font-weight: 700;
background: rgba(4, 22, 10, 0.6); color: var(--lime); border: 1px solid rgba(195,235,81,0.35);
backdrop-filter: blur(6px);
}
.prestations__copy { position: relative; }
.prestations__count { font-family: var(--font-title); color: rgba(195,235,81,0.5); font-size: 1.1rem; letter-spacing: 0.2em; }
.prestations__list { list-style: none; margin: 1.2rem 0 0; padding: 0; }
.presta-item { padding: 0.65rem 0; border-top: 1px solid var(--line-light); min-height: 64vh; display: flex; flex-direction: column; justify-content: center; }
.presta-item:last-child { border-bottom: 1px solid var(--line-light); min-height: auto; padding-bottom: 1rem; }
.presta-item h3 {
color: rgba(255,255,255,0.5); font-size: clamp(1.4rem, 2.6vw, 2.1rem);
margin: 0; transition: color 0.4s var(--ease), transform 0.4s var(--ease);
display: flex; align-items: baseline; gap: 0.8rem;
}
.presta-item h3 .idx { font-size: 0.9rem; color: rgba(195,235,81,0.55); font-family: var(--font-body); font-weight: 700; }
.presta-item p { color: rgba(255,255,255,0.0); max-height: 0; overflow: hidden; margin: 0; transition: all 0.4s var(--ease); }
.presta-item.is-active h3 { color: #fff; transform: translateX(6px); }
.presta-item.is-active h3 .idx { color: var(--lime); }
.presta-item.is-active p { color: rgba(255,255,255,0.78); max-height: 8rem; margin-top: 0.5rem; }
.prestations__cta { margin-top: 1.6rem; display: flex; gap: 0.8rem; flex-wrap: wrap; }
.prestations__copy { position: relative; padding-top: 1vh; } .prestations.is-static .prestations__media { position: relative; top: auto; max-height: none; aspect-ratio: 16/10; }
.prestations.is-static .prestations__frame { position: relative; opacity: 1; }
.prestations.is-static .presta-item { min-height: auto; } .service-panels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.service-panel {
position: relative; min-height: 340px; border-radius: var(--radius);
overflow: hidden; box-shadow: var(--shadow-sm); isolation: isolate;
}
.service-panel::before {
content: ""; position: absolute; inset: 0; z-index: -2;
background-image: var(--panel-image, linear-gradient(135deg, var(--forest), var(--deep)));
background-size: cover; background-position: center; transition: transform 0.9s var(--ease);
}
.service-panel::after {
content: ""; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(180deg, rgba(4,36,15,0.05) 30%, rgba(4,22,10,0.9) 100%);
}
.service-panel:hover::before { transform: scale(1.07); }
.service-panel a {
position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end;
height: 100%; min-height: 340px; padding: 1.5rem; color: #fff; text-decoration: none;
}
.service-panel span { font-family: var(--font-title); font-size: 1.5rem; }
.service-panel p { margin: 0.35rem 0 0; color: rgba(255,255,255,0.82); font-size: 0.98rem; }
.service-panel--placeholder::before { background: linear-gradient(135deg, var(--forest), var(--deep)); }
.panel-photo-note { font-size: 0.8rem; opacity: 0.8; } .split-layout { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(1.6rem, 4vw, 3.4rem); align-items: start; }
.rich-content p { color: var(--ink-soft); }
.rich-content > p:first-of-type { margin-top: 0; }
.side-panel {
border: 1px solid var(--line); border-radius: var(--radius);
padding: clamp(1.5rem, 3vw, 2.2rem); background: var(--white); box-shadow: var(--shadow-sm);
position: sticky; top: 110px;
}
.side-panel h2 { font-size: 1.4rem; }
.side-zone { margin: 1rem 0 1.2rem; padding: 0.85rem 1rem; border-radius: 14px; background: rgba(4,36,15,0.06); color: var(--deep); font-size: 0.95rem; }
.side-zone a { font-weight: 700; }
.check-list { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: 0.6rem; }
.check-list li { position: relative; padding-left: 1.7rem; }
.check-list li::before {
content: ""; position: absolute; left: 0; top: 0.55em; width: 12px; height: 8px;
border-left: 2px solid var(--lime-deep); border-bottom: 2px solid var(--lime-deep);
transform: rotate(-45deg);
}
.section-dark .check-list li::before, .prestations .check-list li::before { border-color: var(--lime); } .service-visual { margin-top: clamp(1.5rem, 3vw, 2.6rem); }
.service-visual__img {
width: 100%; max-height: 560px; object-fit: cover;
border-radius: var(--radius-lg); box-shadow: var(--shadow);
} .trees-section .split-layout { align-items: center; } .gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: 0.9rem; }
.gallery-grid figure { margin: 0; overflow: hidden; border-radius: var(--radius); position: relative; }
.gallery-grid figure:nth-child(4n+1) { grid-row: span 2; }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.gallery-grid figure:hover img { transform: scale(1.06); }
body.anim-on .gallery-grid figure { opacity: 0; transform: translateY(26px) scale(0.98); }
.gallery-grid figure.is-in { opacity: 1; transform: none; transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .wood-aside { display: grid; gap: 1rem; }
.wood-aside__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
.wood-facts { display: grid; gap: 0.6rem; }
.wood-facts span { padding: 0.85rem 1rem; border-radius: 14px; background: rgba(4,36,15,0.07); color: var(--deep); font-weight: 700; }
.highlight-price { text-align: left; }
.highlight-price span { color: var(--muted); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.8rem; }
.highlight-price strong { display: block; font-family: var(--font-title); font-size: clamp(2rem,4vw,2.8rem); color: var(--deep); margin: 0.2rem 0 0.6rem; } .reason-grid, .process-grid, .advice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.reason-grid article, .process-grid article, .advice-grid article {
border-radius: var(--radius); padding: 1.6rem; background: var(--white); box-shadow: var(--shadow-sm);
border: 1px solid var(--line);
}
.process-grid span { display: inline-flex; margin-bottom: 0.8rem; color: var(--forest); font-weight: 900; font-family: var(--font-title); font-size: 1.4rem; }
.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
.team-grid article { border-radius: var(--radius); padding: 1.4rem; background: var(--white); box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.team-photo, .team-grid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 16px; margin-bottom: 1rem; }
.feature-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.feature-columns article { border-radius: var(--radius); padding: 1.6rem; background: var(--white); box-shadow: var(--shadow-sm); border: 1px solid var(--line); } .testimonials { display: grid; gap: 1rem; }
.testimonials.wide { grid-template-columns: repeat(3, 1fr); }
.testimonials blockquote {
margin: 0; padding: 1.6rem; border-radius: var(--radius); background: var(--white);
box-shadow: var(--shadow-sm); border: 1px solid var(--line); position: relative;
}
.testimonials blockquote::before {
content: "“"; font-family: var(--font-title); font-size: 3.4rem; line-height: 0.6;
color: var(--lime-deep); display: block; margin-bottom: 0.4rem;
}
.testimonials cite { display: block; margin-top: 0.8rem; font-style: normal; font-weight: 700; color: var(--muted); font-size: 0.9rem; } .zone-section .split-layout { align-items: center; }
.map-card {
border: 1px solid var(--line); border-radius: var(--radius);
padding: clamp(1.5rem, 3vw, 2rem); background: var(--white); box-shadow: var(--shadow-sm);
}
.map-card strong { display: block; margin-bottom: 1rem; color: var(--deep); }
.zone-graphic { position: relative; width: 100%; max-width: 520px; margin-inline: auto; aspect-ratio: 1; }
.zone-graphic svg { width: 100%; height: 100%; overflow: visible; }
.zone-graphic .zone-ring { fill: none; stroke: rgba(31,107,49,0.25); }
.zone-graphic .zone-core { fill: var(--forest); }
.zone-graphic .zone-sector { fill: rgba(31,107,49,0.10); stroke: rgba(31,107,49,0.35); transition: fill 0.4s var(--ease); }
.zone-graphic .zone-sector:hover { fill: rgba(195,235,81,0.28); }
.zone-graphic .zone-label { font-family: var(--font-body); font-weight: 700; font-size: 12px; fill: var(--deep); }
.zone-graphic .zone-core-label { fill: #fff; font-weight: 800; font-size: 15px; }
.zone-graphic .zone-pin { fill: var(--lime); stroke: var(--deep); stroke-width: 1.5; }
.zone-sectors { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.zone-sectors article { border-radius: var(--radius); padding: 1.35rem; background: var(--white); box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.zone-sectors h3 { margin-bottom: 0.5rem; font-size: 1.1rem; }
.zone-sectors p { margin: 0; color: var(--muted); font-size: 0.92rem; } .contact-card { border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem,3vw,2.2rem); background: var(--white); box-shadow: var(--shadow-sm); }
.contact-card p { color: var(--ink-soft); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-grid label { display: grid; gap: 0.35rem; font-weight: 600; color: var(--deep); font-size: 0.95rem; }
.form-grid .span-2 { grid-column: 1 / -1; }
.form-grid .checkbox { grid-template-columns: auto 1fr; align-items: start; gap: 0.6rem; font-weight: 500; color: var(--ink-soft); }
.form-grid .checkbox input { width: auto; margin-top: 0.3rem; }
.hp-field, .hp-input { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; overflow: hidden; }
.form-message { grid-column: 1 / -1; margin: 0; padding: 0.8rem 1rem; border-radius: 12px; background: rgba(198, 40, 40, 0.1); color: #a12020; font-weight: 600; }
.invalid { border-color: #d05050 !important; box-shadow: 0 0 0 3px rgba(208,80,80,0.15); }
.inline-form { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: end; }
.inline-form label { display: grid; gap: 0.3rem; flex: 1 1 220px; font-weight: 600; color: var(--deep); font-size: 0.9rem; } .breadcrumb { padding-top: 118px; background: var(--beige); }
.breadcrumb .container { display: flex; gap: 0.5rem; align-items: center; padding-block: 0.8rem; font-size: 0.9rem; color: var(--muted); }
.breadcrumb a { color: var(--forest); text-decoration: none; } .page-hero {
position: relative; padding: clamp(8rem, 16vh, 12rem) 0 clamp(3rem, 7vw, 5rem);
color: #fff; overflow: hidden; background: var(--deep);
}
.page-hero::before {
content: ""; position: absolute; inset: 0; z-index: 0;
background-image: var(--hero-image); background-size: cover; background-position: center;
transform: scale(1.06);
}
.page-hero::after {
content: ""; position: absolute; inset: 0; z-index: 1;
background: linear-gradient(180deg, rgba(4,36,15,0.55), rgba(4,22,10,0.9));
}
.page-hero--no-image { background: linear-gradient(140deg, var(--deep), var(--forest)); }
.page-hero--no-image::before { display: none; }
.page-hero-inner { position: relative; z-index: 2; max-width: 60ch; }
.page-hero h1 { color: #fff; }
.page-hero p { color: rgba(255,255,255,0.9); font-size: 1.15rem; }
.page-hero .eyebrow { color: var(--lime); }
.page-hero .hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.4rem; }
.photo-note { font-size: 0.85rem; color: rgba(255,255,255,0.7); } .home-hero { position: relative; min-height: 90svh; display: flex; align-items: center; color: #fff; background: var(--deep); }
.hero-trust { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; margin-top: 2rem; }
.hero-trust span { padding: 0.6rem 0.9rem; border: 1px solid var(--line-light); border-radius: 999px; font-size: 0.9rem; } .cta-band { background: var(--ink); color: #fff; padding-block: clamp(3rem, 6vw, 5rem); }
.cta-band-inner { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 2rem; align-items: center; }
.cta-band h2 { color: #fff; }
.cta-band .eyebrow { color: var(--lime); }
.cta-band-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: flex-end; } .trust-bar { background: var(--beige-deep); }
.trust-bar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding-block: 1.4rem; }
.trust-bar-grid div { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; color: var(--deep); font-size: 0.95rem; }
.trust-bar-grid span { color: var(--lime-deep); } .social-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem; }
.social-links--buttons, .social-links--panel { display: grid; gap: 1.35rem; }
.social-links__intro p:last-child, .social-links--panel > p { max-width: 42rem; margin-bottom: 0; opacity: 0.9; }
.social-links__row { display: flex; flex-wrap: wrap; gap: 0.85rem; }
.social-icon { width: 1.05rem; height: 1.05rem; display: block; }
.social-icon-link {
display: inline-flex; align-items: center; justify-content: center;
width: 2.15rem; height: 2.15rem; border-radius: 999px; border: 1px solid transparent;
text-decoration: none; transition: transform 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}
.social-icon-link:hover, .social-icon-link:focus-visible { transform: translateY(-2px); color: #fff; }
.social-icon-link--facebook { color: #1877f2; background: rgba(24,119,242,0.12); border-color: rgba(24,119,242,0.22); }
.social-icon-link--facebook:hover { background: #1877f2; }
.social-icon-link--instagram { color: #e1306c; background: rgba(225,48,108,0.12); border-color: rgba(225,48,108,0.22); }
.social-icon-link--instagram:hover { background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af); }
.social-links--header-top .social-icon-link { width: 1.85rem; height: 1.85rem; color: var(--lime); background: rgba(195,235,81,0.08); border-color: rgba(195,235,81,0.22); }
.social-links--header-top .social-icon-link:hover { color: var(--deep); background: var(--lime); }
.social-links--header .social-icon-link { width: 2.3rem; height: 2.3rem; color: var(--off); background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); }
.site-header.is-solid .social-links--header .social-icon-link { color: var(--forest); background: rgba(4,36,15,0.06); border-color: rgba(4,36,15,0.14); }
.social-btn {
display: inline-flex; align-items: center; gap: 0.75rem; min-height: 3.1rem;
padding: 0.7rem 1.15rem; border-radius: 999px; color: #fff; font-weight: 700;
text-decoration: none; transition: transform 0.2s var(--ease), filter 0.2s var(--ease);
}
.social-btn:hover { transform: translateY(-2px); color: #fff; filter: brightness(1.05); }
.social-btn .social-icon { width: 1.2rem; height: 1.2rem; }
.social-btn--facebook { background: #1877f2; box-shadow: 0 14px 30px rgba(24,119,242,0.24); }
.social-btn--instagram { background: linear-gradient(45deg, #f58529, #dd2a7b 55%, #8134af); box-shadow: 0 14px 30px rgba(221,42,123,0.24); }
.social-btn__copy { display: grid; gap: 0.05rem; line-height: 1.15; }
.social-btn__copy strong { font-size: 0.98rem; }
.social-btn__copy em { font-style: normal; font-size: 0.82rem; font-weight: 500; opacity: 0.88; }
.social-links--panel { border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem,3vw,2.4rem); background: var(--white); box-shadow: var(--shadow-sm); }
.social-links--panel .social-btn { flex: 1 1 240px; justify-content: flex-start; border-radius: 18px; }
.social-links--home, .social-links--footer-band { align-items: end; grid-template-columns: 1.2fr auto; gap: 1.5rem 2rem; }
.social-follow-section { position: relative; overflow: hidden; }
.footer-social-band { border-bottom: 1px solid var(--line-light); padding-block: clamp(1.8rem,4vw,2.6rem); background: linear-gradient(90deg, rgba(195,235,81,0.08), transparent 55%); }
.footer-social-band .eyebrow { color: var(--lime); }
.footer-social-band h2, .footer-social-band .social-links__intro p { color: rgba(255,255,255,0.92); }
.footer-social-compact { margin-top: 1.4rem; }
.footer-social-compact__label { color: rgba(255,255,255,0.62); margin: 0 0 0.65rem; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.social-links--footer .social-icon-link { color: var(--lime); background: rgba(195,235,81,0.1); border-color: rgba(195,235,81,0.24); }
.social-links--footer .social-icon-link--facebook:hover { color: #fff; background: #1877f2; border-color: #1877f2; }
.social-links--footer .social-icon-link--instagram:hover { color: #fff; background: linear-gradient(45deg,#f58529,#dd2a7b,#8134af); border-color: transparent; } .site-footer { background: linear-gradient(160deg, rgba(4,36,15,0.98), rgba(3,20,8,0.99)), var(--deep); color: rgba(255,255,255,0.84); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(1.5rem,4vw,3rem); padding-block: 4rem; }
.footer-logo { width: 180px; margin-bottom: 1rem; filter: brightness(0) invert(1); opacity: 0.92; }
.site-footer h2, .site-footer strong { color: #fff; }
.site-footer h2 { font-family: var(--font-body); font-size: 1rem; letter-spacing: 0.1em; text-transform: uppercase; }
.site-footer a { color: var(--lime); }
.site-footer address { font-style: normal; line-height: 1.9; }
.footer-links { display: grid; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.directions-link { display: inline-block; margin-top: 0.8rem; }
.footer-bottom { border-top: 1px solid var(--line-light); color: rgba(255,255,255,0.7); font-size: 0.9rem; }
.footer-bottom .container { display: flex; justify-content: space-between; gap: 1rem; padding-block: 1.2rem; } .sticky-mobile-cta { display: none; } .menu-overlay-bg {
position: fixed; inset: 0; z-index: 1100; background: var(--deep);
clip-path: circle(0% at calc(100% - 46px) 46px); pointer-events: none;
transition: clip-path 0.6s var(--ease);
}
body.menu-open .menu-overlay-bg { clip-path: circle(150% at calc(100% - 46px) 46px); pointer-events: auto; } .page-transition {
position: fixed; inset: 0; z-index: 3000; background: var(--deep);
transform: translateY(100%); pointer-events: none;
}
.page-transition.is-active { transform: translateY(0); }
.page-transition.is-leaving { transform: translateY(-100%); } .photo-needed { display: grid; place-content: center; gap: 0.4rem; min-height: 260px; border-radius: var(--radius); border: 2px dashed var(--line); background: var(--beige); text-align: center; padding: 1.5rem; }
.photo-needed span { font-weight: 800; color: var(--deep); }
.faq-list { display: grid; gap: 0.7rem; }
.faq-list details { border: 1px solid var(--line); border-radius: 16px; padding: 1rem 1.2rem; background: var(--white); }
.faq-list summary { font-weight: 700; color: var(--deep); cursor: pointer; }
.faq-list details[open] summary { margin-bottom: 0.5rem; } .not-found, .thank-you, .no-hero { padding-top: clamp(9rem, 16vh, 12rem); } @media (max-width: 1024px) {
.prestations__stage { grid-template-columns: 1fr; }
.prestations__media { position: sticky; top: 78px; aspect-ratio: 16/10; max-height: 44vh; width: 100%; margin-inline: auto; }
.presta-item { min-height: 42vh; }
.stats-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.4rem; }
.service-panels, .reason-grid, .process-grid, .advice-grid, .feature-columns, .testimonials.wide { grid-template-columns: repeat(2, 1fr); }
.gallery-grid { grid-template-columns: repeat(3, 1fr); }
.zone-sectors { grid-template-columns: repeat(2, 1fr); }
.footer-grid { grid-template-columns: repeat(2, 1fr); }
.manifesto__grid { grid-template-columns: 1fr; }
.social-links--home, .social-links--footer-band { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
.primary-nav { position: fixed; inset: 0; z-index: 1150; display: flex; flex-direction: column; justify-content: center; padding: 6rem 8vw 3rem; pointer-events: none; opacity: 0; transition: opacity 0.4s var(--ease); }
.primary-nav.is-open { pointer-events: auto; opacity: 1; }
.primary-nav .menu { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
.primary-nav .menu a { color: #fff; font-family: var(--font-title); font-size: clamp(2rem, 8vw, 3.4rem); padding: 0.35rem 0; opacity: 0; transform: translateY(24px); }
.site-header.is-solid .primary-nav .menu a { color: #fff; }
body.menu-open .primary-nav .menu a { opacity: 1; transform: none; transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
body.menu-open .primary-nav .menu li:nth-child(1) a { transition-delay: 0.12s; }
body.menu-open .primary-nav .menu li:nth-child(2) a { transition-delay: 0.17s; }
body.menu-open .primary-nav .menu li:nth-child(3) a { transition-delay: 0.22s; }
body.menu-open .primary-nav .menu li:nth-child(4) a { transition-delay: 0.27s; }
body.menu-open .primary-nav .menu li:nth-child(5) a { transition-delay: 0.32s; }
body.menu-open .primary-nav .menu li:nth-child(6) a { transition-delay: 0.37s; }
body.menu-open .primary-nav .menu li:nth-child(7) a { transition-delay: 0.42s; }
.primary-nav .menu a::after { display: none; }
.nav-social { display: block; margin-top: 2rem; opacity: 0; transition: opacity 0.5s var(--ease) 0.5s; }
body.menu-open .nav-social { opacity: 1; }
.nav-social__label { color: rgba(255,255,255,0.6); font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 0.7rem; }
.menu-toggle { display: block; }
.header-actions { display: none; }
.split-layout, .cta-band-inner, .manifesto__grid { grid-template-columns: 1fr; }
.cta-band-actions { justify-content: flex-start; }
.side-panel { position: static; }
.top-strip { display: none; }
.breadcrumb { padding-top: 92px; }
body { padding-bottom: 70px; }
.sticky-mobile-cta {
display: grid; grid-template-columns: 1fr 1fr 1fr; position: fixed; inset: auto 0 0 0; z-index: 1000;
background: rgba(4,36,15,0.96); backdrop-filter: blur(10px); border-top: 1px solid var(--line-light);
}
.sticky-mobile-cta a { padding: 0.85rem 0.4rem; text-align: center; color: #fff; text-decoration: none; font-weight: 700; font-size: 0.85rem; border-right: 1px solid var(--line-light); }
.sticky-mobile-cta a:last-child { border-right: 0; }
.sticky-mobile-cta a:first-child { background: var(--lime); color: var(--deep); }
}
@media (max-width: 640px) {
body { font-size: 16px; }
.service-panels, .reason-grid, .process-grid, .advice-grid, .feature-columns, .testimonials.wide, .team-grid, .zone-sectors, .footer-grid, .form-grid, .hero-trust, .trust-bar-grid, .gallery-grid { grid-template-columns: 1fr; }
.gallery-grid { grid-auto-rows: 260px; }
.gallery-grid figure:nth-child(4n+1) { grid-row: span 1; }
.footer-bottom .container { flex-direction: column; }
.hero { align-items: center; }
.hero__title { font-size: clamp(2.4rem, 12vw, 3.4rem); }
.stats-grid { grid-template-columns: 1fr 1fr; }
} @media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
[data-reveal] { opacity: 1 !important; transform: none !important; }
.hero__media img { transform: scale(1.02); }
.hero__scroll .mouse::after { animation: none; }
}
body.is-lite .hero__media img { transform: scale(1.02); }
body.is-lite [data-parallax] { transform: none !important; }