Tour de France —
la Grande Boucle,
étape par étape.
La Grande Boucle, étape par étape.
Pour le Tour 2026, l'idée était simple à dire et longue à faire : une carte de France où le parcours se dessine sous vos yeux, 21 étapes à explorer une à une, les cols au bon kilomètre et de vrais profils d'altitude. Un dossier de référence à garder ouvert pendant trois semaines de course.
Ma mission : direction artistique, design, développement front-end et toute la préparation des données (tracés, cols, classements, favoris).
Le maillot jaune comme fil conducteur.
Un fond papier crème, une carte épurée et un contour jaune maillot qui détoure la France et la Catalogne (sans la Corse : la course n'y passe pas). Chaque étape se lit d'un coup d'œil : point A au départ, B à l'arrivée, numéro au milieu du tracé.
« Carte et timeline sont liées dans les deux sens : cliquer une étape recentre la carte, survoler le tracé allume la card correspondante. »
Les cards d'étape se retournent sur un profil d'altitude interactif, où les cols apparaissent avec leur catégorie. Thème clair par défaut, sombre en option.
Jaune maillot, rouge flamme, vert plaine.
La palette vient du vocabulaire du Tour lui-même : le jaune du leader pour le chrono et le tracé, le rouge de la flamme rouge et de la montagne, le vert des étapes de plaine, l'ardoise des étapes accidentées. Le tout posé sur un papier crème d'almanach sportif.
Trois voix, toutes auto-hébergées.
Trois polices, zéro appel à un CDN externe : tout est servi depuis le dossier.
Oswald
Titres & étapes : condensée comme les affiches de course d'époque.
Average Sans
Corps de texte : discrète et confortable pour la lecture longue.
Inconsolata
Chronos, distances, données : la mono des chiffres, comme un tableau de bord.
De la donnée brute au voyage.
Vanilla JS, HTML et CSS séparés, et beaucoup de travail sur la donnée.
La carte aux tracés réels
Leaflet et tuiles CARTO (jamais Mapbox). Les 21 étapes proviennent des fichiers GPX officiels A.S.O., simplifiés à la volée pour rester légers, avec le tracé qui se dessine au chargement de la page.
71 cols au bon kilomètre
Chaque card d'étape se retourne sur un profil d'altitude interactif. Les 71 cols nommés, extraits des infographies officielles, apparaissent au bon kilomètre avec leur catégorie. Un clic, et le col surgit sur la carte.
Des données vérifiées à la source
Classement 2025, équipes officielles, favoris, cols : tout est vérifié à la source avant d'entrer dans le dossier. Les articles arrivent via un flux maison, et l'ensemble tourne sans framework, HTML, CSS et JS séparés.
Un assistant Mistral, en avant-première.
Le dossier embarque un bloc « IA La Libre » en version beta : posez votre question sur le Tour 2026 (l'étape la plus dure, les cols hors catégorie, les Belges à suivre, la signification des maillots) et l'assistant répond en citant ses sources, issues du groupe IPM, de Wikipedia et des données officielles.
« Chaque réponse cite ses sources, et les questions des lecteurs ne sont pas conservées. Une IA peut se tromper : le bloc invite à recouper toute info pratique. »
Sous le capot : Mistral, hébergé en Europe, avec la clé API protégée côté serveur derrière un proxy PHP. Les réponses sont ancrées sur un corpus défini plutôt que laissées en roue libre. L'assistant est en rodage dans l'atelier caché du dossier, avant d'éventuellement rejoindre la page principale.
Le dossier, par les chiffres.
Ici aussi, fréquentation mesurée par le compteur maison en PHP : un hit, un JSON, zéro cookie tiers. Du tracking artisanal, assumé.
21 virages plus loin.
Le code Konami ↑ ↑ ↓ ↓ ← → ← → B A ouvre l'atelier caché du dossier : les coulisses de fabrication, le Tour en chiffres fous (12 millions de spectateurs, 7 tonnes de saucisson) et les légendes de la Grande Boucle, du Canari de 1919 à la pause bière de 1935. Page non indexée, juste pour les curieux.
Ce que ce projet a changé.
Le Tour 2026 m'a appris à traiter la cartographie comme de l'éditorial : un tracé GPX raconte une histoire si on le simplifie, le rythme et le met en scène. C'est aussi mon premier terrain d'essai public pour un assistant IA sourcé, testé à l'abri dans l'atelier avant d'éventuellement rejoindre le dossier principal.