Mireva

Ce que c’est

Un site de cabinet de psychologie complet, en une seule page : bandeau, trois services, présentation du centre avec deux chiffres clés, trois types de séances, quatre praticiennes, un carrousel de témoignages, trois articles de journal et un pied de page avec bandeau photo. Un seul fichier HTML, une seule feuille de style.

Le dessin reprend celui d’un gabarit Webflow commercial. Aucun de ses médias ne subsiste : les vingt et une photographies ont été régénérées, les onze pictogrammes redessinés en SVG, et tout le code réécrit. L’original chargeait jQuery, le moteur d’animation IX2, 1 Mo de JavaScript et de CSS minifiés, et posait un style="opacity:0" sur chaque bloc animé — illisible, donc inutile pour apprendre, et incompatible avec une politique de sécurité stricte.

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 :

--ink:       #123b34;  /* carte du bandeau, boutons pleins, titres */
--ink-deep:  #0b2621;  /* le même, un cran plus foncé, pour les survols */
--ink-soft:  #9ccbb8;  /* le même, éclairci, seul lisible SUR le vert */
--mint:      #e4efe5;  /* le panneau tendre des séances et des avis */
--paper:     #ffffff;  /* le fond */
--slate:     #545c51;  /* le texte courant */
--line:      rgba(84, 92, 81, .5);  /* les filets */

Une chose à comprendre avant de toucher au reste : il y a trois verts, pas un. Le plein passe largement le contraste AAA sur blanc (12,4:1) et sur le vert tendre (10,5:1), mais il disparaîtrait posé sur lui-même — c’est à ça que sert la version éclaircie (6,9:1 sur le plein). Le foncé sert aux survols (16,0:1). Si tu changes l’accent, change les trois.

Le nom

Cherche « Mireva » dans index.html : il y est six fois, dont le <title>, les deux balises og:* et le pied de page. Aucune classe CSS ne contient la marque : un rechercher-remplacer ne peut rien casser. Le logo est trois arcs dans un disque, en SVG dans la page, suivi du nom dans la police du template — il suit tout seul.

Les photos

Les noms disent où elles vont : hero-01 à hero-04 pour la mosaïque, team-01 à team-04 pour les praticiennes, story-* pour les avis, journal-* pour les articles, social-* pour le bandeau du pied. Chacune est encodée à la taille où elle s’affiche vraiment : remplace-les à dimensions égales et le poids ne bougera pas.

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 --h2-size et toute la page suit.

Les neuf effets, et comment ils sont faits

Tous relevés dans les données du moteur d’animation de l’original — le store en porte 794 événements, ceux de toutes les pages du gabarit. 56 visent un élément de cette page-ci, et après regroupement par liste d’actions il reste neuf effets distincts : l’éditeur crée un événement par élément de collection, et les vingt-quatre premiers sont la même apparition, répétée.

Ce qu’il faut savoir

• Aucune requête externe. Toutes les requêtes du chargement sont locales, polices comprises. L’original en tirait depuis cinq 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> : 20 titres sur 20 restent visibles, 28 paragraphes sur 28, zéro bloc caché sur 23, le menu reste déroulé et le carrousel garde sa barre de défilement.
• Zéro style et zéro script en ligne. Vérifié en servant le dossier en HTTP avec la CSP du site — pas supposé. L’original, lui, posait style="opacity:0" sur chaque bloc animé : sous CSP stricte, c’est une page blanche.
• 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. Un filet révèle ce qui reste quand on atteint le bas de la page.
• Le menu déroulant a deux délais, pas un : 80 ms à l’ouverture pour qu’un pointeur qui traverse le bouton ne fasse pas clignoter le panneau, 300 ms à la fermeture pour couvrir le trajet au-dessus du vide entre le bouton et le panneau.
• Accessibilité : lien d’évitement, aria-expanded sur les deux boutons de menu, position du carrousel annoncée en role="status", décorations en aria-hidden, un seul anneau de focus visible sur les deux fonds, 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 5 510 px de haut contre 5 495 px pour l’original, soit 0,3 % d’écart.

Ce qui n’est pas parfait

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