/* ==========================================================================
   EK Paysage — feuille de style principale
   Palette dérivée du logo (couronne de laurier) · contrastes vérifiés WCAG AA
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Jetons de design
   -------------------------------------------------------------------------- */
:root {
  /* Verts de la marque */
  --forest-900: #14301f;
  --forest-800: #1d4530;
  --forest-700: #2e6b47;
  --forest-600: #3c8659;
  --sage-500: #7fa355;
  --sage-400: #96b96a;
  --sage-200: #c9dcac;
  --sage-100: #e4eed4;

  /* Neutres chauds */
  --ink: #17251c;
  --ink-muted: #4a5a50;
  --cream: #f8f6f0;
  --cream-alt: #f0ede3;
  --sand: #e3ddce;
  --white: #fff;

  /* Accent doré (crédit d'impôt, fidélisation) */
  --gold-700: #85601f;
  --gold-500: #b8873c;
  --gold-100: #f4ead6;

  /* Rôles */
  --bg: var(--cream);
  --text: var(--ink);
  --text-muted: var(--ink-muted);
  --brand: var(--forest-700);
  --border: #ddd6c6;

  /* Typographie */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-body: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1: clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --step-2: clamp(1.45rem, 1.3rem + 0.75vw, 1.9rem);
  --step-3: clamp(1.9rem, 1.6rem + 1.5vw, 2.9rem);
  --step-4: clamp(2.4rem, 1.85rem + 2.75vw, 4.2rem);

  /* Espacement */
  --space-2xs: 0.375rem;
  --space-xs: 0.625rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.25rem;
  --space-xl: 3.5rem;
  --space-2xl: clamp(3.5rem, 2.5rem + 5vw, 7rem);

  --wrap: 1180px;
  --gutter: clamp(1.15rem, 0.7rem + 2.2vw, 2.5rem);

  /* Formes & ombres */
  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 20px;
  --shadow-s: 0 1px 2px rgb(20 48 31 / 0.06), 0 2px 8px rgb(20 48 31 / 0.05);
  --shadow-m: 0 4px 12px rgb(20 48 31 / 0.07), 0 12px 32px rgb(20 48 31 / 0.08);
  --shadow-l: 0 12px 28px rgb(20 48 31 / 0.12), 0 32px 64px rgb(20 48 31 / 0.14);

  /* Échelle de superposition */
  --z-base: 1;
  --z-sticky: 20;
  --z-header: 30;
  --z-drawer: 40;
  --z-lightbox: 50;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. Réinitialisation et base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Raleway dessine ses chiffres en style elzévirien : le 3 de « Conception 3D »
     descendait sous la ligne de base et paraissait plus petit que le D. On force
     les chiffres alignés, alignés sur la hauteur des capitales. */
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

/* Un <picture> s'intercale entre le conteneur et l'image : sans hauteur propre,
   les `height: 100%` posés sur l'<img> ne se résoudraient pas. */
.hero__media picture,
.service__media picture,
.gallery__btn picture {
  width: 100%;
  height: 100%;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-s);
  text-wrap: balance;
}

h1 {
  font-size: var(--step-4);
}
h2 {
  font-size: var(--step-3);
}
h3 {
  font-size: var(--step-2);
}
h4 {
  font-size: var(--step-1);
}

p {
  margin: 0 0 var(--space-s);
  max-width: 68ch;
  text-wrap: pretty;
}

ul,
ol {
  margin: 0 0 var(--space-s);
  padding-left: 1.25em;
}

a {
  color: var(--forest-700);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--forest-800);
}

strong {
  font-weight: 600;
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-l) 0;
}

/* Focus clavier visible partout */
:focus-visible {
  outline: 3px solid var(--forest-600);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection {
  background: var(--sage-200);
  color: var(--forest-900);
}

/* --------------------------------------------------------------------------
   3. Utilitaires
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow {
  max-width: 780px;
}

.section {
  padding-block: var(--space-2xl);
}

.section--tight {
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}

.section--cream {
  background: var(--cream-alt);
}

.section--forest {
  background: var(--forest-900);
  color: var(--cream);
}

.section--forest h2,
.section--forest h3 {
  color: var(--white);
}

.section--forest p {
  color: #d9e3da;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-s);
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--forest-800);
  color: var(--white);
  border-radius: 0 0 var(--radius-s) var(--radius-s);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
  color: var(--white);
}

/* En-tête de section */
.section-head {
  max-width: 720px;
  margin-bottom: var(--space-xl);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head--center p {
  margin-inline: auto;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--forest-700);
}

.section-head--center .eyebrow {
  justify-content: center;
}

.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: var(--sage-500);
  flex: none;
}

.section--forest .eyebrow {
  color: var(--sage-200);
}

.section--forest .eyebrow::before {
  background: var(--sage-500);
}

.lede {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--text-muted);
  font-weight: 400;
}

.section--forest .lede {
  color: #cfdbd2;
}

/* --------------------------------------------------------------------------
   4. Boutons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.8rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
    border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.btn svg {
  flex: none;
  width: 1.15em;
  height: 1.15em;
}

.btn--primary {
  background: var(--forest-700);
  color: var(--white);
  box-shadow: var(--shadow-s);
}

.btn--primary:hover {
  background: var(--forest-800);
  color: var(--white);
  box-shadow: var(--shadow-m);
}

.btn--ghost {
  background: transparent;
  color: var(--forest-800);
  border-color: var(--forest-700);
}

.btn--ghost:hover {
  background: var(--forest-700);
  color: var(--white);
}

.btn--light {
  background: var(--white);
  color: var(--forest-800);
  box-shadow: var(--shadow-s);
}

.btn--light:hover {
  background: var(--cream);
  color: var(--forest-900);
  box-shadow: var(--shadow-m);
}

.btn--outline-light {
  background: transparent;
  color: var(--white);
  border-color: rgb(255 255 255 / 0.55);
}

.btn--outline-light:hover {
  background: rgb(255 255 255 / 0.14);
  color: var(--white);
  border-color: var(--white);
}

.btn--lg {
  min-height: 56px;
  padding: 1rem 2rem;
  font-size: var(--step-1);
}

.btn--block {
  width: 100%;
}

.btn[disabled],
.btn[aria-busy="true"] {
  opacity: 0.65;
  cursor: not-allowed;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}

/* --------------------------------------------------------------------------
   5. Étiquettes et badges
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

.badge svg {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}

.badge--gold {
  background: var(--gold-100);
  color: var(--gold-700);
}

.badge--sage {
  background: var(--sage-100);
  color: var(--forest-800);
}

.badge--glass {
  background: rgb(255 255 255 / 0.16);
  color: var(--white);
  border: 1px solid rgb(255 255 255 / 0.3);
  backdrop-filter: blur(6px);
}

/* --------------------------------------------------------------------------
   6. En-tête / navigation
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgb(248 246 240 / 0.9);
  backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.header.is-stuck {
  border-bottom-color: var(--border);
  box-shadow: 0 2px 16px rgb(20 48 31 / 0.06);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  min-height: 4.75rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-right: auto;
  text-decoration: none;
  color: var(--ink);
}

/* Le nom est une découpe du logo, et non du texte : c'est la seule façon de
   restituer exactement la calligraphie de la marque, dont la police n'existe
   pas en version web. Le texte alternatif porte le nom pour les lecteurs
   d'écran et les moteurs de recherche. */
.brand img {
  width: auto;
}

.brand__mark {
  height: 3.1rem;
}

.brand__lettrage {
  height: 3.15rem;
  /* Le lettrage penche : une once d'air à gauche évite qu'il ne heurte le repère. */
  margin-left: 0.15rem;
}

@media (max-width: 400px) {
  .brand__mark {
    height: 2.7rem;
  }

  .brand__lettrage {
    height: 2.75rem;
  }
}

.nav {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.8rem;
  border-radius: var(--radius-s);
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.nav a:hover {
  background: var(--sage-100);
  color: var(--forest-800);
}

.header__cta {
  display: none;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  color: var(--ink);
  cursor: pointer;
}

.nav-toggle svg {
  width: 24px;
  height: 24px;
}

.nav-toggle .icon-close,
.nav-toggle[aria-expanded="true"] .icon-menu {
  display: none;
}

.nav-toggle[aria-expanded="true"] .icon-close {
  display: block;
}

@media (max-width: 1059px) {
  .nav {
    position: fixed;
    inset: 4.75rem 0 auto;
    z-index: var(--z-drawer);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-s) var(--gutter) var(--space-l);
    background: var(--cream);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-m);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s var(--ease), transform 0.22s var(--ease),
      visibility 0.22s;
  }

  .nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .nav a {
    padding: 0.9rem 0.6rem;
    border-bottom: 1px solid var(--border);
    font-size: 1.05rem;
  }

  .nav .btn {
    margin-top: var(--space-s);
  }
}

@media (min-width: 1060px) {
  .nav-toggle {
    display: none;
  }

  .nav .btn {
    display: none;
  }

  .header__cta {
    display: inline-flex;
  }
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  /* Grille plutôt que flex : en flex, le `margin-inline: auto` de .wrap
     centrerait le bloc de texte au lieu de l'aligner sur la grille du site. */
  display: grid;
  align-items: end;
  min-height: min(86svh, 780px);
  padding-block: clamp(3.5rem, 2rem + 9vw, 7rem);
  background: var(--forest-900);
  overflow: hidden;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  /* La maison du voisin occupe le cinquième droit du cliché. La photo étant
     verticale, le bandeau en affiche toute la largeur : aucune marge à décaler.
     On élargit donc le cadre photo au-delà du bandeau — `overflow: hidden` de
     .hero le recoupe — pour faire sortir la maison du champ par la droite. */
  inset: 0 auto 0 0;
  width: 128%;
  z-index: -2;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Photo verticale recadrée en bandeau : on vise le tiers haut pour garder la
     haie et le fond de vallée, et pour que le texte se détache sur du feuillage
     sombre plutôt que sur le dallage clair. En écran étroit, où le recadrage
     redevient horizontal, on tire vers la gauche pour la même raison que
     l'élargissement ci-dessus. */
  object-position: 35% 40%;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Voile assez léger à gauche pour que la haie taillée reste lisible — c'est
     l'argument de la photo — tout en gardant le texte blanc bien détaché. */
  background: linear-gradient(
      100deg,
      rgb(14 38 24 / 0.68) 0%,
      rgb(14 38 24 / 0.54) 38%,
      rgb(14 38 24 / 0.26) 68%,
      rgb(14 38 24 / 0.14) 100%
    ),
    /* Le dallage clair remonte en bas de cadre : ce voile protège la mention
       légale et les pastilles, qui sont les plus petits textes du bandeau. */
    linear-gradient(to top, rgb(14 38 24 / 0.72), transparent 52%),
    /* Voile haut : le ciel dégagé passait sous la fin du sur-titre. Il s'éteint
       avant la haie, qui reste donc pleinement visible. */
    linear-gradient(to bottom, rgb(14 38 24 / 0.55), transparent 40%);
}

.hero__inner > * {
  max-width: 44rem;
}

/* Le fond est une photo : même bien voilée, quelques éclats clairs passent
   entre les lettres. Cette ombre très diffuse assombrit le pourtour immédiat
   des glyphes, ce qui sécurise la lecture sans avoir à ternir l'image. */
.hero .eyebrow,
.hero h1,
.hero__lede,
.hero__note {
  text-shadow: 0 1px 14px rgb(10 28 18 / 0.55);
}

.hero h1 {
  color: var(--white);
  font-weight: 400;
  margin-bottom: var(--space-m);
}

.hero h1 em {
  display: block;
  font-style: italic;
  font-weight: 300;
  color: var(--sage-200);
}

.hero__lede {
  font-size: var(--step-1);
  line-height: 1.6;
  color: #dfe8e0;
  margin-bottom: var(--space-l);
}

.hero .eyebrow {
  color: #dcebc4;
}

.hero .eyebrow::before {
  background: var(--sage-400);
}

.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--space-l);
  padding: 0;
  list-style: none;
}

.hero__note {
  margin-top: var(--space-m);
  margin-bottom: 0;
  font-size: var(--step--1);
  /* Plus clair que dans le pied de page : ce texte est petit et posé sur une
     photo, il lui faut 4.5:1 face à un fond qui varie. */
  color: #d8e3da;
}

/* --------------------------------------------------------------------------
   8. Bandeau de confiance
   -------------------------------------------------------------------------- */
.trust {
  background: var(--forest-800);
  color: var(--cream);
}

.trust__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: var(--space-s) var(--space-m);
  padding-block: var(--space-l);
  margin: 0;
  list-style: none;
  padding-inline: 0;
}

.trust__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.trust__item svg {
  width: 26px;
  height: 26px;
  flex: none;
  margin-top: 2px;
  color: var(--sage-400);
}

.trust__item b {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
}

.trust__item span {
  font-size: var(--step--1);
  line-height: 1.5;
  color: #c3d2c7;
}

/* --------------------------------------------------------------------------
   9. Offre de fidélisation
   -------------------------------------------------------------------------- */
.referral {
  position: relative;
  display: grid;
  gap: var(--space-l);
  align-items: center;
  padding: clamp(1.75rem, 1.2rem + 2.5vw, 3.25rem);
  background: linear-gradient(135deg, var(--gold-100), #fbf5e9 60%, #f7f1e2);
  border: 1px solid #e6d6b4;
  border-radius: var(--radius-l);
  overflow: hidden;
}

@media (min-width: 800px) {
  .referral {
    grid-template-columns: auto 1fr;
    gap: var(--space-xl);
  }
}

.referral__figure {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(9rem, 7rem + 8vw, 12.5rem);
  aspect-ratio: 1;
  margin: 0;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid #e6d6b4;
  box-shadow: var(--shadow-m);
}

.referral__figure b {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 2rem + 3.5vw, 4.25rem);
  font-weight: 600;
  line-height: 1;
  color: var(--gold-700);
  letter-spacing: -0.02em;
  /* La boîte du texte est bien centrée, mais pas son encre : le signe « − » a
     une large approche à gauche, ce qui poussait le nombre 7 px vers la droite.
     Décalage exprimé en em pour rester juste à toutes les tailles de police. */
  transform: translateX(-0.105em);
}

/* L'étiquette est sortie du flux : sinon elle et le chiffre forment un bloc
   centré à eux deux, ce qui repousse le « −15 % » au-dessus du centre du
   cercle. Hors flux, le chiffre reste seul en grille et tombe pile au milieu. */
.referral__figure span {
  position: absolute;
  left: 0;
  right: 0;
  /* Le cercle se resserre vers le bas : trop bas, « FIDÉLISATION » déborderait
     du disque sur petit écran. Taille et interlettrage suivent donc le
     diamètre, et l'étiquette reste dans la partie encore large. */
  bottom: 1.6rem;
  text-align: center;
  font-size: clamp(0.68rem, 0.5rem + 0.55vw, 0.82rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-700);
}

.referral h2 {
  margin-bottom: var(--space-xs);
}

.referral__steps {
  display: grid;
  gap: var(--space-s);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin: var(--space-m) 0 var(--space-m);
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.referral__steps li {
  position: relative;
  padding-left: 2.4rem;
  font-size: 0.97rem;
  line-height: 1.55;
  counter-increment: step;
}

.referral__steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -1px;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--gold-700);
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 700;
}

.referral__fineprint {
  margin: 0;
  font-size: var(--step--1);
  color: #6b5a35;
}

/* --------------------------------------------------------------------------
   10. Services
   -------------------------------------------------------------------------- */
.services {
  display: grid;
  gap: var(--space-l);
}

@media (min-width: 860px) {
  .services {
    grid-template-columns: 1fr 1fr;
  }
}

.service {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--shadow-s);
  transition: box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}

.service:hover {
  border-color: var(--sage-400);
  box-shadow: var(--shadow-m);
}

.service__media {
  position: relative;
  /* Cadre carré : les photos de sujets hauts (le topiaire taillé) sont
     verticales. En 16/10 on n'en voyait que 47 % de la hauteur, ce qui
     décapitait l'arbre ; en 1/1 on en voit 75 %, soit le sujet entier. */
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--sage-100);
}

/* Image sortie du flux : sans cela, une photo verticale imposerait sa hauteur
   intrinsèque et l'aspect-ratio de la boîte ne serait pas respecté. */
.service__media picture {
  position: absolute;
  inset: 0;
}

.service__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service__media .badge {
  position: absolute;
  top: var(--space-s);
  left: var(--space-s);
  box-shadow: var(--shadow-s);
}

.service__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem);
}

.service__body h3 {
  margin-bottom: 0.4rem;
}

.service__body > p {
  color: var(--text-muted);
}

.service__list {
  display: grid;
  gap: 0.55rem;
  margin: var(--space-s) 0 var(--space-m);
  padding: 0;
  list-style: none;
}

.service__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.97rem;
  line-height: 1.5;
}

.service__list svg {
  width: 19px;
  height: 19px;
  flex: none;
  margin-top: 3px;
  color: var(--forest-600);
}

.service__foot {
  margin-top: auto;
  padding-top: var(--space-s);
  border-top: 1px solid var(--border);
}

.service__foot p {
  margin: 0 0 var(--space-s);
  font-size: var(--step--1);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   11. Crédit d'impôt : étapes + simulateur
   -------------------------------------------------------------------------- */
.taxlayout {
  display: grid;
  gap: var(--space-xl);
  align-items: start;
}

@media (min-width: 940px) {
  .taxlayout {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-2xl);
  }
}

.steps {
  display: grid;
  gap: var(--space-m);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: tax;
}

.steps li {
  position: relative;
  padding-left: 3.5rem;
  counter-increment: tax;
}

.steps li::before {
  content: counter(tax);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.1);
  border: 1px solid rgb(150 185 106 / 0.5);
  color: var(--sage-200);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
}

.steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.25rem;
  top: 2.9rem;
  bottom: -1.2rem;
  width: 1px;
  background: rgb(150 185 106 / 0.32);
}

.steps b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--white);
  margin-bottom: 0.15rem;
}

.steps p {
  margin: 0;
  font-size: 0.97rem;
  color: #cbd8ce;
}

/* Variante sans paragraphes explicatifs : les éléments ne font plus qu'une
   ligne, il faut donc les centrer sur la pastille numérotée et raccourcir le
   trait de liaison, calibré à l'origine sur des blocs beaucoup plus hauts. */
.steps--titles li {
  display: flex;
  align-items: center;
  min-height: 2.5rem;
}

.steps--titles b {
  margin-bottom: 0;
}

.steps--titles li:not(:last-child)::after {
  top: 2.75rem;
  bottom: calc(0.25rem - var(--space-m));
}

/* Simulateur */
.sim {
  padding: clamp(1.4rem, 1.1rem + 1.4vw, 2.25rem);
  background: var(--white);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-l);
  color: var(--ink);
}

.sim h3 {
  margin-bottom: 0.25rem;
  color: var(--ink);
}

/* La carte est blanche à l'intérieur d'une section verte : on doit reprendre
   la main sur `.section--forest p`, sinon le texte reste gris très clair. */
.section--forest .sim p {
  color: var(--text-muted);
}

.sim__hint {
  margin-bottom: var(--space-m);
  font-size: var(--step--1);
  color: var(--text-muted);
}

.sim__field label {
  display: block;
  margin-bottom: 0.6rem;
  font-size: 0.95rem;
  font-weight: 600;
}

.sim__value {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  color: var(--forest-700);
  font-variant-numeric: tabular-nums;
}

.sim input[type="range"] {
  width: 100%;
  height: 44px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.sim input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: var(--sand);
}

.sim input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--sand);
}

.sim input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -10px;
  border: 3px solid var(--white);
  border-radius: 50%;
  background: var(--forest-700);
  box-shadow: var(--shadow-s);
}

.sim input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 3px solid var(--white);
  border-radius: 50%;
  background: var(--forest-700);
  box-shadow: var(--shadow-s);
}

.sim__scale {
  display: flex;
  justify-content: space-between;
  margin-top: -0.25rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.sim__result {
  display: grid;
  gap: 0.15rem;
  margin-top: var(--space-m);
  padding: var(--space-m);
  background: var(--sage-100);
  border-radius: var(--radius-m);
  text-align: center;
}

.sim__result span {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--forest-800);
}

.sim__result output {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.6rem + 3vw, 3.4rem);
  font-weight: 600;
  line-height: 1.05;
  color: var(--forest-800);
  font-variant-numeric: tabular-nums;
}

.sim__result small {
  font-size: var(--step--1);
  color: var(--forest-700);
}

.sim__legal {
  margin: var(--space-m) 0 0;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   12. Conception 3D
   -------------------------------------------------------------------------- */
.design3d {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

@media (min-width: 940px) {
  .design3d {
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--space-2xl);
  }
}

.design3d__figure {
  margin: 0;
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--shadow-l);
  background: var(--white);
  border: 1px solid var(--border);
}

.design3d__figure img {
  width: 100%;
}

.design3d__thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-s);
  margin-top: var(--space-m);
  padding: 0;
  list-style: none;
}

.design3d__thumbs button {
  display: block;
  width: 100%;
  padding: 0;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  background: var(--sage-100);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.design3d__thumbs button:hover {
  border-color: var(--forest-600);
  box-shadow: var(--shadow-m);
}

.design3d__thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   13. Galerie
   -------------------------------------------------------------------------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--space-l);
}

.filter {
  min-height: 44px;
  padding: 0.55rem 1.15rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.93rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
    border-color 0.2s var(--ease);
}

.filter:hover {
  border-color: var(--forest-600);
  background: var(--sage-100);
}

.filter[aria-pressed="true"] {
  background: var(--forest-700);
  border-color: var(--forest-700);
  color: var(--white);
}

.filter .count {
  opacity: 0.65;
  font-weight: 500;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
  gap: var(--space-s);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gallery__item {
  margin: 0;
}

.gallery__item[hidden] {
  display: none;
}

.gallery__btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  aspect-ratio: 4 / 3;
  border: 0;
  border-radius: var(--radius-m);
  background: var(--sand);
  overflow: hidden;
  cursor: pointer;
  isolation: isolate;
}

.gallery__btn picture {
  position: absolute;
  inset: 0;
}

.gallery__btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s var(--ease);
}

.gallery__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(14 38 24 / 0.72), transparent 55%);
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}

.gallery__btn:hover::after,
.gallery__btn:focus-visible::after {
  opacity: 1;
}

.gallery__caption {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.9rem 1rem;
  color: var(--white);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}

.gallery__btn:hover .gallery__caption,
.gallery__btn:focus-visible .gallery__caption {
  opacity: 1;
  transform: translateY(0);
}

.gallery__caption svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.gallery__empty {
  padding: var(--space-l);
  text-align: center;
  color: var(--text-muted);
}

/* Visionneuse */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  /* Un <dialog> fermé doit rester masqué : on ne pose `display` que sur [open],
     sans quoi la règle écraserait le `display: none` de la feuille du navigateur. */
  display: none;
  grid-template-rows: auto 1fr auto;
  padding: 0;
  border: 0;
  background: rgb(12 26 18 / 0.96);
  color: var(--cream);
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  overscroll-behavior: contain;
}

.lightbox[open] {
  display: grid;
}

.lightbox::backdrop {
  background: rgb(12 26 18 / 0.9);
}

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding: 0.75rem var(--gutter);
}

.lightbox__count {
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  color: #b9c8bd;
  font-variant-numeric: tabular-nums;
}

.lightbox__stage {
  display: grid;
  place-items: center;
  min-height: 0;
  padding-inline: clamp(0.5rem, 0.2rem + 2vw, 4.5rem);
}

.lightbox__stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-s);
}

.lightbox__foot {
  padding: var(--space-s) var(--gutter) calc(var(--space-m) + env(safe-area-inset-bottom));
  text-align: center;
}

.lightbox__foot p {
  margin: 0 auto;
  max-width: 62ch;
  font-size: 0.95rem;
  color: #d3ded6;
}

.lightbox__cat {
  display: block;
  margin-bottom: 0.2rem;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sage-400);
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: rgb(255 255 255 / 0.1);
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 50%;
  color: var(--white);
  cursor: pointer;
  transition: background-color 0.2s var(--ease);
}

.icon-btn:hover {
  background: rgb(255 255 255 / 0.24);
}

.icon-btn svg {
  width: 22px;
  height: 22px;
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.lightbox__nav--prev {
  left: clamp(0.4rem, 0.2rem + 1vw, 1.5rem);
}

.lightbox__nav--next {
  right: clamp(0.4rem, 0.2rem + 1vw, 1.5rem);
}

/* --------------------------------------------------------------------------
   14. Zone d'intervention
   -------------------------------------------------------------------------- */
.zone {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

@media (min-width: 880px) {
  .zone {
    grid-template-columns: 1fr 1fr;
  }
}

/* Secteurs d'intervention : une grille pleine largeur sous les deux colonnes.
   Grouper les communes par bassin rend la couverture départementale crédible,
   là où une longue liste plate serait illisible. */
.zone__areas {
  display: grid;
  /* 310 px cale la grille sur 3 colonnes en desktop (4 laisserait une rangée
     bancale à six secteurs), 2 en tablette, 1 en mobile. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr));
  gap: var(--space-s);
  margin: var(--space-xl) 0 0;
  padding: 0;
  list-style: none;
}

.zone__areas li {
  padding: var(--space-m);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
}

.zone__areas b {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.2;
  color: var(--forest-800);
}

.zone__areas span {
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.zone__card {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--shadow-m);
  background: var(--sage-100);
  isolation: isolate;
}

.zone__card picture {
  position: absolute;
  inset: 0;
}

.zone__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.zone__card-body {
  position: absolute;
  inset: auto 0 0;
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  color: var(--white);
  background: linear-gradient(to top, rgb(14 38 24 / 0.94), rgb(14 38 24 / 0.72) 55%, transparent);
}

.zone__card-label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage-200);
}

.zone__card-address {
  margin-bottom: var(--space-s);
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.35;
  color: var(--white);
}

/* --------------------------------------------------------------------------
   15. Formulaire de devis
   -------------------------------------------------------------------------- */
.contact {
  display: grid;
  gap: var(--space-xl);
  align-items: start;
}

@media (min-width: 940px) {
  .contact {
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--space-2xl);
  }
}

.contact__aside .lede {
  margin-bottom: var(--space-l);
}

.contact__list {
  display: grid;
  gap: var(--space-m);
  margin: 0 0 var(--space-l);
  padding: 0;
  list-style: none;
}

.contact__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.contact__list svg {
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 4px;
  color: var(--forest-600);
}

.contact__list b {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.contact__list a,
.contact__list span {
  display: inline-block;
  padding-block: 0.35rem;
  font-size: 1.06rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}

.contact__list a:hover {
  color: var(--forest-700);
  text-decoration: underline;
}

.form {
  padding: clamp(1.4rem, 1.1rem + 1.5vw, 2.5rem);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-m);
}

.form__grid {
  display: grid;
  gap: var(--space-m);
}

@media (min-width: 560px) {
  .form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-m);
  }
}

.field label,
.fieldset legend {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
}

.field .req {
  color: #a4451f;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease),
    background-color 0.2s var(--ease);
}

.field textarea {
  min-height: 8.5rem;
  resize: vertical;
}

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234a5a50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  padding-right: 2.6rem;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  background: var(--white);
  border-color: var(--forest-600);
  box-shadow: 0 0 0 3px rgb(60 134 89 / 0.16);
  outline: none;
}

.field input:user-invalid,
.field textarea:user-invalid {
  border-color: #b1471f;
}

.field__hint {
  margin: 0.4rem 0 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* `label.checkbox` et non `.checkbox` seul : la règle `.field label` poserait
   sinon `display: block` avec une spécificité supérieure. */
label.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-muted);
  cursor: pointer;
}

.checkbox input {
  width: 20px;
  height: 20px;
  margin: 3px 0 0;
  flex: none;
  accent-color: var(--forest-700);
  cursor: pointer;
}

/* Champ anti-spam invisible */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__status {
  display: none;
  align-items: flex-start;
  gap: 0.7rem;
  margin-top: var(--space-m);
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius-m);
  font-size: 0.95rem;
  line-height: 1.55;
}

.form__status svg {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 2px;
}

.form__status[data-state="success"],
.form__status[data-state="error"] {
  display: flex;
}

.form__status[data-state="success"] {
  background: var(--sage-100);
  color: var(--forest-800);
}

.form__status[data-state="error"] {
  background: #fbeae3;
  color: #8e3a17;
}

.spinner {
  width: 1.15em;
  height: 1.15em;
  border: 2px solid rgb(255 255 255 / 0.4);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* --------------------------------------------------------------------------
   16. Pied de page
   -------------------------------------------------------------------------- */
.footer {
  background: var(--forest-900);
  color: #c8d5cb;
  padding-block: var(--space-xl) var(--space-l);
}

.footer__grid {
  display: grid;
  gap: var(--space-l);
  padding-bottom: var(--space-l);
  border-bottom: 1px solid rgb(255 255 255 / 0.12);
}

@media (min-width: 760px) {
  .footer__grid {
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: var(--space-xl);
  }
}

.footer img.footer__logo {
  height: 6.5rem;
  width: auto;
  margin-bottom: var(--space-s);
}

.footer h2 {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage-400);
  margin-bottom: var(--space-s);
}

.footer p {
  font-size: 0.94rem;
  color: #b9c8bd;
}

.footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.25rem;
}

.footer a {
  display: inline-block;
  padding-block: 0.3rem;
  color: #dbe5dd;
  font-size: 0.94rem;
  text-decoration: none;
}

.footer a:hover {
  color: var(--white);
  text-decoration: underline;
}

.footer__names {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--white);
  margin-bottom: 0.35rem;
}

.footer__social {
  display: flex;
  gap: 0.6rem;
  margin-top: var(--space-m);
}

.footer__social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: 50%;
  color: #dbe5dd;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.footer__social a:hover {
  background: rgb(255 255 255 / 0.12);
  border-color: rgb(255 255 255 / 0.4);
}

.footer__social svg {
  width: 20px;
  height: 20px;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding-top: var(--space-m);
  font-size: 0.85rem;
  color: #9fb1a4;
}

.footer__bottom ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
}

/* Barre d'action fixe sur mobile */
.actionbar {
  position: fixed;
  inset: auto 0 0;
  z-index: var(--z-sticky);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom));
  background: rgb(248 246 240 / 0.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  transform: translateY(110%);
  transition: transform 0.28s var(--ease);
}

.actionbar.is-visible {
  transform: translateY(0);
}

.actionbar .btn {
  min-height: 46px;
  padding-inline: 0.75rem;
  font-size: 0.95rem;
}

@media (min-width: 700px) {
  .actionbar {
    display: none;
  }
}

body:has(.actionbar.is-visible) .footer {
  padding-bottom: 5.5rem;
}

/* --------------------------------------------------------------------------
   17. Pages de contenu (mentions légales, confidentialité)
   -------------------------------------------------------------------------- */
.page-head {
  padding-block: var(--space-xl) var(--space-l);
  background: var(--cream-alt);
  border-bottom: 1px solid var(--border);
}

.prose h2 {
  font-size: var(--step-2);
  margin-top: var(--space-xl);
}

.prose h2:first-child {
  margin-top: 0;
}

.prose h3 {
  font-size: var(--step-1);
  margin-top: var(--space-l);
}

.prose li {
  margin-bottom: 0.35rem;
}

.prose dl {
  margin: 0 0 var(--space-s);
}

.prose dt {
  font-weight: 600;
  margin-top: var(--space-s);
}

.prose dd {
  margin: 0;
  color: var(--text-muted);
}

.callout {
  padding: var(--space-m);
  margin-bottom: var(--space-l);
  background: var(--gold-100);
  border-left: 3px solid var(--gold-500);
  border-radius: var(--radius-s);
  font-size: 0.95rem;
}

.callout p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   18. Animations d'apparition
   -------------------------------------------------------------------------- */
/* L'état masqué n'est posé que si JavaScript est actif (classe `js` ajoutée sur
   <html> par un script en tête de page). Sans JS, rien ne révélerait ces blocs
   et la moitié de la page resterait invisible. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   19. Impression
   -------------------------------------------------------------------------- */
@media print {
  .header,
  .actionbar,
  .filters,
  .lightbox,
  .footer__social {
    display: none !important;
  }

  body {
    background: #fff;
  }

  .hero {
    min-height: auto;
    color: #000;
  }
}