Un site Internet pour Stéphanie secrétaire indépendante
Stéphanie exerce sous l'enseigne S LYAX depuis plusieurs années. Elle accompagne les TPE et PME dans leur quotidien administratif — devis, facturation, planning, gestion de courrier. Un métier de confiance, discret, essentiel. Son site, lui, ne lui rendait pas justice.
Quand elle m'a contacté, la demande était simple en apparence : refaire le site. Mais derrière cette phrase se cachait quelque chose de plus précis. Elle voulait un outil qui inspire confiance au premier regard, qui reflète son professionnalisme, et qui lui permette d'être contactée facilement — sans se retrouver noyée sous le spam.
C'est ce cahier des charges, aussi humain que technique, qui a guidé chaque décision du projet.
Direction artistique — une palette botanique pour une identité qui respire
Dès la première conversation, une évidence s'est imposée : le site devait dégager cette sensation de calme et d'espace qu'on associe aux beaux intérieurs, aux papeteries soignées, aux cabinets qui prennent soin de leurs clients.
J'ai choisi une palette inspirée du monde végétal :
- Vert sauge (
#8a9a7b) comme couleur principale - Fond crème ivoire (
#faf8f5) pour l'arrière-plan - Touches de blush rosé pour les accents et les zones de chaleur
La typographie associe Playfair Display — une serif élégante aux empattements affirmés — pour les titres, et Lato pour le corps de texte. Un duo qui donne au site un caractère éditorial sans sacrifier la lisibilité.
Expérience utilisateur — chaque détail pensé pour convertir sans forcer.
Un bon site vitrine ne crie pas — il guide. L'architecture de la page a été construite pour accompagner naturellement le visiteur, depuis la découverte jusqu'à la prise de contact.
- Une section héro avec accroche claire et appel à l'action immédiat, sans surcharge visuelle
- Une présentation des services structurée en blocs lisibles, avec des animations douces au scroll
- Des formes organiques en CSS pur — aucun SVG externe — pour créer du mouvement sans alourdir les performances
- Un formulaire de contact accessible depuis n'importe quelle section, avec une UX de retour d'état soignée
- Les mentions légales et la politique de confidentialité disponibles en modale, sans quitter la page
- Un menu mobile fluide avec overlay et gestion du scroll
- Des balises Open Graph et Twitter Card pour un partage réseaux sociaux propre
« Le site doit donner envie de me faire confiance avant même que la personne ait lu un seul mot. »
— Stéphanie Biffano, S LYAX
Cette phrase est devenue ma boussole. Chaque décision — couleur, animation, hiérarchie des informations — a été passée au filtre de cette intuition.
Stack technique — des technologies éprouvées, choisies avec intention
Pas de framework JavaScript, pas de dépendances inutiles. Le site repose sur un socle volontairement léger, ce qui garantit des temps de chargement rapides et une maintenance aisée.
- PHP natif — gestion des sessions, tokens CSRF, traitement du formulaire côté serveur
- Tailwind CSS (CDN) — classes utilitaires pour la mise en page, complétées par du CSS personnalisé
- CSS Animations — formes organiques, transitions au scroll, effets de flottement — 100% CSS, zéro bibliothèque
- Cloudflare Turnstile — CAPTCHA invisible pour filtrer les bots sans friction utilisateur
- Hébergement O2Switch — serveur français, SSL, conformité RGPD
- PHP
mail()— envoi email avec en-têtes soignés, Reply-To et copie cachée automatique
Sécurité — un formulaire de contact blindé en cinq couches
Le formulaire est souvent l'angle mort des sites vitrines. On le traite comme une formalité — un champ nom, un champ email, un bouton envoyer. Et on se retrouve avec une boîte mail inondée de spam, voire exposé à des injections d'en-têtes ou des attaques CSRF.
Sur ce projet, le formulaire implémente cinq niveaux de protection indépendants qui s'activent dans l'ordre, comme les portes d'un sas.
1 . Token CSRF
Un jeton aléatoire de 64 caractères hexadécimaux est généré côté serveur et stocké en session PHP. Chaque formulaire soumis doit le présenter à l'identique — toute requête forgée depuis un autre site est automatiquement rejetée.
2 . Honeypot anti-spam
Un champ website invisible est intégré au formulaire. Les humains ne le voient pas ; les bots automatiques le remplissent. Si ce champ contient la moindre valeur, le message est silencieusement rejeté.
3 . Cloudflare Turnstile
Une vérification CAPTCHA invisible est effectuée avant chaque soumission. Le token est validé en temps réel auprès de l'API Cloudflare, avec l'IP de l'utilisateur pour renforcer la détection.
4 . Rate limiting par IP
Chaque adresse IP est limitée à 3 envois par heure. Les tentatives sont persistées dans un fichier JSON côté serveur, nettoyé automatiquement à chaque requête. Au-delà de la limite, un message oriente vers le contact téléphonique.
5 . Validation et sanitisation
Toutes les données sont nettoyées (strip_tags, trim, filter_var) avant validation. Les sauts de ligne dans le nom et l'email sont supprimés pour prévenir l'injection d'en-têtes SMTP.
Le résultat : un formulaire qui absorbe sans trembler les soumissions abusives, et qui garantit de ne recevoir que de vrais messages, de vraies personnes.
Conformité RGPD — pas une case à cocher
La conformité légale a été pensée dès le départ, pas greffée en fin de projet. Le site n'utilise aucun cookie de tracking ni de régie publicitaire — une décision assumée qui évite d'afficher une bannière de consentement et simplifie considérablement l'expérience de navigation.
La politique de confidentialité — rédigée en langage clair, accessible en modale — détaille avec précision les données collectées, leur durée de conservation, les droits des utilisateurs et les mesures techniques mises en place. Hébergement en France chez O2Switch, données traitées exclusivement au sein de l'UE.
Pour conclure
Un site vitrine réussi n'est pas forcément le plus complexe. C'est celui qui répond précisément aux besoins de la personne qui l'utilise — qu'il s'agisse de rassurer un prospect en trois secondes, ou d'éviter de passer ses matinées à trier des spams.
Travailler sur lyaxsecretariat.fr a été l'occasion de pousser chaque détail — du grain de la palette au flux de sécurité du formulaire — avec la conviction que bien faire les choses, même les moins visibles, ça finit toujours par se voir.
