/* ============================================================ SOCLE — l'identité de tout le site. Toutes les pages chargent ce fichier. Il ne décrit aucune page en particulier : il pose les règles que les autres suivent. Avant, chaque page inventait ses espacements et ses tailles au fur et à mesure. On avait vingt-trois valeurs de marge pour quatre besoins réels. C'est ce désordre qui donnait au site son air « pas fini », bien plus que le choix des couleurs. Ici, tout vient d'une échelle. Si une valeur n'est pas dans l'échelle, c'est qu'elle n'a pas de raison d'exister. ============================================================ */ /* ============================================================ 1. LES POLICES Une seule idée les relie : les trois familles possèdent un AXE DE LARGEUR. On peut les resserrer sans les déformer. Le site s'en sert comme d'un signal : - resserré → les grands titres et les noms de clubs - normal → tout le texte qu'on lit vraiment C'est l'économie du titre de presse sportive : un nom de club doit tenir sur une ligne, alors on le serre. Ça vient de la « une » de L'Équipe, pas d'un catalogue de tendances. BRICOLAGE GROTESQUE — titres, noms de clubs. INSTRUMENT SANS — texte courant et interface. CHIVO MONO — tous les chiffres, tous de même largeur. POURQUOI CHIVO MONO ET PLUS JETBRAINS MONO. Les deux ont la même qualité décisive — une chasse fixe, donc des colonnes de chiffres qui tombent pile l'une sous l'autre. Mais JetBrains Mono a été dessinée pour un éditeur de code : ses formes disent « logiciel ». Chivo Mono vient de la signalétique, elle est plus ronde et plus chaude, et un score de football n'a pas à ressembler à une ligne de terminal. Fichiers hébergés dans assets/fonts/, pas appelés chez Google : la raison est juridique autant que technique, elle est écrite dans assets/fonts/LICENCES.txt. ============================================================ */ @font-face { font-family: "Bricolage"; font-style: normal; font-weight: 300 800; font-stretch: 75% 100%; font-display: swap; src: url("../fonts/bricolage-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Bricolage"; font-style: normal; font-weight: 300 800; font-stretch: 75% 100%; font-display: swap; src: url("../fonts/bricolage-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Instrument"; font-style: normal; font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; src: url("../fonts/instrument-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Instrument"; font-style: normal; font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; src: url("../fonts/instrument-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Chivo Mono"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/chivomono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Chivo Mono"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/chivomono-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ============================================================ 2. LES JETONS ============================================================ */ :root { /* ---- couleurs : NOCTURNE ---- Le bleu-noir d'un stade le soir, l'ambre des projecteurs. C'est la direction choisie : le site est sombre par défaut, le clair reste disponible par le bouton de la barre du haut. */ color-scheme: dark; --ground: #0E1216; --surface: #151B21; --surface-alt: #1B232B; --ink: #EDF1F5; --ink-soft: #93A1AE; --ink-faint: #7F8D9A; --line: #232C35; --line-soft: #1A222A; --a: #F2A73B; --a-soft: #2B2013; --b: #6FB0E8; --b-soft: #142330; --n: #8A97A4; --n-soft: #1A2128; --warn: #E4694E; --warn-soft: #2C1A16; --live: #F2564A; --live-soft: #2E1714; --win: #4FBF8B; --draw: #8B98A5; --loss: #E4694E; --on-fill: #12161A; --on-accent: #12161A; --shadow: 0 12px 34px rgba(0, 0, 0, 0.55); /* ---- LA COULEUR DES COMPÉTITIONS ---- POURQUOI NEUF COULEURS DE PLUS, SUR UN SITE QUI EN COMPTAIT TROIS. La liste des matchs mélange neuf championnats dans une seule colonne : un samedi, c'est quatre-vingt-dix lignes de Ligue 1, de Premier League, de Serie A et de Brasileirão à la suite. Le nom du championnat y était écrit en gris, à la même taille et dans le même ton que tout le reste — donc on ne le lisait pas, on le déchiffrait ligne par ligne. Une couleur par compétition rend cette colonne scannable d'un coup d'œil : c'est de l'information, pas de la décoration, et c'est ce que fait tout tableau de résultats sérieux. ELLES NE MARCHENT PAS SUR LES TROIS AUTRES. L'ambre veut dire « équipe qui reçoit », le bleu « équipe qui se déplace », le rouge « ça se joue maintenant ». Ces trois-là gardent leur sens partout. Les couleurs ci-dessous ne servent QU'À la pastille d'un championnat, jamais à une équipe ni à un état — un rôle, un endroit. LE CHOIX DES TEINTES part de l'identité de chaque compétition quand elle en a une forte — le violet de la Premier League, l'orange néerlandais, le jaune-vert brésilien — puis les répartit tout autour du cercle chromatique. Le Championship est volontairement le plus terne des neuf : c'est une deuxième division, et la hiérarchie doit se voir sans être écrite. LA CLARTÉ VARIE D'UNE VOISINE À L'AUTRE, ET CE N'EST PAS DÉCORATIF. Neuf couleurs vives posées à la même clarté se ressemblent deux à deux : le corail de la Liga et l'orange de l'Eredivisie étaient indiscernables, le vert de la Serie A et le turquoise du Portugal aussi. En alternant clair et sombre entre teintes voisines, l'écart perceptuel minimal du jeu passe de 38 à 140 — mesuré, pas estimé. Les valeurs ci-dessous sortent de ce calcul ; les retoucher à l'œil recréerait les paires confuses. */ --lg-l1: #6F86F6; --lg-l1-soft: #0F1429; --lg-pl: #D384F5; --lg-pl-soft: #210F29; --lg-lig: #FCA092; --lg-lig-soft: #29130F; --lg-sa: #54D490; --lg-sa-soft: #0F291B; --lg-bl: #F65AA8; --lg-bl-soft: #290F1C; --lg-ere: #FA9E2E; --lg-ere-soft: #291D0F; --lg-por: #6ADAE7; --lg-por-soft: #0F2629; --lg-chp: #A5AFC0; --lg-chp-soft: #171B21; --lg-bra: #E4EEA0; --lg-bra-soft: #25290F; /* ---- LE PROJECTEUR ---- Nocturne disait « ambre des projecteurs » et n'en montrait aucun : l'ambre servait à écrire des chiffres, jamais à éclairer. Ces cinq jetons corrigent ça. Ils décrivent UNE lampe, posée au-dessus du haut de la page, et tout le site s'éclaire à partir d'elle. --ciel-haut le sol juste sous la lampe, un ton plus clair --ciel-bas le fond des tribunes, où la lumière n'arrive plus --halo la nappe ambre de la lampe elle-même --lustre ce que la lampe dépose sur l'arête haute d'une carte --grain le voile qui empêche le dégradé de faire des bandes LE GRAIN N'EST PAS UNE COQUETTERIE. Un écran ordinaire ne sait afficher que 256 nuances par couleur. Un dégradé sombre étalé sur mille pixels doit donc franchir des marches, et l'œil voit des bandes horizontales — le défaut classique des fonds sombres. Un bruit très faible par-dessus casse les marches et le dégradé redevient lisse. Il est dessiné dans la page, ne coûte aucun fichier à charger, et pèse trois cents octets. */ --ciel-haut: #131A22; --ciel-bas: #090C0F; --halo: rgba(242, 167, 59, 0.06); --lustre: rgba(255, 255, 255, 0.035); --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.04'/%3E%3C/svg%3E"); /* L'ambre reçoit la lumière par le haut comme tout le reste : un bouton est une pastille éclairée, pas un aplat. Deux tons de la MÊME famille, jamais deux couleurs différentes — un dégradé qui change de teinte ressemble à une décoration, un dégradé qui change de clarté ressemble à un objet. */ --a-haut: #F8B655; --a-bas: #E5972A; /* ---- LE FEU : la lumière que le bouton principal DÉPOSE ---- Nocturne promet « l'ambre des projecteurs » depuis le premier jour, et jusqu'ici l'ambre n'avait jamais servi qu'à ÉCRIRE — un chiffre, un filet, un mot. Nulle part il n'ÉCLAIRAIT quoi que ce soit. Ces deux jetons donnent au bouton d'action sa nappe de lumière sur le noir autour de lui. C'est le seul objet du site qui la porte, et c'est tout l'intérêt : sur une page sombre, ce qui brille est ce qu'on touche. Un deuxième objet lumineux, et il n'y en aurait plus aucun. */ --feu: rgba(242, 167, 59, 0.42); --feu-fort: rgba(242, 167, 59, 0.62); /* La barre du haut laisse passer le halo quand le navigateur sait flouter ce qu'il y a derrière. Sinon elle reste opaque : mieux vaut une barre pleine qu'un texte illisible par-dessus une liste. */ --topbar-fond: rgba(19, 25, 32, 0.78); /* ---- polices ---- */ --display: "Bricolage", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --body: "Instrument", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --mono: "Chivo Mono", "SF Mono", Consolas, "Liberation Mono", monospace; /* la largeur resserrée : une seule valeur pour tout le site, sinon chaque page dériverait de son côté */ --w-serre: 84%; /* ---- LA LONGUEUR DE LIGNE DU TEXTE SUIVI ---- Au-delà d'environ soixante-quinze signes, l'œil arrive au bout d'une ligne et ne retrouve plus le début de la suivante : il faut relire. Les notes de provenance du site tournaient à QUATRE-VINGT-ONZE signes, mesurés dans le navigateur, parce qu'elles étaient bornées en « ch » — une unité qui vaut la largeur du chiffre zéro, bien plus large que la lettre moyenne d'un texte français. Bornée en rem, la valeur ne dépend plus de la police. Elle vit au :root et non dans une page : match.css s'en sert aussi, sur des pages qui n'ont pas le conteneur où elle était rangée avant — elle n'y valait rien, et les notes s'étalaient sur toute la largeur. */ --mesure: 29rem; /* ---- échelle de texte ---- Sept valeurs. Aucune taille de police n'est écrite en dehors d'ici. */ --t-xs: 0.75rem; --t-sm: 0.825rem; --t-md: 0.9rem; --t-base: 1rem; --t-lg: 1.125rem; --t-xl: clamp(1.35rem, 2.4vw, 1.6rem); --t-2xl: clamp(1.65rem, 3.4vw, 2.2rem); --t-3xl: clamp(2.1rem, 5vw, 3.3rem); /* ---- échelle d'espacement ---- Multiples de 4. Une marge qui n'est pas là-dedans est une erreur. */ --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: clamp(3rem, 8vw, 5.5rem); /* ---- rayons ---- Plus généreux qu'avant : le site respire mieux et rien ne pique. */ --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px; /* ---- épaisseurs de barre : trois, pas douze ---- */ --bar-fin: 0.45rem; --bar-moyen: 0.7rem; --bar-gros: 1.2rem; --gut: clamp(1.1rem, 5vw, 2.5rem); --page: 64rem; } /* NOCTURNE, VERSION JOUR Deux états seulement, et c'est volontaire : 1. :root nu → le nocturne, ce que voit tout le monde 2. [data-theme=light] → le jour, quand on clique sur le bouton Le site ne suit plus le réglage clair/sombre de l'ordinateur : la couleur fait partie de l'identité, elle ne doit pas changer d'un visiteur à l'autre. Le bouton reste là pour ceux qui ont besoin d'un fond clair, et le choix est retenu d'une visite à l'autre. L'ambre des projecteurs ne peut pas rester tel quel sur fond clair : du jaune sur du blanc n'est pas lisible. En version jour il devient un bronze de la même famille, assez sombre pour passer le seuil de contraste exigé par la loi française sur un site commercial. */ :root[data-theme="light"] { color-scheme: light; --ground: #EEF1F4; --surface: #FFFFFF; --surface-alt: #E3E8ED; --ink: #10151A; --ink-soft: #4C5966; --ink-faint: #56636F; --line: #D2D9E0; --line-soft: #E4E9EE; --a: #8F5A05; --a-soft: #F6EBD8; --b: #1D5AA6; --b-soft: #E0E9F5; --n: #5D6874; --n-soft: #E5E9ED; --warn: #A8481F; --warn-soft: #F6E7E0; --live: #B3311F; --live-soft: #F8E4E0; --win: #17704C; --draw: #5D6874; --loss: #A8442C; --on-fill: #FFFFFF; --on-accent: #FFFFFF; --shadow: 0 12px 34px rgba(16, 21, 26, 0.12); /* Les mêmes neuf compétitions, refaites pour le fond clair — pas éclaircies mécaniquement. Une teinte lisible sur du noir ne l'est jamais sur du blanc : il faut descendre la clarté et remonter la saturation, sinon le violet de la Premier League devient un mauve délavé qu'on ne distingue plus du gris. */ --lg-l1: #111E5F; --lg-l1-soft: #E2E6F8; --lg-pl: #54176D; --lg-pl-soft: #F1E2F8; --lg-lig: #982716; --lg-lig-soft: #F8E5E2; --lg-sa: #0D4F2C; --lg-sa-soft: #E2F8EC; --lg-bl: #951857; --lg-bl-soft: #F8E2ED; --lg-ere: #563206; --lg-ere-soft: #F8EEE2; --lg-por: #0D6D77; --lg-por-soft: #E2F6F8; --lg-chp: #3C485D; --lg-chp-soft: #E9ECF1; --lg-bra: #59650B; --lg-bra-soft: #F5F8E2; /* De jour, la lampe n'est plus un projecteur : c'est le ciel. Même construction, même endroit, chaleur beaucoup plus discrète — et surtout pas de grain, parce que sur un fond clair les marches d'un dégradé ne se voient pas, et que le bruit y salirait le blanc. --lustre passe à transparent : les cartes sont déjà blanches, poser du blanc sur du blanc ne produirait rien d'autre qu'une règle morte. */ --ciel-haut: #FAFCFD; --ciel-bas: #E4EAF0; --halo: rgba(143, 90, 5, 0.05); --lustre: transparent; --grain: none; --a-haut: #A56A0A; --a-bas: #7C4D03; /* De jour, un projecteur ne se voit pas — c'est la définition même d'un projecteur. La nappe devient donc une ombre portée chaude, très retenue : elle donne au bouton son relief sans prétendre éclairer une pièce déjà éclairée. Un halo ambre sur du blanc ne ferait pas « lumineux », il ferait « sale ». */ --feu: rgba(124, 77, 3, 0.20); --feu-fort: rgba(124, 77, 3, 0.30); --topbar-fond: rgba(255, 255, 255, 0.8); } /* ============================================================ 3. BASE ============================================================ */ * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background-color: var(--ground); background-image: var(--grain), radial-gradient(ellipse 130% 100% at 50% -14%, var(--halo), transparent 64%), linear-gradient(to bottom, var(--ciel-haut) 0, var(--ground) 30%, var(--ciel-bas) 100%); background-repeat: repeat, no-repeat, no-repeat; background-size: 160px 160px, 100% 46rem, 100% 100%; background-position: 0 0, 50% 0, 0 0; } /* Une grotesque n'a pas besoin d'être fine pour être élégante, mais elle a besoin d'être serrée : sans approche négative, un grand titre paraît lâche. */ h1, h2, h3 { margin: 0; text-wrap: balance; font-family: var(--display); } h1 { font-weight: 700; font-stretch: var(--w-serre); font-size: var(--t-3xl); line-height: 1.0; letter-spacing: -0.028em; } h2 { font-weight: 650; font-stretch: var(--w-serre); font-size: var(--t-2xl); line-height: 1.06; letter-spacing: -0.024em; } h3 { font-family: var(--body); font-weight: 600; font-size: var(--t-lg); line-height: 1.3; letter-spacing: -0.012em; } p { margin: 0; } /* ---- le nom d'un club ---- La seule règle typographique du site qui vienne du football : un nom de club se compose resserré, comme un titre de « une » qui doit tenir. */ .club-nom { font-family: var(--display); font-stretch: var(--w-serre); font-weight: 650; letter-spacing: -0.022em; } /* ---- petites capitales de rubrique ---- Un seul style d'intertitre pour tout le site : app et pages de vente. */ .rubrique { font-family: var(--body); font-size: var(--t-xs); font-weight: 650; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink); } .rubrique.douce { color: var(--ink-faint); } /* on habille aussi les surfaces du navigateur, pas seulement la page */ ::selection { background: var(--a); color: var(--on-accent); } * { scrollbar-color: var(--line) transparent; scrollbar-width: thin; } :focus-visible { outline: 2px solid var(--a); outline-offset: 3px; border-radius: var(--r-sm); } [hidden] { display: none !important; } /* Invisible à l'écran, présent dans le code : sert de titre de page (h1) là où le titre visuel n'est pas, techniquement, un titre — par exemple le tableau d'affichage d'un match, qui montre les deux noms sans les poser dans une balise de titre. Un moteur de recherche et un lecteur d'écran le lisent, personne d'autre ne le voit. */ .vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .num { font-family: var(--mono); font-variant-numeric: tabular-nums; } .wrap { max-width: var(--page); margin: 0 auto; } .narrow { max-width: 40rem; } .lede { font-size: var(--t-lg); color: var(--ink-soft); max-width: 46ch; } .card { background-color: var(--surface); background-image: linear-gradient(to bottom, var(--lustre), transparent 32%); border: 1px solid var(--line); border-radius: var(--r-md); } /* LA MARGE INTÉRIEURE DES CARTES, ET POURQUOI LE SÉLECTEUR EST DOUBLÉ. Pendant longtemps ces cartes n'ont eu AUCUNE marge intérieure sur les pages applicatives : le texte touchait le bord du cadre. Ce n'était pas une valeur mal choisie, c'était une bagarre de spécificité. Ce fichier pose « section { padding: var(--s8) var(--gut) } » pour les pages de discours, où une
est une bande pleine largeur, puis l'annule dans un contexte d'outil avec « .app section { padding: 0 } » (plus bas). Cette annulation vaut 0,1,1 — une classe et un élément. La règle ci-dessous n'en valait que 0,1,0. Elle perdait, en silence, et l'ordre des fichiers n'y changeait rien. « .app .block » vaut 0,2,0 et reprend la main. « .block » seul reste listé pour les cartes qui vivent hors d'un contexte d'outil. CETTE RÈGLE A DÉJÀ ÉTÉ ÉCRITE UNE FOIS, AU MAUVAIS ENDROIT. Elle vivait dans analyse.css, pensée pour ses propres cartes. Mais « .block » sert sur six pages — Équipes, Blessures, Transferts, Actualités, Analyser, et toute nouvelle page de texte — et les cinq qui ne chargent pas analyse.css n'en profitaient pas : leurs cartes avaient exactement le même défaut, découvert seulement en construisant la page suivante. Un composant partagé se règle une seule fois, ici, là où toutes les pages viennent le lire. LES VALEURS ONT AUGMENTÉ EN MÊME TEMPS. Une carte qui contient un tableau de douze lignes a besoin de plus d'air qu'un paragraphe : c'est la marge qui sépare le contenu du cadre qui fait qu'une page dense reste lisible au lieu d'être seulement remplie. */ .block, .app .block { padding: clamp(1.4rem, 3.2vw, 2.2rem) clamp(1.25rem, 3.2vw, 2.1rem); display: flex; flex-direction: column; gap: var(--s5); } .block-head { display: flex; flex-direction: column; gap: var(--s1); } .label { font-size: var(--t-sm); color: var(--ink-soft); margin: 0; } /* ============================================================ LA PASTILLE DU CHAMPIONNAT Le nom du championnat était du gris, à la même taille et dans le même ton que le reste de la ligne : sur quatre-vingt-dix matchs d'un samedi, personne ne le lisait. C'est maintenant une pastille, et sa couleur est celle de sa compétition — les jetons --lg-* plus haut expliquent le choix des teintes et pourquoi elles ne marchent pas sur le sens de l'ambre et du bleu. LA COULEUR N'EST JAMAIS SEULE À PORTER L'INFORMATION : le nom reste écrit en toutes lettres dans la pastille. Elle accélère la lecture, elle ne la remplace pas — ce qui vaut aussi pour qui distingue mal les couleurs. ELLE VIT DANS LE SOCLE, PAS DANS matchs.css. C'est le même objet dans les listes de matchs et sur les cartes de « Mes équipes », et la page des équipes ne charge pas la feuille des listes : rangée là-bas, la pastille y restait grise. Un composant partagé par deux pages appartient à la feuille que les deux chargent. Sans classe de championnat — la fiche club s'en sert pour écrire « à domicile » — la pastille reste neutre, et c'est correct : ce n'est pas une compétition. ============================================================ */ .cp2 { align-self: flex-start; max-width: 100%; font-size: var(--t-xs); font-weight: 600; line-height: 1.35; color: var(--ink-soft); background: var(--surface-alt); padding: 0.16em 0.6em; border-radius: var(--r-pill); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp2.lg-l1 { color: var(--lg-l1); background: var(--lg-l1-soft); } .cp2.lg-pl { color: var(--lg-pl); background: var(--lg-pl-soft); } .cp2.lg-lig { color: var(--lg-lig); background: var(--lg-lig-soft); } .cp2.lg-sa { color: var(--lg-sa); background: var(--lg-sa-soft); } .cp2.lg-bl { color: var(--lg-bl); background: var(--lg-bl-soft); } .cp2.lg-ere { color: var(--lg-ere); background: var(--lg-ere-soft); } .cp2.lg-por { color: var(--lg-por); background: var(--lg-por-soft); } .cp2.lg-chp { color: var(--lg-chp); background: var(--lg-chp-soft); } .cp2.lg-bra { color: var(--lg-bra); background: var(--lg-bra-soft); } /* ============================================================ 4. BARRES ET JAUGES Un seul vocabulaire pour toutes les représentations chiffrées du site. Trois épaisseurs, un rayon, et des bouts toujours arrondis. ============================================================ */ .piste { background: var(--surface-alt); border-radius: var(--r-pill); overflow: hidden; display: flex; } .piste.fin { height: var(--bar-fin); } .piste.moyen { height: var(--bar-moyen); } .piste.gros { height: var(--bar-gros); } .piste > i { display: block; height: 100%; } /* ============================================================ 5. BARRE DU HAUT ============================================================ */ .topbar { border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 50; } /* La barre ne devient translucide QUE si le navigateur sait flouter ce qu'il y a derrière. Sans ce test, un vieux navigateur afficherait une barre semi-transparente sans flou : le classement défilerait au travers des onglets et plus rien ne serait lisible. Une barre pleine est un moindre mal ; une barre transparente sur du texte n'en est pas un. */ @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .topbar { background: var(--topbar-fond); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); } } /* DEUX RANGS, ET C'EST UN CHOIX. La barre porte neuf onglets, un bandeau de provenance qui fait 444 pixels de long, un bouton de thème et deux entrées de compte. Tout poser sur une seule ligne « qui passe à la ligne toute seule » donnait trois rangs d'inégale hauteur, et 154 pixels de barre avant le moindre contenu — sur un portable, un tiers du premier écran. On sépare donc par nature : en haut ce qui concerne le VISITEUR — la marque, d'où viennent les chiffres, son compte ; en bas ce qui concerne le SITE — ses rubriques. Deux rangs annoncés valent mieux que trois rangs subis. */ .topbar-in { max-width: var(--page); margin: 0 auto; padding: var(--s3) var(--gut); display: flex; flex-direction: column; gap: var(--s3); } /* La barre sans rubriques — la vitrine. Un seul rang, donc un peu plus d'air autour de lui : à l'espacement prévu pour deux rangs, la marque et le bouton se retrouvaient collés contre les bords, et la barre ressemblait à un reste de barre plutôt qu'à un choix. */ .topbar-nue .topbar-in { padding-top: var(--s4); padding-bottom: var(--s4); } /* SUR UN TÉLÉPHONE, CETTE BARRE FAISAIT 170 PIXELS, ET LA MESURE A TRANCHÉ. Trois rangs empilés — la marque, le bandeau de provenance sur deux lignes, puis les entrées de compte — soit un cinquième d'un écran de téléphone dépensé avant le premier mot. Sur la page dont le seul but est de faire créer un compte, c'était le bouton « Créer mon compte » qui payait la note : il tombait hors de vue. Deux corrections, et seulement sur la vitrine. 1. La marque et les entrées de compte reviennent sur la MÊME ligne. La règle générale les sépare parce qu'il y a d'ordinaire un bandeau entre les deux ; sans rubriques, il n'y a plus rien à séparer. 2. Le bandeau de provenance s'efface sous 46 rem. Il dit « Données réelles · football-data.org · … », et c'est une information de page d'outil : elle veille sur des chiffres qu'on est en train de lire. Cette page-ci n'en affiche qu'un seul, le pourcentage du haut, et la phrase posée juste dessous dit déjà d'où il vient, en toutes lettres. Sur un écran large il tient sur la ligne sans rien coûter, donc il reste. */ .topbar-nue .topbar-haut { flex-wrap: nowrap; } @media (max-width: 46rem) { .topbar-nue .flag { display: none; } .topbar-nue .topbar-actions { width: auto; margin-left: auto; } /* Et « Se connecter » quitte la barre, sur téléphone et sur la vitrine seulement. À trois éléments, la ligne se coupait encore en deux. C'est celui-là qui part parce qu'il est le seul des trois à être déjà ailleurs, et à portée de pouce : le premier écran porte « J'ai déjà un compte », qui mène exactement au même endroit. Le filet qui séparait les deux part avec lui, sinon il resterait un trait vertical devant un bouton isolé. */ .topbar-nue .compte-lien { display: none; } .topbar-nue .compte-grp { border-left: none; padding-left: 0; margin-left: 0; } } .topbar-haut { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; } .topbar-actions { display: inline-flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-left: auto; } .brand { display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--display); font-stretch: var(--w-serre); font-weight: 800; font-size: 1.35rem; letter-spacing: -0.02em; color: var(--a); text-decoration: none; } .brand-icone { width: 28px; height: 28px; border-radius: var(--r-sm); flex: none; } /* Le bandeau d'honnêteté. Il dit en permanence d'où viennent les chiffres qu'on est en train de lire. Orange tant que ce sont des exemples inventés, vert dès que ce sont les vraies données : la couleur doit se voir sans avoir à lire, parce que c'est la promesse centrale du site. */ /* Le badge du bandeau dit d'où viennent les données, et sa phrase s'allonge à mesure que le site en branche : « Données réelles · football-data.org · effectifs officiels · absences 2024 (aperçu) » fait 444 pixels. Sur un téléphone de 375, il poussait la page entière vers la droite. Il tient désormais sur la largeur disponible et passe à la ligne plutôt que de la déborder. */ .flag { font-size: var(--t-xs); color: var(--warn); background: var(--warn-soft); border-radius: var(--r-pill); padding: var(--s1) var(--s3); max-width: 100%; min-width: 0; line-height: 1.4; } .flag-reel { color: var(--win); background: var(--n-soft); } .nav { display: flex; gap: var(--s1); flex-wrap: wrap; align-items: center; } .nav a { font-size: var(--t-md); color: var(--ink-soft); text-decoration: none; padding: var(--s2) var(--s3); border-radius: var(--r-sm); white-space: nowrap; } /* Le survol prend la couleur du site, pas un gris un peu moins gris. Sept onglets qui s'éclairent en ambre au passage de la souris disent « ce sont des boutons » ; sept onglets qui virent au gris foncé ne disent rien du tout, et c'est exactement ce qu'ils faisaient. */ .nav a:hover, .nav a:focus-visible { background: var(--a-soft); color: var(--a); } /* la page courante est marquée par un filet, pas par une pastille pleine : c'est un repère, pas un bouton */ .nav a[aria-current="page"] { color: var(--a); font-weight: 600; box-shadow: inset 0 -2px 0 var(--a); border-radius: 0; } .theme-btn { font-family: var(--body); font-size: var(--t-sm); color: var(--ink-soft); background: none; border: 1px solid var(--line); border-radius: var(--r-pill); min-height: 34px; padding: var(--s1) var(--s3); cursor: pointer; white-space: nowrap; } .theme-btn:hover { border-color: var(--ink-soft); color: var(--ink); } /* ---- l'entrée du compte ---- Un filet la sépare des onglets. C'est une frontière utile : à gauche on circule dans le site, à droite on agit sur soi-même. Sans elle, « Se connecter » se lit comme une dixième rubrique. Un seul des deux est plein. Deux boutons pleins côte à côte se neutralisent — l'œil ne sait plus lequel est proposé — et c'est « Créer un compte » qui compte pour un site qui n'a encore personne. */ .compte-grp { display: inline-flex; align-items: center; gap: var(--s2); margin-left: var(--s2); padding-left: var(--s3); border-left: 1px solid var(--line); } .compte-lien { font-size: var(--t-md); color: var(--ink-soft); text-decoration: none; padding: var(--s2) var(--s3); border-radius: var(--r-sm); white-space: nowrap; } .compte-lien:hover { background: var(--surface-alt); color: var(--ink); } /* Le seul aplat ambre de la barre. Il reprend le dégradé des grands boutons pour que la lumière vienne du même endroit d'un bout à l'autre du site, mais en plus petit : dans une barre du haut, un bouton à la taille d'un vrai bouton d'action écraserait la marque. */ .compte-btn { font-family: var(--body); border: none; cursor: pointer; font-size: var(--t-md); font-weight: 600; color: var(--on-accent); background: linear-gradient(to bottom, var(--a-haut), var(--a-bas)); text-decoration: none; padding: var(--s2) var(--s4); border-radius: var(--r-pill); white-space: nowrap; /* La même lampe que le grand bouton, réglée bien plus bas. Elle suit le visiteur de page en page sans jamais réclamer l'attention que prend le bouton du premier écran : c'est un repère, pas une deuxième demande. */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 3px 12px -3px var(--feu); transition: filter 0.15s ease, box-shadow 0.25s ease; } .compte-btn:hover { filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 5px 18px -3px var(--feu-fort); } @media (max-width: 46rem) { /* La barre cesse de coller en haut : à deux rangs sur un petit écran, elle mangerait une part sérieuse de ce qu'on est venu lire. */ .topbar { position: static; } /* Une fois le rang du haut replié, « auto » n'a plus rien à pousser vers la droite : les actions s'alignent à gauche comme le reste. */ .topbar-actions { margin-left: 0; width: 100%; } } @media (max-width: 30rem) { .compte-lien, .compte-btn { font-size: var(--t-sm); } /* « Thème clair » devient « clair ». Le nom lu par un lecteur d'écran ne change pas : il vient de aria-label, pas de ce texte. */ .theme-mot { display: none; } } /* Sur un téléphone, la barre est passée à neuf onglets et occupait trois lignes — près de deux cents pixels avant le moindre contenu. On resserre ici, et seulement ici : l'espacement des liens, leur taille, et le remplissage. Deux lignes suffisent alors, et tous les onglets restent visibles — on n'en cache aucun derrière un menu à replier, parce qu'un visiteur qui ne voit pas « Bilan » ne saura jamais qu'il existe. */ /* Deux étiquettes par onglet quand le nom long ne tient pas : « Analyser un match » sur un écran d'ordinateur, « Analyser » sur un téléphone. Une seule des deux est dans le flux à la fois — display:none, et non une astuce de position, pour qu'un lecteur d'écran n'annonce pas l'onglet deux fois. */ .nav-court { display: none; } @media (max-width: 30rem) { .nav { gap: 0; } /* On resserre à l'horizontale, JAMAIS à la verticale : c'est la largeur qui fait déborder la ligne, et c'est la hauteur qu'un pouce vise. */ .nav a { font-size: var(--t-sm); padding: var(--s2); } .theme-btn { font-size: var(--t-sm); padding: var(--s2) var(--s3); } .nav-long { display: none; } .nav-court { display: inline; } } /* ============================================================ 6. BOUTONS ============================================================ */ .cta { font-family: var(--body); font-size: var(--t-base); font-weight: 600; letter-spacing: -0.008em; border-radius: var(--r-pill); min-height: 46px; padding: var(--s3) var(--s5); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); text-decoration: none; color: var(--on-accent); background: linear-gradient(to bottom, var(--a-haut), var(--a-bas)); border: none; transition: filter 0.15s ease; } .cta:hover:not(:disabled) { filter: brightness(1.08); } .cta:disabled { background: var(--n); opacity: 0.55; cursor: not-allowed; } /* ---- LE BOUTON ALLUMÉ ---- À poser sur UN SEUL bouton par écran : celui qu'on est venu chercher. Il ne change ni de couleur ni de forme — c'est le même ambre que tous les autres — il porte simplement la lumière qu'il émet. Deux nappes superposées : une courte qui le décolle du fond, une large qui va se perdre dans le noir, comme le fait un vrai projecteur. La bague d'un pixel par-dessus n'est pas une bordure : c'est l'arête du bouton qui reçoit sa propre lumière, la même idée que --lustre sur le haut des cartes. */ .cta-feu { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 0 0 1px var(--feu), 0 8px 20px -6px var(--feu), 0 20px 48px -16px var(--feu-fort); transition: filter 0.15s ease, box-shadow 0.25s ease, transform 0.15s ease; } .cta-feu:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 0 0 1px var(--feu-fort), 0 10px 24px -6px var(--feu-fort), 0 26px 60px -18px var(--feu-fort); } /* L'ANNEAU DE FOCUS CHANGE DE COULEUR SUR CE BOUTON-LÀ. Le site entoure l'élément au clavier d'un trait ambre, et c'est le bon choix partout : de l'ambre sur du bleu-noir se voit de loin. Sur CE bouton, l'ambre serait posé sur de l'ambre, au milieu d'une nappe d'ambre. Le seul repère visible au clavier deviendrait le moins visible de la page, exactement sur la commande qui compte le plus. On le passe donc à la couleur du texte, qui est ce que le fond ambre ne peut pas être. */ .cta-feu:focus-visible { outline-color: var(--ink); outline-width: 3px; } /* Le bouton d'un premier écran est le seul du site à mériter cette taille : il porte à lui seul la décision de la page. Ailleurs, un bouton de cette taille écraserait ce qu'il y a autour. */ .cta-grand { font-size: var(--t-lg); min-height: 54px; padding: var(--s3) var(--s6); } @media (prefers-reduced-motion: reduce) { .cta-feu { transition: filter 0.15s ease; } .cta-feu:hover:not(:disabled) { transform: none; } } .btn-ghost { font-family: var(--body); font-size: var(--t-md); font-weight: 500; background: none; border: 1px solid var(--line); color: var(--ink-soft); border-radius: var(--r-pill); min-height: 46px; padding: var(--s2) var(--s4); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } .btn-ghost:hover { border-color: var(--ink-soft); color: var(--ink); } /* ============================================================ 7. TRAME DE PAGE ============================================================ */ main { display: flex; flex-direction: column; } section { padding: var(--s8) var(--gut); } /* les pages « outil » respirent moins que les pages « discours » */ /* CE N'EST PLUS SEULEMENT UN
, ET C'EST VOULU. Cette règle s'écrivait « main.app » : elle ne pouvait donc habiller qu'une page entière. Depuis qu'une fiche de match s'ouvre aussi dans une fenêtre posée au milieu de l'écran, le même contenu vit ailleurs que dans un
— et sans ce contexte, ses cartes reprenaient les marges d'une page de discours et ses titres la taille d'une page d'accueil. « .app » désigne donc un CONTEXTE D'OUTIL, où qu'il se trouve. Pour toutes les pages existantes, rien ne change : leur
porte déjà cette classe. */ .app { display: flex; flex-direction: column; max-width: var(--page); margin: 0 auto; padding: var(--s6) var(--gut) var(--s8); gap: var(--s5); width: 100%; } .app section { padding: 0; } .rule { border-top: 1px solid var(--line); } /* ============================================================ 8. PIED DE PAGE ============================================================ */ footer { border-top: 1px solid var(--line); padding: var(--s7) var(--gut) var(--s8); } footer .wrap { display: flex; flex-direction: column; gap: var(--s3); } footer p { font-size: var(--t-sm); color: var(--ink-faint); max-width: 62ch; } /* Les trois promesses tenables. Une puce ambrée devant chacune, la même que sur la page des offres : c est une liste, pas un label de qualité décerné par nous-mêmes. */ footer .gages { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); font-size: var(--t-sm); color: var(--ink-soft); margin-bottom: var(--s3); } footer .gages span { position: relative; padding-left: var(--s4); } footer .gages span::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.35rem; height: 0.35rem; border-radius: 50%; background: var(--a); } /* Les vraies pages du pied : elles se distinguent des mentions légales juste en dessous, qui ne sont pas encore cliquables. Un lien qui a l apparence d un lien doit mener quelque part. */ footer .liens { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); font-size: var(--t-sm); margin-bottom: var(--s3); } footer .liens a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--line); } footer .liens a:hover { color: var(--a); border-bottom-color: var(--a); } footer .legal { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); font-size: var(--t-sm); color: var(--ink-faint); } /* Un seul de ces quatre éléments est un vrai lien aujourd'hui — voir site.js. Il reprend le style des liens de « .liens » juste au-dessus, pour qu'un lien qui fonctionne et un mot qui ne mène nulle part restent visuellement distincts l'un de l'autre. */ footer .legal a { color: var(--ink-faint); text-decoration: none; border-bottom: 1px solid var(--line); } footer .legal a:hover { color: var(--a); border-bottom-color: var(--a); } @media (prefers-reduced-motion: reduce) { .cta { transition: none; } } /* ============================================================ L'ÉCUSSON D'UN CLUB Il apparaît partout où un club est nommé — classement, résultats, analyse, transferts, buteurs, clubs suivis — donc son style est ici, dans la feuille que toutes les pages chargent, et non recopié six fois. Trois tailles seulement, et une largeur FIXE dans chacune. C'est le point important : les blasons n'ont pas tous les mêmes proportions, et si on les laissait prendre leur largeur naturelle, les noms de clubs ne seraient plus alignés d'une ligne à l'autre. Or c'est exactement l'alignement qui rend une liste de quatre-vingt-seize clubs balayable. On fixe donc un carré, et « contain » loge le blason dedans sans jamais le déformer ni le rogner. ============================================================ */ .ecusson { flex: none; width: 1.25rem; height: 1.25rem; object-fit: contain; /* le blason est aligné sur le milieu du texte, pas sur sa base : un écusson rond posé sur la ligne de base a l'air de tomber */ vertical-align: -0.28em; } .ecusson-s { width: 1rem; height: 1rem; vertical-align: -0.22em; } .ecusson-m { width: 1.75rem; height: 1.75rem; vertical-align: -0.5em; } /* Pas de blason : une pastille discrète de la même taille. Elle tient la colonne sans attirer l'œil — on doit sentir qu'il manque une image, pas croire que le site est cassé. */ .ecusson-vide { display: inline-block; background: var(--surface-alt); border: 1px solid var(--line-soft); border-radius: var(--r-sm); box-sizing: border-box; } /* Le couple écusson + nom, partout où le nom est un lien ou une cellule. inline-flex plutôt que deux éléments posés côte à côte : le nom peut alors se couper sur plusieurs lignes sans que l'écusson se décale, et min-width:0 lui permet de rétrécir au lieu de déborder de sa colonne. */ .avec-ecusson { display: inline-flex; align-items: center; gap: 0.45em; min-width: 0; /* dans un couple, l'écusson n'a plus besoin d'être recalé : c'est le flex qui centre les deux l'un sur l'autre */ vertical-align: middle; } .avec-ecusson .ecusson, .avec-ecusson .ecusson-s, .avec-ecusson .ecusson-m { vertical-align: baseline; }