*{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-im1d6b9{max-width:640px;margin:0 auto;padding:0 20px}
.css-reira6e{padding:60px 0 40px;border-bottom:1px solid #ccc;margin-bottom:48px}
.css-reira6e h1{font-size:24px;font-weight:400;letter-spacing:-.5px}
.css-reira6e p{font-size:14px;color:#777;margin-top:6px;font-style:italic}
.css-reira6e a{color:#2a2a2a;text-decoration:none;font-size:24px;font-weight:400;letter-spacing:-.5px}
.css-n8xrg0i{padding:20px 0}
.css-n8xrg0i h2{font-size:18px;font-weight:400;margin-bottom:4px}
.css-n8xrg0i h2 a{color:#2a2a2a;text-decoration:none;border-bottom:1px solid transparent}
.css-n8xrg0i h2 a:hover{border-bottom-color:#2a2a2a}
.css-n8xrg0i .css-m5pzj9x{font-size:12px;color:#aaa;margin-bottom:6px}
.css-n8xrg0i p{font-size:14px;color:#666}
.css-cly1oyr{color:#888;font-size:13px;text-decoration:none}
.css-cly1oyr:hover{color:#2a2a2a}
.css-psspcdw{padding-bottom:60px}
.css-psspcdw h1{font-size:28px;font-weight:400;margin-bottom:8px}
.css-psspcdw .css-m5pzj9x{font-size:12px;color:#aaa;display:block;margin-bottom:32px}
.css-psspcdw h2{font-size:21px;font-weight:400;margin:40px 0 12px;border-bottom:1px solid #eee;padding-bottom:6px}
.css-psspcdw h3{font-size:17px;margin:28px 0 8px}
.css-psspcdw p{margin-bottom:18px;font-size:16px}
.css-psspcdw ul,.css-psspcdw ol{margin:0 0 18px 20px}
.css-psspcdw a{color:#555;border-bottom:1px solid #ccc}
.css-psspcdw a:hover{color:#000;border-bottom-color:#000}
.css-psspcdw img{max-width:100%;height:auto;margin:24px 0}
.css-sb9humj{border-top:1px solid #ddd;padding:20px 0;margin-top:48px;text-align:center;font-size:12px;color:#aaa}
.css-sb9humj a{color:#aaa;text-decoration:none}
.css-6w136ru{padding:0 0 16px;margin-bottom:24px;font-size:12px;color:#aaa;font-style:italic;border-bottom:1px solid #eee}
.css-h2rh1pr{padding:16px 0 0;margin-top:32px;font-size:11px;color:#999;border-top:1px solid #eee}
.css-uus2co1{font-size:12px;color:#aaa;margin:-26px 0 32px;font-weight:300}
.css-85travz{margin:0 auto 32px;max-width:720px}
.css-06ekg00{width:100%;height:auto}
.css-a90f2k2{margin-top:40px;padding-top:20px;border-top:1px solid #eee;font-size:14px;color:#888}
.css-a90f2k2 em{color:#aaa}
.css-a90f2k2 a{color:#555;border-bottom:1px solid #ddd;text-decoration:none}
.css-sghebm7{padding:24px 0 0;border-top:1px solid #eee;margin-top:24px}
.css-sghebm7 p{padding:3px 0;margin:0;font-size:15px}
.css-sghebm7 a{color:#2a2a2a;text-decoration:none;border-bottom:1px solid transparent}
.css-sghebm7 a:hover{border-bottom-color:#2a2a2a}
/* === Theme === */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;700&display=swap');
body{font-family:'Inter',sans-serif;color:#2D3436;background:#F9FBF7}
.css-reira6e{background:#1B3022;color:#fff}
.css-reira6e h1{font-family:'Outfit',serif;color:#fff}
.css-reira6e p{color:rgba(255,255,255,.75)}
.css-reira6e a{color:#fff;text-decoration:none}
.card h2{font-family:'Outfit',serif}
.card h2 a{color:#1B3022}
.card h2 a:hover{color:#FFB800}
.read-more{color:#FFB800}
.article-content h1{font-family:'Outfit',serif}
.article-content h2{font-family:'Outfit',serif}
.article-content a{color:#FFB800}
.article-content img{border-radius:8px}
.affiliate-disclosure{border-radius:8px}
.ymyl-disclaimer{border-radius:8px}
/* === Custom === */
/* en-energie-fr — custom.css | Template: minimal | Karine, journal solaire */

@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,400;0,600;0,700;1,400&family=Nunito:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap');

:root {
  --clr-primary:        #6A8C52;
  --clr-primary-dark:   #4E6B3C;
  --clr-primary-light:  #DCE9D2;
  --clr-accent:         #D4A030;
  --clr-accent-light:   #F6ECC8;
  --clr-bg:             #FAFAF5;
  --clr-surface:        #F3F0E6;
  --clr-border:         #E4DDD0;
  --clr-text:           #252218;
  --clr-text-secondary: #5E5648;
  --clr-text-muted:     #8E8278;
  --clr-link:           #5C7E45;
  --clr-link-hover:     #3E5C2E;

  --ff-heading: 'Bitter', Georgia, serif;
  --ff-body:    'Nunito', system-ui, sans-serif;

  --fs-base: 17px;
  --fs-sm:   15px;
  --fs-h1:   2.1rem;
  --fs-h2:   1.65rem;
  --fs-h3:   1.3rem;

  --lh-base:    1.75;
  --lh-heading: 1.22;

  --radius:    6px;
  --radius-sm: 3px;
  --radius-lg: 10px;

  --prose-max:   68ch;
  --content-max: 820px;
}

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

html {
  font-size: var(--fs-base);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--ff-body);
  font-weight: 400;
  color: var(--clr-text);
  background-color: var(--clr-bg);
  line-height: var(--lh-base);
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-heading);
  font-weight: 700;
  line-height: var(--lh-heading);
  color: var(--clr-text);
  margin-top: 2em;
  margin-bottom: 0.5em;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); color: var(--clr-primary-dark); }
h3 { font-size: var(--fs-h3); font-weight: 600; color: var(--clr-text-secondary); }
h4 { font-size: 1.1rem; font-weight: 600; }

p {
  max-width: var(--prose-max);
  margin-top: 0;
  margin-bottom: 1.25em;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  font-weight: 400;
}

a {
  color: var(--clr-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.18s ease;
}

a:hover,
a:focus {
  color: var(--clr-link-hover);
  text-decoration-thickness: 2px;
}

ul, ol {
  max-width: var(--prose-max);
  padding-left: 1.5em;
  margin-top: 0;
  margin-bottom: 1.25em;
  font-weight: 300;
}

ul li, ol li {
  margin-bottom: 0.4em;
  line-height: var(--lh-base);
}

blockquote {
  max-width: var(--prose-max);
  margin: 1.75em 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--clr-accent);
  background-color: var(--clr-accent-light);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-style: italic;
  color: var(--clr-text-secondary);
}

blockquote p { margin-bottom: 0; font-size: 1.05em; }

blockquote cite {
  display: block;
  margin-top: 0.6em;
  font-size: var(--fs-sm);
  font-style: normal;
  color: var(--clr-text-muted);
}

img { max-width: 100%; height: auto; border-radius: var(--radius); }

hr { border: none; border-top: 2px solid var(--clr-border); margin: 2rem 0; }

strong { font-weight: 700; color: var(--clr-text); }
em { font-style: italic; color: var(--clr-text-secondary); }

code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.88em;
  background-color: var(--clr-surface);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
  color: var(--clr-primary-dark);
}

/* ── Minimal template header ── */
.css-reira6e {
  background-color: var(--clr-primary-dark);
  color: #fff;
  padding: 1.5rem 1.25rem;
}

.css-reira6e h1 {
  font-family: var(--ff-heading);
  font-size: 1.75rem;
  font-weight: 700;
  color: #fff;
  margin-top: 0;
  margin-bottom: 0.3em;
}

.css-reira6e p { color: rgba(255,255,255,0.82); font-size: var(--fs-sm); max-width: none; margin-bottom: 0; }
.css-reira6e a { color: #fff; text-decoration: none; }
.css-reira6e a:hover { color: var(--clr-accent-light); }

nav {
  background-color: var(--clr-surface);
  border-bottom: 1px solid var(--clr-border);
  padding: 0.6rem 1.25rem;
}

nav a {
  color: var(--clr-text-secondary);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-right: 1.25rem;
}

nav a:hover,
nav a[aria-current="page"] { color: var(--clr-primary); }

main {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}

/* ── Article cards ── */
.card {
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}

.card h2 {
  font-family: var(--ff-heading);
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 0.4em;
}

.card h2 a { color: var(--clr-text); text-decoration: none; }
.card h2 a:hover { color: var(--clr-primary-dark); }
.card p { font-size: var(--fs-sm); color: var(--clr-text-secondary); margin-bottom: 0.75em; }

.read-more { color: var(--clr-accent); font-weight: 600; font-size: var(--fs-sm); text-decoration: none; }
.read-more:hover { color: var(--clr-primary); text-decoration: underline; }

/* ── Article content ── */
.article-content { max-width: var(--content-max); }

.article-content h1 {
  font-family: var(--ff-heading);
  font-size: var(--fs-h1);
  color: var(--clr-text);
  margin-top: 0;
}

.article-content h2 {
  font-family: var(--ff-heading);
  font-size: var(--fs-h2);
  color: var(--clr-primary-dark);
  border-bottom: none;
  padding-bottom: 0;
}

.article-content h3 { font-family: var(--ff-heading); font-size: var(--fs-h3); }
.article-content a { color: var(--clr-link); }
.article-content a:hover { color: var(--clr-link-hover); }
.article-content img { border-radius: var(--radius); display: block; margin: 1.5rem auto; }

.byline,
.post-meta { font-size: var(--fs-sm); color: var(--clr-text-muted); margin-bottom: 1.5rem; }

/* ── Journal-month badge (journal persona) ── */
.journal-month {
  display: inline-block;
  background-color: var(--clr-primary-light);
  color: var(--clr-primary-dark);
  font-family: var(--ff-heading);
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 0.25em 0.75em;
  border-radius: var(--radius-sm);
  margin-bottom: 0.75rem;
  letter-spacing: 0.02em;
}

footer {
  background-color: var(--clr-surface);
  border-top: 1px solid var(--clr-border);
  padding: 1.5rem 1.25rem;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--clr-text-muted);
}

footer a { color: var(--clr-text-secondary); }
footer a:hover { color: var(--clr-primary); }

@media (max-width: 600px) {
  html  { font-size: 16px; }
  h1    { font-size: 1.75rem; }
  h2    { font-size: 1.45rem; }
  h3    { font-size: 1.2rem; }
  main  { padding: 1rem 1rem 2.5rem; }
  .card { padding: 1rem 1.1rem; }
}

/* v.4cec88 — layout revision */

/* Deployed DOM (Lambda, stable obfuscated classes on THIS site):
   header.css-reira6e  ·  main.css-im1d6b9 (home) / +css-psspcdw (article)
   home card = main>div.css-n8xrg0i (date p + h2>a + excerpt p + a.css-cly1oyr)
   article = main>h1 + span(date) + article(p/h2/img/aside) + nav
   Homepage-only = main:not(:has(> article)) · Article-only = main:has(> article) */

:root {
  --moment:  #4A5C6B;   /* assigned moment color — used twice only */
  --paper:   #FAF5EC;
  --paper-2: #F5EFE1;
  --cream:   #FBF6EA;
}

/* ══ MASTHEAD — photo + gradient + serif-italic wordmark + manifesto ══ */
header.css-reira6e,
header.css-reira6e.css-im1d6b9,
body > header:first-of-type {
  position: relative;
  background-image:
    linear-gradient(180deg, rgba(26,36,24,.60), rgba(26,36,24,.74)),
    url("/theme-assets/site-hero.jpg");
  background-size: cover;
  background-position: center 44%;
  color: var(--cream);
  text-align: center;
  padding: clamp(2.6rem, 7vw, 4.6rem) 1.5rem clamp(2.1rem, 5vw, 3.2rem);
  border-bottom: 3px solid var(--clr-accent);
}

/* signature kicker above the wordmark (both page types) */
header.css-reira6e::before {
  content: "Journal solaire — Albi, Tarn";
  display: block;
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--clr-accent-light);
  margin-bottom: 1rem;
  text-shadow: 0 1px 6px rgba(0,0,0,.45);
}

header.css-reira6e h1 {
  font-family: var(--ff-heading);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2.1rem, 6vw, 3.4rem);
  line-height: 1.1;
  color: var(--cream);
  margin: 0 0 .4rem;
  text-shadow: 0 2px 16px rgba(0,0,0,.4);
}

/* article masthead: wordmark is a link, band a touch shorter */
header.css-reira6e > a {
  font-family: var(--ff-heading);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2.3rem);
  color: var(--cream);
  text-decoration: none;
  text-shadow: 0 2px 16px rgba(0,0,0,.4);
}
header.css-reira6e:has(> a) { padding-top: clamp(1.7rem,4vw,2.4rem); padding-bottom: clamp(1.4rem,3vw,2rem); }

/* manifesto / tagline — serif italic, the personality anchor */
header.css-reira6e p {
  max-width: 56ch;
  margin: .55rem auto 0;
  font-family: var(--ff-heading);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(.98rem, 1.7vw, 1.12rem);
  line-height: 1.55;
  color: rgba(251,246,234,.92);
  text-shadow: 0 1px 8px rgba(0,0,0,.35);
}

/* ════════════════════ HOMEPAGE — editorial grid ════════════════════ */
main:not(:has(> article)):first-of-type {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.2rem;
  align-items: stretch;
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(2.4rem,5vw,3.6rem) 1.5rem 4rem;
}

/* shared card shell (:nth-child(n) lifts specificity above base .css-n8xrg0i) */
main:not(:has(> article)) > div:nth-child(n) {
  background: var(--paper);
  border: 1px solid rgba(78,107,58,.14);
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
  padding: 1.7rem 1.9rem;
  margin: 0;
}

/* date → tracked kicker */
main:not(:has(> article)) > div > p:first-child {
  font-family: var(--ff-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--clr-primary);
  margin: 0 0 .55rem;
}

/* card titles + excerpts */
main:not(:has(> article)) > div > h2 { margin: .1em 0 .45rem; font-family: var(--ff-heading); }
main:not(:has(> article)) > div > h2 a { color: var(--clr-text); text-decoration: none; }
main:not(:has(> article)) > div > h2 a:hover { color: var(--clr-primary-dark); }
main:not(:has(> article)) > div > h2 + p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--clr-text-secondary);
  max-width: 64ch;
  margin: .35rem 0 0;
}

/* read-more → localized French link (real text hidden, kept for a11y) */
main:not(:has(> article)) > div > a {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0;
  text-decoration: none;
}
main:not(:has(> article)) > div > a::before {
  content: "Lire le billet \2192";
  font-family: var(--ff-body);
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--clr-primary-dark);
}

/* ── HERO : the loud voice (first, newest entry) ── */
main:not(:has(> article)) > div:first-child {
  grid-column: 1 / -1;
  padding: 2.6rem 2.6rem 2.6rem;
  overflow: hidden;
  border-color: rgba(78,107,58,.2);
}
main:not(:has(> article)) > div:first-child::before {
  content: "\275D  Le dernier billet";
  display: block;
  font-family: var(--ff-body);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--clr-accent);
  margin-bottom: .85rem;
}
main:not(:has(> article)) > div:first-child > h2 {
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  line-height: 1.12;
  font-weight: 700;
}
main:not(:has(> article)) > div:first-child > h2 + p {
  font-size: 1.2rem;
  line-height: 1.55;
  max-width: 60ch;
}
/* drop cap — MOMENT COLOR (place 1 of 2) */
main:not(:has(> article)) > div:first-child > h2 + p::first-letter {
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: 3.4em;
  line-height: .82;
  float: left;
  margin: .04em .1em 0 0;
  color: var(--moment);
}
/* hero CTA → outlined-to-filled pill */
main:not(:has(> article)) > div:first-child > a {
  margin-top: 1.3rem;
  background: var(--clr-primary-dark);
  border-radius: 999px;
  padding: .72em 1.6em;
}
main:not(:has(> article)) > div:first-child > a::before {
  content: "Lire le dernier billet \2192";
  color: var(--cream);
  font-size: .92rem;
}
main:not(:has(> article)) > div:first-child > a:hover { background: var(--clr-primary); }

/* STRIP 1 — full-bleed photo band at hero's foot = section divider */
main:not(:has(> article)) > div:first-child::after {
  content: "Par ordre d'\00E9criture";
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2.4rem -2.6rem -2.6rem;
  height: 190px;
  background-image:
    linear-gradient(rgba(20,24,28,.55), rgba(20,24,28,.25)),
    url("/theme-assets/essay-photo.jpg");
  background-size: cover;
  background-position: center 30%;
  color: var(--cream);
  font-family: var(--ff-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}

/* ── CLOSING entry (last = oldest = the first billet written) ── */
main:not(:has(> article)) > div:last-child {
  grid-column: 1 / -1;
  border-left: 4px solid var(--moment);   /* MOMENT COLOR (place 2 of 2) */
  padding-left: 2rem;
}
main:not(:has(> article)) > div:last-child::before {
  content: "Le premier billet du journal";
  display: block;
  font-family: var(--ff-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--clr-primary-dark);
  margin-bottom: .55rem;
}

/* ── middle pair : normalize excerpt length for equal-height row ── */
main:not(:has(> article)) > div:nth-child(2) > h2 + p,
main:not(:has(> article)) > div:nth-child(3) > h2 + p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* STRIP 2 — closing photo band before the footer */
main:not(:has(> article))::after {
  content: "Les archives";
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  margin-top: .8rem;
  border-radius: 10px;
  background-image:
    linear-gradient(rgba(20,24,28,.55), rgba(20,24,28,.25)),
    url("/theme-assets/essay-photo.jpg");
  background-size: cover;
  background-position: center 72%;
  color: var(--cream);
  font-family: var(--ff-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}

/* ════════════════════ ARTICLE PAGE ════════════════════ */
main:has(> article) {
  max-width: 800px;
  margin: 0 auto;
  padding: clamp(2rem,4vw,2.8rem) 1.5rem 4rem;
}
main:has(> article) > h1 {
  font-family: var(--ff-heading);
  font-size: clamp(2rem, 5vw, 3.05rem);
  line-height: 1.14;
  font-weight: 700;
  color: var(--clr-text);
  margin: .1em 0 .35rem;
}
main:has(> article) > span {
  display: block;
  font-family: var(--ff-body);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--clr-primary);
  margin-bottom: 2rem;
}

/* lead image + body measure */
main:has(> article) article > img:first-child {
  width: 100%;
  border-radius: 12px;
  margin: .4rem 0 2rem;
  box-shadow: 0 2px 14px rgba(0,0,0,.08);
}
main:has(> article) article img { border-radius: 10px; }
main:has(> article) article > p {
  font-size: 1.16rem;
  line-height: 1.78;
  color: var(--clr-text);
  max-width: 68ch;
  margin: 0 0 1.4em;
}

/* section headings with a dinkus divider */
main:has(> article) article > h2 {
  font-family: var(--ff-heading);
  font-size: 1.68rem;
  line-height: 1.25;
  color: var(--clr-primary-dark);
  margin: 2.6em 0 .55em;
  max-width: 26ch;
}
main:has(> article) article > h2::before {
  content: "\2733 \2733 \2733";
  display: block;
  text-align: center;
  color: var(--clr-accent);
  font-size: .85rem;
  letter-spacing: .5em;
  font-weight: 400;
  margin: 0 0 1.15em;
}

/* body links stay in-palette (no default blue) */
main:has(> article) article a {
  color: var(--clr-link);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(92,126,69,.45);
  text-underline-offset: 3px;
}
main:has(> article) article a:hover {
  color: var(--clr-link-hover);
  text-decoration-color: var(--clr-link-hover);
}
main:has(> article) article p a[href^="http"]::after,
main:has(> article) article li a[href^="http"]::after {
  content: " \2197";
  font-weight: 400;
  font-size: .8em;
  color: var(--clr-text-muted);
}

/* affiliate CTA → priority pill (full path + attr beats body-link rule, RULE J) */
main:has(> article) article p a[href^="/to/"],
main:has(> article) article li a[href^="/to/"] {
  display: inline-block;
  background: var(--clr-primary-dark);
  color: var(--cream);
  padding: .26em .8em;
  border-radius: 7px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.14);
}
main:has(> article) article p a[href^="/to/"]::after,
main:has(> article) article li a[href^="/to/"]::after { content: ""; }
main:has(> article) article p a[href^="/to/"]:hover,
main:has(> article) article li a[href^="/to/"]:hover {
  background: var(--clr-primary);
  color: var(--cream);
}

/* disclosure callout — warm, bordered, labelled */
main:has(> article) article > aside {
  background: var(--paper-2);
  border: 1px solid rgba(78,107,58,.16);
  border-left: 4px solid var(--clr-primary);
  border-radius: 8px;
  padding: 1rem 1.2rem;
  margin: 2.8rem 0 0;
  max-width: 68ch;
  font-size: .85rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--clr-text-secondary);
}
main:has(> article) article > aside::before {
  content: "Petite pr\00E9cision";
  display: block;
  font-family: var(--ff-body);
  font-style: normal;
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--clr-primary-dark);
  margin-bottom: .4rem;
}

/* related-articles nav */
main:has(> article) > nav {
  margin-top: 2.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(78,107,58,.2);
  font-size: .95rem;
}
main:has(> article) > nav em {
  font-style: normal;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--clr-primary-dark);
}
main:has(> article) > nav a { font-weight: 600; }

/* ── footer : forest-green bookend matching the masthead ── */
body > footer:last-of-type {
  background: var(--clr-primary-dark);
  color: rgba(251,246,234,.85);
  border-top: none;
  padding: 2rem 1.5rem;
  text-align: center;
  font-size: .85rem;
}
body > footer:last-of-type a {
  color: var(--cream);
  text-decoration: underline;
  text-decoration-color: rgba(251,246,234,.4);
}
body > footer:last-of-type a:hover { color: var(--clr-accent-light); }

/* ── responsive ── */
@media (max-width: 640px) {
  main:not(:has(> article)):first-of-type { grid-template-columns: 1fr; gap: 1.5rem; padding: 2rem 1rem 3rem; }
  main:not(:has(> article)) > div:nth-child(n) { padding: 1.4rem 1.4rem; }
  main:not(:has(> article)) > div:first-child { padding: 1.9rem 1.5rem; }
  main:not(:has(> article)) > div:first-child::after { margin: 1.9rem -1.5rem -1.9rem; height: 150px; letter-spacing: .24em; }
  main:not(:has(> article)) > div:last-child { padding-left: 1.5rem; }
  main:not(:has(> article))::after { height: 160px; letter-spacing: .24em; }
  main:has(> article) article > p { font-size: 1.08rem; }
}


/* 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: M2/M6/M7 surgical repairs */
:root > body > header:first-of-type {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

:root > body > header:first-of-type::before,
:root > body > header:first-of-type > h1,
:root > body > header:first-of-type > a {
  box-sizing: border-box;
  display: block;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

:root > body > header:first-of-type > p {
  box-sizing: border-box;
  max-width: 640px;
  padding-left: 24px;
  padding-right: 24px;
}

:root main:not(:has(> article)):first-of-type {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

:root main:not(:has(> article)):first-of-type::before {
  content: "LE DERNIER BILLET";
  grid-column: 1 / -1;
  order: 0;
  display: block;
  padding: 0 0 .75rem;
  margin: 0 0 -.2rem;
  border-bottom: 1px solid rgba(78,107,58,.22);
  font-family: var(--ff-body);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--clr-primary-dark);
}

:root main:not(:has(> article)) > div:first-child {
  order: 1;
  grid-column: 1 / -1;
}

:root main:not(:has(> article)) > div:first-child::before {
  content: none;
  display: none;
}

:root main:not(:has(> article)) > div:nth-child(2),
:root main:not(:has(> article)) > div:nth-child(3) {
  order: 2;
  grid-column: span 3;
}

:root main:not(:has(> article)):first-of-type::after {
  order: 3;
  grid-column: 1 / -1;
  margin-top: .2rem;
  margin-bottom: 0;
}

:root main:not(:has(> article)) > div:nth-child(n+4) {
  order: 4;
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 100%;
  padding: 1.25rem 1.35rem;
  background: var(--paper);
  border: 1px solid rgba(78,107,58,.14);
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

:root main:not(:has(> article)) > div:nth-child(n+4):hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.07);
  border-color: rgba(78,107,58,.28);
}

:root main:not(:has(> article)) > div:nth-child(n+4)::before {
  content: none;
  display: none;
}

:root main:not(:has(> article)) > div:nth-child(n+4) > p:first-child {
  margin-bottom: .45rem;
  font-size: .68rem;
  letter-spacing: .16em;
  color: var(--clr-primary);
}

:root main:not(:has(> article)) > div:nth-child(n+4) > h2 {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.35;
  font-weight: 600;
}

:root main:not(:has(> article)) > div:nth-child(n+4) > h2 a {
  display: block;
}

:root main:not(:has(> article)) > div:nth-child(n+4) > h2 + p,
:root main:not(:has(> article)) > div:nth-child(n+4) > a {
  display: none;
}

:root main:has(> article) > span::before {
  content: "Karine Fabre · Albi · ";
}

@media (max-width: 640px) {
  :root > body > header:first-of-type::before,
  :root > body > header:first-of-type > h1,
  :root > body > header:first-of-type > a,
  :root > body > header:first-of-type > p {
    padding-left: 20px;
    padding-right: 20px;
  }

  :root main:not(:has(> article)):first-of-type {
    grid-template-columns: 1fr;
  }

  :root main:not(:has(> article)):first-of-type::before,
  :root main:not(:has(> article)):first-of-type::after,
  :root main:not(:has(> article)) > div:first-child,
  :root main:not(:has(> article)) > div:nth-child(2),
  :root main:not(:has(> article)) > div:nth-child(3),
  :root main:not(:has(> article)) > div:nth-child(n+4) {
    grid-column: 1 / -1;
  }

  :root main:not(:has(> article)) > div:nth-child(n+4) {
    padding: 1.2rem;
  }
}


/* premium-upgrade v1 */
/* premium editorial upgrade — style=Substack-modern overlay=25% grid=mixed 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; }
}