*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,system-ui,sans-serif;line-height:1.7;color:#333;background:#fff}
.astro-pUlfV4PJ{max-width:780px;margin:0 auto;padding:0 20px}
header{background:#1a1a2e;color:#fff;padding:32px 0;margin-bottom:40px}
header h1{font-size:28px;margin-bottom:4px}
header p{opacity:.7;font-size:15px}
header .astro-JwQDZwG0{color:#fff;text-decoration:none;font-size:18px;font-weight:600}
.astro-FvVD0S4L{border-bottom:1px solid #eee;padding:24px 0}
.astro-FvVD0S4L h2{font-size:20px;margin-bottom:8px}
.astro-FvVD0S4L h2 a{color:#1a1a2e;text-decoration:none}
.astro-FvVD0S4L h2 a:hover{color:#e94560}
.astro-FvVD0S4L .date{font-size:13px;color:#999;margin-bottom:8px}
.astro-0T43c1Iy{color:#e94560;text-decoration:none;font-size:14px;font-weight:600}
.astro-gmhmqBvv{padding-bottom:60px}
.astro-gmhmqBvv h1{font-size:32px;margin-bottom:8px}
.astro-gmhmqBvv time{font-size:13px;color:#999;display:block;margin-bottom:24px}
.astro-gmhmqBvv h2{font-size:22px;margin:32px 0 12px}
.astro-gmhmqBvv h3{font-size:18px;margin:24px 0 8px}
.astro-gmhmqBvv p{margin-bottom:16px}
.astro-gmhmqBvv ul,.astro-gmhmqBvv ol{margin:0 0 16px 24px}
.astro-gmhmqBvv a{color:#e94560}
.astro-gmhmqBvv img{max-width:100%;height:auto;border-radius:8px;margin:16px 0}
footer{border-top:1px solid #eee;padding:24px 0;margin-top:40px;text-align:center;font-size:13px;color:#999}
footer a{color:#999}
.astro-WQwAVxfy{background:#f5f5f5;border-left:3px solid #999;padding:10px 14px;margin-bottom:20px;font-size:13px;color:#777;font-style:italic}
.astro-ZrSlRROx{background:#fef9e7;border:1px solid #f0c36d;padding:10px 14px;margin-top:20px;font-size:12px;color:#8a6d3b}
.astro-odHBteB4{font-size:13px;color:#999;margin:-16px 0 24px;font-style:italic}
.astro-JRJuDhzx{text-align:center;margin:0 0 20px}
.astro-HPDMxbYH{max-width:100%;height:auto;border-radius:6px}
.astro-aD0rtP1Y{margin-top:40px;padding-top:24px;border-top:1px solid #eee}
.astro-aD0rtP1Y h3{font-size:18px;margin-bottom:12px}
.astro-aD0rtP1Y ul{list-style:none;padding:0}
.astro-aD0rtP1Y li{padding:4px 0}
.astro-aD0rtP1Y a{color:#e94560;text-decoration:none}
.astro-T3CJ0iZj{padding:20px 0}
.astro-T3CJ0iZj ul{list-style:none;padding:0}
.astro-T3CJ0iZj li{padding:5px 0;font-size:15px}
.astro-T3CJ0iZj a{color:#1a1a2e;text-decoration:none}
.astro-T3CJ0iZj a:hover{color:#e94560}
/* === Theme === */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;500;600;700&family=Quicksand:wght@400;700&display=swap');
body{font-family:'Lato',sans-serif;color:#2D2926;background:#FDFBF7}
header{background:#1B4332;color:#fff}
header h1{font-family:'Quicksand',serif;color:#fff}
header p{color:rgba(255,255,255,.75)}
header a{color:#fff;text-decoration:none}
.astro-FvVD0S4L h2{font-family:'Quicksand',serif}
.astro-FvVD0S4L h2 a{color:#1B4332}
.astro-FvVD0S4L h2 a:hover{color:#FF8C42}
.astro-0T43c1Iy{color:#FF8C42}
.astro-gmhmqBvv h1{font-family:'Quicksand',serif}
.astro-gmhmqBvv h2{font-family:'Quicksand',serif}
.astro-gmhmqBvv a{color:#FF8C42}
.astro-gmhmqBvv img{border-radius:12px}
.affiliate-disclosure{border-radius:12px}
.ymyl-disclaimer{border-radius:12px}
/* === Custom === */
/* v.eff28f — layout revision */

/* rg-regime-fr — Thomas Vasseur · carnet de menus & batch-cooking léger, Strasbourg FR
   Palette: bleu-ardoise #34505E + moutarde-miel #C68A2E sur ivoire #FAF6EE
   Moment: sauge-potager #3D5A47 (deux touches — filet sous le wordmark, lettrine du billet)
   Fonts: Zilla Slab (titres) + Mulish (corps)
   Live build: ASTRO (astro-XXXX classes). Structure —
     HOME  header>div>h1+p · main>article ×14 · main>section (index compact)
     POST  header>div>a    · main>h1+time+article(+article>section note)+section (connexes)
   Home vs post: main:has(> article + article) = home ; main:has(> h1) = post.
   The deployed theme layer is a stale green/Playfair block from another build, so
   every rule carries a :root prefix (+ structural depth) to out-specify its .astro-* classes. */

/* ── Webfonts as @font-face (top @import is dropped once concatenated) ────── */
@font-face { font-family: 'Zilla Slab'; font-style: normal; font-weight: 400;
  font-display: swap; src: url(https://fonts.gstatic.com/s/zillaslab/v12/dFa6ZfeM_74wlPZtksIFajo6_V6LVlA.woff2) format('woff2'); }
@font-face { font-family: 'Zilla Slab'; font-style: normal; font-weight: 600;
  font-display: swap; src: url(https://fonts.gstatic.com/s/zillaslab/v12/dFa5ZfeM_74wlPZtksIFYuUe6HOpW3pwfa0.woff2) format('woff2'); }
@font-face { font-family: 'Zilla Slab'; font-style: normal; font-weight: 700;
  font-display: swap; src: url(https://fonts.gstatic.com/s/zillaslab/v12/dFa5ZfeM_74wlPZtksIFYoEf6HOpW3pwfa0.woff2) format('woff2'); }
@font-face { font-family: 'Zilla Slab'; font-style: italic; font-weight: 400;
  font-display: swap; src: url(https://fonts.gstatic.com/s/zillaslab/v12/dFa4ZfeM_74wlPZtksIFaj8K_1SMdFJ6dQ.woff2) format('woff2'); }
@font-face { font-family: 'Zilla Slab'; font-style: italic; font-weight: 600;
  font-display: swap; src: url(https://fonts.gstatic.com/s/zillaslab/v12/dFanZfeM_74wlPZtksIFaj8CIHCZWXB3X6_0fw.woff2) format('woff2'); }
@font-face { font-family: 'Mulish'; font-style: normal; font-weight: 300 800;
  font-display: swap; src: url(https://fonts.gstatic.com/s/mulish/v18/1Ptvg83HX_SGhgqk3wotYKNnBQ.woff2) format('woff2'); }
@font-face { font-family: 'Mulish'; font-style: italic; font-weight: 400;
  font-display: swap; src: url(https://fonts.gstatic.com/s/mulish/v18/1Ptwg83HX_SGhgqk2hAjQlW_mEuZ0FsSKeOfGZQ6DzNVwd6k.woff2) format('woff2'); }

/* ── Design tokens ─────────────────────────────────────────── */
:root {
  --color-primary:      #34505E;
  --color-accent:       #C68A2E;
  --color-bg:           #FAF6EE;
  --color-surface:      #F0E9DC;
  --color-paper:        #FBF7EF;   /* card face — warm, never pure white */
  --color-text:         #26211A;
  --color-muted:        #766F63;
  --color-border:       #DCD2C0;
  --color-link:         #2C4652;
  --color-link-hover:   #C68A2E;
  --color-header-bg:    #22333D;
  --color-header-text:  #F5EFE2;
  --color-footer-bg:    #1B262D;
  --color-footer-text:  #C9BFA9;
  --color-moment:       #3D5A47;   /* sauge-potager — deux emplois seulement */

  --font-heading:       'Zilla Slab', Georgia, serif;
  --font-body:          'Mulish', system-ui, sans-serif;

  --font-size-base:     17px;
  --font-size-sm:       14px;
  --line-height-body:   1.7;
  --line-height-heading: 1.2;
  --fw-heading:         600;
  --fw-body:            400;

  --border-radius:      8px;
  --sp:                 8px;
  --gap:                24px;       /* grille + colonnes */
  --max-w:              700px;
  --max-w-wide:         1060px;
}

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

:root body {
  font-family: var(--font-body);
  font-weight: var(--fw-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;
}

/* ── Base typography (fallback / static pages) ────────────── */
:root h1, :root h2, :root h3, :root h4 {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  line-height: var(--line-height-heading);
  color: var(--color-primary);
}
:root h1 { font-size: clamp(1.85rem, 4vw, 2.5rem); margin-bottom: calc(var(--sp) * 2); }
:root h2 { font-size: clamp(1.4rem, 3vw, 1.85rem); margin-top: calc(var(--sp) * 4); margin-bottom: calc(var(--sp) * 1.5); }
:root h3 { font-size: clamp(1.1rem, 2.5vw, 1.4rem); margin-top: calc(var(--sp) * 3); margin-bottom: var(--sp); }
:root h4 { font-size: 1.05rem; margin-top: calc(var(--sp) * 2); margin-bottom: var(--sp); }

:root p { max-width: 68ch; margin-bottom: calc(var(--sp) * 2); }

:root a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--color-link) 40%, transparent);
  transition: color .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .2s ease;
}
:root a:hover, :root a:focus-visible {
  color: var(--color-link-hover);
  text-decoration-color: var(--color-link-hover);
}

:root ul, :root ol { padding-left: calc(var(--sp) * 2.5); margin-bottom: calc(var(--sp) * 2); max-width: 66ch; }
:root li { margin-bottom: calc(var(--sp) * .9); }
:root li:last-child { margin-bottom: 0; }
:root li::marker { color: var(--color-accent); }

:root blockquote {
  border-left: 3px solid var(--color-accent);
  padding: calc(var(--sp) * 1.5) calc(var(--sp) * 2.5);
  margin: calc(var(--sp) * 3) 0;
  background-color: var(--color-surface);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  max-width: 66ch;
  font-style: italic;
  color: var(--color-primary);
}
:root blockquote p { margin-bottom: 0; max-width: none; }

/* ── Masthead — full-bleed photo band, serif-italic wordmark, manifesto ──── */
:root header {
  background:
    linear-gradient(158deg, rgba(34,51,61,.90) 0%, rgba(27,42,50,.82) 55%, rgba(20,31,37,.88) 100%),
    url("/theme-assets/backdrop.jpg") center 40% / cover no-repeat;
  color: var(--color-header-text);
  padding: calc(var(--sp) * 6) calc(var(--sp) * 2) calc(var(--sp) * 5);
  border-bottom: 3px solid var(--color-accent);
  margin-bottom: 0;
}
:root header > div { max-width: var(--max-w); }

/* kicker above the wordmark (home + post share the element) */
:root header > div::before {
  content: "LE CARNET DE CUISINE LÉGÈRE";
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: calc(var(--sp) * 1.5);
}

/* wordmark: <h1> on home, <a> on post — one serif-italic display voice */
:root header h1,
:root header > div > a {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 3.1rem);
  letter-spacing: .005em;
  line-height: 1.05;
  color: var(--color-header-text);
  text-decoration: none;
  display: inline-block;
}

/* moment #1 — sauge filet under the home wordmark */
:root header:has(h1) > div > h1::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  background: var(--color-moment);
  margin-top: calc(var(--sp) * 1.5);
}

/* manifesto line (home description) */
:root header p {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(.98rem, 1.6vw, 1.14rem);
  color: rgba(245,239,226,.85);
  max-width: 54ch;
  margin: calc(var(--sp) * 2) 0 0;
  line-height: 1.5;
}

/* =========================================================================
   HOMEPAGE — editorial grid : hero → picks → strip → journal → strip → index
   ========================================================================= */
:root main:has(> article + article) {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: var(--gap);
  row-gap: calc(var(--sp) * 4);
  align-items: stretch;
  max-width: var(--max-w-wide);
  margin: 0 auto;
  padding: calc(var(--sp) * 7) calc(var(--sp) * 2.5) calc(var(--sp) * 6);
}

/* ── Default journal card (items 5+ : two across, consistent treatment) ──── */
:root main:has(> article + article) > article {
  grid-column: span 3;
  display: flex;
  flex-direction: column;
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: calc(var(--sp) * 4) calc(var(--sp) * 4.5);
  margin: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
:root main:has(> article + article) > article:hover {
  border-color: var(--color-accent);
  box-shadow: 0 8px 22px rgba(52,80,94,.13);
  transform: translateY(-2px);
}
/* date → uppercase kicker */
:root main:has(> article + article) > article > p:first-of-type {
  order: -1;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--color-accent);
  max-width: none;
  margin: 0 0 calc(var(--sp) * 1.5);
}
:root main:has(> article + article) > article > h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.22;
  margin: 0 0 calc(var(--sp) * 1.5);
}
:root main:has(> article + article) > article > h2 > a {
  color: var(--color-primary);
  text-decoration: none;
}
:root main:has(> article + article) > article > h2 > a:hover { color: var(--color-accent); }
:root main:has(> article + article) > article > p {
  color: var(--color-muted);
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 64ch;
  margin: 0 0 calc(var(--sp) * 2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* CTA — HTML ships English "Read More →"; relabel in FR, no underline */
:root main:has(> article + article) > article > a {
  margin-top: auto;
  align-self: flex-start;
  font-size: 0;
  text-decoration: none;
}
:root main:has(> article + article) > article > a::before {
  content: "Lire la suite →";
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--color-accent);
}
:root main:has(> article + article) > article > a:hover::before { color: var(--color-primary); }

/* ── HERO (item 1) — the loud voice ─────────────────────────────────────── */
:root main:has(> article + article) > article:first-of-type {
  grid-column: 1 / -1;
  background: linear-gradient(180deg, var(--color-paper) 0%, var(--color-surface) 100%);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-primary);
  padding: calc(var(--sp) * 5) clamp(28px, 5vw, 60px) calc(var(--sp) * 4.5);
}
:root main:has(> article + article) > article:first-of-type:hover {
  transform: none;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
  border-color: var(--color-border);
  border-top-color: var(--color-primary);
}
/* "LE DERNIER BILLET" badge */
:root main:has(> article + article) > article:first-of-type > h2::before {
  content: "\2767  Le dernier billet";
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: calc(var(--sp) * 1.75);
}
:root main:has(> article + article) > article:first-of-type > h2 {
  font-size: clamp(2rem, 4.4vw, 3rem);
  line-height: 1.08;
  margin-bottom: calc(var(--sp) * 2);
  max-width: 22ch;
}
/* byline row (date <p> gains "Par Thomas · Strasbourg ·") */
:root main:has(> article + article) > article:first-of-type > p:first-of-type {
  font-size: 12.5px;
  margin-bottom: calc(var(--sp) * 2.5);
}
:root main:has(> article + article) > article:first-of-type > p:first-of-type::before {
  content: "Par Thomas · Strasbourg · ";
}
/* hero excerpt — serif, roomy, drop cap */
:root main:has(> article + article) > article:first-of-type > p:nth-of-type(2) {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.5;
  color: var(--color-text);
  max-width: 60ch;
  -webkit-line-clamp: unset;
  display: block;
  overflow: visible;
}
/* moment #2 — sauge lettrine */
:root main:has(> article + article) > article:first-of-type > p:nth-of-type(2)::first-letter {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 3.4em;
  line-height: .72;
  float: left;
  margin: .06em .12em 0 0;
  color: var(--color-moment);
}
/* hero CTA → outlined pill */
:root main:has(> article + article) > article:first-of-type > a { margin-top: calc(var(--sp) * 2); }
:root main:has(> article + article) > article:first-of-type > a::before {
  content: "Lire le billet →";
  display: inline-block;
  padding: calc(var(--sp) * 1.25) calc(var(--sp) * 2.75);
  border: 1.5px solid var(--color-accent);
  border-radius: 999px;
  color: var(--color-accent);
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
:root main:has(> article + article) > article:first-of-type > a:hover::before {
  background: var(--color-accent);
  color: var(--color-paper);
}

/* ── EDITOR'S PICKS band (items 2–4 : three across, label above) ────────── */
:root main:has(> article + article) > article:nth-of-type(2),
:root main:has(> article + article) > article:nth-of-type(3),
:root main:has(> article + article) > article:nth-of-type(4) {
  grid-column: span 2;
  margin-top: calc(var(--sp) * 4.5);
  background: var(--color-surface);
}
:root main:has(> article + article) > article:nth-of-type(2) { position: relative; }
/* full-row label above the band */
:root main:has(> article + article) > article:nth-of-type(2)::before {
  content: "À GOÛTER EN PREMIER";
  position: absolute;
  left: 2px;
  bottom: calc(100% + var(--sp) * 1.75);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-primary);
  white-space: nowrap;
}
/* hairline drawn across the row */
:root main:has(> article + article) > article:nth-of-type(2)::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(-1 * var(--sp) * 1.75);
  width: calc(300% + var(--gap) * 2);
  border-top: 1px solid var(--color-border);
  pointer-events: none;
}
:root main:has(> article + article) > article:nth-of-type(2) > h2,
:root main:has(> article + article) > article:nth-of-type(3) > h2,
:root main:has(> article + article) > article:nth-of-type(4) > h2 { font-size: 1.18rem; }

/* ── STRIP 1 — photo band between picks and journal ─────────────────────── */
:root main:has(> article + article) > article:nth-of-type(5),
:root main:has(> article + article) > article:nth-of-type(6) { margin-top: calc(230px + var(--sp) * 4); }
:root main:has(> article + article) > article:nth-of-type(5) { position: relative; }
:root main:has(> article + article) > article:nth-of-type(5)::before {
  content: "PAR ORDRE D'ÉCRITURE";
  position: absolute;
  left: 0;
  bottom: calc(100% + var(--sp) * 4);
  width: calc(200% + var(--gap));
  height: 230px;
  background:
    linear-gradient(rgba(20,24,28,.55), rgba(20,24,28,.28)),
    url("/theme-assets/feature-photo.jpg") center 30% / cover no-repeat;
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: #F5EFE2;
  text-shadow: 0 1px 5px rgba(0,0,0,.55);
}

/* ── INDEX / STRIP 2 — the flagged plain-link block, redesigned ─────────── */
:root main:has(> article + article) > section {
  grid-column: 1 / -1;
  margin-top: calc(var(--sp) * 5);
  padding: 0;
  border: 0;
}
/* Strip 2 photo band = section header */
:root main:has(> article + article) > section::before {
  content: "VOIR TOUT";
  display: flex;
  align-items: center;
  justify-content: center;
  height: 220px;
  margin-bottom: calc(var(--sp) * 4);
  background:
    linear-gradient(rgba(20,24,28,.55), rgba(20,24,28,.28)),
    url("/theme-assets/feature-photo.jpg") center 70% / cover no-repeat;
  border-radius: var(--border-radius);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: #F5EFE2;
  text-shadow: 0 1px 5px rgba(0,0,0,.55);
}
:root main:has(> article + article) > section > ul {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 16px;
  align-items: stretch;
}
:root main:has(> article + article) > section > ul > li {
  break-inside: avoid;
  padding: 0;
  margin: 0;
  border-bottom: 0;
}
/* tail cards inherit the journal-card system: cream face, hairline, radius, shadow, hover lift */
:root main:has(> article + article) > section > ul > li > a {
  display: block;
  height: 100%;
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
  padding: calc(var(--sp) * 2.25) calc(var(--sp) * 2.5);
  color: var(--color-primary);
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.3;
}
:root main:has(> article + article) > section > ul > li > a::before { content: none; }
:root main:has(> article + article) > section > ul > li > a:hover {
  border-color: var(--color-accent);
  box-shadow: 0 6px 18px rgba(52,80,94,.13);
  color: var(--color-accent);
  transform: translateY(-2px);
}

/* =========================================================================
   ARTICLE PAGE
   ========================================================================= */
:root main:has(> h1) {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: calc(var(--sp) * 5) calc(var(--sp) * 2.5) calc(var(--sp) * 7);
}
:root main:has(> h1) > h1 {
  font-size: clamp(2rem, 4.5vw, 2.9rem);
  line-height: 1.12;
  margin: calc(var(--sp) * 1.5) 0 calc(var(--sp) * 1.5);
  max-width: 22ch;
}
:root main:has(> h1) > time {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: calc(var(--sp) * 4);
}
:root main:has(> h1) > time::before { content: "Par Thomas · "; color: var(--color-accent); }

/* body measure + rhythm */
:root main:has(> h1) > article > p {
  font-size: 18.5px;
  line-height: 1.78;
  max-width: 66ch;
  margin: 0 0 calc(var(--sp) * 2.5);
  color: var(--color-text);
}
:root main:has(> h1) > article > h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  color: var(--color-primary);
  margin: calc(var(--sp) * 5) 0 calc(var(--sp) * 2);
}
/* dinkus signature above each section heading */
:root main:has(> h1) > article > h2::before {
  content: "\2767 \2767 \2767";
  display: block;
  font-size: 1rem;
  color: var(--color-accent);
  letter-spacing: .5em;
  margin-bottom: calc(var(--sp) * 2);
  opacity: .85;
}
:root main:has(> h1) > article > h3 {
  font-family: var(--font-heading);
  color: var(--color-primary);
  margin: calc(var(--sp) * 4) 0 var(--sp);
}
:root main:has(> h1) > article img { border-radius: var(--border-radius); }

/* body links + inline recommendation links */
:root main:has(> h1) > article a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--color-link) 40%, transparent);
}
:root main:has(> h1) > article a:hover { color: var(--color-accent); text-decoration-color: var(--color-accent); }
/* affiliate CTA — pill chip, differentiated from inline prose links (M10) */
:root main:has(> h1) > article a[href^="/rec/"] {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .92em;
  letter-spacing: .02em;
  line-height: 1.25;
  color: var(--color-header-text);
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  padding: .34em .95em;
  margin: .1em .12em;
  text-decoration: none;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
:root main:has(> h1) > article a[href^="/rec/"]:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-header-text);
  text-decoration: none;
}

/* hanging opening quote on blockquotes */
:root main:has(> h1) blockquote { position: relative; padding-top: calc(var(--sp) * 2.5); }
:root main:has(> h1) blockquote::before {
  content: "\201C";
  position: absolute;
  top: -.12em;
  left: .28em;
  font-family: var(--font-heading);
  font-size: 3rem;
  line-height: 1;
  color: var(--color-accent);
  opacity: .55;
}

/* disclosure / note box inside the article (retoned to the miel palette) */
:root main:has(> h1) > article > section {
  background: #FBF3E2;
  border: 1px solid var(--color-accent);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  padding: calc(var(--sp) * 1.75) calc(var(--sp) * 2.25);
  margin-top: calc(var(--sp) * 3);
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.6;
}

/* "Articles connexes" → carded, hoverable links (was bare underlined text) */
:root main:has(> h1) > section {
  border-top: 2px solid var(--color-primary);
  margin-top: calc(var(--sp) * 7);
  padding-top: calc(var(--sp) * 3.5);
}
:root main:has(> h1) > section > h3 {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: calc(var(--sp) * 2.5);
}
:root main:has(> h1) > section > ul {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--gap);
}
:root main:has(> h1) > section > ul > li { margin: 0; padding: 0; }
:root main:has(> h1) > section > ul > li > a {
  display: block;
  height: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: calc(var(--sp) * 2.25);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
:root main:has(> h1) > section > ul > li > a:hover {
  border-color: var(--color-accent);
  box-shadow: 0 6px 18px rgba(52,80,94,.13);
  color: var(--color-accent);
  transform: translateY(-2px);
}

/* ── Footer ───────────────────────────────────────────────── */
:root footer {
  background-color: var(--color-footer-bg);
  color: var(--color-footer-text);
  padding: calc(var(--sp) * 5) calc(var(--sp) * 2);
  font-size: var(--font-size-sm);
  margin-top: calc(var(--sp) * 7);
  border-top: 3px solid var(--color-accent);
  text-align: center;
}
:root footer > div { max-width: var(--max-w); }
:root footer p { max-width: none; margin-bottom: var(--sp); }
:root footer a { color: var(--color-accent); text-decoration: none; }
:root footer a:hover { color: var(--color-bg); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 860px) {
  :root main:has(> article + article) {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: calc(var(--sp) * 3);
    padding-top: calc(var(--sp) * 4);
  }
  :root main:has(> article + article) > article,
  :root main:has(> article + article) > article:first-of-type,
  :root main:has(> article + article) > article:nth-of-type(2),
  :root main:has(> article + article) > article:nth-of-type(3),
  :root main:has(> article + article) > article:nth-of-type(4),
  :root main:has(> article + article) > article:nth-of-type(5),
  :root main:has(> article + article) > article:nth-of-type(6) {
    grid-column: 1 / -1;
    margin-top: 0;
  }
  /* picks label: full-width band ABOVE the card, not tucked inside it (M2) */
  :root main:has(> article + article) > article:nth-of-type(2) {
    margin-top: calc(var(--sp) * 5.5);
  }
  :root main:has(> article + article) > article:nth-of-type(2)::after { display: none; }
  :root main:has(> article + article) > article:nth-of-type(2)::before {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + var(--sp) * 1.25);
    width: 100%;
    white-space: normal;
    padding-bottom: var(--sp);
    border-bottom: 1px solid var(--color-border);
  }
  /* strip 1: standalone full-width photo band between picks and journal (M6) */
  :root main:has(> article + article) > article:nth-of-type(5) {
    margin-top: calc(190px + var(--sp) * 3);
  }
  :root main:has(> article + article) > article:nth-of-type(5)::before {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + var(--sp) * 2);
    width: 100%;
    height: 180px;
    margin-bottom: 0;
  }
}

@media (max-width: 600px) {
  :root body { font-size: 16px; }
  :root main:has(> article + article) > article { padding: calc(var(--sp) * 3) calc(var(--sp) * 3); }
  :root main:has(> article + article) > section > ul { columns: 1; }
  :root main:has(> h1) > article > p { font-size: 17.5px; }
  :root blockquote { padding: var(--sp) calc(var(--sp) * 1.5); }
}


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


/* premium-upgrade v1 */
/* premium editorial upgrade — style=Substack-modern overlay=55% grid=mixed scale=balanced family=articles-section */

/* ── Archive strip above <section> tail (overlay 55%) ── */
:root main:not(:has(> h1)) > section {
  position: relative;
  padding-top: 260px;
  grid-column: 1 / -1;
}
:root main:not(:has(> h1)) > section::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 240px;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%),
    url("/theme-assets/premium-hero-strip-2.webp") center 45% / cover no-repeat;
  border-radius: 8px;
}


/* ── 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)) > article: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)) > article: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)) > article: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)) > article: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)) > article: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)) > article: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)) > article: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)) > article: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: full-ROW band above the featured card (was a narrow 1-of-6 grid cell) ──
   grid-column:1/-1 makes the ::before span the whole 6-col row so the label reads
   as a full-width uppercase band with a row-spanning hairline underline, not a
   short centered ornament. Tokens retuned to the site palette/serif for coherence. */
:root main:not(:has(> h1))::before {
  content: "À LA UNE" !important;
  display: block !important;
  grid-column: 1 / -1;
  font-family: var(--font-heading), 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(--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;
}


/* repair iter=1 — M7: keep the "VOIR TOUT" archive-strip in normal flow ──────
   premium-upgrade v1 set the tail section::before to position:absolute. The
   original higher-specificity rule still supplies its "VOIR TOUT" content, photo
   and 220px height, but position was only declared by v1 — so the strip floated
   ABSOLUTELY over the top of the boxed 3-col archive grid, hiding the first two
   rows of cream cards. Only the bottom text-line of row 3 peeked out below the
   strip, reading as three unboxed plain-text links. Restoring static flow lets
   the strip push the entire boxed grid below it (fixes home-desktop + home-mobile).
   Same selector + specificity as v1, later in source order → wins for `position`. */
:root main:not(:has(> h1)) > section::before { position: static; }