La Belle Restaurée Charte graphique verrouillée
VERSION 1.0 · 4 AOÛT 2026 · JUKEBOX EMB · L’ÉCHO DU MONT BRUN, LE CHÂBLE
Cette page est écrite dans la charte qu’elle décrit. Si elle est calme, lisible et immaculée, le système fonctionne. Chaque couleur, chaque fonte, chaque geste ci-dessous est verrouillé : les écrans de la maquette les appliquent sans les réinterpréter.
1 · Le concept
Le site est un Wurlitzer 1015 restauré avec amour, posé sous une lumière de galerie dans un café de montagne fermé pour la soirée. Deux registres stricts se partagent chaque écran, et ne se mélangent jamais.
La machine n’apparaît jamais entière. Le héros ne montre que la couronne, et chaque autre écran n’emprunte que deux de ses matières au maximum. La continuité avec le site actuel est délibérée : l’ivoire #f7f2e8, Fraunces, Space Mono et la fente à pièce survivent, simplement rechâssés dans le noyer et le chrome. Règle d’or : si un écran semble riche, retirer une matière avant de livrer.
Noyer book-matché, chrome miroir, catalin ambré. Le héros, le mur de plaques, le tableau des quinze, chaque interaction mécanique. C’est ici que la lumière vit, jamais derrière un paragraphe.
L’ivoire exact du site actuel, plat et calme, où les cinquante textes français se lisent comme un programme de concert. Ni grain, ni reflet, ni lueur : une feuille éclairée par le haut.
2 · Les couleurs
Ratios de contraste mesurés (WCAG 2.1). Sur papier, la cible est AA à 4.5:1 pour le texte courant ; sur nuit, le plancher absolu du texte secondaire est --creme-voilee.
Scène & bois
Papier & encre
Texte sur nuit et noyer
Chrome
Le chrome n’est jamais une couleur de texte : on grave dessus (--chrome-grave sur fond clair, ombre blanche 1px).
Catalin, la lumière signature
Les quatre répertoires
Populaire, Variété, Religieux, Autre : la classification officielle du client. Trois valeurs par répertoire : la base pour les filets 2px sur papier, la variante -txt pour tout texte sur papier, la variante -lit pour filets et pastilles sur nuit. Jamais d’aplat pleine surface.
filet sur papier · 4.1:1
5.8:1 sur papier · AA
6.4:1 sur nuit · AA
filet sur papier · 3.3:1
5.7:1 sur papier · AA
8.4:1 sur nuit · AA
filet sur papier · 5.9:1
5.9:1 sur papier · AA
8.3:1 sur nuit · AA
filet sur papier · 4.3:1
6.1:1 sur papier · AA
7.8:1 sur nuit · AA
3 · La typographie
Cinquante ans,
cinquante faces
Les chansons sont parfois liées par un destin commun. Dans les jours qui suivent, Barbara écrit « Une petite cantate ». Une véritable prouesse : elle mettra dans cette chanson d’à peine deux minutes tous ses thèmes privilégiés, la mémoire, les souvenirs, le passé, la perte et la douleur de l’absence. Une lettre à une défunte.
Insérez votre monnaie, choisissez les quinze chansons du jubilé.
Je vote pour celui-ci
2024-08 · A1 · 0:28
1978–2028 · FRANCS 05
4 · La plaque-chanson, démontée
Le cœur typographique du site. Un composant, trois tailles : la rangée de rack (×1), la légende de carte (×1) et le masthead de fiche (×1.4).
- Filets répertoire 2px, pleine largeur, haut et bas · couleur base var(--rep-populaire) · 100% d’opacité au survol
- Titre · Barlow Semi Condensed 600 · capitales · clamp(0.95rem, 1.6vw, 1.25rem) · interlettrage 0.045em · centré · deux lignes max, jamais tronqué
- Séparateur · filet 1px encre à 30% · interrompu au centre par un losange ◆ dans la couleur du répertoire
- Artiste · Hanken Grotesk 700 · capitales · 0.72rem · interlettrage 0.16em · variante -txt du répertoire (AA sur papier)
- Code · Space Mono 0.65rem · chrome ombre pleine opacité (AA) · bas gauche (au masthead : 0.75rem, haut gauche)
- Durée · Space Mono 0.65rem · bas droite
- Cotes · ratio ≈ 4.2:1 · padding 0.875rem 1.25rem · border-radius var(--r-plaque) 6px · fond .m-papier (la plaque est du papier)
5 · Les sept matières
Pure CSS et SVG, aucune texture bitmap. Seule incursion sombre de cette page : ailleurs, deux matières machine par écran au maximum.
Cabinet en noyer book-matché : fonds des sections machine, bande d’en-tête de fiche, socle du footer. La symétrie vient d’un ::after miroir, sans image.
Plaque chromée : lunette de la vitrine, plaque du compteur, badges gravés. Le chrome n’est jamais une couleur de texte ni un fond de bouton.
Filet chromé 1px : séparateurs pleine largeur sur nuit, souligné actif, règle du footer. Au scroll, il se dessine de gauche à droite.
Catalin lumineux : sélecteurs A–F, fente à pièce, badges de rang, chiffres du solde. État actif : la lueur 18px double, jamais la 48px.
Tube à bulles : deux tubes au héros, un au classement, deux par page au maximum. Les bulles n’existent que dans les tubes, jamais libres.
Verre de façade au-dessus des plaques et des cartes : reflet statique, balayage spéculaire de 700ms au survol. Survolez la tuile.
La recette la plus calme du site : ni grain, ni reflet, ni lueur.
Papier programme : toutes les surfaces de lecture et chaque plaque. Rien ne s’anime derrière un paragraphe, jamais.
6 · Le mouvement
Chaque animation correspond à un geste réel de la machine. Chaque geste rejoue au clic et applique exactement son fallback sous prefers-reduced-motion.
Pièce insérée (vote)
chute 450ms var(--ease-gravite) · flash 200ms · clunk 90ms · puis compteurs
la pièce fond en 150ms, compteurs instantanés.
Déroulement de la plaque
rotateX(-90° → 0) · 550ms var(--ease-sortie) · décalage 40ms par plaque
fondu croisé 250ms, sans rotation.
Sélection A-1 (survol)
translateY(-2px) 220ms ease-out · filets à 100% · halo 12px · verre 700ms
filets seulement, 150ms.
Le 45 tours se place
clip-path circle(0% → 75%) + rotation 20° · 500ms var(--ease-disque) · total ≤ 900ms
fondu direct 200ms vers la vidéo, sans clip ni bras.
Montée des bulles (ambiant)
translateY + scale(.8 → 1) · 6–11s · linéaire · infini · pause si onglet caché
supprimées entièrement.
Gels tournants (ambiant)
ambre → grenat → bleu nuit · cycle complet 45s · linéaire · jamais de violet
figés sur l’ambre.
Lever de rideau (scroll)
opacité + translateY(24px → 0) + brightness(1.15 → 1) · 600ms var(--ease-sortie) · enfants +50ms
opacité seule, 200ms.
Afficheur de solde (split-flap)
sortant rotateX 150ms var(--ease-volet-out) · entrant 200ms var(--ease-volet-in) · en-tête uniquement
échange instantané.
Odomètre de votes
pas de 1em · 300ms cubic-bezier(.3,.7,.4,1.05) · cascade 40ms depuis le poids fort
échange instantané, creux d’opacité 150ms.
Montée au classement (FLIP)
trajet FLIP 500ms var(--ease-sortie) · décalage 30ms · chauffe des badges 1–3 en 700ms
réordonnancement instantané, fondu des chiffres.
7 · Le budget kitsch
Dix règles de retenue. Elles priment sur toute envie d’en faire plus.
- La machine n’apparaît jamais entière : le héros ne montre que la couronne.
- La lecture est sacrée : rien ne s’anime derrière la prose, jamais.
- Budget lueur : deux éléments lumineux par viewport au maximum, flou plafonné à 64px, la lueur ne touche jamais le texte courant.
- Le chrome n’est pas une fonte : on grave dessus, on n’écrit pas en chrome.
- Les bulles n’existent que dans les tubes, jamais de particules libres.
- Les gels tournent en 45 secondes, jamais plus vite, jamais de violet.
- Chaque animation correspond à un geste réel de la machine : pièce, plaque, disque, volet.
- Le son est opt-in, défaut OFF, un clic discret de moins de 300ms.
- Les répertoires sont des filets, jamais des aplats pleine surface.
- Une matière en trop, une matière retirée : si un écran semble riche, on enlève avant de livrer.