/* ══════════════════════════════════════════════════════════════
   LDNR — Composant "Carrousel d'articles" (shortcode [ldnr_articles])
   Carrousel horizontal en CSS natif : flex + overflow-x + scroll-snap.
   Aucune librairie, et surtout aucun JS dans le défilement lui-même —
   le scroll tactile et le snap sont 100% natifs, ce qui évite les
   déboires WebKit/iPad déjà rencontrés ailleurs sur ce thème. Le JS
   (blog-carousel.js) ne fait qu'ajouter les flèches, les points de
   pagination et le drag souris par-dessus, en pur bonus desktop.
   Tokens bridgés sur colors.css — scopé sous .ldnr-articles.
   ══════════════════════════════════════════════════════════════ */

.ldnr-articles {
  --ease:      cubic-bezier(.2, .8, .2, 1);
  --radius-l:  28px;
  --gap:       18px;
  /* Cartes visibles : 3 desktop → 2 tablette → 1 mobile (voir Responsive) */
  --par-vue:   3;

  position: relative;
}

/* ── Piste ───────────────────────────────────────────────────── */
.ldnr-articles__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* Marge de respiration pour que l'ombre/le hover des cartes ne soient
     pas rognés par le conteneur qui scrolle. */
  padding: 6px 2px 18px;
  margin: 0 -2px;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;
}
.ldnr-articles__viewport::-webkit-scrollbar { display: none; }

/* Pendant un drag souris : on coupe le snap et le smooth, sinon le
   scrollLeft imposé par le JS se fait reprendre par le navigateur. */
.ldnr-articles.is-dragging .ldnr-articles__viewport {
  scroll-snap-type: none;
  scroll-behavior: auto;
  cursor: grabbing;
}

/* Sélecteur volontairement renforcé (+ !important) : le thème applique aux
   listes du contenu un padding-left de 2em, qui l'emportait sur un simple
   "padding: 0". Conséquence mesurée en prod : la boîte de contenu de la
   piste perdait 34px, les cartes — dimensionnées en % de cette boîte —
   rétrécissaient d'autant, et les 34px libérés à droite laissaient
   apparaître un bout de la 4e carte. La géométrie du carrousel ne peut pas
   dépendre des styles de liste du thème. */
ul.ldnr-articles__track,
.ldnr-articles .ldnr-articles__track {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none;
}

.ldnr-articles__track {
  display: flex;
  gap: var(--gap);
  /* La piste doit faire exactement la largeur du viewport : les cartes se
     dimensionnent dessus, donc toute contrainte héritée (max-width) la
     désaligne du viewport et rouvre le même trou à droite. */
  width: 100%;
  max-width: none;
  min-width: 0;
}

.ldnr-articles__item {
  /* Largeur calibrée en pixels par le JS (--carte-w) à partir de la largeur
     RÉELLEMENT visible du viewport : c'est la seule façon de garantir
     "exactement 3 cartes". Le calcul en % ci-dessous n'est qu'un repli sans
     JS — il se fait fausser dès qu'une règle du thème rétrécit la piste,
     et la 4e carte vient alors dépasser dans l'espace restant. */
  flex: 0 0 var(--carte-w, calc((100% - (var(--par-vue) - 1) * var(--gap)) / var(--par-vue)));
  scroll-snap-align: start;
  display: flex;                  /* étire la carte sur toute la hauteur */
  margin: 0;
}


/* ── Carte ───────────────────────────────────────────────────── */
.ldnr-article {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: var(--radius-l);
  overflow: hidden;               /* rogne l'image sur les coins arrondis */
  text-decoration: none;
  color: var(--color-text);
  transition: transform 0.6s var(--ease);
}
.ldnr-article:hover,
.ldnr-article:focus-visible {
  transform: translateY(-4px);
  text-decoration: none;
}

/* Liquid glass — fond/bordure/reflets gérés par .lg, on n'ajuste que la
   teinte (même recette que .ldnr-stat).
   Volontairement SANS "lg--card" : ce modificateur de forme impose un
   padding de 1.5rem, alors qu'ici l'image doit venir à fleur du bord (le
   padding vit dans __body). On garde donc .lg seul, dont le --lg-radius
   par défaut vaut 28px — d'où le --radius-l identique plus haut, pour que
   la displacement map SVG reste alignée sur le border-radius réel. */
.ldnr-article.lg {
  padding: 0;
  --lg-tint: color-mix(in srgb, var(--color-accent) 7%, rgba(255, 255, 255, .05));
}
[data-theme="light"] .ldnr-article.lg {
  --lg-tint: color-mix(in srgb, var(--color-accent) 10%, rgba(255, 255, 255, .5));
}
.ldnr-article.lg:hover {
  --lg-tint: color-mix(in srgb, var(--color-accent) 14%, rgba(255, 255, 255, .05));
}

/* ── Image mise en avant ─────────────────────────────────────── */
.ldnr-article__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  flex: 0 0 auto;
}
.ldnr-article__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.ldnr-article:hover .ldnr-article__img {
  transform: scale(1.06);
}
/* Repli quand l'article n'a pas d'image mise en avant */
.ldnr-article__img--vide {
  background:
    radial-gradient(120% 120% at 20% 0%,
      color-mix(in srgb, var(--color-accent) 32%, transparent) 0%,
      color-mix(in srgb, var(--color-accent-2) 22%, transparent) 55%,
      transparent 100%),
    var(--color-surface);
}

.ldnr-article__time {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 2;
  font-size: 0.72rem;
  padding: 0.3rem 0.7rem;
}

/* ── Corps ───────────────────────────────────────────────────── */
.ldnr-article__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px 22px;
  position: relative;             /* passe au-dessus du reflet de .lg */
  flex: 1 1 auto;
}

.ldnr-article__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ldnr-article__pills .pill-label {
  font-size: 0.7rem;
  padding: 0.25rem 0.65rem;
}

.ldnr-article__title {
  margin: 2px 0 0;
  font-family: var(--font-ui);
  font-size: 1.12rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-text);
  /* Titre sur 2 lignes max — garde toutes les cartes alignées */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ldnr-article__excerpt {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ldnr-article__more {
  margin-top: auto;               /* collé en bas quel que soit le texte */
  padding-top: 6px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-accent);
}
.ldnr-article__more::after {
  content: "→";
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.4s var(--ease);
}
.ldnr-article:hover .ldnr-article__more::after {
  transform: translateX(4px);
}

/* ── Contrôles (flèche ‹ · points · flèche ›) ─────────────────── */
.ldnr-articles__controls {
  display: flex;
  align-items: center;
  justify-content: center;        /* le trio est centré sous la piste */
  gap: 16px;
  margin-top: 18px;
}
/* Piste plus large que le viewport = pas de scroll possible : le JS pose
   cette classe et les contrôles disparaissent (peu d'articles publiés). */
.ldnr-articles.is-static .ldnr-articles__controls { display: none; }

/* Points de pagination — un par page de cartes, injectés par le JS. */
.ldnr-articles__dots {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ldnr-articles__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: color-mix(in srgb, var(--color-text) 22%, transparent);
  transition: background 0.3s ease, width 0.3s var(--ease);
}
.ldnr-articles__dot:hover {
  background: color-mix(in srgb, var(--color-text) 40%, transparent);
}
/* Le point actif s'allonge en petite capsule : lisible même en un coup
   d'œil, et sans dépendre uniquement de la couleur. */
.ldnr-articles__dot.is-active {
  width: 22px;
  background: var(--color-accent);
}

.ldnr-articles__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  cursor: pointer;
  color: var(--color-text);
  background: transparent;        /* le fond vient de .lg */
  transition: transform 0.3s var(--ease);
}
/* Jamais désactivées : elles bouclent en bout de piste (voir le JS). */
.ldnr-articles__arrow:hover { transform: translateY(-2px); }

/* ── Bouton "voir tous les articles" ────────────────────────── */
.ldnr-articles__cta {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .ldnr-articles { --par-vue: 2; }
}
@media (max-width: 600px) {
  .ldnr-articles {
    --par-vue: 1;
    --gap: 14px;
  }
}

/* ── Accessibilité ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ldnr-articles__viewport {
    scroll-behavior: auto;
    scroll-snap-type: x proximity;
  }
  .ldnr-article,
  .ldnr-article__img,
  .ldnr-article__more::after,
  .ldnr-articles__arrow,
  .ldnr-articles__dot {
    transition: none;
  }
  .ldnr-article:hover { transform: none; }
  .ldnr-article:hover .ldnr-article__img { transform: none; }
}