ADR-0028 — Le détail du Cabinet en trois colonnes : nav in-page, sections, client épinglé

Statut	🟢 Accepté — 2026-06-22 ; implémenté (Cabinet.tsx detail(), app/ui.css .al-detail3* ; tsc + next build verts)
Portée	Mise en page du détail d'une demande au Cabinet (sous le board). Affine ADR-0027 (D-KANBAN-1) sans toucher au board ni aux transitions. Plus un réglage de contraste des colonnes du Kanban.
Décision	Le détail passe en trois colonnes : (1) nav in-page collante (scrollspy) vers Actions / Progression / Synthèse / Revue / Journal ; (2) les sections ancrées ; (3) une carte client épinglée (collante) qui garde le client courant en vue. Les layers du board sont plus contrastés avec le fond.
Réf.	ADR-0027 — Cabinet en Kanban ; ADR-0020 — Identité client & annuaire (source nom/emails) ; DESIGN.md (sticky utile, restreint) ; PRODUCT.md (contexte obligatoire)

🎯 À retenir

Sous le Kanban, le détail empilait cinq grosses sections : un scroll kilométrique pour atteindre le Journal. On remet la colonne d'aiguillage (le « fil » des itérations précédentes), cette fois en nav in-page (scrollspy) qui saute aux sections sans parcourir tout le détail. Et comme « après une longue journée on ne sait jamais sur qui on travaille », une carte client épinglée à droite garde nom, tenant et emails toujours en vue. Le détail riche reste une vue (pas une modale, ADR-0027) ; on lui donne juste une charpente navigable.

Contexte

ADR-0027 a sorti le détail du panneau droit et l'a posé sous le board, en colonne unique : Actions, Progression, Synthèse du calcul, Revue des hypothèses, Journal. À l'usage, deux manques :

• Scroll long pour passer d'une section à l'autre (la Synthèse porte waterfall + tornado, la Revue est volumineuse) : atteindre le Journal demande de tout dérouler.
• Le client se perd de vue une fois qu'on a scrollé dans le détail : l'identité (nom, tenant, emails) n'est plus à l'écran, alors que c'est le repère « sur qui je travaille ».

Décision

• D-DETAIL-1 — Nav in-page (scrollspy) à gauche. Une colonne collante liste les cinq sections ; cliquer saute en douceur (respecte prefers-reduced-motion), et un IntersectionObserver marque la section visible (état actif). Réinstallé quand la demande change ; suit les hauteurs variables (Synthèse/Revue chargent en async) sans recalcul. Pas de bord-latéral accentué (ban DESIGN.md) : l'actif est un fond sel-bg + texte heading.
• D-DETAIL-2 — Carte client épinglée à droite. Colonne collante : nom (serif), tenant (code), emails (mailto), puis l'étude en cours (intitulé, chip de statut, produit, DBO figée). Le nom et les emails viennent de l'annuaire clients (ADR-0020), chargé pour le senior ; pour junior/externe (annuaire non chargé), la carte retombe proprement sur tenant + intitulé + statut + DBO. Aucune donnée hors périmètre n'est exposée.
• D-DETAIL-3 — Layers du board plus contrastés. Les colonnes du Kanban passent d'un fond heading 4% à heading 9%, bordure pleine (--al-border) et un filet de lumière interne, pour se détacher du fond « aurore ». Reste sobre (pas de couleur ajoutée).
• D-DETAIL-4 — Repli en une colonne sous 1180px. La nav disparaît (les sections restent accessibles au scroll), la carte client remonte en tête (order: -1) pour rester visible d'entrée. Poste de travail sur écran large par défaut (PRODUCT.md).

Conséquences

• Positif. Le détail se parcourt par sauts (plus de scroll kilométrique) ; le client reste toujours en vue ; le board respire mieux (layers détachés). Aucune logique ni garde touchée.
• Limite assumée. Trois colonnes + le détail riche demandent de la largeur ; sous 1180px on perd l'aiguillage (acceptable, le scroll reste). Le scrollspy est cosmétique : s'il dérape sur un cas extrême, la navigation au clic et le scroll restent fonctionnels.
• Pas de backend. Aucune route, schéma, garde modifiés ; pas de migration.

Déclencheur de réexamen (pré-enregistré)

• Détail jugé trop étroit (si la colonne centrale serre la Synthèse/le waterfall entre la nav et le client) → rendre la carte client repliable (bouton épingle) pour rendre sa largeur au centre à la demande.