/* ========================================================================= * ScoreEnDirect — feuille de styles principale * - Thème clair + thème sombre via [data-theme="dark"] sur * - Layout: header sticky, sidebar gauche, contenu central, panneau * détails à droite (rétractable / overlay sur mobile) * - Priorité : densité, lisibilité, identité sport moderne (bleu profond, * rouge réservé au LIVE, cartes subtiles, typographie tabulaire). * ========================================================================= */ /* ---- Design tokens ------------------------------------------------------ */ :root { /* Surfaces */ --bg: #f5f7fb; --bg-elev: #ffffff; --bg-elev-2: #f0f3f9; --bg-elev-3: #e7ecf4; --surface-muted: #f7f9fc; /* Bordures */ --border: #e4e9f1; --border-strong: #cfd7e3; --divider: #eef1f6; /* Texte */ --text: #0f172a; --text-strong: #061027; --text-muted: #5a6577; --text-dim: #8a94a6; /* Accents */ --accent: #1a56db; --accent-strong: #1748b8; --accent-hover: #143d99; --accent-soft: rgba(26, 86, 219, 0.10); --accent-soft-2: rgba(26, 86, 219, 0.06); --accent-fg: #ffffff; /* États sportifs */ --live: #dc2626; --live-strong: #b91c1c; --live-bg: rgba(220, 38, 38, 0.10); --live-ring: rgba(220, 38, 38, 0.25); --finished: #64748b; --scheduled: #1a56db; --favorite: #eab308; --favorite-hover:#ca8a04; --sun: #f5b301; --sun-hover: #ffc933; --moon: #9aa4b5; --moon-hover: #b4bfd1; --win: #16a34a; --loss: #dc2626; --draw: #94a3b8; /* Élévation */ --shadow-xs: 0 1px 1px rgba(15, 23, 42, 0.03); --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.03); --shadow-md: 0 6px 20px rgba(15, 23, 42, 0.08); --shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.14); /* Radius */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-pill: 999px; /* Layout */ --header-h: 56px; --sidebar-w: 248px; --details-w: 360px; /* Motion */ --dur-fast: 120ms; --dur: 160ms; --dur-slow: 200ms; --ease: cubic-bezier(0.4, 0, 0.2, 1); } [data-theme="dark"] { --bg: #0a1220; --bg-elev: #131c2c; --bg-elev-2: #182338; --bg-elev-3: #1e2a42; --surface-muted: #101828; --border: #23304a; --border-strong: #2f3f5e; --divider: #1c2740; --text: #e8eefc; --text-strong: #f4f7ff; --text-muted: #9aa6bc; --text-dim: #6a7690; --accent: #5b8def; --accent-strong: #4f7de0; --accent-hover: #7ba4f5; --accent-soft: rgba(91, 141, 239, 0.16); --accent-soft-2: rgba(91, 141, 239, 0.08); --accent-fg: #ffffff; --live: #ff5a5a; --live-strong: #ff7373; --live-bg: rgba(255, 90, 90, 0.14); --live-ring: rgba(255, 90, 90, 0.30); --finished: #8a95ab; --scheduled: #5b8def; --favorite: #facc15; --favorite-hover:#fde047; --sun: #f5b301; --sun-hover: #ffc933; --moon: #9aa4b5; --moon-hover: #b4bfd1; --win: #34d399; --loss: #ff5a5a; --draw: #64748b; --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.35); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.25); --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6); } /* ---- Reset / base ------------------------------------------------------- */ * { box-sizing: border-box; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-pill); border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: var(--text-dim); background-clip: padding-box; border: 2px solid transparent; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "cv02", "cv03", "cv04", "cv11"; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } img { display: block; max-width: 100%; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-xs); } /* ---- Header ------------------------------------------------------------- */ .header { position: sticky; top: 0; z-index: 50; height: var(--header-h); background: var(--bg-elev); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 18px; gap: 18px; backdrop-filter: saturate(1.4); } .header__logo { display: inline-flex; align-items: center; gap: 9px; color: var(--text-strong); white-space: nowrap; padding: 4px 6px; border-radius: var(--radius-sm); } .header__logo:hover { background: var(--bg-elev-2); } .header__logo-mark { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, var(--accent), var(--accent-strong)); display: grid; place-items: center; color: #fff; position: relative; box-shadow: 0 2px 8px rgba(26, 86, 219, 0.38), inset 0 1px 0 rgba(255,255,255,0.18); flex-shrink: 0; } .header__logo-dot { width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22); animation: pulse-dot 2s infinite; } @keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22); } 50% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.10); } } .header__logo-text { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; } .header__logo-accent { color: var(--accent); font-weight: 800; } [data-theme="dark"] .header__logo-accent { color: var(--accent-hover); } .header__nav { display: flex; gap: 2px; flex: 1; overflow-x: auto; scrollbar-width: none; } .header__nav::-webkit-scrollbar { display: none; } .header__nav button { background: transparent; border: 0; color: var(--text-muted); padding: 7px 12px; font-size: 13px; font-weight: 600; border-radius: var(--radius-sm); display: inline-flex; align-items: center; gap: 6px; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); white-space: nowrap; position: relative; } .header__nav button:hover { background: var(--bg-elev-2); color: var(--text); } .header__nav button.is-active { color: var(--accent); background: transparent; } .header__nav button.is-active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -14px; height: 2px; background: var(--accent); border-radius: 2px 2px 0 0; } .header__search { position: relative; width: 240px; max-width: 32vw; } .header__search input { width: 100%; height: 34px; padding: 0 12px 0 32px; border: 1px solid var(--border); background: var(--surface-muted); color: var(--text); border-radius: var(--radius-sm); font-size: 13px; outline: none; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .header__search input::placeholder { color: var(--text-dim); } .header__search input:hover { background: var(--bg-elev-2); } .header__search input:focus { border-color: var(--accent); background: var(--bg-elev); box-shadow: 0 0 0 3px var(--accent-soft); } .header__search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-dim); display: inline-flex; pointer-events: none; } .header__actions { display: flex; gap: 4px; align-items: center; } .icon-btn { width: 34px; height: 34px; border-radius: var(--radius-sm); background: transparent; border: 0; color: var(--text-muted); display: grid; place-items: center; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); position: relative; } .icon-btn:hover { background: var(--bg-elev-2); color: var(--text); } .icon-btn.is-active { color: var(--favorite); } /* Bouton thème : l'icône représente le mode ACTUEL (light=soleil jaune, dark=lune grise). */ .theme-icon--sun { color: var(--sun); } .theme-icon--moon { color: var(--moon); } .icon-btn:hover .theme-icon--sun { color: var(--sun-hover); } .icon-btn:hover .theme-icon--moon { color: var(--moon-hover); } #btn-theme { color: currentColor; } .icon-btn__badge { position: absolute; top: 1px; right: 1px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: var(--radius-pill); background: var(--live); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg-elev); } .header__menu-btn { display: none; } /* ---- Layout principal --------------------------------------------------- */ .layout { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--details-w); gap: 16px; padding: 16px; max-width: 1600px; margin: 0 auto; align-items: start; } .layout.is-details-collapsed { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); } /* ---- Sidebar ------------------------------------------------------------ */ .sidebar { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 8px; position: sticky; top: calc(var(--header-h) + 16px); max-height: calc(100vh - var(--header-h) - 32px); overflow-y: auto; scrollbar-gutter: stable; } .sidebar__section { margin-bottom: 14px; } .sidebar__section:last-child { margin-bottom: 0; } .sidebar__title { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); font-weight: 700; padding: 8px 10px 6px; } .sidebar__list { list-style: none; padding: 0; margin: 0; } .sidebar__item { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: var(--radius-sm); cursor: pointer; color: var(--text); font-size: 13px; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); line-height: 1.3; } .sidebar__item:hover { background: var(--bg-elev-2); } .sidebar__item.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .sidebar__item img { width: 18px; height: 18px; border-radius: 3px; object-fit: cover; flex-shrink: 0; background: var(--bg-elev-2); } .sidebar__item-icon { width: 18px; height: 18px; display: grid; place-items: center; font-size: 14px; flex-shrink: 0; } .sidebar__item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar__item-count { font-size: 11px; color: var(--text-dim); background: transparent; padding: 1px 6px; border-radius: var(--radius-pill); font-weight: 600; font-variant-numeric: tabular-nums; } .sidebar__item:hover .sidebar__item-count { color: var(--text-muted); background: var(--bg-elev-3); } .sidebar__item.is-active .sidebar__item-count { background: var(--accent); color: var(--accent-fg); } /* ---- Main panel --------------------------------------------------------- */ .main { min-width: 0; } .toolbar { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 8px 10px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; } .filters { display: flex; gap: 4px; flex-wrap: wrap; } .filters button { background: transparent; border: 1px solid transparent; color: var(--text-muted); padding: 8px 16px; font-size: 13px; font-weight: 600; border-radius: var(--radius-pill); display: inline-flex; align-items: center; gap: 7px; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); line-height: 1.2; min-height: 32px; } .filters button:hover { color: var(--text); background: var(--bg-elev-2); } .filters button.is-active { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); } .filters button.is-active .live-dot { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,0.25); } .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 3px var(--live-ring); animation: pulse 1.6s infinite ease-in-out; display: inline-block; flex-shrink: 0; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(0.82); } } /* ---- Competition group -------------------------------------------------- */ .competition { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 8px; overflow: hidden; box-shadow: var(--shadow-xs); } .competition__header { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: var(--bg-elev); border-bottom: 1px solid var(--divider); font-size: 13px; cursor: pointer; user-select: none; transition: background var(--dur-fast) var(--ease); } .competition__header:hover { background: var(--bg-elev-2); } .competition__header:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* Ligue repliée : fond gris pour la distinguer immédiatement d'une ligue * ouverte (blanche en clair, surface sombre en dark). */ .competition.is-collapsed .competition__header { background: var(--bg-elev-2); border-bottom-color: transparent; } .competition.is-collapsed .competition__header:hover { background: var(--bg-elev-3); } .competition.is-collapsed { border-color: var(--border); } .competition__flag img { width: 20px; height: 20px; border-radius: 3px; object-fit: cover; flex-shrink: 0; background: var(--bg-elev-2); } .competition__meta { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 1; } .competition__country { color: #395f1e; font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; flex-shrink: 0; } .competition__name { color: var(--text-strong); font-weight: 600; font-size: 13.5px; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .competition__live-tag { display: inline-flex; align-items: center; gap: 5px; background: var(--live-bg); color: var(--live); padding: 2px 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; line-height: 1.4; } .competition__live-count { font-variant-numeric: tabular-nums; } .competition__standings-link { font-size: 11px; color: var(--accent); font-weight: 600; cursor: pointer; padding: 2px 8px; border-radius: var(--radius-pill); transition: background var(--dur-fast) var(--ease); } .competition__standings-link:hover { background: var(--accent-soft); } .competition__chevron { color: var(--text-dim); transition: transform var(--dur) var(--ease); display: inline-flex; padding: 2px; } .competition.is-collapsed .competition__chevron { transform: rotate(-90deg); } .competition.is-collapsed .competition__matches { display: none; } /* ---- Match row ---------------------------------------------------------- */ .match { display: grid; grid-template-columns: 64px 22px 1fr 78px 1fr 22px; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--divider); cursor: pointer; transition: background var(--dur-fast) var(--ease); position: relative; } .match:last-child { border-bottom: 0; } .match:hover { background: var(--bg-elev-2); } .match.is-selected { background: var(--accent-soft-2); box-shadow: inset 3px 0 0 var(--accent); } .match--live { background: linear-gradient(90deg, rgba(220,38,38,0.02) 0%, transparent 30%); } [data-theme="dark"] .match--live { background: linear-gradient(90deg, rgba(255,90,90,0.04) 0%, transparent 30%); } .match__status { font-size: 12px; font-weight: 400; color: var(--text-muted); text-align: center; line-height: 1.15; display: flex; flex-direction: column; gap: 1px; font-variant-numeric: tabular-nums; } .match__status-time { font-weight: 400; color: var(--text); } .match__status-finished { font-weight: 400; color: var(--finished); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; } .match__status--live .match__status-minute { color: var(--live); font-weight: 500; font-size: 13px; } .match__status-sub { color: var(--live); font-size: 9px; font-weight: 600; letter-spacing: 0.06em; display: inline-flex; align-items: center; justify-content: center; gap: 4px; } .match__status-sub .live-dot { width: 5px; height: 5px; box-shadow: 0 0 0 2px var(--live-ring); } .match__fav { background: transparent; border: 0; color: var(--text-dim); width: 22px; height: 22px; display: grid; place-items: center; border-radius: var(--radius-xs); padding: 0; transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); opacity: 0.55; } .match:hover .match__fav { opacity: 1; } .match__fav:hover { color: var(--favorite); background: var(--bg-elev-3); transform: scale(1.08); } .match__fav.is-on { color: var(--favorite); opacity: 1; } .match__team { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 400; font-size: 13px; color: var(--text); letter-spacing: 0; line-height: 1.3; } .match__team--home { justify-content: flex-end; } .match__team--away { justify-content: flex-start; } .match__team-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: inherit; } .match__team--home .match__team-name { text-align: right; } .match__team--away .match__team-name { text-align: left; } /* Vainqueur d'un match TERMINÉ uniquement (jamais live/scheduled) : nom * subtilement plus fort. Contraste visible mais sobre. */ .match__team.is-winner { font-weight: 600; color: var(--text-strong); } .match__team.is-winner .match__team-name { font-weight: 600; } /* Carton rouge — petit rectangle rouge type carte de football. Placé entre * le nom d'équipe et le logo (pour home) ou entre le logo et le nom (pour away). * Visible pendant le match ET après (source : cache events du match). */ .match__redcard { display: inline-block; width: 8px; height: 11px; background: #d92222; border-radius: 1.5px; box-shadow: inset 0 -1px 0 rgba(0,0,0,0.18); flex-shrink: 0; vertical-align: middle; } .match__redcard + .match__redcard { margin-left: 2px; } .match__redcard--count { width: auto; min-width: 14px; padding: 0 4px; height: 13px; line-height: 13px; color: #fff; font-size: 9px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; } .match__score { text-align: center; font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--text-strong); letter-spacing: 0.02em; line-height: 1.1; } .match__score--live { color: #e51c1c; font-weight: 600; } .match__score--scheduled { color: var(--text-dim); font-weight: 400; font-size: 13px; letter-spacing: 0; } .match__more { color: var(--text-dim); display: inline-flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .match:hover .match__more { opacity: 1; transform: translateX(2px); } .match.is-selected .match__more { opacity: 1; color: var(--accent); } /* ---- Empty state -------------------------------------------------------- */ .empty-state { background: var(--bg-elev); border: 1px dashed var(--border-strong); border-radius: var(--radius-md); padding: 42px 20px; text-align: center; color: var(--text-muted); } .empty-state__icon { font-size: 36px; margin-bottom: 10px; opacity: 0.85; } .empty-state__title { font-weight: 700; color: var(--text-strong); margin-bottom: 4px; font-size: 15px; } /* Erreur de chargement (distinct de "0 match") */ .empty-state--error { border-color: var(--live-ring); background: var(--live-bg); } .empty-state--error .empty-state__title { color: var(--live-strong); } [data-theme="dark"] .empty-state--error .empty-state__title { color: var(--live); } /* Spinner de chargement discret */ .loading-spinner { display: inline-block; width: 28px; height: 28px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 800ms linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .loading-spinner { animation-duration: 2400ms; } } /* ---- Details panel ------------------------------------------------------ */ .details { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-md); position: sticky; top: calc(var(--header-h) + 16px); max-height: calc(100vh - var(--header-h) - 32px); overflow-y: auto; box-shadow: var(--shadow-xs); } /* Bouton fermer le panneau match — visible desktop ET mobile. */ .details__close { display: grid; place-items: center; position: absolute; right: 10px; top: 10px; background: var(--bg-elev-2); border: 1px solid var(--border); width: 30px; height: 30px; border-radius: 50%; color: var(--text-muted); cursor: pointer; z-index: 2; padding: 0; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); box-shadow: var(--shadow-xs); } .details__close:hover { background: var(--live-bg); color: var(--live); border-color: var(--live-ring); transform: scale(1.05); } .details__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .details__hero { padding: 18px 18px 14px; background: linear-gradient(180deg, var(--bg-elev-2), var(--bg-elev)); border-bottom: 1px solid var(--border); } .details__competition { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-muted); font-weight: 500; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.06em; padding-right: 34px; /* laisse la place au bouton X en top-right */ } .details__competition img { width: 16px; height: 16px; border-radius: 3px; } .details__teams { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; } .details__team { text-align: center; font-size: 13px; font-weight: 500; color: var(--text); letter-spacing: -0.005em; line-height: 1.25; } .details__team.is-winner { font-weight: 700; color: var(--text-strong); } .details__team-logo { width: 52px; height: 52px; background: var(--bg-elev); border-radius: 50%; margin: 0 auto 8px; display: grid; place-items: center; font-size: 15px; font-weight: 800; color: var(--accent); border: 1px solid var(--border); overflow: hidden; box-shadow: var(--shadow-xs); } .details__score { font-size: 32px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-strong); letter-spacing: -0.01em; position: relative; line-height: 1; } .details__score--live { color: var(--live); } .details__minute { text-align: center; font-size: 11px; font-weight: 700; color: var(--live); margin-top: 14px; text-transform: uppercase; letter-spacing: 0.06em; display: inline-flex; align-items: center; gap: 6px; justify-content: center; width: 100%; } .details__minute--finished { color: var(--finished); } .details__minute--scheduled { color: var(--text-muted); } /* -- Onglets du panneau détails ---------------------------------------- * 2 niveaux hiérarchiques : * - Niveau 1 (--main) : Match | Compte rendu | TàT | Classements * - Niveau 2 (--sub) : Résumé | Stats | Compos | ... * État actif = petit soulignement 2 px centré (plus court que le bouton). */ .details__tabs { display: flex; border-bottom: 1px solid var(--border); background: var(--bg-elev); } .details__tabs button { background: transparent; border: 0; color: var(--text-muted); cursor: pointer; position: relative; margin-bottom: -1px; transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); white-space: nowrap; } .details__tabs--main { padding: 4px 8px 0; gap: 2px; } .details__tabs--main button { flex: 1; padding: 12px 8px 14px; font-size: 13px; font-weight: 500; letter-spacing: -0.005em; border-radius: var(--radius-sm) var(--radius-sm) 0 0; } .details__tabs--main button:hover { color: var(--text); background: var(--surface-muted); } .details__tabs--main button.is-active { color: var(--accent); font-weight: 600; background: transparent; } .details__tabs--main button.is-active::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 22px; height: 2px; background: var(--accent); border-radius: 2px 2px 0 0; } .details__body { padding: 16px 18px; } /* Stats */ .stat-row { margin-bottom: 12px; } .stat-row__head { display: flex; justify-content: space-between; font-size: 12px; font-weight: 500; margin-bottom: 4px; font-variant-numeric: tabular-nums; } .stat-row__label { color: var(--text-muted); font-weight: 500; } .stat-row__bar { display: flex; height: 6px; border-radius: var(--radius-pill); overflow: hidden; background: var(--bg-elev-3); } .stat-row__bar-home { background: var(--accent); } .stat-row__bar-away { background: var(--text-dim); } /* Events */ .events { list-style: none; padding: 0; margin: 0; } .event { display: grid; grid-template-columns: 40px 24px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--divider); align-items: center; } .event:last-child { border-bottom: 0; } .event__min { font-weight: 700; color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; } .event__icon { font-size: 14px; text-align: center; } .event__text { font-size: 13px; } .event__player { font-weight: 600; } .event__detail { color: var(--text-muted); font-size: 12px; } /* Lineups */ .lineup { margin-bottom: 14px; } .lineup__title { font-size: 11px; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.08em; } .lineup__list { list-style: none; padding: 0; margin: 0; } .lineup__list li { font-size: 13px; padding: 5px 8px; border-radius: var(--radius-xs); transition: background var(--dur-fast) var(--ease); } .lineup__list li:hover { background: var(--bg-elev-2); } /* H2H table */ .h2h { width: 100%; border-collapse: collapse; font-size: 13px; } .h2h th, .h2h td { text-align: left; padding: 7px 6px; border-bottom: 1px solid var(--divider); } .h2h th { font-size: 10px; text-transform: uppercase; color: var(--text-dim); font-weight: 600; letter-spacing: 0.06em; } .h2h td { font-weight: 500; } .h2h td.score { font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; color: var(--text-strong); } /* Odds */ .odds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; } .odd { background: var(--bg-elev-2); border: 1px solid var(--border); padding: 10px 8px; border-radius: var(--radius-sm); text-align: center; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .odd:hover { border-color: var(--accent); background: var(--accent-soft-2); } .odd__label { font-size: 11px; color: var(--text-muted); font-weight: 600; } .odd__value { font-size: 16px; font-weight: 800; margin-top: 2px; color: var(--accent); font-variant-numeric: tabular-nums; } .odds__note { margin-top: 8px; font-size: 11px; color: var(--text-dim); text-align: center; font-style: italic; } /* Standings table */ .standings { width: 100%; border-collapse: collapse; font-size: 13px; } .standings thead th { background: var(--bg-elev-2); font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; padding: 8px 6px; text-align: center; border-bottom: 1px solid var(--border); letter-spacing: 0.06em; } .standings thead th:nth-child(2) { text-align: left; } .standings tbody td { padding: 8px 6px; text-align: center; border-bottom: 1px solid var(--divider); font-variant-numeric: tabular-nums; } .standings tbody td:nth-child(2) { text-align: left; font-weight: 500; } .standings tbody tr:hover { background: var(--bg-elev-2); } .standings tbody td.pts { font-weight: 700; color: var(--text-strong); } .standings__pos { display: inline-block; width: 22px; height: 22px; line-height: 22px; border-radius: var(--radius-xs); font-weight: 700; font-variant-numeric: tabular-nums; } .standings__pos--ucl { background: var(--accent-soft); color: var(--accent); } .standings__pos--uel { background: rgba(234, 179, 8, 0.14); color: var(--favorite); } .standings__pos--rel { background: var(--live-bg); color: var(--live); } /* ---- Sidebar mobile overlay -------------------------------------------- */ .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(6, 12, 24, 0.55); backdrop-filter: blur(2px); z-index: 60; } .sidebar-backdrop.is-open { display: block; } /* ---- Logos équipes ------------------------------------------------------- */ .team-logo-img { width: 20px; height: 20px; object-fit: contain; display: inline-block; vertical-align: middle; border-radius: 4px; background: var(--bg-elev-2); flex-shrink: 0; padding: 1px; } .details__team-logo img { width: 44px; height: 44px; object-fit: contain; border-radius: 6px; background: transparent; padding: 3px; } .team-badge-fb { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.02em; flex-shrink: 0; box-shadow: inset 0 -1px 0 rgba(0,0,0,0.12); } /* ---- Live SSE feedback --------------------------------------------------- */ .goal-flash { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); padding: 4px 12px; background: var(--live); color: #fff; font-weight: 800; font-size: 12px; letter-spacing: 0.08em; border-radius: var(--radius-pill); box-shadow: 0 4px 14px rgba(220, 38, 38, 0.42); animation: goal-flash-anim 1.4s ease-out forwards; pointer-events: none; } @keyframes goal-flash-anim { 0% { opacity: 0; transform: translateX(-50%) translateY(6px) scale(0.9); } 15% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } 85% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } 100% { opacity: 0; transform: translateX(-50%) translateY(-4px) scale(1); } } /* ---- Sous-menu du panneau détails --------------------------------------- * Niveau 2 hiérarchique : plus petit, plus léger, active state = même petit * soulignement 2 px centré, cohérent avec les onglets principaux. */ .details__tabs--sub { background: var(--surface-muted); border-bottom: 1px solid var(--border); padding: 2px 8px 0; overflow-x: auto; scrollbar-width: none; gap: 2px; } .details__tabs--sub::-webkit-scrollbar { display: none; } .details__tabs--sub button { flex: 0 0 auto; padding: 8px 10px 10px; font-size: 11.5px; font-weight: 500; letter-spacing: 0; } .details__tabs--sub button:hover { color: var(--text); background: transparent; } .details__tabs--sub button.is-active { color: var(--accent); font-weight: 600; } .details__tabs--sub button.is-active::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 16px; height: 2px; background: var(--accent); border-radius: 2px 2px 0 0; } /* ---- Toolbar actions row ------------------------------------------------- */ .toolbar__actions { display: flex; align-items: center; gap: 12px; justify-content: space-between; } .toolbar__actions .filters { flex: 1 1 auto; min-width: 0; } .toolbar__actions .date-picker { flex: 0 0 auto; } /* ---- Date picker --------------------------------------------------------- */ .date-picker { position: relative; display: inline-flex; align-items: center; gap: 2px; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 2px; font-size: 13px; } .date-picker__arrow { width: 26px; height: 26px; border: 0; background: transparent; color: var(--text-muted); border-radius: 50%; font-size: 15px; display: grid; place-items: center; padding: 0; cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .date-picker__arrow:hover { background: var(--bg-elev); color: var(--accent); } .date-picker__arrow:disabled, .date-picker__arrow[aria-disabled="true"] { color: var(--text-dim); opacity: 0.35; cursor: not-allowed; pointer-events: none; } .date-picker__label { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 0; background: var(--bg-elev); color: var(--text); border-radius: var(--radius-pill); font-weight: 600; font-size: 12.5px; cursor: pointer; min-width: 130px; justify-content: center; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); box-shadow: var(--shadow-xs); } .date-picker__label:hover, .date-picker__label[aria-expanded="true"] { background: var(--accent); color: var(--accent-fg); box-shadow: none; } .date-picker__cal-icon { font-size: 12px; } .date-picker__chev { font-size: 10px; opacity: .7; } .date-picker__pop { display: none; position: absolute; top: calc(100% + 8px); right: 0; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 12px; z-index: 100; width: 320px; max-width: 92vw; } .date-picker__pop.is-open { display: block; } /* ---- Month grid --------------------------------------------------------- */ .cal-grid__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .cal-grid__title { font-weight: 700; font-size: 13px; color: var(--text); text-transform: capitalize; flex: 1; text-align: center; letter-spacing: -0.005em; } .cal-grid__nav { width: 28px; height: 28px; border: 1px solid var(--border); background: var(--bg-elev-2); color: var(--text-muted); border-radius: var(--radius-sm); padding: 0; font-size: 14px; cursor: pointer; display: grid; place-items: center; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .cal-grid__nav:hover { background: var(--accent); color: #fff; border-color: var(--accent); } .cal-grid__weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding-bottom: 4px; border-bottom: 1px solid var(--border); margin-bottom: 4px; } .cal-grid__weekdays span { text-align: center; font-size: 10px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 0; } .cal-grid__body { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .cal-cell { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); font-size: 12.5px; font-weight: 500; color: var(--text); background: transparent; border: 1px solid transparent; cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); font-variant-numeric: tabular-nums; } .cal-cell:hover { background: var(--bg-elev-2); border-color: var(--border-strong); } .cal-cell.is-other { color: var(--text-dim); font-weight: 400; } .cal-cell.is-today { color: var(--accent); font-weight: 700; } .cal-cell.is-current { background: var(--accent); color: #fff; border-color: var(--accent); } .cal-cell.is-current.is-today { box-shadow: inset 0 0 0 2px #fff; } /* Hors fenêtre J-30 / J+30 : non-cliquable, opacité réduite. */ .cal-cell.is-disabled { color: var(--text-dim); opacity: 0.28; cursor: not-allowed; pointer-events: none; } .cal-cell.is-disabled:hover { background: transparent; border-color: transparent; } .cal-grid__foot { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); text-align: center; } .cal-grid__today-link { color: var(--accent); font-weight: 600; font-size: 12.5px; cursor: pointer; padding: 4px 12px; border-radius: var(--radius-pill); display: inline-block; transition: background var(--dur-fast) var(--ease); } .cal-grid__today-link:hover { background: var(--accent-soft); } /* ---- Responsive --------------------------------------------------------- */ @media (max-width: 1200px) { :root { --details-w: 340px; --sidebar-w: 232px; } } @media (max-width: 1100px) { :root { --details-w: 320px; } .header__search { width: 180px; } } @media (max-width: 960px) { .layout, .layout.is-details-collapsed { grid-template-columns: 1fr; padding: 12px; gap: 12px; } .sidebar { position: fixed; top: var(--header-h); left: 0; bottom: 0; width: 280px; z-index: 70; border-radius: 0; border-left: 0; border-top: 0; border-bottom: 0; transform: translateX(-100%); transition: transform var(--dur-slow) var(--ease); max-height: none; box-shadow: var(--shadow-lg); } .sidebar.is-open { transform: translateX(0); } .details { position: fixed; top: var(--header-h); right: 0; bottom: 0; width: min(420px, 100%); z-index: 70; border-radius: 0; transform: translateX(100%); transition: transform var(--dur-slow) var(--ease); max-height: none; box-shadow: var(--shadow-lg); } .details.is-open { transform: translateX(0); } .details__close { display: grid; place-items: center; } .header__menu-btn { display: grid; place-items: center; } .header__search { display: none; } .header__nav button.is-active::after { bottom: -10px; } } @media (max-width: 600px) { .header { padding: 0 12px; gap: 10px; } .header__logo-text { font-size: 15px; } .header__logo-mark { width: 24px; height: 24px; } .header__nav { gap: 0; } .header__nav button { padding: 6px 8px; font-size: 12px; } .layout { padding: 10px; gap: 10px; } .match { grid-template-columns: 54px 20px 1fr 62px 1fr 18px; gap: 6px; padding: 9px 10px; } .match__score { font-size: 14px; } .match__team { font-size: 12.5px; } .match__fav { opacity: 1; } .match__more { opacity: 0.5; } .competition__header { padding: 8px 10px; font-size: 12px; } .competition__flag img { width: 18px; height: 18px; } .competition__name { font-size: 13px; } .competition__country { font-size: 10px; } .toolbar__actions { flex-wrap: wrap; gap: 8px; } .toolbar__actions .filters { flex: 1 1 100%; } .toolbar__actions .date-picker { flex: 1 1 100%; justify-content: space-between; } .date-picker__label { min-width: 100px; } .date-picker__pop { width: 300px; padding: 10px; } } /* ---- prefers-reduced-motion --------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .live-dot, .header__logo-dot { animation: none; } }