Logos
Le bandeau des clients qui défile, le logo dans sa case, et le nom qui tient lieu de logo.
Le bandeau
Une case par client, sous une étiquette (sauf sur la page Réalisations), sur une rangée qui défile lentement de droite à gauche, en boucle. C’est un carrousel depuis le 12 octobre, à la demande de JB. Sur l’accueil, il suit l’ouverture, juste sous la démonstration des offres, et sa section n’a pas de marge haute ni basse.
- Emploi
- Les clients qui ont confié un projet, nommés : ceux de V3.logos.ordre, dans leur ordre, puis les cas qui ont l’accord du client et un logo.
- Moment
- Une fois sous l’ouverture de l’accueil, avec son étiquette ; une fois sous l’en-tête de la page Réalisations, sans étiquette, dans l’ordre du mur et avec ses badges (voir Page Réalisations).
- Jamais
- Avec un nom qui n’a pas donné son accord. En mouvement quand le lecteur a demandé le mouvement réduit : la rangée s’arrête, et se fait défiler à la main.
Ils nous ont confié leur projet
-
-
-
-
- Renault
-
-
-
-
Appelsrc/components/trame/Logos.astro
<Section classe="tr-logos" titreId="logos-spec">
<Logos noms={V3.logos.ordre} etiquette={V3.logos.libelle} id="logos-spec" />
</Section>
<!-- completer={false} : la liste noms seule, sans les cas ajoutés. -->| Classe | Zone | Valeur |
|---|---|---|
| .tr-logos > .tr-in | la section | padding haut et bas à 0 : le cadre touche la ligne de section |
| h2.tr-etq | l’étiquette | Inter 600 11 px, capitales, .14em, vert profond sur fond pâle, bord vert ; dans .tr-logos : marge 22 px clamp(20px, 3vw, 48px) 16 px |
| .tr-logos__cadre | le cadre | un trait pointillé en haut et un en bas (--th, 100 % × 1 px), nets d’un bord à l’autre : le masque est sur la fenêtre, pas sur le cadre ; data-reveal="fade", le bandeau apparaît en fondu ; sur la page Réalisations, juste au-dessus de la grille des cas, le trait du bas tombe et la ligne de cette section le remplace (.tr-logos:has(+ .tr-cases-sec)) |
| .tr-logos__defile | la fenêtre | flex, overflow hidden ; masque horizontal, transparent aux bords, plein de 6 % à 94 % : les cases s’effacent à gauche et à droite (sans étiquette, le fondu de droite laisse la place au bouton pause : voir la prop etiquette) ; --n, le nombre de cases, posé par le composant |
| .tr-logos__piste | une piste | une liste flex, sans retrait ni puce ; deux pistes identiques, la seconde aria-hidden, ses images à alt vide : la liste ne se lit qu’une fois |
| tr-defile | le défilement | translateX de 0 à -100 %, une largeur de piste, en calc(var(--n) × 5 s), linéaire, infini ; les deux pistes glissent ensemble et la seconde prend la place de la première : la boucle ne se voit pas ; 9 cases sur l’accueil, un tour en 45 s |
| :hover, :focus-within | l’arrêt | sur .tr-logos__defile : animation-play-state paused, les deux pistes s’arrêtent ; les cases ne portent ni lien ni tabindex : au clavier et au doigt, c’est le bouton pause qui arrête la rangée |
| .tr-logos__pause | le bouton pause | dans .tr-logos__tete, à droite de l’étiquette (sans étiquette, seul au bout du bandeau), 44 × 44 px, encre troisième (encre au survol) ; caché sans script (attribut hidden, ôté par trame.ts, partie 8) et en mouvement réduit ; un clic pose .is-pause sur .tr-logos__cadre (animation-play-state paused), bascule aria-pressed et le libellé « Mettre en pause » / « Relancer le défilement des logos » ; l’icône passe des deux barres au triangle |
| .tr-logos__piste li | la case | clamp(170px, 15vw, 230px) de large, 88 px de haut au moins, padding 12 px 16 px, contenu centré ; un trait pointillé à droite (--tv) ; Outfit 700 clamp(16px, 1.4vw, 20px) / 1.15, -.01em, encre |
| .tr-logos__nom | le nom seul | opacité .72, transition 200 ms ; sans transition en mouvement réduit |
| .tr-logos__piste li:hover | au survol | la case prend le fond pâle et le nom ou le logo passe à l’opacité 1, en 200 ms (var(--fast)) |
| mouvement réduit | immobile | animation none ; la piste muette est masquée (display none) ; la fenêtre perd son masque et défile à la main (overflow-x auto) |
| completer | la prop | vraie par défaut : ajoute aux noms les cas de la collection realisations qui ont accordClient, ne sont pas masqués et ont un logo, dans leur ordre, s’ils n’y sont pas déjà (comparés par slug) ; false : les noms seuls |
| etiquette | la prop | le titre du bandeau, en h2.tr-etq (V3.logos.libelle sur l’accueil) ; sans elle (page Réalisations), pas de titre : .tr-logos__tete--seul pose le bouton pause au bout du bandeau, et les logos s’effacent avant lui |
| badge | la prop | le mot du badge (P.realisations.badge, page Réalisations) : un .tr-badge dans le coin haut droit des cases dont le cas a sa page (page, accord du client, pas de masque), qui prennent la classe .tr-logos__cas (position relative) ; sans elle (l’accueil), aucun badge ; les valeurs du badge sont dans Page Réalisations |
| chargement | la prop | eager par défaut ; lazy possible, qu’aucune page ne passe : sur l’accueil comme sur la page Réalisations, le bandeau est près du haut |
Le bandeau de la page Réalisations, sans étiquette, dans l’ordre du mur et avec ses badges : voir Page Réalisations.
Le fichier, sinon le nom
Le composant cherche public/assets/logos/clients/<slug>.png au moment de la construction (logoClient, dans src/data/logos.ts) : le slug est l’identifiant du cas, ou le nom en minuscules sans accents ni apostrophe. S’il existe, l’image s’affiche avec le nom pour alternative ; sinon le nom, en Outfit, tient lieu de logo, et personne ne confond la case avec un logo absent.
| Slug | Client | État | Où il sert |
|---|---|---|---|
| bosco-services | Bosco Services | affiché | bandeau, cartes de l’accueil, carte et mur de la page Réalisations, preuves d’une page d’offre, en-tête et citation de sa page de cas |
| builders | Builders | affiché | bandeau, carte et mur de la page Réalisations, en-tête et citation de sa page de cas ; original de 151 px de haut, à redemander |
| cathedrale-de-nantes | Cathédrale de Nantes | affiché | bandeau, cartes de l’accueil, carte et mur de la page Réalisations, preuves d’une page d’offre, en-tête et citation de sa page de cas |
| clotilde-davenne | Clotilde Davenne | affiché | bandeau, cartes de l’accueil, carte et mur de la page Réalisations, preuves d’une page d’offre, en-tête et citation de sa page de cas |
| ie-architecture | IE Architecture | affiché | bandeau, cartes de l’accueil, carte et mur de la page Réalisations, preuves d’une page d’offre |
| la-grande-table | La Grande Table | affiché | bandeau, carte et mur de la page Réalisations, preuves d’une page d’offre, en-tête et citation de sa page de cas ; original de 100 px de haut, à redemander |
| mes-jardiniers | Mes Jardiniers | affiché | bandeau, cartes de l’accueil, carte et mur de la page Réalisations, preuves d’une page d’offre, en-tête et citation de sa page de cas |
| peppsy | PepPsy | affiché | bandeau, cartes de l’accueil, carte et mur de la page Réalisations, preuves d’une page d’offre, en-tête et citation de sa page de cas |
Dans le bandeau, il manque encore : Renault (renault). Leur nom reste en Outfit tant que le fichier n’est pas produit. Un logo reçu sans emplacement (ni cas, ni case du bandeau) n’est pas publié : son original attend dans le dossier projet, sous originaux/sans-emplacement/.
La préparation
| Quoi | Comment | Où |
|---|---|---|
| L’original | tel que reçu du client, nommé par le slug, hors du dépôt | dossier projet, docs/logos/clients/originaux/ |
| Le script | node scripts/logos-clients.mjs <dossier des originaux> [--couleur <dossier>] : l’original est redressé et posé sur blanc ; le fond est ce qui reste sous un taux d’encre de .14 (1 − min(R, V, B)) ; le logo est rogné, mis à 160 px de haut au plus, jamais agrandi ; un fond teinté ou sombre, un fichier illisible, un format inconnu ou un slug en double sont signalés et ignorés | scripts/logos-clients.mjs |
| L’encre | <slug>.png, noir sur transparent ; la densité est étalée pour que l’aplat du logo (la médiane des densités d’au moins .5) soit noir plein : même encre pour tous les logos, quelle que soit leur couleur, sans compter le liseré plus foncé que laissent certaines compressions ; Mes Jardiniers suit la luminance, pour que ses arcs jaunes restent visibles dans le carré vert (LUMINANCE dans le script) | public/assets/logos/clients/ |
| La couleur | <slug>-couleur.webp, alpha = taux d’encre, couleurs dé-prémultipliées : composée sur blanc, elle rend l’original ; produite seulement avec --couleur | hors du dépôt, docs/logos/clients/web/ du dossier projet ; aucune page ne l’emploie |
| L’accord | un logo ne se publie qu’avec l’accord du client, comme une photo : les cartes et la page de cas ne le montrent que si accordClient est vrai | la notice DEPOSER-ICI.md du dossier |
Les hauteurs
| Classe | Zone | Valeur |
|---|---|---|
| .tr-logos__piste li img | le bandeau | clamp(28px, 2.6vw, 40px) de haut × --echelle, largeur auto, 160 px au plus, object-fit contain, opacité .9 (1 au survol, en 200 ms) ; 12 px de padding vertical dans la case : un logo à l’échelle 1.5 (60 px) tient dans les 88 px ; chargement eager, sur les deux pages |
| --echelle | le facteur d’un logo | ECHELLES dans src/data/logos.ts : un logo haut ou un sigle carré paraît petit à hauteur égale ; Cathédrale de Nantes 1.5, IE Architecture 1.35, La Grande Table 1.3, Bosco 1.25, Builders 0.9 (très large et très gras), les autres 1 ; posé en style sur l’image, lu par chaque règle de hauteur de ce tableau |
| .tr-cas__logo | la carte de cas | 22 px de haut × --echelle, 96 px au plus, à droite de l’étiquette dans .tr-cas__tete (34 px de haut au moins, pour aligner les titres d’une rangée ; passe à la ligne si l’étiquette est longue) ; alt vide, le titre porte déjà le nom ; lazy ; c’est la carte Cas de l’accueil et des pages d’offre |
| .tr-cc__logo | la carte d’un cas, page Réalisations | 30 px de haut × --echelle, 58 % de la tête et 170 px au plus, calé à gauche ; alt : le nom du client, qui nomme aussi le lien de la carte ; eager pour les deux premières cartes, lazy ensuite |
| .tr-murl__corps img | le mur des clients, page Réalisations | clamp(26px, 2.2vw, 32px) × --echelle, 130 px au plus, opacité .9 (1 au survol d’une case qui mène au cas) ; alt : le nom du client ; lazy |
| .tr-page__logo | l’en-tête de la page de cas | 36 px de haut × --echelle (45 px pour Bosco), 200 px au plus, opacité .9, entre le fil d’Ariane et le titre (19 px au-dessus, 18 px dessous), dans un span.tr-page__marque qui porte l’apparition ; alt vide |
| .tr-citation__logo | la citation de la page de cas | 24 px de haut × --echelle, 150 px au plus, opacité .9 ; alt vide tant que la citation est en réserve, le nom du client quand elle est signée |
| .tr-dire__logo--img | le mur de citations | 28 px de haut × --echelle, 132 px au plus, opacité .85, à la place de la réserve quand la fiche du verbatim nomme un client (champ client, null aujourd’hui) ; un client nommé sans fichier s’écrit en toutes lettres (.tr-dire__logo--nom) ; la tête de carte fait 42 px dans tous les cas |
L’ordre
V3.logos.ordre range les entreprises à taille de PME d’abord, puis les grands noms. C’est le commentaire posé dans accueil-v3.ts : la page parle aux TPE et aux PME, et la première case doit leur ressembler. Les cas que le composant ajoute suivent, dans l’ordre de leur fiche. Sur la page Réalisations, le bandeau prend l’ordre du mur : les cas qui ont leur page, puis les autres clients.
| Rang | Nom | Source |
|---|---|---|
| 01 | Clotilde Davenne | V3.logos.ordre ; dans LOGOS (marque.ts) |
| 02 | Builders | V3.logos.ordre ; dans LOGOS (marque.ts) |
| 03 | PepPsy | V3.logos.ordre ; dans LOGOS (marque.ts) |
| 04 | Cathédrale de Nantes | V3.logos.ordre ; dans LOGOS (marque.ts) |
| 05 | Renault | V3.logos.ordre ; dans LOGOS (marque.ts) |
| 06 | Bosco Services | ajouté par le composant : un cas avec accord et logo |
| 07 | La Grande Table | ajouté par le composant : un cas avec accord et logo |
| 08 | Mes Jardiniers | ajouté par le composant : un cas avec accord et logo |
| 09 | IE Architecture | ajouté par le composant : un cas avec accord et logo |
- Clotilde Davenne
- Builders
- PepPsy
- Cathédrale de Nantes
- Renault
- RENAULT
- CATHÉDRALE DE NANTES
- PEPPSY
- CLOTILDE DAVENNE
- BUILDERS
Ce qui est écarté
Le bandeau défilant du site précédent (Marquee.astro, encore visible sur l’accueil précédent) : la liste dupliquée par le script, une bande qui glisse en 44 secondes, en boucle, les noms en Inter 600 13 px et en capitales, et une pause au survol.
Le défilement revient le 12 octobre, à la demande de JB, mais pas le Marquee. La liste n’est plus dupliquée par un script : le composant pose deux pistes, et tout le mouvement tient dans la feuille. Les capitales en Inter 13 px laissent la place au logo à l’encre ou au nom en Outfit, chacun dans sa case de la trame. La rangée s’arrête au survol, et ne bouge pas en mouvement réduit ; la feuille prévoit aussi l’arrêt au focus, mais rien dans le bandeau ne le prend. La lumière qui passait d’une case à l’autre, quand la rangée était immobile, est retirée (trame.ts, partie 8).
| Classe | Site précédent | Trame |
|---|---|---|
| .marq__track | translateX de 0 à -50 % en 44 s, linéaire, infini ; arrêté en mouvement réduit | .tr-logos__piste : deux pistes, translateX de 0 à -100 % en 5 s par case (45 s pour les 9 de l’accueil), linéaire, infini ; immobile en mouvement réduit, et défilable à la main |
| la copie | la liste dupliquée par le script, au chargement | la seconde piste posée par le composant, à la construction ; aria-hidden, images à alt vide |
| .marq__item | Inter 600 13 px, .07em, ink-3, capitales par le composant | une case de clamp(170px, 15vw, 230px) ; Outfit 700 clamp(16px, 1.4vw, 20px), casse normale, encre à .72 ; ou le logo à l’encre, à .9 |
| .marq:hover | pause du défilement | pause au survol (la règle vise aussi le focus, que rien ne prend) ; la case passe au fond pâle, le nom ou le logo à l’opacité 1 |
RègleUne case par client, le logo à l’encre quand le fichier existe, son nom en Outfit sinon, les PME d’abord ; la rangée défile lentement, s’arrête sous le pointeur, et ne bouge pas en mouvement réduit.