*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;line-height:1.7;color:#111;background:#fff}
.Banner_root__YiHwq{max-width:900px;margin:0 auto;padding:0 28px}
.Content_main__I7qi5{background:#111;color:#fff;padding:64px 0;margin-bottom:48px}
.Content_main__I7qi5 h1{font-size:42px;font-weight:800;letter-spacing:-1px;margin-bottom:8px}
.Content_main__I7qi5 p{font-size:18px;opacity:.7}
.Content_main__I7qi5 a{color:#fff;text-decoration:none;font-size:22px;font-weight:800}
.Banner_content__y4pYl{padding:0}
.Content_block__TRJDI{padding:32px 0;border-left:4px solid #111;padding-left:24px;margin-bottom:28px}
.Content_block__TRJDI h2{font-size:24px;font-weight:700;margin-bottom:6px}
.Content_block__TRJDI h2 a{color:#111;text-decoration:none}
.Content_block__TRJDI h2 a:hover{text-decoration:underline}
.Content_block__TRJDI .Sidebar_area__ZReFo{font-size:12px;font-weight:600;text-transform:uppercase;color:#888;letter-spacing:1px;margin-bottom:8px}
.Content_block__TRJDI p{font-size:15px;color:#444;margin-bottom:10px}
.Section_area__njBei{display:inline-block;background:#111;color:#fff;padding:8px 20px;font-size:13px;font-weight:700;text-decoration:none;text-transform:uppercase;letter-spacing:1px}
.Section_area__njBei:hover{background:#333}
.Footer_inner__3MUGW{padding-bottom:60px}
.Footer_inner__3MUGW h1{font-size:38px;font-weight:800;letter-spacing:-1px;margin-bottom:10px}
.Footer_inner__3MUGW time{font-size:12px;font-weight:600;text-transform:uppercase;color:#888;letter-spacing:1px;display:block;margin-bottom:28px}
.Footer_inner__3MUGW h2{font-size:26px;font-weight:700;margin:40px 0 14px}
.Footer_inner__3MUGW h3{font-size:20px;font-weight:700;margin:32px 0 10px}
.Footer_inner__3MUGW p{margin-bottom:18px;font-size:17px}
.Footer_inner__3MUGW ul,.Footer_inner__3MUGW ol{margin:0 0 18px 24px}
.Footer_inner__3MUGW a{color:#111;font-weight:600;text-decoration:underline}
.Footer_inner__3MUGW img{max-width:100%;height:auto;margin:20px 0}
.Page_link__xFTmy{background:#111;color:#888;padding:28px 0;margin-top:48px;text-align:center;font-size:12px}
.Page_link__xFTmy a{color:#888;text-decoration:none}
.Sidebar_area__p1h4q{background:#222;color:#aaa;padding:14px 20px;margin-bottom:24px;font-size:13px;font-style:italic}
.Article_inner__0rofK{background:#1a1a1a;color:#888;padding:14px 20px;margin-top:32px;font-size:12px;border-top:3px solid #444}
.Card_content__n3hAI{font-size:12px;font-weight:600;text-transform:uppercase;color:#666;letter-spacing:1px;margin:-20px 0 28px;padding-left:12px;border-left:2px solid #ccc}
.Footer_head__kquWZ{margin:0 0 24px}
.Wrapper_wrap__RE6Bp{width:100%;height:auto;border-radius:0}
.Wrapper_row__ReXTC{border-left:4px solid #111;padding-left:24px;margin-top:48px}
.Wrapper_row__ReXTC h3{font-size:18px;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px}
.Wrapper_row__ReXTC ul{list-style:none;padding:0}
.Wrapper_row__ReXTC li{padding:6px 0}
.Wrapper_row__ReXTC a{color:#111;text-decoration:underline;font-weight:600}
.Container_inner__NB8eT{border-left:4px solid #ddd;padding-left:24px;margin-top:36px}
.Container_inner__NB8eT ul{list-style:none;padding:0}
.Container_inner__NB8eT li{padding:6px 0;font-size:16px}
.Container_inner__NB8eT a{color:#111;text-decoration:none;font-weight:600}
.Container_inner__NB8eT a:hover{text-decoration:underline}
.Container_inner__NB8eT .Sidebar_area__ZReFo{margin:0 0 0 8px}
/* === Theme === */
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&family=Cormorant+Garamond:wght@400;700&display=swap');
body{font-family:'Lora',sans-serif;color:#2C2C2C;background:#FAF9F6}
.Content_main__I7qi5{background:#2D3E33;color:#fff}
.Content_main__I7qi5 h1{font-family:'Cormorant Garamond',serif;color:#fff}
.Content_main__I7qi5 p{color:rgba(255,255,255,.75)}
.Content_main__I7qi5 a{color:#fff;text-decoration:none}
.card h2{font-family:'Cormorant Garamond',serif}
.card h2 a{color:#2D3E33}
.card h2 a:hover{color:#D97757}
.read-more{color:#D97757}
.article-content h1{font-family:'Cormorant Garamond',serif}
.article-content h2{font-family:'Cormorant Garamond',serif}
.article-content a{color:#D97757}
.article-content img{border-radius:8px}
.affiliate-disclosure{border-radius:8px}
.ymyl-disclaimer{border-radius:8px}
/* === Custom === */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Source+Serif+4:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/* ── Design tokens ─────────────────────────────────────────── */
:root {
  --color-primary:       #2D3E33;
  --color-primary-dark:  #1B2921;
  --color-accent:        #D97757;
  --color-accent-dark:   #BF5F3E;
  --color-bg:            #FDFBF7;
  --color-surface:       #F5EDE1;
  --color-text:          #2A2A2A;
  --color-muted:         #6E6558;
  --color-border:        #E6DCC8;
  --color-link:          #BF5F3E;
  --color-link-hover:    #D97757;
  --color-header-bg:     #2D3E33;
  --color-header-text:   #FDFBF7;
  --color-footer-bg:     #1B2921;
  --color-footer-text:   #D9CFBE;
  --font-heading:        'Cormorant Garamond', Georgia, serif;
  --font-body:            'Source Serif 4', Georgia, serif;
  --font-size-base:      17px;
  --font-size-sm:        15px;
  --font-size-lg:        19px;
  --line-height-body:    1.75;
  --line-height-heading: 1.3;
  --border-radius:       12px;
  --sp:                  8px;
  --max-w:               680px;
  --max-w-wide:          960px;
}

/* ── Reset / base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

:root body {
  margin: 0; padding: 0;
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

:root img { max-width: 100%; height: auto; border-radius: var(--border-radius); }
:root ::selection { background-color: rgba(217, 119, 87, 0.20); color: var(--color-text); }

/* ── Typography ───────────────────────────────────────────── */
:root h1, :root h2, :root h3, :root h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: var(--line-height-heading);
  color: var(--color-primary);
  margin: 1.6em 0 0.5em;
}

:root h1 { font-size: clamp(2rem, 4.4vw, 2.7rem); font-weight: 700; margin-top: 0; }
:root h2 { font-size: clamp(1.45rem, 3vw, 1.9rem); margin-top: 1.9em; }
:root h3 { font-size: clamp(1.15rem, 2.4vw, 1.4rem); font-style: italic; }
:root h4 { font-size: 1.05rem; font-weight: 600; }

:root p { max-width: var(--max-w); margin: 0 0 1.35em; }

:root a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(191, 95, 62, 0.45);
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
:root a:hover { color: var(--color-link-hover); text-decoration-color: var(--color-link-hover); }

:root strong { color: var(--color-primary); font-weight: 600; }
:root em { font-style: italic; color: var(--color-primary-dark); }

/* ── Lists ────────────────────────────────────────────────── */
:root ul, :root ol { padding-left: 1.6em; margin: 0 0 1.35em; max-width: var(--max-w); }
:root li { margin-bottom: 0.5em; line-height: var(--line-height-body); }
:root li::marker { color: var(--color-accent-dark); }
:root li:last-child { margin-bottom: 0; }

/* ── Blockquote — a page torn from the carnet ────────────────── */
:root blockquote {
  border-left: 3px solid var(--color-accent);
  padding: 1.1em 1.6em;
  margin: 2em 0;
  background-color: var(--color-surface);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  max-width: var(--max-w);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.15em;
  color: var(--color-primary-dark);
}
:root blockquote p { margin-bottom: 0; max-width: none; }

/* Scene break: three soft points, echoing "scène par scène" pacing */
:root hr {
  border: none;
  text-align: center;
  margin: 2.75em auto;
  max-width: var(--max-w);
  height: 1em;
}
:root hr::before {
  content: '· · ·';
  display: inline-block;
  color: var(--color-accent-dark);
  letter-spacing: 0.5em;
  font-size: 1.1rem;
}

/* ── Header ───────────────────────────────────────────────── */
:root header {
  background-color: var(--color-header-bg);
  color: var(--color-header-text);
  padding: 2.75rem 1.5rem 2.25rem;
  text-align: center;
}
:root header h1 { font-family: var(--font-heading); font-size: clamp(1.7rem, 4vw, 2.4rem); color: var(--color-header-text); margin: 0 0 0.5rem; }
:root header h1 a { color: var(--color-header-text); text-decoration: none; }
:root header p { color: rgba(253, 251, 247, 0.78); font-size: var(--font-size-sm); font-style: italic; max-width: 560px; margin: 0 auto; }
:root header a { color: var(--color-header-text); }
:root header a:hover { color: var(--color-accent); }

/* ── Navigation ───────────────────────────────────────────── */
:root nav {
  background-color: rgba(27, 41, 33, 0.94);
  padding: 0.65rem 1.5rem;
  display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: center;
}
:root nav a { color: rgba(253, 251, 247, 0.85); text-decoration: none; font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: 500; letter-spacing: 0.02em; }
:root nav a:hover { color: #FFFFFF; }

/* ── Layout containers ────────────────────────────────────── */
:root .container { max-width: var(--max-w-wide); margin: 0 auto; padding: 0 1.5rem; }
:root main { max-width: var(--max-w-wide); margin: 0 auto; padding: 2.5rem 0; }

/* ── Bold template hero (homepage) ───────────────────────────*/
:root .Content_main__I7qi5 { background-color: var(--color-primary); color: #FFFFFF; padding: 3rem 1.5rem 2.75rem; text-align: center; }
:root .Content_main__I7qi5 h1 { font-family: var(--font-heading); font-size: clamp(2rem, 4.4vw, 2.6rem); color: #FFFFFF; margin: 0 0 0.5rem; }
:root .Content_main__I7qi5 p { font-size: 1.05rem; color: rgba(255, 255, 255, 0.82); max-width: 560px; margin: 0 auto; font-style: italic; }
:root .Content_main__I7qi5 a { color: #FFFFFF; text-decoration: none; }

/* ── Article content ──────────────────────────────────────── */
:root .article-content, :root article { max-width: var(--max-w); margin: 0 auto; }
:root .article-content h1, :root .article-content h2, :root .article-content h3,
:root article h1, :root article h2, :root article h3 { color: var(--color-primary); }
:root .article-content h2, :root article h2 { padding-bottom: 0.3em; border-bottom: 1px solid var(--color-border); }
:root .article-content a, :root article a { color: var(--color-link); font-weight: 500; }
:root .article-content a:hover, :root article a:hover { color: var(--color-link-hover); }
:root .article-content img, :root article img { border-radius: var(--border-radius); display: block; margin: 1.8em auto; }

.Footer_head__kquWZ, .inline-wrap { display: block; margin: 1.8em auto; text-align: center; }
.Wrapper_wrap__RE6Bp, .inline-img { border-radius: var(--border-radius); }

/* ── Card grid (listing pages) ───────────────────────────────*/
:root .card {
  background-color: #faf5ec;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 1.6rem;
  box-shadow: 0 2px 10px rgba(45, 62, 51, 0.06);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
:root .card:hover { border-color: var(--color-accent); box-shadow: 0 4px 16px rgba(45, 62, 51, 0.10); }
:root .card h2 { font-family: var(--font-heading); font-size: 1.35rem; margin: 0 0 0.5rem; }
:root .card h2 a { color: var(--color-primary); text-decoration: none; }
:root .card h2 a:hover { color: var(--color-accent-dark); }
:root .card p { color: var(--color-muted); font-size: var(--font-size-sm); margin-bottom: 0.75rem; max-width: none; }

:root .read-more {
  color: var(--color-accent-dark);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--color-accent-dark);
  padding-bottom: 1px;
  background: none;
}
:root .read-more:hover { color: var(--color-accent); border-color: var(--color-accent); }

/* ── Post meta ────────────────────────────────────────────── */
:root .post-meta { font-size: var(--font-size-sm); color: var(--color-muted); font-style: italic; margin-bottom: 2rem; }

/* ── Footer ───────────────────────────────────────────────── */
:root footer { background-color: var(--color-footer-bg); color: var(--color-footer-text); padding: 2.5rem 1.5rem; text-align: center; font-size: var(--font-size-sm); margin-top: 3.5rem; }
:root footer a { color: var(--color-accent); text-decoration: underline; }
:root footer a:hover { color: #FFFFFF; }
:root footer p { max-width: none; margin-bottom: 0.5rem; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 600px) {
  :root body { font-size: 16px; }
  :root main { padding: 1.5rem 0; }
  :root header { padding: 2rem 1.25rem 1.75rem; }
  :root .Content_main__I7qi5 { padding: 2rem 1rem 1.75rem; }
  :root .article-content, :root article { padding: 0 0.25rem; }
  :root blockquote { padding: 0.9em 1.2em; }
}

/* === R2 fixes (2026-07-09T08:40:17.863801+00:00) === */
/* Real production classes verified against snapshots/loop1 markup — the
   guessed .affiliate-disclosure / .ymyl-disclaimer selectors from the
   evaluation don't exist in the rendered HTML; these hashed CSS-module
   classes (.Sidebar_area__p1h4q, .Article_inner__0rofK, .Section_area__njBei)
   are the elements actually receiving the default dark styling. */

/* Fix 1 — affiliate disclosure block, just after the hero image, before the story */
:root .Sidebar_area__p1h4q {
  background-color: var(--color-surface);
  border-left: 4px solid var(--color-accent);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  padding: 0.85em 1.2em;
  margin: 1.6em auto;
  max-width: var(--max-w);
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}
:root .Sidebar_area__p1h4q em { color: inherit; font-style: italic; }

/* Fix 2 — "Veuillez noter" YMYL block at the end of each article */
:root .Article_inner__0rofK {
  background-color: rgba(45, 62, 51, 0.06);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  padding: 0.85em 1.2em;
  margin: 2em auto;
  max-width: var(--max-w);
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}

/* Fix 3 — "Read Now" card button on the homepage, restyled as a quiet text link */
:root .Section_area__njBei {
  display: inline-block;
  background: none;
  color: var(--color-accent-dark);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
  border: none;
  border-bottom: 1px solid var(--color-accent-dark);
  border-radius: 0;
  padding: 0 0 1px;
}
:root .Section_area__njBei:hover { color: var(--color-accent); border-color: var(--color-accent); }

/* Fix 4 — mark outbound affiliate links (/out/…) so they're distinguishable from internal links */
:root article a[href^="/out/"],
:root .article-content a[href^="/out/"] {
  font-weight: 600;
}
:root article a[href^="/out/"]::after,
:root .article-content a[href^="/out/"]::after {
  content: " ↗";
  font-weight: 400;
  color: var(--color-accent-dark);
}

/* === R3 fixes (2026-07-09T09:30:18.672077+00:00) === */
/* Verified against snapshots/loop2/homepage.html — .Sidebar_area__ZReFo is the
   <p> holding the publish date on each homepage article card (distinct hashed
   class from the R2 .Sidebar_area__p1h4q affiliate-disclosure block). */

/* Fix 1 — homepage card date, too pale/small against the ivory background */
:root .Sidebar_area__ZReFo {
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* ═══════════════════════════════════════════════════════════════
   v.10b552 — layout revision
   Editorial signature pass for se-sensib-fr (Saison Sensible).
   DOM is the flat Next-build variant: homepage <main> holds 9
   sibling card <div>s directly (no wrapper, no SB-20 tail); article
   <main> holds <hgroup> + <article> + related-<div>. Homepage rules
   are scoped with main:not(:has(> article)); article rules with
   main:has(> article). Moment colour #6B4A2E used in exactly two
   places (hero drop cap + hero top-rule / picks accent border).
   ═══════════════════════════════════════════════════════════════ */
:root {
  --moment:     #6B4A2E;
  --font-meta:  "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --paper:      #faf5ec;
  --paper-warm: #f8f2e6;
}

/* ── Masthead — banner photo + gradient + italic serif wordmark ── */
:root body > div:first-child {
  background: linear-gradient(rgba(27,41,33,.74), rgba(27,41,33,.83)),
              url("/theme-assets/banner.jpg");
  background-size: cover;
  background-position: center;
  padding: 0;
}
:root body > div:first-child > div {
  max-width: 1040px;
  margin: 0 auto;
  padding: 4.5rem 1.5rem 3.4rem;
  text-align: center;
  background: transparent;
}
:root body > div:first-child h1 {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2.3rem, 5.2vw, 3.3rem);
  line-height: 1.05;
  color: #FDFBF7;
  margin: 0 0 .5rem;
}
:root body > div:first-child h1 a { color: #FDFBF7; text-decoration: none; }
:root body > div:first-child > div > a {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.6rem, 3.6vw, 2.2rem);
  color: #FDFBF7;
  text-decoration: none;
}
:root body > div:first-child p {
  color: rgba(253,251,247,.82);
  font-style: italic;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 600px;
  margin: .55rem auto 0;
}
/* Signature ribbon — the one line that says "this is Saison Sensible" */
:root body > div:first-child > div::after {
  content: "SCÈNE PAR SCÈNE · SANS MÉTHODE MIRACLE";
  display: block;
  margin: 1.5rem auto 0;
  max-width: 560px;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(253,251,247,.22);
  font-family: var(--font-meta);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(217,119,87,.95);
}

/* ── HOMEPAGE GRID ─────────────────────────────────────────────
   9 sibling cards: (1) hero  (2-3) editor's picks pair
   (4) CI-DESSOUS photo strip + entry  (5-6) journal 2-col
   (7) TOUT LIRE photo strip + entry  (8-9) compact archive tail.
   Section labels are full-width bands via the grid container's
   ::before / ::after (see qa-refix block at foot). ─────────────*/
:root main:not(:has(> article)) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 40px;
  align-items: stretch;
  max-width: 1040px;
  margin: 0 auto;
  padding: 4.5rem 1.5rem 3.5rem;
}

/* Card base (applies to every direct child; overridden for special ones) */
:root main:not(:has(> article)) > div {
  background: var(--paper);
  border: 1px solid rgba(45,62,51,.12);
  border-radius: 8px;
  padding: 28px 34px;
  box-shadow: 0 1px 4px rgba(45,62,51,.05);
  display: flex;
  flex-direction: column;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
:root main:not(:has(> article)) > div:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(45,62,51,.10);
  border-color: rgba(217,119,87,.45);
}
/* card date / kicker */
:root main:not(:has(> article)) > div > p:first-child {
  font-family: var(--font-meta);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  line-height: 1.4;
  margin: 0 0 10px;
  max-width: none;
}
/* card title */
:root main:not(:has(> article)) > div > h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.22;
  margin: 0 0 10px;
}
:root main:not(:has(> article)) > div > h2 a { color: var(--color-primary); text-decoration: none; }
:root main:not(:has(> article)) > div > h2 a:hover { color: var(--color-accent-dark); }
/* card excerpt — clamped to 3 lines to keep row heights even */
:root main:not(:has(> article)) > div > p:not(:first-child) {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--color-text);
  opacity: .85;
  margin: 0 0 18px;
  max-width: 64ch;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* card CTA — relabelled from English "Read Now" to French, pinned to base */
:root main:not(:has(> article)) > div > a:last-child {
  margin-top: auto;
  align-self: flex-start;
  font-size: 0;
  line-height: 0;
  text-decoration: none;
  background: none;
  border: 0;
}
:root main:not(:has(> article)) > div > a:last-child::after {
  content: "Lire le récit →";
  font-family: var(--font-meta);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 2px;
}
:root main:not(:has(> article)) > div > a:last-child:hover::after {
  color: var(--color-accent);
  border-bottom-color: var(--color-primary);
}

/* ── HERO (card 1) — the loud voice ─────────────────────────────*/
:root main:not(:has(> article)) > div:first-child {
  grid-column: 1 / -1;
  display: block;
  background: var(--paper-warm);
  border: 1px solid rgba(45,62,51,.14);
  border-top: 4px solid var(--moment);
  border-radius: 10px;
  padding: 44px 48px;
  box-shadow: 0 2px 12px rgba(45,62,51,.07);
}
/* "DERNIER RÉCIT" label moved out of the hero frame → full-width band
   (see M2 section-label bands at the foot of this file). */
:root main:not(:has(> article)) > div:first-child > p:first-child {
  font-size: 11.5px;
  letter-spacing: .16em;
  margin-bottom: 14px;
}
:root main:not(:has(> article)) > div:first-child > p:first-child::after {
  content: " · PAR MANON · 6 MIN DE LECTURE";
  color: var(--color-muted);
}
:root main:not(:has(> article)) > div:first-child > h2 {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2rem, 4.6vw, 2.85rem);
  line-height: 1.08;
  margin-bottom: 18px;
}
:root main:not(:has(> article)) > div:first-child > h2 a { color: var(--color-primary-dark); }
:root main:not(:has(> article)) > div:first-child > p:not(:first-child) {
  display: block;
  -webkit-line-clamp: none;
  overflow: visible;
  font-size: 20px;
  line-height: 1.55;
  opacity: .92;
  max-width: 66ch;
  margin-bottom: 24px;
}
:root main:not(:has(> article)) > div:first-child > p:not(:first-child)::first-letter {
  float: left;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 64px;
  line-height: .8;
  padding: 8px 12px 0 0;
  color: var(--moment);
}
:root main:not(:has(> article)) > div:first-child > a:last-child::after {
  content: "Lire ce récit →";
  background: var(--color-primary);
  color: var(--color-bg);
  border: 0;
  border-radius: 6px;
  padding: 12px 26px;
  font-size: 12.5px;
}
:root main:not(:has(> article)) > div:first-child > a:last-child:hover::after {
  background: var(--color-accent);
  color: var(--color-bg);
}

/* ── EDITOR'S PICKS pair (cards 2-3) — the change of gear ────────*/
:root main:not(:has(> article)) > div:nth-child(2),
:root main:not(:has(> article)) > div:nth-child(3) {
  border-top: 3px solid var(--color-accent);
}
/* "À LIRE ENSUITE" label moved out of the pick-card kicker → full-width band
   (see M2 section-label bands at the foot of this file). */

/* ── STRIP 1 (card 4) : CI-DESSOUS photo band + journal entry ────
   NOTE (iter=2, M6): strip 2 ("TOUT LIRE") was on card 7 — a mid-grid
   position now that the live DOM carries 13 journal cards. It has been
   relocated to the TOP of the archive-tail wrapper (div:last-child) so
   the required second photo strip sits between the journal grid and the
   compact archive tail. Card 7 now falls back to a normal journal card. */
:root main:not(:has(> article)) > div:nth-child(4) {
  grid-column: 1 / -1;
  padding: 0;
  overflow: hidden;
}
:root main:not(:has(> article)) > div:nth-child(4):hover { transform: none; }
:root main:not(:has(> article)) > div:nth-child(4)::before {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 205px;
  margin-bottom: 28px;
  background: linear-gradient(rgba(20,24,28,.55), rgba(20,24,28,.25)),
              url("/theme-assets/feature-photo.jpg");
  background-size: cover;
  color: #f5efe1;
  font-family: var(--font-meta);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0,0,0,.55);
}
:root main:not(:has(> article)) > div:nth-child(4)::before {
  content: "CI-DESSOUS";
  background-position: center 30%;
}
/* pad the real content that sits below the strip band */
:root main:not(:has(> article)) > div:nth-child(4) > p,
:root main:not(:has(> article)) > div:nth-child(4) > h2 {
  padding-left: 36px;
  padding-right: 36px;
}
:root main:not(:has(> article)) > div:nth-child(4) > p:not(:first-child) {
  -webkit-line-clamp: none;
  overflow: visible;
  max-width: 72ch;
}
:root main:not(:has(> article)) > div:nth-child(4) > a:last-child {
  margin: 0 36px 30px;
}

/* ── ARTICLE PAGE — diary voice flourishes ──────────────────────*/
:root main:has(> article) > hgroup {
  max-width: var(--max-w);
  margin: 0 auto 2.4rem;
}
:root main:has(> article) > hgroup h1 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2.1rem, 5vw, 3rem);
  line-height: 1.08;
  margin: 0 0 .6rem;
}
:root main:has(> article) > hgroup time {
  font-family: var(--font-meta);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-muted);
}
/* Lede + drop cap on the opening paragraph */
:root main:has(> article) > article > p:first-of-type {
  font-size: 1.12em;
  line-height: 1.72;
  color: var(--color-primary-dark);
}
:root main:has(> article) > article > p:first-of-type::first-letter {
  float: left;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 58px;
  line-height: .78;
  padding: 6px 10px 0 0;
  color: var(--color-accent-dark);
}
/* Scene-break dinkus above each section heading */
:root main:has(> article) > article > h2 {
  border-bottom: 0;
  padding-bottom: 0;
  text-align: center;
}
:root main:has(> article) > article > h2::before {
  content: "\276E \2740 \276F";
  display: block;
  text-align: center;
  color: var(--color-accent);
  font-size: 15px;
  letter-spacing: .35em;
  font-weight: 400;
  opacity: .75;
  margin: .3em 0 .55em;
}
/* Hanging quote on blockquotes */
:root main:has(> article) > article blockquote { position: relative; }
:root main:has(> article) > article blockquote::before {
  content: "\201C";
  position: absolute;
  left: 8px;
  top: 0;
  font-family: var(--font-heading);
  font-size: 52px;
  line-height: 1;
  color: rgba(217,119,87,.4);
}
/* Related-articles block at the foot of each article */
:root main:has(> article) > div:last-child {
  max-width: var(--max-w);
  margin: 3rem auto 0;
  padding-top: 1.6rem;
  border-top: 1px solid var(--color-border);
}
:root main:has(> article) > div:last-child h3 {
  font-family: var(--font-meta);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-style: normal;
  margin: 0 0 .8rem;
}
:root main:has(> article) > div:last-child ul { list-style: none; padding: 0; max-width: none; }
:root main:has(> article) > div:last-child li { margin-bottom: .55em; }
:root main:has(> article) > div:last-child a { color: var(--color-link); font-weight: 500; }

/* ── Responsive ─────────────────────────────────────────────────*/
@media (max-width: 700px) {
  :root main:not(:has(> article)) {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 2.75rem 1.25rem 2.5rem;
  }
  :root main:not(:has(> article)) > div:first-child { padding: 30px 26px; }
  :root main:not(:has(> article)) > div:first-child > h2 { font-size: 1.85rem; }
  :root main:not(:has(> article)) > div:first-child > p:not(:first-child) { font-size: 18px; }
  :root main:not(:has(> article)) > div:nth-child(4)::before,
  :root main:not(:has(> article)) > div:last-child::before { height: 150px; }
  :root body > div:first-child > div { padding: 3.25rem 1.25rem 2.6rem; }
}


/* 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;
  }
}


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


/* ═══════════════════════════════════════════════════════════════
   qa-refix iter=1 — codex review M2 + M7 (se-sensib-fr)
   Flat homepage DOM (9 sibling <div> cards, no wrapper), so the two
   section labels are emitted as full-width GRID ITEMS via the grid
   container's ::before / ::after pseudos — the only way to get a band
   that spans the whole row above cards without adding DOM.
   ═══════════════════════════════════════════════════════════════ */

/* ── M2 — section-label bands span the full row, ABOVE the cards ──
   ::before auto-places into grid row 1 (pushing the hero to row 2);
   ::after is pinned to grid row 3 so it lands in the gap between the
   hero (row 2) and the Editor's-Picks pair (which then flows to row 4).
   Each band is uppercase-tracked with a hairline underline. */
:root main:not(:has(> article))::before,
:root main:not(:has(> article))::after {
  grid-column: 1 / -1;
  margin-bottom: -18px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-meta);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  line-height: 1.2;
}
:root main:not(:has(> article))::before {
  content: "DERNIER RÉCIT";
  color: var(--moment);
}
:root main:not(:has(> article))::after {
  content: "À LIRE ENSUITE";
  grid-row: 3;
  color: var(--color-accent-dark);
}

/* ── M7 — compact archive tail (cards 8-9): a full-width, multi-column
   grid of boxed cream cells sitting below the TOUT LIRE strip (card 7).
   They inherit the base card box (paper bg, border, radius, shadow,
   hover lift) so the foot of the page carries the same design system as
   the top; here they are tightened to a title-only index cell. */
:root main:not(:has(> article)) > div:nth-child(8),
:root main:not(:has(> article)) > div:nth-child(9) {
  padding: 20px 24px;
  justify-content: flex-start;
}
:root main:not(:has(> article)) > div:nth-child(8) > p:first-child,
:root main:not(:has(> article)) > div:nth-child(9) > p:first-child {
  margin-bottom: 8px;
}
:root main:not(:has(> article)) > div:nth-child(8) > h2,
:root main:not(:has(> article)) > div:nth-child(9) > h2 {
  font-size: 1.12rem;
  line-height: 1.24;
  margin: 0;
}
/* title-only rows: drop the excerpt + CTA on the tail cells */
:root main:not(:has(> article)) > div:nth-child(8) > p:not(:first-child),
:root main:not(:has(> article)) > div:nth-child(9) > p:not(:first-child),
:root main:not(:has(> article)) > div:nth-child(8) > a:last-child,
:root main:not(:has(> article)) > div:nth-child(9) > a:last-child {
  display: none;
}


/* premium-upgrade v1 */
/* premium editorial upgrade — style=Racquet-moody overlay=55% grid=equal 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 — re-scoped homepage-only via
   :not(:has(> article)) (this site's article <main> has no direct > h1,
   it lives in <hgroup>, so the old :not(:has(> h1)) leaked the band onto
   article pages). French text + real palette tokens restored. On article
   pages the pre-existing v4 `content: none !important` now wins alone. ── */
:root main:not(:has(> article))::before {
  content: "DERNIER RÉCIT" !important;
  display: block !important;
  font-family: var(--font-meta) !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(--color-primary) !important;
  border-bottom: 1px solid var(--color-border) !important;
  color: var(--color-primary) !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;
}


/* ═══════════════════════════════════════════════════════════════
   qa-refix iter=1 — 2026-09-02 · codex M2 / M7 / M10 (+ S6)
   Live DOM (curled): homepage <main> = 13 sibling <div.Content_block>
   cards + a trailing <div.Container_inner> whose <ul> is the archive
   tail (main's LAST child). Article <main> = <hgroup><h1>+<time></hgroup>
   + <article> + <div.Wrapper_row> (related). Homepage scope =
   :not(:has(> article)); article scope = :has(> article). Affiliate
   CTAs are inline <a href="/out/…"> ("Formation Eclosion"). All real
   design tokens (--color-*, --paper, --font-*) — the premium blocks
   above used undefined --bg/--primary/--fh so they were inert.
   ═══════════════════════════════════════════════════════════════ */

/* ── M2 — make "À LIRE ENSUITE" (::after) a full-row band matching the
   "DERNIER RÉCIT" (::before) band above the hero: full width via the
   grid-column:1/-1 already set upstream, uppercase-tracked, top rule +
   hairline underline, centred. grid-row:3 (set upstream) keeps it sitting
   directly above the editor's-picks pair. ── */
:root main:not(:has(> article))::after {
  display: block;
  font-family: var(--font-meta);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
  padding: 16px 24px 20px;
  margin: 0;
  border-top: 3px solid var(--color-primary);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-primary);
  background: transparent;
}
/* neutralise the premium mobile rule that floored both label bands at
   240px tall (min-height:240px @≤720px) — labels are text-height */
:root main:not(:has(> article))::before,
:root main:not(:has(> article))::after { min-height: 0; }

/* ── M7 — the real archive tail is main's LAST <div> (Container_inner),
   holding a <ul> of title+date rows. Was a single narrow left-column
   list panel with empty space to the right. Make the wrapper span the
   full grid row, strip its own frame, and turn the <ul> into a 3-col
   magazine index of boxed cream cells — same paper/border/radius/shadow/
   hover system as the top-of-page cards (M7 design parity). ── */
:root main:not(:has(> article)) > div:last-child {
  grid-column: 1 / -1;
  display: block;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
:root main:not(:has(> article)) > div:last-child:hover {
  transform: none;
  box-shadow: none;
  border-color: transparent;
}
/* iter=2 (M6): this ::before was a plain "ARCHIVES" text label — it is now
   the SECOND hero-photo strip, positioned between the journal grid and the
   compact archive tail (the wrapper is main's LAST child, so ::before renders
   directly above the archive cells). Dark gradient overlay + centred white
   tracked label = the required atmospheric section-break band. Homepage-only
   via the :not(:has(> article)) scope, so it never leaks onto article pages. */
:root main:not(:has(> article)) > div:last-child::before {
  content: "TOUT LIRE";
  display: flex;
  align-items: center;
  justify-content: center;
  height: 205px;
  margin: 0 0 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(rgba(20,24,28,.55), rgba(20,24,28,.25)),
              url("/theme-assets/feature-photo.jpg");
  background-size: cover;
  background-position: center 70%;
  color: #f5efe1;
  font-family: var(--font-meta);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0,0,0,.55);
}
:root main:not(:has(> article)) > div:last-child > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 16px;
  align-items: stretch;
}
:root main:not(:has(> article)) > div:last-child > ul > li {
  margin: 0;
  background: var(--paper);
  border: 1px solid rgba(45, 62, 51, .12);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(45, 62, 51, .05);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
:root main:not(:has(> article)) > div:last-child > ul > li:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(45, 62, 51, .10);
  border-color: rgba(217, 119, 87, .45);
}
:root main:not(:has(> article)) > div:last-child > ul > li > a {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.26;
  color: var(--color-primary);
  text-decoration: none;
}
:root main:not(:has(> article)) > div:last-child > ul > li > a:hover {
  color: var(--color-accent-dark);
}
:root main:not(:has(> article)) > div:last-child > ul > li > span {
  font-family: var(--font-meta);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ── M10 — affiliate CTAs are inline <a href="/out/…"> in the article
   body ("Formation Eclosion"). The premium pill rule was scoped
   main:has(> h1) — which never matches this hgroup-based article <main> —
   AND used undefined vars, so it was doubly dead. Re-scope to
   main:has(> article) and render a filled forest-green pill (same button
   language as the homepage hero CTA) so it reads as a button, not prose. ── */
:root main:has(> article) a[href^="/out/"],
:root main:has(> article) a[href^="/go/"],
:root main:has(> article) a[href^="/ref/"],
:root main:has(> article) a[href^="/try/"],
:root main:has(> article) a[href^="/aff/"] {
  display: inline-block;
  background: var(--color-primary);
  color: var(--color-bg);
  padding: 5px 15px;
  border-radius: 6px;
  font-family: var(--font-meta);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.5;
  text-decoration: none;
  border: 0;
}
:root main:has(> article) a[href^="/out/"]:hover,
:root main:has(> article) a[href^="/go/"]:hover,
:root main:has(> article) a[href^="/ref/"]:hover,
:root main:has(> article) a[href^="/try/"]:hover,
:root main:has(> article) a[href^="/aff/"]:hover {
  background: var(--color-accent);
  color: var(--color-bg);
}
/* keep the outbound ↗ marker (R2 fix) legible on the dark pill */
:root main:has(> article) a[href^="/out/"]::after,
:root main:has(> article) a[href^="/go/"]::after,
:root main:has(> article) a[href^="/ref/"]::after,
:root main:has(> article) a[href^="/try/"]::after,
:root main:has(> article) a[href^="/aff/"]::after {
  color: var(--color-bg);
}

/* ── S6 — persona/location line under the article H1 (was date-only). ── */
:root main:has(> article) > hgroup time::after {
  content: " · PAR MANON · LA ROCHELLE";
  color: var(--color-muted);
}