/* Section spacing */
section + section { margin-top: 2.5rem; }

.key-figures-container {
    max-width: 1200px;
    margin: 4rem auto;
    padding: 0 2rem;
    text-align: center;
}

.key-figures-title {
    font-size: 2rem;
    margin-bottom: 2rem;
    color: #333;
    font-weight: 600;
}

.key-figures-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
}

.key-figure-card {
    background: linear-gradient(135deg, #f9f9f9, #ffffff);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    transition: transform 0.2s ease;
}

.key-figure-card:hover {
    transform: translateY(-5px);
}

.key-figure-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-color, #B42E5E);
    margin-bottom: 1rem;
}

.key-figure-description {
    font-size: 1rem;
    color: #555;
}


/* ---------- KeyFigure minimal UI ---------- */
img.object-fit-cover,
video.object-fit-cover,
.object-fit-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== Cartes KeyFigure avec texte de hauteur homogène ===== */
.kf-card {
  display: flex; flex-direction: column; height: 100%;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: .75rem;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}

.kf-card .kf-text, 
.kf-card .kf-prose {    /* tes variantes utilisent souvent .kf-prose */
  margin-top: .5rem;
  min-height: var(--kf-text-min-h, 4.5rem); /* ajustable depuis le conteneur parent */
}
.kf-card .btn, 
.kf-card .cta { margin-top: auto; } /* si un CTA existe, il reste en bas */

.kf-prose {
  color: #111827;
  font-size: 0.95rem;
  line-height: 1.6;
}
.kf-prose > :where(p, ul, ol, blockquote, pre, img, table, figure) {
  margin-top: .5rem;
  margin-bottom: .5rem;
}
.kf-prose h1, .kf-prose h2, .kf-prose h3, .kf-prose h4 {
  line-height: 1.25;
  margin-top: 1rem;
  margin-bottom: .5rem;
}
.kf-prose h1 { font-size: clamp(1.4rem, 2.5vw, 1.9rem); }
.kf-prose h2 { font-size: clamp(1.25rem, 2.0vw, 1.6rem); }
.kf-prose h3 { font-size: clamp(1.15rem, 1.8vw, 1.3rem); }

.kf-quote {
  border-left: 4px solid #2563eb;
  padding-left: .75rem;
  color: #374151;
}

.kf-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .6rem;
  border-radius: .75rem;
  border: 1px solid #e5e7eb;
  background: #fff;
}



/* timeline (variant v9) */
.kf-timeline {
  position: relative;
  padding-left: 1rem;
}
.kf-timeline::before {
  content: "";
  position: absolute;
  left: .25rem;
  top: 0; bottom: 0;
  width: 2px;
  background: rgba(37,99,235,.25);
}
.kf-timeline .dot {
  width: .75rem; height: .75rem;
  border-radius: 50%;
  background: #2563eb;
  position: absolute; left: -.125rem;
  transform: translateX(-50%);
}

/* media ratio helpers in case Bootstrap missing */
.ratio { position: relative; width: 100%; }
.ratio > * { position: absolute; inset: 0; }
.ratio-16x9 { padding-top: 56.25%; }
.ratio-4x3  { padding-top: 75%; }
.ratio-21x9 { padding-top: 42.857%; }
.ratio-1x1  { padding-top: 100%; }

@media (prefers-color-scheme: dark) {
  .kf-card, .kf-badge, .kf-stat { background: #fff; }
  .kf-prose { color: #0b1220; }
  .kf-prose h1, .kf-prose h2, .kf-prose h3, .kf-prose h4 { color: #0b1220; }
}


.kf-stat {
  text-align: center;
  /* padding: 1rem; */
  /* border-radius: .75rem; */
  background: #fff;
  /* border: 1px solid #eef2f7; */
  /* box-shadow: inset 0 0 0 1px rgba(37,99,235,.06); */
}

.kf-stat .label { color: #374151; }

/* ===== Highlight : cadre couleur secondaire du pilier ===== */
.kf-stat .value {
  display: inline-block;
  /* padding: .25rem .6rem; */
  /* border: 2px solid var(--pillar-secondary, #6c757d); */
  font-weight: 800;
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  color: var(--pillar-secondary, #6c757d);
  line-height: 1.1;
}