/* Greenhills – Dynamic Landscaping · maquette Dreii Design
   Une famille (Manrope variable), palette terre & eau, photos réelles à angles droits.
   Motion : transform/opacity ; entrées qui freinent, sorties qui accélèrent, UI en ressort léger. */

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-var-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 104%;
  ascent-override: 102%;
  descent-override: 29%;
  line-gap-override: 0%;
}

:root {
  /* couleurs réelles (logo, CSS actuel) + proposition DA du brief */
  --lin: #F6F3EC;
  --lin-2: #EEEAE0;
  --surface: #FFFFFF;
  --ink: #1E2B2B;
  --slate: #2B4B4C;
  --muted: #4F5F5D;
  --teal: #308481;
  --action: #2A7774;
  --action-hover: #1F5F5C;
  --sage: #8FA38A;
  --night: #14201F;
  --night-2: #1B2B2A;
  --paper: #EDEAE2;
  --paper-muted: #B9C2BC;
  --teal-light: #5FB3AE;
  --corten-light: #D69066;
  --error: #9C4421;
  --tbd-bg: #FFF1A8;
  --tbd-ink: #3D3100;

  /* rôles (changent par thème de section) */
  --bg: var(--lin);
  --fg: var(--ink);
  --fg-2: var(--muted);
  --link: var(--action-hover);
  --line-art: var(--teal);
  --field: var(--surface);

  /* typo : cinq tailles */
  --font: "Manrope", "Manrope Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-display: clamp(2.75rem, 6.5vw, 6.5rem);
  --fs-h2: clamp(2.125rem, 1.3rem + 3.3vw, 4.25rem);
  --fs-h3: clamp(1.3125rem, 1.12rem + .8vw, 1.875rem);
  --fs-body: clamp(1rem, .96rem + .2vw, 1.125rem);
  --fs-small: .875rem;

  /* espace */
  --gutter: clamp(16px, 4.4vw, 72px);
  --maxw: 1600px;
  --section: clamp(88px, 11vw, 184px);
  --gap: clamp(12px, 1.4vw, 20px);
  --header-h: 68px;

  /* motion (motion-curves) */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.7, 0, .84, 0); /* taste-skill-ignore: sorties en ease-in (règle motion-curves) */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-in: 320ms;
  --dur-out: 200ms;
  --dur-ui: 380ms;

  --season: var(--corten-light);
  color-scheme: light;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --spring: linear(0, .5 7%, .86 15%, 1.04 24%, 1.08 30%, 1.03 40%, .99 52%, 1); }
}
html[data-season="lente"] { --season: #9FC08A; }
html[data-season="zomer"] { --season: var(--teal-light); }
html[data-season="winter"] { --season: #B9C2BC; }

[data-theme="dark"] {
  --bg: var(--night);
  --fg: var(--paper);
  --fg-2: var(--paper-muted);
  --link: var(--teal-light);
  --line-art: var(--teal-light);
  --field: var(--night-2);
  color-scheme: dark;
}
[data-theme="sage"] {
  --bg: var(--sage);
  --fg: var(--ink);
  --fg-2: var(--ink);
  --link: var(--ink);
  --line-art: var(--slate);
}

/* ————————————————————————————————— base */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--lin); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); scroll-padding-bottom: 96px; touch-action: manipulation; }
body {
  margin: 0;
  background: var(--lin);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 420;
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
picture { display: block; }
picture img { background-color: var(--ph, var(--lin-2)); }
h1, h2, h3, p, ul, ol, dl, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:where(a, button, input, textarea, label, summary) { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--teal); color: #fff; }
:focus-visible { outline: 2px solid var(--action); outline-offset: 3px; border-radius: 2px; }
[data-theme="dark"] :focus-visible { outline-color: var(--teal-light); }
html { scrollbar-color: var(--slate) var(--lin-2); }
section, [data-theme] { background: var(--bg); color: var(--fg); }

[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }
.num { font-variant-numeric: tabular-nums; }
.icon { width: 1.25em; height: 1.25em; flex: none; }

.skip { position: fixed; left: 12px; top: 12px; z-index: 200; padding: 12px 18px; background: var(--ink); color: #fff; border-radius: 999px; transform: translateY(-160%); transition: transform var(--dur-out) var(--ease-in); }
.skip:focus { transform: none; transition: transform var(--dur-in) var(--ease-out); }

/* placeholders client — repérables au premier coup d'œil */
.tbd {
  display: inline;
  background: var(--tbd-bg);
  color: var(--tbd-ink);
  font-size: inherit;
  font-weight: 650;
  line-height: 1.5;
  padding: .12em .5em;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  letter-spacing: 0;
  text-transform: none;
}
p.tbd, span.tbd.tbd--block { display: block; padding: .8em 1em; margin-top: 1em; max-width: 60ch; }

/* ————————————————————————————————— typo */
.statement { font-size: var(--fs-h3); line-height: 1.32; font-weight: 450; letter-spacing: -.012em; max-width: 30ch; }
.statement-sm { font-size: var(--fs-body); line-height: 1.55; font-weight: 600; }
/* capitales espacées (hommage Yorkville) : uniquement les lieux */
.place { display: inline-flex; align-items: center; gap: .35em; font-size: var(--fs-small); font-weight: 650; letter-spacing: .12em; text-transform: uppercase; }
.tags { font-weight: 500; color: var(--fg-2); }
.place .icon { width: 1.15em; height: 1.15em; margin-top: -.1em; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .55em;
  color: var(--link); font-weight: 650; text-decoration: none;
  padding-block: .55em; min-height: 44px;
  transition: color var(--dur-in) ease;
}
.link-arrow .icon { transition: transform var(--dur-ui) var(--spring); }
.link-arrow:hover .icon { transform: translateX(5px); }
.link-arrow--light { --link: var(--paper); }
.link-arrow span { text-decoration: underline; text-decoration-color: transparent; }

/* ————————————————————————————————— boutons */
.btn {
  --btn-bg: var(--action); --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 48px; padding: 0 1.5em;
  border: 0; border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 650; font-size: var(--fs-body); letter-spacing: .005em; text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-in) ease, transform 160ms var(--ease-out);
}
.btn .icon { transition: transform var(--dur-ui) var(--spring); }
.btn:hover { --btn-bg: var(--action-hover); }
.btn:hover .icon { transform: translateX(4px); }
.btn:active { transform: scale(.97); }
.btn--sm { min-height: 44px; padding: 0 1.15em; }
.btn--lg { min-height: 56px; padding: 0 1.75em; }
.btn--xl { min-height: 64px; padding: 0 2.25em; }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--fg); box-shadow: inset 0 0 0 1.5px currentColor; } /* taste-skill-ignore: contour du bouton secondaire de la carte */
.btn--ghost:hover { --btn-bg: color-mix(in srgb, var(--fg) 8%, transparent); }
[data-theme="dark"] .btn--primary:hover { --btn-bg: #33908C; }
.btn-text { display: inline-flex; align-items: center; gap: .45em; min-height: 44px; padding: 0 .4em; border: 0; background: none; font-weight: 600; color: var(--fg-2); }
.btn-text:hover { color: var(--fg); }
[data-magnetic] { will-change: auto; }

/* ————————————————————————————————— header */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  height: var(--header-h);
  color: var(--ink);
  transition: transform 420ms var(--ease-out), background-color 300ms ease, color 300ms ease;
}
.site-header::before { /* fond opaque, en fondu */
  content: ""; position: absolute; inset: 0; background: var(--lin);
  opacity: 0; transition: opacity 300ms ease;
}
.site-header.is-solid::before, .site-header:not(.is-over-dark):not(.is-over-image)::before { opacity: 1; }
.site-header.is-hidden { transform: translateY(-100%); transition: transform 260ms var(--ease-in); }
.site-header__bar { position: relative; height: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; gap: 24px; }
.brand { position: relative; display: block; width: 116px; height: 55px; flex: none; margin-right: auto; }
.brand__logo { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 300ms ease; }
.brand__logo--light { opacity: 0; }
.is-over-dark:not(.is-solid) .brand__logo--light { opacity: 1; }
.is-over-dark:not(.is-solid) .brand__logo--color { opacity: 0; }
.is-over-dark:not(.is-solid) { color: var(--paper); }
.site-header.is-over-dark:not(.is-solid)::after { /* voile haut pour lire le logo sur le ciel */
  content: ""; position: absolute; inset: 0 0 -60px 0; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(10, 18, 17, .42), rgba(10, 18, 17, 0)); /* taste-skill-ignore: voile neutre sur photo */
}
/* lien vers l'autre langue : discret, cible de 44 px, n'entre pas en concurrence avec le CTA */
.lang-switch {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-width: 44px; min-height: 44px; margin-right: -6px; border-radius: 999px;
  font-size: var(--fs-small); font-weight: 650; letter-spacing: .04em; text-decoration: none;
  transition: background-color 200ms ease;
}
.lang-switch:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.site-nav, .site-header__cta { display: none; }
.site-nav ul { display: flex; gap: clamp(20px, 2.4vw, 40px); }
.site-nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; font-weight: 560; text-decoration: none; }
.site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 360ms var(--ease-out); }
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }


.menu-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 4px 0 14px; border: 0; border-radius: 999px;
  background: transparent; color: inherit; font-weight: 650;
}
.menu-toggle__bars { position: relative; width: 22px; height: 12px; }
.menu-toggle__bars::before, .menu-toggle__bars::after { content: ""; position: absolute; left: 0; right: 0; height: 1.75px; border-radius: 2px; background: currentColor; transition: transform var(--dur-ui) var(--spring); }
.menu-toggle__bars::before { top: 1px; }
.menu-toggle__bars::after { bottom: 1px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { transform: translateY(4.6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after { transform: translateY(-4.6px) rotate(-45deg); }
.menu-open .site-header { color: var(--ink); }
.menu-open .site-header::before { opacity: 1; transition: none; }
.menu-open .brand__logo--light { opacity: 0 !important; }
.menu-open .brand__logo--color { opacity: 1 !important; }

/* volet opaque qui descend sous l'en-tête : jamais semi-transparent, les liens ne passent jamais sur la page */
.menu {
  position: fixed; inset: 0; z-index: 55;
  display: flex; flex-direction: column; gap: 28px;
  padding: calc(var(--header-h) + 28px) var(--gutter) calc(28px + env(safe-area-inset-bottom));
  background: var(--lin); color: var(--ink); overflow: auto; overscroll-behavior: contain;
  transform: translateY(-100%);
  transition: transform 260ms var(--ease-in);
}
.menu.is-open { transform: none; transition: transform 460ms var(--ease-out); }
.menu__links a { display: block; padding: 6px 0; font-size: var(--fs-h2); font-weight: 330; letter-spacing: -.03em; line-height: 1.15; text-decoration: none; }
.menu__cta { align-self: flex-start; }
.menu__contact { display: grid; gap: 4px; }
.menu__contact a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 600; text-decoration: none; }
.menu__hills { width: min(320px, 70%); margin-top: auto; color: var(--teal); }

@media (min-width: 1024px) {
  :root { --header-h: 84px; }
  .brand { width: 136px; height: 64px; }
  .site-nav, .site-header__cta { display: flex; }
  .menu-toggle, .menu { display: none; }
}

/* ————————————————————————————————— barre CTA mobile / pastille desktop */
.cta-bar {
  position: fixed; z-index: 50; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex; gap: 8px; padding: 6px;
  background: color-mix(in srgb, var(--night) 94%, transparent); color: var(--paper);
  border-radius: 999px;
  box-shadow: 0 10px 30px -10px rgba(10, 18, 17, .5), 0 2px 6px rgba(10, 18, 17, .25); /* taste-skill-ignore: barre CTA flottante (overlay) */
  transform: translateY(calc(100% + 24px)); opacity: 0;
  transition: transform 240ms var(--ease-in), opacity 200ms var(--ease-in);
  pointer-events: none;
}
.cta-bar.is-visible { transform: none; opacity: 1; pointer-events: auto; transition: transform 480ms var(--spring), opacity 260ms var(--ease-out); }
.cta-bar__main { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 999px; background: var(--action); color: #fff; font-weight: 700; text-decoration: none; transition: transform 160ms var(--ease-out); }
.cta-bar__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--paper); background: rgba(237, 234, 226, .1); transition: transform 160ms var(--ease-out); }
.cta-bar a:active { transform: scale(.96); }
@media (min-width: 1024px) {
  .cta-bar { left: auto; right: 28px; bottom: 28px; padding: 6px; }
  .cta-bar__main { padding: 0 26px; }
}

/* ————————————————————————————————— hero (home) : titre sombre dans le ciel, actions sur le reflet de l'eau */
.hero { position: relative; isolation: isolate; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; overflow: clip; background: #DCDFDB; color: var(--ink); }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media picture, .hero__img { width: 100%; height: 100%; }
.hero__img { object-fit: cover; object-position: 50% 0%; }
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  /* exception validée (brief §6bis-1) : l'image est nette dès le premier affichage, le zoom ne démarre qu'après « load » */
  .hero__img { transform: scale(1.05); transform-origin: 50% 80%; }
  .is-loaded .hero__img { transform: scale(1); transition: transform 5s var(--ease-out); }
  /* arrivée par le sélecteur de langue : même photo que la page quittée, le zoom ne recommence pas */
  .kb-off .hero__img, .kb-off.is-loaded .hero__img { transform: none; transition: none; }
}
.hero::after { /* voile neutre sous les actions uniquement */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 18, 17, 0) 58%, rgba(10, 18, 17, .5) 82%, rgba(10, 18, 17, .78) 100%); /* taste-skill-ignore: voile neutre sur photo */
}
.hero__content { padding-top: calc(var(--header-h) + clamp(12px, 3.5vh, 44px)); }
.hero__title { font-size: var(--fs-display); font-weight: 300; line-height: .95; letter-spacing: -.045em; color: var(--ink); max-width: 9ch; }
.hero__lead { margin-top: clamp(14px, 1.6vw, 22px); max-width: 46ch; font-size: max(1.125rem, var(--fs-body)); line-height: 1.5; font-weight: 560; color: var(--ink); }
.hero__bottom { grid-row: 3; display: grid; gap: 18px; padding-bottom: calc(20px + env(safe-area-inset-bottom)); background: none; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; }
.hero__aside { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; }
.rating { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--paper); text-decoration: none; font-size: var(--fs-small); font-weight: 600; }
.rating strong { font-weight: 750; font-variant-numeric: tabular-nums; }
.stars { display: inline-flex; gap: 2px; color: #E8C66A; }
.star { width: 15px; height: 15px; }
.hero__season { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-small); font-weight: 600; color: var(--paper); }
.hero__season::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--season); }
@media (max-width: 767px) and (orientation: portrait) {
  /* téléphone : la photo descend sous le texte (le toit du poolhouse coupait la phrase d'accroche) ;
     la bande du haut reprend la couleur du ciel et un voile clair garde le texte lisible sur petit écran */
  .hero { background: #F0F7F7; }
  .hero__media { top: 13svh; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 56px); mask-image: linear-gradient(180deg, transparent 0, #000 56px); }
  .hero::before { content: ""; position: absolute; inset: 0 0 auto; height: 58%; z-index: -1; pointer-events: none; background: linear-gradient(180deg, #F0F7F7 0%, rgba(240, 247, 247, .82) 62%, rgba(240, 247, 247, 0) 100%); } /* taste-skill-ignore: voile clair sur photo */
}
@media (max-width: 767px) and (orientation: portrait) and (max-height: 700px) {
  .hero__media { top: 24svh; } /* petits téléphones (SE) : la phrase prend plus de place que la hauteur ne le permet */
}
@media (min-width: 1024px) {
  .hero__title { max-width: none; white-space: nowrap; }
  .hero__bottom { grid-template-columns: 1fr auto; align-items: end; padding-bottom: 36px; }
  .hero__aside { flex-direction: column; align-items: flex-end; }
}

/* ————————————————————————————————— preuve */
.proof { padding-block: clamp(36px, 5vw, 64px); background: var(--lin); }
.proof__list { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 20px; }
.proof__list li { display: grid; gap: 2px; align-content: start; }
.proof__list strong { font-size: var(--fs-h3); font-weight: 520; letter-spacing: -.02em; line-height: 1.15; }
.proof__list strong.num { font-weight: 450; letter-spacing: -.02em; color: var(--slate); }
.proof__list span { color: var(--muted); font-size: var(--fs-small); line-height: 1.45; }
@media (max-width: 359px) { .proof__list strong { font-size: 1.125rem; } }
@media (min-width: 1024px) {
  .proof__list { grid-template-columns: .8fr 1fr 1fr 1.2fr; align-items: end; }
}

/* ————————————————————————————————— intro */
.intro { position: relative; padding-block: var(--section) calc(var(--section) * .8); overflow: clip; }
.intro__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); }
.intro__title { grid-column: 1 / -1; grid-row: 1; position: relative; z-index: 2; font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -.035em; font-weight: 340; max-width: 12ch; }
.intro__photo { position: relative; }
.intro__photo img { width: 100%; height: 100%; object-fit: cover; }
.intro__photo figcaption { margin-top: 10px; font-size: var(--fs-small); color: var(--muted); }
.intro__photo--a { grid-column: 3 / -1; grid-row: 2; margin-top: 28px; }
.intro__photo--a picture { aspect-ratio: 4 / 5; }
.intro__photo--a figcaption { padding-left: 2px; }
.intro__text { grid-column: 1 / -1; grid-row: 3; margin-top: 40px; display: grid; gap: 20px; max-width: 62ch; }
.intro__photo--b { grid-column: 1 / 11; grid-row: 4; margin-top: 48px; }
.intro__photo--b picture { aspect-ratio: 4 / 3; }
@media (min-width: 1024px) {
  .intro__photo--b picture { aspect-ratio: 1 / 1; }
  .intro__title { grid-column: 1 / 10; max-width: 11ch; }
  .intro__photo--a { grid-column: 7 / -1; grid-row: 1 / span 3; margin-top: clamp(140px, 13vw, 210px); }
  .intro__text { grid-column: 1 / 6; grid-row: 2; margin-top: 56px; }
  .intro__photo--b { grid-column: 2 / 5; grid-row: 3; margin-top: 72px; }
}

/* sections voisines sur le même fond : les marges ne s'additionnent pas */
.intro + .services, .reviews + .team { padding-top: clamp(32px, 4vw, 72px); }
@media (max-width: 767px) { .proof + .intro { padding-top: 56px; } }

/* ————————————————————————————————— en-têtes de section */
.section-head { display: grid; gap: 16px; margin-bottom: clamp(36px, 5vw, 72px); }
.horizon { margin-bottom: clamp(40px, 6vw, 96px); color: var(--line-art); }
.hills--line { display: block; width: 100%; height: auto; }
.section-head h2 { font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -.035em; font-weight: 340; }
.section-head__lead { max-width: 38ch; font-size: var(--fs-h3); line-height: 1.3; font-weight: 420; color: var(--fg-2); }
@media (min-width: 1024px) {
  .section-head { grid-template-columns: 1fr 1fr; align-items: end; column-gap: var(--gap); }
  .section-head__lead { justify-self: end; text-align: left; }
}

/* ————————————————————————————————— diensten (bento) */
.services { padding-block: var(--section); }
.bento { display: grid; gap: var(--gap); }
.tile { position: relative; min-height: 0; }
.tile__link { position: relative; display: block; height: 100%; color: var(--paper); text-decoration: none; overflow: hidden; background: var(--night); }
.tile__media, .tile__media img { width: 100%; height: 100%; }
.tile__media img { object-fit: cover; transition: transform 900ms var(--ease-out); }
.tile__link::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 18, 17, 0) 22%, rgba(10, 18, 17, .5) 55%, rgba(10, 18, 17, .86) 100%); pointer-events: none; } /* taste-skill-ignore: voile neutre sur photo */
.tile__body { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; display: grid; gap: 8px; padding: clamp(20px, 2.4vw, 36px); }
.tile__title { font-size: var(--fs-h3); line-height: 1.15; font-weight: 520; letter-spacing: -.015em; }
.tile__text { max-width: 40ch; color: var(--paper); line-height: 1.45; }
.tile__quote { font-size: var(--fs-h3); line-height: 1.12; font-weight: 450; letter-spacing: -.02em; max-width: 13ch; }
.tile--quote .tile__title { font-size: var(--fs-small); font-weight: 650; order: 2; }
.tile--quote .tile__quote { order: 1; }
.tile--quote .tile__more { order: 3; }
.tile__more { display: inline-flex; align-items: center; gap: .5em; font-weight: 650; font-size: var(--fs-small); }
.tile__more .icon { transition: transform var(--dur-ui) var(--spring); }
.tile--xl picture, .tile--wide picture, .tile--quote picture { aspect-ratio: 4 / 3; }
.tile--xl picture { aspect-ratio: 4 / 5; }
.tile--tbd .tile__body { position: static; height: 100%; padding: clamp(20px, 2.4vw, 36px); background: var(--lin-2); color: var(--ink); align-content: start; }
.tile--tbd .tile__title { color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .tile__link:hover .tile__media img { transform: scale(1.04); }
  .tile__link:hover .tile__more .icon { transform: translateX(5px); }
}
@media (min-width: 768px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .tile--xl { grid-row: span 2; }
  .tile--xl picture { aspect-ratio: auto; height: 100%; }
  .tile--tbd { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .bento { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, clamp(280px, 34vh, 380px)); }
  .tile--xl { grid-column: 1 / 3; grid-row: 1 / 3; }
  .tile--wide { grid-column: 3 / 5; grid-row: 1; }
  .tile--quote { grid-column: 3; grid-row: 2; }
  .tile--tbd { grid-column: 4; grid-row: 2; }
  .tile picture { aspect-ratio: auto !important; height: 100%; }
}

/* ————————————————————————————————— realisaties uitgelicht (piste) */
.featured { position: relative; padding-top: var(--section); padding-bottom: clamp(56px, 7vw, 96px); overflow: clip; }
.featured__head { display: grid; gap: 14px; margin-bottom: clamp(28px, 4vw, 56px); }
.featured__head h2 { font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -.035em; font-weight: 340; }
.featured__head p { color: var(--fg-2); }
.featured__viewport { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-inline: auto; width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--maxw) - 2 * var(--gutter)); }
.featured__viewport::-webkit-scrollbar { display: none; }
.featured__track { display: flex; gap: clamp(16px, 3vw, 56px); width: max-content; }
.slide { width: min(86vw, 520px); scroll-snap-align: start; flex: none; }
.slide__link { display: grid; gap: 18px; color: var(--paper); text-decoration: none; }
.slide__media { display: block; overflow: hidden; background: var(--night-2); }
.slide__media picture { aspect-ratio: 4 / 5; }
.slide__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.slide__text { display: grid; gap: 8px; max-width: 44ch; }
.slide__title { font-size: var(--fs-h3); line-height: 1.15; font-weight: 500; letter-spacing: -.015em; }
.slide__meta { color: var(--teal-light); }
.slide__meta .place { color: var(--teal-light); }
.slide__excerpt { color: var(--paper-muted); line-height: 1.55; }
.featured__progress { margin-top: 32px; }
.featured__bar { display: block; height: 3px; background: var(--paper); border-radius: 3px; transform-origin: left; transform: scaleX(var(--p, .08)); opacity: .9; }
.featured__progress { position: relative; }
.featured__progress::before { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); top: 0; height: 3px; background: rgba(237, 234, 226, .14); border-radius: 3px; }
@media (hover: hover) and (pointer: fine) {
  .slide__link:hover .slide__media img { transform: scale(1.035); }
}
@media (max-width: 1023px) {
  /* téléphone/tablette : la piste va jusqu'au bord de l'écran et la carte suivante dépasse nettement (avant : 5 px) */
  .featured__viewport { width: 100%; max-width: none; scroll-padding-inline: var(--gutter); }
  .featured__track { padding-inline: var(--gutter); }
  .slide { width: min(78vw, 460px); }
}
@media (min-width: 1024px) {
  .featured__head { grid-template-columns: 1fr auto; align-items: end; column-gap: 48px; }
  .featured__head h2 { grid-column: 1; grid-row: 1; }
  .featured__head p { grid-column: 1; grid-row: 2; }
  .featured__head .link-arrow { grid-column: 2; grid-row: 1 / 3; align-self: end; }
  .slide { width: min(42vw, calc((100vh - 460px) * 1.5)); }
  .slide__media picture { aspect-ratio: 3 / 2; }
  .slide__text { max-width: 34ch; }
  .featured__head { margin-bottom: 32px; }
  .featured.is-pinned { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: 64px; padding-bottom: 48px; }
  .featured.is-pinned .featured__viewport { overflow: hidden; scroll-snap-type: none; }
}

/* ————————————————————————————————— mouvement lié au scroll (desktop, souris) : calculé par le compositeur, aucun JS par image */
@supports (animation-timeline: view()) {
  @media (min-width: 1024px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    /* parallaxe contrôlée du hero : l'image glisse de 12 % pendant que le hero quitte l'écran */
    .hero__media[data-parallax] { animation: hero-drift linear both; animation-timeline: scroll(root); animation-range: 0px 100svh; }
    /* piste des réalisations : section collée, la piste avance sur la hauteur de .featured-pin__run */
    .featured-pin { view-timeline: --featured block; view-timeline-inset: 0px; } /* sans inset, le scroll-padding du header décale le départ */
    .featured-pin > .featured { position: sticky; top: 0; }
    .featured-pin__run { height: var(--pin, 0px); }
    .featured-pin .featured__track,
    .featured-pin .featured__bar { animation: featured-run linear both; animation-timeline: --featured; animation-range: contain 0px contain var(--pin, 0px); }
    .featured-pin .featured__bar { animation-name: featured-bar; }
  }
}
@keyframes hero-drift { to { transform: translateY(12%); } }
@keyframes featured-run { to { transform: translateX(calc(-1 * var(--dist, 0px))); } }
@keyframes featured-bar { from { transform: scaleX(.08); } to { transform: scaleX(1); } }

/* ————————————————————————————————— werkwijze */
.process { padding-block: var(--section); }
.process__media { display: none; }
.step + .step { margin-top: 56px; }
.step__media { margin-bottom: 20px; }
.step__media picture { aspect-ratio: 4 / 3; }
.step__media img, .process__fig img { width: 100%; height: 100%; object-fit: cover; }
.step__media figcaption, .process__fig figcaption { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: var(--fs-small); font-weight: 600; }
.step__title { font-size: var(--fs-h3); font-weight: 560; letter-spacing: -.015em; margin-bottom: 12px; }
.step__text { max-width: 52ch; }
.step__text p + p, .step__text p + ul { margin-top: 14px; }
.ticks { display: grid; gap: 10px; }
.ticks li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.ticks .icon { width: 22px; height: 22px; margin-top: 2px; color: var(--slate); }
.ticks--large { font-size: var(--fs-h3); line-height: 1.3; gap: 18px; max-width: 46ch; }
.ticks--large .icon { width: 28px; height: 28px; color: var(--action); }
.hills-progress { position: relative; display: block; }
.hills--track { width: 100%; color: var(--slate); opacity: .28; }
.hills--progress { position: absolute; inset: 0; width: 100%; color: var(--slate); }
.hills--progress path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0)); }
.hills--progress circle { opacity: 0; }
.process__compare { margin-top: clamp(64px, 8vw, 120px); }
.process__compare-title { font-size: var(--fs-h3); font-weight: 560; letter-spacing: -.015em; margin-bottom: 20px; }
@media (min-width: 1024px) {
  .js .process__steps { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 112px); }
  .js .process__media { display: block; position: sticky; top: calc(var(--header-h) + 4vh); height: calc(100svh - var(--header-h) - 10svh); align-self: start; }
  .js .process__fig { position: absolute; inset: 0 0 92px 0; margin: 0; opacity: 0; transition: opacity 600ms var(--ease-out); }
  .js .process__fig picture { height: calc(100% - 34px); }
  .js .process__fig.is-active { opacity: 1; }
  .js .process__fig.is-active img { animation: fig-in 1.1s var(--ease-out); }
  .js .process__progress { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 180px 1fr; align-items: end; gap: 24px; }
  .js .process__labels { display: flex; gap: 22px; font-size: var(--fs-small); font-weight: 650; }
  .js .process__labels li { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; transition: color 300ms ease; }
  .js .process__labels li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0; transform: scale(.4); transition: opacity 200ms var(--ease-out), transform 380ms var(--spring); }
  .js .process__labels li.is-active { font-weight: 750; }
  .js .process__labels li.is-active::before { opacity: 1; transform: none; }
  .js .step { min-height: 60svh; display: flex; align-items: center; }
  .js .step + .step { margin-top: 0; }
  .js .step__media { display: none; }
  .js .step__text { padding-block: 32px; }
}
@keyframes fig-in { from { transform: scale(1.06); } to { transform: none; } }

/* comparateur 3D ↔ réalisation (désactivé tant que la photo manque) */
.compare { max-width: 1100px; }
.compare__stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--lin-2); }
.compare__after { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px 24px 24px 52%; background: var(--tbd-bg); }
.compare__after .tbd { margin: 0; padding: 0; background: none; }
.compare__before { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); }
.compare__before picture, .compare__before img { width: 100%; height: 100%; }
.compare__before img { object-fit: cover; }
.compare__label { position: absolute; top: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(20, 32, 31, .82); color: var(--paper); font-size: var(--fs-small); font-weight: 650; }
.compare__label .icon { width: 16px; height: 16px; }
.compare__label--before { left: 14px; }
.compare__label--after { left: calc(50% + 14px); background: rgba(61, 49, 0, .85); }
.compare__handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--paper); }
.compare__handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: var(--paper); box-shadow: 0 2px 10px rgba(0, 0, 0, .25); } /* taste-skill-ignore: poignée du comparateur (contrôle flottant) */
.compare__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.compare__range:disabled { cursor: not-allowed; }
.compare__caption { margin-top: 12px; font-size: var(--fs-small); color: var(--fg-2); max-width: 60ch; }
@media (max-width: 639px) {
  .compare__stage { aspect-ratio: 4 / 5; }
  .compare__after { padding: 64px 14px 20px 52%; place-items: start; }
  .compare__after .tbd { font-size: var(--fs-small); line-height: 1.45; }
}

/* ————————————————————————————————— avis (marquee) */
.reviews { padding-block: var(--section); overflow: clip; }
.reviews__head { display: grid; gap: 14px; align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
.reviews__head h2 { font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -.035em; font-weight: 340; }
.reviews__summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; color: var(--fg-2); }
.reviews__summary .stars { color: #C79A1E; }
.reviews__summary a { color: var(--link); font-weight: 650; }
.marquee-toggle { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border: 0; border-radius: 999px; background: var(--lin-2); font-weight: 600; font-size: var(--fs-small); transition: transform 160ms var(--ease-out); }
.marquee-toggle:active { transform: scale(.96); }
.marquee-toggle .icon { width: 18px; height: 18px; }
.marquee-toggle .icon--play { display: none; }
.marquee-toggle[aria-pressed="true"] .icon--play { display: block; }
.marquee-toggle[aria-pressed="true"] .icon--pause { display: none; }
.marquee { display: grid; gap: 16px; }
.marquee__row { display: flex; width: max-content; animation: marquee 90s linear infinite; }
.marquee__row[data-dir="-1"] { animation-direction: reverse; animation-duration: 110s; }
.marquee__track { display: flex; align-items: stretch; gap: 16px; padding-right: 16px; }
.marquee:hover .marquee__row, .marquee:focus-within .marquee__row, .marquee.is-paused .marquee__row { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.review { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; width: min(84vw, 400px); padding: 26px 28px; background: var(--surface); }
.reviews__long { display: grid; gap: var(--gap); margin-top: clamp(40px, 5vw, 72px); }
.review--read { width: auto; padding: clamp(24px, 3vw, 44px); }
.review--read blockquote p { max-width: 62ch; }
@media (min-width: 1024px) { .reviews__long { grid-template-columns: 1fr 1fr; } }
.review blockquote p { line-height: 1.6; }
.review--xs { width: min(84vw, 420px); }
.review--xs blockquote p { font-weight: 600; }
.review--s { width: min(84vw, 360px); }
.review--m { width: min(84vw, 460px); }
.review--l { width: min(86vw, 600px); }
.review__by { display: grid; gap: 8px; font-size: var(--fs-small); }
.review__by cite { display: block; font-style: normal; font-weight: 700; }
.review__score { font-weight: 700; color: var(--slate); font-variant-numeric: tabular-nums; }
.review__meta { display: block; color: var(--muted); }
.marquee.is-held .marquee__row { animation-play-state: paused; } /* doigt posé = on lit */
@media (max-width: 767px) {
  /* mobile : avis courts qui défilent seuls, les deux rangées en sens inverse */
  .reviews { padding-block: 56px; }
  .reviews__head { grid-template-columns: 1fr auto; gap: 10px 12px; margin-bottom: 24px; }
  .reviews__head h2 { grid-column: 1 / -1; }
  .marquee-toggle { justify-self: end; padding-right: 14px; }
  .marquee, .marquee__track { gap: 12px; }
  .marquee__track { padding-right: 12px; }
  .marquee__row { animation-duration: 48s; }
  .marquee__row[data-dir="-1"] { animation-duration: 58s; }
  .review, .review--xs, .review--s, .review--m, .review--l { width: min(74vw, 290px); }
  .review { justify-content: flex-start; gap: 14px; padding: 18px 20px; }
  .review blockquote p { font-size: .9375rem; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
  .review__by { gap: 2px; font-size: .8125rem; }
  /* les deux longs avis : une rangée qu'on fait glisser au doigt */
  .reviews__long { display: flex; gap: 12px; margin-top: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .reviews__long::-webkit-scrollbar { display: none; }
  .reviews__long .review--read { flex: 0 0 min(84vw, 360px); padding: 20px 22px; scroll-snap-align: start; }
  .review--read blockquote p { -webkit-line-clamp: 8; line-clamp: 8; }
}
@media (min-width: 1024px) {
  .reviews__head { grid-template-columns: 1fr auto auto; column-gap: 32px; }
  .marquee-toggle { justify-self: end; }
}

/* ————————————————————————————————— équipe */
.team { padding-block: var(--section); }
.team__grid { display: grid; gap: 32px; }
.team__title { font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -.035em; font-weight: 340; max-width: 20ch; }
.person { display: grid; gap: 14px; align-content: start; }
.person__photo { display: block; position: relative; overflow: hidden; background: var(--lin-2); }
.person__photo picture { aspect-ratio: 4 / 5; }
.person__photo img { width: 100%; height: 100%; object-fit: cover; }
[data-shutter="hill"] .person__photo { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 125' preserveAspectRatio='none'%3E%3Cpath d='M0 125V30C12 24 26 8 46 3c14-3 30 2 41 11 6 5 10 10 13 15v96z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 125' preserveAspectRatio='none'%3E%3Cpath d='M0 125V30C12 24 26 8 46 3c14-3 30 2 41 11 6 5 10 10 13 15v96z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.person figcaption { display: grid; gap: 2px; }
.person figcaption strong { font-weight: 700; }
.person figcaption span:not(.tbd) { color: var(--muted); }
.person figcaption .tbd { justify-self: start; }
.person__photo--empty { display: grid; place-items: center; aspect-ratio: 4 / 5; padding: 24px; background: var(--tbd-bg); }
.person__photo--empty .tbd { background: none; padding: 0; }
.team__quote p { font-size: var(--fs-h3); line-height: 1.3; font-weight: 420; letter-spacing: -.012em; max-width: 26ch; }
.team__quote footer { margin-top: 14px; color: var(--muted); font-size: var(--fs-small); }
.team__more { grid-column: 1 / -1; }
.person:first-of-type { width: min(100%, 420px); }
.person--tbd { width: min(72%, 300px); margin-left: auto; }
@media (min-width: 1024px) {
  .team__grid { grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); row-gap: 48px; }
  .team__title { grid-column: 1 / 10; grid-row: 1; }
  .person:first-of-type { grid-column: 1 / 6; grid-row: 2 / span 2; width: auto; }
  .team__quote { grid-column: 7 / 13; grid-row: 2; align-self: start; padding-top: 40px; }
  .person--tbd { grid-column: 8 / 11; grid-row: 3; width: auto; margin: 0; }
}

/* ————————————————————————————————— appel final */
.closing { position: relative; padding-block: clamp(96px, 11vw, 176px); text-align: center; overflow: clip; }
.closing__inner { display: grid; justify-items: center; gap: 24px; }
.closing__hills { width: clamp(200px, 30vw, 380px); color: var(--teal-light); margin-bottom: 12px; }
.closing__title { font-size: var(--fs-display); font-weight: 300; line-height: .98; letter-spacing: -.045em; max-width: 12ch; }
.closing__season { display: inline-flex; align-items: center; gap: 10px; color: var(--paper-muted); font-weight: 560; }
.closing__season::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--season); }
.closing .btn { margin-top: 12px; }
.closing__alt { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; }
.closing__alt a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--paper); font-weight: 600; text-decoration: none; }
.closing__alt a:hover { text-decoration: underline; }

.cta-band { padding-block: clamp(88px, 10vw, 160px); }
.cta-band__inner { display: grid; gap: 22px; }
.cta-band__hills { width: clamp(160px, 18vw, 260px); color: var(--teal-light); }
.cta-band__title { font-size: var(--fs-h2); font-weight: 320; line-height: 1.02; letter-spacing: -.035em; }
.cta-band__note { color: var(--fg-2); max-width: 46ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.cta-band__alt { color: var(--fg-2); }
.cta-band__alt a { color: var(--paper); font-weight: 600; white-space: nowrap; }
@media (min-width: 1024px) {
  .cta-band__inner { grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: end; }
  .cta-band__hills { grid-column: 1 / 5; }
  .cta-band__title { grid-column: 1 / 8; grid-row: 2; }
  .cta-band__note { grid-column: 1 / 8; }
  .cta-band__actions { grid-column: 8 / 13; grid-row: 2; display: grid; justify-items: start; gap: 14px; }
}

/* ————————————————————————————————— footer */
.site-footer { position: relative; isolation: isolate; overflow: clip; color: var(--paper); background: var(--night); }
.site-footer__media { position: absolute; inset: 0; z-index: -1; }
.site-footer__media picture, .site-footer__media img { width: 100%; height: 100%; }
.site-footer__media img { object-fit: cover; object-position: 50% 55%; }
.site-footer__media::after { content: ""; position: absolute; inset: 0; background: rgba(20, 32, 31, .78); }
.site-footer__inner { display: grid; gap: 48px; padding-top: clamp(64px, 8vw, 112px); padding-bottom: calc(96px + env(safe-area-inset-bottom)); min-height: min(100svh, 920px); align-content: space-between; }
.site-footer__top { display: grid; gap: 32px; }
.site-footer__links { display: grid; gap: 2px; }
.site-footer__links a { display: inline-flex; align-items: center; min-height: 40px; font-weight: 600; text-decoration: none; }
.site-footer__links a:hover { text-decoration: underline; }
.site-footer__address { font-style: normal; line-height: 1.75; color: var(--paper); }
.site-footer__address a { color: var(--paper); }
.site-footer__label { font-size: var(--fs-small); font-weight: 650; color: var(--paper-muted); }
.site-footer__more { display: grid; gap: 18px; align-content: start; }
.site-footer__social { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.site-footer__social a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; text-decoration: none; }
.site-footer__wordmark img { width: 100%; height: auto; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: var(--fs-small); color: var(--paper-muted); }
.site-footer__legal a { color: var(--paper-muted); }
@media (min-width: 1024px) {
  .site-footer__inner { padding-bottom: 40px; }
  .site-footer__top { grid-template-columns: 1fr 1.4fr 1fr; }
}
.greenman { position: absolute; z-index: 2; right: clamp(16px, 8vw, 140px); bottom: 0; width: 150px; pointer-events: none; transform: translateY(105%) rotate(4deg); transition: transform 300ms var(--ease-in); }
.greenman img { width: 100%; height: auto; background: none; }
.greenman__bubble { position: absolute; right: 92%; top: 6%; width: max-content; max-width: 200px; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--paper); color: var(--ink); font-size: var(--fs-small); font-weight: 650; opacity: 0; transform: scale(.9); transform-origin: bottom right; transition: opacity 160ms var(--ease-in), transform 160ms var(--ease-in); }
.site-footer.is-peeking .greenman { transform: translateY(38%) rotate(-3deg); transition: transform 700ms var(--spring); }
.site-footer.is-peeking .greenman__bubble { opacity: 1; transform: none; transition: opacity 260ms var(--ease-out) 260ms, transform 420ms var(--spring) 260ms; }

/* signature Dreii Design : la dernière ligne du site ; au survol les trois équerres s'écartent et le losange prend le bordeaux Dreii */
.dreii { margin-top: clamp(20px, 2.5vw, 32px); }
.dreii-sign { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; color: var(--paper); text-decoration: none; }
.dreii-sign__mark { flex: none; width: 40px; height: 40px; overflow: visible; }
.dreii-sign__mark path { transition: transform 550ms var(--ease-out), fill 300ms ease; }
.dreii-sign__text { display: flex; flex-direction: column; }
.dreii-sign__label { font-size: var(--fs-small); color: var(--paper-muted); }
.dreii-sign__name { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 1.125rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; }
.dreii-sign__arrow { width: .7em; height: .7em; opacity: .6; transition: transform 450ms var(--ease-out), opacity 300ms ease; }
.dreii-sign:is(:hover, :focus-visible) .dreii-q1 { transform: translate(3px, -3px); }
.dreii-sign:is(:hover, :focus-visible) .dreii-q2 { transform: translate(1.5px, -1.5px); transition-delay: 40ms; }
.dreii-sign:is(:hover, :focus-visible) .dreii-q3 { transform: translate(.5px, -.5px); transition-delay: 80ms; }
.dreii-sign:is(:hover, :focus-visible) .dreii-gem { transform: translate(-1.5px, 1.5px); fill: #C8243C; }
.dreii-sign:is(:hover, :focus-visible) .dreii-sign__name { text-decoration: underline; text-underline-offset: 4px; }
.dreii-sign:is(:hover, :focus-visible) .dreii-sign__arrow { transform: translate(2px, -2px); opacity: 1; }

/* le même Green Man passe la tête sur l'accueil, une fois par visite, quelques secondes (vacatures) */
.peek { position: fixed; z-index: 45; left: 0; bottom: 0; display: flex; align-items: flex-start; text-decoration: none; color: var(--ink); pointer-events: none; }
.peek__man { display: block; width: 132px; transform: translate(-30%, 105%) rotate(18deg); transform-origin: 50% 100%; transition: transform 320ms var(--ease-in); }
.peek__man img { width: 100%; height: auto; background: none; }
.peek__bubble { align-self: flex-start; margin: 30px 0 0 -34px; width: max-content; max-width: 190px; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: var(--paper); font-size: var(--fs-small); font-weight: 650; box-shadow: 0 8px 24px -10px rgba(10, 18, 17, .45); opacity: 0; transform: scale(.85); transform-origin: bottom left; transition: opacity 140ms var(--ease-in), transform 160ms var(--ease-in); } /* taste-skill-ignore: bulle flottante (overlay) */
.peek.is-out { pointer-events: auto; }
.peek.is-out .peek__man { transform: translate(-30%, 22%) rotate(6deg); transition: transform 760ms var(--spring); }
.peek.is-out .peek__bubble { opacity: 1; transform: none; transition: opacity 240ms var(--ease-out) 300ms, transform 460ms var(--spring) 300ms; }
.peek:hover .peek__bubble { text-decoration: underline; }
@media (max-width: 1023px) {
  /* téléphone / tablette : il se penche depuis le bord gauche, au-dessus de la barre d'action */
  .peek { bottom: calc(96px + env(safe-area-inset-bottom)); }
  .peek__man { width: 104px; transform: translate(-100%, 0) rotate(52deg); transform-origin: 0 100%; }
  .peek.is-out .peek__man { transform: translate(-24%, 0) rotate(14deg); }
  .peek__bubble { margin: -6px 0 0 -6px; }
}
@media (min-width: 1024px) { .peek { left: clamp(16px, 4vw, 64px); } .peek__man { width: 150px; } }

/* ————————————————————————————————— en-tête de page claire */
.page-head { padding-top: calc(var(--header-h) + clamp(40px, 7vw, 112px)); padding-bottom: clamp(24px, 3vw, 40px); display: grid; gap: 20px; }
.page-realisaties .page-head { padding-top: calc(var(--header-h) + clamp(32px, 5vw, 72px)); }
.page-head__title { font-size: var(--fs-display); font-weight: 300; line-height: .95; letter-spacing: -.045em; }
.page-head__lead { max-width: 52ch; font-size: max(1.125rem, var(--fs-body)); font-weight: 520; color: var(--slate); }
@media (min-width: 1024px) {
  .page-head { grid-template-columns: 1fr minmax(0, 40ch); align-items: end; column-gap: var(--gap); }
}

/* ————————————————————————————————— filtres */
.filters { padding-top: 8px; padding-bottom: 8px; }
.filters__group { position: relative; display: flex; flex-wrap: wrap; gap: 4px 6px; margin-left: -14px; }
.filter { position: relative; display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; font-weight: 600; color: var(--muted); transition: color 200ms ease, background-color 200ms ease, transform 160ms var(--ease-out); }
.filter:hover { color: var(--ink); background: var(--lin-2); }
.filter:active { transform: scale(.96); }
.filter[aria-pressed="true"] { color: var(--ink); }
.filter__count { font-size: var(--fs-small); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); }
.filters__indicator { position: absolute; left: 0; top: 0; width: 100px; height: 3px; border-radius: 3px; background: var(--action); transform-origin: left; transform: translate(var(--x, 0), var(--y, 40px)) scaleX(var(--s, .5)); opacity: 0; transition: transform 460ms var(--spring), opacity 200ms ease; pointer-events: none; }
.filters__indicator.is-ready { opacity: 1; }
.filters__status { margin-top: 6px; font-size: var(--fs-small); color: var(--muted); font-weight: 600; }
@media (max-width: 767px) {
  /* téléphone : une seule rangée qu'on fait glisser, au lieu de 4 lignes de longueurs inégales */
  .filters__group { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: calc(var(--gutter) - 14px) 32px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
  .filters__group::-webkit-scrollbar { display: none; }
}

/* ————————————————————————————————— grille réalisations (tirages de tailles inégales) */
.gallery { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); row-gap: clamp(32px, 4vw, 56px); padding-top: clamp(24px, 3vw, 40px); padding-bottom: calc(var(--section) * .6); align-items: start; }
.card { grid-column: 1 / -1; }
.card[hidden] { display: none; }
.card__link { display: grid; gap: 12px; text-decoration: none; color: var(--ink); }
.card__media { position: relative; display: block; overflow: hidden; background: var(--lin-2); }
.card__media picture { aspect-ratio: 4 / 3; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.card__media::after { content: ""; position: absolute; inset: 0; background: rgba(20, 32, 31, .14); opacity: 0; transition: opacity 400ms ease; pointer-events: none; }
.card__title { font-size: var(--fs-h3); line-height: 1.2; font-weight: 520; letter-spacing: -.015em; }
.card__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; }
.card__meta .place { color: var(--slate); }
.card__meta .tags { color: var(--slate); }
.card__ext { display: inline-flex; align-items: center; gap: 6px; color: var(--link); }
.badge-3d { position: absolute; z-index: 1; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 10px; border-radius: 999px; background: rgba(20, 32, 31, .86); color: var(--paper); font-size: var(--fs-small); font-weight: 700; }
.badge-3d .icon { width: 16px; height: 16px; }
.badge-partner { padding-left: 12px; }
@media (hover: hover) and (pointer: fine) {
  .card__link:hover .card__media img { transform: scale(1.04); }
  .card__link:hover .card__media::after { opacity: 1; }
}
@media (max-width: 639px) {
  /* téléphone : lieu puis types sur deux lignes, sur toutes les cartes */
  .card__meta { flex-direction: column; align-items: flex-start; gap: 4px; }
}
@media (min-width: 640px) {
  .card, .card:nth-child(n) { width: auto; margin: 0; grid-column: span 6; }
  .card[data-size="xl"] { grid-column: 1 / -1; }
  .card[data-size="xl"] .card__media picture { aspect-ratio: 16 / 9; }
  .card[data-size="t"] .card__media picture { aspect-ratio: 4 / 5; }
}
@media (min-width: 1024px) {
  .card[data-size="xl"] { grid-column: span 7; }
  .card[data-size="xl"] .card__media picture { aspect-ratio: 3 / 2; }
  .card[data-size="m"] { grid-column: span 5; }
  .card[data-size="m"] .card__media picture { aspect-ratio: 1 / 1; }
  .card[data-size="s"] { grid-column: span 4; }
  .card[data-size="s"] .card__media picture { aspect-ratio: 5 / 4; }
  .card[data-size="t"] { grid-column: span 4; margin-top: clamp(24px, 3vw, 40px); }
  .card[data-size="t"] .card__media picture { aspect-ratio: 1 / 1; }
}

/* ————————————————————————————————— page projet */
.read-progress { position: fixed; z-index: 70; left: 0; right: 0; top: 0; height: 3px; background: var(--teal); transform-origin: left; transform: scaleX(0); pointer-events: none; }
@supports (animation-timeline: scroll()) {
  .read-progress { animation: read-progress linear both; animation-timeline: scroll(root); }
  @keyframes read-progress { to { transform: scaleX(1); } }
}
.p-hero, .s-hero { position: relative; isolation: isolate; min-height: 86svh; display: grid; align-items: end; overflow: clip; }
.p-hero__media, .s-hero__media { position: absolute; inset: 0; z-index: -2; }
.p-hero__media picture, .p-hero__media img, .s-hero__media picture, .s-hero__media img { width: 100%; height: 100%; }
.p-hero__media img, .s-hero__media img { object-fit: cover; }
.p-hero::after, .s-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 18, 17, 0) 40%, rgba(10, 18, 17, .3) 62%, rgba(10, 18, 17, .84) 100%); pointer-events: none; } /* taste-skill-ignore: voile neutre sur photo */
@media (max-width: 767px) {
  /* téléphone : le voile monte plus haut pour couvrir tout le bloc titre, quel que soit le cadrage */
  .p-hero::after, .s-hero::after { background: linear-gradient(180deg, rgba(10, 18, 17, 0) 28%, rgba(10, 18, 17, .55) 52%, rgba(10, 18, 17, .9) 100%); } /* taste-skill-ignore: voile neutre sur photo */
  .p-hero__img, .s-hero__img { object-position: var(--pos-m, 50% 50%); }
}
.p-hero__content, .s-hero__content { padding-top: calc(var(--header-h) + 24vh); padding-bottom: clamp(32px, 5vw, 64px); display: grid; gap: 18px; }
.p-hero__title, .s-hero__title { font-size: var(--fs-display); font-weight: 300; line-height: .96; letter-spacing: -.045em; max-width: 14ch; }
.p-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; color: var(--paper); font-weight: 560; font-size: max(1.125rem, var(--fs-body)); }
.p-hero__meta .tags { color: var(--paper); }
.p-hero__meta .badge-3d { position: static; }
.s-hero__lead { max-width: 36ch; font-size: var(--fs-h3); line-height: 1.3; font-weight: 420; }
.back-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--muted); font-weight: 600; text-decoration: none; }
.back-link:hover { color: var(--ink); }
.back-link .icon { transition: transform var(--dur-ui) var(--spring); }
.back-link:hover .icon { transform: translateX(-4px); }
.p-story { padding-top: clamp(28px, 3vw, 48px); padding-bottom: clamp(80px, 8vw, 120px); display: grid; gap: 28px; }
.p-story__text { display: grid; gap: 22px; max-width: 64ch; }
.p-story__text .statement { max-width: 32ch; }
.facts { display: grid; gap: 14px; align-content: start; }
.facts > div { display: grid; grid-template-columns: 9rem 1fr; gap: 12px; align-items: baseline; }
@media (min-width: 640px) and (max-width: 1023px) { .facts { grid-template-columns: repeat(3, auto); justify-content: start; column-gap: 40px; } .facts > div { display: block; } }
.facts dt { font-size: var(--fs-small); font-weight: 650; color: var(--muted); }
.facts dd { margin: 4px 0 0; font-weight: 560; }
@media (min-width: 1024px) {
  .p-story { grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); }
  .p-story .back-link { grid-column: 1 / -1; }
  .p-story__text { grid-column: 1 / 8; }
  .facts { grid-column: 9 / 13; padding-top: 10px; }
  .facts > div { display: block; }
}
.p-note { padding-bottom: clamp(40px, 5vw, 72px); }
.p-note__inner { display: grid; gap: 10px; max-width: 70ch; padding: clamp(20px, 2.5vw, 32px); background: var(--lin-2); }
.p-note__title { display: flex; align-items: center; gap: 10px; font-size: var(--fs-h3); font-weight: 560; letter-spacing: -.015em; }
.p-gallery { padding-bottom: var(--section); }
.p-gallery__title, .p-compare__title, .related__title { font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -.035em; font-weight: 340; margin-bottom: clamp(24px, 3vw, 48px); }
.shots { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(14px, 2vw, 28px) var(--gap); align-items: start; }
.shot { grid-column: 1 / -1; }
@media (max-width: 1023px) {
  /* téléphone/tablette : une photo pleine largeur puis deux côte à côte (au lieu de décalages qui semblaient accidentels) */
  .shot:nth-child(3n + 2) { grid-column: 1 / 7; }
  .shot:nth-child(3n + 3) { grid-column: 7 / -1; }
  .shot:nth-child(3n + 2) .shot__btn picture, .shot:nth-child(3n + 3) .shot__btn picture { aspect-ratio: 4 / 5; }
  .shot:nth-child(3n + 2):last-child { grid-column: 1 / -1; }
  .shot:nth-child(3n + 2):last-child .shot__btn picture { aspect-ratio: 3 / 2; }
}
.shot__btn { display: block; width: 100%; padding: 0; border: 0; background: var(--lin-2); overflow: hidden; cursor: zoom-in; }
.shot__btn picture { aspect-ratio: 3 / 2; }
.shot[data-shape="port"] .shot__btn picture { aspect-ratio: 4 / 5; }
.shot__btn img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .shot__btn:hover img { transform: scale(1.03); } }
@media (min-width: 1024px) {
  .shot:nth-child(5n + 1) { grid-column: 1 / 8; }
  .shot:nth-child(5n + 2) { grid-column: 8 / 13; margin-top: clamp(48px, 8vw, 140px); }
  .shot:nth-child(5n + 3) { grid-column: 2 / 7; }
  .shot:nth-child(5n + 4) { grid-column: 7 / 13; margin-top: clamp(24px, 4vw, 64px); }
  .shot:nth-child(5n + 5) { grid-column: 1 / -1; }
  .shot:nth-child(5n + 5) .shot__btn picture { aspect-ratio: 21 / 9; }
  .shot:nth-child(5n + 2) .shot__btn picture { aspect-ratio: 4 / 5; }
}
.p-compare { padding-bottom: var(--section); }
.related { padding-bottom: var(--section); }
.related__list { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); row-gap: 40px; }
.related__list .card, .related__list .card:nth-child(n) { grid-column: 1 / -1; width: auto; margin: 0; }
.related > .link-arrow { margin-top: 32px; }
@media (min-width: 640px) { .related__list .card, .related__list .card:nth-child(n) { grid-column: span 6; } }
@media (min-width: 1024px) {
  .related__list .card, .related__list .card:nth-child(n) { grid-column: span 4; }
  .related__list .card:nth-child(3n + 2) { margin-top: 64px; }
}
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); padding-bottom: clamp(48px, 6vw, 96px); }
.pager__link { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 18px 0; color: var(--ink); text-decoration: none; font-weight: 560; line-height: 1.3; }
.pager__link--next { justify-content: flex-end; text-align: right; }
.pager__label { display: block; font-size: var(--fs-small); font-weight: 650; color: var(--muted); }
.pager__link .icon { flex: none; transition: transform var(--dur-ui) var(--spring); }
.pager__link:hover .icon { transform: translateX(4px); }
.pager__link:not(.pager__link--next):hover .icon { transform: translateX(-4px); }

/* ————————————————————————————————— lightbox */
.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #0D1615; color: var(--paper); overflow: hidden; overscroll-behavior: contain; }
.lightbox::backdrop { background: rgba(8, 14, 13, .9); }
.lightbox[open] { animation: lb-in 260ms var(--ease-out); }
.lightbox.is-closing { animation: lb-out 180ms var(--ease-in) forwards; }
@keyframes lb-in { from { opacity: 0; transform: scale(.985); } }
@keyframes lb-out { to { opacity: 0; transform: scale(.985); } }
.lightbox__stage { position: absolute; inset: 64px 0 76px; display: grid; place-items: center; touch-action: pan-y; }
.lightbox__stage picture { width: 100%; height: 100%; }
.lightbox__stage img { width: 100%; height: 100%; object-fit: contain; background: none; transition: transform 300ms var(--ease-out), opacity 200ms ease; }
.lightbox__stage.is-dragging img { transition: none; }
.lightbox__caption { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 18px; display: flex; justify-content: space-between; gap: 20px; font-size: var(--fs-small); color: var(--paper-muted); }
.lightbox__count { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--paper); flex: none; }
.lightbox__btn { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(237, 234, 226, .12); color: var(--paper); transition: background-color 200ms ease, transform 160ms var(--ease-out); }
.lightbox__btn:hover { background: rgba(237, 234, 226, .22); }
.lightbox__btn:active { transform: scale(.96); }
.lightbox__close { top: 10px; right: 12px; }
.lightbox__prev { left: 12px; top: 50%; margin-top: -24px; }
.lightbox__next { right: 12px; top: 50%; margin-top: -24px; }
@media (max-width: 639px) { .lightbox__prev, .lightbox__next { top: auto; bottom: 64px; } }

/* ————————————————————————————————— diensten */
.service-rows { display: grid; gap: clamp(64px, 8vw, 140px); padding-top: clamp(32px, 4vw, 64px); padding-bottom: var(--section); }
.service-row { display: grid; gap: 22px; align-items: center; }
.service-row__media { display: block; overflow: hidden; }
.service-row__media picture { aspect-ratio: 4 / 3; }
.service-row__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.service-row__text { display: grid; gap: 16px; }
.service-row__title { font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -.035em; font-weight: 340; }
.service-row__title a { text-decoration: none; }
.service-row--tbd .service-row__text { padding: clamp(20px, 2.5vw, 36px); background: var(--lin-2); }
@media (hover: hover) and (pointer: fine) { .service-row:hover .service-row__media img { transform: scale(1.03); } }
@media (min-width: 1024px) {
  .service-row { grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); }
  .service-row__media { grid-column: 1 / 8; }
  .service-row__text { grid-column: 9 / 13; }
  .service-row--flip .service-row__media { grid-column: 6 / 13; grid-row: 1; }
  .service-row--flip .service-row__text { grid-column: 1 / 5; grid-row: 1; }
  .service-row--tbd .service-row__text { grid-column: 1 / 8; }
}
.s-body { padding-top: clamp(28px, 3vw, 48px); padding-bottom: var(--section); display: grid; gap: 24px; }
.s-body__text { display: grid; gap: 22px; max-width: 66ch; }
.s-body__photo picture { aspect-ratio: 4 / 5; overflow: hidden; }
.s-body__photo img { width: 100%; height: 100%; object-fit: cover; }
.s-body__photo figcaption { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: var(--fs-small); color: var(--muted); }
@media (min-width: 1024px) {
  .s-body { grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: start; }
  .s-body .back-link { grid-column: 1 / -1; }
  .s-body__text { grid-column: 1 / 7; }
  .s-body__photo { grid-column: 8 / 13; margin-top: 8px; }
}
.s-process { padding-bottom: var(--section); }

/* ————————————————————————————————— over ons */
.about-hero { padding-top: calc(var(--header-h) + clamp(40px, 7vw, 112px)); padding-bottom: var(--section); display: grid; gap: 32px; }
.about-hero__title { font-size: var(--fs-display); font-weight: 300; line-height: .95; letter-spacing: -.045em; max-width: 9ch; }
.about-hero__text { display: grid; gap: 18px; max-width: 58ch; }
.about-hero__photo picture { aspect-ratio: 4 / 5; }
.about-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.about-hero__photo figcaption { margin-top: 10px; font-size: var(--fs-small); color: var(--muted); }
@media (min-width: 1024px) {
  .about-hero { grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); }
  .about-hero__title { grid-column: 1 / 9; }
  .about-hero__text { grid-column: 1 / 6; align-self: start; }
  .about-hero__photo { grid-column: 7 / 13; grid-row: 2 / span 2; }
}
.about-split { padding-block: var(--section); }
.about-split__grid { display: grid; gap: 32px; }
.about-split__title { font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -.035em; font-weight: 340; max-width: 14ch; }
.about-split__col h3 { font-size: var(--fs-h3); font-weight: 560; margin-bottom: 12px; }
@media (min-width: 1024px) {
  .about-split__grid { grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); row-gap: 56px; }
  .about-split__title { grid-column: 1 / 9; }
  .about-split__col:nth-of-type(1) { grid-column: 1 / 6; }
  .about-split__col:nth-of-type(2) { grid-column: 7 / 13; margin-top: 72px; }
}
.about-services { padding-block: var(--section); }
.about-services__list { display: grid; gap: 48px; }
.about-service { display: grid; gap: 14px; align-content: start; }
.about-service__media { display: block; overflow: hidden; }
.about-service__media picture { aspect-ratio: 4 / 3; }
.about-service__media img { width: 100%; height: 100%; object-fit: cover; }
.about-service h3 { font-size: var(--fs-h3); font-weight: 560; letter-spacing: -.015em; }
.about-service h3 a { text-decoration: none; }
.about-service h3 a:hover { text-decoration: underline; }
@media (min-width: 1024px) {
  .about-services__list { grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); }
  .about-service:nth-child(1) { grid-column: 1 / 6; }
  .about-service:nth-child(1) .about-service__media picture { aspect-ratio: 4 / 5; }
  .about-service:nth-child(2) { grid-column: 7 / 11; margin-top: 120px; }
  .about-service:nth-child(3) { grid-column: 8 / 13; margin-top: 40px; }
  .about-service:nth-child(3) .about-service__media picture { aspect-ratio: 16 / 10; }
}
.team--page { padding-top: 0; }
.partners { padding-bottom: var(--section); }
.partners__grid { display: grid; gap: 40px; }
.partner { display: grid; gap: 14px; align-content: start; }
.partner h3 { font-size: var(--fs-h3); font-weight: 560; letter-spacing: -.015em; }
.partner h3 a { text-decoration: none; }
.partner__media { display: block; overflow: hidden; }
.partner__media picture { aspect-ratio: 820 / 403; }
.partner__media img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) { .partners__grid { grid-template-columns: 1fr 1fr; column-gap: calc(var(--gap) * 4); } }
.jobs { padding-block: var(--section); }
.jobs__grid { display: grid; gap: 32px; align-items: center; }
.jobs__mascot { width: min(70%, 380px); }
.jobs__mascot img { background: none; }
.jobs__text { display: grid; gap: 18px; justify-items: start; max-width: 52ch; }
.jobs__title { font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -.035em; font-weight: 340; grid-column: 1 / -1; max-width: 18ch; }
@media (min-width: 1024px) { .jobs__grid { grid-template-columns: 5fr 7fr; column-gap: 64px; } .jobs__mascot { width: 100%; max-width: 420px; justify-self: center; } }

/* ————————————————————————————————— offerte */
.quote-page { --overlap: clamp(36px, 8vw, 128px); position: relative; z-index: 1; margin-top: calc(-1 * var(--overlap)); padding-bottom: var(--section); }
.quote-page__grid { display: grid; gap: clamp(40px, 5vw, 56px); }
@media (min-width: 1024px) {
  .quote-page__grid { grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: start; }
  .quote-form { grid-column: 1 / 9; }
  .contact-card { grid-column: 9 / 13; position: sticky; top: calc(var(--header-h) + 24px); }
}

/* en-tête : une tuin en lumière d'automne, le titre posé dessus, et la personne qui lira la demande */
.q-hero { min-height: clamp(520px, 74svh, 860px); }
.q-hero .s-hero__content { padding-top: calc(var(--header-h) + 18vh); padding-bottom: calc(var(--overlap, clamp(36px, 8vw, 128px)) + clamp(28px, 3.5vw, 48px)); row-gap: 20px; }
/* le texte remonte (la feuille du formulaire couvre le bas de la photo) : le voile commence plus haut */
.q-hero::after { background: linear-gradient(180deg, rgba(10, 18, 17, 0) 18%, rgba(10, 18, 17, .5) 46%, rgba(10, 18, 17, .84) 74%, rgba(10, 18, 17, .9) 100%); } /* taste-skill-ignore: voile neutre sur photo */
.q-hero__lead { max-width: 44ch; font-size: max(1.125rem, var(--fs-body)); line-height: 1.5; font-weight: 520; color: var(--paper); }
.q-hero__person { display: inline-flex; align-items: center; gap: 14px; justify-self: start; margin-top: 6px; color: var(--paper); line-height: 1.35; }
.q-hero__person span { display: grid; font-size: var(--fs-small); color: var(--paper-muted); }
.q-hero__person strong { font-size: var(--fs-body); font-weight: 700; color: var(--paper); }
.q-hero__photo { flex: none; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--paper); }
.q-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
@media (min-width: 1024px) {
  .q-hero .s-hero__content { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--gap); align-items: end; }
  .q-hero .s-hero__title { grid-column: 1 / -1; }
  .q-hero__person { justify-self: end; margin-top: 0; }
  .q-hero__photo { width: 64px; height: 64px; }
}

/* le formulaire est une feuille posée sur la photo : c'est l'action de la page */
.quote-form { --field: var(--lin); display: grid; gap: 20px; align-content: start; padding: clamp(20px, 4vw, 56px); background: var(--surface); }
@media (max-width: 639px) { .quote-form { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); } }
.quote-form__progress { position: relative; height: 4px; border-radius: 4px; background: var(--lin-2); overflow: hidden; }
.quote-form__progress span { position: absolute; inset: 0; background: var(--action); transform-origin: left; transform: scaleX(.5); transition: transform 600ms var(--ease-out); }
.quote-form.is-step-2 .quote-form__progress span, .quote-form.is-done .quote-form__progress span { transform: scaleX(1); }
.quote-form__step-label { font-size: var(--fs-small); font-weight: 650; color: var(--muted); }
.quote-form__step { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 18px; }
.quote-form__legend { padding: 0; font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -.035em; font-weight: 340; margin-bottom: 4px; }
.quote-form__hint { color: var(--muted); }
.quote-form__chosen { color: var(--muted); font-weight: 560; }
.quote-form__chosen strong { color: var(--ink); }
.quote-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 8px; }
.wishes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .wishes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wish { position: relative; display: block; }
.wish input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wish__face { position: relative; display: grid; grid-template-rows: auto 1fr; height: 100%; background: var(--field); cursor: pointer; overflow: hidden; box-shadow: inset 0 0 0 1.5px rgba(30, 43, 43, .14); transition: box-shadow 200ms ease, transform 160ms var(--ease-out); user-select: none; } /* taste-skill-ignore: contour de tuile de choix (champ de formulaire) */
.wish__media { aspect-ratio: 4 / 3; overflow: hidden; }
.wish .badge-3d { top: 8px; left: 8px; padding: 4px 10px 4px 8px; }
.wish__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.wish__label { display: flex; align-items: center; min-height: 52px; padding: 10px 14px; font-weight: 650; line-height: 1.25; transition: background-color 200ms ease, color 200ms ease; }
.wish--text .wish__face { grid-template-rows: 1fr; background: var(--lin-2); }
.wish--text .wish__label { min-height: 100%; }
.wish__check { position: absolute; z-index: 2; top: 8px; right: 8px; width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--slate); color: #fff; opacity: 0; transform: scale(.4); transition: opacity 180ms var(--ease-out), transform 320ms var(--spring); }
.wish:hover .wish__face { box-shadow: inset 0 0 0 1.5px rgba(30, 43, 43, .4); } /* taste-skill-ignore: contour de tuile de choix au survol */
@media (hover: hover) and (pointer: fine) { .wish:hover .wish__media img { transform: scale(1.04); } }
.wish input:checked + .wish__face { box-shadow: inset 0 0 0 3px var(--slate); animation: sprout 520ms var(--spring); } /* taste-skill-ignore: contour de sélection */
.wish input:checked + .wish__face .wish__label { background: var(--slate); color: #fff; }
.wish input:checked + .wish__face .wish__check { opacity: 1; transform: none; }
.wish input:focus-visible + .wish__face { outline: 2px solid var(--action); outline-offset: 3px; }
.wish:active .wish__face { transform: scale(.97); }
@keyframes sprout { 0% { transform: scale(.96); } 45% { transform: scale(1.05); } 100% { transform: scale(1); } }
.fields { display: grid; gap: 18px; }
@media (min-width: 640px) { .fields { grid-template-columns: 1fr 1fr; } .field--full { grid-column: 1 / -1; } }
.field { display: grid; gap: 8px; }
.field label { font-weight: 650; font-size: var(--fs-small); }
.field__optional { font-weight: 500; color: var(--muted); }
.field input, .field textarea { width: 100%; min-height: 54px; padding: 14px 16px; border: 0; border-radius: 0; background: var(--field); box-shadow: inset 0 -2px 0 rgba(30, 43, 43, .35); font-size: var(--fs-body); transition: box-shadow 200ms ease, background-color 200ms ease; } /* taste-skill-ignore: trait de champ de formulaire */
.field textarea { resize: vertical; min-height: 140px; line-height: 1.5; }
.field input:hover, .field textarea:hover { box-shadow: inset 0 -2px 0 rgba(30, 43, 43, .6); } /* taste-skill-ignore: trait de champ de formulaire */
.field input:focus, .field textarea:focus { outline: none; box-shadow: inset 0 -3px 0 var(--action); } /* taste-skill-ignore: trait de champ de formulaire */
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.field.is-invalid input, .field.is-invalid textarea { box-shadow: inset 0 -3px 0 var(--error); } /* taste-skill-ignore: trait de champ de formulaire */
.field__error { min-height: 0; color: var(--error); font-size: var(--fs-small); font-weight: 600; }
.field__error:empty { display: none; }
.field__hint { font-size: var(--fs-small); color: var(--muted); }
.field--file input { padding: 12px; min-height: 0; box-shadow: none; background: transparent; font-size: var(--fs-small); } /* taste-skill-ignore: trait de champ de formulaire */
.field--file input::file-selector-button { margin-right: 14px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--lin-2); color: var(--ink); font: inherit; font-weight: 650; cursor: pointer; }
.quote-form__done { display: grid; gap: 16px; padding: clamp(24px, 4vw, 48px); background: var(--surface); }
.quote-form__done[hidden] { display: none; }
.quote-form__done .hills { width: min(320px, 80%); color: var(--action); }
.quote-form__done-title { font-size: var(--fs-h2); line-height: 1.04; letter-spacing: -.035em; font-weight: 340; }
.hills--success path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.hills--success circle { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; }
.is-done .hills--success path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ease-out); }
.is-done .hills--success path:nth-child(2) { transition-delay: 120ms; }
.is-done .hills--success path:nth-child(3) { transition-delay: 220ms; }
.is-done .hills--success path:nth-child(4) { transition-delay: 320ms; }
.is-done .hills--success circle { opacity: 1; transform: none; transition: opacity 240ms var(--ease-out) 900ms, transform 500ms var(--spring) 900ms; }
/* contact direct : bloc sauge, les trois canaux en grand (même rôle que la barre d'action mobile) */
.contact-card { display: grid; gap: 22px; padding: clamp(22px, 2.6vw, 36px); background: var(--sage); color: var(--ink); }
.contact-card__title { font-size: var(--fs-h3); font-weight: 520; line-height: 1.15; letter-spacing: -.02em; }
.contact-card__channels { display: grid; gap: 4px; margin-top: -4px; }
.contact-card__channels a { display: flex; align-items: center; gap: 14px; min-height: 56px; color: var(--ink); font-size: max(1.0625rem, var(--fs-body)); font-weight: 650; text-decoration: none; overflow-wrap: anywhere; }
.contact-card__channels .icon { box-sizing: content-box; width: 20px; height: 20px; padding: 12px; border-radius: 50%; background: var(--ink); color: var(--paper); transition: transform var(--dur-ui) var(--spring); }
.contact-card__channels a:hover span { text-decoration: underline; text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .contact-card__channels a:hover .icon { transform: scale(1.08) rotate(-6deg); } }
.contact-card__channels a:active .icon { transform: scale(.94); transition-duration: 120ms; }
.contact-card__list { display: grid; gap: 10px; }
.contact-card__list li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.5; }
.contact-card__list li > .icon { margin-top: 3px; color: var(--ink); }
.contact-card__vat { font-size: var(--fs-small); color: var(--ink); }
.map { position: relative; aspect-ratio: 16 / 10; background: rgba(255, 255, 255, .28); overflow: hidden; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map__facade { position: absolute; inset: 0; display: grid; align-content: center; justify-items: start; gap: 12px; padding: 24px; }
.map__icon { width: 32px; height: 32px; color: var(--ink); }
.map__facade p { font-weight: 600; line-height: 1.4; }
.map__route { color: var(--ink); font-weight: 650; font-size: var(--fs-small); }

/* ————————————————————————————————— pages texte */
.text-page { padding-top: calc(var(--header-h) + clamp(40px, 7vw, 112px)); padding-bottom: var(--section); display: grid; gap: 22px; max-width: 980px; margin-inline: 0; }
.text-page h2 { margin-top: 32px; font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.015em; }
.text-page h3 { margin-top: 18px; font-size: var(--fs-body); font-weight: 700; }
.text-page ul { display: grid; gap: 6px; }
.text-page ul li { padding-left: 18px; position: relative; }
.text-page ul li::before { content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.qa { display: grid; gap: 10px; padding-left: 1.4em !important; list-style: decimal !important; }
ol.qa li::before { display: none; }
.text-page--404 .hills { width: min(360px, 80%); color: var(--teal); }

/* ————————————————————————————————— motif collines */
.hills { overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hills path { vector-effect: non-scaling-stroke; }
.hills circle { fill: currentColor; stroke: none; }
.js .hills--draw path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease-out); }
.js .hills--draw path:nth-child(2) { transition-delay: 140ms; }
.js .hills--draw path:nth-child(3) { transition-delay: 260ms; }
.js .hills--draw path:nth-child(4) { transition-delay: 380ms; }
.js .hills--draw circle { opacity: .4; transition: opacity 600ms var(--ease-out) 900ms; }
.js .is-in .hills--draw path, .js .hills--draw.is-in path { stroke-dashoffset: 0; }
.js .is-in .hills--draw circle, .js .hills--draw.is-in circle { opacity: 1; }

/* ————————————————————————————————— apparitions (contenu jamais invisible) */
.js [data-reveal] > * { opacity: .9; transform: translateY(22px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.js [data-reveal].is-in > * { opacity: 1; transform: none; }
.js [data-reveal-each] > * { opacity: .9; transform: translateY(26px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
.js [data-reveal-each] > .is-in, .js [data-reveal-each] > .is-first { opacity: 1; transform: none; }
.js [data-reveal-each] > .is-first { transition: none; }
.js .bento[data-reveal] > *, .js .proof__list[data-reveal] > * { transform: translateY(28px); }
.js [data-shutter] picture { overflow: hidden; }
.js [data-shutter] img { clip-path: inset(36% 0 0 0); transform: scale(1.12); transition: clip-path 1.15s var(--ease-out), transform 1.5s var(--ease-out); }
.js [data-shutter].is-in img { clip-path: inset(0); transform: none; }
.js [data-kinetic] .w { display: inline-block; opacity: .9; transform: translate3d(calc(var(--k, 0) * .16em), .18em, 0); transition: opacity 700ms var(--ease-out), transform 1s var(--ease-out); transition-delay: calc(var(--k, 0) * 55ms); }
.js [data-kinetic].is-in .w { opacity: 1; transform: none; }

/* ————————————————————————————————— curseur contextuel (desktop) */
.cursor { position: fixed; left: 0; top: 0; z-index: 95; pointer-events: none; display: none; }
.cursor__label { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px; background: var(--ink); color: #fff; font-size: var(--fs-small); font-weight: 700; letter-spacing: .04em; white-space: nowrap; opacity: 0; transform: translate(14px, 14px) scale(.85); transform-origin: top left; transition: opacity 140ms var(--ease-in), transform 160ms var(--ease-in); }
.cursor.is-active .cursor__label { opacity: 1; transform: translate(14px, 14px); transition: opacity 200ms var(--ease-out), transform 360ms var(--spring); }
@media (hover: hover) and (pointer: fine) { .cursor { display: block; } }

/* ————————————————————————————————— transitions de page (View Transitions) */
@view-transition { navigation: auto; }
/* Fondu en deux temps, jamais croisé : l'ancienne page s'efface entièrement sur le lin, puis la nouvelle apparaît.
   Fonds opaques partout (une capture sans fond laisserait voir l'autre page), pas de mélange plus-lighter,
   et la racine ne se redimensionne pas (sur iPhone la barre Safari change la hauteur entre deux pages). */
::view-transition { background: var(--lin); }
::view-transition-group(*) { animation-duration: 520ms; animation-timing-function: var(--ease-in-out); }
::view-transition-group(root) { animation: none; }
::view-transition-image-pair(root) { isolation: auto; }
::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; background: var(--lin); }
::view-transition-old(root) { animation: vt-fade-out 140ms var(--ease-in) both; }
::view-transition-new(root) { animation: vt-fade-in 300ms var(--ease-out) 140ms both; }
/* image partagée (carte ↔ photo du projet) : seule celle du projet ouvert garde son nom (script du <head>) ;
   une image sans partenaire de l'autre côté suit le même rythme que la page au lieu de traîner par-dessus */
::view-transition-old(*):only-child { animation: vt-fade-out 140ms var(--ease-in) both; }
::view-transition-new(*):only-child { animation: vt-fade-in 300ms var(--ease-out) 140ms both; }
/* changement de langue : c'est la même page, seuls les mots changent. L'ancienne reste dessous, la nouvelle se pose
   par-dessus en fondu : la photo (identique des deux côtés) ne clignote pas et ne bouge pas. */
.vt-lang::view-transition-old(root) { animation: none; }
.vt-lang::view-transition-new(root) { animation: vt-fade-in 260ms var(--ease-out) both; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }
.gallery.is-vt .card { view-transition-name: var(--vtn); }
.vt-off { view-transition-name: none !important; }

/* ————————————————————————————————— mouvement réduit */
@media (prefers-reduced-motion: reduce) and (max-width: 639px) {
  .reviews__long li:nth-child(n + 2) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  *, *::before, *::after { scroll-behavior: auto !important; }
  .hero__img, .is-loaded .hero__img { transform: none !important; transition: none !important; }
  .js [data-reveal] > *, .js [data-kinetic] .w, .js [data-reveal-each] > * { transform: none !important; transition: opacity 300ms ease !important; transition-delay: 0ms !important; }
  .js [data-shutter] img { clip-path: none !important; transform: none !important; transition: none !important; }
  .js .hills--draw path, .hills--success path { stroke-dashoffset: 0 !important; transition: none !important; }
  .js .hills--draw circle { opacity: 1 !important; }
  .marquee__row { animation: none !important; width: auto; padding-left: 0; overflow: visible; }
  .marquee__track { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); padding-inline: var(--gutter); }
  .marquee__track--clone, .marquee-toggle, .marquee__row + .marquee__row { display: none !important; }
  .hills--progress path { stroke-dashoffset: 0 !important; }
  .hills--track { opacity: 0; }
  .marquee { gap: 16px; }
  .review { width: auto; }
  .marquee__row:first-child .review:nth-child(n + 4) { display: none; }
  .wish input:checked + .wish__face { animation: none; }
  .site-header, .cta-bar, .menu, .greenman, .peek__man, .peek__bubble, .dreii-sign__mark path, .dreii-sign__arrow, .btn, .card__media img, .slide__media img, .tile__media img { transition-duration: 1ms !important; }
  .js .process__fig.is-active img { animation: none; }
  .lightbox[open], .lightbox.is-closing { animation-duration: 1ms; }
}

/* ————————————————————————————————— écran tactile : liens texte isolés agrandis à ~44 px sans bouger la mise en page */
@media (pointer: coarse) {
  .site-footer__address a, .site-footer__legal a, .map__route, h3 > a { display: inline-block; padding-block: 10px; margin-block: -10px; }
}