/* ============================================================
   RESTINNER — DESIGN SYSTEM · "Calm Mind"
   Source unique des tokens et composants.
   Palette et typo extraites de lanp.restinner.com.
   Règle : aucun style en dur dans une page, tout passe par ici.
   ============================================================ */

/* -------------------- TOKENS -------------------- */
:root {
  /* Surfaces */
  --bg:           #f2f6f8;
  --bg-cream:     #f4efe8;
  --bg-green:     #edf1df;
  --surface:      #ffffff;
  --surface-soft: #fafbfc;
  --border:       rgba(31, 41, 55, .10);
  --border-warm:  rgba(166, 139, 106, .32);

  /* Texte */
  --heading:  #111827;
  --text:     #1f2937;
  --muted:    #4b5563;
  --faint:    #6b7280;

  /* Marque — vert sauge profond (accent unique) */
  --brand:        #2c6e49;
  --brand-deep:   #1e5c38;
  --brand-soft:   #e2ebd5;
  --brand-tint:   rgba(44, 110, 73, .08);
  --on-brand:     #ffffff;

  /* Accents chauds (décor, jamais CTA) */
  --sand:   #a68b6a;
  --sand-deep: #8d765c;
  --blush:  #f7dfdc;

  /* Statuts */
  --success: #4caf50;  --success-bg: #eaffeb;
  --danger:  #d32f2f;  --danger-bg:  #fdecec;
  --warning: #b7791f;  --warning-bg: #fdf3dc;
  --info:    #2b6cb0;  --info-bg:    #e8f1fb;

  /* Typographie */
  --font-heading: "Atkinson Hyperlegible", system-ui, sans-serif;
  --font-body:    "Nunito", system-ui, sans-serif;

  --fs-xs: 13px; --fs-sm: 14.5px; --fs-base: 17.6px; --fs-lg: 20px;
  --fs-h3: 23px; --fs-h2: clamp(28px, 4vw, 40px); --fs-h1: clamp(34px, 5.5vw, 56px);

  /* Espacements */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 72px; --s9: 104px;

  /* Formes */
  --r-sm: 12px; --r-md: 16px; --r-lg: 24px; --r-pill: 999px;

  /* Élévation */
  --shadow-soft: 0 4px 20px rgba(47, 47, 47, .05);
  --shadow-btn:  0 4px 12px rgba(47, 47, 47, .10);
  --shadow-lift: 0 14px 40px rgba(47, 47, 47, .10);

  --maxw: 1100px;
  --maxw-prose: 700px;
  --header-h: 84px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* -------------------- BASE -------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--brand); text-underline-offset: 3px; }
a:hover { color: var(--brand-deep); }
::selection { background: var(--brand); color: var(--on-brand); }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3, h4 {
  font-family: var(--font-heading); font-weight: 700; color: var(--heading);
  line-height: 1.15; letter-spacing: -.01em; margin: 0 0 var(--s4);
}
h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); } h4 { font-size: var(--fs-lg); }
p { margin: 0 0 var(--s4); color: var(--muted); }

.container { max-width: none; width: min(1720px, calc(100% - 2 * max(18px, 7vw))); margin: 0 auto; padding: 0; }
.section { padding: 40px 0; }
.section--cream { background: transparent; }
.section--green { background: transparent; }

.kicker {
  font-family: var(--font-heading); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--sand-deep);
  display: block; margin-bottom: var(--s3);
}

/* -------------------- BOUTONS -------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font-family: var(--font-heading); font-weight: 800; font-size: var(--fs-sm);
  padding: 14px 28px; border-radius: var(--r-pill); border: 2px solid transparent;
  text-decoration: none; cursor: pointer; line-height: 1;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.btn--primary { background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-btn); }
.btn--primary:hover { background: var(--brand-deep); color: var(--on-brand); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.btn--primary:active { transform: translateY(0); }
.btn--secondary { background: var(--surface); color: var(--brand); border-color: var(--brand); }
.btn--secondary:hover { background: var(--brand-tint); color: var(--brand-deep); }
.btn--ghost { background: transparent; color: var(--text); }
.btn--ghost:hover { background: var(--brand-tint); color: var(--brand-deep); }
.btn--sm { padding: 10px 20px; font-size: var(--fs-xs); }
.btn--lg { padding: 18px 36px; font-size: var(--fs-base); }
.btn[disabled], .btn.is-disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; pointer-events: none; }

/* -------------------- BADGES & TAGS -------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-heading); font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--brand-soft); color: var(--brand-deep);
}
.badge--sand { background: var(--bg-cream); color: var(--sand-deep); border: 1px solid var(--border-warm); }
.badge--blush { background: var(--blush); color: #8a4b45; }
.badge--outline { background: transparent; border: 1px solid var(--border); color: var(--muted); }
.tag { font-size: var(--fs-xs); color: var(--muted); background: var(--surface); border: 1px solid var(--border); padding: 4px 12px; border-radius: var(--r-pill); text-decoration: none; }
.tag:hover { border-color: var(--brand); color: var(--brand); }

/* -------------------- CARTES -------------------- */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-soft); overflow: hidden;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.card__media { aspect-ratio: 16 / 10; background: linear-gradient(135deg, var(--bg-green), var(--bg-cream)); display: grid; place-items: center; color: var(--sand); font-family: var(--font-heading); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.card__body { padding: var(--s5); }
.card__meta { display: flex; align-items: center; gap: var(--s3); font-size: var(--fs-xs); color: var(--faint); margin-bottom: var(--s3); }
.card__title { font-size: 21px; margin-bottom: var(--s2); }
.card__title a { color: inherit; text-decoration: none; }
.card__title a:hover { color: var(--brand); }
.card__excerpt { font-size: var(--fs-sm); margin: 0; }

.grid { display: grid; gap: var(--s5); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid--3, .grid--2 { grid-template-columns: 1fr; } }

/* -------------------- HEADER & FOOTER -------------------- */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(242, 246, 248, .88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.site-header__inner { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: var(--s5); }
.logo { font-family: var(--font-heading); font-weight: 800; font-size: 22px; color: var(--heading); text-decoration: none; letter-spacing: -.02em; }
.logo span { color: var(--brand); font-weight: 400; }
.nav { display: flex; gap: var(--s5); align-items: center; }
.nav a:not(.btn) { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-sm); color: var(--text); text-decoration: none; padding: 6px 2px; border-bottom: 2px solid transparent; }
.nav a:not(.btn):hover, .nav a[aria-current="page"] { color: var(--brand); border-color: var(--brand); }
@media (max-width: 760px) { .nav a:not(.btn) { display: none; } }

.site-footer { margin-top: var(--s7); background: #e8efe4; color: var(--heading); border-top: 1px solid rgba(44,110,73,.14); }
.site-footer a { color: var(--heading); text-decoration: none; } .site-footer a:hover { color: var(--brand); }
.site-footer h4 { margin: 0 0 var(--s3); font-size: 14px; text-transform: uppercase; letter-spacing: .12em; color: var(--brand-deep); }
.site-footer p { margin: var(--s3) 0 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; }
.footer-top { display: grid; grid-template-columns: 1.15fr 1.7fr 1fr 1.2fr; padding-top: var(--s6); padding-bottom: var(--s6); }
.footer-top > div { padding: 0 var(--s5); border-left: 1px solid rgba(44,110,73,.2); }
.footer-top > div:first-child { padding-left: 0; border-left: 0; }
.footer-top > div:last-child { padding-right: 0; }
.footer-links a { white-space: nowrap; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px var(--s4); font-size: var(--fs-sm); }
.footer-social { display: flex; gap: 16px; margin-bottom: var(--s3); }
.footer-social a { display: inline-flex; color: var(--brand-deep); }
.footer-mail { font-size: var(--fs-sm); word-break: break-all; }
.footer-form { display: flex; }
.footer-form input { flex: 1; min-width: 0; padding: 12px 14px; border: 1px solid rgba(44,110,73,.25); border-right: 0; background: #fff; font: inherit; font-size: 14px; }
.footer-form button { padding: 0 20px; border: 0; background: var(--brand); color: #fff; font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.footer-form button:hover { background: var(--brand-deep); }
.footer-bar { background: var(--brand-deep); color: #e8efe4; font-size: 12px; letter-spacing: .04em; }
.footer-bar__in { display: flex; justify-content: space-between; gap: var(--s4); padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap; }
.footer-bar a { color: #e8efe4; } .footer-bar a:hover { color: #fff; }
.footer-bar__links { display: flex; gap: var(--s5); text-transform: uppercase; }
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; row-gap: var(--s5); } .footer-top > div:nth-child(odd) { padding-left: 0; border-left: 0; } }
@media (max-width: 520px) { .footer-top { grid-template-columns: 1fr; } .footer-top > div { padding: 0; border-left: 0; } }

/* -------------------- FORMULAIRES -------------------- */
.field { display: grid; gap: var(--s2); margin-bottom: var(--s4); }
.field label { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-sm); color: var(--heading); }
.input {
  font: inherit; font-size: var(--fs-sm); color: var(--text); background: var(--surface);
  border: 1.5px solid var(--border); border-radius: var(--r-sm); padding: 14px 16px; width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: var(--faint); }
.input:hover { border-color: var(--sand); }
.input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint); }
.input.is-error { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(211, 47, 47, .08); }
.field__hint { font-size: var(--fs-xs); color: var(--faint); }
.field__error { font-size: var(--fs-xs); color: var(--danger); font-weight: 700; }

.newsletter { background: var(--bg-green); border-radius: var(--r-lg); padding: clamp(24px, 5vw, 56px); display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s6); align-items: center; }
.newsletter form { display: flex; gap: var(--s3); flex-wrap: wrap; }
.newsletter .input { flex: 1 1 220px; }
@media (max-width: 760px) { .newsletter { grid-template-columns: 1fr; } }

/* -------------------- ÉDITORIAL -------------------- */
.prose { max-width: var(--maxw-prose); margin: 0 auto; }
.prose h2 { margin-top: var(--s7); } .prose h3 { margin-top: var(--s6); }
.prose p, .prose li { color: var(--text); font-size: var(--fs-base); }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 var(--s4); }
.prose li { margin-bottom: var(--s2); }
.prose blockquote { margin: var(--s6) 0; padding: var(--s2) 0 var(--s2) var(--s5); border-left: 4px solid var(--sand); font-family: var(--font-heading); font-size: 22px; line-height: 1.4; color: var(--heading); }
.prose img { border-radius: var(--r-md); margin: var(--s5) 0; }

.callout { display: flex; gap: var(--s4); padding: var(--s4) var(--s5); border-radius: var(--r-md); border: 1px solid transparent; margin: var(--s5) 0; font-size: var(--fs-sm); }
.callout p { margin: 0; color: inherit; }
.callout strong { font-family: var(--font-heading); display: block; margin-bottom: 2px; }
.callout--note    { background: var(--bg-green);    border-color: rgba(44,110,73,.2);  color: var(--brand-deep); }
.callout--tip     { background: var(--info-bg);     border-color: rgba(43,108,176,.2); color: #1e4f85; }
.callout--warn    { background: var(--warning-bg);  border-color: rgba(183,121,31,.25); color: #7a5112; }
.callout--danger  { background: var(--danger-bg);   border-color: rgba(211,47,47,.2);  color: #9b1c1c; }

.tldr { background: var(--surface); border: 1px solid var(--border-warm); border-left: 6px solid var(--brand); border-radius: var(--r-md); padding: var(--s5); box-shadow: var(--shadow-soft); }
.tldr h4 { font-size: 15px; text-transform: uppercase; letter-spacing: .1em; color: var(--brand); margin-bottom: var(--s3); }
.tldr ul { margin: 0; padding-left: 1.2em; } .tldr li { color: var(--text); margin-bottom: 6px; }

.faq details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 0 var(--s5); margin-bottom: var(--s3); }
.faq summary { cursor: pointer; list-style: none; font-family: var(--font-heading); font-weight: 700; color: var(--heading); padding: var(--s4) 0; display: flex; justify-content: space-between; gap: var(--s4); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; color: var(--brand); line-height: 1; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: var(--s4); margin: 0; }

.author { display: flex; gap: var(--s4); align-items: center; background: var(--bg-cream); border-radius: var(--r-md); padding: var(--s5); }
.avatar { width: 64px; height: 64px; border-radius: 50%; flex: none; background: var(--brand-soft); color: var(--brand-deep); display: grid; place-items: center; font-family: var(--font-heading); font-weight: 800; font-size: 22px; }
.author p { margin: 0; font-size: var(--fs-sm); } .author strong { font-family: var(--font-heading); color: var(--heading); }

.breadcrumb { display: flex; flex-wrap: wrap; gap: var(--s2); font-size: var(--fs-xs); color: var(--faint); list-style: none; padding: 0; margin: 0 0 var(--s4); }
.breadcrumb li + li::before { content: "/"; margin-right: var(--s2); color: var(--sand); }
.breadcrumb a { color: var(--muted); }

.toc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s5); font-size: var(--fs-sm); }
.toc ol { margin: 0; padding-left: 1.2em; } .toc li { margin-bottom: 6px; }

/* -------------------- CTA LIVRE & MONÉTISATION -------------------- */
.book-cta { display: grid; grid-template-columns: 220px 1fr; gap: var(--s6); align-items: center; background: var(--surface); border: 1px solid var(--border-warm); border-radius: var(--r-lg); padding: var(--s6); box-shadow: var(--shadow-soft); }
.book-cta__cover { aspect-ratio: 3 / 4; border-radius: 6px 14px 14px 6px; background: linear-gradient(160deg, #dbe7ef, var(--bg-cream)); box-shadow: -6px 8px 24px rgba(47,47,47,.18); display: grid; place-items: center; text-align: center; font-family: var(--font-heading); font-weight: 800; color: var(--heading); padding: var(--s4); }
.book-cta__cover b { color: var(--danger); display: block; font-size: 28px; }
.price { font-family: var(--font-heading); font-weight: 800; color: var(--heading); }
.fineprint { font-size: var(--fs-xs); color: var(--faint); }
@media (max-width: 680px) { .book-cta { grid-template-columns: 1fr; } .book-cta__cover { max-width: 180px; } }

.ad { display: grid; place-items: center; background: repeating-linear-gradient(45deg, var(--surface-soft), var(--surface-soft) 10px, #f1f4f6 10px, #f1f4f6 20px); border: 1px dashed var(--border-warm); border-radius: var(--r-sm); color: var(--faint); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.ad--leaderboard { min-height: 90px; } .ad--rectangle { min-height: 250px; }

.consent { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lift); padding: var(--s5); display: flex; gap: var(--s5); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.consent p { margin: 0; font-size: var(--fs-sm); flex: 1 1 320px; }
.consent__actions { display: flex; gap: var(--s3); flex-wrap: wrap; }

/* -------------------- ÉTATS -------------------- */
.skeleton { background: linear-gradient(90deg, #e8edf0 25%, #f4f7f8 50%, #e8edf0 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--r-sm); }
@keyframes shimmer { to { background-position: -200% 0; } }
.empty { text-align: center; padding: var(--s7) var(--s5); background: var(--surface); border: 1px dashed var(--border-warm); border-radius: var(--r-md); }
.toast { display: inline-flex; gap: var(--s3); align-items: center; background: var(--heading); color: #fff; padding: 12px 20px; border-radius: var(--r-pill); font-size: var(--fs-sm); box-shadow: var(--shadow-lift); }

.pagination { display: flex; gap: var(--s2); }
.pagination a, .pagination span { min-width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--r-pill); font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-sm); text-decoration: none; color: var(--text); border: 1px solid var(--border); background: var(--surface); }
.pagination a:hover { border-color: var(--brand); color: var(--brand); }
.pagination [aria-current="page"] { background: var(--brand); border-color: var(--brand); color: #fff; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* Logo image (header) */
.logo img { height: 56px; width: auto; display: block; }
@media (max-width: 760px) { :root { --header-h: 68px; } .logo img { height: 42px; } }

/* Logo dans le footer sombre : pastille blanche pour garder le contraste */
.logo--footer { display: inline-block; line-height: 0; }
.logo--footer img { height: 56px; width: auto; }

/* Images dans les cartes et couvertures */
.card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* RestInner V2 — système éditorial unifié.
   Une seule voix typographique (Cormorant pour les titres, Nunito pour le reste),
   une seule famille de cartes, un fond chaud assorti au vert de la marque. */
:root {
  --serif: "Cormorant Garamond", Georgia, serif;
  --font-heading: "Nunito", system-ui, sans-serif;
  --bg: #f6f7f2;
  --ink: #16231b;
  --line: rgba(22, 35, 27, .12);
  --band: #e8efe4;
}
body { background: var(--bg); color: var(--text); font-size: 17.5px; line-height: 1.7; }
h1, h2, h3, .card__title { font-family: var(--serif); color: var(--ink); font-weight: 700; letter-spacing: -.005em; }
h1 { font-size: clamp(40px, 5.4vw, 66px); line-height: 1.04; }
h2 { font-size: clamp(32px, 3.8vw, 46px); line-height: 1.08; }
a { text-underline-offset: 3px; }
.site-header { background: rgba(246, 247, 242, .9); }
.nav a:not(.btn) { font-weight: 700; font-size: 15px; }
.kicker { font-family: var(--font-heading); }
.eyebrow { display: inline-block; font-size: 12.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); }
.meta { font-size: 14px; color: var(--faint); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.meta b { color: var(--brand); font-weight: 700; }
.meta i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }
.sec { padding: 56px 0; }
.sec-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.sec-head h2 { margin: 6px 0 0; }
.more { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--brand-deep); text-decoration: none; padding: 10px 0; border-bottom: 2px solid transparent; }
.more:hover { color: var(--brand); border-color: var(--brand); }
.more svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Cartes (une seule famille) ---------- */
.pc { display: block; text-decoration: none; color: inherit; }
.pc__img { display: block; border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--band); }
.pc__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.pc:hover .pc__img img { transform: scale(1.04); }
.pc__body { padding-top: 16px; }
.pc h3 { margin: 6px 0 8px; font-size: 28px; line-height: 1.12; }
.pc:hover h3 { color: var(--brand); }
.pc p { margin: 0 0 10px; font-size: 16px; line-height: 1.55; color: var(--muted); }
.pr { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; text-decoration: none; color: inherit; }
.pr__img { width: 96px; height: 96px; border-radius: 16px; overflow: hidden; }
.pr__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pr h3 { font-size: 21px; line-height: 1.18; margin: 2px 0 4px; }
.pr:hover h3 { color: var(--brand); }

/* ---------- Hero ---------- */
.hero2 { padding: 28px 0 8px; }
.hero2__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 36px; align-items: start; }
.slider { position: relative; isolation: isolate; min-height: 540px; border-radius: 28px; overflow: hidden; background: #1b2a21; }
.slide { position: absolute; inset: 0; display: flex; align-items: flex-end; opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility .6s; }
.slide.is-active { opacity: 1; visibility: visible; }
.slide > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.slide::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(12, 24, 17, .9) 0%, rgba(12, 24, 17, .5) 42%, rgba(12, 24, 17, 0) 72%); }
.slide__copy { padding: 40px 44px 92px; max-width: 680px; color: #fff; }
.slide__copy .eyebrow { color: #e9c46a; }
.slide__copy h2 { color: #fff; font-size: clamp(36px, 4.4vw, 56px); margin: 10px 0 12px; line-height: 1.04; }
.slide__copy p { color: rgba(255, 255, 255, .9); font-size: 19px; line-height: 1.5; max-width: 520px; margin: 0 0 22px; }
.btn--accent { background: #f4c430; color: #1b1b1b; box-shadow: 0 8px 20px rgba(244, 196, 48, .28); }
.btn--accent:hover { background: #ffd24a; color: #1b1b1b; }
.slider__ctl { position: absolute; left: 44px; right: 44px; bottom: 34px; display: flex; align-items: center; gap: 18px; z-index: 2; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .1em; }
.slider__dots { display: flex; gap: 8px; flex: 1; max-width: 220px; }
.slider__dots button { flex: 1; height: 20px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.slider__dots button::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .38); }
.slider__dots button.is-active::before { background: #e9c46a; }
.rail { display: grid; gap: 20px; }
.rail__title { font-size: 28px; margin: 0; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.rail .pr { grid-template-columns: 84px 1fr; gap: 14px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.rail .pr:last-child { border-bottom: 0; padding-bottom: 0; }
.rail .pr__img { width: 84px; height: 84px; border-radius: 14px; }
.rail .pr h3 { font-size: 19px; }

/* ---------- Thèmes (pastilles) ---------- */
.pills { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding-top: 28px; }
.pill { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: #fff; border: 1px solid var(--line); border-radius: 18px; text-decoration: none; color: var(--ink); transition: transform .2s var(--ease), border-color .2s, box-shadow .2s; }
.pill:hover { transform: translateY(-3px); border-color: var(--brand); box-shadow: var(--shadow-soft); color: var(--ink); }
.pill svg { flex: none; box-sizing: content-box; width: 26px; height: 26px; padding: 10px; border-radius: 50%; background: var(--brand-soft); fill: none; stroke: var(--brand-deep); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pill strong { display: block; font-family: var(--serif); font-size: 23px; line-height: 1.1; }
.pill small { font-size: 13px; color: var(--faint); }

/* ---------- À la une ---------- */
.latest { display: grid; grid-template-columns: 1.25fr 1fr; gap: 28px; }
.feat { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: 520px; border-radius: 24px; overflow: hidden; color: #fff; text-decoration: none; background: #1b2a21; }
.feat > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s var(--ease); }
.feat:hover > img { transform: scale(1.04); }
.feat::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(12, 24, 17, .88) 0%, rgba(12, 24, 17, .2) 55%, rgba(12, 24, 17, 0) 75%); }
.feat__copy { padding: 32px; }
.feat__copy .eyebrow { color: #e9c46a; }
.feat h3 { color: #fff; font-size: 38px; line-height: 1.08; margin: 8px 0 10px; }
.feat p { color: rgba(255, 255, 255, .88); margin: 0 0 10px; font-size: 17px; line-height: 1.5; }
.feat .meta { color: rgba(255, 255, 255, .8); } .feat .meta b { color: #fff; }
.stack { display: grid; gap: 0; align-content: start; }
.stack .pr { padding: 22px 0; border-bottom: 1px solid var(--line); grid-template-columns: 150px 1fr; }
.stack .pr:first-child { padding-top: 0; } .stack .pr:last-child { border-bottom: 0; padding-bottom: 0; }
.stack .pr__img { width: 150px; height: 122px; border-radius: 16px; }
.stack .pr h3 { font-size: 25px; }

/* ---------- Méthode Stop Overthinking ---------- */
.band { background: var(--band); margin: 24px 0; padding: 72px 0 80px; border-top: 1px solid rgba(44, 110, 73, .14); border-bottom: 1px solid rgba(44, 110, 73, .14); }
.steps4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; counter-reset: s; }
.step4 { position: relative; display: block; text-decoration: none; color: inherit; }
.step4__img { display: block; aspect-ratio: 4 / 4.4; border-radius: 22px; overflow: hidden; }
.step4__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.step4:hover .step4__img img { transform: scale(1.05); }
.step4__n { position: absolute; top: 14px; left: 14px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--brand-deep); font-family: var(--serif); font-weight: 700; font-size: 22px; box-shadow: var(--shadow-soft); }
.step4 h3 { font-size: 30px; margin: 16px 0 4px; } .step4:hover h3 { color: var(--brand); }
.step4 p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--muted); }

/* ---------- Trois rubriques ---------- */
.cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.col h2 { font-size: 34px; margin: 0; }
.col__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 20px; border-bottom: 2px solid var(--ink); }
.col__head .more { padding: 0; font-size: 14px; }
.col .pr { padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--line); }
.col .pr__img { width: 84px; height: 84px; border-radius: 14px; }
.col .pr { grid-template-columns: 84px 1fr; gap: 14px; }

/* ---------- Citation + newsletter ---------- */
.quote { text-align: center; padding: 72px 0 40px; }
.quote blockquote { margin: 0 auto; max-width: 820px; font-family: var(--serif); font-size: clamp(32px, 4.2vw, 52px); line-height: 1.16; font-style: italic; font-weight: 600; color: var(--ink); }
.quote cite { display: block; margin-top: 18px; font-style: normal; font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); }
.quote .orn { display: block; margin: 0 auto 18px; width: 40px; height: 40px; color: var(--brand); opacity: .7; }
.nl2 { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; background: var(--brand-deep); color: #fff; border-radius: 28px; padding: clamp(28px, 5vw, 60px); }
.nl2 h2 { color: #fff; margin: 8px 0 8px; } .nl2 p { margin: 0; color: rgba(255, 255, 255, .85); }
.nl2 .eyebrow { color: #e9c46a; }
.nl2 form { display: flex; gap: 10px; flex-wrap: wrap; }
.nl2 .input { flex: 1 1 220px; border-color: transparent; }
.nl2 small { display: block; margin-top: 10px; font-size: 13px; color: rgba(255, 255, 255, .7); }
.btn--gold { background: #f4c430; color: #1b1b1b; } .btn--gold:hover { background: #ffd24a; color: #1b1b1b; }

/* ---------- Page catégorie ---------- */
.cat-hero { position: relative; margin: 20px 0 0; border-radius: 28px; overflow: hidden; isolation: isolate; background: #1b2a21; color: #fff; }
.cat-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; z-index: -2; }
.cat-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(12, 24, 17, .9) 0%, rgba(12, 24, 17, .62) 48%, rgba(12, 24, 17, .1) 100%); }
.cat-hero__in { padding: 44px clamp(24px, 4vw, 56px) 40px; max-width: 760px; }
.cat-hero .breadcrumb { color: rgba(255, 255, 255, .75); margin-bottom: 18px; } .cat-hero .breadcrumb a { color: #fff; }
.cat-hero .breadcrumb li + li::before { color: rgba(255, 255, 255, .5); }
.cat-hero h1 { color: #fff; margin: 6px 0 12px; }
.cat-hero p { font-size: 20px; line-height: 1.5; color: rgba(255, 255, 255, .9); margin: 0 0 22px; max-width: 560px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 700; text-decoration: none; background: rgba(255, 255, 255, .16); color: #fff; border: 1px solid rgba(255, 255, 255, .35); backdrop-filter: blur(6px); }
.chip:hover { background: rgba(255, 255, 255, .3); color: #fff; }
.chip.is-on { background: #fff; color: var(--brand-deep); border-color: #fff; }
.cat-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; padding: 48px 0 24px; }
.lead { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center; padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.lead .pc__img { aspect-ratio: 4 / 3; border-radius: 24px; }
.lead h2 { font-size: 40px; margin: 10px 0 12px; } .lead:hover h2 { color: var(--brand); }
.lead p { color: var(--muted); font-size: 18px; margin: 0 0 14px; }
.tagline { display: inline-flex; gap: 8px; align-items: center; font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); }
.pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
.pgrid .ad-img { grid-column: 1 / -1; }
.ad-img img { display: block; width: 100%; height: auto; border-radius: 16px; }
.loadmore { display: flex; justify-content: center; margin-top: 48px; }
.side { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 28px; }
.box { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 22px; }
.box h3 { font-size: 26px; margin: 0 0 14px; }
.search { display: flex; border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; }
.search input { flex: 1; min-width: 0; border: 0; padding: 14px 16px; font: inherit; font-size: 15px; background: transparent; }
.search input:focus { outline: 2px solid var(--brand); outline-offset: -2px; }
.search button { border: 0; background: var(--brand); color: #fff; padding: 0 18px; cursor: pointer; }
.search svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.toplist { list-style: none; margin: 0; padding: 0; counter-reset: t; }
.toplist li { counter-increment: t; display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); align-items: start; }
.toplist li:first-child { border-top: 0; padding-top: 0; }
.toplist li::before { content: counter(t); font-family: var(--serif); font-size: 30px; line-height: 1; color: var(--brand); font-weight: 700; }
.toplist a { font-family: var(--serif); font-size: 20px; line-height: 1.2; font-weight: 700; color: var(--ink); text-decoration: none; }
.toplist a:hover { color: var(--brand); }
.topiclinks { display: flex; flex-wrap: wrap; gap: 8px; }
.topiclinks a { padding: 8px 14px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); font-size: 14px; font-weight: 700; text-decoration: none; color: var(--ink); }
.topiclinks a:hover { border-color: var(--brand); color: var(--brand); }

/* ---------- Page article ---------- */
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--brand); z-index: 50; }
.a-head { max-width: 800px; margin: 0 auto; padding: 44px 0 28px; text-align: center; }
.a-head .breadcrumb { justify-content: center; }
.a-head h1 { margin: 14px 0 16px; font-size: clamp(40px, 5vw, 62px); }
.a-head .lede { font-size: 21px; line-height: 1.55; color: var(--muted); max-width: 640px; margin: 0 auto 22px; }
.byline { display: inline-flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--faint); text-align: left; }
.avatar2 { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-deep); font-weight: 800; font-size: 14px; }
.byline strong { display: block; color: var(--ink); font-size: 15px; line-height: 1.2; }
.a-cover { margin: 8px auto 0; max-width: 1040px; }
.a-cover img { width: 100%; aspect-ratio: 16 / 8.5; object-fit: cover; border-radius: 28px; display: block; }
.a-cover figcaption { margin-top: 10px; font-size: 13.5px; color: var(--faint); text-align: center; }
.a-layout { display: grid; grid-template-columns: minmax(0, 700px) 300px; gap: 72px; justify-content: center; padding: 48px 0 24px; align-items: start; }
.a-main > * + * { margin-top: 32px; }
.tldr2 { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 24px 28px; border-left: 6px solid var(--brand); }
.tldr2 h4 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .14em; color: var(--brand); font-family: var(--font-heading); font-weight: 800; }
.tldr2 ul { margin: 0; padding-left: 1.2em; } .tldr2 li { margin-bottom: 6px; }
.body p, .body li { font-size: 19px; line-height: 1.8; color: #243029; }
.body p { margin: 0 0 20px; }
.body h2 { font-size: 40px; margin: 52px 0 14px; scroll-margin-top: 110px; }
.body h2:first-child { margin-top: 0; }
.body ol, .body ul { padding-left: 1.3em; margin: 0 0 22px; } .body li { margin-bottom: 8px; }
.body a { color: var(--brand-deep); text-decoration-thickness: 1.5px; }
.body figure { margin: 36px -40px; }
.body figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 22px; display: block; }
.body figcaption { margin-top: 10px; text-align: center; font-size: 14px; color: var(--faint); }
.body blockquote { margin: 40px 0; padding: 4px 0 4px 28px; border-left: 4px solid var(--sand); font-family: var(--serif); font-size: 34px; line-height: 1.22; font-style: italic; color: var(--ink); font-weight: 600; }
.note { display: flex; gap: 14px; padding: 18px 22px; border-radius: 16px; margin: 28px 0; font-size: 16.5px; line-height: 1.6; }
.note strong { display: block; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 2px; }
.note p { margin: 0; font-size: inherit; line-height: inherit; color: inherit; }
.note--warn { background: var(--warning-bg); color: #6b4a10; border: 1px solid rgba(183, 121, 31, .28); }
.note--tip { background: var(--bg-green); color: var(--brand-deep); border: 1px solid rgba(44, 110, 73, .22); }
.faq2 h2 { font-size: 40px; margin: 0 0 16px; }
.faq2 details { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 0 22px; margin-bottom: 10px; }
.faq2 summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font-weight: 800; color: var(--ink); font-size: 17px; }
.faq2 summary::-webkit-details-marker { display: none; }
.faq2 summary::after { content: "+"; font-size: 24px; line-height: 1; color: var(--brand); transition: transform .2s; }
.faq2 details[open] summary::after { transform: rotate(45deg); }
.faq2 details p { margin: 0 0 18px; font-size: 17px; }
.share { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 700; color: var(--muted); }
.share a { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; color: var(--ink); background: #fff; }
.share a:hover { border-color: var(--brand); color: var(--brand); }
.author2 { display: flex; gap: 18px; align-items: center; background: var(--band); border-radius: 20px; padding: 24px; }
.author2 .avatar2 { width: 64px; height: 64px; font-size: 20px; background: #fff; flex: none; }
.author2 strong { color: var(--ink); } .author2 p { margin: 2px 0 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
.a-rail { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 24px; }
.toc2 ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.toc2 a { display: block; padding: 8px 12px; border-left: 3px solid var(--line); font-size: 15px; font-weight: 700; color: var(--muted); text-decoration: none; }
.toc2 a:hover { color: var(--brand); }
.toc2 a.is-on { border-left-color: var(--brand); color: var(--brand-deep); background: var(--brand-tint); }
.a-rail .pr { grid-template-columns: 72px 1fr; gap: 12px; padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--line); }
.a-rail .pr:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.a-rail .pr__img { width: 72px; height: 72px; border-radius: 12px; }
.a-rail .pr h3 { font-size: 18px; }
.related2 { padding: 56px 0 24px; border-top: 1px solid var(--line); margin-top: 40px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }

/* ---------- Responsive ---------- */
@media (max-width: 1060px) {
  .hero2__grid, .cat-layout { grid-template-columns: 1fr; }
  .latest { grid-template-columns: 1fr; } .feat { min-height: 440px; }
  .steps4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols3 { grid-template-columns: 1fr; gap: 48px; }
  .pills { grid-template-columns: repeat(2, 1fr); }
  .a-layout { grid-template-columns: minmax(0, 700px); gap: 40px; }
  .a-rail, .side { position: static; }
  .body figure { margin-left: 0; margin-right: 0; }
  .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nl2 { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .slider { min-height: 500px; } .slide__copy { padding: 28px 24px 84px; } .slider__ctl { left: 24px; right: 24px; }
  .pgrid, .lead, .grid3 { grid-template-columns: 1fr; }
  .stack .pr { grid-template-columns: 110px 1fr; } .stack .pr__img { width: 110px; height: 96px; }
  .pills { grid-template-columns: 1fr; }
  .body p, .body li { font-size: 18px; } .body h2, .faq2 h2 { font-size: 32px; } .body blockquote { font-size: 27px; }
  .lead h2 { font-size: 32px; } .feat h3 { font-size: 30px; }
}
@media (max-width: 520px) { .steps4 { gap: 14px; } .step4 h3 { font-size: 24px; } .step4 p { display: none; } }

/* lisibilité des surtitres sur photo */
.slide__copy .eyebrow, .feat__copy .eyebrow { color: #fff; background: rgba(12,24,17,.55); padding: 4px 12px; border-radius: 999px; backdrop-filter: blur(4px); }

/* ===== Hero identique à V1 ===== */
/* Hero accueil */
.hero { position: relative; padding: var(--s6) 0 var(--s7); color: #fff; background: var(--bg); }
.hero__slider { position: relative; isolation: isolate; align-self: stretch; min-height: 480px; border-radius: var(--r-lg); overflow: hidden; background: #2a2118; }
.hero__slide { position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility .6s; }
.hero__slide.is-active { opacity: 1; visibility: visible; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.hero__slide::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(26,20,14,.82) 0%, rgba(26,20,14,.45) 40%, rgba(26,20,14,0) 70%); }
.hero__copy { position: relative; margin-left: var(--s6); padding-bottom: var(--s6); }
.hero__controls { position: absolute; left: var(--s6); bottom: var(--s5); display: flex; align-items: center; gap: var(--s3); z-index: 2; }
.hero__dots { display: flex; align-items: center; gap: 8px; }
.hero__dots button { position: relative; width: 28px; height: 20px; padding: 0; border: 0; background: none; cursor: pointer; }
.hero__dots button::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: rgba(255,255,255,.45); transition: background .3s, right .35s var(--ease); }
.hero__dots button:hover::before { background: rgba(255,255,255,.85); }
.hero__dots button.is-active { width: 44px; }
.hero__dots button.is-active::before { background: #e9c46a; }
.hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: var(--s6); align-items: start; }
.hero__kicker { display: inline-block; font-family: var(--font-heading); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.8); margin-bottom: var(--s4); }
.hero__copy h1 { color: #fff; font-size: clamp(32px, 3.6vw, 48px); line-height: 1.08; max-width: 440px; }
.hero__lead { font-size: 19px; color: rgba(255,255,255,.88); max-width: 400px; margin: var(--s4) 0 var(--s6); }
.btn--accent { background: #f4c430; color: #1b1b1b; box-shadow: 0 8px 20px rgba(244,196,48,.28); }
.btn--accent:hover { background: #ffd24a; color: #1b1b1b; }
.hero__side { display: grid; gap: var(--s4); }
.hero__side-title { color: var(--heading); font-size: 22px; margin: 0; }
.side-card { display: grid; grid-template-columns: 80px 1fr; gap: var(--s3); align-items: center; text-decoration: none; color: var(--text); transition: transform .2s var(--ease); }
.side-card:hover { transform: translateX(3px); } .side-card:hover strong { color: var(--brand); }
.side-card img { width: 80px; height: 80px; object-fit: cover; border-radius: var(--r-sm); }
.side-card strong { display: block; font-family: var(--font-heading); font-size: 16px; line-height: 1.3; color: var(--heading); }
.side-card small { display: block; font-size: 13px; color: var(--faint); margin-top: 2px; }
@media (max-width: 960px) { .hero__grid { grid-template-columns: 1fr; gap: var(--s6); } .hero__slider { min-height: 440px; } }

/* ===== V3 : ajustements ===== */
/* hero V1 garde la police d'origine (Atkinson) pour rester identique */
.hero__copy h1, .hero__kicker, .hero__side-title, .side-card strong { font-family: "Atkinson Hyperlegible", system-ui, sans-serif; }
.hero__side-title { font-size: 22px; }
.hero__copy h1 { font-weight: 700; letter-spacing: normal; }
.hero { padding-bottom: var(--s5); }
.topics { padding: 0 0 8px; }
.topics .pills { padding-top: 8px; }

/* couleur par rubrique : repère immédiat */
.c-mh { color: #2c6e49 !important; } .c-wb { color: #a0753a !important; } .c-rel { color: #b0524a !important; } .c-so { color: #1f6f78 !important; }
.pill:nth-child(1) svg { background: #e2ebd5; stroke: #1e5c38; } .pill:nth-child(2) svg { background: #f3e8d6; stroke: #8a6230; }
.pill:nth-child(3) svg { background: #f7dfdc; stroke: #9a423b; } .pill:nth-child(4) svg { background: #d6e9ea; stroke: #17575f; }
.slide__copy .eyebrow.c-so, .feat__copy .eyebrow { color: #fff !important; }

/* Start here */
.start__box { display: grid; grid-template-columns: 1fr 1.25fr; gap: 48px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 28px; padding: clamp(28px, 4vw, 52px); }
.start__intro h2 { margin: 8px 0 10px; } .start__intro p { margin: 0; color: var(--muted); font-size: 18px; }
.start__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.start__list a { display: flex; gap: 16px; align-items: center; padding: 16px 18px; border-radius: 18px; background: var(--bg); border: 1px solid transparent; text-decoration: none; color: var(--ink); transition: border-color .2s, transform .2s var(--ease); }
.start__list a:hover { border-color: var(--brand); transform: translateX(4px); }
.start__list b { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; font-family: var(--serif); font-size: 22px; }
.start__list strong { display: block; font-family: var(--serif); font-size: 22px; line-height: 1.2; }
.start__list small { color: var(--faint); font-size: 14px; }
@media (max-width: 900px) { .start__box { grid-template-columns: 1fr; gap: 24px; } }

/* catégorie : tri + compteur ; article : navigation précédent/suivant */
.sortbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 28px; font-size: 14.5px; color: var(--muted); }
.sortbar select { font: inherit; font-weight: 700; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); }
.pn { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pn a { display: block; padding: 18px 22px; border: 1px solid var(--line); border-radius: 18px; background: #fff; text-decoration: none; color: var(--ink); }
.pn a:hover { border-color: var(--brand); }
.pn small { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); margin-bottom: 4px; }
.pn strong { font-family: var(--serif); font-size: 22px; line-height: 1.2; }
.pn a:last-child { text-align: right; }
@media (max-width: 600px) { .pn { grid-template-columns: 1fr; } .pn a:last-child { text-align: left; } }

/* ===== Browse by topic identique à V1 ===== */
/* Thèmes */
.topic-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5); }
.topic { display: block; text-align: center; text-decoration: none; color: var(--text); background: #fff; border: 1px solid rgba(31, 41, 55, .12); border-radius: 26px; padding: var(--s6) var(--s5); box-shadow: 0 10px 28px rgba(31, 41, 55, .12); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
.topic:hover { transform: translateY(-4px); border-color: var(--brand); box-shadow: 0 18px 36px rgba(31, 41, 55, .18); color: var(--text); }
.topic__icon { box-sizing: content-box; width: 48px; height: 48px; padding: 14px; border-radius: 50%; background: var(--brand-soft); display: block; margin: 0 auto var(--s4); fill: none; stroke: var(--brand-deep); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.topic h3 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; font-size: 27px; line-height: 1.15; margin: 0 0 var(--s2); color: var(--heading); }
.topic p { font-size: var(--fs-sm); color: var(--muted); margin: 0 auto; max-width: 220px; }
@media (max-width: 900px) { .topic-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .topic-grid { grid-template-columns: 1fr; } }
.browse .sec-head h2 { font-family: "Atkinson Hyperlegible", system-ui, sans-serif; font-size: var(--fs-h2); letter-spacing: normal; }
.browse { padding-top: 24px; }

/* ===== Liste d articles du milieu : identique à V1 ===== */
/* Liste d'articles (listing) */
.post-list { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 0 var(--s5); }
.post-row { display: grid; grid-template-columns: 76px 1fr 200px; gap: var(--s4); align-items: center; padding: var(--s5) 0; border-bottom: 1px solid var(--border); }
.post-row:last-of-type { border-bottom: 0; }
.post-row__icon { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; }
.post-row__icon svg { width: 38px; height: 38px; fill: none; stroke: #2f4a3a; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: #2f4a3a; }
.post-row__body h3 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; font-size: 25px; line-height: 1.2; margin: 0 0 var(--s2); color: #23402f; }
.post-row__body h3 a { color: inherit; text-decoration: none; }
.post-row__body h3 a:hover { color: var(--brand); }
.post-row__min { font-family: var(--font-heading); font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--faint); white-space: nowrap; margin-left: var(--s2); }
.post-row__body p { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.post-row__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); display: block; }
@media (max-width: 700px) { .post-row { grid-template-columns: 56px 1fr; } .post-row__icon { width: 56px; height: 56px; } .post-row__icon svg { width: 28px; height: 28px; } .post-row__img { grid-column: 1 / -1; } }
.ad-img img { display:block; width:100%; height:auto; border-radius:var(--r-md); }
.ad-img--feed { margin:var(--s4) 0; }

.cols3--4{grid-template-columns:repeat(4,minmax(0,1fr))}@media(max-width:1040px){.cols3--4{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.cols3--4{grid-template-columns:minmax(0,1fr)}}

/* Recent posts (hero sidebar) : retour au design V3 d'origine */
.rail__title { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; color: #16231b; }
.rail .pr h3 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; color: #16231b; }
.rail .pr { border-bottom-color: rgba(22,35,27,.12); }
.rail .meta { font-size: 13px; }
.rail .meta b { font-weight: 800; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; }

/* Hero plus bas : slider a hauteur fixe, 3 articles recents a cote */
.hero__slider { align-self: start; min-height: 0; height: 430px; }
.hero__copy h1 { font-size: clamp(32px, 3.5vw, 46px); line-height: 1.08; max-width: 540px; }
.hero__lead { font-size: 19px; max-width: 460px; margin: var(--s4) 0 var(--s5); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hero__copy { padding-bottom: var(--s7); }
.hero__grid .rail .pr:nth-of-type(n+4) { display: none; }
@media (max-width: 960px) { .hero__slider { height: 400px; } .hero__grid .rail .pr:nth-of-type(n+4) { display: grid; } }

/* Hero : meme hauteur que le sidebar */
.hero__slider { align-self: stretch; height: auto; min-height: 0; }
@media (max-width: 960px) { .hero__slider { height: 400px; } }

/* Fresh from the blog : grille de 4 cartes (layout different du hero) */
.fresh-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.fcard { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; }
.fcard__img { display: block; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; margin-bottom: 6px; }
.fcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.fcard:hover .fcard__img img { transform: scale(1.05); }
.fcard h3 { font-size: 22px; line-height: 1.2; margin: 0; }
.fcard:hover h3 { color: var(--brand); }
@media (max-width: 1000px) { .fresh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .fresh-grid { grid-template-columns: 1fr; } }

/* Not sure where to begin? (Start here) */
.v4-start { background: var(--band); margin: 24px 0 0; padding: 96px 0; border-top: 1px solid rgba(44,110,73,.14); border-bottom: 1px solid rgba(44,110,73,.14); }
.v4-start__in { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }
.v4-start__img img { display: block; width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; border-radius: 24px; }
.v4-start__copy h2 { margin: 8px 0 12px; font-size: clamp(30px, 3.4vw, 42px); }
.v4-start__copy > p { margin: 0 0 24px; color: var(--muted); max-width: 460px; }
.v4-steps { list-style: none; margin: 0; padding: 0; }
.v4-steps li + li { border-top: 1px solid rgba(44,110,73,.2); }
.v4-steps a { display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: center; padding: 16px 0; text-decoration: none; color: inherit; }
.v4-steps b { width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--brand-deep); display: grid; place-items: center; font-weight: 800; }
.v4-steps strong { display: block; font-family: var(--serif); font-weight: 700; font-size: 22px; color: var(--ink); }
.v4-steps small { font-size: 14.5px; color: var(--muted); }
.v4-steps a:hover strong { color: var(--brand); }
@media (max-width: 900px) { .v4-start__in { grid-template-columns: 1fr; gap: 32px; } .v4-start__img img { aspect-ratio: 16 / 10; } .v4-start { padding: 64px 0; } }

/* How are you feeling today? */
.v4-feel { padding: 72px 0; }
.v4-feel__box { text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 28px; padding: 56px 24px 60px; }
.v4-feel__box h2 { margin: 8px 0 28px; font-size: clamp(30px, 3.4vw, 42px); }
.v4-feel__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.v4-feel__chips a { padding: 14px 28px; border-radius: 999px; background: var(--band); color: var(--brand-deep); font-weight: 700; font-size: 17px; text-decoration: none; border: 1px solid rgba(44,110,73,.18); transition: background .2s, color .2s, transform .2s; }
.v4-feel__chips a:hover { background: var(--brand); color: #fff; transform: translateY(-2px); }

/* Sections par categorie (chacune separee) */
.cs { padding: 80px 0; }
.cs--white { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cs--band { background: var(--band); border-top: 1px solid rgba(44,110,73,.14); border-bottom: 1px solid rgba(44,110,73,.14); }
.cs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.cs-card { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; }
.cs-card__img { display: block; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; margin-bottom: 6px; }
.cs-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.cs-card:hover .cs-card__img img { transform: scale(1.05); }
.cs-card h3 { font-size: 24px; line-height: 1.2; margin: 0; }
.cs-card:hover h3, .cs-row:hover h3 { color: var(--brand); }
.cs-list { display: grid; gap: 0; }
.cs-row { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: center; padding: 22px 0; text-decoration: none; color: inherit; border-bottom: 1px solid rgba(22,35,27,.14); }
.cs-row:first-child { padding-top: 0; } .cs-row:last-child { border-bottom: 0; padding-bottom: 0; }
.cs-row__img { display: block; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; }
.cs-row__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-row h3 { font-size: 28px; line-height: 1.15; margin: 4px 0 8px; }
@media (max-width: 900px) { .cs { padding: 56px 0; } .cs-grid { grid-template-columns: 1fr; } .cs-row { grid-template-columns: 110px 1fr; gap: 16px; } .cs-row h3 { font-size: 21px; } }

/* Categories : 4 designs differents */
/* A : une grande + liste numerotee */
.csA__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 56px; align-items: start; }
.csA__feat { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; }
.csA__img { display: block; aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden; margin-bottom: 6px; }
.csA__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.csA__feat h3 { font-size: 34px; line-height: 1.12; margin: 0; }
.csA__feat:hover h3, .csA__item:hover h3 { color: var(--brand); }
.csA__side { display: grid; }
.csA__item { display: grid; grid-template-columns: 56px 1fr; gap: 14px; padding: 26px 0; border-top: 1px solid rgba(22,35,27,.14); text-decoration: none; color: inherit; }
.csA__item:first-child { border-top: 2px solid var(--ink); }
.csA__item b { font-family: var(--serif); font-size: 40px; font-weight: 600; line-height: 1; color: var(--brand); opacity: .55; }
.csA__item h3 { font-size: 24px; line-height: 1.18; margin: 0 0 8px; }
/* B : 4 cartes portrait avec titre sur l image */
.csB__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.csB__card { position: relative; isolation: isolate; display: flex; align-items: flex-end; aspect-ratio: 3 / 4; border-radius: 22px; overflow: hidden; text-decoration: none; color: #fff; background: #1b2a21; }
.csB__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s var(--ease); }
.csB__card:hover img { transform: scale(1.05); }
.csB__card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(12,24,17,.86) 0%, rgba(12,24,17,.15) 62%, rgba(12,24,17,0) 80%); }
.csB__t { padding: 20px; display: grid; gap: 8px; }
.csB__pill { justify-self: start; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.9); color: var(--brand-deep); font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.csB__card h3, .csD__feat h3 { color: #fff; font-size: 22px; line-height: 1.18; margin: 0; }
.csB__card .meta, .csD__feat .meta { color: rgba(255,255,255,.8); }
/* C : panneau titre a gauche, lignes avec miniature a droite */
.csC__in { display: grid; grid-template-columns: 340px 1fr; gap: 56px; align-items: start; }
.csC__head { position: sticky; top: 100px; padding: 40px 32px; border-radius: 26px; background: #f3e3dc; display: grid; gap: 10px; justify-items: start; }
.csC__head h2 { margin: 0 0 8px; font-size: clamp(32px, 3.4vw, 42px); }
.csC__list { display: grid; }
.csC__row { display: grid; grid-template-columns: 1fr 190px; gap: 28px; align-items: center; padding: 26px 0; border-bottom: 1px solid rgba(22,35,27,.14); text-decoration: none; color: inherit; }
.csC__row:first-child { padding-top: 0; } .csC__row:last-child { border-bottom: 0; padding-bottom: 0; }
.csC__row h3 { font-size: 27px; line-height: 1.15; margin: 0 0 8px; }
.csC__row:hover h3, .csD__card:hover h3 { color: var(--brand); }
.csC__thumb { display: block; aspect-ratio: 1; border-radius: 50%; overflow: hidden; }
.csC__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* D : grande banniere + 2 cartes compactes */
.csD__feat { position: relative; isolation: isolate; display: flex; align-items: flex-end; aspect-ratio: 21 / 8; border-radius: 26px; overflow: hidden; text-decoration: none; background: #1b2a21; margin-bottom: 24px; }
.csD__feat > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.csD__feat::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(12,24,17,.85) 0%, rgba(12,24,17,.35) 55%, rgba(12,24,17,0) 80%); }
.csD__t { padding: 36px 40px; display: grid; gap: 10px; max-width: 640px; }
.csD__feat h3 { font-size: 34px; line-height: 1.1; }
.csD__two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.csD__card { display: grid; grid-template-columns: 140px 1fr; gap: 18px; align-items: center; padding: 14px; background: #fff; border-radius: 20px; text-decoration: none; color: inherit; }
.csD__thumb { display: block; aspect-ratio: 1; border-radius: 14px; overflow: hidden; }
.csD__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.csD__card h3 { font-size: 21px; line-height: 1.18; margin: 0 0 6px; }
@media (max-width: 1000px) { .csA__grid, .csC__in { grid-template-columns: 1fr; gap: 28px; } .csB__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .csC__head { position: static; } .csD__two { grid-template-columns: 1fr; } .csD__feat { aspect-ratio: 16 / 9; } }
@media (max-width: 560px) { .csB__grid { grid-template-columns: 1fr; } .csC__row { grid-template-columns: 1fr 90px; gap: 14px; } .csC__row h3 { font-size: 20px; } .csD__feat h3 { font-size: 24px; } .csD__t { padding: 22px; } }

/* Mental Health : cartes avec image en arche */
.csA2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.csA2__card { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 20px 20px 30px; border-radius: 28px; background: #fff; border: 1px solid var(--line); text-decoration: none; color: inherit; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.csA2__card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(22,35,27,.08); }
.csA2__arch { display: block; width: 100%; aspect-ratio: 4 / 4.6; border-radius: 999px 999px 18px 18px; overflow: hidden; margin-bottom: 12px; }
.csA2__arch img { width: 100%; height: 100%; object-fit: cover; display: block; }
.csA2__card h3 { font-size: 24px; line-height: 1.2; margin: 0; }
.csA2__card:hover h3 { color: var(--brand); }
.csA2__card .meta { justify-content: center; }
@media (max-width: 900px) { .csA2 { grid-template-columns: 1fr; } .csA2__card { max-width: 420px; margin: 0 auto; width: 100%; } }

/* Well-Being : galerie aeree, texte sous l image */
.csB2__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 28px; }
.csB2__item { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; }
.csB2__img { display: block; aspect-ratio: 1; border-radius: 26px; overflow: hidden; margin-bottom: 8px; }
.csB2__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.csB2__item:hover .csB2__img img { transform: scale(1.05); }
.csB2__item h3 { font-size: 21px; line-height: 1.22; margin: 0; }
.csB2__item:hover h3 { color: var(--brand); }
@media (max-width: 1000px) { .csB2__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .csB2__grid { grid-template-columns: 1fr; } }

/* Well-Being : bande photos + citations */
.wb-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; }
.wb-t { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 20px; overflow: hidden; text-decoration: none; transition: transform .25s ease; }
.wb-t:hover { transform: translateY(-4px); }
.wb-t img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wb-t--q { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 14px; text-align: center; color: #4b5a50; background: linear-gradient(160deg, #e6ecdf, #eef0e4); border: 1px solid rgba(22,35,27,.1); }
.wb-t--q span { font-family: var(--serif); font-size: 19px; line-height: 1.3; font-weight: 600; }
.wb-t--q em { font-style: italic; }
.wb-t--q i { font-style: normal; font-size: 12px; color: var(--brand); opacity: .7; }
@media (max-width: 1000px) { .wb-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 520px) { .wb-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Relationships : article en plus sous le panneau */
.csC__left { position: sticky; top: 100px; display: grid; gap: 22px; }
.csC__left .csC__head { position: static; }
.csC__feat { display: grid; gap: 8px; text-decoration: none; color: inherit; }
.csC__featimg { display: block; aspect-ratio: 16 / 10; border-radius: 20px; overflow: hidden; margin-bottom: 4px; }
.csC__featimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.csC__feat h3 { font-size: 23px; line-height: 1.18; margin: 0; }
.csC__feat:hover h3 { color: var(--brand); }
@media (max-width: 1000px) { .csC__left { position: static; } }

/* Relationships : sans panneau rose, image plus grande */
.csC__left .csC__head { background: none; padding: 0; border-radius: 0; gap: 6px; }
.csC__left { gap: 20px; }
.csC__featimg { aspect-ratio: 1 / 1.08; border-radius: 24px; }
.csC__feat h3 { font-size: 24px; }

/* Allegement : pas de fonds colores, espaces reduits de moitie */
.cs, .cs--white, .cs--band { background: none; border: 0; padding: 40px 0; }
.cs + .cs { border-top: 1px solid var(--line); }
.cs .sec-head { margin-bottom: 20px; }
.cs--band .csD__card { border: 1px solid var(--line); }
.csA2 { gap: 24px; }
.csA2__card { padding: 16px 16px 24px; }
.csD__two { grid-template-columns: 1fr 1fr; gap: 16px; }
.section.browse, .browse { padding-top: 32px; padding-bottom: 8px; }
.v4-nl { padding: 40px 0 !important; }
.csA2 { display: flex; flex-wrap: wrap; justify-content: center; }
.csA2__card { flex: 0 1 calc((100% - 48px) / 3); }
@media (max-width: 900px) { .csA2__card { flex-basis: 100%; } }

/* Start here : 3 parcours */
.topic-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .topic-grid--3 { grid-template-columns: 1fr; } }

/* Mental Health : liste dans un panneau blanc */
.mh2__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.mh2__head h2 { margin: 0; font-family: "Atkinson Hyperlegible", system-ui, sans-serif; font-weight: 700; letter-spacing: normal; font-size: clamp(30px, 3.4vw, 42px); }
.mh2__all { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.mh2__all svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mh2__panel { background: #fff; border: 1px solid var(--line); border-radius: 28px; padding: 22px 22px 26px; }
.mh2__row { display: grid; grid-template-columns: 230px 1fr; gap: 28px; align-items: center; padding: 20px 0; }
.mh2__row + .mh2__row { border-top: 1px solid rgba(44,110,73,.16); }
.mh2__row:first-child { padding-top: 0; }
.mh2__img { display: block; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; }
.mh2__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mh2__tag { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); margin-bottom: 6px; }
.mh2__body h3 { font-size: 28px; line-height: 1.15; margin: 0 0 8px; }
.mh2__body h3 a { color: inherit; text-decoration: none; }
.mh2__body h3 a:hover { color: var(--brand); }
.mh2__body p { margin: 0 0 10px; color: var(--ink); font-size: 16px; line-height: 1.5; }
.mh2__meta { font-size: 14.5px; color: var(--faint); }
.mh2__meta b { color: var(--brand); font-weight: 700; }
.mh2__foot { display: flex; justify-content: center; padding-top: 22px; border-top: 1px solid rgba(44,110,73,.16); }
.mh2__btn { padding: 12px 34px; border-radius: 999px; border: 1.5px solid var(--brand); color: var(--brand-deep); font-weight: 800; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.mh2__btn:hover { background: var(--brand); color: #fff; }
@media (max-width: 700px) { .mh2__row { grid-template-columns: 1fr; gap: 14px; } .mh2__body h3 { font-size: 23px; } }

/* Relationships : version compacte */
.csC__in { grid-template-columns: 300px 1fr; gap: 40px; }
.csC__left { gap: 14px; }
.csC__head h2 { font-size: clamp(28px, 3vw, 34px); margin: 0; }
.csC__featimg { aspect-ratio: 16 / 10; border-radius: 18px; }
.csC__feat h3 { font-size: 19px; }
.csC__row { grid-template-columns: 1fr 110px; gap: 20px; padding: 14px 0; }
.csC__row:first-child { padding-top: 0; }
.csC__row h3 { font-size: 21px; margin: 0 0 4px; }
.csC__thumb { width: 110px; }
@media (max-width: 1000px) { .csC__in { grid-template-columns: 1fr; gap: 24px; } }

/* Well-Being : grandes cartes (4 x 2) */
.wb-strip--big { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.wb-strip--big .wb-t { aspect-ratio: 1 / 1.05; border-radius: 24px; }
.wb-strip--big .wb-t--q { padding: 24px; }
.wb-strip--big .wb-t--q span { font-size: 25px; line-height: 1.3; }
.wb-strip--big .wb-t--q i { font-size: 16px; }
@media (max-width: 700px) { .wb-strip--big { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .wb-strip--big .wb-t--q span { font-size: 19px; } }

/* Well-Being : 7 cartes sur une ligne, plus hautes */
.wb-strip { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; }
.wb-strip .wb-t { aspect-ratio: 1 / 1.75; border-radius: 20px; }
@media (max-width: 1000px) { .wb-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } .wb-strip .wb-t { aspect-ratio: 3 / 4; } }
@media (max-width: 520px) { .wb-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Well-Being : texte des citations un peu plus grand */
.wb-strip .wb-t--q { padding: 14px 10px; }
.wb-strip .wb-t--q span { font-size: 23px; line-height: 1.28; }
.wb-strip .wb-t--q i { font-size: 14px; }
.wb-strip .wb-t--q i { display: block; line-height: 0; opacity: .8; }
.wb-strip .wb-t--q i svg { display: block; }

/* Filtre : overthinkers / autres */
.pick { display: inline-flex; gap: 6px; padding: 6px; margin: 0 0 24px; border-radius: 999px; background: #fff; border: 1px solid var(--line); }
.pick__btn { padding: 12px 26px; border-radius: 999px; border: 0; background: transparent; color: var(--ink); font: 800 16px "Nunito", system-ui, sans-serif; cursor: pointer; transition: background .2s, color .2s; }
.pick__btn:hover { color: var(--brand); }
.pick__btn.is-active { background: var(--brand); color: #fff; }
.topic-grid[hidden] { display: none; }

/* Relationships : image principale 70% / liste 30% */
.csC__in { grid-template-columns: 7fr 3fr; gap: 40px; align-items: start; }
.csC__left { position: static; }
.csC__featimg { aspect-ratio: 16 / 9; border-radius: 22px; }
.csC__feat h3 { font-size: 28px; line-height: 1.15; }
.csC__list { align-self: end; }
.csC__row { grid-template-columns: 1fr 76px; gap: 14px; padding: 14px 0; }
.csC__row:first-child { padding-top: 0; }
.csC__row h3 { font-size: 18px; line-height: 1.2; }
.csC__thumb { width: 76px; }
@media (max-width: 1000px) { .csC__in { grid-template-columns: 1fr; gap: 24px; } }

/* Relationships : 50% / 50% */
.csC__in { grid-template-columns: 1fr 1fr; gap: 48px; align-items: stretch; }
.csC__featimg { aspect-ratio: 4 / 3; }
.csC__feat h3 { font-size: 26px; }
.csC__list { align-self: stretch; display: grid; align-content: space-between; }
.csC__row { grid-template-columns: 1fr 100px; gap: 18px; padding: 16px 0; }
.csC__row:first-child { padding-top: 0; }
.csC__row:last-child { padding-bottom: 0; }
.csC__row h3 { font-size: 21px; line-height: 1.2; }
.csC__thumb { width: 100px; }
@media (max-width: 1000px) { .csC__in { grid-template-columns: 1fr; gap: 24px; } }

/* Stop Overthinking : section phare (vert fonce) */
.so-flag { background: #1e5a3b; color: #fff; padding: 72px 0 80px; margin: 24px 0; }
.so-flag__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 36px; }
.so-flag__eyebrow { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #f4c430; margin-bottom: 8px; }
.so-flag h2 { color: #fff; margin: 0 0 8px; font-size: clamp(38px, 4.6vw, 58px); line-height: 1.04; }
.so-flag__top p { margin: 0; color: rgba(255,255,255,.8); font-size: 19px; }
.so-flag__all { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
.so-flag__all svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.so-flag__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: stretch; }
.so-flag__main { display: flex; flex-direction: column; border-radius: 26px; overflow: hidden; background: #fff; color: var(--ink); text-decoration: none; }
.so-flag__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.so-flag__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.so-flag__main:hover .so-flag__img img { transform: scale(1.04); }
.so-flag__body { display: grid; gap: 10px; padding: 26px 28px 30px; justify-items: start; }
.so-flag__tag { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); }
.so-flag__main h3 { color: var(--ink); font-size: 32px; line-height: 1.12; margin: 0; }
.so-flag__meta { font-size: 14.5px; color: var(--faint); }
.so-flag__btn { margin-top: 6px; padding: 13px 28px; border-radius: 999px; background: #f4c430; color: #1b1b1b; font-weight: 800; font-size: 15px; }
.so-flag__main:hover .so-flag__btn { background: #ffd24a; }
.so-flag__list { display: grid; align-content: stretch; }
.so-flag__row { display: grid; grid-template-columns: 44px 1fr 90px; gap: 16px; align-items: center; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.2); color: #fff; text-decoration: none; }
.so-flag__row:first-child { border-top: 0; padding-top: 0; } .so-flag__row:last-child { padding-bottom: 0; }
.so-flag__row b { font-family: var(--serif); font-size: 34px; font-weight: 600; color: #f4c430; line-height: 1; }
.so-flag__row h3 { color: #fff; font-size: 22px; line-height: 1.18; margin: 0 0 6px; }
.so-flag__row .so-flag__meta { color: rgba(255,255,255,.7); }
.so-flag__row:hover h3 { color: #f4c430; }
.so-flag__thumb { display: block; width: 90px; aspect-ratio: 1; border-radius: 16px; overflow: hidden; }
.so-flag__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) { .so-flag { padding: 52px 0 56px; } .so-flag__grid { grid-template-columns: 1fr; gap: 28px; } .so-flag__top { flex-direction: column; align-items: flex-start; } .so-flag__main h3 { font-size: 26px; } .so-flag__row { grid-template-columns: 34px 1fr 72px; } .so-flag__thumb { width: 72px; } }

/* Relationships : titre au-dessus, image = hauteur des 3 articles */
.csC__in2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: stretch; }
.csC__left2 { display: flex; flex-direction: column; min-height: 0; }
.csC__left2 .csC__feat { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.csC__left2 .csC__featimg { flex: 1; min-height: 0; aspect-ratio: auto; position: relative; margin-bottom: 4px; }
.csC__left2 .csC__featimg img { position: absolute; inset: 0; }
.csC__in2 .csC__list { align-self: stretch; display: block; }
.csC__in2 .csC__row { padding: 18px 0; }
.csC__in2 .csC__row:first-child { padding-top: 0; }
.csC__in2 .csC__row:last-child { padding-bottom: 0; border-bottom: 0; }
@media (max-width: 1000px) { .csC__in2 { grid-template-columns: 1fr; gap: 24px; } .csC__left2 .csC__featimg { aspect-ratio: 16 / 10; flex: none; } }

/* Stop Overthinking : feuille de route numerotee */
.road { padding: 56px 0 64px; }
.road h2 { font-size: clamp(36px, 4.2vw, 52px); margin: 6px 0 6px; }
.road__sub { margin: 0; color: var(--muted); font-size: 18px; }
.road__list { list-style: none; margin: 8px 0 0; padding: 0; position: relative; }
.road__list::before { content: ""; position: absolute; left: 23px; top: 24px; bottom: 24px; width: 2px; background: repeating-linear-gradient(to bottom, rgba(44,110,73,.45) 0 6px, transparent 6px 12px); }
.road__step { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 24px; align-items: center; padding: 10px 0; }
.road__n { position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-family: var(--serif); font-size: 24px; font-weight: 700; box-shadow: 0 0 0 6px var(--bg); }
.road__card { display: grid; grid-template-columns: 1fr 150px; gap: 24px; align-items: center; padding: 16px 18px 16px 28px; border-radius: 20px; background: #fff; border: 1px solid var(--line); text-decoration: none; color: inherit; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
.road__card:hover { transform: translateX(4px); border-color: var(--brand); box-shadow: 0 10px 26px rgba(22,35,27,.07); }
.road__lab { display: block; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); margin-bottom: 4px; }
.road__card h3 { font-size: 25px; line-height: 1.18; margin: 0 0 6px; }
.road__meta { font-size: 14.5px; color: var(--faint); }
.road__img { display: block; aspect-ratio: 3 / 2; border-radius: 14px; overflow: hidden; }
.road__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 700px) { .road__step { grid-template-columns: 40px 1fr; gap: 14px; } .road__n { width: 40px; height: 40px; font-size: 20px; } .road__list::before { left: 19px; } .road__card { grid-template-columns: 1fr 84px; gap: 14px; padding: 12px 12px 12px 16px; } .road__card h3 { font-size: 18px; } }

/* Stop Overthinking : cartes par situation (sans ordre impose) */
.sit { padding: 56px 0 64px; }
.sit h2 { font-size: clamp(36px, 4.2vw, 52px); margin: 6px 0 6px; }
.sit__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 8px; }
.sit__card { display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 22px; border-radius: 24px; background: #fff; border: 1px solid var(--line); text-decoration: none; color: inherit; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.sit__card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(22,35,27,.08); }
.sit__img { display: block; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; margin-bottom: 10px; }
.sit__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.sit__card:hover .sit__img img { transform: scale(1.05); }
.sit__lab { align-self: flex-start; margin: 0 8px; padding: 5px 14px; border-radius: 999px; background: var(--band); color: var(--brand-deep); font-size: 12.5px; font-weight: 800; letter-spacing: .06em; }
.sit__card h3 { font-size: 23px; line-height: 1.2; margin: 6px 8px 0; }
.sit__card:hover h3 { color: var(--brand); }
.sit__meta { margin: 2px 8px 0; font-size: 14.5px; color: var(--faint); }
@media (max-width: 1000px) { .sit__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sit__grid { grid-template-columns: 1fr; } }

/* Stop Overthinking : filtres par situation */
.sit__chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 26px; }
.sit__chip { padding: 10px 20px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); font: 700 15px "Nunito", system-ui, sans-serif; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.sit__chip:hover { border-color: var(--brand); color: var(--brand); }
.sit__chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.sit__grid { margin-top: 0; }
.sit__card[hidden] { display: none; }
.sit__more { display: flex; justify-content: center; margin-top: 36px; }
.sit__more[hidden] { display: none; }
.sit__btn { padding: 13px 30px; border-radius: 999px; border: 1.5px solid var(--brand); background: transparent; color: var(--brand-deep); font: 800 15px "Nunito", system-ui, sans-serif; cursor: pointer; }
.sit__btn:hover { background: var(--brand); color: #fff; }

/* Article pilier mis en avant */
.sit__pillar { display: grid; grid-template-columns: 1.05fr 1fr; gap: 0; margin: 12px 0 44px; border-radius: 30px; overflow: hidden; background: #fff; border: 1.5px solid rgba(44,110,73,.35); box-shadow: 0 18px 44px rgba(22,35,27,.09); text-decoration: none; color: inherit; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.sit__pillar:hover { transform: translateY(-3px); box-shadow: 0 24px 54px rgba(22,35,27,.13); }
.sit__pillar-img { display: block; min-height: 340px; position: relative; overflow: hidden; }
.sit__pillar-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.sit__pillar:hover .sit__pillar-img img { transform: scale(1.04); }
.sit__pillar-body { display: grid; gap: 14px; align-content: center; justify-items: start; padding: 44px 48px; background: linear-gradient(160deg, #fff, #f1f6ec); }
.sit__pillar-tag { padding: 6px 14px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.sit__pillar-body h3 { font-size: clamp(32px, 3.4vw, 44px); line-height: 1.06; margin: 0; }
.sit__pillar-body p { margin: 0; color: var(--muted); font-size: 18px; line-height: 1.55; max-width: 460px; }
.sit__pillar-meta { font-size: 14.5px; color: var(--faint); }
.sit__pillar-btn { margin-top: 6px; padding: 14px 30px; border-radius: 999px; background: #f4c430; color: #1b1b1b; font-weight: 800; font-size: 16px; }
.sit__pillar:hover .sit__pillar-btn { background: #ffd24a; }
@media (max-width: 900px) { .sit__pillar { grid-template-columns: 1fr; } .sit__pillar-img { min-height: 220px; } .sit__pillar-body { padding: 28px 24px 32px; } }

/* Home: Recent posts rail fixed on the right for the whole page; space under it is reserved for ads */
.home-cols { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: var(--s6); align-items: start; }
.home-main { min-width: 0; }
.home-main .container { width: 100%; max-width: none; padding: 0; }
.home-main .hero__grid { grid-template-columns: minmax(0, 1fr); }
.rail-col { position: sticky; top: calc(var(--header-h) + 24px); padding-top: var(--s6); }
.rail-ads { min-height: 600px; }
@media (max-width: 960px) { .home-cols { grid-template-columns: minmax(0, 1fr); } .rail-col { position: static; padding-top: 0; } .rail-ads { display: none; } }
.home-main .hero__slider { align-self: start; height: 450px; }
.rail-book { margin-top: var(--s5); }
.rail-book a { display: block; }
@media (max-width: 960px) { .home-main .hero__slider { height: 400px; } .rail-book { max-width: 340px; } }

/* Well-Being: 3 photos + 3 title cards */
.wb-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.wb-strip .wb-t { aspect-ratio: 1 / 1.5; }
.wb-strip .wb-t--q span { font-size: 17px; line-height: 1.3; }
@media (max-width: 1000px) { .wb-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wb-strip .wb-t { aspect-ratio: 3 / 4; } }
@media (max-width: 520px) { .wb-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Thin vertical divider between the main column and the sidebar */
.home-cols { gap: 0; grid-template-columns: minmax(0, 1fr) calc(330px + var(--s6)); }
.home-main { padding-right: var(--s6); border-right: 1px solid rgba(22,35,27,.12); }
.rail-col { padding-left: var(--s6); }
@media (max-width: 960px) { .home-cols { grid-template-columns: minmax(0, 1fr); } .home-main { padding-right: 0; border-right: 0; } .rail-col { padding-left: 0; } }

/* Section headings: same face and size as "Well-Being" */
.mh2__head h2, .browse .sec-head h2 { font-family: var(--serif); font-weight: 700; font-size: clamp(32px, 3.8vw, 46px); line-height: 1.08; letter-spacing: -.005em; }

/* Well-Being title cards: always keep breathing room above and below the text */
.wb-strip .wb-t--q { padding: 32px 14px; }
/* The main column is narrower next to the sidebar, so switch grids earlier */
@media (max-width: 1500px) { .wb-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wb-strip .wb-t { aspect-ratio: 4 / 3.4; } }
@media (max-width: 640px) { .wb-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wb-strip .wb-t { aspect-ratio: 3 / 4; } }

/* Well-Being: soft green intro panel + 3 photo cards */
.wbD { background: transparent; padding-block: var(--s6); }
.wbD__panel { display: grid; grid-template-columns: 300px minmax(0, 1fr); background: #e8efe4; border-radius: 26px; overflow: hidden; }
.wbD__intro { padding: 36px 30px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.wbD__intro h2 { font-family: var(--serif); font-weight: 700; font-size: clamp(36px, 3.6vw, 46px); line-height: 1.05; margin: 0 0 12px; color: #16231b; }
.wbD__intro p { margin: 0; color: var(--muted, #5b6a60); line-height: 1.55; font-size: 15px; }
.wbD__btn { align-self: flex-start; background: #f4c430; color: #16231b; font: 800 13px/1 "Nunito", sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: 13px 20px; border-radius: 5px; box-shadow: 0 2px 0 #c9a022; text-decoration: none; }
.wbD__btn:hover { background: #f7cf48; }
.wbD__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding: 22px; }
.wbD__card { display: block; text-decoration: none; color: inherit; }
.wbD__img { display: block; aspect-ratio: 1 / 1.1; border-radius: 16px; overflow: hidden; background: #dfe8da; }
.wbD__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.wbD__card:hover .wbD__img img { transform: scale(1.04); }
.wbD__card h3 { font-family: var(--serif); font-weight: 700; font-size: 20px; line-height: 1.2; margin: 12px 4px 4px; color: #16231b; }
.wbD__card:hover h3 { color: var(--brand, #2a7a50); }
@media (max-width: 1250px) { .wbD__panel { grid-template-columns: minmax(0, 1fr); } .wbD__intro { flex-direction: row; align-items: flex-end; padding: 28px 28px 6px; } }
@media (max-width: 640px) { .wbD__cards { grid-template-columns: minmax(0, 1fr); } .wbD__intro { flex-direction: column; align-items: flex-start; } }