/* ==========================================================
   Amorce — Site one-pager
   Styles additifs par-dessus colors_and_type.css
   ========================================================== */

html {
  scroll-behavior: smooth;
}

body {
  background: var(--paper);
  color: var(--ink);
  overflow-x: hidden;
}

/* ---------- Utilities ---------- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}

.section {
  padding: clamp(72px, 10vw, 144px) 0;
  position: relative;
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  html { scroll-behavior: auto; }
}

/* ---------- Parallax float ---------- */
.float-parallax {
  will-change: transform;
  transition: transform 80ms linear;
}

/* ---------- Marquee ---------- */
.marquee {
  display: flex;
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track {
  display: flex;
  flex-shrink: 0;
  gap: 48px;
  padding-right: 48px;
  animation: marquee-scroll 40s linear infinite;
  align-items: center;
}
.marquee--slow .marquee__track { animation-duration: 80s; }
.marquee--reverse .marquee__track { animation-direction: reverse; }

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Hairline ---------- */
.hairline {
  height: 1px;
  background: var(--chalk);
  border: 0;
  margin: 0;
}
.hairline--ink { background: var(--ink); }
.hairline--dust-dark { background: rgba(255,253,247,0.12); }

/* ---------- Link underline editorial ---------- */
.u-link {
  color: var(--ink);
  text-decoration: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.u-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: var(--ink);
  transform-origin: left center;
  transition: transform 240ms var(--ease-out);
}
.u-link:hover::after {
  background: var(--peach-400);
}

/* ---------- Custom cursor ring (optional, subtle) ---------- */
.eyebrow-dot {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-tight);
  font-size: 12px; font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-3);
}
.eyebrow-dot::before {
  content: '';
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--accent);
  display: inline-block;
}

/* ---------- Numbered cell (big number) ---------- */
.big-num {
  font-family: var(--font-serif);
  font-size: clamp(64px, 9vw, 136px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-weight: 400;
}

/* ---------- Tag pill ---------- */
.tag {
  display: inline-flex; align-items: center;
  font-family: var(--font-tight);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
}
.tag--peach { background: var(--peach-100); }
.tag--lilac { background: var(--lilac); }
.tag--mint  { background: var(--mint); }
.tag--butter { background: var(--butter); }
.tag--invert { border-color: var(--paper); color: var(--paper); }

/* ---------- HubSpot Meetings ---------- */
.meetings-card {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin-inline: auto;
  background: var(--milk);
  color: var(--ink);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 6px 6px 0 0 var(--peach-400);
  scroll-margin-top: 96px;
}
.meetings-card.is-loading { min-height: 720px; }
.meetings-iframe-container { display: block; }
/* The HubSpot widget insets its panel by 4px on each side and caps it at 400px: the iframe is widened to crop that white gutter. */
.meetings-iframe-container iframe {
  display: block;
  width: calc(100% + 8px) !important;
  margin-left: -4px;
  border: 0;
}
.meetings-card__state {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 32px;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--fg-2);
}
.meetings-card__loading {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-3);
}

/* ---------- Scroll indicator ---------- */
.scroll-hint {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 32px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--font-tight); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--fg-4);
}
.scroll-hint__line {
  width: 1px; height: 48px; background: var(--fg-4);
  animation: scroll-pulse 2.2s var(--ease-in-out) infinite;
  transform-origin: top;
}
@keyframes scroll-pulse {
  0%, 100% { transform: scaleY(0.2); opacity: 0.4; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* ---------- Button (design-system: sticker-style shadow) ---------- */
.btn {
  --btn-bg: var(--peach-400);
  --btn-fg: var(--ink);
  --btn-border: var(--ink);
  --btn-shadow-offset: 3px;
  --btn-shadow-color: var(--ink);

  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-tight);
  font-size: 14px;
  font-weight: 600;
  padding: 11px 18px;
  border-radius: 10px;
  border: 1.75px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  box-shadow: var(--btn-shadow-offset) var(--btn-shadow-offset) 0 0 var(--btn-shadow-color);
  transform: translate(0, 0);
  transition:
    transform 120ms var(--ease-out),
    box-shadow 120ms var(--ease-out),
    background 120ms var(--ease-out),
    color 120ms var(--ease-out);
}
.btn:hover {
  transform: translate(1px, 1px);
  box-shadow: calc(var(--btn-shadow-offset) - 1px) calc(var(--btn-shadow-offset) - 1px) 0 0 var(--btn-shadow-color);
}
.btn:active {
  transform: translate(var(--btn-shadow-offset), var(--btn-shadow-offset));
  box-shadow: 0 0 0 0 var(--btn-shadow-color);
}

.btn--primary { --btn-bg: var(--ink); --btn-fg: var(--paper); }
.btn--primary:hover { --btn-bg: #1F1E1B; }
.btn--accent  { --btn-bg: var(--peach-400); --btn-fg: var(--ink); }
.btn--accent:hover  { --btn-bg: var(--peach-500); }
.btn--secondary { --btn-bg: var(--paper); }
.btn--secondary:hover { --btn-bg: var(--bone); }
.btn--lilac   { --btn-bg: var(--lilac); }
.btn--mint    { --btn-bg: var(--mint); }

.btn--ghost {
  --btn-bg: transparent;
  border-color: transparent;
  box-shadow: none;
  padding: 10px 6px;
}
.btn--ghost:hover {
  transform: none;
  box-shadow: none;
  color: var(--peach-500);
  background: transparent;
}

.btn--on-dark {
  --btn-bg: var(--paper);
  --btn-fg: var(--ink);
  --btn-border: var(--paper);
  --btn-shadow-color: var(--peach-400);
}
.btn--on-dark:hover { --btn-bg: #FFF; }

.btn--sm { padding: 7px 13px; font-size: 12px; border-radius: 8px; --btn-shadow-offset: 2px; }
.btn--lg { padding: 14px 24px; font-size: 16px; border-radius: 12px; --btn-shadow-offset: 4px; }

.btn__arrow { transition: transform 200ms var(--ease-out); display: inline-block; }
.btn:hover .btn__arrow { transform: translateX(2px); }

/* ---------- Chips (design-system) ---------- */
.chip {
  --chip-bg: var(--paper);
  --chip-fg: var(--ink);
  --chip-border: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-tight);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 4px;
  border: 1px solid var(--chip-border);
  background: var(--chip-bg);
  color: var(--chip-fg);
  box-shadow: 2px 2px 0 0 rgba(14, 14, 12, 0.12);
  white-space: nowrap;
}
.chip .chip__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: 0.75;
  display: inline-block;
}
.chip--ink     { --chip-bg: var(--ink); --chip-fg: var(--paper); }
.chip--paper   { --chip-bg: var(--paper); }
.chip--peach   { --chip-bg: var(--peach-100); }
.chip--peach-strong { --chip-bg: var(--peach-400); }
.chip--lilac   { --chip-bg: var(--lilac); }
.chip--mint    { --chip-bg: var(--mint); }
.chip--butter  { --chip-bg: var(--butter); }
.chip--sm { font-size: 10px; padding: 3px 7px; box-shadow: 1.5px 1.5px 0 0 rgba(14,14,12,0.10); }
.chip--lg { font-size: 12px; padding: 6px 12px; box-shadow: 3px 3px 0 0 rgba(14,14,12,0.14); }
.chip--on-dark { --chip-border: var(--paper); box-shadow: 2px 2px 0 0 rgba(255,253,247,0.18); }

/* ---------- Tool logo chip ---------- */
.tool-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--milk);
  border: 1px solid var(--ink);
  border-radius: 8px;
  padding: 8px 14px 8px 10px;
  font-family: var(--font-tight);
  font-size: 13px; font-weight: 600;
  color: var(--ink);
  box-shadow: 2px 2px 0 0 rgba(14,14,12,0.14);
  cursor: default;
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
  opacity: 0;
  transform: translateY(10px);
}
.tool-chip.is-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.tool-chip:hover {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 0 rgba(14,14,12,0.14);
}
.tool-chip__logo {
  width: 20px; height: 20px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-style: italic;
  font-size: 14px;
  border-radius: 4px;
  color: var(--paper);
  background: var(--ink);
}

/* ---------- On dark sections ---------- */
.on-dark {
  background: var(--ink);
  color: var(--paper);
}
.on-dark .eyebrow-dot { color: var(--dust); }
.on-dark .hairline { background: rgba(255,253,247,0.14); }

/* ---------- H1/H2 display base ---------- */
.display-serif {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.028em;
}
.display-serif em { font-style: italic; }

/* ---------- Logo tile (stack) ---------- */
.logo-tile {
  aspect-ratio: 16 / 7;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--chalk);
  background: var(--milk);
  opacity: 0.65;
  transition: opacity 200ms var(--ease-out), border-color 200ms var(--ease-out);
  padding: 16px;
  font-family: var(--font-tight);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.logo-tile:hover { opacity: 1; border-color: var(--ink); }

/* ---------- Credo big number ---------- */
.credo-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  align-items: baseline;
  padding: 32px 0;
  border-top: 1px solid rgba(255,253,247,0.14);
}
.credo-item:last-child { border-bottom: 1px solid rgba(255,253,247,0.14); }
.credo-item__n {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.1em;
  color: var(--dust);
  padding-top: 12px;
}
.credo-item__text {
  font-family: var(--font-serif);
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--paper);
}
.credo-item__text em { font-style: italic; }
.credo-item__text .hl {
  background: linear-gradient(180deg, transparent 0 62%, var(--peach-400) 62% 96%, transparent 96%);
  padding: 0 0.08em;
}

/* ---------- Expertise group ---------- */
.expertise-col {
  display: flex; flex-direction: column;
  gap: 12px;
}
.expertise-col h4 {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
}
.expertise-col ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0;
}
.expertise-col li {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--fg-2);
  padding: 12px 0;
  border-top: 1px solid var(--chalk);
  display: flex;
  gap: 10px;
}
.expertise-col li::before {
  content: '';
  width: 4px; height: 4px; border-radius: 999px;
  background: var(--ink);
  margin-top: 9px;
  flex-shrink: 0;
}
.expertise-col li:last-child { border-bottom: 1px solid var(--chalk); }

/* ---------- Method : itinéraire en escalier ---------- */
.mstep {
  --bw: 1.5px;
  --sh: 3px;
  position: relative;
  height: 100%;
  box-sizing: border-box;
  background:
    radial-gradient(130% 110% at 0% 0%, color-mix(in srgb, var(--tint) 75%, transparent) 0%, transparent 70%),
    var(--milk);
  border: var(--bw) solid var(--ink);
  border-radius: 10px;
  padding: 24px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: var(--sh) var(--sh) 0 0 var(--ink);
  transform: translate(0, 0);
  transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
.mstep:hover {
  transform: translate(-2px, -2px);
  box-shadow: calc(var(--sh) + 3px) calc(var(--sh) + 3px) 0 0 var(--ink);
}
.mstep--peach { --tint: var(--peach-100); }
.mstep--lilac { --tint: var(--lilac); }
.mstep--mint  { --tint: var(--mint); }
.mstep--butter { --tint: var(--butter); }
.mstep__highlight {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--peach-600);
  margin-top: -4px;
}

.mstep__num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
  opacity: 0.7;
}
.mstep__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
}
.mstep__body {
  font-family: var(--font-sans);
  font-size: 14px; line-height: 1.55;
  color: var(--fg-2);
  margin: 0;
  flex-grow: 1;
}
.method-route {
  position: relative;
  margin-top: 56px;
}
.method-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.mstep-step { position: relative; }
.mstep-drift { height: 100%; }
.method-path { display: none; }
.method-closing {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.3;
  color: var(--ink);
  margin: 32px 0 0;
}

@media (min-width: 901px) {
  .method-route {
    --stair: 1;
    margin-top: 88px;
  }
  .method-steps {
    grid-auto-rows: minmax(196px, 1fr);
    gap: 18px;
    margin-bottom: -84px;
  }
  .mstep-step {
    margin-left: calc(var(--k) * 12%);
    width: calc(46% + var(--k) * 3%);
    top: calc(var(--k) * -28px);
  }
  .mstep {
    --bw: calc(1px + var(--k) * 0.25px);
    --sh: calc(2px + var(--k) * 1.3px);
  }
  .mstep__title { font-size: calc(26px + var(--k) * 2.667px); }
  .method-path {
    display: block;
    position: absolute;
    inset: 0;
    overflow: visible;
    pointer-events: none;
    z-index: 10;
  }
  .method-path__ghost {
    fill: none;
    stroke: rgba(14, 14, 12, 0.22);
    stroke-width: 1.5;
    stroke-dasharray: 2 6;
    stroke-linecap: round;
  }
  .method-path__ink {
    fill: none;
    stroke: var(--peach-400);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: calc(1 - var(--route, 1));
  }
  .method-source { fill: var(--peach-400); }
  .method-borne {
    fill: var(--milk);
    stroke: var(--ink);
    stroke-width: 1.5;
    transition: fill 260ms var(--ease-out), stroke 260ms var(--ease-out);
  }
  .method-borne.is-on {
    fill: var(--peach-400);
    stroke: var(--peach-400);
  }
  .method-closing {
    position: absolute;
    left: 0;
    bottom: 0;
    max-width: calc(36% - 40px);
    margin: 0;
    z-index: 1;
  }
}

.pain-item__n {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--peach-500);
  letter-spacing: 0.05em;
}

/* ---------- Footer ---------- */
footer.site-footer {
  padding: 72px 0 32px;
  border-top: 1px solid var(--chalk);
}

/* ---------- Section-break full-bleed ---------- */
.section--accent-peach { background: color-mix(in srgb, var(--peach-50) 45%, transparent); }
.section--accent-lilac { background: color-mix(in srgb, var(--lilac) 45%, transparent); }
.section--accent-mint  { background: color-mix(in srgb, var(--mint) 45%, transparent); }

/* ---------- Responsive nav ---------- */
@media (max-width: 720px) {
  .timeline { grid-template-columns: 1fr; }
  .nav-links-desktop { display: none !important; }
}

/* ---------- Mobile 3-col expertise */
@media (max-width: 900px) {
  .expertise-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
}

/* ---------- Mobile credos */
@media (max-width: 880px) {
  .credos-layout { grid-template-columns: 1fr !important; gap: 48px !important; }
  .credos-layout > :first-child { position: static !important; }
}
/* Booking section responsive */
@media (max-width: 880px) {
  .contact-layout { grid-template-columns: 1fr !important; gap: 48px !important; }
}
@media (max-width: 880px) {
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 36px 24px !important; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .footer-grid { grid-template-columns: 1fr !important; }
}

/* ---------- Word rotator (H1 hero) ---------- */
.word-rotator {
  display: inline-grid;
  overflow: hidden;
  vertical-align: bottom;
  /* réserve pour les descendantes (g, p) sinon overflow:hidden les coupe */
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
.word-rotator__word {
  grid-area: 1 / 1;
  justify-self: start;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(105%);
  transition: transform 640ms var(--ease-out), opacity 640ms var(--ease-out);
}
.word-rotator__word.is-active {
  opacity: 1;
  transform: translateY(0);
}
.word-rotator__word.is-leaving {
  opacity: 0;
  transform: translateY(-105%);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .word-rotator__word { transition: none; }
}

/* ---------- Hero topo field ---------- */
.topo-field {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
  opacity: var(--topo-alpha, 1);
  transition: opacity 600ms var(--ease-out);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 90%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 90%, transparent 100%);
}
.topo-field .topo-main {
  position: absolute;
  inset: 0;
  width: 100%;
  height: calc(100% + 480px);
  transform: translate3d(0, calc(var(--tsy, 0) * 1px), 0);
  transition: opacity 600ms var(--ease-out);
}
.topo-field.is-dimmed .topo-main { opacity: 0; }
.topo-field .topo-trail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: visible;
  opacity: 0;
  transform: translate3d(0, calc(var(--tty, 0) * 1px), 0);
  transition: opacity 800ms var(--ease-out);
  will-change: transform;
}
.topo-field.is-dimmed .topo-trail { opacity: 1; }
.topo-dot, .topo-halo {
  transform-box: fill-box;
  transform-origin: center;
}
.topo-halo { opacity: 0; }
.topo-field.is-intro .topo-dot {
  animation: topo-dot-pop 700ms var(--ease-out) 120ms both;
}
.topo-field.is-intro .topo-halo {
  animation: topo-halo-burst 1100ms cubic-bezier(0.16, 1, 0.3, 1) 260ms both;
}
@keyframes topo-dot-pop {
  0%   { transform: scale(0); opacity: 0; }
  55%  { transform: scale(1.5); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes topo-halo-burst {
  0%   { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(14); opacity: 0; }
}
.topo-par {
  transform: translate3d(calc(var(--tpx, 0) * var(--tp-d, 0px)), calc(var(--tpy, 0) * var(--tp-d, 0px)), 0);
  will-change: transform;
}
.topo-par--a { --tp-d: -8px; }
.topo-par--b { --tp-d: 14px; }
.topo-par--c { --tp-d: 22px; }
.topo-drift {
  transform-box: view-box;
  transform-origin: 72% 38%;
  will-change: transform;
}
.topo-drift--a { animation: topo-drift-a 38s ease-in-out infinite alternate; }
.topo-drift--b { animation: topo-drift-b 47s ease-in-out infinite alternate; }
.topo-drift--c { animation: topo-drift-c 26s ease-in-out infinite alternate; }
@keyframes topo-drift-a { from { transform: rotate(0deg) scale(1); } to { transform: rotate(2deg) scale(1.03); } }
@keyframes topo-drift-b { from { transform: rotate(0deg) scale(1); } to { transform: rotate(-1.6deg) scale(1.015); } }
@keyframes topo-drift-c { from { transform: rotate(0deg) scale(1); } to { transform: rotate(1.2deg) scale(1.02); } }
.topo-ring {
  opacity: 0.45;
  transform-box: view-box;
  transform-origin: 72% 38%;
  animation: topo-pulse 9s ease-in-out infinite;
  animation-delay: var(--pd, 0s);
}
.topo-field.is-intro .topo-ring {
  animation: topo-echo 1400ms cubic-bezier(0.16, 1, 0.3, 1) var(--ed, 0s) both,
             topo-pulse 9s ease-in-out var(--pd, 0s) infinite;
}
@keyframes topo-pulse {
  0%, 100% { opacity: 0.45; }
  12% { opacity: 1; }
}
@keyframes topo-echo {
  0%   { transform: scale(0.04); opacity: 0; }
  20%  { opacity: 0.5; }
  70%  { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 0.45; }
}
.topo-reticle {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 400ms var(--ease-out);
}
.topo-field.is-pointing .topo-reticle { opacity: 1; }
.topo-rule-x {
  position: absolute;
  left: 0; right: 0; top: 0;
  border-top: 1px dashed rgba(14, 14, 12, 0.18);
}
.topo-rule-y {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  border-left: 1px dashed rgba(14, 14, 12, 0.18);
}
.topo-cross {
  position: absolute;
  top: 0; left: 0;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  border: 1px solid rgba(14, 14, 12, 0.30);
  border-radius: 50%;
}
@media (pointer: coarse) {
  .topo-reticle { display: none; }
}
@media (max-width: 640px) {
  .topo-ring--outer { display: none; }
}

/* ---------- Constat : liste statique par défaut, scène épinglée sous .is-pinned-scene ---------- */
.pain-stage {
  display: flex;
  flex-direction: column;
  margin: 48px 0;
}
.pain-slide {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 20px;
  padding: 28px 0;
  border-top: 1px solid var(--chalk);
  align-items: baseline;
  overflow: hidden;
}
.pain-slide:last-child { border-bottom: 1px solid var(--chalk); }
.pain-slide__text {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.5vw, 30px);
  line-height: 1.25;
  margin: 0;
  color: var(--ink);
}
.pain-slide__block {
  display: none;
  position: absolute;
  inset: 4px 0;
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 2;
  border-radius: var(--radius-sm);
}
.pain-progress { display: none; }

.is-pinned-scene .pain-stage {
  display: grid;
  min-height: 200px;
  align-items: start;
  margin: 56px 0 32px;
}
.is-pinned-scene { padding: clamp(56px, 6vw, 88px) 0; }
.is-pinned-scene .pain-slide {
  grid-area: 1 / 1;
  border-top: none;
  padding: 8px 0;
}
.is-pinned-scene .pain-slide:last-child { border-bottom: none; }
.is-pinned-scene .pain-slide .pain-slide__text {
  font-size: clamp(26px, 3vw, 38px);
}
.is-pinned-scene .pain-slide__block { display: block; }
.is-pinned-scene .pain-progress {
  display: flex;
  gap: 8px;
  margin: 0 0 40px;
}
.pain-progress__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dust);
  transition: background 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.pain-progress__dot.is-on {
  background: var(--ink);
  transform: scale(1.2);
}

.is-pinned-scene .pain-closing,
.is-pinned-scene .pain-slide { transition: none; }

/* ---------- Legal pages ---------- */
.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(120px, 14vw, 168px) clamp(20px, 4vw, 48px) clamp(80px, 10vw, 128px);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--fg-2);
}
.legal h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 20px 0 12px;
}
.legal__updated {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-4);
  margin: 0 0 48px;
}
.legal h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: 1.2;
  color: var(--ink);
  margin: 56px 0 16px;
  padding-top: 24px;
  border-top: 1px solid var(--chalk);
}
.legal h3 {
  font-family: var(--font-tight);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin: 32px 0 8px;
}
.legal p, .legal ul { margin: 0 0 16px; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 6px; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--peach-400); text-underline-offset: 3px; }
.legal dl {
  display: grid;
  grid-template-columns: minmax(140px, max-content) 1fr;
  gap: 8px 24px;
  margin: 0 0 16px;
}
.legal dt { font-weight: 600; color: var(--ink); }
.legal dd { margin: 0; }
.legal-table-wrap { overflow-x: auto; margin: 0 0 16px; }
.legal table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.5;
}
.legal th, .legal td {
  text-align: left;
  vertical-align: top;
  padding: 12px 12px 12px 0;
  border-bottom: 1px solid var(--chalk);
}
.legal th { font-family: var(--font-tight); font-weight: 600; color: var(--ink); }
@media (max-width: 600px) {
  .legal dl { grid-template-columns: 1fr; gap: 2px; }
  .legal dd { margin-bottom: 10px; }
}

.footer-link-btn {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
}

.meetings-notice {
  max-width: 400px;
  margin: 20px auto 0;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--dust);
}
.meetings-notice a { color: var(--paper); text-underline-offset: 3px; }

/* ---------- Keyboard accessibility ---------- */
:where(a, button, summary, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--peach-400);
  outline-offset: 3px;
}
#contenu:focus { outline: none; }
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-tight);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  transform: translateY(calc(-100% - 24px));
  transition: transform 160ms var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

/* ---------- Brand logo (nav) ---------- */
.brand-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border-radius: 6px;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.brand-logo:focus-visible { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--peach-400); }
.brand-logo__svg { display: inline-flex; }
.brand-logo__svg:empty { display: none; }
.brand-logo__svg svg { display: block; overflow: visible; }
.brand-disc {
  transform: translate(0, 0);
  transition: transform 220ms var(--ease-out);
}
.brand-contour, .brand-summit {
  transform-box: fill-box;
  transform-origin: center;
}
.brand-logo:hover .brand-disc,
.brand-logo:focus-visible .brand-disc { transform: translate(-2px, -2px); }
.brand-logo:active .brand-disc {
  transform: translate(3px, 3px);
  transition-duration: 90ms;
}
.brand-logo:hover .brand-contour,
.brand-logo:focus-visible .brand-contour { animation: brand-ripple 720ms var(--ease-out) both; }
.brand-logo:hover .brand-contour--1,
.brand-logo:focus-visible .brand-contour--1 { animation-delay: 70ms; }
.brand-logo:hover .brand-contour--0,
.brand-logo:focus-visible .brand-contour--0 { animation-delay: 140ms; }
.brand-logo:hover .brand-summit,
.brand-logo:focus-visible .brand-summit { animation: brand-summit 520ms var(--ease-out) both; }
@keyframes brand-ripple {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}
@keyframes brand-summit {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.7); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .brand-logo .brand-contour, .brand-logo .brand-summit { animation: none !important; }
  .brand-disc { transition: none; }
  .topo-drift--a, .topo-drift--b, .topo-drift--c, .topo-ring { animation: none; }
  .topo-ring { opacity: 0.85; }
  .topo-dot { animation: none; }
  .topo-halo { display: none; }
}