/* ============================================================================ HOTFIX competition-home-fixes ③ — CARTE D'AFFICHE AU GABARIT MAQUETTE. POURQUOI UN FICHIER SÉPARÉ. `footlab.css` est le MIROIR du projet Claude Design déployé comme asset : il doit rester au bit près identique à la maquette, et toute extension se met dans une feuille chargée APRÈS (modèle `plan-rail.css`). Ce fichier n'ajoute donc AUCUNE règle `.fx-*` de base — celles-ci vivent déjà dans `footlab.css`, section « FIXTURES TICKER », et n'attendaient que leur markup. Il ne fait que RÉCONCILIER ce gabarit avec trois choses que la maquette ne connaît pas : 1. les états de match (live / terminé / en attente / reporté), écrits par le JS du ruban sous les noms `ribbon__item--*` ; 2. les liens serveur vers les fiches équipe, absents de la maquette et indispensables à l'indexation ; 3. le pied de carte, qui porte en plus de la date le score et la minute en direct. POURQUOI LES CLASSES D'ÉTAT GARDENT LEUR NOM LEGACY. Le script live (`partials/home/sections/legacy-scripts`) ajoute `ribbon__item--live` et retire `ribbon__item--finished`/`--pending` à la volée, et ce même script sert le ruban de la Coupe du Monde, qui a sa PROPRE copie du markup. Les renommer ici aurait cassé cette surface-là. Le nom est legacy, la présentation ne l'est plus. Chargé après footlab.css / home-domestic.css / home-landing.css. ========================================================================== */ /* ── La carte dans le ruban ───────────────────────────────────────────────── */ /* `.fx-card` de la maquette ne pose ni fond ni couleur de texte : `.glass` s'en charge. On ne redéfinit que ce que le contexte « ruban » impose. */ .ribbon__track .fx-card { color: var(--text); text-decoration: none; } .ribbon__track .fx-card[data-match-url] { cursor: pointer; } .ribbon__track .fx-card[data-match-url]:focus-visible { outline: 2px solid rgba(var(--accent-rgb), 0.5); outline-offset: 2px; } /* Les états. `.ribbon__item--live::after` (la pastille pulsée) et les bordures existent déjà dans home-domestic.css / home-wc.css sur le sélecteur de classe seul : ils s'appliquent tels quels à `.fx-card`. Seul l'état « reporté », qui n'avait pas de règle propre, est posé ici. */ .fx-card.ribbon__item--postponed { border-style: dashed; opacity: 0.82; } /* ── Équipes : les liens ne doivent pas se voir comme des liens ───────────── */ .fx-team a { color: inherit; text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fx-team a:hover { color: var(--primary); } .fx-team a:focus-visible { outline: 2px solid rgba(var(--accent-rgb), 0.5); outline-offset: 2px; border-radius: 4px; } /* L'écusson est lui-même un lien : `a.flag` doit garder la boîte de `.flag` (grid centré, 26px) que footlab.css pose sur la classe. */ a.flag { text-decoration: none; } a.flag:hover { border-color: color-mix(in oklab, var(--primary) 45%, transparent); } /* Repli monogramme : `.flag-tbd` de la maquette sert un code pays de 3 lettres. Ici c'est un monogramme de club sur 2 lettres — même boîte, même ton. */ .flag.flag-tbd { font-weight: 600; } /* ── Cotes ────────────────────────────────────────────────────────────────── */ /* Issue gagnante, une fois le match joué ou en direct. Reprend le traitement que home-domestic.css appliquait à `.ribbon__odd.is-winner`. */ .fx-card.ribbon__item--finished .odd.is-winner { border-color: rgba(var(--accent-2-rgb), 0.6); background: rgba(var(--accent-2-rgb), 0.18); } .fx-card.ribbon__item--finished .odd.is-winner .odd-val { font-weight: 800; } .fx-card.ribbon__item--live .odd.is-winner { border-color: rgba(var(--accent-rgb), 0.6); background: rgba(var(--accent-rgb), 0.18); } .fx-card.ribbon__item--live .odd.is-winner .odd-val { font-weight: 800; } /* Pas de cotes à afficher — match reporté, ou marché pas encore ouvert (J-3 et au-delà). La grille à trois colonnes laisserait deux trous : on la remplace par une cellule pleine largeur qui DIT pourquoi. */ .fx-odds--empty { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 10px; border-radius: 8px; background: color-mix(in oklab, var(--muted) 40%, transparent); border: 1px dashed var(--border); text-align: center; } /* ── Pied de carte ────────────────────────────────────────────────────────── */ /* ⚠️ COLLISION DE SÉLECTEUR D'ÉLÉMENT — mesurée en production le 2026-08-08. `.fx-foot` est un `