# FIGMA_INVENTORY.md — Maquette TCA Industries

> Inventaire exhaustif de la maquette Figma produite par Waqas (Vultek).
> Source : https://www.figma.com/design/FcijfL9oOOGie1QImXpy1t/TCA-INDUSTRIES
> Captures basse résolution disponibles dans [`screenshots/figma/desktop/`](screenshots/figma/desktop/) et [`screenshots/figma/mobile/`](screenshots/figma/mobile/).
> Aucun fichier de code modifié à ce stade.

---

## 1. Métriques globales

| Élément | Valeur |
|---|---|
| Total frames | **22** (16 desktop + 6 mobile) |
| Page Figma | 1 unique ("Page 1") |
| Largeur desktop | 1440 px |
| Largeur mobile | 440 px (iPhone 16/17 Pro Max) |
| Components / ComponentSets formels | **0** (Waqas n'a pas créé de composants Figma — les blocs sont dupliqués / variantés en frames séparées) |
| Pages maquettées | Homepage · Service · À propos · Blog listing · Blog detail · Contact |
| Pages NON maquettées | Mentions légales, Politique de confidentialité, CGU, Politique cookies, 404 |
| Couverture mobile | **Complète** pour les 6 types de pages maquettés |

---

## 2. Frames desktop (16) — répertoire détaillé

### 2.1 Pages complètes (full-length mockups)

| ID Figma | Nom | H (px) | Type | Capture |
|---|---|---|---|---|
| `1:2` | Desktop - 1 | 6090 | **Homepage variante A** (hero photo : worker + sparks) | `desktop-1-homepage-v1.png` |
| `18:23` | Desktop - 2 | 6090 | **Homepage variante B** (hero photo : worker portrait) | `desktop-2-homepage-v2.png` |
| `40:697` | Nos Services | 7044 | **Page service complète** (exemple : Dépannage d'urgence) | `service-v1-full-7044h.png` |
| `32:505` | À propos | 6027 | **Page À propos complète** | `about-v1-full-6027h.png` |
| `36:1064` | Blog | 2391 | **Blog listing complète** | `blog-listing-v1-2391h.png` |
| `36:1537` | Blog Detail | 6027 | **Article blog complète** | `blog-detail-6027h.png` |
| `40:122` | ContactUS | 2139 | **Page Contact complète** | `contact-v1-full-2139h.png` |

### 2.2 Variantes de hero / sections (partials que Waqas a iterées)

| ID Figma | Nom | H (px) | Type | Capture |
|---|---|---|---|---|
| `18:265` | Desktop - 3 | 986 | **Hero homepage variante C** (hero+chiffres clés isolé) | `desktop-3-section-or-partial.png` |
| `40:1375` | À propos | 865 | **Hero variante** dark plain « PLUS DE 30 ANS / AU SERVICE DE L'INDUSTRIE » | `about-v2-section-865h.png` |
| `40:1153` | Nos Services | 865 | **Hero service variante** dark plain « DEPANNAGE D'URGENCE » | `service-v6-section-865h.png` |
| `40:1566` | Blog | 625 | **Hero variante blog listing** dark plain | `blog-listing-v2-section-625h.png` |
| `40:1705` | ContactUS | 625 | **Hero variante contact** dark plain | `contact-v2-section-625h.png` |
| `69:2072` | Nos Services | 1031 | **Section « Nun arret de production coute » variante A** (titre droite, photo+texte gauche) | `service-v2-section-1031h.png` |
| `80:2564` | Nos Services | 776 | **Section « Nun arret… » variante B** (titre top, 2 col texte/photo) | `service-v3-section-776h.png` |
| `80:2568` | Nos Services | 824 | **Section « Nun arret… » variante C** (titre top centré + texte gauche photo droite) | `service-v4-section-824h.png` |
| `73:2311` | Nos Services | 780 | **Section « Nun arret… » variante D** (titre gauche photo droite) | `service-v5-section-780h.png` |

### 2.3 Frame divers

| ID Figma | Nom | Type | Notes |
|---|---|---|---|
| `7:28` | pngegg (9) 1 | RECTANGLE avec imageRef | Élément décoratif isolé, à ignorer pour l'inventaire |

---

## 3. Frames mobile (6) — couverture complète

| ID Figma | H (px) | Page correspondante | Capture |
|---|---|---|---|
| `56:38` | 8483 | **Homepage mobile** | `mobile-1.png` |
| `56:448` | 8832 | **Page service mobile** (Dépannage d'urgence) | `mobile-2.png` |
| `56:871` | 8970 | **Page À propos mobile** | `mobile-3.png` |
| `56:1258` | 4032 | **Blog listing mobile** | `mobile-4.png` |
| `56:1548` | 7565 | **Article blog mobile** | `mobile-5.png` |
| `56:1787` | 2924 | **Contact mobile** | `mobile-6.png` |

---

## 4. Variantes de hero (3 patterns identifiés)

### Pattern A — Hero photo immersif (homepage uniquement)
- Background : photo industrielle plein cadre, gradient sombre superposé
- Header en overlay (logo + nav + phone + Contact button)
- Eyebrow uppercase doré « VOTRE PARTENAIRE INDUSTRIEL »
- H1 Kaelia ULTRA BOLD UPPERCASE blanc, sur 2-3 lignes serrées
- Description courte
- 2 CTAs : « Demander Un Devis » (gold) + phone (outlined white)
- **Bandeau chiffres clés** intégré sous le hero (4 colonnes : 30+ années / 500+ clients / 24/7 / J+0)
- Variants A et B = même structure, photo hero différente

### Pattern B — Hero dark plain (pages internes : service, à propos, blog, contact)
- Background : anthracite uni très foncé (proche `#0D1419`, plus sombre que le `#252626` actuel)
- Header sur le même fond dark
- Eyebrow uppercase doré court
- H1 Kaelia uppercase blanc (un peu plus petit que homepage)
- Description sobre
- 1 CTA gold (phone) — pas de second CTA
- **Bandeau chiffres clés** sous le hero (mêmes 4 colonnes, ou 3 selon page)

### Pattern C — Hero compact (blog listing, contact)
- Variante de B sans le bandeau chiffres clés en dessous
- Hauteur réduite (625-865 px vs 1000+ px pour B)
- Pour pages où l'info pratique vient juste après (formulaire contact, grille articles)

---

## 5. Sections globales identifiées sur la maquette

### Présentes dans la maquette
1. **Bandeau chiffres clés** — strip blanche 4 colonnes (30+ années / 500+ clients / 24/7 service / J+0 intervention OU 15 techniciens)
2. **Nos Domaines d'Expertise** (homepage) — 4 cards photo+label (moteurs, pompes, réducteurs, automatisation)
3. **Nos 3 Métiers Principaux** (homepage) — 3 cards (Vente / Réparation / Dépannage), carte centrale en dark anthracite
4. **« Nun arret de production coute »** (pitch industriel) — H2 + texte + photo, **4 variantes de mise en page**
5. **Nos Prestations** (service) — H2 + liste à puces + photo
6. **Nos Autres Services / Nos Domaines** — grille 4 cards horizontales avec icônes (moteur, pompes, motoréducteur, variateur)
7. **Pourquoi Choisir TCA ?** (service, about) — H2 + photo + texte
8. **Notre Histoire** (about) — H2 + 2 photos + texte
9. **Notre Équipe** (about) — H2 + 3 portraits B&W en ligne
10. **30 ans d'Expertise Industrielle** (about) — bloc texte + photo
11. **Nos Valeurs** (about) — 4 cards (Disponibilité/Conseil/Proximité/Réactivité)
12. **Marques Distribuées et Réparées** — H2 + strip 6 logos (Siemens, SEW visibles)
13. **Ils Nous Font Confiance** (homepage) — H2 + carousel témoignages 3 cards avec quotes
14. **Bloc Urgence Production** — banner gold doré pleine largeur + photo technicien + CTA « URGENCE PRODUCTION ? »
15. **Articles Liés / Actualités** — H2 + 3 article cards (image + catégorie + titre + date)
16. **FAQ** (service, article) — H2 + accordéon questions/réponses (chevron à droite)
17. **Bloc CTA final** — variantes : « DEMANDER UN DEVIS » dark / « PRET A TRAVAILLER ENSEMBLE ? » gold
18. **Article body** — sommaire à gauche, contenu à droite + bloc auteur + FAQ + articles liés
19. **Pagination blog** — boutons numérotés en ligne sous la grille
20. **Carte Google Maps** (contact mobile) — encart « Vous préférez nous rendre visite ? »

### Sections de `docs/pages.md` ABSENTES de la maquette
- **Notre Processus d'Intervention** (4 étapes) — H2 prévu pour chaque page service, pas dans Figma
- **Marques et Types Traités** (détail par cluster) — Figma a juste un strip de logos générique
- **Zone d'Intervention** (liste des 8 départements) — pas de section dédiée, info à intégrer
- **Combien coûte** (prix indicatifs, page bobinage) — pas dans Figma
- **Diagnostic & Tarifs Indicatifs** (page pompes particuliers) — pas dans Figma

➡️ Ces sections devront être **construites en réutilisant les composants Figma existants** (cards, lists, blocs texte+image) plutôt qu'inventées.

---

## 6. Composants UI globaux à extraire

### Header (desktop)
- Logo TCA gauche (variante BLANCHE car header sur dark)
- Liens nav : Accueil · Nos Services ▼ (avec dropdown) · À Propos · Blog
- État actif : pill rounded dark avec texte blanc
- Phone CTA : pill outlined blanc avec icône phone gauche `(720) 449-3339`
- Bouton Contact : pill rounded **fill gold** texte dark
- Sur fond dark anthracite (PAS blanc comme dans mon implémentation actuelle)

### Header (mobile)
- Hamburger icon gauche
- Logo TCA centre
- Phone icon droite (icone seule, pas le numéro)

### Footer
- 4 colonnes : Logo + adresse + tagline / Liens services / Liens entreprise / Newsletter form
- Fond dark anthracite
- Réseaux sociaux : icônes ronds (Facebook, Instagram, LinkedIn, X visible)
- Newsletter input + bouton gold

### Boutons
- **Primaire** : pill rounded fill gold (#D8AB65), texte anthracite, padding généreux
- **Secondaire** : pill rounded outlined blanc sur dark, texte blanc
- **CTA téléphone** : variante avec icône phone à gauche
- **CTA inversé** : sur fond clair → fill anthracite, texte blanc (mais usage rare, pattern A/B/C montrent surtout sur fond dark)

### Cards
- **Service card** (homepage Nos Métiers) : carte rectangulaire avec photo top + label bottom, hover state subtil. Variant centrale = fond anthracite pour mettre en valeur
- **Article card** (blog) : photo top arrondie + catégorie pill + titre H3 + date small
- **Testimonial card** : guillemet décoratif gold + quote + auteur + rôle, fond clair, accent dark sur card mise en avant

### FAQ accordion
- Question en bold avec chevron à droite (↑/↓ ou +/− selon état)
- Réponse en texte simple sous question
- Pas d'icône décorative
- Fond léger gris

### Chiffres clés strip
- 4 colonnes (ou 3) séparées par des lignes verticales fines
- Big number en Kaelia (60-80px)
- Label small dessous uppercase tracking

### Bloc urgence
- Banner gold pleine largeur avec photo technicien à droite
- Eyebrow + H2 + texte + CTA phone à gauche
- Pattern récurrent pour conversion

### Breadcrumb
- **NON présent** dans la maquette Figma — Waqas n'a pas dessiné le fil d'Ariane
- ➡️ À garder dans le code selon docs/pages.md (« Fil d'Ariane visible sauf accueil »)

---

## 7. Design system observé (à confronter à docs/design.md)

### Couleurs
- Background dark : **plus sombre** que l'`--tca-anthracite: #252626` actuel. Estimation visuelle `#0D1419` à `#1A1F26` (proche d'un bleu pétrole très foncé). À extraire précisément lors de l'implémentation via `get_figma_data` avec fills.
- Gold : conforme à `#D8AB65` de la charte Luciole Studio
- Blanc et anthracite OK
- **Bleu Pétrole `#0D4156`** : présent dans la charte mais **pas visible** dans les hero/headers de la maquette qui utilisent un dark plus profond
- ⚠️ **Conflit potentiel** charte Luciole vs maquette Waqas sur la couleur de fond dark dominante. À clarifier avec Gabin.

### Typographies
- H1 hero : Kaelia **ULTRA BOLD / BLACK** UPPERCASE, très condensé, tracking serré, 60-90 px desktop
- H2 sections : Kaelia bold uppercase, ~36-48 px
- Body : Urbanist regular, 14-16 px
- Eyebrow : Urbanist Bold UPPERCASE tracking large, ~12-14 px, doré
- ⚠️ Mon implémentation actuelle utilise Kaelia **SemiBold** (600) — Waqas utilise un poids plus lourd. À vérifier si licence Kaelia inclut Bold/Black, sinon adapter.

### Logo
- Variante avec baseline « FOURNITURES ET REPARATIONS » et trait blanc sur fond dark
- ⚠️ Couleur du logo dans Figma : **blanc + trait blanc** (pas COULEUR officielle bleu+gold) → à utiliser la variante `RESERVE` du dossier `/public/logos/HORIZONTALE BASELINE TRAIT/`

### Photos
- Hero photos très contrastées, traitement sombre uniforme
- Photos contenu : workshop, technicien au travail, gros plans matériel
- Style : industriel, réaliste, **pas de stock photos**

---

## 8. Texte de la maquette = placeholder (rappel)

Comme indiqué dans la brief utilisateur, **AUCUN texte de Figma ne doit atterrir dans le code**. Exemples présents en maquette :
- H1 « DE PROXIMITE A CLERMONT FERRAND » — **non utilisable**, le H1 de la homepage est défini dans `docs/pages.md` p.1 : `Moteurs électriques, pompes et équipements industriels à Clermont-Ferrand`
- H1 service « DEPANNAGE D'URGENCE » — **non utilisable** (par exemple page 02 utilise `Réparation et remise en état de moteurs électriques`)
- Numéro de téléphone `(720) 449-3339` (US) — à remplacer par `04 73 28 74 74`
- « Nun arret de production coute » (titre faute de frappe sur "Un") — **non utilisable** tel quel
- « 30+ années / 500+ clients / 15 techniciens » — **chiffres à valider avec `docs/client.md`** (TCA peut ne pas vouloir affirmer "500+ clients" sans avoir validé)

---

## 9. Conflits Figma vs `docs/pages.md` à arbitrer

| # | Figma propose | `docs/pages.md` prévoit | Résolution (rappel hiérarchie) |
|---|---|---|---|
| 1 | Hero photo SUR la homepage uniquement | Hero photo « atelier ou technicien (photo emblématique) » sur homepage | ✅ Conforme |
| 2 | Sections page service : pitch + prestations + autres services + pourquoi + articles + FAQ + CTA | `docs/pages.md` p.02 prévoit ~11 sections (intro, prestations, processus, marques, zone, pourquoi, FAQ, CTA, articles, autres services) | ❌ Figma manque `Notre Processus`, `Marques et types`, `Zone d'intervention` → **les garder per docs/pages.md** |
| 3 | Bandeau chiffres clés présent partout sous hero | `docs/pages.md` p.01 prévoit « Chiffres clés + 4 valeurs » sur homepage uniquement | ⚖️ Acceptable d'étendre le bandeau aux pages internes (renforce confiance, conforme à seo-strategy.md E-E-A-T) — **à valider avec Gabin** |
| 4 | Section « Nun arret de production coute » sur chaque page service | `docs/pages.md` n'a pas cette section explicitement | ⚖️ Pourrait remplacer l'introduction / ou être ajoutée comme intro stylée. **À arbitrer page par page** |
| 5 | Pas de breadcrumb dans Figma | `docs/pages.md` règles communes : « Fil d'Ariane visible (sauf accueil) » | ✅ On garde le breadcrumb |
| 6 | Header sur fond DARK partout | Implémentation actuelle : header sur fond blanc | ❌ À corriger — header passe sur fond dark anthracite |
| 7 | Logo dans header : variante BLANCHE (sur dark) | Implémentation actuelle : variante COULEUR (sur blanc) | ❌ À corriger — utiliser `RESERVE.svg` |
| 8 | Mentions légales / CGU / Privacy / Cookies / 404 | Pas dans Figma | ✅ On garde notre implémentation actuelle (structure sobre, charte respectée) |

---

## 10. Plan d'attaque proposé pour la refonte

### Étape 1 — Composants UI globaux (impact transversal)
1. **Refonte `_nav.html.twig`** : header dark anthracite + logo blanc + nav avec dropdown Nos Services + phone outlined + Contact button gold
2. **Refonte `_footer.html.twig`** : structure 4 colonnes + newsletter form + réseaux sociaux ronds + tagline
3. **Refonte boutons** dans `site.css` : pill rounded au lieu de border-radius 6px ; gold primary plus visible
4. **Ajout composant `chiffres-cles`** : strip blanche 4 colonnes en `templates/_components/`
5. **Ajout composant `bloc-urgence`** : banner gold avec photo + CTA
6. **Ajustement couleurs** : `--tca-anthracite-dark` (le vrai dark Figma) à introduire dans variables-front.css
7. **Ajustement typo** : tester Kaelia Bold (voir si licence le permet), augmenter font-size H1 hero

### Étape 2 — Refonte page par page (cycle docs/pages.md)
Ordre P1 → P2 → P3. Pour chaque page :
- Capture before (1440 + 375)
- Identification variante Figma à utiliser
- Plan détaillé respectant H1/H2/title/meta/ordre de docs/pages.md
- Validation Gabin
- Implémentation
- Capture after
- Commit `fix(design): rebuild {page} - Figma layout + SEO copy from docs`

### Étape 3 — Pages non maquettées
Mentions légales, CGU, Privacy, Cookies, 404 → garder l'implémentation actuelle (refresh visuel mineur si nécessaire pour cohérence header/footer).

---

## 11. Points qui nécessitent ta validation avant de continuer

1. **Couleur dark hero** : tu veux qu'on utilise le dark plus profond de Figma (probable `#0D1419`/`#1A1F26`) ou qu'on garde le `#252626` actuel ? (la charte officielle Luciole indique `#252626`, mais Figma est plus sombre)
2. **Chiffres clés** : étendre le bandeau aux pages internes (comme Figma) ou le garder homepage-only (comme docs/pages.md) ?
3. **Hero homepage** : variante A (worker + sparks) ou variante B (worker portrait) ?
4. **Section pitch « Nun arret… »** : tu veux qu'on l'intègre sur les pages service comme « introduction stylée » avec photo, ou on garde une intro simple en texte ?
5. **Header sur fond dark** : OK pour passer le header en dark anthracite sur toutes les pages (cohérent avec Figma) ?
6. **Kaelia Bold/Black** : si licence ne permet que SemiBold, garder SemiBold ou tu obtiens la licence Bold ?
7. **Pages non maquettées (légal + 404)** : on conserve l'implémentation actuelle TCA-isée ou tu veux que je harmonise plus avec le nouveau header/footer après refonte ?

---

**Fin de l'inventaire**. Aucun fichier de code modifié. En attente de validation pour passer à l'Étape 1 (composants UI globaux).