# Handoff #2 — Harmonisation du chat, de l'accueil et des projets > Suite du handoff « Navigation multi-outils », implémenté en entier. > Ce document décrit ce qui change dans les trois écrans restés sur l'ancienne direction > artistique, et spécifie les sept composants créés sans maquette (§6 du brief). > Rédigé le 2026-08-07. ## Périmètre | Livré ici | Fichier de style visé | |---|---| | Accueil du chat | `WelcomeHome.css` | | Écran de conversation | `styles/index.css` (partie chat + messages) | | Page d'un projet | `ProjectHome.css` | | Les sept composants du §6 | divers | **Non livré, à traiter dans un handoff suivant** : les vues Flow (propositions, checklist, onglets d'experts, colonnes de débat, tiroir, progression), les six fichiers `Mode*.css`, `ProjectFilesManager.css`, `QuotaGauge.css` et la priorité 3. ## Le fichier de design `Harmonisation LintellO.dc.html` est une **référence de design**, pas du code de production. Il s'ouvre directement dans un navigateur (garder `support.js` à côté). Le bandeau haut de 44 px et son sélecteur d'écran sont l'échafaudage de démo : ne pas les implémenter. Dessiné et capturé sur **1440 px de large**. Au-delà, le contenu reste en pleine largeur (décision 1 du brief) ; seules les mesures de lecture bornent le texte : **88 ch** sur les paragraphes de réponse de l'assistant et sur le bloc d'instructions de projet, **78 ch** dans le viewer de page (inchangé). --- ## Ce qui change, et pourquoi ### Accueil du chat L'ancien écran était centré verticalement autour d'un logo de 80 px, d'un « Bonjour David ! » en 44 px et d'un composer flottant, sans rien d'autre. Trois conséquences : l'écran ne ressemblait à aucun autre accueil d'outil, il ne montrait aucun contenu, et le logo répétait à 400 px de la colonne ce que la colonne dit déjà. Le nouvel écran reprend **exactement le squelette des accueils d'outil** du handoff 1 : icône + titre, sous-titre, composer, chips, liste. Rien de spécifique au chat, sinon la note de mode et la liste des conversations récentes qui remplit la moitié basse restée vide. ### Conversation Trois défauts corrigés. 1. **Le message utilisateur occupait toute la largeur en aplat bleu saturé.** Sur un écran de 1920 px cela produisait un bloc de 1 500 px de texte blanc sur `#2563eb` — illisible, et qui donnait au message de l'utilisateur plus de poids visuel qu'à la réponse. Il devient une carte bornée à **620 px**, alignée à droite, fond `#eff4ff`, texte `#2f353c`. L'accent reste présent par le fond doux, plus par l'aplat. 2. **Le contenu collé était rendu en markdown brut** (`**`, `##`, `[!]()`) au milieu du message. Un contenu long collé devient une **pièce jointe repliée** : en-tête avec domaine, titre, nombre de mots, et un corps limité à 76 px avec dégradé de coupe, dépliable. 3. **La réponse de l'assistant n'a plus de bulle.** Texte en flux, 14 px / 1.62, `max-width: 88ch`. Une bulle autour d'une réponse longue coûte deux bordures et 28 px de padding sans rien apprendre ; l'étiquette « LintellO · Mode Général » suffit à attribuer le tour. Les actions (copier, régénérer, exporter en document, vérifier par une recherche) apparaissent **au survol du tour**, pas en permanence. « Vérifier par une recherche » est la perméabilité inverse prévue au handoff 1 : le chat relance une recherche. ### Page d'un projet L'ancienne page centrait tout à ~940 px, listait les conversations en lignes de 13 px sans méta ni date, et n'affichait pas les recherches alors qu'elles y sont rattachées depuis le 06/08. La nouvelle page passe en pleine largeur et adopte les **lignes de liste du handoff 1** (titre 13,5 px / 500, méta 11,5 px, valeur à droite 11 px, filet `#f4f5f7`). Deux sections distinctes, **Conversations · n** et **Recherches · n**, comptées depuis les données. Une troisième, **Fichiers**, porte le chip « Bientôt » : le Drive n'est pas livré, un compteur à zéro se lirait « vide » là où il faut lire « pas encore ». Les instructions du projet passent d'un paragraphe toujours ouvert à un **repli**, ouvert par défaut, borné à 88 ch. --- ## Valeurs au pixel ### Enveloppe (identique aux écrans déjà refaits) - Colonne 258 px, `border-right: 1px solid #e6e8ec`, fond `#fcfcfd`. - Fil d'Ariane 46 px, padding `0 24px`, `border-bottom: 1px solid #f0f1f4`, hors du conteneur de défilement. Segment cliquable : 12,5 px / 500 `#4b5158`, `padding: 2px 6px`, `margin-left: -6px`, radius 6, hover fond `#f2f4f7`. Feuille : 12,5 px `#8b9099`, ellipsis à 420 px. Séparateur « / » `#c3c7cd`. - Corps : `padding: 34px 42px 60px`, pleine largeur. ### Accueil du chat | Élément | Valeurs | |---|---| | Icône de titre | 24 px, `#2563eb`, gap 12 px | | H1 | 30 px / 700, `letter-spacing: -0.025em` | | Sous-titre | 13,5 px, `line-height: 1.55`, `#8b9099`, `max-width: 620px`, `text-wrap: pretty` | | Composer | `1px solid #e4e7ec`, radius 14, `box-shadow: 0 1px 2px rgba(16,24,40,.04)`, padding `14px 16px`, gap 12 px | | Boutons du composer | 28 px, radius 7, icône 17 px `#9aa0a8`, hover fond `#f2f4f7` (l'icône mode passe `#2563eb`) | | Placeholder | 14,5 px `#a6abb3` | | Bouton d'envoi | 34 px, radius 9, `#2563eb`, hover `#1d4ed8` | | Chip de mode | hauteur 32, padding `0 13px`, radius 9, `1px solid #e4e7ec`, 12,5 px `#4b5158`, icône 14 px, gap 7 px, `flex: none; white-space: nowrap` | | Chip de mode actif | `1px solid #2563eb`, fond `#eff4ff`, texte `#2563eb` | | « Voir tous les modes » | même gabarit, bordure `1px dashed #d3d7de`, texte `#7d838b`, hover bordure + texte accent ; suffixe « Ctrl M » 10 px `#a6abb3` | | Note de mode | 12 px `#a0a6ae`, marge haute 12 px | | Titre de section | 10,5 px / 600, capitales, `letter-spacing: .09em`, `#a0a6ae`, filet 1 px `#ebedf1`, marge `34px 0 6px` | | Ligne de liste | padding `11px 12px`, `border-bottom: 1px solid #f4f5f7`, icône 15 px `#b0b5bc`, gap 14 px, titre 13,5 px / 500 `#1a1d21`, méta 11,5 px `#9aa0a8`, valeur droite 11 px `#b0b5bc`, hover fond `#fafbfc` | **Le chip de mode actif ne remplit pas en bleu plein.** L'ancien écran de projet le faisait (`background: #2563eb`, texte blanc) : un chip de sélection au même poids visuel que le bouton d'envoi, seul élément primaire de l'écran. Le fond doux `#eff4ff` + bordure accent suffit à dire « sélectionné » et garde une seule action primaire par écran. ### Conversation | Élément | Valeurs | |---|---| | Titre de conversation | 19 px / 600, `letter-spacing: -0.02em`, padding `14px 42px 10px`, bouton renommer 24 px `#a6abb3` | | Méta à droite | 11,5 px `#a0a6ae` (« Mode Général · 4 messages ») | | Zone de messages | `padding: 6px 42px 24px`, défilement propre | | Étiquette de tour | 10,5 px / 600, capitales, `letter-spacing: .09em`, `#a0a6ae`, marge basse 6–8 px | | Message utilisateur | `max-width: 620px`, `1px solid #e0e9fb`, radius 12, fond `#eff4ff`, padding `12px 14px`, texte 13,5 px / 1.6 `#2f353c` | | Pièce jointe collée | `1px solid #dbe4f6`, radius 10, fond `#fff` ; en-tête padding `8px 10px`, titre 11,5 px / 500 `#4b5158`, méta 10,5 px `#a0a6ae` ; bouton 22 px, `1px solid #e4e7ec`, radius 6, 10,5 px `#6b7178` | | Corps replié | `max-height: 76px`, `mask-image: linear-gradient(#000 40%, transparent)`, texte 12,5 px / 1.6 `#6b7178` | | Réponse assistant | `max-width: 88ch`, paragraphes 14 px / 1.62 `#2f353c`, marge basse 13 px, `text-wrap: pretty` | | Puce de liste | `padding-left: 15px`, « • » `#c3c7cd` en absolu | | Actions de tour | boutons 26 px, `1px solid #e4e7ec`, radius 7, 11 px `#6b7178`, hover bordure + texte `#2563eb` ; `opacity: 0` → 1 au survol ou au focus, transition 120 ms | | Rampe vers la recherche | `1px solid #e9ebef`, radius 10, fond `#fcfcfd`, padding `11px 13px`, texte 12,5 px `#6b7178`, bouton 28 px `#2563eb` | | Composer bas | même carte que l'accueil, `padding: 0 42px 14px` | | Mentions sous le composer | 11 px `#b0b5bc`, gap 14 px, deux mentions sur une ligne | Les libellés des mentions sont **« Entrée pour envoyer · Maj+Entrée pour un saut de ligne »** et **« L'IA peut faire des erreurs. Vérifiez les informations importantes. »** — sur une seule ligne, alignées à gauche. L'ancienne version les centrait sur deux lignes séparées, ce qui donnait à un avertissement permanent le poids d'un titre. ### Page d'un projet | Élément | Valeurs | |---|---| | Icône + H1 | dossier 24 px `#2563eb`, titre 30 px / 700, bouton renommer 26 px `#a6abb3` | | Pastille mode par défaut | hauteur 26, padding `0 10px`, radius 7, fond `#eff4ff`, 11,5 px / 500 `#2563eb`, icône 13 px | | Compteurs | 11,5 px `#a0a6ae`, dérivés des données | | Repli d'instructions | libellé 12,5 px / 500 `#4b5158`, chevron 13 px `#b0b5bc` rotation 0→90°, 140 ms ; corps 13,5 px / 1.62 `#6b7178`, indent 21 px, `max-width: 88ch` | | Sections | mêmes titres et lignes que l'accueil du chat ; « Tout voir » 11 px `#8b9099`, hover `#2563eb` | | Section Fichiers | chip « Bientôt » `padding: 2px 7px`, radius 5, fond `#f1f3f6`, 9,5 px / 600 `#9aa0a8` ; phrase 12,5 px `#a6abb3` | --- ## Les sept composants du §6 ### 1. Encart « Informations pratiques » Carte 300 px (colonne droite de la restitution de recherche), `1px solid #e9ebef`, radius 12. En-tête padding `11px 13px`, `border-bottom: 1px solid #f0f1f4`, label 10,5 px / 600 capitales `#a0a6ae`. Corps padding `12px 13px` : nom 13,5 px / 500 `#1a1d21`, puis trois lignes icône 14 px `#b0b5bc` + texte 12,5 px / 1.5 `#4b5158`, gap 9 px, espacées de 8 px. - Le **téléphone est un lien `tel:`**, couleur `#2563eb`. C'est la seule donnée composable de la carte ; la rendre inerte obligerait à la recopier à la main. - L'**état d'ouverture** est en `#4b5158` sur une ligne, les horaires détaillés en 11,5 px `#9aa0a8` en dessous : on lit « c'est ouvert » avant de lire quand. - Le **pied de carte est la provenance**, cliquable, pleine largeur, `border-top: 1px solid #f0f1f4`, fond `#fcfcfd`, 11 px `#6b7178` + date de relevé `#a0a6ae`. Une donnée pratique sans sa source ne se vérifie pas, et une adresse périmée sans date ne se conteste pas. Remplace les chiffres clés — les deux ne coexistent jamais dans la colonne. ### 2. Fenêtre « Envoyer au chat » Largeur max 440 px, radius 14, `box-shadow: 0 18px 40px rgba(16,24,40,.12)`. En-tête padding `13px 16px`, titre 14 px / 600, fermeture 26 px. Quatre zones dans l'ordre : 1. **Ce qui part** — bandeau `1px solid #e9ebef`, radius 10, fond `#fcfcfd`, 11,5 px `#6b7178`. Il nomme le contenu *et* son volume (« synthèse + 18 sources »). Le pont transporte la synthèse et ses sources, pas seulement le sujet ; l'utilisateur doit le voir avant d'envoyer. 2. **Destination** — 5 conversations récentes + « Nouvelle conversation » **en premier**. Lignes 34 px, radius 8, `1px solid #e9ebef` ; sélectionnée : bordure `#2563eb`, fond `#eff4ff`. Méta droite 10,5 px `#b0b5bc`. 3. **Question facultative** — champ `1px solid #e4e7ec`, radius 10, padding `10px 12px`, 13 px. Le mot « facultative » est dans le label, en 400 `#b0b5bc` : sans lui, un champ vide se lit comme une erreur. Amorces : chips 26 px, radius 7, 11 px. 4. **Pied** — `border-top`, fond `#fcfcfd` ; rappel 11 px `#b0b5bc` à gauche, « Annuler » secondaire 30 px, « Envoyer » primaire 30 px `#2563eb`. ### 3. Popover de choix de projet Largeur 268 px, radius 12, ombre de fenêtre. Champ de filtre 32 px, fond `#f2f4f7`, radius 8. Lignes 32 px, radius 7, 12,5 px `#4b5158` ; sélectionnée fond `#eaf1ff` texte `#2563eb` + coche 13 px à droite. Liste bornée à 250 px de haut, défilante. Pied « Nouveau projet… » 34 px, `border-top: 1px solid #f0f1f4`. **« Aucun projet » est la première ligne**, avec sa propre icône et un filet en dessous qui la sépare de la liste. Détacher est une action aussi légitime que rattacher : la reléguer en bas, ou n'offrir que la désélection, ferait du hors-projet un état par défaut qu'on subit. Monté depuis deux points : le bouton « Rattacher à un projet » du fil d'Ariane, et l'action de survol des lignes de la colonne. Même composant, même ancrage sous le déclencheur. ### 4. Actions au survol dans la colonne Trois boutons 21 px — **Renommer**, **Rattacher à un projet**, **Supprimer** — en `position: absolute`, `right: 4px; top: 3px`, gap 1 px. Icônes 13 px `#8b9099`, hover fond `#dfe4ea` texte `#1a1d21` ; la corbeille en hover `#fbe3e6` / `#be123c`. Au survol **ou au focus clavier** de la ligne (`:hover`, `:focus-within`), le badge projet passe à `opacity: 0` et les actions à `opacity: 1`, transition 120 ms. C'est le seul endroit du design où une règle CSS parent-enfant est nécessaire. S'applique aux **conversations et aux recherches** — mêmes gestes, même gabarit. Chaque bouton porte un `title` : sans lui, trois icônes de 13 px sont indevinables. ### 5. États du viewer de page **Chargement.** Barre de progression 2 px en tête du panneau (`#eef2f8`, remplissage `#2563eb`), puis bloc centré padding `26px 20px` : « Extraction du PDF… » 13 px / 500 `#4b5158` et « Environ 8 secondes. La page sera ensuite lue instantanément. » 11,5 px `#a0a6ae`. La seconde phrase est obligatoire : elle dit que l'attente **ne se reproduira pas**. Sans elle, 8 secondes se lisent comme le coût de chaque ouverture. Pour une page HTML ordinaire, pas de message — l'extraction est immédiate. **Échec.** Icône alerte 20 px `#c3c7cd`, titre « Page inaccessible » 13 px / 500 `#4b5158`, explication 11,5 px / 1.55 `#a0a6ae` (« Le site refuse l'extraction, ou l'article est réservé aux abonnés »), puis **sortie** : bouton 32 px, `1px solid #d6dbe2`, radius 8, texte `#2563eb`, hover fond `#f5f8ff` — « Ouvrir la page d'origine ». Un échec sans issue est un cul-de-sac. ### 6. Curseur d'historique Deux boutons carrés 26 px (`1px solid #e9ebef`, radius 7, icône 13 px `#8b9099`, hover bordure + icône `#2563eb`) encadrant la position « 2 / 6 » en 11 px `#a0a6ae`, `min-width: 34px`, centrée. Aligné **à droite, seul sur sa ligne, 8 px au-dessus du champ de requête**. Il glisse sur la liste plate des recherches, ferme le viewer s'il est ouvert, et n'a **aucun effet sur l'historique du navigateur**. Reculer puis lancer une nouvelle recherche n'efface pas les entrées suivantes : ce n'est pas un historique branchant. Sous le champ, la mention 11 px `#b0b5bc` : « Toute saisie ici lance une nouvelle recherche — celle-ci reste dans l'historique. » ### 7. Aide sous le champ de recherche Sous le composer de l'accueil Recherche, gap 9 px : icône ampoule 13 px `#c3c7cd` + texte 11,5 px / 1.55 `#a0a6ae`, `text-wrap: pretty`. Copie : **« Posez une vraie question, pas des mots-clés. »** suivie, en `#b0b5bc`, d'un exemple opposant les deux formulations. La consigne seule ne suffit pas — c'est l'exemple qui montre l'écart. Affichée **uniquement tant que le champ est vide**, et jamais sur l'écran de restitution. --- ## Thème sombre — règles de bascule Le prototype est dessiné en clair. Le produit commute par `data-theme="dark"` sur la racine et le jeu de jetons existant couvre déjà la palette. Chaque valeur de ce document se lit donc comme un **rôle**, pas comme un hexadécimal. Correspondances : | Rôle | Clair | Sombre | |---|---|---| | Fond zone principale | `#ffffff` | `#14171c` | | Fond colonne | `#fcfcfd` | `#101318` | | Survol de ligne (zone principale) | `#fafbfc` | `#1a1e25` | | Survol de ligne (colonne) | `#eef1f5` | `#1e232b` | | Champ, badge, segmented | `#f2f4f7` / `#f1f3f6` | `#1e232b` | | Trait fort (colonne, cartes) | `#e6e8ec` / `#e4e7ec` | `#282e37` | | Trait faible (filets de liste) | `#f4f5f7` / `#f0f1f4` | `#1f242c` | | Encre 1 (titres) | `#1a1d21` | `#eef1f5` | | Encre 2 (corps) | `#2f353c` / `#3d434a` | `#cdd3db` | | Encre 3 (secondaire) | `#4b5158` / `#6b7178` | `#a6aeb8` | | Encre 4 (méta, labels) | `#8b9099` / `#a0a6ae` | `#7d848e` | | Encre 5 (effacé, compteurs) | `#b0b5bc` / `#c3c7cd` | `#5d646e` | | Accent | `#2563eb` | `#5b91f5` | | Accent survol | `#1d4ed8` | `#7aa8ff` | | Fond actif | `#eaf1ff` | `rgba(91,145,245,.14)` | | Fond doux | `#eff4ff` / `#f5f8ff` | `rgba(91,145,245,.09)` | | Lien de source | `#1a3fa0` | `#8fb4fb` | | Sélection texte | `#dbeafe` | `rgba(91,145,245,.28)` | | Danger (corbeille) | `#fbe3e6` / `#be123c` | `rgba(190,18,60,.18)` / `#f28b9f` | Trois règles qui ne se déduisent pas du tableau : 1. **Les ombres deviennent quasi nulles**, c'est le trait qui porte l'élévation. La fenêtre « Envoyer au chat » et le popover de projet passent de `0 18px 40px rgba(16,24,40,.12)` à `0 12px 32px rgba(0,0,0,.44)` **plus** un `1px solid #2f3640` — sans ce trait, la fenêtre se confond avec le fond. 2. **Le message utilisateur** ne peut pas garder `#eff4ff` : le fond doux devient `rgba(91,145,245,.10)` avec `1px solid rgba(91,145,245,.24)`, texte en encre 2. 3. **Le dégradé de coupe** du contenu collé replié est un masque, pas un fond : il fonctionne dans les deux thèmes sans retouche. Ne pas le remplacer par un dégradé blanc. --- ## Accessibilité **Focus visible partout** : `outline: 2px solid #2563eb; outline-offset: 2px; border-radius: 6px` sur `:focus-visible`, sur tous les boutons, entrées et lignes cliquables. En sombre, l'accent éclairci `#5b91f5`. Les actions au survol de la colonne apparaissent aussi au `:focus-within` — sinon elles sont inatteignables au clavier. **Contraste.** La dette du handoff 1 est reconduite telle quelle et n'est pas aggravée : aucun niveau d'encre nouveau, aucune taille sous 10 px. Trois points restent sous WCAG AA aux tailles d'emploi — compteurs 10,5 px `#b0b5bc`, labels de section 10,5 px `#a0a6ae`, placeholder 14,5 px `#a6abb3`. Rejouer `node scripts/contraste.mjs` après implémentation. Deux corrections possibles sans refondre l'échelle, si un audit l'impose : passer les **méta de ligne** de `#9aa0a8` à `#7d838b` (11,5 px, 4,54:1) et les **mentions du composer** de `#b0b5bc` à `#8b9099`. Elles ne touchent aucune hiérarchie de la colonne. **Raccourcis conservés** : `Ctrl L` action primaire, `Ctrl K` recherche globale, `Ctrl M` modes (affiché sur le chip « Voir tous les modes » et en `title` du bouton ampoule du composer). Afficher ⌘ sur macOS. --- ## Mobile (≤ ~900 px) Non redessiné ici — la structure du handoff 1 s'applique sans changement : tab bar basse à cinq outils, tiroir de projets, header 54 px. Les adaptations propres à ces trois écrans : - **Accueil chat** : titre 22 px, sous-titre 12,5 px, composer compact (radius 12, 13 px), chips de mode en défilement horizontal sur une ligne, sans retour à la ligne. - **Conversation** : message utilisateur `max-width: 86%`, réponse pleine largeur ; les actions de tour ne sont plus au survol mais **toujours visibles**, réduites à copier et régénérer, les deux autres passant dans un menu « … ». - **Page projet** : sections empilées, valeur droite de ligne passée sous la méta. - **Fenêtre « Envoyer au chat »** et **popover de projet** : feuille pleine largeur ancrée en bas, pied d'actions fixe. --- ## Copies exactes (`SCREEN_COPY`) | Emplacement | Texte | |---|---| | Accueil chat — titre | `Bonjour ` | | Accueil chat — sous-titre | `Posez votre question, ou choisissez un mode. La conversation pourra être rattachée à un projet à tout moment.` | | Accueil chat — placeholder | `Comment puis-je vous aider ?` | | Accueil chat — note de mode | `Les modes ne s'appliquent qu'au chat — la recherche, le farming et l'éditeur ont leurs propres réglages.` | | Accueil chat — section | `Conversations récentes` | | Accueil chat — état vide | `Aucune conversation pour l'instant. Posez une première question ci-dessus.` | | Conversation — placeholder | `Écrivez votre message…` | | Conversation — mention saisie | `Entrée pour envoyer · Maj+Entrée pour un saut de ligne` | | Conversation — avertissement | `L'IA peut faire des erreurs. Vérifiez les informations importantes.` | | Conversation — pièce jointe | `Page collée · mots` / `Afficher tout` / `Replier` | | Conversation — rampe recherche | `Lancer une recherche web pour trouver .` / bouton `Chercher` | | Projet — placeholder | `Comment puis-je vous aider sur ce projet ?` | | Projet — repli | `Instructions du projet` | | Projet — pastille | `Mode par défaut · ` | | Projet — sections | `Conversations · ` / `Recherches · ` / `Fichiers · ` | | Projet — fichiers bientôt | `Les fichiers du projet seront gérés depuis le Drive, une fois l'outil livré.` | | Projet — état vide conversations | `Aucune conversation dans « ». Posez une première question ci-dessus.` | | Projet — état vide recherches | `Aucune recherche rattachée à « ».` | | Envoyer au chat — titre | `Envoyer au chat` | | Envoyer au chat — label | `Destination` / `Votre question — facultative` | | Envoyer au chat — placeholder | `Que voulez-vous en tirer ?` | | Envoyer au chat — amorces | `Résume les points clés` / `Qu'est-ce qui manque ?` / `Compare avec mes notes` | | Envoyer au chat — rappel | `La synthèse et ses sources sont transmises.` | | Popover projet — entrées | `Aucun projet` / `Nouveau projet…` / placeholder `Chercher un projet` | | Viewer — chargement | `Extraction du PDF…` / `Environ 8 secondes. La page sera ensuite lue instantanément.` | | Viewer — échec | `Page inaccessible` / `Le site refuse l'extraction, ou l'article est réservé aux abonnés.` / `Ouvrir la page d'origine` | | Recherche — aide | `Posez une vraie question, pas des mots-clés.` | | Actions de survol — titres | `Renommer` / `Rattacher à un projet` / `Supprimer` | --- ## Captures Dossier `screenshots/`, viewport 1440 px, thème clair. - `01-accueil-chat.png` - `02-conversation.png` — message collé replié - `03-conversation-message-colle-deplie.png` - `04-page-projet.png` - `05-composants-1-4.png` — informations pratiques, envoyer au chat, popover projet, actions au survol - `06-composants-5-7.png` — états du viewer, curseur d'historique, aide de recherche - `07-colonne-vue-projets.png` ## Fichiers - `Harmonisation LintellO.dc.html` — prototype cliquable (4 écrans, sélecteur dans le bandeau haut) - `support.js` — runtime du prototype, à garder à côté du HTML - `screenshots/` ## Reste à traiter 1. **Vues Flow** — propositions, checklist, onglets d'experts, colonnes de débat, tiroir, progression. Aucun équivalent dans les deux handoffs : c'est de la conception, pas de la transposition. À traiter dans un handoff dédié. 2. **Six fichiers `Mode*.css`** — la modale de choix de mode a été vue mais pas redessinée ; elle reprendra les lignes de liste et le gabarit de fenêtre spécifiés ici. 3. `ProjectFilesManager.css`, `QuotaGauge.css`, résumé de conversation, barre d'instructions durables. 4. Priorité 3 — tarifs, connexion, pages légales.