:root{ /* Thème « néon » (inspiré OddScore) : fond quasi-noir + accent vert-lime + corail pour le négatif */ --bg:#080d15;--bg2:#0d0d10;--surface:#141417;--surface2:#1d1d21; /* fond bleu très sombre (user 2026-09-03) : même température que les cartes -> ensemble unifié/premium */ --border:#2a2a31;--border2:#3b3b44;--text:#f4f5f7;--muted:#9a9aa6;--dim:#8b8b95; /* Fond PREMIUM des cartes/panneaux = le MÊME dégradé bleuté que le panneau stats (.spf-cv), user 2026-09-10. Opaque (pas de translucide -> pas de halo de page changeant au dépli, cf. note 2026-08-16). */ /* Fond carte premium = SOLIDE (pas un dégradé) : un dégradé vertical se REDISTRIBUE quand la carte se déplie et grandit -> la luminosité du fond « change » au dépli (retour user récurrent 2026-07-21 / 2026-08-16 / 2026-09-13). Solide -> STRICTEMENT identique plié/déplié. Teinte proche de l'ancien haut. */ --card-bg:#1a2332; /* ACCENT principal — UN SEUL endroit à changer pour reskin (cf. candidats en bas) */ --accent:#22b8ff;--accent2:#1496f0;--accent-ink:#001321;--glow:rgba(34,184,255,.28); --halo:rgba(34,184,255,.09); --gold:#f6c54a;--gold-bg:#231d09;--gold-bd:#4a3c0c; --red:#ff6b6b;--green:#a6e22e;--brand:var(--accent); --cardline:rgba(34,184,255,.30);--cardglow:0 0 24px rgba(34,184,255,.10); --radius:16px;--shadow:0 12px 34px -6px rgba(0,0,0,.55);--shadow-sm:0 3px 12px -2px rgba(0,0,0,.42); /* ombres plus diffuses = profondeur premium (user 2026-08-19) */ /* Bord GAUCHE des cartes de pari selon l'état (demande user 2026-07-25) : en attente=JAUNE ; en cours (live)=même jaune (PAS de couleur dédiée -> le badge « 🟢 Live » suffit) ; gagné=vert ; perdu=rouge ; remboursé=gris. */ --st-soon:var(--gold);--st-live:var(--gold);--st-won:#34d27b;--st-lost:#ff6b6b;--st-void:#90a4be; } /* Home & Live = accent principal (hérité de :root). Les sports gardent leur teinte d'identité (néon sur fond noir) : tennis lime-jaune · basket orange · foot vert. */ body.sp-tennis{--accent:#d7e64a;--accent2:#aac72f;--accent-ink:#16180a;--glow:rgba(190,210,60,.30)} body.sp-basket{--accent:#ff9f43;--accent2:#f08000;--accent-ink:#1a0e00;--glow:rgba(240,128,0,.30)} body.sp-foot{--accent:#2ee27f;--accent2:#19c46a;--accent-ink:#04130a;--glow:rgba(46,226,127,.30)} *{box-sizing:border-box} /* Fond html = COULEUR DE LA NAV (#0b0d12) : la zone du home-indicator iPhone (PWA standalone), non couverte par body/nav, montrait sinon un TROU NOIR sous la barre du bas. Là elle se fond dedans. */ /* DÉGRADÉ (halos) sur HTML = fond du CANVAS : fixé au viewport, jamais scrollé -> halos IDENTIQUES sur tous les onglets, quelle que soit la longueur de la page (user 2026-08-22 : Résultats/Accueil, pages longues, avaient un fond dilué car le dégradé était sur le body dimensionné au contenu). PAS d'overflow:hidden (le body doit scroller, modèle CRYPTONAUTS). */ /* FOND D'APP JUSQU'AU BORD BAS (user 2026-09-13, « l'app doit aller jusqu'en bas au lieu de la zone opaque sous le menu ») : `html` était un APLAT PLAT #080d15 -> tout le bas (derrière/sous la capsule flottante, là où il n'y a plus de carte) apparaissait comme une bande opaque morte. On pose un VRAI dégradé bleu qui monte du bas DIRECTEMENT sur le fond `html` (garanti peint : `body` est transparent au-dessus ; `html` ne scrolle pas -> zéro jank, PWA-safe). Le bas s'allume comme l'app, en continu jusqu'au bord, autour et sous le menu. */ html{-webkit-text-size-adjust:100%;overscroll-behavior:none;color-scheme:dark; background:radial-gradient(1000px 560px at 50% 102%,rgba(34,184,255,.16),rgba(34,184,255,.05) 42%,transparent 72%),var(--bg)} /* HALOS en pseudo-élément FIXE au VIEWPORT (user 2026-09-04) : fond STRICTEMENT IDENTIQUE sur tous les onglets, quelle que soit la hauteur de page. Avant, les halos étaient sur le fond `html` en `background-attachment:scroll` (défaut) -> ancrés à la HAUTEUR DE PAGE (différente par onglet) -> le halo bas-droite « at 100% 104% » tombait à un endroit différent selon l'onglet = fonds tous différents. `attachment:fixed` étant ignoré par iOS Safari, on peint les halos dans un pseudo `position:fixed`. */ /* HAUTEUR CONSTANTE 100vh (user 2026-09-10, jank scroll NAVIGATEUR uniquement) : en `inset:0` ce fond plein écran se REDIMENSIONNAIT à chaque frame quand la barre d'outils Safari s'anime au scroll -> re-peinture du gradient = saccade (absente en PWA, pas de barre). `100vh` = grand viewport CONSTANT (ne suit pas la barre) -> plus de resize, plus de re-paint. Débordement bas invisible (z-index:-1). */ html::before{content:"";position:fixed;top:0;left:0;right:0;height:100vh;z-index:-1;pointer-events:none; /* COUCHE GPU (user 2026-09-11, jank scroll NAVIGATEUR restant) : sans hint de composition, Safari iOS RE-RASTERISE ce dégradé plein écran à chaque frame de scroll (l'animation de la barre d'URL déclenche des repeints du fixe) = saccade, absente en PWA (pas de barre). `translateZ(0)` + `backface-visibility` le promeut en couche compositée persistante : peint UNE fois, gardé figé sur le GPU au scroll. */ transform:translateZ(0);backface-visibility:hidden;will-change:transform; background:radial-gradient(1100px 640px at 50% -6%,var(--halo),transparent 60%), radial-gradient(820px 520px at 100% 104%,var(--halo),transparent 72%), /* LUEUR BASSE (user 2026-09-12, « l'app doit remplir le bas comme Strava ») : la capsule FLOTTE au-dessus du bas d'écran ; sans halo bas, la zone sous/autour du menu retombait sur le fond plat --bg = « bande morte ». Ces radiaux bas-centre redonnent une PRÉSENCE d'app nette derrière la barre, jusqu'au bord bas (comme la carte Strava remonte sous sa pilule). Deux couches : une large douce + une plus concentrée pour bien « allumer » l'arête basse. */ radial-gradient(1200px 520px at 50% 108%,rgba(34,184,255,.17),transparent 62%), radial-gradient(680px 300px at 50% 116%,rgba(34,184,255,.13),transparent 70%)} /* ⛔ Ancienne « bande safe-area » RETIRÉE (user 2026-09-12, menu flottant « Strava ») : elle peignait un rectangle OPAQUE #0b0d12 sur la zone home-indicator (z:59, sous la nav). Quand la barre COLLAIT au bas (bottom:0) c'était un filet utile ; mais la capsule FLOTTE maintenant au-dessus du vide -> cette bande devenait une BANDE NOIRE MORTE sous la barre. Le body étant transparent, le dégradé de `html`/`html::before` (fixe, 100vh) transparaît désormais jusqu'au BORD BAS de l'écran = fond continu « à la Strava », la barre de verre plane par-dessus. (Rien à repeindre : html couvre déjà toute la hauteur, safe-area comprise.) */ /* Coquille NON-scrollante en COLONNE FLEX, hauteur = viewport DYNAMIQUE (100dvh) : le contenu scrolle DANS .wrap (flex:1) et la barre du bas est un enfant flex STATIQUE collé au bas. Sur iOS ça supprime le « saut » de la barre fixe quand la toolbar Safari apparaît/disparaît (dvh suit la toolbar -> la barre reste toujours au bas visible) et le pied de page redevient atteignable. */ /* SELAWIK — clone open-source (SIL OFL) métriquement identique à Segoe UI, auto-hébergé (demande user 2026-07-12). Famille nommée « Segoe UI » avec `local()` D'ABORD : Windows garde la VRAIE Segoe UI (identique à la carte Telegram), iPhone/Android chargent Selawik -> rendu cohérent partout. */ @font-face{font-family:'Segoe UI';font-weight:100 400;font-style:normal;font-display:swap; src:local('Segoe UI'),url('/static/fonts/selawik-regular.woff') format('woff')} @font-face{font-family:'Segoe UI';font-weight:500 600;font-style:normal;font-display:swap; src:local('Segoe UI Semibold'),url('/static/fonts/selawik-semibold.woff') format('woff')} @font-face{font-family:'Segoe UI';font-weight:700 900;font-style:normal;font-display:swap; src:local('Segoe UI Bold'),url('/static/fonts/selawik-bold.woff') format('woff')} body{margin:0;color:var(--text);font-size:15px;line-height:1.45;width:100%; /* MODÈLE DE SCROLL = CRYPTONAUTS (user 2026-08-22) : le BODY scrolle normalement (plus de coquille `height:100dvh;overflow:hidden` + scroll interne `.wrap`, qui calait mal en PWA iOS -> zone morte sous la barre). La barre est `position:fixed;bottom:0` et le body RÉSERVE sa hauteur via padding-bas. */ min-height:100svh;overscroll-behavior-y:none; /* svh STATIQUE (2026-09-10) : dvh recalculait à chaque frame pendant l'animation de la barre Safari = jank navigateur. Écart couvert par le fond fixe 100vh. */ padding-bottom:calc(84px + env(safe-area-inset-bottom, 0px)); /* réserve la capsule flottante « Strava » + son décalage bas */ /* Police NATIVE par plateforme (feel app, user 2026-09-14) : iOS -> San Francisco (-apple-system), Android -> Roboto, Windows -> Segoe UI. Avant : 'Segoe UI' d'abord -> iOS retombait sur Arial (pas natif). Les cartes Telegram gardent leur propre rendu (card_image.py, séparé). */ font-family:-apple-system,BlinkMacSystemFont,system-ui,'Segoe UI',Roboto,Arial,sans-serif; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; -webkit-user-select:none;user-select:none;-webkit-touch-callout:none; -webkit-tap-highlight-color:transparent;touch-action:manipulation; /* Thème premium : halos bleus POSÉS DIRECTEMENT sur le fond du body (au-dessus de --bg). AVANT ils étaient sur un body::before en z-index:-1 ; mais depuis que html a son propre fond (#0b0d12, fix safe-area iOS), le fond du body ne se propage plus au canvas et le pseudo z-index:-1 passait DERRIÈRE le fond opaque -> halos masqués (page toute noire). Sur le body même, ils s'affichent toujours. Le body ne scrolle pas (.wrap scrolle) -> le dégradé reste fixe visuellement. */ background:transparent;} /* le dégradé (halos) est sur HTML = canvas fixé au viewport (voir plus haut) */ /* Bannière « Installer l'app » ouverte : elle est fixée AU-DESSUS de la barre du bas (bottom≈74px) et recouvrait le dernier contenu (audit UX 2026-09-04 : dernière étape/puce cachée dessous). On réserve la hauteur de la bannière en plus de celle de la barre. Togglé par le JS a2hs (classe posée à show/hide). */ body.a2hs-open{padding-bottom:calc(150px + env(safe-area-inset-bottom, 0px))} a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent} /* FEEDBACK TACTILE natif (user 2026-09-14) : léger enfoncement / surbrillance au tap sur les surfaces cliquables -> l'app « répond » au doigt comme un natif. Transitoire (:active), donc n'affecte NI le layout NI la barre fixe (transform seulement pendant l'appui, sur des éléments non-ancêtres du menu). */ .row.mc,.row.pick,summary.zone-h,.aset-i,.mc-manual{transition:transform .09s ease,opacity .09s ease,background .12s ease} .row.mc:active,.row.pick:active{transform:scale(.988)} summary.zone-h:active{opacity:.6} .aset-i:active{background:rgba(255,255,255,.05)} /* Accessibilité clavier (audit 2026-09-02) : anneau de focus VISIBLE au clavier UNIQUEMENT (:focus-visible) — jamais au tap/souris, donc 0 changement pour l'usage tactile normal. Rétablit un repère que `-webkit-tap-highlight-color:transparent` (+ un `outline:none` sur les inputs) avait supprimé = anti-pattern WCAG 2.4.7 « Focus Visible » (niveau AA). L'outline épouse automatiquement le border-radius de l'élément sur les navigateurs modernes. */ a:focus-visible,button:focus-visible,summary:focus-visible, input:focus-visible,select:focus-visible,textarea:focus-visible, [tabindex]:focus-visible,[role="button"]:focus-visible{ outline:2px solid var(--accent);outline-offset:2px} :focus:not(:focus-visible){outline:none} /* Zone de contenu = SEUL élément qui scrolle (flex:1). La barre du bas étant désormais un frère statique en dessous, plus besoin de réserver ~86px en bas : un petit espace suffit. */ .wrap{width:100%; position:relative; max-width:720px;margin:0 auto;display:flex;flex-direction:column; padding:calc(8px + env(safe-area-inset-top)) 16px 22px} /* Logo centré tout en haut, en DÉFILEMENT NORMAL (bannière fixe annulée, demande user 2026-08-02). Desktop masque .toplogo (logo en sidebar). */ .toplogo{display:flex;align-items:center;justify-content:center;min-height:46px;margin:20px 0 12px} /* hauteur RÉSERVÉE -> pas de saut quand le logo (préchargé) arrive */ /* HALO = glow SYMÉTRIQUE collé au wordmark (drop-shadow 0-offset), pas une grosse ellipse de fond (user 2026-08-22 : l'ellipse était trop forte + coupée par le contenu). Épouse le logo -> visible sur TOUS les onglets, jamais recouvert, subtil. */ .toplogo img{height:auto;width:auto;max-height:46px;max-width:72%; filter:drop-shadow(0 0 12px rgba(34,184,255,.32)) drop-shadow(0 4px 10px rgba(34,184,255,.24))} /* Bouton COMPTE en haut à droite (toutes pages) — remplace l'onglet « Compte » de la barre du bas. */ /* ICÔNE SEULE (demande user 2026-08-01 : plus de texte « Compte », il chevauchait le logo). Bouton ROND compact dans le coin -> ne déborde plus sur le logo BETSFIX centré. */ .acctbtn{position:fixed;top:calc(env(safe-area-inset-top) + 16px);right:14px;z-index:55; display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;line-height:1; border-radius:999px;color:#cfe0f5;text-decoration:none; background:rgba(16,22,32,.88);/* backdrop-filter RETIRÉ 2026-09-10 : jank scroll iOS */ border:1px solid rgba(150,182,222,.20)} .acctbtn:active{transform:scale(.94)} .acctbtn .ic{font-size:14px} /* emoji profil réduit (demande user 2026-08-02) */ /* Intro au chargement : logo principal centré, puis fondu -> le site apparaît. */ .splash{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center; pointer-events:none; /* n'intercepte JAMAIS les taps (sinon ~1,65s de taps avalés au chargement) */ background:var(--bg);animation:splashOut .5s ease 1.15s forwards} .splash::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(900px 560px at 50% 40%,var(--halo),transparent 62%)} .splash img{position:relative;width:46%;max-width:208px;height:auto; filter:drop-shadow(0 10px 32px rgba(34,184,255,.5)); animation:splashIn .75s cubic-bezier(.2,.8,.2,1) both} @keyframes splashIn{0%{opacity:0;transform:scale(.82)}60%{opacity:1}100%{opacity:1;transform:scale(1)}} @keyframes splashOut{to{opacity:0;visibility:hidden}} @media (prefers-reduced-motion:reduce){ .splash{animation:splashOut .3s ease .4s forwards}.splash img{animation:none}} /* Mouvement réduit (audit 2026-09-02) : on FIGE les pulsations/clignotements DÉCORATIFS restants (radar nav Live, points « live », badges pulsants) — l'élément reste VISIBLE dans son état statique, seul le mouvement en boucle s'arrête (WCAG 2.3.3). Les spinners/skeletons de chargement gardent leur animation (motion essentielle, non touchée). */ @media (prefers-reduced-motion:reduce){ .nr-ring,.le-ping,.zone-live .zone-dot,.da-combo-b.live,.tkt-h .b.live, .mc-badge.mc-live,.lz .hb .pulse{animation:none} } .pausewrap{text-align:right;margin:-10px 0 8px} .pausebadge{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:600; color:var(--dim);background:transparent;border:1px solid var(--border2); padding:2px 8px;border-radius:20px;opacity:.8} /* Barre d'onglets en bas. Base neutre (sert de socle au DESKTOP qui la transforme en SIDEBAR ≥1000px). touch-action:manipulation (PAS 'none' : 'none' gênait la détection des taps quand la barre est fixe). */ .botnav{flex:0 0 auto;width:100%;max-width:720px;margin:0 auto;z-index:60;touch-action:manipulation; display:flex;gap:4px; padding:7px 10px calc(7px + env(safe-area-inset-bottom)); background:#0b0d12;border-top:1px solid rgba(34,184,255,.22)} /* filet bleu DISCRET */ /* WRAPPER interne : `display:contents` PARTOUT -> il disparaît de la mise en page (les sont enfants directs de `.botnav`). En MOBILE c'est `.botnav` LUI-MÊME qui est la capsule flottante `position:fixed` (voir plus bas) ; en DESKTOP `.botnav` est la sidebar. Le wrapper reste neutre dans les deux cas. */ .botnav-inner{display:contents} /* MOBILE (<1000px) : la barre est une CAPSULE FLOTTANTE `position:fixed` détachée des bords (voir plus bas). */ @media (max-width:999px){ /* BARRE « à la Strava » — CAPSULE FLOTTANTE `position:fixed` (LE modèle d'hier, qui remplissait le bas correctement en PWA iOS). Le body scrolle NORMALEMENT (base : `min-height:100svh` + `padding-bottom` qui RÉSERVE la place) ; le fond d'app (`html`) remplit l'écran jusqu'au bord bas ; la capsule PLANE par-dessus et le contenu défile DERRIÈRE elle. ⚠️ FIX « la barre remonte sur les onglets vides » (user 2026-09-13 = LE seul défaut restant d'hier) : ZÉRO `backdrop-filter`, `transform`, `will-change` sur cette barre fixe — sur iOS ces 3 propriétés CASSENT le `position:fixed` (la barre s'ancre alors au DOCUMENT au lieu du viewport et remonte quand le contenu est court). C'était la VRAIE cause (hier la capsule avait blur + translateZ + will-change). Fond translucide SOLIDE (lisible sans flou). Écart 16px identique bas + côtés. */ .botnav{position:fixed;top:auto;left:16px;right:16px;bottom:16px;width:auto;max-width:none;margin:0;z-index:60; display:flex;gap:2px;padding:5px 10px;border-radius:999px; /* PILULE PLEINE (user 2026-09-13) : forme de la barre restaurée ; ce sont les BOUTONS qui s'y adaptent (`.botnav a` en 999px aussi) + hauteur RÉDUITE (padding 8->5 ici + 11->7 sur `.botnav a` plus bas). */ background:rgba(24,27,36,.9);border:1px solid rgba(255,255,255,.09); box-shadow:0 12px 30px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06)} .botnav a{min-width:0;flex:1;padding:7px 0 5px;border-radius:999px;gap:4px} /* boutons en pilule -> épousent la forme de la barre (user 2026-09-13) */ /* Le body scrolle -> `.wrap` remplit AU MOINS un écran (moins la barre) : (1) la chaîne flex:1 du Pronos a de la hauteur à répartir ; (2) le contenu est TOUJOURS >= viewport -> l'onglet vide ne laisse pas la barre fixe « flotter » plus haut (le défaut d'hier), même si l'ancrage iOS retombe sur le document. */ .wrap{min-height:calc(100svh - 80px - env(safe-area-inset-bottom, 0px))} /* PRONOS : RÉPARTIR les catégories sur toute la HAUTEUR (user 2026-08-19) — un jour léger/vide, les 6 lignes s'espacent régulièrement au lieu d'être tassées en haut. Chaîne flex .wrap > #panels > #pn-home.on > .dash-zones (space-between). `flex:1 0 auto` = grandit pour remplir, ne rétrécit jamais (jour chargé = hauteur naturelle + scroll .wrap). Scopé mobile + onglet Pronos (#pn-home) -> les autres onglets intacts. */ #panels{display:flex;flex-direction:column;flex:1 0 auto;min-height:0} .panel.on{flex:1 0 auto} #pn-home.on{display:flex;flex-direction:column} #pn-home.on #day-content{flex:1 0 auto;display:flex;flex-direction:column} #pn-home.on .dash-today{flex:1 0 auto;display:flex;flex-direction:column;justify-content:space-between} } /* PWA INSTALLÉE — onglet PEU REMPLI : le document doit remplir la hauteur PHYSIQUE de l'écran (user 2026-09-13 : « sur les onglets avec peu de contenu, la barre remonte et une bande vide apparaît en bas »). CAUSE : en PWA iOS (`display:fullscreen`), `100svh` est calculé TROP COURT -> sur contenu court le document est plus petit que l'écran ; la barre `position:fixed` s'ancre alors à ce document court (elle remonte) et le fond ne descend pas jusqu'au bord (bande noire). Sur contenu LONG, le document dépasse l'écran -> déjà OK (validé user). FIX ciblé, ne change RIEN d'autre : en PWA (`html.pwa`, fiable même en fullscreen), on force body/.wrap à `100dvh` = plein écran EXACT en PWA (pas de barre d'outils) -> le document remplit toujours l'écran physique, même onglet vide -> barre au vrai bas, plus de bande. Le navigateur reste en `svh` (correct, pas de jank). */ @media (max-width:999px){ html.pwa body{min-height:100dvh} html.pwa .wrap{min-height:calc(100dvh - 80px - env(safe-area-inset-bottom, 0px))} } /* Bannière « Ajouter à l'écran d'accueil » (PWA) : incite à installer en plein écran -> plus de barre de navigateur = vraie sensation d'app. Montrée seulement HORS standalone (JS). */ .a2hs{position:fixed;left:10px;right:10px;bottom:calc(86px + env(safe-area-inset-bottom));z-index:85; max-width:620px;margin:0 auto;display:flex;align-items:center;gap:11px;padding:11px 11px 11px 13px; border-radius:16px;border:1px solid rgba(120,170,220,.32); background:linear-gradient(180deg,#161b25,#0d1017);box-shadow:0 14px 38px rgba(0,0,0,.6); transform:translateY(20px);opacity:0;transition:transform .32s cubic-bezier(.22,.85,.3,1),opacity .32s} .a2hs.show{transform:translateY(0);opacity:1} .a2hs-ic{font-size:23px;flex:none;line-height:1;color:#7cc4ff} .a2hs-ic svg{width:23px;height:23px;display:block} /* SVG : taille explicite (pas via font-size) */ .a2hs-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .a2hs-tx b{font-size:13.5px;color:#eef4fb;font-weight:800;letter-spacing:-.01em} .a2hs-tx span{font-size:11.5px;color:var(--muted);line-height:1.42} .a2hs-tx .shr{display:inline-flex;vertical-align:-2px} .a2hs-go{flex:none;padding:8px 14px;border-radius:11px;border:0;cursor:pointer;font-weight:800;font-size:12.5px; color:#04131f;background:linear-gradient(180deg,#8fd0ff,#5fb2f5)} /* Fermer : la CIBLE reste 44px (checklist tactile) via une zone transparente, alors que la PASTILLE visible reste à 27px — on agrandit le hit area sans alourdir le visuel. */ .a2hs-x{flex:none;width:27px;height:27px;border-radius:50%;border:0;cursor:pointer;font-size:12px; background:rgba(255,255,255,.08);color:var(--muted);-webkit-tap-highlight-color:transparent; display:grid;place-items:center;position:relative} .a2hs-x::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px; transform:translate(-50%,-50%)} .a2hs-x svg{width:13px;height:13px;display:block} .botnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px; padding:6px 0 4px;border-radius:14px;color:var(--muted);font-size:11px; font-weight:700;transition:.15s} /* `.ic` = boîte de hauteur FIXE qui CENTRE son contenu -> emoji ET radar Live alignés pareil */ .botnav a .ic{font-size:24px;line-height:1;height:26px;display:flex;align-items:center;justify-content:center} .botnav a:active{transform:scale(.93)} .botnav a.on{color:var(--accent-ink);background:linear-gradient(180deg,var(--accent),var(--accent2))} /* Home et Live ne sont pas des sports -> onglet actif en BLANC/GRIS neutre (les sports gardent leur couleur : tennis citron, basket orange, foot vert). */ .botnav a[data-tab="home"].on, .botnav a[data-tab="directs"].on, .botnav a[data-tab="stats"].on{ background:linear-gradient(180deg,var(--accent),var(--accent2));color:var(--accent-ink)} /* PASTILLE ACTIVE « à la Strava » (mobile, user 2026-09-12) : sur la capsule flottante, l'onglet ouvert n'est PLUS un pavé plein dégradé mais une PILULE teintée (l'accent en translucide via `--glow`) qui épouse l'icône+label, icône et texte à la COULEUR d'accent (le SVG hérite via currentColor). Placé APRÈS les règles de base pour les surcharger à spécificité égale sur mobile ; le DESKTOP (≥1000px, sidebar) garde son pavé dégradé. */ @media (max-width:999px){ .botnav a.on, .botnav a[data-tab="home"].on, .botnav a[data-tab="directs"].on, .botnav a[data-tab="stats"].on{ /* pilule = accent translucide (--glow) + FILET accent net (le glow seul est trop diffus sur le verre), icône+texte à la couleur d'accent (SVG currentColor). Se détoure proprement du fond dépoli. */ background:var(--glow);color:var(--accent);border-radius:16px; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 38%,transparent)} .botnav a.on .lb{font-weight:800} .botnav a.on .ic{transform:scale(1.05)} /* labels + icônes un poil plus lisibles sur la capsule (repères tactiles) */ .botnav a .lb{font-size:9.5px;letter-spacing:.015em} .botnav a .ic{height:25px} /* badge compteur : plus fin, calé sur le coin haut-droit de l'icône, filet couleur-du-verre */ .nav-n{top:2px;left:calc(50% + 8px);min-width:15px;height:15px;font-size:10px;line-height:15px; border-color:rgba(19,21,29,.9)} } /* Repli sans color-mix (Safari < 16.4) : filet clair léger (le glow reste), SCOPÉ mobile (desktop intact). */ @supports not (color:color-mix(in srgb,red,blue)){ @media (max-width:999px){ .botnav a.on{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)} } } /* 6 onglets -> labels un brin plus compacts pour tenir sur petit écran */ .botnav a .lb{font-size:9px} .botnav a .ic{font-size:22px;height:24px} /* ICÔNES SVG (audit 2026-09-02) : taille en TOKEN, pas via font-size (un SVG ne suit pas la taille de police). 22px = même encombrement optique que les anciens emoji -> aucun décalage de la barre. */ .botnav a .ic svg{width:22px;height:22px;display:block} /* MENU ICÔNES SEULES (user 2026-09-12 : « retirer le texte, de beaux icônes dans le thème ») — MOBILE. Plus de libellé sous l'icône -> icônes plus GRANDES, centrées, dans le thème (muted au repos, ACCENT + pilule quand actif ; le radar Live reste vert). Le libellé reste en `aria-label` (accessibilité intacte). Scopé mobile : la SIDEBAR desktop garde ses libellés (icône + texte en ligne). Placé APRÈS les règles de base pour les surcharger. */ @media (max-width:999px){ .botnav .lb{display:none} /* plus de texte dans la barre du bas */ .botnav a{padding:7px 0;gap:0} /* icône centrée ; padding réduit 11->7 = barre moins haute (user 2026-09-13) */ .botnav a .ic{height:auto} .botnav a .ic svg{width:25px;height:25px;stroke-width:1.9} /* icônes ~inchangées (26->25), trait fin élégant */ .botnav a:not(.on){color:var(--muted)} /* repos : gris discret */ .botnav a.on .ic{transform:scale(1.1)} /* actif : icône accent (pilule) légèrement grossie */ .nav-radar{width:34px;height:34px} /* Live : radar vert un cran plus grand, cohérent */ .nr-dot{width:21px;height:21px} .nav-radar::before,.nr-ring,.nr-ring2{width:34px;height:34px;margin:-17px 0 0 -17px} .nav-n{top:0;left:calc(50% + 9px)} /* badge compteur recalé sur l'icône plus grande */ } /* Pictos issus de app/icons.py (ex-emoji) : 1em -> ils prennent la taille de police du contexte, comme l'emoji qu'ils remplacent. Défini ICI (feuille toujours servie) EN PLUS de l'injection faite par icons.apply : double filet, pour qu'un picto ne puisse JAMAIS s'afficher sans dimension. */ .eico{width:1em;height:1em;display:inline-block;vertical-align:-.14em;flex:none} .botnav a.on .ic{transform:scale(1.06)} /* Onglet Live : SEUL le point 🟢 vire au vert et clignote, et UNIQUEMENT s'il y a du live (classe .has-live) ET que l'onglet n'est pas ouvert. Pas de fond vert -> quand on est dessus, l'onglet actif prend le thème neutre (bleu) comme les autres. */ .botnav a[data-tab="directs"].has-live:not(.on){color:#34d27b} /* BADGES chiffrés du menu du bas (demande user 2026-07-14) : nb de matchs du jour par onglet. BLANC par défaut (À venir/Tennis/Basket/Foot) ; l'onglet LIVE est VERT + halo pulsant. Caché à 0 (JS pose `hidden`). */ .botnav a{position:relative} .nav-n{position:absolute;top:1px;left:calc(50% + 7px);min-width:16px;height:16px;padding:0 4px; border-radius:99px;background:#eef2f7;color:#0b0d12;font-size:11px;font-weight:900;line-height:16px; text-align:center;font-variant-numeric:tabular-nums;border:1.5px solid #0b0d12; box-shadow:0 1px 4px rgba(0,0,0,.5)} /* ===== DESKTOP (≥1000px) — dashboard multi-colonnes (maquette validée user 2026-08-02). Sidebar gauche + grille de cartes qui remplit la largeur. TOUT scopé ici -> mobile (<1000px) JAMAIS modifié. ===== */ @media (min-width:1000px){ body{flex-direction:row} /* Barre du bas -> SIDEBAR verticale gauche */ .botnav{order:-1;flex-direction:column;justify-content:flex-start;gap:4px; width:236px;max-width:236px;height:100vh;height:100dvh;margin:0;overflow-y:auto; padding:20px 14px;border-top:0;border-right:1px solid var(--border); background:linear-gradient(180deg,#0b0b0f,#08080b)} .botnav::before{content:"";display:block;height:32px;margin:4px 10px 20px; background:url(/static/wordmark.png?v=1) left center/auto 32px no-repeat; filter:drop-shadow(0 5px 18px rgba(34,184,255,.40))} .botnav a{flex:0 0 auto;flex-direction:row;justify-content:flex-start;gap:13px; padding:11px 14px;border-radius:11px;font-size:14px} .botnav a .ic{font-size:20px;height:auto} .botnav a .ic svg{width:20px;height:20px} /* nav latérale (large) : icône un cran plus petite */ .botnav a .lb{font-size:14px;font-weight:600} .botnav a.on .ic{transform:none} .nav-n{position:static;margin-left:auto;top:auto;left:auto;box-shadow:none} .nav-radar{width:24px;height:24px} /* .wrap = SCROLL pleine largeur -> scrollbar collée à droite de la fenêtre */ .wrap{max-width:none;margin:0;padding:0} .toplogo{display:none} .acctbtn{top:14px;right:26px} /* Contenu capé/centré (le scroll reste plein) */ #panels{max-width:1560px;margin:0 auto;padding:18px 32px 60px} /* CARTES en GRILLE multi-colonnes DANS chaque zone (les séparateurs mobiles laissent place au gap) */ .zone-b{display:grid;grid-template-columns:repeat(auto-fit,minmax(344px,1fr));gap:16px;align-items:start} .zone-b .mc-sep{display:none} .zone-b .dayhdr{grid-column:1/-1} /* Combinés + cartes multi-paris = pleine largeur (leurs jambes ont leur propre sous-grille) */ .zone-b .mc-tg,.zone-b .mc-tg-gold,.zone-combo .zone-b>*{grid-column:1/-1} .foot{text-align:center;padding:18px 0 8px} } /* Badge du nb de matchs LIVE : BLANC comme les autres onglets (demande user 2026-07-21) — plus de vert ni de halo pulsant (l'icône radar verte de l'onglet signale déjà le live). -> hérite du .nav-n blanc. */ /* Icône LIVE = RADAR vert pulsant (point + anneaux), comme l'orbe de l'état vide « aucun match » */ /* Live = CERCLE VERT + HALO permanent autour (+ radar qui pulse). TAILLE alignée aux emoji (~22px). */ .nav-radar{position:relative;display:inline-flex;align-items:center;justify-content:center; width:30px;height:30px} /* halo PERMANENT (dégradé radial vert) toujours visible autour du point */ .nav-radar::before{content:"";position:absolute;top:50%;left:50%;width:30px;height:30px; margin:-15px 0 0 -15px;border-radius:50%; background:radial-gradient(circle,rgba(52,210,123,.5) 0%,rgba(52,210,123,.18) 50%,transparent 74%)} .nr-dot{position:relative;z-index:1;width:19px;height:19px;border-radius:50%;background:#34d27b; box-shadow:0 0 11px rgba(52,210,123,.95),0 0 2px rgba(52,210,123,1)} .nr-ring{position:absolute;top:50%;left:50%;width:30px;height:30px;margin:-15px 0 0 -15px; border-radius:50%;border:2px solid rgba(52,210,123,.6);animation:navradar 1.9s ease-out infinite; will-change:transform,opacity;backface-visibility:hidden;transform:translateZ(0)} /* couche GPU -> pulse fluide, plus de jank iOS */ .nr-ring2{animation-delay:.95s} @keyframes navradar{0%{transform:scale(.4);opacity:.95}100%{transform:scale(1);opacity:0}} /* Onglet Live ACTIF (fond bleu) : on FIGE le radar vert (sinon il clignote vert-sur-bleu et « déconne » — user 2026-08-22). Le point reste, les anneaux et le halo s'apaisent : on est déjà sur l'onglet. */ .botnav a[data-tab="directs"].on .nr-ring{animation:none;opacity:0} .botnav a[data-tab="directs"].on .nav-radar::before{opacity:.3} /* SPA : panneaux par onglet (tout chargé à l'ouverture, bascule sans rechargement) */ /* CLIP horizontal (user 2026-09-04) : la transition de tab glisse le panneau via translateX(28px) -> ~12px de débordement horizontal transitoire (décalage visuel à chaque changement d'onglet). `overflow-x:clip` le rogne SANS créer de conteneur de scroll (contrairement à `hidden`, qui forcerait overflow-y:auto). */ /* La BOÎTE de clip de #panels s'étend jusqu'aux BORDS DE L'ÉCRAN (marge négative -16 = padding 16 de .wrap, recompensée par padding 16) : les cartes restent à x=16 MAIS leur glow bleu peut désormais aller DANS la marge (user 2026-09-06 « le halo peut aller dans la marge ») au lieu d'être coupé net au bord de la carte. Le clip du glissement d'onglet se fait maintenant au bord de l'écran (inchangé côté « pas de décalage »). */ #panels{overflow-x:clip;margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px} .panel{display:none} .panel.on{display:block;animation:panein .22s cubic-bezier(.22,.85,.3,1)} /* Transition DIRECTIONNELLE au changement d'onglet (clic OU swipe, user 2026-08-22) : le panneau entrant glisse depuis la droite (onglet suivant) ou la gauche (précédent). `go()` pose sl-next/sl-prev sur #panels. */ #panels.sl-next .panel.on{animation:slNext .26s cubic-bezier(.22,.85,.3,1)} #panels.sl-prev .panel.on{animation:slPrev .26s cubic-bezier(.22,.85,.3,1)} @keyframes slNext{from{opacity:.25;transform:translateX(28px)}to{opacity:1;transform:none}} @keyframes slPrev{from{opacity:.25;transform:translateX(-28px)}to{opacity:1;transform:none}} @keyframes fadein{from{opacity:.4}to{opacity:1}} .ldg{color:var(--dim);text-align:center;padding:40px 0;font-size:13px} .ldg::before{content:"";display:block;width:22px;height:22px;margin:0 auto 12px;border-radius:50%; border:2px solid var(--border2);border-top-color:var(--accent2);animation:spin .7s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} /* État VIDE premium de l'onglet Live (aucun match en cours) : orbe « radar » + CTA */ /* EXACTEMENT le cadre d'une carte de match (.row.pick) : bordure cyan .60 + dégradé CYAN + glow cyan -> uniforme avec les onglets sport (demande user). Mêmes valeurs littérales que .row.pick. */ .live-empty{position:relative;overflow:hidden;text-align:center;margin:14px 0 8px;padding:32px 22px; border:1px solid rgba(34,184,255,.60);border-radius:var(--radius);display:flex;flex-direction:column; align-items:center;justify-content:center;box-shadow:0 0 18px rgba(34,184,255,.22); background:linear-gradient(180deg,rgba(34,184,255,.09),rgba(34,184,255,.02))} /* Cadre Live vide : REMPLIT la hauteur dispo jusqu'à la barre du bas, en laissant la place au « 18+ » (qui vit sous #panels dans .wrap) — user 2026-08-22. */ /* Flex-column UNIQUEMENT à l'état VIDE (l'orbe « radar » doit remplir la hauteur). Avec des cartes, on RESTE en `display:block` comme TOUS les autres onglets — sinon la non-fusion des marges + `flex:1 0 auto` décalait le contenu du seul onglet Live (user 2026-09-03 : « décalage quand on va dessus, que cet onglet »). */ #pn-directs.on:has(.live-empty){display:flex;flex-direction:column} #pn-directs.on .live-empty{flex:1 1 auto} .le-orb{position:relative;width:62px;height:62px;display:flex;align-items:center;justify-content:center; margin-bottom:20px} .le-dot{width:15px;height:15px;border-radius:50%;background:#34d27b; box-shadow:0 0 18px rgba(52,210,123,.85)} .le-ping{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(52,210,123,.55); animation:lep 2s ease-out infinite} .le-ping2{animation-delay:1s} @keyframes lep{0%{transform:scale(.42);opacity:.85}100%{transform:scale(1);opacity:0}} .le-h{font-size:19px;font-weight:800;color:#fff;letter-spacing:.01em;text-transform:uppercase} .le-sub{font-size:12.5px;color:var(--muted);max-width:290px;line-height:1.55;margin:9px 0 22px} .le-cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center} .le-btn{padding:11px 17px;border-radius:12px;font-size:12px;font-weight:800;text-decoration:none; border:1px solid var(--cardline);color:var(--text);background:rgba(255,255,255,.04); text-transform:uppercase;letter-spacing:.03em} .le-btn:active{transform:scale(.97)} .le-btn-p{color:var(--accent-ink);border-color:transparent; background:linear-gradient(180deg,var(--accent),var(--accent2));box-shadow:0 4px 16px var(--glow)} /* État vide PRONOS : orbe CYAN (pas vert -> ne se lit pas « live »). Espace un peu plus généreux. */ .pe-dot{background:#5fd0ff;box-shadow:0 0 18px rgba(95,208,255,.85)} .pe-ping{border-color:rgba(95,208,255,.55)} .paj-hero{margin-top:26px} /* Header sticky premium */ .hdr{position:sticky;top:0;z-index:50; background:linear-gradient(180deg,rgba(12,15,22,.92),rgba(12,15,22,.78)); /* backdrop-filter RETIRÉ 2026-09-10 : jank scroll iOS */ border-bottom:1px solid var(--border)} .hdr-in{max-width:720px;margin:0 auto;padding:12px 16px 10px} .brand{display:flex;align-items:center;gap:6px;font-size:20px;font-weight:800; letter-spacing:-.02em} .brand .logo{font-size:22px;filter:drop-shadow(0 2px 7px rgba(34,184,255,.5))} .brand img.logo{height:30px;width:auto;display:block} .brand img.wm{height:21px;width:auto;display:block;margin-left:-1px} .hero{text-align:center;padding:18px 0 6px} .hero-logo{max-width:230px;width:62%;height:auto; filter:drop-shadow(0 6px 22px rgba(34,184,255,.35))} .hero-sub{margin-top:6px;font-size:12px;color:var(--muted); letter-spacing:.04em} .brand b{color:var(--brand)} .brand .hright{margin-left:auto;display:inline-flex;align-items:center;gap:8px} .brand .hdot{font-size:11px;font-weight:800;color:var(--gold);white-space:nowrap;letter-spacing:.02em} .brand .tag{font-size:11px;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:var(--dim);border:1px solid var(--border2); padding:3px 8px;border-radius:20px} .nav{display:flex;gap:9px;margin-top:11px} .nav a{flex:1;display:flex;align-items:center;justify-content:center;height:60px; border-radius:17px;font-size:30px;line-height:1;background:var(--surface); border:1px solid var(--border);transition:.16s} .nav a:active{transform:scale(.95)} .nav a.on{border-color:transparent; background:linear-gradient(180deg,var(--accent),var(--accent2)); box-shadow:0 6px 18px var(--glow)} /* Sous-menu par sport (Matchs / Fiabilité) */ .subnav{display:flex;gap:6px;margin:16px 0 2px} /* Inactifs plus lisibles (audit UX 2026-09-04) : texte relevé + léger fond de segment -> on voit que c'est un contrôle cliquable (avant : gris sombre presque invisible sur fond sombre). */ .subnav a{flex:1;text-align:center;padding:9px;border-radius:11px;font-size:12.5px; font-weight:700;color:#b4bccb;background:rgba(255,255,255,.03); border:1px solid var(--border);transition:.16s} .subnav a.on{color:var(--text);background:var(--surface2);border-color:var(--border2)} /* En-tête de page sport : titre + lien fiabilité (le changement de sport = barre du bas) */ .sporthd{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:4px 0 6px} .sporthd-t{font-size:18px;font-weight:900;color:var(--text)} .sporthd-a{flex:none;font-size:11px;font-weight:700;color:var(--accent);text-decoration:none} /* Carte PERF PREMIUM sous le titre du sport : ROI géant + forme + courbe d'équité + KPIs */ /* MÊME fond que les cartes de match (.row.pick) : dégradé cyan + bordure + glow cyan */ .spf{display:block;text-decoration:none;position:relative;overflow:hidden;margin:2px 0 16px; padding:14px 15px 12px;border:1px solid rgba(34,184,255,.60);border-radius:16px; box-shadow:0 0 18px rgba(34,184,255,.22),var(--shadow-sm); background:rgba(34,184,255,.055)} /* teinte UNIE (pas de dégradé) : le fond ne bouge plus quand l'historique s'ouvre et agrandit la carte — demande user 2026-07-24 */ .spf-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px} .spf-roi-wrap{display:flex;flex-direction:column;line-height:1} .spf-forms{display:flex;flex-direction:column;align-items:flex-end;gap:5px} .spf-roi{font-size:30px;font-weight:900;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .spf-roi-l{font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase; color:var(--dim);margin-top:4px} .spf-kpis{display:flex;gap:8px;margin-top:10px} .spf-k{flex:1;min-width:0;text-align:center;background:rgba(255,255,255,.04);border:1px solid var(--border); border-radius:11px;padding:7px 3px} .spf-kv{display:block;font-size:14px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums} .spf-kl{display:block;font-size:8px;font-weight:700;letter-spacing:.05em;text-transform:uppercase; color:var(--muted);margin-top:2px} /* Deux courbes d'équité ÉTIQUETÉES (Simples / Combinés) empilées dans l'onglet sport */ .spf-charts{display:flex;flex-direction:column;gap:10px;margin-top:10px} .spf-cv{background:radial-gradient(135% 130% at 50% 0%,rgba(34,184,255,.12),rgba(34,184,255,.045) 52%,rgba(34,184,255,.018) 100%);border:1px solid var(--border);border-radius:12px; padding:8px 10px 6px} /* MÊME fond que les jambes de combiné (.cleg) — demande user 2026-07-24 */ .spf-cv-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px} .spf-cv-t{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff} /* titre graphe : BLANC, un rien plus grand (demande user 2026-07-24) */ .spf-cv-roi{font-size:12px;font-weight:800;font-variant-numeric:tabular-nums} .spf-cv-none{font-size:11px;color:var(--muted);padding:16px 2px;text-align:center} /* Forme W/L PROPRE à chaque graphe (juste au-dessus de la courbe) */ /* Forme W/L (dots) alignée à DROITE : si ça déborde, on rogne les VIEUX (gauche), on garde les récents. */ .spf-cv-form{display:flex;justify-content:flex-end;margin:0 0 5px;overflow:hidden} .spf-cv-form .forms{flex-wrap:nowrap} .spf-cv-form .fd{width:15px;height:15px;font-size:9px} /* pastilles plus grandes (demande user) — 16 tiennent centrées */ .spf-cv-form .fd.fd-p{font-size:11px} /* Groupe de gauche de l'en-tête : titre + badge SÉRIE côte à côte (le badge n'est PAS dans la ligne W/L). */ .spf-cv-hl{display:flex;align-items:center;gap:7px;min-width:0} .spf-cv-hl .sx-streak{flex:none} /* Libellé STATIQUE des derniers paris (affichés d'office, sans bouton — demande user 2026-08-13). */ .spf-rec-lbl{margin-top:9px;text-align:center;font-size:11px;font-weight:800;letter-spacing:.04em; text-transform:uppercase;color:var(--muted);border-top:1px solid var(--border);padding-top:11px} /* Liste des derniers paris (révélée) : pastille W/L/N + affiche + sélection + date. */ /* Historique = REGISTRE pro (demande user 2026-07-25) : lignes séparées par un filet fin, padding régulier, colonnes alignées ; scroll interne pour tout l'historique. */ .spf-recent{margin-top:8px;display:flex;flex-direction:column;padding-right:4px} /* PAS de scroll interne (demande user 2026-08-13) : TOUS les paris affichés dans le cadre. */ .spf-rec{display:flex;align-items:center;gap:10px;font-size:11px;padding:9px 2px; border-bottom:1px solid rgba(255,255,255,.055)} .spf-rec:last-child{border-bottom:none} .spf-rec-b{flex:none;width:19px;height:19px;border-radius:6px;display:flex;align-items:center; justify-content:center;font-size:11px;font-weight:900;color:#0a0a0a} .spf-rec.rec-w .spf-rec-b{background:#34d27b} .spf-rec.rec-l .spf-rec-b{background:#ff6b6b} .spf-rec.rec-n .spf-rec-b{background:var(--muted)} /* Pari À JOUER (compté au ROI, pas encore réglé) : SABLIER DORÉ, IDENTIQUE au badge provisoire `.sx-bdg.p` (demande user 2026-07-17 : « les icônes en attente des listes ROI comme les sabliers des provisoires »). Nom en blanc (comme les paris réglés). */ .spf-rec.rec-p .spf-rec-b{background:var(--gold);font-size:11px} .spf-rec.rec-p b{color:var(--text)} .spf-rec-m{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25} .spf-rec-m b{color:var(--text);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .spf-rec-s{color:var(--muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* COMBINÉ dépliable : cliquer la ligne révèle les JAMBES (demande user 2026-07-26). Natif
. */ .spf-rec-x{border-bottom:1px solid rgba(255,255,255,.055)} .spf-rec-x:last-child{border-bottom:none} .spf-rec-x[open]{background:rgba(255,255,255,.02);border-radius:8px} .spf-rec-x>summary{list-style:none;cursor:pointer} .spf-rec-x>summary.spf-rec{border-bottom:none} .spf-rec-x>summary::-webkit-details-marker{display:none} .spf-cx{color:var(--muted);font-size:9px;display:inline-block;transition:transform .15s} .spf-rec-x[open] .spf-cx{transform:rotate(180deg)} .spf-legs{padding:1px 2px 8px 20px;display:flex;flex-direction:column} .spf-leg{display:flex;align-items:center;gap:8px;font-size:11px;padding:5px 0; border-top:1px dashed rgba(255,255,255,.08)} .spf-leg-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2} .spf-leg-t b{color:var(--text);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .spf-leg-t>span{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .spf-leg-c{flex:none;color:var(--muted);font-weight:800;font-size:9.5px} .spf-leg-b{flex:none;width:16px;height:16px;border-radius:5px;display:flex;align-items:center; justify-content:center;font-size:9px;font-weight:900;color:#0a0a0a} .spf-leg.rec-w .spf-leg-b{background:#34d27b} .spf-leg.rec-l .spf-leg-b{background:#ff6b6b} .spf-leg.rec-n .spf-leg-b{background:var(--muted)} .spf-leg.rec-p .spf-leg-b{background:var(--gold)} /* DATE tout à gauche sur 2 lignes (demande user 2026-07-25) : DATE en HAUT (alignée avec le nom d'équipes) + HEURE en BAS (alignée avec la sélection). Mêmes tailles/interligne que `.spf-rec-m` -> les 2 lignes coïncident. COTE juste avant le badge résultat. */ /* Colonne date/heure CENTRÉE horizontalement ; DATE à la taille des ÉQUIPES (11px), HEURE à la taille du PARI (10px) — demande user 2026-07-25. */ .spf-rec-d{flex:none;width:48px;display:flex;flex-direction:column;line-height:1.3;text-align:center; font-variant-numeric:tabular-nums} .spf-rec-d b{color:var(--muted);font-weight:700;font-size:11px;white-space:nowrap} /* DATE = taille équipes */ .spf-rec-d span{color:var(--dim);font-size:11px;white-space:nowrap} /* HEURE = taille pari */ .spf-rec-c{flex:none;color:var(--text);font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums; text-align:right;min-width:42px} /* Stats PROPRES à chaque graphe (juste sous la courbe) : réussite · paris · cote moy. */ .spf-cv-kpis{display:flex;justify-content:space-between;gap:8px;margin-top:8px; font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)} /* Stats du graphe présentées en BOUTONS encadrés (demande user) — même look que les KPIs cartes */ .spf-cv-kpis span{flex:1;min-width:0;text-align:center;background:rgba(255,255,255,.04); border:1px solid var(--border);border-radius:11px;padding:7px 3px} .spf-cv-kpis b{display:block;color:var(--text);font-weight:800;font-size:14px;margin-bottom:2px; font-variant-numeric:tabular-nums;text-transform:none;letter-spacing:0} /* Disposition « ROI héros » façon ROI GLOBAL, SANS cadre imbriqué (choix user 2026-07-24) : la carte sport (.spf / .sx-card) porte déjà le cadre bleu lumineux -> le graphe s'affiche DIRECTEMENT dessus (on sort de la boîte .spf-cv). Label → gros ROI coloré → sous-ligne réussite·paris·cote → courbe → W/L. */ .spf-hero{padding:0} .spf-hero-lbl{text-align:center;font-size:9.5px;font-weight:800;letter-spacing:.16em; text-transform:uppercase;color:var(--muted)} .spf-hero-roi{text-align:center;font-size:42px;font-weight:900;letter-spacing:-.03em;line-height:1; margin:4px 0 3px;font-variant-numeric:tabular-nums} .spf-hero-roi.pos{color:#34d27b} .spf-hero-roi.neg{color:#ff6b6b} .spf-hero-roi.na{color:var(--muted)} /* 3 stats présentées de façon INTUITIVE & PRO (demande user 2026-07-24) : valeur nette + libellé clair en dessous (Réussite / Paris réglés / Cote moyenne), sans boîte. */ .spf-hero-kpis{display:flex;justify-content:center;gap:10px 20px;margin-top:9px;flex-wrap:wrap} .spf-hero-kpis>div{display:flex;flex-direction:column;align-items:center;line-height:1.1} .spf-hero-kpis .v{font-size:16px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums} .spf-hero-kpis .l{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; color:var(--muted);margin-top:3px} /* Bloc « Taux de réussite » : courbe légère (progression de la fiabilité) + % courant */ .spf-rate{margin-top:12px;padding-top:10px;border-top:1px solid var(--border)} .spf-rate-h{text-align:center;font-size:9.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase; color:var(--muted)} .spf-rate-h b{color:#22b8ff;font-size:12px;letter-spacing:0;margin-left:3px} .rate-c{display:block;margin-top:5px} .rate-lbl{font-size:8px;font-weight:800;fill:var(--muted);font-variant-numeric:tabular-nums} .rate-lbl-e{fill:#22b8ff} /* Ligne W/L des graphes héros : pastilles RESSERRÉES et centrées (demande user) + espace avant l'historique. */ .spf-hero .spf-cv-form{display:block;overflow:visible;margin:12px 0 0} .spf-hero .spf-cv-form .forms{display:flex;width:100%;justify-content:center;gap:4px;margin-left:0;flex-wrap:wrap} /* Note « provisoires hors ROI » en tête de l'onglet Provisoires d'un cadre sport (demande user 2026-07-25). */ .prov-note{font-size:11px;color:var(--gold);text-align:center;margin:0 0 10px;line-height:1.45} .prov-note b{color:#ffd873} /* Série EN COURS, sans emoji, rendu pro (demande user 2026-07-24) : pastille discrète bordée, verte si victoires d'affilée / rouge si défaites. */ .spf-hero-streakw{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px;margin-top:9px} .spf-hero-streak{display:inline-block;padding:2px 11px;border-radius:999px;font-size:10.5px; font-weight:700;letter-spacing:.02em;border:1px solid var(--border);color:var(--muted)} .spf-hero-streak b{font-variant-numeric:tabular-nums} .spf-hero-streak.win{color:#34d27b;border-color:rgba(52,210,123,.35);background:rgba(52,210,123,.09)} .spf-hero-streak.loss{color:#ff6b6b;border-color:rgba(255,107,107,.35);background:rgba(255,107,107,.09)} .spf-hero-streak.best{color:var(--gold);border-color:rgba(214,178,90,.38);background:rgba(214,178,90,.10)} .spf-hero .sx-equity,.spf-hero .sx-chart{margin-top:11px} /* Graphe d'équité SANS bride de hauteur dans les héros -> rendu pleine largeur, MÊME largeur que la courbe du taux de réussite (demande user 2026-07-24). */ .spf-hero .sx-equity .sx-heroc{max-height:none} /* Marges gauche/droite ÉGALES (demande user 2026-07-25) : plus de débord `margin-right` (qui décalait la courbe hors carte et rognait le point final). Les insets sont portés par L=R dans le SVG (symétriques), la ligne rejoint son dernier point (dot) à l'intérieur de la carte. */ .spf-hero .spf-cv-form{justify-content:center;margin:9px 0 0} /* Ligne d'EXTRAS sous les stats (Stats : nouv. système · CLV / profit · rabot) — inline compact */ .spf-cv-extra{display:flex;justify-content:center;flex-wrap:wrap;gap:5px 16px;margin-top:6px; font-size:9.5px;letter-spacing:.02em;text-transform:uppercase;color:var(--muted)} .spf-cv-extra b{color:var(--text);font-weight:800;font-size:11px;text-transform:none; letter-spacing:0;font-variant-numeric:tabular-nums} /* Repères de modèle & détail par jambes gardés DANS la carte compacte (onglet Stats) */ .spf-cv .sx-miles,.spf-cv .sx-legs{margin-top:10px} /* Bandeau PERF PAR SPORT en tête des Stats (le global masque un sport fort). */ .spf-sports .spf-sp-row{display:flex;align-items:center;gap:10px;padding:8px 4px; border-bottom:1px solid rgba(255,255,255,.05);text-decoration:none} .spf-sports .spf-sp-row:last-child{border-bottom:0} .spf-sp-n{flex:1;font-size:12.5px;font-weight:700;color:var(--text)} .spf-sp-pause{margin-left:7px;font-size:9px;font-weight:800;letter-spacing:.03em;text-transform:uppercase; color:#f6c54a;background:rgba(246,197,74,.13);border:1px solid rgba(246,197,74,.34); border-radius:6px;padding:1px 6px;white-space:nowrap;vertical-align:middle} .spf-sp-pause.spf-sp-ready{color:#64cd8d;background:rgba(100,205,141,.14);border-color:rgba(100,205,141,.4)} .spf-sp-roi{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;min-width:58px;text-align:right} .spf-sp-pct{font-size:11px;color:var(--dim);min-width:34px;text-align:right;font-variant-numeric:tabular-nums} .spf-sp-k{font-size:11px;color:var(--muted);min-width:52px;text-align:right;font-variant-numeric:tabular-nums} /* Détail INTÉGRÉ au cadre (repliable) : fiabilité par-pari + calibration, séparé par un filet */ .spf-det{margin-top:12px;border-top:1px solid var(--border)} .spf-det>summary{list-style:none;cursor:pointer;display:flex;align-items:center; justify-content:space-between;padding:11px 2px 2px;font-size:11px;font-weight:800; letter-spacing:.04em;text-transform:uppercase;color:var(--accent)} .spf-det>summary::-webkit-details-marker{display:none} .spf-det .chev{transition:.2s;color:var(--muted)} .spf-det[open] .chev{transform:rotate(180deg)} .spf-det-b{padding-top:6px} /* Plus de cadre groupant autour des 3 paris : chaque pari devient une CARTE autonome (même style que la carte de calibration en dessous) */ .spf-det-b .sx-sport{margin:0;background:none;border:0;border-radius:0;padding:0;box-shadow:none} .spf-det-b .sx-rows{gap:7px;margin-top:0} .spf-det-b .sx-row{background:var(--surface);border:1px solid var(--border);border-radius:11px; padding:9px 11px} h2{font-size:13px;font-weight:700;margin:26px 0 11px;color:var(--muted); text-transform:uppercase;letter-spacing:.07em;display:flex;align-items:center;gap:8px} h2:before{content:"";width:3px;height:14px;border-radius:3px; background:linear-gradient(var(--accent),var(--accent2))} /* KPI grid */ .grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:11px;margin:14px 0} .card{position:relative;background:linear-gradient(180deg,var(--surface2),var(--surface)); border:1px solid var(--border);border-radius:var(--radius);padding:14px 10px; text-align:center;box-shadow:var(--shadow-sm);overflow:hidden} .card:before{content:"";position:absolute;inset:0 0 auto 0;height:2px; background:linear-gradient(90deg,transparent,var(--border2),transparent)} .lbl{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em;font-weight:700} .val{font-size:25px;font-weight:800;margin:5px 0;letter-spacing:-.02em; font-variant-numeric:tabular-nums} .sub{font-size:11px;color:var(--muted)} /* Rows / list cards */ /* En-tête de jour dans les listes (regroupement par date) */ .dayhdr{display:flex;align-items:center;gap:9px;margin:11px 2px 3px;font-size:9.5px; font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;opacity:.85} .dayhdr::after{content:"";flex:1;height:1px;background:var(--border)} .row{display:block;background:#18181c; /* fond UNI (user 2026-08-16) : plus de dégradé qui change la luminosité au dépli */ border-radius:var(--radius);padding:12px 14px;margin:15px 0;border:1px solid var(--cardline); box-shadow:var(--cardglow),var(--shadow-sm);transition:.16s} /* Pas d'effet « pressé » (scale) au toucher des cartes de prono (demande user 2026-07-20) : une carte de contenu n'est pas un bouton. Le tap-highlight est déjà neutralisé globalement. */ /* Carte dépliable (foot/basket) : analyse en accordéon sous la carte */ .rowtap{cursor:pointer} .exp-c{margin-top:12px;padding:10px;border-radius:11px;font-size:10.5px;color:var(--accent); font-weight:800;display:flex;align-items:center;justify-content:center;gap:6px; text-transform:uppercase;letter-spacing:.06em;border:1px solid var(--cardline); background:rgba(255,255,255,.03);transition:.15s} .row.open .exp-c{background:rgba(255,255,255,.05)} .exp-chev{display:inline-block;transition:transform .18s} .row.open .exp-chev{transform:rotate(180deg)} .exp{margin-top:10px;padding-top:8px;border-top:1px solid var(--border)} .mc-ana>.exp{border-top:0;padding-top:0} /* carte : PAS de filet entre le cadre Paris et le cadre Infos */ .exp h2:first-child{margin-top:4px} /* Titres de section de l'analyse : UNE seule barre (le liseré h2:before) — pas de border-left en plus (sinon 2 barres verticales). */ .exp h2{margin:16px 0 9px;font-size:13.5px;font-weight:800;line-height:1.35} .exp .ldg{padding:16px 0} /* Fond UNI (plus de dégradé étirable) : sinon, quand la carte se déplie et grandit, le dégradé se redistribue et « la lumière du fond change » (retour user 2026-07-21). Uni -> identique plié/déplié. */ .row.pick{border-color:rgba(34,184,255,.60); background:var(--card-bg); /* fond PREMIUM bleuté SOLIDE -> luminosité STABLE au dépli (plus de dégradé) */ /* GLOW 18px : occupe la marge latérale (16px) et se fond au bord de l'écran. Le halo peut aller DANS la marge grâce au clip élargi de #panels (avant il était coupé net au bord de la carte). */ box-shadow:0 0 18px rgba(34,184,255,.22)} /* CARTE COMPACTE : en-tête toujours visible (statut + équipes + résumé) + corps replié au tap. Liste dense -> peu de scroll ; on déplie un match pour voir paris/barres/liens/analyse. */ /* TOUTES les cartes de pari (base) : bordure BLANCHE + bord GAUCHE coloré selon le RÉSULTAT (demande user 2026-07-25). Défaut = doré (à venir / en attente / live) ; gagné = vert ; perdu = rouge ; remboursé = gris. Posé via la classe `mc-r-*`. */ /* Contour ENTIER coloré par l'état (demande user 2026-07-27 : tout le cadre = couleur du bord gauche) — bordure UNIFORME 1px (user 2026-08-17 : plus de bord gauche épais), TOUS les côtés à la même teinte. */ /* PERF NATIF (user 2026-09-10, « app pas page web ») : le navigateur SAUTE le layout+paint des cartes HORS écran (listes longues fluides). Progressif : ignoré par les vieux navigateurs (aucun risque). `auto ` = estimation qui devient exacte après 1er rendu -> pas de saut de scrollbar. */ .row.mc{content-visibility:auto;contain-intrinsic-size:auto 300px; padding:0;margin:7px 0;overflow:hidden;position:relative; background:radial-gradient(135% 130% at 50% 0%,rgba(34,184,255,.12),rgba(34,184,255,.045) 52%,rgba(34,184,255,.018) 100%); /* GLOW halo comme le graphe ROI (user 2026-09-10) : lumière cyan douce, cohérente quelle que soit la position de scroll */ border:1px solid var(--st-soon); box-shadow:0 0 24px rgba(34,184,255,.42),var(--shadow-sm)} /* HALO AUTOUR cyan comme les cadres stats (user 2026-09-10) — intensité relevée pour être VISIBLE dans la liste (contexte déjà teinté) */ /* FILIGRANE logo COMPLET (user 2026-09-06, comme le style signature) : discret, centré dans le cadre, DERRIÈRE le contenu (::before z-index:0, les enfants passent en z-index:1). pointer-events:none -> n'intercepte pas le tap. */ .row.mc::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; opacity:.05;background:url('/static/logo.png') center center/135px no-repeat;filter:grayscale(.3) brightness(1.3)} /* CARTES DÉPLIABLES (pli « Pourquoi » : premium à-venir `mc-flat` ~339px ET live `mc-islive` ~371px) : offset Y FIXE en px (pas `center center`) -> le logo NE BOUGE PAS au dépli (la carte grandit vers le bas, l'offset top reste constant), tout en restant ~centré sur le cadre replié. User 2026-09-06 (« de nouveau déplacé »). */ .row.mc.mc-flat::before,.row.mc.mc-islive::before{background-position:center 110px} /* « Prochains lives » (onglet Live) : filigrane logo RETIRÉ sur demande user (2026-09-06) */ .row.mc.mc-nowm::before{content:none} .row.mc>*:not(.mc-corner):not(.mc-bell){position:relative;z-index:1} /* badge coin ✓/✗ + 🔔 gardent position:absolute */ /* COMBINÉ (user 2026-09-06) : le filigrane vit dans le cadre des JAMBES (.cleg::before), PAS sur le cadre global doré -> on le neutralise sur la coquille du combiné (le corps ne fait que rassembler les jambes). */ .row.mc.mc-tg-gold::before{content:none} /* RÉSULTAT gagné/perdu : le CADRE coloré est CONSERVÉ (user 2026-09-06) + badge ✓/✗ dans le coin haut-droit. C'est le GROS bandeau GAGNÉ/PERDU sous les stats qui est retiré (pas le cadre). */ .row.mc.mc-r-won{border-color:var(--st-won)} .row.mc.mc-r-lost{border-color:var(--st-lost)} .row.mc.mc-r-push{border-color:var(--st-void)} .row.mc.mc-r-live{border-color:var(--st-live)} /* Badge RÉSULTAT dans le coin haut-droit : pastille ronde ✓ (gagné) / ✗ (perdu), colorée, par-dessus l'en-tête. */ .mc-corner{position:absolute;top:9px;right:10px;z-index:4;width:26px;height:26px;border-radius:50%; display:inline-flex;align-items:center;justify-content:center;pointer-events:none;border:1px solid} .mc-corner svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.6; stroke-linecap:round;stroke-linejoin:round} .mc-corner.won{color:var(--st-won);background:color-mix(in srgb,var(--st-won) 16%,transparent); border-color:color-mix(in srgb,var(--st-won) 44%,transparent)} .mc-corner.lost{color:var(--st-lost);background:color-mix(in srgb,var(--st-lost) 16%,transparent); border-color:color-mix(in srgb,var(--st-lost) 40%,transparent)} /* 🔔 NOTIFS PAR MATCH (user 2026-09-06) : bouton en haut-GAUCHE, VISIBLE UNIQUEMENT en PWA installée (classe `html.pwa` posée par JS). État suivi = doré. Clic géré par bfxMatchBell (stopPropagation). */ /* HAUT-GAUCHE (top:9px;left:10px) — user 2026-09-12 : à DROITE il chevauchait le badge résultat ✓/✗ (.mc-corner) ET le badge décompte/live (.mc-badge). La ligue est CENTRÉE avec 44px de padding latéral -> un bouton de 26px calé à gauche (finit à 36px) ne mord jamais sur le texte de la ligue. */ .mc-bell{display:none;position:absolute;top:9px;left:10px;right:auto;z-index:5;width:26px;height:26px;border-radius:50%; align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.34);background:rgba(255,255,255,.09); color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;padding:0} /* BOUTON « HAUT DE PAGE » (user 2026-09-06) : coin bas-DROITE, au-dessus de la nav, style du site (dégradé accent). Apparaît après un peu de scroll. */ #bfx-totop{position:fixed;right:16px;bottom:calc(78px + env(safe-area-inset-bottom,0px));z-index:90; width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.15); background:rgba(26,34,50,.85);color:#cfe0f5;/* backdrop-filter RETIRÉ 2026-09-10 */ font-size:20px;font-weight:800;line-height:1;display:none;align-items:center;justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,.4);cursor:pointer; -webkit-tap-highlight-color:transparent;opacity:0;transition:opacity .2s ease} /* DISCRET + légèrement transparent (user 2026-09-06) */ #bfx-totop.show{display:inline-flex;opacity:.72} #bfx-totop:active{transform:scale(.9)} html.pwa .mc-bell{display:inline-flex} .mc-bell svg{width:14px;height:14px;display:block} .mc-bell.on{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 60%,transparent); background:color-mix(in srgb,var(--gold) 18%,transparent)} .mc-bell:active{transform:scale(.92)} /* Badge ✓/✗ INLINE (combiné) : à droite des points par jambe, dans l'en-tête (pas en absolu). */ .mc-vdot{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%; margin-left:7px;vertical-align:middle;border:1px solid;flex:none} .mc-vdot svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.7; stroke-linecap:round;stroke-linejoin:round} .mc-vdot.won{color:var(--st-won);background:color-mix(in srgb,var(--st-won) 16%,transparent); border-color:color-mix(in srgb,var(--st-won) 44%,transparent)} .mc-vdot.lost{color:var(--st-lost);background:color-mix(in srgb,var(--st-lost) 16%,transparent); border-color:color-mix(in srgb,var(--st-lost) 40%,transparent)} /* Séparateur DISCRET entre deux cadres de paris (demande user 2026-07-18 : « mieux séparer les cadres entre eux »). Fine ligne dégradée qui s'estompe aux extrémités -> respire sans alourdir. Inséré entre cartes (jamais après un en-tête de jour ni en tête de zone). */ .mc-sep{height:1px;margin:9px 16px;background:linear-gradient(90deg,transparent,var(--border) 20%, var(--border) 80%,transparent);opacity:.7} /* mc-head : colonne d'infos pleine largeur + chevron en ABSOLU (centré vertical) -> l'heure peut aller dans le COIN haut-droit sans être décalée par la flèche. */ .mc-head{position:relative;padding:11px 14px;cursor:pointer;-webkit-tap-highlight-color:transparent} .mc-line{display:flex;align-items:center;gap:7px} /* En-tête carte : ligue CENTRÉE sans emoji, décompte en absolu à droite (user 2026-08-15) */ .mc-line-c{position:relative;justify-content:center;min-height:22px} /* ligue CENTRÉE : affichée EN ENTIER (user 2026-08-15) — retour à la ligne autorisé (plus d'ellipse), padding réduit ; en LIVE (pas de badge) elle prend quasi toute la largeur. */ .mc-line-c .mc-comp{flex:0 1 auto;text-align:center;padding:0 44px;white-space:nowrap;overflow:hidden; text-overflow:ellipsis;line-height:1.25} /* ligue sur UNE seule ligne (user 2026-09-12), ellipse si trop long */ .mc-r-live .mc-line-c .mc-comp{padding:0 10px} .mc-line-c .mc-badge{position:absolute;right:0;top:50%;transform:translateY(-50%);margin:0} /* BADGE DOUBLON : match déjà couvert par un pari pré-match Confiance/Value (user 2026-09-14, transparence) */ .mc-pmb{margin-left:8px;font-size:9.5px;font-weight:800;letter-spacing:.02em;color:#e0b341; background:rgba(224,179,65,.12);border:1px solid rgba(224,179,65,.28);border-radius:6px;padding:1px 6px;white-space:nowrap} /* Ligue des cartes de PARI (Confiance/Value, à venir ET terminé, _sport_row) : calée EN HAUT À GAUCHE et colorée comme les jambes de combiné (.cleg-comp #8fa2b8), au lieu du BLANC CENTRÉ (user 2026-09-03). Modificateur scopé -> n'affecte PAS les autres cartes (programme .mc-tg, combiné, accueil). Le badge décompte/résultat reste en absolu à droite (.mc-line-c .mc-badge). */ .mc-line-c.mc-lg-cleg{justify-content:flex-start} .mc-line-c.mc-lg-cleg.mc-lg-ctr{justify-content:center} /* ligue CENTRÉE sur la carte simple (user 2026-09-06) */ .mc-line-c.mc-lg-cleg .mc-comp{flex:0 1 auto;text-align:left;padding:0 44px 0 0;color:#8fa2b8} .mc-line-c.mc-lg-cleg.mc-lg-ctr .mc-comp{text-align:center;padding:0 44px} /* ligue CENTRÉE sur la carte simple (user 2026-09-06) */ .mc-ic{flex:none;font-size:13px;line-height:1} /* emoji sport DISCRET (plus petit) */ /* L1 : nom du sport · circuit (ATP/WTA) · tournoi (ville capitalisée) — contextuel, discret. */ .mc-comp{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; font-size:12px;font-weight:800;color:var(--text);letter-spacing:.02em;text-transform:uppercase} /* LIGUE = MAJUSCULE, BLANC (user 2026-08-15) */ /* Nom du SPORT (majuscules, accent du sport) puis compétition (muted) — « TENNIS • Wimbledon ». */ .mc-sport{color:var(--accent);font-weight:800;letter-spacing:.05em} .mc-comp-sep{color:var(--dim);font-weight:700} .mc-badge{flex:none;font-size:11px;font-weight:800;padding:3px 8px;border-radius:8px; white-space:nowrap;letter-spacing:.02em;font-variant-numeric:tabular-nums;line-height:1.3} .mc-up{background:rgba(255,255,255,.06);color:var(--muted)} .mc-live{background:rgba(52,210,123,.16);color:#5fe39b} .mc-done{background:rgba(255,255,255,.06);color:#cfe0f5} .mc-wait{background:rgba(246,197,74,.13);color:var(--gold)} /* Chevron de dépli : EN BAS À DROITE du cadre replié. */ .mc-chev{position:absolute;right:12px;bottom:9px;color:var(--muted);font-size:15px; transition:transform .18s} .mc-open .mc-chev{display:none} /* carte ouverte : chevron caché ; il ne réapparaît qu'une fois repliée */ /* Carte sans corps dépliable : un clic n'importe où (dé)plie le « Pourquoi » (JS) -> curseur cliquable. */ .mc-flat{cursor:pointer} /* L2 : équipes (noms + prénoms complets) — ligne principale. */ /* Équipes = HÉROS, 16 px + sur 2 lignes possibles pour TOUS les types de cartes (demande user 2026-07-14 : cartes semblables) — à venir, provisoire, LIVE et TERMINÉ ont désormais le même titre de match. */ .mc-teams{font-size:14px;font-weight:800;color:var(--text);margin-top:15px;letter-spacing:-.015em; line-height:1.26;white-space:normal;overflow:visible;text-overflow:clip;text-wrap:balance} .mc-teams .dim{color:var(--dim);font-weight:600} /* Carte PREMIUM (pari à venir présenté carte) : demande user 2026-07-14 — l'ÉQUIPE (le match) est le HÉROS de la carte repliée -> plus GRANDE (16 px) que le pari à jouer (14 px, cf. .mc-pick). Padding roomier, équipes sur 2 lignes possibles. */ .mc-prem .mc-head{padding:13px 16px 12px} .mc-prem .mc-teams{font-size:14px;margin-top:15px;line-height:1.26;white-space:normal;overflow:visible; text-overflow:clip;text-wrap:balance} /* L3 : LISTE des paris (intitulés, 1/ligne) — masquée une fois DÉPLIÉE (les paris détaillés s'affichent). padding-right pour libérer le chevron en bas à droite. */ .mc-sub{margin-top:6px;padding-right:20px} .mc-open .mc-sub{display:none} /* Cartes telegram/premium (.mc-tg) : le chevron est MASQUÉ (cf. .mc-tg .mc-chev) -> pas besoin de la réserve à droite ; on l'annule pour que la barre de confiance + la grille (Confiance/Marché/Value/Cote) prennent TOUTE la largeur, symétriques gauche/droite (demande user 2026-07-18 : « espace à droite »). */ .mc-tg .mc-sub{padding-right:0} /* Carte PLATE (pas de chevron : plus de corps dépliable) : idem, on annule la réserve de droite sinon le contenu est décalé (retour user 2026-07-21 : « espace à droite dû à la flèche »). */ .mc-flat .mc-sub{padding-right:0} /* LIVE (demande user 2026-07-12) : intitulé du pari sur UNE seule ligne (ellipsis) + scoreboard des résultats juste en dessous, visible dans la carte repliée. */ .mc-islive .mc-sub .mc-betl{flex-wrap:nowrap} .mc-islive .mc-sub .mc-bt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mc-livesc{margin-top:10px} /* Barre « Chance live » (demande user 2026-07-15) : reflet EN DIRECT du % que le pari passe, vu le score + le temps restant (cote live dé-margée / repli modèle). PURE AFFICHAGE (jamais au ROI). */ .lvbar{margin-top:9px} .lvbar-hd{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px} .lvbar-t{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#8fa2b8} .lvbar-v{font-size:13px;font-weight:900;color:#eaf2ff;font-variant-numeric:tabular-nums} .lvbar-ar{font-size:11px;margin-left:3px} .lvbar.lv-up .lvbar-ar{color:#34d27b} .lvbar.lv-down .lvbar-ar{color:#ff6b6b} .lvbar-track{height:8px;border-radius:6px;background:rgba(255,255,255,.09);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.35); transform:translateZ(0);-webkit-transform:translateZ(0)} /* iOS : idem .vb-bar (coin arrondi stable au 1er rendu) */ /* Remplissage PREMIUM (user 2026-08-19) : dégradé/gloss (posé inline), léger reflet haut, et CROISSANCE à l'entrée (scaleX depuis la gauche). Respecte prefers-reduced-motion. */ @keyframes lvGrow{from{transform:scaleX(.02)}to{transform:scaleX(1)}} .lvbar-fill{height:100%;border-radius:6px;transition:width .5s ease;transform-origin:left center; box-shadow:inset 0 1px 0 rgba(255,255,255,.30);animation:lvGrow .75s cubic-bezier(.22,.9,.3,1) both} @media (prefers-reduced-motion:reduce){.lvbar-fill{animation:none}} .lvbar-src{margin-top:3px;font-size:11px;font-weight:600;color:#7d8ca0;text-align:right} /* Ligne de pari : libellé à gauche (peut passer à la ligne), pastilles cote/confiance À DROITE, VERTICALEMENT CENTRÉES contre le libellé (fini le désalignement quand le libellé fait 2 lignes). */ .mc-betl{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:#cfe0f5} .mc-betl + .mc-betl{margin-top:3px} /* Étiquette DOUBLE SCAN (« Premier scan » / « Dernier scan ») : le rescan a changé le pari -> les deux décisions affichées et comptées (demande user 2026-07-21). Petite pastille discrète devant le pari. */ .mc-btag{display:inline-block;font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase; padding:2px 6px;border-radius:6px;background:rgba(255,255,255,.08);color:#9fb3cc;margin-bottom:3px} .mc-pick .mc-bc{margin-left:7px} /* cote après la sélection (présentation double scan) */ .mc-bi{flex:none;font-size:11px;align-self:flex-start;margin-top:2px} .mc-bt{min-width:0;flex:1;overflow-wrap:anywhere;line-height:1.32} /* Module cote │ confiance placé SOUS le pari (demande user 2026-07-12), aligné sous le libellé (past la puce). */ .mc-odds-row{padding-left:19px;margin-top:6px} /* Pastille de pari (cote/value) — premium : gélule arrondie, dégradé subtil, liseré + micro-ombre. Hauteur + largeur MINI fixes -> les cotes s'alignent en COLONNE d'une carte à l'autre (rendu tableau). */ .mc-bc{flex:none;align-self:center;display:inline-flex;align-items:center;justify-content:center; min-width:52px;height:23px;border-radius:99px;padding:0 9px;font-size:10.5px;font-weight:900; font-variant-numeric:tabular-nums;white-space:nowrap;color:#8ff0bd; background:linear-gradient(180deg,rgba(46,226,127,.2),rgba(46,226,127,.06)); border:1px solid rgba(46,226,127,.32);box-shadow:0 1px 4px rgba(0,0,0,.24)} /* pari RETENU (⭐ en tête) : libellé mis en avant */ .mc-betl-reco .mc-bt{color:#fff;font-weight:800} .mc-noplay .mc-bt,.mc-noplay .mc-bi{color:var(--muted);font-weight:600;font-style:italic;opacity:.85} .mc-body{padding:2px 14px 13px} .mc-body[hidden]{display:none} /* Moins d'espace entre les équipes et le bloc « BOOKMAKERS » une fois déplié. */ .mc-open .mc-head{padding-bottom:5px} /* DÉPLI COMBINÉ (demande user 2026-07-18 : « en dépliant, ce qui existait replié n'est plus visible »). Sur les cartes PREMIUM (.mc-prem) et PROVISOIRES/combiné du jour (.mc-tg), on GARDE le pick + la ligne verdict (.mc-sub) visibles une fois la carte ouverte -> l'analyse & les stats s'AJOUTENT dessous (aperçu direct) au lieu de REMPLACER la présentation. Pas de doublon : le ticket est retiré du corps de ces cartes (corps = barres + analyse). Un filet + un peu d'air séparent le résumé du détail. */ .mc-prem.mc-open .mc-sub,.mc-tg.mc-open .mc-sub{display:block;padding-right:0} .mc-prem.mc-open .mc-div,.mc-tg.mc-open .mc-div{display:block} .mc-prem.mc-open .mc-body,.mc-tg.mc-open .mc-body{border-top:1px solid var(--border); margin-top:9px;padding-top:11px} .live{color:#34d27b;font-weight:800;letter-spacing:.02em} .fem{color:#b08cf2;font-weight:800} /* EN-TÊTE de fiche match : pastille sport + compétition (gauche) · statut (droite) · filet dessous */ .mh{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px; padding-bottom:9px;border-bottom:1px solid rgba(255,255,255,.08)} .mh-comp{display:flex;align-items:center;gap:8px;min-width:0} .mh-ic{flex:none;width:26px;height:26px;border-radius:8px;display:inline-flex;align-items:center; justify-content:center;font-size:15px;line-height:1;background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09)} .mh-comp-t{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase; color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mh-st{flex:none} .mh-when{font-size:11px;color:var(--muted);font-weight:600;margin:1px 0 2px} .rowtop{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11px; color:var(--dim);font-weight:600;text-transform:uppercase;letter-spacing:.04em} .rowtop > span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* en-tête match : compétition tronquable + date toujours visible */ .rt-l{display:flex;align-items:center;min-width:0;flex:1;overflow:hidden} .rt-comp{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} .rt-when{white-space:nowrap;flex:none} /* Live : 3 zones (comp à gauche · score/temps CENTRÉS · badge Live à droite) */ .rowtop-live{display:grid;grid-template-columns:1fr auto 1fr} .rt-mid{text-align:center;white-space:nowrap;font-size:12px} /* Live : SCOREBOARD 2 lignes (nom + scores), meneur en vert, set gagné en gras */ /* Cadre du score (résultats/live) : liseré BLANC neutre au lieu du bleu de marque (demande user 2026-07-28). */ .lboard{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);border-radius:10px; padding:8px 12px;margin:9px 0 5px;max-width:100%;overflow-x:auto} .lboard::-webkit-scrollbar{display:none} /* Séparation horizontale entre le bloc score/barres % et les paris à jouer (écart égal dessus/dessous) */ .bets-sep{height:1px;background:rgba(255,255,255,.14);margin:12px 0;border-radius:1px} /* Effet « terminal » : curseur clignotant pendant la frappe (pronostics + analyse) */ .tw-cur{display:inline-block;color:var(--accent);font-weight:400;margin:0 0 0 -1px; animation:twblink 1s steps(1) infinite} @keyframes twblink{50%{opacity:0}} /* Temps de jeu live (51', Q3·5:42) DANS le cadre des scores : centré, vert, bien visible */ .lb-clk{text-align:center;font-size:12px;font-weight:800;color:#34d27b;letter-spacing:.04em; padding-bottom:5px;margin-bottom:4px;border-bottom:1px solid rgba(255,255,255,.08)} .lb-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 0; font-size:14px;font-weight:700;color:var(--muted)} .lb-n{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff} /* nom d'équipe : prend l'espace restant et TRONQUE -> les colonnes de score restent toujours visibles */ .lb-s{display:flex;gap:13px;flex:none} .lb-c{min-width:13px;text-align:center;color:var(--muted);font-variant-numeric:tabular-nums} .lb-c.lb-win{color:#eaf2ff;font-weight:800} /* set/score gagné : clair gras */ .lb-row.lb-lead .lb-c.lb-win{color:#34d27b} /* meneur : score gagné en vert */ .lb-pen{font-size:11px;color:var(--muted);font-weight:600} /* tirs au but « (4) » inline, discret */ .lb-row.lb-lead .lb-pen{color:#34d27b} /* vainqueur des t.a.b. : parenthèse verte */ /* Tennis : MÊME style que le box-score basket (taille, gap, baseline, colonne résultat) */ .lboard-t{position:relative} .lboard-t .lb-s{gap:6px;align-items:baseline} .lboard-t .lb-c{width:18px;min-width:18px;font-size:12px} .lboard-t .lb-n{font-size:12.5px} .lboard-t .lb-hdr .lb-c{font-size:11px} /* Colonne SETS (résultat du match) = MÊME que TOT basket : taille/couleur/poids, gagnant en vert */ .lboard-t .lb-tot{width:28px;min-width:28px;font-size:12.5px;font-weight:900;color:#eaf2ff} .lboard-t .lb-hdr .lb-tot{font-size:9px} .lboard-t .lb-row.lb-lead .lb-tot{color:#34d27b} /* UNE seule ligne verticale continue à gauche de SETS (comme basket), même position */ .lboard-t::after{content:"";position:absolute;top:6px;bottom:6px;right:43px;width:1px; background:rgba(255,255,255,.18)} .lb-hdr .lb-c{color:var(--muted);font-size:11px;font-weight:800;padding-bottom:2px} /* Basket : box-score par quart-temps (Q1..Qn) + colonne TOTAL en évidence */ .lboard-q{position:relative} .lboard-q .lb-s{gap:6px;align-items:baseline} /* même LIGNE DE BASE -> quarts alignés avec le TOT */ .lboard-q .lb-c{width:18px;min-width:18px;font-size:12px} /* points de quart un peu plus petits, colonnes fixes */ .lboard-q .lb-n{font-size:12.5px} /* nom d'équipe (évite la troncature) */ .lboard-q .lb-hdr{border-bottom:1px solid rgba(255,255,255,.13);padding-bottom:3px;margin-bottom:2px} .lboard-q .lb-hdr .lb-c{font-size:11px} /* Q1..Qn + TOT : en-tête discret (plus petit) */ /* (.lb-ico retiré 2026-09-02 avec le box-score foot cartons/corners — plus aucun élément ne le porte) */ .lboard-q .lb-tot{width:28px;min-width:28px;font-size:12.5px;font-weight:900;color:#eaf2ff} .lboard-q .lb-row.lb-lead .lb-tot{color:#34d27b} /* gagnant : SEUL son total en vert */ .lboard-q .lb-cur{color:#fff} /* quart en cours : score en blanc */ /* UNE seule ligne verticale continue à gauche de TOT, du haut au bas des 2 résultats */ .lboard-q::after{content:"";position:absolute;top:6px;bottom:6px;right:43px;width:1px; background:rgba(255,255,255,.18)} /* Horloge live (« Q4 · 0:05 ») : BLANCHE, même police que les n° de quart, alignée à GAUCHE */ .lboard-q .lb-clk-in{color:#fff;font-weight:800;font-size:11px;letter-spacing:.02em; overflow:visible;text-overflow:clip} .lb-hdr{padding-bottom:0} /* Set EN COURS : juste mis en évidence (clair + gras), PAS de case verte */ .lb-cur{color:#fff;font-weight:800} .lb-row.lb-lead .lb-c.lb-cur{color:#fff} /* Quart / set À VENIR : 0 grisé (toujours visible : 4 quarts / 3 sets minimum) */ .lb-fut{color:var(--dim);opacity:.5} .lb-row.lb-lead .lb-c.lb-fut{color:var(--dim)} /* 🎾 balle de service à droite du nom du serveur */ .lb-srv{font-size:11px;vertical-align:middle;margin-left:1px} /* Colonne 🎾 = points du jeu en cours (0/15/30/40) : en évidence, SANS case verte */ .lb-pt{color:#fff;font-weight:800} .lb-pt-h{font-size:12px} /* Trait horizontal FIN sous la ligne des sets (en-tête). */ .lboard-t{position:relative} .lboard-t .lb-hdr{border-bottom:1px solid rgba(255,255,255,.13);padding-bottom:3px;margin-bottom:2px} /* Colonne points : LARGEUR FIXE (🎾 en-tête et points alignés -> les n° de set restent centrés sur les jeux du dessous), SANS bordure par cellule. */ .lboard-t .lb-pt, .lboard-t .lb-pt-h{min-width:26px;width:26px;text-align:center;padding-left:0; margin-left:0} /* (la seule ligne verticale est celle à gauche de SETS, définie plus haut comme pour le basket) */ /* Libellé « cotes en direct » au-dessus des boutons de cotes */ .live-odds-l{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em; color:var(--muted);margin:2px 2px 4px} .live-odds-l .live{color:#34d27b;font-size:8px;vertical-align:middle} .rowtop-live .rt-r{justify-content:flex-end} /* Titre du match : « Équipe A vs Équipe B » sur UNE SEULE ligne, petit, aligné à GAUCHE (tronqué si long) */ .players{font-size:13.5px;font-weight:700;margin:5px 0 2px;letter-spacing:-.01em;color:#fff; text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3} .players .dim{font-size:12px;font-weight:600} /* Ligne du pari : nom+cote à gauche, badge value à droite (toujours sur une ligne) */ .betline{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:5px 0 2px} .betline .bn{font-size:16px;font-weight:700;letter-spacing:-.01em;min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* affiche (équipes) + badge à droite, badge aligné en haut, le matchup peut wraper */ .mrow{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-top:6px} .mrow .players{flex:1;min-width:0;text-align:left} /* affiche alignée à GAUCHE dans la carte */ .bdg{flex:none} /* perle rare : le pari à jouer (confiance×value) mis en avant */ /* Bloc « pari à jouer », SOUS les cotes : tête (type + pari + cote) puis barre de confiance. CONFIANCE = vert · VALUE = bleu · avant-match = neutre. */ /* Paris GROUPÉS dans un seul cadre, coiffé d'un BANDEAU EN-TÊTE (type : Confiance/Value). margin-top = l'ESPACE demandé sous les 4 barres. PAS d'overflow:hidden (sur iOS, combiné au calque fixe body::before{height:1px;background:rgba(255,255,255,.12);margin:14px 2px 14px} /* Cadre Confiance/Value : MODULE distinct, fond DENSE + bordure marquée + ombre (surélevé) -> la bannière colorée se détache des barres de stats au lieu de s'y confondre. */ .plg{border-radius:12px;margin:0 0 3px;box-shadow:0 5px 16px rgba(0,0,0,.42)} /* Type (Confiance/Value) = PASTILLE centrée (pas un bandeau pleine largeur) -> ne ressemble plus à une barre de stats. */ /* Type (Confiance/Value) = simple LIBELLÉ coloré{padding:11px 14px 0;font-size:11px;font-weight:800;text-transform:uppercase; letter-spacing:.1em} /* LISTE ALIGNÉE : pari (sélection + fiabilité) à GAUCHE{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 2px} .perle{display:block;margin:9px 0 3px;padding:10px 12px;border-radius:11px; background:rgba(255,255,255,.03);border:1px solid var(--cardline)} .pl-top{display:flex;align-items:center;gap:7px} .pl-tag{font-size:10.5px;font-weight:800;letter-spacing:.04em;padding:2px 7px; border-radius:7px;white-space:nowrap} .pl-sel{display:block;text-align:center;font-size:15px;font-weight:800;color:#eaf2ff; letter-spacing:-.01em;line-height:1.3;margin:8px 2px 1px} .pl-o{font-size:15px;font-weight:800;margin-left:auto} /* CONFIANCE = vert */ .perle-conf{background:linear-gradient(90deg,rgba(25,196,106,.13),rgba(25,196,106,.05)); border-color:rgba(25,196,106,.45);box-shadow:0 0 14px rgba(25,196,106,.10)} .perle-conf .pl-tag{color:#19c46a;background:rgba(25,196,106,.16)} .perle-conf .pl-o{color:#34d27b} /* VALUE = bleu */ .perle-value{background:linear-gradient(90deg,rgba(34,184,255,.13),rgba(34,184,255,.05)); border-color:rgba(34,184,255,.45);box-shadow:0 0 14px rgba(34,184,255,.10)} .perle-value .pl-tag{color:#4aa8ff;background:rgba(34,184,255,.16)} .perle-value .pl-o{color:#4aa8ff} .bdg .badge{white-space:nowrap} /* Matchs terminés : prono JOUÉ mis en évidence (Confiance vert / Value bleu) + ✓/✗ */ .fpick{font-size:12.5px;color:#eaf2ff;padding:8px 11px;border-radius:9px; margin:4px 0;border:1px solid var(--cardline);line-height:1.35} .fp-head{display:flex;align-items:center;justify-content:space-between;gap:8px} .fpick-t{font-weight:800;font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap} .fp-o{font-weight:800;color:#34d27b;white-space:nowrap} /* cote en vert, à droite du type */ .fpick-s{font-weight:700;text-align:center;margin-top:5px} /* le pari, centré sur 2e ligne */ .fp-conf .fpick-t{color:#34d27b} .fp-val .fpick-t{color:#4aa8ff} /* Cache PAYWALL : remplace le pari pour un non-abonné (cf. app/paywall.py + middleware) */ .prono-lock{display:flex;align-items:center;gap:11px;margin:8px 0;padding:11px 13px;border-radius:11px; text-decoration:none;background:linear-gradient(100deg,rgba(34,184,255,.10),rgba(34,184,255,.03)); border:1px solid rgba(34,184,255,.35)} .prono-lock-i{font-size:19px;line-height:1} .prono-lock-t{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0} .prono-lock-t b{font-size:12.5px;font-weight:800;color:#eaf2ff} .prono-lock-t small{font-size:10.5px;color:#90a4be;font-weight:600} .prono-lock-go{font-size:11px;font-weight:800;color:#5fd0ff;white-space:nowrap} /* Page COMPTE (connexion / abonnement) — onglet du bas, rendu dans la coquille app. Scopé .acctwrap */ .acctwrap{max-width:400px;margin:6px auto 0;width:100%} .acctwrap .acard{background:linear-gradient(180deg,rgba(34,184,255,.07),rgba(34,184,255,.02)); border:1px solid rgba(34,184,255,.22);border-radius:18px;padding:22px 20px} .acctwrap h1{font-size:19px;font-weight:800;margin:0 0 4px;color:#e9f1fb} .acctwrap .sub{font-size:12px;color:#90a4be;margin:0 0 18px;line-height:1.5} .acctwrap label{display:block;font-size:11px;font-weight:700;color:#90a4be;text-transform:uppercase; letter-spacing:.04em;margin:14px 0 6px} .acctwrap input{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12); border-radius:11px;padding:12px 13px;color:#e9f1fb;font-family:inherit;font-size:14px} .acctwrap input:focus{outline:none;border-color:rgba(34,184,255,.6)} /* …mais on rend l'anneau clavier (specificité égale, placé APRÈS -> gagne quand :focus-visible matche) */ .acctwrap input:focus-visible{outline:2px solid var(--accent);outline-offset:1px} .acctwrap .hint{font-size:11px;color:#7c90ab;margin:6px 0 0;line-height:1.4} .acctwrap button{width:100%;margin-top:20px;background:#22b8ff;color:#04121c;border:0;border-radius:12px; padding:13px;font-family:inherit;font-size:14px;font-weight:800;cursor:pointer} .acctwrap button.ghost{background:transparent;color:#5fd0ff;border:1px solid rgba(34,184,255,.35)} .acctwrap .err{background:rgba(255,80,90,.12);border:1px solid rgba(255,80,90,.4);color:#ff9aa1; border-radius:10px;padding:10px 12px;font-size:12px;margin-bottom:14px;line-height:1.4} .acctwrap .ok{background:rgba(25,196,106,.12);border:1px solid rgba(25,196,106,.4);color:#8df3c0; border-radius:10px;padding:10px 12px;font-size:12px;margin-bottom:14px;line-height:1.4} .acctwrap .alt{text-align:center;font-size:12px;color:#90a4be;margin-top:18px} .acctwrap a{color:#5fd0ff;text-decoration:none} .acctwrap .arow{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px; padding:11px 0;border-top:1px solid rgba(255,255,255,.08);color:#e9f1fb} .acctwrap .arow b{font-weight:800} .acctwrap .abadge{font-size:11px;font-weight:800;border-radius:7px;padding:3px 9px} .acctwrap .abadge.on{background:rgba(25,196,106,.18);color:#8df3c0} .acctwrap .abadge.off{background:rgba(150,165,185,.16);color:#c0cbdb} /* COMPTE style « réglages groupés » (refonte 2026-09-14, inspiré ensitics, en bleu). Scopé .acctwrap pour battre la règle globale `.acctwrap button` (specificité). */ .acctwrap .ahdr{display:flex;align-items:center;gap:14px;margin:10px 2px 20px} .acctwrap .aav{flex:none;width:56px;height:56px;border-radius:50%;display:flex;align-items:center; justify-content:center;font-weight:900;font-size:23px;color:#04121c;background:linear-gradient(135deg,#22b8ff,#1496f0)} .acctwrap .ahd-m{min-width:0} .acctwrap .aeml{font-weight:800;font-size:16px;color:#eef4fb;word-break:break-word;line-height:1.2} .acctwrap .ameta{margin-top:7px;display:flex;align-items:center;gap:9px;flex-wrap:wrap} .acctwrap .asince{font-size:11px;color:#7c90ab} .acctwrap .apro{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;border:0; background:linear-gradient(135deg,#22b8ff,#1496f0);color:#04121c;border-radius:18px;padding:16px 18px; margin:0 0 22px;font-family:inherit;box-shadow:0 10px 30px rgba(34,184,255,.25)} .acctwrap .apro-t{flex:1;min-width:0} .acctwrap .apro-t b{display:block;font-size:19px;font-weight:900;letter-spacing:-.01em;line-height:1.1} .acctwrap .apro-t span{display:block;margin-top:3px;font-size:13px;font-weight:600;opacity:.82} .acctwrap .apro-go{flex:none;width:38px;height:38px;border-radius:50%;background:rgba(0,10,18,.22);color:#04121c; display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:900} .acctwrap .aset-h{font-size:11px;font-weight:800;letter-spacing:.12em;color:#6f8299;text-transform:uppercase;margin:0 4px 8px} .acctwrap .aset{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:16px; padding:0 15px;margin:0 0 22px} .acctwrap .aset form{margin:0} .acctwrap .aset-i{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:53px; padding:13px 0;margin:0;box-sizing:border-box;border-top:1px solid rgba(255,255,255,.06); border-left:0;border-right:0;border-bottom:0;background:none;width:100%;text-align:left;font-family:inherit; font-size:15px;font-weight:600;color:#eef4fb;cursor:pointer} .acctwrap .aset-i:first-child{border-top:0} .acctwrap .aset-i .v{color:#8698ae;font-weight:600;font-size:14px;text-align:right;word-break:break-word} .acctwrap .aset-i .chev{flex:none;color:#5a6e86;font-weight:800;font-size:17px;line-height:1} .acctwrap .aset-i.danger{color:#ff8088} /* Couleur de la bulle selon le RÉSULTAT (prime sur le type) : vert+halo / rouge+halo */ .fpick.fp-won{background:linear-gradient(90deg,rgba(25,196,106,.16),rgba(25,196,106,.05)); border-color:rgba(25,196,106,.75);box-shadow:0 0 15px rgba(25,196,106,.32)} .fpick.fp-lost{background:linear-gradient(90deg,rgba(244,73,73,.16),rgba(244,73,73,.05)); border-color:rgba(244,73,73,.7);box-shadow:0 0 15px rgba(244,73,73,.3)} .badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:800; letter-spacing:.02em} .b-val{background:rgba(46,226,127,.14);color:var(--accent);border:1px solid rgba(46,226,127,.25)} .b-dim{background:var(--surface);color:var(--muted);border:1px solid var(--border)} .b-uni{background:rgba(34,184,255,.14);color:#56b0ff;border:1px solid rgba(34,184,255,.30)} .b-conf{background:rgba(34,184,255,.16);color:#6cbcff;border:1px solid rgba(34,184,255,.32)} details.sec{margin:26px 0 11px} details.sec > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px; font-size:13px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.07em} details.sec > summary::-webkit-details-marker{display:none} details.sec > summary::before{content:"";width:3px;height:14px;border-radius:3px;flex:none; background:linear-gradient(var(--accent),var(--accent2))} details.sec .i{margin-left:auto;width:21px;height:21px;border-radius:50%;flex:none; border:1px solid var(--border2);display:inline-flex;align-items:center;justify-content:center; font:italic 800 12px Georgia,serif;text-transform:none;color:var(--muted)} details.sec[open] .i{color:#fff;border-color:var(--accent2);background:rgba(34,184,255,.16)} details.sec > .banner{margin-top:9px} /* Section repliable (Valeurs / En direct / À venir / Terminés). Titre = bouton. */ details.sec2{margin:22px 0 4px} details.sec2 > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px; font-size:13px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.07em; padding:6px 0;-webkit-tap-highlight-color:transparent} details.sec2 > summary::-webkit-details-marker{display:none} details.sec2 > summary::before{content:"";width:3px;height:14px;border-radius:3px;flex:none; background:linear-gradient(var(--accent),var(--accent2))} details.sec2 > summary > .ttl{flex:1;min-width:0} details.sec2 .sright{margin-left:auto;display:inline-flex;align-items:center;gap:10px;flex:none} details.sec2 .chev{color:var(--muted);font-size:20px;line-height:1;transition:transform .18s} details.sec2[open] .chev{transform:rotate(180deg)} details.sec2 .i{width:30px;height:30px;border-radius:50%;flex:none;border:1px solid var(--border2); display:inline-flex;align-items:center;justify-content:center;font:italic 800 13px Georgia,serif; text-transform:none;color:var(--muted);cursor:pointer} details.sec2 .i:active{transform:scale(.92)} details.sec2 .sec-info{margin:8px 0 4px} details.sec2 > .secbody{margin-top:4px} .b-soon{background:var(--surface);color:var(--muted);border:1px solid var(--border);font-weight:700} /* badge décompte (timer avant le coup d'envoi), en haut à droite de la carte. Texte BLANC, unités jour/heure/minute bien distinctes. */ .rt-r{display:inline-flex;align-items:center;gap:6px;margin-left:auto} .cd{display:inline-flex;align-items:center;padding:2px 7px;border-radius:20px;font-size:9.5px;font-weight:800;line-height:1; font-variant-numeric:tabular-nums;letter-spacing:.02em;background:rgba(255,255,255,.10); color:#fff;border:1px solid rgba(255,255,255,.20);white-space:nowrap} .cd .u{color:rgba(255,255,255,.55);font-weight:700;margin:0 1px 0 1px} /* « soon » (match proche) : MÊME aspect blanc que les autres timers (plus de jaune) */ .cd.soon{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.20)} /* Badge LIVE plus grand que le décompte (le timer des autres onglets ne change pas) */ .cd.live{background:rgba(52,210,123,.18);color:#5fe39b;border-color:rgba(52,210,123,.40); font-size:10.5px;padding:4px 9px;letter-spacing:.04em} .cd.done{background:rgba(255,255,255,.05);color:var(--muted);border-color:var(--border2); font-size:11px;padding:3px 8px} .cd.wait{background:rgba(246,197,74,.12);color:var(--gold);border-color:rgba(246,197,74,.32); font-size:11px;padding:3px 8px} /* HEURE + DÉCOMPTE dans UN MÊME badge (user 2026-08-08) : heure à gauche en BLANC, décompte à droite en GRIS, sans « dans ». Le décompte est rempli/rafraîchi en direct par le timer JS. Au coup d'envoi, le timer reprend le vert « live » normal (:not(.live)). */ .cleg-when{display:inline-flex;align-items:baseline;gap:5px;font-variant-numeric:tabular-nums; font-size:11px;white-space:nowrap} .cleg-when .cw-h{color:#fff;font-weight:900} /* heure = BLANC */ .cleg-when .cw-sep{color:var(--muted);font-weight:600} /* séparateur « - » heure ↔ décompte */ .cleg-when .cd:not(.live){background:transparent;border-color:transparent;color:var(--muted); font-weight:700;padding:0;font-size:11px} /* décompte = GRIS, MÊME taille que l'heure */ .formrow{display:flex;justify-content:space-between;align-items:center;margin-top:7px} .fc{display:inline-flex;align-items:center;gap:5px;font-size:11px} .forms{display:inline-flex;gap:3px;vertical-align:middle;margin-left:4px} .fd{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px; border-radius:4px;font-size:9px;font-weight:800;color:#08110a;line-height:1; text-transform:uppercase;text-align:center;padding-top:1px} /* Sablier « en attente » dans la bande W/L : MÊME doré que le badge provisoire .sx-bdg.p (demande user 2026-07-17). Paris à jouer pas encore réglés, en queue à droite (le plus récent). */ .fd.fd-p{background:var(--gold);font-size:11px;padding-top:0} .pbars{margin-top:7px;display:flex;flex-direction:column;gap:5px} .pb-h{font-size:12px;color:var(--text);margin-bottom:2px} /* TABLEAU « Chances de gagner » : sources en LIGNES, issues en COLONNES + fine barre/ligne */ /* Barres PLEINES : source au-dessus, % dans chaque segment (favori = couleur source) */ /* ===== Bloc « Cotes & chances » PREMIUM v2 : cadre soigné (dégradé + ombre douce) + barre à glow + boîtes en relief, cote en pastille, favori surélevé ===== */ .ocs{margin:12px 0 2px;display:flex;flex-direction:column;gap:12px} .oc{width:100%;padding:13px 13px 12px;border-radius:16px; background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.014)); border:1px solid var(--border); box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 8px 22px rgba(0,0,0,.24)} .oc-h{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800;text-transform:uppercase; letter-spacing:.1em;color:var(--muted);margin-bottom:11px} .oc-h::before{content:"";flex:none;width:5px;height:5px;border-radius:99px; background:linear-gradient(180deg,#3ee089,#19c46a);box-shadow:0 0 8px rgba(52,210,123,.7)} .oc-h::after{content:"";flex:1;height:1px; background:linear-gradient(90deg,var(--border2),transparent)} .ocb{display:flex;width:100%;gap:3px;height:7px;border-radius:99px;overflow:hidden;margin-bottom:12px; background:rgba(0,0,0,.28)} .ocb-s{height:100%;border-radius:99px} .ocb-po{background:linear-gradient(90deg,#19c46a,#3ee089);box-shadow:0 0 10px rgba(52,210,123,.5)} .ocb-pc{background:linear-gradient(90deg,#d8a93a,#f0cf63);box-shadow:0 0 10px rgba(232,195,77,.45)} .ocb-dim{background:rgba(255,255,255,.1)} .ocp-row{display:flex;width:100%;gap:7px} .ocp{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px; padding:10px 6px 9px;border-radius:13px;text-align:center; background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.016)); border:1px solid var(--border);box-shadow:0 2px 8px rgba(0,0,0,.16)} .ocp-n{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; font-size:10.5px;font-weight:700;color:var(--muted);letter-spacing:.01em} .ocp-v{font-size:19px;font-weight:900;color:var(--text);line-height:1.02; font-variant-numeric:tabular-nums;letter-spacing:-.015em} .ocp-c{margin-top:3px;font-size:9.5px;font-weight:800;color:var(--muted); font-variant-numeric:tabular-nums;padding:1px 8px;border-radius:99px; background:rgba(255,255,255,.05);border:1px solid var(--border)} /* chip FAVORI : liseré + fond teintés de la source, valeur en couleur, légère élévation + halo */ .ocp-fav{transform:translateY(-1px)} .ocp-fav.ocb-po{border-color:rgba(52,210,123,.55); background:linear-gradient(180deg,rgba(52,210,123,.2),rgba(52,210,123,.05)); box-shadow:0 0 0 1px rgba(52,210,123,.16),0 8px 18px rgba(25,196,106,.2)} .ocp-fav.ocb-po .ocp-v{color:#5be08c} .ocp-fav.ocb-po .ocp-n{color:#cdeecf} .ocp-fav.ocb-po .ocp-c{color:#7ff0b6;background:rgba(52,210,123,.15);border-color:rgba(52,210,123,.42)} .ocp-fav.ocb-pc{border-color:rgba(232,195,77,.55); background:linear-gradient(180deg,rgba(232,195,77,.2),rgba(232,195,77,.05)); box-shadow:0 0 0 1px rgba(232,195,77,.16),0 8px 18px rgba(232,195,77,.18)} .ocp-fav.ocb-pc .ocp-v{color:#f0cf63} .ocp-fav.ocb-pc .ocp-n{color:#efe2b4} .ocp-fav.ocb-pc .ocp-c{color:#f0cf63;background:rgba(232,195,77,.15);border-color:rgba(232,195,77,.42)} /* barre Public compacte : libellés sous la barre fine */ .oc-pub{font-size:10.5px;color:var(--muted);font-weight:600} .oc-pub b{color:#cfe0f5;font-weight:800} /* Barre « Bookmakers » : 1 segment par issue (cote seule), parts ÉGALES. Les 3 ont le MÊME fond que le segment le plus faible (non-favori) des autres barres -> navy .pba. */ .sb-bar.ocbar .seg{flex:1 1 0;min-width:0;gap:5px;padding:0 7px;min-height:44px;align-items:center} .ocbar .seg b{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums} .ptab2{margin:8px 0 2px} .pt2-h{display:grid;grid-template-columns:var(--cols);gap:6px;align-items:center; padding:5px 2px;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.03em; color:var(--muted);border-bottom:1px solid var(--border)} /* en-tête : Source à gauche ; les NOMS de joueurs CENTRÉS sur leurs % (comme .pt2-v) */ .pt2-h span{text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pt2-h span:first-child{text-align:left} /* Bloc = grille 2 lignes : source (col 1, centrée verticalement) | % (ligne 1) | barre (ligne 2) */ .pt2-block{display:grid;grid-template-columns:var(--cols);column-gap:6px;align-items:center; padding:6px 2px;border-bottom:1px solid rgba(255,255,255,.04)} .pt2-block:last-child{border-bottom:none} .pt2-s{grid-column:1;grid-row:1/3;align-self:center; font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em; color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pt2-v{grid-row:1;text-align:center;font-size:13px;font-weight:600;color:var(--muted); font-variant-numeric:tabular-nums} .pt2-v.hi{font-weight:800} .pt2-v.dim{color:var(--dim)} .t-pm{color:#4aa8ff} .t-po{color:#43dd8c} .t-pc{color:#e8c34d} /* favori = couleur de la source */ /* Barre : ligne 2, à partir de la colonne 2 (démarre donc après la source) */ .pt2-bar{grid-column:2/-1;grid-row:2;margin-top:5px; display:flex;gap:1px;height:4px;border-radius:99px;overflow:hidden;background:var(--surface)} .pt2-bar > span{display:block;height:100%} .pb-row{display:flex;align-items:center;gap:7px;font-size:11px} .pb-l{width:64px;flex:none;color:var(--muted);text-transform:uppercase;letter-spacing:.04em; font-weight:800;font-size:9px} /* Piste = flex : segment home (couleur source) | nul | away (atténué), total 100% */ .pb-t{flex:1;height:8px;border-radius:99px;background:var(--surface);overflow:hidden; display:flex;gap:1px} .pb-t > span{display:block;height:100%} .pb-v{width:36px;flex:none;text-align:right;font-weight:800} /* Barres comparatives : couleurs FIXES (identiques tous sports/onglets) -> BETSFIX bleu, BOOKMAKER gris, PUBLIC jaune. Ne pas thématiser par sport. */ .pm{background:linear-gradient(90deg,#1f80e6,#2e9bff)} /* BETSFIX bleu */ .po{background:linear-gradient(90deg,#19c46a,#34d27b)} /* Cote Unibet VERT */ .pc{background:#e0b341} /* Public jaune */ .pbd{background:#7a8094} /* segment NUL (gris clair, bien distinct) */ .pba{background:#2d3f66} /* segment équipe NON-favorite (navy atténué) */ /* Divergence public/modèle : emoji à droite de la barre PUBLIC + bulle au tap */ .pb-x{width:20px;flex:none;text-align:center} .dvg-i{cursor:pointer;font-size:14px;line-height:1;-webkit-tap-highlight-color:transparent; padding:11px;margin:-11px;display:inline-block} /* zone tactile ~40px sans changer le visuel */ .dvg-i:active{opacity:.6} .dvg-bubble{margin-top:8px;padding:9px 12px;border-radius:10px;font-size:12px;line-height:1.5; background:var(--surface2);border:1px solid var(--border2);color:var(--muted)} .dvg-bubble b{color:var(--text)} /* Barre de cotes : une cellule par issue (joueur 1 / Nul / joueur 2) ; favori (cote la plus basse) mis en avant en bleu. Nom au-dessus, cote dessous. */ .oddsrow{display:flex;gap:6px;margin-top:7px} /* TOUS les boutons de cotes en encadré BLEU ; la cote pariée est un peu plus marquée */ .oc{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:1px; background:rgba(34,184,255,.07);border:1px solid rgba(34,184,255,.4);border-radius:10px;padding:5px 6px} .oc.fav{border-color:#2e9bff;background:rgba(34,184,255,.16);box-shadow:0 0 12px rgba(34,184,255,.2)} .ocn{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em; max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .oc.fav .ocn{color:#9fd0ff} .ocv{font-size:14.5px;font-weight:800;font-variant-numeric:tabular-nums} /* Cotes COMPACTES sur une ligne (cartes) : « Espagne 1.03 · Nul 16.0 · Irak 36.0 » */ .oddsrow2{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 14px; margin-top:8px;padding:7px 12px;border-radius:10px; background:rgba(34,184,255,.06);border:1px solid rgba(34,184,255,.22)} .oc2{font-size:12.5px;color:var(--muted);white-space:nowrap} .oc2 b{color:#eaf2ff;font-weight:800;margin-left:3px;font-size:13.5px;font-variant-numeric:tabular-nums} .oc2.fav{color:#9fd0ff} .oc2.fav b{color:#56b0ff} /* Tous les paris Unibet : un bloc par marché, cotes qui wrappent si nombreuses */ .mkt{margin:9px 0} .mkt-l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em; font-weight:700;margin-bottom:4px} .oddsrow-wrap{flex-wrap:wrap} .oddsrow-wrap .oc{flex:1 1 28%;min-width:82px} /* Catégories de paris repliables (comme Unibet) */ .mktcat{border:1px solid var(--border);border-radius:12px;margin:7px 0;overflow:hidden; background:var(--surface)} .mktcat>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px; padding:11px 14px;font-size:13px;font-weight:700} .mktcat>summary::-webkit-details-marker{display:none} .mktcat>summary::after{content:"▾";margin-left:auto;color:var(--dim);transition:transform .18s} .mktcat[open]>summary::after{transform:rotate(180deg)} .mktcat-n{background:var(--surface2);color:var(--muted);border:1px solid var(--border); border-radius:20px;padding:1px 9px;font-size:11px;font-weight:800} .mktcat-b{padding:2px 14px 10px} /* Fiche match détaillée (foot/basket) */ .mdh{margin:14px 0 6px} .mdh-c{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700} .mdh-t{font-size:20px;font-weight:800;letter-spacing:-.01em;margin-top:5px} .frm{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 0; border-bottom:1px solid var(--border)} .frm:last-child{border:none} .frm-t{flex:1 1 120px;font-size:14px;font-weight:700;min-width:0} .h2h{display:flex;gap:8px;margin:6px 0} .h2h-c{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 6px; background:var(--surface);border:1px solid var(--border);border-radius:12px} .h2h-c b{font-size:22px;font-weight:800} .h2h-c .dim{font-size:11px;text-align:center} .votes{margin-top:7px} .vlbl{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)} .vbar{display:flex;height:6px;border-radius:99px;overflow:hidden;margin-top:3px;background:var(--surface)} .vbar .vh{background:var(--accent2)} .vbar .va{background:#5a6472} .bar{height:9px;border-radius:99px;background:rgba(242,93,110,.22);overflow:hidden;margin:8px 0} .bar > span{display:block;height:100%;border-radius:99px; background:linear-gradient(90deg,var(--accent2),var(--accent))} /* Barre de proba (2 issues home/away ou 3 issues 1-N-2) */ .pbar{display:flex;height:8px;border-radius:99px;overflow:hidden;margin:9px 0 3px; background:var(--border);gap:1px} .pbar span{display:block;height:100%} .pbar .s1{background:linear-gradient(90deg,var(--accent2),var(--accent))} .pbar .s2{background:var(--surface2)} .pbar .sx{background:var(--dim)} .pbar-l{display:flex;justify-content:space-between;font-size:11px;color:var(--dim); font-weight:700;letter-spacing:.02em;gap:6px} .pbar-l span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Dataviz fiche match : pastilles de forme + mini-barres de facteurs */ .dots{display:flex;gap:5px;justify-content:space-between} /* réparti sur toute la largeur */ /* Nom d'équipe/joueur des formes récentes : MÊME présentation sur les 3 sports, centré */ .fm-name{font-size:14px;font-weight:800;text-align:center;margin:2px 0 8px;color:#eaf2ff} .fm-name .dim{font-weight:600} .dot{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center; justify-content:center;font-size:11px;font-weight:800} .dot.w{background:var(--green);color:#04130a} .dot.n{background:var(--gold);color:#1a1400} /* nul = jaune (cf. légende) */ .dot.l{background:var(--red);color:#fff} .mbar{height:7px;border-radius:99px;overflow:hidden;display:flex;background:var(--border);gap:1px} .mbar .a{background:linear-gradient(90deg,var(--accent2),var(--accent))} .mbar .b{background:var(--surface2)} .frow{padding:10px 0;border-bottom:1px solid var(--border)} .frow:last-child{border:none} .frow .ft{display:flex;align-items:center;gap:10px} .frow .fn{flex:0 0 88px;font-size:12.5px;font-weight:700} .frow .fb{flex:1} .frow .fp{flex:0 0 76px;text-align:right;font-size:11px;color:var(--muted); font-variant-numeric:tabular-nums;font-weight:700} /* Tables */ table{width:100%;border-collapse:collapse;font-size:13px;margin:4px 0; background:var(--surface);border:1px solid var(--border);border-radius:14px; overflow:hidden;box-shadow:var(--shadow-sm)} td{padding:11px 12px;border-bottom:1px solid var(--border);vertical-align:top} tr:last-child td{border-bottom:none} tr:first-child td{background:rgba(255,255,255,.02);font-size:11px;text-transform:uppercase; letter-spacing:.05em} .dim{color:var(--muted);font-size:12px} .pos{color:var(--green);font-weight:700}.neg{color:var(--red);font-weight:700} /* Banners — info discret par défaut, ambre seulement pour les vraies alertes (.warn) */ .banner{background:var(--surface);border:1px solid var(--border); border-left:3px solid var(--border2);color:var(--muted);border-radius:12px; padding:11px 14px;font-size:12.5px;line-height:1.55;margin:11px 0} .banner b{color:var(--text)} .banner.warn{background:linear-gradient(180deg,var(--gold-bg),rgba(35,29,9,.45)); border:1px solid var(--gold-bd);border-left:3px solid var(--gold);color:var(--gold)} .banner.warn b{color:#ffd877} /* Carte « analyse rédigée » (texte d'expert généré) — premium */ .an-card{background:linear-gradient(180deg,var(--surface2),var(--surface)); border:1px solid var(--cardline);border-left:3px solid var(--brand);border-radius:14px; padding:13px 15px;margin:11px 0;box-shadow:var(--cardglow)} .an-head{display:flex;align-items:center;gap:8px;margin-bottom:8px} .an-ic{font-size:16px} .an-title{font-weight:800;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em; color:var(--muted)} .an-tag{margin-left:auto;font-size:10.5px;font-weight:800;padding:2px 9px;border-radius:20px; white-space:nowrap} .an-tag.val{background:rgba(46,226,127,.14);color:var(--green);border:1px solid rgba(46,226,127,.3)} .an-tag.conf{background:rgba(34,184,255,.14);color:var(--brand);border:1px solid rgba(34,184,255,.32)} .an-tag.no{background:var(--surface2);color:var(--muted);border:1px solid var(--border)} .an-body{font-size:13.5px;line-height:1.62;color:var(--text)} .an-note{font-size:11px;color:var(--muted);margin-top:9px;border-top:1px solid var(--border); padding-top:7px} /* « Preuve » — tableau unique (1 ligne/sport, colonnes alignées) façon tableau de bord */ .ptab{border:1px solid var(--cardline);border-radius:14px;overflow:hidden;margin:8px 0; background:linear-gradient(180deg,var(--surface2),var(--surface)); box-shadow:var(--cardglow)} .ptab-h, .ptab-row{display:grid;grid-template-columns:1fr 1.4fr .8fr .8fr;gap:5px; align-items:center;padding:11px 12px} .ptab-h{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.01em; color:#eaf2ff;border-bottom:1px solid var(--border);background:rgba(255,255,255,.022)} .ptab-h span{text-align:center} .ptab-h span:first-child{text-align:left} .ptab-h .ph-conf{color:#34d27b} .ptab-h .ph-val{color:#4aa8ff} /* Confiance vert · Value bleu */ .ptab-row{border-top:1px solid var(--border);border-left:3px solid var(--sc,var(--border2)); text-decoration:none;color:var(--text);transition:background .15s} .ptab-row:first-of-type{border-top:none} .ptab-row:active, .ptab-row:hover{background:rgba(255,255,255,.03)} .ptab-sport{font-weight:800;font-size:12.5px;line-height:1.2;min-width:0; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ptab-sub{display:block;font-size:11px;font-weight:600;color:var(--muted)} /* Fiabilité = verdict coloré + nb de matchs dessous. min-width:0 + sous-ligne qui peut se replier -> la colonne RESTE à sa fraction (sinon elle s'élargit et décale Confiance/Value). */ .ptab-verdict{font-size:11px;font-weight:800;text-align:center;white-space:nowrap;min-width:0; display:flex;flex-direction:column;align-items:center;gap:2px} .ptab-vsub{font-size:9px;font-weight:600;color:var(--muted);white-space:nowrap;text-align:center} .ptab-verdict.ok{color:var(--green)} .ptab-verdict.ko{color:var(--red)} .ptab-verdict.na{color:var(--muted)} .ptab-conf, .ptab-val{font-size:14px;font-weight:800;text-align:center;white-space:nowrap; line-height:1.1;min-width:0} .ptab-conf.na, .ptab-val.na{color:var(--muted);font-weight:600;opacity:.5;font-size:16px} .ptab-pct{display:block;font-size:11px;font-weight:700;color:var(--muted);margin-top:1px} .ptab-pct.pos, .ptab-pct .pos{color:var(--green)} .ptab-pct.neg, .ptab-pct .neg{color:var(--red)} /* Mini-barre de progression PAR SPORT (colonne Fiabilité) : réglés (plein) + en attente (estompé) */ .pbar2{display:flex;width:86%;max-width:88px;height:5px;border-radius:99px; background:var(--border);overflow:hidden;margin:5px auto 4px} .pbar2 .pg-done{height:100%;background:linear-gradient(90deg,#34d27b,#4aa8ff)} .pbar2 .pg-wait{height:100%;background:rgba(159,180,207,.32)} /* Légende sous le tableau */ .ptab-cap{font-size:11px;color:var(--muted);text-align:center;margin:11px 4px 2px;line-height:1.5} .ptab-cap b{color:#cfe0f5} .pg-lg{display:inline-block;width:14px;height:5px;border-radius:99px;vertical-align:middle;margin-right:2px} .pg-lg.done{background:linear-gradient(90deg,#34d27b,#4aa8ff)} .pg-lg.wait{background:rgba(159,180,207,.32)} /* Courbe d'équité (P&L cumulé dans le temps) : SVG généré côté serveur, sans JS */ .evo-svg{width:100%;height:auto;display:block;margin:8px 0 2px} .evo-legend{display:flex;justify-content:center;gap:15px;flex-wrap:wrap;margin:7px 0 1px} .evo-lg{font-size:11px;font-weight:700;color:var(--muted);display:inline-flex;align-items:center;gap:5px} .evo-lg i{width:12px;height:3px;border-radius:99px;display:inline-block} .evo-lg b.pos{color:var(--green)} .evo-lg b.neg{color:var(--red)} .evo-na{font-size:10.5px;color:var(--muted);font-style:italic;text-align:center;padding:10px 0} /* Légende des dates d'optimisation perle (sous la section ; = lignes ambre des courbes) */ .evo-optim{font-size:10.5px;color:var(--muted);text-align:center;margin-top:10px;padding-top:9px; border-top:1px solid var(--border);line-height:1.7} .evo-optim b{color:#cfe0f5} .evo-otag{color:#ffa94a;font-weight:800} /* Carte détail PAR SPORT : verdict + échantillon + barres taux/ROI + courbe P&L cumulé */ .spc{margin:11px 0;padding:11px 13px 9px;border-radius:var(--radius); background:linear-gradient(180deg,var(--surface2),var(--surface)); border:1px solid var(--cardline);border-left:3px solid var(--sc,var(--border)); box-shadow:var(--cardglow),var(--shadow)} .spc-head{display:flex;justify-content:space-between;align-items:center;gap:8px} .spc-name{font-weight:800;font-size:14px;white-space:nowrap} .spc-verdict{font-size:11px;font-weight:800;white-space:nowrap} .spc-verdict.ok{color:var(--green)} .spc-verdict.ko{color:var(--red)} .spc-verdict.na{color:var(--muted)} .spc-sample{font-size:11px;color:var(--muted);font-weight:600;margin:1px 0 7px; display:flex;justify-content:space-between;align-items:center;gap:8px} /* Badge de tendance récente (7 j) par sport */ .spc-trend{font-size:11px;font-weight:800;white-space:nowrap} .spc-trend.up{color:var(--green)} .spc-trend.down{color:var(--red)} .spc-trend.flat{color:var(--muted)} .spc-trend-l{font-weight:600;color:var(--muted);opacity:.8} .spc-foot{font-size:11px;color:var(--muted);text-align:center;margin-top:4px;line-height:1.5} .spc-foot b.pos{color:var(--green)} .spc-foot b.neg{color:var(--red)} .spc-tot{font-weight:800} /* P&L Total mis en avant */ /* Analyse « analyste » (markdown rendu) en fiche match */ .da{font-size:13px;line-height:1.55;color:#e8eaed} .da-h{font-weight:800;color:#e8eaed;margin:13px 0 5px} .da-h1{font-size:15px} .da-h2{font-size:13.5px} .da-h3{font-size:12.5px;color:#cfe0f5} .da-p{margin:6px 0} /* Carte DÉPLIÉE refondue (demande user 2026-07-13) : sections premium empilées, en-tête à petite capitale. « Pourquoi ce pari » = section accentuée (cœur de l'analyse) ; faits VISIBLES ; mise discrète. */ .da-sec{margin:12px 0;padding:12px 13px;border-radius:14px;background:rgba(255,255,255,.022); border:1px solid var(--border)} .da-sec:first-child{margin-top:2px} .da-sec>.da-h:first-child{margin-top:0;display:flex;align-items:center;gap:7px;font-size:12px; letter-spacing:.02em;color:#cfe0f5} .da-sec .da-p:first-of-type{margin-top:0} .da-sec-why{background:linear-gradient(180deg,rgba(34,184,255,.07),rgba(34,184,255,.012)); border-color:rgba(34,184,255,.24)} .da-sec-why>.da-h:first-child{color:#8fd0ff} .da-sec-mise{background:var(--gold-bg);border-color:var(--gold-bd)} .da-sec-mise>.da-h:first-child{color:var(--gold)} .da-ul{margin:5px 0;padding-left:17px} .da-ul li{margin:3px 0} .da-quote{border-left:3px solid var(--gold);background:var(--gold-bg);padding:7px 10px; margin:9px 0;border-radius:6px;font-size:12px;color:var(--gold)} .da-tbl{width:100%;border-collapse:collapse;margin:9px 0;font-size:11.5px} .da-tbl th, .da-tbl td{border:1px solid var(--border);padding:5px 7px;text-align:left;vertical-align:top} .da-tbl th{background:var(--surface2);font-weight:700;color:#cfe0f5} .da a{color:#5ab0ff;text-decoration:none} /* === Habillage analyste premium : Verdict héro + tableau + faits + tendances === */ .da{font-size:13px;line-height:1.55;color:var(--text)} /* Bandeau résultat (règlement après match) */ .da-res{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:4px 0 12px; padding:9px 13px;border-radius:12px;font-size:13px;font-weight:800;border:1px solid} .da-res-win{background:rgba(52,210,123,.15);color:#3ee089;border-color:rgba(52,210,123,.35)} .da-res-lose{background:rgba(242,93,110,.15);color:#ff7484;border-color:rgba(242,93,110,.35)} .da-res-push{background:var(--gold-bg);color:var(--gold);border-color:var(--gold-bd)} .da-res-nv{background:var(--surface2);color:var(--muted);border-color:var(--border)} .da-res-sc{font-weight:800;color:#cfe0f5;font-size:12px} /* Carte « Track record analyste » premium */ .arec{margin:2px 0 14px;padding:13px 14px 12px;border-radius:var(--radius); background:linear-gradient(180deg,var(--surface2),var(--surface)); border:1px solid var(--cardline);box-shadow:var(--cardglow),var(--shadow)} .arec-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:9px} .arec-h-l{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#cfe0f5} .arec-h-sub{font-size:10.5px;color:var(--muted)} .arec-tot{display:flex;align-items:center;gap:12px;padding:6px 0 10px;border-bottom:1px solid var(--border)} .arec-big{font-size:30px;font-weight:900;line-height:1;letter-spacing:-.02em} .arec-tot-v{font-size:13px;color:var(--muted)} .arec-tot-v b{color:var(--text);font-size:15px} .arec-sports{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:11px} .arec-sp{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:11px; padding:9px 8px;text-align:center} .arec-sp-h{font-size:11px;font-weight:700;color:var(--muted);white-space:nowrap} .arec-sp-v{font-size:20px;font-weight:900;color:var(--text);margin:3px 0 1px} .arec-sp-t{font-size:12px;font-weight:700;color:var(--muted)} .arec-sp-p{font-size:12px;font-weight:800} .arec-sp-u{font-size:11px;font-weight:700;color:#cfe0f5;margin-top:2px;font-variant-numeric:tabular-nums} .arec-sp-roiv{font-size:23px;font-weight:900;line-height:1.05;margin-top:3px;font-variant-numeric:tabular-nums} .arec-sp-roi{font-size:10.5px;font-weight:800;letter-spacing:.08em;color:var(--muted);text-transform:uppercase} .arec-sp-v2{font-size:11.5px;font-weight:700;color:#cfe0f5;margin-top:5px} .arec-sp-o{font-size:10.5px;font-weight:700;color:var(--muted);margin-top:1px;font-variant-numeric:tabular-nums} .arec-hi{color:#3ee089} .arec-mid{color:var(--gold)} .arec-lo{color:#ff7484} .arec-na{color:var(--muted)} /* Hero « Avantage réalisé » (style Bull) — teinte verte, ROI géant + KPIs (user 2026-08-15) */ .adv-hero{text-align:center;padding:18px 14px 16px;margin:2px 0 14px;border-radius:18px; background:linear-gradient(180deg,rgba(62,224,137,.11),rgba(62,224,137,.02));border:1px solid rgba(62,224,137,.24)} .adv-l{font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)} .adv-big{font-size:54px;font-weight:900;letter-spacing:-.03em;line-height:1;margin:6px 0 5px} .adv-sub{font-size:12.5px;color:var(--muted);font-weight:600} .adv-sub b{color:var(--text);font-variant-numeric:tabular-nums} .adv-kpis{display:flex;justify-content:center;gap:28px;margin-top:13px} .adv-kpis div{text-align:center} .adv-kpis b{display:block;font-size:18px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums} .adv-kpis span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em} /* ROI peu fiable (échantillon trop faible) -> grisé */ /* VERDICT MARCHÉS — synthèse actionnable en tête de l'onglet Analyse (demande user 2026-08-13). */ .av-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 14px 12px;margin:2px 0 14px} .av-card-h{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--text); margin-bottom:11px;display:flex;align-items:center;gap:7px} .av-top{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:13px} .av-kpi{flex:1 1 150px;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:11px;padding:9px 11px} .av-kpi-l{font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)} .av-kpi-v{font-size:14px;font-weight:800;margin-top:4px;color:var(--text)} .av-kpi-v small{font-size:11px;font-weight:700;color:var(--muted);margin-left:5px} .av-row{margin-top:9px} .av-row-h{font-size:10.5px;font-weight:800;letter-spacing:.03em;margin-bottom:6px;color:var(--muted)} .av-chips{display:flex;flex-wrap:wrap;gap:6px} .av-chip{font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px;border:1px solid; white-space:nowrap;font-variant-numeric:tabular-nums} .av-chip b{font-weight:800} .av-chip small{font-weight:700;opacity:.72;margin-left:5px} .av-play{background:rgba(46,226,127,.10);border-color:rgba(46,226,127,.32);color:#3ee089} .av-watch{background:var(--gold-bg);border-color:var(--gold-bd);color:var(--gold)} .av-avoid{background:rgba(255,116,132,.10);border-color:rgba(255,116,132,.32);color:#ff7484} .av-empty{font-size:11px;color:var(--dim);font-style:italic} .av-tier-roi{font-size:19px;font-weight:900;margin-top:4px;font-variant-numeric:tabular-nums} .av-tier-sub{font-size:10.5px;color:var(--muted);margin-top:2px} /* Graphiques performance PAR PARI (SVG, courbes de profit cumulé) */ .bcharts{margin:2px 0 14px;display:flex;flex-direction:column;gap:10px} .bcharts-h{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase; color:#cfe0f5;display:flex;align-items:baseline;justify-content:space-between;gap:8px} .bcharts-sub{font-size:11px;font-weight:600;color:var(--muted);text-transform:none;letter-spacing:0} .bchart-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); padding:11px 12px 10px} .bchart-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:4px} .bchart-t{font-size:13px;font-weight:800;color:var(--text)} .bchart-tot{font-size:14px;font-weight:900} .bchart{width:100%;height:auto;display:block;max-height:180px} .bc-axis{stroke:rgba(255,255,255,.12);stroke-width:1} .bc-zero{stroke:rgba(255,255,255,.5);stroke-width:1.3;stroke-dasharray:5 3} .bc-zl{fill:rgba(255,255,255,.6);font-size:9px;font-weight:800;text-anchor:end} .bc-line{stroke-width:2.2;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round} /* Jalons du modèle : repère vertical + étiquette (changement de politique de paris) */ /* Repères de modèle sur la courbe : trait vertical + pastille numérotée */ .bc-mile{stroke:rgba(120,200,255,.5);stroke-width:1.1;stroke-dasharray:2 3} /* Repère AUTO (marché auto-ajusté) : ambré, pour le distinguer d'un jalon méthodo (bleu) */ .bc-mile-g.mauto .bc-mile-c{fill:#ff9f43;stroke:#ffe0bd} .bc-mile-g.mauto .bc-mile{stroke:rgba(255,159,67,.55)} .bc-mile-g{cursor:pointer} .bc-mile-g .bc-mile-c{transition:r .12s} .bc-mile-g.on .bc-mile-c{fill:#46e08a;stroke:#bdf6d4} .bc-mile-g.on .bc-mile{stroke:rgba(70,224,138,.7)} .bc-mile-c{fill:#1496f0;stroke:#bfe2ff;stroke-width:.8} .bc-mile-n{fill:#fff;font-size:7px;font-weight:900;pointer-events:none} /* Repères ALLÉGÉS : pastilles cliquables + panneau d'info au clic (page plus légère) */ .sx-miles{margin-top:10px} .sx-miles-c{margin-top:0} /* Transparence : marchés écartés (type de pari · raison · seuils) */ .exq{display:flex;flex-direction:column;gap:8px} .exq-intro{font-size:11px;line-height:1.5;color:var(--muted);margin-bottom:2px} .exq-intro b{color:var(--text);font-weight:800} .exq-sport{display:flex;flex-direction:column;gap:6px;padding:8px;border:1px solid var(--border); border-radius:14px;background:rgba(255,255,255,.015)} .exq-sphead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:1px 3px 2px} .exq-spname{font-size:13px;font-weight:900;letter-spacing:.01em;color:var(--text)} .exq-sptag{font-size:9.5px;font-weight:800;border-radius:6px;padding:2px 8px;white-space:nowrap} .exq-sptag-ex{background:rgba(255,107,107,.14);color:#ff9b9b;border:1px solid rgba(255,107,107,.32)} .exq-sptag-ok{background:rgba(52,210,123,.12);color:#7fe0a8;border:1px solid rgba(52,210,123,.28)} .exq-row{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:12px;padding:9px 11px} .exq-top{display:flex;align-items:center;gap:8px;margin-bottom:3px} .exq-mk{font-size:13px;font-weight:800;color:var(--text)} .exq-bdg{font-size:9.5px;font-weight:800;letter-spacing:.03em;border-radius:6px;padding:2px 7px;white-space:nowrap} .exq-ex{background:rgba(255,107,107,.16);color:#ff9b9b;border:1px solid rgba(255,107,107,.35)} .exq-watch{background:rgba(224,179,65,.14);color:#e6c463;border:1px solid rgba(224,179,65,.32)} .exq-ok{background:rgba(52,210,123,.14);color:#7fe0a8;border:1px solid rgba(52,210,123,.30)} .exq-reason{font-size:11px;line-height:1.45;color:#cfe0f5} .exq-meta{font-size:11px;color:var(--muted);margin-top:3px;font-variant-numeric:tabular-nums} /* Aperçu par marché — TABLEAU pro (user 2026-08-20). Colonnes alignées, chiffres tabulaires, verdict en bord. */ .mko-intro{font-size:10.5px;color:var(--muted);line-height:1.5;margin:2px 2px 9px} .mko-intro b{color:var(--text);font-weight:800} /* Table à largeurs FIXES -> tient ENTIÈREMENT en largeur, aucun scroll horizontal (user 2026-08-20). */ .mko{width:100%;table-layout:fixed;border-collapse:collapse;font-variant-numeric:tabular-nums} .mko col.mko-c1{width:31%} .mko col.mko-c2,.mko col.mko-c3,.mko col.mko-c4{width:23%} .mko th{font-size:8.5px;text-transform:uppercase;letter-spacing:.02em;color:var(--muted);font-weight:800; text-align:right;padding:0 5px 5px;border-bottom:1px solid var(--border)} .mko th:first-child{text-align:left;padding-left:8px} .mko-fam td{font-size:8.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--gold);font-weight:800; padding:10px 5px 3px} .mko-r td{padding:6px 5px;border-bottom:1px solid rgba(255,255,255,.045);text-align:right;vertical-align:middle} .mko-mk{text-align:left!important;font-size:11px;font-weight:800;color:var(--text);white-space:nowrap; overflow:hidden;text-overflow:ellipsis;border-left:3px solid transparent;padding-left:8px!important} .mko-r.v-pos .mko-mk{border-left-color:#34d27b} .mko-r.v-neg .mko-mk{border-left-color:#ff6b6b} .mko-r.v-dim .mko-mk{border-left-color:rgba(255,255,255,.10)} .mko-c{white-space:nowrap;font-size:12.5px;font-weight:800} .mko-c .mko-win{color:#cfe0f5} .mko-n{display:block;font-size:8px;font-weight:600;color:var(--muted);font-style:normal;margin-top:1px} .mko-pos{color:#34d27b} .mko-neg{color:#ff6b6b} .mko-dim{color:var(--muted)} .sx-ml-h{font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted); opacity:.85;display:flex;align-items:baseline;gap:8px} .sx-ml-hint{font-size:9px;font-weight:600;letter-spacing:0;text-transform:none;opacity:.7} .sx-mile-bs{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px} .sx-mile-b{width:24px;height:24px;border-radius:50%;border:1px solid rgba(34,184,255,.4); background:rgba(34,184,255,.10);color:#9fd2ff;font-family:inherit;font-size:11px;font-weight:900; cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0} .sx-mile-b.on{background:#46e08a;border-color:#46e08a;color:#04220f} .sx-mile-b.mauto{border-color:rgba(255,159,67,.5);background:rgba(255,159,67,.12);color:#ffca8a} .sx-mile-b.mauto.on{background:#46e08a;border-color:#46e08a;color:#04220f} .sx-mile-info{font-size:11px;line-height:1.5;color:var(--muted);margin-top:0;max-height:0;overflow:hidden; transition:max-height .18s ease,margin-top .18s ease} .sx-mile-info.show{max-height:160px;margin-top:9px} .sx-mile-info b{color:var(--text);font-weight:800} .sx-mile-date{font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;margin-right:7px} .sx-mile-tag{font-size:9px;font-weight:800;border-radius:6px;padding:1px 6px; background:rgba(20,150,240,.14);color:#9fd2ff} .sx-mile-tag.mauto{background:rgba(255,159,67,.16);color:#ffca8a} .sx-mile-key{display:flex;gap:14px;margin-top:8px;font-size:9.5px;color:var(--muted)} .sx-mile-key .km{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:5px;vertical-align:middle} .sx-mile-key .kmeth{background:#1496f0} .sx-mile-key .kauto{background:#ff9f43} /* Journal des ajustements automatiques (marchés auto-écartés / auto-réintégrés, datés) */ .exq-journal{display:flex;flex-direction:column;gap:6px;padding:9px 10px;border:1px solid var(--border); border-radius:14px;background:rgba(255,159,67,.045)} .exq-jhead{font-size:12px;font-weight:900;color:var(--text);display:flex;align-items:baseline; justify-content:space-between;gap:8px;flex-wrap:wrap} .exq-jsince{font-size:9.5px;font-weight:600;color:var(--muted)} .exq-jempty{font-size:11px;color:var(--muted);line-height:1.45} .exq-jrow{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:11px;padding:7px 9px} .exq-jtop{display:flex;align-items:center;gap:7px;flex-wrap:wrap} .exq-jdate{font-size:11px;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums} .exq-jmk{font-size:12.5px;font-weight:800;color:var(--text)} .exq-jbase{font-size:9px;font-weight:700;color:var(--muted);border:1px solid var(--border); border-radius:5px;padding:1px 5px} .exq-jreason{font-size:10.5px;color:#cfe0f5;margin-top:3px;line-height:1.4} .sx-divider{height:1px;background:var(--border);margin:14px 0 2px} .sx-h2{margin-top:8px} .bc-yl{fill:var(--muted);font-size:9px;text-anchor:end;font-weight:700} .bc-legend{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .bc-lg{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.04); border:1px solid var(--border);border-radius:9px;padding:4px 8px;font-size:11px} .bc-dot{width:8px;height:8px;border-radius:50%;flex:none} .bc-lg-n{font-weight:800;color:var(--text)} .bc-lg-p{font-weight:800} .bc-lg-u{font-weight:700;color:#cfe0f5;font-variant-numeric:tabular-nums} .bc-lg-c{color:var(--muted);font-variant-numeric:tabular-nums} .bc-grid{stroke:rgba(255,255,255,.06);stroke-width:1} .bc-end{font-size:8.5px;font-weight:800;font-variant-numeric:tabular-nums} .bc-xl{fill:var(--muted);font-size:8.5px;text-anchor:middle;font-weight:700} /* ===== Statistiques accueil PREMIUM (sx) ===== */ .sx{margin:2px 0 16px} .sx-body{display:flex;flex-direction:column;gap:14px} /* stats sans onglets (filtres retirés) */ /* Onglets de période (CSS pur, sans JS) */ .sx-radio{position:absolute;width:0;height:0;opacity:0;pointer-events:none} .sx-tabs{display:flex;gap:6px;margin-bottom:12px} .sx-tabs label{flex:1;text-align:center;padding:7px 4px;border-radius:10px;font-size:12px; font-weight:800;color:var(--muted);background:var(--surface);border:1px solid var(--border); cursor:pointer;transition:all .15s} #sxp-all:checked ~ .sx-tabs label[for="sxp-all"], #sxp-30:checked ~ .sx-tabs label[for="sxp-30"], #sxp-7:checked ~ .sx-tabs label[for="sxp-7"]{color:#fff;background:var(--surface2); border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset} .sx-period{display:none} #sxp-all:checked ~ .sx-p-all, #sxp-30:checked ~ .sx-p-30, #sxp-7:checked ~ .sx-p-7{ display:flex;flex-direction:column;gap:14px} .sx-empty{padding:26px 12px;text-align:center;color:var(--muted);font-size:12.5px; background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)} /* Filtre SPORT (onglets CSS, transverse aux périodes) */ .sx-stabs{display:flex;gap:6px;margin-bottom:12px} .sx-stabs label{flex:1;text-align:center;padding:6px 4px;border-radius:9px;font-size:13px; font-weight:800;color:var(--muted);background:var(--surface);border:1px solid var(--border); cursor:pointer;transition:all .15s} #sxs-all:checked ~ .sx-stabs label[for="sxs-all"], #sxs-foot:checked ~ .sx-stabs label[for="sxs-foot"], #sxs-tennis:checked ~ .sx-stabs label[for="sxs-tennis"], #sxs-basket:checked ~ .sx-stabs label[for="sxs-basket"]{color:#fff;background:var(--surface2); border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset} /* sport choisi -> on masque les autres sections sport + la perf « tous sports » */ #sxs-foot:checked ~ .sx-period .sx-sport:not([data-sport="foot"]), #sxs-tennis:checked ~ .sx-period .sx-sport:not([data-sport="tennis"]), #sxs-basket:checked ~ .sx-period .sx-sport:not([data-sport="basket"]){display:none} /* Héro bilan global */ /* MÊME fond que la carte PERF des onglets sport (.spf) : dégradé cyan + bordure + glow cyan */ .sx-hero{background:linear-gradient(180deg,rgba(34,184,255,.09),rgba(34,184,255,.02)); border:1px solid rgba(34,184,255,.60);border-radius:16px; box-shadow:0 0 24px rgba(34,184,255,.42),var(--shadow-sm);padding:14px 15px 12px;position:relative;overflow:hidden} .sx-hero-top{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:10px} .sx-hero-roi{font-size:34px;font-weight:900;line-height:1;letter-spacing:-.02em} .sx-hero-lbl{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase; color:var(--muted);margin-top:3px} .sx-hero-hint{font-size:9.5px;font-weight:600;color:var(--muted);opacity:.72;margin-top:2px;max-width:200px} .sx-hero-r{display:flex;flex-direction:column;align-items:flex-end;gap:7px} .sx-formrow{display:flex;align-items:center;gap:6px;justify-content:flex-end} .sx-formrow-c{margin:2px 0 6px} /* forme W/L posée JUSTE au-dessus de sa courbe (près du graphe) */ .sx-formk{font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);white-space:nowrap} .sx-streak{font-size:10.5px;font-weight:800;padding:4px 9px;border-radius:99px;white-space:nowrap} .sx-streak.hot{color:#3ee089;background:rgba(52,210,123,.14);border:1px solid rgba(52,210,123,.30)} .sx-streak.cold{color:#ff7484;background:rgba(242,93,110,.13);border:1px solid rgba(242,93,110,.30)} .sx-streak.best{color:var(--gold);background:rgba(214,178,90,.12);border:1px solid rgba(214,178,90,.32);margin-left:5px} .sx-form{display:flex;flex-wrap:nowrap;gap:4px;align-items:center;justify-content:flex-end} .sx-fd{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:0 0 auto} .sx-fd.won{background:#34d27b} .sx-fd.lost{background:#ff6b6b} .sx-fd.push{background:#9fb0c8} .sx-ind{font-size:8px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--gold); background:rgba(246,197,74,.15);border:1px solid rgba(246,197,74,.3);padding:1px 5px;border-radius:99px; vertical-align:middle;margin-left:4px} .sx-bstreak{font-size:10.5px;color:var(--muted);font-weight:600} .sx-bstreak b{color:#3ee089;font-weight:800} .sx-relnote{font-size:9.5px;color:var(--muted);font-weight:600;opacity:.85} .sx-hero-foot{position:relative;display:flex;align-items:center;justify-content:space-between; gap:8px;margin-top:10px;padding-top:9px;border-top:1px solid var(--border)} .sx-heroc{width:100%;height:auto;display:block;max-height:96px} /* Animations PRO de la courbe d'équité : la ligne se TRACE (draw-in), puis l'aire et le point final apparaissent. `pathLength=1` sur la ligne -> le tracé marche quelle que soit sa longueur réelle. */ /* État de REPOS : la courbe est VIDE (ligne masquée, aire + point invisibles) et NE s'anime PAS toute seule au rendu. L'animation ne se lance QUE quand le JS ajoute `.sx-go` (via _sxAnim, après le splash / à l'affichage de l'onglet) -> plus de courbe déjà tracée qui « clignote » avant l'animation. */ /* DRAW-IN = TRACÉ PROGRESSIF (stroke-dash), restauré à la demande user 2026-07-25 (« refaire l'animation comme avant »). ANTI-GEL : l'état de BASE (sans `.sx-go`) est le tracé COMPLET (`stroke-dashoffset:0`), et le draw-in anime DEPUIS le vide via `from`. Un filet JS (voir `_sxAnim`) retire `.sx-go` après 1,5 s -> la ligne retombe TOUJOURS sur sa base pleine (touche le point), même si l'anim a gelé (onglet masqué, iOS Safari). Idem aire/point : base = état final. */ .sx-heroc-line{stroke-dasharray:1;stroke-dashoffset:0} @keyframes sxdraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}} .sx-heroc-area{opacity:.22} @keyframes sxarea{from{opacity:0}to{opacity:.22}} .sx-heroc-pt{opacity:1;transform-box:fill-box;transform-origin:center} @keyframes sxpt{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}} /* `both` (pas `forwards`) : PENDANT LE DÉLAI d'anim, l'élément affiche l'image `from` (aire/point CACHÉS) au lieu de sa base visible -> l'aire verte/rouge et le point n'apparaissent PLUS avant le tracé de la ligne (demande user 2026-07-25). L'aire ne se révèle qu'au démarrage de son anim (0,5 s), le point à 0,95 s. */ .sx-heroc-line.sx-go{animation:sxdraw 1.15s cubic-bezier(.55,.08,.25,1) both} .sx-heroc-area.sx-go{animation:sxarea .7s ease .5s both} .sx-heroc-pt.sx-go{animation:sxpt .45s cubic-bezier(.2,1.6,.4,1) .95s both} @media (prefers-reduced-motion:reduce){ .sx-heroc-line{stroke-dashoffset:0} .sx-heroc-area{opacity:.22} .sx-heroc-pt{opacity:1;transform:none}} .sx-kpis{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:11px; padding-top:12px;border-top:1px solid var(--border)} .sx-kpi{text-align:center} .sx-kpi b{display:block;font-size:15px;font-weight:900;color:var(--text);font-variant-numeric:tabular-nums} .sx-kpi span{font-size:11px;color:var(--muted);font-weight:600} .sx-kpi.sx-pos b{color:#34d27b} .sx-kpi.sx-neg b{color:#ff6b6b} /* Synthèse actionnable « À retenir » */ .sx-insights{display:flex;flex-direction:column;gap:0} .sx-ins{display:flex;gap:9px;align-items:flex-start;font-size:11.5px;line-height:1.45; font-weight:600;color:var(--text);padding:9px 2px;border-top:1px solid var(--border)} .sx-ins:first-of-type{border-top:1px solid var(--border);margin-top:9px} .sx-ins-i{flex:0 0 auto;font-size:12px} .sx-ins b{font-weight:900} .sx-ins-good b{color:#34d27b} .sx-ins-bad b{color:#ff6b6b} .sx-ins-warn b{color:#f4c64a} /* Combinés : sous-ligne + réussite par nb de jambes */ .sx-combo-sub{font-size:10.5px;color:var(--muted);font-weight:600;margin-top:9px} .sx-combo-sub b{color:var(--text)} /* Panneau « Volume de données » (transparence) : KPIs en 3 colonnes + note */ .sx-kpis3{grid-template-columns:repeat(3,1fr)} /* Badge VARIATION 24 h sous chaque compteur du panneau Volume */ .sx-d24{display:block;margin-top:2px;font-size:9.5px;font-weight:800;letter-spacing:.02em; color:#34d27b;font-variant-numeric:tabular-nums} .sx-d24.z{color:var(--muted);opacity:.55} /* Ligne PÉRIODE DE MESURE (contexte du nombre calibré) */ .sx-data-period{font-size:10.5px;font-weight:700;color:var(--muted);margin-top:9px} .sx-data-period b{color:var(--accent);font-weight:900} /* Sous-titre « En cours » (pipeline en attente de résultat) dans le panneau Volume */ .sx-data-sub{font-size:10.5px;font-weight:800;letter-spacing:.04em;color:#9fb6cf;margin:14px 0 0; padding-top:11px;border-top:1px solid var(--border)} /* INDICE DE FIABILITÉ (preuve d'auto-amélioration) : gros score + tendance + mini-courbe */ .sx-rel-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:11px} .sx-rel-idx{font-size:34px;font-weight:900;letter-spacing:-.02em;color:var(--text); font-variant-numeric:tabular-nums;line-height:1} .sx-rel-idx small{font-size:14px;font-weight:800;color:var(--muted)} .sx-rel-tr{font-size:11.5px;font-weight:800;margin-top:5px} .sx-rel-tr.up{color:#34d27b} .sx-rel-tr.flat{color:var(--muted)} .sx-rel-tr.down{color:#ff6b6b} .sx-rel-kpi{text-align:right} .sx-rel-kpi b{display:block;font-size:14px;font-weight:900;color:var(--text);font-variant-numeric:tabular-nums} .sx-rel-kpi span{font-size:11px;color:var(--muted);font-weight:600} .sx-rel-period{font-size:10.5px;font-weight:700;color:var(--muted);margin-top:9px} .sx-rel-period b{color:var(--accent);font-weight:900} .sx-rel-chart{margin-top:12px} .sx-relc{width:100%;height:auto;display:block} .sx-relc-yl{fill:var(--muted);font-size:8px;font-weight:700;opacity:.8} .sx-relc-xl{fill:var(--muted);font-size:8px;font-weight:700;opacity:.7;text-transform:uppercase;letter-spacing:.04em} .sx-rel-note{font-size:10.5px;color:var(--muted);font-weight:600;line-height:1.45;margin-top:11px; padding-top:10px;border-top:1px solid var(--border)} .sx-rel-note b{color:var(--text)} .sx-data .sx-kpis:first-of-type{border-top:0;padding-top:0;margin-top:11px} .sx-vbs .vbs-head{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:8px;font-size:9.5px; font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;padding:11px 0 2px;text-align:right} .sx-vbs .vbs-head div:first-child{text-align:left} .vbs-row{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:8px;align-items:center;padding:10px 0; border-top:1px solid rgba(255,255,255,.06)} .vbs-sp{font-size:12px;font-weight:800;display:flex;align-items:center;gap:5px;flex-wrap:wrap;line-height:1.3} .vbs-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:0 0 auto} .vbs-cell{text-align:right;font-size:11px;color:var(--muted);font-weight:600;line-height:1.35} .vbs-cell b{display:block;color:var(--text);font-weight:900;font-size:16px} .vbs-cell span{display:block;font-size:9.5px} .vbs-cell .vbs-c2{opacity:.62;font-size:9px} .vbs-sim{font-size:9px;font-weight:900;color:#ff9f43;background:rgba(255,159,67,.14); padding:1px 6px;border-radius:8px} .vbs-roi{font-size:9px;font-weight:900;color:#2ee27f;background:rgba(46,226,127,.14); padding:1px 6px;border-radius:8px} .sx-data-note{font-size:10.5px;color:var(--muted);font-weight:600;line-height:1.45;margin-top:11px; padding-top:10px;border-top:1px solid var(--border)} .sx-data-note b{color:var(--text)} /* En-tête de SECTION (hiérarchie pro de la page Stats) : libellé majuscule accentué + sous-titre */ .sx-sec{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:12px 2px 0;padding-top:6px; font-size:11px;font-weight:900;letter-spacing:.10em;text-transform:uppercase;color:var(--accent)} .sx-sec::before{content:"";flex:0 0 14px;height:2px;border-radius:2px;background:var(--accent); align-self:center;opacity:.85} /* Titre bleu sur UNE ligne (ne se coupe plus en deux) ; sous-titre gris SUR LA LIGNE EN DESSOUS. */ .sx-sec-lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sx-sec-sub{flex-basis:100%;margin-left:23px;font-size:10.5px;font-weight:600;letter-spacing:.005em; text-transform:none;color:var(--muted);line-height:1.35} .sx-acc{margin:0;border:0} .sx-acc>summary.sx-sec-sum{cursor:pointer;list-style:none;user-select:none;-webkit-user-select:none} .sx-acc>summary.sx-sec-sum::-webkit-details-marker{display:none} .sx-acc>summary.sx-sec-sum::marker{content:""} .sx-sec-chev{margin-left:auto;font-size:11px;font-weight:700;color:var(--muted); transition:transform .18s ease;transform:rotate(-90deg)} .sx-acc[open]>summary .sx-sec-chev{transform:rotate(0deg)} .sx-acc>summary.sx-sec-sum:hover{color:var(--text)} .sx-acc-body{margin-top:4px} .sx-legs{display:flex;flex-direction:column;gap:7px;margin-top:10px; padding-top:10px;border-top:1px solid var(--border)} .sx-leg{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px; font-weight:700;color:var(--text)} .sx-leg-n{flex:1;text-align:left;margin-left:10px;font-size:9.5px;color:var(--muted);font-weight:600} .sx-leg b{font-variant-numeric:tabular-nums} /* Filtre temporel */ .sx-period{display:flex;gap:7px;margin:0 0 4px} .sx-period a{flex:1;text-align:center;padding:8px 0;border-radius:11px;font-size:11px;font-weight:800; border:1px solid var(--border);color:var(--muted);background:rgba(255,255,255,.02);text-decoration:none} .sx-period a.on{color:var(--text);border-color:rgba(34,184,255,.55);background:rgba(34,184,255,.10)} .sx-bys{display:flex;flex-direction:column;gap:10px} .sx-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:0 2px; white-space:nowrap;font-size:12px;font-weight:800;letter-spacing:.04em; text-transform:uppercase;color:#cfe0f5;overflow:hidden} /* overflow:hidden = un en-tête long n'élargit JAMAIS la carte (fix débordement horizontal) */ .sx-h span{font-size:9.5px;font-weight:600;color:var(--muted);text-transform:none;letter-spacing:0; min-width:0;overflow:hidden;text-overflow:ellipsis} /* sous-titre : ellipsis plutôt que déborder */ /* Bannière BETSFIX du sport (image Telegram) en en-tête de cadre stats (demande user 2026-07-24) */ .stat-banner{display:block;width:auto;height:auto;max-height:74px;max-width:100%;border-radius:10px;margin:0 auto 6px} /* un rien plus petite + centrée (demande user 2026-07-24) */ .stat-banner-sub{text-align:center;font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase; color:#f6c54a;margin:0 0 18px} /* espace en dessous (demande user 2026-07-24) */ .stat-banner-sub.ready,.stat-banner-sub.on{color:#64cd8d} /* .on = sport actif (compté/repris dans les paris) */ /* Onglets « Simple | Combinés » dans un cadre sport (un graphe à la fois) — demande user 2026-07-24 */ .sctabs{display:flex;gap:5px;margin:0 0 10px;flex-wrap:wrap} .sctab{position:relative;flex:1 1 0;min-width:0;padding:8px 4px;border-radius:9px;background:rgba(255,255,255,.04); border:1px solid var(--border);color:var(--muted);font-weight:800;font-size:10.5px;text-transform:uppercase; letter-spacing:.02em;white-space:nowrap;text-align:center;cursor:pointer} .sctab.on{background:rgba(34,184,255,.15);border-color:rgba(34,184,255,.45);color:#fff} /* badge « en cours » (⏳) en COIN (position absolue) -> n'affecte pas le label, jamais de retour ligne */ .sctab-n{position:absolute;top:-6px;right:-4px;min-width:14px;height:14px;padding:0 3px;border-radius:7px; background:rgba(255,184,77,.92);color:#241500;font-size:8.5px;font-weight:900;line-height:14px; text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.35)} .sctab.on .sctab-n{background:rgba(234,246,255,.95);color:#0a2233} /* ROI DISCRET sur l'onglet type-de-pari (demande user 2026-08-02) : petit chiffre sous le label, non criard. */ .sctab-roi{display:block;margin-top:2px;font-size:9.5px;font-weight:900;letter-spacing:0; text-transform:none;font-variant-numeric:tabular-nums} .sctab-roi.pos{color:#63d68f}.sctab-roi.neg{color:#ff8080}.sctab-roi.neu{color:var(--dim)} .sctab-pane{display:none} .sctab-pane.on{display:block} .sx-sub{font-size:11px;color:var(--muted);line-height:1.35;padding:2px 2px 6px} /* Section par sport */ /* mêmes cadres que les cartes de match (.row) : dégradé + bordure cyan + glow */ .sx-sport{background:linear-gradient(180deg,var(--surface2),var(--surface)); border:1px solid var(--cardline);border-radius:var(--radius); box-shadow:var(--cardglow),var(--shadow-sm);padding:11px 12px 10px} .sx-sport-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:2px} .sx-sport-t{font-size:13.5px;font-weight:800;color:var(--text)} .sx-sport-roi{font-size:14px;font-weight:900;font-variant-numeric:tabular-nums} .sx-sport-sub{font-size:10.5px;color:var(--muted);font-weight:600;margin-bottom:4px} .sx-rows{display:flex;flex-direction:column;gap:5px;margin-top:8px} .sx-row{padding:6px 9px;border-radius:9px;background:rgba(255,255,255,.035); border:1px solid var(--border);font-size:11.5px;cursor:pointer} .sx-row-main{display:flex;align-items:center;gap:8px} .sx-row-n{font-weight:800;color:var(--text);flex:none} .sx-row-roi{font-weight:900;min-width:50px;text-align:right;font-variant-numeric:tabular-nums;flex:none} .sx-row-wl{color:#cfe0f5;font-weight:700;font-variant-numeric:tabular-nums;flex:none} .sx-row-c{color:var(--muted);font-weight:700;min-width:40px;text-align:right;font-variant-numeric:tabular-nums} .sx-row-chev{color:var(--muted);font-weight:900;transition:transform .18s;flex:none} .sx-row.open .sx-row-chev{transform:rotate(90deg)} .sx-spark{width:100%;display:block} .paj-empty{text-align:center;color:var(--text);font-weight:800;font-size:14px;padding:26px 12px; background:var(--surface);border:1px solid var(--border);border-radius:14px} .paj-empty span{display:block;margin-top:6px;font-size:11.5px;font-weight:600;color:var(--muted)} /* Carte pari */ .paj{background:linear-gradient(180deg,rgba(17,32,55,.85),rgba(11,20,38,.85)); border:1px solid var(--border);border-radius:16px;padding:13px 14px;margin-bottom:11px; box-shadow:0 6px 18px rgba(0,0,0,.3)} .paj.rowtap{cursor:pointer} /* Liens SofaScore / Unibet : 2 boutons COMPACTS & SOBRES (fond dark, pastille de marque, nom + ↗) */ .da-links{display:flex;gap:8px;align-items:stretch;margin:12px 0 2px} .lnk-bn{flex:1;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:7px; height:38px;border-radius:11px;text-decoration:none;font-size:12px;font-weight:800; letter-spacing:.01em;color:#dce7f5;background:rgba(255,255,255,.035); border:1px solid var(--cardline);transition:background .15s,border-color .15s} .lnk-bn:active{transform:scale(.985)} .lnk-dot{width:7px;height:7px;border-radius:50%;flex:none} .lnk-arr{color:var(--dim);font-weight:700;font-size:11px;margin-left:1px} .lnk-bn-sofa .lnk-dot{background:#2c7bff;box-shadow:0 0 6px rgba(44,123,255,.55)} .lnk-bn-uni .lnk-dot{background:#1ea34a;box-shadow:0 0 6px rgba(30,163,74,.55)} .lnk-bn-sofa:hover{border-color:rgba(44,123,255,.4);background:rgba(44,123,255,.07)} .lnk-bn-uni:hover{border-color:rgba(30,163,74,.4);background:rgba(30,163,74,.07)} /* 📉 Mouvement de cote : ouverture -> clôture, sens (steam/drift) + mini-courbe */ .om{background:rgba(255,255,255,.04);border:1px solid var(--cardline);border-radius:12px; padding:9px 12px;margin:11px 0 2px} .om-h{font-size:11.5px;font-weight:800;letter-spacing:.03em;color:#cfe0f5;text-transform:uppercase; display:flex;flex-direction:column;gap:2px;margin-bottom:7px} .om-sub{font-size:9px;font-weight:600;color:var(--muted);text-transform:none;letter-spacing:0} .om-row{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:12.5px;font-weight:700} .om-lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#eaf2ff} .om-spk{flex:none;width:74px;height:22px;opacity:.95} .om-spk .sx-spark{height:22px} .om-vals{flex:none;display:flex;gap:5px;align-items:center;font-variant-numeric:tabular-nums} .om-o{color:var(--muted)} .om-arr{font-weight:800;white-space:nowrap} .om-pct{flex:none;width:52px;text-align:right;font-weight:800;font-variant-numeric:tabular-nums} .om-down{color:#34d27b} .om-up{color:#ff6b6b} .om-flat{color:var(--muted)} .paj.open .exp-chev{display:inline-block;transform:rotate(180deg)} .paj .exp{margin-top:11px} .dash-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:20px 0 9px; font-size:15px;font-weight:900;color:var(--text)} /* Programme du jour (accueil) : CADRE DÉPLIABLE (details/summary), matchs groupés par sport ; par ligne = heure PUIS match en dessous. Pari publié ~1 h avant chacun. */ /* CADRE UNIQUE « 📅 Programme du jour » : paris à jouer + reste du slate FUSIONNÉS, ordre chronologique. */ .anz{margin-top:14px;border:1px solid var(--border);border-radius:16px;padding:10px 12px 6px; background:linear-gradient(160deg,rgba(34,184,255,.04),rgba(255,255,255,.012))} .prog-sec{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:15px; font-weight:900;color:var(--text);margin:14px 2px 6px} .prog-sec:first-child{margin-top:2px} .prog-n{font-size:11.5px;font-weight:800;color:var(--accent);background:rgba(34,184,255,.12); border:1px solid rgba(34,184,255,.28);border-radius:8px;padding:1px 8px} /* Chaque match du programme = carte `.mc-*` comme un pari analysé, mais NON dépliable (pas d'analyse). */ .prog-card{margin:6px 0} .prog-card .mc-head{cursor:default;padding:10px 12px} .prog-card .mc-betl.mc-noplay{opacity:.72} /* Carte COMPACTE « prochains lives » (user 2026-08-20) : non cliquable (pas de chevron), + d'air SOUS les équipes (le nom d'équipe ne colle plus au bord bas), et le bloc pari vide ne prend pas de place. */ .mc-compact{cursor:default} .mc-compact .mc-teams{margin-bottom:8px} .mc-compact .mc-sub:empty{display:none} /* Carte PROVISOIRE avec analyse : cliquable comme un vrai pari (même structure .mc + toggle JS). */ .prog-card-x .mc-head{cursor:pointer} /* Mention « pari provisoire » sous le pari : discrète, avec l'heure de la ré-analyse (coup d'envoi − 1 h). */ .mc-reana{font-size:11px;color:var(--accent);margin-top:3px;font-weight:700;letter-spacing:.01em} .mc-reana .dim{font-weight:600} /* Pari PROVISOIRE (abstention sans value) : teinte DORÉE -> clairement distinct d'un pari de value confirmé (vert). Montre « le pari si l'on devait en jouer un » sans le vendre comme une value. */ .mc-prov .mc-bt{color:var(--gold);font-weight:800} /* Provisoire — COTE : chip doré discret (info secondaire), gélule cohérente avec la carte dépliée. */ .mc-bc-prov{color:var(--gold);border:1px solid rgba(246,197,74,.34); background:linear-gradient(180deg,rgba(246,197,74,.15),rgba(246,197,74,.05)); box-shadow:0 1px 4px rgba(0,0,0,.25)} /* Provisoire : ligne « ré-analyse » DISCRÈTE (allègement 2026-07-11) — petite, grisée, non grasse : info présente mais qui ne pèse plus visuellement (la carte dorée + la zone disent déjà l'essentiel). */ .mc-reana-prov{color:var(--muted);font-size:11px;font-weight:600;opacity:.92;margin-top:2px} /* Provisoire — présentation épurée : pastille de RÔLE (dit « hors ROI » une fois) + puce confiance. */ .mc-prov-tag{display:inline-block;font-size:9px;font-weight:800;letter-spacing:.07em;text-transform:uppercase; color:var(--gold);background:var(--gold-bg);border:1px solid var(--gold-bd);border-radius:7px; padding:2px 7px;margin:1px 0 5px} .mc-prov-tag span{opacity:.72;font-weight:600;letter-spacing:.02em} /* Provisoire — CONFIANCE : badge doré PLEIN (encre sombre) -> la « chance » ressort (info principale). Même hauteur + largeur MINI que la cote -> les deux colonnes de pastilles s'alignent parfaitement. */ .mc-prov-cf{flex:none;align-self:center;display:inline-flex;align-items:center;justify-content:center; min-width:48px;height:23px;border-radius:99px;padding:0 9px;font-size:11px;font-weight:900; font-variant-numeric:tabular-nums;color:#1c1404; background:linear-gradient(180deg,#f8ce5c,#e0ad2f);border:1px solid rgba(246,197,74,.5); box-shadow:0 2px 8px rgba(246,197,74,.3)} /* ===== Cartes de paris — STYLE TELEGRAM (demande user 2026-07-12, reprend les cartes publiées, sans logo) : fond BLEU NUIT dégradé + bordure lumineuse ; titre en tiret long ; « Confiance % » en texte ; la COTE en GROS chiffre (blanc) en bas à DROITE avec le label « COTE ». ===== */ /* Couleurs/graisses CALQUÉES sur la carte Telegram (tools/card_image.py) : cyan #5fd0ff, comp #93b7db, titre #eef4fb, analyse #a7bcd6 (léger), meta #90a4be, cote #fff. */ /* Fond UNI (plus de dégradé 165° étirable qui redistribuait « la lumière » au dépli — user 2026-07-21). */ /* TOUTES les cartes de pari : bordure BLANCHE + bord GAUCHE coloré selon le RÉSULTAT (demande user 2026-07-25). Par défaut (à venir / en attente) = doré ; gagné = vert ; perdu = rouge ; live = doré ; remboursé/annulé = gris. L'état est posé via la classe `mc-r-*` (helper `_card_state_cls`). */ .row.mc.mc-tg{background:radial-gradient(135% 130% at 50% 0%,rgba(34,184,255,.12),rgba(34,184,255,.045) 52%,rgba(34,184,255,.018) 100%); /* GLOW comme les cartes (user 2026-09-10) : combiné lumineux hors jambes, plus le teal #12212f ni le fond page trop foncé */ border:1px solid var(--st-soon); /* bord gauche UNIFORME (user 2026-08-17 : plus de 3px à gauche) */ box-shadow:0 0 0 1px rgba(255,255,255,.10),0 0 24px rgba(34,184,255,.42),0 12px 32px rgba(0,0,0,.5)} /* halo cyan cohérent */ .row.mc.mc-tg.mc-r-won{border-color:var(--st-won)} .row.mc.mc-tg.mc-r-lost{border-color:var(--st-lost)} .row.mc.mc-tg.mc-r-push{border-color:var(--st-void)} .row.mc.mc-tg.mc-r-live{border-color:var(--st-live)} .mc-tg .mc-head{padding:12px 16px 11px} .mc-tg .mc-sport{color:#5fd0ff;font-weight:800;letter-spacing:.05em} .mc-tg .mc-comp{color:#93b7db;font-weight:600} .mc-tg .mc-comp-sep{color:#5f7a97} /* (CSS des styles STYLE-E « unibet » et TICKET RETIRÉ 2026-09-10 : style CLASSIC seul) */ .fp{flex:none;width:16px;height:16px;border-radius:4px;font-size:9px;font-weight:900;font-style:normal;display:inline-flex;align-items:center;justify-content:center;color:#0a0e14} .fp-w{background:#34d27b}.fp-d{background:#8a9bb0}.fp-l{background:#ff7b7b} /* `.tk-sel` NE grandit PAS (flex 0 1 auto) -> la cote reste COLLÉE au pari à jouer (user 2026-09-04) au lieu d'être poussée tout à droite ; ellipsis conservée si le pari est trop long. */ .tk-sel{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; font-size:19.5px;font-weight:900;color:#fff;letter-spacing:-.01em;line-height:1.2} .tk-sel.abst{color:var(--muted);font-weight:800;font-size:14.5px} .tk-odds{flex:none;display:inline-flex;align-items:baseline;gap:2px;color:#5fd0ff} .tk-odds i{font-style:normal;font-size:14px;font-weight:800;opacity:.8} .tk-odds b{font-size:24px;font-weight:900;letter-spacing:-.02em;font-variant-numeric:tabular-nums} /* Carte RÉSULTAT : cote collée à droite du pari, MÊME taille de police que le pari joué (user 2026-09-04). */ .tk-odds-sel i{font-size:14px} .tk-odds-sel b{font-size:19.5px} .tk-score{flex:none;display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:7px; background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);font-size:13px;font-weight:900; color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:.05em} .tk-score.won{color:#8fe6b0;box-shadow:inset 0 0 0 1px rgba(52,210,123,.34)} .tk-score.lost{color:#ff9d9d;box-shadow:inset 0 0 0 1px rgba(255,125,125,.32)} /* Score live : plus de point clignotant sur le chip (seul le badge live clignote, user 2026-09-04). */ .tk-mx{margin-top:8px;font-size:12px;font-weight:700;color:#61748b;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tk-mx b{font-weight:900;color:#8fa4bd} .tk-mx b.c,.tk-mx b.pos{color:var(--st-won)} .tk-mx b.neg{color:var(--st-lost)} .tk-mx b.mut{color:#a7b4c4} .tk-mx .sep{color:#3a4a5e;margin:0 6px} .tk-why{margin-top:11px;padding-left:12px;border-left:2px solid #3a9fe0} .tk-why>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:900;color:#5fb4ee;white-space:nowrap} .tk-why>summary::-webkit-details-marker{display:none} .tk-chev{font-size:11px;transition:transform .18s} .tk-why[open] .tk-chev{transform:rotate(180deg)} .tk-why ul{margin:7px 0 2px;padding:0;list-style:none} .tk-why li{position:relative;padding-left:16px;margin:5px 0;font-size:12.5px;line-height:1.5;color:#c4d3e6;font-weight:500} .tk-why li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:#3a9fe0} .tk-why li b{color:#eef4fb;font-weight:800} /* Pied : BARRES du code-barres (le cachet, user 2026-09-05) pleine largeur + HEURE lisible dessous ; « Pourquoi ce pari » posé DESSOUS, flèche de déploiement dans le coin DROIT. */ .tk-foot{margin-top:13px;padding-top:11px;border-top:1px dashed rgba(233,242,255,.14)} .tk-bc{width:100%;height:32px;border-radius:3px 3px 0 0;opacity:.92;overflow:hidden} /* HRI = numéro lisible collé SOUS les barres (comme un vrai code-barres) : monospace, espacé, discret. */ .tk-hri{margin-top:3px;text-align:center;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:10.5px;font-weight:700;letter-spacing:.26em;text-indent:.26em;color:#8ea3ba;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tk-whyd{margin-top:9px} .tk-why-bar{display:flex;align-items:center;cursor:pointer;list-style:none;font-size:12.5px;font-weight:900;color:#5fb4ee} .tk-why-bar::-webkit-details-marker{display:none} .tk-why-bar .tk-chev{margin-left:auto;font-size:11px;transition:transform .18s} .tk-whyd[open] .tk-why-bar .tk-chev{transform:rotate(180deg)} /* Combiné : en-tête « · N jambes » à gauche + COTE tout à droite (même ligne) ; jambes dessous. */ /* En-tête combiné = 1er enfant du corps -> pas de marge/bordure/padding en HAUT (sinon ligne vide au-dessus du nom, user 2026-09-04). On garde juste le séparateur BAS avec les jambes. */ .tk-cbo{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 0 9px; border-bottom:1px solid rgba(255,255,255,.07)} .tk-cbo-t{font-size:14.5px;font-weight:900;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .tk-cbo-n{color:#6f8299;font-weight:700} .tk-cbo-ct{flex:none;display:flex;align-items:baseline;gap:5px} .tk-cbo-ct i{font-style:normal;font-size:9px;font-weight:800;letter-spacing:.1em;color:var(--gold);text-transform:uppercase} .tk-cbo-ct b{font-size:19px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.02em} .tk-cbo-ct.won b{color:#8fe6b0} .tk-cbo-ct.lost b{color:#ff9d9d} .tk-legs{min-width:0} .tk-leg{padding:8px 0} .tk-leg+.tk-leg{border-top:1px dashed rgba(255,255,255,.1)} .tk-leg-h{display:flex;align-items:center;gap:9px;min-width:0} .tk-leg-s{font-size:13.5px;font-weight:900;color:var(--text)} .tk-leg.lost .tk-leg-s{color:var(--muted)} .tk-dot{flex:none;width:7px;height:7px;border-radius:50%;margin-right:7px;background:#3a9fe0;display:inline-block;vertical-align:middle} .tk-dot.won{background:var(--st-won)} .tk-dot.lost{background:var(--st-lost)} .tk-dot.push{background:var(--st-void)} .tk-leg-o{flex:none;display:inline-flex;align-items:baseline;gap:1px;color:#5fd0ff;font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap} .tk-leg-o i{font-style:normal;opacity:.75;font-weight:800;font-size:11px} .tk-leg-sub{margin-top:2px;font-size:11.5px;color:#8fa2b8;font-weight:600} .tk-leg-mx{margin-top:2px;font-size:11px;font-weight:700;color:#61748b;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tk-leg-mx b{font-weight:900;color:#8fa4bd} .tk-leg-mx b.c,.tk-leg-mx b.pos{color:var(--st-won)} .tk-leg-mx .sep{color:#3a4a5e;margin:0 5px} .tk-chip{flex:none;display:inline-flex;align-items:center;padding:2px 8px;border-radius:6px;font-size:12px;font-weight:900; background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);color:var(--text);font-variant-numeric:tabular-nums} .tk-chip.won{background:rgba(52,210,123,.1);color:#8fe6b0;box-shadow:inset 0 0 0 1px rgba(52,210,123,.34)} .tk-chip.lost{background:rgba(255,125,125,.1);color:#ff9d9d;box-shadow:inset 0 0 0 1px rgba(255,125,125,.32)} .tk-chip.live::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);box-shadow:0 0 6px rgba(255,200,80,.85);animation:scpulse 1.4s ease-in-out infinite;margin-right:4px} .mc-dash{color:#5f7a97;font-weight:600;margin:0 4px} /* Équipes = HÉROS de la carte (demande user 2026-07-14) : plus GRANDES (16 px) que le pari (14 px). */ .mc-tg .mc-teams{font-size:15px;font-weight:800;color:#eef4fb;line-height:1.26;margin-top:10px; white-space:normal;overflow:visible;text-overflow:clip;text-wrap:balance} /* Court extrait d'analyse à BARRE CYAN à gauche (comme la carte Telegram) — texte léger, plafonné à 4 lignes (demande user 2026-07-12 ; line-clamp = filet visuel, la coupe texte fait déjà l'essentiel). */ .mc-note{margin-top:9px;padding-left:13px;border-left:2px solid #3a9fe0;color:#a7bcd6; font-size:12.5px;font-weight:500;line-height:1.5; display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} /* MÊME trait que le filet au-dessus de « Pourquoi ce choix » (.cleg-fold-bet border-top) — demande user 2026-07-21 : fini le dégradé bleuté, trait blanc uni discret partout. */ .mc-div{height:1px;margin:10px 0 8px;background:rgba(255,255,255,.06)} .mc-open .mc-div{display:none} .mc-tg .mc-chev{display:none} /* le gros chiffre COTE occupe le coin bas-droit -> pas de chevron */ /* Pari à jouer : SOUS les équipes et PLUS PETIT qu'elles (demande user 2026-07-14). Reste en gras (le pari), mais l'équipe (le match) domine la hiérarchie de la carte. */ .mc-pick{font-size:13px;font-weight:800;color:#eef4fb;line-height:1.3;letter-spacing:-.01em} .mc-conf{margin-top:10px;font-size:13px;color:#90a4be;font-weight:600} .mc-conf b{color:#fff;font-weight:800;font-variant-numeric:tabular-nums} .mc-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:13px} .mc-foot .mc-reana{margin-top:0;color:#7f93aa} .mc-cote{flex:none;text-align:right;line-height:1} .mc-cote-l{display:block;font-size:9.5px;font-weight:800;letter-spacing:.13em;color:#90a4be;margin-bottom:3px} .mc-cote-v{font-size:30px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1} /* Bande VERDICT (demande user 2026-07-13) : confiance (barre + % coloré par niveau) À GAUCHE, cote À DROITE -> les 2 chiffres clés se lisent ENSEMBLE ; la couleur encode le risque sans avoir à lire. */ .mc-verdict{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-top:11px; padding-top:10px;border-top:1px solid var(--border)} .mc-vc{flex:1;min-width:0} .mc-vc-lab{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:10.5px; font-weight:800;color:#8496ac;letter-spacing:.09em;margin-bottom:7px} .mc-vc-pct{font-size:16px;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-.01em; white-space:nowrap;flex:none} .mc-vc-word{font-size:11px;font-weight:700;letter-spacing:.01em;opacity:.9;margin-right:6px} .mc-vbar{height:7px;border-radius:99px;background:#20222a;overflow:hidden;position:relative; box-shadow:inset 0 1px 2px rgba(0,0,0,.4)} .mc-vbar>i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;display:block;min-width:7px; box-shadow:0 0 10px rgba(255,255,255,.12)} /* Marqueur « proba implicite du marché » sur la barre de confiance (demande user 2026-07-14) : notre confiance qui DÉPASSE ce trait = edge VISUEL. */ .mc-vmark{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:#fff;opacity:.8; z-index:2;border-radius:2px;box-shadow:0 0 3px rgba(0,0,0,.75)} /* Ligne VALUE (EV vs marché) sous la barre : vert = value positive, ambre = négative. */ .mc-vc-val{margin-top:8px;font-size:11px;font-weight:800;letter-spacing:.01em} .mc-vc-val.pos{color:#a6e22e} .mc-vc-mk{color:var(--muted);font-weight:600} .mc-vc-foot{margin-top:6px;font-size:11px;font-weight:600;color:var(--muted)} /* Traduction EN CLAIR du marché, sous la sélection (demande user 2026-07-13) — discrète, une flèche cyan. */ .mc-gloss{margin-top:5px;font-size:12.5px;color:#8fa2b8;font-weight:600;line-height:1.35} .mc-gloss b{color:#c4d2e2;font-weight:700} .mc-gloss .ar{display:none} /* flèche ↳ du glose retirée (user 2026-08-15) */ /* Mention « pari publié figé · cote a bougé » (demande user 2026-07-14) : rassurant, pas alarmant. */ .mc-moved{margin-top:7px;font-size:11.5px;font-weight:700;color:#c9a24a; background:rgba(246,197,74,.07);border:1px solid var(--gold-bd);border-radius:8px;padding:5px 9px} .mc-moved b{color:var(--gold);font-variant-numeric:tabular-nums} .mc-moved-m{color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums} /* Variante OR de la carte Telegram : le COMBINÉ DU JOUR (demande user 2026-07-12) — bordure/lueur dorées, sport + cote en or, présenté comme les provisoires mais en jaune. */ /* Combiné du jour : cadre VERT + halo (même patron de halo que les cartes de pari joué) — demande user 2026-07-21 (avant : doré). Vert émeraude #34d27b/#64cd8d (le vert « OUI » validé). */ /* Combiné : bordure BLANCHE (3 côtés) comme les autres paris — le bord GAUCHE reste coloré par l'état (mc-r-*, doré par défaut). Demande user 2026-07-25 (« les combinés sont toujours en vert »). */ .row.mc.mc-tg-gold{ box-shadow:0 0 0 1px rgba(255,255,255,.10),0 0 24px rgba(34,184,255,.42),0 12px 32px rgba(0,0,0,.5)} /* HALO cyan (user 2026-09-10) : cohérent avec cartes simples + cadres stats (avant : glow blanc) */ .row.mc.mc-tg-gold.mc-r-won{border-color:var(--st-won)} .row.mc.mc-tg-gold.mc-r-lost{border-color:var(--st-lost)} .row.mc.mc-tg-gold.mc-r-push{border-color:var(--st-void)} .mc-tg-gold .mc-sport{color:#64cd8d} .mc-tg-gold .mc-sport-w{color:var(--text)} /* titre « COMBINÉ MULTISPORT » en BLANC (user 2026-07-21) */ .mc-tg-gold .mc-cote-v{color:#64cd8d} .mc-tg-gold .mc-cote-l{color:#3f9d6d} /* DIFFÉRENCIATION DES 2 COMBINÉS (user 2026-08-19) : Sûr = TEAL calme (fiabilité) · Cote 2 = AMBRE (ambition). L'accent porte UNIQUEMENT sur la COTE (chiffre proéminent). Le bord du cadre reste UNIFORME sur les 4 côtés (user 2026-08-20 : « toutes les bordures de cadre doivent être les mêmes ») — plus de bord-gauche d'une autre couleur qui créait une couture aux coins. */ .mc-tg-sur .mc-cote-v{color:#54c7c0} .mc-tg-sur .mc-cote-l{color:#3d938d} .mc-tg-cote2 .mc-cote-v{color:#e8b93a} .mc-tg-cote2 .mc-cote-l{color:#b58a26} /* Jambes du combiné présentées comme des PICKS de provisoire (sélection en gras + match en sous-titre). */ /* Écart entre jambes = MÊME rythme qu'entre cartes provisoires (demande user 2026-07-21, corrigé 2e passe) : en FLEX les marges ne FUSIONNENT pas (7+9+9+7 s'additionnaient -> écart ~33px vs ~19px entre provisoires). -> conteneur en BLOCK (comme le flux des provisoires) : les marges des jambes (6px, = .prog-card) fusionnent avec celles du .mc-sep (9px) -> écart identique. */ .mc-combo-legs{margin:2px 0;display:block} .mc-combo-legs .cleg{margin:6px 0} /* Étiquette « TOTAL DU COMBINÉ » entre les jambes et le verdict GLOBAL (user 2026-07-21) : label discret centré entre deux filets (même trait blanc .06 que partout) -> les chiffres du bas se lisent comme le TOTAL, plus comme la suite de la dernière jambe. */ .combo-total-hd{display:flex;align-items:center;gap:10px;margin:12px 0 6px} .combo-total-hd::before,.combo-total-hd::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.06)} .combo-total-hd span{flex:none;font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase; color:#9fb3cc} .mc-cleg{display:flex;align-items:flex-start;gap:9px} /* Sous-cadre par jambe QUAND les matchs sont DIFFÉRENTS (demande user 2026-07-12). */ .mc-cleg-box{padding:10px 12px 10px 13px;border-radius:13px;background:rgba(255,255,255,.028); border:1px solid rgba(255,255,255,.07)} /* BORD GAUCHE coloré selon l'état (demande user 2026-07-13) : jaune=en attente, vert=gagné, rouge=perdu. */ .mc-cleg-pending{border-left:3px solid var(--st-soon)} .mc-cleg-won{border-left:3px solid var(--st-won)} .mc-cleg-lost{border-left:3px solid var(--st-lost)} .mc-cleg-push{border-left:3px solid var(--st-void)} .mc-cleg-b{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px} /* MATCH en titre (équipes) + badge/score live ; PARI À JOUER dessous (sélection + cote or). */ .mc-cleg-match{font-size:14px;font-weight:800;color:#eef4fb;line-height:1.26;display:flex;gap:9px;align-items:center;flex-wrap:wrap} .mc-cleg-bet{margin-top:3px;font-size:13px;font-weight:700;color:#cfe0f5;line-height:1.3} .mc-cleg-o{margin-left:7px;font-size:11.5px;font-weight:900;color:#64cd8d;font-variant-numeric:tabular-nums} /* cote de jambe : vert émeraude (cadre combiné passé au vert 2026-07-21) */ .mc-cleg-sc{color:#5be08c;font-weight:800;font-variant-numeric:tabular-nums} /* analyse de la jambe (comme les combinés Telegram) — texte léger sous la sélection. */ .mc-cleg-why{margin-top:6px;font-size:11.5px;font-weight:500;color:#a7bcd6;line-height:1.45} /* JAMBE = CARTE DE SIMPLE (demande user 2026-07-14) : chaque jambe encadrée exactement comme une carte de pari simple — en-tête SPORT • match, le pari en gras, l'explication en clair (gloss ↳), la COTE à droite, bord gauche coloré par état + badge. Idem en live (badge 🟢 + tableau de score). */ .cleg{content-visibility:auto;contain-intrinsic-size:auto 260px;background:radial-gradient(135% 130% at 50% 0%,rgba(34,184,255,.12),rgba(34,184,255,.045) 52%,rgba(34,184,255,.018) 100%);border:1px solid var(--st-soon);position:relative;overflow:hidden; /* fond PREMIUM bleuté = panneau stats (user 2026-09-10) ; opaque -> stable au dépli */ border-radius:12px;padding:11px 12px 10px; box-shadow:0 0 24px rgba(34,184,255,.42),var(--shadow-sm)} /* HALO cyan = même que les cartes/cadres stats (user 2026-09-10) */ /* FILIGRANE logo (user 2026-09-06) sur CHAQUE jambe de combiné / carte-jambe : pour les combinés le logo vit dans le cadre des JAMBES (pas sur le cadre global doré, cf. .mc-tg-gold::before neutralisé). */ /* Filigrane CENTRÉ verticalement dans le cadre REPLIÉ (user 2026-09-06) : `top:0;bottom:0` couvre toute la carte + position Y FIXE en px (80px = centre d'un cadre replié ~266px : logo 120×106, 133−53) -> le logo reste À LA MÊME PLACE quand le pli « Pourquoi » se déplie (la carte grandit vers le bas, l'offset top ne bouge pas). */ .cleg::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;pointer-events:none; opacity:.05;background:url('/static/logo.png') center 80px/135px no-repeat;filter:grayscale(.3) brightness(1.3)} /* CARTE RÉSULTAT (réglée, ne se déplie plus) : filigrane VRAIMENT centré verticalement (user 2026-09-12) — l'offset fixe 80px n'était bon que pour le cadre repliable ~266px, décentré sur une carte résultat plus courte. */ .cleg.cleg-res-live::before,.cleg.won::before,.cleg.lost::before,.cleg.push::before,.cleg.void::before{ background-position:center center} .cleg>*:not(.mc-corner):not(.mc-bell){position:relative;z-index:1} /* badge coin + 🔔 gardent leur position:absolute */ .cleg.live{border-color:var(--st-live)} /* Sémantique COULEUR (demande user 2026-07-18) : PAS DÉCIDÉ (à venir / en cours) = ORANGE (bord doré par défaut) ; GAGNÉ/acquise = VERT ; PERDU = ROUGE ; ANNULÉ/remboursé (void/push) = GRIS. Le live ne doit PAS être vert (il n'est pas gagné) -> il garde le doré par défaut. */ .cleg.won{border-color:var(--st-won)} .cleg.lost{border-color:var(--st-lost)} .cleg.push,.cleg.void{border-color:var(--st-void)} /* CARTE RÉSULTAT (cleg-res-live) : le CADRE coloré gagné/perdu est CONSERVÉ (user 2026-09-06) + badge ✓/✗ dans le coin haut-droit. C'est le GROS bandeau GAGNÉ/PERDU sous les stats qui est retiré (pas le cadre). */ .cleg-h{display:flex;align-items:center;gap:6px;margin-bottom:8px} .cleg-comp{flex:1;min-width:0;font-size:12px;font-weight:800;color:#8fa2b8;letter-spacing:.02em; text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* LIGUE = couleur du glose + MAJUSCULE + MÊME taille que la carte de pari (user 2026-08-08) */ .cleg-sport{color:#2ee27f;font-weight:800;letter-spacing:.04em;font-size:13px} /* emoji MÊME taille que .mc-ic (carte pari) */ /* Nom du sport TOUJOURS à la couleur du sport (demande user 2026-07-20), quel que soit le type de carte (combiné cyan/or, provisoire, simple, jambe…) : foot vert · basket orange · tennis citron. Placé APRÈS les règles mc-sport/cleg-sport -> l'emporte à spécificité égale. Le TITRE d'un combiné (« COMBINÉ… ») n'a pas de classe spc- -> garde sa couleur (or/cyan). */ .mc-sport.spc-foot,.cleg-sport.spc-foot{color:#2ee27f} .mc-sport.spc-basket,.cleg-sport.spc-basket{color:#ff9f43} .mc-sport.spc-tennis,.cleg-sport.spc-tennis{color:#d7e64a} .cleg-sep{color:var(--dim)} .cleg-bdg{flex:none;font-size:11px;font-weight:900;padding:2px 7px;border-radius:7px;white-space:nowrap} .cleg-bdg.p{background:rgba(232,184,74,.16);color:var(--gold)} /* Badge HEURE d'une jambe à venir : MÊME couleur neutre que les provisoires (.mc-up) — demande user. */ .cleg-bdg.up{background:rgba(255,255,255,.06);color:var(--muted)} /* Badge résultat : CONTOUR assorti à l'état (vert gagné / rouge perdu) — demande user 2026-07-28. */ .cleg-bdg.w{background:rgba(52,210,123,.18);color:#34d27b;border:1px solid rgba(52,210,123,.55)} .cleg-bdg.l{background:rgba(255,107,107,.16);color:#ff6b6b;border:1px solid rgba(255,107,107,.5)} .cleg-bdg.n{background:rgba(144,164,190,.16);color:#90a4be} /* Carte TERMINÉE (gagné/perdu/remb.) : on RETIRE la barre de progression de confiance (thermomètre d'avant-match, muet une fois le résultat connu + doublon du « CONFIANCE % ») — demande user 2026-07-28. Le % reste dans la grille verdict ; le scoreboard devient le point focal. À venir/live : barre gardée. */ .cleg.won .vb-bar, .cleg.lost .vb-bar, .cleg.push .vb-bar, .cleg.void .vb-bar{display:none} /* Idem sur le TOTAL d'un COMBINÉ réglé (user 2026-09-06) : la barre du « Total du combiné » vit dans le cadre doré (.mc-tg-gold), pas dans une .cleg -> la règle ci-dessus ne l'atteignait pas. */ .row.mc.mc-tg-gold.mc-r-won .vb-bar, .row.mc.mc-tg-gold.mc-r-lost .vb-bar, .row.mc.mc-tg-gold.mc-r-push .vb-bar{display:none} /* Badge « en cours » : ORANGE (pas décidé), plus vert (demande user 2026-07-18). */ .cleg-bdg.live{background:rgba(52,210,123,.16);color:#34d27b} /* « 🟢 LIVE » vert comme les cartes (2026-07-21) */ /* Équipes de la jambe sur leur propre ligne, en gros — comme les provisoires (.mc-teams). */ .cleg-teams{font-size:14px;font-weight:800;color:#eef4fb;line-height:1.24;letter-spacing:-.015em; margin:2px 0 9px;white-space:normal} /* CARTE RÉSULTAT « façon live » (user 2026-08-15) : en-tête ligue CENTRÉE + BLANCHE + pays (comme le live), « Terminé » discret sous le score, barre Gagné/Perdu ré-affichée (sans halo), pas de séparateur de pli. */ .cleg-h-c{justify-content:center;position:relative} .cleg-h-c .cleg-comp{flex:0 1 auto;text-align:center;white-space:normal;overflow:visible; text-overflow:clip;line-height:1.25;color:var(--text)} .cleg-res-live .cleg-teams{margin-top:14px} /* MISE EN PAGE IDENTIQUE À LA CARTE CONFIANCE/VALUE (user 2026-08-17) : même inset de contenu que la carte premium (.mc-prem .mc-head = 13px 16px 12px) -> les jambes ont exactement la même respiration/largeur. */ .cleg-res-live{padding:13px 16px 12px} /* LIGUE un rien PLUS PETITE pour les JAMBES seulement (user 2026-08-17 : « cadre dans un cadre » -> moins de largeur, « Pays • Ligue » débordait sur 2 lignes). + on RETIRE le padding 0 44px de la ligue centrée (réservé au badge des cartes normales, ABSENT ici -> il gaspillait la largeur et forçait le retour ligne). */ .cleg-res-live .mc-comp{font-size:11px;padding:0 10px} .tm-fin{font-size:10.5px;font-weight:800;color:var(--muted);letter-spacing:.04em;text-transform:uppercase} .cleg-res-live .cleg-fold-bet{border-top:none;padding-top:0;margin-top:13px} /* BADGE RÉSULTAT pleine largeur (user 2026-08-15) à la place de la barre : GAGNÉ/PERDU/REMBOURSÉ. */ /* BADGE RÉSULTAT pleine largeur (user 2026-08-15) à la place de la barre : GAGNÉ/PERDU/REMBOURSÉ. AUDIT 2026-09-02 : il ressemblait à un BOUTON (bord plein + coins arrondis + libellé centré) alors qu'il n'est pas cliquable — anti-patron « Controls that look tappable but do nothing » de pro-rules. Corrigé en BANNIÈRE d'état : plus de bord périmétrique, un LISERÉ GAUCHE porte la couleur (patron bannière), et une ICÔNE accompagne le mot -> l'information ne repose plus sur la couleur seule (règle a11y « Color Only »), ce qui la rend lisible en daltonisme et en niveaux de gris. */ .cleg-resbadge{width:100%;padding:9px 12px;border-radius:10px; display:flex;align-items:center;justify-content:center;gap:8px; font-size:13px;font-weight:900;letter-spacing:.08em;text-transform:uppercase} /* dans .vm-res -> marge gérée par le wrapper */ .cleg-resbadge svg{width:15px;height:15px;flex:none} .cleg-rb-w{background:rgba(52,210,123,.15);color:#4be39b;border-left:3px solid #34d27b} .cleg-rb-l{background:rgba(255,107,107,.13);color:#ff6b6b;border-left:3px solid #ff6b6b} .cleg-rb-n{background:rgba(144,164,190,.16);color:#aebdd0;border:1px solid rgba(144,164,190,.4)} .mc-combo-res{margin-top:12px} /* badge résultat EN BAS du cadre combiné (user 2026-08-19) */ /* note « hors ROI » en tête de l'onglet Combiné (user 2026-08-16 : affiché mais non compté au ROI) */ .combo-horsroi{font-size:11px;font-weight:600;color:var(--muted);text-align:center;padding:7px 10px; margin-bottom:9px;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:10px} .combo-horsroi b{color:#c4d2e2;font-weight:800} /* Ligne équipes façon Bull (test 2026-08-15) : monogrammes club + VS centré */ .cleg-teams-vs,.tmvs{display:flex;align-items:center;justify-content:center;gap:12px;text-align:center} .mc-teams .tmvs{margin-top:2px} .tm-side{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;min-width:0} .tm-n{font-size:13px;font-weight:800;color:#eef4fb;line-height:1.15;letter-spacing:-.01em} .tm-vs{font-size:14px;font-weight:800;color:var(--text);letter-spacing:-.01em;flex:0 0 auto;font-variant-numeric:tabular-nums} /* = l'heure du match (user 2026-08-15) */ /* LIVE : score + minute empilés au centre, entre les équipes (user 2026-08-15) */ .tm-live{display:flex;flex-direction:column;align-items:center;gap:1px;flex:0 0 auto} .tm-live b{font-size:21px;font-weight:900;letter-spacing:-.01em;color:var(--text);font-variant-numeric:tabular-nums} .tm-min{font-size:10.5px;font-weight:800;color:var(--gold);letter-spacing:.03em} .tm-min .tm-add{margin-left:2px;font-size:.9em;font-weight:900;color:#ff9d5c} /* temps additionnel « +N' » à droite */ .tm-cd{margin-top:4px;display:flex;justify-content:center} /* décompte SOUS l'heure (à venir, user 2026-08-15) */ .tm-b{position:relative;display:inline-block;width:44px;height:44px;flex:0 0 auto} .team-mono{display:grid;place-items:center;width:44px;height:44px;border-radius:50%; font-size:15px;font-weight:900;color:#fff;letter-spacing:-.02em; box-shadow:0 4px 12px rgba(0,0,0,.38),inset 0 0 0 1px rgba(255,255,255,.12)} /* Monogramme CACHÉ par défaut (user 2026-08-15 : pas de flash d'initiales avant le logo) : il n'apparaît QUE si le logo échoue (onerror -> visibility:visible). Logo OK = jamais d'initiales. */ .tm-b .team-mono{visibility:hidden} /* Logo FotMob PNG transparent (pas de cercle blanc, user 2026-08-15) par-dessus le monogramme (repli) */ .team-logo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain; background:none;border-radius:0;filter:drop-shadow(0 2px 5px rgba(0,0,0,.45))} .cleg-body{display:flex;align-items:flex-end;justify-content:space-between;gap:12px} .cleg-main{flex:1;min-width:0} .cleg-pick{font-size:13px;font-weight:800;color:#eef4fb;line-height:1.28;letter-spacing:-.01em} .cleg-gloss{margin-top:5px;font-size:12px;color:#8fa2b8;font-weight:600;line-height:1.32} .cleg-gloss .ar{display:none} /* flèche ↳ du glose retirée (user 2026-08-15) */ /* GLOSE RETIRÉE des cartes de pari (user 2026-09-02, direction « sobriété ») : le pari NOMMÉ se suffit (« Plus de 0.5 but X »), la ligne d'explication « en clair » alourdissait la carte. Réversible : retirer ce display:none. La glose reste calculée (_bet_gloss) pour Telegram/autres usages. */ .mc-gloss,.cleg-gloss{display:none} .cleg-why{margin-top:6px;font-size:11px;font-weight:500;color:#93a7c2;line-height:1.4} .cleg-cote{flex:none;text-align:right;line-height:1} .cleg-cote-l{display:block;font-size:8.5px;font-weight:800;letter-spacing:.12em;color:#90a4be;margin-bottom:2px} .cleg-cote-v{font-size:21px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.02em} .cleg.won .cleg-cote-v{color:#34d27b} .cleg-board{margin-top:9px} /* Justification repliable d'une jambe de combiné de match (« 💡 Pourquoi cette jambe »). */ .cleg-fold{margin-top:8px} .cleg-fold-s{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;font-size:10.5px; font-weight:800;color:var(--text);letter-spacing:.02em} .cleg-fold-s::-webkit-details-marker{display:none} .cleg-chev{margin-left:auto;transition:transform .2s} .cleg-fold[open] .cleg-chev{transform:rotate(180deg)} .cleg-fold .cleg-why{margin-top:6px} /* Même pli, mais sur une carte de pari PLEINE (simple retenu / provisoire) et non une mini-jambe : léger filet de séparation au-dessus + texte un poil plus lisible. */ .cleg-fold-bet{margin-top:9px;padding-top:8px;border-top:1px solid rgba(255,255,255,.06)} .mc-prem .cleg-fold-bet{border-top:none;padding-top:0;margin-top:13px} /* pas de séparateur sous le cadre (live + à venir, user 2026-08-15) */ .mc-r-live .vb-live{margin-bottom:2px} .cleg-fold-bet>.cleg-fold-s{font-size:11px} .cleg-fold-bet .cleg-why{font-size:11.5px;color:#a7bcd6;line-height:1.5} /* ── LIVE MATCH CENTER (§5bis) : barres appariées vert(dom)/bleu(ext) façon SofaScore + timeline ── */ .mcx{margin-top:8px} .mcx-load,.mcx-na{font-size:11.5px;color:#8fa2b8;text-align:center;padding:8px 0} .mcx-body{display:flex;flex-direction:column;gap:9px;margin-top:4px} .mcx-row{display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto auto; column-gap:8px;row-gap:4px;align-items:center} .mcx-h{grid-column:1;text-align:left;font-size:12px;font-weight:800;color:#e6eefb} .mcx-a{grid-column:3;text-align:right;font-size:12px;font-weight:800;color:#e6eefb} .mcx-lab{grid-column:2;font-size:10.5px;color:#8fa2b8;font-weight:600;white-space:nowrap} .mcx-bar{grid-column:1 / 4;grid-row:2;display:flex;height:5px;border-radius:3px;overflow:hidden; background:rgba(255,255,255,.05);gap:2px} .mcx-bh{background:var(--hc,#34d27b);border-radius:3px 0 0 3px} /* domicile = couleur d'équipe (repli vert) */ .mcx-ba{background:var(--ac,#33b7ef);border-radius:0 3px 3px 0} /* extérieur = couleur d'équipe (repli bleu) */ /* APERÇU LIVE = pli FERMÉ par défaut (user 2026-09-13 : plus d'ouverture d'office en Programme/Live) — on charge les stats seulement quand le user ouvre le pli (lazy + refresh 30 s via le handler `toggle`). */ .mcx-fold{margin-top:9px;padding-top:9px;border-top:1px solid rgba(255,255,255,.06)} .mcx-fold>summary{list-style:none;cursor:pointer;font-size:11.5px;font-weight:800;color:#c4d2e2; letter-spacing:.2px;display:flex;align-items:center;justify-content:space-between} .mcx-fold>summary::-webkit-details-marker{display:none} .mcx-chev{color:#8fa2b8;font-size:12px;transition:transform .2s} .mcx-fold[open]>summary .mcx-chev{transform:rotate(180deg)} .mcx-hd{font-size:11.5px;font-weight:800;color:#c4d2e2;letter-spacing:.2px;margin-bottom:2px} /* BARRE « QUI DOMINE LE MATCH » (user 2026-09-11) : indice agrégé, 2 côtés aux couleurs d'équipe */ .mcx-dom{margin:2px 0 12px} .mcx-dom-lab{font-size:12px;font-weight:700;color:#e6eefb;text-align:center;margin-bottom:5px} .mcx-dom-bar{display:flex;height:9px;border-radius:5px;overflow:hidden;background:rgba(255,255,255,.05); gap:2px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)} .mcx-dom-h{border-radius:5px 0 0 5px;min-width:4px;transition:width .5s ease} .mcx-dom-a{border-radius:0 5px 5px 0;min-width:4px;transition:width .5s ease} .mcx-dom-tm{display:flex;justify-content:space-between;font-size:10.5px;font-weight:700;margin-top:4px} .mcx-tl{margin-top:11px;padding-top:9px;border-top:1px solid rgba(255,255,255,.06); display:flex;flex-direction:column;gap:6px} .mcx-ev{display:flex;align-items:center;gap:7px;font-size:11.5px;color:#c4d2e2} .mcx-ev-a{flex-direction:row-reverse;text-align:right} /* event extérieur = miroir (côté droit) */ .mcx-ev-m{color:#8fa2b8;font-weight:700;min-width:30px} .mcx-ev-i{font-size:12.5px} .mcx-ev-p{font-weight:600} .mcx-foot{margin-top:8px;font-size:10px;color:#6f8098;text-align:center;font-style:italic} /* TEST LIVE (track fantôme, app.live_pick) — styles GLOBAUX (les 2 zones live/terminés les partagent ; avant, ils vivaient dans le