/* Section « Chiffres clés » de l'accueil (FR + EN) — motion design, nov. 2026.
   Préfixe kf- : volontairement distinct de .stat/.stats (le fade-in de main.js
   cible .stat et entrerait en conflit avec ces animations). */
.kf-traj{margin-top:2.75rem;background:var(--green);color:var(--white);border-radius:var(--radius);padding:2.5rem clamp(1.25rem,4vw,3rem) 2rem;box-shadow:6px 6px 0 var(--gold);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2.5rem;align-items:center}
.kf-head{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;grid-column:1/-1}
.kf-eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.kf-legend{display:flex;gap:1.1rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.kf-legend i{display:inline-block;width:22px;height:0;border-top:3px solid var(--gold);vertical-align:middle;margin-right:6px}
.kf-legend .kf-dash i{border-top-style:dashed}
.kf-timeline{min-width:0}
.kf-timeline svg{display:block;width:100%;height:auto;overflow:visible}
.kf-done{stroke:var(--gold);stroke-width:4;fill:none}
.kf-goal{stroke:var(--gold);stroke-width:4;fill:none;stroke-dasharray:10 9}
.kf-node{fill:var(--green);stroke:var(--gold);stroke-width:4;transform-box:fill-box;transform-origin:center}
.kf-node.kf-now{fill:var(--gold)}
.kf-pulse{fill:none;stroke:var(--gold);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.kf-points{display:grid;grid-template-columns:repeat(3,1fr);margin-top:.9rem}
.kf-pt{text-align:center}
.kf-pt:first-child{text-align:left}
.kf-pt:last-child{text-align:right}
.kf-pt .kf-num{font-family:var(--display);font-size:clamp(2.4rem,6vw,4.2rem);line-height:1;font-variant-numeric:tabular-nums;display:block;color:var(--white)}
.kf-yr{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);display:block;margin-top:.5rem}
.kf-lbl{font-size:.88rem;color:rgba(255,255,255,.8);display:block;line-height:1.45}
.kf-ringbox{text-align:center;width:180px}
.kf-ring{width:150px;height:150px;position:relative;margin:0 auto}
.kf-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.kf-ring .kf-bg{stroke:rgba(255,255,255,.14);stroke-width:10;fill:none}
.kf-ring .kf-fg{stroke:var(--gold);stroke-width:10;fill:none}
.kf-ring .kf-num{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-size:2rem;font-variant-numeric:tabular-nums;color:var(--white)}
.kf-ringbox .kf-cap{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8);display:block;margin-top:.75rem;line-height:1.5}
.kf-note{grid-column:1/-1;font-size:.82rem;color:rgba(255,255,255,.72) !important;border-top:1px solid rgba(255,255,255,.16);padding-top:1rem;margin:0}

.kf-ctx{margin-top:4.5rem}
.kf-ctx h3{margin:0 0 .4rem}
.kf-ctx .kf-intro{max-width:640px;margin:0}
.kf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;margin-top:2rem}
.kf-cmp{border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem 1.5rem 1.35rem;background:var(--white);display:grid;gap:.9rem;min-width:0}
.kf-cmp.kf-flag{background:var(--gold-light);border-color:#E6D3A3}
.kf-title{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text);margin:0}
.kf-row{display:grid;grid-template-columns:118px minmax(0,1fr) 64px;align-items:center;gap:.75rem}
.kf-who{font-size:.86rem;color:var(--muted);line-height:1.35}
.kf-row.kf-us .kf-who{color:var(--text);font-weight:600}
.kf-bar{height:22px;background:var(--ivory);border-radius:3px;overflow:hidden}
.kf-bar span{display:block;height:100%;width:var(--w);background:#C9C9C9;transform-origin:left;border-radius:3px}
.kf-row.kf-us .kf-bar span{background:var(--green)}
.kf-val{font-family:var(--display);font-size:1.35rem;text-align:right;font-variant-numeric:tabular-nums;color:var(--text)}
.kf-gap{font-size:.86rem;color:var(--text);margin:.1rem 0 0}
.kf-gap b{font-family:var(--display);font-weight:400;color:var(--gold-text)}
.kf-flag .kf-gap b{color:var(--text)}
.kf-sources{font-size:.82rem;color:var(--muted);margin:1.75rem 0 0;max-width:860px}
.kf-sources a{text-decoration:underline}

@media (max-width:820px){
  .kf-traj{grid-template-columns:1fr}
  .kf-ringbox{margin:0 auto}
  .kf-grid{grid-template-columns:1fr}
}
@media (max-width:460px){
  .kf-row{grid-template-columns:92px minmax(0,1fr) 52px;gap:.5rem}
  .kf-val{font-size:1.1rem}
  .kf-lbl{font-size:.78rem}
}