*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;line-height:1.7;color:#111;background:#fff}
.region-97322a{max-width:900px;margin:0 auto;padding:0 28px}
.section-91cd45{background:#111;color:#fff;padding:64px 0;margin-bottom:48px}
.section-91cd45 h1{font-size:42px;font-weight:800;letter-spacing:-1px;margin-bottom:8px}
.section-91cd45 p{font-size:18px;opacity:.7}
.section-91cd45 a{color:#fff;text-decoration:none;font-size:22px;font-weight:800}
.footer-b55e86{padding:0}
.inner-d7782e{padding:32px 0;border-left:4px solid #111;padding-left:24px;margin-bottom:28px}
.inner-d7782e h2{font-size:24px;font-weight:700;margin-bottom:6px}
.inner-d7782e h2 a{color:#111;text-decoration:none}
.inner-d7782e h2 a:hover{text-decoration:underline}
.inner-d7782e .nav-9f1c85{font-size:12px;font-weight:600;text-transform:uppercase;color:#888;letter-spacing:1px;margin-bottom:8px}
.inner-d7782e p{font-size:15px;color:#444;margin-bottom:10px}
.header-14403b{display:inline-block;background:#111;color:#fff;padding:8px 20px;font-size:13px;font-weight:700;text-decoration:none;text-transform:uppercase;letter-spacing:1px}
.header-14403b:hover{background:#333}
.region-478b00{padding-bottom:60px}
.region-478b00 h1{font-size:38px;font-weight:800;letter-spacing:-1px;margin-bottom:10px}
.region-478b00 time{font-size:12px;font-weight:600;text-transform:uppercase;color:#888;letter-spacing:1px;display:block;margin-bottom:28px}
.region-478b00 h2{font-size:26px;font-weight:700;margin:40px 0 14px}
.region-478b00 h3{font-size:20px;font-weight:700;margin:32px 0 10px}
.region-478b00 p{margin-bottom:18px;font-size:17px}
.region-478b00 ul,.region-478b00 ol{margin:0 0 18px 24px}
.region-478b00 a{color:#111;font-weight:600;text-decoration:underline}
.region-478b00 img{max-width:100%;height:auto;margin:20px 0}
.region-5b9796{background:#111;color:#888;padding:28px 0;margin-top:48px;text-align:center;font-size:12px}
.region-5b9796 a{color:#888;text-decoration:none}
.nav-c71657{background:#222;color:#aaa;padding:14px 20px;margin-bottom:24px;font-size:13px;font-style:italic}
.frame-e8e98e{background:#1a1a1a;color:#888;padding:14px 20px;margin-top:32px;font-size:12px;border-top:3px solid #444}
.wrapper-b70f48{font-size:12px;font-weight:600;text-transform:uppercase;color:#666;letter-spacing:1px;margin:-20px 0 28px;padding-left:12px;border-left:2px solid #ccc}
.header-b41020{margin:0 0 24px}
.footer-c9c8f5{width:100%;height:auto;border-radius:0}
.sidebar-8a4f5b{border-left:4px solid #111;padding-left:24px;margin-top:48px}
.sidebar-8a4f5b h3{font-size:18px;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px}
.sidebar-8a4f5b ul{list-style:none;padding:0}
.sidebar-8a4f5b li{padding:6px 0}
.sidebar-8a4f5b a{color:#111;text-decoration:underline;font-weight:600}
.inner-9b232c{border-left:4px solid #ddd;padding-left:24px;margin-top:36px}
.inner-9b232c ul{list-style:none;padding:0}
.inner-9b232c li{padding:6px 0;font-size:16px}
.inner-9b232c a{color:#111;text-decoration:none;font-weight:600}
.inner-9b232c a:hover{text-decoration:underline}
.inner-9b232c .nav-9f1c85{margin:0 0 0 8px}
/* === Theme === */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Nunito:wght@400;700&display=swap');
body{font-family:'Quicksand',sans-serif;color:#333333;background:#FAF9F6}
.section-91cd45{background:#4A3728;color:#fff}
.section-91cd45 h1{font-family:'Nunito',serif;color:#fff}
.section-91cd45 p{color:rgba(255,255,255,.75)}
.section-91cd45 a{color:#fff;text-decoration:none}
.card h2{font-family:'Nunito',serif}
.card h2 a{color:#4A3728}
.card h2 a:hover{color:#FF8C42}
.read-more{color:#FF8C42}
.article-content h1{font-family:'Nunito',serif}
.article-content h2{font-family:'Nunito',serif}
.article-content a{color:#FF8C42}
.article-content img{border-radius:12px}
.affiliate-disclosure{border-radius:12px}
.ymyl-disclaimer{border-radius:12px}
/* === Custom === */
/* fl-felin-fr — Chat Pratique — Nicolas's cat-training diary, Rennes */
/* Display: Fraunces (serif, italic wordmark) · Text/meta: Nunito · marine #1D2E4A + ambre #E88C1A + moment terre-cuite #B34F2A */

/* ── Webfonts (declared as @font-face — a top-of-file @import lands after
      the concatenated rules and Chromium drops it, so fonts never load) ── */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/fraunces/v38/6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxC9TeA.woff2) format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/fraunces/v38/6NU58FyLNQOQZAnv9ZwNjucMHVn85Ni7emAe9lKqZTnbB-gzTK0K1ChjeveQ.woff2) format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/nunito/v32/XRXV3I6Li01BKofINeaB.woff2) format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/nunito/v32/XRXK3I6Li01BKofIMPyPbj8d7IEAGXNirXAHjaba.woff2) format('woff2');
}

/* ── Variables ─────────────────────────────────────────── */
:root {
  --primary:         #1D2E4A;
  --primary-dark:    #111E32;
  --primary-light:   #EBF0F8;
  --accent:          #E88C1A;
  --accent-dark:     #C46D08;
  --accent-light:    #FBEED6;
  --moment:          #B34F2A;   /* terre-cuite — used in AT MOST 2 places */
  --bg:              #FBF6EB;   /* warm paper — never pure white */
  --bg-alt:          #F4ECDB;
  --surface:         #FCF8EF;   /* warm off-white card face */
  --fg:              #262019;
  --muted:           #6A5F52;
  --heading-color:   #1B2536;
  --border:          #E4DAC7;
  --r:               9px;
  --r-sm:            5px;
  --max-prose:       68ch;
  --font-display:    'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:       'Nunito', system-ui, -apple-system, sans-serif;
}

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

html { font-size: 17px; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--fg);
  background-color: var(--bg);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

::selection { background-color: rgba(232, 140, 26, 0.24); color: var(--fg); }

/* ── Base typography ────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--heading-color);
  line-height: 1.2;
  margin: 1.7em 0 0.5em;
  font-weight: 700;
}
h1 { font-size: 2.4rem; margin-top: 0; }
h2 { font-size: 1.7rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; font-weight: 600; }

p  { margin: 0 0 1.1em; }
ul, ol { padding-left: 1.4em; margin: 0 0 1.15em; }
li { margin-bottom: 0.5em; line-height: 1.7; }
strong { font-weight: 700; color: var(--heading-color); }

a { color: var(--accent-dark); text-underline-offset: 3px; transition: color .18s ease; }
a:hover { color: var(--accent); }


/* ════════════════════════════════════════════════════════
   v.0a2deb — layout revision
   Editorial signature layer. Selectors carry a :root prefix +
   real (un-obfuscated) class names so they out-specify the
   template's descendant rules (0,1,1) and win as the last layer.
   ════════════════════════════════════════════════════════ */

/* ── Masthead — shared (home + article) ─────────────────── */
:root body > div.section-91cd45 {
  position: relative;
  max-width: none;
  padding: 0;
  background:
    linear-gradient(180deg, rgba(20,28,44,0.66) 0%, rgba(15,22,38,0.86) 100%),
    url("/theme-assets/front-image.jpg") center 42%/cover no-repeat;
  border-bottom: 3px solid var(--accent);
  color: #fff;
  margin-bottom: 0;
}

/* Home masthead — centred hero with monogram + wordmark + manifesto */
:root body > div.section-91cd45:has(h1) > div {
  max-width: 860px;
  margin: 0 auto;
  padding: 3.6rem 1.5rem 3.2rem;
  text-align: center;
}
:root body > div.section-91cd45:has(h1) > div::before {
  content: "";
  display: block;
  width: 54px;
  height: 54px;
  margin: 0 auto 1.05rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='%23E88C1A'%3E%3Cellipse cx='32' cy='44' rx='14' ry='11'/%3E%3Cellipse cx='13' cy='30' rx='6' ry='8'/%3E%3Cellipse cx='25' cy='19' rx='6' ry='8.5'/%3E%3Cellipse cx='39' cy='19' rx='6' ry='8.5'/%3E%3Cellipse cx='51' cy='30' rx='6' ry='8'/%3E%3C/svg%3E") center/contain no-repeat;
}
:root body > div.section-91cd45:has(h1) > div > h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  color: #fff;
  font-size: 3rem;
  line-height: 1.05;
  letter-spacing: .005em;
  margin: 0;
  text-shadow: 0 2px 18px rgba(0,0,0,.34);
}
:root body > div.section-91cd45:has(h1) > div > p {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: rgba(255,255,255,.9);
  font-size: 1.08rem;
  line-height: 1.5;
  max-width: 46ch;
  margin: 1rem auto 0;
  opacity: 1;
}

/* Article masthead — slim band, left-aligned wordmark */
:root body > div.section-91cd45:has(> div > a) > div {
  max-width: 1060px;
  margin: 0 auto;
  padding: 1.35rem 1.5rem;
  text-align: left;
}
:root body > div.section-91cd45:has(> div > a) > div > a {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  color: #fff;
  font-size: 1.42rem;
  text-decoration: none;
}
:root body > div.section-91cd45:has(> div > a) > div > a:hover { color: var(--accent); }


/* ════════════════════════════════════════════════════════
   HOMEPAGE  ( main:has(> div > h2) — article main has no div>h2 )
   ════════════════════════════════════════════════════════ */
:root main:has(> div > h2) {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 2rem;
  row-gap: 3rem;
  max-width: 1140px;
  margin: 0 auto;
  padding: 4rem 1.5rem 5.5rem;
}

/* ── Journal card (base) ── */
:root main:has(> div > h2) > div:has(> h2) {
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: 0 1px 4px rgba(0,0,0,.045);
  padding: 1.7rem 1.9rem 1.75rem;
  margin: 0;
  transition: box-shadow .2s ease, transform .2s ease;
}
:root main:has(> div > h2) > div:has(> h2):hover {
  box-shadow: 0 12px 32px rgba(29,46,74,.11);
  transform: translateY(-3px);
}
:root main:has(> div > h2) > div > p.nav-9f1c85 {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin: 0 0 .6rem;
}
:root main:has(> div > h2) > div > h2 {
  font-family: var(--font-display);
  font-size: 1.42rem;
  line-height: 1.24;
  font-weight: 600;
  border: none;
  padding: 0;
  margin: 0 0 .55rem;
}
:root main:has(> div > h2) > div > h2 > a {
  color: var(--heading-color);
  text-decoration: none;
}
:root main:has(> div > h2) > div > h2 > a:hover { color: var(--accent-dark); }
:root main:has(> div > h2) > div > p:last-of-type {
  color: var(--muted);
  font-size: .98rem;
  line-height: 1.62;
  max-width: 64ch;
  margin: 0 0 1.3rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── CTA pill — outlined, warm (no white fill) ── */
:root main:has(> div > h2) .header-14403b {
  align-self: flex-start;
  margin-top: auto;
  font-family: var(--font-body);
  font-size: 0;                 /* swap English label for FR via ::after */
  text-decoration: none;
  background: transparent;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  padding: .5rem 1.2rem;
  transition: background .18s ease, color .18s ease;
}
:root main:has(> div > h2) .header-14403b::after {
  content: "Lire l\2019 article";
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent-dark);
}
:root main:has(> div > h2) .header-14403b:hover { background: var(--accent); }
:root main:has(> div > h2) .header-14403b:hover::after { color: #fff; }

/* ════════════════════════════════════════════════════════
   ONE HERO MOMENT — featured card (first child, full width)
   ════════════════════════════════════════════════════════ */
:root main:has(> div > h2) > div:has(> h2):first-child {
  grid-column: 1 / -1;
  padding: 2.7rem 2.6rem 2.9rem;
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent);
  border-radius: var(--r);
  box-shadow: 0 10px 34px rgba(29,46,74,.10);
}
:root main:has(> div > h2) > div:has(> h2):first-child:hover { transform: none; }
:root main:has(> div > h2) > div:has(> h2):first-child::after { content: none; }
:root main:has(> div > h2) > div:first-child > p.nav-9f1c85::before {
  content: "DERNIER RÉCIT";
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-size: .62rem;
  letter-spacing: .13em;
  padding: .28rem .6rem;
  border-radius: 4px;
  margin-right: .7rem;
  vertical-align: .08em;
}
:root main:has(> div > h2) > div:first-child > p.nav-9f1c85::after {
  content: " · PAR NICOLAS · 6 MIN DE LECTURE";
  color: var(--muted);
}
:root main:has(> div > h2) > div:first-child > h2 {
  font-size: 2.55rem;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -.012em;
  margin: .45rem 0 .8rem;
}
:root main:has(> div > h2) > div:first-child > p:last-of-type {
  font-size: 1.16rem;
  line-height: 1.55;
  color: var(--fg);
  max-width: 62ch;
  -webkit-line-clamp: 4;
}
:root main:has(> div > h2) > div:first-child > p:last-of-type::first-letter {
  float: left;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 3.6rem;
  line-height: .78;
  color: var(--moment);            /* moment colour — place 1 of 2 */
  margin: .12rem .5rem -.1rem 0;
}
:root main:has(> div > h2) > div:first-child .header-14403b {
  background: var(--accent);
  border-color: var(--accent);
}
:root main:has(> div > h2) > div:first-child .header-14403b::after { color: #fff; }

/* ════════════════════════════════════════════════════════
   SECOND MOMENT — "Coup de cœur" picks (children 2-3, paired)
   Section label rendered full-width ABOVE the row (Rule B).
   ════════════════════════════════════════════════════════ */
:root main:has(> div > h2) > div:nth-child(2),
:root main:has(> div > h2) > div:nth-child(3) {
  margin-top: 82px;
  background: var(--bg-alt);
  border-color: #E0D2B6;
}
:root main:has(> div > h2) > div:nth-child(2)::before {
  content: "COUP DE CŒUR — À LIRE EN PREMIER";
  position: absolute;
  left: 0;
  bottom: calc(100% + 20px);
  width: calc(200% + 2rem);
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--primary);
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--border);
}

/* ════════════════════════════════════════════════════════
   STRIP 1 (feature-photo) + Journal label — between picks and
   the journal grid.  Reserved in the top margin of the first
   journal row (children 4-5) so it reads as a full-width band.
   ════════════════════════════════════════════════════════ */
:root main:has(> div > h2) > div:nth-child(4),
:root main:has(> div > h2) > div:nth-child(5) {
  margin-top: 288px;
}
:root main:has(> div > h2) > div:nth-child(4)::before {
  content: "CI-DESSOUS";
  position: absolute;
  left: 0;
  bottom: calc(100% + 56px);
  width: calc(200% + 2rem);
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r);
  background:
    linear-gradient(rgba(20,24,28,.55), rgba(20,24,28,.25)),
    url("/theme-assets/feature-photo.jpg") center 30%/cover no-repeat;
  color: #fff;
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
}
:root main:has(> div > h2) > div:nth-child(4)::after {
  content: "LE JOURNAL — DANS L\2019 ORDRE D\2019 ÉCRITURE";
  position: absolute;
  left: 0;
  bottom: calc(100% + 14px);
  width: calc(200% + 2rem);
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--primary);
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--border);
}

/* ════════════════════════════════════════════════════════
   STRIP 2 + COMPACT ARCHIVE TAIL  (Rule G — full-width index)
   Tail = the last child, a div with a <ul> (never a <h2>).
   ════════════════════════════════════════════════════════ */
:root main:has(> div > h2) > div.inner-9b232c {
  grid-column: 1 / -1;
  margin: 96px 0 0;
  padding: 0;
  border: none;
  background: transparent;
}
:root main:has(> div > h2) > div.inner-9b232c::before {
  content: "CONTINUER LA LECTURE";
  display: flex;
  align-items: center;
  justify-content: center;
  height: 210px;
  margin-bottom: 2.6rem;
  border-radius: var(--r);
  background:
    linear-gradient(rgba(20,24,28,.55), rgba(20,24,28,.25)),
    url("/theme-assets/feature-photo.jpg") center 70%/cover no-repeat;
  color: #fff;
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
}
:root main:has(> div > h2) > div.inner-9b232c > ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: min(1000px, 100%);
  columns: 2;
  column-gap: 3rem;
}
:root main:has(> div > h2) > div.inner-9b232c > ul > li {
  break-inside: avoid;
  padding: 11px 0;
  border-bottom: 1px dotted rgba(0,0,0,.14);
  font-size: .95rem;
  line-height: 1.4;
}
:root main:has(> div > h2) > div.inner-9b232c > ul > li > a {
  color: var(--heading-color);
  font-weight: 600;
  text-decoration: none;
}
:root main:has(> div > h2) > div.inner-9b232c > ul > li > a:hover { color: var(--accent-dark); }
:root main:has(> div > h2) > div.inner-9b232c > ul > li > .nav-9f1c85 {
  display: block;
  margin: 3px 0 0;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}


/* ════════════════════════════════════════════════════════
   ARTICLE PAGE  ( main:has(> article) )
   ════════════════════════════════════════════════════════ */
:root main:has(> article) {
  max-width: 820px;
  margin: 0 auto;
  padding: 2.8rem 1.5rem 4rem;
}
:root main:has(> article) > hgroup { margin: 0 0 2.4rem; }
:root main:has(> article) > hgroup > h1 {
  font-family: var(--font-display);
  font-size: 2.7rem;
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -.012em;
  color: var(--heading-color);
  margin: 0;
}
:root main:has(> article) > hgroup > time {
  display: block;
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-top: .9rem;
}

/* Prose column */
:root main:has(> article) > article > p,
:root main:has(> article) > article > ul,
:root main:has(> article) > article > ol,
:root main:has(> article) > article > h2,
:root main:has(> article) > article > h3,
:root main:has(> article) > article > blockquote {
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
}
:root main:has(> article) > article > p {
  font-size: 1.16rem;
  line-height: 1.78;
  margin-bottom: 1.35em;
}

/* Section headings + dinkus divider */
:root main:has(> article) > article > h2 {
  font-family: var(--font-display);
  font-size: 1.72rem;
  line-height: 1.22;
  font-weight: 700;
  border-bottom: none;
  padding-bottom: 0;
  margin: 2.5em auto .6em;
}
:root main:has(> article) > article > h2:not(:first-of-type)::before {
  content: "\2726 \2726 \2726";
  display: block;
  text-align: center;
  color: var(--accent);
  font-size: .8rem;
  letter-spacing: .5em;
  font-weight: 400;
  margin: 0 auto 1.4em;
  text-indent: .5em;
}
:root main:has(> article) > article > h3 {
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 700;
  margin: 2em auto .5em;
}

/* Body & affiliate links (Rule J — affiliate must out-specify body link) */
:root main:has(> article) > article a {
  color: var(--accent-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
:root main:has(> article) > article a:hover { color: var(--accent); }
:root main:has(> article) > article p a[href^="/offer/"],
:root main:has(> article) > article li a[href^="/offer/"] {
  color: var(--accent-dark);
  font-weight: 700;
  background: var(--accent-light);
  padding: .06em .3em;
  border-radius: 4px;
  text-decoration: none;
  box-shadow: inset 0 -2px 0 var(--accent);
}
:root main:has(> article) > article p a[href^="/offer/"]:hover,
:root main:has(> article) > article li a[href^="/offer/"]:hover {
  background: var(--accent);
  color: #fff;
}

/* Blockquote — hanging quote + moment border (moment place 2 of 2) */
:root main:has(> article) > article > blockquote {
  position: relative;
  background: var(--bg-alt);
  border-left: 3px solid var(--moment);
  border-radius: 0 var(--r) var(--r) 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.16rem;
  line-height: 1.55;
  color: var(--fg);
  padding: 1.2rem 1.5rem 1.2rem 2.7rem;
  margin: 1.9em auto;
}
:root main:has(> article) > article > blockquote::before {
  content: "\00201C";
  position: absolute;
  left: .5rem;
  top: .1rem;
  font-family: var(--font-display);
  font-size: 2.9rem;
  line-height: 1;
  color: var(--moment);
  opacity: .42;
}
:root main:has(> article) > article > blockquote > p { margin: 0; }

/* Numbered how-to steps — persona writes step-by-step walkthroughs */
:root main:has(> article) > article > ol {
  counter-reset: steps;
  list-style: none;
  padding-left: 0;
}
:root main:has(> article) > article > ol > li {
  counter-increment: steps;
  position: relative;
  padding-left: 3em;
  margin-bottom: .95em;
}
:root main:has(> article) > article > ol > li::before {
  content: counter(steps);
  position: absolute;
  left: 0;
  top: .05em;
  width: 2em;
  height: 2em;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .85rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Full-bleed article photography (preserve — aids pacing) */
:root main:has(> article) > article > section > img,
:root main:has(> article) > article img {
  width: 100%;
  border-radius: var(--r);
  margin: 1.8em auto;
}

/* "Pour info" disclaimer — warm note (override dark template block) */
:root main:has(> article) aside.frame-e8e98e {
  max-width: 68ch;
  margin: 2.6rem auto 0;
  background: var(--accent-light);
  color: #574a38;
  border: none;
  border-left: 3px solid var(--accent);
  border-top: none;
  border-radius: var(--r-sm);
  padding: 1rem 1.3rem;
  font-size: .9rem;
  line-height: 1.6;
}
:root main:has(> article) aside.frame-e8e98e > b { color: var(--accent-dark); }

/* "Articles connexes" — soft enclosure (override dark #111 border) */
:root main:has(> article) > div.sidebar-8a4f5b {
  max-width: 68ch;
  margin: 3rem auto 0;
  padding: 1.4rem 1.7rem 1.6rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--r);
}
:root main:has(> article) > div.sidebar-8a4f5b > h3 {
  margin: 0 0 .9rem;
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
:root main:has(> article) > div.sidebar-8a4f5b ul { list-style: none; padding: 0; margin: 0; }
:root main:has(> article) > div.sidebar-8a4f5b li {
  padding: .45rem 0;
  border-bottom: 1px dotted rgba(0,0,0,.12);
}
:root main:has(> article) > div.sidebar-8a4f5b li:last-child { border-bottom: none; }
:root main:has(> article) > div.sidebar-8a4f5b a {
  color: var(--heading-color);
  font-weight: 600;
  text-decoration: none;
}
:root main:has(> article) > div.sidebar-8a4f5b a:hover { color: var(--accent-dark); }


/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 720px) {
  html { font-size: 16px; }

  :root main:has(> div > h2) {
    grid-template-columns: 1fr;
    row-gap: 2.2rem;
    padding: 2.5rem 1.1rem 3.5rem;
  }
  /* reset every band that spans / reserves space — implicit tracks
     survive a narrowed grid otherwise */
  :root main:has(> div > h2) > div:has(> h2):first-child { grid-column: 1 / -1; padding: 2rem 1.4rem 2.2rem; }
  :root main:has(> div > h2) > div:first-child > h2 { font-size: 1.95rem; }
  :root main:has(> div > h2) > div.inner-9b232c { grid-column: 1 / -1; }
  :root main:has(> div > h2) > div.inner-9b232c > ul { columns: 1; }

  /* collapse reserved margins + make full-width bands span one column */
  :root main:has(> div > h2) > div:nth-child(2) { margin-top: 62px; }
  :root main:has(> div > h2) > div:nth-child(4) { margin-top: 256px; }
  :root main:has(> div > h2) > div:nth-child(2)::before,
  :root main:has(> div > h2) > div:nth-child(4)::before,
  :root main:has(> div > h2) > div:nth-child(4)::after { width: 100%; }
  /* one-column stack: only the row-leader keeps the reserved gap */
  :root main:has(> div > h2) > div:nth-child(3),
  :root main:has(> div > h2) > div:nth-child(5) { margin-top: 0; }

  :root body > div.section-91cd45:has(h1) > div > h1 { font-size: 2.2rem; }
  :root body > div.section-91cd45:has(h1) > div { padding: 2.6rem 1.2rem 2.3rem; }

  :root main:has(> article) { padding: 2rem 1.2rem 3rem; }
  :root main:has(> article) > hgroup > h1 { font-size: 2rem; }
  :root 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: boxed archive index + affiliate CTA visibility */
:root main:has(> div > h2) > div:has(> ul) > ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 10px 16px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  columns: auto;
}

:root main:has(> div > h2) > div:has(> ul) > ul > li {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 112px;
  height: 100%;
  margin: 0;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: 0 1px 4px rgba(0,0,0,.045);
  line-height: 1.45;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

:root main:has(> div > h2) > div:has(> ul) > ul > li:hover {
  border-color: #D8C5A6;
  box-shadow: 0 10px 24px rgba(29,46,74,.09);
  transform: translateY(-2px);
}

:root main:has(> div > h2) > div:has(> ul) > ul > li > a {
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.28;
  color: var(--heading-color);
  text-decoration: none;
}

:root main:has(> div > h2) > div:has(> ul) > ul > li:hover > a {
  color: var(--accent-dark);
}

:root main:has(> div > h2) > div:has(> ul) > ul > li > :not(a) {
  display: block;
  margin: .75rem 0 0;
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

:root main:has(> article) > article :is(p, li) a:is(
  [href^="/offer/"],
  [href^="/try/"],
  [href^="/ref/"],
  [href^="/go/"],
  [href^="/out/"],
  [rel~="sponsored"]
) {
  display: inline-block;
  max-width: 100%;
  margin: .14rem .12rem;
  padding: .3rem .78rem .34rem;
  background: var(--accent-light);
  border: 1px solid rgba(196,109,8,.35);
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0,0,0,.045), inset 0 -2px 0 rgba(232,140,26,.24);
  color: var(--accent-dark);
  font-weight: 800;
  line-height: 1.34;
  text-decoration: none;
  vertical-align: baseline;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

:root main:has(> article) > article :is(p, li) a:is(
  [href^="/offer/"],
  [href^="/try/"],
  [href^="/ref/"],
  [href^="/go/"],
  [href^="/out/"],
  [rel~="sponsored"]
):hover {
  background: var(--accent);
  border-color: var(--accent-dark);
  box-shadow: 0 6px 16px rgba(196,109,8,.18);
  color: var(--surface);
}

:root main:has(> article) > hgroup > time::after {
  content: " · PAR NICOLAS · 6 MIN DE LECTURE · RENNES";
  color: var(--muted);
}

@media (max-width: 640px) {
  :root main:has(> div > h2) > div:has(> ul) > ul {
    gap: 12px;
  }

  :root main:has(> div > h2) > div:has(> ul) > ul > li {
    min-height: 0;
    padding: 18px 20px;
  }
}


/* premium-upgrade v1 */
/* premium editorial upgrade — style=Cereal-Nordic 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; }
}

/* === Link & button colour audit (2026-09-16) ===
   Generated from a measured crawl of this site's own pages: every link and
   button was checked for text-vs-surface contrast at rest and on hover.
   Replacement colours keep the original hue and move only lightness, so the
   design reads the same. Verified by re-rendering before this was written. */
/* 51x 3.52:1 -> needs 4.5 | “regarder sur commande” */
:root :is(#lnkfix, main) > article > p > a:not([href^="/offer/"]) { color: #985406; }
/* 36x 3.52:1 -> needs 4.5 | “Mon avis sur le programme Univers des Ch” */
:root :is(#lnkfix, main) > article > section > ul > li > a:not([href^="/offer/"]) { color: #9F5907; }
/* 17x 3.52:1 -> needs 4.5 | “[1]” */
:root :is(#lnkfix, main) > article > p > a[href^="http"] { color: #985406; }
/* 12x 3.52:1 -> needs 4.5 | “Wikipédia - Clicker Training (Historique” */
:root :is(#lnkfix, main) > article > ul > li > a[href^="http"] { color: #9F5907; }
/* 9x 3.52:1 -> needs 4.5 | “[2]” */
:root :is(#lnkfix, main) > article > table > tbody > tr > td > a[href^="http"] { color: #9F5907; }
/* 5x 3.52:1 -> needs 4.5 | “[7]” */
:root :is(#lnkfix, main) > article > dl > dd > a[href^="http"] { color: #9F5907; }
/* 4x 3.55:1 -> needs 4.5 | “Principes fondamentaux et bases scientif” */
:root :is(#lnkfix, main) > article > div > ul > li > a:not([href^="/offer/"]) { color: #9F5907; }
/* 1x 2.85:1 -> needs 4.5 | “Démarrer le programme maintenant →” */
:root :is(#lnkfix, main) > article > div > div > a[style*="ffffff"], :root :is(#lnkfix, main) > article > div > div > a[style*="e67e22"] { background: #B34F2A !important; }
/* hover 2.4:1 -> needs 4.5 on #F6F8F4 */
:root :is(#lnkfix, main) > article > div > ul > li > a:not([href^="/offer/"]):hover { color: #995C0F; }
/* hover 2.38:1 -> needs 4.5 on #FBF6EB */
:root :is(#lnkfix, main) > article > p > a:not([href^="/offer/"]):hover { color: #995C0F; }

/* === Link & button colour audit, supplementary pass ===
   Generated from a measured crawl of this site's own pages: every link and
   button was checked for text-vs-surface contrast at rest and on hover.
   Replacement colours keep the original hue and move only lightness, so the
   design reads the same. Verified by re-rendering before this was written. */
/* 8x 1.06:1 -> needs 4.5 | “Read Now” */
:root :is(#lnkfix, main) > div > a:not([href^="/offer/"]) { color: #6C6C6C; }