Colophon
Comment ce site est fait.
Fabrication
Astro 7.3.5 en génération statique, HTML, CSS natif (propriétés personnalisées, aucun préprocesseur), TypeScript. La scène 3D de l’accueil est rendue en WebGL avec Three.js, les animations et le défilement fluide reposent sur GSAP et Lenis ; les trois démonstrations restent en canvas 2D et DOM, sans librairie, pour tourner sur une tablette d’exposition. Aucun script tiers : tout est servi depuis le site. Hébergé sur Cloudflare Pages, déployé à chaque commit sur la branche principale. Code des explorations sous licence MIT.
Le ciel d’étoiles de l’accueil place les 415 étoiles du catalogue sur la sphère céleste à leurs vraies coordonnées ; la planète, son halo et ses anneaux sont calculés dans des shaders, sans aucune texture. Sans WebGL ou sous mouvement réduit, un fond fixe prend leur place et rien ne bouge.
Mesures
Méthode : Lighthouse en ligne de commande, préréglage mobile, réseau 4G lent simulé, médiane de cinq exécutions, sur la version exacte qui est en ligne, juste avant sa publication. Le poids additionne, après compression Brotli, le HTML de l’accueil, ses feuilles de style, ses scripts et ses polices. Rapport complet : dernier audit.
| Relevé | Performance | Accessibilité | Bonnes pratiques | SEO | LCP | Poids | Commit |
|---|---|---|---|---|---|---|---|
| 24.09.2026 | 99 | 100 | 100 | 100 | 1,9 s | 110 ko | e351019 |
| Date | Performance | Accessibilité |
|---|---|---|
| 24.09.2026 | 99 | 100 |
| 24.09.2026 | 98 | 100 |
| 24.09.2026 | 99 | 100 |
| 24.09.2026 | 99 | 100 |
| 24.09.2026 | 99 | 100 |
| 24.09.2026 | 99 | 100 |
| 24.09.2026 | 99 | 100 |
Système
Le système de design du site, vivant : les mêmes fichiers servent la page que vous lisez. Une seule famille, une couleur d’accent, une grille de 8 px, des surfaces en verre sur fond noir. Rien de plus.
Couleurs
- Fond --bg · #050507
- Fond creusé (canvas) --bg-deep · #050507
- Surface --surface · #101014
- Surface 2 --surface-2 · #16161c
- Texte --text · #f2f2f5
- Texte secondaire --text-muted · #a4a4b0
- Étiquettes --text-faint · #8a8a96
- Accent --accent · #ff6b1f
- Accent survol --accent-hover · #ff8542
- Filet --border · #1d1d24
- Filet fort --border-strong · #33333c
- Bordure de composant --border-ui · #62626c
Contrastes calculés au build
| Premier plan | Fond | Ratio | Minimum |
|---|---|---|---|
| --text | --bg | 18,2:1 | 4.5:1 ✓ |
| --text | --surface | 17,0:1 | 4.5:1 ✓ |
| --text | --surface-2 | 16,1:1 | 4.5:1 ✓ |
| --text-muted | --bg | 8,3:1 | 4.5:1 ✓ |
| --text-muted | --surface | 7,7:1 | 4.5:1 ✓ |
| --text-muted | --surface-2 | 7,3:1 | 4.5:1 ✓ |
| --text-faint | --bg | 6,0:1 | 4.5:1 ✓ |
| --text-faint | --surface | 5,6:1 | 4.5:1 ✓ |
| --text-faint | --surface-2 | 5,3:1 | 4.5:1 ✓ |
| --accent | --bg | 7,2:1 | 4.5:1 ✓ |
| --accent | --surface | 6,7:1 | 4.5:1 ✓ |
| --accent | --surface-2 | 6,3:1 | 4.5:1 ✓ |
| --accent-hover | --bg | 8,4:1 | 4.5:1 ✓ |
| --accent-hover | --surface | 7,9:1 | 4.5:1 ✓ |
| --accent-hover | --surface-2 | 7,5:1 | 4.5:1 ✓ |
| --on-accent | --accent | 6,9:1 | 4.5:1 ✓ |
| --border-ui | --bg | 3,4:1 | 3:1 ✓ |
Règle de dosage de l’orange : moins de 3 % des pixels d’un écran, un seul élément orange en mouvement par écran, jamais en titre, fond, filet au repos, lueur ou dégradé.
Typographie
- --fs-hero
- clamp(2.75rem, 1.5rem + 4.6vw, 5.5rem) — Titre du hero, Satoshi 300, interlettrage −0,035 em
- --fs-h2
- clamp(2rem, 1.4rem + 2.4vw, 3.5rem) — Titres de scène, Satoshi 400, −0,02 em
- --fs-h3
- clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem) — Sous-titres, Satoshi 500
- --fs-lead
- clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem) — Chapôs, Satoshi 400
- --fs-body
- clamp(1rem, 0.96rem + 0.2vw, 1.125rem) — Corps, Satoshi 400, interligne 1,6, mesure 60ch
- --fs-small
- 0.875rem — Mentions
- --fs-label
- 0.75rem — Étiquettes en majuscules, Satoshi 500, 0,14 em
Espacements et rayons
- --s-1 · 4 px
- --s-2 · 8 px
- --s-3 · 12 px
- --s-4 · 16 px
- --s-5 · 24 px
- --s-6 · 32 px
- --s-7 · 48 px
- --s-8 · 64 px
- --s-9 · 96 px
- --s-10 · 128 px
- --s-11 · 192 px
--radius-1 2 px (boutons, champs) · --radius-2 4 px (cadres) · --radius-3 8 px (visuels). Pas de pill.
Composants
Un lien dans le texte et un lien d’action.
Pastille de disponibilité
Un accordéon natif
Ouvert au clavier sans script ; le signe « + » passe à l’orange quand il est ouvert.
Accessibilité
Vérifié à ce jour : navigation clavier complète, focus visible, contrastes calculés, mouvement réduit et contraste renforcé respectés, alternatives textuelles des canvas, minuteries désactivables. Reste à faire : tests avec lecteurs d’écran (VoiceOver, NVDA, TalkBack), zoom 200 % et 400 %, reflow 320 px, contraste élevé Windows, puis audit RGAA critère par critère. État détaillé et voies de recours dans la déclaration d’accessibilité.
Sources
Étoiles : Yale Bright Star Catalogue, 5e édition (Hoffleit & Warren, 1991), distribué par le CDS de Strasbourg (VizieR V/50) ; noms propres : Working Group on Star Names de l’Union astronomique internationale. Positions du Soleil et temps sidéral : Jean Meeus, Astronomical Algorithms, 2e éd. Constantes terrestres : GM = 3,986 004 418 × 1014 m³/s² (IERS), rayon moyen 6 371 km (NASA Earth Fact Sheet), altitude géostationnaire 35 786 km, jour sidéral 23 h 56 min 4 s. Planètes : NASA Planetary Fact Sheet (NSSDCA).
Précision annoncée du ciel : ± 1° (sans précession, réfraction ni nutation), vérifiée par des tests automatisés sur des invariants astronomiques (hauteur de la Polaire, passage de Véga au méridien, temps sidéral à J2000, déclinaison du Soleil aux solstices) et sur des instants de référence.
Typographie
Satoshi (Indian Type Foundry, licence Fontshare) en graisses 300, 400 et 500, pour les titres comme pour le texte. Auto-hébergée, sous-ensemble latin, métriques de secours ajustées par Astro pour un décalage de mise en page nul. Typographie française appliquée au build : espaces fines insécables avant ; : ! ? et dans les guillemets, apostrophes typographiques.
Vie privée
Décision consciente : pas de mesure d’audience, pas de script tiers, pas de cookie. Ce que le site sait de vous tient en une page : Confidentialité.
Décisions
- Pas de framework d’interface. Le HTML est rendu au build ; le TypeScript n’intervient que pour la scène 3D, les animations, les démonstrations et le menu. Chaque script est chargé par la page qui en a besoin, après le titre.
- WebGL pour l’accueil, canvas 2D pour les démonstrations. La scène 3D sert la première impression et suit le défilement ; elle se coupe hors écran, sous mouvement réduit et sur les appareils faibles. Les démonstrations, elles, doivent tourner sept jours sur sept sur une tablette d’exposition de cinq ans : canvas 2D, DOM, aucune librairie.
- L’IA a écrit une partie des lignes de ce site. J’ai spécifié, relu, testé et corrigé chacune d’elles. Les calculs astronomiques et physiques sont couverts par des tests automatisés qui tournent avant chaque mise en ligne.
- Les contrastes sont calculés, pas estimés. Chaque paire texte/fond est listée ci-dessus avec son ratio ; un script fait échouer le build sous 4,5:1 pour le texte et 3:1 pour les composants.
- Police auto-hébergée. Satoshi pour tout ; aucune requête vers un service tiers, préchargement des graisses utiles, métriques de secours ajustées pour un décalage de mise en page nul.
- Une seule couleur. L’orange n’apparaît que là où il guide : liseré de la planète, bouton principal, focus, liens au survol. Pas de mode clair, pas de dégradés de couleurs, pas de curseur personnalisé.