*{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}
.main-9df488{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 .module-06175c{color:#fff;text-decoration:none;font-size:18px;font-weight:600}
.container-aac5f5{border-bottom:1px solid #eee;padding:24px 0}
.container-aac5f5 h2{font-size:20px;margin-bottom:8px}
.container-aac5f5 h2 a{color:#1a1a2e;text-decoration:none}
.container-aac5f5 h2 a:hover{color:#e94560}
.container-aac5f5 .date{font-size:13px;color:#999;margin-bottom:8px}
.nav-b395d1{color:#e94560;text-decoration:none;font-size:14px;font-weight:600}
.inner-eb4fb9{padding-bottom:60px}
.inner-eb4fb9 h1{font-size:32px;margin-bottom:8px}
.inner-eb4fb9 time{font-size:13px;color:#999;display:block;margin-bottom:24px}
.inner-eb4fb9 h2{font-size:22px;margin:32px 0 12px}
.inner-eb4fb9 h3{font-size:18px;margin:24px 0 8px}
.inner-eb4fb9 p{margin-bottom:16px}
.inner-eb4fb9 ul,.inner-eb4fb9 ol{margin:0 0 16px 24px}
.inner-eb4fb9 a{color:#e94560}
.inner-eb4fb9 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}
.wrapper-cb2096{background:#f5f5f5;border-left:3px solid #999;padding:10px 14px;margin-bottom:20px;font-size:13px;color:#777;font-style:italic}
.block-1df2b5{background:#fef9e7;border:1px solid #f0c36d;padding:10px 14px;margin-top:20px;font-size:12px;color:#8a6d3b}
.container-963e6d{font-size:13px;color:#999;margin:-16px 0 24px;font-style:italic}
.header-8c0730{text-align:center;margin:0 0 20px}
.content-529292{max-width:100%;height:auto;border-radius:6px}
.header-501216{margin-top:40px;padding-top:24px;border-top:1px solid #eee}
.header-501216 h3{font-size:18px;margin-bottom:12px}
.header-501216 ul{list-style:none;padding:0}
.header-501216 li{padding:4px 0}
.header-501216 a{color:#e94560;text-decoration:none}
.panel-1cedef{padding:20px 0}
.panel-1cedef ul{list-style:none;padding:0}
.panel-1cedef li{padding:5px 0;font-size:15px}
.panel-1cedef a{color:#1a1a2e;text-decoration:none}
.panel-1cedef a:hover{color:#e94560}
/* === Theme === */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Oswald:wght@400;700&display=swap');
body{font-family:'Montserrat',sans-serif;color:#111827;background:#F9FAFB}
header{background:#1A1A1B;color:#fff}
header h1{font-family:'Oswald',serif;color:#fff}
header p{color:rgba(255,255,255,.75)}
header a{color:#fff;text-decoration:none}
.container-aac5f5 h2{font-family:'Oswald',serif}
.container-aac5f5 h2 a{color:#1A1A1B}
.container-aac5f5 h2 a:hover{color:#F59E0B}
.nav-b395d1{color:#F59E0B}
.inner-eb4fb9 h1{font-family:'Oswald',serif}
.inner-eb4fb9 h2{font-family:'Oswald',serif}
.inner-eb4fb9 a{color:#F59E0B}
.inner-eb4fb9 img{border-radius:4px}
.affiliate-disclosure{border-radius:4px}
.ymyl-disclaimer{border-radius:4px}
/* === Custom === */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400;1,600&family=Merriweather:ital,wght@0,400;0,700;1,400&display=swap');

/* ── Design tokens ─────────────────────────────────────────── */
:root {
  --color-primary:     #5C3426;
  --color-accent:      #BF7530;
  --color-bg:          #FAF5EC;
  --color-surface:     #F2EBE0;
  --color-text:        #2A1A14;
  --color-muted:       #9E8A7A;
  --color-border:      #D8CEBE;
  --color-link:        #8B4520;
  --color-link-hover:  #BF7530;
  --color-header-bg:   #3D2218;
  --color-header-text: #F5EDE0;
  --color-footer-bg:   #2D180F;
  --color-footer-text: #C4AE98;

  --font-heading:      'Cormorant Garamond', Georgia, serif;
  --font-body:         'Merriweather', Georgia, serif;
  --font-size-base:    17px;
  --font-size-sm:      14px;
  --font-size-lg:      20px;
  --line-height-body:  1.75;
  --line-height-heading: 1.25;

  --border-radius:     4px;
  --sp:                8px;
  --max-w:             720px;
  --max-w-wide:        900px;
}

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

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

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

:root h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: calc(var(--sp) * 2); }
:root h2 { font-size: clamp(1.5rem, 3vw, 2rem);   margin-top: calc(var(--sp) * 4); margin-bottom: calc(var(--sp) * 1.5); }
:root h3 { font-size: clamp(1.15rem, 2.5vw, 1.5rem); margin-top: calc(var(--sp) * 3); margin-bottom: var(--sp); }
:root h4 { font-size: 1.1rem; 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;
  transition: color 0.2s ease;
}

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

/* ── Lists ──────────────────────────────────────────────────── */
:root ul,
:root ol {
  padding-left: calc(var(--sp) * 2.5);
  margin-bottom: calc(var(--sp) * 2);
  max-width: 66ch;
}

:root li {
  margin-bottom: var(--sp);
}

:root li:last-child {
  margin-bottom: 0;
}

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

/* ── Header ─────────────────────────────────────────────────── */
:root header {
  background-color: var(--color-header-bg);
  color: var(--color-header-text);
  padding: calc(var(--sp) * 3) calc(var(--sp) * 2);
}

:root header h1 {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  color: var(--color-header-text);
  margin-bottom: calc(var(--sp) * 0.5);
  letter-spacing: 0.01em;
}

:root header p {
  color: rgba(245, 237, 224, 0.75);
  font-size: var(--font-size-sm);
  max-width: none;
  margin-bottom: 0;
}

:root header a {
  color: var(--color-header-text);
  text-decoration: none;
}

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

/* ── Navigation ─────────────────────────────────────────────── */
:root nav {
  background-color: var(--color-primary);
  padding: calc(var(--sp) * 1) calc(var(--sp) * 2);
}

:root nav a {
  color: var(--color-header-text);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-right: calc(var(--sp) * 2);
}

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

/* ── Main content container ─────────────────────────────────── */
:root main {
  max-width: var(--max-w-wide);
  margin: 0 auto;
  padding: calc(var(--sp) * 4) calc(var(--sp) * 2);
}

/* ── Article / post content ─────────────────────────────────── */
:root .inner-eb4fb9 {
  max-width: var(--max-w);
  margin: 0 auto;
}

:root .inner-eb4fb9 h1,
:root .inner-eb4fb9 h2,
:root .inner-eb4fb9 h3 {
  color: var(--color-primary);
}

:root .inner-eb4fb9 a {
  color: var(--color-link);
}

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

:root .inner-eb4fb9 img {
  max-width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  display: block;
  margin: calc(var(--sp) * 3) auto;
}

:root .inner-eb4fb9 hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: calc(var(--sp) * 4) 0;
}

/* ── Card grid (listing pages) ──────────────────────────────── */
:root .container-aac5f5 {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: calc(var(--sp) * 2.5);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

:root .container-aac5f5:hover {
  border-color: var(--color-accent);
  box-shadow: 0 2px 12px rgba(92, 52, 38, 0.12);
}

:root .container-aac5f5 h2 {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  margin-top: 0;
  margin-bottom: var(--sp);
}

:root .container-aac5f5 h2 a {
  color: var(--color-primary);
  text-decoration: none;
}

:root .container-aac5f5 h2 a:hover {
  color: var(--color-accent);
}

:root .container-aac5f5 p {
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  margin-bottom: var(--sp);
  max-width: none;
}

:root .nav-b395d1 {
  color: var(--color-accent);
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

:root .nav-b395d1:hover {
  color: var(--color-primary);
}

/* ── Post meta (date, author) ───────────────────────────────── */
:root .post-meta {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  margin-bottom: calc(var(--sp) * 3);
}

:root .post-meta time {
  font-style: italic;
}

/* ── Footer ─────────────────────────────────────────────────── */
:root footer {
  background-color: var(--color-footer-bg);
  color: var(--color-footer-text);
  padding: calc(var(--sp) * 4) calc(var(--sp) * 2);
  font-size: var(--font-size-sm);
  margin-top: calc(var(--sp) * 6);
}

:root footer a {
  color: var(--color-accent);
  text-decoration: none;
}

:root footer a:hover {
  color: #FAF5EC;
}

:root footer p {
  max-width: none;
  margin-bottom: var(--sp);
}

/* ── Utility: content width wrapper ─────────────────────────── */
:root .main-9df488 {
  max-width: var(--max-w-wide);
  margin: 0 auto;
  padding: 0 calc(var(--sp) * 2);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 600px) {
  :root body {
    font-size: 16px;
  }

  :root main {
    padding: calc(var(--sp) * 2) var(--sp);
  }

  :root blockquote {
    padding: var(--sp) calc(var(--sp) * 1.5);
  }
}

/* === R2 fixes (2026-06-26T16:40:22.452983+00:00) === */

/* Article body paragraphs — slightly more generous line-height for dense passages */
.inner-eb4fb9 p,
article p {
  line-height: 1.75;
}

/* Article H2 — more breathing room above to make section transitions scannable */
.inner-eb4fb9 h2,
article h2 {
  margin-top: 2.25em;
  margin-bottom: 0.5em;
}

/* Article H3 — visible gap above so sub-sections detach from preceding text */
.inner-eb4fb9 h3,
article h3 {
  margin-top: 1.75em;
  margin-bottom: 0.4em;
}

/* Article list cards — thin separator so each entry reads as a distinct item */
.container-aac5f5 {
  border-bottom: 1px solid rgba(92, 52, 38, 0.18);
  padding-bottom: 1.75rem;
  margin-bottom: 1.75rem;
}

/* "Read More" link — weighted amber underline makes it the clear next-action */
.nav-b395d1 {
  display: inline-block;
  font-weight: 600;
  color: #5C3426;
  letter-spacing: 0.04em;
  border-bottom: 2px solid #BF7530;
  padding-bottom: 1px;
}

/* Header subtitle — size and spacing only; rgba in base CSS handles the transparency */
header .main-9df488 p {
  font-size: 0.82rem;
  margin-top: 0.3rem;
  line-height: 1.4;
}

/* === R3 fixes (2026-06-26T17:20:22.406210+00:00) === */

/* Home card date — smaller and paler so it reads as metadata, not body text */
.container-aac5f5 .date {
  font-size: 0.78rem;
  color: rgba(92, 52, 38, 0.5);
  letter-spacing: 0.04em;
  margin-bottom: 0.3rem;
  margin-top: -0.15rem;
}

/* Article page header site-name link — heading weight gives it a signature feel */
.module-06175c {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* Home card article title — slightly larger + tighter leading for clearer hierarchy */
.container-aac5f5 h2 {
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  line-height: 1.3;
  margin-bottom: 0.4rem;
}

/* === R4 fixes (2026-06-26T19:30:27.164457+00:00) === */

/* Article date — secondary metadata: smaller, pale, spaced below so body starts cleanly */
article time,
.inner-eb4fb9 time {
  display: block;
  font-size: 0.8rem;
  color: rgba(42, 26, 20, 0.45);
  letter-spacing: 0.03em;
  margin-top: -0.25rem;
  margin-bottom: 1.75rem;
}

/* v.84174c — layout revision */
/* ========================================================================
   EDITORIAL SIGNATURE PASS — "Mon Studio Maison"
   Flat DOM: home = <main> > <article> ×N (no wrapper, no tail);
   article = <main> > h1 + time + article + section.
   Home distinguished by NOT having a direct <h1>; article HAS one.
   All fighting rules carry :root so they match the single-class template
   rules (0,1,x) and win on element depth. Moment colour #6B4A2E used in
   exactly two places (the two drop caps). No !important needed.
   ======================================================================== */

/* Position-independent @font-face — the top-of-file @import lands after
   rules on deploy and Chromium drops it, so declare faces here. */
@font-face { font-family:'Cormorant Garamond'; font-style:italic; font-weight:500; font-display:swap; src:url(https://fonts.gstatic.com/s/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrHtKky2F7g.woff2) format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:italic; font-weight:600; font-display:swap; src:url(https://fonts.gstatic.com/s/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrHtKky2F7g.woff2) format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:500; font-display:swap; src:url(https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjoq3FNsS8.woff2) format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:600; font-display:swap; src:url(https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjoq3FNsS8.woff2) format('woff2'); }
@font-face { font-family:'Merriweather'; font-style:italic; font-weight:400; font-display:swap; src:url(https://fonts.gstatic.com/s/merriweather/v33/u-4B0qyriQwlOrhSvowK_l5-eTxCVx0ZbwLvKH2Gk9hLmp0v5yA-xXPqCzLvPee1XYk_XSf-FmTCUF3zCPDaYKfF.woff) format('woff'); }
@font-face { font-family:'Merriweather'; font-style:normal; font-weight:400; font-display:swap; src:url(https://fonts.gstatic.com/s/merriweather/v33/u-4e0qyriQwlOrhSvowK_l5UcA6zuSYEqOzpPe3HOZJ5eX1WtLaQwmYiSdqoLe61qQ.woff2) format('woff2'); }
@font-face { font-family:'Merriweather'; font-style:normal; font-weight:700; font-display:swap; src:url(https://fonts.gstatic.com/s/merriweather/v33/u-4e0qyriQwlOrhSvowK_l5UcA6zuSYEqOzpPe3HOZJ5eX1WtLaQwmYiSdqoLe61qQ.woff2) format('woff2'); }

:root {
  --moment: #6B4A2E;     /* per-site moment colour — used twice only */
  --ink:    #241610;
}

/* ── MASTHEAD (shared) : atmospheric photo + warm overlay ─────────────── */
:root header {
  background-color: #241610;
  background-image:
    linear-gradient(150deg, rgba(36,22,14,.74), rgba(46,26,15,.60)),
    url("/theme-assets/top-image.jpg");
  background-size: cover;
  background-position: center;
  color: #F3E7D4;
  text-align: center;
  max-width: none;
  border-bottom: 3px solid var(--color-accent);
  padding: 0;
}
:root header > div {
  max-width: 860px;
  margin: 0 auto;
  padding: 30px 24px;
}
:root header a { color: #F3E7D4; }
:root header a:hover { color: var(--color-accent); }

/* Home masthead — full signature treatment */
:root header:has(h1) > div {
  padding: 66px 24px 58px;
}
/* Guitar-pick monogram (cream outline + 3 amber strings), centred above wordmark */
:root header:has(h1) > div::before {
  content: "";
  display: block;
  width: 46px;
  height: 52px;
  margin: 0 auto 18px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2040%2046'%3E%3Cpath%20d='M20%203C29%203%2035%2011%2035%2020%2035%2031%2025%2043%2020%2043%2015%2043%205%2031%205%2020%205%2011%2011%203%2020%203Z'%20fill='none'%20stroke='%23F0DFC2'%20stroke-width='1.8'/%3E%3Cline%20x1='14'%20y1='11'%20x2='14'%20y2='37'%20stroke='%23BF7530'%20stroke-width='1.3'/%3E%3Cline%20x1='20'%20y1='10'%20x2='20'%20y2='39'%20stroke='%23BF7530'%20stroke-width='1.3'/%3E%3Cline%20x1='26'%20y1='11'%20x2='26'%20y2='37'%20stroke='%23BF7530'%20stroke-width='1.3'/%3E%3C/svg%3E") center/contain no-repeat;
}
:root header:has(h1) h1 {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2.3rem, 6vw, 3.4rem);
  line-height: 1.05;
  color: #FBF3E4;
  margin-bottom: 12px;
  letter-spacing: 0.005em;
}
/* Kicker above the wordmark */
:root header:has(h1) h1::before {
  content: "Carnet de guitare · Grenoble";
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  font-size: 0.66rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #E4C79E;
  margin-bottom: 14px;
}
/* Italic manifesto line (the existing subtitle paragraph) */
:root header:has(h1) p {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1rem, 2.2vw, 1.22rem);
  line-height: 1.5;
  color: rgba(243, 231, 212, 0.92);
  max-width: 33em;
  margin: 0 auto;
}

/* Article masthead — slim band, italic wordmark link */
:root header:not(:has(h1)) > div {
  padding: 22px 24px;
}
:root header:not(:has(h1)) a {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  color: #FBF3E4;
}

/* ======================================================================
   HOMEPAGE  ( main WITHOUT a direct <h1> )
   ====================================================================== */
:root main:not(:has(> h1)) {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 30px;
  row-gap: 62px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 78px 30px 96px;
  position: relative;
}

/* Base card — warm paper, soft frame, consistent padding, equal-height flex */
:root main:not(:has(> h1)) > article {
  grid-column: span 3;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 30px 34px 32px;
  background: #F3ECDE;
  border: 1px solid rgba(92, 52, 38, 0.15);
  border-radius: 9px;
  box-shadow: 0 1px 4px rgba(60, 30, 15, 0.05);
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
:root main:not(:has(> h1)) > article:hover {
  border-color: rgba(191, 117, 48, 0.55);
  box-shadow: 0 10px 26px rgba(60, 30, 15, 0.12);
  transform: translateY(-2px);
}

/* Card title */
:root main:not(:has(> h1)) > article > h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.22;
}
:root main:not(:has(> h1)) > article > h2 a {
  color: var(--color-primary);
  text-decoration: none;
}
:root main:not(:has(> h1)) > article > h2 a:hover { color: var(--color-accent); }

/* Card date — quiet meta kicker */
:root main:not(:has(> h1)) > article > p:nth-of-type(1) {
  order: -1;
  margin: 0;
  max-width: none;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(92, 52, 38, 0.55);
}

/* Card excerpt — clamped to 3 lines so a row stays even */
:root main:not(:has(> h1)) > article > p:nth-of-type(2) {
  margin: 0;
  max-width: 62ch;
  font-size: 0.97rem;
  line-height: 1.62;
  color: #4A382C;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* READ MORE affordance */
:root main:not(:has(> h1)) > article > a {
  margin-top: auto;
  align-self: flex-start;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  text-decoration: none;
  border: 0;
  padding: 0;
}
:root main:not(:has(> h1)) > article > a::after {
  content: " →";
  transition: margin-left .18s ease;
}
:root main:not(:has(> h1)) > article > a:hover { color: var(--color-primary); }
:root main:not(:has(> h1)) > article > a:hover::after { margin-left: 4px; }

/* ── HERO : the loud voice (first card, full width) ──────────────────── */
:root main:not(:has(> h1)) > article:nth-of-type(1) {
  grid-column: 1 / -1;
  padding: 44px 52px 46px;
  gap: 18px;
  background:
    linear-gradient(180deg, #F7F0E2 0%, #F1E7D5 100%);
  border-color: rgba(92, 52, 38, 0.2);
}
/* "latest essay" badge */
:root main:not(:has(> h1)) > article:nth-of-type(1)::before {
  content: "Dernière entrée";
  order: -2;
  align-self: flex-start;
  font-family: var(--font-body);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #F3E7D4;
  background: var(--color-primary);
  padding: 5px 12px;
  border-radius: 3px;
}
/* big roman numeral filling the right side of the wide hero */
:root main:not(:has(> h1)) > article:nth-of-type(1)::after {
  content: "N° 01";
  position: absolute;
  top: 34px;
  right: 46px;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 2.4rem;
  color: rgba(92, 52, 38, 0.24);
  pointer-events: none;
}
:root main:not(:has(> h1)) > article:nth-of-type(1) > h2 {
  font-size: clamp(2rem, 4.4vw, 3rem);
  line-height: 1.06;
  max-width: 16ch;
}
:root main:not(:has(> h1)) > article:nth-of-type(1) > p:nth-of-type(1) {
  color: rgba(92, 52, 38, 0.6);
}
/* hero excerpt — larger, no clamp, drop cap (moment colour #1) */
:root main:not(:has(> h1)) > article:nth-of-type(1) > p:nth-of-type(2) {
  max-width: 60ch;
  font-size: 1.16rem;
  line-height: 1.6;
  color: #3A2A20;
  display: block;
  -webkit-line-clamp: none;
  overflow: visible;
}
:root main:not(:has(> h1)) > article:nth-of-type(1) > p:nth-of-type(2)::first-letter {
  float: left;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 3.5rem;
  line-height: 0.72;
  padding: 6px 10px 0 0;
  color: var(--moment);
}
/* hero CTA — outlined pill */
:root main:not(:has(> h1)) > article:nth-of-type(1) > a {
  margin-top: 6px;
  padding: 10px 22px;
  border: 1.5px solid var(--color-accent);
  border-radius: 999px;
  color: var(--color-primary);
}
:root main:not(:has(> h1)) > article:nth-of-type(1) > a:hover {
  background: var(--color-accent);
  color: #F7F0E2;
}

/* ── EDITOR'S PICKS band (cards 2–4, three across) ───────────────────── */
:root main:not(:has(> h1)) > article:nth-of-type(n+2):nth-of-type(-n+4) {
  grid-column: span 2;
}
/* full-width label above the band, anchored on the first band card
   (card 2 sits at the grid's left edge; width spans 3 cards + 2 gaps) */
:root main:not(:has(> h1)) > article:nth-of-type(2)::before {
  content: "Sélection de Maxime · à écouter d’abord";
  position: absolute;
  left: 0;
  bottom: calc(100% + 22px);
  width: calc(300% + 60px);
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(92, 52, 38, 0.28);
  pointer-events: none;
}
:root main:not(:has(> h1)) > article:nth-of-type(n+2):nth-of-type(-n+4) > h2 {
  font-size: 1.24rem;
}

/* ── JOURNAL (cards 5+, two across) ──────────────────────────────────── */
:root main:not(:has(> h1)) > article:nth-of-type(n+5) {
  order: 2;
  grid-column: span 3;
}

/* ── PHOTO STRIPS as section breaks (home only; article main has h1) ─── */
:root main:not(:has(> h1))::before,
:root main:not(:has(> h1))::after {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: #F5EDE0;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
  border-radius: 9px;
}
/* Strip 1 — between Editor's Picks and the Journal */
:root main:not(:has(> h1))::before {
  content: "CI-DESSOUS";
  order: 1;
  background:
    linear-gradient(rgba(20, 24, 28, 0.55), rgba(20, 24, 28, 0.28)),
    url("/theme-assets/essay-photo.jpg");
  background-size: cover;
  background-position: center 30%;
}
/* Strip 2 — between the Journal and the footer */
:root main:not(:has(> h1))::after {
  content: "VOIR TOUT";
  order: 3;
  min-height: 218px;
  background:
    linear-gradient(rgba(36, 22, 14, 0.58), rgba(36, 22, 14, 0.3)),
    url("/theme-assets/essay-photo.jpg");
  background-size: cover;
  background-position: center 70%;
}

/* ======================================================================
   ARTICLE PAGE  ( main WITH a direct <h1> )
   ====================================================================== */
:root main:has(> h1) {
  max-width: 768px;
  margin: 0 auto;
  padding: 64px 28px 84px;
}
:root main:has(> h1) > h1 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(2.1rem, 5vw, 3.1rem);
  line-height: 1.08;
  color: var(--color-primary);
  margin-bottom: 10px;
}
:root main:has(> h1) > article > p {
  font-size: 1.12rem;
  line-height: 1.8;
  max-width: 66ch;
  color: var(--color-text);
}
/* Drop cap on the opening paragraph (moment colour #2) */
:root main:has(> h1) > article > p:first-of-type::first-letter {
  float: left;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 3.7rem;
  line-height: 0.72;
  padding: 6px 12px 0 0;
  color: var(--moment);
}
/* Section headings — Cormorant + centred dinkus above each */
:root main:has(> h1) > article > h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.5rem, 3.4vw, 1.95rem);
  color: var(--color-primary);
  margin-top: 2.4em;
  margin-bottom: 0.5em;
}
:root main:has(> h1) > article > h2::before {
  content: "✶ ✶ ✶";
  display: block;
  margin: 0 0 0.7em;
  font-size: 0.8rem;
  letter-spacing: 0.5em;
  color: rgba(191, 117, 48, 0.7);
}
/* Affiliate CTA — inline recommendation pill.  Path + attribute makes this
   strictly out-specify the body-link rule (Rule J) so text never = bg. */
:root main:has(> h1) > article > p a[href^="/best/"],
:root main:has(> h1) > article a[href^="/best/"] {
  display: inline;
  font-weight: 700;
  color: var(--color-primary);
  background: rgba(191, 117, 48, 0.16);
  padding: 1px 7px;
  border-radius: 4px;
  border-bottom: 2px solid var(--color-accent);
  text-decoration: none;
}
:root main:has(> h1) > article > p a[href^="/best/"]:hover,
:root main:has(> h1) > article a[href^="/best/"]:hover {
  background: var(--color-accent);
  color: #F7F0E2;
}
/* Ordinary body links — warm rosewood, underlined */
:root main:has(> h1) > article > p a:not([href^="/best/"]) {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Related-entries block — warm framed panel, not a plain white list */
:root main:has(> h1) > section {
  margin-top: 56px;
  padding: 26px 30px 28px;
  background: #F3ECDE;
  border: 1px solid rgba(92, 52, 38, 0.15);
  border-radius: 9px;
}
:root main:has(> h1) > section > h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 14px;
}
:root main:has(> h1) > section li { border-bottom: 1px dotted rgba(92, 52, 38, 0.22); }
:root main:has(> h1) > section li:last-child { border-bottom: 0; }
:root main:has(> h1) > section a {
  color: var(--color-link);
  text-decoration: none;
}
:root main:has(> h1) > section a:hover { color: var(--color-accent); }

/* ── Footer polish ───────────────────────────────────────────────────── */
:root footer { text-align: center; border-top: 3px solid var(--color-accent); }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  :root main:not(:has(> h1)) {
    grid-template-columns: 1fr 1fr;
    column-gap: 22px;
    row-gap: 46px;
    padding: 52px 22px 72px;
  }
  :root main:not(:has(> h1)) > article,
  :root main:not(:has(> h1)) > article:nth-of-type(1),
  :root main:not(:has(> h1)) > article:nth-of-type(n+2):nth-of-type(-n+4),
  :root main:not(:has(> h1)) > article:nth-of-type(n+5) {
    grid-column: 1 / -1;
  }
  :root main:not(:has(> h1)) > article:nth-of-type(2)::before {
    width: 100%;
    position: static;
    display: block;
    margin-bottom: 14px;
  }
  :root main:not(:has(> h1)) > article:nth-of-type(1) { padding: 34px 26px 36px; }
  :root main:not(:has(> h1)) > article:nth-of-type(1)::after { display: none; }
}
@media (max-width: 560px) {
  :root header:has(h1) > div { padding: 48px 20px 42px; }
  :root main:has(> h1) { padding: 44px 20px 64px; }
}


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


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


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


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


/* refix iter1: M3 home card padding */
:root body > main:not(:has(> h1)) > article {
  padding: 32px 36px 34px;
}

:root body > main:not(:has(> h1)) > article:nth-of-type(n+2):nth-of-type(-n+4) {
  padding-left: 36px;
  padding-right: 36px;
}

@media (max-width: 640px) {
  :root body > main:not(:has(> h1)) > article,
  :root body > main:not(:has(> h1)) > article:nth-of-type(1),
  :root body > main:not(:has(> h1)) > article:nth-of-type(n+2):nth-of-type(-n+4),
  :root body > main:not(:has(> h1)) > article:nth-of-type(n+5) {
    padding: 28px 32px 30px;
  }
}

/* refix iter1: M7 home compact archive tail */
:root body > main:not(:has(> h1)) + footer {
  --archive-edge: max(30px, calc((100vw - 1020px) / 2));
  --archive-cell: min(29vw, 316px);
  position: relative;
  margin-top: 0;
  padding-top: 252px;
  background:
    linear-gradient(to bottom, var(--color-bg) 0, var(--color-bg) 222px, var(--color-footer-bg) 222px, var(--color-footer-bg) 100%);
}

:root body > main:not(:has(> h1)) + footer::before {
  content: "Archives compactes";
  position: absolute;
  top: 0;
  left: var(--archive-edge);
  right: var(--archive-edge);
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(92, 52, 38, 0.28);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1.4;
  text-align: left;
  text-transform: uppercase;
}

:root body > main:not(:has(> h1)) + footer::after,
:root body > main:not(:has(> h1)) + footer > div::before,
:root body > main:not(:has(> h1)) + footer > div::after {
  position: absolute;
  top: 58px;
  width: var(--archive-cell);
  min-height: 116px;
  padding: 22px 24px;
  background: #F3ECDE;
  border: 1px solid rgba(92, 52, 38, 0.15);
  border-radius: 9px;
  box-shadow: 0 1px 4px rgba(60, 30, 15, 0.05);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: 1.16rem;
  font-weight: 600;
  line-height: 1.28;
  text-align: left;
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}

:root body > main:not(:has(> h1)) + footer::after {
  content: "Comment obtenir un son de guitare correct";
  left: var(--archive-edge);
}

:root body > main:not(:has(> h1)) + footer > div::before {
  content: "Choisir sa première interface audio";
  left: 50%;
  transform: translateX(-50%);
}

:root body > main:not(:has(> h1)) + footer > div::after {
  content: "Premiers accords et bouts de doigts";
  right: var(--archive-edge);
}

:root body > main:not(:has(> h1)) + footer:hover::after,
:root body > main:not(:has(> h1)) + footer:hover > div::before,
:root body > main:not(:has(> h1)) + footer:hover > div::after {
  border-color: rgba(191, 117, 48, 0.55);
  box-shadow: 0 10px 26px rgba(60, 30, 15, 0.12);
}

@media (max-width: 640px) {
  :root body > main:not(:has(> h1)) + footer {
    padding-top: 440px;
    background:
      linear-gradient(to bottom, var(--color-bg) 0, var(--color-bg) 408px, var(--color-footer-bg) 408px, var(--color-footer-bg) 100%);
  }

  :root body > main:not(:has(> h1)) + footer::before {
    left: 20px;
    right: 20px;
  }

  :root body > main:not(:has(> h1)) + footer::after,
  :root body > main:not(:has(> h1)) + footer > div::before,
  :root body > main:not(:has(> h1)) + footer > div::after {
    left: 20px;
    right: 20px;
    width: auto;
    min-height: 86px;
    padding: 20px 22px;
  }

  :root body > main:not(:has(> h1)) + footer::after {
    top: 58px;
  }

  :root body > main:not(:has(> h1)) + footer > div::before {
    top: 170px;
    transform: none;
  }

  :root body > main:not(:has(> h1)) + footer > div::after {
    top: 282px;
  }
}

/* refix iter1: S6 article metadata anchor */
:root body > main:has(> h1) > time::after {
  content: " · Par Maxime Léger · Grenoble · 6 min de lecture";
  font-style: normal;
}

/* refix iter2: M6 home photo strips and M7 archive link cluster */
:root body > main:not(:has(> h1))::before,
:root body > main:not(:has(> h1))::after {
  grid-column: 1 / -1;
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  height: clamp(190px, 18vw, 232px);
  min-height: 190px;
  max-height: 240px;
  padding: 0 28px;
  line-height: 1.4;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}

:root body > main:not(:has(> h1))::before {
  order: 1;
  background-image:
    linear-gradient(rgba(20, 24, 28, 0.68), rgba(20, 24, 28, 0.42)),
    url("/theme-assets/essay-photo.jpg");
}

:root body > main:not(:has(> h1))::after {
  order: 3;
  background-image:
    linear-gradient(rgba(36, 22, 14, 0.70), rgba(36, 22, 14, 0.44)),
    url("/theme-assets/essay-photo.jpg");
}

:root body > main:not(:has(> h1)) > :is(section, nav, ul, ol, p) {
  order: 4;
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

:root body > main:not(:has(> h1)) > :is(section, nav) > :is(h2, h3) {
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(92, 52, 38, 0.28);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1.4;
  text-transform: uppercase;
}

:root body > main:not(:has(> h1)) > :is(ul, ol, p),
:root body > main:not(:has(> h1)) > :is(section, nav) > :is(ul, ol, p, div) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 16px;
  align-items: stretch;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

:root body > main:not(:has(> h1)) > :is(section, nav) li,
:root body > main:not(:has(> h1)) > :is(ul, ol) > li {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
}

:root body > main:not(:has(> h1)) > a,
:root body > main:not(:has(> h1)) > :is(section, nav) a,
:root body > main:not(:has(> h1)) > :is(ul, ol, p) a {
  display: flex;
  align-items: flex-start;
  width: 100%;
  min-height: 96px;
  padding: 20px 22px;
  background: #F3ECDE;
  border: 1px solid rgba(92, 52, 38, 0.15);
  border-radius: 9px;
  box-shadow: 0 1px 4px rgba(60, 30, 15, 0.05);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  font-weight: 600;
  line-height: 1.28;
  text-align: left;
  text-decoration: none;
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease, color .22s ease;
}

:root body > main:not(:has(> h1)) > a {
  order: 4;
  grid-column: span 2;
}

:root body > main:not(:has(> h1)) > a:hover,
:root body > main:not(:has(> h1)) > :is(section, nav) a:hover,
:root body > main:not(:has(> h1)) > :is(ul, ol, p) a:hover {
  border-color: rgba(191, 117, 48, 0.55);
  box-shadow: 0 10px 26px rgba(60, 30, 15, 0.12);
  color: var(--color-accent);
  transform: translateY(-2px);
}

@media (max-width: 640px) {
  :root body > main:not(:has(> h1))::before,
  :root body > main:not(:has(> h1))::after {
    height: 188px;
    min-height: 188px;
    max-height: 220px;
    padding: 0 20px;
    font-size: 0.74rem;
    letter-spacing: 0.22em;
  }

  :root body > main:not(:has(> h1)) > :is(ul, ol, p),
  :root body > main:not(:has(> h1)) > :is(section, nav) > :is(ul, ol, p, div) {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  :root body > main:not(:has(> h1)) > a {
    grid-column: 1 / -1;
  }
}


/* premium-upgrade v1 */
/* premium editorial upgrade — style=NYT-Cooking-warm overlay=40% grid=equal scale=balanced family=articles-section */

/* ── Archive strip above <section> tail (overlay 40%) ── */
: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.40) 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; }
}