← Retour au blog
Étude de cas

Le National
Montreux

Un site de réservation d'appartement de luxe entièrement sur mesure : disponibilité en temps réel via iCal, paiement Stripe, check-in invité en plusieurs étapes avec génération de factures PDF, déployé mondialement sur Cloudflare Pages.

Page d'accueil du site de l'appartement de luxe Le National Montreux
98
Score Lighthouse
<30s
Temps de déploiement
100%
Code sur mesure
0
Page builders

Le brief

Le National Montreux est un appartement de luxe au cœur de Montreux, en Suisse, à quelques minutes du lac, du festival de jazz et de la statue de Freddie Mercury. Le client avait besoin d'un site à la hauteur de la qualité du bien lui-même : élégant, rapide et pleinement fonctionnel pour les réservations directes.

Le cahier des charges était clair : aucune plateforme de réservation toute faite, aucune commission versée à des tiers, et une expérience client aussi raffinée que l'appartement. Tout devait être conçu sur mesure et rester la propriété exclusive du client.

« Il nous fallait quelque chose d'aussi soigné que le bien lui-même, pas un clone générique d'Airbnb. Le site devait gérer de vraies réservations, de vrais paiements et de vrais clients dès le premier jour. »

Ce qui a été développé

Le site entier est codé à la main en HTML, CSS et JavaScript : pas de framework, pas de CMS, pas de page builder. Chaque interaction a été conçue spécifiquement pour ce bien.

📅
Calendrier de disponibilité en direct
Dates bloquées analysées en temps réel à partir du format iCal. Aucune double réservation, aucune mise à jour manuelle.
💳
Paiement Stripe
Sessions de paiement côté serveur via Cloudflare Workers. Les clients paient directement, zéro commission pour des plateformes tierces.
📋
Formulaire de check-in en plusieurs étapes
Enregistrement des invités avec suivi de progression et génération de factures via jsPDF, sans base de données côté serveur.
🖼️
Diaporama plein écran
Carrousel d'images AVIF avec transitions en fondu et dégradé superposé, chargement rapide, rendu haut de gamme.
🌍
Déploiement mondial en périphérie
Cloudflare Pages : en ligne 30 secondes après un push git, servi depuis le nœud edge le plus proche.
📱
Conception mobile-first
Typographie fluide en clamp(), mise en page responsive, sans faille sur tous les écrans.

Stack technique

HTML / CSS / JS Cloudflare Pages Cloudflare Workers Stripe Checkout API Analyse iCal jsPDF GitHub CI/CD Images AVIF

Le système de disponibilité

L'un des points les plus délicats était le calendrier de disponibilité. Le client gère ses réservations sur plusieurs plateformes (direct, Airbnb, etc.) et avait besoin que le site reflète automatiquement les vraies dates bloquées, sans aucune intervention administrative manuelle.

La solution : un Cloudflare Worker qui récupère et analyse un flux iCal à la demande. Les plages de dates bloquées sont extraites des champs DTSTART/DTEND, normalisées au format ISO, puis renvoyées au front-end sous forme de tableau trié. L'interface du calendrier met en évidence les dates indisponibles en temps réel : ni base de données, ni tâche cron, ni widget de réservation tiers.

Intégration Stripe

Les paiements transitent par un point d'entrée Cloudflare Worker côté serveur qui crée des sessions Stripe Checkout avec tarification dynamique et URL de redirection. Le client conserve 100 % de la valeur des réservations, sans frais de plateforme, sans commission prélevée.

Le CORS est verrouillé sur une liste blanche de domaines précis. La clé secrète Stripe reste dans les secrets d'environnement Cloudflare, jamais dans le code source, jamais dans le contrôle de version.

Performance

Avec 43 images AVIF et un diaporama plein écran, la performance aurait facilement pu poser problème. Ce n'a pas été le cas. Résultat : un score de performance Lighthouse de 98/100, obtenu grâce au chargement différé, aux formats d'image nouvelle génération et à l'absence de ressources bloquant le rendu.

Le réseau edge mondial de Cloudflare fait le reste : un TTFB inférieur à 100 ms depuis n'importe où en Europe, HTTP/2, et HTTPS automatique avec HSTS.

Le résultat

Un site de réservation de luxe qui a l'allure attendue, qui fonctionne de manière fiable, et qui ne coûte rien au client en frais de plateforme récurrents. Les réservations directes signifient des marges plus élevées. Un parcours de check-in sur mesure signifie moins d'échanges d'e-mails. Et un score Lighthouse de 98 signifie que même les clients sur des connexions mobiles lentes bénéficient d'une expérience rapide et fluide.

Un score Lighthouse de 98 n'est pas un hasard. C'est le résultat d'avoir soigné les fondamentaux techniques dès le départ. Pour vérifier où en est votre propre site, consultez la checklist d'audit SEO pour 2026, qui reprend les mêmes vérifications, classées par priorité, que j'applique sur chaque projet, celui-ci y compris.

Le call-to-action de réservation unique et clair, ainsi que les temps de chargement rapides, suivent les mêmes principes que ceux détaillés dans pourquoi la plupart des sites web ne convertissent pas.

Site en ligne : lenationalmontreux.ch, codé à la main, déployé sur Cloudflare, propulsé par Stripe.

À propos de l'auteur

Bahram Khan est spécialiste en marketing digital et développeur web basé en Suisse, avec plus de 3 ans d'expérience à coder et faire grandir des sites clients à la main, des réservations hôtelières de luxe aux plateformes de conseil B2B, sans page builder, sans sous-traitant. Me contacter sur LinkedIn ↗

Besoin d'un site comme celui-ci ?

Chaque site que je crée est codé sur mesure : pas de glisser-déposer, pas de page builder. Rapide par défaut, déployé mondialement.

Démarrer un projet →