/* ── Road2Luxe — blog.css ────────────────────────────────────────
   Index (home.php), rubrique (category.php), article (single.php).

   Gabarit transposé du blog Skincare Agency (LEVUPP) — registre
   ÉDITORIAL : beaucoup de blanc, petites capitales pour les mentions,
   une alternance de rangées plutôt qu'une grille régulière.

   Rappels de charte appliqués ici :
   • Flamingo = CTA uniquement : ni titre survolé, ni rubrique active, ni
     sommaire. L'encre d'accent est la Terre ; l'or de la référence est
     transposé en Terre — jamais de doré. Seul le focus clavier reprend
     le Flamingo (convention du thème).
   • Aucun contour de carte : ce qui sépare les blocs, c'est le blanc, et
     pour les listes un filet sable.
   • Tout .r2l-rise a un ancêtre .js-reveal (contrat §11). La une (LCP) et
     le corps d'article ne sont jamais gatés.
   • Surface claire continue jusqu'au pré-footer immersif.
──────────────────────────────────────────────────────────────── */

.r2l-blog {
  --r2l-blog-filet:  var(--r2l-sable-4);
  --r2l-blog-mesure: 68ch;
  background: var(--r2l-sable-1);
}

.r2l-blog__page {
  padding-bottom: var(--r2l-rythme-inter);
}

/* Pistes de grille en minmax(0, …) et items à min-width:0 : sans cela, un
   chapô borné (-webkit-box) impose sa largeur max-content comme minimum et
   la colonne mobile déborde de l'écran. */
.r2l-blog-head,
.r2l-blog-une,
.r2l-rubric__body,
.r2l-rubric__cards,
.r2l-blog-flux__row,
.r2l-blog-archive__link {
  grid-template-columns: minmax(0, 1fr);
}

.r2l-post,
.r2l-post__body,
.r2l-headline,
.r2l-headline__body {
  min-width: 0;
}


/* ══════════════════════════════════════════════════════════════
   0. BRIQUES — mention, carte, liste de titres
   ══════════════════════════════════════════════════════════════ */

/* Mention en petites capitales : dates, rubriques, libellés de colonne. */
.r2l-blog-head__label,
.r2l-headline__meta,
.r2l-post__meta,
.r2l-article__meta,
.r2l-toc__label,
.r2l-article__back,
.r2l-blog-archive__title,
.r2l-blog-archive__date,
.r2l-blog-archive__rubric,
.r2l-titles__date,
.r2l-rubric__explore {
  font-family: var(--r2l-font-corps);
  font-size: var(--r2l-text-eyebrow);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--r2l-terre-corps);
}

/* La rubrique est l'accent de la mention. */
.r2l-headline__rubric,
.r2l-post__rubric,
.r2l-article__rubric {
  font-weight: 700;
  color: var(--r2l-terre-sec);
}

.r2l-blog :is(
  .r2l-post,
  .r2l-headline,
  .r2l-titles__link,
  .r2l-blog-archive__link,
  .r2l-blog-head__rubrique,
  .r2l-toc__link,
  .r2l-rubric__title a,
  .r2l-rubric__explore,
  .r2l-article__back,
  .r2l-article__rubric
):focus-visible {
  outline: 2px solid var(--r2l-flamingo);
  outline-offset: 3px;
}

/* ── Carte d'article ── */

.r2l-post {
  display: block;
  color: inherit;
  text-decoration: none;
}
.r2l-post:hover { color: inherit; }

.r2l-post__media,
.r2l-headline__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--r2l-card-radius);
  background: var(--r2l-sable-3);
}

.r2l-post__media img,
.r2l-headline__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--r2l-ease-reveal);
}

/* Le seul mouvement de la liste, et il est tenu : l'image se rapproche de
   deux pour cent. Rien ne se décale sous le curseur. */
.r2l-post:hover .r2l-post__media img,
.r2l-headline:hover .r2l-headline__media img {
  transform: scale(1.02);
}

.r2l-post__body { margin-top: 1.25rem; }

.r2l-post__meta,
.r2l-headline__meta,
.r2l-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .75rem;
  margin: 0 0 .75rem;
}

.r2l-post__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--r2l-charbon);
  transition: color var(--r2l-transition-sm);
}
.r2l-post:hover .r2l-post__title { color: var(--r2l-terre-sec); }

/* Chapô borné à deux lignes : assez pour décider d'ouvrir, sans pavé. */
.r2l-post__excerpt {
  margin: .875rem 0 0;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--r2l-terre-corps);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.r2l-post--petite .r2l-post__title {
  font-size: 1.0625rem;
  line-height: 1.35;
}

.r2l-post--large .r2l-post__title {
  font-size: clamp(1.375rem, 2vw, 1.75rem);
}

/* La rangée large est la seule où image et texte sont côte à côte : c'est
   ce qui la distingue et donne son accent au cycle. */
@media (min-width: 900px) {
  .r2l-post--large {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--r2l-s-6);
    align-items: center;
  }
  .r2l-post--large .r2l-post__body { margin-top: 0; }
}

/* ── Colonne de titres (blocs de rubrique) ── */

.r2l-titles {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--r2l-blog-filet);
}

.r2l-titles__item { border-bottom: 1px solid var(--r2l-blog-filet); }

.r2l-titles__link {
  display: block;
  padding-block: .9rem;
  color: inherit;
  text-decoration: none;
}
.r2l-titles__link:hover { color: inherit; }

.r2l-titles__title {
  display: block;
  font-family: var(--r2l-font-titres);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--r2l-charbon);
  transition: color var(--r2l-transition-sm);
}
.r2l-titles__link:hover .r2l-titles__title { color: var(--r2l-terre-sec); }

.r2l-titles__date {
  display: block;
  margin-top: .35rem;
}


/* ══════════════════════════════════════════════════════════════
   1. EN-TÊTE — le titre à gauche, les rubriques à droite
   ══════════════════════════════════════════════════════════════ */

/* ⚠️ Ne pas ré-ajouter var(--r2l-header-height) : nav.css pose déjà
   padding-top sur .r2l-main des pages sans hero plein écran. */
.r2l-blog-head {
  display: grid;
  gap: var(--r2l-s-6);
  padding-block: clamp(40px, 6vw, 72px) var(--r2l-s-6);
  margin-bottom: clamp(48px, 7vw, 80px);
  border-bottom: 1px solid var(--r2l-blog-filet);
}

.r2l-blog-head__lede { max-width: 36rem; }

.r2l-blog-head .r2l-eyebrow a {
  color: inherit;
  text-decoration: none;
}
.r2l-blog-head .r2l-eyebrow a:hover { color: var(--r2l-charbon); }

.r2l-blog-head__title {
  margin: 0;
  font-size: var(--r2l-text-h1);
  font-weight: var(--r2l-fw-h1);
  line-height: 1.08;
  letter-spacing: -.01em;
}

.r2l-blog-head__accent {
  font-style: italic;
  color: var(--r2l-accent-titre);
}

.r2l-blog-head__lead {
  margin: var(--r2l-s-3) 0 0;
  max-width: 32rem;
  color: var(--r2l-terre-corps);
}

.r2l-blog-head__label { margin: 0 0 var(--r2l-s-2); }

.r2l-blog-head__rubriques {
  margin: 0;
  padding: 0;
  list-style: none;
}

.r2l-blog-head__rubrique {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--r2l-s-2);
  padding-block: .65rem;
  border-bottom: 1px solid var(--r2l-blog-filet);
  font-weight: 500;
  color: var(--r2l-charbon);
  text-decoration: none;
  transition: color var(--r2l-transition-sm);
}
.r2l-blog-head__rubrique:hover { color: var(--r2l-terre-sec); }

/* La rubrique ouverte est marquée — encre et graisse, ni fond ni cadre. */
.r2l-blog-head__rubrique[aria-current="page"] {
  color: var(--r2l-terre-sec);
  font-weight: 700;
}

.r2l-blog-head__count {
  font-size: var(--r2l-text-caption);
  font-variant-numeric: tabular-nums;
  color: var(--r2l-terre-corps);
}

@media (min-width: 900px) {
  .r2l-blog-head {
    grid-template-columns: minmax(0, 1fr) 18rem;
    align-items: start;
    gap: var(--r2l-s-12);
  }
}

.r2l-blog-vide { color: var(--r2l-terre-corps); }


/* ══════════════════════════════════════════════════════════════
   2. LA UNE
   ══════════════════════════════════════════════════════════════ */

.r2l-blog-une {
  display: grid;
  gap: var(--r2l-s-8);
  margin-bottom: clamp(64px, 9vw, 104px);
}

.r2l-headline {
  display: block;
  color: inherit;
  text-decoration: none;
}
.r2l-headline:hover { color: inherit; }

.r2l-headline__title {
  margin: 0;
  font-size: clamp(1.625rem, 2.8vw, 2.375rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--r2l-charbon);
  transition: color var(--r2l-transition-sm);
}

.r2l-headline__excerpt {
  margin: var(--r2l-s-3) 0 0;
  max-width: 44rem;
  color: var(--r2l-terre-corps);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Côte à côte (repli) ── */

.r2l-headline--cote .r2l-headline__body { margin-top: var(--r2l-s-4); }
.r2l-headline--cote:hover .r2l-headline__title { color: var(--r2l-terre-sec); }

@media (min-width: 900px) {
  .r2l-headline--cote {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--r2l-s-6);
    align-items: center;
  }
  .r2l-headline--cote .r2l-headline__body { margin-top: 0; }
}

/* ── Bandeau : texte crème posé sur l'image, voile charbon ── */

.r2l-headline--bandeau {
  position: relative;
  isolation: isolate;
  --r2l-accent-titre: #C2A98F;
}

.r2l-headline--bandeau .r2l-headline__media { aspect-ratio: 21 / 9; }

.r2l-headline--bandeau .r2l-headline__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(44, 40, 42, .86) 0%,
    rgba(44, 40, 42, .5) 42%,
    rgba(44, 40, 42, .08) 78%
  );
}

.r2l-headline--bandeau .r2l-headline__body {
  position: absolute;
  inset: auto 0 0 0;
  max-width: 52rem;
  padding: clamp(24px, 4vw, 56px);
}

.r2l-headline--bandeau .r2l-headline__meta,
.r2l-headline--bandeau .r2l-headline__title,
.r2l-headline--bandeau .r2l-headline__excerpt {
  color: var(--r2l-sable-1);
}

.r2l-headline--bandeau .r2l-headline__rubric { color: var(--r2l-accent-titre); }

.r2l-headline--bandeau .r2l-headline__title { font-size: clamp(1.75rem, 3.4vw, 3rem); }

@media (max-width: 767px) {
  .r2l-headline--bandeau .r2l-headline__media { aspect-ratio: 4 / 5; }
}

/* ── Ouverture + secondaires (formes duo et trio) ──
   L'ouverture garde le visuel large ; les secondaires passent en lignes
   compactes, séparées par un filet, dans la colonne de droite. C'est la
   hiérarchie qui fait la une, pas la taille des images. */

.r2l-headline--lead .r2l-headline__body { margin-top: var(--r2l-s-3); }
.r2l-headline--lead .r2l-headline__title { font-size: clamp(1.5rem, 2.4vw, 2.125rem); }
.r2l-headline--lead:hover .r2l-headline__title { color: var(--r2l-terre-sec); }

.r2l-blog-une__cote {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.r2l-headline--compact {
  display: grid;
  grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr);
  gap: var(--r2l-s-3);
  align-items: center;
  padding-block: var(--r2l-s-3);
  border-top: 1px solid var(--r2l-blog-filet);
}
.r2l-blog-une__cote > :last-child { border-bottom: 1px solid var(--r2l-blog-filet); }

.r2l-headline--compact .r2l-headline__body { margin-top: 0; }
.r2l-headline--compact .r2l-headline__meta { margin-bottom: .4rem; }

.r2l-headline--compact .r2l-headline__title {
  font-size: 1.0625rem;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.r2l-headline--compact:hover .r2l-headline__title { color: var(--r2l-terre-sec); }

@media (min-width: 900px) {
  .r2l-blog-une--duo,
  .r2l-blog-une--trio {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: var(--r2l-s-6);
  }

  /* Les secondaires s'empilent EN HAUT de la colonne, calés sur le bord
     supérieur de l'image d'ouverture. Les répartir sur toute la hauteur
     (une moitié chacun) comblait le bas de la grille mais ouvrait de grands
     écarts et désalignait le premier : le vide se voyait plus que le rythme. */
  .r2l-blog-une--trio .r2l-blog-une__cote { align-content: start; }
}


/* ══════════════════════════════════════════════════════════════
   3. BLOCS DE RUBRIQUE (index)
   ══════════════════════════════════════════════════════════════ */

.r2l-blog-rubriques {
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 9vw, 96px);
  margin-bottom: clamp(72px, 10vw, 112px);
}
.r2l-blog-rubriques:empty { display: none; }

.r2l-rubric {
  scroll-margin-top: calc(var(--r2l-header-height) + var(--r2l-s-3));
}

.r2l-rubric__head {
  display: flex;
  align-items: baseline;
  gap: var(--r2l-s-2);
  padding-bottom: 1.25rem;
  margin-bottom: var(--r2l-s-4);
  border-bottom: 1px solid var(--r2l-blog-filet);
}

.r2l-rubric__title {
  margin: 0;
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.01em;
}

.r2l-rubric__title a {
  color: var(--r2l-charbon);
  text-decoration: none;
  transition: color var(--r2l-transition-sm);
}
.r2l-rubric__title a:hover { color: var(--r2l-terre-sec); }

/* Le compte est une mention, pas une donnée à lire. */
.r2l-rubric__count {
  font-size: var(--r2l-text-caption);
  font-variant-numeric: tabular-nums;
  color: var(--r2l-terre-corps);
}

.r2l-rubric__body,
.r2l-rubric__cards {
  display: grid;
  gap: var(--r2l-s-4);
}

.r2l-rubric__more {
  margin: var(--r2l-s-4) 0 0;
  text-align: right;
}

.r2l-rubric__explore {
  color: var(--r2l-terre-sec);
  text-decoration: none;
  transition: color var(--r2l-transition-sm);
}
.r2l-rubric__explore::after { content: "\00a0→"; }
.r2l-rubric__explore:hover { color: var(--r2l-charbon); }

@media (min-width: 600px) {
  .r2l-rubric__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Deux compositions à tour de rôle : la colonne de titres change de côté,
   ce qui suffit à ce que des rubriques successives ne se lisent pas comme
   la même page répétée. */
@media (min-width: 900px) {
  .r2l-rubric--aside .r2l-rubric__body {
    grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
    gap: var(--r2l-s-6);
  }
  .r2l-rubric--duo .r2l-rubric__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr);
    gap: var(--r2l-s-6);
  }
  .r2l-rubric--duo .r2l-rubric__cards { order: 2; }

  .r2l-rubric--sans-titres .r2l-rubric__body { grid-template-columns: minmax(0, 1fr); }
}


/* ══════════════════════════════════════════════════════════════
   4. FLUX (rubrique) — duo · trio · large
   ══════════════════════════════════════════════════════════════ */

/* Deux espacements : serré dans un cycle, doublé après la rangée large
   (filet). Un intervalle unique rendait trois blocs sans lien, et le
   motif ne se voyait pas. */
.r2l-blog-flux {
  display: flex;
  flex-direction: column;
  gap: 3.25rem;
  margin-bottom: clamp(72px, 10vw, 112px);
}
.r2l-blog-flux:last-child { margin-bottom: 0; }

.r2l-blog-flux__row {
  display: grid;
  gap: var(--r2l-s-4);
}

.r2l-blog-flux__row--large { padding-bottom: 3.25rem; }
.r2l-blog-flux__row--large:not(:last-child) { border-bottom: 1px solid var(--r2l-blog-filet); }

@media (min-width: 600px) {
  .r2l-blog-flux__row--duo,
  .r2l-blog-flux__row--trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .r2l-blog-flux__row--trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ══════════════════════════════════════════════════════════════
   5. TRAÎNE — une ligne par article
   ══════════════════════════════════════════════════════════════ */

.r2l-blog-archive__title { margin: 0 0 var(--r2l-s-3); }

.r2l-blog-archive__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--r2l-blog-filet);
}

.r2l-blog-archive__item { border-bottom: 1px solid var(--r2l-blog-filet); }

.r2l-blog-archive__link {
  display: grid;
  gap: .25rem;
  padding-block: .9rem;
  color: inherit;
  text-decoration: none;
}
.r2l-blog-archive__link:hover { color: inherit; }

.r2l-blog-archive__titre {
  font-weight: 500;
  line-height: 1.4;
  color: var(--r2l-charbon);
  transition: color var(--r2l-transition-sm);
}
.r2l-blog-archive__link:hover .r2l-blog-archive__titre { color: var(--r2l-terre-sec); }

.r2l-blog-archive__rubric { display: none; }

@media (min-width: 768px) {
  .r2l-blog-archive__link {
    grid-template-columns: 10rem minmax(0, 1fr) auto;
    gap: var(--r2l-s-4);
    align-items: baseline;
  }
  .r2l-blog-archive__rubric {
    display: block;
    text-align: right;
  }
}


/* ══════════════════════════════════════════════════════════════
   6. ARTICLE — colonne de lecture centrée, sommaire en marge
   ══════════════════════════════════════════════════════════════ */

.r2l-article {
  display: grid;
  grid-template-columns: minmax(0, var(--r2l-blog-mesure));
  justify-content: center;
  padding-block: clamp(40px, 6vw, 72px) clamp(64px, 9vw, 112px);
}

.r2l-article__col { min-width: 0; }
.r2l-article__aside { display: none; }

.r2l-article__head { margin-bottom: var(--r2l-s-6); }

.r2l-article__meta { margin-bottom: 1.25rem; }

.r2l-article__rubric {
  text-decoration: none;
  transition: color var(--r2l-transition-sm);
}
.r2l-article__rubric:hover { color: var(--r2l-charbon); }

.r2l-article__title {
  margin: 0;
  font-size: clamp(1.875rem, 4vw, 2.875rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.02em;
}

/* Le chapô tient lieu de chapeau : un cran sous le titre, un cran au-dessus du corps. */
.r2l-article__lead {
  margin: var(--r2l-s-3) 0 0;
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--r2l-terre-corps);
}

/* Deux plafonds, le plus petit gagne : la colonne, et la largeur réelle du fichier. */
.r2l-article__cover {
  margin: 0 0 3.5rem;
  max-width: min(100%, var(--r2l-media-w, 100%));
}

.r2l-article__cover img {
  width: 100%;
  height: auto;
  border-radius: var(--r2l-card-radius);
}

/* ── Sommaire ── */

.r2l-toc__label {
  margin: 0 0 1rem;
  padding-bottom: .875rem;
  border-bottom: 1px solid var(--r2l-blog-filet);
}

.r2l-toc__list {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.r2l-toc__link {
  display: block;
  font-size: var(--r2l-text-caption);
  line-height: 1.4;
  color: var(--r2l-terre-corps);
  text-decoration: none;
  transition: color var(--r2l-transition-sm);
}

.r2l-toc__link:hover { color: var(--r2l-charbon); }

/* Section lue — encre charbon et graisse, jamais d'orange. */
.r2l-toc__link[aria-current="true"] {
  color: var(--r2l-charbon);
  font-weight: 700;
}

.r2l-article__back {
  display: block;
  margin-bottom: 2.25rem;
  color: var(--r2l-terre-sec);
  text-decoration: none;
  transition: color var(--r2l-transition-sm);
}
.r2l-article__back::before { content: "←\00a0"; }
.r2l-article__back:hover { color: var(--r2l-charbon); }

/* Le sommaire n'apparaît que lorsque la marge peut le porter sans serrer la
   colonne de lecture. Trois vraies colonnes, marges égales ; une colonne de
   grille s'étire sur toute la hauteur de l'article, ce qui donne au sommaire
   collé de quoi suivre la lecture jusqu'au bout. */
@media (min-width: 1100px) {
  .r2l-article {
    grid-template-columns: 1fr minmax(0, var(--r2l-blog-mesure)) 1fr;
    justify-content: initial;
  }
  .r2l-article__aside {
    display: block;
    grid-column: 1;
    justify-self: end;
    width: 13rem;
    padding-right: var(--r2l-s-6);
  }
  .r2l-article__col { grid-column: 2; }

  .r2l-toc {
    position: sticky;
    top: calc(var(--r2l-header-height) + var(--r2l-s-6));
    max-height: calc(100vh - var(--r2l-header-height) - 6rem);
    overflow-y: auto;
  }
}

/* ── Corps (Gutenberg) ── */

.r2l-article__corps {
  font-size: var(--r2l-text-corps);
  line-height: 1.7;
  color: var(--r2l-terre-corps);
}

.r2l-article__corps > * { margin-block: 0 1.5rem; }
.r2l-article__corps > :last-child { margin-bottom: 0; }

.r2l-article__corps h2 {
  margin: 3rem 0 1rem;
  font-size: var(--r2l-text-h2);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
  /* Destination du saut d'ancre : le titre s'arrête sous le header fixe. */
  scroll-margin-top: calc(var(--r2l-header-height) + var(--r2l-s-4));
}

.r2l-article__corps h3 {
  margin: 2.25rem 0 .75rem;
  font-size: var(--r2l-text-h3);
  font-weight: 600;
}

.r2l-article__corps a {
  color: var(--r2l-charbon);
  text-decoration: underline;
  text-decoration-color: var(--r2l-terre-sec);
  text-underline-offset: .2em;
}
.r2l-article__corps a:hover { color: var(--r2l-terre-sec); }

.r2l-article__corps strong {
  font-weight: 700;
  color: var(--r2l-charbon);
}

.r2l-article__corps :is(ul, ol) { padding-left: 1.25rem; }
.r2l-article__corps li + li { margin-top: .5rem; }
.r2l-article__corps li::marker { color: var(--r2l-terre-sec); }

/* Citation — un moment d'émotion : Cabinet italique (charte §11). */
.r2l-article__corps blockquote {
  margin: 2.5rem 0;
  padding: 0 0 0 var(--r2l-s-3);
  border-left: 2px solid var(--r2l-terre-sec);
  font-family: var(--r2l-font-titres);
  font-size: 1.375rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--r2l-charbon);
}
.r2l-article__corps blockquote p { margin: 0; }
.r2l-article__corps blockquote cite {
  display: block;
  margin-top: .75rem;
  font-family: var(--r2l-font-corps);
  font-size: var(--r2l-text-caption);
  font-style: normal;
  color: var(--r2l-terre-sec);
}

.r2l-article__corps figure { margin-inline: 0; }
.r2l-article__corps figure img { border-radius: var(--r2l-card-radius); }

.r2l-article__corps .wp-element-caption,
.r2l-article__corps figcaption {
  margin: .6rem 0 0;
  font-size: var(--r2l-text-caption);
  line-height: 1.5;
  text-align: left;
  color: var(--r2l-terre-corps);
}

.r2l-article__corps hr {
  margin-block: 3rem;
  border: 0;
  border-top: 1px solid var(--r2l-blog-filet);
}

@media (max-width: 767px) {
  .r2l-article__cover { margin-bottom: 2.5rem; }
}


/* ══════════════════════════════════════════════════════════════
   7. CONTINUEZ VOTRE LECTURE
   ══════════════════════════════════════════════════════════════ */

.r2l-blog-suite {
  padding-bottom: var(--r2l-rythme-inter);
}

.r2l-blog-suite__head {
  padding-top: 3.5rem;
  margin-bottom: 2.5rem;
  border-top: 1px solid var(--r2l-blog-filet);
}

.r2l-blog-suite__title {
  margin: 0;
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  font-weight: 600;
  line-height: 1.15;
}

/* La bande déborde volontairement dans la gouttière droite : la carte
   suivante est amorcée par le bord de l'écran, pas par un vide. */
.r2l-blog-suite__strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 20rem);
  gap: var(--r2l-s-4);
  margin: 0 calc(-1 * var(--r2l-gutter)) 0 0;
  padding: 0 var(--r2l-gutter) 1rem 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.r2l-blog-suite__strip::-webkit-scrollbar { display: none; }

.r2l-blog-suite__item { scroll-snap-align: start; }

@media (min-width: 768px) {
  .r2l-blog-suite__strip { grid-auto-columns: minmax(17rem, 22rem); }
}