/* Optimike V2.4.1 Codex clean — preprod MCP CSS, no external font URLs. */
/* ==========================================================================
   OPTIMIKE V2.4 — ATELIER ÉDITORIAL COGNITIF
   Design System + Home Styles
   Intensification contrôlée : texture, monogramme, atlas index, folios,
   marginalia, portes d'entrée, filets de repère.
   ========================================================================== */



:root {
  --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', 'Geist Mono', SFMono-Regular, monospace;

  --bg-papier: #F7F5F0;
  --bg-papier-deep: #EFEDE8;
  --bg-papier-muted: #E8E4DE;
  --text-encre: #1A1A1A;
  --text-muted: #6B6560;
  --text-faint: #9A9590;
  --border-lin: #E0DCD4;
  --border-lin-strong: #D0CCC4;

  --bg-encre: #131316;
  --bg-encre-surface: #1C1C20;
  --bg-encre-panel: #242428;
  --text-encre-light: #E8E4DF;
  --text-encre-muted: #8A8580;
  --text-encre-faint: #5A5550;
  --border-encre: #2E2E34;

  --accent-cuivre: #B87333;
  --accent-cuivre-deep: #9A5F28;
  --accent-cuivre-glow: #D4A574;
  --accent-vert: #4A7C59;
  --accent-vert-glow: #6B9E7A;
  --accent-bleu: #2E5A7C;
  --accent-bleu-glow: #6B9EBF;

  --container-max: 1160px;
  --container-narrow: 720px;
  --gap-xs: 0.5rem;
  --gap-sm: 1rem;
  --gap-md: 2rem;
  --gap-lg: 4rem;
  --gap-xl: 6rem;
  --gap-xxl: 8rem;
  --editorial-margin: 3rem;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans); font-size: 16px; line-height: 1.65;
  color: var(--text-encre); background-color: var(--bg-papier);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* Grain de papier intensifié */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat; background-size: 200px 200px;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif); font-weight: 500; line-height: 1.15;
  letter-spacing: -0.02em; color: var(--text-encre);
}
h1 { font-size: clamp(2.25rem, 5.5vw, 4rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); }
h3 { font-family: var(--font-sans); font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
h4 { font-family: var(--font-sans); font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
p { margin-bottom: 1.25rem; }
p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   FOLIOS & REPÈRES ÉDITORIAUX
   -------------------------------------------------------------------------- */
.opx-inner { max-width: var(--container-max); margin: 0 auto; padding: 0 1.5rem; position: relative; }
@media (min-width: 640px) { .opx-inner { padding: 0 2rem; } }
@media (min-width: 1024px) { .opx-inner { padding: 0 2.5rem; } }

.opx-inner-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 1.5rem; }
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-lg { max-width: 800px; }
.max-w-md { max-width: 600px; }
.justify-center { justify-content: center; }
.align-center { align-items: center; }
.bg-muted { background-color: var(--bg-papier-deep); }
.bg-papier { background-color: var(--bg-papier); }
.bg-encre { background-color: var(--bg-encre); }

/* Numéro de section */
.opx-section-num {
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint);
  margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem;
}
.opx-section-num::before {
  content: ''; display: inline-block; width: 4px; height: 4px;
  background: var(--accent-cuivre); transform: rotate(45deg);
}

/* Folio (numéro de page) */
.opx-folio {
  position: absolute;
  right: 1.5rem;
  top: var(--gap-lg);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-faint);
  letter-spacing: 0.1em;
}
@media (min-width: 1024px) { .opx-folio { right: 2.5rem; } }

/* Filet de repère horizontal */
.opx-guide-line {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--border-lin);
  opacity: 0.4;
}
.opx-guide-line.top { top: 0; }
.opx-guide-line.bottom { bottom: 0; }

/* Marginalia : note de marge */
.opx-marginalia {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-faint);
  letter-spacing: 0.02em;
  line-height: 1.4;
}

.opx-kicker {
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: 1rem;
}

.opx-lead {
  font-size: clamp(1.05rem, 1.8vw, 1.2rem); line-height: 1.6; color: var(--text-muted); max-width: 560px;
}

.label-mono {
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.06em;
}

.text-accent-bleu { color: var(--accent-bleu); }
.text-accent-vert { color: var(--accent-vert); }
.text-accent-cuivre { color: var(--accent-cuivre); }
.text-faint { color: var(--text-faint); }
.text-encre-muted { color: var(--text-encre-muted); }
.text-encre-faint { color: var(--text-encre-faint); }

.bridge-formation-tag {
  color: var(--accent-cuivre-glow);
  font-family: var(--font-mono);
  font-size: 0.7rem;
}

.opx-rule {
  display: flex; align-items: center; gap: 1rem; margin: var(--gap-lg) 0;
}
.opx-rule::before, .opx-rule::after {
  content: ''; flex: 1; height: 1px; background: var(--border-lin);
}
.opx-rule span {
  font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-faint); letter-spacing: 0.1em;
}

.opx-editorial-marker {
  position: relative; padding-left: var(--editorial-margin);
}
.opx-editorial-marker::before {
  content: ''; position: absolute; left: 0; top: 0.25rem; bottom: 0.25rem;
  width: 1px; background: var(--border-lin-strong);
}
@media (max-width: 767px) {
  .opx-editorial-marker { padding-left: 0; }
  .opx-editorial-marker::before { display: none; }
}

.opx-actions { display: flex; gap: var(--gap-sm); flex-wrap: wrap; }
.opx-button, .opx-button-secondary {
  font-family: var(--font-sans); font-weight: 600; font-size: 0.95rem;
  padding: 0.9rem 1.75rem; min-height: 48px; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center; width: 100%; border-radius: 2px;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  cursor: pointer; border: none; position: relative; overflow: hidden;
}
.opx-button::after, .opx-button-secondary::after {
  content: ''; position: absolute; inset: 0; opacity: 0;
  transition: opacity 0.2s ease;
  background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 60%);
}
.opx-button:hover::after, .opx-button-secondary:hover::after { opacity: 1; }
@media (min-width: 480px) { .opx-button, .opx-button-secondary { width: auto; } }

.opx-button { background-color: var(--text-encre); color: var(--bg-papier); }
.opx-button:hover { background-color: #2A2A2A; transform: translateY(-1px); }

.opx-button-secondary { background-color: transparent; color: var(--text-encre); border: 1px solid var(--border-lin-strong); }
.opx-button-secondary:hover { background-color: var(--bg-papier-muted); border-color: var(--text-muted); }

.opx-button-cuivre { background-color: var(--accent-cuivre); color: #fff; }
.opx-button-cuivre:hover { background-color: var(--accent-cuivre-deep); }

.opx-button-encre { background-color: var(--bg-encre); color: var(--text-encre-light); border: 1px solid var(--border-encre); }
.opx-button-encre:hover { background-color: var(--bg-encre-surface); }

/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */
.site-header {
  padding: 1.25rem 0; border-bottom: 1px solid var(--border-lin);
  position: sticky; top: 0;
  background: rgba(247, 245, 240, 0.92);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  z-index: 100;
}
.header-inner { display: flex; justify-content: space-between; align-items: center; }

.logo {
  font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700;
  letter-spacing: -0.03em; color: var(--text-encre);
}
.logo span { color: var(--accent-cuivre); }

.site-nav { display: flex; align-items: center; gap: 1.5rem; }
.site-nav a {
  font-size: 0.875rem; font-weight: 500; color: var(--text-muted);
  transition: color 0.2s ease; position: relative;
}
.site-nav a:hover { color: var(--text-encre); }
.site-nav a.active { color: var(--text-encre); }
.site-nav a.active::after {
  content: ''; position: absolute; bottom: -4px; left: 0; right: 0;
  height: 2px; background: var(--accent-cuivre);
}
@media (max-width: 639px) {
  .site-nav { gap: 1rem; }
  .site-nav a { font-size: 0.8rem; }
}

/* --------------------------------------------------------------------------
   HERO — Atlas index renforcé
   -------------------------------------------------------------------------- */
.opx-hero { padding: var(--gap-xl) 0; position: relative; }
.opx-hero-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--gap-lg); align-items: start;
}
@media (min-width: 1024px) {
  .opx-hero-grid { grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: var(--gap-xl); }
}

.hero-content h1 { margin-bottom: 1.25rem; max-width: 540px; }
.hero-content .opx-lead { margin-bottom: 1.75rem; max-width: 480px; }

/* Note éditoriale avec tampon */
.hero-editor-note {
  display: flex; align-items: center; gap: 0.75rem;
  margin-bottom: var(--gap-md); padding: 0.75rem 1rem;
  background: var(--bg-papier-deep); border: 1px solid var(--border-lin);
  border-radius: 2px; max-width: fit-content;
}
.hero-editor-seal {
  width: 36px; height: 36px;
  border: 2px solid var(--text-encre);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 0.85rem; font-weight: 600;
  color: var(--text-encre); flex-shrink: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
  position: relative;
}
.hero-editor-seal::after {
  content: ''; position: absolute; bottom: 3px; right: 3px;
  width: 4px; height: 4px; background: var(--accent-cuivre);
}
.hero-editor-text { font-size: 0.8rem; line-height: 1.4; color: var(--text-muted); }
.hero-editor-text strong { color: var(--text-encre); font-weight: 600; }

/* Hero Atlas — Fiches index avec coins coupés */
.opx-hero-visual {
  position: relative; border: 1px solid var(--border-lin-strong);
  background: var(--bg-papier-deep); padding: 1.5rem; border-radius: 2px;
}
.hero-atlas-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }

.hero-index-card {
  padding: 1rem; background: var(--bg-papier);
  border: 1px solid var(--border-lin-strong);
  transition: all 0.2s ease;
  position: relative;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.hero-index-card:hover {
  border-color: var(--accent-cuivre);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.hero-index-card .card-coords {
  font-family: var(--font-mono); font-size: 0.55rem; color: var(--text-faint);
  letter-spacing: 0.1em; margin-bottom: 0.5rem; display: flex; justify-content: space-between;
}
.hero-index-card .card-title {
  font-family: var(--font-sans); font-size: 0.85rem; font-weight: 600;
  color: var(--text-encre); margin-bottom: 0.4rem;
}
.hero-index-card .card-excerpt-lines {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 0.5rem;
}
.hero-index-card .card-excerpt-lines span {
  height: 3px; background: var(--border-lin); border-radius: 1px;
}
.hero-index-card .card-excerpt-lines span:nth-child(1) { width: 85%; }
.hero-index-card .card-excerpt-lines span:nth-child(2) { width: 60%; }
.hero-index-card .card-stamp {
  font-family: var(--font-mono); font-size: 0.6rem;
  text-transform: uppercase; letter-spacing: 0.05em;
  display: inline-block; padding: 2px 6px;
  border: 1px solid var(--border-lin);
  color: var(--text-faint);
}
.hero-index-card .card-stamp.is-bleu { color: var(--accent-bleu); border-color: var(--accent-bleu); }
.hero-index-card .card-stamp.is-vert { color: var(--accent-vert); border-color: var(--accent-vert); }
.hero-index-card .card-stamp.is-cuivre { color: var(--accent-cuivre); border-color: var(--accent-cuivre); }

.hero-atlas-footer {
  margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--border-lin);
  font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-faint);
  display: flex; justify-content: space-between; align-items: center;
}
.hero-atlas-footer .atlas-live {
  display: flex; align-items: center; gap: 0.4rem;
}
.hero-atlas-footer .atlas-live::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent-vert); animation: pulse-live 2s ease-in-out infinite;
}
@keyframes pulse-live {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@media (min-width: 640px) { .hero-atlas-grid { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------------------------
   AUTORITÉ
   -------------------------------------------------------------------------- */
.opx-authority {
  padding: var(--gap-md) 0; border-top: 1px solid var(--border-lin); border-bottom: 1px solid var(--border-lin);
  position: relative;
}
.opx-authority-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--gap-md);
}
@media (min-width: 640px) {
  .opx-authority-grid { grid-template-columns: repeat(3, 1fr); gap: var(--gap-lg); }
}
.authority-item { display: flex; flex-direction: column; gap: 0.35rem; }
.authority-number {
  font-family: var(--font-serif); font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 600; color: var(--text-encre); letter-spacing: -0.02em;
}
.authority-label {
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.4;
}
.authority-item.is-primary .authority-number { color: var(--accent-cuivre); }

/* --------------------------------------------------------------------------
   SECTIONS
   -------------------------------------------------------------------------- */
.opx-section { padding: var(--gap-xl) 0; position: relative; }
@media (min-width: 1024px) { .opx-section { padding: var(--gap-xxl) 0; } }

.section-header { margin-bottom: var(--gap-lg); }
.section-header h2 { margin-bottom: 0.75rem; max-width: 600px; }
.section-header .opx-lead { max-width: 560px; }

/* --------------------------------------------------------------------------
   PORTES D'ENTRÉE — Section média vivant
   -------------------------------------------------------------------------- */
.opx-reading-section { padding: var(--gap-xl) 0; position: relative; }
@media (min-width: 1024px) { .opx-reading-section { padding: var(--gap-xxl) 0; } }

.opx-reading-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--gap-sm);
}
@media (min-width: 640px) { .opx-reading-grid { grid-template-columns: repeat(3, 1fr); } }

.reading-card {
  display: flex; flex-direction: column;
  padding: 1.5rem;
  background: var(--bg-papier); border: 1px solid var(--border-lin);
  border-radius: 2px; text-decoration: none; color: var(--text-encre);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
  position: relative;
}
.reading-card::before {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px;
  background: transparent; transition: background 0.25s ease;
}
.reading-card:hover {
  border-color: var(--border-lin-strong);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04); transform: translateY(-1px);
}
.reading-card:hover::before { background: var(--accent-cuivre); }

.reading-card .reading-meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 0.75rem;
}
.reading-card .reading-tag {
  font-family: var(--font-mono); font-size: 0.65rem;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.reading-card .reading-date {
  font-family: var(--font-mono); font-size: 0.6rem; color: var(--text-faint);
}
.reading-card h3 {
  font-family: var(--font-serif); font-size: 1.15rem; font-weight: 500;
  margin-bottom: 0.5rem; letter-spacing: -0.01em; line-height: 1.25;
}
.reading-card p {
  font-size: 0.88rem; color: var(--text-muted); line-height: 1.55;
  margin: 0 0 1rem 0; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.reading-card .reading-link {
  margin-top: auto;
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500;
  color: var(--text-muted); display: flex; align-items: center; gap: 0.4rem;
  transition: color 0.2s ease;
}
.reading-card:hover .reading-link { color: var(--accent-cuivre); }

/* --------------------------------------------------------------------------
   TERRITOIRE ÉDITORIAL
   -------------------------------------------------------------------------- */
.opx-editorial-grid { display: grid; grid-template-columns: 1fr; gap: var(--gap-sm); }
@media (min-width: 640px) { .opx-editorial-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .opx-editorial-grid {
    grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(140px, auto);
  }
  .editorial-card.is-large { grid-column: span 6; grid-row: span 2; }
  .editorial-card.is-medium { grid-column: span 3; }
  .editorial-card.is-small { grid-column: span 3; }
}

.editorial-card {
  display: flex; flex-direction: column; padding: 1.5rem;
  background: var(--bg-papier); border: 1px solid var(--border-lin);
  border-radius: 2px; text-decoration: none; color: var(--text-encre);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
  position: relative;
}
.editorial-card::before {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px;
  background: transparent; transition: background 0.25s ease;
}
.editorial-card:hover {
  border-color: var(--border-lin-strong);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04); transform: translateY(-1px);
}
.editorial-card:hover::before { background: var(--accent-cuivre); }

.editorial-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.editorial-card h3 {
  font-family: var(--font-serif); font-size: 1.35rem; font-weight: 500;
  margin-bottom: 0.5rem; letter-spacing: -0.01em;
}
.editorial-card.is-large h3 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
.editorial-card p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.55; margin: 0; }

.editorial-card.is-large {
  background: var(--bg-papier-deep); border: none;
}
.editorial-card.is-large:hover::before { background: transparent; }
.editorial-card.is-large:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06); }

.editorial-card.is-subtle {
  justify-content: center; align-items: center; background: transparent; border-style: dashed;
}
.editorial-card.is-subtle h3 { font-family: var(--font-sans); font-size: 1rem; font-weight: 500; color: var(--text-muted); margin: 0; }
.editorial-card.is-subtle:hover h3 { color: var(--text-encre); }

/* --------------------------------------------------------------------------
   PORTRAIT ÉDITEUR — Tampon MA
   -------------------------------------------------------------------------- */
.opx-editor-section {
  padding: var(--gap-xl) 0; background: var(--bg-papier-deep);
  border-top: 1px solid var(--border-lin); border-bottom: 1px solid var(--border-lin);
  position: relative;
}
.opx-editor-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--gap-lg); align-items: center;
}
@media (min-width: 768px) {
  .opx-editor-grid { grid-template-columns: 160px 1fr; gap: var(--gap-xl); }
}
@media (min-width: 1024px) {
  .opx-editor-grid { grid-template-columns: 200px 1fr; }
}

/* Tampon éditorial */
.editor-seal {
  width: 130px; height: 130px;
  border: 3px solid var(--text-encre);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 2.25rem; font-weight: 600;
  color: var(--text-encre);
  position: relative; margin: 0 auto;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}
.editor-seal::after {
  content: ''; position: absolute; bottom: 6px; right: 6px;
  width: 10px; height: 10px; background: var(--accent-cuivre);
}
@media (min-width: 768px) {
  .editor-seal { width: 150px; height: 150px; font-size: 2.75rem; margin: 0; }
}

.editor-bio h3 {
  font-family: var(--font-serif); font-size: 1.5rem; font-weight: 500; margin-bottom: 0.5rem;
}
.editor-bio .editor-role {
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent-cuivre);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 1rem;
}
.editor-bio p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; margin-bottom: 1rem; }
.editor-bio .editor-proof {
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-faint);
  padding-top: 0.75rem; border-top: 1px solid var(--border-lin);
}

/* --------------------------------------------------------------------------
   DIAGNOSTIC
   -------------------------------------------------------------------------- */
.opx-diagnostic { padding: var(--gap-xl) 0; position: relative; }
.opx-bento-grid {
  display: grid; grid-template-columns: 1fr; gap: 1px;
  background: var(--border-lin); border: 1px solid var(--border-lin); margin-top: var(--gap-md);
}
@media (min-width: 640px) { .opx-bento-grid { grid-template-columns: repeat(3, 1fr); } }

.opx-bento-card {
  background: var(--bg-papier); padding: 2rem 1.5rem; transition: background-color 0.2s ease;
}
.opx-bento-card:hover { background: var(--bg-papier-deep); }
.opx-bento-card h3 {
  font-family: var(--font-sans); font-size: 1.05rem; font-weight: 600;
  margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem;
}
.opx-bento-card h3::before {
  content: ''; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--accent-cuivre); flex-shrink: 0;
}
.opx-bento-card p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.55; margin: 0; }

/* --------------------------------------------------------------------------
   ÉTABLI / SOLUTION ÉLYSIA
   -------------------------------------------------------------------------- */
.mode-encre { background-color: var(--bg-encre); color: var(--text-encre-light); color-scheme: dark; }
.opx-workbench-section { padding: var(--gap-xl) 0; position: relative; }
.opx-workbench-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--gap-lg); align-items: center;
}
@media (min-width: 1024px) {
  .opx-workbench-grid { grid-template-columns: 0.8fr 1.2fr; gap: var(--gap-xl); }
}

.opx-workbench-copy .opx-kicker { color: var(--accent-cuivre-glow); margin-bottom: 0.75rem; }
.opx-workbench-copy h2 { color: var(--text-encre-light); margin-bottom: 1rem; }
.opx-workbench-copy .opx-lead { color: var(--text-encre-muted); }

.opx-proof-stage {
  border: 1px solid var(--border-encre); border-radius: 4px;
  background: var(--bg-encre-surface);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5); overflow: hidden;
  display: flex; flex-direction: column;
}
.opx-proof-toolbar {
  background: var(--bg-encre); border-bottom: 1px solid var(--border-encre);
  padding: 0.6rem 1rem; display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 0.65rem;
}
@media (min-width: 640px) {
  .opx-proof-toolbar { font-size: 0.75rem; padding: 0.75rem 1rem; }
}
.opx-proof-title { color: var(--text-encre-muted); }
.opx-proof-status { color: var(--text-encre-faint); }

.opx-doclab.is-compact { display: flex; flex-direction: column; }
@media (min-width: 768px) { .opx-doclab.is-compact { flex-direction: row; } }

.opx-doclab-main {
  border-bottom: 1px solid var(--border-encre);
  display: flex; flex-direction: column; flex-grow: 1;
}
@media (min-width: 768px) {
  .opx-doclab-main { border-bottom: none; border-right: 1px solid var(--border-encre); }
}

.opx-doclab-note { padding: 1rem; position: relative; }
@media (min-width: 640px) { .opx-doclab-note { padding: 1.5rem; } }

.opx-node-connector {
  height: 12px; width: 2px; background: var(--border-encre); margin-left: 1.5rem;
}
@media (min-width: 640px) { .opx-node-connector { margin-left: 2rem; height: 16px; } }

.opx-doclab-note.is-canon { background: rgba(255,255,255,0.02); }
.opx-doclab-note.is-canon-active { background: rgba(184, 115, 51, 0.06); }
.opx-doclab-note-header { display: flex; justify-content: space-between; margin-bottom: 0.75rem; }

.accent-blue { color: var(--accent-bleu-glow); }
.accent-green { color: var(--accent-vert-glow); }
.accent-cuivre { color: var(--accent-cuivre-glow); }

.note-content h3 {
  font-family: var(--font-sans); font-size: 1rem; font-weight: 500;
  color: var(--text-encre-light); margin-bottom: 0.5rem;
}
.note-content p {
  font-size: 0.85rem; color: var(--text-encre-muted); line-height: 1.5; margin-bottom: 0;
}
.note-content .muted {
  font-size: 0.75rem; margin-top: 0.5rem; opacity: 0.7; font-family: var(--font-mono);
}
.opx-doclab-highlight { color: var(--text-encre-light); font-weight: 500; }

.opx-doclab-panel { padding: 1rem; background: var(--bg-encre); }
@media (min-width: 640px) { .opx-doclab-panel { padding: 1.5rem; min-width: 240px; } }

.panel-grid-mobile {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start;
}
@media (min-width: 768px) { .panel-grid-mobile { grid-template-columns: 1fr; } }

.meta-block { display: flex; flex-direction: column; }
.meta-label {
  font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-encre-muted);
  margin-bottom: 0.2rem; text-transform: uppercase;
}
.meta-val { font-size: 0.85rem; color: var(--text-encre-light); line-height: 1.3; }
.panel-grid-mobile.outputs-only { grid-template-columns: 1fr; }

.opx-doclab-output {
  grid-column: span 2; padding: 0.75rem;
  border-left: 2px solid var(--accent-cuivre-glow);
  background: rgba(212, 165, 116, 0.05);
}
@media (min-width: 768px) { .opx-doclab-output { grid-column: span 1; margin-top: 1rem; } }

.opx-doclab-output strong {
  display: block; font-family: var(--font-sans); color: var(--text-encre-light);
  font-size: 0.9rem; margin-top: 0.25rem;
}

/* --------------------------------------------------------------------------
   CTA FINAL
   -------------------------------------------------------------------------- */
.opx-cta-section { padding: var(--gap-xl) 0; text-align: center; position: relative; }
.opx-cta-section h2 { margin-bottom: 0.75rem; }
.opx-cta-section .opx-lead { margin: 0 auto var(--gap-md); }
.opx-cta-section .opx-actions { justify-content: center; }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  padding: var(--gap-lg) 0 var(--gap-md); border-top: 1px solid var(--border-lin);
  background: var(--bg-papier-deep);
}
.footer-inner {
  display: flex; flex-direction: column; gap: var(--gap-md);
}
@media (min-width: 640px) {
  .footer-inner { flex-direction: row; justify-content: space-between; align-items: flex-start; }
}

.footer-brand {
  font-family: var(--font-serif); font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem;
}
.footer-brand span { color: var(--accent-cuivre); }
.footer-tagline { font-size: 0.8rem; color: var(--text-faint); max-width: 280px; }

.footer-links { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.footer-links a { font-size: 0.85rem; color: var(--text-muted); transition: color 0.2s ease; }
.footer-links a:hover { color: var(--text-encre); }

.footer-bottom {
  margin-top: var(--gap-md); padding-top: var(--gap-sm); border-top: 1px solid var(--border-lin);
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-faint);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem;
}

/* --------------------------------------------------------------------------
   ACCESSIBILITÉ & UTILITAIRES
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--accent-cuivre); outline-offset: 2px;
}
.opx-button:focus-visible, .opx-button-secondary:focus-visible { outline-offset: 3px; }

.skip-link {
  position: absolute; top: -40px; left: 0; background: var(--text-encre);
  color: var(--bg-papier); padding: 8px; text-decoration: none;
  z-index: 1000; font-size: 0.8rem;
}
.skip-link:focus { top: 0; }

@media (max-width: 639px) {
  .opx-hero, .opx-section, .opx-workbench-section, .opx-cta-section, .opx-reading-section, .opx-editor-section, .opx-diagnostic { padding: var(--gap-lg) 0; }
}


/* Formation page */
/* ==========================================================================
   OPTIMIKE V2.4 — FORMATION ÉLYSIA OS (Surcharges)
   Intensification : carte de chantier, avant/après note, numéros CSS pur.
   ========================================================================== */

/* --------------------------------------------------------------------------
   SYSTEM CARD (Hero formation)
   -------------------------------------------------------------------------- */
.opx-system-card {
  border: 1px solid var(--border-encre); border-radius: 4px;
  background: var(--bg-encre); box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  overflow: hidden; width: 100%;
}
@media (min-width: 1024px) { .opx-system-card { box-shadow: 0 15px 30px rgba(0,0,0,0.4); } }

.opx-window-header {
  background: var(--bg-encre-surface); border-bottom: 1px solid var(--border-encre);
  padding: 0.5rem 1rem; display: flex; align-items: center; gap: 0.5rem;
}
.opx-window-header .dot { width: 10px; height: 10px; border-radius: 50%; background: #444; }
.opx-window-header .dot:nth-child(1) { background: #FF5F56; }
.opx-window-header .dot:nth-child(2) { background: #FFBD2E; }
.opx-window-header .dot:nth-child(3) { background: #27C93F; }
.window-title { margin-left: 1rem; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-encre-muted); }

.opx-system-body { padding: 1.5rem; }
@media (min-width: 640px) { .opx-system-body { padding: 2rem; } }

.opx-frontmatter {
  margin-top: 1.5rem; background: rgba(255,255,255,0.03);
  border-left: 2px solid var(--accent-cuivre-glow); padding: 1rem;
  font-family: var(--font-mono); font-size: 0.8rem; overflow-x: auto;
}
@media (min-width: 640px) { .opx-frontmatter { font-size: 0.85rem; padding: 1.25rem; } }

.fm-row { margin-bottom: 0.75rem; display: flex; flex-direction: column; }
@media (min-width: 640px) { .fm-row { flex-direction: row; gap: 1rem; margin-bottom: 0.5rem; } }
.fm-key { color: var(--accent-bleu-glow); width: auto; flex-shrink: 0; }
@media (min-width: 640px) { .fm-key { width: 140px; } }
.fm-val { color: var(--text-encre-light); word-wrap: break-word; }

/* --------------------------------------------------------------------------
   LIVRABLES — Numéros en CSS pur
   -------------------------------------------------------------------------- */
.card-num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent-cuivre);
  margin-bottom: 0.5rem;
}

.is-highlight {
  background: #FFFFFF;
  border-bottom: 2px solid var(--accent-cuivre);
}

/* --------------------------------------------------------------------------
   CARTE DE CHANTIER — Curriculum horizontal
   -------------------------------------------------------------------------- */
.opx-build-map {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-sm);
  margin-top: var(--gap-lg);
  position: relative;
}
@media (min-width: 768px) {
  .opx-build-map {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }
}

.opx-build-step {
  position: relative;
  padding: 1.5rem 1rem;
  text-align: center;
  background: var(--bg-papier);
  border: 1px solid var(--border-lin);
}
@media (min-width: 768px) {
  .opx-build-step {
    border: none;
    background: transparent;
    padding: 1.5rem 0.5rem;
  }
  .opx-build-step::after {
    content: '';
    position: absolute;
    top: 2.5rem;
    left: 60%;
    width: 80%;
    height: 2px;
    background: var(--border-lin);
    z-index: 0;
  }
  .opx-build-step:last-child::after { display: none; }
}

.build-plot {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--bg-papier);
  border: 2px solid var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500;
  margin: 0 auto 1rem;
  position: relative; z-index: 1;
  color: var(--text-muted);
}
.build-plot.is-active {
  border-color: var(--accent-cuivre);
  color: var(--accent-cuivre);
}
.build-plot.is-final {
  border-color: var(--accent-cuivre);
  background: var(--accent-cuivre);
  color: #fff;
}

.build-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin-bottom: 0.5rem;
}

.build-step-title {
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--text-encre);
}

.build-step-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   AVANT/APRÈS NOTE — Preuve tangible
   -------------------------------------------------------------------------- */
.opx-note-transform {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-sm);
  margin: var(--gap-md) 0;
}
@media (min-width: 768px) {
  .opx-note-transform { grid-template-columns: 1fr 1fr; }
}

.note-slab {
  padding: 1.5rem;
  border: 1px solid var(--border-lin);
  background: var(--bg-papier);
  position: relative;
}
.note-slab.is-after {
  border-color: var(--accent-cuivre);
  background: var(--bg-papier-deep);
}

.note-slab-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-lin);
}
.note-slab.is-after .note-slab-header {
  border-bottom-color: var(--accent-cuivre);
}

.note-slab-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.note-slab-tag.is-raw { color: var(--accent-bleu); }
.note-slab-tag.is-canon { color: var(--accent-cuivre); }

.note-slab h4 {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--text-encre);
}
.note-slab p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}

/* Connector arrow between slabs on desktop */
@media (min-width: 768px) {
  .opx-note-transform {
    position: relative;
  }
  .opx-note-transform::before {
    content: '→';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-mono);
    font-size: 1.25rem;
    color: var(--accent-cuivre);
    background: var(--bg-papier);
    padding: 0 0.5rem;
    z-index: 2;
  }
}

/* --------------------------------------------------------------------------
   QUALIFICATION — Pour qui / Pas pour qui
   -------------------------------------------------------------------------- */
.opx-qualify-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--gap-sm);
  margin-top: var(--gap-md);
}
@media (min-width: 640px) { .opx-qualify-grid { grid-template-columns: 1fr 1fr; } }

.opx-qualify-card {
  padding: 2rem; border: 1px solid var(--border-lin); border-radius: 2px;
  background: var(--bg-papier);
}
.opx-qualify-card h3 {
  font-family: var(--font-sans); font-size: 1.1rem; font-weight: 600;
  margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem;
}
.opx-qualify-card.for h3::before {
  content: '+'; color: var(--accent-vert); font-weight: 700;
}
.opx-qualify-card.against h3::before {
  content: '−'; color: var(--text-faint); font-weight: 700;
}
.opx-qualify-card ul {
  list-style: none; padding: 0; margin: 0;
}
.opx-qualify-card li {
  font-size: 0.9rem; color: var(--text-muted); padding: 0.4rem 0;
  border-bottom: 1px solid var(--border-lin);
}
.opx-qualify-card li:last-child { border-bottom: none; }


/* Article shell */
/* ==========================================================================
   OPTIMIKE V2.4 — ARTICLE SHELL & PONTS COCON (Surcharges)
   Intensification : ponts propriétaires, tampons, coins marqués, folios.
   ========================================================================== */

/* --------------------------------------------------------------------------
   STRUCTURE ARTICLE
   -------------------------------------------------------------------------- */
.opx-article-container {
  max-width: 760px;
  margin: 4rem auto;
  padding: 0 1.5rem;
  position: relative;
}

@media (max-width: 640px) {
  .opx-article-container > .opx-folio {
    display: none;
  }
}

.article-header { margin-bottom: 3rem; }
.article-title { font-size: clamp(2rem, 4vw, 3.5rem); margin-bottom: 0.5rem; }
.article-meta {
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted);
}
.article-meta a {
  color: var(--text-encre); text-decoration: none;
  border-bottom: 1px solid var(--border-lin);
}

.article-content {
  font-family: var(--font-sans); font-size: 1.125rem;
  line-height: 1.7; color: #333;
}
.article-content p { margin-bottom: 1.5rem; }
.article-content h2 {
  margin-top: 3rem; margin-bottom: 1.25rem; font-size: 2rem;
}
.article-content h3 {
  margin-top: 2rem; margin-bottom: 1rem; font-size: 1.5rem;
  font-family: var(--font-sans); font-weight: 600;
}

/* --------------------------------------------------------------------------
   TABLE OF CONTENTS
   -------------------------------------------------------------------------- */
.opx-toc {
  background: var(--bg-papier-deep); padding: 1.5rem; border-radius: 2px;
  margin: 2rem 0; font-size: 0.95rem; border: 1px solid var(--border-lin);
  position: relative;
}
.opx-toc::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--accent-cuivre);
  opacity: 0.3;
}
.opx-toc strong {
  font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: 0.05em; font-size: 0.8rem; display: block; margin-bottom: 1rem;
  color: var(--text-muted);
}
.opx-toc ul { list-style: none; padding-left: 0; margin-bottom: 0; }
.opx-toc li { margin-bottom: 0.5rem; }
.opx-toc a {
  color: var(--text-encre); text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color 0.2s;
}
.opx-toc a:hover { border-color: var(--text-encre); }

/* --------------------------------------------------------------------------
   CALLOUT ÉDITORIAL
   -------------------------------------------------------------------------- */
.opx-callout {
  border-left: 3px solid var(--border-lin-strong); padding: 1rem 1.5rem;
  margin: 2rem 0; font-size: 1rem; background: var(--bg-papier-deep);
  position: relative;
}
.opx-callout::before {
  content: 'NB';
  position: absolute;
  top: -0.6rem;
  left: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  background: var(--bg-papier);
  padding: 0 0.3rem;
}
.opx-callout strong {
  display: block; font-family: var(--font-mono); font-size: 0.8rem;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.5rem;
}
.opx-callout p { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   PONTS COCON — 3 intensités propriétaires
   -------------------------------------------------------------------------- */
.opx-cocon-bridge { margin: 3rem 0; border-radius: 2px; position: relative; }

/* 1. COLD : Discret, guide gratuit, repère connexion */
.opx-cocon-bridge.is-cold {
  background: var(--bg-papier-deep); border-left: 2px solid var(--accent-bleu);
  padding: 1.25rem 1.5rem; font-size: 1rem;
}
.opx-cocon-bridge.is-cold .bridge-tag {
  display: block; font-family: var(--font-mono); font-size: 0.7rem;
  text-transform: uppercase; color: var(--accent-bleu); margin-bottom: 0.5rem;
}
.opx-cocon-bridge.is-cold p { margin-bottom: 0; }
.opx-cocon-bridge.is-cold a {
  color: var(--text-encre); font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px;
}
.opx-cocon-bridge.is-cold::before {
  content: '→';
  position: absolute;
  left: -1rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--accent-bleu);
  opacity: 0.5;
}
@media (max-width: 767px) {
  .opx-cocon-bridge.is-cold::before { display: none; }
}

/* 2. WARM : Carte de méthode, coin marqué */
.opx-cocon-bridge.is-warm {
  background: #FFFFFF; border: 1px solid var(--border-lin);
  padding: 0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.03);
  position: relative;
  overflow: hidden;
}
.opx-cocon-bridge.is-warm::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 24px; height: 24px;
  background: var(--accent-cuivre);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  opacity: 0.15;
}
.opx-cocon-bridge.is-warm .bridge-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border-lin);
  background: var(--bg-papier-deep);
}
.opx-cocon-bridge.is-warm .bridge-body {
  padding: 1.5rem 2rem;
}
.opx-cocon-bridge.is-warm h3 {
  font-family: var(--font-serif); font-size: 1.5rem; margin-top: 0;
  margin-bottom: 0.5rem; color: var(--text-encre);
}
.opx-cocon-bridge.is-warm p {
  color: var(--text-muted); font-size: 1rem; margin-bottom: 1.5rem;
}
.opx-cocon-bridge.is-warm .bridge-link {
  font-family: var(--font-mono); font-size: 0.85rem; font-weight: 500;
  color: var(--text-encre); text-decoration: none;
  border-bottom: 1px solid var(--text-encre); padding-bottom: 2px;
}

/* 3. HOT : Bloc OS sombre, tampon FORMATION, conversion forte */
.opx-cocon-bridge.is-hot {
  border: 1px solid var(--border-encre); padding: 0;
  position: relative;
}
.opx-cocon-bridge.is-hot::before {
  content: 'FORMATION';
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent-cuivre-glow);
  opacity: 0.6;
  z-index: 2;
}
.opx-cocon-bridge.is-hot .bridge-header {
  background: var(--bg-encre); border-bottom: 1px solid var(--border-encre);
  padding: 0.75rem 1rem; display: flex; justify-content: space-between; align-items: center;
}
.opx-cocon-bridge.is-hot .bridge-body {
  padding: 2rem; background: var(--bg-encre-surface);
}
.opx-cocon-bridge.is-hot h3 { margin-top: 0; margin-bottom: 0.75rem; font-size: 1.5rem; color: var(--text-encre-light); }
.opx-cocon-bridge.is-hot p { font-size: 1rem; margin-bottom: 1.5rem; color: var(--text-encre-muted); }
.opx-cocon-bridge.is-hot .opx-button { width: 100%; }
@media (min-width: 640px) {
  .opx-cocon-bridge.is-hot .opx-button { width: auto; }
}

/* --------------------------------------------------------------------------
   RELATED POSTS
   -------------------------------------------------------------------------- */
.opx-related-posts { margin-top: 5rem; border-top: 1px solid var(--border-lin); padding-top: 3rem; position: relative; }
.opx-related-posts::before {
  content: '▼';
  position: absolute;
  top: -0.6rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--text-faint);
  background: var(--bg-papier);
  padding: 0 0.5rem;
}
.opx-related-posts h3 {
  font-family: var(--font-mono); font-size: 0.85rem; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 2rem;
}
.opx-related-posts h4 {
  font-family: var(--font-serif); font-size: 1.25rem; margin-bottom: 0; color: var(--text-encre);
}


/* ==========================================================================
   WordPress shell compatibility
   ========================================================================== */
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }
.site-nav .menu, .footer-links .menu { display: flex; align-items: center; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.site-nav .menu a, .footer-links .menu a { color: inherit; text-decoration: none; }
.optm-site-main { min-height: 60vh; }
.optm-article { margin: 0; }
.optm-content > :where(.opx-hero, .opx-authority, .opx-section, .opx-editor-section, .opx-diagnostic, .opx-workbench-section, .opx-cta-section):first-child { margin-top: 0; }
.optm-standard-shell { max-width: var(--container-narrow); margin: 0 auto; padding: var(--gap-lg) 1.5rem var(--gap-xl); }
.optm-standard-shell .optm-page-header { margin-bottom: var(--gap-md); padding-bottom: var(--gap-md); border-bottom: 1px solid var(--border-lin); }
.optm-standard-shell .optm-title { max-width: 800px; }
.optm-standard-shell .optm-content :where(p, ul, ol) { color: var(--text-muted); }
.optm-standard-shell .optm-content a { color: var(--accent-bleu); text-decoration: underline; text-underline-offset: 0.16em; }
@supports not (clip-path: polygon(0 0, 100% 0, 100% 100%)) {
  .editor-stamp, .hero-index-card, .is-warm::after { clip-path: none; }
}
@media (max-width: 767px) {
  .site-nav .menu, .footer-links .menu { gap: 1rem; flex-wrap: wrap; }
}


/* M52 — Content link visibility fix: readable article links without changing nav/cards. */
.article-content a,
.optm-standard-shell .entry-content a,
.optm-standard-shell .optm-content a {
  color: var(--accent-bleu);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(46, 90, 124, 0.55);
  text-decoration-color: color-mix(in srgb, var(--accent-bleu) 55%, transparent);
  text-underline-offset: 0.18em;
}
.article-content a:hover,
.optm-standard-shell .entry-content a:hover,
.optm-standard-shell .optm-content a:hover {
  color: var(--accent-cuivre-deep);
  text-decoration-color: currentColor;
}


/* M52b — Strong content-link visibility override after app.css. Scoped to main content only. */
.optm-site-main .article-content a:not(.opx-button):not(.opx-button-secondary):not(.reading-card):not(.editorial-card):not(.bridge-link):not([data-opx-ui]),
.optm-site-main .entry-content a:not(.opx-button):not(.opx-button-secondary):not(.reading-card):not(.editorial-card):not(.bridge-link):not([data-opx-ui]),
.optm-site-main .optm-content a:not(.opx-button):not(.opx-button-secondary):not(.reading-card):not(.editorial-card):not(.bridge-link):not([data-opx-ui]) {
  color: var(--accent-bleu) !important;
  text-decoration-line: underline !important;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(46, 90, 124, 0.62) !important;
  text-decoration-color: color-mix(in srgb, var(--accent-bleu) 62%, transparent) !important;
  text-underline-offset: 0.18em;
}
.optm-site-main .article-content a:not(.opx-button):not(.opx-button-secondary):not(.reading-card):not(.editorial-card):not(.bridge-link):not([data-opx-ui]):hover,
.optm-site-main .entry-content a:not(.opx-button):not(.opx-button-secondary):not(.reading-card):not(.editorial-card):not(.bridge-link):not([data-opx-ui]):hover,
.optm-site-main .optm-content a:not(.opx-button):not(.opx-button-secondary):not(.reading-card):not(.editorial-card):not(.bridge-link):not([data-opx-ui]):hover {
  color: var(--accent-cuivre-deep) !important;
  text-decoration-color: currentColor !important;
}
.opx-toc a,
.article-meta a {
  color: var(--text-encre) !important;
  text-decoration-line: none !important;
}

/* M52c — Semantic navigation pills are not body links. */
html body .optm-site-main .optm-content nav[aria-label="Parcours de lecture"] a:not(.opx-button):not(.opx-button-secondary):not(.reading-card):not(.editorial-card):not(.bridge-link):not([data-opx-ui]),
html body .optm-site-main article nav[aria-label="Parcours de lecture"] a:not(.opx-button):not(.opx-button-secondary):not(.reading-card):not(.editorial-card):not(.bridge-link):not([data-opx-ui]) {
  color: var(--text-muted) !important;
  text-decoration-line: none !important;
  text-decoration-color: transparent !important;
}
html body .optm-site-main .optm-content nav[aria-label="Parcours de lecture"] a:not(.opx-button):not(.opx-button-secondary):not(.reading-card):not(.editorial-card):not(.bridge-link):not([data-opx-ui]):hover,
html body .optm-site-main article nav[aria-label="Parcours de lecture"] a:not(.opx-button):not(.opx-button-secondary):not(.reading-card):not(.editorial-card):not(.bridge-link):not([data-opx-ui]):hover {
  color: var(--text-encre) !important;
  text-decoration-line: none !important;
  text-decoration-color: transparent !important;
}
/* M100 — Copyable Markdown blocks, aligned with Optimike editorial system. */
.omk-obsidian-template-wrapper {
  --omk-code-bg: var(--bg-encre, #131316);
  --omk-border-radius: 4px;
  --omk-beam-width: 0;
  --omk-obsidian-btn-bg: rgba(247, 245, 240, 0.08);
  --omk-obsidian-btn-border: rgba(232, 228, 223, 0.18);
  --omk-obsidian-btn-hover-bg: rgba(184, 115, 51, 0.16);
  margin: 3rem 0 3.25rem;
  border: 1px solid var(--border-encre, #2E2E34);
  border-radius: 4px;
  background: var(--bg-encre, #131316);
  box-shadow: 0 18px 38px rgba(26, 26, 26, 0.16);
  overflow: visible;
}
.omk-obsidian-template-wrapper::before {
  content: "•••  OBSIDIAN // TEMPLATE";
  top: -1.65rem;
  left: 0;
  color: var(--text-faint, #9A9590);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  opacity: 1;
}
.omk-obsidian-template-wrapper[data-opx-copy-kind="markdown"]::before {
  content: "•••  MARKDOWN // COPIABLE";
}
.omk-obsidian-template-wrapper[data-opx-copy-kind="markdown-table"]::before {
  content: "•••  MARKDOWN // TABLEAU";
}
.omk-obsidian-template-wrapper .omk-beam-layer {
  display: none;
}
.omk-obsidian-template-wrapper .omk-content-layer {
  margin: 0;
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0) 34%),
    var(--bg-encre, #131316);
  box-shadow: none;
}
.omk-obsidian-template-wrapper .omk-content-layer::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent-cuivre, #B87333);
  opacity: 0.9;
}
.omk-obsidian-template-wrapper .omk-content-layer pre {
  max-height: min(680px, 72vh);
  padding: 1.65rem 1.65rem 1.75rem !important;
  padding-right: 12.5rem !important;
  color: var(--text-encre-light, #E8E4DF) !important;
  font-family: var(--font-mono, ui-monospace, monospace) !important;
  font-size: 0.88rem !important;
  line-height: 1.75 !important;
  scrollbar-color: rgba(232, 228, 223, 0.24) transparent;
}
.omk-obsidian-template-wrapper code {
  color: inherit !important;
  white-space: pre;
}
.omk-obsidian-copy-button {
  top: 0.85rem !important;
  right: 0.85rem !important;
  min-width: 0;
  height: 30px;
  border-radius: 2px !important;
  color: var(--text-encre-light, #E8E4DF) !important;
  font-family: var(--font-mono, ui-monospace, monospace) !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.06em;
}
.omk-obsidian-copy-button:hover {
  border-color: rgba(212, 165, 116, 0.58);
  color: #fff !important;
  box-shadow: none;
}
.omk-obsidian-copy-button:focus-visible {
  outline: 2px solid var(--accent-cuivre-glow, #D4A574);
  outline-offset: 3px;
}
.omk-obsidian-copy-button:disabled {
  background: rgba(74, 124, 89, 0.22) !important;
  border-color: rgba(107, 158, 122, 0.34) !important;
  color: #dcefe1 !important;
}
.opx-copyable-note {
  margin: -1.5rem 0 2.5rem;
  color: var(--text-muted, #6B6560);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
@media (max-width: 680px) {
  .omk-obsidian-template-wrapper .omk-content-layer pre {
    max-height: 70vh;
    padding-top: 3.7rem !important;
    padding-right: 1.25rem !important;
    padding-left: 1.25rem !important;
    font-size: 0.82rem !important;
  }
  .omk-obsidian-copy-button {
    left: 1rem !important;
    right: auto !important;
    max-width: calc(100% - 2rem);
  }
}



/* M101 — Resource library / template pages. */
.opx-template-library.opx-template-tutorial {
  background: var(--bg-papier);
}
.opx-template-library .opx-tutorial-hero {
  border-bottom: 1px solid var(--border-lin);
}
.opx-template-library .opx-article-body {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--gap-xl) 1.5rem;
}
.opx-template-library .opx-template-index {
  margin: 1.75rem 0 2.25rem;
}
.opx-template-block {
  margin: clamp(3rem, 6vw, 5rem) 0;
}
.opx-template-block .opx-callout {
  margin-bottom: 2.6rem;
}
.opx-template-block .opx-callout strong {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  line-height: 1.1;
  color: var(--text-encre);
  text-transform: none;
}
.opx-template-block .opx-callout p {
  max-width: 46rem;
  margin: 0;
}
.opx-template-library .opx-related {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
@media (max-width: 760px) {
  .opx-template-library .opx-article-body {
    padding: var(--gap-lg) 1.25rem;
  }
}




/* M109 — Tutoriel evidence path: image-led explanation, scoped to Obsidian tutorial. */
.opx-tutorial-evidence {
  margin: 2rem 0 2.75rem;
  padding: clamp(1rem, 2.4vw, 1.4rem);
  border: 1px solid var(--border-lin);
  border-radius: 3px;
  background: var(--bg-papier-deep);
}
.opx-tutorial-evidence__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
}
.opx-tutorial-evidence figure {
  margin: 0;
}
.opx-tutorial-evidence img {
  width: 100%;
  height: auto;
  border: 1px solid var(--border-lin-strong);
  border-radius: 3px;
  background: var(--bg-papier);
}
.opx-tutorial-evidence figcaption {
  margin-top: 0.75rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.5;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.opx-tutorial-evidence__notes {
  display: grid;
  gap: 0.85rem;
}
.opx-tutorial-evidence__notes h3 {
  margin: 0 0 0.25rem;
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: 500;
}
.opx-tutorial-evidence__note {
  display: grid;
  grid-template-columns: 1.7rem minmax(0, 1fr);
  gap: 0.75rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border-lin);
}
.opx-tutorial-evidence__index {
  display: inline-flex;
  width: 1.7rem;
  height: 1.7rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--accent-cuivre);
  border-radius: 50%;
  color: var(--accent-cuivre-deep);
  font-family: var(--font-mono);
  font-size: 0.72rem;
}
.opx-tutorial-evidence__note strong {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--text-encre);
  font-size: 0.94rem;
}
.opx-tutorial-evidence__note p,
.opx-tutorial-evidence__notes > p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.94rem;
  line-height: 1.6;
}
.opx-tutorial-path {
  margin: 1.5rem 0 2.6rem;
  border-top: 1px solid var(--border-lin);
}
.opx-tutorial-path__item {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) minmax(12rem, 0.55fr);
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border-lin);
  align-items: start;
}
.opx-tutorial-path__num {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-cuivre);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.75rem;
}
.opx-tutorial-path__copy h3 {
  margin: 0 0 0.4rem;
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  font-weight: 500;
}
.opx-tutorial-path__copy p,
.opx-tutorial-path__aside p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.94rem;
  line-height: 1.6;
}
.opx-tutorial-path__aside {
  padding: 0.9rem;
  border: 1px solid var(--border-lin);
  border-radius: 3px;
  background: var(--bg-papier-deep);
}
.opx-tutorial-path__aside a {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
@media (max-width: 820px) {
  .opx-tutorial-evidence__grid,
  .opx-tutorial-path__item {
    grid-template-columns: 1fr;
  }
  .opx-tutorial-path__num {
    margin-bottom: -0.25rem;
  }
}




/* M109b — Tutoriel advanced path inline links: remove empty aside column when links live in text. */
.opx-tutorial-path--inline .opx-tutorial-path__item {
  grid-template-columns: 2.2rem minmax(0, 1fr);
}
.opx-tutorial-path--inline .opx-tutorial-path__copy {
  max-width: 46rem;
}
@media (max-width: 820px) {
  .opx-tutorial-path--inline .opx-tutorial-path__item {
    grid-template-columns: 1fr;
  }
}



/* M109c — Tutoriel Obsidian markdown example: mobile-safe code block. */
.opx-tutorial-obsidian .opx-markdown-example {
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.opx-tutorial-obsidian .opx-markdown-example code {
  white-space: pre-wrap;
}



/* M109d — Tutoriel Obsidian: keep canonical copyable Markdown mobile-safe in narrow article flow. */
.opx-tutorial-obsidian .omk-obsidian-template-wrapper code.opx-copyable-markdown {
  white-space: pre-wrap;
  word-break: break-word;
}



/* Optimike V19.1 experience pilot. Opt-in wrapper; loaded after the live shell.
   Candidate only. Palette and installed font families retained. */
body.optm-front .optm-content .opx-design-v191 {
  --opx-functional-copper: #985c26;
  --opx-dark-muted: #c3bdb5;
  --opx-space-section: clamp(3rem, 6vw, 5.5rem);
  color: var(--text-primary, #1a1a1a);
}
body.optm-front .optm-content .opx-design-v191 *, body.optm-front .optm-content .opx-design-v191 *::before, body.optm-front .optm-content .opx-design-v191 *::after { box-sizing: border-box; }
body.optm-front .optm-content .opx-design-v191 a:focus-visible, body.optm-front .optm-content .opx-design-v191 button:focus-visible,
body.optm-front .optm-content .opx-design-v191 summary:focus-visible { outline: 3px solid #2e5a7c; outline-offset: 5px; }
body.optm-front .optm-content .opx-design-v191 [id] { scroll-margin-top: 110px; }
body.optm-front .optm-content .opx-design-v191 .v191-inner { width: min(100% - 4rem, 1100px); margin-inline: auto; }
body.optm-front .optm-content .opx-design-v191 .v191-eyebrow { font-family: var(--font-mono); font-size: .75rem; font-weight: 500; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; color: var(--opx-functional-copper); margin: 0 0 1.25rem; }
body.optm-front .optm-content .opx-design-v191 .v191-hero { padding-block: clamp(3rem, 5vw, 4.5rem); }
body.optm-front .optm-content .opx-design-v191 .v191-hero h1 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(3rem, 6.1vw, 5.5rem); line-height: 1.02; letter-spacing: -.035em; max-width: 17ch; margin: 0 0 1.5rem; text-wrap: balance; }
body.optm-front .optm-content .opx-design-v191 .v191-intro { max-width: 43rem; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.6; margin: 0; }
body.optm-front .optm-content .opx-design-v191 .v191-hero-bottom { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-top: 2rem; }
body.optm-front .optm-content .opx-design-v191 .v191-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
body.optm-front .optm-content .opx-design-v191 .v191-primary { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .9rem 1.4rem; color: #f7f5f0; background: #1a1a1a; font: 500 1rem/1.35 var(--font-sans); text-decoration: none; border: 1px solid #1a1a1a; transition: background-color 160ms ease; }
body.optm-front .optm-content .opx-design-v191 .v191-primary:hover { background: #2e5a7c; border-color: #2e5a7c; color: #fff; }
body.optm-front .optm-content .opx-design-v191 .v191-link { display: inline-block; min-height: 44px; padding-block: .65rem; font: 500 1rem/1.4 var(--font-sans); color: #1a1a1a; text-decoration: underline; text-underline-offset: .35em; text-decoration-color: var(--opx-functional-copper); }
body.optm-front .optm-content .opx-design-v191 .v191-link:hover { color: #2e5a7c; }
body.optm-front .optm-content .opx-design-v191 .v191-byline { display: flex; align-items: center; gap: .9rem; margin: 0; font-size: .875rem; line-height: 1.5; }
body.optm-front .optm-content .opx-design-v191 .v191-byline img { width: 64px; height: 64px; object-fit: cover; flex: 0 0 64px; border-radius: 2px; }
body.optm-front .optm-content .opx-design-v191 .v191-byline p { margin: 0; font-size: .875rem; }
body.optm-front .optm-content .opx-design-v191 .v191-byline span { display: block; color: #57534e; margin-top: .2rem; font-size: .75rem; }
body.optm-front .optm-content .opx-design-v191 .v191-reading { border-block: 1px solid #cbc4bb; }
body.optm-front .optm-content .opx-design-v191 .v191-reading-grid { display: grid; grid-template-columns: 1.1fr 1fr; }
body.optm-front .optm-content .opx-design-v191 .v191-feature { padding: clamp(2rem, 4vw, 3.5rem); background: #131316; color: #f7f5f0; }
body.optm-front .optm-content .opx-design-v191 .v191-feature .v191-eyebrow { color: #d5a473; }
body.optm-front .optm-content .opx-design-v191 .v191-feature h2 { color: #f7f5f0; font: 500 clamp(2rem, 3.5vw, 3.25rem)/1.1 var(--font-serif); letter-spacing: -.025em; max-width: 20ch; margin: 0 0 1.25rem; }
body.optm-front .optm-content .opx-design-v191 .v191-feature > p:not(.v191-eyebrow) { color: #d0cbc4; max-width: 44ch; font-size: 1rem; line-height: 1.6; }
body.optm-front .optm-content .opx-design-v191 .v191-feature .v191-link { color: #f7f5f0; text-decoration-color: #d5a473; margin-top: 1.5rem; }
body.optm-front .optm-content .opx-design-v191 .v191-feature a:focus-visible { outline-color: #f7f5f0; }
body.optm-front .optm-content .opx-design-v191 .v191-guide-steps { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: 1.5rem 0; margin: 1.5rem 0 0; border-block: 1px solid #514c48; font-family: var(--font-serif); font-size: 1.5rem; }
body.optm-front .optm-content .opx-design-v191 .v191-guide-steps span[aria-hidden] { color: #d5a473; font-family: var(--font-sans); }
body.optm-front .optm-content .opx-design-v191 .v191-index { padding: .5rem clamp(1.5rem, 3vw, 3rem); }
body.optm-front .optm-content .opx-design-v191 .v191-index a { display: grid; grid-template-columns: 2rem 1fr 1rem; align-items: start; gap: 1rem; padding: 1.7rem 0; color: #1a1a1a; border-bottom: 1px solid #cbc4bb; text-decoration: none; }
body.optm-front .optm-content .opx-design-v191 .v191-index a:last-child { border: 0; }
body.optm-front .optm-content .opx-design-v191 .v191-index a:hover strong { color: #2e5a7c; text-decoration: underline; text-underline-offset: .15em; }
body.optm-front .optm-content .opx-design-v191 .v191-index small { font: 400 .75rem/2 var(--font-mono); color: var(--opx-functional-copper); }
body.optm-front .optm-content .opx-design-v191 .v191-index strong { display: block; font: 500 clamp(1.4rem, 2.2vw, 2rem)/1.15 var(--font-serif); }
body.optm-front .optm-content .opx-design-v191 .v191-index p { font-size: .9375rem; line-height: 1.5; margin: .7rem 0 0; color: #57534e; }
body.optm-front .optm-content .opx-design-v191 .v191-index .v191-index-more { padding: 1rem 0; margin: 0; font-size: .875rem; }
body.optm-front .optm-content .opx-design-v191 .v191-index .v191-index-more a { display: inline; padding: 0; border: 0; color: #2e5a7c; text-decoration: underline; text-underline-offset: .2em; }
body.optm-front .optm-content .opx-design-v191 .v191-method, body.optm-front .optm-content .opx-design-v191 .v191-author { padding-block: var(--opx-space-section); }
body.optm-front .optm-content .opx-design-v191 .v191-method h2, body.optm-front .optm-content .opx-design-v191 .v191-author h2 { font: 500 clamp(2rem, 4vw, 3.5rem)/1.08 var(--font-serif); letter-spacing: -.025em; margin: 0 0 1.75rem; max-width: 25ch; text-wrap: balance; }
body.optm-front .optm-content .opx-design-v191 .v191-method-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }
body.optm-front .optm-content .opx-design-v191 .v191-method p, body.optm-front .optm-content .opx-design-v191 .v191-author p { font-size: 1.0625rem; line-height: 1.65; max-width: 62ch; }
body.optm-front .optm-content .opx-design-v191 .v191-flow { margin: 0; padding: 0; list-style: none; counter-reset: flow; }
body.optm-front .optm-content .opx-design-v191 .v191-flow li { counter-increment: flow; padding: 1.25rem 0 1.25rem 3rem; border-top: 1px solid #cbc4bb; position: relative; }
body.optm-front .optm-content .opx-design-v191 .v191-flow li::before { content: '0' counter(flow); position: absolute; left: 0; top: 1.4rem; color: var(--opx-functional-copper); font: .75rem var(--font-mono); }
body.optm-front .optm-content .opx-design-v191 .v191-flow strong { font: 500 1.625rem/1.2 var(--font-serif); }
body.optm-front .optm-content .opx-design-v191 .v191-flow p { margin: .5rem 0 0; font-size: 1rem; }
body.optm-front .optm-content .opx-design-v191 .v191-author { background: #efede8; }
body.optm-front .optm-content .opx-design-v191 .v191-author-grid { display: grid; grid-template-columns: 240px .8fr 1fr; gap: 2.5rem; align-items: start; }
body.optm-front .optm-content .opx-design-v191 .v191-portrait { margin: 0; }
body.optm-front .optm-content .opx-design-v191 .v191-portrait img { display: block; width: 100%; height: auto; border-radius: 2px; }
body.optm-front .optm-content .opx-design-v191 .v191-author h2 { font-size: clamp(2rem, 3vw, 2.75rem); }
body.optm-front .optm-content .opx-design-v191 .v191-author .v191-actions { margin-top: 1.5rem; }
/* Home: a real published note template makes the thinking promise inspectable. */
body.optm-front .optm-content .opx-design-v191 .v191-example { padding-block: var(--opx-space-section); border-bottom: 1px solid #cbc4bb; }
body.optm-front .optm-content .opx-design-v191 .v191-example-grid { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: clamp(2rem, 5vw, 4.5rem); }
body.optm-front .optm-content .opx-design-v191 .v191-example h2 { font: 500 clamp(2rem, 3.5vw, 3.25rem)/1.1 var(--font-serif); letter-spacing: -.025em; max-width: 21ch; margin: 0 0 1.5rem; text-wrap: balance; }
body.optm-front .optm-content .opx-design-v191 .v191-example-copy > p:not(.v191-eyebrow) { font-size: 1.0625rem; line-height: 1.65; max-width: 52ch; }
body.optm-front .optm-content .opx-design-v191 .v191-example-note { margin: 0; padding: clamp(1.5rem, 3vw, 2.5rem); background: #efede8; border: 1px solid #cbc4bb; }
body.optm-front .optm-content .opx-design-v191 .v191-example-note figcaption { font: 500 .75rem/1.6 var(--font-mono); color: #57534e; padding-bottom: 1.25rem; border-bottom: 1px solid #cbc4bb; }
body.optm-front .optm-content .opx-design-v191 .v191-example-note dl { margin: 0; }
body.optm-front .optm-content .opx-design-v191 .v191-example-note dt { font: 500 1.5rem/1.2 var(--font-serif); margin-top: 1.5rem; }
body.optm-front .optm-content .opx-design-v191 .v191-example-note dd { font: 400 1rem/1.6 var(--font-sans); margin: .5rem 0 0; overflow-wrap: anywhere; }
body.optm-front .optm-content .opx-design-v191 .v191-example-note code { font: inherit; color: #2e5a7c; background: transparent; padding: 0; }
@media (max-width: 760px) { body.optm-front .optm-content .opx-design-v191 .v191-example-grid { grid-template-columns: 1fr; } }
/* Existing page families: functional type scale, no blanket article restyle. */
body.optm-front .optm-content .opx-design-v191 .opx-hero-formation h1, body.optm-front .optm-content .opx-design-v191 .opx-hero h1 { font-size: clamp(2.65rem, 5vw, 4.75rem); line-height: 1.06; text-wrap: balance; }
body.optm-front .optm-content .opx-design-v191 .article-header .article-title { font-size: clamp(2.35rem, 4.4vw, 4.25rem); line-height: 1.08; text-wrap: balance; }
body.optm-front .optm-content .opx-design-v191 .opx-universe-hero h1 { font-size: clamp(2.65rem, 4.8vw, 4.5rem); line-height: 1.06; text-wrap: balance; }
body.optm-front .optm-content .opx-design-v191 .opx-contact-copy h1 { font-size: clamp(2.65rem, 5vw, 4.75rem); line-height: 1.06; text-wrap: balance; }
body.optm-front .optm-content .opx-design-v191 .opx-universe-hero-copy { max-width: 58ch; }
body.optm-front .optm-content .opx-design-v191 .opx-universe-hero { padding-block: var(--opx-space-section); }
body.optm-front .optm-content .opx-design-v191 .opx-universe-route-link { min-height: 44px; }
body.optm-front .optm-content .opx-design-v191 .opx-section-num, body.optm-front .optm-content .opx-design-v191 .label-mono { font-size: max(.75rem, 12px); }
body.optm-front .optm-content .opx-design-v191 .atlas-node.is-elysia strong { color: #f7f5f0; }
body.optm-front .optm-content .opx-design-v191 .atlas-node.is-elysia :is(.node-code, em) { color: #c3bdb5; font-size: .75rem; }
/* Formation: make the three levels operable instead of a decorative code window. */
body.optm-front .optm-content .opx-design-v191 .v191-formation-hero { padding-block: clamp(2.5rem, 4.5vw, 4rem); }
body.optm-front .optm-content .opx-design-v191 .v191-formation-hero .opx-hero-grid { display: block; }
body.optm-front .optm-content .opx-design-v191 .v191-formation-hero .hero-content { max-width: none; }
body.optm-front .optm-content .opx-design-v191 .v191-formation-hero h1 { max-width: 24ch; margin-block: 1rem 1.5rem; }
body.optm-front .optm-content .opx-design-v191 .v191-formation-hero .opx-lead { max-width: 67ch; font-size: 1.125rem; line-height: 1.6; }
body.optm-front .optm-content .opx-design-v191 .v191-formation-hero .opx-actions { margin-top: 1.75rem; }
body.optm-front .optm-content .opx-design-v191 .v191-level-index { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 3rem; border-block: 1px solid #b8b1a7; }
body.optm-front .optm-content .opx-design-v191 .v191-level-index a { padding: 1.75rem 1.5rem; color: #1a1a1a; text-decoration: none; border-right: 1px solid #b8b1a7; }
body.optm-front .optm-content .opx-design-v191 .v191-level-index a:first-child { padding-left: 0; }
body.optm-front .optm-content .opx-design-v191 .v191-level-index a:last-child { border-right: 0; }
body.optm-front .optm-content .opx-design-v191 .v191-level-index small { color: var(--opx-functional-copper); font: .75rem/1.5 var(--font-mono); text-transform: uppercase; }
body.optm-front .optm-content .opx-design-v191 .v191-level-index strong { display: block; font: 500 1.7rem/1.15 var(--font-serif); margin-block: 1rem; }
body.optm-front .optm-content .opx-design-v191 .v191-level-index span { display: block; color: #57534e; font-size: .875rem; line-height: 1.6; }
body.optm-front .optm-content .opx-design-v191 .v191-level-index b { float: right; color: #2e5a7c; }
body.optm-front .optm-content .opx-design-v191 .v191-level-index a:hover { background: #efede8; }
body.optm-front .optm-content .opx-design-v191 .v191-level-principle { color: #57534e; font-size: .875rem; margin-top: 1rem; }
/* Templates: an excerpt from the actual meeting model, never a fake app capture. */
body.optm-front .optm-content .opx-design-v191 .v191-template-hero { padding-block: clamp(2.5rem, 4.5vw, 4rem); }
body.optm-front .optm-content .opx-design-v191 .v191-template-hero h1 { font-size: clamp(2.25rem, 3.9vw, 3.65rem); }
body.optm-front .optm-content .opx-design-v191 .v191-template-hero .opx-lead { font-size: 1.0625rem; line-height: 1.6; }
body.optm-front .optm-content .opx-design-v191 .v191-template-sample { margin: 0; padding: 1.5rem; background: #efede8; border: 1px solid #d0ccc4; }
body.optm-front .optm-content .opx-design-v191 .v191-template-sample figcaption { margin: 0 0 1.25rem; padding: 0; text-align: left; color: #57534e; font: .75rem/1.5 var(--font-mono); }
body.optm-front .optm-content .opx-design-v191 .v191-note-sheet { padding: 2rem; background: #f7f5f0; border-left: 3px solid #985c26; }
body.optm-front .optm-content .opx-design-v191 .v191-note-date { color: #6b6560; font: .75rem/1.5 var(--font-mono); }
body.optm-front .optm-content .opx-design-v191 .v191-note-sheet h2 { font: 500 1.8rem/1.2 var(--font-serif); margin-block: 1rem 1.5rem; }
body.optm-front .optm-content .opx-design-v191 .v191-note-sheet dl { margin: 0; }
body.optm-front .optm-content .opx-design-v191 .v191-note-sheet dt { font-weight: 600; font-size: .9rem; margin-top: 1rem; }
body.optm-front .optm-content .opx-design-v191 .v191-note-sheet dd { margin: .5rem 0 0; color: #6b6560; font-size: .85rem; line-height: 1.5; }
/* Copyable code: keep the installed functional component, calm its moving border. */
body.optm-front .optm-content .opx-design-v191 .omk-beam-layer { display: none; }
body.optm-front .optm-content .opx-design-v191 .omk-obsidian-template-wrapper { border: 1px solid #514c48; box-shadow: none; }
body.optm-front .optm-content .opx-design-v191 .omk-obsidian-copy-button { min-height: 44px; }
@media(min-width:761px) and (max-width:1000px) {
  body.optm-front .optm-content .opx-design-v191 .v191-guide-steps { font-size: 1.125rem; gap: .5rem; }
  body.optm-front .optm-content .opx-design-v191 .v191-author-grid { grid-template-columns: 180px 1fr; }
  body.optm-front .optm-content .opx-design-v191 .v191-author-grid > div:last-child { grid-column: 2; }
}
@media(max-width: 760px) {
  body.optm-front .optm-content .opx-design-v191 .v191-inner { width: calc(100% - 2.5rem); }
  body.optm-front .optm-content .opx-design-v191 .v191-hero { padding-block: 2.5rem; }
  body.optm-front .optm-content .opx-design-v191 .v191-hero h1 { font-size: clamp(2.7rem, 10.7vw, 4rem); max-width: 16ch; }
  body.optm-front .optm-content .opx-design-v191 .v191-hero-bottom { display: block; margin-top: 1.5rem; }
  body.optm-front .optm-content .opx-design-v191 .v191-byline { display: flex; margin-top: 1.5rem; }
  body.optm-front .optm-content .opx-design-v191 .v191-portrait { width: min(100%, 280px); margin-bottom: 2rem; }
  body.optm-front .optm-content .opx-design-v191 .v191-actions { gap: .6rem 1.2rem; }
  body.optm-front .optm-content .opx-design-v191 .v191-reading-grid, body.optm-front .optm-content .opx-design-v191 .v191-method-grid, body.optm-front .optm-content .opx-design-v191 .v191-author-grid { grid-template-columns: 1fr; gap: 0; }
  body.optm-front .optm-content .opx-design-v191 .v191-reading-grid { width: 100%; }
  body.optm-front .optm-content .opx-design-v191 .v191-feature { padding: 2rem 1.25rem; }
  body.optm-front .optm-content .opx-design-v191 .v191-index { padding-inline: 1.25rem; }
  body.optm-front .optm-content .opx-design-v191 .v191-method-grid { gap: 2rem; }
  body.optm-front .optm-content .opx-design-v191 .v191-guide-steps { font-size: 1.25rem; }
  body.optm-front .optm-content .opx-design-v191 .opx-hero h1, body.optm-front .optm-content .opx-design-v191 .opx-hero-formation h1 { font-size: clamp(2.25rem, 9vw, 3.5rem); }
  body.optm-front .optm-content .opx-design-v191 .article-header .article-title { font-size: clamp(2.1rem, 8.3vw, 3.2rem); }
  body.optm-front .optm-content .opx-design-v191 .opx-contact-copy h1 { font-size: clamp(2.25rem, 9vw, 3.5rem); }
  body.optm-front .optm-content .opx-design-v191 .opx-universe-hero-media { display: none; }
  body.optm-front .optm-content .opx-design-v191 .opx-universe-hero-grid { gap: 1.5rem; }
  body.optm-front .optm-content .opx-design-v191 .article-side-rail.is-cognitive-route { display: none; }
  body.optm-front .optm-content .opx-design-v191 .v191-level-index { grid-template-columns: 1fr; margin-top: 2rem; }
  body.optm-front .optm-content .opx-design-v191 .v191-level-index a { padding: 1.25rem 0; border-right: 0; border-bottom: 1px solid #cbc4bb; }
  body.optm-front .optm-content .opx-design-v191 .v191-level-index a:last-child { border-bottom: 0; }
  body.optm-front .optm-content .opx-design-v191 .v191-level-index strong { font-size: 1.5rem; margin-block: .75rem .5rem; }
  body.optm-front .optm-content .opx-design-v191 .v191-template-sample { padding: 1rem; }
  body.optm-front .optm-content .opx-design-v191 .v191-note-sheet { padding: 1.25rem; }
}
@media(prefers-reduced-motion: reduce) {
  body.optm-front .optm-content .opx-design-v191 *, body.optm-front .optm-content .opx-design-v191 *::before, body.optm-front .optm-content .opx-design-v191 *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* HOME EDITORIAL 20260926 */
body.page-id-15 .film-hero-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:48px;align-items:center;max-width:1440px}
body.page-id-15 .film-hero-copy h1{font-size:clamp(44px,4.65vw,74px)!important;line-height:1.04!important;max-width:650px!important;letter-spacing:-.035em}
body.page-id-15 .film-hero-copy .v191-intro{font-size:19px!important;max-width:580px}
body.page-id-15 .film-hero-copy .v191-hero-bottom{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:22px!important}
body.page-id-15 .film-hero-copy .v191-actions{flex-wrap:wrap;gap:16px}
body.page-id-15 .film-hero-copy .v191-byline{margin-top:0!important;width:auto!important;max-width:none!important;flex:none!important}
body.page-id-15 .film-hero-copy .v191-byline p{min-width:230px}
body.page-id-15 .film-hero-copy .v191-actions{display:flex!important;flex-wrap:wrap!important;width:100%!important}
body.page-id-15 .film-hero-media{margin:0;min-width:0}
body.page-id-15 .film-hero-media video{width:100%;aspect-ratio:16/9;display:block;object-fit:contain;background:#f7f5f0;border:1px solid #e2dcd2;box-shadow:0 18px 50px #3c29150b}
body.page-id-15 .film-hero-media figcaption{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-top:15px;font:13px/1.5 "DM Sans",sans-serif;color:#6f6b63}
body.page-id-15 .film-tools{display:flex;gap:16px;align-items:center}
body.page-id-15 .film-tools button,body.page-id-15 .film-tools a{font:inherit;background:none;border:0;padding:5px 0;color:#985c26;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
body.page-id-15 .film-tools button:focus-visible,body.page-id-15 .film-tools a:focus-visible{outline:2px solid #985c26;outline-offset:5px}
@media(max-width:1000px){body.page-id-15 .film-hero-grid{grid-template-columns:1fr;gap:35px}
body.page-id-15 .film-hero-copy h1{font-size:clamp(43px,8vw,68px)!important;max-width:750px!important}
body.page-id-15 .film-hero-media{max-width:850px;width:100%}
body.page-id-15 .film-hero-media figcaption{flex-wrap:wrap}
body.page-id-15 .film-tools{gap:18px}}
@media(prefers-reduced-motion:reduce){body.page-id-15 *{scroll-behavior:auto!important}}
body.page-id-15 .film-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);gap:40px}
body.page-id-15 .film-hero-copy h1{font-size:clamp(44px,4.3vw,64px)!important;max-width:620px!important;line-height:1.04!important}
body.page-id-15 .film-hero-copy .v191-intro{font-size:18px!important;line-height:1.65!important}
body.page-id-15 .film-hero-copy .v191-hero-bottom{margin-top:28px!important}
body.page-id-15 .film-hero-copy .v191-actions{gap:16px 24px}
body.page-id-15 .opx-design-v191 .v191-example-grid{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(32px,4vw,56px)}
body.page-id-15 .opx-design-v191 .v191-example-visual{margin:0;min-width:0}
body.page-id-15 .opx-design-v191 .v191-example-visual>a{display:block;border:1px solid #e0dcd4;text-decoration:none;background:#efede8}
body.page-id-15 .v191-example-visual picture{display:block}
body.page-id-15 .v191-example-visual img{display:block;width:100%;height:auto}
body.page-id-15 .v191-example-visual figcaption a{color:#985c26;text-decoration:underline;text-underline-offset:3px;display:inline-block;min-height:44px;padding-block:10px}
body.page-id-15 .v191-example-copy .v191-primary{gap:10px}
body.page-id-15 .opx-design-v191 .v191-example-visual figcaption{font:400 13px/1.55 "DM Sans",sans-serif;color:#6b6560;margin-top:14px;max-width:62ch}
body.page-id-15 .opx-design-v191 .v191-example-copy .v191-example-disclosure{font-size:14px;color:#6b6560;margin:24px 0}
body.page-id-15 .opx-design-v191 .v191-example-copy .v191-actions{margin-top:28px}
body.page-id-15 .opx-design-v191 .v191-example-copy .v191-link{display:inline-flex;align-items:center;gap:12px;min-height:44px}
body.page-id-15 .opx-design-v191 .v191-method .v191-flow p{margin-bottom:0}
body.page-id-15 .opx-design-v191 .v191-proof-reading{margin-top:30px;padding-top:24px;border-top:1px solid #d0ccc4}
body.page-id-15 .opx-design-v191 .v191-proof-reading strong{display:block;margin-bottom:10px;font-size:18px}
body.page-id-15 .opx-design-v191 .v191-proof-reading p{font-size:16px}
body.page-id-15 .opx-design-v191 a:focus-visible{outline:2px solid #985c26;outline-offset:5px}
body.page-id-15 .film-tools button,body.page-id-15 .film-tools a{min-height:44px;display:inline-flex;align-items:center}
@media(max-width:1000px){body.page-id-15 .film-hero-grid{grid-template-columns:1fr;gap:32px}
body.page-id-15 .film-hero-copy h1{font-size:clamp(43px,7.2vw,66px)!important;max-width:750px!important}
body.page-id-15 .opx-design-v191 .v191-example-grid{grid-template-columns:1fr;gap:32px}
body.page-id-15 .v191-example-visual{max-width:760px}}
@media(max-width:600px){body.page-id-15 .film-hero-copy h1{font-size:clamp(38px,10.8vw,49px)!important}
body.page-id-15 .film-hero-copy .v191-intro{font-size:17px!important}
body.page-id-15 .film-hero-copy .v191-actions{align-items:flex-start;gap:12px 22px}
body.page-id-15 .film-hero-media figcaption{gap:4px;font-size:13px}
body.page-id-15 .film-hero-media .film-tools{justify-content:space-between;width:100%}
body.page-id-15 .opx-design-v191 .v191-example-copy .v191-example-disclosure{margin:20px 0}}
@media(prefers-reduced-motion:reduce){body.page-id-15{scroll-behavior:auto!important}
body.page-id-15 *,body.page-id-15 *::before,body.page-id-15 *::after{animation:none!important;transition:none!important}}
body.page-id-15 .opx-design-v191 .v191-selection{padding:56px 0 64px;border-bottom:1px solid #d0ccc4}
body.page-id-15 .opx-design-v191 .v191-selection-heading{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:32px}
body.page-id-15 .opx-design-v191 .v191-selection h2{font:500 clamp(30px,3vw,42px)/1.12 var(--font-serif);letter-spacing:-.02em;margin:0}
body.page-id-15 .opx-design-v191 .v191-selection-heading>p{font:400 14px/1.5 var(--font-sans);color:#6b6560;margin:0}
body.page-id-15 .opx-design-v191 .v191-selection-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:28px 48px}
body.page-id-15 .opx-design-v191 .v191-selection-item:first-child{grid-row:span 2;border-top:0;padding-top:0}
body.page-id-15 .opx-design-v191 .v191-selection-cover{display:block;width:100%;margin-bottom:24px}
body.page-id-15 .opx-design-v191 .v191-selection-cover img{display:block;width:100%;height:210px;object-fit:cover;object-position:center;border:1px solid #e0dcd4}
body.page-id-15 .opx-design-v191 .v191-selection-item{display:flex;flex-direction:column;align-items:flex-start;min-width:0;border-top:1px solid #d0ccc4;padding-top:22px}
body.page-id-15 .opx-design-v191 .v191-selection-item .v191-eyebrow{font-size:12px;margin-bottom:16px}
body.page-id-15 .opx-design-v191 .v191-selection-item h3{font:500 28px/1.15 var(--font-serif);letter-spacing:-.015em;margin:0 0 16px;max-width:24ch}
body.page-id-15 .opx-design-v191 .v191-selection-item>p:not(.v191-eyebrow){font:400 16px/1.6 var(--font-sans);margin:0 0 18px;color:#57534e}
body.page-id-15 .opx-design-v191 .v191-selection-item .v191-link{display:inline-flex;align-items:center;min-height:44px;gap:10px;margin-top:auto}
body.page-id-15 .opx-design-v191 .v191-vault-intro{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:36px}
body.page-id-15 .opx-design-v191 .v191-vault-intro h2{max-width:17ch;margin-bottom:0}
body.page-id-15 .opx-design-v191 .v191-vault-intro>p{font-size:17px;line-height:1.65;margin:0;max-width:55ch}
body.page-id-15 .opx-design-v191 .v191-vault-spread{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:24px;align-items:start}
body.page-id-15 .opx-design-v191 .v191-vault-spread figure{margin:0;min-width:0}
body.page-id-15 .opx-design-v191 .v191-vault-shot{display:block;background:#17171c;border:1px solid #d0ccc4;overflow:hidden}
body.page-id-15 .opx-design-v191 .v191-vault-shot img{display:block;width:100%;height:auto}
body.page-id-15 .opx-design-v191 .v191-vault-shot-note{aspect-ratio:1.08}
body.page-id-15 .opx-design-v191 .v191-vault-shot-note img{width:132%;max-width:none;transform:translateX(-20%);transform-origin:top left}
body.page-id-15 .opx-design-v191 .v191-vault-spread figcaption{font:400 13px/1.5 var(--font-sans);color:#6b6560;margin-top:12px}
body.page-id-15 .opx-design-v191 .v191-vault-quote{margin:28px 0 0;padding:24px 0 0;border-top:1px solid #d0ccc4}
body.page-id-15 .opx-design-v191 .v191-vault-quote p{font:400 26px/1.3 var(--font-serif);letter-spacing:-.01em;margin:0 0 12px}
body.page-id-15 .opx-design-v191 .v191-vault-quote cite{font:400 13px/1.5 var(--font-sans);color:#6b6560}
body.page-id-15 .opx-design-v191 .v191-vault-bottom{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-top:26px}
body.page-id-15 .opx-design-v191 .v191-vault-bottom>p{font:400 14px/1.6 var(--font-sans);color:#6b6560;margin:0}
body.page-id-15 .opx-design-v191 .v191-vault-bottom a{display:inline-flex;align-items:center;gap:10px;min-height:44px;white-space:nowrap}
@media(max-width:800px){body.page-id-15 .opx-design-v191 .v191-selection-grid{grid-template-columns:1fr;gap:24px}
body.page-id-15 .opx-design-v191 .v191-selection-heading,body.page-id-15 .opx-design-v191 .v191-vault-bottom{display:block}
body.page-id-15 .opx-design-v191 .v191-selection-heading>p{margin-top:12px}
body.page-id-15 .opx-design-v191 .v191-selection-item h3{max-width:none}
body.page-id-15 .opx-design-v191 .v191-vault-intro{grid-template-columns:1fr;gap:22px}
body.page-id-15 .opx-design-v191 .v191-vault-spread{grid-template-columns:1fr;gap:32px}
body.page-id-15 .opx-design-v191 .v191-vault-quote p{font-size:24px}
body.page-id-15 .opx-design-v191 .v191-vault-bottom>a{margin-top:12px}}
body.page-id-15 .v191-vault-spread figure.opx-diagram-viewer{width:auto;max-width:none;margin:0;transform:none;left:auto;right:auto}
body.page-id-15 .v191-vault-shot-note.opx-diagram-viewer__link img{width:132%;max-width:none}
body.page-id-15 .v191-vault-shot.opx-diagram-viewer__link{margin:0;padding:0}
body.page-id-15 .v191-vault-shot.opx-diagram-viewer__link::after{content:'Agrandir l’image ↗'}
body.page-id-15 .footer-editor,body.page-id-15 .footer-tagline,body.page-id-15 .footer-bottom>span:not(:first-child){display:none}
body.page-id-15 .film-tools [hidden]{display:none!important}




/* BEGIN HOME VAULT SCENE 20261010 : scène du hero, version 2 (exemple Obsidian lisible : écrire, relier, retrouver) et ligne d'ouverture. Mouvement : DESIGN.md §7. */
body.page-id-15 .opx-vault-scene{--vs-e:cubic-bezier(.2,.7,.2,1);background:#FBFAF7;border:1px solid #D0CCC4;border-radius:6px;box-shadow:0 30px 70px -40px rgba(26,26,26,.45);overflow:hidden;font:400 14px/1.55 "DM Sans",system-ui,sans-serif;color:#1A1A1A;text-align:left}
body.page-id-15 .opx-vault-scene p{margin:0}
body.page-id-15 .opx-vault-scene-tabs{display:flex;background:#EFEDE8;border-bottom:1px solid #E0DCD4;padding:8px 10px 0}
body.page-id-15 .opx-vault-scene-tab{padding:7px 14px;border-radius:5px 5px 0 0;background:#FBFAF7;box-shadow:0 0 0 1px #E0DCD4;font-size:12.5px;white-space:nowrap}
body.page-id-15 .opx-vault-scene-body{display:grid;grid-template-columns:150px minmax(0,1fr);min-height:330px}
body.page-id-15 .opx-vault-scene-side{display:flex;flex-direction:column;gap:2px;border-right:1px solid #E0DCD4;padding:14px 10px;background:#F5F3EE}
body.page-id-15 .opx-vault-scene-group{font:500 12px/1.4 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;color:#6B6560;margin:2px 6px 8px}
body.page-id-15 .opx-vault-scene-item{display:flex;gap:8px;align-items:center;padding:5px 8px;border-radius:4px;color:#3B3833}
body.page-id-15 .opx-vault-scene-item::before{content:"";width:9px;height:9px;flex:none;border:1.5px solid #D0CCC4;border-radius:2px}
body.page-id-15 .opx-vault-scene-item-on{background:#E8E4DE;color:#1A1A1A;font-weight:500}
body.page-id-15 .opx-vault-scene-item-on::before{border-color:#B87333;background:#B87333}
body.page-id-15 .opx-vault-scene-note{padding:24px 28px 20px;min-width:0}
body.page-id-15 .opx-vault-scene-title{font:500 26px/1.15 Newsreader,Georgia,serif;letter-spacing:-.01em;margin:0 0 14px!important}
body.page-id-15 .opx-vault-scene-line{font-size:15px;margin:0 0 10px!important}
body.page-id-15 .opx-vault-scene-link{color:#985C26;background:linear-gradient(#B87333,#B87333) 0 100%/100% 1px no-repeat;padding-bottom:1px;white-space:nowrap}
body.page-id-15 .opx-vault-scene-linked{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0 0;padding-top:12px;border-top:1px solid #E0DCD4}
body.page-id-15 .opx-vault-scene-label{width:100%;font:500 12px/1.4 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;color:#6B6560}
body.page-id-15 .opx-vault-scene-card{padding:6px 10px;border:1px solid #D0CCC4;border-left:2px solid #B87333;background:#fff;font-size:13px;border-radius:2px}
body.page-id-15 .opx-vault-scene-ask{margin-top:16px;border:1px solid #D0CCC4;border-radius:6px;background:#fff;padding:10px 12px}
body.page-id-15 .opx-vault-scene-ask p:first-child{color:#6B6560;font-size:13px}
body.page-id-15 .opx-vault-scene-ask b{color:#1A1A1A;font-weight:500}
body.page-id-15 .opx-vault-scene-answer{margin-top:4px!important;font-weight:600}
body.page-id-15 .opx-vault-scene-steps{display:flex;gap:0;margin:0;padding:0;list-style:none;border-top:1px solid #E0DCD4;background:#F5F3EE}
body.page-id-15 .opx-vault-scene-steps li{flex:1;margin:0;padding:10px 14px;font:500 12px/1.4 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:#1A1A1A;border-top:2px solid #B87333;counter-increment:vs}
body.page-id-15 .opx-vault-scene-steps li::before{content:"0" counter(vs) "  ";color:#985C26}
body.page-id-15 .film-hero-media .opx-vault-scene-caption{display:flex;gap:16px;justify-content:space-between;align-items:baseline}
body.page-id-15 .opx-vault-scene-caption a{white-space:nowrap}
/* Séquence unique au chargement. L'état final est l'état par défaut ; les images-clés partent de l'état initial. */
@keyframes vs-in{from{opacity:0;transform:translateY(6px)}}
@keyframes vs-type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes vs-link{from{background-size:0 1px;color:#1A1A1A}}
@keyframes vs-step{from{color:#9A948C;border-top-color:#D0CCC4}}
body.page-id-15 .opx-vault-scene-side>*{animation:vs-in .52s var(--vs-e) backwards}
body.page-id-15 .opx-vault-scene-side>:nth-child(2){animation-delay:.07s}body.page-id-15 .opx-vault-scene-side>:nth-child(3){animation-delay:.14s}body.page-id-15 .opx-vault-scene-side>:nth-child(4){animation-delay:.21s}body.page-id-15 .opx-vault-scene-side>:nth-child(5){animation-delay:.28s}body.page-id-15 .opx-vault-scene-side>:nth-child(6){animation-delay:.35s}
body.page-id-15 .opx-vault-scene-title{animation:vs-in .52s var(--vs-e) .2s backwards}
body.page-id-15 .opx-vault-scene-line.opx-vault-scene-step-1{animation:vs-type 1.2s steps(40,end) .7s backwards}
body.page-id-15 .opx-vault-scene-line.opx-vault-scene-step-2{animation:vs-in .52s var(--vs-e) 2.1s backwards}
body.page-id-15 .opx-vault-scene-link{animation:vs-link .52s var(--vs-e) 2.5s backwards}
body.page-id-15 .opx-vault-scene-link+.opx-vault-scene-link{animation-delay:2.6s}
body.page-id-15 .opx-vault-scene-linked>*{animation:vs-in .52s var(--vs-e) 2.8s backwards}
body.page-id-15 .opx-vault-scene-linked>:nth-child(3){animation-delay:2.9s}
body.page-id-15 .opx-vault-scene-ask{animation:vs-in .52s var(--vs-e) 3.6s backwards}
body.page-id-15 .opx-vault-scene-answer{animation:vs-type .9s steps(38,end) 4.1s backwards}
body.page-id-15 .opx-vault-scene-steps li.opx-vault-scene-step-1{animation:vs-step .26s var(--vs-e) .7s backwards}
body.page-id-15 .opx-vault-scene-steps li.opx-vault-scene-step-2{animation:vs-step .26s var(--vs-e) 2.1s backwards}
body.page-id-15 .opx-vault-scene-steps li.opx-vault-scene-step-3{animation:vs-step .26s var(--vs-e) 3.6s backwards}
/* Ligne d'ouverture ÉLYSIA OS sous les actions du hero */
body.page-id-15 .opx-launch-line{display:flex;gap:10px;align-items:baseline;margin:0;font:400 15px/1.5 "DM Sans",system-ui,sans-serif;color:#6B6560}
body.page-id-15 .opx-launch-line::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:#B87333;transform:translateY(-1px)}
body.page-id-15 .opx-launch-line strong{color:#1A1A1A;font-weight:600}
body.page-id-15 .opx-launch-line a{color:#1A1A1A;text-decoration:underline;text-decoration-color:#B87333;text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-thickness 160ms cubic-bezier(.2,.7,.2,1)}
body.page-id-15 .opx-launch-line a:hover{text-decoration-thickness:2px}
@media (max-width:760px){
body.page-id-15 .opx-vault-scene-body{grid-template-columns:1fr;min-height:0}
body.page-id-15 .opx-vault-scene-side{display:none}
body.page-id-15 .opx-vault-scene-note{padding:18px 18px 16px}
body.page-id-15 .opx-vault-scene-link{white-space:normal}
body.page-id-15 .opx-vault-scene-steps li{padding:9px 10px;letter-spacing:.04em}
body.page-id-15 .film-hero-media .opx-vault-scene-caption{flex-direction:column;gap:4px}
}
@media (prefers-reduced-motion:reduce){body.page-id-15 .opx-vault-scene,body.page-id-15 .opx-vault-scene *{animation:none!important}}
/* END HOME VAULT SCENE 20261010 */



/* BEGIN CONTACT H1 SCALE 20261010 : titre de /contact/ ramené à l'échelle display-lg de DESIGN.md (64 px), au lieu de 98 px sur 6 lignes. */
body.page-id-37 .opx-contact-v69 .opx-contact-hero h1{font-size:clamp(40px,4.4vw,64px)!important;line-height:1.05!important;letter-spacing:-.03em}
/* END CONTACT H1 SCALE 20261010 */