Testez vos fonts ci-dessous (en modifiant la 'font-family'), avec les critères suivants :

• Vérifier que les caractères spéciaux sont bien pris en compte, notamment les lettres accentuées, œ, ç, @ et le &.
• Vérifier que les chiffres et les textes sont au même niveau
• Vérifier que les majuscules et minuscules sont cohérentes
• Vérifier que la typographie est bien centrée verticalement pour permettre une bonne intégration

--font-primary (font-primary) A a B b C c D d E e F f G g H h I i J j K k L l M m N n O o P p Q q R r S s T t U u V v W w X x Y y Z z 0 1 2 3 4 5 6 7 8 9 À Â É È Ê Ë Î Ï Ô Ù Û Ü Ç Æ Œ à â é è ê ë î ï ô ù û ü ç æ œ & @
La cigüe, un coq naïf, fête son 1er anniversaire en décembre. L'été, l'île rêve de crêpes exquises. Jean-François, l'élève méritant, réussit l'examen avec un 9 sur 10. Zoé et Éléonore, deux sœurs, jouent à l'étang. Le café, agrémenté d'un zeste de citron, offre une expérience unique. Le château médiéval est majestueux avec ses flèches élancées. Le théâtre éblouit grâce à ses effets spéciaux. Le numéro 42, mystérieux, s'affiche en grand sur la façade. Michel, le créateur de bijoux, excelle dans son art. Cet après-midi, profitez d'un moment de détente avec votre musique préférée, un bon livre & une tasse de thé chaud.

--font-display (font-display) A a B b C c D d E e F f G g H h I i J j K k L l M m N n O o P p Q q R r S s T t U u V v W w X x Y y Z z 0 1 2 3 4 5 6 7 8 9 À Â É È Ê Ë Î Ï Ô Ù Û Ü Ç Æ Œ à â é è ê ë î ï ô ù û ü ç æ œ & @
La cigüe, un coq naïf, fête son 1er anniversaire en décembre. L'été, l'île rêve de crêpes exquises. Jean-François, l'élève méritant, réussit l'examen avec un 9 sur 10. Zoé et Éléonore, deux sœurs, jouent à l'étang. Le café, agrémenté d'un zeste de citron, offre une expérience unique. Le château médiéval est majestueux avec ses flèches élancées. Le théâtre éblouit grâce à ses effets spéciaux. Le numéro 42, mystérieux, s'affiche en grand sur la façade. Michel, le créateur de bijoux, excelle dans son art. Cet après-midi, profitez d'un moment de détente avec votre musique préférée, un bon livre & une tasse de thé chaud.

• Tous les éléments graphiques en svg seront intégrés comme les icons avec NuxtIcon. Pas besoin d'optimiser les fichiers, le module s'en occupe.
• Collection icon: — dossier layers/2-optimus-factory/app/assets/icons/
• Collection theme: — dossier layers/3-theme/app/assets/icons/
• 🚨 Si vos icônes ne s'affichent pas: il faudra peut-être regénérer frontend et relancer la stack, et si cela ne fonctionne pas il faut supprimer le cache de Nuxt.

• Ce dernier s'intègre directement dans l'administration de Strapi via le content-type 'Configuration'
• Intégrez le content-type (Single type) 'Configuration' dans le code du CMS
• Intégrez l'appel global de la configuration et le lien vers le favicon dans app.vue - Exemple GIT
• En admin dans Content Manager > Configuration intégrez les logos dans l'ordre suivant : logo principal (couleur), logo alternatif (blanc) et favicon
• Testez le rendu de vos logos ci-dessous

• Couleurs définies dans layers/3-theme/app/assets/css/tailwind.css via @theme { --color-* }
• Utilisation Tailwind : bg-primary, text-secondary, border-tertiary…

• Si besoin d'ajuster le design de la scrollbar : assets/styles/base/scrollbar.sass

• Ajustez le design de vos textes de base : assets/styles/abstracts/variables.sass & assets/styles/base/typographie.sass
• Testez vos différents design de texte ci-dessous (normal, gras, italique) :

Lorem ipsum dolor sit amet utque aegrum corpus quassari etiam levibus solet offensis,
ita animus eius angustus et tener, quicquid increpuisset, ad salutis suae dispendium existimans
factum aut cogitatum, insontium caedibus fecit victoriam luctuosam.
Explanare nunc causam, quae ad exitium praecipitem Aginatium inpulit iam inde,
a priscis maioribus nobilem, ut locuta est pertinacior fama.

• Intégrez le composant AtomFullText
• Vous pouvez modifier le design des liens et listes à puce dans ce composant.

• Intégrez le composant AtomTitle
• Designs disponibles : big (défaut), small
• Couleur via --theme-accent — héritée du parent theme-*

• Intégrez le composant : AtomButton
• Attention celui-ci est dépendant du composant : AtomLink
• Testez vos différents designs ci-dessous :

• Intégrez le composant : MoleculeButtons
• Attention celui-ci est dépendant du composant : AtomButton
• Testez les différents designs ci-dessous :

• Intégrez le composant MoleculeCollapsible
• Attention celui-ci est dépendant des composants : AtomFullText | AtomButton
• Testez votre design ci-dessous :

• Intégrez les composants : OrganismTextualContentSimple | OrganismTextualContentRich
• Attention celui-ci est dépendant des composants AtomTitle, AtomButton, AtomFullText, MoleculeCollapsible, AtomImage
• Testez votre design ci-dessous :

• Intégrez le composant MoleculeDropdown
• Ce composant permet d'ouvrir un contenu en 'absolute' à partir d'un bouton déclencheur.
• Exemple d'utilisation: localeSwitcher, sous-navigation,...
• Attention celui-ci est dépendant des composants : AtomDropdownTrigger | AtomDropdownContent
• Il faut également ajouter le package suivant dans frontend: yarn add @vueuse/core
• Testez le fonctionnement et les designs (si besoin) ci-dessous :

• Intégrez le composant OrganismLocaleSwitcher
• Attention celui-ci est dépendant des composants MoleculeDropdown
• Testez votre design ci-dessous :

• Intégrez le composant MoleculeLinkedIcons
• Attention celui-ci est dépendant du composant AtomLink
• Ce composant permet de rendre un icône entouré d'un lien. Il peut être utilisé pour rendre les réseaux sociaux du client, les données de contact (téléphone, email, situation...),...
• La couleur des icônes se pilote via la prop color-class : is-color-primary (défaut), is-color-secondary ou is-color-light (blanc — à utiliser sur fond coloré).
• Testez votre design ci-dessous :

• Intégrez le composant MoleculeContact.vue et le fichier de types associé Contact.ts
• Ce composant permet de rendre les données de contact du client (nom de l'établissement, email, téléphone, ainsi que son adresse).
• Testez votre design ci-dessous :

Le plan du site se paramètre en admin dans le content-type unique 'Plan du site'.

• Intégrer un titre de page et paramétrer les pages: slug
• Paramétrer les entrées pour chaque contentType avec le slug(ex: pages) et le nom de la section (ex: Pages)
• Au démarrage du projet vous n'aurez que 'pages', il faudra ajouter les collections au fur et à mesure.
• Contrôler et ajuster le design de la page et des titres: frontend/pages/sitemap.vue

• Intégrez le composant OrganismAffiliations (layer 2)
• Les données ci-dessous viennent directement du content-type Strapi affiliation (via useCollection() )
• La prop content attend des groupes ( AffiliationsAffiliationsList[] ) — pas encore branché à un singleton (ex: footer), donc on regroupe ici la collection brute dans un groupe unique pour la prévisualisation
• Une affiliation avec un lien rend une image cliquable, sans lien elle rend l'image seule