/* ==========================================================================
   FICHIER GÉNÉRÉ AUTOMATIQUEMENT — NE PAS ÉDITER DIRECTEMENT.
   Régénéré par : node tools/build-css.js
   Sources à modifier : assets/css/{base,layout,components,animations,pages,utilities}/*.css
   Voir l'en-tête de tools/build-css.js pour le détail du workflow.
   ========================================================================== */

@layer base, layout, components, animations, pages, utilities;


@layer base {

/* ---- base/variables.css ---- */
/* Design system — « Matière & Lumière » */

:root {
  /* ---- Couleurs ---- */
  --ink: #12100e;
  --ink-soft: #2a2622;
  --chalk: #faf8f4;
  --sand: #e7dccb;
  --sand-light: #f2ebe0;
  --stone: #c9b79c;
  --terracotta: #b4593a;
  --terracotta-dark: #8f4128;
  --mortar: #6e6660;

  --bg: var(--chalk);
  --bg-alt: var(--sand-light);
  --bg-deep: var(--ink);
  --fg: var(--ink);
  --fg-muted: var(--mortar);
  --fg-invert: var(--chalk);
  --line: color-mix(in oklab, var(--ink) 14%, transparent);
  --line-strong: color-mix(in oklab, var(--ink) 26%, transparent);
  --accent: var(--terracotta);

  /* ---- Typographie ---- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-text: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step--1: clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);
  --step-0: clamp(1.0625rem, 1.02rem + 0.22vw, 1.15rem);
  --step-1: clamp(1.25rem, 1.17rem + 0.4vw, 1.5rem);
  --step-2: clamp(1.5rem, 1.34rem + 0.8vw, 2rem);
  --step-3: clamp(1.9rem, 1.6rem + 1.5vw, 2.85rem);
  --step-4: clamp(2.4rem, 1.85rem + 2.7vw, 4rem);
  --step-5: clamp(3rem, 2rem + 5vw, 6.5rem);

  --lh-tight: 1.02;
  --lh-title: 1.08;
  --lh-body: 1.65;
  --tracking-label: 0.16em;

  /* ---- Rythme ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.25rem;
  --space-xl: 3.5rem;
  --space-2xl: clamp(4rem, 3rem + 5vw, 7rem);
  --space-3xl: clamp(6rem, 4rem + 8vw, 11rem);

  --gutter: clamp(1.25rem, 0.6rem + 3vw, 3.5rem);
  --measure: 68ch;
  --content-max: 82.5rem;

  /* ---- Formes & profondeur ---- */
  --radius-xs: 2px;
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-pill: 999px;
  --shadow-soft: 0 1px 2px rgb(18 16 14 / 4%), 0 12px 32px -18px rgb(18 16 14 / 22%);
  --shadow-lift: 0 2px 6px rgb(18 16 14 / 5%), 0 34px 60px -30px rgb(18 16 14 / 32%);
  --shadow-image: 0 40px 80px -50px rgb(18 16 14 / 55%);

  /* ---- Mouvement ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 220ms;
  --dur: 480ms;
  --dur-slow: 900ms;

  --header-h: 5.5rem;
}

@media (min-width: 60rem) {
  :root {
    --header-h: 7rem;
  }
}


/* ---- base/fonts.css ---- */
/* Polices auto-hébergées (aucune requête tierce), variables et sous-ensembles latins. */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/fraunces-latin.woff2") format("woff2");
  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: "Fraunces";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/fraunces-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("../fonts/inter-tight-latin.woff2") format("woff2");
  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: "Inter Tight";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("../fonts/inter-tight-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ---- base/reset.css ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd,
ul,
ol {
  margin: 0;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

body {
  min-height: 100svh;
  background-color: var(--bg);
  color: var(--fg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
}

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

::selection {
  background: var(--ink);
  color: var(--chalk);
}

@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;
  }
}


/* ---- base/typography.css ---- */
body {
  font-family: var(--font-text);
  font-size: var(--step-0);
  font-weight: 380;
  line-height: var(--lh-body);
  font-variant-numeric: tabular-nums;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-title);
  letter-spacing: -0.015em;
  text-wrap: balance;
  font-variation-settings: "opsz" 96, "SOFT" 0, "WONK" 0;
}

h1 {
  font-size: var(--step-5);
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
}

h2 {
  font-size: var(--step-4);
  letter-spacing: -0.022em;
}

h3 {
  font-size: var(--step-2);
}

h4 {
  font-size: var(--step-1);
}

p {
  max-width: var(--measure);
  text-wrap: pretty;
}

strong {
  font-weight: 560;
}

em {
  font-style: italic;
}

small {
  font-size: var(--step--1);
}

/* Suréminence typographique : le mot clé d'un titre passe en italique optique */
.accent-word {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 40, "WONK" 1;
  color: var(--accent);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-text);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.eyebrow::before {
  content: "";
  inline-size: 1.75rem;
  block-size: 1px;
  background: var(--line-strong);
}

.lead {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-soft);
  font-weight: 350;
}

.prose > * + * {
  margin-block-start: var(--space-s);
}

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

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

.prose ul {
  padding-inline-start: 1.1rem;
  max-width: var(--measure);
}

.prose li + li {
  margin-block-start: var(--space-2xs);
}

.link-underline {
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--dur) var(--ease-out);
}

.link-underline:hover {
  background-size: 0% 1px;
  background-position: 100% 100%;
}

}


@layer layout {

/* ---- layout/grid.css ---- */
.shell {
  width: min(100% - var(--gutter) * 2, var(--content-max));
  margin-inline: auto;
}

.shell--narrow {
  width: min(100% - var(--gutter) * 2, 60rem);
  margin-inline: auto;
}

.section {
  padding-block: var(--space-3xl);
  position: relative;
}

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

.section--dark {
  background: var(--bg-deep);
  color: var(--fg-invert);
  --fg-muted: color-mix(in oklab, var(--chalk) 62%, transparent);
  --line: color-mix(in oklab, var(--chalk) 16%, transparent);
  --line-strong: color-mix(in oklab, var(--chalk) 34%, transparent);
  --ink-soft: color-mix(in oklab, var(--chalk) 82%, transparent);
}

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

.section-head {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: 1fr;
  margin-block-end: var(--space-xl);
}

@media (min-width: 60rem) {
  .section-head {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: end;
    gap: var(--space-2xl);
  }
}

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

.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}

.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.split {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

@media (min-width: 64rem) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-2xl);
  }

  .split--wide-left {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  }

  .split--wide-right {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  }
}

.rule {
  border: 0;
  border-block-start: 1px solid var(--line);
  margin: 0;
}


/* ---- layout/header.css ---- */
.skip-link {
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-start: 0.5rem;
  z-index: 200;
  padding: 0.65rem 1rem;
  background: var(--ink);
  color: var(--chalk);
  border-radius: var(--radius-s);
  transform: translateY(-160%);
  transition: transform var(--dur-fast) var(--ease-out);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  block-size: var(--header-h);
  display: flex;
  align-items: center;
  transition:
    background-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    backdrop-filter var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
}

.site-header[data-state="scrolled"] {
  background: color-mix(in oklab, var(--chalk) 82%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 var(--line);
}

.site-header[data-hidden="true"] {
  transform: translateY(-100%);
}

.site-header[data-menu="open"] {
  /* Le header repasse au-dessus du panneau pour garder le bouton accessible */
  z-index: 320;
  transform: none;
  /* Fond plein : aucun contenu du panneau ne transparaît derrière le header */
  background: var(--ink);
  box-shadow: none;
  backdrop-filter: none;
  color: var(--chalk);
}

.site-header[data-menu="open"] .brand,
.site-header[data-menu="open"] .brand__name {
  color: var(--chalk);
}

.site-header[data-menu="open"] .brand__name span,
.site-header[data-menu="open"] .header-phone {
  color: color-mix(in oklab, var(--chalk) 72%, transparent);
}

.site-header[data-menu="open"] .btn,
.site-header[data-menu="open"] .header-phone {
  display: none !important;
}

.site-header[data-menu="open"] .nav-toggle {
  border-color: color-mix(in oklab, var(--chalk) 40%, transparent);
  background: transparent;
}

.site-header[data-menu="open"] .nav-toggle span,
.site-header[data-menu="open"] .nav-toggle span::before,
.site-header[data-menu="open"] .nav-toggle span::after {
  background: var(--chalk);
}

.site-header[data-menu="open"] .nav-toggle[aria-expanded="true"] span {
  background: transparent;
}

.site-header > .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  inline-size: min(100% - var(--gutter) * 2, var(--content-max));
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  line-height: 1;
}

.brand__logo {
  /* La hauteur disponible dans le bandeau pilote la taille : le logo reste
     toujours contenu, avec une petite marge de sécurité de chaque côté
     (0.3rem en haut + 0.3rem en bas), et évolue automatiquement si
     --header-h change (mobile/desktop, ou plus tard une autre valeur).
     Bandeau (--header-h) agrandi en même temps que le plafond du logo,
     pour un logo encore plus grand sans le coller aux bords. */
  block-size: min(8rem, calc(var(--header-h) - 0.6rem));
  max-block-size: calc(var(--header-h) - 0.6rem);
  inline-size: auto;
  display: block;
}

/* Important : la couleur d'origine du logo ne doit jamais être modifiée par
   l'état du header (top/scrolled, menu ouvert…). Aucun
   filter/opacity/color ne doit être appliqué à .brand__logo. */

.brand__mark {
  inline-size: 2.1rem;
  block-size: 2.1rem;
  flex: none;
  color: var(--accent);
}

.brand__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  letter-spacing: 0.02em;
  font-weight: 500;
}

.brand__name span {
  display: block;
  font-family: var(--font-text);
  font-size: 0.625rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-block-start: 0.22rem;
  font-weight: 450;
}

.primary-nav {
  display: none;
}

.primary-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.6vw, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.primary-nav a {
  position: relative;
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 420;
  padding-block: 0.4rem;
  color: var(--ink-soft);
  transition: color var(--dur-fast) var(--ease-out);
}

.primary-nav a::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform var(--dur) var(--ease-out);
}

.primary-nav a:hover {
  color: var(--ink);
}

.primary-nav a:hover::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}

.primary-nav a[aria-current="page"],
.primary-nav a[aria-current="true"] {
  color: var(--ink);
}

.primary-nav a[aria-current="page"]::after,
.primary-nav a[aria-current="true"]::after {
  transform: scaleX(1);
  background: var(--accent);
}

/* Le haut du hero est désormais éclairci sous le bandeau (cf. la dégradé
   .hero__media--graphic dans hero.css) : le header garde donc ses couleurs
   de texte habituelles (sombres) même en haut de page, sans variante
   "hero sombre" à gérer séparément. */

.header-actions {
  position: relative;
  z-index: 310;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

/* Petits smartphones : cf. components/button.css → .header-actions .btn
   (doit vivre dans la couche @layer components, pas ici, sinon la règle
   .btn de base gagne malgré la spécificité — ordre des layers). */
@media (max-width: 26rem) {
  .header-actions {
    gap: 0.5rem;
  }
}

.header-phone {
  display: none;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 480;
  white-space: nowrap;
}

.header-phone svg {
  inline-size: 1rem;
  block-size: 1rem;
  color: var(--accent);
}

/* Bouton burger dessiné comme trois assises de mur */
.nav-toggle {
  position: relative;
  z-index: 310;
  inline-size: 3rem;
  block-size: 3rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--chalk) 70%, transparent);
}

.nav-toggle span {
  position: relative;
  display: block;
  inline-size: 1.1rem;
  block-size: 1px;
  background: var(--ink);
  transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) linear;
}

.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inline-size: 1.1rem;
  block-size: 1px;
  background: var(--ink);
  transition: transform var(--dur) var(--ease-out);
}

.nav-toggle span::before {
  inset-block-start: -0.35rem;
}

.nav-toggle span::after {
  inset-block-start: 0.35rem;
}

.nav-toggle[aria-expanded="true"] span {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] span::before {
  transform: translateY(0.35rem) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span::after {
  transform: translateY(-0.35rem) rotate(-45deg);
}

/* Panneau mobile plein écran */
.nav-panel {
  position: fixed;
  inset: 0;
  /* Au-dessus du header (100), de la barre d'appel (95) et de tout le contenu */
  z-index: 300;
  display: grid;
  align-content: start;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  block-size: 100dvh;
  max-block-size: 100dvh;
  padding: calc(var(--header-h) + var(--space-m)) max(var(--gutter), env(safe-area-inset-left))
    calc(var(--space-xl) + env(safe-area-inset-bottom))
    max(var(--gutter), env(safe-area-inset-right));
  background: var(--ink);
  color: var(--chalk);
  visibility: hidden;
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transition:
    clip-path var(--dur-slow) var(--ease-inout),
    opacity var(--dur) var(--ease-out),
    visibility 0s linear var(--dur-slow);
}

.nav-panel[data-open="true"] {
  visibility: visible;
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transition-delay: 0s;
}

.nav-panel ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.1rem;
  counter-reset: nav;
}

.nav-panel li {
  overflow: hidden;
  border-block-end: 1px solid color-mix(in oklab, var(--chalk) 12%, transparent);
}

.nav-panel a {
  display: flex;
  align-items: baseline;
  gap: var(--space-s);
  padding-block: clamp(0.75rem, 1.6vh, 1rem);
  min-block-size: 3rem;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 7vw, 2.75rem);
  letter-spacing: -0.02em;
  transform: translateY(110%);
  transition: transform var(--dur-slow) var(--ease-out), color var(--dur-fast);
}

.nav-panel[data-open="true"] a {
  transform: translateY(0);
  transition-delay: calc(60ms * var(--i, 0) + 80ms);
}

.nav-panel a::before {
  counter-increment: nav;
  content: "0" counter(nav);
  font-family: var(--font-text);
  font-size: 0.7rem;
  letter-spacing: var(--tracking-label);
  color: var(--stone);
}

.nav-panel a:hover {
  color: var(--stone);
}

.nav-panel__foot {
  margin-block-start: var(--space-xl);
  display: grid;
  gap: var(--space-2xs);
  font-size: 0.9375rem;
  color: color-mix(in oklab, var(--chalk) 70%, transparent);
}

.nav-panel__foot a {
  text-decoration: none;
}

@media (min-width: 62rem) {
  .primary-nav {
    display: block;
  }

  .header-phone {
    display: inline-flex;
  }

  .nav-toggle,
  .nav-panel {
    display: none;
  }
}


/* ---- layout/footer.css ---- */
.site-footer {
  background: var(--ink);
  color: var(--chalk);
  padding-block: var(--space-2xl) var(--space-l);
  position: relative;
  overflow: hidden;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in oklab, var(--stone) 60%, transparent),
    transparent
  );
}

.footer-grid {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 72rem) {
  .footer-grid {
    grid-template-columns: 1.4fr 0.8fr 0.8fr 1fr;
  }
}

.footer-grid h2,
.footer-grid h3 {
  font-family: var(--font-text);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--stone);
  margin-block-end: var(--space-s);
}

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

.footer-grid a {
  text-decoration: none;
  color: color-mix(in oklab, var(--chalk) 82%, transparent);
  transition: color var(--dur-fast) var(--ease-out);
}

.footer-grid a:hover {
  color: var(--chalk);
}

.footer-signature {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--chalk);
  max-width: 22ch;
  margin-block-end: var(--space-m);
}

.footer-hours {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem var(--space-s);
  font-size: 0.9375rem;
  color: color-mix(in oklab, var(--chalk) 78%, transparent);
}

.footer-hours dt {
  color: var(--stone);
}

.footer-hours dd {
  margin: 0;
  text-align: end;
}

.footer-bottom {
  margin-block-start: var(--space-2xl);
  padding-block-start: var(--space-m);
  border-block-start: 1px solid color-mix(in oklab, var(--chalk) 14%, transparent);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-m);
  align-items: center;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: color-mix(in oklab, var(--chalk) 60%, transparent);
}

.footer-bottom nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-bottom a {
  text-decoration: none;
}

.footer-bottom a:hover {
  color: var(--chalk);
}



}


@layer components {

/* ---- components/button.css ---- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--chalk);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1.6rem;
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.9375rem;
  font-weight: 480;
  letter-spacing: 0.01em;
  text-decoration: none;
  isolation: isolate;
  overflow: hidden;
  transition:
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

/* Remplissage « coulée de mortier » qui monte depuis le bas */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent);
  transform: translateY(101%);
  transition: transform var(--dur) var(--ease-inout);
}

.btn:hover::before,
.btn:focus-visible::before {
  transform: translateY(0);
}

.btn:hover {
  box-shadow: var(--shadow-lift);
}

.btn:active {
  transform: translateY(1px);
}

.btn__icon {
  inline-size: 0.85rem;
  block-size: 0.85rem;
  flex: none;
  transition: transform var(--dur) var(--ease-out);
}

.btn:hover .btn__icon {
  transform: translateX(0.25rem);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border: 1px solid var(--line-strong);
}

.btn--ghost:hover {
  color: var(--chalk);
  border-color: transparent;
}

.btn--light {
  --btn-bg: var(--chalk);
  --btn-fg: var(--ink);
}

.btn--light:hover {
  color: var(--chalk);
}

.btn--accent {
  --btn-bg: var(--accent);
  --btn-fg: var(--chalk);
}

.btn--accent::before {
  background: var(--ink);
}

.btn--lg {
  padding: 1.15rem 2rem;
  font-size: 1rem;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
}

/* Petits smartphones (≤ ~390px) : dans le bandeau, logo + CTA + burger ne
   tiennent plus sur une ligne avec le padding par défaut. On resserre
   uniquement le CTA du header (pas .btn globalement, utilisé ailleurs sur
   le site) pour que rien ne déborde ni ne soit coupé. */
@media (max-width: 26rem) {
  .header-actions .btn {
    padding: 0.8rem 1.1rem;
    font-size: 0.85rem;
  }
}

/* Lien-flèche éditorial */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 480;
  padding-block-end: 0.3rem;
  border-block-end: 1px solid var(--line-strong);
  transition: gap var(--dur) var(--ease-out), border-color var(--dur-fast);
}

.arrow-link:hover {
  gap: 1rem;
  border-color: var(--accent);
  color: var(--accent);
}

.arrow-link svg {
  inline-size: 0.8rem;
  block-size: 0.8rem;
}


/* ---- components/hero.css ---- */
.hero {
  position: relative;
  min-block-size: 100svh;
  display: grid;
  align-items: end;
  padding-block: calc(var(--header-h) + var(--space-xl)) var(--space-xl);
  overflow: clip;
  background: var(--ink);
  color: var(--chalk);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 62% 50%;
  transform: scale(1.06);
  will-change: transform;
}

/* Voile de lecture : dégradé chaud, jamais un simple noir 50 % */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(18 16 14 / 62%) 0%, rgb(18 16 14 / 18%) 38%, rgb(18 16 14 / 88%) 100%),
    radial-gradient(120% 80% at 78% 30%, rgb(180 89 58 / 18%), transparent 60%);
}

/* Hero sans photo : fond graphique (matière chaux + terre cuite + trame de
   maçonnerie dessinée en CSS). Se supprime simplement en ajoutant une <img>. */
.hero__media--graphic {
  background:
    radial-gradient(90% 70% at 78% 22%, rgb(180 89 58 / 34%), transparent 62%),
    radial-gradient(70% 60% at 8% 90%, rgb(201 183 156 / 22%), transparent 60%),
    linear-gradient(
      165deg,
      #faf8f4 0%,
      #d9c9ae 9%,
      #7c6a55 20%,
      #241f1a 32%,
      #1c1917 42%,
      #12100e 55%,
      #191512 100%
    );
}

.hero__media--graphic::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgb(250 248 244 / 7%) 0 1px, transparent 1px 4.5rem),
    repeating-linear-gradient(90deg, rgb(250 248 244 / 5%) 0 1px, transparent 1px 9rem);
  mask-image: radial-gradient(120% 90% at 70% 30%, #000 10%, transparent 78%);
}

/* Voile d'enduit : un simple wipe CSS révèle le hero. Remplace une ancienne
   animation canvas (la truelle redessinait le voile à chaque frame pendant
   ~5 s) qui, mesures à l'appui, était à elle seule responsable de la
   quasi-totalité du "Total Blocking Time" du site — même après optimisation
   du dessin, recomposer un canvas plein écran ~60 fois/seconde pendant 5 s
   reste coûteux sous limitation CPU. Un transform animé est géré par le
   compositeur du navigateur, pour un coût quasi nul sur le thread principal.
   .hero__plaster clippe (overflow hidden) un .hero__plaster-sheet
   surdimensionné et incliné qui glisse hors champ.

   SYNCHRONISATION EXACTE DES 4 TRUELLES AVEC LE VOILE :
   plutôt que de rejouer sur chaque truelle une translation/un minutage
   *approchés* pour imiter la trajectoire du voile (fragile, jamais
   pixel-perfect), les 4 truelles sont des ENFANTS DOM du voile
   (.hero__plaster-sheet), collées à sa lisière gauche (left proche de 0) —
   c'est ce bord-là (pas le bord droit, qui reste hors-champ) qui balaie
   réellement l'écran de gauche à droite pendant le wipe.
   Un enfant positionné suit *exactement* le transform animé de son parent :
   il n'y a donc plus deux animations à garder en phase, mais une seule
   source de vérité (l'animation posée sur .hero__plaster-sheet).
   Problème : le parent applique skewX(-12deg), qui inclinerait aussi
   chaque truelle. Solution : chaque .hero__trowel porte skewX(12deg) — la
   transformation inverse exacte — suivi d'un rotate(...) esthétique propre
   à chaque truelle. skewX(12deg) annule algébriquement le skewX(-12deg) du
   parent (skewX(a) ∘ skewX(-a) = identité), et comme skewX ne dévie pas les
   vecteurs horizontaux (une translation purement horizontale traverse un
   skewX sans être déformée), le résultat net pour chaque truelle est un
   glissement horizontal pur, image par image identique à celui du voile —
   sans dérive verticale ni cisaillement résiduel, à la milliseconde et au
   pixel près, garanti par la géométrie plutôt que par un calage empirique
   de timings. Le seul minutage réellement dupliqué (l'apparition en fondu)
   utilise volontairement les mêmes valeurs de durée/délai/accélération que
   le voile pour rester cohérent visuellement — mais la position, elle, ne
   dépend d'aucun calage manuel. */
.hero__plaster {
  position: absolute;
  inset: 0;
  z-index: 1;
  inline-size: 100%;
  block-size: 100%;
  overflow: hidden;
  pointer-events: none;
}

.hero__plaster-sheet {
  position: absolute;
  inset: -15% -20% -15% -70%;
  background: #e7dccb;
  transform: skewX(-12deg) translateX(0%);
  animation: hero-plaster-wipe 4.6s cubic-bezier(0.76, 0, 0.24, 1) 0.1s both;
  will-change: transform;
}

@keyframes hero-plaster-wipe {
  to {
    transform: skewX(-12deg) translateX(160%);
  }
}

/* 4 exemplaires de la photo de truelle, positionnés à des hauteurs
   différentes le long de la lisière du voile (cf. explication ci-dessus) :
   ils en épousent donc la trajectoire diagonale au pixel près, sans
   timing dupliqué. Le fondu d'apparition/disparition reprend exactement
   la durée/le délai/la courbe du voile pour rester en phase avec lui. */
.hero__trowel {
  position: absolute;
  left: 0;
  inline-size: clamp(64px, 7.5vw, 112px);
  block-size: auto;
  opacity: 0;
  will-change: opacity;
  filter: drop-shadow(0 6px 10px rgb(18 16 14 / 35%));
  animation: hero-trowel-fade 4.6s cubic-bezier(0.76, 0, 0.24, 1) 0.1s both;
}

.hero__trowel--1 {
  top: 12%;
  left: -6px;
  transform: skewX(12deg) rotate(-13deg);
}

.hero__trowel--2 {
  top: 36%;
  left: -22px;
  inline-size: clamp(54px, 6.3vw, 92px);
  transform: skewX(12deg) rotate(-8deg);
}

.hero__trowel--3 {
  top: 60%;
  left: -12px;
  transform: skewX(12deg) rotate(-16deg);
}

.hero__trowel--4 {
  top: 82%;
  left: -28px;
  inline-size: clamp(56px, 6.6vw, 98px);
  transform: skewX(12deg) rotate(-10deg);
}

@keyframes hero-trowel-fade {
  0%,
  100% {
    opacity: 0;
  }
  15%,
  85% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__plaster-sheet {
    animation: none;
    transform: skewX(-12deg) translateX(160%);
  }

  .hero__trowel {
    display: none;
  }
}

.hero__inner {
  position: relative;
  z-index: 2;
  inline-size: min(100% - var(--gutter) * 2, var(--content-max));
  margin-inline: auto;
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 64rem) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
    align-items: end;
    gap: var(--space-2xl);
  }
}

.hero__title {
  font-size: clamp(2.25rem, 1.2rem + 5vw, 5.5rem);
  letter-spacing: -0.035em;
  line-height: 0.98;
  max-width: 16ch;
}

.hero__title .line {
  display: block;
  overflow: hidden;
}

.hero__title .line > span {
  display: block;
  transform: translateY(105%);
  animation: hero-line-up 1.05s var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 110ms + 180ms);
}

@keyframes hero-line-up {
  to {
    transform: translateY(0);
  }
}

.hero__eyebrow {
  color: var(--stone);
  margin-block-end: var(--space-m);
  opacity: 0;
  animation: fade-rise 0.9s var(--ease-out) 0.1s forwards;
}

.hero__eyebrow::before {
  background: var(--stone);
}

.hero__aside {
  display: grid;
  gap: var(--space-m);
  opacity: 0;
  animation: fade-rise 1s var(--ease-out) 0.7s forwards;
}

.hero__aside p {
  font-size: var(--step-0);
  color: color-mix(in oklab, var(--chalk) 84%, transparent);
  max-width: 34ch;
}

@keyframes fade-rise {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Bandeau de preuves collé au bas du hero */
.hero__proof {
  position: relative;
  z-index: 2;
  inline-size: min(100% - var(--gutter) * 2, var(--content-max));
  margin: var(--space-xl) auto 0;
  padding-block-start: var(--space-m);
  border-block-start: 1px solid color-mix(in oklab, var(--chalk) 20%, transparent);
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  opacity: 0;
  animation: fade-rise 1s var(--ease-out) 0.95s forwards;
}

.hero__proof div {
  display: grid;
  gap: 0.2rem;
}

.hero__proof dt,
.hero__proof b {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1;
  font-weight: 400;
}

.hero__proof dd,
.hero__proof span {
  margin: 0;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--chalk) 62%, transparent);
}

/* Hero secondaire des pages intérieures */
.page-hero {
  position: relative;
  padding-block: calc(var(--header-h) + var(--space-2xl)) var(--space-2xl);
  background: var(--bg-alt);
  overflow: clip;
}

.page-hero::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 1px;
  background: var(--line);
}

.page-hero__grid {
  display: grid;
  gap: var(--space-l);
}

@media (min-width: 64rem) {
  .page-hero__grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: end;
    gap: var(--space-2xl);
  }
}

.page-hero h1 {
  font-size: var(--step-4);
  max-width: 18ch;
}

.breadcrumb {
  margin-block-end: var(--space-m);
  font-size: 0.8125rem;
  color: var(--fg-muted);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb li + li::before {
  content: "/";
  margin-inline-end: 0.5rem;
  color: var(--stone);
}

.breadcrumb a {
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--accent);
}

/* Desktop : le hero tient exactement dans la fenêtre, contenu centré */
@media (min-width: 64rem) {
  .hero {
    block-size: 100svh;
    min-block-size: 42rem;
    align-items: center;
    align-content: center;
    grid-template-rows: 1fr auto;
    padding-block: calc(var(--header-h) + var(--space-l)) var(--space-l);
  }

  .hero__inner {
    align-self: center;
  }

  .hero__title {
    font-size: clamp(2.25rem, min(4.4vw, 7vh), 4.75rem);
  }

  .hero__proof {
    margin-block-start: var(--space-l);
  }
}

/* Écrans laptop peu hauts : on compacte sans rétrécir à l'excès */
@media (min-width: 64rem) and (max-height: 46rem) {
  .hero {
    min-block-size: 0;
  }

  .hero__inner {
    gap: var(--space-l);
  }

  .hero__eyebrow {
    margin-block-end: var(--space-s);
  }
}


/* ---- components/card.css ---- */
/* Carte service : filet fin, numéro d'assise, révélation du fond au survol */
.service-card {
  position: relative;
  display: grid;
  gap: var(--space-s);
  padding: var(--space-l) var(--space-m) var(--space-l);
  background: transparent;
  border-block-start: 1px solid var(--line-strong);
  isolation: isolate;
  overflow: hidden;
  transition: color var(--dur) var(--ease-out);
}

.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform var(--dur-slow) var(--ease-inout);
}

.service-card:hover,
.service-card:focus-within {
  color: var(--chalk);
}

.service-card:hover::before,
.service-card:focus-within::before {
  transform: scaleY(1);
  transform-origin: 50% 0;
}

.service-card__index {
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-label);
  color: var(--accent);
}

.service-card h3 {
  font-size: var(--step-1);
}

.service-card p {
  font-size: 0.9375rem;
  color: inherit;
  opacity: 0.78;
}

.service-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
  font-size: 0.875rem;
  opacity: 0.72;
}

.service-card li::before {
  content: "—";
  margin-inline-end: 0.5rem;
  color: var(--accent);
}

.service-card a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.service-card__link {
  margin-block-start: auto;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Carte étape du process */
.step {
  display: grid;
  gap: var(--space-2xs);
  padding-block: var(--space-m);
  border-block-start: 1px solid var(--line);
  position: relative;
}

.step__num {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-strong);
  transition: color var(--dur) var(--ease-out), -webkit-text-stroke-color var(--dur);
}

.step:hover .step__num {
  color: var(--accent);
  -webkit-text-stroke-color: transparent;
}

.step h3 {
  font-size: var(--step-1);
}

.step p {
  font-size: 0.9375rem;
  color: var(--fg-muted);
}


/* Encart chiffre */
.stat {
  display: grid;
  gap: 0.25rem;
  padding-block: var(--space-s);
  border-block-start: 1px solid var(--line);
}

.stat b {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 400;
  line-height: 1;
}

.stat span {
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Carte commune */
.town {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-s);
  padding-block: var(--space-s);
  border-block-start: 1px solid var(--line);
  text-decoration: none;
  transition: padding-inline var(--dur) var(--ease-out), color var(--dur-fast);
}

.town:hover {
  padding-inline: 0.6rem;
  color: var(--accent);
}

.town em {
  font-style: normal;
  font-size: 0.8125rem;
  color: var(--fg-muted);
}


/* ---- components/gallery.css ---- */
/* Galerie éditoriale : grille asymétrique, jamais une grille régulière */
.gallery {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  align-items: stretch;
}

@media (min-width: 64rem) {
  .gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-l);
  }
}

.shot {
  position: relative;
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  min-inline-size: 0;
  overflow: hidden;
  background: var(--sand);
  border-radius: var(--radius-s);
}

.shot__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-s);
  clip-path: inset(0 0 0 0);
}

.shot img {
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.2s var(--ease-out), filter var(--dur) var(--ease-out);
  will-change: transform;
}

.shot--tall img {
  aspect-ratio: 3 / 4;
}

.shot:hover img {
  transform: scale(1.07);
}

.shot__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgb(18 16 14 / 72%));
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}

.shot:hover .shot__frame::after {
  opacity: 1;
}

.shot figcaption {
  display: grid;
  gap: 0.2rem;
  padding-block-start: var(--space-s);
}

.shot figcaption b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-1);
}

.shot figcaption span {
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Filtres de galerie */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-end: var(--space-xl);
}

.filters button {
  padding: 0.5rem 1.05rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.filters button:hover {
  border-color: var(--ink);
}

.filters button[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--chalk);
}

.shot[hidden] {
  display: none;
}

/* Visionneuse */
.lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-inline-size: min(96vw, 76rem);
  max-block-size: 92svh;
}

.lightbox::backdrop {
  background: rgb(18 16 14 / 88%);
  backdrop-filter: blur(6px);
}

.lightbox img {
  inline-size: 100%;
  max-block-size: 80svh;
  object-fit: contain;
  border-radius: var(--radius-s);
}

.lightbox figcaption {
  color: var(--chalk);
  padding-block-start: var(--space-s);
  font-size: 0.9375rem;
}

.lightbox__close {
  position: absolute;
  inset-block-start: -3rem;
  inset-inline-end: 0;
  color: var(--chalk);
  font-size: 0.8125rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.lightbox figure {
  position: relative;
  margin: 0;
}

/* Comparatif avant / après piloté au clavier et à la souris */
.compare {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-s);
  touch-action: pan-y;
}

.compare img {
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.compare__after {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 var(--pos, 50%));
}

.compare__handle {
  position: absolute;
  inset-block: 0;
  inset-inline-start: var(--pos, 50%);
  inline-size: 2px;
  background: var(--chalk);
  translate: -50% 0;
  cursor: ew-resize;
}

.compare__handle::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  translate: -50% -50%;
  border-radius: 50%;
  border: 1px solid var(--chalk);
  background: color-mix(in oklab, var(--ink) 55%, transparent);
  backdrop-filter: blur(4px);
}


/* ---- components/accordion.css ---- */
.faq-list {
  display: grid;
  border-block-start: 1px solid var(--line);
}

.faq-item {
  border-block-end: 1px solid var(--line);
}

.faq-item summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-m);
  padding-block: var(--space-m);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--step-1);
  transition: color var(--dur-fast) var(--ease-out);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:hover {
  color: var(--accent);
}

.faq-item summary::after {
  content: "";
  flex: none;
  inline-size: 0.85rem;
  block-size: 0.85rem;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat;
  transition: transform var(--dur) var(--ease-out);
  translate: 0 0.15rem;
}

.faq-item[open] summary::after {
  transform: rotate(135deg);
}

.faq-item__body {
  display: grid;
  grid-template-rows: 1fr;
  padding-block-end: var(--space-m);
}

.faq-item__body p {
  font-size: 0.9375rem;
  color: var(--fg-muted);
  max-width: 62ch;
}

.faq-item[open] .faq-item__body {
  animation: faq-open var(--dur) var(--ease-out);
}

@keyframes faq-open {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ---- components/form.css ---- */
.form {
  display: grid;
  gap: var(--space-m);
}

/*
 * Honeypot anti-bot : masqué visuellement sans display:none / hidden
 * (trivialement repérables par des bots) ni left/top négatifs seuls,
 * mais toujours présent dans le flux et lisible par un lecteur d'écran
 * s'il n'y avait pas aria-hidden côté HTML.
 */
.form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

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

@media (min-width: 40rem) {
  .form__row--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.field {
  position: relative;
  display: grid;
  gap: 0.4rem;
}

.field > label {
  font-size: 0.75rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.field input,
.field textarea,
.field select {
  inline-size: 100%;
  padding: 0.9rem 0;
  background: transparent;
  border: 0;
  border-block-end: 1px solid var(--line-strong);
  border-radius: 0;
  font-size: 1.0625rem;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.field textarea {
  min-block-size: 8rem;
  resize: vertical;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--accent);
}

.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.field__error {
  font-size: 0.8125rem;
  color: var(--terracotta-dark);
  min-block-size: 1rem;
}

.field[data-invalid="true"] input,
.field[data-invalid="true"] textarea,
.field[data-invalid="true"] select {
  border-color: var(--terracotta-dark);
}

/* Choix de type de projet en pastilles radio */
.choices {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.6rem;
}

.choices legend {
  font-size: 0.75rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-muted);
  padding: 0;
  margin-block-end: 0.4rem;
}

.choices__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.choices label {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-size: 0.9375rem;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.choices input {
  position: absolute;
  opacity: 0;
  inline-size: 1px;
  block-size: 1px;
}

.choices label:hover {
  border-color: var(--ink);
}

.choices input:checked + span,
.choices label:has(input:checked) {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--chalk);
}

.choices label:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.875rem;
  color: var(--fg-muted);
  max-width: 60ch;
}

.consent input {
  margin-block-start: 0.28rem;
  accent-color: var(--accent);
  inline-size: 1rem;
  block-size: 1rem;
  flex: none;
}

.form__status {
  font-size: 0.9375rem;
  padding: var(--space-s) var(--space-m);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--bg-alt);
}

.form__status[hidden] {
  display: none;
}

/* Bloc coordonnées */
.contact-list {
  display: grid;
  gap: var(--space-m);
  list-style: none;
  margin: 0;
  padding: 0;
}

.contact-list li {
  display: grid;
  gap: 0.25rem;
  padding-block-start: var(--space-s);
  border-block-start: 1px solid var(--line);
}

.contact-list span {
  font-size: 0.75rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.contact-list a,
.contact-list p {
  font-family: var(--font-display);
  font-size: var(--step-1);
  text-decoration: none;
}

.map-frame {
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--sand-light);
}

.map-frame iframe {
  display: block;
  inline-size: 100%;
  block-size: clamp(18rem, 40vw, 26rem);
  border: 0;
  filter: grayscale(1) contrast(0.95);
  transition: filter var(--dur-slow) var(--ease-out);
}

.map-frame:hover iframe {
  filter: grayscale(0) contrast(1);
}


/* ---- components/marquee.css ---- */
.marquee {
  --speed: 44s;
  position: relative;
  overflow: hidden;
  padding-block: var(--space-m);
  border-block: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee__track {
  display: flex;
  inline-size: max-content;
  gap: var(--space-l);
  animation: marquee var(--speed) linear infinite;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee ul {
  display: flex;
  align-items: center;
  gap: var(--space-l);
  list-style: none;
  margin: 0;
  padding: 0;
}

.marquee li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-l);
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--ink-soft);
  white-space: nowrap;
}

.marquee li::after {
  content: "";
  inline-size: 0.35rem;
  block-size: 0.35rem;
  border-radius: 50%;
  background: var(--accent);
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
  }
}


/* ---- components/cursor.css ---- */
/* Curseur personnalisé — activé uniquement sur pointeur fin */
.cursor,
.cursor-dot {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 300;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
  will-change: transform;
}

.cursor {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border: 1px solid color-mix(in oklab, var(--ink) 45%, transparent);
  mix-blend-mode: difference;
  filter: invert(1);
}

.cursor-dot {
  inline-size: 0.3rem;
  block-size: 0.3rem;
  background: var(--accent);
}

body[data-cursor-ready="true"] .cursor,
body[data-cursor-ready="true"] .cursor-dot {
  opacity: 1;
}

body[data-cursor="link"] .cursor {
  inline-size: 4.25rem;
  block-size: 4.25rem;
  border-color: var(--accent);
  background: color-mix(in oklab, var(--terracotta) 16%, transparent);
}

body[data-cursor="media"] .cursor {
  inline-size: 6rem;
  block-size: 6rem;
  border-color: transparent;
  background: color-mix(in oklab, var(--chalk) 92%, transparent);
  filter: none;
  mix-blend-mode: normal;
}

.cursor__label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.625rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}

body[data-cursor="media"] .cursor__label {
  opacity: 1;
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor,
  .cursor-dot {
    display: none;
  }
}

/* Indicateur de progression de lecture */
.progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 110;
  block-size: 2px;
  background: transparent;
}

.progress i {
  display: block;
  block-size: 100%;
  background: var(--accent);
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
}


/* ---- components/misc.css ---- */
/* Barre d'appel fixe sur mobile — le réflexe téléphone de la cible senior */
.call-bar {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 95;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line-strong);
  border-block-start: 1px solid var(--line);
  transform: translateY(100%);
  transition: transform var(--dur) var(--ease-out);
}

.call-bar[data-visible="true"] {
  transform: translateY(0);
}

.call-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding-block: 1rem;
  padding-block-end: max(1rem, env(safe-area-inset-bottom));
  background: var(--chalk);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 480;
}

.call-bar a:last-child {
  background: var(--ink);
  color: var(--chalk);
}

.call-bar svg {
  inline-size: 1rem;
  block-size: 1rem;
}

@media (min-width: 62rem) {
  .call-bar {
    display: none;
  }
}

/* Bandeau CTA de fin de page */
.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--chalk);
  padding-block: var(--space-3xl);
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 120% at 12% 0%, rgb(180 89 58 / 26%), transparent 60%),
    radial-gradient(60% 100% at 100% 100%, rgb(201 183 156 / 16%), transparent 60%);
}

.cta-band > * {
  position: relative;
}

.cta-band h2 {
  font-size: var(--step-4);
  max-width: 16ch;
}

.cta-band p {
  color: color-mix(in oklab, var(--chalk) 76%, transparent);
  margin-block: var(--space-s) var(--space-l);
}

/* Image mise en scène : cadre, filet, légende, parallaxe */
.frame {
  position: relative;
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  min-inline-size: 0;
}

.frame__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-image);
  aspect-ratio: 4 / 3;
  background: var(--sand-light, #f2ebe0);
}

.frame__media img {
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transform: scale(1.08);
  will-change: transform;
}

.frame figcaption {
  margin-block-start: var(--space-s);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.frame--offset {
  padding-inline-start: var(--space-l);
}

.frame--offset::before {
  content: "";
  position: absolute;
  inset-block: var(--space-l);
  inset-inline-start: 0;
  inline-size: 1px;
  background: var(--line-strong);
}

/* Note en marge */
.margin-note {
  font-size: 0.875rem;
  color: var(--fg-muted);
  padding-inline-start: var(--space-s);
  border-inline-start: 1px solid var(--accent);
  max-width: 34ch;
}

/* Badge de garantie */
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.badges li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.badges svg {
  inline-size: 0.85rem;
  block-size: 0.85rem;
  color: var(--accent);
}

/* Silhouette de maison qui se construit au scroll */
.blueprint {
  inline-size: 100%;
  block-size: auto;
  color: var(--stone);
}

.blueprint [data-draw] {
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: calc(var(--len, 1000) * (1 - var(--draw, 0)));
}

.blueprint [data-fill] {
  opacity: calc(var(--draw, 0) * 1);
}

/* Tableau de prix indicatifs */
.table-wrap {
  overflow-x: auto;
}

table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

caption {
  text-align: start;
  font-size: 0.8125rem;
  color: var(--fg-muted);
  padding-block-end: var(--space-s);
}

th,
td {
  text-align: start;
  padding: var(--space-s) var(--space-m) var(--space-s) 0;
  border-block-end: 1px solid var(--line);
  vertical-align: top;
}

thead th {
  font-size: 0.75rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 500;
}

tbody th {
  font-weight: 480;
}

/* ------------------------------------------------------------------
   Emplacements photo (temporaire) — le client fournira les visuels.
   Chaque .media-slot occupe exactement la place d'une future <img> :
   il suffit de remplacer le bloc par la balise image, sans toucher au
   reste de la mise en page.
   ------------------------------------------------------------------ */
.media-slot {
  position: relative;
  display: grid;
  align-content: end;
  gap: 0.35rem;
  aspect-ratio: 4 / 3;
  padding: var(--space-m);
  color: var(--ink-soft);
  background:
    radial-gradient(90% 80% at 80% 12%, rgb(180 89 58 / 12%), transparent 62%),
    linear-gradient(160deg, var(--sand, #e7dccb) 0%, var(--bg-alt, #f2ece2) 100%);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  overflow: hidden;
}

.media-slot::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgb(18 16 14 / 8%) 0 1px, transparent 1px 2.25rem),
    repeating-linear-gradient(90deg, rgb(18 16 14 / 6%) 0 1px, transparent 1px 4.5rem);
  mask-image: linear-gradient(200deg, #000 5%, transparent 70%);
}

.media-slot::after {
  content: "";
  position: absolute;
  inset-block-start: -20%;
  inset-inline-end: -12%;
  inline-size: 55%;
  aspect-ratio: 1;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  opacity: 0.5;
}

.media-slot > * {
  position: relative;
}

.media-slot__index {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1;
  color: color-mix(in oklab, var(--ink) 32%, transparent);
}

.media-slot__label {
  font-size: 0.75rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.media-slot__soon {
  position: absolute;
  inset-block-start: var(--space-s);
  inset-inline-start: var(--space-s);
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in oklab, var(--bg, #faf8f4) 88%, var(--accent) 12%);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.65rem;
}

.media-slot--b {
  aspect-ratio: 4 / 3;
}

/* ---------------------------------------------------------------
   Bandeau assurance décennale (home)
   --------------------------------------------------------------- */
.assurance {
  background: var(--ink);
  color: var(--chalk);
  padding-block: var(--space-l);
}

.assurance__inner {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: 1fr;
  align-items: center;
}

.assurance__seal img {
  width: min(100%, 15rem);
  height: auto;
  display: block;
  filter: invert(1) brightness(1.6);
}

.assurance__text h2 {
  font-size: clamp(1.125rem, 0.95rem + 0.8vw, 1.65rem);
  line-height: 1.2;
  margin: 0.35rem 0 0.5rem;
  max-width: 28ch;
}

.assurance__text p:last-child {
  color: color-mix(in oklab, var(--chalk) 72%, transparent);
  font-size: 0.9375rem;
  margin: 0;
  max-width: 46ch;
}

.assurance__text .eyebrow {
  color: var(--terracotta, var(--stone));
}

.assurance__icon {
  width: 3rem;
  height: 3rem;
  color: var(--stone);
  justify-self: start;
  grid-row: 1;
}

@media (min-width: 48rem) {
  .assurance__inner {
    grid-template-columns: auto 1fr auto;
    gap: var(--space-l);
  }
  .assurance__icon {
    grid-row: auto;
    justify-self: end;
    width: 3.5rem;
    height: 3.5rem;
  }
}

/* ---------------------------------------------------------------
   Sommaire des services : élément actif synchronisé au scroll
   --------------------------------------------------------------- */
.anchor-nav a.is-active {
  color: var(--ink);
  border-color: currentColor;
  font-weight: 600;
}

/* Titres de services : jamais tronqués */
.detail-block h2 {
  max-width: 20ch;
  overflow-wrap: break-word;
  hyphens: manual;
  line-height: 1.14;
  padding-block-end: 0.08em;
  overflow: visible;
}

.detail-block,
.detail-block__aside {
  overflow: visible;
}

[id] {
  scroll-margin-top: calc(var(--header-h) + var(--space-xl));
}

/* États du formulaire */
.form__status[data-state="error"] {
  color: var(--terracotta, #b4442c);
}

}


@layer animations {

/* ---- animations/reveal.css ---- */
/* Révélations pilotées par IntersectionObserver (attribut data-reveal) */

[data-reveal] {
  --reveal-y: 1.5rem;
  opacity: 0;
  transform: translate3d(0, var(--reveal-y), 0);
  transition:
    opacity 900ms var(--ease-out),
    transform 900ms var(--ease-out),
    clip-path 1100ms var(--ease-inout);
  transition-delay: calc(var(--d, 0) * 90ms);
  will-change: opacity, transform;
}

[data-reveal="fade"] {
  --reveal-y: 0.75rem;
}

[data-reveal="mask"] {
  clip-path: inset(0 0 100% 0);
  transform: none;
  opacity: 1;
}

[data-reveal="left"] {
  transform: translate3d(-1.5rem, 0, 0);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  clip-path: inset(0 0 0 0);
}

/* Titres découpés en lignes, révélés en cascade */
.split-line {
  display: block;
  overflow: hidden;
}

.split-line > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 85ms);
}

.is-visible .split-line > span,
.split-line.is-visible > span {
  transform: translateY(0);
}

/* Effet de parallaxe : la valeur est écrite par le JS */
[data-parallax] {
  will-change: transform;
}

/* Compteurs */
[data-count] {
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal].is-visible {
    opacity: 1;
    transform: none;
    clip-path: none;
  }

  .split-line > span {
    transform: none;
  }
}

}


@layer pages {

/* ---- pages/home.css ---- */
/* Section « manifeste » : texte surligné au scroll */
.manifesto p {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1rem + 2.4vw, 3rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
  max-width: 22ch;
}

.manifesto .word {
  color: color-mix(in oklab, var(--ink) 22%, transparent);
  transition: color 420ms var(--ease-out);
}

.manifesto .word.is-lit {
  color: var(--ink);
}

/* Bloc chantier / méthode en deux colonnes décalées */
.method {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 64rem) {
  .method {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--space-2xl);
    align-items: start;
  }

  .method__sticky {
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--space-l));
  }
}

/* Grille des services de la home */
.services-grid {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-l);
  }
}

@media (min-width: 76rem) {
  .services-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Bande d'images en profondeur (parallaxe croisée) */
.depth-strip {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  align-items: stretch;
}

/* Chaque réalisation occupe la même hauteur : média puis légende alignés */
.depth-strip > .frame {
  display: grid;
  grid-template-rows: auto 1fr;
  margin-block: 0;
}

@media (min-width: 64rem) {
  .depth-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-l);
  }
}

/* Zone d'intervention : plan + liste */
.zone {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 64rem) {
  .zone {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-2xl);
    align-items: center;
  }
}

.zone__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
  gap: 0 var(--space-l);
  list-style: none;
  margin: 0;
  padding: 0;
}


/* ---- pages/inner.css ---- */
/* Pages intérieures : rythme éditorial commun */

.detail-block {
  display: grid;
  gap: var(--space-xl);
  padding-block: var(--space-2xl);
  border-block-start: 1px solid var(--line);
}

@media (min-width: 64rem) {
  .detail-block {
    grid-template-columns: minmax(14rem, 0.6fr) minmax(0, 1fr);
    gap: var(--space-2xl);
  }

  .detail-block--reverse > :first-child {
    order: 2;
  }
}

.detail-block h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.4rem);
  line-height: 1.14;
  max-width: 20ch;
  overflow-wrap: break-word;
  hyphens: manual;
}

.detail-block__aside {
  position: relative;
}

@media (min-width: 64rem) {
  .detail-block__aside {
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--space-l));
  }
}

.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-xs);
  max-width: var(--measure);
}

.checklist li {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  gap: var(--space-s);
  align-items: start;
  font-size: 0.9375rem;
}

.checklist svg {
  inline-size: 1.1rem;
  block-size: 1.1rem;
  color: var(--accent);
  margin-block-start: 0.2rem;
}

.timeline {
  display: grid;
  gap: 0;
  counter-reset: step;
}

.timeline > li {
  position: relative;
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-m) 0 var(--space-m) var(--space-xl);
  border-block-start: 1px solid var(--line);
  list-style: none;
}

.timeline > li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: var(--space-m);
  font-size: 0.75rem;
  letter-spacing: var(--tracking-label);
  color: var(--accent);
}

.timeline h3 {
  font-size: var(--step-1);
}

.timeline p {
  font-size: 0.9375rem;
  color: var(--fg-muted);
}

.legal {
  padding-block: calc(var(--header-h) + var(--space-2xl)) var(--space-3xl);
}

.legal h1 {
  font-size: var(--step-3);
  margin-block-end: var(--space-l);
}

.legal h2 {
  font-size: var(--step-1);
}

.legal p,
.legal li {
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.anchor-nav {
  position: sticky;
  inset-block-start: calc(var(--header-h) + var(--space-s));
  display: none;
  gap: 0.35rem;
  font-size: 0.875rem;
}

.anchor-nav a {
  text-decoration: none;
  color: var(--fg-muted);
  padding-block: 0.3rem;
  border-inline-start: 1px solid var(--line);
  padding-inline-start: var(--space-s);
  transition: color var(--dur-fast), border-color var(--dur-fast);
}

.anchor-nav a:hover,
.anchor-nav a[data-active="true"] {
  color: var(--fg);
  border-color: var(--accent);
}

@media (min-width: 64rem) {
  .anchor-nav {
    display: grid;
  }
}

}


@layer utilities {

/* ---- utilities/utilities.css ---- */
.visually-hidden {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.text-muted {
  color: var(--fg-muted);
}

.text-balance {
  text-wrap: balance;
}

.mt-s {
  margin-block-start: var(--space-s);
}

.mt-m {
  margin-block-start: var(--space-m);
}

.mt-l {
  margin-block-start: var(--space-l);
}

.mt-xl {
  margin-block-start: var(--space-xl);
}

.mb-l {
  margin-block-end: var(--space-l);
}

.defer-paint {
  content-visibility: auto;
  contain-intrinsic-size: auto 700px;
}

.no-scroll,
.no-scroll body {
  overflow: hidden;
  overscroll-behavior: none;
}

}