Marenza

Ce que c’est

Un site d’hôtel-resort de luxe, complet : accueil en photo avec la fiche d’une suite posée dessus, présentation, carrousel de cinq suites, quatre atouts dans un cadre ciselé, carrousel de moments barré par le nom en typographie géante, grille d’hébergements sur fond bordeaux, chiffres clés, accordéon d’expériences, avis, découverte en quinconce, journal, inscription et pied de page. Une seule page, un seul fichier HTML.

Ce qui fait ce site, c’est le décor au trait : derrière chaque section courent une ligne verticale et trois cercles d’un pixel, et deux sections sont enfermées dans un cadre ciselé à volutes. Tout est en SVG dessiné à la main, dans le HTML, sans une seule image.

Le design reprend celui d’un gabarit Webflow d’hôtellerie dont il ne reste plus une seule image : les 33 photographies ont été régénérées pour ce template, au rapport d’aspect exact relevé sur l’original. Tout le code a été réécrit : 135 Ko de CSS minifié, trois bundles Webflow de 1,9 Mo, GSAP avec ScrollTrigger et SplitText, le moteur d’animation propriétaire IX2, deux animations Lottie, un panier e-commerce qui appelle une API inexistante hors de l’outil, et des style="opacity:0" posés en ligne sur chaque bloc animé — qu’une politique de sécurité stricte bloque, ce qui donnerait une page blanche.

C’est le point important : ce template n’est pas là pour être admiré, il est là pour être lu, cassé et remonté.

Ce que tu changes en premier

Les couleurs — dix lignes

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

--cream:      #f8f2ed;  /* fond de page */
--sand:       #faeddd;  /* la section « détails », un cran plus chaud */
--wine:       #7b2e2e;  /* titres, sections pleines, pied de page */
--gold:       #e8b96b;  /* fond des boutons */
--gold-deep:  #d3a150;  /* le même doré, un cran plus foncé (survol) */
--gold-soft:  #f5dca8;  /* le même doré, éclairci pour le texte sur photo */
--ink:        #211c1a;  /* texte fort */
--body:       #5c534e;  /* texte courant */
--line:       #e3cfc4;  /* les filets et cercles du décor */

Une chose à comprendre avant de toucher au reste : il y a trois dorés, pas un. Le doré plein sert de fond de bouton, avec du texte noir dessus (11,5:1). Le même doré posé en texte sur le crème tomberait à 2,2:1, illisible : c’est la version éclaircie qui prend le relais dès qu’il doit se lire sur une photo ou sur le bordeaux (6,9:1). Si tu changes l’accent, change les trois.

Le nom

Cherche « Marenza » dans index.html : le logo, le titre, les deux bandes typographiques et le pied de page. Aucune classe CSS ne contient la marque — un rechercher-remplacer ne peut rien casser. Le logo est un <symbol> SVG de six lignes.

Les tailles

L’échelle typographique est déclarée une fois, puis redéclarée à chaque point de rupture (991, 767 et 599 px). Un titre n’a donc jamais sa propre media query : tu changes --h2 et toute la page suit — 68 px sur grand écran, puis 48, 42 et 32 px en descendant.

Les seize effets, et comment ils sont faits

Ils n’ont pas été regardés jouer, ils ont été lus : 151 événements dans le store IX2 de Webflow et 26 déclencheurs GSAP, extraits du site d’origine puis dédupliqués — l’outil crée un événement par instance de collection. Il reste seize effets distincts — quinze relevés, plus le glisser à la souris.

Ce qu’il faut savoir

Aucune requête externe, aucun build. Tu ouvres index.html dans un navigateur et ça marche. Polices auto-hébergées, photos locales, aucun CDN, aucun tracker.

Sans JavaScript, rien n’est caché. L’état caché des apparitions est écrit .js [data-reveal], et c’est enhance.js qui pose la classe. Vérifié en coupant le JavaScript : 46 titres sur 46 restent visibles, 59 blocs sur 59 aussi, et les accordéons s’ouvrent toujours.

Le déclencheur d’apparition est à 15 % du bas de l’écran, pas au premier pixel comme dans l’original. La marge est mesurée sur l’écran et non sur l’élément — sinon l’accueil et la section des hébergements, tous deux plus hauts que l’écran, resteraient cachés à jamais. Un filet révèle en plus tout ce qui reste quand on atteint le bas.

Le décor passe sous le contenu. Les filets et les cercles sont en position absolue, donc peints après un contenu qui, lui, ne l’est pas : sans un cran d’empilement sur le conteneur, les traits traversaient les photographies du journal et de la découverte.

Les carrousels défilent nativement. Molette, balayage au doigt et clavier fonctionnent sans une ligne de JavaScript ; le glisser à la souris, lui, est le seul geste que le script ajoute : 4 320 px de course pour 4 188 px nécessaires côté suites, 2 100 px pour 1 830 px côté galerie. La dernière fiche est atteignable dans les deux cas.

Sous politique de sécurité stricte (script-src 'self'; style-src 'self') : zéro violation, vérifié en servant le dossier avec l’en-tête réel. Zéro style en ligne, zéro script en ligne, zéro onclick.

Débordement horizontal nul à 390, 1440 et 2560 px, au chargement comme après défilement complet. Accessibilité : lien d’évitement, aria-expanded sur le menu, notes des étoiles en toutes lettres, focus visible unique, prefers-reduced-motion qui remet aussi les délais à zéro.

Ce qui n’est pas parfait