*{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}
.astro-Jd9AQzBX{max-width:640px;margin:0 auto;padding:0 20px}
.astro-UYKiTAHy{padding:60px 0 40px;border-bottom:1px solid #ccc;margin-bottom:48px}
.astro-UYKiTAHy h1{font-size:24px;font-weight:400;letter-spacing:-.5px}
.astro-UYKiTAHy p{font-size:14px;color:#777;margin-top:6px;font-style:italic}
.astro-UYKiTAHy a{color:#2a2a2a;text-decoration:none;font-size:24px;font-weight:400;letter-spacing:-.5px}
.astro-8LvRvE3q{padding:20px 0}
.astro-8LvRvE3q h2{font-size:18px;font-weight:400;margin-bottom:4px}
.astro-8LvRvE3q h2 a{color:#2a2a2a;text-decoration:none;border-bottom:1px solid transparent}
.astro-8LvRvE3q h2 a:hover{border-bottom-color:#2a2a2a}
.astro-8LvRvE3q .astro-XwD2YPRB{font-size:12px;color:#aaa;margin-bottom:6px}
.astro-8LvRvE3q p{font-size:14px;color:#666}
.astro-Zv0UIs0i{color:#888;font-size:13px;text-decoration:none}
.astro-Zv0UIs0i:hover{color:#2a2a2a}
.astro-svUJz8TB{padding-bottom:60px}
.astro-svUJz8TB h1{font-size:28px;font-weight:400;margin-bottom:8px}
.astro-svUJz8TB .astro-XwD2YPRB{font-size:12px;color:#aaa;display:block;margin-bottom:32px}
.astro-svUJz8TB h2{font-size:21px;font-weight:400;margin:40px 0 12px;border-bottom:1px solid #eee;padding-bottom:6px}
.astro-svUJz8TB h3{font-size:17px;margin:28px 0 8px}
.astro-svUJz8TB p{margin-bottom:18px;font-size:16px}
.astro-svUJz8TB ul,.astro-svUJz8TB ol{margin:0 0 18px 20px}
.astro-svUJz8TB a{color:#555;border-bottom:1px solid #ccc}
.astro-svUJz8TB a:hover{color:#000;border-bottom-color:#000}
.astro-svUJz8TB img{max-width:100%;height:auto;margin:24px 0}
.astro-3KWjaxun{border-top:1px solid #ddd;padding:20px 0;margin-top:48px;text-align:center;font-size:12px;color:#aaa}
.astro-3KWjaxun a{color:#aaa;text-decoration:none}
.astro-yhGPDyVI{padding:0 0 16px;margin-bottom:24px;font-size:12px;color:#aaa;font-style:italic;border-bottom:1px solid #eee}
.astro-zsKTyPvE{padding:16px 0 0;margin-top:32px;font-size:11px;color:#999;border-top:1px solid #eee}
.astro-WgQS8dE3{font-size:12px;color:#aaa;margin:-26px 0 32px;font-weight:300}
.astro-ElaGE96R{margin:0 auto 32px;max-width:720px}
.astro-yZjphPHE{width:100%;height:auto}
.astro-gAS8Tm5a{margin-top:40px;padding-top:20px;border-top:1px solid #eee;font-size:14px;color:#888}
.astro-gAS8Tm5a em{color:#aaa}
.astro-gAS8Tm5a a{color:#555;border-bottom:1px solid #ddd;text-decoration:none}
.astro-2djMral2{padding:24px 0 0;border-top:1px solid #eee;margin-top:24px}
.astro-2djMral2 p{padding:3px 0;margin:0;font-size:15px}
.astro-2djMral2 a{color:#2a2a2a;text-decoration:none;border-bottom:1px solid transparent}
.astro-2djMral2 a:hover{border-bottom-color:#2a2a2a}
/* === Theme === */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fraunces:wght@400;700&display=swap');
body{font-family:'Inter',sans-serif;color:#1F2937;background:#FDFCFB}
.astro-UYKiTAHy{background:#1B2B34;color:#fff}
.astro-UYKiTAHy h1{font-family:'Fraunces',serif;color:#fff}
.astro-UYKiTAHy p{color:rgba(255,255,255,.75)}
.astro-UYKiTAHy a{color:#fff;text-decoration:none}
.card h2{font-family:'Fraunces',serif}
.card h2 a{color:#1B2B34}
.card h2 a:hover{color:#D97706}
.read-more{color:#D97706}
.article-content h1{font-family:'Fraunces',serif}
.article-content h2{font-family:'Fraunces',serif}
.article-content a{color:#D97706}
.article-content img{border-radius:8px}
.affiliate-disclosure{border-radius:8px}
.ymyl-disclaimer{border-radius:8px}
/* === Custom === */
/* v.4dae34 — layout revision */
/* nw-network-fr — « Tisser son Réseau » · Cédric Dumont, graphiste freelance à Orléans
   Carnet de réseautage maladroit — honnête, à hauteur d'ami.
   Build : ASTRO (classes astro-* obfusquées) → sélecteurs structurels + :root pour la spécificité.
   Palette : ardoise #3E4C56 + brique #B5502F sur parchemin #F6F1E8 ; moment bronze #8B6B47 (×2).
   Voix : Piazzolla (display serif italique) + Newsreader (corps serif) + Karla (méta sans traqué).
   NB : l'@import est ignoré (CSS concaténé) → @font-face position-indépendants. */

/* ── Webfonts (sous-ensemble latin, variable woff2) ─────────────── */
@font-face{font-family:'Piazzolla';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(https://fonts.gstatic.com/s/piazzolla/v42/N0bE2SlTPu5rIkWIZjVKKtYtfxYqZ4RJBFzFV4kLYA.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Piazzolla';font-style:italic;font-weight:400 700;font-display:swap;
  src:url(https://fonts.gstatic.com/s/piazzolla/v42/N0bG2SlTPu5rIkWIZjVgI-TckS03oGpPETyEJ887YtBF.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:'Newsreader';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(https://fonts.gstatic.com/s/newsreader/v26/cY9VfjOCX1hbuyalUrK49dLac06G1ZGsZBtoBAbNJYQ.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:'Newsreader';font-style:italic;font-weight:400 500;font-display:swap;
  src:url(https://fonts.gstatic.com/s/newsreader/v26/cY9kfjOCX1hbuyalUrK439vogqC9yFZCYg7oRZaLP4obnf7fTXglsMwoT9ZHFjQ.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:'Karla';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(https://fonts.gstatic.com/s/karla/v33/qkB9XvYC6trAT55ZBi1ueQVIjQTD-JrIH2G7nytkHRyQ8p4wUje6bg.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;}

/* ── Tokens ─────────────────────────────────────────────────────── */
:root{
  --paper:      #F6F1E8;   /* page — parchemin, jamais blanc */
  --surface:    #FBF6EC;   /* cartes — crème claire */
  --surface-2:  #EFE7D6;   /* bandes / méta */
  --ink:        #2A2622;   /* titres */
  --text:       #3C3630;   /* corps */
  --muted:      #756B5C;   /* dates, méta */
  --slate:      #3E4C56;   /* primaire — ardoise */
  --slate-dk:   #2A343C;
  --slate-lt:   #5A6B76;
  --brick:      #B5502F;   /* accent — brique d'Orléans */
  --brick-dk:   #8F3E22;
  --moment:     #8B6B47;   /* couleur-moment — 2 emplois : lettrine + filet du bandeau */
  --line:       rgba(42,38,34,.13);
  --line-soft:  rgba(42,38,34,.08);
  --shadow:     0 1px 4px rgba(42,38,34,.05);
  --shadow-lift:0 8px 24px rgba(42,38,34,.11);
  --display:    'Piazzolla', Georgia, serif;
  --serif:      'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:       'Karla', ui-sans-serif, 'Segoe UI', Helvetica, Arial, sans-serif;
  --col-gap:    34px;
}

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

:root body{
  font-family:var(--serif);
  font-size:18px;
  line-height:1.78;
  color:var(--text);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  margin:0;
}
:root h1,:root h2,:root h3,:root h4{
  font-family:var(--display);
  color:var(--ink);
  line-height:1.16;
  font-weight:600;
}
:root strong,:root b{ color:var(--ink); font-weight:600; }

/* ═══════════════════════════════════════════════════════════════════
   MASTHEAD — photo + voile ardoise + wordmark serif italique + manifeste
   ═══════════════════════════════════════════════════════════════════ */
:root body > header{
  border-bottom:1px solid var(--line);
  margin-bottom:0;
}
/* home : bandeau photo pleine largeur */
:root body > header:has(> h1){
  max-width:none;
  padding:70px 24px 60px;
  text-align:center;
  border-bottom:3px solid var(--moment);   /* MOMENT 1/2 */
  background:
    linear-gradient(rgba(30,38,44,.72), rgba(30,38,44,.5)),
    url("/theme-assets/landing-photo.jpg") center 42% / cover no-repeat;
}
:root body > header:has(> h1)::before{
  content:"RÉSEAUTER À TÂTONS · ORLÉANS";
  display:block;
  font-family:var(--sans);
  font-size:12px;
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:rgba(246,241,232,.72);
  margin-bottom:16px;
}
:root body > header:has(> h1) h1{
  font-family:var(--display);
  font-style:italic;
  font-weight:500;
  font-size:52px;
  line-height:1.04;
  letter-spacing:.005em;
  color:#FBF6EC;
  margin:0 auto 14px;
  max-width:16ch;
}
:root body > header:has(> h1) p{
  font-family:var(--serif);
  font-style:italic;
  font-size:18px;
  line-height:1.6;
  color:rgba(246,241,232,.9);
  max-width:60ch;
  margin:0 auto;
}
/* article : barre-titre sobre */
:root body > header:not(:has(> h1)){
  padding:26px 24px;
  text-align:center;
  background:var(--surface);
}
:root body > header:not(:has(> h1)) a{
  font-family:var(--display);
  font-style:italic;
  font-weight:500;
  font-size:23px;
  letter-spacing:.005em;
  color:var(--slate-dk);
  text-decoration:none;
  border:0;
}
:root body > header:not(:has(> h1)) a:hover{ color:var(--brick); }

/* ═══════════════════════════════════════════════════════════════════
   ACCUEIL — grille 2 colonnes ; main EST la grille (cartes = enfants directs)
   ═══════════════════════════════════════════════════════════════════ */
:root main:not(:has(> article)){
  max-width:1120px;
  margin:0 auto;
  padding:82px 24px 56px;
  display:grid;
  grid-template-columns:repeat(6,1fr);   /* LCM(2,3) : journal = span 3 (2/rangée), queue = span 2 (3/rangée) */
  column-gap:var(--col-gap);
  row-gap:46px;
  align-items:stretch;
}

/* ---- Carte générique (journal) ---- */
:root main:not(:has(> article)) > div{
  grid-column:span 3;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:9px;
  box-shadow:var(--shadow);
  padding:28px 34px 30px;
  display:flex;
  flex-direction:column;
  transition:transform .16s ease, box-shadow .16s ease;
}
:root main:not(:has(> article)) > div:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-lift);
}
/* date / kicker */
:root main:not(:has(> article)) > div > p:first-of-type{
  font-family:var(--sans);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 11px;
}
/* titre */
:root main:not(:has(> article)) > div h2{
  font-family:var(--display);
  font-size:21px;
  line-height:1.24;
  font-weight:600;
  margin:0 0 11px;
}
:root main:not(:has(> article)) > div h2 a{
  color:var(--ink);
  text-decoration:none;
  border:0;
}
:root main:not(:has(> article)) > div h2 a:hover{ color:var(--brick); }
/* extrait */
:root main:not(:has(> article)) > div > p:last-of-type{
  font-family:var(--serif);
  font-size:15.5px;
  line-height:1.62;
  color:var(--text);
  margin:0 0 20px;
  max-width:64ch;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
/* CTA « read more » — pilule cerclée ardoise */
:root main:not(:has(> article)) > div > a{
  align-self:flex-start;
  margin-top:auto;
  font-family:var(--sans);
  font-size:12px;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--slate);
  background:var(--surface);
  border:1px solid var(--slate-lt);
  border-radius:22px;
  padding:8px 18px;
  text-decoration:none;
  transition:background .16s ease, color .16s ease, border-color .16s ease;
}
:root main:not(:has(> article)) > div > a:hover{
  background:var(--slate);
  border-color:var(--slate);
  color:#FBF6EC;
}

/* ═══════════════════════════════════════════════════════════════════
   HÉROS — carte 1, pleine largeur, la voix forte
   ═══════════════════════════════════════════════════════════════════ */
:root main:not(:has(> article)) > div:first-child{
  grid-column:1 / -1;
  padding:44px 48px 46px;
  border-top:3px solid var(--brick);
}
:root main:not(:has(> article)) > div:first-child > p:first-of-type::before{
  content:"DERNIÈRE ENTRÉE · ";
  color:var(--brick);
}
:root main:not(:has(> article)) > div:first-child > p:first-of-type::after{
  content:" · PAR CÉDRIC, ORLÉANS · 5 MIN";
}
:root main:not(:has(> article)) > div:first-child > p:first-of-type{
  font-size:12px;
  margin-bottom:18px;
}
:root main:not(:has(> article)) > div:first-child h2{
  font-size:42px;
  line-height:1.08;
  letter-spacing:-.01em;
  margin-bottom:18px;
  max-width:20ch;
}
:root main:not(:has(> article)) > div:first-child > p:last-of-type{
  font-size:20px;
  line-height:1.5;
  max-width:60ch;
  -webkit-line-clamp:4;
  margin-bottom:26px;
}
:root main:not(:has(> article)) > div:first-child > p:last-of-type::first-letter{
  font-family:var(--display);
  font-weight:700;
  font-size:3.4em;
  line-height:.8;
  float:left;
  margin:6px 12px 0 0;
  color:var(--moment);   /* MOMENT 2/2 */
}
/* CTA héros — pilule pleine brique */
:root main:not(:has(> article)) > div:first-child > a{
  font-size:13px;
  padding:11px 26px;
  color:#FBF6EC;
  background:var(--brick);
  border:1px solid var(--brick);
  border-radius:24px;
}
:root main:not(:has(> article)) > div:first-child > a:hover{
  background:var(--brick-dk);
  border-color:var(--brick-dk);
  color:#FBF6EC;
}

/* ═══════════════════════════════════════════════════════════════════
   À LIRE EN PREMIER — cartes 2 & 3, bandeau-titre pleine ligne
   ═══════════════════════════════════════════════════════════════════ */
:root main:not(:has(> article)) > div:nth-child(2),
:root main:not(:has(> article)) > div:nth-child(3){
  margin-top:4.5rem;
  position:relative;
}
:root main:not(:has(> article)) > div:nth-child(2)::before{
  content:"À LIRE EN PREMIER — SI VOUS DÉBUTEZ DANS LE VIDE";
  position:absolute;
  left:0;
  bottom:calc(100% + 1.2rem);
  width:calc(200% + var(--col-gap));
  font-family:var(--sans);
  font-size:13px;
  font-weight:600;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--slate-dk);
  padding-bottom:.6rem;
  border-bottom:1px solid var(--line);
}

/* ═══════════════════════════════════════════════════════════════════
   STRIP 1 — bande photo « PAR ORDRE D'ÉCRITURE » (avant le journal)
   ancrée sur la carte 4 ; marge sur 4 & 5 pour dégager la rangée
   ═══════════════════════════════════════════════════════════════════ */
:root main:not(:has(> article)) > div:nth-child(4),
:root main:not(:has(> article)) > div:nth-child(5){
  margin-top:16.5rem;
}
:root main:not(:has(> article)) > div:nth-child(4){ position:relative; }
:root main:not(:has(> article)) > div:nth-child(4)::before{
  content:"PAR ORDRE D'ÉCRITURE";
  position:absolute;
  left:0;
  bottom:calc(100% + 1.7rem);
  width:calc(200% + var(--col-gap));
  height:200px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:
    linear-gradient(rgba(20,24,28,.55), rgba(20,24,28,.25)),
    url("/theme-assets/hero-photo.jpg") center 30% / cover no-repeat;
  font-family:var(--sans);
  font-size:14px;
  font-weight:600;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:#FBF6EC;
  text-shadow:0 1px 6px rgba(0,0,0,.45);
}

/* ═══════════════════════════════════════════════════════════════════
   QUEUE — index « ARTICLES PRÉCÉDENTS » (3 dernières cartes) + STRIP 2
   ═══════════════════════════════════════════════════════════════════ */
/* index magazine : mêmes cartes crème boxées que le journal, mais plus serrées
   (border + radius + ombre + hover-lift + padding) — parité haut/bas de page (M7) */
:root main:not(:has(> article)) > div:nth-last-child(-n+3){
  grid-column:span 2;               /* 3 cellules égales par rangée (index magazine) */
  margin-top:16rem;                 /* marge haute IDENTIQUE sur les 3 → bord sup. aligné + dégage le STRIP 2 */
  flex-direction:column;
  padding:26px 32px 28px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:var(--shadow);
}
:root main:not(:has(> article)) > div:nth-last-child(-n+3):hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-lift);
  background:var(--surface);
}
/* la marge haute est portée à l'identique par les 3 cellules (cf. -n+3 ci-dessus) → rangée alignée (M4 gotcha 1) ;
   elle est remise à 0 sur les cellules 2 & 3 uniquement en mono-colonne mobile (cf. media query) */
/* date — kicker */
:root main:not(:has(> article)) > div:nth-last-child(-n+3) > p:first-of-type{
  margin:0 0 9px;
  font-size:11px;
  color:var(--muted);
}
/* titre */
:root main:not(:has(> article)) > div:nth-last-child(-n+3) h2{
  margin:0;
  font-family:var(--display);
  font-weight:500;
  font-size:16.5px;
  line-height:1.3;
}
:root main:not(:has(> article)) > div:nth-last-child(-n+3) h2 a{ color:var(--ink); }
:root main:not(:has(> article)) > div:nth-last-child(-n+3) h2 a:hover{ color:var(--brick); }
/* masquer extrait + CTA dans l'index */
:root main:not(:has(> article)) > div:nth-last-child(-n+3) > p:last-of-type,
:root main:not(:has(> article)) > div:nth-last-child(-n+3) > a{ display:none; }
/* STRIP 2 : la 1re cellule de l'index (col. 1) porte le bandeau ; grid-column-start:1 la force en nouvelle rangée */
:root main:not(:has(> article)) > div:nth-last-child(3){
  grid-column:1 / span 2;
  position:relative;
}
:root main:not(:has(> article)) > div:nth-last-child(3)::before{
  content:"ARTICLES PRÉCÉDENTS";
  position:absolute;
  left:0;
  bottom:calc(100% + 1.7rem);
  width:calc(300% + 2 * var(--col-gap));   /* 3 cellules + 2 gaps = pleine largeur de rangée */
  height:205px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:
    linear-gradient(rgba(20,24,28,.58), rgba(20,24,28,.3)),
    url("/theme-assets/hero-photo.jpg") center 70% / cover no-repeat;
  font-family:var(--sans);
  font-size:14px;
  font-weight:600;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:#FBF6EC;
  text-shadow:0 1px 6px rgba(0,0,0,.45);
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE ARTICLE
   ═══════════════════════════════════════════════════════════════════ */
:root main:has(> article){
  max-width:760px;
  margin:0 auto;
  padding:70px 24px 60px;
}
:root main:has(> article) > h1{
  font-family:var(--display);
  font-weight:700;
  font-size:39px;
  line-height:1.12;
  letter-spacing:-.01em;
  color:var(--ink);
  margin:0 0 14px;
}
:root main:has(> article) > span{
  font-family:var(--sans);
  font-size:12px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  display:block;
  margin-bottom:34px;
}
/* ligne-persona après la date (byline + lieu + temps de lecture) — S6 */
:root main:has(> article) > span::after{
  content:" · PAR CÉDRIC DUMONT · ORLÉANS · 6 MIN DE LECTURE";
  color:var(--muted);
}
/* corps */
:root main:has(> article) > article > p{
  font-family:var(--serif);
  font-size:19px;
  line-height:1.8;
  color:var(--text);
  margin:0 0 1.35em;
  max-width:66ch;
}
:root main:has(> article) > article > p a{
  color:var(--brick-dk);
  text-decoration:underline;
  text-decoration-color:rgba(143,62,34,.4);
  text-underline-offset:3px;
  border:0;
}
:root main:has(> article) > article > p a:hover{
  color:var(--brick);
  text-decoration-color:var(--brick);
}
/* image — cadre éditorial */
:root main:has(> article) article img{
  border-radius:10px;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  margin:30px auto;
}
/* sous-titres + dinkus */
:root main:has(> article) > article > h2{
  font-family:var(--display);
  font-weight:600;
  font-size:27px;
  line-height:1.2;
  color:var(--ink);
  margin:1.9em 0 .55em;
  border:0;
  padding:0;
}
:root main:has(> article) > article > h2::before{
  content:"❧";
  display:block;
  text-align:center;
  font-size:20px;
  color:var(--slate-lt);
  margin:0 0 .7em;
  font-weight:400;
}
:root main:has(> article) > article > h3{
  font-family:var(--display);
  font-weight:600;
  font-size:21px;
  color:var(--slate-dk);
  margin:1.5em 0 .4em;
}
:root main:has(> article) > article > ul,
:root main:has(> article) > article > ol{
  max-width:66ch;
  margin:0 0 1.35em 1.4em;
  padding-left:1em;
}
:root main:has(> article) > article > ul li,
:root main:has(> article) > article > ol li{
  font-family:var(--serif);
  font-size:18px;
  line-height:1.72;
  margin-bottom:.5em;
}
:root main:has(> article) > article > ul li::marker{ color:var(--brick); }
:root main:has(> article) > article > ol li::marker{ color:var(--slate); font-weight:600; }

/* citation — filet brique + guillemet suspendu */
:root main:has(> article) article blockquote{
  position:relative;
  margin:1.8em 0;
  padding:.3em 0 .3em 1.6rem;
  border-left:3px solid var(--brick);
  font-family:var(--display);
  font-style:italic;
  font-size:21px;
  line-height:1.5;
  color:var(--ink);
  max-width:64ch;
}
:root main:has(> article) article blockquote p{ margin:0; font-size:inherit; }
:root main:has(> article) article blockquote cite{
  display:block;
  margin-top:.6em;
  font-family:var(--sans);
  font-style:normal;
  font-size:13px;
  letter-spacing:.05em;
  color:var(--muted);
}

/* tableaux — le glossaire, teinté à la palette */
:root main:has(> article) article table{
  width:100%;
  border-collapse:collapse;
  margin:26px 0;
  font-family:var(--serif);
  font-size:15.5px;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
}
:root main:has(> article) article th{
  background:var(--slate);
  color:#FBF6EC;
  font-family:var(--sans);
  font-weight:600;
  font-size:13px;
  letter-spacing:.04em;
  text-align:left;
  padding:11px 14px;
}
:root main:has(> article) article td{
  padding:10px 14px;
  border-top:1px solid var(--line);
  color:var(--text);
}
:root main:has(> article) article tr:nth-child(even) td{ background:var(--surface); }

/* CTA affiliation — puce brique INLINE (pas de pilule mi-phrase) — bat le lien de corps (RULE J) */
:root main:has(> article) > article > p a[href^="/get/"]{
  font-family:var(--sans);
  font-weight:600;
  font-size:.92em;
  color:var(--brick-dk);
  background:rgba(181,80,47,.11);
  border:1px solid rgba(181,80,47,.28);
  border-radius:6px;
  padding:1px 9px 2px;
  text-decoration:none;
  white-space:nowrap;
}
:root main:has(> article) > article > p a[href^="/get/"]::before{
  content:"→ ";
  color:var(--brick);
}
:root main:has(> article) > article > p a[href^="/get/"]:hover{
  background:var(--brick);
  border-color:var(--brick);
  color:#FBF6EC;
}
:root main:has(> article) > article > p a[href^="/get/"]:hover::before{ color:#FBF6EC; }

/* Articles connexes */
:root main:has(> article) > nav{
  margin-top:52px;
  padding-top:26px;
  border-top:1px solid var(--line);
}
:root main:has(> article) > nav em{
  display:block;
  font-family:var(--sans);
  font-style:normal;
  font-size:13px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:14px;
}
:root main:has(> article) > nav p{ margin:0; font-size:16px; line-height:1.9; }
:root main:has(> article) > nav a{
  font-family:var(--display);
  font-weight:500;
  color:var(--slate-dk);
  text-decoration:none;
  border:0;
  border-bottom:1px solid var(--line);
}
:root main:has(> article) > nav a:hover{ color:var(--brick); border-bottom-color:var(--brick); }

/* ── Footer ─────────────────────────────────────────────────────── */
:root body > footer{
  margin-top:76px;
  padding:34px 24px;
  background:var(--slate-dk);
  border:0;
  text-align:center;
}
:root body > footer small,
:root body > footer a{
  font-family:var(--sans);
  font-size:13px;
  color:rgba(246,241,232,.82);
}
:root body > footer a{ text-decoration:none; border:0; }
:root body > footer a:hover{ color:#fff; text-decoration:underline; }

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width:760px){
  :root body > header:has(> h1){ padding:50px 20px 44px; }
  :root body > header:has(> h1) h1{ font-size:37px; }
  :root body > header:has(> h1)::before{ font-size:11px; letter-spacing:.2em; }

  :root main:not(:has(> article)){
    padding:56px 20px 36px;
    grid-template-columns:1fr;
    row-gap:32px;
  }
  :root main:not(:has(> article)) > div{ padding:24px 24px 26px; }
  :root main:not(:has(> article)) > div:first-child{ padding:30px 24px 32px; }
  :root main:not(:has(> article)) > div:first-child h2{ font-size:31px; }
  :root main:not(:has(> article)) > div:first-child > p:last-of-type{ font-size:17.5px; }

  /* bandeau picks : statique, pleine largeur mono-colonne */
  :root main:not(:has(> article)) > div:nth-child(2){ margin-top:0; }
  :root main:not(:has(> article)) > div:nth-child(3){ margin-top:32px; }
  :root main:not(:has(> article)) > div:nth-child(2)::before{
    position:static;
    display:block;
    width:100%;
    margin-bottom:1.1rem;
  }

  /* strip 1 : recalé mono-colonne */
  :root main:not(:has(> article)) > div:nth-child(5){ margin-top:32px; }
  :root main:not(:has(> article)) > div:nth-child(4){ margin-top:14.5rem; }
  :root main:not(:has(> article)) > div:nth-child(4)::before{
    width:100%;
    height:168px;
    bottom:calc(100% + 1.4rem);
  }

  /* queue — mono-colonne : chaque cellule repasse en span auto, marge haute seulement sur la tête */
  :root main:not(:has(> article)) > div:nth-last-child(-n+3){ grid-column:auto; padding:22px 24px 24px; }
  :root main:not(:has(> article)) > div:nth-last-child(3){ margin-top:14rem; }
  :root main:not(:has(> article)) > div:nth-last-child(1),
  :root main:not(:has(> article)) > div:nth-last-child(2){ margin-top:0; }
  :root main:not(:has(> article)) > div:nth-last-child(3)::before{ height:172px; width:100%; }

  :root main:has(> article){ padding:48px 20px 48px; }
  :root main:has(> article) > h1{ font-size:31px; }
  :root main:has(> article) > article > p{ font-size:17.5px; }
  :root main:has(> article) > article > h2{ font-size:24px; }
  :root main:has(> article) article blockquote{ font-size:19px; }
}


/* 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=Kinfolk-minimal overlay=55% grid=equal scale=dramatic family=flat-divs */


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

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

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

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

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


/* premium-upgrade v4 */
/* premium-upgrade v4 — surgical bundle. Applied 2026-08-30.
   Fixes: M10 CTA / M11 dinkus leak / M4 heights / M9 typography / M5 frames.
   Kills v2 "LATEST" label (proven counterproductive from v2 diagnosis). */

/* ── Kill v2 counterproductive homepage label ── */
:root main:not(:has(> h1))::before { content: none !important; }

/* ── M10: affiliate CTA visibility on article body ── */
:root main:has(> h1) a[href^="/try/"],
:root main:has(> h1) a[href^="/ref/"],
:root main:has(> h1) a[href^="/go/"],
:root main:has(> h1) a[href^="/out/"],
:root main:has(> h1) a[href^="/check/"],
:root main:has(> h1) a[href^="/view/"],
:root main:has(> h1) a[href*="hotmart.com"],
:root main:has(> h1) a[href*="digistore24"],
:root main:has(> h1) a[href*="clickbank"] {
  display: inline-block !important;
  background: var(--primary) !important;
  color: var(--bg) !important;
  padding: 6px 14px !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  letter-spacing: 0.02em !important;
}

/* ── M11: prevent dinkus leaking onto article page's first h2 ── */
:root main:has(> h1) > article > h2:first-of-type::before {
  content: none !important;
}

/* ── M4: force equal-height cards via grid stretch + card fill ── */
:root main:not(:has(> h1)) > div:has(> div) {
  align-items: stretch !important;
}
:root main:not(:has(> h1)) > div:has(> div) > div {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
:root main:not(:has(> h1)) > div > article {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
/* also for flat-divs family */
:root main:not(:has(> h1)) > div {
  height: 100% !important;
}

/* ── M9: cap small-title weight so Bebas/Anton counters don't fill in ── */
:root main:not(:has(> h1)) > div > div > h2,
:root main:not(:has(> h1)) > div > div > h2 a,
:root main:not(:has(> h1)) > section > ul > li > a,
:root main:not(:has(> h1)) > div > p > a {
  font-weight: 500 !important;
}

/* ── M5: universal soft frame fallback for card-like elements ── */
:root main:not(:has(> h1)) > div > div,
:root main:not(:has(> h1)) > div > article,
:root main:not(:has(> h1)) > article {
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.05) !important;
}


/* premium-upgrade v5 */
/* premium-upgrade v5 — big M2 band + wider M10 CTA net + M8 breathing. 2026-08-31. */

/* ── M2: PROMINENT full-row label, not the small word v2 tried ── */
:root main:not(:has(> h1))::before {
  content: "◆ LATEST FEATURES ◆" !important;
  display: block !important;
  font-family: var(--fh, "PT Sans"), Georgia, serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  padding: 16px 24px 20px !important;
  margin: 0 0 40px !important;
  border-top: 3px solid var(--primary, #333) !important;
  border-bottom: 1px solid var(--border, #ccc) !important;
  color: var(--primary, #333) !important;
  background: transparent !important;
}

/* ── M10: broaden CTA net (Amazon, aff/ path, [target=_blank] product-shaped) ── */
:root main:has(> h1) a[href^="/try/"],
:root main:has(> h1) a[href^="/ref/"],
:root main:has(> h1) a[href^="/go/"],
:root main:has(> h1) a[href^="/out/"],
:root main:has(> h1) a[href^="/check/"],
:root main:has(> h1) a[href^="/view/"],
:root main:has(> h1) a[href^="/aff/"],
:root main:has(> h1) a[href^="/product/"],
:root main:has(> h1) a[href*="hotmart.com"],
:root main:has(> h1) a[href*="digistore24"],
:root main:has(> h1) a[href*="clickbank"],
:root main:has(> h1) a[href*="amazon."],
:root main:has(> h1) a[href*="/track/"],
:root main:has(> h1) a[href*="/link/"],
:root main:has(> h1) a[href*="lstrk.net"],
:root main:has(> h1) a[href*="thrivecart"] {
  display: inline-block !important;
  background: var(--primary) !important;
  color: var(--bg) !important;
  padding: 8px 18px !important;
  border-radius: 5px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  letter-spacing: 0.02em !important;
  margin: 4px 2px !important;
}

/* ── M8: article body breathing ── */
:root main:has(> h1) > article > p {
  line-height: 1.8 !important;
  margin-bottom: 20px !important;
}
:root main:has(> h1) > article > h2 {
  margin-top: 48px !important;
  margin-bottom: 18px !important;
}
:root main:not(:has(> h1)) > div:has(> div) {
  gap: 40px 32px !important;
}