/* ──────────────────────────────────────────────────────────────────────────
   Gabriel Brabant Conseil — Styles de page
   Refonte éditoriale, mai 2026.
   Palette et typographie verrouillées (cf. tokens.css).
   ────────────────────────────────────────────────────────────────────────── */

/* ─ @font-face ────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/ibm-plex-sans-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/ibm-plex-sans-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Serif';
  src: url('../fonts/ibm-plex-serif-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ─ Container ──────────────────────────────────────────────────────────── */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* ─ Skip link a11y ─────────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  position: fixed;
  left: 12px;
  top: 12px;
  width: auto;
  height: auto;
  padding: 10px 14px;
  background: var(--color-bg);
  color: var(--color-ink);
  border: 2px solid var(--color-accent);
  z-index: 100;
}

/* ────────────────────────────────────────────────────────────────────────
   SCROLL PROGRESS — barre fine en haut, progression de lecture
   ──────────────────────────────────────────────────────────────────────── */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 60;
  background: transparent;
  pointer-events: none;
}
.scroll-progress-bar {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 80ms linear;
}

/* ────────────────────────────────────────────────────────────────────────
   STICKY CTA — bouton flottant qui apparaît après le hero
   ──────────────────────────────────────────────────────────────────────── */
.sticky-cta {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  background: var(--color-ink);
  color: var(--color-bg);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border: 1px solid var(--color-ink);
  border-bottom: 1px solid var(--color-ink);
  box-shadow: 0 6px 30px -10px rgba(26, 26, 26, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.96);
  pointer-events: none;
  transition: opacity 380ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0ms linear 380ms,
              background 220ms ease-out,
              border-color 220ms ease-out;
}
.sticky-cta.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition: opacity 380ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0ms linear 0ms,
              background 220ms ease-out,
              border-color 220ms ease-out;
}
.sticky-cta:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}
.sticky-cta-arrow {
  display: inline-block;
  transition: transform var(--transition);
}
.sticky-cta:hover .sticky-cta-arrow { transform: translateX(3px); }
@media (max-width: 600px) {
  .sticky-cta {
    bottom: 16px;
    right: 16px;
    padding: 12px 18px;
    font-size: 13px;
  }
}

/* ─ Header ─────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  background: rgba(250, 248, 244, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--color-rule);
  z-index: 30;
  transition: padding 300ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 300ms ease-out;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  height: 80px;
  transition: height 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.site-header.is-compact .header-inner { height: 64px; }
@media (max-width: 900px) {
  .header-inner { height: 64px; }
  .site-header.is-compact .header-inner { height: 56px; }
}

.logo {
  color: var(--color-ink);
  border-bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  line-height: 1;
  transition: color var(--transition);
}
.logo:hover { color: var(--color-accent); }
.logo-mark {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--color-bg);
  background: var(--color-accent);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.logo-wordmark {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: currentColor;
}
.logo-tag {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--color-slate);
  padding-left: 12px;
  border-left: 1px solid var(--color-rule);
  margin-left: 4px;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .logo-tag { display: none; }
  .logo-wordmark { font-size: 17px; }
}

.header-nav {
  display: none;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
  margin-right: var(--space-3);
}
@media (min-width: 1000px) {
  .header-nav { display: flex; }
}
.header-nav a {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-ink);
  border-bottom: 0;
  position: relative;
  padding-bottom: 4px;
  letter-spacing: 0.01em;
}
.header-nav a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-accent);
  transition: width 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.header-nav a:hover { color: var(--color-accent); }
.header-nav a:hover::after { width: 100%; }

.header-cta {
  font-size: var(--fs-button);
  font-weight: 500;
  color: var(--color-accent);
  border-bottom: 1px solid var(--color-accent);
  padding-bottom: 2px;
  white-space: nowrap;
}
.header-cta:hover {
  color: var(--color-ink);
  border-bottom-color: var(--color-ink);
}
.header-cta span {
  margin-left: 6px;
  display: inline-block;
  transition: transform var(--transition);
}
.header-cta:hover span { transform: translateX(3px); }

/* ─ Rythme des sections ────────────────────────────────────────────────── */
main > section {
  padding-block: var(--space-6);
}
main > section.hero {
  padding-top: var(--space-4);
}
main > .act-marker {
  padding-block: var(--space-4);
}

/* ────────────────────────────────────────────────────────────────────────
   ACT MARKER — séparation des actes narratifs (I, II, III)
   ──────────────────────────────────────────────────────────────────────── */
.act-marker {
  background: var(--color-bg);
  border-block: 1px solid var(--color-rule);
}
.act-marker-light {
  background: var(--color-bg-warm);
  border-block-color: var(--color-rule);
}
.act-marker .container {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.act-roman {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--color-accent);
  letter-spacing: 0.01em;
}
.act-rule {
  flex: 1;
  height: 1px;
  background: var(--color-rule);
}
.act-name {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-slate);
}

/* ────────────────────────────────────────────────────────────────────────
   CHAPTER MARK — marqueur architectural de chaque section narrative
   Grand numéro mono + nom de section + filet horizontal qui poursuit
   ──────────────────────────────────────────────────────────────────────── */
.chapter-mark {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  position: relative;
}
.chapter-num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
  display: inline-block;
}
.chapter-meta {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.chapter-name {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
  white-space: nowrap;
}
.chapter-line {
  flex: 1;
  height: 1px;
  background: var(--color-rule);
  display: block;
}

/* Variante bordeaux (section "filtre") */
.chapter-mark-rare .chapter-num,
.chapter-mark-rare .chapter-name { color: var(--color-rare); }
.chapter-mark-rare .chapter-line { background: var(--color-rare); opacity: 0.35; }

/* Variante crème (final CTA sur fond vert sapin) */
.chapter-mark-inverse .chapter-num,
.chapter-mark-inverse .chapter-name { color: var(--color-bg); opacity: 0.9; }
.chapter-mark-inverse .chapter-line { background: var(--color-bg); opacity: 0.3; }

/* ────────────────────────────────────────────────────────────────────────
   BOUTONS
   ──────────────────────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-ink);
  color: var(--color-bg);
  font-family: var(--font-sans);
  font-size: var(--fs-button);
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 16px 28px;
  border: 1px solid var(--color-ink);
  border-bottom: 1px solid var(--color-ink);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.btn-primary:hover {
  background: var(--color-accent);
  color: var(--color-bg);
  border-color: var(--color-accent);
}
.btn-primary span {
  display: inline-block;
  transition: transform var(--transition);
}
.btn-primary:hover span { transform: translateX(4px); }

.btn-primary-inverse {
  background: var(--color-bg);
  color: var(--color-ink);
  border-color: var(--color-bg);
}
.btn-primary-inverse:hover {
  background: var(--color-ink);
  color: var(--color-bg);
  border-color: var(--color-ink);
}

.btn-secondary-inverse {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-bg);
  border-bottom: 1px solid var(--color-bg);
  padding-bottom: 2px;
  margin-left: var(--space-3);
  letter-spacing: -0.01em;
}
.btn-secondary-inverse:hover {
  color: var(--color-bg);
  opacity: 0.7;
}
@media (max-width: 600px) {
  .btn-secondary-inverse {
    margin-left: 0;
    margin-top: var(--space-2);
    display: block;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   HERO — 2 colonnes desktop avec monogramme, h1 multi-lignes, photo cadrée
   ──────────────────────────────────────────────────────────────────────── */
main > section.hero {
  background: var(--color-bg-warm);
  padding-block: var(--space-5);
  position: relative;
  overflow: hidden;
}
main > section.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--color-rule) 30%, var(--color-rule) 70%, transparent 100%);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: center;
}
@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 1fr);
    gap: var(--space-5);
  }
}

/* — Monogramme hero (désactivé) — */
.hero-monogram {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-3);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  color: var(--color-accent);
  line-height: 1;
}
.monogram-letter {
  display: inline-block;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.monogram-rule {
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--color-accent);
}
.monogram-roman {
  font-family: var(--font-mono);
  font-style: normal;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-slate);
  padding-left: 14px;
  margin-left: 6px;
  border-left: 1px solid var(--color-rule);
}

.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-3);
  max-width: none;
}
.eyebrow-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--color-accent);
  border-radius: 50%;
}

.hero h1,
.hero-h1 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-4);
  max-width: 18ch;
  text-wrap: balance;
  color: var(--color-ink);
}
.hero-h1-line {
  display: block;
}
.hero-h1-line-em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--color-accent);
}

.hero .lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--color-ink);
  max-width: var(--text-measure);
  margin: 0;
  padding-left: var(--space-3);
  border-left: 2px solid var(--color-accent);
}

.hero-cta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
  max-width: none;
}
.hero-cta-note {
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-slate);
}

/* — Crédentiels institutionnels : grille typée façon wall of logos — */
.hero-credentials {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-rule);
}
.hero-credentials-label {
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-slate);
  margin: 0 0 var(--space-3);
}
.institutions-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}
@media (min-width: 600px) {
  .institutions-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1000px) {
  .institutions-grid { grid-template-columns: repeat(6, 1fr); }
}
.institutions-grid li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 12px 12px 0;
  border-top: 1px solid var(--color-accent);
  border-right: 1px solid var(--color-rule);
  text-align: left;
  min-height: 64px;
}
.institutions-grid li:last-child { border-right: 0; }
@media (max-width: 1000px) {
  .institutions-grid li:nth-child(3n) { border-right: 0; }
}
@media (max-width: 600px) {
  .institutions-grid li:nth-child(2n) { border-right: 0; }
}
.inst-name {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--color-ink);
  font-variant: all-small-caps;
}
.inst-tag {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0;
  color: var(--color-slate);
}

/* — Photo héro encadrée avec quatre coins type cadre photo — */
.hero-photo {
  margin: 0;
  position: relative;
}
.hero-photo-frame {
  position: relative;
  background: var(--color-bg);
  padding: 10px;
  border: 1px solid var(--color-rule);
}
.hero-photo-frame img {
  width: 100%;
  height: auto;
  display: block;
}
.hero-photo-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--color-accent);
}
.hero-photo-corner-tl { top: -6px; left: -6px; border-right: 0; border-bottom: 0; }
.hero-photo-corner-tr { top: -6px; right: -6px; border-left: 0; border-bottom: 0; }
.hero-photo-corner-bl { bottom: -6px; left: -6px; border-right: 0; border-top: 0; }
.hero-photo-corner-br { bottom: -6px; right: -6px; border-left: 0; border-top: 0; }

.hero-photo-cap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--color-slate);
  text-transform: uppercase;
}
.hero-photo-cap-rule {
  display: inline-block;
  flex: 0 0 24px;
  height: 1px;
  background: var(--color-accent);
}
@media (max-width: 900px) {
  .hero-photo { max-width: 360px; }
}

/* — Scroll cue — */
.hero-scroll-cue {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: var(--space-5);
  opacity: 0.6;
}
.hero-scroll-cue-line {
  display: block;
  width: 40px;
  height: 1px;
  background: var(--color-ink);
  animation: scroll-cue-pulse 2200ms ease-in-out infinite;
}
.hero-scroll-cue-text {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-slate);
}
@keyframes scroll-cue-pulse {
  0%, 100% { transform: scaleX(0.6); opacity: 0.4; }
  50% { transform: scaleX(1); opacity: 1; }
}

/* ────────────────────────────────────────────────────────────────────────
   STATS BAND — bande anthracite avec 4 chiffres clés et label
   ──────────────────────────────────────────────────────────────────────── */
main > section.stats-band {
  background: var(--color-ink);
  color: var(--color-bg);
  padding-block: var(--space-5);
  margin: 0;
  position: relative;
}
.stats-band-label {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-bg);
  opacity: 0.55;
  margin: 0 0 var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.stats-band-label::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--color-accent);
}
.stats-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (min-width: 900px) {
  .stats-list {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
  }
}
.stats-list li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-3) 0 0;
  border: 0;
  position: relative;
  border-top: 2px solid var(--color-accent);
}
.stat-id {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-bg);
  opacity: 0.45;
}
.stat-num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(40px, 5vw, 60px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--color-bg);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding-top: var(--space-1);
}
.stat-count {
  font-variant-numeric: tabular-nums;
}
.stat-unit {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-bg);
  opacity: 0.55;
  text-transform: lowercase;
}
.stat-label {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-bg);
  opacity: 0.7;
  max-width: 30ch;
}

/* ─ H2 — phrases pleines ──────────────────────────────────────────────── */
h2 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: 1.16;
  letter-spacing: -0.014em;
  margin: 0 0 var(--space-3);
  max-width: 22ch;
  text-wrap: balance;
  color: var(--color-ink);
}

/* ─ Texte courant ─────────────────────────────────────────────────────── */
p {
  max-width: var(--text-measure);
  margin: 0 0 var(--space-3);
}
p:last-child { margin-bottom: 0; }

/* ─ Drop cap ──────────────────────────────────────────────────────────── */
.has-dropcap::first-letter {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  color: var(--color-accent);
  font-size: 5.2em;
  line-height: 0.85;
  float: left;
  padding: 6px 14px 0 0;
  margin-top: 4px;
}
@media (max-width: 900px) {
  .has-dropcap::first-letter {
    font-size: 4em;
    padding: 4px 10px 0 0;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   SECTION WARM — fond crème chaude pour la section "réponse"
   ──────────────────────────────────────────────────────────────────────── */
main > section.section-warm {
  background: var(--color-bg-warm);
  padding-block: var(--space-6);
  max-width: none;
  padding-inline: 0;
}
main > section.section-warm > * {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ────────────────────────────────────────────────────────────────────────
   ANIMATIONS — fade-in au scroll + staggered children
   ──────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  body.js-ready [data-animate] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
  }
  body.js-ready [data-animate].is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  body.js-ready [data-stagger] > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--i, 0) * 70ms);
    will-change: opacity, transform;
  }
  body.js-ready [data-stagger].is-visible > * {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ────────────────────────────────────────────────────────────────────────
   PROBLEM-GRID — section "constat" : corps + callout latéral
   ──────────────────────────────────────────────────────────────────────── */
.problem-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
@media (min-width: 900px) {
  .problem-grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr);
    gap: var(--space-5);
    align-items: start;
  }
}
.problem-body p { max-width: none; }
.problem-body .has-dropcap { margin-top: 0; }

.callout {
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-left: 3px solid var(--color-accent);
  padding: var(--space-3);
  margin: 0;
  position: relative;
}
.callout-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-2);
  max-width: none;
}
.callout-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 16px;
  color: var(--color-bg);
  background: var(--color-accent);
  line-height: 1;
}
.callout-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.35;
  color: var(--color-ink);
  margin: 0;
  max-width: none;
}
.callout-attr {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-slate);
  margin: var(--space-2) 0 0;
  max-width: none;
}

/* ────────────────────────────────────────────────────────────────────────
   TENSION-BOX — section "paradoxe" : Fierté ↔ Prison
   ──────────────────────────────────────────────────────────────────────── */
.tension-box {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: var(--space-4);
  border: 1px solid var(--color-rule);
  background: var(--color-bg);
}
@media (min-width: 700px) {
  .tension-box {
    grid-template-columns: 1fr auto 1fr;
  }
}
.tension-side {
  padding: var(--space-4) var(--space-3);
  position: relative;
}
.tension-up { background: var(--color-bg); }
.tension-down {
  background: var(--color-ink);
  color: var(--color-bg);
}
.tension-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-slate);
  margin: 0 0 var(--space-2);
  max-width: none;
}
.tension-down .tension-label {
  color: var(--color-bg);
  opacity: 0.6;
}
.tension-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.25;
  color: var(--color-ink);
  margin: 0;
  max-width: none;
}
.tension-down .tension-text { color: var(--color-bg); }
.tension-meta {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--color-accent);
  margin: var(--space-3) 0 0;
  max-width: none;
  line-height: 1;
}
.tension-down .tension-meta { color: var(--color-bg); opacity: 0.5; }

.tension-divider {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  background: var(--color-bg-warm);
  border-block: 1px solid var(--color-rule);
  gap: 6px;
}
@media (min-width: 700px) {
  .tension-divider {
    flex-direction: column;
    border-block: 0;
    border-inline: 1px solid var(--color-rule);
    padding-inline: var(--space-3);
    min-height: 100%;
  }
}
.tension-divider-line {
  flex: 1;
  height: 1px;
  background: var(--color-rule);
  display: block;
  min-width: 24px;
}
@media (min-width: 700px) {
  .tension-divider-line {
    height: auto;
    width: 1px;
    min-width: 0;
    min-height: 24px;
  }
}
.tension-divider-mark {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 28px;
  color: var(--color-accent);
  line-height: 1;
}

/* ────────────────────────────────────────────────────────────────────────
   PERSONAS-GRID — section "solitude" : 5 cards numérotées
   ──────────────────────────────────────────────────────────────────────── */
.grid-intro {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: var(--color-slate);
  margin: var(--space-4) 0 var(--space-3);
  max-width: var(--text-measure);
}
.personas-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-bottom: var(--space-4);
  border-top: 1px solid var(--color-rule);
  border-left: 1px solid var(--color-rule);
}
@media (min-width: 600px) {
  .personas-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .personas-grid { grid-template-columns: repeat(5, 1fr); }
}
.persona {
  background: var(--color-bg);
  border-right: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  transition: background 220ms ease-out;
}
.persona:hover { background: var(--color-bg-warm); }
.persona-num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  margin-bottom: var(--space-1);
}
.persona-name {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.005em;
  color: var(--color-ink);
  margin: 0 0 var(--space-1);
  max-width: none;
}
.persona-knows {
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-ink);
  margin: 0;
  max-width: none;
}
.persona-cannot {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-slate);
  margin: 0;
  max-width: none;
  padding-top: var(--space-1);
  border-top: 1px solid var(--color-rule);
}

.conclude-line {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1.45;
  color: var(--color-ink);
  max-width: var(--text-measure);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-rule);
  margin-top: var(--space-3);
}

/* ────────────────────────────────────────────────────────────────────────
   COMPARISON-GRID — section "fausses pistes" : 4 colonnes numérotées
   ──────────────────────────────────────────────────────────────────────── */
.comparison-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  margin-top: var(--space-5);
}
@media (min-width: 700px) {
  .comparison-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .comparison-grid { grid-template-columns: repeat(4, 1fr); }
}
.comparison-col {
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-top: 3px solid var(--color-slate);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.comparison-col:hover { transform: translateY(-3px); }
.comparison-col-positive {
  background: var(--color-accent);
  color: var(--color-bg);
  border-color: var(--color-accent);
  border-top-color: var(--color-bg);
}
.comparison-num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--color-slate);
  margin-bottom: var(--space-1);
  display: inline-block;
}
.comparison-col-positive .comparison-num { color: var(--color-bg); opacity: 0.7; }
.comparison-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.005em;
  color: var(--color-ink);
  margin: 0 0 var(--space-1);
  max-width: none;
}
.comparison-col-positive .comparison-label { color: var(--color-bg); }
.comparison-tag {
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-slate);
  margin: 0 0 var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-rule);
  max-width: none;
}
.comparison-col-positive .comparison-tag {
  color: var(--color-bg);
  opacity: 0.65;
  border-bottom-color: rgba(250, 248, 244, 0.25);
}
.comparison-col p:last-child {
  font-size: 15px;
  line-height: 1.55;
  max-width: none;
  margin: 0;
}

/* ────────────────────────────────────────────────────────────────────────
   URGENCY BODY — section "urgence" : composition éditoriale
   ──────────────────────────────────────────────────────────────────────── */
.urgency-body {
  max-width: var(--text-measure);
  margin-top: var(--space-3);
}
.urgency-body p { max-width: none; }
.urgency-lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.45;
  color: var(--color-accent);
  padding-left: var(--space-3);
  border-left: 2px solid var(--color-accent);
  margin-bottom: var(--space-4);
}

/* ────────────────────────────────────────────────────────────────────────
   PULL-QUOTE PIVOT — coupure géante entre problème et solution
   ──────────────────────────────────────────────────────────────────────── */
.pull-quote {
  background: var(--color-bg);
  padding-block: var(--space-6);
  position: relative;
}
.pull-quote::before,
.pull-quote::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-rule);
}
.pull-quote::before { top: 0; }
.pull-quote::after { bottom: 0; }

.pull-quote-inner {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
}
.pull-quote-mark {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(72px, 8vw, 120px);
  line-height: 0.8;
  color: var(--color-accent);
  opacity: 0.5;
  user-select: none;
}
.pull-quote p {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-accent);
  margin: 0;
  max-width: 20ch;
  text-wrap: balance;
}
.pull-quote-attr {
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-slate);
  margin-top: var(--space-3);
}

/* ────────────────────────────────────────────────────────────────────────
   PILLARS — section "réponse" : 3 cards (business, intérieur, suite)
   ──────────────────────────────────────────────────────────────────────── */
.pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
@media (min-width: 900px) {
  .pillars { grid-template-columns: repeat(3, 1fr); }
}
.pillar {
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-top: 3px solid var(--color-accent);
  padding: var(--space-4) var(--space-3) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pillar:hover { transform: translateY(-3px); }
.pillar-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 36px;
  line-height: 1;
  color: var(--color-accent);
  margin: 0;
  max-width: none;
}
.pillar-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-slate);
  margin: 0;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-rule);
}
.pillar h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  margin: 0;
  color: var(--color-ink);
  border: 0;
  padding: 0;
}
.pillar p { max-width: none; margin: 0; }
.pillar-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-rule);
}

/* ────────────────────────────────────────────────────────────────────────
   VERBATIM — citation éditoriale avec attribution
   ──────────────────────────────────────────────────────────────────────── */
.section-verbatim { position: relative; }
.verbatim-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-slate);
  margin: 0 0 var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.verbatim-eyebrow::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--color-accent);
}

.verbatim {
  max-width: 880px;
  margin: 0;
  position: relative;
  padding-left: 64px;
}
.verbatim::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 40px;
  height: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path d='M2 24 Q 2 4 22 4 L 22 14 Q 12 14 12 24 L 12 36 L 2 36 Z M 20 24 Q 20 4 40 4 L 40 14 Q 30 14 30 24 L 30 36 L 20 36 Z' fill='%231F3D2F'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}
.verbatim blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 26px;
  line-height: 1.38;
  color: var(--color-ink);
  margin: 0 0 var(--space-3);
  text-wrap: balance;
  max-width: none;
}
@media (max-width: 900px) {
  .verbatim { padding-left: 48px; }
  .verbatim::before { width: 32px; height: 32px; }
  .verbatim blockquote { font-size: 21px; }
}
.verbatim figcaption {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-rule);
}
.who-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.verbatim .who {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-ink);
}
.verbatim .who-role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-slate);
}
.verbatim .rule {
  flex: 0 0 32px;
  height: 1px;
  background: var(--color-accent);
}
.verbatim-stat {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  margin-left: auto;
}
@media (max-width: 600px) {
  .verbatim-stat { margin-left: 0; }
}

/* ────────────────────────────────────────────────────────────────────────
   BIO — grille bio narrative + seal cabinet
   ──────────────────────────────────────────────────────────────────────── */
.bio-grid-modern {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: start;
  margin-top: var(--space-3);
}
@media (min-width: 1000px) {
  .bio-grid-modern {
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
    gap: var(--space-5);
  }
}
.bio-narrative { max-width: var(--text-measure); }
.bio-narrative p { max-width: none; }

.cabinet-seal {
  background: var(--color-bg-warm);
  border: 1px solid var(--color-accent);
  padding: var(--space-3);
  position: relative;
}
.cabinet-seal::before,
.cabinet-seal::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1px solid var(--color-accent);
}
.cabinet-seal::before {
  top: -6px;
  left: -6px;
  border-right: 0;
  border-bottom: 0;
  background: var(--color-bg);
}
.cabinet-seal::after {
  bottom: -6px;
  right: -6px;
  border-left: 0;
  border-top: 0;
  background: var(--color-bg);
}
.cabinet-seal-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-accent);
}
.cabinet-seal-mark {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 32px;
  font-weight: 400;
  color: var(--color-accent);
  line-height: 1;
}
.cabinet-seal-est {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.cabinet-seal-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cabinet-seal-list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: baseline;
}
.seal-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  opacity: 0.7;
}
.seal-line {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-ink);
}
.cabinet-seal-foot {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-slate);
  margin: var(--space-3) 0 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-rule);
  text-align: center;
  max-width: none;
}

/* ────────────────────────────────────────────────────────────────────────
   CASES — section "terrain" : 2 dossiers
   ──────────────────────────────────────────────────────────────────────── */
.cases-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
@media (min-width: 900px) {
  .cases-grid { grid-template-columns: repeat(2, 1fr); }
}
.case-card {
  background: var(--color-bg-warm);
  border: 1px solid var(--color-rule);
  border-left: 3px solid var(--color-accent);
  padding: var(--space-4) var(--space-3);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.case-card:hover { transform: translateY(-3px); }
.case-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-rule);
  gap: var(--space-2);
}
.case-id {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.case-status {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--color-slate);
  padding: 4px 8px;
  border: 1px solid var(--color-rule);
  background: var(--color-bg);
}
.case-tag {
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--color-slate);
  margin: 0;
  max-width: none;
}
.case-amount {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 36px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--color-accent);
  margin: 0 0 var(--space-2);
  max-width: none;
  font-variant-numeric: tabular-nums;
}
.case-card p:last-child { max-width: none; margin: 0; font-size: 15px; line-height: 1.55; }

/* ─ Institutions et chiffres inline ───────────────────────────────────── */
.institution {
  font-variant: all-small-caps;
  letter-spacing: 0.06em;
  font-weight: 500;
  color: var(--color-ink);
}
.num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: 0.96em;
  letter-spacing: -0.005em;
}

/* ────────────────────────────────────────────────────────────────────────
   AVANT / APRÈS — section "effet"
   ──────────────────────────────────────────────────────────────────────── */
.ba-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
@media (min-width: 900px) {
  .ba-grid { grid-template-columns: 1fr 1fr; }
}
.ba-col {
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.ba-before {
  background: var(--color-bg-warm);
  border-top: 3px solid var(--color-slate);
}
.ba-after {
  background: var(--color-ink);
  color: var(--color-bg);
  border-top: 3px solid var(--color-accent);
}
.ba-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-slate);
  margin: 0;
  max-width: none;
}
.ba-label-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: var(--color-slate);
  color: var(--color-bg);
  font-size: 10px;
}
.ba-after .ba-label { color: var(--color-accent); }
.ba-after .ba-label-mark { background: var(--color-accent); color: var(--color-bg); }

.ba-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
}
.ba-list li {
  position: relative;
  padding-left: 28px;
  font-size: 16px;
  line-height: 1.5;
}
.ba-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 16px;
  height: 1px;
  background: var(--color-slate);
}
.ba-after .ba-list li::before { background: var(--color-accent); }
.ba-after .ba-list li { color: var(--color-bg); }

/* ────────────────────────────────────────────────────────────────────────
   FILTER — section "ce n'est pas pour tout le monde"
   ──────────────────────────────────────────────────────────────────────── */
.filter-intro {
  max-width: var(--text-measure);
  margin-top: var(--space-3);
}
.filter-stat {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--color-rare);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}
.filter-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin: var(--space-4) 0 var(--space-3);
}
@media (min-width: 900px) {
  .filter-grid { grid-template-columns: 1fr 1fr; }
}
.filter-col {
  padding: var(--space-4) var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.filter-col:hover { transform: translateY(-3px); }
.filter-col-no { border-top: 3px solid var(--color-rare); }
.filter-col-yes {
  border-top: 3px solid var(--color-accent);
  background: var(--color-bg-warm);
}
.filter-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.005em;
  margin: 0;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-rule);
  max-width: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.filter-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-bg);
  line-height: 1;
}
.filter-col-no .filter-label { color: var(--color-rare); }
.filter-col-no .filter-glyph { background: var(--color-rare); }
.filter-col-yes .filter-label { color: var(--color-accent); }
.filter-col-yes .filter-glyph { background: var(--color-accent); }

.filter-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
}
.filter-list li {
  position: relative;
  padding-left: 28px;
  font-size: 16px;
  line-height: 1.5;
}
.filter-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 18px;
  height: 1px;
}
.filter-col-no .filter-list li::before { background: var(--color-rare); }
.filter-col-yes .filter-list li::before { background: var(--color-accent); }

.filter-conclude {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.4;
  color: var(--color-ink);
  margin: var(--space-3) 0 0;
  max-width: var(--text-measure);
  text-wrap: balance;
  padding-left: var(--space-3);
  border-left: 2px solid var(--color-accent);
}

/* ────────────────────────────────────────────────────────────────────────
   TIMELINE — section "format" : 4 étapes
   ──────────────────────────────────────────────────────────────────────── */
.timeline {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
  position: relative;
  border-top: 1px solid var(--color-rule);
}
.timeline::before {
  content: "";
  position: absolute;
  left: 26px;
  top: var(--space-3);
  bottom: var(--space-3);
  width: 1px;
  background: var(--color-rule);
}
@media (min-width: 900px) {
  .timeline::before { left: 36px; }
}
.timeline-step {
  position: relative;
  padding: var(--space-3) 0 var(--space-3) 72px;
  border-bottom: 1px solid var(--color-rule);
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}
@media (min-width: 900px) {
  .timeline-step {
    grid-template-columns: 200px 1fr;
    align-items: baseline;
    gap: var(--space-4);
    padding-left: 90px;
  }
}
.timeline-dot {
  position: absolute;
  left: 18px;
  top: calc(var(--space-3) + 6px);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 2px solid var(--color-accent);
  z-index: 1;
}
@media (min-width: 900px) {
  .timeline-dot { left: 28px; }
}
.timeline-num {
  position: absolute;
  left: 40px;
  top: var(--space-3);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
  margin: 0;
  max-width: none;
  opacity: 0;
  pointer-events: none;
}
.timeline-when {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-slate);
  margin: 0;
  max-width: none;
}
.timeline-title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.005em;
  color: var(--color-ink);
  margin: 0;
  max-width: none;
  grid-column: 1 / -1;
}
@media (min-width: 900px) {
  .timeline-title { grid-column: 2; margin-top: -22px; }
  .timeline-when { grid-column: 1; grid-row: 1; }
}
.timeline-detail {
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-ink);
  margin: 0;
  max-width: 60ch;
  grid-column: 1 / -1;
}
@media (min-width: 900px) {
  .timeline-detail { grid-column: 2; }
}

/* ────────────────────────────────────────────────────────────────────────
   FORMAT-GRID — Cadence · Engagement · Tarif
   ──────────────────────────────────────────────────────────────────────── */
.format-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  margin: var(--space-5) 0 var(--space-3);
}
@media (min-width: 700px) {
  .format-grid { grid-template-columns: repeat(3, 1fr); }
}
.format-card {
  position: relative;
  padding: var(--space-4) var(--space-3) var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-top: 3px solid var(--color-accent);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: left;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.format-card::before {
  content: "";
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 8px;
  height: 8px;
  background: var(--color-accent);
  opacity: 0.6;
}
.format-card:hover { transform: translateY(-3px); }
.format-card-rate {
  background: var(--color-ink);
  border-color: var(--color-ink);
  border-top-color: var(--color-accent);
}
.format-card-rate::before { background: var(--color-accent); opacity: 1; }
.format-card-rate .format-label { color: var(--color-bg); opacity: 0.6; }
.format-card-rate .format-value { color: var(--color-bg); }
.format-card-rate .format-note { color: var(--color-bg); opacity: 0.6; }
.format-card-rate .num { color: var(--color-bg); }

.format-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-slate);
  margin: 0;
  max-width: none;
}
.format-value {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(40px, 5vw, 54px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin: 0;
  max-width: none;
  font-variant-numeric: tabular-nums;
}
.format-note {
  font-size: 13px;
  color: var(--color-slate);
  margin: 0;
  max-width: none;
  line-height: 1.45;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-rule);
}
.format-card-rate .format-note { border-top-color: rgba(250, 248, 244, 0.18); }

.confidentiality {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-slate);
  font-size: 17px;
  max-width: var(--text-measure);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-rule);
}
.confidentiality-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  height: 24px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--color-bg);
  background: var(--color-accent);
  margin-top: 3px;
}

/* ────────────────────────────────────────────────────────────────────────
   FAQ
   ──────────────────────────────────────────────────────────────────────── */
.faq {
  margin: var(--space-4) 0 0;
  border-top: 1px solid var(--color-rule);
}
.faq-item {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-rule);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}
@media (min-width: 900px) {
  .faq-item {
    grid-template-columns: minmax(280px, 1fr) minmax(0, 1.6fr);
    gap: var(--space-4);
  }
}
.faq-item dt {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--color-ink);
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.faq-num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  flex-shrink: 0;
}
.faq-item dd {
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-ink);
  margin: 0;
  max-width: 60ch;
}

/* ────────────────────────────────────────────────────────────────────────
   FINAL-CTA — vert sapin plein écran avec meta horizontale
   ──────────────────────────────────────────────────────────────────────── */
.final-cta {
  background: var(--color-accent);
  color: var(--color-bg);
  padding-block: var(--space-6);
  margin-top: 0;
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-bg);
  opacity: 0.18;
}
.final-cta h2 {
  color: var(--color-bg);
  font-size: clamp(32px, 4vw, 48px);
  max-width: 22ch;
}
.final-cta p {
  color: var(--color-bg);
  opacity: 0.88;
  max-width: var(--text-measure);
  font-size: 18px;
  line-height: 1.55;
}
.final-cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.final-cta a:focus-visible {
  outline-color: var(--color-bg);
}

.final-cta-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(250, 248, 244, 0.25);
}
.final-cta-meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.final-cta-meta-num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--color-bg);
}
.final-cta-meta-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-bg);
  opacity: 0.65;
}
.final-cta-meta-rule {
  display: block;
  width: 1px;
  height: 32px;
  background: var(--color-bg);
  opacity: 0.25;
}
@media (max-width: 700px) {
  .final-cta-meta-rule { display: none; }
}

/* ─ Footer ─────────────────────────────────────────────────────────────── */
.site-footer {
  border-top: 0;
  margin-top: 0;
  padding: var(--space-5) 0 var(--space-3);
  background: var(--color-ink);
  color: var(--color-bg);
}
.site-footer .logo,
.site-footer .logo:hover { color: var(--color-bg); }
.site-footer .logo-mark {
  background: var(--color-bg);
  color: var(--color-ink);
}
.site-footer .logo-wordmark { color: var(--color-bg); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(250, 248, 244, 0.15);
}
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}
.footer-tag {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--color-bg);
  opacity: 0.7;
  margin: var(--space-2) 0 0;
  max-width: 30ch;
}
.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-bg);
  opacity: 0.55;
  margin: 0 0 var(--space-2);
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.footer-col a {
  color: var(--color-bg);
  border-bottom-color: rgba(250, 248, 244, 0.18);
  font-size: 14px;
}
.footer-col a:hover {
  color: var(--color-bg);
  border-bottom-color: var(--color-bg);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-top: var(--space-3);
  flex-wrap: wrap;
}
.copyright {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--color-bg);
  opacity: 0.55;
  margin: 0;
  max-width: none;
}
.footer-est {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-bg);
  opacity: 0.4;
  margin: 0;
  max-width: none;
}

/* ─ Version switcher ──────────────────────────────────────────────────── */
.version-switch-v1 {
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-slate);
}
.version-switch-v1:hover {
  color: var(--color-ink);
  border-color: var(--color-ink);
}
.version-switch-v1 strong {
  color: var(--color-accent);
  font-weight: 500;
}
@media (max-width: 600px) {
  .version-switch-v1 { bottom: 80px; }
}

/* ─ Cible tactile mobile ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .header-cta, .footer-col a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}