/* Palette inspirée du drapeau de la RDC : bleu ciel, jaune, rouge — sur fond bleu nuit */
:root{
  --bg:#081229;--bg2:#0c1a3a;--surface:#0f2148;--surface2:#13295a;
  --ink:#eef3ff;--muted:#a9b6d3;--line:#203a73;
  --sky:#1e90ff;--sky-soft:#5fb2ff;--yellow:#f7d618;--red:#ce1021;
  --radius:14px;--max:1080px;
  --flag:linear-gradient(90deg,var(--sky) 0 40%,var(--yellow) 40% 44%,var(--red) 44% 56%,var(--yellow) 56% 60%,var(--sky) 60% 100%);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.65 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
a{color:var(--sky-soft)}
a:hover{color:var(--yellow)}
img{max-width:100%;height:auto}
.wrap{max-width:var(--max);margin:0 auto;padding:0 16px}

.topbar{background:#050c1d;color:var(--muted);font-size:13px;text-align:center;padding:6px 12px}
.topbar b{color:#fff;background:var(--red);border-radius:6px;padding:1px 6px;margin-right:4px}

header.site{background:rgba(8,18,41,.92);backdrop-filter:blur(8px);position:sticky;top:0;z-index:20}
header.site::after{content:"";display:block;height:4px;background:var(--flag)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:62px}
.logo{display:inline-flex;align-items:center;gap:0;font-weight:800;font-size:21px;text-decoration:none;color:#fff;letter-spacing:-.3px}
.logo::before{content:"★";display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9px;background:var(--sky);color:var(--yellow);font-size:20px;line-height:1;margin-right:9px}
.logo span{color:var(--yellow)}
nav.main{display:flex;gap:20px;flex-wrap:wrap}
nav.main a{color:#dbe5ff;text-decoration:none;font-size:15px;font-weight:500}
nav.main a:hover{color:var(--yellow)}
.menu-btn{display:none;background:var(--surface);color:#fff;border:1px solid var(--line);border-radius:10px;padding:6px 12px;font-size:15px}
@media (max-width:860px){
  nav.main{display:none;position:absolute;left:0;right:0;top:66px;background:var(--bg2);flex-direction:column;padding:14px 16px;border-bottom:1px solid var(--line);gap:12px}
  nav.main.open{display:flex}
  .menu-btn{display:block}
}

.crumbs{font-size:13px;color:var(--muted);margin:18px 0 0}
.crumbs a{color:var(--muted)}

/* Hero avec la diagonale du drapeau */
.hero{position:relative;padding:34px 0 18px;overflow:hidden}
.hero::before{content:"";position:absolute;right:-120px;top:-60px;width:520px;height:360px;
  background:linear-gradient(150deg,transparent 0 38%,var(--yellow) 38% 41%,var(--red) 41% 53%,var(--yellow) 53% 56%,transparent 56%);
  opacity:.22;pointer-events:none;transform:rotate(-6deg)}
.hero::after{content:"★";position:absolute;right:300px;top:6px;color:var(--yellow);font-size:54px;opacity:.18;pointer-events:none}
@media (max-width:760px){.hero::before{width:300px;right:-170px;opacity:.12}.hero::after{right:24px;top:0;font-size:40px}}
.hero h1{position:relative;font-size:clamp(28px,4.4vw,44px);line-height:1.13;margin:8px 0 12px;letter-spacing:-.6px;color:#fff}
.lead{position:relative;font-size:18px;color:#d3ddf5;max-width:760px}
.meta{position:relative;font-size:13px;color:var(--muted)}

.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;padding:18px 0 48px}
@media (max-width:960px){.layout{grid-template-columns:1fr}}
article h2{font-size:26px;line-height:1.25;margin:36px 0 10px;letter-spacing:-.3px;color:#fff;padding-left:14px;border-left:4px solid var(--yellow)}
article h3{font-size:20px;margin:24px 0 8px;color:var(--sky-soft)}
article p,article li{color:#dbe3f6}
article b{color:#fff}
article ul,article ol{padding-left:22px}
article ul li::marker{color:var(--yellow)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.offer{position:relative;overflow:hidden;background:linear-gradient(160deg,#1478e6,#0b4fb0);border:0;color:#fff}
.offer::before{content:"";position:absolute;right:0;top:0;width:110px;height:110px;background:linear-gradient(225deg,transparent 0 30%,var(--yellow) 30% 35%,var(--red) 35% 52%,var(--yellow) 52% 57%,transparent 57%);pointer-events:none}
.offer::after{content:"★";position:absolute;left:14px;bottom:-6px;font-size:90px;color:var(--yellow);opacity:.12;pointer-events:none}
.offer>*{position:relative}
.offer h3{margin:0 0 6px;color:#fff;font-size:20px;padding-right:56px}
.offer p{color:#e8f1ff;margin:0 0 14px;font-size:15px}
.btn{display:inline-block;background:var(--yellow);color:#0a1430;font-weight:800;text-decoration:none;padding:12px 22px;border-radius:999px;font-size:16px;text-align:center;box-shadow:0 6px 18px rgba(247,214,24,.25)}
.btn:hover{background:#ffe23d;color:#0a1430}
.btn.full{display:block}
.small{font-size:12.5px;color:var(--muted)}
.offer .small{color:#d6e6ff}

aside .card{margin-bottom:16px;position:sticky;top:84px}
aside ul{padding-left:18px;margin:6px 0 0}
aside li{margin:5px 0;font-size:15px}
aside li::marker{color:var(--yellow)}

.toc{background:var(--bg2);border:1px solid var(--line);border-top:3px solid var(--sky)}
.toc ol{margin:6px 0 0}
.toc li::marker{color:var(--yellow);font-weight:700}

.tbl{overflow-x:auto;margin:14px 0;border-radius:12px;border:1px solid var(--line)}
table{width:100%;border-collapse:collapse;background:var(--surface);font-size:15px}
th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;color:#dbe3f6}
th{background:var(--surface2);color:#fff;font-weight:700;border-bottom:2px solid var(--sky)}
tr:last-child td{border-bottom:0}

.note{border-left:4px solid var(--yellow);background:rgba(247,214,24,.08);padding:12px 14px;border-radius:8px;margin:16px 0;color:#f1ead0}
.warn{border-left:4px solid var(--red);background:rgba(206,16,33,.12);padding:12px 14px;border-radius:8px;margin:16px 0;color:#ffdcdf}
.warn a,.note a{color:#fff}

.steps{counter-reset:s;list-style:none;padding:0}
.steps li{counter-increment:s;position:relative;padding:3px 0 14px 48px}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:33px;height:33px;border-radius:50%;background:var(--sky);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:15px;box-shadow:0 0 0 3px rgba(247,214,24,.35)}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0}
@media (max-width:760px){.grid3{grid-template-columns:1fr}}
.grid3 a.card{text-decoration:none;color:var(--ink);transition:border-color .15s,transform .15s}
.grid3 a.card:hover{border-color:var(--yellow);transform:translateY(-2px)}
.grid3 h3{margin:0 0 6px;font-size:17px;color:#fff}
.grid3 p{margin:0;font-size:14.5px;color:var(--muted)}

details{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin:10px 0}
details[open]{border-color:var(--sky)}
summary{cursor:pointer;font-weight:700;color:#fff}
summary::marker{color:var(--yellow)}

.cta-inline{margin:22px 0;display:flex;gap:12px;align-items:center;flex-wrap:wrap}

footer.site{background:#050c1d;color:#b3bfd9;padding:0 0 24px;font-size:14px}
footer.site::before{content:"";display:block;height:5px;background:var(--flag);margin-bottom:32px}
footer.site a{color:#e6ecfa}
footer.site .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px}
@media (max-width:760px){footer.site .cols{grid-template-columns:1fr}}
footer.site h4{color:var(--yellow);margin:0 0 8px;font-size:15px}
footer.site ul{list-style:none;padding:0;margin:0}
footer.site li{margin:5px 0}
.badge18{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--red);color:#fff;font-weight:800;font-size:13px;margin-right:8px;border:2px solid var(--yellow)}
.legal{border-top:1px solid #1a2b55;margin-top:22px;padding-top:14px;font-size:12.5px;color:#8392b3}

.sticky-cta{display:none}
@media (max-width:760px){
  .sticky-cta{display:flex;position:fixed;left:0;right:0;bottom:0;background:rgba(8,18,41,.97);border-top:3px solid var(--sky);padding:10px 16px;gap:10px;align-items:center;z-index:30}
  .sticky-cta .btn{flex:1;padding:11px 14px}
  .sticky-cta span{font-size:12px;color:var(--muted)}
  body{padding-bottom:66px}
}

/* Pronostics */
.mgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:16px 0}
@media (max-width:640px){.mgrid{grid-template-columns:1fr}}
.mcard{display:flex;flex-direction:column;gap:4px;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--sky);border-radius:12px;padding:12px 14px;text-decoration:none;color:var(--ink);transition:border-color .15s,transform .15s}
.mcard:hover{border-color:var(--yellow);border-left-color:var(--yellow);transform:translateY(-2px);color:var(--ink)}
.mc-date{font-size:12.5px;color:var(--muted);text-transform:none}
.mc-teams{font-weight:800;font-size:18px;color:#fff}
.mc-teams i{color:var(--yellow);font-style:normal;padding:0 2px}
.mc-pick{font-size:14px;color:var(--yellow)}
.mc-go{font-size:13px;color:var(--sky-soft);margin-top:2px}
.matchhead{text-align:center;background:linear-gradient(160deg,var(--surface2),var(--surface));border-top:3px solid var(--sky)}
.mh-teams{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;font-size:22px;font-weight:800;color:#fff}
.mh-teams b{color:var(--yellow);font-size:16px}
.mh-meta{margin-top:8px;color:var(--muted);font-size:14.5px}
.mh-meta b{color:#fff}
.pick{margin-top:14px;border:2px solid var(--yellow);background:rgba(247,214,24,.07)}
.pick-label{display:inline-block;background:var(--red);color:#fff;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;border-radius:6px;padding:2px 8px}
.pick-main{font-size:22px;font-weight:800;color:#fff;margin:8px 0 4px}
.pick-alt{color:#dbe3f6;font-size:15px}
th{white-space:nowrap}

/* ===== Code promo animé ===== */
.promo{position:relative;border-radius:14px;padding:14px 16px;margin:14px 0;background:#0a1734;isolation:isolate;overflow:hidden}
.promo::before{content:"";position:absolute;inset:-2px;z-index:-2;border-radius:16px;
  background:conic-gradient(from var(--a,0deg),var(--sky),var(--yellow),var(--red),var(--yellow),var(--sky));
  animation:promoSpin 4s linear infinite}
.promo::after{content:"";position:absolute;inset:2px;z-index:-1;border-radius:12px;background:linear-gradient(160deg,#0f2552,#0a1734)}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes promoSpin{to{--a:360deg}}
.promo-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.promo-label{font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--yellow)}
.promo-bonus{font-weight:900;font-size:22px;color:#fff;background:var(--red);border-radius:8px;padding:2px 10px;animation:promoPulse 1.8s ease-in-out infinite}
@keyframes promoPulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(206,16,33,.6)}50%{transform:scale(1.07);box-shadow:0 0 0 8px rgba(206,16,33,0)}}
.promo-row{display:flex;align-items:stretch;gap:8px;margin:10px 0 8px}
.promo-code{flex:1;display:flex;align-items:center;justify-content:center;font:900 26px/1 "Inter",system-ui,sans-serif;letter-spacing:3px;color:var(--yellow);
  border:2px dashed var(--yellow);border-radius:10px;padding:10px 12px;position:relative;overflow:hidden;
  text-shadow:0 0 12px rgba(247,214,24,.55)}
.promo-code::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);animation:promoShine 2.6s ease-in-out infinite}
@keyframes promoShine{0%{left:-60%}60%,100%{left:120%}}
.promo-copy{background:var(--sky);color:#fff;border:0;border-radius:10px;font-weight:800;font-size:15px;padding:0 16px;cursor:pointer;min-width:92px}
.promo-copy:hover{background:#3aa0ff}
.promo-copy.done{background:#14a85c}
.promo-text{margin:0;font-size:14.5px;color:#e6edff}
.promo-text b{color:var(--yellow)}
.promo-legal{margin:6px 0 0;font-size:11.5px;color:var(--muted)}
.offer .promo{margin:12px 0 14px}
.offer .promo-code{font-size:22px}
.promo.big .promo-code{font-size:34px;padding:14px}
.promo.big .promo-bonus{font-size:28px}
.promo-banner{display:grid;grid-template-columns:1fr auto;align-items:center;gap:18px;background:linear-gradient(135deg,rgba(30,144,255,.18),rgba(206,16,33,.12));border:1px solid var(--line);border-radius:18px;padding:6px 18px 6px 6px;margin:4px 0 20px}
.promo-banner .promo{margin:0}
@media (max-width:640px){.promo-banner{grid-template-columns:1fr;padding:6px 6px 14px}.promo-banner .btn{margin:0 10px}.promo.big .promo-code{font-size:28px}}
@media (prefers-reduced-motion:reduce){.promo::before,.promo-bonus,.promo-code::after{animation:none}}
.promo-bonus{white-space:nowrap}
.promo-code::after{width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent)}
.offer .promo{padding:12px}
.offer .promo-top{flex-wrap:wrap;gap:6px}
.offer .promo-bonus{font-size:18px;padding:2px 8px}
.offer .promo-row{flex-direction:column;gap:6px}
.offer .promo-copy{padding:8px 0}
.offer .promo p.promo-text{margin:0;font-size:13.5px;color:#e6edff}
.offer .promo p.promo-legal{margin:6px 0 0;font-size:11.5px;color:var(--muted)}