/* =========================================================
   KROMATIC — Site officiel (refonte v1, mai 2026)
   Charte issue de references/kromatic_masque_v2.pdf
   + signature glow chromatique du site live conservé (hero uniquement)
   ========================================================= */

:root {
  /* Bases */
  --night: #030321;
  --day: #F9F9FF;
  --off-white: #F4F1EA;
  --text-muted: #9A9AAE;
  --rule: rgba(3, 3, 33, 0.08);
  --rule-light: rgba(244, 241, 234, 0.18);

  /* 5 piliers — POP / DOUX */
  --lens-pop: #FFD96B;
  --lens-soft: #FFF0B8;
  --frame-pop: #A3DDF9;
  --frame-soft: #D6F1FF;
  --echoes-pop: #EE8FD8;
  --echoes-soft: #F6CDEA;
  --impulse-pop: #8EA9FC;
  --impulse-soft: #C9D4FF;
  --signal-pop: #C77DFF;
  --signal-soft: #E6D8FF;

  /* Typo */
  --ff-display: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-body: 'DM Sans', Inter, system-ui, sans-serif;
  --ff-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Échelle */
  --maxw: 1180px;
  --maxw-narrow: 820px;
  --gutter: clamp(20px, 5vw, 64px);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--night);
  background: var(--day);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Format standard pour tous les corps de texte (calque du modèle case-intro-block) */
.section p:not(.lede):not(.display):not([class*="hero"]):not([class*="baseline"]),
.case-section p:not(.lede):not(.display):not([class*="hero"]):not([class*="baseline"]) {
  font-size: 17px;
  line-height: 1.65;
  color: rgba(3, 3, 33, 0.85);
}
.theme-night p:not(.lede):not(.display):not([class*="hero"]):not([class*="baseline"]) {
  color: rgba(244, 241, 234, 0.85);
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

::selection { background: var(--signal-pop); color: var(--night); }

/* Focus visible — anneau violet SIGNAL */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--signal-pop);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Skip link */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--night);
  color: var(--off-white);
  padding: 10px 14px;
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 1000;
}
.skip:focus { left: 12px; top: 12px; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero__blob { animation: none !important; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- Reveal ---------- */
.reveal { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s ease; }
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Themes ---------- */
.theme-night { background: var(--night); color: var(--off-white); }
.theme-day { background: var(--day); color: var(--night); }
.theme-night a { color: inherit; }

/* ---------- NAV (fixed pour rester épinglé au scroll) ---------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--gutter);
  background: rgba(249, 249, 255, 0.78);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: none;
  transition: background .35s ease, border-color .35s ease, color .35s ease;
}
.nav::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -18px;
  height: 22px;
  background: linear-gradient(90deg,
    rgba(255, 217, 107, 0.55) 0%,
    rgba(163, 221, 249, 0.55) 28%,
    rgba(238, 143, 216, 0.55) 52%,
    rgba(142, 169, 252, 0.55) 76%,
    rgba(199, 125, 255, 0.55) 100%);
  filter: blur(14px);
  opacity: 0.85;
  pointer-events: none;
}
/* Espace pour le header fixe — sauf sur la home (hero plein écran transparent) */
body:not([data-page="accueil"]) { padding-top: 68px; }
@media (max-width: 720px) { body:not([data-page="accueil"]) { padding-top: 60px; } }
.nav--on-night {
  background: rgba(3, 3, 33, 0.7);
  border-bottom-color: var(--rule-light);
  color: var(--off-white);
}

/* Header transparent au-dessus du hero v2 (page d'accueil uniquement) */
.nav.header--on-hero {
  background: transparent;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--off-white);
  transition: background .4s ease, border-color .4s ease, color .4s ease, backdrop-filter .4s ease;
}
.nav.header--on-hero .nav__brand { color: #F4F1EA; }
.nav.header--on-hero .nav__links a { color: #F4F1EA; opacity: 0.95; }
.nav.header--on-hero .nav__links a:hover { color: #FFFFFF; opacity: 1; }
.nav.header--on-hero .nav__links a.is-active { color: var(--signal-pop); border-bottom-color: var(--signal-pop); }
.nav.header--on-hero .nav__cta {
  background: transparent;
  color: #F4F1EA;
  border-color: rgba(255, 255, 255, 0.6);
  opacity: 1;
}
.nav.header--on-hero .nav__cta:hover {
  background: var(--signal-pop);
  border-color: var(--signal-pop);
  color: var(--night);
}
.nav.header--on-hero .nav__toggle {
  color: #F4F1EA;
  border-color: rgba(244, 241, 234, 0.6);
}
.nav__brand {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.02em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  padding-right: clamp(16px, 3vw, 32px);
}
.nav__logo {
  height: 22px;
  width: auto;
  display: block;
  transition: opacity .35s ease;
}
.nav__logo--light { display: none; }
.nav.header--on-hero .nav__logo--dark,
.nav--on-night .nav__logo--dark { display: none; }
.nav.header--on-hero .nav__logo--light,
.nav--on-night .nav__logo--light { display: block; }
@media (max-width: 720px) {
  .nav__logo { height: 18px; }
}
.nav__inner {
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 28px);
}
.nav__links {
  display: flex;
  gap: clamp(10px, 1.8vw, 22px);
  align-items: center;
}
.nav__links a {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.75;
  padding: 6px 2px;
  border-bottom: 1px solid transparent;
  transition: opacity .2s ease, border-color .2s ease, color .2s ease;
  white-space: nowrap;
}
.nav__links a:hover { opacity: 1; }
.nav__links a.is-active {
  opacity: 1;
  border-bottom-color: var(--signal-pop);
  color: var(--signal-pop);
}

/* Dropdown piliers */
.nav__drop {
  position: relative;
}
.nav__drop > a::after {
  content: ' ↓';
  opacity: 0.6;
  font-size: 0.9em;
}
.nav__drop-menu {
  position: absolute;
  top: 100%;
  left: -8px;
  margin-top: 6px;
  background: var(--night);
  border: 1px solid var(--rule-light);
  padding: 10px 0;
  min-width: 200px;
  display: none;
  flex-direction: column;
  z-index: 60;
}
.nav__drop:hover .nav__drop-menu,
.nav__drop:focus-within .nav__drop-menu { display: flex; }
.nav__drop-menu a {
  display: block;
  padding: 8px 18px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--off-white);
  opacity: 0.8;
  border-bottom: none !important;
}
.nav__drop-menu a:hover { opacity: 1; color: var(--signal-pop); }

.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  background: transparent;
  opacity: 1;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.nav__cta:hover { background: var(--signal-pop); color: var(--night); border-color: var(--signal-pop); }

/* Bouton SIGNAL — accès direct à l'étude */
.nav__signal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 14px;
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid rgba(199,125,255,0.45);
  border-radius: 999px;
  background: rgba(199,125,255,0.14);
  color: var(--signal-pop);
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.nav__signal:hover {
  background: var(--signal-pop);
  border-color: var(--signal-pop);
  color: var(--night);
  transform: translateY(-1px);
}
.nav__signal-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal-pop);
  box-shadow: 0 0 10px var(--signal-pop);
  flex-shrink: 0;
  animation: signalPulse 2.4s ease-in-out infinite;
}
.nav__signal:hover .nav__signal-dot { background: var(--night); box-shadow: none; }
@keyframes signalPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.85); }
}

/* Variante hero (fond nuit) : bordure plus visible */
.nav.header--on-hero .nav__signal {
  background: rgba(199,125,255,0.18);
  border-color: rgba(199,125,255,0.55);
}
.nav.header--on-hero .nav__signal:hover {
  background: var(--signal-pop);
  color: var(--night);
}

/* Mobile nav */
.nav__toggle {
  display: none;
  background: transparent;
  border: 1px solid currentColor;
  padding: 7px 10px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: inherit;
  cursor: pointer;
}

@media (max-width: 900px) {
  .nav__toggle { display: inline-block; }
  .nav__inner { display: none; }
  .nav__inner.is-open {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    padding: 18px var(--gutter) 24px;
    background: var(--night);
    color: var(--off-white);
    gap: 16px;
    border-top: 1px solid var(--rule-light);
  }
  .nav__inner.is-open .nav__links {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .nav__inner.is-open .nav__cta,
  .nav__inner.is-open .nav__signal { align-self: flex-start; }
  .nav__drop-menu {
    position: static;
    display: flex;
    margin-top: 8px;
    border: none;
    padding-left: 16px;
    background: transparent;
  }
}

/* ---------- HERO single-page (accueil) — glow chromatique ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(72px, 11vh, 110px) var(--gutter) clamp(48px, 8vh, 80px);
  overflow: hidden;
  background: var(--night);
  color: var(--off-white);
}
.hero__blobs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.42;
  will-change: transform;
}
.hero__blob--violet {
  width: 480px; height: 480px;
  top: 10%; left: 8%;
  background: #C77DFF;
  animation: float-a 22s ease-in-out infinite alternate;
}
.hero__blob--rose {
  width: 420px; height: 420px;
  top: 35%; right: 5%;
  background: #EE8FD8;
  animation: float-b 26s ease-in-out infinite alternate;
}
.hero__blob--cyan {
  width: 500px; height: 500px;
  bottom: 8%; left: 38%;
  background: #A3DDF9;
  opacity: 0.38;
  animation: float-c 24s ease-in-out infinite alternate;
}
@keyframes float-a {
  0%   { transform: translate(-20px, -10px) scale(0.95); }
  100% { transform: translate(30px, 20px) scale(1.05); }
}
@keyframes float-b {
  0%   { transform: translate(20px, 15px) scale(1.02); }
  100% { transform: translate(-25px, -20px) scale(0.96); }
}
@keyframes float-c {
  0%   { transform: translate(-15px, 20px) scale(0.97); }
  100% { transform: translate(25px, -25px) scale(1.04); }
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  width: 100%;
}
.hero__meta {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(244, 241, 234, 0.5);
  text-transform: uppercase;
  margin-bottom: clamp(28px, 5vh, 48px);
}
.hero__wordmark {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(48px, 13.5vw, 200px);
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--off-white);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
.hero__tagline {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(20px, 3.4vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: clamp(28px, 5vh, 48px) auto 0;
  max-width: 900px;
  text-transform: uppercase;
  background: linear-gradient(90deg, #C77DFF 0%, #8EA9FC 50%, #EE8FD8 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.hero__sub {
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: clamp(12px, 1.4vw, 15px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.75);
  margin: clamp(22px, 4vh, 36px) auto 0;
  max-width: 720px;
}
.hero__ctas {
  display: flex;
  gap: 14px;
  margin-top: clamp(36px, 6vh, 56px);
  flex-wrap: wrap;
  justify-content: center;
}
.hero__k {
  position: absolute;
  bottom: 28px;
  right: clamp(20px, 5vw, 56px);
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(48px, 6vw, 84px);
  line-height: 1;
  color: var(--signal-pop);
  letter-spacing: -0.04em;
  z-index: 2;
}

/* Pill CTA — hero (circulaire arrondi) */
.cta-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px 14px 24px;
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--off-white);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.cta-pill:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.5);
}
.cta-pill__k {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.02em;
  color: var(--off-white);
}

/* ---------- HERO standard (pages internes) ---------- */
.page-hero {
  padding: clamp(56px, 9vh, 96px) var(--gutter) clamp(36px, 6vh, 72px);
  position: relative;
  overflow: hidden;
}
.page-hero__inner {
  max-width: var(--maxw);
  margin: 0 auto;
}
.page-hero__eyebrow {
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 24px;
  opacity: 0.7;
}
.page-hero__title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(40px, 7vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 0;
}
.page-hero__baseline {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: clamp(20px, 3vh, 32px) 0 0;
  max-width: 760px;
  opacity: 0.86;
}
.page-hero__baseline--small {
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.55;
  letter-spacing: 0;
  max-width: 820px;
  opacity: 0.78;
}

/* Approche — baseline en pleine largeur (texte long descriptif) */
body[data-page="approche"] .page-hero__baseline {
  max-width: none;
}

/* Pillar page hero (DOUX) */
.pillar-hero {
  padding: clamp(56px, 9vh, 104px) var(--gutter) clamp(36px, 6vh, 80px);
  text-align: center;
  position: relative;
}
.pillar-hero__num {
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: clamp(96px, 18vw, 220px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--night);
  margin: 0;
}
.pillar-hero__name {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(56px, 12vw, 180px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin: clamp(8px, 1vh, 16px) 0 clamp(20px, 3vh, 32px);
  color: var(--night);
}
.pillar-hero__baseline {
  font-family: var(--ff-body);
  font-size: clamp(18px, 2vw, 24px);
  margin: 0 auto;
  max-width: 600px;
  color: var(--night);
}
.pillar-hero__dot {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin: clamp(36px, 6vh, 56px) auto 0;
}

/* ---------- Sections génériques ---------- */
.section {
  padding: clamp(40px, 7vh, 84px) var(--gutter);
  max-width: 100%;
}
.section__inner { max-width: var(--maxw); margin: 0 auto; }
.section--narrow .section__inner { max-width: var(--maxw-narrow); }

.eyebrow {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 22px;
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  color: var(--night);
  background: var(--off-white);
  border: 1px solid rgba(3,3,33,0.12);
}
.eyebrow::after { content: none; }
.eyebrow {
  position: relative;
}
.eyebrow::before { content: none; }
/* Forcer la pilule sur sa propre ligne pour qu'elle reste au-dessus du titre
   (corrige le cas où le titre suivant est inline-block via .display--halo) */
.eyebrow { width: max-content; max-width: 100%; }
.eyebrow + .display,
.eyebrow + .display--halo,
.eyebrow + h1,
.eyebrow + h2 { display: block; }
.display--halo { display: block; width: max-content; max-width: 100%; }
.eyebrow--light {
  color: var(--night);
  opacity: 1;
}
/* Rotation des couleurs piliers — LENS → FRAME → ECHOES → IMPULSE → SIGNAL */
.eyebrow[data-pill="lens"]    { background: var(--lens-pop); }
.eyebrow[data-pill="frame"]   { background: var(--frame-pop); }
.eyebrow[data-pill="echoes"]  { background: var(--echoes-pop); }
.eyebrow[data-pill="impulse"] { background: var(--impulse-pop); }
.eyebrow[data-pill="signal"]  { background: var(--signal-pop); }
/* Pilule multicolore — mix des 5 couleurs de la charte */
.eyebrow[data-pill="multi"] {
  background:
    radial-gradient(60% 140% at 12% 50%, var(--lens-pop) 0%, transparent 60%),
    radial-gradient(60% 140% at 32% 50%, var(--frame-pop) 0%, transparent 60%),
    radial-gradient(60% 140% at 52% 50%, var(--echoes-pop) 0%, transparent 60%),
    radial-gradient(60% 140% at 72% 50%, var(--impulse-pop) 0%, transparent 60%),
    radial-gradient(60% 140% at 92% 50%, var(--signal-pop) 0%, transparent 60%),
    var(--lens-soft);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: pill-multi-drift 14s ease-in-out infinite alternate;
}
@keyframes pill-multi-drift {
  0%   { background-position: 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0 0; }
  100% { background-position: 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 0 0; }
}

.display {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(34px, 5.4vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 clamp(36px, 6vh, 64px);
}
.display--light { color: var(--off-white); }
.display--xl { font-size: clamp(40px, 7vw, 96px); }

/* Page Expertises — rapprocher hero du menu et resserrer */
body[data-page="expertises"] .page-hero {
  padding-top: clamp(24px, 4vh, 44px);
  padding-bottom: clamp(20px, 3vh, 36px);
}
body[data-page="expertises"] #piliers {
  padding-top: clamp(8px, 1.6vh, 20px);
}

/* Autres expertises (bas pages piliers) — pillar-cards compactées */
.section[aria-label="Autres expertises"] {
  padding-top: clamp(36px, 5vh, 56px);
  padding-bottom: clamp(36px, 5vh, 56px);
}
.section[aria-label="Autres expertises"] .display {
  font-size: clamp(20px, 2.4vw, 28px);
  margin-bottom: clamp(14px, 2vh, 20px);
}
.section[aria-label="Autres expertises"] .eyebrow {
  font-size: 10px;
}
.section[aria-label="Autres expertises"] .pillar-card {
  padding: 12px 16px;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 14px;
  min-height: 0;
}
.section[aria-label="Autres expertises"] .pillar-card__num {
  font-size: 11px;
}
.section[aria-label="Autres expertises"] .pillar-card__name {
  font-size: clamp(15px, 1.6vw, 18px);
  letter-spacing: 0;
}
.section[aria-label="Autres expertises"] .pillar-card__name::before {
  width: 6px;
  height: 6px;
}
.section[aria-label="Autres expertises"] .pillar-card__desc {
  font-size: 12px;
  line-height: 1.4;
}
.section[aria-label="Autres expertises"] .pillar-card__cta {
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 6px 10px;
  gap: 6px;
  max-width: 32px;
  align-self: center;
}
.section[aria-label="Autres expertises"] .pillar-card:hover .pillar-card__cta {
  max-width: 200px;
  padding: 6px 12px;
}
.section[aria-label="Autres expertises"] .pillars {
  gap: 6px;
  margin-top: clamp(12px, 2vh, 18px);
}
@media (max-width: 880px) {
  .section[aria-label="Autres expertises"] .pillar-card {
    padding: 12px 14px;
  }
  .section[aria-label="Autres expertises"] .pillar-card__name {
    font-size: 16px;
  }
  .section[aria-label="Autres expertises"] .pillar-card__cta {
    max-width: none;
    padding: 6px 12px;
    margin-top: 6px;
  }
  .section[aria-label="Autres expertises"] .pillar-card__cta-label {
    opacity: 1;
    max-width: 200px;
  }
}

/* CTA bas de page — taille réduite et plus harmonieuse */
.section.theme-night[aria-label="CTA"] .display {
  font-size: clamp(26px, 3.6vw, 44px);
  line-height: 1.1;
  margin-bottom: clamp(20px, 3vh, 32px);
}
.section.theme-night[aria-label="CTA"] .section__inner {
  padding-top: clamp(48px, 7vh, 88px);
  padding-bottom: clamp(48px, 7vh, 88px);
}
.section.theme-night[aria-label="CTA"] .btn {
  font-size: 12px;
  padding: 12px 22px;
}

.lede {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.32;
  letter-spacing: -0.01em;
  margin: 0 0 36px;
  max-width: 820px;
}

.body-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  margin-top: clamp(24px, 4vh, 40px);
}
.body-cols p { margin: 0 0 16px; }
@media (max-width: 720px) {
  .body-cols { grid-template-columns: 1fr; gap: 20px; }
}

/* ---------- APPROCHE 3 cols (accueil) ---------- */
.cols-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.5vw, 28px);
}
.col {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--rule);
}
.col__head {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(18px, 1.8vw, 22px);
  letter-spacing: -0.01em;
  padding: 18px 22px;
  color: var(--night);
}
.col p {
  padding: 20px 22px 24px;
  margin: 0;
}
@media (max-width: 820px) {
  .cols-3 { grid-template-columns: 1fr; gap: 18px; }
}

/* ---------- PILIERS — lignes empilées ---------- */
.pillars {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: clamp(24px, 4vh, 40px);
  border-top: none;
}
.pillar-card {
  background: var(--pillar-soft);
  padding: clamp(20px, 2.6vw, 28px) clamp(18px, 2.4vw, 32px);
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(180px, 230px) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  position: relative;
  color: var(--night);
  text-decoration: none;
  border-bottom: none;
  border-radius: 6px;
  transition: background .3s ease, padding-left .3s ease, transform .3s ease;
  isolation: isolate;
}
.pillar-card:hover {
  background: var(--pillar-pop);
  padding-left: clamp(24px, 3vw, 40px);
}
.pillar-card__num {
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1;
  letter-spacing: 0;
  color: rgba(3, 3, 33, 0.45);
  margin: 0;
}
.pillar-card__name {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(28px, 3.8vw, 48px);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.pillar-card__name::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--night);
  flex: none;
  transition: background .3s ease, transform .3s ease;
}
.pillar-card:hover .pillar-card__name::before {
  background: var(--night);
  transform: scale(1.3);
}
.pillar-card__baseline { display: none; }
.pillar-card__dot { display: none; }
.pillar-card__desc {
  font-family: var(--ff-body);
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.45;
  margin: 0;
  color: rgba(3, 3, 33, 0.78);
  max-width: none;
}
.pillar-card__cta {
  margin: 0;
  font-family: var(--ff-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--night);
  background: transparent;
  border: 1px solid rgba(3, 3, 33, 0.22);
  border-radius: 999px;
  padding: 10px 14px;
  align-self: center;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  max-width: 44px;
  transition: max-width .35s ease, background .25s ease, border-color .25s ease, color .25s ease, padding .25s ease;
}
.pillar-card__cta-label {
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity .25s ease, max-width .35s ease;
}
.pillar-card__cta-arrow {
  display: inline-block;
  flex-shrink: 0;
  transition: transform .25s ease;
}
.pillar-card:hover .pillar-card__cta {
  background: var(--night);
  color: #F4F1EA;
  border-color: var(--night);
  max-width: 320px;
  padding: 10px 18px;
}
.pillar-card:hover .pillar-card__cta-label {
  opacity: 1;
  max-width: 280px;
}
.pillar-card:hover .pillar-card__cta-arrow {
  transform: translateX(2px);
}
@media (max-width: 880px) {
  .pillar-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "name"
      "desc"
      "cta";
    gap: 10px;
    padding: 22px 20px;
  }
  .pillar-card__name { grid-area: name; font-size: 30px; }
  .pillar-card__desc { grid-area: desc; }
  .pillar-card__cta { grid-area: cta; justify-self: start; margin-top: 8px; max-width: 320px; padding: 10px 18px; }
  .pillar-card__cta-label { opacity: 1; max-width: 280px; }
  .pillar-card:hover { padding-left: 20px; }
}

/* ---------- STATS hero ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(36px, 5vw, 56px);
  margin-top: clamp(24px, 4vh, 40px);
}
.stat__num { overflow-wrap: anywhere; }
.stat { text-align: left; }
.stat__num {
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: clamp(48px, 5.5vw, 78px);
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.stat__num span {
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: 0.3em;
  letter-spacing: 0.08em;
  margin-left: 6px;
  opacity: 0.85;
}
.stat__label {
  font-family: var(--ff-body);
  font-size: 15px;
  line-height: 1.45;
  color: var(--off-white);
  margin-top: 14px;
  max-width: 280px;
}
.stat__src {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.4);
  margin-top: 12px;
}
@media (max-width: 640px) {
  .stats { grid-template-columns: 1fr; gap: 48px; }
  .stat__num { font-size: clamp(48px, 14vw, 80px); word-break: break-word; }
  .stat__label { max-width: none; }
}

/* Variante 3 chiffres clés — plus grand */
.stats--three {
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(40px, 5vw, 72px);
  margin-top: clamp(40px, 6vh, 72px);
}
.stats--three .stat__num {
  font-size: clamp(72px, 9vw, 140px);
  line-height: 0.9;
  letter-spacing: -0.04em;
}
.stats--three .stat__num span {
  font-size: 0.4em;
  margin-left: 4px;
}
.stats--three .stat__label {
  font-size: 16px;
  max-width: 320px;
  margin-top: 18px;
  color: rgba(244, 241, 234, 0.85);
}
@media (max-width: 880px) {
  .stats--three { grid-template-columns: 1fr; gap: 56px; }
  .stats--three .stat__num { font-size: clamp(72px, 18vw, 110px); }
}

/* ---------- CAS cards ---------- */
.cases {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 3vw, 36px);
}
.case-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--rule);
  transition: transform .25s ease, box-shadow .25s ease;
  color: var(--night);
}
.case-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(3,3,33,0.08);
}
.case-card__band {
  height: 10px;
  width: 100%;
}
.case-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--night);
}
.case-card__media video,
.case-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.case-card:hover .case-card__media video,
.case-card:hover .case-card__media img {
  transform: scale(1.03);
}
.case-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3,3,33,0) 55%, rgba(3,3,33,0.18) 100%);
  pointer-events: none;
}

/* Cartes cas avec vidéo — empilées pleine largeur, vidéo verticale à gauche */
.case-card--video {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: stretch;
}
.case-card--video .case-card__media {
  flex: none;
  width: clamp(200px, 22%, 280px);
  aspect-ratio: 9 / 16;
  height: auto;
  background: #0a0a14;
}
.case-card--video .case-card__media video {
  object-fit: contain;
}
.case-card--video .case-card__media::after {
  display: none;
}
.case-card--video .case-card__body {
  flex: 1;
  justify-content: center;
}
@media (max-width: 760px) {
  .case-card--video {
    flex-direction: column;
  }
  .case-card--video .case-card__media {
    width: 100%;
    max-width: 320px;
    margin: 16px auto 0;
    aspect-ratio: 9 / 16;
  }
}
.case-card__body {
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.case-card__eye {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 14px;
}
.case-card__title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 26px);
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  line-height: 1.15;
}
.case-card__excerpt {
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 20px;
  color: rgba(3,3,33,0.78);
}
.case-card__more {
  margin-top: auto;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--night);
  align-self: flex-start;
  padding-bottom: 2px;
}
@media (max-width: 720px) {
  .cases { grid-template-columns: 1fr; }
}

/* Cas vedettes (accueil) — stack horizontal */
.cases-featured {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
}
@media (max-width: 900px) {
  .cases-featured { grid-template-columns: 1fr; }
}

/* ---------- CAS détaillé — bandeau hero ---------- */
.case-hero {
  padding: clamp(56px, 8vh, 88px) var(--gutter) clamp(32px, 5vh, 56px);
  position: relative;
  border-top: 12px solid var(--pillar-soft);
}
.case-hero__inner { max-width: var(--maxw); margin: 0 auto; }
.case-hero__pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.case-hero__eye {
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 24px;
  opacity: 0.7;
}
.case-hero__title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(34px, 5vw, 64px);
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 22px;
}
.case-hero__meta {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.case-section {
  padding: clamp(56px, 9vh, 100px) var(--gutter);
}
.case-section__inner { max-width: var(--maxw); margin: 0 auto; }
.case-section h2 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 24px;
}
.case-block {
  border-left: 3px solid var(--pillar-pop, var(--signal-pop));
  padding: 8px 0 8px 24px;
  margin-bottom: 20px;
}
.case-block h3 {
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.case-block p { margin: 0; font-size: 16px; line-height: 1.6; }

/* ---------- ACTIVITÉS (pages piliers) ---------- */
.activities {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
.activity {
  background: #fff;
  border: 1px solid var(--rule);
  padding: 24px 22px;
}
.activity__eye {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.activity__title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.activity__desc {
  font-size: 14.5px;
  line-height: 1.5;
  margin: 0;
  color: rgba(3,3,33,0.75);
}
@media (max-width: 820px) {
  .activities { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .activities { grid-template-columns: 1fr; }
}

/* Livrables pills */
.pills {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}
.pills li {
  font-family: var(--ff-body);
  font-size: 14px;
  padding: 10px 16px;
  border: 1px solid var(--night);
  color: var(--night);
  background: transparent;
}
.pills--soft li {
  background: var(--pillar-soft, var(--lens-soft));
  border-color: transparent;
}

/* Démarche — 4 étapes en cercles */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 36px);
  margin-top: 24px;
}
.step { text-align: center; }
.step__circle {
  width: clamp(70px, 9vw, 110px);
  height: clamp(70px, 9vw, 110px);
  border-radius: 50%;
  background: var(--pillar-pop, var(--lens-pop));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.02em;
  color: var(--night);
  margin-bottom: 16px;
}
.step__title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.step__desc {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(3,3,33,0.7);
  margin: 0;
}
@media (max-width: 760px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- LOGOS — Quelques K ---------- */
.logos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.logo-mark {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.01em;
  padding: 22px 18px;
  text-align: center;
  border: 1px solid var(--rule);
  color: var(--night);
  background: #fff;
}
.theme-night .logo-mark {
  background: transparent;
  border-color: var(--rule-light);
  color: var(--off-white);
}
@media (max-width: 720px) {
  .logos { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- ÉQUIPE — carrousel (scroll natif) ---------- */
.team-carousel {
  position: relative;
  margin-top: clamp(32px, 4vw, 56px);
  width: 100%;
}
.team-carousel__track {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(16px, 2vw, 24px);
  padding: 4px 4px 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.team-carousel__track::-webkit-scrollbar { display: none; }
.team-card {
  flex: 0 0 clamp(240px, 28vw, 320px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.team-card__photo {
  aspect-ratio: 4 / 5;
  background: var(--card-soft, var(--frame-soft));
  border: 1px solid var(--card-pop, var(--rule));
  overflow: hidden;
  display: grid;
  place-items: center;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(3,3,33,0.35);
}
.team-card__photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.team-card__name {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.1;
  color: var(--night);
}
.team-card__quote {
  position: relative;
  display: inline-block;
  font-family: var(--ff-mono);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  color: var(--quote-halo, var(--echoes-pop));
}
.team-card__quote[data-halo="lens"]    { --quote-halo: var(--lens-pop); }
.team-card__quote[data-halo="frame"]   { --quote-halo: var(--frame-pop); }
.team-card__quote[data-halo="echoes"]  { --quote-halo: var(--echoes-pop); }
.team-card__quote[data-halo="impulse"] { --quote-halo: var(--impulse-pop); }
.team-card__quote[data-halo="signal"]  { --quote-halo: var(--signal-pop); }
.team-card[data-color="lens"]    { --card-soft: var(--lens-soft);    --card-pop: #B58A00; }
.team-card[data-color="frame"]   { --card-soft: var(--frame-soft);   --card-pop: #1E7BB8; }
.team-card[data-color="echoes"]  { --card-soft: var(--echoes-soft);  --card-pop: #C44BA0; }
.team-card[data-color="impulse"] { --card-soft: var(--impulse-soft); --card-pop: #4B5FC9; }
.team-card[data-color="signal"]  { --card-soft: var(--signal-soft);  --card-pop: #8B3FC9; }
.team-carousel__controls {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 14px;
}
.team-carousel__btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--day);
  font-family: var(--ff-mono);
  font-size: 18px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.team-carousel__btn:hover {
  background: var(--night);
  border-color: var(--night);
  color: var(--off-white);
  transform: translateY(-1px);
}
@media (max-width: 720px) {
  .team-card { flex-basis: 78vw; }
}

/* ---------- VISAGES (équipe) — accordéon (legacy, conservé) ---------- */
.faces-accordion {
  border-top: 1px solid var(--rule);
  margin-top: clamp(28px, 4vw, 44px);
}
.face-row {
  border-bottom: 1px solid var(--rule);
}
.face-row__btn {
  width: 100%;
  display: grid;
  grid-template-columns: 56px 1fr auto 36px;
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
  padding: clamp(20px, 2.4vw, 32px) 0;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: padding 220ms ease, background 220ms ease;
}
.face-row__btn:hover { background: rgba(3,3,33,0.025); }
.face-row__num {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: rgba(3,3,33,0.45);
}
.face-row__name {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(22px, 2.8vw, 38px);
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin: 0;
}
.face-row__name em {
  font-style: normal;
  font-weight: 400;
  color: rgba(3,3,33,0.55);
}
.face-row__meta {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(3,3,33,0.55);
  white-space: nowrap;
}
.face-row__chev {
  width: 28px; height: 28px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: transform 280ms cubic-bezier(.2,.7,.2,1), background 280ms ease, border-color 280ms ease;
}
.face-row__chev::before {
  content: "";
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px,-2px);
  transition: transform 280ms cubic-bezier(.2,.7,.2,1);
}
.face-row[aria-expanded="true"] .face-row__chev {
  transform: rotate(180deg);
  background: var(--night);
  border-color: var(--night);
  color: var(--off-white);
}
.face-row__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 420ms cubic-bezier(.2,.7,.2,1);
}
.face-row__panel > div {
  overflow: hidden;
  min-height: 0;
}
.face-row[aria-expanded="true"] .face-row__panel {
  grid-template-rows: 1fr;
}
.face-row__inner {
  display: grid;
  grid-template-columns: minmax(0, 360px) 1fr;
  gap: clamp(20px, 3vw, 48px);
  padding: 8px 0 clamp(32px, 4vw, 56px);
  align-items: start;
}
.face-row__photo {
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, var(--signal-soft), var(--frame-soft));
  border: 1px solid var(--rule);
  overflow: hidden;
  display: grid;
  place-items: center;
  color: rgba(3,3,33,0.35);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.face-row__photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.face-row__body { padding-top: 4px; }
.face-row__quote {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  color: var(--night);
}
.face-row__bio {
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  color: rgba(3,3,33,0.78);
  max-width: 56ch;
}
@media (max-width: 720px) {
  .face-row__btn { grid-template-columns: 36px 1fr 28px; padding: 18px 0; }
  .face-row__meta { display: none; }
  .face-row__inner { grid-template-columns: 1fr; }
  .face-row__photo { max-width: 280px; }
}

/* ---------- CITATION ---------- */
.quote {
  padding: clamp(60px, 10vh, 110px) var(--gutter);
}
.quote__inner { max-width: 940px; margin: 0 auto; }
.quote__glyph {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(80px, 10vw, 140px);
  line-height: 0.7;
  color: var(--signal-pop);
  display: block;
  margin-bottom: 24px;
}
.quote__body {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, 3vw, 36px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 28px;
  color: inherit;
}
.quote__attr {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.theme-night .quote__attr { color: rgba(244,241,234,0.55); }

/* ---------- TAGLINES géantes (manifeste / transitions) ---------- */
.bigline {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(40px, 7vw, 96px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  margin: 0;
}

/* ---------- ADN — 3 colonnes ---------- */
.adn {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 36px);
  margin-top: clamp(24px, 4vh, 40px);
}
.adn__item {
  border-top: 2px solid var(--signal-pop);
  padding-top: 22px;
}
.adn__item p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
}
@media (max-width: 760px) {
  .adn { grid-template-columns: 1fr; }
}

/* ---------- CONTACT ---------- */
.contact-mail {
  display: inline-block;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(28px, 5.5vw, 64px);
  letter-spacing: -0.025em;
  margin-top: 8px;
  transition: color .2s ease;
  word-break: break-word;
  line-height: 1.05;
  color: inherit;
}
.contact-mail:hover { color: var(--signal-pop); }
.contact-mail--small {
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-top: 16px;
}
.contact-k {
  position: absolute;
  bottom: 28px;
  right: clamp(20px, 5vw, 56px);
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(40px, 5vw, 64px);
  color: var(--signal-pop);
  letter-spacing: -0.04em;
  line-height: 1;
}

/* Formulaire brief */
.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(20px, 3vh, 32px);
}
.form__field {
  display: flex;
  flex-direction: column;
}
.form__field--full { grid-column: 1 / -1; }
.form__label {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.form__input,
.form__textarea {
  font-family: var(--ff-body);
  font-size: 16px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--rule);
  color: var(--night);
  width: 100%;
  border-radius: 0;
  transition: border-color .2s ease;
}
.form__input:focus,
.form__textarea:focus {
  border-color: var(--signal-pop);
  outline: none;
}
.form__textarea { min-height: 160px; resize: vertical; }
.form__submit {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--night);
  color: var(--off-white);
  border: none;
  cursor: pointer;
  border-radius: 999px;
  transition: background .2s ease, color .2s ease;
}
.form__submit:hover { background: var(--signal-pop); color: var(--night); }
.form__submit .cta-pill__k { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.35); }
.form__submit:hover .cta-pill__k { background: rgba(3,3,33,0.18); border-color: rgba(3,3,33,0.35); color: var(--night); }
@media (max-width: 640px) {
  .form { grid-template-columns: 1fr; }
}

/* CTA standard (boutons partout sauf hero) */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 999px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
  color: inherit;
}
.btn:hover { background: var(--signal-pop); color: var(--night); border-color: var(--signal-pop); }

/* Hover color variants (override .btn:hover) */
.btn--lens:hover     { background: var(--lens-pop);    border-color: var(--lens-pop);    color: var(--night); }
.btn--frame:hover    { background: var(--frame-pop);   border-color: var(--frame-pop);   color: var(--night); }
.btn--echoes:hover   { background: var(--echoes-pop);  border-color: var(--echoes-pop);  color: var(--night); }
.btn--impulse:hover  { background: var(--impulse-pop); border-color: var(--impulse-pop); color: var(--night); }
.btn--signal:hover   { background: var(--signal-pop);  border-color: var(--signal-pop);  color: var(--night); }

/* Auto-rotation: si une .btn-row contient plusieurs boutons sans classe couleur,
   chacun prend une couleur différente en hover (cycle de 5) */
.btn-row > .btn:nth-child(5n+1):not([class*="btn--"]):hover { background: var(--lens-pop);    border-color: var(--lens-pop); }
.btn-row > .btn:nth-child(5n+2):not([class*="btn--"]):hover { background: var(--frame-pop);   border-color: var(--frame-pop); }
.btn-row > .btn:nth-child(5n+3):not([class*="btn--"]):hover { background: var(--echoes-pop);  border-color: var(--echoes-pop); }
.btn-row > .btn:nth-child(5n+4):not([class*="btn--"]):hover { background: var(--impulse-pop); border-color: var(--impulse-pop); }
.btn-row > .btn:nth-child(5n+5):not([class*="btn--"]):hover { background: var(--signal-pop);  border-color: var(--signal-pop); }
.btn--solid {
  background: var(--night);
  color: var(--off-white);
  border-color: var(--night);
}
.btn--solid:hover { background: var(--signal-pop); border-color: var(--signal-pop); color: var(--night); }
.btn--solid.btn--lens:hover    { background: var(--lens-pop);    border-color: var(--lens-pop); }
.btn--solid.btn--frame:hover   { background: var(--frame-pop);   border-color: var(--frame-pop); }
.btn--solid.btn--echoes:hover  { background: var(--echoes-pop);  border-color: var(--echoes-pop); }
.btn--solid.btn--impulse:hover { background: var(--impulse-pop); border-color: var(--impulse-pop); }

/* CTA rose plein (charte echoes) — fond echoes-pop, texte night */
.btn--echoes-solid {
  background: var(--echoes-pop);
  color: var(--night);
  border-color: var(--echoes-pop);
}
.btn--echoes-solid:hover {
  background: var(--echoes-soft);
  border-color: var(--echoes-soft);
  color: var(--night);
  transform: translateY(-1px);
}
.btn-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: clamp(24px, 4vh, 36px);
}

/* ---------- FOOTER ---------- */
.footer {
  background: var(--night);
  color: var(--off-white);
  padding: clamp(40px, 6vh, 64px) var(--gutter) 28px;
  border-top: 1px solid var(--rule-light);
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: clamp(20px, 3vw, 40px);
  max-width: var(--maxw);
  margin: 0 auto 36px;
}
.footer__brand-block .footer__brand {
  display: inline-block;
  margin-bottom: 16px;
  line-height: 0;
}
.footer__brand-block .footer__brand img {
  height: 28px;
  width: auto;
  display: block;
}
.footer__brand-block p {
  font-size: 14px;
  margin: 0;
  max-width: 340px;
  color: rgba(244,241,234,0.7);
  line-height: 1.5;
}
.footer__col h4 {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244,241,234,0.5);
  margin: 0 0 14px;
}
.footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer__col a {
  font-size: 14px;
  color: rgba(244,241,234,0.85);
  transition: color .2s ease;
}
.footer__col a:hover { color: var(--signal-pop); }
.footer__bar {
  max-width: var(--maxw);
  margin: 0 auto;
  border-top: 1px solid var(--rule-light);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244,241,234,0.4);
  gap: 12px;
  flex-wrap: wrap;
}
@media (max-width: 820px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .footer__grid { grid-template-columns: 1fr; }
}

/* ---------- Utils ---------- */
.bg-lens-soft { background: var(--lens-soft) !important; color: var(--night) !important; }
.bg-frame-soft { background: var(--frame-soft) !important; color: var(--night) !important; }
.bg-echoes-soft { background: var(--echoes-soft) !important; color: var(--night) !important; }
.bg-impulse-soft { background: var(--impulse-soft) !important; color: var(--night) !important; }
.bg-signal-soft { background: var(--signal-soft) !important; color: var(--night) !important; }

.signal-callout {
  background: var(--signal-soft);
  padding: clamp(28px, 4vw, 44px);
  margin-top: clamp(24px, 4vh, 40px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-left: 4px solid var(--signal-pop);
}
.signal-callout h3 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 0;
}
.signal-callout p { margin: 0; font-size: 15px; line-height: 1.55; }

/* Tags pilier (pastilles) */
.pillar-tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.pillar-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--tag-soft, var(--rule));
  color: var(--night);
  border-radius: 999px;
}
.pillar-tag::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tag-pop, var(--signal-pop));
}

/* Filtres cas */
.filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0 36px;
}
.filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--night);
  cursor: pointer;
  border-radius: 999px;
  transition: background .2s ease, border-color .2s ease;
}
.filter:hover, .filter.is-active {
  background: var(--filter-soft, var(--signal-soft));
  border-color: var(--filter-soft, var(--signal-soft));
}
.filter::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--filter-pop, var(--signal-pop));
}

/* =========================================================
   HERO v2 — refonte asymétrique inspirée Sweet Punk
   ========================================================= */
.hero-v2 {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  background: var(--night);
  color: var(--off-white);
  isolation: isolate;
}

.hero-v2__blobs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.hero-v2__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.28;
  will-change: transform;
}
.hero-v2__blob--violet {
  width: 520px; height: 520px;
  top: 8%; left: 6%;
  background: #C77DFF;
  animation: heroV2FloatA 22s ease-in-out infinite alternate;
}
.hero-v2__blob--rose {
  width: 460px; height: 460px;
  top: 28%; right: 4%;
  background: #EE8FD8;
  animation: heroV2FloatB 26s ease-in-out infinite alternate;
}
.hero-v2__blob--cyan {
  width: 540px; height: 540px;
  bottom: 6%; left: 34%;
  background: #A3DDF9;
  opacity: 0.22;
  animation: heroV2FloatC 24s ease-in-out infinite alternate;
}
@keyframes heroV2FloatA {
  0%   { transform: translate(-20px, -10px) scale(0.95); }
  100% { transform: translate(30px, 25px) scale(1.05); }
}
@keyframes heroV2FloatB {
  0%   { transform: translate(20px, 15px) scale(1.02); }
  100% { transform: translate(-25px, -20px) scale(0.96); }
}
@keyframes heroV2FloatC {
  0%   { transform: translate(-15px, 20px) scale(0.97); }
  100% { transform: translate(25px, -25px) scale(1.04); }
}

/* ── Bouton Prendre Contact (top-right) ── */
.hero-v2__contact-btn {
  position: absolute;
  top: clamp(20px, 4vh, 36px);
  right: clamp(20px, 4vw, 48px);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px 22px;
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--night);
  background: var(--off-white);
  border-radius: 999px;
  border: 1px solid var(--off-white);
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.hero-v2__contact-btn:hover {
  background: var(--signal-pop);
  border-color: var(--signal-pop);
  color: var(--night);
  transform: translateY(-1px);
}
.hero-v2__contact-bracket {
  display: inline-block;
  margin-left: 2px;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
}

/* ── Tagline iridescente top-right ── */
.hero-v2__tagline-block {
  position: absolute;
  top: clamp(96px, 18vh, 180px);
  right: 5vw;
  z-index: 4;
  max-width: 480px;
  text-align: right;
}
.hero-v2__tagline {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(24px, 4vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0;
  text-transform: uppercase;
  background: linear-gradient(90deg, #C77DFF 0%, #8EA9FC 50%, #EE8FD8 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.hero-v2__griffe {
  margin: 14px 0 0;
  font-family: var(--ff-mono);
  font-style: italic;
  font-size: clamp(11px, 1.05vw, 13px);
  letter-spacing: 0.04em;
  color: rgba(244, 241, 234, 0.75);
}

/* ── Wordmark KROMATIC bottom-left ── */
.hero-v2__wordmark {
  position: absolute;
  left: 5vw;
  bottom: 12vh;
  z-index: 3;
  margin: 0;
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(80px, 18vw, 280px);
  line-height: 0.85;
  letter-spacing: -0.055em;
  color: var(--off-white);
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 4px 40px rgba(0,0,0,0.25);
}

/* ── Cartes typographiques flottantes ── */
.hero-v2__cards {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.hero-v2__card {
  position: absolute;
  display: inline-flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 28px 26px;
  min-width: 220px;
  max-width: 260px;
  background: var(--card-bg, var(--lens-soft));
  color: var(--night);
  border-radius: 8px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
  transform: rotate(var(--card-rot, 0deg));
  will-change: transform;
}
.hero-v2__card-eye {
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(3, 3, 33, 0.55);
}
.hero-v2__card-name {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(20px, 1.8vw, 26px);
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.hero-v2__card--lens   { top: 30%; left: 16%; animation: heroV2Float1 9s ease-in-out infinite; }
.hero-v2__card--frame  { top: 48%; left: 58%; animation: heroV2Float2 11s ease-in-out infinite; }
.hero-v2__card--echoes { top: 56%; left: 28%; animation: heroV2Float3 10s ease-in-out infinite; }
.hero-v2__card--impulse{ top: 42%; right: 6%; left: auto; animation: heroV2Float4 12s ease-in-out infinite; }

@keyframes heroV2Float1 {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50%      { transform: rotate(-2deg) translateY(-12px); }
}
@keyframes heroV2Float2 {
  0%, 100% { transform: rotate(4deg) translateY(0); }
  50%      { transform: rotate(5deg) translateY(-14px); }
}
@keyframes heroV2Float3 {
  0%, 100% { transform: rotate(-5deg) translateY(0); }
  50%      { transform: rotate(-4deg) translateY(-10px); }
}
@keyframes heroV2Float4 {
  0%, 100% { transform: rotate(5deg) translateY(0); }
  50%      { transform: rotate(4deg) translateY(-16px); }
}

/* ── Marquee expertises ── */
.hero-v2__marquee {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4vh;
  z-index: 5;
  overflow: hidden;
  height: 60px;
  display: flex;
  align-items: center;
  background: rgba(0,0,0,0.3);
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
.hero-v2__marquee-track {
  display: flex;
  align-items: center;
  gap: 28px;
  white-space: nowrap;
  animation: heroV2Marquee 40s linear infinite;
  will-change: transform;
}
.hero-v2__marquee:hover .hero-v2__marquee-track,
.hero-v2__marquee:focus-within .hero-v2__marquee-track {
  animation-play-state: paused;
}
.hero-v2__expertise {
  font-family: var(--ff-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(244, 241, 234, 0.85);
  text-decoration: none;
  padding: 4px 2px;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.hero-v2__expertise:hover,
.hero-v2__expertise:focus-visible {
  border-bottom-color: currentColor;
}
.hero-v2__expertise--lens:hover,    .hero-v2__expertise--lens:focus-visible    { color: var(--lens-pop); }
.hero-v2__expertise--frame:hover,   .hero-v2__expertise--frame:focus-visible   { color: var(--frame-pop); }
.hero-v2__expertise--impulse:hover, .hero-v2__expertise--impulse:focus-visible { color: var(--impulse-pop); }
.hero-v2__expertise--echoes:hover,  .hero-v2__expertise--echoes:focus-visible  { color: var(--echoes-pop); }
.hero-v2__expertise--signal:hover,  .hero-v2__expertise--signal:focus-visible  { color: var(--signal-pop); }
.hero-v2__sep {
  font-family: var(--ff-mono);
  font-size: 14px;
  color: rgba(244, 241, 234, 0.35);
  user-select: none;
}
@keyframes heroV2Marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Toggle Dark Mode (décoratif) ── */
.hero-v2__darkmode {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(3,3,33,0.7);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244,241,234,0.85);
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color .2s ease, color .2s ease;
}
.hero-v2__darkmode:hover {
  border-color: rgba(255,255,255,0.4);
  color: var(--off-white);
}
.hero-v2__darkmode-dot {
  font-size: 10px;
  line-height: 1;
  color: var(--signal-pop);
}

/* ── Mobile (≤ 768px) ── */
@media (max-width: 768px) {
  .hero-v2 {
    min-height: 85vh;
  }
  .hero-v2__contact-btn {
    top: auto;
    bottom: 18vh;
    right: 5vw;
    left: 5vw;
    justify-content: center;
    padding: 12px 18px;
    font-size: 11px;
  }
  .hero-v2__tagline-block {
    top: clamp(80px, 12vh, 130px);
    left: 5vw;
    right: 5vw;
    max-width: none;
    text-align: left;
  }
  .hero-v2__tagline {
    font-size: clamp(28px, 8vw, 44px);
  }
  .hero-v2__griffe {
    font-size: 11px;
  }
  .hero-v2__wordmark {
    left: 5vw;
    bottom: 26vh;
    font-size: clamp(56px, 18vw, 80px);
  }
  .hero-v2__card--echoes,
  .hero-v2__card--impulse {
    display: none;
  }
  .hero-v2__card {
    min-width: 140px;
    max-width: 170px;
    padding: 14px 16px 16px;
    gap: 6px;
  }
  .hero-v2__card-name {
    font-size: 16px;
  }
  .hero-v2__card--lens   { top: 44%; left: 4%; }
  .hero-v2__card--frame  { top: 34%; right: 4%; left: auto; }
  .hero-v2__card--impulse{ display: none; }
  .hero-v2__marquee {
    height: 48px;
    bottom: 2vh;
  }
  .hero-v2__expertise,
  .hero-v2__sep {
    font-size: 12px;
  }
  .hero-v2__darkmode {
    bottom: calc(48px + 2vh + 12px);
    right: 12px;
    padding: 8px 12px;
    font-size: 10px;
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .hero-v2__blob,
  .hero-v2__card,
  .hero-v2__marquee-track {
    animation: none !important;
  }
  .hero-v2__marquee {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .hero-v2__marquee-track {
    transform: none !important;
  }
}

/* ── Fix contraste nav au-dessus du hero v2 (override final) ── */
.nav.header--on-hero {
  background: #030321 !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}
.nav.header--on-hero .nav__brand {
  color: #F4F1EA !important;
  opacity: 1 !important;
  mix-blend-mode: normal;
}
.nav.header--on-hero .nav__links a,
.nav.header--on-hero .nav__link {
  color: #F4F1EA !important;
  opacity: 1 !important;
  mix-blend-mode: normal;
}
.nav.header--on-hero .nav__links a:hover {
  color: #FFFFFF !important;
  opacity: 1 !important;
}
.nav.header--on-hero .nav__links a.is-active {
  color: var(--signal-pop) !important;
}
.nav.header--on-hero .nav__drop > a::after {
  opacity: 0.85 !important;
}
.nav.header--on-hero .nav__toggle {
  color: #F4F1EA !important;
  border-color: rgba(244, 241, 234, 0.4) !important;
  opacity: 1 !important;
}

/* =========================================================
   HERO v3 — épuré, logo officiel + tagline + chips
   Remplace hero-v2 sur l'accueil
   ========================================================= */
.hero-v3 {
  position: relative;
  background: #030321;
  color: #F4F1EA;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: clamp(120px, 14vh, 180px) clamp(20px, 5vw, 80px) 0;
  isolation: isolate;
}

/* Chromatic glow blobs */
.hero-v3__blobs {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero-v3__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.32;
}
.hero-v3__blob--violet {
  width: 55vw; height: 55vw;
  top: -10vw; left: -10vw;
  background: radial-gradient(circle, #C77DFF 0%, transparent 70%);
}
.hero-v3__blob--rose {
  width: 45vw; height: 45vw;
  bottom: -15vw; right: -10vw;
  background: radial-gradient(circle, #EE8FD8 0%, transparent 70%);
  opacity: 0.28;
}
.hero-v3__blob--cyan {
  width: 50vw; height: 50vw;
  top: 30%; right: 20%;
  background: radial-gradient(circle, #8EA9FC 0%, transparent 70%);
  opacity: 0.22;
}

.hero-v3__inner {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 4vh, 48px);
}

.hero-v3__keywords {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: clamp(8px, 1.4vw, 18px);
  font-family: var(--ff-mono);
  font-size: clamp(11px, 1.5vw, 18px);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.78);
  width: clamp(340px, 62vw, 880px);
  margin: 0 auto -8px;
  white-space: nowrap;
  overflow: hidden;
}
@media (max-width: 720px) {
  .hero-v3__keywords {
    width: clamp(260px, 84vw, 360px);
    font-size: clamp(9px, 2vw, 11px);
    letter-spacing: 0.10em;
    gap: 6px;
  }
}
.hero-v3__keywords > span:not(.hero-v3__kw-sep) {
  white-space: nowrap;
}
.hero-v3__kw-sep {
  color: var(--signal-pop);
  font-size: 1.2em;
  line-height: 1;
}
.hero-v3__logo {
  display: block;
  width: clamp(340px, 62vw, 880px);
  height: auto;
  margin: 0 auto;
  color: #F4F1EA; /* drives currentColor in SVG */
  filter: drop-shadow(0 4px 36px rgba(199, 125, 255, 0.26));
}
.hero-v3__logo--k {
  width: clamp(180px, 22vw, 280px);
  /* SVG K monochrome — forcé en blanc */
  filter: brightness(0) invert(1) drop-shadow(0 4px 36px rgba(199, 125, 255, 0.35));
}

.hero-v3__tagline {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 6vw, 84px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 18ch;
  color: #F4F1EA;
  position: relative;
  isolation: isolate;
  text-shadow:
    0 0 24px rgba(244, 241, 234, 0.22),
    0 0 60px rgba(244, 241, 234, 0.10);
}
.hero-v3__tagline::before {
  content: "";
  position: absolute;
  inset: -30% -15%;
  z-index: -1;
  background:
    radial-gradient(28% 38% at 15% 30%, rgba(255, 217, 107, 0.55), transparent 70%),
    radial-gradient(30% 38% at 38% 70%, rgba(163, 221, 249, 0.55), transparent 70%),
    radial-gradient(28% 38% at 60% 30%, rgba(238, 143, 216, 0.55), transparent 70%),
    radial-gradient(30% 40% at 80% 70%, rgba(142, 169, 252, 0.55), transparent 70%),
    radial-gradient(28% 38% at 95% 30%, rgba(199, 125, 255, 0.55), transparent 70%);
  filter: blur(36px);
  opacity: 0.85;
  pointer-events: none;
  animation: heroHaloDrift 18s ease-in-out infinite alternate;
}
@keyframes heroHaloDrift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(2%, -1.5%) scale(1.04); }
  100% { transform: translate(-2%, 1.5%) scale(0.98); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-v3__tagline::before { animation: none; }
}

.hero-v3__lede {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 500;
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.5;
  color: rgba(244, 241, 234, 0.9);
  max-width: 64ch;
  margin: 0;
}

/* ====== Bloc SIGNAL — étude disponible (home, fond off-white) ====== */
.signal-promo {
  background: var(--off-white);
  color: var(--night);
  padding: clamp(64px, 9vw, 120px) 24px;
  position: relative;
  overflow: hidden;
}
.signal-promo::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 80% 30%, rgba(199,125,255,0.10) 0%, transparent 65%),
    radial-gradient(ellipse 50% 60% at 10% 90%, rgba(142,169,252,0.06) 0%, transparent 65%);
  pointer-events: none;
}
.signal-promo__inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}
@media (max-width: 900px) {
  .signal-promo__inner { grid-template-columns: 1fr; gap: 44px; }
  .signal-promo__visual { order: -1; max-width: 340px; margin: 0 auto; width: 100%; }
}
.signal-promo__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(199,125,255,0.14);
  color: var(--signal-pop);
  border: 1px solid rgba(199,125,255,0.45);
  margin-bottom: 24px;
}
.signal-promo__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal-pop);
  box-shadow: 0 0 12px var(--signal-pop);
}
.signal-promo__h2 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  color: var(--night);
}
.signal-promo__h2 em {
  font-style: normal;
  color: var(--signal-pop);
}
.signal-promo__dot { color: var(--signal-pop); margin: 0 4px; }
.signal-promo__lede {
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.55;
  color: rgba(3,3,33,0.72);
  max-width: 56ch;
  margin: 0 0 32px;
}
.signal-promo__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
}
.signal-promo__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  background: var(--signal-pop);
  color: var(--night);
  border-radius: 999px;
  font-family: var(--ff-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.signal-promo__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -12px rgba(199,125,255,0.55);
}
.signal-promo__cta-arrow {
  display: inline-block;
  transition: transform 0.22s ease;
}
.signal-promo__cta:hover .signal-promo__cta-arrow {
  transform: translateX(4px);
}
.signal-promo__meta {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(3,3,33,0.55);
}

/* Cover visuelle du bloc — image réelle */
.signal-promo__cover-link {
  display: block;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(3,3,33,0.10);
  box-shadow: 0 30px 80px -30px rgba(199,125,255,0.45);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.signal-promo__cover-link:hover {
  transform: translateY(-4px);
  box-shadow: 0 40px 90px -30px rgba(199,125,255,0.65);
}
.signal-promo__cover-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 902/1276;
  object-fit: cover;
}

/* Lien SIGNAL au-dessus des CTAs hero */
.hero-v3__signal-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px 10px 12px;
  margin: 12px auto 28px;
  background: rgba(199,125,255,0.10);
  border: 1px solid rgba(199,125,255,0.40);
  border-radius: 999px;
  font-family: var(--ff-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--off-white);
  text-decoration: none;
  transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
.hero-v3__signal-link:hover {
  background: rgba(199,125,255,0.20);
  border-color: var(--signal-pop);
  transform: translateY(-1px);
  box-shadow: 0 10px 28px -10px rgba(199,125,255,0.55);
}
.hero-v3__signal-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--signal-pop);
  color: var(--night);
  border-radius: 999px;
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hero-v3__signal-text {
  white-space: nowrap;
}
.hero-v3__signal-arrow {
  display: inline-block;
  transition: transform 0.22s ease;
  color: var(--signal-pop);
  font-weight: 600;
}
.hero-v3__signal-link:hover .hero-v3__signal-arrow {
  transform: translateX(4px);
}
@media (max-width: 560px) {
  .hero-v3__signal-link {
    flex-wrap: wrap;
    justify-content: center;
    padding: 10px 16px;
  }
  .hero-v3__signal-text {
    white-space: normal;
    text-align: center;
  }
}

/* 3 CTA hero — L'agence / Nos offres / Se rencontrer */
.hero-v3__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}
.hero-v3__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 13px 22px;
  border-radius: 999px;
  border: 1px solid rgba(244, 241, 234, 0.28);
  background: rgba(255, 255, 255, 0.04);
  color: #F4F1EA;
  text-decoration: none;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero-v3__cta:hover,
.hero-v3__cta:focus-visible {
  border-color: rgba(244, 241, 234, 0.6);
  background: rgba(255, 255, 255, 0.10);
  transform: translateY(-2px);
  outline: none;
}
/* Hover coloré par CTA */
.hero-v3__cta[data-color="lens"]:hover,
.hero-v3__cta[data-color="lens"]:focus-visible {
  background: var(--lens-pop);
  border-color: var(--lens-pop);
  color: var(--night);
  box-shadow: 0 8px 32px rgba(255, 217, 107, 0.35);
}
.hero-v3__cta[data-color="echoes"]:hover,
.hero-v3__cta[data-color="echoes"]:focus-visible {
  background: var(--echoes-pop);
  border-color: var(--echoes-pop);
  color: var(--night);
  box-shadow: 0 8px 32px rgba(238, 143, 216, 0.35);
}
.hero-v3__cta[data-color="signal"]:hover,
.hero-v3__cta[data-color="signal"]:focus-visible {
  background: var(--signal-pop);
  border-color: var(--signal-pop);
  color: var(--night);
  box-shadow: 0 8px 32px rgba(199, 125, 255, 0.35);
}
.hero-v3__cta:hover .hero-v3__cta-arrow,
.hero-v3__cta:focus-visible .hero-v3__cta-arrow {
  opacity: 1;
}
.hero-v3__cta:hover .hero-v3__cta-arrow {
  transform: translateY(3px);
}
.hero-v3__cta-arrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  opacity: 0.7;
  transition: transform 0.3s ease;
}

/* Marquee défilant des 6 expertises */
.hero-v3__marquee {
  position: relative;
  z-index: 2;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: clamp(40px, 6vh, 72px);
  overflow: hidden;
  padding: 28px 0;
  border-top: 1px solid rgba(244, 241, 234, 0.10);
  border-bottom: 1px solid rgba(244, 241, 234, 0.10);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.hero-v3__marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  white-space: nowrap;
  animation: heroV3Marquee 38s linear infinite;
  padding-left: 28px;
  will-change: transform;
}
.hero-v3__marquee:hover .hero-v3__marquee-track,
.hero-v3__marquee:focus-within .hero-v3__marquee-track {
  animation-play-state: paused;
}
@keyframes heroV3Marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.hero-v3__exp {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 900;
  font-size: clamp(15px, 1.6vw, 20px);
  letter-spacing: -0.01em;
  line-height: 1.5;
  color: var(--exp-c, #F4F1EA);
  text-decoration: none;
  transition: background 0.3s ease, -webkit-text-fill-color 0.3s ease;
  text-transform: none;
  -webkit-text-fill-color: currentColor;
}
.hero-v3__exp:hover,
.hero-v3__exp:focus-visible {
  background: linear-gradient(90deg, #C77DFF 0%, #8EA9FC 50%, #EE8FD8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  outline: none;
}
.hero-v3__exp-sep {
  display: inline-block;
  font-size: 7px;
  color: rgba(244, 241, 234, 0.4);
  transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
  .hero-v3__marquee-track { animation: none; }
}

/* Mobile */
@media (max-width: 720px) {
  .hero-v3 {
    padding: 110px 20px 0;
    min-height: 92vh;
  }
  .hero-v3__inner { gap: 22px; }
  .hero-v3__logo { width: clamp(260px, 84vw, 360px); }
  .hero-v3__logo--k { width: clamp(140px, 44vw, 200px); }
  .hero-v3__tagline { font-size: clamp(30px, 8.5vw, 42px); }
  .hero-v3__lede { font-size: 17px; line-height: 1.5; }
  .hero-v3__marquee { margin-top: 40px; padding: 22px 0; }
  .hero-v3__exp { font-size: clamp(14px, 4vw, 16px); }
  .hero-v3__marquee-track { gap: 20px; padding-left: 20px; }
}

/* Séparateur léger entre les sections de la home ---------------------- */
body[data-page="accueil"] .section + .section,
body[data-page="accueil"] .hero-v3 + .section {
  position: relative;
}
body[data-page="accueil"] .section + .section::before,
body[data-page="accueil"] .hero-v3 + .section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, 72%);
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(3, 3, 33, 0.18) 30%,
    rgba(3, 3, 33, 0.28) 50%,
    rgba(3, 3, 33, 0.18) 70%,
    transparent 100%);
  pointer-events: none;
}
/* Sur fond nuit, séparateur clair */
body[data-page="accueil"] .section.theme-night + .section::before,
body[data-page="accueil"] .section + .section.theme-night::before {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(244, 241, 234, 0.22) 30%,
    rgba(244, 241, 234, 0.34) 50%,
    rgba(244, 241, 234, 0.22) 70%,
    transparent 100%);
}

/* Halo coloré sur tous les titres ------------------------------------- */
/* Application automatique : tout .display et .page-hero__title reçoivent
   un halo. La couleur dépend du data-halo, sinon de l'eyebrow voisin
   (data-pill), sinon par défaut lens (jaune). */
.display,
.page-hero__title {
  position: relative;
  isolation: isolate;
  --halo-c: rgba(255, 217, 107, 0.50);
  --halo-c2: rgba(255, 240, 184, 0.18);
}
.display::before,
.page-hero__title::before {
  content: "";
  position: absolute;
  inset: -22% -10%;
  z-index: -1;
  background: radial-gradient(60% 70% at 50% 50%, var(--halo-c), var(--halo-c2) 55%, transparent 75%);
  filter: blur(32px);
  pointer-events: none;
}
/* Héritage par section : si une eyebrow[data-pill] existe dans le même conteneur */
.section__inner:has(.eyebrow[data-pill="lens"]) .display,
.page-hero__inner:has(.page-hero__eyebrow) .page-hero__title { /* fallback page-hero générique */ }
.section__inner:has(.eyebrow[data-pill="lens"])    .display { --halo-c: rgba(255, 217, 107, 0.55); --halo-c2: rgba(255, 240, 184, 0.20); }
.section__inner:has(.eyebrow[data-pill="frame"])   .display { --halo-c: rgba(163, 221, 249, 0.55); --halo-c2: rgba(214, 241, 255, 0.20); }
.section__inner:has(.eyebrow[data-pill="echoes"])  .display { --halo-c: rgba(238, 143, 216, 0.55); --halo-c2: rgba(246, 205, 234, 0.20); }
.section__inner:has(.eyebrow[data-pill="impulse"]) .display { --halo-c: rgba(142, 169, 252, 0.55); --halo-c2: rgba(201, 212, 255, 0.22); }
.section__inner:has(.eyebrow[data-pill="signal"])  .display { --halo-c: rgba(199, 125, 255, 0.55); --halo-c2: rgba(230, 216, 255, 0.20); }
/* Hero pages : couleur depuis data-pill sur eyebrow ou data-halo sur title */
.page-hero__inner:has(.eyebrow[data-pill="lens"])    .page-hero__title { --halo-c: rgba(255, 217, 107, 0.55); --halo-c2: rgba(255, 240, 184, 0.20); }
.page-hero__inner:has(.eyebrow[data-pill="frame"])   .page-hero__title { --halo-c: rgba(163, 221, 249, 0.55); --halo-c2: rgba(214, 241, 255, 0.20); }
.page-hero__inner:has(.eyebrow[data-pill="echoes"])  .page-hero__title { --halo-c: rgba(238, 143, 216, 0.55); --halo-c2: rgba(246, 205, 234, 0.20); }
.page-hero__inner:has(.eyebrow[data-pill="impulse"]) .page-hero__title { --halo-c: rgba(142, 169, 252, 0.55); --halo-c2: rgba(201, 212, 255, 0.22); }
.page-hero__inner:has(.eyebrow[data-pill="signal"])  .page-hero__title { --halo-c: rgba(199, 125, 255, 0.55); --halo-c2: rgba(230, 216, 255, 0.20); }

.display--halo {
  position: relative;
  isolation: isolate;
}
.display--halo::before {
  content: "";
  position: absolute;
  inset: -22% -10%;
  z-index: -1;
  background: radial-gradient(60% 70% at 50% 50%, var(--halo-c, rgba(255, 217, 107, 0.55)), var(--halo-c2, rgba(255, 217, 107, 0.18)) 55%, transparent 75%);
  filter: blur(32px);
  pointer-events: none;
}
[data-halo="lens"]    { --halo-c: rgba(255, 217, 107, 0.55); --halo-c2: rgba(255, 240, 184, 0.20); }
[data-halo="frame"]   { --halo-c: rgba(163, 221, 249, 0.55); --halo-c2: rgba(214, 241, 255, 0.20); }
[data-halo="echoes"]  { --halo-c: rgba(238, 143, 216, 0.55); --halo-c2: rgba(246, 205, 234, 0.20); }
[data-halo="impulse"] { --halo-c: rgba(142, 169, 252, 0.55); --halo-c2: rgba(201, 212, 255, 0.22); }
[data-halo="signal"]  { --halo-c: rgba(199, 125, 255, 0.55); --halo-c2: rgba(230, 216, 255, 0.20); }
[data-halo="multi"]   { --halo-c: rgba(238, 143, 216, 0.45); --halo-c2: rgba(163, 221, 249, 0.30); }
[data-halo="multi"]::before {
  background:
    radial-gradient(38% 60% at 18% 35%, rgba(255,217,107,0.45) 0%, transparent 60%),
    radial-gradient(38% 60% at 50% 50%, rgba(238,143,216,0.45) 0%, transparent 60%),
    radial-gradient(38% 60% at 82% 35%, rgba(142,169,252,0.45) 0%, transparent 60%),
    radial-gradient(60% 80% at 50% 75%, rgba(199,125,255,0.30) 0%, transparent 70%) !important;
}

/* Mission — accent couleurs sur fond / forme / performance */
.mission-headline {
  position: relative;
  display: inline-block;
  isolation: isolate;
}
.mission-headline::before {
  content: "";
  position: absolute;
  inset: -22% -10%;
  z-index: -1;
  background:
    radial-gradient(60% 70% at 50% 50%, rgba(255, 217, 107, 0.60), rgba(255, 217, 107, 0.22) 55%, transparent 75%);
  filter: blur(32px);
  pointer-events: none;
}

/* Approche — claim final */
.approche-claim {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.2vh, 16px);
}
.approche-claim__line {
  display: block;
}
.approche-claim__line { color: var(--night); }
.claim-kw {
  font-style: normal;
  font-weight: inherit;
}
.claim-kw--lens { color: var(--lens-pop); }
.claim-kw--frame { color: var(--frame-pop); }
.claim-kw--echoes { color: var(--echoes-pop); }
.claim-kw--impulse { color: var(--impulse-pop); }
.claim-kw--signal { color: var(--signal-pop); }

/* Home — claim isolé entre Mission et Piliers */
.home-claim {
  margin: 0 auto;
  max-width: 22ch;
  color: var(--night);
  text-wrap: balance;
}
.home-claim .claim-kw { font-style: normal; font-weight: inherit; }

/* Bandeau marquee expertises (sous hero) */
.expertise-marquee {
  position: relative;
  width: 100%;
  background: var(--night);
  color: var(--off-white);
  padding: clamp(22px, 3.4vh, 36px) 0;
  overflow: hidden;
  border-top: 1px solid rgba(244, 241, 234, 0.08);
  border-bottom: 1px solid rgba(244, 241, 234, 0.08);
}
.expertise-marquee::before,
.expertise-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(40px, 8vw, 120px);
  pointer-events: none;
  z-index: 2;
}
.expertise-marquee::before {
  left: 0;
  background: linear-gradient(to right, var(--night), transparent);
}
.expertise-marquee::after {
  right: 0;
  background: linear-gradient(to left, var(--night), transparent);
}
.expertise-marquee__track {
  display: flex;
  width: max-content;
  animation: em-scroll 38s linear infinite;
  will-change: transform;
}
.expertise-marquee:hover .expertise-marquee__track {
  animation-play-state: paused;
}
.expertise-marquee__row {
  display: flex;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  padding-right: clamp(28px, 4vw, 56px);
  flex-shrink: 0;
}
.em-word {
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: clamp(9px, 0.72vw, 11px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--off-white);
  white-space: nowrap;
}
.em-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  flex-shrink: 0;
}
.em-dot[data-pole="lens"]    { background: var(--lens-pop); }
.em-dot[data-pole="frame"]   { background: var(--frame-pop); }
.em-dot[data-pole="echoes"]  { background: var(--echoes-pop); }
.em-dot[data-pole="impulse"] { background: var(--impulse-pop); }
.em-dot[data-pole="signal"]  { background: var(--signal-pop); }
@keyframes em-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .expertise-marquee__track { animation: none; }
}
@media (max-width: 720px) {
  .expertise-marquee { padding: 12px 0; }
  .em-word { font-size: 9px; letter-spacing: 0.16em; }
  .expertise-marquee__row { gap: 18px; padding-right: 18px; }
}

/* Marquee intégré dans le hero — transparent, plus compact */
.expertise-marquee--in-hero {
  background: transparent;
  border-top: none;
  border-bottom: none;
  padding: clamp(10px, 1.4vh, 16px) 0;
  margin: clamp(14px, 2vh, 22px) 0 clamp(6px, 1vh, 12px);
}
.expertise-marquee--in-hero::before {
  background: linear-gradient(to right, var(--night), transparent);
}
.expertise-marquee--in-hero::after {
  background: linear-gradient(to left, var(--night), transparent);
}
.expertise-marquee--in-hero .em-word {
  font-size: clamp(9px, 0.7vw, 11px);
  letter-spacing: 0.2em;
  opacity: 0.92;
}
.expertise-marquee--in-hero .em-dot {
  width: 3px;
  height: 3px;
}
.expertise-marquee--in-hero .expertise-marquee__row {
  gap: clamp(18px, 2.4vw, 32px);
  padding-right: clamp(18px, 2.4vw, 32px);
}

/* Hero CTA row — bouton sous le texte d'intro */
.page-hero__cta-row {
  margin-top: clamp(24px, 4vh, 36px);
  display: flex;
}

/* Mission — typographie et rythme du bloc */
.mission-lede {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--night);
  max-width: 880px;
  margin: clamp(20px, 3vh, 32px) 0 0;
}
.mission-prose {
  margin-top: clamp(28px, 4vh, 44px);
  max-width: 880px;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.4vh, 24px);
}
.mission-prose p {
  font-family: var(--ff-body);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.55;
  margin: 0;
  color: rgba(3, 3, 33, 0.85);
}

/* Lien mission — pilule fine élégante "Découvrir notre approche" */
.mission-link-row {
  margin-top: clamp(28px, 4vh, 44px);
  display: flex;
}
.mission-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px 12px 24px;
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--night);
  background: var(--echoes-pop);
  border: 1px solid var(--echoes-pop);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, padding 0.3s ease;
}
.mission-link::after {
  content: "→";
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: 14px;
  transition: transform 0.3s ease;
}
.mission-link:hover {
  background: var(--echoes-soft);
  border-color: var(--echoes-soft);
  padding-right: 26px;
}
.mission-link:hover::after {
  transform: translateX(4px);
}

/* Variante bouton fond blanc — home : Découvrir notre approche / Toutes nos offres */
.mission-link--solid-light,
.mission-link--solid-light:link,
.mission-link--solid-light:visited,
.mission-link--solid-light:hover,
.mission-link--solid-light:active {
  text-decoration: none;
  text-underline-offset: 0;
}
.mission-link--solid-light {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--night);
}
.mission-link--solid-light:hover {
  background: var(--off-white);
  border-color: var(--off-white);
}

/* Variante pilule — forme arrondie type eyebrow/badge */
.mission-link--pill,
.mission-link--pill:link,
.mission-link--pill:visited,
.mission-link--pill:hover,
.mission-link--pill:active {
  text-decoration: none;
  text-underline-offset: 0;
}
.mission-link--pill {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-family: var(--ff-mono);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(3,3,33,0.12);
  color: var(--night);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.mission-link--pill::after { content: none; }
.mission-link--pill:hover {
  background: var(--night);
  border-color: var(--night);
  color: var(--off-white);
}
.mission-headline .mission-ideas { color: #EE8FD8; }
.mission-headline .mission-results { color: #4F66D9; }
.mission-headline .mission-fond,
.mission-headline .mission-forme,
.mission-headline .mission-perf { color: inherit; }

/* ---------- VALUES STACK (page équipe — NUANCE / RELATIONS / FRANCHISE) ---------- */
.values-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vh, 22px);
  margin-top: clamp(28px, 4vh, 44px);
  max-width: 980px;
}
.value-row {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  align-items: start;
  gap: clamp(20px, 3vw, 36px);
  padding: clamp(22px, 3vh, 32px) clamp(22px, 3vw, 36px);
  border: 1px solid rgba(3, 3, 33, 0.10);
  border-radius: 18px;
  background: var(--vr-pop, var(--off-white));
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.value-row[data-pill="lens"] { --vr-soft: var(--lens-soft); --vr-pop: var(--lens-pop); }
.value-row[data-pill="frame"] { --vr-soft: var(--frame-soft); --vr-pop: var(--frame-pop); }
.value-row[data-pill="echoes"] { --vr-soft: var(--echoes-soft); --vr-pop: var(--echoes-pop); }
.value-row[data-pill="impulse"] { --vr-soft: var(--impulse-soft); --vr-pop: var(--impulse-pop); }
.value-row[data-pill="signal"] { --vr-soft: var(--signal-soft); --vr-pop: var(--signal-pop); }
.value-row:hover {
  border-color: rgba(3, 3, 33, 0.22);
  transform: translateY(-2px);
}
.value-row__label {
  font-family: var(--ff-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--night);
  padding: 6px 14px;
  background: var(--day);
  border-radius: 999px;
  width: max-content;
  align-self: start;
}
.value-row__text {
  font-family: var(--ff-body);
  font-size: 17px;
  line-height: 1.65;
  color: rgba(3, 3, 33, 0.85);
  margin: 0;
}
.values-stack__next {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  align-self: center;
  margin-top: clamp(8px, 1.5vh, 18px);
  padding: 14px 28px;
  font-family: var(--ff-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--night);
  background: var(--off-white);
  border: 1px solid rgba(3, 3, 33, 0.12);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.values-stack__next:hover {
  background: var(--impulse-soft);
  border-color: rgba(3, 3, 33, 0.28);
  transform: translateY(2px);
}
.values-stack__next-arrow {
  display: inline-block;
  font-size: 16px;
  transition: transform 0.3s ease;
}
.values-stack__next:hover .values-stack__next-arrow {
  transform: translateY(4px);
}
@media (max-width: 720px) {
  .value-row {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 22px;
  }
}

/* Bloc "Rejoindre Kromatic" — CTA + ligne CV */
.join-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-top: clamp(36px, 5vh, 56px);
}
.join-cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 16px 32px;
  font-family: var(--ff-mono);
  font-size: 13px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--night);
  background: var(--impulse-soft);
  border: 1px solid rgba(3, 3, 33, 0.12);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.join-cta:hover {
  background: var(--impulse-pop);
  border-color: rgba(3, 3, 33, 0.28);
  transform: translateY(-1px);
}
.join-cta__arrow {
  font-size: 16px;
  transition: transform 0.3s ease;
}
.join-cta:hover .join-cta__arrow {
  transform: translateY(3px);
}
.join-block__line {
  font-family: var(--ff-body);
  font-size: 17px;
  line-height: 1.65;
  color: rgba(3, 3, 33, 0.85);
  margin: 0;
  text-align: center;
}

/* Lien sous grille de cas liés (pages piliers) */
/* ---------- CASES STACK (page /cas/) — empilés, média petit à gauche ---------- */
.cases-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 8px 0 0;
}
.case-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 28px;
  align-items: center;
  padding: 22px 26px;
  background: #fff;
  border: 1px solid rgba(3,3,33,0.10);
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.case-row:hover {
  transform: translateY(-2px);
  border-color: rgba(3,3,33,0.22);
  box-shadow: 0 18px 40px -28px rgba(3,3,33,0.28);
}
.case-row__media {
  width: 140px;
  height: 96px;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
}
.case-row__body { display: flex; flex-direction: column; gap: 6px; }
.case-row__eye {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(3,3,33,0.55);
  margin-bottom: 2px;
}
.case-row__title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(20px, 2.2vw, 24px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--night);
}
.case-row__excerpt {
  font-family: var(--ff-body);
  font-size: 15px;
  line-height: 1.55;
  color: rgba(3,3,33,0.72);
  margin: 4px 0 0;
  max-width: 68ch;
}
.case-row__more {
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.10em;
  color: var(--night);
  margin-top: 8px;
  transition: padding-left .25s ease;
}
.case-row:hover .case-row__more { padding-left: 4px; }
@media (max-width: 720px) {
  .case-row { grid-template-columns: 88px 1fr; gap: 18px; padding: 18px 18px; }
  .case-row__media { width: 88px; height: 88px; }
  .case-row__title { font-size: 18px; }
}

.cases-more {
  margin-top: clamp(20px, 3vh, 32px);
}
.cases-more__link {
  font-family: var(--ff-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--night);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: rgba(3,3,33,0.45);
  transition: text-decoration-color 0.25s ease;
}
.cases-more__link:hover {
  text-decoration-color: var(--night);
}

/* ---------- TRIBUNE éditoriale (page pilier SIGNAL) ---------- */
.tribune {
  background: #FBFBFF;
  border-top: 1px solid rgba(199, 125, 255, 0.18);
  border-bottom: 1px solid rgba(199, 125, 255, 0.18);
}
.tribune__inner {
  max-width: 760px;
  margin: 0 auto;
}
.tribune__title {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 4.4vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--night);
  margin: 14px 0 24px 0;
  text-wrap: balance;
}
.tribune__lede {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.55;
  font-weight: 500;
  color: var(--night);
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(3, 3, 33, 0.12);
}
.tribune__body p {
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(3, 3, 33, 0.86);
  margin: 0 0 22px 0;
}
.tribune__body em {
  font-style: italic;
  color: var(--night);
}
.tribune__emph {
  font-family: 'Instrument Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: clamp(18px, 1.8vw, 22px) !important;
  line-height: 1.45 !important;
  color: var(--night) !important;
  border-left: 3px solid var(--signal-pop);
  padding-left: 18px;
  margin: 28px 0 28px 0 !important;
}
.tribune__list {
  list-style: none;
  margin: 4px 0 32px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tribune__list li {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(3, 3, 33, 0.86);
  padding: 12px 16px;
  background: var(--signal-soft);
  border-radius: 6px;
  border-left: 3px solid var(--signal-pop);
}
.tribune__h3 {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--night);
  margin: 40px 0 18px 0;
  text-wrap: balance;
}
.tribune__pullquote {
  position: relative;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(22px, 2.8vw, 32px);
  line-height: 1.3;
  color: var(--night);
  margin: 36px 0;
  padding: 28px 0 28px 0;
  border-top: 1px solid var(--signal-pop);
  border-bottom: 1px solid var(--signal-pop);
  text-wrap: balance;
}
.tribune__pullquote-glyph {
  display: block;
  font-family: 'Instrument Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 48px;
  line-height: 0.8;
  color: var(--signal-pop);
  margin-bottom: 10px;
}
.tribune__signature {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(3, 3, 33, 0.12);
}
.tribune__signature-name {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--night);
}
.tribune__signature-role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(3, 3, 33, 0.6);
}
@media (max-width: 720px) {
  .tribune__title { font-size: 28px; }
  .tribune__lede { font-size: 17px; }
  .tribune__pullquote { font-size: 22px; padding: 22px 0; }
}

/* ===== CAS — Motion vidéo (taille contrainte) ===== */
.case-motion {
  margin-top: 24px;
}
.case-motion__player {
  max-width: 320px;
  margin: 0 auto;
  background: #030321;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  box-shadow: 0 12px 40px rgba(3, 3, 33, 0.18);
}
.case-motion--small .case-motion__player {
  max-width: 260px;
}
.case-motion__video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.case-motion__caption {
  margin-top: 14px;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(3, 3, 33, 0.55);
}
.case-motion__links {
  margin-top: 18px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.btn--social {
  font-size: 13px;
  padding: 10px 18px;
}

/* ===== CAS — Signature de marque ===== */
.case-signature {
  margin-top: 22px;
  padding: 22px 26px;
  border-left: 3px solid var(--frame-pop, #4F8FBF);
  background: rgba(163, 221, 249, 0.12);
  border-radius: 4px;
}
.case-signature__line {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  color: #030321;
}
.case-signature__sub {
  margin-top: 6px;
  font-family: 'DM Sans', sans-serif;
  font-style: italic;
  font-size: 15px;
  color: rgba(3, 3, 33, 0.7);
}

@media (max-width: 720px) {
  .case-motion__player { max-width: 240px; }
  .case-motion--small .case-motion__player { max-width: 220px; }
  .case-signature__line { font-size: 19px; }
}

/* ===== MISSION — tagline de clôture ===== */
.mission-tagline {
  margin-top: clamp(28px, 4vh, 44px);
  font-family: 'Instrument Sans', sans-serif;
  font-style: normal;
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #030321;
  line-height: 1.15;
  max-width: 900px;
}

/* ===== CAS — Intro split (motion + Contexte/Enjeu/Approche) ===== */
.case-intro-split {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 56px;
  align-items: start;
  max-width: 1080px;
  margin: 0 auto;
}
.case-intro-split__media {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.case-intro-split__media .case-motion__player {
  width: 280px;
  max-width: 100%;
  margin: 0;
  aspect-ratio: 9 / 16;
  background: #030321;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(3, 3, 33, 0.22);
}
.case-intro-split__media .case-motion__caption {
  text-align: left;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(3, 3, 33, 0.6);
}
.case-intro-split__media .case-motion__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  margin: 0;
}
.case-intro-split__media .btn--social {
  font-size: 12px;
  padding: 8px 14px;
}
.case-intro-split__body {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.case-intro-block .eyebrow {
  margin-bottom: 14px;
}
.case-intro-block p {
  font-size: 17px;
  line-height: 1.65;
  color: rgba(3, 3, 33, 0.85);
  margin: 0 0 14px;
}
.case-intro-block p:last-child {
  margin-bottom: 0;
}
.case-intro-block .case-signature {
  margin-top: 18px;
}

@media (max-width: 860px) {
  .case-intro-split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .case-intro-split__media {
    position: static;
    align-items: flex-start;
  }
  .case-intro-split__media .case-motion__player {
    width: 220px;
  }
  .case-intro-split__media .case-motion__links {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .case-intro-split__body {
    gap: 28px;
  }
}

/* ===== CAS — Motion split (legacy, conservé) ===== */
.case-motion-split {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 36px;
  align-items: start;
}
.case-motion-split__media .case-motion__player {
  max-width: 220px;
  margin: 0;
  aspect-ratio: 9 / 16;
  background: #030321;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(3, 3, 33, 0.18);
}
.case-motion-split__body h2 {
  font-family: 'Instrument Sans', sans-serif;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #030321;
  margin-bottom: 14px;
}
.case-motion-split__body p {
  color: rgba(3, 3, 33, 0.78);
  margin-bottom: 18px;
}

@media (max-width: 720px) {
  .case-motion-split {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .case-motion-split__media .case-motion__player {
    max-width: 200px;
  }
  .case-motion-split__body .case-motion__links {
    justify-content: flex-start !important;
  }
}

/* ===== MISSION — lede & body resserrés ===== */
.mission-lede {
  margin-top: clamp(18px, 2.4vh, 26px);
  max-width: 760px;
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.55;
  color: rgba(3, 3, 33, 0.85);
}
.mission-body {
  margin-top: 14px;
  max-width: 760px;
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(14px, 1.35vw, 15.5px);
  line-height: 1.6;
  color: rgba(3, 3, 33, 0.72);
}
.mission-body strong {
  color: #030321;
  font-weight: 600;
}

/* ===== MISSION — sous-titre (accroche après le titre) ===== */
.mission-subhead {
  margin-top: clamp(18px, 2.4vh, 28px);
  max-width: 820px;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 500;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #030321;
}

/* ===== SIGNAL — L'offre + Signal Score (5 dimensions + 4 paliers) ===== */
.signal-lede {
  font-family: 'Instrument Sans', sans-serif;
  font-size: clamp(20px, 2.1vw, 26px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin: 28px 0 24px;
  max-width: 780px;
  color: #030321;
}
.signal-body {
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  margin: 0 0 18px;
  max-width: 780px;
  color: rgba(3, 3, 33, 0.82);
}
.signal-objectif {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin-top: 32px;
  padding: 22px 26px;
  background: var(--signal-soft);
  border-radius: 10px;
  max-width: 780px;
}
.signal-objectif__label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--signal-pop);
  font-weight: 600;
  flex-shrink: 0;
  padding-top: 4px;
}
.signal-objectif__text {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 18px;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
  color: #030321;
}

/* Liste des 5 dimensions */
.signal-dimensions {
  list-style: none;
  padding: 0;
  margin: 36px 0 0;
  display: grid;
  gap: 16px;
}
.signal-dim {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  align-items: start;
  padding: 22px 24px;
  background: #F9F9FF;
  border-radius: 10px;
  border-left: 3px solid var(--signal-pop);
}
.signal-dim__code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  font-weight: 600;
  color: var(--signal-pop);
  letter-spacing: 0.02em;
}
.signal-dim__title {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0 0 8px;
  color: #030321;
}
.signal-dim__desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 15.5px;
  line-height: 1.6;
  margin: 0;
  color: rgba(3, 3, 33, 0.78);
}

/* 4 paliers de notation */
.signal-tiers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 36px;
}
.signal-tier {
  padding: 24px 26px;
  border-radius: 10px;
  background: #F9F9FF;
  border-top: 4px solid;
}
.signal-tier--fort { border-top-color: #2BB673; }
.signal-tier--moyen { border-top-color: #D9A93B; }
.signal-tier--renforcer { border-top-color: #E07A5F; }
.signal-tier--critique { border-top-color: #C44545; }
.signal-tier__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 14px;
}
.signal-tier__num {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #030321;
  line-height: 1;
}
.signal-tier__label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.signal-tier--fort .signal-tier__label { color: #2BB673; }
.signal-tier--moyen .signal-tier__label { color: #D9A93B; }
.signal-tier--renforcer .signal-tier__label { color: #E07A5F; }
.signal-tier--critique .signal-tier__label { color: #C44545; }
.signal-tier__desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  color: rgba(3, 3, 33, 0.78);
}

@media (max-width: 720px) {
  .signal-objectif {
    flex-direction: column;
    gap: 10px;
    padding: 18px 20px;
  }
  .signal-dim {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 18px 20px;
  }
  .signal-tiers {
    grid-template-columns: 1fr;
  }
}

/* ===== HOME — Preuves : 3 colonnes centrées (chiffre + label + bouton) ===== */
.proofs--three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  margin-top: 56px;
}
.proof {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}
.proof__num {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: clamp(52px, 6vw, 82px);
  line-height: 1;
  letter-spacing: -0.04em;
}
.proof__num span {
  font-size: 0.55em;
  margin-left: 2px;
}
.proof__label {
  font-family: 'DM Sans', sans-serif;
  font-size: 15.5px;
  line-height: 1.5;
  color: rgba(3, 3, 33, 0.78);
  max-width: 280px;
}
/* Sur fond nuit, garder le label clair */
.theme-night .proof__label { color: rgba(244, 241, 234, 0.82); }
.proof__btn {
  margin-top: 6px;
}

@media (max-width: 860px) {
  .proofs--three {
    grid-template-columns: 1fr;
    gap: 44px;
    margin-top: 44px;
  }
}

/* === ACTIVITY GRID (test sur Lens) === */
.activity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 48px;
}
.activity-grid[data-pillar="lens"]    { --acc-soft: var(--lens-soft);    --acc-pop: var(--lens-pop); }
.activity-grid[data-pillar="frame"]   { --acc-soft: var(--frame-soft);   --acc-pop: var(--frame-pop); }
.activity-grid[data-pillar="echoes"]  { --acc-soft: var(--echoes-soft);  --acc-pop: var(--echoes-pop); }
.activity-grid[data-pillar="impulse"] { --acc-soft: var(--impulse-soft); --acc-pop: var(--impulse-pop); }
.activity-grid[data-pillar="signal"]  { --acc-soft: var(--signal-soft);  --acc-pop: var(--signal-pop); }

.activity-card {
  position: relative;
  background: var(--acc-soft);
  border-radius: 18px;
  padding: 28px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}
.activity-card::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--acc-pop);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.activity-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(3, 3, 33, 0.08);
}
.activity-card:hover::before { transform: scaleX(1); }
.activity-card__num {
  font-family: var(--ff-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--night);
  background: var(--acc-pop);
  padding: 6px 12px;
  border-radius: 999px;
  align-self: flex-start;
}
.activity-card__title {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--night);
  margin: 0;
}

@media (max-width: 640px) {
  .activity-grid { gap: 14px; }
  .activity-card { padding: 22px 20px; }
}

/* === LISSAGE TYPO/ESPACEMENT (mai 2026) =================================
   Objectif : harmoniser typo + espacements à travers les pages internes.
   - 3 fonts charte uniquement, jamais d'italic, jamais de serif.
   - Overrides ciblés, valeurs déjà cohérentes laissées intactes.
   ====================================================================== */

/* 1. Eyebrow alternatifs — aligner sur .eyebrow (11px, ls .2em, mb 22px) */
.page-hero__eyebrow,
.case-hero__eye {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 22px;
}

/* 2. Italic banni — charte Kromatic = jamais d'italic.
   On neutralise les déclarations résiduelles (quote__body, hero-v2__griffe,
   tribune__pullquote, tribune__body em, case-signature__sub). */
.quote__body,
.hero-v2__griffe,
.tribune__pullquote,
.tribune__body em,
.case-signature__sub {
  font-style: normal;
}

/* 3. Premier .section après un .page-hero — rapprocher le contenu du hero.
   Évite l'effet "trou" sur les pages internes (approche / expertises /
   cas / equipe / contact / piliers). Sur la home, hero-v3 a déjà sa
   propre logique (séparateur). */
.page-hero + .section,
.pillar-hero + .section,
.case-hero + .case-section {
  padding-top: clamp(28px, 4.5vh, 56px);
}

/* 4. Section "Explorer Kromatic" sur /approche/ — bloc CTA léger,
   réduire le padding pour ne pas créer de vide entre méthode et claim. */
body[data-page="approche"] .section[aria-label="Explorer Kromatic"] {
  padding-top: clamp(16px, 2.4vh, 28px);
  padding-bottom: clamp(16px, 2.4vh, 28px);
}
body[data-page="approche"] .section[aria-label="Explorer Kromatic"] .mission-link {
  margin: 0;
}

/* 5. Marge eyebrow → titre — homogène avec ou sans .display--halo.
   .eyebrow + .display garde le rythme défini par .display margin-bottom. */
.eyebrow + .display,
.eyebrow + .display--halo,
.eyebrow + h1.page-hero__title,
.eyebrow + h2 {
  margin-top: 0;
}

/* 6. .page-hero__baseline — strictement Instrument Sans, sans italic.
   Empêche tout héritage anormal (font-style hérité d'un parent éventuel). */
.page-hero__baseline,
.page-hero__baseline--small {
  font-style: normal;
  font-family: var(--ff-display);
}

/* 7. Mission-subhead — déjà calé Instrument Sans 500 20-26px.
   On garantit qu'il ne reçoit pas d'italic même si placé sous un parent
   stylé. */
.mission-subhead {
  font-style: normal;
}

/* 8. Marges latérales du dernier paragraphe / bloc dans .section__inner
   — supprime margin-bottom résiduel pour égaliser le padding-bottom
   visuel de la section. */
.section__inner > *:last-child {
  margin-bottom: 0;
}

/* 9. Display dans une .section--narrow — garder la même clamp mais
   margin-bottom légèrement réduit (sections étroites = moins d'air). */
.section--narrow .display {
  margin-bottom: clamp(28px, 4.5vh, 48px);
}