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.

L'ancien site tournait sous Joomla, avec des erreurs PHP visibles et une météo figée en janvier 2019. Quatre entrées de menu, quatre PDF de bulletins d'adhésion, un formulaire à captcha, deux GIF d'abeille en guise d'images. Le texte d'accueil tenait en trois phrases. Rien n'en a été repris : les images n'étaient pas celles que l'association avait fournies.

Ce qui a été construit

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, en haut à droite, est une vidéo de quatre secondes à fond transparent, 400 pixels de côté : VP9 alpha pour Chrome et Firefox (364 Ko), HEVC alpha pour Safari. 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 ; ici, elle vole sur place.

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 écrit 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

Une seule image ne vient pas de l'atelier : une abeille sur une branche de pin, remise par l'association le 9 juin 2026, trois jours avant le premier fichier. Les autres sont peintes ou générées, et la fiche de chaque image le dit.

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.

Ce que le site ne fait pas encore

• Il n'est pas indexé. Le nom de domaine de l'association n'est pas réservé ; en attendant, l'adresse est un sous-domaine provisoire, hors index. La sortie du noindex tient en une ligne.
• Il ne publie pas d'articles. La brique est décrite dans les documents, elle n'est pas construite : le bureau modifie l'agenda, la liste des accès et le routage des messages.
• Il n'encaisse pas les adhésions. La demande passe par le formulaire et le bureau valide ; le paiement en ligne reste une brique à venir.

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, 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 pour choisir : la planche à 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.