/* WOURI ESTATE — feuille commune à toutes les pages (jetons, base, composants partagés, en-tête, pied de page).
   Direction artistique « Cadastre & calcaire » : calcaire, encre, olive, rouille. Gloock + Schibsted Grotesk. */
@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; line-height: 1.6; -webkit-font-smoothing: antialiased; }
  img, svg, video, canvas, picture { display: block; max-inline-size: 100%; }
  img { block-size: auto; }
  input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
  button { cursor: pointer; }
  button:disabled, [aria-disabled="true"] { cursor: not-allowed; }
  p, li, dd, figcaption { overflow-wrap: break-word; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  table { border-collapse: collapse; border-spacing: 0; }
  summary { cursor: pointer; }
  [hidden] { display: none !important; }
  fieldset { border: 0; padding: 0; min-inline-size: 0; }
  legend { padding: 0; }
}
@layer tokens {
  :root {
    color-scheme: light;
    /* Palette — hex vérifiés (équivalents oklch dans le brief) */
    --calcaire: #F2EEE6;        /* oklch(0.950 0.011 85) */
    --calcaire-2: #E8E2D6;      /* oklch(0.914 0.017 85) */
    --chaux: #FBF9F5;           /* oklch(0.983 0.006 85) */
    --encre: #1D1A13;           /* oklch(0.219 0.014 88) */
    --encre-2: #4D473A;         /* oklch(0.400 0.022 86) */
    --gris: #6B6455;            /* oklch(0.505 0.025 86) */
    --olive: #515A33;           /* oklch(0.449 0.060 119) */
    --olive-fonce: #3F4727;     /* oklch(0.382 0.051 120) */
    --olive-clair: #DFE3CC;     /* oklch(0.907 0.031 115) */
    --rouille: #A04F27;         /* oklch(0.521 0.120 45) */
    --rouille-fonce: #87401E;   /* oklch(0.457 0.108 44) */
    --laterite-clair: #F3DDCF;  /* oklch(0.912 0.031 55) */
    --ocre-texte: #7A4D05;      /* oklch(0.461 0.097 70) */
    --ocre-fond: #F5E6C4;       /* oklch(0.928 0.047 87) */
    --erreur: #A1271B;          /* oklch(0.469 0.160 30) */
    --erreur-fond: #F7DEDA;     /* oklch(0.920 0.028 29) */
    --eau: #C5D1CB;             /* oklch(0.850 0.015 165) */
    --eau-2: #9DB2AA;           /* oklch(0.745 0.026 171) */
    --bordure: #CFC7B7;
    --bordure-forte: #8C8473;
    --rouille-sur-sombre: #E8A27B;
    --olive-sur-sombre: #C3CC97;
    /* Rôles */
    --color-bg: var(--calcaire);
    --color-surface: var(--chaux);
    --color-surface-2: var(--calcaire-2);
    --color-text: var(--encre);
    --color-text-muted: var(--encre-2);
    --color-meta: var(--gris);
    --color-accent: var(--rouille);
    --color-accent-strong: var(--rouille-fonce);
    --color-ok: var(--olive);
    --color-line: var(--bordure);
    --color-field: var(--bordure-forte);
    --color-focus: var(--rouille);
    /* Typographie */
    --font-display: "Gloock", "Iowan Old Style", Georgia, "Times New Roman", serif;
    --font-text: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --step--2: clamp(0.6944rem, 0.6859rem + 0.0379vi, 0.72rem);
    --step--1: clamp(0.8333rem, 0.8111rem + 0.0988vi, 0.9rem);
    --step-0: clamp(1rem, 0.9583rem + 0.1852vi, 1.125rem);
    --step-1: clamp(1.2rem, 1.1312rem + 0.3056vi, 1.4063rem);
    --step-2: clamp(1.44rem, 1.3341rem + 0.4708vi, 1.7578rem);
    --step-3: clamp(1.728rem, 1.5716rem + 0.6952vi, 2.1973rem);
    --step-4: clamp(2.0736rem, 1.8493rem + 0.997vi, 2.7466rem);
    --step-5: clamp(2.4883rem, 2.1734rem + 1.3999vi, 3.4332rem);
    --step-6: clamp(2.986rem, 2.5508rem + 1.9341vi, 4.2915rem);
    --measure: 68ch;
    /* Espacement (Utopia) */
    --space-3xs: clamp(0.25rem, 0.2396rem + 0.0463vi, 0.2813rem);
    --space-2xs: clamp(0.5rem, 0.4792rem + 0.0926vi, 0.5625rem);
    --space-xs: clamp(0.75rem, 0.7188rem + 0.1389vi, 0.8438rem);
    --space-s: clamp(1rem, 0.9583rem + 0.1852vi, 1.125rem);
    --space-m: clamp(1.5rem, 1.4375rem + 0.2778vi, 1.6875rem);
    --space-l: clamp(2rem, 1.9167rem + 0.3704vi, 2.25rem);
    --space-xl: clamp(3rem, 2.875rem + 0.5556vi, 3.375rem);
    --space-2xl: clamp(4rem, 3.8333rem + 0.7407vi, 4.5rem);
    --space-3xl: clamp(6rem, 5.75rem + 1.1111vi, 6.75rem);
    --space-s-l: clamp(1rem, 0.5833rem + 1.8519vi, 2.25rem);
    --space-m-xl: clamp(1.5rem, 0.875rem + 2.7778vi, 3.375rem);
    --space-l-2xl: clamp(2rem, 1.1667rem + 3.7037vi, 4.5rem);
    --space-xl-3xl: clamp(3rem, 1.75rem + 5.5556vi, 6.75rem);
    --gutter: var(--space-s-l);
    --wrap: 80rem;
    /* Formes et profondeur : angles nets, filets plutôt qu'ombres */
    --radius: 4px;
    --radius-photo: 2px;
    --shadow-1: 0 1px 2px rgb(29 26 19 / .08), 0 8px 24px -8px rgb(29 26 19 / .22);
    --shadow-2: 0 2px 4px rgb(29 26 19 / .1), 0 18px 44px -12px rgb(29 26 19 / .34);
    /* Mouvement */
    --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-4: 520ms; --dur-5: 700ms;
    --ease-out: cubic-bezier(.2, .8, .2, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --header-h: 4.5rem;
    --we-badge-h: 0px;
    /* hauteur de l'en-tête collant (barre principale, plus barre utilitaire à partir de 64em) ; main.js l'ajuste si elle change */
    --header-total: 73px;
  }
  @media (min-width: 64em) {
    :root { --header-total: 109px; }
  }
}
@layer base {
  html { scroll-padding-block-start: 7rem; }
  body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-text);
    font-size: var(--step-0);
    font-weight: 400;
  }
  h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 400;
    font-synthesis: none;
    letter-spacing: -0.01em;
    line-height: 1.1;
    text-wrap: balance;
  }
  h4, h5, h6 { font-family: var(--font-text); font-weight: 700; line-height: 1.25; text-wrap: balance; }
  h1 { font-size: var(--step-5); }
  h2 { font-size: var(--step-3); }
  h3 { font-size: var(--step-2); }
  h4 { font-size: var(--step-1); }
  p, li, dd { text-wrap: pretty; }
  a { color: var(--rouille-fonce); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
  a:hover { color: var(--rouille); text-decoration-thickness: 2px; }
  strong, b { font-weight: 700; }
  small { font-size: var(--step--1); }
  hr { border: 0; border-block-start: 1px solid var(--bordure); }
  ::selection { background: var(--rouille); color: #fff; }
  :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 2px; }
  .on-dark :focus-visible, .section--dark :focus-visible, .site-footer :focus-visible, .util-bar :focus-visible { outline-color: var(--rouille-sur-sombre); }
  input[type="checkbox"], input[type="radio"], progress, input[type="range"] { accent-color: var(--rouille); }
  .nb { white-space: nowrap; }
  .tnum { font-variant-numeric: tabular-nums; }
}
@layer layout {
  .wrap { inline-size: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
  .wrap--wide { --wrap: 90rem; }
  .wrap--narrow { --wrap: 52rem; }
  .cluster { display: flex; flex-wrap: wrap; gap: var(--gap, var(--space-xs)); align-items: center; }
  .grid { display: grid; gap: var(--gap, var(--space-m)); }
  .section { padding-block: var(--space-xl-3xl); position: relative; }
  .section--alt { background: var(--calcaire-2); }
  .section__head { display: grid; gap: var(--space-s) var(--space-l); margin-block-end: var(--space-l-2xl); align-items: end; }
  .section__head > p { color: var(--color-text-muted); max-inline-size: var(--measure); }
  @media (min-width: 64em) {
    .section__head { grid-template-columns: repeat(12, 1fr); }
    .section__head > :first-child { grid-column: 1 / span 6; }
    .section__head > p { grid-column: 8 / span 5; }
    .section__head--full > :first-child { grid-column: 1 / -1; }
  }
}
@layer components {
  /* ---------- Accessibilité ---------- */
  .visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .skip-link { position: absolute; inset-inline-start: var(--space-s); inset-block-start: -4rem; z-index: 200; background: var(--encre); color: var(--calcaire); padding: .75rem 1.25rem; border-radius: var(--radius); font-weight: 600; text-decoration: none; transition: inset-block-start var(--dur-2) var(--ease-out); }
  .skip-link:focus { inset-block-start: var(--space-xs); color: var(--calcaire); }
  .icon { inline-size: 1.25rem; block-size: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .icon--s { inline-size: 1rem; block-size: 1rem; }
  .icon--l { inline-size: 1.75rem; block-size: 1.75rem; }
  /* ---------- Boutons ---------- */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-block-size: 2.75rem; padding: .5rem 1.25rem; border: 1.5px solid transparent; border-radius: var(--radius); font-weight: 600; font-size: var(--step-0); line-height: 1.2; text-decoration: none; text-align: center; background: transparent; transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), scale var(--dur-1) var(--ease-out); }
  .btn:active { scale: .97; }
  .btn--primary { background: var(--rouille); color: #fff; }
  .btn--primary:hover { background: var(--rouille-fonce); color: #fff; }
  .btn--secondary { border-color: var(--encre); color: var(--encre); }
  .btn--secondary:hover { background: var(--encre); color: var(--calcaire); }
  .btn--wa { border-color: var(--olive); color: var(--olive); background: transparent; }
  .btn--wa:hover { background: var(--olive-clair); color: var(--olive-fonce); }
  .btn--light { background: var(--calcaire); color: var(--encre); }
  .btn--light:hover { background: #fff; color: var(--encre); }
  .btn--outline-light { border-color: color-mix(in srgb, var(--calcaire) 60%, transparent); color: var(--calcaire); }
  .btn--outline-light:hover { background: var(--calcaire); color: var(--encre); }
  .btn--sm { min-block-size: 2.5rem; padding: .35rem .9rem; font-size: var(--step--1); }
  .btn[aria-disabled="true"], .btn:disabled { opacity: .55; }
  .btn[aria-disabled="true"]:hover, .btn:disabled:hover { background: transparent; color: inherit; }
  .btn--primary[aria-disabled="true"]:hover, .btn--primary:disabled:hover { background: var(--rouille); color: #fff; }
  .link-action { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--rouille-fonce); text-decoration: none; border-block-end: 1px solid color-mix(in srgb, var(--rouille) 40%, transparent); padding-block-end: 1px; }
  .link-action .icon { transition: translate var(--dur-2) var(--ease-out); }
  .link-action:hover { color: var(--rouille); border-color: var(--rouille); }
  .link-action:hover .icon { translate: 3px 0; }
  .section--dark .link-action { color: var(--rouille-sur-sombre); border-color: color-mix(in srgb, var(--rouille-sur-sombre) 50%, transparent); }
  .section--dark .link-action:hover { color: #fff; border-color: #fff; }
  .icon-btn { display: inline-grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border: 1px solid var(--bordure-forte); border-radius: var(--radius); background: var(--chaux); color: var(--encre); transition: background-color var(--dur-2) var(--ease-out); }
  .icon-btn:hover { background: var(--calcaire-2); }
  /* ---------- Motifs signature ---------- */
  .eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-size: var(--step--1); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--olive); margin-block-end: var(--space-xs); }
  .eyebrow::before { content: ""; inline-size: 7px; block-size: 7px; background: var(--rouille); flex: none; }
  /* ---------- Segmentés (radios natives) ---------- */
  .seg { display: inline-flex; border: 1px solid var(--bordure-forte); border-radius: var(--radius); background: var(--chaux); padding: 2px; gap: 2px; }
  .seg label { position: relative; display: block; }
  .seg input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
  .seg span { display: grid; place-items: center; min-block-size: 2.5rem; min-inline-size: 2.75rem; padding-inline: .85rem; border-radius: 2px; font-weight: 600; font-size: var(--step--1); white-space: nowrap; transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
  .seg input:checked + span { background: var(--encre); color: var(--calcaire); }
  .seg input:not(:checked):hover + span { background: var(--calcaire-2); }
  .seg input:focus-visible + span { outline: 2px solid var(--rouille); outline-offset: 2px; }
  .seg--sm span { min-block-size: 2rem; min-inline-size: 2.25rem; padding-inline: .6rem; }
  /* ---------- En-tête ---------- */
  .site-header { position: sticky; inset-block-start: 0; z-index: 60; background: var(--calcaire); border-block-end: 1px solid var(--bordure); }
  .util-bar { display: none; background: var(--encre); color: var(--calcaire); font-size: var(--step--1); }
  .util-bar__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); min-block-size: 2.25rem; }
  .util-bar a { color: var(--calcaire); text-decoration: none; font-weight: 500; }
  .util-bar a:hover { color: var(--rouille-sur-sombre); text-decoration: underline; }
  .util-bar__right { display: flex; align-items: center; gap: var(--space-s); }
  .util-bar .seg { background: transparent; border-color: color-mix(in srgb, var(--calcaire) 38%, transparent); }
  .util-bar .seg span { min-block-size: 1.7rem; min-inline-size: 2.25rem; font-size: .8125rem; }
  .util-bar .seg input:checked + span { background: var(--calcaire); color: var(--encre); }
  .util-bar .seg input:not(:checked):hover + span { background: color-mix(in srgb, var(--calcaire) 18%, transparent); }
  .statut { display: inline-flex; align-items: center; gap: .55rem; }
  .statut__dot { inline-size: .6rem; block-size: .6rem; border-radius: 50%; background: var(--gris); flex: none; box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 22%, transparent); }
  .statut[data-open="1"] .statut__dot { background: var(--olive-sur-sombre); }
  .info-btn { display: inline-grid; place-items: center; inline-size: 1.5rem; block-size: 1.5rem; border: 1px solid color-mix(in srgb, var(--calcaire) 45%, transparent); border-radius: 50%; background: transparent; color: var(--calcaire); font-size: .75rem; font-weight: 700; }
  .info-btn:hover { background: color-mix(in srgb, var(--calcaire) 20%, transparent); }
  [popover].pop { margin: 0; inset: auto; position: fixed; inset-block-start: 5.5rem; inset-inline-end: var(--gutter); inline-size: min(22rem, calc(100vw - 2rem)); padding: var(--space-s); background: var(--chaux); color: var(--encre); border: 1px solid var(--bordure-forte); border-radius: var(--radius); box-shadow: var(--shadow-2); font-size: var(--step--1); line-height: 1.5; }
  .main-bar__in { display: flex; align-items: center; gap: var(--space-s); min-block-size: var(--header-h); transition: min-block-size var(--dur-3) var(--ease-out); }
  .is-compact .main-bar__in { min-block-size: 3.5rem; }
  .logo { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--encre); margin-inline-end: auto; }
  .logo:hover { color: var(--encre); }
  .logo svg { inline-size: 2.25rem; block-size: 2.25rem; flex: none; }
  .logo__txt { font-family: var(--font-display); font-size: 1.2rem; letter-spacing: .04em; line-height: 1; white-space: nowrap; }
  .logo__txt small { display: block; font-family: var(--font-text); font-size: .625rem; font-weight: 600; letter-spacing: .14em; color: var(--gris); margin-block-start: .3rem; text-transform: uppercase; }
  .nav ul { display: flex; flex-wrap: wrap; gap: 0 .25rem; list-style: none; padding: 0; }
  .nav a { display: inline-flex; align-items: center; min-block-size: 2.75rem; padding-inline: .8rem; font-weight: 600; font-size: var(--step--1); color: var(--encre); text-decoration: none; position: relative; }
  .nav a::after { content: ""; position: absolute; inset-inline: .8rem; inset-block-end: .45rem; block-size: 2px; background: var(--rouille); scale: 0 1; transform-origin: left; transition: scale var(--dur-3) var(--ease-out); }
  .nav a:hover::after, .nav a[aria-current]::after { scale: 1 1; }
  .nav a:hover { color: var(--encre); }
  .fav-btn { position: relative; display: inline-grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--radius); color: var(--encre); text-decoration: none; }
  .fav-btn:hover { background: var(--calcaire-2); color: var(--encre); }
  .fav-btn__n { position: absolute; inset-block-start: .15rem; inset-inline-end: .1rem; min-inline-size: 1.15rem; block-size: 1.15rem; padding-inline: .25rem; border-radius: 999px; background: var(--rouille); color: #fff; font-size: .6875rem; font-weight: 700; display: grid; place-items: center; }
  .fav-btn__n[data-n="0"] { display: none; }
  .menu-btn { display: none; align-items: center; gap: .5rem; min-block-size: 2.75rem; padding-inline: .9rem; border: 1.5px solid var(--encre); border-radius: var(--radius); background: transparent; font-weight: 600; font-size: var(--step--1); }
  .js .menu-btn { display: inline-flex; }
  .nav-cta { display: none; }
  .menu-panel { position: fixed; inset: 0; z-index: 55; padding: calc(var(--header-h) + 2.5rem) var(--gutter) var(--space-l); background: var(--calcaire); overflow-y: auto; overscroll-behavior: contain; }
  .menu-panel nav ul { list-style: none; padding: 0; display: grid; }
  .menu-panel nav a { display: flex; align-items: center; justify-content: space-between; min-block-size: 3.5rem; font-family: var(--font-display); font-size: var(--step-2); color: var(--encre); text-decoration: none; border-block-end: 1px solid var(--bordure); }
  .menu-panel nav a[aria-current] { color: var(--rouille-fonce); }
  .menu-panel__extras { display: grid; gap: var(--space-s); margin-block-start: var(--space-m); }
  .menu-panel__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs); font-size: var(--step--1); }
  @media (max-width: 63.99em) {
    .js .nav { display: none; }
    .nav ul { gap: 0; }
    .main-bar__in { flex-wrap: wrap; }
    html:not(.js) .main-bar__in { padding-block: var(--space-2xs); }
    html:not(.js) .nav { order: 5; inline-size: 100%; }
    .logo__txt small { display: none; }
  }
  @media (min-width: 64em) {
    .util-bar { display: block; }
    .menu-btn, .js .menu-btn { display: none; }
    .nav-cta { display: inline-flex; }
    .logo { margin-inline-end: var(--space-m); }
    .main-bar__in { gap: var(--space-xs); }
    .nav { margin-inline-end: auto; }
    .logo { margin-inline-end: 0; margin-inline-end: var(--space-l); }
  }
  @media (min-width: 64em) and (max-width: 74.99em) {
    .nav a { padding-inline: .55rem; }
    .nav a::after { inset-inline: .55rem; }
  }
  /* ---------- Barre d'actions mobile et tiroir de comparaison ---------- */
  .mobile-bar { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 70; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1px; background: var(--bordure); border-block-start: 1px solid var(--bordure-forte); padding-block-end: env(safe-area-inset-bottom, 0); }
  .mobile-bar > * { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; min-block-size: 3.5rem; padding: .35rem .5rem; background: var(--chaux); color: var(--encre); font-size: .75rem; font-weight: 600; text-decoration: none; border: 0; border-radius: 0; line-height: 1.15; text-align: center; }
  .mobile-bar > .is-primary { background: var(--rouille); color: #fff; }
  .mobile-bar a:hover, .mobile-bar button:hover { color: var(--encre); background: var(--calcaire-2); }
  .mobile-bar > .is-primary:hover { background: var(--rouille-fonce); color: #fff; }
  .mobile-bar [aria-pressed="true"] .icon { fill: var(--rouille); stroke: var(--rouille); }
  .mobile-bar.is-hidden { display: none; }
  /* la place réservée à la barre mobile et au bandeau de démonstration est prise dans le pied de page (fond sombre continu) */
  body.has-mobile-bar { --bar-h: 3.5rem; }
  @media (min-width: 48em) {
    .mobile-bar { display: none; }
    body.has-mobile-bar { --bar-h: 0px; }
  }
  .cmp-drawer { position: fixed; inset-inline-end: var(--space-s); inset-block-end: calc(var(--we-badge-h, 0px) + var(--bar-h, 0px) + var(--space-s)); z-index: 65; inline-size: min(23rem, calc(100vw - 2rem)); background: var(--chaux); border: 1px solid var(--bordure-forte); border-radius: var(--radius); box-shadow: var(--shadow-2); display: none; }
  @media (min-width: 48em) {
    .cmp-drawer { display: block; }
  }
  .cmp-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem .85rem; border-block-end: 1px solid var(--bordure); }
  .cmp-drawer__head strong { font-size: var(--step--1); }
  .cmp-drawer__body { padding: .85rem; display: grid; gap: .75rem; }
  .cmp-drawer.is-collapsed .cmp-drawer__body { display: none; }
  .cmp-drawer ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .cmp-drawer li { position: relative; aspect-ratio: 4 / 3; background: var(--calcaire-2); border-radius: var(--radius-photo); overflow: hidden; }
  .cmp-drawer li img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .cmp-drawer li span { position: absolute; inset-inline: 0; inset-block-end: 0; padding: .1rem .35rem; background: rgb(29 26 19 / .78); color: #fff; font-size: .6875rem; font-weight: 600; }
  .cmp-drawer li button { position: absolute; inset-block-start: 2px; inset-inline-end: 2px; inline-size: 1.5rem; block-size: 1.5rem; border: 0; border-radius: 50%; background: rgb(29 26 19 / .78); color: #fff; display: grid; place-items: center; }
  .cmp-drawer li.is-empty { background: transparent; border: 1px dashed var(--bordure-forte); }
  .cmp-drawer__note { font-size: var(--step--1); color: var(--encre-2); margin: 0; }
  @media (prefers-reduced-motion: no-preference) {
    .cmp-drawer.is-in { animation: drawer-in var(--dur-3) var(--ease-out); }
  }
  @keyframes drawer-in { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
  /* ---------- Formulaires ---------- */
  .field { display: grid; gap: .35rem; align-content: start; }
  .field > label, .field > .label, legend.label { font-weight: 600; font-size: var(--step--1); color: var(--encre); }
  .field .req { color: var(--rouille-fonce); }
  .field__hint { font-size: var(--step--1); color: var(--encre-2); margin: 0; }
  .field__error { display: none; font-size: var(--step--1); font-weight: 600; color: var(--erreur); margin: 0; gap: .4rem; align-items: flex-start; }
  .field__error::before { content: ""; flex: none; inline-size: 1rem; block-size: 1rem; margin-block-start: .15rem; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 20h20L12 3Zm-1 7h2v5h-2v-5Zm0 6h2v2h-2v-2Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 20h20L12 3Zm-1 7h2v5h-2v-5Zm0 6h2v2h-2v-2Z'/%3E%3C/svg%3E") center / contain no-repeat; }
  .field.is-invalid .field__error { display: flex; }
  :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="hidden"]), select, textarea) { inline-size: 100%; min-block-size: 2.75rem; padding: .55rem .8rem; background: var(--chaux); color: var(--encre); border: 1px solid var(--bordure-forte); border-radius: var(--radius); transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
  textarea { min-block-size: 7rem; resize: vertical; line-height: 1.5; }
  select { appearance: none; padding-inline-end: 2.4rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D1A13' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .7rem center; background-size: 1.1rem; }
  :where(input, select, textarea):hover { border-color: var(--encre-2); }
  :where(input, select, textarea):focus-visible { outline: 2px solid var(--rouille); outline-offset: 1px; border-color: var(--rouille); }
  .field.is-invalid :where(input, select, textarea) { border-color: var(--erreur); box-shadow: inset 3px 0 0 var(--erreur); }
  input[type="checkbox"], input[type="radio"] { inline-size: 1.25rem; block-size: 1.25rem; flex: none; margin: 0; }
  .check { display: flex; align-items: flex-start; gap: .7rem; font-size: var(--step--1); line-height: 1.45; cursor: pointer; }
  .check input { margin-block-start: .1rem; }
  .field.is-invalid .check { color: var(--erreur); }
  .choices { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }
  .choice { position: relative; display: flex; align-items: flex-start; gap: .65rem; padding: .8rem .9rem; background: var(--chaux); border: 1px solid var(--bordure-forte); border-radius: var(--radius); cursor: pointer; font-weight: 500; line-height: 1.35; transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out); }
  .choice:hover { border-color: var(--encre-2); }
  .choice:has(input:checked) { border-color: var(--encre); background: #fff; box-shadow: inset 0 0 0 1px var(--encre); }
  .choice:has(input:focus-visible) { outline: 2px solid var(--rouille); outline-offset: 2px; }
  .form-grid { display: grid; gap: var(--space-s) var(--space-m); grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
  .form-grid > .full { grid-column: 1 / -1; }
  .form-summary { padding: var(--space-s); background: var(--erreur-fond); border-inline-start: 4px solid var(--erreur); border-radius: var(--radius); color: var(--encre); margin-block-end: var(--space-m); }
  .form-summary h3 { font-family: var(--font-text); font-size: var(--step-0); font-weight: 700; letter-spacing: 0; color: var(--erreur); }
  .form-summary ul { margin: .4rem 0 0; padding-inline-start: 1.1rem; }
  .form-summary a { color: var(--erreur); font-weight: 600; }
  .form-legal { font-size: var(--step--1); color: var(--encre-2); margin-block-start: var(--space-s); max-inline-size: 60ch; }
  .hp { position: absolute; inset-inline-start: -9999px; inline-size: 1px; block-size: 1px; overflow: hidden; }
  .panel { background: var(--chaux); border: 1px solid var(--bordure); border-radius: var(--radius); padding: var(--space-m); }
  .panel--ok { border-color: var(--olive); box-shadow: inset 4px 0 0 var(--olive); }
  .callout { padding: var(--space-s) var(--space-m); border-inline-start: 4px solid var(--olive); background: var(--olive-clair); color: var(--olive-fonce); border-radius: 0 var(--radius) var(--radius) 0; }
  .callout--warn { border-color: var(--ocre-texte); background: var(--ocre-fond); color: var(--ocre-texte); }
  .callout--info { border-color: var(--rouille); background: var(--laterite-clair); color: var(--encre); }
  .callout h3, .callout h4 { font-family: var(--font-text); letter-spacing: 0; font-size: var(--step-0); font-weight: 700; margin-block-end: .25rem; }
  .callout--warn a, .callout--info a { color: inherit; font-weight: 600; }
  /* ---------- Tableaux ---------- */
  .table-scroll { overflow-x: auto; max-inline-size: 100%; border: 1px solid var(--bordure); border-radius: var(--radius); background: var(--chaux); }
  .table-scroll:focus-visible { outline-offset: 0; }
  .table { inline-size: 100%; font-size: var(--step--1); }
  .table caption { text-align: start; padding: var(--space-xs) var(--space-s); font-weight: 700; font-size: var(--step-0); color: var(--encre); }
  .table th, .table td { padding: .7rem var(--space-s); text-align: start; vertical-align: top; border-block-start: 1px solid var(--bordure); line-height: 1.45; }
  .table thead th { background: var(--calcaire-2); color: var(--encre); font-weight: 700; border-block-start: 0; white-space: nowrap; }
  .table tbody th { font-weight: 600; color: var(--encre); }
  .table td.num, .table th.num { text-align: end; white-space: nowrap; }
  .faq .faq__a p + p { margin-block-start: .6rem; }
  .section--dark .faq { border-color: color-mix(in srgb, var(--calcaire) 30%, transparent); }
  .section--dark .faq details { border-color: color-mix(in srgb, var(--calcaire) 30%, transparent); }
  .section--dark .faq .faq__a { color: color-mix(in srgb, var(--calcaire) 85%, transparent); }
  html:has(dialog[open]:modal) { overflow: hidden; }
  @keyframes dlg-in { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
  /* ---------- Bandeau anti-arnaque et pied de page ---------- */
  .scam-band { background: var(--olive-clair); color: var(--olive-fonce); border-block: 1px solid color-mix(in srgb, var(--olive) 35%, transparent); }
  .scam-band__in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-s); padding-block: var(--space-s); }
  .scam-band .icon { inline-size: 1.75rem; block-size: 1.75rem; }
  .scam-band p { flex: 1 1 22rem; margin: 0; font-size: var(--step--1); line-height: 1.5; }
  .scam-band a { color: var(--olive-fonce); font-weight: 700; }
  .site-footer { background: var(--encre); color: var(--calcaire); padding-block: var(--space-2xl) calc(var(--space-m) + var(--we-badge-h, 0px) + var(--bar-h, 0px)); font-size: var(--step--1); }
  .site-footer a { color: var(--calcaire); text-decoration: none; }
  .site-footer a:hover { color: var(--rouille-sur-sombre); text-decoration: underline; }
  .footer-grid { display: grid; gap: var(--space-l) var(--space-m); grid-template-columns: 1fr 1fr; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  @media (min-width: 48em) {
    .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
    .footer-grid > :first-child { grid-column: auto; }
  }
  .site-footer h2 { font-family: var(--font-text); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--olive-sur-sombre); margin-block-end: var(--space-xs); }
  .site-footer ul { list-style: none; padding: 0; display: grid; gap: .1rem; }
  .site-footer li a { display: inline-block; padding-block: .35rem; }
  .site-footer .logo { color: var(--calcaire); margin: 0 0 var(--space-xs); }
  .site-footer .logo__txt small { color: var(--olive-sur-sombre); }
  .footer-sign { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.25; margin-block-end: var(--space-s); max-inline-size: 22ch; }
  .footer-offices { display: grid; gap: .35rem; margin-block: var(--space-s); }
  .footer-offices li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; }
  .footer-offices strong { min-inline-size: 5.5rem; }
  .footer-offices strong { color: var(--calcaire); }
  .footer-base { margin-block-start: var(--space-xl); padding-block-start: var(--space-s); border-block-start: 1px dashed color-mix(in srgb, var(--calcaire) 35%, transparent); display: grid; gap: .5rem; color: color-mix(in srgb, var(--calcaire) 78%, transparent); line-height: 1.55; }
  .footer-base p { margin: 0; max-inline-size: 90ch; }
  .footer-base a { text-decoration: underline; font-weight: 600; color: var(--calcaire); }
  @keyframes flash { 0%, 60% { box-shadow: 0 0 0 3px var(--rouille); } 100% { box-shadow: none; } }
  @media (prefers-reduced-motion: no-preference) {
    .bien__fav.pop, .pop[data-fav] { animation: pop 150ms var(--ease-out); }
  }
  @keyframes pop { 50% { scale: 1.2; } }
  .bien__prix small { font-size: var(--step--1); font-weight: 500; color: var(--encre-2); }
  @container bien (min-width: 34rem) {
    .bien__in { grid-template-columns: minmax(15rem, 40%) 1fr; grid-template-rows: 1fr auto; }
    .bien__media { grid-row: 1 / span 2; aspect-ratio: auto; min-block-size: 100%; border-radius: 3px 0 0 3px; }
    .bien__body { padding: var(--space-m); }
    .bien__prix { font-size: var(--step-2); }
    .bien__titre { font-size: var(--step-2); }
    .bien__pied { padding-inline: var(--space-m); }
  }
  .crumbs { font-size: var(--step--1); color: var(--encre-2); margin-block-end: var(--space-xs); }
  .crumbs ol { display: flex; flex-wrap: wrap; gap: .25rem .5rem; list-style: none; padding: 0; margin: 0; }
  .crumbs li + li::before { content: "›"; margin-inline-end: .5rem; color: var(--gris); }
  .crumbs a { color: var(--encre-2); }
  .crumbs [aria-current] { color: var(--encre); font-weight: 600; }
  @container carte (max-width: 39rem) { .carte__stage { aspect-ratio: 5 / 4; } }
  @keyframes poser { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
  @container carte (max-width: 39rem) {
    .carte__apercu { inset: auto .5rem .5rem .5rem !important; inline-size: auto; display: grid; grid-template-columns: 7rem 1fr; }
    .carte__apercu img { block-size: 100%; aspect-ratio: auto; }
    .carte__apercu-close { inset-inline-start: auto; inset-inline-end: .3rem; }
  }
  @media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(carte), ::view-transition-new(carte) { animation-duration: 300ms; }
  }
  .mini-carte .carte__svg .lbl { font-size: 13px; }
  .carte__svg .terre--zone { fill: color-mix(in srgb, var(--calcaire-2) 80%, var(--eau)); }
  .carte__svg .terre--rive { stroke: var(--calcaire-2); }
  .carte__svg .terre--rive.is-actif { fill: var(--olive-clair); }
  .toc { background: var(--chaux); border: 1px solid var(--bordure); border-radius: var(--radius); padding: var(--space-s); }
  .toc h2 { font-family: var(--font-text); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--gris); margin-block-end: .4rem; }
  .toc ol { list-style: none; padding: 0; margin: 0; display: grid; }
  .toc a { display: flex; align-items: center; gap: .5rem; min-block-size: 2.25rem; text-decoration: none; color: var(--encre); font-size: var(--step--1); font-weight: 600; border-inline-start: 2px solid transparent; padding-inline: .6rem; margin-inline-start: -.6rem; }
  .toc a:hover, .toc a[aria-current="true"] { border-color: var(--rouille); color: var(--rouille-fonce); background: color-mix(in srgb, var(--rouille) 6%, transparent); }
  @media (max-width: 63.99em) {
    .toc { display: none; }
  }
  @keyframes sceau-in { from { rotate: -20deg; opacity: 0; scale: 1.15; } to { rotate: -6deg; opacity: 1; scale: 1; } }
  .sim__res dd.neg { color: var(--erreur); }
  .gauge.warn i { background: var(--ocre-texte); }
  .gauge.bad i { background: var(--erreur); }
  .sim__note { font-size: .8125rem; color: var(--encre-2); margin: 0; line-height: 1.5; }
}
@layer pages {
  @media (prefers-reduced-motion: no-preference) {
    /* ---------- Reveal au défilement (jamais sur le héros) ---------- */
    .js:not(.reveal-off) [data-reveal]:not(.is-visible) { opacity: 0; translate: 0 1.25rem; }
    .js [data-reveal] { transition: opacity var(--dur-4) var(--ease-out), translate var(--dur-4) var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
  }
  /* ---------- Pages intérieures ---------- */
  .page-hero { padding-block: var(--space-l) var(--space-xl); }
  .page-hero h1 { font-size: var(--step-5); max-inline-size: 22ch; }
  .page-hero__grid { display: grid; gap: var(--space-m) var(--space-l); align-items: end; }
  @media (min-width: 64em) {
    .page-hero__grid { grid-template-columns: repeat(12, 1fr); }
    .page-hero__grid > :first-child { grid-column: 1 / span 7; }
    .page-hero__grid > :last-child { grid-column: 9 / span 4; }
  }
  .page-hero .lead { font-size: var(--step-1); color: var(--encre-2); max-inline-size: 52ch; margin-block-start: var(--space-s); line-height: 1.5; }
  @keyframes vol { from { stroke-dasharray: 0 400; } to { stroke-dasharray: 5 5; } }
}
@layer components {
  .sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
  .icon .f { fill: currentColor; stroke: none; }
  html:not(.js) .js-only { display: none !important; }
  html.js .nojs-only { display: none; }
  html.menu-open { overflow: hidden; }
  .logo svg .b { fill: var(--rouille); }
  .site-footer .logo svg .b { fill: var(--rouille-sur-sombre); }
  .u-end { text-align: end; margin: 0; }
  .statut--m { color: var(--encre-2); margin: 0; font-size: var(--step--1); }
  .statut--m .statut__dot { background: var(--gris); }
  .statut--m[data-open="1"] .statut__dot { background: var(--olive); }
  @container carte (max-width: 30rem) { .lbl:not(.lbl--on):not(.lbl--eau):not(.lbl--note) { display: none; } .lbl { font-size: .625rem; } }
  .field__hint.u-end { margin-block-start: -.15rem; }
}
@layer layout {
  /* colonnes de grille sans largeur minimale implicite (évite tout débordement sur mobile) */
  .hero__grid, .page-hero__grid, .split, .quartier, .search-layout, .fiche-layout, .sim__grid, .tz-grid, .form-split, .cta-final__grid, .emplacement, .dossier__top, .sel-layout, .rules, .cta-final__grid { grid-template-columns: minmax(0, 1fr); }
}
@layer pages {
  :root { --msd-accent: var(--rouille-sur-sombre); }
  @keyframes trace { to { stroke-dashoffset: 0; } }
  @keyframes borne-in { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }
  /* portraits de l'équipe : photo 4:5 dans un cadre calcaire marqué des quatre bornes (motif de bornage) */
  .portrait { position: relative; margin: 0; aspect-ratio: 4 / 5; padding: 5px; background: var(--chaux); border: 1px solid var(--bordure-forte); }
  .portrait img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; background: var(--calcaire-2); }
  .portrait::after {
    content: ""; position: absolute; inset: -4px; pointer-events: none;
    background-image: linear-gradient(var(--rouille), var(--rouille)), linear-gradient(var(--rouille), var(--rouille)), linear-gradient(var(--rouille), var(--rouille)), linear-gradient(var(--rouille), var(--rouille));
    background-size: 7px 7px; background-repeat: no-repeat; background-position: 0 0, 100% 0, 0 100%, 100% 100%;
  }
  .section { content-visibility: auto; contain-intrinsic-size: auto 40rem; }
  @media (min-width: 64em) {
    .page-hero__grid > :only-child { grid-column: 1 / span 8; }
  }
  .field .u-end { justify-self: end; }
  @media (max-width: 63.99em) {
    /* en-tête mobile : logo, cœur et menu sur une seule ligne */
    .js .main-bar__in { flex-wrap: nowrap; gap: var(--space-2xs); }
    .logo { min-inline-size: 0; }
    .logo svg { inline-size: 2rem; block-size: 2rem; }
    .logo__txt { font-size: 1.05rem; }
    .menu-btn { padding-inline: .7rem; gap: .4rem; flex: none; }
  }
  .crumbs a { display: inline-block; padding-block: .25rem; }
  .callout h3 + p { margin-block-start: .15rem; }
  .field__hint.is-note { color: var(--ocre-texte); font-weight: 600; }
  .cluster > .btn + .btn { margin: 0; }
  .hp { position: absolute; inset-inline-start: -9999px; }
}
@layer utilities {
  .u-mt-s { margin-block-start: var(--space-s) !important; }
  .u-mt-m { margin-block-start: var(--space-m) !important; }
  .u-mb-m { margin-block-end: var(--space-m) !important; }
  .u-muted { color: var(--encre-2); }
  .u-small { font-size: var(--step--1); }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  }
  @media (forced-colors: active) {
    .bien, .badge, .tf, .repere, .seg, .chip, .tile, .choice, .btn, .panel, .callout { border: 1px solid CanvasText; }
    .seg input:checked + span, .slot-day input:checked + span, .slot-time input:checked + span { outline: 2px solid Highlight; background: Highlight; color: HighlightText; }
  }
  @media print {
    .site-header, .scam-band, .mobile-bar, .cmp-drawer, .toolbar, .filters, .btn, .skip-link, .hero__media, .gal-all, .map-col, .aside-cta, .toc, [data-no-print], .site-footer .footer-grid, dialog { display: none !important; }
    body { background: #fff; color: #000; font-size: 11pt; padding: 0 !important; }
    [data-reveal] { opacity: 1 !important; translate: none !important; }
    .section { padding-block: 1rem; }
    .section--dark, .section--alt, .cta-final { background: #fff !important; color: #000 !important; }
    a { color: inherit; text-decoration: none; }
    .site-footer { background: #fff; color: #000; padding: 0; }
    .site-footer * { color: #000 !important; }
  }
}
@layer base {
  sup { font-size: .68em; line-height: 0; vertical-align: .5em; }
}
/* Kit de démonstration : sous 48em, son bandeau se pose au-dessus de la barre d'actions fixe (aucun décalage de mise en page au chargement).
   Règle volontairement hors couche : demo.css (non modifié) n'est pas en couche et l'emporterait sinon. */
@media (max-width: 47.99em) {
  body.has-mobile-bar .msd-badge { inset-block-end: calc(3.5rem + 12px); }
}