Un site peint en couches, que l'association tient elle-même.

Ce que la phrase voulait dire

Le référencement était, pour l'association, le seul actif à ne pas casser. Tout le reste pouvait bouger, à une condition : que les personnes qui tiennent l'association, des apiculteurs amateurs, puissent continuer à s'en servir sans aide.

Voici ce qu'il y avait avant.

Joomla, une météo figée en janvier 2019, un formulaire à captcha. Rien n'en a été repris : les images n'étaient même pas celles que l'association avait fournies.

Ce qui a été construit

Tout a été construit en double, pour qu'ils choisissent

L'association est un bureau d'apiculteurs amateurs. Leur demander « quelle direction artistique préférez-vous ? » sur un texte n'aurait rien donné. Alors à chaque décision, au lieu d'une proposition, j'en ai construit deux ou trois, complètes et regardables sur un écran. Ils tranchaient, et le feu vert ouvrait deux ou trois nouvelles branches en dessous.

Les dix-neuf jours du chantier ne sont pas dix-neuf jours de code : c'est le temps de descendre cet arbre, une décision après l'autre.

Une scène peinte, découpée en plans

Le hero est une seule scène : un cadre de ruche tenu à contre-jour, ses alvéoles qui s'éclairent par transparence, une prairie floue derrière. Deux images ont été générées sous un même contrat de style (planche naturaliste, gouache et aquarelle, palette cire, sépia et vert prairie, jamais de rendu 3D), puis découpées en local : le master devient un ciel et une scène trouée, la planche d'accents devient des fleurs et des abeilles détourées.

Les alvéoles lumineuses sont un trou dans la scène. Le ciel se voit au travers et bouge plus qu'elle : c'est ce décalage qui donne la profondeur.

Un script cherche dans le master les pixels de lumière (rouge moins bleu au-dessus de 112, luminosité au-dessus de 132), les évide, et fond la frontière sur quatorze pixels, parce qu'un halo n'a pas de silhouette. Les abeilles de la planche ont eu leur propre recette : le trait d'encre est protégé, la membrane des ailes est entièrement évidée. Des ailes de verre, qui ne dénotent plus sur le fond sombre.

Les deux images sont posées l'une sur l'autre. Le bouton les écarte.

1 · ciel

2 · scène trouée

3 · accents

4 · abeille au fil

Écarter les couches→

Le pointeur déplace chaque plan à sa vitesse

À l'arrivée, la scène dézoome de 1,65 à 1 en 2,5 secondes, le ciel de 1,42 à 1,06, plus lentement : on entre dans la lumière. Le titre s'encre à 1,5 seconde, de la cire pâle à l'encre chaude ; les fiches montent à 2,8 secondes, l'une après l'autre. Aucune de ces courbes ne rebondit : deux easings pour tout le site, et une horloge pilotée image par image plutôt que par des minuteries, parce que le décodage des grandes images affame le fil principal.

L'abeille au fil est un WebP animé à fond transparent, 400 pixels de côté. Le couple WebM VP9 alpha et MOV HEVC servait un carré noir sur Safari, et demandait un clic sur iOS. Comme sur le site, elle descend la page avec le lecteur, change de côté et passe en flou de profondeur quand elle traverse une colonne de texte.

Une police pour un seul titre

Le titre du site est composé dans Arverna, une police dessinée à partir de la photo du nom d'une maison basque, tel qu'il est posé en lettres pleines sur sa façade. Les lettres de l'enseigne ont été vectorisées, les lettres manquantes complétées d'après un alphabet de référence, et l'ensemble assemblé en une fonte de 80 glyphes : capitales seules, chiffres, capitales accentuées, ponctuation, un ornement floral sur le point médian. Elle pèse 16 Ko et ne sert qu'au titre du hero.

• Arvernale titre du hero, et rien d'autre
• Frauncesla marque, les titres, les fiches, la signature géante du pied
• Schibsted Groteskle corps, la navigation, les boutons, les formulaires
• JetBrains Monoles libellés, les dates, les flèches des boutons

Newsreader, la serif de lecture des sous-titres et des chapôs, n'est pas chargée sur cette page : Fraunces la remplace dans la scène.

Les images, et ce qu'elles sont

Aucune image du site n'est une photo de terrain. Toutes sont peintes ou générées sous le même contrat de style, et la fiche de chacune le dit, sur le site comme ici.

Le mobile, étudié à part

La planche est en 16:9 ; l'écran du téléphone est vertical. Où vit le texte ? Trois compositions ont été maquettées dans des cadres de téléphone, avec la vraie typo et la vraie copie. L'immersion a été retenue : plein écran, un voile chaud en bas pour la lisibilité, et une planche bakée à plat, ciel et scène composités sans trou, 73 Ko au lieu des couches.

Le site se tient à jour sans mot de passe

Le bureau saisit son adresse e-mail et reçoit un lien signé, valable quinze minutes. Le clic ouvre une session de huit heures. Rien n'est stocké : la liste des adresses autorisées est la seule chose à protéger, et retirer une adresse coupe aussitôt ses liens et ses sessions.

Enregistrer l'agenda, c'est écrire un commit. L'application dépose le fichier content/agenda.json dans le dépôt par l'API GitHub, avec une identité d'application limitée à ce seul dépôt ; Vercel redéploie le site à chaque commit. Le message est toujours de la même forme : « agenda: 3 actif(s), 0 archivé(s) (via l'admin) ». La liste des accès et le routage des messages du formulaire passent par le même chemin.

Une fois par mois, le 1^er à 8 h, GitHub relit le contenu avec quatre contrôles : les notes « vérifié le » de plus d'un an, les cases légales encore vides, les événements passés, les liens externes morts. S'il y a quelque chose, il ouvre une fiche et l'assigne ; un seul e-mail part, la première fois. Sinon il se tait, et ferme la fiche précédente.

Les fonctionnalités à venir

• L'entrée dans l'index. Le site attend que l'association réserve son nom de domaine ; il vit en attendant sur une adresse provisoire, volontairement hors index. Le jour venu, c'est une ligne à retirer.
• Les articles. Le bureau tient déjà l'agenda, les accès et le routage des messages ; la publication d'articles est décrite dans les documents de passation, prête à être construite.
• L'adhésion payée en ligne. Aujourd'hui la demande arrive par le formulaire et le bureau valide. Le paiement viendra se poser sur ce même circuit.

Le résultat

« Bien référencé mais super vieux » est devenu : 5 jours du premier fichier au site en ligne, 19 jours jusqu'à la passation (le temps de descendre l'arbre des choix, deux ou trois branches construites à chaque étage), et un livret remis au bureau. L'association a la main sur son agenda, sans mot de passe. Il reste une ligne à retirer le jour où le domaine sera réservé.

1. 12 juin 2026Premier commit

   111 fichiers : cinq directions artistiques construites en entier, pour que l'association tranche sur pièces. La ruche à contre-jour l'emporte.

2. 17 juin 2026En ligne

   La direction retenue prend la racine de l'adresse de production, hors index.

3. 1^er juillet 2026Passation

   Livret PDF remis au bureau : l'espace de gestion, le domaine à réserver, la sortie du noindex.