*{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}
.sc-bVuYYn{max-width:900px;margin:0 auto;padding:0 28px}
.sc-OkCcyZ{background:#111;color:#fff;padding:64px 0;margin-bottom:48px}
.sc-OkCcyZ h1{font-size:42px;font-weight:800;letter-spacing:-1px;margin-bottom:8px}
.sc-OkCcyZ p{font-size:18px;opacity:.7}
.sc-OkCcyZ a{color:#fff;text-decoration:none;font-size:22px;font-weight:800}
.sc-ebwMlW{padding:0}
.sc-EbQNOf{padding:32px 0;border-left:4px solid #111;padding-left:24px;margin-bottom:28px}
.sc-EbQNOf h2{font-size:24px;font-weight:700;margin-bottom:6px}
.sc-EbQNOf h2 a{color:#111;text-decoration:none}
.sc-EbQNOf h2 a:hover{text-decoration:underline}
.sc-EbQNOf .sc-rBRZLm{font-size:12px;font-weight:600;text-transform:uppercase;color:#888;letter-spacing:1px;margin-bottom:8px}
.sc-EbQNOf p{font-size:15px;color:#444;margin-bottom:10px}
.sc-lOFyWy{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}
.sc-lOFyWy:hover{background:#333}
.sc-KbJMhr{padding-bottom:60px}
.sc-KbJMhr h1{font-size:38px;font-weight:800;letter-spacing:-1px;margin-bottom:10px}
.sc-KbJMhr time{font-size:12px;font-weight:600;text-transform:uppercase;color:#888;letter-spacing:1px;display:block;margin-bottom:28px}
.sc-KbJMhr h2{font-size:26px;font-weight:700;margin:40px 0 14px}
.sc-KbJMhr h3{font-size:20px;font-weight:700;margin:32px 0 10px}
.sc-KbJMhr p{margin-bottom:18px;font-size:17px}
.sc-KbJMhr ul,.sc-KbJMhr ol{margin:0 0 18px 24px}
.sc-KbJMhr a{color:#111;font-weight:600;text-decoration:underline}
.sc-KbJMhr img{max-width:100%;height:auto;margin:20px 0}
.sc-YXxXFQ{background:#111;color:#888;padding:28px 0;margin-top:48px;text-align:center;font-size:12px}
.sc-YXxXFQ a{color:#888;text-decoration:none}
.sc-XzdswY{background:#222;color:#aaa;padding:14px 20px;margin-bottom:24px;font-size:13px;font-style:italic}
.sc-OnzDTj{background:#1a1a1a;color:#888;padding:14px 20px;margin-top:32px;font-size:12px;border-top:3px solid #444}
.sc-qlSfvo{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}
.sc-pgIWGJ{margin:0 0 24px}
.sc-viuikI{width:100%;height:auto;border-radius:0}
.sc-rxrBWR{border-left:4px solid #111;padding-left:24px;margin-top:48px}
.sc-rxrBWR h3{font-size:18px;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px}
.sc-rxrBWR ul{list-style:none;padding:0}
.sc-rxrBWR li{padding:6px 0}
.sc-rxrBWR a{color:#111;text-decoration:underline;font-weight:600}
.sc-FYLjPN{border-left:4px solid #ddd;padding-left:24px;margin-top:36px}
.sc-FYLjPN ul{list-style:none;padding:0}
.sc-FYLjPN li{padding:6px 0;font-size:16px}
.sc-FYLjPN a{color:#111;text-decoration:none;font-weight:600}
.sc-FYLjPN a:hover{text-decoration:underline}
.sc-FYLjPN .sc-rBRZLm{margin:0 0 0 8px}
/* === Theme === */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&family=Fredoka:wght@400;700&display=swap');
body{font-family:'Nunito',sans-serif;color:#333333;background:#FFF9F2}
.sc-OkCcyZ{background:#2C5F5D;color:#fff}
.sc-OkCcyZ h1{font-family:'Fredoka',serif;color:#fff}
.sc-OkCcyZ p{color:rgba(255,255,255,.75)}
.sc-OkCcyZ a{color:#fff;text-decoration:none}
.card h2{font-family:'Fredoka',serif}
.card h2 a{color:#2C5F5D}
.card h2 a:hover{color:#F4A261}
.read-more{color:#F4A261}
.article-content h1{font-family:'Fredoka',serif}
.article-content h2{font-family:'Fredoka',serif}
.article-content a{color:#F4A261}
.article-content img{border-radius:12px}
.affiliate-disclosure{border-radius:12px}
.ymyl-disclaimer{border-radius:12px}
/* === Custom === */
/* v.e5c179 — layout revision */
/* pe-petite-fr — Le Coin des Petits — indigo · corail · prune (moment) */
/* Live DOM is styled-components (sc-xxxxxx). Every rule below is targeted by
   ELEMENT + STRUCTURAL selectors so it survives class obfuscation.
   Webfonts (Fraunces display serif + Nunito humanist sans) are loaded by the
   template layer's own top-of-file @import — an @import here would be dead
   (concatenated after rules), so we simply consume the already-loaded faces. */

/* ── Token overrides ────────────────────────────────────── */
:root {
  --font-body:    'Nunito', system-ui, -apple-system, sans-serif;
  --font-heading: 'Fraunces', 'Iowan Old Style', Palatino, Georgia, serif;
  --moment:       #5E3A5C;   /* prune — used in exactly two places (drop caps) */

  /* Palette + scale tokens (values = theme.json). The deploy layer does NOT
     inject a :root token block into base.css, so without these every var()
     below resolved to the guaranteed-invalid value → surfaces fell back to
     transparent (browser canvas showed through as the stark white M1 flagged)
     and headings fell back from the serif display face to the sans body face
     (the "one sans-serif voice" of S5). Defining them here restores the
     palette theme.json already declares — no new colours are introduced. */
  --primary:       #4E5A8C;
  --primary-dark:  #363F66;
  --primary-light: #ECEEF6;
  --accent:        #E2724A;
  --accent-dark:   #C05830;
  --accent-light:  #FBEAE1;
  --bg:            #FBF7F1;
  --surface:       #FAF5EC;   /* warm paper — never the theme's old #FFFFFF (M1) */
  --surface-alt:   #F3EEE4;
  --fg:            #2E2A2C;
  --muted:         #6B6469;
  --heading-color: #262A4A;
  --border:        #E6DDD0;
  --lh-body:       1.75;
  --lh-heading:    1.25;
  --size-base:     17px;
  --size-sm:       15px;
  --size-h1:       2.5rem;
  --size-h2:       1.75rem;
  --size-h3:       1.3rem;
  --max-content:   760px;
  --r:             14px;
}

/* ── Reset / base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--size-base); scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--fg);
  background-color: var(--bg);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; border-radius: var(--r); }
::selection { background-color: rgba(226, 114, 74, 0.22); color: var(--fg); }

/* ── Base headings ──────────────────────────────────────── */
:root h1, :root h2, :root h3, :root h4 {
  font-family: var(--font-heading);
  color: var(--heading-color);
  line-height: var(--lh-heading);
  margin-top: 1.6em;
  margin-bottom: 0.5em;
  font-weight: 600;
}
:root h1 { font-size: var(--size-h1); font-weight: 600; margin-top: 0; }
:root h2 { font-size: var(--size-h2); }
:root h3 { font-size: var(--size-h3); }
:root h4 { font-size: var(--size-base); font-weight: 600; }

/* ── Base prose ─────────────────────────────────────────── */
:root p { margin-top: 0; margin-bottom: 1.15em; }
:root p:last-child { margin-bottom: 0; }
:root ul, :root ol { padding-left: 1.4em; margin-bottom: 1.15em; }
:root li { margin-bottom: 0.5em; line-height: var(--lh-body); }
:root ul li::marker { color: var(--accent); }
:root ol li::marker { color: var(--primary); font-family: var(--font-heading); font-weight: 600; }

:root blockquote {
  margin: 1.8em 0;
  padding: 1rem 1.4rem;
  background-color: var(--accent-light);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--r) var(--r) 0;
  color: var(--fg);
  font-style: italic;
}
:root blockquote p { margin-bottom: 0; }

:root strong { font-weight: 700; color: var(--heading-color); }
:root em { font-style: italic; }
:root small { font-size: var(--size-sm); color: var(--muted); }
:root hr { border: none; border-top: 1px solid var(--border); margin: 3em 0; }

:root a { color: var(--primary-dark); text-underline-offset: 4px; transition: color 0.18s ease; }
:root a:hover { color: var(--accent-dark); }

/* ── Tables ─────────────────────────────────────────────── */
:root table { border-collapse: collapse; width: 100%; margin: 1.5em 0; }
:root th {
  background-color: var(--primary-light);
  color: var(--heading-color);
  text-align: left;
  padding: 0.6em 0.8em;
  font-family: var(--font-heading);
  font-weight: 600;
}
:root td { padding: 0.6em 0.8em; border-bottom: 1px solid var(--border); }
:root tr:nth-child(even) td { background-color: var(--surface-alt); }

/* ═══════════════════════════════════════════════════════════
   EDITORIAL LAYOUT — masthead → hero → picks → CI-DESSOUS band
   → journal grid → VOIR TOUT band → footer
   ═══════════════════════════════════════════════════════════ */

/* ── Masthead (home) — photo + gradient + serif-italic wordmark ── */
:root body > div:first-child:has(h1) {
  position: relative;
  background:
    linear-gradient(180deg, rgba(38,42,74,0.80) 0%, rgba(54,63,102,0.92) 100%),
    url("/theme-assets/front-image.jpg") center/cover no-repeat;
  color: #fff;
  text-align: center;
  padding: 4.6rem 1.5rem 3.6rem;
  border-bottom: 3px solid var(--accent);
}
:root body > div:first-child:has(h1) > div { max-width: 760px; margin: 0 auto; }
/* Signature manifesto kicker */
:root body > div:first-child:has(h1) > div::before {
  content: "À hauteur de tapis";
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}
:root body > div:first-child:has(h1) h1 {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1.04;
  color: #fff;
  margin: 0 0 0.7rem;
}
:root body > div:first-child:has(h1) p {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.86);
  max-width: 46ch;
  margin: 0 auto;
}

/* ── Masthead (article) — slim bar, italic wordmark link ── */
:root body > div:first-child:not(:has(h1)) {
  background: var(--primary-dark);
  text-align: center;
  padding: 1.1rem 1.5rem;
  border-bottom: 3px solid var(--accent);
}
:root body > div:first-child:not(:has(h1)) a {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 600;
  font-size: 1.3rem;
  color: #fff;
  text-decoration: none;
}
:root body > div:first-child:not(:has(h1)) a:hover { color: var(--accent-light); }

/* ── Home feed — 6-col editorial grid ── */
:root body > main:has(> div > h2) {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2.8rem 1.6rem;
  max-width: 1120px;
  margin: 0 auto;
  padding: 3.4rem 1.5rem 4.5rem;
}

/* Default card = 3 cols (2 per row, chronological grid) */
:root body > main:has(> div > h2) > div {
  grid-column: span 3;
  position: relative;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.7rem 2rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
:root body > main:has(> div > h2) > div:hover {
  box-shadow: 0 8px 26px rgba(78,90,140,0.14);
  transform: translateY(-2px);
}
:root body > main:has(> div > h2) > div > p:first-child {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin: 0 0 0.55rem;
  line-height: 1.4;
}
:root body > main:has(> div > h2) > div > h2 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.24;
  margin: 0 0 0.55rem;
}
:root body > main:has(> div > h2) > div > h2 a { color: var(--heading-color); text-decoration: none; }
:root body > main:has(> div > h2) > div > h2 a:hover { color: var(--accent-dark); }
:root body > main:has(> div > h2) > div > h2 + p {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.65;
  max-width: 64ch;
  margin: 0 0 1.1rem;
  flex: 1 1 auto;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
:root body > main:has(> div > h2) > div > a {
  align-self: flex-start;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-dark);
  background: transparent;              /* kill base template's #111 pill */
  text-decoration: none;
  border: none;
  border-bottom: 2px solid var(--accent);
  border-radius: 0;
  padding: 0 0 2px;
}
:root body > main:has(> div > h2) > div > a:hover { color: var(--accent); border-color: var(--accent-dark); }

/* ── HERO: first card, full width, 2-col with metadata rail ── */
:root body > main:has(> div > h2) > div:first-child {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 3fr 2fr;
  column-gap: 2.6rem;
  row-gap: 1rem;
  align-items: start;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent);
  border-radius: 10px;
  padding: 2.8rem 2.6rem 3rem;
}
:root body > main:has(> div > h2) > div:first-child:hover { transform: none; }
:root body > main:has(> div > h2) > div:first-child > h2 {
  grid-column: 1;
  grid-row: 1;
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  line-height: 1.06;
  margin: 0;
}
:root body > main:has(> div > h2) > div:first-child > h2 a { color: var(--heading-color); }
:root body > main:has(> div > h2) > div:first-child > h2 + p {
  grid-column: 1;
  grid-row: 2;
  font-family: var(--font-body);
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--fg);
  max-width: 48ch;
  margin: 0;
  -webkit-line-clamp: none;
  display: block;
  overflow: visible;
}
:root body > main:has(> div > h2) > div:first-child > h2 + p::first-letter {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 600;
  font-size: 3.4rem;
  line-height: 0.8;
  float: left;
  padding: 0.35rem 0.55rem 0 0;
  color: var(--moment);            /* prune drop cap #1 */
}
/* Metadata rail (right) built from the date paragraph */
:root body > main:has(> div > h2) > div:first-child > p:first-child {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 3px solid var(--accent);
  padding-left: 1.2rem;
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
:root body > main:has(> div > h2) > div:first-child > p:first-child::before {
  content: "Le dernier carnet";
  display: block;
  color: var(--accent-dark);
  font-weight: 800;
  letter-spacing: 0.2em;
  margin-bottom: 0.5rem;
}
:root body > main:has(> div > h2) > div:first-child > p:first-child::after {
  content: "Pauline Gauthier · Caen";
  display: block;
  margin-top: 0.6rem;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--heading-color);
}
:root body > main:has(> div > h2) > div:first-child > a {
  grid-column: 1;
  grid-row: 3;
  margin-top: 1.4rem;
  background: transparent;             /* outlined pill, not base #111 */
  border: 2px solid var(--accent);
  border-radius: 40px;
  padding: 0.6rem 1.5rem;
  color: var(--accent-dark);
  transition: background 0.18s ease, color 0.18s ease;
}
:root body > main:has(> div > h2) > div:first-child > a:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ── Editor's Picks band: cards 2–4, tinted, 2 cols each (3 across) ── */
:root body > main:has(> div > h2) > div:nth-child(2),
:root body > main:has(> div > h2) > div:nth-child(3),
:root body > main:has(> div > h2) > div:nth-child(4) {
  grid-column: span 2;
  background: var(--primary-light);
  border-color: #DCE0EE;
}
:root body > main:has(> div > h2) > div:nth-child(2)::before {
  content: "Sélection de la semaine — à lire d'abord";
  position: absolute;
  bottom: calc(100% + 0.9rem);
  left: 0;
  /* Card 2 is the first of the three span-2 picks (cols 1-2); stretch the
     label across the whole 6-col row = 3×card + 2×column-gap(1.6rem) so the
     band and its hairline underline span the full width above the row (M2). */
  width: calc(300% + 3.2rem);
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-dark);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

/* ── Feature bands: full-width photo strips (article-cover.jpg) ──
   Card 5 opens the journal (CI-DESSOUS); last card closes it (VOIR TOUT).
   Each is promoted to a full-width row; its ::before is the photo band. */
:root body > main:has(> div > h2) > div:nth-child(5),
:root body > main:has(> div > h2) > div:last-child {
  grid-column: 1 / -1;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0 0 0.5rem;
  text-align: center;
  align-items: center;
}
:root body > main:has(> div > h2) > div:nth-child(5):hover,
:root body > main:has(> div > h2) > div:last-child:hover { transform: none; box-shadow: none; }

:root body > main:has(> div > h2) > div:nth-child(5)::before,
:root body > main:has(> div > h2) > div:last-child::before {
  display: flex;
  align-items: center;         /* M6 — centre the strip label vertically */
  justify-content: center;     /* M6 — centre the strip label horizontally */
  text-align: center;
  align-self: stretch;
  height: 210px;
  margin-bottom: 2rem;
  padding: 1.3rem 1.7rem;
  border-radius: 10px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0,0,0,.55);
}
:root body > main:has(> div > h2) > div:nth-child(5)::before {
  content: "CI-DESSOUS";
  background:
    linear-gradient(rgba(20,24,28,.55), rgba(20,24,28,.25)),
    url("/theme-assets/article-cover.jpg") center 30% / cover no-repeat;
}
:root body > main:has(> div > h2) > div:last-child::before {
  content: "VOIR TOUT";
  background:
    linear-gradient(rgba(46,26,44,.55), rgba(46,26,44,.25)),
    url("/theme-assets/article-cover.jpg") center 70% / cover no-repeat;
}
/* Feature card content — centered lead below the photo band */
:root body > main:has(> div > h2) > div:nth-child(5) > p:first-child,
:root body > main:has(> div > h2) > div:last-child > p:first-child {
  color: var(--accent-dark);
}
:root body > main:has(> div > h2) > div:nth-child(5) > h2,
:root body > main:has(> div > h2) > div:last-child > h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.12;
  max-width: 24ch;
  margin: 0 auto 0.6rem;
}
:root body > main:has(> div > h2) > div:nth-child(5) > h2 + p,
:root body > main:has(> div > h2) > div:last-child > h2 + p {
  font-size: 1.05rem;
  line-height: 1.65;
  max-width: 60ch;
  margin: 0 auto 1.2rem;
  flex: 0 0 auto;
  -webkit-line-clamp: 2;
}
:root body > main:has(> div > h2) > div:nth-child(5) > a,
:root body > main:has(> div > h2) > div:last-child > a {
  align-self: center;
  border: 2px solid var(--accent);
  border-radius: 40px;
  padding: 0.55rem 1.5rem;
  transition: background 0.18s ease, color 0.18s ease;
}
:root body > main:has(> div > h2) > div:nth-child(5) > a:hover,
:root body > main:has(> div > h2) > div:last-child > a:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ── Footer ─────────────────────────────────────────────── */
:root body > footer {
  background: var(--primary);
  color: rgba(255,255,255,0.76);
  text-align: center;
  padding: 2.4rem 1.5rem;
  font-size: 0.9rem;
  border-top: 3px solid var(--accent);
}
:root body > footer a { color: #fff; text-decoration: none; border-bottom: 1px solid var(--accent); }
:root body > footer a:hover { color: var(--accent-light); }

/* ── Article page ───────────────────────────────────────── */
:root body > main:has(> article) {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 2.8rem 1.5rem 4rem;
}
:root body > main:has(> article) > hgroup { margin-bottom: 1.4rem; }
:root body > main:has(> article) > hgroup h1 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3.1rem);
  line-height: 1.08;
  margin: 0 0 0.7rem;
}
:root body > main:has(> article) > hgroup time {
  display: block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-dark);
}
:root body > main:has(> article) > article > section img { width: 100%; margin: 0 0 1.8em; }

/* Article body: generous editorial measure */
:root body > main:has(> article) > article p {
  font-size: 1.06rem;
  line-height: 1.78;
  margin-bottom: 1.3em;
  max-width: 68ch;
}

/* Drop cap on the opening paragraph */
:root body > main:has(> article) > article > p:first-of-type::first-letter {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 600;
  font-size: 3.6rem;
  line-height: 0.78;
  float: left;
  padding: 0.35rem 0.55rem 0 0;
  color: var(--moment);            /* prune drop cap #2 */
}

/* Section headings with floral dinkus divider */
:root body > main:has(> article) > article h2 {
  font-family: var(--font-heading);
  font-size: 1.7rem;
  margin: 2.4rem 0 0.7rem;
}
:root body > main:has(> article) > article h2::before {
  content: "✿ ✿ ✿";
  display: block;
  text-align: center;
  color: var(--accent);
  font-size: 0.9rem;
  letter-spacing: 0.4em;
  margin: 0 0 1.6rem;
}
:root body > main:has(> article) > article h3 { font-family: var(--font-heading); font-size: 1.25rem; }

/* In-body links (internal + external + affiliate) — coral, never browser-blue.
   Full element path + no attribute filter so this beats any generic link rule. */
:root body > main:has(> article) > article a,
:root body > main:has(> article) > article p a,
:root body > main:has(> article) > article li a {
  color: var(--accent-dark);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}
:root body > main:has(> article) > article a:hover,
:root body > main:has(> article) > article p a:hover,
:root body > main:has(> article) > article li a:hover { color: var(--accent); }

/* Blockquote with hanging quote */
:root body > main:has(> article) > article blockquote {
  position: relative;
  padding: 1.2rem 1.4rem 1.2rem 3.2rem;
}
:root body > main:has(> article) > article blockquote::before {
  content: "\00201C";
  position: absolute;
  top: 0.05em;
  left: 0.55rem;
  font-family: var(--font-heading);
  font-size: 3.4rem;
  line-height: 1;
  color: var(--accent);
}

/* Related articles */
:root body > main:has(> article) > div {
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 2px solid var(--border);
}
:root body > main:has(> article) > div h3 { font-family: var(--font-heading); font-size: 1.2rem; margin-top: 0; }
:root body > main:has(> article) > div ul { list-style: none; padding: 0; }
:root body > main:has(> article) > div li { margin-bottom: 0.6rem; }
:root body > main:has(> article) > div a { color: var(--primary-dark); font-weight: 600; text-decoration: none; }
:root body > main:has(> article) > div a:hover { color: var(--accent-dark); }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 760px) {
  html { font-size: 16px; }

  :root body > div:first-child:has(h1) { padding: 3.2rem 1.2rem 2.6rem; }

  :root body > main:has(> div > h2) {
    grid-template-columns: 1fr;
    gap: 3rem 0;
    padding: 2rem 1.1rem 3rem;
  }
  :root body > main:has(> div > h2) > div,
  :root body > main:has(> div > h2) > div:first-child,
  :root body > main:has(> div > h2) > div:nth-child(2),
  :root body > main:has(> div > h2) > div:nth-child(3),
  :root body > main:has(> div > h2) > div:nth-child(4),
  :root body > main:has(> div > h2) > div:nth-child(5),
  :root body > main:has(> div > h2) > div:last-child { grid-column: 1 / -1; }

  :root body > main:has(> div > h2) > div:first-child {
    display: block;
    padding: 1.9rem 1.4rem 2rem;
  }
  :root body > main:has(> div > h2) > div:first-child > h2 { font-size: 1.95rem; }
  :root body > main:has(> div > h2) > div:first-child > h2 + p { margin-top: 0.9rem; }
  :root body > main:has(> div > h2) > div:first-child > p:first-child { margin-top: 1.4rem; }

  :root body > main:has(> div > h2) > div:nth-child(5)::before,
  :root body > main:has(> div > h2) > div:last-child::before { height: 150px; }

  :root body > main:has(> div > h2) > div:nth-child(2)::before {
    position: static;
    display: block;
    width: auto;              /* M2 — drop the desktop full-row width when stacked */
    white-space: normal;
    margin: 0 0 0.8rem;
  }
}


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


/* ═══ codex-refix iter=1 — M1 · M7 · S6 ══════════════════════════════════ */

/* M1 — guarantee a warm paper canvas; override the bold template's hardcoded
   body{background:#fff}. With the tokens now defined, the home body area under
   the masthead and the full article canvas resolve to --bg instead of the
   browser's stark-white default. (!important is used solely to beat the base
   theme's literal white body background, as permitted.) */
:root body { background-color: var(--bg) !important; }
:root body > main:has(> div > h2),
:root body > main:has(> article) { background-color: var(--bg) !important; }

/* M7 — the homepage's last <div> is the compact archive (a <ul> of title +
   date rows). Rebuild it as a boxed cream index that mirrors the journal cards
   above (same paper token, border, radius, shadow, hover) instead of the plain
   centred text rows it rendered as. The VOIR TOUT photo strip (::before on this
   same div) is preserved and now sits above the index. */
:root body > main:has(> div > h2) > div:last-child > ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 16px;
  width: 100%;
  max-width: 100%;
  margin: 0.6rem 0 0;
  padding: 0;
  text-align: left;
}
:root body > main:has(> div > h2) > div:last-child > ul > li {
  list-style: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
  padding: 18px 20px;
  line-height: 1.4;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
:root body > main:has(> div > h2) > div:last-child > ul > li:hover {
  box-shadow: 0 8px 22px rgba(78,90,140,0.14);
  transform: translateY(-2px);
}
:root body > main:has(> div > h2) > div:last-child > ul > li a {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;                /* small serif title stays open (M9) */
  line-height: 1.28;
  color: var(--heading-color);
  text-decoration: none;
}
:root body > main:has(> div > h2) > div:last-child > ul > li a:hover { color: var(--accent-dark); }
:root body > main:has(> div > h2) > div:last-child > ul > li span {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-dark);
}

/* S6 — give the article a personality anchor: a byline/persona line under the
   date meta (mirrors the homepage hero's "Pauline Gauthier · Caen"). */
:root body > main:has(> article) > hgroup::after {
  content: "Par Pauline Gauthier · Assistante maternelle à Caen";
  display: block;
  margin-top: 0.55rem;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--muted);
}


/* premium-upgrade v1 */
/* premium editorial upgrade — style=Racquet-moody overlay=40% grid=mixed 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;
}