/* ==========================================================================
   VERAC RÉNOVATION — feuille de styles unique
   Direction artistique « Atelier & chantier » : plâtre, ardoise, chêne, sauge.
   Ordre des couches : reset, tokens, base, layout, components, utilities, pages.
   ========================================================================== */
@layer reset, tokens, base, layout, components, utilities, pages;

/* -------------------------------------------------------------------------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { min-block-size: 100vh; }
  img, svg, picture, video { display: block; max-inline-size: 100%; }
  img { block-size: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; }
  ul[class], ol[class] { list-style: none; padding: 0; }
  table { border-collapse: collapse; }
  [hidden] { display: none !important; }
}

/* -------------------------------------------------------------------------- */
@layer tokens {
  :root {
    color-scheme: light;
    /* Palette (hex de référence en commentaire) */
    --plaster: oklch(96.2% 0.009 84.6);      /* #F5F2EC */
    --plaster-2: oklch(92.7% 0.015 80.7);    /* #ECE6DC */
    --plaster-3: oklch(89.4% 0.018 81.3);    /* #E2DBCF */
    --slate: oklch(28.9% 0.021 248.5);       /* #232C35 */
    --slate-2: oklch(38.8% 0.026 248.5);     /* #3A4652 */
    --slate-muted: oklch(48.8% 0.020 248.2); /* #57616B */
    --oak: oklch(65.1% 0.096 65.2);          /* #B8834D */
    --oak-light: oklch(77.8% 0.085 71.4);    /* #D9AE7A */
    --oak-dark: oklch(47.0% 0.084 61.9);     /* #7C4F24 */
    --oak-cta: oklch(51.8% 0.093 62.0);      /* #8E5B2A */
    --sage: oklch(74.9% 0.041 134.7);        /* #A3B49A */
    --sage-light: oklch(90.9% 0.022 130.0);  /* #DCE4D5 */
    --sage-dark: oklch(46.4% 0.048 139.7);   /* #4B6046 */
    --brick: oklch(48.9% 0.147 29.2);        /* #A3352A */
    --on-dark: oklch(94.4% 0.010 81.8);      /* #F0ECE5 */
    --on-dark-muted: oklch(79.1% 0.013 244.3); /* #B4BCC3 */
    --white: #fff;

    /* Rôles */
    --color-bg: var(--plaster);
    --color-surface: var(--plaster-2);
    --color-surface-3: var(--plaster-3);
    --color-text: var(--slate);
    --color-text-muted: var(--slate-muted);
    --color-accent: var(--oak-dark);
    --color-cta: var(--oak-cta);
    --color-success: var(--sage-dark);
    --color-error: var(--brick);
    --color-border: color-mix(in oklch, var(--color-text) 15%, transparent);
    --color-border-strong: color-mix(in oklch, var(--color-text) 32%, transparent);
    --color-focus: var(--oak-dark);
    --msd-accent: #D9AE7A;

    /* Typographie */
    --font-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif-condensed, sans-serif;
    --font-body: "Barlow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --step--2: clamp(0.78rem, 0.76rem + 0.1vi, 0.84rem);
    --step--1: clamp(0.86rem, 0.82rem + 0.18vi, 0.95rem);
    --step-0: clamp(1.0625rem, 1.01rem + 0.27vi, 1.1875rem);
    --step-1: clamp(1.2rem, 1.11rem + 0.45vi, 1.45rem);
    --step-2: clamp(1.38rem, 1.24rem + 0.7vi, 1.8rem);
    --step-3: clamp(1.62rem, 1.38rem + 1.15vi, 2.35rem);
    --step-4: clamp(1.95rem, 1.55rem + 2vi, 3.15rem);
    --step-5: clamp(2.3rem, 1.7rem + 3vi, 4.1rem);
    --step-6: clamp(2.6rem, 1.7rem + 4vi, 5.25rem);
    --measure: 65ch;

    /* Espacements (base 4 px) */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-s: 1rem;
    --space-m: 1.5rem;
    --space-l: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;
    --space-s-l: clamp(1rem, 0.7rem + 1.5vi, 2rem);
    --space-m-xl: clamp(1.5rem, 1rem + 2.5vi, 3rem);
    --space-l-2xl: clamp(2rem, 1.2rem + 4vi, 4rem);
    --section: clamp(3.5rem, 2.2rem + 6.5vi, 7.5rem);
    --gutter: clamp(1rem, 0.6rem + 2vi, 2.5rem);
    --container: 76rem;
    --header-h: 4.25rem;

    /* Formes, ombres, mouvement */
    --radius-s: 2px;
    --radius-m: 4px;
    --rule: 4px;
    --shadow-panel: 0 1px 2px rgb(35 44 53 / 0.08), 0 12px 32px -12px rgb(35 44 53 / 0.28);
    --shadow-dialog: 0 24px 64px -16px rgb(20 26 32 / 0.55);
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-1: 150ms;
    --dur-2: 250ms;
    --dur-3: 450ms;
  }
}

/* -------------------------------------------------------------------------- */
@layer base {
  html { scroll-padding-block-start: calc(var(--header-h) + 1rem); }
  @media (prefers-reduced-motion: no-preference) { html:focus-within { scroll-behavior: smooth; } }
  html.is-modal { overflow: hidden; }
  body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.6;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
  }
  h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.05; hyphens: manual; }
  h1, h2 { text-wrap: balance; }
  h1 { font-size: var(--step-5); font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; line-height: 0.95; }
  h2 { font-size: var(--step-4); font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1; }
  h3 { font-size: var(--step-2); font-weight: 600; letter-spacing: 0.005em; }
  h4 { font-size: var(--step-1); font-weight: 600; }
  .lead, .section-head__intro p { text-wrap: pretty; }
  p { max-inline-size: var(--measure); }
  a { color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
  a:hover { text-decoration-thickness: 2px; }
  strong { font-weight: 600; }
  small { font-size: var(--step--1); }
  abbr[title] { text-decoration: none; }
  :focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: 1px; }
  ::selection { background: var(--oak-light); color: var(--slate); }
  hr { border: 0; border-block-start: 1px solid var(--color-border); }
  table { inline-size: 100%; font-variant-numeric: tabular-nums lining-nums; }
  caption { text-align: start; }
  address { font-style: normal; }
  [id] { scroll-margin-block-start: calc(var(--header-h) + 1.5rem); }
}

/* -------------------------------------------------------------------------- */
@layer layout {
  .container { inline-size: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
  .container-wide { inline-size: min(100% - 2 * var(--gutter), 88rem); margin-inline: auto; }
  .section { padding-block: var(--section); }
  .section--tight { padding-block: calc(var(--section) * 0.6); }
  /* Rendu différé des sections hors écran (le simulateur, qui contient des éléments fixes, en est exclu) */
  main > .section:not(.section--tight) { content-visibility: auto; contain-intrinsic-size: auto 900px; }
  .section:not([class*="band"]) + .section:not([class*="band"]) { padding-block-start: 0; }
  .band { background: var(--color-surface); }
  .band--dark { background: var(--slate); color: var(--on-dark); --color-text: var(--on-dark); --color-text-muted: var(--on-dark-muted); --color-accent: var(--oak-light); --color-focus: var(--oak-light); --color-border: color-mix(in oklch, var(--on-dark) 18%, transparent); --color-border-strong: color-mix(in oklch, var(--on-dark) 35%, transparent); }
  .band--sage { background: var(--sage-light); }
  .stack > * + * { margin-block-start: var(--flow, 1em); }
  .grid { display: grid; gap: var(--space-s-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%, 19.5rem), 1fr)); }
  .grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }
  .split { display: grid; gap: var(--space-l-2xl); align-items: start; }
  @media (min-width: 56em) {
    .split { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .split > :first-child { grid-column: 1 / span 6; }
    .split > :last-child { grid-column: 7 / -1; }
    .split--5-7 > :first-child { grid-column: 1 / span 5; }
    .split--5-7 > :last-child { grid-column: 6 / -1; }
    .split--7-5 > :first-child { grid-column: 1 / span 7; }
    .split--7-5 > :last-child { grid-column: 8 / -1; }
    .split--center { align-items: center; }
  }
}

/* -------------------------------------------------------------------------- */
@layer components {
  /* Lien d'évitement */
  .skip-link { position: absolute; inset-inline-start: var(--space-s); inset-block-start: -10rem; z-index: 100; padding: var(--space-xs) var(--space-s); background: var(--slate); color: var(--on-dark); font-weight: 600; border-radius: var(--radius-s); }
  .skip-link:focus { inset-block-start: var(--space-s); }

  /* Icônes */
  svg.icon { display: inline-block; vertical-align: -0.2em; }
  .icon { inline-size: 1.25em; block-size: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: square; stroke-linejoin: miter; }
  .icon--sm { inline-size: 1em; block-size: 1em; }
  .icon--lg { inline-size: 1.75rem; block-size: 1.75rem; }

  /* Surtitres et têtes de section */
  .eyebrow { font-family: var(--font-display); font-weight: 600; font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); }
  .eyebrow__num { font-variant-numeric: tabular-nums; }
  .lead { font-size: var(--step-1); line-height: 1.5; color: var(--color-text); max-inline-size: 58ch; }
  .muted { color: var(--color-text-muted); }
  .section-head { display: grid; gap: var(--space-s); margin-block-end: var(--space-l-2xl); position: relative; padding-block-start: calc(var(--space-m) + var(--rule)); }
  .section-head::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: min(25%, 14rem); block-size: var(--rule); background: var(--color-text); }
  .section-head h2 { max-inline-size: 18ch; }
  .section-head__intro { color: var(--color-text-muted); max-inline-size: 56ch; }
  .section-head__intro > * + * { margin-block-start: var(--space-s); }
  @media (min-width: 64em) {
    .section-head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-s-l); align-items: end; }
    .section-head > .eyebrow, .section-head > h2 { grid-column: 1 / span 6; }
    .section-head > .section-head__intro { grid-column: 7 / -1; grid-row: 1 / span 2; align-self: end; }
    .section-head--stack > .eyebrow, .section-head--stack > h2 { grid-column: 1 / -1; }
    .section-head--stack > .section-head__intro { grid-column: 1 / span 8; grid-row: auto; }
  }
  .pencil { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8.5c22-3.2 46-4.6 70-3.6 18 .7 30 2.6 48 2.1 26-.8 50-3.6 78-2.6' fill='none' stroke='%23B8834D' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M30 10.2c30-2 70-2.6 120-1.6' fill='none' stroke='%23B8834D' stroke-width='1.4' stroke-linecap='round' opacity='.6'/%3E%3C/svg%3E") left bottom / 100% 0.32em no-repeat; padding-block-end: 0.1em; }

  /* Boutons */
  .btn { --btn-bg: transparent; --btn-fg: var(--color-text); --btn-bd: var(--color-text); display: inline-flex; align-items: center; justify-content: center; gap: 0.55em; min-block-size: 3rem; padding: 0.55rem 1.35rem; border: 2px solid var(--btn-bd); border-radius: var(--radius-s); background: var(--btn-bg); color: var(--btn-fg); font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; letter-spacing: 0.04em; line-height: 1.1; text-transform: uppercase; text-decoration: none; text-align: center; transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
  .btn:hover { --btn-bg: var(--color-text); --btn-fg: var(--color-bg); text-decoration: none; }
  .band--dark .btn:hover { --btn-fg: var(--slate); }
  .btn:active { transform: translateY(1px); }
  .btn .icon { transition: transform var(--dur-1) var(--ease-out); }
  .btn:hover .icon--arrow { transform: translateX(3px); }
  .btn--primary { --btn-bg: var(--oak-cta); --btn-fg: var(--white); --btn-bd: var(--oak-cta); }
  .btn--primary:hover { --btn-bg: var(--slate); --btn-bd: var(--slate); --btn-fg: var(--white); }
  .band--dark .btn--primary:hover { --btn-bg: var(--on-dark); --btn-bd: var(--on-dark); --btn-fg: var(--slate); }
  .btn--light { --btn-bg: var(--on-dark); --btn-fg: var(--slate); --btn-bd: var(--on-dark); }
  .btn--light:hover { --btn-bg: var(--oak-light); --btn-bd: var(--oak-light); --btn-fg: var(--slate); }
  .btn--ghost { --btn-bd: transparent; padding-inline: 0.5rem; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
  .btn--sm { min-block-size: 2.75rem; padding: 0.4rem 0.95rem; font-size: 0.98rem; }
  .btn--lg { min-block-size: 3.5rem; padding-inline: 1.75rem; font-size: 1.15rem; }
  .btn--block { inline-size: 100%; }
  .btn[disabled], .btn[aria-busy="true"] { opacity: 0.6; cursor: not-allowed; }
  .btn-row { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-s); align-items: center; }
  .link-arrow { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 600; text-decoration: none; color: var(--color-accent); min-block-size: 2.75rem; }
  .link-arrow span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
  .link-arrow .icon { transition: transform var(--dur-1) var(--ease-out); }
  .link-arrow:hover .icon { transform: translateX(3px); }
  .link-phone { display: inline-flex; align-items: center; gap: 0.45em; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: 0.02em; color: var(--color-text); text-decoration: none; min-block-size: 2.75rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .link-phone:hover { color: var(--color-accent); }

  /* Étiquettes d'atelier (coin coupé) */
  .tag { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.22rem 0.75rem 0.22rem 0.6rem; background: var(--plaster-3); color: var(--slate); font-family: var(--font-display); font-weight: 600; font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.35; clip-path: polygon(0 0, calc(100% - 0.55rem) 0, 100% 0.55rem, 100% 100%, 0 100%); white-space: nowrap; }
  .tag--sage { background: var(--sage); }
  .tag--oak { background: var(--oak-light); }
  .tag--slate { background: var(--slate); color: var(--on-dark); }
  .tag--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--color-border-strong); clip-path: none; }
  .tag-list { display: flex; flex-wrap: wrap; gap: 0.4rem; }

  /* Triangle de menuisier (puces) */
  .tri-list { display: grid; gap: 0.55rem; }
  .tri-list li { position: relative; padding-inline-start: 1.6rem; }
  .tri-list li::before { content: ""; position: absolute; inset-inline-start: 0.1rem; inset-block-start: 0.42em; inline-size: 0.85rem; block-size: 0.78rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 3 21.5 19.5H2.5L12 3' fill='none' stroke='%237C4F24' stroke-width='3' stroke-linejoin='miter'/%3E%3C/svg%3E") center / contain no-repeat; }
  .band--dark .tri-list li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 3 21.5 19.5H2.5L12 3' fill='none' stroke='%23D9AE7A' stroke-width='3' stroke-linejoin='miter'/%3E%3C/svg%3E"); }

  /* Barre d'information */
  .topbar { background: var(--slate); color: var(--on-dark); font-size: var(--step--1); }
  .topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); min-block-size: 2.25rem; }
  .topbar p { max-inline-size: none; }
  .topbar__claims { display: none; font-family: var(--font-display); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-dark); }
  .topbar__claims span { color: var(--oak-light); padding-inline: 0.35em; }
  @media (min-width: 48em) { .topbar__claims { display: block; } }
  .status { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; }
  .status__dot { inline-size: 0.6rem; block-size: 0.6rem; border-radius: 50%; background: var(--on-dark-muted); box-shadow: 0 0 0 3px color-mix(in oklch, var(--on-dark-muted) 30%, transparent); flex: none; }
  .status.is-open .status__dot { background: #8FBF85; box-shadow: 0 0 0 3px color-mix(in oklch, #8FBF85 30%, transparent); }
  .status--light .status__dot { background: var(--slate-muted); box-shadow: 0 0 0 3px color-mix(in oklch, var(--slate-muted) 22%, transparent); }
  .status--light.is-open .status__dot { background: var(--sage-dark); box-shadow: 0 0 0 3px color-mix(in oklch, var(--sage-dark) 22%, transparent); }

  /* En-tête collant */
  .header { position: sticky; inset-block-start: 0; z-index: 50; border-block-end: 1px solid var(--color-border); }
  .header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in oklch, var(--plaster) 94%, transparent); -webkit-backdrop-filter: saturate(1.2) blur(10px); backdrop-filter: saturate(1.2) blur(10px); }
  .header__inner { display: flex; align-items: center; gap: var(--space-s); min-block-size: var(--header-h); }
  @supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
      .header { animation: header-compact linear both; animation-timeline: scroll(root); animation-range: 0 160px; }
      @keyframes header-compact { to { box-shadow: 0 8px 24px -16px rgb(35 44 53 / 0.45); } }
    }
  }
  .logo { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--slate); text-decoration: none; margin-inline-end: auto; min-block-size: 2.75rem; }
  .logo__mark { inline-size: 2.15rem; block-size: 2.15rem; flex: none; }
  .logo__text { display: grid; line-height: 1; }
  .logo__name { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; letter-spacing: 0.06em; }
  .logo__sub { font-family: var(--font-display); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.22em; color: var(--oak-dark); margin-block-start: 0.15rem; }
  .band--dark .logo, .footer .logo { color: var(--on-dark); }
  .footer .logo__sub { color: var(--oak-light); }
  .nav__list { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
  .nav__link { display: inline-flex; align-items: center; min-block-size: 2.75rem; font-weight: 600; font-size: 0.98rem; color: var(--slate); text-decoration: none; position: relative; white-space: nowrap; }
  .nav__link::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0.45rem; block-size: 2px; background: var(--oak); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-2) var(--ease-out); }
  .nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
  .nav__link[aria-current="page"] { color: var(--oak-dark); }
  .nav__extra { display: none; }
  .header__phone { display: none; }
  .header__cta { white-space: nowrap; }
  .menu-toggle { display: none; align-items: center; gap: 0.5rem; min-block-size: 2.75rem; padding-inline: 0.85rem; border: 2px solid var(--slate); border-radius: var(--radius-s); background: transparent; font-family: var(--font-display); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
  .menu-toggle__bars { inline-size: 1.15rem; block-size: 0.8rem; display: grid; align-content: space-between; }
  .menu-toggle__bars span { block-size: 2px; background: currentColor; transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-1); }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(1) { transform: translateY(0.35rem) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(3) { transform: translateY(-0.35rem) rotate(-45deg); }
  @media (max-width: 74.99em) {
    .header__inner { flex-wrap: wrap; }
    .header__cta { display: none; }
    .js .header__inner { flex-wrap: nowrap; }
    .js .menu-toggle { display: inline-flex; }
    .js .nav { display: none; position: fixed; z-index: 60; inset: var(--nav-top, 6.5rem) 0 0 0; z-index: 60; overflow-y: auto; background: var(--plaster); padding: var(--space-m) var(--gutter) calc(var(--space-xl) + env(safe-area-inset-bottom)); border-block-start: 1px solid var(--color-border); }
    .js .nav.is-open { display: block; }
    .js .nav__list { display: grid; gap: 0; }
    .js .nav__list li { border-block-end: 1px solid var(--color-border); }
    .js .nav__link { display: flex; min-block-size: 3.5rem; font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; letter-spacing: 0.02em; text-transform: uppercase; }
    .js .nav__link::after { display: none; }
    .js .nav__extra { display: grid; gap: var(--space-s); margin-block-start: var(--space-l); }
    .nav { order: 3; inline-size: 100%; padding-block-end: var(--space-xs); }
    .js .nav { order: 0; inline-size: auto; }
  }
  @media (min-width: 75em) {
    .header__inner { gap: var(--space-m); }
    .nav { margin-inline-end: var(--space-2xs); }
    .nav__list { flex-wrap: nowrap; gap: 1.1rem; }
  }
  @media (min-width: 90em) { .header__phone { display: inline-flex; } .nav__list { gap: 1.4rem; } }

  /* Fil d'Ariane */
  .breadcrumb { padding-block: var(--space-s) 0; font-size: var(--step--1); }
  .breadcrumb ol { padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; }
  .breadcrumb li { display: inline-flex; align-items: center; gap: 0.5rem; }
  .breadcrumb li + li::before { content: ""; inline-size: 0.45rem; block-size: 0.45rem; border-block-start: 1.5px solid var(--color-text-muted); border-inline-end: 1.5px solid var(--color-text-muted); transform: rotate(45deg); }
  .breadcrumb a { color: var(--color-text-muted); display: inline-flex; min-block-size: 2rem; align-items: center; }
  .breadcrumb [aria-current="page"] { color: var(--color-text); font-weight: 600; }

  /* Micro-preuves */
  .proofs { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; font-size: var(--step--1); font-weight: 600; }
  .proofs li { display: inline-flex; align-items: center; gap: 0.45rem; }
  .proofs .icon { color: var(--oak-dark); }
  .band--dark .proofs .icon { color: var(--oak-light); }

  /* Cartes */
  .card { position: relative; display: flex; flex-direction: column; background: var(--plaster); border: 1px solid var(--color-border); border-radius: var(--radius-s); overflow: hidden; }
  .band .card { background: var(--plaster); }
  .card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--plaster-3); }
  .card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale var(--dur-3) var(--ease-out); }
  @media (hover: hover) and (pointer: fine) { .card:hover .card__media img { scale: 1.03; } }
  .card__media .tag { position: absolute; inset-block-start: 0.75rem; inset-inline-start: 0.75rem; }
  .card__body { display: flex; flex-direction: column; gap: 0.7rem; padding: var(--space-m); flex: 1; }
  .card__body > :last-child { margin-block-start: auto; }
  .card__title { font-size: var(--step-2); }
  .card__title a { color: inherit; text-decoration: none; }
  .card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
  .card__title a:focus-visible { outline: none; }
  .card:has(.card__title a:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 3px; }
  .card__price { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--slate); border-block-start: 1px solid var(--color-border); padding-block-start: 0.7rem; }
  .card__price strong { font-weight: 700; color: var(--oak-dark); }
  .card--flat { padding: var(--space-m); gap: 0.6rem; }
  .card--flat .icon--lg { color: var(--oak-dark); }
  .band--dark .card { background: var(--slate-2); border-color: transparent; }

  /* Faits (listes de définitions) */
  .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: 0; border-block-start: 1px solid var(--color-border); }
  .facts > div { padding: 0.75rem 0.9rem 0.75rem 0; border-block-end: 1px solid var(--color-border); }
  .facts dt { font-family: var(--font-display); font-weight: 600; font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
  .facts dd { margin: 0.15rem 0 0; font-weight: 600; }

  /* Cote d'architecte */
  .cote { position: relative; display: flex; justify-content: center; align-items: center; min-block-size: 1.6rem; color: var(--color-text); }
  .cote::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 50%; border-block-start: 1.5px solid currentColor; }
  .cote::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 44%, currentColor 44% 56%, transparent 56%) left center / 12px 12px no-repeat, linear-gradient(135deg, transparent 44%, currentColor 44% 56%, transparent 56%) right center / 12px 12px no-repeat, linear-gradient(currentColor, currentColor) 5px center / 1.5px 100% no-repeat, linear-gradient(currentColor, currentColor) calc(100% - 5px) center / 1.5px 100% no-repeat; }
  .cote__val { position: relative; z-index: 1; padding-inline: 0.6rem; background: var(--cote-bg, var(--color-bg)); font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.04em; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .key-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--space-l) var(--space-m); }
  .key-figure { display: grid; gap: 0.5rem; }
  .key-figure__num { font-family: var(--font-display); font-weight: 700; font-size: var(--step-5); line-height: 0.9; font-variant-numeric: tabular-nums lining-nums; }
  .key-figure p { color: var(--color-text-muted); font-size: var(--step--1); }

  /* Mètre pliant */
  .ruler-line { block-size: 6px; background: repeating-linear-gradient(90deg, var(--oak) 0 7.5rem, var(--plaster-3) 7.5rem 15rem); }
  .method { display: grid; gap: 0; counter-reset: method; }
  .method__item { display: grid; grid-template-columns: 3.25rem 1fr; gap: var(--space-s); }
  .method__seg { position: relative; display: grid; place-items: start center; padding-block-start: 0.6rem; background: var(--oak); color: var(--slate); font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; line-height: 1; background-image: repeating-linear-gradient(180deg, transparent 0 11px, rgb(35 44 53 / 0.45) 11px 12px); background-size: 9px 100%; background-repeat: no-repeat; background-position: right top; }
  .method__item:nth-child(even) .method__seg { background-color: var(--plaster-3); }
  .band--dark .method__item:nth-child(even) .method__seg { background-color: var(--on-dark); }
  .method__seg::after { content: ""; position: absolute; inset-block-end: -4px; inset-inline-start: 50%; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--slate-2); translate: -50% 0; z-index: 1; box-shadow: 0 0 0 2px var(--oak-light); }
  .method__item:last-child .method__seg::after { display: none; }
  .method__body { padding-block: 0.6rem var(--space-l); }
  .method__body h3 { font-size: var(--step-1); text-transform: uppercase; letter-spacing: 0.02em; font-weight: 700; }
  .method__body p { color: var(--color-text-muted); font-size: var(--step--1); margin-block-start: 0.35rem; }
  .method__meta { display: inline-block; margin-block-start: 0.5rem; font-family: var(--font-display); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: var(--step--2); color: var(--color-accent); }
  @media (min-width: 64em) {
    .method { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .method__item { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 0; }
    .method__seg { place-items: center start; padding: 0.55rem 0.75rem; block-size: 3.25rem; background-image: repeating-linear-gradient(90deg, transparent 0 11px, rgb(35 44 53 / 0.45) 11px 12px); background-size: 100% 9px; background-position: left top; }
    .method__seg::after { inset-block-end: auto; inset-block-start: 50%; inset-inline-start: auto; inset-inline-end: -4px; translate: 0 -50%; }
    .method__body { padding: var(--space-s) var(--space-s) 0 0; }
  }

  /* Comparateur avant / après */
  .compare { margin: 0; }
  .compare__frame { position: relative; display: grid; gap: var(--space-s); }
  .compare__frame img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-s); background: var(--plaster-3); }
  .compare__tag { position: absolute; inset-block-start: 0.75rem; padding: 0.3rem 0.65rem; background: color-mix(in oklch, var(--slate) 85%, transparent); color: var(--on-dark); font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; border-radius: var(--radius-s); pointer-events: none; z-index: 2; }
  .compare__tag--before { inset-inline-start: 0.75rem; }
  .compare__tag--after { inset-inline-end: 0.75rem; }
  .compare__range, .compare__handle { display: none; }
  .compare figcaption { margin-block-start: 0.75rem; font-size: var(--step--1); color: var(--color-text-muted); }
  .compare__note { display: block; margin-block-start: 0.2rem; font-style: italic; }
  /* Sans JS : deux images empilées, étiquettes au-dessus de chaque image */
  html:not(.js) .compare__frame { grid-template-columns: 1fr; }
  html:not(.js) .compare__after { order: 2; }
  html:not(.js) .compare__tag--after { inset-block-start: auto; inset-inline-start: 0.75rem; inset-inline-end: auto; }
  @media (min-width: 48em) {
    html:not(.js) .compare__frame { grid-template-columns: 1fr 1fr; }
    html:not(.js) .compare__tag--after { inset-inline-start: calc(50% + 0.75rem + var(--space-s) / 2); inset-block-start: 0.75rem; }
  }
  .js .compare__frame { --pos: 50%; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-s); touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; background: var(--plaster-3); }
  .js .compare__frame img { position: absolute; inset: 0; block-size: 100%; border-radius: 0; pointer-events: none; }
  .js .compare__before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
  .js .compare__frame::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: var(--pos); inline-size: 3px; translate: -50% 0; background: var(--white); box-shadow: 0 0 0 1px rgb(35 44 53 / 0.35); z-index: 2; pointer-events: none; }
  .js .compare__range { display: block; position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; appearance: none; -webkit-appearance: none; background: transparent; pointer-events: none; z-index: 1; }
  .js .compare__range::-webkit-slider-thumb { -webkit-appearance: none; inline-size: 44px; block-size: 44px; opacity: 0; }
  .js .compare__range::-moz-range-thumb { inline-size: 44px; block-size: 44px; opacity: 0; border: 0; }
  .js .compare__handle { display: grid; place-items: center; position: absolute; inset-block-start: 50%; inset-inline-start: var(--pos); translate: -50% -50%; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%; background: var(--slate); color: var(--white); border: 3px solid var(--white); box-shadow: 0 4px 14px rgb(0 0 0 / 0.35); z-index: 3; pointer-events: none; }
  .js .compare__handle .icon { inline-size: 1.4rem; block-size: 1.4rem; }
  .compare:has(.compare__range:focus-visible) .compare__handle { outline: 3px solid var(--oak-light); outline-offset: 3px; box-shadow: 0 0 0 7px var(--slate), 0 4px 14px rgb(0 0 0 / 0.35); }
  .compare.is-dragging .compare__handle { scale: 1.08; }

  /* Tableaux */
  .table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-s); background: var(--plaster); }
  .table-wrap:focus-visible { outline-offset: 2px; }
  .table { font-size: var(--step--1); }
  .table caption { padding: var(--space-s) var(--space-m) var(--space-xs); font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); text-transform: uppercase; letter-spacing: 0.02em; }
  .table th, .table td { padding: 0.75rem var(--space-m) 0.75rem 0; text-align: start; vertical-align: top; border-block-start: 1px solid var(--color-border); }
  .table th:first-child, .table td:first-child { padding-inline-start: var(--space-m); }
  .table thead th { background: var(--plaster-3); font-family: var(--font-display); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: var(--step--2); white-space: nowrap; }
  .table tbody th { font-weight: 600; }
  .table .num { white-space: nowrap; font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; }
  .table tfoot td, .table tfoot th { font-weight: 600; }
  .table__note { padding: var(--space-xs) var(--space-m) var(--space-s); font-size: var(--step--2); color: var(--color-text-muted); border-block-start: 1px solid var(--color-border); max-inline-size: none; }

  /* Encadrés */
  .note { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.85rem; padding: var(--space-s) var(--space-m); border-inline-start: var(--rule) solid var(--oak); background: var(--plaster-2); border-radius: var(--radius-s); font-size: var(--step--1); }
  .note > .icon { color: var(--oak-dark); margin-block-start: 0.2rem; }
  .note > :not(.icon) { grid-column: 2; }
  .note strong:first-child { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: var(--step--1); }
  .note--demo { border-inline-start-color: var(--slate); background: repeating-linear-gradient(135deg, var(--plaster-2) 0 14px, color-mix(in oklch, var(--plaster-2) 70%, var(--plaster-3)) 14px 28px); }
  .note--sage { border-inline-start-color: var(--sage-dark); background: var(--sage-light); }
  .note--warn { border-inline-start-color: var(--brick); }
  .note--warn > .icon { color: var(--brick); }
  .band .note { background: var(--plaster); }
  .band--sage .note--demo { background: var(--plaster); }

  /* FAQ */
  .faq { display: grid; border-block-start: 2px solid var(--color-text); }
  .faq details { border-block-end: 1px solid var(--color-border-strong); }
  .faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-s); padding-block: var(--space-s); min-block-size: 3.5rem; cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); line-height: 1.2; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: ""; flex: none; inline-size: 1.4rem; block-size: 1.4rem; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; transition: transform var(--dur-2) var(--ease-out); }
  .faq details[open] summary::after { transform: rotate(45deg); }
  .faq summary:hover { color: var(--color-accent); }
  .faq__answer { padding-block-end: var(--space-m); color: var(--color-text-muted); }
  .faq__answer > * + * { margin-block-start: 0.6rem; }
  @supports (interpolate-size: allow-keywords) {
    @media (prefers-reduced-motion: no-preference) {
      .faq { interpolate-size: allow-keywords; }
      .faq details::details-content { block-size: 0; overflow: clip; transition: block-size var(--dur-2) var(--ease-out), content-visibility var(--dur-2) allow-discrete; }
      .faq details[open]::details-content { block-size: auto; }
    }
  }

  /* Formulaires */
  .form { display: grid; gap: var(--space-m); }
  .form-row { display: grid; gap: var(--space-m); }
  @media (min-width: 40em) { .form-row--2 { grid-template-columns: 1fr 1fr; } }
  .field { display: grid; gap: 0.4rem; align-content: start; }
  .field__label, .fieldset__legend { font-weight: 600; font-size: var(--step--1); }
  .field__label .req, .fieldset__legend .req { color: var(--brick); }
  .field__hint { font-size: var(--step--2); color: var(--color-text-muted); max-inline-size: none; }
  .input, .select, .textarea { inline-size: 100%; min-block-size: 3rem; padding: 0.6rem 0.85rem; background: var(--white); color: var(--slate); border: 2px solid var(--slate-muted); border-radius: var(--radius-s); font-size: 1.0625rem; line-height: 1.4; transition: border-color var(--dur-1); }
  .select { appearance: none; -webkit-appearance: none; padding-inline-end: 2.5rem; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23232C35' stroke-width='2'/%3E%3C/svg%3E") right 0.75rem center / 1.15rem no-repeat; }
  .textarea { min-block-size: 8rem; resize: vertical; field-sizing: content; max-block-size: 22rem; }
  .input:hover, .select:hover, .textarea:hover { border-color: var(--slate); }
  .input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 3px solid var(--oak-dark); outline-offset: 1px; border-color: var(--slate); }
  [aria-invalid="true"] { border-color: var(--brick) !important; }
  .field-error { display: flex; gap: 0.4rem; align-items: flex-start; color: var(--brick); font-size: var(--step--1); font-weight: 600; max-inline-size: none; }
  .field-error .icon { margin-block-start: 0.15rem; }
  .field-ok { color: var(--sage-dark); font-size: var(--step--1); font-weight: 600; }
  .fieldset { border: 0; padding: 0; margin: 0; min-inline-size: 0; display: grid; gap: 0.6rem; }
  .fieldset__legend { padding: 0; margin-block-end: 0.5rem; }
  .check { display: flex; gap: 0.7rem; align-items: flex-start; min-block-size: 2.75rem; padding-block: 0.35rem; cursor: pointer; }
  .check input { inline-size: 1.35rem; block-size: 1.35rem; margin-block-start: 0.15rem; accent-color: var(--slate); flex: none; }
  .check-row { display: flex; flex-wrap: wrap; gap: 0 var(--space-m); }
  .switch { display: inline-flex; align-items: center; gap: 0.7rem; min-block-size: 2.75rem; cursor: pointer; font-weight: 600; }
  .switch input { appearance: none; -webkit-appearance: none; position: relative; inline-size: 2.9rem; block-size: 1.6rem; border-radius: 1rem; background: var(--slate-muted); transition: background-color var(--dur-2); flex: none; margin: 0; }
  .switch input::after { content: ""; position: absolute; inset-block-start: 0.2rem; inset-inline-start: 0.2rem; inline-size: 1.2rem; block-size: 1.2rem; border-radius: 50%; background: var(--white); transition: translate var(--dur-2) var(--ease-out); }
  .switch input:checked { background: var(--sage-dark); }
  .switch input:checked::after { translate: 1.3rem 0; }
  .form-summary { padding: var(--space-s) var(--space-m); border: 2px solid var(--brick); border-radius: var(--radius-s); background: var(--white); }
  .form-summary h3 { font-size: var(--step-1); color: var(--brick); }
  .form-summary ul { margin-block-start: 0.4rem; padding-inline-start: 1.2rem; }
  .form-success { padding: var(--space-m); border-inline-start: var(--rule) solid var(--sage-dark); background: var(--sage-light); border-radius: var(--radius-s); }
  .form-success h3 { font-size: var(--step-2); }
  .hp { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .counter { font-size: var(--step--2); color: var(--color-text-muted); text-align: end; max-inline-size: none; }

  /* Pastilles de filtre */
  .pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .pill { min-block-size: 2.75rem; padding: 0.35rem 1rem; border: 2px solid var(--color-border-strong); border-radius: var(--radius-s); background: var(--plaster); color: var(--slate); font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: 0.05em; text-transform: uppercase; transition: background-color var(--dur-1), border-color var(--dur-1); }
  .pill:hover { border-color: var(--slate); }
  .pill[aria-pressed="true"] { background: var(--slate); border-color: var(--slate); color: var(--on-dark); }
  .pill__count { font-variant-numeric: tabular-nums; opacity: 0.8; margin-inline-start: 0.2rem; }

  /* Étoiles */
  .stars { display: inline-flex; gap: 2px; color: var(--oak); }
  .stars .icon { inline-size: 1.05rem; block-size: 1.05rem; stroke-width: 1.5; }
  .stars .icon.is-full { fill: var(--oak); stroke: var(--oak-dark); }
  .stars .icon:not(.is-full) { stroke: var(--slate-muted); }

  /* CTA final */
  .cta-final { position: relative; overflow: hidden; }
  .cta-final__inner { position: relative; z-index: 1; display: grid; gap: var(--space-l); }
  .cta-final h2 { font-size: var(--step-5); max-inline-size: 14ch; }
  .cta-final__actions { display: grid; gap: var(--space-s); align-content: start; }
  .cta-final__actions .btn { justify-content: space-between; inline-size: 100%; }
  .cta-final__note { display: flex; align-items: center; gap: 0.5rem; color: var(--on-dark-muted); font-size: var(--step--1); }
  .cta-final__mark { position: absolute; inset-inline-end: -4rem; inset-block-end: -6rem; inline-size: 24rem; block-size: 24rem; color: var(--slate-2); pointer-events: none; }
  @media (min-width: 56em) { .cta-final__inner { grid-template-columns: 1.3fr 1fr; align-items: end; } }

  /* Pied de page */
  .footer { background: var(--slate); color: var(--on-dark); font-size: var(--step--1); --color-accent: var(--oak-light); --color-focus: var(--oak-light); --color-text-muted: var(--on-dark-muted); --color-border: color-mix(in oklch, var(--on-dark) 16%, transparent); }
  .footer a { color: var(--on-dark); }
  .footer a:hover { color: var(--oak-light); }
  .footer__grid { display: grid; gap: var(--space-l); padding-block: var(--space-2xl) var(--space-l); }
  @media (min-width: 48em) { .footer__grid { grid-template-columns: 1.3fr 1fr; } }
  @media (min-width: 72em) { .footer__grid { grid-template-columns: 1.25fr 0.8fr 0.8fr 1.6fr; } }
  .footer__title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--oak-light); margin-block-end: var(--space-xs); }
  .footer__brand { display: grid; gap: var(--space-s); align-content: start; }
  .footer__slogan { font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); line-height: 1.2; }
  .footer__nap { display: grid; gap: 0.2rem; color: var(--on-dark-muted); }
  .footer__nap a { color: var(--on-dark); }
  .footer__links { display: grid; gap: 0; }
  .footer__links a { display: inline-flex; align-items: center; min-block-size: 2.25rem; text-decoration: none; }
  .footer__links a:hover { text-decoration: underline; }
  .footer__towns { display: flex; flex-wrap: wrap; gap: 0 0.15rem; color: var(--on-dark-muted); }
  .footer__towns li:not(:last-child)::after { content: "·"; padding-inline: 0.35rem; color: var(--slate-muted); }
  .footer__towns a { display: inline-flex; min-block-size: 1.9rem; align-items: center; color: var(--on-dark); text-decoration: none; }
  .footer__towns a:hover { text-decoration: underline; color: var(--oak-light); }
  .footer__legal { display: grid; gap: var(--space-s); padding-block: var(--space-m); border-block-start: 1px solid var(--color-border); color: var(--on-dark-muted); }
  .footer__legal p { max-inline-size: none; }
  .footer__legal-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
  .footer__legal-links a { display: inline-flex; min-block-size: 2.25rem; align-items: center; }
  .footer__demo { padding-block: var(--space-s) calc(var(--space-l) + 4.5rem); border-block-start: 1px solid var(--color-border); color: var(--on-dark-muted); }
  .footer__demo a { color: var(--oak-light); }
  @media (min-width: 48em) { .footer__demo { padding-block-end: var(--space-xl); } }

  /* Barre d'actions mobile */
  .mobile-bar { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 40; display: grid; grid-template-columns: 1fr 1.4fr; gap: 0.5rem; padding: 0.5rem var(--gutter) calc(0.5rem + env(safe-area-inset-bottom)); background: var(--slate); box-shadow: 0 -8px 24px -12px rgb(0 0 0 / 0.5); }
  .mobile-bar .btn { min-block-size: 3rem; padding-inline: 0.75rem; }
  .mobile-bar .btn--light:hover { --btn-bg: var(--oak-light); }
  @media (max-width: 47.99em) { .with-bar { padding-block-end: 4.25rem; } }
  @media (min-width: 48em) { .mobile-bar { display: none; } }

  /* Dialogue */
  .dialog { margin: auto; inline-size: min(100% - 1.5rem, 62rem); max-block-size: calc(100dvh - 1.5rem); padding: 0; border: 0; border-radius: var(--radius-m); background: var(--plaster); color: var(--slate); box-shadow: var(--shadow-dialog); overflow: auto; overscroll-behavior: contain; }
  .dialog::backdrop { background: rgb(20 26 32 / 0.72); }
  .dialog__bar { position: sticky; inset-block-start: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); padding: 0.5rem 0.5rem 0.5rem var(--space-m); background: var(--slate); color: var(--on-dark); }
  .dialog__count { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
  .dialog__nav { display: flex; gap: 0.35rem; }
  .icon-btn { display: inline-grid; place-items: center; min-inline-size: 2.75rem; min-block-size: 2.75rem; padding: 0 0.6rem; border: 2px solid transparent; border-radius: var(--radius-s); background: transparent; color: inherit; gap: 0.35rem; grid-auto-flow: column; font-family: var(--font-display); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
  .icon-btn:hover { border-color: currentColor; }
  .dialog__body { display: grid; gap: var(--space-l); padding: var(--space-m); }
  @media (min-width: 56em) { .dialog__body { grid-template-columns: 1.25fr 1fr; padding: var(--space-l); } }
  .dialog__media img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-s); }
  .dialog__text { display: grid; gap: var(--space-s); align-content: start; }
  .dialog__text h2 { font-size: var(--step-3); }
  .dialog .facts > div:last-child { grid-column: 1 / -1; }
  @media (prefers-reduced-motion: no-preference) {
    .dialog[open] { animation: dialog-in var(--dur-2) var(--ease-out); }
    @keyframes dialog-in { from { opacity: 0; translate: 0 12px; } }
  }

  /* Apparition au défilement */
  @media (prefers-reduced-motion: no-preference) {
    .js [data-reveal] { animation: reveal-safety 0s linear 3s forwards; }
    .js.reveal-on [data-reveal] { animation: none; }
    .js.reveal-on [data-reveal]:not(.is-in) { opacity: 0; translate: 0 18px; }
    .js.reveal-on [data-reveal].is-in { opacity: 1; translate: 0 0; transition: opacity var(--dur-3) var(--ease-out) calc(var(--i, 0) * 50ms), translate var(--dur-3) var(--ease-out) calc(var(--i, 0) * 50ms); }
    @keyframes reveal-safety { to { opacity: 1; translate: 0 0; } }
  }
}

/* -------------------------------------------------------------------------- */
@layer utilities {
  .visually-hidden { position: absolute !important; inline-size: 1px !important; block-size: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; }
  .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-l-2xl); }
  .nowrap { white-space: nowrap; }
  .tnum { font-variant-numeric: tabular-nums lining-nums; }
  .center { text-align: center; }
}

/* -------------------------------------------------------------------------- */
@layer pages {
  /* ---------- Héros ---------- */
  .hero { display: grid; gap: var(--space-l); padding-block: var(--space-l-2xl); }
  .hero__text { display: grid; gap: var(--space-m); align-content: center; }
  .hero__text h1 { font-size: var(--step-6); max-inline-size: 13ch; }
  .hero__text .lead { max-inline-size: 46ch; }
  .hero__media { position: relative; margin: 0; }
  .hero__media img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 62% 55%; border-radius: var(--radius-s); }
  .hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgb(20 26 32 / 0.55)); border-radius: var(--radius-s); pointer-events: none; }
  .hero__label { position: absolute; inset-block-start: var(--space-s); inset-inline-start: var(--space-s); z-index: 2; }
  .hero__cote { position: absolute; inset-inline: 8%; inset-block-end: var(--space-s); z-index: 2; color: var(--white); --cote-bg: transparent; }
  .hero__cote .cote__val { text-shadow: 0 1px 6px rgb(0 0 0 / 0.6); padding-inline: 0.75rem; background: color-mix(in oklch, var(--slate) 80%, transparent); }
  .hero .container { display: contents; }
  .hero > * { inline-size: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
  @media (min-width: 56em) {
    .hero { grid-template-columns: [full-start] minmax(var(--gutter), 1fr) [content-start] minmax(0, calc(var(--container) / 2)) [mid] minmax(0, calc(var(--container) / 2)) [content-end] minmax(var(--gutter), 1fr) [full-end]; column-gap: 0; padding-block-start: var(--space-xl); }
    .hero > * { inline-size: auto; margin-inline: 0; }
    .hero__text { grid-column: content-start / mid; padding-inline-end: var(--space-l-2xl); }
    /* Photo au format de la source (4:3) : jamais agrandie au-delà de sa définition, centrée sur la hauteur du texte */
    .hero__media { grid-column: mid / full-end; align-self: center; aspect-ratio: 4 / 3; }
    .hero__media img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; aspect-ratio: auto; border-radius: 0; }
    .hero__media::after { border-radius: 0; }
  }

  /* Héros des pages intérieures */
  .page-hero { padding-block: var(--space-m) var(--space-l-2xl); }
  .page-hero + .section:not([class*="band"]) { padding-block-start: var(--space-m); }
  .page-hero__grid { display: grid; gap: var(--space-l); margin-block-start: var(--space-l); }
  .page-hero__text { display: grid; gap: var(--space-m); align-content: start; }
  .page-hero__text h1 { max-inline-size: 16ch; }
  .page-hero__media { margin: 0; position: relative; }
  .page-hero__media img { inline-size: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-s); }
  @media (min-width: 56em) {
    .page-hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-s-l); align-items: end; }
    .page-hero__grid > .page-hero__text { grid-column: 1 / span 6; }
    .page-hero__grid > .page-hero__media { grid-column: 7 / -1; }
    .page-hero--text .page-hero__grid > .page-hero__text { grid-column: 1 / span 10; }
    .page-hero--text .page-hero__text h1 { max-inline-size: 26ch; }
  }

  /* ---------- Métiers (accueil) ---------- */
  .trades { counter-reset: trade; }
  .trade .card__body { gap: 0.85rem; }
  .trade .tri-list { font-size: var(--step--1); }

  /* ---------- Bloc projet à la une ---------- */
  .feature { display: grid; gap: var(--space-l); align-items: start; }
  @media (min-width: 64em) { .feature { grid-template-columns: 1.45fr 1fr; gap: var(--space-l-2xl); } }
  .feature__facts { display: grid; gap: var(--space-m); }
  .feature__facts h3 { font-size: var(--step-3); }

  /* ---------- Mini-simulateur ---------- */
  .mini-sim { display: grid; gap: var(--space-l); padding: var(--space-m-xl); background: var(--plaster); border: 1px solid var(--color-border); border-block-start: var(--rule) solid var(--slate); border-radius: var(--radius-s); }
  @media (min-width: 64em) { .mini-sim { grid-template-columns: 1fr 1.3fr; align-items: center; } }
  .mini-sim__form { display: grid; gap: var(--space-m); }
  @media (min-width: 40em) { .mini-sim__form { grid-template-columns: 1.5fr 1fr; align-items: end; } .mini-sim__form .btn { grid-column: 1 / -1; justify-self: start; } }
  .input-unit { position: relative; }
  .input-unit .input { padding-inline-end: 4rem; font-variant-numeric: tabular-nums; }
  .input-unit__suffix { position: absolute; inset-inline-end: 0.9rem; inset-block-start: 50%; translate: 0 -50%; font-family: var(--font-display); font-weight: 600; color: var(--slate-muted); pointer-events: none; }
  .mini-sim__hint { font-size: var(--step--1); color: var(--color-text-muted); }
  .mini-sim__live { display: grid; gap: 0.15rem; padding: 0.8rem 1rem; background: var(--plaster-2); border-inline-start: 4px solid var(--oak-cta); font-size: var(--step--1); color: var(--color-text-muted); }
  .mini-sim__live:empty { display: none; }
  .mini-sim__live-label { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.8rem; color: var(--oak-dark); }
  .mini-sim__live strong { font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); line-height: 1.1; color: var(--color-text); font-variant-numeric: tabular-nums; }
  @media (min-width: 40em) { .mini-sim__live { grid-column: 1 / -1; } }

  /* ---------- Zone (accueil et page) ---------- */
  .zone-teaser { display: grid; gap: var(--space-l); align-items: center; }
  @media (min-width: 56em) { .zone-teaser { grid-template-columns: 1fr 1fr; } }
  .mini-map { inline-size: 100%; block-size: auto; color: var(--slate); background: var(--plaster); border: 1px solid var(--color-border); border-radius: var(--radius-s); }
  .town-list { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .town-list li { padding: 0.2rem 0.6rem; background: var(--plaster); border: 1px solid var(--color-border); border-radius: var(--radius-s); font-size: var(--step--1); font-weight: 600; }
  .check-town { display: grid; gap: var(--space-xs); }
  .check-town__row { display: flex; gap: 0.5rem; }
  .check-town__row .input { flex: 1; min-inline-size: 0; }
  .check-town__result { min-block-size: 1.6em; font-weight: 600; font-size: var(--step--1); }
  .check-town__result.is-ok { color: var(--sage-dark); }
  .check-town__result.is-maybe { color: var(--oak-dark); }
  .check-town__result.is-no { color: var(--brick); }

  .zone-layout { display: grid; gap: var(--space-l); align-items: start; }
  @media (min-width: 64em) { .zone-layout { grid-template-columns: 1.6fr 1fr; } .zone-panel { position: sticky; inset-block-start: calc(var(--header-h) + 1rem); } }
  .map { position: relative; margin: 0; }
  .map > svg { inline-size: 100%; block-size: auto; background: var(--plaster); border: 1px solid var(--color-border); border-radius: var(--radius-s); color: var(--slate); }
  .map__river { fill: none; stroke: color-mix(in oklch, var(--slate) 25%, transparent); stroke-linecap: round; stroke-linejoin: round; }
  .map__ring { fill: none; stroke: var(--slate-muted); stroke-width: 1.2; stroke-dasharray: 4 6; }
  .map__ring-label { font-family: var(--font-display); font-weight: 600; font-size: 12px; fill: var(--slate-muted); }
  .map__river-label { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.16em; fill: var(--slate-muted); text-transform: uppercase; }
  .map__dot { stroke: var(--white); stroke-width: 2; transition: r var(--dur-1); }
  .map__town--1 .map__dot { fill: var(--slate); }
  .map__town--2 .map__dot { fill: var(--sage-dark); }
  .map__label { font-family: var(--font-display); font-weight: 600; font-size: 13px; fill: var(--slate); paint-order: stroke; stroke: var(--plaster); stroke-width: 3px; stroke-linejoin: round; }
  .map__town { cursor: pointer; }
  .map__town:hover .map__dot, .map__town:focus-visible .map__dot { r: 9; }
  .map__town:focus-visible { outline: none; }
  .map__town:focus-visible .map__label { fill: var(--oak-dark); text-decoration: underline; }
  .map__town[aria-current="true"] .map__dot { r: 10; fill: var(--oak-dark); }
  .map__town[aria-current="true"] .map__halo { opacity: 1; }
  .map__halo { fill: none; stroke: var(--oak); stroke-width: 3; opacity: 0; }
  .map__workshop path { fill: none; stroke: var(--oak-dark); stroke-width: 3; }
  .map__workshop text { font-family: var(--font-display); font-weight: 700; font-size: 13px; fill: var(--oak-dark); paint-order: stroke; stroke: var(--plaster); stroke-width: 3px; }
  @media (max-width: 39.99em) { .map__label--minor { display: none; } }
  .map__legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-block-start: var(--space-s); font-size: var(--step--1); }
  .map__legend li { display: inline-flex; align-items: center; gap: 0.45rem; }
  .legend-dot { inline-size: 0.8rem; block-size: 0.8rem; border-radius: 50%; border: 2px solid var(--white); box-shadow: 0 0 0 1px var(--color-border-strong); }
  .legend-dot--1 { background: var(--slate); }
  .legend-dot--2 { background: var(--sage-dark); }
  .legend-ring { inline-size: 1.4rem; block-size: 0; border-block-start: 1.5px dashed var(--slate-muted); }
  .legend-tri { inline-size: 1rem; block-size: 1rem; color: var(--oak-dark); }
  .map__caption { margin-block-start: var(--space-xs); font-size: var(--step--2); color: var(--color-text-muted); }
  .zone-panel { display: grid; gap: var(--space-s); padding: var(--space-m); background: var(--plaster); border: 1px solid var(--color-border); border-block-start: var(--rule) solid var(--slate); border-radius: var(--radius-s); }
  .zone-panel h3 { font-size: var(--step-3); text-transform: uppercase; }
  .combo { position: relative; }
  .combo__list { position: absolute; inset-inline: 0; inset-block-start: calc(100% + 4px); z-index: 20; max-block-size: 20rem; overflow-y: auto; padding: 0.3rem; background: var(--white); border: 2px solid var(--slate); border-radius: var(--radius-s); box-shadow: var(--shadow-panel); }
  .combo__option { display: flex; justify-content: space-between; gap: var(--space-s); align-items: center; min-block-size: 2.75rem; padding: 0.4rem 0.7rem; border-radius: var(--radius-s); cursor: pointer; }
  .combo__option small { color: var(--slate-muted); font-variant-numeric: tabular-nums; }
  .combo__option[aria-selected="true"], .combo__option:hover { background: var(--plaster-3); }
  .combo__option[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--oak-dark); }
  .zone-checker { display: grid; gap: var(--space-s); padding: var(--space-m-xl); background: var(--slate); color: var(--on-dark); border-radius: var(--radius-s); --color-focus: var(--oak-light); }
  .zone-checker .field__label { font-size: var(--step-0); }
  .zone-checker__result:empty { display: none; }
  .zone-checker__result { min-block-size: 1.6em; font-size: var(--step-1); font-weight: 600; color: var(--on-dark); max-inline-size: 60ch; }
  .zone-checker__result strong { color: var(--oak-light); }
  .zone-checker__result a { color: var(--oak-light); }
  .zones-list { display: grid; gap: var(--space-xl); }
  .zone-group h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; font-size: var(--step-3); text-transform: uppercase; margin-block-end: var(--space-s); }
  .zone-group h3 small { font-family: var(--font-body); font-weight: 400; text-transform: none; font-size: var(--step--1); color: var(--color-text-muted); letter-spacing: 0; }
  .town-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: 0.6rem; }
  .town-card { display: grid; gap: 0.15rem; padding: 0.8rem 1rem; background: var(--plaster); border: 1px solid var(--color-border); border-inline-start: var(--rule) solid var(--slate); border-radius: var(--radius-s); font-size: var(--step--1); }
  .town-card--2 { border-inline-start-color: var(--sage-dark); }
  .town-card--3 { border-inline-start-color: var(--oak); }
  .town-card:target { outline: 3px solid var(--oak-dark); outline-offset: 2px; background: var(--white); }
  .town-card__name { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.15; }
  .town-card__meta { color: var(--color-text-muted); }
  .town-card a { font-weight: 600; display: inline-flex; min-block-size: 1.75rem; align-items: center; }
  .quarters { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .bati { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--space-s); }
  .bati__item { padding: var(--space-m); background: var(--plaster); border: 1px solid var(--color-border); border-radius: var(--radius-s); display: grid; gap: 0.5rem; align-content: start; }
  .bati__item h3 { font-size: var(--step-1); }
  .bati__item p { font-size: var(--step--1); color: var(--color-text-muted); }

  /* ---------- Garanties ---------- */
  .guarantees { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0; border-block-start: var(--rule) solid var(--color-text); }
  .guarantee { display: grid; gap: 0.6rem; align-content: start; padding: var(--space-m) var(--space-m) var(--space-m) 0; border-block-end: 1px solid var(--color-border); }
  .guarantee .icon--lg { color: var(--oak-dark); }
  .guarantee h3 { font-size: var(--step-1); text-transform: uppercase; letter-spacing: 0.02em; font-weight: 700; }
  .guarantee p { font-size: var(--step--1); color: var(--color-text-muted); }
  @media (min-width: 64em) { .guarantee + .guarantee { padding-inline-start: var(--space-m); border-inline-start: 1px solid var(--color-border); } }

  /* ---------- Avis ---------- */
  .reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: var(--space-s); align-items: start; }
  .review { display: grid; gap: 0.75rem; align-content: start; padding: var(--space-m); background: var(--plaster); border: 1px solid var(--color-border); border-radius: var(--radius-s); }
  .review__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-s); flex-wrap: wrap; }
  .review__text { font-size: var(--step-0); }
  .review__meta { font-size: var(--step--1); color: var(--color-text-muted); }
  .review__meta strong { color: var(--color-text); }
  .review__reply { padding: var(--space-s); border-inline-start: 3px solid var(--oak); background: var(--plaster-2); font-size: var(--step--1); }
  .review__reply p + p { margin-block-start: 0.35rem; }
  .fiction-banner { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem var(--space-m); background: var(--slate); color: var(--on-dark); border-radius: var(--radius-s); font-weight: 600; font-size: var(--step--1); }
  .fiction-banner .icon { color: var(--oak-light); }
  .rating-summary { display: grid; gap: var(--space-l); align-items: center; padding: var(--space-m-xl); background: var(--plaster); border: 1px solid var(--color-border); border-radius: var(--radius-s); }
  @media (min-width: 48em) { .rating-summary { grid-template-columns: auto 1fr; } }
  .rating-summary__score { font-family: var(--font-display); font-weight: 700; font-size: clamp(3.5rem, 2.5rem + 4vi, 5.5rem); line-height: 0.9; font-variant-numeric: tabular-nums; }
  .rating-summary__score small { font-size: 0.4em; color: var(--color-text-muted); }
  .bars { display: grid; gap: 0.45rem; }
  .bars li { display: grid; grid-template-columns: 4.5rem 1fr 2.5rem; gap: 0.75rem; align-items: center; font-size: var(--step--1); }
  .bars__track { block-size: 0.65rem; background: var(--plaster-3); border-radius: 1px; overflow: hidden; }
  .bars__fill { display: block; block-size: 100%; background: var(--oak); inline-size: var(--w, 0%); }
  .bars__val { font-variant-numeric: tabular-nums; text-align: end; font-weight: 600; }

  /* ---------- Réalisations ---------- */
  .filters { display: grid; gap: var(--space-m); padding: var(--space-m); background: var(--plaster); border: 1px solid var(--color-border); border-radius: var(--radius-s); margin-block-end: var(--space-l); }
  @media (min-width: 64em) { .filters { grid-template-columns: auto 1fr auto; align-items: end; } }
  .filters__bottom { display: flex; flex-wrap: wrap; gap: var(--space-s); justify-content: space-between; align-items: center; margin-block-end: var(--space-m); }
  .result-count { font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); letter-spacing: 0.02em; }
  .real-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: var(--space-s-l); }
  .real-card .card__body { gap: 0.55rem; }
  .real-card__meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; font-size: var(--step--1); color: var(--color-text-muted); }
  .real-card__meta span { display: inline-flex; align-items: center; gap: 0.3rem; }
  .real-card__summary { font-size: var(--step--1); }
  .real-card .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: var(--step--1); column-gap: 0.75rem; }
  .real-card .facts > div { padding-inline-end: 0.5rem; }
  .real-card .facts > div:first-child { grid-column: 1 / -1; }
  .real-card__open { align-self: flex-start; }
  .empty-state { display: grid; gap: var(--space-s); justify-items: start; padding: var(--space-xl) var(--space-m); border: 2px dashed var(--color-border-strong); border-radius: var(--radius-s); }
  .compare-duo { display: grid; gap: var(--space-l); }
  @media (min-width: 64em) { .compare-duo { grid-template-columns: 1fr 1fr; } }
  @media (prefers-reduced-motion: no-preference) {
    ::view-transition-group(*) { animation-duration: 250ms; animation-timing-function: var(--ease-out); }
  }

  /* ---------- Méthode / équipe / frise ---------- */
  .timeline { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(11.5rem, 1fr); gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; padding-block-end: var(--space-s); }
  .timeline li { scroll-snap-align: start; display: grid; gap: 0.5rem; align-content: start; padding: 0 var(--space-m) 0 0; }
  .timeline__year { position: relative; display: block; padding-block-end: 0.85rem; margin-block-end: 0.35rem; font-family: var(--font-display); font-weight: 700; font-size: var(--step-4); line-height: 1; color: var(--oak-dark); border-block-end: 6px solid var(--oak); }
  .timeline li:nth-child(even) .timeline__year { border-block-end-color: var(--plaster-3); }
  .timeline p { font-size: var(--step--1); color: var(--color-text-muted); }
  @media (min-width: 75em) { .hint-scroll { display: none; } }
  .timeline h3 { font-size: var(--step-1); }
  .team { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: var(--space-s-l); }
  @media (min-width: 60em) { .team { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-l); row-gap: var(--space-xl, 3rem); } }
  .member { display: grid; gap: 0.6rem; align-content: start; }
  .member__visual { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--oak-light); color: var(--slate); border-radius: var(--radius-s); overflow: hidden; }
  .member__visual svg { position: absolute; inset-inline-end: -12%; inset-block-end: -8%; inline-size: 70%; block-size: auto; color: color-mix(in oklch, var(--oak-dark) 32%, transparent); }
  .member__initials { position: relative; font-family: var(--font-display); font-weight: 700; font-size: clamp(3rem, 2.4rem + 3vi, 4.5rem); letter-spacing: 0.04em; line-height: 1; }
  .member:nth-child(3n+2) .member__visual { background: var(--sage); }
  .member:nth-child(3n) .member__visual { background: var(--plaster-3); }
  .member h3 { font-size: var(--step-2); }
  .member .member__role { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: var(--step--1); color: var(--oak-dark); }
  .member p { font-size: var(--step--1); color: var(--color-text-muted); }
  @media (min-width: 40em) {
    .member__visual { place-items: center start; padding-inline-start: var(--space-m); }
    .member__visual svg { inline-size: auto; block-size: 72%; inset-inline-end: 7%; inset-block-end: -5%; }
  }
  @media (max-width: 39.99em) {
    .member { grid-template-columns: 6.5rem 1fr; column-gap: var(--space-s); row-gap: 0.25rem; }
    .member__visual { grid-row: 1 / span 3; aspect-ratio: 1; }
    .member__initials { font-size: 2.2rem; }
    .member > :not(.member__visual) { grid-column: 2; }
  }
  .stars--avg { position: relative; }
  .stars__fill { position: absolute; inset-block: 0; inset-inline-start: 0; display: inline-flex; gap: 2px; inline-size: var(--w); overflow: hidden; white-space: nowrap; }
  .stars__fill .icon { flex: none; }
  .steps-detailed { display: grid; gap: 0; counter-reset: st; border-block-start: var(--rule) solid var(--color-text); }
  .steps-detailed li { display: grid; gap: 0.35rem var(--space-l); padding-block: var(--space-m); border-block-end: 1px solid var(--color-border); counter-increment: st; }
  @media (min-width: 56em) { .steps-detailed li { grid-template-columns: 5rem 1fr 1.1fr; align-items: start; } }
  .steps-detailed li::before { content: counter(st, decimal-leading-zero); font-family: var(--font-display); font-weight: 700; font-size: var(--step-4); line-height: 0.9; color: var(--oak); }
  .steps-detailed h3 { font-size: var(--step-2); }
  .steps-detailed p { color: var(--color-text-muted); font-size: var(--step--1); }
  .steps-detailed .tag { margin-block-start: 0.5rem; }
  .policy { display: grid; gap: 0.35rem; padding: var(--space-m); background: var(--plaster); border: 1px solid var(--color-border); border-block-start: var(--rule) solid var(--slate); border-radius: var(--radius-s); font-size: var(--step--1); }
  .policy dt { font-weight: 600; margin-block-start: 0.4rem; }
  .policy dd { margin: 0; color: var(--color-text-muted); }
  .job { display: grid; gap: var(--space-s); padding: var(--space-m-xl); background: var(--sage-light); border-radius: var(--radius-s); border-inline-start: var(--rule) solid var(--sage-dark); }
  .job h3 { font-size: var(--step-3); }

  /* ---------- Isolation ---------- */
  .house-cut { inline-size: 100%; block-size: auto; color: var(--slate); }
  .house-cut text { font-family: var(--font-display); font-weight: 600; }
  @media (max-width: 40em) { .house-cut text { font-size: 18px; } }
  .dpe { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--space-s); }
  .dpe__item { display: grid; gap: 0.3rem; padding: var(--space-s) var(--space-m); background: var(--plaster); border: 1px solid var(--color-border); border-block-start: 6px solid var(--c, var(--oak)); border-radius: var(--radius-s); }
  .dpe__year { font-family: var(--font-display); font-weight: 700; font-size: var(--step-3); line-height: 1; }
  .dpe__item p { font-size: var(--step--1); color: var(--color-text-muted); }
  .dpe__class { display: inline-grid; place-items: center; inline-size: 2rem; block-size: 2rem; background: var(--slate); color: var(--on-dark); font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; border-radius: var(--radius-s); }

  /* ---------- Contact ---------- */
  .contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--space-s); }
  .contact-card { display: grid; gap: 0.5rem; align-content: start; padding: var(--space-m); background: var(--plaster); border: 1px solid var(--color-border); border-block-start: var(--rule) solid var(--slate); border-radius: var(--radius-s); }
  .contact-card .icon--lg { color: var(--oak-dark); }
  .contact-card h2 { font-size: var(--step-2); }
  .contact-card p { font-size: var(--step--1); }
  .hours { font-size: var(--step--1); }
  .hours td, .hours th { padding: 0.55rem 0.75rem 0.55rem 0; border-block-end: 1px solid var(--color-border); text-align: start; }
  .hours tr.is-today { background: color-mix(in oklch, var(--sage-light) 70%, transparent); }
  .hours tr.is-today th { box-shadow: inset 4px 0 0 var(--sage-dark); padding-inline-start: 0.6rem; }
  .access-map { inline-size: 100%; block-size: auto; background: var(--plaster); border: 1px solid var(--color-border); border-radius: var(--radius-s); color: var(--slate); }
  .access-map text { font-family: var(--font-display); font-weight: 600; }
  .ext-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }

  /* ---------- Pages légales ---------- */
  .prose { max-inline-size: 72ch; }
  .prose > * + * { margin-block-start: 1em; }
  .prose h2 { font-size: var(--step-3); margin-block-start: var(--space-xl); padding-block-start: var(--space-s); border-block-start: var(--rule) solid var(--slate); }
  .prose h3 { font-size: var(--step-1); margin-block-start: var(--space-l); }
  .prose ul { padding-inline-start: 1.2rem; }
  .prose li + li { margin-block-start: 0.35rem; }
  .prose dl { display: grid; gap: 0.2rem; }
  .prose dt { font-weight: 600; margin-block-start: 0.6rem; }
  .prose dd { margin: 0; }
  .credits { font-size: var(--step--1); }
  .credits li { overflow-wrap: anywhere; }

  /* ---------- 404 ---------- */
  .err { display: grid; gap: var(--space-l); justify-items: center; text-align: center; padding-block: var(--space-2xl) var(--section); }
  .err h1 { font-size: var(--step-5); max-inline-size: 18ch; }
  .err p { margin-inline: auto; }
  .err__ruler { inline-size: min(100%, 34rem); block-size: auto; }
  .err .btn-row { justify-content: center; }
  .err__links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; justify-content: center; }

  /* ---------- Compléments ---------- */
  .logo__mark { color: var(--oak-dark); }
  .footer .logo__mark { color: var(--oak-light); }
  .band { --cote-bg: var(--plaster-2); }
  .band--sage { --cote-bg: var(--sage-light); }
  .band--dark { --cote-bg: var(--slate); }
  .real-card { view-transition-name: var(--vt, none); }
  .mini-map .map__label--big { font-size: 28px; }
  .mini-map .map__workshop text { font-size: 24px; }
  .mini-map .map__dot { stroke-width: 3; }
  @media (max-width: 39.99em) {
    .map .map__label { font-size: 24px; stroke-width: 5px; }
    .map .map__workshop text { font-size: 22px; }
    .map .map__ring-label { font-size: 20px; }
    .map .map__river-label { font-size: 20px; }
    .dialog__nav .icon-btn span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  }
  .feature__facts h2 { font-size: var(--step-3); }
  .member__visual { box-shadow: inset 0 -6px 0 rgb(35 44 53 / 0.08); }

  /* ---------- Impression ---------- */
  @media print {
    @page { margin: 14mm; }
    body { background: #fff; color: #000; font-size: 11pt; }
    main > .section { content-visibility: visible; }
    .topbar, .header, .breadcrumb, .footer, .mobile-bar, .cta-final, .sim-bar, .no-print, .sim__nav, .steps-ruler, .sim__status, .resume, .btn, .sim-panel, .skip-link, .msd-badge, .msd-toasts { display: none !important; }
    .print-head { display: flex !important; justify-content: space-between; align-items: center; gap: 1rem; padding-block-end: 0.5rem; margin-block-end: 1rem; border-block-end: 2px solid #000; }
    .print-head .logo { color: #000; }
    main { padding: 0 !important; }
    .section { padding-block: 0.5rem; }
    .page-hero { padding-block: 0 0.5rem; }
    .result__hero, .band--dark { background: #fff !important; color: #000 !important; border: 2px solid #000; }
    .result__hero .estimate__label, .result__sub, .gauge-scale, .result__range small { color: #000 !important; }
    .gauge { border: 1px solid #000; background: #fff; }
    .gauge__seg { background: #999; }
    .sim:has(.sim__step:not([hidden])) .print-only-step { display: block; }
    a { color: #000; }
    .card, .table-wrap, .result__fact, .finish-col { break-inside: avoid; }
    img { max-block-size: 9cm; object-fit: cover; }
  }
}

/* --------------------------------------------------------------------------
   Intégration du kit de démonstration (hors couches : doit primer sur demo.css)
   -------------------------------------------------------------------------- */
@media (max-width: 47.99em) {
  html .msd-badge { inset-block-end: calc(4.6rem + env(safe-area-inset-bottom)); }
}

/* --------------------------------------------------------------------------
   Sélecteur de langue FR | EN (barre d'information)
   -------------------------------------------------------------------------- */
.topbar__inner { justify-content: flex-start; }
.lang-switch { display: flex; align-items: center; gap: 0.1rem; flex: none; margin-inline-start: auto; font-family: var(--font-display); font-weight: 600; letter-spacing: 0.08em; line-height: 1; }
.lang-switch a, .lang-switch__cur { display: inline-flex; align-items: center; justify-content: center; min-block-size: 1.75rem; min-inline-size: 1.75rem; padding-inline: 0.4rem; text-decoration: none; }
.lang-switch a { color: var(--on-dark); }
.lang-switch a:hover { color: var(--oak-light); text-decoration: underline; text-underline-offset: 0.25em; }
.lang-switch__cur { color: var(--oak-light); box-shadow: inset 0 -2px 0 currentColor; }
.lang-switch__sep { color: var(--on-dark-muted); }
@media (min-width: 48em) {
  .topbar__claims { margin-inline-end: auto; }
  .lang-switch { margin-inline-start: var(--space-m); }
}