/* polices hébergées sur le site (pas d'appel à Google Fonts) */
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/fonts/hanken-grotesk-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Libre Caslon Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/libre-caslon-display-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Libre Caslon Text"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/libre-caslon-text-400-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Libre Caslon Text"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/libre-caslon-text-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Naomie Guégan — feuille de style du site
   Direction « aquarelle claire » : papier ivoire, grandes aquarelles terre, rose et sauge,
   Libre Caslon (titres) et Hanken Grotesk (texte), accent prune pour l'action. */

:root {
  /* papier et encre */
  --papier: #FBF7F1;
  --papier-2: #F5EDE3;
  --encre: #2E2522;
  --encre-douce: #5A4A44;
  --filet: rgba(46, 37, 34, 0.14);
  /* aquarelle */
  --terre: #A94A31;      /* accent des titres */
  --rose: #E7B9A6;
  --sauge: #8C9679;
  --or: #B98A4A;
  /* action */
  --prune: #8E4155;
  --prune-fonce: #71323F;

  --display: "Libre Caslon Display", "Libre Caslon Text", Georgia, serif;
  --serif: "Libre Caslon Text", Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(20px, 5vw, 64px);
  --max: 1200px;
  --top-h: 76px;
  /* mouvement : personnalité « premium » */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);      /* entrées : décélération douce */
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);  /* ambiance */
  --t-quick: 180ms;
  --t-std: 700ms;
  --t-fluid: 1100ms;                           /* aquarelle = fluide, plus lent */
  --cl: calc(var(--gutter) + max(0px, (100vw - 2 * var(--gutter) - var(--max)) / 2));
  --svg-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'%3E%3Cpath d='M1 7h19M14 1l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top-h) + 16px); background: var(--papier); }
body { margin: 0; background: var(--papier); color: var(--encre); font: 400 1.0625rem/1.72 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.04; letter-spacing: -0.01em; margin: 0; text-wrap: balance; color: var(--encre); }
em { font-family: var(--serif); font-style: italic; }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.24em; }
strong { font-weight: 600; }
ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }

::selection { background: var(--rose); color: var(--encre); }
:focus-visible { outline: 2px solid var(--prune); outline-offset: 3px; border-radius: 2px; }
html { scrollbar-width: thin; scrollbar-color: var(--rose) var(--papier); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--papier); }
::-webkit-scrollbar-thumb { background: var(--rose); border-radius: 10px; border: 2px solid var(--papier); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--encre); color: var(--papier); padding: 10px 16px; border-radius: 2px; }
.skip:focus { top: 12px; }

/* ---------- Boutons et liens ---------- */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 50px; padding: .85em 1.7em;
  background: var(--prune); color: #FFF8F3;
  font: 500 1rem/1.2 var(--sans); letter-spacing: .01em; text-decoration: none;
  border: 0; border-radius: 999px;
  box-shadow: 0 10px 24px -14px rgba(113, 50, 63, .7);
  transition: transform var(--t-quick) var(--ease), box-shadow 400ms var(--ease);
}
.btn::before { /* lavis qui monte au survol */
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--prune-fonce);
  transform: translateY(101%); border-radius: 50% 50% 0 0 / 30% 30% 0 0;
  transition: transform 500ms var(--ease), border-radius 500ms var(--ease);
}
.btn:hover::before { transform: translateY(0); border-radius: 0; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -16px rgba(113, 50, 63, .8); }
.btn:active { transform: translateY(0) scale(.98); }
.btn--small { min-height: 42px; padding: .6em 1.25em; font-size: .95rem; }

.link-arrow {
  position: relative; display: inline-flex; align-items: center; gap: .6em; min-height: 44px;
  font-weight: 500; color: var(--encre); text-decoration: none;
}
.link-arrow::before { /* soulignement qui se dessine */
  content: ""; position: absolute; left: 0; right: 1.7em; bottom: 9px; height: 1px; background: currentColor;
  transform-origin: left; transition: transform 500ms var(--ease);
}
.link-arrow:hover::before { transform: scaleX(0); transform-origin: right; }
.link-arrow::after {
  content: ""; width: 1.1em; height: .75em; flex: none; background: var(--prune);
  -webkit-mask: var(--svg-arrow) center / contain no-repeat; mask: var(--svg-arrow) center / contain no-repeat;
  transition: transform 400ms var(--ease);
}
.link-arrow:hover::after { transform: translateX(5px); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 30px; margin-top: 2rem; }
.actions--center { justify-content: center; }
.fine { font-size: .93rem; color: var(--encre-douce); }

/* ---------- En-tête ---------- */
/* le flou est porté par ::before : un backdrop-filter sur .top piégerait le menu mobile (position: fixed) dans l'en-tête */
.top { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid transparent; transition: border-color 400ms var(--ease), box-shadow 400ms var(--ease); }
.top::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--papier) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); pointer-events: none; }
.top.is-scrolled { border-bottom-color: var(--filet); box-shadow: 0 10px 30px -24px rgba(46, 37, 34, .5); }
.top__inner { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; height: var(--top-h); padding: 0 var(--gutter); display: flex; align-items: center; gap: 24px; }
.brand { display: flex; flex-direction: column; text-decoration: none; margin-right: auto; line-height: 1.1; color: var(--encre); }
.brand__name { font: 400 1.6rem/1 var(--display); letter-spacing: -.005em; }
.brand__role { font-size: .75rem; color: var(--encre-douce); margin-top: 6px; letter-spacing: .04em; }
.nav__list { display: flex; align-items: center; gap: clamp(14px, 1.5vw, 26px); }
.nav__list a { font-size: .93rem; text-decoration: none; padding: 8px 0; position: relative; white-space: nowrap; color: var(--encre); }
.nav__list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--prune); transform: scaleX(0); transform-origin: left; transition: transform 450ms var(--ease); }
.nav__list a:hover::after, .nav__list a[aria-current="page"]::after { transform: scaleX(1); }
.nav__contact { display: none; }
.burger { display: none; }

@media (max-width: 1239px) {
  .burger { display: inline-flex; align-items: center; gap: 10px; order: 3; min-height: 44px; padding: 0 4px 0 8px; background: none; border: 0; color: var(--encre); font: 500 .95rem var(--sans); cursor: pointer; }
  .burger__lines { width: 22px; height: 12px; position: relative; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transition: border-color .2s; }
  .burger__lines::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: currentColor; transition: transform .3s var(--ease); }
  .burger[aria-expanded="true"] .burger__lines { border-color: transparent; }
  .burger[aria-expanded="true"] .burger__lines::after { transform: rotate(45deg); }
  .burger[aria-expanded="true"] .burger__lines::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: currentColor; transform: rotate(-45deg); }
  .top__cta { order: 2; }
  .nav { order: 4; }
  .nav__list { position: fixed; inset: var(--top-h) 0 0 0; z-index: 49; display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 24px var(--gutter) 40px; background: var(--papier); overflow-y: auto; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear .35s; }
  .nav__list.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .nav__list li { width: 100%; border-bottom: 1px solid var(--filet); }
  .nav__list a { display: block; font: 400 clamp(1.6rem, 6vw, 2.1rem)/1.2 var(--display); padding: 14px 0; }
  .nav__list a::after { display: none; }
  .nav__list a[aria-current="page"] { color: var(--prune); }
  .nav__contact { display: block; border: 0 !important; padding-top: 20px; }
  .nav__contact a { font: 400 1rem/1.6 var(--sans) !important; padding: 10px 0 !important; display: block; }
  body.menu-open { overflow: hidden; }
}
@media (max-width: 520px) {
  :root { --top-h: 66px; }
  .brand__name { font-size: 1.35rem; }
  .burger__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .top__inner { gap: 12px; }
}
@media (max-width: 370px) { .brand__role { display: none; } }

/* ---------- Aquarelles ---------- */
.walk { position: relative; overflow-x: clip; }
.walk::after { /* grain de papier très léger */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: url("/assets/img/grain.png") 0 0 / 640px; mix-blend-mode: multiply; opacity: .05;
}
.walk > section { position: relative; }
.walk > section > :not(.wash):not(.walk__way) { position: relative; z-index: 3; }
.wash { position: absolute; z-index: 0; left: var(--x, 0); top: var(--y, 0); width: var(--w, 40vw); max-width: 900px; pointer-events: none; transform: translateX(var(--tx, 0)); }
.wash img, .hero__land img, .close__sprig { width: 100%; height: auto;
  -webkit-mask: radial-gradient(closest-side, #000 58%, transparent 100%); mask: radial-gradient(closest-side, #000 58%, transparent 100%); }
.wash--sprig img, .close__sprig { -webkit-mask: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent); mask: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent); }
.wash--drift img { animation: drift 22s var(--ease-soft) infinite alternate; }
@keyframes drift { to { translate: 12px -10px; rotate: 1.2deg; } }

/* ---------- Apparitions (JS actif) ---------- */
html.js [data-bloom] { opacity: 0; transform: scale(.9); filter: blur(10px); transition: opacity var(--t-fluid) var(--ease), transform var(--t-fluid) var(--ease), filter var(--t-fluid) var(--ease); transition-delay: var(--d, 0s); }
html.js [data-bloom].is-in { opacity: 1; transform: none; filter: none; }
html.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity var(--t-std) var(--ease), transform var(--t-std) var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
html.js [data-reveal].is-in { opacity: 1; transform: none; }
html.js [data-row] { opacity: 0; transform: translateX(-10px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); transition-delay: calc(var(--r, 0) * 40ms + 250ms); }
html.js .offer-table.is-in [data-row] { opacity: 1; transform: none; }

/* ---------- Le chemin ---------- */
.walk__svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.walk__trace { fill: none; stroke: url(#walk-grad); stroke-width: 1.3; stroke-dasharray: 2 8; stroke-linecap: round; opacity: .35; }
.walk__line { fill: none; stroke: url(#walk-grad); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.walk__anchor { position: absolute; width: 1px; height: 1px; }
.walk__mark { position: absolute; left: calc(var(--cl) * -0.5 - 7px); top: .5em; width: 14px; height: 14px; border-radius: 50%; background: var(--papier); border: 1.5px solid var(--terre); transition: background-color 600ms var(--ease), transform 600ms var(--ease); }
.walk__mark.is-reached { background: var(--terre); transform: scale(1.1); }
.walk__mark--end { position: relative; left: auto; top: auto; display: block; margin: 0 auto 26px; border-color: var(--prune); }
.walk__mark--end.is-reached { background: var(--prune); }
.walk .walk__way { position: absolute; z-index: 4; left: calc(var(--cl) * .5 - 4px); top: var(--way-top, 120px); width: 8px; height: 8px; border-radius: 50%; background: var(--terre); opacity: .35; transition: opacity 500ms var(--ease); }
.walk .walk__way.is-reached { opacity: 1; }
html:not(.js) .walk__svg { display: none; }
.step__title { position: relative; font-size: clamp(2.6rem, 5.4vw, 4.5rem); }
.step { padding: clamp(84px, 11vw, 150px) var(--gutter); }

/* ---------- Ouverture ---------- */
.hero { padding: clamp(56px, 8vw, 120px) 0 0; overflow: hidden; }
.hero__text { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.hero__role { font: 500 .8rem/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--encre-douce); margin-bottom: 1.6rem; }
.hero__title { font-size: clamp(3.2rem, 8vw, 6.4rem); line-height: .96; letter-spacing: -.02em; }
.hero__title em { color: var(--terre); font-size: .92em; letter-spacing: -.01em; }
.hero__side { padding-bottom: .5rem; }
.hero__lead { font: italic 400 clamp(1.25rem, 1.8vw, 1.5rem)/1.4 var(--serif); margin-bottom: 1.1rem; }
.hero__practical { color: var(--encre-douce); font-size: 1rem; }
.hero__practical strong { color: var(--encre); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: 1.7rem; }
.hero__land { position: relative; z-index: 1 !important; height: clamp(200px, 26vw, 400px); }
.hero__land img { position: absolute; left: 50%; bottom: 0; width: min(1400px, 118vw); max-width: none; transform: translateX(-50%); }
html.js .hero__land img[data-bloom] { transform: translateX(-50%) scale(.94); }
html.js .hero__land img[data-bloom].is-in { transform: translateX(-50%); }
.walk__anchor--start { left: 50%; top: 58%; }

/* ---------- Comprendre : les portes ---------- */
.doors { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.doors__head { position: sticky; top: calc(var(--top-h) + 40px); }
.doors__intro { margin-top: 1.4rem; max-width: 30ch; font-size: 1.1rem; color: var(--encre-douce); }
.doors__list { border-bottom: 1px solid var(--filet); }
.door { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr auto; column-gap: 20px; align-items: center; padding: 24px 0 26px; border-top: 1px solid var(--filet); text-decoration: none; color: var(--encre); }
.door::before { /* lavis rose qui glisse sous la ligne survolée */
  content: ""; position: absolute; inset: 6px -20px; z-index: -1; border-radius: 40% 60% 55% 45% / 60% 40% 60% 40%;
  background: radial-gradient(closest-side, rgba(231, 185, 166, .45), transparent); opacity: 0; transform: scaleX(.6); transition: opacity 500ms var(--ease), transform 600ms var(--ease);
}
.door:hover::before { opacity: 1; transform: none; }
.door::after { content: ""; grid-row: 1 / span 2; grid-column: 2; width: 26px; height: 16px; background: var(--prune); -webkit-mask: var(--svg-arrow) center / contain no-repeat; mask: var(--svg-arrow) center / contain no-repeat; transition: transform 450ms var(--ease); }
.door__line { font: 400 clamp(1.5rem, 2.5vw, 2.05rem)/1.15 var(--display); transition: transform 450ms var(--ease); }
.door__hint { font-size: .97rem; color: var(--encre-douce); margin-top: 6px; transition: transform 450ms var(--ease); }
.door:hover .door__line, .door:hover .door__hint { transform: translateX(10px); }
.door:hover::after { transform: translateX(6px); }
.door--pro .door__line { color: var(--terre); }

/* ---------- Emprise ---------- */
.step--emprise { background: var(--papier-2); }
.split { max-width: var(--max); margin: 0 auto; display: grid; gap: clamp(32px, 5vw, 80px); }
.split--text { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.split__text > p { max-width: 60ch; color: var(--encre-douce); }
.big { font: italic 400 clamp(1.4rem, 2.2vw, 1.85rem)/1.3 var(--serif); color: var(--terre); margin-top: 1.2rem; }
.urgent { margin-top: 2.2rem !important; font-size: .9rem; color: var(--encre-douce); max-width: 56ch; padding-top: 1.2rem; border-top: 1px solid var(--filet); }
.urgent a { color: var(--encre); font-weight: 600; }

/* ---------- Consultations ---------- */
.place { max-width: var(--max); margin: 0 auto; }
.place__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: end; }
.place__intro { max-width: 46ch; font-size: 1.1rem; color: var(--encre-douce); }
.offer-table { margin-top: clamp(40px, 5vw, 64px); padding: clamp(24px, 3.4vw, 48px); background: rgba(255, 253, 249, .8); border: 1px solid var(--filet); border-radius: 4px; box-shadow: 0 30px 70px -50px rgba(46, 37, 34, .55); }
.offer-table table { width: 100%; border-collapse: collapse; font-variant-numeric: lining-nums tabular-nums; }
.offer-table thead th { font: 600 .74rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--encre-douce); text-align: left; padding: 0 16px 14px 0; border-bottom: 1px solid var(--encre); }
.offer-table thead th:nth-child(3), .offer-table thead th:nth-child(4) { text-align: right; }
.offer-table__group th { font: italic 400 1.3rem/1.2 var(--serif); color: var(--terre); text-align: left; padding: 32px 0 8px; }
.offer-table__group th span { display: block; font: 400 .93rem/1.5 var(--sans); color: var(--encre-douce); margin-top: 4px; }
.offer-table tbody:first-of-type .offer-table__group th { padding-top: 22px; }
.offer-table tbody tr[data-row] > * { padding: 15px 16px 15px 0; border-bottom: 1px solid var(--filet); vertical-align: baseline; }
.offer-table tbody tr[data-row] { transition: background-color 300ms; }
.offer-table tbody tr[data-row]:hover { background: rgba(231, 185, 166, .16); }
.offer-table tbody tr[data-row] th { font: 400 1.3rem/1.2 var(--display); color: var(--encre); text-align: left; width: 27%; }
.offer-table tbody td { color: var(--encre-douce); font-size: .97rem; }
.offer-table tbody td:nth-of-type(2), .offer-table tbody td:nth-of-type(3) { text-align: right; white-space: nowrap; color: var(--encre); padding-right: 0; }
.offer-table tbody td:nth-of-type(3) { font-weight: 600; width: 1%; padding-left: 24px; color: var(--prune); }
.offer-table__note { margin-top: 22px; font-size: .9rem; color: var(--encre-douce); max-width: 80ch; }

.meet { max-width: 1060px; margin: clamp(96px, 12vw, 170px) auto 0; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.meet__plate { aspect-ratio: 700 / 943; max-width: 320px; margin: 0 auto; display: grid; place-items: center; padding: 20%; background: url("/assets/img/papier-portrait.webp") center / contain no-repeat; font: italic 400 1.1rem/1.3 var(--serif); color: var(--encre-douce); text-align: center; }
.meet__quote p { font: italic 400 clamp(1.8rem, 3vw, 2.6rem)/1.2 var(--serif); color: var(--encre); margin-bottom: 1.6rem; }
.meet__text > p { color: var(--encre-douce); max-width: 56ch; }

/* ---------- Domicile ---------- */
.home-visit { position: relative; padding: clamp(84px, 10vw, 140px) var(--gutter); background: var(--papier-2); --way-top: calc(clamp(84px, 10vw, 140px) + 24px); overflow: hidden; }
.home-visit__inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.home-visit h2 { font-size: clamp(2.6rem, 5.4vw, 4.5rem); margin-bottom: 1.4rem; }
.home-visit__text p { color: var(--encre-douce); }
.ruler__cap { font-size: .93rem; color: var(--encre-douce); margin-bottom: 26px; }
.ruler__marks { display: flex; }
.ruler__marks li { position: relative; padding: 26px 10px 0 0; border-top: 1.5px solid var(--terre); }
.ruler__marks li:nth-child(1) { flex: 15; --n: 0; } .ruler__marks li:nth-child(2) { flex: 15; --n: 1; } .ruler__marks li:nth-child(3) { flex: 20; --n: 2; }
.ruler__marks li:nth-child(4) { flex: 25; --n: 3; } .ruler__marks li:nth-child(5) { flex: 25; --n: 4; }
.ruler__marks li:nth-child(6) { flex: 20; --n: 5; border-top-style: dashed; }
.ruler__marks li::before { content: ""; position: absolute; left: -1px; top: -8px; width: 1.5px; height: 15px; background: var(--terre); }
.ruler__marks li:first-child::before { width: 11px; height: 11px; top: -6px; left: -5px; border-radius: 50%; }
.ruler__km { display: block; font-size: .88rem; color: var(--encre-douce); white-space: nowrap; }
.ruler__fee { display: block; font: 400 clamp(1.4rem, 2vw, 1.8rem)/1.2 var(--display); margin-top: 4px; white-space: nowrap; }
.ruler__marks li:first-child .ruler__fee { color: var(--terre); }
.ruler__note { margin-top: 28px; font-size: .93rem; color: var(--encre-douce); max-width: 62ch; }
html.js .ruler.is-in .ruler__marks li { animation: tick 700ms var(--ease) both; animation-delay: calc(var(--n) * 60ms + 200ms); }
@keyframes tick { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Se reconstruire ---------- */
.step--rebuild { overflow: hidden; }
.rebuild__head { max-width: var(--max); margin: 0 auto clamp(52px, 6vw, 84px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: end; }
.rebuild__head p { color: var(--encre-douce); font-size: 1.1rem; max-width: 42ch; }
.spread { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); }
.arcane { position: relative; display: flex; flex-direction: column; padding: clamp(28px, 3vw, 40px); background: rgba(255, 253, 249, .82); border: 1px solid var(--filet); border-radius: 4px; box-shadow: 0 24px 50px -40px rgba(46, 37, 34, .5); transition: opacity var(--t-std) var(--ease), transform 600ms var(--ease), box-shadow 600ms var(--ease), border-color 400ms; }
html.js .arcane.is-in:hover, html:not(.js) .arcane:hover { transform: translateY(-6px); box-shadow: 0 34px 60px -40px rgba(46, 37, 34, .6); border-color: rgba(169, 74, 49, .35); }
.arcane::before { content: ""; display: block; width: 36px; height: 1.5px; background: var(--terre); margin-bottom: 22px; transition: width 600ms var(--ease); }
.arcane:hover::before { width: 64px; }
.arcane h3 { font-size: clamp(1.6rem, 2.2vw, 2rem); margin-bottom: 1rem; }
.arcane p { color: var(--encre-douce); font-size: 1rem; }
.arcane__body { flex: 1; margin-bottom: 1.2rem; }
.tags { display: flex; flex-wrap: wrap; margin-top: 1rem; font: italic 400 1.02rem/1.6 var(--serif); color: var(--terre); }
.tags li:not(:last-child)::after { content: "·"; margin: 0 .45em; color: var(--encre-douce); font-style: normal; }

/* ---------- Le jeu ---------- */
.deck-section { position: relative; padding: clamp(96px, 11vw, 160px) var(--gutter); background: var(--papier-2); --way-top: calc(clamp(96px, 11vw, 160px) + 24px); overflow: hidden; }
.deck-section__inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.deck-section h2 { font-size: clamp(2.6rem, 5.4vw, 4.5rem); margin-bottom: 1.2rem; }
.deck-section__lede { font: italic 400 clamp(1.3rem, 2vw, 1.65rem)/1.35 var(--serif); color: var(--terre); }
.deck-section__text > p:not(.deck-section__lede) { color: var(--encre-douce); max-width: 58ch; }
.deck__fan { position: relative; width: 100%; max-width: 540px; aspect-ratio: 540 / 470; margin: 0 auto; }
.deck__fan img { position: absolute; top: 0; left: 50%; width: 42%; border-radius: 4.5% / 2.6%; box-shadow: 0 28px 50px -24px rgba(46, 37, 34, .55); transform: translateX(-50%); transition: transform 900ms var(--ease), box-shadow 500ms var(--ease); }
.deck__fan img:nth-child(2) { z-index: 2; }
.deck.is-in .deck__fan img:nth-child(1), html:not(.js) .deck__fan img:nth-child(1) { transform: translateX(-120%) translateY(8%) rotate(-10deg); }
.deck.is-in .deck__fan img:nth-child(2) { transform: translateX(-50%) translateY(-2%); transition-delay: 80ms; }
.deck.is-in .deck__fan img:nth-child(3), html:not(.js) .deck__fan img:nth-child(3) { transform: translateX(20%) translateY(8%) rotate(10deg); transition-delay: 160ms; }
.deck.is-in .deck__fan img:hover { box-shadow: 0 40px 60px -26px rgba(46, 37, 34, .7); transition-delay: 0s; }
.deck.is-in .deck__fan img:nth-child(1):hover { transform: translateX(-124%) translateY(2%) rotate(-12deg); }
.deck.is-in .deck__fan img:nth-child(2):hover { transform: translateX(-50%) translateY(-7%) scale(1.03); }
.deck.is-in .deck__fan img:nth-child(3):hover { transform: translateX(24%) translateY(2%) rotate(12deg); }

/* ---------- Structures ---------- */
.structures { position: relative; padding: clamp(96px, 11vw, 150px) var(--gutter); --way-top: calc(clamp(96px, 11vw, 150px) + 24px); }
.structures__inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.structures h2 { font-size: clamp(2.6rem, 5.4vw, 4.5rem); margin-bottom: 1.4rem; }
.structures__text > p { color: var(--encre-douce); max-width: 58ch; }
.formats { margin-top: 2rem; border-top: 1px solid var(--filet); }
.formats > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--filet); align-items: baseline; }
.formats dt { font: 400 1.25rem/1.2 var(--display); }
.formats dd { color: var(--encre-douce); font-size: .95rem; font-variant-numeric: lining-nums; text-align: right; }
.themes { margin-top: 1.6rem !important; font: italic 400 1.1rem/1.6 var(--serif); color: var(--terre) !important; }

/* ---------- Fin ---------- */
.close { position: relative; padding: clamp(100px, 12vw, 170px) 0 clamp(110px, 12vw, 170px); text-align: center; overflow: hidden; }
.close__inner { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter); }
.close h2 { font-size: clamp(2.7rem, 5.8vw, 4.7rem); margin-bottom: 1.4rem; }
.close__inner > p { color: var(--encre-douce); font-size: 1.1rem; max-width: 52ch; margin-left: auto; margin-right: auto; }
.close__direct { margin-top: 1.6rem !important; font-size: 1rem; }
.walk > section > .close__sprig { position: absolute; z-index: 1; right: max(2vw, calc((100vw - var(--max)) / 2 - 60px)); bottom: -20px; width: clamp(120px, 14vw, 220px); pointer-events: none; }

/* ---------- Pied de page ---------- */
.foot { background: var(--encre); color: var(--papier); }
.foot :focus-visible { outline-color: var(--rose); }
.foot__inner { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: clamp(60px, 7vw, 92px) var(--gutter) 32px; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; }
.foot p { color: #D9CEC5; font-size: .95rem; }
.foot a { color: var(--papier); }
.foot .btn { color: #FFF8F3; text-decoration: none; margin-top: 1.2rem; }
.foot__name { font: 400 2rem/1 var(--display) !important; color: var(--papier) !important; margin-bottom: .8rem !important; }
.foot__zone { margin-top: 1rem; max-width: 36ch; }
.foot__title { font-weight: 600; color: var(--rose) !important; margin-bottom: .6rem !important; letter-spacing: .04em; }
.foot__nav li { padding: 0; }
.foot__nav a { display: inline-block; padding: 10px 0; font-size: .95rem; text-decoration: none; }
.foot__nav a:hover { text-decoration: underline; }
.foot__contact p a { display: inline-block; padding: 8px 0; }
.foot__legal { grid-column: 1 / -1; border-top: 1px solid rgba(251, 247, 241, .16); padding-top: 22px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; }
.foot__legal p { font-size: .85rem; margin: 0; }

/* ---------- Adaptations ---------- */
@media (max-width: 959px) {
  .hero__text, .doors, .split--text, .home-visit__inner, .rebuild__head, .place__head, .structures__inner, .meet, .deck-section__inner { grid-template-columns: minmax(0, 1fr); }
  .doors__head { position: static; }
  .spread { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .meet__plate { max-width: 220px; margin: 0; }
  .foot__inner { grid-template-columns: 1fr 1fr; }
  .foot__id { grid-column: 1 / -1; }
  .wash { --w: 80vw !important; opacity: .7; }
  .wash--sprig { display: none; }
}
@media (max-width: 759px) {
  :root { --gutter: 22px; --cl: calc(var(--gutter) + 14px); }
  .step, .structures, .home-visit, .deck-section { padding-left: calc(var(--gutter) + 14px); }
  .hero__text, .top__inner, .foot__inner, .close__inner { padding-left: calc(var(--gutter) + 14px); }
  .walk__mark { width: 12px; height: 12px; left: calc(var(--cl) * -0.5 - 6px); }
  .ruler__marks { flex-direction: column; margin-left: 6px; }
  .ruler__marks li { flex: none !important; border-top: 0; border-left: 1.5px solid var(--terre); padding: 0 0 18px 22px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .ruler__marks li:nth-child(1), .ruler__marks li:nth-child(2) { min-height: 45px; }
  .ruler__marks li:nth-child(3), .ruler__marks li:nth-child(6) { min-height: 60px; }
  .ruler__marks li:nth-child(4), .ruler__marks li:nth-child(5) { min-height: 75px; }
  .ruler__marks li:nth-child(6) { border-left-style: dashed; }
  .ruler__marks li::before { left: -8px; top: .45em; width: 15px; height: 1.5px; }
  .ruler__marks li:first-child::before { left: -6px; top: .35em; width: 11px; height: 11px; }
  .ruler__fee { margin-top: 0; }
  .formats > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .formats dd { text-align: left; }
  .foot__inner { grid-template-columns: minmax(0, 1fr); }
  .offer-table { padding: 20px 16px; }
  .offer-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .offer-table table, .offer-table tbody, .offer-table tr, .offer-table th, .offer-table td { display: block; width: auto !important; }
  .offer-table tbody tr[data-row] { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--filet); }
  .offer-table tbody tr[data-row] > * { border: 0; padding: 0; }
  .offer-table tbody tr[data-row] th { grid-column: 1; grid-row: 1; }
  .offer-table tbody td:nth-of-type(3) { grid-column: 2; grid-row: 1; padding-left: 0; }
  .offer-table tbody td:nth-of-type(2) { grid-column: 1 / -1; grid-row: 2; text-align: left; font-size: .88rem; color: var(--encre-douce); margin-top: 2px; }
  .offer-table tbody td:nth-of-type(1) { grid-column: 1 / -1; grid-row: 3; margin-top: 6px; }
  .deck__fan { max-width: 330px; }
  .deck__fan img { width: 38%; }
  .walk > section > .close__sprig { opacity: .5; }
}

@media (prefers-reduced-motion: reduce) {
  html.js [data-bloom], html.js [data-reveal], html.js [data-row] { opacity: 1; transform: none; filter: none; transition: none; }
  html.js .hero__land img[data-bloom] { transform: translateX(-50%); }
  .wash--drift img { animation: none; }
  html.js .ruler.is-in .ruler__marks li { animation: none; }
  .deck__fan img { transition: none; }
  html.js .deck__fan img:nth-child(1) { transform: translateX(-120%) translateY(8%) rotate(-10deg); }
  html.js .deck__fan img:nth-child(3) { transform: translateX(20%) translateY(8%) rotate(10deg); }
  .btn::before, .link-arrow::before, .door::before { transition: none; }
}

/* =========================================================
   Pages intérieures
   ========================================================= */
.page { position: relative; overflow-x: clip; }
.page::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url("/assets/img/grain.png") 0 0 / 640px; mix-blend-mode: multiply; opacity: .05; }
.page > * { position: relative; z-index: 1; }
.page .wash { z-index: 0; }

.page-hero { position: relative; padding: clamp(56px, 8vw, 110px) var(--gutter) clamp(40px, 5vw, 64px); overflow: hidden; }
.page-hero__inner { position: relative; z-index: 2; max-width: var(--max); margin: 0 auto; }
.crumbs { font-size: .85rem; color: var(--encre-douce); margin-bottom: 1.6rem; }
.crumbs a { color: var(--encre-douce); }
.crumbs span { margin: 0 .4em; }
.page-hero__kicker { font: 500 .78rem/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--encre-douce); margin-bottom: 1rem; }
.page-hero h1 { font-size: clamp(2.6rem, 6.4vw, 5.2rem); max-width: 16ch; }
.page-hero h1 em { color: var(--terre); }
.page-hero__lede { font: italic 400 clamp(1.2rem, 1.8vw, 1.5rem)/1.45 var(--serif); max-width: 46ch; margin-top: 1.4rem; }
.page-hero__meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 1.6rem; font-size: .92rem; color: var(--encre-douce); }
.page-hero__meta b { color: var(--encre); font-weight: 600; }
.page-hero .actions { margin-top: 1.8rem; }

.band { padding: clamp(56px, 8vw, 110px) var(--gutter); }
.band--tint { background: var(--papier-2); }
.band__inner { max-width: var(--max); margin: 0 auto; }
.band__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: end; margin-bottom: clamp(32px, 4vw, 52px); }
.band__head h2 { font-size: clamp(2.2rem, 4.4vw, 3.5rem); }
.band__head p { color: var(--encre-douce); max-width: 46ch; }

/* article et texte courant */
.article { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: clamp(32px, 6vw, 96px); max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) clamp(64px, 8vw, 110px); align-items: start; }
.article--wide { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
.prose { max-width: 68ch; font-size: 1.08rem; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-top: 2.2em; }
.prose h3 { font-size: clamp(1.35rem, 2vw, 1.6rem); margin-top: 1.8em; }
.prose h2 + p, .prose h3 + p { margin-top: .7em; }
.prose p, .prose li { color: var(--encre-douce); }
.prose strong { color: var(--encre); }
.prose ul { display: grid; gap: .5em; }
.prose ul li { position: relative; padding-left: 26px; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .82em; width: 14px; height: 1.5px; background: var(--terre); }
.prose blockquote { border-left: 1.5px solid var(--terre); padding: .3em 0 .3em 1.2em; font: italic 400 1.3rem/1.45 var(--serif); color: var(--encre); }
.prose a { color: var(--prune); }
.prose .lead { font: italic 400 1.3rem/1.5 var(--serif); color: var(--encre); }
.prose .note { font-size: .92rem; padding: 14px 18px; background: rgba(231, 185, 166, .18); border-radius: 4px; }

.aside { position: sticky; top: calc(var(--top-h) + 28px); display: grid; gap: 22px; }
.aside__box { padding: 24px; background: rgba(255, 253, 249, .85); border: 1px solid var(--filet); border-radius: 4px; }
.aside__box h2, .aside__box h3 { font-size: 1.35rem; margin-bottom: .6rem; }
.aside__box p { font-size: .95rem; color: var(--encre-douce); }
.aside__box .btn { margin-top: 1rem; width: 100%; }
.toc a { display: block; padding: 7px 0; font-size: .95rem; color: var(--encre-douce); text-decoration: none; border-bottom: 1px solid var(--filet); transition: color .3s, padding .4s var(--ease); }
.toc a:hover { color: var(--prune); padding-left: 6px; }

/* questionnaire « Vous reconnaissez-vous ? » */
.selfcheck { margin-top: 2.4em; padding: clamp(24px, 3vw, 36px); background: rgba(255, 253, 249, .9); border: 1px solid var(--filet); border-radius: 4px; box-shadow: 0 24px 50px -40px rgba(46, 37, 34, .45); }
.selfcheck legend { font: 400 clamp(1.6rem, 2.6vw, 2rem)/1.15 var(--display); color: var(--encre); padding: 0; margin-bottom: .4rem; }
.selfcheck fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.selfcheck__hint { font-size: .92rem; color: var(--encre-douce); margin-bottom: 1.2rem; }
.selfcheck__list { display: grid; gap: 6px; }
.selfcheck__list label { display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start; padding: 12px 14px; border-radius: 4px; cursor: pointer; color: var(--encre); transition: background-color .3s; }
.selfcheck__list label:hover { background: rgba(231, 185, 166, .16); }
.selfcheck__list input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 3px 0 0; border: 1.5px solid var(--encre-douce); border-radius: 4px; background: var(--papier); display: grid; place-items: center; transition: background-color .25s, border-color .25s; cursor: pointer; }
.selfcheck__list input::after { content: ""; width: 10px; height: 6px; border-left: 2px solid #FFF8F3; border-bottom: 2px solid #FFF8F3; transform: rotate(-45deg) scale(0); margin-top: -2px; transition: transform .3s var(--ease); }
.selfcheck__list input:checked { background: var(--prune); border-color: var(--prune); }
.selfcheck__list input:checked::after { transform: rotate(-45deg) scale(1); }
.selfcheck__result { margin-top: 1.4rem; padding: 18px 20px; border-radius: 4px; background: var(--papier-2); color: var(--encre); font-size: 1rem; min-height: 3.2em; transition: background-color .4s; }
.selfcheck__result.is-some { background: rgba(231, 185, 166, .28); }
.selfcheck__result.is-many { background: rgba(142, 65, 85, .12); }
.selfcheck__result .btn { margin-top: .9rem; }
.selfcheck__foot { margin-top: 1rem; font-size: .85rem; color: var(--encre-douce); }

/* encadré de rendez-vous */
.cta-panel { position: relative; overflow: hidden; margin: clamp(48px, 6vw, 80px) auto 0; max-width: var(--max); padding: clamp(32px, 5vw, 64px); background: var(--papier-2); border-radius: 4px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: center; }
.cta-panel h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
.cta-panel p { color: var(--encre-douce); margin-top: .9rem; }
.cta-panel .actions { margin-top: 0; justify-content: flex-end; }
.cta-panel .wash { opacity: .5; }
.cta-wrap { padding: 0 var(--gutter) clamp(72px, 9vw, 120px); }

/* listes de liens (articles liés, pages) */
.linklist { border-top: 1px solid var(--filet); }
.linklist a { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--filet); text-decoration: none; color: var(--encre); }
.linklist a::after { content: ""; width: 24px; height: 14px; background: var(--prune); -webkit-mask: var(--svg-arrow) center / contain no-repeat; mask: var(--svg-arrow) center / contain no-repeat; transition: transform .45s var(--ease); }
.linklist a:hover::after { transform: translateX(6px); }
.linklist strong { display: block; font: 400 clamp(1.3rem, 2vw, 1.6rem)/1.2 var(--display); }
.linklist span { display: block; font-size: .93rem; color: var(--encre-douce); margin-top: 4px; }

/* cartes de contenu (grille) */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 28px); }
.tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile { padding: clamp(24px, 2.6vw, 34px); background: rgba(255, 253, 249, .85); border: 1px solid var(--filet); border-radius: 4px; transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.tile:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -40px rgba(46, 37, 34, .55); }
.tile::before { content: ""; display: block; width: 32px; height: 1.5px; background: var(--terre); margin-bottom: 18px; }
.tile h3 { font-size: clamp(1.35rem, 1.9vw, 1.65rem); margin-bottom: .7rem; }
.tile p, .tile li { color: var(--encre-douce); font-size: .98rem; }
.tile ul { display: grid; gap: .35em; margin-top: .6rem; }
.tile ul li { position: relative; padding-left: 20px; }
.tile ul li::before { content: ""; position: absolute; left: 0; top: .8em; width: 10px; height: 1.5px; background: var(--terre); }
.tile__meta { margin-top: 1rem; font-size: .9rem; color: var(--prune); font-weight: 600; }

/* ateliers dépliables */
.workshops { border-top: 1px solid var(--filet); }
.workshop { border-bottom: 1px solid var(--filet); }
.workshop summary { list-style: none; display: grid; grid-template-columns: 1fr auto auto; gap: 18px; align-items: baseline; padding: 22px 0; cursor: pointer; }
.workshop summary::-webkit-details-marker { display: none; }
.workshop summary h3 { font-size: clamp(1.3rem, 2vw, 1.65rem); }
.workshop__for { font-size: .9rem; color: var(--encre-douce); white-space: nowrap; }
.workshop summary::after { content: ""; width: 14px; height: 14px; border-right: 1.5px solid var(--prune); border-bottom: 1.5px solid var(--prune); transform: rotate(45deg) translateY(-4px); transition: transform .45s var(--ease); }
.workshop[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.workshop__body { padding: 0 0 26px; max-width: 72ch; color: var(--encre-douce); }
.workshop__body p + p, .workshop__body ul { margin-top: .7em; }
.workshop__body ul { display: grid; gap: .35em; }
.workshop__body ul li { position: relative; padding-left: 20px; }
.workshop__body ul li::before { content: ""; position: absolute; left: 0; top: .8em; width: 10px; height: 1.5px; background: var(--terre); }
.workshop[open] .workshop__body { animation: open .6s var(--ease); }
@keyframes open { from { opacity: 0; transform: translateY(-6px); } }

.steps { counter-reset: s; display: grid; gap: 0; border-top: 1px solid var(--filet); }
.steps li { counter-increment: s; position: relative; padding: 18px 0 18px 68px; border-bottom: 1px solid var(--filet); color: var(--encre-douce); }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 16px; font: 400 1.9rem/1 var(--display); color: var(--terre); }
.steps li strong { display: block; color: var(--encre); font-weight: 600; margin-bottom: 2px; }

/* formulaires */
.form { display: grid; gap: 22px; max-width: 760px; }
.form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 18px; min-width: 0; }
.form legend { font: 400 1.5rem/1.2 var(--display); margin-bottom: 4px; padding: 0; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 6px; }
.field label, .field .label { font-size: .95rem; font-weight: 500; color: var(--encre); }
.field .req { color: var(--prune); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="date"], .field input[type="number"], .field select, .field textarea {
  width: 100%; font: 400 1rem/1.5 var(--sans); color: var(--encre); background: rgba(255, 253, 249, .95);
  border: 1px solid rgba(46, 37, 34, .28); border-radius: 4px; padding: 12px 14px; min-height: 48px; transition: border-color .25s, box-shadow .25s;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--prune); box-shadow: 0 0 0 3px rgba(142, 65, 85, .16); }
.field small { font-size: .85rem; color: var(--encre-douce); }
.choices { display: flex; flex-wrap: wrap; gap: 10px; }
.choices label { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid rgba(46, 37, 34, .28); border-radius: 999px; cursor: pointer; font-size: .95rem; transition: background-color .25s, border-color .25s, color .25s; }
.choices input { position: absolute; opacity: 0; pointer-events: none; }
.choices input:checked + span { color: #FFF8F3; }
.choices label:has(input:checked) { background: var(--prune); border-color: var(--prune); color: #FFF8F3; }
.choices label:has(input:focus-visible) { outline: 2px solid var(--prune); outline-offset: 3px; }
.consent { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: .92rem; color: var(--encre-douce); }
.consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--prune); }
.form__privacy { font-size: .88rem; color: var(--encre-douce); padding: 14px 18px; background: rgba(231, 185, 166, .16); border-radius: 4px; }
.hp { position: absolute; left: -9999px; }
.form-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: clamp(32px, 6vw, 96px); max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) clamp(72px, 9vw, 120px); align-items: start; }

/* adaptations */
@media (max-width: 959px) {
  .article, .form-layout, .cta-panel, .band__head { grid-template-columns: minmax(0, 1fr); }
  .aside { position: static; }
  .tiles, .tiles--2 { grid-template-columns: minmax(0, 1fr); }
  .cta-panel .actions { justify-content: flex-start; }
}
@media (max-width: 759px) {
  .page-hero, .band, .cta-wrap { padding-left: calc(var(--gutter) + 4px); }
  .form .row { grid-template-columns: minmax(0, 1fr); }
  .workshop summary { grid-template-columns: 1fr auto; }
  .workshop__for { grid-column: 1; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .workshop[open] .workshop__body { animation: none; }
  .tile, .toc a { transition: none; }
}

/* intitulés d'axes dans la liste des ateliers */
.workshops__axis { font: 500 .78rem/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--terre); margin: clamp(36px, 4vw, 56px) 0 6px; }
.band__head + .workshops__axis { margin-top: 0; }
.offer-table tbody th a { color: inherit; text-decoration-color: rgba(142, 65, 85, .4); text-underline-offset: 3px; }
.offer-table tbody th a:hover { color: var(--prune); }
/* aligne le contenu des pages intérieures sur le titre (la marge est incluse dans la largeur) */
.article, .form-layout { max-width: calc(var(--max) + 2 * var(--gutter)); }
.article--wide { max-width: calc(860px + 2 * var(--gutter)); margin-left: max(0px, calc((100% - var(--max) - 2 * var(--gutter)) / 2)); }

/* Calme Profond : albums et plateformes */
.platforms { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.4rem; }
.platforms a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid rgba(46, 37, 34, .24); border-radius: 999px; font-size: .9rem; color: var(--encre); text-decoration: none; transition: border-color .3s, color .3s, background-color .3s; }
.platforms a:hover { border-color: var(--prune); color: var(--prune); background: rgba(142, 65, 85, .06); }
.album { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.album h2 { font-size: clamp(2.2rem, 4.2vw, 3.4rem); margin-bottom: 1rem; }
.album h2 em { color: var(--terre); font-size: .72em; }
.album__head > p:not(.page-hero__kicker) { color: var(--encre-douce); }
.album__head > p a { color: var(--prune); }
.tracks { counter-reset: t; border-top: 1px solid var(--filet); }
.tracks li { counter-increment: t; display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--filet); font: 400 clamp(1.1rem, 1.6vw, 1.3rem)/1.3 var(--display); }
.tracks li::before { content: counter(t, decimal-leading-zero); font: 500 .8rem/1 var(--sans); color: var(--terre); letter-spacing: .08em; }
.tracks a { color: var(--encre); text-decoration: none; transition: color .3s; }
.tracks a:hover { color: var(--prune); }
.tracks__time { font: 400 .85rem/1 var(--sans); color: var(--encre-douce); font-variant-numeric: tabular-nums; }
.listen { margin-top: 2.2em; padding: 20px 22px; border-left: 1.5px solid var(--terre); background: rgba(255, 253, 249, .7); }
.listen p { margin: 0; }
.listen__kicker { font: 500 .74rem/1.4 var(--sans) !important; letter-spacing: .16em; text-transform: uppercase; color: var(--terre) !important; }
@media (max-width: 960px) { .album { grid-template-columns: minmax(0, 1fr); } }

.price-tag { margin-top: 1rem; font: italic 400 1.2rem/1.4 var(--serif); color: var(--encre) !important; }
.price-tag strong { font: 400 1.7rem/1 var(--display); color: var(--terre); font-style: normal; margin-right: .2em; }

/* portrait illustré */
.portrait { display: block; width: 100%; height: auto; }
.meet__portrait .portrait { max-width: 360px; margin: 0 auto; }
.aside__portrait { margin: 0 0 -8px; }
@media (max-width: 960px) { .meet__portrait .portrait { max-width: 280px; margin: 0; } .aside__portrait { max-width: 300px; } }

/* Féminité sauvage : même structure, palette plus chaude (braise, cuivre) */
.page--sauvage { --terre: #B23A22; }
.page--sauvage .band--tint { background: #F6E6DA; }
.page--sauvage .page-hero h1 em { color: #B23A22; }
.page--sauvage .tile::before { background: linear-gradient(90deg, #8E1F1A, #E0782E); width: 44px; }
.page--sauvage .cta-panel { background: #F3DED0; }

/* scènes illustrées (Naomie au travail) */
.scene { margin: 0; }
.scene img { display: block; width: 100%; height: auto; }
.page-hero__inner--split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.page-hero__inner--split h1 { max-width: 13ch; }
.page-hero:has(.page-hero__inner--split) > .wash { opacity: .3 !important; }
.split-scene { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
@media (max-width: 960px) {
  .page-hero__inner--split, .split-scene { grid-template-columns: minmax(0, 1fr); }
  .page-hero__inner--split .scene, .split-scene .scene { max-width: 560px; }
}
.home-visit__scene { margin-top: 1.6rem; max-width: 520px; }
/* lisibilité du texte d'accroche : halo papier derrière le bloc de droite */
.hero__side { position: relative; z-index: 3; }
.hero__side::before { content: ""; position: absolute; inset: -28px -36px -24px -32px; z-index: -1; background: radial-gradient(closest-side, rgba(251, 247, 241, .92), rgba(251, 247, 241, .75) 60%, rgba(251, 247, 241, 0)); pointer-events: none; }

/* film « La fenêtre » (page Emprise) */
.film { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter) clamp(40px, 6vw, 80px); display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(24px, 4vw, 56px); align-items: end; }
.film__frame { position: relative; margin: 0; border-radius: 6px; overflow: hidden; box-shadow: 0 40px 80px -50px rgba(46, 37, 34, .7); background: #1d1822; }
.film__frame video { display: block; width: 100%; height: auto; }
.film__sound { position: absolute; top: 16px; right: 16px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: rgba(251, 247, 241, .9); color: var(--prune); font: 600 .85rem/1 var(--sans); cursor: pointer; transition: background-color .3s; }
.film__sound:hover { background: #fff; }
.film__sound:focus-visible { outline: 2px solid var(--prune); outline-offset: 3px; }
.film__cap h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: .6rem; }
.film__cap p { color: var(--encre-douce); }
@media (max-width: 960px) { .film { grid-template-columns: minmax(0, 1fr); } }
.top__cta { white-space: nowrap; }
@media (max-width: 460px) { .top__cta { padding-left: 14px; padding-right: 14px; font-size: .82rem; } }
.top__cta { flex-shrink: 0; }