*{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}
.css-46o4lyl{max-width:640px;margin:0 auto;padding:0 20px}
.css-5bkl53n{padding:60px 0 40px;border-bottom:1px solid #ccc;margin-bottom:48px}
.css-5bkl53n h1{font-size:24px;font-weight:400;letter-spacing:-.5px}
.css-5bkl53n p{font-size:14px;color:#777;margin-top:6px;font-style:italic}
.css-5bkl53n a{color:#2a2a2a;text-decoration:none;font-size:24px;font-weight:400;letter-spacing:-.5px}
.css-mqe185e{padding:20px 0}
.css-mqe185e h2{font-size:18px;font-weight:400;margin-bottom:4px}
.css-mqe185e h2 a{color:#2a2a2a;text-decoration:none;border-bottom:1px solid transparent}
.css-mqe185e h2 a:hover{border-bottom-color:#2a2a2a}
.css-mqe185e .css-t9i980o{font-size:12px;color:#aaa;margin-bottom:6px}
.css-mqe185e p{font-size:14px;color:#666}
.css-gvjlsqs{color:#888;font-size:13px;text-decoration:none}
.css-gvjlsqs:hover{color:#2a2a2a}
.css-qpxxg9j{padding-bottom:60px}
.css-qpxxg9j h1{font-size:28px;font-weight:400;margin-bottom:8px}
.css-qpxxg9j .css-t9i980o{font-size:12px;color:#aaa;display:block;margin-bottom:32px}
.css-qpxxg9j h2{font-size:21px;font-weight:400;margin:40px 0 12px;border-bottom:1px solid #eee;padding-bottom:6px}
.css-qpxxg9j h3{font-size:17px;margin:28px 0 8px}
.css-qpxxg9j p{margin-bottom:18px;font-size:16px}
.css-qpxxg9j ul,.css-qpxxg9j ol{margin:0 0 18px 20px}
.css-qpxxg9j a{color:#555;border-bottom:1px solid #ccc}
.css-qpxxg9j a:hover{color:#000;border-bottom-color:#000}
.css-qpxxg9j img{max-width:100%;height:auto;margin:24px 0}
.css-5uufp2g{border-top:1px solid #ddd;padding:20px 0;margin-top:48px;text-align:center;font-size:12px;color:#aaa}
.css-5uufp2g a{color:#aaa;text-decoration:none}
.css-pdvyzd8{padding:0 0 16px;margin-bottom:24px;font-size:12px;color:#aaa;font-style:italic;border-bottom:1px solid #eee}
.css-85rbmyi{padding:16px 0 0;margin-top:32px;font-size:11px;color:#999;border-top:1px solid #eee}
.css-tp7q8hn{font-size:12px;color:#aaa;margin:-26px 0 32px;font-weight:300}
.css-xhsvmhd{margin:0 auto 32px;max-width:720px}
.css-6dcqb1d{width:100%;height:auto}
.css-csz91yx{margin-top:40px;padding-top:20px;border-top:1px solid #eee;font-size:14px;color:#888}
.css-csz91yx em{color:#aaa}
.css-csz91yx a{color:#555;border-bottom:1px solid #ddd;text-decoration:none}
.css-ue030tp{padding:24px 0 0;border-top:1px solid #eee;margin-top:24px}
.css-ue030tp p{padding:3px 0;margin:0;font-size:15px}
.css-ue030tp a{color:#2a2a2a;text-decoration:none;border-bottom:1px solid transparent}
.css-ue030tp a:hover{border-bottom-color:#2a2a2a}
/* === Theme === */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;500;600;700&family=Lora:wght@400;700&display=swap');
body{font-family:'Source Sans Pro',sans-serif;color:#2C3333;background:#F9FBFA}
.css-5bkl53n{background:#2D5A5E;color:#fff}
.css-5bkl53n h1{font-family:'Lora',serif;color:#fff}
.css-5bkl53n p{color:rgba(255,255,255,.75)}
.css-5bkl53n a{color:#fff;text-decoration:none}
.card h2{font-family:'Lora',serif}
.card h2 a{color:#2D5A5E}
.card h2 a:hover{color:#7FB069}
.read-more{color:#7FB069}
.article-content h1{font-family:'Lora',serif}
.article-content h2{font-family:'Lora',serif}
.article-content a{color:#7FB069}
.article-content img{border-radius:8px}
.affiliate-disclosure{border-radius:8px}
.ymyl-disclaimer{border-radius:8px}
/* === Custom === */
/* dx-douleur-fr — Bouger en Douceur · Olivier Tessier, carnet de bord douleur chronique (Tours)
   Palette : forêt-ardoise #3F6857 + ombre chaude #8B6241 sur crème #F6F4EE
   Moment  : rouille #B34F2A — EXACTEMENT 2 emplois (lettrine héro home + lettrine ouverture article)
   Typo    : Bitter italique (display) + Source Sans 3 (corps/méta)
   Template: minimal Lambda — classes live obfusquées .css-xxxxxx */

/* ── Webfonts : @font-face (l'@import concaténé après les règles est ignoré par Chromium) ── */
@font-face { font-family:'Bitter'; font-style:normal; font-weight:400; font-display:swap;
  src:url(https://fonts.gstatic.com/s/bitter/v42/raxhHiqOu8IVPmnRc6SY1KXhnF_Y8fbfCL8.ttf) format('truetype'); }
@font-face { font-family:'Bitter'; font-style:normal; font-weight:600; font-display:swap;
  src:url(https://fonts.gstatic.com/s/bitter/v42/raxhHiqOu8IVPmnRc6SY1KXhnF_Y8SjYCL8.ttf) format('truetype'); }
@font-face { font-family:'Bitter'; font-style:normal; font-weight:700; font-display:swap;
  src:url(https://fonts.gstatic.com/s/bitter/v42/raxhHiqOu8IVPmnRc6SY1KXhnF_Y8RHYCL8.ttf) format('truetype'); }
@font-face { font-family:'Bitter'; font-style:italic; font-weight:400; font-display:swap;
  src:url(https://fonts.gstatic.com/s/bitter/v42/raxjHiqOu8IVPmn7epZnDMyKBvHf5D6c4PzOWA.ttf) format('truetype'); }
@font-face { font-family:'Bitter'; font-style:italic; font-weight:600; font-display:swap;
  src:url(https://fonts.gstatic.com/s/bitter/v42/raxjHiqOu8IVPmn7epZnDMyKBvHf5D6cPvvOWA.ttf) format('truetype'); }
@font-face { font-family:'Bitter'; font-style:italic; font-weight:700; font-display:swap;
  src:url(https://fonts.gstatic.com/s/bitter/v42/raxjHiqOu8IVPmn7epZnDMyKBvHf5D6cB_vOWA.ttf) format('truetype'); }
@font-face { font-family:'Source Sans 3'; font-style:normal; font-weight:400; font-display:swap;
  src:url(https://fonts.gstatic.com/s/sourcesans3/v19/nwpBtKy2OAdR1K-IwhWudF-R9QMylBJAV3Bo8Ky461EN.ttf) format('truetype'); }
@font-face { font-family:'Source Sans 3'; font-style:normal; font-weight:600; font-display:swap;
  src:url(https://fonts.gstatic.com/s/sourcesans3/v19/nwpBtKy2OAdR1K-IwhWudF-R9QMylBJAV3Bo8Kxm7FEN.ttf) format('truetype'); }

/* ── Tokens ─────────────────────────────────────────── */
:root {
  --color-bg:                #F6F4EE;
  --color-bg-surface:        #FCFAF5;
  --color-bg-warm:           #F1EADB;
  --color-text:              #1E1C17;
  --color-text-muted:        #5E5649;
  --color-primary:           #3F6857;
  --color-accent:            #8B6241;
  --color-accent-hover:      #6E4D30;
  --color-moment:            #B34F2A;   /* rouille — 2 emplois seulement */
  --color-border:            #DDD8CE;
  --color-heading:           #17150F;
  --color-link:              #3F6857;
  --color-link-hover:        #2D4E40;
  --color-blockquote-bg:     #EDEAE1;
  --color-blockquote-border: #3F6857;
  --font-heading:            'Bitter', Georgia, serif;
  --font-display:            'Bitter', Georgia, serif;
  --font-body:               'Source Sans 3', system-ui, sans-serif;
  --size-base:               17px;
  --size-h1:                 2.1rem;
  --size-h2:                 1.6rem;
  --size-h3:                 1.25rem;
  --size-small:              0.875rem;
  --lh-base:                 1.75;
  --lh-heading:              1.2;
  --radius:                  6px;
  --radius-sm:               3px;
  --space-section:           3rem;
  --space-block:             1.75rem;
  --max-prose:               68ch;
  --max-site:                860px;
}

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

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

/* preview.html parity (inert on live — live utilise .css-xxxxxx) */
:root .site-wrapper,
:root .container { max-width: var(--max-site); margin-inline: auto; padding-inline: 1.25rem; }
:root .article-content { max-width: var(--max-prose); }
:root .article-content p { margin: 0 0 var(--space-block); max-width: var(--max-prose); line-height: 1.8; }

/* ══════════════════════════════════════════════════════════════════════════════════
   v.6885dc — layout revision
   Live HTML = classes obfusquées .css-xxxxxx + éléments sémantiques.
   Home    : header.css-5bkl53n(>h1+p) · main > div.css-mqe185e ×14 · main > div.css-ue030tp (archive)
   Article : header.css-5bkl53n(>a) · main.css-qpxxg9j > h1 · > article · > div.css-85rbmyi · > nav.css-csz91yx
   Objectif: un héro qui porte la voix, une deuxième prise de vitesse (À LIRE EN PREMIER),
             deux bandes-photo (LE JOURNAL / PLUS D'ARTICLES), lettrine rouille × exactement 2,
             liens affiliés en pastilles, et le teal réservé — pas dispersé.
   ══════════════════════════════════════════════════════════════════════════════════ */

/* ── Masthead : photo (bureau + fenêtre de Tours) + dégradé + calligraphie ── */
:root header.css-5bkl53n {
  position:            relative;
  margin-top:          24px;
  padding:             54px 40px 46px;
  border:              none;
  border-radius:       10px;
  background-color:    #234A46;
  background-image:    linear-gradient(150deg, rgba(20,42,40,0.90) 0%, rgba(40,74,70,0.70) 55%, rgba(63,104,87,0.52) 100%), url("/theme-assets/top-image.jpg");
  background-size:     cover;
  background-position: center 44%;
  box-shadow:          0 2px 16px rgba(30,40,36,0.16);
  overflow:            hidden;
}
:root header.css-5bkl53n:not(:has(> h1)) { padding: 34px 32px; }

/* wordmark — <h1> (home) et <a> (article) deviennent la calligraphie italique */
:root header.css-5bkl53n h1,
:root header.css-5bkl53n > a {
  font-family:    var(--font-display);
  font-style:     italic;
  font-weight:    700;
  letter-spacing: -0.015em;
  color:          #FBF7EF;
  text-shadow:    0 1px 12px rgba(15,30,28,0.42);
}
:root header.css-5bkl53n h1  { font-size: clamp(2rem, 6vw, 2.9rem); line-height: 1.08; margin-bottom: 0.55rem; }
:root header.css-5bkl53n > a { font-size: 1.5rem; text-decoration: none; }

/* home-only : kicker au-dessus + manifeste sous la calligraphie */
:root header.css-5bkl53n:has(> h1)::before {
  content:        "CARNET DE BORD \00B7 MOBILITÉ AU QUOTIDIEN \00B7 TOURS";
  display:        block;
  font-family:    var(--font-body);
  font-size:      0.66rem;
  font-weight:    600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color:          rgba(251,247,239,0.74);
  margin-bottom:  0.85rem;
}
:root header.css-5bkl53n:has(> h1) p {
  font-family: var(--font-display);
  font-style:  italic;
  font-weight: 400;
  font-size:   1.05rem;
  line-height: 1.55;
  max-width:   48ch;
  margin:      0;
  color:       rgba(251,247,239,0.92);
  opacity:     1;
}

/* signature manifeste sous la calligraphie article (le <a> seul) */
:root header.css-5bkl53n:not(:has(> h1))::after {
  content:     "Le quotidien, en douceur \2014 pas de verdict, juste le carnet.";
  display:     block;
  margin-top:  0.5rem;
  font-family: var(--font-display);
  font-style:  italic;
  font-size:   0.92rem;
  color:       rgba(251,247,239,0.86);
}

/* ══════════════════ HOME (index) ══════════════════ */
:root main:not(:has(> article)) {
  counter-reset:  entry;
  padding-block:  var(--space-section);
}

/* ── LE HÉRO : la voix forte (child 1) ─────────────── */
:root main:not(:has(> article)) > div:nth-child(1) {
  position:         relative;
  background-color: var(--color-bg-surface);
  border:           1px solid var(--color-border);
  border-left:      4px solid var(--color-primary);   /* teal — le héro le possède */
  border-radius:    10px;
  box-shadow:       0 1px 4px rgba(0,0,0,0.04);
  padding:          2.9rem 2.3rem 2.4rem;
  margin-bottom:    2.6rem;
}
:root main:not(:has(> article)) > div:nth-child(1)::before {
  content:        "DERNIER CARNET";
  display:        inline-block;
  font-family:    var(--font-body);
  font-size:      0.66rem;
  font-weight:    600;
  letter-spacing: 0.2em;
  color:          var(--color-primary);
  margin-bottom:  0.9rem;
}
:root main:not(:has(> article)) > div:nth-child(1) > h2 {
  font-family:    var(--font-display);
  font-style:     italic;
  font-weight:    700;
  font-size:      clamp(1.9rem, 4.6vw, 2.65rem);
  line-height:    1.12;
  letter-spacing: -0.02em;
  margin:         0 0 0.9rem;
}
:root main:not(:has(> article)) > div:nth-child(1) > h2 a { color: var(--color-heading); }
:root main:not(:has(> article)) > div:nth-child(1) > h2 + p {
  font-size:   1.08rem;
  line-height: 1.6;
  color:       var(--color-text);
  max-width:   60ch;
  margin:      0 0 1rem;
}
:root main:not(:has(> article)) > div:nth-child(1) > h2 + p::first-letter {
  font-family: var(--font-display);
  font-style:  italic;
  font-weight: 700;
  font-size:   3.3rem;
  line-height: 0.72;
  float:       left;
  margin:      0.12em 0.12em 0 0;
  color:       var(--color-moment);   /* ROUILLE 1 / 2 */
}

/* ── DEUXIÈME PRISE DE VITESSE : le choix (child 2) ── */
:root main:not(:has(> article)) > div:nth-child(2) {
  position:         relative;
  margin-top:       3.6rem;
  margin-bottom:    2.4rem;
  background-color: var(--color-bg-warm);
  border:           1px solid var(--color-border);
  border-radius:    10px;
  box-shadow:       0 1px 4px rgba(0,0,0,0.04);
  padding:          2rem 2.3rem 1.9rem;
}
:root main:not(:has(> article)) > div:nth-child(2)::before {
  content:        "À LIRE EN PREMIER \2014 LA SUITE DU CARNET";
  position:       absolute;
  left:           0;
  right:          0;
  bottom:         calc(100% + 0.85rem);
  border-bottom:  1px solid var(--color-border);
  padding-bottom: 0.5rem;
  font-family:    var(--font-body);
  font-size:      0.72rem;
  font-weight:    600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color:          var(--color-accent);
}
:root main:not(:has(> article)) > div:nth-child(2) > h2 {
  font-family: var(--font-display);
  font-style:  italic;
  font-weight: 600;
  font-size:   clamp(1.5rem, 3.4vw, 1.9rem);
  line-height: 1.2;
  margin:      0 0 0.6rem;
}

/* ── BANDE-PHOTO 1 : LE JOURNAL (::before de la 1re fiche journal, child 3) ── */
:root main:not(:has(> article)) > div:nth-child(3) { border-top: none; }
:root main:not(:has(> article)) > div:nth-child(3)::before {
  content:             "LE JOURNAL \2014 LES PLUS RÉCENTS";
  display:             flex;
  align-items:         flex-end;
  min-height:          188px;
  margin:              2.4rem -0.1rem 2.1rem;
  padding:             1.4rem 1.6rem;
  border-radius:       10px;
  background-image:    linear-gradient(rgba(20,24,28,0.55), rgba(20,24,28,0.25)), url("/theme-assets/article-bg.jpg");
  background-size:     cover;
  background-position: center 30%;
  color:               #FBF7EF;
  font-family:         var(--font-body);
  font-size:           0.82rem;
  font-weight:         600;
  letter-spacing:      0.32em;
  text-transform:      uppercase;
  text-shadow:         0 1px 6px rgba(0,0,0,0.5);
}

/* ── Fiches journal (child 3 → avant-dernière) : filet + N° ── */
:root main:not(:has(> article)) > div:nth-child(n+3):not(:last-child) {
  counter-increment: entry;
  position:          relative;
  background:        transparent;
  border:            none;
  border-top:        1px solid var(--color-border);
  border-radius:     0;
  padding:           1.9rem 4.6rem 1.7rem 0;
  margin:            0;
}
:root main:not(:has(> article)) > div:nth-child(n+3):not(:last-child)::after {
  content:        "N\00B0 " counter(entry, decimal-leading-zero);
  position:       absolute;
  top:            1.95rem;
  right:          0;
  font-family:    var(--font-body);
  font-size:      0.72rem;
  font-weight:    600;
  letter-spacing: 0.12em;
  color:          var(--color-accent);
}
:root main:not(:has(> article)) > div:nth-child(n+3):not(:last-child) > h2 {
  font-family:    var(--font-display);
  font-style:     normal;
  font-weight:    600;
  font-size:      1.32rem;
  line-height:    1.28;
  letter-spacing: -0.005em;
  margin:         0 0 0.5rem;
}
:root main:not(:has(> article)) > div:nth-child(n+3):not(:last-child) > h2 a { color: var(--color-heading); }
:root main:not(:has(> article)) > div:nth-child(n+3):not(:last-child) > h2 a:hover { color: var(--color-primary); }
:root main:not(:has(> article)) > div:nth-child(n+3):not(:last-child) > h2 + p {
  font-size:            0.98rem;
  line-height:          1.6;
  color:                var(--color-text-muted);
  max-width:            62ch;
  margin:               0 0 0.75rem;
  display:              -webkit-box;
  -webkit-line-clamp:   3;
  -webkit-box-orient:   vertical;
  overflow:             hidden;
}

/* date — méta traquée sur chaque fiche */
:root main:not(:has(> article)) .css-t9i980o {
  font-family:    var(--font-body);
  font-style:     normal;
  font-size:      0.72rem;
  font-weight:    600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--color-text-muted);
  margin-bottom:  0.55rem;
}

/* read-more → pastille (texte anglais du template masqué, libellé FR injecté) */
:root main:not(:has(> article)) > div > a.css-gvjlsqs {
  display:         inline-block;
  margin-top:      0.5rem;
  padding:         0.42rem 1.1rem;
  border:          1px solid var(--color-accent);
  border-radius:   999px;
  font-size:       0;
  color:           var(--color-accent);
  text-decoration: none;
  transition:      background-color 0.15s ease, color 0.15s ease;
}
:root main:not(:has(> article)) > div > a.css-gvjlsqs::after {
  content:        "Lire la note \2192";
  font-family:    var(--font-body);
  font-size:      0.72rem;
  font-weight:    600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
:root main:not(:has(> article)) > div > a.css-gvjlsqs:hover { background-color: var(--color-accent); color: #FBF7EF; }
/* le héro : pastille pleine (CTA fort) */
:root main:not(:has(> article)) > div:nth-child(1) > a.css-gvjlsqs {
  background-color: var(--color-primary);
  border-color:     var(--color-primary);
  color:            #FBF7EF;
}
:root main:not(:has(> article)) > div:nth-child(1) > a.css-gvjlsqs:hover { background-color: var(--color-link-hover); border-color: var(--color-link-hover); }

/* ── BANDE-PHOTO 2 + ARCHIVE (dernier enfant : div.css-ue030tp) ── */
:root main:not(:has(> article)) > div:last-child {
  margin-top: 3rem;
  padding:    0 0 2rem;
  border:     none;
  background: transparent;
}
:root main:not(:has(> article)) > div:last-child::before {
  content:             "PLUS D'ARTICLES";
  display:             flex;
  align-items:         flex-end;
  min-height:          210px;
  margin-bottom:       2.2rem;
  padding:             1.4rem 1.6rem;
  border-radius:       10px;
  background-image:    linear-gradient(rgba(20,24,28,0.55), rgba(20,24,28,0.25)), url("/theme-assets/article-bg.jpg");
  background-size:     cover;
  background-position: center 72%;
  color:               #FBF7EF;
  font-family:         var(--font-body);
  font-size:           0.82rem;
  font-weight:         600;
  letter-spacing:      0.32em;
  text-transform:      uppercase;
  text-shadow:         0 1px 6px rgba(0,0,0,0.5);
}
:root main:not(:has(> article)) > div:last-child > p {
  margin:        0;
  padding:       0.6rem 0;
  border-bottom: 1px dotted rgba(0,0,0,0.14);
  font-size:     0.92rem;
  line-height:   1.45;
}
:root main:not(:has(> article)) > div:last-child > p > a {
  font-family:     var(--font-display);
  font-style:      normal;
  font-weight:     600;
  font-size:       1rem;
  color:           var(--color-heading);
  text-decoration: none;
  border-bottom:   none;
}
:root main:not(:has(> article)) > div:last-child > p > a:hover { color: var(--color-primary); }

/* ══════════════════ ARTICLE ══════════════════ */
/* titre massif italique (seul l'article a un > h1 direct sous main) */
:root main > h1 {
  font-family:    var(--font-display);
  font-style:     italic;
  font-weight:    700;
  font-size:      clamp(2rem, 5.2vw, 3rem);
  line-height:    1.1;
  letter-spacing: -0.02em;
  color:          var(--color-heading);
  max-width:      24ch;
  margin:         2.2rem 0 0.4rem;
}

/* lettrine d'ouverture — le jumeau du héro (ROUILLE 2 / 2) */
:root main > article > p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-style:  italic;
  font-weight: 700;
  font-size:   3.4rem;
  line-height: 0.7;
  float:       left;
  margin:      0.1em 0.12em 0 0;
  color:       var(--color-moment);
}

/* corps — respiration éditoriale */
:root main.css-qpxxg9j > article p { font-size: 1.06rem; line-height: 1.78; }

/* dinkus ❧ au-dessus de chaque sous-titre — la signature */
:root main > article > h2 {
  font-family:    var(--font-display);
  font-weight:    700;
  margin-top:     2.6em;
  margin-bottom:  0.6em;
  border-bottom:  none;
  padding-bottom: 0;
}
:root main > article > h2::before {
  content:     "\2767";
  display:     block;
  text-align:  center;
  font-family: var(--font-display);
  font-size:   1.25rem;
  color:       var(--color-accent);
  opacity:     0.8;
  margin:      0 0 1.1rem;
}

/* liens affiliés /see/ (en ligne, milieu de phrase) → pastilles discrètes ↗
   spécificité (0,2,3) — bat le lien de corps du template .css-qpxxg9j a (0,2,0) */
:root main > article a[href^="/see/"] {
  background-color:             rgba(139,98,65,0.12);
  border:                       1px solid rgba(139,98,65,0.42);
  border-radius:                5px;
  padding:                      0.06em 0.5em;
  color:                        var(--color-accent-hover);
  font-weight:                  600;
  text-decoration:              none;
  box-decoration-break:         clone;
  -webkit-box-decoration-break: clone;
}
:root main > article a[href^="/see/"]::after { content: " \2197"; font-size: 0.85em; }
:root main > article a[href^="/see/"]:hover {
  background-color: var(--color-accent);
  border-color:     var(--color-accent);
  color:            #FBF7EF;
}

/* blockquote "conseil" — moment ambre + guillemet suspendu */
:root main > article > blockquote {
  position:         relative;
  background-color: var(--color-blockquote-bg);
  border-left:      3px solid var(--color-accent);
  border-radius:    0 var(--radius) var(--radius) 0;
  padding:          1.1rem 1.35rem 1.1rem 2.4rem;
  margin:           0 0 var(--space-block);
  font-style:       italic;
  color:            var(--color-text-muted);
}
:root main > article > blockquote p { margin: 0; }
:root main > article > blockquote::before {
  content:     "\201C";
  position:    absolute;
  left:        0.55rem;
  top:         0.35rem;
  font-family: var(--font-display);
  font-size:   2.6rem;
  line-height: 1;
  color:       var(--color-accent);
  opacity:     0.55;
}

/* note de bas d'article (disclaimer) — note marginale, pas une alerte */
:root main .css-85rbmyi {
  font-style: italic;
  font-size:  0.86rem;
  color:      var(--color-text-muted);
  opacity:    0.8;
}

/* related nav → bande « À lire ensuite » */
:root nav.css-csz91yx {
  border-top:  1px solid var(--color-border);
  margin-top:  3rem;
  padding-top: 1.5rem;
}
:root nav.css-csz91yx::before {
  content:        "À LIRE ENSUITE";
  display:        block;
  font-family:    var(--font-body);
  font-size:      0.7rem;
  font-weight:    600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--color-text-muted);
  margin-bottom:  0.7rem;
}
:root nav.css-csz91yx em { display: none; }
:root nav.css-csz91yx a {
  font-family:     var(--font-display);
  font-style:      italic;
  font-weight:     600;
  font-size:       1.15rem;
  color:           var(--color-primary);
  text-decoration: none;
  border-bottom:   none;
}
:root nav.css-csz91yx a:hover { color: var(--color-link-hover); text-decoration: underline; text-underline-offset: 3px; }

/* ── Mobile ─────────────────────────────────────────── */
@media (max-width: 640px) {
  :root header.css-5bkl53n { padding: 40px 24px 34px; }
  :root main:not(:has(> article)) > div:nth-child(1) { padding: 2.2rem 1.5rem; }
  :root main:not(:has(> article)) > div:nth-child(2) { padding: 1.7rem 1.5rem; margin-top: 3.2rem; }
  :root main:not(:has(> article)) > div:nth-child(n+3):not(:last-child) { padding-right: 0; }
  :root main:not(:has(> article)) > div:nth-child(n+3):not(:last-child)::after {
    position:      static;
    display:       block;
    margin-bottom: 0.4rem;
  }
  :root main:not(:has(> article)) > div:nth-child(3)::before,
  :root main:not(:has(> article)) > div:last-child::before { min-height: 150px; letter-spacing: 0.24em; }
}


/* 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: M6/M7 surgical homepage repairs */
:root > body > header:has(h1):not(:empty):not([hidden]) {
  width: 100vw;
  max-width: none;
  margin: 0 calc(50% - 50vw);
  border-radius: 0;
  padding: 60px max(28px, calc((100vw - 720px) / 2 + 24px)) 52px;
  box-sizing: border-box;
}
:root > body > header:has(h1):not(:empty):not([hidden])::before,
:root > body > header:has(h1):not(:empty):not([hidden]) > h1,
:root > body > header:has(h1):not(:empty):not([hidden]) > p {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
:root > body > header:has(h1):not(:empty):not([hidden])::before {
  margin-top: 0;
  margin-bottom: 0.85rem;
}

:root main:not(:has(> h1)) > div:nth-child(3)::before,
:root main:not(:has(> h1)) > div:last-child:has(> p > a)::before {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 210px;
  padding: 1.5rem;
  border-radius: 10px;
  color: #FBF7EF;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  line-height: 1.35;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0,0,0,0.62);
  background-size: cover;
}
:root main:not(:has(> h1)) > div:nth-child(3)::before {
  content: "LE JOURNAL \2014 LES PLUS R\00C9CENTS";
  margin: 3rem 0 2.25rem;
  background-image: linear-gradient(180deg, rgba(18,24,24,0.72), rgba(18,24,24,0.42)), url("/theme-assets/article-bg.jpg");
  background-position: center 30%;
}

:root main:not(:has(> h1)) > div:last-child:has(> p > a) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 12px 16px;
  width: 100%;
  max-width: none;
  grid-column: 1 / -1;
  margin-top: 3.2rem;
  padding: 0 0 2.2rem;
  border: 0;
  background: transparent;
}
:root main:not(:has(> h1)) > div:last-child:has(> p > a)::before {
  content: "PLUS D'ARTICLES";
  grid-column: 1 / -1;
  margin: 0 0 2.25rem;
  background-image: linear-gradient(180deg, rgba(18,24,24,0.74), rgba(18,24,24,0.44)), url("/theme-assets/article-bg.jpg");
  background-position: center 72%;
}
:root main:not(:has(> h1)) > div:last-child:has(> p > a) > p {
  display: flex;
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 20px 22px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background-color: var(--color-bg-surface);
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  line-height: 1.38;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
:root main:not(:has(> h1)) > div:last-child:has(> p > a) > p:hover {
  transform: translateY(-1px);
  border-color: rgba(63,104,87,0.36);
  box-shadow: 0 3px 10px rgba(30,40,36,0.08);
}
:root main:not(:has(> h1)) > div:last-child:has(> p > a) > p > a {
  display: block;
  width: 100%;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.34;
  color: var(--color-heading);
  text-decoration: none;
  border-bottom: 0;
}
:root main:not(:has(> h1)) > div:last-child:has(> p > a) > p:hover > a {
  color: var(--color-primary);
}

/* refix iter1: trivial S6 article meta anchor */
:root main:has(> h1) > span:first-of-type {
  display: block;
  margin: 0.35rem 0 1.45rem;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
:root main:has(> h1) > span:first-of-type::before {
  content: "Olivier Tessier \00B7 Tours \00B7 ";
}
:root main:has(> h1) > span:first-of-type::after {
  content: " \00B7 6 min de lecture";
}

@media (max-width: 640px) {
  :root > body > header:has(h1):not(:empty):not([hidden]) {
    min-height: 220px;
    padding: 44px 20px 38px;
    border-radius: 0;
  }
  :root main:not(:has(> h1)) > div:nth-child(2):not(:last-child) {
    position: relative;
    overflow: visible;
    margin-bottom: calc(4.1rem + 190px);
  }
  :root main:not(:has(> h1)) > div:nth-child(2):not(:last-child)::after {
    content: "LE JOURNAL \2014 LES PLUS R\00C9CENTS";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 2.05rem);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 190px;
    padding: 1.25rem;
    border-radius: 10px;
    color: #FBF7EF;
    font-family: var(--font-body);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    line-height: 1.35;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 1px 8px rgba(0,0,0,0.62);
    background-image: linear-gradient(180deg, rgba(18,24,24,0.74), rgba(18,24,24,0.44)), url("/theme-assets/article-bg.jpg");
    background-size: cover;
    background-position: center 30%;
  }
  :root main:not(:has(> h1)) > div:nth-child(3):not(:last-child)::before {
    content: none;
    display: none;
  }
  :root main:not(:has(> h1)) > div:last-child:has(> p > a) {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 2.8rem;
  }
  :root main:not(:has(> h1)) > div:last-child:has(> p > a)::before {
    min-height: 190px;
    margin-bottom: 1.45rem;
    letter-spacing: 0.24em;
  }
  :root main:not(:has(> h1)) > div:last-child:has(> p > a) > p {
    padding: 20px 22px;
  }
}


/* premium-upgrade v1 */
/* premium editorial upgrade — style=Cup-of-Jo-personal overlay=55% 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; }
}