/* ══════════════════════════════════════════════════════════════════ LEXEND — l'écriture du titre, et d'elle seule. POURQUOI ELLE REVIENT. Elle avait été retirée deux fois, et pour de bonnes raisons : elle venait de Google Fonts, donc le titre attendait un serveur extérieur pour s'afficher et sautait de largeur en route. Ces raisons portaient sur la FAÇON de la charger, pas sur la police. Félix a demandé trois fois un titre identique à celui du site en ligne : aucune police du système n'y arrive, parce que le dessin des lettres diffère — on peut approcher la largeur, jamais la forme. COMMENT ELLE REVIENT SANS SES DÉFAUTS : · servie depuis NOTRE serveur (`site/polices/`, 74 Ko), donc aucune dépendance extérieure et rien qui parte chez Google ; · `font-display:swap` : le titre s'affiche tout de suite dans la police du système, puis bascule ; · elle ne sert QU'AU TITRE. Les tableaux, les fiches et les menus gardent la police du système — la règle « une seule écriture pour les données » tient toujours. PLAGE 300-550, ET C'EST VOULU. C'est celle que le site en ligne demande à Google (`wght@300;400;450;500;550`). Comme il écrit ses titres en 600, le navigateur prend le 550 et l'ÉPAISSIT lui-même. Déclarer `100 900` donnait un vrai 600 de Lexend : mêmes lettres, même largeur, mais traits 20 % plus fins — 1929 pixels d'encre contre ses 2316. Pour copier son rendu, il faut copier sa contrainte, pas seulement sa police. ══════════════════════════════════════════════════════════════════ */ @font-face{font-family:'Lexend';font-style:normal;font-weight:300 550; font-display:swap;src:url('/polices/lexend-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+030B,U+0310,U+0312,U+0315,U+031A,U+0326-0327,U+032C, U+032F-0330,U+0332-0333,U+0338,U+033A,U+0346,U+034D,U+0353,U+0362,U+0387, U+1DD3,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:'Lexend';font-style:normal;font-weight:300 550; font-display:swap;src:url('/polices/lexend-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} /* UNE SEULE ÉCRITURE POUR TOUT LE SITE : celle des tableaux. Les deux barres du haut étaient en Lexend, les tableaux dans la police du système : deux écritures qui se croisaient à chaque page. Et le webfont devait être téléchargé avant que le logo ne trouve sa largeur, ce qui le faisait sauter de 131 à 161 px selon les pages qui l'avaient oublié. Il n'y a plus rien à charger. La barre s'affiche à sa taille définitive du premier coup, et elle s'accorde aux tableaux qu'elle surplombe. */ /* ══════════════════════════════════════════════════════════════════ LA BARRE DE GAUCHE — la disposition de Corriger le tir 1.0. Les mesures viennent de sa feuille de style, pas d'un choix nouveau : 188 px de large, fond blanc, filet à droite, liens de 13 px dans des pastilles arrondies, libellés de groupe en petites majuscules grises. 188 px, sa mesure exacte. J'étais passé à 200 « parce que nos libellés français sont plus longs » : un écart de 12 px sur la barre décale tout le contenu de 12 px, et c'est ce décalage qui faisait paraître les en-têtes de carte différents des siens — alors qu'ils sont identiques au pixel. Quand on copie, on copie aussi ce qui semble anodin. POURQUOI `position:fixed` ET NON UNE COLONNE FLEX : chaque page a déjà sa propre structure (l'accueil défile, les fiches sont un `flex` vertical à hauteur bloquée). Une barre fixe se pose PAR-DESSUS sans rien demander à personne ; il suffit alors de décaler le corps de la page. ══════════════════════════════════════════════════════════════════ */ .clt-bar{position:fixed !important;top:0 !important;left:0 !important; width:188px !important;height:100vh !important;z-index:200 !important; background:#fff !important;border-right:1px solid #d6dfef !important; box-shadow:2px 0 12px rgba(25,44,80,.04) !important; display:flex !important;flex-direction:column !important; box-sizing:border-box !important; font:400 13px/1.4 -apple-system,"Segoe UI",system-ui,sans-serif !important} .clt-bar-nav{display:flex !important;flex-direction:column !important; gap:2px !important;padding:22px 8px 0 !important;flex:1 !important; min-height:0 !important;overflow-y:auto !important} .clt-grp{display:flex !important;flex-direction:column !important; gap:2px !important;margin-top:10px !important} .clt-grp:first-child{margin-top:0 !important} .clt-grp-t{margin:8px 6px 1px !important;font-size:10.5px !important; font-weight:700 !important;text-transform:uppercase !important; letter-spacing:.08em !important;color:#7b869b !important} .clt-bar-nav a{color:#425b84 !important;text-decoration:none !important; padding:9px 11px !important;border-radius:10px !important; font-weight:450 !important;font-size:13px !important;display:block !important; transition:background .16s,color .16s !important} .clt-bar-nav a:hover{background:#edf2fb !important;color:#1a2740 !important} .clt-bar-nav a.on{background:#e3ebf8 !important;color:#1a2740 !important; font-weight:600 !important; box-shadow:inset 0 0 0 1px rgba(45,111,208,.14) !important} .clt-bar-pied{padding:14px 14px 18px !important; border-top:1px solid #d6dfef !important;margin-top:auto !important} .clt-bar-pied p{margin:0 !important;font-size:10px !important; line-height:1.5 !important;color:#7b869b !important} /* « Suivre sur Facebook », comme au bas de sa barre à lui : l'icône devant, le texte à côté, dans une pastille qui s'allume au survol. */ .clt-bar-fb{display:flex !important;align-items:center !important; gap:7px !important;margin:0 -6px 10px !important;padding:8px 6px !important; border-radius:10px !important;text-decoration:none !important; color:#425b84 !important;white-space:nowrap !important; font:450 12px/1.3 -apple-system,"Segoe UI",system-ui,sans-serif !important} .clt-bar-fb:hover{background:#edf2fb !important;color:#1a2740 !important} .clt-bar-fb svg{width:16px !important;height:16px !important;flex:none !important; fill:currentColor !important;opacity:.85 !important} /* ── LE PIED DE PAGE ────────────────────────────────────────────── Les mesures de celui de l'accueil, pour que les deux soient le même. */ .clt-pied{margin-top:26px !important;border-top:1px solid #d6dfef !important; padding:20px 0 46px !important;text-align:center !important; color:#7b869b !important;font-size:12.5px !important; font-family:-apple-system,"Segoe UI",system-ui,sans-serif !important} .clt-pied p{margin:0 0 5px !important} .clt-pied a{color:#2d6fd0 !important;text-decoration:none !important} .clt-pied a:hover{text-decoration:underline !important} /* Les réseaux quittent le bandeau sur écran étroit et se posent ici : trois pastilles de plus en haut serraient le titre, alors qu'en bas de la barre elles ne gênent personne. Elles ne s'affichent QUE là où elles ont disparu du bandeau — jamais aux deux endroits à la fois. */ .clt-bar-liens{display:none !important;gap:8px !important; margin-bottom:12px !important} /* Le corps de la page se décale d'autant. `html` porte la classe : la barre est écrite avant que `body` n'existe vraiment. LE FOND EST CELUI DU SITE EN LIGNE — #f4f7fc, relevé dans ses variables (`--bg0`). Le nôtre était blanc, donc rien ne séparait la page de la barre ni des panneaux qu'elle porte. LES PAGES-TABLEAU EN SONT EXCLUES : les tableaux de statistiques et la feuille d'un match gardent exactement l'aspect qu'ils ont — c'est une demande explicite de Félix, et leur fond blanc fait partie de leur lisibilité. */ html.clt-avec-bar body{padding-left:188px !important;background:#f4f7fc !important} html.clt-tableau body{padding-left:0 !important;background:var(--bg) !important} /* ── LE FIL D'ARIANE ────────────────────────────────────────────── « Accueil › Nick Suzuki », au-dessus de la carte. C'est CE QUI MANQUAIT pour que le haut d'une carte « couvre plus d'espace » comme chez lui : sa fiche de joueur commence 33 px plus bas que la nôtre, et cet air au-dessus de la photo change tout. J'avais comparé les deux en les alignant chacune sur le haut de SA photo, donc je ne pouvais pas le voir — il fallait les aligner sur le bas du bandeau. Ses mesures : `.bc-wrap{padding:10px 20px 0}` avec un filet en bas, `.nav-bc{font-size:13px;gap:6px}`, le lien en #425b84 et le reste en #7b869b. */ .clt-ariane{padding:10px 20px 0 !important; border-bottom:1px solid #d6dfef !important;background:#f4f7fc !important; display:flex !important;align-items:center !important;gap:6px !important; font:400 13px/1.55 'Lexend',-apple-system,"Segoe UI",system-ui,sans-serif !important; color:#7b869b !important} .clt-ariane[hidden]{display:none !important} .clt-ariane a{color:#425b84 !important;text-decoration:none !important} .clt-ariane a:hover{color:#1a2740 !important} /* LE BOUTON À TROIS TRAITS — caché tant que la barre tient à l'écran. */ /* Le bouton à trois traits est une pastille comme les autres : même fond, même filet, même rayon, même hauteur. Changer l'un sans les autres se voit tout de suite, les trois étant côte à côte. */ .clt-ham{display:none !important;flex-direction:column !important; gap:4px !important;align-items:center !important;justify-content:center !important; width:40px !important;height:40px !important;flex:none !important; background:#edf2fb !important;border:1px solid #d6dfef !important; border-radius:10px !important;cursor:pointer !important;padding:0 !important} .clt-ham i{display:block !important;width:18px !important;height:2.5px !important; background:#1a2740 !important;border-radius:1px !important} .clt-ham:hover{background:#c92a3a !important;border-color:#c92a3a !important} .clt-ham:hover i{background:#fff !important} .clt-voile{display:none !important} /* ── SUR ÉCRAN ÉTROIT : LA BARRE DEVIENT UN TIROIR ──────────────── Elle sort de l'écran, le bouton à trois traits la fait glisser, et un voile sombre couvre la page derrière. C'est ce que fait le site en ligne sous 900 px. */ /* ── LE MODE TIROIR ─────────────────────────────────────────────── La barre sort de l'écran et un bouton à trois traits la fait glisser par-dessus la page, avec un voile sombre derrière. DEUX SITUATIONS le déclenchent : l'écran étroit, et les pages-tableau à n'importe quelle largeur. Une règle CSS ne peut pas combiner un sélecteur et une media query, et écrire le bloc deux fois garantit qu'ils finiraient par diverger. C'est donc `entete.js` qui pose la classe `clt-replie` sur `` — toujours sur une page-tableau, et sous 900 px ailleurs, en suivant la largeur si la fenêtre change. Une seule définition, deux déclencheurs. */ html.clt-replie body{padding-left:0 !important} html.clt-replie .clt-bar{width:min(230px,72vw) !important;z-index:400 !important; transform:translateX(-100%) !important; transition:transform .22s ease !important; border-radius:0 14px 14px 0 !important} html.clt-replie.clt-bar-ouverte .clt-bar{transform:translateX(0) !important; box-shadow:6px 0 24px rgba(25,44,80,.14) !important} html.clt-replie .clt-voile{display:block !important;position:fixed !important; inset:0 !important;z-index:399 !important;background:rgba(15,30,55,.38) !important} html.clt-replie .clt-voile[hidden]{display:none !important} html.clt-replie .clt-ham{display:inline-flex !important} /* Sur écran étroit SEULEMENT, les réseaux quittent le bandeau pour le pied de la barre. Sur une page-tableau en grand écran ils restent en haut : la place ne manque pas, et le tiroir est fermé la plupart du temps. */ @media (max-width:900px){ .clt-a .clt-liens{display:none !important} .clt-bar-liens{display:flex !important} } /* ══════════════════════════════════════════════════════════════════ entete.css — LE BANDEAU DU HAUT ET LA BARRE DE GAUCHE. IMPERMÉABLE À LA PAGE : chaque propriété est écrite explicitement et marquée !important. Les pages qui l'accueillent ont leurs propres règles globales (police, box-sizing, hauteurs) et elles s'infiltraient dans la barre — c'est ce qui la faisait paraître différente d'une page à l'autre alors que le code était le même. Chargées par l'accueil et par la fiche de match : en arrivant sur un match, la barre ne bouge pas d'un pixel, parce que c'est la même. Les reconstruire garantirait qu'elles divergent. ══════════════════════════════════════════════════════════════════ */ .clt-a,.clt-a *,.clt-bar,.clt-bar *{box-sizing:border-box !important} /* La page hôte a ses propres règles sur `header` et `nav` — display, padding, police. Elles s'infiltraient et déformaient la barre. On les neutralise toutes, explicitement, plutôt que d'espérer qu'elles ne gênent pas. */ /* La barre de défilement verticale n'apparaît pas sur toutes les pages, et son absence décale de quelques pixels tout ce qui est centré — dont le logo. On réserve sa place partout : la barre tombe alors au même endroit, quelle que soit la longueur de la page. */ html{scrollbar-gutter:stable !important} header.clt-a{display:block !important;padding:0 !important; margin:0 !important;width:100% !important;height:auto !important; position:static !important;flex:none !important; font:400 14px/1.55 -apple-system,"Segoe UI",system-ui,sans-serif !important} .clt-a{background:#fff !important;border-bottom:1px solid #d6dfef !important;flex:none !important; font-family:-apple-system,"Segoe UI",system-ui,sans-serif !important} .clt-a-int{display:grid !important;grid-template-columns:1fr auto 1fr !important;align-items:center !important; gap:12px !important;padding:10px 20px !important;max-width:none !important;margin:0 !important} /* LE TITRE, AUX MESURES DU SITE EN LIGNE (`.main-top-center`) : 1,22 rem (19,5 px), graisse 600, interlettrage -.03em, et la même pastille au survol — fond #edf2fb, rayon 10, léger agrandissement. Il était à 23 px en graisse 800 : plus gros ET plus gras, ce qui pesait lourd à côté de commandes de 13 px. UNE DIFFÉRENCE ASSUMÉE : le site en ligne écrit en Lexend, une police téléchargée. Félix l'a fait retirer deux fois — elle retardait l'affichage et faisait sauter la largeur du logo. On garde donc la police du système, aux mesures de Lexend. */ /* LE TITRE EST CELUI DU SITE EN LIGNE, À L'IDENTIQUE : Lexend, 1,22 rem, graisse 600, interlettrage -.03em, interligne 1,55. Tant qu'on écrivait dans la police du système il fallait tricher sur la graisse (800) pour approcher sa largeur ; avec la bonne police, on reprend sa consigne telle quelle. */ .clt-logo{font:600 1.22rem/1.55 'Lexend',-apple-system,"Segoe UI",system-ui,sans-serif !important; letter-spacing:-.03em !important;color:#1a2740 !important; white-space:nowrap !important;justify-self:center !important; text-decoration:none !important;padding:6px 12px !important; border-radius:10px !important; transition:transform .16s ease,background .16s,box-shadow .16s !important} .clt-logo:hover{background:#edf2fb !important;transform:scale(1.02) !important; box-shadow:0 2px 8px rgba(25,44,80,.06) !important} .clt-logo em{font-style:normal !important;color:#c92a3a !important} .clt-gauche{display:flex !important;align-items:center !important;gap:10px !important;flex-wrap:wrap !important} /* Les mesures de `.top-nav-pill` : 13 px/500, 8x12 de marge intérieure, 40 px de haut, rayon 10. Une pastille de texte, pas une rondelle. */ .clt-home{display:inline-flex !important;align-items:center !important; justify-content:center !important;flex:none !important; min-height:40px !important;padding:8px 12px !important; border:1px solid #d6dfef !important;border-radius:10px !important; background:#edf2fb !important;color:#1a2740 !important; font:500 13px/1.2 'Lexend',-apple-system,"Segoe UI",system-ui,sans-serif !important; text-decoration:none !important;white-space:nowrap !important} .clt-home:hover{background:#e3ebf8 !important;border-color:#d6dfef !important} .clt-theme{font:600 15px/1 -apple-system,"Segoe UI",system-ui,sans-serif !important; color:#425b84 !important;cursor:pointer !important;padding:0 !important} .clt-theme:hover{color:#fff !important} /* LA DROITE DU BANDEAU tient les réseaux et, sur écran étroit, le choix de saison venu de la carte. */ .clt-droite{justify-self:end !important;display:flex !important; align-items:center !important;gap:10px !important;min-width:0 !important} .clt-liens{display:flex !important;align-items:center !important;gap:10px !important} .clt-saison:empty{display:none !important} .clt-saison{display:flex !important;align-items:center !important} /* Le sélecteur monté ici prend l'aspect des autres pastilles du bandeau : il vient de la carte, où il porte la classe `.sel` de la page. */ .clt-saison select{background-color:#edf2fb !important; border:1px solid #d6dfef !important;color:#1a2740 !important; padding:8px 32px 8px 12px !important;border-radius:10px !important; min-height:40px !important;width:100% !important; font:500 13px/1.2 -apple-system,"Segoe UI",system-ui,sans-serif !important; -webkit-appearance:none !important;appearance:none !important;cursor:pointer !important; background-repeat:no-repeat !important;background-position:right 10px center !important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236d7fa1' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important} .clt-ic{width:40px !important;height:40px !important;border:1px solid #d6dfef !important;border-radius:10px !important; background:#edf2fb !important;display:grid !important;place-items:center !important} .clt-ic svg{width:16px !important;height:16px !important;fill:#425b84 !important} .clt-ic:hover{background:#c92a3a !important;border-color:#c92a3a !important} .clt-ic:hover svg{fill:#fff !important} .clt-sel{background-color:#edf2fb !important;border:1px solid #d6dfef !important;color:#1a2740 !important; padding:8px 32px 8px 12px !important;border-radius:10px !important;min-height:40px !important; font:500 13px/1.2 -apple-system,"Segoe UI",system-ui,sans-serif !important; letter-spacing:.02em !important; -webkit-appearance:none !important;appearance:none !important;cursor:pointer !important; background-repeat:no-repeat !important;background-position:right 9px center !important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236d7fa1' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important} /* LA BARRE DE MENU HORIZONTALE A ETE RETIREE le 9 septembre 2026 : le menu vit maintenant dans la barre de gauche, plus haut dans ce fichier. Ses regles (`.clt-nav`, `.clt-nav-int`, `.clt-nav a`) sont supprimees plutot que laissees en place — une feuille de style pleine de regles sans element fait douter de ce qui s'applique vraiment. Pour revenir en arriere : `git switch master`. */ /* ══════════════════════════════════════════════════════════════════ SUR TÉLÉPHONE, LE HAUT RESPIRE — la mesure vient du site en ligne. MESURÉ sur corrigerletir.com à 430 px de large : tout ce qui précède le contenu y occupe 167 px, soit 23 % de l'écran. Ici on en était à 91 px, 13 %. D'où l'impression, juste, que « tout est à l'étroit » : ce n'est pas la couleur ni la police, c'est la place. CE QUI FAIT LA DIFFÉRENCE : le site en ligne met le LOGO SEUL sur sa ligne, centré, et descend les commandes sur une deuxième rangée où elles ont la taille d'un doigt (44 px). On reproduit exactement ça — même grille, deux rangées — au lieu de tout serrer sur une ligne. Au-dessus de 640 px, rien ne change : la barre reste celle du bureau. ══════════════════════════════════════════════════════════════════ */ /* ── LE BANDEAU EMPILÉ, COMME CELUI DU SITE EN LIGNE ────────────── Ses règles, reprises telles quelles : une seule colonne, chaque bloc étiré sur toute la largeur, et le TITRE EN PREMIER (`order:-1`) même s'il est au milieu dans le code. En dessous les commandes, puis le choix de saison sur sa propre ligne, pleine largeur. C'est ce qui donne son air aéré au haut de sa page : trois lignes qui respirent au lieu d'une seule qui se serre. */ @media (max-width:900px){ .clt-a-int{grid-template-columns:1fr !important; justify-items:stretch !important; row-gap:10px !important;padding:8px 12px !important; gap:10px !important} .clt-logo{order:-1 !important;justify-self:center !important; font-size:1.22rem !important} .clt-gauche{justify-self:start !important} .clt-droite{justify-self:stretch !important;width:100% !important} .clt-saison{flex:1 !important} /* Les pastilles font déjà 40 px partout : rien à forcer ici. Le sort des icônes de réseaux — elles descendent au pied de la barre — est réglé dans l'autre bloc à 900 px, plus haut, avec son pendant `.clt-bar-liens`. Les deux vont ensemble et doivent rester au même endroit. */ }