Refonte visuelle du site d'un élevage de bergers hollandais

Le site de l'élevage Berger Hollandais du Mont Brabant, à Entrecasteaux dans le Var, est en ligne depuis des années et s'adresse à deux visiteurs très différents : la famille qui cherche un chiot, et le conducteur de chien de travail venu lire des lignées, des titres et des résultats de tests de santé. La matière est solide — une archive de portées continue depuis 1995, les numéros LOF de chaque chiot, des liens de vérification vers la centrale canine. La forme la dessert. Le diagnostic mené sur le HTML servi en production relève un corps de texte à 14 px, sous le minimum de 16, des liens de la même couleur que le texte et donc reconnaissables au seul soulignement, aucun véritable titre de niveau 1 sur la page d'accueil — c'est un paragraphe portant un font-size de 36 px en ligne — et un mauve #9288C4 sur fond lilas #f9e7ff mesuré à 2,74:1, échec AA, précisément sur le paragraphe qui explique la politique de réservation.

Le site tourne sur IONOS MyWebsite, un éditeur en ligne posé sur un gabarit d'usine. Rien n'est migré, rien n'est reconstruit : on remplace la peau. L'éditeur expose deux zones, une pour la feuille de style et une pour le gabarit HTML, et c'est tout le périmètre — une seule feuille vaut pour l'ensemble des pages, sans build, sans préprocesseur, sans possibilité d'écrire un style par page. Surtout, personne ne sait quelles classes le CMS génère dans la zone de contenu, et aucune classe ne peut être ajoutée à ce que la propriétaire saisit. La feuille livrée ne s'appuie donc sur aucune classe : elle style des balises — titres, paragraphes, listes, liens, images, tableaux — en descendance des rares conteneurs connus, et couvre celles qu'aucune page consultée ne contient, parce qu'une balise non prévue apparaîtra nue. Les marqueurs par lesquels le CMS injecte le contenu, la navigation et le pied de page sont reconduits mot pour mot.

Le reste des partis pris tombe de là. La feuille n'appelle aucun domaine tiers : plus un seul GIF servi depuis le CDN du fournisseur, aucune police téléchargée, donc une typographie bâtie sur des piles de polices système vérifiées sur les cinq plateformes. Séparateurs, pointillés et fonds sont redessinés en CSS pur — bordures, dégradés linéaires, dégradés répétés — plutôt qu'en images. Aucune ligne de JavaScript n'est ajoutée : le CMS n'en fournit pas, et un menu repliable écrit sans script mentirait aux technologies d'assistance, faute de pouvoir tenir son état à jour. La navigation reste donc dépliée et lisible. Le gabarit d'origine était figé à 940 px ; la mise en page se replie désormais jusqu'à 360 px par simple empilement, sans défilement horizontal et sans rien masquer.

L'accessibilité est traitée comme un critère bloquant, pas comme une finition. Chaque paire de couleurs est mesurée et son ratio écrit dans la feuille, tout repère non textuel porteur d'information tient 3:1, le focus est visible sur tout élément interactif et les cibles tactiles font au moins 44 px. Le corps de texte ne descend plus sous le plancher de 16 px, la hiérarchie des titres est rétablie sur les niveaux que le contenu fournit réellement — sans jamais fabriquer en CSS un rang que le HTML n'a pas — et les couleurs codées en dur dans le contenu, dont le mauve en échec, sont neutralisées une par une, chaque neutralisation justifiée en commentaire. Une feuille d'impression complète accompagne le tout, puisque « Version imprimable » figure au pied de chaque page : fond blanc, navigation retirée, adresse des liens externes révélée pour qu'ils survivent au papier. Le point dur reste la navigation, avec un sous-menu de près de vingt-neuf entrées, presque toutes des portées, dans une colonne étroite. Cette longueur est l'argument de crédibilité de l'élevage, pas un encombrement : elle est composée comme un index, jamais repliée derrière une hauteur plafonnée ou un défilement interne.