Diables Rouges —
le Mondial 2026,
en direct.
Un dossier qui vit au rythme du Mondial.
Pour la Coupe du Monde 2026, La Libre voulait plus qu'une page d'articles : un hub vivant qui suit la Belgique match après match. Le fil des rencontres et les scores en direct, le parcours des Diables vers la finale, les 26 joueurs de Rudi Garcia, les chiffres belges et votre 11 type à composer.
Ma mission : direction artistique, design et développement front-end du dossier, plus toute la plomberie côté serveur (live, flux d'articles, votes, compteur). Un dossier pensé pour être consulté dix fois par jour pendant un mois.
L'ambiance d'un stade, de nuit.
Interface sombre comme une tribune un soir de match, liseré tricolore en fil conducteur, et une idée un peu folle au centre : présenter les 26 joueurs comme des cartes FUT dorées, à la façon des jeux vidéo de foot, avec ouverture de pack et statistiques au dos.
« Le hero à colonnes, la capsule de faits et le fil du match suivent la grille suisse reprise de DH Les Sports+ : le dossier parle foot, mais reste un objet éditorial. »
Un thème clair complet répond au sombre via prefers-color-scheme,
en basculant les tokens de couleur sans dupliquer le CSS.
Noir stade, rouge Diables, or FUT.
Le rouge, évidemment : celui des Diables, qui est aussi celui de La Libre. Autour de lui, un noir profond de pelouse nocturne, l'or des cartes de joueurs, le jaune du drapeau et un vert gazon pour les états positifs (victoire, live).
Deux voix : le speaker et le journaliste.
Deux polices seulement, aux rôles très tranchés.
Anton
Titres, scores, chiffres : condensée, massive, elle crie les scores comme un speaker de stade.
Manrope
Corps, interface, légendes : moderne et très lisible, elle ramène le calme autour des gros titres.
Un dossier vivant, sans framework.
Tout en vanilla JS côté client, avec une petite couche PHP maison côté serveur.
Le live des matchs
Un script PHP interroge les données de match et écrit un live.json que le front vient lire à intervalle régulier. Scores, buteurs et statut de la rencontre se mettent à jour sans recharger la page, et le fil du Mondial s'alimente via des flux RSS maison.
Les cartes FUT & le 11 type
Chaque joueur est une carte dorée générée depuis un simple data.js : stats, poste, club. Les lecteurs composent leur 11 type et votent, un vote.php agrège le tout côté serveur. Effet pack opening compris.
Un embed pour la rédaction
Le widget de match existe aussi en version embarquable (iframe) pour les articles du site : plusieurs formats d'affichage, du bandeau 1120×200 au bloc 600×400, alimentés par les mêmes données.
Le dossier, par les chiffres.
Fréquentation mesurée par un compteur maison : un hit.php de
quelques lignes qui écrit dans un JSON. Pas de régie, pas de cookie tiers,
aucune donnée personnelle. Oui, c'est du tracking artisanal, et c'est assumé.
Le passage secret vers le Portugal.
Comme sur ce portfolio, le dossier cache un code Konami : ↑ ↑ ↓ ↓ ← → ← → B A. La séquence ouvre une page Portugal cachée, clin d'œil à mes origines, habillée d'un fond animé ShaderGradient (waterPlane) chargé en lazy pour ne rien coûter aux visiteurs qui ne trouvent pas le passage.
Ce que ce projet a changé.
Diables 2026 est mon premier dossier réellement live : les données bougent toutes les minutes, la page reste ouverte des heures dans les onglets. Ça oblige à penser rafraîchissement, états intermédiaires et sobriété des requêtes dès le design. Le duo dossier + embed est depuis devenu un standard maison, réutilisé sur le Tour de France 2026.