/* ScoreRadar — repere visuel : applications de paris sportifs
   fond gris-bleu, cartes blanches tres arrondies, bleu marine, rouge au minimum */
:root{
  --bg:#EDF1F7; --surf:#FFFFFF; --tuile:#E8F1FA; --tuile2:#F2F6FB;
  --ink:#14375E; --ink2:#56779A; --ink3:#67809C;
  --line:#E4EBF3;
  --pri:#1E7BE0; --pri-s:#E3EFFC;
  --ok:#3BA55D; --warn:#D98B0B; --bad:#D9534F; --live:#E8543F;
  --or:#B4820A; --ok-s:#E7F5EC;--or-s:#FBF3DC;
  --r:16px; --r2:9px; --r3:6px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --ombre:0 1px 3px rgba(20,55,94,.07);
  --nav:64px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0F1B2A; --surf:#16233A; --tuile:#1D2E48; --tuile2:#1A2740;
  --ink:#E8EEF7; --ink2:#9BB3CE; --ink3:#7089A6;
  --line:#22334D;
  --pri:#4D9BF0; --pri-s:#152B47;
  --ok:#5DD47F; --warn:#F0B44C; --bad:#F08078; --live:#F08078;
  --or:#E0BC5C; --or-s:#2A2313;
  --ombre:0 1px 3px rgba(0,0,0,.35);
;--ok-s:#12291C}}
:root[data-theme="dark"]{
  --bg:#0F1B2A; --surf:#16233A; --tuile:#1D2E48; --tuile2:#1A2740;
  --ink:#E8EEF7; --ink2:#9BB3CE; --ink3:#7089A6;
  --line:#22334D;
  --pri:#4D9BF0; --pri-s:#152B47;
  --ok:#5DD47F; --warn:#F0B44C; --bad:#F08078; --live:#F08078;
  --or:#E0BC5C; --or-s:#2A2313;
  --ombre:0 1px 3px rgba(0,0,0,.35);
;--ok-s:#12291C}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;height:100%;overflow:hidden}
body{margin:0;background:var(--bg);color:var(--ink);line-height:1.45;font-size:16px;
  font-family:ui-sans-serif,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-variant-numeric:tabular-nums;
  height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  overscroll-behavior-y:none;
  padding-bottom:calc(var(--nav) + env(safe-area-inset-bottom) + var(--s4))}
.wrap{max-width:var(--large);margin:0 auto;
  padding:0 max(var(--s3),env(safe-area-inset-left)) 0 max(var(--s3),env(safe-area-inset-right))}

/* ---------- barre superieure ---------- */
.top{position:sticky;top:0;z-index:20;background:var(--bg);
  padding:calc(var(--s4) + env(safe-area-inset-top)) var(--s3) var(--s3)}
.top-in{max-width:var(--large);margin:0 auto;display:flex;align-items:center;gap:var(--s2)}
h1{font-size:1.42rem;font-weight:700;letter-spacing:-.02em;margin:0;flex:none}
.etat{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:600;color:var(--live)}
.etat::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;
  animation:puls 2.4s ease-in-out infinite}
.etat.off{color:var(--ink3)} .etat.off::before{animation:none}
@keyframes puls{0%,100%{opacity:1}50%{opacity:.3}}
.compte{margin-left:auto;font-size:.74rem;color:var(--ink2);font-weight:500;text-align:right;line-height:1.25}
.compte b{color:var(--ink);font-weight:700}

/* ---------- filtres ---------- */
.filtres{display:flex;gap:var(--s2);overflow-x:auto;padding:var(--s3) var(--s3) var(--s1);
  scrollbar-width:none;max-width:var(--large);margin:0 auto}
.filtres::-webkit-scrollbar{display:none}
.f{min-height:44px;flex:none;white-space:nowrap;font:inherit;font-size:.82rem;font-weight:500;padding:9px 16px;min-height:44px;
  border:0;background:var(--surf);color:var(--ink2);cursor:pointer;border-radius:99px;
  box-shadow:var(--ombre);transition:background .18s,color .18s}
.f[aria-pressed="true"]{background:var(--pri);color:#fff;font-weight:600}
.f:focus-visible{outline:2px solid var(--pri);outline-offset:2px}

/* ---------- sections ---------- */
.sct{margin:var(--s5) 0 0}
.sct-h{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3);flex-wrap:wrap}
.sct-h h2{font-size:1.12rem;font-weight:700;margin:0;letter-spacing:-.015em}
.sct-n{background:var(--pri-s);color:var(--pri);font-size:.76rem;font-weight:700;
  padding:2px 9px;border-radius:99px}
.sct-h p{flex-basis:100%;margin:0;font-size:.78rem;color:var(--ink2);line-height:1.5}
.sct.urgent h2::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--live);margin-left:8px;vertical-align:middle}

/* ---------- carte ---------- */
.c{display:block;text-decoration:none;color:inherit;background:var(--surf);border-radius:var(--r);
  box-shadow:var(--ombre);margin-bottom:var(--s3);overflow:hidden;transition:box-shadow .18s}
.c:active{box-shadow:0 0 0 1.5px var(--pri), var(--ombre)}
.c.decl{box-shadow:0 0 0 1.5px var(--pri), var(--ombre)}
.c.flash{animation:fl 1.1s ease-out}
@keyframes fl{from{background:var(--pri-s)}to{background:var(--surf)}}
.c-h{display:grid;grid-template-columns:54px 1fr auto;gap:var(--s2) var(--s3);
  align-items:start;padding:var(--s3) var(--s4)}
.note{width:54px;text-align:center}
.note b{display:block;font-size:1.85rem;font-weight:700;letter-spacing:-.035em;line-height:1;color:var(--ink3)}
.fort .note b{color:var(--ok)} .moyen .note b{color:var(--warn)}
.note i{display:block;height:4px;border-radius:99px;background:var(--ink3);opacity:.35;margin-top:6px}
.fort .note i{background:var(--ok);opacity:1} .moyen .note i{background:var(--warn);opacity:1}
.c-id{min-width:0}
.c-id h3{margin:0;font-size:1.05rem;font-weight:700;letter-spacing:-.015em;line-height:1.3;
  display:block;overflow-wrap:anywhere}
.c-id h3 svg{color:var(--ink3);flex:none}
.c-id h3::after{content:"›";color:var(--pri);font-weight:600;font-size:1.1rem;margin-left:5px}
.adv{margin:2px 0 0;font-size:.82rem;color:var(--ink2);display:block;line-height:1.35;
  overflow-wrap:anywhere}
.adv svg{color:var(--ink3);flex:none}
.rg{font-size:.7rem;color:var(--ink3);font-weight:500;margin-left:2px}
.tag{flex:none;background:var(--pri-s);color:var(--pri);font-size:.84rem;font-weight:700;
  padding:6px 12px;border-radius:var(--r2)}

/* ---------- score ---------- */
.score{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;padding:0 var(--s4) var(--s4)}
.set{display:flex;flex-direction:column;align-items:center;min-width:34px;
  background:var(--tuile);border-radius:var(--r3);padding:4px 8px}
.set .sl{font-size:.56rem;color:var(--ink3);font-weight:500}
.set span:not(.sl){font-size:.98rem;font-weight:500;color:var(--ink2);line-height:1.3}
.set .gagne{color:var(--ink);font-weight:700}
.set.encours span:not(.sl){color:var(--ok);font-weight:700}
.jauge{position:relative;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;
  background:var(--tuile2);border-radius:99px;overflow:hidden;margin-left:auto}
.jauge i{position:absolute;left:0;top:0;bottom:0;opacity:.22}
.jauge b{position:relative;font-size:.86rem;font-weight:700}
.jauge span{position:relative;font-size:.62rem;color:var(--ink3);font-weight:500}
.jauge.h i{background:var(--ok)} .jauge.h b{color:var(--ok)}
.jauge.m i{background:var(--warn)} .jauge.m b{color:var(--warn)}
.jauge.b i{background:var(--bad)} .jauge.b b{color:var(--bad)}
.reste{font-size:.72rem;color:var(--ink3);font-weight:500;white-space:nowrap}

/* ---------- metriques ---------- */
.mts{display:grid;grid-template-columns:repeat(auto-fit,minmax(4.3rem,1fr));
  gap:var(--s1);padding:0 var(--s4) var(--s3)}
.mt{background:var(--tuile2);border-radius:var(--r3);padding:7px 4px;text-align:center;
  display:flex;flex-direction:column;gap:1px}
.mt-k{font-size:.58rem;color:var(--ink3);font-weight:500;line-height:1.3}
.mt-v{font-size:.98rem;font-weight:600}
.mt.grand .mt-v{font-size:1.1rem;font-weight:700}
.mt.grand.p .mt-v{color:var(--ok)} .mt.grand.n .mt-v{color:var(--bad)}
.mt.bon .mt-v{color:var(--ok)} .mt.decl .mt-v{color:var(--pri)}

/* ---------- probabilites ---------- */
.proba{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);padding:0 var(--s4) var(--s4)}
.pr{background:var(--tuile2);border-radius:var(--r2);padding:9px 6px;text-align:center;
  display:flex;flex-direction:column;gap:2px}
.pr-k{font-size:.66rem;color:var(--ink3);font-weight:500}
.pr-v{font-size:1.2rem;font-weight:600;color:var(--ink2);letter-spacing:-.02em}
.pr-c{font-size:.68rem;color:var(--ink3);font-weight:500}
.pr.cle{background:var(--pri-s)}
.pr.cle .pr-k{color:var(--pri)}
.pr.cle .pr-v{color:var(--pri);font-size:1.42rem;font-weight:700}
.pr.cle .pr-c{color:var(--pri);font-weight:600}

/* ---------- programme du jour ---------- */
.lj{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);
  text-decoration:none;color:inherit;border-bottom:1px solid var(--line)}
.lj:last-child{border-bottom:0}
.lj.or{background:var(--or-s)}
.lj-p{flex:none;width:46px;text-align:center}
.lj-p b{display:block;font-size:1.35rem;font-weight:700;color:var(--pri);line-height:1}
.lj-p span{font-size:.62rem;color:var(--ink3);font-weight:500}
.lj-n{flex:1;min-width:0}
.lj-n b{display:block;font-size:.98rem;font-weight:600;letter-spacing:-.01em}
.lj-n span{font-size:.76rem;color:var(--ink2)}
.lj-c{flex:none;text-align:right}
.lj-c b{display:block;font-size:1rem;font-weight:700;color:var(--pri)}
.lj-c span{font-size:.62rem;color:var(--ink3);font-weight:500}
.et{color:var(--or);font-weight:700;font-size:.9rem;margin-right:4px}
.bloc{background:var(--surf);border-radius:var(--r);box-shadow:var(--ombre);overflow:hidden;
  margin-bottom:var(--s3)}

/* ---------- navigation basse ---------- */
nav{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;background:var(--surf);
  border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);
  /* sa propre couche de composition : sans cela iOS la laisse deriver pendant le
     defilement elastique et quand la barre d'adresse se retracte. */
  backface-visibility:hidden}
nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:9px 4px;min-height:var(--nav);text-decoration:none;color:var(--ink3);
  font-size:.66rem;font-weight:500}
nav a[aria-current="page"]{color:var(--pri);font-weight:600}
nav a svg{width:22px;height:22px}
nav a:focus-visible{outline:2px solid var(--pri);outline-offset:-3px}

/* ---------- divers ---------- */
.vide{text-align:center;padding:var(--s6) var(--s4);color:var(--ink3);font-size:.86rem}
.sk{height:5rem;background:var(--surf);border-radius:var(--r);margin-bottom:var(--s3);
  box-shadow:var(--ombre);position:relative;overflow:hidden}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(30,123,224,.07),transparent);
  animation:sh 1.5s infinite}
@keyframes sh{to{transform:translateX(100%)}}
.note-p{font-size:.82rem;color:var(--ink2);line-height:1.6;margin:var(--s4) 0 0}
.note-p b{color:var(--ink);font-weight:600}
.lex{margin-top:var(--s5);background:var(--surf);border-radius:var(--r);
  box-shadow:var(--ombre);padding:var(--s4)}
.lex h2{font-size:1.05rem;font-weight:700;margin:0 0 var(--s3)}
.lxg{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:0 var(--s4)}
.lx{padding:var(--s2) 0;border-bottom:1px solid var(--line)}
.lx dt{font-size:.82rem;font-weight:600;margin-bottom:2px}
.lx dd{margin:0;font-size:.76rem;color:var(--ink2);line-height:1.5}
.lx.cle dt{color:var(--pri)}

/* ---------- connexion ---------- */
.co{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:var(--s5)}
.co form{background:var(--surf);border-radius:var(--r);box-shadow:var(--ombre);
  padding:var(--s5);width:100%;max-width:23rem}
.co h1{font-size:1.6rem;margin-bottom:4px}
.co p{color:var(--ink2);font-size:.86rem;margin:0 0 var(--s5)}
.co label{display:block;font-size:.76rem;font-weight:600;color:var(--ink2);margin-bottom:6px}
.co input{width:100%;font:inherit;font-size:1rem;padding:13px 14px;background:var(--tuile2);
  border:1px solid var(--line);border-radius:var(--r2);color:var(--ink);margin-bottom:var(--s4)}
.co input:focus{outline:2px solid var(--pri);outline-offset:0;border-color:transparent}
.co button{width:100%;font:inherit;font-weight:600;font-size:1rem;padding:14px;border:0;
  background:var(--pri);color:#fff;cursor:pointer;min-height:48px;border-radius:var(--r2)}
.co button:hover{opacity:.9}
.err{color:var(--bad)!important;font-weight:600;margin-bottom:var(--s3)!important}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:26rem){
  /* les cotes passent sous l'identité : plus aucun chevauchement */
  .c-h{grid-template-columns:46px 1fr}
  .cotes{grid-column:1 / -1;text-align:left;padding-top:2px;
    border-top:1px solid var(--line);margin-top:2px}
  .duo{justify-content:flex-start}
  .cc.juste{padding-left:var(--s3);margin-left:var(--s2)}
  .gain{text-align:left}
  .note{width:46px}
  .note b{font-size:1.6rem}
  .c-id h3{font-size:1rem}
}
@media (min-width:34rem){.mts{grid-template-columns:repeat(7,1fr)}}
@media (min-width:46rem) and (min-height:34rem) and (pointer:fine){
  html{height:auto;overflow:visible}
  body{padding-bottom:var(--s5);height:auto;overflow:visible}
  nav{position:sticky;top:0;bottom:auto;border-top:0;border-bottom:1px solid var(--line);
    max-width:var(--large);margin:0 auto;background:var(--bg);padding:0}
  nav a{flex:none;flex-direction:row;gap:7px;padding:11px 16px;min-height:44px}
}

/* ---------- second joueur, sous la carte ---------- */
.second{border-top:1px solid var(--line);padding:var(--s2) 0 var(--s3)}
.second-n{display:block;font-size:.72rem;color:var(--ink3);font-weight:600;padding:0 var(--s4) 4px}
.mts.sec .mt{background:transparent;border:1px solid var(--line)}
.mts.sec .mt-v{font-size:.88rem;color:var(--ink2);font-weight:500}
.mts.sec .mt.grand .mt-v{font-size:.95rem}

/* ---------- page Zéro ---------- */
.regle{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);margin:0 0 var(--s3);
  background:var(--surf);border-radius:var(--r);box-shadow:var(--ombre);padding:var(--s3) var(--s4)}
.regle div{display:flex;flex-direction:column}
.regle b{font-size:1.15rem;font-weight:700;color:var(--pri)}
.regle span{font-size:.66rem;color:var(--ink3);font-weight:500}
.cotes{text-align:right;min-width:0}
/* .off supprime : ecrasait .etat (indicateur affiche en 1,5rem gras) */
.off.pos{color:var(--ok)} .off.neutre{color:var(--ink)} .off.neg{color:var(--bad)} .gain.neutre{color:var(--ink3)} .gain.neg{color:var(--bad)}
.frais{font-size:.68rem;color:var(--ink3);font-weight:500;white-space:nowrap}
.et{color:var(--or);font-weight:700;margin-right:5px}
.vide{background:var(--surf);border-radius:var(--r);box-shadow:var(--ombre);
  padding:var(--s5) var(--s4);text-align:center;color:var(--ink2)}
.vide b{display:block;color:var(--ink);font-size:1.05rem;margin-bottom:6px}
.vide p{margin:0;font-size:.82rem;line-height:1.6;max-width:28rem;margin-inline:auto}

/* ---------- offerte contre juste, côte à côte ---------- */
.duo{display:flex;gap:var(--s2);align-items:flex-end;justify-content:flex-end;flex-wrap:nowrap}
.cc{display:flex;flex-direction:column;align-items:center;line-height:1.05}
.cc b{font-size:1.45rem;font-weight:700;letter-spacing:-.025em}
.cc em{font-style:normal;font-size:.55rem;font-weight:600;color:var(--ink3);
  text-transform:uppercase;letter-spacing:.06em;margin-top:2px}
.cc.juste b{font-size:1.15rem;font-weight:600;color:var(--ink3)}
.cc.juste{padding-left:var(--s2);border-left:1px solid var(--line)}
.cc.offerte.pos b{color:var(--ok)} .cc.offerte.neutre b{color:var(--ink)}
.cc.offerte.neg b{color:var(--bad)}

/* ---------- tournoi dans l'en-tête de carte ---------- */
.c-id .tn{margin:4px 0 0;font-size:.74rem;color:var(--ink2);font-weight:500;
  display:block;line-height:1.4}
.c-id .tn .ci{margin-left:7px;white-space:nowrap}
.c-id .tn .ci{color:var(--pri);font-weight:600;font-size:.7rem}

/* ---------- entrées conservées à l'écran ---------- */
.c.veille{opacity:.78}
.c.veille:hover{opacity:1}
.bandeau{padding:6px var(--s4);font-size:.74rem;font-weight:600;letter-spacing:.01em}
.bandeau b{font-weight:700}
.bandeau.actif{background:var(--ok);color:#fff}
.bandeau.att{background:var(--tuile);color:var(--ink2)}
.sct.urgent h2{color:var(--ok)}
.sct.urgent .sct-n{background:var(--ok);color:#fff}
.cc em sup{font-size:.8em;font-weight:700;margin-left:1px}

/* ---------- historique ---------- */
.bil{background:var(--surf);border-radius:var(--r);box-shadow:var(--ombre);
  padding:var(--s3) var(--s4);margin-bottom:var(--s2)}
.bil-t{display:block;font-size:.72rem;font-weight:700;color:var(--ink2);margin-bottom:6px}
.bil.pos .bil-t{color:var(--ok)} .bil.neg .bil-t{color:var(--bad)}
.bil-g{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s2)}
.bil-g div{display:flex;flex-direction:column;text-align:center}
.bil-g b{font-size:1.05rem;font-weight:700}
.bil-g b.p{color:var(--ok)} .bil-g b.n{color:var(--bad)}
.bil-g span{font-size:.55rem;color:var(--ink3);font-weight:500}
.hl{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s4);
  border-bottom:1px solid var(--line)}
.hl:last-child{border-bottom:0}
.hl-r{flex:none;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:.8rem;font-weight:700;color:#fff}
.hl.ok .hl-r{background:var(--ok)} .hl.ko .hl-r{background:var(--bad)}
.hl-n{flex:1;min-width:0}
.hl-n b{display:block;font-size:.92rem;font-weight:600}
.hl-n span{font-size:.7rem;color:var(--ink3);display:block;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.hl-c,.hl-p{flex:none;text-align:right}
.hl-c b,.hl-p b{display:block;font-size:.94rem;font-weight:700}
.hl-p b{color:var(--pri)}
.hl-c span,.hl-p span{font-size:.6rem;color:var(--ink3)}
@media (max-width:26rem){.bil-g{grid-template-columns:repeat(3,1fr);gap:var(--s2) var(--s1)}}
.bil-g{grid-template-columns:repeat(5,1fr)}
.bil-g .large{grid-column:1 / -1;border-top:1px solid var(--line);padding-top:6px;margin-top:2px}
.bil-g .large b{font-size:1.15rem}
.hl-r{width:auto;height:auto;border-radius:99px;padding:3px 9px;font-size:.6rem;letter-spacing:.05em}
nav a{font-size:.6rem}
@media (max-width:26rem){.bil-g{grid-template-columns:repeat(4,1fr)}}
.f.alerte{background:var(--pri);color:#fff;font-weight:600;white-space:nowrap}
.f.alerte.on{background:var(--ok)}
.f.alerte:disabled{background:var(--tuile);color:var(--ink3);cursor:default}
#f-val[aria-pressed="true"]{background:var(--ok)}
#f-neg[aria-pressed="true"]{background:var(--bad)}
.pagi{display:flex;align-items:center;justify-content:center;gap:var(--s3);margin:var(--s4) 0}
.pagi span{font-size:.76rem;color:var(--ink3);font-weight:500}
.pagi .f:disabled{opacity:.4;cursor:default}

/* ---------- le sort du jeu repéré : contour vert ou rouge ---------- */
.c.gagne{box-shadow:0 0 0 2px var(--ok), var(--ombre);opacity:1}
.c.perdu{box-shadow:0 0 0 2px var(--bad), var(--ombre);opacity:1}
.bandeau.gagne{background:var(--ok);color:#fff;font-weight:700;letter-spacing:.03em}
.bandeau.perdu{background:var(--bad);color:#fff;font-weight:700;letter-spacing:.03em}
.c.gagne .note b,.c.perdu .note b{opacity:.85}
/* à 0-0 : cadre bleu, quel que soit le sort d'un jeu précédent */
.c.encours{box-shadow:0 0 0 2px var(--pri), var(--ombre);opacity:1}
.c.encours.gagne,.c.encours.perdu{box-shadow:0 0 0 2px var(--pri), var(--ombre)}
.f.alerte.ko{background:var(--bad);color:#fff}

/* ---------- diagnostic des alertes ---------- */
.diagbox{background:var(--surf);border-radius:var(--r);box-shadow:var(--ombre);
  padding:var(--s3) var(--s4);margin-bottom:var(--s3)}
.diagbox .dt{display:block;font-size:.8rem;font-weight:700;margin-bottom:6px}
.diagbox div{display:flex;justify-content:space-between;gap:var(--s3);
  padding:4px 0;border-bottom:1px solid var(--line);font-size:.78rem}
.diagbox div:last-child{border-bottom:0}
.diagbox span{color:var(--ink2)}
.diagbox b{font-weight:700;text-align:right}
.diagbox b.p{color:var(--ok)} .diagbox b.n{color:var(--bad)}
#btn-diag{min-width:44px;font-weight:700}
.lj.haut{background:var(--ok-s)} .lj.haut .lj-p b{color:var(--ok)}
.lj.bon .lj-p b{color:var(--pri)}
.lj-s{display:block;font-size:.58rem;color:var(--ink3);font-weight:500;margin-top:1px}
/* la chance domine, la cote s'efface */
.cc.offerte b{font-size:1.25rem;color:var(--ink2);font-weight:600}
.note b{font-size:2.1rem}
.c.fort .note b{color:var(--ok)}
#f-p[aria-pressed="true"],#f-val[aria-pressed="true"]{background:var(--ok)}

/* ---------------------------------------------------------------- page Selection */
[data-page="selection"] .sec{font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;
  font-weight:800;color:var(--ink2);margin:1.1rem .2rem .5rem}
[data-page="selection"] .sec:first-child{margin-top:.3rem}
.niv-A,.niv-B,.niv-C{position:relative}
.c-bandeau{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  padding:.45rem .7rem;border-bottom:1px solid var(--line)}
.c-bandeau .c-tour{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:.7rem;color:var(--ink2)}
.c-bandeau .c-heure{font-size:.7rem;color:var(--ink3);font-variant-numeric:tabular-nums}
.badge{font-size:.6rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:.12rem .4rem;border-radius:3px;color:#fff}
.b-A{background:var(--ok)}.b-B{background:var(--pri)}
.niv-A{border-left:3px solid var(--ok)}.niv-B{border-left:3px solid var(--pri)}
[data-page="selection"] .encours .c-heure{color:var(--live);font-weight:700}
.c-corps{padding:.6rem .7rem .7rem}
.c-corps h3{margin:0;font-size:1.05rem;font-weight:800;letter-spacing:-.01em}
.c-vs{margin:.1rem 0 .6rem;font-size:.82rem;color:var(--ink2)}
.c-vs b{color:var(--ink);font-weight:600}
.c-chiffres{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem}
.c-chiffres .ch{background:var(--tuile2);padding:.35rem .4rem;border-radius:4px;
  display:flex;flex-direction:column;gap:.1rem}
.c-chiffres .ch i{font-style:normal;font-size:.55rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink3);font-weight:700}
.c-chiffres .ch b{font-size:.95rem;font-weight:800;font-variant-numeric:tabular-nums}
.c-pied{margin:.5rem 0 0;font-size:.68rem;color:var(--ink3)}
[data-page="selection"] .regle{display:block;font-size:.76rem;line-height:1.55;padding:.6rem .75rem;
  background:var(--tuile2);border-radius:5px;margin-bottom:.8rem;color:var(--ink2)}
[data-page="selection"] .regle b{color:var(--ink);font-size:inherit}
[data-page="selection"] .r-n{display:block;margin-top:.25rem;font-size:.7rem;color:var(--ink3)}
[data-page="selection"] .vide{text-align:center;padding:2rem .5rem;color:var(--ink3);font-size:.85rem}
@media(max-width:26rem){.c-chiffres{grid-template-columns:repeat(2,1fr)}}

/* probabilite et detail des facteurs, page Selection */
.c-bandeau .pct{font-size:1rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  color:var(--ok);min-width:2.9rem}
.niv-B .pct{color:var(--pri)}.niv-C .pct{color:var(--ink2)}
.niv-C{border-left:3px solid var(--ink3)}
.c-det{list-style:none;margin:.55rem 0 0;padding:0;display:flex;flex-direction:column;gap:.15rem}
.c-det li{display:flex;justify-content:space-between;gap:.5rem;font-size:.7rem;
  color:var(--ink3);border-bottom:1px solid var(--line);padding-bottom:.12rem}
.c-det li:last-child{border-bottom:0}
.c-det li b{color:var(--ink2);font-weight:600;text-align:right;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-chiffres .ch i em{font-style:normal;text-transform:none;letter-spacing:0;opacity:.7}

/* la cote, affichee pour l'utilisateur mais absente de tout calcul */
.cote-b{font-size:.95rem;font-weight:800;font-variant-numeric:tabular-nums;
  background:var(--tuile2);color:var(--ink);
  padding:.1rem .4rem;border-radius:4px;min-width:2.6rem;text-align:center}
.cote-b.vide-c{color:var(--ink3);font-weight:600}
.c-chiffres .ch.cotes b{font-size:.95rem}
.c-chiffres .ch .c-adv{color:var(--ink3);font-weight:600;font-size:.82em}

/* ================= GRANDS ECRANS =================
   Le site etait bloque a 44rem partout : sur un ecran de 1400 a 1900 px,
   deux tiers de la largeur restaient vides. */
:root{--large:44rem}
@media (min-width:60rem){ :root{--large:64rem} }
@media (min-width:100rem){ :root{--large:88rem} }

@media (min-width:46rem){
  /* les deux barres collantes se recouvraient : nav (z-index 30) masquait
     le titre, l'etat, le compteur et les filtres des qu'on defilait */
  .top{top:2.85rem}
}
@media (min-width:60rem){
  /* Zero et Direct : les cartes sont hautes, on les met en grille */
  .sct{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 var(--s3);align-items:start}
  .sct-h{grid-column:1/-1}
  /* en grille, chaque carte est deux fois plus etroite : 7 tuiles n'y tiennent pas */
  .mts{grid-template-columns:repeat(4,1fr)}
  /* Programme : jusqu'a 200 lignes en une colonne */
  .bloc{display:grid;grid-template-columns:repeat(auto-fill,minmax(22rem,1fr))}
  .lj{border-right:1px solid var(--line)}
  .lj:last-child{border-bottom:1px solid var(--line)}
  /* Historique : les quatre bilans sont faits pour etre compares */
  #bilans{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s2)}
  #bilans .bil{margin-bottom:0}
  .hl-c,.hl-p{min-width:6rem}
  /* Selection : cartes plus courtes, on en met plus par ligne */
  [data-page="selection"] #liste{display:grid;
    grid-template-columns:repeat(auto-fill,minmax(21rem,1fr));
    gap:var(--s3);align-items:start}
  [data-page="selection"] #liste .c{margin-bottom:0}
}
@media (min-width:100rem){
  .sct{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ================= page PROGRAMME =================
   Le moteur tranche sur les qualites des joueurs ; la cote du marche est
   affichee a cote pour comparaison et n'entre dans aucun calcul.
   Bordure gauche = niveau de confiance : vert >= 80 %, bleu 70-80 %, gris en dessous. */
[data-page="programme"] .regle{display:block;font-size:.76rem;line-height:1.55;
  padding:var(--s3) var(--s4);background:var(--tuile2);border-radius:var(--r3);
  margin-bottom:var(--s3);color:var(--ink2)}
[data-page="programme"] .regle b{color:var(--ink);font-size:inherit;font-weight:600}
[data-page="programme"] .r-n{display:block;margin-top:.3rem;font-size:.7rem;color:var(--ink3)}
[data-page="programme"] .lg{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);
  margin-top:var(--s2);font-size:.68rem;color:var(--ink3);align-items:center}
[data-page="programme"] .lg i{display:inline-block;width:14px;height:4px;border-radius:99px;
  margin-right:5px;vertical-align:middle}
.lg-a{background:var(--ok)} .lg-b{background:var(--pri)} .lg-c{background:var(--ink3)}
[data-page="programme"] .vide{text-align:center;padding:2rem .5rem;color:var(--ink3);font-size:.85rem}

.c.pg{display:block;border-left:3px solid var(--ink3)}
.c.pg.niv-A{border-left-color:var(--ok)}
.c.pg.niv-B{border-left-color:var(--pri)}
.pg-h{display:flex;align-items:center;gap:var(--s2);
  padding:var(--s2) var(--s4);border-bottom:1px solid var(--line)}
.pg-h .pct{font-size:1.05rem;font-weight:700;letter-spacing:-.02em;
  min-width:3.1rem;color:var(--ok)}
.niv-B .pct{color:var(--pri)} .niv-C .pct{color:var(--ink2)}
.pg-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:.72rem;color:var(--ink2)}
.pg-hr{font-size:.72rem;color:var(--ink3);white-space:nowrap}
.pg-live{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:#fff;background:var(--live);padding:2px 6px;border-radius:99px;white-space:nowrap}
.pg-c{padding:var(--s3) var(--s4)}
.pg-duel{margin:0 0 var(--s3);display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px;
  font-size:.95rem;line-height:1.4}
.pg-duel b{font-weight:700;color:var(--ink)}
.pg-duel .rg{font-size:.64rem;color:var(--ink3);font-weight:500}
.pg-duel .pg-bat{font-size:.7rem;color:var(--ink3);margin:0 2px}
.pg-duel .pg-adv{color:var(--ink2);font-weight:500}
.pg-cotes{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2)}
.pg-cotes .cq{background:var(--tuile2);border-radius:var(--r3);padding:6px 8px;
  display:flex;flex-direction:column;gap:1px;min-width:0}
.pg-cotes .cq i{font-style:normal;font-size:.55rem;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink3);font-weight:600}
.pg-cotes .cq b,.pg-cotes .ecart{font-size:.95rem;font-weight:700}
.pg-cotes .cq.mk b{color:var(--ink2)}
.ecart{color:var(--ink2)} .ecart.ec-h{color:var(--ok)} .ecart.ec-b{color:var(--bad)}
.pg-d{list-style:none;margin:var(--s2) 0 0;padding:0;display:flex;flex-direction:column;gap:1px}
.pg-d li{display:flex;justify-content:space-between;gap:var(--s2);font-size:.68rem;
  color:var(--ink3);border-bottom:1px solid var(--line);padding-bottom:2px}
.pg-d li:last-child{border-bottom:0}
.pg-d li b{color:var(--ink2);font-weight:600;text-align:right;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}
.pg-p{margin:var(--s2) 0 0;font-size:.66rem;color:var(--ink3);
  display:flex;justify-content:space-between;gap:var(--s2);flex-wrap:wrap}
.pg-go{color:var(--pri);font-weight:600;white-space:nowrap}
@media (max-width:26rem){ .pg-cotes{grid-template-columns:repeat(2,1fr)} }
@media (min-width:60rem){
  [data-page="programme"] #liste{display:grid;
    grid-template-columns:repeat(auto-fill,minmax(23rem,1fr));gap:var(--s3);align-items:start}
  [data-page="programme"] #liste .c{margin-bottom:0}
}

/* ================= page BILAN =================
   On compare ce que le moteur avait annonce a ce qui s'est produit. */
[data-page="bilan"] .regle{display:block;font-size:.76rem;line-height:1.55;
  padding:var(--s3) var(--s4);background:var(--tuile2);border-radius:var(--r3);
  margin-bottom:var(--s3);color:var(--ink2)}
[data-page="bilan"] .regle b{color:var(--ink);font-size:inherit;font-weight:600}
[data-page="bilan"] .sec{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;
  font-weight:700;color:var(--ink3);margin:var(--s5) 2px var(--s3)}
[data-page="bilan"] .vide{text-align:center;padding:2rem .5rem;color:var(--ink3);font-size:.85rem}
.bg{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));
  gap:var(--s2);margin-bottom:var(--s3)}
.bt{background:var(--surf);border-radius:var(--r3);box-shadow:var(--ombre);
  padding:10px 12px;display:flex;flex-direction:column}
.bt .k{font-size:.58rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink3);font-weight:600}
.bt .v{font-size:1.35rem;font-weight:700;letter-spacing:-.02em;margin-top:2px}
.bt .s{font-size:.64rem;color:var(--ink3);margin-top:1px}
.bt.ok .v{color:var(--ok)} .bt.bad .v{color:var(--bad)}
.bc{padding:var(--s3) var(--s4)}
.cl{display:grid;grid-template-columns:4.6rem 3rem 1fr 5.4rem 2.6rem;
  gap:var(--s2);align-items:center;padding:7px 0;border-bottom:1px solid var(--line)}
.cl:last-child{border-bottom:0}
.cl-t{font-size:.72rem;color:var(--ink2);font-weight:600;white-space:nowrap}
.cl-n{font-size:.66rem;color:var(--ink3);text-align:right}
.cl-b{position:relative;height:10px;background:var(--tuile2);border-radius:99px}
.cl-b i{position:absolute;top:-1px;width:3px;height:12px;border-radius:2px;margin-left:-1px}
.cl-b i.an{background:var(--ink3)} .cl-b i.ob{background:var(--pri)}
.cl-v{font-size:.7rem;color:var(--ink3);text-align:right;white-space:nowrap}
.cl-v b{color:var(--pri);font-weight:700;margin-left:5px}
.cl-e{font-size:.68rem;font-weight:700;text-align:right}
.cl-e.ok{color:var(--ok)} .cl-e.warn{color:var(--warn)}
.bl-lg{display:flex;gap:var(--s3);align-items:center;font-size:.66rem;
  color:var(--ink3);margin:var(--s2) 0 0;flex-wrap:wrap}
.bl-lg i{display:inline-block;width:3px;height:11px;border-radius:2px;margin-right:5px;
  vertical-align:middle}
.bl-lg i.an{background:var(--ink3)} .bl-lg i.ob{background:var(--pri)}
.hl2{display:grid;grid-template-columns:1.6rem 1fr 2.6rem 3rem 2.8rem;gap:var(--s2);
  align-items:center;padding:9px var(--s4);background:var(--surf);
  border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.hl2:first-child{border-radius:var(--r) var(--r) 0 0}
.hl2:last-child{border-bottom:0;border-radius:0 0 var(--r) var(--r)}
.hl2 .r{font-weight:700;text-align:center}
.hl2.g .r{color:var(--ok)} .hl2.p .r{color:var(--bad)}
.hl2 .n{min-width:0;display:flex;flex-direction:column}
.hl2 .n b{font-size:.84rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hl2 .n .a{font-size:.66rem;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hl2 .d,.hl2 .k{font-size:.68rem;color:var(--ink3);text-align:right}
.hl2 .p{font-size:.8rem;font-weight:700;text-align:right;color:var(--pri)}
@media (max-width:26rem){
  .cl{grid-template-columns:4rem 1fr 4.6rem 2.4rem}
  .cl-n{display:none}
}
@media (min-width:60rem){
  [data-page="bilan"] #liste{display:grid;grid-template-columns:1fr 1fr;
    gap:0 var(--s3);align-items:start}
}
.vers-bilan{margin:0 0 var(--s3)}
.vers-bilan a{display:block;padding:11px var(--s4);background:var(--pri-s);color:var(--pri);
  border-radius:var(--r3);text-decoration:none;font-size:.82rem;font-weight:600;min-height:44px;
  display:flex;align-items:center}

/* tirer vers le bas pour actualiser (mobile) */
.tirer{position:fixed;top:-46px;left:50%;transform:translate(-50%,0);opacity:0;
  z-index:60;display:flex;align-items:center;gap:8px;pointer-events:none;
  background:var(--surf);box-shadow:var(--ombre);border-radius:99px;
  padding:7px 14px;font-size:.72rem;color:var(--ink2);font-weight:600;white-space:nowrap}
.tirer-r{width:14px;height:14px;border-radius:50%;border:2px solid var(--line);
  border-top-color:var(--pri);display:inline-block}
.tirer.pret .tirer-r{border-color:var(--pri);border-top-color:var(--pri)}
.tirer.tourne .tirer-r{animation:tr .7s linear infinite}
@keyframes tr{to{transform:rotate(360deg)}}

/* Un pronostic publie sur le site avant le match, par opposition a la reconstitution :
   c'est celui qui juge vraiment le moteur, il porte un lisere. */
.hl2.vecu{border-left:3px solid var(--pri);padding-left:calc(var(--s4) - 3px)}
.hl2.vecu.g{border-left-color:var(--ok)}
.hl2.vecu.p{border-left-color:var(--bad)}

/* Le niveau reel, a cote du classement : ce que les resultats disent du joueur,
   contre qui il a gagne et a quel niveau. Le classement reste un repere, pas un juge. */
.pg-n{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;
  margin:var(--s2) 0 0;padding:7px var(--s3);background:var(--pri-s);
  border-radius:var(--r3);font-size:.72rem;color:var(--ink2)}
.pg-n .lb{color:var(--ink3)}
.pg-n b{font-size:.82rem;font-weight:700;color:var(--pri);font-variant-numeric:tabular-nums}
.pg-n .c{color:var(--ink3);font-size:.68rem}
.pg-n em{font-style:normal;margin-left:auto;font-size:.68rem;color:var(--ink3)}

/* Le pari « l'outsider prend au moins un set » : sur un match desequilibre, la victoire
   du favori ne paie plus rien, alors qu'il reste une vraie cote a demander seulement a
   l'outsider de tenir un set. */
.pg-s{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin:var(--s2) 0 0;
  padding:8px var(--s3);background:var(--surf2,#f4f7fb);border:1px dashed var(--line);
  border-radius:var(--r3);font-size:.74rem;color:var(--ink2);line-height:1.5}
.pg-s .lb{display:block;width:100%;font-size:.64rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink3);font-weight:600}
.pg-s b{font-weight:650;color:var(--ink)}
.pg-s b.v{font-size:.9rem;color:var(--pri);font-variant-numeric:tabular-nums}
.pg-s em{font-style:normal;margin-left:auto;font-size:.68rem;color:var(--ink3)}
.pg-s .ch{display:block;width:100%;margin-top:5px;font-size:.68rem;color:var(--ink3);
  line-height:1.5}
.pg-s .ch b{color:var(--ink2);font-weight:650}

/* Le pari « l'outsider prend au moins un set », juge a part dans l'historique :
   il vise des cotes bien plus elevees, il ne doit pas etre melange au reste. */
.us{background:var(--surf);border-radius:var(--r);box-shadow:var(--ombre);
  padding:var(--s4);margin:0 0 var(--s4)}
.us h3{font-size:.95rem;font-weight:700;margin:0 0 var(--s2)}
.us-n{font-size:.76rem;color:var(--ink2);line-height:1.6;margin:0 0 var(--s3)}
.us-t{width:100%;border-collapse:collapse;font-size:.74rem;margin-top:var(--s3)}
.us-t th{text-align:right;font-weight:600;color:var(--ink3);font-size:.66rem;
  text-transform:uppercase;letter-spacing:.03em;padding:0 0 5px}
.us-t th:first-child,.us-t td:first-child{text-align:left}
.us-t td{text-align:right;padding:6px 0;border-top:1px solid var(--line);
  font-variant-numeric:tabular-nums}
.us-t td b{color:var(--pri);font-weight:700}
.pg-s .mk{display:block;width:100%;margin-top:4px;font-size:.7rem;color:var(--ink3)}
.pg-s .mk b{color:var(--ink2);font-weight:700;font-variant-numeric:tabular-nums}
.pg-s .mk.plus{color:var(--ok)}
.pg-s .mk.plus b{color:var(--ok)}
.pg-s .alt{display:block;width:100%;margin-top:5px;padding-top:5px;
  border-top:1px dotted var(--line);font-size:.72rem;color:var(--ink2)}
.pg-s .alt b{font-weight:650;color:var(--ink)}
.pg-s .alt b.v{color:var(--pri);font-variant-numeric:tabular-nums}
.pg-s .live{display:block;width:100%;margin-top:5px;font-size:.72rem;color:var(--ink2)}
.pg-s .live b{font-weight:700}
.pg-s .live.acquis{color:var(--ok)} .pg-s .live.acquis b{color:var(--ok)}
.pg-s .live.perdu{color:var(--bad)} .pg-s .live.perdu b{color:var(--bad)}

/* Les matchs de la nuit — dates du lendemain mais joues dans la foulee. Un programme
   cale sur le calendrier les faisait disparaitre a minuit. */
.pg-hr.nuit{display:inline-flex;align-items:baseline;gap:5px}
.pg-hr.nuit i{font-style:normal;font-size:.58rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:#fff;background:var(--ink2);border-radius:3px;padding:1px 4px}
.pg-hr.tard i{background:#b45309}

/* Le handicap en jeux : le meme joueur, une exigence de plus, et une cote qui double.
   Le bookmaker soigne sa cote de vainqueur et relache les lignes secondaires. */
.pg-hc{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin:var(--s2) 0 0;
  padding:8px var(--s3);background:var(--ok-s,#eaf7ee);border:1px solid var(--line);
  border-radius:var(--r3);font-size:.74rem;color:var(--ink2);line-height:1.5}
.pg-hc .lb{display:block;width:100%;font-size:.64rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink3);font-weight:600}
.pg-hc b{font-weight:650;color:var(--ink)}
.pg-hc b.v{font-size:.9rem;color:var(--ok);font-variant-numeric:tabular-nums}
.pg-hc em{font-style:normal;margin-left:auto;font-size:.68rem;color:var(--ink3)}
.pg-hc em b{color:var(--ink2)}
.pg-hc .ln{color:var(--ink3);font-size:.68rem;font-variant-numeric:tabular-nums}

/* Les paris du jour : dix lignes au plus, chacune une decision. */
.pj{display:flex;gap:var(--s3);align-items:flex-start;background:var(--surf);
  border-radius:var(--r);box-shadow:var(--ombre);padding:var(--s4);margin:0 0 var(--s3);
  text-decoration:none;color:inherit;border-left:4px solid var(--line)}
.pj.a{border-left-color:var(--ok)} .pj.b{border-left-color:var(--pri)}
.pj.c{border-left-color:var(--ink3)}
.pj-r{flex:none;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--pri-s);
  color:var(--pri);font-weight:700;font-size:.8rem;display:flex;align-items:center;
  justify-content:center}
.pj-c{min-width:0;flex:1}
.pj-t{margin:0;font-size:.95rem;font-weight:650;line-height:1.35}
.pj-s{margin:3px 0 0;font-size:.72rem;color:var(--ink3)}
.pj-s i{font-style:normal;font-weight:700;color:#fff;background:var(--ink2);
  border-radius:3px;padding:1px 4px;font-size:.58rem;text-transform:uppercase}
.pj-n{display:flex;gap:var(--s4);margin:var(--s3) 0 0;flex-wrap:wrap}
.pj-n span{display:flex;flex-direction:column;gap:1px}
.pj-n i{font-style:normal;font-size:.6rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink3);font-weight:600}
.pj-n b{font-size:1.05rem;font-weight:700;font-variant-numeric:tabular-nums}
.pj-p{margin:var(--s3) 0 0;font-size:.72rem;color:var(--ink2);line-height:1.55}
/* Quand le classement pese plus de 40 % de la decision, le moteur realise 67 % la ou
   il en annonce 77. On le signale, et la selection du jour refuse ces matchs. */
.pg-p b.alerte{color:var(--bad);font-weight:650}

/* QUAND LE MOTEUR NE TRANCHE PAS.
   Mesure : lorsque le classement pese plus de 45 % de la decision, le moteur annonce
   77 % et n'en realise que 67. Si en plus toutes les comparaisons designent l'autre
   joueur, afficher un gagnant serait malhonnete. On affiche le desaccord. */
.pg-ct{margin:var(--s2) 0 0;padding:8px var(--s3);background:#fef2f2;
  border:1px solid #fecaca;border-radius:var(--r3);font-size:.72rem;color:#7f1d1d;
  line-height:1.55}
.pg-ct b{font-weight:700}
.pct.ct{background:var(--line);color:var(--ink3)}
.pg-bat.ct{color:var(--bad);font-weight:700}

/* LES SEPT FORCES, FACE A FACE, SUR CHAQUE CARTE.
   Trois lignes de resume ne permettent pas de juger. Mesure sur 5 911 matchs : quand au
   moins cinq de ces sept mesures designent le meme joueur, il gagne 67 % du temps ;
   a l'unanimite, 79 %. Aucune ne regarde le classement. */
.duel{margin:var(--s3) 0 0;padding:var(--s3);background:var(--surf2,#f4f7fb);
  border-radius:var(--r3)}
.duel-t{margin:0 0 6px;font-size:.7rem;letter-spacing:.03em;text-transform:uppercase;
  color:var(--ink3);font-weight:600}
.duel-t .v{font-size:1rem;font-weight:800;color:var(--pri);letter-spacing:0}
.duel-t b{color:var(--ink2);text-transform:none;letter-spacing:0;font-size:.74rem}
.duel table{width:100%;border-collapse:collapse;font-size:.74rem}
.duel td{padding:3px 0;border-bottom:1px solid var(--line)}
.duel tr:last-child td{border-bottom:0}
.duel td.q{text-align:center;color:var(--ink3);font-size:.68rem}
.duel td.g,.duel td.d{width:4.4rem;font-variant-numeric:tabular-nums;color:var(--ink3)}
.duel td.d{text-align:right}
.duel tr.ok td.g{color:var(--ok);font-weight:700}
.duel tr.non td.d{color:var(--bad);font-weight:700}

/* Chronologie des jeux de service : un point par jeu, dans l'ordre.
   Elle repond a une question que le total ne repond pas — les breaks
   sont-ils au debut (le joueur s'est installe) ou a la fin (il lache) ? */
.chrono{display:flex;align-items:center;gap:.45rem;padding:.25rem .5rem;
  background:var(--tuile2);border-radius:var(--r3)}
/* dans le bloc score (un flex), la frise prend toute la largeur pour se caler
   juste SOUS la ligne « ~N jeux · repéré à HH:MM » plutot que de se coller a cote */
.score .chrono{flex:1 0 100%;margin:.1rem 0 0}
.chrono b{font-size:1.05rem;line-height:1;font-weight:700}
.chrono .pts{display:flex;gap:3px;flex-wrap:wrap}
.chrono .pts i{width:8px;height:8px;border-radius:50%;display:block}
.chrono .pts i.g-ok{background:var(--ok)}
.chrono .pts i.g-ko{background:transparent;box-shadow:inset 0 0 0 1.5px var(--bad)}
.chrono.up b{color:var(--ok)} .chrono.down b{color:var(--bad)} .chrono.flat b{color:var(--ink3)}

/* Sous-onglets de l'Historique : « Services » (les alertes de jeu de service, tenues
   ou non) et « Pronostics » (les paris du programme). Deux jeux de donnees distincts,
   deux calibrations distinctes — les melanger dans un seul tableau ne veut rien dire. */
.sous-onglets{display:flex;gap:.4rem;padding:0 var(--s4) .5rem}
.sous-onglets .so{flex:1;text-align:center;padding:.5rem .4rem;border-radius:var(--r3);
  background:var(--tuile2);color:var(--ink3);font-size:.82rem;font-weight:600;
  text-decoration:none;border:1px solid transparent}
.sous-onglets .so[aria-current="page"]{background:var(--pri);color:#fff;border-color:var(--pri)}

/* Niveau de retour de l'adversaire. Le libelle decrit le joueur d'en face,
   la couleur decrit NOTRE pari : un bon retourneur en face est un danger. */
.retadv{display:flex;align-items:center;gap:.5rem;margin:0 var(--s4) .6rem;
  padding:.5rem .7rem;border-radius:var(--r3);font-size:.86rem;font-weight:600;
  border:1px solid transparent}
.retadv i{font-size:1.05rem;flex:0 0 auto}
.retadv b{font-weight:700}
.retadv em{margin-left:auto;font-style:normal;font-size:.74rem;font-weight:500;opacity:.75}
.retadv.r-tbon{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok);
  border-color:color-mix(in srgb,var(--ok) 34%,transparent)}
.retadv.r-bon{background:color-mix(in srgb,var(--ok) 9%,transparent);color:var(--ok)}
.retadv.r-moy{background:var(--tuile2);color:var(--ink3)}
.retadv.r-mauv{background:color-mix(in srgb,var(--bad) 9%,transparent);color:var(--bad)}
.retadv.r-tmauv{background:color-mix(in srgb,var(--bad) 16%,transparent);color:var(--bad);
  border-color:color-mix(in srgb,var(--bad) 34%,transparent)}