/* ===== BREACHES.AFRICA — Statistiques (Savanna Night) ===== */

.stats-page{
  position:relative;
  padding:48px 0 80px;
  background:
    radial-gradient(1200px 600px at 85% -100px, rgba(217,164,77,0.08), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(231,111,81,0.06), transparent 60%),
    var(--bg-primary);
}
.stats-page::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M22 10l6 12 12 6-12 6-6 12-6-12-12-6 12-6z' fill='none' stroke='rgba(230,180,90,0.055)'/%3E%3C/svg%3E");
}
.stats-page .container{position:relative;z-index:1}

/* ===== Hero ===== */
.stats-hero{
  position:relative;overflow:hidden;border-radius:22px;
  padding:44px 48px 38px;margin-bottom:26px;
  background:linear-gradient(128deg,#E76F51 0%,#D98A4D 34%,#D9A44D 72%,#C9A84C 100%);
  box-shadow:0 18px 50px rgba(120,50,20,0.35);
}
.stats-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:22px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='22'%3E%3Cpath d='M0 2 L15 20 L30 2 L45 20 L60 2 L75 20 L90 2 L105 20 L120 2' fill='none' stroke='rgba(255,246,233,0.35)' stroke-width='2.4'/%3E%3C/svg%3E");
  background-size:120px 22px;opacity:.8;
}
.stats-hero-sun{
  position:absolute;top:-90px;right:-70px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,246,233,0.55),rgba(255,246,233,0.08) 55%,transparent 72%);
}
.stats-hero-inner{position:relative;z-index:2;max-width:820px}
.stats-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,246,233,0.85);margin-bottom:14px;
}
.stats-eyebrow::before{content:"";width:26px;height:2px;background:rgba(255,246,233,0.6)}
.stats-hero h1{
  font-family:'Fraunces',var(--font-display);font-weight:700;
  font-size:clamp(2rem,4.5vw,3.1rem);line-height:1.08;letter-spacing:-.01em;
  color:#FFF6E9;margin-bottom:10px;text-shadow:0 2px 18px rgba(90,30,0,0.25);
}
.stats-hero p{font-size:1.02rem;color:rgba(255,246,233,0.88);max-width:600px;margin-bottom:26px}
.stats-years{display:flex;gap:8px;flex-wrap:wrap}
.bead{
  display:inline-flex;align-items:center;padding:7px 16px;border-radius:999px;
  border:1px solid rgba(255,246,233,0.35);background:rgba(120,50,20,0.18);
  color:#FFF6E9;font-size:.8rem;font-weight:600;letter-spacing:.03em;
  transition:all .18s var(--ease-out);
}
.bead:hover{background:rgba(255,246,233,0.18);color:#fff;border-color:rgba(255,246,233,0.6)}
.bead.active{background:#FFF6E9;color:#A34A24;border-color:#FFF6E9;box-shadow:0 4px 14px rgba(90,30,0,0.25)}

/* ===== KPI ===== */
.kpi-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:26px}
.kpi{
  position:relative;overflow:hidden;border-radius:16px;padding:20px 18px 16px;
  background:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.08);
  border-top:3px solid var(--kpi-c);
  transition:transform .2s var(--ease-out),border-color .2s;
}
.kpi:hover{transform:translateY(-3px);border-color:rgba(255,255,255,0.16)}
.kpi::before{
  content:"";position:absolute;right:-14px;top:-14px;width:52px;height:52px;transform:rotate(45deg);
  background:var(--kpi-c);opacity:.12;border-radius:8px;
}
.kpi--terracotta{--kpi-c:#E76F51}
.kpi--gold{--kpi-c:#D9A44D}
.kpi--green{--kpi-c:#7C9A6D}
.kpi--indigo{--kpi-c:#5B7FFF}
.kpi--red{--kpi-c:#D7263D}
.kpi-icon{
  width:40px;height:40px;border-radius:11px;display:grid;place-items:center;margin-bottom:14px;
  background:color-mix(in srgb,var(--kpi-c) 16%,transparent);
  color:var(--kpi-c);
}
.kpi-value{font-family:var(--font-display);font-weight:700;font-size:1.65rem;line-height:1;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.kpi-label{font-size:.76rem;color:var(--text-secondary);margin-top:6px;letter-spacing:.02em}

/* ===== Panels ===== */
.charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:26px}
.panel{
  position:relative;border-radius:18px;padding:22px;
  background:linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.015));
  border:1px solid rgba(255,255,255,0.08);
  transition:border-color .2s;
}
.panel:hover{border-color:rgba(217,164,77,0.25)}
.panel--wide{grid-column:1/-1}
.panel-head{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.panel-tick{width:5px;height:20px;border-radius:3px;background:linear-gradient(180deg,#E76F51,#D9A44D)}
.panel-kicker{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted)}
.panel-title{font-family:var(--font-display);font-weight:600;font-size:.95rem}
.panel-head .panel-kicker{position:absolute;right:56px}
.panel-body{position:relative;height:280px}
.panel--wide .panel-body{height:240px}
.panel-toggle{
  margin-left:auto;flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  cursor:pointer;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);
  color:#c9b89a;transition:all .18s var(--ease-out);
}
.panel-toggle:hover{color:#FFF6E9;border-color:rgba(217,164,77,0.4)}
.panel.collapsed .panel-body,
.panel.collapsed .table-wrap{display:none}
.panel.collapsed .panel-toggle svg{transform:rotate(-90deg)}
canvas{max-width:100%}

/* ===== Table ===== */
.table-wrap{overflow-x:auto;margin:0 -4px}
.stats-table{width:100%;border-collapse:collapse}
.stats-table th{
  text-align:left;padding:10px 12px;font-family:var(--font-mono);font-size:.66rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);
  border-bottom:1px solid rgba(217,164,77,0.18);
}
.stats-table td{padding:12px;font-size:.86rem;border-bottom:1px solid rgba(255,255,255,0.05)}
.stats-table tbody tr{transition:background .15s}
.stats-table tbody tr:hover{background:rgba(217,164,77,0.05)}
.stats-table tbody tr:last-child td{border-bottom:0}
.rank{
  display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;
  font-family:var(--font-display);font-weight:700;font-size:.72rem;color:#FFF6E9;
  background:linear-gradient(135deg,#E76F51,#B5522B);
}
.stats-table .num{text-align:right}
.stats-table a{color:#D9A44D;font-weight:600}
.stats-table a:hover{color:#E76F51;text-decoration:underline}
.stats-table .mono{font-family:var(--font-mono);font-size:.76rem;color:var(--text-secondary)}
.stats-table .country{color:var(--text-secondary);font-size:.8rem}
.chip{
  display:inline-block;padding:3px 10px;border-radius:999px;font-size:.68rem;font-weight:600;
  color:#E7C98F;background:rgba(217,164,77,0.12);border:1px solid rgba(217,164,77,0.25);
}

/* ===== Responsive ===== */
@media(max-width:900px){
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .charts-grid{grid-template-columns:1fr}
  .panel--wide{grid-column:auto}
  .stats-hero{padding:36px 24px 34px}
}
@media(max-width:480px){
  .kpi-grid{grid-template-columns:1fr}
  .stats-page{padding:24px 0 60px}
}