/* ============================================================
   Code Promo Africa — couche design moderne (2026)
   Chargée après site-refresh.css : ne modifie pas la structure HTML.
   ============================================================ */
:root{
  --m-ink:#101828;
  --m-ink-soft:#475467;
  --m-brand:#1257d6;
  --m-brand-dark:#0b3b96;
  --m-brand-soft:#eaf1ff;
  --m-accent:#f59f0a;
  --m-accent-dark:#b45309;
  --m-green:#0f9d63;
  --m-line:#e3ebf5;
  --m-radius:18px;
  --m-shadow:0 18px 44px -22px rgba(16,40,80,.45);
  --m-shadow-sm:0 8px 22px -14px rgba(16,40,80,.4);
  --m-max:1080px;
}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(1100px 520px at 12% -8%, #e8f0ff 0%, rgba(232,240,255,0) 60%),
    radial-gradient(900px 460px at 92% 0%, #fff4e2 0%, rgba(255,244,226,0) 55%),
    linear-gradient(180deg,#ffffff 0%,#f6f9fd 55%,#eef4fb 100%) !important;
  letter-spacing:.1px;
}
/* Navigation */
.topnav{
  position:sticky;top:0;z-index:60;
  backdrop-filter:saturate(180%) blur(12px);
  background:rgba(255,255,255,.88) !important;
  box-shadow:0 1px 0 var(--m-line),0 8px 24px -20px rgba(16,40,80,.6);
}
.topnav a{border-radius:999px !important;font-weight:700 !important;letter-spacing:.2px}
.topnav a.active{background:var(--m-brand-soft) !important;color:var(--m-brand-dark) !important}
/* Titres */
h1,.home-hero h1{letter-spacing:-.8px !important;font-weight:850 !important;color:var(--m-ink) !important}
h2{
  position:relative;letter-spacing:-.4px !important;font-weight:800 !important;
  color:var(--m-ink) !important;padding-left:14px;
}
h2::before{
  content:"";position:absolute;left:0;top:.22em;bottom:.22em;width:5px;border-radius:99px;
  background:linear-gradient(180deg,var(--m-brand),var(--m-accent));
}
h3{color:var(--m-ink) !important;font-weight:750 !important}
p,li{color:var(--m-ink-soft) !important;font-size:1.02rem !important;line-height:1.8 !important}
/* Cartes & blocs */
.bookmaker,.faq-item,.content-section,.info-callout,.responsible-box,
.seo-table-wrap,.cpa-authority-card{
  border-radius:var(--m-radius) !important;
  border:1px solid var(--m-line) !important;
  background:#fff !important;
  box-shadow:var(--m-shadow-sm) !important;
  transition:transform .22s ease, box-shadow .22s ease;
}
.bookmaker:hover,.cpa-authority-card:hover{transform:translateY(-3px);box-shadow:var(--m-shadow) !important}
.content-section ul li{
  border-radius:12px !important;background:#fbfdff !important;
  border:1px solid var(--m-line) !important;
}
.code-widget,.hl-code,.ccode,.float-code{border-radius:14px !important}
.code-widget{
  background:linear-gradient(135deg,#0b1f45,#123a86) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:var(--m-shadow) !important;
}
.code-widget .ccode{color:#ffd66b !important}
.btn-copy{
  border-radius:999px !important;
  background:linear-gradient(135deg,var(--m-brand),var(--m-brand-dark)) !important;
  box-shadow:0 10px 24px -12px rgba(18,87,214,.9) !important;
}
.btn-copy:hover{transform:translateY(-1px) scale(1.03)}
img{border-radius:14px}
.topnav img,.cpa-float-brand img{border-radius:8px}
/* ================= FOOTER MODERNE ================= */
.cpa-footer{
  margin-top:56px;
  background:linear-gradient(180deg,#0a1730 0%,#08122a 60%,#060e21 100%);
  color:#c3d0e4;border-top:3px solid var(--m-accent);
  padding:0 0 26px;text-align:left;
}
.cpa-footer *{color:inherit}
.cpa-footer-inner{max-width:var(--m-max);margin:0 auto;padding:0 22px}
.cpa-age-banner{
  background:linear-gradient(90deg,#b91c1c,#dc2626);
  padding:14px 22px;text-align:center;font-weight:800;color:#fff !important;
  font-size:.95rem;letter-spacing:.3px;
}
.cpa-age-banner span{color:#fff !important}
.cpa-footer-seo{padding:34px 0 6px;border-bottom:1px solid rgba(255,255,255,.09)}
.cpa-footer-seo h2{color:#fff !important;font-size:1.15rem;padding-left:12px;margin:0 0 12px}
.cpa-footer-seo h2::before{background:linear-gradient(180deg,var(--m-accent),#fff)}
.cpa-footer-seo p{color:#a9b8d0 !important;font-size:.94rem !important;line-height:1.85 !important;margin-bottom:12px}
.cpa-footer-seo a{color:#8ab6ff !important;text-decoration:underline;text-underline-offset:3px}
.cpa-footer-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:26px;
  padding:30px 0 26px;border-bottom:1px solid rgba(255,255,255,.09);
}
.cpa-footer-col h3{
  color:#fff !important;font-size:.82rem;text-transform:uppercase;letter-spacing:1.4px;
  margin:0 0 14px;font-weight:800;
}
.cpa-footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.cpa-footer-col li{background:none !important;border:0 !important;padding:0 !important;margin:0}
.cpa-footer-col a{
  color:#b9c8de !important;font-size:.9rem;transition:color .15s,padding-left .15s;
  display:inline-block;
}
.cpa-footer-col a:hover{color:#fff !important;padding-left:4px}
.cpa-badge{
  display:inline-block;margin-top:10px;padding:5px 11px;border-radius:999px;
  background:rgba(245,159,10,.14);border:1px solid rgba(245,159,10,.4);
  color:#ffcf7a !important;font-size:.74rem;font-weight:800;letter-spacing:.6px;
}
.cpa-responsible{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:26px 0;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.cpa-responsible div{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:14px;padding:15px 17px;
}
.cpa-responsible strong{color:#fff !important;display:block;margin-bottom:6px;font-size:.92rem}
.cpa-responsible p{color:#9fb0c9 !important;font-size:.86rem !important;line-height:1.7 !important;margin:0}
.cpa-footer-legal{
  padding-top:22px;display:flex;flex-wrap:wrap;gap:12px;
  align-items:center;justify-content:space-between;
}
.cpa-footer-legal p{color:#8496b2 !important;font-size:.82rem !important;margin:0;line-height:1.7 !important}
.cpa-flags{display:flex;flex-wrap:wrap;gap:8px}
.cpa-flags span{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  border-radius:999px;padding:4px 11px;font-size:.76rem;color:#c3d0e4 !important;
}
@media(max-width:900px){
  .cpa-footer-grid{grid-template-columns:repeat(2,1fr)}
  .cpa-responsible{grid-template-columns:1fr}
}
@media(max-width:560px){
  .cpa-footer-grid{grid-template-columns:1fr}
  h2{padding-left:11px}
}

/* Priorité sur la couche site-refresh.css (fond clair) */
footer.cpa-footer{
  background:linear-gradient(180deg,#0a1730 0%,#08122a 60%,#060e21 100%) !important;
  color:#c3d0e4 !important;border-top:3px solid var(--m-accent) !important;
}
footer.cpa-footer p,footer.cpa-footer li,footer.cpa-footer span{color:#a9b8d0 !important}
footer.cpa-footer h2,footer.cpa-footer h3,footer.cpa-footer strong{color:#ffffff !important}
footer.cpa-footer a{color:#9dc0ff !important}
footer.cpa-footer a:hover{color:#ffffff !important}
footer.cpa-footer .cpa-age-banner,footer.cpa-footer .cpa-age-banner span{
  background:linear-gradient(90deg,#b91c1c,#dc2626);color:#ffffff !important;
}
footer.cpa-footer .cpa-badge,footer.cpa-footer .cpa-badge span{color:#ffcf7a !important}
footer.cpa-footer .cpa-flags span{color:#c3d0e4 !important;font-weight:700}
footer.cpa-footer .cpa-footer-col a{font-weight:600}

/* ============ Tableaux comparatifs modernes ============ */
.seo-table-wrap{
  overflow-x:auto;border-radius:var(--m-radius) !important;
  border:1px solid var(--m-line) !important;background:#fff !important;
  box-shadow:var(--m-shadow-sm) !important;margin:22px 0 !important;padding:0 !important;
}
.seo-table{width:100%;border-collapse:collapse !important;font-size:.95rem}
.seo-table caption{
  caption-side:top;text-align:left;padding:15px 18px 12px;
  font-weight:800;color:var(--m-ink) !important;font-size:.95rem;
}
.seo-table thead th{
  background:linear-gradient(135deg,#0b3b96,#1257d6) !important;
  color:#fff !important;font-weight:800 !important;font-size:.86rem !important;
  text-transform:uppercase;letter-spacing:.6px;padding:13px 16px !important;
  text-align:left;border:0 !important;white-space:nowrap;
}
.seo-table tbody td{
  padding:14px 16px !important;border-top:1px solid var(--m-line) !important;
  color:var(--m-ink-soft) !important;vertical-align:middle;
}
.seo-table tbody tr:nth-child(even) td{background:#f8fbff !important}
.seo-table tbody tr:hover td{background:var(--m-brand-soft) !important}
.seo-table td strong{color:var(--m-ink) !important}
.seo-table a{color:var(--m-brand-dark) !important;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.code-pill{
  display:inline-block;padding:5px 13px;border-radius:999px;
  background:linear-gradient(135deg,#0b3b96,#1257d6) !important;
  color:#ffd66b !important;font-weight:900 !important;letter-spacing:1.6px;font-size:.86rem;
  box-shadow:0 8px 18px -12px rgba(11,59,150,.9);
}
/* Listes d'étapes */
.step-list{counter-reset:step;list-style:none;padding:0;display:grid;gap:11px;margin:18px 0}
.step-list li{
  counter-increment:step;position:relative;padding:13px 16px 13px 52px !important;
  background:#fff !important;border:1px solid var(--m-line) !important;border-radius:14px !important;
  box-shadow:var(--m-shadow-sm) !important;
}
.step-list li::before{
  counter(step);content:counter(step);position:absolute;left:14px;top:12px;
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--m-brand),var(--m-brand-dark));
  color:#fff;font-weight:800;font-size:.8rem;
}
/* Encadrés */
.info-callout{border-left:5px solid var(--m-accent) !important;border-radius:14px !important;padding:16px 18px !important}
.responsible-box{border-left:5px solid #dc2626 !important;border-radius:14px !important}
figure.inline-promo-image img,.featured-wrap img{border-radius:18px !important}
figcaption{color:#7b8aa3 !important;font-size:.82rem !important}
/* Hero */
.home-hero,.hero{padding-top:46px !important}
.home-hero h1,.hero h1{
  background:linear-gradient(100deg,#0b2455 0%,#1257d6 60%,#0f9d63 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}