/* ============================================================ */
/* RUNNING CLUB                                                 */
/* Stylesheet for running-club.fr                               */
/* ============================================================ */

/* ─── DESIGN TOKENS ─── */
:root {
  /* Couleurs (analogues, tons terre chauds) */
  --rc-ink: #1A1814;
  --rc-ink-soft: #3A352E;
  --rc-muted: #8A8175;
  --rc-line: #E4DDD0;
  --rc-bg: #FAF7F1;
  --rc-surface: #F1ECE2;
  --rc-surface-warm: #EDE3D2;
  --rc-accent: #C44E2B;
  --rc-accent-deep: #9A3918;
  --rc-accent-soft: #E8A25C;
  --rc-success: #4E7A4B;
  --rc-white: #FFFFFF;
  --rc-star-gold: #F5A623;
  --rc-star-empty: #DDD7C9;

  /* Typographie */
  --rc-font-display: 'Fraunces', Georgia, Cambria, 'Times New Roman', serif;
  --rc-font-body: 'Source Serif 4', Georgia, Cambria, 'Times New Roman', serif;

  --rc-fs-xs: 0.78rem;
  --rc-fs-sm: 0.9rem;
  --rc-fs-base: 1.0625rem;
  --rc-fs-md: 1.1875rem;
  --rc-fs-lg: 1.4rem;
  --rc-fs-xl: 1.75rem;
  --rc-fs-2xl: 2.2rem;
  --rc-fs-3xl: 2.85rem;
  --rc-fs-4xl: 3.4rem;

  --rc-lh-tight: 1.18;
  --rc-lh-snug: 1.35;
  --rc-lh-base: 1.65;
  --rc-lh-loose: 1.8;

  /* Espacements (généreux) */
  --rc-space-1: 0.375rem;
  --rc-space-2: 0.625rem;
  --rc-space-3: 1rem;
  --rc-space-4: 1.5rem;
  --rc-space-5: 2.25rem;
  --rc-space-6: 3.25rem;
  --rc-space-7: 4.5rem;
  --rc-space-8: 6rem;

  /* Rayons */
  --rc-radius-sm: 6px;
  --rc-radius-md: 12px;
  --rc-radius-lg: 18px;
  --rc-radius-pill: 9999px;

  /* Ombres */
  --rc-shadow-soft: 0 1px 2px rgba(26, 24, 20, 0.04), 0 4px 14px rgba(26, 24, 20, 0.06);
  --rc-shadow-lift: 0 4px 8px rgba(26, 24, 20, 0.06), 0 18px 36px rgba(26, 24, 20, 0.10);

  /* Conteneur */
  --rc-wrap: 1200px;
  --rc-wrap-narrow: 760px;

  --rc-transition: 220ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* ─── RESET LÉGER + BASE ─── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--rc-bg);
  color: var(--rc-ink);
  font-family: var(--rc-font-body);
  font-size: var(--rc-fs-base);
  line-height: var(--rc-lh-base);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: var(--rc-accent-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--rc-transition);
}
a:hover, a:focus-visible { color: var(--rc-accent); }

button {
  font-family: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--rc-accent);
  outline-offset: 2px;
  border-radius: var(--rc-radius-sm);
}

/* ─── TYPOGRAPHIE ─── */
h1, h2, h3, h4 {
  font-family: var(--rc-font-display);
  font-weight: 600;
  line-height: var(--rc-lh-tight);
  color: var(--rc-ink);
  margin: 0 0 var(--rc-space-3) 0;
  letter-spacing: -0.01em;
}
h1 { font-size: var(--rc-fs-3xl); font-weight: 700; }
h2 { font-size: var(--rc-fs-2xl); margin-top: var(--rc-space-6); }
h3 { font-size: var(--rc-fs-xl); margin-top: var(--rc-space-5); }
h4 { font-size: var(--rc-fs-lg); margin-top: var(--rc-space-4); }

p { margin: 0 0 var(--rc-space-3) 0; }

ul, ol { margin: 0 0 var(--rc-space-3) 0; padding-left: 1.4rem; }
li { margin-bottom: var(--rc-space-1); }

blockquote {
  margin: var(--rc-space-5) 0;
  padding: var(--rc-space-3) var(--rc-space-4);
  border-left: 3px solid var(--rc-accent);
  background: var(--rc-surface);
  font-style: italic;
  color: var(--rc-ink-soft);
  border-radius: 0 var(--rc-radius-md) var(--rc-radius-md) 0;
}
blockquote p { margin: 0 0 var(--rc-space-2) 0; }
blockquote p:last-child { margin-bottom: 0; }
blockquote cite {
  display: block;
  margin-top: var(--rc-space-2);
  font-style: normal;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--rc-accent-deep);
}

/* ─── CONTENEUR ─── */
.rc-wrap {
  max-width: var(--rc-wrap);
  margin: 0 auto;
  padding: 0 var(--rc-space-4);
}
.rc-wrap-narrow {
  max-width: var(--rc-wrap-narrow);
  margin: 0 auto;
  padding: 0 var(--rc-space-4);
}

/* ─── BOUTONS GLOBAUX ─── */
.rc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.625rem;
  font-family: var(--rc-font-display);
  font-size: var(--rc-fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--rc-radius-pill);
  text-decoration: none;
  transition: background-color var(--rc-transition),
              color var(--rc-transition),
              transform var(--rc-transition),
              box-shadow var(--rc-transition);
  cursor: pointer;
}
.rc-btn-primary {
  background: var(--rc-accent);
  color: var(--rc-white);
}
.rc-btn-primary:hover, .rc-btn-primary:focus-visible {
  background: var(--rc-accent-deep);
  color: var(--rc-white);
  transform: translateY(-1px);
  box-shadow: var(--rc-shadow-soft);
}
.rc-btn-secondary {
  background: transparent;
  color: var(--rc-ink);
  border: 1px solid var(--rc-line);
}
.rc-btn-secondary:hover, .rc-btn-secondary:focus-visible {
  background: var(--rc-surface);
  color: var(--rc-accent-deep);
}

/* ============================================================ */
/* HEADER (kn-)                                                 */
/* Centered logo + nav below                                    */
/* ============================================================ */
.kn-header {
  background: var(--rc-bg);
  border-bottom: 1px solid var(--rc-line);
  position: relative;
  z-index: 50;
}
.kn-header-inner {
  max-width: var(--rc-wrap);
  margin: 0 auto;
  padding: var(--rc-space-4) var(--rc-space-4) var(--rc-space-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rc-space-3);
}

/* Top row: logo centered, search + menu trigger absolute */
.kn-top-row {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--rc-space-3);
}
.kn-top-row > .kn-logo { grid-column: 2; justify-self: center; }
.kn-top-row > .kn-search-trigger { grid-column: 3; justify-self: end; }
.kn-top-row > .kn-menu-toggle { display: none; }

.kn-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.kn-logo img {
  max-height: 56px;
  width: auto;
}

.kn-search-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--rc-radius-pill);
  background: transparent;
  color: var(--rc-ink);
  transition: background-color var(--rc-transition), color var(--rc-transition);
}
.kn-search-trigger:hover, .kn-search-trigger:focus-visible {
  background: var(--rc-surface);
  color: var(--rc-accent);
}
.kn-search-trigger svg { width: 20px; height: 20px; }

/* Desktop nav */
.kn-nav { width: 100%; }
.kn-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
}
.kn-nav-list li {
  margin: 0;
}
.kn-nav-list a {
  display: inline-block;
  padding: var(--rc-space-2) var(--rc-space-3);
  font-family: var(--rc-font-display);
  font-size: var(--rc-fs-sm);
  font-weight: 500;
  color: var(--rc-ink);
  text-decoration: none;
  letter-spacing: 0.02em;
  position: relative;
}
.kn-nav-list a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: var(--rc-accent);
  transition: width var(--rc-transition), left var(--rc-transition);
}
.kn-nav-list a:hover::after,
.kn-nav-list a:focus-visible::after,
.kn-nav-list a.active::after {
  width: 60%;
  left: 20%;
}
.kn-nav-list a.active {
  color: var(--rc-accent-deep);
}

/* Hamburger (mobile only) */
.kn-menu-toggle {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rc-radius-pill);
  position: relative;
}
.kn-hamburger,
.kn-hamburger::before,
.kn-hamburger::after {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--rc-ink);
  border-radius: 2px;
  transition: transform var(--rc-transition), opacity var(--rc-transition);
}
.kn-hamburger { position: relative; }
.kn-hamburger::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 0;
}
.kn-hamburger::after {
  content: '';
  position: absolute;
  top: 7px;
  left: 0;
}
.kn-menu-toggle[aria-expanded="true"] .kn-hamburger {
  background: transparent;
}
.kn-menu-toggle[aria-expanded="true"] .kn-hamburger::before {
  transform: translateY(7px) rotate(45deg);
}
.kn-menu-toggle[aria-expanded="true"] .kn-hamburger::after {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile nav */
.kn-mobile-nav {
  display: none;
  width: 100%;
  background: var(--rc-bg);
  border-top: 1px solid var(--rc-line);
}
.kn-mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: var(--rc-space-3) 0;
  display: flex;
  flex-direction: column;
  gap: var(--rc-space-1);
}
.kn-mobile-nav a {
  display: block;
  padding: var(--rc-space-2) var(--rc-space-4);
  font-family: var(--rc-font-display);
  font-size: var(--rc-fs-md);
  font-weight: 500;
  color: var(--rc-ink);
  text-decoration: none;
}
.kn-mobile-nav a:hover, .kn-mobile-nav a:focus-visible,
.kn-mobile-nav a.active {
  background: var(--rc-surface);
  color: var(--rc-accent-deep);
}
.hidden { display: none !important; }

/* Search modal (full-viewport overlay + centered card variant) */
.kn-search-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
}
.kn-search-modal[hidden] { display: none; }

.kn-search-overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 24, 20, 0.55);
  backdrop-filter: blur(4px);
  cursor: pointer;
}

.kn-search-panel {
  position: relative;
  z-index: 1;
  width: min(640px, 92vw);
  background: var(--rc-bg);
  border-radius: var(--rc-radius-lg);
  padding: var(--rc-space-4);
  box-shadow: var(--rc-shadow-lift);
  border: 1px solid var(--rc-line);
}

.kn-search-input {
  width: 100%;
  padding: 0.875rem 3rem 0.875rem 1rem;
  font-family: var(--rc-font-body);
  font-size: var(--rc-fs-md);
  color: var(--rc-ink);
  background: var(--rc-white);
  border: 1px solid var(--rc-line);
  border-radius: var(--rc-radius-md);
  box-sizing: border-box;
}
.kn-search-input:focus-visible {
  outline-color: var(--rc-accent);
  border-color: var(--rc-accent);
}

.kn-search-close {
  position: absolute;
  top: calc(var(--rc-space-4) + 0.45rem);
  right: calc(var(--rc-space-4) + 0.45rem);
  width: 2rem;
  height: 2rem;
  border: 0;
  background: transparent;
  color: var(--rc-muted);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--rc-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.kn-search-close:hover, .kn-search-close:focus-visible {
  color: var(--rc-accent-deep);
  background: var(--rc-surface);
  outline: none;
}

.kn-search-results {
  margin-top: var(--rc-space-3);
  max-height: 50vh;
  overflow-y: auto;
}
.kn-search-results[hidden] { display: none; }

.kn-search-result {
  display: block;
  padding: var(--rc-space-2) var(--rc-space-3);
  border-radius: var(--rc-radius-sm);
  color: var(--rc-ink);
  text-decoration: none;
  font-size: var(--rc-fs-sm);
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.kn-search-result + .kn-search-result {
  margin-top: 4px;
}
.kn-search-result:hover, .kn-search-result:focus-visible {
  background: var(--rc-surface-warm);
  border-color: var(--rc-line);
  outline: none;
}

.kn-search-result-title {
  display: block;
  font-family: var(--rc-font-display);
  font-weight: 600;
  font-size: var(--rc-fs-base);
  color: var(--rc-ink);
}
.kn-search-result:hover .kn-search-result-title,
.kn-search-result:focus-visible .kn-search-result-title {
  color: var(--rc-accent-deep);
}

.kn-search-result-cat {
  display: inline-block;
  margin-top: 4px;
  font-size: var(--rc-fs-xs);
  color: var(--rc-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.kn-search-result-desc {
  display: block;
  margin-top: 4px;
  font-size: var(--rc-fs-xs);
  color: var(--rc-ink-soft);
  line-height: 1.4;
}

.kn-search-no-results {
  padding: var(--rc-space-4) var(--rc-space-3);
  text-align: center;
  font-family: var(--rc-font-body);
  font-size: var(--rc-fs-sm);
  color: var(--rc-muted);
  border-top: 1px solid var(--rc-line);
  background: var(--rc-bg);
  margin: 0;
}

/* Body scroll lock when modal is open */
body.kn-search-open { overflow: hidden; }

@media (max-width: 768px) {
  .kn-search-modal { padding-top: 6vh; }
  .kn-search-panel { padding: var(--rc-space-3); }
  .kn-search-close {
    top: calc(var(--rc-space-3) + 0.45rem);
    right: calc(var(--rc-space-3) + 0.45rem);
  }
  .kn-search-result-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* Breakpoints header */
@media (max-width: 768px) {
  .kn-top-row {
    grid-template-columns: auto 1fr auto;
  }
  .kn-top-row > .kn-logo { grid-column: 2; }
  .kn-top-row > .kn-search-trigger { grid-column: 3; }
  .kn-top-row > .kn-menu-toggle { grid-column: 1; display: inline-flex; }
  .kn-nav { display: none; }
  .kn-mobile-nav:not(.hidden) { display: block; }
  .kn-logo img { max-height: 44px; }
}

/* Mobile sticky header with scroll-direction auto-hide.
   The kn-header--hidden class is toggled by the inline scroll
   script in /_includes/header.html. Threshold + reveal-near-top
   logic lives in the script; this rule only handles the visual. */
@media (max-width: 768px) {
  .kn-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    transition: transform 0.3s ease;
    will-change: transform;
  }
  .kn-header.kn-header--hidden {
    transform: translateY(-100%);
  }
  body {
    padding-top: 64px;
  }
}

/* ============================================================ */
/* FOOTER + CTA BANNER (vp-)                                    */
/* ============================================================ */
.vp-cta {
  background: var(--rc-surface-warm);
  padding: var(--rc-space-7) var(--rc-space-4);
  border-top: 1px solid var(--rc-line);
}
.vp-cta-inner {
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--rc-space-5);
  align-items: center;
}
.vp-cta-img {
  width: 140px;
  height: 110px;
  flex-shrink: 0;
}
.vp-cta-content { min-width: 0; }
.vp-cta-title {
  display: block;
  font-family: var(--rc-font-display);
  font-size: var(--rc-fs-2xl);
  font-weight: 700;
  color: var(--rc-ink);
  letter-spacing: -0.01em;
  margin-bottom: var(--rc-space-1);
}
.vp-cta-content p {
  font-size: var(--rc-fs-md);
  color: var(--rc-ink-soft);
  margin-bottom: var(--rc-space-3);
}
.vp-cta-form {
  display: flex;
  gap: var(--rc-space-2);
  flex-wrap: wrap;
}
.vp-cta-input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 0.875rem 1.125rem;
  font-family: var(--rc-font-body);
  font-size: var(--rc-fs-base);
  background: var(--rc-white);
  border: 1px solid var(--rc-line);
  border-radius: var(--rc-radius-pill);
  color: var(--rc-ink);
}
.vp-cta-input:focus-visible {
  outline-color: var(--rc-accent);
  border-color: var(--rc-accent);
}
.vp-cta-btn {
  padding: 0.875rem 1.75rem;
  font-family: var(--rc-font-display);
  font-size: var(--rc-fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--rc-accent);
  color: var(--rc-white);
  border-radius: var(--rc-radius-pill);
  transition: background-color var(--rc-transition), transform var(--rc-transition);
}
.vp-cta-btn:hover, .vp-cta-btn:focus-visible {
  background: var(--rc-accent-deep);
  transform: translateY(-1px);
}

.vp-footer {
  background: var(--rc-ink);
  color: var(--rc-surface);
  padding: var(--rc-space-7) var(--rc-space-4) var(--rc-space-4);
}
.vp-footer-inner {
  max-width: var(--rc-wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--rc-space-6);
}
.vp-col {
  min-width: 0;
}
.vp-col-title {
  display: block;
  font-family: var(--rc-font-display);
  font-size: var(--rc-fs-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rc-accent-soft);
  margin-bottom: var(--rc-space-3);
}
.vp-footer-logo {
  max-height: 44px;
  width: auto;
  margin-bottom: var(--rc-space-3);
  filter: brightness(0) invert(1);
}
.vp-footer-desc {
  font-size: var(--rc-fs-sm);
  line-height: var(--rc-lh-base);
  color: var(--rc-line);
  max-width: 360px;
}
.vp-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--rc-space-2);
}
.vp-footer-links a {
  color: var(--rc-line);
  text-decoration: none;
  font-size: var(--rc-fs-sm);
  transition: color var(--rc-transition);
}
.vp-footer-links a:hover, .vp-footer-links a:focus-visible {
  color: var(--rc-accent-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.vp-social {
  display: flex;
  gap: var(--rc-space-2);
  flex-wrap: wrap;
}
.vp-social a, .vp-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--rc-radius-pill);
  background: rgba(250, 247, 241, 0.08);
  color: var(--rc-line);
  text-decoration: none;
  transition: background-color var(--rc-transition), color var(--rc-transition);
}
.vp-social a:hover, .vp-social a:focus-visible {
  background: var(--rc-accent);
  color: var(--rc-white);
}
.vp-social svg { width: 18px; height: 18px; }

.vp-footer-bottom {
  max-width: var(--rc-wrap);
  margin: var(--rc-space-5) auto 0;
  padding-top: var(--rc-space-4);
  border-top: 1px solid rgba(250, 247, 241, 0.12);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--rc-space-3);
  font-size: var(--rc-fs-xs);
  color: var(--rc-muted);
}
.vp-legal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--rc-space-3);
}
.vp-legal a {
  color: var(--rc-muted);
  text-decoration: none;
  font-size: var(--rc-fs-xs);
}
.vp-legal a:hover, .vp-legal a:focus-visible {
  color: var(--rc-accent-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 768px) {
  .vp-cta-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--rc-space-4);
  }
  .vp-cta-img { margin: 0 auto; }
  .vp-cta-form { justify-content: center; }
  .vp-footer-inner {
    grid-template-columns: 1fr;
    gap: var(--rc-space-5);
  }
  .vp-footer-bottom { justify-content: center; text-align: center; }
}

/* ─── BACK TO TOP BUTTON ─── */
.vp-btt {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 46px;
  height: 46px;
  border-radius: var(--rc-radius-pill);
  background: var(--rc-ink);
  color: var(--rc-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--rc-transition),
              transform var(--rc-transition),
              background-color var(--rc-transition);
  z-index: 60;
  box-shadow: var(--rc-shadow-soft);
}
.vp-btt.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.vp-btt:hover, .vp-btt:focus-visible {
  background: var(--rc-accent);
  color: var(--rc-white);
}
.vp-btt svg { width: 20px; height: 20px; }
@media (max-width: 768px) {
  .vp-btt { bottom: 18px; right: 18px; width: 42px; height: 42px; }
}

/* ============================================================ */
/* SIDEBAR (mz-)                                                */
/* Right position, hidden on mobile                             */
/* ============================================================ */
.mz-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--rc-space-5);
  height: 100%;
}
.mz-section {
  background: var(--rc-surface);
  border-radius: var(--rc-radius-lg);
  padding: var(--rc-space-4);
}
.mz-logo {
  max-height: 48px;
  width: auto;
  margin-bottom: var(--rc-space-2);
}
.mz-about {
  font-size: var(--rc-fs-sm);
  line-height: var(--rc-lh-base);
  color: var(--rc-ink-soft);
  margin: 0;
}
.mz-sticky {
  position: sticky;
  top: 1.5rem;
  align-self: flex-start;
}
.mz-cta {
  background: var(--rc-ink);
  color: var(--rc-surface);
  border-radius: var(--rc-radius-lg);
  padding: var(--rc-space-4);
  text-align: center;
}
.mz-cta-img {
  width: 120px;
  height: 80px;
  margin: 0 auto var(--rc-space-2);
}
.mz-cta-title {
  display: block;
  font-family: var(--rc-font-display);
  font-size: var(--rc-fs-lg);
  font-weight: 600;
  color: var(--rc-bg);
  margin-bottom: var(--rc-space-1);
}
.mz-cta p {
  font-size: var(--rc-fs-sm);
  color: var(--rc-line);
  margin-bottom: var(--rc-space-3);
}
.mz-cta form {
  display: flex;
  flex-direction: column;
  gap: var(--rc-space-2);
}
.mz-input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--rc-font-body);
  font-size: var(--rc-fs-sm);
  background: var(--rc-bg);
  border: 1px solid transparent;
  border-radius: var(--rc-radius-pill);
  color: var(--rc-ink);
}
.mz-input:focus-visible {
  outline-color: var(--rc-accent);
  border-color: var(--rc-accent);
}
.mz-btn {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--rc-font-display);
  font-size: var(--rc-fs-sm);
  font-weight: 600;
  background: var(--rc-accent);
  color: var(--rc-white);
  border-radius: var(--rc-radius-pill);
  transition: background-color var(--rc-transition);
}
.mz-btn:hover, .mz-btn:focus-visible {
  background: var(--rc-accent-soft);
  color: var(--rc-ink);
}
.mz-trust {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--rc-space-2);
}
.mz-trust li {
  display: flex;
  align-items: flex-start;
  gap: var(--rc-space-2);
  font-size: var(--rc-fs-sm);
  color: var(--rc-ink-soft);
  margin: 0;
}
.mz-trust svg {
  width: 18px;
  height: 18px;
  color: var(--rc-accent);
  flex-shrink: 0;
  margin-top: 2px;
}
.mz-section-label {
  display: block;
  font-family: var(--rc-font-display);
  font-size: var(--rc-fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rc-muted);
  margin-bottom: var(--rc-space-2);
}

@media (max-width: 1024px) {
  .mz-sidebar { display: none; }
}

/* ============================================================ */
/* AUTHOR BOX (tj-)                                             */
/* Layout 6: Banner style, full-width band                      */
/* ============================================================ */
.tj-author {
  background: var(--rc-surface-warm);
  border-radius: var(--rc-radius-lg);
  padding: var(--rc-space-5);
  margin: var(--rc-space-6) 0 var(--rc-space-5);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--rc-space-4);
  align-items: center;
}
.tj-avatar-link {
  display: block;
  text-decoration: none;
  flex-shrink: 0;
}
.tj-avatar {
  width: 96px;
  height: 96px;
  border-radius: var(--rc-radius-pill);
  object-fit: cover;
  border: 3px solid var(--rc-bg);
  box-shadow: var(--rc-shadow-soft);
  transition: transform var(--rc-transition);
}
.tj-avatar-link:hover .tj-avatar,
.tj-avatar-link:focus-visible .tj-avatar {
  transform: scale(1.04);
}
.tj-info { min-width: 0; }
.tj-label {
  display: block;
  font-family: var(--rc-font-display);
  font-size: var(--rc-fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rc-accent-deep);
  margin-bottom: var(--rc-space-1);
}
.tj-name {
  display: inline-block;
  font-family: var(--rc-font-display);
  font-size: var(--rc-fs-xl);
  font-weight: 700;
  color: var(--rc-ink);
  text-decoration: none;
  margin-bottom: var(--rc-space-1);
  line-height: var(--rc-lh-tight);
}
.tj-name:hover, .tj-name:focus-visible {
  color: var(--rc-accent-deep);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.tj-desc {
  font-size: var(--rc-fs-sm);
  line-height: var(--rc-lh-base);
  color: var(--rc-ink-soft);
  margin: 0;
}

@media (max-width: 640px) {
  .tj-author {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--rc-space-3);
    padding: var(--rc-space-4);
  }
  .tj-avatar-link { justify-self: center; }
  .tj-avatar { width: 80px; height: 80px; }
}

/* ============================================================ */
/* DASHBOARD-CONTROLLED CLASSES                                 */
/* These four classes are referenced by KV settings.            */
/* They MUST exist as CSS rules.                                */
/* ============================================================ */

/* Featured class : applied EXCLUSIVELY to <article class="rc-item
   choix-redaction"> entries in the [featured-posts] block of the
   ROOT homepage (/index.html). NOT used anywhere else - not on
   category pages, not in article body content, not on static pages.
   The dashboard's toggle-featured.ts and publish.ts only touch the
   root homepage for featured-state changes; the class therefore
   never appears outside that one location.

   All rules below are compound-scoped to .rc-item.choix-redaction
   so a stray bare class on any other element would render as
   nothing and produce no visual artifact (no rogue "À la une"
   badge, no orphan card-shaped paragraph). For an in-body
   editorial callout / pull-quote, see the .rc-callout rule
   further down (dedicated class with no overlap with the
   blogroll featured-class). */
.rc-item.choix-redaction {
  position: relative;
  border: 1px solid var(--rc-accent-soft);
  background: linear-gradient(180deg, var(--rc-surface-warm) 0%, var(--rc-bg) 60%);
}
.rc-item.choix-redaction::before {
  content: 'À la une';
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-block;
  padding: 0.3rem 0.7rem;
  font-family: var(--rc-font-display);
  font-size: var(--rc-fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--rc-accent);
  color: var(--rc-white);
  border-radius: var(--rc-radius-pill);
  box-shadow: var(--rc-shadow-soft);
}

/* Editorial callout / pull-quote inside blog article body.
   Dedicated class, distinct from the blogroll featured-class
   (.choix-redaction). Used as <p class="rc-callout">...</p> for
   editorial advice highlights, key takeaways, or pull-quotes
   inside long-form blog content. Visually distinct from card
   treatment: a left-side accent border + subtle warm tint, no
   gradient, no badge, no card-shaped framing. */
.rc-callout {
  margin: var(--rc-space-5) 0;
  padding: var(--rc-space-4) var(--rc-space-5);
  border-left: 4px solid var(--rc-accent);
  background: var(--rc-surface-warm);
  border-radius: 0 var(--rc-radius-md) var(--rc-radius-md) 0;
  font-family: var(--rc-font-display);
  color: var(--rc-ink);
  line-height: var(--rc-lh-snug);
}

/* Description class : applied to the meta-description <p> below H1 */
.chapeau-article {
  font-family: var(--rc-font-display);
  font-size: var(--rc-fs-md);
  line-height: var(--rc-lh-snug);
  font-weight: 400;
  font-style: italic;
  color: var(--rc-ink-soft);
  margin: var(--rc-space-2) 0 var(--rc-space-5);
}

/* Blog item class : applied to <article> entries in blogrolls and category pages.
   Card template: meta-row (T3) - fully wrapped figure + body, with a meta row
   (category + date) above the title. Per-site BlogItemClass = rc-item.
   Inner classes follow the shared {base}-{suffix} vocabulary:
   rc-item-figure, rc-item-body, rc-item-meta, rc-item-cat, rc-item-date,
   rc-item-title. The excerpt is a bare <p> after the title (no -excerpt
   suffix needed for this template - the parser contract requires only
   "first <p> after <a>", which the bare <p> satisfies).

   Category element rule (SHARED CONTRACT rule 7): rc-item-cat is rendered
   as inert text inside <span> - never wrapped in <a href="/category-slug">.
   The whole card is a single click target via the outer <a href="/{slug}">;
   nesting another <a> for the category would be invalid HTML5 and dilute
   internal link juice away from articles. Hand-placed cards on this site
   and dashboard-emitted cards both follow this rule.
*/
.rc-item {
  position: relative;
  background: var(--rc-white);
  border-radius: var(--rc-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--rc-transition), box-shadow var(--rc-transition);
  border: 1px solid var(--rc-line);
}
.rc-item:hover, .rc-item:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--rc-shadow-lift);
}
/* CLICK-ANYWHERE overlay: the entire card area is clickable via the
   title link's invisible ::after pseudo-element. Inner-paragraph <a>
   tags (e.g. a linkInFirstParagraph guest-post target in the featured
   excerpt) sit on z-index 2 so they remain individually clickable. */
.rc-item h2 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.rc-item p a {
  position: relative;
  z-index: 2;
}
/* Title link styling (replaces the old .rc-item > a outer-wrapper rules).
   The card-template restructure moved the <a href="/slug"> from an outer
   wrapper around <article> to INSIDE the <h2> title element. */
.rc-item-title a {
  color: inherit;
  text-decoration: none;
}
.rc-item-title a:hover,
.rc-item-title a:focus-visible {
  text-decoration: underline;
}
.rc-item-figure {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--rc-surface);
}
.rc-item-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.rc-item:hover .rc-item-figure img {
  transform: scale(1.04);
}
.rc-item-body {
  padding: var(--rc-space-3) var(--rc-space-4) var(--rc-space-4);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.rc-item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rc-space-2);
  font-size: var(--rc-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--rc-space-2);
}
.rc-item-cat {
  color: var(--rc-accent-deep);
  font-weight: 600;
  font-family: var(--rc-font-display);
}
.rc-item-date {
  color: var(--rc-muted);
}
.rc-item-meta > .rc-item-cat + .rc-item-date::before {
  content: '·';
  margin-right: var(--rc-space-2);
  color: var(--rc-line);
}
.rc-item-title {
  font-family: var(--rc-font-display);
  font-size: var(--rc-fs-lg);
  font-weight: 600;
  line-height: var(--rc-lh-snug);
  color: var(--rc-ink);
  margin: 0 0 var(--rc-space-2);
}
.rc-item-body > p {
  font-size: var(--rc-fs-sm);
  color: var(--rc-ink-soft);
  line-height: var(--rc-lh-base);
  margin: 0;
}

/* Featured variant: horizontal split on desktop (figure left, body right).
   Compound-scoped to .rc-item.choix-redaction because the class is
   homepage-only and always paired with rc-item. The display:grid here
   overrides the base .rc-item { display: flex } via specificity
   (two classes vs one). */
.rc-item.choix-redaction {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}
.rc-item.choix-redaction .rc-item-figure {
  aspect-ratio: auto;
  height: 100%;
  min-height: 280px;
}
.rc-item.choix-redaction .rc-item-body {
  padding: var(--rc-space-5);
}
.rc-item.choix-redaction .rc-item-title {
  font-size: var(--rc-fs-xl);
}

/* Stack vertically on narrow viewports */
@media (max-width: 720px) {
  .rc-item.choix-redaction {
    display: flex;
    flex-direction: column;
  }
  .rc-item.choix-redaction .rc-item-figure {
    aspect-ratio: 16 / 9;
    min-height: 0;
    height: auto;
  }
  .rc-item.choix-redaction .rc-item-body {
    padding: var(--rc-space-3) var(--rc-space-4) var(--rc-space-4);
  }
  .rc-item.choix-redaction .rc-item-title {
    font-size: var(--rc-fs-lg);
  }
}

/* FAQ section class : applied to the <section> wrapper around FAQ in affiliate articles */
.rc-reponses {
  background: var(--rc-surface);
  border-radius: var(--rc-radius-lg);
  padding: var(--rc-space-5);
  margin: var(--rc-space-6) 0;
}
.rc-reponses h2 {
  margin-top: 0;
  font-size: var(--rc-fs-2xl);
  color: var(--rc-ink);
}
.rc-reponses h3 {
  font-size: var(--rc-fs-md);
  margin-top: var(--rc-space-4);
  margin-bottom: var(--rc-space-2);
  color: var(--rc-accent-deep);
}
.rc-reponses p:last-child { margin-bottom: 0; }

/* ============================================================ */
/* COOKIE NOTICE                                                */
/* GDPR banner, fixed bottom                                    */
/* ============================================================ */
.rc-cookie-notice {
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  max-width: 640px;
  margin: 0 auto;
  background: var(--rc-ink);
  color: var(--rc-surface);
  padding: var(--rc-space-4);
  border-radius: var(--rc-radius-lg);
  box-shadow: var(--rc-shadow-lift);
  z-index: 80;
  display: none;
  align-items: center;
  gap: var(--rc-space-4);
  flex-wrap: wrap;
}
.rc-cookie-notice.is-shown { display: flex; }
.rc-cookie-text {
  flex: 1 1 280px;
  min-width: 0;
  font-size: var(--rc-fs-sm);
  margin: 0;
  line-height: var(--rc-lh-base);
}
.rc-cookie-text a { color: var(--rc-accent-soft); }
.rc-cookie-actions {
  display: flex;
  gap: var(--rc-space-2);
  flex-wrap: wrap;
}
.rc-cookie-btn {
  padding: 0.625rem 1.25rem;
  font-family: var(--rc-font-display);
  font-size: var(--rc-fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--rc-radius-pill);
  cursor: pointer;
}
.rc-cookie-accept {
  background: var(--rc-accent);
  color: var(--rc-white);
}
.rc-cookie-accept:hover, .rc-cookie-accept:focus-visible {
  background: var(--rc-accent-soft);
  color: var(--rc-ink);
}
.rc-cookie-decline {
  background: transparent;
  color: var(--rc-line);
  border: 1px solid rgba(250, 247, 241, 0.25);
}
.rc-cookie-decline:hover, .rc-cookie-decline:focus-visible {
  background: rgba(250, 247, 241, 0.08);
  color: var(--rc-bg);
}

/* ============================================================ */
/* RESPONSIVE TYPOGRAPHY                                        */
/* ============================================================ */
@media (max-width: 768px) {
  :root {
    --rc-fs-3xl: 2.25rem;
    --rc-fs-2xl: 1.75rem;
    --rc-fs-xl: 1.45rem;
    --rc-fs-lg: 1.25rem;
  }
}
@media (max-width: 480px) {
  :root {
    --rc-fs-3xl: 1.85rem;
    --rc-fs-2xl: 1.55rem;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================ */
/* ARTICLE PAGE LAYOUT (dr-)                                    */
/* Two-column grid: content + sidebar (right)                   */
/* ============================================================ */
.dr-wrap {
  max-width: var(--rc-wrap);
  margin: 0 auto;
  padding: var(--rc-space-6) var(--rc-space-4);
}

.dr-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--rc-space-6);
}

.dr-side {
  position: relative;
  min-width: 0;
}

@media (max-width: 1024px) {
  .dr-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .dr-side { display: none; }
  .dr-wrap { padding: var(--rc-space-5) var(--rc-space-4); }
}

/* Full-width modifier for static pages and affiliate posts (no sidebar) */
.dr-wrap-full {
  max-width: 880px;
  margin: 0 auto;
  padding: var(--rc-space-6) var(--rc-space-4);
}

.dr-wrap-affiliate {
  max-width: 780px;
  margin: 0 auto;
  padding: var(--rc-space-6) var(--rc-space-4);
}

@media (max-width: 768px) {
  .dr-wrap-full,
  .dr-wrap-affiliate {
    padding: var(--rc-space-5) var(--rc-space-4);
  }
}

/* Article body */
.dr-article {
  min-width: 0;
}

/* ============================================================ */
/* ARTICLE META (category + date row)                           */
/* ============================================================ */
.dr-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--rc-space-2);
  margin: 0 0 var(--rc-space-3);
  font-size: var(--rc-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rc-muted);
}
.dr-meta > nav {
  display: block;
}
.dr-cat {
  display: inline-block;
  color: var(--rc-accent-deep);
  font-weight: 600;
  font-family: var(--rc-font-display);
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid var(--rc-accent);
  border-radius: var(--rc-radius-sm);
  transition: background-color var(--rc-transition), color var(--rc-transition);
}
.dr-cat:hover,
.dr-cat:focus-visible {
  background: var(--rc-accent);
  color: var(--rc-white);
  text-decoration: none;
}
.dr-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--rc-space-2) var(--rc-space-4);
}
.dr-date,
.dr-author {
  display: inline-flex;
  align-items: baseline;
  gap: var(--rc-space-2);
}
.dr-date-label,
.dr-author-label {
  color: var(--rc-muted);
}
.dr-meta time {
  color: var(--rc-ink-soft);
  font-weight: 600;
}
.dr-author a {
  color: var(--rc-accent-deep);
  font-weight: 600;
  font-family: var(--rc-font-display);
  text-decoration: none;
}
.dr-author a:hover,
.dr-author a:focus-visible {
  color: var(--rc-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 640px) {
  .dr-meta-row {
    flex-direction: column;
    gap: var(--rc-space-1);
  }
}

/* ============================================================ */
/* HERO IMAGE                                                   */
/* ============================================================ */
.dr-hero {
  margin: var(--rc-space-4) 0 var(--rc-space-5);
  border-radius: 14px;
  overflow: hidden;
  background: var(--rc-surface);
}
.dr-hero img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 768px) {
  .dr-hero {
    border-radius: 6px;
  }
}

/* ============================================================ */
/* TABLE OF CONTENTS (dr-toc)                                   */
/* ============================================================ */
.dr-toc {
  background: var(--rc-surface);
  border-radius: var(--rc-radius-lg);
  margin: var(--rc-space-5) 0;
  border-left: 3px solid var(--rc-accent);
  overflow: hidden;
}
.dr-toc-toggle {
  display: flex;
  align-items: center;
  gap: var(--rc-space-3);
  width: 100%;
  padding: var(--rc-space-3) var(--rc-space-5);
  background: transparent;
  border: 0;
  margin: 0;
  cursor: default;
  text-align: left;
  font-family: var(--rc-font-display);
  font-size: var(--rc-fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rc-accent-deep);
}
.dr-toc.is-interactive .dr-toc-toggle {
  cursor: pointer;
}
.dr-toc-toggle:focus-visible {
  outline: 2px solid var(--rc-accent);
  outline-offset: -2px;
}
.dr-toc-icon {
  width: 16px;
  height: 12px;
  flex-shrink: 0;
  background:
    linear-gradient(currentColor, currentColor) top / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) bottom / 100% 2px no-repeat;
}
.dr-toc-title {
  flex: 1;
}
.dr-toc-chevron {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transform-origin: 60% 60%;
  transition: transform var(--rc-transition);
  margin-bottom: 3px;
}
.dr-toc.is-interactive .dr-toc-toggle[aria-expanded="false"] .dr-toc-chevron {
  transform: rotate(-45deg);
}
.dr-toc-panel {
  padding: 0 var(--rc-space-5) var(--rc-space-4);
}
.dr-toc-panel[hidden] {
  display: none;
}
.dr-toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.dr-toc li {
  position: static;
  padding-left: 0;
  margin: 0;
}
.dr-toc li::before {
  content: none;
}
.dr-toc > .dr-toc-panel > ul > li {
  margin: var(--rc-space-1) 0;
}
.dr-toc ul ul {
  margin: var(--rc-space-1) 0 var(--rc-space-2) var(--rc-space-2);
  padding-left: var(--rc-space-3);
  border-left: 1px dotted var(--rc-line);
}
.dr-toc ul ul li {
  margin: 2px 0;
  font-size: var(--rc-fs-sm);
}
.dr-toc a {
  color: var(--rc-ink-soft);
  text-decoration: none;
  transition: color var(--rc-transition);
}
.dr-toc a:hover, .dr-toc a:focus-visible {
  color: var(--rc-accent-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================================ */
/* ARTICLE CONTENT ELEMENTS                                     */
/* (tables, lists, blockquotes inside .dr-article)              */
/* ============================================================ */
.dr-article h2 {
  position: relative;
  padding-top: var(--rc-space-4);
  border-top: 1px solid var(--rc-line);
}
.dr-article h2::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 56px;
  height: 2px;
  background: var(--rc-accent);
}
.dr-article h3 {
  color: var(--rc-ink);
}
.dr-article h4 {
  color: var(--rc-ink-soft);
  font-weight: 600;
  font-size: var(--rc-fs-md);
}

.dr-article ul li,
.dr-article ol li {
  line-height: var(--rc-lh-base);
  padding-left: 0.25rem;
}

.dr-article ul {
  list-style: none;
  padding-left: 0;
}
.dr-article ul li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: var(--rc-space-2);
}
.dr-article ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rc-accent);
}
.dr-article ol {
  list-style: none;
  counter-reset: dr-counter;
  padding-left: 0;
}
.dr-article ol li {
  counter-increment: dr-counter;
  position: relative;
  padding-left: 2.5rem;
  margin-bottom: var(--rc-space-2);
}
.dr-article ol li::before {
  content: counter(dr-counter) '.';
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--rc-font-display);
  font-weight: 700;
  color: var(--rc-accent);
  font-size: var(--rc-fs-md);
  line-height: var(--rc-lh-base);
}

/* Tables */
.dr-article table,
.dr-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--rc-space-4) 0;
  font-size: var(--rc-fs-sm);
  background: var(--rc-white);
  border-radius: var(--rc-radius-md);
  overflow: hidden;
  box-shadow: var(--rc-shadow-soft);
}
.dr-article thead,
.dr-table-wrap thead {
  background: var(--rc-ink);
  color: var(--rc-bg);
}
.dr-article th,
.dr-table-wrap th {
  text-align: left;
  padding: var(--rc-space-3) var(--rc-space-3);
  font-family: var(--rc-font-display);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.dr-article td,
.dr-table-wrap td {
  padding: var(--rc-space-3) var(--rc-space-3);
  border-bottom: 1px solid var(--rc-line);
  vertical-align: top;
}
.dr-article tbody tr:nth-child(even),
.dr-table-wrap tbody tr:nth-child(even) {
  background: var(--rc-surface);
}
.dr-article tbody tr:last-child td,
.dr-table-wrap tbody tr:last-child td {
  border-bottom: 0;
}

@media (max-width: 768px) {
  .dr-article {
    overflow-x: hidden;
  }
  .dr-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Generic table flow container (horizontal scroll on narrow screens) */
.rc-tflow {
  overflow-x: auto;
  width: 100%;
  margin: 1.5em 0;
  -webkit-overflow-scrolling: touch;
}
.rc-tflow > table {
  width: 100%;
  border-collapse: collapse;
}
.rc-tflow th,
.rc-tflow td {
  white-space: nowrap;
}

/* ============================================================ */
/* SHARE BUTTONS (circular icon-only)                           */
/* Identical between blog-post.html and affiliate-post.html     */
/* ============================================================ */
.dr-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--rc-space-2);
  margin: var(--rc-space-6) 0 var(--rc-space-4);
  padding: var(--rc-space-3) 0;
  border-top: 1px solid var(--rc-line);
  border-bottom: 1px solid var(--rc-line);
}
.dr-share-label {
  font-family: var(--rc-font-display);
  font-size: var(--rc-fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rc-muted);
  margin-right: var(--rc-space-2);
}
.dr-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--rc-radius-pill);
  background: transparent;
  border: 1px solid var(--rc-line);
  color: var(--rc-ink);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--rc-transition),
              color var(--rc-transition),
              border-color var(--rc-transition),
              transform var(--rc-transition);
  position: relative;
}
.dr-share-btn:hover,
.dr-share-btn:focus-visible {
  background: var(--rc-accent);
  color: var(--rc-white);
  border-color: var(--rc-accent);
  transform: translateY(-2px);
}
.dr-share-btn svg {
  width: 18px;
  height: 18px;
}
.dr-share-btn.is-copied {
  background: var(--rc-success);
  color: var(--rc-white);
  border-color: var(--rc-success);
}
.dr-share-btn.is-copied::after {
  content: 'Lien copié';
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--rc-ink);
  color: var(--rc-bg);
  font-family: var(--rc-font-display);
  font-size: var(--rc-fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.6rem;
  border-radius: var(--rc-radius-sm);
  white-space: nowrap;
  pointer-events: none;
}

/* ============================================================ */
/* AFFILIATE DISCLOSURE  (collapsible)                          */
/* ============================================================ */
.dr-disclo {
  margin: var(--rc-space-4) 0;
  padding: var(--rc-space-2) 0;
  border-top: 1px solid var(--rc-line);
  border-bottom: 1px solid var(--rc-line);
  font-size: var(--rc-fs-xs);
  line-height: var(--rc-lh-base);
  color: var(--rc-ink-soft);
}
.dr-disclo details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rc-space-3);
  list-style: none;
  cursor: pointer;
}
.dr-disclo summary::-webkit-details-marker { display: none; }
.dr-disclo summary::marker { display: none; }
.dr-summary-text {
  flex: 1 1 auto;
  min-width: 0;
}
.dr-disclo strong {
  color: var(--rc-ink);
}
.dr-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  color: var(--rc-accent-deep);
  white-space: nowrap;
}
.dr-disclo summary:hover .dr-toggle-label,
.dr-disclo summary:focus-visible .dr-toggle-label {
  text-decoration: underline;
}
.dr-chevron {
  font-size: 0.7rem;
  line-height: 1;
}
.dr-full {
  margin-top: var(--rc-space-2);
  max-width: 65ch;
  color: var(--rc-ink-soft);
  font-style: italic;
}
.dr-full a {
  white-space: nowrap;
  font-style: normal;
}
@media (max-width: 640px) {
  .dr-disclo details > summary {
    flex-direction: column;
    align-items: stretch;
    gap: var(--rc-space-2);
  }
  .dr-toggle-btn {
    align-self: center;
  }
}

/* ============================================================ */
/* BLOG STATIC EDITORIAL NOTE  dr-note                          */
/* ============================================================ */
.dr-note {
  margin: var(--rc-space-4) 0;
  padding: var(--rc-space-3) 0;
  border-top: 1px solid var(--rc-line);
  border-bottom: 1px solid var(--rc-line);
  font-size: var(--rc-fs-sm);
  line-height: var(--rc-lh-base);
  color: var(--rc-ink-soft);
}
.dr-note strong {
  font-family: var(--rc-font-display);
  color: var(--rc-ink);
  letter-spacing: 0.01em;
}
.dr-note a {
  font-weight: 600;
  white-space: nowrap;
  color: var(--rc-accent-deep);
}

/* ============================================================ */
/* AFFILIATE PRODUCT SUMMARY CARDS (slider)  pn-                */
/* ============================================================ */
.pn-wrap {
  position: relative;
  margin: var(--rc-space-5) 0 var(--rc-space-6);
}
.pn-grid {
  display: flex;
  gap: var(--rc-space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: var(--rc-space-2) 0;
  -webkit-overflow-scrolling: touch;
}
.pn-grid::-webkit-scrollbar { display: none; }

.pn-card {
  flex: 0 0 280px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--rc-white);
  border: 1px solid var(--rc-line);
  border-radius: var(--rc-radius-lg);
  padding: var(--rc-space-3);
  transition: border-color var(--rc-transition),
              box-shadow var(--rc-transition),
              transform var(--rc-transition);
}
.pn-card:hover, .pn-card:focus-within {
  border-color: var(--rc-accent-soft);
  box-shadow: var(--rc-shadow-lift);
  transform: translateY(-3px);
}
.pn-card.pn-card-top {
  border-color: var(--rc-accent);
  box-shadow: 0 4px 14px rgba(196, 78, 43, 0.12);
}

.pn-header {
  min-height: 32px;
  display: flex;
  align-items: center;
  margin-bottom: var(--rc-space-2);
  padding-bottom: var(--rc-space-2);
  border-bottom: 1px solid var(--rc-line);
}
.pn-badge {
  font-family: var(--rc-font-display);
  font-size: var(--rc-fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rc-accent-deep);
}

.pn-image {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rc-bg);
  border-radius: var(--rc-radius-md);
  margin-bottom: var(--rc-space-3);
  overflow: hidden;
}
.pn-image img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}
/* Image jumplink wrapper on slider cards (PR #908). Without
   this rule the wrapping <a> becomes an inline element between
   the flex parent and its <img> child, breaking image centering
   and the white-background contract. display: contents strips
   the anchor from the layout tree so the existing image
   container CSS applies directly to the <img>. */
.pn-image a { display: contents; }

.pn-title {
  font-family: var(--rc-font-display);
  font-size: var(--rc-fs-md);
  font-weight: 600;
  color: var(--rc-ink);
  margin: 0 0 var(--rc-space-2);
  line-height: var(--rc-lh-snug);
}
.pn-num {
  color: var(--rc-accent);
  margin-right: 0.25rem;
}

.pn-jumplink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin-top: var(--rc-space-2);
  padding: 0.5rem 0.85rem;
  font-family: var(--rc-font-body);
  font-size: var(--rc-fs-sm);
  font-weight: 600;
  color: var(--rc-accent-deep);
  background: transparent;
  border: 1px solid var(--rc-line);
  border-radius: var(--rc-radius-pill);
  text-decoration: none;
  transition: background-color var(--rc-transition),
              border-color var(--rc-transition),
              color var(--rc-transition);
}
.pn-jumplink:hover, .pn-jumplink:focus-visible {
  color: var(--rc-accent-deep);
  background: var(--rc-surface);
  border-color: var(--rc-accent-soft);
  text-decoration: none;
}

.pn-desc {
  font-size: var(--rc-fs-sm);
  color: var(--rc-ink-soft);
  line-height: var(--rc-lh-base);
  margin: 0 0 var(--rc-space-3);
  flex: 1 1 auto;
}

.pn-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--rc-font-display);
  font-size: var(--rc-fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--rc-accent);
  color: var(--rc-white);
  border-radius: var(--rc-radius-pill);
  text-decoration: none;
  transition: background-color var(--rc-transition),
              transform var(--rc-transition),
              box-shadow var(--rc-transition);
}
.pn-cta:hover, .pn-cta:focus-visible {
  background: var(--rc-accent-deep);
  color: var(--rc-white);
  transform: translateY(-2px);
  box-shadow: var(--rc-shadow-soft);
}

.pn-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rc-space-3);
  margin-top: var(--rc-space-3);
}
.pn-dots {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.pn-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--rc-line);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background-color var(--rc-transition), transform var(--rc-transition);
}
.pn-dot.is-active {
  background: var(--rc-accent);
  transform: scale(1.2);
}
.pn-arrows {
  display: flex;
  gap: var(--rc-space-2);
}
.pn-nav {
  width: 40px;
  height: 40px;
  border-radius: var(--rc-radius-pill);
  border: 1px solid var(--rc-line);
  background: var(--rc-white);
  color: var(--rc-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--rc-transition),
              color var(--rc-transition),
              border-color var(--rc-transition);
  font-family: var(--rc-font-body);
  font-size: var(--rc-fs-md);
}
.pn-nav:hover, .pn-nav:focus-visible {
  background: var(--rc-accent);
  color: var(--rc-white);
  border-color: var(--rc-accent);
}

@media (max-width: 768px) {
  .pn-card { flex-basis: 86%; max-width: 320px; }
  .pn-grid { gap: var(--rc-space-3); }
}

/* ============================================================ */
/* AFFILIATE PRODUCT REVIEW CARDS  pf-                          */
/* ============================================================ */
.pf-card {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--rc-space-4);
  background: var(--rc-white);
  border: 1px solid var(--rc-line);
  border-radius: var(--rc-radius-lg);
  padding: var(--rc-space-5) var(--rc-space-4) var(--rc-space-4);
  margin: var(--rc-space-6) 0 var(--rc-space-5);
  box-shadow: var(--rc-shadow-soft);
}
.pf-card.pf-card-top {
  border-color: var(--rc-accent);
  box-shadow: 0 4px 18px rgba(196, 78, 43, 0.14);
}
/* Inter-product divider drawn in BODY SPACE above each card except
   the first. Uses a ::before pseudo-element rather than border-top
   on .pf-card itself, because .pf-card has its own background +
   border + box-shadow + an absolute-positioned overhanging badge
   (.pf-badge with top: -14px). A border-top in that context merges
   with the existing card border AND gets covered by the badge.
   Drawing the line in the body space above the card sidesteps both
   failure modes and renders against the cream --rc-bg background
   where opacity contrast works as intended. The :not(:first-of-type)
   selector matches every .pf-card except the first within its
   parent's type-set, regardless of what sits between cards (each
   card is followed by TWO prose review paragraphs, so the older
   .pf-card + .pf-card adjacent-sibling selector would never
   match). */
.pf-card:not(:first-of-type) {
  margin-top: var(--rc-space-7);     /* 4.5rem body-space gap */
}
.pf-card:not(:first-of-type)::before {
  content: '';
  position: absolute;
  top: calc(var(--rc-space-7) / -2);  /* midway up the body gap, ~36px above card top, well above the -14px badge */
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(0, 0, 0, 0.15);
}
.pf-badge {
  position: absolute;
  top: -14px;
  left: var(--rc-space-4);
  display: inline-block;
  padding: 0.4rem 0.85rem;
  font-family: var(--rc-font-display);
  font-size: var(--rc-fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--rc-accent);
  color: var(--rc-white);
  border-radius: var(--rc-radius-pill);
  box-shadow: var(--rc-shadow-soft);
}
.pf-image {
  flex: 0 0 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rc-bg);
  border-radius: var(--rc-radius-md);
  padding: var(--rc-space-3);
  min-height: 200px;
}
.pf-image img {
  max-height: 220px;
  max-width: 100%;
  object-fit: contain;
}
.pf-content {
  flex: 1 1 280px;
  min-width: 0;
}
.pf-title {
  margin: 0 0 var(--rc-space-1);
  font-family: var(--rc-font-display);
  font-size: var(--rc-fs-xl);
  font-weight: 700;
  color: var(--rc-ink);
  line-height: var(--rc-lh-tight);
  border: 0;
  padding: 0;
}
.pf-title::before { display: none; }
.pf-subtitle {
  display: block;
  font-family: var(--rc-font-display);
  font-size: var(--rc-fs-sm);
  font-weight: 600;
  color: var(--rc-accent-deep);
  margin-bottom: var(--rc-space-2);
  letter-spacing: 0.01em;
}
.pf-desc {
  font-size: var(--rc-fs-base);
  line-height: var(--rc-lh-base);
  color: var(--rc-ink-soft);
  margin: 0 0 var(--rc-space-3);
}
.pf-desc p:last-child { margin-bottom: 0; }
.pf-desc ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--rc-space-2);
}
.pf-desc ul li {
  position: relative;
  padding-left: 1.1rem;
}
.pf-desc ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rc-accent);
}
.pf-desc ul li strong {
  font-family: var(--rc-font-display);
  font-weight: 600;
  color: var(--rc-ink);
  margin-right: 0.25rem;
}
.pf-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--rc-space-2);
}
.pf-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.95rem 1.25rem;
  font-family: var(--rc-font-display);
  font-size: var(--rc-fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--rc-accent);
  color: var(--rc-white);
  border-radius: var(--rc-radius-pill);
  text-decoration: none;
  transition: background-color var(--rc-transition),
              transform var(--rc-transition),
              box-shadow var(--rc-transition);
}
.pf-cta:hover, .pf-cta:focus-visible {
  background: var(--rc-accent-deep);
  color: var(--rc-white);
  transform: translateY(-2px);
  box-shadow: var(--rc-shadow-soft);
}
.pf-cta-secondary {
  background: transparent;
  color: var(--rc-ink);
  border: 1px solid var(--rc-line);
}
.pf-cta-secondary:hover, .pf-cta-secondary:focus-visible {
  background: var(--rc-surface);
  color: var(--rc-accent-deep);
  border-color: var(--rc-line);
  box-shadow: none;
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .pf-card {
    flex-direction: column;
    padding: var(--rc-space-5) var(--rc-space-3) var(--rc-space-3);
  }
  .pf-image { flex-basis: auto; width: 100%; }
}

/* ============================================================ */
/* AFFILIATE CLOSING SECTION  dr-fin                            */
/* ============================================================ */
.dr-fin {
  background: var(--rc-surface);
  border-radius: var(--rc-radius-lg);
  padding: var(--rc-space-4) var(--rc-space-5);
  margin: var(--rc-space-6) 0 var(--rc-space-4);
  border-left: 3px solid var(--rc-accent);
}
.dr-fin-title {
  display: block;
  margin: 0 0 var(--rc-space-3);
  font-family: var(--rc-font-display);
  font-size: var(--rc-fs-xl);
  font-weight: 600;
  line-height: var(--rc-lh-snug);
  color: var(--rc-ink);
}
.dr-fin ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.dr-fin ul li {
  padding-left: 0;
  margin-bottom: var(--rc-space-2);
}
.dr-fin ul li::before { display: none; }
.dr-fin a {
  font-family: var(--rc-font-body);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--rc-transition);
}
.dr-fin a:hover, .dr-fin a:focus-visible {
  border-bottom-color: var(--rc-accent);
}

/* ============================================================ */
/* HOMEPAGE                                                     */
/* hp-                                                          */
/* ============================================================ */
.hp-main {
  max-width: var(--rc-wrap);
  margin: 0 auto;
  padding: var(--rc-space-6) var(--rc-space-4);
}

/* Visually-hidden H1 (layout 5 = no intro section) */
.dr-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================ */
/* ABOUT PAGE                                                   */
/* ab-                                                          */
/* ============================================================ */
.ab-page {
  max-width: 880px;
  margin: 0 auto;
  padding: var(--rc-space-6) var(--rc-space-4);
}

.ab-hero {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--rc-space-5);
  align-items: center;
  margin-bottom: var(--rc-space-6);
  padding-bottom: var(--rc-space-5);
  border-bottom: 1px solid var(--rc-line);
}

.ab-avatar {
  width: 180px;
  height: 180px;
  border-radius: var(--rc-radius-lg);
  background: var(--rc-surface);
  object-fit: cover;
}

.ab-hero h1 {
  font-family: var(--rc-font-display);
  font-size: var(--rc-fs-3xl);
  font-weight: 600;
  line-height: var(--rc-lh-tight);
  margin: 0 0 var(--rc-space-2);
  color: var(--rc-ink);
}

.ab-tagline {
  font-family: var(--rc-font-display);
  font-size: var(--rc-fs-md);
  font-weight: 500;
  line-height: var(--rc-lh-snug);
  font-style: italic;
  color: var(--rc-ink-soft);
  margin: 0;
}

.ab-page p {
  font-size: var(--rc-fs-base);
  line-height: var(--rc-lh-base);
  color: var(--rc-ink);
  margin: 0 0 var(--rc-space-3);
}

.ab-page p strong {
  color: var(--rc-ink);
  font-weight: 600;
}

.ab-page h2 {
  font-family: var(--rc-font-display);
  font-size: var(--rc-fs-2xl);
  font-weight: 600;
  line-height: var(--rc-lh-snug);
  margin: var(--rc-space-7) 0 var(--rc-space-3);
  color: var(--rc-ink);
  position: relative;
  padding-left: 1.25rem;
}
.ab-page h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--rc-accent);
}

.ab-page h3 {
  font-family: var(--rc-font-display);
  font-size: var(--rc-fs-lg);
  font-weight: 600;
  line-height: var(--rc-lh-snug);
  margin: var(--rc-space-5) 0 var(--rc-space-2);
  color: var(--rc-ink);
}

.ab-page a {
  color: var(--rc-accent-deep);
}
.ab-page a:hover, .ab-page a:focus-visible {
  color: var(--rc-accent);
}

@media (max-width: 640px) {
  .ab-hero {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--rc-space-3);
  }
  .ab-avatar {
    width: 140px;
    height: 140px;
    margin: 0 auto;
  }
  .ab-page h2 {
    padding-left: 1rem;
    font-size: var(--rc-fs-xl);
  }
  .ab-page h2::before {
    width: 0.45rem;
    height: 0.45rem;
  }
}

/* ============================================================ */
/* CONTACT PAGE                                                 */
/* ct-                                                          */
/* ============================================================ */
.ct-page {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--rc-space-6) var(--rc-space-4);
}

.ct-page h1 {
  font-family: var(--rc-font-display);
  font-size: var(--rc-fs-3xl);
  font-weight: 600;
  line-height: var(--rc-lh-tight);
  margin: 0 0 var(--rc-space-3);
  color: var(--rc-ink);
}

.ct-intro {
  margin: 0 0 var(--rc-space-5);
}
.ct-intro p {
  font-family: var(--rc-font-display);
  font-size: var(--rc-fs-md);
  font-style: italic;
  line-height: var(--rc-lh-snug);
  color: var(--rc-ink-soft);
  margin: 0;
}

.ct-card {
  background: var(--rc-surface);
  border: 1px solid var(--rc-line);
  border-radius: var(--rc-radius-lg);
  padding: var(--rc-space-5);
  display: grid;
  gap: var(--rc-space-4);
}

.ct-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--rc-space-3);
  align-items: center;
}

.ct-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--rc-radius-pill);
  background: var(--rc-bg);
  border: 1px solid var(--rc-line);
  color: var(--rc-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ct-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 2;
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ct-label {
  display: block;
  font-family: var(--rc-font-display);
  font-size: var(--rc-fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rc-muted);
  margin-bottom: 0.2em;
}
.ct-value {
  font-family: var(--rc-font-body);
  font-size: var(--rc-fs-md);
  color: var(--rc-ink);
}
a.ct-value {
  color: var(--rc-accent-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}
a.ct-value:hover, a.ct-value:focus-visible {
  color: var(--rc-accent);
}

.ct-privacy {
  margin-top: var(--rc-space-5);
  font-size: var(--rc-fs-sm);
  color: var(--rc-muted);
  text-align: center;
}
.ct-privacy a {
  color: var(--rc-accent-deep);
}

@media (max-width: 480px) {
  .ct-item {
    grid-template-columns: 48px 1fr;
    gap: var(--rc-space-2);
  }
  .ct-icon {
    width: 40px;
    height: 40px;
  }
  .ct-icon svg {
    width: 20px;
    height: 20px;
  }
  .ct-card {
    padding: var(--rc-space-4);
  }
}

/* ============================================================ */
/* LEGAL PAGES (mentions-legales, confidentialite, cookies,     */
/* conditions)                                                  */
/* lg-                                                          */
/* ============================================================ */
.lg-page {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--rc-space-6) var(--rc-space-4);
}
.lg-page h1 {
  font-family: var(--rc-font-display);
  font-size: var(--rc-fs-3xl);
  font-weight: 600;
  line-height: var(--rc-lh-tight);
  margin: 0 0 var(--rc-space-2);
  color: var(--rc-ink);
}
.lg-updated {
  font-family: var(--rc-font-display);
  font-size: var(--rc-fs-sm);
  font-style: italic;
  color: var(--rc-muted);
  margin: 0 0 var(--rc-space-5);
}
.lg-page h2 {
  font-family: var(--rc-font-display);
  font-size: var(--rc-fs-xl);
  font-weight: 600;
  line-height: var(--rc-lh-snug);
  margin: var(--rc-space-6) 0 var(--rc-space-2);
  color: var(--rc-ink);
}
.lg-page h3 {
  font-family: var(--rc-font-display);
  font-size: var(--rc-fs-lg);
  font-weight: 600;
  line-height: var(--rc-lh-snug);
  margin: var(--rc-space-4) 0 var(--rc-space-2);
  color: var(--rc-ink);
}
.lg-page p {
  margin: 0 0 var(--rc-space-3);
  line-height: var(--rc-lh-base);
}
.lg-page strong { color: var(--rc-ink); font-weight: 600; }
.lg-page ul {
  padding-left: 1.4rem;
  margin: 0 0 var(--rc-space-3);
}
.lg-page ul li {
  margin-bottom: 0.45rem;
  line-height: var(--rc-lh-base);
}
.lg-page a {
  color: var(--rc-accent-deep);
}
.lg-page a:hover, .lg-page a:focus-visible {
  color: var(--rc-accent);
}

/* Identity block (LCEN art. 6) */
.lg-identity {
  background: var(--rc-surface);
  border-left: 3px solid var(--rc-accent);
  padding: var(--rc-space-4);
  margin: var(--rc-space-3) 0 var(--rc-space-5);
  border-radius: 0 var(--rc-radius-md) var(--rc-radius-md) 0;
}
.lg-identity dl {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 0.6rem var(--rc-space-3);
  margin: 0;
  font-size: var(--rc-fs-sm);
  line-height: var(--rc-lh-snug);
}
.lg-identity dt {
  font-family: var(--rc-font-display);
  font-weight: 600;
  color: var(--rc-ink);
}
.lg-identity dd {
  margin: 0;
  color: var(--rc-ink-soft);
}
.lg-identity a { word-break: break-word; }

@media (max-width: 600px) {
  .lg-identity dl {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
  .lg-identity dt { margin-top: 0.6rem; }
  .lg-identity dt:first-of-type { margin-top: 0; }
}

/* Cookie table */
.lg-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--rc-space-3) 0 var(--rc-space-5);
  border-radius: var(--rc-radius-md);
  border: 1px solid var(--rc-line);
}
.lg-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: var(--rc-fs-sm);
  background: var(--rc-bg);
}
.lg-table thead th {
  background: var(--rc-ink);
  color: var(--rc-bg);
  text-align: left;
  padding: 0.7rem 0.9rem;
  font-family: var(--rc-font-display);
  font-weight: 600;
  font-size: var(--rc-fs-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lg-table tbody td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--rc-line);
  vertical-align: top;
  line-height: var(--rc-lh-snug);
}
.lg-table tbody tr:nth-child(even) { background: var(--rc-surface); }
.lg-table tbody tr:last-child td { border-bottom: none; }

/* ============================================================ */
/* 404 PAGE                                                     */
/* nf-                                                          */
/* ============================================================ */
.nf-page {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--rc-space-7) var(--rc-space-4);
}
.nf-content {
  max-width: 560px;
  text-align: center;
}
.nf-illustration {
  width: 220px;
  height: auto;
  margin: 0 auto var(--rc-space-4);
  display: block;
}
.nf-content h1 {
  font-family: var(--rc-font-display);
  font-size: var(--rc-fs-3xl);
  font-weight: 600;
  line-height: var(--rc-lh-tight);
  margin: 0 0 var(--rc-space-3);
  color: var(--rc-ink);
}
.nf-content p {
  font-family: var(--rc-font-body);
  font-size: var(--rc-fs-md);
  color: var(--rc-ink-soft);
  margin: 0 0 var(--rc-space-5);
  line-height: var(--rc-lh-base);
}
.nf-actions {
  margin: var(--rc-space-4) 0 0;
}
.nf-home-link {
  display: inline-block;
  padding: 0.85rem 1.85rem;
  background: var(--rc-accent);
  color: var(--rc-white);
  border-radius: var(--rc-radius-pill);
  font-family: var(--rc-font-display);
  font-weight: 600;
  font-size: var(--rc-fs-sm);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: background var(--rc-transition), transform var(--rc-transition), box-shadow var(--rc-transition);
  box-shadow: 0 2px 0 var(--rc-accent-deep);
}
.nf-home-link:hover, .nf-home-link:focus-visible {
  background: var(--rc-accent-deep);
  color: var(--rc-white);
  transform: translateY(-1px);
  box-shadow: 0 3px 0 var(--rc-accent-deep), 0 6px 14px rgba(154, 57, 24, 0.18);
}
.nf-categories {
  margin-top: var(--rc-space-6);
  font-size: var(--rc-fs-sm);
}
.nf-categories-label {
  display: block;
  color: var(--rc-muted);
  margin-bottom: var(--rc-space-2);
  font-family: var(--rc-font-display);
  font-size: var(--rc-fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nf-categories ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}
.nf-categories li a {
  display: inline-block;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--rc-line);
  border-radius: var(--rc-radius-pill);
  text-decoration: none;
  color: var(--rc-ink);
  font-size: var(--rc-fs-sm);
  background: var(--rc-bg);
  transition: border-color var(--rc-transition), background var(--rc-transition), color var(--rc-transition);
}
.nf-categories li a:hover, .nf-categories li a:focus-visible {
  border-color: var(--rc-accent);
  background: var(--rc-surface);
  color: var(--rc-accent-deep);
}

/* ============================================================ */
/* CATEGORY PAGES                                               */
/* ctg-                                                         */
/* ============================================================ */
.ctg-page {
  max-width: var(--rc-wrap);
  margin: 0 auto;
  padding: var(--rc-space-6) var(--rc-space-4) var(--rc-space-7);
}

.ctg-head {
  max-width: 820px;
  margin: 0 auto var(--rc-space-6);
  text-align: center;
}

.ctg-title {
  font-family: var(--rc-font-display);
  font-size: var(--rc-fs-3xl);
  line-height: var(--rc-lh-tight);
  font-weight: 700;
  color: var(--rc-ink);
  margin: 0 0 var(--rc-space-3);
  letter-spacing: -0.01em;
}

.ctg-title::after {
  content: '';
  display: block;
  width: 56px;
  height: 3px;
  margin: var(--rc-space-3) auto 0;
  background: var(--rc-accent);
  border-radius: var(--rc-radius-pill);
}

.ctg-intro {
  font-family: var(--rc-font-body);
  font-size: var(--rc-fs-md);
  line-height: var(--rc-lh-base);
  color: var(--rc-ink-soft);
  margin: 0;
}

.ctg-intro a {
  color: var(--rc-accent-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ctg-intro a:hover, .ctg-intro a:focus-visible {
  color: var(--rc-accent);
}

/* Grid container for category entries (dashboard populates with .rc-item articles) */
.ctg-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rc-space-5);
  margin-top: var(--rc-space-5);
}

/* Pagination (dashboard adds /page/2/, /page/3/ etc.) */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--rc-space-2);
  margin-top: var(--rc-space-7);
  flex-wrap: wrap;
}

.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 var(--rc-space-3);
  border: 1px solid var(--rc-line);
  border-radius: var(--rc-radius-pill);
  background: var(--rc-bg);
  font-family: var(--rc-font-display);
  font-weight: 600;
  font-size: var(--rc-fs-sm);
  color: var(--rc-ink);
  text-decoration: none;
  transition: border-color var(--rc-transition), background var(--rc-transition), color var(--rc-transition);
}

.pagination a:hover,
.pagination a:focus-visible {
  border-color: var(--rc-accent);
  background: var(--rc-surface);
  color: var(--rc-accent-deep);
}

.pagination .is-current,
.pagination [aria-current="page"] {
  background: var(--rc-ink);
  border-color: var(--rc-ink);
  color: var(--rc-white);
  cursor: default;
}

.pagination .is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* Empty container (no entries yet) */
.ctg-grid:empty {
  display: none;
}

/* Mobile: single column */
@media (max-width: 720px) {
  .ctg-page {
    padding: var(--rc-space-5) var(--rc-space-3) var(--rc-space-6);
  }
  .ctg-title {
    font-size: var(--rc-fs-2xl);
  }
  .ctg-intro {
    font-size: var(--rc-fs-base);
  }
  .ctg-grid {
    grid-template-columns: 1fr;
    gap: var(--rc-space-4);
  }
}

/* ============================================================ */
/* HOMEPAGE BLOGROLLS                                           */
/* hp- (extends Phase 3c)                                       */
/* ============================================================ */
.hp-featured,
.hp-recent {
  margin-top: var(--rc-space-5);
}

.hp-featured:first-of-type,
.hp-main > .hp-recent:first-of-type {
  margin-top: 0;
}

.hp-section-eyebrow {
  display: block;
  font-family: var(--rc-font-display);
  font-size: var(--rc-fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rc-accent-deep);
  padding-bottom: var(--rc-space-3);
  margin-bottom: var(--rc-space-5);
  border-bottom: 1px solid var(--rc-line);
  position: relative;
}

.hp-section-eyebrow::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 56px;
  height: 2px;
  background: var(--rc-accent);
}

/* Browse-by-category fallback at the bottom of the homepage,
   between the blogroll and the newsletter CTA injected via the
   footer marker. Pill style mirrors .nf-categories on the 404
   page so the visual idiom for "alternative content path" stays
   consistent across the site. Label uses .hp-section-eyebrow for
   rhythm parity with "Derniers articles" above. */
.hp-categories {
  margin-top: var(--rc-space-5);
}
.hp-categories ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}
.hp-categories li a {
  display: inline-block;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--rc-line);
  border-radius: var(--rc-radius-pill);
  text-decoration: none;
  color: var(--rc-ink);
  font-size: var(--rc-fs-sm);
  background: var(--rc-bg);
  transition: border-color var(--rc-transition), background var(--rc-transition), color var(--rc-transition);
}
.hp-categories li a:hover, .hp-categories li a:focus-visible {
  border-color: var(--rc-accent);
  background: var(--rc-surface);
  color: var(--rc-accent-deep);
}

/* Featured: dashboard inserts <article class="rc-item choix-redaction"> directly inside .hp-featured.
   The first featured entry is wider (highlight); subsequent featured entries fall back to the
   normal grid below. */
.hp-featured {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rc-space-5);
}

.hp-featured > .hp-section-eyebrow {
  grid-column: 1 / -1;
}

.hp-featured > .rc-item {
  /* spans full width when alone */
}

/* When 2 or more featured items, fall back to a 2-col layout below the eyebrow */
.hp-featured > .rc-item ~ .rc-item {
  /* second + items appear in their natural flow under the first */
}

@media (min-width: 769px) {
  .hp-featured {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* If exactly one featured item, span full width for emphasis */
  .hp-featured > .rc-item:only-of-type {
    grid-column: 1 / -1;
  }
}

/* Normal blogroll: 2-column grid matching category pages */
.hp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rc-space-5);
}

/* Empty containers stay invisible until the dashboard adds entries */
.hp-grid:empty,
.hp-featured:empty {
  display: none;
}

/* If only the eyebrow is present (no entries yet), hide the eyebrow too,
   so the homepage doesn't show an empty "Derniers articles" label */
.hp-recent:has(.hp-grid:empty) .hp-section-eyebrow {
  display: none;
}
.hp-featured:has(> .hp-section-eyebrow:only-child) {
  display: none;
}

@media (max-width: 720px) {
  .hp-main {
    padding: var(--rc-space-5) var(--rc-space-3);
  }
  .hp-grid {
    grid-template-columns: 1fr;
    gap: var(--rc-space-4);
  }
  .hp-featured {
    grid-template-columns: 1fr;
    gap: var(--rc-space-4);
  }
}

/* ============================================================ */
/* HOMEPAGE INTRO  (Layout 2: subtle pattern background)        */
/* hp-intro-                                                    */
/* ============================================================ */
.hp-intro {
  margin: 0 0 var(--rc-space-6);
  padding: var(--rc-space-7) var(--rc-space-5);
  background-color: var(--rc-surface);
  background-image:
    radial-gradient(circle at 1.5px 1.5px, rgba(196, 78, 43, 0.10) 1.2px, transparent 0);
  background-size: 22px 22px;
  border-radius: var(--rc-radius-lg);
  border: 1px solid var(--rc-line);
  position: relative;
  overflow: hidden;
}

.hp-intro::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(250, 247, 241, 0.0) 0%, rgba(250, 247, 241, 0.55) 100%);
  pointer-events: none;
}

.hp-intro-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.hp-intro-title {
  font-family: var(--rc-font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: var(--rc-lh-tight);
  letter-spacing: -0.01em;
  color: var(--rc-ink);
  margin: 0 0 var(--rc-space-2);
}

.hp-intro-tagline {
  font-family: var(--rc-font-display);
  font-weight: 500;
  font-size: clamp(1.1875rem, 2.4vw, 1.4rem);
  line-height: var(--rc-lh-snug);
  color: var(--rc-accent-deep);
  margin: 0 0 var(--rc-space-5);
}

.hp-intro-lede {
  font-family: var(--rc-font-body);
  font-size: var(--rc-fs-md);
  line-height: var(--rc-lh-loose);
  color: var(--rc-ink-soft);
  margin: 0 0 var(--rc-space-3);
  text-align: left;
}

.hp-intro-lede:last-child {
  margin-bottom: 0;
}

@media (max-width: 720px) {
  .hp-intro {
    padding: var(--rc-space-5) var(--rc-space-4);
    margin-bottom: var(--rc-space-5);
    border-radius: var(--rc-radius-md);
  }
  .hp-intro-title {
    letter-spacing: 0;
  }
  .hp-intro-tagline {
    margin-bottom: var(--rc-space-4);
  }
  .hp-intro-lede {
    font-size: var(--rc-fs-base);
  }
}

/* ============================================================ */
/* HOMEPAGE DECORATIVE FIGURES                                  */
/* hp-figure-                                                   */
/* ============================================================ */
.hp-figure {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--rc-radius-md);
  box-shadow: var(--rc-shadow-soft);
}

.hp-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.hp-figure-banner {
  margin: 0 0 var(--rc-space-6);
}

@media (max-width: 720px) {
  .hp-figure {
    border-radius: var(--rc-radius-sm);
  }
  .hp-figure-banner {
    margin-bottom: var(--rc-space-5);
  }
}

/* ============================================================ */
/* 503 PAGE  (under-construction / Dev mode)                    */
/* mt-                                                          */
/* ============================================================ */
.mt-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--rc-space-7) var(--rc-space-4) var(--rc-space-4);
  background: var(--rc-bg);
}
.mt-content {
  max-width: 540px;
  text-align: center;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.mt-wordmark {
  display: block;
  font-family: var(--rc-font-display);
  font-weight: 700;
  font-size: var(--rc-fs-md);
  color: var(--rc-accent-deep);
  letter-spacing: 0.04em;
  margin-bottom: var(--rc-space-5);
  text-transform: uppercase;
}
.mt-illustration {
  width: 200px;
  height: auto;
  display: block;
  margin: 0 auto var(--rc-space-4);
}
.mt-content h1 {
  font-family: var(--rc-font-display);
  font-size: var(--rc-fs-2xl);
  font-weight: 600;
  line-height: var(--rc-lh-tight);
  margin: 0 0 var(--rc-space-3);
  color: var(--rc-ink);
}
.mt-content p {
  font-family: var(--rc-font-body);
  font-size: var(--rc-fs-md);
  color: var(--rc-ink-soft);
  margin: 0 auto;
  max-width: 460px;
  line-height: var(--rc-lh-base);
}
.mt-footer {
  margin-top: var(--rc-space-6);
  padding-top: var(--rc-space-3);
  border-top: 1px solid var(--rc-line);
  width: 100%;
  max-width: 540px;
  text-align: center;
}
.mt-footer p {
  margin: 0;
  font-family: var(--rc-font-body);
  font-size: var(--rc-fs-xs);
  color: var(--rc-muted);
  letter-spacing: 0.02em;
}
@media (max-width: 600px) {
  .mt-page {
    padding: var(--rc-space-5) var(--rc-space-3) var(--rc-space-3);
  }
  .mt-content h1 {
    font-size: var(--rc-fs-xl);
  }
  .mt-illustration {
    width: 170px;
  }
}

/* ============================================================ */
/* NEWSLETTER SUCCESS STATES (after fake double-opt-in submit)  */
/* ============================================================ */

/* Sidebar form success (mz-) */
.mz-cta-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--rc-space-2);
  margin-top: var(--rc-space-3);
  padding: var(--rc-space-3);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--rc-radius-md);
}
.mz-cta-success-icon {
  width: 36px;
  height: 36px;
  color: var(--rc-accent-soft);
  flex-shrink: 0;
}
.mz-cta-success-title {
  margin: 0;
  font-family: var(--rc-font-display);
  font-weight: 600;
  font-size: var(--rc-fs-md);
  color: #FAF7F1;
  line-height: var(--rc-lh-snug);
}
.mz-cta-success-text {
  margin: 0;
  font-family: var(--rc-font-body);
  font-size: var(--rc-fs-sm);
  color: rgba(250, 247, 241, 0.85);
  line-height: var(--rc-lh-snug);
}

/* Footer form success (vp-) */
.vp-cta-success {
  display: flex;
  align-items: flex-start;
  gap: var(--rc-space-3);
  padding: var(--rc-space-4);
  background: var(--rc-bg);
  border: 1px solid var(--rc-line);
  border-radius: var(--rc-radius-md);
  max-width: 520px;
}
.vp-cta-success-icon {
  width: 32px;
  height: 32px;
  color: var(--rc-success);
  flex-shrink: 0;
  margin-top: 2px;
}
.vp-cta-success-title {
  margin: 0 0 var(--rc-space-1);
  font-family: var(--rc-font-display);
  font-size: var(--rc-fs-lg);
  font-weight: 600;
  color: var(--rc-ink);
  line-height: var(--rc-lh-snug);
}
.vp-cta-success-text {
  margin: 0;
  font-family: var(--rc-font-body);
  font-size: var(--rc-fs-sm);
  color: var(--rc-ink-soft);
  line-height: var(--rc-lh-base);
}
@media (max-width: 600px) {
  .vp-cta-success {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* ============================================================ */
/* AFFILIATE STAR RATING  pf-star*                              */
/* ============================================================ */
.pf-stars {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  margin: var(--rc-space-3) 0 var(--rc-space-2);
  font-size: var(--rc-fs-md);
  line-height: 1;
}
.pf-star {
  color: var(--rc-line);
  font-size: var(--rc-fs-lg);
}
.pf-star-full {
  color: var(--rc-accent);
}
.pf-star-half {
  color: var(--rc-accent);
  position: relative;
  display: inline-block;
  background: linear-gradient(90deg, var(--rc-accent) 50%, var(--rc-line) 50%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pf-stars-value {
  margin-left: var(--rc-space-2);
  font-family: var(--rc-font-display);
  font-weight: 600;
  font-size: var(--rc-fs-sm);
  color: var(--rc-ink-soft);
}

/* Slider arrow modifiers (pn-nav already styled; these are for pairing) */
.pn-prev,
.pn-next {
  /* Styling inherited from .pn-nav. Modifier hooks reserved for future per-side variation. */
}

/* ============================================================ */
/* UPDATE: STAR RATING BLOCKS + WHITE IMAGE BG +                 */
/*         scroll-margin-top per viewport                        */
/* ============================================================ */

/* Slider compact + review card full-size rating blocks share an
   identical inner DOM. The width % on __stars-filled is emitted
   inline by the article-write LLM (rating × 20). The CSS contract
   below is mandatory - position: relative + position: absolute +
   overflow: hidden + letter-spacing: 0 are required for the
   partial-fill overlay to work. Empty-star track + filled-star
   overlay use the SAME 5 star characters; only color + clipping
   differ. */

.pn-rating,
.pf-rating {
  display: flex;
  align-items: center;
  gap: var(--rc-space-2);
  margin: var(--rc-space-2) 0 var(--rc-space-3);
}
.pn-rating__stars,
.pf-rating__stars {
  position: relative;            /* anchor for the absolute filled overlay */
  display: inline-block;
  letter-spacing: 0;             /* avoid drift between empty + filled tracks */
  line-height: 1;
  color: var(--rc-star-empty);
}
.pn-rating__stars-empty,
.pf-rating__stars-empty {
  /* sits in normal flow; renders the 5-star empty track */
}
.pn-rating__stars-filled,
.pf-rating__stars-filled {
  position: absolute;            /* overlays the empty track */
  top: 0;
  left: 0;
  width: 0;                      /* overridden inline via style="width: XX%" */
  overflow: hidden;              /* clips the filled glyphs to the rated portion */
  white-space: nowrap;
  color: var(--rc-star-gold);
}
.pn-rating__text,
.pf-rating__text {
  font-family: var(--rc-font-display);
  font-weight: 600;
  color: var(--rc-ink-soft);
}

/* Slider compact modifier: smaller font-size for inline summary cards */
.pn-rating--compact .pn-rating__stars { font-size: 1rem; }
.pn-rating--compact .pn-rating__text  { font-size: var(--rc-fs-xs); }

/* Review-card full-size variant: larger and more prominent */
.pf-rating .pf-rating__stars { font-size: 1.4rem; }
.pf-rating .pf-rating__text  { font-size: var(--rc-fs-sm); }

/* Product image containers: solid white background. Product image
   JPGs ship with a baked-in #FFFFFF background; without this
   override the JPG renders as a visible white square inside the
   site's cream --rc-bg container. Applies to slider AND review-card
   image containers, including the .pf-card-top accent variant. */
.pn-image,
.pf-image {
  background: var(--rc-white);
}

/* Anchor scroll offset for slider jumplinks. The slider jumplinks
   point at the <span id="..."> INSIDE each review card's H2 title,
   so scroll-margin-top MUST be applied to that span - applying it
   to the .pf-card parent has no effect on span-targeted jumplinks
   (CSS scroll-margin only takes effect on the scroll-target itself).

   Values calibrated within the documented ranges for the
   running-club.fr layout:
   - Desktop: side-by-side card (image left, content right). Clears
     the absolute pf-badge above the card top edge + breathing room.
     Range 60-120px for side-by-side; 100px chosen.
   - Mobile (<=768px, matching this site's nav-collapse breakpoint):
     card stacks vertically (image full-width above content) and the
     mobile sticky header (~64px) is visible at scroll start.
     Combined: bar + badge + full image + breathing.
     Range 350-450px for stacked; 400px chosen.
   Tune by clicking real slider jumplinks if the badge ever clips. */
.pf-title span[id] {
  scroll-margin-top: 100px;
}
@media (max-width: 768px) {
  .pf-title span[id] {
    scroll-margin-top: 400px;
  }
}