Sapora

Ce que c’est

Un site de restaurant complet, en une seule page : accueil, présentation, carte filtrable de huit plats, méthode de cuisine, ambiance, avis clients en bandeau, deux adresses, bandeau social et pied de page. Un seul fichier HTML, une seule feuille de style.

Le design reprend celui d’un template commercial dont seules les photos ont été conservées. Tout le code a été réécrit : l’original tenait dans 175 Ko de CSS minifié, jQuery, trois bundles de l’éditeur, un moteur d’animation propriétaire et un panier e-commerce qui appelle une API inexistante dès qu’on sort de l’outil. Illisible, donc inutile pour apprendre.

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 — sept lignes

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

--noir:         #0c0407;  /* texte, boutons pleins, pied de page */
--fond:         #f0f0f0;  /* boutons doux, onglets */
--fond-doux:    #f7f7f7;  /* cartes des avis et de la méthode */
--accent:       #c0421f;  /* survols, liens, focus */
--accent-fonce: #93300f;  /* le même, un cran plus foncé */
--accent-clair: #f0906b;  /* le même, éclairci pour un texte sur photo */
--etoile:       #ffa600;  /* les notes */

Une chose à comprendre avant de toucher au reste : il y a trois terracottas, pas un. L’accent plein passe le contraste AA sur blanc (5,20:1) et sur le gris de fond (4,56:1), mais il disparaîtrait sur une photo sombre — c’est à ça que sert la version éclaircie (8,60:1 sur le noir). Le foncé sert aux survols (7,86:1). Si tu changes l’accent, change les trois : le banc du template recalcule les sept rapports pour toi.

Le nom

Cherche « Sapora » dans index.html. Aucune classe CSS ne contient la marque : un rechercher-remplacer ne peut rien casser. Le logo est un simple mot dans la police du template, il suit tout seul.

La carte

Chaque plat porte ses services dans un attribut : <li class="plat" data-cours="signature soir">. Ajouter un onglet, c’est un <input type="radio">, un <label> et une ligne dans la liste de sélecteurs de la partie 7 de la feuille.

Les tailles

L’échelle typographique est déclarée une fois, puis redéclarée à chaque point de rupture. Un titre n’a donc jamais sa propre media query : tu changes --titre-1 et toute la page suit.

Les quatorze effets, et comment ils sont faits

Tous relevés dans les données du moteur d’animation de l’original — 161 événements et 38 listes d’actions, extraits du store JavaScript puis mesurés au navigateur, pas à l’œil. L’éditeur crée un événement par élément de collection : après déduplication il reste quatorze effets distincts, dont onze sont repris ici.

Ce qu’il faut savoir

• Aucune requête externe. 41 requêtes au chargement, 45 après défilement complet, toutes locales. L’original chargeait jQuery et trois bundles depuis deux domaines.
• L’apparition au scroll ne peut pas masquer le contenu. L’état caché n’existe que si le JavaScript a tourné. Vérifié en retirant les balises <script> : 25 titres sur 25 restent visibles, zéro bloc caché, les huit fiches plat s’ouvrent. L’original, lui, posait style="opacity:0" sur chaque bloc animé.
• Zéro style et zéro script en ligne. Le rang d’apparition passe par un attribut data-reveal-rang et des sélecteurs d’attribut, précisément parce qu’un style="" serait bloqué par la politique de sécurité stricte du site.
• Le déclencheur est à 15 % du bas de l’écran, pas au premier pixel comme dans l’original : un bloc entre visiblement au lieu d’avoir fini avant d’être vu. Le seuil est mesuré sur l’écran et non sur l’élément — sinon un bloc plus haut que l’écran resterait invisible pour toujours.
• L’onglet actif de la carte est marqué. Dans l’original les six onglets avaient la même apparence : on ne savait pas lequel on regardait. Ici il s’inverse en noir.
• Accessibilité : lien d’évitement, états des menus annoncés, résultat du filtre annoncé en role="status", copies des rangées en aria-hidden et inert, focus visible unique, animations coupées si le système le demande — délais compris.
• Responsive vérifié à 390, 1440 et 2560 px, au chargement comme après défilement complet, sans débordement horizontal. La page fait 7 220 px de haut contre 7 305 px pour l’original, soit 1,2 % d’écart.

Ce qui n’est pas parfait

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