# 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). --- ## 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 » (pilule Cuivre) à droite. En mobile : menu burger (SVG fourni) ouvrant un panneau plein écran. **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 baseline sur fond dense) + phrase de présentation · colonne Navigation (reprend le menu principal) · colonne Association Tempus (adresse : 57 rue Battant, 25000 Besançon ; « Nous écrire » ; « CV HAL de l'équipe ») · bande de silhouette (motif ville/paysage, SVG fourni) au-dessus · barre légale : « © Tempus 2025 — Association loi 1901 · Conception : Studio Eklozia · Charte graphique : Cécile Hencky · Mentions légales · Confidentialité ». --- ## 2. Structure de la home (section par section, copy validée) **Alternance de fonds** clair (tint `#f4efe8` / Albâtre `#ebe4d9`) et dense (Argile `#873816`) pour rythmer — deux familles de fond maximum. **Images — usage sobre.** Le hero et les zones visuelles accueillent en priorité une **photographie** (terrain / coupe) ou un traitement issu du langage de la charte. Les 4 strates JPEG restent **en réserve** : **une seule** au maximum, par exemple en fond de hero, et uniquement si elle sert la page. Toujours prévoir un **voile (scrim)** ou une zone claire dédiée pour la lisibilité — **jamais de texte courant sur une zone chargée**. Ne pas habiller plusieurs sections de strates : c'est ce qui alourdit et éloigne du registre sobre de la charte. 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** (pilule Cuivre + puce flèche) + **Nous contacter** (contour Argile) - **Visuel :** zone dédiée (à droite ou en fond) — en priorité une **photographie** terrain/coupe ou un traitement issu de la charte. Option de réserve : une strate en fond, avec voile pour la lisibilité (voir §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, Argile)* - Kicker : **Nos prestations** - H2 : **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, Argile)* - Kicker : **Travailler avec Tempus** - H2 : **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** - Fond : aplat Argile (dense). Pas de strate ici. ### Footer *(voir §1)* --- ## 3. Design system (rappel condensé) **Couleurs :** Roche `#0e0d0c` (texte) · Albâtre `#ebe4d9` + tint `#f4efe8` (fonds clairs) · Argile `#873816` (fond dense, liens texte 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 pilule Cuivre + puce flèche · cartes prestations code-couleur (filet + index Aeternum) · lockup kicker+titre · alternance de fonds clair/dense · header sticky + burger mobile. **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). - **Burger** en dessous de ~880px : panneau de navigation plein écran. - 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. - Un seul motif signature par zone ; ne pas accumuler stratigraphie + silhouette + puces au même endroit. - 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).