Bunfire

Ce que c’est

Un site de restaurant, complet : accueil, catégories, carte, avis, bandeau de réservation, FAQ, pied de page. Une seule page, un seul fichier HTML.

Le design reprend celui d’un template commercial dont seules les photos ont été conservées. Le code d’origine était minifié, truffé de styles en ligne et d’identifiants opaques — impossible d’y apprendre quoi que ce soit. Tout a été réécrit, bloc par bloc, avec un commentaire au-dessus de chacun.

C’est le plus abordable des deux templates : deux fois moins de code que Havenwatt, et les mêmes réflexes à l’intérieur. Commence par celui-là si tu débutes.

Ce que tu changes en premier

Les couleurs — six lignes

Tout en haut de assets/css/style.css :

--color-primary:       #1f4d3a;  /* vert forêt : panneaux, titres */
--color-primary-dark:  #14382a;  /* texte sur l’accent lime */
--color-accent:        #d7f25a;  /* lime : boutons, surbrillances */
--color-surface:       #f2f5ec;  /* fond de page */
--color-surface-light: #f7fbef;  /* texte sur panneaux sombres */
--color-ink:           #12211a;  /* texte courant */

Change l’accent lime pour n’importe quelle autre couleur vive : boutons, surbrillances et cercles de catégories suivent, sans rien toucher d’autre. C’est la règle du 60-30-10 du module « Direction visuelle », appliquée.

Le nom

Cherche « Bunfire » dans index.html — titre, en-tête, bandeaux défilants, avis, pied de page. Aucune classe CSS ne contient la marque, contrairement à l’export d’origine : un rechercher-remplacer ne peut rien casser.

Les polices

Trois rôles, trois variables : --font-heading, --font-body et --font-hand, la manuscrite des accents. Pour en changer, dépose les fichiers dans fonts/ et déclare-les au même endroit que les autres.

Les douze effets, et comment ils sont faits

Tous relevés un par un dans l’export d’origine — durées, courbes, décalages, angles — puis réécrits en CSS et JavaScript lisibles.

Ce qu’il faut savoir

• Aucune requête externe. Polices auto-hébergées, aucun CDN, aucun tracker. Rien ne part vers un tiers, donc rien à faire consentir.
• L’apparition au scroll ne peut pas masquer le contenu. L’état caché n’existe que si le JavaScript a tourné. C’est exactement le piège qui rendait une section invisible dans l’export d’origine.
• Zéro style et zéro script en ligne. Le template respecte la politique de sécurité stricte du site — ne dépose jamais l’export brut d’un outil visuel à côté sans revérifier ce point.
• Accessibilité : lien d’évitement, état du menu annoncé, focus visible, bandeaux décoratifs masqués aux lecteurs d’écran, FAQ native qui fonctionne sans JavaScript, animations coupées si le système le demande.
• Responsive vérifié à 390 px, sans débordement horizontal.

Ce qui n’est pas parfait

Autant le dire ici plutôt que te le laisser découvrir.