/*
 * Robé — le blog. Palette mesurée sur le site marchand (prod/com.css : --blue,
 * --dark-blue, --orange) ; contrastes AA vérifiés pour chaque couple texte / fond.
 *
 * Le bleu (#01ABD4) et l'orange (#F67112) de Robé ne passent pas AA avec du blanc
 * (2,7 et 2,9) : le bleu reste au décor, et leurs versions assombries
 * (--rb-blue-text, --rb-orange-button) portent le texte ou le texte blanc. Seule
 * exception : le bouton Boutique (voir .rb-btn--shop).
 */

/* Polices hébergées sur le blog (licence OFL, fichiers dans ../fonts). */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url("../fonts/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url("../fonts/montserrat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --rb-ink: #0A2648;            /* texte et titres : 15,2:1 sur blanc */
  --rb-muted: #4A5A6E;          /* texte secondaire : 7,1:1 sur blanc, 6,6:1 sur --rb-bg */
  --rb-bg: #F4F7FA;
  --rb-surface: #FFFFFF;
  --rb-line: #DCE3EA;

  --rb-blue: #01ABD4;           /* bleu Robé : fonds et décor ; texte marine dessus (5,6:1), jamais blanc (2,7:1) */
  --rb-blue-text: #00799A;      /* 5,0:1 sur blanc, blanc dessus 5,0:1 */
  --rb-blue-text-hover: #005F79;
  --rb-blue-dark: #003366;      /* blanc dessus 12,6:1 */
  --rb-orange: #F67112;         /* orange Robé : blanc dessus 2,9:1 */
  --rb-orange-button: #C35607;  /* orange Robé assombri : blanc dessus 4,5:1 */

  --rb-tint-blue: #E1F4FA;
  --rb-tint-blue-ink: #00506A;  /* 7,9:1 */
  --rb-tint-orange: #FEEBDD;
  --rb-tint-orange-ink: #8A3A00; /* 6,8:1 */

  --rb-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --rb-font-display: "Montserrat", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --rb-radius-lg: 20px;
  --rb-radius: 16px;
  --rb-max: 1200px;
  --rb-gutter: 24px;
}

@media (max-width: 600px) {
  :root { --rb-gutter: 16px; }
}

/*
 * Variables du kit Elementor, dont la feuille est retirée (inc/assets.php) : les
 * widgets des articles s'y réfèrent pour leurs couleurs et polices par défaut.
 * Les tailles de conteneur reprennent les valeurs du kit.
 */
body.rb {
  --e-global-color-primary: var(--rb-ink);
  --e-global-color-secondary: var(--rb-muted);
  --e-global-color-text: var(--rb-ink);
  --e-global-color-accent: var(--rb-blue-text);
  --e-global-typography-primary-font-family: "Montserrat";
  --e-global-typography-primary-font-weight: 700;
  --e-global-typography-secondary-font-family: "Inter";
  --e-global-typography-secondary-font-weight: 400;
  --e-global-typography-text-font-family: "Inter";
  --e-global-typography-text-font-weight: 400;
  --e-global-typography-accent-font-family: "Inter";
  --e-global-typography-accent-font-weight: 600;
}
.rb .elementor-section.elementor-section-boxed > .elementor-container { max-width: 1140px; }
.rb .e-con { --container-max-width: 1140px; }
.rb .elementor-widget:not(:last-child) { margin-block-end: 20px; }
.rb .elementor-element { --widgets-spacing: 20px 20px; --widgets-spacing-row: 20px; --widgets-spacing-column: 20px; }
@media (max-width: 1024px) {
  .rb .elementor-section.elementor-section-boxed > .elementor-container { max-width: 1024px; }
  .rb .e-con { --container-max-width: 1024px; }
}
@media (max-width: 767px) {
  .rb .elementor-section.elementor-section-boxed > .elementor-container { max-width: 767px; }
  .rb .e-con { --container-max-width: 767px; }
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 24px;
}

body.rb {
  margin: 0;
  background: var(--rb-bg);
  color: var(--rb-ink);
  font-family: var(--rb-font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* :where() garde ces règles à spécificité nulle : chaque composant les remplace. */
:where(.rb) img { max-width: 100%; height: auto; }
:where(.rb) a { color: var(--rb-blue-text); }
:where(.rb) a:hover { color: var(--rb-blue-text-hover); }
:where(.rb) :is(h1, h2, h3, h4, h5, h6) { color: inherit; }
:where(.rb) :focus-visible {
  outline: 3px solid var(--rb-blue-text);
  outline-offset: 2px;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.rb-skip {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 1000;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--rb-ink);
  color: #fff;
  font-weight: 600;
}
.rb-skip:focus { left: 12px; color: #fff; }

.rb-container {
  width: 100%;
  max-width: var(--rb-max);
  margin-inline: auto;
  padding-inline: var(--rb-gutter);
}

.rb-eyebrow {
  margin: 0 0 12px;
  font-family: var(--rb-font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rb-muted);
}

.rb-icon { flex: none; }

/* ---------- Boutons ---------- */

.rb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}

/*
 * Orange du site marchand avec texte blanc, comme ses boutons : 2,9:1, sous le seuil
 * AA (4,5:1). Au survol, l'orange assombri (4,5:1).
 */
.rb-btn--shop { background: var(--rb-orange); color: #fff; }
.rb-btn--shop:hover { background: var(--rb-orange-button); color: #fff; }

/*
 * Sur le bandeau bleu Robé : bouton bleu foncé (4,7:1 contre le bandeau), texte
 * blanc 12,6:1.
 */
.rb-btn--accent { background: var(--rb-blue-dark); color: #fff; }
.rb-btn--accent:hover { background: var(--rb-ink); color: #fff; }

.rb-btn--primary { background: var(--rb-blue-text); color: #fff; }
.rb-btn--primary:hover { background: var(--rb-blue-text-hover); color: #fff; }

.rb-btn--outline { border-color: var(--rb-ink); background: transparent; color: var(--rb-ink); }
.rb-btn--outline:hover { background: var(--rb-ink); color: #fff; }

/* ---------- En-tête ---------- */

.rb-header {
  background: var(--rb-surface);
  border-bottom: 1px solid var(--rb-line);
}

.rb-header__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "brand nav search shop";
  align-items: center;
  column-gap: 20px;
  row-gap: 12px;
  padding-block: 14px;
}

.rb-brand {
  grid-area: brand;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.rb-brand__logo { display: block; width: 92px; height: auto; }
.rb-brand__label {
  padding-left: 12px;
  border-left: 1px solid var(--rb-line);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--rb-blue-text);
  /* Sur deux lignes : d'un bloc, le libellé repousse le menu sous la recherche. */
  max-width: 9.5em;
  text-wrap: balance;
}

.rb-nav { grid-area: nav; min-width: 0; }
.rb-nav ul {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rb-nav a {
  position: relative;
  display: block;
  padding: 10px 11px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--rb-ink);
  text-decoration: none;
  white-space: nowrap;
}
.rb-nav a:hover { background: var(--rb-bg); color: var(--rb-ink); }
.rb-nav a[aria-current] { font-weight: 600; }
.rb-nav a[aria-current]::after {
  content: "";
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: 3px;
  height: 3px;
  border-radius: 3px;
  background: var(--rb-blue);
}

.rb-search {
  grid-area: search;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--rb-line);
  border-radius: 999px;
  background: var(--rb-bg);
  color: var(--rb-muted);
}
.rb-search:focus-within {
  border-color: var(--rb-blue-text);
  box-shadow: 0 0 0 2px var(--rb-blue-text);
}
.rb-search input {
  width: 150px;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--rb-ink);
  font: inherit;
  font-size: 15px;
  outline: none;
}
.rb-search input::placeholder { color: var(--rb-muted); opacity: 1; }

.rb-header .rb-btn--shop { grid-area: shop; }

@media (max-width: 1179px) {
  .rb-header__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "brand search shop"
      "nav nav nav";
  }
  .rb-search { justify-self: end; }
  .rb-nav { margin-inline: -11px; }
}

@media (max-width: 759px) {
  .rb-header__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand shop"
      "search search"
      "nav nav";
    padding-block: 12px 4px;
  }
  .rb-brand__logo { width: 80px; }
  .rb-search { justify-self: stretch; }
  .rb-search input { flex: 1; width: auto; }
  /* Rubriques en bande défilante plutôt que sur trois lignes. */
  .rb-nav {
    margin-inline: calc(-1 * var(--rb-gutter));
    overflow-x: auto;
    scrollbar-width: none;
  }
  .rb-nav::-webkit-scrollbar { display: none; }
  .rb-nav ul { padding-inline: calc(var(--rb-gutter) - 11px); }
}

/* ---------- Accueil : introduction, à la une, les plus lus ---------- */

.rb-intro { padding-block: 56px 32px; }
.rb-intro__title {
  max-width: 820px;
  margin: 0;
  font-family: var(--rb-font-display);
  font-size: clamp(34px, 5vw, 60px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--rb-ink);
}

.rb-top {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding-bottom: 48px;
}

/*
 * Les images à la une du blog sont presque toutes des bannières avec du texte, de
 * 2,2:1 à 4:1 : un recadrage les rendrait illisibles. Elles s'affichent entières
 * (contain) sur fond blanc, image au-dessus du texte.
 */
.rb-feature {
  flex: 999 1 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--rb-surface);
  border: 1px solid var(--rb-line);
  border-radius: var(--rb-radius-lg);
}
.rb-feature__media {
  display: block;
  background: var(--rb-surface);
  border-bottom: 1px solid var(--rb-line);
}
.rb-feature__media > img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 380px;
  object-fit: contain;
}
.rb-feature__media > .rb-tile { aspect-ratio: 2.2 / 1; padding: 32px; }
.rb-feature__media .rb-tile__label { font-size: clamp(40px, 5vw, 64px); }
.rb-feature__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px 32px 32px;
}
.rb-feature__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0;
  font-size: 14px;
  color: var(--rb-muted);
}
.rb-feature__title {
  margin: 0;
  font-family: var(--rb-font-display);
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.rb-feature__title a { color: var(--rb-ink); text-decoration: none; }
.rb-feature__title a:hover { color: var(--rb-ink); text-decoration: underline; text-underline-offset: 4px; }
.rb-feature__excerpt { margin: 0; font-size: 16px; line-height: 1.6; color: var(--rb-muted); }
.rb-feature__cta { align-self: flex-start; margin-top: auto; }

.rb-popular {
  flex: 1 1 300px;
  min-width: 0;
  padding: 28px;
  background: var(--rb-surface);
  border: 1px solid var(--rb-line);
  border-radius: var(--rb-radius-lg);
}
.rb-popular__list { margin: 0; padding: 0; list-style: none; }
.rb-popular__list li + li { border-top: 1px solid var(--rb-line); }
.rb-popular__list a {
  display: flex;
  gap: 16px;
  padding: 14px 0;
  color: var(--rb-ink);
  text-decoration: none;
}
.rb-popular__list a:hover { color: var(--rb-ink); }
.rb-popular__list a:hover .rb-popular__title { text-decoration: underline; text-underline-offset: 3px; }
.rb-popular__rank {
  flex: none;
  width: 28px;
  font-family: var(--rb-font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: var(--rb-blue-text);
}
.rb-popular__title { font-size: 16px; font-weight: 600; line-height: 1.35; }

/* ---------- Puces de rubriques ---------- */

.rb-chips { padding-bottom: 24px; }
.rb-chips ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rb-chip {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--rb-line);
  border-radius: 999px;
  background: var(--rb-surface);
  color: var(--rb-ink);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.rb-chip:hover { border-color: var(--rb-blue-text); color: var(--rb-ink); }
.rb-chip[aria-current] {
  border-color: var(--rb-blue-text);
  background: var(--rb-blue-text);
  color: #fff;
}

@media (max-width: 759px) {
  .rb-chips ul {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(-1 * var(--rb-gutter));
    padding-inline: var(--rb-gutter);
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .rb-chips ul::-webkit-scrollbar { display: none; }
}

/* Étiquette de rubrique, teintée comme la tuile de sa catégorie. */
.rb-tag {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}
.rb-tag:hover { text-decoration: underline; }
.rb-tag--blue,
.rb-tag--blue:hover { background: var(--rb-tint-blue); color: var(--rb-tint-blue-ink); }
.rb-tag--orange,
.rb-tag--orange:hover { background: var(--rb-tint-orange); color: var(--rb-tint-orange-ink); }
.rb-tag--navy,
.rb-tag--navy:hover { background: var(--rb-blue-dark); color: #fff; }

/* ---------- Grille d'articles ---------- */

.rb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 24px;
  padding-top: 8px;
  padding-bottom: 48px;
}
.rb-grid__title { grid-column: 1 / -1; margin: 0; }

.rb-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--rb-surface);
  border: 1px solid var(--rb-line);
  border-radius: var(--rb-radius);
  transition: box-shadow .15s;
}
.rb-card:hover { box-shadow: 0 8px 24px rgba(10, 38, 72, .08); }
.rb-card:focus-within { outline: 3px solid var(--rb-blue-text); outline-offset: 2px; }
/*
 * Cadre fixe : sans overflow hidden ni positionnement absolu, une image plus haute que
 * le rapport 12/5 agrandit la carte. Rapport repris dans inc/media.php.
 */
.rb-card__media {
  position: relative;
  aspect-ratio: 12 / 5;
  overflow: hidden;
  background: var(--rb-surface);
  border-bottom: 1px solid var(--rb-line);
}
.rb-card__media > img,
.rb-card__media > .rb-tile {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.rb-card__media > img { display: block; object-fit: cover; }
.rb-card__media--banner > img { object-fit: contain; }
.rb-card__media--banner > .rb-card__backdrop {
  object-fit: cover;
  filter: blur(14px);
  transform: scale(1.15);
}
.rb-card__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 10px;
  padding: 20px 22px 24px;
}
.rb-card__meta { margin: 0; font-size: 13px; color: var(--rb-muted); }
.rb-card__cat { font-weight: 600; color: var(--rb-ink); }
.rb-card__title {
  margin: 0;
  font-family: var(--rb-font-body);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
}
.rb-card__link { color: var(--rb-ink); text-decoration: none; }
.rb-card__link:hover { color: var(--rb-ink); }
.rb-card__link:focus-visible { outline: none; }
/* Lien étiré sur toute la carte. */
.rb-card__link::after { content: ""; position: absolute; inset: 0; }
.rb-card:hover .rb-card__link { text-decoration: underline; text-underline-offset: 3px; }

/* Tuile de repli des articles sans image à la une. */
.rb-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px;
}
.rb-tile__year { font-size: 13px; font-weight: 600; }
.rb-tile__label {
  font-family: var(--rb-font-display);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.rb-tile--blue { background: var(--rb-tint-blue); color: var(--rb-tint-blue-ink); }
.rb-tile--orange { background: var(--rb-tint-orange); color: var(--rb-tint-orange-ink); }
.rb-tile--navy { background: var(--rb-blue-dark); color: #fff; }

/* ---------- Pagination ---------- */

.rb-pagination { padding-bottom: 56px; }
.rb-pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rb-pagination :is(a, span).page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--rb-line);
  border-radius: 999px;
  background: var(--rb-surface);
  color: var(--rb-ink);
  font-weight: 500;
  text-decoration: none;
}
.rb-pagination a.page-numbers:hover { border-color: var(--rb-blue-text); color: var(--rb-ink); }
.rb-pagination span.current { border-color: var(--rb-ink); background: var(--rb-ink); color: #fff; }
.rb-pagination span.dots { border: 0; background: transparent; }

/* ---------- Lettre d'information ---------- */

/*
 * Fond bleu Robé : le blanc n'y tient que 2,7:1, tout le texte est donc marine
 * (5,6:1). Champ blanc bordé de bleu foncé pour se détacher du fond (4,7:1).
 */
.rb-newsletter { background: var(--rb-blue); color: var(--rb-ink); }
.rb-newsletter__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
  padding-block: 56px;
}
.rb-newsletter__text { flex: 1 1 420px; min-width: 0; }
.rb-newsletter h2 {
  margin: 0 0 10px;
  font-family: var(--rb-font-display);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--rb-ink);
}
.rb-newsletter__text p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--rb-ink); }
.rb-newsletter__form { flex: 1 1 380px; min-width: 0; }
.rb-newsletter__row { display: flex; flex-wrap: wrap; gap: 10px; }
.rb-newsletter input[type="email"] {
  flex: 1 1 260px;
  min-width: 0;
  height: 52px;
  padding: 0 18px;
  border: 1px solid var(--rb-blue-dark);
  border-radius: 999px;
  background: #fff;
  color: var(--rb-ink);
  font: inherit;
  font-size: 16px;
}
.rb-newsletter input[type="email"]::placeholder { color: var(--rb-muted); opacity: 1; }
.rb-newsletter .rb-btn { height: 52px; padding: 0 24px; font-size: 16px; }
.rb-newsletter__note { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--rb-ink); }
.rb-newsletter__note a { color: var(--rb-ink); text-decoration: underline; }
.rb-newsletter__note a:hover { color: var(--rb-ink); text-decoration-thickness: 2px; }
.rb-newsletter :focus-visible { outline-color: var(--rb-ink); }

/* ---------- Pied de page ---------- */

.rb-footer { background: var(--rb-surface); border-top: 1px solid var(--rb-line); }
.rb-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
  padding-block: 40px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--rb-muted);
}
.rb-footer p { margin: 0; }
.rb-footer .rb-footer__name {
  margin-bottom: 4px;
  font-family: var(--rb-font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--rb-ink);
}
.rb-footer a { color: var(--rb-ink); }
.rb-footer a:hover { color: var(--rb-blue-text); }
.rb-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rb-footer__links a { display: inline-block; padding-block: 10px; }

/* ---------- En-têtes de pages de liste ---------- */

.rb-page-head { padding-block: 48px 24px; }
.rb-page-head__title {
  margin: 0;
  font-family: var(--rb-font-display);
  font-size: clamp(32px, 4.4vw, 52px);
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
}
.rb-page-head__desc { max-width: 720px; margin-top: 12px; font-size: 17px; color: var(--rb-muted); }
.rb-page-head__desc p { margin: 0 0 8px; }
.rb-page-head__count { margin: 12px 0 0; font-size: 14px; color: var(--rb-muted); }
.rb-empty { padding-bottom: 48px; }

.rb-searchform {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 560px;
  margin-top: 16px;
}
.rb-searchform input {
  flex: 1 1 220px;
  min-width: 0;
  height: 48px;
  padding: 0 18px;
  border: 1px solid var(--rb-line);
  border-radius: 999px;
  background: var(--rb-surface);
  color: var(--rb-ink);
  font: inherit;
}
.rb-searchform .rb-btn { min-height: 48px; }

/* ---------- Article ---------- */

.rb-single { padding-block: 32px 72px; }

.rb-breadcrumb { margin-bottom: 28px; font-size: 14px; color: var(--rb-muted); }
.rb-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rb-breadcrumb li + li::before { content: "/"; margin-right: 4px; }
.rb-breadcrumb a { color: var(--rb-muted); }
.rb-breadcrumb a:hover { color: var(--rb-ink); }

.rb-article-head { max-width: 860px; }
.rb-article-head__title {
  margin: 18px 0 16px;
  font-family: var(--rb-font-display);
  font-size: clamp(32px, 4.6vw, 54px);
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
}
.rb-article-head > .rb-tag + .rb-article-head__title { margin-top: 18px; }
.rb-article-head > .rb-article-head__title:first-child { margin-top: 0; }
.rb-article-head__lead { margin: 0 0 20px; font-size: 19px; line-height: 1.6; color: var(--rb-muted); }
.rb-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0;
  font-size: 14px;
  color: var(--rb-muted);
}

.rb-article-figure { max-width: 860px; margin: 32px 0 0; }
.rb-article-figure img { display: block; width: 100%; height: auto; border-radius: var(--rb-radius-lg); }

.rb-article-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 48px;
  margin-top: 40px;
}

.rb-toc {
  flex: 1 1 220px;
  min-width: 0;
  padding: 22px;
  background: var(--rb-surface);
  border: 1px solid var(--rb-line);
  border-radius: var(--rb-radius);
}
.rb-toc .rb-eyebrow { font-size: 13px; }
.rb-toc ol {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.4;
}
.rb-toc a { color: var(--rb-ink); }
.rb-toc a:hover { color: var(--rb-blue-text); }
@media (min-width: 1000px) {
  .rb-toc { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow: auto; }
}

.rb-article { flex: 999 1 560px; min-width: 0; max-width: 760px; }

/* ---------- Corps des articles (classiques et Elementor) ---------- */

.rb-prose {
  font-size: 18px;
  line-height: 1.75;
  color: var(--rb-ink);
  overflow-wrap: break-word;
}
.rb-prose > :first-child { margin-top: 0; }
.rb-prose p { margin: 0 0 1.1em; }
.rb-prose a:not(.elementor-button) {
  color: var(--rb-blue-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.rb-prose a:not(.elementor-button):hover { color: var(--rb-blue-text-hover); text-decoration-thickness: 2px; }

/* Intertitres hors Elementor : les widgets Titre gardent leurs propres marges et tailles. */
.rb-prose :is(h2, h3, h4, h5, h6):not(.elementor-heading-title) {
  margin: 1.6em 0 0.6em;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--rb-ink);
}
.rb-prose h2:not(.elementor-heading-title) { font-size: 28px; }
.rb-prose h3:not(.elementor-heading-title) { font-size: 22px; }
.rb-prose h4:not(.elementor-heading-title) { font-size: 19px; }
.rb-prose :is(h2, h3, h4, h5, h6) { scroll-margin-top: 24px; }

/*
 * Polices imposées : 54 widgets Elementor ont du Roboto posé à la main, dans des règles
 * à quatre classes ; seul !important les remplace sans réécrire les articles.
 */
.rb-prose :is(h1, h2, h3, h4, h5, h6),
.rb-prose .elementor-heading-title { font-family: var(--rb-font-display) !important; }
.rb-prose .elementor-widget-text-editor,
.rb-prose .elementor-widget-text-editor :not(h1, h2, h3, h4, h5, h6),
.rb-prose .elementor-button,
.rb-prose .elementor-button * { font-family: var(--rb-font-body) !important; }

.rb-prose :is(ul, ol) { margin: 0 0 1.1em; padding-left: 1.4em; }
.rb-prose li + li { margin-top: 0.3em; }
.rb-prose blockquote {
  margin: 1.5em 0;
  padding: 4px 0 4px 20px;
  border-left: 4px solid var(--rb-blue);
  font-size: 20px;
}
.rb-prose hr { margin: 2em 0; border: 0; border-top: 1px solid var(--rb-line); }
.rb-prose table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 16px;
}
.rb-prose :is(th, td) { padding: 8px 12px; border: 1px solid var(--rb-line); text-align: left; }
.rb-prose :is(iframe, video, embed, object) { max-width: 100%; }
.rb-prose figure { margin: 1.5em 0; max-width: 100%; }
.rb-prose :is(figcaption, .wp-caption-text) { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--rb-muted); }
.rb-prose .alignleft { float: left; max-width: 50%; margin: 0.3em 1.5em 1em 0; }
.rb-prose .alignright { float: right; max-width: 50%; margin: 0.3em 0 1em 1.5em; }
.rb-prose .aligncenter { display: block; margin-inline: auto; }
.rb-prose::after { content: ""; display: table; clear: both; }
@media (max-width: 600px) {
  .rb-prose { font-size: 17px; }
  .rb-prose :is(.alignleft, .alignright) { float: none; max-width: 100%; margin: 1em 0; }
}

.rb-page-links { margin: 24px 0; font-weight: 600; }

/* Gabarit Elementor « pleine largeur » : le contenu porte son propre titre. */
.rb-elementor-page { padding-bottom: 72px; }
.rb-elementor-page__head { padding-block: 32px 24px; }
.rb-elementor-page__head .rb-breadcrumb { margin-bottom: 16px; }

/* ---------- Commentaires ---------- */

.rb-comments {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--rb-line);
  font-size: 16px;
}
.rb-comments__title,
.rb-comments__reply {
  margin: 0 0 16px;
  font-family: var(--rb-font-display);
  font-weight: 700;
  line-height: 1.2;
}
.rb-comments__title { font-size: 24px; }
.rb-comments__reply { margin-top: 24px; font-size: 20px; }
.rb-comments__list,
.rb-comments__list .children { margin: 0; padding: 0; list-style: none; }
.rb-comments__list .children { padding-left: 24px; }
.rb-comments .comment-body { padding: 16px 0; border-bottom: 1px solid var(--rb-line); }
.rb-comments .comment-meta { font-size: 14px; color: var(--rb-muted); }
.rb-comments .comment-meta a { color: var(--rb-muted); }
.rb-comments .avatar { margin-right: 8px; border-radius: 50%; vertical-align: middle; }
.rb-comments .comment-form p { margin: 0 0 16px; }
.rb-comments .comment-form label { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 600; }
.rb-comments .comment-form :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--rb-line);
  border-radius: 12px;
  background: var(--rb-surface);
  color: var(--rb-ink);
  font: inherit;
}
.rb-comments .comment-form-cookies-consent label { display: inline; font-weight: 400; }

/* ---------- Petits écrans ---------- */

@media (max-width: 759px) {
  .rb-intro { padding-block: 32px 24px; }
  .rb-top { padding-bottom: 32px; gap: 16px; }
  .rb-feature__body { padding: 24px; }
  .rb-popular { padding: 24px; }
  .rb-page-head { padding-block: 32px 16px; }
  .rb-newsletter__inner { padding-block: 40px; }
  .rb-single { padding-top: 20px; }
  .rb-breadcrumb { margin-bottom: 20px; }
  .rb-article-layout { gap: 28px; margin-top: 28px; }
}

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