/* vstyle.css : style commun du site (pages vpromo_pronostic, vpromosport...) */
:root{--bg:#f4f7f5;--card:#fff;--ink:#0d1b2a;--muted:#5b6b7a;--line:#e0e7e2;--brand:#0f9d58;--brand-ink:#fff;--hot:#f59e0b;--nav:#0b1f17;--navtxt:#eaf3ee;--chip:#e6f3ea;--warn:#8a2a1c;--warn-bg:#fbe9e7;
--f:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0a1410;--card:#12201a;--ink:#eaf3ee;--muted:#9bb0a5;--line:#22362c;--brand:#34d27b;--brand-ink:#04210f;--hot:#fbbf24;--nav:#06100c;--chip:#17291f;--warn:#ffb4a6;--warn-bg:#3a1d19;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0a1410;--card:#12201a;--ink:#eaf3ee;--muted:#9bb0a5;--line:#22362c;--brand:#34d27b;--brand-ink:#04210f;--hot:#fbbf24;--nav:#06100c;--chip:#17291f;--warn:#ffb4a6;--warn-bg:#3a1d19;color-scheme:dark}
html{scroll-behavior:smooth;scroll-padding-top:70px}*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--f)}
a{color:var(--brand)}:focus-visible{outline:3px solid var(--hot);outline-offset:2px}
.w{max-width:1100px;margin:0 auto;padding:0 18px}
header{background:var(--nav);color:var(--navtxt);position:sticky;top:env(safe-area-inset-top,0px);z-index:20}
header .w{display:flex;align-items:center;gap:18px;height:58px}
.logo{font-weight:800;font-size:19px;color:var(--navtxt);text-decoration:none;display:flex;align-items:center;gap:8px;white-space:nowrap}
.logo i{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff 0 14%,var(--brand) 15%);display:inline-block}
header nav{display:flex;gap:4px;overflow-x:auto;flex:1}header nav a{color:var(--navtxt);text-decoration:none;padding:8px 12px;border-radius:8px;font-size:15px;white-space:nowrap;opacity:.85}header nav a:hover{background:rgba(255,255,255,.1);opacity:1}
header nav .nv-login{display:none}.mb{display:none;margin-left:auto;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.1);color:var(--navtxt);font:700 15px var(--f);padding:9px 14px;border-radius:10px;cursor:pointer}
@media (max-width:860px){.mb{display:inline-flex}header .w>.btn{display:none}header nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;overflow:visible;background:var(--nav);padding:6px 18px 18px;box-shadow:0 14px 28px rgba(0,0,0,.35);border-top:1px solid rgba(255,255,255,.12)}header nav.open{display:flex}header nav a{font-size:18px;padding:15px 6px;border-radius:0;border-bottom:1px solid rgba(255,255,255,.1);opacity:1}header nav .nv-login{display:block;margin-top:14px;text-align:center;border:0;border-radius:10px;background:var(--brand);color:var(--brand-ink);font-weight:800;padding:14px}}
.btn{display:inline-block;border:0;background:var(--brand);color:var(--brand-ink);font:700 14px var(--f);padding:10px 16px;border-radius:9px;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{filter:brightness(1.08)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.alt{background:none;color:var(--ink);border:1px solid var(--line)}
.hero{background:linear-gradient(135deg,var(--nav),#13402a);color:var(--navtxt);padding:34px 0 38px}
.hero h1{font-size:clamp(26px,4.6vw,42px);line-height:1.1;margin:0 0 8px;letter-spacing:-.02em;max-width:16em}.hero h1 b{color:var(--hot)}
.hero p{margin:0 0 18px;opacity:.85;max-width:38em}
.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{font:600 14px var(--f);padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:var(--navtxt);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--hot);border-color:var(--hot);color:#2b1a00}
section.b{padding:34px 0 0}
h2{font-size:clamp(21px,3vw,28px);margin:0 0 4px;letter-spacing:-.01em}.sub{color:var(--muted);margin:0 0 16px}
.lay{display:grid;grid-template-columns:1fr 300px;gap:18px;align-items:start}
.mc{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px;display:grid;grid-template-columns:1fr auto;gap:8px 14px;align-items:center}
.mi small{color:var(--muted);display:block}.mi b{font-size:16px}.mi span{color:var(--muted);margin:0 4px}
.pks{display:flex;gap:6px}
.pk{position:relative;overflow:hidden;width:74px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);padding:6px 0;cursor:pointer;font:inherit;text-align:center}
.pk:before{content:"";position:absolute;left:0;bottom:0;height:100%;width:var(--w);background:var(--chip);z-index:0}
.pk span,.pk em{position:relative;z-index:1;display:block}.pk span{font-weight:800}.pk em{font-style:normal;font-size:12px;color:var(--muted)}
.pk[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}.pk[aria-pressed="true"]:before{display:none}.pk[aria-pressed="true"] em{color:var(--brand-ink)}
.ab{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted)}
.gn{display:flex;gap:6px}
.gb{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:999px;padding:5px 16px;font:700 12px var(--f);cursor:pointer}
.gb[aria-pressed="true"]{background:var(--hot);border-color:var(--hot);color:#2b1a00}
.pr{display:flex;gap:4px}.pm .gg{background:var(--hot);color:#2b1a00}
.mi small{text-align:center}.cr{width:30px;height:30px;flex:0 0 30px;object-fit:contain}
.vs{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto minmax(0,1fr);align-items:center;gap:8px;margin-top:6px}
.vs b{font-size:15px;line-height:1.25}.vs .h{text-align:right}.vs .a{text-align:left}.vs i{font-style:normal;color:var(--muted);font-size:12px;font-weight:700}
.sum{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;position:sticky;top:72px}
.sum h3{margin:0 0 10px;font-size:18px}
.bar{height:8px;background:var(--line);border-radius:5px;overflow:hidden;margin:4px 0 12px}.bar i{display:block;height:100%;width:0;background:var(--hot);transition:width .25s}
.kv{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;text-align:center;margin-bottom:12px}.kv div{background:var(--chip);border-radius:9px;padding:8px 2px;font-size:12px;color:var(--muted)}.kv b{display:block;font-size:20px;color:var(--ink)}
.tot{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding-top:10px;margin-bottom:12px}.tot b{font-size:24px}
.sum .btn{width:100%;margin-bottom:8px}.msg{font-size:13px;color:var(--muted);min-height:20px;margin:0}
.cd{font-variant-numeric:tabular-nums;font-weight:800;color:var(--hot)}
.scroll{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px}
.rc{flex:0 0 200px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px}.rc h4{margin:0 0 2px}.rc small{color:var(--muted)}.rc strong{display:block;font-size:20px;margin-top:8px}.rc p{margin:0;font-size:13px;color:var(--muted)}
.tag{display:inline-block;background:var(--chip);border-radius:6px;padding:1px 8px;font-size:12px;font-weight:700}
.grid3{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.hint{margin:-8px 0 10px;font-size:13px;font-weight:600;color:var(--muted)}
.bk{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.bc{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px}
.bh{display:flex;align-items:center;gap:12px}.bh h3{margin:0;font-size:17px}.rk{margin-left:auto;font-weight:800;font-size:13px;color:var(--muted)}
.lgo{width:52px;height:52px;flex:0 0 52px}
.rt{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}.rt b{color:var(--ink)}
.stars{display:inline-block;font-size:15px;letter-spacing:1px;background:linear-gradient(90deg,var(--hot) var(--w),var(--line) var(--w));-webkit-background-clip:text;background-clip:text;color:transparent}.stars:before{content:"★★★★★"}
.bd{margin:0;font-size:14px;color:var(--muted)}
.bo{display:flex;align-items:center;gap:12px;background:var(--chip);border-radius:10px;padding:10px 12px}.bo b{font-size:30px;line-height:1;color:var(--brand)}.bo span{font-size:13px}
.cd2{display:flex;gap:8px;align-items:center}.cd2 code{flex:1;min-width:0;border:1px dashed var(--muted);border-radius:8px;padding:8px 10px;font:700 14px ui-monospace,Menlo,Consolas,monospace;text-align:center;letter-spacing:.04em;overflow:hidden;text-overflow:ellipsis}
.cp{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:8px;padding:8px 12px;font:700 13px var(--f);cursor:pointer}
.bc .btn{text-align:center}
.sh{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.sh .btn{flex:0 0 auto;margin-top:4px}
#pj{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;position:relative;padding-bottom:10px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
#pj .pl{flex:0 0 max(280px,calc((100% - 24px)/3));scroll-snap-align:start}
@media (max-width:860px){#pj{flex-direction:column;overflow-x:hidden;overflow-y:auto;scroll-snap-type:y proximity;overscroll-behavior:contain;padding-bottom:0}#pj .pl{flex:0 0 auto}}
.pl{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px}.pl h4{margin:0 0 8px;display:flex;align-items:center;gap:8px}.av{width:30px;height:30px;border-radius:50%;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center;font-weight:800;font-size:13px}
.ps{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}.ps span{background:var(--chip);border-radius:6px;padding:2px 7px;font-size:13px;font-weight:700}
.pl p{margin:0;font-size:13px;color:var(--muted)}
.pml{margin:2px 0 8px}
.pn{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vm{flex:0 0 auto;margin-left:auto;font-size:12px;font-weight:700;padding:5px 10px;border-radius:8px;background:var(--chip);color:var(--ink);text-decoration:none;white-space:nowrap}.vm:hover{background:var(--brand);color:var(--brand-ink)}
.pm{display:grid;grid-template-columns:14px minmax(0,1fr) auto;align-items:center;gap:6px;padding:4px 0;border-top:1px solid var(--line);font-size:12px}
.pm em{font-style:normal;color:var(--muted);font-size:11px}
.pt{display:flex;align-items:center;gap:4px;min-width:0}.pt span{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pt i{font-style:normal;font-size:10px;color:var(--muted);font-weight:700}
.pt .cr{width:16px;height:16px;flex:0 0 16px}
.pm b{background:var(--chip);border-radius:6px;padding:1px 7px;font-size:12px;min-width:26px;text-align:center}
.ads{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:40px}
.ad{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:90px;border-radius:12px;color:#fff;text-decoration:none;text-align:center;padding:10px;background:linear-gradient(135deg,#0b3d91,#1f6feb)}.ad.v2{background:linear-gradient(135deg,#7a1fa2,#c026d3)}
.ad small{position:absolute;left:10px;top:6px;font-size:10px;text-transform:uppercase;letter-spacing:.06em;opacity:.8}.ad b{font-size:22px;letter-spacing:.04em}.ad span{font-size:12px;opacity:.85}
.ft{background:var(--nav);color:var(--navtxt);margin-top:20px;padding:34px 0 110px;font-size:14px}.ft.noad{padding-bottom:30px}
.ft a{color:var(--navtxt);opacity:.85;text-decoration:none}.ft a:hover{color:#34d27b;opacity:1}
.fg{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}.fg2{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
.ft h3{font-size:13px;text-transform:uppercase;letter-spacing:.07em;color:var(--hot);margin:0 0 10px}.ft h4{font-size:13px;margin:14px 0 6px}
.ft ul{list-style:none;margin:0;padding:0}.ft li{margin-bottom:6px}
.fc{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:16px}.fc p{margin:0 0 8px}
.fb{display:inline-block;background:#34d27b;color:#04210f!important;font-weight:700;padding:9px 14px;border-radius:9px;opacity:1!important}.fb.o{background:none;color:var(--navtxt)!important;border:1px solid rgba(255,255,255,.2)}
.lg{background:rgba(255,255,255,.07);border-radius:10px;padding:12px 14px;margin-top:22px;font-size:13px}
.fl{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between;font-size:13px}
.adfix{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--card);border-top:1px solid var(--line);text-align:center;padding:8px 44px calc(8px + env(safe-area-inset-bottom,0px));box-shadow:0 -4px 18px rgba(0,0,0,.12)}
.adfix small{position:absolute;left:12px;top:6px;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.adfix a{display:inline-flex;align-items:center;justify-content:center;min-height:50px;width:min(100%,728px);border-radius:8px;color:#fff;font-weight:800;text-decoration:none;background:linear-gradient(135deg,#0b3d91,#1f6feb)}.adfix a.v2{background:linear-gradient(135deg,#7a1fa2,#c026d3)}
.cz{display:grid;width:min(100%,728px);margin:0 auto}
.sl{grid-area:1/1;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s;text-align:center}.sl.on{opacity:1;visibility:visible}
.sl b{font-size:20px;letter-spacing:.04em}.sl span{font-size:11px;opacity:.85}
.adfix a.v3{background:linear-gradient(135deg,#0a6b3d,#16a34a)}
.adfix .dots{display:flex;gap:6px;justify-content:center;margin-top:6px}.adfix .dots button{position:static;width:9px;height:9px;padding:0;border:0;border-radius:50%;background:var(--line);cursor:pointer}.adfix .dots button[aria-current="true"]{background:var(--brand)}
.adfix button{position:absolute;right:8px;top:6px;width:32px;height:32px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font-size:18px;line-height:1;cursor:pointer}
@media (max-width:900px){.fg{grid-template-columns:1fr 1fr}.fg2{grid-template-columns:1fr}.ads{grid-template-columns:1fr}}@media (max-width:560px){.fg{grid-template-columns:1fr}}
.note{font-size:12px;color:var(--muted);margin-top:8px}
@media (max-width:860px){.lay{grid-template-columns:1fr}.sum{order:-1;position:sticky;top:calc(58px + env(safe-area-inset-top,0px));z-index:15;display:grid;grid-template-columns:repeat(3,1fr);gap:6px 8px;align-items:center;padding:10px;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.14)}.sum h3,.sum .msg{display:none}.sum>div:nth-of-type(1){grid-column:1/-1}.sum .bar{margin:4px 0 2px}.sum .kv{grid-column:span 2;margin:0;gap:6px}.sum .kv div{padding:4px 2px;font-size:10px}.sum .kv b{font-size:15px}.sum .tot{grid-column:span 1;flex-direction:column;align-items:flex-end;border:0;padding:0;margin:0;font-size:12px}.sum .tot b{font-size:17px}.sum .btn{width:100%;margin:0;padding:9px 6px;font-size:12px;white-space:normal;line-height:1.2}.mc{grid-template-columns:1fr}.pks{justify-content:space-between}.pk{flex:1;width:auto}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ===== Cartes de grilles (vresultats.php, vpromosport.php) ===== */
.rc{flex:0 0 230px;display:flex;flex-direction:column;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;color:var(--ink);text-decoration:none;scroll-snap-align:start;transition:border-color .15s,transform .15s}
.rc:hover{border-color:var(--brand);transform:translateY(-2px)}
.rc-top{display:flex;align-items:center;gap:12px}
.rc-logo{position:relative;flex:0 0 56px;width:56px;height:56px;border-radius:12px;background:var(--chip)}
.rc-logo img{display:block;width:56px;height:56px;object-fit:contain;border-radius:12px}
.rc-logo b{position:absolute;right:-8px;bottom:-6px;min-width:28px;padding:1px 6px;border-radius:999px;background:var(--brand);color:var(--brand-ink);font-size:11px;font-weight:800;text-align:center;border:2px solid var(--card)}
.rc h4{margin:4px 0 0;font-size:16px}
.rc small{color:var(--muted)}
.rc strong{display:block;font-size:20px}
.rc p{margin:0;font-size:13px;color:var(--muted)}
.rc-st{align-self:flex-start;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:6px;background:var(--chip);color:var(--ink)}
.rc-open .rc-st{background:var(--brand);color:var(--brand-ink)}
.rc-live .rc-st{background:var(--hot);color:#2b1a00}
.rc-live .rc-st:before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:currentColor;animation:rcblink 1s steps(2,start) infinite}
.rc-go{margin-top:auto;padding-top:4px;font-size:13px;font-weight:700;color:var(--brand)}
@keyframes rcblink{to{visibility:hidden}}
.scroll{scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin;padding-top:4px}

/* ===== Page d'accueil ===== */
a.chip{text-decoration:none;display:inline-block}
.nt{background:var(--hot);color:#2b1a00;font-weight:600;text-align:center;padding:10px 18px}
.nt a{color:inherit}
.jg{margin:0 0 26px}
.jg-h{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:0 0 10px}
.jg-h img{width:44px;height:44px;object-fit:contain;border-radius:10px;background:var(--chip)}
.jg-h h3{margin:0;font-size:20px}
.jg-c{font-size:12px;font-weight:700;background:var(--chip);border-radius:999px;padding:2px 10px;color:var(--muted)}
.jg-a{display:flex;gap:8px;margin-left:auto}
.promo{display:flex;align-items:center;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;color:var(--ink);text-decoration:none}
.promo:hover{border-color:var(--brand)}
.promo img{width:120px;height:auto;border-radius:10px;flex:0 0 auto}
.promo div{flex:1;min-width:0}.promo strong{display:block;font-size:17px}.promo span{color:var(--muted);font-size:14px}
.vp-empty{padding:18px;text-align:center;color:var(--muted)}
.sl.im{background:none!important;min-height:0}.sl.im img{max-height:70px;max-width:100%;height:auto}
@media (max-width:640px){.promo{flex-direction:column;align-items:flex-start}.jg-a{margin-left:0;width:100%}}
@media (prefers-reduced-motion:reduce){.rc-live .rc-st:before{animation:none}.rc{transition:none}}