/* ─────────────────────────────────────────
   ClowerStudio — main.css
   Studio indépendant · Architecture numérique
   ───────────────────────────────────────── */

/* ── TOKENS ── */
:root {
  --bg:           #F6F3EE;
  --bg-warm:      #EDE9E2;
  --bg-dark:      #1A1916;
  --bg-mid:       #2A2724;
  --text:         #1E1E1E;
  --text-soft:    #5A5753;
  --text-pale:    #9A9591;
  --accent:       #3D3480;
  --accent-light: #7C6FCD;
  --line:         rgba(30,30,30,0.09);
  --line-dark:    rgba(246,243,238,0.11);
  --sans: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Lora', Georgia, serif;
  --nav-h: 4.5rem;
  --pad: 3rem;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
img, video { display: block; max-width: 100%; }
ol, ul { list-style: none; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(30,30,30,.026) 1px, transparent 1px),
    linear-gradient(180deg, rgba(30,30,30,.018) 1px, transparent 1px);
  background-size: 6rem 6rem;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.65), transparent 75%);
}

/* ── SKIP LINK ── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--accent);
  color: #fff;
  padding: .5rem 1rem;
  font-size: .85rem;
  z-index: 999;
  text-decoration: none;
  transition: top .15s;
}
.skip-link:focus { top: 1rem; }

/* ── FOCUS ── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ─────────────────────────────────────────
   NAVIGATION
   ───────────────────────────────────────── */
header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  background: rgba(246,243,238,0.93);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s, background .2s;
}
header.scrolled {
  background: rgba(246,243,238,0.97);
  box-shadow: 0 1px 20px rgba(30,30,30,.05);
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 120;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

nav {
  height: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo img { height: 28px; width: auto; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}
.nav-links a {
  position: relative;
  font-size: .84rem;
  font-weight: 400;
  color: var(--text-soft);
  text-decoration: none;
  letter-spacing: .01em;
  transition: color .2s;
}
.nav-links a:hover { color: var(--text); }
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.35rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}
.nav-links a[aria-current="page"] { color: var(--text); font-weight: 500; }
.nav-cta {
  font-size: .82rem !important;
  font-weight: 500 !important;
  color: var(--text) !important;
  border: 1px solid rgba(30,30,30,.18) !important;
  padding: .46rem 1.1rem !important;
  transition: background .2s, color .2s !important;
}
.nav-cta:hover {
  background: var(--text) !important;
  color: var(--bg) !important;
}
.nav-cta::after { display: none; }

/* ─────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────── */
footer { background: var(--bg); border-top: 1px solid var(--line); }

.footer-editorial {
  padding: 5rem var(--pad) 4rem;
  border-bottom: 1px solid var(--line);
}
.footer-editorial p {
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -.02em;
  color: var(--text-soft);
  max-width: 52ch;
}
.footer-editorial em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--text);
}
.footer-bottom {
  padding: 1.8rem var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.footer-logo img { height: 22px; width: auto; }
.footer-info { font-size: .75rem; color: var(--text-pale); letter-spacing: .02em; }
.footer-links { display: flex; gap: 2rem; }
.footer-links a {
  font-size: .75rem;
  color: var(--text-pale);
  text-decoration: none;
  transition: color .2s;
}
.footer-links a:hover { color: var(--text); }

/* ─────────────────────────────────────────
   ÉLÉMENTS PARTAGÉS
   ───────────────────────────────────────── */
.section-label {
  font-size: .69rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: .55rem;
}
.section-label::before {
  content: '';
  display: block;
  width: 14px;
  height: 1px;
  background: var(--accent);
  flex-shrink: 0;
}

.btn-primary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: var(--text);
  color: var(--bg);
  font-family: var(--sans);
  font-size: .88rem;
  font-weight: 500;
  padding: .88rem 1.6rem;
  text-decoration: none;
  letter-spacing: .01em;
  transition: background .22s, transform .18s, box-shadow .18s;
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, transparent 0 32%, rgba(255,255,255,.22) 48%, transparent 64% 100%);
  transform: translateX(-120%);
  transition: transform .65s cubic-bezier(.22, 1, .36, 1);
}
.btn-primary:hover {
  background: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(30,30,30,.12);
}
.btn-primary:hover::before { transform: translateX(120%); }
.btn-primary svg { width: 13px; height: 13px; flex-shrink: 0; }

.btn-ghost {
  position: relative;
  font-size: .85rem;
  color: var(--text-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1px;
  transition: color .2s, border-color .2s;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.btn-ghost:hover { color: var(--text); border-color: var(--text); }

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .72s cubic-bezier(.22, 1, .36, 1),
    transform .72s cubic-bezier(.22, 1, .36, 1),
    clip-path .72s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal="block"] {
  clip-path: inset(0 0 18% 0);
}
[data-reveal="step"] {
  transform: translateX(-18px);
}
[data-reveal="quote"] {
  transform: translateY(18px) scale(.985);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
  clip-path: inset(0);
}
[data-reveal="step"].is-visible {
  transform: translateX(0);
}
[data-reveal="quote"].is-visible {
  transform: translateY(0) scale(1);
}

main > section:not(.hero) {
  content-visibility: auto;
  contain-intrinsic-size: 1px 720px;
}

[data-structure] {
  position: relative;
}
[data-structure]::after {
  content: '';
  position: absolute;
  pointer-events: none;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: var(--accent);
  opacity: .42;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .75s cubic-bezier(.22, 1, .36, 1);
  transition-delay: .12s;
}
[data-structure].is-visible::after,
.is-visible [data-structure]::after,
[data-structure]:has(.is-visible)::after {
  transform: scaleX(1);
}

[data-spotlight] {
  position: relative;
  overflow: hidden;
}
[data-spotlight]::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--spot-x, 50%) var(--spot-y, 50%),
    rgba(61,52,128,.08),
    transparent 34%
  );
  opacity: 0;
  transition: opacity .28s ease;
}
[data-spotlight]:hover::before { opacity: 1; }
[data-spotlight] > * {
  position: relative;
  z-index: 1;
}

/* ─────────────────────────────────────────
   PAGE INTRO (partagée offres / cas)
   ───────────────────────────────────────── */
.page-intro {
  padding: 7rem var(--pad) 6rem;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 5rem;
  align-items: start;
  padding-top: calc(var(--nav-h) + 4rem);
}
.page-intro-heading {
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 1.5rem;
}
.page-intro-heading em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--accent);
}
.page-intro-sub {
  font-size: .97rem;
  color: var(--text-soft);
  line-height: 1.75;
  font-weight: 300;
  max-width: 58ch;
}
.page-intro-note {
  font-size: .92rem;
  color: var(--text-soft);
  line-height: 1.75;
  font-weight: 300;
  max-width: 58ch;
  border-left: 2px solid var(--accent);
  padding-left: 1.2rem;
}

/* ─────────────────────────────────────────
   INDEX — HERO
   ───────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 92vh;
  padding-top: var(--nav-h);
  border-bottom: 1px solid var(--line);
}
.hero-left {
  padding: clamp(3.75rem, 9vh, 6rem) 4rem 4rem var(--pad);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border-right: 1px solid var(--line);
}
.hero-tag {
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 2.5rem;
}
.hero-tag::before {
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  background: var(--accent);
  flex-shrink: 0;
}
.hero-h1 {
  font-size: clamp(2.4rem, 4.2vw, 4rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--text);
  margin-bottom: 2rem;
}
.hero-h1 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.hero-sub {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-soft);
  font-weight: 300;
  max-width: 44ch;
  margin-bottom: 2.4rem;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
}
.hero-note {
  max-width: 46ch;
  color: var(--text-soft);
  font-size: .82rem;
  line-height: 1.65;
  font-weight: 300;
}
.hero-right {
  overflow: hidden;
  position: relative;
  background: var(--bg-warm);
  display: grid;
  place-items: center;
  isolation: isolate;
}
.hero-right::before,
.hero-right::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-right::before {
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(30,30,30,.055) 1px, transparent 1px),
    linear-gradient(180deg, rgba(30,30,30,.04) 1px, transparent 1px);
  background-size: 6rem 6rem;
}
.hero-right::after {
  z-index: -1;
  inset: -12%;
  background:
    linear-gradient(135deg, transparent 0 42%, rgba(61,52,128,.18) 42.15%, transparent 42.35% 100%),
    linear-gradient(135deg, transparent 0 49%, rgba(124,111,205,.26) 49.08%, rgba(124,111,205,.08) 49.28%, transparent 49.55% 100%),
    radial-gradient(circle at 64% 46%, rgba(124,111,205,.12), transparent 34%);
  opacity: .9;
  animation: clarity-scan 8s cubic-bezier(.45, 0, .2, 1) infinite alternate;
}
.hero-architecture {
  --confusion-opacity: 1;
  --residual-opacity: 1;
  --question-opacity: 1;
  --confusion-blur: 0px;
  --structure-opacity: .34;
  position: relative;
  z-index: 1;
  width: min(112%, 900px);
  height: auto;
  color: var(--accent);
  opacity: 1;
  transform: perspective(1200px) rotateX(14deg) rotateZ(-7deg) translateY(var(--arch-shift, 0px));
  transform-origin: center;
  filter: drop-shadow(0 24px 60px rgba(61,52,128,.1));
}
.arch-grid,
.arch-chaos,
.arch-scribble,
.arch-core,
.arch-hatching,
.arch-loops,
.arch-orbit,
.arch-lines,
.arch-panels,
.arch-accent-shapes,
.arch-nodes,
.arch-dust,
.arch-questions {
  transform-box: view-box;
  transform-origin: center;
}
.arch-grid {
  animation: grid-breathe 14s ease-in-out 1.4s infinite alternate;
}
.arch-orbit {
  animation: architecture-drift 16s ease-in-out 1.8s infinite alternate;
}
.arch-lines {
  animation: architecture-focus 12s ease-in-out 2s infinite alternate;
}
.arch-panels {
  animation: panel-drift 18s ease-in-out 2s infinite alternate;
}
.arch-chaos {
  animation: chaos-settle 2.6s cubic-bezier(.22, 1, .36, 1) both, architecture-drift 15s ease-in-out 2.8s infinite alternate;
}
.arch-scribble {
  animation: scribble-arrive 2.7s cubic-bezier(.22, 1, .36, 1) both, scribble-breathe 10s ease-in-out 2.7s infinite alternate;
}
.arch-core {
  animation: core-resolve 3.2s cubic-bezier(.22, 1, .36, 1) both, core-breathe 9s ease-in-out 3s infinite alternate;
}
.arch-hatching {
  animation: core-resolve 2.8s cubic-bezier(.22, 1, .36, 1) .1s both, scratch-field 8s ease-in-out 2.8s infinite alternate;
}
.arch-loops {
  animation: architecture-drift 18s ease-in-out 2.4s infinite alternate;
}
.arch-questions {
  animation: question-drift 9s ease-in-out 2s infinite alternate;
}
.arch-scribble {
  opacity: var(--confusion-opacity);
  filter: blur(var(--confusion-blur));
}
.arch-chaos,
.arch-core,
.arch-hatching,
.arch-loops {
  opacity: var(--residual-opacity);
  filter: blur(var(--confusion-blur));
}
.arch-questions {
  opacity: var(--question-opacity);
  filter: blur(var(--confusion-blur));
}
.arch-orbit,
.arch-lines,
.arch-panels,
.arch-accent-shapes,
.arch-nodes,
.arch-grid {
  opacity: var(--structure-opacity);
}
.hero-architecture path,
.hero-architecture circle,
.hero-architecture text {
  vector-effect: non-scaling-stroke;
}
.arch-grid path {
  stroke: rgba(30,30,30,.14);
  stroke-width: 1;
  stroke-dasharray: 1 18;
}
.arch-chaos path {
  stroke: rgba(30,30,30,.22);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 10 14;
  opacity: .72;
}
.arch-scribble path {
  stroke: rgba(30,30,30,.48);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 980;
  stroke-dashoffset: 980;
  opacity: .94;
  animation: trace-line 2.1s cubic-bezier(.22, 1, .36, 1) forwards;
}
.arch-scribble path:nth-child(3n) {
  stroke: rgba(61,52,128,.28);
}
.arch-scribble path:nth-child(4n) {
  stroke-width: 1.25;
  opacity: .72;
}
.arch-scribble path:nth-child(1) { animation-delay: .05s, 2.35s; }
.arch-scribble path:nth-child(2) { animation-delay: .14s, 2.44s; }
.arch-scribble path:nth-child(3) { animation-delay: .23s, 2.53s; }
.arch-scribble path:nth-child(4) { animation-delay: .32s, 2.62s; }
.arch-scribble path:nth-child(5) { animation-delay: .41s, 2.71s; }
.arch-scribble path:nth-child(6) { animation-delay: .5s, 2.8s; }
.arch-scribble path:nth-child(7) { animation-delay: .59s, 2.89s; }
.arch-scribble path:nth-child(8) { animation-delay: .68s, 2.98s; }
.arch-scribble path:nth-child(9) { animation-delay: .77s, 3.07s; }
.arch-scribble path:nth-child(10) { animation-delay: .86s, 3.16s; }
.arch-scribble path:nth-child(11) { animation-delay: .95s, 3.25s; }
.arch-scribble path:nth-child(12) { animation-delay: 1.04s, 3.34s; }
.arch-scribble path:nth-child(13) { animation-delay: 1.13s, 3.43s; }
.arch-core path {
  stroke: rgba(30,30,30,.54);
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
  opacity: .92;
  animation:
    trace-line 1.6s cubic-bezier(.22, 1, .36, 1) forwards,
    scratch-jitter 7s ease-in-out 2s infinite alternate;
}
.arch-core path:nth-child(1) { animation-delay: .12s, 2.1s; }
.arch-core path:nth-child(2) { animation-delay: .2s, 2.25s; }
.arch-core path:nth-child(3) { animation-delay: .3s, 2.4s; }
.arch-core path:nth-child(4) { animation-delay: .4s, 2.55s; }
.arch-core path:nth-child(5) { animation-delay: .5s, 2.7s; }
.arch-core path:nth-child(6) { animation-delay: .6s, 2.85s; }
.arch-core path:nth-child(7) { animation-delay: .7s, 3s; }
.arch-core path:nth-child(8) { animation-delay: .8s, 3.15s; }
.arch-core path:nth-child(9) { animation-delay: .9s, 3.3s; }
.arch-core path:nth-child(10) { animation-delay: 1s, 3.45s; }
.arch-hatching path {
  stroke: rgba(30,30,30,.18);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  opacity: .46;
  animation:
    trace-line 1.2s cubic-bezier(.22, 1, .36, 1) forwards,
    scratch-jitter 6.5s ease-in-out 2.2s infinite alternate;
}
.arch-hatching path:nth-child(2n) {
  stroke: rgba(61,52,128,.2);
}
.arch-hatching path:nth-child(1) { animation-delay: .18s, 2.1s; }
.arch-hatching path:nth-child(2) { animation-delay: .24s, 2.18s; }
.arch-hatching path:nth-child(3) { animation-delay: .3s, 2.26s; }
.arch-hatching path:nth-child(4) { animation-delay: .36s, 2.34s; }
.arch-hatching path:nth-child(5) { animation-delay: .42s, 2.42s; }
.arch-hatching path:nth-child(6) { animation-delay: .48s, 2.5s; }
.arch-hatching path:nth-child(7) { animation-delay: .54s, 2.58s; }
.arch-hatching path:nth-child(8) { animation-delay: .6s, 2.66s; }
.arch-hatching path:nth-child(9) { animation-delay: .66s, 2.74s; }
.arch-hatching path:nth-child(10) { animation-delay: .72s, 2.82s; }
.arch-hatching path:nth-child(11) { animation-delay: .78s, 2.9s; }
.arch-hatching path:nth-child(12) { animation-delay: .84s, 2.98s; }
.arch-hatching path:nth-child(13) { animation-delay: .9s, 3.06s; }
.arch-hatching path:nth-child(14) { animation-delay: .96s, 3.14s; }
.arch-hatching path:nth-child(15) { animation-delay: 1.02s, 3.22s; }
.arch-hatching path:nth-child(16) { animation-delay: 1.08s, 3.3s; }
.arch-loops ellipse {
  stroke: rgba(30,30,30,.14);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-dasharray: 14 16;
  opacity: .72;
  transform-box: fill-box;
  transform-origin: center;
  animation: loop-drift 12s ease-in-out 2s infinite alternate;
}
.arch-loops ellipse:nth-child(2n) {
  stroke: rgba(61,52,128,.16);
  animation-direction: alternate-reverse;
}
.arch-orbit path {
  stroke: rgba(61,52,128,.24);
  stroke-width: 1;
  stroke-dasharray: 680;
  stroke-dashoffset: 680;
  animation:
    trace-line 2.2s cubic-bezier(.22, 1, .36, 1) forwards,
    line-breathe 7s ease-in-out 2.4s infinite alternate;
}
.arch-orbit path:nth-child(2) {
  animation-delay: .22s, 2.8s;
}
.arch-orbit path:nth-child(3) {
  animation-delay: .44s, 3.2s;
}
.arch-orbit path:nth-child(4) {
  animation-delay: .66s, 3.6s;
}
.arch-orbit path:nth-child(5) {
  animation-delay: .88s, 4s;
}
.arch-lines path {
  stroke: rgba(30,30,30,.34);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 720;
  stroke-dashoffset: 720;
  animation:
    trace-line 2s cubic-bezier(.22, 1, .36, 1) forwards,
    line-breathe 5.8s ease-in-out 2.2s infinite alternate;
}
.arch-lines path:nth-child(1) { animation-delay: .52s, 2.4s; }
.arch-lines path:nth-child(2) { animation-delay: .82s, 2.9s; }
.arch-lines path:nth-child(3) { animation-delay: 1.12s, 3.4s; }
.arch-lines path:nth-child(4) { animation-delay: 1.32s, 3.8s; }
.arch-lines path:nth-child(5) { animation-delay: 1.48s, 4.1s; }
.arch-lines path:nth-child(6) { animation-delay: 1.64s, 4.4s; }
.arch-panels path {
  fill: rgba(61,52,128,.1);
  stroke: rgba(61,52,128,.3);
  stroke-width: 1;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation:
    settle-panel 1.25s cubic-bezier(.22, 1, .36, 1) forwards,
    panel-breathe 8s ease-in-out 2.4s infinite alternate;
}
.arch-panels path:nth-child(1) { animation-delay: .7s, 2.4s; }
.arch-panels path:nth-child(2) { animation-delay: 1s, 2.9s; }
.arch-panels path:nth-child(3) { animation-delay: 1.3s, 3.4s; }
.arch-panels path:nth-child(4) { animation-delay: 1.48s, 3.7s; }
.arch-panels path:nth-child(5) { animation-delay: 1.64s, 4s; }
.arch-panels path:nth-child(6) { animation-delay: 1.8s, 4.3s; }
.arch-accent-shapes rect,
.arch-accent-shapes circle {
  fill: rgba(124,111,205,.2);
  stroke: rgba(61,52,128,.3);
  stroke-width: 1;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation:
    settle-panel 1.1s cubic-bezier(.22, 1, .36, 1) forwards,
    panel-breathe 7s ease-in-out 2.4s infinite alternate;
}
.arch-accent-shapes circle {
  fill: rgba(61,52,128,.7);
  stroke: rgba(246,243,238,.82);
}
.arch-accent-shapes :nth-child(1) { animation-delay: 1.15s, 3.1s; }
.arch-accent-shapes :nth-child(2) { animation-delay: 1.35s, 3.35s; }
.arch-accent-shapes :nth-child(3) { animation-delay: 1.55s, 3.6s; }
.arch-accent-shapes :nth-child(4) { animation-delay: 1.75s, 3.85s; }
.arch-accent-shapes :nth-child(5) { animation-delay: 1.95s, 4.1s; }
.arch-accent-shapes :nth-child(6) { animation-delay: 2.15s, 4.35s; }
.arch-nodes circle {
  fill: rgba(30,30,30,.52);
  stroke: rgba(246,243,238,.7);
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation:
    place-node .7s cubic-bezier(.22, 1, .36, 1) forwards,
    node-pulse 5.5s ease-in-out 2.2s infinite alternate;
}
.arch-nodes circle:nth-child(1) { animation-delay: .72s, 2.2s; }
.arch-nodes circle:nth-child(2) { animation-delay: .84s, 2.35s; }
.arch-nodes circle:nth-child(3) { animation-delay: .96s, 2.5s; }
.arch-nodes circle:nth-child(4) { animation-delay: 1.08s, 2.65s; }
.arch-nodes circle:nth-child(5) { animation-delay: 1.2s, 2.8s; }
.arch-nodes circle:nth-child(6) { animation-delay: 1.32s, 2.95s; }
.arch-nodes circle:nth-child(7) { animation-delay: 1.44s, 3.1s; }
.arch-nodes circle:nth-child(8) { animation-delay: 1.56s, 3.25s; }
.arch-nodes circle:nth-child(9) { animation-delay: 1.68s, 3.4s; }
.arch-nodes circle:nth-child(10) { animation-delay: 1.8s, 3.55s; }
.arch-nodes circle:nth-child(11) { animation-delay: 1.92s, 3.7s; }
.arch-nodes circle:nth-child(12) { animation-delay: 2.04s, 3.85s; }
.arch-nodes circle:nth-child(13) { animation-delay: 2.16s, 4s; }
.arch-nodes circle:nth-child(14) { animation-delay: 2.28s, 4.15s; }
.arch-nodes circle:nth-child(15) { animation-delay: 2.4s, 4.3s; }
.arch-dust circle {
  fill: rgba(30,30,30,.34);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation:
    place-node .55s cubic-bezier(.22, 1, .36, 1) forwards,
    dust-float 7s ease-in-out 2.2s infinite alternate;
}
.arch-dust circle:nth-child(3n) {
  fill: rgba(61,52,128,.34);
}
.arch-dust circle:nth-child(1) { animation-delay: .9s, 2.2s; }
.arch-dust circle:nth-child(2) { animation-delay: .98s, 2.35s; }
.arch-dust circle:nth-child(3) { animation-delay: 1.06s, 2.5s; }
.arch-dust circle:nth-child(4) { animation-delay: 1.14s, 2.65s; }
.arch-dust circle:nth-child(5) { animation-delay: 1.22s, 2.8s; }
.arch-dust circle:nth-child(6) { animation-delay: 1.3s, 2.95s; }
.arch-dust circle:nth-child(7) { animation-delay: 1.38s, 3.1s; }
.arch-dust circle:nth-child(8) { animation-delay: 1.46s, 3.25s; }
.arch-dust circle:nth-child(9) { animation-delay: 1.54s, 3.4s; }
.arch-dust circle:nth-child(10) { animation-delay: 1.62s, 3.55s; }
.arch-dust circle:nth-child(11) { animation-delay: 1.7s, 3.7s; }
.arch-dust circle:nth-child(12) { animation-delay: 1.78s, 3.85s; }
.arch-dust circle:nth-child(13) { animation-delay: 1.86s, 4s; }
.arch-dust circle:nth-child(14) { animation-delay: 1.94s, 4.15s; }
.arch-dust circle:nth-child(15) { animation-delay: 2.02s, 4.3s; }
.arch-dust circle:nth-child(16) { animation-delay: 2.1s, 4.45s; }
.arch-dust circle:nth-child(17) { animation-delay: 2.18s, 4.6s; }
.arch-dust circle:nth-child(18) { animation-delay: 2.26s, 4.75s; }
.arch-questions text {
  fill: rgba(30,30,30,.62);
  font-family: var(--sans);
  font-size: 54px;
  font-weight: 500;
  opacity: 0;
  animation: question-place .8s cubic-bezier(.22, 1, .36, 1) forwards;
}
.arch-questions text:nth-child(1) { animation-delay: .48s; }
.arch-questions text:nth-child(2) { animation-delay: .7s; }
.arch-questions text:nth-child(3) { animation-delay: .92s; }
.arch-questions text:nth-child(4) { animation-delay: 1.14s; }
.arch-questions text:nth-child(5) { animation-delay: 1.36s; }
.arch-questions text:nth-child(6) { animation-delay: 1.58s; }
.arch-questions text:nth-child(7) { animation-delay: 1.8s; }

@keyframes trace-line {
  to { stroke-dashoffset: 0; }
}
@keyframes chaos-settle {
  0% {
    transform: translate3d(28px, -20px, 0) rotate(7deg) scale(1.08);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0) scale(1);
  }
}
@keyframes scribble-arrive {
  0% {
    transform: translate3d(34px, -26px, 0) rotate(8deg) scale(1.08);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0) scale(1);
  }
}
@keyframes scribble-breathe {
  0% { transform: translate3d(-5px, 4px, 0) rotate(-.7deg); }
  100% { transform: translate3d(6px, -5px, 0) rotate(.7deg); }
}
@keyframes scribble-jitter {
  0% { opacity: .5; transform: translate3d(-2px, 1px, 0) rotate(-.15deg); }
  38% { opacity: .9; }
  100% { opacity: .72; transform: translate3d(2px, -2px, 0) rotate(.15deg); }
}
@keyframes core-resolve {
  0% {
    transform: translate3d(18px, -12px, 0) rotate(4deg) scale(1.04);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0) scale(1);
  }
}
@keyframes core-breathe {
  0% { transform: translate3d(-3px, 2px, 0) rotate(-.3deg); }
  100% { transform: translate3d(3px, -2px, 0) rotate(.3deg); }
}
@keyframes scratch-jitter {
  0% { opacity: .62; transform: translate3d(-1px, 1px, 0); }
  46% { opacity: .9; }
  100% { opacity: .78; transform: translate3d(1px, -1px, 0); }
}
@keyframes scratch-field {
  0% { transform: translate3d(4px, -2px, 0) rotate(.4deg); opacity: .56; }
  100% { transform: translate3d(-3px, 3px, 0) rotate(-.4deg); opacity: .9; }
}
@keyframes loop-drift {
  0% { transform: translate3d(-8px, 4px, 0) rotate(-1deg); opacity: .42; }
  100% { transform: translate3d(8px, -5px, 0) rotate(1deg); opacity: .8; }
}
@keyframes question-place {
  0% {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(.82);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}
@keyframes question-drift {
  0% { transform: translate3d(-4px, 5px, 0); }
  100% { transform: translate3d(5px, -4px, 0); }
}
@keyframes clarity-scan {
  0% {
    transform: translate3d(-8%, 6%, 0);
    opacity: .58;
  }
  42% {
    opacity: .92;
  }
  100% {
    transform: translate3d(8%, -6%, 0);
    opacity: .78;
  }
}
@keyframes architecture-drift {
  0% { transform: translate3d(-4px, 5px, 0) rotate(-.8deg); }
  100% { transform: translate3d(6px, -4px, 0) rotate(.8deg); }
}
@keyframes architecture-focus {
  0% { transform: translate3d(4px, -3px, 0); }
  100% { transform: translate3d(-5px, 4px, 0); }
}
@keyframes grid-breathe {
  0% { transform: translate3d(-2px, 1px, 0); }
  100% { transform: translate3d(2px, -1px, 0); }
}
@keyframes line-breathe {
  0% { opacity: .58; }
  100% { opacity: 1; }
}
@keyframes place-node {
  0% {
    opacity: 0;
    transform: scale(.45) translateY(8px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
@keyframes node-pulse {
  0% {
    stroke-width: 2;
    opacity: .68;
  }
  100% {
    stroke-width: 4;
    opacity: 1;
  }
}
@keyframes settle-panel {
  0% {
    opacity: 0;
    transform: translateY(16px) rotate(-5deg) scale(.94);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(0) scale(1);
  }
}
@keyframes panel-drift {
  0% { transform: translate3d(-3px, 3px, 0); }
  100% { transform: translate3d(4px, -4px, 0); }
}
@keyframes panel-breathe {
  0% { opacity: .58; }
  100% { opacity: 1; }
}
@keyframes dust-float {
  0% { transform: translate3d(-3px, 2px, 0); opacity: .28; }
  100% { transform: translate3d(4px, -3px, 0); opacity: .58; }
}

/* ─────────────────────────────────────────
   INDEX — ORIENTATION
   ───────────────────────────────────────── */
.orientation {
  padding: 6rem var(--pad);
  border-bottom: 1px solid var(--line);
}
.orientation-header {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  align-items: start;
  margin-bottom: 3rem;
}
.orientation-header h2 {
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  font-weight: 300;
  letter-spacing: -.025em;
  line-height: 1.2;
  color: var(--text);
  max-width: 24ch;
}
.orientation-header h2 em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--accent);
}
.orientation-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 1.5px;
  background: var(--line);
  border: 1px solid var(--line);
}
.orientation-card {
  background: var(--bg);
  padding: 2rem;
  min-height: 17rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.orientation-card-primary {
  background: var(--bg-dark);
}
.orientation-step {
  font-family: var(--serif);
  font-style: italic;
  color: var(--accent);
  font-size: .9rem;
  margin-bottom: 2rem;
}
.orientation-card-primary .orientation-step { color: var(--accent-light); }
.orientation-card h3 {
  font-size: 1.1rem;
  line-height: 1.25;
  letter-spacing: -.01em;
  font-weight: 500;
  color: var(--text);
  margin-bottom: .8rem;
}
.orientation-card-primary h3 { color: var(--bg); }
.orientation-card p {
  font-size: .88rem;
  line-height: 1.7;
  color: var(--text-soft);
  font-weight: 300;
  margin-bottom: 1.8rem;
}
.orientation-card-primary p { color: rgba(246,243,238,.68); }
.orientation-card a {
  margin-top: auto;
  color: var(--accent);
  font-size: .82rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.orientation-card-primary a { color: var(--accent-light); }

/* ─────────────────────────────────────────
   INDEX — SITUATIONS
   ───────────────────────────────────────── */
.situations {
  background: var(--bg-warm);
  padding: 7rem var(--pad);
  border-bottom: 1px solid var(--line);
}
.situations-header {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  align-items: start;
  margin-bottom: 4rem;
}
.situations-intro {
  font-size: clamp(1.3rem, 2.2vw, 1.9rem);
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1.35;
  color: var(--text);
}
.situations-intro em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--accent);
}
.situations-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5px;
  background: rgba(30,30,30,.08);
  border: 1px solid rgba(30,30,30,.08);
}
.sit-card {
  background: var(--bg-warm);
  padding: 2.5rem 2.2rem;
  transition: background .2s, transform .2s, box-shadow .2s;
}
.sit-card:hover {
  background: var(--bg);
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(30,30,30,.06);
}
.sit-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: .72rem;
  color: var(--accent);
  display: block;
  margin-bottom: 1rem;
  opacity: .7;
}
.sit-card p {
  font-size: .95rem;
  line-height: 1.65;
  color: var(--text-soft);
  font-weight: 300;
}

/* ─────────────────────────────────────────
   INDEX — SECTION HUMAIN
   ───────────────────────────────────────── */
.human {
  display: grid;
  grid-template-columns: 5fr 7fr;
  border-bottom: 1px solid var(--line);
  min-height: 580px;
}
.human-photo {
  overflow: hidden;
  border-right: 1px solid var(--line);
}
.human-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.human-content {
  padding: 6rem 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.human-content h2 {
  font-size: clamp(1.8rem, 2.8vw, 2.6rem);
  font-weight: 300;
  letter-spacing: -.025em;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 2rem;
}
.human-content h2 em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--accent);
}
.human-content p {
  font-size: .97rem;
  color: var(--text-soft);
  line-height: 1.8;
  font-weight: 300;
  max-width: 54ch;
  margin-bottom: 1.3rem;
}
.human-byline {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.human-byline strong {
  display: block;
  font-size: .88rem;
  font-weight: 500;
  color: var(--text);
}
.human-byline span {
  font-size: .78rem;
  color: var(--text-pale);
  letter-spacing: .02em;
}

/* ─────────────────────────────────────────
   INDEX — PHILOSOPHIE
   ───────────────────────────────────────── */
.philosophy {
  background: var(--bg-dark);
  padding: 13rem var(--pad);
  border-bottom: 1px solid rgba(0,0,0,.25);
  position: relative;
  overflow: hidden;
}
.philosophy::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 65% 40%, rgba(61,52,128,.18) 0%, transparent 60%);
  pointer-events: none;
}
.philosophy-inner { max-width: 960px; position: relative; }
.philosophy-eyebrow {
  font-size: .69rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-light);
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: 3.5rem;
}
.philosophy-eyebrow::before {
  content: '';
  display: block;
  width: 14px;
  height: 1px;
  background: var(--accent-light);
}
.philosophy-statement {
  font-size: clamp(3rem, 6.5vw, 6rem);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -.04em;
  color: #F6F3EE;
}
.philosophy-statement em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent-light);
}

/* ─────────────────────────────────────────
   INDEX — MÉTHODE
   ───────────────────────────────────────── */
.method {
  padding: 8rem var(--pad);
  border-bottom: 1px solid var(--line);
}
.method-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 7rem;
  align-items: start;
}
.method-grid > div:first-child h2 {
  font-size: clamp(1.6rem, 2.3vw, 2.2rem);
  font-weight: 300;
  letter-spacing: -.025em;
  line-height: 1.2;
  color: var(--text);
  margin-bottom: 1.5rem;
}
.method-grid > div:first-child h2 em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--accent);
}
.method-grid > div:first-child > p {
  font-size: .9rem;
  color: var(--text-soft);
  line-height: 1.7;
  font-weight: 300;
}
.method-image {
  margin-top: 2.5rem;
  border: 1px solid var(--line);
  overflow: hidden;
}
.method-image img {
  width: 100%;
  filter: saturate(.55);
  transition: filter .35s;
}
.method-image:hover img { filter: saturate(1); }

.method-steps { display: flex; flex-direction: column; }
.method-step {
  position: relative;
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1.8rem;
  padding: 2.2rem 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.method-step::before {
  content: '';
  position: absolute;
  left: 1.45rem;
  top: 3.65rem;
  bottom: -1px;
  width: 1px;
  background: var(--accent);
  opacity: .18;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .65s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--reveal-delay, 0ms) + 140ms);
}
.method-step.is-visible::before { transform: scaleY(1); }
.method-step:last-child::before { display: none; }
.method-step:first-child { border-top: 1px solid var(--line); }
.method-step-num {
  position: relative;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--accent);
  padding-top: .1rem;
}
.method-step-num::after {
  content: '';
  position: absolute;
  left: -.45rem;
  top: .22rem;
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid rgba(61,52,128,.24);
  transform: scale(.72);
  opacity: 0;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .45s ease;
}
.method-step.is-visible .method-step-num::after {
  transform: scale(1);
  opacity: 1;
}
.method-step h3 {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -.01em;
  margin-bottom: .45rem;
}
.method-step p {
  font-size: .88rem;
  color: var(--text-soft);
  line-height: 1.65;
  font-weight: 300;
}

/* ─────────────────────────────────────────
   INDEX — DOMAINES
   ───────────────────────────────────────── */
.domains {
  background: var(--bg-warm);
  padding: 8rem var(--pad);
  border-bottom: 1px solid var(--line);
}
.domains-header {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  align-items: start;
  margin-bottom: 4.5rem;
}
.domains-intro {
  font-size: clamp(1.3rem, 2.2vw, 1.9rem);
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1.35;
  color: var(--text);
}
.domains-intro em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--accent);
}
.domains-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5px;
  background: rgba(30,30,30,.08);
  border: 1px solid rgba(30,30,30,.08);
}
.domain-card {
  background: var(--bg-warm);
  padding: 2.8rem 2.2rem;
  transition: background .2s, transform .2s, box-shadow .2s;
}
.domain-card:hover {
  background: var(--bg);
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(30,30,30,.06);
}
.domain-icon {
  width: 24px;
  height: 24px;
  color: var(--accent);
  margin-bottom: 1.3rem;
  opacity: .7;
}
.domain-card h3 {
  font-size: .95rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -.01em;
  margin-bottom: .7rem;
}
.domain-card p {
  font-size: .88rem;
  color: var(--text-soft);
  line-height: 1.65;
  font-weight: 300;
}

/* ─────────────────────────────────────────
   INDEX — CAS (aperçu homepage)
   ───────────────────────────────────────── */
.cases-preview {
  padding: 8rem var(--pad);
  border-bottom: 1px solid var(--line);
}
.cases-preview-header {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  margin-bottom: 5rem;
  align-items: end;
}
.cases-preview-header h2 {
  font-size: clamp(1.8rem, 2.5vw, 2.4rem);
  font-weight: 300;
  letter-spacing: -.025em;
  line-height: 1.15;
  color: var(--text);
}
.cases-preview-header h2 em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--accent);
}
.cases-preview-header p {
  font-size: .92rem;
  color: var(--text-soft);
  line-height: 1.75;
  font-weight: 300;
  max-width: 56ch;
}
.case-preview-item {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 5rem;
  align-items: start;
  padding: 4rem 0;
  border-top: 1px solid var(--line);
}
.case-preview-item:last-of-type { border-bottom: 1px solid var(--line); }
.case-domain-tag {
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.case-domain-tag::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .4;
  flex-shrink: 0;
}
.case-preview-title {
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  font-weight: 300;
  letter-spacing: -.02em;
  color: var(--text);
  margin-bottom: 1.8rem;
  line-height: 1.2;
}
.case-proof-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: -0.4rem 0 1.8rem;
}
.case-proof-strip span {
  border: 1px solid var(--line);
  color: var(--text-soft);
  background: var(--bg-warm);
  padding: .42rem .68rem;
  font-size: .72rem;
  line-height: 1.2;
  font-weight: 400;
}
.case-blocks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: 2rem;
}
.case-block {
  background: var(--bg);
  padding: 1.5rem 1.4rem;
}
.case-block-label {
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-pale);
  margin-bottom: .6rem;
  display: block;
}
.case-block p {
  font-size: .84rem;
  color: var(--text-soft);
  line-height: 1.6;
  font-weight: 300;
}
.case-quote-col { position: sticky; top: calc(var(--nav-h) + 2rem); }
.case-quote {
  background: var(--bg-dark);
  padding: 2.5rem;
}
.case-quote-secondary { margin-top: 1.5px; background: var(--bg-mid); }

.case-video-card {
  margin-top: 1.5px;
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 1.5rem;
}
.case-video-label {
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .9rem;
}
.case-video-card h3 {
  color: var(--text);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.35;
  margin-bottom: 1.2rem;
}
.video-poster,
.video-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}
.video-poster {
  position: relative;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #F6F3EE;
  background:
    linear-gradient(rgba(26,25,22,.28), rgba(26,25,22,.78)),
    url("https://i.ytimg.com/vi/Zmq8IbhNWA4/hqdefault.jpg") center / cover no-repeat;
  overflow: hidden;
}
.video-poster::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(124,111,205,.24), transparent 58%);
  opacity: .75;
  transition: transform .35s ease, opacity .35s ease;
}
.video-poster:hover::after {
  transform: scale(1.12);
  opacity: 1;
}
.video-play {
  position: relative;
  z-index: 1;
  width: 4rem;
  height: 4rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(246,243,238,.58);
  background: rgba(26,25,22,.55);
  transition: transform .22s ease, background .22s ease;
}
.video-play svg {
  width: 1.6rem;
  height: 1.6rem;
  margin-left: .18rem;
}
.video-poster:hover .video-play {
  transform: scale(1.06);
  background: var(--accent);
}
.video-poster-text {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 1;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.case-quote::before {
  content: '\201C';
  font-family: var(--serif);
  font-style: italic;
  font-size: 3.5rem;
  line-height: .8;
  color: var(--accent-light);
  display: block;
  margin-bottom: .75rem;
  opacity: .5;
}
.case-quote blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(246,243,238,.82);
  font-weight: 400;
  margin-bottom: 1.5rem;
}
.case-quote cite {
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(246,243,238,.32);
  font-style: normal;
}
.case-honest {
  margin-top: 1.5px;
  background: var(--bg-mid);
  padding: 1.4rem 2.5rem;
}
.case-honest p {
  font-size: .8rem;
  color: rgba(246,243,238,.38);
  line-height: 1.6;
  font-style: italic;
  font-weight: 300;
}

/* ─────────────────────────────────────────
   INDEX — CTA FINAL
   ───────────────────────────────────────── */
.cta-final {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--line);
  min-height: 540px;
}
.cta-content {
  padding: 7rem 4rem 7rem var(--pad);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid var(--line);
}
.cta-content h2 {
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 1.5rem;
}
.cta-content h2 em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--accent);
}
.cta-content p {
  font-size: .97rem;
  color: var(--text-soft);
  line-height: 1.75;
  font-weight: 300;
  max-width: 48ch;
  margin-bottom: 2.5rem;
}
.cta-buttons {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.2rem;
}
.cta-photo { overflow: hidden; }
.cta-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ─────────────────────────────────────────
   OFFRES — DIAGNOSTIC
   ───────────────────────────────────────── */
.offer-diagnostic {
  padding: 7rem var(--pad);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: start;
}
.offer-path {
  padding: 4rem var(--pad);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 5rem;
  align-items: start;
  background: var(--bg);
}
.offer-path h2,
.contact-entry h2 {
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  line-height: 1.3;
  letter-spacing: -.02em;
  font-weight: 300;
  max-width: 30ch;
}
.offer-path-grid,
.contact-entry-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5px;
  background: var(--line);
  border: 1px solid var(--line);
}
.offer-path-card,
.contact-entry-card {
  background: var(--bg);
  padding: 1.8rem;
  color: inherit;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.offer-path-card:hover,
.contact-entry-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(30,30,30,.06);
  background: #fff;
}
.offer-path-card-primary,
.contact-entry-card-primary {
  background: var(--bg-dark);
}
.offer-path-card-primary:hover,
.contact-entry-card-primary:hover {
  background: var(--bg-dark);
}
.offer-path-card span,
.contact-entry-card span {
  display: block;
  color: var(--accent);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 1.3rem;
}
.offer-path-card-primary span,
.contact-entry-card-primary span {
  color: var(--accent-light);
}
.offer-path-card strong,
.contact-entry-card strong {
  display: block;
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -.01em;
  margin-bottom: .65rem;
}
.offer-path-card-primary strong,
.contact-entry-card-primary strong {
  color: var(--bg);
}
.offer-path-card p,
.contact-entry-card p {
  color: var(--text-soft);
  font-size: .86rem;
  line-height: 1.65;
  font-weight: 300;
}
.offer-path-card-primary p,
.contact-entry-card-primary p {
  color: rgba(246,243,238,.66);
}
.offer-tag {
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-pale);
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 2rem;
}
.offer-tag::before {
  content: '';
  display: block;
  width: 10px;
  height: 1px;
  background: var(--text-pale);
}
.offer-title {
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 300;
  letter-spacing: -.025em;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 1.5rem;
}
.offer-title em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--accent);
}
.offer-desc {
  font-size: .95rem;
  color: var(--text-soft);
  line-height: 1.8;
  font-weight: 300;
  margin-bottom: 1.4rem;
}
.offer-detail-card {
  border: 1px solid var(--line);
  background: white;
  padding: 2.5rem;
}
.detail-section { margin-bottom: 2rem; }
.detail-section:last-child { margin-bottom: 0; }
.detail-label {
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .75rem;
  display: block;
}
.detail-text {
  font-size: .88rem;
  color: var(--text-soft);
  line-height: 1.7;
  font-weight: 300;
}
.detail-price-wrap {
  border-top: 1px solid var(--line);
  padding-top: 2rem;
  margin-top: 2rem;
}
.detail-price {
  font-size: 1.8rem;
  font-weight: 300;
  letter-spacing: -.03em;
  color: var(--text);
  margin-bottom: .4rem;
}
.detail-price-note {
  font-size: .8rem;
  color: var(--text-pale);
  font-weight: 300;
  margin-bottom: 1.5rem;
}

.offer-divider {
  padding: 2.5rem var(--pad);
  display: flex;
  align-items: center;
  gap: 2rem;
  border-bottom: 1px solid var(--line);
}
.divider-line { flex: 1; height: 1px; background: var(--line); }
.divider-text {
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-pale);
  white-space: nowrap;
}

/* ─────────────────────────────────────────
   OFFRES — CLARITY DAYS
   ───────────────────────────────────────── */
.offer-clarity { padding: 7rem var(--pad); border-bottom: 1px solid var(--line); }
.offer-clarity-inner {
  display: grid;
  grid-template-columns: 5fr 4fr;
  gap: 6rem;
  align-items: start;
}
.clarity-what {
  font-size: .95rem;
  color: var(--text-soft);
  line-height: 1.8;
  font-weight: 300;
  margin-bottom: 2.5rem;
}
.clarity-blocks { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.clarity-block {
  position: relative;
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 1.5rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.clarity-block::before {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  width: 2rem;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.clarity-block.is-visible::before { transform: scaleX(1); }
.clarity-block-label {
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-pale);
  padding-top: .15rem;
}
.clarity-block-text {
  font-size: .88rem;
  color: var(--text-soft);
  line-height: 1.65;
  font-weight: 300;
}
.clarity-price-card {
  background: var(--bg-dark);
  padding: 2.5rem;
  position: sticky;
  top: calc(var(--nav-h) + 2rem);
}
.clarity-price-label {
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(246,243,238,.3);
  margin-bottom: 2rem;
  display: block;
}
.clarity-price-number {
  font-size: 3.2rem;
  font-weight: 300;
  letter-spacing: -.04em;
  color: #F6F3EE;
  line-height: 1;
  margin-bottom: .4rem;
}
.clarity-price-currency {
  font-size: 1.4rem;
  vertical-align: super;
  font-weight: 300;
}
.clarity-price-note {
  font-size: .78rem;
  color: rgba(246,243,238,.3);
  font-weight: 300;
  margin-bottom: 2.5rem;
  line-height: 1.5;
}
.clarity-includes {
  border-top: 1px solid var(--line-dark);
  padding-top: 2rem;
  margin-bottom: 2.5rem;
}
.clarity-includes-label {
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(246,243,238,.28);
  margin-bottom: 1.2rem;
  display: block;
}
.clarity-includes-text {
  font-size: .86rem;
  color: rgba(246,243,238,.6);
  line-height: 1.75;
  font-weight: 300;
}
.clarity-excludes {
  font-size: .8rem;
  color: rgba(246,243,238,.22);
  line-height: 1.65;
  font-weight: 300;
  font-style: italic;
  border-top: 1px solid var(--line-dark);
  padding-top: 1.5rem;
  margin-bottom: 2rem;
}
.clarity-cta {
  display: block;
  background: var(--accent);
  color: #F6F3EE;
  font-family: var(--sans);
  font-size: .86rem;
  font-weight: 500;
  padding: .9rem 1.5rem;
  text-decoration: none;
  text-align: center;
  letter-spacing: .01em;
  transition: background .2s;
}
.clarity-cta:hover { background: var(--accent-light); }

/* ─────────────────────────────────────────
   OFFRES — SECTION BEYOND + FAQ
   ───────────────────────────────────────── */
.section-beyond {
  padding: 6rem var(--pad);
  background: var(--bg-warm);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 5rem;
  align-items: start;
}
.beyond-label {
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-pale);
  display: flex;
  align-items: center;
  gap: .6rem;
  padding-top: .2rem;
}
.beyond-label::before {
  content: '';
  width: 12px; height: 1px;
  background: var(--text-pale); display: block;
}
.beyond-text h2 {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1.3;
  color: var(--text);
  margin-bottom: 1.2rem;
}
.beyond-text h2 em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--accent);
}
.beyond-text p {
  font-size: .92rem;
  color: var(--text-soft);
  line-height: 1.75;
  font-weight: 300;
  max-width: 58ch;
  margin-bottom: 1rem;
}
.section-faq {
  padding: 7rem var(--pad);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 5rem;
  align-items: start;
}
.faq-list { display: flex; flex-direction: column; }
.faq-item {
  padding: 1.8rem 0;
  border-bottom: 1px solid var(--line);
}
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-q {
  font-size: .95rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -.01em;
  margin-bottom: .75rem;
  cursor: pointer;
}
.faq-a {
  font-size: .88rem;
  color: var(--text-soft);
  line-height: 1.7;
  font-weight: 300;
}

/* ─────────────────────────────────────────
   CAS — DETAIL
   ───────────────────────────────────────── */
.case-full {
  padding: 6rem var(--pad);
  border-bottom: 1px solid var(--line);
}
.case-full-header {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 2rem;
  align-items: start;
  margin-bottom: 4rem;
}
.case-number {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--accent);
  padding-top: .2rem;
}
.case-client {
  font-size: clamp(1.8rem, 2.8vw, 2.4rem);
  font-weight: 300;
  letter-spacing: -.025em;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: .6rem;
}
.case-client em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--accent);
}
.case-sector {
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-pale);
}
.case-full-body {
  display: grid;
  grid-template-columns: 5fr 4fr;
  gap: 5rem;
  align-items: start;
}
.case-keypoints {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: 3rem;
}
.case-keypoints div {
  background: var(--bg);
  padding: 1.2rem;
}
.case-light-bg .case-keypoints div { background: var(--bg-warm); }
.case-keypoints span {
  display: block;
  color: var(--accent);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .7rem;
}
.case-keypoints p {
  color: var(--text-soft);
  font-size: .78rem;
  line-height: 1.55;
  margin: 0;
}
.case-narrative p {
  font-size: .97rem;
  color: var(--text-soft);
  line-height: 1.8;
  font-weight: 300;
  margin-bottom: 1.3rem;
}
.case-narrative strong { font-weight: 500; color: var(--text); }
.case-summary {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5px;
  background: var(--line);
  border: 1px solid var(--line);
}
.summary-block { background: var(--bg); padding: 2rem 1.8rem; }
.summary-block-label {
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
  display: block;
}
.summary-block p {
  font-size: .87rem;
  color: var(--text-soft);
  line-height: 1.65;
  font-weight: 300;
}
.case-honest-note {
  margin-top: 2rem;
  padding: 1.5rem 1.8rem;
  border-left: 2px solid var(--line);
  background: var(--bg-warm);
}
.case-honest-note p {
  font-size: .84rem;
  color: var(--text-soft);
  line-height: 1.65;
  font-weight: 300;
  font-style: italic;
}
.case-quote-sticky { position: sticky; top: calc(var(--nav-h) + 2rem); }
.case-in-progress {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-light);
  background: rgba(61,52,128,.07);
  padding: .35rem .75rem;
  margin-bottom: 2.5rem;
}
.case-in-progress::before {
  content: '';
  display: block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-light);
}
.case-light-bg { background: var(--bg-warm); }

/* ─────────────────────────────────────────
   CONTACT + LEGAL
   ───────────────────────────────────────── */
.contact-intro {
  background:
    linear-gradient(90deg, rgba(246,243,238,.96), rgba(246,243,238,.82)),
    url("https://clowerstudio.com/media/lines-768w.webp") right center / 48% auto no-repeat;
}
.contact-entry {
  padding: 4rem var(--pad);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 5rem;
  align-items: start;
  background: var(--bg-warm);
}
.contact-layout {
  padding: 7rem var(--pad);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 6rem;
  align-items: start;
}
.contact-main h2 {
  font-size: clamp(1.7rem, 2.8vw, 2.6rem);
  font-weight: 300;
  letter-spacing: -.025em;
  line-height: 1.15;
  margin-bottom: 1.6rem;
}
.contact-main > p {
  max-width: 58ch;
  color: var(--text-soft);
  font-size: .97rem;
  line-height: 1.8;
  margin-bottom: 3rem;
}
.contact-situations {
  display: grid;
  gap: 1.5px;
  background: var(--line);
  border: 1px solid var(--line);
}
.contact-situations article {
  background: var(--bg);
  padding: 1.8rem;
  transition: transform .2s, box-shadow .2s;
}
.contact-situations article:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(30,30,30,.06);
}
.contact-situations h3 {
  font-size: .98rem;
  font-weight: 500;
  letter-spacing: -.01em;
  margin-bottom: .6rem;
}
.contact-situations p,
.contact-card p {
  font-size: .88rem;
  color: var(--text-soft);
  line-height: 1.7;
  font-weight: 300;
}
.contact-card {
  position: sticky;
  top: calc(var(--nav-h) + 2rem);
  background: var(--bg-dark);
  padding: 2.5rem;
}
.contact-card .detail-label { color: var(--accent-light); }
.contact-email {
  display: block;
  color: #F6F3EE;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.3vw, 2rem);
  font-style: italic;
  line-height: 1.2;
  text-decoration: none;
  margin: 1.2rem 0 1.5rem;
  overflow-wrap: anywhere;
}
.contact-card p { color: rgba(246,243,238,.58); margin-bottom: 2rem; }
.contact-card .btn-primary { background: var(--accent); margin-bottom: 1rem; }
.contact-card .btn-ghost { color: rgba(246,243,238,.58); border-color: var(--line-dark); }
.legal-intro { padding-bottom: 4rem; }
.legal-content {
  padding: 5rem var(--pad) 7rem;
  max-width: 760px;
}
.legal-content h2 {
  font-size: 1.1rem;
  font-weight: 500;
  margin: 2rem 0 .6rem;
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content p {
  color: var(--text-soft);
  font-size: .94rem;
  line-height: 1.75;
  margin-bottom: .7rem;
}
.legal-content a { color: var(--accent); }

/* ─────────────────────────────────────────
   TÉMOIGNAGES (JS-injected)
   ───────────────────────────────────────── */
.testimonials {
  padding: 7rem var(--pad);
  border-bottom: 1px solid var(--line);
}
.testimonials-header {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  align-items: start;
  margin-bottom: 4rem;
}
.testimonials-intro {
  font-size: clamp(1.3rem, 2.2vw, 1.9rem);
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1.35;
  color: var(--text);
}
.testimonials-intro em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--accent);
}
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
  background: rgba(30,30,30,.08);
  border: 1px solid rgba(30,30,30,.08);
}
.testimonial-card {
  background: var(--bg);
  padding: 2.5rem 2rem;
}
.testimonial-card::before {
  content: '\201C';
  font-family: var(--serif);
  font-style: italic;
  font-size: 2.5rem;
  line-height: .9;
  color: var(--accent);
  display: block;
  margin-bottom: 1rem;
  opacity: .35;
}
.testimonial-text {
  font-size: .92rem;
  color: var(--text-soft);
  line-height: 1.7;
  font-weight: 300;
  font-style: italic;
  margin-bottom: 1.5rem;
}
.testimonial-author strong {
  display: block;
  font-size: .84rem;
  font-weight: 500;
  color: var(--text);
}
.testimonial-author span {
  font-size: .75rem;
  color: var(--text-pale);
}

/* ─────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --pad: 2rem; }
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-left {
    position: relative;
    top: auto;
    min-height: auto;
    padding: 4rem var(--pad) 3rem;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .hero-right {
    position: relative;
    top: auto;
    min-height: 42vw;
    max-height: 440px;
  }
  .hero-architecture { width: min(104%, 720px); opacity: .72; }
  .situations-header,
  .orientation-header,
  .domains-header,
  .cases-preview-header,
  .testimonials-header { grid-template-columns: 1fr; gap: 1.5rem; }
  .human { grid-template-columns: 1fr; min-height: auto; }
  .human-photo { height: 65vw; border-right: none; border-bottom: 1px solid var(--line); }
  .human-content { padding: 4rem var(--pad); }
  .method-grid { grid-template-columns: 1fr; gap: 3.5rem; }
  .method-image { display: none; }
  .case-preview-item,
  .case-full-body { grid-template-columns: 1fr; gap: 3rem; }
  .case-quote-col,
  .case-quote-sticky { position: static; }
  .cta-final { grid-template-columns: 1fr; min-height: auto; }
  .cta-content { padding: 5rem var(--pad); border-right: none; border-bottom: 1px solid var(--line); }
  .cta-photo { min-height: 60vw; }
  .offer-diagnostic,
  .offer-path,
  .offer-clarity-inner,
  .section-beyond,
  .section-faq,
  .contact-entry { grid-template-columns: 1fr; gap: 2.5rem; }
  .clarity-price-card { position: static; }
  .page-intro { grid-template-columns: 1fr; gap: 2rem; padding-top: calc(var(--nav-h) + 3rem); }
  .contact-layout { grid-template-columns: 1fr; gap: 3rem; }
  .contact-card { position: static; }
}

@media (max-width: 640px) {
  :root { --nav-h: 6.25rem; }
  header { position: sticky; }
  nav {
    padding: .75rem 1rem;
    height: auto;
    flex-wrap: wrap;
    row-gap: .7rem;
  }
  .nav-logo img { height: 24px; }
  .nav-links {
    width: 100%;
    justify-content: space-between;
    gap: .75rem;
  }
  .nav-links a { font-size: .78rem; }
  .nav-cta { padding: .4rem .8rem !important; }
  .page-intro { padding-bottom: 4.5rem; }
  .hero-right { min-height: 18rem; max-height: 18rem; }
  .hero-architecture {
    width: min(118%, 620px);
    opacity: .42;
    transform: perspective(900px) rotateX(12deg) rotateZ(-7deg);
  }
  .orientation,
  .offer-path,
  .contact-entry { padding-block: 4rem; }
  .situations-grid,
  .orientation-grid,
  .domains-grid,
  .offer-path-grid,
  .contact-entry-grid,
  .testimonials-grid { grid-template-columns: 1fr; }
  .case-blocks,
  .case-summary,
  .case-keypoints { grid-template-columns: 1fr; }
  .orientation-card { min-height: auto; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-links { justify-content: center; }
  .footer-editorial { padding: 4rem var(--pad) 3rem; }
  .contact-intro { background: var(--bg); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
    clip-path: inset(0);
  }
  [data-structure]::after,
  .method-step::before,
  .clarity-block::before {
    transform: none;
  }
  .hero-architecture,
  .hero-architecture * {
    animation: none !important;
  }
  .hero-architecture {
    --confusion-opacity: 1;
    --residual-opacity: 0;
    --question-opacity: 0;
    --confusion-blur: 0px;
    --structure-opacity: .9;
  }
  .arch-orbit path,
  .arch-lines path,
  .arch-scribble path,
  .arch-core path,
  .arch-hatching path {
    stroke-dashoffset: 0;
  }
  .arch-panels path,
  .arch-accent-shapes rect,
  .arch-accent-shapes circle,
  .arch-nodes circle,
  .arch-dust circle,
  .arch-questions text {
    opacity: 1;
    transform: none;
  }
  .hero-architecture { transform: none; }
}