Site 2026 • Stylebook

— Variables : champ de recherche ouvert en mobile/tablette (sous 992px) — il ne s'étire plus sur toute la largeur de la barre du haut jusqu'au bord gauche ; il s'arrête désormais après le bouton hamburger, avec le même espacement (16px) que celui entre le hamburger et le fil d'ariane, pour ne plus le recouvrir.

— Variables : correction de l'icône loupe du champ de recherche mobile, qui se retrouvait sur la bordure du champ au lieu d'être à l'intérieur (décalage introduit par le padding ajouté au conteneur lors du correctif précédent).

— Variables : le champ de recherche (overlay mobile) se referme désormais automatiquement au clic en dehors de celui-ci, en plus de l'icône loupe qui permettait déjà de le fermer.

— Variables : champ de recherche ouvert (mobile) décalé de 16px vers la gauche, désormais accolé au bouton hamburger sans espace intermédiaire.

— Variables : largeur du champ de recherche ouvert (mobile) ajustée à droite (16px d'écart avec le bord du header) pour respecter son padding sans trop réduire l'espace disponible.

— Variables : ajout d'une icône ✕ à l'intérieur du champ de recherche ouvert (mobile) permettant de le fermer directement, en plus du clic en dehors ; sans effet en desktop où le champ est toujours visible.

— Variables : texte d'intro de la section « Typographie » reformulé pour plus de cohérence (phrase à trois propositions reliées par virgules scindée en deux phrases courtes).

— Atomes : section « Button » — padding interne des boutons remplacé par des valeurs fluides clamp() (haut/bas et gauche/droite), le variant « Small » retiré au passage (padding désormais commun à tous les boutons de la section).

— Atomes : section « Button » — nouvelle ligne « Icône » avec 2 boutons de démonstration (icône à droite et à gauche du texte), padding horizontal asymétrique : côté texte plus large, côté icône aligné sur le padding standard.

— Atomes : section « Button » — couleur de survol harmonisée à oklch(44% 0.245 264) (Marine Blue 600) pour les boutons Primary, les 2 boutons avec icône et l'état Hover.

— Variables : section « Bordures & rayons » — les termes sous les blocs arrondis (« Rayons ») passent en bleu au survol, comme les autres termes cliquables de la page.

— Variables : section « Layout & conteneurs » — même traitement sur les 5 liens de démo (--layout-content-*), qui passent en bleu au survol.

— Variables : section « Typographie » — nouvel encart « Espacements de lettres » avec le token --spacing-letter-reg (0.05rem), présenté avec la même structure que le tableau font-size/line-height (taille, valeur en px, exemple « Code is poetry » illustrant l'effet, nom de la variable).

— Variables : section « Typographie » — encart d'info (bornes clamp/px/rem) repositionné sous l'encart « Espacements de lettres ».

— Variables : section « Espacements » — nouvelle primitive --primitive-xs-minus (0.35rem), entre --primitive-xs et --primitive-xxs.

— Variables : section « Primitives — taille réelle » — bordure retirée de la barre bleue, fond remplacé par oklch(61% 0.207 267) (Marine Blue 350).

— Variables : les 7 mentions de variables.txt (encarts d'info) sont désormais des liens internes vers la section « Exporter variables.txt » de l'Accueil, avec soulignement et infobulle.

— Toutes pages : correction de la fiabilité du défilement vers une ancre lors d'une navigation entre deux pages (ex. clic sur « variables.txt ») — le comportement natif du navigateur n'était pas fiable ici, le défilement est désormais géré explicitement au chargement de chaque page, avec un décalage de 80px pour ne pas passer sous le header sticky.

— Atomes : section « Boutons/Liens » — ajout de 2 boutons de copie « HTML » / « CSS » sous le bouton « A propos », copiant séparément le balisage et la feuille de style d'un composant lien-bouton avec icône (.btn-icon-right), sans modifier l'apparence du bouton affiché.

— Atomes : correction du libellé « Indicateurs d'états » en « Indicateurs d'état » (section Feedback) — une entité HTML mal interprétée dans le lien de navigation et le sommaire affichait le texte brut au lieu d'une apostrophe.

— Atomes : section « Boutons » — l'encart de copie de code sous le bouton « A propos » passe d'une liste dupliquant toute la galerie de boutons à une grille de cartes, une carte par variante disposant réellement d'une fonction de copie.

— Atomes : section « Boutons » — ajout d'un 3ᵉ bouton « JSON » à côté de « HTML » / « CSS », qui télécharge directement le fichier d'export du composant (button-primary-icon-right.json) plutôt que d'en copier le contenu dans le presse-papier.

— Atomes : section « Boutons » — ajout d'une carte « Secondary » et d'une carte « Primary » à l'encart de copie de code, chacune avec ses propres fichiers HTML/CSS/JSON.

— Atomes : section « Boutons » — le code HTML et CSS copié par les cartes « Primary » et « Primary & icône à droite » provient désormais directement de leurs fichiers sources dédiés plutôt que d'un texte codé en dur, pour rester fidèle à la source et plus facile à maintenir.

— Atomes : section « Boutons » — ajout de box-sizing: border-box au CSS copié par la carte « Primary & icône à droite ».

— Atomes : suppression d'un bloc CSS obsolète (.btn-icon-right), non utilisé par le rendu réel de la page.

— Atomes : espacement et hauteur des boutons de copie « HTML » / « CSS » / « JSON » légèrement augmentés pour plus de confort visuel.

— Atomes : section « Boutons » — ajout d'un pas-à-pas en 3 étapes illustrées sous « Intégrer les boutons dans GreenShift/GreenLight » : choisir le block Style Manager, coller le code HTML (Convert HTML to Blocks), coller le code CSS (Add CSS to Local Classes). Mise en page en 3 colonnes sur desktop, empilée automatiquement sur mobile.

— Atomes : section « Boutons » — espacement vertical augmenté entre les étapes du pas-à-pas « Intégrer les boutons dans GreenShift/GreenLight » lorsqu'elles s'empilent en mode responsive, sans changer l'espacement horizontal en desktop.

— Atomes : section « Boutons » — ajout d'une carte « Outline » à l'encart de copie de code (HTML / CSS / JSON).

— Atomes : refactorisation interne — les valeurs de couleurs, tailles et rayons codées en dur dans la page sont désormais reliées aux variables du design system (variables.txt), pour une meilleure cohérence et maintenabilité. Aucun changement visuel.

— Atomes : section « Boutons » — ajout d'une carte « Ghost » à l'encart de copie de code (HTML / CSS).

— Atomes : section « Boutons » — ajout d'une carte « Secondary / icon trailing » à l'encart de copie de code (HTML / CSS / JSON).

— Atomes : section « Boutons » — ajout d'une carte « Ghost / icon trailing » à l'encart de copie de code (HTML / CSS / JSON).

— Atomes : section « Boutons » — retrait de la variante « Destructive » de la galerie. Ce type de bouton est surtout utilisé dans les interfaces back-office (actions de suppression/annulation critiques) et relativement peu en frontend, hors périmètre principal de ce stylebook.

— Atomes : section « Boutons » — les blocs « Types / Usages » et « États des boutons » sont désormais présentés côte à côte, repliés automatiquement en colonne sur les écrans étroits.

— Atomes : section « Boutons » — icône du bouton « Précédent » remplacée par une icône utilisateur.

— Atomes : sommaire réorganisé pour la section « Boutons » — les sous-menus par variante sont regroupés en 2 familles (« Standard », « Icon trailing »).

— Atomes : section « Boutons » — le bouton « A propos » (icône à gauche) est désormais présenté séparément du bouton « Poursuivre » (icône à droite), chacun avec son propre libellé, côte à côte en mode responsive.

— Atomes : section « Boutons » — ajout de 2 cartes « Primary / leading icon » et « Secondary / leading icon » à l'encart de copie de code (HTML / CSS / JSON), et d'une 3ᵉ famille « Icon leading » dans le sommaire de la page.

— Toutes pages : correction du token --color-primary-hover, désynchronisé de variables.txt.

— Audit des tokens locaux des 5 pages face à variables.txt : correction de --color-white et ses variantes alpha, désynchronisées sur index.html, components.html et molecules.html.

— Atomes : section « Boutons » — ajout d'une carte « Outline / leading icon » à l'encart de copie de code (HTML / CSS / JSON).

— Atomes : section « Boutons » — les 3 familles de cartes de l'encart de copie (Standard, Icon trailing, Icon leading) sont désormais séparées par un espacement plus marqué, pour rester visuellement distinctes à toutes les largeurs d'écran.

— Atomes : section « Boutons » — ajout d'une carte « Ghost / leading icon » à l'encart de copie de code (HTML / CSS / JSON), complétant la famille « Icon leading » (Primary/Secondary/Outline/Ghost).

— Atomes : section « Boutons » — bordure du bouton « Secondary » corrigée pour rester alignée sur son fichier CSS source.

— Atomes : section « Boutons » — les aperçus visuels (encart de copie et galerie « Liens 'Button style' ») sont désormais fidèles à leurs fichiers HTML/CSS sources (poids et taille de police, bordure, espacement des lettres, fond et couleur d'Outline, survol de Ghost).

— Toutes pages : React/ReactDOM chargés localement (assets/js/vendor/) au lieu de unpkg.com — supprime une dépendance réseau tierce bloquante au chargement de chaque page. Aucun changement visuel ni fonctionnel.

— Toutes pages : renforcement de sécurité sur le mécanisme d'intégration en iframe (écoute postMessage) — les messages entrants sont désormais vérifiés comme provenant bien de la fenêtre parente avant d'être traités. Aucun changement visuel.

— Toutes pages : ajout de l'attribut lang="fr" sur la balise <html>, absent depuis l'origine — remonté par un audit PageSpeed Insights.

— Accueil, Composants, Atomes : couleur de certains liens dans le texte courant (« variables du système », « composants », « lien inline », « En savoir plus → ») renforcée pour respecter le contraste WCAG — texte souligné en gris foncé, passant en bleu au survol.

— Variables : section « Boutons » — ajout du token --spacing-btn-padding-icon-only (0.65rem), réservé pour un futur bouton « icône seule ».

— Atomes : section « Boutons » — nouvelle famille de cartes « Icon only » à l'encart de copie de code, avec les variantes Primary et Secondary (HTML / CSS / JSON).

— Atomes : section « Boutons » — ajout de la variante Outline à la famille « Icon only » (HTML / CSS / JSON).

— Atomes : section « Boutons » — nouvel encart « Lien + icon only » dans la galerie « Liens 'Button style' », à droite de « Lien + leading icon ».

— Atomes : section « Boutons » — nouvelle famille de cartes « Icon animated » à l'encart de copie de code (icône animée au survol du bouton), avec les variantes Primary, Secondary, Outline et Ghost.

— Atomes : section « Boutons » — message de confirmation du bouton de téléchargement JSON simplifié en « JSON téléchargé ».

— Atomes, Molécules, Variables : positionnement du toast de copie en mobile ajusté pour rester à distance stable du bas de l'écran quel que soit l'état de la barre d'adresse du navigateur.

— Atomes : section « Boutons » — nouvelle carte « Primary / blob rotating » à l'encart de copie de code (HTML / CSS / JSON) : le label et l'icône fusionnent par un effet « blob », l'icône pivote et se détache au survol. Ajout de l'entrée « Blob rotating » au sommaire de la page.

— Atomes : section « Boutons » — nouvel encart « Lien + blob rotating » dans la galerie « Liens 'Button style' », à la suite de « Lien + icon only ».

— Atomes : section « Boutons » — hauteur du label du bouton « blob rotating » alignée sur celle de l'icône (le texte paraissait écrasé à côté du cercle) ; correction également reportée dans son fichier CSS téléchargeable.

— Ajout du mode responsive sur les 4 pages du site (bascule à 992px, cohérente avec les breakpoints déjà documentés sur Variables).

— Création d'un fichier CSS partagé (assets/css/site.css) centralisant les règles responsive, plutôt que de les dupliquer par page.

— Menu latéral transformé en tiroir sur mobile/tablette (bouton hamburger, voile de fermeture).

— Sommaire (TOC) remplacé par un menu déroulant « Sur cette page » en haut du contenu sous 992px.

— Barre de recherche (Variables) réduite à une icône sur mobile/tablette, ouvrant un champ en overlay au clic — fonctions de recherche et de copie inchangées.

— Liens secondaires du topbar masqués sous 992px (redondants avec le tiroir).

— Passage du Stylebook en v1.0 (badge de version mis à jour sur les 4 pages).

— Roadmap mise à jour : les annonces initialement prévues pour la v1.0 (composants/patterns, documentation, standards RGESN/RGAA/WCAG, gouvernance, sources IA) reportées à la v1.2, la v1.0 ayant finalement porté sur le responsive.

— Section « Utiliser les tokens » (Accueil) : les 3 blocs et les flèches passent en colonne sous 992px, flèches tournées vers le bas.

— Mêmes blocs réduits à la largeur de leur contenu (fit-content) et centrés horizontalement.

— Bascule en colonne de ces 3 blocs déplacée sur un breakpoint dédié à 1080px, indépendant de celui du reste du chrome (992px).

— Section « Bonnes pratiques » : grille passée en 1 colonne sous 1080px, empilant les blocs par pilier (bonne puis mauvaise pratique : Cohérence, Simplicité, Accessibilité, Performance, Réutilisabilité).

— Mêmes blocs regroupés visuellement par paire sous 1080px : écart resserré entre bonne et mauvaise pratique d'un même pilier, espace élargi entre deux piliers.

— Variables : les 3 blocs statistiques (Couleurs, Tailles & espacements, Layout & bordures) sous l'intro passent en 1 colonne sous 1080px.

— Variables : section « Hiérarchie des tokens » (Primitif → Sémantique → Composant) passée en colonne sous 1080px, même traitement que « Utiliser les tokens » sur l'Accueil (blocs centrés, largeur ajustée au contenu, flèches vers le bas).

— Variables : cartes de la section « Familles fluides » (Médias, Images hero, Vignettes…) passées en 1 colonne sous 1080px.

— Variables : cartes de la section « Familles sémantiques — le décalage » (Sections, Composants, Stacks) passées en 1 colonne sous 1080px.

— Variables : section « Primitives — taille réelle » — écart horizontal entre nom, valeur en px et barre bleue resserré sous 1080px, avec une largeur de barre bornée pour conserver la même marge interne que le bloc qui contient ces lignes.

— Variables : section « Bordures & rayons » passée en colonne sous 1080px (blocs Épaisseurs puis Rayons) ; les items du bloc Rayons réorganisés en grille 3 colonnes / 2 rangées.

— Variables : cartes de la section « Breakpoints » (Mobile, Défaut, Tablette, Desktop) passées en 1 colonne sous 1080px.

— Variables : lignes du tableau « Tokens sémantiques » repliées en carte empilée sous 1080px (pastille, nom, alias, rôle sur des lignes séparées) pour éviter le retour à la ligne qui cassait l'alignement des colonnes.

— Variables : ajout d'un bloc explicatif au-dessus du tableau « Tokens sémantiques », visible uniquement sous 1080px, pour remplacer les en-têtes de colonnes masqués et indiquer à quoi correspond chaque ligne de la carte.

— Variables : même traitement appliqué aux tableaux « Paddings fluides » et « Tokens structurels » — lignes repliées en carte empilée sous 1080px, en-têtes masqués et remplacés par un bloc explicatif au-dessus du tableau.

— Variables : couleur des valeurs des tableaux « Paddings fluides » et « Tokens structurels » harmonisée avec celle du mot « valeur » dans leur bloc explicatif.

— Variables : section « Dark mode readiness » traduite en « Préparation au mode sombre » et même traitement que « Tokens sémantiques » appliqué sous 1080px (carte empilée + bloc explicatif).

— Variables : alias du tableau « Préparation au mode sombre » colorés en bleu clair (au lieu de blanc uni) pour rester lisibles sur le fond navy et cohérents avec la couleur du mot « alias » du bloc explicatif.

— Composants : section « Page & layout » — les 2 blocs (Anatomie, code) passés en colonne sous 768px (nouveau breakpoint dédié, distinct des 992px et 1080px déjà utilisés).

— Variables : correction du toast de copie (« Copié --nom-variable ») qui se retrouvait limité à environ la moitié de la largeur du viewport sur mobile (effet de bord du positionnement left: 50%), provoquant un retour à la ligne du nom de variable. Largeur désormais ajustée au contenu (width: fit-content), avec un plafond de sécurité pour éviter tout débordement sur très petit écran.

— Variables : section « Primitives — taille réelle » — largeur de la barre --primitive-3xl fixée à 4.75rem uniquement en mobile (≤430px), les autres lignes et le rendu desktop restant inchangés.

— Variables : section « Échelle de base » — même traitement que « Primitives — taille réelle » sous 1080px (écart resserré entre nom, valeur en px et barre, largeur de barre bornée pour garder la même marge interne que le bloc).

— Variables : ajout d'un encart sous le titre de la section « Familles sémantiques — le décalage » expliquant pourquoi Sections (+1 niveau), Composants (nominal) et Stacks (−1 niveau) pointent vers des paliers de primitives différents pour un même nom d'étape.

— Variables : encart précédent retiré et son explication fusionnée dans le texte d'introduction de la section « Espacements », pour éviter la redondance entre les deux emplacements.

— Composants : section « Page & layout » — le tableau Règle/Classe/Pourquoi passe en défilement horizontal sous 1080px au lieu de replier ses colonnes, afin que chaque ligne reste lisible sur une seule ligne.

— Composants : élargissement de la colonne « Règle » du tableau précédent (200px → 260px) — le texte « grid-template-rows: auto 1fr auto » débordait sur la colonne « Classe » et chevauchait « .page-layout ».

— Composants : section « Header » — l'aperçu live du header passe en défilement horizontal sous 1280px (nouveau breakpoint dédié) pour rester sur une seule ligne, avec un espacement ajouté entre le logo et la navigation pour compenser la perte du justify-content: space-between une fois la largeur figée au contenu.

— Composants : section « Header » — l'étiquette « Aperçu — .header-wrapper » regroupée avec l'aperçu dans un seul et même défilement horizontal (au lieu de deux zones de scroll indépendantes), les deux lignes se déplaçant désormais ensemble.

— Composants : section « Card » — sous « .card — défaut », les 2 blocs (aperçu de la carte, anatomie) passent en colonne sous 1280px, sans modifier l'aspect de la carte elle-même.

— Composants : section « Card » — le tableau Règle/Pourquoi sous « .card--featured » passe en défilement horizontal en mode responsive, afin que chaque ligne reste sur une seule ligne.

— Composants : section « Footer » — l'aperçu live passe en défilement horizontal sous 1280px, même traitement que le Header (colonnes figées à leur largeur, une seule zone de scroll).

— Composants : section « Bonnes pratiques » passée en 1 colonne sous 1080px, même traitement que la section équivalente sur l'Accueil.

— Atomes : section « Icons » — les 2 blocs (tailles d'icônes, extrait de code) passent en colonne sous 1080px.

— Ajout de la page « Molécules » (Atomic Design · Niveau 2), adaptée depuis la source Molecules.dc.html : Search Bar, formulaires (Login/Newsletter/Contact), Breadcrumb & Pagination, Cards (Blog/Pricing/Team/KPI), Alert & Notification, Timeline/FAQ/Download. Chrome et responsive identiques aux autres pages ; les grilles multi-colonnes utilisent nativement repeat(auto-fit, minmax(...)), sans media query manuelle. Lien ajouté au menu latéral des 4 autres pages.

— Molécules : section « Timeline · FAQ · Download » — ajout d'un padding interne haut sur le texte de réponse de l'accordéon FAQ, absent quelle que soit la largeur d'écran (le texte touchait directement la question).

— Composants : section « Container » — en mobile pur (≤430px), largeurs des démos élargies pour rester lisibles (.container-max 92→94%, .container 82→88%, .container-narrow 54→82%) ; valeurs desktop inchangées.

— Composants : section « Container » — sous 1080px, chaque barre de démo (.container-full, .container-max, .container, .container-narrow) conserve sa largeur mais son texte n'est plus tronqué : le contenu défile horizontalement à l'intérieur de la barre quand il dépasse.

— Correction d'un lien favicon cassé (404) sur les 5 pages : ./assets/img/favicon.ico pointait vers un chemin inexistant, corrigé en ./assets/favicon/favicon.ico.

— Variables : nouvelle section « Boutons » sous Espacements, avec 2 variables de padding interne pour les boutons standards (libellé seul, sans icône) : --spacing-btn-padding-block (0.75rem) et --spacing-btn-padding-inline (1.37rem).

— Variables : section « Boutons » — ajout de 2 variables pour les boutons avec icône, padding horizontal asymétrique : --spacing-btn-icon-padding-right (1rem) et --spacing-btn-icon-padding-left (1.37rem) ; le padding vertical reste identique aux boutons standards.

— Variables : section « Boutons » — ajout de 2 variables pour les boutons petits, sans icône : --spacing-btn-sm-padding-block (0.35rem) et --spacing-btn-sm-padding-inline (1.22rem).

— Variables : section « Boutons » — ajout de 2 variables pour les boutons petits avec icône, padding horizontal asymétrique : --spacing-btn-sm-icon-padding-right (1rem) et --spacing-btn-sm-icon-padding-left (1.22rem) ; le padding vertical reste identique aux boutons petits sans icône. La section « Boutons » couvre désormais les 4 variantes croisant taille et présence d'icône.

— Variables : section « Boutons » — les 3 valeurs dupliquées entre variantes sont désormais des alias (var(--nom-du-token)) plutôt que des valeurs répétées en dur, même principe que les tokens de la section Layout.

— Variables : section « Layout & conteneurs » — même traitement que « Container » sur Composants : largeurs des démos élargies en mobile pur (≤430px, séquence par paliers de 6 points : 94/88/82/76%) et scroll horizontal sous 1080px pour éviter la troncature du texte, sans changer les proportions d'origine au-dessus de ce seuil.

— Variables : palette « Grey » renommée « Black/Grey » et complétée d'une nuance « Black » (--color-black, oklch(7% 0.000 0)) positionnée avant Grey 900.

— Variables : palette « Black/Grey » — la valeur affichée sous chaque nuance montre désormais le triplet OKLCH complet (ex. « 7% 0.000 0 » au lieu de « 7% »), pour toutes les nuances de la palette.

— Variables : section « Palettes sources » — suppression de la fine bordure basse (1px solid oklch(23% 0 0 / 0.06)) sur le bandeau de couleur de chaque encart, pour toutes les palettes.

— Création de la page Accueil (Home.dc.html), établie comme nouvelle racine du site (logo, fil d'ariane et liens mis à jour sur les 3 pages).

— Nettoyage du code hérité de Components.dc.html (navigation, sommaire et données mortes supprimées).

— Rédaction du pitch d'introduction.

— Refonte de la section « Bonnes pratiques » (Cohérence, Simplicité, Accessibilité, Performance, Réutilisabilité).

— Ajout de la section « Utilisation » (copie des tokens vers GreenShift/GreenLight).

— Ajout du changelog.

— Ajout de la roadmap vers la v1.0.

— Mise en place d'un serveur local (localhost:8000) pour le développement, le temps que le site soit hébergé sur son serveur définitif.

— Ajout de la section « Exporter variables.txt » : téléchargement d'un fichier regroupant tous les design tokens, généré à partir de downloads/Stylebook variables.css.

— Correction de l'export de variables.txt : suppression de la conversion des commentaires (//Label conservé tel quel, car c'est la syntaxe requise par le Stylebook de GreenShift/GreenLight).

— Ajout de la section « Importer variables.txt » : procédure en 3 étapes pour coller le contenu dans le champ « Import from CSS code » du Stylebook GreenShift/GreenLight.

— Harmonisation de la largeur des paragraphes à 70ch (auparavant 62ch/68ch selon les sections).

— Remplacement de l'icône « Roadmap » par une boussole (titre de section et navigation).

— Components.dc.html : ajout d'une liste de sources d'icônes (Phosphor Icons, Tabler Icons, Lucide) sous la section Icons.

— Couleur de survol du bouton « Exporter variables.txt » changée pour oklch(44% 0.245 264) — Marine Blue 600.

— Correction d'un bug de survol sur les 3 pages : les styles inline empêchaient les règles style-hover de s'appliquer (conflit de spécificité CSS). Ajout de !important à l'ensemble des 45 déclarations style-hover pour rétablir tous les effets de survol du site.

— Ajout d'une capture d'écran du champ « Import from CSS code » de GreenShift/GreenLight sous les 3 étapes de la section Importer variables.txt. Correction au passage d'une balise <svg> non fermée sur l'icône de cette section.

— Renommage de Home.dc.html en index.html (préparation de la mise en ligne — servi automatiquement à la racine du domaine par la plupart des hébergeurs). Mise à jour des 11 liens internes concernés sur les 3 pages.

— Renommage de Variables.dc.html en variables.html et Components.dc.html en components.html. Mise à jour de tous les liens internes correspondants sur les 3 pages.

— Intégration de la page « Atomes » (atoms.html), adaptée à la charte graphique du site (chrome, tokens, police, icônes), avec ses 10 sections. Ajout du lien correspondant dans le menu latéral et le fil d'ariane des 3 pages existantes.

— Transfert de la section « Icons » de Composants vers Atomes (positionnée entre Avatar et Icon · Divider). Mise à jour des menus latéraux et sommaires des deux pages.

— Mise en conformité de la section « Pills & statuts » sur Atoms : commentaire de section, icône + titre h2 alignés sur le reste de la page, ajout au menu latéral et au sommaire.

— Remplacement de l'icône de la section « Divider » (Atomes) par une icône de trait horizontal, dans le titre et le menu latéral.