# Brief Claude Design — Maquette complète de l'accueil Tempus ## Mission Concevoir la **page d'accueil complète** du site Tempus (bureau d'études en Archéologie et Histoire), **menu et navigation compris**. La page doit être responsive (desktop + mobile) et respecter strictement le design system Tempus fourni. Les textes ci-dessous sont **validés, à reprendre tels quels**. **Registre visuel — priorité :** les visuels et le langage graphique de la graphiste (charte Cécile Hencky : logo, monogramme, silhouettes, ligne stratigraphique dessinée, puces) et les **photographies réelles** (terrain, coupes) portent l'identité. **En appui seulement :** 4 fonds de stratigraphie (JPEG, `strat*.jpg`) disponibles comme texture d'appoint, à employer **avec parcimonie — une zone au maximum**. Ne pas générer d'autres images ; ne pas multiplier les strates. **Système :** `design_system_tempus_v1.md`. **Polices :** `fonts.css` + WOFF2 (Satoshi à télécharger sur Fontshare, Aeternum fournie). --- ## 0. Direction visuelle (école Eklozia · Hencky) — prioritaire Référence : trois sites du même duo (charte **Cécile Hencky** + réalisation **studio Eklozia**) — cecilehencky.com, acf-will.fr, studio.eklozia.net/bouveresse. Transcrire leur grammaire dans le registre **sobre et institutionnel** de Tempus (le plus proche d'ACF Will et Bouveresse). Ces principes priment sur toute interprétation « SaaS clair » : - **Blocs de couleur en dégradé, immersifs.** Les sections denses ne sont pas des aplats : Argile **modelé en dégradé** (plus clair à un angle, densifié en diagonale), portant des sections entières. C'est ce qui donne la profondeur (réf. bleus de Bouveresse). - **Titres en capitales espacées (Aeternum).** Titres de section en **capitales Aeternum lettrage espacé** (réf. « DOMAINES D'INTERVENTION »). Lockup à deux niveaux : titre caps + sous-titre plus léger ou en italique Satoshi. - **Boutons rectangulaires, label capitales.** **Pas de pilule arrondie.** Rectangle plat à coins droits, label en **capitales espacées**, fond Cuivre (label Roche) ou variante contour Argile. - **Trait fin tissé entre les blocs.** Le graphisme n'est pas cantonné au header : **crochets d'angle ⌐** près/au-dessus des titres et aux angles des blocs, **barre verticale d'accent** devant les exergues, **numéros en exposant** (01·02·03), **lignes fines qui serpentent dans le blanc et débordent** d'une section à l'autre aux coutures. Employer les assets charte (silhouettes, ligne stratigraphique, monogramme, puces) dans ce rôle. Sobre : tisser, pas encombrer. - **Images composées, décalées, superposées.** Jamais une grille plate : **cadres décalés qui se chevauchent** (un portrait sur une image plus large), crops en cercle possibles, éventuelle **découpe en diagonale** (réf. ACF). Vraie photographie art-dirigée. - **Texture délavée admise (1–2 sections).** Un fond texturé est possible **s'il est lavé, désaturé, atmosphérique** (réf. le fond photo fantôme de « Acheter aux enchères » sur Bouveresse). C'est là, et seulement là, que les **strates JPEG** peuvent servir — **en voile basse intensité**, jamais en illustration pleine et saturée. - **Accent chaud sur fond dense.** Cuivre qui claque sur l'Argile (validé par l'orange-sur-nuit de Cécile). --- ## 1. Navigation & arborescence (menu complet) **Menu principal (header, sticky) :** Logo Tempus (version « seul », monochrome Roche) à gauche · liens : **À propos · Équipe · Prestations ▾ · Projets · Contact** · bouton CTA « Nous contacter » (**rectangle Cuivre, label capitales** — pas de pilule) à droite. **Menu mobile** : logo à gauche + le **menu burger de la charte** (`Tempus-Menu-Burger.svg`, fourni — trois traits organiques dessinés) en haut à droite, **utilisé tel quel** (ne pas le redessiner ni le réemballer). Au tap → **overlay plein écran** (fond Argile) : liens en **grandes capitales Aeternum**, empilés, **filets fins de séparation**, croix de fermeture en haut à droite, bouton « Nous contacter ». Sous-menu Prestations en accordéon. **Sous-menu déroulant « Prestations »** (3 sous-pages) : - Opérations de terrain - Traitement et gestion de l'information scientifique - Valorisation et diffusion scientifique **Arborescence complète du site** (pour cohérence du menu et du footer) : Accueil · À propos · Équipe · Prestations *(page générale + les 3 sous-pages ci-dessus)* · Projets · Contact · Mentions légales · Politique de confidentialité. **Footer :** logo **version simple / seule (sans baseline)** sur fond dense + phrase de présentation · colonne Navigation (reprend le menu principal) · contact réduit : **« Nous écrire » uniquement** — *pas d'adresse postale, pas de « CV HAL »* · bande de silhouette (motif ville/paysage, SVG fourni) au-dessus · barre légale : « © Tempus 2025 · Conception : Studio Eklozia · Charte graphique : Cécile Hencky · Mentions légales · Confidentialité » — ***sans* mention « association loi 1901 »**. --- ## 2. Structure de la home (section par section, copy validée) **Alternance de fonds** clair (**blanc cassé `#faf8f4`, quasi blanc** / Albâtre chaud `#ebe4d9`) et dense (**dégradé Argile `#873816`**) pour rythmer — deux familles de fond clair maximum. L'un des deux fonds clairs tire **franchement vers le blanc** pour accentuer le contraste avec les bandes chaudes et denses. **Images — usage sobre.** Priorité à la **photographie** (terrain / coupe) et au langage de trait de la charte, en compositions décalées (voir §0). Les strates JPEG sont admises comme **texture délavée** dans **1 à 2 sections** au maximum (réf. fond fantôme de Bouveresse) : basse intensité, désaturées, jamais en illustration pleine. Toujours un **voile (scrim)** ou une zone claire dédiée pour la lisibilité — **jamais de texte courant sur une zone chargée**. Le texte suit les contrastes du design system (corps Roche sur clair, blanc/Albâtre sur dense). ### Hero *(fond clair)* - Kicker (Aeternum caps, Cuivre) : **Bureau d'études · Archéologie & Histoire** - H1 : **Expertise scientifique et technique en Archéologie et Histoire** - Chapô (Satoshi italique, Argile) : *Quatre chercheuses et chercheurs en Archéologie et en Histoire. Des prestations scientifiques et techniques pensées pour les acteurs de la recherche et du patrimoine.* - CTA : **Découvrir nos prestations** (rectangle Cuivre, label capitales + puce flèche) + **Nous contacter** (rectangle contour Argile) - **Visuel :** composition photographique décalée (cadre principal + cadre secondaire qui se chevauche, ou crop cercle), terrain/coupe. Crochet d'angle ⌐ et/ou ligne fine qui déborde vers la section suivante. Strate en fond possible uniquement en voile délavé (voir §0/§2). ### Le collectif *(fond clair chaud, Albâtre)* - Kicker : **Le collectif** - H2 : **Un collectif de chercheuses et de chercheurs au service de vos projets** - Deux paragraphes (prose, deux colonnes) : 1. *Tempus réunit quatre chercheuses et chercheurs en Archéologie et en Histoire avec des expertises complémentaires : prospection géophysique, étude du mobilier archéologique, géomatique et gestion de données numériques. Ensemble ou séparément, ces profils sont mobilisables selon les besoins et le périmètre de chaque projet.* 2. *Cette complémentarité répond à une réalité que connaissent bien les acteurs de la recherche et du patrimoine : les projets se multiplient, les approches se diversifient et certaines expertises sont plus efficacement mobilisées en dehors des institutions publiques. Tempus propose précisément ce type d'appui : des prestations expertes, modulables, portées par des chercheuses et des chercheurs qui connaissent ce milieu et ses contraintes de l'intérieur.* ### Nos prestations *(fond dense, dégradé Argile)* - Kicker : **Nos prestations** - H2 (capitales Aeternum) : **Trois axes, une chaîne opératoire complète** - Intro : *Selon les projets, l'équipe prend en charge une mission entière ou apporte une expertise ponctuelle sur une étape précise.* - **3 cartes, code couleur des axes** (filet + index en Aeternum ; texte toujours Roche) : - AXE 01 — **Opérations de terrain** *(filet Cuivre)* : Prospections géophysiques, fouilles archéologiques programmées, études de mobilier, imagerie numérique. → Découvrir - AXE 02 — **Traitement et gestion de l'information scientifique** *(filet Mélèse)* : Bases de données, cartographie et SIG, données numériques, Science Ouverte et Plan de Gestion de Données. → Découvrir - AXE 03 — **Valorisation et diffusion scientifique** *(filet Mousse)* : Inventaire et récolement, médiation culturelle, rédaction scientifique, conférences et enseignement. → Découvrir ### Nos derniers projets *(fond clair)* - Kicker : **Nos derniers projets** · H2 : **Du terrain à la diffusion scientifique** - Grille dynamique de **3 à 6 fiches projet**. Gabarit de fiche : visuel d'entête (placeholder) · type d'intervention (couleur de l'axe) · titre du site/opération · contexte 2 lignes (cadre PCR/ANR/musée, membres impliqués, nature de l'intervention). - CTA : **Voir tous les projets** ### Nos commanditaires *(fond clair chaud)* - Kicker : **Nos commanditaires** · H2 : **Ils travaillent avec Tempus** - Liste (chips typographiques) : Universités · Laboratoires du CNRS & organismes de recherche · Musées · Collectivités territoriales · Services déconcentrés du Ministère de la Culture · Opérateurs d'archéologie préventive. ### Travailler avec Tempus *(fond dense, dégradé Argile)* - Kicker : **Travailler avec Tempus** - H2 (capitales Aeternum) : **Chaque mission fait l'objet d'un cadrage préalable** - Texte : *Tempus s'intègre aux projets de ses partenaires sans substituer son organisation à la leur.* - CTA : **Nous contacter** (rectangle Cuivre, label capitales) - Fond : **dégradé Argile**, éventuellement voile de trait fin (silhouette/ligne) en filigrane. Barre verticale d'accent devant le titre. ### Footer *(voir §1)* --- ## 3. Design system (rappel condensé) **Couleurs :** Roche `#0e0d0c` (texte) · **Blanc cassé `#faf8f4`** (fond clair principal, quasi blanc) · Albâtre `#ebe4d9` (bandes chaudes, cartes) · Argile `#873816` (fond dense **en dégradé**, liens sur clair) · Cuivre `#d16224` (accent, CTA, titres display) · Mélèse `#3a603a` · Mousse `#93953e` (repérage axes, décoratif). **Contraste :** corps = Roche sur clair / Blanc-Albâtre sur dense · liens sur clair = Argile · CTA = fond Cuivre + label Roche · **jamais** de Cuivre ni de Mousse en corps de texte. **Typo :** Satoshi (titres + corps) · Aeternum Medium EN CAPITALES uniquement (kicker, index) · échelle H1 clamp(34–58) / H2 clamp(27–42) / H3 21 / chapô 20 italique / corps 17, line-height 1.6. **Composants :** CTA **rectangle Cuivre, label capitales** (+ puce flèche) · cartes prestations code-couleur (filet + index Aeternum) · lockup kicker/titre caps + sous-titre · **blocs denses en dégradé Argile** · trait fin tissé (crochets d'angle, barres verticales, numéros, lignes qui débordent) · images composées/décalées · header sticky + menu mobile via le burger fourni → overlay plein écran. **Assets SVG fournis :** logos (seul / baseline / monogramme, toutes couleurs), puces (point, flèches), menu burger, silhouettes, stratigraphie. --- ## 4. Interactions & responsive - Header **sticky** avec léger fond translucide au scroll. - **Prestations ▾** : menu déroulant au survol (desktop) / accordéon (mobile). - **Menu mobile** (< ~880px) : le **burger fourni** (`Tempus-Menu-Burger.svg`), en haut à droite → **overlay plein écran** fond Argile, liens grandes capitales Aeternum, filets fins, croix de fermeture, CTA « Nous contacter ». - **Retour en haut de page** : pastille d'angle persistante apparaissant au scroll (flèche ou monogramme). *Style exact à caler sur les réalisations Eklozia — à confirmer.* - Cartes prestations et projets : léger *hover* (élévation). - Ancres internes fluides (scroll-behavior smooth). ## 5. Interdits (garde-fous charte + rédaction) - Ne pas incliner / aplatir / ombrer / recolorer le logo. - Pas de Cuivre ni Mousse en corps de texte ; pas de lien Cuivre sur fond clair. - Trait fin **tissé avec sobriété** : les motifs peuvent s'intercaler entre les blocs, mais sans surcharger ni empiler stratigraphie + silhouette + strate au même endroit. - Pas de bouton en **pilule arrondie** (rectangle à coins droits, label capitales). - Bannir le vocabulaire creux : « innovant », « dynamique », « souplesse » répété, « sur-mesure » vide. - Conserver la distinction **archéologie programmée ≠ préventive** (Tempus intervient en programmée).