/* ============================================================ CARTE DE LOGO — le logo d'un partenaire, posé sur une carte uniforme NOUVEAU COMPOSANT (bloc 5b, 13/08). Il naît d'un fait de matière, pas d'un goût : la page Vélo pose SEIZE logos fournis par le client (6 partenaires vélo, 10 cyclosportives), et ces fichiers n'ont aucune homogénéité — 9 fonds blancs opaques, 1 SVG, 1 WebP, et surtout **Carea, dont le fond est un jaune fluo pleine surface**. Posés nus sur la page, comme le fait le mur de logos (`logo-wall.css`), les quinze premiers disparaîtraient dans le fond et le seizième hurlerait. POURQUOI UNE CARTE ET NON UN DÉTOURAGE (décision 8 du gate 1, 13/08) : un détourage est une retouche de l'actif d'un partenaire — on n'a ni le droit ni la matière source pour le faire proprement, et il faudrait le refaire à chaque logo reçu. La carte, elle, est un traitement de PAGE : elle donne aux seize logos le même cadre, le même fond et la même hauteur de rendu. Le fond jaune de Carea devient alors ce qu'il est — la couleur d'un logo dans son cadre — au lieu d'un aplat qui déborde sur la section. POURQUOI UN BLOC À PART ET NON UN MODIFICATEUR DU MUR : les éléments du mur (`.lcdi-logowall__item`) lisent des variables déclarées par leur mur (`--wall-logo-min`, `--wall-logo-h`, `--wall-h-silver`). Hors de ce mur — dans une piste de carrousel, précisément le cas d'usage d'ici — ces `var()` n'ont plus de valeur ni de repli valide : la hauteur de rendu et le plancher de cellule tombent tous les deux à `auto`, et un logo de 1264 px s'affiche à 1264 px. La carte porte donc ses propres leviers, et rien qu'eux. TROIS RÈGLES, dans cet ordre : 1. LA CARTE EST UNIFORME. Même fond, même filet, même hauteur, quel que soit le logo. C'est ce qui rend une rangée lisible. 2. LE LOGO EST CONTENU, JAMAIS DÉFORMÉ (contrat repris du mur) : `contain`, hauteur commandée par `--logocard-logo-h`. 3. LA CARTE EST CLIQUABLE ou ne l'est pas. Quand elle l'est, elle possède ses états (survol, focus) ; quand elle ne l'est pas, elle n'en simule aucun. ============================================================ */ /* ============================================================ BLOC 5c (15/08) — LA BOÎTE UTILE, ET NON PLUS UNE SEULE HAUTEUR CONSTAT DE JULIEN, au verbatim : « les logos sont trop petits de façon générale (trop de blanc autour des logos dans l'encart), particulièrement Cybervelo qui est presque illisible ». LA CAUSE, MESURÉE AVANT D'ÊTRE CORRIGÉE (sonde `probe-5c.js`, 1440, passe « avant »). La carte rendait 222,8 × 136 ; le logo n'était contraint QUE par sa hauteur (`height: 56px; width: auto`), donc sa largeur suivait son propre rapport. Un logo CARRÉ peignait 56 × 56 dans une carte de 222,8 × 136, soit **10 % de la surface** — les 90 % restants étaient le blanc dont parle le constat. Et Cybervelo est carré : ce n'est pas un défaut de son fichier (447 × 447 en source, largement suffisant), c'est la géométrie de la boîte. Un logo LARGE (Wellness Training, 2:1) s'en tirait mieux — 112 × 56 — d'où « particulièrement Cybervelo, mais de façon générale ». LA CORRECTION : le logo reçoit une BOÎTE (largeur ET hauteur), et `contain` fait le reste. Un logo carré atteint alors la hauteur de la boîte, un logo large en atteint la largeur, et aucun ne se déforme — le contrat de la règle 2 est intact. Le rembourrage descend d'un cran (24 → 16 px) : la carte n'a plus besoin de fabriquer du vide, le logo l'occupe. AUCUN UPSCALE, ET C'EST VÉRIFIÉ FICHIER PAR FICHIER (relevé des 16 logos, `_constats/releve-logos-velo.php`) : le plus faible des seize est Summit Cycle, 250 × 250 en source, rendu 104 px → il reste **2,40 pixels source par pixel CSS**, donc net y compris sur un écran à densité double. Les quinze autres sont entre 3,4 et 20. Aucun logo n'est monté au-delà de ce que sa définition permet. MÊME ÉCHELLE POUR LES DEUX RANGÉES (partenaires et cyclosportives) : elles ne se voient jamais ensemble — une bande pleine et une section vedette les séparent — et un écart de taille entre deux rangées éloignées se lit comme une incohérence, pas comme une hiérarchie. La hiérarchie de la page est déjà portée là où elle se voit : le GF Mont Ventoux a sa bande vedette et son écusson à 144 px (`band.css`, `--band-logo-h-grand`). ============================================================ */ .lcdi-logocard { /* Les trois leviers du composant. Nommés, pour qu'une page puisse resserrer une rangée sans réécrire une règle. */ --logocard-h: 9.5rem; /* 152 px : la hauteur de la carte */ --logocard-logo-h: 6.5rem; /* 104 px : la hauteur de la BOÎTE du logo */ --logocard-pad: var(--space-4); /* 16 px */ display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: var(--logocard-h); padding: var(--logocard-pad); background: var(--surface-raised); border: 2px solid var(--border-soft); border-radius: var(--radius-m); /* Une carte de logo n'est pas un texte : elle ne souligne rien, elle ne prend pas l'encre de lien. Le `` remet donc à plat ce qu'il apporte. */ text-decoration: none; color: inherit; transition: border-color var(--t-soft) var(--ease-brand), transform var(--t-soft) var(--ease-brand); } .lcdi-logocard img { /* LA BOÎTE, ET NON PLUS UNE HAUTEUR SEULE (bloc 5c). `width: 100%` décrit la boîte offerte au logo, pas la taille à laquelle il sera peint : c'est `object-fit: contain` qui l'y inscrit, en gardant son rapport. Le logo touche donc soit les deux bords, soit le haut et le bas — jamais l'un étiré sur l'autre. */ width: 100%; max-width: 100%; height: var(--logocard-logo-h); object-fit: contain; /* CONTRAT : un logo ne se déforme jamais */ } /* --- Les états, réservés à la carte QUI EST UN LIEN ---------------------- */ a.lcdi-logocard:hover { border-color: var(--border-accent); transform: translateY(var(--lift-btn)); } a.lcdi-logocard:focus-visible { box-shadow: var(--focus-ring); } /* --- Repli téléphone ---------------------------------------------------- Même geste que le mur : la carte descend d'un cran pour que deux logos tiennent de front plutôt qu'un seul perdu au milieu de l'écran. BLOC 5c : les trois valeurs montent du même geste que le bureau. Mesure de départ à 390 (sonde « avant ») : carte 163 × 104, rembourrage 16, logo carré peint 44 × 44. La boîte utile passe à 135 × 72 — Summit Cycle y garde 3,47 pixels source par pixel CSS, la marge de netteté est plus large qu'au bureau parce que la carte, elle, est plus petite. */ @media (max-width: 767px) { .lcdi-logocard { --logocard-h: 7.5rem; /* 120 px */ --logocard-logo-h: 4.5rem; /* 72 px */ --logocard-pad: var(--space-3); /* 12 px */ } } /* --- Sur nuit : le panneau translucide du monde sombre ------------------- Servi pour cohérence de système. Aucun usage sur nuit au bloc 5b : la carte perdrait sa raison d'être (unifier des fonds blancs) sur une surface sombre. */ [data-theme="nuit"] .lcdi-logocard { background: var(--surface-night-raised); border-color: var(--border-night); }