/* melbetci.com.ci — v2 : charbon + jaune Melbet */
@font-face{font-family:"Exo 2";font-style:italic;font-weight:700;font-display:swap;src:url(/assets/fonts/exo-2-latin-700-italic.woff2) format("woff2")}
@font-face{font-family:"Exo 2";font-style:italic;font-weight:800;font-display:swap;src:url(/assets/fonts/exo-2-latin-800-italic.woff2) format("woff2")}
@font-face{font-family:"Exo 2";font-style:italic;font-weight:900;font-display:swap;src:url(/assets/fonts/exo-2-latin-900-italic.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/barlow-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/barlow-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/barlow-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/barlow-latin-700-normal.woff2) format("woff2")}
:root{
  --char:#282828;      /* fond du logo */
  --page:#1f1f1f;      /* fond de page */
  --raise:#303030;     /* surfaces */
  --raise-2:#383838;
  --line:#424242;
  --yellow:#ffbc01;    /* jaune du logo */
  --yellow-ink:#1f1f1f;
  --white:#ffffff;
  --text:#e9e9e9;
  --muted:#a9a9a9;
  --ci-orange:#f77f00;
  --ci-green:#009e60;
  --max:1120px;
  --read:720px;
  --skew:-10deg;
  --display:"Exo 2",Arial,sans-serif;
  --body:"Barlow",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--page);color:var(--text);font:400 17px/1.6 var(--body)}
a{color:var(--yellow);text-underline-offset:3px}
a:hover{color:var(--white)}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}

/* ---------- En-tête ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--char)}
.site-header::after{content:"";display:block;height:3px;background:linear-gradient(90deg,var(--ci-orange) 0 33.3%,var(--white) 33.3% 66.6%,var(--ci-green) 66.6%)}
.site-header .wrap{display:flex;align-items:center;gap:20px;min-height:64px}
.logo{display:block;flex:none}
.logo img{height:38px;width:auto}
.nav{display:flex;gap:2px;margin-left:auto;align-items:center}
.nav a{color:var(--text);text-decoration:none;padding:8px 12px;font-weight:600;font-size:16px}
.nav a:hover{color:var(--yellow)}
.nav a[aria-current="page"]{color:var(--yellow)}
.head-cta{flex:none}

/* ---------- Boutons (biais du logo) ---------- */
.btn{display:inline-block;position:relative;padding:13px 28px;font:italic 800 17px/1.1 var(--display);text-decoration:none;color:var(--yellow-ink);background:var(--yellow);transform:skewX(var(--skew));border:0;cursor:pointer;text-align:center}
.btn > span{display:inline-block;transform:skewX(calc(var(--skew) * -1))}
.btn:hover{background:var(--white);color:var(--yellow-ink)}
.btn-line{background:transparent;color:var(--white);box-shadow:inset 0 0 0 2px var(--white)}
.btn-line:hover{background:var(--white);color:var(--yellow-ink)}
.btn-sm{padding:9px 18px;font-size:15px}

/* ---------- Hero ---------- */
.hero{background:var(--char);padding:56px 0 64px;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.25fr .95fr;gap:56px;align-items:center}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr;gap:36px}.hero{padding:36px 0 44px}}
.breadcrumbs{font-size:15px;color:var(--muted);margin:0 0 18px}
.breadcrumbs a{color:var(--muted)}
.hero h1{font:italic 900 clamp(34px,5.4vw,60px)/1.02 var(--display);color:var(--white);margin:0 0 20px;letter-spacing:-.5px}
.hero .lead{font-size:19px;color:#cfcfcf;max-width:34em;margin:0 0 30px}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap}
.hero-facts{display:flex;flex-wrap:wrap;gap:8px 26px;margin:30px 0 0;padding:0;list-style:none;color:var(--muted);font-size:15px}
.hero-facts strong{color:var(--white);font-weight:600}

/* Coupon de pari (élément signature) */
.coupon{background:var(--white);color:#1f1f1f;max-width:380px;justify-self:end;width:100%;transform:rotate(-2deg);box-shadow:14px 14px 0 var(--yellow);position:relative}
@media (max-width:900px){.coupon{justify-self:start;transform:none;box-shadow:10px 10px 0 var(--yellow)}}
.coupon-head{background:#1f1f1f;color:var(--yellow);font:italic 800 18px/1 var(--display);padding:16px 22px;display:flex;justify-content:space-between;align-items:center}
.coupon-head small{color:#a9a9a9;font:500 13px/1 var(--body)}
.coupon-body{padding:18px 22px 6px}
.coupon-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #e3e3e3;font-size:16px}
.coupon-row span:last-child{font-weight:700;white-space:nowrap}
.coupon-row.plus span:last-child{color:#0b7a4b}
.coupon-total{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0 6px}
.coupon-total span:first-child{font-weight:600}
.coupon-total strong{color:#1f1f1f;font:italic 900 34px/1 var(--display)}
.coupon-cut{height:18px;background:radial-gradient(circle at 9px 9px,var(--char) 6px,transparent 6.5px) -9px 0/18px 18px repeat-x;margin-top:6px;border-top:2px dashed #cfcfcf}
.coupon-foot{padding:4px 22px 22px;font-size:14px;color:#555}
.coupon-foot .btn{width:100%;margin:6px 0 10px}

/* App panel (page APK) */
.app-panel{background:var(--raise);border:2px solid var(--line);max-width:380px;justify-self:end;width:100%;padding:24px}
@media (max-width:900px){.app-panel{justify-self:start}}
.app-panel h2{font:italic 800 22px/1.2 var(--display);margin:0 0 4px;color:var(--white)}
.app-panel p{margin:0 0 18px;color:var(--muted);font-size:15px}
.app-panel .btn{display:block;width:100%;margin:0 0 12px}
.app-specs{margin:8px 0 0;padding:14px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:15px}
.app-specs dt{color:var(--muted)}
.app-specs dd{margin:0;color:var(--white);font-weight:600}

/* ---------- Sommaire ---------- */
.toc{background:var(--raise);border-bottom:1px solid var(--line)}
.toc ol{list-style:none;margin:0 auto;padding:0 20px;max-width:var(--max);display:flex;gap:4px;overflow-x:auto;scrollbar-width:thin}
.toc a{display:block;white-space:nowrap;padding:14px 12px;color:var(--text);text-decoration:none;font-weight:600;font-size:15px;border-bottom:3px solid transparent}
.toc a:hover{color:var(--yellow);border-bottom-color:var(--yellow)}

/* ---------- Contenu ---------- */
main{padding:24px 0 56px}
article{max-width:var(--read)}
article > h2,.faq > h2{font:italic 800 clamp(26px,3.2vw,34px)/1.15 var(--display);color:var(--white);margin:64px 0 16px;scroll-margin-top:90px;padding-left:22px;position:relative}
article > h2::before,.faq > h2::before{content:"";position:absolute;left:0;top:.12em;bottom:.12em;width:9px;background:var(--yellow);transform:skewX(var(--skew))}
article h3{font:italic 700 21px/1.25 var(--display);color:var(--white);margin:32px 0 8px}
article p,article li{color:#dcdcdc}
article ul,article ol{padding-left:22px}
article li{margin:8px 0}
article li::marker{color:var(--yellow)}
strong{color:var(--white)}

/* Tableaux */
.table-wrap{overflow-x:auto;margin:20px 0}
table{width:100%;border-collapse:collapse;font-size:16px}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:var(--yellow);color:var(--yellow-ink);font-weight:700}
tbody th{color:var(--muted);font-weight:500;width:38%}
tbody tr:hover{background:var(--raise)}
td.num,th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}

.checklist{list-style:none;padding:0;margin:0}
.checklist li{position:relative;padding:9px 0 9px 30px;border-top:1px solid var(--line);color:var(--text)}
.checklist li::before{content:"";position:absolute;left:4px;top:15px;width:12px;height:7px;border-left:3px solid var(--yellow);border-bottom:3px solid var(--yellow);transform:rotate(-45deg)}
.promo-code{text-align:center;padding:6px 0 14px;border-bottom:1px solid #e3e3e3}
.promo-code{display:flex;justify-content:center;align-items:stretch;gap:0}
.promo-code code{font:italic 900 24px/1 var(--display);color:#1f1f1f;background:#fff4cc;border:2px dashed #1f1f1f;border-right:0;padding:10px 14px;letter-spacing:.5px}
.copy{font:700 15px/1 var(--body);background:#1f1f1f;color:var(--yellow);border:0;padding:0 16px;cursor:pointer}
.copy:hover{background:#000}
.note p + p{margin-top:8px}

/* Chiffres clés du bonus */
.keyfacts{display:grid;grid-template-columns:repeat(4,1fr);margin:24px 0;border:2px solid var(--yellow)}
@media (max-width:640px){.keyfacts{grid-template-columns:repeat(2,1fr)}}
.keyfacts div{padding:16px 16px 14px;border-right:1px solid var(--line)}
.keyfacts div:last-child{border-right:0}
@media (max-width:640px){.keyfacts div:nth-child(2){border-right:0}.keyfacts div:nth-child(-n+2){border-bottom:1px solid var(--line)}}
.keyfacts b{display:block;font:italic 900 26px/1.1 var(--display);color:var(--yellow)}
.keyfacts span{font-size:14px;color:var(--muted)}

/* Liste de jeux façon ligne de cotes */
.games{margin:20px 0;border-top:1px solid var(--line)}
.game{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);align-items:baseline}
.game h3{margin:0;font-size:19px;color:var(--yellow)}
.game p{margin:0}
@media (max-width:560px){.game{grid-template-columns:1fr;gap:2px}}

/* Étapes */
.steps{counter-reset:s;list-style:none;padding:0;margin:20px 0}
.steps li{counter-increment:s;position:relative;padding:2px 0 2px 52px;margin:16px 0}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:34px;height:34px;background:var(--yellow);color:var(--yellow-ink);font:italic 900 18px/34px var(--display);text-align:center;transform:skewX(var(--skew))}

.note{border-left:4px solid var(--yellow);padding:4px 0 4px 18px;margin:22px 0;color:#dcdcdc}
.note p{margin:0}

.cta-line{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:30px 0;padding:20px 24px;background:var(--raise);border-left:6px solid var(--yellow)}
.cta-line p{margin:0;font:italic 700 19px/1.3 var(--display);color:var(--white)}

/* FAQ */
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:600;font-size:18px;padding:18px 40px 18px 0;list-style:none;position:relative;color:var(--white)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:12px;font:italic 800 28px/1 var(--display);color:var(--yellow)}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:0 0 18px;color:#dcdcdc}

.token{background:#4a3c00;color:var(--yellow);padding:0 5px;font-family:ui-monospace,monospace;font-size:.88em;font-style:normal}

/* ---------- Pied de page ---------- */
.site-footer{background:var(--char);padding:40px 0 100px;color:var(--muted);font-size:15px}
.site-footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px}
@media (max-width:640px){.site-footer .cols{grid-template-columns:1fr}}
.site-footer img{height:30px;width:auto;margin-bottom:16px}
.site-footer a{color:var(--text);text-decoration:none}
.site-footer a:hover{color:var(--yellow)}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin:8px 0}
.age{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:2px solid var(--yellow);color:var(--yellow);border-radius:50%;font:italic 800 14px/1 var(--display);margin-right:12px;vertical-align:middle}

/* Barre CTA mobile */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--char);border-top:3px solid var(--yellow);padding:10px 16px;display:none;gap:12px}
.sticky-cta .btn{flex:1;padding:12px 8px}
@media (max-width:820px){.sticky-cta{display:flex}}

/* Ambassadeurs */
.partner-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:8px 0 8px}
@media (max-width:640px){.partner-tabs{grid-template-columns:repeat(2,1fr)}}
.partner-tabs a{display:block;text-align:center;padding:14px 10px;background:var(--raise);color:var(--white);text-decoration:none;font:italic 800 16px/1.2 var(--display);border-bottom:3px solid transparent}
.partner-tabs a:hover{border-bottom-color:var(--yellow);color:var(--yellow)}
.partner{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;margin:56px 0;padding:0 0 40px;border-bottom:1px solid var(--line);scroll-margin-top:90px}
article:has(.partner){max-width:none}
article:has(.partner) > h2,article:has(.partner) > p,article:has(.partner) > ul,article:has(.partner) > .cta-line,article:has(.partner) > .faq{max-width:var(--read)}
@media (max-width:860px){.partner{grid-template-columns:1fr;gap:16px}}
.partner-label{margin:0 0 6px;color:var(--yellow);font-weight:700}
.partner h2{font:italic 900 clamp(28px,4vw,42px)/1.05 var(--display);color:var(--white);margin:0 0 16px}
.partner-src{font-size:14px;color:var(--muted)}
.partner-visual{position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:320px;background:radial-gradient(ellipse at 50% 70%,#3a3a3a 0%,var(--page) 70%)}
.partner-visual::before{content:"";position:absolute;right:8%;top:6%;width:42%;height:30%;background:var(--yellow);transform:skewX(var(--skew));opacity:.9}
.partner-visual img{position:relative;max-height:460px;width:auto}
.partner .app-specs{grid-template-columns:auto 1fr;margin-top:14px}

/* Header dropdown */
.nav-drop{position:relative}
.nav-drop > a{display:inline-flex;align-items:center;gap:6px}
.nav-drop .chev{transition:transform .15s}
.nav-sub{position:absolute;left:0;top:100%;min-width:200px;padding:8px 0;background:var(--char);border-top:3px solid var(--yellow);box-shadow:0 12px 28px rgba(0,0,0,.45);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .15s,transform .15s,visibility .15s;z-index:60}
.nav-sub a{display:block;padding:10px 18px;font-weight:500}
.nav-sub a:hover{background:#333}
.nav-drop:hover .nav-sub,.nav-drop:focus-within .nav-sub{opacity:1;visibility:visible;transform:none}
.nav-drop:hover .chev,.nav-drop:focus-within .chev{transform:rotate(180deg)}
/* Footer social icons */
.social{display:flex;gap:10px;margin-top:4px}
.site-footer .social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid #444;color:var(--text);transform:skewX(var(--skew));transition:background .15s,color .15s,border-color .15s}
.site-footer .social a svg{transform:skewX(calc(-1 * var(--skew)))}
.site-footer .social a:hover{background:var(--yellow);border-color:var(--yellow);color:#1f1f1f}

/* Mobile menu (burger + panneau) */
.burger,.nav-top,.sub-toggle,.nav-cta,.nav-backdrop{display:none}
@media (max-width:980px){
  .site-header .wrap{min-height:60px;gap:8px}
  .site-header .logo{min-width:0;flex-shrink:1}
  .site-header .head-cta{margin-left:auto;padding:10px 18px;font-size:15px}
  .burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:11px 10px;background:none;border:0;cursor:pointer;flex:none;margin-right:-10px}
  .burger span{display:block;height:2px;background:var(--white);border-radius:1px}
  .burger span:nth-child(2){width:70%;margin-left:auto;background:var(--yellow)}
  .nav{position:fixed;top:0;right:0;bottom:0;z-index:100;width:min(86vw,360px);margin:0;padding:0 20px 28px;display:flex;flex-direction:column;align-items:stretch;gap:0;background:var(--char);border-left:3px solid var(--yellow);overflow-y:auto;transform:translateX(100%);visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s}
  .nav.open{transform:none;visibility:visible;transition:transform .25s ease}
  .nav-top{display:flex;align-items:center;justify-content:space-between;min-height:64px;margin-bottom:4px}
  .nav-title{font:italic 900 22px/1 var(--display);color:var(--white)}
  .nav-close{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-10px;background:none;border:0;color:var(--white);cursor:pointer}
  .nav-close:hover{color:var(--yellow)}
  .nav > a,.nav-drop > a{display:flex;align-items:center;padding:16px 2px;border-bottom:1px solid #383838;font-size:17px;font-weight:600}
  .nav > a[aria-current="page"],.nav-drop > a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--yellow);padding-left:12px}
  .nav-drop{display:grid;grid-template-columns:1fr 52px}
  .nav-drop > a .chev{display:none}
  .sub-toggle{display:flex;align-items:center;justify-content:center;background:none;border:0;border-left:1px solid #383838;border-bottom:1px solid #383838;color:var(--white);cursor:pointer}
  .sub-toggle .chev{width:14px;height:14px;transition:transform .2s}
  .sub-toggle[aria-expanded="true"]{color:var(--yellow)}
  .sub-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
  .nav-drop .nav-sub,.nav-drop:hover .nav-sub,.nav-drop:focus-within .nav-sub{position:static;grid-column:1/-1;display:none;min-width:0;padding:4px 0 8px;background:#1a1a1a;border:0;box-shadow:none;opacity:1;visibility:visible;transform:none}
  .nav-drop.sub-open .nav-sub{display:block}
  .nav-sub a{display:block;padding:13px 16px;font-size:16px;font-weight:500;color:var(--text)}
  .nav-sub a::before{content:"› ";color:var(--yellow)}
  .nav-sub a[aria-current="page"]{color:var(--yellow)}
  .nav-cta{display:block;margin-top:28px;text-align:center}
  .nav-cta .btn{display:block}
  .nav-cta p{margin:14px 0 0;color:var(--muted);font-size:15px}
  .nav-cta strong{color:var(--yellow)}
  .nav-backdrop:not([hidden]){display:block;position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.6)}
  html.menu-open{overflow:hidden}
  html.menu-open .site-header{z-index:110}
}
@media (max-width:359px){.site-header .head-cta{padding:9px 12px;font-size:14px}}

/* Illustrations de l'application */
.shot{margin:24px 0 28px}
.shot img{width:100%;height:auto;border-radius:6px;background:#1c1c1c}
.shot figcaption{margin-top:8px;font-size:14px;color:var(--muted)}