*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Palatino Linotype',Palatino,'Book Antiqua',serif;line-height:1.9;color:#2a2a2a;background:#fefefe}
.content-8edcf8{max-width:640px;margin:0 auto;padding:0 20px}
.frame-e83bd3{padding:60px 0 40px;border-bottom:1px solid #ccc;margin-bottom:48px}
.frame-e83bd3 h1{font-size:24px;font-weight:400;letter-spacing:-.5px}
.frame-e83bd3 p{font-size:14px;color:#777;margin-top:6px;font-style:italic}
.frame-e83bd3 a{color:#2a2a2a;text-decoration:none;font-size:24px;font-weight:400;letter-spacing:-.5px}
.footer-01f8ac{padding:20px 0}
.footer-01f8ac h2{font-size:18px;font-weight:400;margin-bottom:4px}
.footer-01f8ac h2 a{color:#2a2a2a;text-decoration:none;border-bottom:1px solid transparent}
.footer-01f8ac h2 a:hover{border-bottom-color:#2a2a2a}
.footer-01f8ac .page-eacc1d{font-size:12px;color:#aaa;margin-bottom:6px}
.footer-01f8ac p{font-size:14px;color:#666}
.content-3e17f8{color:#888;font-size:13px;text-decoration:none}
.content-3e17f8:hover{color:#2a2a2a}
.outer-9c8ab1{padding-bottom:60px}
.outer-9c8ab1 h1{font-size:28px;font-weight:400;margin-bottom:8px}
.outer-9c8ab1 .page-eacc1d{font-size:12px;color:#aaa;display:block;margin-bottom:32px}
.outer-9c8ab1 h2{font-size:21px;font-weight:400;margin:40px 0 12px;border-bottom:1px solid #eee;padding-bottom:6px}
.outer-9c8ab1 h3{font-size:17px;margin:28px 0 8px}
.outer-9c8ab1 p{margin-bottom:18px;font-size:16px}
.outer-9c8ab1 ul,.outer-9c8ab1 ol{margin:0 0 18px 20px}
.outer-9c8ab1 a{color:#555;border-bottom:1px solid #ccc}
.outer-9c8ab1 a:hover{color:#000;border-bottom-color:#000}
.outer-9c8ab1 img{max-width:100%;height:auto;margin:24px 0}
.nav-b3fde7{border-top:1px solid #ddd;padding:20px 0;margin-top:48px;text-align:center;font-size:12px;color:#aaa}
.nav-b3fde7 a{color:#aaa;text-decoration:none}
.sidebar-eee6ea{padding:0 0 16px;margin-bottom:24px;font-size:12px;color:#aaa;font-style:italic;border-bottom:1px solid #eee}
.inner-73cebc{padding:16px 0 0;margin-top:32px;font-size:11px;color:#999;border-top:1px solid #eee}
.inner-0f01a0{font-size:12px;color:#aaa;margin:-26px 0 32px;font-weight:300}
.region-4755ab{margin:0 auto 32px;max-width:720px}
.main-39876f{width:100%;height:auto}
.nav-4f2d38{margin-top:40px;padding-top:20px;border-top:1px solid #eee;font-size:14px;color:#888}
.nav-4f2d38 em{color:#aaa}
.nav-4f2d38 a{color:#555;border-bottom:1px solid #ddd;text-decoration:none}
.nav-4f7dd7{padding:24px 0 0;border-top:1px solid #eee;margin-top:24px}
.nav-4f7dd7 p{padding:3px 0;margin:0;font-size:15px}
.nav-4f7dd7 a{color:#2a2a2a;text-decoration:none;border-bottom:1px solid transparent}
.nav-4f7dd7 a:hover{border-bottom-color:#2a2a2a}
/* === Theme === */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@400;700&display=swap');
body{font-family:'Inter',sans-serif;color:#2C3E50;background:#F9FBF9}
.frame-e83bd3{background:#1B3022;color:#fff}
.frame-e83bd3 h1{font-family:'Playfair Display',serif;color:#fff}
.frame-e83bd3 p{color:rgba(255,255,255,.75)}
.frame-e83bd3 a{color:#fff;text-decoration:none}
.card h2{font-family:'Playfair Display',serif}
.card h2 a{color:#1B3022}
.card h2 a:hover{color:#C59D5F}
.read-more{color:#C59D5F}
.article-content h1{font-family:'Playfair Display',serif}
.article-content h2{font-family:'Playfair Display',serif}
.article-content a{color:#C59D5F}
.article-content img{border-radius:4px}
.affiliate-disclosure{border-radius:4px}
.ymyl-disclaimer{border-radius:4px}
/* === Custom === */
/* v.1c89ae — layout revision */
/* im-immo-fr · Clef Pierre — Romain, planificateur fret → bailleur prudent.
   Palette bleu-papier #304A62 + ocre #9C7E1A, papier #F6F4EF, moment #8B2E2E.
   LIVE DOM is the "minimal" template with obfuscated classes — every scoped
   selector is element/structural and carries a `:root main:nth-of-type(1)`
   prefix so it out-specifies the template's `.class el` (0,2,x) base rules.
   Home  main = main WITHOUT a direct <h1>.   Article main = main WITH one. */

/* ─── Webfonts (declared as @font-face; a top @import is dropped by the
       concatenated pipeline, so it never loads) ─── */
@font-face{font-family:'Zilla Slab';font-style:normal;font-weight:400;font-display:swap;
  src:url(https://fonts.gstatic.com/s/zillaslab/v12/dFa6ZfeM_74wlPZtksIFajo6_V6LVlA.woff2) format('woff2');}
@font-face{font-family:'Zilla Slab';font-style:normal;font-weight:600;font-display:swap;
  src:url(https://fonts.gstatic.com/s/zillaslab/v12/dFa5ZfeM_74wlPZtksIFYuUe6HOpW3pwfa0.woff2) format('woff2');}
@font-face{font-family:'Zilla Slab';font-style:normal;font-weight:700;font-display:swap;
  src:url(https://fonts.gstatic.com/s/zillaslab/v12/dFa5ZfeM_74wlPZtksIFYoEf6HOpW3pwfa0.woff2) format('woff2');}
@font-face{font-family:'Zilla Slab';font-style:italic;font-weight:400;font-display:swap;
  src:url(https://fonts.gstatic.com/s/zillaslab/v12/dFa4ZfeM_74wlPZtksIFaj8K_1SMdFJ6dQ.woff2) format('woff2');}
@font-face{font-family:'Zilla Slab';font-style:italic;font-weight:700;font-display:swap;
  src:url(https://fonts.gstatic.com/s/zillaslab/v12/dFanZfeM_74wlPZtksIFaj8CRHGZWXB3X6_0fw.woff2) format('woff2');}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url(https://fonts.gstatic.com/s/firasans/v18/va9E4kDNxMZdWfMOD5Vvl4jLazX3dA.woff2) format('woff2');}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url(https://fonts.gstatic.com/s/firasans/v18/va9B4kDNxMZdWfMOD5VnZKveRhf6Xl7Glw.woff2) format('woff2');}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url(https://fonts.gstatic.com/s/firasans/v18/va9B4kDNxMZdWfMOD5VnSKzeRhf6Xl7Glw.woff2) format('woff2');}
@font-face{font-family:'Fira Sans';font-style:italic;font-weight:400;font-display:swap;
  src:url(https://fonts.gstatic.com/s/firasans/v18/va9C4kDNxMZdWfMOD5VvkrjJYTLVdlTO.woff2) format('woff2');}

/* ─── Tokens ─── */
:root{
  --primary:#304A62; --primary-dark:#1C2E3E; --primary-light:#DCE8F2;
  --accent:#9C7E1A;  --accent-dark:#705A0E;  --accent-light:#F2E6C4;
  --moment:#8B2E2E;                         /* the one loud colour, 2 places */
  --paper:#F6F4EF;   --paper-card:#FAF6EC;  --paper-alt:#EFE8D8;
  --ink:#20201E;     --ink-soft:#4A4844;    --ink-mute:#77746D;
  --line:#D8D2C4;
  --serif:'Zilla Slab',Georgia,'Times New Roman',serif;
  --sans:'Fira Sans',system-ui,-apple-system,sans-serif;
  --gap:1.6rem; --radius:8px;
}

/* ─── Base ─── */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--sans);font-size:17px;line-height:1.75;color:var(--ink);
  background:var(--paper);margin:0;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
img{max-width:100%;height:auto;}
h1,h2,h3,h4{font-family:var(--serif);line-height:1.18;color:var(--ink);margin:0 0 .6em;}
a{color:var(--primary);text-underline-offset:3px;text-decoration-thickness:1px;transition:color .15s ease;}
a:hover{color:var(--accent-dark);}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;}

/* ═══════════════════════════════════════════════════════════════
   MASTHEAD — cover photo + navy overlay, key monogram, italic wordmark
   ═══════════════════════════════════════════════════════════════ */
:root body > header:first-of-type{
  max-width:none;margin:0;
  background-image:
    linear-gradient(176deg,rgba(28,46,62,.78) 0%,rgba(23,37,50,.92) 100%),
    url("/theme-assets/cover.jpg");
  background-size:cover;background-position:center 42%;
  color:#fff;text-align:center;
  padding:clamp(2.6rem,6vw,4.8rem) 1.5rem clamp(2.1rem,5vw,3.6rem);
  border-bottom:3px solid var(--accent);
}
:root body > header:first-of-type::before{
  content:"";display:block;width:40px;height:40px;margin:0 auto 1.1rem;opacity:.95;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A93A' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='4.6'/%3E%3Cpath d='M11.4 11.4 L20.5 20.5'/%3E%3Cpath d='M16.8 16.8 l2.2 -2.2'/%3E%3Cpath d='M14 14 l1.9 -1.9'/%3E%3C/svg%3E") center/contain no-repeat;
}
:root body > header:first-of-type h1{
  font-family:var(--serif);font-style:italic;font-weight:700;color:#fff;
  font-size:clamp(2.1rem,5.5vw,3.2rem);letter-spacing:-.01em;margin:0 0 .45rem;line-height:1.05;}
:root body > header:first-of-type h1 a{color:inherit;text-decoration:none;}
:root body > header:first-of-type p{
  font-family:var(--sans);font-style:italic;font-weight:400;
  font-size:clamp(.92rem,1.7vw,1.05rem);line-height:1.6;
  color:rgba(255,255,255,.84);max-width:52ch;margin:.6rem auto 0;}
/* article masthead: header holds only the wordmark link */
:root body > header:first-of-type a:only-child{
  display:inline-block;font-family:var(--serif);font-style:italic;font-weight:700;color:#fff;
  font-size:clamp(1.7rem,4vw,2.4rem);letter-spacing:-.01em;text-decoration:none;}
:root body > header:first-of-type a:only-child:hover{color:var(--accent-light);}

/* ═══════════════════════════════════════════════════════════════
   READ-MORE — hide raw "read more →", show a French label (home cards)
   ═══════════════════════════════════════════════════════════════ */
a[class*="content-"]{font-size:0;color:transparent;text-decoration:none;}
a[class*="content-"]::after{
  content:"Lire l’article →";font-family:var(--sans);font-size:.72rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent-dark);}
a[class*="content-"]:hover::after{color:var(--primary);}

/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE  (main WITHOUT a direct <h1>)
   hero → 3 Editor's Picks → [LE CARNET strip] → journal → [TOUT LIRE] → index
   ═══════════════════════════════════════════════════════════════ */
:root main:nth-of-type(1):not(:has(> h1)){
  max-width:1120px;width:auto;margin:0 auto;
  padding:clamp(2rem,4vw,3.2rem) clamp(1rem,3vw,2rem) clamp(3rem,5vw,4.5rem);
  display:grid;grid-template-columns:repeat(6,1fr);gap:var(--gap);align-items:stretch;
}

/* — generic card (hero, picks, journal all carry > h2; index div excluded) — */
:root main:nth-of-type(1):not(:has(> h1)) > div:has(> h2){
  grid-column:span 3;display:flex;flex-direction:column;
  background:var(--paper-card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 1px 4px rgba(0,0,0,.04);
  padding:1.7rem 2rem 1.8rem;
  transition:box-shadow .18s ease,transform .18s ease;}
:root main:nth-of-type(1):not(:has(> h1)) > div:has(> h2):hover{
  box-shadow:0 8px 24px rgba(48,74,98,.13);transform:translateY(-2px);}
:root main:nth-of-type(1):not(:has(> h1)) > div:has(> h2) > p:first-child{
  font-family:var(--sans);font-size:.7rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.16em;line-height:1.4;color:var(--accent-dark);margin:0 0 .55rem;}
:root main:nth-of-type(1):not(:has(> h1)) > div:has(> h2) > h2{
  font-family:var(--serif);font-size:1.24rem;font-weight:600;line-height:1.25;margin:0 0 .55rem;}
:root main:nth-of-type(1):not(:has(> h1)) > div:has(> h2) > h2 a{
  color:var(--primary);text-decoration:none;}
:root main:nth-of-type(1):not(:has(> h1)) > div:has(> h2) > h2 a:hover{color:var(--accent-dark);}
:root main:nth-of-type(1):not(:has(> h1)) > div:has(> h2) > h2 + p{
  font-size:.98rem;line-height:1.6;color:var(--ink-soft);margin:0 0 1.15rem;max-width:64ch;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
:root main:nth-of-type(1):not(:has(> h1)) > div:has(> h2) > a{margin-top:auto;align-self:flex-start;}

/* ── HERO — card 1, full width, the loud voice ── */
:root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(1){
  grid-column:1 / -1;display:block;position:relative;text-align:center;
  padding:clamp(2.4rem,5vw,3.8rem) clamp(1.6rem,5vw,4rem) clamp(2.8rem,5vw,4rem);
  background:linear-gradient(180deg,#FBF8F0 0%,#F4EDDB 100%);
  border:1px solid var(--line);border-top:5px solid var(--moment);}
:root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(1):hover{transform:none;box-shadow:0 10px 34px rgba(48,74,98,.12);}
:root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(1)::before{
  content:"À la une · dernier comparatif";display:block;font-family:var(--sans);
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.22em;
  color:var(--accent-dark);margin-bottom:1.1rem;}
:root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(1) > p:first-child{
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);margin:0 0 1rem;}
:root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(1) > h2{
  font-family:var(--serif);font-style:italic;font-weight:700;
  font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.08;letter-spacing:-.015em;
  max-width:20ch;margin:0 auto;}
:root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(1) > h2 a{color:var(--primary-dark);text-decoration:none;}
:root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(1) > h2 a:hover{color:var(--accent-dark);}
:root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(1) > h2::after{
  content:"par Romain · lecture ~6 min";display:block;font-family:var(--sans);font-style:normal;
  font-size:.76rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  color:var(--accent-dark);margin-top:1.1rem;}
:root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(1) > h2 + p{
  font-size:1.12rem;line-height:1.62;color:var(--ink-soft);max-width:60ch;margin:1.5rem auto 1.9rem;
  -webkit-line-clamp:none;display:block;overflow:visible;}
/* outlined pill CTA */
:root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(1) > a{
  align-self:center;margin:0 auto;display:inline-block;
  border:1.5px solid var(--primary);border-radius:999px;padding:.72rem 2rem;transition:background .18s ease;}
:root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(1) > a::after{color:var(--primary);}
:root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(1) > a:hover{background:var(--primary);}
:root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(1) > a:hover::after{color:#fff;}

/* ── EDITOR'S PICKS — cards 2-4, navy band, 3-up ── */
:root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(2),
:root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(3),
:root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(4){
  grid-column:span 2;margin-top:4.6rem;
  background:var(--primary);border:1px solid var(--primary-dark);}
:root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(2):hover,
:root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(3):hover,
:root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(4):hover{box-shadow:0 10px 26px rgba(28,46,62,.3);}
:root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(2) > p:first-child,
:root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(3) > p:first-child,
:root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(4) > p:first-child{color:var(--accent-light);}
:root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(2) > h2 a,
:root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(3) > h2 a,
:root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(4) > h2 a{color:#fff;}
:root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(2) > h2 a:hover,
:root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(3) > h2 a:hover,
:root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(4) > h2 a:hover{color:var(--accent-light);}
:root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(2) > h2 + p,
:root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(3) > h2 + p,
:root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(4) > h2 + p{color:rgba(255,255,255,.82);}
:root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(2) > a::after,
:root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(3) > a::after,
:root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(4) > a::after{color:var(--accent-light);}
:root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(2) > a:hover::after,
:root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(3) > a:hover::after,
:root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(4) > a:hover::after{color:#fff;}
/* band label above the picks (anchored on the leftmost card, spans the 3-up row) */
:root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(2){position:relative;}
:root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(2)::before{
  content:"La sélection — à lire en premier";position:absolute;left:0;bottom:calc(100% + 1.1rem);
  width:calc(300% + 3.2rem);font-family:var(--sans);font-size:.74rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.18em;color:var(--primary);
  padding-bottom:.7rem;border-bottom:1px solid var(--line);}

/* ── JOURNAL — cards 5+, 2-up chronological grid ── */
:root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(5),
:root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(6){margin-top:250px;}
:root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(5){position:relative;}
/* LE CARNET — hero-photo strip 1 (between picks and journal) */
:root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(5)::before{
  content:"Le Carnet";position:absolute;left:0;top:-232px;
  width:calc(200% + var(--gap));height:200px;border-radius:var(--radius);
  background-image:linear-gradient(rgba(20,24,28,.55),rgba(20,24,28,.28)),url("/theme-assets/essay-photo.jpg");
  background-size:cover;background-position:center 30%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:var(--sans);font-size:.86rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.34em;text-indent:.34em;
  text-shadow:0 1px 6px rgba(0,0,0,.5);}

/* ── COMPACT INDEX TAIL — the last div (title-only rows, no > h2) ── */
:root main:nth-of-type(1):not(:has(> h1)) > div:not(:has(> h2)){
  grid-column:1 / -1;margin-top:96px;padding:0 0 8px;
  background:transparent;border:none;columns:2;column-gap:56px;}
/* TOUT LIRE — hero-photo strip 2 (between journal and index), spans both columns */
:root main:nth-of-type(1):not(:has(> h1)) > div:not(:has(> h2))::before{
  content:"Tout lire";column-span:all;display:flex;align-items:center;justify-content:center;
  height:210px;margin-bottom:40px;border-radius:var(--radius);
  background-image:linear-gradient(rgba(20,24,28,.55),rgba(20,24,28,.22)),url("/theme-assets/essay-photo.jpg");
  background-size:cover;background-position:center 70%;
  color:#fff;font-family:var(--sans);font-size:.86rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.34em;text-indent:.34em;
  text-shadow:0 1px 6px rgba(0,0,0,.5);}
:root main:nth-of-type(1):not(:has(> h1)) > div:not(:has(> h2)) > p{
  margin:0;padding:0;break-inside:avoid;}
:root main:nth-of-type(1):not(:has(> h1)) > div:not(:has(> h2)) > p a{
  display:block;padding:11px 0;
  font-family:var(--serif);font-size:1.02rem;font-weight:500;line-height:1.4;
  color:var(--primary);text-decoration:none;border-bottom:1px dotted rgba(48,74,98,.22);}
:root main:nth-of-type(1):not(:has(> h1)) > div:not(:has(> h2)) > p a:hover{color:var(--accent-dark);}

/* ── homepage responsive ── */
@media (max-width:980px){
  :root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(5),
  :root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(6){grid-column:1 / -1;}
  :root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(6){margin-top:var(--gap);}
  :root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(5)::before{width:100%;}
}
@media (max-width:600px){
  :root main:nth-of-type(1):not(:has(> h1)){grid-template-columns:1fr;gap:1.3rem;}
  :root main:nth-of-type(1):not(:has(> h1)) > div:has(> h2),
  :root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(1){grid-column:1 / -1;}
  :root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(2),
  :root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(3),
  :root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(4){margin-top:0;}
  :root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(2){margin-top:4.6rem;}
  :root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(2)::before{width:100%;}
  :root main:nth-of-type(1):not(:has(> h1)) > div:not(:has(> h2)){columns:1;}
}

/* ═══════════════════════════════════════════════════════════════
   ARTICLE  (main WITH a direct <h1>)
   ═══════════════════════════════════════════════════════════════ */
:root main:nth-of-type(1):has(> h1){
  max-width:720px;width:auto;margin:0 auto;
  padding:clamp(1.8rem,4vw,2.8rem) 1.4rem clamp(2.4rem,5vw,3.6rem);}
:root main:nth-of-type(1):has(> h1) > h1{
  font-family:var(--serif);font-size:clamp(2.1rem,5vw,3rem);font-weight:700;line-height:1.12;
  letter-spacing:-.015em;margin:.3rem 0 .5rem;}
:root main:nth-of-type(1):has(> h1) > span{
  display:block;font-family:var(--sans);font-size:.76rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.18em;color:var(--accent-dark);margin:0 0 1.9rem;}
:root main:nth-of-type(1):has(> h1) > article > img{
  width:100%;border-radius:var(--radius);margin:1.9rem 0;display:block;
  box-shadow:0 2px 10px rgba(0,0,0,.08);}
:root main:nth-of-type(1):has(> h1) > article > img:first-child{margin-top:.4rem;margin-bottom:2.2rem;}
:root main:nth-of-type(1):has(> h1) > article > p{
  font-size:1.075rem;line-height:1.8;color:var(--ink);margin:0 0 1.25rem;max-width:66ch;}
/* drop cap — moment colour (place #2) */
:root main:nth-of-type(1):has(> h1) > article > p:first-of-type::first-letter{
  float:left;font-family:var(--serif);font-weight:700;font-size:3.6rem;line-height:.8;
  color:var(--moment);margin:.14rem .55rem 0 0;}
:root main:nth-of-type(1):has(> h1) > article > h2{
  font-family:var(--serif);font-size:clamp(1.55rem,3.5vw,2rem);font-weight:600;
  margin:2.9rem 0 1rem;padding:0;border:none;}
/* dinkus divider before each section */
:root main:nth-of-type(1):has(> h1) > article > h2::before{
  content:"✦ ✦ ✦";display:block;text-align:center;color:var(--accent);
  font-size:.82rem;font-weight:400;letter-spacing:.5em;text-indent:.5em;opacity:.7;margin:0 0 1.5rem;}
:root main:nth-of-type(1):has(> h1) > article > h3{
  font-family:var(--serif);font-size:1.3rem;font-weight:600;margin:2rem 0 .6rem;}
:root main:nth-of-type(1):has(> h1) > article ul,
:root main:nth-of-type(1):has(> h1) > article ol{max-width:66ch;margin:0 0 1.25rem;padding-left:1.4rem;line-height:1.75;}
:root main:nth-of-type(1):has(> h1) > article li{margin-bottom:.5rem;}
/* body links — navy, ocre underline */
:root main:nth-of-type(1):has(> h1) > article a{
  color:var(--primary);border-bottom:1px solid rgba(156,126,26,.5);text-decoration:none;font-weight:500;}
:root main:nth-of-type(1):has(> h1) > article a:hover{color:var(--accent-dark);border-bottom-color:var(--accent);}
/* affiliate /r/ links — INLINE mid-sentence → warm highlighted link, not a block pill
   (path repeats the body-link element chain + attr so it beats it on specificity, RULE J) */
:root main:nth-of-type(1):has(> h1) > article p a[href^="/r/"],
:root main:nth-of-type(1):has(> h1) > article li a[href^="/r/"]{
  background:var(--accent-light);color:var(--accent-dark);font-weight:600;
  padding:.06em .42em;border-radius:4px;border-bottom:none;
  box-shadow:inset 0 -2px 0 rgba(156,126,26,.4);
  transition:background .15s ease,color .15s ease;}
:root main:nth-of-type(1):has(> h1) > article p a[href^="/r/"]:hover,
:root main:nth-of-type(1):has(> h1) > article li a[href^="/r/"]:hover{background:var(--accent);color:#fff;}
:root main:nth-of-type(1):has(> h1) > article p a[href^="/r/"]::after,
:root main:nth-of-type(1):has(> h1) > article li a[href^="/r/"]::after{content:" ↗";font-size:.82em;}
/* disclaimer / note box */
:root main:nth-of-type(1):has(> h1) > article > div{
  margin-top:2.6rem;padding:1.2rem 1.5rem;background:var(--paper-alt);
  border-left:3px solid var(--ink-mute);border-radius:0 var(--radius) var(--radius) 0;
  font-size:.9rem;line-height:1.65;color:var(--ink-soft);}
:root main:nth-of-type(1):has(> h1) > article > div em{font-style:normal;font-weight:600;color:var(--ink);}

/* ── ARTICLES CONNEXES — the dark-strip fix: warm panel, legible list ── */
:root main:nth-of-type(1):has(> h1) > nav{
  background:var(--paper-card);border:1px solid var(--line);border-top:3px solid var(--accent);
  border-radius:var(--radius);margin-top:3.6rem;padding:1.6rem 1.9rem 1.7rem;}
:root main:nth-of-type(1):has(> h1) > nav p{margin:0;max-width:none;line-height:2.1;}
:root main:nth-of-type(1):has(> h1) > nav em{
  display:block;font-style:normal;font-family:var(--sans);font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.18em;color:var(--accent-dark);margin-bottom:.7rem;}
:root main:nth-of-type(1):has(> h1) > nav a{
  color:var(--primary);font-weight:500;text-decoration:none;
  border-bottom:1px solid rgba(48,74,98,.26);}
:root main:nth-of-type(1):has(> h1) > nav a:hover{color:var(--accent-dark);border-bottom-color:var(--accent);}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */
:root body > footer{
  background:var(--primary-dark);color:rgba(255,255,255,.72);font-family:var(--sans);
  font-size:.85rem;text-align:center;padding:2.4rem 1.5rem;margin-top:3.5rem;
  border-top:3px solid var(--accent);}
:root body > footer a{color:rgba(255,255,255,.86);text-decoration:none;border-bottom:1px solid transparent;}
:root body > footer a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.5);}


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


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


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


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


/* refix iter1: full-row selection band and boxed archive tail */
:root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(2)::before {
  content: "LA SÉLECTION — À LIRE EN PREMIER";
  display: flex;
  align-items: center;
  min-height: 44px;
  width: calc(300% + 3.2rem);
  padding: 0 .95rem .78rem;
  background: var(--paper);
  border-bottom: 1px solid rgba(48,74,98,.34);
  color: var(--primary-dark);
  line-height: 1.35;
}

:root main:nth-of-type(1):not(:has(> h1)) > div:not(:has(> h2)) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 16px;
  columns: auto;
  align-items: stretch;
}

:root main:nth-of-type(1):not(:has(> h1)) > div:not(:has(> h2))::before {
  grid-column: 1 / -1;
  column-span: none;
  margin-bottom: 30px;
}

:root main:nth-of-type(1):not(:has(> h1)) > div:not(:has(> h2)) > p {
  display: flex;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
}

:root main:nth-of-type(1):not(:has(> h1)) > div:not(:has(> h2)) > p a {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 68px;
  padding: 20px 22px;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
  color: var(--primary);
  text-decoration: none;
  transition: box-shadow .18s ease, transform .18s ease, color .15s ease, border-color .15s ease, background .15s ease;
}

:root main:nth-of-type(1):not(:has(> h1)) > div:not(:has(> h2)) > p a:hover {
  background: var(--paper-alt);
  border-color: rgba(156,126,26,.42);
  box-shadow: 0 7px 18px rgba(48,74,98,.11);
  color: var(--accent-dark);
  transform: translateY(-1px);
}

:root main:nth-of-type(1):has(> h1) > span::after {
  content: " · Romain · lecture 6 min";
}

@media (max-width: 640px) {
  :root main:nth-of-type(1):not(:has(> h1)) > div:nth-child(2)::before {
    width: 100%;
    min-height: 42px;
    padding: 0 0 .72rem;
  }

  :root main:nth-of-type(1):not(:has(> h1)) > div:not(:has(> h2)) {
    grid-template-columns: 1fr;
    gap: 12px;
    columns: auto;
  }

  :root main:nth-of-type(1):not(:has(> h1)) > div:not(:has(> h2))::before {
    margin-bottom: 28px;
  }

  :root main:nth-of-type(1):not(:has(> h1)) > div:not(:has(> h2)) > p a {
    padding: 18px 20px;
  }
}


/* premium-upgrade v1 */
/* premium editorial upgrade — style=Monocle-Swiss overlay=25% grid=mixed scale=balanced family=flat-divs */


/* ── CARD 1: featured full-row with 300px photo header (via card-own background, NOT ::before —
    leaves ::before free for existing site's M2 label / meta content). ── */
:root main:not(:has(> h1)) > div:nth-of-type(1) {
  grid-column: 1 / -1;
  position: relative;      /* anchor for existing site's ::before label if it uses absolute */
  overflow: visible;       /* let above-card labels render without clipping */
  padding: 320px 44px 40px !important;
  border-radius: 8px;
  background:
    url("/theme-assets/premium-hero-card-1.webp") no-repeat center top / 100% 300px,
    var(--bg) !important;
  margin-top: 60px !important;  /* room for above-card M2 label (existing site convention) */
}

/* ── CARDS 2-4: medium with 180px photo header (background technique, ::before untouched) ── */
:root main:not(:has(> h1)) > div:nth-of-type(2) {
  padding: 200px 32px 32px !important;
  border-radius: 8px;
  background:
    url("/theme-assets/premium-hero-card-2.webp") no-repeat center top / 100% 180px,
    var(--bg) !important;
}
:root main:not(:has(> h1)) > div:nth-of-type(3) {
  padding: 200px 32px 32px !important;
  border-radius: 8px;
  background:
    url("/theme-assets/premium-hero-card-3.webp") no-repeat center top / 100% 180px,
    var(--bg) !important;
}
:root main:not(:has(> h1)) > div:nth-of-type(4) {
  padding: 200px 32px 32px !important;
  border-radius: 8px;
  background:
    url("/theme-assets/premium-hero-card-4.webp") no-repeat center top / 100% 180px,
    var(--bg) !important;
}

/* ── flat-divs family: cards 5 & 6 also get photo headers ── */
:root main:not(:has(> h1)) > div:nth-of-type(5) {
  padding: 200px 32px 32px !important;
  border-radius: 8px;
  background:
    url("/theme-assets/premium-hero-strip-1.webp") no-repeat center top / 100% 180px,
    var(--bg) !important;
}
:root main:not(:has(> h1)) > div:nth-of-type(6) {
  padding: 200px 32px 32px !important;
  border-radius: 8px;
  background:
    url("/theme-assets/premium-hero-strip-2.webp") no-repeat center top / 100% 180px,
    var(--bg) !important;
}

/* ── Article page: drop cap + dinkus dividers ── */
:root main:has(> h1) > article > p:first-of-type::first-letter {
  font-family: var(--fh), Georgia, serif;
  font-size: 76px; line-height: 0.9; color: var(--primary);
  float: left; margin: 6px 12px 0 0; padding: 0; font-weight: 400;
}
:root main:has(> h1) > article > h2 + p ~ h2::before {
  content: "✦ ✦ ✦";
  display: block; text-align: center; color: var(--accent);
  font-size: 12px; letter-spacing: 0.3em; margin-bottom: 24px;
  font-weight: 400;
}

/* ── Mobile responsive: adjust photo heights via background-size on the card itself ── */
@media (max-width: 720px) {
  :root main:not(:has(> h1)) > div:nth-of-type(1) {
    padding: 240px 22px 28px !important;
    background:
      url("/theme-assets/premium-hero-card-1.webp") no-repeat center top / 100% 220px,
      var(--bg) !important;
  }
  :root main:not(:has(> h1)) > div:nth-of-type(2) {
    padding: 180px 22px 26px !important;
    background:
      url("/theme-assets/premium-hero-card-2.webp") no-repeat center top / 100% 160px,
      var(--bg) !important;
  }
  :root main:not(:has(> h1)) > div:nth-of-type(3) {
    padding: 180px 22px 26px !important;
    background:
      url("/theme-assets/premium-hero-card-3.webp") no-repeat center top / 100% 160px,
      var(--bg) !important;
  }
  :root main:not(:has(> h1)) > div:nth-of-type(4) {
    padding: 180px 22px 26px !important;
    background:
      url("/theme-assets/premium-hero-card-4.webp") no-repeat center top / 100% 160px,
      var(--bg) !important;
  }
  :root main:not(:has(> h1))::before,
  :root main:not(:has(> h1))::after { min-height: 240px; }
  :root main:has(> h1) > article > p:first-of-type::first-letter { font-size: 60px; }
}