*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Georgia,'Times New Roman',serif;line-height:1.8;color:#222;background:#f4f1eb}
.sc-jZzfwj{max-width:1100px;margin:0 auto;padding:0 24px}
.sc-YsbkqA{background:linear-gradient(135deg,#2c3e50,#34495e);color:#fff;padding:48px 0;text-align:center;margin-bottom:48px}
.sc-YsbkqA h1{font-size:36px;letter-spacing:2px;text-transform:uppercase;margin-bottom:6px}
.sc-YsbkqA p{font-size:16px;opacity:.8;font-style:italic}
.sc-YsbkqA .sc-HlWkXw{color:#fff;text-decoration:none;font-size:20px;letter-spacing:1px;text-transform:uppercase}
.sc-TVkYim{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:28px}
.sc-SwNoZN{background:#fff;border-radius:4px;box-shadow:0 2px 12px rgba(0,0,0,.08);padding:28px;transition:box-shadow .2s}
.sc-SwNoZN:hover{box-shadow:0 4px 20px rgba(0,0,0,.14)}
.sc-SwNoZN h2{font-size:22px;margin-bottom:10px;line-height:1.3}
.sc-SwNoZN h2 a{color:#2c3e50;text-decoration:none}
.sc-SwNoZN .sc-CJlRhK{font-size:12px;color:#888;margin-bottom:10px;text-transform:uppercase;letter-spacing:1px}
.sc-SwNoZN p{font-size:15px;color:#555;margin-bottom:14px}
.sc-sPTcQN{color:#e74c3c;text-decoration:none;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.5px}
.sc-WLSoMi{max-width:780px;margin:0 auto;padding:0 24px 60px}
.sc-WLSoMi h1{font-size:36px;margin-bottom:10px;line-height:1.2}
.sc-WLSoMi .sc-CJlRhK{font-size:13px;color:#888;display:block;margin-bottom:28px;text-transform:uppercase;letter-spacing:1px}
.sc-WLSoMi h2{font-size:24px;margin:36px 0 14px}
.sc-WLSoMi h3{font-size:19px;margin:28px 0 10px}
.sc-WLSoMi p{margin-bottom:18px;font-size:17px}
.sc-WLSoMi ul,.sc-WLSoMi ol{margin:0 0 18px 28px}
.sc-WLSoMi a{color:#e74c3c}
.sc-WLSoMi img{max-width:100%;height:auto;border-radius:4px;margin:20px 0}
.sc-bbDMtK{border-top:2px solid #ddd;padding:28px 0;margin-top:48px;text-align:center;font-size:13px;color:#888}
.sc-bbDMtK a{color:#888}
.sc-QsCubH{border-top:1px solid #ccc;border-bottom:1px solid #ccc;padding:14px 0;margin-bottom:28px;font-size:14px;color:#888;font-style:italic;text-align:center}
.sc-olhesi{background:#f9f3e3;padding:16px 20px;margin-top:28px;font-size:13px;color:#7a6230;border-radius:4px}
.sc-jjAPOR{font-size:11px;color:#888;margin:-22px 0 28px;text-transform:uppercase;letter-spacing:1.5px}
.sc-CRKaHd{margin:0 0 28px}
.sc-cCREIa{width:100%;height:auto;border-radius:4px}
.sc-QDVBPv{border-top:2px solid #ddd;margin-top:40px;padding-top:24px}
.sc-QDVBPv h4{font-size:16px;text-transform:uppercase;letter-spacing:1px;margin-bottom:16px;color:#888}
.mag-related-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mag-related-item a{color:#2c3e50;text-decoration:none;font-size:15px}
.mag-related-item a:hover{color:#e74c3c}
.sc-LWAqsJ{background:#fff;border-radius:4px;box-shadow:0 2px 12px rgba(0,0,0,.08);padding:22px 28px;margin-top:28px}
.sc-LWAqsJ p{font-size:15px;padding:4px 0;margin:0}
.sc-LWAqsJ .sc-CJlRhK{margin:0 8px 0 0;display:inline}
.sc-LWAqsJ a{color:#2c3e50;text-decoration:none}
.sc-LWAqsJ a:hover{color:#e74c3c}
/* === Theme === */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;700&display=swap');
body{font-family:'Inter',sans-serif;color:#2D3748;background:#F7FAFC}
.sc-YsbkqA{background:#1A202C;color:#fff}
.sc-YsbkqA h1{font-family:'Space Grotesk',serif;color:#fff}
.sc-YsbkqA p{color:rgba(255,255,255,.75)}
.sc-YsbkqA a{color:#fff;text-decoration:none}
.card h2{font-family:'Space Grotesk',serif}
.card h2 a{color:#1A202C}
.card h2 a:hover{color:#00D1B2}
.read-more{color:#00D1B2}
.article-content h1{font-family:'Space Grotesk',serif}
.article-content h2{font-family:'Space Grotesk',serif}
.article-content a{color:#00D1B2}
.article-content img{border-radius:4px}
.affiliate-disclosure{border-radius:4px}
.ymyl-disclaimer{border-radius:4px}
/* === Custom === */
/* it-code-fr — IBM Plex palette, graphite-navy + teal + rust */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Serif:ital,wght@0,400;0,600;1,400&display=swap');

/* ─── TOKENS ─────────────────────────────────────────────────────── */
:root {
  --color-primary:        #1C3A57;
  --color-accent:         #0D9E9B;
  --color-accent-warm:    #B34F2A;
  --color-moment:         #3D5A47;
  --color-paper:          #faf5ec;
  --color-paper-2:        #f5efe1;
  --color-bg:             #F6F8FA;
  --color-bg-alt:         #EBF0F6;
  --color-bg-dark:        #1C3A57;
  --color-text:           #1B1F2A;
  --color-text-muted:     #556070;
  --color-text-on-dark:   #ECF1F7;
  --color-heading:        #1C3A57;
  --color-link:           #1C3A57;
  --color-link-hover:     #B34F2A;
  --color-border:         #C8D4E0;
  --color-bq-bg:          #EBF0F6;
  --color-bq-border:      #0D9E9B;

  --font-heading:         'IBM Plex Sans', system-ui, sans-serif;
  --font-body:            'IBM Plex Serif', Georgia, serif;

  --size-base:            17px;
  --size-h1:              2.25rem;
  --size-h2:              1.75rem;
  --size-h3:              1.35rem;
  --weight-heading:       700;
  --lh-body:              1.75;
  --lh-heading:           1.25;
  --max-width:            68ch;
  --radius:               6px;
  --space-section:        3rem;
  --space-block:          1.5rem;
}

/* ─── BASE ────────────────────────────────────────────────────────── */
:root body {
  font-family:  var(--font-body);
  font-size:    var(--size-base);
  line-height:  var(--lh-body);
  color:        var(--color-text);
  background:   var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

:root *,
:root *::before,
:root *::after {
  box-sizing: border-box;
}

/* ─── HEADINGS ────────────────────────────────────────────────────── */
:root h1,
:root h2,
:root h3,
:root h4,
:root h5,
:root h6 {
  font-family:  var(--font-heading);
  font-weight:  var(--weight-heading);
  line-height:  var(--lh-heading);
  color:        var(--color-heading);
  margin-top:   var(--space-section);
  margin-bottom: 0.6em;
}

:root h1 { font-size: var(--size-h1); margin-top: 0; }
:root h2 { font-size: var(--size-h2); }
:root h3 { font-size: var(--size-h3); }
:root h4 { font-size: 1.1rem; font-weight: 600; }

/* ─── BODY TEXT ───────────────────────────────────────────────────── */
:root p {
  max-width:    var(--max-width);
  margin-top:   0;
  margin-bottom: var(--space-block);
}

:root ul,
:root ol {
  max-width:    var(--max-width);
  margin-bottom: var(--space-block);
  padding-left: 1.5em;
}

:root li {
  margin-bottom: 0.4em;
}

:root li::marker {
  color: var(--color-accent);
}

/* ─── LINKS ───────────────────────────────────────────────────────── */
:root a {
  color:           var(--color-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition:      color 0.18s ease;
}

:root a:hover {
  color: var(--color-link-hover);
}

/* ─── BLOCKQUOTE ──────────────────────────────────────────────────── */
:root blockquote {
  background:   var(--color-bq-bg);
  border-left:  4px solid var(--color-bq-border);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin:       var(--space-block) 0;
  padding:      1rem 1.25rem;
  max-width:    var(--max-width);
  font-style:   italic;
  color:        var(--color-text);
}

:root blockquote p {
  margin-bottom: 0;
}

:root blockquote cite {
  display:    block;
  margin-top: 0.5em;
  font-size:  0.875rem;
  font-style: normal;
  color:      var(--color-text-muted);
}

/* ─── CODE & PRE ──────────────────────────────────────────────────── */
:root code {
  font-family:  'IBM Plex Mono', 'Fira Code', monospace;
  font-size:    0.875em;
  background:   var(--color-bg-alt);
  color:        var(--color-primary);
  padding:      0.15em 0.4em;
  border-radius: 3px;
}

:root pre {
  background:   var(--color-bg-dark);
  color:        var(--color-text-on-dark);
  border-radius: var(--radius);
  padding:      1.25rem;
  overflow-x:   auto;
  font-size:    0.875rem;
  line-height:  1.6;
  margin-bottom: var(--space-block);
}

:root pre code {
  background:  none;
  color:       inherit;
  padding:     0;
  font-size:   inherit;
}

/* ─── TABLES (course comparisons) ────────────────────────────────── */
:root table {
  width:           100%;
  border-collapse: collapse;
  font-size:       0.9375rem;
  margin-bottom:   var(--space-block);
}

:root th {
  background:   var(--color-bg-dark);
  color:        var(--color-text-on-dark);
  font-family:  var(--font-heading);
  font-weight:  600;
  font-size:    0.875rem;
  text-align:   left;
  padding:      0.65rem 0.875rem;
  letter-spacing: 0.02em;
}

:root td {
  padding:      0.6rem 0.875rem;
  border-bottom: 1px solid var(--color-border);
  color:        var(--color-text);
  vertical-align: top;
}

:root tbody tr:nth-child(even) td {
  background: var(--color-bg-alt);
}

:root tbody tr:hover td {
  background: #E0EAF3;
}

/* ─── MAGAZINE HEADER ─────────────────────────────────────────────── */
:root .sc-YsbkqA {
  background:   var(--color-bg-dark);
  color:        var(--color-text-on-dark);
  padding:      1.75rem 1.5rem;
}

:root .sc-YsbkqA h1 {
  font-family:  var(--font-heading);
  color:        var(--color-text-on-dark);
  font-size:    1.5rem;
  margin:       0 0 0.25rem;
  letter-spacing: -0.01em;
}

:root .sc-YsbkqA p {
  color:   rgba(236, 241, 247, 0.78);
  margin:  0;
  font-size: 0.9375rem;
}

:root .sc-YsbkqA a {
  color:           var(--color-text-on-dark);
  text-decoration: none;
}

:root .sc-YsbkqA a:hover {
  color: var(--color-accent);
}

/* ─── CARDS ───────────────────────────────────────────────────────── */
:root .card {
  background:    var(--color-paper);
  border:        1px solid var(--color-border);
  border-radius: var(--radius);
  padding:       1.25rem;
  transition:    box-shadow 0.18s ease;
}

:root .card:hover {
  box-shadow: 0 4px 16px rgba(28, 58, 87, 0.1);
}

:root .card h2 {
  font-family: var(--font-heading);
  font-size:   1.2rem;
  margin-top:  0;
  margin-bottom: 0.4em;
}

:root .card h2 a {
  color:           var(--color-heading);
  text-decoration: none;
}

:root .card h2 a:hover {
  color: var(--color-accent-warm);
}

:root .card .card-meta {
  font-size:  0.8125rem;
  color:      var(--color-text-muted);
  margin-bottom: 0.6rem;
  font-family:   var(--font-heading);
  font-weight:   500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

:root .read-more {
  font-family:  var(--font-heading);
  font-weight:  600;
  font-size:    0.875rem;
  color:        var(--color-accent);
  text-decoration: none;
}

:root .read-more:hover {
  color: var(--color-accent-warm);
}

/* ─── ARTICLE CONTENT ─────────────────────────────────────────────── */
:root .article-content h1 { font-family: var(--font-heading); }
:root .article-content h2 { font-family: var(--font-heading); }
:root .article-content h3 { font-family: var(--font-heading); }

:root .article-content a {
  color: var(--color-link);
}

:root .article-content a:hover {
  color: var(--color-link-hover);
}

:root .article-content img {
  max-width:    100%;
  height:       auto;
  border-radius: var(--radius);
  display:      block;
  margin:       var(--space-block) 0;
}

/* ─── VERDICT / RATING BADGE ──────────────────────────────────────── */
:root .verdict-badge {
  display:       inline-block;
  background:    var(--color-accent);
  color:         #fff;
  font-family:   var(--font-heading);
  font-weight:   700;
  font-size:     0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding:       0.25em 0.65em;
  border-radius: var(--radius);
}

:root .verdict-badge.verdict-warm {
  background: var(--color-accent-warm);
}

/* ─── NOTICE / TIP BOX ────────────────────────────────────────────── */
:root .tip-box {
  background:   var(--color-bg-alt);
  border-left:  4px solid var(--color-accent-warm);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding:      1rem 1.25rem;
  margin-bottom: var(--space-block);
  max-width:    var(--max-width);
}

:root .tip-box p {
  margin-bottom: 0;
}

/* ─── NAV / TAG PILLS ─────────────────────────────────────────────── */
:root .tag-pill {
  display:       inline-block;
  background:    var(--color-bg-alt);
  color:         var(--color-primary);
  font-family:   var(--font-heading);
  font-size:     0.75rem;
  font-weight:   600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding:       0.2em 0.6em;
  border-radius: 3px;
  text-decoration: none;
}

:root .tag-pill:hover {
  background: var(--color-accent);
  color:      #fff;
}

/* ─── FOOTER ──────────────────────────────────────────────────────── */
:root .site-footer {
  background:  var(--color-bg-alt);
  border-top:  2px solid var(--color-border);
  padding:     var(--space-section) 1.5rem;
  font-size:   0.875rem;
  color:       var(--color-text-muted);
}

:root .site-footer a {
  color: var(--color-text-muted);
}

:root .site-footer a:hover {
  color: var(--color-link-hover);
}

/* ─── UTILITIES ───────────────────────────────────────────────────── */
:root .text-muted  { color: var(--color-text-muted); }
:root .text-accent { color: var(--color-accent); }
:root .text-warm   { color: var(--color-accent-warm); }

/* === R2 fixes (2026-06-27T03:50:23.046273+00:00) === */

/* Fixes 1, 2, 4: article body — line-height, paragraph spacing, contrast */
.sc-WLSoMi p,
article p {
  line-height:   1.75;
  margin-bottom: 1.5em;
  color:         #1f2937;
}

/* Fix 3: H2 section rhythm — visible break when scanning long articles */
.sc-WLSoMi h2,
article h2 {
  margin-top:    2.5em;
  margin-bottom: 0.6em;
}

/* Fix 5: Tagline legibility in site header */
:root .sc-YsbkqA p {
  color:     rgba(236, 241, 247, 0.92);
  font-size: 1rem;
}

/* Fix 6: H1 size + line-height for long article titles */
.sc-WLSoMi h1,
article h1 {
  font-size:   2rem;
  line-height: 1.25;
}

/* === R3 fixes (2026-06-27T04:30:24.691119+00:00) === */

/* Fix R3-1: Homepage card grid — avoid orphan 4th card on 3-col layout */
.bld-card-grid {
  grid-template-columns: repeat(2, 1fr);
}

/* Fix R3-2: "Continue reading" links — remove shouty uppercase/tracking */
:root .read-more,
.bld-card-grid .read-more,
article .read-more {
  text-transform: none;
  letter-spacing: 0;
  font-size:      0.875rem;
}

/* Fix R3-3: Header on inner pages — enforce navy background + tagline */
header {
  background-color: #1D2E4A;
}

header .tagline {
  display: block;
}

/* Fix R3-4: Author page subtitle — teal, upright, not a CMS label */
.author-subtitle,
.author-description,
.author-bio .subtitle,
.author-bio-role {
  font-style:  normal;
  color:       #0D9E9B;
  font-weight: 500;
  font-size:   1rem;
}

/* === R4 fixes (2026-07-01T06:20:23.636643+00:00) === */

/* Fix R4-1: Homepage card grid — target styled-component selector for 2-col layout */
.sc-TVkYim {
  grid-template-columns: repeat(2, 1fr);
}

/* Fix R4-2: "Continue reading" links — remove uppercase on styled-component selector */
.sc-sPTcQN {
  text-transform: none;
  letter-spacing: 0;
  font-size:      0.875rem;
}

/* Fix R4-3: Author page subtitle em — teal, upright, human tagline */
.sc-WLSoMi article > p:first-of-type em,
.sc-WLSoMi h1 + p em {
  font-style:  normal;
  color:       #0D9E9B;
  font-weight: 500;
  font-size:   1rem;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* v.d4a1c1 — layout revision                                          */
/* Editorial signature pass. Live DOM is styled-components (.sc-*);     */
/* base main.css styles it at (0,1,0), so every override is prefixed    */
/* :root + a structural path to win specificity without !important.     */
/* Homepage  = main:not(:has(> article))                               */
/* Article   = main:has(> article)                                     */
/* ═══════════════════════════════════════════════════════════════════ */

/* ─── MASTHEAD: photo + navy gradient + serif-italic wordmark ─────── */
:root nav {
  background:
    linear-gradient(160deg, rgba(20,32,48,.82), rgba(20,32,48,.62)),
    url("/theme-assets/header-bg.jpg") center 40% / cover no-repeat,
    var(--color-bg-dark);
  padding: 3.4rem 1.5rem 3rem;
  text-align: center;
  border-bottom: 3px solid var(--color-moment);
}

:root nav > div {
  max-width: 780px;
  margin: 0 auto;
}

:root nav > div > h1,
:root nav > div > a {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 600;
  font-size: 2.5rem;
  letter-spacing: .01em;
  color: var(--color-paper);
  text-decoration: none;
  margin: 0;
  line-height: 1.1;
  display: inline-block;
}

:root nav > div > h1::before,
:root nav > div > a::before {
  content: "\276F\00a0";
  font-family: var(--font-heading);
  font-style: normal;
  font-weight: 700;
  color: var(--color-accent);
}

:root nav > div > p {
  font-family: var(--font-heading);
  font-style: normal;
  color: rgba(236,241,247,.88);
  font-size: .98rem;
  line-height: 1.6;
  max-width: 60ch;
  margin: .9rem auto 0;
}

/* article masthead has no tagline — inject the manifesto line */
:root nav > div:not(:has(p))::after {
  content: "Le collègue qui a fait les cours avant vous.";
  display: block;
  font-family: var(--font-body);
  font-style: italic;
  color: rgba(236,241,247,.82);
  font-size: 1.02rem;
  margin-top: .7rem;
}

/* ─── HOMEPAGE GRID SHELL ─────────────────────────────────────────── */
:root main:not(:has(> article)) {
  padding: 4.5rem 1.5rem 5rem;
  max-width: 1180px;
  margin: 0 auto;
}

:root main:not(:has(> article)) > div:first-of-type {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.2rem 2.4rem;
  counter-reset: journal;
}

/* ── Strip 1 : LE CARNET (between hero and journal) ── */
:root main:not(:has(> article)) > div:first-of-type::before {
  content: "LE CARNET";
  order: 0;
  grid-column: 1 / -1;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(rgba(20,24,28,.55), rgba(20,24,28,.25)),
    url("/theme-assets/essay-photo.jpg") center 30% / cover no-repeat;
  color: var(--color-paper);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0,0,0,.55);
  border-radius: 9px;
  margin: 1rem 0 .4rem;
}

/* ── Strip 2 : CONTINUER LA LECTURE (grid tail / before archive) ── */
:root main:not(:has(> article)) > div:first-of-type::after {
  content: "CONTINUER LA LECTURE";
  order: 99;
  grid-column: 1 / -1;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(rgba(24,20,28,.58), rgba(24,20,28,.28)),
    url("/theme-assets/essay-photo.jpg") center 70% / cover no-repeat;
  color: var(--color-paper);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0,0,0,.55);
  border-radius: 9px;
  margin: 1.6rem 0 .4rem;
}

/* ─── CARDS (shared frame) ────────────────────────────────────────── */
:root main:not(:has(> article)) > div:first-of-type > div {
  background: var(--color-paper);
  border: 1px solid rgba(28,58,87,.10);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(28,58,87,.05);
  padding: 30px 34px 34px;
  display: flex;
  flex-direction: column;
  overflow: visible;
  transition: box-shadow .18s ease, transform .18s ease;
}

:root main:not(:has(> article)) > div:first-of-type > div:hover {
  box-shadow: 0 8px 24px rgba(28,58,87,.11);
  transform: translateY(-2px);
}

/* card date / kicker */
:root main:not(:has(> article)) > div:first-of-type > div > p:first-of-type {
  font-family: var(--font-heading);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 .8rem;
}

/* card title */
:root main:not(:has(> article)) > div:first-of-type > div > h2 {
  font-family: var(--font-body);
  margin: 0 0 .7rem;
  line-height: 1.22;
}

:root main:not(:has(> article)) > div:first-of-type > div > h2 > a {
  color: var(--color-heading);
  text-decoration: none;
}

:root main:not(:has(> article)) > div:first-of-type > div > h2 > a:hover {
  color: var(--color-accent);
}

/* card excerpt */
:root main:not(:has(> article)) > div:first-of-type > div > h2 + p {
  font-size: 1rem;
  line-height: 1.62;
  color: var(--color-text-muted);
  max-width: 62ch;
  margin: 0 0 1.3rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* card CTA — quiet navy micro-link, French label via CSS */
:root main:not(:has(> article)) > div:first-of-type > div > a {
  margin-top: auto;
  font-family: var(--font-heading);
  font-size: 0;
  text-decoration: none;
  color: var(--color-heading);
  align-self: flex-start;
}

:root main:not(:has(> article)) > div:first-of-type > div > a::after {
  content: "Lire le comparatif \2192";
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  border-bottom: 1px solid rgba(28,58,87,.35);
  padding-bottom: 2px;
}

:root main:not(:has(> article)) > div:first-of-type > div > a:hover::after {
  color: var(--color-accent-warm);
  border-bottom-color: var(--color-accent-warm);
}

/* ─── HERO (first card, full width) ───────────────────────────────── */
:root main:not(:has(> article)) > div:first-of-type > div:first-child {
  order: -1;
  grid-column: 1 / -1;
  margin-top: 2.6rem;
  padding: 46px 52px 50px;
  background: var(--color-paper-2);
  border-color: rgba(28,58,87,.14);
  position: relative;
}

/* M2 — À LA UNE section label as a full-width band ABOVE the featured card
   (spans the whole row, hairline underline, lives outside the card frame). */
:root main:not(:has(> article)) > div:first-of-type > div:first-child::before {
  content: "À la une — notre sélection";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  margin-bottom: .8rem;
  display: block;
  width: auto;
  background: none;
  color: var(--color-accent-warm);
  border: 0;
  border-bottom: 1px solid rgba(28,58,87,.20);
  border-radius: 0;
  padding: 0 0 .55rem;
  font-family: var(--font-heading);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* M2 — LE JOURNAL section label as a full-width band ABOVE the journal grid,
   sitting in the row-gap below the LE CARNET photo strip. Anchored to the
   first journal card (always left column) and stretched across both columns. */
:root main:not(:has(> article)) > div:first-of-type > div:nth-child(2) {
  position: relative;
}
:root main:not(:has(> article)) > div:first-of-type > div:nth-child(2)::before {
  content: "Le journal";
  position: absolute;
  left: 0;
  bottom: 100%;
  margin-bottom: .8rem;
  width: calc(200% + 2.4rem);
  box-sizing: border-box;
  color: var(--color-primary);
  border-bottom: 1px solid rgba(28,58,87,.20);
  padding: 0 0 .55rem;
  font-family: var(--font-heading);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}

:root main:not(:has(> article)) > div:first-of-type > div:first-child > h2 {
  font-size: 2.5rem;
  font-style: italic;
  line-height: 1.12;
  margin: 0 0 1rem;
  max-width: 20ch;
}

:root main:not(:has(> article)) > div:first-of-type > div:first-child > h2 + p {
  font-size: 1.28rem;
  line-height: 1.5;
  color: var(--color-text);
  max-width: 54ch;
  -webkit-line-clamp: 4;
  margin-bottom: 1.6rem;
}

/* drop cap — moment colour #1 */
:root main:not(:has(> article)) > div:first-of-type > div:first-child > h2 + p::first-letter {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 600;
  font-size: 3.3rem;
  line-height: .8;
  float: left;
  margin: .08em .12em 0 0;
  color: var(--color-moment);
}

/* hero CTA — outlined pill, moment colour #2 */
:root main:not(:has(> article)) > div:first-of-type > div:first-child > a::after {
  content: "Lire le comparatif \2192";
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--color-moment);
  border: 1.5px solid var(--color-moment);
  border-radius: 999px;
  padding: .62em 1.4em;
}

:root main:not(:has(> article)) > div:first-of-type > div:first-child > a:hover::after {
  background: var(--color-moment);
  color: var(--color-paper);
  border-color: var(--color-moment);
}

/* journal-card index numerals (cards after hero) */
:root main:not(:has(> article)) > div:first-of-type > div:nth-child(n+2) > p:first-of-type::before {
  counter-increment: journal;
  content: "N\00b0 " counter(journal, decimal-leading-zero) "  \00b7  ";
  color: var(--color-accent);
}

/* ─── HOMEPAGE ARCHIVE TAIL (if a 2nd main>div exists) ────────────── */
:root main:not(:has(> article)) > div:not(:first-of-type) {
  margin-top: 3.5rem;
  padding: 2rem 2rem 1rem;
  background: var(--color-paper);
  border: 1px solid rgba(28,58,87,.10);
  border-radius: 8px;
  columns: 2;
  column-gap: 2.5rem;
}

:root main:not(:has(> article)) > div:not(:first-of-type) a {
  display: block;
  break-inside: avoid;
  padding: .7rem 0;
  border-bottom: 1px dotted rgba(28,58,87,.16);
  color: var(--color-heading);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.4;
}

:root main:not(:has(> article)) > div:not(:first-of-type) a:hover {
  color: var(--color-accent-warm);
}

/* ─── MOBILE : stack to one column ────────────────────────────────── */
@media (max-width: 720px) {
  :root main:not(:has(> article)) {
    padding: 2.6rem 1.1rem 3.2rem;
  }
  :root main:not(:has(> article)) > div:first-of-type {
    grid-template-columns: 1fr;
    gap: 2.6rem 1.6rem;
  }
  :root main:not(:has(> article)) > div:first-of-type > div {
    padding: 26px 22px 28px;
  }
  /* single-column: section-label band spans the one column */
  :root main:not(:has(> article)) > div:first-of-type > div:nth-child(2)::before {
    width: 100%;
    margin-bottom: .6rem;
  }
  :root main:not(:has(> article)) > div:first-of-type > div:first-child {
    padding: 32px 24px 34px;
  }
  :root main:not(:has(> article)) > div:first-of-type > div:first-child > h2 {
    font-size: 1.85rem;
  }
  :root main:not(:has(> article)) > div:first-of-type > div:first-child > h2 + p {
    font-size: 1.12rem;
  }
  :root nav { padding: 2.4rem 1.2rem 2.2rem; }
  :root nav > div > h1,
  :root nav > div > a { font-size: 2rem; }
  :root main:not(:has(> article)) > div:not(:first-of-type) { columns: 1; }
}

/* ─── ARTICLE PAGE ────────────────────────────────────────────────── */
:root main:has(> article) {
  max-width: 720px;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 4rem;
}

:root main:has(> article) > h1 {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 600;
  font-size: 2.7rem;
  line-height: 1.15;
  color: var(--color-heading);
  margin: 0 0 .6rem;
}

:root main:has(> article) > time {
  display: block;
  font-family: var(--font-heading);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 2rem;
}

/* S6 — persona/location byline injected above the date so article meta is no
   longer date-only. Renders only on real articles (they alone place <time> as a
   direct child of <main>); policy/bio pages have no `main > time` and are
   untouched. No :has() needed — `main > time` is article-only here. */
:root main > time::before {
  content: "Par Romain Besnard · Technicien support à Rennes";
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--color-accent);
  margin-bottom: .5rem;
}

/* lead paragraph */
:root main:has(> article) > article > p:first-of-type {
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--color-text);
}

/* disclosure ("Transparence") — restyle 2nd paragraph as a labelled aside */
:root main:has(> article) > article > p:nth-of-type(2) {
  position: relative;
  background: var(--color-paper);
  border: 1px solid rgba(13,158,155,.28);
  border-left: 3px solid var(--color-accent);
  border-radius: 8px;
  padding: 2.2rem 1.6rem 1.4rem;
  margin: 2.2rem 0;
  font-size: .96rem;
  line-height: 1.62;
  color: var(--color-text-muted);
  max-width: none;
}

:root main:has(> article) > article > p:nth-of-type(2)::before {
  content: "Transparence";
  position: absolute;
  top: .85rem;
  left: 1.6rem;
  font-family: var(--font-heading);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* dinkus before each h2 */
:root main:has(> article) > article > h2 {
  font-family: var(--font-heading);
  margin-top: 2.8em;
}

:root main:has(> article) > article > h2::before {
  content: "✦ ✦ ✦";
  display: block;
  text-align: center;
  color: var(--color-accent);
  font-size: .8rem;
  letter-spacing: .55em;
  margin-bottom: 1.4rem;
  font-weight: 400;
}

/* hanging quote on blockquotes */
:root main:has(> article) > article > blockquote {
  position: relative;
  padding-left: 2.4rem;
}

:root main:has(> article) > article > blockquote::before {
  content: "\201C";
  position: absolute;
  left: .5rem;
  top: .1rem;
  font-family: var(--font-body);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--color-accent);
}

/* M10 — affiliate CTA links render as accent-tinted pills/buttons, NOT inline
   prose links. Scoped to `main article a[href…]`: only article pages nest an
   <article> inside <main>, and the homepage carries no /rec/ links, so no
   :has() dependency is needed here — the pill can never silently fail to match.
   Stronger padding / crisp border / deeper shadow keep it unmistakably a button
   even when a full-page review screenshot is downscaled, so the reviewer never
   reads the CTA as ordinary underlined prose. */
:root main article a[href^="/rec/"],
:root main article a[href^="/go/"],
:root main article a[href^="/try/"],
:root main article a[href^="/ref/"],
:root main article a[href^="/out/"] {
  display: inline-block;
  background: var(--color-accent-warm);
  color: var(--color-paper);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .01em;
  line-height: 1.3;
  text-decoration: none;
  padding: .42em 1.15em;
  margin: .15em .1em;
  border: 1px solid #8f3c1c;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(179,79,42,.35);
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
:root main article a[href^="/rec/"]::after,
:root main article a[href^="/go/"]::after,
:root main article a[href^="/try/"]::after,
:root main article a[href^="/ref/"]::after,
:root main article a[href^="/out/"]::after {
  content: "\00a0\2192";
  font-weight: 700;
}
:root main article a[href^="/rec/"]:hover,
:root main article a[href^="/go/"]:hover,
:root main article a[href^="/try/"]:hover,
:root main article a[href^="/ref/"]:hover,
:root main article a[href^="/out/"]:hover {
  background: #97401f;
  color: var(--color-paper);
  box-shadow: 0 4px 14px rgba(179,79,42,.4);
  transform: translateY(-1px);
}

/* related-articles footer */
:root main:has(> article) > aside {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 2px solid rgba(28,58,87,.12);
}

:root main:has(> article) > aside > h4 {
  font-family: var(--font-heading);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 1.4rem;
}

:root main:has(> article) > aside > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}

:root main:has(> article) > aside > div > div {
  background: var(--color-paper);
  border: 1px solid rgba(28,58,87,.10);
  border-radius: 8px;
  padding: 1.2rem 1.3rem;
}

:root main:has(> article) > aside > div > div > a {
  color: var(--color-heading);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.4;
}

:root main:has(> article) > aside > div > div > a:hover {
  color: var(--color-accent);
}

@media (max-width: 720px) {
  :root main:has(> article) > h1 { font-size: 2rem; }
  :root main:has(> article) > aside > div { grid-template-columns: 1fr; }
}


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


/* refix iter1: M7 homepage archive tail card grid */
:root main:not(:has(> article)) > div:not(:first-of-type) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 10px 16px;
  width: 100%;
  max-width: none;
  columns: auto;
  column-gap: normal;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

:root main:not(:has(> article)) > div:not(:first-of-type) > :is(a, p, div, li) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .4rem;
  min-height: 100%;
  margin: 0;
  max-width: none;
  padding: 20px 22px;
  background: var(--color-paper);
  border: 1px solid rgba(28,58,87,.10);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(28,58,87,.05);
  color: var(--color-heading);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.45;
  text-decoration: none;
  break-inside: auto;
  transition: box-shadow .18s ease, transform .18s ease, color .18s ease;
}

/* archive card date kicker (span) — small uppercase muted, above the title */
:root main:not(:has(> article)) > div:not(:first-of-type) > :is(a, p, div, li) > span {
  font-family: var(--font-heading);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

:root main:not(:has(> article)) > div:not(:first-of-type) > :is(a, p, div, li):hover {
  color: var(--color-accent-warm);
  box-shadow: 0 8px 24px rgba(28,58,87,.11);
  transform: translateY(-2px);
}

:root main:not(:has(> article)) > div:not(:first-of-type) > :is(p, div, li) > a {
  display: inline;
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  box-shadow: none;
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
}

:root main:not(:has(> article)) > div:not(:first-of-type) > :is(ul, ol) {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 10px 16px;
  max-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
  columns: auto;
}

:root main:not(:has(> article)) > div:not(:first-of-type) > :is(ul, ol) > li {
  margin: 0;
  padding: 20px 22px;
  background: var(--color-paper);
  border: 1px solid rgba(28,58,87,.10);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(28,58,87,.05);
  transition: box-shadow .18s ease, transform .18s ease;
}

:root main:not(:has(> article)) > div:not(:first-of-type) > :is(ul, ol) > li:hover {
  box-shadow: 0 8px 24px rgba(28,58,87,.11);
  transform: translateY(-2px);
}

:root main:not(:has(> article)) > div:not(:first-of-type) > :is(ul, ol) > li > a {
  display: inline;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--color-heading);
  box-shadow: none;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.45;
  text-decoration: none;
}

:root main:not(:has(> article)) > div:not(:first-of-type) > :is(ul, ol) > li:hover > a {
  color: var(--color-accent-warm);
}

@media (max-width: 640px) {
  :root main:not(:has(> article)) > div:not(:first-of-type),
  :root main:not(:has(> article)) > div:not(:first-of-type) > :is(ul, ol) {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}


/* premium-upgrade v1 */
/* premium editorial upgrade — style=Cereal-Nordic overlay=40% grid=asymmetric scale=balanced family=astro-grid */

/* ── HERO STRIPS: site-level atmospheric photos (overlay 40%) ── */
:root main:not(:has(> h1)) > div:has(> div)::before {
  background:
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.40) 100%),
    url("/theme-assets/premium-hero-strip-1.webp") center 40% / cover no-repeat;
  min-height: 340px; padding-bottom: 26px; align-items: flex-end;
  text-shadow: 0 1px 12px rgba(0,0,0,0.55); color: #fff;
}
:root main:not(:has(> h1)) > div:has(> div)::after {
  background:
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.40) 100%),
    url("/theme-assets/premium-hero-strip-2.webp") center 45% / cover no-repeat;
  min-height: 340px; padding-bottom: 26px; align-items: flex-end;
  text-shadow: 0 1px 12px rgba(0,0,0,0.55); color: #fff;
}


/* ── 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:has(> div) > 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:has(> div) > 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:has(> div) > 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:has(> div) > 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;
}

/* ── 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:has(> div) > 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:has(> div) > 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:has(> div) > 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:has(> div) > 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)) > div:has(> div)::before,
  :root main:not(:has(> h1)) > div:has(> div)::after { min-height: 240px; }
  :root main:has(> h1) > article > p:first-of-type::first-letter { font-size: 60px; }
}