Source unique de vérité pour la refonte : tokens, typographie, boutons, composants et blocs partagés. Toutes les classes du système sont préfixées .sy- ; les classes de bloc (.svc, .site-header, .rz-card…) suivent une nomenclature BEM.
Lead - Satoshi. Le numérique a de la matière : tenu, durable, pensé pour l'usage réel.
Body - Satoshi. Studio d'expertise numérique, nous accompagnons marques et institutions du cadrage à la mise en production.
Relief néomorphique, se soulève au survol.
Carte contour cyan - statistiques.
« Carte claire, relief doux au survol. »
Le numérique a de la matière.
Stratégie, design, code.
Le logotype est une image, jamais du texte mis en forme. Quatre déclinaisons, toutes dans assets/images/.
Tout ce qui se répète d'une page à l'autre est produit par un seul fichier, js/layout.js. Les pages ne contiennent que deux ancres :
<div data-include="header"></div> <div data-include="footer"></div>
layout.js remplace ces ancres par l'en-tête (logo, navigation, méga-menu à deux axes, menu plein écran mobile) et le pied de page (zone groupe Phelen, adresses, colonnes de liens, mentions légales, année automatique). C'est le point d'entrée à convertir en composant/partial côté CMS ou framework : une seule source pour les 12 pages.
En-tête, méga-menu, menu mobile, pied de page, zone Phelen.
Révélations au défilement, accordéons, curseur, ancrages.
Visuels animés des blocs d'expertise (voir ci-dessous).
Animations de fond des hero (canvas).
Panneau de contact et validation. À raccorder au back.
Données et rendu des réalisations, filtres par secteur et par année. Contenu à sortir dans le CMS.
Mise en cache des ressources statiques et gestion du mode hors-ligne.
Un seul patron pour tous les logos, vignettes et visuels. Le conteneur remplit sa case, l'image est cadrée à l'intérieur : contain pour un logo, cover pour une photo.
<span class="im"><img class="im__i im__i--contain" src="assets/logos/logo-region.webp" alt="Région Réunion"></span>
Les 58 logos clients, agréments et marques du groupe sont livrés en WebP dans assets/logos/. Le fichier assets/logos/_index.json donne la correspondance identifiant d'emplacement → fichier. Les emplacements restant vides portent la classe .im-todo et un attribut data-slot : ils sont listés dans le README.
Cinq illustrations SVG plates, animées en CSS à l'ouverture ou au survol du bloc qui les contient. Aucune image bitmap, aucun dégradé de fond : des aplats et des traits. Elles se déclarent par un attribut.
<div class="svc__media" data-illus="infogerance"></div>
Sites, portails, applications mobiles.
Fabrique de logiciels, MVP, SaaS.
Supervision, sauvegardes, maintenance.
Bus de données, connecteurs, référentiel.
Paliers, jalons, relation au long cours.
L'animation est séquencée par une variable CSS --i portée par chaque élément (.illus-step), déclenchée par .svc.is-open, :hover ou :focus-within. Tout est neutralisé sous prefers-reduced-motion.
140 ms survol · 220 ms transition · 420 à 800 ms apparition. Courbe unique : --sy-ease.
Classe .sy-reveal + data-reveal-delay en ms. Fondu et translation courte, jamais de rebond.
Toutes les animations, marquees et canvas sont désactivés sous prefers-reduced-motion. À conserver.
Lien d'évitement .sy-skip en tête de chaque page, accordéons pilotés par aria-expanded / aria-controls, fil d'Ariane sur toutes les pages internes.
/ Accueil service-public.php Vous êtes : secteur public & collectivités secteur-prive.php Vous êtes : secteur privé startups.php Vous êtes : startups plateformes.php Expertise : plateformes web & mobile applications.php Expertise : fabrique de logiciels transformation.php Expertise : transformation des organisations ia-innovation.php Expertise : IA & innovation realisations.php Réalisations (filtres secteur / année) agence.php L'agence mentions-legales.php Mentions légales confidentialite.php Politique de confidentialité design-system.php Cette page assets/styles/site.css Tokens + tous les composants js/ Blocs partagés et comportements assets/images/ Logotypes, texture, photos assets/logos/ 58 logos clients, agréments, groupe README-INTEGRATION.md Notes de reprise pour les développeurs