*{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}
.css-znhww5q{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 .css-a1zfwj0{color:#fff;text-decoration:none;font-size:18px;font-weight:600}
.css-jvmiqzb{border-bottom:1px solid #eee;padding:24px 0}
.css-jvmiqzb h2{font-size:20px;margin-bottom:8px}
.css-jvmiqzb h2 a{color:#1a1a2e;text-decoration:none}
.css-jvmiqzb h2 a:hover{color:#e94560}
.css-jvmiqzb .date{font-size:13px;color:#999;margin-bottom:8px}
.css-e7gt3bi{color:#e94560;text-decoration:none;font-size:14px;font-weight:600}
.css-ll6czta{padding-bottom:60px}
.css-ll6czta h1{font-size:32px;margin-bottom:8px}
.css-ll6czta time{font-size:13px;color:#999;display:block;margin-bottom:24px}
.css-ll6czta h2{font-size:22px;margin:32px 0 12px}
.css-ll6czta h3{font-size:18px;margin:24px 0 8px}
.css-ll6czta p{margin-bottom:16px}
.css-ll6czta ul,.css-ll6czta ol{margin:0 0 16px 24px}
.css-ll6czta a{color:#e94560}
.css-ll6czta 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}
.css-ra2i58w{background:#f5f5f5;border-left:3px solid #999;padding:10px 14px;margin-bottom:20px;font-size:13px;color:#777;font-style:italic}
.css-bhnan0c{background:#fef9e7;border:1px solid #f0c36d;padding:10px 14px;margin-top:20px;font-size:12px;color:#8a6d3b}
.css-paomzc6{font-size:13px;color:#999;margin:-16px 0 24px;font-style:italic}
.css-j9vpb4v{text-align:center;margin:0 0 20px}
.css-63ybbjh{max-width:100%;height:auto;border-radius:6px}
.css-098lqq0{margin-top:40px;padding-top:24px;border-top:1px solid #eee}
.css-098lqq0 h3{font-size:18px;margin-bottom:12px}
.css-098lqq0 ul{list-style:none;padding:0}
.css-098lqq0 li{padding:4px 0}
.css-098lqq0 a{color:#e94560;text-decoration:none}
.css-yovr0nf{padding:20px 0}
.css-yovr0nf ul{list-style:none;padding:0}
.css-yovr0nf li{padding:5px 0;font-size:15px}
.css-yovr0nf a{color:#1a1a2e;text-decoration:none}
.css-yovr0nf a:hover{color:#e94560}
/* === Theme === */
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&family=Cormorant+Garamond:wght@400;700&display=swap');
body{font-family:'Lora',sans-serif;color:#2D2926;background:#FAF7F2}
header{background:#4A152C;color:#fff}
header h1{font-family:'Cormorant Garamond',serif;color:#fff}
header p{color:rgba(255,255,255,.75)}
header a{color:#fff;text-decoration:none}
.css-jvmiqzb h2{font-family:'Cormorant Garamond',serif}
.css-jvmiqzb h2 a{color:#4A152C}
.css-jvmiqzb h2 a:hover{color:#E2725B}
.css-e7gt3bi{color:#E2725B}
.css-ll6czta h1{font-family:'Cormorant Garamond',serif}
.css-ll6czta h2{font-family:'Cormorant Garamond',serif}
.css-ll6czta a{color:#E2725B}
.css-ll6czta img{border-radius:8px}
.affiliate-disclosure{border-radius:8px}
.ymyl-disclaimer{border-radius:8px}
/* === Custom === */
/* v.6dc16b — layout revision */

/* ── Webfonts (declared, not @import — concatenated site.css drops a late @import) ─ */
@font-face{font-family:'Arvo';font-style:normal;font-weight:400;font-display:swap;
  src:url(https://fonts.gstatic.com/s/arvo/v23/tDbD2oWUg0MKqScQ7Q.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212;}
@font-face{font-family:'Arvo';font-style:normal;font-weight:700;font-display:swap;
  src:url(https://fonts.gstatic.com/s/arvo/v23/tDbM2oWUg0MKoZw1-LPK8w.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212;}
@font-face{font-family:'Arvo';font-style:italic;font-weight:400;font-display:swap;
  src:url(https://fonts.gstatic.com/s/arvo/v23/tDbN2oWUg0MKqSIg75Tv.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212;}
@font-face{font-family:'PT Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url(https://fonts.gstatic.com/s/ptsans/v18/jizaRExUiTo99u79D0KExQ.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'PT Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url(https://fonts.gstatic.com/s/ptsans/v18/jizfRExUiTo99u79B_mh0O6tLQ.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'PT Sans';font-style:italic;font-weight:400;font-display:swap;
  src:url(https://fonts.gstatic.com/s/ptsans/v18/jizYRExUiTo99u79D0e0x8mI.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212;}

/* ── Design tokens ─────────────────────────────────────────── */
:root {
  --color-primary:      #2E3A44;
  --color-primary-dark: #1C242B;
  --color-accent:       #BF5A2E;
  --color-accent-dark:  #8A3F1F;
  --color-moment:       #4A5C6B;
  --color-bg:           #FAF7F2;
  --color-surface:      #F2ECE3;
  --color-surface-2:    #EFE8D8;
  --color-text:         #2A2520;
  --color-muted:        #6E655A;
  --color-border:       #E1D8CB;
  --color-link:         #8A3F1F;
  --color-link-hover:   #BF5A2E;
  --font-heading:       'Arvo', Georgia, serif;
  --font-body:          'PT Sans', 'Segoe UI', Arial, sans-serif;
  --border-radius:      8px;
  --sp:                 8px;
}

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

:root body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.72;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
:root img { max-width: 100%; height: auto; }

/* ── Typography ─────────────────────────────────────────────── */
:root h1, :root h2, :root h3, :root h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.22;
  color: var(--color-primary);
}
:root a { color: var(--color-link); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .18s ease; }
:root a:hover { color: var(--color-link-hover); }
:root strong { color: var(--color-primary); font-weight: 700; }

:root ul, :root ol { padding-left: 22px; margin: 0 0 18px; max-width: 66ch; }
:root li { margin-bottom: 7px; line-height: 1.72; }
:root li:last-child { margin-bottom: 0; }

/* ── Header / masthead : real photo + gradient + italic serif wordmark ── */
:root header {
  background: linear-gradient(rgba(20,24,28,.34), rgba(20,24,28,.74)),
              url("/theme-assets/hero-masthead.jpg") center 60% / cover no-repeat;
  padding: 0;
}
:root header > div {
  max-width: 1080px;
  min-height: 344px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 40px 24px 36px;
}
:root header > div::before {
  content: "NOTES DE DAMIEN · TOULOUSE";
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #E8A97E;
  margin-bottom: 14px;
}
:root header h1, :root header h1 a {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2.25rem, 5.2vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: .005em;
  color: #FAF7F2;
  text-decoration: none;
  margin-bottom: 14px;
  text-shadow: 0 2px 20px rgba(0,0,0,.5);
}
:root header p {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1rem, 1.7vw, 1.16rem);
  line-height: 1.5;
  color: rgba(250,247,242,.92);
  max-width: 58ch;
  margin: 0;
  padding-left: 16px;
  border-left: 3px solid var(--color-moment);
  text-shadow: 0 1px 12px rgba(0,0,0,.5);
}

/* ── Footer ─────────────────────────────────────────────────── */
:root footer {
  background-color: #171D22;
  color: #C7BFB4;
  font-size: 14px;
  margin-top: 84px;
  padding: 40px 0;
}
:root footer > div { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
:root footer p { max-width: none; margin: 0; line-height: 1.7; }
:root footer a { color: #E8A97E; text-decoration: none; }
:root footer a:hover { color: #FAF7F2; }

/* ── Shared main width ──────────────────────────────────────── */
:root main { max-width: 1080px; margin: 0 auto; padding: 64px 24px 0; }

/* ════════════════════════════════════════════════════════════
   HOMEPAGE  (main has no direct > h1)
   DOM: main > article ×12  +  main > section (archive tail)
   ════════════════════════════════════════════════════════════ */
:root main:not(:has(> h1)) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px 34px;
  align-items: stretch;
  padding-bottom: 0;
}

/* Editor's-picks section label — a real grid item (container ::before), reordered
   to sit between the hero and the two picks. Spans the full row. (RULE B) */
:root main:not(:has(> h1))::before {
  content: "À LIRE EN PRIORITÉ — PAR OÙ COMMENCER";
  order: 2;
  grid-column: 1 / -1;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--color-moment);
  padding: 0 0 12px;
  margin-top: 30px;
  border-bottom: 1px solid var(--color-border);
}

/* Base card shell — consistent for hero, picks and journal (RULES A/C/E) */
:root main:not(:has(> h1)) > article {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 30px 34px;
  box-shadow: 0 1px 4px rgba(42,37,32,.05);
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
  display: flex;
  flex-direction: column;
}
:root main:not(:has(> h1)) > article:hover {
  border-color: #D8B9A2;
  box-shadow: 0 6px 20px rgba(46,58,68,.11);
  transform: translateY(-2px);
}
:root main:not(:has(> h1)) > article h2 {
  font-family: var(--font-heading);
  font-size: 1.32rem;
  line-height: 1.28;
  margin: 0 0 12px;
}
: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-dark); }

/* date line (first <p>) → editorial kicker */
:root main:not(:has(> h1)) > article > p:nth-of-type(1) {
  order: -1;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 10px;
}
/* excerpt (second <p>) */
:root main:not(:has(> h1)) > article > p:nth-of-type(2) {
  font-size: 15.5px;
  line-height: 1.62;
  color: #504A42;
  max-width: 64ch;
  margin: 0 0 18px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* read-more (direct child <a>) — replace the English template string, style as accent link */
:root main:not(:has(> h1)) > article > a {
  margin-top: auto;
  font-size: 0;
  text-decoration: none;
  color: var(--color-accent);
  font-weight: 700;
}
:root main:not(:has(> h1)) > article > a::after {
  content: "Lire la suite \002192";
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: .04em;
}
:root main:not(:has(> h1)) > article > a:hover { color: var(--color-accent-dark); }

/* ── HERO : article 1 ── full width, loud (RULE 1) ── */
:root main:not(:has(> h1)) > article:nth-of-type(1) {
  order: 1;
  grid-column: 1 / -1;
  background: linear-gradient(180deg, #F6F0E4, var(--color-surface));
  border-color: #E3D3BF;
  padding: 46px 48px 42px;
}
:root main:not(:has(> h1)) > article:nth-of-type(1)::before {
  content: "L'ESSAI LE PLUS RÉCENT";
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 16px;
}
:root main:not(:has(> h1)) > article:nth-of-type(1) h2 {
  font-size: clamp(1.9rem, 3.8vw, 2.85rem);
  line-height: 1.1;
  margin-bottom: 16px;
}
:root main:not(:has(> h1)) > article:nth-of-type(1) > p:nth-of-type(2) {
  font-size: 1.2rem;
  line-height: 1.55;
  color: #453F38;
  max-width: 60ch;
  -webkit-line-clamp: 4;
}
:root main:not(:has(> h1)) > article:nth-of-type(1) > p:nth-of-type(2)::first-letter {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 3.3em;
  line-height: .8;
  float: left;
  margin: .05em .1em 0 0;
  color: var(--color-accent);
}
:root main:not(:has(> h1)) > article:nth-of-type(1) > a {
  align-self: flex-start;
  padding: 11px 26px;
  border: 1.5px solid var(--color-accent);
  border-radius: 999px;
  color: var(--color-accent);
}
:root main:not(:has(> h1)) > article:nth-of-type(1) > a::after { content: "Lire l'essai \002192"; }
:root main:not(:has(> h1)) > article:nth-of-type(1) > a:hover {
  background: var(--color-accent);
  color: #FAF7F2;
}

/* ── EDITOR'S PICKS : articles 2 & 3 (paired feature, 1 col each) ── */
:root main:not(:has(> h1)) > article:nth-of-type(2),
:root main:not(:has(> h1)) > article:nth-of-type(3) { order: 3; }

/* ── JOURNAL LEAD : article 4 ── full-width featured entry, carries STRIP 1 ── */
:root main:not(:has(> h1)) > article:nth-of-type(4) {
  order: 4;
  grid-column: 1 / -1;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin-top: 34px;
}
:root main:not(:has(> h1)) > article:nth-of-type(4):hover { transform: none; box-shadow: none; }
/* STRIP 1 — section break photo band between picks and journal (RULE F) */
:root main:not(:has(> h1)) > article:nth-of-type(4)::before {
  content: "LE JOURNAL — LES PLUS RÉCENTS";
  display: flex;
  align-items: center;
  justify-content: center;
  height: 208px;
  margin-bottom: 30px;
  border-radius: 10px;
  background: linear-gradient(rgba(20,24,28,.55), rgba(20,24,28,.25)),
              url("/theme-assets/article-hero.jpg") center 30% / cover no-repeat;
  color: #FAF7F2;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}
:root main:not(:has(> h1)) > article:nth-of-type(4) h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  line-height: 1.14;
  max-width: 20ch;
}
:root main:not(:has(> h1)) > article:nth-of-type(4) > p:nth-of-type(2) {
  font-size: 1.08rem;
  line-height: 1.6;
  max-width: 66ch;
  -webkit-line-clamp: 3;
}

/* ── JOURNAL GRID : articles 5+ (2 col, consistent) ── */
:root main:not(:has(> h1)) > article:nth-of-type(n+5) { order: 5; }

/* ── ARCHIVE TAIL : main > section (carries STRIP 2, index columns) (RULE G) ── */
:root main:not(:has(> h1)) > section {
  order: 6;
  grid-column: 1 / -1;
  margin-top: 34px;
  padding: 0 0 72px;
  background: none;
}
/* STRIP 2 — section break photo band before the archive (RULE F) */
:root main:not(:has(> h1)) > section::before {
  content: "ARTICLES PRÉCÉDENTS";
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  margin-bottom: 30px;
  border-radius: 10px;
  background: linear-gradient(rgba(28,20,18,.5), rgba(20,24,28,.32)),
              url("/theme-assets/article-hero.jpg") center 72% / cover no-repeat;
  color: #FAF7F2;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}
/* Magazine index — boxed cream cards, same design system as journal cards (RULE M7) */
:root main:not(:has(> h1)) > 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:not(:has(> h1)) > section li {
  margin: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 19px 22px;
  box-shadow: 0 1px 4px rgba(42,37,32,.05);
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
:root main:not(:has(> h1)) > section li:hover {
  border-color: #D8B9A2;
  box-shadow: 0 6px 20px rgba(46,58,68,.11);
  transform: translateY(-2px);
}
:root main:not(:has(> h1)) > section li a {
  display: block;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-primary);
  text-decoration: none;
}
:root main:not(:has(> h1)) > section li a:hover { color: var(--color-accent); }

/* ════════════════════════════════════════════════════════════
   ARTICLE PAGE  (main has a direct > h1)
   DOM: main > h1 + time + article + aside + section
   ════════════════════════════════════════════════════════════ */
:root main:has(> h1) { max-width: 880px; padding-bottom: 24px; }

:root main:has(> h1) > h1 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.2vw, 2.9rem);
  line-height: 1.12;
  color: var(--color-primary);
  margin: 0 0 6px;
}
:root main:has(> h1) > h1::before {
  content: "RAVIVER LE LIEN · JOURNAL";
  display: block;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 14px;
}
:root main:has(> h1) > time {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 30px;
}
/* persona / location anchor after the date (RULE S6) */
:root main:has(> h1) > time::after {
  content: " · PAR DAMIEN · TOULOUSE";
  color: var(--color-accent);
  font-weight: 700;
}

/* featured image */
:root main:has(> h1) article > div:first-child { margin: 0 0 30px; text-align: center; }
:root main:has(> h1) article > div:first-child img {
  border-radius: 10px;
  box-shadow: 0 6px 22px rgba(20,24,28,.12);
}

/* body copy — breathing room (RULE H) */
:root main:has(> h1) article > p {
  font-size: 1.12rem;
  line-height: 1.8;
  color: var(--color-text);
  max-width: 68ch;
  margin: 0 0 1.25rem;
}
:root main:has(> h1) article > p:first-of-type::first-letter {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 3.4em;
  line-height: .8;
  float: left;
  margin: .04em .12em 0 0;
  color: var(--color-accent);
}

:root main:has(> h1) article h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.45rem, 2.6vw, 1.75rem);
  line-height: 1.2;
  color: var(--color-primary);
  margin: 40px 0 14px;
}
/* dinkus divider between sections (2nd h2 onward) */
:root main:has(> h1) article > h2:nth-of-type(n+2)::before {
  content: "✦ ✦ ✦";
  display: block;
  text-align: center;
  letter-spacing: .5em;
  font-size: 15px;
  color: var(--color-accent);
  margin: 8px 0 34px;
}
:root main:has(> h1) article h3 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--color-primary);
  margin: 28px 0 10px;
}

/* in-article links → accent; affiliate /find/ links → distinct chip (RULE J) */
:root main:has(> h1) article a {
  color: var(--color-accent-dark);
  font-weight: 700;
  text-underline-offset: 2px;
}
:root main:has(> h1) article a:hover { color: var(--color-accent); }
/* affiliate/product CTA — distinct solid pill, clearly differentiated from inline
   prose links; covers every affiliate path prefix + external product URLs (RULE M10) */
:root main:has(> h1) article p a[href^="/find/"],
:root main:has(> h1) article li a[href^="/find/"],
:root main:has(> h1) article p a[href^="/try/"],
:root main:has(> h1) article li a[href^="/try/"],
:root main:has(> h1) article p a[href^="/ref/"],
:root main:has(> h1) article li a[href^="/ref/"],
:root main:has(> h1) article p a[href^="/go/"],
:root main:has(> h1) article li a[href^="/go/"],
:root main:has(> h1) article p a[href^="/out/"],
:root main:has(> h1) article li a[href^="/out/"],
:root main:has(> h1) article p a[href^="http"],
:root main:has(> h1) article li a[href^="http"] {
  display: inline-block;
  background: var(--color-accent);
  color: #FAF7F2;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: .02em;
  padding: 9px 22px;
  margin: 4px 2px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(191,90,46,.22);
  text-decoration: none;
}
:root main:has(> h1) article p a[href^="/find/"]:hover,
:root main:has(> h1) article li a[href^="/find/"]:hover,
:root main:has(> h1) article p a[href^="/try/"]:hover,
:root main:has(> h1) article li a[href^="/try/"]:hover,
:root main:has(> h1) article p a[href^="/ref/"]:hover,
:root main:has(> h1) article li a[href^="/ref/"]:hover,
:root main:has(> h1) article p a[href^="/go/"]:hover,
:root main:has(> h1) article li a[href^="/go/"]:hover,
:root main:has(> h1) article p a[href^="/out/"]:hover,
:root main:has(> h1) article li a[href^="/out/"]:hover,
:root main:has(> h1) article p a[href^="http"]:hover,
:root main:has(> h1) article li a[href^="http"]:hover {
  background: var(--color-accent-dark);
  color: #FAF7F2;
  box-shadow: 0 4px 13px rgba(138,63,31,.3);
}

/* blockquote — hanging quote */
:root main:has(> h1) article blockquote {
  position: relative;
  border-left: 3px solid var(--color-accent);
  background: var(--color-surface);
  border-radius: 0 8px 8px 0;
  margin: 30px 0;
  padding: 20px 26px 20px 30px;
  max-width: 66ch;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.12rem;
  line-height: 1.55;
  color: var(--color-primary);
}
:root main:has(> h1) article blockquote::before {
  content: "\00201C";
  position: absolute;
  top: 2px;
  left: 10px;
  font-family: var(--font-heading);
  font-size: 2.4rem;
  color: rgba(191,90,46,.34);
}
:root main:has(> h1) article blockquote p { margin: 0; max-width: none; }

/* disclosure note (aside) — fix low-contrast pale-yellow box */
:root main:has(> h1) article aside,
:root main:has(> h1) > aside {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-moment);
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
  margin-top: 30px;
  font-size: 13.5px;
  line-height: 1.65;
  color: #5A5248;
}

/* related "Articles connexes" */
:root main:has(> h1) > section {
  margin-top: 48px;
  padding-top: 26px;
  border-top: 1px solid var(--color-border);
}
:root main:has(> h1) > section h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--color-primary);
  margin-bottom: 14px;
}
:root main:has(> h1) > section ul { list-style: none; padding: 0; max-width: none; }
:root main:has(> h1) > section li { padding: 8px 0; border-bottom: 1px dotted rgba(0,0,0,.12); }
:root main:has(> h1) > section a { color: var(--color-accent-dark); font-weight: 600; text-decoration: none; }
:root main:has(> h1) > section a:hover { color: var(--color-accent); }

/* ── Tables (comparison grids) ──────────────────────────────── */
:root table { width: 100%; border-collapse: collapse; margin: 28px 0; font-size: 15.5px; }
:root th, :root td { padding: 12px 10px; text-align: left; border-bottom: 1px solid var(--color-border); }
:root th { background: var(--color-primary); color: #F2ECE3; font-family: var(--font-body); }
:root tbody tr:nth-child(even) { background: var(--color-surface); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 720px) {
  :root body { font-size: 16px; }
  :root main { padding: 40px 18px 0; }
  :root main:not(:has(> h1)) { grid-template-columns: 1fr; gap: 30px; }
  :root main:not(:has(> h1)) > article:nth-of-type(1) { padding: 32px 26px; }
  :root main:not(:has(> h1)) > article { padding: 26px 24px; }
  :root main:not(:has(> h1)) > section ul { grid-template-columns: repeat(2, 1fr); }
  :root main:not(:has(> h1)) > article:nth-of-type(4)::before,
  :root main:not(:has(> h1)) > section::before { height: 150px; letter-spacing: .2em; font-size: 12.5px; }
  :root header > div { min-height: 268px; padding: 30px 18px 28px; }
}


/* 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=Monocle-Swiss overlay=40% grid=asymmetric 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; }
}


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


/* surgical-refix v1 (iter 1) — M2 + M6: two standalone, labeled hero-photo section breaks */

/* M2 + M6 — STRIP 1 (between Editor's Picks and the Journal grid):
   a later premium pass turned the journal-lead entry (article 4) into a photo-background
   CARD, which pulled its "LE JOURNAL — LES PLUS RÉCENTS" band INSIDE the card frame so the
   label rendered overlaid on the card photo, just after the date. Revert article 4 back to a
   bandless full-width lead (as the base design intended) and float its ::before to the very
   top, so the labeled photo band reads as a standalone full-width section break ABOVE the row
   rather than a label buried in a card. */
:root main:not(:has(> h1)) > article:nth-of-type(4) {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-top: 40px !important;
}
:root main:not(:has(> h1)) > article:nth-of-type(4)::before {
  order: -2 !important;   /* strip sits above the date/title, spanning the full width */
}

/* M6 — STRIP 2 (between the Journal grid and the compact archive tail):
   a later premium pass replaced the labeled band with an EMPTY (content:"") strip and a
   bottom-only gradient. Restore the required centered white uppercase label and a full dark
   overlay so the label is readable over the photo. Keeps the per-site strip image. */
:root main:not(:has(> h1)) > section::before {
  content: "ARTICLES PRÉCÉDENTS" !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #FAF7F2 !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .32em !important;
  text-transform: uppercase !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.6) !important;
  background:
    linear-gradient(rgba(20,24,28,.5), rgba(20,24,28,.42)),
    url("/theme-assets/premium-hero-strip-2.webp") center 45% / cover no-repeat !important;
}
@media (max-width: 720px) {
  :root main:not(:has(> h1)) > section::before {
    letter-spacing: .2em !important;
    font-size: 12.5px !important;
  }
}


/* === Link & button colour audit (2026-09-16) ===
   Generated from a measured crawl of this site's own pages: every link and
   button was checked for text-vs-surface contrast at rest and on hover.
   Replacement colours keep the original hue and move only lightness, so the
   design reads the same. Verified by re-rendering before this was written. */
/* 47x 4.17:1 -> needs 4.5 | “Comment Récupérer Son Ex (7 étapes)” */
:root :is(#lnkfix, main) > article > p > a[href^="/find/"] { background: #8A3F1F; }
/* 14x 4.17:1 -> needs 4.5 | “divorce par consentement mutuel” */
:root :is(#lnkfix, main) > article > p > a[href^="http"] { background: #8A3F1F; }
/* 8x 3.79:1 -> needs 4.5 | “Read More →” */
:root :is(#lnkfix, main) > article > a:not([href^="/find/"]) { color: #A24C27; }
/* 8x 4.37:1 -> needs 4.5 | “En savoir plus →” */
:root :is(#lnkfix, main) > article > div > table > tbody > tr > td > a[style*="9b59b6"], :root :is(#lnkfix, main) > article > div > table > tbody > tr > td > a[style*="faf7f2"] { color: #8A49A5 !important; }
/* 5x 4.17:1 -> needs 4.5 | “Alexandre Cormont — Boutique : Pack récu” */
:root :is(#lnkfix, main) > article > ul > li > a[href^="http"] { background: #8A3F1F; }
/* 4x 4.17:1 -> needs 4.5 | “Read More →” */
:root :is(#lnkfix, main) > article > a:not([href^="/find/"]) { color: #A24C27; }
/* 4x 3.98:1 -> needs 4.5 | “En savoir plus →” */
:root :is(#lnkfix, main) > article > div > table > tbody > tr > td > a[style*="9b59b6"], :root :is(#lnkfix, main) > article > div > table > tbody > tr > td > a[style*="f2ece3"] { color: #8A49A5 !important; }
/* hover 4.17:1 -> needs 4.5 on #FAF7F2 */
:root :is(#lnkfix, main) > article > p > a:not([href^="/find/"]):hover { color: #AA5029; }
/* hover 4.17:1 -> needs 4.5 on #FAF7F2 */
:root :is(#lnkfix, main) > section > ul > li > a:not([href^="/find/"]):hover { color: #AA5029; }