tech-ui-mobile-Dm0DMKIR.js

js chargeops.net collected 2026-10-02 02:06:53 UTC 461,105 bytes, 111 lines download raw bytes

1import{j as e}from"./vendor-react-QE7wLE3r.js";import{D as x,i as j,a as o,P as i,e as s,O as p,L as r,c as t,S as n,U as l,h as u,m as c,C as d,d as a,K as h}from"./ui-BfT7Kz5y.js";import"./index-C5UqyXey.js";import"./vendor-radix-C7HJG0re.js";import"./vendor-motion-DpnOviVe.js";function q(){return e.jsxs(x,{title:"10 â UI/UX, Mobile, Branding et Configuration systÃ¨me",lastEdited:"2026-09-30",intro:e.jsxs(i,{children:["Documentation technique exhaustive de la couche prÃ©sentation de"," ",e.jsx(n,{children:"ChargeOps"})," : systÃ¨me de design, composants Radix, theming light/dark, animations Framer Motion, stratÃ©gie responsive mobile-first, branding personnalisable (logos Polara/ChargeOps, marqueurs cartes, animations de chargement), configuration systÃ¨me (marques de bornes, modÃ¨les, carriers SIM, liens utiles) et internationalisation FR/EN."]}),children:[e.jsx(j,{items:[{label:"DÃ©veloppeur frontend",tone:"indigo"},{label:"Designer",tone:"violet"}]}),e.jsx(o,{id:"sources",title:"Sources",children:e.jsxs(i,{children:["Sources principales : ",e.jsx(s,{children:"client/src/App.tsx"}),","," ",e.jsx(s,{children:"client/src/components/app-layout.tsx"}),","," ",e.jsx(s,{children:"client/src/components/ui/"}),","," ",e.jsx(s,{children:"client/src/components/shell/"}),","," ",e.jsx(s,{children:"client/src/pages/branding.tsx"}),","," ",e.jsx(s,{children:"client/src/pages/configuration.tsx"}),","," ",e.jsx(s,{children:"client/src/hooks/"}),","," ",e.jsx(s,{children:"client/src/lib/translations.ts"}),","," ",e.jsx(s,{children:"client/src/index.css"}),", ",e.jsx(s,{children:"tailwind.config.ts"}),","," ",e.jsx(s,{children:"convex/schema.ts"}),", ",e.jsx(s,{children:"convex/configuration/"}),","," ",e.jsx(s,{children:"extension/"}),", ",e.jsx(s,{children:"vite.extension.config.ts"}),","," ",e.jsx(s,{children:"convex/extension/queries.ts"}),","," ",e.jsx(s,{children:"scripts/package-extension.mjs"}),","," ",e.jsx(s,{children:"extension/store/"}),"."]})}),e.jsx(o,{id:"table-matieres",title:"Table des matiÃ¨res",children:e.jsxs(p,{children:[e.jsx(r,{children:"Partie 1 â SystÃ¨me UI gÃ©nÃ©ral"}),e.jsx(r,{children:"Partie 2 â Mobile et responsive"}),e.jsx(r,{children:"Partie 3 â Branding et customisation"}),e.jsx(r,{children:"Partie 4 â Configuration systÃ¨me"}),e.jsx(r,{children:"Partie 5 â Internationalisation (i18n)"}),e.jsx(r,{children:"Partie 6 â Analytics frontend"}),e.jsx(r,{children:"Partie 7 â Extension Chrome officielle (MV3)"}),e.jsx(r,{children:"Partie 8 â Mode terrain hors ligne"})]})}),e.jsxs(o,{id:"partie-1",title:"Partie 1 â SystÃ¨me UI gÃ©nÃ©ral",children:[e.jsxs(t,{id:"vue-ensemble",title:"1. Vue d'ensemble du design",children:[e.jsxs(i,{children:["ChargeOps adopte une esthÃ©tique ",e.jsx(n,{children:"moderne"}),","," ",e.jsx(n,{children:"glassmorphique"})," et"," ",e.jsx(n,{children:"pleinement bi-thÃ¨me"})," (clair / sombre). Les principes directeurs sont :"]}),e.jsxs(l,{children:[e.jsxs(r,{children:[e.jsx(n,{children:"Glassmorphism"})," : panneaux flous (",e.jsx(s,{children:"backdrop-blur"}),") avec bordures translucides (",e.jsx(s,{children:"rgba(255,255,255,0.x)"}),"), saturations relevÃ©es (",e.jsx(s,{children:"saturate(1.8)"}),") et lueurs colorÃ©es subtiles. Visible dans ",e.jsx(s,{children:"header-glass"}),", ",e.jsx(s,{children:"glass-toast"}),", le menu profil (",e.jsx(s,{children:"!bg-white/55 dark:!bg-gray-900/60 backdrop-blur-2xl"}),")."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Dark mode natif"})," : pilote"," ",e.jsx(s,{children:'darkMode: ["class"]'})," dans ",e.jsx(s,{children:"tailwind.config.ts"}),". La classe ",e.jsx(s,{children:"dark"})," est ajoutÃ©e Ã  ",e.jsx(s,{children:"<html>"})," ","par ",e.jsx(s,{children:"ThemeProvider"}),". Les variables CSS HSL changent selon ",e.jsx(s,{children:":root"})," et ",e.jsx(s,{children:".dark"}),"."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Transitions de page"})," : Framer Motion gÃ¨re les apparitions de blocs (",e.jsx(s,{children:"initial"}),", ",e.jsx(s,{children:"animate"}),","," ",e.jsx(s,{children:"transition"}),") avec"," ",e.jsxs(s,{children:["LazyMotion features=","{domAnimation}"]})," au sommet de l'arbre (voir ",e.jsx(s,{children:"App.tsx"}),")."]}),e.jsxs(r,{children:[e.jsx(n,{children:"AccessibilitÃ©"})," :",e.jsxs(l,{children:[e.jsxs(r,{children:[e.jsx(s,{children:":focus-visible"})," global ",e.jsx(n,{children:"bi-ton"})," : un contour opaque ",e.jsx(s,{children:"var(--focus-ring)"})," (Ã©mis aprÃ¨s la couche components, donc Ã  spÃ©cificitÃ© Ã©gale il l'emporte sur le ",e.jsx(s,{children:"outline-none"})," propre Ã "," ",e.jsx(s,{children:".btn-3d"}),") plus un halo"," ",e.jsx(s,{children:"var(--focus-halo)"})," dÃ©clarÃ© dans"," ",e.jsx(s,{children:"@layer base"}),", qui remplit l'Ã©cart ouvert par"," ",e.jsx(s,{children:"outline-offset"}),". Les deux teintes s'inversent entre thÃ¨mes clair et sombre, de sorte qu'au moins l'une ressorte sur n'importe quel fond â dont l'en-tÃªte marine, qui est un wrapper ",e.jsx(s,{children:"dark"})," local. Le halo est en"," ",e.jsx(s,{children:"base"})," et non hors couche parce que les utilitaires"," ",e.jsx(s,{children:"ring-*"})," de Tailwind sont eux-mÃªmes des"," ",e.jsx(s,{children:"box-shadow"})," : un Ã©lÃ©ment qui porte son propre"," ",e.jsx(s,{children:"focus-visible:ring-*"})," le remplace proprement au lieu d'Ãªtre Ã©crasÃ©."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Boutons"})," : le ",e.jsx(s,{children:"Button"})," shadcn porte"," ",e.jsx(s,{children:"focus-visible:outline-none"}),", un utilitaire (0,2,0) qui l'emporte sur le contour global (0,1,0) â le"," ",e.jsx(s,{children:"@layer"})," de Tailwind 3 n'est pas une vraie couche de cascade, c'est la spÃ©cificitÃ© qui tranche â et son"," ",e.jsx(s,{children:"focus-visible:ring-2"})," est un box-shadow que chaque halo ",e.jsx(s,{children:"html.theme-cleo .btn-*"})," (0,2,1) remplace. Aucune variante ",e.jsx(s,{children:".btn-3d"})," ne montrait donc de focus, jusqu'Ã  ce que"," ",e.jsx(s,{children:"html.theme-cleo .btn-3d:focus-visible"})," (0,3,1) dans ",e.jsx(s,{children:"theme-cleo.css"})," rÃ©tablisse le contour (CHARGEOPS-523, verrouillÃ© par"," ",e.jsx(s,{children:"components/ui/__tests__/button-focus-visible.test.ts"}),"). Tout autre Ã©lÃ©ment qui combine"," ",e.jsx(s,{children:"focus-visible:outline-none"})," et son propre box-shadow a besoin du mÃªme traitement."]}),e.jsxs(r,{children:["Les anneaux de focus s'Ã©crivent"," ",e.jsx(s,{children:"focus-visible:"})," et jamais ",e.jsx(s,{children:"focus:"}),", pour qu'un clic de souris ne laisse pas d'anneau. Exception volontaire : ",e.jsx(s,{children:"focus:bg-accent"})," sur les items Radix (",e.jsx(s,{children:"DropdownMenuItem"}),", ",e.jsx(s,{children:"ContextMenuItem"}),","," ",e.jsx(s,{children:"SelectItem"}),") et les jours de"," ",e.jsx(s,{children:"react-day-picker"})," â Radix leur donne le focus"," ",e.jsx(n,{children:"au survol de la souris"}),", que"," ",e.jsx(s,{children:":focus-visible"})," ne capte pas. Les deux rÃ¨gles sont verrouillÃ©es par"," ",e.jsx(s,{children:"components/ui/__tests__/focus-visible.test.ts"}),"."]}),e.jsxs(r,{children:["PrÃ©fÃ©rence ",e.jsx(s,{children:"prefers-reduced-motion: reduce"})," honorÃ©e â les durÃ©es d'animation passent Ã  ",e.jsx(s,{children:"0.01ms"}),"."]}),e.jsxs(r,{children:["Labels ARIA prÃ©sents (",e.jsx(s,{children:"aria-label"}),","," ",e.jsx(s,{children:"data-testid"})," partout pour les tests)."]}),e.jsx(r,{children:"Targets touch â¥ 32 px sur mobile."})]})]})]})]}),e.jsxs(t,{id:"catalogue-radix",title:"2. Composants Radix UI â catalogue",children:[e.jsxs(i,{children:["Tous les composants partagÃ©s vivent dans"," ",e.jsx(s,{children:"client/src/components/ui/"}),". Ils sont basÃ©s sur"," ",e.jsx(n,{children:"Radix UI primitives"})," stylÃ©es via Tailwind +"," ",e.jsx(s,{children:"class-variance-

1authority"}),". Catalogue complet :"]}),e.jsx(u,{headers:["CatÃ©gorie","Composants"],rows:[[e.jsx(n,{children:"Overlays"}),e.jsxs(e.Fragment,{children:[e.jsx(s,{children:"dialog.tsx"}),", ",e.jsx(s,{children:"alert-dialog.tsx"}),","," ",e.jsx(s,{children:"sheet.tsx"}),", ",e.jsx(s,{children:"drawer.tsx"}),","," ",e.jsx(s,{children:"popover.tsx"}),", ",e.jsx(s,{children:"hover-card.tsx"}),","," ",e.jsx(s,{children:"tooltip.tsx"}),", ",e.jsx(s,{children:"consolidated-tooltip.tsx"}),","," ",e.jsx(s,{children:"animated-tooltip.tsx"}),","," ",e.jsx(s,{children:"portal-tooltip.tsx"}),","," ",e.jsx(s,{children:"left-docked-tooltip.tsx"}),","," ",e.jsx(s,{children:"truncated-text.tsx"})]})],[e.jsx(n,{children:"Menus"}),e.jsxs(e.Fragment,{children:[e.jsx(s,{children:"dropdown-menu.tsx"}),","," ",e.jsx(s,{children:"context-menu.tsx"}),", ",e.jsx(s,{children:"menubar.tsx"}),","," ",e.jsx(s,{children:"navigation-menu.tsx"}),", ",e.jsx(s,{children:"command.tsx"})]})],[e.jsx(n,{children:"Inputs"}),e.jsxs(e.Fragment,{children:[e.jsx(s,{children:"input.tsx"}),", ",e.jsx(s,{children:"textarea.tsx"}),","," ",e.jsx(s,{children:"input-otp.tsx"}),", ",e.jsx(s,{children:"select.tsx"}),","," ",e.jsx(s,{children:"checkbox.tsx"}),", ",e.jsx(s,{children:"switch.tsx"}),","," ",e.jsx(s,{children:"radio-group.tsx"}),", ",e.jsx(s,{children:"slider.tsx"}),","," ",e.jsx(s,{children:"toggle.tsx"}),", ",e.jsx(s,{children:"toggle-group.tsx"}),","," ",e.jsx(s,{children:"date-picker.tsx"}),", ",e.jsx(s,{children:"calendar.tsx"})]})],[e.jsx(n,{children:"Layout"}),e.jsxs(e.Fragment,{children:[e.jsx(s,{children:"card.tsx"}),", ",e.jsx(s,{children:"field-card.tsx"}),","," ",e.jsx(s,{children:"separator.tsx"}),", ",e.jsx(s,{children:"aspect-ratio.tsx"}),","," ",e.jsx(s,{children:"resizable.tsx"}),", ",e.jsx(s,{children:"scroll-area.tsx"}),","," ",e.jsx(s,{children:"sidebar.tsx"}),", ",e.jsx(s,{children:"accordion.tsx"}),","," ",e.jsx(s,{children:"collapsible.tsx"}),", ",e.jsx(s,{children:"tabs.tsx"})]})],[e.jsx(n,{children:"Feedback"}),e.jsxs(e.Fragment,{children:[e.jsx(s,{children:"toast.tsx"}),", ",e.jsx(s,{children:"toaster.tsx"}),","," ",e.jsx(s,{children:"progress.tsx"}),", ",e.jsx(s,{children:"skeleton.tsx"}),","," ",e.jsx(s,{children:"alert.tsx"}),", ",e.jsx(s,{children:"badge.tsx"})]})],[e.jsx(n,{children:"Navigation"}),e.jsxs(e.Fragment,{children:[e.jsx(s,{children:"breadcrumb.tsx"}),", ",e.jsx(s,{children:"pagination.tsx"}),","," ",e.jsx(s,{children:"view-mode-toggle.tsx"})]})],[e.jsx(n,{children:"Forms"}),e.jsxs(e.Fragment,{children:[e.jsx(s,{children:"form.tsx"}),", ",e.jsx(s,{children:"label.tsx"})]})],[e.jsx(n,{children:"Tableaux"}),e.jsxs(e.Fragment,{children:[e.jsx(s,{children:"table.tsx"}),", ",e.jsx(s,{children:"carousel.tsx"})]})],[e.jsx(n,{children:"Boutons"}),e.jsxs(e.Fragment,{children:[e.jsx(s,{children:"button.tsx"}),", ",e.jsx(s,{children:"shimmer-button.tsx"})]})],[e.jsx(n,{children:"DÃ©coratifs"}),e.jsxs(e.Fragment,{children:[e.jsx(s,{children:"aurora-text.tsx"}),", ",e.jsx(s,{children:"shine-border.tsx"}),","," ",e.jsx(s,{children:"spotlight-card.tsx"}),", ",e.jsx(s,{children:"light-rays.tsx"}),","," ",e.jsx(s,{children:"animated-grid-pattern.tsx"})]})],[e.jsx(n,{children:"Branding"}),e.jsxs(e.Fragment,{children:[e.jsx(s,{children:"branded-logo.tsx"}),", ",e.jsx(s,{children:"favicon-icon.tsx"}),","," ",e.jsx(s,{children:"theme-toggle.tsx"})]})],[e.jsx(n,{children:"Loaders"}),e.jsxs(e.Fragment,{children:[e.jsx(s,{children:"page-loading.tsx"}),", ",e.jsx(s,{children:"section-loading.tsx"}),","," ",e.jsx(s,{children:"tab-loading.tsx"})]})],[e.jsx(n,{children:"Avatars"}),e.jsx(s,{children:"avatar.tsx"})],[e.jsx(n,{children:"Footer"}),e.jsx(s,{children:"footer.tsx"})]]}),e.jsxs(i,{children:["Les composants sont importÃ©s via l'alias"," ",e.jsx(s,{children:"@/components/ui/*"})," (configurÃ© dans"," ",e.jsx(s,{children:"tsconfig.json"}),")."]}),e.jsxs(i,{children:[e.jsxs(n,{children:[e.jsx(s,{children:"truncated-text.tsx"})," â texte tronquÃ© rÃ©vÃ©lÃ© au survol"]})," ",": ",e.jsx(s,{children:"<TruncatedText text={â¦} />"})," rend une ligne"," ",e.jsx(s,{children:"truncate"})," et n'ouvre une infobulle"," ",e.jsx(n,{children:"que si le texte dÃ©borde rÃ©ellement"}),". Un"," ",e.jsx(s,{children:"ResizeObserver"})," compare"," ",e.jsx(s,{children:"scrollWidth > clientWidth + 1"})," (la tolÃ©rance d'un pixel Ã©vite les faux positifs dus aux largeurs sous-pixel) et rÃ©Ã©value Ã  chaque changement de largeur de colonne ; l'Ã©tat est exposÃ© en ",e.jsx(s,{children:"data-truncated"}),". Le dÃ©clencheur reste toujours montÃ© â seul ",e.jsx(s,{children:"TooltipContent"})," est conditionnel â pour que l'observateur ne perde jamais son nÅud. Le rendu est un"," ",e.jsx(s,{children:'<span class="block">'})," et non un ",e.jsx(s,{children:"div"})," : les listes de liaison tronquent leur titre Ã  l'intÃ©rieur d'un"," ",e.jsx(s,{children:"button"}),", oÃ¹ un ",e.jsx(s,{children:"div"})," serait invalide. Usages : le titre des cas dans le tableau de ",e.jsx(s,{children:"/support"}),", la carte des rapports liÃ©s (",e.jsx(s,{children:"ticket-details-card.tsx"}),") et les deux fenÃªtres de liaison (",e.jsx(s,{children:"link-ticket-dialog.tsx"}),","," ",e.jsx(s,{children:"link-service-report-dialog.tsx"}),")."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Lignes cliquables et ouverture dans un nouvel onglet"})," ",": un ",e.jsx(s,{children:"onClick"})," sur un ",e.jsx(s,{children:"<tr>"})," navigue, mais il ne peut ",e.jsx(n,{children:"pas"})," ouvrir d'onglet â le clic du milieu Ã©met ",e.jsx(s,{children:"auxclick"}),", jamais ",e.jsx(s,{children:"click"}),", et le menu contextuel n'a aucun lien Ã  proposer. Le patron retenu dans les listes de cas (",e.jsx(s,{children:"support-tickets.tsx"}),","," ",e.jsx(s,{children:"portal/cases.tsx"}),") enveloppe donc le titre dans un"," ",e.jsx(s,{children:"<Link>"})," wouter â un vrai ",e.jsx(s,{children:"<a href>"}),", dont le navigateur gÃ¨re nativement le clic du milieu, le Ctrl/â + clic et Â« Ouvrir dans un nouvel onglet Â». Deux garde-fous l'accompagnent : le lien fait ",e.jsx(s,{children:"stopPropagation()"})," au clic gauche (sinon la ligne naviguerait une seconde fois vers la mÃªme route), et le ",e.jsx(s,{children:"onClick"})," de la ligne ignore les clics"," ",e.jsx(s,{children:"button !== 0"})," ou porteurs de"," ",e.jsx(s,{children:"ctrl/meta/alt/shift"})," â wouter court-circuite justement son propre gestionnaire dans ces cas-lÃ , si bien qu'un Ctrl + clic enverrait autrement le mÃªme clic vers deux destinations (nouvel onglet ",e.jsx("em",{children:"et"})," navigation de l'onglet courant). Dans"," ",e.jsx(s,{children:"/support"})," la ligne reste l'unique arrÃªt de tabulation (le lien porte ",e.jsx(s,{children:"tabIndex={-1}"}),", la ligne gardant son ",e.jsx(s,{children:"aria-label"})," et sa touche EntrÃ©e) ; dans le portail, oÃ¹ la ligne n'Ã©tait pas focusable, le lien devient au contraire le chemin clavier vers le cas. La corbeille (",e.jsx(s,{children:"showDeleted"}),") n'a pas de lien : un cas supprimÃ© n'a pas de page de dÃ©tail."]})]}),e.jsxs(t,{id:"theming",title:"3. Theming â variables CSS et persistance",children:[e.jsxs(i,{children:["Les couleurs sont exposÃ©es comme"," ",e.jsx(n,{children:"variables CSS HSL"})," (",e.jsx(s,{children:"--background"}),","," ",e.jsx(s,{children:"--foreground"}),", ",e.jsx(s,{children:"--card"}),", ",e.jsx(s,{children:"--primary"}),", etc.) dans ",e.jsx(s,{children:"client/src/index.css"})," et consommÃ©es par"," ",e.jsx(s,{children:"tailwind.config.ts"})," via"," ",e.jsx(s,{children:'colors: { background: "var(--background)" }'}),"."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Mode clair"})," (",e.jsx(s,{children:":root"}),") :"]}),e.jsx(c,{language:"css",children:`--background: hsl(0, 0%, 100%);
2--foreground: hsl(20, 14.3%, 4.1%);
3--primary:    hsl(223, 89%, 55%);
4--card:       hsl(0, 0%, 100%);`}),e.jsxs(i,{children:[e.jsx(n,{children:"Mode sombre"})," (",e.jsx(s,{children:".dark"}),") :"]}),e.jsx(c,{language:"css",children:`--background: hsl(240, 10%, 3.9%);
5--foreground: hsl(0, 0%, 98%);
6--primary:    hsl(223, 89%, 55%);
7--card:       hsl(240, 10%, 3.9%);`}),e.jsxs(i,{children:[e.jsx(n,{children:"Persistance"})," â"," ",e.jsx(s,{children:"client/src/hooks/use-theme.tsx"})," :"]}),e.jsxs(l,{children:[e.jsxs(r,{children:["ClÃ© localStorage : ",e.jsx(s,{children:"app-theme"})," (valeurs :"," ",e.jsx(s,{children:'"light"'})," | ",e.jsx(s,{children:'"dark"'}),")."]}),e.jsxs(r,{children:["L'Ã©tat initial lit ",e.jsx(s,{children:'localStorage.getItem("app-theme")'})," ","au premier rendu (Ã©vite le flash)."]}),e.jsxs(r,{children:["Ã chaque changement, la classe ",e.jsx(s,{children:"dark"})," est ajoutÃ©e/retirÃ©e de ",e.jsx(s,{children:"document.documentElement"}),"."]}),e.jsxs(r,{children:["Le ",e.jsx(s,{children:"ThemeToggle"})," (",e.jsx(s,{children:"ui/theme-toggle.tsx"}

7),") utilise l'",e.jsx(n,{children:"API View Transitions"})," (",e.jsx(s,{children:"document.startViewTransition"}),") pour produire un effet"," ",e.jsx(n,{children:"clip-path circulaire"})," qui se dÃ©ploie depuis le bouton lors du switch."]})]})]}),e.jsxs(t,{id:"cleo-design-system",title:"SystÃ¨me de design ClÃ©o (le seul design)",children:[e.jsxs(i,{children:["ClÃ©o ",e.jsx(n,{children:"est"})," le design de l'application : il n'existe pas de second design et rien Ã  basculer. Aucun flag, provider, hook ni onglet de rÃ©glages n'en dÃ©cide Ã  l'exÃ©cution â la classe"," ",e.jsx(s,{children:"theme-cleo"})," est Ã©crite en dur sur"," ",e.jsx(s,{children:"<html>"})," dans ",e.jsx(s,{children:"client/index.html"}),"."]}),e.jsxs(l,{children:[e.jsxs(r,{children:[e.jsx(n,{children:"MÃ©canisme"})," : sous cette classe, deux feuilles habillent l'application sans modifier les layouts, les routes ni les textes. ",e.jsx(s,{children:"client/src/styles/theme-cleo.css"})," est la couche de jetons (palette indigo ClÃ©o, typographie Indivisible auto-hÃ©bergÃ©e, boutons en pilule, cartes Ã  rayon 16 px) ;"," ",e.jsx(s,{children:"client/src/styles/theme-cleo-extras.css"})," est la couche de composants (les surfaces ",e.jsx(s,{children:".co-*"})," et les surcharges de classes maison)."]}),e.jsxs(r,{children:[e.jsx(n,{children:"En place avant le premier rendu."})," La classe Ã©tant dans le document HTML lui-mÃªme, le thÃ¨me s'applique"," ",e.jsx("em",{children:"avant le premier rendu"})," â rien n'attend l'hydratation, donc un chargement Ã  froid n'affiche jamais de surfaces non stylÃ©es."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Le balisage ne porte aucun embranchement de design."})," ","Un composant nomme sa surface â ",e.jsx(s,{children:"co-card"}),","," ",e.jsx(s,{children:"co-card-head"}),", ",e.jsx(s,{children:"co-card-title"}),","," ",e.jsx(s,{children:"co-card-inset"}),", ",e.jsx(s,{children:"co-tile"}),","," ",e.jsx(s,{children:"co-chip"}),", ",e.jsx(s,{children:"co-pill"}),","," ",e.jsx(s,{children:"co-field"}),", ",e.jsx(s,{children:"co-row"}),","," ",e.jsx(s,{children:"co-thead"}),", ",e.jsx(s,{children:"co-empty"}),","," ",e.jsx(s,{children:"co-nums"}),", ",e.jsx(s,{children:"co-link-chip"}),", et, pour la plaque signalÃ©tique des rapports de maintenance,"," ",e.jsx(s,{children:"co-plate"}),", ",e.jsx(s,{children:"co-plate-band"}),","," ",e.jsx(s,{children:"co-plate-flag"}),", ",e.jsx(s,{children:"co-plate-action"}),","," ",e.jsx(s,{children:"co-led"}),", ",e.jsx(s,{children:"co-spec"}),","," ",e.jsx(s,{children:"co-spec-label"}),", ",e.jsx(s,{children:"co-readout"}),","," ",e.jsx(s,{children:"co-readout-boxed"}),", ",e.jsx(s,{children:"co-readout-cell"}),","," ",e.jsx(s,{children:"co-sev-ink"}),", ",e.jsx(s,{children:"co-tag"})," â et la feuille de style l'habille. Il n'y a ni nom de classe conditionnel ni second chemin de code Ã  garder synchronisÃ© ; restyler une surface est un changement de feuille de style, pas de balisage."]}),e.jsxs(r,{children:[e.jsxs(n,{children:[e.jsx(s,{children:"co-hero"})," : la bande bleu nuit de marque."]})," ","L'en-tÃªte d'identitÃ© d'une page de dÃ©tail sur ordinateur (passeport de borne, cÃ´tÃ© personnel comme cÃ´tÃ© portail, page d'organisation, cas de support, rapport d'intervention, rapport de maintenance, garantie prolongÃ©e et bon de commande) repose sur"," ",e.jsx(s,{children:"#00004B"})," dans les deux thÃ¨mes, avec un titre en typographie d'affichage (",e.jsx(s,{children:"display-heading"}),") et un filet du dÃ©gradÃ© de marque en pied. Ce n'est"," ",e.jsx("em",{children:"pas"})," un Ã®lot ",e.jsx(s,{children:".dark"})," : plus de 60 rÃ¨gles ClÃ©o visent ",e.jsx(s,{children:"html.theme-cleo.dark"})," et ne suivraient pas une classe posÃ©e plus bas. La bande redÃ©finit plutÃ´t les jetons que son contenu lit (",e.jsx(s,{children:"--foreground"}),","," ",e.jsx(s,{children:"--muted-foreground"}),", ",e.jsx(s,{children:"--secondary"}),","," ",e.jsx(s,{children:"--muted"}),"â¦) avec les valeurs de ClÃ©o sombre, les Ã©tats de ",e.jsx(s,{children:"co-chip"})," et de ",e.jsx(s,{children:"co-pill"})," Ã  couleur littÃ©rale rejoignent leur rÃ¨gle sombre (la pastille d'Ã©tat en direct est un ",e.jsx(s,{children:"co-pill"}),"), et l'anneau de focus clavier prend la paire ",e.jsx(s,{children:"--focus-ring"})," /"," ",e.jsx(s,{children:"--focus-halo"})," de ",e.jsx(s,{children:".dark"}),". Tout ce qu'on y place doit lire des jetons (",e.jsx(s,{children:"text-foreground"}),", jamais ",e.jsx(s,{children:"text-gray-900"}),") ; ",e.jsx(s,{children:"co-hero.test.ts"})," le vÃ©rifie. La bande ne porte que l'identitÃ© : les rangÃ©es d'actions (boutons outline, listes dÃ©roulantes) restent sur la carte en dessous, car ce sont des contrÃ´les clairs sans variante de bande. Un lien d'entitÃ© placÃ© dedans reÃ§oit ",e.jsx(s,{children:"heroLinkClass"})," (",e.jsx(s,{children:"entity-links.tsx"}),") : son survol par dÃ©faut passe au"," ",e.jsx(s,{children:"brand-600"})," en clair, environ 1,4:1 sur le bleu nuit. Sur tÃ©lÃ©phone, l'en-tÃªte reste celui de"," ",e.jsx(s,{children:"DetailLayout"}),"."]}),e.jsxs(r,{children:[e.jsx(n,{children:"La couleur de marque, ce sont des jetons."})," ",e.jsx(s,{children:"brand-*"}),", ",e.jsx(s,{children:"sky-*"})," et"," ",e.jsx(s,{children:"indigo-*"})," sont des familles de couleurs Tailwind adossÃ©es aux ",e.jsx("em",{children:"triplets de canaux"})," ",e.jsx(s,{children:"--brand-N"})," / ",e.jsx(s,{children:"--sky-N"})," /"," ",e.jsx(s,{children:"--indigo-N"})," (",e.jsx(s,{children:"74 58 214"}),", pas un hex), que la config lit comme"," ",e.jsx(s,{children:"rgb(var(--brand-500) / <alpha-value>)"}),"."," ",e.jsx(s,{children:"theme-cleo.css"})," rÃ©assigne les 33 â voir Â« v2 Â» ci-dessous."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Les neutres aussi sont des jetons."})," ",e.jsx(s,{children:"slate-*"})," et ",e.jsx(s,{children:"gray-*"})," lisent"," ",e.jsx(s,{children:"--slate-N"})," / ",e.jsx(s,{children:"--gray-N"}),", avec le triplet de Tailwind comme valeur de repli du ",e.jsx(s,{children:"var()"})," : un paquet qui ne charge jamais ",e.jsx(s,{children:"index.css"})," (la page publique des rapports) affiche Tailwind tel quel. ClÃ©o sombre ne rÃ©assigne que 700 Ã  950, vers ses surfaces bleu nuit (950 = le fond de page, 900 = le palier d'encart"," ",e.jsx(s,{children:"--muted"}),", 800 / 700 = la carte + 10 % / 20 % de blanc), chacune calÃ©e sur la luminance de l'Ã©chelon qu'elle remplace : ",e.jsx(s,{children:"dark:bg-slate-900"})," est bleu nuit, avec le contraste qu'il a toujours eu. Le cadre d'aperÃ§u du Studio d'image de marque pose"," ",e.jsx(s,{children:"data-theme-preview"})," pour prendre l'Ã©chelle du thÃ¨me qu'il montre. Pour un texte neutre, Ã©crire"," ",e.jsx(s,{children:"text-slate-500 dark:text-slate-400"}),", jamais l'inverse ",e.jsx(s,{children:"text-slate-400 dark:text-slate-500"})," : c'est le choix le plus pÃ¢le dans les deux thÃ¨mes, et"," ",e.jsx(s,{children:"neutral-ramp.test.ts"})," le maintient Ã  zÃ©ro."]}

7),e.jsxs(r,{children:[e.jsxs(n,{children:["Le prÃ©fixe ",e.jsx(s,{children:"html.theme-cleo"})," reste, et ce n'est pas un oubli."]})," ","La classe Ã©tant toujours prÃ©sente, il ne sÃ©lectionne plus rien â il ",e.jsx("em",{children:"porte de la spÃ©cificitÃ©"}),". Ces feuilles sont"," ",e.jsx(s,{children:"@import"}),"Ã©es avant ",e.jsx(s,{children:"@tailwind utilities"}),", donc Ã  spÃ©cificitÃ© Ã©gale un utilitaire gagne par ordre d'apparition ; le ",e.jsx(s,{children:"(0,1,1)"})," du prÃ©fixe est ce qui tient le bloc de jetons devant le ",e.jsx(s,{children:":root"})," d'",e.jsx(s,{children:"index.css"}),". MesurÃ© : le retirer change 588 dÃ©clarations calculÃ©es sur 236 des 238 Ã©tats testÃ©s."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Un seul nom par surface."})," Les classes"," ",e.jsx(s,{children:"cleo-*"})," et ",e.jsx(s,{children:"co-*"})," dÃ©signaient les mÃªmes surfaces et devaient Ãªtre citÃ©es ensemble via"," ",e.jsx(s,{children:":is(.cleo-x, .co-x)"})," dans chaque rÃ¨gle. Une rÃ¨gle l'a oubliÃ© â le relÃ¨vement des encarts imbriquÃ©s dans"," ",e.jsx(s,{children:".settings-canvas"})," â et 130 des 147 encarts gardaient la couleur du panneau qui les contient. L'Ã©criture"," ",e.jsx(s,{children:"cleo-*"})," est retirÃ©e (550 occurrences, 117 fichiers) et un test Ã©choue si elle revient."]})]}),e.jsxs(i,{children:[e.jsx(n,{children:"v2 â couverture Ã©tendue, puis jetons."})," Une couche gÃ©nÃ©rÃ©e de 87 Ko remappait toute la palette Tailwind bleu/sky/indigo via des sÃ©lecteurs"," ",e.jsx(s,{children:"html.theme-cleo .util"}),". Elle est"," ",e.jsx(n,{children:"supprimÃ©e"})," : les trois familles sont maintenant des couleurs Tailwind adossÃ©es Ã  des jetons (",e.jsx(s,{children:"--brand-N"}),","," ",e.jsx(s,{children:"--sky-N"}),", ",e.jsx(s,{children:"--indigo-N"}),"), que ClÃ©o rÃ©assigne dans ",e.jsx(s,{children:"styles/theme-cleo.css"}),". Le thÃ¨me Ã©change 33 variables au lieu de surcharger ~2 000 sÃ©lecteurs, et le piÃ¨ge de spÃ©cificitÃ© disparaÃ®t avec la feuille. Les surcharges de classes personnalisÃ©es (",e.jsx(s,{children:"theme-cleo-extras.css"}),") et les couleurs de graphiques adaptÃ©es Ã  ClÃ©o restent. La palette des transformateurs reste un arc-en-ciel distinct sous ClÃ©o (T1 utilise un accent clair pour ne pas se confondre avec l'indigo T5)."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Les redÃ©finitions d'utilitaires Tailwind Ã©crites Ã  la main sont parties avec."})," ",e.jsx(s,{children:"index.css"})," portait une vingtaine de rÃ¨gles nommÃ©es d'aprÃ¨s les utilitaires de Tailwind eux-mÃªmes â"," ",e.jsx(s,{children:".text-green-800"}),", ",e.jsx(s,{children:".dark .text-purple-600"}),","," ",e.jsx(s,{children:".from-purple-50"})," â non scopÃ©es et placÃ©es aprÃ¨s la couche d'utilitaires, donc gagnantes par ordre d'apparition. Trois dÃ©fauts sortaient de cette seule forme, et aucun ne pouvait faire Ã©chouer un build :"]}),e.jsxs(l,{children:[e.jsxs(r,{children:[e.jsx(n,{children:"Le nom mentait."})," ",e.jsx(s,{children:".text-green-800"})," ","peignait un vert menthe (emerald-400), pas le vert forÃªt"," ",e.jsx(s,{children:"#166534"})," â donc une Ã©tiquette"," ",e.jsx(s,{children:"bg-green-100 text-green-800"})," Ã©tait Ã "," ",e.jsx(n,{children:"1,75:1"}),", oÃ¹ le plancher pour du texte est 4,5:1. Elle est Ã  6,49."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Les arrÃªts de dÃ©gradÃ© posaient un fond complet."})," ",e.jsx(s,{children:"from-purple-50 via-purple-100 to-purple-200"})," se rÃ©duisait Ã  celui des trois qui venait en dernier dans le fichier."]}),e.jsxs(r,{children:[e.jsx(n,{children:"La moitiÃ© `.dark` volait la variante du markup."})," ",e.jsx(s,{children:".dark .text-purple-800"})," est Ã  (0,2,0) et l'emportait sur le ",e.jsx(s,{children:"dark:text-purple-300"})," demandÃ© au point d'appel, Ã  (0,1,0) : violet quasi noir sur fond sombre,"," ",e.jsx(n,{children:"1,08:1"}),". Onze bordures"," ",e.jsx(s,{children:"border-gray-200/50"})," demandaient cinq gris diffÃ©rents et recevaient le mÃªme."]})]}),e.jsxs(i,{children:["Les 15 emplacements en ",e.jsx(s,{children:"-600"})," (icÃ´nes, chiffres) sans variante sombre en ont reÃ§u une dans la mÃªme passe : le"," ",e.jsx(s,{children:"-600"})," honnÃªte de Tailwind est plus foncÃ© que la menthe que ces rÃ¨gles peignaient. Les neuf paires encre/fond mesurÃ©es progressent toutes."," ",e.jsx(s,{children:"tailwind-color-tokens.test.ts"})," Ã©choue si une rÃ¨gle nommÃ©e d'aprÃ¨s un utilitaire de couleur Tailwind rÃ©apparaÃ®t."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Contours des contrÃ´les en mode sombre"})," : le critÃ¨re WCAG 1.4.11 exige 3:1 pour le bord qui montre un contrÃ´le."," ",e.jsx(s,{children:"--primary"})," vaut ",e.jsx(s,{children:"#5648E0"})," en ClÃ©o sombre, 3:1 sur la carte et moins sur chaque surface plus claire : une case Ã  cocher dessinÃ©e par ",e.jsx(s,{children:"border-primary"})," seul mesurait 2,56 Ã  3,20:1 (composÃ© dans un rendu rÃ©el sur la carte, l'encart, le fond attÃ©nuÃ©, la ligne survolÃ©e, la tuile, la fenÃªtre et le popover), tout comme le curseur du slider. ",e.jsx(s,{children:"ui/checkbox.tsx"}),","," ",e.jsx(s,{children:"ui/radio-group.tsx"})," et ",e.jsx(s,{children:"ui/slider.tsx"})," ","ajoutent ",e.jsx(s,{children:"dark:border-brand-300"})," : 5,56 Ã  6,96:1 (le point du bouton radio suit son anneau avec"," ",e.jsx(s,{children:"dark:text-brand-300"}),"). Une case cochÃ©e garde ce contour autour de son remplissage"," ",e.jsx(s,{children:"bg-primary"})," : un contour qui suit le remplissage retombe Ã  2,56:1 sur une ligne survolÃ©e. Les coches et boutons radio dessinÃ©s Ã  la main (sÃ©lecteur de bornes du rapport de service, filtre de stations des sessions, choix d'organisation de l'assistant de site) tracent maintenant le mÃªme contour ; le leur Ã©tait"," ",e.jsx(s,{children:"border-border"})," (1,24 Ã  1,34:1) ou"," ",e.jsx(s,{children:"border-muted-foreground

7/40"})," (2,08 Ã  2,21:1), et sous le seuil en mode clair aussi (1,23 Ã  1,69:1, maintenant 7,9 Ã  9,9:1). Les options de la fenÃªtre Â« DÃ©placer la borne Â» remplissent leur point de la teinte de l'option une fois choisies : leur anneau vide reste donc neutre mais fonce,"," ",e.jsx(s,{children:"border-slate-500 dark:border-slate-400"})," (4,76:1 et 7,15 Ã  7,46:1, contre 1,48 et 2,42 Ã  2,52:1)."," ",e.jsx(s,{children:"dark-text-contrast.test.ts"})," Ã©choue si un"," ",e.jsx(s,{children:"border-primary"})," au repos n'a pas de jumeau"," ",e.jsx(s,{children:"dark:border-brand-*"})," (teintes 50 Ã  300) sur la mÃªme ligne, sauf une courte liste d'accents qui ne portent seuls ni le contour ni l'Ã©tat : la barre de l'ancre active, l'Ã©tape courante de l'assistant et la carte d'organisation choisie."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Interrupteurs et anneaux de sÃ©lection"})," : mÃªme seuil de 3:1, mesurÃ© dans le mÃªme genre de rendu (CHARGEOPS-456)."," ",e.jsx(s,{children:"ui/switch.tsx"})," dessinait sa piste en position arrÃªt avec"," ",e.jsx(s,{children:"--input"}),", une encre Ã  18 % : 1,45 Ã  1,47:1 en mode clair, 1,61 Ã  1,74:1 en sombre, et le bouton rond Ã  1,43 Ã  2,18:1 dessus. La piste passe Ã  ",e.jsx(s,{children:"bg-slate-500"})," dans les deux thÃ¨mes : 3,82 Ã  4,76:1 en clair et 3,32 Ã  4,16:1 en sombre, bouton Ã  4,64 et 4,16:1. Le remplissage activÃ© ",e.jsx(s,{children:"bg-primary"})," ","mesurait 2,56 Ã  3,20:1 en sombre : l'interrupteur se sert de son"," ",e.jsx(s,{children:"border-2"})," transparent pour un contour"," ",e.jsx(s,{children:"dark:data-[state=checked]:border-brand-300"})," (5,56 Ã  6,96:1). Une sÃ©lection ou le jour courant marquÃ©s par un seul anneau avaient le mÃªme dÃ©faut : ",e.jsx(s,{children:"ring-brand-500"})," ","(",e.jsx(s,{children:"#4A3AD6"}),") mesurait 2,16 Ã  2,70:1 sur les surfaces sombres et ",e.jsx(s,{children:"ring-primary"})," 2,56 Ã  3,20:1. Ils prennent"," ",e.jsx(s,{children:"dark:ring-brand-300"})," (5,56 Ã  6,96:1, 5,13:1 au pire pour le bouton en encart du calendrier des visites, sans espace de dÃ©calage) : le calendrier des visites (visite choisie, jour courant dans les deux vues), les pastilles de teinte des files et des Ã©tiquettes de dossier, la couleur d'organisation de l'assistant de site, le choix d'autocollant QR, la constatation OCPP mise en Ã©vidence, l'Ã©vÃ©nement mis en Ã©vidence du passeport de borne (son jumeau ",e.jsx(s,{children:"dark:ring-brand-500/60"})," mesurait 1,56 Ã  1,69:1), la cible de dÃ©pÃ´t du gestionnaire de fichiers et la tuile d'indicateur de la conformitÃ©, dont le jumeau"," ",e.jsx(s,{children:"dark:ring-brand-500"})," Ã©tait lui-mÃªme le dÃ©faut. Les tuiles qui portaient dÃ©jÃ  ",e.jsx(s,{children:"dark:ring-brand-400"})," (3,32 Ã  4,15:1) le gardent. ",e.jsx(s,{children:"dark-text-contrast.test.ts"})," Ã©choue sur un ",e.jsx(s,{children:"ring-brand-500"})," (ou plus foncÃ©) ou un"," ",e.jsx(s,{children:"ring-primary"})," au repos sans jumeau"," ",e.jsx(s,{children:"dark:ring-brand-*"})," de teinte 50 Ã  400 sur la mÃªme ligne, sur tout ",e.jsx(s,{children:"dark:ring-brand-500"})," ou"," ",e.jsx(s,{children:"dark:ring-primary"})," (translucide aussi, Ã  cÃ´tÃ© de"," ",e.jsx(s,{children:"ring-2"}),"), et si l'interrupteur revient Ã "," ",e.jsx(s,{children:"--input"}),". La coche Â« Non liÃ©s seulement Â» de ClÃ©o Link, dessinÃ©e Ã  la main, Ã©tait ",e.jsx(s,{children:"border-slate-400"})," (2,06 Ã  2,56:1 en clair) et, cochÃ©e, ",e.jsx(s,{children:"bg-amber-500"})," sur son Ã©tiquette ",e.jsx(s,{children:"amber-50"})," (2,07:1) : elle passe Ã "," ",e.jsx(s,{children:"border-slate-500 dark:border-slate-400"})," (3,82 Ã  4,76:1) et Ã  ",e.jsx(s,{children:"amber-700"})," en clair (4,84:1), l'ambre 500 restant en sombre (6,92 Ã  8,55:1). Son entrÃ©e ",e.jsx(s,{children:"sr-only"})," n'avait aucun focus visible : l'Ã©tiquette trace maintenant"," ",e.jsx(s,{children:"has-[:focus-visible]:ring-2 ring-ring"})," avec un dÃ©calage, visible au clavier mais pas aprÃ¨s un clic."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Options, puces et tuiles sÃ©lectionnÃ©es"})," : le reste des indicateurs de sÃ©lection, mesurÃ©s de la mÃªme faÃ§on (CHARGEOPS-466). Un anneau brand-300 de 1 px, avec un jumeau sombre brand-700, marquait ta propre rÃ©action dans une conversation, le rapport ou le dossier choisi dans les deux dialogues de liaison, la rÃ©action choisie dans le sÃ©lecteur de rÃ©actions et le chiffre actif de la bande de statistiques d'une liste : 2,52 Ã  2,84:1 en clair et 1,40 Ã  1,57:1 en sombre, sur une teinte de fond Ã  1,01 Ã  1,13:1 de la surface, qui ne porte donc rien. Ils reposent maintenant sur"," ",e.jsx(s,{children:"ring-brand-400"})," (4,22 Ã  4,77:1) avec un jumeau"," ",e.jsx(s,{children:"dark:ring-brand-300"})," (6,20 Ã  6,96:1) ; la bordure de la pastille de rÃ©action suit son anneau. Une sÃ©lection tracÃ©e par un"," ",e.jsx(s,{children:"border-brand-500"})," au repos sur une teinte atteint 6,49 Ã  7,32:1 en clair, mais seulement 2,41 Ã  2,70:1 en sombre, et la barre gauche ",e.jsx(s,{children:"border-brand-600"})," d'une ligne choisie dans les listes des cartes clients et modems 1,79 Ã  2,01:1. Elles prennent"," ",e.jsx(s,{children:"dark:border-brand-300"}

7)," (6,20 Ã  6,96:1) : la tuile choisie du gestionnaire de fichiers, les puces d'inspection du rapport de maintenance, les options de borne de l'assistant, les cartes de langue du dialogue d'envoi et les deux lignes de liste de carte. L'option de l'assistant et la carte de langue portent aussi une coche, qui distinguait dÃ©jÃ  l'Ã©tat ; la bordure est maintenant d'accord avec elle. La forme Ã  bordure pÃ¢le du mÃªme indicateur, une bordure brand-300 avec un jumeau sombre 700 ou 800 (1,05:1 pour le jumeau 800 sur le fond ",e.jsx(s,{children:"dark:bg-slate-800"})," des listes), passe Ã  ",e.jsx(s,{children:"border-brand-400"})," avec"," ",e.jsx(s,{children:"dark:border-brand-300"})," (5,14:1 sur ce fond) : la pastille de rÃ©action sous une publication, le choix de sections du rapport de maintenance et le locataire actif des listes du Studio de marque et de la personnalisation du menu. La carte choisie de la liste des soumissions, marquÃ©e seulement par un anneau Ã  30 %, prend la paire d'anneaux ci-dessus, et l'option choisie du dialogue de dÃ©placement de borne (une bordure sombre translucide 500/50, 1,51:1) prend la paire de bordures, ou"," ",e.jsx(s,{children:"border-emerald-600 dark:border-emerald-400"})," (3,66 Ã  3,77:1 en clair, 9,65 Ã  10,29:1 en sombre) pour son option verte."," ",e.jsx(s,{children:"dark-text-contrast.test.ts"})," Ã©pingle ces sites par classe : comme motif de ligne, on ne peut pas les distinguer des bords dÃ©coratifs de badges. Les filtres actifs de la liste des bornes (champ de recherche, dÃ©clencheurs de la grille de filtres et bouton Plus de filtres) et l'Ã©tape en cours du dialogue de dÃ©placement de borne avaient la mÃªme bordure pÃ¢le, avec un jumeau sombre 700 ou 500/40 translucide : 2,52 Ã  2,84:1 en clair et 1,34 Ã  1,57:1 en sombre, plus faible en sombre que la bordure ardoise d'un dÃ©clencheur inactif (1,70 Ã  1,91:1). Ils prennent la mÃªme paire : 4,22 Ã  4,77:1 en clair, 6,20 Ã  6,96:1 en sombre, et sont Ã©pinglÃ©s dans le mÃªme test."," ","La cible de dÃ©pÃ´t de l'onglet Fichiers Ã©tait un anneau emerald-400, 1,70 Ã  1,92:1 en clair : elle passe Ã "," ",e.jsx(s,{children:"ring-emerald-600"})," (3,34 Ã  3,77:1), en gardant"," ",e.jsx(s,{children:"dark:ring-emerald-400"})," en sombre (9,17 Ã  10,29:1). La case de visite de la carte du planificateur a Ã©tÃ© mesurÃ©e et laissÃ©e telle quelle : son ",e.jsx(s,{children:"accent-brand-600"})," est Ã  8,18 Ã  9,85:1 sur la carte, dont le style ne suit pas le thÃ¨me de l'application."," ",e.jsx(s,{children:"dark-text-contrast.test.ts"})," Ã©choue maintenant aussi sur un anneau qui a un jumeau sombre mais repose sur une teinte 300 ou plus pÃ¢le, sur un jumeau d'anneau sombre de teinte 600 ou plus foncÃ©e (le halo de glisser-dÃ©poser du studio de marque est listÃ© : sa bordure brand-400 porte l'Ã©tat), et sur une bordure brand-500 ou plus foncÃ©e au repos Ã  cÃ´tÃ© d'une teinte ",e.jsx(s,{children:"bg-brand-50"})," ou"," ",e.jsx(s,{children:"bg-brand-100"})," sans jumeau de bordure sombre de teinte 50 Ã  400 (le badge Actif du rÃ©sumÃ© de licence est listÃ© : son libellÃ© nomme le statut)."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Texte de marque en mode sombre"})," : ClÃ©o garde la mÃªme rampe violette dans les deux thÃ¨mes, donc ",e.jsx(s,{children:"--brand-400"})," ","(et ",e.jsx(s,{children:"--indigo-400"}),") vaut ",e.jsx(s,{children:"110 94 230"})," sur la carte marine ",e.jsx(s,{children:"#0D0D38"})," : 3,3 Ã  4,2:1 mesurÃ©, sous le seuil AA de 4,5:1. Les liens et libellÃ©s utilisent donc"," ",e.jsx(s,{children:"dark:text-brand-300"})," (5,6 Ã  7:1 sur toutes les surfaces sombres) et leur survol passe Ã  ",e.jsx(s,{children:"brand-200"}),"."," ",e.jsx(s,{children:"dark-text-contrast.test.ts"})," Ã©choue si un"," ","texte sombre en ",e.jsx(s,{children:"brand-400"})," ou ",e.jsx(s,{children:"indigo-400"})," ","revient, et vÃ©rifie que ",e.jsx(s,{children:"brand-300"})," reste au-dessus de 4,5:1 sur chaque jeton de surface sombre. Un survol clair vers une teinte foncÃ©e (",e.jsx(s,{children:"hover:text-brand-600"}),","," ",e.jsx(s,{children:"group-hover:text-brand-500"}),") s'applique aussi en mode sombre s'il n'a pas de jumeau ",e.jsx(s,{children:"dark:"}),", et faisait tomber les liens Ã  1,6 Ã  2,7:1 au survol ; une base"," ",e.jsx(s,{children:"dark:text-*"})," ne protÃ¨ge pas d'un"," ",e.jsx(s,{children:"group-hover:"}),", qui la dÃ©passe Ã  (0,3,0). Le mÃªme test exige donc un ",e.jsx(s,{children:"dark:hover:text-*"})," (ou"," ",e.jsx(s,{children:"dark:group-hover:text-*"}),") sur la mÃªme ligne que tout"," ",e.jsx(s,{children:"hover:text-brand-500"})," Ã  ",e.jsx(s,{children:"-900"})," ou son Ã©quivalent indigo (variantes focus comprises), en brand ou indigo"," ",e.jsx(s,{children:"50"})," Ã  ",e.jsx(s,{children:"300"}),". La rÃ¨gle couvre aussi"," ",e.jsx(s,{children:"hover:text-primary"})," : ",e.jsx(s,{children:"--primary"})," vaut"," ",e.jsx(s,{children:"#5648E0"})," en ClÃ©o sombre, 3:1 sur la carte, donc chaque"," ",e.jsx(s,{children:"(group-)hover:text-primary"})," porte un jumeau"," ",e.jsx(s,{children:"dark:(group-)hover:text-brand-200"}

7)," (2,6 Ã  3,2:1 avant, 9 Ã  11:1 aprÃ¨s). Le jeton, lui, ne bouge pas : le libellÃ©"," ",e.jsx(s,{children:"#FCFCFC"})," des boutons ",e.jsx(s,{children:"bg-primary"})," exige une couleur principale d'au plus 0,177 de luminance, alors qu'un texte principal lisible sur la carte en demande au moins 0,20 ; aucune valeur ne sert les deux."]}),e.jsxs(i,{children:[e.jsxs(n,{children:[e.jsx(s,{children:"text-primary"})," au repos en mode sombre"]})," :"," ",e.jsx(s,{children:"--primary"})," vaut ",e.jsx(s,{children:"#5648E0"})," en ClÃ©o sombre, 3:1 sur la carte et moins sur une teinte ",e.jsx(s,{children:"bg-primary/10"}),", une carte de section des paramÃ¨tres ou un bouton contour (jusqu'Ã  2,4:1). Chaque"," ",e.jsx(s,{children:"text-primary"})," au repos (la variante ",e.jsx(s,{children:"link"})," de"," ",e.jsx(s,{children:"ui/button.tsx"}),", l'ancre et l'Ã©lÃ©ment de menu mobile actifs, pastilles, badges, l'alerte d'information, icÃ´nes et indicateurs de chargement) porte donc"," ",e.jsx(s,{children:"dark:text-brand-300"})," sur la mÃªme ligne. MesurÃ© par composition dans un rendu rÃ©el : de 2,4 Ã  3,1:1 pour le texte et de 2,9 Ã  3,3:1 pour les icÃ´nes avant, de 5,1 Ã  6,7:1 et de 6,3 Ã  7,1:1 aprÃ¨s. Les icÃ´nes aussi : 3:1 est le plancher non textuel, sans aucune marge ; l'anneau du bouton radio prend de mÃªme"," ",e.jsx(s,{children:"dark:border-brand-300"}),". Un bouton lien qui impose sa propre couleur doit aussi en donner la forme ",e.jsx(s,{children:"dark:"}),", sinon le jumeau de la variante l'emporte en mode sombre (le Â« Tout Effacer Â» des sessions de recharge porte ",e.jsx(s,{children:"dark:text-muted-foreground"}),")."," ",e.jsx(s,{children:"dark-text-contrast.test.ts"})," Ã©choue sur un"," ",e.jsx(s,{children:"text-primary"})," au repos sans jumeau"," ",e.jsx(s,{children:"dark:text-*"})," simple en brand ou indigo ",e.jsx(s,{children:"50"})," ","Ã  ",e.jsx(s,{children:"300"}),"."]}),e.jsxs(i,{children:[e.jsxs(n,{children:["Jamais ",e.jsx(s,{children:"hsl(var(--primary))"})]})," ",": ",e.jsx(s,{children:"--primary"})," et ",e.jsx(s,{children:"--muted-foreground"})," sont des couleurs complÃ¨tes (hex sous ClÃ©o, ",e.jsx(s,{children:"hsl(â¦)"})," dans"," ",e.jsx(s,{children:"index.css"}),"), pas des canaux. ",e.jsx(s,{children:"hsl(#5648E0)"})," ","est invalide au moment du calcul : aucune erreur, la dÃ©claration retombe simplement Ã  ",e.jsx(s,{children:"unset"}),". Les liens de l'Ã©diteur de rapport de service prenaient ainsi la couleur du texte, le bouton actif de sa barre d'outils perdait teinte et bordure, et l'Ã©tiquette ",e.jsx(s,{children:".settings-microlabel"})," n'Ã©tait pas attÃ©nuÃ©e (CHARGEOPS-444). On utilise le jeton comme couleur â"," ",e.jsx(s,{children:"var(--primary)"}),", et"," ",e.jsx(s,{children:"color-mix(in srgb, var(--primary) 12%, transparent)"})," ","pour une teinte ; seules les familles Ã  triplets de canaux se laissent envelopper (",e.jsx(s,{children:"rgb(var(--brand-300))"}),"). En mode sombre, les liens de l'Ã©diteur et la bordure du bouton actif passent Ã  ",e.jsx(s,{children:"brand-300"})," : 5,1:1 et 6,3:1 sur les surfaces ardoise de l'Ã©diteur, oÃ¹ ",e.jsx(s,{children:"#5648E0"})," n'atteignait que 2,4 et 2,9:1."," ",e.jsx(s,{children:"token-colour-wrappers.test.ts"})," Ã©choue si un"," ",e.jsx(s,{children:"hsl()"}),"/",e.jsx(s,{children:"rgb()"})," enveloppe Ã  nouveau un jeton qui contient dÃ©jÃ  une couleur."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Indicateurs opÃ©rationnels"})," : le tableau de bord de"," ",e.jsx(s,{children:"/operations-dashboard"})," (lien dans le menu profil â l'avatar en haut Ã  droite â ouvert Ã  tous les rÃ´les) fusionne l'ancien Â« Centre des opÃ©rations Â» et les Â« Statistiques Â» : tuiles KPI (bornes, puissance, sites, vÃ©hicules, % Polara, GDP, garanties, moyennes), filtre organisation/site (combo de l'accueil, arg"," ",e.jsx(s,{children:"siteFilter"})," cÃ´tÃ© serveur), l'alerte active, top sites, rÃ©partition CA/CC, garanties, dÃ©tail marque/modÃ¨le, vÃ©hicules, crÃ©dits carbone, dÃ©tail par site et exports PDF/Excel â le tout depuis ",e.jsx(s,{children:"getChargerStatistics"}),". L'ancienne route"," ",e.jsx(s,{children:"/statistics"})," redirige ici."]}),e.jsxs(i,{children:[e.jsx(n,{children:"DÃ©coupage en catÃ©gories"})," : la page est une liste de sept ",e.jsx(s,{children:"<section>"})," nommÃ©es â"," ",e.jsx(s,{children:"ops-overview"}),", ",e.jsx(s,{children:"ops-service"}),","," ",e.jsx(s,{children:"ops-chargers"}),", ",e.jsx(s,{children:"ops-warranty"}),","," ",e.jsx(s,{children:"ops-sites"}),", ",e.jsx(s,{children:"ops-vehicles"}),","," ",e.jsx(s,{children:"ops-carbon"})," â chacune coiffÃ©e d'une banniÃ¨re"," ",e.jsx(s,{children:"SectionHeading"})," (",e.jsx(s,{children:"components/operations/section-heading.tsx"}),", extraite du bandeau du bloc service pour que tous les groupes partagent la mÃªme grammaire : puce ",e.jsx(s,{children:"co-chip"}),", titre, sous-titre, action optionnelle Ã  droite). ",e.jsx(s,{children:"DashboardSection"})," emballe banniÃ¨re + panneaux ; le bloc service garde son propre rendu parce que le sÃ©lecteur de pÃ©riode glissante voyage dans sa banniÃ¨re. L'",e.jsx(s,{children:"id"})," de la banniÃ¨re est l'ancre de navigation, et son"," ",e.jsx(s,{children:"h2"})," porte ",e.jsx(s,{children:"{id}-title"})," pour l'",e.jsx(s,{children:"aria-labelledby"})," de la section."]}),e.jsxs(d,{tone:"info",title:"Hauteur du chrome collant (--chrome-h)",children:[e.jsxs(i,{children:["La pile collante â en-tÃªte marine ",e.jsx(s,{children:"h-14"})," + rangÃ©e"," ",e.jsx(s,{children:"HeaderLinks"})," â fait ",e.jsx(s,{children:"114 px"}),", publiÃ©s dans"," ",e.jsx(s,{children:"--chrome-h"})," (",e.jsx(s,{children:"--chrome-h-mobile"}

7)," vaut"," ",e.jsx(s,{children:"calc(56px + var(--safe-top))"})," pour la barre du haut de la coquille tÃ©lÃ©phone, la zone sÃ©curisÃ©e en haut d'un iPhone Ã©tant nulle ailleurs). Toute sous-navigation collante se positionne avec"," ",e.jsx(s,{children:"top: var(--chrome-h)"})," plutÃ´t qu'un"," ",e.jsx(s,{children:"top-[114px]"})," codÃ© en dur : sinon un changement de hauteur de l'en-tÃªte dÃ©colle silencieusement tout ce qui est en dessous."]}),e.jsxs(i,{children:["Revue design Â§B/12 : ",e.jsx(s,{children:"useCompactChrome"})," pose"," ",e.jsx(s,{children:'data-chrome="compact"'})," sur ",e.jsx(s,{children:"<html>"})," ","au dÃ©filement, ce qui fait passer ",e.jsx(s,{children:"--chrome-h"})," Ã "," ",e.jsx(s,{children:"102 px"})," â 12 px rendus au contenu. Seule la"," ",e.jsx(n,{children:"rangÃ©e de pastilles"})," se resserre (padding"," ",e.jsx(s,{children:"10 px â 4 px"}),") : l'en-tÃªte marine garde sa hauteur Ã  toutes les positions de dÃ©filement, parce qu'il porte le logo, l'identitÃ© de la page et le bloc utilitaire â les redimensionner sous le curseur coÃ»te plus en stabilitÃ© que les 20 px gagnÃ©s. Aucune barre ne disparaÃ®t : masquer l'en-tÃªte coÃ»terait l'accÃ¨s aux notifications, Ã  la messagerie et au menu de profil sans remonter en haut de page."]}),e.jsxs(i,{children:["L'attribut est Ã©crit ",e.jsx(n,{children:"directement dans le DOM"})," ","depuis un Ã©couteur ",e.jsx(s,{children:"scroll"})," passif â le faire passer par un state re-rendrait ",e.jsx(s,{children:"AppLayout"}),", donc toute la page, Ã  la frame oÃ¹ le seuil est franchi. Les seuils de resserrement (96 px) et de rÃ©ouverture (32 px) sont volontairement distincts : un seuil unique produit un battement, et chaque bascule dÃ©cale toute la page. Le soulignement de la pastille active se positionne sur ",e.jsx(s,{children:"--nav-pad"}),", la variable qui porte ce padding, sinon il flotte sous le bandeau dans l'un des deux Ã©tats."]})]}),e.jsxs(d,{tone:"info",title:"Surfaces encastrÃ©es : .co-card-inset et .co-tile",children:[e.jsxs(i,{children:["Ces deux surfaces s'Ã©crivaient en chaÃ®nes d'utilitaires bruts Ã  179 endroits, et

7ces utilitaires avaient dÃ©rivÃ© vers"," ",e.jsx(n,{children:"69 et 21 habillages distincts"})," â tous des tentatives de Â« panneau lÃ©gÃ¨rement encastrÃ© Â», en gris, ardoise, blanc ou teinte de marque. Le nom de classe est stable maintenant, et c'est la feuille de style qui l'habille."]}),e.jsx(i,{children:"La distinction entre les deux reste celle que ClÃ©o faisait dÃ©jÃ  : l'encart est statique, la tuile se soulÃ¨ve au survol."}),e.jsxs(i,{children:[e.jsx(n,{children:"Trois niveaux de profondeur."})," Dans un"," ",e.jsx(s,{children:".settings-canvas"})," (Configuration, console plateforme, studio de marque) une carte est dÃ©jÃ  rÃ©trogradÃ©e en panneau, donc un encart placÃ© Ã  l'intÃ©rieur remonte Ã  la surface carte pour rester lisible. Cette rÃ¨gle ne visait qu'une des deux Ã©critures du nom de classe et manquait 130 des 147 encarts concernÃ©s ; depuis qu'il n'y a qu'un nom, elle les couvre tous."]})]}),e.jsxs(d,{tone:"info",title:"RangÃ©es d'actions : voir vs Ã©crire",children:[e.jsxs(i,{children:["Revue design Â§C/19. La barre de contrÃ´les de"," ",e.jsx(s,{children:"all-chargers"})," est coupÃ©e par un sÃ©parateur vertical unique, et la rÃ¨gle qui dÃ©cide du cÃ´tÃ© est simple : avant lui, tout ce qui change ",e.jsx(n,{children:"ce que l'on voit"})," (vues enregistrÃ©es, densitÃ©, colonnes, exports) ; aprÃ¨s lui, tout ce qui change ",e.jsx(n,{children:"les donnÃ©es"})," (dÃ©placer, ajouter). L'export est une lecture â il a l'air d'une commande, ce qui explique qu'il se retrouvait du mauvais cÃ´tÃ©. ",e.jsx(s,{children:"Reset Columns"})," vit maintenant ",e.jsx(n,{children:"dans"})," le menu des colonnes : sa portÃ©e est la liste de cases, pas la page."]}),e.jsxs(i,{children:["Revue design Â§D/23. L'en-tÃªte d'accueil n'a plus qu'un seul bouton plein (la Carte des clients) ; le dÃ©clencheur des liens utiles est passÃ© en ",e.jsx(s,{children:"outline"}),", et DocsForge est devenu une entrÃ©e de ce menu via la prop ",e.jsx(s,{children:"extraLinks"}),". Les deux boutons d'en-tÃªte configurables restent en place : un administrateur qui active un rÃ©glage nommÃ© Â« bouton d'en-tÃªte Â» s'attend Ã  le voir lÃ , et le Studio d'image de marque le prÃ©visualise Ã  cet endroit."]}),e.jsxs(i,{children:["Le geste de survol est un composant unique â"," ",e.jsx(s,{children:"components/ui/hover-lift.tsx"}),". Le mÃªme ressort"," ",e.jsx(s,{children:"{ scale: 1.05, y: -1 }"})," Ã©tait recopiÃ© Ã  cinq endroits ; un test Ã©choue si une sixiÃ¨me copie apparaÃ®t."]}),e.jsxs(i,{children:["Un geste n'ajoute jamais d'arrÃªt de Tab (CHARGEOPS-505). framer-motion pose ",e.jsx(s,{children:'tabindex="0"'})," sur tout Ã©lÃ©ment non natif qui a ",e.jsx(s,{children:"whileTap"})," sans tabindex, donc un enveloppant muni d'un ressort au toucher devient un arrÃªt sans anneau ni rÃ´le, sur lequel EntrÃ©e et Espace ne font rien. D'oÃ¹ trois rÃ¨gles. Un enveloppant autour d'un contrÃ´le porte"," ",e.jsxs(s,{children:["tabIndex=","{-1}"]})," â HoverLift le pose lui-mÃªme et n'accepte pas de prop ",e.jsx(s,{children:"tabIndex"}),". Une surface cliquable est un"," ",e.jsx(s,{children:'<motion.button type="button">'})," (les cartes de mÃ©thode d'Ajout de vÃ©hicules), jamais un ",e.jsx(s,{children:"motion.div"})," ","avec un ",e.jsx(s,{children:"onClick"})," ; une navigation est un"," ",e.jsx(s,{children:"<Button asChild>"})," autour du"," ",e.jsx(s,{children:"<Link>"})," (la Carte des clients de l'accueil), jamais un bouton dans un lien. Et ",e.jsx(s,{children:"whileTap"})," ne va jamais sur l'Ã©lÃ©ment qu'un ",e.jsx(s,{children:"â¦Trigger asChild"})," Radix clone : sur EntrÃ©e, l'appui clavier de framer dÃ©clenche un"," ",e.jsx(s,{children:"pointerdown"})," synthÃ©tique sur l'Ã©lÃ©ment focalisÃ©, le dÃ©clencheur le lit comme une bascule, puis son propre gestionnaire d'EntrÃ©e bascule encore et le menu s'ouvre et se referme d'une seule touche. Le dÃ©clencheur des liens utiles est donc le Button lui-mÃªme, avec le ressort sur un enveloppant en"," ",e.jsxs(s,{children:["tabIndex=","{-1}"]})," (",e.jsx(s,{children:"focus"})," ne remonte pas, donc l'enveloppant n'arme jamais ce mÃ©canisme). Une tuile qui n'est pas un contrÃ´le n'a pas de ",e.jsx(s,{children:"whileTap"})," du tout (les tuiles de contact du site)."," ",e.jsx(s,{children:"whiletap-single-tab-stop.test.tsx"})," balaie"," ",e.jsx(s,{children:"client/src"})," pour ces trois formes."]})]}),e.jsxs(d,{tone:"info",title:"Couleur et chargement : les deux balayages",children:[e.jsxs(i,{children:["Revue design Â§A/4. Les pages ne portent plus ",e.jsx(n,{children:"aucun"})," ","littÃ©ral hexadÃ©cimal â 115 occurrences, 58 valeurs distinctes, dont des quasi-doublons (",e.jsx(s,{children:"#3021C3"})," contre"," ",e.jsx(s,{children:"#3120c3"}),"). Trois destinations selon le consommateur : un jeton CSS quand c'est du CSS (",e.jsx(s,{children:"--brand-page-bg"}),","," ",e.jsx(s,{children:"--surface-dialog"}),", ",e.jsx(s,{children:"--tab-active-ink"}),","," ",e.jsx(s,{children:"--cleo-tier-*"}),", ",e.jsx(s,{children:"--session-*"}),") ;

7 un module JS quand le consommateur peint sur son propre canevas et ne peut pas lire une variable CSS (",e.jsx(s,{children:"useChartTheme"})," pour Chart.js et les Ã©pingles Maps, ",e.jsx(s,{children:"lib/auth-decor.ts"})," pour les trois pages d'authentification) ; la suppression quand la valeur ne servait Ã  rien â les 227 lignes de styles Google Maps de"," ",e.jsx(s,{children:"customer-map"})," Ã©taient dÃ©finies et jamais utilisÃ©es."]}),e.jsxs(i,{children:["Un test Ã©choue si un hexadÃ©cimal rÃ©apparaÃ®t dans une page. Les"," ",e.jsx(n,{children:"sections de documentation"})," en sont exclues : la couleur y est le sujet, pas le style."]}),e.jsxs(i,{children:["Revue design Â§E/26. Onze indicateurs de chargement qui"," ",e.jsx(n,{children:"remplaÃ§aient du contenu"})," sont devenus des squelettes (",e.jsx(s,{children:"SkeletonList"}),", nouveau, plus"," ",e.jsx(s,{children:"SkeletonTable"})," et ",e.jsx(s,{children:"SkeletonBlock"}),"). Les 91 restants annotent une ",e.jsx(n,{children:"action en cours"})," â bouton qui enregistre, ligne qui bascule, page suivante qui se charge â et c'est exactement l'usage que la revue conserve. Un tournoiement dit Â« attendez Â» sans dire de quoi ni combien ; sur un panneau vide c'est une rÃ©gression, sur un bouton c'est la bonne rÃ©ponse."]})]}),e.jsxs(d,{tone:"info",title:"Plan des titres : l'en-tÃªte possÃ¨de le h1",children:[e.jsxs(i,{children:[e.jsx(s,{children:"AppLayout"})," et ",e.jsx(s,{children:"PortalLayout"})," posent le"," ",e.jsx(s,{children:"<h1>"})," de la page. Une page montÃ©e dans l'un des deux ne doit donc ",e.jsx(n,{children:"pas"})," ajouter son propre"," ",e.jsx(s,{children:"h1"})," : les titres de section sont des"," ",e.jsx(s,{children:"h2"}),", les titres de carte des ",e.jsx(s,{children:"h3"}),". Dans un dialogue, ",e.jsx(s,{children:"DialogTitle"})," de Radix est dÃ©jÃ  un"," ",e.jsx(s,{children:"h2"}),", donc le contenu commence Ã  ",e.jsx(s,{children:"h3"}),"."]}),e.jsxs(i,{children:["Rien de tout cela ne se voit : le Preflight de Tailwind remet chaque titre Ã  ",e.jsx(s,{children:"font-size: inherit"})," et"," ",e.jsx(s,{children:"font-weight: inherit"}),". Le niveau ne porte que le sens, les classes portent l'apparence â c'est prÃ©cisÃ©ment pour Ã§a que le plan dÃ©rivait, puisqu'un mauvais niveau ne change rien Ã  l'Ã©cran."," ",e.jsx(s,{children:"client/src/__tests__/heading-hierarchy.test.ts"})," est le seul garde-fou."]}),e.jsxs(i,{children:["Il vÃ©rifie aussi les composants, pas seulement les fichiers de page : il suit chaque import jusqu'Ã  l'endroit oÃ¹ le composant est montÃ© et juge ses titres lÃ . Aucun composant n'ajoute de"," ",e.jsx(s,{children:"h1"})," (sauf les layouts et les quelques cas listÃ©s dans"," ",e.jsx(s,{children:"OWNS_H1"}),") ; un composant commence sous la section qui le contient â un corps de dialogue, ou les enfants d'un composant titrÃ© comme ",e.jsx(s,{children:"SettingsSectionShell"}),", dont le titre est dÃ©jÃ  le ",e.jsx(s,{children:"h2"})," ; et un composant en ",e.jsx(s,{children:"hN"})," doit avoir un ",e.jsx(s,{children:"h(N-1)"})," au-dessus de lui. Si le niveau d'un composant dÃ©pend de l'endroit oÃ¹ tu le montes, donne-lui une prop"," ",e.jsx(s,{children:"headingLevel"})," et dÃ©clare-le dans"," ",e.jsx(s,{children:"POLYMORPHIC"})," : chaque appel est alors vÃ©rifiÃ© au niveau qu'il passe."]}),e.jsxs(i,{children:["Les onglets sont jugÃ©s un par un : un seul panneau est affichÃ© Ã  la fois, donc le ",e.jsx(s,{children:"h3"})," d'un onglet voisin ne compte pas comme titre parent du tien. Un ",e.jsx(s,{children:"TabsContent"})," Radix et une branche ",e.jsx(s,{children:'{activeTab === "x" && â¦}'})," comptent comme panneaux (un ternaire ",e.jsx(s,{children:'tab === "x" ? â¦ : â¦'}),", pas encore) ; un titre Ã©crit dans un panneau doit, ce panneau affichÃ©, avoir un ",e.jsx(s,{children:"h(N-1)"})," au-dessus de lui."]}),e.jsxs(i,{children:["La documentation est vÃ©rifiÃ©e elle aussi : chaque chapitre est montÃ© dans ",e.jsx(s,{children:"AppLayout"}),", dont le ",e.jsx(s,{children:"h1"})," est Â« Documentation Â». Le titre du chapitre (",e.jsx(s,{children:"DocPage"}),") est donc un ",e.jsx(s,{children:"h2"}),", ",e.jsx(s,{children:"DocSection"})," un"," ",e.jsx(s,{children:"h3"})," et ",e.jsx(s,{children:"DocSubSection"})," un ",e.jsx(s,{children:"h4"}),". Pour une sous-section dans une sous-section (un Â« 2.1 Â» sous un Â« 2. Â»), prends ",e.jsx(s,{children:"DocSubSubSection"})," (",e.jsx(s,{children:"h5"}),", mÃªme apparence). Le HTML citÃ© dans un exemple de code n'est pas un titre : le test ignore le contenu des gabarits entre accents graves."]})]}),e.jsxs(d,{tone:"info",title:"CardTitle rend un titre, pas un div",children:[e.jsxs(i,{children:[e.jsx(s,{children:"CardTitle"}

7)," rendait un ",e.jsx(s,{children:"<div>"}),", donc chaque carte de l'application Ã©tait absente du plan du document. Il rend maintenant un ",e.jsx(s,{children:"h3"})," par dÃ©faut â un cran sous une section de page â avec une prop ",e.jsx(s,{children:"as"})," pour les cas oÃ¹ l'imbrication diffÃ¨re : ",e.jsx(s,{children:'as="h2"'})," quand la carte"," ",e.jsx("em",{children:"est"})," la section de tÃªte de la page,"," ",e.jsx(s,{children:'as="h4"'})," pour une carte dans une carte,"," ",e.jsx(s,{children:'as="div"'})," pour un titre purement dÃ©coratif."]}),e.jsxs(i,{children:["MÃªme rÃ¨gle pour les classes ",e.jsx(s,{children:"co-card-title"})," et"," ",e.jsx(s,{children:"co-card-title"})," : ce qui les porte est le titre d'une carte, donc ce doit Ãªtre un Ã©lÃ©ment de titre. Le test"," ",e.jsx(s,{children:"heading-hierarchy.test.ts"})," Ã©choue si l'une des deux se retrouve sur un ",e.jsx(s,{children:"span"})," ou un ",e.jsx(s,{children:"div"}),"."]})]}),e.jsxs(d,{tone:"info",title:"Configuration : une section, un fichier",children:[e.jsxs(i,{children:[e.jsx(s,{children:"configuration.tsx"})," tenait 7 098 lignes, dont un seul"," ",e.jsx(s,{children:"<SettingsSectionShell>"})," de 5 000 lignes. La page fait maintenant ",e.jsx(n,{children:"993 lignes"})," : elle possÃ¨de la coquille, le routage d'onglet et la sous-navigation, et rien d'autre. Chaque onglet vit dans"," ",e.jsx(s,{children:"components/configuration/sections/"})," et possÃ¨de son propre Ã©tat, ses requÃªtes et ses mutations."]}),e.jsxs(i,{children:["Le dÃ©coupage a Ã©tÃ© possible parce que les onglets ne partageaient presque rien : sur 269 dÃ©clarations de la page, seules 45 Ã©taient utilisÃ©es par plus d'un onglet ou par la coquille. Les sections redÃ©rivent ce dont elles ont besoin (",e.jsx(s,{children:"useQuery"})," dÃ©doublonne les abonnements identiques, donc aucun aller-retour supplÃ©mentaire) plutÃ´t que de le recevoir en props."]}),e.jsxs(i,{children:["Les neuf sections sont en ",e.jsx(s,{children:"React.lazy"}),", sous la mÃªme frontiÃ¨re ",e.jsx(s,{children:"Suspense"})," que les douze panneaux dÃ©jÃ  dÃ©coupÃ©s â un seul onglet peut Ãªtre montÃ© Ã  la fois."]})]}),e.jsxs(d,{tone:"warning",title:"Jetons de couleur : l'opacitÃ© doit passer par calc(alpha * â¦)",children:[e.jsxs(i,{children:[e.jsx(s,{children:'border: "var(--border)"'})," est l'Ã©criture naturelle et elle est ",e.jsx(n,{children:"silencieusement fausse"}),". Tailwind doit injecter une valeur alpha pour construire"," ",e.jsx(s,{children:"border-border/60"})," ; il ne peut pas l'injecter dans une chaÃ®ne opaque, donc il n'Ã©met ",e.jsx(n,{children:"aucune rÃ¨gle"})," â l'Ã©lÃ©ment retombe sur la bordure gris clair de Preflight, ou sur aucun fond. Pas d'erreur de build, pas d'avertissement : le problÃ¨me avait atteint 338 appels."]}),e.jsxs(i,{children:["Les jetons passent maintenant par"," ",e.jsx(s,{children:"rgb(from var(--x) r g b / calc(alpha * <alpha-value>))"}),". La syntaxe de couleur relative lit les canaux sur la variable, donc les jetons restent en hexadÃ©cimal, ",e.jsx(s,{children:"hsl()"})," ou"," ",e.jsx(s,{children:"rgba()"})," dans les quatre feuilles qui les dÃ©finissent."]}),e.jsxs(i,{children:["Le ",e.jsx(s,{children:"calc(alpha * â¦)"})," est ",e.jsx(n,{children:"indispensable"}),", pas cosmÃ©tique : ClÃ©o dÃ©finit"," ",e.jsx(s,{children:"--border: rgba(20, 20, 30, 0.10)"})," (et"," ",e.jsx(s,{children:"rgba(255, 255, 255, 0.10)"})," en sombre). Remplacer la valeur alpha rendrait un simple ",e.jsx(s,{children:"border-border"})," ",e.jsx(n,{children:"totalement opaque"})," sous ce thÃ¨me â un filet blanc plein sur chaque surface ClÃ©o sombre. La multiplication compose les deux, ce qui est aussi le sens de l'appel : 60 % d'une couleur Ã  10 %, c'est 6 %."]})]}),e.jsxs(i,{children:[e.jsx(n,{children:"Barre d'accÃ¨s rapide"})," :"," ",e.jsx(s,{children:"components/operations/section-nav.tsx"})," â une pastille par catÃ©gorie, ",e.jsx(s,{children:"sticky"})," sous le chrome de l'application (56 px en mobile, 112 px en desktop : en-tÃªte ",e.jsx(s,{children:"h-14"})," + rangÃ©e ",e.jsx(s,{children:"HeaderLinks"}),", valeurs qui reflÃ¨tent"," ",e.jsx(s,{children:"AppLayout"})," et ",e.jsx(s,{children:"useIsMobile()"}),"). Le dÃ©filement cible est ",e.jsx(n,{children:"mesurÃ©"})," et non codÃ© en dur : au clic, le composant lit la hauteur rÃ©elle de sa propre barre puis borne le rÃ©sultat Ã  sa position collÃ©e, ce qui Ã©vite un sous-dÃ©filement quand on part du haut de la page. Le suivi de section (Â« scroll-spy Â») est un Ã©couteur ",e.jsx(s,{children:"scroll"})," passif Ã©tranglÃ© par"," ",e.jsx(s,{children:"requestAnimationFrame"}),", avec un cas particulier en bas de page pour la derniÃ¨re section, trop courte pour franchir le seuil. La barre vit ",e.jsx(n,{children:"hors de"})," ",e.jsx(s,{children:"exportRef"})," ",": c'est du chrome de page, jamais de la donnÃ©e exportÃ©e."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Habillage"})," : la barre porte"," ",e.jsx(s,{children:".section-nav-bar"})," (",e.jsx(s,{children:"index.css"}),"), troisiÃ¨me membre de la famille ",e.jsx(s,{children:"#3120c3"})," avec"," ",e.jsx(s,{children:".tab-glass-container"})," (onglets d'une page de site) et"," ",e.jsx(s,{children:".bulk-action-bar"})," â mÃªme corps indigo plein, pastille blanche Ã  texte ",e.jsx(s,{children:"#3120c3"})," sur l'Ã©lÃ©ment actif, blanc-alpha pour le reste. Hauteur automatique (pas les 64 px fixes du bandeau d'onglets) : sept Ã©lÃ©ments qui dÃ©filent horizontalement plutÃ´t que de passer Ã  la ligne. Le thÃ¨me ClÃ©o Ã©change le bleu contre ",e.jsx(s,{children:"#3021C3"})," dans"," ",e.jsx(s,{children:"theme-cleo.css"}),", comme pour les deux autres."]}),e.jsxs(i,{children:["La pastille active est un unique ",e.jsx(s,{children:"motion.span"})," partagÃ© (",e.jsx(s,{children:"layoutId"}),") : framer-motion mesure le changement de position ",e.jsx(n,{children:"et de largeur"}),", donc la pastille glisse et se dÃ©forme entre Â« Sites Â» et Â« Garanties et installations Â» au lieu de sauter. Contrairement aux autres barres collantes, passÃ©es Ã  ",e.jsx(s,{children:"nav-pill.tsx"}),", celle-ci peut garder son"," ",e.jsx(s,{children:"layoutId"})," : un clic place la pastille avant que son propre dÃ©filement commence et le repÃ©rage la recible aprÃ¨s le dÃ©filement, donc aucun dÃ©filement ne tombe entre la capture et la mise en page (mesurÃ© sur des dÃ©filements au clic et Ã  la molette). La rangÃ©e est en ",e.jsx(s,{children:"justify-between"}),", qui rÃ©partit les pastilles sur un large bandeau et retombe sur"," ",e.jsx(s,{children:"flex-start"})," dÃ¨s qu'elle dÃ©borde â contrairement Ã "," ",e.jsx(s,{children:"center"}),"/",e.jsx(s,{children:"end"}),", qui rendraient la premiÃ¨re pastille inatteignable dans le conteneur dÃ©filant."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Synchronisation pastille / dÃ©filement"})," : un clic anime la page sur notre propre boucle ",e.jsx(s,{children:"rAF"})," plutÃ´t que par ",e.jsx(s,{children:'behavior: "smooth"'}),", parce que le navigateur choisit sa durÃ©e en fonction de la distance alors qu'un ressort se stabilise en un temps Ã  peu prÃ¨s constant â mesurÃ©, la pastille arrivait Ã  408 ms pour un dÃ©filement de 675 ms. En possÃ©dant la timeline, la page et la pastille partagent une durÃ©e et une courbe (",e.jsx(s,{children:"easeOutCubic"}),") et atterrissent ensemble par construction : 625 ms contre 641 ms sur un long saut. Le scroll-spy se met en retrait tant que le clic est en vol (",e.jsx(s,{children:"pendingRef"}),") â sinon il recalcule dÃ¨s le premier Ã©vÃ©nement, sur une page qui n'a pas encore bougÃ©, ramÃ¨ne la pastille Ã  son point de dÃ©part puis la traÃ®ne Ã  travers chaque section survolÃ©e. Une molette, un toucher ou une touche rendent la main immÃ©diatement, et ",e.jsx(s,{children:"prefers-reduced-motion"})," saute directement."]}),e.jsxs(d,{tone:"danger",title:"scroll-behavior global",children:[e.jsx(s,{children:"index.css"})," pose un"," ",e.jsxs(s,{children:["html ","{ scroll-behavior: smooth }"]})," global. Chaque"," ",e.jsx(s,{children:"window.scrollTo"})," par image de la boucle repartait donc en dÃ©filement animÃ© vers une cible dÃ©jÃ  dÃ©passÃ©e, et la page traÃ®nait d'une durÃ©e entiÃ¨re derriÃ¨re la timeline. Les appels de la boucle passent ",e.jsx(s,{children:'behavior: "instant"'})," â le retirer rÃ©introduit le dÃ©calage."]}),e.jsxs(i,{children:["Le contenu d'une pastille est ",e.jsx(s,{children:"#3120c3"})," quand elle est active et blanc sinon : chacun n'est lisible que sur le fond que la pastille y met. Comme la pastille est une couche sÃ©parÃ©e qui balaie l'Ã©cran, la bascule de couleur doit Ãªtre calÃ©e sur elle â trop tÃ´t, le libellÃ© est indigo sur le bandeau indigo ; trop tard, l'icÃ´ne est blanche sur la pastille blanche dÃ©jÃ  arrivÃ©e. Un fondu sur toute la durÃ©e ne marche pas non plus : le recouvrement n'est pas linÃ©aire dans le temps (0 % jusqu'Ã  ~45 % du trajet, 100 % Ã  ~72 %). Le contenu garde donc son ancienne couleur puis bascule vite Ã  l'intÃ©rieur de cette fenÃªtre de balayage."]}),e.jsxs(d,{tone:"warning",title:"Surface indigo permanente",children:[e.jsx(s,{children:".section-nav-bar"})," est indigo dans ",e.jsx(n,{children:"tous"})," ","les thÃ¨mes, clair comme sombre : c'est une surface Â« navy Â» au sens du Â§palette. N'y utilisez que du blanc-alpha et le littÃ©ral"," ",e.jsx(s,{children:"#3120c3"})," â jamais un utilitaire blue/indigo/sky, dont le remap ClÃ©o (0-2-1) bat ",e.jsx(s,{children:".dark .dark:util"})," mais perd contre ",e.jsx(s,{children:".dark .dark:hover:util"}),", ce qui scinderait les Ã©tats repos et survol d'une pastille entre deux mondes de thÃ¨me."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Bloc Â« Service et support Â»"})," : sous l'alerte active et ",e.jsx(n,{children:"avant"})," les panneaux de parc (ce sont les chiffres actionnables ; l'inventaire du parc est de la donnÃ©e de rÃ©fÃ©rence), un bloc unique regroupe les indicateurs du dÃ©partement de service â"," ",e.jsx(s,{children:"client/src/components/operations/service-kpi-section.tsx"}),", alimentÃ© par les trois requÃªtes de"," ",e.jsx(s,{children:"convex/statistics/serviceKpis.ts"})," (doc 08 Â§36 bis). Une banniÃ¨re porte le titre du groupe et le sÃ©lecteur de"," ",e.jsx(n,{children:"pÃ©riode glissante"})," (30/90/180/365 jours), appliquÃ© aux trois sous-bandes d'un coup ; le filtre organisation/site de la page les cadre Ã©galement. Chaque sous-bande affiche son propre squelette tant que sa requÃªte n'a pas rÃ©solu, sans bloquer les deux autres â et ces placeholders n'utilisent ",e.jsx(n,{children:"pas"})," ",e.jsx(s,{children:"animate-pulse"}),", rÃ©servÃ© au squelette de chargement du parc. Composants ajoutÃ©s : ",e.jsx(s,{children:"ranked-metric-list.tsx"})," ","(gÃ©nÃ©ralisation de ",e.jsx(s,{children:"TopSitesPanel"})," : mÃªme grammaire de ligne + mini-barre, DOM pur donc sans canvas),"," ",e.jsx(s,{children:"metric-pill-strip.tsx"})," (gÃ©nÃ©ralisation des pastilles de"," ",e.jsx(s,{children:"WarrantyHealthStrip"}),", avec support d'une couleur hex pour la palette de gravitÃ© ",e.jsx(s,{children:"SEVERITY_COLORS"}),") et"," ",e.jsx(s,{children:"metric-table.tsx"})," (tableau compact,"," ",e.jsx(s,{children:"data-pdf-atom"})," par ligne)."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Un site nommÃ© porte son organisation"})," : le champ"," ",e.jsx(s,{children:"sub"})," de ",e.jsx(s,{children:"RankedMetricList"})," â rendu"," ",e.jsx(n,{children:"au-dessus"})," de la mini-barre, donc lu comme une deuxiÃ¨me ligne d'identitÃ© et non comme une lÃ©gende de la mÃ©trique â reÃ§oit ",e.jsx(s,{children:"organizationName"}),". MÃªme ligne dans"," ",e.jsx(s,{children:"TopSitesPanel"}),", sous le nom du site dans"," ",e.jsx(s,{children:"PerSiteTable"}),", dans la tuile"," ",e.jsx(s,{children:"serviceTopSites"})," de la rangÃ©e KPI de l'accueil, et dans le document PDF (",e.jsx(s,{children:"RankedList"})," et la premiÃ¨re colonne de"," ",e.jsx(s,{children:"DocTable"}),", tous deux dotÃ©s du mÃªme champ"," ",e.jsx(s,{children:"sub"}),"). Une valeur absente ne rend aucune ligne : un site sans organisation garde la hauteur de rangÃ©e d'origine."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Rapport PDF des indicateurs"})," : l'export de la page n'est plus une capture d'Ã©cran dÃ©coupÃ©e (",e.jsx(s,{children:"dom-to-pdf.ts"}),", supprimÃ©) mais un vrai document imprimÃ© produit par le"," ",e.jsx(n,{children:"moteur partagÃ©"})," des rapports d'entretien et de service (",e.jsx(s,{children:"branded-report-pdf.ts"}),", rÃ©glages par dÃ©faut : letter portrait, Ã©chelle 3) : un document hors Ã©cran dÃ©diÃ© (",e.jsx(s,{children:"operations/pdf/operations-report-document.tsx"}),", feuille fixe de 600 px, styles en ligne uniquement) recompose les donnÃ©es des mÃªmes requÃªtes en mise en page d'impression â page couverture (logo du locataire, couleurs de rapport, pÃ©rimÃ¨tre, chiffres clÃ©s, table des sections incluses), cellules KPI compactes, graphiques Chart.js pleine largeur (",e.jsx(s,{children:"animation:false"})," â html2canvas copie le bitmap du ",e.jsx(s,{children:"<canvas>"})," tel quel), tableaux denses, dos de couverture et pieds de page numÃ©rotÃ©s."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Pagination par blocs â aucun graphique coupÃ©"})," : chaque bande de catÃ©gorie, grille de KPI, panneau et tableau du document est un ",e.jsx(s,{children:"data-pdf-block"})," ; un bloc qui tient dans une page y est posÃ© entier, ou renvoyÃ© ENTIER Ã  la page suivante quand il n'y tient pas â jamais scindÃ©. Seuls les blocs rÃ©ellement plus hauts qu'une page (longs tableaux) sont tranchÃ©s, aux limites"," ",e.jsx(s,{children:"data-pdf-atom"})," (chaque ligne en porte un) : un atome qui ne tient pas dans l'espace restant est lui aussi dÃ©placÃ© ENTIER vers la tranche suivante, jamais coupÃ© en deux. Les bandes de catÃ©gorie portent Ã  la fois ",e.jsx(s,{children:'data-pdf-block="page"'})," ","et le marqueur dÃ©diÃ© ",e.jsx(s,{children:"data-pdf-band"})," qui les distingue de tout autre bloc de type Â« page Â» â chaque catÃ©gorie ouvre une nouvelle page. Le tableau comparatif et le Pareto des anomalies de la section FiabilitÃ© (CHARGEOPS-31) n'utilisent volontairement AUCUN saut de page forcÃ© : un forÃ§age inconditionnel a Ã©tÃ© essayÃ© puis retirÃ© (il ouvrait une page presque vide mÃªme pour un tableau Ã  deux lignes) au profit d'un plafond de lignes (15, avec une lÃ©gende Â« Affichage de N sur M Â» au-delÃ ) qui garde chaque tableau sous une page et laisse le flux ordinaire des blocs faire le reste. Les sous-titres portent"," ",e.jsx(s,{children:"data-pdf-keep-with-next"})," (",e.jsx(s,{children:"keepWithNextNeedsBreak"}),", qui exige le bloc suivant ENTIER quand celui-ci tient dans une page) : un titre ne finit jamais une page seul. Les sections dÃ©cochÃ©es ne sont simplement pas rendues par le document."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Rendu dÃ©terministe"})," : le document Ã©tant hors Ã©cran et autonome (styles en ligne, couleurs littÃ©rales), l'exp

7ort ne dÃ©pend ni de la largeur de fenÃªtre, ni du thÃ¨me sombre, ni des points de rupture Tailwind, ni du dÃ©filement â les classes de bogues qui frappaient la capture de la page vivante. Le tableau de bord Ã  l'Ã©cran n'est pas touchÃ© pendant la gÃ©nÃ©ration ; le dialogue de sÃ©lection reste ouvert comme indicateur de progression. Contrat de structure testÃ© dans"," ",e.jsx(s,{children:"operations/pdf/__tests__/operations-report-document.test.tsx"})," ","(blocs jamais imbriquÃ©s, lignes = atomes, sections respectant la sÃ©lection)."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Cartes de la page d'accueil"})," : les cartes de l'accueil utilisent un traitement plat Â« Direction A Â» (classe"," ",e.jsx(s,{children:".co-card"})," dans ",e.jsx(s,{children:"theme-cleo-extras.css"}),") â rayon de 16 px, bordure fine, ombre douce discrÃ¨te, survol subtil et titres en graisse d'affichage. Il a remplacÃ© le chrome"," ",e.jsx(s,{children:"gradient-border-card"}),"/flou/",e.jsx(s,{children:"shadow-xl"}),", qu'aucun balisage n'utilise plus."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Cartes de toute l'application"})," : le mÃªme traitement plat couvre toutes les autres pages authentifiÃ©es (bornes, sites, sessions, analytique et statistiques, entrepÃ´t, RMA, licences, garanties, puissance, vÃ©hicules, maintenance, rapports de service, clients, contacts, organisations, utilisateurs, journaux d'audit, sauvegarde, image de marque, gestionnaire de fichiers, carte des clients, cleo-link). En plus de"," ",e.jsx(s,{children:".co-card"}),"/",e.jsx(s,{children:".co-card-head"}),"/",e.jsx(s,{children:".co-card-title"}),", un vocabulaire d'intÃ©rieur partagÃ© aplatit les blocs internes : ",e.jsx(s,{children:".co-card-inset"})," et"," ",e.jsx(s,{children:".co-tile"})," (sous-surfaces), ",e.jsx(s,{children:".co-chip"})," ","(pastille d'icÃ´ne), ",e.jsx(s,{children:".co-empty"})," (Ã©tat vide),"," ",e.jsx(s,{children:".co-row"}),"/",e.jsx(s,{children:".co-thead"})," (tableaux),"," ",e.jsx(s,{children:".co-pill"})," (badge), ",e.jsx(s,{children:".co-field"})," (valeur en lecture seule) et ",e.jsx(s,{children:".co-nums"})," (chiffres tabulaires) â tous dans ",e.jsx(s,{children:"theme-cleo-extras.css"}),", chacun avec sa variante sombre ",e.jsx(s,{children:"html.theme-cleo.dark"}),". Les noms de classes sont inconditionnels dans le balisage : la feuille de style est le seul endroit oÃ¹ se dÃ©cide l'apparence d'une surface."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Pastille de navigation active"})," : la pastille de la page active â dans la barre de nav principale (",e.jsx(s,{children:"HeaderLinks"}),") comme dans chaque sous-nav (VÃ©hicules, RMA, Maintenance, EntrepÃ´t, Configuration, Analytique) â porte l'identitÃ© ClÃ©o sans toucher Ã  l'animation qui la fait glisser d'un onglet Ã  l'autre. Toutes ces barres sont collantes, donc la pastille est un seul indicateur positionnÃ© par rapport au ",e.jsx(s,{children:"<nav>"})," (",e.jsx(s,{children:"components/nav-pill.tsx"}),") qui n'anime que"," ",e.jsx(s,{children:"x"})," et la largeur â jamais un ",e.jsx(s,{children:"layoutId"})," ","Framer Motion, qui mesure en coordonnÃ©es de page : quand un onglet plus court ramenait le dÃ©filement, l'Ã©cart de dÃ©filement devenait le point de dÃ©part de la pastille et elle montait depuis le bas de l'Ã©cran. Sa hauteur suit les Ã©lÃ©ments (",e.jsx(s,{children:"h-9"})," dans la nav principale, ",e.jsx(s,{children:"h-8"})," dans les sous-navs,"," ",e.jsx(s,{children:"h-full"})," pour le soulignement des groupes de Configuration). Les barres Maintenance et EntrepÃ´t sont rendues par chaque page, donc remontÃ©es Ã  chaque clic d'onglet : une"," ",e.jsx(s,{children:"handoffKey"})," (",e.jsx(s,{children:"navKey"})," sur"," ",e.jsx(s,{children:"SectionSubNav"}),") fait glisser la pastille de la nouvelle barre depuis la position de l'ancienne, pourvu que l'ancienne soit partie depuis moins d'une seconde. Chaque Ã©lÃ©ment mesurÃ© est un enfant direct ",e.jsx(s,{children:"relative"})," de ce ",e.jsx(s,{children:"<nav>"})," ","et joignable au clavier : un onglet interne Ã  la page (VÃ©hicules, RMA, Configuration, Analytique) est un"," ",e.jsx(s,{children:'<motion.button type="button">'})," qui porte"," ",e.jsx(s,{children:'aria-current="page"'})," quand il est actif â jamais un"," ",e.jsx(s,{children:"div"})," nu avec un ",e.jsx(s,{children:"onClick"})," :"," ",e.jsx(s,{children:"whileTap"})," y pose ",e.jsx(s,{children:'tabindex="0"'}),", donc Tab s'y arrÃªte, mais EntrÃ©e ne fait que rejouer l'animation de pression (Ã©vÃ©nements pointeur synthÃ©tiques, aucun ",e.jsx(s,{children:"click"}),") et Espace ne fait rien â, tandis qu'un onglet de route (Maintenance, EntrepÃ´t) est un seul ",e.jsx(s,{children:"motion.a"})," que le"," ",e.jsx(s,{children:"<Link asChild>"})," wouter clone avec son"," ",e.jsx(s,{children:"href"})," et son gestionnaire de clic, et qui porte lui-mÃªme ",e.jsx(s,{children:"aria-current"}),". Jamais un"," ",e.jsx(s,{children:"motion.div"})," avec ",e.jsx(s,{children:"whileTap"})," dans un"," ",e.jsx(s,{children:"<Link>"})," simple : le div reÃ§oit son propre"," ",e.jsx(s,{children:'tabindex="0"'}),", un second arrÃªt de Tab sans anneau ni"," ",e.jsx(s,{children:"aria-current"}),". Les pastilles de l'en-tÃªte principal (",e.jsx(s,{children:"header-links.tsx"}),") et celles du Portail exploitant (",e.jsx(s,{children:"portal-layout.tsx"}),") suivent la mÃªme rÃ¨gle depuis CHARGEOPS-449 â un seul ",e.jsx(s,{children:"motion.a"})," par Ã©lÃ©ment, qui porte ",e.jsx(s,{children:"aria-current"})," et ",e.jsx(s,{children:"NAV_FOCUS_RING"}),", le mÃªme anneau avec son dÃ©calage en ",e.jsx(s,{children:"--brand-subnav-bg"})," (le milieu plat du dÃ©gradÃ© ",e.jsx(s,{children:".brand-subnav"})," de ces bandes) ;

7 le nav du portail, qui dÃ©file Ã  l'horizontale, garde les 4px de l'anneau dans son propre ",e.jsx(s,{children:"p-1"}),", car"," ",e.jsx(s,{children:"overflow-x-auto"})," rogne aussi Ã  la verticale. Dans la densitÃ© compacte (icÃ´nes seules) de l'en-tÃªte, le lien porte aussi son libellÃ© en"," ",e.jsx(s,{children:"aria-label"}),", et son info-bulle s'ouvre au focus clavier comme au survol. L'Ã©lÃ©ment focalisable porte"," ",e.jsx(s,{children:"SUB_NAV_FOCUS_RING"})," (",e.jsx(s,{children:"nav-pill.tsx"}),") : un anneau ",e.jsx(s,{children:"focus-visible"})," dÃ©calÃ© de 2px, dÃ©calage peint dans le ",e.jsx(s,{children:"--brand-page-subnav-bg"})," de la barre (pas"," ",e.jsx(s,{children:"ring-offset-background"}),", une bande blanchÃ¢tre sur la barre lilas), lisible sur le remplissage de la pastille active et assez petit pour que le ",e.jsx(s,{children:"py-2"})," du nav ne le rogne pas. La rangÃ©e des groupes de Configuration le porte aussi, avec"," ",e.jsx(s,{children:'aria-current="true"'})," sur le groupe actif (la pastille de section en dessous garde ",e.jsx(s,{children:'"page"'}),"). Ces barres suivent le modÃ¨le de liens de navigation (Tab d'une pastille Ã  l'autre,"," ",e.jsx(s,{children:"aria-current"})," sur l'active), pas celui d'une"," ",e.jsx(s,{children:"tablist"})," : pas de dÃ©placement aux flÃ¨ches. La barre de sections d'OpÃ©rations garde son ",e.jsx(s,{children:"layoutId"})," (mesurÃ© : sa pastille ne voit jamais de dÃ©filement entre les deux mesures). La barre latÃ©rale de la documentation suit la mÃªme rÃ¨gle Ã  la verticale : son surlignage actif est un seul indicateur (",e.jsx(s,{children:"useRailPill"})," /"," ",e.jsx(s,{children:"RailPillIndicator"}),") positionnÃ© par rapport Ã  la liste, qui n'anime que ",e.jsx(s,{children:"y"})," et la hauteur, et qui ne glisse que si l'ancien surlignage est encore visible dans la zone dÃ©filante de la barre â sinon il apparaÃ®t directement sur le chapitre choisi, au lieu de traverser toute la liste. Les classes partagÃ©es"," ",e.jsx(s,{children:".nav-pill-fill"})," (remplissage) et"," ",e.jsx(s,{children:".nav-pill-accent"})," (soulignement) sont stylÃ©es sous"," ",e.jsx(s,{children:"html.theme-cleo"})," dans ",e.jsx(s,{children:"theme-cleo.css"})," : aplat Bleu ClÃ©o (violet plat,"," ",e.jsx(s,{children:"#3021C3"}),"), rayon pleine pilule (9999 px), halo indigo et soulignement Bleu moyen. Le remplissage est volontairement plat et statique : seul l'anneau de brillance rotatif (",e.jsx(s,{children:".nav-shine-border"}),", barre de nav principale) tourne, arrondi pour Ã©pouser la pastille."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Dialogues de bornes"})," : les dialogues de bornes â Ajouter une borne (formulaire + enveloppe), Ajouter plusieurs bornes, et Modifier une borne â sont construits avec le vocabulaire ClÃ©o plat (",e.jsx(s,{children:"co-card-inset"}),","," ",e.jsx(s,{children:"co-tile"}),", ",e.jsx(s,{children:"co-chip"}),","," ",e.jsx(s,{children:"co-field"}),", ",e.jsx(s,{children:"co-pill"}),")."]}),e.jsxs(i,{children:["Ajouter et Modifier partagent la mÃªme anatomie : en-tÃªtes de section Ã  pastille (",e.jsx(s,{children:"CleoSectionHeader"})," â pastille indigo + libellÃ© en capitales), cartes plates en retrait, palette indigo, pastille de garantie verte, pied de page Ã  bouton pilule, sans filet colorÃ© ni icÃ´ne Ã  cÃ´tÃ© du titre."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Pages Organisations + Gestion des sites"})," : les deux pages partagent un mÃªme traitement â tuiles de statistiques Ã  pastille (",e.jsx(s,{children:"CleoStatTile"}),"), surfaces plates"," ",e.jsx(s,{children:"co-card"}),", Ã©chelle de capacitÃ© monochrome indigo (remplaÃ§ant le dÃ©gradÃ© arc-en-ciel), pastilles de transformateur aplaties, chiffres tabulaires ",e.jsx(s,{children:"co-nums"}),", badge kVA"," ",e.jsx(s,{children:"co-field"}),", Ã©tats vides ",e.jsx(s,{children:"co-empty"})," + pastille d'icÃ´ne, boutons pilule, bascule de vue indigo, et dialogues CrÃ©er / Modifier un site plats (sans filet colorÃ© ni icÃ´ne de titre)."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Page Organisations â paritÃ© avec la Gestion des sites"})," : la page ",e.jsx(a,{children:"/organizations"})," reprend la coquille de la Gestion des sites â pleine largeur du gabarit AppLayout (l'ancien wrapper ",e.jsx(s,{children:"max-w-6xl"})," est supprimÃ©), une seule carte externe ",e.jsx(s,{children:"ny-card"})," / ",e.jsx(s,{children:"co-card"})," qui contient le bandeau de KPI, la barre d'outils en carte encastrÃ©e (recherche, compteurs, bouton Â« Nouvelle organisation Â») et le rÃ©pertoire, plus le pied de page pleine largeur (",e.jsx(s,{children:"<Footer fullBleed />"}),"). Les tuiles de statistiques sont dÃ©sormais un composant partagÃ©"," ",e.jsx(s,{children:"StatTile"})," (",e.jsx(s,{children:"components/ui/stat-tile.tsx"}),") utilisÃ© par les deux pages : une dÃ©lÃ©gation directe Ã "," ",e.jsx(s,{children:"CleoStatTile"}),", oÃ¹ le ton ",e.jsx(s,{children:"amber"})," correspond Ã  son Ã©tat ",e.jsx(s,{children:"warn"}),". Le rÃ©pertoire lui-mÃªme (groupes d'organisations + puces de sites) est inchangÃ©."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Coquille des ParamÃ¨tres (Sett

7ingsSectionShell)"})," : la page ",e.jsx(a,{children:"/configuration"})," peignait un ",e.jsx(s,{children:"<h2>"})," ","nu sur le fond de page puis laissait chaque section empiler ses propres cartes, souvent dans sa propre colonne"," ",e.jsx(s,{children:"mx-auto max-w-4xl"}),". Les 23 sections sont maintenant rendues dans une seule carte externe"," ",e.jsx(s,{children:"ny-card"})," / ",e.jsx(s,{children:"co-card"})," â"," ",e.jsx(s,{children:"components/configuration/settings-section-shell.tsx"})," â Ã  la mÃªme largeur (",e.jsx(s,{children:"max-w-[1840px]"}),") et avec le mÃªme traitement que la carte principale de l'EntrepÃ´t : en-tÃªte"," ",e.jsx(s,{children:"co-card-head"})," portant la pastille d'icÃ´ne, le titre de l'onglet, son compteur, une description (clÃ©s"," ",e.jsx(s,{children:"configuration.sectionDesc.<tabId>"}),", FR + EN) et un emplacement ",e.jsx(s,{children:"actions"}),". Le corps porte la classe"," ",e.jsx(s,{children:".settings-canvas"}),", dont les rÃ¨gles (dans"," ",e.jsx(s,{children:"index.css"})," pour l'apparence hÃ©ritÃ©e et"," ",e.jsx(s,{children:"theme-cleo-extras.css"})," pour ClÃ©o) dÃ©classent toute"," ",e.jsx(s,{children:".ny-card"})," / ",e.jsx(s,{children:".co-card"})," imbriquÃ©e en panneau plat : plus d'anneau dÃ©gradÃ©, plus d'ombre portÃ©e, plus de soulÃ¨vement au survol, et un ",e.jsx(s,{children:".co-card-inset"})," /"," ",e.jsx(s,{children:".co-tile"})," situÃ© dans un panneau dÃ©classÃ© bascule sur la surface carte pour garder les trois niveaux lisibles. Le dÃ©classement passe par un sÃ©lecteur portÃ© par la coquille plutÃ´t que par une rÃ©Ã©criture des panneaux : montÃ©s ailleurs, ces mÃªmes composants peignent toujours leur carte complÃ¨te. La coquille n'utilise volontairement pas ",e.jsx(s,{children:"overflow-hidden"})," (contrairement Ã  l'EntrepÃ´t) â un ancÃªtre au dÃ©bordement rognÃ© devient conteneur de dÃ©filement et neutralise ",e.jsx(s,{children:"position: sticky"}),", dont dÃ©pendent le rail et l'aperÃ§u du Studio d'image de marque, les Menus et les RÃ´les et permissions. Trois autres pages rÃ©utilisent la mÃªme coquille : la console de plateforme (",e.jsx(a,{children:"/platform"}),"),"," ",e.jsx(a,{children:"/analytics"})," â dont les quatre chemins de rendu (onglet Site, Parcours utilisateur, squelette de chargement, erreur) rÃ©pÃ©taient chacun la sous-nav et la colonne, et posaient leurs cartes Ã  mÃªme le fond ; le sÃ©lecteur de pÃ©riode est passÃ© dans l'emplacement ",e.jsx(s,{children:"actions"})," de l'en-tÃªte â et"," ",e.jsx(a,{children:"/user-management"}),", oÃ¹ le bouton Â« Add User Â» a rejoint l'en-tÃªte Ã  cÃ´tÃ© du nombre de comptes. Puis cinq autres :"," ",e.jsx(a,{children:"/rma"})," (un ",e.jsx(s,{children:"SettingsSectionShell"})," par onglet, en remplacement de trois en-tÃªtes de carte Ã©crits Ã  la main),"," ",e.jsx(a,{children:"/support-tickets"})," (tuiles de statistiques et tableau rÃ©unis, boutons de page dans l'en-tÃªte, le"," ",e.jsx(s,{children:"<Footer fullBleed />"})," restant ",e.jsx(n,{children:"hors"})," ","de la carte), ",e.jsx(a,{children:"/compliance"})," (qui n'avait aucune carte),"," ",e.jsx(a,{children:"/charging-sessions"})," et ",e.jsx(a,{children:"/power-management"})," â puis ",e.jsx(a,{children:"/site-management"})," et ",e.jsx(a,{children:"/organizations"})," ","(via ",e.jsx(s,{children:"OrganizationsSection"}),"), fermant la boucle."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Jetons de design des ParamÃ¨tres (audit 2026-08-01)"})," : l'audit complet vit dans"," ",e.jsx(s,{children:"docs/design/2026-08-01-settings-design-audit.md"})," (50 constats, 35 corrigÃ©s). Les atomes rÃ©currents sont dÃ©sormais des classes de la couche composants : ",e.jsx(s,{children:".settings-cta"})," (le bouton d'action principal â une pastille indigo plate ; le dÃ©gradÃ© de sa rÃ¨gle de base est toujours surchargÃ© par"," ",e.jsx(s,{children:"html.theme-cleo .settings-cta"}),", car un dÃ©gradÃ© brut restait Ã  moitiÃ© converti, son arrÃªt cyan Ã©chappant Ã  la palette),"," ",e.jsx(s,{children:".settings-microlabel"})," (Ã©tiquette majuscule 11 px / 0.14em), ",e.jsx(s,{children:".settings-note"})," /"," ",e.jsx(s,{children:".settings-note-warning"})," (bandeaux d'avis), un anneau"," ",e.jsx(s,{children:":focus-visible"})," pour tout Ã©lÃ©ment interactif du"," ",e.jsx(s,{children:".settings-canvas"})," (indigo), et"," ",e.jsx(s,{children:'MotionConfig reducedMotion="user"'})," Ã  la racine pour que Framer Motion respecte la prÃ©fÃ©rence systÃ¨me. La coquille accepte aussi un ",e.jsx(s,{children:"eyebrow"})," â Configuration y passe la famille active de la sous-navigation. Un test de contrat (sett

7ings-shell-contract) interdit toute rÃ©apparition du dÃ©gradÃ© brut dans le dÃ©pÃ´t."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Suites de l'audit (2026-08-01)"})," : les trois leviers restants sont livrÃ©s. ",e.jsx(s,{children:"SettingsSearch"})," (palette"," ",e.jsx(s,{children:"cmdk"})," dans l'en-tÃªte de la coquille, raccourcis Â« / Â» et Ctrl/Cmd+K, repli d'accents partagÃ©, listes dÃ©jÃ  Ã©laguÃ©es par permission) ; ",e.jsx(s,{children:"SettingsDirtyProvider"})," /"," ",e.jsx(s,{children:"useSettingsDirty"})," (registre de brouillons par section â cinq sections s'y inscrivent, le changement d'onglet demande confirmation et ",e.jsx(s,{children:"beforeunload"})," est cÃ¢blÃ©) ; et"," ",e.jsx(s,{children:"SectionAnchorNav"})," (rail Â« Sur cette page Â» collant Ã  xl+, scroll-spy sans IntersectionObserver pour que la derniÃ¨re ancre puisse devenir active, cibles avec"," ",e.jsx(s,{children:"scroll-mt-[var(--settings-anchor-h)]"}),"). La liste des Rapports de maintenance rejoint la coquille."]}),e.jsxs(i,{children:[e.jsx(n,{children:"ClÃ´ture de l'audit (ronde 2)"})," : les douze derniers constats sont traitÃ©s â ressorts partagÃ©s"," ","(",e.jsx(s,{children:"lib/motion.ts"})," : ",e.jsx(s,{children:"SPRING_NAV"})," /"," ",e.jsx(s,{children:"SPRING_ICON"})," / ",e.jsx(s,{children:"SPRING_PANEL"})," /"," ",e.jsx(s,{children:"springEntrance"}),"), ",e.jsx(s,{children:"PanelHead"})," (les dix en-tÃªtes de panneau uniformes de configuration.tsx),"," ",e.jsx(s,{children:"CopySectionLink"})," dans l'en-tÃªte, crÃ©ation repliÃ©e pour les opÃ©rateurs SIM, barres d'outils aplaties, hauteurs h-9 et largeurs w-40/44/52 normalisÃ©es, boutons destructifs h-8, titres d'erreur contextuels, et suppression de l'entrÃ©e animÃ©e des groupes du Studio. Le journal complet vit dans le document d'audit, statut final 50/50."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Respiration au-dessus du pied de page"})," : les pages qui affichent le pied de page l'Ã©pinglent au bas du pli â"," ",e.jsx(s,{children:"mt-auto"})," dans une colonne flex, plus un"," ",e.jsx(s,{children:"-mb-8"})," qui annule le rembourrage bas du gabarit â ce qui collait le bandeau Ã  la derniÃ¨re carte de contenu."," ",e.jsx(s,{children:"footer.tsx"})," porte dÃ©sormais l'Ã©cart lui-mÃªme :"," ",e.jsx(s,{children:"pt-8"})," au-dessus du sÃ©parateur dÃ©gradÃ©. C'est un"," ",e.jsx(n,{children:"rembourrage"}),", jamais une marge â un"," ",e.jsx(s,{children:"mt-*"})," entrerait en conflit avec le ",e.jsx(s,{children:"mt-auto"})," ","qui plaque le bandeau au bas de la page (l'ordre des utilitaires dÃ©ciderait du gagnant). L'Ã©cart reste transparent : il laisse voir le fond de page, et le bandeau touche toujours le bas du viewport. Les hÃ´tes qui rembourrent dÃ©jÃ  leur propre bord bas â le wrapper de contenu de ",e.jsx(a,{children:"/"})," (",e.jsx(s,{children:"py-6"}),") et le"," ",e.jsx(s,{children:"<main>"})," du Portail opÃ©rateur (",e.jsx(s,{children:"py-6"}),") â passent ",e.jsx(s,{children:"topGap={false}"})," plutÃ´t que de payer deux fois."]})]}),e.jsxs(t,{id:"utilitaires-globales",title:"4. Classes utilitaires globales",children:[e.jsxs(i,{children:["DÃ©finies dans ",e.jsx(s,{children:"client/src/index.css"})," :"]}),e.jsx(h,{rows:[{key:e.jsx(s,{children:".ny-card"}),value:"Carte signature blanche bordÃ©e d'un dÃ©gradÃ© bleu translucide (linear-gradient(135deg, rgba(59,130,246,0.5), â¦)). Survol = translateY(-1px) + drop-shadow accentuÃ©e. UtilisÃ©e sur certaines pages / cartes."},{key:e.jsx(s,{children:".nav-font"}),value:'Font family "DM Sans", "Inter", ui-sans-serif, system-ui, sans-serif. AppliquÃ©e Ã  la barre de navigation, au menu profil et aux titres.'},{key:e.jsx(s,{children:".display-heading"}),value:"DM Sans font-weight: 700, letter-spacing: -0.025em."},{key:e.jsx(s,{children:".gradient-text"}),value:"Texte en dÃ©gradÃ© bleuâindigoâviolet (clip-text, transparent)."},{key:e.jsx(s,{children:".header-glass"}),value:"Header sticky avec backdrop-filter: blur(24px) saturate(1.8) et bordure infÃ©rieure dÃ©gradÃ©e."},{key:e.jsxs(e.Fragment,{children:[e.jsx(s,{children:".glass-toast"}),", ",e.jsx(s,{children:".shadow-glass"})]}),value:"Ombres composÃ©es + backdrop-filter: blur(16px)."},{key:e.jsx(s,{children:".card-hover-lift"}),value:"Transform translateY(-2px) + shadow bleue au survol."},{key:e.jsx(s,{children:".flowing-water"}),value:"Animation 3 s : gradient horizontal qui dÃ©file (utilisÃ© pour les effets shimmer)."},{key:e.jsx(s,{children:".logo-spin"}),value:"Rotation 8 s linear infinite (animation de chargement Polara)."},{key:e.jsx(s,{children:".animate-fade-in-up"}),value:"fadeInUp 0.6s ease-out forwards pour entrÃ©es de blocs."},{key:e.jsxs(s,{children:[".notification-glow-","{blue,red,amber,emerald}"]}),value:"Halos colorÃ©s pour banniÃ¨res de notifications."},{key:e.jsxs(e.Fragment,{children:[e.jsx(s,{children:".btn-3d"}),","," ",e.jsxs(s,{children:[".btn-","{white,blue,green,red,purple,dark-blue,light-blue}"]})]}),value:e.jsxs(e.Fragment,{children:["SystÃ¨me de boutons 3D avec lÃ¨vre intÃ©rieure (",e.jsx(s,{children:"inset 0 var(--btn-lip)"}),") + ombre portÃ©e colorÃ©e. Trois tailles : ",e.jsx(s,{children:"btn-sm"})," (48 px), default (56 px), ",e.jsx(s,{children:"btn-xs"})," (38 px). Variante carrÃ©e"," ",e.jsx(s,{children:"btn-icon"}),". Sous"," ",e.jsx(s,{children:"html.theme-cleo"})," â toujours prÃ©sent â"," ",e.jsx(s,{children:"theme-cleo.css"})," aplatit chaque ",e.jsxs(s,{children:[".btn-","{couleur}"]})," : aplat de couleur unie, coins pleine pilule (9999 px) et ombre douce â sans dÃ©gradÃ©, biseau ni lÃ¨vre intÃ©rieure. Les boutons contour (",e.jsx(s,{children:".btn-white"}),", ",e.jsx(s,{children:'variant="outline"'}),") adoptent en plus la teinte du bouton Â« secondary Â» (texte indigo ClÃ©o, bordure indigo claire, remplissage lavande trÃ¨s pÃ¢le, ombre indigo douce) â le mÃªme style que le bouton Â« Enregistrer le brouillon Â» â afin d'Ãªtre bien visibles au lieu de blanc-sur-blanc. La rÃ¨gle vit dans"," ",e.jsx(s,{children:"@layer components"})," (index.css) et non dans la couche non-layered de ",e.jsx(s,{children:"theme-cleo.css"})," : les surcharges de couleur par bouton (",e.jsx(s,{children:"text-*"}),","," ",e.jsx(s,{children:"border-*"}),", ",e.jsx(s,{children:"bg-*"}),") restent donc prioritaires, si bien que les boutons contour colorÃ©s (pastilles de statut, suppression rouge) conservent leur propre teinte."]})},{key:e.jsx(s,{children:".scrollbar-hide"}),value:"Masque les scrollbars (cross-browser)."},{key:e.jsx(s,{children:"min-h-[calc(100vh-11rem)]"}),value:"Tailwind arbitraire â hauteur minimum d'un conteneur de page (viewport moins ~176 px de header). Standard sur les cartes pleine page."}]})]}),e.jsxs(t,{id:"animations",title:"5. Animations â Framer Motion",children:[e.jsxs(i,{children:["Le projet importe Framer Motion en mode ",e.jsx(n,{children:"lazy"})," via"," ",e.jsx(s,{children:"<LazyMotion features={domAnimation}>"})," (App.tsx) pour rÃ©duire le bundle initial. Patterns courants :"]}),e.jsxs(l,{children:[e.jsxs(r,{children:[e.jsx(n,{children:"Apparition de section"})," :",e.jsx(c,{language:"tsx",children:`<motion.div
8  initial={{ opacity: 0, y: 20 }}
9  animate={{ opacity: 1, y: 0 }}
10  transition={{ duration: 0.5, delay: 0.2 }}
11>`})]}),e.jsxs(r,{children:[e.jsx(n,{children:"Halo pulsant"})," (avatar du menu profil) :",e.jsx(c,{language:"tsx",children:`<motion.div animate={{
12  boxShadow: [
13    "0 0 0 0px rgba(59,130,246,0)",
14    "0 0 0 3px rgba(59,130,246,0.3)",
15    "0 0 0 0px rgba(59,130,246,0)",
16  ],
17}} transition={{ duration: 2.5, repeat: Infinity, ease: "easeInOut" }} />`})]}),e.jsxs(r,{children:[e.jsx(n,{children:"Rotation chevron"})," (",e.jsx(s,{children:"<motion.div animate={{ rotate: isOpen ? 180 : 0 }}>"})," ","avec ",e.jsx(s,{children:'type: "spring"'}),")."]}),e.jsxs(r,{children:[e.jsx(n,{children:e.jsx(s,{children:"Reorder.Group"})})," ","(Framer Motion) utilisÃ© dans ",e.jsx(s,{children:"column-configurator.tsx"})," ","pour le drag-and-drop fluide des colonnes."]}),e.jsxs(r,{children:[e.jsx(n,{children:"AnimatedGridPattern"})," (",e.jsx(s,{children:"ui/animated-grid-pattern.tsx"}),") â fond animÃ© de carrÃ©s bleus utilisÃ© sur AppLayout (sauf ",e.jsx(a,{children:"/all-chargers"}),")."]})]}),e.jsxs(i,{children:["Animations CSS pures complÃ©mentaires :"," ",e.jsx(s,{children:"accordion-down"}),"/",e.jsx(s,{children:"accordion-up"})," (",e.jsx(s,{children:"tailwindcss-animate"}),"), ",e.jsx(s,{children:"marker-drop"})," (Google Maps markers), ",e.jsx(s,{children:"mobile-menu-slide-in"}),","," ",e.jsx(s,{children:"accent-pulse"}),", ",e.jsx(s,{children:"auth-aurora"}),"."]})]}),e.jsxs(t,{id:"loading-animations",title:"6. Loading animations â Polara, Custom, Standard",children:[e.jsxs(i,{children:["Composant pivot :"," ",e.jsx(s,{children:"client/src/components/ui/branded-spinner.tsx"}),". Le"," ",e.jsx(s,{children:"PageLoading"})," de route ne dessine plus la marque : c'est un squelette Ã  la forme de la page depuis S4.4b (Â§14m)."]}),e.jsx(h,{rows:[{key:e.jsxs(e.Fragment,{children:[e.jsx(s,{children:"polara"})," (dÃ©faut)"]}),value:e.jsxs(e.Fragment,{children:[e.jsx(n,{children:"La marque par dÃ©faut du tenant"})," qui tourne (",e.jsx(s,{children:"logo-spin"})," 8 s) + halo ",e.jsx(s,{children:"animate-ping"})," ","bleu : ",e.jsx(s,{children:"polara-o.png"})," sur le tenant principal, la marque principale rÃ©solue du tenant sur un tenant secondaire, et ",e.jsx(s,{children:"null"})," (spinner"," ",e.jsx(s,{children:"<Loader2>"}),") quand celui-ci n'a tÃ©lÃ©versÃ© aucun logo."]})},{key:e.jsx(s,{children:"custom"}),value:e.jsxs(e.Fragment,{children:["Image tÃ©lÃ©versÃ©e par l'admin (",e.jsx(s,{children:"branding.customLoadingAnimationUrl"}),"). MÃªme animation."]})},{key:e.jsx(s,{children:"standard"}),value:e.jsxs(e.Fragment,{children:["Pas de logo, juste un ",e.jsx(s,{children:"<Loader2>"})," qui tourne. La barre de progression qui l'accompagnait a Ã©tÃ© retirÃ©e : figÃ©e Ã  ",e.jsx(s,{children:"w-2/3"}),", elle pulsait sans jamais mesurer quoi que ce soit."]})}]}),e.jsxs(i,{children:["Le choix est lu via ",e.jsx(s,{children:"useBranding()"})," (hook qui interroge"," ",e.jsx(s,{children:"api.system.queries.getBrandingSettings"}),"). Cf. partie 3."]}),e.jsxs(d,{tone:"info",title:"Squelettes Ã  la forme du contenu",children:[e.jsxs(i,{children:[e.jsx(s,{children:"components/ui/skeleton.tsx"})," exporte, en plus de"," ",e.jsx(s,{children:"Skeleton"})," (une barre seule),"," ",e.jsx(s,{children:"SkeletonBlock"}),", ",e.jsx(s,{children:"SkeletonText"}),","," ",e.jsx(s,{children:"SkeletonTable"}),", ",e.jsx(s,{children:"SkeletonCard"})," et"," ",e.jsx(s,{children:"SkeletonKpiRow"}),". RÃ¨gle de composition :"," ",e.jsx(n,{children:"le balayage appartient au conteneur, pas aux piÃ¨ces"})," ","â un seul dÃ©gradÃ© ",e.jsx(s,{children:".skeleton-shimmer"})," traverse tout le bloc, et les barres internes restent en"," ",e.jsx(s,{children:"bg-muted"})," inerte (prop ",e.jsx(s,{children:"still"}),"). Sinon quarante petits rectangles clignotent en dÃ©calÃ©."]}

17),e.jsxs(i,{children:[e.jsx(s,{children:"TabLoading"})," et ",e.jsx(s,{children:"SectionLoading"})," reposent dÃ©sormais dessus et n'affichent plus de rouet : un squelette et un"," ",e.jsx(s,{children:"animate-spin"})," superposÃ©s disaient deux fois la mÃªme chose. Les rouets sont rÃ©servÃ©s aux boutons en attente, oÃ¹ ils accompagnent une action que l'utilisateur vient de dÃ©clencher. Chaque bloc porte ",e.jsx(s,{children:'role="status"'})," et"," ",e.jsx(s,{children:"aria-busy"}),", donc le lecteur d'Ã©cran annonce Â« chargement Â» une fois au lieu d'Ã©numÃ©rer les barres dÃ©coratives."]})]}),e.jsxs(d,{tone:"success",title:"Consolidation BrandedSpinner (Branding v2)",children:["Toutes les surfaces de chargement honorent dÃ©sormais"," ",e.jsx(s,{children:"loadingAnimationType"})," via le composant partagÃ©"," ",e.jsx(s,{children:"client/src/components/ui/branded-spinner.tsx"})," : les huit copies inline de ",e.jsx(s,{children:"PolaraSpinner"})," (file-manager + dialogues), ",e.jsx(s,{children:"section-loading.tsx"}),","," ",e.jsx(s,{children:"tab-loading.tsx"})," (variante tableau) et le hÃ©ros de"," ",e.jsx(s,{children:"home.tsx"})," sans site sÃ©lectionnÃ©. Exception voulue : le tableau de ",e.jsx(s,{children:"platform-console.tsx"})," garde le rendu ChargeOps/standard (surface plateforme, hors branding tenant). Le glyphe du pied de page (",e.jsx(s,{children:"footer.tsx"}),") suit aussi le branding â image du loader personnalisÃ© quand"," ",e.jsx(s,{children:'loadingAnimationType === "custom"'}),", masquÃ© en"," ",e.jsx(s,{children:"standard"}),"."]}),e.jsxs(d,{tone:"warning",title:'Le mode "polara" = Â« la marque par dÃ©faut de CE tenant Â»',children:[e.jsx(s,{children:"resolveLoaderImage"})," dÃ©lÃ¨gue dÃ©sormais Ã "," ",e.jsx(s,{children:"client/src/lib/brand-glyph.ts::resolveBrandGlyph"})," et prend un axe tenant (",e.jsx(s,{children:"isMainTenant"}),","," ",e.jsx(s,{children:"primaryLogo"}),"). La ",e.jsx(n,{children:"valeur stockÃ©e"})," ",e.jsx(s,{children:'"polara"'})," est inchangÃ©e (aucune migration de donnÃ©es) ; c'est son ",e.jsx(n,{children:"interprÃ©tation"})," qui change : le glyphe Polara intÃ©grÃ© n'est servi que sur le tenant principal, un tenant secondaire reÃ§oit sa propre marque principale, et"," ",e.jsx(s,{children:"null"})," â donc le ",e.jsx(s,{children:"<Loader2>"})," gÃ©nÃ©rique â s'il n'a pas de logo. L'axe est optionnel et vaut Â« tenant principal Â» par dÃ©faut, si bien qu'un appelant non migrÃ© garde le comportement historique."]})]}),e.jsxs(t,{id:"toast",title:"7. Toast notifications",children:[e.jsxs(l,{children:[e.jsxs(r,{children:["ImplÃ©mentation : ",e.jsx(s,{children:"ui/toast.tsx"})," +"," ",e.jsx(s,{children:"ui/toaster.tsx"})," (basÃ© sur Radix"," ",e.jsx(s,{children:"@radix-ui/react-toast"})," + reducer custom inspirÃ© de"," ",e.jsx(n,{children:"react-hot-toast"}),")."]}),e.jsxs(r,{children:["Hook : ",e.jsx(s,{children:"useToast()"})," dans"," ",e.jsx(s,{children:"client/src/hooks/use-toast.ts"}),"."]}),e.jsxs(r,{children:["Variantes : ",e.jsx(s,{children:"default"}),", ",e.jsx(s,{children:"destructive"}),"."]}),e.jsxs(r,{children:["Style : ",e.jsx(s,{children:"glass-toast"})," (blur + ombre composÃ©e)."]}),e.jsxs(r,{children:["Le ",e.jsx(s,{children:"<Toaster />"})," est montÃ© une seule fois, dans"," ",e.jsx(s,{children:"App.tsx"}),"."]})]}),e.jsx(i,{children:"Usage type :"}),e.jsx(c,{language:"tsx",children:`const { toast } = useToast();
18toast({ title: t("common.success"), description: "Logo uploaded" });
19toast({ variant: "destructive", title: t("error"), description: error.message });`})]}),e.jsx(t,{id:"command-palette",title:"7a. Palette de commandes (âK)",children:e.jsxs(i,{children:[e.jsx(s,{children:"client/src/components/command-palette.tsx"})," â palette globale bÃ¢tie sur le wrapper ",e.jsx(s,{children:"cmdk"})," existant (",e.jsx(s,{children:"components/ui/command.tsx"}),") + Radix Dialog. Ouverte au clavier par ",e.jsx(n,{children:"âK"})," (macOS) / ",e.jsx(n,{children:"Ctrl+K"})," ","(",e.jsx(s,{children:"e.metaKey || e.ctrlKey"})," + touche ",e.jsx(s,{children:"k"}),"). Elle reÃ§oit ses liens et ses actions du registre de navigation (",e.jsx(s,{children:"client/src/lib/nav/"}),") : l'app passe"," ",e.jsx(s,{children:"useNav().all"})," â toutes les pages auxquelles l'utilisateur a accÃ¨s, pas seulement les pastilles de l'en-tÃªte â et les actions de crÃ©ation ",e.jsx(s,{children:"useNav().createActions"})," (billet, message, rapport d'intervention ou de maintenance, scan d'une borne), filtrÃ©es par permission et par module ; le portail passe"," ",e.jsx(s,{children:"usePortalNav().topMenu"}),". Elle est montÃ©e Ã  la fois dans"," ",e.jsx(s,{children:"app-layout.tsx"})," et ",e.jsx(s,{children:"portal/portal-layout.tsx"}),", agnostique de la coquille. Les deux coquilles y ajoutent l'action"," ",e.jsx(n,{children:"Â« Demander Ã  ChargeOps AI Â»"}

19)," (",e.jsx(s,{children:"components/assistant/assistant-command.ts::useAssistantCommandActions"}),"), prÃ©sente seulement quand ",e.jsx(s,{children:"assistant.availability.get"})," ","rÃ©pond ",e.jsx(s,{children:"ready"})," â une entrÃ©e qui ouvrirait sur Â« demandez Ã  votre administrateur Â» serait une impasse ; elle Ã©met l'Ã©vÃ©nement"," ",e.jsx(s,{children:"chargeops:assistant-open"})," qu'Ã©coute la coquille de l'assistant (section 14i)."]})}),e.jsxs(t,{id:"calendrier",title:"7b. Calendrier et sÃ©lecteur de date",children:[e.jsxs(i,{children:[e.jsx(s,{children:"components/ui/calendar.tsx"})," enveloppe"," ",e.jsx(s,{children:"react-day-picker"})," v8 et fournit un"," ",e.jsx(s,{children:"Caption"})," maison (",e.jsx(s,{children:"DropdownCaption"}),") : listes dÃ©roulantes mois + annÃ©e encadrÃ©es des flÃ¨ches prÃ©cÃ©dent/suivant. C'est le seul en-tÃªte de calendrier de l'app â tout"," ",e.jsx(s,{children:"<DatePicker>"})," et tout ",e.jsx(s,{children:"<Calendar>"})," ","montÃ© directement (centre de maintenance, filtres de sessions, plage de dates des analytics, gestionnaire de sauvegardes) en hÃ©rite."]}),e.jsxs(l,{children:[e.jsxs(r,{children:[e.jsx(n,{children:"L'en-tÃªte est une seule rangÃ©e flex"}),", jamais des flÃ¨ches en ",e.jsx(s,{children:"absolute"}),". Les deux listes mesurent 200 px alors qu'une grille de 7 colonnes n'en laissait que 176 entre les flÃ¨ches : chaque flÃ¨che se posait donc"," ",e.jsx(n,{children:"par-dessus"})," une liste (12 px de chevauchement de chaque cÃ´tÃ©, dans toutes les langues). En flux, la collision est impossible."]}),e.jsxs(r,{children:["La largeur naturelle de la rangÃ©e (272 px) dimensionne le bloc du mois ; les cellules de jour sont en ",e.jsx(s,{children:"flex-1"})," pour que les 7 colonnes couvrent exactement cette largeur. Les boutons de jour gardent leur carrÃ© de 36 px â la pastille du jour sÃ©lectionnÃ© reste ronde et le surlignage d'une plage reste continu."]}),e.jsxs(r,{children:[e.jsx(s,{children:"flex-wrap"})," sert de soupape : dans un conteneur plus Ã©troit que la rangÃ©e (calendrier posÃ© pleine largeur dans une carte sur trÃ¨s petit Ã©cran), les contrÃ´les s'empilent au lieu de forcer le bloc du mois plus large que son parent."]}),e.jsxs(r,{children:["Les flÃ¨ches utilisent"," ",e.jsx(s,{children:'buttonVariants({ variant: "outline", size: "icon-xs" })'})," ","â un carrÃ© dÃ©terministe de 32 px servi par"," ",e.jsx(s,{children:".btn-icon.btn-xs"}),"."]})]}),e.jsx(d,{tone:"warning",title:"Un Caption maison neutralise classNames.caption",children:e.jsxs(i,{children:["DÃ¨s qu'on passe ",e.jsx(s,{children:"components={{ Caption }}"}),", react-day-picker ne rend plus son propre caption :"," ",e.jsx(s,{children:"classNames.caption"}),", ",e.jsx(s,{children:"caption_label"})," et"," ",e.jsx(s,{children:"nav"})," ne sont plus lus par personne. Styler l'en-tÃªte passe par le composant, pas par ces clÃ©s (elles ont Ã©tÃ© retirÃ©es de"," ",e.jsx(s,{children:"calendar.tsx"})," pour ne plus faire croire l'inverse)."]})}),e.jsx(d,{tone:"warning",title:"h-7 w-7 p-0 ne redimensionne pas un bouton du design system",children:e.jsxs(i,{children:["La taille des boutons vient des classes CSS"," ",e.jsx(s,{children:".btn-3d.btn-xs"})," (spÃ©cificitÃ© (0,2,0)), pas d'utilitaires Tailwind â un ",e.jsx(s,{children:"h-7 w-7 p-0"})," Ã  (0,1,0) perd, et"," ",e.jsx(s,{children:"p-0"})," perd de toute faÃ§on contre le ",e.jsx(s,{children:"px-4"})," de la classe. Les anciennes flÃ¨ches mesuraient donc 34 px avec 16 px de padding latÃ©ral au lieu des 28 px annoncÃ©s. Pour un bouton icÃ´ne, prendre ",e.jsx(s,{children:'size="icon-xs"'})," plutÃ´t que se battre avec la cascade."]})})]}),e.jsxs(t,{id:"liens-entites",title:"7c. Liens site et organisation",children:[e.jsxs(i,{children:[e.jsx(s,{children:"client/src/components/navigation/entity-links.tsx"})," â rÃ¨gle unique de l'application : partout oÃ¹ un ",e.jsx(n,{children:"nom de site"})," ","est Ã©crit, il ouvre ",e.jsx(s,{children:"/sites/:id"})," ; partout oÃ¹ un"," ",e.jsx(n,{children:"nom d'organisation"})," est Ã©crit, il ouvre"," ",e.jsx(s,{children:"/organizations/:id"}),". Trois composants la portent â"," ",e.jsx(s,{children:"SiteLink"}),", ",e.jsx(s,{children:"OrganizationLink"})," et"," ",e.jsx(s,{children:"OrganizationBadgeLink"})," (remplaÃ§ant direct de"," ",e.jsx(s,{children:"OrganizationBadge"}),")."]}),e.jsxs(l,{children:[e.jsxs(r,{children:[e.jsx(n,{children:"Montage portail."})," ",e.jsx(s,{children:"useInPortal()"})," lit"," ",e.jsx(s,{children:"useLocation()"})," : sous ",e.jsx(s,{children:"/portal/*"})," les deux noms redeviennent du texte simple, parce que"," ",e.jsx(s,{children:"ProtectedRoute"})," renverrait l'opÃ©rateur vers"," ",e.jsx(s,{children:"/portal"}),"."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Permission."})," La route"," ",e.jsx(s,{children:"/organizations/:orgId"})," exige"," ",e.jsx(s,{children:"viewOrganizationPage"})," ; sans ce droit le lien n'apparaÃ®t pas (il ne menait qu'Ã  la redirection d'accÃ¨s refusÃ©). Les pages de site n'ont pas de garde Ã©quivalente."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Propagation du clic."})," Ces noms vivent presque toujours dans une ligne ou une carte elle-mÃªme cliquable : sans"," ",e.jsx(s,{children:"stopPropagation"}),", le gestionnaire de la ligne s'exÃ©cute aprÃ¨s celui du lien et gagne â le clic sur le site ouvrait le rapport. Les composants l'appellent systÃ©matiquement."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Deux traitements."})," ",e.jsx(s,{children:'variant="text"'})," ","(dÃ©faut) souligne un nom Ã©crit en toutes lettres au survol ;"," ",e.jsx(s,{children:'variant="wrapper"'})," pose un halo autour d'une pastille dÃ©jÃ  stylÃ©e. Quand le lien est dÃ©sactivÃ© (portail, permission, id absent), ",e.jsx(s,{children:"OrganizationBadgeLink"})," rend la pastille nue, sans conteneur supplÃ©mentaire, pour ne pas dÃ©former les mises en page flex environnantes."]})]}),e.jsx(d,{tone:"warning",title:"Une ancre ne s'imbrique pas dans une ancre",children:e.jsxs(i,{children:["LÃ  oÃ¹ la carte entiÃ¨re est dÃ©jÃ  un ",e.jsx(s,{children:"<Link>"})," â la ligne du temps de l'historique de la borne, panneaux Â« top sites Â» du tableau de bord opÃ©rationnel â le nom du site reste du texte : un ",e.jsx(s,{children:"<a>"}

19)," imbriquÃ© est du HTML invalide. Les noms rendus Ã  l'intÃ©rieur d'un contrÃ´le de formulaire (listes dÃ©roulantes, comboboxes, cases Ã  cocher), d'un assistant ou d'une boÃ®te de dialogue restent Ã©galement du texte â y naviguer abandonnerait la saisie en cours."]})})]}),e.jsxs(t,{id:"error-boundary",title:"8. Error boundary",children:[e.jsxs(i,{children:[e.jsx(s,{children:"client/src/components/error-boundary.tsx"})," â composant de classe React :"]}),e.jsxs(l,{children:[e.jsxs(r,{children:["Trois niveaux : ",e.jsx(s,{children:"app"})," (page complÃ¨te avec card centrÃ©e + icÃ´ne ",e.jsx(s,{children:"AlertTriangle"}),"), ",e.jsx(s,{children:"page"})," (zone d'erreur dans le layout), ",e.jsx(s,{children:"component"})," (mini-erreur inline)."]}),e.jsxs(r,{children:[e.jsx(n,{children:"DÃ©tection chunks pÃ©rimÃ©s"})," :"," ",e.jsx(s,{children:"isStaleChunkError()"})," reconnaÃ®t"," ",e.jsx(s,{children:"Failed to fetch dynamically imported module"})," /"," ",e.jsx(s,{children:"ChunkLoadError"}),". Le rechargement automatique"," ",e.jsx(s,{children:"window.location.reload()"})," n'a dÃ©sormais lieu que lorsqu'un ",e.jsx(n,{children:"nouveau dÃ©ploiement est rÃ©ellement en ligne"})," ","â confirmÃ© par ",e.jsx(s,{children:"isNewDeploymentLive()"})," (",e.jsx(s,{children:"client/src/lib/stale-chunk.ts"}),"), qui re-tÃ©lÃ©charge"," ",e.jsx(s,{children:"/index.html"})," (servi ",e.jsx(s,{children:"no-store"}),", avec une URL horodatÃ©e qui contourne le cache du service worker â sinon une coquille pÃ©rimÃ©e en cache dÃ©clenchait une boucle de rechargement sur Safari) et compare la signature des modules servis (hash du"," ",e.jsx(s,{children:'<script type="module" src>'})," d'entrÃ©e +"," ",e.jsx(s,{children:'<link rel="modulepreload" href>'}),", via"," ",e.jsx(s,{children:"moduleSignatureFromHtml()"}),") Ã  celle capturÃ©e au dÃ©marrage. Sur un nouveau build, le rechargement est encore rÃ©essayÃ© jusqu'Ã  3 fois avec une courte temporisation (0,6 / 1,2 / 1,8 s) car un dÃ©ploiement en cours de propagation peut faire Ã©chouer un premier essai ; le budget est suivi via"," ",e.jsx(s,{children:"sessionStorage"})," (",e.jsx(s,{children:"chargeops:stale-chunk-reloads"}),") dans une fenÃªtre de 60 s pour ne jamais boucler, et un discret Ã©cran Â« Mise Ã  jour vers la derniÃ¨re versionâ¦ Â» reste affichÃ© pendant la vÃ©rification. Sur un Ã©chec ",e.jsx(n,{children:"transitoire"})," du mÃªme build (le chunk existe toujours, son tÃ©lÃ©chargement a Ã©chouÃ© : Safari qui abandonne un fetch de module concurrent, coupure rÃ©seau passagÃ¨re),"," ",e.jsx(s,{children:"checkDeployment()"})," renvoie ",e.jsx(s,{children:'"same"'})," et la page se recharge ",e.jsx(n,{children:"une fois"})," aprÃ¨s 1 s â au plus une fois par minute (",e.jsx(s,{children:"chargeops:transient-chunk-reload-at"}),"), jamais quand le serveur n'a pas rÃ©pondu (",e.jsx(s,{children:'"unknown"'}),") et jamais sans ",e.jsx(s,{children:"sessionStorage"}),". Recharger est le seul vrai nouvel essai : ",e.jsx(s,{children:"React.lazy"})," garde en cache l'import rejetÃ©, un remontage rejoue donc la mÃªme erreur. Pour la mÃªme raison, le bouton ",e.jsx(n,{children:"Retry"})," de la card recharge la page sur une erreur de chunk. En amont, ",e.jsx(s,{children:"sw.js"})," rÃ©essaie une fois un fetch ",e.jsx(s,{children:"/assets/*"})," rejetÃ© (300 ms,"," ",e.jsx(s,{children:'cache: "reload"'}),") avant de le laisser remonter en"," ",e.jsx(s,{children:"net::ERR_FAILED"}),"."]}),e.jsxs(r,{children:["En dev, affiche ",e.jsx(s,{children:"error?.message"})," ; en prod, masquÃ©."]}),e.jsxs(r,{children:["HOC ",e.jsx(s,{children:"withErrorBoundary(Component, level)"})," pour wrapper rapide."]}),e.jsxs(r,{children:["Dans ",e.jsx(s,{children:"App.tsx"}),", double wrapping :"," ",e.jsx(s,{children:'<ErrorBoundary level="app">'})," au sommet,"," ",e.jsx(s,{children:'<ErrorBoundary level="component">'})," autour du"," ",e.jsx(s,{children:"<Router>"}),"."]})]})]}),e.jsxs(t,{id:"pwa-banner",title:"9. PWA Install Banner",children:[e.jsxs(i,{children:[e.jsx(s,{children:"client/src/components/pwa-install-banner.tsx"})," â banniÃ¨re flottante (",e.jsx(s,{children:"fixed bottom-3 left-3 right-3"}),") :"]}),e.jsxs(l,{children:[e.jsxs(r,{children:["Ne s'affiche ",e.jsx(n,{children:"que sur mobile"})," (",e.jsx(s,{children:"useIsMobile()"}),", largeur seule), si"," ",e.jsx(s,{children:"canInstall"})," est vrai et l'app n'est pas dÃ©jÃ  installÃ©e."]}),e.jsxs(r,{children:["DÃ©clencheurs : Ã©vÃ©nements ",e.jsx(s,{children:"beforeinstallprompt"})," et"," ",e.jsx(s,{children:"appinstalled"})," capturÃ©s par ",e.jsx(s,{children:"usePWAInstall()"})," ","(",e.jsx(s,{children:"client/src/hooks/use-pwa-install.tsx"}),")."]}),e.jsxs(r,{children:["DÃ©tection du mode installÃ© : ",e.jsx(s,{children:"useIsStandalone()"})," ","(",e.jsx(s,{children:"client/src/hooks/use-is-standalone.ts"}),", S4.3) â la requÃªte mÃ©dia ",e.jsx(s,{children:"(display-mode: standalone)"}),", ou"," ",e.jsx(s,{children:"navigator.standalone === true"})," sur iOS Safari, suivie en direct (Ã©vÃ©nement ",e.jsx(s,{children:"change"}),"). Une seule dÃ©finition partagÃ©e par la banniÃ¨re et le balayage retour (9b)."]}),e.jsxs(r,{children:["Texte traduit (",e.jsx(s,{children:"pwaInstallTitle"}),","," ",e.jsx(s,{children:"pwaInstallDescription"}),", ",e.jsx(s,{children:"pwaInstallButton"}),","," ",e.jsx(s,{children:"pwaInstallDismiss"}),")."]}),e.jsxs(r,{children:["Ãtat de fermeture local (",e.jsx(s,{children:"dismissed"}),", non persistÃ© â rÃ©apparaÃ®t au prochain chargement si l'app reste Ã©ligible)."]})]})]}),e.jsxs(t,{id:"app-installee",title:"9b. App installÃ©e : raccourcis, pastille et balayage retour (S4.3)",children:[e.jsx(i,{children:"Ce que l'app gagne une fois installÃ©e (CHARGEOPS-656). Rien de tout cela ne change le balisage desktop : la pastille ne rend rien, et le reste n'existe que sous 1024 px."}),e.jsxs(l,{children:[e.jsxs(r,{children:[e.jsx(n,{children:"Manifeste"})," (",e.jsx(s,{children:"client/public/manifest.json"}),") â ",e.jsx(s,{children:'"id": "/"'})," (identitÃ© stable de l'app installÃ©e, indÃ©pendante de ",e.jsx(s,{children:"start_url"}),") ; trois"," ",e.jsx(s,{children:"shortcuts"})," : ",e.jsx(s,{children:"/scan?open=1"})," (ouvre la feuille de scan, S4.1), ",e.jsx(s,{children:"/service-reports/new"})," et"," ",e.jsx(s,{children:"/my-day"}),", aux noms bilingues courts (Â« Scanner / Scan Â», Â« Rapport / Report Â», Â« Ma journÃ©e / My day Â») puisqu'un manifeste ne se traduit pas Ã  l'exÃ©cution, chacun avec une icÃ´ne 96 px (",e.jsx(s,{children:"client/public/icons/shortcut-*-96.png"})," : les glyphes lucide du registre de navigation â ",e.jsx(s,{children:"ScanLine"}),","," ",e.jsx(s,{children:"FileText"}),", ",e.jsx(s,{children:"Sun"})," â en blanc sur le marine de la barre du haut) ; deux ",e.jsx(s,{children:"screenshots"})," ",e.jsx(s,{children:'form_factor: "narrow"'})," en 375Ã812 (",e.jsx(s,{children:"client/public/screenshots/phone-list.png"})," :"," ",e.jsx(s,{children:"/support"})," ; ",e.jsx(s,{children:"phone-detail.png"})," : une fiche de borne), capturÃ©es dans le harnais d'audit mobile (Â§21b)."," ",e.jsx(s,{children:"client/src/__tests__/pwa-manifest.test.ts"})," vÃ©rifie le JSON, l'ordre des raccourcis et que chaque PNG existe Ã  la taille dÃ©clarÃ©e (lue dans son en-tÃªte IHDR). Un raccourci hors du rÃ´le (Ma journÃ©e pour un exploitant de site) tombe sur le"," ",e.jsx(s,{children:"blockForRoles"})," de sa route, qui renvoie Ã  l'accueil."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Pastille"})," â ",e.jsx(s,{children:"useAppBadge()"}

19)," (",e.jsx(s,{children:"client/src/components/shell/use-app-badge.ts"}),") appelle"," ",e.jsx(s,{children:"navigator.setAppBadge(total)"})," quand"," ",e.jsx(s,{children:"useInboxUnread().total"})," (cloche + messages, le nombre de l'onglet RÃ©ception) dÃ©passe 0, et"," ",e.jsx(s,{children:"clearAppBadge()"})," Ã  0 ou au dÃ©montage. Il attend"," ",e.jsx(s,{children:"useInboxUnread().loaded"})," (le compteur de la cloche a rÃ©pondu) : avant, 0 veut dire Â« pas encore connu Â» et effacerait pour rien la pastille laissÃ©e par la session prÃ©cÃ©dente. Les promesses rejetÃ©es sont avalÃ©es ; sans l'API, rien. MontÃ© une seule fois, pour tous les formats, par ",e.jsx(s,{children:"AppBadge"})," dans"," ",e.jsx(s,{children:"App.tsx"})," (Ã  cÃ´tÃ© de ",e.jsx(s,{children:"NavPreloader"}),"), et seulement pour un utilisateur connectÃ© : les lectures de non-lus sont des requÃªtes de locataire, et la dÃ©connexion dÃ©monte le composant, donc efface la pastille. Le service worker de S5 met Ã  jour la mÃªme pastille app fermÃ©e."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Balayage retour"})," â"," ",e.jsxs(s,{children:["useEdgeSwipeBack(","{ enabled, onBack }",")"]})," (",e.jsx(s,{children:"client/src/components/shell/use-edge-swipe-back.ts"}),"). Constantes : ",e.jsx(s,{children:"EDGE_PX = 20"}),","," ",e.jsx(s,{children:"COMMIT_RATIO = 0.3"}),","," ",e.jsx(s,{children:"FLICK_PX_PER_MS = 0.5"}),","," ",e.jsx(s,{children:"MAX_ANGLE_DEG = 30"}),". Un Ã©couteur"," ",e.jsx(s,{children:"touchstart"})," en capture sur ",e.jsx(s,{children:"window"})," accepte un seul doigt posÃ© Ã  â¤ 20 px du bord gauche ; les Ã©couteurs"," ",e.jsx(s,{children:"touchmove"})," (non passif, pour bloquer le dÃ©filement une fois l'axe horizontal fixÃ©) / ",e.jsx(s,{children:"touchend"})," ne vivent que le temps du geste. L'axe se dÃ©cide aprÃ¨s 8 px (comme"," ",e.jsx(s,{children:"detail/tab-swipe.ts"}),") : plus de 30Â° d'inclinaison ou vers la gauche, le geste est abandonnÃ©. Au relÃ¢cher, il valide au-delÃ  de 30 % de ",e.jsx(s,{children:"innerWidth"})," ou si la vitesse des 100 derniÃ¨res ms dÃ©passe 0,5 px/ms ; sinon ressort (200 ms,"," ",e.jsx(s,{children:"cubic-bezier(0.4, 0, 0.2, 1)"}),"). IgnorÃ© : dÃ©part sur"," ",e.jsx(s,{children:"[data-no-edge-swipe]"}),", sur une ligne balayable (",e.jsx(s,{children:"[data-no-tab-swipe]"}),"), sur une carte (",e.jsx(s,{children:".gm-style"}),", Leaflet, MapLibre), dans un conteneur qui dÃ©file horizontalement, ou quand un"," ",e.jsx(s,{children:"[role=dialog][data-state=open]"})," existe. Pendant le geste, seul le conteneur de contenu marquÃ©"," ",e.jsx(s,{children:"data-edge-swipe-page"})," suit le doigt (",e.jsx(s,{children:"translateX"})," + ombre Ã  gauche ; le chrome fixe ne bouge pas) â posÃ© par ",e.jsx(s,{children:"AppLayout"})," (le wrapper de contenu) et"," ",e.jsx(s,{children:"PortalLayout"})," (son ",e.jsx(s,{children:"<main>"}),") sous 1024 px seulement ; Home, dont la racine contient aussi le chrome, n'en a pas : le geste y valide sans animation. Sous"," ",e.jsx(s,{children:"prefers-reduced-motion"}),", aucune translation, seulement la dÃ©cision au relÃ¢cher. ",e.jsx(s,{children:"edgeSwipeOwnsGesture()"})," est vrai pendant un geste acceptÃ© :"," ",e.jsx(s,{children:"DetailLayout"})," ne dÃ©marre alors pas son balayage d'onglets (sinon le mÃªme glissement ouvrirait aussi l'onglet prÃ©cÃ©dent)."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Montage"})," â ",e.jsx(s,{children:"PhoneChrome"})," et"," ",e.jsx(s,{children:"TabletShell"})," appellent"," ",e.jsx(s,{children:"useEdgeSwipeBack"})," avec"," ",e.jsx(s,{children:"enabled = useIsStandalone() && pageIntÃ©rieure && !splitActif"})," ","et le ",e.jsx(s,{children:"goBack"})," de ",e.jsx(s,{children:"useBackAction(isSplitActive)"})," ","(",e.jsx(s,{children:"client/src/components/shell/use-back-action.ts"}),") â la mÃªme action que le â de ",e.jsx(s,{children:"TopBar"}),", qui l'utilise aussi : retour dans l'historique s'il y a un historique dans l'app, sinon le parent du fil d'Ariane. Dans un onglet de navigateur, rien n'est branchÃ©. Tests :"," ",e.jsx(s,{children:"shell/__tests__/use-edge-swipe-back.test.tsx"})," (geste),"," ",e.jsx(s,{children:"edge-swipe-mount.test.tsx"})," (cÃ¢blage),"," ",e.jsx(s,{children:"use-app-badge.test.tsx"}),","," ",e.jsx(s,{children:"hooks/__tests__/use-is-standalone.test.tsx"}),"."]})]})]}),e.jsxs(t,{id:"column-configurator",title:"11. Configurateur de colonnes",children:[e.jsxs(i,{children:[e.jsx(s,{children:"client/src/components/column-configurator.tsx"})," (table"," ",e.jsx(s,{children:"all-chargers"}),") :"]}),e.jsxs(l,{children:[e.jsxs(r,{children:["Liste ",e.jsx(s,{children:"AVAILABLE_COLUMNS"})," canonique (24 colonnes :"," ",e.jsx(s,{children:"siteName"}),", ",e.jsx(s,{children:"name"}),", ",e.jsx(s,{children:"brand"}),","," ",e.jsx(s,{children:"model"}),", ",e.jsx(s,{children:"connectorCount"}),","," ",e.jsx(s,{children:"maxPower"}),", ",e.jsx(s,{children:"currentPower"}),","," ",e.jsx(s,{children:"phase"}),", ",e.jsx(s,{children:"modelChargerClass"}),","," ",e.jsx(s,{children:"soldByPolara"}),", ",e.jsx(s,{children:"site.ocppDashboard"}),","," ",e.jsx(s,{children:"connectivity"}),", ",e.jsx(s,{children:"isActive"}),","," ",e.jsx(s,{children:"installationDate"}),", ",e.jsx(s,{children:"warrantyEnd"}),","," ",e.jsx(s,{children:"warrantyDuration"}),", ",e.jsx(s,{children:"warrantyValid"}),","," ",e.jsx(s,{children:"serialNumber"}),", ",e.jsx(s,{children:"pedestal"}),","," ",e.jsx(s,{children:"carrier"}),", ",e.jsx(s,{children:"simIccid"}),","," ",e.jsx(s,{children:"ocppUsername"}),", ",e.jsx(s,{children:"ocppPassword"}),","," ",e.jsx(s,{children:"actions"}),")."]}),e.jsxs(r,{children:["Lecture/Ã©criture via"," ",e.jsx(s,{children:"api.system.queries.getColumnConfiguration"})," et"," ",e.jsx(s,{children:"api.system.mutations.setDefaultColumnConfiguration"})," ","(table Convex ",e.jsx(s,{children:"columnConfigurations"}),", indexÃ©e par"," ",e.jsx(s,{children:"pageId"})," et ",e.jsx(s,{children:"userId"}),")."]}),e.jsxs(r,{children:["Drag-and-drop fluide via ",e.jsx(s,{children:"<Reorder.Group>"})," ","(Framer Motion)."]}),e.jsxs(r,{children:["Toggle visibilitÃ© par ",e.jsx(s,{children:"<Checkbox>"}),"."]}),e.jsxs(r,{children:["Boutons ",e.jsx(n,{children:"Save"})," / ",e.jsx(n,{children:"Reset"})," + bandeau"," ",e.jsx(s,{children:"ShieldAlert"})," jaune avertissant que"," ",e.jsx(n,{children:"les changements s'appliquent Ã  tous les utilisateurs"})," ","(les utilisateurs ayant personnalisÃ© l'ordre conservent leur prÃ©fÃ©rence individuelle)."]})]}),e.jsx(i,{children:"Schema Convex (extrait) :"}),e.jsx(c,{language:"ts",children:`const columnConfigurations = defineTable({
20  userId: v.optional(v.id("users")),  // null = dÃ©faut org
21  pageId: v.string(),                  // "all-chargers", etc.
22  columns: v.array(columnConfigValidator),
23  isDefault: v.boolean(),
24  createdAt: v.number(),
25  updatedAt: v.number(),
26}).index("by_userId_pageId", ["userId", "pageId"])
27  .index("by_pageId_isDefault", ["pageId", "isDefault"]);`})]}),e.jsxs(t,{id:"surface-messagerie",title:"11a. Messagerie interne (/messages)",children:[e.jsxs(i,{children:["La page ",e.jsx(s,{children:"/messages"})," (",e.jsx(s,{children:"client/src/pages/messages.tsx"}),") est une vue scindÃ©e : volet liste ",e.jsx(s,{children:"w-80 lg:w-96"})," Ã  dÃ©filement propre + volet fil (paginÃ© par curseur via ",e.jsx(s,{children:"usePaginatedQuery"}

27),", sÃ©parateurs de journÃ©e, marquage lu automatique Ã  l'ouverture, Ã  l'arrivÃ©e de messages et au retour d'onglet). Sur mobile les deux volets s'empilent â la liste sans sÃ©lection, le fil avec chevron retour â pilotÃ© par la route ",e.jsx(s,{children:"/messages/:conversationId"}),". Chaque volet est une carte appariÃ©e"," ",e.jsx(s,{children:'"co-card"'})," ; les bulles utilisent"," ",e.jsx(s,{children:"co-card-inset"}),". L'icÃ´ne d'en-tÃªte (",e.jsx(s,{children:"messages-header-icon.tsx"}),") siÃ¨ge Ã  cÃ´tÃ© de la cloche sur l'en-tÃªte marine et suit sa rÃ¨gle : neutres"," ",e.jsx(s,{children:"text-gray-600 dark:text-slate-300"}),", pastille rouge du mÃªme gabarit que la cloche, comptant les"," ",e.jsx(n,{children:"conversations"})," non lues. Elle est montÃ©e dans les deux en-tÃªtes desktop qui portent la cloche â"," ",e.jsx(s,{children:"app-layout.tsx"}),", l'en-tÃªte propre de l'accueil (",e.jsx(s,{children:"pages/home.tsx"}),", hors ",e.jsx(s,{children:"AppLayout"}),"). Sur tÃ©lÃ©phone et tablette, c'est l'onglet BoÃ®te de rÃ©ception de la coquille tÃ©lÃ©phone qui compte les conversations non lues (section 14). Le compositeur rÃ©utilise"," ",e.jsx(s,{children:"MentionTextarea"})," (module billets) tel quel et y ajoute le sÃ©lecteur de rÃ©fÃ©rences (",e.jsx(s,{children:"reference-picker.tsx"}),", cmdk) : jetons ",e.jsx(s,{children:"[[ref:type:id]]"})," dans le texte, libellÃ©s figÃ©s cÃ´tÃ© serveur, puces ",e.jsx(s,{children:"reference-chip.tsx"})," menant aux pages canoniques (une borne pointe vers la page de son site)."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Deux entitÃ©s rÃ©pondent Ã  un nom qui n'est pas le leur"})," ","dans ",e.jsx(s,{children:"searchReferences"}),", parce que ce sont les noms qu'on a rÃ©ellement sous la main. Une ",e.jsx(n,{children:"borne"})," se trouve par son ",e.jsx(s,{children:"serialNumber"})," autant que par son nom : sous-chaÃ®ne repliÃ©e sur le bassin rÃ©cent, plus une sonde exacte sur l'index ",e.jsx(s,{children:"by_tenant_serialKey"})," (numÃ©ro rognÃ© et en minuscules, ",e.jsx(s,{children:"shared/charger-serial.ts"})," â toute casse d'un numÃ©ro Ã  casse mixte rÃ©pond ; bornes actives seulement, jusqu'au plafond par type ; CHARGEOPS-513) qui la ramÃ¨ne mÃªme hors de la fenÃªtre de 200 lignes â les rÃ©sultats exacts passent en tÃªte, et le libellÃ© de ligne devient"," ",e.jsx(s,{children:"nom Â· numÃ©ro de sÃ©rie Â· site"}),". Un"," ",e.jsx(n,{children:"site"})," se trouve par le nom de son"," ",e.jsx(n,{children:"organisation"})," : les organisations visibles (mÃªmes lignes que ",e.jsx(s,{children:"organizations.queries.list"}),", filtrÃ©es par portÃ©e) sont comparÃ©es Ã  la requÃªte, et les sites d'une organisation qui matche sont lus par"," ",e.jsx(s,{children:"by_organizationId"})," â pas par la fenÃªtre de rÃ©cence, qui Ã©carterait justement les sites anciens qu'on demande. L'ordre d'insertion fait l'ordre du rÃ©sultat : les matches sur le nom du site restent devant. Le mur de portÃ©e ne bouge pas :"," ",e.jsx(s,{children:"filterSitesByScope"})," s'applique aussi aux sites arrivÃ©s par l'organisation."]}),e.jsxs(i,{children:["Les lignes de site portent donc leur organisation (",e.jsx(s,{children:"organizationId"})," / ",e.jsx(s,{children:"organizationName"})," /"," ",e.jsx(s,{children:"organizationColor"}),") et sont rendues par"," ",e.jsx(s,{children:"SiteCommandItems"})," â"," ",e.jsx(n,{children:"les rangÃ©es mÃªmes du sÃ©lecteur de site de l'en-tÃªte"})," ",": en-tÃªte d'organisation (pastille, compteur, filet teintÃ©), tri alphabÃ©tique, repli sur liste plate sans organisation."," ",e.jsx(s,{children:"siteRowsFromHits"})," (exportÃ© pour les tests) fait la conversion et exige un ",e.jsx(n,{children:"nom"})," d'organisation, pas seulement un id : une organisation supprimÃ©e laisserait sinon un en-tÃªte vide â le site tombe dans Â«Â Non assignÃ©Â Â». Pas de"," ",e.jsx(s,{children:"onOrgSelect"})," ici : naviguer vers une page d'organisation en pleine rÃ©daction jetterait le brouillon. Le plafond des sites passe Ã  30 ",e.jsx(n,{children:"uniquement"})," quand le sÃ©lecteur est filtrÃ© sur Â«Â SitesÂ Â» ; sinon le plafond commun de 8 tient, sans quoi une grosse organisation repousserait bornes, cas et rapports hors de vue."]}),e.jsx(i,{children:"La v2 ajoute par-dessus :"}),e.jsxs(l,{children:[e.jsxs(r,{children:[e.jsx(n,{children:"Fil moderne"}

27)," : les messages consÃ©cutifs d'un mÃªme auteur (moins de 5 min) se groupent en un bloc, libellÃ©s Â«Â Aujourd'hui / HierÂ Â», sÃ©parateur Â«Â Nouveaux messagesÂ Â» au premier non-lu Ã  l'ouverture, pastille flottante de retour en bas avec compteur de nouveaux messages ; les actions de message restent visibles au tactile."," ",e.jsx(s,{children:"getConversation"})," renvoie ",e.jsx(s,{children:"null"})," (et non une erreur) pour un non-membre â Ã©tat Â«Â plus participantÂ Â» dans l'UI."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Onglets et archive"})," : Toutes / Non lues / ArchivÃ©es (archivage ",e.jsx(n,{children:"par membre"})," via"," ",e.jsx(s,{children:"conversationMembers.archivedAt"}),", dÃ©sarchivage automatique Ã  toute activitÃ©) + filtre client insensible aux accents sur la fenÃªtre chargÃ©e."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Recherche"})," : le champ du volet liste lance sur EntrÃ©e ",e.jsx(s,{children:"searchMessages"})," â premier"," ",e.jsx(s,{children:"searchIndex"})," Convex du dÃ©pÃ´t (",e.jsx(s,{children:"search_text"})," ","sur ",e.jsx(s,{children:"messages.text"}),", filtrÃ© ",e.jsx(s,{children:"tenantId"}),") ; les rÃ©sultats sont refiltrÃ©s en code par l'appartenance de l'appelant, surlignent l'extrait et ouvrent le fil au clic."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Brouillons"})," : localStorage"," ",e.jsx(s,{children:"messages.draft.<conversationId>"})," (hook"," ",e.jsx(s,{children:"use-local-storage-draft.ts"}),", TTL 14 jours, purge opportuniste des clÃ©s pÃ©rimÃ©es) â le brouillon survit au changement de fil."]}),e.jsxs(r,{children:[e.jsx(n,{children:"PrÃ©sence"})," : hook de battement de cÅur (~30 s, ~3 s pendant la saisie) vers"," ",e.jsx(s,{children:"convex/messages/presence.ts"})," ; la lecture considÃ¨re Â«Â en ligneÂ Â» sous 75 s et Â«Â en train d'Ã©crireÂ Â» sous 8 s (points verts sur les tÃªte-Ã -tÃªte, indicateur au-dessus du composeur, rangÃ©e Â«Â Vu parÂ Â» servie par la requÃªte dÃ©diÃ©e"," ",e.jsx(s,{children:"getReadReceipts"}),", couleurs d'avatar dÃ©rivÃ©es par hachage FNV-1a)."]}),e.jsxs(r,{children:[e.jsx(n,{children:"PiÃ¨ces jointes"})," : jusqu'Ã  6 images par message (trombone, glisser-dÃ©poser, collage), recompression JPEG cÃ´tÃ© client (20 Mo max), vignettes en bulle + visionneuse."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Liens profonds"})," : la page lit"," ",e.jsx(s,{children:"?ref=type:id"})," / ",e.jsx(s,{children:"?new=1"})," (boutons Â«Â DiscuterÂ Â» du tableau de bord de site et du dialogue de borne â la v3 les retire des pages cas / rapports ; âK Â«Â Nouveau messageÂ Â») â la rÃ©fÃ©rence est revalidÃ©e cÃ´tÃ© serveur (",e.jsx(s,{children:"resolveReference"}),") avant d'Ãªtre prÃ©-attachÃ©e au composeur. La page vÃ©rifie aussi le module cÃ´tÃ© client (module dÃ©sactivÃ© â Ã©tat d'accueil, pas d'erreur) et le titre de l'onglet du navigateur porte Â«Â (N)Â Â»."]})]}),e.jsx(i,{children:"La v3 ajoute :"}),e.jsxs(l,{children:[e.jsxs(r,{children:[e.jsx(n,{children:"RÃ©pondre / Ã©pingler / transfÃ©rer / planifier"})," : Â«Â RÃ©pondreÂ Â» pose une puce au-dessus du composeur (Ãchap annule) et la bulle (",e.jsx(s,{children:"message-bubble.tsx"}),") rend un bloc de citation dont le clic saute au message d'origine avec une pulsation de surbrillance ; ",e.jsx(s,{children:"pinned-strip.tsx"})," ","rend le bandeau des Ã©pingles au-dessus du fil (saut au clic) ;"," ",e.jsx(s,{children:"forward-dialog.tsx"})," + ",e.jsx(s,{children:"forward-handoff.ts"})," ","transportent texte et puces de rÃ©fÃ©rence vers le composeur prÃ©rempli de la conversation cible ; Â«Â Envoyer plus tardÂ Â» (prÃ©rÃ©glages 1 h / demain 9 h / personnalisÃ©) alimente une puce d'envois en attente avec annulation par entrÃ©e."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Envoi optimiste"})," : ",e.jsx(s,{children:"sendMessage"})," passe par ",e.jsx(s,{children:"insertAtTop"})," de ",e.jsx(s,{children:"convex/react"})," sur le cache paginÃ© de ",e.jsx(s,{children:"listMessages"})," (Ã©cho local, Ã©tat Â«Â envoiÂ Â» discret, retrait en cas d'Ã©chec) ; les rÃ©actions par"," ",e.jsx(s,{children:"optimisticallyUpdateValueInPaginatedQuery"}),"."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Lectures conditionnÃ©es Ã  la visibilitÃ©"})," : le marquage lu ne part que si"," ",e.jsx(s,{children:'document.visibilityState === "visible"'})," â un onglet d'arriÃ¨re-plan ne marque plus les fils comme lus, ne tue plus les courriels-rÃ©sumÃ©s et ne fabrique plus de Â«Â Vu parÂ Â»."]}),e.jsxs(r,{children:[e.jsxs(n,{children:["Lien profond ",e.jsx(s,{children:"?messageId="})]})," : les rÃ©sultats de recherche (",e.jsx(s,{children:"message-search.tsx"}),") ouvrent le fil directement sur le message trouvÃ© (dÃ©filement + pulsation) â mÃªme mÃ©canique de saut que les citations et les Ã©pingles."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Battement au repos"})," :"," ",e.jsx(s,{children:"use-messaging-presence.ts"})," cesse le battement aprÃ¨s 5 min sans interaction (",e.jsx(s,{children:"IDLE_AFTER_MS"}),") et reprend instantanÃ©ment Ã  la premiÃ¨re interaction ou au retour d'onglet ; les infobulles Â«Â Actif il y a X minÂ Â» lisent le"," ",e.jsx(s,{children:"lastSeen"})," exposÃ© par les requÃªtes de prÃ©sence (fenÃªtre 24 h)."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Panneau d'informations"})," :"," ",e.jsx(s,{children:"conversation-info-panel.tsx"})," â participants avec prÃ©sence en direct, grille des images partagÃ©es (ouvre la visionneuse), puces de rÃ©fÃ©rence partagÃ©es de la conversation."]}),e.jsxs(r,{children:[e.jsx(n,{children:"BoÃ®te de rÃ©ception"})," (",e.jsx(s,{children:"conversation-list.tsx"}),") : menu contextuel par ligne (lu / non lu, niveau de notification, archiver, quitter), pastille @ des mentions non lues, comptes sur les onglets, glissement-archivage au tactile."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Design"})," : bulle ",e.jsx(s,{children:"co-card-inset"})," Ã  queue asymÃ©trique, ses propres messages distinguÃ©s par un anneau indigo intÃ©rieur, libellÃ©s de journÃ©e collants au dÃ©filement, micro-animations d'entrÃ©e et de rÃ©action respectant"," ",e.jsx(s,{children:"prefers-reduced-motion"}),", pastilles de rÃ©action groupÃ©es avec compte, points de prÃ©sence Ã  anneau pulsÃ©, squelettes de chargement et Ã©tats vides plus accueillants, composeur auto-extensible avec voile de dÃ©pÃ´t et â pour rouvrir son dernier message en Ã©dition."]})]})]}

27),e.jsxs(t,{id:"kpi-clic-destination",title:"11b. Cartes KPI â clic vers la page source",children:[e.jsxs(i,{children:["Chaque carte KPI ouvre la page d'oÃ¹ vient son chiffre, sur les trois surfaces : la rangÃ©e de l'accueil (",e.jsx(s,{children:"components/home/home-kpi-row.tsx"}),"), celle du Portail opÃ©rateur (",e.jsx(s,{children:"components/portal/portal-kpi-row.tsx"}),") et les tuiles de ",e.jsx(s,{children:"/operations-dashboard"})," (",e.jsx(s,{children:"components/operations/kpi-tile.tsx"}),", prop optionnelle"," ",e.jsx(s,{children:"kpiId"})," passÃ©e par tous les appels de"," ",e.jsx(s,{children:"KpiTile"})," ; les enveloppes ",e.jsx(s,{children:"<Link>"})," ","Ã©crites Ã  la main ont Ã©tÃ© retirÃ©es)."]}),e.jsxs(l,{children:[e.jsxs(r,{children:[e.jsx(n,{children:"Une seule carte des destinations"})," :"," ",e.jsx(s,{children:"shared/kpis.ts::KPI_DESTINATIONS"})," est un"," ",e.jsx(s,{children:"Record<KpiId, KpiDestination>"})," complet (",e.jsx(s,{children:"path"}),", ",e.jsx(s,{children:"search"}),","," ",e.jsx(s,{children:"fallbackPath"}),", ",e.jsx(s,{children:"portalPath"}),","," ",e.jsx(s,{children:"portalSearch"}),") â ajouter un KPI sans dÃ©cider oÃ¹ il mÃ¨ne est une erreur de compilation, et une carte ne peut pas diverger de sa tuile jumelle."," ",e.jsx(s,{children:"search"})," prÃ©-filtre la page d'arrivÃ©e lÃ  oÃ¹ elle lit dÃ©jÃ  ses filtres dans l'URL (",e.jsx(s,{children:"/all-chargers?warranty=expired"}),","," ",e.jsx(s,{children:"/compliance?kpi=rsa_action|ntep_action"}),") ou consomme un paramÃ¨tre Ã  usage unique (",e.jsx(s,{children:"/support?view="}),")."]}),e.jsxs(r,{children:[e.jsx(n,{children:"RÃ©solution"})," :"," ",e.jsxs(s,{children:["resolveKpiHref(id, ","{ surface, isRouteEnabled }",")"]})," ","rend une adresse ou ",e.jsx(s,{children:"null"}),". Surface"," ",e.jsx(s,{children:'"portal"'})," : seulement ",e.jsx(s,{children:"portalPath"})," (+"," ",e.jsx(s,{children:"portalSearch"}),", que seule la carte Â« Garanties expirÃ©es Â» porte : ",e.jsx(s,{children:"/portal/fleet?warranty=expired"}),", CHARGEOPS-354) â les autres cartes de parc n'ont pas de page dans le portail et restent inertes, et l'argent n'y entre jamais. Surface"," ",e.jsx(s,{children:'"app"'})," : ",e.jsx(s,{children:"path"})," (+ ",e.jsx(s,{children:"search"}),"), sinon ",e.jsx(s,{children:"fallbackPath"})," (Â« Sites avec GDP Â» â"," ",e.jsx(s,{children:"/power-management"}),", repli ",e.jsx(s,{children:"/clients"}),"), sinon ",e.jsx(s,{children:"null"}),". Le hook"," ",e.jsx(s,{children:'hooks/use-kpi-href.ts::useKpiHref("app" | "portal")'})," ","branche ",e.jsx(s,{children:"useModuleAccess().isRouteEnabled"})," et le drapeau de ",e.jsx(s,{children:"/power-management"})," : une carte dont le module est dÃ©sactivÃ© reste inerte plutÃ´t que d'atterrir sur Â« module indisponible Â»."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Clic ou glissement"})," :"," ",e.jsx(s,{children:"SortableKpiGrid"})," (",e.jsx(s,{children:"kpi-row-kit.tsx"}),") reÃ§oit un ",e.jsx(s,{children:"hrefFor"})," optionnel. Un clic simple sur la carte navigue ; c'est le seuil de 6 px du ",e.jsx(s,{children:"PointerSensor"})," de dnd-kit qui distingue le clic du glissement."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Garde contre la remontÃ©e des portails"})," : le menu de remplacement est rendu dans un portail Radix, mais React fait remonter ses clics le long de l'arbre de composants, pas du DOM. Le ",e.jsx(s,{children:"onClick"})," de la carte ignore donc toute cible que le DOM de la carte ne contient pas, ainsi que tout ce qui se trouve dans ",e.jsx(s,{children:"[data-kpi-no-nav]"})," (les contrÃ´les de survol)."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Chemin clavier"})," : ",e.jsx(s,{children:"Enter"}),"/",e.jsx(s,{children:"Space"})," sur la carte appartiennent au glisser-dÃ©poser clavier de dnd-kit. La pastille de survol Ã  flÃ¨che (",e.jsx(s,{children:"ArrowUpRight"}),", vrai ",e.jsx(s,{children:"<Link>"}),","," ",e.jsx(s,{children:'data-testid="link-open-kpi-<id>"'}),") est donc le chemin du clavier, du clic du milieu et du Ctrl/â + clic."]}),e.jsxs(r,{children:[e.jsxs(n,{children:["ParamÃ¨tre ",e.jsx(s,{children:"?view="})," Ã  usage unique"]})," :"," ",e.jsx(s,{children:"lib/support-view-param.ts::parseSupportView"})," accepte"," ",e.jsx(s,{children:"mine | attention | closed"}),". Les filtres de"," ",e.jsx(s,{children:"pages/support-tickets.tsx"})," sont de l'Ã©tat local, pas de l'URL : la page consomme le paramÃ¨tre une fois au montage, le rejoue par son ",e.jsx(s,{children:"applyView"})," (",e.jsx(s,{children:"mineOnly"})," / ",e.jsx(s,{children:"attentionOnly"})," / statuts du groupe fermÃ©), puis le retire de l'URL, de sorte qu'un rafraÃ®chissement ou un retour arriÃ¨re ne l'applique pas par-dessus les choix de l'utilisateur. ",e.jsx(s,{children:"?new=1"})," ","(l'action de crÃ©ation Â« Nouveau billet Â» : + du tÃ©lÃ©phone, + du rail tablette, âK) est retirÃ© de la mÃªme faÃ§on, mais lu par"," ",e.jsx(s,{children:"useSearch()"})," de wouter plutÃ´t qu'une fois au montage : il ouvre donc le dialogue mÃªme quand /support est dÃ©jÃ  affichÃ© et que seule la requÃªte change ; le chemin"," ",e.jsx(s,{children:"?new=1&siteId="})," du premier montage attend toujours la vÃ©rification du site."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Tests"})," :"," ",e.jsx(s,{children:"shared/__tests__/kpi-destinations.test.ts"}),","," ",e.jsx(s,{children:"components/kpi/__tests__/kpi-row-kit.test.tsx"}),","," ",e.jsx(s,{children:"lib/__tests__/support-view-param.test.ts"}),"."]})]})]})]}),e.jsxs(o,{id:"partie-2",title:"Partie 2 â Mobile et responsive",children:[e.jsxs(t,{id:"strategie-responsive",title:"12. StratÃ©g

27ie responsive",children:[e.jsxs(l,{children:[e.jsxs(r,{children:[e.jsx(n,{children:"Mobile-first"})," : Tailwind breakpoints standard (",e.jsx(s,{children:"sm: 640px"}),", ",e.jsx(s,{children:"md: 768px"}),","," ",e.jsx(s,{children:"lg: 1024px"}),", ",e.jsx(s,{children:"xl: 1280px"}),","," ",e.jsx(s,{children:"2xl: 1536px"}),")."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Uniquement basÃ© sur la largeur"})," (CHARGEOPS-385) :"," ",e.jsx(s,{children:"useViewport()"})," renvoie"," ",e.jsx(s,{children:'"phone" | "tablet" | "desktop"'})," Ã  partir de deux"," ",e.jsx(s,{children:"matchMedia"})," (",e.jsx(s,{children:"PHONE_MAX = 639"}),","," ",e.jsx(s,{children:"TABLET_MAX = 1023"}),") â un Chrome desktop redimensionnÃ© en dessous de ",e.jsx(s,{children:"1024 px"})," bascule lui aussi en layout mobile, il n'y a plus de vÃ©rification"," ",e.jsx(s,{children:"pointer: coarse"}),"."]}),e.jsxs(r,{children:["Le CSS contient Ã©galement des rÃ¨gles"," ",e.jsx(s,{children:"@media (max-width: 768px)"})," pour la classe"," ",e.jsx(s,{children:".mobile-hide-nav"})," et ",e.jsx(s,{children:".mobile-compact"}),"."]})]}),e.jsx(u,{headers:["Breakpoint","Usage typique"],rows:[[e.jsx(s,{children:"sm: 640px"}),"Affiche labels longs, padding plus gÃ©nÃ©reux"],[e.jsx(s,{children:"md: 768px"}),"Layout 2 colonnes pour formulaires"],[e.jsx(s,{children:"lg: 1024px"}),e.jsxs(e.Fragment,{children:[e.jsx(n,{children:"FrontiÃ¨re mobile/desktop"})," cÃ´tÃ© JS"]})],[e.jsx(s,{children:"xl: 1280px"}),"Layouts dashboard 3+ colonnes"],[e.jsx(s,{children:"2xl: 1536px"}),e.jsxs(e.Fragment,{children:[e.jsx(s,{children:"max-w-screen-2xl"})," pour le header desktop"]})]]})]}),e.jsxs(t,{id:"use-is-mobile",title:"13. DÃ©tection mobile â useViewport / useIsMobile",children:[e.jsxs(i,{children:["Fichier : ",e.jsx(s,{children:"client/src/hooks/use-mobile.tsx"}),"."]}),e.jsx(c,{language:"ts",children:'export function getViewport(): Viewport {\n  if (window.matchMedia(`(max-width: ${PHONE_MAX}px)`).matches) return "phone";\n  if (window.matchMedia(`(max-width: ${TABLET_MAX}px)`).matches) return "tablet";\n  return "desktop";\n}\n// useIsMobile() = useViewport() !== "desktop"\n// useIsPhoneViewport() = useViewport() === "phone"'}),e.jsxs(l,{children:[e.jsxs(r,{children:["Lecture ",e.jsx(n,{children:"synchrone"})," dÃ¨s le premier rendu (",e.jsx(s,{children:"useState<Viewport>(getViewport)"}),") : contrairement Ã  l'ancienne version, il n'y a pas de flash desktop avant qu'un effet ne dÃ©tecte l'Ã©cran rÃ©el."]}),e.jsxs(r,{children:["Ãcoute ",e.jsx(s,{children:"change"})," sur les deux ",e.jsx(s,{children:"MediaQueryList"})," ","(",e.jsx(s,{children:"PHONE_MAX"}),", ",e.jsx(s,{children:"TABLET_MAX"}),") et nettoie au dÃ©montage."]}),e.jsxs(r,{children:[e.jsx(s,{children:"useIsMobile()"}),' reste la vÃ©rification "pas desktop" utilisÃ©e dans ',e.jsx(s,{children:"app-layout.tsx"}),","," ",e.jsx(s,{children:"pages/home.tsx"}),", ",e.jsx(s,{children:"pwa-install-banner.tsx"}),","," ",e.jsx(s,{children:"configuration.tsx"}),", etc."," ",e.jsx(s,{children:"useIsPhoneViewport()"})," est le repli plus Ã©troit (",e.jsx(s,{children:'"phone"'})," seulement) pour les quelques Ã©crans dont le layout mobile ne tient pas Ã  la largeur d'une tablette (640-1023 px) â par exemple la grille de calendrier de maintenance, qui bascule en agenda uniquement sur tÃ©lÃ©phone."]})]})]}),e.jsxs(t,{id:"my-day-redirect",title:"ArrivÃ©e des techniciens sur Ma journÃ©e (CHARGEOPS-121)",children:[e.jsxs(i,{children:["La rÃ¨gle vit dans ",e.jsx(s,{children:"client/src/lib/my-day-preference.ts"})," ","(",e.jsx(s,{children:"landsOnMyDay(role)"})," : ",e.jsx(s,{children:'role === "technician"'})," ","et pas d'opt-out sur l'appareil) et s'applique Ã  deux endroits, sur tous les appareils â plus de condition de largeur d'Ã©cran."]}),e.jsxs(l,{children:[e.jsxs(r,{children:[e.jsx(n,{children:"Connexion"})," â ",e.jsx(s,{children:"auth-page.tsx"})," envoie vers ",e.jsx(s,{children:"/my-day"})," au lieu de ",e.jsx(s,{children:"/"}),". Un scan en attente, le portail d'un opÃ©rateur de site et le retour vers Â« Synchronisation en attente Â» passent avant."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Ouverture de l'application sur /"})," â"," ",e.jsx(s,{children:"client/src/components/home-or-my-day.tsx"}),", montÃ© par ",e.jsx(s,{children:"App.tsx"})," sur ",e.jsx(s,{children:"/"}),", rend"," ",e.jsx(s,{children:'<Redirect to="/my-day" replace />'})," (avec"," ",e.jsx(s,{children:"replace"})," â sans quoi le bouton PrÃ©cÃ©dent du navigateur boucle sur la redirection) seulement si"," ",e.jsx(s,{children:"shouldRedirectColdOpenToMyDay(role)"})," est vrai : la page a dÃ©marrÃ© sur ",e.jsx(s,{children:"/"})," (",e.jsx(s,{children:"BOOT_PATH"}),", capturÃ© au chargement du module) et l'arrivÃ©e n'a pas encore Ã©tÃ© dÃ©cidÃ©e. Le premier rendu de ",e.jsx(s,{children:"/"})," et la connexion appellent ",e.jsx(s,{children:"markMyDayLandingDone()"})," : la pastille Tableau de bord et le logo mÃ¨nent ensuite Ã  ",e.jsx(s,{children:"Home"}),"."]}),e.jsxs(r,{children:["L'interrupteur Â« Ouvrir l'accueil Ã  la place Â», affichÃ© dans l'en-tÃªte de"," ",e.jsx(s,{children:"/my-day"}),", Ã©crit une clÃ©"," ",e.jsx(s,{children:"chargeops:my-day:prefer-home"})," dans le"," ",e.jsx(s,{children:"localStorage"})," de l'appareil (",e.jsx(s,{children:"client/src/lib/my-day-preference.ts"}),") ; sa prÃ©sence court-circuite la redirection. Lecture et Ã©criture sont chacune enveloppÃ©es d'un ",e.jsx(s,{children:"try

27/catch"})," â un"," ",e.jsx(s,{children:"localStorage"})," indisponible (navigation privÃ©e, quota, politique du navigateur) dÃ©grade silencieusement vers Â« pas d'opt-out Â» plutÃ´t que de faire Ã©chouer le rendu."]}),e.jsx(r,{children:"Aucun autre rÃ´le n'est jamais redirigÃ©."})]})]}),e.jsxs(t,{id:"my-day-completed",title:"Ma journÃ©e â carte Â« TerminÃ©s aujourd'hui Â»",children:[e.jsxs(i,{children:["RequÃªte : ",e.jsx(s,{children:"convex/myDay/queries.ts::getMyCompletedReports"})," ","(",e.jsx(s,{children:"tenantQuery"}),"), lue par ",e.jsx(s,{children:"CompletedSection"})," ","dans ",e.jsx(s,{children:"client/src/pages/my-day.tsx"})," sous son propre"," ",e.jsx(s,{children:"ErrorBoundary"}),", entre les brouillons et les cas."]}),e.jsxs(l,{children:[e.jsxs(r,{children:["Renvoie"," ",e.jsx(s,{children:"{ serviceReports, maintenanceReports, cases }"})," ; chaque type de rapport vaut ",e.jsx(s,{children:"null"})," sans"," ",e.jsx(s,{children:"createServiceReport"})," /"," ",e.jsx(s,{children:"createMaintenanceReport"}),", et ",e.jsx(s,{children:"cases"})," sans"," ",e.jsx(s,{children:"viewTickets"})," (module dÃ©sactivÃ© compris), et la rÃ©ponse entiÃ¨re vaut ",e.jsx(s,{children:"null"})," pour les rÃ´les finance et site-operator. La carte n'est masquÃ©e que si les trois parties sont ",e.jsx(s,{children:"null"}),"."]}),e.jsxs(r,{children:["Deux index dÃ©diÃ©s :"," ",e.jsx(s,{children:"serviceReports.by_tenant_technician_status_serviceDate"})," ","et ",e.jsx(s,{children:"maintenanceReports.by_tenant_author_status_visitDate"})," ","(",e.jsx(s,{children:"tenantId"}),", auteur, ",e.jsx(s,{children:"status"}),", date de travail). La lecture garde ",e.jsx(s,{children:'status === "final"'})," sur la fenÃªtre [aujourd'hui UTC â 1, aujourd'hui + 2[ â borne haute exclusive, car ",e.jsx(s,{children:"visitDate"})," peut porter un suffixe"," ",e.jsx(s,{children:"Tâ¦"})," â plafonnÃ©e Ã  50 lignes par type avec"," ",e.jsx(s,{children:"truncated"}),"."]}),e.jsxs(r,{children:["Le serveur ne connaÃ®t que sa date UTC : c'est le client qui ne garde que les lignes dont la ",e.jsx(s,{children:"date"})," est sa date locale, mÃªme raisonnement que ",e.jsx(s,{children:"getMyVisits"}),". Â« TerminÃ© aujourd'hui Â» dÃ©signe la date de travail (",e.jsx(s,{children:"serviceDate"})," / ",e.jsx(s,{children:"visitDate"}),"), pas l'instant de la finalisation â ",e.jsx(s,{children:"serviceReports"})," n'en garde aucun horodatage."]}),e.jsxs(r,{children:["Rapports supprimÃ©s (",e.jsx(s,{children:"deletedAt"}),") exclus, sites hors de la portÃ©e d'organisation filtrÃ©s, comme pour"," ",e.jsx(s,{children:"getMyDrafts"}),". Tri par heure de dÃ©but ; une ligne ouvre"," ",e.jsx(s,{children:"/service-reports/:id"})," ou"," ",e.jsx(s,{children:"/maintenance-reports/:id"}),". Le total alimente le Â« Â· N rapports terminÃ©s Â» du rÃ©sumÃ© de l'en-tÃªte."]}),e.jsxs(r,{children:[e.jsx(s,{children:"cases"})," (CHARGEOPS-403) : les cas que l'appelant a"," ",e.jsx(n,{children:"crÃ©Ã©s"})," (",e.jsx(s,{children:"createdBy"}),", pas l'assignÃ© â c'est ",e.jsx(s,{children:"getMyCases"}),"), lus par l'index"," ",e.jsx(s,{children:"supportTickets.by_tenant_createdBy_createdAt"})," ","(",e.jsx(s,{children:"tenantId"}),", ",e.jsx(s,{children:"createdBy"}),","," ",e.jsx(s,{children:"createdAt"}),") sur [minuit UTC d'aujourd'hui â 1, minuit UTC d'aujourd'hui + 2[, du plus rÃ©cent au plus ancien, plafonnÃ©s Ã  50 avec ",e.jsx(s,{children:"truncated"}),". Cette fenÃªtre contient tous les minuits locaux (UTCâ12 Ã  UTC+14) : le client ne garde que les cas dont ",e.jsx(s,{children:"createdAt"})," tombe dans sa date locale. Cas supprimÃ©s (",e.jsx(s,{children:"deletedAt"}),") et fusionnÃ©s (",e.jsx(s,{children:"mergedIntoTicketId"}),") exclus, cas fermÃ©s conservÃ©s, sites hors portÃ©e filtrÃ©s. Chaque ligne renvoie numÃ©ro, titre, statut, site et ",e.jsx(s,{children:"createdAt"}),", ouvre"," ",e.jsx(s,{children:"/support/:id"})," et se place parmi les rapports Ã  son heure locale de crÃ©ation (sur 24 h dans les deux langues) ; leur nombre alimente Â« Â· N cas crÃ©Ã©s Â» dans le rÃ©sumÃ©, sÃ©parÃ©ment des rapports."]})]})]}),e.jsxs(t,{id:"header-mobile",title:"14. Coquille tÃ©lÃ©phone",children:[e.jsxs(i,{children:[e.jsx(s,{children:"client/src/components/shell/"})," (S1.3, CHARGEOPS-386) â"," ",e.jsx(s,{children:"phone-shell.tsx"}),", ",e.jsx(s,{children:"top-bar.tsx"}),","," ",e.jsx(s,{children:"tab-bar.tsx"}),", ",e.jsx(s,{children:"create-sheet.tsx"}),","," ",e.jsx(s,{children:"nav-menu.tsx"}),", ",e.jsx(s,{children:"pin-tab-dialog.tsx"}),","," ",e.jsx(s,{children:"use-keyboard-open.ts"}),","," ",e.jsx(s,{children:"use-shell-nav.ts"}),", plus"," ",e.jsx(s,{children:"client/src/hooks/use-pinned-tabs.ts"})," et deux fonctions pures dans ",e.jsx(s,{children:"client/src/lib/nav/"})," :"," ",e.jsx(s,{children:"tabs.ts"})," et ",e.jsx(s,{children:"back-target.ts"}),". Elle remplace l'ancien ",e.jsx(s,{children:"mobile-header.tsx"}),", supprimÃ©."]}

27),e.jsxs(i,{children:[e.jsx(n,{children:"Quelle coquille s'affiche."})," ",e.jsx(s,{children:"AppLayout"})," et l'accueil (",e.jsx(s,{children:"/"}),","," ",e.jsx(s,{children:"/sites/:siteId"}),") rendent"," ",e.jsx(s,{children:'<PhoneChrome surface="app" />'})," (barre du haut, barre d'onglets, menu â°) dÃ¨s que"," ",e.jsx(s,{children:'useViewport() === "phone"'})," (",e.jsx(s,{children:"< 640 px"}),") ; la tablette (640â1023 px) reÃ§oit ",e.jsx(s,{children:"TabletShell"})," et son rail de navigation Ã  la place â voir 14b ci-dessous. C'est un"," ",e.jsx(n,{children:"voisin"})," de la page, pas une enveloppe : les deux mises en page gardent un seul arbre et n'Ã©changent que le chrome (et le rembourrage ",e.jsx(s,{children:"PHONE_CONTENT_CLASS"})," du conteneur), si bien que franchir 1024 px â tourner un iPad â ne remonte jamais la page et ne perd pas un formulaire Ã  moitiÃ© rempli. Ã partir de"," ",e.jsx(s,{children:"1024 px"}),", le header desktop ne change pas. L'accueil ne rend son propre header que sur desktop ; sur tÃ©lÃ©phone, son sÃ©lecteur de site passe en haut de la page dans une"," ",e.jsx(s,{children:"co-card"}),", et l'accueil monte sa propre palette de commandes. Le portail opÃ©rateur reÃ§oit la mÃªme coquille â voir 14d."]}),e.jsxs(l,{children:[e.jsxs(r,{children:[e.jsx(n,{children:"Barre du haut"})," (",e.jsx(s,{children:"top-bar.tsx"}),") â marine (",e.jsx(s,{children:"bg-[var(--brand-header-bg)]"}),"), fixe, hauteur"," ",e.jsx(s,{children:"--chrome-h-mobile"})," (56 px + la zone sÃ©curisÃ©e du haut). Ã gauche, â° sur une page de premier niveau ou â sur une page intÃ©rieure :"," ",e.jsx(s,{children:"backTarget(location, language, hasInAppHistory)"})," ","renvoie ",e.jsx(s,{children:"null"})," quand ",e.jsx(s,{children:"buildCrumbs"})," ne trouve aucun ancÃªtre (et pour ",e.jsx(s,{children:"/sites/:siteId"}),", l'accueil avec un site choisi, via ",e.jsx(s,{children:"TOP_LEVEL_PATTERNS"}),"), ",e.jsx(s,{children:'{ kind: "history" }'})," quand l'entrÃ©e d'en dessous appartient Ã  l'application â chaque entrÃ©e d'historique porte sa profondeur dans"," ",e.jsx(s,{children:"history.state"})," (0 pour l'entrÃ©e d'ouverture, +1 Ã  chaque push, conservÃ©e au replace, relue au popstate, donc gardÃ©e au rechargement), et ",e.jsx(s,{children:"useInAppHistory()"})," vaut"," ",e.jsx(s,{children:"profondeur > 0"})," â sinon le href du dernier fil d'Ariane â un lien profond ne sort donc jamais de l'application. Au centre, le titre de ",e.jsx(s,{children:"useSetPageMeta"}),", qui est le"," ",e.jsx(n,{children:"seul"})," ",e.jsx(s,{children:"h1"})," de la page (tronquÃ© ; l'attribut ",e.jsx(s,{children:"title"})," le montre en entier). Ã droite, ",e.jsx(s,{children:'<ConnectivityPill surface="navy" />'})," et un bouton de recherche qui appelle ",e.jsx(s,{children:"openCommandPalette()"})," ","(un Ã©vÃ©nement window que la palette Ã©coute, en plus de âK)."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Barre d'onglets"})," (",e.jsx(s,{children:"tab-bar.tsx"}),") â fixe en bas, hauteur ",e.jsx(s,{children:"--tabbar-h-visible"})," (64 px + la zone sÃ©curisÃ©e du bas). Trois onglets de rÃ´le issus de"," ",e.jsx(s,{children:"resolveTabs(tabRoleFor(ctx, surface), nav.all, topLevelPins(pinned, language))"})," ","oÃ¹ ",e.jsx(s,{children:"pinned"})," vient de"," ",e.jsx(s,{children:"usePinnedTabs(surface).pinned"})," (Ã©pinglage, section 14c), chacun sous son libellÃ© court ",e.jsx(s,{children:"tabLabel"})," (",e.jsx(s,{children:"nav.tab.*"}),"). L'",e.jsx(s,{children:"aria-label"})," commence par ce libellÃ© visible, ajoute le nom complet s'il diffÃ¨re, puis le badge â"," ",e.jsx(s,{children:"tabAccessibleName(label, fullLabel, badge)"})," dans"," ",e.jsx(s,{children:"shell/tab-accessible-name.ts"}),", partagÃ© avec le rail (Â« RÃ©ception, BoÃ®te de rÃ©ception (5) Â», Â« Entretien, Rapports de maintenance Â» ; WCAG 2.5.3 Ãtiquette dans le nom, pour que la commande vocale trouve l'onglet par ce qu'il affiche), puis la boÃ®te de rÃ©ception (",e.jsx(s,{children:"/inbox"}),","," ",e.jsx(s,{children:"/portal/inbox"})," dans le portail) avec un badge"," ",e.jsx(s,{children:"useInboxUnread().total"}),", affichÃ© ",e.jsx(s,{children:"9+"})," ","au-delÃ  de 9. Le ",e.jsx(n,{children:"+"})," surÃ©levÃ© se place entre les onglets 2 et 3 et n'est pas rendu quand l'utilisateur n'a aucune action de crÃ©ation. L'onglet actif est en"," ",e.jsx(s,{children:"text-primary dark:text-brand-200"})," avec"," ",e.jsx(s,{children:'aria-current="page"'}),". La coquille dÃ©monte la barre sur les pages intÃ©rieures et tant que le clavier virtuel est ouvert (",e.jsx(s,{children:"useKeyboardOpen()"}

27)," : hauteur du"," ",e.jsx(s,{children:"visualViewport"})," sous 75 % de la fenÃªtre). MontÃ©e, elle pose ",e.jsx(s,{children:"--tabbar-h"})," sur ",e.jsx(s,{children:"<html>"}),", contre lequel le conteneur de contenu de la mise en page (un simple ",e.jsx(s,{children:"div"}),", pas un ",e.jsx(s,{children:"main"})," : plusieurs pages ont le leur) se rembourre via ",e.jsx(s,{children:"PHONE_CONTENT_CLASS"})," ; les surcouches globales du bas (",e.jsx(s,{children:"aboveBottomBar()"})," : banniÃ¨res stockage plein et installation, bouton de l'assistant ChargeOps AI) et les boutons d'action de Toutes les bornes se placent au-dessus ; la variable revient Ã  ",e.jsx(s,{children:"0px"})," au dÃ©montage."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Feuille de crÃ©ation"})," (",e.jsx(s,{children:"create-sheet.tsx"}),") â un ",e.jsx(s,{children:"Sheet"})," du bas avec une poignÃ©e et une grille de deux colonnes de liens"," ",e.jsx(s,{children:"co-tile"})," construite Ã  partir des"," ",e.jsx(s,{children:"createActions"})," du registre (dÃ©jÃ  filtrÃ©es par permission et par module). Le + pivote de 45Â° en â tant qu'elle est ouverte."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Menu â°"})," (",e.jsx(s,{children:"nav-menu.tsx"}),") â un"," ",e.jsx(s,{children:"Sheet"})," Ã  gauche (",e.jsx(s,{children:"w-[85vw] max-w-sm"}),") : la carte utilisateur (initiales, nom, ",e.jsx(s,{children:"roleLabelFor()"})," ","partagÃ© avec ",e.jsx(s,{children:"profile-menu.tsx"}),", locataire), une recherche dans les ",e.jsx(s,{children:"menuSections"})," qui ignore accents et casse (",e.jsx(s,{children:"foldForSearch"}),") et retire les sections vides, toutes les sections (Accueil et Ma journÃ©e ouvrent OpÃ©rations via"," ",e.jsx(s,{children:"menuLead"}),", menu â° seulement ; titres en ",e.jsx(s,{children:"h3"})," : le titre de la feuille est le ",e.jsx(s,{children:"h2"})," du dialogue) avec leur pastille ADMIN / SUPER, et un pied avec FR / EN, le bouton de thÃ¨me, le changement de mot de passe et la dÃ©connexion (via"," ",e.jsx(s,{children:"useSignOutGuard"}),", plus Â« Se dÃ©connecter de ClÃ©o partout Â» quand l'IdP est configurÃ©). Chaque entrÃ©e de premier niveau qui n'est pas un onglet fixe (l'onglet 1 ou la boÃ®te de rÃ©ception) porte un bouton â¯ de 44 Ã 44 px (",e.jsx(s,{children:"button-pin-<href>"}),") et rÃ©pond aussi Ã  un appui long de 500 ms sur la ligne ; les deux ouvrent"," ",e.jsx(s,{children:"PinTabDialog"})," (section 14c). Une page intÃ©rieure â une entrÃ©e dont la page a un ancÃªtre dans le fil d'Ariane, comme Facturation des correctifs sous Rapports de service ou ÃchÃ©ances sous le Centre de maintenance (",e.jsx(s,{children:"isTopLevelPage(href, language)"})," faux, le mÃªme test que ",e.jsx(s,{children:"backTarget"}),") â n'a ni l'un ni l'autre : Ã©pinglÃ©e, elle cacherait la barre d'onglets dÃ¨s qu'on touche son propre onglet."]})]}),e.jsx(u,{headers:["RÃ´le","Onglet 1","Onglet 2 (â repli)","Onglet 3 (â repli)"],rows:[["technician",e.jsx(s,{children:"/my-day â /"}),e.jsx(s,{children:"/all-chargers â /service-reports"}),e.jsx(s,{children:"/support â /maintenance-reports â /rma"})],["admin, user",e.jsx(s,{children:"/"}),e.jsx(s,{children:"/support â /rma â /service-reports"}),e.jsx(s,{children:"/all-chargers â /clients"})],["finance",e.jsx(s,{children:"/"}),e.jsx(s,{children:"/service-reports â /license-management â /rma"}),e.jsx(s,{children:"/clients â /all-chargers"})],["site-operator (portail)",e.jsx(s,{children:"/portal"}),e.jsx(s,{children:"/portal/cases â /portal/maintenance-reports"}),e.jsx(s,{children:"/portal/service-reports â /portal/maintenance-reports"})]]}),e.jsxs(i,{children:["Le premier candidat visible par l'utilisateur (permission, module, route) l'emporte ; un emplacement sans candidat est retirÃ© et la barre se rÃ©espace. Le personnel plateforme reÃ§oit les onglets de son rÃ´le de locataire. Tests :"," ",e.jsx(s,{children:"lib/nav/__tests__/tabs.test.ts"}),","," ",e.jsx(s,{children:"lib/nav/__tests__/back-target.test.ts"}),","," ",e.jsx(s,{children:"components/shell/__tests__/phone-shell.test.tsx"}),","," ",e.jsx(s,{children:"components/shell/__tests__/pin-tabs.test.tsx"})," ;"," ",e.jsx(s,{children:"chrome-and-list-stats.test.ts"})," fixe la hauteur de la barre d'onglets sur le jeton."]})]}),e.jsxs(t,{id:"inbox-mobile",title:"14a. BoÃ®te de rÃ©ception unifiÃ©e (Inbox)",children:[e.jsxs(i,{children:[e.jsx(s,{children:"client/src/pages/inbox.tsx"})," (S1.4, CHARGEOPS-387) â montÃ©e sur ",e.jsx(s,{children:"/inbox"})," et ",e.jsx(s,{children:"/portal/inbox"}),", rÃ©servÃ©e aux tÃ©lÃ©phones/tablettes (",e.jsx(s,{children:"useIsMobile()"})," ","faux â ",e.jsx(s,{children:"<Redirect>"})," vers ",e.jsx(s,{children:"/messages"})," ","(ou ",e.jsx(s,{children:"/notifications"})," si la messagerie est indisponible, ou ",e.jsx(s,{children:"/portal/notifications"})," cÃ´tÃ© portail) plutÃ´t que de monter la coquille segmentÃ©e)."]}),e.jsxs(l,{children:[e.jsxs(r,{children:["RÃ©unit deux surfaces jusqu'ici sÃ©parÃ©es : la liste de la cloche et les conversations de ",e.jsx(s,{children:"/messages"}),". Sur tÃ©lÃ©phone, un ",e.jsx(s,{children:"co-card"})," porte un sÃ©lecteur Ã  deux options (",e.jsx(s,{children:'role="tablist"'})," / ",e.jsx(s,{children:'role="tab"'})," /"," ",e.jsx(s,{children:"aria-selected"}),") Â« Notifications | Messages Â» â le segment Messages n'existe mÃªme pas quand"," ",e.jsx(s,{children:'!isSiteOperator && can.viewMessages && isModuleEnabled("messaging")'})," ","est faux (mÃªme garde que ",e.jsx(s,{children:"MessagesHeaderIcon"}),")."]}),e.jsxs(r,{children:[e.jsx(s,{children:"InboxList"})," (",e.jsx(s,{children:"client/src/components/notifications/inbox-list.tsx"}),") est le corps du popover de la cloche, extrait verbatim :"," ",e.jsx(s,{children:"<NotificationBell>"})," ne garde que le trigger, le badge et le ",e.jsx(s,{children:"<Popover>"}),", et rend"," ",e.jsx(s,{children:"<InboxList onNavigate={() => setOpen(false)} />"}),". ",e.jsx(s,{children:'variant="popover"'})," (dÃ©faut) reproduit exactement l'ancien rendu (boÃ®te de dÃ©filement ",e.jsx(s,{children:"max-h-96"}),", lignes ",e.jsx(s,{children:"py-2.5"}),", titre ",e.jsx(s,{children:"text-sm"}),") ;"," ",e.jsx(s,{children:'variant="page"'})," retire le plafond de hauteur, agrandit les lignes (",e.jsx(s,{children:"py-3.5"}),", titre ",e.jsx(s,{children:"text-base"}),") et colle l'en-tÃªte (",e.jsx(s,{children:"sticky top-0"}),"). Les fonctions pures ",e.jsx(s,{children:"itemTitle"}),"/",e.jsx(s,{children:"itemBody"})," vivent maintenant ici ; ",e.jsx(s,{children:"notification-bell.tsx"}

27)," les rÃ©-exporte pour que son test existant reste inchangÃ©. Barre d'outils (CHARGEOPS-627) : sur tÃ©lÃ©phone (",e.jsx(s,{children:"useIsPhoneViewport()"}),"), Â« Tout marquer lu Â» et Â« Tout supprimer Â» passent dans un menu â¯ (",e.jsx(s,{children:"nav.moreActions"}),", Supprimer en"," ",e.jsx(s,{children:"co-text-negative"}),") â Ã  cÃ´tÃ© du titre et de l'engrenage, elles tenaient sur trois lignes sous le"," ",e.jsx(s,{children:"sticky top-0"})," (~125Â px de chrome collant Ã  375Â px). Tablette et desktop gardent la rangÃ©e de boutons. Â« Tout supprimer Â» ouvre partout un ",e.jsx(s,{children:"AlertDialog"})," (",e.jsx(s,{children:"notificationsCenter.deleteAllTitle"})," /"," ",e.jsx(s,{children:"deleteAllConfirm"}),") : ",e.jsx(s,{children:"removeAll"})," ne part qu'Ã  la confirmation, Annuler ne supprime rien. Tests :"," ",e.jsx(s,{children:"notifications/__tests__/inbox-list-toolbar.test.tsx"}),"."]}),e.jsxs(r,{children:[e.jsx(s,{children:"useInboxUnread()"})," (mÃªme fichier) â les compteurs de non-lus des deux segments :"," ",e.jsx(s,{children:"notifications = getUnreadCount().count"}),","," ",e.jsx(s,{children:"messages = getUnreadSummary().conversations"})," ","interrogÃ© seulement sous la mÃªme garde que ci-dessus (sinon"," ",e.jsx(s,{children:'"skip"'})," â 0). DÃ©termine le segment initial : Messages si des messages non lus existent et aucune notification, sinon Notifications â recalculÃ© Ã  chaque rendu (pas figÃ© au montage) tant que l'utilisateur n'a pas cliquÃ© un onglet."]}),e.jsxs(r,{children:["Panneau Messages : ",e.jsx(s,{children:"ConversationList"})," (",e.jsx(s,{children:"components/messages/conversation-list.tsx"}),"), les mÃªmes props que ",e.jsx(s,{children:"pages/messages.tsx"})," lui passe ; choisir une conversation navigue vers"," ",e.jsx(s,{children:"/messages/:id"}),"."]})]})]}),e.jsxs(t,{id:"tablet-rail-mobile",title:"14b. Rail de navigation tablette",children:[e.jsxs(i,{children:[e.jsx(s,{children:"client/src/components/shell/"})," (S1.5, CHARGEOPS-388) â"," ",e.jsx(s,{children:"tablet-shell.tsx"}),", ",e.jsx(s,{children:"nav-rail.tsx"})," et un hook extrait de la barre d'onglets tÃ©lÃ©phone,"," ",e.jsx(s,{children:"use-shell-tabs.ts"})," (",e.jsx(s,{children:"useShellTabs(surface)"})," ","â ",e.jsx(s,{children:"{ tabs, inbox, createActions }"}),"), consommÃ© Ã  la fois par ",e.jsx(s,{children:"TabBar"})," et ",e.jsx(s,{children:"NavRail"})," pour que les deux chromes ne rÃ©solvent jamais la liste d'onglets de deux faÃ§ons diffÃ©rentes."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Quelle coquille s'affiche."})," ",e.jsx(s,{children:"AppLayout"})," et l'accueil rendent"," ",e.jsx(s,{children:'<TabletShell surface="app" />'})," dÃ¨s que"," ",e.jsx(s,{children:'useViewport() === "tablet"'})," (640â1023 px) au lieu de ",e.jsx(s,{children:"PhoneChrome"})," ; sous 640 px le tÃ©lÃ©phone garde la barre d'onglets, et Ã  partir de ",e.jsx(s,{children:"1024 px"})," le header desktop ne change pas. Comme ",e.jsx(s,{children:"PhoneChrome"}),","," ",e.jsx(s,{children:"TabletShell"})," ne rend que du chrome â un"," ",e.jsx(n,{children:"voisin"})," de la page, jamais une enveloppe autour d'elle â si bien que les trois mises en page gardent un seul arbre et n'Ã©changent que le chrome (et le rembourrage"," ",e.jsx(s,{children:"TABLET_CONTENT_CLASS"})," du conteneur) ; franchir un palier ne remonte jamais la page et ne perd pas un formulaire Ã  moitiÃ© rempli. Ce rembourrage vaut"," ",e.jsx(s,{children:"pl-[calc(72px+var(--safe-left))] pr-[var(--safe-right)]"})," ","â la largeur du rail Ã©crite avec le mÃªme calc plutÃ´t que"," ",e.jsx(s,{children:"var(--rail-w)"}),", qui n'est posÃ© qu'une fois l'effet de mise en page du rail exÃ©cutÃ© (aucun flash sous le rail) ; la barre du haut porte aussi"," ",e.jsx(s,{children:"pr-[var(--safe-right)]"})," sur tÃ©lÃ©phone et tablette. Il n'y a pas de barre d'onglets sur tablette, donc ",e.jsx(s,{children:"--tabbar-h"})," reste Ã  ",e.jsx(s,{children:"0px"}),"."]}),e.jsxs(l,{children:[e.jsxs(r,{children:[e.jsx(n,{children:"Rail de navigation"}

27)," (",e.jsx(s,{children:"nav-rail.tsx"}),") â fixe Ã  gauche, ",e.jsx(s,{children:"w-[calc(72px+var(--safe-left))]"})," ","avec ",e.jsx(s,{children:"pl-[var(--safe-left)]"})," (border-box : la colonne d'icÃ´nes garde 72 px et dÃ©gage l'encoche d'un iPhone Ã  l'horizontale), pleine hauteur, marine (",e.jsx(s,{children:"bg-[var(--brand-header-bg)]"}),"). Les mÃªmes trois onglets de rÃ´le et le mÃªme emplacement Inbox que la barre d'onglets tÃ©lÃ©phone (",e.jsx(s,{children:"useShellTabs"}),"), chacun un lien de 56 px de haut (",e.jsx(s,{children:"h-14"}),") avec l'icÃ´ne et un libellÃ© ",e.jsx(s,{children:"text-2xs"})," (10 px) dessous ; l'actif est"," ",e.jsx(s,{children:"bg-white/15 text-white"})," avec"," ",e.jsx(s,{children:'aria-current="page"'}),", les autres"," ",e.jsx(s,{children:"text-white/70"}),". Sous eux, le mÃªme"," ",e.jsx(n,{children:"+"})," surÃ©levÃ© (ouvrant ",e.jsx(s,{children:"CreateSheet"}),", ici centrÃ© comme une carte flottante via un"," ",e.jsx(s,{children:"className"})," supplÃ©mentaire plutÃ´t que la feuille pleine largeur du tÃ©lÃ©phone) quand l'utilisateur a une action de crÃ©ation, dans une zone"," ",e.jsx(s,{children:"flex-1 min-h-0 overflow-y-auto"})," qui se compacte sous"," ",e.jsx(s,{children:"max-height:480px"})," (un tÃ©lÃ©phone en paysage reÃ§oit toujours le rail Ã  ",e.jsx(s,{children:"â¥ 640px"})," de large) ; son propre â° est un frÃ¨re ",e.jsx(s,{children:"shrink-0"})," placÃ© APRÃS cette zone plutÃ´t qu'un enfant ",e.jsx(s,{children:"mt-auto"})," Ã  l'intÃ©rieur, ouvrant le mÃªme ",e.jsx(s,{children:"NavMenu"})," que la coquille tÃ©lÃ©phone â il ne peut donc jamais sortir de l'Ã©cran par dÃ©filement. Tant qu'il est montÃ©, le rail publie aussi son empreinte (",e.jsx(s,{children:"calc(72px + var(--safe-left))"}),") sous"," ",e.jsx(s,{children:"--rail-w"})," sur ",e.jsx(s,{children:"<html>"})," (0px le reste du temps, mÃªme schÃ©ma que ",e.jsx(s,{children:"--tabbar-h"}),") : une barre fixe pleine largeur ailleurs (la barre de sauvegarde de l'assistant de maintenance, la barre d'actions groupÃ©es des billets, la banniÃ¨re d'installation PWA, la pastille repliÃ©e de la banniÃ¨re stockage plein) la lit pour commencer ou se centrer aprÃ¨s le rail plutÃ´t que de peindre sur ses icÃ´nes et son â°. Sur tÃ©lÃ©phone, la barre d'actions groupÃ©es des billets monte aussi de la hauteur de la barre d'onglets et de la place que publie le bouton de l'assistant (",e.jsx(s,{children:"bottom-[calc(var(--tabbar-h)+1.5rem+var(--co-assistant-launcher-h,0px))]"}),") : /support garde la barre d'onglets montÃ©e pendant une sÃ©lection."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Barre du haut dÃ©calÃ©e."})," ",e.jsx(s,{children:"TopBar"})," a gagnÃ© deux props : ",e.jsx(s,{children:"inset"})," Ã©change son"," ",e.jsx(s,{children:"inset-x-0"})," pour ",e.jsx(s,{children:"left-[var(--rail-w)] right-0"})," ","â l'empreinte rÃ©elle du rail, pas un ",e.jsx(s,{children:"72px"})," ","littÃ©ral, pour ne jamais dÃ©river de la largeur du rail lui-mÃªme â et ",e.jsxs(s,{children:["showMenuButton=","{false}"]})," cache son propre â° sur une page de premier niveau (celui du rail porte ce rÃ´le sur tablette) â le â sur une page intÃ©rieure ne change pas, puisque le rail lui-mÃªme ne se dÃ©monte jamais."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Pied de page pleine largeur Ã  cÃ´tÃ© du rail"})," â"," ",e.jsx(s,{children:"<Footer fullBleed />"})," sort de sa page avec"," ",e.jsx(s,{children:"w-screen left-1/2 -translate-x-1/2"}),", centrÃ© sur son parent. Sur tablette ce parent est dÃ©calÃ© Ã  droite du rail : une bande de 100vw dÃ©bordait d'un demi-rail (36Â px) Ã  droite et Ã©tait rognÃ©e. Il y vaut"," ",e.jsx(s,{children:"sm:max-lg:w-[calc(100vw-var(--rail-w)-var(--safe-right))]"})," ","â la largeur de la zone de contenu (la page est dÃ©calÃ©e du rail Ã  gauche et de ",e.jsx(s,{children:"--safe-right"})," Ã  droite), qui, centrÃ©e sur le mÃªme parent, va exactement du rail au bord droit, ou Ã  l'encoche en paysage (CHARGEOPS-607)."," ",e.jsx(s,{children:"--rail-w"})," plutÃ´t que le calc littÃ©ral, puisqu'il vaut 0px partout oÃ¹ aucun rail n'est montÃ©. TÃ©lÃ©phone et desktop gardent ",e.jsx(s,{children:"w-screen"}),"."]})]}),e.jsxs(i,{children:["Tests :"," ",e.jsx(s,{children:"components/shell/__tests__/tablet-shell.test.tsx"})," ","(nombre d'onglets du rail, pas de barre d'onglets en bas, le â de la barre du haut sur une page intÃ©rieure, un seul"," ",e.jsx(s,{children:"h1"}),") ; la propriÃ©tÃ© d'arbre unique est Ã©tendue dans ",e.jsx(s,{children:"phone-shell.test.tsx"})," (tÃ©lÃ©phone â desktop â tablette garde un formulaire Ã  moitiÃ© rempli)."]})]}),e.jsxs(t,{id:"pin-tabs-mobile",title:"14c. Ãpingler une page Ã  la barre d'onglets",children:[e.jsxs(i,{children:["Spec Â§5.7, CHARGEOPS-390. Backend :"," ",e.jsx(s,{children:"convex/nav/preferences.ts"})," (S1.7a) â table"," ",e.jsx(s,{children:"userNavPreferences"}

27)," (une ligne par utilisateur,"," ",e.jsx(s,{children:"PER_USER_TABLES"}),"), ",e.jsx(s,{children:"getMine"}),","," ",e.jsxs(s,{children:["setPinnedTabs(","{ pinnedTabs }",")"]})," (au plus 2 entrÃ©es, aucun doublon, chacune commenÃ§ant par"," ",e.jsx(s,{children:"/"}),") et ",e.jsx(s,{children:"resetMine"}),". Le serveur ne vÃ©rifie pas l'accÃ¨s Ã  la page : une Ã©pingle obsolÃ¨te ou non autorisÃ©e est filtrÃ©e cÃ´tÃ© client (ci-dessous) et ne peut donc jamais afficher une page interdite â les routes restent protÃ©gÃ©es par"," ",e.jsx(s,{children:"ProtectedRoute"})," comme aujourd'hui. Il ne sait pas non plus quelles pages sont intÃ©rieures : ",e.jsx(s,{children:"useShellTabs"})," ","et ",e.jsx(s,{children:"usePinnedTabs"})," passent tous deux le tableau stockÃ© par ",e.jsx(s,{children:"topLevelPins(pinned, language)"})," (",e.jsx(s,{children:"lib/nav/tabs.ts"}),"), qui vide sur place une Ã©pingle de page intÃ©rieure â son emplacement retombe sur le dÃ©faut du rÃ´le et l'autre Ã©pingle garde le sien â pour qu'une Ã©pingle enregistrÃ©e avant que le menu â° cesse de proposer les pages intÃ©rieures ne cache jamais la barre d'onglets."]}),e.jsxs(i,{children:["Client : ",e.jsx(s,{children:"client/src/hooks/use-pinned-tabs.ts"})," â"," ",e.jsx(s,{children:"usePinnedTabs(surface)"})," combine"," ",e.jsx(s,{children:"useQuery(api.nav.preferences.getMine)"})," et deux"," ",e.jsx(s,{children:"useMutation(...).withOptimisticUpdate(...)"})," (",e.jsx(s,{children:"setPinnedTabs"}),", ",e.jsx(s,{children:"resetMine"}),", les deux patchant directement le cache de ",e.jsx(s,{children:"getMine"}),", donc la barre d'onglets change avant le retour du serveur). Il expose ",e.jsx(s,{children:"pinned"})," (le tableau du serveur),"," ",e.jsx(s,{children:"currentTabs"})," (ce que les onglets 2 et 3 affichent rÃ©ellement en ce moment, via la nouvelle"," ",e.jsx(s,{children:"resolveTabSlots"})," de ",e.jsx(s,{children:"lib/nav/tabs.ts"})," â la mÃªme rÃ¨gle que ",e.jsx(s,{children:"resolveTabs"}),", mais qui garde chaque emplacement adressable par son nom mÃªme quand il est retirÃ©) et"," ",e.jsx(s,{children:"pin(slot, href)"})," : ",e.jsx(s,{children:"0"})," â onglet 2,"," ",e.jsx(s,{children:"1"})," â onglet 3, rÃ©solu contre ",e.jsx(s,{children:"currentTabs"})," ","(jamais le tableau brut, potentiellement obsolÃ¨te, du serveur) : si ",e.jsx(s,{children:"href"})," occupe dÃ©jÃ  l'emplacement visÃ©, ne rien envoyer (silencieux, pas de toast) ; s'il occupe l'",e.jsx(n,{children:"autre"})," emplacement, Ã©changer les deux au lieu de laisser un dÃ©-doublonnage naÃ¯f faire disparaÃ®tre l'un des deux ; sinon, remplacer l'emplacement visÃ© et garder l'autre tel quel."]}),e.jsxs(i,{children:[e.jsx(s,{children:"PinTabDialog"})," (",e.jsx(s,{children:"client/src/components/shell/pin-tab-dialog.tsx"}),") â un"," ",e.jsx(s,{children:"Sheet"})," du bas ouvert par le bouton â¯ / l'appui long du menu â° (section 14) : deux boutons Â« Remplacer"," ","{libellÃ© court de l'onglet 2 / 3 actuel}"," Â» et un bouton texte Â« Revenir aux onglets par dÃ©faut Â». Un succÃ¨s affiche un toast (",e.jsx(s,{children:"nav.pin.done"}),") et referme la feuille ; une erreur affiche ",e.jsx(s,{children:"common.error"})," +"," ",e.jsx(s,{children:"getErrorMessage(e)"})," en ",e.jsx(s,{children:"destructive"}),"."]}),e.jsxs(i,{children:["Tests : ",e.jsx(s,{children:"components/shell/__tests__/pin-tabs.test.tsx"})," ","(le â¯ ouvre la feuille, Â« Remplacer Support Â» appelle"," ",e.jsx(s,{children:"setPinnedTabs"})," avec"," ",e.jsx(s,{children:'["/rma", "/all-chargers"]'}),", la barre reflÃ¨te la nouvelle Ã©pingle une fois la requÃªte simulÃ©e mise Ã  jour,"," ",e.jsx(s,{children:"resetMine"})," cÃ´tÃ© Â« Revenir aux onglets par dÃ©faut Â», les onglets fixes et les pages intÃ©rieures n'ont ni â¯ ni appui long, et une Ã©pingle de page intÃ©rieure dÃ©jÃ  enregistrÃ©e retombe sur le dÃ©faut du rÃ´le, dans la barre comme dans les libellÃ©s Â« Remplacer â¦ Â» de la feuille)."]})]}),e.jsxs(t,{id:"portal-shell-mobile",title:"14d. Portail opÃ©rateur sur tÃ©lÃ©phone et tablette",children:[e.jsxs(i,{children:[e.jsx(s,{children:"client/src/components/portal/portal-layout.tsx"})," (S1.6, CHARGEOPS-389) â sous 1024 px, ",e.jsx(s,{children:"PortalLayout"})," rend la mÃªme coquille que ",e.jsx(s,{children:"AppLayout"})," :"," ",e.jsx(s,{children:'<PhoneChrome surface="portal" />'})," sous 640 px,"," ",e.jsx(s,{children:'<TabletShell surface="portal" />'})," de 640 Ã  1023 px. MÃªme rÃ¨gle d'arbre unique : le chrome et l'en-tÃªte desktop sont des alternatives dans des emplacements fixes autour du mÃªme ",e.jsx(s,{children:"<main>"}),", et seules les classes de la racine changent (",e.jsx(s,{children:"PHONE_CONTENT_CLASS"})," /"," ",e.jsx(s,{children:"TABLET_CONTENT_CLASS"})," ajoutÃ©es sous 1024 px) ; franchir un palier ne remonte donc jamais la page. Ã partir de 1024 px, l'en-tÃªte marine, les pastilles et le filtre de site ne changent pas."]}),e.jsxs(l,{children:[e.jsxs(r,{children:[e.jsx(n,{children:"Onglets."})," ",e.jsx(s,{children:'useShellTabs("portal")'})," â"," ",e.jsx(s,{children:'tabRoleFor(ctx, "portal")'})," ="," ",e.jsx(s,{children:"siteOperator"})," : ",e.jsx(s,{children:"/portal"})," Â·"," ",e.jsx(s,{children:"/portal/cases"})," (repli"," ",e.jsx(s,{children:"/portal/maintenance-reports"}),") Â· + Â·"," ",e.jsx(s,{children:"/portal/service-reports"})," Â· BoÃ®te de rÃ©ception â"," ",e.jsx(s,{children:"/portal/inbox"}),". Le badge ne compte que les notifications : ",e.jsx(s,{children:"canMessage"})," est toujours faux pour un exploitant, et la page Inbox du portail n'a pas de segment Messages."]}),e.jsxs(r,{children:[e.jsx(n,{children:"+."})," ",e.jsx(s,{children:"PORTAL_CREATE_ACTIONS"})," â Nouveau cas (",e.jsx(s,{children:"/portal/cases?new=1"}),", gate"," ",e.jsx(s,{children:"can.viewTickets"}),") et Scanner une borne (",e.jsx(s,{children:"/scan"}),"). ",e.jsx(s,{children:"pages/portal/cases.tsx"})," consomme"," ",e.jsx(s,{children:"?new=1"})," via ",e.jsx(s,{children:"useSearch()"})," : il ouvre"," ",e.jsx(s,{children:"CreateTicketDialog"})," puis retire le paramÃ¨tre avec"," ",e.jsx(s,{children:"replace"})," â aussi quand l'exploitant est dÃ©jÃ  sur la liste, oÃ¹ seule la requÃªte change (mÃªme route, pas de remontage)."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Menu â°."})," ",e.jsx(s,{children:"usePortalNav().menuSections"})," â la section du portail (Mon Ã©quipe seulement pour un Org-Admin, ",e.jsx(s,{children:"isOrgAdmin"}),") et Compte (",e.jsx(s,{children:"/portal/notifications"}),")."," ",e.jsx(s,{children:"NavMenu"})," a gagnÃ© une prop ",e.jsx(s,{children:"top"}),", transmise par la prop ",e.jsx(s,{children:"menuTop"})," de ",e.jsx(s,{children:"PhoneChrome"})," /"," ",e.jsx(s,{children:"TabletShell"}),", rendue sous la carte utilisateur et au-dessus de la recherche. Le portail y place son"," ",e.jsx(s,{children:"SiteCombobox"})," (libellÃ© ",e.jsx(s,{children:"portal.siteFilter"})," ","reliÃ© par ",e.jsx(s,{children:"aria-labelledby"}),", popover Ã  la largeur du dÃ©clencheur) branchÃ© sur le mÃªme magasin"," ",e.jsx(s,{children:"usePortalSiteFilter"})," que celui de l'en-tÃªte desktop : la rÃ©clamation par utilisateur et le nettoyage d'un site pÃ©rimÃ© restent dans ",e.jsx(s,{children:"PortalLayout"}),", rien n'est dupliquÃ©. La recherche du menu filtre les pages, jamais le filtre de site."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Pages de premier niveau."})," ",e.jsx(s,{children:"buildCrumbs"})," donne l'accueil du portail comme fil Ã  toute page ",e.jsx(s,{children:"/portal/<section>"})," ;"," ",e.jsx(s,{children:"backTarget"}

27)," les traite pourtant comme des pages de premier niveau (",e.jsx(s,{children:"TOP_LEVEL_PATTERNS"}),", comme"," ",e.jsx(s,{children:"/sites/:siteId"}),"), si bien que â° et les onglets s'y affichent. â n'apparaÃ®t qu'en dessous :"," ",e.jsx(s,{children:"/portal/cases/:id"})," revient Ã "," ",e.jsx(s,{children:"/portal/cases"})," sans historique dans l'app."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Titre."})," Chaque page de liste du portail appelle"," ",e.jsx(s,{children:"useSetPageMeta"})," (le libellÃ© de son entrÃ©e de navigation, ",e.jsx(s,{children:"portal.title"})," sur la vue d'ensemble) pour alimenter le ",e.jsx(s,{children:"<h1>"})," de la barre du haut ; les pages de dÃ©tail partagÃ©es le faisaient dÃ©jÃ , et l'en-tÃªte desktop garde son propre ",e.jsx(s,{children:"<h1>"}),"."]}),e.jsxs(r,{children:["Le confinement de ",e.jsx(s,{children:"protected-route.tsx"})," ne change pas. Balayage : aucune page sous ",e.jsx(s,{children:"/portal/*"})," ni les pages de dÃ©tail partagÃ©es (rapport d'intervention, rapport d'entretien, cas, historique de borne) n'ont de barre fixe en bas ou pleine largeur Ã  dÃ©caler â seule la visionneuse photo, un calque plein Ã©cran ",e.jsx(s,{children:"inset-0"}),"."]})]}),e.jsxs(i,{children:["Tests :"," ",e.jsx(s,{children:"components/portal/__tests__/portal-mobile-shell.test.tsx"})," ","(onglets, actions +, filtre de site et Mon Ã©quipe dans â°, â vers la liste, badge sans messages, un seul ",e.jsx(s,{children:"h1"}),", desktop inchangÃ©, pas de remontage d'un palier Ã  l'autre),"," ",e.jsx(s,{children:"pages/portal/__tests__/cases-new-param.test.tsx"})," et"," ",e.jsx(s,{children:"lib/nav/__tests__/back-target.test.ts"}),"."]})]}),e.jsxs(t,{id:"dialogs-adaptatifs",title:"14e. FenÃªtres adaptatives",children:[e.jsxs(i,{children:[e.jsx(s,{children:"client/src/components/ui/dialog.tsx"})," et"," ",e.jsx(s,{children:"alert-dialog.tsx"})," (S2.2, CHARGEOPS-507) rÃ©solvent un"," ",e.jsx(n,{children:"mode de prÃ©sentation"})," une seule fois Ã  l'ouverture et le gardent jusqu'Ã  la fermeture, pour qu'une rotation du tÃ©lÃ©phone ne remplace jamais l'arbre d'une fenÃªtre ouverte sous son propre piÃ¨ge Ã  focus â le rÃ©solveur pur est ",e.jsx(s,{children:"client/src/components/ui/dialog-mode.ts"})," ","et sa fonction"," ",e.jsx(s,{children:"resolveDialogMode(viewport, mobileProp, className, isAlertDialog)"})," :"]}),e.jsxs(l,{children:[e.jsxs(r,{children:[e.jsx(s,{children:'viewport !== "phone"'})," â ",e.jsx(s,{children:'"modal"'})," : chemin Radix + Framer Motion d'aujourd'hui, inchangÃ© au caractÃ¨re prÃ¨s."]}),e.jsxs(r,{children:["Sur tÃ©lÃ©phone, une ",e.jsx(s,{children:"AlertDialog"})," rÃ©sout toujours vers"," ",e.jsx(s,{children:'"action"'})," ; la prop explicite"," ",e.jsx(s,{children:'mobile="sheet" | "fullscreen"'})," d'un"," ",e.jsx(s,{children:"Dialog"})," prime sur l'infÃ©rence par className ; sinon une className ",e.jsx(s,{children:"max-w-2xl"})," ou plus large donne"," ",e.jsx(s,{children:'"fullscreen"'}),", sinon ",e.jsx(s,{children:'"sheet"'}),"."]})]}),e.jsxs(i,{children:["Sur tÃ©lÃ©phone, les deux passent par ",e.jsx(s,{children:"Drawer.Root"}),"/",e.jsx(s,{children:"Content"})," de ",e.jsx(s,{children:"vaul"})," plutÃ´t que par la fenÃªtre centrÃ©e de Radix : une ",e.jsx(s,{children:'"sheet"'})," est une feuille du bas qu'on peut glisser (grandit jusqu'Ã "," ",e.jsx(s,{children:"92dvh"}),", puis le corps dÃ©file) ; un panneau"," ",e.jsx(s,{children:'"fullscreen"'})," n'a pas de glissement, avec une barre du haut collante (â Â· titre Â· le premier enfant du pied de page, reflÃ©tÃ© comme action principale via un marqueur"," ",e.jsx(s,{children:"data-dialog-primary-action"})," posÃ© par"," ",e.jsx(s,{children:"DialogFooter"}),") ; le mode ",e.jsx(s,{children:'"action"'})," ","d'une ",e.jsx(s,{children:"AlertDialog"})," est une feuille du bas avec le balisage Annuler/Action d'aujourd'hui inchangÃ© (son"," ",e.jsx(s,{children:"flex-col-reverse"})," empile dÃ©jÃ  l'action au-dessus d'Annuler sous 640 px â rien Ã  rÃ©Ã©crire lÃ ). Cette feuille porte ",e.jsx(s,{children:'style={{ pointerEvents: "auto" }}'})," ","(CHARGEOPS-627) : le ",e.jsx(s,{children:"Drawer.Content"})," de vaul est une couche Radix imbriquÃ©e DANS ",e.jsx(s,{children:"AlertDialogPrimitive.Content"}),", les deux s'inscrivent dans le mÃªme commit, l'enfant d'abord, et Radix donnait donc Ã  la feuille"," ",e.jsx(s,{children:"pointer-events: none"})," â un toucher sur Annuler ou l'action tombait sur le voile, et la feuille (non refermable par geste) restait ouverte. Radix Ã©tale"," ",e.jsx(s,{children:"props.style"})," aprÃ¨s sa propre valeur, donc celle-ci gagne. Test : ",e.jsx(s,{children:"ui/__tests__/alert-dialog-phone-taps.test.tsx"}),"."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Confirmation d'abandon"})," (spec Â§6.3) : un"," ",e.jsx(s,{children:"Dialog"})," suit l'Ã©tat Â« modifiÃ© Â» Ã  partir des Ã©vÃ©nements ",e.jsx(s,{children:"input"}),"/",e.jsx(s,{children:"change"})," qui remontent, via une ref-callback (pas un effet indexÃ© sur l'objet ref â le ",e.jsx(s,{children:"Portal"})," de Radix monte un rendu en retard, Ã  dessein, pour la sÃ©curitÃ© SSR, et un effet qui lit"," ",e.jsx(s,{children:"ref.current"})," Ã  ce premier rendu encore vide n'a jamais de seconde chance de s'attacher). Glisser, toucher le fond, â et Ãchap sur une feuille ou un plein Ã©cran modifiÃ© ouvrent une petite feuille d'action Â« Voulez-vous abandonner vos modifications ? Â» (",e.jsx(s,{children:"Continuer la modification"})," /"," ",e.jsx(s,{children:"Abandonner"}),", les deux via ",e.jsx(s,{children:"t()"}),") ; fermer par les propres boutons de la fenÃªtre (l'appelant qui met sa prop contrÃ´lÃ©e ",e.jsx(s,{children:"open"})," Ã  faux, par exemple aprÃ¨s un enregistrement rÃ©ussi) ne demande jamais rien."," ",e.jsxs(s,{children:["confirmDiscard=","{false}"]})," permet de s'en exclure. Le geste de glissement est dÃ©sactivÃ© d'emblÃ©e tant que c'est modifiÃ© (",e.jsx(s,{children:"data-vaul-no-drag"})," sur tout le contenu de la feuille) plutÃ´t que de laisser un relÃ¢chement de glissement se terminer puis d'essayer de l'annuler â vaul n'a rien pour remettre la transformation Ã  sa place une fois le relÃ¢chement dÃ©jÃ  dÃ©clenchÃ©."]}),e.jsxs(i,{children:[e.jsx(n,{children:"SÃ©lecteurs imbriquÃ©s"})," (spec Â§6.4) :"," ",e.jsx(s,{children:"SelectContent"})," et ",e.jsx(s,{children:"PopoverContent"})," portent"," ",e.jsx(s,{children:"data-vaul-no-drag"}),". Un toucher Ã  l'intÃ©rieur d'un portail Radix remonte quand mÃªme comme un Ã©vÃ©nement synthÃ©tique React Ã  travers ce qui a rendu le propriÃ©taire du portail â mÃªme si le nÅud DOM lui-mÃªme vit dans un autre sous-arbre â donc sans l'attribut, ouvrir un"," ",e.jsx(s,{children:"Select"})," Ã  l'intÃ©rieur d'une feuille sur tÃ©lÃ©phone s'enregistrerait comme le dÃ©but d'un glissement pour fermer. ",e.jsx(s,{children:"vaul"})," vÃ©rifie exactement cet attribut via ",e.jsx(s,{children:"hasAttribute"}),"/",e.jsx(s,{children:"closest"})," avant de dÃ©marrer un glissement."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Fond relevÃ©"})," (CHARGEOPS-379) :"," ",e.jsx(s,{children:"AlertDialogContent"})," accepte"," ",e.jsx(s,{children:"overlayClassName"}),", appliquÃ© au fond dans les deux formes (fenÃªtre centrÃ©e et feuille). Il sert Ã  la rare alerte qui doit s'empiler au-dessus d'une autre couche fixe â la confirmation de suppression d'une conversation, au-dessus du panneau de l'assistant (",e.jsx(s,{children:"z-[65]"}),") : son fond monte avec elle au lieu de rester Ã  ",e.jsx(s,{children:"z-50"})," sous le panneau."]}),e.jsxs(i,{children:["Tests : ",e.jsx(s,{children:"ui/__tests__/dialog-mode.test.ts"})," (la table du rÃ©solveur) et ",e.jsx(s,{children:"ui/__tests__/dialog-modes.test.tsx"})," ","(structure feuille / plein Ã©cran / action, la confirmation d'abandon avec et sans champ modifiÃ©, l'action principale reflÃ©tÃ©e dans la barre du haut en plein Ã©cran, un"," ",e.jsx(s,{children:"Select"})," imbriquÃ© qui s'ouvre et choisit Ã  l'intÃ©rieur d'une feuille, et un instantanÃ© de classes prouvant que la fenÃªtre modale desktop est inchangÃ©e)."]})]}),e.jsxs(t,{id:"listes-adaptatives",title:"14f. Listes et filtres adaptatifs",children:[e.jsxs(i,{children:[e.jsx(s,{children:"client/src/components/lists/responsive-list.tsx"})," et"," ",e.jsx(s,{children:"filter-bar.tsx"})," (S2.3, CHARGEOPS-508) sont le rendu tÃ©lÃ©phone de la table d'une page : sur tablette et desktop,"," ",e.jsx(s,{children:"ResponsiveList"})," rend sa prop ",e.jsx(s,{children:"desktop"})," (la table existante) sans y toucher ; sur tÃ©lÃ©phone, elle rend des fiches ",e.jsx(s,{children:".co-card"})," en une colonne (â¥ 64 px,"," ",e.jsx(s,{children:"@tanstack/react-virtual"})," au-delÃ  de 60 lignes), avec balayage (pointeurs tactiles seulement, jusqu'Ã  2 actions par cÃ´tÃ©, chaque action aussi dans un menu â¯) et sÃ©lection en masse par appui long. LÃ  oÃ¹ l'appui long sÃ©lectionne, la fiche porte ",e.jsx(s,{children:"select-none [-webkit-touch-callout:none]"})," et annule ",e.jsx(s,{children:"contextmenu"})," (la paire de"," ",e.jsx(s,{children:"nav-menu.tsx"}),") : le maintien n'ouvre jamais aussi le menu de lien du navigateur ; une liste sans sÃ©lection par appui long le garde. Chaque nouvel appui efface le drapeau Â« appui long dÃ©clenchÃ© Â» : le toucher suivant un appui long tactile (qui ne finit par aucun clic) bascule la fiche, et le clic qui suit un appui long Ã  la souris reste avalÃ© ; la minuterie de 500 ms est effacÃ©e au dÃ©montage (CHARGEOPS-604)."," ",e.jsx(s,{children:"sectionFor"})," groupe les fiches sous un en-tÃªte collant (utilisÃ© par le pilote Rapports de service pour ses bandes de mois) â dÃ©sactive la virtualisation quand il est fourni, groupage et fenÃªtrage ne se composent pas dans cette version."]}),e.jsxs(i,{children:[e.jsx(s,{children:"FilterBar"})," fait le mÃªme partage : sur tablette/desktop"," ",e.jsx(s,{children:"children"})," (le panneau de filtres existant de la page) rend inchangÃ© ; sur tÃ©lÃ©phone elle affiche sa propre recherche, une rangÃ©e de 3 Ã  5 puces rapides dÃ©finies par la page, et une puce Â« Filtres (n) Â» qui ouvre une feuille (S2.2) contenant"," ",e.jsx(s,{children:"children"})," avec Appliquer/RÃ©initialiser â la page garde son Ã©tat de filtre existant, sans Ã©tat intermÃ©diaire sÃ©parÃ©. La feuille passe ",e.jsxs(s,{children:["confirmDiscard=","{false}"]})," Ã  la fenÃªtre partagÃ©e : Appliquer/RÃ©initialiser possÃ¨dent dÃ©jÃ  Â« est-ce que quelque chose a changÃ© ? Â» pour un panneau de filtres, donc la confirmation d'abandon de la fenÃªtre (Â§14e) n'ajoute jamais une seconde demande Â« Voulez-vous abandonner vos modifications ? Â» par-dessus. Une prop optionnelle"," ",e.jsx(s,{children:"sheetChildren"})," permet Ã  une page de fournir une version de son panneau de filtres sans le champ de recherche pour le corps de la feuille, pour que la recherche de la barre compacte au-dessus ne soit jamais dupliquÃ©e â les deux pilotes l'utilisent. Une prop ",e.jsx(s,{children:"compact?: boolean"})," force la prÃ©sentation tÃ©lÃ©phone mÃªme hors d'un vrai viewport tÃ©lÃ©phone, pour le volet liste de 320 px de la sÃ©paration liste/dÃ©tail sur tablette (Â§14h) : les deux pilotes passent"," ",e.jsxs(s,{children:["compact=","{forcePhoneCards}"]}),"."]}),e.jsxs(i,{children:["Tirer vers le bas en haut de la liste au-delÃ  de 72 px (",e.jsx(s,{children:"usePullToResync"}),","," ",e.jsx(s,{children:"client/src/hooks/use-pull-to-resync.ts"}),") force une reconnexion Convex et vide la file hors ligne, puis affiche Â« Ã  jour Â» ou Â« hors ligne â synchronisera au retour Â». La liste porte ",e.jsx(s,{children:"overscroll-behavior-y: contain"}),". Â« En haut Â» se lit sur le vrai dÃ©fileur (CHARGEOPS-614) :"," ",e.jsx(s,{children:"window.scrollY"})," sur tÃ©lÃ©phone, le"," ",e.jsx(s,{children:"scrollTop"})," du volet liste dans la sÃ©paration tablette. Avant, le hook lisait la div de la liste, toujours Ã  0 : glisser vers le bas pour remonter une page dÃ©jÃ  dÃ©filÃ©e armait la resynchronisation et son toast."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Fiches mesurÃ©es, un seul Â« SÃ©lectionner Â» (CHARGEOPS-610)."})," ","Au-delÃ  de 60 lignes, chaque ligne virtualisÃ©e est mesurÃ©e : son enveloppe porte ",e.jsx(s,{children:"data-index"})," et"," ",e.jsxs(s,{children:["ref=","{virtualizer.measureElement}"]}),", et"," ",e.jsx(s,{children:"estimateSize"})," (88 px depuis CHARGEOPS-614, une fiche avec une ligne ",e.jsx(s,{children:"meta"}),", le cas courant ; 72 px avant) n'est plus que l'estimation d'une ligne pas encore mesurÃ©e. Avant, les lignes Ã©taient posÃ©es Ã  72 Ã index : une fiche avec une ligne ",e.jsx(s,{children:"meta"})," (~88 px) chevauchait la suivante d'environ 15 px (70 fiches, 69 chevauchements mesurÃ©s dans le banc d'essai Ã  375 px). Les mesures sont rangÃ©es par clÃ© de ligne (",e.jsx(s,{children:"getItemKey"}),"), pour qu'un filtre ou un tri garde la hauteur de chaque fiche, et"," ",e.jsx(s,{children:"paddingStart"}),"/",e.jsx(s,{children:"paddingEnd"})," reproduisent le"," ",e.jsx(s,{children:"p-3"})," de la liste non virtualisÃ©e."]}),e.jsxs(i,{children:[e.jsx(n,{children:"FenÃªtrage rÃ©el (CHARGEOPS-614)."})," Le virtualiseur surveillait la div ",e.jsx(s,{children:"h-full overflow-y-auto"})," de la liste, qui ne dÃ©file jamais : sur tÃ©lÃ©phone, c'est le document qui dÃ©file ; dans la sÃ©paration tablette, le volet liste. La div prenait la hauteur de son contenu et toutes les lignes restaient dans la plage (200 fiches montÃ©es sur 200 dans le banc d'essai). ",e.jsx(s,{children:"resolveListScroller"})," (",e.jsx(s,{children:"client/src/components/lists/list-scroller.ts"}),") trouve le vrai dÃ©fileur : la div de la liste si un parent borne sa hauteur (la vue liste des cartes), sinon l'ancÃªtre"," ",e.jsx(s,{children:"[data-list-scroll-container]"})," (",e.jsx(s,{children:"LIST_SCROLL_CONTAINER_ATTR"}),") le plus proche (les deux volets de ",e.jsx(s,{children:"ListDetailLayout"}),"), sinon la fenÃªtre. Â« BornÃ©e Â» se lit sur la hauteur du contenu dans le flux (",e.jsx(s,{children:"inFlowContentHeight"})," : la somme des"," ",e.jsx(s,{children:"offsetHeight"}

27)," des enfants non positionnÃ©s ; le corps virtuel a une hauteur explicite), jamais sur"," ",e.jsx(s,{children:"scrollHeight"}),". Celui-ci compte aussi les lignes en"," ",e.jsx(s,{children:"translateY"}),", et une ligne montÃ©e dans le mÃªme commit est encore posÃ©e Ã  son estimation : une fiche de billet (~95 px) dÃ©passait sous le corps virtuel, la liste se croyait bornÃ©e, montait toutes ses lignes et le tirer lisait un"," ",e.jsx(s,{children:"scrollTop"})," Ã  0 jusqu'au prochain changement du nombre de lignes (effacer un filtre en bas d'une liste de 60 fiches au plus, une ligne ajoutÃ©e en direct). Sur tÃ©lÃ©phone,"," ",e.jsx(s,{children:"useWindowVirtualizer"})," ; dans un volet,"," ",e.jsx(s,{children:"useVirtualizer"})," sur ce volet, avec"," ",e.jsx(s,{children:"initialOffset"})," Ã  son ",e.jsx(s,{children:"scrollTop"})," pour ne pas le ramener en haut. ",e.jsx(s,{children:"scrollMargin"})," est la distance de la liste au haut du contenu dÃ©filant (filtres et indicateurs au-dessus), remesurÃ©e Ã  chaque rendu, au redimensionnement et quand ce contenu change de taille ; chaque ligne la retranche de"," ",e.jsx(s,{children:"vi.start"}),". Dans le banc d'essai, 200 fiches : 5 Ã  18 montÃ©es Ã  375 px, 9 Ã  20 dans le volet Ã  900 px, aucun chevauchement (",e.jsx(s,{children:"VIRTUAL_OVERSCAN"})," = 4 lignes de part et d'autre). Les hauteurs mesurÃ©es sont aussi gardÃ©es au niveau du module (2 000 au plus), par liste et par clÃ© de ligne : une liste remontÃ©e au retour d'une fiche pose ses lignes Ã  leur vraie hauteur, et un dÃ©calage restaurÃ© retombe sur la mÃªme fiche. Le nom d'une liste est la route sur laquelle elle s'est montÃ©e (figÃ© au montage : le volet liste le garde pendant ",e.jsx(s,{children:"/support"})," â ",e.jsx(s,{children:"/support/:id"}),"), plus sa prop facultative ",e.jsx(s,{children:"listKey"})," â le mÃªme identifiant (borne, client, ",e.jsx(s,{children:"ncmRouterId"}),") figure dans plusieurs listes aux fiches de hauteurs diffÃ©rentes ;"," ",e.jsx(s,{children:"resetRowHeightMemory()"})," la vide pour les tests. La ligne qui a le focus clavier reste montÃ©e (un"," ",e.jsx(s,{children:"rangeExtractor"})," fusionnÃ© avec"," ",e.jsx(s,{children:"defaultRangeExtractor"}),", suivi par clÃ© de ligne et triÃ© pour garder l'ordre de tabulation) : dÃ©filÃ©e hors de la plage, elle se dÃ©montait et le focus retombait sur"," ",e.jsx(s,{children:"<body>"}),". Le corps virtuel est un"," ",e.jsx(s,{children:'role="list"'})," et chaque ligne un"," ",e.jsx(s,{children:'role="listitem"'})," avec"," ",e.jsx(s,{children:"aria-setsize"})," (le vrai total) et"," ",e.jsx(s,{children:"aria-posinset"}),". Les listes groupÃ©es (",e.jsx(s,{children:"sectionFor"}),") ne sont toujours pas virtualisÃ©es. C'est pourquoi ",e.jsx(n,{children:"Mon parc"})," du portail (",e.jsx(s,{children:"pages/portal/fleet.tsx"}),") et, depuis CHARGEOPS-663, ses"," ",e.jsx(n,{children:"Billets de support"})," (",e.jsx(s,{children:"pages/portal/cases.tsx"}),", volet de la vue scindÃ©e compris) ne rangent leurs fiches sous un en-tÃªte par site que jusqu'Ã "," ",e.jsx(s,{children:"PHONE_SECTION_LIMIT"})," (300,"," ",e.jsx(s,{children:"lib/portal-site-groups.ts"}),", qui porte aussi"," ",e.jsx(s,{children:"groupBySite"}),", l'ordre des sections partagÃ© avec le tableau desktop) : au-delÃ , la liste reste plate pour rester fenÃªtrÃ©e et chaque fiche redonne son site dans ses faits."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Ã respecter, et limites connues."})," Tout conteneur dÃ©filant qui contient un ",e.jsx(s,{children:"ResponsiveList"})," doit porter"," ",e.jsx(s,{children:"LIST_SCROLL_CONTAINER_ATTR"})," (comme les deux volets de"," ",e.jsx(s,{children:"ListDetailLayout"}),") : sans lui, la liste se rabat sur la fenÃªtre, fenÃªtre ses lignes contre un dÃ©filement qui n'est pas le sien et lit Â« en haut Â» sur ",e.jsx(s,{children:"window.scrollY"}),". Limites connues : la recherche dans la page du navigateur (Ctrl+F, Â« Rechercher dans la page Â» sur iOS) ne trouve pas les lignes dÃ©montÃ©es ; et seul le focus DOM retient une ligne â une ligne atteinte par le curseur virtuel d'un lecteur d'Ã©cran sans recevoir le focus se dÃ©monte dÃ¨

27s qu'elle sort de la plage, comme toute autre."]}),e.jsxs(i,{children:[e.jsx(s,{children:"SwipeAction.menuOnly"})," place une action dans le â¯ seulement â jamais dans le tiroir de balayage ni dans le calcul du geste. Deux usages : une action destructive qui reste derriÃ¨re un toucher explicite (Supprimer), ou une entrÃ©e non destructive qui ne mÃ©rite pas une place de balayage (Â« DÃ©tails Â», Â« SÃ©lectionner Â»). LÃ  oÃ¹"," ",e.jsx(s,{children:"selection.onLongPress"})," est dÃ©fini,"," ",e.jsx(s,{children:"ResponsiveList"})," ajoute elle-mÃªme, aprÃ¨s les actions de la page, une entrÃ©e â¯ ",e.jsx(s,{children:"menuOnly"})," Â« SÃ©lectionner {titre} Â» (clÃ© partagÃ©e ",e.jsx(s,{children:"list.selectRow"}),") qui appelle le mÃªme ",e.jsx(s,{children:"onLongPress"})," : l'appui long est invisible et inatteignable au clavier, c'est la mÃªme porte d'entrÃ©e. Elle disparaÃ®t en mode sÃ©lection, oÃ¹ un toucher bascule dÃ©jÃ  la fiche. Une page n'ajoute donc plus sa propre action Â« SÃ©lectionner Â» (Mon parc a perdu la sienne ; les Billets de support l'ont gagnÃ©e)."]}),e.jsx(i,{children:"La puce Â« Filtres (n) Â» ne compte que les contrÃ´les de la feuille : la recherche a son propre champ toujours visible au-dessus et n'est jamais dans la feuille, donc elle ne compte pas â un tri qui vit dans la feuille, lui, compte. Clients, Contacts, Gestion des sites, Centre de maintenance, Rapports de service et Billets de support comptaient la recherche ; les Billets de support gardent ce compte pour Â« Effacer les filtres (n) Â», qui efface aussi la recherche."}),e.jsxs(i,{children:[e.jsx(n,{children:"Un tri dans la feuille (CHARGEOPS-607)."})," Un tableau qui trie par ses en-tÃªtes de colonne perd ce tri une fois en fiches. Les deux listes de rapports d'entretien (",e.jsx(a,{children:"/maintenance-reports"})," et"," ",e.jsx(a,{children:"/portal/maintenance-reports"}),") le rendent dans la feuille : ",e.jsx(s,{children:"ReportsSortSheet"})," (",e.jsx(s,{children:"client/src/components/maintenance-reports/list/reports-sort-sheet.tsx"}),") suit le panneau de filtres dans ",e.jsx(s,{children:"sheetChildren"})," et Ã©crit le mÃªme ",e.jsx(s,{children:"SortState"})," que les en-tÃªtes. Un tri autre que celui par dÃ©faut compte pour un dans ",e.jsx(s,{children:"activeCount"}),", et RÃ©initialiser le remet. Le dÃ©tail est dans la page technique Â« 06 â Maintenance et Licences Cleo Â»."]}),e.jsxs(l,{children:[e.jsxs(r,{children:[e.jsx(n,{children:"Billets de support"})," (",e.jsx(s,{children:"support-tickets.tsx"}),") â la fiche affiche"," ",e.jsx(s,{children:"#n Â· sujet"}),", le statut, la prioritÃ©, borne/site et l'heure de mise Ã  jour ; balayer propose Â« Me l'assigner Â» et Â« Changer le statut Â» (qui active la sÃ©lection en masse avec cette seule ligne â le sÃ©lecteur de statut dÃ©jÃ  construit, ",e.jsx(s,{children:"TicketBulkBar"}),", s'en charge, sans doublon)."," ",e.jsx(s,{children:"TICKET_STATUS_TONE"})," (",e.jsx(s,{children:"ticket-badges.tsx"}),") est la seule source de vÃ©ritÃ© du ton, partagÃ©e avec"," ",e.jsx(s,{children:"TicketStatusBadge"})," desktop."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Rapports de service"})," (",e.jsx(s,{children:"service-reports.tsx"}),") â la fiche affiche le numÃ©ro, technicienÂ·ne, site, date et statut ; balayer propose Â« Ouvrir le PDF Â» et Â« Partager Â» â les deux ouvrent la page de dÃ©tail avec un paramÃ¨tre de requÃªte (",e.jsx(s,{children:"?download=1"})," /"," ",e.jsx(s,{children:"?share=1"}),", mÃªme convention) plutÃ´t que de reconstruire le rendu hors-Ã©cran de PDF de marque que la page de dÃ©tail possÃ¨de dÃ©jÃ  ; les bandes de mois existantes deviennent les en-tÃªtes de section collants via"," ",e.jsx(s,{children:"sectionFor"}),"."]})]}),e.jsxs(i,{children:["Tests :"," ",e.jsx(s,{children:"components/lists/__tests__/responsive-list.test.tsx"})," ","et ",e.jsx(s,{children:"filter-bar.test.tsx"})," (changement de fenÃªtre, champs de fiche, balayage et le repli â¯ qui appellent le mÃªme gestionnaire, le seuil de tirer dÃ©clenche une resynchronisation, virtualisation au-delÃ  de 60), et par pilote"," ",e.jsx(s,{children:"pages/__tests__/support-tickets-phone-cards.test.tsx"})," ","/ ",e.jsx(s,{children:"service-reports-phone-cards.test.tsx"})," (champs de fiche, actions de balayage sans geste de glissement, dÃ©compte de la puce Â« Filtres (n) Â» de FilterBar)."]})]}),e.jsxs(t,{id:"mise-en-page-detail",title:"14g. Mise en page de dÃ©tail (DetailLayout)",children:[e.jsxs(i,{children:[e.jsx(s,{children:"client/src/components/detail/detail-layout.tsx"})," (S2.4, CHARGEOPS-509) est le rendu tÃ©lÃ©phone/tablette d'une page de dÃ©tail : un en-tÃªte (Â« hero Â»), une rangÃ©e d'onglets collante et balayable (â¥ 2 sections), une barre d'actions fixe en bas (jusqu'Ã  3 actions) et le repli â¯ de la barre du haut

27(S1) pour le reste â sur desktop (â¥ 1024 px), ",e.jsx(s,{children:"DetailLayout"})," ","rend sa prop ",e.jsx(s,{children:"desktop"})," sans y toucher, mÃªme convention que ",e.jsx(s,{children:"ResponsiveList"}),". Le titre du hero n'est PAS un ",e.jsx(s,{children:"<h1>"})," : la mise en page possÃ¨de le seul"," ",e.jsx(s,{children:"<h1>"})," de la page (celui de la barre du haut, via"," ",e.jsx(s,{children:"usePageMeta"}),") â un ",e.jsx(s,{children:"IntersectionObserver"})," ","bascule un Ã©tat ",e.jsx(s,{children:"heroVisible"})," quand le hero sort de l'Ã©cran, et le titre Â« traverse Â» visuellement vers la barre du haut Ã  ce moment (le hero garde le champ vide tant qu'il est visible)."]}),e.jsxs(i,{children:["Le balayage d'onglet (",e.jsx(s,{children:"tab-swipe.ts"}),") verrouille l'axe du geste une seule fois par geste, au premier dÃ©passement de la zone morte (8 px), Ã  30Â° de l'horizontale â un glissement qui commence horizontal et dÃ©rive vertical (ou l'inverse) ne change pas d'axe sous le doigt. Un onglet qui hÃ©berge une ",e.jsx(s,{children:"ResponsiveList"})," dont les fiches ont leur propre glissement de rÃ©vÃ©lation (S2.3) ne doit jamais faire dÃ©marrer les deux gestes Ã  la fois :"," ",e.jsx(s,{children:"data-no-tab-swipe"})," sur la surface de glissement de la fiche (",e.jsx(s,{children:"SwipeRow"}),") fait que"," ",e.jsx(s,{children:"startsInNoSwipeZone"})," (via ",e.jsx(s,{children:"closest()"}),") ignore ce toucher pour le geste d'onglet. Un"," ",e.jsx(s,{children:"?tab="})," dans l'URL survit Ã  un rechargement ; un identifiant absent ou invalide retombe sur le premier onglet plutÃ´t que de rendre un panneau vide sans onglet actif. Une boÃ®te de dialogue Radix/vaul (ou un popover ",e.jsx(s,{children:"Select"}),") ouverte depuis un onglet rend son contenu via un portail montÃ© directement sous ",e.jsx(s,{children:"document.body"})," â hors du DOM de"," ",e.jsx(s,{children:"detail-content"})," â mais les Ã©vÃ©nements synthÃ©tiques de React remontent quand mÃªme Ã  travers l'arbre React, donc un geste Ã  l'intÃ©rieur de ce portail atteignait aussi ces gestionnaires. Le gestionnaire de dÃ©but de toucher abandonne maintenant quand ",e.jsx(s,{children:"!e.currentTarget.contains(e.target)"}),", avant mÃªme de commencer Ã  suivre le geste â plus gÃ©nÃ©ral qu'un attribut d'exclusion posÃ© sur un seul consommateur de portail, puisqu'il couvre tous les portails."]}),e.jsx(i,{children:"Deux premiers pilotes (S2.4b) â desktop inchangÃ© sur les deux :"}),e.jsxs(l,{children:[e.jsxs(r,{children:[e.jsx(n,{children:"DÃ©tail d'un billet de support"})," (",e.jsx(s,{children:"support-ticket-detail.tsx"}),") â onglets Conversation (description, photos de dÃ©fauts, note de rÃ©solution, cas fabricant, piÃ¨ces jointes, analyse de journal, commentaires), DÃ©tails (fiche du cas, visites, cas liÃ©s, copilote IA, satisfaction) et ActivitÃ© ; actions RÃ©pondre (bascule l'onglet Conversation et met le focus dans le composeur via une ref exposÃ©e par ",e.jsx(s,{children:"TicketCommentsCard"}),"), Changer le statut et Assigner. Le statut et l'assignation n'ont pas de second contrÃ´le : ",e.jsx(s,{children:"TicketStatusControl"})," et"," ",e.jsx(s,{children:"TicketAssigneeControl"})," (extraits de"," ",e.jsx(s,{children:"ticket-header-card.tsx"}),", toujours utilisÃ©s par"," ",e.jsx(s,{children:"TicketHeaderCard"})," lui-mÃªme) sont montÃ©s une seconde fois dans une petite ",e.jsx(s,{children:"Dialog"})," possÃ©dÃ©e par la page, ouverte par le bouton de la barre d'actions â le mÃªme composant, jamais une deuxiÃ¨me interface. La suppression reste dans le repli â¯. Les pastilles d'origine (dÃ©faut, RMA liÃ©s, soumissions de rÃ©paration) s'affichent dans le hÃ©ros Ã  cÃ´tÃ© du statut (une rangÃ©e ",e.jsx(s,{children:"flex flex-wrap gap-1.5"}),") : la rangÃ©e de pastilles de l'en-tÃªte est dans son bloc d'identitÃ© ",e.jsx(s,{children:"hidden lg:block"}),", donc la page ne les passe Ã  ",e.jsx(s,{children:"originBadges"})," que sur ordinateur â un seul jeu Ã  chaque largeur, aucun dans le Portail opÃ©rateur. Le reste de ce bloc (prioritÃ©, catÃ©gorie, pastille SLA, pilule de niveau de service, puis site Â· organisation Â· auteur) vient de"," ",e.jsx(s,{children:"ticket-identity.tsx"})," (",e.jsx(s,{children:"TicketIdentityBadges"}),","," ",e.jsx(s,{children:"TicketIdentityMeta"}),"), que l'en-tÃªte et le hÃ©ros rendent tous les deux â mÃªme calcul SLA, mÃªmes rÃ¨gles du portail (pas de pilule de niveau ; ",e.jsx(s,{children:"SiteLink"})," retombe en texte). Le crayon Â« Changer le site Â» de l'en-tÃªte n'existe que sur ordinateur : l'action rejoint donc Supprimer dans le menu â¯ et ne monte ",e.jsx(s,{children:"TicketChangeSiteDialog"})," que pendant qu'elle est ouverte (CHARGEOPS-572)."]}),e.jsxs(r,{children:[e.jsx(n,{children:"DÃ©tail d'un rapport de service"})," (",e.jsx(s,{children:"service-report-detail.tsx"}),") â onglets Rapport (fiche du rapport, temps de main-d'Åuvre, facturation, bornes, travail sous garantie Ã©tendue, description, rÃ©sumÃ© de pied de page), Photos et Signatures (accusÃ© de rÃ©ception, tampons GPS) ; actions Ouvrir le PDF, Partager et Modifier. Honore ",e.jsx(s,{children:"?download=1"})," / ",e.jsx(s,{children:"?share=1"})," (les mÃªmes paramÃ¨tres que le balayage de la liste, S2.3) au premier chargement du rapport, en rÃ©utilisant les gestionnaires existants de la page (la boÃ®te de dialogue de langue d'export ; la boÃ®te de dialogue de partage), puis retire le paramÃ¨tre par un remplacement d'URL â une ref garde le dÃ©clenchement Ã  usage unique, pour qu'un rechargement ou un retour ne le refasse pas."]})]}),e.jsxs(i,{children:["PiÃ¨ge partagÃ© par les deux pilotes : ",e.jsx(s,{children:"ServiceReportsShell"})," ","(et l'appel direct Ã  ",e.jsx(s,{children:"useSetPageMeta"})," sur la page des billets) fixe un titre statique â sur tÃ©lÃ©phone, la page passe une paire vide plutÃ´t que le titre gÃ©nÃ©rique, pour que son effet (qui ne se dÃ©clenche qu'au montage, ses dÃ©pendances restant stables) s'accorde avec la valeur initiale de"," ",e.jsx(s,{children:"DetailLayout"})," (hero visible â titre vide) au lieu de l'Ã©craser avant le premier dÃ©filement."]}),e.jsxs(i,{children:[e.jsx(n,{children:"RÃ©serve de la barre d'actions"})," (CHARGEOPS-609) : la barre fixe publie sa hauteur dans"," ",e.jsx(s,{children:"--co-bottom-bar-h"})," (",e.jsx(s,{children:"useBottomBarInset"}),"), et ce sont les coquilles qui la rÃ©servent, pas la page :"," ",e.jsx(s,{children:"PHONE_CONTENT_CLASS"})," se rembourre de"," ",e.jsx(s,{children:"calc(var(--tabbar-h)+var(--co-bottom-bar-h,0px))"})," et"," ",e.jsx(s,{children:"TABLET_CONTENT_CLASS"})," de"," ",e.jsx(s,{children:"var(--co-bottom-bar-h,0px)"}),". Ce conteneur est le seul Ã©lÃ©ment sous tous les pieds de page (le ",e.jsx(s,{children:"Footer"})," du billet ou de la fiche de borne, celui de"," ",e.jsx(s,{children:"PortalLayout"}),") ; un rembourrage posÃ© sur"," ",e.jsx(s,{children:"DetailLayout"})," laissait le pied de page, rendu aprÃ¨s lui, sous la barre (5 pages de dÃ©tail sur 7). La barre se place Ã "," ",e.jsx(s,{children:"bottom-[var(--tabbar-h)]"})," : toutes les routes de dÃ©tail sont des pages intÃ©rieures (barre d'onglets masquÃ©e, 0 px) et la tablette n'a pas de barre d'onglets, mais si les deux coexistaient, la barre s'empilerait au-dessus et la somme resterait exacte. Les autres barres fixes (formulaire de rapport de service, assistant d'entretien, mise en service) publient la mÃªme variable et profitent de la mÃªme rÃ©serve : aucune page n'ajoute plus son propre"," ",e.jsx(s,{children:"pb-[var(--co-bottom-bar-h)]"}),". En mode"," ",e.jsx(s,{children:"embedded"})," (sÃ©paration tablette), la barre est collante, ne publie rien et rien n'est rÃ©servÃ©."]}),e.jsxs(i,{children:["Une barre qui publie sa hauteur se place juste au-dessus de la barre d'onglets ou de la zone sÃ©curisÃ©e, et n'ajoute jamais ",e.jsx(s,{children:"--co-assistant-launcher-h"})," Ã  son"," ",e.jsx(s,{children:"bottom"})," : le bouton de l'assistant ChargeOps AI (Â§14i) flotte dÃ©jÃ  au-dessus de la hauteur publiÃ©e, donc ce terme faisait passer la barre sous le bouton (sur Enregistrer) et laissait 68 px de page cachÃ©s. Seules les barres qui ne publient rien (la barre d'actions groupÃ©es des billets, les boutons de Toutes les bornes) l'ajoutent. La barre de mise en service flotte 0,75 rem plus haut : elle publie aussi cet Ã©cart (",e.jsx(s,{children:'useBottomBarInset("0.75rem")'}),"). Si deux barres sont montÃ©es en mÃªme temps, la variable porte la plus haute et ne s'efface qu'au dÃ©montage de la derniÃ¨re."]}),e.jsxs(i,{children:[e.jsx(s,{children:'DetailAction.tone: "destructive"'}

27)," peint l'entrÃ©e du menu â¯ en ",e.jsx(s,{children:"co-text-negative"}),", comme le â¯ de ",e.jsx(s,{children:"ResponsiveList"})," (Supprimer du billet, du rapport de service et du rapport d'entretien, Supprimer le brouillon du bon de commande) ; l'entrÃ©e ouvre toujours la confirmation existante. Les faits du hÃ©ros sont clÃ©s par position, et une page omet un fait manquant (",e.jsx(s,{children:".filter(Boolean)"}),") plutÃ´t que d'afficher Â« â Â». MÃ©ta de page : une page au-dessus de"," ",e.jsx(s,{children:"DetailLayout"})," ne cÃ¨de (",e.jsx(s,{children:"null"}),") que lorsque"," ",e.jsx(s,{children:"DetailLayout"})," est rÃ©ellement rendu (",e.jsx(s,{children:"isMobile && (embedded || donnÃ©es chargÃ©es)"}),") : pendant le chargement et sur Â« introuvable Â», elle pose son propre titre, sinon la barre du haut restait vide (billet, garantie prolongÃ©e, rapport d'entretien â mÃªme rÃ¨gle que le bon de commande, l'organisation et ",e.jsx(s,{children:"PendingPageMeta"})," de la fiche de borne). En mode ",e.jsx(s,{children:"embedded"})," elle cÃ¨de toujours : la page liste possÃ¨de le titre et"," ",e.jsx(s,{children:"fullWidth"}),"."]}),e.jsxs(i,{children:["Tests : ",e.jsx(s,{children:"detail/__tests__/detail-layout.test.tsx"})," et"," ",e.jsx(s,{children:"tab-swipe.test.ts"})," (verrouillage d'axe, repli sur le premier onglet, ",e.jsx(s,{children:"?tab="})," qui survit), et par pilote"," ",e.jsx(s,{children:"service-report-detail-links.test.tsx"}),"/",e.jsx(s,{children:"-signoff.test.tsx"}),"/",e.jsx(s,{children:"-billing.test.tsx"})," (le corps desktop enveloppÃ©, un cas viewport tÃ©lÃ©phone : 3 onglets,"," ",e.jsx(s,{children:"?tab=photos"})," ouvre sur Photos, Ouvrir le PDF est l'action principale, un seul ",e.jsx(s,{children:"<h1>"}),")."]})]}),e.jsxs(t,{id:"separation-liste-detail-tablette",title:"14h. SÃ©paration liste/dÃ©tail sur tablette (ListDetailLayout)",children:[e.jsxs(i,{children:[e.jsx(s,{children:"client/src/components/detail/list-detail-layout.tsx"})," ","(S2.5, CHARGEOPS-510) â sur tablette (640-1023Â px) ET au moins 760Â px de large, les deux pilotes (billets de support, rapports de service) affichent leur liste et leur dÃ©tail cÃ´te Ã  cÃ´te au lieu de deux pages sÃ©parÃ©es : un volet gauche de 320Â px (les fiches tÃ©lÃ©phone de ",e.jsx(s,{children:"ResponsiveList"}),", qui dÃ©file indÃ©pendamment) et un volet droit (le dÃ©tail, ou l'Ã©tat vide"," ",e.jsx(s,{children:"Â« SÃ©lectionnez unâ¦ Â»"})," tant qu'aucune fiche n'est ouverte)."]}),e.jsxs(l,{children:[e.jsxs(r,{children:[e.jsx(n,{children:"Une seule route, aucun remontage"})," â"," ",e.jsx(s,{children:"App.tsx"})," remplace les deux routes (",e.jsx(s,{children:"/support"})," + ",e.jsx(s,{children:"/support/:ticketId"}),","," ",e.jsx(s,{children:"/service-reports"})," +"," ",e.jsx(s,{children:"/service-reports/:reportId"}),") par UNE route Ã  paramÃ¨tre optionnel (",e.jsx(s,{children:"/support/:ticketId?"}),","," ","wouter matche avec ou sans le segment final) rendue par un petit wrapper (",e.jsx(s,{children:"SupportSplitRoute"}),"/",e.jsx(s,{children:"ServiceReportSplitRoute"}),"). Toucher une fiche ne fait que changer l'URL â la mÃªme instance de la page liste reste montÃ©e, donc son dÃ©filement et ses filtres survivent."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Repli tablette Ã©troite"})," â sous 760Â px (portrait sur un iPad mini), le wrapper rend directement la page liste OU la page dÃ©tail (jamais les deux), exactement comme le flux tÃ©lÃ©phone : changer d'id remonte alors le composant, comme avant."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Pas de â dans le volet dÃ©tail"})," â"," ",e.jsx(s,{children:"backTarget"})," (",e.jsx(s,{children:"lib/nav/back-target.ts"}),") prend un 4e paramÃ¨tre ",e.jsx(s,{children:"isSplitActive"})," (par dÃ©faut"," ",e.jsx(s,{children:"false"}),", donc tous les appelants d'avant S2.5 sont inchangÃ©s) : Ã  ",e.jsx(s,{children:"true"})," il court-circuite tout de suite Ã  ",e.jsx(s,{children:"null"}),", la sÃ©paration EST la navigation."," ",e.jsx(s,{children:"PhoneChrome"}),"/",e.jsx(s,{children:"TabletShell"})," (S1) calculent"," ",e.jsx(s,{children:"isSplitActive"})," de la mÃªme faÃ§on (",e.jsx(s,{children:"useSplitViewport() && isSplitRouteLocation(location)"}),") et le passent Ã  ",e.jsx(s,{children:"TopBar"}),", qui seul appelle"," ",e.jsx(s,{children:"backTarget"})," â ",e.jsx(s,{children:"isSplitRouteLocation"})," et"," ",e.jsx(s,{children:"SPLIT_PAIRS"})," (les sept paires rÃ©parties) vivent dans"," ",e.jsx(s,{children:"back-target.ts"}),", une seule source de vÃ©ritÃ© pour App.tsx, les wrappers de route et les deux chromes."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Paires du portail (S3 V5, CHARGEOPS-602)"})," â"," ",e.jsx(s,{children:"PortalCasesSplitRoute"})," associe la liste des billets du portail Ã  la page PARTAGÃE"," ",e.jsx(s,{children:"support-ticket-detail.tsx"})," sous une seule route"," ",e.jsx(s,{children:"/portal/cases/:ticketId?"}),", dÃ©clarÃ©e aprÃ¨s le passeport de borne Ã  4 segments ; le dÃ©tail continue de rÃ©Ã©crire ses liens sous ",e.jsx(s,{children:"/portal"})," grÃ¢ce Ã  son second"," ",e.jsx(s,{children:"useRoute"}),". ",e.jsx(s,{children:"PortalLayout"})," n'a pas de crochet ",e.jsx(s,{children:"fullWidth"})," : il interroge l'URL."," ",e.jsx(s,{children:"isSplitPairLocation(location)"})," (l'une ou l'autre moitiÃ© d'une paire, racine de liste ou dÃ©tail)

27sur une tablette d'au moins 760Â px retire le rembourrage du"," ",e.jsx(s,{children:"<main>"})," et le pied de page, qui sinon s'empileraient sur les volets en 100dvh et feraient dÃ©filer la page une seconde fois. Une future paire du portail n'a qu'Ã  ajouter sa clÃ© Ã  ",e.jsx(s,{children:"SPLIT_PAIRS"}),"."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Rapports du portail (CHARGEOPS-603)"})," â c'est ce qu'ont fait ",e.jsx(s,{children:"PortalServiceReportSplitRoute"})," et"," ",e.jsx(s,{children:"PortalMaintenanceReportSplitRoute"})," : les motifs"," ",e.jsx(s,{children:"/portal/service-reports/:reportId"})," et"," ",e.jsx(s,{children:"/portal/maintenance-reports/:reportId"}),", une route optionnelle chacune dans App.tsx, et les pages PARTAGÃES"," ",e.jsx(s,{children:"service-report-detail.tsx"})," et"," ",e.jsx(s,{children:"maintenance-reports/detail.tsx"})," en ",e.jsx(s,{children:"embedded"}),", qui gardent leur dÃ©tection du portail par leur second"," ",e.jsx(s,{children:"useRoute"}),". Aucun changement Ã "," ",e.jsx(s,{children:"PortalLayout"})," ni Ã  ",e.jsx(s,{children:"isSplitPairLocation"}),"."]}),e.jsxs(r,{children:[e.jsx(n,{children:"La liste reste vraiment montÃ©e (CHARGEOPS-607)"})," ","â une seule route ne suffisait pas : ",e.jsx(s,{children:"AppLayout"})," ","donnait Ã  son ",e.jsx(s,{children:"ErrorBoundary"})," de page l'emplacement comme clÃ©, et ",e.jsx(s,{children:"PortalLayout"})," ",e.jsx(s,{children:"`${location}::${siteFilter}`"})," ; passer de"," ",e.jsx(s,{children:"/x"})," Ã  ",e.jsx(s,{children:"/x/:id"})," changeait donc la clÃ© et React remontait toute la vue partagÃ©e â la liste perdait son dÃ©filement, sa recherche, son tri et ses filtres Ã  chaque toucher, dans les sept paires. Les deux mises en page utilisent dÃ©sormais"," ",e.jsx(s,{children:"pageBoundaryKey(location, splitViewport)"})," ","(",e.jsx(s,{children:"back-target.ts"}),") : sur une tablette d'au moins 760Â px, sur l'une ou l'autre moitiÃ© d'une paire, c'est la racine de liste de la paire (",e.jsx(s,{children:"splitListRoot"}),", tirÃ©e de"," ",e.jsx(s,{children:"SPLIT_PAIRS"}),") ; partout ailleurs l'emplacement, comme avant â tÃ©lÃ©phone, tablette Ã©troite et desktop ne changent pas, et quitter la paire rÃ©initialise toujours une page plantÃ©e. ",e.jsx(s,{children:"ListDetailLayout"})," ","enveloppe le volet dÃ©tail dans son propre"," ",e.jsx(s,{children:'ErrorBoundary level="page"'}),", avec l'emplacement comme clÃ© : un dÃ©tail plantÃ© affiche la carte d'erreur dans son volet, la liste reste utilisable Ã  cÃ´tÃ©, la sÃ©lection suivante le rÃ©initialise, et chaque sÃ©lection monte toujours un dÃ©tail neuf. Dans cette frontiÃ¨re, un"," ",e.jsx(s,{children:"<Suspense>"})," local affiche un squelette"," ",e.jsx(s,{children:"SectionLoading"})," Ã  la taille du volet pendant que le morceau d'une page de dÃ©tail paresseuse se charge : la premiÃ¨re sÃ©lection ne remonte plus jusqu'au"," ",e.jsx(s,{children:"PageLoading"})," de route d'App.tsx, qui faisait clignoter toute la mise en page ; la frontiÃ¨re est"," ",e.jsx(s,{children:"contained"}),", donc un rechargement de morceau pÃ©rimÃ© affiche son Ã©tat Â« mise Ã  jour Â» dans le volet plutÃ´t qu'en"," ",e.jsx(s,{children:"min-h-screen"}),". Limite acceptÃ©e : si le volet LISTE plante, la clÃ© de la frontiÃ¨re de page (la racine de liste de la paire) ne change pas quand on passe d'un Ã©lÃ©ment Ã  l'autre de la mÃªme paire, donc sa carte d'erreur reste jusqu'Ã  ce que tu touches ",e.jsx(n,{children:"Try Again"})," ou quittes la paire."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Volets positionnÃ©s"})," â les deux volets sont"," ",e.jsx(s,{children:"relative"}

27),". Chacun est son propre conteneur de dÃ©filement : un descendant en position absolue (le compte"," ",e.jsx(s,{children:"sr-only"})," d'une bande de groupe, une ancre) prend le volet comme bloc conteneur plutÃ´t que la page, oÃ¹ il tombait sous la ligne de flottaison et faisait dÃ©filer la page une seconde fois. Le contournement ",e.jsx(s,{children:"relative"})," de la liste d'entretien du portail (#630) disparaÃ®t."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Sous-chemins littÃ©raux"})," â la forme"," ",e.jsx(s,{children:"/racine/:param"})," d'une paire attrape aussi les pages sÅurs que App.tsx dÃ©clare avant la route optionnelle."," ",e.jsx(s,{children:"SPLIT_LITERAL_SUBPATHS"})," les Ã©numÃ¨re (",e.jsx(s,{children:"/support/outages"}),","," ",e.jsx(s,{children:"/service-reports/new"})," et ",e.jsx(s,{children:"/billing"}),","," ",e.jsx(s,{children:"/maintenance-reports/new"})," et"," ",e.jsx(s,{children:"/settings"}),") : aucune n'est un dÃ©tail ni une paire, donc chacune garde son â et ne cache jamais la barre d'onglets sur une tablette large (",e.jsx(s,{children:"/service-reports/new"})," et ",e.jsx(s,{children:"/billing"})," le faisaient jusqu'Ã  CHARGEOPS-607)."," ",e.jsx(s,{children:"back-target.test.ts"})," lit App.tsx et Ã©choue sur une route littÃ©rale sous une racine de paire que la liste oublie."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Une vÃ©rification, une liste (CHARGEOPS-627)"})," â le test de la sÃ©paration s'Ã©crit une seule fois,"," ",e.jsx(s,{children:"useSplitViewport()"})," (",e.jsx(s,{children:"hooks/use-split-viewport.ts"})," : une tablette d'au moins ",e.jsx(s,{children:"SPLIT_MIN_WIDTH"}),", 760Â px, construite sur"," ",e.jsx(s,{children:"useViewport"})," et ",e.jsx(s,{children:"useMinWidth"})," pour qu'un test qui simule l'un ou l'autre la pilote encore). Les wrappers de route, la clÃ© de frontiÃ¨re de page d'",e.jsx(s,{children:"AppLayout"})," et de ",e.jsx(s,{children:"PortalLayout"}),", le retrait de ",e.jsx(s,{children:"PortalLayout"})," et les deux chromes la lisent ; il y en avait dix copies, et une qui dÃ©rive, c'est ainsi que la liste se remontait (#636). Les paires aussi s'Ã©crivent une seule fois, dans la table Ã  clÃ©s"," ",e.jsx(s,{children:"SPLIT_PAIRS"})," (",e.jsx(s,{children:"list"}),", ",e.jsx(s,{children:"param"}),","," ",e.jsx(s,{children:"detail"}),", ",e.jsx(s,{children:"route"}),") :"," ",e.jsx(s,{children:"SPLIT_ROUTE_PATTERNS"})," et les racines de liste en dÃ©rivent, et les sept wrappers sortent d'une seule fabrique"," ",e.jsx(s,{children:"makeSplitRoute"})," qui y lit son motif"," ",e.jsx(s,{children:"useRoute"}),". App.tsx garde ses routes en littÃ©raux (plusieurs gardes lisent ",e.jsx(s,{children:'path="â¦"'}),"), et"," ",e.jsx(s,{children:"detail/__tests__/split-one-source.test.tsx"})," exige que chacune Ã©gale la ",e.jsx(s,{children:"route"})," de sa paire, interdit un chemin littÃ©ral dans ",e.jsx(s,{children:"split-routes.tsx"})," et tout autre"," ",e.jsx(s,{children:"useMinWidth(760)"})," dans ",e.jsx(s,{children:"client/src"}),". Une nouvelle paire : une clÃ© dans ",e.jsx(s,{children:"SPLIT_PAIRS"}),", un appel Ã  ",e.jsx(s,{children:"makeSplitRoute"}),", la route dans App.tsx, et son wrapper dans la table ",e.jsx(s,{children:"wrapperPair"})," de"," ",e.jsx(s,{children:"split-one-source.test.tsx"})," (le test exige que ses clÃ©s soient exactement les wrappers routÃ©s dans App.tsx)."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Pas de pied de page dans le volet liste (CHARGEOPS-627)"})," â la vue partagÃ©e ne porte aucun chrome de page : le dÃ©tail saute son pied de page en"," ",e.jsx(s,{children:"embedded"}),", ",e.jsx(s,{children:"PortalLayout"})," retire le sien pour les paires du portail, et la liste des billets saute dÃ©sormais son ",e.jsx(s,{children:"<Footer fullBleed />"})," quand"," ",e.jsx(s,{children:"forcePhoneCards"})," est vrai. Ce pied de page fait"," ",e.jsx(s,{children:"w-screen"})," moins le rail (748Â px Ã  820) : montÃ© dans le volet de 320Â px, il faisait dÃ©filer la liste de cÃ´tÃ©. C'Ã©tait la seule des sept pages liste Ã  rendre le sien. Les billets et les rapports d'entretien du bureau montent aussi ",e.jsx(s,{children:"SettingsSectionShell"}),", dont l'en-tÃªte se met cÃ´te Ã  cÃ´te passÃ© ",e.jsx(s,{children:"sm"})," ; sa rangÃ©e d'actions (540Â px pour les billets) ne tient dans le volet que parce que #644 (CHARGEOPS-612) laisse cet en-tÃªte passer Ã  la ligne sous ",e.jsx(s,{children:"lg"})," (",e.jsx(s,{children:"max-lg:flex-wrap"}),", un bloc titre en ",e.jsx(s,{children:"sm:max-lg:basis-64"}),", des actions en"," ",e.jsx(s,{children:"max-lg:min-w-0 max-lg:shrink"}),"). La vue partagÃ©e n'a pas besoin d'un en-tÃªte Ã  elle. Dans le harnais Ã  820Â px, les sept volets liste ont"," ",e.jsx(s,{children:"scrollWidth"})," = ",e.jsx(s,{children:"clientWidth"})," (319)."," ",e.jsx(s,{children:"pages/__tests__/split-list-footer.test.tsx"})," monte la vraie page avec et sans ",e.jsx(s,{children:"forcePhoneCards"}),", vÃ©rifie que l'en-tÃªte porte les mÃªmes classes dans les deux cas, et exige qu'aucun ",e.jsx(s,{children:"<Footer"})," des sept pages ne soit rendu sans la garde ",e.jsx(s,{children:"!forcePhoneCards"}),"."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Le volet gauche force les fiches"})," â 320Â px est trop Ã©troit pour le tableau desktop, donc les deux pages liste reÃ§oivent un nouveau prop"," ",e.jsx(s,{children:"forcePhoneCards?: boolean"})," et passent"," ",e.jsx(s,{children:"desktop={forcePhoneCards ? null : <Table>...</Table>}"})," ","Ã  ",e.jsx(s,{children:"ResponsiveList"}),", qui traite dÃ©sormais un"," ",e.jsx(s,{children:"desktop"})," Ã  ",e.jsx(s,{children:"null"})," comme Â« toujours rendre les fiches Â», mÃªme hors tÃ©lÃ©phone. Le prop"," ",e.jsx(s,{children:"splitSelectedId?: string | null"})," marque la fiche actuellement ouverte : ",e.jsx(s,{children:"ResponsiveListCard"})," a un nouveau champ ",e.jsx(s,{children:"current?: boolean"})," (indÃ©pendant de la sÃ©lection groupÃ©e) qui ajoute l'anneau de surbrillance et"," ",e.jsx(s,{children:'aria-current="true"'}),"."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Le volet droit n'a pas son propre chrome"})," â"," ","les deux pages dÃ©tail reÃ§oivent un prop"," ",e.jsx(s,{children:"embedded?: boolean"})," : la page des billets saute son propre ",e.jsx(s,{children:"<Footer fullBleed />"})," (et l'annulation de marge qui va avec) ; la page des rapports, qui n'a pas de pied de page, laisse plutÃ´t son corps

27normalement centrÃ© (",e.jsx(s,{children:"max-w-[1200px]"}),") remplir toute la largeur du volet. La suppression du â elle-mÃªme passe entiÃ¨rement par"," ",e.jsx(s,{children:"backTarget"})," (ci-dessus), pas par ce prop."]}),e.jsxs(r,{children:[e.jsx(n,{children:"La barre de sÃ©lection groupÃ©e suit la mÃªme convention"})," â la classe par dÃ©faut de"," ",e.jsx(s,{children:"TicketBulkBar"}),","," ",e.jsx(s,{children:"fixed left-[var(--rail-w)] right-0 â¦ mx-auto w-fit"}),", atteint toute la largeur Ã  droite du rail, chevauchant aussi le volet de dÃ©tail de la sÃ©paration, pas seulement le volet liste de 320Â px qu'elle trie. Une prop"," ",e.jsx(s,{children:"embedded?: boolean"}),", passÃ©e en"," ",e.jsxs(s,{children:["embedded=","{forcePhoneCards}"]})," depuis"," ",e.jsx(s,{children:"support-tickets.tsx"}),", la rend plutÃ´t"," ",e.jsx(s,{children:"sticky bottom-0"})," Ã  l'intÃ©rieur du conteneur de dÃ©filement propre au volet liste â la mÃªme idÃ©e de cantonnement au volet que la prop ",e.jsx(s,{children:"embedded"})," du volet dÃ©tail ci-dessus. Les rapports de service n'ont pas de barre de sÃ©lection groupÃ©e. Le chemin non-embedded est inchangÃ©."]})]}),e.jsxs(i,{children:["Tests : ",e.jsx(s,{children:"detail/__tests__/list-detail-layout.test.tsx"})," ","(les deux volets, une sÃ©lection qui ne rÃ©initialise ni le dÃ©filement ni la recherche de la liste, l'Ã©tat vide, le repli sous 760Â px, desktop inchangÃ© â via un petit",e.jsx(s,{children:"FakeSplitRoute"})," local qui reproduit le motif rÃ©el sans importer ",e.jsx(s,{children:"App.tsx"}),", dont ",e.jsx(s,{children:"lib/convex.ts"})," ","construit un vrai ",e.jsx(s,{children:"ConvexReactClient"})," au chargement du module), et dans ",e.jsx(s,{children:"back-target.test.ts"})," /"," ",e.jsx(s,{children:"responsive-list.test.tsx"})," / ",e.jsx(s,{children:"tablet-shell.test.tsx"})," ","pour ",e.jsx(s,{children:"isSplitActive"}),", ",e.jsx(s,{children:"current"})," et"," ",e.jsx(s,{children:"desktop=null"})," individuellement."]})]}),e.jsxs(t,{id:"assistant-surcouches",title:"14i. Surcouches de l'assistant ChargeOps AI",children:[e.jsxs(i,{children:["L'assistant (CHARGEOPS-379, ",e.jsx(s,{children:"client/src/components/assistant/"}),") ajoute deux couches fixes prÃ©sentes sur toutes les pages, dans le coin en bas Ã  droite que d'autres utilisaient dÃ©jÃ . Les deux sont rendues par ",e.jsx(s,{children:"createPortal"})," dans ",e.jsx(s,{children:"document.body"})," (un"," ",e.jsx(s,{children:"fixed"})," sous un ancÃªtre transformÃ© ou filtrÃ© se place contre cet ancÃªtre). Guide fonctionnel :"," ",e.jsx(a,{children:"Assistant ChargeOps AI (interne)"}),", Â§11."]}),e.jsxs(l,{children:[e.jsxs(r,{children:[e.jsx(n,{children:"Le bouton"})," (",e.jsx(s,{children:"assistant-launcher.tsx"}),") â rond de 52 px, ",e.jsx(s,{children:"right-4"}),", ",e.jsx(s,{children:"z-[65]"})," : au-dessus du chrome de page (",e.jsx(s,{children:"z-50"}),") et de la fenÃªtre d'appel (",e.jsx(s,{children:"z-[60]"}),"), sous la sonnerie d'appel entrant et les menus de l'appel (",e.jsx(s,{children:"z-[70]"})," et plus) et sous les toasts. Son ",e.jsx(s,{children:"bottom"})," vient de"," ",e.jsx(s,{children:"aboveBottomBar()"})," (",e.jsx(s,{children:"hooks/use-bottom-bar-inset.ts"}),") : au-dessus de la barre d'actions fixe d'une page, de la barre d'onglets, de la zone sÃ©curisÃ©e, et de la banniÃ¨re d'installation PWA tant qu'elle est affichÃ©e. MontÃ©, il publie la place qu'il prend dans"," ",e.jsx(s,{children:"--co-assistant-launcher-h"})," sur ",e.jsx(s,{children:"<html>"})," ","(52 px + 16 px d'Ã©cart, plus la place de la banniÃ¨re d'installation quand elle l'a poussÃ©) ; la variable revient Ã  rien au dÃ©montage."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Qui lit cette variable"})," â la fenÃªtre d'appel rÃ©duite (",e.jsx(s,{children:"calls/call-window.tsx"})," :"," ",e.jsx(s,{children:'MINIMIZED_BOTTOM = aboveBottomBar("1rem", "var(--co-assistant-launcher-h, 0px)")'}),"), le bandeau Â« appareil plein Â» (Â§58), les boutons d'action flottants de Toutes les bornes sur tÃ©lÃ©phone (",e.jsx(s,{children:"bottom-[calc(var(--tabbar-h)+1rem+var(--co-assistant-launcher-h,0px))]"}),") et la barre d'actions groupÃ©es des billets (Â§14b). Chacun prend ",e.jsx(s,{children:"0px"})," quand l'assistant n'est pas montÃ©."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Le panneau"})," (",e.jsx(s,{children:"assistant-panel.tsx"}),") â Ã  partir de ",e.jsx(s,{children:"sm"}),", une ",e.jsx(s,{children:"co-card is-floating"})," ","NON modale (",e.jsx(s,{children:'role="dialog" aria-modal="false"'}),", sans piÃ¨ge Ã  focus) de 400 px, 720 px Ã©largie, au-dessus du bouton ; sa hauteur se calcule depuis sa vraie position (",e.jsx(s,{children:"PANEL_BOTTOM"}),"). Ouverte, elle publie sa largeur plus un Ã©cart dans ",e.jsx(s,{children:"--co-assistant-panel-w"}),", et la fenÃªtre d'appel rÃ©duite se place Ã  sa gauche (",e.jsx(s,{children:"MINIMIZED_RIGHT = calc(1rem + var(--co-assistant-panel-w, 0px))"}),"). Sous ",e.jsx(s,{children:"sm"}),", une ",e.jsx(s,{children:"co-card is-sheet"})," plein Ã©cran, modale, focus tenu Ã  l'intÃ©rieur. Titre en"," ",e.jsx(s,{children:"h2"}),", ce qui est dedans (carte de proposition, historique) Ã  partir de ",e.jsx(s,{children:"h3"}),"."]}),e.jsxs(r,{children:[e.jsxs(n,{children:[e.jsx(s,{children:".co-card.is-floating"})," /"," ",e.jsx(s,{children:".is-sheet"})]})," (",e.jsx(s,{children:"styles/theme-cleo-extras.css"}),") â la carte flottante garde une ombre relevÃ©e au repos ET au survol (une classe"," ",e.jsx(s,{children:"shadow-*"})," ne l'emporterait pas sur l'ombre de"," ",e.jsx(s,{children:".co-card"}),"), teintÃ©e par le triplet"," ",e.jsx(s,{children:"rgb(var(--brand-600) / a)"})," (",e.jsx(s,{children:"--sky-400"})," en sombre), et doit rester APRÃS les rÃ¨gles ",e.jsx(s,{children:"is-static"})," ; la feuille n'a ni rayon, ni filet, ni ombre. Le bandeau Â« appareil plein Â» porte aussi ",e.jsx(s,{children:"is-floating"}),"."]}),e.jsxs(r,{children:[e.jsx(n,{children:"La rÃ¨gle des fenÃªtres de page"})," â le bouton et le panneau sont au-dessus d'une fenÃªtre modale de page (",e.jsx(s,{children:"z-50"}),"). Tant qu'une est ouverte (",e.jsx(s,{children:"useModalLayerOpen(OWN_LAYER_SELECTOR)"}),", qui surveille le ",e.jsx(s,{children:"pointer-events: none"})," que Radix pose sur"," ",e.jsx(s,{children:"<body>"}),"), le bouton se cache (montÃ©, pour garder sa place publiÃ©e et y rendre le focus), le panneau descend Ã "," ",e.jsx(s,{children:"z-40"})," sous le fond de la fenÃªtre sans Ãªtre dÃ©montÃ© (une question Ã  moitiÃ© tapÃ©e survit) et ",e.jsx(s,{children:"Ctrl+J"})," est laissÃ© au navigateur. Les couches PROPRES Ã  l'assistant (ses"," ",e.jsx(s,{children:"Select"}),", la confirmation de suppression, en"," ",e.jsx(s,{children:"z-[70]"}),") verrouillent ",e.jsx(s,{children:"<body>"})," de la mÃªme faÃ§on : elles portent ",e.jsx(s,{children:"data-assistant-layer"}),", et l'argument ",e.jsx(s,{children:"ignore"})," de"," ",e.jsx(s,{children:"useModalLayerOpen"})," les Ã©carte, sinon choisir une valeur dans le panneau le ferait s'effacer devant lui-mÃªme."]}

27),e.jsx(r,{children:"Le bouton se cache aussi pendant qu'une fenÃªtre d'appel est ouverte et non rÃ©duite : il couvrirait ses commandes."})]})]}),e.jsxs(t,{id:"onglets-telephone",title:"14j. Onglets sur tÃ©lÃ©phone (S3.0b)",children:[e.jsxs(i,{children:[e.jsx(s,{children:"client/src/components/ui/tabs.tsx"})," (S3.0b, CHARGEOPS-568, spec S3 Â§4.1) est le composant Radix"," ",e.jsx(s,{children:"Tabs"})," partagÃ© par toute l'application â pas seulement ",e.jsx(s,{children:"DetailLayout"})," (Â§14g). Sous 640 px,"," ",e.jsx(s,{children:"TabsList"})," et ",e.jsx(s,{children:"TabsTrigger"})," prennent la prÃ©sentation de rangÃ©e d'onglets de S2 (les chaÃ®nes partagÃ©es de ",e.jsx(s,{children:"client/src/components/detail/tab-row-classes.ts"})," ","servent seulement de rÃ©fÃ©rence visuelle, pas d'import â pas de changement d'API) : c'est un pur changement de CSS via des classes ",e.jsx(s,{children:"max-sm:"})," Tailwind â aucune branche JS de viewport, aucun remontage, et rien ne change Ã  partir de 640 px."]}),e.jsxs(l,{children:[e.jsxs(r,{children:[e.jsx(n,{children:"La rangÃ©e"})," (",e.jsx(s,{children:"TabsList"}),") devient"," ",e.jsx(s,{children:"flex"})," pleine largeur, alignÃ©e au dÃ©but, avec un dÃ©filement horizontal (",e.jsx(s,{children:"overflow-x-auto snap-x snap-mandatory"}),") et sa propre barre de dÃ©filement masquÃ©e (",e.jsx(s,{children:"[scrollbar-width:none]"}),"). Le fond et l'arrondi du bouton-groupe desktop disparaissent au profit d'un simple filet infÃ©rieur (",e.jsx(s,{children:"border-b"}),")."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Chaque onglet"})," (",e.jsx(s,{children:"TabsTrigger"}),") a une hauteur minimale de 44 px (",e.jsx(s,{children:"min-h-11"}),"), ne rÃ©trÃ©cit pas (",e.jsx(s,{children:"shrink-0"}),") et s'aligne sur la grille de dÃ©filement (",e.jsx(s,{children:"snap-start"}),") â sa largeur vient de son contenu, pas d'un partage Ã©gal de la rangÃ©e. L'onglet actif porte un filet infÃ©rieur de 2 px de la couleur de marque (",e.jsx(s,{children:"data-[state=active]:border-primary"}),","," ",e.jsx(s,{children:"dark:data-[state=active]:border-brand-300"}),") au lieu du fond/ombre desktop."]}),e.jsxs(r,{children:[e.jsx(n,{children:"L'onglet actif se scrolle dans la vue."})," Un"," ",e.jsx(s,{children:"useLayoutEffect"})," pose un"," ",e.jsx(s,{children:"MutationObserver"})," sur l'attribut"," ",e.jsx(s,{children:"data-state"})," du bouton (mÃªme idÃ©e que"," ",e.jsx(s,{children:"useModalLayerOpen"}),", Â§9 : surveiller un seul attribut plutÃ´t que de deviner quand React refait le rendu). Quand Radix bascule l'attribut Ã "," ",e.jsx(s,{children:'"active"'})," ET que ",e.jsx(s,{children:'matchMedia("(max-width: 639px)")'})," correspond, le bouton appelle lui-mÃªme"," ",e.jsxs(s,{children:["scrollIntoView(",'{ block: "nearest", inline: "nearest" }',")"]}),". Rien ne se produit sur desktop/tablette, oÃ¹ tous les onglets tiennent dÃ©jÃ  dans la rangÃ©e. Le clavier reste celui de Radix (flÃ¨ches, ",e.jsx(s,{children:"Home"}),"/",e.jsx(s,{children:"End"}),") â cet effet ne fait qu'accompagner visuellement une activation dÃ©jÃ  dÃ©cidÃ©e par Radix, qu'elle vienne d'un clic, d'une touche ou de l'activation automatique au focus."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Un site qui redÃ©finit son propre style d'onglet"})," ","peut entrer en conflit avec la rangÃ©e tÃ©lÃ©phone : un"," ",e.jsx(s,{children:"flex-1"})," sur ",e.jsx(s,{children:"TabsTrigger"})," (qui Ã©tire chaque onglet pour remplir la rangÃ©e) empÃªche tout dÃ©bordement, donc tout dÃ©filement â deux appelants existants l'avaient (",e.jsx(s,{children:"pages/home.tsx"}),"'s"," ",e.jsx(s,{children:"HOME_TAB_TRIGGER_CLASS"})," et les trois onglets de"," ",e.jsx(s,{children:"charger-management/charger-edit-dialog.tsx"}),"), et portent maintenant un ",e.jsx(s,{children:"max-sm:flex-none"})," qui annule l'Ã©tirement seulement sous 640 px ; desktop/tablette gardent ",e.jsx(s,{children:"flex-1"})," intact. Un futur appelant avec un"," ",e.jsx(s,{children:"grid grid-cols-N"})," n'a rien Ã  faire : la classe"," ",e.jsx(s,{children:"max-sm:flex"})," de ",e.jsx(s,{children:"TabsList"})," l'emporte dÃ©jÃ  sous 640 px (les variantes d'Ã©cran Tailwind s'appliquent toujours aprÃ¨s les classes sans variante, quel que soit l'ordre dans l'attribut"," ",e.jsx(s,{children:"class"}),")."]})]}),e.jsxs(i,{children:["Tests :"," ",e.jsx(s,{children:"components/ui/__tests__/tabs-phone.test.tsx"})," â l'onglet qui devient actif appelle"," ",e.jsx(s,{children:"scrollIntoView"})," quand la requÃªte mÃ©dia tÃ©lÃ©phone correspond, ne l'appelle pas sinon, et une assertion littÃ©rale prouve que la partie non-",e.jsx(s,{children:"max-sm:"})," des chaÃ®nes de classes de ",e.jsx(s,{children:"TabsList"})," et"," ",e.jsx(s,{children:"TabsTrigger"})," est inchangÃ©e (desktop/tablette pixel pour pixel)."]})]}),e.jsxs(t,{id:"tableaux-telephone",title:"14k. Tableaux tÃ©lÃ©phone (Table phone)",children:[e.jsxs(i,{children:[e.jsx(s,{children:"client/src/components/ui/table.tsx"})," (S3.0a, CHARGEOPS-567, spec Â§4.1) â sous 640Â px, chaque ligne de corps d'un ",e.jsx(s,{children:"<Table>"})," devient une carte"," ",e.jsx(s,{children:"co-card"})," avec ses champs nommÃ©s, sans branche JS de viewport : c'est du CSS pur sous"," ",e.jsx(s,{children:"@media (max-width: 639px)"})," dans"," ",e.jsx(s,{children:"theme-cleo-extras.css"}),", et rien ne change au-dessus de 640Â px."]}),e.jsxs(l,{children:[e.jsxs(r,{children:[e.jsx(n,{children:"Deux modes"}),", via"," ",e.jsx(s,{children:'<Table phone="stack" | "scroll">'})," â"," ",e.jsx(s,{children:'"stack"'})," par dÃ©faut, qui rend"," ",e.jsx(s,{children:'data-phone="stack"'})," sur le"," ",e.jsx(s,{children:"<table>"})," ; l'opposÃ©,"," ",e.jsx(s,{children:'"scroll"'}),", garde la grille et la fait dÃ©filer latÃ©ralement, sa premiÃ¨re colonne restant"," ",e.jsx(s,{children:"sticky left-0"})," avec le fond de carte."]}),e.jsxs(r,{children:[e.jsx(n,{children:"L'Ã©tiquetage"})," (",e.jsx(s,{children:"table-phone-labels.ts"}),","," ",e.jsx(s,{children:"labelTableForPhone(table)"}),", pur DOM et idempotent) â lit le texte de la ligne d'en-tÃªte (tenant compte de"," ",e.jsx(s,{children:"colSpan"}),") et pose ",e.jsx(s,{children:"data-label"})," sur chaque"," ",e.jsx(s,{children:"<td>"}),", plus"," ",e.jsx(s,{children:'data-cell="select" | "actions" | "title"'})," ","sur les cellules dÃ©tectÃ©es automatiquement : une cellule dont le seul contenu interactif est une case Ã  cocher devient"," ",e.jsx(s,{children:"select"}),", une cellule sans texte propre dont le seul contenu est un bouton, un lien ou un"," ",e.jsx(s,{children:"[role=menuitem]"})," devient ",e.jsx(s,{children:"actions"}),", et la premiÃ¨re cellule qui n'est ni l'une ni l'autre devient ",e.jsx(s,{children:"title"}),". Un ",e.jsx(s,{children:"data-cell"})," dÃ©jÃ  posÃ© n'est jamais Ã©crasÃ©. Un effet dans ",e.jsx(s,{children:"Table"})," ne s'exÃ©cute que lorsque"," ",e.jsx(s,{children:'matchMedia("(max-width: 639px)")'})," ","correspond ; un ",e.jsx(s,{children:"MutationObserver"})," sur le corps du tableau rÃ©Ã©tiquette les lignes ajoutÃ©es ensuite, mais n'est construit et connectÃ© que pendant que le mÃ©dia correspond, et dÃ©connectÃ© dÃ¨s qu'il cesse de correspondre (jamais d'observateur au repos sur ordinateur ou tablette)."]}),e.jsxs(r,{children:[e.jsx(n,{children:"DÃ©rogations explicites"}),", prioritaires sur la dÃ©tection automatique :"," ",e.jsx(s,{children:'<TableCell data-cell="title|meta|actions|select|hide">'})," ","et ",e.jsx(s,{children:'<TableHead data-label="â¦">'})," pour un en-tÃªte rÃ©duit Ã  une icÃ´ne."]}),e.jsxs(r,{children:["Sous 640Â px, ",e.jsx(s,{children:"<thead>"})," reste dans l'arbre d'accessibilitÃ© (les noms de colonnes restent lus au lecteur d'Ã©cran) mais est masquÃ© visuellement par la technique ",e.jsx(s,{children:"sr-only"})," (pas ",e.jsx(s,{children:"display: none"}),"). Une cellule ",e.jsx(s,{children:'data-cell="hide"'})," ou vide est masquÃ©e ; le pied de tableau (",e.jsx(s,{children:"<tfoot>"}

27),") reste un simple bloc, sans habillage carte."]}),e.jsxs(r,{children:[e.jsx(n,{children:"RÃ´les d'accessibilitÃ©"})," ","(",e.jsx(s,{children:"applyPhoneRoles"})," / ",e.jsx(s,{children:"clearPhoneRoles"}),", correctif 1) â passer ",e.jsx(s,{children:"<thead>"}),"/",e.jsx(s,{children:"<tbody>"}),"/",e.jsx(s,{children:"<tr>"}),"/",e.jsx(s,{children:"<td>"})," en ",e.jsx(s,{children:"display: block"})," leur retire leurs rÃ´les ARIA implicites. Tant que le mÃ©dia correspond, la mÃªme passe pose"," ",e.jsx(s,{children:'role="table"'})," sur ",e.jsx(s,{children:"<table>"}),","," ",e.jsx(s,{children:'role="rowgroup"'})," sur"," ",e.jsx(s,{children:"<thead>"}),"/",e.jsx(s,{children:"<tbody>"}),","," ",e.jsx(s,{children:'role="row"'})," sur ",e.jsx(s,{children:"<tr>"}),","," ",e.jsx(s,{children:'role="columnheader"'})," sur"," ",e.jsx(s,{children:"<th>"})," et ",e.jsx(s,{children:'role="cell"'})," sur"," ",e.jsx(s,{children:"<td>"})," â seulement lÃ  oÃ¹ l'auteur n'a pas dÃ©jÃ  posÃ© un rÃ´le, chacun marquÃ©"," ",e.jsx(s,{children:"data-phone-role"})," pour que"," ",e.jsx(s,{children:"clearPhoneRoles"})," retire exactement ce qu'elle a ajoutÃ© (et rien d'autre) dÃ¨s que le mÃ©dia cesse de correspondre. Jamais sur ",e.jsx(s,{children:'phone="scroll"'}),", qui garde ses rÃ´les natifs puisqu'il n'est jamais mis en ",e.jsx(s,{children:"display: block"}),"."]}),e.jsxs(r,{children:[e.jsx(n,{children:"DÃ©gradÃ© de dÃ©filement"})," â en mode"," ",e.jsx(s,{children:'"scroll"'}),", un ",e.jsx(s,{children:"mask-image"})," sur le conteneur (pas sur le ",e.jsx(s,{children:"<table>"})," lui-mÃªme, pour que la premiÃ¨re colonne ",e.jsx(s,{children:"sticky"})," reste pleinement opaque) estompe son bord droit pour indiquer qu'il reste du contenu Ã  faire dÃ©filer."]}),e.jsx(r,{children:"Une ligne qui navigue au clic garde son gestionnaire : toute la carte est la cible, et elle fait au moins 44Â px de haut."})]})]}),e.jsxs(t,{id:"sous-navs-telephone",title:"14l. Sous-navigations de section et titre de carte sur tÃ©lÃ©phone",children:[e.jsxs(i,{children:[e.jsx(s,{children:"client/src/components/section-sub-nav.tsx"})," rend la sous-navigation du support (Cas, Pannes), du centre de maintenance, de l'entrepÃ´t, des RMA et des vÃ©hicules. Sous 1024Â px (",e.jsx(s,{children:"useIsMobile()"}),"), elle rend la mÃªme rangÃ©e d'onglets collante que ",e.jsx(s,{children:"DetailLayout"})," ","(Â§14g) â les chaÃ®nes de"," ",e.jsx(s,{children:"client/src/components/detail/tab-row-classes.ts"})," ","importÃ©es par les deux â et rien autour (CHARGEOPS-633) : un seul conteneur ",e.jsx(s,{children:"sticky z-40 top-[var(--chrome-h-mobile)]"})," ","(",e.jsx(s,{children:'data-testid="<prÃ©fixe>-phone-row"'}),"), puis le"," ",e.jsx(s,{children:"<nav>"}),". Le fond blanc (",e.jsx(s,{children:"bg-background"}),", marine en sombre), le filet infÃ©rieur (",e.jsx(s,{children:"border-border"}),", le jeton ClÃ©o : 10Â % d'encre en clair, 10Â % de blanc en sombre ; un ",e.jsx(s,{children:"border-b"})," nu prenait le gris-200 par dÃ©faut de Tailwind, une ligne pÃ¢le sur le fond marine), le retrait de 8Â px et le dÃ©filement horizontal sont ceux de la rangÃ©e ; les onglets gardent leurs 44Â px (",e.jsx(s,{children:"min-h-11"}),") et leur soulignement de 2Â px. La rangÃ©e va d'un bord Ã  l'autre de la zone de contenu : 0 Ã  la largeur de l'Ã©cran sur tÃ©lÃ©phone, du bord du rail au bord droit sur tablette."]}),e.jsxs(i,{children:["Avant, la rangÃ©e restait dans la bande de bureau"," ",e.jsx(s,{children:".brand-page-subnav"})," (fond lavande, filets en haut et en bas) et dans la gouttiÃ¨re de page (",e.jsx(s,{children:"max-w-[var(--page-max)] mx-auto px-4 sm:px-6 lg:px-8"}),") : la rangÃ©e blanche flottait en retrait, avec des bandes lavande sur les cÃ´tÃ©s, au-dessus et au-dessous. Ã partir de 1024Â px rien ne change : la bande, la gouttiÃ¨re et la barre Ã  pastille sont les mÃªmes, balisage compris. ÃpinglÃ© par"," ",e.jsx(s,{children:"components/__tests__/section-sub-nav-phone-row.test.tsx"})," ","(pas de bande ni de gouttiÃ¨re, classes de ",e.jsx(s,{children:"DetailLayout"})," ","sous 1024Â px ; squelette de bureau figÃ© au-dessus)."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Titre de carte rÃ©pÃ©tÃ©."})," Sous 1024Â px, la barre du haut de la coquille tÃ©lÃ©phone et tablette affiche dÃ©jÃ  le titre de la page (",e.jsx(s,{children:"shell/top-bar.tsx"})," lit"," ",e.jsx(s,{children:"usePageMeta()"}),"). ",e.jsx(s,{children:"SettingsSectionShell"})," ","compare donc son ",e.jsx(s,{children:"title"})," (quand c'est une chaÃ®ne) Ã  celui de la mÃ©ta de page, lu par ",e.jsx(s,{children:"useCurrentPageTitle()"})," ","(",e.jsx(s,{children:"hooks/page-meta-context.ts"}),") â indÃ©fini hors d'un"," ",e.jsx(s,{children:"PageMetaProvider"}),", et alors rien ne change. Le contexte vit dans ce module Ã  part parce qu'une quarantaine de tests remplacent ",e.jsx(s,{children:"use-page-meta.tsx"})," par un"," ",e.jsx(s,{children:"vi.mock"})," qui n'expose que"," ",e.jsx(s,{children:"useSetPageMeta"})," : la coquille ne l'importe donc pas. S'ils sont Ã©gaux, le texte du titre prend ",e.jsx(s,{children:"max-lg:sr-only"})," ","(le ",e.jsx(s,{children:"<h2>"})," reste dans le plan de la page, souvent comme seul titre de section), et la description, la pastille d'icÃ´ne, le compteur et les actions restent : la description dit ce que la barre du haut ne dit pas. Sans icÃ´ne, sans compteur, sans surtitre et sans description, c'est toute la rangÃ©e du titre qui passe en"," ",e.jsx(s,{children:"max-lg:sr-only"}),", pour ne pas laisser une rangÃ©e vide et son espacement au-dessus des actions. Automatique plutÃ´t qu'une prop : une carte titrÃ©e autrement que sa page (les sections de la configuration, les onglets des RMA) garde son titre partout. Toutes les classes ajoutÃ©es sont en"," ",e.jsx(s,{children:"max-lg:"}),", donc rien ne change sur ordinateur. Le centre de maintenance, dont la tÃªte de carte n'est pas un"," ",e.jsx(s,{children:"SettingsSectionShell"}),", pose le mÃªme"," ",e.jsx(s,{children:"max-lg:sr-only"})," sur son bloc de titre. ÃpinglÃ© par"," ",e.jsx(s,{children:"configuration/__tests__/settings-section-shell-page-title.test.tsx"}),", montÃ© sous le vrai ",e.jsx(s,{children:"PageMetaProvider"}),"."]})]}),e.jsxs(t,{id:"squelettes-haptique",title:"14m. Squelettes et retour haptique (S4.4b)",children:[e.jsxs(i,{children:[e.jsx(n,{children:"Chargement de route en squelette (C

27HARGEOPS-658)."})," ",e.jsx(s,{children:"PageLoading"})," (",e.jsx(s,{children:"client/src/components/ui/page-loading.tsx"}),"), le repli"," ",e.jsx(s,{children:"<Suspense>"})," des routes paresseuses d'App.tsx, le chargeur du transfert de connexion et l'atterrissage du scan, est un squelette qui a la forme d'une page, construit avec ",e.jsx(s,{children:"ui/skeleton.tsx"})," : une barre de titre, puis une"," ",e.jsx(s,{children:"co-card"})," de quatre lignes (une pastille ronde, deux lignes de texte, une Ã©tiquette). Il remplace le logo de marque qui tournait et le ",e.jsx(s,{children:"Loader2"}),", sur tous les formats, y compris l'ordinateur : un squelette rÃ©serve la forme de la page, donc rien ne saute quand le morceau arrive. C'est un seul ",e.jsx(s,{children:"SkeletonBlock"}),", donc un seul"," ",e.jsx(s,{children:'role="status"'})," avec"," ",e.jsx(s,{children:"aria-busy"})," ; son ",e.jsx(s,{children:"aria-label"})," est"," ",e.jsx(s,{children:'t("pageLoading.label")'})," (Â« Chargement de la page Â»), ou le ",e.jsx(s,{children:"message"})," de l'appelant, affichÃ© aussi sous la carte. Il ne dessine aucun logo, donc la prop"," ",e.jsx(s,{children:"showLogo"})," a disparu : rien de propre au client ne peut s'afficher avant la connexion. Le reflet est portÃ© par le conteneur et s'arrÃªte sous"," ",e.jsx(s,{children:"prefers-reduced-motion"}),". Les chargements de la documentation (la vÃ©rification de l'audience et le morceau d'un chapitre) sont aussi des blocs"," ",e.jsx(s,{children:"SkeletonText"}),". ÃpinglÃ© par"," ",e.jsx(s,{children:"ui/__tests__/page-loading.test.tsx"}),"."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Roues des pages."})," Un balayage des"," ",e.jsx(s,{children:"Loader2"})," de ",e.jsx(s,{children:"client/src/pages"})," a trouvÃ© les chargements de page et de section dÃ©jÃ  sur"," ",e.jsx(s,{children:"SectionLoading"})," ou des squelettes, sauf les deux de la documentation. Ce qui reste est voulu : une roue dans un bouton, Ã  cÃ´tÃ© d'un contrÃ´le, un statut Â« enregistrementâ¦ Â», une ligne Â« charger plus Â» ou une Ã©criture en cours (les pages de dÃ©sabonnement), oÃ¹ un squelette annoncerait du contenu alors qu'il s'agit d'une action."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Retour haptique."})," ",e.jsx(s,{children:"haptic(kind)"})," (",e.jsx(s,{children:"client/src/lib/haptics.ts"}),") associe"," ",e.jsx(s,{children:'"tap" | "success" | "warning" | "error"'})," ","Ã  des motifs ",e.jsx(s,{children:"navigator.vibrate"})," : 10 ms,"," ",e.jsx(s,{children:"[12, 40, 12]"}),", 30 ms et ",e.jsx(s,{children:"[40, 60, 40]"}),". Il ne fait rien sans l'API Vibration (iOS, la plupart des navigateurs d'ordinateur) ni sous"," ",e.jsx(s,{children:"prefers-reduced-motion: reduce"}),", et il avale un appel refusÃ©. Usages : ",e.jsx(s,{children:"tap"})," quand une action de balayage de ResponsiveList est entiÃ¨rement rÃ©vÃ©lÃ©e (il remplace l'appel direct ",e.jsx(s,{children:"navigator.vibrate?.(10)"}),") et quand tu relÃ¢ches un tirer-pour-resynchroniser armÃ© ; ",e.jsx(s,{children:"success"})," quand un rapport de service est enregistrÃ© (brouillon, sur l'appareil ou final), qu'un rapport de maintenance est finalisÃ© et qu'une mise en service est terminÃ©e ; ",e.jsx(s,{children:"warning"})," ","dans l'",e.jsx(s,{children:"AlertDialogAction"})," partagÃ© quand"," ",e.jsx(s,{children:'variant="destructive"'})," (avant le"," ",e.jsx(s,{children:"onClick"})," de l'appelant) ; ",e.jsx(s,{children:"error"})," dans"," ",e.jsx(s,{children:"FormMessage"})," quand un champ devient invalide, au plus une fois par 400 ms, pour qu'une soumission avec cinq champs invalides ne vibre qu'une fois. ÃpinglÃ© par"," ",e.jsx(s,{children:"lib/__tests__/haptics.test.ts"})," et"," ",e.jsx(s,{children:"ui/__tests__/haptic-wiring.test.tsx"}),"."]})]}),e.jsxs(t,{id:"transitions-page-telephone",title:"14n. Transitions de page et barre du haut qui se rÃ©duit (S4.4a)",children:[e.jsxs(i,{children:[e.jsx(s,{children:"client/src/lib/nav/view-transition.ts"})," (CHARGEOPS-657). Sur tÃ©lÃ©phone et tablette, un changement de route passe par"," ",e.jsx(s,{children:"document.startViewTransition()"})," quand le navigateur l'offre : sur ",e.jsx(n,{children:"tÃ©lÃ©phone"}),", un court glissement (vers l'avant depuis la droite, en arriÃ¨re depuis la gauche : 16Â % de translation plus un fondu, 200Â ms, la courbe de dÃ©cÃ©lÃ©ration ",e.jsx(s,{children:"cubic-bezier(0.22, 1, 0.36, 1)"})," ","des entrÃ©es de KPI) ; sur ",e.jsx(n,{children:"tablette"}),", un fondu enchaÃ®nÃ© de 180Â ms (",e.jsx(s,{children:"cubic-bezier(0.4, 0, 0.2, 1)"}),"). Le sens est posÃ© sur ",e.jsx(s,{children:"<html data-nav-dir>"})," (avec"," ",e.jsx(s,{children:"data-nav-viewport"}),") le temps de la transition, et"," ",e.jsx(s,{children:"index.css"})," choisit l'animation d'aprÃ¨s ces deux attributs."]}),e.jsxs(l,{children:[e.jsxs(r,{children:[e.jsx(n,{children:"Un seul point de branchement pour les liens."})," ",e.jsx(s,{children:"App.tsx"})," enveloppe les routes dans"," ",e.jsx(s,{children:"<Router hook={useTransitionLocation}>"})," de wouter : chaque ",e.jsx(s,{children:"<Link>"})," et chaque ",e.jsx(s,{children:"navigate()"})," ","passent par ",e.jsx(s,{children:"transitionNavigate"}),". Le"," ",e.jsx(s,{children:"onClick"})," propre d'un lien s'exÃ©cute toujours avant et peut toujours annuler par"," ",e.jsx(s,{children:"preventDefault()"})," (l'appui long du menu â°, une rangÃ©e de liste aprÃ¨s un balayage) â c'est pourquoi ce n'est pas un intercepteur de clics global, qui aurait naviguÃ© avant eux et transformÃ© en navigation interne des liens qui doivent atteindre le serveur. Un ",e.jsx(s,{children:"replace"})," (une redirection) et un changement de la seule chaÃ®ne de requÃªte (un filtre) ne s'animent jamais."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Le â."})," Le gestionnaire de retour unique de la coquille (",e.jsx(s,{children:"goBack"})," de ",e.jsx(s,{children:"useBackAction"})," dans"," ",e.jsx(s,{children:"shell/use-back-action.ts"}),", utilisÃ© par la barre du haut et le balayage depuis le bord) appelle"," ",e.jsx(s,{children:"navigateBack(back, navigate)"})," : sens"," ",e.jsx(s,{children:'"back"'}),", que ce soit ",e.jsx(s,{children:"history.back()"})," ","(la fonction de mise Ã  jour attend le ",e.jsx(s,{children:"popstate"}),", 400Â ms au plus) ou le lien vers l'ancÃªtre. Tout ce qui veut dire Â« retour Â» (le balayage depuis le bord de l'app installÃ©e) appelle ce mÃªme gestionnaire, donc glisse lui aussi depuis la gauche."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Les onglets."})," Les ",e.jsx(s,{children:"<Link>"})," de la barre d'onglets portent ",e.jsx(s,{children:'data-nav-dir="none"'})," ","(wouter passe les props du lien comme options de navigation) : passer d'une section Ã  l'autre n'est pas aller Â« plus loin Â», donc rien ne glisse sur tÃ©lÃ©phone â c'est l'exception voulue. Une tablette fait son fondu quel que soit le sens, donc le rail n'a pas besoin de marqueur."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Quand c'est sautÃ©"})," (",e.jsx(s,{children:"transitionsEnabled"}),") : sur ordinateur (aucune coquille montÃ©e â"," ",e.jsx(s,{children:"useTransitionShell"}),", appelÃ© par la barre du haut, publie le viewport et remet Â« desktop Â» au dÃ©montage), sous"," ",e.jsx(s,{children:"prefers-reduced-motion"}),", dans la sÃ©paration liste/dÃ©tail de la tablette (mÃªme paire des deux cÃ´tÃ©s : la liste reste, seul le volet change) et sans l'API. SautÃ© veut dire ",e.jsx(s,{children:"navigate(to)"})," direct, rien d'autre."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Le chrome reste en place."}

27)," La barre du haut (",e.jsx(s,{children:'data-nav-chrome="top"'}),") et la barre d'onglets (",e.jsx(s,{children:'data-nav-chrome="tabs"'}),") reÃ§oivent"," ",e.jsx(s,{children:"view-transition-name: chrome-top"})," /"," ",e.jsx(s,{children:"chrome-tabs"})," seulement sous"," ",e.jsx(s,{children:"html[data-nav-dir]"}),", c'est-Ã -dire pendant une transition de navigation : le dÃ©voilement circulaire du bouton de thÃ¨me n'est pas touchÃ©. Le ",e.jsx(s,{children:"z-index"})," des rÃ¨gles du thÃ¨me sur ",e.jsx(s,{children:"::view-transition-new(root)"})," ","est remis Ã  ",e.jsx(s,{children:"auto"})," pendant ces transitions, sinon la nouvelle page passerait par-dessus la barre."]})]}),e.jsxs(i,{children:[e.jsx(n,{children:"Barre du haut qui se rÃ©duit (tÃ©lÃ©phone seulement)."})," ",e.jsx(s,{children:'useCompactHeader(24, viewport === "phone")'})," : un seul Ã©couteur de dÃ©filement passif, lu une fois par"," ",e.jsx(s,{children:"requestAnimationFrame"}),". Au-delÃ  de 24Â px vers le bas, la barre passe en compact ; elle revient au premier dÃ©filement vers le haut de plus de 4Â px, ou en haut de page. Le compact ne fait que des ",e.jsx(s,{children:"transform"})," : le fond marine est un calque Ã  part (",e.jsx(s,{children:"<span aria-hidden>"}),") qui remonte de 12Â px (",e.jsx(s,{children:"-translate-y-3"})," : 56 â 44Â px peints), la rangÃ©e remonte de 6Â px avec lui et le titre passe Ã  ",e.jsx(s,{children:"scale-[0.85]"})," (",e.jsx(s,{children:"origin-left"}),"). La boÃ®te du ",e.jsx(s,{children:"<header>"})," et ",e.jsx(s,{children:"--chrome-h-mobile"})," ","gardent leur pleine valeur : les rangÃ©es collantes (sous-navs, rangÃ©es d'onglets) ne sautent jamais, et les 12Â px libÃ©rÃ©s laissent voir la page. En compact, le"," ",e.jsx(s,{children:"<header>"})," passe en"," ",e.jsx(s,{children:"pointer-events-none"})," (la rangÃ©e reste cliquable) pour ne pas avaler les touchers sur cette bande. Chaque classe de transition porte ",e.jsx(s,{children:"motion-reduce:transition-none"})," : sous mouvement rÃ©duit, le changement est instantanÃ©. La passation du titre hÃ©ros de ",e.jsx(s,{children:"DetailLayout"})," ne change pas : c'est toujours ",e.jsx(s,{children:"meta.title"}),"."]}),e.jsxs(i,{children:["ÃpinglÃ© par ",e.jsx(s,{children:"lib/nav/__tests__/view-transition.test.tsx"})," ","(cas de ",e.jsx(s,{children:"transitionsEnabled"}),", enveloppe ou navigation directe, sens sur ",e.jsx(s,{children:"data-nav-dir"}),", onglets, sÃ©paration, pas de transition imbriquÃ©e, bascule du compact,"," ",e.jsx(s,{children:"--chrome-h-mobile"})," intact) et par les tests de coquille (",e.jsx(s,{children:"phone-shell.test.tsx"})," : liens d'onglets marquÃ©s, compact par transform seulement ;"," ",e.jsx(s,{children:"tablet-shell.test.tsx"})," : la barre de tablette ne se rÃ©duit jamais)."]})]}),e.jsxs(t,{id:"site-info-mobile",title:"15. Site info mobile",children:[e.jsxs(i,{children:[e.jsx(s,{children:"client/src/components/mobile-site-info.tsx"})," â carte d'info site optimisÃ©e pour mobile :"]}),e.jsxs(l,{children:[e.jsxs(r,{children:["Contenu structurÃ© en ",e.jsx(n,{children:"rangÃ©es uniformes"})," sÃ©parÃ©es par des filets (",e.jsx(s,{children:"divide-y"}),") : chaque rangÃ©e = pastille d'icÃ´ne (",e.jsx(s,{children:".co-chip"}),") + micro-Ã©tiquette majuscule + valeur + bouton d'action 36 Ã 36 px Ã  droite."]}),e.jsxs(r,{children:["RangÃ©es : adresse (action ",e.jsx(s,{children:"Navigation"})," â Google Maps via ",e.jsx(s,{children:"window.open(...maps...)"}),"), tÃ©lÃ©phone (action"," ",e.jsx(s,{children:"PhoneOutgoing"})," â ",e.jsx(s,{children:"openTeamsCall()"})," qui lance Microsoft Teams), organisation (badge Ã©ditable inline), contacts (monogramme d'initiales, nom/rÃ´le, actions courriel + appel). Logo de plateforme OCPP (OCPP/ChargeLab/Cleo/InControl/Synop) dans l'en-tÃªte."]}),e.jsxs(r,{children:["Ãdition de l'organisation : ",e.jsx(s,{children:"OrganizationSelect"})," + boutons check/cross â"," ",e.jsx(s,{children:"useMutation(api.sites.mutations.update)"}),"."]}),e.jsxs(r,{children:["Apparition en cascade des rangÃ©es via"," ",e.jsx(s,{children:"tailwindcss-animate"})," (",e.jsx(s,{children:"animate-in"})," +"," ",e.jsx(s,{children:"animationDelay"})," par index,"," ",e.jsx(s,{children:"motion-reduce:animate-none"}),")."]})]})]}),e.jsxs(t,{id:"site-selector-mobile",title:"16. Site selector mobile",children:[e.jsxs(i,{children:["Sous 1024 px, l'accueil rend"," ",e.jsx(s,{children:"client/src/components/home/mobile-site-picker.tsx"})," ","(CHARGEOPS-634) : le mÃªme ",e.jsx(s,{children:"Command"})," cmdk que l'en-tÃªte desktop (recherche + ",e.jsx(s,{children:"SiteCommandItems"}),"), ouvert dans une feuille (",e.jsx(s,{children:'Dialog mobile="sheet"'}),","," ",e.jsxs(s,{children:["confirmDiscard=","{false}"]})," â une recherche n'est pas une saisie Ã  protÃ©ger) sur tÃ©lÃ©phone, et dans un"," ",e.jsx(s,{children:"Popover"})," sous son dÃ©clencheur sur tablette. RangÃ©es de 44 px (",e.jsx(s,{children:"[&_[cmdk-item]]:min-h-11"}),") et champ en 16 px sur tÃ©lÃ©phone (iOS zoome sur un champ plus petit). Focus Ã  l'ouverture : la tablette place le curseur dans la recherche (comportement Radix, comme le desktop) ; le tÃ©lÃ©phone donne le focus Ã  la liste, pas au champ â le clavier couvrirait la moitiÃ© de la feuille, et on choisit surtout en faisant dÃ©filer. Le bouton Â«Â Changer de siteÂ Â» du bandeau collant ouvre le mÃªme sÃ©lecteur (Ã©tat ",e.jsx(s,{children:"open"})," contrÃ´lÃ© par"," ",e.jsx(s,{children:"home.tsx"}),")."]}),e.jsxs(i,{children:[e.jsxs(n,{children:[e.jsx(s,{children:"orgOverviewRows"})," : les organisations au doigt et au clavier."]})," ","Avec ",e.jsx(s,{children:"onOrgSelect"}),", cette option de"," ",e.jsx(s,{children:"SiteCommandItems"})," ajoute sous chaque en-tÃªte d'organisation une vraie rangÃ©e ",e.jsx(s,{children:"CommandItem"})," ","Â«Â â Vue d'ensemble de l'organisationÂ Â» (",e.jsx(s,{children:'data-testid="org-overview-row-<orgId>"'}),") qui appelle ",e.jsx(s,{children:"onOrgSelect"}),". Elle reste dans les rÃ©sultats tant que la recherche touche le nom de l'organisation (sa valeur et ses ",e.jsx(s,{children:"keywords"})," portent ce nom, donc le filtre de cmdk suit notre score), et elle se classe ",e.jsx(n,{children:"avec son groupe"})," ",": l'organisation est notÃ©e comme un site qui porterait son nom (",e.jsx(s,{children:'siteMatchScore(org.n

27ame, "", q)'}),"), ce score fait remonter le groupe, et la rangÃ©e se place aprÃ¨s les seuls sites qui correspondent mieux que lui. Seul le sÃ©lecteur mobile de l'accueil la passe : le popover de l'en-tÃªte desktop n'en a pas et ne change pas."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Hauteur, dÃ©filement et droits."})," La feuille du tÃ©lÃ©phone a une hauteur fixe (",e.jsx(s,{children:"h-[85dvh]"})," sur"," ",e.jsx(s,{children:"DialogContent"}),", que ",e.jsx(s,{children:"stripHeightScrollClasses"})," ","laisse passer puisqu'il ne retire que les ",e.jsx(s,{children:"max-h-*"}),") : le titre et le ",e.jsx(s,{children:"Command"})," sont dans une colonne flex"," ",e.jsx(s,{children:"h-full min-h-0"}),", le ",e.jsx(s,{children:"Command"})," prend"," ",e.jsx(s,{children:"flex-1 min-h-0"})," et la liste ",e.jsx(s,{children:"flex-1 max-h-[none]"})," ","(la valeur arbitraire, parce que twMerge ne dÃ©doublonne pas"," ",e.jsx(s,{children:"max-h-none"})," avec le ",e.jsx(s,{children:"max-h-[300px]"})," de"," ",e.jsx(s,{children:"CommandList"}),"). Sans Ã§a, la feuille suivait la hauteur de son contenu et le champ de recherche descendait Ã  chaque lettre. C'est bien ",e.jsx(s,{children:"h-"})," et pas ",e.jsx(s,{children:"min-h-"})," : quand le clavier s'ouvre, vaul rÃ©duit la feuille par un ",e.jsx(s,{children:"height"})," ","en ligne, qu'un ",e.jsx(s,{children:"min-height"})," bloquerait. Sur tablette, le bandeau Â«Â Changer de siteÂ Â» (",e.jsx(s,{children:"md:hidden"}),") reste visible de 640 Ã  767 px, alors que le dÃ©clencheur du popover est en haut du contenu : une fois la page dÃ©filÃ©e, Radix placerait le popover au-dessus de l'Ã©cran. Ã l'ouverture, un"," ",e.jsx(s,{children:"useLayoutEffect"})," appelle donc"," ",e.jsxs(s,{children:["scrollIntoView(","{",' block: "nearest", behavior: "instant" ',"}",")"]})," ","sur le dÃ©clencheur, dont le"," ",e.jsx(s,{children:"scroll-mt-[calc(var(--chrome-h-mobile)+3rem)]"})," le garde sous l'en-tÃªte fixe et le bandeau ; c'est sans effet quand on l'ouvre depuis le dÃ©clencheur lui-mÃªme. On a gardÃ© le popover plutÃ´t qu'ouvrir une feuille depuis le bandeau : une seule prÃ©sentation par largeur, et ",e.jsx(s,{children:'mobile="sheet"'})," ","n'agit pas au-dessus de 640 px (ce serait une modale centrÃ©e). La liste du popover est plafonnÃ©e par"," ",e.jsx(s,{children:"--radix-popover-content-available-height"})," (moins le champ, 480 px au plus). Les rangÃ©es d'aperÃ§u et les en-tÃªtes cliquables n'existent que si ",e.jsx(s,{children:"can.viewOrganizationPage"})," ","(mÃªme rÃ¨gle qu'",e.jsx(s,{children:"OrganizationLink"}),"), pour les deux sÃ©lecteurs de l'accueil. Le dÃ©clencheur annonce"," ",e.jsx(s,{children:'aria-haspopup="dialog"'})," dans les deux modes, et le ",e.jsx(s,{children:"Command"})," de la feuille porte"," ",e.jsx(s,{children:"aria-label"})," Â«Â SÃ©lectionner un siteÂ Â»."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Un seul jeu de rangÃ©es pour tous les sÃ©lecteurs de site."})," ",e.jsx(s,{children:"client/src/components/site-combobox.tsx"})," exporte trois choses :"," ",e.jsx(s,{children:"groupSitesByOrganization"})," (le regroupement pur),"," ",e.jsx(s,{children:"SiteCommandItems"})," (les rangÃ©es cmdk â en-tÃªte d'organisation avec pastille, compteur et filet teintÃ©, tri alphabÃ©tique, bloc Â«Â Non assignÃ©Â Â», classement des rÃ©sultats par ",e.jsx(s,{children:"siteMatchScore"}),") et"," ",e.jsx(s,{children:"SiteCombobox"})," (le trigger + popover clÃ©s en main). L'en-tÃªte d'accueil monte ",e.jsx(s,{children:"SiteCommandItems"})," dans son propre popover ; les pages de filtre montent ",e.jsx(s,{children:"SiteCombobox"}),", qui rend exactement les mÃªmes rangÃ©es."]}),e.jsxs(i,{children:["Le groupement est ",e.jsx(n,{children:"pilotÃ© par les donnÃ©es, pas par une option"})," ",": ",e.jsx(s,{children:"SiteCombobox"})," ne s'abonne Ã "," ",e.jsx(s,{children:"api.organizations.queries.list"})," que si au moins un site passÃ© porte un ",e.jsx(s,{children:"organizationId"}),", et ",e.jsx(s,{children:"groupSitesByOrganization"})," ","renvoie ",e.jsx(s,{children:"null"})," â donc liste plate â quand rien ne se rattache Ã  une organisation vivante. ConsÃ©quence pratique : un appelant qui passe une forme allÃ©gÃ©e ",e.jsx(s,{children:"{ id, name }"})," obtient une liste plate"," ",e.jsx(n,{children:"sans erreur ni avertissement"}),". C'est ce qui distinguait les filtres de site du Centre de maintenance, des Rapports d'entretien, des Garanties prolongÃ©es et des deux onglets RMA du sÃ©lecteur de l'accueil ; chacun fournit dÃ©sormais ",e.jsx(s,{children:"organizationId"})," dans ses options."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Un en-tÃªte d'organisation navigue ou sÃ©lectionne"}),", jamais les deux. ",e.jsx(s,{children:"onOrgSelect"})," seul = navigation (",e.jsx(s,{children:"/organizations/:orgId"}),") : l'en-tÃªte porte une flÃ¨che"," ",e.jsx(s,{children:"ArrowUpRight"})," au survol. Ajouter"," ",e.jsx(s,{children:"orgValue"})," (l'id sÃ©lectionnÃ©, ",e.jsx(s,{children:'""'})," ","quand rien ne l'est) bascule le composant en"," ",e.jsx(n,{children:"mode sÃ©lection"})," : la flÃ¨che cÃ¨de la place Ã  une coche sur l'organisation active, son en-tÃªte se teinte, le trigger affiche le nom de l'organisation avec sa pastille, et la rangÃ©e Â«Â Tous les sitesÂ Â» perd sa coche â sinon elle prÃ©tendrait Ãªtre le choix actif pendant qu'une organisation filtre la liste. Le discriminant est ",e.jsx(s,{children:"orgValue !== undefined"}),", donc les ~15 appelants qui naviguent ne changent pas de rendu. C'est le filtre de ",e.jsx(a,{children:"/support"})," qui l'utilise : site et organisation sont deux grains d'",e.jsx(n,{children:"un seul"})," contrÃ´le, l'un remplaÃ§ant l'autre (voir ",e.jsx(s,{children:"filterByOrg"})," pour l'infobulle). Limite hÃ©ritÃ©e : cmdk rend ses en-tÃªtes de groupe dans un conteneur ",e.jsx(s,{children:"aria-hidden"}),", donc l'en-tÃªte reste un bouton ",e.jsxs(s,{children:["tabIndex=",-1]})," â une affordance au pointeur."]})]}),e.jsxs(t,{id:"tables-responsives",title:"17. Tables responsives â passage en cartes",children:[e.jsxs(i,{children:["Tables (utilisant ",e.jsx(s,{children:"@/components/ui/table"}),") sont remplacÃ©es par des ",e.jsx(n,{children:"listes de cartes"})," sur mobile dans :"]}),e.jsxs(l,{children:[e.jsxs(r,{children:["All Chargers (",e.jsx(s,{children:"client/src/pages/all-chargers/"}),")."]}),e.jsx(r,{children:"RMA, Warehouse, User Management."})]}),e.jsxs(i,{children:["Le pattern :"," ",e.jsx(s,{children:"{isMobile ? <CardList /> : <Table />}"}),"."]})]}),e.jsx(t,{id:"optimisations-touch",title:"18. Optimisations touch",children:e.jsxs(l,{children:[e.jsxs(r,{children:["Toute cible tactile fait au moins 44 Ã 44 px sous un pointeur imprÃ©cis, et ce sont les composants partagÃ©s qui portent ce minimum (CHARGEOPS-506 et CHARGEOPS-605 ci-dessous) : une page ne dimensionne pas ses boutons pour le toucher. Les tailles au repos (souris) ne changent pas : un bouton Ã  icÃ´ne garde son dessin (",e.jsx(s,{children:"h-9 w-9 p-0"}),", 36 Ã 36 px, ou plus petit) et ne passe Ã  44 qu'au toucher ; les actions principales utilisent"," ",e.jsx(s,{children:"h-14 px-4"}),"."]}),e.jsxs(r,{children:["Tap highlight neutralisÃ© :"," ",e.jsx(s,{children:"-webkit-tap-highlight-color: transparent"})," (sur"," ",e.jsx(s,{children:".btn-3d"}),")."]}),e.jsxs(r,{children:[e.jsx(s,{children:"cursor-pointer"})," explicite sur les zones tactiles non-buttons."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Standards de formulaire (CHARGEOPS-506)"})," :"," ",e.jsx(s,{children:"Input"}),", ",e.jsx(s,{children:"SelectTrigger"})," et les tailles"," ","par dÃ©faut/",e.jsx(s,{children:"sm"})," de ",e.jsx(s,{children:"Button"})," portent"," ",e.jsx(s,{children:"[@media(pointer:coarse)]:min-h-11"})," â une hauteur minimale de 44 px sur tout pointeur imprÃ©cis (Â« coarse Â»), y compris un portable Ã  Ã©cran tactile en largeur bureau, pas seulement sous un point de rupture. Les champs de texte (",e.jsx(s,{children:"Input"}),", ",e.jsx(s,{children:"SelectTrigger"}),","," ",e.jsx(s,{children:"Textarea"}),") portent"," ",e.jsx(s,{children:"text-base md:text-sm"})," pour qu'un champ ne soit jamais plus petit que 16 px sur tÃ©lÃ©phone â la taille qui empÃªche le zoom automatique au focus de Safari iOS. Sur tÃ©lÃ©phone, ",e.jsx(s,{children:"DatePicker"})," affiche un"," ",e.jsx(s,{children:'<input type="date">'})," natif au lieu du Popover+Calendar, pour que la saisie de date utilise le sÃ©lecteur du systÃ¨me ; tablette et bureau gardent le Popover+Calendar, et le contrat d'entrÃ©e/sortie"," ",e.jsx(s,{children:"Date"})," reste identique pour les appelants."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Cibles tactiles partagÃ©es (CHARGEOPS-605)"})," : la rÃ¨gle des 44Ã44 vit dans les composants partagÃ©s, pas dans chaque page. Sous un pointeur imprÃ©cis (Ã  toute largeur), les tailles"," ",e.jsx(s,{children:"xs"}),", ",e.jsx(s,{children:"icon"})," et ",e.jsx(s,{children:"icon-xs"})," de"," ",e.jsx(s,{children:"Button"})," portent ",e.jsx(s,{children:"min-h-11 min-w-11"}),", et une entrÃ©e ",e.jsx(s,{children:"compoundVariants"})," ajoute"," ",e.jsx(s,{children:"min-w-11"})," aux tailles ",e.jsx(s,{children:"default"}),"/",e.jsx(s,{children:"sm"})," de toutes les variantes sauf ",e.jsx(s,{children:"link"})," ","(un ",e.jsx(s,{children:'size="sm" className="h-6 w-6 p-0"'})," Ã  icÃ´ne seule fait maintenant 44 de large en plus de 44 de haut)."," ",e.jsx(s,{children:"min-*"})," est une propriÃ©tÃ© CSS Ã  part et un groupe twMerge Ã  part : le ",e.jsx(s,{children:"h-6 w-6"})," de l'appelant et le 32Ã32 fixe de ",e.jsx(s,{children:".btn-icon.btn-xs"})," (index.css) restent la taille au repos, et le minimum ne gagne qu'au toucher, sans"," ",e.jsx(s,{children:"!important"}),". Les segments d'",e.jsx(s,{children:"ActionToolbar"})," reÃ§oivent le mÃªme minimum ; au toucher, le conteneur perd sa hauteur fixe et, sous 640 px, passe Ã  la ligne au lieu d'Ã©craser les segments Ã  26 px. Ce retour Ã  la ligne dÃ©pend lui aussi du pointeur imprÃ©cis : Ã  la souris, la bande garde sa hauteur fixe et son"," ",e.jsx(s,{children:"overflow-hidden"})," sur une seule ligne, oÃ¹ une deuxiÃ¨me ligne serait coupÃ©e. ",e.jsx(s,{children:"TabsTrigger"})," reÃ§oit"," ",e.jsx(s,{children:"min-h-11"})," (et ",e.jsx(s,{children:"TabsList"})," ",e.jsx(s,{children:"h-auto"}),") au toucher Ã  toute largeur, en plus de la rangÃ©e d'onglets tÃ©lÃ©phone. La barre d'onglets de la page de site garde sa liste en ",e.jsx(s,{children:"h-full"})," Ã  partir de 640 px au toucher (",e.jsx(s,{children:"sm:[@media(pointer:coarse)]:h-full"}),") : les onglets de 44 px se centrent alors sur la zone de contenu de 40 px de la barre, pile dans l'indicateur coulissant (",e.jsx(s,{children:"sm:top-2 sm:bottom-2"}),"), lÃ  oÃ¹ ",e.jsx(s,{children:"h-auto"})," les faisait descendre de 6 px sous lui. Les lignes ",e.jsx(s,{children:"Item"}),","," ",e.jsx(s,{children:"CheckboxItem"}),", ",e.jsx(s,{children:"RadioItem"})," et"," ",e.jsx(s,{children:"SubTrigger"})," de ",e.jsx(s,{children:"DropdownMenu"})," font 44 de haut, et ",e.jsx(s,{children:"SubContent"})," dÃ©file dans la hauteur disponible comme ",e.jsx(s,{children:"Content"}),". Les flÃ¨ches de mois de"," ",e.jsx(s,{children:"Calendar"})," sont des Button ",e.jsx(s,{children:"icon-xs"}),", elles suivent ; ses cellules de jour ont un plancher de 44 px pour que sept d'entre elles tiennent le bouton de jour de 44 px."," ",e.jsx(s,{children:"Checkbox"})," garde sa case de 16 px et reÃ§oit un"," ",e.jsx(s,{children:"::before"})," invisible qui dÃ©borde de 15 px de chaque cÃ´tÃ© de sa zone intÃ©rieure (une zone de 44Ã44 ; 14 px avant CHARGEOPS-611, ce qui laissait 42Ã42 dans la bordure de 1 px). Ce pseudo-Ã©lÃ©ment est positionnÃ©, donc il se peint par-dessus le texte voisin : dans une liste serrÃ©e d'options avec libellÃ©, toucher un libellÃ© cochait la case de la rangÃ©e d'Ã  cÃ´tÃ©. Il disparaÃ®t donc partout oÃ¹ un libellÃ© prend dÃ©jÃ  le toucher : dans un ",e.jsx(s,{children:"<label>"}),", devant un ",e.jsx(s,{children:"<Label htmlFor>"})," frÃ¨re (",e.jsx(s,{children:":has(~label)"}),", qui saute l'input cachÃ© que Radix insÃ¨re dans un formulaire), et avec"," ",e.jsx(s,{children:"hitArea={false}"}

27)," quand le libellÃ© est dans un Ã©lÃ©ment frÃ¨re que le CSS ne voit pas. Dans une cellule d'en-tÃªte de tableau, il s'arrÃªte au bas de la case. Les rangÃ©es trop basses pour tenir deux zones de 44 px sans chevauchement passent plutÃ´t Ã  44 au toucher (les tableaux de rÃ©approvisionnement, d'import de contrats et de couverture de l'aide Ã  la vente, la liste de champs de la synchronisation de modÃ¨les). La ",e.jsx(s,{children:"ConnectivityPill"})," de l'en-tÃªte garde son dessin de 24 px avec un"," ",e.jsx(s,{children:"::before"})," de 10 px au-dessus et au-dessous. Sous 1024 px (640 px avant CHARGEOPS-611), les libellÃ©s de"," ",e.jsx(s,{children:"CleoStatTile"})," rÃ©trÃ©cissent et se coupent avec un trait d'union au lieu de passer sous le bord de la carte. Chaque ajout est derriÃ¨re"," ",e.jsx(s,{children:"[@media(pointer:coarse)]:"})," (ou ",e.jsx(s,{children:"max-sm:"})," ","pour la mise en page) : Ã  la souris, le rendu est identique. Les appels qui avaient ajoutÃ© ces classes Ã  la main (#615, #622, #629) sont des doublons sans effet : twMerge les fusionne et"," ",e.jsx(s,{children:"min-*"})," est idempotent. Une nouvelle page n'a plus Ã  les ajouter. ÃpinglÃ© par"," ",e.jsx(s,{children:"ui/__tests__/coarse-touch-targets.test.tsx"})," (chaque variante Ã taille : les classes tactiles sont lÃ , les classes souris sont inchangÃ©es ; les suppressions et l'option de retrait de la case Ã  cocher, le retour Ã  la ligne de la barre d'actions rÃ©servÃ© au toucher, le dÃ©filement du sous-menu),"," ",e.jsx(s,{children:"pages/__tests__/home-tab-bar-touch.test.tsx"})," (la gÃ©omÃ©trie de la barre d'onglets) et"," ",e.jsx(s,{children:"offline/__tests__/connectivity-pill-touch.test.tsx"}),"."]}),e.jsxs(r,{children:[e.jsx(n,{children:"RangÃ©es coupÃ©es et cibles propres aux pages (CHARGEOPS-612)"})," : l'audit final au tÃ©lÃ©phone a trouvÃ© des rangÃ©es d'actions et de filtres plus larges que leur carte, dont le bord"," ",e.jsx(s,{children:"overflow-hidden"})," rendait des boutons inatteignables. Elles passent Ã  la ligne sous 1024 px (",e.jsx(s,{children:"max-lg:flex-wrap"})," ","ou ",e.jsx(s,{children:"max-sm:flex-wrap"}),") ; la tÃªte de"," ",e.jsx(s,{children:"SettingsSectionShell"})," laisse en plus ses actions rÃ©trÃ©cir (",e.jsx(s,{children:"max-lg:min-w-0 max-lg:shrink"}),"), ce qui rÃ¨gle d'un coup RMA, rapports d'entretien et contrats ; son bloc de titre part d'une base de 16 rem"," ","(",e.jsx(s,{children:"sm:max-lg:basis-64 sm:max-lg:grow"}),"), si bien que la ligne ne casse que quand 16 rem de titre et les actions ne tiennent pas : une longue description seule ne fait plus descendre les actions (gestion des utilisateurs, configuration). Les petites cibles propres Ã  une page prennent"," ",e.jsx(s,{children:"[@media(pointer:coarse)]:min-h-11"})," ; les blocs de la rÃ©glette de Ma journÃ©e gardent leurs 26 px et reÃ§oivent un"," ",e.jsx(s,{children:"::before"})," invisible de 44 px (tous mÃ¨nent au mÃªme endroit, un chevauchement est sans effet), et la barre de la semaine dÃ©file de cÃ´tÃ© sous 640 px avec des jours de 44 px. Au bureau, seules les classes de la tÃªte de la liste des messages changent (",e.jsx(s,{children:"flex-wrap"}),", ",e.jsx(s,{children:"ml-auto"}),"), un changement voulu : dans sa colonne de 320 px, Â« Nouvelle conversation Â» Ã©tait coupÃ© de 19 px en franÃ§ais et Â« New conversation Â» de 8,5 px en anglais (neuf conversations). La tÃªte ne passe Ã  la ligne que si ses actions ne tiennent pas ; sinon rien ne bouge. ÃpinglÃ© par ",e.jsx(s,{children:"__tests__/phone-clipped-rows.test.ts"}),", qui vÃ©rifie aussi qu'une fois les classes conditionnelles retirÃ©es, chaque liste de classes est celle d'avant."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Cibles tactiles partagÃ©es, deuxiÃ¨me passe (CHARGEOPS-611)"})," ",": les contrÃ´les que CHARGEOPS-605 n'avait pas touchÃ©s, et la rÃ¨gle des 44Ã44 vaut aussi aux largeurs de tablette (700/820 px au toucher, tableaux de bureau compris). Un ",e.jsx(s,{children:"::before"})," ","en position absolue se place contre la zone intÃ©rieure, dans la bordure : ses dÃ©calages comptent donc aussi la bordure."," ",e.jsx(s,{children:"Switch"})," garde sa piste de 44Ã24 et reprend le geste de la case Ã  cocher : un ",e.jsx(s,{children:"::before"})," invisible de 10 px au-dessus et au-dessous (dÃ©calages de 2 px et 12 px au-delÃ  de sa bordure de 2 px ; une zone de 44Ã44), retirÃ© dans un"," ",e.jsx(s,{children:"<label>"})," ou devant un libellÃ© frÃ¨re, avec l'option ",e.jsx(s,{children:"hitArea"})," pour s'en passer. Les segments de ",e.jsx(s,{children:"ViewModeToggle"})," se touchent (0 px d'Ã©cart), donc ils grandissent eux-mÃªmes :"," ",e.jsx(s,{children:"min-h-11 min-w-11 justify-center"})," au toucher. Le dÃ©clencheur du popover de ",e.jsx(s,{children:"DatePicker"})," (tablette et bureau) reÃ§oit le mÃªme ",e.jsx(s,{children:"min-h-11"})," tactile qu'",e.jsx(s,{children:"Input"})," et ",e.jsx(s,{children:"Select"}),"."," ",e.jsx(s,{children:"SiteLink"}),", ",e.jsx(s,{children:"OrganizationLink"}),","," ",e.jsx(s,{children:"ChargerLink"})," et ",e.jsx(s,{children:"OrganizationBadgeLink"})," ","(",e.jsx(s,{children:"entity-links.tsx"}),") sont des noms de 16 Ã  28 px dans du texte courant, des lignes de fiche et des cellules de tableau : la boÃ®te du lien ne peut pas grandir sans Ã©carter ses lignes. Un"," ",e.jsx(s,{children:"::before"})," invisible couvre donc la largeur du nom et"," ",e.jsx(s,{children:"calc(50% - 22px)"})," au-dessus et au-dessous de son milieu, soit 44 px quelle que soit la taille du texte. La rÃ¨gle que gardent toutes les autres formes : une zone ne couvre jamais un autre lien, car un pseudo-Ã©lÃ©ment positionnÃ© se peint par-dessus toute boÃ®te non positionnÃ©e et toute boÃ®te positionnÃ©e plus tÃ´t, et leur prend leurs touchers. Un nom imprimÃ©"," ",e.jsx(n,{children:"sous"})," un autre garde son propre bord haut (",e.jsx(s,{children:"top: 0"}),") et la portÃ©e vers le bas de la forme centrÃ©e, jamais plus : d'office quand il suit un lien frÃ¨re dans une colonne (",e.jsx(s,{children:".flex-col > a ~ .x"})," : support, rapports de service, RMA, centre de maintenance), et avec"," ",e.jsx(s,{children:'hitArea="below"'})," (rendu en"," ",e.jsx(s,{children:'data-touch-area="below"'}),") quand le nom au-dessus est dans un autre conteneur, qu'aucun sÃ©lecteur de frÃ¨re ne voit : le tableau des rapports d'entretien (le site dans son propre ",e.jsx(s,{children:"span.truncate"}),"), le tableau par site des indicateurs opÃ©rationnels et la bulle de la carte des modems. MesurÃ© avant la correction, un toucher sur le bas du nom de site y ouvrait l'organisation. Des frÃ¨res cÃ´te Ã  cÃ´te gardent la zone centrÃ©e (elle ne dÃ©borde jamais sur le cÃ´tÃ©). Dans la derniÃ¨re rangÃ©e d'un tableau (",e.jsx(s,{children:"tr:last-child"}),"), la zone s'arrÃªte au bas du lien : le badge d'organisation descendait de 44 px et finissait 11 px sous le tableau, si bien que l'enveloppe ",e.jsx(s,{children:"overflow-x-auto"})," de"," ",e.jsx(s,{children:"/service-reports"})," dÃ©filait de 11 px Ã  la verticale au toucher. La zone d'un nom du bas ne fait donc pas 44 px de haut : empilÃ© ou marquÃ© ",e.jsx(s,{children:"below"}),", il reÃ§oit environ h/2 + 22 px (30 Ã  32 px pour un nom de 16 Ã  20 px), et dans la derniÃ¨re rangÃ©e d'un tableau seulement sa propre boÃ®te, environ 20 px. Un lien en ",e.jsx(s,{children:"truncate"})," coupe son propre pseudo-Ã©lÃ©ment : il prend plutÃ´t 14 px de marge intÃ©rieure verticale et la mÃªme marge nÃ©gative, et les rÃ¨gles Â« empilÃ© Â» et Â« derniÃ¨re rangÃ©e Â» en retirent le cÃ´tÃ© concernÃ©. Les listes denses ou qui passent Ã  la ligne relÃ¨vent de l'appelant : ",e.jsxs(s,{children:["hitArea=","{false}"]})," retire le traitement tactile, ou les rangÃ©es prennent un pas de 44 px au toucher. La lÃ©gende des organisations de la carte des clients (rangÃ©es de 20 px, oÃ¹ la zone de chaque nom couvrait ses voisins) prend un ",e.jsx(s,{children:"min-h-11"})," tactile par rangÃ©e ; les lignes d'identitÃ© du billet, du rapport d'entretien et de la borne Ã©cartent leurs lignes repliÃ©es de 12 px au toucher (la portÃ©e d'un nom de 20 px), la rangÃ©e de pastilles de la carte RMA de 10 px, et les puces de sites de la gestion des utilisateurs de 22 px."," ",e.jsx(s,{children:"user-management.tsx"})," ne porte plus sa propre copie de la marge des liens tronquÃ©s. Un nom placÃ© dans un ancÃªtre qui coupe (le"," ",e.jsx(s,{children:".co-spec dd"}

27)," des plaques d'entretien) ne garde que ce que cet ancÃªtre montre. ",e.jsx(s,{children:"entityLinkTextClass"}),", exportÃ©, ne change pas. La barre d'outils de l'Ã©diteur du rapport de service (l'Ã©diteur TipTap, qui a gardÃ© les noms de classe ",e.jsx(s,{children:".rdw-option"}),") donne 44Ã44 Ã  chaque outil dans un bloc ",e.jsx(s,{children:"@media (pointer: coarse)"})," de sa propre feuille de style, et la barre passe Ã  la ligne. Le bouton qui replie un groupe de rapports d'entretien garde son carrÃ© de 26 px avec un ",e.jsx(s,{children:"::before"})," de 9 px (dans l'Ã©cart de 10 px du bandeau), comme les actions du bandeau des plaques le faisaient dÃ©jÃ  avec 6 px. Ces deux actions se touchent (la gouttiÃ¨re du bandeau n'a aucune marge), donc lÃ  oÃ¹ elles se rencontrent aucune zone ne dÃ©borde sur l'autre : celle de l'aperÃ§u rapide s'arrÃªte Ã  son bord droit, celle de la suppression Ã  son bord gauche (la suppression se peint aprÃ¨s, et ses 6 px prenaient les touchers sur la droite de l'aperÃ§u). Leurs cÃ´tÃ©s extÃ©rieurs vont donc Ã  12 px au lieu de 6 (Ã  gauche de l'aperÃ§u il n'y a que la date de visite en texte simple, Ã  droite de la suppression que le bord du bandeau) : chacune refait 44Ã44. Le dÃ©clencheur de"," ",e.jsx(s,{children:"ChargerMultiSelect"})," reÃ§oit le ",e.jsx(s,{children:"min-h-11"})," ","tactile ; le bouton de 16 px qui retire une puce reÃ§oit un"," ",e.jsx(s,{children:"::before"})," de 14 px. Cette zone dÃ©passe la puce de 22 px de 11 px, et deux rangÃ©es s'avancent l'une vers l'autre : les rangÃ©es de puces s'Ã©cartent donc de 22 px au toucher, et les zones d'une rangÃ©e finissent exactement oÃ¹ commencent celles de la suivante. Sous 1024 px, le retour Ã  la ligne des libellÃ©s de ",e.jsx(s,{children:"CleoStatTile"})," passe en"," ",e.jsx(s,{children:"max-lg:"})," (ils Ã©taient coupÃ©s Ã  820 px sur"," ",e.jsx(s,{children:"/support"})," et Ã  700 px sur ",e.jsx(s,{children:"/platform"}),"). Le retour Ã  la ligne seul cassait les mots dans les tuiles de 129 px du volet partagÃ© de ",e.jsx(s,{children:"/support"})," : sous 1024 px, la tuile est donc aussi un conteneur de taille nommÃ© (",e.jsx(s,{children:"max-lg:[container:stat-tile/inline-size]"}),") et, Ã  13rem ou moins, la pastille d'icÃ´ne passe au-dessus du libellÃ©, qui prend alors toute la largeur. Cela change aussi les grilles de deux tuiles sur tÃ©lÃ©phone livrÃ©es par CHARGEOPS-605 (#635) : Ã  375 px ces tuiles font environ 148 px, leur pastille est donc maintenant au-dessus du libellÃ© plutÃ´t qu'Ã  cÃ´tÃ©. Ã 1024 px et plus aucun conteneur n'est dÃ©clarÃ©, le bureau ne change pas. Les totaux de la console plateforme restent deux par rangÃ©e jusqu'Ã  1024 px (",e.jsx(s,{children:"grid-cols-2 lg:grid-cols-4"}),", avant ",e.jsx(s,{children:"sm:"}),") : Ã  quatre par rangÃ©e Ã  700 px, les tuiles faisaient 123 px et mÃªme empilÃ© un libellÃ© se coupait en plein mot. Et le ",e.jsx(s,{children:"StatReadout"})," des rapports d'entretien et de service garde sa dÃ©coupe tÃ©lÃ©phone (3Ã2, 2Ã2) jusqu'Ã "," ",e.jsx(s,{children:"lg:"})," plutÃ´t que ",e.jsx(s,{children:"sm:"}),", car le panneau de liste de 320 px de la tablette laissait six colonnes de 36 px. (",e.jsx(s,{children:"max-lg:grid-cols-3"})," par-dessus"," ",e.jsx(s,{children:"sm:grid-cols-6"})," ne marcherait pas : Tailwind Ã©met"," ",e.jsx(s,{children:"max-*"})," avant ",e.jsx(s,{children:"sm:"}),".) Chaque ajout tactile est derriÃ¨re ",e.jsx(s,{children:"[@media(pointer:coarse)]:"}),", sans"," ",e.jsx(s,{children:"!important"})," ; Ã  la souris, les classes sont identiques octet pour octet. ÃpinglÃ© par"," ",e.jsx(s,{children:"ui/__tests__/coarse-touch-targets-2.test.tsx"})," (les classes souris, les classes tactiles, le DOM des liens empilÃ©s, en frÃ¨res comme d'un conteneur Ã  l'autre avec le vrai tableau d'entretien, ",e.jsxs(s,{children:["hitArea=","{false}"]}),", le DOM des liens tronquÃ©s, les zones de 44Ã44 sans chevauchement des actions sur la vraie plaque, l'arithmÃ©tique de l'Ã©cart des rangÃ©es de puces, le bloc tactile de l'Ã©diteur) et"," ",e.jsx(s,{children:"chargers/__tests__/charger-identity-header-live-state.test.tsx"})," ","(l'Ã©cart tactile de la ligne d'identitÃ© de la borne)."]})]})}),e.jsxs(t,{id:"pages-headers-mobiles",title:"19. Pages avec headers mobiles",children:[e.jsxs(i,{children:["Toutes les pages dans ",e.jsx(s,{children:"<AppLayout>"}),", et l'accueil, reÃ§oivent la barre du haut et la barre d'onglets de la coquille tÃ©lÃ©phone sous ",e.jsx(s,{children:"1024 px"})," (section 14), par exemple :"]}),e.jsxs(l,{children:[e.jsxs(r,{children:["Home (",e.jsx(a,{children:"/"}),")"]}),e.jsxs(r,{children:["All Chargers (",e.jsx(a,{children:"/all-chargers"}),")"]}),e.jsxs(r,{children:["Warehouse (",e.jsx(a,{children:"/warehouse"}),")"]}),e.jsxs(r,{children:["RMA (",e.jsx(a,{children:"/rma"}),")"]}

27),e.jsxs(r,{children:["User Management (",e.jsx(a,{children:"/user-management"}),")"]}),e.jsxs(r,{children:["Site Management (",e.jsx(a,{children:"/site-management"}),")"]}),e.jsx(r,{children:"Configuration (inclut l'onglet Branding, admin)"})]}),e.jsxs(i,{children:["Pages ",e.jsx(n,{children:"excluÃ©es"})," de ",e.jsx(s,{children:"<AppLayout>"})," :"]}),e.jsxs(l,{children:[e.jsxs(r,{children:[e.jsx(a,{children:"/auth"}),", ",e.jsx(a,{children:"/forgot-password"}),","," ",e.jsx(a,{children:"/reset-password"})," (pas de header)."]}),e.jsxs(r,{children:[e.jsx(a,{children:"/charger-card-lab"})," (lab de design sans auth)."]})]})]}),e.jsxs(t,{id:"visualisations-mobile",title:"20. Visualisations dÃ©sactivÃ©es sur petit Ã©cran",children:[e.jsxs(i,{children:[e.jsx(s,{children:"phase-distribution.tsx"})," (graphique de distribution des phases Ã©lectriques) est masquÃ© sur mobile car illisible â alternative : badge rÃ©capitulatif compact. Pattern :"]}),e.jsx(c,{language:"tsx",children:`{!isMobile && <PhaseDistribution â¦/>}
28{isMobile && <PhaseSummaryBadge â¦/>}`}),e.jsx(i,{children:"Pages concernÃ©es : Power Management, Home, Charger Management, Site Configuration."})]}),e.jsx(t,{id:"performance-mobile",title:"21. Performance mobile",children:e.jsxs(l,{children:[e.jsxs(r,{children:[e.jsx(n,{children:"Animations rÃ©duites"})," :"," ",e.jsx(s,{children:"prefers-reduced-motion"})," est respectÃ© globalement (animations Ã  ",e.jsx(s,{children:"0.01ms"}),")."]}),e.jsxs(r,{children:[e.jsx(n,{children:"PrÃ©chargement intelligent"})," :"," ",e.jsx(s,{children:"NavPreloader"})," (App.tsx) ne prÃ©charge pas si"," ",e.jsx(s,{children:"connection.saveData"})," ou"," ",e.jsx(s,{children:'effectiveType: "2g"'}),", et rÃ©chauffe les chunks de la nav ",e.jsx(n,{children:"un Ã  la fois"})," (sÃ©quentiellement, les Ã©checs individuels Ã©tant ignorÃ©s) plutÃ´t que tous en parallÃ¨le â Safari Ã©choue plus volontiers les fetches de modules concurrents, ce qui Ã©mettait des ",e.jsx(s,{children:"vite:preloadError"})," et provoquait des rechargements de page intempestifs. Le gestionnaire"," ",e.jsx(s,{children:"vite:preloadError"})," (main.tsx) ne recharge d'ailleurs plus que si ",e.jsx(s,{children:"isNewDeploymentLive()"})," confirme un nouveau dÃ©ploiement (plafonnÃ© Ã  un rechargement par 30 s)."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Hardware acceleration"})," :"," ",e.jsx(s,{children:"will-change: transform, opacity"})," sur"," ",e.jsx(s,{children:".animate-fade-in-up"}),", ",e.jsx(s,{children:".logo-spin"}),","," ",e.jsx(s,{children:".flowing-water"}),"."," ",e.jsx(s,{children:"-webkit-backface-visibility: hidden"})," sur les wrappers animÃ©s."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Fonds masquÃ©s"})," :"," ",e.jsx(s,{children:"<AnimatedGridPattern>"})," n'est rendu que"," ",e.jsx(s,{children:"if (!isMobile)"}),"."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Lazy routes"})," : toutes les pages sont"," ",e.jsx(s,{children:"React.lazy()"})," (cf. App.tsx) pour dÃ©couper le bundle."]})]})}),e.jsx(t,{id:"geolocalisation",title:"GÃ©olocalisation (pointages GPS)",children:e.jsxs(i,{children:["Le seul appel Ã  ",e.jsx(s,{children:"navigator.geolocation"})," de l'application est dans"," ",e.jsx(s,{children:"client/src/components/reports/location-stamps.tsx"})," (CHARGEOPS-128) : un ",e.jsx(s,{children:"getCurrentPosition"})," par toucher sur Â« ArrivÃ© Â» / Â« DÃ©part Â»,"," ",e.jsx(s,{children:"enableHighAccuracy"}),", ",e.jsx(s,{children:"timeout"})," de 10 s,"," ",e.jsx(s,{children:"maximumAge: 0"})," â jamais de ",e.jsx(s,{children:"watchPosition"}),", jamais en arriÃ¨re-plan. Un refus (code 1) ou un Ã©chec affiche un seul toast et le rapport continue. Un minuteur client de 20 s (",e.jsx(s,{children:"STAMP_CLIENT_TIMEOUT_MS"}),") borne aussi une demande d'autorisation restÃ©e sans rÃ©ponse, oÃ¹ le ",e.jsx(s,{children:"timeout"})," de l'API ne dÃ©marre jamais : le toucher Ã©choue alors comme une expiration."," ",e.jsx(s,{children:"vercel.json"})," ne pose aucun"," ",e.jsx(s,{children:"Permissions-Policy"}),", donc la gÃ©olocalisation reste permise sur l'origine (HTTPS requis par le navigateur)."]})}),e.jsxs(t,{id:"lightbox-photo-partagee",title:"21a. Lightbox photo partagÃ©e et banniÃ¨re d'appel entrant (S3.0c)",children:[e.jsxs(i,{children:[e.jsx(s,{children:"client/src/components/ui/photo-lightbox.tsx"})," (S3.0c, CHARGEOPS-569) remplace deux visionneuses qui avaient divergÃ© : l'ancienne ",e.jsx(s,{children:"maintenance-reports/photo-lightbox.tsx"})," ","(rÃ©utilisÃ©e bien au-delÃ  des rapports de maintenance â photos de borne, tiroir d'aperÃ§u de rapport, les deux panneaux de messages, les deux cartes photos/piÃ¨ces jointes de billets) et l'ancienne visionneuse en ligne de"," ",e.jsx(s,{children:"service-report-detail.tsx"}),"."]}),e.jsxs(l,{children:[e.jsxs(r,{children:[e.jsx(n,{children:"Un seul composant"})," â portail vers"," ",e.jsx(s,{children:"<body>"})," (une carte ",e.jsx(s,{children:".co-card"}),"/",e.jsx(s,{children:".ny-card"})," ancÃªtre pose un ",e.jsx(s,{children:"transform"}),"/",e.jsx(s,{children:"filter"})," qui piÃ©gerait un"," ",e.jsx(s,{children:"fixed inset-0"}),"), clavier (flÃ¨ches, Ãchap), le compteur, une lÃ©gende Ã©ditable et une suppression Ã  confirmation en deux temps optionnelles, et un emplacement"," ",e.jsx(s,{children:"renderExtraControls"})," pour un appelant (l'Ã©diteur d'Ã©tiquettes des piÃ¨ces jointes de billet). La navigation est ",e.jsx(n,{children:"bornÃ©e"})," aux extrÃ©mitÃ©s (comme l'ancienne visionneuse des rapports de maintenance),"," ",e.jsx(n,{children:"pas cyclique"})," (l'ancien comportement de la visionneuse en ligne des rapports de service) â les deux diffÃ©raient, et le balayage tactile ci-dessous impose le comportement bornÃ©."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Nouveau ici"})," â ni l'une ni l'autre ancienne visionneuse ne l'avait : un balayage horizontal de plus de 60Â px change de photo, un balayage vers le bas de plus de 100Â px ferme, un pincement Ã  deux doigts zoome (bornÃ© 1â3Ã, un double-tap bascule 1Ã/2Ã, l'attribut"," ",e.jsx(s,{children:"data-zoomed"}),"), et le remplissage de zone sÃ»re via"," ",e.jsx(s,{children:"--safe-top"}),"/",e.jsx(s,{children:"--safe-bottom"}),". Le geste de balayage rÃ©utilise ",e.jsx(s,{children:"lockSwipeAxis"})," de"," ",e.jsx(s,{children:"client/src/components/detail/tab-swipe.ts"})," (le mÃªme verrou d'angle Ã  30Â° que les onglets glissables de DetailLayout) : un balayage surtout vertical ne change jamais de photo, mÃªme si sa composante horizontale seule dÃ©passerait 60Â px."]}),e.jsxs(r,{children:[e.jsxs(n,{children:["Balayage = ",e.jsx(s,{children:"drag"})," de framer-motion"]})," â mÃªme patron que ",e.jsx(s,{children:"SwipeRow"})," de"," ",e.jsx(s,{children:"ResponsiveList"})," (S2.3) : un"," ",e.jsx(s,{children:"motion.div"})," avec ",e.jsx(s,{children:"drag"}),","," ",e.jsx(s,{children:"onDragEnd"})," lit ",e.jsxs(s,{children:["info.offset.","{x,y}"]}),". Le pincement, lui, utilise de simples Ã©vÃ©nements pointeur (deux pointeurs actifs suivis dans une ",e.jsx(s,{children:"Map"}),") Ã  cÃ´tÃ© du"," ",e.jsx(s,{children:"drag"})," Ã  un seul doigt de framer-motion."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Adaptateur maintenu"})," â"," ",e.jsx(s,{children:"maintenance-reports/photo-lightbox.tsx"})," devient un pur adaptateur de forme devant le composant partagÃ© : mÃªme nom d'export, mÃªme forme ",e.jsx(s,{children:"LightboxPhoto"})," ","(",e.jsx(s,{children:"id"}),"/",e.jsx(s,{children:"url"}),"/",e.jsx(s,{children:"caption"}),"/",e.jsx(s,{children:"fileName"}),") et mÃªmes callbacks (",e.jsx(s,{children:"onClose"}),"/",e.jsx(s,{children:"onNavigate"}),"/",e.jsx(s,{children:"onSaveCaption"}),"/",e.jsx(s,{children:"onDelete"}),"/",e.jsx(s,{children:"renderExtraControls"}),"), donc ses sept appelants n'ont pas changÃ© une ligne.",e.jsx(s,{children:"service-report-detail.tsx"})," appelle directement le composant partagÃ©."]}),e.jsxs(r,{children:[e.jsx(n,{children:"La banniÃ¨re d'appel entrant"})," (",e.jsx(s,{children:"client/src/components/calls/incoming-call-dialog.tsx"}),") Ã©tait l'autre lacune que le spec S3 Â§4.1 signalait â une banniÃ¨re ",e.jsx(s,{children:"fixed"})," brute, Ã  ",e.jsx(s,{children:"right-4 top-4"})," ","sans Ã©gard pour la barre du haut fixe (",e.jsx(s,{children:"--chrome-h-mobile"}),") ni, sur tablette, le rail de navigation gauche (",e.jsx(s,{children:"--rail-w"}),"). Des classes"," ",e.jsx(s,{children:"max-lg:"})," dÃ©placent la banniÃ¨re au clair des deux sur tÃ©lÃ©phone/tablette (",e.jsx(s,{children:"max-lg:left-[var(--rail-w)]"}),","," ",e.jsx(s,{children:"max-lg:top-[calc(var(--chrome-h-mobile)+0.75rem)]"}),") ; les classes sans prÃ©fixe (desktop, â¥1024Â px) restent identiques au caractÃ¨re prÃ¨s."]})]}),e.jsxs(i,{children:["Tests : ",e.jsx(s,{children:"ui/__tests__/photo-lightbox.test.tsx"})," (portail, clavier, balayage bornÃ©, fermeture au balayage vers le bas, un balayage surtout vertical ne change jamais de photo, double-tap â"," ",e.jsx(s,{children:"data-zoomed"}),", ",e.jsx(s,{children:"aria-label"})," depuis"," ",e.jsx(s,{children:"t()"}),") et"," ",e.jsx(s,{children:"calls/__tests__/incoming-call-offsets.test.tsx"})," (les classes ",e.jsx(s,{children:"max-lg:"})," ajoutÃ©es, les classes desktop inchangÃ©es au caractÃ¨re prÃ¨s)."]})]}),e.jsxs(t,{id:"mobile-audit-harness",title:"21b. Harnais d'audit mobile",children:[e.jsxs(i,{children:[e.jsx(s,{children:"tools/mobile-audit/"})," (S3.0d, CHARGEOPS-570) est une application Vite committÃ©e, rÃ©servÃ©e au dÃ©veloppement, qui monte le ",e.jsx(n,{children:"vrai"})," ",e.jsx(s,{children:"client/src/App.tsx"})," â vraies routes, vrai ",e.jsx(s,{children:"AppLayout"}),", vraies coquilles tÃ©lÃ©phone/tablette, vraies routes scindÃ©es â sur des fixtures au lieu d'un vrai backend Convex, afin d'ouvrir n'importe quelle page Ã  n'importe quelle largeur sans session ni ",e.jsx(s,{children:".env.local"}),". Il n'est jamais inclus dans le build ni dans aucun pÃ©rimÃ¨tre",e.jsx(s,{children:"tsc"})," â voir"," ",e.jsx(s,{children:"__tests__/mobile-audit-isolation.test.ts"}),"."]}),e.jsxs(l,{children:[e.jsxs(r,{children:[e.jsx(n,{children:"Lancer"})," : ",e.jsx(s,{children:"npm run mobile-audit"})," ","(port 5232) ou ",e.jsxs(s,{children:["preview_start(",'{name:"mobile-audit"}',")"]}),", puis ouvrir"," ",e.jsx(s,{children:"/?route=/support&lang=fr&dark=0&empty=0"}),"."]}),e.jsxs(r,{children:[e.jsx(n,{children:"FrontiÃ¨re stubÃ©e"})," : ",e.jsx(s,{children:"convex/react"}),","," ",e.jsx(s,{children:"@convex-dev/auth/react"}),","," ",e.jsx(s,{children:"@/hooks/use-auth"}),", ",e.jsx(s,{children:"@/hooks/use-language"}),","," ",e.jsx(s,{children:"@/hooks/use-permissions"})," et l'import relatif"," ",e.jsx(s,{children:"./lib/convex"})," de ",e.jsx(s,{children:"App.tsx"})," â le reste de l'arbre est le code rÃ©el. Le routage utilise"," ",e.jsx(s,{children:"wouter/memory-location"}),", posÃ© en"," ",e.jsx(s,{children:"<Router>"}

28)," AUTOUR de ",e.jsx(s,{children:"<App/>"})," plutÃ´t que par une modification d'",e.jsx(s,{children:"App.tsx"}),"."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Fixtures"})," : ",e.jsx(s,{children:"fixtures/index.ts"})," ","expose ",e.jsxs(s,{children:["registerFixture(routePattern, ",'{ "module:fn": (args) => data }',")"]}),", la clÃ© Ã©tant le nom du reference Convex tel que renvoyÃ© par"," ",e.jsx(s,{children:"getFunctionName"}),". Une tranche de vague ajoute sa page en crÃ©ant son propre ",e.jsx(s,{children:"fixtures/<slice>.ts"})," ","â rien d'autre : ",e.jsx(s,{children:"fixtures/index.ts"})," charge tous ses voisins via ",e.jsx(s,{children:"import.meta.glob"})," (des imports"," ",e.jsx(n,{children:"dynamiques"}),", pour Ã©viter un cycle ES module avec le registre lui-mÃªme), donc des tranches parallÃ¨les ne modifient jamais la mÃªme liste."]}),e.jsxs(r,{children:[e.jsx(n,{children:e.jsx(s,{children:"measure.js"})})," : une fonction brute, sans import, Ã  coller dans le panneau navigateur (",e.jsx(s,{children:"javascript_tool"})," ou ",e.jsx(s,{children:"browser_evaluate"})," ","de Playwright). Elle applique le contrÃ´le largeur-tÃ©lÃ©phone (spec Â§7) : dÃ©bordement horizontal, cibles tactiles sous 44Ã44, chevauchements de barres fixes/collantes, contenu cachÃ© sous une barre du bas, comptage de ",e.jsx(s,{children:"h1"}),"/",e.jsx(s,{children:"main"}),". Ã exÃ©cuter Ã  375Ã812 (tactile) et Ã  700Ã1000, et Ã  820Ã1180 sur une page scindÃ©e."]}),e.jsxs(r,{children:[e.jsx(n,{children:"DÃ©bordement rognÃ©"})," (CHARGEOPS-606) : la racine de la coquille est en ",e.jsx(s,{children:"overflow-x-clip"}),", donc"," ",e.jsx(s,{children:"overflowX"})," reste Ã  0 mÃªme quand une rangÃ©e dÃ©passe largement sa carte. ",e.jsx(s,{children:"clipped"})," signale chaque Ã©lÃ©ment dont le bord droit dÃ©passe l'ancÃªtre qui le rogne horizontalement, ou la fenÃªtre, sous la forme"," ",e.jsx(s,{children:"{ sel, overflowPx, clipper }"})," (le plus externe seulement, 20 au plus). Sont ignorÃ©s : le contenu d'un conteneur qui dÃ©file de cÃ´tÃ©, les Ã©lÃ©ments ",e.jsx(s,{children:"sr-only"})," ou de taille nulle, le texte ",e.jsx(s,{children:"truncate"})," et tout ce qui est sous ",e.jsx(s,{children:"[data-audit-allow-clip]"}),". Le contrÃ´le 1 ne passe que si ",e.jsx(s,{children:"overflowX"})," vaut 0"," ",e.jsx(n,{children:"et"})," que ",e.jsx(s,{children:"clipped"})," est vide."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Moins de faux positifs"})," : une cible de 43,5 px ou plus compte pour 44 (arrondi sous-pixel) ; les contrÃ´les"," ",e.jsx(s,{children:"aria-hidden"})," ou masquÃ©s visuellement (le"," ",e.jsx(s,{children:"<select>"})," natif cachÃ© du Select de Radix) ne sont pas des cibles ; un Ã©lÃ©ment collant dans un panneau dÃ©filant (la premiÃ¨re colonne Ã©pinglÃ©e d'un"," ",e.jsx(s,{children:'<Table phone="scroll">'}),") n'est pas une barre de page. Le stub ",e.jsx(s,{children:"convex/react"})," rÃ©pond aussi Ã "," ",e.jsx(s,{children:"usePaginatedQuery"})," depuis les fixtures (un tableau ou un ",e.jsx(s,{children:"{ page }"}),", renvoyÃ© en entier avec"," ",e.jsx(s,{children:'status: "Exhausted"'}),"). Tests unitaires :"," ",e.jsx(s,{children:"__tests__/mobile-audit-measure.test.ts"}),"."]})]})]}),e.jsxs(t,{id:"mobile-map-toggle",title:"21c. Cartes â bascule Carte/Liste et fiche d'Ã©pingle",children:[e.jsxs(i,{children:["S3 vague 3 (CHARGEOPS-596, spec Â§5 Â« Special designs â Maps Â»). Trois briques partagÃ©es, prÃªtes pour toute future page Â« carte Â» (",e.jsx(s,{children:"customer-map.tsx"}),", ",e.jsx(s,{children:"modems-map.tsx"}),") :"]}),e.jsxs(l,{children:[e.jsxs(r,{children:[e.jsx(n,{children:e.jsx(s,{children:"@/hooks/use-map-view-mode.ts"})})," â ",e.jsx(s,{children:"useMapViewMode(storageKey)"})," ","renvoie ",e.jsx(s,{children:'["map" | "list", setMode]'}),", mÃ©morisÃ© par page dans ",e.jsx(s,{children:"localStorage"})," (lecture/Ã©criture gardÃ©es par un"," ",e.jsx(s,{children:"try/catch"})," â un stockage bloquÃ© revient simplement Ã  Â« Carte Â»)."]}),e.jsxs(r,{children:[e.jsx(n,{children:e.jsx(s,{children:"@/components/maps/map-view-toggle.tsx"})})," â"," ",e.jsx(s,{children:"<MapViewToggle mode onChange mapLabel listLabel groupLabel/>"}),", un groupe de deux boutons ",e.jsx(s,{children:'role="tab"'})," stylÃ©"," ",e.jsx(s,{children:"co-card"}),", cibles d'au moins 44px. Rendu en"," ",e.jsx(s,{children:"absolute"})," par-dessus la carte OU la liste â il ne pousse pas leur hauteur, qui doit remplir exactement l'espace entre la barre du haut et la barre d'onglets (",e.jsx(s,{children:"h-[calc(100dvh-var(--chrome-h-mobile)-var(--tabbar-h))]"}

28),", appliquÃ©e seulement sous 640px â la tablette garde le calc desktop ",e.jsx(s,{children:"h-[calc(100vh-4rem)]"}),", spec Â§5 Â« tablets keep the full map Â»)."]}),e.jsxs(r,{children:[e.jsx(n,{children:e.jsx(s,{children:"@/components/maps/map-pin-sheet.tsx"})})," â"," ",e.jsx(s,{children:"<MapPinSheet open onOpenChange title description status facts actions/>"}),", la feuille du bas ouverte au toucher d'une Ã©pingle : le"," ",e.jsx(s,{children:"Dialog"})," adaptatif forcÃ© en ",e.jsx(s,{children:'mobile="sheet"'})," ","(ces pages sont ",e.jsx(s,{children:"fullWidth"}),", donc sans ce forÃ§age le mode rÃ©solu serait le modal centrÃ© par dÃ©faut du tÃ©lÃ©phone). Elle affiche exactement le rÃ©sumÃ© et l'action principale que l'ancienne bulle flottante ancrÃ©e offrait â celle-ci reste montÃ©e pour tablette/ordinateur, gardÃ©e derriÃ¨re"," ",e.jsx(s,{children:"!isPhone &&"}),"."]}),e.jsxs(r,{children:["Le mode Liste est un ",e.jsx(s,{children:"ResponsiveList"})," (Â§7 ci-dessus) des mÃªmes Ã©lÃ©ments que la carte, avec"," ",e.jsx(s,{children:"desktop={null}"})," (toujours des cartes â la page ne le monte que quand elle est dÃ©jÃ  en tÃ©lÃ©phone). Sur"," ",e.jsx(s,{children:"modems-map.tsx"}),", l'action d'une carte de liste rouvre la mÃªme ",e.jsx(s,{children:"MapPinSheet"})," plutÃ´t que de dupliquer un second point d'entrÃ©e ; le bouton Â« DÃ©tails Â» de la fiche rouvre l'existant ",e.jsx(s,{children:"ModemDetailSheet"})," (aucune duplication de son contenu)."]})]})]}),e.jsxs(t,{id:"mobile-chart-dashboards",title:"21d. Tableaux de bord Ã  graphiques â carrousel, options tÃ©lÃ©phone, pastilles KPI",children:[e.jsxs(i,{children:["S3 vague 4 (CHARGEOPS-599, spec Â§5 Â« Chart dashboards Â»). Tous les graphiques de l'application sont du chart.js via"," ",e.jsx(s,{children:"react-chartjs-2"}),". Trois briques partagÃ©es, utilisÃ©es par ",e.jsx(s,{children:"analytics.tsx"})," et"," ",e.jsx(s,{children:"operations-dashboard.tsx"})," ; hors tÃ©lÃ©phone (â¥ 640px) chacune rend exactement ce que la page rendait dÃ©jÃ  :"]}),e.jsxs(l,{children:[e.jsxs(r,{children:[e.jsx(n,{children:e.jsx(s,{children:"@/components/charts/phone-chart-options.ts"})})," â"," ",e.jsx(s,{children:"usePhoneChartOptions(options, kind?)"})," renvoie le MÃME objet d'options hors tÃ©lÃ©phone, et sur tÃ©lÃ©phone une copie (",e.jsx(s,{children:"toPhoneChartOptions"}),", fonction pure, testÃ©e) : lÃ©gende"," ",e.jsx(s,{children:'position: "bottom"'})," ; axe de catÃ©gories Ã©clairci (",e.jsx(s,{children:"autoSkip"}),", ",e.jsx(s,{children:"maxTicksLimit: 6"}),", jamais inclinÃ©, libellÃ©s longs raccourcis par Â« â¦ Â» â l'Ã©quivalent chart.js du ",e.jsx(s,{children:'interval="preserveStartEnd"'})," de recharts que cite le spec) ; axes de valeurs Ã  5 graduations ; infobulle au toucher (",e.jsx(s,{children:'events: ["click"]'})," â un doigt qui glisse pour dÃ©filer n'en ouvre jamais â, et"," ",e.jsx(s,{children:'interaction: { mode: "index", intersect: false }'})," ","pour les graphiques cartÃ©siens). Un formateur de graduation propre au graphique (le ",e.jsx(s,{children:"%"})," de la Pareto) est conservÃ©."," ",e.jsx(s,{children:'kind: "radial"'})," pour un anneau (pas d'axes). BranchÃ© dans ",e.jsx(s,{children:"StatsBarChart"}),", ",e.jsx(s,{children:"DistributionDoughnut"}),","," ",e.jsx(s,{children:"ParetoChart"})," et les options des graphiques d'Analytiques. Le document PDF des Indicateurs dessine ses propres graphiques : il n'est pas touchÃ©."]}),e.jsxs(r,{children:[e.jsx(n,{children:e.jsx(s,{children:"@/components/charts/chart-carousel.tsx"})})," â"," ",e.jsx(s,{children:"<ChartCarousel className label slideLabels? testId?>"})," ",": hors tÃ©lÃ©phone, rend ",e.jsx(s,{children:"<div className={className}>"})," ","(la grille de la page, inchangÃ©e). Sur tÃ©lÃ©phone, chaque enfant devient une diapositive pleine largeur (",e.jsx(s,{children:"snap-x snap-mandatory"}),"), avec un point par diapositive (zone de 44Ã44 sous pointeur grossier) et un compteur Â« n / N Â» en rÃ©gion"," ",e.jsx(s,{children:"aria-live"}),". Les enfants ",e.jsx(s,{children:"false"})," /"," ",e.jsx(s,{children:"null"})," (graphique masquÃ© pour ce rÃ´le) ne sont pas des diapositives ; s'il n'en reste qu'une, la grille simple est rendue. Aucun graphique n'est retirÃ© sur tÃ©lÃ©phone."]}),e.jsxs(r,{children:[e.jsx(n,{children:e.jsx(s,{children:"@/components/kpi/kpi-chip-row.tsx"})})," â"," ",e.jsx(s,{children:"<KpiChipRow className â¦>"})," rend la grille de tuiles hors tÃ©lÃ©phone, et sur tÃ©lÃ©phone une rangÃ©e de pastilles"," ",e.jsx(s,{children:"co-chip"})," dÃ©filant de cÃ´tÃ© (le mÃªme dessin que les compteurs de Ma journÃ©e). Elle signale par contexte Ã  chaque"," ",e.jsx(s,{children:"KpiTile"})," de se dessiner en ",e.jsx(s,{children:"KpiChip"})," : libellÃ©, valeur, sous-ligne, ton d'alerte et le mÃªme lien vers la page du KPI. UtilisÃ©e par toutes les bandes de tuiles des Indicateurs (vue d'ensemble, service, finances, satisfaction) ; Analytiques rend directement quatre ",e.jsx(s,{children:"KpiChip"}),"."]})]}),e.jsxs(i,{children:["Tablette inchangÃ©e, Ã  une correction prÃ¨s : les grilles"," ",e.jsx(s,{children:"grid gap-4 lg:grid-cols-2"})," de"," ",e.jsx(s,{children:"service-kpi-section.tsx"})," prennent"," ",e.jsx(s,{children:"max-lg:grid-cols-1"}),". Leur piste implicite"," ",e.jsx(s,{children:"auto"})," s'Ã©largissait au tableau le plus large, que la carte coupait ; avec ",e.jsx(s,{children:"minmax(0,1fr)"}),", le corps"," ",e.jsx(s,{children:"flush"})," du panneau fait dÃ©filer le tableau de cÃ´tÃ©."]})]}),e.jsxs(t,{id:"push-appareil",title:"21e. Notifications push sur l'appareil (S5.3)",children:[e.jsxs(i,{children:["CHARGEOPS-661, cÃ´tÃ© appareil du web push (CHARGEOPS-394 ; le serveur est dÃ©crit dans la partie notifications de"," ",e.jsx(s,{children:"tech-auth-rbac"}),"). Tout est inerte tant que"," ",e.jsx(s,{children:"api.push.config.getPublicKey"})," renvoie"," ",e.jsx(s,{children:"null"})," (les trois ",e.jsx(s,{children:"VAPID_*"})," absents) : aucune interface push n'apparaÃ®t."]}),e.jsxs(l,{children:[e.jsxs(r,{children:[e.jsx(n,{children:e.jsx(s,{children:"client/public/sw-push.js"})})," â la logique pure des Ã©vÃ©nements ",e.jsx(s,{children:"push"})," et"," ",e.jsx(s,{children:"notificationclick"})," (",e.jsx(s,{children:"parsePayload"}),","," ",e.jsx(s,{children:"notificationOptions"}

28),", ",e.jsx(s,{children:"pickClient"}),","," ",e.jsx(s,{children:"handlePush"}),", ",e.jsx(s,{children:"handleClick"}),"), exposÃ©e sur"," ",e.jsx(s,{children:"self.__chargeopsPush"})," et en CommonJS pour les tests."," ",e.jsx(s,{children:"push"})," affiche la notification avec son"," ",e.jsx(s,{children:"tag"})," (",e.jsx(s,{children:"<entityType>:<id>"})," : une rÃ©pÃ©tition remplace la prÃ©cÃ©dente) et ",e.jsx(s,{children:"data.link"}),", puis"," ",e.jsx(s,{children:"navigator.setAppBadge(badge)"})," (ou"," ",e.jsx(s,{children:"clearAppBadge()"})," Ã  0) lÃ  oÃ¹ c'est supportÃ©. Une charge illisible n'affiche rien et ne lÃ¨ve jamais. Un lien qui n'est pas un chemin interne (",e.jsx(s,{children:"//hÃ´te"}),", ",e.jsx(s,{children:"https://â¦"}),") devient ",e.jsx(s,{children:"/"}),"."]}),e.jsxs(r,{children:[e.jsx(n,{children:e.jsx(s,{children:"notificationclick"})})," â ferme la notification ; une fenÃªtre de l'app dÃ©jÃ  ouverte (mÃªme origine, la focalisÃ©e d'abord) reÃ§oit ",e.jsx(s,{children:"focus()"})," puis"," ",e.jsx(s,{children:'postMessage({ type: "NAVIGATE", link })'})," ; sinon"," ",e.jsx(s,{children:"clients.openWindow(link)"}),"."]}),e.jsxs(r,{children:[e.jsx(n,{children:e.jsx(s,{children:"client/public/sw.js"})})," â charge"," ",e.jsx(s,{children:'importScripts("/sw-push.js")'})," dans un"," ",e.jsx(s,{children:"try"})," (un Ã©chec ne doit jamais emporter le cache hors ligne) et relaie les deux Ã©vÃ©nements. ",e.jsx(s,{children:"vercel.json"})," ","sert ",e.jsx(s,{children:"/sw-push.js"})," en ",e.jsx(s,{children:"no-store"})," : un script importÃ© est revÃ©rifiÃ© Ã  chaque mise Ã  jour du worker, et la rÃ¨gle gÃ©nÃ©rique ",e.jsx(s,{children:"immutable"})," des ",e.jsx(s,{children:".js"})," l'aurait figÃ© un an (",e.jsx(s,{children:"__tests__/vercel-headers.test.ts"}),")."]}),e.jsxs(r,{children:[e.jsx(n,{children:e.jsx(s,{children:"components/shell/use-sw-navigate.ts"})})," ","â ",e.jsx(s,{children:"<SwNavigate />"}),", montÃ© une fois dans"," ",e.jsx(s,{children:"App.tsx"})," Ã  cÃ´tÃ© de ",e.jsx(s,{children:"StaleChunkCleanup"}),", Ã©coute ",e.jsx(s,{children:"NAVIGATE"})," et appelle le ",e.jsx(s,{children:"setLocation"})," ","de wouter (chemins internes seulement) : la page change sur place et â reste dans l'app. Bureau, tÃ©lÃ©phone, tablette et portail."]}),e.jsxs(r,{children:[e.jsx(n,{children:e.jsx(s,{children:"lib/push/push-client.ts"})})," â"," ",e.jsx(s,{children:"pushSupport()"})," (",e.jsx(s,{children:"serviceWorker"})," +"," ",e.jsx(s,{children:"PushManager"})," + ",e.jsx(s,{children:"Notification"})," ; un iPhone ou iPad hors mode installÃ© donne ",e.jsx(s,{children:'"ios-needs-install"'}),", jamais ",e.jsx(s,{children:'"unsupported"'}),"), ",e.jsx(s,{children:"currentPermission()"}),","," ",e.jsx(s,{children:"enablePush(key, save)"})," (permission demandÃ©e seulement sur un toucher, ",e.jsx(s,{children:"subscribe({ userVisibleOnly: true, applicationServerKey })"}),", remplace un abonnement fait pour une autre clÃ©),"," ",e.jsx(s,{children:"disablePush(remove)"}),","," ",e.jsx(s,{children:"releasePushOnSignOut"})," (bornÃ© Ã  2 s, ne lÃ¨ve jamais) et ",e.jsx(s,{children:"deviceLabel()"})," (Â« iPhone Â· Safari Â», Â« Android Â· Chrome Â»â¦)."]}),e.jsxs(r,{children:[e.jsx(n,{children:e.jsx(s,{children:"components/notifications/push-device-card.tsx"})})," ","â premiÃ¨re carte de ",e.jsx(s,{children:"NotificationPreferencesPanel"})," ","(donc ",e.jsx(a,{children:"/notifications"})," et"," ",e.jsx(a,{children:"/portal/notifications"}),"). Ãtats de l'appareil : masquÃ©e (non configurÃ©, ou non supportÃ© hors iOS), consigne d'installation iOS, impersonation, ",e.jsx(s,{children:"default"}),"/accordÃ©e sans abonnement â Â« Activer Â», refusÃ©e â comment la rÃ©tablir, abonnÃ©e â Â« DÃ©sactiver Â». MoitiÃ© compte : la bascule"," ",e.jsx(s,{children:"pushEnabled"})," (rÃ©Ã©crit la matrice ",e.jsx(n,{children:"enregistrÃ©e"})," ","telle quelle, jamais le brouillon du panneau, car"," ",e.jsx(s,{children:"updateMine"})," est un remplacement complet) et la liste"," ",e.jsx(s,{children:"listMine"})," avec ",e.jsx(s,{children:"remove"}),"."]}),e.jsxs(r,{children:[e.jsx(n,{children:e.jsx(s,{children:"components/notifications/push-prompt-card.tsx"})})," ","â la proposition unique, sur Accueil, Ma journÃ©e et la vue d'ensemble du portail : tÃ©lÃ©phone/tablette, app installÃ©e (",e.jsx(s,{children:"display-mode: standalone"}),"), push configurÃ© et supportÃ©, permission ",e.jsx(s,{children:"default"}),", hors impersonation. Â« Plus tard Â» est retenu par utilisateur dans"," ",e.jsx(s,{children:"localStorage"})," (",e.jsx(s,{children:"chargeops.pushPrompt.dismissed.<userId>"}

28),", lecture et Ã©criture dans un ",e.jsx(s,{children:"try/catch"}),")."]}),e.jsxs(r,{children:[e.jsx(n,{children:"DÃ©connexion"})," â ",e.jsx(s,{children:"logoutMutation"})," et"," ",e.jsx(s,{children:"logoutEverywhereMutation"})," (",e.jsx(s,{children:"hooks/use-auth.tsx"}),") appellent ",e.jsx(s,{children:"unsubscribe"})," avec l'endpoint de l'appareil puis ",e.jsx(s,{children:"pushSubscription.unsubscribe()"})," avant"," ",e.jsx(s,{children:"signOut()"}),". Le garde de dÃ©connexion hors ligne enveloppe ces deux chemins : le dÃ©sabonnement suit donc sa confirmation."]})]}),e.jsxs(i,{children:["Bureau : seule la carte de rÃ©glages s'ajoute. Tests :"," ",e.jsx(s,{children:"__tests__/sw-push.test.ts"})," (le vrai ",e.jsx(s,{children:"sw.js"})," +"," ",e.jsx(s,{children:"sw-push.js"})," dans un contexte ",e.jsx(s,{children:"node:vm"}),"),"," ",e.jsx(s,{children:"lib/push/__tests__/push-client.test.ts"}),","," ",e.jsx(s,{children:"components/notifications/__tests__/push-*.test.tsx"}),","," ",e.jsx(s,{children:"components/shell/__tests__/use-sw-navigate.test.tsx"}),","," ",e.jsx(s,{children:"hooks/__tests__/use-auth-push-signout.test.tsx"}),"."]})]}),e.jsxs(t,{id:"scanner-integre",title:"Scanner intÃ©grÃ© â Scanner â ouvrir une borne (S4.1)",children:[e.jsxs(i,{children:["Mobile S4.1 (CHARGEOPS-654, spec"," ",e.jsx(a,{children:"docs/superpowers/specs/2026-09-28-mobile-s4-native-extras-design.md"})," Â§4.1). Une seule feuille camÃ©ra gÃ©nÃ©rique, un seul rÃ©solveur, trois points d'entrÃ©e."]}),e.jsx(h,{rows:[{key:e.jsx(a,{children:"client/src/lib/scanner/detect.ts"}),value:e.jsxs(e.Fragment,{children:[e.jsx(s,{children:"createDetector()"})," : le ",e.jsx(s,{children:"BarcodeDetector"})," du navigateur quand ",e.jsx(s,{children:"getSupportedFormats()"})," couvre tout ",e.jsx(s,{children:"SCAN_FORMATS"})," (",e.jsx(s,{children:"qr_code"}),", ",e.jsx(s,{children:"code_128"}),", ",e.jsx(s,{children:"code_39"}),", ",e.jsx(s,{children:"ean_13"}),", ",e.jsx(s,{children:"ean_8"}),", ",e.jsx(s,{children:"data_matrix"}),") â Chrome sur Android ; sinon un ",e.jsx(s,{children:'import("barcode-detector/ponyfill")'})," paresseux (MIT, zxing-wasm) : Safari sur iPhone et Firefox ne tÃ©lÃ©chargent son JS et son ",e.jsx(s,{children:"zxing_reader.wasm"})," (~1,1 Mo) qu'Ã  l'ouverture du scanner. Le ponyfill vise par dÃ©faut le CDN jsDelivr : le ",e.jsx(s,{children:"locateFile"})," de ",e.jsx(s,{children:"prepareZXingModule"})," est remplacÃ© par l'URL de ",e.jsx(s,{children:"zxing-wasm/reader/zxing_reader.wasm?url"}),", un asset Vite hachÃ© servi depuis notre propre origine (la CSP couvre dÃ©jÃ  ",e.jsx(s,{children:"'wasm-unsafe-eval'"})," et ",e.jsx(s,{children:"connect-src 'self'"}),"). ",e.jsx(s,{children:"fireImmediately: true"})," le charge d'emblÃ©e : un Ã©chec atteint la feuille (saisie manuelle) plutÃ´t que chaque image."]})},{key:e.jsx(a,{children:"client/src/lib/scanner/resolve.ts"}),value:e.jsxs(e.Fragment,{children:[e.jsxs(s,{children:["resolveScanText(text, ","{ byRef, bySerial }",")"]}),", pur : une URL d'autocollant ChargeOps (",e.jsx(a,{children:"/c/<nom>"})," ou ",e.jsx(a,{children:"/scan?ref="})," sur ",e.jsx(s,{children:"chargeops.net"}),", un sous-domaine ou l'hÃ´te de ce dÃ©ploiement â ",e.jsx(s,{children:"extractStickerRef"}),") â ",e.jsx(s,{children:"byRef"}),", et s'arrÃªte lÃ  ; toute autre URL â ",e.jsx(s,{children:"none"})," ; sinon le texte comme nom / identifiant PE (",e.jsx(s,{children:"byRef"}),"), puis comme numÃ©ro de sÃ©rie (",e.jsx(s,{children:"normalizeSerial"})," : espaces retirÃ©s, majuscules â ",e.jsx(s,{children:"bySerial"}),"). RÃ©pond ",e.jsx(s,{children:"one"})," / ",e.jsx(s,{children:"many"})," / ",e.jsx(s,{children:"none"}),"."]})},{key:e.jsx(a,{children:"client/src/components/scanner/scanner-sheet.tsx"}),value:e.jsxs(e.Fragment,{children:[e.jsx(s,{children:"ScannerSheet"})," sur le ",e.jsx(s,{children:"Dialog"})," adaptatif de S2 : ",e.jsx(s,{children:'mobile="fullscreen"'})," sur tÃ©lÃ©phone, une modale ",e.jsx(s,{children:"max-w-2xl"})," sur tablette et ordinateur, ",e.jsxs(s,{children:["confirmDiscard=","{false}"]}),". ",e.jsxs(s,{children:["getUserMedia(",'{ video: { facingMode: { ideal: "environment" } } }',")"]}),", un cadre de visÃ©e, une bascule de lampe quand ",e.jsx(s,{children:"track.getCapabilities().torch"})," (",e.jsxs(s,{children:["applyConstraints(","{ advanced: [{ torch }] }",")"]}),"), la saisie manuelle. DÃ©code toutes les ",e.jsx(s,{children:"SCAN_INTERVAL_MS"})," (150 ms, ",e.jsx(s,{children:"setTimeout"}),", images Ã  ",e.jsx(s,{children:"readyState < 2"})," sautÃ©es) ; une lecture compte quand le mÃªme texte revient deux fois de suite, puis ",e.jsx(s,{children:'haptic("success")'}),", toutes les pistes s'arrÃªtent, ",e.jsx(s,{children:"onResult"})," part une seule fois. ",e.jsx(s,{children:"NotAllowedError"})," â une explication plus la saisie manuelle ; pas de ",e.jsx(s,{children:"mediaDevices"})," / ",e.jsx(s,{children:"NotFoundError"})," â la saisie manuelle seule. Toutes les pistes s'arrÃªtent Ã  la fermeture, au dÃ©montage, et quand la camÃ©ra est accordÃ©e aprÃ¨s la fermeture."]})},{key:e.jsx(a,{children:"client/src/components/scanner/scan-to-open.tsx"}),value:e.jsxs(e.Fragment,{children:[e.jsx(s,{children:"ScanToOpen"})," branche ",e.jsx(s,{children:"resolveScanText"})," sur ",e.jsx(s,{children:"convex.query"})," (",e.jsx(s,{children:"chargers.queries.resolveScanRef"}),", puis ",e.jsx(s,{children:"chargers.queries.findBySerial"}),"). ",e.jsx(s,{children:"one"})," â ",e.jsx(s,{children:"scanDestination"})," (la rÃ¨gle de /scan : personnel â ",e.jsx(a,{children:"/chargers/:id/field"}),", opÃ©rateur de site confinÃ© â ",e.jsx(a,{children:"/portal/cases/charger/:id"}),") ; ",e.jsx(s,{children:"many"})," â un sÃ©lecteur (",e.jsx(s,{children:"co-card-inset"})," + ",e.jsx(s,{children:"co-row"}),", nom et site) ; ",e.jsx(s,{children:"none"})," â Â« Aucune borne trouvÃ©e pour Â« â¦ Â» Â» avec Rechercher (",e.jsx(a,{children:"/all-chargers?q="}),", personnel seulement) et Scanner de nouveau ; une recherche en Ã©chec le dit. Une rÃ©ponse arrivÃ©e aprÃ¨s la fermeture ou un nouveau scan est ignorÃ©e. ",e.jsx(s,{children:"useScanToOpen()"})," rend ",e.jsx(s,{children:"{ open, element }"})," et ne monte ",e.jsx(s,{children:"ScanToOpen"})," qu'aprÃ¨s le premier ",e.jsx(s,{children:"open()"}),"."]})},{key:"Points d'entrÃ©e",value:e.jsxs(e.Fragment,{children:["La tuile Scanner du menu Â« + Â» (",e.jsx(s,{children:"create-sheet.tsx"}),") garde le ",e.jsx(s,{children:'href="/scan"'}

28)," du registre â l'instantanÃ© nav-parity ne change pas â et fait ",e.jsx(s,{children:"preventDefault"})," sur la touche pour ouvrir le scanner. La barre du haut (",e.jsx(s,{children:"top-bar.tsx"}),", tÃ©lÃ©phone et tablette seulement : le balisage ordinateur est intact) affiche un bouton icÃ´ne ",e.jsx(s,{children:"ScanLine"})," avant la recherche sur les pages du personnel : pas sous ",e.jsx(a,{children:"/portal"}),", pas pour un opÃ©rateur de site confinÃ©, et seulement si ",e.jsx(s,{children:'isRouteEnabled("/scan")'}),". ",e.jsx(a,{children:"/scan?open=1"})," sans ref (le raccourci du manifeste de S4.3) affiche ",e.jsx(s,{children:"ScanLanding"})," dans la mise en page du personnel ou du portail, la feuille dÃ©jÃ  ouverte ; un ",e.jsx(s,{children:"ref"})," l'emporte toujours."]})},{key:e.jsx(a,{children:"client/src/lib/haptics.ts"}),value:e.jsxs(e.Fragment,{children:[e.jsx(s,{children:"haptic(kind)"}),", ",e.jsx(s,{children:'"tap" | "success" | "warning" | "error"'})," â ",e.jsx(s,{children:"navigator.vibrate"})," 10 / [12,40,12] / 30 / [40,60,40] ; sans effet sans l'API (iOS, ordinateur) et sous ",e.jsx(s,{children:"prefers-reduced-motion"}),". AjoutÃ© ici pour le succÃ¨s du scan ; S4.4b branche ses autres usages."]})}]}),e.jsx(d,{tone:"info",title:"ConfidentialitÃ©",children:"Les images sont dÃ©codÃ©es dans la page et jamais envoyÃ©es ; les seuls appels rÃ©seau sont les deux recherches, limitÃ©es au locataire, avec le texte dÃ©codÃ©."})]}),e.jsxs(t,{id:"scan-to-fill-native-links",title:"Scanner dans un champ, liens tÃ©lÃ©phone et cartes (S4.2)",children:[e.jsx(i,{children:"Mobile S4.2 (CHARGEOPS-655, spec Â§4.1â4.2). Trois petits modules posÃ©s sur le scanner de S4.1, chacun remplaÃ§ant du code ad hoc Ã  ses points d'appel."}),e.jsx(h,{rows:[{key:e.jsx(a,{children:"client/src/components/scanner/scan-input.tsx"}),value:e.jsxs(e.Fragment,{children:[e.jsx(s,{children:"ScanInput"}),", remplaÃ§ant direct (",e.jsx(s,{children:"forwardRef"}),") d'un ",e.jsx(s,{children:"Input"})," de numÃ©ro de sÃ©rie (mÃªmes props, plus ",e.jsx(s,{children:"onScanned?(text)"}),"). Un bouton ",e.jsx(s,{children:"ScanLine"})," au bout du champ (",e.jsx(s,{children:"absolute inset-y-0 right-0 w-11"})," : 44 px de large et la hauteur du champ, qui est ",e.jsx(s,{children:"min-h-11"})," en pointeur grossier) ouvre ",e.jsx(s,{children:"ScannerSheet"})," avec le libellÃ© Â« numÃ©ro de sÃ©rie Â» (",e.jsx(s,{children:"scanner.fill*"}),"). Le texte dÃ©codÃ©, nettoyÃ© et coupÃ© Ã  ",e.jsx(s,{children:"maxLength"}),", passe par le setter natif de ",e.jsx(s,{children:"HTMLInputElement.value"})," puis un Ã©vÃ©nement ",e.jsx(s,{children:"input"})," qui remonte, que React transforme en ",e.jsx(s,{children:"onChange"})," : un champ contrÃ´lÃ©, un champ react-hook-form (",e.jsx(s,{children:"register()"})," ou ",e.jsx(s,{children:"FormField"}),") et un champ non contrÃ´lÃ© le voient tous. Le bouton n'apparaÃ®t qu'avec ",e.jsx(s,{children:"useCoarsePointer()"})," ou ",e.jsx(s,{children:'useViewport() !== "desktop"'}),", si ",e.jsx(s,{children:"navigator.mediaDevices.getUserMedia"})," existe et si le champ n'est ni dÃ©sactivÃ© ni en lecture seule ; sinon c'est l'",e.jsx(s,{children:"Input"})," seul, identique octet pour octet (Ã©pinglÃ© dans ",e.jsx(s,{children:"scan-input.test.tsx"}),"). Points d'appel : ",e.jsx(s,{children:"add-charger-form"}),", ",e.jsx(s,{children:"bulk-add-chargers-form"}),", ",e.jsx(s,{children:"charger-edit-dialog"}),", ",e.jsx(s,{children:"claim-recovery-dialog"})," (sÃ©rie du remplacement), ",e.jsx(s,{children:"warehouse.tsx"})," (ajout en lot, modification en ligne, fenÃªtre de modification, formulaire d'ajout) et ",e.jsx(s,{children:"infrastru

28cture-info"})," (Ã©lÃ©ments CHRGPK, panneaux principaux et secondaires, transformateurs)."]})},{key:"Changements Ã  ScannerSheet",value:e.jsxs(e.Fragment,{children:["Props de libellÃ© facultatives ",e.jsx(s,{children:"description"}),", ",e.jsx(s,{children:"manualPlaceholder"})," et ",e.jsx(s,{children:"manualSubmit"})," (valeurs par dÃ©faut inchangÃ©es), et la soumission de la saisie manuelle appelle maintenant ",e.jsx(s,{children:"stopPropagation()"})," : la feuille est rendue dans un portail, mais React fait remonter un submit dans l'arbre des composants, donc un ",e.jsx(s,{children:"ScanInput"})," dans un ",e.jsx(s,{children:"<form>"})," soumettrait aussi ce formulaire."]})},{key:e.jsx(a,{children:"client/src/components/ui/phone-link.tsx"}),value:e.jsxs(e.Fragment,{children:[e.jsxs(s,{children:["PhoneLink ","{ phone }"]})," rend un ",e.jsx(s,{children:"<a>"})," dont le href est ",e.jsx(s,{children:"telHref(phone)"})," : ",e.jsx(s,{children:"tel:"})," et les chiffres, avec un ",e.jsx(s,{children:"+"})," initial seulement si le numÃ©ro en commence par un (",e.jsx(s,{children:'"(514) 555-0100"'})," â ",e.jsx(s,{children:"tel:5145550100"}),", ",e.jsx(s,{children:'"+1 514 555 0100"'})," â ",e.jsx(s,{children:"tel:+15145550100"}),"). Il affiche le numÃ©ro tel que saisi (ou ses enfants), ajoute ",e.jsx(s,{children:"[@media(pointer:coarse)]:min-h-11"}),", et transmet ref et props pour fonctionner comme enfant Radix ",e.jsx(s,{children:"asChild"}),". Remplace les quatre liens ",e.jsx(s,{children:"tel:"})," ad hoc (contacts d'organisation, entrepreneur par dÃ©faut du site, contact du billet, bon de travail public)."]})},{key:e.jsx(a,{children:"client/src/lib/maps-href.ts"}),value:e.jsxs(e.Fragment,{children:[e.jsxs(s,{children:["mapsHref(","{ address?, lat?, lng?, label? }",", ","{ directions?, platform? }",")"]})," ; la plateforme vient de ",e.jsx(s,{children:"detectMapsPlatform()"})," (iPhone/iPad/iPod, ou un agent Mac avec points tactiles â ",e.jsx(s,{children:"ios"})," ; ",e.jsx(s,{children:"Android"})," â ",e.jsx(s,{children:"android"}),"). iOS : ",e.jsx(s,{children:"maps.apple.com/?q="}),", ",e.jsx(s,{children:"?ll=lat,lng[&q=label]"}),", itinÃ©raire ",e.jsx(s,{children:"?daddr="}),". Android : ",e.jsx(s,{children:"geo:0,0?q=adresse"})," ou ",e.jsx(s,{children:"geo:lat,lng?q=lat,lng(label)"})," ; l'itinÃ©raire passe par l'URL ",e.jsx(s,{children:"dir"})," de Google Maps (l'application Maps l'ouvre ; ",e.jsx(s,{children:"geo:"})," n'a pas de mode itinÃ©raire). Ailleurs : les URL Google Maps ",e.jsx(s,{children:"search"})," / ",e.jsx(s,{children:"dir"})," d'avant, octet pour octet, donc les liens sur ordinateur ne changent pas. Les coordonnÃ©es l'emportent sur l'adresse. ",e.jsx(s,{children:"openMaps()"})," est la forme pour un gestionnaire de clic : un URI ",e.jsx(s,{children:"geo:"})," part dans ",e.jsx(s,{children:"location.assign"})," (un ",e.jsx(s,{children:"window.open"})," laisse un onglet vide sur Android), une URL web dans ",e.jsx(s,{children:'window.open(â¦, "_blank", "noopener,noreferrer")'}),". Remplace les URL ad hoc de ",e.jsx(s,{children:"my-day.tsx"})," (son ",e.jsx(s,{children:"directionsUrl"})," disparaÃ®t), ",e.jsx(s,{children:"client-list.tsx"}),", ",e.jsx(s,{children:"customer-map.tsx"}),", ",e.jsx(s,{children:"modems-map.tsx"}),", ",e.jsx(s,{children:"mobile-site-info.tsx"})," et ",e.jsx(s,{children:"site-contact-info.tsx"})," ; les pages de documentation gardent leurs propres liens."]})}]})]})]}),e.jsxs(o,{id:"partie-3",title:"Partie 3 â Branding et customisation",children:[e.jsxs(t,{id:"page-branding",title:"22. Studio d'image de marque (Super-admin, par locataire)",children:[e.jsxs(i,{children:["Fichiers : ",e.jsx(s,{children:"client/src/components/configuration/branding-studio.tsx"})," ","(+ ",e.jsx(s,{children:"branding-studio-preview.tsx"})," pour l'aperÃ§u en direct), rendus comme section ",e.jsx(a,{children:"Configuration â Plateforme ChargeOps â Image de marque"})," ","(l'ancienne route ",e.jsx(a,{children:"/branding"})," y redirige). RÃ©servÃ© aux"," ",e.jsx(n,{children:"Super-admins"})," (",e.jsx(s,{children:"isPlatformAdmin"}),", via"," ","la porte ",e.jsx(s,{children:'"platformAdmin"'})," de ",e.jsx(s,{children:"CONFIG_TABS"}),") ; ni ",e.jsx(s,{children:"platform-support"})," ni les admins de tenant ne voient l'onglet."]}),e.jsxs(i,{children:["Architecture en trois zones (grid ",e.jsx(s,{children:"lg:grid-cols-[15rem_1fr_21.5rem]"}),") :"]}),e.jsxs(p,{children:[e.jsxs(r,{children:[e.jsx(n,{children:"Rail des locataires"})," â liste cherchable via"," ",e.jsx(s,{children:"api.platform.queries.listTenants"})," (nom, slug, pastille de statut, point de marque) ; la sÃ©lection charge"," ",e.jsx(s,{children:"api.platform.queries.getTenantBranding"}),". SÃ©lection initiale : le ",e.jsx(s,{children:"?tenant="})," de l'URL s'il est valide, sinon"," ",e.jsx(s,{children:"user.tenantId"})," (voir ci-dessous)."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Ãditeur"})," â sept groupes dÃ©pliables (IdentitÃ©, Terminologie, Actions d'en-tÃªte, PrÃ©sence cartographique, Chargement, Rapports, Courriel) pilotÃ©s par ",e.jsx(s,{children:"react-hook-form"})," ; barre d'enregistrement collante Ã  l'Ã©tat dirty, seuls les ",e.jsx(s,{children:"dirtyFields"})," sont envoyÃ©s Ã "," ",e.jsx(s,{children:"api.platform.mutations.updateTenantBranding"})," ; rÃ©initialisation par groupe (",e.jsx(s,{children:"GROUP_DEFAULTS"}),")."]}),e.jsxs(r,{children:[e.jsx(n,{children:"AperÃ§u en direct"})," â ",e.jsx(s,{children:"useWatch"})," sur le form : mini en-tÃªte (logos + boutons), animation de chargement rÃ©elle, marqueur de carte, pastilles de terminologie et mini-couverture de rapport (fond"," ",e.jsx(s,{children:"reportSecondaryColor"}),", filet ",e.jsx(s,{children:"reportPrimaryColor"}),", slogan rÃ©solu), mis Ã  jour avant l'enregistrement."]})]}),e.jsxs(i,{children:[e.jsx(n,{children:"Garde-fous (2026-07-27)."})," ContrÃ´le de contraste"," ",e.jsx(n,{children:"WCAG"})," sur les couleurs de rapport, bouton"," ",e.jsx(n,{children:"Â« RÃ©initialiser Â»"})," par emplacement d'upload, validation de type/taille sur le glisser-dÃ©poser, messages d'erreur de validation visibles, et une ",e.jsx(n,{children:"garde de modifications non enregistrÃ©es"})," ","au changement de locataire dans le rail. L'aperÃ§u de rapport suit dÃ©sormais exactement la rÃ¨gle du PDF (aucun slogan Polara affichÃ© Ã  tort sur un tenant secondaire qui n'en imprime aucun). Bouton"," ",e.jsx(n,{children:"d'envoi de test SMTP"})," dans le groupe Courriel (voir la section 29)."]}),e.jsxs(i,{children:[e.jsxs(n,{children:["Deep-link ",e.jsx(s,{children:"?tenant=<id>"}),"."]})," La console plateforme lie chaque ligne de tenant vers"," ",e.jsx(s,{children:"/configuration?tab=branding&tenant=<id>"}),". Le Studio lit le paramÃ¨tre avec ",e.jsx(s,{children:"useSearch()"})," (wouter) â le"," ",e.jsx(s,{children:"?tab="})," Ã©tait dÃ©jÃ  gÃ©rÃ© par ",e.jsx(s,{children:"configuration.tsx"})," ","(",e.jsx(s,{children:"tabParam"}),"), seul ",e.jsx(s,{children:"?tenant="})," est nouveau. Auparavant l'effet de sÃ©lection initiale posait"," ",e.jsx(n,{children:"toujours"})," ",e.jsx(s,{children:"user.tenantId"}),", si bien qu'un simple lien vers ",e.jsx(s,{children:"?tab=branding"})," atterrissait sur le mauvais tenant. Deux garde-fous encadrent la nouvelle rÃ©solution :"]}),e.jsxs(p,{children:[e.jsxs(r,{children:[e.jsx(n,{children:"Validation"})," â l'id n'est honorÃ© que s'il est"," ",e.jsxs(n,{children:["prÃ©sent dans ",e.jsx(s,{children:"listTenants"})]}),", donc dans les tenants que cet admin peut rÃ©ellement voir. Un id pÃ©rimÃ© ou fabriquÃ© retombe sur le tenant de l'admin plutÃ´t que d'afficher un Studio vide."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Course au chargement"})," â l'effet"," ",e.jsx(s,{children:"return"})," tÃ´t (il attend) quand un paramÃ¨tre"," ",e.jsx(s,{children:"tenant"})," est prÃ©sent et que"," ",e.jsx(s,{children:"tenants === undefined"})," ; sans cela, le repli"," ",e.jsx(s,{children:"user.tenantId"})," s'appliquait dÃ¨s sa rÃ©solution et Ã©crasait un ",e.jsx(s,{children:"?tenant="})," pourtant valide avant l'arrivÃ©e de la liste."]})]}),e.jsxs(d,{tone:"info",title:"L'aperÃ§u rÃ©sout pour le tenant ÃDITÃ, pas pour l'admin",children:[e.jsx(s,{children:"editedIsMainTenant = isMainTenantSlug(selectedTenant?.slug)"})," ","(",e.jsx(s,{children:"shared/tenant-slug.ts"}),") et"," ",e.jsx(s,{children:"editedPrimaryLogo = resolvePrimaryLogo(...)"})," sont calculÃ©s pour le locataire sÃ©lectionnÃ© dans le rail, puis passÃ©s Ã "," ",e.jsx(s,{children:"StaticBrandedSpinner"})," et Ã "," ",e.jsx(s,{children:"resolveBrandGlyph"})," dans ",e.jsx(s,{children:"MapFields"}),","," ",e.jsx(s,{children:"LoadingFields"})," et ",e.jsx(s,{children:"branding-studio-preview.tsx"}),". Les aperÃ§us inline et la miniature montrent donc ce que"," ",e.jsx(n,{children:"ce"})," tenant verra : pin nue et spinner gÃ©nÃ©rique pour un tenant secondaire sans logo, jamais l'asset Polara du super-admin."]}),e.jsxs(i,{children:["Nouveaux champs ",e.jsx(s,{children:"brandingSettings"})," (Branding v2) :"," ",e.jsx(s,{children:"ctrlbxLabel"}),", ",e.jsx(s,{children:"headerButton1Enabled"}),","," ",e.jsx(s,{children:"headerButton2Enabled"})," (undefined = activÃ©),"," ",e.jsx(s,{children:"headerButton1LogoUrl"}),". La redaction SMTP est conservÃ©e (les secrets sont masquÃ©s Ã  la lecture, rÃ©Ã©crits seulement si saisis)."]}),e.jsxs(i,{children:["Champs Rapports (Branding v2 Task 7) : ",e.jsx(s,{children:"reportTaglineFr"})," /"," ",e.jsx(s,{children:"reportTaglineEn"})," (slogan de couverture/dos par langue de rapport ; repli langue du rapport â autre langue â slogan Polara, via"," ",e.jsx(s,{children:"report-branding.ts::resolveReportTagline"}),") et"," ",e.jsx(s,{children:"reportContactLines"})," (tableau de chaÃ®nes, une par ligne rendue au dos â la zone de texte du Studio est dÃ©coupÃ©e sur les sauts de ligne Ã  l'enregistrement ; tableau vide = adresses Polara). Les couleurs"," ",e.jsx(s,{children:"reportPrimaryColor"})," (accent, dÃ©faut ",e.jsx(s,{children:"#EF4923"}),") et"," ",e.jsx(s,{children:"reportSecondaryColor"})," (profonde, dÃ©faut ",e.jsx(s,{children:"#0E1638"}),") s'appliquent dÃ©sormais rÃ©ellement aux deux documents PDF (entretien et service) ; non configurÃ©s, le rendu Polara est identique au pixel prÃ¨s."," ",e.jsx(s,{children:"use-branding.tsx"})," expose les valeurs brutes (",e.jsx(s,{children:"reportPrimaryColorRaw"}),"/",e.jsx(s,{children:"reportSecondaryColorRaw"}),","," ",e.jsx(s,{children:"null"})," si non dÃ©finies) consommÃ©es par les deux pages de dÃ©tail."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Replis Polara rÃ©servÃ©s au tenant principal."})," ",e.jsx(s,{children:"resolveReportTagline(language, custom, fallback, isMainTenant)"})," ","prend un quatriÃ¨me argument (dÃ©faut ",e.jsx(s,{children:"true"}),", donc les appelants existants sont inchangÃ©s) : sans slogan configurÃ©, un tenant secondaire imprime une chaÃ®ne ",e.jsx(n,{children:"vide"})," plutÃ´t que le slogan Polara. SymÃ©triquement,"," ",e.jsx(s,{children:"resolveReportContactBlock(contactLines, isMainTenant)"})," ","(nouveau, avec la constante ",e.jsx(s,{children:"POLARA_CONTACT_BLOCK"})," ","partagÃ©e par les deux documents) retourne"," ",e.jsx(s,{children:'{ kind: "custom" }'})," dÃ¨s que le tenant a saisi des lignes, ",e.jsx(s,{children:'{ kind: "polara" }'})," (Longueuil / Newark) sur le tenant principal seulement, et"," ",e.jsx(s,{children:'{ kind: "none" }'})," ailleurs â le dos de rapport omet alors tout le bloc. Les ",e.jsx(n,{children:"couleurs"})," par dÃ©faut, elles, restent communes Ã  tous les tenants."]}),e.jsxs(i,{children:["Tous les uploads passent par ",e.jsx(n,{children:"Convex Storage"})," :"]}),e.jsx(c,{language:"ts",children:`const uploadUrl = await generateUploadUrl(

28);
29await fetch(uploadUrl, { method: "POST", headers: { "Content-Type": file.type }, body: file });
30const { storageId } = await result.json();
31const url = await convexClient.query(api.files.queries.getStorageUrl, { storageId });
32await updateTenantBranding({ tenantId, companyLogoUrl: url });`})]}),e.jsxs(t,{id:"menu-customization",title:"22a. Personnalisation des menus (Super-admin, par locataire)",children:[e.jsxs(i,{children:["Fichiers : ",e.jsx(s,{children:"client/src/components/configuration/menu-customization.tsx"})," ","(Ã©diteur, rendu comme section"," ",e.jsx(a,{children:"Configuration â Plateforme ChargeOps â Menus"}),") ; le"," ",e.jsx(s,{children:"MENU_REGISTRY"})," (",e.jsx(s,{children:"client/src/lib/menu-registry.ts"}),") â le catalogue dÃ©claratif de ce qui est renommable/rÃ©ordonnable par surface ; le noyau pur sans React (",e.jsx(s,{children:"client/src/lib/menu-customization.ts"}),") â types, "," ",e.jsx(s,{children:"menuItemId"}),", ",e.jsx(s,{children:"resolveLabel"}),", ",e.jsx(s,{children:"applyOrder"}),","," ",e.jsx(s,{children:"applyMenuCustomization"})," ; et l'Ã©criture,"," ",e.jsx(s,{children:"platform.mutations.updateTenantMenuCustomization"}),", une"," ",e.jsx(s,{children:"platformMutation"})," (donc ",e.jsx(s,{children:"requirePlatformAdmin"})," â"," ",e.jsx(s,{children:"platform-support"})," ne peut pas Ã©crire), symÃ©trique de"," ",e.jsx(s,{children:"updateTenantBranding"})," : elle ne patch que le champ"," ",e.jsx(s,{children:"menuCustomization"})," de la ligne ",e.jsx(s,{children:"brandingSettings"})," du tenant ciblÃ© (les champs de branding, y compris les secrets SMTP, ne sont jamais touchÃ©s)."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Surfaces"})," (",e.jsx(s,{children:"MENU_SURFACES"}),") : ",e.jsx(s,{children:"topMenu"})," (barre de navigation du haut), ",e.jsx(s,{children:"subnav.maintenance"}),","," ",e.jsx(s,{children:"subnav.vehicles"}),", ",e.jsx(s,{children:"subnav.rma"}),","," ",e.jsx(s,{children:"subnav.warehouse"}),", ",e.jsx(s,{children:"subnav.support"})," (les cinq sous-menus de section pilotÃ©s par les composants d'onglets partagÃ©s â l'onglet Â«Â RSAÂ Â» fait partie de la surface Maintenance, ce n'est pas une surface sÃ©parÃ©e),"," ",e.jsx(s,{children:"profileItem"})," et ",e.jsx(s,{children:"profileSections"})," (les liens et les en-tÃªtes de section du menu profil, rÃ©ordonnables indÃ©pendamment)."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Contrat des identifiants"})," : chaque Ã©lÃ©ment personnalisable est adressÃ© par un id namespacÃ© globalement unique,"," ",e.jsx(s,{children:"menuItemId(surface, localKey)"})," â composÃ© en"," ",e.jsx(s,{children:'"surface:localKey"'}),". Les id des menus rÃ©ellement rendus, ceux du registre de l'Ã©diteur et la composition faite par l'Ã©diteur doivent tous concorder â un dÃ©calage se manifeste comme Â«Â le renommage n'a aucun effetÂ Â»."]}),e.jsxs(i,{children:[e.jsx(n,{children:"ModÃ¨le de donnÃ©es"})," : ",e.jsx(s,{children:"brandingSettings.menuCustomization"})," ","(par tenant) â ",e.jsx(s,{children:"{ labels?: Record<itemId, { fr?, en? }>, order?: Record<surfaceId, itemId[]> }"}),". Lu app-large via ",e.jsx(s,{children:"useBranding()"}),". Comportement par dÃ©faut"," ",e.jsx(n,{children:"inerte"})," : sans personnalisation enregistrÃ©e,"," ",e.jsx(s,{children:"resolveLabel"})," et ",e.jsx(s,{children:"applyOrder"})," renvoient l'entrÃ©e inchangÃ©e et chaque menu se rend exactement comme avant cette fonctionnalitÃ©."]}),e.jsxs(l,{children:[e.jsxs(r,{children:[e.jsx(n,{children:"LibellÃ©s"})," : un champ vide (FR ou EN) retombe automatiquement sur le libellÃ© intÃ©grÃ© â jamais de chaÃ®ne vide persistÃ©e."]}),e.jsxs(r,{children:[e.jsx(n,{children:"PrÃ©remplissage bilingue de l'Ã©diteur"})," :"," ",e.jsx(s,{children:"registryDefaultLabels()"})," (",e.jsx(s,{children:"menu-registry.ts"}),") rÃ©sout le nom intÃ©grÃ© de chaque id dans les ",e.jsx(n,{children:"deux"})," langues via"," ",e.jsx(s,{children:'getTranslation("fr"/"en", â¦)'}),", et le brouillon de l'Ã©diteur porte donc du texte FR/EN complet pour chaque ligne. Les aides pures de"," ",e.jsx(s,{children:"client/src/lib/menu-editor-draft.ts"})," empÃªchent ce confort de transformer chaque ligne affichÃ©e en override : ",e.jsx(s,{children:"splitSavedLabels"})," amorce le brouillon (dÃ©fauts, Ã©crasÃ©s par les overrides enregistrÃ©s) et met de cÃ´tÃ© en"," ",e.jsx(s,{children:"orphans"})," les overrides dont l'id ne figure plus au registre ;"," ",e.jsx(s,{children:"collectLabelOverrides"})," rediffe le brouillon vers la carte creuse enregistrÃ©e â une ligne restÃ©e (ou revenue) Ã  son dÃ©faut n'Ã©crit rien, et les orphelins traversent l'enregistrement intacts. ",e.jsx(s,{children:"isRowDirty"})," (non rognÃ©) garde le bouton Â«Â RÃ©initialiserÂ Â» accessible depuis un champ Ã  demi vidÃ©, tandis que l'encadrÃ© de ligne suit ",e.jsx(s,{children:"overrideForRow"})," â donc ce qui serait rÃ©ellement enregistrÃ©."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Chargement des tables"})," : la table FR est importÃ©e paresseusement, et tant qu'elle n'a pas atterri ",e.jsx(s,{children:'getTranslation("fr", â¦)'})," renvoie l'anglais. L'Ã©diteur attend donc ",e.jsx(s,{children:'ensureLanguageLoaded("fr")'})," ","avant de calculer ses dÃ©fauts et d'amorcer le brouillon â sinon la colonne FR serait semÃ©e d'anglais, puis rÃ©amorcÃ©e en Ã©crasant la saisie en cours. Un Ã©chec de ce chargement ne compte ",e.jsx(n,{children:"pas"})," comme Â«Â prÃªtÂ Â» : l'Ã©diteur affiche une erreur et refuse d'enregistrer, car un override FR dont le texte coÃ¯ncide avec le libellÃ© anglais intÃ©grÃ© serait sinon Ã©cartÃ© comme Â«Â inchangÃ©Â Â». Le bouton Â«Â EnregistrerÂ Â» est de la mÃªme faÃ§on dÃ©sactivÃ© tant que le brouillon n'est pas amorcÃ© (et pendant le chargement de la ligne d'un locataire fraÃ®chement sÃ©lectionnÃ©) : enregistrer un brouillon vide effacerait toute la personnalisation du locataire."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Ordre"})," : ",e.jsx(s,{children:"applyOrder"})," place d'abord les id prÃ©sents dans l'ordre enregistrÃ© (dans cet ordre), puis ajoute les id absents Ã  la suite dans leur ordre relatif d'origine â un ",e.jsx(n,{children:"Ã©lÃ©ment nouvellement livrÃ©"})," n'est donc ",e.jsx(n,{children:"jamais masquÃ©"})," par un ordre dÃ©jÃ  enregistrÃ©."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Tiroir mobile"})," : reÃ§oit uniquement les renommages du"," ",e.jsx(n,{children:"menu principal"})," (appliquÃ©s par correspondance d'id de route) ; les renommages du menu profil et des sous-menus ne l'affectent pas, et le rÃ©ordonnancement reste rÃ©servÃ© Ã  l'ordinateur â limitation v1 volontaire."]})]}),e.jsxs(i,{children:[e.jsx(n,{children:"Ãditeur"})," : mÃªme schÃ©ma que le Studio d'image de marque â rail de locataires cherchable (",e.jsx(s,{children:"ny-card"}),", ",e.jsx(s,{children:"Input"})," de recherche), puis une carte ",e.jsx(s,{children:"ny-card"})," par surface du registre contenant une liste"," ",e.jsx(s,{children:"Reorder.Group"})," (Framer Motion) d'Ã©lÃ©ments glissables, chacun avec deux champs ",e.jsx(s,{children:"Input"})," (FR/EN) et un bouton de rÃ©initialisation par Ã©lÃ©ment ; un bouton ",e.jsx(s,{children:"Button"})," Â«Â EnregistrerÂ Â» en haut Ã©crit le brouillon via"," ",e.jsx(s,{children:"updateTenantMenuCustomization"}),". La surface"," ",e.jsx(s,{children:"profileItem"})," fait exception : ses lignes sont regroupÃ©es par"," ",e.jsx(s,{children:"MenuRegistryItem.section"})," sous un sous-titre par section, avec"," ",e.jsxs(n,{children:["un ",e.jsx(s,{children:"Reorder.Group"})," par section"]}),", si bien qu'un Ã©lÃ©ment ne se dÃ©place qu'Ã  l'intÃ©rieur de sa section â ce qui reflÃ¨te la faÃ§on dont"," ",e.jsx(s,{children:"profile-menu.tsx"})," applique l'ordre ",e.jsx(s,{children:"profileItem"})," enregistrÃ©"," ",e.jsx(n,{children:"Ã  l'intÃ©rieur de chaque section"})," (les dÃ©placements entre sections se font en rÃ©ordonnant ",e.jsx(s,{children:"profileSections"}),"). Un glisser reconstruit l'ordre plat de la surface comme la concatÃ©nation de l'ordre de chaque section ; les identifiants stockÃ©s et la sÃ©mantique d'",e.jsx(s,{children:"applyOrder"})," restent inchangÃ©s."]})]}),e.jsx(t,{id:"logo-societe",title:"23. Logo de sociÃ©tÃ©",children:e.jsxs(l,{children:[e.jsxs(r,{children:["Upload via"," ",e.jsx(s,{children:'<Input type="file" accept="image/*">'})," (limite serveur ~5 Mo, formats PNG/JPG/WebP)."]}),e.jsxs(r,{children:["Affichage : aperÃ§u ",e.jsx(s,{children:"h-24 w-auto object-contain"})," bordÃ©."]}),e.jsxs(r,{children:["Champ Convex : ",e.jsx(s,{children:"brandingSettings.companyLogoUrl"})," ","(optionnel, string URL)."]}),e.jsxs(r,{children:["Ãtat vide : icÃ´ne ",e.jsx(s,{children:"<ImageIcon>"})," dans une zone tiretÃ©e (",e.jsx(s,{children:"border-dashed"}),")."]})]})}),e.jsx(t,{id:"org-sous-marque",title:"23a. Sous-image de marque par organisation",children:e.jsxs(i,{children:["Une couche facultative ",e.jsx(n,{children:"un cran sous le tenant"})," : la table ",e.jsx(s,{children:"organizations"})," porte"," ",e.jsx(s,{children:"brandingLogoUrl"}),", ",e.jsx(s,{children:"reportPrimaryColor"}),","," ",e.jsx(s,{children:"reportSecondaryColor"}),", ",e.jsx(s,{children:"reportTaglineFr"})," /"," ",e.jsx(s,{children:"reportTaglineEn"}),", Ã©crits par"," ",e.jsx(s,{children:"organizations/mutations.ts::update"})," (tri-Ã©tat :"," ",e.jsx(s,{children:"undefined"})," = inchangÃ©, ",e.jsx(s,{children:"null"})," = efface)."," ",e.jsx(s,{children:"convex/lib/orgBranding.ts::resolveOrgBranding"})," applique la chaÃ®ne ",e.jsxs(n,{children:["organisation â ",e.jsx(s,{children:"brandingSettings"})," du tenant â dÃ©faut plateforme"]})," (chaque champ absent hÃ©rite). ConsommÃ©e par l'en-tÃªte du portail opÃ©rateur (",e.jsx(s,{children:"portal-layout.tsx"}),") et les PDF de rapport (",e.jsx(s,{children:"report-document.tsx"})," / ",e.jsx(s,{children:"service-report-document.tsx"}),"). Tests : ",e.jsx(s,{children:"convex/lib/__tests__/orgBranding.test.ts"}),"."]})}),e.jsxs(t,{id:"branded-logo",title:"24. Composant <BrandedLogo>",children:[e.jsxs(i,{children:[e.jsx(s,{children:"client/src/components/ui/branded-logo.tsx"})," â wrapper"," ",e.jsx(s,{children:"<img>"})," mÃ©morisÃ© qui rÃ©sout le bon logo selon"," ",e.jsx(s,{children:"brand"})," et ",e.jsx(s,{children:"theme"})," :"]}),e.jsx(c,{language:"tsx",children:`<BrandedLogo brand="polara" />              // dÃ©faut
33<BrandedLogo brand="chargeops" className="h-4 w-auto" />`}),e.jsxs(i,{children:[e.jsx(n,{children:"Proportions garanties."})," Le composant fusionne"," ",e.jsx(s,{children:"object-contain"})," avec le ",e.jsx(s,{children:"className"})," de l'appelant (via ",e.jsx(s,{children:"cn()"}),") : si une barre trop Ã©troite Ã©crase la boÃ®te de l'image, la marque se rÃ©duit proportionnellement au lieu de s'Ã©tirer. Le rapport largeur/

33hauteur est donc structurel, pas Ã  la charge de chaque appelant."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Logique de rÃ©solution"})," (",e.jsx(s,{children:"useBranding().getLogoForTheme"}),", dÃ©sormais"," ",e.jsx(n,{children:"nullable"})," pour la marque ",e.jsx(s,{children:"polara"})," â la marque principale â via ",e.jsx(s,{children:"lib/primary-logo.ts::resolvePrimaryLogo"}),", qui dÃ©pend de ",e.jsx(s,{children:"users.me.isMainTenant"}),") :"]}),e.jsx(u,{headers:["Brand","Theme","Source (prioritÃ© dÃ©croissante)"],rows:[[e.jsx(s,{children:"polara"}),e.jsx(s,{children:"light"}),e.jsxs(e.Fragment,{children:[e.jsx(s,{children:"branding.polaraLogoUrl"})," â"," ",e.jsx(s,{children:"branding.companyLogoUrl"})," (locataires secondaires seulement) â locataire principal/inconnu :"," ",e.jsx(s,{children:"polaraLogoDefault"})," (asset bundle) ; secondaire :"," ",e.jsx(s,{children:"null"})," (rien n'est rendu)"]})],[e.jsx(s,{children:"polara"}),e.jsx(s,{children:"dark"}),e.jsxs(e.Fragment,{children:[e.jsx(s,{children:"branding.polaraLogoDarkUrl"})," â"," ",e.jsx(s,{children:"branding.polaraLogoUrl"})," â"," ",e.jsx(s,{children:"branding.companyLogoUrl"})," (secondaires) â dÃ©faut Polara (principal/inconnu) ou ",e.jsx(s,{children:"null"})]})],[e.jsx(s,{children:"chargeops"}),e.jsx(s,{children:"light"}),e.jsxs(e.Fragment,{children:[e.jsx(s,{children:"branding.chargeopsLogoUrl"})," â"," ",e.jsx(s,{children:"chargeOpsLogoDefault"})]})],[e.jsx(s,{children:"chargeops"}),e.jsx(s,{children:"dark"}),e.jsxs(e.Fragment,{children:[e.jsx(s,{children:"branding.chargeopsLogoDarkUrl"})," â"," ",e.jsx(s,{children:"branding.chargeopsLogoUrl"})," â"," ",e.jsx(s,{children:"chargeOpsLogoDarkDefault"})]})]]}),e.jsx(i,{children:"Chaque variante peut Ãªtre uploadÃ©e sÃ©parÃ©ment dans le groupe Â« IdentitÃ© Â» du Studio d'image de marque. Les variantes sombres sont prÃ©visualisÃ©es sur leur vrai fond marine pour vÃ©rifier le contraste."}),e.jsxs(i,{children:[e.jsx(n,{children:"RÃ©solution nullable :"})," quand"," ",e.jsx(s,{children:"resolvePrimaryLogo"})," retourne ",e.jsx(s,{children:"null"})," (un locataire secondaire sans logo), ",e.jsx(s,{children:"BrandedLogo"})," ne rend"," ",e.jsx(n,{children:"rien"})," (pas d'",e.jsx(s,{children:"<img>"}),") et les sÃ©parateurs adjacents des en-tÃªtes sont masquÃ©s. La mÃªme marque principale rÃ©solue (",e.jsx(s,{children:"useBranding().primaryLogo"})," /"," ",e.jsx(s,{children:"primaryLogoDark"}),", nullables) se propage aux documents PDF (",e.jsx(s,{children:"report-document.tsx"}),","," ",e.jsx(s,{children:"service-report-document.tsx"}),") : couverture et dos de rapport omettent le bloc logo quand elle est ",e.jsx(s,{children:"null"}),". Le logo Polara intÃ©grÃ© n'apparaÃ®t donc que sur l'espace de travail principal (ou sur l'hÃ´te gÃ©nÃ©rique â apex, ",e.jsx(s,{children:"www"}),","," ",e.jsx(s,{children:"localhost"}),", prÃ©visualisations â oÃ¹ aucun locataire n'est identifiable)."]}),e.jsxs(i,{children:[e.jsx(n,{children:"RÃ©solution avant la connexion (host-aware)."})," ",e.jsx(s,{children:"api.system.queries.getBrandingSettings"})," est une requÃªte"," ",e.jsx(n,{children:"authentifiÃ©e"})," : elle vaut ",e.jsx(s,{children:"undefined"})," ","avant login, ce qui faisait retomber les pages publiques sur l'asset Polara sur ",e.jsx(n,{children:"tous"})," les sous-domaines."," ",e.jsx(s,{children:"useBranding()"})," lit dÃ©sormais aussi"," ",e.jsx(s,{children:"useTenantHost()"})," et utilise le branding public du tenant de l'hÃ´te (",e.jsx(s,{children:"hostTenant"}),") comme source de repli des logos et du ",e.jsx(s,{children:"loadingAnimationType"}),". Les deux appels de hooks restent inconditionnels ; le ",e.jsx(s,{children:"try/catch"})," n'absorbe que le throw Â« provider manquant Â» des harnais de test isolÃ©s."]}),e.jsx(u,{headers:["Contexte","isMainTenant","Source du branding"],rows:[["Session rÃ©solue",e.jsx(s,{children:"user.isMainTenant ?? false"}),e.jsxs(e.Fragment,{children:[e.jsx(s,{children:"getBrandingSettings"})," (ligne authentifiÃ©e du tenant)"]})],[e.jsxs(e.Fragment,{children:["Avant login, sous-domaine ",e.jsx(s,{children:"<slug>"})]}),e.jsxs(e.Fragment,{children:[e.jsx(s,{children:"false"})," â ",e.jsx(s,{children:"MAIN_TENANT_SLUG"})," est rÃ©servÃ©, donc un ",e.jsx(s,{children:"hostSlug"})," rÃ©solu est toujours secondaire"]}),e.jsxs(e.Fragment,{children:[e.jsx(s,{children:"hostTenant"})," (",e.jsx(s,{children:"getTenantBySlug"}),", requÃªte publique)"]})],["Avant login, hÃ´te gÃ©nÃ©rique (apex, www, localhost)",e.jsx(s,{children:"true"}),"Aucune â assets par dÃ©faut (identitÃ© Polara/ChargeOps)"]]}),e.jsxs(i,{children:["Le hook expose deux nouvelles valeurs :"," ",e.jsx(s,{children:"isMainTenant"}

33)," (l'axe unique dont dÃ©pendent tous les replis de marque, pour Ã©viter que chaque surface le re-dÃ©rive) et"," ",e.jsx(s,{children:"tenantName"})," (le nom Ã  afficher dans la copie visible â pied de page, Ã©cran d'espace suspendu â, issu de la session ou, avant login, du sous-domaine ; ",e.jsx(s,{children:"null"})," sur l'hÃ´te gÃ©nÃ©rique)."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Emplacements des pages d'authentification."})," Sur"," ",e.jsx(s,{children:"auth-page.tsx"}),", le logo du tenant hÃ´te occupait la"," ",e.jsx(n,{children:"carte de connexion"})," (Ã  la place de la marque ChargeOps) pendant que la marque principale, en haut Ã  gauche, restait Polara â soit exactement l'inverse du modÃ¨le. DÃ©sormais : le ",e.jsx(n,{children:"slot primaire"})," (haut-gauche) porte"," ",e.jsx(s,{children:'<BrandedLogo brand="polara">'})," â donc le logo du tenant, ou rien â et la carte garde"," ",e.jsx(s,{children:'<BrandedLogo brand="chargeops">'}),", marque de la plateforme. L'inversion ",e.jsx(s,{children:"dark:brightness-0 dark:invert"})," ","n'est appliquÃ©e que sur l'hÃ´te principal (elle ne convient qu'au wordmark monochrome Polara ; le logo d'un tenant s'affiche tel quel) et la ligne de copyright utilise"," ",e.jsx(s,{children:'user?.tenantName || hostTenant?.name || "Polara"'}),". MÃªme traitement sur ",e.jsx(s,{children:"forgot-password.tsx"})," et"," ",e.jsx(s,{children:"reset-password.tsx"}),"."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Textes alternatifs."})," Les ",e.jsx(s,{children:"alt"})," du slot primaire ne nomment plus Polara (",e.jsx(s,{children:"suspended-workspace.tsx"})," et les pages d'auth au nom du tenant) â un ",e.jsx(s,{children:"alt"})," codÃ© Â« Polara Â» aurait fuitÃ© la marque sur les lecteurs d'Ã©cran et les images cassÃ©es d'un tenant secondaire."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Navigation :"})," ",e.jsx(s,{children:"BrandedLogo"})," ne rend qu'un"," ",e.jsx(s,{children:"<img>"})," (aucune logique de lien). Pour ramener Ã  l'accueil, le logo ChargeOps est enveloppÃ© dans un"," ",e.jsx(s,{children:'<Link href="/">'})," wouter (",e.jsx(s,{children:'data-testid="link-logo-home"'}),") dans les deux en-tÃªtes desktop :"," ",e.jsx(s,{children:"app-layout.tsx"})," et l'en-tÃªte propre de"," ",e.jsx(s,{children:"home.tsx"}),". Sur tÃ©lÃ©phone, l'accueil est le premier onglet de la coquille tÃ©lÃ©phone. Le logo Polara et la pastille Â« Tableau de bord Â» restent inchangÃ©s."]})]}),e.jsxs(t,{id:"map-markers",title:"25. Marqueurs cartes personnalisÃ©s",children:[e.jsxs(i,{children:["Champ : ",e.jsx(s,{children:"brandingSettings.mapMarkerMode"})," â"," ",e.jsx(s,{children:'"none" | "polara" | "custom"'}),"."]}),e.jsxs(l,{children:[e.jsxs(r,{children:[e.jsx(s,{children:"none"})," â marqueur Google Maps standard (pin gris)."]}),e.jsxs(r,{children:[e.jsx(s,{children:"polara"})," (dÃ©faut) â marqueur teardrop avec dÃ©gradÃ© bleu-rouge (",e.jsx(s,{children:"marker-pin.expanded"}),") portant"," ",e.jsx(n,{children:"la marque par dÃ©faut du tenant"})," : l'Ã©pingle Polara (",e.jsx(s,{children:"Polara-Marker"}),") sur le tenant principal, la marque principale rÃ©solue sur un tenant secondaire, et"," ",e.jsx(n,{children:"aucun glyphe"})," quand celui-ci n'a pas de logo."]}),e.jsxs(r,{children:[e.jsx(s,{children:"custom"})," â image uploadÃ©e (",e.jsx(s,{children:"brandingSettings.customMapMarkerUrl"}),")."]})]}),e.jsxs(i,{children:["L'aperÃ§u et l'upload se font dans le groupe Â« PrÃ©sence cartographique Â» du Studio (upload visible seulement si"," ",e.jsx(s,{children:'mapMarkerMode === "custom"'}),"). Le mode s'applique sur la carte des clients ",e.jsx(n,{children:"et"})," la carte des modems (paritÃ© ",e.jsx(s,{children:'"none"'})," ajoutÃ©e Ã "," ",e.jsx(s,{children:"modems-map.tsx"})," en Branding v2)."]}),e.jsxs(i,{children:["Le hook ",e.jsx(s,{children:"client/src/hooks/use-brand-marker.ts::useBrandedMapMarker"})," ","â jumeau de ",e.jsx(s,{children:"useBrandedLoaderImage()"}),", mÃªme chaÃ®ne"," ",e.jsx(s,{children:"lib/brand-glyph.ts"})," â est la seule source des deux cartes. Il retourne ",e.jsx(s,{children:"null"})," dans deux cas confondus Ã  l'affichage : mode ",e.jsx(s,{children:'"none"'}),", ou tenant secondaire sans logo ; l'appelant dessine alors l'Ã©pingle colorÃ©e seule."]})]}),e.jsxs(t,{id:"loading-animation",title:"26. Loading animation",children:[e.jsxs(i,{children:["Champ : ",e.jsx(s,{children:"brandingSettings.loadingAnimationType"})," â"," ",e.jsx(s,{children:'"polara" | "custom" | "standard"'})," (cf. section 6)."]}),e.jsxs(i,{children:["Groupe Â« Chargement Â» du Studio : trois options + zone d'upload conditionnelle si ",e.jsx(s,{children:"custom"})," ; l'aperÃ§u en direct joue l'animation rÃ©ellement configurÃ©e. Depuis Branding v2,"," ",e.jsx(n,{children:"toutes"})," les surfaces de chargement passent par"," ",e.jsx(s,{children:"branded-spinner.tsx"})," et honorent ce champ (cf. la note de la section 6), y compris le glyphe du pied de page."]}),e.jsxs(i,{children:["Le mode ",e.jsx(s,{children:'"polara"'})," se lit maintenant Â« la marque par dÃ©faut de ce tenant Â» : voir la chaÃ®ne partagÃ©e de la section 26a."]})]}),e.jsxs(t,{id:"brand-glyph",title:"26a. ChaÃ®ne partagÃ©e des glyphes secondaires â brand-glyph.ts",children:[e.jsxs(i,{children:[e.jsx(s,{children:"client/src/lib/brand-glyph.ts::resolveBrandGlyph"})," â pur et sans effet de bord, jumeau de"," ",e.jsx(s,{children:"lib/primary-logo.ts::resolvePrimaryLogo"})," (qui, lui, gÃ¨re le ",e.jsx(n,{children:"wordmark principal"}),"). Il rÃ©sout les deux"," ",e.jsx(n,{children:"glyphes secondaires"}

33),", ces petites marques carrÃ©es qui retombaient toutes deux en dur sur un asset Polara :"]}),e.jsxs(l,{children:[e.jsxs(r,{children:["le ",e.jsx(n,{children:"glyphe de chargement"})," (",e.jsx(s,{children:"loadingAnimationType"})," /"," ",e.jsx(s,{children:"customLoadingAnimationUrl"}),") â consommÃ© par"," ",e.jsx(s,{children:"useBrandedLoaderImage()"}),", donc tous les loaders de page/section/onglet, le glyphe du pied de page et le hÃ©ros de l'accueil ;"]}),e.jsxs(r,{children:["le ",e.jsx(n,{children:"marqueur de carte"})," (",e.jsx(s,{children:"mapMarkerMode"})," /"," ",e.jsx(s,{children:"customMapMarkerUrl"}),") â consommÃ© par"," ",e.jsx(s,{children:"useBrandedMapMarker()"}),", donc la carte des clients et la carte des modems."]})]}),e.jsx(i,{children:"Ordre de rÃ©solution, identique pour les deux surfaces :"}),e.jsxs(p,{children:[e.jsxs(r,{children:["mode d'",e.jsx(n,{children:"arrÃªt explicite"})," (",e.jsx(s,{children:'"standard"'})," ","pour le loader, ",e.jsx(s,{children:'"none"'})," pour le marqueur) â"," ",e.jsx(s,{children:"null"}),", sur tous les tenants ;"]}),e.jsxs(r,{children:[e.jsx(s,{children:'"custom"'})," + un tÃ©lÃ©versement pour cette surface â ce tÃ©lÃ©versement, sur tous les tenants ;"]}),e.jsxs(r,{children:["sinon (y compris ",e.jsx(s,{children:'"polara"'})," et ",e.jsx(s,{children:"undefined"}),") â ",e.jsx(n,{children:"la marque par dÃ©faut de ce tenant"})," : l'asset Polara intÃ©grÃ© si ",e.jsx(s,{children:"isMainTenant"}),", sinon la marque principale rÃ©solue du tenant (",e.jsx(s,{children:"primaryLogo"}),"), et"," ",e.jsx(s,{children:"null"})," quand celle-ci est nulle."]})]}),e.jsxs(d,{tone:"info",title:"Aucune migration de donnÃ©es",children:["La valeur d'Ã©numÃ©ration stockÃ©e ",e.jsx(s,{children:'"polara"'})," est"," ",e.jsx(n,{children:"inchangÃ©e"})," en base â seule son interprÃ©tation change. Les lignes ",e.jsx(s,{children:"brandingSettings"})," existantes, les validateurs Convex et le schÃ©ma partagÃ© ne bougent pas."]})]}),e.jsxs(t,{id:"favicon-metadata",title:"26b. Favicon par tenant et mÃ©tadonnÃ©es statiques",children:[e.jsxs(i,{children:[e.jsx(s,{children:"client/src/hooks/use-branded-favicon.ts::useBrandedFavicon"}),", montÃ© une fois via le composant ",e.jsx(s,{children:"BrandedFavicon"})," de"," ",e.jsx(s,{children:"App.tsx"})," (rend ",e.jsx(s,{children:"null"}),"). L'application est un"," ",e.jsx(n,{children:"build statique unique"})," servi Ã  l'octet prÃ¨s Ã  tous les sous-domaines : le ",e.jsx(s,{children:'link rel="icon"'})," de"," ",e.jsx(s,{children:"client/index.html"})," portait donc le glyphe Polara dans l'onglet et les favoris de ",e.jsx(n,{children:"tous"})," les tenants."]}),e.jsxs(l,{children:[e.jsxs(r,{children:["tenant (n'importe lequel) avec un"," ",e.jsx(n,{children:"favicon explicite"})," (",e.jsx(s,{children:"brandingSettings.faviconUrl"}),", tÃ©lÃ©versÃ© dans le groupe IdentitÃ© du Studio) â ce favicon â il gagne"," ",e.jsx(n,{children:"mÃªme sur le tenant principal"})," ;"]}),e.jsxs(r,{children:["tenant principal (ou hÃ´te gÃ©nÃ©rique) sans favicon â les liens du markup sont ",e.jsx(n,{children:"laissÃ©s intacts"})," ;"]}),e.jsxs(r,{children:["tenant secondaire avec logo â ",e.jsx(s,{children:"href"})," rÃ©Ã©crit vers ce logo, l'attribut ",e.jsx(s,{children:"sizes"})," est retirÃ© (le tÃ©lÃ©versement est une image de taille arbitraire, un indice pÃ©rimÃ© ferait choisir la mauvaise) ;"]}),e.jsxs(r,{children:["tenant secondaire sans favicon ni logo â la marque"," ",e.jsx(n,{children:"ChargeOps"})," neutre."]})]}),e.jsxs(i,{children:[e.jsx(n,{children:"Plomberie du favicon explicite."})," Le champ optionnel"," ",e.jsx(s,{children:"brandingSettings.faviconUrl"})," s'Ã©crit via"," ",e.jsx(s,{children:"convex/platform/mutations.ts::updateTenantBranding"})," ","(platform-admin, comme tout le branding) et remonte par deux chemins : la liste blanche d'identitÃ© visuelle de"," ",e.jsx(s,{children:"convex/public/branding.ts::getTenantBySlug"})," avant login (type ",e.jsx(s,{children:"HostTenant"})," de ",e.jsx(s,{children:"use-tenant-host.tsx"})," â l'onglet de la page de connexion est donc dÃ©jÃ  brandÃ©) et"," ",e.jsx(s,{children:"system/queries.ts::getBrandingSettings"})," aprÃ¨s login ;"," ",e.jsx(s,{children:"useBranding()"})," expose ",e.jsx(s,{children:"faviconUrl"})," depuis l'une ou l'autre source. CÃ´tÃ© Studio, l'emplacement Â«Â Favicon (onglet du navigateur)Â Â» siÃ¨ge Ã  cÃ´tÃ© du logo du locataire (mÃªme ",e.jsx(s,{children:"LogoSlot"})," glisser-dÃ©poser, image carrÃ©e 32Ã32 px ou plus recommandÃ©e) et l'aperÃ§u en direct (",e.jsx(s,{children:"branding-studio-preview.tsx"}),") rend un mini-onglet de navigateur au-dessus de la miniature (",e.jsx(s,{children:'data-testid="preview-browser-tab"'})," /"," ",e.jsx(s,{children:"preview-favicon"}),") montrant le favicon rÃ©solu et le nom du tenant."]}),e.jsx(i,{children:"L'effet mÃ©morise les valeurs d'origine et les restaure au cleanup â un changement de tenant ou un tÃ©lÃ©versement de logo dans la mÃªme session SPA ne laisse pas d'icÃ´ne pÃ©rimÃ©e."}),e.jsxs(d,{tone:"warning",title:"Limite connue : apple-touch-icon et manifeste",children:["L'",e.jsx(s,{children:"apple-touch-icon"})," et les icÃ´nes du"," ",e.jsx(s,{children:"manifest.json"})," sont lus dans le HTML servi"," ",e.jsx(n,{children:"au moment de l'installation"})," et ne peuvent pas Ãªtre remplacÃ©s aprÃ¨s le premier rendu : ils restent sur l'asset statique, mÃªme quand un favicon explicite est tÃ©lÃ©versÃ©. Un raccourci d'Ã©cran d'accueil garde donc l'icÃ´ne de la plateforme."]}),e.jsxs(i,{children:[e.jsx(n,{children:"MÃ©tadonnÃ©es statiques."})," Comme un seul build est servi Ã  tous les tenants, les chaÃ®nes qui nommaient Â«Â Polara ChargeOpsÂ Â» sont devenues Â«Â ChargeOpsÂ Â» :"," ",e.jsx(s,{children:"og:site_name"}),", ",e.jsx(s,{children:"og:title"})," et"," ",e.jsx(s,{children:"twitter:title"})," dans ",e.jsx(s,{children:"client/index.html"}),", et"," ",e.jsx(s,{children:"name"})," dans ",e.jsx(s,{children:"client/public/manifest.json"})," (",e.jsx(s,{children:"short_name"})," valait dÃ©jÃ  ",e.jsx(s,{children:"ChargeOps"}),")."]})]}),e.jsx(t,{id:"footer-attribution",title:"26c. Attribution du pied de page",children:e.jsxs(i,{children:[e.jsx(s,{children:"client/src/components/ui/footer.tsx"})," imprimait"," ",e.jsxs(s,{children:["Â© ","{annÃ©e}"," Polara / Orbite Tech"]})," avec les liens vers"," ",e.jsx(s,{children:"polara.energy"})," et ",e.jsx(s,{children:"orbitetech.ca"})," sur"," ",e.jsx(n,{children:"tous"})," les tenants. Le bloc est dÃ©sormais conditionnÃ© Ã  ",e.jsx(s,{children:"useBranding().isMainTenant"})," ; un tenant secondaire est crÃ©ditÃ© par ",e.jsx(s,{children:"tenantName"})," (texte simple, sans lien). Le glyphe du pied de page, lui, suit la chaÃ®ne"," ",e.jsx(s,{children:"brand-glyph.ts"})," comme les autres loaders."]})}),e.jsxs(t,{id:"operator-name",title:"26d. Vocabulaire d'exploitant â useBranding().operatorName",children:[e.jsxs(i,{children:["Certaines chaÃ®nes ne dÃ©crivent pas une ",e.jsx(n,{children:"marque affichÃ©e"})," ","mais l'",e.jsx(n,{children:"exploitant nommÃ©"})," dans une phrase mÃ©tier :"," ",e.jsx(s,{children:"soldByPolara"}),", ",e.jsx(s,{children:"notSoldByPolara"}),","," ",e.jsx(s,{children:"thirdPartyChargerDesc"}),", ",e.jsx(s,{children:"noWarrantyNeeded"}),","," ",e.jsx(s,{children:"polara"}),"/",e.jsx(s,{children:"nonPolara"}),","," ",e.jsx(s,{children:"polaraSourcedPercent"}),","," ",e.jsx(s,{children:"carbonCreditPolaraManaged"}),"/",e.jsx(s,{children:"carbonCreditPolaraDescription"}),","," ",e.jsx(s,{children:"pdfSectionCarbonCredit"}),","," ",e.jsx(s,{children:"polaraTechnicians"}),","," ",e.jsx(s,{children:"polaraCustomerLocations"}),". Elles Ã©crivaient Â«Â PolaraÂ Â» en dur, y compris pour le personnel des autres tenants."]}),e.jsxs(i,{children:["Les traductions FR et EN prennent maintenant un paramÃ¨tre"," ",e.jsx(s,{children:"{brand}"}),", interpolÃ© avec"," ",e.jsx(s,{children:"useBranding().operatorName"})," :"]}),e.jsx(c,{language:"ts",children:`operatorName: isMainTenant
34  ? "Polara"
35  : (user?.tenantName ?? hostTenantName ?? "ChargeOps"),`}),e.jsxs(i,{children:["Les clÃ©s d'Ã©numÃ©ration et les ",e.jsx(n,{children:"valeurs stockÃ©es"})," ne bougent pas (",e.jsx(s,{children:"soldByPolara"})," reste le nom du champ et de la colonne d'export) â mÃªme contrat que les libellÃ©s CHRGPK/CTRLBX. Surfaces migrÃ©es : ",e.jsx(s,{children:"operations-dashboard.tsx"}),","," ",e.jsx(s,{children:"operations/brand-model-table.tsx"})," +"," ",e.jsx(s,{children:"lib/export-brand-model-excel.ts"}),","," ",e.jsx(s,{children:"operations/carbon-credit-panel.tsx"}),","," ",e.jsx(s,{children:"operations/export-pdf-dialog.tsx"}),","," ",e.jsx(s,{children:"add-charger-form.tsx"}),","," ",e.jsx(s,{children:"charger-management/charger-edit-dialog.tsx"}),","," ",e.jsx(s,{children:"charger-management.tsx"}),","," ",e.jsx(s,{children:"column-configurator.tsx"})," et"," ",e.jsx(s,{children:"pages/configuration.tsx"}),"."]}),e.jsxs(i,{children:["Au passage, deux libellÃ©s du Studio nomment ce qu'ils dÃ©signent rÃ©ellement : Â«Â Polara AnimationÂ Â» devient Â«Â Animation de l'espace (dÃ©faut)Â Â» et Â«Â Polara Logo (Default)Â Â» devient Â«Â Logo de l'espace (dÃ©faut)Â Â» â la"," ",e.jsx(n,{children:"valeur stockÃ©e"})," reste ",e.jsx(s,{children:'"polara"'}),". Le titre de l'export ClÃ©o passe de Â«Â Polara ChargeOps Â·Â Â» Ã  Â«Â ChargeOps Â·Â Â»."]})]}),e.jsxs(t,{id:"chrgpk-label",title:"27. Labels CHRGPK et CTRLBX personnalisables",children:[e.jsxs(i,{children:["Champs : ",e.jsx(s,{children:"brandingSettings.chrgpkLabel"})," (dÃ©faut"," ",e.jsx(s,{children:'"CHRGPK"'}),") et ",e.jsx(s,{children:"brandingSettings.ctrlbxLabel"})," ","(dÃ©faut ",e.jsx(s,{children:'"CTRLBX"'}),"), Ã©ditÃ©s dans le groupe Â« Terminologie Â» du Studio avec exemples en contexte."]}),e.jsxs(i,{children:["Depuis Branding v2, ces libellÃ©s renomment"," ",e.jsx(n,{children:"rÃ©ellement"})," les termes dans toute l'application : JSX codÃ© en dur remplacÃ© par ",e.jsx(s,{children:"useBranding().chrgpkLabel"}),"/",e.jsx(s,{children:"ctrlbxLabel"}),", chaÃ®nes de traduction interpolÃ©es (",e.jsx(s,{children:"{chrgpkLabel}"}),"), badges de connectivitÃ© (map valeurâlibellÃ©), en-tÃªtes CSV, page Modems, dialogues et PDF de rapports. Les ",e.jsx(n,{children:"valeurs brutes"})," ne changent jamais : noms de tables, ",e.jsx(s,{children:"appliesTo"}),", valeurs de connectivitÃ©"," ",e.jsx(s,{children:"ctrlbx"}),", valeurs CSV, sentinelles"," ",e.jsx(s,{children:"__chrgpk__"}),"/",e.jsx(s,{children:"no-chrgpk"}),", noms de champs."]})]}),e.jsxs(t,{id:"header-buttons",title:"28. Boutons d'en-tÃªte configurables",children:[e.jsxs(i,{children:["Deux boutons (",e.jsx(s,{children:"headerButton1"})," et"," ",e.jsx(s,{children:"headerButton2"}),") dans l'en-tÃªte de l'accueil (",e.jsx(s,{children:"home.tsx"}),"), configurables via le groupe Â« Actions d'en-tÃªte Â» du Studio :"]}),e.jsx(u,{headers:["Champ","DÃ©faut","Usage"],rows:[[e.jsx(s,{children:"headerButton1Enabled"}),e.jsx(s,{children:"undefined"}),"undefined = activÃ© ; false masque le bouton"],[e.jsx(s,{children:"headerButton1Text"}),e.jsx(s,{children:'"Cleo"'}),"Lien rapide vers le portail Cleo (le texte par dÃ©faut rend le pictogramme ClÃ©o hÃ©ritÃ©)"],[e.jsx(s,{children:"headerButton1Url"}),"â","URL externe"],[e.jsx(s,{children:"headerButton1LogoUrl"}),"â","Logo personnalisÃ© affichÃ© Ã  la place du texte"],[e.jsx(s,{children:"headerButton2Enabled"}),e.jsx(s,{children:"undefined"}),"undefined = activÃ© ; false masque le bouton"],[e.jsx(s,{children:"headerButton2Text"}),e.jsx(s,{children:'"Back Office Cleo"'}),"Back-office Cleo"],[e.jsx(s,{children:"headerButton2Url"}),"â","URL externe"]]}),e.jsxs(i,{children:["Rendu : la visibilitÃ© passe par"," ",e.jsx(s,{children:"lib/branding-labels.ts::shouldShowHeaderButton"}),", qui exige ",e.jsx(s,{children:"enabled"})," ",e.jsx(n,{children:"et"})," un texte"," ",e.jsx(n,{children:"et"})," une URL â un tenant qui activait l'interrupteur en laissant l'URL vide obtenait un bouton silencieusement absent ; le Studio affiche dÃ©sormais un indice en ligne dans ce cas (le prÃ©dicat, lui, est inchangÃ©), et ra

35ppelle que les deux boutons ne vivent que dans l'en-tÃªte de ",e.jsx(s,{children:"home.tsx"}),". PrioritÃ© du bouton 1 : logo personnalisÃ© â pictogramme ClÃ©o hÃ©ritÃ© (texte par dÃ©faut Â« Cleo Â») â texte. Le bouton"," ",e.jsx(n,{children:"DocsForge"})," voisin est rÃ©servÃ© au locataire principal (",e.jsx(s,{children:"user.isMainTenant"}),")."]}),e.jsxs(i,{children:["Audience de ",e.jsx(s,{children:"headerButton2"})," (Â« Back Office ClÃ©o Â») : sur le tenant principal (Polara), rÃ©servÃ© aux rÃ´les ",e.jsx(s,{children:"admin"}),","," ",e.jsx(s,{children:"technician"})," et aux super-admins de la plateforme"," ","(",e.jsx(s,{children:'platformRole === "platform-admin"'}),") ; sur les autres tenants, visible pour tous sauf ",e.jsx(s,{children:"site-operator"}),". La rÃ¨gle (indÃ©pendante du toggle d'activation par tenant) vit dans"," ",e.jsx(s,{children:"client/src/lib/back-office-cleo-visibility.ts"})," et s'appuie sur ",e.jsx(s,{children:"me.isMainTenant"}),"."]})]}),e.jsxs(t,{id:"config-email",title:"29. Configuration email",children:[e.jsx(i,{children:'Card "Email Settings" â quatre providers :'}),e.jsx(u,{headers:["Provider","Champs requis","Note"],rows:[[e.jsx(n,{children:"Gmail"}),e.jsxs(e.Fragment,{children:[e.jsx(s,{children:"smtpUser"})," (email Gmail), ",e.jsx(s,{children:"smtpPassword"})," ","(App Password)"]}),"NÃ©cessite un mot de passe d'application Google (2FA)."],[e.jsx(n,{children:"Outlook"}),e.jsxs(e.Fragment,{children:[e.jsx(s,{children:"smtpUser"}),", ",e.jsx(s,{children:"smtpPassword"})]}),"Mot de passe rÃ©gulier."],[e.jsx(n,{children:"SMTP"}),e.jsxs(e.Fragment,{children:[e.jsx(s,{children:"smtpHost"}),", ",e.jsx(s,{children:"smtpPort"}),","," ",e.jsx(s,{children:"smtpSecure"})," (switch), ",e.jsx(s,{children:"smtpUser"}),","," ",e.jsx(s,{children:"smtpPassword"})]}),"Provider gÃ©nÃ©rique."],[e.jsx(n,{children:"SendGrid"}),e.jsxs(e.Fragment,{children:[e.jsx(s,{children:"smtpPassword"})," (API Key, format"," ",e.jsx(s,{children:"SG.xxxxxâ¦"}),")"]}),"Pas de username."]]}),e.jsxs(i,{children:["Tous : ",e.jsx(s,{children:"emailFrom"})," (adresse expÃ©ditrice)."]}),e.jsxs(i,{children:[`La carte "Current Active Email Configuration" (sous l'en-tÃªte) affiche le provider actuellement utilisÃ© et sa source (`,e.jsx(s,{children:"database"})," vs ",e.jsx(s,{children:"environment"}),") â les variables d'environnement sont Ã©crasÃ©es par les valeurs DB si prÃ©sentes."]}),e.jsx(i,{children:"Schema Convex (extrait) :"}),e.jsx(c,{language:"ts",children:`brandingSettings: {
36  emailProvider: v.optional(v.string()),
37  smtpHost, smtpPort, smtpSecure, smtpUser, smtpPassword,
38  emailFrom: v.optional(v.string()),
39  // â¦
40}`}),e.jsxs(i,{children:[e.jsx(n,{children:"Envoi d'un courriel de test."})," ",e.jsx(s,{children:"platform/actions.ts::sendTestEmail"})," rend un courriel de marque avec la config SMTP et les logos rÃ©solus du"," ",e.jsx(n,{children:"tenant ciblÃ©"})," et l'expÃ©die Ã  l'appelant â la vÃ©rification en un clic de l'adresse d'expÃ©diteur, des identifiants SMTP et des logos, sans attendre un vrai Ã©vÃ©nement. Tests :"," ",e.jsx(s,{children:"convex/platform/__tests__/smtpTestSend.test.ts"}),"."]})]}),e.jsxs(t,{id:"email-brand",title:"29a. Marque de l'en-tÃªte des courriels",children:[e.jsxs(i,{children:[e.jsx(s,{children:"convex/lib/emailLayout.ts::wrapInBrandedLayout"})," accepte un paramÃ¨tre optionnel ",e.jsx(s,{children:"brand"})," de type"," ",e.jsx(s,{children:"EmailBrand = { isMainTenant: boolean; logoUrl: string | null }"}),". L'en-tÃªte marine a deux emplacements : Ã  gauche la marque de l'expÃ©diteur, Ã  droite la marque ChargeOps de la plateforme (inchangÃ©e). L'emplacement de gauche suit la rÃ¨gle habituelle â marque Polara intÃ©grÃ©e si ",e.jsx(s,{children:"isMainTenant"}),", sinon le"," ",e.jsx(s,{children:"logoUrl"})," du tenant, et la cellule"," ",e.jsx(n,{children:"omise"})," (",e.jsx(s,{children:"&nbsp;"}),") quand il n'y en a pas. ",e.jsx(s,{children:"brand"})," absent â comportement historique (tenant principal), donc aucun appelant non migrÃ© ne casse."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Dimensionnement des logos : une seule dimension."})," ","Les deux emplacements passent par"," ",e.jsx(s,{children:"headerLogoImg()"}),", qui n'Ã©crit que la"," ",e.jsx(n,{children:"hauteur"})," (22Â px), Ã  la fois en attribut HTML"," ",e.jsx(s,{children:"height"})," â pour le moteur Word d'Outlook, qui ignore le CSS â et en style inline, avec"," ",e.jsx(s,{children:"width: auto"})," et un garde-fou"," ",e.jsx(s,{children:"max-width: 200px"}),". Le balisage figeait auparavant"," ",e.jsx(s,{children:'width="103" height="22"'})," sur l'emplacement ChargeOps : tout logo tÃ©lÃ©versÃ© Ã©tait comprimÃ© dans le ratio 4,67:1 de l'image intÃ©grÃ©e et partait"," ",e.jsx(n,{children:"dÃ©formÃ©"})," dans la boÃ®te de rÃ©ception. La rÃ¨gle est donc : ne jamais contraindre les deux dimensions Ã  la fois â pas d'attribut ",e.jsx(s,{children:"width"}),", pas de ",e.jsx(s,{children:"width"})," en pixels. Le ",e.jsx(s,{children:"src"})," et l'",e.jsx(s,{children:"alt"})," passent par"," ",e.jsx(s,{children:"escapeHtml"}),", une URL de logo ne pouvant plus sortir de son attribut. Invariant verrouillÃ© par"," ",e.jsx(s,{children:"convex/lib/__tests__/emailLayout.test.ts"}),"."]}),e.jsxs(i,{children:["La rÃ©solution vit dans"," ",e.jsx(s,{children:"convex/lib/emailBranding.ts::resolveEmailBrand"})," ","(",e.jsx(s,{children:"polaraLogoDarkUrl"})," â"," ",e.jsx(s,{children:"polaraLogoUrl"})," â ",e.jsx(s,{children:"companyLogoUrl"})," ; la variante sombre gagne, l'en-tÃªte Ã©tant toujours sur fond marine) et est exposÃ©e aux actions par la ",e.jsx(s,{children:"internalQuery"})," ",e.jsx(s,{children:"internal.system.internalQueries.getEmailBrand"})," â un"," ",e.jsx(s,{children:"tenantId"})," absent ou introuvable retombe sur"," ",e.jsx(s,{children:"MAIN_TENANT_EMAIL_BRAND"}),". CÃ¢blÃ©e dans les courriels de rÃ©initialisation de mot de passe, de bienvenue (",e.jsx(s,{children:"convex/actions/email.ts"}),") et les trois alertes de conformitÃ© (",e.jsx(s,{children:"convex/compliance/alerts.ts"}),"). La chaÃ®ne de pied de courriel ne dit plus Â«Â Polara ChargeOpsÂ Â» mais Â«Â ChargeOpsÂ Â» (FR et EN)."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Courriels de notification d'Ã©vÃ©nement."}

40)," ",e.jsx(s,{children:"emailNotificationSettings"})," porte dÃ©sormais un"," ",e.jsx(s,{children:"tenantId"})," optionnel : chaque locataire route"," ",e.jsx(n,{children:"ses propres"})," destinataires et objets via"," ",e.jsx(s,{children:"convex/notifications/settings.ts"})," (",e.jsx(s,{children:"getForTenant"})," / ",e.jsx(s,{children:"updateForTenant"}),","," ",e.jsx(s,{children:"tenantMutation"}),") â ",e.jsx(n,{children:"seul Ã©diteur"})," depuis la fusion des deux systÃ¨mes de notifications par courriel. La ligne"," ",e.jsx(n,{children:"globale"})," historique (",e.jsx(s,{children:"tenantId"})," absent) n'a plus d'Ã©diteur : elle ne sert qu'Ã  amorcer la premiÃ¨re ligne d'un locataire (forme et langue, jamais les destinataires). Le registre ",e.jsx(s,{children:"EVENT_KEYS"})," (",e.jsx(s,{children:"shared/notification-events.ts"}),", rÃ©-exportÃ© par"," ",e.jsx(s,{children:"convex/notifications/templates.ts"}),") gagne"," ",e.jsx(s,{children:"ticket_created"}),", ",e.jsx(s,{children:"ticket_status_changed"})," ","et ",e.jsx(s,{children:"sla_breached"}),". ",e.jsx(s,{children:"dispatchEventNotification"})," ","reÃ§oit le ",e.jsx(s,{children:"tenantId"})," de l'appelant (",e.jsx(s,{children:"ctx.tenantId"}),"), rÃ©sout la config du tenant puis retombe sur la globale, et c'est cette marque-lÃ  qui part dans l'en-tÃªte."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Corps des courriels d'Ã©vÃ©nement."})," Les six clÃ©s du registre ont chacune un gabarit dans"," ",e.jsx(s,{children:"convex/notifications/service.ts::buildEventHtml"}),". Les trois clÃ©s support (",e.jsx(s,{children:"ticket_created"}),","," ",e.jsx(s,{children:"ticket_status_changed"}),", ",e.jsx(s,{children:"sla_breached"}),") n'en avaient pas et tombaient sur un"," ",e.jsx(s,{children:'<pre>{JSON.stringify(tokens){"}"}</pre>'})," â un objet de tokens brut expÃ©diÃ© au service de soutien. La branche par dÃ©faut rend maintenant des lignes libellÃ©es issues de"," ",e.jsx(s,{children:"EVENT_TOKEN_DEFS"}),". Les blocs rÃ©utilisables vivent dans"," ",e.jsx(s,{children:"convex/lib/emailLayout.ts"})," : ",e.jsx(s,{children:"badge"})," (pastille colorÃ©e, tons via ",e.jsx(s,{children:"PRIORITY_TONES"})," /"," ",e.jsx(s,{children:"STATUS_TONES"}),"), ",e.jsx(s,{children:"highlightBlock"}),","," ",e.jsx(s,{children:"textBlock"})," (partagÃ© avec"," ",e.jsx(s,{children:"convex/tickets/actions.ts"}),"), ",e.jsx(s,{children:"transitionBlock"}),","," ",e.jsx(s,{children:"metaLine"}),", ",e.jsx(s,{children:"formatDateTime"})," et un"," ",e.jsx(s,{children:"infoBox"})," qui retire les lignes sans valeur. Les tokens"," ",e.jsx(s,{children:"description"}),", ",e.jsx(s,{children:"category"})," et"," ",e.jsx(s,{children:"chargerNames"})," ont Ã©tÃ© ajoutÃ©s Ã  ",e.jsx(s,{children:"ticket_created"})," ","(",e.jsx(s,{children:"description"})," + ",e.jsx(s,{children:"status"})," Ã "," ",e.jsx(s,{children:"sla_breached"}),", ",e.jsx(s,{children:"priority"})," Ã "," ",e.jsx(s,{children:"ticket_status_changed"}),")."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Langue."})," ",e.jsx(s,{children:"emailNotificationSettings"})," porte un champ ",e.jsx(s,{children:"language"})," optionnel (",e.jsx(s,{children:'"en"'})," |"," ",e.jsx(s,{children:'"fr"'}),") â ",e.jsx(s,{children:"fr"})," quand il est absent, langue premiÃ¨re du produit et celle des gabarits d'objet"," ",e.jsx(s,{children:"ticket_*"}),". Il est Ã©ditable dans l'Ã©diteur par locataire (le seul depuis la fusion) et supprime le cas Â«Â objet franÃ§ais, corps anglaisÂ Â» que produisait le ",e.jsx(s,{children:'getEmailStrings("en")'})," ","codÃ© en dur."]}),e.jsxs(d,{tone:"warning",title:"Sauvegardes planifiÃ©es : marque plateforme, pas absence de marque",children:["Les courriels de ",e.jsx(n,{children:"sauvegarde planifiÃ©e"})," restent sur la marque plateforme â ",e.jsx(s,{children:"backupSchedules"})," est une table de niveau plateforme (inter-tenants), sans tenant destinataire Ã  rÃ©soudre. Mais Â« pas de tenant Â» ne veut pas dire Â« pas de"," ",e.jsx(s,{children:"brand"})," Â» : n'en passer aucun faisait retomber l'emplacement droit sur l'asset intÃ©grÃ©"," ",e.jsx(s,{children:"chargeops-logo-white.png"}),", donc la marque ChargeOps tÃ©lÃ©versÃ©e au Studio ne partait jamais."," ",e.jsx(s,{children:"backupScheduler.ts"})," appelle maintenant"," ",e.jsx(s,{children:"getEmailBrand"})," ",e.jsx(n,{children:"sans"})," ",e.jsx(s,{children:"tenantId"})," : le singleton ",e.jsx(s,{children:"platformBranding"})," ","est lu avant toute rÃ©solution de locataire, donc l'emplacement droit est correct et l'emplacement gauche garde la marque Polara du tenant principal."]})]})]}),e.jsxs(o,{id:"partie-4",title:"Partie 4 â Configuration systÃ¨me",children:[e.jsxs(t,{id:"page-configuration",title:"30. Page Configuration",children:[e.jsxs(i,{children:["Fichier : ",e.jsx(s,{children:"client/src/pages/configuration.tsx"}),". Route :"," ",e.jsx(a,{children:"/configuration"}),". AccÃ¨s : tous les rÃ´les authentifiÃ©s pour les onglets catalogue (lecture seule pour les catalogues partagÃ©s â voir plus bas) ;"," ",e.jsx(s,{children:"admin"})," pour les onglets d'administration de tenant ; le personnel de la plateforme (",e.jsx(s,{children:"platform-admin"}),") pour l'onglet ",e.jsx(s,{children:"appearance"})," ","(bascule globale du design ClÃ©o)."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Onglets"})," (",e.jsx(s,{children:"useState<ActiveTab>"}),") :"]}),e.jsx(u,{headers:["Onglet","Contenu"],rows:[[e.jsx(s,{children:"chargerModels"}),"Marques + modÃ¨les de bornes"],[e.jsx(s,{children:"carriers"}),"Carriers SIM"],[e.jsx(s,{children:"usefulLinks"}),"Liens utiles"],[e.jsx(s,{children:"columns"}),"Configurateur de colonnes"],[e.jsx(s,{children:"notifications"}),"Notifications systÃ¨me globales"],[e.jsx(s,{children:"cleanup"}),"Outils de normalisation (admin)"],[e.jsx(s,{children:"warranty"}),"RÃ©glages de garantie"],[e.jsx(s,{children:"personnel"}

40),"Project managers, salespersons, technicians"],[e.jsx(s,{children:"organizations"}),"Organisations clientes"],[e.jsx(s,{children:"carbonCredits"}),"SociÃ©tÃ©s de crÃ©dits carbone"],[e.jsx(s,{children:"vehicleBrands"}),"Marques + modÃ¨les de vÃ©hicules"]]}),e.jsxs(i,{children:["Chaque onglet est CRUD complet (ajout, Ã©dition inline, suppression avec ",e.jsx(s,{children:"<AlertDialog>"})," de confirmation)."]})]}),e.jsxs(t,{id:"charger-brands",title:"31. Marques de bornes (chargerBrands)",children:[e.jsxs(i,{children:["SystÃ¨me ",e.jsx(n,{children:"ID-based"})," (Convex"," ",e.jsx(s,{children:'Id<"chargerBrands">'}),") â un changement de nom n'invalide plus les rÃ©fÃ©rences (contrairement Ã  un systÃ¨me name-based)."]}),e.jsx(i,{children:"Schema :"}),e.jsx(c,{language:"ts",children:`const chargerBrands = defineTable({
41  name: v.string(),
42  createdAt: v.number(),
43}).index("by_name", ["name"]);`}),e.jsxs(i,{children:["Queries : ",e.jsx(s,{children:"api.configuration.queries.getBrands"}),","," ",e.jsx(s,{children:"getBrandsWithModels"})," (jointure en mÃ©moire pour Ã©viter N+1).",e.jsx("br",{}),"Mutations : ",e.jsx(s,{children:"createBrand"}),", ",e.jsx(s,{children:"updateBrand"}),","," ",e.jsx(s,{children:"deleteBrand"})," (dans"," ",e.jsx(s,{children:"convex/configuration/mutations.ts"}),")."," ",e.jsx(s,{children:"deleteBrand"})," refuse une marque qui a encore des modÃ¨les (lus via ",e.jsx(s,{children:"chargerModels.by_brandId"}),", 101 lignes au plus) avec ",e.jsx(s,{children:"ConvexError"})," ",e.jsx(s,{children:"{ code: CATALOG_BRAND_HAS_MODELS, modelCount, message }"})," ","de ",e.jsx(s,{children:"shared/catalog-errors.ts"})," ; la page Configuration traduit le code en toast. Avant CHARGEOPS-407, elle supprimait la marque et laissait ses modÃ¨les orphelins : ils disparaissaient de"," ",e.jsx(s,{children:"getBrandsWithModels"})," alors que les Ã©critures par identifiant les acceptaient encore."]}),e.jsxs(i,{children:["UI : table avec drag-and-drop (",e.jsx(s,{children:"@dnd-kit/sortable"}),") pour rÃ©ordonner, Ã©dition inline (Input + boutons Save/Cancel), badge de comptage de modÃ¨les par marque."]})]}),e.jsxs(t,{id:"charger-models",title:"32. ModÃ¨les de bornes (chargerModels)",children:[e.jsxs(i,{children:["RÃ©fÃ©rencent ",e.jsx(s,{children:"brandId"})," (FK vers ",e.jsx(s,{children:"chargerBrands"}),"), avec valeurs par dÃ©faut hÃ©ritÃ©es :"]}),e.jsx(c,{language:"ts",children:`const chargerModels = defineTable({
44  brandId: v.id("chargerBrands"),
45  name: v.string(),
46  maxPower: v.string(),                    // numeric(8,2) en string pour prÃ©cision
47  connectorCount: v.number(),
48  chargerClass: v.optional(v.union(v.literal("ac"), v.literal("dc"))),
49  warrantyDuration: v.optional(v.number()),
50  createdAt: v.number(),
51}).index("by_brandId", ["brandId"]);`}),e.jsxs(i,{children:["Onglet UI : recherche (",e.jsx(s,{children:"modelSearchQuery"}),"), filtre par marque (",e.jsx(s,{children:"modelBrandFilter"}),"), tri par ",e.jsx(s,{children:"name"}),"/",e.jsx(s,{children:"brand"}),"/",e.jsx(s,{children:"maxPower"})," (asc/desc). CrÃ©ation par formulaire compact avec ",e.jsx(s,{children:"<Select>"})," de marques. Champ ",e.jsx(s,{children:"chargerClass"})," (",e.jsx(s,{children:"ac"})," | ",e.jsx(s,{children:"dc"}),") influence l'icÃ´ne d'affichage et les calculs de puissance."]}),e.jsxs(i,{children:[e.jsx(s,{children:"deleteModel"})," et ",e.jsx(s,{children:"deleteBrand"})," refusent une ligne qu'un locataire utilise encore (CHARGEOPS-439) : une borne (",e.jsx(s,{children:"chargers.by_modelId"})," / ",e.jsx(s,{children:"by_brandId"}),"), mÃªme supprimÃ©e â l'annulation d'un RMA et la restauration d'une sauvegarde ramÃ¨nent une borne, et son historique affiche toujours le modÃ¨le â ou, pour un modÃ¨le, une ligne"," ",e.jsx(s,{children:"extendedWarrantyDefaults"})," ","d'un locataire (",e.jsx(s,{children:"by_modelId"}),"). Ces trois index sont inter-locataires Ã  dessein et ne servent qu'Ã  ce test d'existence"," ",e.jsx(s,{children:".first()"})," sous ",e.jsx(s,{children:"platformMutation"}),". Le refus est ",e.jsx(s,{children:"{ code: CATALOG_IN_USE, usedBy, message }"})," et ne nomme ni locataire, ni borne, ni nombre."," ",e.jsx(s,{children:"parts.compatibleModelIds"})," n'est pas vÃ©rifiÃ© : un tableau ne s'indexe pas, et un identifiant mort disparaÃ®t au prochain enregistrement de la piÃ¨ce."]})]}),e.jsxs(t,{id:"sim-carriers",title:"33. Carriers SIM (simCarriers)",children:[e.jsx(c,{language:"ts",children:`const simCarriers = defineTable({
52  name: v.string(),
53  createdAt: v.number(),
54}).index("by_name", ["name"]);`}),e.jsxs(i,{children:["CRUD simple : input + bouton Add, table avec Ã©dition inline. UtilisÃ© partout oÃ¹ les bornes ont une SIM (table ",e.jsx(s,{children:"chargers"}),", RMA, Warehouse)."]}),e.jsxs(i,{children:["Queries : ",e.jsx(s,{children:"api.configuration.queries.getCarriers"}),". Hook :"," ",e.jsx(s,{children:"useCarriers()"})," dans ",e.jsx(s,{children:"use-bootstrap.tsx"}),"."]})]}),e.jsxs(t,{id:"useful-links",title:"34. Liens utiles (usefulLinks)",children:[e.jsx(i,{children:"Schema :"}),e.jsx(c,{language:"ts",children:`const usefulLinks = defineTable({
55  title: v.string(),
56  url: v.string(),
57  faviconUrl: v.optional(v.string()),
58  faviconSource: v.optional(v.string()),
59  displayOrder: v.number(),
60  isActive: v.boolean(),
61  createdAt: v.number(),
62  updatedAt: v.number(),
63}

63).index("by_displayOrder", ["displayOrder"]);`}),e.jsxs(l,{children:[e.jsxs(r,{children:["Edit inline avec champ de tri (",e.jsx(s,{children:"displayOrder"}),") ; switch"," ",e.jsx(s,{children:"isActive"}),"."]}),e.jsxs(r,{children:["AffichÃ©s dans"," ",e.jsx(s,{children:"client/src/components/useful-links-menu.tsx"})," (menu dÃ©roulant accessible depuis la barre nav)."]}),e.jsxs(r,{children:["Favicons rÃ©solus via"," ",e.jsx(s,{children:"client/src/components/ui/favicon-icon.tsx"})," (avec cache)."]}),e.jsxs(r,{children:["Table parallÃ¨le ",e.jsx(s,{children:"userCustomLinks"})," permet Ã  chaque utilisateur d'ajouter ses propres liens (clÃ© ",e.jsx(s,{children:"userId"}),", indexÃ©e par ",e.jsx(s,{children:"by_userId_displayOrder"}),")."]})]})]}),e.jsx(t,{id:"visibilite-colonnes",title:"35. VisibilitÃ© des colonnes",children:e.jsxs(i,{children:["Onglet ",e.jsx(s,{children:"columns"})," â utilise"," ",e.jsx(s,{children:"<ColumnConfigurator>"})," (cf. section 11). Les changements admin Ã©crivent dans"," ",e.jsx(s,{children:"columnConfigurations"})," avec ",e.jsx(s,{children:"isDefault: true"}),","," ",e.jsx(s,{children:"userId: undefined"}),"."]})}),e.jsxs(t,{id:"notifications-systeme",title:"36. Notifications systÃ¨me",children:[e.jsxs(i,{children:["BanniÃ¨re globale ",e.jsx(s,{children:"<SystemNotificationBanner>"})," ","(visible sur Home et autres pages racines). Schema :"]}),e.jsx(c,{language:"ts",children:`const systemNotifications = defineTable({
64  message: v.string(),
65  type: v.string(),     // "info" | "warning" | "success" | "error"
66  isActive: v.boolean(),
67  createdBy: v.optional(v.id("users")),
68  createdAt: v.number(),
69  updatedAt: v.number(),
70}).index("by_isActive", ["isActive"]);`}),e.jsxs(i,{children:["UI : ",e.jsx(s,{children:"<Textarea>"})," pour le message,"," ",e.jsx(s,{children:"<Select>"})," pour le type, switch"," ",e.jsx(s,{children:"isActive"}),". Halos colorÃ©s via"," ",e.jsxs(s,{children:[".notification-glow-","{blue,red,amber,emerald}"]}),". Table globale, partagÃ©e par tous les tenants â publiable uniquement par le personnel de la plateforme (",e.jsx(s,{children:"platform-admin"}),")."]})]}),e.jsxs(t,{id:"cleanup",title:"37. Outils de normalisation (admin)",children:[e.jsxs(i,{children:["Onglet ",e.jsx(s,{children:"cleanup"})," â exporte la liste des chargers avec adresses/noms Ã  normaliser (typos, doublons, casse). Apparait seulement si l'utilisateur est admin et active la requÃªte (",e.jsx(s,{children:'activeTab === "cleanup" ? {} : "skip"'})," pour Ã©conomiser le quota Convex)."]}),e.jsx(i,{children:"Outils :"}),e.jsxs(l,{children:[e.jsx(r,{children:"Export CSV des sites avec adresses suspectes."}),e.jsx(r,{children:"Suggestion de fusion de noms similaires (Levenshtein cÃ´tÃ© serveur)."}),e.jsx(r,{children:"RÃ©Ã©criture batch d'adresses (Google Geocoding)."})]})]}),e.jsxs(t,{id:"profile-menu",title:"38. Profile menu",children:[e.jsxs(i,{children:[e.jsx(s,{children:"client/src/components/profile-menu.tsx"})," â menu dÃ©roulant accessible via l'avatar dans le header desktop. Les liens sont regroupÃ©s par catÃ©gories via le composant"," ",e.jsx(s,{children:"MenuSection"})," : en-tÃªte en petites capitales avec point d'accent dÃ©gradÃ© et filet dÃ©gressif (",e.jsx(s,{children:"bg-gradient-to-r from-border to-transparent"}),"), puis grille ",e.jsx(s,{children:"grid-cols-1 sm:grid-cols-2"})," d'items. Chaque section apparaÃ®t avec un lÃ©ger stagger Framer Motion (",e.jsx(s,{children:"delay: 0.04 * index"}),"). Largeur du panneau :"," ",e.jsx(s,{children:"w-[min(30rem,calc(100vw-1rem))]"}),"."]}),e.jsxs(p,{children:[e.jsxs(r,{children:[e.jsx(n,{children:"Header utilisateur"})," â initiales + nom + email + chip de rÃ´le (violet/fuchsia si ",e.jsx(s,{children:"isPlatformAdmin"}),", ardoise sinon â basÃ© sur l'axe ",e.jsx(s,{children:"platformRole"}),", pas sur le rÃ´le tenant), carte ",e.jsx(s,{children:"bg-white/20 backdrop-blur-sm"}),"."]}),e.jsxs(r,{children:[e.jsx(n,{children:"OpÃ©rations"})," â Indicateurs opÃ©rationnels (visible Ã  tous les utilisateurs authentifiÃ©s ; les comptes cadrÃ©s par organisation voient des donnÃ©es filtrÃ©es), Chargers, Charging Sessions Viewer et Power Calculations Tool (conditionnel"," ",e.jsx(s,{children:"usePowerManagementEnabled()"}),")."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Clients et sites"})," (Â« Sites Â» pour un site-operator) â Customers/Sites, Customer Map, Contacts, Vehicles, et Organisations (affichÃ© si"," ",e.jsx(s,{children:"can.viewOrganizations"})," : tous les rÃ´les principaux sauf site-operator ; sans badge)."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Service et inventaire"})," â Maintenance Center, RMA, Service Reports, Support Cases (",e.jsx(s,{children:"/support"}),", ouvert Ã  tous les utilisateurs actifs), plus Warehouse Inventory et License Management (masquÃ©s pour les site-operators)."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Administration"})," â visible si"," ",e.jsx(s,{children:'user.role === "admin"'}),". Le chip ",e.jsx(s,{children:"ADMIN"})," est portÃ© par l'en-tÃªte de section (plus de badge rÃ©pÃ©tÃ© sur chaque item) : User Management, Analytics, Configuration (avec Cleo Link comme onglet Ã  l'intÃ©rieur â Branding y est aussi listÃ©, mais rÃ©servÃ© au personnel de la plateforme), et â seulement si ce mÃªme compte porte ",e.jsx(n,{children:"aussi"})," ","un ",e.jsx(s,{children:"platformRole"})," â Backup Manager."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Plateforme ChargeOps"})," â section distincte, visible si"," ",e.jsx(s,{children:"platformRole"})," est dÃ©fini (indÃ©pendamment du rÃ´le tenant). Chip"," ",e.jsx(s,{children:"SUPER"})," (violet, ",e.jsx(s,{children:"platform-admin"}),") ou"," ",e.jsx(s,{children:"SUPPORT"})," (",e.jsx(s,{children:"platform-support"}),"). Contient un unique lien vers la console plateforme (",e.jsx(a,{children:"/platform"}),")."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Compte"})," â Documentation et Change Password, qui ouvre le ",e.jsx(s,{children:"<ChangePasswordDialog>"})," partagÃ© (",e.jsx(s,{children:"client/src/components/change-password-dialog.tsx"})," â mÃªme composant rendu par le menu â° du tÃ©lÃ©phone (",e.jsx(s,{children:"shell/nav-menu.tsx"}),") et le menu profil du Portail opÃ©rateur, ",e.jsx(s,{children:"PortalProfileMenu"})," ","dans ",e.jsx(s,{children:"portal-layout.tsx"}),"). Logout reste hors catÃ©gorie, en rangÃ©e pleine largeur destructive sous un sÃ©parateur."]})]}),e.jsxs(i,{children:["Chaque item affiche une icÃ´ne ",e.jsx(n,{children:"monoline"})," (contour Lucide, ",e.jsxs(s,{children:["strokeWidth=","{1.75}"]}),", ",e.jsx(s,{children:"h-5 w-5"}),") dans une couleur d'accent unie personnalisÃ©e (",e.jsx(s,{children:'color="text-amber-500"'}),"), sans tuile de fond ni dÃ©gradÃ© ; les libellÃ©s sont tronquÃ©s (",e.jsx(s,{children:"truncate"})," +"," ",e.jsx(s,{children:"title"}),") pour tenir dans la grille Ã  deux colonnes."]}),e.jsxs(i,{children:["L'avatar a un halo bleu pulsant en boucle (",e.jsx(s,{children:"animate={{ boxShadow: [...] }}"}),") qui devient solide quand le menu est ouvert."]}),e.jsxs(i,{children:["Le menu utilise"," ",e.jsx(s,{children:"bg-white/95 dar

70k:bg-gray-900/95 backdrop-blur-2xl"})," ","(glassmorphism prononcÃ©) + ",e.jsx(s,{children:"nav-font"})," (DM Sans). Les en-tÃªtes de catÃ©gories viennent des clÃ©s imbriquÃ©es"," ",e.jsx(s,{children:"profileMenu.*"})," dans"," ",e.jsx(s,{children:"client/src/lib/translations.en.ts"})," /"," ",e.jsx(s,{children:"translations.fr.ts"}),"."]})]})]}),e.jsxs(o,{id:"partie-5",title:"Partie 5 â Internationalisation (i18n)",children:[e.jsxs(t,{id:"bilingue",title:"39. Bilingue FR / EN",children:[e.jsx(i,{children:"Toutes les pages, modales, toasts, validations Zod et tooltips sont disponibles en franÃ§ais et en anglais."}),e.jsxs(i,{children:[e.jsx(n,{children:"Switcher"})," :"]}),e.jsxs(l,{children:[e.jsxs(r,{children:["Desktop : ",e.jsx(s,{children:"<Select>"})," minuscule (",e.jsx(s,{children:"w-14 h-6"}),") dans le header (AppLayout)."]}),e.jsxs(r,{children:["Mobile : un sÃ©lecteur segmentÃ© ",e.jsx(s,{children:"FR"}),"/",e.jsx(s,{children:"EN"})," dans le pied du menu â° du tÃ©lÃ©phone."]})]})]}),e.jsxs(t,{id:"implementation-i18n",title:"40. ImplÃ©mentation",children:[e.jsx(i,{children:"Fichiers clÃ©s :"}),e.jsx(h,{rows:[{key:e.jsx(s,{children:"client/src/lib/translations.ts"}),value:e.jsxs(e.Fragment,{children:["Loader, types, fonction"," ",e.jsx(s,{children:"getTranslation(language, key, params)"}),"."]})},{key:e.jsx(s,{children:"client/src/lib/translations.en.ts"}),value:"Source de vÃ©ritÃ© â toutes les clÃ©s en anglais."},{key:e.jsx(s,{children:"client/src/lib/translations.fr.ts"}),value:e.jsxs(e.Fragment,{children:["Traductions franÃ§aises (chargÃ© en lazy via"," ",e.jsx(s,{children:'import("./translations.fr")'}),")."]})},{key:e.jsx(s,{children:"client/src/hooks/use-language.tsx"}),value:e.jsxs(e.Fragment,{children:["Provider, hook ",e.jsx(s,{children:"useLanguage()"}),", mutation Convex pour persister cÃ´tÃ© serveur. Expose ",e.jsx(s,{children:"isLoading"})," ","pendant le chargement du bundle FR et re-rend les consommateurs une fois le fichier chargÃ© â sans quoi les chaÃ®nes ",e.jsx(s,{children:"t()"})," resteraient en anglais jusqu'au prochain re-render."]})}]}),e.jsxs(i,{children:[e.jsx(n,{children:"Lazy loading du franÃ§ais"})," :"]}),e.jsx(c,{language:"ts",children:`let frCache: any = null;
71export async function loadFrench() {
72  if (!frCache) frCache = (await import("./translations.fr")).default;
73  return frCache;
74}
75export async function ensureLanguageLoaded(lang: string) {
76  if (lang === "fr" && translations.fr === translations.en) {
77    translations.fr = await loadFrench();
78  }
79}`}),e.jsx(i,{children:"L'utilisateur EN ne charge jamais le bundle FR, et vice-versa aprÃ¨s le premier switch."}),e.jsxs(i,{children:[e.jsx(n,{children:"Une langue n'est publiÃ©e qu'une fois chargÃ©e"})," (CHARGEOPS-225) :"," ",e.jsx(s,{children:"LanguageProvider"})," distingue la langue demandÃ©e de celle qu'il expose."," ",e.jsx(s,{children:"language"})," ne passe Ã  ",e.jsx(s,{children:'"fr"'})," qu'aprÃ¨s"," ",e.jsx(s,{children:'ensureLanguageLoaded("fr")'})," (",e.jsx(s,{children:"isLanguageLoaded"})," le dit sans attendre). Auparavant il changeait aussitÃ´t, ",e.jsx(s,{children:"getTranslation"})," renvoyait encore l'anglais, et tout ",e.jsx(s,{children:"useMemo(â¦, [language])"})," qui appelait"," ",e.jsx(s,{children:"t()"})," gardait ces libellÃ©s anglais : la lecture de la liste des rapports d'entretien restait en anglais aprÃ¨s un passage EN â FR. Un tel memo n'a donc pas besoin d'autre dÃ©pendance que ",e.jsx(s,{children:"language"}),"."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Usage dans un composant"})," :"]}),e.jsx(c,{language:"tsx",children:`const { language } = useLanguage();
80const t = (key: string, params?: Record<string, any>) =>
81  getTranslation(language, key, params);
82
83return <h1>{t("configuration.title")}</h1>;`}),e.jsxs(i,{children:[e.jsx(n,{children:"ClÃ©s imbriquÃ©es"})," : ",e.jsx(s,{children:"getTranslation"})," ","supporte la notation ",e.jsx(s,{children:"dot"})," (",e.jsx(s,{children:'"branding.companyLogo"'})," â"," ",e.jsx(s,{children:"translations[lang].branding.companyLogo"}),")."]}),e.jsxs(i,{children:[e.jsx(n,{children:"Interpolation"})," :"]}),e.jsx(c,{language:"ts",children:'t("welcome", { name: user.firstName });  // "Bonjour, {name}!" â "Bonjour, Pierre!"'}),e.jsxs(i,{children:[e.jsx(n,{children:"Fallback"})," : si la clÃ© n'existe pas en franÃ§ais, retombe sur l'anglais ; si elle n'existe ni l'une ni l'autre, retourne la clÃ© brute."]})]}),e.jsxs(t,{id:"coherence-cles",title:"41. CohÃ©rence des clÃ©s",children:[e.jsxs(i,{children:["Le projet a corrigÃ© plusieurs vagues de"," ",e.jsx(n,{children:"clÃ©s dupliquÃ©es"})," dans le passÃ© (deux entrÃ©es"," ",e.jsx(s,{children:'"profileLogout"'})," avec valeurs diffÃ©rentes, par exemple). Process actuel :"]}),e.jsxs(l,{children:[e.jsxs(r,{children:[e.jsx(s,{children:"translations.en.ts"})," est la"," ",e.jsx(n,{children:"source de vÃ©ritÃ©"})," (TypeScript en infÃ¨re les types)."]}),e.jsxs(r,{children:[e.jsx(s,{children:"translations.fr.ts"})," doit avoir la"," ",e.jsx(n,{children:"mÃªme structure"})," (typÃ©"," ",e.jsx(s,{children:"as EnTranslations"}),")."]}),e.jsx(r,{children:"Lors de l'ajout d'une clÃ©, la mettre dans EN d'abord puis FR. Une revue manuelle de PR vÃ©rifie l'alignement."}),e.jsx(r,{children:"Quand une clÃ© manque en FR, le fallback EN Ã©vite la rÃ©gression visuelle, mais le linter d'i18n peut signaler les manques (Ã  intÃ©grer en CI si non encore prÃ©sent)."})]})]}),e.jsx(t,{id:"persistance-langue",title:"42. Persistance du choix",children:e.jsxs(l,{children:[e.jsxs(r,{children:[e.jsx(n,{children:"localStorage"})," (clÃ© ",e.jsx(s,{children:"app.lang"}),", valeurs"," ",e.jsx(s,{children:'"en"'})," | ",e.jsx(s,{children:'"fr"'}),") â lecture au mount."]}),e.jsxs(r,{children:[e.jsx(n,{children:"CÃ´tÃ© serveur"})," (champ ",e.jsx(s,{children:"users.language"})," ","dans Convex) â synchronisÃ© via"," ",e.jsx(s,{children:"api.users.mutations.updateProfile"})," quand un utilisateur authentifiÃ© change la langue."]}),e.jsxs(r,{children:["Ã la prochaine connexion (depuis un autre device par ex.),"," ",e.jsx(s,{children:"useEffect(() => { if (user.language !== language) setLanguageState(user.language) }, [user.language])"})," ","rÃ©aligne la langue locale sur la prÃ©fÃ©rence serveur."]}),e.jsxs(r,{children:["L'attribut ",e.jsx(s,{children:'<html lang="â¦">'})," est mis Ã  jour Ã  chaque changement (accessibilitÃ©, SEO)."]})]})}),e.jsxs(t,{id:"couverture-i18n",title:"43. Couverture i18n",children:[e.jsx(i,{children:"Tout est traduit :"}),e.jsxs(l,{children:[e.jsxs(r,{children:[e.jsx(n,{children:"Pages"})," : toutes les pages de"," ",e.jsx(s,{children:"/client/src/pages/*"})," consomment"," ",e.jsx(s,{children:"getTranslation"}),"."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Composants UI partagÃ©s"})," : tooltips, placeholders, libellÃ©s de boutons."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Validations Zod"})," : messages d'erreur de formulaires."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Toasts"})," : titre + description."]}),e.jsxs(r,{children:[e.jsx(n,{children:"MÃ©triques analytics"})," : labels de pages traduits."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Branding"})," : labels personnalisables (",e.jsx(s,{children:"chrgpkLabel"}),", ",e.jsx(s,{children:"ctrlbxLabel"}),", header buttons texts) â ces valeurs ne sont pas traduites, elles s

83ont par tenant."]}),e.jsxs(r,{children:[e.jsx(n,{children:"PDF rapports de service et d'entretien"})," : la boÃ®te de dialogue d'export propose un sÃ©lecteur de langue (English / FranÃ§ais), prÃ©-rempli avec la langue courante de l'utilisateur ; le document gÃ©nÃ©rÃ© (moteur partagÃ© ",e.jsx(s,{children:"branded-report-pdf.ts"}),") suit la langue choisie."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Emails sortants"})," : gÃ©nÃ©rÃ©s serveur-side selon la langue prÃ©fÃ©rÃ©e du destinataire (",e.jsx(s,{children:"users.language"}),")."]})]})]})]}),e.jsx(o,{id:"partie-6",title:"Partie 6 â Analytics frontend",children:e.jsxs(t,{id:"amplitude",title:"44. Amplitude â initialisation diffÃ©rÃ©e",children:[e.jsxs(d,{tone:"info",title:"Note",children:["La mention CLAUDE.md indique une init diffÃ©rÃ©e d'Amplitude dans"," ",e.jsx(s,{children:"main.tsx"}),", mais le repo actuel"," ",e.jsx(n,{children:"n'inclut plus de code Amplitude"})," (aucun import, aucun fichier rÃ©fÃ©rence). L'analytics actif est"," ",e.jsx(n,{children:"Convex-native"})," : tables"," ",e.jsx(s,{children:"userAnalyticsSessions"})," et ",e.jsx(s,{children:"pageViews"})," ","peuplÃ©es par le hook ",e.jsx(s,{children:"useAnalytics()"}),"."]}),e.jsxs(i,{children:["Hook actif : ",e.jsx(s,{children:"client/src/hooks/use-analytics.tsx"})," â instanciÃ© une seule fois via"," ",e.jsx(s,{children:"<AnalyticsTracker />"})," dans ",e.jsx(s,{children:"App.tsx"}),"."]}),e.jsxs(i,{children:[e.jsx(n,{children:"ÃvÃ¨nements trackÃ©s"})," :"]}),e.jsxs(l,{children:[e.jsxs(r,{children:[e.jsx(n,{children:"Sessions"})," : crÃ©ation (",e.jsx(s,{children:"createSession"}),"), heartbeat pÃ©riodique (",e.jsx(s,{children:"updateSession.lastActivity"}),")."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Page views"})," :"," ",e.jsxs(s,{children:["createPageView(","{ sessionId, pagePath, pageTitle, siteId? }",")"]})," ","Ã  chaque changement de route wouter ; ",e.jsx(s,{children:"updatePageView"})," ","Ã  la sortie pour calculer la durÃ©e et le"," ",e.jsx(s,{children:"pausedDuration"})," (durÃ©e passÃ©e onglet en arriÃ¨re-plan via ",e.jsx(s,{children:"Page Visibility API"}),")."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Beacon API"})," au ",e.jsx(s,{children:"unload"})," :"," ",e.jsx(s,{children:"useBeacon = true"})," permet d'envoyer le dernier event mÃªme si l'onglet se ferme."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Mapping URL â titre"})," : ",e.jsx(s,{children:"getPageTitle()"})," ",'retourne des titres lisibles ("Site Dashboard - Site 42", "Site Audit - Site 42", "Analytics", etc.).']}),e.jsxs(r,{children:["Pages consultables dans ",e.jsx(a,{children:"/analytics"})," (admin) et"," ",e.jsx(a,{children:"/analytics/user/:userId"})," (drill-down par utilisateur)."]})]}),e.jsxs(i,{children:["Si Amplitude doit Ãªtre (rÃ©)introduit, il s'attendrait Ã  Ãªtre init dans ",e.jsx(s,{children:"main.tsx"})," aprÃ¨s le ",e.jsx(s,{children:"createRoot(...)"})," ","initial, avec ",e.jsx(s,{children:"requestIdleCallback"})," pour ne pas bloquer le first paint :"]}),e.jsx(c,{language:"tsx",children:`// main.tsx (rÃ©fÃ©rence â non actif aujourd'hui)
84import { createRoot } from "react-dom/client";
85import App from "./App";
86import "./index.css";
87createRoot(document.getElementById("root")!).render(<App />);
88
89// Init diffÃ©rÃ©e â n'est PAS dans le code actuel
90if ("requestIdleCallback" in window) {
91  requestIdleCallback(() => {
92    import("@amplitude/analytics-browser").then(({ init }) => {
93      init(import.meta.env.VITE_AMPLITUDE_API_KEY);
94    });
95  });
96}`})]})}),e.jsxs(o,{id:"partie-7",title:"Partie 7 â Extension Chrome officielle (MV3)",children:[e.jsx(t,{id:"extension-architecture",title:"45. Architecture et build",children:e.jsxs(i,{children:["L'extension officielle Chrome (Manifest V3) vit dans"," ",e.jsx(s,{children:"extension/"})," : ",e.jsx(s,{children:"public/"})," (manifest, icÃ´nes, polices Indivisible auto-hÃ©bergÃ©es â copiÃ©s tels quels dans le build), ",e.jsx(s,{children:"src/lib/"})," (stockage rÃ©glages/jetons, i18n FR/EN, liens profonds, formatage), ",e.jsx(s,{children:"src/popup/"})," ","(application React â systÃ¨me de design ClÃ©o dans"," ",e.jsx(s,{children:"styles.css"})," : violet ",e.jsx(s,{children:"#3021C3"})," â cyan"," ",e.jsx(s,{children:"#5CC2FF"}),", en-tÃªte marine ",e.jsx(s,{children:"#00004B"}),") et"," ",e.jsx(s,{children:"src/background/"})," (service worker MV3). Build via"," ",e.jsx(s,{children:"npm run build:extension"})," (config"," ",e.jsx(s,{children:"vite.extension.config.ts"})," Ã  la racine du dÃ©pÃ´t : entrÃ©e popup + entrÃ©e service worker au nom stable"," ",e.jsx(s,{children:"background.js"}),"), sortie dans"," ",e.jsx(s,{children:"extension/dist/"}),", chargÃ©e non empaquetÃ©e via"," ",e.jsx(a,{children:"chrome://extensions"}),". Type-check sÃ©parÃ© :"," ",e.jsx(s,{children:"npm run check:extension"})," (",e.jsx(s,{children:"tsc -p extension/tsconfig.json"}),", strict, types"," ",e.jsx(s,{children:"@types/chrome"}),"). Permissions minimales :"," ",e.jsx(s,{children:"storage"}),", ",e.jsx(s,{children:"alarms"}),","," ",e.jsx(s,{children:"notifications"}),","," ",e.jsx(s,{children:"https://*.convex.cloud/*"})," â pas de content scripts, pas de requÃªtes tierces. Doc complÃ¨te :"," ",e.jsx(s,{children:"extension/README.md"}),"."]})}),e.jsx(t,{id:"extension-session",title:"46. Session partagÃ©e et rafraÃ®chissement du JWT",children:e.jsxs(i,{children:["La connexion utilise le ",e.jsx(n,{children:"mÃªme fournisseur Convex Auth mot de passe"}

96)," que l'application web (",e.jsx(s,{children:'flow: "signIn"'})," ","uniquement â l'extension ne crÃ©e pas de comptes). Les jetons vivent dans ",e.jsx(s,{children:"chrome.storage.local"}),", partagÃ©s entre le popup et le service worker ; le worker rafraÃ®chit le JWT par le flux refresh-token standard, sous un mutex"," ",e.jsx(n,{children:"Web Locks"})," contre les rafraÃ®chissements concurrents. Les sessions expirent aprÃ¨s 8 heures, comme dans l'app. Les liens profonds (",e.jsx(s,{children:"src/lib/deepLinks.ts"}),") reflÃ¨tent la rÃ¨gle de confinement de"," ",e.jsx(s,{children:"protected-route.tsx"})," : un compte exploitant de site (non-plateforme) est dirigÃ© vers ",e.jsx(a,{children:"/portal"}),"."]})}),e.jsx(t,{id:"extension-surface-serveur",title:"47. Surface serveur et temps rÃ©el",children:e.jsxs(i,{children:["Nouvelle surface dÃ©diÃ©e ",e.jsx(s,{children:"convex/extension/queries.ts"})," â trois lectures via ",e.jsx(s,{children:"tenantQuery"})," (RLS + pÃ©rimÃ¨tre organisationnel via ",e.jsx(s,{children:"lib/scope.ts"}),") :"," ",e.jsx(s,{children:"pulse"})," (statut vivant : compteur de non-lus dÃ©dupliquÃ© entre cloche et messagerie â les lignes de cloche de type message sont exclues et les conversations non lues rajoutÃ©es, un message = une unitÃ© de pastille â plus un petit fil pour composer les notifications de bureau), ",e.jsx(s,{children:"globalSearch"})," (bornes par nom OU numÃ©ro de sÃ©rie, sites, contacts, organisations â insensible aux accents, balayage bornÃ© en mÃ©moire comme"," ",e.jsx(s,{children:"searchReferences"}),") et ",e.jsx(s,{children:"getEntityCard"})," ","(fiche dÃ©taillÃ©e d'une entitÃ©). Le reste rÃ©utilise les fonctions existantes de l'app : ",e.jsx(s,{children:"notifications/inbox"})," ","(",e.jsx(s,{children:"getMine"}),", ",e.jsx(s,{children:"markRead"}),","," ",e.jsx(s,{children:"markAllRead"}),"), ",e.jsx(s,{children:"messages/*"})," (liste, fil paginÃ©, envoi, marquage lu), ",e.jsx(s,{children:"tickets/*"})," ","(",e.jsx(s,{children:"listCases"}),", ",e.jsx(s,{children:"settings.getEffective"}),","," ",e.jsx(s,{children:"mutations.create"})," â y compris la branche exploitant de site qui soumet pour rÃ©vision) et"," ",e.jsx(s,{children:"portal/queries.listMySubmissions"}),". Deux modes de consommation : le ",e.jsx(n,{children:"popup"})," s'abonne par le websocket Convex (mises Ã  jour en direct), le"," ",e.jsx(n,{children:"service worker"})," interroge ",e.jsx(s,{children:"pulse"})," en HTTP sur une alarme ",e.jsx(s,{children:"chrome.alarms"})," d'une minute (popup fermÃ©) pour tenir la pastille de l'icÃ´ne et lever les notifications de bureau â comportement dÃ©sactivable dans les rÃ©glages."]})}),e.jsxs(t,{id:"extension-packaging",title:"48. Empaquetage automatique et distribution in-app",children:[e.jsxs(i,{children:[e.jsx(s,{children:"scripts/package-extension.mjs"})," compile l'extension (",e.jsx(s,{children:"vite build -c vite.extension.config.ts"}),") puis Ã©crit deux artefacts dans ",e.jsx(s,{children:"client/public/downloads/"})," :"," ",e.jsx(s,{children:"chargeops-extension-<version>.zip"})," (le manifeste Ã  la ",e.jsx(n,{children:"racine"})," du zip, comme l'exige le Web Store) et"," ",e.jsx(s,{children:"extension-package.json"})," (",e.jsx(s,{children:"version"}),", ",e.jsx(s,{children:"filename"}),", ",e.jsx(s,{children:"bytes"}),","," ",e.jsx(s,{children:"fileCount"}),", ",e.jsx(s,{children:"builtAt"}),") que lit la carte de l'onglet Outils. L'Ã©criture du zip est faite par un mini-Ã©crivain PKZIP interne (deflate, horodatages figÃ©s â archive reproductible), sans dÃ©pendance supplÃ©mentaire."]}),e.jsxs(i,{children:["Le script est branchÃ© ",e.jsx(n,{children:"avant"})," ",e.jsx(s,{children:"vite build"})," ","dans ",e.jsx(s,{children:"npm run build"})," â Vite recopie ensuite"," ",e.jsx(s,{children:"client/public/"})," dans le bundle dÃ©ployÃ©, donc le tÃ©lÃ©chargement existe dans ",e.jsx(n,{children:"tout environnement dÃ©ployÃ©"})," sans Ã©tape manuelle. ",e.jsx(s,{children:"npm run deploy"})," et le ",e.jsx(s,{children:"buildCommand"})," de ",e.jsx(s,{children:"vercel.json"})," passent dÃ©sormais par ",e.jsx(s,{children:"npm run build"})," plutÃ´t que par"," ",e.jsx(s,{children:"vite build"}),". ExÃ©cution isolÃ©e :"," ",e.jsx(s,{children:"npm run package:extension"}),". Un Ã©chec d'empaquetage est",e.jsx(n,{children:" journalisÃ© puis avalÃ©"})," : l'extension est un compagnon optionnel, elle ne doit jamais faire tomber un dÃ©ploiement de l'application. Les artefacts s

96ont git-ignorÃ©s (",e.jsx(s,{children:"client/public/downloads/"}),","," ",e.jsx(s,{children:"extension/store/dist/"}),") â ils sont rÃ©gÃ©nÃ©rÃ©s Ã  chaque compilation."]}),e.jsxs(i,{children:["CÃ´tÃ© client, la carte â"," ",e.jsx(s,{children:"ChromeExtensionCleanup"})," dans"," ",e.jsx(s,{children:"configuration/sections/cleanup/chrome-extension.tsx"})," ","(onglet Outils / ",e.jsx(s,{children:"cleanup"}),", admin) â va chercher"," ",e.jsx(s,{children:"/downloads/extension-package.json"})," en"," ",e.jsx(s,{children:"fetch"})," ",e.jsx(s,{children:'cache: "no-store"'})," quand l'onglet devient actif. L'Ã©tat est ternaire â"," ",e.jsx(s,{children:"undefined"})," (en cours), objet (paquet disponible),"," ",e.jsx(s,{children:"null"})," (absent) â pour afficher un message explicite en"," ",e.jsx(s,{children:"vite dev"}),", oÃ¹ aucune compilation n'a eu lieu, au lieu d'un chargement infini."]})]}),e.jsxs(t,{id:"extension-web-store",title:"49. PrÃ©paration Chrome Web Store",children:[e.jsxs(i,{children:["ConformitÃ© du manifeste : ",e.jsx(s,{children:"description"})," ramenÃ©e sous la limite de ",e.jsx(n,{children:"132 caractÃ¨res"})," et clÃ©"," ",e.jsx(s,{children:"author"})," retirÃ©e â Chrome l'ignore depuis fÃ©vrier 2024 et elle provoque un rejet lorsqu'elle ne correspond pas au compte Ã©diteur."]}),e.jsxs(i,{children:["Le dossier ",e.jsx(s,{children:"extension/store/"})," regroupe l'outillage de publication : ",e.jsx(s,{children:"capture.mjs"})," rÃ©gÃ©nÃ¨re les captures",e.jsx(n,{children:" 1280 Ã 800"})," exigÃ©es par le store dans"," ",e.jsx(s,{children:"extension/store/screenshots/"}),", en rendant les"," ",e.jsx(n,{children:"vrais composants du popup"})," avec des donnÃ©es d'exemple (",e.jsx(s,{children:"fixtures.ts"}),", mocks Convex dans"," ",e.jsx(s,{children:"mocks/"}),") â le popup est capturÃ© Ã  son 400 Ã 600 rÃ©el puis compositÃ© sur le canevas du store. Chrome est pilotÃ© par le"," ",e.jsx(n,{children:"DevTools Protocol"})," plutÃ´t qu'en"," ",e.jsx(s,{children:"--screenshot"}),"/",e.jsx(s,{children:"--virtual-time-budget"})," : le temps virtuel avance les minuteries sans laisser le compositeur se stabiliser, ce qui capturait des transitions framer-motion Ã  moitiÃ© jouÃ©es. La sortie est dÃ©terministe (l'horloge du harnais est figÃ©e). ",e.jsx(s,{children:"PRIVACY.md"})," tient la politique de confidentialitÃ© (Ã  hÃ©berger Ã  une URL publique sans connexion â Google la rÃ©cupÃ¨re pendant la revue) et ",e.jsx(s,{children:"LISTING.md"})," la fiche de publication prÃªte Ã  coller, champ par champ."]})]})]}),e.jsxs(o,{id:"partie-8",title:"Partie 8 â Mode terrain hors ligne",children:[e.jsxs(i,{children:["Le mode terrain hors ligne (Ã©pique CHARGEOPS-25, conception dans"," ",e.jsx(s,{children:"docs/superpowers/specs/2026-09-19-offline-field-mode-design.md"}),") permet Ã  un technicien sans rÃ©seau d'ouvrir le formulaire de rapport de service et l'assistant de rapport d'entretien, de choisir un site et ses bornes, et de continuer Ã  Ã©crire. Le stockage sur l'appareil et la file d'envoi sont dans ",e.jsx(s,{children:"client/src/lib/offline/"}),". Cette partie dÃ©crit ce qui permet aux formulaires de ",e.jsx(n,{children:"se charger"})," hors ligne (CHARGEOPS-43) : le cache des fichiers, Â« PrÃ©parer pour le hors-ligne Â», l'instantanÃ© des donnÃ©es de rÃ©fÃ©rence et la derniÃ¨re identitÃ© connue, puis (CHARGEOPS-44) ce qui garde le travail en file visible et jamais Ã©crasÃ© en silence."]}),e.jsxs(t,{id:"offline-asset-cache",title:"50. Cache des fichiers dans le service worker",children:[e.jsxs(l,{children:[e.jsxs(r,{children:[e.jsx(s,{children:"client/public/sw.js"})," garde son estampille"," ",e.jsx(s,{children:"BUILD_ID"}),", sa vÃ©rification de mise Ã  jour et son disjoncteur de rechargement. Il ajoute un second cache,"," ",e.jsx(s,{children:"polara-chargeops-assets-<BUILD_ID>"}),", en"," ",e.jsx(n,{children:"cache d'abord"})," pour ",e.jsx(s,{children:"/assets/*"}),". Les noms de fichiers hachÃ©s sont immuables : une copie stockÃ©e est toujours la bonne pour son URL."]}),e.jsxs(r,{children:["Seule une rÃ©ponse au statut ",e.jsx(n,{children:"exactement 200"}),", de type JS, CSS, police, image ou wasm, est stockÃ©e. Un corps HTML sous une URL de fichier (la rÃ©Ã©criture SPA de Vercel qui rÃ©pond Ã  un 404 en plein dÃ©ploiement) n'est ",e.jsx(n,{children:"jamais"})," stockÃ© : l'autorÃ©paration existante (nouvelle requÃªte avec ",e.jsx(s,{children:'cache: "reload"'}),") et la nouvelle tentative unique restent inchangÃ©es."]}),e.jsxs(r,{children:["Ã l'",e.jsx(s,{children:"activate"}),", tout cache qui n'est pas l'un des deux de ce build est supprimÃ© : un dÃ©ploiement purge les anciens fichiers. Sur un appareil qui a dÃ©jÃ  un cache de fichiers, l'",e.jsx(s,{children:"install"})," ","remplit d'abord le cache du nouveau build (les fichiers inchangÃ©s sont copiÃ©s depuis l'ancien ; l'installation n'Ã©choue jamais pour Ã§a). Un tÃ©lÃ©phone prÃ©parÃ© qui perd le rÃ©seau juste aprÃ¨s un dÃ©ploiement continue donc de fonctionner."]}),e.jsxs(r,{children:["La coquille servie hors ligne porte"," ",e.jsx(s,{children:"X-SW-Offline-Fallback: 1"})," : ",e.jsx(s,{children:"stale-chunk.ts::checkDeployment"})," ","rÃ©pond alors ",e.jsx(s,{children:'"unknown"'})," (de mÃªme quand"," ",e.jsx(s,{children:"navigator.onLine"})," vaut false). Un morceau en Ã©chec hors ligne ne recharge donc jamais la page."]}),e.jsxs(r,{children:["La CSP de ",e.jsx(s,{children:"vercel.json"}),", ",e.jsx(s,{children:"sw-register.js"})," et la logique de mise Ã  jour et de rechargement ne changent pas."]})]}),e.jsx(u,{headers:["Message (page â worker)","RÃ©ponse","Usage"],rows:[[e.jsx(s,{children:"PREPARE_OFFLINE"}),e.jsx(s,{children:"{ total, cached, failed }"}),"TÃ©lÃ©charge chaque fichier hors ligne estampillÃ© qui n'est pas encore en cache (4 Ã  la fois)"],[e.jsx(s,{children:"GET_OFFLINE_STATUS"}),e.jsx(s,{children:"{ total, cached, bytes, version }"}

96),"Page Mode terrain, prÃ©chargement en arriÃ¨re-plan"],[e.jsx(s,{children:"CLEAR_OFFLINE_ASSETS"}),e.jsx(s,{children:"OFFLINE_CLEARED"}),"Â« Effacer les donnÃ©es de l'appareil Â»"]]}),e.jsxs(i,{children:["CÃ´tÃ© page, ",e.jsx(s,{children:"lib/offline/sw-client.ts"})," passe par un MessageChannel avec dÃ©lais d'expiration et renvoie ",e.jsx(s,{children:"null"})," ","quand aucun worker ne rÃ©pond (serveur de dev, navigateur non pris en charge)."]})]}),e.jsxs(t,{id:"offline-chunk-list",title:"51. Liste des morceaux des routes de rapport",children:[e.jsxs(i,{children:[e.jsx(s,{children:"stampServiceWorker()"})," dans ",e.jsx(s,{children:"vite.config.ts"})," ","Ã©crit ",e.jsx(s,{children:"OFFLINE_ASSETS"})," dans ",e.jsx(s,{children:"sw.js"})," Ã  la place de"," ",e.jsx(s,{children:"/* @offline-assets */ []"}),", Ã  cÃ´tÃ© de ",e.jsx(s,{children:"BUILD_ID"}),". La liste vient de ",e.jsx(s,{children:"scripts/sw-offline-assets.mjs"})," â"," ",e.jsx(s,{children:"collectOfflineAssets(bundle, OFFLINE_ROUTE_MATCHERS)"}),", qui lit le bundle Rollup (les mÃªmes donnÃ©es que le manifeste Vite, donc aucun fichier de manifeste n'est publiÃ©). Elle comprend :"]}),e.jsxs(l,{children:[e.jsx(r,{children:"le morceau d'entrÃ©e, ses imports statiques, leurs CSS et fichiers ;"}),e.jsxs(r,{children:["chaque module de route (",e.jsx(s,{children:"pages/service-report-form.tsx"}),","," ",e.jsx(s,{children:"pages/maintenance-reports/wizard.tsx"}),","," ",e.jsx(s,{children:"pages/charger-field-hub.tsx"}),", ",e.jsx(s,{children:"pages/field-mode.tsx"})," ","et ",e.jsx(s,{children:"pages/pending-sync.tsx"}),"), avec ses imports statiques"," ",e.jsx(n,{children:"et"})," dynamiques suivis de proche en proche (par exemple l'Ã©diteur de texte riche montÃ© Ã  la demande)."]})]}),e.jsx(i,{children:"Le parcours s'arrÃªte aux morceaux dÃ©jÃ  couverts par la coquille. Un morceau de route importe le morceau d'entrÃ©e, et suivre les imports dynamiques de l'entrÃ©e entraÃ®nerait toutes les pages : mesurÃ© Ã  475 fichiers et 14 Mo, contre environ 60 fichiers et 2,4 Mo de JS maintenant."}),e.jsxs(i,{children:["Une seconde liste, ",e.jsx(s,{children:"OFFLINE_SHELL_MATCHERS"}),", couvre ce qu'une application ouverte dÃ©jÃ  hors ligne charge d'abord :"," ",e.jsx(s,{children:"pages/home.tsx"})," et ",e.jsx(s,{children:"pages/my-day*.tsx"})," (URL de dÃ©marrage ",e.jsx(a,{children:"/"}),") et ",e.jsx(s,{children:"lib/translations.fr.ts"}),". On n'y suit que les imports statiques. Un morceau fusionnÃ© par Rollup n'a pas de faÃ§ade : il est reconnu par ses ",e.jsx(s,{children:"moduleIds"}),"."]})]}),e.jsx(t,{id:"offline-snapshot",title:"52. PrÃ©parer pour le hors-ligne et instantanÃ© des donnÃ©es de rÃ©fÃ©rence",children:e.jsxs(l,{children:[e.jsxs(r,{children:[e.jsx(n,{children:"PortÃ©e"})," : les sites Ã©pinglÃ©s sur cet appareil (25 au plus) et les 10 derniers ouverts. Un site compte comme ouvert quand sa page ",e.jsx(a,{children:"/sites/:siteId"})," est affichÃ©e ou quand il est choisi dans l'un des deux formulaires (",e.jsx(s,{children:"useRecordRecentSite"}),"). Les deux listes sont dans le magasin ",e.jsx(s,{children:"refdata"}),", avec la clÃ© ",e.jsx(s,{children:"tenantId:userId"}),"."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Lectures"})," (",e.jsx(s,{children:"lib/offline/snapshot.ts"})," â"," ",e.jsx(s,{children:"buildOfflineSnapshot"}),") : uniquement les requÃªtes existantes, limitÃ©es au tenant, que les formulaires utilisent,"," ",e.jsx(s,{children:"serviceReports.queries.getFormOptions"})," et"," ",e.jsx(s,{children:"maintenanceReports.queries.getFormOptions"})," (sans site puis par site), ",e.jsx(s,{children:"maintenanceReports.templates.list"})," et"," ",e.jsx(s,{children:"maintenanceReports.categories.list"}),". Un formulaire que l'utilisateur ne peut pas ouvrir est sautÃ©, et une lecture en Ã©chec est comptÃ©e sans perdre le reste. Pour la fiche terrain de la borne (",e.jsx(a,{children:"/chargers/:id/field"}),"), jusqu'Ã  150 bornes de ces sites reÃ§oivent aussi les lectures de la fiche : ",e.jsx(s,{children:"chargers.getById"}),","," ",e.jsx(s,{children:"sites.getById"}),", ",e.jsx(s,{children:"chargers.getFieldHubReports"}),", et"," ",e.jsx(s,{children:"tickets.getChargerCaseHistory"})," seulement si la fiche peut afficher les cas. Aucun changement serveur, aucune nouvelle requÃªte."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Stockage"})," : chaque rÃ©ponse est rangÃ©e sous"," ",e.jsx(s,{children:"q:<fonction>:<arguments stables>"})," (clÃ©s triÃ©es, valeurs undefined retirÃ©es) dans la forme que le formulaire lit. Les listes de sites s

96ont rÃ©duites aux sites de l'instantanÃ©, jamais tout le tenant, et les clÃ©s d'un instantanÃ© prÃ©cÃ©dent sont Ã©laguÃ©es. Le manifeste ",e.jsx(s,{children:"fieldMode:snapshot"})," garde l'Ã¢ge et les comptes. Au plus 4 lectures sont en cours Ã  la fois."]}),e.jsxs(r,{children:[e.jsx(n,{children:"DonnÃ©es personnelles sur l'appareil"})," : parce que les formulaires en ont besoin, les rÃ©ponses enregistrÃ©es incluent les utilisateurs assignables (noms et adresses courriel, pour le choix du technicien) et les contacts des sites de l'instantanÃ©. Elles restent sur l'appareil jusqu'Ã  la prochaine prÃ©paration ou jusqu'Ã  Â« Effacer les donnÃ©es de l'appareil Â». Il n'y a pas de chiffrement sur l'appareil en v1 ; on compte sur le verrouillage de l'appareil (voir la conception)."]}),e.jsxs(r,{children:[e.jsx(n,{children:"AprÃ¨s un dÃ©ploiement"})," : ",e.jsx(s,{children:"OfflineAssetsRewarm"})," ","(montÃ© une fois dans ",e.jsx(s,{children:"App.tsx"}),") recharge les fichiers de l'application en arriÃ¨re-plan sur un appareil dÃ©jÃ  prÃ©parÃ©. L'instantanÃ© de donnÃ©es garde son propre Ã¢ge."]})]})}),e.jsx(t,{id:"offline-use-offline-query",title:"53. useOfflineQuery",children:e.jsxs(i,{children:[e.jsx(s,{children:"useOfflineQuery(query, args)"})," renvoie"," ",e.jsx(s,{children:"{ data, stale, savedAt? }"}),". Il renvoie les donnÃ©es Convex en direct dÃ¨s qu'il y en a. Il ne lit l'instantanÃ© de la mÃªme fonction et des mÃªmes arguments, avec ",e.jsx(s,{children:"stale: true"}),", que si l'appareil est ",e.jsx(n,{children:"confirmÃ© hors ligne"})," ","(",e.jsx(s,{children:"confirmedOffline"})," du runtime, voir Â§56) et qu'il n'y a pas de donnÃ©es en direct. ConfirmÃ© hors ligne veut dire que le navigateur dit hors ligne, ou que la connexion est coupÃ©e depuis plus de 3 s aprÃ¨s sa derniÃ¨re coupure. Le runtime dit hors ligne Ã  chaque dÃ©marrage tant que le socket n'est pas connectÃ© : sans ce dÃ©lai, chaque chargement normal afficherait de vieilles donnÃ©es. Deux autres champs sont renvoyÃ©s."," ",e.jsx(s,{children:"snapshotPending"})," signale que la lecture sur l'appareil n'a pas encore rÃ©pondu. ",e.jsx(s,{children:"missing"})," signale qu'elle est revenue vide ; c'est le seul Ã©tat oÃ¹ un formulaire ou la fiche dit Â« non prÃ©parÃ© Â». Seuls l'utilisent le formulaire de rapport de service, l'assistant d'entretien (site, bornes, gabarits, catÃ©gories) et la fiche terrain de la borne (",e.jsx(s,{children:"useChargerFieldHub"}),"). ",e.jsx(s,{children:"OfflineSnapshotNotice"})," ","affiche l'Ã¢ge de l'instantanÃ© (",e.jsx(s,{children:"formatDateTime"}),"), ou, hors ligne sans prÃ©paration, un renvoi vers ",e.jsx(a,{children:"/field-mode"}),"."]})}),e.jsxs(t,{id:"offline-identity",title:"54. DÃ©marrage hors ligne : derniÃ¨re identitÃ© connue",children:[e.jsxs(i,{children:["Tout attend ",e.jsx(s,{children:"users.queries.me"}),", qui a besoin du websocket."," ",e.jsx(s,{children:"AuthProvider"})," enregistre donc le dernier ",e.jsx(s,{children:"me"})," ","reÃ§u en direct (",e.jsx(s,{children:"lib/offline/last-identity.ts"}),"). Au dÃ©marrage hors ligne (",e.jsx(s,{children:"navigator.onLine === false"}),", ou socket toujours coupÃ© aprÃ¨s 3 s, voir ",e.jsx(s,{children:"useDeviceOffline"}),"), il sert ce profil avec ",e.jsx(s,{children:"isOfflineIdentity: true"}),", Ã  deux conditions :"]}),e.jsxs(l,{children:[e.jsxs(r,{children:["un jeton Convex Auth (",e.jsx(s,{children:"__convexAuthJWT_*"}),") est toujours dans le stockage ;"]}),e.jsxs(r,{children:["le ",e.jsx(s,{children:"sub"})," du jeton (",e.jsx(s,{children:"userId|sessionId"}),") dÃ©signe le mÃªme utilisateur."]})]}),e.jsxs(i,{children:["La dÃ©connexion, et une authentification qui se stabilise sur Â« non connectÃ© Â», effacent l'enregistrement. Le personnel de la plateforme n'est jamais conservÃ© : son ",e.jsx(s,{children:"me"})," peut dÃ©crire un tenant empruntÃ©. Une fois servi, le profil reste jusqu'Ã  l'arrivÃ©e du profil en direct, pour qu'une reconnexion ne dÃ©monte pas le formulaire. Le runtime hors ligne en tire la portÃ©e du tenant d'origine, et rien n'est envoyÃ© au serveur sur cette seule base."]}

96),e.jsx(d,{tone:"info",title:"Appareils rÃ©els",children:e.jsx(i,{children:"Le panneau Navigateur de l'application ralentit les onglets cachÃ©s. Le test d'acceptation reste un essai en mode avion sur iOS Safari et Android Chrome."})})]}),e.jsxs(t,{id:"offline-pending-sync",title:"55. Â« Ã synchroniser Â», conflits et garde de dÃ©connexion",children:[e.jsx(i,{children:"CHARGEOPS-44 rend la file visible et ferme les derniÃ¨res faÃ§ons de perdre ou d'Ã©craser du travail."}),e.jsxs(l,{children:[e.jsxs(r,{children:[e.jsx(n,{children:"Ãcritures versionnÃ©es"})," : ",e.jsx(s,{children:"updateDraft"})," sur"," ",e.jsx(s,{children:"serviceReports"})," et ",e.jsx(s,{children:"maintenanceReports"})," accepte un ",e.jsx(s,{children:"baseUpdatedAt"})," facultatif. Si la ligne a changÃ© depuis, rien n'est Ã©crit et ",e.jsx(s,{children:"{ conflict: true, id, server }"})," ","revient. La vÃ©rification passe aprÃ¨s les gardes de portÃ©e, d'auteur et de finalisation : un conflit ne livre jamais un rapport que l'appelant ne pourrait pas modifier. Avec ",e.jsx(s,{children:"baseUpdatedAt"})," ","ou ",e.jsx(s,{children:"returnVersion"}),", la rÃ©ponse est"," ",e.jsx(s,{children:"{ conflict: false, id, updatedAt }"}),"; sans l'un ni l'autre, c'est l'identifiant seul, comme avant, car d'anciens paquets et des appareils hors ligne font tourner l'ancien code des heures aprÃ¨s un dÃ©ploiement. ",e.jsx(s,{children:"createDraft"})," accepte"," ",e.jsx(s,{children:"returnVersion"})," et donne ",e.jsx(s,{children:"createdAt"})," comme version, y compris Ã  la relecture : une modification faite ailleurs aprÃ¨s une crÃ©ation dont la rÃ©ponse s'est perdue reste un conflit."," ",e.jsx(s,{children:"saveFinal"})," (service) accepte la mÃªme base."]}),e.jsxs(r,{children:[e.jsx(n,{children:"La version"})," : un rapport de service utilise"," ",e.jsx(s,{children:"updatedAt"})," (les photos n'y touchent pas). Un rapport de maintenance utilise le nouveau champ facultatif"," ",e.jsx(s,{children:"metaUpdatedAt"}),", Ã  dÃ©faut ",e.jsx(s,{children:"createdAt"}),", posÃ© seulement par ",e.jsx(s,{children:"createDraft"}),", ",e.jsx(s,{children:"updateDraft"}),","," ",e.jsx(s,{children:"updateTiming"}),", ",e.jsx(s,{children:"updateVisitCosts"})," (quand il change quelque chose), une amÃ©lioration du titre ou du rÃ©sumÃ©, et"," ",e.jsx(s,{children:"finalize"})," quand il change les sections du PDF ou pose l'heure de fin (sinon un appareil restÃ© sur l'ancienne base rÃ©Ã©crirait sa copie aprÃ¨s une rÃ©ouverture). Les sections se comparent avec leurs valeurs par dÃ©faut : un ancien rapport dont le choix enregistrÃ© n'a pas une clÃ© plus rÃ©cente, ou n'en a aucun, garde sa version Ã  une finalisation sans changement (CHARGEOPS-371)."," ",e.jsx(s,{children:"updateVisitCosts"})," accepte les mÃªmes"," ",e.jsx(s,{children:"baseUpdatedAt"})," / ",e.jsx(s,{children:"returnVersion"}),"; le gestionnaire envoie les coÃ»ts contre la version rendue par la mise Ã  jour et garde celle rendue par l'appel des coÃ»ts : sa propre Ã©criture de coÃ»ts n'entre jamais en conflit avec elle-mÃªme. La copie du serveur en conflit porte les coÃ»ts, les ",e.jsx(s,{children:"sections"})," ","du PDF et ",e.jsx(s,{children:"chrgpkPerformed"})," (la section CHRGPK s'applique-t-elle), et les montants seulement pour qui a ",e.jsx(s,{children:"viewFinancials"}),". Son ",e.jsx(s,{children:"updatedAt"})," bouge Ã  chaque Ã©criture de liste de contrÃ´le, de borne ou de photo : les propres modifications en ligne de l'assistant passeraient pour des conflits. ",e.jsx(s,{children:"getById"})," ","l'expose sous ",e.jsx(s,{children:"draftVersion"}),"."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Sur l'appareil"})," : les gestionnaires de synchronisation envoient le ",e.jsx(s,{children:"baseUpdatedAt"})," du brouillon, notent chaque version reÃ§ue avec ",e.jsx(s,{children:"setServerId"})," et, en cas de conflit, gardent la copie du serveur dans"," ",e.jsx(s,{children:"DraftRecord.conflict"})," (",e.jsx(s,{children:"lib/offline/conflicts.ts"}),"). Savoir si les deux copies diffÃ¨rent est une comparaison complÃ¨te de tous les champs que l'appareil enverrait (",e.jsx(s,{children:"serviceCopyDiff"})," ","/ ",e.jsx(s,{children:"maintenanceCopyDiff"}),", HTML brut compris, le choix des sections du PDF aussi, montrÃ© sur une seule ligne Â« Sections du PDF Â» qui liste les sections actives de chaque cÃ´tÃ© â la section CHRGPK n'est comparÃ©e et listÃ©e que si l'inspection CHRGPK du rapport a Ã©tÃ© faite, comme dans le choix des sections); si elles sont identiques, le gestionnaire (et le formulaire, pour un conflit dÃ©jÃ  enregistrÃ©) se rebase sans rien demander. La fenÃªtre range les champs sans ligne propre sur une ligne Â« Autres dÃ©tails Â» et montre un long texte Ã  partir de sa premiÃ¨re diffÃ©rence. Sinon, ce brou

96illon n'est plus envoyÃ© tant que la personne n'a pas choisi :"," ",e.jsx(s,{children:"keepDeviceVersion"})," se rebase sur la version du serveur et met un envoi en file (un Ã©crasement voulu),"," ",e.jsx(s,{children:"acceptServerVersion"})," remplace le formulaire de l'appareil par la copie du serveur. Une crÃ©ation est toujours suivie d'une mise Ã  jour versionnÃ©e. Â« Enregistrer le brouillon Â» et Â« Enregistrer final Â» du formulaire de service envoient aussi la base : celle de l'appareil, ou la version Ã  l'ouverture du formulaire, jamais celle de l'abonnement en direct."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Pastille et Ã©cran"})," : ",e.jsx(s,{children:"useOfflineWork"})," lit les brouillons et la file de la personne connectÃ©e toutes les 2 s, toujours par sa portÃ©e ",e.jsx(s,{children:"tenantId:userId"}),", et"," ",e.jsx(s,{children:"lib/offline/pending.ts"})," les regroupe par rapport (conflit âº Ã  vÃ©rifier âº en attente d'une mise Ã  jour âº en file âº sur l'appareil). ",e.jsx(s,{children:"ConnectivityPill"})," est dans les en-tÃªtes bureau et mobile d'",e.jsx(s,{children:"AppLayout"})," pour les auteurs de rapports; le portail ne la monte pas, les opÃ©rateurs de site n'Ã©crivant pas de rapports. ",e.jsx(a,{children:"/pending-sync"})," affiche les raisons par clÃ©s de traduction (",e.jsx(s,{children:"describeItemError"}),"), jamais le message brut du serveur; une opÃ©ration absente de"," ",e.jsx(s,{children:"KNOWN_OFFLINE_OPS"})," se lit Â« en attente d'une mise Ã  jour de l'application Â». ",e.jsx(s,{children:"lib/offline/discard.ts"})," est le seul code qui jette du travail non envoyÃ©, et ses deux appels passent par une confirmation."," ",e.jsx(n,{children:"Sur tÃ©lÃ©phone"})," (S3 W1, CHARGEOPS-583) : chaque groupe devient une carte ",e.jsx(s,{children:"ResponsiveList"})," (titre, statut, quand/combien d'Ã©lÃ©ments) ; glisser propose RÃ©essayer (groupe Ã  vÃ©rifier) ; Supprimer est ",e.jsx(s,{children:"menuOnly"})," ","(Â« â¯ Â» seulement). Les deux passent par les mÃªmes gestionnaires et la mÃªme confirmation que sur ordinateur. L'action Â« ÃlÃ©mentsâ¦ Â» ouvre le dÃ©tail par Ã©lÃ©ment (RÃ©essayer / Supprimer cet Ã©lÃ©ment) dans une feuille â le composant"," ",e.jsx(s,{children:"Dialog"})," adaptatif, pas un nouveau composant â qui rÃ©utilise ",e.jsx(s,{children:"GroupItemsList"}),", la mÃªme liste que le bloc imbriquÃ© d'ordinateur/tablette (aucune duplication de logique). La feuille est tenue par la clÃ© du brouillon, pas par l'objet groupe : un RÃ©essayer/Supprimer fait depuis la feuille se reflÃ¨te tout de suite (et la feuille se ferme d'elle-mÃªme si le groupe disparaÃ®t)."]}),e.jsxs(r,{children:[e.jsx(n,{children:"DÃ©connexion et purge"})," : ",e.jsx(s,{children:"useSignOutGuard"})," ","enveloppe les boutons de dÃ©connexion de ",e.jsx(s,{children:"ProfileMenu"})," et"," ","du menu â° du tÃ©lÃ©phone (",e.jsx(s,{children:"NavMenu"}),") (AuthProvider est hors du runtime). Il ne supprime rien. Â« Se connecter Â» sur l'Ã©cran Â« Ã synchroniser Â» y revient aprÃ¨s la connexion (",e.jsx(s,{children:"lib/offline/sign-in-return.ts"}),", seulement ",e.jsx(a,{children:"/pending-sync"}),", une fois)."," ",e.jsx(s,{children:"OfflineHousekeeping"})," (dans"," ",e.jsx(s,{children:"App.tsx"}),") retire, pour toute personne de l'appareil, les brouillons synchronisÃ©s depuis plus de 30 jours sans rien en file ni conflit ouvert, avec leurs photos. Le travail non synchronisÃ© n'est"," ",e.jsx(n,{children:"jamais"})," purgÃ© : rien n'est jetÃ© sans confirmation explicite. Une session expirÃ©e retire le runner; la mÃªme personne qui se reconnecte obtient un nouveau runner qui vide la mÃªme file, et une autre personne ne la lit jamais."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Sans stockage sur l'appareil, appareil plein, rapport disparu"})," ","(suivi hors ligne B) : l'enregistrement direct de l'assistant de maintenance (IndexedDB indisponible, ou stockage plein en ligne) passe par le mÃªme ",e.jsx(s,{children:"sendMaintenanceDraft"})," que le gestionnaire, donc par la mÃªme rÃ¨gle de version : la base est le"," ",e.jsx(s,{children:"draftVersion"})," de l'hydratation, puis la version rendue par chacun de ses enregistrements (ou la base de la copie de l'appareil si elle est plus rÃ©cente, aprÃ¨s un repli en cours de visite). Les enregistrements directs sont enchaÃ®nÃ©s : un envoi encore en cours ne fait jamais partir le suivant avec une base pÃ©rimÃ©e. Un refus est gardÃ© dans ",e.jsx(s,{children:"directConflict"})," et passe par le mÃªme ",e.jsx(s,{children:"DraftConflictDialog"})," ; l'enregistrement automatique attend le choix, et des copies identiques sont simplement rebasÃ©es. La sÃ©lection en bloc et Â« Tout effacer Â» partagent ",e.jsx(s,{children:"runChargerOps"})," avec le toucher d'une borne : sur ",e.jsx(s,{children:"OfflineQuotaError"})," en ligne, l'opÃ©ration refusÃ©e et toutes les suivantes partent directement Ã  Convex aprÃ¨s un ",e.jsx(s,{children:"syncNow"}),". Les deux formulaires de rapport lisent le rapport avec ",e.jsx(s,{children:"useReportQuery"})," ","(",e.jsx(s,{children:"hooks/use-report-query.ts"}),", sur ",e.jsx(s,{children:"useQueries"}

96)," ","pour qu'une lecture refusÃ©e revienne comme une valeur) : une"," ",e.jsx(s,{children:"ConvexError"})," autre que ",e.jsx(s,{children:"tenantSuspended"}),", un"," ",e.jsx(s,{children:"null"})," aprÃ¨s que le rapport a Ã©tÃ© chargÃ©, ou un"," ",e.jsx(s,{children:"null"})," encore lÃ  2 s plus tard en ligne signifie Â« indisponible Â», et ",e.jsx(s,{children:"ReportUnavailable"})," remplace le formulaire â ni hydratation, ni Ã©criture sur l'appareil. Une lecture hors ligne ne donne jamais null : les ouvertures hors ligne ne changent pas."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Enregistrement direct sur un appareil plein"})," ","(CHARGEOPS-275) : l'appareil ne peut noter ni la version rendue ni retirer la synchro dÃ©jÃ  en file, qui rejouait plus tard l'ancienne copie sur son ancienne base â refusÃ©e sans rien Ã©craser, mais levÃ©e en conflit inutile. Chaque enregistrement direct rÃ©ussi (assistant de maintenance, et"," ",e.jsx(s,{children:"adoptDirectSave"})," du formulaire de service) laisse une note (",e.jsx(s,{children:"lib/offline/direct-saves.ts"}),","," ",e.jsx(s,{children:"noteDirectSave"}),") et tente"," ",e.jsx(s,{children:"settleDirectSave"})," tout de suite ; si l'appareil est encore plein, le gestionnaire de synchro la rÃ¨gle avant tout envoi. Une copie de l'appareil enregistrÃ©e au plus tard au moment de l'envoi direct est remplacÃ©e : copie envoyÃ©e, base = version rendue, synchronisÃ©e, et seules les opÃ©rations de synchro du brouillon sont retirÃ©es (photos, bornes et suppressions restent). Une copie plus rÃ©cente est seulement rebasÃ©e et reste en file : elle part par-dessus, et une vraie modification du bureau depuis reste un conflit. Un conflit enregistrÃ© Ã  une version au plus Ã©gale est retirÃ©. La note vit en mÃ©moire et dans"," ",e.jsx(s,{children:"localStorage"})," (un petit quota sÃ©parÃ© qu'une IndexedDB pleine ne touche pas), sous"," ",e.jsx(s,{children:"co-offline-direct-save:<tenant>:<user>:<draft>"}),", donc elle survit Ã  un onglet fermÃ© (CHARGEOPS-369) : le balayage du dÃ©marrage suivant rÃ¨gle d'abord les notes de la personne connectÃ©e (",e.jsx(s,{children:"settleStoredDirectSaves"}),", arrÃªtÃ© Ã  la premiÃ¨re erreur de quota), et le gestionnaire de synchro en rÃ¨gle une s'il passe avant. Une note rÃ©glÃ©e est retirÃ©e des deux ; une note illisible est retirÃ©e ; une note dont la version est derriÃ¨re la base de la copie de l'appareil est retirÃ©e sans toucher la copie (une base ne recule jamais). Si ",e.jsx(s,{children:"localStorage"})," est plein ou bloquÃ©, la note reste en mÃ©moire seulement, comme avant."]})]})]}),e.jsxs(t,{id:"offline-download-size-and-unsent-badge",title:"56. Taille du tÃ©lÃ©chargement et badge Â« modifications non envoyÃ©es Â» (suivi C)",children:[e.jsx(i,{children:"Deux ajouts additifs sur les CHARGEOPS-43 et -44 : la taille approximative du tÃ©lÃ©chargement avant mÃªme que tu appuies sur Â« PrÃ©parer pour le hors-ligne Â», et un second badge pour un rapport que la liste affiche dÃ©jÃ  depuis le serveur mais dont la copie sur l'appareil a du travail non envoyÃ©."}),e.jsxs(l,{children:[e.jsxs(r,{children:[e.jsx(n,{children:"Taille du tÃ©lÃ©chargement"})," : ",e.jsx(s,{children:"computeOfflineAssetsBytes(bundle, files)"})," ","(",e.jsx(s,{children:"scripts/sw-offline-assets.mjs"}),") additionne la taille en octets exactement des URL que ",e.jsx(s,{children:"collectOfflineAssets"})," a renvoyÃ©es, lue dans le mÃªme bundle Rollup (",e.jsx(s,{children:"code"}

96)," de chaque morceau, ",e.jsx(s,{children:"source"})," de chaque fichier statique) â aucun accÃ¨s disque, aucune requÃªte HEAD."," ",e.jsx(s,{children:"stampServiceWorker()"})," Ã©crit ce total dans"," ",e.jsx(s,{children:"sw.js"})," Ã  la place d'un second marqueur,"," ",e.jsx(s,{children:"/* @offline-assets-bytes */ 0"}),", Ã  cÃ´tÃ© de"," ",e.jsx(s,{children:"OFFLINE_ASSETS"}),". Le worker le renvoie sous"," ",e.jsx(s,{children:"bytes"})," dans ",e.jsx(s,{children:"GET_OFFLINE_STATUS"})," â le mÃªme message qui portait dÃ©jÃ  les comptes de fichiers â pour que la page Mode terrain (",e.jsx(s,{children:"lib/offline/sw-client.ts::OfflineAssetStatus"}),") l'affiche (",e.jsx(s,{children:"formatFileSize"}),") dÃ¨s son montage, sans dÃ©pendre de ce qui a dÃ©jÃ  Ã©tÃ© mis en cache."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Taille transfÃ©rÃ©e (CHARGEOPS-277)"})," : ce total brut est ce que les fichiers occupent une fois stockÃ©s (le Cache API garde le corps dÃ©codÃ©), pas ce qu'ils coÃ»tent Ã  tÃ©lÃ©charger : le CDN les envoie compressÃ©s, environ trois fois plus petits."," ",e.jsx(s,{children:"computeOfflineAssetsTransferBytes(bundle, files)"})," ","additionne, pour chaque fichier texte (",e.jsx(s,{children:"COMPRESSIBLE_ASSET_RE"})," : JS, CSS, SVG, JSONâ¦) d'au moins 1 000 octets, sa taille Brotli Ã  la qualitÃ© 3, et la taille brute de tout le reste (images, fichiers de moins de 1 000 octets). MesurÃ© en production le 2026-09-25 (188 fichiers, ",e.jsx(s,{children:"Accept-Encoding"})," d'un navigateur) : Vercel rÃ©pond ",e.jsx(s,{children:"br"})," pour chaque fichier texte de 1 017 octets ou plus, ",e.jsx(s,{children:"identity"})," jusqu'Ã  957 octets, et la qualitÃ© 3 reproduit ses corps Ã  2 octets prÃ¨s ; l'estimation d'un build de production tombait Ã  moins de 0,1 % du transfert rÃ©el. Le calcul prend environ 0,1 s. Les deux totaux sont calculÃ©s dans ",e.jsx(s,{children:"writeBundle"}),", pas"," ",e.jsx(s,{children:"generateBundle"})," : les plugins post de Vite rÃ©Ã©crivent encore le code des morceaux aprÃ¨s (les tables de prÃ©chargement, environ 28 Ko). ",e.jsx(s,{children:"sw.js"})," reÃ§oit le second total Ã  la place de ",e.jsx(s,{children:"/* @offline-assets-transfer-bytes */ 0"})," et le renvoie sous ",e.jsx(s,{children:"transferBytes"})," ; la page affiche Â« environ ","{download}"," (","{stored}"," une fois stockÃ©s sur cet appareil) Â», ou l'ancien libellÃ© brut face Ã  un worker qui ne le connaÃ®t pas encore."]}),e.jsxs(r,{children:[e.jsx(n,{children:"UnitÃ©s"})," : ",e.jsx(s,{children:"lib/format.ts::formatFileSize"})," ","est le seul formateur de tailles de fichiers de l'application, en multiples binaires (pas de 1024), comme toutes les limites de l'application (",e.jsx(s,{children:"MAX_PHOTO_BYTES = 20 * 1024 * 1024"})," est le Â« 20 Mo Â» de chaque refus du serveur, voir"," ",e.jsx(s,{children:"convex/lib/storage.ts"}),"), avec les libellÃ©s de la langue de l'application â ",e.jsx(s,{children:"o / Ko / Mo / Go"})," en franÃ§ais,"," ",e.jsx(s,{children:"B / KB / MB / GB"})," en anglais â et une espace insÃ©cable entre le nombre et l'unitÃ©. Il Ã©crivait le Â« kB Â» SI pour un pas de 1024 ; les formateurs locaux du gestionnaire de fichiers, des sauvegardes, des RMA, de l'import de bornes et de l'extension Chrome passent maintenant par lui. Le plafond des cas fabricant (18 Ã 1024Â²) s'affiche donc exactement Â« 18 Mo Â»."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Badge Â« modifications non envoyÃ©es Â»"})," :"," ",e.jsx(s,{children:"lib/offline/pending.ts::unsentEditsServerIds(groups, kind?)"})," ","renvoie le ",e.jsx(s,{children:"serverId"})," de chaque brouillon qui en a un mais dont le ",e.jsx(s,{children:"syncedAt"})," reste indÃ©fini â le rapport a atteint le serveur, mais cet appareil garde des modifications non confirmÃ©es synchronisÃ©es. C'est un signal diffÃ©rent de"," ",e.jsx(s,{children:"deviceOnly"})," (aucun ",e.jsx(s,{children:"serverId"})," du tout, le rapport que ",e.jsx(s,{children:"DeviceOnlyDrafts"})," affiche au-dessus de la liste). Les listes de rapports de service et d'entretien (",e.jsx(s,{children:"pages/service-reports.tsx"}),","," ",e.jsx(s,{children:"pages/maintenance-reports/list.tsx"}),", ses vues tableau et fiches) lisent ",e.jsx(s,{children:"useOfflineWork()"})," une seule fois au niveau de la page et badgent la ligne ou la fiche correspondante avec ",e.jsx(s,{children:"UnsentEditsBadge"})," (",e.jsx(s,{children:"components/offline/unsent-edits-badge.tsx"}),"), plutÃ´t que d'ajouter une seconde carte au-dessus du tableau."]})]})]}),e.jsx(t,{id:"offline-outbox-robustness",title:"57. Robustesse de la file : balayage au dÃ©marrage, deux onglets, un seul signal hors ligne",children:e.jsxs(l,{children:[e.jsxs(r,{children:[e.jsx(n,{children:"Balayage au dÃ©marrage"})," (",e.jsx(s,{children:"lib/offline/startup-sweep.ts"}),") :"," ",e.jsx(s,{children:"OfflineHousekeeping"})," lance ",e.jsx(s,{children:"sweepUnsentDrafts"})," une fois par base de l'appareil et par identitÃ©. Chaque brouillon de la personne connectÃ©e (",e.jsx(s,{children:"listDrafts"}),", donc jamais celui d'une autre) non envoyÃ©, sans conflit ouvert et sans synchronisation en file ou en attente de vÃ©rification reÃ§oit l'opÃ©ration de synchronisation de son type par"," ",e.jsx(s,{children:"enqueueUnique"})," (",e.jsx(s,{children:"serviceReport.sync"}),","," ",e.jsx(s,{children:"maintenanceReport.sync"}),"), puis ",e.jsx(s,{children:"syncNow()"}),". Les brouillons de service suivent la rÃ¨gle du formulaire,"," ",e.jsx(s,{children:"serviceDraftWantsSync"})," (pas final, envoyable). Une copie liÃ©e Ã  une ligne du serveur sans ",e.jsx(s,{children:"baseUpdatedAt"})," (Ã©crite avant CHARGEOPS-44) est laissÃ©e au formulaire, qui la rebase Ã  l'ouverture. Un onglet fermÃ© avant la mise en file de sa synchronisation atteint donc le serveur au prochain dÃ©marrage. Une copie crÃ©Ã©e pour une photo ou une borne sur un rapport existant, sans rien de saisi, est marquÃ©e synchronisÃ©e dÃ¨s sa crÃ©ation (l'assistant compare le formulaire Ã  la copie du serveur chargÃ©e, le formulaire de service utilise"," ",e.jsx(s,{children:"serviceCopyDiff"})," contre la copie du serveur adoptÃ©e) : elle n'est jamais envoyÃ©e par-dessus des modifications faites ensuite au bureau."]}),e.jsxs(r,{children:[e.jsx(n,{children:"MÃªme rapport dans deux onglets"})," (",e.jsx(s,{children:"lib/offline/draft-presence.ts"}),") : chaque formulaire tient un verrou Web Lock ",e.jsx(n,{children:"partagÃ©"})," ",e.jsx(s,{children:"chargeops-open:<clÃ©>"})," par clÃ© de prÃ©sence (le brouillon de l'appareil et ",e.jsx(s,{children:"service:<id>"})," / ",e.jsx(s,{children:"maintenance:<id>"}),", car deux onglets sur un mÃªme rapport peuvent tenir des brouillons diffÃ©rents) et interroge ",e.jsx(s,{children:"navigator.locks.query()"})," toutes les 2 s. Une clÃ© tenue par deux ",e.jsx(s,{children:"clientId"})," diffÃ©rents, Ã  deux vÃ©rifications de suite (la seconde 250 ms aprÃ¨s la premiÃ¨re), affiche"," ",e.jsx(s,{children:"OpenElsewhereBanner"})," dans les deux onglets ;

96 un mÃªme onglet qui tient une clÃ© deux fois ne compte pas. Ce n'est qu'un avertissement ; le navigateur libÃ¨re les verrous quand un onglet se ferme ou plante. Sans Web Locks, rien ne s'affiche."]}),e.jsxs(r,{children:[e.jsx(n,{children:"ÃvÃ©nements du runner"})," : ",e.jsx(s,{children:"paused-auth"})," porte l'Ã©lÃ©ment ; une suppression locale qui Ã©choue aprÃ¨s un gestionnaire rÃ©ussi Ã©met ",e.jsx(s,{children:"item-delete-failed"})," (l'Ã©lÃ©ment est rejouÃ© ; le runtime le journalise) ; ",e.jsx(s,{children:"retryItem(db, id, now)"})," inscrit l'heure au lieu de 0 et reste admissible tout de suite. ",e.jsx(s,{children:"deleteDraft"}),","," ",e.jsx(s,{children:"discardItem"})," et ",e.jsx(s,{children:"deletePhoto"})," passent par"," ",e.jsx(s,{children:"guardQuota"}),", comme la suppression du runner : un disque plein peut refuser mÃªme la validation d'une suppression."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Un seul signal Â« confirmÃ© hors ligne Â»"})," :"," ",e.jsx(s,{children:"device-offline.ts::useConfirmedOffline"})," est la seule logique de dÃ©lai (navigateur hors ligne, ou hors ligne depuis plus de 3 s aprÃ¨s la derniÃ¨re coupure). Le runtime l'expose sous ",e.jsx(s,{children:"confirmedOffline"})," ","(lu par ",e.jsx(s,{children:"useOfflineQuery"}),") et en dÃ©rive"," ",e.jsx(s,{children:"connectivityKnown"}),", avec le mÃªme dÃ©lai au dÃ©marrage seulement qu'avant (pastille, Enregistrer final). ",e.jsx(s,{children:"useDeviceOffline"}),", dont AuthProvider a besoin au-dessus du runtime, est le mÃªme hook alimentÃ© par la connexion Convex. Une confirmation n'est partagÃ©e entre instances que tant que l'une d'elles observe encore."]})]})}),e.jsx(t,{id:"offline-storage-full-banner",title:"58. Bandeau Â« appareil plein Â» pour toute l'application",children:e.jsxs(l,{children:[e.jsxs(r,{children:[e.jsx(n,{children:"Ãtat"})," (",e.jsx(s,{children:"lib/offline/errors.ts"}),", sans React) :"," ",e.jsx(s,{children:"guardQuota"})," met un drapeau de module Ã  vrai sur une erreur de quota et le remet Ã  faux dÃ¨s qu'une Ã©criture protÃ©gÃ©e rÃ©ussit ; une autre erreur ne le change pas. ",e.jsx(s,{children:"subscribeOfflineStorageFull"})," ne prÃ©vient qu'Ã  un changement (le chemin de succÃ¨s coÃ»te une comparaison) et"," ",e.jsx(s,{children:"isOfflineStorageFull"})," le lit ; ",e.jsx(s,{children:"onOfflineStorageError"})," ","reste appelÃ© Ã  chaque erreur de quota. CÃ´tÃ© React :"," ",e.jsx(s,{children:"lib/offline/use-offline-storage-full.ts::useOfflineStorageFull"})," ","(",e.jsx(s,{children:"useSyncExternalStore"}),")."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Ãcritures protÃ©gÃ©es"})," : en plus des brouillons, de la file, des photos, des conflits, des refdata et des suppressions, passent dÃ©sormais par ",e.jsx(s,{children:"guardQuota"})," la purge de ",e.jsx(s,{children:"OfflineHousekeeping"}),", l'Ã©lagage et Â« Effacer les donnÃ©es de l'appareil Â» du clichÃ© (",e.jsx(s,{children:"snapshot.ts"}),") et la libÃ©ration de la copie d'une photo aprÃ¨s son rattachement dans les deux gestionnaires. Les erreurs se propagent comme avant ; l'appareil plein et le retour de l'espace sont vus d'oÃ¹ qu'ils viennent."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Bandeau"})," (",e.jsx(s,{children:"components/offline/storage-full-banner.tsx"}),") : montÃ© une fois dans ",e.jsx(s,{children:"App.tsx"}),", Ã  cÃ´tÃ© de"," ",e.jsx(s,{children:"OfflineHousekeeping"}),", et rendu par ",e.jsx(s,{children:"createPortal"})," dans"," ",e.jsx(s,{children:"document.body"})," (un Ã©lÃ©ment ",e.jsx(s,{children:"fixed"})," sous un ancÃªtre filtrÃ© ou transformÃ© perd son ancrage). ",e.jsx(s,{children:'role="alert"'}),","," ",e.jsx(s,{children:"co-card"}),", en bas, pleine largeur avec 16 px de marge sur tÃ©lÃ©phone, ",e.jsx(s,{children:"z-50"}),", et il ne couvre jamais ce qu'il ne doit pas (CHARGEOPS-368). Il se place au-dessus de la barre d'actions fixe de l'assistant de maintenance, qui publie sa hauteur dans ",e.jsx(s,{children:"--co-bottom-bar-h"})," (",e.jsx(s,{children:"hooks/use-bottom-bar-inset.ts"}),"), et au-dessus de la banniÃ¨re d'installation PWA, qui publie sa hauteur plus un Ã©cart de 0,5 rem dans ",e.jsx(s,{children:"--co-install-banner-h"})," (",e.jsx(s,{children:"usePublishedHeight"}),") et se place elle-mÃªme au-dessus de cette barre ; les deux ",e.jsx(s,{children:"bottom"})," viennent de ",e.jsx(s,{children:"aboveBottomBar()"}),". Il se place aussi au-dessus du bouton de l'assistant ChargeOps AI (Â§14i) : son ",e.jsx(s,{children:"bottom"})," est"," ",e.jsx(s,{children:'aboveBottomBar("1rem", "max(var(--co-assistant-launcher-h, 0px), var(--co-install-banner-h, 0px))")'})," ","(",e.jsx(s,{children:"STORAGE_BANNER_BOTTOM"}),") â le maximum et non la somme, parce que la place du bouton inclut dÃ©jÃ  celle de la banniÃ¨re d'installation, qui le pousse aussi. Il porte ",e.jsx(s,{children:"co-card is-static is-floating"}),". Il s'efface pendant qu'une couche modale est ouverte, que la fenÃªtre se soit ouverte avant ou aprÃ¨s le remplissage :"," ",e.jsx(s,{children:"hooks/use-modal-layer-open.ts"})," surveille le"," ",e.jsx(s,{children:"pointer-events: none"})," que Radix pose sur ",e.jsx(s,{children:"<body>"})," ","pendant qu'une fenÃªtre, une alerte, un panneau, un tiroir, un menu modal ou une liste dÃ©roulante est ouvert. Un bandeau rÃ©duit le reste aprÃ¨s. Â« Synchroniser Â» appelle"," ",e.jsx(s,{children:"syncNow()"})," du runtime, masquÃ© hors ligne ; Â« Mode terrain Â» mÃ¨ne Ã "," ",e.jsx(a,{children:"/field-mode"}),". â le rÃ©duit en pastille jusqu'Ã  la prochaine erreur de quota (",e.jsx(s,{children:"onOfflineStorageError"}),"). MÃªme garde que la pastille de connectivitÃ© (auteur de rapports, base ",e.jsx(s,{children:"open"}),", identitÃ© connue) et jamais sous ",e.jsx(a,{children:"/portal"}),"."]}),e.jsxs(r,{children:[e.jsx(n,{children:"Formulaires"})," : l'assistant d'entretien, ses photos de bornes et le formulaire de service n'affichent plus de toast Â« stockage plein Â». L'assistant bascule toujours sur ses enregistrements directs en ligne, et les autres toasts d'Ã©chec sur l'appareil restent."]})]})})]}),e.jsxs(o,{id:"annexes",title:"Annexes",children:[e.jsx(t,{id:"architecture-providers",title:"Architecture des providers (App.tsx)",children:e.jsx(c,{children:`<ErrorBoundary level="app">
97  <ConvexAuthProvider>
98    <AuthProvider>
99      <LanguageProvider>     â useLanguage()
100        <ThemeProvider>      â useTheme()
101          <PageMetaProvider> â useSetPageMeta()
102            <TooltipProvider>
103              <LazyMotion features={domAnimation}>
104                <AnalyticsTracker />
105                <NavPreloader />
106                <ErrorBoundary level="component">
107                  <Router />  â Suspense + lazy routes
108                </ErrorBoundary>
109                <Toaster />
110                <PWAInstallBanner />
111              </LazyMotion>`})}),e.jsx(t,{id:"hooks-ui-cles",title:"Hooks UI clÃ©s",children:e.jsx(h,{rows:[{key:e.jsx(s,{children:"useTheme()"}),value:e.jsxs(e.Fragment,{children:[e.jsx(s,{children:"theme"}),", ",e.jsx(s,{children:"setTheme"}),","," ",e.jsx(s,{children:"toggleTheme"})," (light/dark, persistÃ© localStorage)."]})},{key:e.jsx(s,{children:"useLanguage()"}),value:e.jsxs(e.Fragment,{children:[e.jsx(s,{children:"language"}),", ",e.jsx(s,{children:"setLanguage"}),","," ",e.jsx(s,{children:"supportedLanguages"}),". Ãcrit cÃ´tÃ© serveur."]})},{key:e.jsx(s,{children:"useIsMobile()"}),value:"bool â viewport < 1024 px (largeur seule, plus de vÃ©rification tactile)."},{key:e.jsx(s,{children:"useSetPageMeta(title, subtitle?, showNavLinks?, fullWidth?)"}),value:"Configure le header AppLayout."},{key:e.jsx(s,{children:"usePageMeta()"}),value:"Lit le meta courant (utilisÃ© par AppLayout)."},{key:e.jsx(s,{children:"useBranding()"}),value:e.jsxs(e.Fragment,{children:["Lit ",e.jsx(s,{children:"brandingSettings"})," + rÃ©sout les logos selon brand/theme."]})},{key:e.jsx(s,{children:"useToast()"}),value:"API toast."},{key:e.jsx(s,{children:"usePWAInstall()"}),value:e.jsxs(e.Fragment,{children:[e.jsx(s,{children:"canInstall"}),", ",e.jsx(s,{children:"installed"}),","," ",e.jsx(s,{children:"promptInstall"}),"."]})},{key:e.jsx(s,{children:"useIsStandalone()"}),value:e.jsxs(e.Fragment,{children:["Vrai dans l'app installÃ©e (",e.jsx(s,{children:"display-mode: standalone"})," ","ou ",e.jsx(s,{children:"navigator.standalone"}),") ; voir 9b."]})},{key:e.jsx(s,{children:"useAuth()"}),value:e.jsxs(e.Fragment,{children:["User courant + ",e.jsx(s,{children:"logoutMutation"}),"."]})},{key:e.jsxs(e.Fragment,{children:[e.jsx(s,{children:"useFeatureFlags()"})," /"," ",e.jsx(s,{children:"usePowerManagementEnabled()"})]}),value:"Feature flags."},{key:e.jsx(s,{children:"useColumnConfiguration()"}),value:"Colonnes personnalisÃ©es (per-user)."}]})}),e.jsx(t,{id:"recap-css-vars",title:"RÃ©cap CSS â variables principales",children:e.jsx(u,{headers:["Variable","Light","Dark"],rows:[[e.jsx(s,{children:"--background"}),e.jsx(s,{children:"hsl(0 0% 100%)"}),e.jsx(s,{children:"hsl(240 10% 3.9%)"})],[e.jsx(s,{children:"--foreground"}),e.jsx(s,{children:"hsl(20 14.3% 4.1%)"}),e.jsx(s,{children:"hsl(0 0% 98%)"})],[e.jsx(s,{children:"--primary"}),e.jsx(s,{children:"hsl(223 89% 55%)"}),e.jsx(s,{children:"hsl(223 89% 55%)"})],[e.jsx(s,{children:"--card"}),e.jsx(s,{children:"hsl(0 0% 100%)"}),e.jsx(s,{children:"hsl(240 10% 3.9%)"})],[e.jsx(s,{children:"--ny-card"}),e.jsx(s,{children:"#FFFFFF"}),"(gradient bleu translucide)"],[e.jsx(s,{children:"--ny-primary"}),e.jsx(s,{children:"#2563EB"}),e.jsx(s,{children:"#2563EB"})],[e.jsx(s,{children:"--ny-radius"}),e.jsx(s,{children:"12px"}),e.jsx(s,{children:"12px"})]]})}),e.jsx(t,{id:"tables-convex-referencees",title:"Tables Convex rÃ©fÃ©rencÃ©es",children:e.jsx(u,{headers:["Table","Section schema.ts","Index principaux"],rows:[[e.jsx(s,{children:"chargerBrands"}),"L412",e.jsx(s,{children:"by_name"})],[e.jsx(s,{children:"chargerModels"}),"L417",e.jsx(s,{children:"by_brandId"})],[e.jsx(s,{children:"simCarriers"}),"L427",e.jsx(s,{children:"by_name"})],[e.jsx(s,{children:"usefulLinks"}

111),"L750",e.jsx(s,{children:"by_displayOrder"})],[e.jsx(s,{children:"userCustomLinks"}),"L761",e.jsx(s,{children:"by_userId_displayOrder"})],[e.jsx(s,{children:"columnConfigurations"}),"L630",e.jsxs(e.Fragment,{children:[e.jsx(s,{children:"by_pageId_isDefault"}),","," ",e.jsx(s,{children:"by_userId_pageId"})]})],[e.jsx(s,{children:"systemNotifications"}),"L643",e.jsx(s,{children:"by_isActive"})],[e.jsx(s,{children:"brandingSettings"}),"L841","(singleton)"],[e.jsx(s,{children:"emailNotificationSettings"}),"L662","(singleton)"],[e.jsx(s,{children:"userAnalyticsSessions"}),"(analytics)","by user/timestamp"],[e.jsx(s,{children:"pageViews"}),"(analytics)","by session"]]})})]}),e.jsx(o,{id:"fin-document",title:"Fin du document",children:e.jsxs(i,{children:["Pour les autres aspects de l'application, voir les autres docs du dossier ",e.jsx(s,{children:"docs/fr/"}),"."]})})]})}export{q as default};

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.