/* Karis Consulting · éditorial en chapitres.
   Palette de la marque (imposée par le kit) : Nuit domine, Ivoire est le papier,
   le laiton est réservé au signal (nœuds, lumière, filets). */

@font-face { font-family: "Marcellus"; src: url("/fonts/marcellus.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Jost"; src: url("/fonts/jost-var.woff") format("woff"); font-weight: 100 900; font-display: swap; }

:root {
  --nuit: #0D1B2E; --nuit-2: #13253D; --nuit-3: #1A3050;
  --ivoire: #F6F1E7; --sable: #E2DACB; --ardoise: #5B6B7F;
  --laiton: #B8924A; --laiton-clair: #D4B16A; --laiton-f: #9A7430;
  --brume: #AEB7C4;

  --sc-canvas: var(--nuit); --sc-surface: var(--nuit-2);
  --sc-ink: var(--ivoire); --sc-ink-soft: var(--brume);
  --sc-accent: var(--laiton); --sc-accent-ink: var(--nuit);
  --sc-font-display: "Marcellus", Georgia, serif;
  --sc-font-text: "Jost", system-ui, sans-serif;
  --sc-shadow-color: 216 56% 6%;
  --sc-r-sm: 4px; --sc-r-md: 10px;

  --folio-w: 0px; --folio-h: 56px;
  --t-h1: clamp(2.5rem, 1.35rem + 4.4vw, 5.6rem);
  --t-h2: clamp(2rem, 1.4rem + 2.2vw, 3.4rem);
}
@media (min-width: 1024px) { :root { --folio-w: 88px; --folio-h: 0px; } }

body { background: var(--nuit); padding-left: var(--folio-w); font-weight: 400; }
::selection { background: var(--laiton); color: var(--nuit); }

/* ------------------------------------------------------------ grounds -- */
/* Restater color à chaque changement de fond : la couleur héritée ne suit pas le jeton. */
.ch--dark  { --sc-canvas: var(--nuit); --sc-ink: var(--ivoire); --sc-ink-soft: var(--brume); --sc-accent: var(--laiton); --sc-accent-ink: var(--nuit); --sc-hairline: rgb(246 241 231 / 0.14); background: var(--nuit); color: var(--sc-ink); }
.ch--light { --sc-canvas: var(--ivoire); --sc-ink: var(--nuit); --sc-ink-soft: var(--ardoise); --sc-accent: var(--laiton-f); --sc-accent-ink: var(--ivoire); --sc-hairline: rgb(13 27 46 / 0.14); background: var(--ivoire); color: var(--sc-ink); }
.ch--dark { line-height: 1.68; letter-spacing: 0.004em; }
.ch { position: relative; padding-block: var(--sc-section); }

.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--laiton); color: var(--nuit); padding: 10px 16px; border-radius: var(--sc-r-sm); }
.skip:focus { left: calc(var(--folio-w) + 12px); }

/* --------------------------------------------------------- typography -- */
.h2, .title__h1, .tool__name, .founder__quote p {
  font-family: var(--sc-font-display); font-weight: 400; margin: 0;
  text-wrap: balance; letter-spacing: -0.012em;
}
.h2 { font-size: var(--t-h2); line-height: 1.06; max-width: 18ch; }
.lede { font-size: var(--sc-t-lg); line-height: 1.5; max-width: 40ch; margin: 0; text-wrap: pretty; color: var(--sc-ink); font-weight: 400; }
.ch--dark .lede { font-weight: 300; }
p { text-wrap: pretty; }
h3 { font-family: var(--sc-font-text); font-weight: 500; font-size: var(--sc-t-lg); line-height: 1.3; margin: 0; letter-spacing: -0.005em; }

.btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px;
  background: var(--laiton); color: var(--nuit); border: 0; border-radius: var(--sc-r-sm);
  font: 500 var(--sc-t-sm)/1 var(--sc-font-text); letter-spacing: 0.02em; text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: var(--sc-e1); transition: background-color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--laiton-clair); } }
.btn:active { transform: scale(0.97); }
.btn:disabled { background: rgb(184 146 74 / 0.32); color: rgb(246 241 231 / 0.6); cursor: not-allowed; box-shadow: none; }
.ch--light .btn { background: var(--nuit); color: var(--ivoire); }
@media (hover: hover) and (pointer: fine) { .ch--light .btn:hover { background: var(--nuit-3); } }
.btn--small { padding: 10px 16px; font-size: var(--sc-t-xs); }
.link { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--sc-accent) 70%, transparent); text-underline-offset: 0.28em; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; transition: text-decoration-color 160ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .link:hover { text-decoration-color: currentColor; } }

.fig { margin: 0; }
.fig img, .univers__fig img, .founder__fig img { width: 100%; height: auto; border-radius: var(--sc-r-sm); }
figcaption { margin-top: var(--sc-3); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }

/* ------------------------------------------------------------- folio -- */
.folio {
  position: fixed; z-index: var(--sc-z-chrome); left: 0; top: 0;
  display: flex; align-items: center; gap: var(--sc-3);
  width: 100%; height: 56px; padding: 0 var(--sc-gutter);
  background: rgb(13 27 46 / 0.94); border-bottom: 1px solid rgb(246 241 231 / 0.1); color: var(--ivoire);
}
.folio__home { display: block; flex: none; width: 30px; border-radius: var(--sc-r-sm); }
.folio__k { width: 100%; height: auto; overflow: visible; }
.folio__edges path { fill: none; stroke: rgb(246 241 231 / 0.22); stroke-width: 4; }
.folio__edges .is-brass { stroke: rgb(184 146 74 / 0.4); }
.folio__nodes circle { fill: var(--nuit); stroke: rgb(246 241 231 / 0.4); stroke-width: 4; transition: fill 420ms var(--sc-ease-out), stroke 420ms var(--sc-ease-out); }
.folio__nodes circle.is-lit { fill: var(--laiton); stroke: var(--laiton); }
.folio__nodes circle.is-current { fill: var(--ivoire); stroke: var(--laiton); }
.folio.is-complete .folio__edges path { stroke: var(--ivoire); }
.folio.is-complete .folio__edges .is-brass { stroke: var(--laiton); }
.folio__label { margin: 0; flex: 1; min-width: 0; display: flex; gap: var(--sc-2); font-size: var(--sc-t-xs); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity 240ms var(--sc-ease-out); }
.folio__label.is-on { opacity: 1; }
.folio__num { color: var(--laiton); }
.folio__tools { display: flex; align-items: center; gap: var(--sc-2); }
.folio__lang { font-size: var(--sc-t-xs); letter-spacing: 0.14em; text-decoration: none; padding: 10px 8px; border-radius: var(--sc-r-sm); }
.folio__icon { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: inherit; border-radius: var(--sc-r-sm); cursor: pointer; }
.folio__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) { .folio__icon:hover, .folio__lang:hover { color: var(--laiton-clair); } }
.folio__contact { display: none; }

@media (min-width: 1024px) {
  .folio {
    width: var(--folio-w); height: 100svh; flex-direction: column; justify-content: space-between;
    padding: 28px 0 22px; border-bottom: 0; border-right: 1px solid rgb(246 241 231 / 0.1); background: var(--nuit);
  }
  .folio__home { width: 46px; }
  .folio__label { flex: 1; writing-mode: vertical-rl; transform: rotate(180deg); align-items: center; justify-content: center; gap: var(--sc-3); padding: var(--sc-6) 0; overflow: visible; }
  .folio__tools { flex-direction: column; gap: var(--sc-1); }
  .folio__contact { display: grid; }
}

/* ------------------------------------------------------------- index -- */
.index {
  position: fixed; z-index: calc(var(--sc-z-chrome) + 1); inset: 0 auto 0 0; width: min(380px, 100%);
  display: flex; flex-direction: column; gap: var(--sc-6); padding: var(--sc-6);
  background: var(--nuit-2); color: var(--ivoire); box-shadow: var(--sc-e3);
  transform: translateX(-102%); transition: transform 320ms var(--sc-ease-drawer); visibility: hidden;
}
.index.is-open { transform: none; visibility: visible; }
.index[hidden] { display: flex; }
.index__head { display: flex; justify-content: space-between; align-items: center; }
.index__head img { width: 168px; height: auto; }
.index__close { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: inherit; cursor: pointer; border-radius: var(--sc-r-sm); }
.index__close svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; }
.index__list { list-style: none; margin: 0; padding: 0; display: grid; }
.index__list a { display: flex; gap: var(--sc-4); align-items: baseline; padding: 12px 0; border-bottom: 1px solid rgb(246 241 231 / 0.1); text-decoration: none; font-family: var(--sc-font-display); font-size: var(--sc-t-lg); }
.index__n { min-width: 2ch; font: 400 var(--sc-t-xs)/1 var(--sc-font-text); letter-spacing: 0.12em; color: var(--laiton); }
@media (hover: hover) and (pointer: fine) { .index__list a:hover { color: var(--laiton-clair); } }
.index__foot { margin: auto 0 0; display: flex; flex-wrap: wrap; gap: var(--sc-4); align-items: center; }
.scrim-index { position: fixed; inset: 0; z-index: var(--sc-z-chrome); background: rgb(6 13 23 / 0.5); opacity: 0; transition: opacity 240ms var(--sc-ease-out); pointer-events: none; }
.scrim-index.is-on { opacity: 1; pointer-events: auto; }

/* ------------------------------------------------- 00 page de titre -- */
.title {
  min-height: 100svh; display: flex; align-items: flex-end; overflow: clip;
  padding-block: calc(var(--folio-h) + var(--sc-8)) clamp(3rem, 10vh, 7rem);
  background:
    radial-gradient(55% 60% at 74% 40%, rgb(184 146 74 / 0.13), transparent 70%),
    radial-gradient(40% 50% at 10% 100%, rgb(26 48 80 / 0.7), transparent 70%),
    var(--nuit);
}
.field { position: absolute; inset: 0; pointer-events: none; }
.field__plane { position: absolute; inset: -6% 0 0 0; width: 100%; height: 106%; overflow: visible; }
.field__plane g { transition: transform 900ms var(--sc-ease-out); }
.field__plane--far { filter: blur(1.6px); opacity: 0.5; }
.field__plane--near { opacity: 0.95; }
.field circle { fill: none; stroke: var(--ivoire); vector-effect: non-scaling-stroke; }
.field circle.is-brass { stroke: var(--laiton); }
.field circle.is-fill { fill: var(--laiton); stroke: none; }
.field line { stroke: rgb(246 241 231 / 0.18); stroke-width: 1; vector-effect: non-scaling-stroke; }
.field .sway { animation: sway var(--dur, 9s) ease-in-out var(--delay, 0s) infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes sway { to { transform: translate(var(--dx, 6px), var(--dy, -8px)); } }

.title__copy { position: relative; z-index: 2; width: 100%; padding-inline: var(--sc-gutter); max-width: calc(var(--sc-maxw) + 2 * var(--sc-gutter)); margin-inline: auto; }
.title__mark { width: clamp(230px, 22vw, 360px); height: auto; margin-bottom: clamp(2.5rem, 7vh, 5rem); }
.title__h1 { font-size: var(--t-h1); line-height: 1.02; max-width: 11ch; animation: focus-in 1500ms var(--sc-ease-out) 150ms both; }
.title__sub { max-width: 36ch; margin: var(--sc-5) 0 0; font-size: var(--sc-t-lg); font-weight: 300; line-height: 1.5; color: var(--brume); animation: rise-in 900ms var(--sc-ease-out) 700ms both; }
.title__cta { display: flex; flex-wrap: wrap; gap: var(--sc-5); align-items: center; margin: var(--sc-7) 0 0; animation: rise-in 900ms var(--sc-ease-out) 900ms both; }
@keyframes focus-in { from { opacity: 0; filter: blur(16px); letter-spacing: 0.04em; } to { opacity: 1; filter: blur(0); letter-spacing: -0.012em; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------- 01 le constat -- */
.constat__grid { display: grid; gap: var(--sc-8); align-items: center; }
.constat__q { list-style: none; margin: var(--sc-6) 0 0; padding: 0; display: grid; gap: var(--sc-3); }
.constat__q li { font-family: var(--sc-font-display); font-size: var(--sc-t-xl); line-height: 1.25; padding-bottom: var(--sc-3); border-bottom: 1px solid var(--sc-hairline); }
.constat__close { margin: var(--sc-6) 0 0; font-size: var(--sc-t-lg); max-width: 36ch; color: var(--sc-ink-soft); }
@media (min-width: 1024px) {
  .constat__grid { grid-template-columns: 6fr 5fr; gap: var(--sc-9); }
  .constat__fig { margin-right: calc(-1 * var(--sc-gutter)); }
}

/* --------------------------------------------- 02 la méthode (le pic) -- */
.method { padding-block: 0; }
.method__stage { display: grid; align-content: center; gap: var(--sc-5); padding: calc(var(--folio-h) + var(--sc-5)) var(--sc-gutter) var(--sc-5); }
.method__steps { list-style: none; margin: var(--sc-5) 0 0; padding: 0; display: grid; gap: var(--sc-2); }
.method__step { display: grid; grid-template-columns: 2.4rem 1fr; gap: var(--sc-3); padding: var(--sc-3) 0; border-top: 1px solid var(--sc-hairline); opacity: 0.42; transition: opacity 320ms var(--sc-ease-out); }
.method__step.is-active, .method__step.is-done { opacity: 1; }
.method__step.is-done:not(.is-active) { opacity: 0.68; }
.method__n { font-size: var(--sc-t-xs); letter-spacing: 0.12em; color: var(--sc-ink-soft); padding-top: 0.35rem; transition: color 320ms var(--sc-ease-out); }
.method__step.is-active .method__n { color: var(--laiton); }
.method__step h3 { font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-xl); }
.method__step p { margin: var(--sc-1) 0 0; color: var(--sc-ink-soft); max-width: 44ch; font-size: var(--sc-t-sm); }
.method__step:not(.is-active) p { display: none; }
.method__fig { margin: 0; display: grid; justify-items: center; gap: var(--sc-2); }
.kfig { width: min(100%, 52svh, 640px); height: auto; overflow: visible; }
.kfig__edges path { fill: none; stroke: var(--ivoire); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .kfig__edges path { stroke-dashoffset: 1; }
.kfig__edges .is-brass { stroke: var(--laiton); stroke-width: 3.6; }
.kfig__flow path { fill: none; stroke: var(--laiton-clair); stroke-width: 4.2; stroke-linecap: round; stroke-dasharray: 0.07 0.93; stroke-dashoffset: 0.07; opacity: 0; transition: opacity 600ms var(--sc-ease-out); }
.kfig.is-flowing .kfig__flow path { opacity: 1; }
.kfig__halo { fill: none; stroke: var(--laiton); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity 600ms var(--sc-ease-out); }
.kfig.is-flowing .kfig__halo { opacity: 0.55; animation: breathe 4.6s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.16); opacity: 0.25; } }
.kfig__nodes circle { fill: var(--nuit); stroke: var(--ivoire); stroke-width: 3; }
.kfig__nodes circle.is-brass { stroke: var(--laiton); }
.kfig__nodes circle.is-core { fill: var(--laiton); stroke: none; }
.kfig__dots circle { fill: var(--brume); }
.method__state { min-height: 1.6em; font-size: var(--sc-t-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--laiton); }
@media (min-width: 1024px) {
  .method__stage { grid-template-columns: 5fr 7fr; align-items: center; gap: var(--sc-8); padding-inline: var(--sc-gutter); max-width: calc(var(--sc-maxw) + 2 * var(--sc-gutter)); margin-inline: auto; }
  .method__step:not(.is-active) p { display: block; }
  .kfig { width: min(100%, 76svh, 760px); }
}
/* Section en flux juste après un acte épinglé : marge haute réduite. */
.method + .ch { padding-top: var(--sc-8); }

/* ------------------------------------------------------ 03 expertises -- */
.expertises__grid { display: grid; gap: var(--sc-8); }
.fig__frame { overflow: hidden; border-radius: var(--sc-r-sm); aspect-ratio: 4 / 5; }
.fig__frame img { width: 100%; height: 112%; object-fit: cover; object-position: 40% 30%; border-radius: 0; }
.poles { margin: var(--sc-7) 0 0; display: grid; }
.pole { display: grid; gap: var(--sc-2); padding: var(--sc-5) 0; border-top: 1px solid var(--sc-hairline); }
.pole:last-child { border-bottom: 1px solid var(--sc-hairline); }
.pole dt { font-family: var(--sc-font-display); font-size: var(--sc-t-xl); }
.pole dd { margin: 0; color: var(--sc-ink-soft); max-width: 52ch; }
.expertises__text .lede { margin-top: var(--sc-5); }
@media (min-width: 1024px) {
  .expertises__grid { grid-template-columns: 5fr 6fr; gap: var(--sc-9); align-items: start; }
  .expertises__fig { position: sticky; top: var(--sc-7); margin-left: calc(-1 * var(--sc-gutter)); }
  .pole { grid-template-columns: 11rem 1fr; gap: var(--sc-5); }
}

/* --------------------------------------------------------------- 04 IA -- */
.ia__grid { display: grid; gap: var(--sc-8); }
.ia__text .lede { margin-top: var(--sc-5); }
.commitments { list-style: none; margin: var(--sc-7) 0 0; padding: 0; display: grid; }
.commitments li { position: relative; padding: var(--sc-4) 0 var(--sc-4) 2rem; border-top: 1px solid var(--sc-hairline); max-width: 48ch; }
.commitments li::before { content: ""; position: absolute; left: 0.2rem; top: 1.45rem; width: 10px; height: 10px; border: 1.5px solid var(--laiton); border-radius: 50%; }
.demo { background: var(--nuit-2); border-radius: var(--sc-r-md); padding: var(--sc-6); box-shadow: var(--sc-e2), var(--sc-edge); align-self: start; }
.demo__title { margin: 0 0 var(--sc-5); font-size: var(--sc-t-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--laiton); }
.demo__track { position: relative; }
.chain { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-5); position: relative; }
.chain::before { content: ""; position: absolute; left: 11px; top: 12px; bottom: 12px; width: 1px; background: rgb(246 241 231 / 0.2); }
.chain__node { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-3) var(--sc-4); min-height: 24px; padding-left: 40px; }
.chain__dot { position: absolute; left: 0; top: 0; width: 23px; height: 23px; border-radius: 50%; border: 2px solid rgb(246 241 231 / 0.55); background: var(--nuit-2); transition: border-color 300ms var(--sc-ease-out), background-color 300ms var(--sc-ease-out); }
.chain__node.is-passed .chain__dot { border-color: var(--ivoire); }
.chain__node--human .chain__dot { border-color: var(--laiton); }
.chain__node--human.is-waiting .chain__dot { box-shadow: 0 0 0 6px rgb(184 146 74 / 0.18); }
.chain__node--human.is-passed .chain__dot { background: var(--laiton); }
.chain__label { line-height: 23px; }
.chain__node--human .chain__label { color: var(--laiton-clair); }
.chain__pulse { position: absolute; left: 6px; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--laiton-clair); box-shadow: 0 2px 8px -1px rgb(212 177 106 / 0.6); opacity: 0; pointer-events: none; }
.demo__status { min-height: 1.6em; margin: var(--sc-5) 0 0; font-size: var(--sc-t-sm); color: var(--brume); }
.demo__replay { margin-top: var(--sc-2); font-size: var(--sc-t-sm); }
@media (min-width: 1024px) {
  .ia__grid { grid-template-columns: 6fr 5fr; column-gap: var(--sc-9); row-gap: var(--sc-8); }
  .ia__fig { grid-column: 1 / -1; width: 74%; justify-self: end; margin-right: calc(-1 * var(--sc-gutter)); }
}

/* ---------------------------------------------------- 05 deux univers -- */
.univers__fig { margin: var(--sc-7) 0 0; }
.univers__fig img { aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 40%; }
.facing { display: grid; margin-top: var(--sc-8); }
.facing__page { padding: var(--sc-6) 0; border-top: 1px solid var(--sc-hairline); }
.facing__page h3 { font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-xl); max-width: 22ch; }
.facing__page p { margin: var(--sc-4) 0 0; color: var(--sc-ink-soft); max-width: 46ch; }
.facing__page .facing__inside { color: var(--sc-ink); }
@media (min-width: 860px) {
  .facing { grid-template-columns: 1fr 1fr; }
  .facing__page { padding: var(--sc-2) var(--sc-8) var(--sc-2) 0; }
  .facing__page + .facing__page { padding: var(--sc-2) 0 var(--sc-2) var(--sc-8); border-left: 1px solid var(--sc-hairline); }
  .facing__page { border-top: 0; }
}

/* ------------------------------------------------------ 06 réalisations -- */
.work { overflow: clip; }
.work__grid { display: grid; gap: var(--sc-8); }
.work__text .lede { margin-top: var(--sc-5); }
.work__deck { display: grid; gap: var(--sc-4); perspective: 1600px; }
.tool {
  background: linear-gradient(180deg, var(--nuit-3), var(--nuit-2)); border-radius: var(--sc-r-md); padding: var(--sc-6);
  box-shadow: var(--sc-e3), var(--sc-edge); border: 1px solid rgb(246 241 231 / 0.06);
}
/* Une teinte par outil, sombre et accordée à la Nuit : bronze (formation), forêt (vie d'église), latérite (enfants). */
.tool--laiton   { --tool-accent: #D4B16A; background: linear-gradient(180deg, #3B3121, #29231A); border-color: rgb(212 177 106 / 0.2); }
.tool--foret    { --tool-accent: #8FC9B3; background: linear-gradient(180deg, #1A4038, #122D28); border-color: rgb(143 201 179 / 0.2); }
.tool--laterite { --tool-accent: #E6A487; background: linear-gradient(180deg, #4C2B21, #371E17); border-color: rgb(230 164 135 / 0.2); }
.tool__for { margin: 0; font-size: var(--sc-t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tool-accent, var(--laiton)); }
.tool__name { font-size: var(--sc-t-2xl); line-height: 1; margin-top: var(--sc-4); }
.tool__d { margin: var(--sc-3) 0 0; color: var(--brume); }
.tool__f { list-style: none; margin: var(--sc-5) 0 0; padding: 0; display: grid; gap: var(--sc-2); }
.tool__f li { position: relative; padding-left: 1.4rem; font-size: var(--sc-t-sm); }
.tool__f li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--tool-accent, var(--laiton)); }
.tool__d { color: rgb(246 241 231 / 0.78); }
@media (min-width: 1024px) {
  .work__grid { gap: var(--sc-8); }
  /* Les fiches partent empilées en perspective et s'ouvrent, côte à côte, avec la progression de l'acte. */
  .work__deck { --fan: clamp(0, calc((var(--sc-p, 1) - 0.14) * 3.2), 1); --step: clamp(16rem, 24vw, 23rem); position: relative; display: block; height: 37rem; }
  .tool {
    position: absolute; width: calc(var(--step) - 1.5rem); top: 0; left: 0;
    transform:
      translate3d(calc(var(--i) * (3rem + var(--fan) * (var(--step) - 3rem))), calc(var(--i) * (1.5rem + var(--fan) * 1rem)), calc((1 - var(--fan)) * var(--i) * -80px))
      rotateY(calc((1 - var(--fan)) * -16deg)) rotateX(calc((1 - var(--fan)) * 5deg));
    transform-origin: 0 50%;
    z-index: calc(3 - var(--i));
  }
}

/* ------------------------------------------- 07 mission et fondateur -- */
.mission__steps { list-style: none; margin: var(--sc-7) 0 0; padding: 0; display: grid; gap: var(--sc-5) var(--sc-6); position: relative; }
.mission__steps li { position: relative; padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline); }
.mission__steps li::before { content: ""; position: absolute; top: -6px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--ivoire); border: 1.5px solid var(--laiton-f); }
.mission__n { font-size: var(--sc-t-xs); letter-spacing: 0.12em; color: var(--sc-ink-soft); }
.mission__steps h3 { font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-xl); margin-top: var(--sc-1); }
.mission__steps p { margin: var(--sc-2) 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.mission__note { margin: var(--sc-7) 0 0; font-family: var(--sc-font-display); font-size: var(--sc-t-xl); }
@media (min-width: 640px) { .mission__steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .mission__steps { grid-template-columns: repeat(6, 1fr); } }

.founder__grid { display: grid; gap: var(--sc-7); margin-top: var(--sc-11); }
.founder__fig { margin: 0; position: relative; max-width: 30rem; }
.founder__fig::before { content: ""; position: absolute; inset: 12% -10% -6% 18%; background: var(--sable); border-radius: var(--sc-r-sm); z-index: -1; }
.founder__fig { isolation: isolate; }
.founder__fig img { box-shadow: var(--sc-e2); }
.founder__name { max-width: 16ch; }
.founder__text .lede { margin-top: var(--sc-5); }
.founder__cols { display: grid; gap: var(--sc-6); margin-top: var(--sc-7); }
.founder__h { font-size: var(--sc-t-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--sc-ink-soft); font-weight: 500; }
.founder__h + * { margin-top: var(--sc-3); }
.founder__list + .founder__h, .founder__p + .founder__h { margin-top: var(--sc-6); }
.founder__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-3); }
.founder__list li { font-size: var(--sc-t-sm); padding-bottom: var(--sc-3); border-bottom: 1px solid var(--sc-hairline); }
.founder__p { margin: 0; font-size: var(--sc-t-sm); }
.founder__quote { margin: var(--sc-8) 0 0; padding: var(--sc-6) 0 0; border-top: 1px solid var(--laiton-f); }
.founder__quote p { font-size: var(--sc-t-xl); line-height: 1.3; max-width: 30ch; }
.founder__quote p::before { content: "« "; color: var(--laiton-f); }
.founder__quote p::after { content: " »"; color: var(--laiton-f); }
html[lang="en"] .founder__quote p::before { content: "“"; } html[lang="en"] .founder__quote p::after { content: "”"; }
.founder__pastor { margin: var(--sc-5) 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); max-width: 52ch; }
@media (min-width: 1024px) {
  .founder__grid { grid-template-columns: 5fr 7fr; gap: var(--sc-9); align-items: start; }
  .founder__fig { position: sticky; top: var(--sc-7); }
  .founder__cols { grid-template-columns: 1fr 1fr; gap: var(--sc-7); }
}

/* ---------------------------------------------------------- colophon -- */
.colophon { padding-bottom: var(--sc-6); }
.colophon__grid { display: grid; gap: var(--sc-8); }
.colophon__text .lede { margin-top: var(--sc-5); }
.coords { margin: var(--sc-7) 0 0; display: grid; gap: var(--sc-4); }
.coords div { display: grid; gap: var(--sc-1); }
.coords dt { font-size: var(--sc-t-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--brume); }
.coords dd { margin: 0; }
.coords a { text-decoration-color: color-mix(in oklab, var(--laiton) 70%, transparent); }
.form { display: grid; gap: var(--sc-5); align-content: start; }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field-row { display: grid; gap: var(--sc-2); }
.field-row label { font-size: var(--sc-t-sm); color: var(--brume); }
.field-row input[type="text"], .field-row textarea {
  width: 100%; padding: 12px 0; background: transparent; border: 0; border-bottom: 1px solid rgb(246 241 231 / 0.35); border-radius: 0;
  color: var(--ivoire); font-size: var(--sc-t-base); transition: border-color 160ms var(--sc-ease-out);
}
.field-row textarea { resize: vertical; min-height: 6.5rem; }
.field-row input:focus-visible, .field-row textarea:focus-visible { outline: none; border-bottom-color: var(--laiton); box-shadow: 0 1px 0 var(--laiton); }
.field-row [aria-invalid="true"] { border-bottom-color: #E59A8A; }
.field-row__err { margin: 0; min-height: 0; font-size: var(--sc-t-xs); color: #F0B2A4; }
.field-row__err:empty { display: none; }
.field-row--check { grid-template-columns: auto 1fr; align-items: start; gap: var(--sc-2) var(--sc-3); }
.field-row--check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--laiton); }
.field-row--check label { color: var(--ivoire); }
.field-row--check .field-row__err { grid-column: 1 / -1; }
.form__actions { margin: var(--sc-2) 0 0; }
.form__status { margin: 0; min-height: 1.6em; color: var(--brume); }
.form__status.is-ok { color: var(--laiton-clair); }
.form__status.is-err { color: #F0B2A4; }
/* Le formulaire est posé sur un panneau beige clair, à toutes les tailles. */
.form {
  --sc-accent: var(--laiton-f); --sc-ink: var(--nuit);
  background: #EEE7DA; color: var(--nuit); padding: var(--sc-6); border-radius: var(--sc-r-md);
  box-shadow: var(--sc-e3); border: 1px solid rgb(13 27 46 / 0.06);
}
.form .field-row label { color: #44526A; }
.form .field-row input[type="text"], .form .field-row textarea { color: var(--nuit); border-bottom-color: rgb(13 27 46 / 0.32); }
.form .field-row input:focus-visible, .form .field-row textarea:focus-visible { border-bottom-color: var(--laiton-f); box-shadow: 0 1px 0 var(--laiton-f); }
.form .field-row [aria-invalid="true"] { border-bottom-color: #B3402E; }
.form .field-row__err, .form .form__status.is-err { color: #9B2C1C; }
.form .field-row--check label { color: var(--nuit); }
.form .field-row--check input { accent-color: var(--nuit); }
.form .field-row--check a { text-decoration-color: var(--laiton-f); }
.form .form__status { color: #44526A; }
.form .form__status.is-ok { color: #6B5220; }
.form .btn { background: var(--nuit); color: var(--ivoire); }
@media (hover: hover) and (pointer: fine) { .form .btn:hover { background: var(--nuit-3); } }
.form ::selection { background: var(--nuit); color: var(--ivoire); }
.colophon__fig { max-width: 22rem; }
.colophon__foot { display: grid; gap: var(--sc-4); margin-top: var(--sc-10); padding-top: var(--sc-6); border-top: 1px solid rgb(246 241 231 / 0.12); }
.colophon__foot img { width: 150px; height: auto; }
.colophon__legal { margin: 0; font-size: var(--sc-t-xs); color: var(--brume); max-width: 90ch; line-height: 1.7; }
.colophon__links { margin: 0; display: flex; flex-wrap: wrap; gap: var(--sc-5); font-size: var(--sc-t-xs); }
@media (min-width: 1024px) {
  .colophon__grid { grid-template-columns: 5fr 6fr; gap: var(--sc-8) var(--sc-9); }
  .colophon__fig { grid-column: 1; grid-row: 2; align-self: end; }
  .form { grid-column: 2; grid-row: 1 / span 2; align-self: start; padding: var(--sc-7); }
  .colophon__foot { grid-template-columns: auto 1fr; align-items: center; column-gap: var(--sc-7); }
  .colophon__links { grid-column: 2; }
}

/* ------------------------------------------------------- pages légales -- */
.legal-page { padding-left: 0; }
.legal-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--sc-4); padding: var(--sc-4) var(--sc-gutter); background: var(--nuit); color: var(--ivoire); }
.legal-bar img { width: 160px; height: auto; }
.legal__body { max-width: 72ch; }
.legal__body h1 { font-family: var(--sc-font-display); font-weight: 400; font-size: var(--t-h2); line-height: 1.06; margin: var(--sc-6) 0 var(--sc-4); }
.legal__body h2 { font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-xl); margin: var(--sc-7) 0 var(--sc-3); }
.legal__body p, .legal__body li { color: var(--sc-ink); max-width: 68ch; }
.legal__body ul { padding-left: 1.2rem; }
.legal__body .draft { padding: var(--sc-4) var(--sc-5); background: var(--sable); border-radius: var(--sc-r-sm); font-size: var(--sc-t-sm); }
.legal-foot { padding-block: var(--sc-6); }

/* ---------------------------------------------------- mouvement réduit -- */
@media (prefers-reduced-motion: reduce) {
  .title__h1 { animation: fade-in 400ms ease-out both; }
  .title__sub, .title__cta { animation: fade-in 400ms ease-out both; }
  .field .sway { animation: none; }
  .field__plane g { transition: none; }
  .kfig.is-flowing .kfig__halo { animation: none; }
  .index { transition: none; }
  .work__deck { --fan: 1; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Constat : vidéo pilotée par le défilement, image d'attente dessous. */
.film { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--sc-r-sm); background: var(--nuit); box-shadow: var(--sc-e2); }
.film img, .film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }

/* Réalisations sur téléphone : chaque fiche « se pose » sur la pile à mesure qu'elle entre à l'écran.
   Animation liée au défilement, en CSS natif ; les navigateurs qui ne la gèrent pas affichent la pile sans mouvement. */
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .work__deck { perspective: 1100px; }
    .tool { transform-origin: 50% 100%; animation: deal linear both; animation-timeline: view(); animation-range: entry 5% cover 42%; }
    @keyframes deal {
      from { opacity: 0.25; transform: translate3d(0, 90px, -60px) rotateX(22deg) rotateZ(-2.5deg) scale(0.9); }
      to { opacity: 1; transform: none; }
    }
  }
}

/* Contact direct (sans formulaire) : même panneau beige, deux actions. */
.direct { gap: var(--sc-4); }
.direct__title { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-xl); color: var(--nuit); }
.direct__text { margin: 0; color: #44526A; max-width: 40ch; }
.direct__actions { margin: var(--sc-3) 0 0; display: flex; flex-wrap: wrap; gap: var(--sc-3); }
.btn--outline { background: transparent; color: var(--nuit); box-shadow: inset 0 0 0 1px rgb(13 27 46 / 0.45); }
@media (hover: hover) and (pointer: fine) { .form .btn--outline:hover { background: rgb(13 27 46 / 0.06); } }
.form .btn--outline { background: transparent; color: var(--nuit); }