9 juillet 2006

Panenka, Duverne, Gilardi, Chimbonda. Si ces mots vous disent quelque chose, préparez-vous à revivre une soirée que le football français n’a jamais vraiment digérée. Et comme un traumatisme ne vient jamais seul, on va aussi vous raconter comment ce drôle de programme a été fabriqué. Installez-vous en tribune, on vous ramène en 2006.

 

le temps d’une finale

Un soir de juillet 2006, la France retient son souffle devant sa télévision. Une finale de Coupe du monde. Le dernier match de Zidane. Et au bout de la nuit, une blessure collective qui tourne en boucle dans les têtes.

À l’approche de la Coupe du monde, et avec le retour de Zidane qui s’annonce, impossible de ne pas repenser à ce 9 juillet 2006. Alors, avec nos amis de L’Equipe explore, on a décidé de rouvrir le dossier, avec une création documentaire en 32 vidéos courtes et verticales, qui se parcourent comme une mémoire collective.

Le programme suit la finale minute après minute, mais déborde rapidement du terrain. Interviews, archives, animations, quiz, anecdotes, récits parallèles : chaque vidéo ouvre une nouvelle porte dans la mémoire du match.

Parce qu’un souvenir de football n’est jamais linéaire, le récit se recompose progressivement, parfois même de façon imprévisible. Aux souvenirs des joueurs s’ajoutent ceux du staff et des journalistes qui ont vécu cette soirée de l’intérieur. Ensemble, ils composent une mosaïque de points de vue qui permet de revisiter autrement l’un des matchs les plus célèbres et les plus douloureux du football français.

Si vous avez déjà vu le programme, la suite devrait vous intéresser. On va ouvrir le capot de la glacière de cette production hors norme.

Même en 2026, quand il s’agit de produire 32 vidéos et une interface de consultation sur mesure en 3 mois, le défi est costaud. Évidemment que c’est parce qu’on sait travailler en équipe qu’on va y arriver. 

Tout commence par un coup de fil d’Imanol C., Jean-Baptiste R. et Maxime M. de L’Équipe. Ils nous disent banco sur notre idée un peu folle : fabriquer un documentaire que les internautes pourraient explorer de manière complètement éclatée, non linéaire, disséminée partout… Mais aussi rassemblée dans un écrin pensé sur mesure, du cousu main !

On attaque. L’écriture, d’abord. C’est Christine T., journaliste grand reporter à L’Équipe, présente à l’Olympiastadion le fameux soir du coup de boule, qui va se charger de poser les premiers scripts. Avoir quelqu’un qui a vécu cette soirée de l’intérieur, qui en garde des souvenirs précis et incarnés, ça change tout. Deux journalistes d’Upian (Louise S. et Quentin R.) renforcent la squad pour aider, découper formater, rechercher et enrichir.

La suite, c’est le storyboard : on fouille dans les archives photos, vidéos, print, pour construire chaque séquence, image par image. Pour raconter ce Italie – France, il faut des visuels, de vraies archives, des Unes, avec tout ce qu’elles contiennent de détails oubliés, d’ambiances perdues et de seconds rôles.

Avec François G., rédacteur en chef photo de L’Équipe, on prend le temps et comme d’habitude son aide est précieuse : à force de fouiller on trouve des pépites. 

À la réalisation, c’est Thomas D. qui commence à constituer la première équipe chargée de poser la grammaire, la direction artistique ainsi que les bases d’un prototype technique. Au final, vous le verrez, le générique est long, c’est quasiment toute la boîte qui, d’une manière ou d’une autre, va contribuer en suivant les directives de Thomas. Il ne cesse de répéter : “un projet comme ça, c’est unique, donc on se marre s’il vous plaît ! Amusez-vous !” Ça peut paraître anecdotique mais en réalité ça ne l’est pas du tout. Rares sont les productions où on prend autant de plaisir à travailler tous ensemble, à casser les quelques silos qui existent dans les boîtes de taille intermédiaire comme la nôtre. 

Insistons sur l’esprit d’équipe dans le clan des graphistes et motion : Thomas D., Martin J., Camille B., Clara B., Daria D., Marion L., Mathilde H., Camille S., Clarisse A., Jérôme G., Camille RSD. : oui le compte est bon, ils et elles sont bien 11. 

Pour tenir une prod comme ça, la gestion de projet c’est le nerf de la guerre. Aux commandes de celle-ci, Baptiste D. qui dégaine des outils créés sur mesure et notamment son document de suivi pour coordonner tout le monde : qui fait quoi, quand, deadline, statut, titre, url des documents, des sources, de la musique, validations, etc. Il est important d’insister sur l’évolution de nos outils de gestion de production qui sont de plus en plus ouverts et qui sont 100% adaptés au programme qu’on produit, surtout quand ce même fichier doit servir aux journalistes, aux graphistes, aux motions et aux développeurs.

Depuis les premiers jours, on imagine en effet une interface de diffusion. C’est Antoine A. qui s’y colle avec une phase de prototypage ultra rapide. Est-ce que ce qu’on a dessiné sur une feuille de papier fonctionne ? Oui. On avance dans le récit d’un simple swipe vers le haut. La reproduction d’un format que tout le monde connaît, mais qu’on a voulu habiter différemment, avec du rythme, de l’humour, et avec l’ambition que chaque épisode donne envie de passer au suivant.

Le plan de jeu pour coder si bien et si vite

Le développement du site a été pensé comme un player vertical sur mesure capable d’enchaîner 32 séquences avec buffering prédictif, adaptation automatique à la qualité réseau, warming des séquences voisines et transitions temps réel sans rupture de lecture.

L’architecture Nuxt 4 et TypeScript a été entièrement optimisée autour de la performance média, avec une gestion très agressive du lazy-loading, de la mémoire vidéo et des contraintes spécifiques aux navigateurs mobiles ainsi qu’aux webviews applicatives. 

Une grande partie du développement a consisté à traquer les micro-latences, éviter les flashs noirs, maintenir l’autoplay mobile et préserver une sensation de fluidité constante malgré la densité du projet et des médias.

Pour absorber plusieurs centaines d’assets produits en quelques semaines, nous avons construit toute une pipeline automatisée pour gérer les modifications, basée sur Node : encodage multi-résolutions, compression, génération des posters et covers, versionning des médias, optimisation des livrables et packaging final du projet.

Le site fonctionne presque comme une petite plateforme vidéo dédiée, avec son propre système de gestion des médias, ses pipelines d’optimisation et une logique de diffusion pensée pour supporter médias, animations temps réel, scroll continu et interactions simultanées, sans jamais casser le rythme du récit.

Les animations et micro-interactions ont été développées sur mesure avec GSAP afin de conserver une sensation de continuité permanente entre les contenus, même dans les moments les plus chargés visuellement.

Derrière l’expérience visible, il y a toute une logique de fabrication : produire vite, itérer vite, tester vite et livrer vite sans jamais sacrifier la légèreté du rendu final.

Vous le voyez, on s’est bien marrés à refaire une expérience web fluide, légère, sans pre-roll ni astroturfing, sans influenceur, sans boutique et avec de la musique orchestrée par Grégoire T et Lucas G.

Voilà… Dans quelques jours, la Coupe du monde va débuter. Puis viendra le retour d’un certain Zidane.

Certaines histoires ne s’arrêtent jamais vraiment.