# Direction artistique — HR CONSULTING & CO

> Refonte visuelle pour le site Laravel (Phase 2). Objectif : **plus beau, plus gai, plus sobre, plus class et pro**.
> Base : logo (navy + vert), capture d'écran actuelle, positionnement **cabinet de formation · conseil · recrutement · gestion RH**.

---

## 1. Esprit / direction

Un design **« corporate chaleureux »** : la rigueur du navy (confiance, expertise, sérieux) + l'énergie du vert (croissance, humain, emploi) + une pointe de **doré** pour la touche premium/classe. Beaucoup de **blanc**, des **respirations généreuses**, des **coins arrondis doux**, des **ombres légères** et quelques **dégradés subtils**. On garde l'ADN actuel (vert + navy + carte blanche flottante du hero) mais on l'élève.

**Mots-clés :** épuré · lumineux · humain · premium · aéré.

---

## 2. Palette de couleurs

Extraite du logo et de la capture, puis structurée en système.

### Couleurs de marque
| Rôle | Nom | HEX | Usage |
|---|---|---|---|
| **Primaire** | Navy 900 | `#0A2A4A` | Titres, navbar, footer, texte fort |
| Primaire | Navy 800 | `#0E3661` | Variantes, hovers foncés |
| Primaire | Navy 700 | `#15467E` | Liens, accents bleus |
| **Secondaire / Action** | Green 600 | `#159A5B` | Boutons CTA, accents actifs |
| Secondaire | Green 500 | `#1FB573` | Hover CTA, icônes, barres |
| Secondaire | Green 400 | `#34D399` | Détails lumineux, dégradés |
| **Accent premium** | Gold 500 | `#C9A24B` | Filets, puces, détails « class » (avec parcimonie) |

### Neutres
| Nom | HEX | Usage |
|---|---|---|
| Ink | `#0F172A` | Texte principal |
| Slate 600 | `#475569` | Texte secondaire / paragraphes |
| Slate 400 | `#94A3B8` | Texte tertiaire, placeholders |
| Line | `#E2E8F0` | Bordures, séparateurs |
| Surface | `#FFFFFF` | Cartes |
| Background | `#F6F8FB` | Fond de page (remplace le gris terne actuel) |

### Dégradés signature
- **Hero / fond doux** : `linear-gradient(135deg, #F6F8FB 0%, #ECF2F8 60%, #E6F4EC 100%)` (gris-bleu → vert très léger : plus gai que le gris actuel).
- **CTA / accent** : `linear-gradient(135deg, #159A5B 0%, #1FB573 100%)`.
- **Bloc premium / footer** : `linear-gradient(160deg, #0A2A4A 0%, #0E3661 100%)`.

> ✅ On remplace le **dégradé gris terne** actuel (`rgba(198..)`) par un fond clair légèrement teinté de vert/bleu = plus lumineux et vivant, tout en restant sobre.

---

## 3. Typographie

| Usage | Police | Détails |
|---|---|---|
| **Titres (display)** | **Poppins** (ou Sora) | 600/700, navy, tracking serré (`-0.02em`) |
| **Texte courant** | **Inter** | 400/500, slate-600, interligne 1.7 |
| Surtitres / labels | Inter | 600, uppercase, `letter-spacing: .12em`, vert ou gold, petite taille |

Échelle (desktop) : Hero `clamp(2.75rem, 5vw, 4.5rem)` · H2 `2.25rem` · H3 `1.5rem` · body `1.0625rem`.
Le surtitre vert en capitales au-dessus des H2 (ex. « NOS SERVICES ») donne un look pro immédiat.

---

## 4. Composants — règles de style

- **Rayons** : cartes `1rem` (16px), boutons `9999px` (pleinement arrondis, comme l'existant), inputs `0.75rem`.
- **Ombres** : `0 4px 20px rgba(10,42,74,.06)` au repos ; `0 12px 30px rgba(10,42,74,.12)` au survol. Jamais d'ombre dure.
- **Boutons** :
  - *Primaire* : dégradé vert, texte blanc, `hover:` léger `scale(1.03)` + ombre verte douce.
  - *Secondaire* : navy plein OU contour navy (ghost) ; sur fond foncé → blanc/contour.
  - On **harmonise** : actuellement les CTA hero « CONTACT/SERVICES » sont tous deux verts pleins → mettre **1 primaire (vert) + 1 secondaire (contour navy)** pour la hiérarchie.
- **Cartes** : fond blanc, bordure `#E2E8F0` fine OU sans bordure + ombre douce, icône dans une pastille ronde dégradé vert clair, titre navy, texte slate. Hover : translation `-4px` + ombre accentuée + filet supérieur gold/vert.
- **Navbar** : sticky, fond blanc translucide + `backdrop-blur` (on garde l'effet existant), lien actif souligné d'un trait vert, CTA « Déposer un CV » en dégradé vert.
- **Icônes** : style **line/duotone** cohérent (Heroicons / Lucide), couleur navy ou vert — pas d'icônes pleines criardes.

---

## 5. Page d'accueil — direction section par section

| Section | Direction visuelle |
|---|---|
| **Hero** | Garder la structure (texte gauche + photo droite + carte flottante « Recrutement 2022 »). Améliorer : fond dégradé clair teinté, **surtitre vert** au-dessus du titre, titre navy en Poppins, **2 boutons hiérarchisés** (vert plein + contour), photo détourée dans une **forme organique/blob** avec halo vert/navy. Cercles décoratifs subtils en arrière-plan. ⚠️ Corriger la faute « Habilation**n** » → « Habilitation FDFP ». |
| **Logos clients** ⭐ | Bandeau blanc juste sous le hero : surtitre « ILS NOUS FONT CONFIANCE », **marquee** de logos en niveaux de gris (couleur au survol), hauteur uniforme (recadrage auto, cf. PLAN.md). Sobre et rassurant. |
| **Welcome / cibles** | 3 cartes (« GE/PME », « Institutions publiques », « Recherche d'emploi ») avec icône en pastille verte. |
| **Pourquoi nous choisir** | Image + liste à puces gold/vert, chiffres mis en valeur. |
| **Services** (4 pôles) | Grille 2×2 ou 4 colonnes : Formation · Conseil · Recrutement · Gestion RH. Cartes égales, icône duotone, hover filet gold. C'est le cœur du métier → soigner. |
| **Statistiques** | Bandeau **navy en dégradé** pleine largeur, chiffres animés (CountUp) en blanc/vert, libellés clairs. Crée un point fort visuel. |
| **Témoignages** ⭐ | Carrousel de cartes blanches : guillemet gold, avatar rond, nom navy, étoiles vertes. Gérés en backoffice. |
| **Actualités** | 3 cartes articles, image en haut arrondie, date en label vert, titre navy. |
| **CTA dépôt CV** | Bloc navy/dégradé pleine largeur, texte blanc + bouton vert « Déposer un CV ». |
| **Footer** | Garder 4 colonnes mais sur **navy dégradé** propre, titres en vert clair, liens hover gold, champ newsletter arrondi cohérent. |

---

## 6. Tokens Tailwind (pour le projet Laravel)

À mettre dans `tailwind.config.js` :

```js
theme: {
  extend: {
    colors: {
      navy:  { 700:'#15467E', 800:'#0E3661', 900:'#0A2A4A' },
      brand: { 400:'#34D399', 500:'#1FB573', 600:'#159A5B' }, // vert
      gold:  { 500:'#C9A24B' },
      ink:   '#0F172A',
      surface:'#FFFFFF',
      bg:    '#F6F8FB',
    },
    fontFamily: {
      display: ['Poppins','ui-sans-serif','system-ui'],
      sans:    ['Inter','ui-sans-serif','system-ui'],
    },
    borderRadius: { card: '1rem' },
    boxShadow: {
      soft: '0 4px 20px rgba(10,42,74,.06)',
      lift: '0 12px 30px rgba(10,42,74,.12)',
    },
    backgroundImage: {
      'hero-soft': 'linear-gradient(135deg,#F6F8FB 0%,#ECF2F8 60%,#E6F4EC 100%)',
      'cta-green': 'linear-gradient(135deg,#159A5B 0%,#1FB573 100%)',
      'navy-deep': 'linear-gradient(160deg,#0A2A4A 0%,#0E3661 100%)',
    },
  },
}
```

---

## 7. Accessibilité & cohérence

- Contraste : navy `#0A2A4A` sur blanc ✅ ; **ne pas** mettre du vert clair sur blanc pour du texte (réservé aux fonds/accents).
- Le **gold** reste un accent (filets, puces, guillemets) — jamais de grandes surfaces.
- États focus visibles (anneau vert) sur tous les champs/boutons.
- Animations douces (`react-reveal` → équivalent CSS/AOS ou Alpine `x-intersect`), jamais agressives.

---

## 8. Résumé des améliorations clés vs. l'existant

1. Fond **gris terne → dégradé clair teinté** (plus gai, plus lumineux).
2. **Système de 3 couleurs** structuré (navy + vert + gold) au lieu de vert/gris.
3. **Typo affirmée** (Poppins display + Inter) + surtitres en capitales.
4. **Hiérarchie des boutons** (primaire vert / secondaire contour).
5. Sections **navy pleine largeur** (stats, CTA, footer) pour le rythme et le côté premium.
6. **Cartes uniformisées** avec ombres douces et accents gold au survol.
7. Bandeau **logos clients** + **carrousel témoignages** soignés (nouvelles fonctionnalités).
8. Correction des fautes visibles (« Habilitation FDFP »).