# design.md — Design system TCA Industries > Ce fichier contient toutes les informations design du projet : charte graphique officielle, logos, typographies, photos, lien Figma de la maquette de référence. > Source officielle de la charte : `MINI-CHARTE_GRAPHIQUE_TCA.pdf` réalisée par **Luciole Studio** en 2024 (disponible dans le drive partagé). > > **Claude Code doit respecter scrupuleusement cette charte graphique.** En cas de doute sur un point design, demander à Gabin. --- ## 1. Identité visuelle TCA Industries ### 1.1 Positionnement de marque - **Style** : moderne, haut de gamme, masculin - **Secteur** : industrie, mécanique, électromécanique - **Public mixte** : B2B industriels + B2C particuliers - **Ton visuel attendu** : sobre, technique, professionnel, mais accessible ### 1.2 Symbolique du logo Le symbole rond du logo TCA fusionne **4 éléments** qui représentent les valeurs de l'entreprise : | Élément | Signification | |---|---| | **Engrenage** | Industrie, mécanique, savoir-faire technique | | **Cible** | Précision, expertise, justesse | | **Chronomètre** | Réactivité, dépannage dans la journée | | **Puzzle** | Assemblage, solution complète, intégration | Cette symbolique peut être mentionnée subtilement sur la page À propos pour renforcer le storytelling, mais ne doit pas être surexploitée visuellement. --- ## 2. Couleurs officielles ### 2.1 Palette principale La charte définit **4 couleurs uniquement**. Claude Code ne crée pas de nouvelles couleurs sans validation. Les variations (hover, focus, opacity) doivent être dérivées de ces 4 couleurs de base. | Nom | HEX | RGB | CMJN (print) | Usage principal | |---|---|---|---|---| | Gris Anthracite | `#252626` | rgb(37, 38, 38) | C73 M63 J59 N75 | Textes, fonds sombres alternatifs | | Bleu Pétrole | `#0D4156` | rgb(13, 65, 86) | C98 M68 J49 N30 | Couleur principale, fonds CTA, footer | | Doré | `#D8AB65` | rgb(216, 171, 101) | C15 M33 J66 N4 | Accents, surlignages, détails premium | | Blanc | `#FFFFFF` | rgb(255, 255, 255) | C0 M0 J0 N0 | Fond principal du site, textes sur fond foncé | ### 2.2 Variables CSS à implémenter ```css :root { /* Couleurs primaires charte */ --color-anthracite: #252626; --color-petrol: #0D4156; --color-gold: #D8AB65; --color-white: #FFFFFF; /* Variations utilitaires (à dériver, ne pas inventer d'autres couleurs) */ --color-petrol-light: #1A5972; --color-petrol-dark: #062F3F; --color-gold-light: #E4BD83; --color-gold-dark: #BE9550; --color-anthracite-light: #3A3B3B; /* Gris fonctionnels (UI uniquement, pas de la charte) */ --color-gray-50: #F8F8F8; --color-gray-100: #EEEEEE; --color-gray-200: #DDDDDD; --color-gray-400: #999999; --color-gray-600: #666666; } ``` ### 2.3 Usage des couleurs par contexte | Élément UI | Couleur conseillée | |---|---| | Fond principal du site | Blanc `#FFFFFF` | | Texte principal | Gris Anthracite `#252626` | | Titres H1, H2 | Bleu Pétrole `#0D4156` | | Liens textuels | Bleu Pétrole `#0D4156` | | Liens au survol | Doré `#D8AB65` | | Bouton CTA principal (téléphone, devis) | Fond Bleu Pétrole, texte Blanc | | Bouton secondaire | Contour Bleu Pétrole, texte Bleu Pétrole, fond transparent | | Bouton au survol | Fond Doré, texte Anthracite | | Section CTA "urgence" | Fond Anthracite ou Bleu Pétrole, texte Blanc | | Footer | Fond Bleu Pétrole, texte Blanc | | Badges, tags | Fond Doré, texte Anthracite | | Bordures de cartes | Gris très clair `#EEEEEE` | | Accent décoratif (trait, séparateur) | Doré `#D8AB65` | ### 2.4 Règles de contraste - Texte sur fond blanc : Anthracite ou Bleu Pétrole (ratio AA respecté) - Texte sur fond bleu pétrole : Blanc uniquement (pas de doré sur pétrole pour la lisibilité) - Texte sur fond doré : Anthracite uniquement - Ne jamais mettre du gris clair sur fond blanc (problème de lisibilité) --- ## 3. Typographies ### 3.1 Les 2 polices de la charte **URBANIST** — police pour le **corps de texte** - Sans-serif géométrique moderne, Google Font - Conçue à partir de formes élémentaires - Neutralité élevée, polyvalente pour print et web - Usage : tout le texte courant (paragraphes, listes, légendes, boutons) **KAELIA** — police pour les **titres et accents** - Police minimaliste et audacieuse - Très lisible - Identité forte grâce à son originalité et sa rondeur - Version utilisée pour le logo : **KAELIA SEMIBOLD** - Usage : H1, H2, H3, chiffres mis en avant, baselines ### 3.2 Hiérarchie typographique web | Élément | Police | Graisse | Taille desktop | Taille mobile | |---|---|---|---|---| | H1 | Kaelia SemiBold | 600 | 48px / 3rem | 32px / 2rem | | H2 | Kaelia SemiBold | 600 | 32px / 2rem | 26px / 1.6rem | | H3 | Kaelia SemiBold | 600 | 24px / 1.5rem | 20px / 1.25rem | | H4 | Urbanist Bold | 700 | 20px / 1.25rem | 18px / 1.125rem | | Body | Urbanist Regular | 400 | 16px / 1rem | 16px / 1rem | | Small | Urbanist Regular | 400 | 14px / 0.875rem | 14px / 0.875rem | | Boutons | Urbanist SemiBold | 600 | 16px / 1rem | 16px / 1rem | | Baseline / Eyebrow | Kaelia | 400 | 14px uppercase | 12px uppercase | Line-height conseillé : - Titres : 1.2 - Body : 1.6 - Small : 1.4 ### 3.3 Fichiers de polices dans le projet Les polices sont placées dans le projet à `/public/fonts/` : ``` /public/fonts/ ├── kaelia/ │ └── kaelia-semibold.otf (à convertir en .woff2) └── urbanist/ ├── urbanist-regular.otf (à convertir en .woff2) ├── urbanist-medium.otf (à convertir en .woff2) ├── urbanist-semibold.otf (à convertir en .woff2) └── urbanist-bold.otf (à convertir en .woff2) ``` ### 3.4 Conversion en WOFF2 — obligatoire pour la performance web Les fichiers `.otf` du drive doivent être convertis en `.woff2` avant l'intégration web : - WOFF2 est compressé (gain de poids 30 à 50%) - Supporté par tous les navigateurs modernes - Indispensable pour atteindre le Lighthouse 100/100 **Outil de conversion recommandé** : [transfonter.org](https://transfonter.org/) (gratuit, en ligne). Claude Code peut aussi le faire automatiquement avec une commande type : ```bash # Via Python fonttools (à installer si besoin) fonttools ttLib.woff2 compress /public/fonts/urbanist/urbanist-regular.otf ``` ### 3.5 Déclaration CSS @font-face ```css @font-face { font-family: 'Urbanist'; src: url('/fonts/urbanist/urbanist-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Urbanist'; src: url('/fonts/urbanist/urbanist-semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Urbanist'; src: url('/fonts/urbanist/urbanist-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Kaelia'; src: url('/fonts/kaelia/kaelia-semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } ``` **Préchargement** dans le `` du `base.html.twig` : ```html ``` ### 3.6 Vérification licence Kaelia ⚠️ **Important** : la police **Kaelia est une police commerciale** (pas une Google Font gratuite). Avant la mise en production du site, **vérifier avec Luciole Studio que la licence inclut bien l'usage web**. - Si licence **desktop seulement** : il faut acheter la licence web Kaelia, ou utiliser une police de remplacement - Si licence **web incluse** : tout est OK, on peut utiliser le fichier dans `/public/fonts/` **Police de remplacement web** si la licence Kaelia n'est pas obtenue à temps : - **Fraunces** (Google Font, style premium minimaliste, gratuite) - **DM Serif Display** (Google Font, premium, gratuite) - **Inter** (Google Font, ultra-versatile, gratuite — option de secours sans risque) Si remplacement nécessaire, mettre à jour les variables CSS et `@font-face` en conséquence sans toucher au reste du design. --- ## 4. Logos ### 4.1 Inventaire des fichiers logo dans le projet Les logos sont placés dans `/public/logos/`. Chaque dossier contient les **4 versions couleur** au format SVG : ``` /public/logos/ ├── HORIZONTALE/ │ ├── LOGO-TCA-RVB_HORIZONTALE-COULEUR.svg │ ├── LOGO-TCA-RVB_HORIZONTALE-BLEU.svg │ ├── LOGO-TCA-RVB_HORIZONTALE-NOIR.svg │ └── LOGO-TCA-RVB_HORIZONTALE-RESERVE.svg ├── HORIZONTALE BASELINE/ │ ├── LOGO-TCA-RVB_HORIZONTALE-BASELINE-COULEUR.svg │ ├── LOGO-TCA-RVB_HORIZONTALE-BASELINE-BLEU.svg │ ├── LOGO-TCA-RVB_HORIZONTALE-BASELINE-NOIR.svg │ └── LOGO-TCA-RVB_HORIZONTALE-BASELINE-RESERVE.svg ├── HORIZONTALE BASELINE TRAIT/ ├── SANS SYMBOLE/ ├── SANS SYMBOLE BASELINE/ ├── SYMBOLE/ ├── VERTICALE/ └── VERTICALE BASELINE/ ``` ### 4.2 Comprendre les variantes **Dispositions** (8 au total) : - **HORIZONTALE** : symbole rond + "TCA INDUSTRIES" côte à côte (compact) - **HORIZONTALE BASELINE** : version horizontale + baseline "FOURNITURES ET RÉPARATIONS" - **HORIZONTALE BASELINE TRAIT** : version horizontale + baseline + trait décoratif doré terminé par un point - **SANS SYMBOLE** : uniquement la typo "TCA INDUSTRIES" (sans symbole rond) - **SANS SYMBOLE BASELINE** : typo + baseline (sans symbole) - **SYMBOLE** : uniquement le rond avec engrenage (sans texte) - **VERTICALE** : symbole rond au-dessus, "TCA INDUSTRIES" en dessous - **VERTICALE BASELINE** : version verticale + baseline **Couleurs** (4 par disposition) : - **COULEUR** : version principale, bleu pétrole avec accent doré sur le "C" et la baseline - **BLEU** : version uniforme bleu pétrole (pas de doré) - **NOIR** : monochrome noir (pour print contraint ou usages spécifiques) - **RESERVE** : version blanche (pour fonds sombres) ### 4.3 Choix de la variante par contexte d'usage Claude Code doit utiliser la **bonne variante au bon endroit**. Voici la table de référence : | Contexte | Disposition | Couleur | Fichier exact | |---|---|---|---| | Header (fond blanc) | HORIZONTALE BASELINE | COULEUR | `LOGO-TCA-RVB_HORIZONTALE-BASELINE-COULEUR.svg` | | Header version sticky compact (mobile) | HORIZONTALE | COULEUR | `LOGO-TCA-RVB_HORIZONTALE-COULEUR.svg` | | Footer (fond bleu pétrole) | HORIZONTALE BASELINE | RESERVE | `LOGO-TCA-RVB_HORIZONTALE-BASELINE-RESERVE.svg` | | Section CTA fond anthracite | HORIZONTALE BASELINE | RESERVE | `LOGO-TCA-RVB_HORIZONTALE-BASELINE-RESERVE.svg` | | Favicon | SYMBOLE | COULEUR | `LOGO-TCA-RVB_SYMBOLE-COULEUR.svg` | | Touch icon iOS / Android | SYMBOLE | COULEUR (export PNG 512×512) | `LOGO-TCA-RVB_SYMBOLE-COULEUR.svg` | | Image Open Graph (partage social) | HORIZONTALE BASELINE | COULEUR (export PNG 1200×630) | `LOGO-TCA-RVB_HORIZONTALE-BASELINE-COULEUR.svg` | | Watermark / petits espaces | SYMBOLE | COULEUR ou NOIR | `LOGO-TCA-RVB_SYMBOLE-*.svg` | | Logo sur photo sombre (overlay) | HORIZONTALE | RESERVE | `LOGO-TCA-RVB_HORIZONTALE-RESERVE.svg` | | Documentation imprimable monochrome | HORIZONTALE BASELINE | NOIR | `LOGO-TCA-RVB_HORIZONTALE-BASELINE-NOIR.svg` | ### 4.4 Règles d'utilisation du logo #### Zone de protection (obligatoire) Autour du logo, **un espace vide doit toujours être préservé** pour ne pas perturber sa lisibilité. **Règle** : la zone de protection équivaut à la hauteur du "I" de "INDUSTRIES" dans le logo. Aucun texte, image, bouton ou élément graphique ne doit empiéter sur cette zone. En CSS, prévoir un `padding` ou `margin` minimum autour du logo dans tous les composants. #### Taille minimale Pour préserver la lisibilité, ne jamais descendre en-dessous de : | Version | Taille minimale print | Équivalent web | |---|---|---| | Logo avec baseline | 40 mm de large | environ 150 px de large | | Logo sans baseline | 20 mm de large | environ 75 px de large | | Symbole seul | 20 mm de large | environ 75 px de large | Sur le web, on évite d'afficher le logo plus petit que ces tailles pour ne pas casser sa lisibilité. #### Ce qu'il ne faut JAMAIS faire avec le logo - Modifier les couleurs du logo (utiliser uniquement les 4 variantes officielles) - Étirer ou déformer le logo (toujours conserver les proportions originales) - Ajouter un effet (ombre, contour, dégradé, transparence) - Rotation du logo - Placer le logo sur un fond qui nuit à sa lisibilité - Recadrer ou amputer le logo - Recréer ou redessiner le logo - Modifier la typographie du logo - Utiliser le logo en JPG ou PNG sur le site (toujours SVG pour le web) #### Format obligatoire pour le web - **Toujours SVG** sur le site (vectoriel, qualité parfaite, poids minimal) - PNG accepté uniquement pour favicon (16×16, 32×32, 192×192) et Open Graph (1200×630) - Jamais de JPG pour le logo --- ## 5. Photos ### 5.1 Source des photos Les photos sont fournies par TCA dans `/public/images/` du projet. Elles sont **en vrac** au démarrage avec des noms non descriptifs (`0002.jpg`, `0003.jpg`...). Toutes sont des photos professionnelles, sujets industriels (moteurs, roulements, showroom, atelier). ### 5.2 Traitement initial des photos par Claude Code **Première action de Claude Code sur les photos au démarrage du projet** : #### Étape 1 — Analyser chaque image Ouvrir chaque image dans `/public/images/` et identifier le sujet visible : - Moteur électrique - Roulement / palier - Engrenage / réducteur - Pompe - Rayonnage / stock / showroom - Atelier (vue d'ensemble ou détail technique) - Technicien au travail (avec ou sans visage) - Façade / extérieur entreprise - Vis / outillage / fournitures #### Étape 2 — Renommer en kebab-case descriptif Convention : `{sujet-principal}-{contexte}-tca.{ext}` Exemples : - `0002.jpg` → `moteur-electrique-bleu-tca.webp` - `0003.jpg` → `roulement-industriel-atelier-tca.webp` - `0008.jpg` → `roulement-bille-detail-tca.webp` - `0034.jpg` → `showroom-stock-fournitures-tca.webp` - `0037.jpg` → `roulement-blanc-presentation-tca.webp` **Règle** : le nom doit décrire le sujet pour être à la fois lisible humainement et utile au SEO (les noms de fichier sont un signal pour Google Images). #### Étape 3 — Convertir en WebP Conversion obligatoire pour la performance Lighthouse : - JPG/PNG sources → WebP qualité 80-85 - Conserver les dimensions originales (haute résolution) - Compresser à max 200 Ko par image standard - Compresser à max 300 Ko pour l'image hero principale - Conserver une version `.jpg` fallback uniquement pour les très anciens navigateurs si besoin (via ``) #### Étape 4 — Ranger dans la bonne arborescence Réorganiser les photos par usage : ``` /public/images/ ├── hero/ ← 4 à 6 photos hero (homepage + pages services principales) │ ├── hero-home-atelier-tca.webp │ ├── hero-moteur-electrique-tca.webp │ ├── hero-bobinage-stator-tca.webp │ ├── hero-pompe-immergee-tca.webp │ └── hero-showroom-tca.webp ├── atelier/ ← Photos de l'atelier de réparation │ ├── atelier-vue-ensemble-tca.webp │ ├── atelier-rebobinage-moteur-tca.webp │ ├── atelier-remplacement-roulement-tca.webp │ └── ... ├── showroom/ ← Photos du magasin / showroom / stock │ ├── showroom-rayonnage-stock-tca.webp │ ├── showroom-accueil-comptoir-tca.webp │ └── ... ├── services/ ← Photos illustratives par service │ ├── service-moteur-electrique-tca.webp │ ├── service-roulement-transmission-tca.webp │ ├── service-pompe-relevage-tca.webp │ ├── service-reducteur-motoreducteur-tca.webp │ ├── service-variateur-vitesse-tca.webp │ └── ... ├── products/ ← Photos produits / détails techniques │ ├── produit-moteur-leroy-somer-tca.webp │ ├── produit-roulement-skf-tca.webp │ └── ... └── team/ ← Photos équipe (uniquement si TCA donne l'accord) ├── team-collective-tca.webp └── (vide tant que TCA n'a pas validé) ``` #### Étape 5 — Reporter à Gabin Une fois le tri terminé, Claude Code produit un **rapport** dans un fichier `IMAGES_REPORT.md` à la racine du projet listant : - Nombre total d'images traitées - Liste des images conservées avec leur nouveau nom et leur usage prévu - Liste des images écartées (doublons, qualité insuffisante, sujet non identifiable, etc.) avec la raison - Demandes éventuelles (photos manquantes pour certaines pages) Gabin valide ou ajuste avant que Claude Code utilise ces images dans le site. ### 5.3 Règles d'utilisation des photos sur le site #### Qualité minimum - Toutes les photos doivent être **professionnelles** (celles du drive le sont déjà) - Pas de photos de stock générique (Unsplash, Pexels, Pixabay) — tout doit être du contenu TCA - Si une photo manque pour un usage spécifique, Claude Code utilise un placeholder de couleur unie (bleu pétrole avec opacity réduite) plutôt qu'une photo de stock #### Attributs HTML obligatoires Chaque `` du site doit avoir : - `alt` descriptif (max 125 caractères, contient le mot-clé de la page quand pertinent) - `width` et `height` définis (anti-CLS) - `loading="lazy"` (sauf image hero LCP) - `decoding="async"` Pour l'image hero (LCP) : - `fetchpriority="high"` - `loading="eager"` - Preload dans le `` #### Élément `` recommandé Pour le maximum de compatibilité et performance : ```html Atelier de réparation de moteurs électriques TCA Industries à Clermont-Ferrand ``` ### 5.4 Affectation des photos par page Indication pour Claude Code une fois les photos triées : | Page | Photos suggérées | |---|---| | Accueil — Hero | hero/hero-home-atelier-tca.webp | | Accueil — Section domaines | services/service-moteur-electrique-tca.webp, service-pompe-relevage-tca.webp, service-reducteur-motoreducteur-tca.webp, service-roulement-transmission-tca.webp | | Accueil — Section valeurs | showroom/showroom-rayonnage-stock-tca.webp | | Réparation moteur électrique | hero/hero-moteur-electrique-tca.webp + atelier/atelier-rebobinage-moteur-tca.webp | | Bobinage moteur électrique | hero/hero-bobinage-stator-tca.webp + plusieurs photos atelier détaillées | | Réducteurs et motoréducteurs | services/service-reducteur-motoreducteur-tca.webp | | Pompes industrielles | hero/hero-pompe-immergee-tca.webp | | Pompes particuliers | services/service-pompe-relevage-tca.webp | | Variateurs de vitesse | atelier/atelier-electrique-variateur-tca.webp (si disponible) | | Transmissions mécaniques | products/produit-roulement-skf-tca.webp + showroom rayonnage | | Réparation pompe immergée | hero/hero-pompe-immergee-tca.webp | | Fournitures industrielles | showroom/showroom-rayonnage-stock-tca.webp + showroom-accueil-comptoir-tca.webp | | Maintenance industrielle | atelier/atelier-technicien-intervention-tca.webp | | À propos | hero/hero-home-atelier-tca.webp + team/team-collective-tca.webp | Cette affectation est indicative. Claude Code peut ajuster selon les photos réellement disponibles après tri. --- ## 6. Maquette Figma ### 6.1 Lien Figma de référence **URL Figma de la maquette** (réalisée par Waqas, designer Vultek) : https://www.figma.com/design/FcijfL9oOOGie1QImXpy1t/TCA-INDUSTRIES?node-id=0-1&t=KcZvIQf4dPPVVmpD-1 Claude Code a normalement accès au Figma via le **Figma MCP** configuré sur le poste de Gabin. Il peut : - Inspecter chaque écran et chaque composant - Récupérer les valeurs exactes (couleurs, espacements, tailles, border-radius, shadows) - Lire les variables Figma si elles sont définies - Identifier les états (normal, hover, focus, disabled) ### 6.2 Règle fondamentale : la maquette est une référence, pas une cage Cette règle est **critique** pour ne pas bloquer le développement. #### Ce qui s'applique strictement depuis la maquette - Le design system (couleurs, fontes, espacements, border-radius, shadows) - Le style des composants UI réutilisables (boutons, cartes, accordéons, formulaires) - La hiérarchie visuelle (tailles relatives, contrastes, importance) - L'identité graphique globale (sobriété, espace blanc, traits dorés...) #### Ce qui peut être adapté librement - Le nombre de sections par page (le réel peut avoir besoin de plus/moins que la maquette) - Le contenu textuel exact (vient des fichiers `.md`, pas de la maquette) - L'ordre des sections si une logique de conversion meilleure se présente - Les sections non maquettées (Claude Code les crée en réutilisant les composants existants) - Les pages non maquettées (mêmes principes appliqués) #### En cas d'écart entre maquette et besoin réel Claude Code priorise dans cet ordre : 1. La charte graphique officielle (`design.md`, ce fichier) 2. Les exigences SEO (`CLAUDE.md` section 6 + `seo-strategy.md`) 3. La logique de conversion business (CTA visibles, structure claire) 4. Le design Figma de Waqas La maquette de Waqas est une **interprétation visuelle** : elle ne couvre pas tous les cas d'usage et n'a pas vocation à être suivie au pixel près si elle contredit un point essentiel. ### 6.3 Composants à extraire de la maquette Au démarrage du projet, Claude Code doit ouvrir le Figma et identifier les composants suivants à reproduire fidèlement : - Header (desktop + mobile) - Footer - Bouton CTA principal (téléphone) - Bouton CTA secondaire (devis) - Carte de service (utilisée dans la grille d'accueil et dans la section "Autres services") - Carte d'article de blog (utilisée dans la grille du blog) - Accordéon FAQ (état fermé + état ouvert) - Bloc témoignage / avis client - Bloc chiffre clé (utilisé dans section "30 ans d'expertise...") - Formulaire de contact (champs, labels, états validation/erreur) - Fil d'Ariane - Pagination du blog - Tag de catégorie (pour les articles) - Image hero - Section "Bloc urgence" (fond sombre + CTA téléphone) Pour chaque composant, noter : - Couleurs utilisées (référence aux variables CSS de la section 2.2) - Police et taille - Padding / margin / espacement - Border-radius - Shadow (si présent) - Comportement responsive ### 6.4 Si la maquette Figma n'est pas finalisée au démarrage Si Waqas n'a pas encore livré la maquette ou si elle est incomplète, Claude Code peut démarrer le développement en respectant uniquement la charte graphique (sections 1 à 5 de ce fichier) et en appliquant des principes de design sobres et professionnels : - Beaucoup d'espace blanc - Bleu pétrole comme couleur principale - Doré en accent uniquement (1-2 endroits par page) - Typographie hiérarchisée (Kaelia pour titres, Urbanist pour le reste) - Cartes avec léger border-radius (6 à 8px) - Boutons sans border-radius excessif (4 à 6px) - Shadows discrètes (ou pas de shadow du tout) - Transitions fluides au hover (200-300ms ease-in-out) Une fois la maquette livrée, ajuster le rendu pour coller à la vision de Waqas. --- ## 7. Principes de design pour les nouvelles sections Pour les sections que Claude Code doit créer sans maquette de référence, suivre ces principes : ### 7.1 Espacement (grille verticale) - Section padding vertical : 80px desktop / 48px mobile - Espacement entre éléments majeurs : 32 à 48px - Espacement entre titre et contenu : 16 à 24px - Espacement entre paragraphes : 16px ### 7.2 Container et grille - Largeur max du container principal : 1200px (à confirmer dans la maquette) - Padding horizontal : 24px mobile / 48px tablette / 80px desktop - Grilles : flexbox ou CSS Grid, jamais de framework lourd type Bootstrap - Breakpoints : - Mobile : jusqu'à 767px - Tablette : 768px à 1023px - Desktop : 1024px+ ### 7.3 Boutons - Padding : 14px 24px (compact) ou 16px 32px (large) - Border-radius : 4 à 6px - Font-weight : 600 (semibold) - Transition : `all 0.2s ease` - État hover : changement de couleur de fond (vers doré ou pétrole plus foncé selon la variante) - État focus : outline visible pour l'accessibilité - Texte uppercase ou non selon la charte Figma — à confirmer ### 7.4 Cartes - Background blanc ou très légèrement gris (`#FAFAFA`) - Border-radius : 8 à 12px - Shadow discrète : `0 2px 8px rgba(13, 65, 86, 0.08)` (à utiliser avec parcimonie) - Padding interne : 24 à 32px - Hover : légère élévation (`translateY(-2px)` + shadow renforcée) ### 7.5 Formulaires - Labels visibles au-dessus du champ (pas seulement placeholders) - Champs : background blanc, bordure grise 1px, border-radius 4 à 6px - Hauteur de champ : 48px minimum (touch-friendly) - Focus : bordure bleu pétrole + ring discret - Erreur : bordure rouge `#DC2626` + message en-dessous - Bouton submit : style CTA principal --- ## 8. Responsive et accessibilité ### 8.1 Mobile-first obligatoire Le site est conçu en mobile-first. Tous les composants doivent fonctionner parfaitement sur : - iPhone SE (320px de large) → cas le plus restrictif - iPhone 14 (390px) - iPad (768px) - Laptop standard (1280px à 1440px) - Desktop large (1920px+) Tester chaque page sur ces 5 résolutions au minimum. ### 8.2 Touch-friendly - Tous les éléments cliquables : minimum 44×44 px de surface (recommandation WCAG) - CTA téléphone sur mobile : très visible, accessible en un tap dans le header sticky - Pas de hover-only sur mobile (les comportements importants doivent être déclenchables au tap) ### 8.3 Accessibilité — WCAG 2.1 AA + RGAA 4.1 AA Le site doit respecter à la fois la norme internationale **WCAG 2.1 niveau AA** et le référentiel français officiel **RGAA 4.1 niveau AA** (édité par la DINUM). Les deux normes sont compatibles : respecter le RGAA AA équivaut à respecter le WCAG AA, avec des critères français plus précis. **Note sur l'obligation légale** : TCA Industries est une PME, donc pas d'obligation légale stricte (l'obligation concerne les services publics, les entreprises de plus de 250 salariés ou avec un CA supérieur à 50 millions €). Cependant, viser le RGAA AA est une bonne pratique qui améliore le SEO, l'UX et l'image professionnelle, sans surcoût significatif. #### Critères techniques à respecter (extrait du RGAA 4.1) **Contrastes (RGAA critère 3)** - Texte normal sur fond : ratio de contraste minimum 4.5:1 - Texte de grande taille (24px+ ou 19px+ en gras) : ratio 3:1 - Éléments d'interface (boutons, formulaires, focus) : ratio 3:1 - Outil de vérification : [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) **Images (RGAA critère 1)** - Attribut `alt` descriptif sur toutes les images informatives - Attribut `alt=""` (vide) sur les images purement décoratives - Pas de texte essentiel dans les images (utiliser du vrai texte HTML) - Description longue via `aria-describedby` si nécessaire (diagrammes, infographies) **Structure et navigation (RGAA critère 9, 12)** - Hiérarchie de titres respectée (un seul H1, pas de saut de niveau) - Liens et boutons avec texte explicite (jamais "cliquez ici" ou "en savoir plus" seul) - Skip-to-content (lien d'évitement) au début de chaque page, visible au focus - Plan du site accessible si plus de 25 pages (pas obligatoire ici) - Fil d'Ariane sur toutes les pages sauf accueil - Landmark ARIA : `
`, `
`, `