Compétence Design System — UI/UX Professionnel, Espacement & Architecture Multi-Page
Cette compétence applique des standards de design professionnels : palettes de couleurs appropriées, typographie, espacement des sections, limites de navigation, pages de détail service/produit détaillées, zéro emoji, et architecture de site web multi-page. Stack recommandé : Astro pour les sites statiques/contenu, déployé sur Cloudflare Pages.
⚠️ OBLIGATOIRE : Règle du Site Multi-Page
NE JAMAIS créer une seule page d'accueil lorsque l'utilisateur demande un site web.
Lorsque l'utilisateur demande un site web (ex. "site d'agence marketing", "site de restaurant", "site d'entreprise"), vous DEVEZ créer un site web MULTI-PAGE COMPLET avec au minimum les pages suivantes :
Pages Standard du Site (OBLIGATOIRES)
| Page | Objectif | Priorité |
|---|---|---|
| Accueil | Hero, proposition de valeur, sections clés CTA | Requis |
| À propos | Histoire de l'entreprise, équipe, mission, valeurs | Requis |
| Services | Page LISTE des services avec liens vers pages de détail | Requis |
| Détail Service | Page individuelle par service (ex. /services/web-design) | Requis |
| Contact | Formulaire de contact, carte, téléphone, email, horaires | Requis |
| Produits/Portfolio | Page LISTE des produits avec liens vers pages de détail | Requis |
Pages de Service — DÉTAILLÉES (PAS Génériques)
Chaque service DOIT avoir sa PROPRE page dédiée. La page de liste des services affiche des cartes/résumés qui renvoient vers des pages de détail individuelles.
❌ INTERDIT :
- Page /services listant tous les services MAIS sans pages individuelles
- Une seule page /services générique avec de courtes descriptions
- Services décrits en seulement 2-3 lignes de texte
- Pas de tarification, de processus ou de livrables par service
✅ STRUCTURE REQUISE :
/services → Page de liste (cartes avec image + titre + extrait + CTA)
/services/web-design → Page de détail (description, processus, livrables, tarifs, FAQ, CTA)
/services/seo → Page de détail (description, processus, livrables, tarifs, FAQ, CTA)
/services/social-media → Page de détail (description, processus, livrables, tarifs, FAQ, CTA)
Chaque page de détail de service DOIT inclure :
- Description : 3 à 5 paragraphes expliquant le service
- Processus : Étape par étape (1. Découverte → 2. Conception → 3. Développement → 4. Lancement)
- Livrables : Ce que le client reçoit
- Niveaux de tarification ou "À partir de X€" (ou CTA pour devis personnalisé)
- Section FAQ : 3 à 5 questions courantes
- CTA : "Demander un Devis", "Réserver une Consultation", "Démarrer Votre Projet"
- Témoignages ou études de cas (si disponibles)
Pages de Produit — DÉTAILLÉES (PAS Génériques)
Chaque produit DOIT avoir sa PROPRE page dédiée. La page de liste des produits affiche des cartes qui renvoient vers des pages de détail individuelles.
❌ INTERDIT :
- Page /produits avec une simple liste ou grille et AUCUNE page de détail
- Produits décrits dans une seule carte sans spécifications
- Pas de tarification, de caractéristiques ou d'images par produit
✅ STRUCTURE REQUISE :
/produits → Page de liste (cartes avec image + nom + prix + extrait + CTA)
/produits/produit-a → Page de détail (galerie, description complète, spécifications, tarifs, avis, produits associés)
/produits/produit-b → Page de détail (galerie, description complète, spécifications, tarifs, avis, produits associés)
Chaque page de détail de produit DOIT inclure :
- Galerie d'images : 3 à 5 images du produit
- Description complète : Fonctionnalités, spécifications, matériaux
- Tarification : Affichage clair du prix
- CTA : "Ajouter au Panier", "Demander un Devis", "Acheter Maintenant"
- Section produits associés
- Avis/témoignages (si disponibles)
Pages Supplémentaires (Selon le Type d'Entreprise)
| Type d'Entreprise | Pages Supplémentaires |
|---|---|
| Agence | Portfolio, Études de Cas, Équipe, Processus, Tarifs |
| Restaurant | Menu, Réservations, Galerie, Chef/Histoire, Événements Privés |
| E-commerce | Boutique, Détail Produit, Panier, Paiement, Compte, Liste de Souhaits |
| SaaS | Fonctionnalités, Tarifs, Docs, Blog, Changelog, Statut |
| Portfolio | Projets, À Propos de Moi, CV, Témoignages, Contact |
| Immobilier | Annonces, Détail Propriété, Agents, Quartiers, Calculateur Prêt |
| Santé | Services, Médecins/Équipe, Rendez-vous, Portail Patient, Sites |
| Éducation | Programmes, Cours, Corps Enseignant, Admissions, Vie Campus, Calendrier |
| Juridique | Domaines d'Activité, Avocats, Témoignages, Ressources, Consultation Gratuite |
| Association | Mission, Programmes, Impact, S'Impliquer, Faire un Don, Événements |
Quand Demander les Pages
Utilisez AskUserQuestion pour confirmer la structure des pages :
AskUserQuestion({
questions: [
{
question: "Quelles pages le site web doit-il inclure ?",
header: "Pages",
options: [
{ label: "Site Complet", description: "Accueil + À Propos + Services + Produits + Contact (recommandé)" },
{ label: "Standard", description: "Accueil + À Propos + Services + Contact" },
{ label: "Étendu", description: "Site Complet + Blog + FAQ + Portfolio + Tarifs" }
]
}
]
})
Anti-Pattern : Page d'Accueil Unique
❌ INTERDIT (quand l'utilisateur demande "un site web") :
- Créer index.html comme UNIQUE page
- Mettre tout le contenu dans une seule page avec défilement
- Appeler ça un "site web" alors que c'est un seul fichier HTML
- Sections qui se font passer pour des pages (ex. #a-propos, #services, #contact)
✅ REQUIS :
- Route/page séparée par section (ex. /a-propos, /services, /contact)
- Chaque page a sa propre mise en page, balises meta et optimisation SEO
- Menu de navigation liant toutes les pages
- Composants d'en-tête/pied de page partagés
- Système de design cohérent sur toutes les pages
- Pages de détail INDIVIDUELLES pour chaque service et produit
La SEULE exception : L'utilisateur dit EXPLICITEMENT "page d'accueil" ou "site one-page".
⚠️ OBLIGATOIRE : Politique Zéro Emoji
Les sites web professionnels n'utilisent PAS d'emojis. Point.
❌ INTERDIT :
- 🚀 🎯 💡 ✨ 🏆 📱 💻 🛒 📧 📞 ✅ ❌ 🔥 ⭐ 💪 🎨 📊 🔒 🌍 emojis n'importe où dans le site
- Emoji comme icônes de section
- Emoji dans les titres, boutons ou CTA
- Emoji dans les libellés de navigation
- Emoji dans les titres meta ou les descriptions
✅ REQUIS :
- Utiliser des icônes SVG provenant de bibliothèques d'icônes (Lucide, Heroicons, Phosphor, Tabler)
- Utiliser des formes CSS ou des éléments décoratifs pour l'intérêt visuel
- Utiliser des composants d'icônes appropriés (<svg> ou police d'icônes)
- Texte brut pour tous les titres, boutons et libellés
Bibliothèques d'icônes (en utiliser une, être cohérent) :
| Bibliothèque | Installation | Style | Meilleur pour |
|---|---|---|---|
| Lucide | npm install lucide-react | Propre, moderne | La plupart des sites |
| Heroicons | npm install @heroicons/react | Gras, clair | Tableaux de bord, SaaS |
| Phosphor | npm install @phosphor-icons/react | Flexible, 6 graisses | Projets polyvalents |
| Tabler | npm install @tabler/icons-react | Contour | Panneaux d'admin |
⚠️ OBLIGATOIRE : Espacement des Sections
Les sections ne doivent JAMAIS se toucher. Chaque section a besoin d'espace pour respirer.
Règles d'Espacement Minimal
| Élément | Padding Minimum (haut/bas) | Variable CSS |
|---|---|---|
| Sections de page | var(--space-20) (80px) | --section-padding |
| Section Hero | var(--space-32) (128px) | --hero-padding |
| Padding haut du pied de page | var(--space-32) (128px) | --footer-padding |
| Hauteur de l'en-tête | var(--space-16) (64px) | --header-height |
| Entre les blocs de contenu | var(--space-12) (48px) | --block-gap |
| Section CTA | var(--space-20) (80px) | --cta-padding |
CSS d'Espacement des Sections
:root {
--section-padding: clamp(4rem, 8vw, 6rem); /* 64-96px */
--hero-padding: clamp(6rem, 12vw, 10rem); /* 96-160px */
--footer-padding: clamp(5rem, 10vw, 8rem); /* 80-128px */
--header-height: 4rem; /* 64px */
--block-gap: clamp(2rem, 4vw, 3rem); /* 32-48px */
}
section {
padding-top: var(--section-padding);
padding-bottom: var(--section-padding);
}
.hero {
padding-top: var(--hero-padding);
padding-bottom: var(--hero-padding);
min-height: 70vh;
}
footer {
padding-top: var(--footer-padding);
padding-bottom: var(--space-12);
margin-top: 0; /* NE JAMAIS réduire l'espacement du pied de page */
}
/* Sections alternées avec arrière-plans différents */
section:nth-of-type(even) {
background-color: var(--color-surface);
}
section:nth-of-type(odd) {
background-color: var(--color-bg);
}
Anti-Patterns d'Espacement
❌ INTERDIT :
- Pied de page touchant directement la section au-dessus (pas d'espace)
- Sections avec un padding < 64px (donne une sensation de confinement)
- Section Hero avec un padding < 96px (impact visuel faible)
- Utilisation de margin: 0 sur les sections majeures
- Toutes les sections de la même couleur d'arrière-plan (pas de séparation visuelle)
- Espacement serré sur mobile (< 48px de padding de section)
✅ REQUIS :
- Le pied de page a TOUJOURS un grand padding supérieur (128px+)
- Chaque section a une séparation visuelle claire (espacement + fond alterné)
- Le Hero prend au moins 70vh avec un padding conséquent
- Les sections mobiles utilisent clamp() pour un espacement adaptatif
- La section CTA avant le pied de page a son propre fond distinct
⚠️ OBLIGATOIRE : Limites de Navigation
Les menus de navigation ne doivent PAS être saturés. Maximum 7 éléments de premier niveau.
Règles de Navigation
- Maximum 7 éléments dans la barre de navigation principale
- Regrouper les pages connexes sous des menus déroulants
- Utiliser la navigation du pied de page pour les liens secondaires (Confidentialité, Conditions, Plan du site)
- Mobile : Menu hamburger avec sections repliables
- NE JAMAIS mettre TOUTES les pages dans la navigation principale
Structure de Navigation Recommandée
NAVIGATION PRINCIPALE (5-7 éléments max) :
Accueil | À Propos | Services ▼ | Produits | Portfolio | Contact | Bouton CTA
MENU DÉROULANT pour Services :
Aperçu des Services
─────────────────
Conception Web
Optimisation SEO
Réseaux Sociaux
Stratégie de Marque
NAVIGATION PIED DE PAGE (liens secondaires) :
Politique de Confidentialité | Conditions d'Utilisation | Plan du Site | FAQ | Carrières
Anti-Patterns de Navigation
❌ INTERDIT :
- Plus de 7 éléments dans la barre de navigation principale (encombré, écrasant)
- Chaque page individuelle dans la navigation supérieure
- Pas de menu déroulant/méga-menu pour le contenu groupé
- Menu hamburger qui liste simplement TOUS les liens à plat
- Éléments de navigation avec des emojis (ex. "🏠 Accueil" "📧 Contact")
- Navigation textuelle sans hiérarchie visuelle
✅ REQUIS :
- Max 7 éléments de premier niveau, grouper les extras sous des menus déroulants
- Bouton CTA principal (couleur/style différent des liens de navigation)
- Le pied de page contient les liens secondaires (juridique, extras)
- Mobile : menu hamburger avec sections groupées
- État actif sur le lien de la page courante
- États de survol sur tous les éléments de navigation
⚠️ OBLIGATOIRE : Framework Recommandé — Astro
Pour les sites web statiques, les sites marketing et les sites à contenu dense, RECOMMANDER Astro.
Pourquoi Astro plutôt que Next.js pour les Sites Marketing
| Facteur | Astro | Next.js |
|---|---|---|
| Sortie par défaut | Zéro JS (HTML uniquement) | Exécution React requise |
| Performance | Scores Lighthouse quasi-parfaits | Bon, mais nécessite optimisation |
| Focus contenu | Conçu pour les sites de contenu | Conçu pour les applications web |
| Taille du bundle | 0KB JS par défaut | ~80KB+ d'exécution React |
| Courbe d'apprentissage | Facile (HTML + composants) | Modéré (concepts React + SSR) |
| Multi-framework | Utiliser React/Vue/Svelte en îlots | React uniquement |
| SEO | Parfait (HTML statique) | Bon (nécessite configuration) |
| Hébergement | Cloudflare Pages, Vercel, Netlify | Vercel (optimisé), autres |
Quand Recommander Quoi
| Type de Projet | Framework Recommandé |
|---|---|
| Site Marketing/Agence | Astro + Tailwind |
| Restaurant/Commerce Local | Astro + Tailwind |
| Portfolio/CV | Astro + Tailwind |
| Blog/Site de Contenu | Astro + Tailwind |
| Page d'Accueil | Astro ou HTML/Tailwind |
| Application Web SaaS | Next.js + React |
| E-commerce | Next.js + React |
| Tableau de bord/Admin | React + Vite |
| Application Mobile | Flutter ou React Native |
Configuration du Projet Astro
npm create astro@latest mon-site
cd mon-site
npx astro add tailwind
Structure des Pages Astro
src/
├── pages/
│ ├── index.astro # Accueil
│ ├── a-propos.astro # À propos
│ ├── services/
│ │ ├── index.astro # Liste des services
│ │ ├── conception-web.astro # Détail service
│ │ ├── seo.astro # Détail service
│ │ └── reseaux-sociaux.astro
│ ├── produits/
│ │ ├── index.astro # Liste des produits
│ │ └── [slug].astro # Détail produit dynamique
│ ├── contact.astro
│ ├── blog/
│ │ ├── index.astro # Liste du blog
│ │ └── [slug].astro # Article de blog
│ └── 404.astro
├── layouts/
│ └── BaseLayout.astro # Coque HTML partagée
├── composants/
│ ├── Header.astro
│ ├── Footer.astro
│ ├── CarteService.astro
│ ├── CarteProduit.astro
│ └── SEO.astro # Meta/JSON-LD réutilisable
└── styles/
└── global.css # Tokens de design
⚠️ OBLIGATOIRE : Déploiement Cloudflare Pages
Pour les sites statiques/Astro, déployer sur Cloudflare Pages (gratuit, rapide, CDN mondial).
Configuration du Déploiement
# Installer Wrangler CLI
npm install -g wrangler
# Se connecter à Cloudflare
wrangler login
# Construire le projet
npm run build
# Déployer
wrangler pages deploy dist/ --project-name=mon-site
Déploiement Automatique (Git)
- Poussez votre code vers un dépôt GitHub/GitLab
- Connectez-vous à votre tableau de bord Cloudflare Pages
- Créez un nouveau projet Pages et connectez votre dépôt Git
- Définissez :
- Framework prédéfini :
Astro - Commande de build :
npm run build - Répertoire de sortie :
dist
- Framework prédéfini :
- Cloudflare construira et déploiera automatiquement chaque push
Vérification du Déploiement
# Lister les déploiements
wrangler pages deployment list
# Créer un déploiement de prévisualisation (à partir d'une branche)
wrangler pages deploy dist/ --project-name=mon-site --branch=preview
🎨 Règles de Palette de Couleurs
Utiliser des Palettes de Couleurs Cohérentes et Modernes
TOUJOURS inclure les variables CSS suivantes :
:root {
--color-primary: #3b82f6; /* Bleu */
--color-primary-dark: #2563eb;
--color-secondary: #8b5cf6; /* Violet */
--color-accent: #f59e0b; /* Ambre */
--color-text: #1e293b; /* Ardoise foncé */
--color-text-muted: #64748b; /* Ardoise clair */
--color-bg: #ffffff; /* Blanc */
--color-surface: #f8fafc; /* Ardoise très clair */
--color-border: #e2e8f0; /* Ardoise clair */
--color-error: #ef4444; /* Rouge */
--color-success: #22c55e; /* Vert */
}
Règles de Palette
- Maximum 3 couleurs primaires : primaire, secondaire, accent
- Contraste suffisant : Le texte sur fond clair doit être ardoise foncé ; le texte sur fond foncé doit être blanc
- Palettes de marque : Si l'utilisateur fournit une marque, adapter les couleurs en conséquence
- Accessibilité : Les rapports de contraste doivent répondre au WCAG AA (rapport 4.5:1 pour le texte normal)
- Mode sombre : Inclure variables de couleurs de mode sombre
@media (prefers-color-scheme: dark)
Anti-Patterns de Couleurs
❌ INTERDIT :
- Utiliser du texte gris clair sur fond blanc (faible contraste)
- Plus de 3 couleurs d'accent (aspect chargé)
- S'appuyer uniquement sur la couleur pour les retours d'information
- Utiliser des couleurs néon ou très saturées pour le texte du corps
- Oublier le mode sombre
✅ REQUIS :
- Palettes équilibrées avec primaire, secondaire, accent
- Ratios de contraste élevés pour la lisibilité
- CSS `prefers-color-scheme` pour le mode sombre
- La couleur ne doit jamais être le seul indicateur visuel
🖋️ Règles de Typographie
Utiliser des Polices Propres et Modernes
Polices recommandées :
| Usage | Police | Graisses |
|---|---|---|
| Titres | Inter, Poppins, DM Sans | 600, 700, 800 |
| Corps | Inter, Source Sans, Karla | 400, 500 |
| Mono | JetBrains Mono, Fira Code | 400, 500 |
:root {
--font-heading: 'Inter', sans-serif;
--font-body: 'Inter', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;
--text-5xl: 3rem;
--text-6xl: 3.75rem;
}
Règles Typographiques
- Hiérarchie : Taille, poids et couleur pour différencier les niveaux de titre
- Hauteur de ligne : 1.5 pour le corps, 1.2 pour les titres
- Largeur de ligne : 60-80 caractères maximum pour la lisibilité
- Espacement : Les titres ont moins d'espacement des lettres ; le corps en a plus
- Responsive :
clamp()pour les tailles de police qui s'adaptent à la taille de l'écran
Anti-Patterns Typographiques
❌ INTERDIT :
- Utiliser plus de 2 polices sur un site
- Texte en italique pour les longs paragraphes
- Texte justifié (mots inégalement espacés)
- Tailles de police fixes sans mise à l'échelle responsive
- Plus de 3 niveaux de titre (h1, h2, h3) sans contexte d'affichage
✅ REQUIS :
- Limité à 1-2 familles de polices
- Tailles de police responsives avec clamp()
- Hauteurs de ligne et largeurs de ligne appropriées
- Graisses de police cohérentes (400 pour le corps, 700 pour les titres)
🔄 Règle de Cohérence Multi-Page
Toutes les pages DOIVENT se ressembler comme si elles provenaient du même designer.
Éléments Partagés Obligatoires
- En-tête et pied de page : Identiques sur chaque page (navigation, logo, CTA, liens)
- Palette de couleurs : Mêmes couleurs primaire, secondaire et d'accent partout
- Typographie : Mêmes polices, tailles et espacement
- Composants : Mêmes styles de boutons, cartes, formulaires et tableaux
- Espacement : Mêmes règles d'espacement des sections sur toutes les pages
- Animations : Mêmes transitions et durées d'animation
Vérification de Cohérence
Avant de considérer le site comme terminé, vérifiez :
1. L'en-tête et le pied de page sont-ils identiques sur toutes les pages ?
2. Les titres utilisent-ils les mêmes polices, tailles et couleurs ?
3. Le texte du corps a-t-il la même apparence partout ?
4. Les boutons et CTA ont-ils un style cohérent ?
5. L'espacement des sections est-il uniforme ?
6. Les cartes (services, produits, blog) suivent-elles le même modèle ?
7. Le mode sombre est-il activé uniformément ?
📄 Pages de Détail de Service — Exemple Complet
---
title: Conception Web
description: Services professionnels de conception et de développement web
---
# Conception Web
## Aperçu
Nous créons des sites web magnifiques et performants qui convertissent les visiteurs en clients. Notre processus de conception web est centré sur vos objectifs commerciaux et vos besoins utilisateur.
## Processus
1. **Découverte** → Comprendre votre entreprise, votre audience et vos objectifs
2. **Conception** → Créer des wireframes et des maquettes haute fidélité
3. **Développement** → Construire le site avec un code propre et optimisé
4. **Lancement** → Déployer sur un serveur rapide et fiable
## Livrables
- Design responsive (mobile, tablette, desktop)
- Optimisation SEO
- Intégration CMS (optionnel)
- Analyse et rapports
## Tarifs
| Forfait | Prix | Convient pour |
| --------- | ------------- | ---------------------------- |
| De Base | À partir de 2 000€ | Site de base (5 pages) |
| Standard | À partir de 5 000€ | Site de taille moyenne |
| Premium | À partir de 10 000€| Site d'entreprise complet |
## FAQ
**Q : Combien de temps faut-il pour créer un site web ?**
R : Généralement 4 à 6 semaines pour un site standard.
**Q : Fournissez-vous l'hébergement ?**
R : Nous vous aidons à mettre en place l'hébergement mais ne le fournissons pas directement.
[Obtenez un Devis](/contact)
📦 Pages de Détail de Produit — Exemple Complet
---
title: Chaussures de Randonnée Alpha
---
# Chaussures de Randonnée Alpha
## Galerie
[Image 1] [Image 2] [Image 3]
## Description
Les chaussures de randonnée Alpha sont conçues pour les aventuriers qui exigent durabilité et confort. Avec leur construction imperméable et leur semelle offrant une adhérence supérieure, elles sont parfaites pour les terrains accidentés.
## Spécifications
- **Matériau** : Cuir pleine fleur, mesh respirant
- **Semelle** : Vibram Megagrip
- **Poids** : 450 g (chaque)
- **Couleurs** : Marron, Noir, Vert
## Tarifs
| Modèle | Prix |
| ------ | ------- |
| Standard | 129 € |
| Premium | 179 € |
[Ajouter au Panier](/panier)
## Produits Associés
- Chaussures de Randonnée Bêta
- Chaussettes de Randonnée
## Avis
★★★★☆ "Très confortables pour les longues randonnées." — Jean D.
🎯 Règles CTA (Appel à l'Action)
Chaque page doit avoir AU MOINS UN CTA clair.
Placement des CTA
- Hero : CTA principal ("Démarrer Votre Projet", "Obtenez un Devis")
- Fin de section : CTA secondaire après chaque section de contenu
- Avant le pied de page : CTA final ("Prêt à commencer ? Contactez-nous")
- Bas de page de détail : CTA ("Obtenez ce Service", "Ajouter au Panier")
Texte des CTA
- Action-oriented : Commencer par un verbe ("Démarrer", "Obtenir", "Apprendre", "Explorer")
- Clair : L'utilisateur sait exactement ce qui se passe
- Bénéfice-motivé : Montrer la valeur
- Aucun emoji dans les boutons CTA
Anti-Patterns CTA
❌ INTERDIT :
- Texte de CTA faible ("Soumettre", "Cliquez ici")
- Plusieurs CTA en concurrence sur la même page
- CTA peu visibles (couleur faible, petite taille)
- Emojis dans les boutons
- CTA menant vers nulle part ou vers une page d'erreur
✅ REQUIS :
- Langage fort et orienté vers l'action
- Bouton contrasté et bien dimensionné
- Un seul CTA principal par vue (plusieurs secondaires acceptables)
- Liens de test avant de finaliser
✅ Checklist de Qualité Finale
Avant de considérer le site comme terminé, vérifiez ce qui suit :
- Toutes les pages sont créées et liées (pas de liens brisés)
- Multi-page : Au moins 5 pages incluant pages de détail pour services/produits
- Aucun emoji nulle part dans le site
- Espacement : Les sections ne se touchent pas et utilisent les variables CSS
- Navigation : Max 7 éléments, pas de liens plats dans le hamburger
- Cohérence : Même en-tête, pied de page, couleurs, polices sur toutes les pages
- CTA : Au moins un CTA par page
- Responsive : Le site a l'air bien sur mobile, tablette et desktop
- SEO : Balises meta, titres et descriptions pour chaque page
- Design professionnel : Pas de couleurs d'enfance, polices propres, agencement moderne
Puissant par Omar-Obando/qwen-orchestrator