# Talyco Design System

> Source de vérité du design system Talyco. Optimisé pour LLMs (Claude, GPT, Cursor, etc.).
> Showroom visuel : <https://www.talyco.io/showroom/>
> Repo : `git@github.com:talyco/taly-design-system.git`
> Stack site : Eleventy (Nunjucks) + Tailwind CSS (CDN) + Lucide Icons.

---

## 1. Brand

- **Nom** : Talyco
- **Tagline** : « L'OS qui pilote vos admissions. »
- **Ton de voix** : direct, assumé, pas corporate. Preuve avant promesse. Parle au CEO / DG / direction.
- **Logo officiel** : `https://talyco-public.s3.eu-west-3.amazonaws.com/logo-talyco(1200x630).png`
  (URL utilisée dans `src/_data/site.json`, source de vérité)
- **Favicon** : `https://talyco-public.s3.eu-west-3.amazonaws.com/logo-talyco(favicon).png`
- **Variante logos folder** : `https://talyco-public.s3.eu-west-3.amazonaws.com/logos/talyco.png` (existe aussi)

---

## 2. Couleurs

### Marque

| Token | Hex | Usage |
|---|---|---|
| `--taly-navy` | `#143584` | Couleur primaire — CTA, titres, fonds sombres |
| `--taly-navy-light` | `#1a4280` | Hover navy, dégradés |
| `--taly-green` | `#00e898` | Accent — highlights, badges "nouveau", CTA secondaire |
| `--taly-green-dark` | `#00c97f` | Hover green |
| `--taly-slate` | `#373737` | Texte body principal |
| `--taly-white` | `#ffffff` | Fond de page |

### Échelle Navy

`50: #eef2ff` · `100: #dbe4ff` · `200: #b8c9ff` · `300: #8aa7ff` · `400: #4d78e6` · `500: #143584` · `600: #1a4280` · `700: #0f2a6b` · `800: #0a1f56` · `900: #061540`

### Échelle Green

`50: #edfff7` · `100: #d0ffec` · `200: #a0ffd9` · `300: #5dffbe` · `400: #00e898` · `500: #00c97f` · `600: #00a868` · `700: #008753` · `800: #006940` · `900: #004d2f`

### Échelle Grey

`50: #f8fafc` · `100: #f1f5f9` · `200: #e2e8f0` · `300: #cbd5e1` · `400: #94a3b8` · `500: #64748b` · `600: #475569` · `700: #373737` · `800: #1e293b` · `900: #0f172a`

### Sémantique

| Rôle | Hex | Light bg |
|---|---|---|
| Success | `#00e898` | `#edfff7` |
| Warning | `#f59e0b` | `#fef3c7` |
| Danger | `#ef4444` | `#fee2e2` |
| Info | `#143584` | `#eef2ff` |

### Texte

- `--taly-text-primary: #373737`
- `--taly-text-heading: #143584`
- `--taly-text-secondary: #64748b`
- `--taly-text-muted: #94a3b8`
- `--taly-text-disabled: #cbd5e1`
- `--taly-text-inverse: #ffffff`
- `--taly-text-on-navy: #ffffff`
- `--taly-text-on-green: #143584`

### Gradients signature

- **Navy** : `linear-gradient(135deg, #143584 0%, #1a4280 100%)`
- **Green** : `linear-gradient(135deg, #00e898 0%, #00c97f 100%)`
- **Hero** : `linear-gradient(135deg, #143584, #1a4280, #00e898)`
- **Bar** (séparateur) : `linear-gradient(90deg, #143584, #00e898)`

### Catégories programmes

| Programme | Hex | Token |
|---|---|---|
| GEMA | `#143584` | `--taly-cat-gema` |
| ESI | `#00e898` | `--taly-cat-esi` |
| IA | `#e11d48` | `--taly-cat-ia` |
| Cyber | `#0ea5e9` | `--taly-cat-cyber` |
| BIM | `#0891b2` | `--taly-cat-bim` |
| PGE | `#7c3aed` | `--taly-cat-pge` |
| MBA | `#dc2626` | `--taly-cat-mba` |
| BBA | `#ea580c` | `--taly-cat-bba` |
| BTS | `#16a34a` | `--taly-cat-bts` |
| MSc | `#0d9488` | `--taly-cat-msc` |
| DBA | `#7e22ce` | `--taly-cat-dba` |

### Campus

`Paris #143584` · `Nice #0369a1` · `Thionville #059669` · `Online #7c3aed`

---

## 3. Typographie

| Rôle | Famille | Poids | Usage |
|---|---|---|---|
| Titres | **Manrope** | 400 / 500 / 600 / 700 / 800 | h1–h4, headings produits |
| Body | **Inter** | 300 / 400 / 500 / 600 / 700 / 800 | Paragraphes, UI |
| Mono / tags | **JetBrains Mono** | 400 / 500 | Tags section, codes, valeurs num |

### Échelle headings

- **H1** : `Manrope 800` · `3rem` · `tracking -0.025em`
- **H2** : `Manrope 700` · `2.25rem`
- **H3** : `Manrope 700` · `1.5rem`
- **H4** : `Manrope 700` · `1.25rem`
- **Body** : `Inter 400` · `1rem` · `leading 1.6`
- **Small / caption** : `Inter 400` · `0.875rem` · `grey-500`
- **Tag mono** : `JetBrains Mono 500` · `0.75rem` · `uppercase` · `tracking 0.1em`

---

## 4. Boutons

Classes de référence (showroom) ou équivalent Tailwind.

### Primaire navy

```html
<a class="ds-btn ds-btn-navy">Demander une démo</a>
<!-- Tailwind équivalent -->
<a class="inline-flex items-center gap-2 px-5 py-2.5 rounded-full bg-[#143584] text-white text-sm font-semibold hover:bg-[#1a4280] hover:scale-105 transition-all shadow-lg shadow-[#143584]/20">
  Demander une démo
</a>
```

### Accent green

```html
<a class="ds-btn ds-btn-green">Voir la démo</a>
<!-- Tailwind -->
<a class="inline-flex items-center gap-2 px-5 py-2.5 rounded-full bg-[#00e898] text-[#143584] text-sm font-bold hover:bg-[#00c97f] hover:scale-105 transition-all shadow-lg shadow-[#00e898]/30">
  Voir la démo
</a>
```

### Outline navy

```html
<a class="ds-btn ds-btn-outline-navy">En savoir plus</a>
<!-- Tailwind -->
<a class="inline-flex items-center gap-2 px-5 py-2.5 rounded-full bg-transparent border-2 border-[#143584] text-[#143584] text-sm font-semibold hover:bg-[#143584] hover:text-white transition-all">
  En savoir plus
</a>
```

### Text / inline

```html
<a class="ds-btn ds-btn-text">Lire le use case →</a>
<!-- Tailwind -->
<a class="text-[#143584] font-semibold hover:underline">Lire le use case →</a>
```

### Tailles

- `ds-btn-sm` : padding `0.375rem 0.875rem`, font `0.8rem`
- (default) : padding `0.625rem 1.25rem`, font `0.875rem`
- `ds-btn-lg` : padding `1rem 1.75rem`, font `1rem`

**Hover universel** : `transform: scale(1.05)` + transition `0.2s ease`.

---

## 5. Badges

```html
<span class="ds-badge ds-badge-green ds-badge-green-dot">NOUVEAU</span>
<span class="ds-badge ds-badge-navy">BETA</span>
<span class="ds-badge ds-badge-grey">v2.1</span>
<span class="ds-badge ds-badge-danger">URGENT</span>
<span class="ds-badge ds-badge-warning">ROADMAP</span>
<span class="ds-badge ds-badge-premium">PREMIUM</span>
```

| Variante | Background | Couleur texte | Bordure |
|---|---|---|---|
| green | `rgba(0,232,152,0.15)` | navy | `rgba(0,232,152,0.3)` |
| navy | `rgba(20,53,132,0.1)` | navy | — |
| grey | `--taly-grey-100` | grey-600 | — (mono) |
| danger | `#fee2e2` | `#dc2626` | `#fecaca` |
| warning | `#fef3c7` | `#a16207` | `#fde68a` |
| premium | navy | white | — |

Style commun : `rounded-full`, `0.25rem 0.75rem` padding, font `0.75rem` `bold`.

---

## 6. Cards

### Feature card

Bordure grise, hover navy + shadow-lg.

```html
<div class="ds-card">
  <div class="w-12 h-12 rounded-lg bg-[#143584]/10 flex items-center justify-center mb-4">
    <i data-lucide="target" class="w-6 h-6 text-[#143584]"></i>
  </div>
  <h3 class="text-lg">Titre</h3>
  <p class="mt-2 text-sm text-[#475569]">Description.</p>
</div>
```

### Highlight card (gradient navy)

```html
<div class="rounded-2xl p-6 text-white shadow-lg shadow-[#143584]/20"
     style="background:linear-gradient(135deg,#143584,#1a4280);">
  <h3 class="text-lg text-white">Highlight</h3>
  <p class="mt-2 text-sm opacity-80">Texte sur fond gradient.</p>
</div>
```

### Pricing card (recommandée)

Bordure verte 2px + badge flottant.

```html
<div class="relative rounded-2xl border-2 border-[#00e898] bg-[#00e898]/5 p-6">
  <span class="absolute -top-3 left-6 bg-[#00e898] text-[#143584] px-3 py-0.5 rounded-full text-xs font-bold">
    RECOMMANDÉ
  </span>
  <h3 class="text-lg mt-2">Plan</h3>
  <p class="mt-4 text-3xl font-extrabold text-[#143584]">499€<span class="text-sm font-medium text-[#64748b]">/mois</span></p>
</div>
```

### Testimonial

```html
<div class="rounded-2xl border border-[#e5e7eb] p-8" style="background:linear-gradient(135deg,white,#f8fafc);">
  <div class="flex items-start gap-4">
    <div class="w-14 h-14 rounded-full bg-[#143584] text-white flex items-center justify-center font-bold">CB</div>
    <div>
      <p class="text-lg text-[#1e293b]">« Citation. »</p>
      <p class="mt-3 text-sm font-bold text-[#143584]">Claire B. <span class="text-[#64748b] font-normal">· Directrice admissions</span></p>
    </div>
  </div>
</div>
```

---

## 7. Formulaires

### Input standard

```html
<div class="form-group">
  <label class="form-label">Email pro</label>
  <input type="email" class="form-input" placeholder="jean@ecole.fr">
</div>
```

### États

- **Default** : border `--taly-grey-300`
- **Hover** : border `--taly-grey-400`
- **Focus** : border navy + ring `0 0 0 3px rgba(20,53,132,0.2)`
- **Valid** : ajout class `valid` → border green + ring green
- **Error** : ajout class `error` → border danger + ring red
- **Disabled** : bg `grey-50`, color `grey-300`, border `grey-200`

### Label

`uppercase`, `0.75rem`, `font-bold`, `tracking 0.05em`, color `grey-700`, mb `0.5rem`.

---

## 8. Tables

```html
<table class="data-table">
  <thead>
    <tr><th>Programme</th><th class="num">Candidats</th><th class="num">Admis</th><th>Tendance</th></tr>
  </thead>
  <tbody>
    <tr>
      <td><span class="ds-badge ds-badge-navy">GEMA</span> Grande École</td>
      <td class="num">1,247</td>
      <td class="num">892</td>
      <td><span class="kpi-trend up">+5.2%</span></td>
    </tr>
    <tr class="total-row">
      <td>Total</td><td class="num">2,535</td><td class="num">1,813</td>
      <td><span class="kpi-trend up">+3.2%</span></td>
    </tr>
  </tbody>
</table>
```

- `th` : bg `grey-100`, uppercase, `0.75rem`, tracking `0.05em`, border-bottom 2px
- `td.num` : align right, font mono
- `tr.total-row` : font-bold, bg `grey-100`, border-top 2px
- Hover row : bg `grey-50`

---

## 9. KPI cards

```html
<div class="kpi-card">
  <p class="kpi-label">Candidatures</p>
  <p class="kpi-value">1 284</p>
  <p class="kpi-trend up">+23% vs N-1</p>
</div>
```

- `kpi-label` : `0.75rem`, uppercase, color `grey-500`
- `kpi-value` : `1.875rem`, `Manrope 800`, color navy
- `kpi-trend.up` : color `#059669`
- `kpi-trend.down` : color `--taly-danger`

---

## 10. Dashboard mock

Fenêtre browser fake (3 dots rouge/jaune/vert) + body avec KPI grid + bar chart navy/green.

```html
<div class="dash-window">
  <div class="dash-header">
    <div class="dash-dots">
      <span class="dash-dot" style="background:#f87171;"></span>
      <span class="dash-dot" style="background:#fbbf24;"></span>
      <span class="dash-dot" style="background:#34d399;"></span>
    </div>
    <span>talyco.app/reporting</span>
  </div>
  <div class="dash-body">
    <!-- 3 kpi-card en grid + bar chart -->
  </div>
</div>
```

Bar chart : barres alternant navy / green. Border-radius top-only `4px 4px 0 0`.

---

## 11. Alertes

```html
<div class="ds-alert ds-alert-success"><div class="ds-alert-title">Succès</div>Message.</div>
<div class="ds-alert ds-alert-warning"><div class="ds-alert-title">Attention</div>Message.</div>
<div class="ds-alert ds-alert-danger"><div class="ds-alert-title">Erreur</div>Message.</div>
<div class="ds-alert ds-alert-info"><div class="ds-alert-title">Information</div>Message.</div>
```

Style : background light de la couleur sémantique + `border-left: 4px solid` couleur sémantique forte. Padding `1rem 1.25rem`, `radius-md`.

---

## 12. Icônes

**Librairie unique : [Lucide](https://lucide.dev/)** (jamais autre chose).

```html
<!-- CDN -->
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
<i data-lucide="target"></i>
<script>lucide.createIcons();</script>
```

Stroke par défaut : **1.5 ou 2**. Couleur : navy par défaut, green pour highlights.

Icônes utilisées sur le site :
`target`, `zap`, `trending-up`, `users`, `bar-chart-3`, `calendar`, `mail`, `message-square`, `check-circle-2`, `sparkles`, `rocket`, `shield-check`, `eye`, `bot`, `database`, `workflow`, `arrow-right`.

---

## 13. Élévation (ombres)

| Token | Valeur |
|---|---|
| `--taly-shadow-sm` | `0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)` |
| `--taly-shadow` | `0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)` |
| `--taly-shadow-lg` | `0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)` |
| `--taly-shadow-xl` | `0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)` |
| `--taly-shadow-navy` | `0 4px 14px -3px rgba(20,53,132,0.2)` |
| `--taly-shadow-navy-lg` | `0 20px 50px -10px rgba(20,53,132,0.15)` |
| `--taly-shadow-navy-glow` | `0 0 15px rgba(20,53,132,0.12), 0 0 40px rgba(0,232,152,0.06)` |
| `--taly-shadow-green` | `0 4px 14px -3px rgba(0,232,152,0.3)` |
| `--taly-shadow-green-lg` | `0 10px 25px -5px rgba(0,232,152,0.4)` |

### Border-radius

| Token | Valeur | Usage |
|---|---|---|
| `--taly-radius-sm` | `0.375rem` (6px) | code inline, micro-éléments |
| `--taly-radius` | `0.5rem` (8px) | par défaut |
| `--taly-radius-md` | `0.75rem` (12px) | inputs, alertes |
| `--taly-radius-lg` | `1rem` (16px) | KPI cards, dashboards |
| `--taly-radius-xl` | `1.5rem` (24px) | feature cards, testimonials |
| `--taly-radius-full` | `9999px` | boutons, badges, pills |

---

## 14. Espacements

Échelle utilisée :
- `space-1` `0.25rem` (4px)
- `space-2` `0.5rem` (8px)
- `space-3` `0.75rem` (12px)
- `space-4` `1rem` (16px)
- `space-6` `1.5rem` (24px)
- `space-8` `2rem` (32px)
- `space-12` `3rem` (48px)
- `space-16` `4rem` (64px)

**Container max** : `--taly-container-max: 1400px`.
**Section margin-bottom** : `5rem`.

---

## 15. Pills (programmes / campus)

```html
<span class="pill" style="background:#143584;">GEMA</span>
```

Style : `inline-block`, padding `0.4rem 1rem`, `radius-full`, color white, `0.75rem`, `font-bold`, `uppercase`, `tracking 0.03em`.

---

## 16. Report header (rapports PDF / pages)

```html
<div class="report-header">
  <div class="flex items-center gap-8">
    <div class="bg-white p-3 rounded-md">
      <img src="…/logos/talyco.png" class="h-12">
    </div>
    <div>
      <h3 class="text-2xl text-white font-bold">Rapport de Performance</h3>
      <p class="opacity-75 text-sm">Campagne 2025 — Paris</p>
    </div>
  </div>
</div>
```

Background : `gradient-navy`. Bottom border : `gradient-bar` 4px.

---

## 17. Équipe (cards fondateurs)

```html
<div class="ds-card text-center p-8">
  <div class="w-32 h-32 rounded-2xl overflow-hidden border-4 border-white shadow-lg mx-auto mb-6"
       style="outline:4px solid rgba(20,53,132,0.1);">
    <img src="https://talyco-public.s3.eu-west-3.amazonaws.com/photos/henri.jpeg">
  </div>
  <h3 class="text-xl mb-1">Henri Chabbert</h3>
  <div class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-[#143584]/10 border border-[#143584]/20 mb-3">
    <i data-lucide="bar-chart-3" class="w-3.5 h-3.5 text-[#143584]"></i>
    <span class="text-xs font-bold text-[#143584]">Marketing & Stratégie</span>
  </div>
  <p class="text-sm text-[#475569] leading-snug">Bio courte.</p>
</div>
```

### Photos équipe — URLs exactes (testées 200 OK)

⚠️ **Les noms de fichiers ne suivent PAS un pattern uniforme.** Utilise EXACTEMENT ces URLs :

| Personne | URL canonique (recommandée) | URL alternative |
|---|---|---|
| Henri Chabbert | `https://talyco-public.s3.eu-west-3.amazonaws.com/photos/henri.jpeg` | `/photo-henri.jpeg` |
| Roland Basset Chercot | `https://talyco-public.s3.eu-west-3.amazonaws.com/photos/roland.jpeg` | `/photo-roland.jpeg` |
| Jean-Marin Pitrat | `https://talyco-public.s3.eu-west-3.amazonaws.com/photos/jean-marin.png` | _(aucune ; `/photo+jean+marin.png` est CASSÉ — ne pas utiliser)_ |
| Christophe Baujault (témoignage) | `https://talyco-public.s3.eu-west-3.amazonaws.com/photo_christopheBaujault.jpg` | — |

**Règle d'or** : préférer toujours le dossier `/photos/{slug}.{ext}` quand il existe. Pour Jean-Marin, NE PAS utiliser `photo+jean+marin.png` (URL avec `+` qui retourne 403).

---

## 18. Assets — S3 public

Bucket : `https://talyco-public.s3.eu-west-3.amazonaws.com/`

⚠️ **Les noms ne sont PAS uniformes** (mix lowercase / capitalisé / `.png` / `.jpeg` / `.svg` / sans extension). **Utilise les URLs exactes ci-dessous, ne jamais les inventer.**

### Logos clients (écoles & entreprises)

| Client | URL |
|---|---|
| AIS | `/logos/AIS.png` (majuscules) |
| Savignac | `/logos/Savignac.png` (majuscule initiale) |
| ESA Assurances | `/logos/esa_assurances` (**SANS extension !**) |
| ISQ | `/logos/isq.png` |
| Airporting | `/logos/airporting.png` |
| Paidou | `/logos/paidou.png` |
| Kraaft | `/logos/kraaft.png` |

### Logos intégrations

**Acquisition / Ads** :
- `/logos/meta.png`
- `/logos/google_ads.png`
- `/logos/tiktok.png`
- `/logos/linkedin.png`
- `/logos/snapchat.png`
- `/logos/bing.svg` (**.svg** !)

**CRM / Outils** :
- `/logos/hubspot.png`
- `/logos/salesforce.png`
- `/logos/oscar_campus.png`
- `/logos/logo-studizz.png` (**préfixe `logo-`**)
- `/logos/eudonet.jpeg` (**.jpeg** pas .png)
- `/logos/pipedrive.png` (**lowercase**)

**Analytics / Data** :
- `/logos/google_analytics.png`
- `/logos/matomo.png`
- `/logos/logo-bigquery.svg` (**préfixe `logo-` + .svg**)
- `/logos/excel.png`
- `/logos/google_sheets.png`
- `/logos/flashoffice.png`

### URLs cassées (ne jamais utiliser)

❌ `/logos/Pipedrive.png` (majuscule) → 403
❌ `/logos/esa_assurances.png` (avec extension) → 403
❌ `/logos/monclient.png` → 403 (placeholder, n'existe pas)
❌ `/photo+jean+marin.png` → 403 (utiliser `/photos/jean-marin.png`)

**Ne jamais dupliquer ces assets en local.**

---

## 19. Conventions HTML / Nunjucks (site marketing)

- Templates : Eleventy `.njk` dans `src/`
- Layout principal : `_includes/base.njk`
- Includes communs : `header.njk`, `footer.njk`, `version-toggle.njk`
- Tracking : Google Tag Manager + GA4 (`G-DC4E9LJE1R`) — **obligatoire sur toutes les landings**
- Tailwind chargé via CDN (pas de build)
- Police : Google Fonts (Manrope, Inter, JetBrains Mono)
- Icônes : Lucide via CDN

### Structure type d'une page

```yaml
---
layout: base.njk
title: "..."
description: "..."
ogTitle: "..."
ogDescription: "..."
ogImage: "/path/to/og.png"
prospectKey: "Landing X"
from: "x"
hotjar: true
lemlist: true
bodyClass: "bg-white text-[#373737] font-sans overflow-x-hidden"
---
```

### URLs principales

- `/` → page Entreprise (par défaut)
- `/education/` → page Éducation
- `/entreprise/` → redirige vers `/`
- `/showroom/` → ce design system (visuel)
- `/showroom/design-system.md` → ce fichier
- `/llms.txt` → fiche d'index pour LLMs

---

## 20. Do / Don't

✅ **À faire**
- Utiliser les variables CSS `--taly-*` ou les hex exacts du tableau couleurs
- Navy pour les CTA primaires, green pour les accents / highlights
- Manrope pour tous les titres, Inter pour le body, JetBrains Mono pour tags / code
- `radius-full` pour boutons et badges, `radius-xl` pour cards de contenu
- Lucide pour toutes les icônes, stroke 1.5 ou 2
- Hover : `scale(1.05)` + transition `0.2s ease` sur les CTA
- Border par défaut : `#e5e7eb` (`--taly-border`)

❌ **À éviter**
- Inventer de nouvelles couleurs hors palette
- Utiliser navy en couleur de body text (réservé aux titres / CTA)
- Utiliser plus de 2 polices simultanément dans un même bloc
- Mixer Lucide avec d'autres librairies d'icônes (Heroicons, Feather, Font Awesome)
- Dupliquer les logos S3 en local
- Ajouter des box-shadows custom : utiliser les tokens `--taly-shadow-*`

---

## 21. Snippets prêts à l'emploi

### Hero section type

```html
<section class="max-w-7xl mx-auto px-6 py-20 text-center">
  <span class="text-xs font-mono uppercase tracking-widest text-[#143584]/70">SOUS-TITRE</span>
  <h1 class="mt-4 font-bold text-5xl text-[#143584]" style="font-family:Manrope;letter-spacing:-0.025em;">
    Titre principal en deux lignes
  </h1>
  <p class="mt-6 max-w-2xl mx-auto text-lg text-[#475569]">Sous-titre explicatif.</p>
  <div class="mt-8 flex justify-center gap-4">
    <a href="/onboarding.html" class="px-8 py-4 rounded-lg bg-[#143584] text-white font-bold hover:bg-[#0f2b6e] transition shadow-xl shadow-[#143584]/20">
      Demander une démo
    </a>
    <a href="/demo/" class="px-8 py-4 rounded-lg border border-[#143584]/20 text-[#143584] font-bold hover:bg-white transition">
      Voir la démo
    </a>
  </div>
</section>
```

### Section "fonctionnalités" 3 colonnes

```html
<section class="max-w-7xl mx-auto px-6 py-16">
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    <!-- 3x ds-card avec icône Lucide + h3 + p -->
  </div>
</section>
```

---

## Versioning

- Format : `MAJOR.MINOR.PATCH` (semver)
- Historique : voir `VERSIONS.md` à la racine du repo
- Tokens source : `taly-design-system/css/variables.css` et `taly-design-system/tokens/*.json`