/* ============================================================ UEFA CHAMPIONS LEAGUE — Thème CLAIR (fond blanc) · TOUTES PAGES ------------------------------------------------------------ Surcouche chargée APRÈS style.css. Ne modifie aucun contenu. Bascule l'interface : fond BLANC, texte foncé, accents bleus. Mécanique (le site est en texte blanc/fond noir codés en dur) : 1. Palette claire via :root + remap des tokens de style.css → toutes les pages "à classes" passent en clair d'un coup. 2. Overrides `!important` + sélecteurs d'attribut [style*=…] → repeint les style="" inline (home, header, footer…), y compris l'INVERSION du texte blanc → foncé. 3. Exceptions : on RE-force le blanc là où il doit rester (nav bleue, boutons accent, titres sur image, bannières). ============================================================ */ /* ───────────────────────────────────────────── 1. PALETTE CLAIRE — Design System UEFA (light) ───────────────────────────────────────────── */ :root { /* ── Variables principales ── */ --bg-main: #ffffff; /* Fond principal BLANC */ --bg-soft: #f3f5fc; /* Sections / fonds doux */ --bg-card: #ffffff; /* Cartes blanches (avec bordure) */ --text-main: #0b0e2a; /* Bleu-noir — titres / texte fort */ --text-muted: #5b6079; /* Gris-bleu — dates / descriptions */ --accent: #0033ff; /* Bleu électrique UEFA — liens/btns */ --accent-deep: #0022c4; /* Survol / liens appuyés */ --accent-bright: #0033ff; /* (alias en clair = accent) */ --border-subtle: rgba(10,14,42,.12); /* Filets discrets sur blanc */ /* ── Remap des tokens existants de style.css ── */ --bg: var(--bg-main); --s1: var(--bg-soft); --s2: #e9ecf8; --s3: #e2e6f5; --white: var(--text-main); /* "blanc" (titres) → foncé sur blanc */ --text: #23273f; --dim: var(--text-muted); --faint: #8a8fa8; --red: var(--accent); --red-h: var(--accent-deep); --red-d: var(--accent-deep); --line: var(--border-subtle); --line2: rgba(10,14,42,.18); /* alias legacy */ --orange: var(--accent); --orange-l: var(--accent-deep); --orange-d: var(--accent-deep); --surface: var(--bg-soft); --surface2: #e9ecf8; --surface3: #e2e6f5; --border: var(--border-subtle); --border2: rgba(10,14,42,.18); /* nav de marque (bleu UEFA) */ --nav-bg: #0a0e9c; --r: 12px; } /* ───────────────────────────────────────────── 2. BASE GLOBALE — fond blanc, texte foncé, police clean ───────────────────────────────────────────── */ html, body { background: var(--bg-main) !important; color: var(--text-main); } body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important; -webkit-font-smoothing: antialiased; } /* police géométrique propre partout (fini le poster-font) */ .uefa-theme { --f-display: 'Inter', system-ui, sans-serif; --f-head: 'Inter', system-ui, sans-serif; } /* Le a un background inline noir : on force le blanc. */ body.uefa-theme { background: var(--bg-main) !important; color: var(--text-main) !important; } /* ───────────────────────────────────────────── 3. FONDS INLINE FONCÉS → BLANC / CLAIR ───────────────────────────────────────────── */ [style*="background:#060606"], [style*="background: #060606"], [style*="background:#050505"], [style*="background: #050505"], [style*="background:#080808"], [style*="background:#0a0a0a"], [style*="background:#000000"], [style*="background:#000;"] { background-color: var(--bg-main) !important; } [style*="background:#0d0d0d"], [style*="background: #0d0d0d"], [style*="background:#111"], [style*="background: #111"], [style*="background:#141414"], [style*="background:#1a1a1a"], [style*="background:#181818"], [style*="background:#030303"] { background-color: var(--bg-soft) !important; } /* Séparateurs / fonds translucides blancs → filet discret foncé */ [style*="background:rgba(255,255,255"] { background-color: var(--border-subtle) !important; } [style*="solid rgba(255,255,255"] { border-color: var(--border-subtle) !important; } /* ───────────────────────────────────────────── 4. INVERSION DU TEXTE : blanc → foncé (exceptions re-forcées en section 6) ───────────────────────────────────────────── */ [style*="color:#fff"], [style*="color: #fff"], [style*="color:#ffffff"], [style*="color:#FFFFFF"], [style*="color:white"] { color: var(--text-main) !important; } [style*="color:rgba(255,255,255"], [style*="color: rgba(255,255,255"] { color: var(--text-muted) !important; } /* Filigranes très transparents : rester quasi-invisibles sur blanc */ [style*="rgba(255,255,255,.02"], [style*="rgba(255,255,255,.03"], [style*="rgba(255,255,255,.04"] { color: rgba(10,14,42,.05) !important; } /* ───────────────────────────────────────────── 5. ACCENTS ROUGES → BLEU ───────────────────────────────────────────── */ [style*="color:#CC0000"], [style*="color: #CC0000"], [style*="color:#cc0000"], [style*="color:#E61919"], [style*="color:#e61919"] { color: var(--accent) !important; } [style*="background:#CC0000"], [style*="background: #CC0000"], [style*="background:#cc0000"] { background-color: var(--accent) !important; } [style*="background:#E61919"], [style*="background:#e61919"] { background-color: var(--accent-deep) !important; } [style*="2px solid #CC0000"], [style*="solid #CC0000"] { border-color: var(--accent) !important; } /* ───────────────────────────────────────────── 6. EXCEPTIONS — garder le texte BLANC où il le faut (placées APRÈS l'inversion ; id/contexte = priorité) ───────────────────────────────────────────── */ /* 6a. Barre de nav (bleue de marque) */ .nav-bar { background: var(--nav-bg) !important; border-bottom: 2px solid var(--accent) !important; } .nav-link { color: rgba(255,255,255,.85) !important; } .nav-link:hover, .nav-link.active { color: #fff !important; } .nav-link.active { border-bottom-color: #fff !important; } .nav-logo-text, .nav-logo-text span { color: #fff !important; } .nav-sub { color: rgba(255,255,255,.55) !important; } .nav-btn { color: rgba(255,255,255,.8) !important; } .nav-mobile { background: #0b0f86 !important; } .nav-mobile a { color: rgba(255,255,255,.85) !important; } /* 6b. Boutons à fond accent : texte blanc */ .uefa-btn, .slide-btn, .badge-live, .filter-btn.active, .page-btn.active, .group-nav-btn.active, .group-nav-btn:hover, .filter-btn:hover, .page-btn:hover, .vote-btn.selected, .tag-host, .tag-captain { color: #fff !important; } /* 6c. Hero plein (titre blanc sur image) */ .uefa-theme .ucl-hero .feat-h { color: #fff !important; } .uefa-theme .ucl-hero .h-kicker { color: #cdd6ff !important; } .uefa-theme .ucl-hero p { color: rgba(255,255,255,.88) !important; } .uefa-theme .ucl-hero .h-byline { color: rgba(255,255,255,.78) !important; } /* 6d. Bannières promo (fond coloré → texte blanc conservé) */ #free-live-banner [style*="color"], #wc-promo-banner [style*="color"] { color: #fff !important; } #free-live-banner { background: linear-gradient(90deg,#001b8f 0%,#0033ff 40%,#0a1fb0 70%,#001b8f 100%) !important; } #wc-promo-banner { border-bottom: 2px solid var(--accent) !important; } /* 6e. Hero-slider (image sombre) reste en texte clair */ .hero-slider .slide-title, .hero-slider .slide-content * { color: #fff !important; } .hero-slider .slide-label { color: #9db1ff !important; } /* ───────────────────────────────────────────── 7. FLIPS Tailwind du layout (préfixe body.uefa-theme pour battre les règles !important de layout.php) ───────────────────────────────────────────── */ body.uefa-theme .bg-white, body.uefa-theme .bg-gray-50, body.uefa-theme .bg-gray-100, body.uefa-theme .bg-gray-200 { background-color: var(--bg-soft) !important; } body.uefa-theme .bg-gray-800, body.uefa-theme .bg-gray-900 { background-color: var(--bg-main) !important; } body.uefa-theme .text-gray-900 { color: var(--text-main) !important; } body.uefa-theme .text-gray-800, body.uefa-theme .text-gray-700 { color: #23273f !important; } body.uefa-theme .text-gray-600, body.uefa-theme .text-gray-500, body.uefa-theme .text-gray-400 { color: var(--text-muted) !important; } body.uefa-theme [class*="bg-gray-"] { color: var(--text-main) !important; } body.uefa-theme .border-gray-100, body.uefa-theme .border-gray-200, body.uefa-theme .border-gray-300, body.uefa-theme .border-gray-800 { border-color: var(--border-subtle) !important; } /* ───────────────────────────────────────────── 8. CARTES — blanches, arrondies, bordure douce ───────────────────────────────────────────── */ .match-card, .article-card, .group-card, .group-team-card, .card, .widget, .team-chip, .team-card-full, .player-card, .prediction-card, .hmc, [style*="background:#0d0d0d"], [style*="background: #0d0d0d"] { background: var(--bg-card) !important; border: 1px solid var(--border-subtle) !important; border-radius: 12px !important; overflow: hidden !important; box-shadow: 0 1px 3px rgba(10,14,42,.06) !important; transition: box-shadow .2s ease, transform .2s ease, background-color .2s ease !important; } .match-card:hover, .article-card:hover, .group-card:hover, .group-team-card:hover, .team-chip:hover, .team-card-full:hover, .player-card:hover, .hmc:hover { background: var(--bg-card) !important; box-shadow: 0 8px 24px rgba(10,14,42,.12) !important; transform: translateY(-2px); } /* filets/accents décoratifs des cartes → bleu */ .match-card::before, .article-card::after, .group-card::before, .group-team-card::before, .hmc::before { background: var(--accent) !important; } .card, .prediction-card, .pos-heading, .group-heading, .article-content h2, .widget { border-color: var(--border-subtle) !important; } .card, .prediction-card { border-left: 3px solid var(--accent) !important; } .pos-heading, .group-heading, .article-content h2 { border-left-color: var(--accent) !important; } .widget { border-top: 2px solid var(--accent) !important; } /* ───────────────────────────────────────────── 9. LISTES "HEADLINES" — séparateurs fins ───────────────────────────────────────────── */ .widget-article { display: flex !important; gap: 16px !important; align-items: center !important; border-bottom: 1px solid var(--border-subtle) !important; padding-bottom: 12px !important; } .widget-article:last-child { border-bottom: none !important; } .widget-article span { color: var(--text-main) !important; } .widget-article:hover span { color: var(--accent) !important; } /* ───────────────────────────────────────────── 10. BOUTONS & INTERACTIONS (radius 20px) ───────────────────────────────────────────── */ .uefa-btn, .slide-btn, .filter-btn.active, .page-btn.active, .group-nav-btn.active, .group-nav-btn:hover, .filter-btn:hover, .page-btn:hover { background: var(--accent) !important; color: #fff !important; border-radius: 20px !important; border: 1px solid transparent !important; } .uefa-btn:hover, .slide-btn:hover { background: var(--accent-deep) !important; } /* Bouton fantôme : contour bleu, texte bleu, fond blanc */ .uefa-btn-ghost { background: #fff !important; color: var(--accent) !important; border: 1.5px solid var(--accent) !important; border-radius: 20px !important; transition: background-color .2s ease, color .2s ease !important; } .uefa-btn-ghost:hover { background: var(--accent) !important; color: #fff !important; } .btn, .filter-btn, .vote-btn, .page-btn { border-radius: 20px !important; } .vote-btn { border-color: var(--border-subtle) !important; color: var(--text-main) !important; background: var(--bg-soft) !important; } .vote-btn:hover { border-color: var(--accent) !important; color: var(--accent) !important; } /* "Voir tout" → pastilles fantômes arrondies */ .uefa-theme .h-see-all, .see-all { display: inline-block; border: 1px solid var(--border-subtle) !important; border-radius: 20px !important; padding: 7px 16px !important; color: var(--accent) !important; text-transform: none !important; font-family: 'Inter', system-ui, sans-serif !important; font-weight: 600 !important; letter-spacing: .01em !important; transition: background-color .2s, border-color .2s !important; } .uefa-theme .h-see-all:hover, .see-all:hover { background: var(--bg-soft) !important; border-color: var(--accent) !important; } /* ───────────────────────────────────────────── 11. TYPOGRAPHIE — titres clean, sentence case ───────────────────────────────────────────── */ .uefa-theme .h-sec-title, .section-header h2, .page-title { font-family: 'Inter', system-ui, sans-serif !important; text-transform: none !important; letter-spacing: -.02em !important; font-weight: 800 !important; color: var(--text-main) !important; } .uefa-theme .h-sec-title { font-size: clamp(1.4rem,3vw,2.05rem) !important; line-height: 1.06 !important; } .uefa-theme .ucl-h1 { font-family: 'Inter', system-ui, sans-serif !important; text-transform: none !important; letter-spacing: -.035em !important; font-weight: 800 !important; font-size: clamp(2.4rem,6vw,4.6rem) !important; line-height: 1.02 !important; color: var(--text-main) !important; } .uefa-theme .h-story-title { font-family: 'Inter', system-ui, sans-serif !important; text-transform: none !important; letter-spacing: -.02em !important; font-weight: 700 !important; line-height: 1.15 !important; color: var(--text-main) !important; } .uefa-theme .h-story-title:hover, .uefa-theme a:hover .h-story-title { color: var(--accent) !important; } .uefa-theme .h-kicker, .section-label, .article-category, .source, .match-stage { font-family: 'Inter', system-ui, sans-serif !important; color: var(--accent) !important; font-weight: 700 !important; letter-spacing: .12em !important; } .uefa-theme .h-byline { color: var(--text-muted) !important; } /* ───────────────────────────────────────────── 12. HOME — Article vedette = HERO PLEIN (image + voile + titre blanc) ───────────────────────────────────────────── */ .uefa-theme .ucl-hero { position: relative !important; display: flex !important; flex-direction: column !important; justify-content: flex-end !important; aspect-ratio: 16 / 9 !important; border-radius: 14px !important; overflow: hidden !important; padding: clamp(20px,3vw,34px) !important; border: none !important; } .uefa-theme .ucl-hero .uefa-media { position: absolute !important; inset: 0 !important; margin: 0 !important; aspect-ratio: auto !important; border-radius: 0 !important; } .uefa-theme .ucl-hero .uefa-media img { width: 100% !important; height: 100% !important; object-fit: cover !important; filter: none !important; } .uefa-theme .ucl-hero .uefa-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,8,40,.92) 0%, rgba(0,8,40,.35) 45%, transparent 72%) !important; } .uefa-theme .ucl-hero > *:not(.uefa-media) { position: relative !important; z-index: 2 !important; } .uefa-theme .ucl-hero .feat-h { font-size: clamp(1.5rem,3.2vw,2.6rem) !important; margin-bottom: 8px !important; text-shadow: 0 2px 18px rgba(0,0,0,.5); } /* ── Cartes news secondaires (blanches, image en haut) ── */ .uefa-theme .ucl-card { background: #fff !important; border: 1px solid var(--border-subtle) !important; border-radius: 12px !important; overflow: hidden !important; box-shadow: 0 1px 3px rgba(10,14,42,.06) !important; transition: box-shadow .2s ease, transform .2s ease !important; } .uefa-theme .ucl-card:hover { box-shadow: 0 8px 24px rgba(10,14,42,.12) !important; transform: translateY(-2px); } .uefa-theme .ucl-card > a { display: block !important; } .uefa-theme .ucl-card .ucl-card-img { height: 150px !important; margin: 0 0 12px 0 !important; border-radius: 0 !important; } .uefa-theme .ucl-card .ucl-card-img img { filter: none !important; } .uefa-theme .ucl-card .h-kicker { padding: 0 14px !important; color: var(--accent) !important; } .uefa-theme .ucl-card .art-h { padding: 0 14px !important; color: var(--text-main) !important; } .uefa-theme .ucl-card .h-byline { padding: 6px 14px 16px !important; display: block !important; color: var(--text-muted) !important; } /* Hero d'accueil (texte + stats) : nombres bleus, séparateurs visibles */ .uefa-theme .hero-stats [style*="color:#CC0000"] { color: var(--accent) !important; } .uefa-theme .pred-cta { border-radius: 20px !important; } .uefa-theme .home-sidebar h3 { font-family:'Inter',system-ui,sans-serif !important; text-transform:none !important; letter-spacing:-.01em !important; font-weight:800 !important; border-left-color: var(--accent) !important; color: var(--text-main) !important; } /* ───────────────────────────────────────────── 13. SHELL : Footer clair + tables/barres ───────────────────────────────────────────── */ footer { background: var(--bg-soft) !important; border-top: 2px solid var(--accent) !important; } .site-footer { background: var(--bg-soft) !important; } .footer-grid a:hover, .sidebar-links a, .breadcrumb a, .back-link a { color: var(--accent) !important; } .standings-table th, .fixtures-table th { background: var(--bg-soft) !important; border-bottom-color: var(--accent) !important; color: var(--text-muted) !important; } .standings-table td, .fixtures-table td { border-bottom-color: var(--border-subtle) !important; color: var(--text) !important; } .standings-table tr:hover td, .fixtures-table tr:hover td { background: rgba(0,51,255,.04) !important; } .score-inline, .shirt, .match-score-block .live-score { color: var(--accent) !important; } .prob-bar div, .vote-bar div { background: var(--accent) !important; } .prob-bar.draw div, .vote-bar.draw div { background: rgba(10,14,42,.22) !important; } .prob-bar, .vote-bar, .prob-bar.draw, .vote-bar.draw { background: rgba(10,14,42,.08) !important; } /* Liens génériques (texte brut) en bleu */ .uefa-theme a:not([class]) { color: var(--accent); } /* ████████████████████████████████████████████████████████████ 14. FINITION "TOUTES PAGES" — typo UEFA partout + couleurs inline manquantes + header soigné (news, fixtures, match, teams, player, article). ████████████████████████████████████████████████████████████ */ /* ── 14.1 POLICE UEFA PARTOUT ── Beaucoup de titres fixent la police EN INLINE (Anton / Barlow Condensed / Georgia) et échappent donc à --f-display. On les force tous sur Inter (look clean UEFA). */ .uefa-theme [style*="font-family:'Anton'"], .uefa-theme [style*="font-family: 'Anton'"], .uefa-theme [style*="font-family:'Barlow Condensed'"], .uefa-theme [style*="font-family: 'Barlow Condensed'"], .uefa-theme [style*="font-family:Georgia"], .uefa-theme [style*="font-family: Georgia"] { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important; letter-spacing: -.01em !important; } /* Les gros titres (ex-Anton) : casse normale, poids fort */ .uefa-theme [style*="font-family:'Anton'"], .uefa-theme [style*="font-family: 'Anton'"] { text-transform: none !important; font-weight: 800 !important; letter-spacing: -.025em !important; } /* ── 14.2 COULEURS INLINE MANQUANTES ── */ /* Fonds sombres résiduels → clair */ [style*="background:#0f0f0f"], [style*="background: #0f0f0f"], [style*="background:#121212"], [style*="background:#161616"] { background-color: var(--bg-soft) !important; } /* Rouges Tailwind (dc2626 / ef4444) → bleu accent */ [style*="color:#dc2626"], [style*="color:#DC2626"], [style*="color:#ef4444"], [style*="color:#EF4444"] { color: var(--accent) !important; } [style*="background:#dc2626"], [style*="background:#ef4444"] { background-color: var(--accent) !important; } /* Teintes rouges translucides rgba(204,0,0,…) → teintes bleues */ [style*="background:rgba(204,0,0"] { background-color: rgba(0,51,255,.10) !important; } [style*="solid rgba(204,0,0"] { border-color: rgba(0,51,255,.35) !important; } [style*="color:rgba(204,0,0"] { color: var(--accent) !important; } /* Teintes rouges fixes claires (rgba red) en bordure/bg de badges */ [style*="border:1px solid rgba(204,0,0"] { border-color: rgba(0,51,255,.35) !important; } /* ── 14.3 HEADER UEFA soigné (barre bleue de marque) ── */ #site-header .nav-bar, .nav-bar { background: linear-gradient(180deg, #0c11b4 0%, var(--nav-bg) 100%) !important; border-bottom: 2px solid var(--accent) !important; box-shadow: 0 2px 16px rgba(10,14,42,.20) !important; } .nav-link { font-family: 'Inter', system-ui, sans-serif !important; text-transform: none !important; letter-spacing: .005em !important; font-weight: 600 !important; font-size: .92rem !important; } .nav-logo-text { font-family: 'Inter', system-ui, sans-serif !important; letter-spacing: -.01em !important; } .nav-search { background: #0b0f86 !important; border-bottom-color: var(--accent) !important; } .nav-search input { background: rgba(255,255,255,.12) !important; color: #fff !important; border-color: rgba(255,255,255,.25) !important; } .nav-search input::placeholder { color: rgba(255,255,255,.6) !important; } /* ── 14.4 Réglages par page ──────────────────────────────── */ /* Hero match / team : panneau clair, accents bleus, ombre douce */ .match-hero, .team-hero { background: var(--bg-soft) !important; border-bottom: 1px solid var(--border-subtle) !important; box-shadow: inset 0 -1px 0 var(--border-subtle) !important; } .match-hero::before, .team-hero::before { background: radial-gradient(ellipse at 50% 120%, rgba(0,51,255,.06), transparent 60%) !important; } .final-score, .kickoff-time, .match-team h2, .team-hero-info h1 { color: var(--text-main) !important; } .final-score .divider { color: rgba(10,14,42,.25) !important; } .live-score, .countdown, .match-stage-label, .team-conf { color: var(--accent) !important; } /* Fixtures / standings : en-têtes clairs */ .fixtures-table th, .standings-table th { background: var(--bg-soft) !important; color: var(--text-muted) !important; } .fixtures-table tr:hover td, .standings-table tr:hover td { background: rgba(0,51,255,.04) !important; } /* Teams : cartes équipe propres */ .team-card-full, .group-team-card, .team-chip { background: #fff !important; } .team-card-full:hover, .group-team-card:hover, .team-chip:hover { background: var(--bg-soft) !important; } .conf-badge, .tag { background: var(--bg-soft) !important; color: var(--text-muted) !important; } /* News / Article : corps lisible sur blanc */ .article-content, .article-content p, .article-lead { color: var(--text) !important; } .article-content h2, .article-content h3 { color: var(--text-main) !important; } .article-meta, .article-footer { color: var(--text-muted) !important; } .article-card { background: #fff !important; } /* Player : entête + stats clairs */ .player-details h1 { color: var(--text-main) !important; } .player-team-link, .player-stats-grid .stat span, .shirt { color: var(--accent) !important; } .player-stats-grid .stat { background: var(--bg-soft) !important; } .player-card { background: #fff !important; } /* ████████████████████████████████████████████████████████████ 15. CORRECTIF GLOBAL — TITRES VISIBLES + TYPO HOME PARTOUT Beaucoup de pages posent leurs titres en CLASSE dans un