# Charte graphique Soluteam — intégration logiciel

Identité « **Humain × IA** » : une vraie personne (ambre) augmentée par l'IA (teal),
sur une base navy profond. Cette charte aligne l'app web (React + Vite + Tailwind +
shadcn/ui) sur le design du site.

## Fichiers

| Fichier | Rôle |
|---|---|
| `soluteam-tokens.css` | Variables CSS HSL (`:root` / `.dark`), format shadcn. |
| `soluteam.theme.ts` (= `tailwind.theme.ts`) | `theme.extend` à fusionner dans `tailwind.config.ts`. |
| `soluteam-logo.svg` | Logo (mark S) fond transparent. |
| `soluteam-logo-tile.svg` | Logo sur tuile navy (app icon / favicon). |

## Intégration en 4 étapes

1. **Polices** — déjà importées en tête de `soluteam-tokens.css` (Bricolage Grotesque + Inter).
   Sinon, ajoute le `<link>` Google Fonts dans `index.html`.
2. **Tokens** — copie les blocs `:root` et `.dark` de `soluteam-tokens.css` dans ton `src/index.css`
   (remplace ceux générés par shadcn).
3. **Tailwind** — place `tailwind.theme.ts` à la racine (renomme en `soluteam.theme.ts`) puis :
   ```ts
   import { soluteamTheme } from "./soluteam.theme";
   export default {
     darkMode: ["class"],
     content: ["./index.html", "./src/**/*.{ts,tsx}"],
     theme: { extend: soluteamTheme },
     plugins: [require("tailwindcss-animate")],
   } satisfies Config;
   ```
4. **Typo** — titres en `font-display` (Bricolage), corps en `font-sans` (Inter, défaut).

## Couleurs

| Token | Hex | HSL | Rôle |
|---|---|---|---|
| ink | `#0E1A33` | `221 57% 13%` | Base navy / texte / fonds sombres |
| ink-700 | `#14223F` | `221 52% 16%` | Surface sombre surélevée (card dark) |
| ink-600 | `#1B2E52` | `219 38% 21%` | Surface sombre 2 / secondary dark |
| amber | `#F4A862` | `29 86% 67%` | Accent **humain** (highlights, 1 mot clé) |
| amber-600 | `#E68A36` | `29 78% 56%` | Amber sur fond clair (texte/icône) |
| teal | `#2DD4BF` | `172 66% 50%` | **primary** — CTA, focus, accent IA |
| teal-600 | `#15B5A2` | `173 79% 40%` | Teal sur fond clair (texte/icône) |
| paper | `#FBFAF7` | `45 33% 98%` | Fond clair principal |
| paper-2 | `#F2ECE2` | `38 38% 92%` | Fond clair alterné / secondary |
| line | `#E7E1D6` | `39 26% 87%` | Bordures sur clair |
| mute | `#586176` | `222 15% 40%` | Texte secondaire sur clair |

**Règle de contraste** : amber et teal sont vifs → sur fond clair, pour du texte/icône,
utilise `amber-600` / `teal-600`. Le `primary-foreground` (texte sur boutons teal) est **ink**, pas blanc.

## Typographie

- **Display** : Bricolage Grotesque (600–800), `letter-spacing: -0.02em`. Titres, chiffres clés.
- **Corps / UI** : Inter (400–600).
- Échelle : H1 `clamp(2.4rem,6vw,4rem)` · H2 `clamp(1.9rem,3.6vw,2.6rem)` · H3 `1.25rem` · corps `1rem/1.6` · small `0.875rem`.
- **Eyebrow** (sur-titre) : 0.72rem, 600, `letter-spacing: 0.18em`, MAJUSCULES, préfixé d'un `×` ambre.
- **Sentence case** partout (jamais Title Case ni ALL CAPS, sauf l'eyebrow).

## Logo

- **Wordmark** = `mysoluteam` — un seul mot, minuscules, « my » en teal + « soluteam » en bold (Bricolage). En écho au domaine `mysoluteam.com`.
- **Nom vs wordmark** : le logo s'écrit `mysoluteam` ; dans les **textes**, le nom de l'entreprise reste « Soluteam ». Le « my » vit dans le wordmark, jamais dans le mark « S ».
- Mark = le **S** scindé : arc haut **ambre**, arc bas **teal**.
- **Espace de protection** : ≥ la moitié de la hauteur du mark tout autour.
- **Taille mini** : 24 px (mark seul), 20 px en favicon (tuile navy).
- Sur fond sombre → mark transparent ; en app icon → `soluteam-logo-tile.svg`.
- À éviter : recolorer le mark, l'étirer, le poser sur un fond peu contrasté, ajouter une ombre.

## Composants (conventions)

- **Bouton primaire** : `bg-primary text-primary-foreground`, `rounded-full`, `font-semibold`, hover `scale-[1.03]`.
- **Bouton secondaire** : `border border-border bg-transparent hover:bg-secondary`.
- **Card** : `bg-card border border-border rounded-2xl`, ombre légère sur clair, `border-white/10` sur sombre.
- **Pill / badge** : `rounded-full`, fond teinté à 10–15 % + texte dans le `-600` de la même teinte.
- **Rayons** : `--radius: 0.75rem` (lg=12px) ; cartes 16px (`rounded-2xl`) ; boutons CTA `rounded-full`.
- **Focus** : `ring` teal (accessibilité — toujours visible au clavier).
- **Icônes** : style **ligne**, `stroke-width: 1.5`, `currentColor`, bouts arrondis (jamais d'emoji).

## Mouvement

- Révélation au scroll : `translateY(1.75rem)` + opacité, `cubic-bezier(0.22,1,0.36,1)`, 720 ms.
- Hover cartes : `translateY(-4px)`, 240 ms.
- Respecte `prefers-reduced-motion`.

## Ton éditorial

Clair, direct, orienté dirigeant. Voix active (« Réservez », pas « Soumettre »).
Nommer par l'usage, pas par la technique. Pas de jargon. « Humain × IA » est la signature —
l'utiliser comme tagline, jamais comme remplacement du logo.