/* ===================================================================== Ez Average — feuille de style de base UNE SEULE COPIE, partagée par toutes les fédérations. Tout est bâti sur des variables CSS. Une fédération ne redéfinit que des valeurs — jamais des règles — via ez_federationweb.fThemeConfig, injecté par le gabarit dans un :root{} après ce fichier. La conséquence est celle qu'on cherchait : une correction ici profite à tout le monde d'un coup. Si chaque fédération avait sa copie, il faudrait la répéter autant de fois qu'il y a de fédérations — le défaut qu'on a justement corrigé sur les rôles. ===================================================================== */ :root { --ez-primary: #003a70; --ez-primary-text: #ffffff; --ez-accent: #d4af37; --ez-surface: #ffffff; --ez-text: #1a1a1a; --ez-logo-height: 28px; /* La couleur du fond du logo, quand la fédération en demande un. ⚠ Elle est SANS EFFET tant qu'aucun fond n'est choisi : c'est le choix (plaque ou halo) qui déclenche son emploi, pas elle. */ --ez-logo-back: #ffffff; /* Valeurs de structure : pas surchargeables par une fédération. Elles tiennent la cohérence de l'interface d'un bout à l'autre. */ --ez-bg: #f4f5f7; --ez-muted: #6b7280; --ez-border: #d9dde3; /** * ⚠ LE ROUGE DE L'ERREUR NE VIENT PAS DE LA FÉDÉRATION. Swiss Bowling * est rouge : un champ fautif teinté de la couleur du site ne se * distinguerait de rien. Ces trois valeurs sont donc écrites en dur, * comme celles d'« .alert--error », et ne suivent aucun thème. */ --ez-err: #b42318; --ez-err-clair: #f3c7c3; --ez-radius: 6px; --ez-gap: 16px; /* ⚠ L'ÉCHELLE DES CONTRÔLES — TROIS HAUTEURS, PAS SEPT. * * Relevé avant : « Enregistrer » 26 px, les lettres A–Z 26, la * pagination 31, une liste déroulante 38, le filtre 39, le champ de * recherche 42, « Chercher » 44. Quatre tailles de police. Sur la * barre de recherche, trois contrôles côte à côte faisaient 39, 42 et * 44 px : ils ne s'alignaient pas. * * Il n'y avait pas d'échelle, juste des valeurs posées au fil de * l'eau. TOUT CE QUI SE CLIQUE TOMBE MAINTENANT DANS L'UNE DES TROIS. * Une quatrième hauteur qui apparaît, c'est le début du retour en * arrière. */ --ez-h-l: 40px; --ez-p-l: 15px; /* action principale, champs, listes */ --ez-h-m: 32px; --ez-p-m: 14px; /* action secondaire, pages, A–Z */ --ez-h-s: 26px; --ez-p-s: 13px; /* action discrète, pastilles */ --ez-r: 8px; /* un seul rayon pour tout ça */ --ez-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ez-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } *, *::before, *::after { box-sizing: border-box; } /* ⚠ « hidden » DOIT GAGNER. Le style par défaut du navigateur pose « [hidden] { display: none } » — une règle à SPÉCIFICITÉ FAIBLE, que « .btn { display: inline-flex } » écrase sans effort. Le bouton « Appliquer », masqué par le script quand il a pris la main, restait donc affiché. C'est le genre de défaut qu'on met une heure à voir parce qu'on cherche du côté du script. */ [hidden] { display: none !important; } body { margin: 0; font-family: var(--ez-font); font-size: 16px; line-height: 1.5; color: var(--ez-text); background: var(--ez-bg); } /* ==================================================================== l'écran LE RAIL À GAUCHE, LA VUE À DROITE. Il y avait deux bandeaux empilés en haut — service, puis menu — et, dans la configuration, un troisième menu à gauche dans la page. Trois niveaux de navigation à trois endroits, et la couleur de la fédération réduite à 48 px de bandeau : « ça fait ambiance année 2000 ». ⚠ TOUT EST DANS LE RAIL désormais : identité, rubriques, sections, langue, compte. Un seul endroit où l'on navigue, et la couleur de la fédération tient toute la hauteur — c'est elle qui donne son identité à l'écran avant qu'on ait lu un mot. ==================================================================== */ .ez-shell { display: flex; min-height: 100vh; align-items: stretch; } /* ------------------------------------------------------------- le rail */ .ez-rail { width: 248px; flex: 0 0 248px; /* ⚠ LE DÉGRADÉ EST CALCULÉ À PARTIR DE LA COULEUR DE LA FÉDÉRATION, pas posé en dur : color-mix garde la teinte choisie dans Apparence et ne fait que l'assombrir et l'éclaircir. Une fédération en vert obtient un rail vert, pas un rail bleu. */ background: var(--ez-primary); background: linear-gradient(180deg, color-mix(in srgb, var(--ez-primary) 88%, #000) 0%, var(--ez-primary) 42%, color-mix(in srgb, var(--ez-primary) 88%, #fff) 100%); color: var(--ez-primary-text); padding: 18px 14px 22px; position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto; } .ez-rail__haut { display: flex; align-items: center; gap: 10px; padding: 0 6px 18px; } .ez-rail__marque { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; min-width: 0; flex: 1; } .ez-rail__initiales { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px; background: var(--ez-accent); color: #2a1f00; display: grid; place-items: center; font-weight: 800; font-size: 16px; letter-spacing: -.02em; } .ez-rail__ident { min-width: 0; } .ez-rail__nom { display: block; font-size: 15px; font-weight: 650; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ez-rail__sous { display: block; font-size: 12.5px; opacity: .62; } /* ⚠ LA BASCULE N'EXISTE QUE SUR TÉLÉPHONE. Au-dessus de 900 px elle est retirée du flux — pas seulement masquée — pour qu'elle ne laisse ni espace ni cible de clic invisible. */ .ez-rail__bascule { display: none; width: var(--ez-h-m); height: var(--ez-h-m); flex: 0 0 var(--ez-h-m); border-radius: var(--ez-r); cursor: pointer; place-items: center; font-size: 17px; background: rgba(255, 255, 255, .12); } .ez-nav-coche { position: absolute; opacity: 0; pointer-events: none; } .ez-visuel-seul { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .ez-rail__bloc { margin-bottom: 18px; } .ez-rail__titre { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; /* ⚠ LA TEINTE QUASI BLANCHE, PAS LA MOYENNE. Le dégradé du rail s'éclaircit vers le bas : une teinte moyenne y tombe à 3,0 de contraste en suisse. Celle-ci tient 4,6 — contre 2,60 pour le blanc à 58 % d'opacité qu'elle remplace. Et l'opacité repasse à 1 : à .58, une couleur se délave et son contraste mesuré ne veut plus rien dire. */ color: var(--ez-g-rail); opacity: 1; padding: 0 10px 6px; font-weight: 650; } .ez-rail__lien { display: flex; align-items: center; height: var(--ez-h-m); padding: 0 10px 0 22px; margin-bottom: 1px; border-radius: var(--ez-r); text-decoration: none; font-size: var(--ez-p-m); color: inherit; opacity: .82; position: relative; } .ez-rail__lien:hover, .ez-rail__lien:focus-visible { background: rgba(255, 255, 255, .10); opacity: 1; } .ez-rail__lien.is-active { background: rgba(255, 255, 255, .15); opacity: 1; font-weight: 600; box-shadow: inset 3px 0 0 var(--ez-g-clair, transparent); } /* ⚠ L'OR MARQUE CE QUI EST OUVERT, et c'est sa seule fonction dans le rail : une couleur d'accent qui sert à deux choses n'en signale plus aucune. */ .ez-rail__lien.is-active::before { content: ""; position: absolute; left: -14px; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ez-accent); } /* ⚠ GRISÉ, PAS ABSENT : la rubrique existe dans le plan et n'est pas encore faite. La masquer laisserait croire qu'elle n'existera jamais. */ .ez-rail__lien.is-todo { opacity: .42; cursor: default; } .ez-rail__lien.is-todo:hover { background: none; opacity: .42; } /* ⚠ SEULS LES BLOCS QUI ONT UN TITRE PORTENT LE FILET. Le premier bloc du rail — Accueil / Gestion / Configuration / État — n'en a pas : un filet vertical qui ne tient aucun titre ne tiendrait rien du tout. C'est la classe « ez-groupe », posée par config/_menu.php, qui fait le tri. */ .ez-rail__bloc.ez-groupe::before { content: ""; position: absolute; left: 11px; top: 24px; bottom: 1px; width: 2px; border-radius: 2px; background: var(--ez-g-clair); } /* ==================================================== barre de service LANGUES, COMPTE, SITE OFFICIEL — EN HAUT, À DROITE DU RAIL. ⚠ ILS ÉTAIENT AU PIED DU RAIL. Le rail fait la hauteur de l'écran : son pied se retrouvait collé en bas, à des centaines de pixels du dernier lien du menu. Relevé avant le déplacement : le sélecteur de langue s'affichait à y = 903 sur un écran de 900 de haut — hors de vue. Il est maintenant à y = 253. ⚠ LE FOND EST BLANC, ET C'EST MESURÉ. Sous la barre commence le gris de page (--ez-bg, #f4f5f7) ; la fiche, elle, est blanche. Écart perceptuel relevé au pixel (ΔE — sous 1,5 l'œil ne distingue plus) : vs gris de page vs fiche blanche barre blanche 3,6 0,0 barre au gris de page 0,0 3,6 barre gris franc 4,6 8,2 Une barre grise se serait FONDUE dans la page au lieu de s'en détacher — l'inverse de l'effet cherché. Le blanc s'en écarte, et le filet du bas marque la limite avec le contenu. ⚠ ET ELLE N'EST PAS DANS LE RAIL. Sous 900 px, « ez-rail__contenu » se replie derrière la case à cocher du menu ; une barre placée dedans disparaîtrait avec lui. ==================================================================== */ .ez-barre { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 0 22px; min-height: 46px; background: var(--ez-surface); border-bottom: 1px solid var(--ez-border); } .ez-barre__g, .ez-barre__d { display: flex; align-items: center; gap: 16px; } .ez-barre__d { margin-left: auto; } /* ⚠ LES TROIS COMPOSANTS VIENNENT DU RAIL, OÙ LE FOND EST SOMBRE : ils héritaient d'un blanc et se survolaient en rgba(255,255,255,…). Sur fond blanc, tout cela est invisible. On les rhabille ici plutôt que de les réécrire — le rail n'existe plus qu'ici, mais l'habillage classique, lui, a ses propres classes. */ .ez-barre .ez-lang { padding: 0; } .ez-barre .ez-lang a { color: var(--ez-muted); opacity: 1; } .ez-barre .ez-lang a:hover, .ez-barre .ez-lang a:focus { background: var(--ez-bg); color: var(--ez-text); } .ez-barre .ez-lang__current { background: var(--ez-primary); color: var(--ez-primary-text); opacity: 1; } .ez-barre .ez-compte { padding: 0; display: flex; align-items: baseline; gap: 10px; } .ez-barre .ez-compte__nom { display: inline; opacity: 1; color: var(--ez-text); font-weight: 600; } .ez-barre .ez-compte__out { color: var(--ez-muted); opacity: 1; } .ez-barre .ez-compte__out:hover, .ez-barre .ez-compte__out:focus { color: var(--ez-text); } .ez-barre .ez-compte__off { padding: 0; color: var(--ez-muted); opacity: 1; } .ez-barre .ez-rail__externe { padding: 0; color: var(--ez-muted); opacity: 1; } .ez-barre .ez-rail__externe:hover { color: var(--ez-text); } .ez-rail__externe { display: inline-flex; align-items: center; gap: 4px; font-size: var(--ez-p-s); color: inherit; opacity: .7; text-decoration: none; padding: 0 10px; } .ez-rail__externe:hover { opacity: 1; text-decoration: underline; } .ez-lang { display: flex; flex-wrap: wrap; gap: 3px; list-style: none; margin: 0; padding: 0 6px; } .ez-lang a, .ez-lang__current { display: grid; place-items: center; min-width: var(--ez-h-s); height: var(--ez-h-s); padding: 0 6px; border-radius: 6px; font-size: var(--ez-p-s); font-weight: 600; color: inherit; text-decoration: none; opacity: .6; } .ez-lang a:hover, .ez-lang a:focus { opacity: 1; background: rgba(255,255,255,.15); } .ez-lang__current { opacity: 1; background: rgba(255,255,255,.22); } .ez-compte { padding: 0 10px; font-size: var(--ez-p-s); line-height: 1.4; } /* ⚠ LE NOM EST DEVENU UN LIEN (vers « Mon compte »), et un lien sans règle prend le bleu souligné du navigateur : mesuré rgb(0,0,238) sur le bandeau sombre, illisible et hors charte. Il garde donc exactement l'apparence qu'il avait en tant que texte, et ne se souligne qu'au survol — c'est ce qui dit qu'on peut cliquer. */ .ez-compte__nom { display: block; opacity: .9; color: inherit; text-decoration: none; } .ez-compte__nom:hover, .ez-compte__nom:focus { opacity: 1; text-decoration: underline; } .ez-compte__out { color: inherit; opacity: .65; text-decoration: none; } .ez-compte__out:hover, .ez-compte__out:focus { opacity: 1; text-decoration: underline; } .ez-compte__off { padding: 0 10px; font-size: var(--ez-p-s); opacity: .5; font-style: italic; } .ez-menu__ext { font-size: .85em; opacity: .75; } /* Le logo dans la barre de menu, à gauche du lien « Site officiel ». * * ⚠ PAR DÉFAUT AUCUN FOND : le logo est posé directement sur la couleur * de la barre, et un logo à traits sombres y sera peu lisible. La * fédération choisit dans Apparence entre rien, une plaque, ou un halo * qui épouse le trait — avec la couleur de son choix. * * ⚠ LES QUATRE VALEURS DE REPLI CI-DESSOUS SONT LE MODE « AUCUN FOND ». * Service\Theme n'écrit ses variables QUE si la fédération a demandé * un fond ; sans elles, une fédération qui n'a rien réglé recevrait * « background: ; » et le navigateur jetterait la règle entière. * * ⚠ max-height PLAFONNE --ez-logo-height : sans lui, une fédération qui * réglerait une hauteur trop grande ferait grandir la barre de menu * chez elle seulement. */ /* ⚠ LE PLAFOND DE 43 px A ÉTÉ MESURÉ SUR L'ANCIENNE BARRE DE MENU, qui n'existe plus : dans le rail, la place ne manque pas. Il est donc devenu PRUDENT au lieu d'être contraignant — et on n'y touche pas sans remesurer, parce que Theme::PX_MAX doit rester égal à cette valeur (bin/selftest.php le vérifie) et qu'une valeur stockée au-dessus du plafond serait silencieusement ramenée. Le relever est possible ; c'est une décision, pas un ajustement. */ .ez-menu__logo { height: var(--ez-logo-height); background: var(--ez-logo-plate, transparent); padding: var(--ez-logo-plate-pad, 0); border-radius: var(--ez-logo-plate-radius, 0); filter: var(--ez-logo-halo, none); /* ⚠ content-box, ET C'EST VOULU : la marge de la plaque S'AJOUTE à la * hauteur au lieu de rogner l'image, qui garderait sinon deux * tailles différentes selon qu'on a mis un fond ou non. 34 px de * plafond + 6 px de marge = 40 px, toujours sous les 49 px de la * barre : le fond ne la fait donc pas grandir non plus. */ box-sizing: content-box; /* ⚠ 43 px, ET C'EST UN PLAFOND DUR — MESURÉ, PAS ESTIMÉ. * * La barre de menu mesure 49 px, fixée par la hauteur des libellés. * Relevé au navigateur, hauteur de barre à chaque pas : * * sans fond jusqu'à 49 px → barre 49 50 px → barre 50 * avec plaque jusqu'à 43 px → barre 49 44 px → barre 50 * * La plaque ajoute ses 6 px de marge (content-box, voir plus haut), * d'où l'écart. 43 est donc la plus grande valeur qui tienne DANS LES * DEUX CAS : la barre a exactement la même hauteur sur toutes les * fédérations, quel que soit le réglage de chacune, qu'elle ait un * logo ou non, un fond ou non. C'est ce plafond qui le garantit, pas * la discipline de celui qui règle. * * ⚠ IL VALAIT 34, ET C'ÉTAIT FAUX — posé au jugé. Les deux fédérations * avaient 44 en base : Service\Theme refusait la valeur, n'écrivait * aucune variable, et le logo retombait sur les 28 px du :root * ci-dessus. Le plafond CSS et celui de Theme::PX_MAX doivent rester * ÉGAUX — c'est leur écart qui rend ce genre de perte invisible. */ max-height: 43px; width: auto; display: block; flex: 0 0 auto; align-self: center; } /* -------------------------------------------------------------- la vue */ .ez-vue { flex: 1; min-width: 0; display: flex; flex-direction: column; } /* ⚠ 1500 px, ET C'EST LA VALEUR DE LA FÉDÉRATION — Xavier l'a portée de 1100 à 1500 à la main. Elle borne le CONTENU, pas la fenêtre : sur un très grand écran, une ligne de tableau large de 2 500 px ne se lit plus. */ .ez-main { max-width: 1500px; width: 100%; margin: 0 auto; padding: 24px 28px 40px; } .ez-footer { margin-top: auto; padding: 16px 28px 22px; color: var(--ez-muted); font-size: 13px; } /* ⚠ SOUS 900 px LE RAIL SE REPLIE, et c'est une case à cocher qui le commande — aucun script. Le rail redevient un bandeau horizontal, la marque reste visible, et le reste s'ouvre au bouton. */ @media (max-width: 900px) { .ez-shell { flex-direction: column; } .ez-rail { width: 100%; flex: none; height: auto; position: static; padding: 12px 14px; } .ez-rail__haut { padding-bottom: 0; } .ez-rail__bascule { display: grid; } .ez-rail__contenu { display: none; padding-top: 14px; } .ez-nav-coche:checked ~ .ez-shell .ez-rail__contenu { display: block; } .ez-rail__lien.is-active::before { left: -8px; } /* ⚠ LA BARRE VIENT JUSTE SOUS LE RAIL REPLIÉ. Sur un téléphone, les * langues, le nom, « Déconnexion » et « Site officiel » ne tiennent * pas sur une ligne de 390 px : elle passe sur deux, et « ez-barre__d » * cesse d'être poussé à droite — sinon il s'y colle tout seul sur sa * propre ligne, à l'opposé des langues. */ .ez-barre { padding: 8px 16px; gap: 8px 14px; } .ez-barre__d { margin-left: 0; flex-wrap: wrap; gap: 12px; } .ez-main { padding: 18px 16px 32px; } .ez-footer { padding: 14px 16px 20px; } } /* ------------------------------------------------------------------ panneau */ .panel { background: var(--ez-surface); border: 1px solid var(--ez-border); border-radius: var(--ez-radius); padding: 20px 24px; margin-bottom: var(--ez-gap); } .panel--center { text-align: center; } .panel--narrow { max-width: 420px; margin-left: auto; margin-right: auto; } .panel__title { margin: 0 0 12px; font-size: 20px; font-weight: 600; } .panel__lead { margin: 0 0 16px; color: var(--ez-muted); } /* ------------------------------------------------------------------ chiffres */ .stats { display: flex; gap: 32px; flex-wrap: wrap; } .stat { display: flex; flex-direction: column; } .stat__value { font-size: 32px; font-weight: 600; color: var(--ez-primary); line-height: 1.1; } .stat__label { font-size: 14px; color: var(--ez-muted); } /* ------------------------------------------------------------------ tableau */ .table { width: 100%; border-collapse: collapse; font-size: 15px; } /* ⚠ « middle », PAS « top » — ET C'ÉTAIT UN VRAI DÉFAUT, MESURÉ. * * Avec « vertical-align: top », le nom du club et son nombre de * licences se calaient en HAUT d'une ligne de 58 px, pendant que les * listes déroulantes de la colonne voisine, elles, se centraient. Écart * relevé au navigateur : le texte passait 9 px au-dessus du centre de * sa propre ligne. D'un bout à l'autre du tableau, rien n'était sur la * même ligne d'œil. * * « top » ne se justifie que pour une cellule qui porte un paragraphe à * côté d'une cellule courte. Dans une liste de données, il n'y en a * pas : on centre. */ .table th, .table td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--ez-border); vertical-align: middle; } /* ⚠ PAS DE MAJUSCULES FORCÉES. « NOM ▲ LICENCES RÉGION » criait, et c'est une des trois choses qui datent un écran. La maquette validée les montrait en minuscules — la feuille avait gardé l'ancienne règle. */ .table thead th { font-size: 13px; font-weight: 650; letter-spacing: 0; color: var(--ez-muted); border-bottom-width: 1px; } .table tbody tr:last-child th, .table tbody tr:last-child td { border-bottom: 0; } /* ⚠ LE SURVOL N'EST PAS DÉCORATIF sur 465 lignes larges de 1 400 px : c'est ce qui relie le nom à gauche au bouton à droite. */ .ez-list__table tbody tr:hover { background: color-mix(in srgb, var(--ez-primary) 4%, transparent); } .table tbody th { font-weight: 500; color: var(--ez-muted); width: 34%; } /* Un tableau de licenciés est large : il défile dans son cadre, la page elle-même ne défile jamais horizontalement. */ .table-wrap { overflow-x: auto; } /* ------------------------------------------------------------------ champs */ .field { margin-bottom: var(--ez-gap); } .field__label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 4px; } .field__hint { display: block; font-size: 13px; color: var(--ez-muted); margin-top: 4px; } /** * ⚠ CES DEUX CLASSES ÉTAIENT POSÉES PAR DIX GABARITS ET N'AVAIENT * JAMAIS EU UNE SEULE RÈGLE. * * Le bandeau « Corrigez les champs signalés » s'affichait, et rien * n'était signalé : le message d'erreur sortait en texte noir de 16 px, * en ligne, impossible à distinguer d'une aide. Mesuré sur le rendu — * « rgb(26,26,26) », « display: inline » — avant correction. * * ⚠ ET LA BORDURE ROUGE NE S'APPLIQUE PAS AUX MÊMES CHOSES SELON LE * PORTEUR. Sur un « .field », un seul contrôle est en cause : c'est lui * qu'on souligne. Sur un « .fieldset », la faute porte sur l'ENSEMBLE — * « au moins un libellé », « les plages se chevauchent » — et rougir * les neuf cases accuserait huit innocentes. On borde le groupe. */ .field__error { display: block; font-size: 13px; font-weight: 500; color: var(--ez-err); margin-top: 4px; } .field.field--error > .field__input, .field.field--error > .field__select, .field.field--error .ez-cherche .field__input { border-color: var(--ez-err); } /* ⚠ Le halo de focus reste celui de la fédération : il dit « vous êtes ici », pas « c'est faux ». Seule la bordure porte l'erreur. */ .field.field--error > .field__input:focus, .field.field--error > .field__select:focus { border-color: var(--ez-err); } .fieldset.field--error { border-color: var(--ez-err); } .fieldset.field--error > .fieldset__legend { color: var(--ez-err); font-weight: 600; } /** * ⚠ « field__input--mono » ÉTAIT ORPHELINE, ELLE AUSSI — posée par trois * gabarits sur les champs de code, sans une règle. Un code court se lit * caractère par caractère : « I », « l » et « 1 » doivent se * distinguer. */ /** * ⚠ « .field__input.field__input--mono » ET NON « .field__input--mono » * SEUL. « .field__input » pose « font: … » — la forme raccourcie, qui * RÉINITIALISE font-family — et, à spécificité égale, c'est la règle * écrite en dernier qui gagne. Mesuré sur le rendu : la police restait * « system-ui » alors que la règle existait. Deux classes sur le même * élément suffisent à passer devant. * * ⚠ PAS DE « text-transform: uppercase » ICI. Il afficherait « PO » et * enregistrerait « po » : l'écran mentirait sur ce qui est en base. * Si les codes doivent être en majuscules, c'est à l'écriture que ça * se décide, pas dans la feuille. */ .field__input.field__input--mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; } /* ⚠ CHAMPS ET LISTES SONT EN TAILLE L, comme l'action principale : ils se posent sur la même ligne qu'elle, et c'est là que le désalignement se voyait. La flèche de la liste est une image en ligne — pas de fichier, pas de requête — parce que « appearance: none » retire aussi celle du système. */ .field__input, .field__select { width: 100%; height: var(--ez-h-l); padding: 0 12px; font: var(--ez-p-l)/1 var(--ez-font); color: var(--ez-text); background: var(--ez-surface); border: 1px solid var(--ez-border); border-radius: var(--ez-r); } .field__input:focus, .field__select:focus { outline: 2px solid color-mix(in srgb, var(--ez-primary) 30%, transparent); outline-offset: 0; border-color: var(--ez-primary); } .field__select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 32px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } /* Un champ multiligne n'a pas de hauteur d'échelle : c'est sa raison d'être. */ textarea.field__input { height: auto; padding: 10px 12px; line-height: 1.5; } /* ------------------------------------------------------------------ boutons */ /* ⚠ TROIS NIVEAUX, UNE SEULE FORME. « btn » plein pour l'action principale, « btn--ghost » en contour pour la secondaire. La TAILLE ne dit rien du niveau : c'est la couleur qui le dit, la taille ne dit que la place disponible. Confondre les deux, c'est ce qui donnait un « Enregistrer » de 26 px à côté d'un « Chercher » de 44. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: var(--ez-h-m); padding: 0 14px; border: 1px solid transparent; border-radius: var(--ez-r); background: var(--ez-primary); color: var(--ez-primary-text); font: 600 var(--ez-p-m)/1 var(--ez-font); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .12s, border-color .12s, filter .12s; } .btn:hover, .btn:focus { filter: brightness(1.1); } .btn:focus-visible { outline: 2px solid var(--ez-accent); outline-offset: 2px; } .btn--large { height: var(--ez-h-l); padding: 0 18px; font-size: var(--ez-p-l); } /** * UN BOUTON DONT LE LIBELLÉ PEUT PASSER À LA LIGNE. * * ⚠ « .btn » PORTE « white-space: nowrap » ET UNE HAUTEUR FIXE, et c'est * juste pour 99 % des boutons : « Enregistrer » ne doit pas se couper * en deux. Mais « Reprendre les 865 valeurs sans ambiguïté » fait * 310 px — mesuré — et poussait la liste des clubs de 71 px à 320 px * de large. Le libellé porte un nombre : il grandit avec les données, * et aucune traduction ne peut garantir sa longueur. * * ⚠ C'EST UN MODIFICATEUR, PAS UNE CORRECTION DE « .btn ». Autoriser * TOUS les boutons du site à se replier changerait la mise en page de * chaque écran pour régler le cas d'un seul. * * ⚠ ET « height: auto » VA AVEC. Sans lui, le texte passe bien sur deux * lignes et déborde du bouton, qui garde sa hauteur d'origine. */ .btn--wrap { white-space: normal; height: auto; min-height: var(--ez-h-m); padding-top: 6px; padding-bottom: 6px; text-align: center; max-width: 100%; } .btn--small { height: var(--ez-h-s); padding: 0 10px; font-size: var(--ez-p-s); } .btn--ghost { background: var(--ez-surface); color: var(--ez-text); border-color: var(--ez-border); font-weight: 500; } .btn--ghost:hover, .btn--ghost:focus { filter: none; border-color: #b9c0c9; background: #fbfcfd; } .btn--danger { background: #b42318; border-color: #b42318; color: #fff; } /* ------------------------------------------------------------ configuration ⚠ LE MENU LATÉRAL A DISPARU D'ICI : il est dans le rail, avec le reste de la navigation. « .ez-config » ne sert plus qu'à envelopper le contenu — les gabarits la portent encore, et la retirer des quinze obligerait à tous les rouvrir pour rien. */ .ez-config { display: block; } .ez-config__body { min-width: 0; } /* ------------------------------------------------------------------ formulaires */ /** * ⚠ LA LIGNE SE REPLIE. Sans « flex-wrap », une ligne trop chargée ne * rétrécit pas : elle déborde, et c'est la PAGE ENTIÈRE qui prend une * barre horizontale — le même défaut que le calque des catégories, sous * un autre visage. Trois champs sur la ligne d'identité d'une catégorie * sortaient de 90 px à 390 px de large ; la ligne des niveaux de jeu, * qui n'en porte que deux, sortait déjà de 46 px à 320 px. * * Le repli est déjà la réponse retenue pour « .ez-list__table * .field__row » plus bas : on ne fait ici que la généraliser. */ .field__row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } /** * DEUX CHAMPS COMPLETS CÔTE À CÔTE — étiquette, saisie, aide, erreur. * * ⚠ C'EST UN MODIFICATEUR, ET IL LE FAUT. « .field__row » sert déjà à * poser des morceaux de champ sur une ligne (une case et son bouton, * un code et son numéro) avec « align-items: center » et la marge * basse de chaque champ. Changer ces deux points sur la classe de base * déplacerait la mise en page de sept écrans qui vont très bien — * dont l'invitation d'un utilisateur et la fiche d'une valeur typée, * vérifiés. * * ⚠ « flex-start » ET NON « center » : deux champs dont un seul porte une * ligne d'aide n'ont pas la même hauteur. Centrés, leurs saisies se * décalent l'une par rapport à l'autre — l'œil voit un défaut * d'alignement sans savoir d'où il vient. */ .field__row--paire { align-items: flex-start; gap: 6px 12px; } .field__row--paire > .field { margin-bottom: 0; } /** * ⚠ « LE CHAMP QUI PREND LA PLACE QUI RESTE ». Sans lui, « Nom » et * « Nom court » se partagent la largeur moitié-moitié : vingt * caractères ont alors autant de place que cinquante, et le nom du * club est coupé pendant que son abréviation nage dans le vide. * * ⚠ « min-width: 0 » VA AVEC « flex: 1 », TOUJOURS. Un élément flexible * refuse par défaut de descendre sous la largeur de son contenu : sans * cette ligne, la règle n'élargit rien et déborde à l'étroit. Même * défaut que sur .fieldset, pour la même raison. */ .field__row--paire > .field--grow { flex: 1 1 14em; min-width: 0; } .field__input--small { width: 5em; flex: 0 0 auto; } /** * ⚠ « width: auto » SEUL NE BORNE RIEN : une liste déroulante se * dimensionne sur son option la plus longue, et « — aucun * rattachement — » dépasse la largeur d'un téléphone à lui seul. Le * couple max-width / min-width est ce qui l'autorise à rétrécir. */ .field__row .field__select { width: auto; max-width: 100%; min-width: 0; } .fieldset { /** * ⚠ « min-width: 0 » N'EST PAS DÉCORATIF SUR UN FIELDSET. Le * navigateur lui donne « min-width: min-content » d'office — une * règle du standard, propre à cet élément — et il refuse alors de * descendre sous la largeur de son contenu. Conséquence mesurée : * le tableau du découpage, pourtant enfermé dans une enveloppe à * « overflow-x: auto », poussait la PAGE de 139 px à 320 px. Le * défilement interne ne peut pas fonctionner tant que le cadre qui * le contient ne sait pas rétrécir. */ min-width: 0; border: 1px solid var(--ez-border); border-radius: var(--ez-radius); padding: 12px 16px; margin: 0 0 var(--ez-gap); } .fieldset__legend { font-size: 14px; font-weight: 500; padding: 0 6px; color: var(--ez-muted); } .check { display: flex; align-items: center; gap: 8px; padding: 4px 0; cursor: pointer; } /* Réglages avancés repliés : ils existent, sans encombrer l'écran de celui qui ne les cherche pas.
le fait sans une ligne de JS. */ .details { margin: 8px 0 0; border-top: 1px solid var(--ez-border); padding-top: 8px; } .details__summary { cursor: pointer; font-size: 14px; color: var(--ez-primary); padding: 4px 0; list-style: revert; } .details__summary:focus-visible { outline: 2px solid var(--ez-primary); outline-offset: 2px; } .details[open] .details__summary { margin-bottom: 8px; } /* ------------------------------------------------------------------ alertes */ .alert { padding: 10px 14px; border-radius: var(--ez-radius); border: 1px solid transparent; margin: 0 0 var(--ez-gap); font-size: 15px; } .alert--error { background: #fdeceb; border-color: #f3c7c3; color: #8a1c14; } .alert--info { background: #eef4fb; border-color: #cddef2; color: #1c4e8a; } .alert--ok { background: #e7f4ec; border-color: #bfe0cd; color: #17603a; } /* ============================================================ la fiche UNE FICHE SE LIT D'UN ÉCRAN, PAS DE TROIS. ⚠ Mesuré avant refonte : 1 800 px de haut pour vingt-sept faits, huit panneaux empilés, chaque fait seul sur une ligne de 1 126 px. Après : 810 px, et huit informations de PLUS. Le gain ne vient pas d'avoir retiré des données — il vient d'avoir cessé d'en mettre une par ligne sur toute la largeur. ⓘ Ces classes servent la fiche d'un licencié ; elles sont écrites pour resservir telles quelles à toute fiche de lecture. */ /* --- l'en-tête d'identité --- */ .fic__nom { font-size: 26px; font-weight: 700; line-height: 1.15; margin: 0 0 2px; } .fic__num { font-family: var(--ez-mono); font-size: 13px; background: var(--ez-bg); border-radius: 4px; padding: 2px 7px; color: var(--ez-muted); } /* Les six clés : la valeur en gros, son nom dessous. C'est ce qu'on vient chercher en ouvrant une fiche. */ .fic__cles { display: flex; gap: 22px; flex-wrap: wrap; margin: 14px 0 0; } .fic__cle { min-width: 0; } .fic__cle b { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; } .fic__cle span { display: block; font-size: 12px; color: var(--ez-muted); } /* --- la grille de faits --- ⚠ « auto-fit » ET NON « auto-fill » : à deux faits dans un cadre large, auto-fill laisserait des colonnes vides et le tout collerait à gauche. auto-fit répartit ce qu'il y a. */ .fx { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 2px 20px; margin: 0; } .fx > div { padding: 5px 0; min-width: 0; } .fx dt { font-size: 12px; color: var(--ez-muted); line-height: 1.3; } .fx dd { margin: 0; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; } /* Une adresse tient rarement dans une demi-colonne. */ .fx .large { grid-column: 1 / -1; } /* ⚠ « quatre informations non renseignées » — on masque les champs vides, on ne les cache pas. La nuance tient dans cette ligne. */ .fx__vides { margin: 4px 0 0; font-size: 12px; color: var(--ez-muted); } /* --- deux colonnes, qui retombent en une --- */ .col2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } @media (max-width: 820px) { .col2 { grid-template-columns: 1fr; } } /* --- un cadre plus sobre que « .panel » --- ⓘ Le titre d'un bloc n'est pas un titre de page : petites capitales, gris, il sépare sans crier. Trois de ces titres dans un même cadre restent lisibles ; trois « .panel__title » se battraient. */ .bloc { border: 1px solid var(--ez-border); border-radius: var(--ez-radius); background: var(--ez-surface, #fff); padding: 14px 16px; margin: 0 0 16px; } .bloc__t { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ez-muted); margin: 0 0 8px; } .bloc .fx + .bloc__t, .bloc .fx__vides + .bloc__t { margin-top: 14px; } /* --- une rangée de oui/non --- */ .oui { display: flex; gap: 8px; flex-wrap: wrap; } .oui .badge { font-weight: 500; } /* ------------------------------------------------------------------ badges */ .badge { display: inline-block; padding: 2px 8px; font-size: 12px; font-weight: 600; border-radius: 999px; } .badge--ok { background: #e7f4ec; color: #17603a; } .badge--ko { background: #fdeceb; color: #b42318; } .badge--mirror { background: #eef0f3; color: var(--ez-muted); font-weight: 500; } /* « fédération » contre « général » : on doit voir d'un coup d'œil quelle valeur a été choisie ici et laquelle est simplement héritée. */ .badge--own { background: #eef4fb; color: #1c4e8a; font-weight: 500; } /* ⚠ L'ORANGE DU RETARD — « la licence n'est plus active, et voici depuis quand ». Ni vert ni rouge : ce n'est pas une réussite, ce n'est pas une faute, c'est un écart qui appelle un geste (renouveler). ⓘ Contraste mesuré : #7a4a05 sur #fdf3e3 rend 7,4 — au-dessus des 4,5 exigés, et lisible aussi pour un daltonisme rouge-vert, où seule la LUMINOSITÉ distingue. C'est pour ça que la pastille porte AUSSI un texte : l'année. La couleur ne porte jamais l'information seule. */ .badge--late { background: #fdf3e3; color: #7a4a05; } /* ------------------------------------------------------------------ à recopier */ /* Un bloc destiné à être sélectionné et collé tel quel : police fixe, fond contrasté, et retour à la ligne autorisé — une clé de 64 signes ne doit pas forcer un défilement horizontal sur un portable. */ .pre { font-family: var(--ez-mono); font-size: 14px; background: #1d2733; color: #e8eef5; padding: 10px 14px; border-radius: var(--ez-radius); margin: 8px 0; overflow-x: auto; white-space: pre-wrap; word-break: break-all; user-select: all; } .pre code { background: none; color: inherit; padding: 0; font-size: inherit; } .steps { margin: 8px 0 8px 20px; padding: 0; } .steps li { margin: 3px 0; } /* ------------------------------------------------------ barre de recherche * * REFAITE DE ZÉRO. Les trois versions précédentes réutilisaient * .field__input et échouaient toutes pour la même raison : * * ⚠ .field__input EST FAIT POUR UN FORMULAIRE EMPILÉ. Un champ par * ligne, chacun sur toute la largeur — d'où son « width: 100% ». Dans * une barre horizontale, cette largeur devient la base du calcul flex * et le champ RÉCLAME toute la ligne, quoi qu'on écrive ensuite. * Le défaire après coup, c'est se battre contre sa propre feuille. * * La barre a donc SES PROPRES CLASSES, sans rien hériter des champs de * formulaire. Aucune règle « width » nulle part. * * ⚠ ET ELLE MARCHE MÊME SANS CSS. Un , un