*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Palatino Linotype',Palatino,'Book Antiqua',serif;line-height:1.9;color:#2a2a2a;background:#fefefe}
.sc-MIxtir{max-width:640px;margin:0 auto;padding:0 20px}
.sc-XokFok{padding:60px 0 40px;border-bottom:1px solid #ccc;margin-bottom:48px}
.sc-XokFok h1{font-size:24px;font-weight:400;letter-spacing:-.5px}
.sc-XokFok p{font-size:14px;color:#777;margin-top:6px;font-style:italic}
.sc-XokFok a{color:#2a2a2a;text-decoration:none;font-size:24px;font-weight:400;letter-spacing:-.5px}
.sc-ibPRWj{padding:20px 0}
.sc-ibPRWj h2{font-size:18px;font-weight:400;margin-bottom:4px}
.sc-ibPRWj h2 a{color:#2a2a2a;text-decoration:none;border-bottom:1px solid transparent}
.sc-ibPRWj h2 a:hover{border-bottom-color:#2a2a2a}
.sc-ibPRWj .sc-gMnQvM{font-size:12px;color:#aaa;margin-bottom:6px}
.sc-ibPRWj p{font-size:14px;color:#666}
.sc-okUITF{color:#888;font-size:13px;text-decoration:none}
.sc-okUITF:hover{color:#2a2a2a}
.sc-zBQrew{padding-bottom:60px}
.sc-zBQrew h1{font-size:28px;font-weight:400;margin-bottom:8px}
.sc-zBQrew .sc-gMnQvM{font-size:12px;color:#aaa;display:block;margin-bottom:32px}
.sc-zBQrew h2{font-size:21px;font-weight:400;margin:40px 0 12px;border-bottom:1px solid #eee;padding-bottom:6px}
.sc-zBQrew h3{font-size:17px;margin:28px 0 8px}
.sc-zBQrew p{margin-bottom:18px;font-size:16px}
.sc-zBQrew ul,.sc-zBQrew ol{margin:0 0 18px 20px}
.sc-zBQrew a{color:#555;border-bottom:1px solid #ccc}
.sc-zBQrew a:hover{color:#000;border-bottom-color:#000}
.sc-zBQrew img{max-width:100%;height:auto;margin:24px 0}
.sc-yJArWa{border-top:1px solid #ddd;padding:20px 0;margin-top:48px;text-align:center;font-size:12px;color:#aaa}
.sc-yJArWa a{color:#aaa;text-decoration:none}
.sc-gRJSCU{padding:0 0 16px;margin-bottom:24px;font-size:12px;color:#aaa;font-style:italic;border-bottom:1px solid #eee}
.sc-WQYYKb{padding:16px 0 0;margin-top:32px;font-size:11px;color:#999;border-top:1px solid #eee}
.sc-nYkPYQ{font-size:12px;color:#aaa;margin:-26px 0 32px;font-weight:300}
.sc-SLJUSn{margin:0 auto 32px;max-width:720px}
.sc-SXvGTN{width:100%;height:auto}
.sc-OQLnfu{margin-top:40px;padding-top:20px;border-top:1px solid #eee;font-size:14px;color:#888}
.sc-OQLnfu em{color:#aaa}
.sc-OQLnfu a{color:#555;border-bottom:1px solid #ddd;text-decoration:none}
.sc-SiMqzw{padding:24px 0 0;border-top:1px solid #eee;margin-top:24px}
.sc-SiMqzw p{padding:3px 0;margin:0;font-size:15px}
.sc-SiMqzw a{color:#2a2a2a;text-decoration:none;border-bottom:1px solid transparent}
.sc-SiMqzw a:hover{border-bottom-color:#2a2a2a}
/* === Theme === */
:root{--primary:#2B3D52;--accent:#9E6B3F;--bg:#F2F0EC;--fg:#1A1F27;--border:#C8C4BE;--rust:#B34F2A;--moment:#7C4A5C;--r:2px;--fb:'DM Sans';--fh:'Spectral'}
/* === Custom === */
/*
 * Design reference: Gallimard Collection Folio paperback covers (1970s–1980s)
 * The typographic restraint of Gallimard Folio — Prussian blue authority,
 * brass oxide accents, Spectral at light weight for literary rigour,
 * near-square 2px radius referencing printed matter rather than app UI conventions.
 * Site: ev-success-fr (Réussite Sereine) — Author: Camille Devaux
 */

@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;1,300&family=DM+Sans:wght@400;500&display=swap');

/* ── Reset & Base ─────────────────────────────────────────────── */

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

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

body {
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--fb), system-ui, -apple-system, sans-serif;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.01em;
  min-height: 100vh;
}

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

/* ── Typography Scale ─────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fh), Palatino, 'Book Antiqua', serif;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--fg);
}

h1 {
  font-size: 2.6rem;
  font-style: italic;
  margin-bottom: 1.2rem;
  letter-spacing: -0.02em;
}

h2 {
  font-size: 1.75rem;
  margin-top: 2.4rem;
  margin-bottom: 0.9rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
}

h3 {
  font-size: 1.3rem;
  font-style: italic;
  margin-top: 1.8rem;
  margin-bottom: 0.6rem;
  color: var(--primary);
}

h4 {
  font-weight: 500;
  margin-top: 1.4rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--fb), system-ui, sans-serif;
  font-size: 0.8rem;
  color: var(--primary);
}

h5, h6 {
  font-size: 0.95rem;
  font-weight: 500;
  margin-top: 1.2rem;
  margin-bottom: 0.4rem;
}

p {
  margin-bottom: 1.2em;
  max-width: 68ch;
}

/* ── Links ────────────────────────────────────────────────────── */

a {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 3px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r);
}

/* ── Horizontal Rule ──────────────────────────────────────────── */

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2.4rem 0;
}

/* ── Blockquote ───────────────────────────────────────────────── */

blockquote {
  border-left: 3px solid var(--primary);
  margin: 2rem 0;
  padding: 1rem 1.5rem;
  background-color: transparent;
  font-family: var(--fh), Palatino, 'Book Antiqua', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--primary);
}

blockquote p {
  margin-bottom: 0.4em;
  max-width: none;
}

blockquote cite {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--fb), system-ui, sans-serif;
  font-style: normal;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ── Lists ────────────────────────────────────────────────────── */

ul, ol {
  padding-left: 1.5rem;
  margin-bottom: 1.2em;
}

ul {
  list-style: none;
  padding-left: 0;
}

ul li {
  padding-left: 1.2rem;
  position: relative;
  margin-bottom: 0.5em;
}

ul li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 400;
}

ol li {
  margin-bottom: 0.5em;
  padding-left: 0.3rem;
}

li {
  line-height: 1.6;
}

/* ── Site Navigation ──────────────────────────────────────────── */

.site-nav {
  background-color: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 0 2rem;
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-nav .nav-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
}

.site-nav .nav-logo {
  font-family: var(--fh), Palatino, 'Book Antiqua', serif;
  font-weight: 300;
  font-style: italic;
  font-size: 1.2rem;
  color: var(--primary);
  text-decoration: none;
  letter-spacing: 0.02em;
}

.site-nav .nav-logo:hover {
  color: var(--accent);
  text-decoration: none;
}

.site-nav .nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-nav .nav-links li {
  padding: 0;
  margin: 0;
}

.site-nav .nav-links li::before {
  display: none;
}

.site-nav .nav-links a {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: none;
}

.site-nav .nav-links a:hover {
  color: var(--accent);
}

/* ── Hero Section ─────────────────────────────────────────────── */

.hero {
  border: 1px solid var(--border);
  border-radius: var(--r);
  margin: 3rem auto;
  max-width: 1080px;
  padding: 4rem 3.5rem;
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 2rem;
  align-items: end;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background-color: var(--primary);
}

.hero .hero-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-family: var(--fb), system-ui, sans-serif;
  margin-bottom: 1rem;
}

.hero h1 {
  margin-bottom: 1rem;
  font-size: 3rem;
}

.hero .hero-tagline {
  font-family: var(--fh), Palatino, 'Book Antiqua', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 1.15rem;
  color: var(--primary);
  max-width: 52ch;
  line-height: 1.55;
  margin-bottom: 0;
}

.hero .hero-meta {
  text-align: right;
  font-size: 0.78rem;
  color: var(--border);
  letter-spacing: 0.06em;
  align-self: start;
  padding-top: 0.5rem;
}

/* ── Article Cards ────────────────────────────────────────────── */

.card-grid {
  max-width: 1080px;
  margin: 0 auto 3rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  padding: 0 2rem;
}

.card {
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.6rem 1.8rem;
  background-color: var(--bg);
  transition: border-color 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.card:hover {
  border-color: var(--primary);
}

.card .card-category {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  font-family: var(--fb), system-ui, sans-serif;
}

.card h3 {
  font-size: 1.15rem;
  margin: 0;
  font-style: normal;
  color: var(--fg);
}

.card h3 a {
  text-decoration: none;
  color: inherit;
}

.card h3 a:hover {
  color: var(--primary);
}

.card .card-excerpt {
  font-size: 0.9rem;
  color: var(--fg);
  opacity: 0.78;
  line-height: 1.55;
  margin-bottom: 0;
  flex: 1;
}

.card .card-meta {
  font-size: 0.75rem;
  color: var(--border);
  letter-spacing: 0.04em;
  border-top: 1px solid var(--border);
  padding-top: 0.7rem;
  margin-top: 0.3rem;
}

/* ── Article Layout ───────────────────────────────────────────── */

.article-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 2rem;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 4rem;
}

.article-body {
  max-width: 68ch;
}

.article-header {
  margin-bottom: 2.4rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--border);
}

.article-category {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 0.8rem;
}

.article-byline {
  font-size: 0.8rem;
  color: var(--fg);
  opacity: 0.6;
  letter-spacing: 0.04em;
  margin-top: 0.8rem;
}

/* ── Button ───────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  padding: 0.55rem 1.2rem;
  background-color: var(--primary);
  color: var(--bg);
  text-decoration: none;
  border-radius: var(--r);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  font-family: var(--fb), system-ui, sans-serif;
  transition: background-color 0.15s ease;
}

.btn:hover {
  background-color: var(--accent);
  color: var(--bg);
  text-decoration: none;
}

/* ── Disclaimer blocks ────────────────────────────────────────── */

.sc-gRJSCU, .sc-WQYYKb {
  font-size: 0.78rem;
  color: var(--fg);
  opacity: 0.55;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
  margin-top: 2rem;
  line-height: 1.5;
}

/* ── Sidebar ──────────────────────────────────────────────────── */

.sidebar {
  padding-top: 0.4rem;
}

.sidebar-widget {
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.4rem;
  margin-bottom: 1.5rem;
}

.sidebar-widget h4 {
  margin-top: 0;
  margin-bottom: 0.9rem;
}

/* ── Site Footer ──────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--border);
  padding: 2.4rem 2rem;
  margin-top: 4rem;
}

.site-footer .footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.site-footer .footer-copy {
  font-size: 0.78rem;
  color: var(--fg);
  opacity: 0.55;
  letter-spacing: 0.03em;
}

.site-footer .footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1.5rem;
}

.site-footer .footer-links li {
  padding: 0;
  margin: 0;
}

.site-footer .footer-links li::before {
  display: none;
}

.site-footer .footer-links a {
  font-size: 0.78rem;
  text-decoration: none;
  color: var(--fg);
  opacity: 0.6;
  letter-spacing: 0.05em;
}

.site-footer .footer-links a:hover {
  color: var(--accent);
  opacity: 1;
}

/* ── Section Label ────────────────────────────────────────────── */

.section-label {
  max-width: 1080px;
  margin: 0 auto 1.2rem;
  padding: 0 2rem;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  font-family: var(--fb), system-ui, sans-serif;
}

/* ── Utility padding wrapper ──────────────────────────────────── */

.content-wrap {
  padding: 0 2rem;
}

/* === R2 fixes (2026-06-25T00:40:10.723932+00:00) === */

/* Article list — visual separation between entries */
.sc-ibPRWj {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding-bottom: 2rem;
  margin-bottom: 2rem;
}

/* Article body — h2 headings as navigation anchors */
.sc-zBQrew article h2 {
  margin-top: 2.5em;
  margin-bottom: 0.6em;
}

/* Article body — airy line-height for reflective prose */
.sc-zBQrew article p {
  line-height: 1.8;
}

/* Read-more link — visually distinct call to action */
.sc-okUITF {
  font-weight: 500;
  text-decoration: underline;
  letter-spacing: 0.02em;
}

/* Site brand title — full brand identity on homepage h1, matching article-page anchor */
.sc-XokFok h1 {
  font-family: var(--fh), Palatino, 'Book Antiqua', serif;
  font-size: 1.35rem;
  font-weight: 600;
  font-style: italic;
  color: var(--primary);
  letter-spacing: 0.01em;
  margin: 0;
}

/* === R3 fixes (2026-06-25T01:20:09.894202+00:00) === */

/* Site brand — target the actual rendered anchor, not h1 */
.sc-XokFok a {
  font-family: var(--fh), Palatino, 'Book Antiqua', serif;
  font-size: 1.35rem;
  font-weight: 600;
  font-style: italic;
  text-decoration: none;
  color: var(--primary);
  letter-spacing: 0.01em;
}

/* Affiliate disclosure — discreet footnote, not warning block */
.sc-WQYYKb {
  font-size: 0.82rem;
  color: var(--fg);
  opacity: 0.55;
  border-left: none;
  border-top: 1px solid var(--border);
  padding: 0.8rem 0 0;
  margin-top: 2.4rem;
  margin-bottom: 1.2rem;
  background: transparent;
  display: block;
}

/* Comparison table — readable structure with distinct header */
.sc-zBQrew table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.88rem;
  margin: 1.5rem 0 2rem;
}

.sc-zBQrew th {
  background-color: var(--primary);
  color: var(--bg);
  padding: 0.65rem 0.9rem;
  text-align: left;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--fb), system-ui, sans-serif;
  font-weight: 500;
}

.sc-zBQrew td {
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  line-height: 1.55;
}

/* Prose emphasis — anchor for the eye in long-form reading */
.sc-zBQrew article p strong {
  color: var(--primary);
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* === R4 fixes (2026-06-25T02:00:26.779166+00:00) === */

/* Homepage tagline — readable subtitle beneath brand logo */
.sc-XokFok p {
  font-size: 0.9rem;
  color: var(--fg);
  opacity: 0.75;
  font-style: italic;
  max-width: 54ch;
  line-height: 1.65;
  margin-top: 0.45rem;
}

/* Article blockquote — editorial punctuation in long-form prose */
.sc-zBQrew article blockquote {
  border-left: 3px solid var(--primary);
  padding: 0.75rem 1.25rem;
  margin: 2rem 0 2rem 0.5rem;
  font-size: 1.05rem;
  font-style: italic;
  color: var(--primary);
  background: transparent;
  line-height: 1.7;
}

/* v.f0f070 — layout revision */

/* ── Webfonts: declared as @font-face (the top @import is dropped by the
   deploy concat, so fonts must load position-independently) ───────────── */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(https://fonts.gstatic.com/s/dmsans/v17/rP2Yp2ywxg089UriI5-g4vlH9VoD8CmcqYu28qmR9A.woff2) format('woff2');}
@font-face{font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;
  src:url(https://fonts.gstatic.com/s/spectral/v15/rnCr-xNNww_2s0amA-M7mH_OSQ.woff2) format('woff2');}
@font-face{font-family:'Spectral';font-style:normal;font-weight:500;font-display:swap;
  src:url(https://fonts.gstatic.com/s/spectral/v15/rnCs-xNNww_2s0amA9vKsV3DY_GtWA.woff2) format('woff2');}
@font-face{font-family:'Spectral';font-style:italic;font-weight:300;font-display:swap;
  src:url(https://fonts.gstatic.com/s/spectral/v15/rnCu-xNNww_2s0amA9M8qtHEafaPWnII.woff2) format('woff2');}
@font-face{font-family:'Spectral';font-style:italic;font-weight:400;font-display:swap;
  src:url(https://fonts.gstatic.com/s/spectral/v15/rnCt-xNNww_2s0amA9M8knjsS_ul.woff2) format('woff2');}

:root{
  --moment:#7C4A5C;         /* assigned moment colour — used in exactly 2 places */
  --paper:#F7F3EA;          /* warm card surface, never white */
  --hairline:rgba(43,61,82,.12);
}

/* ── Masthead — full-bleed photo band shared by home + article ───────── */
body > header.sc-XokFok{
  position:relative;
  max-width:none;
  margin:0 0 80px;
  padding:96px 24px 82px;
  text-align:center;
  overflow:hidden;
  border:none;
  border-bottom:3px solid var(--moment);       /* moment colour #1 — signature rule */
  background:#1b2634;
}
body > header.sc-XokFok::before{
  content:"";
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(20,29,42,.66),rgba(20,29,42,.82)),
    url("/theme-assets/hero-masthead.jpg");
  background-size:cover;
  background-position:center 42%;
  z-index:0;
}
body > header.sc-XokFok > *{ position:relative; z-index:1; }
body > header.sc-XokFok:has(> a){ padding:54px 24px; }   /* article masthead shorter */

body > header.sc-XokFok h1{
  font-family:'Spectral',Palatino,'Book Antiqua',serif;
  font-style:italic; font-weight:400;
  font-size:2.9rem; line-height:1.08; letter-spacing:-.015em;
  color:#F7F3EA; margin:0;
}
body > header.sc-XokFok p{
  font-family:'Spectral',Palatino,'Book Antiqua',serif;
  font-style:italic; font-weight:300;
  font-size:1rem; line-height:1.6;
  color:rgba(247,243,234,.82);
  max-width:58ch; margin:1.1rem auto 0;
}
body > header.sc-XokFok a{
  font-family:'Spectral',Palatino,'Book Antiqua',serif;
  font-style:italic; font-weight:400;
  font-size:2rem; letter-spacing:-.01em;
  color:#F7F3EA; text-decoration:none;
}
body > header.sc-XokFok a:hover{ color:#fff; }

/* ── Home column ─────────────────────────────────────────────────────── */
main.sc-MIxtir:not(.sc-zBQrew){
  max-width:722px;
  padding:0 24px 48px;
}

/* Card base (every home entry) */
main.sc-MIxtir:not(.sc-zBQrew) > .sc-ibPRWj{
  position:relative;
  background:var(--paper);
  border:1px solid var(--hairline);
  border-radius:9px;
  box-shadow:0 1px 4px rgba(0,0,0,.04);
  padding:26px 34px;
  margin:0 0 26px;
}
main.sc-MIxtir:not(.sc-zBQrew) > .sc-ibPRWj > .sc-gMnQvM{
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:.72rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); margin:0 0 12px;
}
main.sc-MIxtir:not(.sc-zBQrew) > .sc-ibPRWj > h2{
  font-family:'Spectral',Palatino,'Book Antiqua',serif;
  font-weight:400; font-size:1.34rem; line-height:1.3;
  margin:0 0 12px; border:none; padding:0;
}
main.sc-MIxtir:not(.sc-zBQrew) > .sc-ibPRWj > h2 > a{
  color:var(--primary); text-decoration:none; border:none;
}
main.sc-MIxtir:not(.sc-zBQrew) > .sc-ibPRWj > h2 > a:hover{ color:var(--accent); }
main.sc-MIxtir:not(.sc-zBQrew) > .sc-ibPRWj > p{
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:1rem; line-height:1.7; color:#3b424b;
  max-width:64ch; margin:0 0 16px;
}
main.sc-MIxtir:not(.sc-zBQrew) > .sc-ibPRWj > .sc-okUITF{
  display:inline-block;
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:.7rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); text-decoration:none;
  border-bottom:1px solid rgba(158,107,63,.4);
  padding-bottom:2px;
}
main.sc-MIxtir:not(.sc-zBQrew) > .sc-ibPRWj > .sc-okUITF:hover{
  color:var(--primary); border-bottom-color:var(--primary);
}

/* Hero — the loud voice (first entry) */
main.sc-MIxtir:not(.sc-zBQrew) > .sc-ibPRWj:nth-of-type(1){
  padding:46px 46px 42px;
  margin-bottom:0;
  border-color:rgba(43,61,82,.2);
  box-shadow:0 3px 16px rgba(27,38,52,.09);
}
main.sc-MIxtir:not(.sc-zBQrew) > .sc-ibPRWj:nth-of-type(1)::before{
  content:"DERNIER ESSAI";
  display:inline-block; margin-bottom:18px;
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:.64rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase;
  color:#F7F3EA; background:var(--primary);
  padding:5px 13px; border-radius:4px;
}
main.sc-MIxtir:not(.sc-zBQrew) > .sc-ibPRWj:nth-of-type(1) > .sc-gMnQvM{
  color:var(--primary); opacity:.7; margin-bottom:16px;
}
main.sc-MIxtir:not(.sc-zBQrew) > .sc-ibPRWj:nth-of-type(1) > .sc-gMnQvM::after{
  content:" · PAR CAMILLE DEVAUX";
}
main.sc-MIxtir:not(.sc-zBQrew) > .sc-ibPRWj:nth-of-type(1) > h2{
  font-style:italic; font-size:2.35rem; line-height:1.16; margin-bottom:16px;
}
main.sc-MIxtir:not(.sc-zBQrew) > .sc-ibPRWj:nth-of-type(1) > p:not(.sc-gMnQvM){
  font-size:1.16rem; line-height:1.6; color:#31383f; margin-bottom:22px;
}
main.sc-MIxtir:not(.sc-zBQrew) > .sc-ibPRWj:nth-of-type(1) > p:not(.sc-gMnQvM)::first-letter{
  float:left; line-height:.8;
  font-family:'Spectral',Palatino,serif; font-style:italic;
  font-size:3.6rem; padding:.06em .12em 0 0;
  color:var(--moment);                          /* moment colour #2 — drop cap */
}
main.sc-MIxtir:not(.sc-zBQrew) > .sc-ibPRWj:nth-of-type(1) > .sc-okUITF{
  padding:11px 24px;
  border:1px solid var(--primary); border-radius:24px;
  color:var(--primary); border-bottom:1px solid var(--primary);
}
main.sc-MIxtir:not(.sc-zBQrew) > .sc-ibPRWj:nth-of-type(1) > .sc-okUITF:hover{
  background:var(--primary); color:var(--paper);
}

/* Editor's picks — the paired feature (entries 2 & 3) */
main.sc-MIxtir:not(.sc-zBQrew) > .sc-ibPRWj:nth-of-type(2),
main.sc-MIxtir:not(.sc-zBQrew) > .sc-ibPRWj:nth-of-type(3){
  border-left:3px solid var(--accent);
}
main.sc-MIxtir:not(.sc-zBQrew) > .sc-ibPRWj:nth-of-type(2){ margin-top:96px; }
main.sc-MIxtir:not(.sc-zBQrew) > .sc-ibPRWj:nth-of-type(2)::before{
  content:"À LIRE EN PREMIER";
  position:absolute; left:0; right:0; bottom:calc(100% + 26px);
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:.82rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--primary);
  padding-bottom:10px; border-bottom:1px solid rgba(43,61,82,.28);
}

/* Strip 1 — photo band between picks and the journal (CI-DESSOUS) */
/* refix iter1 M6: raise band from thin 172px strip to full 210px hero band */
main.sc-MIxtir:not(.sc-zBQrew) > .sc-ibPRWj:nth-of-type(3){ margin-bottom:320px; }
main.sc-MIxtir:not(.sc-zBQrew) > .sc-ibPRWj:nth-of-type(3)::after{
  content:"CI-DESSOUS";
  position:absolute; left:-34px; right:-34px; top:calc(100% + 30px);
  height:210px;
  display:flex; align-items:center; justify-content:center;
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:.82rem; letter-spacing:.32em; text-transform:uppercase;
  color:#F7F3EA; text-shadow:0 1px 4px rgba(0,0,0,.5);
  border-radius:9px;
  background-image:linear-gradient(rgba(20,24,28,.55),rgba(20,24,28,.28)),
    url("/theme-assets/hero-masthead.jpg");
  background-size:cover; background-position:center 30%;
}

/* Journal — chronological entries (4 onward) */
main.sc-MIxtir:not(.sc-zBQrew) > .sc-ibPRWj:nth-of-type(4)::before{
  content:"LE JOURNAL — DANS L'ORDRE D'ÉCRITURE";
  position:absolute; left:0; right:0; bottom:calc(100% + 30px);
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:.82rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--primary);
  padding-bottom:10px; border-bottom:1px solid rgba(43,61,82,.28);
}

/* Compact archive tail — full-width magazine index + Strip 2 (TOUT LIRE) */
main.sc-MIxtir:not(.sc-zBQrew) > .sc-SiMqzw{
  position:relative;
  margin-top:230px;
  padding:34px 34px 20px;
  background:var(--paper);
  border:1px solid var(--hairline);
  border-top:1px solid var(--hairline);
  border-radius:9px;
  column-count:2; column-gap:44px;
}
main.sc-MIxtir:not(.sc-zBQrew) > .sc-SiMqzw::before{
  content:"TOUT LIRE";
  position:absolute; left:-34px; right:-34px; top:-206px;
  height:172px;
  display:flex; align-items:center; justify-content:center;
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:.82rem; letter-spacing:.32em; text-transform:uppercase;
  color:#F7F3EA; text-shadow:0 1px 4px rgba(0,0,0,.5);
  border-radius:9px;
  background-image:linear-gradient(rgba(28,20,26,.58),rgba(28,20,26,.3)),
    url("/theme-assets/hero-masthead.jpg");
  background-size:cover; background-position:center 70%;
}
main.sc-MIxtir:not(.sc-zBQrew) > .sc-SiMqzw > p{
  break-inside:avoid;
  margin:0; padding:9px 0;
  font-size:.92rem; line-height:1.4;
  border-bottom:1px dotted rgba(43,61,82,.18);
}
main.sc-MIxtir:not(.sc-zBQrew) > .sc-SiMqzw > p > a{
  color:var(--primary); text-decoration:none; border:none;
}
main.sc-MIxtir:not(.sc-zBQrew) > .sc-SiMqzw > p > a:hover{ color:var(--accent); }

/* ── Article page polish (preserve existing strengths, add editorial marks) ── */
main.sc-zBQrew > h1{
  font-family:'Spectral',Palatino,'Book Antiqua',serif;
  font-style:italic; font-weight:400;
  font-size:2.4rem; line-height:1.18; letter-spacing:-.01em;
  color:var(--primary); margin-bottom:10px;
}
main.sc-zBQrew article p{
  font-size:1.06rem; line-height:1.8;
}
main.sc-zBQrew article h2{
  font-family:'Spectral',Palatino,'Book Antiqua',serif;
  font-weight:500; font-size:1.5rem;
  margin-top:2.6em; padding-top:1.4em;
  border-top:1px solid var(--border); border-bottom:none;
  text-align:center;
}
main.sc-zBQrew article h2::before{
  content:"✳ ✳ ✳";
  display:block; margin-bottom:.7em;
  font-size:.7rem; letter-spacing:.5em;
  color:var(--accent);
}
main.sc-zBQrew article blockquote{
  position:relative; padding-left:2.4rem;
}
main.sc-zBQrew article blockquote::before{
  content:"\201C";
  position:absolute; left:.2rem; top:-.1rem;
  font-family:'Spectral',Palatino,serif; font-style:italic;
  font-size:3rem; line-height:1; color:var(--accent); opacity:.5;
}

/* Affiliate CTA — full element path so it strictly beats body-link colour */
main.sc-zBQrew article a[href^="/go/"],
main.sc-zBQrew article > p a[href^="/go/"],
main.sc-zBQrew article > ul a[href^="/go/"],
main.sc-zBQrew article > ol a[href^="/go/"]{
  display:inline-block;
  background:var(--primary); color:#F7F3EA;
  border:none; border-radius:24px;
  padding:11px 24px; margin:.3rem 0;
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:.86rem; font-weight:500; letter-spacing:.04em;
  text-decoration:none;
}
main.sc-zBQrew article a[href^="/go/"]:hover,
main.sc-zBQrew article > p a[href^="/go/"]:hover,
main.sc-zBQrew article > ul a[href^="/go/"]:hover,
main.sc-zBQrew article > ol a[href^="/go/"]:hover{
  background:var(--accent); color:#F7F3EA;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width:640px){
  body > header.sc-XokFok{ padding:66px 20px 56px; }
  body > header.sc-XokFok h1{ font-size:2.1rem; }
  main.sc-MIxtir:not(.sc-zBQrew) > .sc-ibPRWj{ padding:22px 24px; }
  main.sc-MIxtir:not(.sc-zBQrew) > .sc-ibPRWj:nth-of-type(1){ padding:30px 26px; }
  main.sc-MIxtir:not(.sc-zBQrew) > .sc-ibPRWj:nth-of-type(1) > h2{ font-size:1.85rem; }
  main.sc-MIxtir:not(.sc-zBQrew) > .sc-ibPRWj:nth-of-type(2){ margin-top:84px; }
  main.sc-MIxtir:not(.sc-zBQrew) > .sc-ibPRWj:nth-of-type(3){ margin-bottom:300px; }
  main.sc-MIxtir:not(.sc-zBQrew) > .sc-ibPRWj:nth-of-type(3)::after{ height:180px; left:-24px; right:-24px; top:calc(100% + 26px); }
  main.sc-MIxtir:not(.sc-zBQrew) > .sc-SiMqzw{ margin-top:196px; column-count:1; padding:26px 24px 14px; }
  main.sc-MIxtir:not(.sc-zBQrew) > .sc-SiMqzw::before{ height:132px; left:-24px; right:-24px; top:-158px; }
  main.sc-zBQrew > h1{ font-size:1.85rem; }
}


/* related-articles-nav-fix v1 */
:root main > nav p,
:root main > section p {
  line-height: 1.85;
  margin: 0;
}
:root main > nav a,
:root main > section a {
  display: inline-block;
  margin: 0 4px;
  padding: 0 2px;
}


/* mobile-overflow-fix v1 */
:root html, :root body { overflow-x: hidden; max-width: 100%; }
@media (max-width: 920px) {
  :root main > * { max-width: 100%; }
  :root main { overflow-x: hidden; }
}


/* mobile-overflow-fix v2 */
@media (max-width: 640px) {
  :root main,
  :root main > article,
  :root main > div,
  :root main > section,
  :root main > nav {
    box-sizing: border-box;
    max-width: 100%;
    width: 100%;
  }
  :root main > article > *,
  :root main > div > *,
  :root main > section > *,
  :root main > nav > * {
    max-width: 100%;
  }
  :root main h1,
  :root main h2,
  :root main h3,
  :root main h4 {
    overflow-wrap: break-word;
    word-break: normal;
  }
  /* Any 3+ col grid inside main → 1 col on mobile */
  :root main :is(ul, ol, section, div, nav)[style*="grid-template-columns"],
  :root main > section > ul,
  :root main > nav > ul,
  :root main > div > ul {
    grid-template-columns: 1fr !important;
  }
  /* Any CSS multi-column layout → 1 col on mobile */
  :root main :is(ul, ol, section, div, p) {
    columns: 1;
  }
  /* Article body images stay inside viewport */
  :root main img,
  :root main figure {
    max-width: 100%;
    height: auto;
  }
}


/* refix iter1: M7 archive tail as boxed card index */
:root:root:root body > main:not(:has(> h1)) > :is(div, section, nav):not(:has(> h2)):is(:has(> a), :has(> p > a), :has(> ul > li > a)) {
  position: relative;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 10px 16px;
  width: 100%;
  max-width: 100%;
  margin: 270px 0 0; /* refix iter1 M6: reserve room for taller TOUT LIRE band */
  padding: 0;
  columns: initial;
  column-count: initial;
  column-gap: normal;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

@media (min-width: 921px) {
  :root:root:root body > main:not(:has(> h1)) > :is(div, section, nav):not(:has(> h2)):is(:has(> a), :has(> p > a), :has(> ul > li > a)) {
    width: min(1080px, calc(100vw - 48px));
    max-width: 1080px;
    margin-left: 50%;
    transform: translateX(-50%);
  }
}

:root:root:root body > main:not(:has(> h1)) > :is(div, section, nav):not(:has(> h2)):is(:has(> a), :has(> p > a), :has(> ul > li > a))::before {
  content: "TOUT LIRE";
  position: absolute;
  left: 0;
  right: 0;
  top: -244px;               /* refix iter1 M6: 210px band with 34px gap above tail */
  height: 210px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: .82rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: #F7F3EA;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
  border-radius: 9px;
  background-image: linear-gradient(rgba(28,20,26,.58), rgba(28,20,26,.3)),
    url("/theme-assets/hero-masthead.jpg");
  background-size: cover;
  background-position: center 70%;
}

:root:root:root body > main:not(:has(> h1)) > :is(div, section, nav):not(:has(> h2)):is(:has(> a), :has(> p > a), :has(> ul > li > a)) > ul {
  display: contents;
  list-style: none;
  padding: 0;
  margin: 0;
  columns: initial;
}

:root:root:root body > main:not(:has(> h1)) > :is(div, section, nav):not(:has(> h2)):is(:has(> a), :has(> p > a), :has(> ul > li > a)) > a,
:root:root:root body > main:not(:has(> h1)) > :is(div, section, nav):not(:has(> h2)):is(:has(> a), :has(> p > a), :has(> ul > li > a)) > p,
:root:root:root body > main:not(:has(> h1)) > :is(div, section, nav):not(:has(> h2)):is(:has(> a), :has(> p > a), :has(> ul > li > a)) > ul > li {
  min-height: 100%;
  margin: 0;
  padding: 20px 22px;
  display: flex;
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 9px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
  break-inside: auto;
  line-height: 1.45;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

:root:root:root body > main:not(:has(> h1)) > :is(div, section, nav):not(:has(> h2)):is(:has(> a), :has(> p > a), :has(> ul > li > a)) > p {
  max-width: none;
  border-bottom: 1px solid var(--hairline);
}

:root:root:root body > main:not(:has(> h1)) > :is(div, section, nav):not(:has(> h2)):is(:has(> a), :has(> p > a), :has(> ul > li > a)) > ul > li {
  list-style: none;
}

:root:root:root body > main:not(:has(> h1)) > :is(div, section, nav):not(:has(> h2)):is(:has(> a), :has(> p > a), :has(> ul > li > a)) > ul > li::before {
  display: none;
}

:root:root:root body > main:not(:has(> h1)) > :is(div, section, nav):not(:has(> h2)):is(:has(> a), :has(> p > a), :has(> ul > li > a)) > a,
:root:root:root body > main:not(:has(> h1)) > :is(div, section, nav):not(:has(> h2)):is(:has(> a), :has(> p > a), :has(> ul > li > a)) > p > a,
:root:root:root body > main:not(:has(> h1)) > :is(div, section, nav):not(:has(> h2)):is(:has(> a), :has(> p > a), :has(> ul > li > a)) > ul > li > a {
  display: block;
  width: 100%;
  font-family: 'Spectral', Palatino, 'Book Antiqua', serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--primary);
  text-decoration: none;
  border: 0;
}

:root:root:root body > main:not(:has(> h1)) > :is(div, section, nav):not(:has(> h2)):is(:has(> a), :has(> p > a), :has(> ul > li > a)) > a:hover,
:root:root:root body > main:not(:has(> h1)) > :is(div, section, nav):not(:has(> h2)):is(:has(> a), :has(> p > a), :has(> ul > li > a)) > p:hover,
:root:root:root body > main:not(:has(> h1)) > :is(div, section, nav):not(:has(> h2)):is(:has(> a), :has(> p > a), :has(> ul > li > a)) > ul > li:hover {
  border-color: rgba(43,61,82,.24);
  box-shadow: 0 4px 12px rgba(27,38,52,.08);
  transform: translateY(-1px);
}

/* refix iter1: S6 article meta detail */
:root:root:root body > main:has(> h1) > h1 + span::after {
  content: " · Camille Devaux, Lyon";
}

@media (max-width: 640px) {
  :root:root:root body > main:not(:has(> h1)) > :is(div, section, nav):not(:has(> h2)):is(:has(> a), :has(> p > a), :has(> ul > li > a)) {
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    margin: 230px 0 0; /* refix iter1 M6: taller mobile TOUT LIRE band */
    padding: 0;
    transform: none;
  }

  :root:root:root body > main:not(:has(> h1)) > :is(div, section, nav):not(:has(> h2)):is(:has(> a), :has(> p > a), :has(> ul > li > a))::before {
    left: 0;
    right: 0;
    top: -206px;
    height: 180px;
  }

  :root:root:root body > main:not(:has(> h1)) > :is(div, section, nav):not(:has(> h2)):is(:has(> a), :has(> p > a), :has(> ul > li > a)) > a,
  :root:root:root body > main:not(:has(> h1)) > :is(div, section, nav):not(:has(> h2)):is(:has(> a), :has(> p > a), :has(> ul > li > a)) > p,
  :root:root:root body > main:not(:has(> h1)) > :is(div, section, nav):not(:has(> h2)):is(:has(> a), :has(> p > a), :has(> ul > li > a)) > ul > li {
    padding: 18px 20px;
  }
}


/* mobile-padding-fix v1 */
@media (max-width: 640px) {
  :root main {
    padding-left: 20px;
    padding-right: 20px;
  }
}


/* refix iter2: M4b featured label half-crosses the home card edge */
:root:root:root:root body > main:not(:has(> h1)) > div:first-of-type {
  position: relative;
  overflow: visible;
}

:root:root:root:root body > main:not(:has(> h1)) > div:first-of-type::before {
  position: absolute;
  top: 0;
  right: 40px;
  z-index: 2;
  margin: 0;
  transform: translateY(-50%);
}

@media (max-width: 640px) {
  :root:root:root:root body > main:not(:has(> h1)) {
    padding-top: 18px;
  }

  :root:root:root:root body > main:not(:has(> h1)) > div:first-of-type::before {
    right: 18px;
  }
}


/* refix iter2: M10 article-body affiliate links render as CTA pills */
:root:root:root body > main:has(> h1) > :is(article, section) a:is([href^="/check/"], [href^="/try/"], [href^="/ref/"], [href^="/go/"], [href^="/out/"]) {
  display: inline-block;
  max-width: 100%;
  margin: .25rem .12rem;
  padding: 10px 20px;
  border: 1px solid var(--primary);
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  color: var(--paper);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
}

:root:root:root body > main:has(> h1) > :is(article, section) a:is([href^="/check/"], [href^="/try/"], [href^="/ref/"], [href^="/go/"], [href^="/out/"]):hover {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--paper);
  text-decoration: none;
}


/* premium-upgrade v1 */
/* premium editorial upgrade — style=Cereal-Nordic overlay=25% grid=asymmetric scale=balanced family=flat-divs */


/* ── CARD 1: featured full-row with 300px photo header (via card-own background, NOT ::before —
    leaves ::before free for existing site's M2 label / meta content). ── */
:root main:not(:has(> h1)) > div:nth-of-type(1) {
  grid-column: 1 / -1;
  position: relative;      /* anchor for existing site's ::before label if it uses absolute */
  overflow: visible;       /* let above-card labels render without clipping */
  padding: 320px 44px 40px !important;
  border-radius: 8px;
  background:
    url("/theme-assets/premium-hero-card-1.webp") no-repeat center top / 100% 300px,
    var(--bg) !important;
  margin-top: 60px !important;  /* room for above-card M2 label (existing site convention) */
}

/* ── CARDS 2-4: medium with 180px photo header (background technique, ::before untouched) ── */
:root main:not(:has(> h1)) > div:nth-of-type(2) {
  padding: 200px 32px 32px !important;
  border-radius: 8px;
  background:
    url("/theme-assets/premium-hero-card-2.webp") no-repeat center top / 100% 180px,
    var(--bg) !important;
}
:root main:not(:has(> h1)) > div:nth-of-type(3) {
  padding: 200px 32px 32px !important;
  border-radius: 8px;
  background:
    url("/theme-assets/premium-hero-card-3.webp") no-repeat center top / 100% 180px,
    var(--bg) !important;
}
:root main:not(:has(> h1)) > div:nth-of-type(4) {
  padding: 200px 32px 32px !important;
  border-radius: 8px;
  background:
    url("/theme-assets/premium-hero-card-4.webp") no-repeat center top / 100% 180px,
    var(--bg) !important;
}

/* ── flat-divs family: cards 5 & 6 also get photo headers ── */
:root main:not(:has(> h1)) > div:nth-of-type(5) {
  padding: 200px 32px 32px !important;
  border-radius: 8px;
  background:
    url("/theme-assets/premium-hero-strip-1.webp") no-repeat center top / 100% 180px,
    var(--bg) !important;
}
:root main:not(:has(> h1)) > div:nth-of-type(6) {
  padding: 200px 32px 32px !important;
  border-radius: 8px;
  background:
    url("/theme-assets/premium-hero-strip-2.webp") no-repeat center top / 100% 180px,
    var(--bg) !important;
}

/* ── Article page: drop cap + dinkus dividers ── */
:root main:has(> h1) > article > p:first-of-type::first-letter {
  font-family: var(--fh), Georgia, serif;
  font-size: 76px; line-height: 0.9; color: var(--primary);
  float: left; margin: 6px 12px 0 0; padding: 0; font-weight: 400;
}
:root main:has(> h1) > article > h2 + p ~ h2::before {
  content: "✦ ✦ ✦";
  display: block; text-align: center; color: var(--accent);
  font-size: 12px; letter-spacing: 0.3em; margin-bottom: 24px;
  font-weight: 400;
}

/* ── Mobile responsive: adjust photo heights via background-size on the card itself ── */
@media (max-width: 720px) {
  :root main:not(:has(> h1)) > div:nth-of-type(1) {
    padding: 240px 22px 28px !important;
    background:
      url("/theme-assets/premium-hero-card-1.webp") no-repeat center top / 100% 220px,
      var(--bg) !important;
  }
  :root main:not(:has(> h1)) > div:nth-of-type(2) {
    padding: 180px 22px 26px !important;
    background:
      url("/theme-assets/premium-hero-card-2.webp") no-repeat center top / 100% 160px,
      var(--bg) !important;
  }
  :root main:not(:has(> h1)) > div:nth-of-type(3) {
    padding: 180px 22px 26px !important;
    background:
      url("/theme-assets/premium-hero-card-3.webp") no-repeat center top / 100% 160px,
      var(--bg) !important;
  }
  :root main:not(:has(> h1)) > div:nth-of-type(4) {
    padding: 180px 22px 26px !important;
    background:
      url("/theme-assets/premium-hero-card-4.webp") no-repeat center top / 100% 160px,
      var(--bg) !important;
  }
  :root main:not(:has(> h1))::before,
  :root main:not(:has(> h1))::after { min-height: 240px; }
  :root main:has(> h1) > article > p:first-of-type::first-letter { font-size: 60px; }
}


/* premium-upgrade v4 */
/* premium-upgrade v4 — surgical bundle. Applied 2026-08-30.
   Fixes: M10 CTA / M11 dinkus leak / M4 heights / M9 typography / M5 frames.
   Kills v2 "LATEST" label (proven counterproductive from v2 diagnosis). */

/* ── Kill v2 counterproductive homepage label ── */
:root main:not(:has(> h1))::before { content: none !important; }

/* ── M10: affiliate CTA visibility on article body ── */
:root main:has(> h1) a[href^="/try/"],
:root main:has(> h1) a[href^="/ref/"],
:root main:has(> h1) a[href^="/go/"],
:root main:has(> h1) a[href^="/out/"],
:root main:has(> h1) a[href^="/check/"],
:root main:has(> h1) a[href^="/view/"],
:root main:has(> h1) a[href*="hotmart.com"],
:root main:has(> h1) a[href*="digistore24"],
:root main:has(> h1) a[href*="clickbank"] {
  display: inline-block !important;
  background: var(--primary) !important;
  color: var(--bg) !important;
  padding: 6px 14px !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  letter-spacing: 0.02em !important;
}

/* ── M11: prevent dinkus leaking onto article page's first h2 ── */
:root main:has(> h1) > article > h2:first-of-type::before {
  content: none !important;
}

/* ── M4: force equal-height cards via grid stretch + card fill ── */
:root main:not(:has(> h1)) > div:has(> div) {
  align-items: stretch !important;
}
:root main:not(:has(> h1)) > div:has(> div) > div {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
:root main:not(:has(> h1)) > div > article {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
/* also for flat-divs family */
:root main:not(:has(> h1)) > div {
  height: 100% !important;
}

/* ── M9: cap small-title weight so Bebas/Anton counters don't fill in ── */
:root main:not(:has(> h1)) > div > div > h2,
:root main:not(:has(> h1)) > div > div > h2 a,
:root main:not(:has(> h1)) > section > ul > li > a,
:root main:not(:has(> h1)) > div > p > a {
  font-weight: 500 !important;
}

/* ── M5: universal soft frame fallback for card-like elements ── */
:root main:not(:has(> h1)) > div > div,
:root main:not(:has(> h1)) > div > article,
:root main:not(:has(> h1)) > article {
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.05) !important;
}


/* premium-upgrade v5 */
/* premium-upgrade v5 — big M2 band + wider M10 CTA net + M8 breathing. 2026-08-31. */

/* ── M2: PROMINENT full-row label, not the small word v2 tried ── */
:root main:not(:has(> h1))::before {
  content: "◆ LATEST FEATURES ◆" !important;
  display: block !important;
  font-family: var(--fh, "PT Sans"), Georgia, serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  padding: 16px 24px 20px !important;
  margin: 0 0 40px !important;
  border-top: 3px solid var(--primary, #333) !important;
  border-bottom: 1px solid var(--border, #ccc) !important;
  color: var(--primary, #333) !important;
  background: transparent !important;
}

/* ── M10: broaden CTA net (Amazon, aff/ path, [target=_blank] product-shaped) ── */
:root main:has(> h1) a[href^="/try/"],
:root main:has(> h1) a[href^="/ref/"],
:root main:has(> h1) a[href^="/go/"],
:root main:has(> h1) a[href^="/out/"],
:root main:has(> h1) a[href^="/check/"],
:root main:has(> h1) a[href^="/view/"],
:root main:has(> h1) a[href^="/aff/"],
:root main:has(> h1) a[href^="/product/"],
:root main:has(> h1) a[href*="hotmart.com"],
:root main:has(> h1) a[href*="digistore24"],
:root main:has(> h1) a[href*="clickbank"],
:root main:has(> h1) a[href*="amazon."],
:root main:has(> h1) a[href*="/track/"],
:root main:has(> h1) a[href*="/link/"],
:root main:has(> h1) a[href*="lstrk.net"],
:root main:has(> h1) a[href*="thrivecart"] {
  display: inline-block !important;
  background: var(--primary) !important;
  color: var(--bg) !important;
  padding: 8px 18px !important;
  border-radius: 5px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  letter-spacing: 0.02em !important;
  margin: 4px 2px !important;
}

/* ── M8: article body breathing ── */
:root main:has(> h1) > article > p {
  line-height: 1.8 !important;
  margin-bottom: 20px !important;
}
:root main:has(> h1) > article > h2 {
  margin-top: 48px !important;
  margin-bottom: 18px !important;
}
:root main:not(:has(> h1)) > div:has(> div) {
  gap: 40px 32px !important;
}


/* refix iter1 M10: affiliate CTA pill — robustness net.
   ROOT CAUSE of the flagged M10: the two reviewed article URLs
   (/reduire-stress-notifications-concentration-bureau,
    /comment-surmonter-perfectionnisme-travail-serenite) contain NO affiliate
   anchor in their live DOM — only internal + one Wikipedia link. A CTA pill
   cannot be rendered by CSS for a link that does not exist; this is a CONTENT
   gap, not a stylesheet defect. This site's affiliate links use the /check/
   prefix (present on OTHER articles, e.g. faire-moins-mieux). The rule below
   guarantees any /check/ link — relative OR absolute-URL form — renders as a
   high-contrast pill so articles that DO carry one pass M10. */
:root:root main:has(> h1) a[href^="/check/"],
:root:root main:has(> h1) a[href*="/check/"]{
  display: inline-block !important;
  max-width: 100% !important;
  margin: 6px 3px !important;
  padding: 9px 20px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: var(--primary) !important;   /* dark blue pill */
  color: var(--bg) !important;             /* off-white text — never equals its background */
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: .03em !important;
  text-decoration: none !important;
  overflow-wrap: anywhere;
}
:root:root main:has(> h1) a[href*="/check/"]:hover{
  background: var(--accent) !important;
  color: var(--bg) !important;
  text-decoration: none !important;
}


/* refix iter2: M2 — give the "À LIRE EN PREMIER" and "LE JOURNAL — DANS L'ORDRE
   D'ÉCRITURE" section labels the SAME full-row hairline BAND treatment as
   "◆ LATEST FEATURES ◆" (centered, tracked, border-top rule + border-bottom
   hairline, prominent size) instead of the small left-aligned captions the
   reviewer flagged. Same selectors as the originals above → identical
   specificity, later source order wins the cascade. Position/anchor from the
   originals (position:absolute; left:0; right:0; bottom:…) is preserved. */
main.sc-MIxtir:not(.sc-zBQrew) > .sc-ibPRWj:nth-of-type(2)::before,
main.sc-MIxtir:not(.sc-zBQrew) > .sc-ibPRWj:nth-of-type(4)::before {
  font-family: 'Spectral', Palatino, 'Book Antiqua', serif;
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-align: center;
  color: var(--primary);
  background: transparent;
  padding: 14px 24px 16px;
  border-top: 3px solid var(--primary);
  border-bottom: 1px solid var(--border);
}

/* Reserve vertical room above each band so the taller band never collides with
   the card above it (bands are absolutely positioned and don't reserve flow). */
main.sc-MIxtir:not(.sc-zBQrew) > .sc-ibPRWj:nth-of-type(2) { margin-top: 124px; }
main.sc-MIxtir:not(.sc-zBQrew) > .sc-ibPRWj:nth-of-type(3) { margin-bottom: 352px; }

@media (max-width: 640px) {
  main.sc-MIxtir:not(.sc-zBQrew) > .sc-ibPRWj:nth-of-type(2)::before,
  main.sc-MIxtir:not(.sc-zBQrew) > .sc-ibPRWj:nth-of-type(4)::before {
    font-size: .98rem;
    letter-spacing: .18em;
    padding: 12px 16px 14px;
  }
  main.sc-MIxtir:not(.sc-zBQrew) > .sc-ibPRWj:nth-of-type(2) { margin-top: 116px; }
  main.sc-MIxtir:not(.sc-zBQrew) > .sc-ibPRWj:nth-of-type(3) { margin-bottom: 330px; }
}


/* refix iter2 (2026-09-03): M10 — NO CSS CHANGE POSSIBLE (content gap, RE-VERIFIED
   against the LIVE site this iteration, not inferred).

   Evidence gathered this run (all four sources agree):
   1. qa_snapshot.py::pick_article_hrefs(n=2) picks filtered[0] and
      filtered[int(len/2)] of `main a[href]` (deduped, internal-only). On the live
      homepage (31 filtered links) that is exactly:
        article1 = /reduire-stress-notifications-concentration-bureau.html
        article2 = /comment-surmonter-perfectionnisme-travail-serenite.html
   2. ev-success-fr-after-shots.json records those SAME two URLs as the shots the
      codex reviewer actually saw.
   3. Live curl of both pages: raw "/check/" occurrences = 0; the only non-relative
      href is each page's own canonical og:url. Every in-body <a> is an internal
      related-article cross-link. No affiliate/product anchor exists in the DOM.
   4. The reviewer's own note ("prose, images, the small 'À savoir' note, related
      article links, footer") matches that DOM — the 'À savoir' block is the YMYL
      disclaimer, not a product offer.

   A CTA pill cannot be rendered by CSS for a link that does not exist, and
   restyling the internal related-links or the disclaimer as product buttons would
   be deceptive. The site's real affiliate scheme is /check/main and /check/alt-N;
   the /check/ pill rules above are correct and DO render high-contrast pills on
   every article that carries one (verified live: faire-moins-mieux,
   ma-routine-matinale, redefinir-reussite, comment-arreter-culpabilite,
   comment-fixer-objectifs, adopter-slow-productivity, +5 more).

   ROOT CAUSE is content, not CSS: these two articles were generated without an
   affiliate link. Fix belongs in the content pipeline — insert a /check/ link into
   /reduire-stress-notifications-concentration-bureau and
   /comment-surmonter-perfectionnisme-travail-serenite (or ensure the homepage
   ordering keeps a linked article at position 0 and position len/2). Re-running a
   CSS refix on M10 will keep failing until then. */