/* Hallmark · shape: two territories, one house carried from ruin to address, then the pages of the old site rebuilt in the same material · genre: editorial · theme: custom · copy: verbatim · job: hire · idea: "Du rose toulousain au rouge basque : la page prend les couleurs des deux pays où Terra Occitane achète, la brique de la Haute-Garonne et le rouge et le vert du Pays Basque." · vibe: "chaux, brique, rouge basque, vif"
 * paper: oklch(97.5% 0.004 235) · accent: oklch(52% 0.15 33) · display: Onest · body: Onest · hero: stage, the headline beside two territory panels that open on hover, focus or tap · nav: wordmark, four real destinations and one action, named on purpose · footer: index columns · imagery: photographs in their own colours, the client's synthesis images · signature: the two territory panels, one brick and one timber, that also filter the register
 * axes: light/grotesk-sans/warm · posture: full palette (field chaux, signal brique, seal vert basque with the deep rouge basque as the brique's dark step, ink brun) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: H, four colours could scatter the eye; gave each a job (brique acts, vert marks the Pays Basque and the close, rouge basque holds the one dark chapter) and kept the paper cold so the brick is the only warm field */
/* Hallmark · answered F4 · the chosen segment is filled ink and the close button is chaux on the green band, both states of controls, not extra primary buttons */
/* Hallmark · dismissed 58 · the headlines, ledes and page lengths of the content pages are the old site's own wording, kept so both sites carry the same information */
/* Hallmark · dismissed 77 · the content pages hold three or four sections by nature, the old site's own pages carried over */
@import url("./tokens.css");
@import url("./base.css");

h1, h2, h3 { letter-spacing: var(--tracking-display); }
h1 { max-width: 20ch; font-size: var(--text-display); line-height: 1.02; }
h2 { max-width: 30ch; font-size: var(--text-section); }
h3 { max-width: 40ch; font-size: var(--text-title); line-height: 1.2; }
.lead { font-size: var(--text-lead); line-height: 1.45; max-width: 52ch; }
p { margin: 0; text-wrap: pretty; }
p:not([class]) { max-width: 65ch; }
img, video { max-width: 100%; height: auto; display: block; }
h1, h2 { font-weight: var(--display-weight); line-height: 1.04; }
h3 { font-weight: 600; }
p, dd, li { color: var(--color-ink-2); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }
.sec { padding-block: var(--section-gap-s); }
.sec--m { padding-block: var(--section-gap); }
.sec--l { padding-block: var(--section-gap-l); }
.band { background: var(--color-paper-2); color: var(--color-ink); }
.note { margin-top: var(--space-sm); font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }

/* Controls */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-xl); border: var(--rule-hair) solid transparent; border-radius: var(--radius-pill); background: none; color: var(--color-ink); font: 600 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-accent-deep); }
.btn--secondary { border-color: var(--color-ink); }
.btn--secondary:hover { background: var(--color-paper-3); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.on-deep :focus-visible { outline-color: var(--color-on-deep); }
a:not(.btn) { text-decoration-color: var(--color-rule-2); }
a:not(.btn):hover { text-decoration-color: var(--color-accent); }

/* Nav: edge-aligned, solid chaux. */
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }
.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
.nav__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: var(--space-sm); font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; }
.brand img { width: 28px; height: auto; flex-shrink: 0; }
.nav__act { display: flex; align-items: center; gap: var(--space-xl); }
.nav ul { display: flex; align-items: center; gap: var(--space-xl); margin: 0; padding: 0; list-style: none; }
.nav ul a { font-size: var(--text-md); font-weight: 500; text-decoration: none; color: var(--color-ink); white-space: nowrap; }
.nav ul a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }

/* Hero: the head beside two territories that open. */
.hero { min-height: calc(100svh - 72px); display: grid; align-items: center; padding-block: var(--space-xl); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-2xl); align-items: center; }
.hero h1 { max-width: 12ch; font-size: var(--text-display); }
.hero .lead { margin-top: var(--space-lg); max-width: 30ch; }
.hero__act { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xl); }
.terr { display: flex; gap: var(--space-xs); height: clamp(520px, 74svh, 700px); }
.terr__p { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: var(--radius-card); isolation: isolate; color: var(--color-on-deep); transition: flex-grow var(--dur-long) var(--ease-out); }
.terr__p.is-open { flex-grow: 2.6; }
.terr__p [data-slot] { position: absolute; inset: 0; z-index: 0; }
.terr__p::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, color-mix(in oklab, var(--color-ink) 88%, transparent) 0%, color-mix(in oklab, var(--color-ink) 40%, transparent) 38%, transparent 70%); }
.terr__body { position: absolute; inset: auto 0 0 0; z-index: 3; padding: var(--space-lg); }
.terr__num { margin: 0; font-size: clamp(3.5rem, 7vw, 6.5rem); font-weight: var(--display-weight); line-height: 0.9; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--color-on-deep); }
.terr__name { margin: var(--space-xs) 0 0; font-size: var(--text-lg); font-weight: 600; color: var(--color-on-deep); }
.terr__more { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--dur-long) var(--ease-out), opacity var(--dur-long) var(--ease-out); }
.terr__more > div { min-height: 0; overflow: hidden; }
.terr__p.is-open .terr__more { grid-template-rows: 1fr; opacity: 1; }
.terr__more p { margin-top: var(--space-sm); max-width: 46ch; font-size: var(--text-md); line-height: 1.45; color: var(--color-on-deep); }
.terr__more a { display: inline-block; margin-top: var(--space-sm); font-weight: 600; color: var(--color-on-deep); text-decoration-color: var(--color-on-deep); }
.terr__more a:hover { color: var(--color-on-deep); text-decoration-thickness: 2px; }
.terr__hit { position: absolute; inset: 0; z-index: 2; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; opacity: 0; }
.terr__p.is-open .terr__hit { cursor: default; }
.terr__p:has(.terr__hit:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.terr__more a:focus-visible { outline-color: var(--color-on-deep); }
.terr__more a { position: relative; z-index: 4; }
.terr__p:not(.is-open) .terr__more a { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .hero [data-in] { animation: rise 700ms var(--ease-out) both; animation-delay: calc(120ms + var(--i, 0) * 110ms); }
  .terr__p { animation: rise 900ms var(--ease-out) both; animation-delay: calc(320ms + var(--i, 0) * 140ms); }
  @keyframes rise { from { opacity: 0; transform: translateY(22px); } }
}
@media (prefers-reduced-motion: reduce) { .hero [data-in], .terr__p { animation: none; } }

/* One reveal, visible with scripting off. */
.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* Chapter on the deep red: one house, four stages. */
.chapter { background: var(--color-accent-deep); color: var(--color-on-deep); }
.chapter h2, .chapter h3 { color: var(--color-on-deep); }
.chapter p { color: var(--color-on-deep-2); }
.chapter__head { max-width: 22ch; }
.stages { margin: var(--space-2xl) 0 0; padding: 0; list-style: none; counter-reset: stage; }
.stage { counter-increment: stage; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: var(--gap-columns); padding-block: var(--space-xl); border-top: var(--rule-hair) solid var(--color-on-deep-2); }
.stage__fig { margin: 0; }
.stage__fig [data-slot] { aspect-ratio: 16 / 9; }
.stage h3::before { content: counter(stage) ". "; color: var(--color-on-deep-2); font-variant-numeric: tabular-nums; }
.stage h3 { max-width: none; font-size: var(--text-section); line-height: 1.05; }
.stage p { margin-top: var(--space-sm); font-size: var(--text-lg); line-height: 1.5; max-width: 46ch; }
.pane { display: none; }
.is-pinned .chapter__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--space-2xl); align-items: start; }
.is-pinned .stage h3 { font-size: var(--text-3xl); }
.is-pinned .pane { display: flex; flex-direction: column; gap: var(--space-md); position: sticky; top: calc(72px + var(--space-lg)); height: calc(100svh - 72px - var(--space-2xl)); }
.pane__frame { position: relative; flex: 1; min-height: 360px; }
.pane__slot { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-long) var(--ease-out); }
.pane__slot.is-on { opacity: 1; }
.pane__cap { font-size: var(--text-sm); font-weight: 500; color: var(--color-on-deep-2); }
.meter { height: 3px; background: color-mix(in oklab, var(--color-on-deep) 28%, var(--color-accent-deep)); }
.meter span { display: block; height: 100%; background: var(--color-on-deep); transform-origin: left; transform: scaleX(var(--p, 0.25)); transition: transform var(--dur-long) var(--ease-out); }
.is-pinned .stages { margin-top: 0; }
.is-pinned .stage { grid-template-columns: minmax(0, 1fr); min-height: calc(100svh - 72px - var(--space-2xl)); align-content: center; border-top: 0; opacity: 0.4; transition: opacity var(--dur-long) var(--ease-out); }
.is-pinned .stage.is-on { opacity: 1; }
.is-pinned .stage__fig { display: none; }
@media (max-width: 60rem) { .stage { grid-template-columns: minmax(0, 1fr); } }

/* The promise. */
.promise { align-items: center; }
.fig { max-width: none; font-size: clamp(7rem, 16vw, 14rem); font-weight: var(--display-weight); letter-spacing: -0.05em; line-height: 0.9; font-variant-numeric: tabular-nums; color: var(--color-ink); }
.fig small { margin-left: var(--space-sm); font-size: var(--text-3xl); font-weight: 500; letter-spacing: -0.02em; color: var(--color-ink-2); }
.promise p { font-size: var(--text-2xl); line-height: 1.3; max-width: 46ch; color: var(--color-ink); }

/* The chooser. */
.seg { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: var(--space-xl) 0 0; padding: 0; border: 0; }
.seg button { white-space: nowrap; min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-pill); background: none; color: var(--color-ink); font-weight: 600; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.seg button:hover { background: var(--color-paper-3); }
.seg button[aria-selected="true"], .seg button[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.seg button:active { transform: translateY(1px); }
.js-only { display: none; }
.js .js-only { display: flex; }
.panel { margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule-2); }
.panel__lead { max-width: 24ch; font-size: var(--text-section); font-weight: var(--display-weight); line-height: 1.1; letter-spacing: var(--tracking-display); color: var(--color-ink); }
.panel__side { display: grid; align-content: space-between; gap: var(--space-xl); }
.panel dl { margin: 0; border-top: var(--rule-hair) solid var(--color-rule-2); }
.panel dl div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-md); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.panel dt { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.panel dd { margin: 0; font-size: var(--text-md); color: var(--color-ink); }
.js .panel.is-swap { animation: panel-in var(--dur-long) var(--ease-out) both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .js .panel.is-swap { animation: none; } }

/* The case. */
.cmp { position: relative; margin-top: var(--space-2xl); aspect-ratio: 16 / 9; min-height: 0; --pos: 50%; touch-action: pan-y; }
.cmp [data-slot] { position: absolute; inset: 0; }
.cmp [data-slot="errobi-avant"] { clip-path: inset(0 calc(100% - var(--pos)) 0 0); z-index: 2; }
.cmp__line { position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 4; width: 3px; margin-left: -1.5px; background: var(--color-paper); pointer-events: none; }
.cmp__knob { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 52px; height: 52px; translate: -50% -50%; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); }
.cmp__tag { position: absolute; bottom: var(--space-md); z-index: 4; padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; pointer-events: none; }
.cmp__tag--a { left: var(--space-md); }
.cmp__tag--b { right: var(--space-md); }
.cmp input { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.cmp:has(input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.cmp__static { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: var(--space-2xl); }
.cmp__static [data-slot] { aspect-ratio: 4 / 3; }
.js .cmp__static { display: none; }
.cmp-wrap { display: none; }
.js .cmp-wrap { display: block; }
.figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--space-xl) 0 0; border-top: var(--rule-hair) solid var(--color-rule-2); }
.figs > div { padding: var(--space-lg) var(--space-lg) 0; border-left: var(--rule-hair) solid var(--color-rule); }
.figs > div:first-child { padding-left: 0; border-left: 0; }
.figs dt { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.figs dd { margin: var(--space-3xs) 0 0; font-size: var(--text-display-s); font-weight: var(--display-weight); letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--color-ink); }
.figs small { margin-left: var(--space-xs); font-size: var(--text-lg); font-weight: 500; letter-spacing: 0; color: var(--color-ink-2); }

/* The register. */
.filters { align-items: center; justify-content: space-between; gap: var(--space-lg); margin-top: var(--space-xl); }
.filters .seg { margin: 0; }
.count { font-size: var(--text-md); font-weight: 500; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.ops { margin: var(--space-xl) 0 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-rule-2); }
.op { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--dur-long) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
.op.is-off { grid-template-rows: 0fr; opacity: 0; }
.op__in { min-height: 0; overflow: hidden; }
.op__row { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 4fr) minmax(0, 3fr) minmax(0, 4fr) minmax(0, 1.4fr); align-items: baseline; gap: var(--gap-columns); padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); transition: background-color var(--dur-short) var(--ease-out); }
.op__row:hover { background: var(--color-paper-2); }
.op h3 { grid-column: 2; grid-row: 1; max-width: none; font-size: var(--text-xl); color: var(--color-ink); }
.op .dept { grid-column: 1; grid-row: 1; }
.op:first-child h3 { font-size: var(--text-2xl); }
.op span { font-size: var(--text-md); color: var(--color-ink-2); }
.op .dept { font-size: var(--text-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.op .dept--31 { color: var(--color-accent); }
.op .dept--64 { color: var(--color-seal); }
.op .st { justify-self: end; font-weight: 600; color: var(--color-ink); }

/* The close on the green. */
.seal { background: var(--color-seal); color: var(--color-on-deep); }
.seal h2, .seal dd, .seal a { color: var(--color-on-deep); }
.seal p, .seal dt { color: var(--color-on-deep-2); }
.seal .btn--primary { background: var(--color-paper); color: var(--color-seal); }
.seal .btn--primary:hover { background: var(--color-paper-3); }
.contact h2 { max-width: 16ch; }
.contact__act { margin-top: var(--space-xl); }
.contact dl { margin: 0; border-top: var(--rule-hair) solid var(--color-on-deep-2); }
.contact dl div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: var(--space-md); padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid color-mix(in oklab, var(--color-on-deep) 30%, var(--color-seal)); }
.contact dt { font-size: var(--text-sm); font-weight: 500; }
.contact dd { margin: 0; font-size: var(--text-lg); line-height: 1.4; }
.close { padding-block: var(--space-3xl) var(--space-2xl); }
.close p:not(.close__legal):not(.close__sign) { max-width: none; font-size: var(--text-section); font-weight: var(--display-weight); line-height: 1.1; letter-spacing: var(--tracking-display); color: var(--color-ink); }
.close__sign { margin-top: var(--space-md); font-size: var(--text-lg); color: var(--color-ink-2); }
.close__legal { margin-top: var(--space-2xl); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }

@media (max-width: 60rem) {
  .nav ul { display: none; }
  .grid > * { grid-column: 1 / -1 !important; }
  .grid { row-gap: var(--space-xl); }
  .hero__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); }
  .terr { flex-direction: column; height: 640px; }
  .terr__p.is-open { flex-grow: 3; }
  .op__row { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: var(--space-3xs); }
  .op .st { grid-column: 3; grid-row: 1; }
  .op__row span:not(.st):not(.dept) { grid-column: 2 / -1; grid-row: auto; }
  .filters { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 40rem) {
  .cmp__static, .figs { grid-template-columns: minmax(0, 1fr); }
  .figs > div { padding: var(--space-md) 0; border-left: 0; border-top: var(--rule-hair) solid var(--color-rule); }
  .figs > div:first-child { border-top: 0; }
  .cmp { aspect-ratio: 4 / 3; }
  .contact dl div, .panel dl div { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); }
  .brand { font-size: var(--text-md); }
  .nav__act .btn { padding: 0 var(--space-md); }
  .seg button { padding: 0 var(--space-md); }
  .terr { height: 600px; }
}

/* Pages de contenu : en-tête, fil d'Ariane, lignes, étapes, questions, fiches. */
.sec--s { padding-block: var(--space-2xl); }
.phead { padding-block: var(--space-2xl) 0; }
.phead + section { padding-top: var(--section-gap-s); }
.phead h1 { max-width: 20ch; margin-top: var(--space-xl); font-size: var(--text-display-s); line-height: 1.05; }
.phead .lead { margin-top: var(--space-lg); max-width: 56ch; }
.phead__act { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xl); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.crumbs li + li::before { content: "/"; margin-right: var(--space-xs); color: var(--color-rule-2); }
.crumbs a { color: var(--color-muted); }
.crumbs a:hover { color: var(--color-accent); }
.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: var(--space-xl); }
.cols2 p { font-size: var(--text-lg); line-height: 1.55; max-width: none; }
.rows { margin: 0; padding: 0; list-style: none; }
.rows li { padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule-2); }
.rows li:first-child { border-top: var(--rule-hair) solid var(--color-ink); }
.rows h3 { max-width: none; font-size: var(--text-2xl); line-height: 1.1; }
.rows p { margin-top: var(--space-xs); font-size: var(--text-lg); line-height: 1.45; }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; }
.steps li { counter-increment: s; padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule-2); }
.steps li:first-child { border-top-color: var(--color-ink); }
.steps h3::before { content: counter(s) ". "; color: var(--color-accent); font-variant-numeric: tabular-nums; }
.steps h3 { max-width: none; font-size: var(--text-xl); }
.steps p { margin-top: var(--space-xs); font-size: var(--text-md); line-height: 1.5; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.chips li { padding: var(--space-xs) var(--space-md); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-pill); font-weight: 500; color: var(--color-ink); }
.qa { border-top: var(--rule-hair) solid var(--color-ink); }
.qa details { border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 72px; padding-block: var(--space-md); list-style: none; cursor: pointer; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { background: color-mix(in oklab, var(--color-paper-2) 70%, transparent); }
.qa summary::after { content: "+"; flex-shrink: 0; font: 600 var(--text-2xl)/1 var(--font-display); color: var(--color-accent); }
.qa details[open] summary::after { content: "×"; }
.qa summary h3 { max-width: none; font-size: var(--text-xl); line-height: 1.2; }
.qa .answer { padding: 0 var(--space-2xl) var(--space-lg) 0; }
.qa .answer p { font-size: var(--text-md); line-height: 1.55; }
.qa .answer p + p { margin-top: var(--space-sm); }
.qa .answer b { font-weight: 600; color: var(--color-ink); }
.inline-links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
.cats { margin-top: var(--space-lg); }
.cta h2 { max-width: 18ch; }
.cta__act { display: flex; align-items: center; justify-content: flex-end; }
.fill { padding: 0 0.3em; border: 1px dashed var(--color-rule-2); color: var(--color-muted); }
.facts { margin: 0; border-top: var(--rule-hair) solid var(--color-ink); }
.facts > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: var(--space-md); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.facts dt { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.facts dd { margin: 0; font-size: var(--text-lg); color: var(--color-ink); font-variant-numeric: tabular-nums; }
.person { max-width: none; font-size: var(--text-display-s); }
.legal p { font-size: var(--text-md); line-height: 1.6; }
.legal p + p { margin-top: var(--space-sm); }
.state { margin: 0; font-size: var(--text-lg); font-weight: 600; color: var(--color-ink); }
.figs--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.port { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin: var(--space-2xl) 0 0; padding: 0; list-style: none; }
.port li { padding-top: var(--space-lg); border-top: 3px solid var(--color-rule-2); }
.port li.is-now { border-top-color: var(--color-accent); }
.port h3 { max-width: none; font-size: var(--text-2xl); }
.port__when { margin-top: var(--space-3xs); font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.port p:not(.port__when):not(.port__val) { margin-top: var(--space-sm); max-width: 46ch; line-height: 1.5; }
.port__val { margin-top: var(--space-md); font-weight: 600; color: var(--color-ink); }
.ops a { text-decoration: none; color: inherit; }
.ops a:hover { color: var(--color-accent); text-decoration: underline; }

/* Formulaires : le tunnel « Vendre son bien » et « Être rappelé ». */
.fsteps { margin: 0; padding: 0; list-style: none; counter-reset: f; border-top: var(--rule-hair) solid var(--color-ink); }
.fsteps li { counter-increment: f; padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule-2); font-weight: 500; color: var(--color-muted); transition: color var(--dur-short) var(--ease-out); }
.fsteps li::before { content: counter(f) ". "; font-variant-numeric: tabular-nums; }
.fsteps li.is-now { color: var(--color-ink); font-weight: 600; }
.form { display: grid; gap: var(--space-lg); }
.form fieldset { display: grid; gap: var(--space-lg); margin: 0; padding: 0; border: 0; min-width: 0; }
.form legend { padding: 0; margin-bottom: var(--space-lg); font-size: var(--text-section); font-weight: var(--display-weight); line-height: 1.05; letter-spacing: var(--tracking-display); color: var(--color-ink); }
.field { display: grid; gap: var(--space-xs); }
.field label, .field .lab { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); }
.field input, .field select { min-height: 52px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); outline: 2px solid transparent; outline-offset: -3px; }
.field input:focus-visible, .field select:focus-visible { outline-color: var(--color-focus); }
.field [aria-invalid] { border-color: var(--color-error); }
.hint { min-height: 1lh; font-size: var(--text-sm); color: var(--color-muted); }
.radios { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.radios input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.radios label { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-pill); font-size: var(--text-md); font-weight: 600; color: var(--color-ink); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.radios label:hover { background: var(--color-paper-3); }
.radios input:checked + label { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.radios input:focus-visible + label { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.check { display: flex; align-items: flex-start; gap: var(--space-sm); }
.check input { flex-shrink: 0; width: 24px; height: 24px; margin: 0; accent-color: var(--color-accent); }
.check label { font-size: var(--text-md); line-height: 1.4; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.help { min-height: 1lh; font-size: var(--text-md); font-weight: 600; color: var(--color-error); }
.form__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); }
.form__nav .note { margin: 0; }
.prog { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xs); }
.prog span { height: 3px; background: var(--color-rule-2); transition: background-color var(--dur-long) var(--ease-out); }
.prog span.is-on { background: var(--color-accent); }
.done h2 { max-width: none; }
.num { font-variant-numeric: tabular-nums; }
.seal .help, .cta .help { color: var(--color-on-deep); }
.cta .field label { color: var(--color-on-deep); }
.cta .field input { background: var(--color-paper); }
.cta .check label { color: var(--color-on-deep-2); }
.cta .form { gap: var(--space-md); }
.seal :focus-visible { outline-color: var(--color-on-deep); }

/* Pied de page : colonnes d'index. */
.foot { background: var(--color-paper-2); padding-block: var(--space-2xl) var(--space-xl); }
.foot h3 { max-width: none; margin-bottom: var(--space-sm); font: 600 var(--text-md)/1.3 var(--font-body); letter-spacing: 0; color: var(--color-muted); }
.foot p, .foot li { font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-2); }
.foot ul { margin: 0; padding: 0; list-style: none; }
.foot a { text-decoration-color: var(--color-rule-2); }
.foot .brand { color: var(--color-ink); }
.foot__legal { margin-top: var(--space-2xl); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule-2); font-size: var(--text-sm); color: var(--color-muted); max-width: none; }

@media (max-width: 60rem) {
  .cols2, .port { grid-template-columns: minmax(0, 1fr); }
  .figs--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qa .answer { padding-right: 0; }
  .cta__act { justify-content: flex-start; }
  .facts > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); }
}
@media (max-width: 40rem) {
  .figs--four { grid-template-columns: minmax(0, 1fr); }
  .form__nav .btn { flex: 1 1 auto; }
  .phead h1 { margin-top: var(--space-lg); }
}

/* Photo du territoire, communes en rangées, mentions en rangées, menu. */
.photo { margin: 0; }
.photo [data-slot] { aspect-ratio: 4 / 5; min-height: 440px; }
.photo figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.body-l { margin-top: var(--space-lg); font-size: var(--text-lg); line-height: 1.55; max-width: 52ch; }
.communes { columns: 3; column-gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-ink); }
.communes li { break-inside: avoid; padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule-2); font-size: var(--text-lg); font-weight: 500; color: var(--color-ink); }
.lrows { margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-ink); }
.lrows > li { padding-block: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.lrows h2 { font-size: var(--text-section); }
.menu { display: none; position: relative; }
.menu summary { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-pill); font-weight: 600; list-style: none; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover { background: var(--color-paper-3); }
.menu ul { position: absolute; right: 0; top: calc(100% + var(--space-xs)); z-index: var(--z-dropdown); display: block; min-width: 14rem; margin: 0; padding: var(--space-xs); list-style: none; background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-card); }
.menu li a { display: block; padding: var(--space-sm) var(--space-md); font-weight: 500; text-decoration: none; color: var(--color-ink); white-space: nowrap; }
.menu li a:hover { background: var(--color-paper-2); }
@media (max-width: 68rem) {
  .nav__act > ul { display: none; }
  .menu { display: block; }
  .foot__grid > * { grid-column: span 6 !important; }
}
@media (max-width: 60rem) {
  .communes { columns: 2; }
}
@media (max-width: 40rem) {
  .communes { columns: 1; }
  .photo [data-slot] { aspect-ratio: 4 / 3; min-height: 0; }
}

.foot a { white-space: nowrap; }
.menu__cta { display: none; }
@media (max-width: 40rem) {
  .nav__act > .btn { display: none; }
  .menu__cta { display: block; }
  .menu__cta a { font-weight: 600; color: var(--color-accent); }
}

@media (max-width: 40rem) {
  .foot__grid > * { grid-column: 1 / -1 !important; }
}

.lrows > li:first-child { padding-top: var(--space-md); }


.facts--r > div { display: flex; justify-content: space-between; gap: var(--space-lg); }
.facts--r dd { text-align: right; }
@media (max-width: 60rem) { .facts--r > div { flex-direction: column; gap: var(--space-3xs); } .facts--r dd { text-align: left; } }