*{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}
.astro-0BEcHydO{max-width:900px;margin:0 auto;padding:0 28px}
.astro-Xe8XXc0c{background:#111;color:#fff;padding:64px 0;margin-bottom:48px}
.astro-Xe8XXc0c h1{font-size:42px;font-weight:800;letter-spacing:-1px;margin-bottom:8px}
.astro-Xe8XXc0c p{font-size:18px;opacity:.7}
.astro-Xe8XXc0c a{color:#fff;text-decoration:none;font-size:22px;font-weight:800}
.astro-BxdbWKK8{padding:0}
.astro-Pl5iyxgL{padding:32px 0;border-left:4px solid #111;padding-left:24px;margin-bottom:28px}
.astro-Pl5iyxgL h2{font-size:24px;font-weight:700;margin-bottom:6px}
.astro-Pl5iyxgL h2 a{color:#111;text-decoration:none}
.astro-Pl5iyxgL h2 a:hover{text-decoration:underline}
.astro-Pl5iyxgL .astro-ujWktNKT{font-size:12px;font-weight:600;text-transform:uppercase;color:#888;letter-spacing:1px;margin-bottom:8px}
.astro-Pl5iyxgL p{font-size:15px;color:#444;margin-bottom:10px}
.astro-GTtxAsCx{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}
.astro-GTtxAsCx:hover{background:#333}
.astro-YE8txTfI{padding-bottom:60px}
.astro-YE8txTfI h1{font-size:38px;font-weight:800;letter-spacing:-1px;margin-bottom:10px}
.astro-YE8txTfI time{font-size:12px;font-weight:600;text-transform:uppercase;color:#888;letter-spacing:1px;display:block;margin-bottom:28px}
.astro-YE8txTfI h2{font-size:26px;font-weight:700;margin:40px 0 14px}
.astro-YE8txTfI h3{font-size:20px;font-weight:700;margin:32px 0 10px}
.astro-YE8txTfI p{margin-bottom:18px;font-size:17px}
.astro-YE8txTfI ul,.astro-YE8txTfI ol{margin:0 0 18px 24px}
.astro-YE8txTfI a{color:#111;font-weight:600;text-decoration:underline}
.astro-YE8txTfI img{max-width:100%;height:auto;margin:20px 0}
.astro-VGyznIMP{background:#111;color:#888;padding:28px 0;margin-top:48px;text-align:center;font-size:12px}
.astro-VGyznIMP a{color:#888;text-decoration:none}
.astro-uqVZevYL{background:#222;color:#aaa;padding:14px 20px;margin-bottom:24px;font-size:13px;font-style:italic}
.astro-TULCaBqD{background:#1a1a1a;color:#888;padding:14px 20px;margin-top:32px;font-size:12px;border-top:3px solid #444}
.astro-eOHbYlaB{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}
.astro-LA620WQF{margin:0 0 24px}
.astro-C0s6IiGa{width:100%;height:auto;border-radius:0}
.astro-e4JZnrCJ{border-left:4px solid #111;padding-left:24px;margin-top:48px}
.astro-e4JZnrCJ h3{font-size:18px;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px}
.astro-e4JZnrCJ ul{list-style:none;padding:0}
.astro-e4JZnrCJ li{padding:6px 0}
.astro-e4JZnrCJ a{color:#111;text-decoration:underline;font-weight:600}
.astro-aRyEfPkV{border-left:4px solid #ddd;padding-left:24px;margin-top:36px}
.astro-aRyEfPkV ul{list-style:none;padding:0}
.astro-aRyEfPkV li{padding:6px 0;font-size:16px}
.astro-aRyEfPkV a{color:#111;text-decoration:none;font-weight:600}
.astro-aRyEfPkV a:hover{text-decoration:underline}
.astro-aRyEfPkV .astro-ujWktNKT{margin:0 0 0 8px}
/* === Theme === */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Syne:wght@400;700&display=swap');
body{font-family:'Inter',sans-serif;color:#111827;background:#F9FAFB}
.astro-Xe8XXc0c{background:#1E1E26;color:#fff}
.astro-Xe8XXc0c h1{font-family:'Syne',serif;color:#fff}
.astro-Xe8XXc0c p{color:rgba(255,255,255,.75)}
.astro-Xe8XXc0c a{color:#fff;text-decoration:none}
.card h2{font-family:'Syne',serif}
.card h2 a{color:#1E1E26}
.card h2 a:hover{color:#FF5F00}
.read-more{color:#FF5F00}
.article-content h1{font-family:'Syne',serif}
.article-content h2{font-family:'Syne',serif}
.article-content a{color:#FF5F00}
.article-content img{border-radius:8px}
.affiliate-disclosure{border-radius:8px}
.ymyl-disclaimer{border-radius:8px}
/* === Custom === */
/* v.f1caaf — layout revision */
/* mu-music-fr — TonJuste — Hugo Dubois, Lille
   Beatmaking maison, rythmes afro-caribéens.
   Editorial signature pass. The deployed Astro "bold" layout uses stable
   scoped hashes (.astro-Xe8XXc0c masthead, .astro-Pl5iyxgL cards, etc.),
   but to stay robust this revision drives everything from STRUCTURAL
   selectors: body>div:first-child (masthead), main:not(:has(>article))
   (homepage), main:has(>article) (article page), footer:last-of-type.
   The [class] attribute selector is used only to out-weight the base
   layout.css class rules without naming an obfuscatable hash.
   Voice: Fraunces (serif display, italic) + Newsreader (serif body)
   + Archivo (tracked sans meta). Palette: teal-nuit + mangue on warm
   paper, with #8C4A00 (rhum brûlé) as the single moment color. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,600&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=Archivo:wght@600;700&display=swap');

/* ── Variables ─────────────────────────────────────────── */
:root {
  --primary:        #17323A;   /* teal nuit */
  --primary-dark:   #0D1F24;
  --primary-light:  #E8F1F0;
  --accent:         #F2762B;   /* mangue */
  --accent-dark:    #C4591A;
  --accent-light:   #FDEADB;
  --moment:         #8C4A00;   /* rhum brûlé — used twice, never scattered */
  --bg:             #F4EEDF;   /* warm paper page */
  --surface:        #FBF7EF;   /* card paper, lifts off page */
  --paper-hero:     #F7F1E4;
  --fg:             #201C18;
  --muted:          #6B6058;
  --heading:        #12262C;
  --hair:           rgba(23, 50, 58, 0.13);
  --r:              10px;
  --r-sm:           7px;
  --max-prose:      66ch;
  --font-display:   'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:      'Newsreader', Georgia, serif;
  --font-meta:      'Archivo', system-ui, -apple-system, sans-serif;
}

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

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

body {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
  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; }

::selection { background-color: rgba(242, 118, 43, 0.24); color: var(--fg); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--heading);
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.01em;
}

a { color: var(--accent-dark); text-underline-offset: 3px; transition: color .18s ease; }
a:hover { color: var(--accent); }

/* ════════════════════════════════════════════════════════
   MASTHEAD  (body > div:first-child — home: h1 + tagline;
   article: wordmark link). Photo band + teal overlay.
   ════════════════════════════════════════════════════════ */
body > div:first-child {
  background:
    linear-gradient(150deg, rgba(13,31,36,.90) 0%, rgba(23,50,58,.74) 55%, rgba(23,50,58,.60) 100%),
    url("/theme-assets/header-bg.jpg") center 42% / cover no-repeat,
    var(--primary-dark);
  color: #F6EEDF;
  padding: 4.7rem 0 4.2rem;
  margin-bottom: 3.4rem;
  border-bottom: 3px solid var(--accent);
}

body > div:first-child > div { padding-left: 28px; padding-right: 28px; }

/* kicker above the wordmark */
body > div:first-child > div::before {
  content: "Le carnet beatmaking · Lille";
  display: block;
  font-family: var(--font-meta);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: 12px;
  color: var(--accent);
  margin-bottom: 1rem;
}

/* wordmark — home <h1> and article <a> */
body > div:first-child h1,
body > div:first-child > div > a {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 3.15rem;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: #FBF3E6;
  margin: 0;
  text-decoration: none;
  display: inline-block;
}
body > div:first-child > div > a:hover { color: #fff; }

/* manifesto tagline (home only) */
body > div:first-child p {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.12rem;
  line-height: 1.55;
  color: rgba(246, 238, 223, .82);
  max-width: 40rem;
  margin: 1rem 0 0;
}

/* step-sequencer / equalizer signature motif */
body > div:first-child > div::after {
  content: "";
  display: block;
  width: 132px;
  height: 15px;
  margin-top: 1.5rem;
  background: repeating-linear-gradient(90deg,
    var(--accent) 0 5px, transparent 5px 11px);
  opacity: .92;
  border-radius: 1px;
}

/* ════════════════════════════════════════════════════════
   HOMEPAGE  (main without a direct <article> child)
   Grid: hero full width → journal 2-col → "VOIR TOUT" strip
   ════════════════════════════════════════════════════════ */
main[class]:not(:has(> article)) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.4rem 2rem;
  align-items: stretch;
  max-width: 960px;
  margin: 0 auto 4rem;
  padding: 0 28px;
}

/* base card treatment (journal cards) */
main[class]:not(:has(> article)) > div[class] {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-left: 4px solid var(--accent);
  border-radius: var(--r);
  box-shadow: 0 1px 4px rgba(23, 50, 58, .05);
  padding: 30px 34px 32px;
  margin: 0;
  transition: box-shadow .2s ease, transform .2s ease;
}
main[class]:not(:has(> article)) > div[class]:hover {
  box-shadow: 0 10px 30px rgba(23, 50, 58, .12);
  transform: translateY(-3px);
}

/* card date → tracked mango kicker */
main[class]:not(:has(> article)) > div[class] > p:first-of-type {
  font-family: var(--font-meta);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--accent-dark);
  margin: 0 0 .7rem;
}

/* card title */
main[class]:not(:has(> article)) > div[class] > h2 {
  font-family: var(--font-display);
  font-size: 1.36rem;
  font-weight: 600;
  line-height: 1.22;
  margin: 0 0 .6rem;
}
main[class]:not(:has(> article)) > div[class] > h2 > a {
  color: var(--heading);
  text-decoration: none;
}
main[class]:not(:has(> article)) > div[class] > h2 > a:hover { color: var(--accent-dark); }

/* card excerpt — clamped to keep row heights even */
main[class]:not(:has(> article)) > div[class] > p:last-of-type {
  font-size: .98rem;
  line-height: 1.62;
  color: var(--muted);
  margin: 0 0 1.3rem;
  max-width: 60ch;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* CTA — outlined mango pill, French label swapped in */
main[class]:not(:has(> article)) > div[class] > a {
  margin-top: auto;
  align-self: flex-start;
  font-size: 0;
  line-height: 1;
  background: var(--surface);
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  padding: .55rem 1.2rem;
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
main[class]:not(:has(> article)) > div[class] > a::before {
  content: "Lire \2192";
  font-family: var(--font-meta);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 12px;
  color: var(--accent-dark);
}
main[class]:not(:has(> article)) > div[class] > a:hover { background: var(--accent-light); }

/* ── HERO (first card, full width) ──────────────────────── */
main[class]:not(:has(> article)) > div[class]:first-child {
  grid-column: 1 / -1;
  position: relative;
  overflow: visible;   /* M4b: let the floating "Dernier essai" pill cross the top edge */
  background: var(--paper-hero);
  border: 1px solid var(--hair);
  border-left: 6px solid var(--accent);
  border-radius: var(--r);
  box-shadow: 0 4px 22px rgba(23, 50, 58, .09);
  padding: 46px 52px 52px;
}
main[class]:not(:has(> article)) > div[class]:first-child:hover { transform: none; }

/* "Dernier essai" badge — floats half-crossing the hero card's TOP edge (M4b) */
main[class]:not(:has(> article)) > div[class]:first-child::before {
  content: "\25C6  Dernier essai";
  position: absolute;
  top: 0;
  left: 44px;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-block;
  font-family: var(--font-meta);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 11.5px;
  color: var(--accent-dark);
  background: var(--accent-light);
  border: 1px solid rgba(242, 118, 43, .30);
  border-radius: 999px;
  padding: .35rem .85rem;
  margin: 0;
}

/* hero byline (reuse the date line) */
main[class]:not(:has(> article)) > div[class]:first-child > p:first-of-type {
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--muted);
  margin-bottom: 1rem;
}
main[class]:not(:has(> article)) > div[class]:first-child > p:first-of-type::before {
  content: "Par Hugo · Lille — ";
  color: var(--accent-dark);
}

/* hero title — the loud voice */
main[class]:not(:has(> article)) > div[class]:first-child > h2 {
  font-size: clamp(2.2rem, 5vw, 3rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1.06;
  letter-spacing: -0.02em;
  max-width: 16ch;
  margin-bottom: 1.1rem;
}

/* hero excerpt + drop cap (moment color #1) */
main[class]:not(:has(> article)) > div[class]:first-child > p:last-of-type {
  font-size: 1.24rem;
  line-height: 1.5;
  color: var(--fg);
  max-width: 54ch;
  -webkit-line-clamp: unset;
  display: block;
  margin-bottom: 1.7rem;
}
main[class]:not(:has(> article)) > div[class]:first-child > p:last-of-type::first-letter {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.3rem;
  line-height: .82;
  float: left;
  margin: .32rem .55rem 0 0;
  color: var(--moment);
}

/* hero CTA — filled mango pill */
main[class]:not(:has(> article)) > div[class]:first-child > a {
  margin-top: 0;
  background: var(--accent);
  border-color: var(--accent);
  padding: .72rem 1.7rem;
}
main[class]:not(:has(> article)) > div[class]:first-child > a::before {
  content: "Lire l\2019essai \2192";
  color: #FBF3E6;
  font-size: 13px;
}
main[class]:not(:has(> article)) > div[class]:first-child > a:hover { background: var(--accent-dark); }

/* STRIP 1 — photo band as base of hero ("LE CARNET"), full-bleed */
main[class]:not(:has(> article)) > div[class]:first-child::after {
  content: "Le Carnet";
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 40px -52px -52px;
  height: 178px;
  border-radius: 0 0 var(--r) var(--r);   /* card is overflow:visible now — round the band's own bottom corners */
  font-family: var(--font-meta);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .32em;
  font-size: 13px;
  color: #F6EEDF;
  text-shadow: 0 1px 6px rgba(0,0,0,.55);
  background:
    linear-gradient(rgba(20,24,28,.55), rgba(20,24,28,.28)),
    url("/theme-assets/story-bg.jpg") center 30% / cover no-repeat;
}

/* STRIP 2 — "VOIR TOUT" band before footer (grid item, full width) */
main[class]:not(:has(> article))::after {
  content: "Voir Tout";
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 210px;
  border-radius: var(--r);
  overflow: hidden;
  font-family: var(--font-meta);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .34em;
  font-size: 13.5px;
  color: #F6EEDF;
  text-shadow: 0 1px 6px rgba(0,0,0,.55);
  background:
    linear-gradient(rgba(20,24,28,.58), rgba(20,24,28,.30)),
    url("/theme-assets/story-bg.jpg") center 70% / cover no-repeat;
}

/* ════════════════════════════════════════════════════════
   ARTICLE PAGE  (main with a direct <article> child)
   ════════════════════════════════════════════════════════ */
main[class]:has(> article) {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 28px 4rem;
}

/* title (may live in <hgroup> outside <article>) + date */
main[class]:has(> article) h1 {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5.2vw, 3.05rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 2.4rem 0 .5rem;
}
main[class]:has(> article) time {
  display: block;
  font-family: var(--font-meta);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 12px;
  color: var(--accent-dark);
  margin-bottom: 2.2rem;
}
/* S6 — byline / location personality anchor ahead of the date */
main[class]:has(> article) time::before {
  content: "Par Hugo Dubois \00B7 Lille \2014 ";
  color: var(--primary);
}

/* body */
main[class]:has(> article) article > p,
main[class]:has(> article) article section > p,
main[class]:has(> article) article li {
  font-size: 1.18rem;
  line-height: 1.78;
  color: var(--fg);
  max-width: var(--max-prose);
}
main[class]:has(> article) article > p,
main[class]:has(> article) article section > p { margin: 0 0 1.4rem; }

/* first-paragraph drop cap (moment color #2) */
main[class]:has(> article) article > p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.6rem;
  line-height: .8;
  float: left;
  margin: .3rem .6rem 0 0;
  color: var(--moment);
}

/* sub-headings with a small percussion dinkus */
main[class]:has(> article) article h2 {
  font-family: var(--font-display);
  font-size: 1.72rem;
  font-weight: 700;
  line-height: 1.18;
  margin: 2.7rem 0 .9rem;
}
main[class]:has(> article) article h2::before {
  content: "\266A \266A \266A";
  display: block;
  font-size: .82rem;
  letter-spacing: .35em;
  color: var(--accent);
  margin-bottom: .7rem;
}
main[class]:has(> article) article h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  margin: 2rem 0 .6rem;
}

/* images */
main[class]:has(> article) article img {
  width: 100%;
  border-radius: var(--r);
  margin: 2rem 0;
  box-shadow: 0 6px 24px rgba(23, 50, 58, .12);
}

/* body links — internal quiet, external as a clear affordance.
   External rule carries same path + attribute → out-weights body rule
   (RULE J), so its color never gets shadowed. */
main[class]:has(> article) article a {
  color: var(--accent-dark);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(242, 118, 43, .5);
}
main[class]:has(> article) article a:hover { color: var(--accent); }
main[class]:has(> article) article a[href^="http"] {
  color: var(--accent-dark);
  font-weight: 600;
  text-decoration-color: var(--accent);
}
main[class]:has(> article) article a[href^="http"]::after {
  content: " \2197";
  font-family: var(--font-meta);
  font-size: .82em;
}

/* blockquote — hanging quote */
main[class]:has(> article) article blockquote {
  position: relative;
  max-width: var(--max-prose);
  margin: 2rem 0;
  padding: .4rem 0 .4rem 2.2rem;
  border-left: 3px solid var(--accent);
  font-style: italic;
  font-size: 1.24rem;
  line-height: 1.55;
  color: var(--heading);
}
main[class]:has(> article) article blockquote::before {
  content: "\201C";
  position: absolute;
  left: .1rem;
  top: -.2rem;
  font-family: var(--font-display);
  font-size: 2.6rem;
  color: var(--accent);
  line-height: 1;
}
main[class]:has(> article) article blockquote p { max-width: none; margin: 0; font-size: inherit; }

/* numbered steps — the weekend walkthrough */
main[class]:has(> article) article ol {
  counter-reset: steps;
  list-style: none;
  padding-left: 0;
  max-width: var(--max-prose);
  margin: 1.4rem 0;
}
main[class]:has(> article) article ol > li {
  counter-increment: steps;
  position: relative;
  padding-left: 3.1em;
  margin-bottom: 1em;
}
main[class]:has(> article) article ol > li::before {
  content: counter(steps);
  position: absolute;
  left: 0;
  top: .05em;
  width: 2.1em;
  height: 2.1em;
  background: var(--accent);
  color: #FBF3E6;
  font-family: var(--font-meta);
  font-weight: 700;
  font-size: .82em;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
main[class]:has(> article) article ul { padding-left: 1.3em; }
main[class]:has(> article) article strong { font-weight: 600; color: var(--heading); }

/* ════════════════════════════════════════════════════════
   FOOTER  (body > footer:last-of-type)
   ════════════════════════════════════════════════════════ */
body > footer:last-of-type {
  background: var(--primary-dark);
  color: rgba(246, 238, 223, .72);
  padding: 2.6rem 28px;
  margin-top: 3.5rem;
  text-align: center;
  font-family: var(--font-meta);
  font-size: 13px;
  letter-spacing: .04em;
  border-top: 3px solid var(--accent);
}
body > footer:last-of-type a {
  color: rgba(246, 238, 223, .9);
  text-decoration: none;
}
body > footer:last-of-type a:hover { color: var(--accent); }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 780px) {
  main[class]:not(:has(> article)) {
    grid-template-columns: 1fr;
    gap: 1.7rem;
  }
  main[class]:not(:has(> article)) > div[class]:first-child {
    padding: 34px 26px 40px;
  }
  main[class]:not(:has(> article)) > div[class]:first-child::after {
    margin: 32px -26px -40px;
    height: 140px;
  }
}

@media (max-width: 640px) {
  html { font-size: 16px; }
  body > div:first-child { padding: 3.2rem 0 2.9rem; }
  body > div:first-child h1,
  body > div:first-child > div > a { font-size: 2.4rem; }
  main[class]:not(:has(> article)) > div[class] { padding: 24px 22px 26px; }
  main[class]:not(:has(> article)) > div[class]:first-child > h2 { font-size: 1.95rem; }
  main[class]:has(> article) article > p,
  main[class]:has(> article) article section > p,
  main[class]:has(> article) article li { font-size: 1.08rem; }
}


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


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


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


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


/* ════════════════════════════════════════════════════════
   QA REFIX iter1 — homepage section rhythm (M2 / M6 / M7)
   Home DOM: main > 12×div.card (first = hero) + 1×div.tail(>ul>li).
   Full-width bands are slotted between the hero, the journal grid
   and the archive tail purely with `order` (no DOM changes):
     hero → [Le Carnet photo band, hero base = M6 strip #1]
     → LE JOURNAL label band (M2) → journal grid
     → VOIR TOUT photo band (M6 strip #2)
     → LES ARCHIVES magazine index (M7).
   ════════════════════════════════════════════════════════ */

/* source-order → visual-order mapping */
main[class]:not(:has(> article)) > div[class]:first-child { order: 1; }
main[class]:not(:has(> article)) > div[class]:not(:first-of-type):not(:last-of-type) { order: 3; }
main[class]:not(:has(> article)) > div[class]:last-of-type { order: 5; }
main[class]:not(:has(> article))::after { order: 4; }

/* M2 — full-width journal section label above the grid (paper + hairline) */
main[class]:not(:has(> article))::before {
  content: "Le Journal";
  order: 2;
  grid-column: 1 / -1;
  font-family: var(--font-meta);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: 12.5px;
  line-height: 1.2;
  color: var(--primary);
  padding: .2rem 2px 1rem;
  margin: 0;
  border-bottom: 1px solid var(--hair);
}

/* M7 — archive tail rebuilt as a full-width magazine index of cream cells.
   Strip the inherited journal-card frame off the wrapper, add a section
   label, then lay the <ul> out as a 3-col grid of boxed cells that share
   the top cards' paper/border/radius/shadow/hover system (design parity). */
main[class]:not(:has(> article)) > div[class]:last-of-type {
  grid-column: 1 / -1;
  display: block;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}
main[class]:not(:has(> article)) > div[class]:last-of-type:hover {
  box-shadow: none;
  transform: none;
}
main[class]:not(:has(> article)) > div[class]:last-of-type::before {
  content: "Les Archives";
  display: block;
  font-family: var(--font-meta);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: 12.5px;
  color: var(--primary);
  padding: .2rem 2px 1rem;
  border-bottom: 1px solid var(--hair);
  margin-bottom: 1.7rem;
}
main[class]:not(:has(> article)) > div[class]:last-of-type > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 16px;
  align-items: stretch;
}
main[class]:not(:has(> article)) > div[class]:last-of-type > ul > li {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  box-shadow: 0 1px 4px rgba(23, 50, 58, .05);
  padding: 18px 22px;
  transition: box-shadow .2s ease, transform .2s ease;
}
main[class]:not(:has(> article)) > div[class]:last-of-type > ul > li:hover {
  box-shadow: 0 8px 22px rgba(23, 50, 58, .11);
  transform: translateY(-3px);
}
main[class]:not(:has(> article)) > div[class]:last-of-type > ul > li > a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.3;
  color: var(--heading);
  text-decoration: none;
}
main[class]:not(:has(> article)) > div[class]:last-of-type > ul > li > a:hover {
  color: var(--accent-dark);
}
main[class]:not(:has(> article)) > div[class]:last-of-type > ul > li > span {
  font-family: var(--font-meta);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 10.5px;
  color: var(--accent-dark);
  margin-top: auto;
}

/* archive index: 2-up on tablet; the ≤640 overflow rule drops it to 1-up */
@media (max-width: 780px) {
  main[class]:not(:has(> article)) > div[class]:last-of-type > ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ════════════════════════════════════════════════════════
   QA REFIX iter2 — M4b: keep the hero's floating "Dernier essai"
   pill visible where a parent clips it.
   At ≤920px the mobile-overflow-fix gives `main { overflow-x: hidden }`,
   which per spec turns overflow-y into `auto` — so the pill's upper
   half (it half-crosses the hero top, and the hero is main's first
   visual row) would be clipped above main's border-box. Reserve
   top padding INSIDE main's border-box so the pill floats in the
   padding zone and is never clipped. Also nudge the pill's left
   offset to match the hero's tighter mobile padding.
   ════════════════════════════════════════════════════════ */
@media (max-width: 920px) {
  main[class]:not(:has(> article)) { padding-top: 20px; }
}
@media (max-width: 780px) {
  main[class]:not(:has(> article)) > div[class]:first-child::before { left: 22px; }
}


/* premium-upgrade v1 */
/* premium editorial upgrade — style=NYT-Cooking-warm overlay=55% grid=asymmetric scale=dramatic 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;
}