/* =====================================================================
   TRS - styles.css
   État après strip volontaire : hero + header uniquement. Toutes les
   règles des composants dormants (cards, steps, pillars, bios,
   prealables, contact, sections, footer) ont été retirées pour ne pas
   biaiser la conception du site v2 sur une architecture héritée. Les
   composants à venir seront redéfinis à partir de leur propre
   raisonnement.
   ===================================================================== */

/* ---------- Fontes auto-hébergées ---------- */

@font-face {
  font-family: 'Instrument Serif';
  src: url('theme/fonts/instrumentserif-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('theme/fonts/instrumentserif-400italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('theme/fonts/geist-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('theme/fonts/geistmono-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* Newsreader - équivalent libre proche de Tiempos Headline (Klim,
   commercial). Subset T/R/S seulement pour le wordmark, ~1 KB.
   La cascade font-family du wordmark essaie Tiempos en premier
   (si installé localement chez le visiteur), tombe sur Newsreader
   sinon, generic serif en dernier recours. */
@font-face {
  font-family: 'Newsreader';
  src: url('theme/fonts/newsreader-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0054, U+0052, U+0053; /* T R S seulement */
}

/* ---------- Variables ---------- */

:root {
  --rouge: #9B2915;      /* Pompéi - accent et signature */
  --rouge-deep: #7A1E0F; /* hover / pressed */
  --bg: #FFFFFF;         /* blanc pur */
  --fg: #0A0A0A;         /* noir corps */
  --fg-mid: #2A2A2A;     /* corps adouci */
  --muted: #6B6B6B;      /* gris neutre métadonnées */
  --rule: rgba(10, 10, 10, 0.10);

  --font-display: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* ---------- Reset léger ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video, svg { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; transition: color 140ms ease; }
a:hover { color: var(--rouge); }

::selection { background: var(--rouge); color: var(--bg); }

/* ---------- Primitives ---------- */

.kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.sep { color: var(--muted); margin: 0 0.4em; }

.nobr { white-space: nowrap; }

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 24px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background-color 240ms ease, border-color 240ms ease, backdrop-filter 240ms ease;
  border-bottom: 1px solid transparent;
}

.site-header.is-on-hero .wordmark,
.site-header.is-on-hero .top-nav a { color: #FFFFFF; }

.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom-color: var(--rule);
}

.site-header.is-scrolled .wordmark { color: var(--rouge); }
.site-header.is-scrolled .top-nav a { color: var(--fg); }
.site-header.is-scrolled .top-nav a:hover { color: var(--rouge); }

/* ---------- Wordmark ---------- */

/* Le wordmark est rendu via mask-image sur un span. La couleur du span
   (background-color: currentColor) hérite du parent .wordmark, qui bascule
   entre var(--rouge) et #FFFFFF selon l'état is-on-hero / is-scrolled
   du header. Une seule image source, deux états de couleur, zéro
   dépendance typographique. */

.wordmark {
  display: inline-flex;
  align-items: center;
  color: var(--rouge);
  line-height: 0;
  transition: color 240ms ease;
}

.wordmark-mark {
  display: block;
  height: 32px;
  aspect-ratio: 1146 / 642;
  background-color: currentColor;
  -webkit-mask: url('images/TRS_anti_contours_2.png') center / contain no-repeat;
          mask: url('images/TRS_anti_contours_2.png') center / contain no-repeat;
  /* Forcer mask-mode: alpha. Le défaut match-source utilise la luminance
     pour les images raster — or notre PNG est rouge sombre, donc en mode
     luminance seuls ~25% du blanc passent à travers et le wordmark
     apparaît grisé sur le hero. En alpha-mode, seul le canal alpha
     (binaire 0/255 dans ce PNG) compte, et le background-color s'affiche
     en plein. */
  -webkit-mask-mode: alpha;
          mask-mode: alpha;
  transition: background-color 240ms ease;
}

.wordmark-mark--large {
  height: 88px;
}

.top-nav {
  display: flex;
  gap: 26px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.top-nav a {
  color: var(--fg);
  transition: color 140ms ease;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100vh;
  background-color: #1B1816;
  color: #FFFFFF;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 40px 96px;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #1B1816;
  /* Empilement : gradient sombre gauche → transparent à 55% + photo.
     Le gradient garantit la lisibilité du titre quel que soit le crop
     responsive de l'image (centrée par défaut, le bâtiment peut glisser
     hors de la zone de texte sur écrans 1920+ ou viewports étroits). Le
     côté droit reste intact pour préserver l'accent rouge de la baie. */

  /* Fallback pour navigateurs sans image-set() format-aware. */
  background-image:
    linear-gradient(90deg, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.25) 35%, rgba(0,0,0,0) 55%),
    url('images/hero/hero.jpg');

  /* Cascade moderne : AVIF (-95% vs JPG) > WebP (-94%) > JPG (-94% vs
     l'original déjà optimisé). Les navigateurs récents (Chrome 88+,
     Safari 17+, Firefox 113+) choisissent le format le plus efficace
     qu'ils peuvent décoder. */
  background-image:
    linear-gradient(90deg, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.25) 35%, rgba(0,0,0,0) 55%),
    image-set(
      url('images/hero/hero.avif') type('image/avif'),
      url('images/hero/hero.webp') type('image/webp'),
      url('images/hero/hero.jpg') type('image/jpeg')
    );

  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 980px;
  margin: 0 auto 0 0;
}

.hero .kicker {
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 28px;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 5.6vw, 80px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin: 0 0 32px;
  max-width: none;
}

.hero-title-line {
  display: block;
}

.hero-lede {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 2.1vw, 26px);
  line-height: 1.42;
  color: rgba(255, 255, 255, 0.86);
  max-width: 44ch;
  margin: 0 0 56px;
}

.hero-meta {
  display: flex;
  gap: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  flex-wrap: wrap;
  align-items: center;
}

.hero-meta .rule {
  display: inline-block;
  width: 28px;
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
}

/* ---------- Sections - grammaire commune ---------- */

.section {
  position: relative;
  padding: 140px 40px;
}

.section--dark {
  background: #1B1816;
  color: #FFFFFF;
}

.section--dark .kicker { color: rgba(255, 255, 255, 0.62); }

.section-inner {
  max-width: 1320px;
  margin: 0 auto;
}

.section-header {
  margin-bottom: 80px;
  max-width: 720px;
}

.section-header .kicker {
  margin: 0 0 18px;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0;
  color: inherit;
}

/* Section lede : prose serif en complément du titre, registre meta
   éditorial (sous-titre court). */
.section-lede {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.62);
  margin: 18px 0 0;
  max-width: 32ch;
}

.section:not(.section--dark) .section-lede {
  color: var(--fg-mid);
}

/* ---------- Section 1 : Manifeste ---------- */

.section--manifeste {
  padding: 160px 40px 140px;
}

.section-inner--manifeste {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 80px;
  align-items: start;
}

.manifeste-prose {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 1.95vw, 30px);
  line-height: 1.42;
  color: var(--fg-mid);
  max-width: 38ch;
}

.manifeste-prose p { margin: 0 0 28px; }
.manifeste-prose p:last-child { margin-bottom: 0; }

.manifeste-aside {
  padding-top: 12px;
  text-align: left;
  border-left: 1px solid var(--rule);
  padding-left: 48px;
}

/* Bloc statistique : sérif display gros calibre, accent rouge sur
   l'unité, caption explicative. Deux blocs empilés dans l'aside
   (Anthropic JV puis OpenAI DeployCo) séparés par un filet fin pour
   marquer le parallèle - deux annonces du même mois, deux entités,
   même mécanique. */
.manifeste-stat-block {
  margin-bottom: 36px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--rule);
}

.manifeste-stat-block:last-of-type {
  border-bottom: none;
}

.manifeste-stat {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(44px, 4.6vw, 64px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0 0 14px;
}

.manifeste-stat-unit {
  color: var(--rouge);
}

.manifeste-stat-caption {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-mid);
  margin: 0;
  max-width: 36ch;
}

.manifeste-signature {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.manifeste-signature .rule {
  display: inline-block;
  width: 20px;
  height: 1px;
  background: var(--muted);
  opacity: 0.5;
}

/* ---------- Section 2 : Livrables ---------- */

.livrables-rows {
  display: flex;
  flex-direction: column;
}

.livrable {
  display: grid;
  grid-template-columns: 4fr 5fr 3fr;
  gap: 56px;
  padding: 52px 0;
  border-top: 1px solid var(--rule);
  align-items: start;
}

/* Pas de border-bottom sur le dernier livrable : la section qui suit
   (Approche) est sur fond sombre, le filet séparerait du vide. */

.livrable-id {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.livrable-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.livrable-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 2.6vw, 38px);
  line-height: 1.12;
  margin: 0;
  max-width: 14ch;
}

.livrable-prose {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.62;
  color: var(--fg-mid);
  margin: 0;
  max-width: 48ch;
}

.livrable-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.livrable-meta .rule {
  display: inline-block;
  width: 20px;
  height: 1px;
  background: var(--muted);
  opacity: 0.5;
}

/* ---------- Section 3 : Approche (fond sombre) ---------- */

.section--approche {
  padding: 160px 40px;
}

.approche-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 72px;
  align-items: start;
}

.pillar { position: relative; }

.pillar-num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(64px, 7vw, 104px);
  line-height: 0.9;
  color: var(--rouge);
  margin: 0 0 28px;
  letter-spacing: -0.01em;
}

.pillar-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.12;
  margin: 0 0 28px;
  color: #FFFFFF;
  max-width: 18ch;
}

.pillar-prose {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
  max-width: 44ch;
}

/* ---------- Section 4 : Méthode ---------- */

.methode-steps {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 64px;
  position: relative;
}

/* Filets verticaux entre colonnes, dessinés en pseudo-éléments pour
   ne pas polluer le markup et rester alignés sur la grille. */
.methode-steps::before,
.methode-steps::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--rule);
  pointer-events: none;
}

.methode-steps::before { left: calc(33.333% - 32px); }
.methode-steps::after  { left: calc(66.666% - 32px); }

.step { padding-right: 16px; }

.step-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 20px;
}

.step-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 2.6vw, 36px);
  line-height: 1.12;
  margin: 0 0 14px;
}

.step-duration {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rouge);
  margin: 0 0 28px;
}

.step-prose {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.62;
  color: var(--fg-mid);
  margin: 0 0 24px;
}

/* Engagement de fin de step : filet rouge vertical à gauche pour
   marquer la nature contractuelle, prose en Geist regular (lisible),
   poids 500 pour la présence. L'italique serif testé précédemment
   rendait mal à cette taille - body sans-serif tient mieux. */
.step-commit {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--fg);
  margin: 0;
  padding: 4px 0 4px 18px;
  border-left: 2px solid var(--rouge);
  max-width: 34ch;
}

/* ---------- Section 5 : Associés (fond sombre) ---------- */

.section--associes {
  padding: 140px 40px;
}

.associes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 64px;
}

.associe-mark {
  width: 48px;
  height: 2px;
  background: var(--rouge);
  margin-bottom: 36px;
}

.associe-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.12;
  margin: 0 0 14px;
  color: #FFFFFF;
}

.associe-role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 20px;
  line-height: 1.5;
}

.associe-cv {
  /* Sentence-case délibéré : préserver la capitalisation propriétaire
     (Rothschild & Co, HEC Paris, Edmond de Rothschild). Le mono small
     tient le registre meta sans écraser les noms d'institutions. */
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.associe-cv .rule {
  display: inline-block;
  width: 14px;
  height: 1px;
  background: rgba(255, 255, 255, 0.35);
}

/* Icône LinkedIn discrète sous chaque associé. Hover : rouge Pompéi. */
.associe-linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 20px;
  color: rgba(255, 255, 255, 0.55);
  transition: color 160ms ease;
}

.associe-linkedin:hover { color: var(--rouge); }
.associe-linkedin svg { width: 16px; height: 16px; display: block; }
.associe { position: relative; }

/* ---------- Section 6 : Contact ---------- */

.section--contact {
  padding: 200px 40px 200px;
}

.section--contact .kicker {
  margin: 0 0 36px;
}

.contact-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(56px, 8vw, 104px);
  line-height: 1.02;
  letter-spacing: -0.012em;
  margin: 0 0 56px;
  color: var(--fg);
  max-width: 14ch;
}

/* Email contact : encadré fin rouge Pompéi, padding généreux, label
   "Écrire à" en mono kicker pour signaler que c'est une action.
   Hover inverse : fond rouge, texte blanc. */
.contact-email {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  font-family: var(--font-body);
  text-decoration: none;
  padding: 22px 32px;
  border: 1px solid var(--rouge);
  color: var(--fg);
  background: transparent;
  margin-bottom: 48px;
  transition: background-color 180ms ease, color 180ms ease;
}

.contact-email-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rouge);
  transition: color 180ms ease;
}

.contact-email-address {
  font-size: clamp(20px, 1.8vw, 26px);
  font-family: var(--font-display);
  line-height: 1;
}

.contact-email:hover {
  background-color: var(--rouge);
  color: #FFFFFF;
}

.contact-email:hover .contact-email-label {
  color: rgba(255, 255, 255, 0.78);
}

.contact-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.contact-meta .rule {
  display: inline-block;
  width: 24px;