/* ══════════════════════════════════════════════════════════════
   LDNR — Composant "Chiffres clés" (shortcode [ldnr_stats])
   Grille de cartes statistiques avec compteur animé au scroll.
   Tokens bridgés sur colors.css — scopé sous .ldnr-stats-grid.
   ══════════════════════════════════════════════════════════════ */

.ldnr-stats-grid {
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
  --ease:      cubic-bezier(.2, .8, .2, 1);
  --radius-l:  28px;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.ldnr-stat {
  position: relative;
  padding: 36px 28px 32px;
  border-radius: var(--radius-l);
  overflow: hidden;
  transition: transform 0.6s var(--ease);
}
.ldnr-stat:hover {
  transform: translateY(-4px);
}
/* Liquid glass léger — fond/bordure/reflets gérés par .lg, on ne fait
   qu'ajuster la teinte pour rester subtil et l'intensifier au survol. */
.ldnr-stat.lg {
  --lg-tint: color-mix(in srgb, var(--color-accent) 7%, rgba(255, 255, 255, .05));
}
[data-theme="light"] .ldnr-stat.lg {
  --lg-tint: color-mix(in srgb, var(--color-accent) 10%, rgba(255, 255, 255, .5));
}
.ldnr-stat.lg:hover {
  --lg-tint: color-mix(in srgb, var(--color-accent) 14%, rgba(255, 255, 255, .05));
}

.ldnr-stat__key {
  position: relative;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 22px;
}

.ldnr-stat__num {
  position: relative;
  /* Taille de base — stats.js la réduit ponctuellement (font-size inline)
     quand la valeur + son suffixe dépasseraient la largeur de la carte,
     pour tout garder sur UNE seule ligne. */
  font-size: clamp(44px, 4.5vw, 68px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  display: flex;
  flex-wrap: nowrap;      /* jamais de retour à la ligne du suffixe */
  align-items: baseline;
  column-gap: 6px;
  color: var(--color-text);
  white-space: nowrap;
}
.ldnr-stat__num > span { flex-shrink: 0; } /* garde la largeur intrinsèque → dépassement mesurable */
.ldnr-stat__suffix {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.24em;
  color: var(--color-accent);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.ldnr-stat__label {
  position: relative;
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--color-text-muted);
  max-width: 22ch;
  line-height: 1.4;
}

/* ── Reveal au scroll — autonome (indépendant des autres composants) ── */
.ldnr-stats-grid .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s cubic-bezier(.16, 1, .3, 1), transform 1.1s cubic-bezier(.16, 1, .3, 1);
}
.ldnr-stats-grid .reveal.is-in { opacity: 1; transform: translateY(0); }
.ldnr-stats-grid .reveal[data-delay="1"] { transition-delay: .08s; }
.ldnr-stats-grid .reveal[data-delay="2"] { transition-delay: .16s; }
.ldnr-stats-grid .reveal[data-delay="3"] { transition-delay: .24s; }
.ldnr-stats-grid .reveal[data-delay="4"] { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  .ldnr-stats-grid .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .ldnr-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .ldnr-stats-grid { grid-template-columns: 1fr; }
}