/* ================================================================
   Proxim Digital — Design System
   Atelier éditorial (Fraunces + IBM Plex) — version unifiée site entier
   Source : .impeccable.md — last update 2026-04-15
   Usage : <link rel="stylesheet" href="/proxim-design.css"> en tête de page
   ================================================================ */

/* ============================================
   DESIGN TOKENS — Atelier éditorial
   ============================================ */
:root {
  /* Colors — light mode (paper + ink + rust industrial) */
  --paper:     oklch(96% 0.015 75);
  --paper-2:   oklch(93% 0.020 75);
  --paper-3:   oklch(89% 0.022 75);
  --ink:       oklch(18% 0.018 45);
  --ink-2:     oklch(35% 0.020 45);
  --ink-3:     oklch(52% 0.015 55);
  --rust:      oklch(54% 0.145 40);
  --rust-hot:  oklch(48% 0.175 35);
  --iron:      oklch(38% 0.025 220);
  --concrete:  oklch(78% 0.012 70);
  --lime:      oklch(72% 0.135 110);

  /* Semantic aliases */
  --bg:        var(--paper);
  --bg-raised: var(--paper-2);
  --bg-deep:   var(--paper-3);
  --text:      var(--ink);
  --text-mid:  var(--ink-2);
  --text-sub:  var(--ink-3);
  --accent:    var(--rust);
  --accent-hover: var(--rust-hot);
  --line:      var(--concrete);

  /* Typography */
  --ff-display: 'Fraunces', 'Georgia', serif;
  --ff-body:    'IBM Plex Sans', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --ff-mono:    'IBM Plex Mono', 'SF Mono', Menlo, monospace;

  /* Fluid type scale — modular ratio 1.333 */
  --fs-xs:      clamp(0.78rem, 0.76rem + 0.10vw, 0.82rem);
  --fs-sm:      clamp(0.88rem, 0.85rem + 0.15vw, 0.94rem);
  --fs-base:    clamp(1.00rem, 0.96rem + 0.20vw, 1.08rem);
  --fs-lg:      clamp(1.18rem, 1.12rem + 0.30vw, 1.32rem);
  --fs-xl:      clamp(1.50rem, 1.35rem + 0.75vw, 1.85rem);
  --fs-2xl:     clamp(2.00rem, 1.70rem + 1.50vw, 2.85rem);
  --fs-3xl:     clamp(2.75rem, 2.20rem + 2.75vw, 4.20rem);
  --fs-display: clamp(3.50rem, 2.50rem + 5.00vw, 6.50rem);

  /* Spacing — 4pt base */
  --sp-1:  0.25rem;
  --sp-2:  0.50rem;
  --sp-3:  0.75rem;
  --sp-4:  1.00rem;
  --sp-5:  1.50rem;
  --sp-6:  2.00rem;
  --sp-7:  3.00rem;
  --sp-8:  4.00rem;
  --sp-9:  6.00rem;
  --sp-10: 8.00rem;

  /* Reading measure */
  --measure-tight:  38ch;
  --measure-comfy:  58ch;
  --measure-wide:   68ch;

  /* Section rhythm */
  --section-y-sm: clamp(3rem, 4vw, 5rem);
  --section-y:    clamp(5rem, 7vw, 8rem);
  --section-y-lg: clamp(7rem, 10vw, 12rem);

  /* Lines */
  --rule:       1px solid var(--concrete);
  --rule-ink:   1px solid var(--ink);
  --rule-heavy: 2px solid var(--ink);

  /* Motion */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.19, 1, 0.22, 1);

  color-scheme: light;
}

/* ============================================
   DARK MODE — vraie personnalité, pas inversion
   ============================================ */
[data-theme="dark"] {
  --paper:     oklch(14% 0.018 65);
  --paper-2:   oklch(18% 0.020 65);
  --paper-3:   oklch(22% 0.022 65);
  --ink:       oklch(92% 0.018 75);
  --ink-2:     oklch(74% 0.018 75);
  --ink-3:     oklch(55% 0.015 75);
  --rust:      oklch(66% 0.175 40);
  --rust-hot:  oklch(74% 0.190 40);
  --iron:      oklch(48% 0.030 220);
  --concrete:  oklch(30% 0.020 70);
  --lime:      oklch(78% 0.165 110);
  color-scheme: dark;
}

/* ============================================
   RESET + BASE
   ============================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 17px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
  font-feature-settings: 'kern' 1, 'liga' 1, 'ss01' 1;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
hr { border: 0; border-top: var(--rule); margin-block: var(--sp-5); }

/* A11y */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}
.sr-only:focus {
  position: fixed !important; top: 8px !important; left: 8px !important;
  width: auto; height: auto; padding: 0.75rem 1rem;
  background: var(--ink); color: var(--paper); z-index: 9999; clip: auto;
}
:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================
   TYPOGRAPHY PRIMITIVES
   ============================================ */
.display {
  font-family: var(--ff-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.02;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
}
.serif { font-family: var(--ff-display); }
.mono  { font-family: var(--ff-mono); font-feature-settings: 'tnum' 1; }
.num   {
  font-family: var(--ff-display);
  font-weight: 400;
  font-variation-settings: 'opsz' 144, 'SOFT' 0;
  letter-spacing: -0.03em;
  font-feature-settings: 'tnum' 1;
}

/* ============================================
   LAYOUT CONTAINERS
   ============================================ */
.wrap-wide {
  max-width: 90rem;
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 5vw, 4.5rem);
}
.wrap-editorial {
  max-width: 68ch;
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 5vw, 3rem);
}
.wrap-magazine {
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 5vw, 4rem);
}
.wrap-narrow {
  max-width: 48rem;
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 5vw, 3rem);
}

/* ============================================
   MASTHEAD (NAV) — editorial header
   ============================================ */
.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in oklab, var(--bg) 95%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: var(--rule);
}
.masthead-inner {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-block: var(--sp-4);
  padding-inline: clamp(1.5rem, 5vw, 4rem);
  max-width: 90rem;
  margin-inline: auto;
  gap: var(--sp-4);
}
.logotype {
  font-family: var(--ff-display) !important;
  font-weight: 600 !important;
  font-size: 1.35rem !important;
  letter-spacing: -0.015em !important;
  color: var(--text) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45em !important;
  line-height: 1 !important;
  text-decoration: none !important;
}
.logotype svg {
  width: 1.6em !important;
  height: 1.6em !important;
  color: var(--rust) !important;
  flex-shrink: 0 !important;
  display: block !important;
}
.logotype-text {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 0.08em !important;
}
.logotype-mark {
  color: var(--rust) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}
.masthead-nav {
  display: flex;
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: baseline;
  font-size: var(--fs-sm);
}
.masthead-nav a {
  color: var(--text-mid);
  transition: color 0.2s var(--ease-out-quart);
  padding-block: 0.25rem;
  border-bottom: 1px solid transparent;
}
.masthead-nav a:hover {
  color: var(--text);
  border-bottom-color: var(--rust);
}
.masthead-nav a.cta {
  color: var(--text);
  font-weight: 600;
  border-bottom: 1.5px solid var(--rust);
  padding-bottom: 0.15rem;
}
.masthead-nav a.cta:hover { color: var(--rust); }
.theme-btn {
  border: var(--rule);
  padding: 0.35rem 0.6rem;
  border-radius: 2px;
  font-size: 0.85rem;
  color: var(--text-sub);
  transition: border-color 0.2s, color 0.2s;
  line-height: 1;
}
.theme-btn:hover {
  border-color: var(--text);
  color: var(--text);
}
@media (max-width: 720px) {
  .masthead-nav a:not(.cta):not(.theme-btn) { display: none; }
}

/* ============================================
   BUTTONS — editorial
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.75rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  font-family: var(--ff-body);
  transition: all 0.2s var(--ease-out-quart);
  border: 1.5px solid transparent;
  line-height: 1;
  letter-spacing: 0.01em;
}
.btn-solid {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn-solid:hover {
  background: var(--rust-hot);
  border-color: var(--rust-hot);
  transform: translateY(-1px);
}
.btn-rust {
  background: var(--rust);
  color: oklch(98% 0.01 75);
  border-color: var(--rust);
}
.btn-rust:hover {
  background: var(--rust-hot);
  border-color: var(--rust-hot);
}
.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--text);
}
.btn-ghost:hover {
  background: var(--ink);
  color: var(--paper);
}
.btn-minimal {
  background: transparent;
  color: var(--text);
  border: 0;
  padding: 0.9rem 0.25rem;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
  text-decoration-color: var(--rust);
}
.btn-minimal:hover { text-decoration-color: var(--text); }

/* ============================================
   SECTION PRIMITIVES
   ============================================ */
section { scroll-margin-top: 80px; }

.sec-eyebrow {
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--rust);
  margin-bottom: var(--sp-3);
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}
.sec-eyebrow::before {
  content: '';
  display: inline-block;
  width: 2rem;
  height: 1px;
  background: var(--rust);
  translate: 0 -0.25em;
}
.sec-heading {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: var(--fs-2xl);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
  max-width: 22ch;
  margin-bottom: var(--sp-4);
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
}
.sec-heading em {
  font-style: normal;
  font-weight: 600;
  color: var(--rust);
  font-variation-settings: 'opsz' 144, 'SOFT' 0;
}
.sec-lede {
  font-size: var(--fs-lg);
  color: var(--text-mid);
  max-width: 55ch;
  line-height: 1.55;
  margin-bottom: var(--sp-7);
}

/* ============================================
   BREADCRUMB
   ============================================ */
.breadcrumb {
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-sub);
  margin-bottom: var(--sp-5);
  padding-top: var(--sp-5);
}
.breadcrumb a {
  color: var(--text-sub);
  border-bottom: 1px solid transparent;
  transition: all 0.2s;
}
.breadcrumb a:hover {
  color: var(--rust);
  border-bottom-color: var(--rust);
}

/* ============================================
   FAQ — editorial disclosure (shared)
   ============================================ */
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: var(--rule-heavy);
  border-bottom: var(--rule-heavy);
  max-width: 60rem;
  margin-inline: auto;
}
.faq-item {
  border-top: var(--rule);
  padding-block: var(--sp-4);
}
.faq-item:first-child { border-top: none; }
.faq-q {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  color: var(--text);
  line-height: 1.32;
  letter-spacing: -0.005em;
  cursor: pointer;
  padding: var(--sp-2) 0;
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  align-items: baseline;
  font-variation-settings: 'opsz' 60, 'SOFT' 30;
  user-select: none;
}
.faq-q::after {
  content: '+';
  font-family: var(--ff-display);
  font-weight: 300;
  color: var(--rust);
  font-size: 1.35em;
  line-height: 0.8;
  flex-shrink: 0;
  transition: transform 0.25s var(--ease-out-quart);
}
.faq-item.open .faq-q::after { transform: rotate(45deg); }
.faq-a {
  font-size: var(--fs-base);
  color: var(--text-mid);
  line-height: 1.68;
  max-width: 62ch;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease-out-expo), padding 0.25s;
}
.faq-item.open .faq-a {
  max-height: 32rem;
  padding-block: var(--sp-3) var(--sp-4);
}

/* ============================================
   FOOTER — site-wide
   ============================================ */
footer.site-footer {
  padding: var(--sp-7) 0 var(--sp-6);
  background: var(--paper-2);
  border-top: var(--rule);
}
.footer-inner {
  max-width: 90rem;
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 5vw, 4.5rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}
@media (min-width: 720px) {
  .footer-inner { grid-template-columns: auto 1fr auto; align-items: baseline; }
}
.footer-tagline {
  font-family: var(--ff-display);
  font-weight: 400;
  font-style: italic;
  font-size: var(--fs-base);
  color: var(--text-mid);
  max-width: 36ch;
  line-height: 1.4;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  font-family: var(--ff-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-sub);
}
.footer-links a {
  color: var(--text-sub);
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--rust); }
.footer-copy {
  max-width: 90rem;
  margin: var(--sp-6) auto 0;
  padding: var(--sp-4) clamp(1.5rem, 5vw, 4.5rem) 0;
  border-top: var(--rule);
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-sub);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* ============================================
   EDITORIAL TEXT PAGES
   (methode, cgv, mentions-legales, privacy, about)
   ============================================ */
.page-editorial {
  padding-block: var(--section-y);
}
.page-editorial .page-header {
  max-width: 68ch;
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 5vw, 3rem);
  margin-bottom: var(--sp-7);
}
.page-editorial .page-header h1 {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: var(--fs-3xl);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--text);
  margin-bottom: var(--sp-4);
  max-width: 18ch;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
}
.page-editorial .page-header h1 em {
  font-style: normal;
  font-weight: 600;
  color: var(--rust);
  font-variation-settings: 'opsz' 144, 'SOFT' 0;
}
.page-editorial .page-header .lede {
  font-size: var(--fs-lg);
  color: var(--text-mid);
  line-height: 1.55;
  max-width: 54ch;
}
.page-editorial .page-body {
  max-width: 68ch;
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 5vw, 3rem);
  font-size: var(--fs-base);
  line-height: 1.75;
  color: var(--text-mid);
}
.page-editorial .page-body h2 {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: var(--fs-xl);
  color: var(--text);
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-4);
  font-variation-settings: 'opsz' 96, 'SOFT' 30;
  max-width: 24ch;
}
.page-editorial .page-body h2::before {
  content: '';
  display: block;
  width: 2rem;
  height: 2px;
  background: var(--rust);
  margin-bottom: var(--sp-3);
}
.page-editorial .page-body h3 {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: var(--fs-lg);
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-3);
  font-variation-settings: 'opsz' 60, 'SOFT' 30;
}
.page-editorial .page-body p { margin-bottom: var(--sp-4); max-width: 62ch; }
.page-editorial .page-body p strong { color: var(--text); font-weight: 600; }
.page-editorial .page-body a {
  color: var(--rust);
  border-bottom: 1px solid var(--rust);
  transition: all 0.2s;
}
.page-editorial .page-body a:hover {
  color: var(--rust-hot);
  border-bottom-color: var(--rust-hot);
}
.page-editorial .page-body ul,
.page-editorial .page-body ol {
  margin-bottom: var(--sp-5);
  padding-left: var(--sp-5);
  max-width: 60ch;
}
.page-editorial .page-body ul { list-style: none; padding-left: 0; }
.page-editorial .page-body ul > li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: var(--sp-2);
}
.page-editorial .page-body ul > li::before {
  content: '›';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--rust);
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 1.2em;
  line-height: 1.3;
}
.page-editorial .page-body ol > li { margin-bottom: var(--sp-2); padding-left: 0.25rem; }
.page-editorial .page-body table {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--sp-5);
  font-size: var(--fs-sm);
  border-top: var(--rule-heavy);
  border-bottom: var(--rule-heavy);
}
.page-editorial .page-body th,
.page-editorial .page-body td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  border-bottom: var(--rule);
  vertical-align: top;
}
.page-editorial .page-body th {
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-sub);
  font-weight: 600;
}
.page-editorial .page-body blockquote {
  border-left: 3px solid var(--rust);
  padding-left: var(--sp-5);
  margin-block: var(--sp-6);
  font-family: var(--ff-display);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--text);
  font-variation-settings: 'opsz' 96, 'SOFT' 0;
  max-width: 56ch;
}

/* ============================================
   BLOG ARTICLE LAYOUT + COMPONENTS
   ============================================ */
.article-wrap {
  max-width: 44rem !important;
  width: min(44rem, 100vw - 3rem) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: var(--sp-8) 0 var(--sp-9) !important;
  box-sizing: border-box !important;
  display: block !important;
  min-width: 0 !important;
}
.article-wrap * {
  box-sizing: border-box;
  min-width: 0;
}
.article-wrap p {
  max-width: none !important;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.article-meta {
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rust);
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  align-items: baseline;
  margin-bottom: var(--sp-4);
}
.article-meta > * { display: inline-flex; align-items: baseline; gap: var(--sp-2); }
.meta-tag { color: var(--rust); font-weight: 600; }
.meta-date, .meta-read { color: var(--text-sub); }
.meta-date::before, .meta-read::before { content: '·'; color: var(--concrete); margin-right: var(--sp-2); }

.article-wrap h1 {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: var(--sp-2);
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  max-width: 22ch;
}
.article-wrap h1 em {
  font-style: normal;
  font-weight: 600;
  color: var(--rust);
  font-variation-settings: 'opsz' 144, 'SOFT' 0;
}

.article-byline {
  margin: var(--sp-3) 0 var(--sp-6) !important;
  font-family: var(--ff-mono) !important;
  font-size: 0.82rem !important;
  color: var(--text-sub) !important;
  padding-top: var(--sp-3);
  border-top: var(--rule);
  padding-bottom: var(--sp-3);
  border-bottom: var(--rule);
}
.article-byline a {
  color: var(--text) !important;
  font-family: var(--ff-body) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border-bottom: 1.5px solid var(--rust) !important;
}
.article-byline a:hover { color: var(--rust) !important; }

.article-intro {
  font-family: var(--ff-display) !important;
  font-weight: 400 !important;
  font-style: normal;
  font-size: var(--fs-lg) !important;
  line-height: 1.55 !important;
  color: var(--text-mid) !important;
  border-left: none !important;
  padding-left: 0 !important;
  margin-bottom: var(--sp-5) !important;
  max-width: 60ch;
  font-variation-settings: 'opsz' 96, 'SOFT' 30;
}

.tldr-box {
  background: var(--paper-2) !important;
  border-left: 3px solid var(--rust) !important;
  border-radius: 0 !important;
  padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-6) !important;
  margin: var(--sp-5) 0 var(--sp-7) !important;
  font-family: var(--ff-display) !important;
  font-size: var(--fs-base) !important;
  line-height: 1.65 !important;
  color: var(--text) !important;
  font-variation-settings: 'opsz' 60, 'SOFT' 30;
  max-width: 64ch;
}
.tldr-box strong:first-of-type {
  display: block !important;
  font-family: var(--ff-mono) !important;
  font-size: 0.72rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--rust) !important;
  margin-bottom: var(--sp-2) !important;
  font-weight: 600 !important;
}

/* Blog article body typography */
.article-wrap h2 {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--text);
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-4);
  font-variation-settings: 'opsz' 96, 'SOFT' 30;
  max-width: 28ch;
  padding-top: var(--sp-5);
  border-top: var(--rule);
}
.article-wrap h2:first-of-type { border-top: none; padding-top: 0; }
.article-wrap h3 {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-3);
  font-variation-settings: 'opsz' 60, 'SOFT' 30;
}
.article-wrap p {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-base);
  color: var(--text-mid);
  line-height: 1.72;
  max-width: 62ch;
}
.article-wrap p strong { color: var(--text); font-weight: 600; }
.article-wrap a {
  color: var(--rust);
  border-bottom: 1px solid var(--rust);
  transition: all 0.2s;
}
.article-wrap a:hover { color: var(--rust-hot); border-bottom-color: var(--rust-hot); }

.article-wrap ul,
.article-wrap ol {
  margin-bottom: var(--sp-5);
  padding-left: 0;
  list-style: none;
  max-width: 60ch;
}
.article-wrap ul.checklist li,
.article-wrap ul > li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text-mid);
}
.article-wrap ul.checklist li::before,
.article-wrap ul > li::before {
  content: '›';
  position: absolute;
  left: 0;
  top: -0.05em;
  color: var(--rust);
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 1.2em;
}
.article-wrap ol { counter-reset: item; padding-left: 0; }
.article-wrap ol > li {
  counter-increment: item;
  position: relative;
  padding-left: 2.5rem;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text-mid);
}
.article-wrap ol > li::before {
  content: counter(item, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.05em;
  font-family: var(--ff-mono);
  font-weight: 600;
  font-size: 0.85em;
  color: var(--rust);
  letter-spacing: 0.02em;
}

/* Components editorial */
.tip-block {
  border-left: 3px solid var(--rust);
  padding: var(--sp-4) var(--sp-5);
  margin-block: var(--sp-5);
  background: var(--paper-2);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text);
  max-width: 62ch;
}
.tip-block strong { font-family: var(--ff-display); font-weight: 600; color: var(--rust); }

.highlight-box {
  padding: var(--sp-5) var(--sp-6);
  background: var(--paper-2);
  border-top: var(--rule-heavy);
  border-bottom: var(--rule-heavy);
  margin-block: var(--sp-6);
  max-width: 64ch;
}
.highlight-box h3 {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: var(--fs-lg);
  color: var(--text);
  margin-top: 0 !important;
  margin-bottom: var(--sp-3) !important;
  font-variation-settings: 'opsz' 60, 'SOFT' 30;
  border-top: 0 !important;
  padding-top: 0 !important;
}
.highlight-box p { margin-bottom: var(--sp-3); }
.highlight-box p:last-child { margin-bottom: 0; }

.reason-block {
  display: block;
  position: relative;
  margin-block: var(--sp-5);
  padding: var(--sp-5) 0 var(--sp-4) 5rem;
  border-top: var(--rule);
  min-width: 0;
}
.reason-number {
  position: absolute;
  left: 0;
  top: var(--sp-4);
  width: 4rem;
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 0.85;
  color: var(--rust);
  letter-spacing: -0.035em;
  font-variation-settings: 'opsz' 144;
  font-feature-settings: 'tnum' 1;
}
.reason-block h3 {
  margin-top: 0 !important;
  margin-bottom: var(--sp-2) !important;
  border-top: 0 !important;
  padding-top: 0 !important;
  max-width: none !important;
}
.reason-block p {
  margin-bottom: 0;
  max-width: none !important;
}
@media (max-width: 560px) {
  .reason-block { padding-left: 0; }
  .reason-number { position: static; display: block; margin-bottom: var(--sp-2); }
}

.compare-table,
.table-wrapper table {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--sp-5);
  font-size: var(--fs-sm);
  border-top: var(--rule-heavy);
  border-bottom: var(--rule-heavy);
  background: var(--paper);
}
.compare-table th,
.table-wrapper th {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-sub);
  font-weight: 600;
  border-bottom: var(--rule);
  background: var(--paper-2);
}
.compare-table td,
.table-wrapper td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: var(--rule);
  color: var(--text-mid);
  vertical-align: top;
  line-height: 1.55;
}
.compare-table tr:last-child td,
.table-wrapper tr:last-child td { border-bottom: none; }
.compare-table td:first-child { color: var(--text); font-weight: 500; }

.article-img {
  margin-block: var(--sp-6);
}
.article-img img {
  width: 100%;
  height: auto;
  display: block;
  border: var(--rule);
}
.article-img figcaption {
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  color: var(--text-sub);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: var(--rule);
  max-width: 60ch;
}

/* Sommaire */
details.toc-mobile {
  margin-block: var(--sp-5);
  border-top: var(--rule);
  border-bottom: var(--rule);
  padding-block: var(--sp-3);
}
details.toc-mobile summary {
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--rust);
  cursor: pointer;
  list-style: none;
  padding-block: var(--sp-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
details.toc-mobile summary::-webkit-details-marker { display: none; }
details.toc-mobile summary::after {
  content: '+';
  font-family: var(--ff-display);
  font-weight: 300;
  color: var(--rust);
  font-size: 1.25em;
  transition: transform 0.25s;
}
details.toc-mobile[open] summary::after { transform: rotate(45deg); }
details.toc-mobile ol {
  margin-top: var(--sp-3);
  padding-left: 0;
  list-style: none;
  counter-reset: tocitem;
}
details.toc-mobile li {
  counter-increment: tocitem;
  padding-left: 2.5rem;
  padding-block: var(--sp-2);
  position: relative;
  font-size: var(--fs-sm);
}
details.toc-mobile li::before {
  content: counter(tocitem, decimal-leading-zero);
  position: absolute;
  left: 0;
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  color: var(--rust);
  font-weight: 600;
}
details.toc-mobile a {
  color: var(--text);
  border-bottom: 0;
  font-family: var(--ff-body);
}
details.toc-mobile a:hover { color: var(--rust); }

/* Sidebar TOC : on desktop, shown in column 2 of article grid (sticky). On mobile, hidden (toc-mobile details shown instead). */
aside.toc-sidebar {
  display: none;
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  color: var(--text-sub);
  border-left: var(--rule);
  padding-left: var(--sp-4);
  max-height: 70vh;
  overflow-y: auto;
  line-height: 1.5;
}
aside.toc-sidebar .toc-side-title {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--rust);
  margin-bottom: var(--sp-3);
  font-weight: 600;
}
aside.toc-sidebar ol {
  counter-reset: tocsidebar;
  list-style: none;
  padding: 0;
  margin: 0;
}
aside.toc-sidebar li {
  counter-increment: tocsidebar;
  padding-left: 2rem;
  padding-block: var(--sp-1);
  position: relative;
  font-size: 0.72rem;
  line-height: 1.4;
}
aside.toc-sidebar li::before {
  content: counter(tocsidebar, decimal-leading-zero);
  position: absolute;
  left: 0;
  color: var(--rust);
  font-weight: 600;
}
aside.toc-sidebar a {
  color: var(--text-mid);
  border-bottom: 0;
  display: block;
  padding-block: 2px;
}
aside.toc-sidebar a:hover { color: var(--rust); }

@media (min-width: 1100px) {
  .article-wrap {
    display: grid !important;
    grid-template-columns: minmax(0, 13rem) minmax(0, 42rem) !important;
    gap: 3.5rem !important;
    max-width: 62rem !important;
    width: min(62rem, 100vw - 3rem) !important;
  }
  .article-wrap > aside.toc-sidebar {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 1 / span 999 !important;
    position: sticky !important;
    top: 6rem !important;
    align-self: start !important;
    max-height: calc(100vh - 8rem) !important;
  }
  .article-wrap > *:not(aside.toc-sidebar) {
    grid-column: 2 !important;
  }
}

/* Blog article FAQ + related articles + final CTA */
.article-wrap .faq-block {
  margin-block: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: var(--rule-heavy);
}
.article-wrap .faq-block h2 {
  border-top: 0 !important;
  padding-top: 0 !important;
  margin-top: 0;
}

.related-articles {
  margin-block: var(--sp-7);
  padding: var(--sp-5);
  background: var(--paper-2);
  border-top: var(--rule);
  border-bottom: var(--rule);
}
.related-articles h3 {
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--rust);
  margin: 0 0 var(--sp-3) !important;
  border-top: 0 !important;
  padding-top: 0 !important;
}
.related-articles ul { padding-left: 0; margin: 0; }
.related-articles li { padding-left: 1.5rem; margin-bottom: var(--sp-2); font-size: var(--fs-sm); }
.related-articles li::before { content: '›'; color: var(--rust); }
.related-articles a {
  color: var(--text);
  border-bottom: 0;
  font-weight: 500;
}
.related-articles a:hover { color: var(--rust); }

.cta-article {
  margin-block: var(--sp-8);
  padding: var(--sp-6) var(--sp-5);
  border-top: var(--rule-heavy);
  border-bottom: var(--rule-heavy);
  text-align: center;
}
.cta-article h2 {
  border-top: 0 !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
  max-width: 24ch;
  margin-inline: auto;
}
.cta-article p { max-width: 52ch; margin-inline: auto; }

.disclaimer {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: var(--rule);
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  color: var(--text-sub);
  font-style: normal !important;
  line-height: 1.5;
  max-width: 60ch;
}
.disclaimer em { font-style: normal; }

/* ============================================
   CTA BLOCK (reusable end-of-page call to action)
   ============================================ */
.cta-block {
  max-width: 60rem;
  margin: var(--sp-8) auto var(--sp-6);
  padding: var(--sp-6) clamp(1.5rem, 5vw, 3rem);
  border-top: var(--rule-heavy);
  border-bottom: var(--rule-heavy);
  text-align: center;
}
.cta-block h3 {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: var(--fs-xl);
  color: var(--text);
  margin-bottom: var(--sp-3);
  letter-spacing: -0.015em;
  font-variation-settings: 'opsz' 96, 'SOFT' 30;
}
.cta-block p {
  color: var(--text-mid);
  margin-bottom: var(--sp-5);
  max-width: 52ch;
  margin-inline: auto;
  line-height: 1.6;
}