# Design System Tempus — v1

*Dérivé de la charte graphique Cécile Hencky 2025 et des textes validés du projet. Système d'invariants pour concevoir le site. Les 2-3 directions de maquette se composent par-dessus ce système : elles ne le redéfinissent pas.*

---

## 0. Direction visuelle (école Eklozia · Hencky)

Réf. : trois sites du même duo (charte **Cécile Hencky** + réalisation **studio Eklozia**) — cecilehencky.com, acf-will.fr, studio.eklozia.net/bouveresse. Tempus se cale sur le registre **sobre/institutionnel** (ACF Will, Bouveresse). Grammaire à respecter :

- **Blocs denses en dégradé, immersifs** (Argile modelé, pas d'aplat) portant des sections entières.
- **Titres de section en capitales Aeternum**, lettrage espacé ; lockup à deux niveaux (titre caps + sous-titre plus léger ou italique Satoshi).
- **Boutons rectangulaires à coins droits, label capitales** — jamais de pilule.
- **Trait fin tissé entre les blocs** : crochets d'angle ⌐, barre verticale d'exergue, numéros en exposant (01·02·03), lignes fines qui serpentent dans le blanc et débordent aux coutures. Assets charte (silhouettes, ligne stratigraphique, monogramme, puces) dans ce rôle. Tisser, pas encombrer.
- **Images composées, décalées, superposées** (cadres qui se chevauchent, crop cercle, découpe diagonale possible). Vraie photographie.
- **Texture délavée admise** (1–2 sections) : lavée, désaturée, atmosphérique. Seul cas où les strates JPEG servent — en voile basse intensité.
- **Accent Cuivre chaud sur fond Argile.**

## 1. Couleurs & rôles

| Couleur | Hex web | Rôle |
|---|---|---|
| Roche | `#0e0d0c` | Texte principal, aplats sombres |
| Blanc cassé | `#faf8f4` | **Fond clair principal (quasi blanc)** |
| Albâtre | `#ebe4d9` | Bandes chaudes, cartes, texte sur fond dense |
| Argile | `#873816` | Fond dense (**en dégradé**), liens texte sur fond clair |
| Cuivre | `#d16224` | Accent, CTA, titres display |
| Mélèse | `#3a603a` | Vert de soutien, repérage axe 02 |
| Mousse | `#93953e` | Soutien, repérage axe 03 — décoratif uniquement |

**Deux fonds clairs :** l'un tire **franchement vers le blanc** (`#faf8f4`) pour les grandes surfaces, l'autre reste l'**Albâtre chaud** (`#ebe4d9`) pour les bandes et les cartes. Ce contraste clair/chaud/dense rythme la page (extension au nuancier de la charte, signalée comme telle). Les blocs **denses ne sont pas des aplats** : Argile modelé en **dégradé**.

## 2. Contrastes vérifiés (WCAG, ratios calculés)

| Texte | Sur fond | Ratio | Verdict | Usage |
|---|---|---|---|---|
| Roche | Albâtre | 15,4:1 | AAA | Corps + titres, partout |
| Blanc | Argile | 8,1:1 | AAA | Corps sur fond dense |
| Argile | Albâtre | 6,4:1 | AA | Liens, sous-titres sur clair |
| Albâtre | Argile | 6,4:1 | AA | Corps sur fond dense |
| Mélèse | Albâtre | 5,7:1 | AA | Texte de soutien |
| Roche | Cuivre | 5,1:1 | AA | **Label CTA — toutes tailles** |
| Blanc | Cuivre | 3,8:1 | AA grand | Label CTA ≥18px gras seulement |
| Cuivre | Albâtre | 3,0:1 | AA grand | Titres ≥24px, filets — pas de corps |
| Mousse | Albâtre | 2,5:1 | Échoue | Décoratif uniquement |
| Cuivre | Argile | 2,1:1 | Échoue | Display uniquement, jamais texte |

**Règles non négociables :** corps = Roche (clair) ou Blanc/Albâtre (dense) · liens sur clair = Argile, jamais Cuivre · CTA = fond Cuivre + label Roche · Cuivre et Mousse interdits en corps de texte.

## 3. Typographie

- **Satoshi** (Fontshare, libre) : titres + corps. `font-family: "Satoshi"`.
- **Aeternum Medium** : capitales exclusivement, pour kicker et exergue. Fournie en **WOFF2** (regular + italic, 540 glyphes, accents FR complets). `font-family: "Aeternum"`. Voir `aeternum-webfont.css` pour le `@font-face` prêt à l'emploi.

Échelle de départ (se resserre en mobile) : H1 46 / -.02em · H2 31 / -.01em · H3 21 · chapô 20 italique (Argile) · corps 17 / line-height 1.6 · kicker 13 / .22em capitales (Cuivre).

## 4. Composants

- **CTA** : **rectangle à coins droits** (pas de pilule), fond Cuivre, label **capitales** Roche, puce flèche en affordance. Variante secondaire : contour Argile. *(Aligné sur l'école Eklozia/Hencky : boutons rectangulaires en capitales.)*
- **Liens texte** : Argile, souligné Cuivre.
- **Lockup titre** : kicker Aeternum caps Cuivre + titre (Satoshi, ou **capitales Aeternum** pour les titres de section) + éventuel sous-titre plus léger/italique.
- **Blocs denses** : **dégradé Argile** (jamais aplat), pouvant recevoir un voile de trait fin en filigrane.
- **Cartes prestations** : les 3 axes reçoivent une couleur de repérage — Opérations de terrain = Cuivre, Traitement de l'information = Mélèse, Valorisation = Mousse — portée par un filet et l'index, **jamais par le texte** (qui reste Roche). Ce fil couleur se prolonge sur les pages internes et les filtres projets.
- **Trait fin tissé** : crochets d'angle ⌐, barres verticales d'exergue, numéros en exposant, lignes qui débordent d'une section à l'autre — avec sobriété.
- **Images** : compositions **décalées/superposées** (cadres qui se chevauchent, crop cercle, découpe diagonale), jamais grille plate.
- **Header** (sticky) : logo *seul* + navigation ; en mobile, le **menu burger de la charte** (`Tempus-Menu-Burger.svg`, tel quel) → **overlay plein écran** Argile, liens grandes capitales, filets fins, croix de fermeture.
- **Listes** : puce-point de la charte (recolorée en Cuivre).
- **Diviseur / silhouettes** : ligne stratigraphique fine et silhouettes ville/paysage en séparateurs et bandes de pied de page.

## 5. Traitement de l'image

Priorité à la **photographie** (terrain, coupes) en **compositions décalées** (voir §0), et au langage de trait de la charte. Voile de marque (dégradé Argile ou Roche) sous les textes posés sur image.

**Texture délavée :** une ou deux sections peuvent recevoir un fond texturé **lavé, désaturé, atmosphérique** (réf. fond fantôme de Bouveresse). C'est là — et seulement là — que les **strates JPEG** servent, en voile basse intensité, jamais en illustration pleine.

⚠️ Les 7 visuels istock fournis sont **« à acheter si utilisés »** — décision à prendre avant mise en production.

## 6. Application — zonage de la home

Alternance clair / dense (Albâtre / Argile) pour rythmer la lecture :

1. **Hero** (fond clair) — lockup « Tempus » + H1 + chapô italique + CTA, visuel terrain.
2. **Le collectif** (clair) — deux paragraphes, prose.
3. **Nos prestations** (dense) — 3 cartes code-couleur.
4. **Nos derniers projets** (clair) — grille dynamique 3-6 projets + CTA.
5. **Nos commanditaires** (clair) — liste typographique ou mur de logos.
6. **Travailler avec Tempus** (dense) — CTA contact, silhouette en pied.

## 7. Garde-fous

**À faire :** corps Roche/Blanc selon le fond · CTA **rectangle** Cuivre+Roche, label capitales · blocs denses **en dégradé** · titres de section en **capitales Aeternum** · code couleur des axes en filet · trait fin **tissé avec sobriété** · images **composées/décalées** · max deux fonds clairs (dont un quasi blanc).

**À éviter :** Cuivre/Mousse en corps · liens Cuivre sur clair · **boutons en pilule** · **aplats denses plats** (préférer le dégradé) · incliner/aplatir/ombrer/recolorer le logo · **surcharger** les motifs · vocabulaire creux (« innovant », « dynamique », « souplesse » répété, « sur-mesure » vide) · effacer la distinction archéologie programmée ≠ préventive.

---

## Brief à coller dans Claude Design

```
SYSTÈME TEMPUS — contraintes de design (ne pas dévier)

DIRECTION VISUELLE (école Eklozia/Hencky — sobre, institutionnel)
Blocs denses en DÉGRADÉ Argile (pas d'aplat). Titres de section en CAPITALES Aeternum + sous-titre léger.
Boutons RECTANGULAIRES à coins droits, label capitales (pas de pilule). Trait fin tissé entre les blocs
(crochets d'angle, barres verticales, numéros, lignes qui débordent). Images composées/décalées/superposées.
Texture délavée admise dans 1–2 sections seulement (strates JPEG en voile basse intensité).

COULEURS (hex web)
Roche #0e0d0c (texte) · Blanc cassé #faf8f4 + Albâtre #ebe4d9 (deux fonds clairs, l'un quasi blanc)
Argile #873816 (fond dense EN DÉGRADÉ, liens texte sur clair) · Cuivre #d16224 (accent, CTA, titres display)
Mélèse #3a603a · Mousse #93953e (repérage des 3 axes, décoratif — jamais de texte en Mousse)

CONTRASTE
Corps = Roche sur clair / Blanc-Albâtre sur dense. Liens sur clair = Argile.
CTA = fond Cuivre + label Roche. Cuivre/Mousse interdits en corps.

TYPO
Satoshi (titres + corps). Aeternum Medium EN CAPITALES seulement (kicker, titres de section, exergue) — WOFF2 fournie.
Échelle : H1 46 / H2 31 / H3 21 / chapô 20 italique / corps 17, line-height 1.6.

COMPOSANTS
CTA rectangle Cuivre + label capitales + puce flèche (pas de pilule). Cartes prestations : 3 axes code-couleur (Cuivre/Mélèse/Mousse) en filet, texte Roche.
Lockup titre caps + sous-titre. Blocs denses en dégradé. Menu mobile = burger fourni → overlay plein écran caps.

TON & INTERDITS
Sobre, factuel, aéré. Trait fin tissé avec sobriété (ne pas surcharger). Pas de pilule, pas d'aplat dense plat.
Logo : ne pas incliner/aplatir/ombrer/recolorer. Bannir « innovant / dynamique / souplesse (répété) / sur-mesure » creux.
Garder distinction archéo programmée ≠ préventive.

HOME — zonage
Hero (H1+chapô+CTA) → Collectif → 3 prestations (dense) → Projets → Commanditaires → Travailler avec Tempus (dense).
```