Site de fleuriste

Une vitrine pour un fleuriste indépendant, qui met en valeur chaque bouquet puis oriente les clients vers une appli de livraison ou WhatsApp pour commander.

Rôle: Design et développement front-end
Statut: En ligne
Catégorie: Vitrine pour un fleuriste
Lieu et année: Maroc, 2026
Technologies: HTML, CSS, JavaScript, Vite, Python
Liens: Le nom, le logo et l’adresse de la boutique sont masqués pour protéger la vie privée du client : le site en ligne n’est donc pas lié. Le code source n’est pas public.

Accueil du fleuriste : un bouquet de lys et de roses à côté du titre « Des fleurs pour chaque moment précieux. »

les prix suivent l’appli de livraison

détourés en Python

PageSpeed Insights, ordinateur

100Performances

100Accessibilité

100Bonnes pratiques

100SEO

L’histoire

Le défi
La boutique prend ses commandes via une appli de livraison dans sa ville et sur WhatsApp partout au Maroc. Il lui fallait un site qui présente les bouquets avec le même soin que celui qu’on met à les composer, puis qui dirige chaque visiteur vers le bon endroit pour commander.
L’approche
Une vitrine douce et éditoriale, construite autour des propres photos de la boutique, en HTML sémantique, CSS et un peu de JavaScript. Un script Python détoure chaque bouquet pour des compositions en couches, et le parallaxe repose sur des animations CSS liées au défilement plutôt que sur une boucle JavaScript.
Le résultat
Le site est en ligne. PageSpeed Insights lui donne 100 en performances, accessibilité, bonnes pratiques et SEO sur ordinateur, et 97 en performances sur mobile.

Ce que j’ai réalisé

Une galerie de créations filtrée par occasion, avec une visionneuse et des prix alignés sur le menu de l’appli de livraison.
Une commande qui renvoie vers l’appli de livraison en ville, et vers WhatsApp ou le téléphone ailleurs au Maroc.
Un parallaxe en CSS lié au défilement, avec une composition fixe là où les navigateurs ne le gèrent pas.
Des titres révélés ligne par ligne, affichés d’un coup quand les animations réduites sont activées.
Un script Python qui convertit les photos d’origine en WebP et détoure les bouquets.
URL canoniques, Open Graph, JSON-LD, robots.txt, sitemap.xml et llms.txt, générés à la compilation.

Sous le capot

de vrais extraits du code

Un parallaxe sans boucle JavaScript

Chaque élément en mouvement partage une seule animation et lit la position de défilement via animation-timeline. Les navigateurs qui ne la gèrent pas, et les visiteurs qui préfèrent réduire les animations, voient la mise en page fixe.

src/style.css

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    [data-parallax] img,
    .section-index,
    .reviews__ring,
    .why__glow,
    .why::before,
    .botanical--order {
      animation: drift linear both;
      animation-timeline: view();
    }

Détourer les bouquets

rembg retire le fond, une passe de réparation restaure les rubans perdus sur les vêtements sombres, puis chaque détourage est recadré et enregistré en plusieurs largeurs.

scripts/cut_bouquets.py

def main() -> None:
    session = new_session("isnet-general-use")
    for source, name, widths, erase in CUTS:
        photo = Image.open(SRC / source).convert("RGB")
        cut = remove(photo, session=session)
        if name in RESTORE:
            cut = restore(photo, cut, RESTORE[name])
        cut = clean(cut, erase)
        cut = cut.crop(cut.getchannel("A").getbbox())

Choix

Pas de framework

Une vitrine d’une seule page n’en a pas besoin. HTML sémantique, CSS et un peu de JavaScript, avec Cormorant Garamond et Manrope hébergées sur le site.

Une seule source pour les prix

Les prix viennent du menu de l’appli de livraison et vivent dans le code sous forme d’attributs : les synchroniser ne demande qu’une modification.

Les logos tiers respectés

Les logos de l’appli de livraison et de WhatsApp suivent les règles de chaque marque, et le mot WhatsApp reste écrit à côté de son icône.

Résultats

Performances, ordinateur: 100
Performances, mobile: 97
Accessibilité: 100
Bonnes pratiques: 100
SEO: 100
LCP, ordinateur: 0.6s
CLS: 0

PageSpeed Insights sur le site en ligne, 1er novembre 2026. Vérifié aussi dans Chromium, Firefox et WebKit.

Page d’accueil avec le bouquet en vedette. — Accueil

Page d’accueil sur téléphone, avec les boutons de l’appli de livraison et de WhatsApp. — L’accueil sur téléphone

Galerie des créations avec des roses rouges et des chrysanthèmes. — Les créations, filtrées par occasion

Section des créations sur téléphone. — Les créations sur téléphone

L’histoire de la boutique avec des photos de bouquets en couches. — L’histoire

Section commande expliquant la livraison via une appli. — Commander en trois étapes

Statut

Le nom, le logo, la ville, le numéro de téléphone et les réseaux sociaux de la boutique sont absents de cette étude de cas. Les captures les remplacent par un logo neutre et des informations masquées.