/* ========================================================================== SUPERNOVA — core/desktop-terrain.css Session W2 (23/07/2026) · PARITÉ DESKTOP TERRAIN T1 / T2. Invariant DEC-7 : toute fonctionnalité servie à une typologie l'est sur ses DEUX carrosseries. Le device change la FORME, jamais la FONCTION. DEC-1 : le desktop n'est pas le mobile agrandi — densité de comparaison et de manipulation (nav latérale persistante, multi-colonnes, listes denses, cartes KPI en rangée), sur le modèle du cockpit. ADDITIF PUR. Deux garanties de non-régression mobile : 1. toute règle qui touche une classe PRÉEXISTANTE vit dans @media (min-width: 1024px) — en dessous, le CSS mobile est intact ; 2. hors media query, ce fichier ne déclare QUE des classes `dt-*` (inexistantes ailleurs), et uniquement pour les masquer. Rollback = retirer la balise correspondante. Aucun autre CSS modifié. Le shell desktop est activé par la classe `dt-shell` posée sur par le JS APRÈS authentification : l'écran de login reste centré tel quel. Zéro couleur littérale : uniquement les tokens de core/tokens.css. ========================================================================== */ /* ========================================================================== S1 (23/07/2026) — SHELL DESKTOP · INTERFACE MANAGER Ajoute au socle W2 : nav latérale à 8 entrées, bandeau supérieur, grille du Cockpit en rangées, cartes d'indicateur normalisées, discipline chromatique. La garantie de non-régression mobile est INCHANGÉE et reste vérifiable à l'œil : hors de la media query ci-dessous, ce fichier ne parle QUE de classes `dt-*`, qui n'existent nulle part ailleurs dans le produit — les masquer ou les habiller ne peut donc rien changer à ce qui existait. Le seul de ces sélecteurs posé sur un élément inséré dans un écran préexistant est `.dt-kpi-row`, en `display: contents` : sans boîte, ses cartes filles se comportent exactement comme si le conteneur n'était pas là, et la grille KPI du téléphone reste celle d'avant la session. ========================================================================== */ /* -------------------------------------------------------------------------- BASE (tous viewports) — rien de tout ceci n'existe sous 1024 px. -------------------------------------------------------------------------- */ .dt-side { display: none; } /* Bandeau : salutation et bloc identité/déconnexion sont propres au poste de travail. Le téléphone garde l'en-tête « nom du PDV + date » qu'il avait. */ .dt-greeting, .dt-ident { display: none; } /* Emplacements réservés de la grille desktop (rangée 2 et rangée 4) : ils ne doivent jamais apparaître dans la pile mobile. */ .dt-slot { display: none; } /* Conteneur transparent : sans boîte, ses enfants restent des items directs de .tr-kpi-grid. C'est ce qui rend le regroupement invisible sur mobile. */ .dt-kpi-row { display: contents; } @media (min-width: 1024px) { /* ---------------------------------------------------------------------- 0. Métriques du shell ---------------------------------------------------------------------- */ :root { --dt-side-w: 16.5rem; /* barre latérale — 264 px, largeur de la référence S2 */ --dt-content-max: 82rem; /* laisse respirer au-delà de 1600 px */ --dt-content-max-v: 74rem; /* surface vendeur : un cran plus resserrée */ } /* ---------------------------------------------------------------------- 1. NAVIGATION LATÉRALE PERSISTANTE Elle remplace la tab bar du bas : le contenu de la barre est une PROJECTION du tab bar existant (libellés clonés du DOM par le JS), donc aucun écran inventé et aucun libellé nouveau. ---------------------------------------------------------------------- */ /* S1 — la barre n'apparaît qu'avec le shell, donc après authentification. Sans cette condition elle se dessinait aussi le long de l'écran de login et exposait toute la structure de l'application à un visiteur non authentifié (le routage, lui, était déjà fermé : le clic exige un jeton). */ body.dt-shell .dt-side { display: flex; flex-direction: column; gap: var(--sn-space-1); position: fixed; top: 0; left: 0; bottom: 0; width: var(--dt-side-w); padding: var(--sn-space-5) var(--sn-space-3); background-color: var(--sn-bg); border-right: 1px solid var(--sn-separator); overflow-y: auto; z-index: 30; } .dt-side__item { display: flex; align-items: center; gap: var(--sn-space-3); width: 100%; min-height: var(--sn-tap-min); padding: var(--sn-space-2) var(--sn-space-3); border: 0; border-radius: var(--sn-radius-m); background-color: transparent; color: var(--sn-ink-80); font-family: var(--sn-font-ui); font-size: var(--sn-fs-base-terrain); font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; transition: background-color var(--sn-dur-base) var(--sn-ease), color var(--sn-dur-base) var(--sn-ease); } .dt-side__item:hover { background-color: var(--sn-violet-10); color: var(--sn-ink-100); } .dt-side__item:focus-visible { outline: 2px solid var(--sn-accent); outline-offset: 2px; } .dt-side__item--active { background-color: var(--sn-violet-10); color: var(--sn-accent-ink); } /* Pastille d'icône : reprend le glyphe déjà présent dans le tab bar mobile. */ .dt-side__icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.5rem; color: var(--sn-ink-60); } /* Les glyphes du tab bar ne portent pas d'attribut `stroke` : leur trait vient d'une règle qui vise la tab bar. Clonés ici, ils sortaient de sa portée et se dessinaient donc sans trait — des entrées sans icône. On rétablit le trait sur l'encre courante, ce qui fait aussi suivre la couleur de l'état actif. */ .dt-side__icon svg { stroke: currentColor; fill: none; } .dt-side__item--active .dt-side__icon { color: var(--sn-accent); } /* ---------------------------------------------------------------------- 2. SURFACE T2 — RESPONSABLE PDV (index.html / app.js) ---------------------------------------------------------------------- */ /* Le socle mobile enferme TOUTE l'application dans une colonne de téléphone (style.css : `body { max-width: 375px; margin: 0 auto }`). C'est la contrainte qui rend le desktop impossible : sans elle levée, la barre latérale et les grilles ci-dessous n'ont aucune largeur à occuper. Levée uniquement sous `dt-shell`, donc uniquement après login et uniquement au-delà de 1024 px. */ body.dt-shell { max-width: none; margin: 0; } /* La tab bar du bas est remplacée par la barre latérale. */ body.dt-shell .bottom-nav { display: none; } /* L'écran actif devient la zone de contenu, décalée de la barre latérale. `.screen` conserve son height:100vh / overflow-y:auto : le défilement reste interne à l'écran, la barre latérale ne défile pas avec lui. */ body.dt-shell .screen.active { margin-left: var(--dt-side-w); padding: 0 var(--sn-space-6) var(--sn-space-6); } body.dt-shell .screen.active > * { max-width: var(--dt-content-max); margin-left: auto; margin-right: auto; } /* En-têtes d'écran : plus d'air, alignés sur la colonne de contenu. */ body.dt-shell .screen-header, body.dt-shell .dash-header { padding-left: 0; padding-right: 0; } /* --- 2a. Cockpit du jour : grille en rangées (S1 SL-3) --- `#screen-dashboard` est repris dans le sélecteur parce que terrain.css pose `#screen-dashboard .dashboard-scroll { display: flex }` : un sélecteur d'ID que l'ordre de chargement ne suffit pas à battre. Organisation servie, de haut en bas : 1 bandeau de tête ............................... pleine largeur 2 levier du jour (réservé S2) | objectif du jour 3 brief du jour | indicateurs en ligne 4 alertes du jour | tâches du jour (réservé) 5 ruptures actives | PULSE 6 préparer une visite ............................ pleine largeur L'ordre est déclaré ICI, pas dans le HTML : le DOM reste dans l'ordre du mobile et seul le desktop réordonne, ce qui laisse la pile du téléphone rigoureusement intacte. S2 SL-0a — les rangées ne se partagent plus à parts égales : la référence visuelle donne 2/3 au levier, 2/3 aux indicateurs, 3/5 aux alertes. Douze colonnes permettent de servir ces trois proportions dans une seule grille (8+4, 4+8, 7+5), sans rien déplacer dans le HTML. */ body.dt-shell #screen-dashboard .dashboard-scroll { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--sn-space-5); align-items: start; } /* La grille KPI s'efface : ses deux enfants (carte CA, rangée d'indicateurs) rejoignent la grille du cockpit et peuvent donc occuper deux rangées distinctes — impossible tant qu'ils restaient enfermés dans un conteneur. */ body.dt-shell #screen-dashboard .dashboard-scroll > .tr-kpi-grid { display: contents; } /* S4 SL-2b — ORDRE DE LECTURE DE L'ÉCRAN. La rangée de tête réunit les deux blocs par lesquels le système AGIT : le levier du jour et PULSE. Ce qu'il MESURE vient ensuite, en rangée pleine largeur — la carte du chiffre d'affaires y a rejoint les autres indicateurs (elle est passée à l'intérieur de `.dt-kpi-row` dans le balisage, en tête, ce qui laisse l'ordre du téléphone inchangé). La rangée 4 réunit ce qui reste à traiter : ruptures et brief du jour. */ /* S7 SL-2b — ORDRE DES RANGÉES APRÈS LA SESSION. Le cadrage de la journée remonte : le brief n'est plus relégué en bas d'écran, il occupe une bande PLEINE LARGEUR juste sous la rangée de tête, avec l'objectif du jour et ce que l'équipe appelle comme décision. Le manager lit d'un regard ce qu'il doit faire aujourd'hui et combien il doit réaliser, avant de descendre sur les mesures. 1. levier du jour | PULSE 2. bandeau Brief du jour (pleine largeur) 3. indicateurs 4. alertes | actions du jour 5. ruptures actives (pleine largeur, le brief ayant quitté sa rangée) */ body.dt-shell #screen-dashboard .dashboard-scroll > .dash-header { order: 1; grid-column: 1 / -1; } body.dt-shell #screen-dashboard .dashboard-scroll > .simulation-dash-banner { order: 2; grid-column: 1 / -1; } /* Rangée 1 — levier du jour (7/12) | PULSE (5/12) */ body.dt-shell #screen-dashboard .dashboard-scroll > #dt-slot-principal { order: 3; grid-column: 1 / span 7; } body.dt-shell #screen-dashboard .dashboard-scroll > #dt-blk-pulse { order: 4; grid-column: 8 / span 5; } /* Rangée intermédiaire (S16) — POTENTIEL puis QUANTA, pleine largeur, entre la rangée de tête (levier | PULSE) et le brief. La paire « combien » (potentiel) → « et si » (QUANTA). CONSTAT S16 : #dt-blk-potentiel (S15) n'avait AUCUNE règle de grille -> order:0, il se rendait ~200px de large tout en haut, au-dessus du header (bug latent invisible au harnais isolé de S15). Corrigé ici. order:5 partagé avec le brief -> l'ordre du DOM (potentiel < quanta < brief) place la paire juste avant le brief ; équipe (order:6, 9/12) rejoint la rangée du brief comme avant. */ body.dt-shell #screen-dashboard .dashboard-scroll > #dt-blk-potentiel { order: 5; grid-column: 1 / -1; } body.dt-shell #screen-dashboard .dashboard-scroll > #dt-blk-quanta { order: 5; grid-column: 1 / -1; } /* S19 SL-2 — carte risque : même bande order:5, pleine largeur, DOM après QUANTA (avant le brief). */ body.dt-shell #screen-dashboard .dashboard-scroll > #dt-blk-risque { order: 5; grid-column: 1 / -1; } /* Rangée 2 — BANDEAU BRIEF DU JOUR, pleine largeur : brief | équipe. S8 SL-0c — la zone d'objectif a quitté le bandeau (décision du fondateur du 27/07/2026 : elle redisait le chiffre que porte déjà la carte d'indicateur du chiffre d'affaires). La mécanique de répartition éprouvée en S7 est conservée telle quelle, avec une zone de moins : `data-bandeau` porte l'état de la seule zone d'équipe, et app.js le pose au moment où il décide de l'afficher. Le bloc `#dt-blk-objectif` existe toujours dans le balisage — aucun identifiant n'est retiré — mais plus aucune règle ne lui réserve de colonne et plus rien ne lève son `display:none`. */ body.dt-shell #screen-dashboard .dashboard-scroll > #dt-blk-brief { order: 5; grid-column: 1 / span 8; } body.dt-shell #screen-dashboard .dashboard-scroll > #dt-blk-equipe-jour { order: 6; grid-column: 9 / span 4; } /* S20 SL-3 — événements du jour : bande pleine largeur APRÈS le brief et l'équipe du jour. order:7 (order:6 est déjà pris par #dt-blk-equipe-jour ; à égalité, l'ordre DOM déciderait et pousserait l'équipe). Règle de grille EXPLICITE obligatoire (PF-GRID-CHILD-NEEDS-ORDER-01, leçon S15/S16 : un enfant sans règle retombe en order:0 et remonte en tête du cockpit). */ body.dt-shell #screen-dashboard .dashboard-scroll > #dt-blk-evenements { order: 7; grid-column: 1 / -1; } /* équipe muette -> le brief occupe la bande entière */ body.dt-shell #screen-dashboard .dashboard-scroll[data-bandeau="0"] > #dt-blk-brief { grid-column: 1 / -1; } /* Rangée 3 — indicateurs, pleine largeur (la carte CA y figure) */ body.dt-shell #screen-dashboard .tr-kpi-grid > .dt-kpi-row { order: 8; grid-column: 1 / -1; } /* Rangée 4 — alertes (7/12) | actions du jour (5/12) */ body.dt-shell #screen-dashboard .dashboard-scroll > #dt-blk-alertes { order: 9; grid-column: 1 / span 7; } body.dt-shell #screen-dashboard .dashboard-scroll > #dt-slot-taches { order: 10; grid-column: 8 / span 5; } /* Rangée 5 — ruptures actives, pleine largeur */ body.dt-shell #screen-dashboard .dashboard-scroll > #dt-blk-stock { order: 11; grid-column: 1 / -1; } /* Action secondaire de bas de page : le bouton du kit est en largeur pleine (utile au pouce), ce qui n'a pas de sens sur 1100 px — on le borne. */ body.dt-shell #screen-dashboard .dashboard-scroll > .tr-visite-link { order: 12; grid-column: 1 / -1; justify-self: start; max-width: 22rem; } /* Emplacements réservés : rendus (et nommés) uniquement sur le poste de travail. */ body.dt-shell #screen-dashboard .dashboard-scroll > .dt-slot { display: flex; } /* Rangée d'indicateurs : une ligne tant que la largeur le permet, deux quand elle ne le permet plus — jamais une carte écrasée. S4 SL-2b — la rangée accueille désormais la carte du chiffre d'affaires, et le nombre de cartes VISIBLES varie (la satisfaction client se masque quand aucun avis n'est servi). Un gabarit à colonnes fixes laisserait alors une piste vide en fin de ligne ; une répartition souple remplit toujours la largeur, quel que soit ce nombre. La carte du chiffre d'affaires pèse double : elle porte un anneau en plus de sa valeur. */ body.dt-shell #screen-dashboard .dt-kpi-row { display: flex; flex-wrap: wrap; gap: var(--sn-space-3); align-items: stretch; } body.dt-shell #screen-dashboard .dt-kpi-row > .sn-card-kpi { flex: 1 1 8rem; min-width: 0; } body.dt-shell #screen-dashboard .dt-kpi-row > .tr-kpi--wide { flex: 2 1 16rem; } /* --- 2b. Écrans à panneaux (Équipe, Réglages) : deux colonnes --- */ body.dt-shell .screen-body { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sn-space-5); align-items: start; } /* Un panneau isolé ou un intertitre reste pleine largeur. */ body.dt-shell .screen-body > .team-disclaimer, body.dt-shell .screen-body > .checklist-label, body.dt-shell .screen-body > .tr-section-title { grid-column: 1 / -1; } /* Les listes rendues par le JS restent d'un seul tenant : ce sont des flux d'items, pas des panneaux comparables côte à côte. Cas Alertes : terrain.css pose déjà `#screen-alertes .screen-body { display: flex }`, dont la spécificité d'ID l'emporte sur la grille ci-dessus — l'écran garde donc sa colonne unique sans qu'on ait à l'exclure ici. Les enfants de Visite, eux, sont explicitement remis pleine largeur. */ body.dt-shell #visite-pdv-select, body.dt-shell #visite-brief-view { grid-column: 1 / -1; } /* --- 2c. Listes denses --- */ /* Le tap-target de 44 px n'a plus de raison d'être au pointeur fin : les lignes se resserrent, on en compare davantage d'un coup d'œil. */ body.dt-shell .sn-alert-item { min-height: 0; padding-top: var(--sn-space-2); padding-bottom: var(--sn-space-2); } /* Les panneaux de liste très longs plafonnent et défilent sur eux-mêmes, pour que la comparaison entre colonnes reste possible sans scroll géant. */ body.dt-shell .screen-body > .hud-panel { margin-bottom: 0; } /* --- 2d. Formulaire de feedback : colonne lisible, pas pleine largeur --- Sélecteur enfant direct pour passer devant `.screen.active > *` ci-dessus, qui sinon étirerait les champs sur toute la largeur utile. */ body.dt-shell .screen.active > .feedback-form { max-width: 46rem; } /* ---------------------------------------------------------------------- 3. SURFACE T1 — VENDEUR (vendeur.html / vendeur.js) G8 : la vue desktop sert EXACTEMENT les mêmes données que le mobile, en plus dense. Aucune donnée, aucun libellé métier ajouté ici. ---------------------------------------------------------------------- */ body.dt-shell .v-tabbar { display: none; } body.dt-shell .v-screen { max-width: none; margin: 0; margin-left: var(--dt-side-w); padding: var(--sn-space-6) var(--sn-space-6) var(--sn-space-6); } body.dt-shell .v-screen > * { max-width: var(--dt-content-max-v); margin-left: auto; margin-right: auto; } /* Accueil : Alertes et Directives côte à côte — c'est la comparaison que le vendeur fait de tête sur mobile en faisant défiler. */ body.dt-shell #v-tab-accueil.v-tab.active { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sn-space-4); align-items: start; } body.dt-shell #v-tab-accueil > .v-hero, body.dt-shell #v-tab-accueil > .v-thumb { grid-column: 1 / -1; } body.dt-shell #v-tab-accueil > .v-section { margin-bottom: 0; } /* Zone du pouce : sur desktop ce n'est plus une zone de pouce — les deux actions se rangent à gauche, à leur largeur naturelle. */ body.dt-shell .v-thumb { position: static; display: flex; flex-direction: row; gap: var(--sn-space-3); } body.dt-shell .v-thumb > .v-btn { flex: 0 0 auto; min-width: 14rem; } /* PULSE : le fil de conversation gagne en hauteur, la barre de saisie reste sous le fil et à la largeur de la colonne de lecture. */ body.dt-shell .tr-pulse__thread { min-height: 24rem; } body.dt-shell .v-pulse-bar { max-width: var(--dt-content-max-v); } /* Checklist / Moi : colonne de lecture confortable, pas pleine largeur. */ body.dt-shell #v-tab-checklist > .v-section, body.dt-shell #v-tab-moi > .v-section { max-width: 58rem; } /* ---------------------------------------------------------------------- 4. BANDEAU SUPÉRIEUR (S1 SL-2) Salutation et date à gauche, identité et déconnexion à droite. Rien de ce qui s'affiche ici n'est demandé au serveur : tout vient de la session déjà ouverte. La fonction de déconnexion est celle qui existait déjà — le bandeau lui donne enfin un point d'entrée visible. ---------------------------------------------------------------------- */ body.dt-shell #screen-dashboard .dash-header.sn-screen-header { align-items: center; margin: 0; padding: var(--sn-space-6) 0 var(--sn-space-4); } /* La colonne de gauche absorbe l'espace libre : le badge PDV et le bloc identité se rangent ensemble à droite, au lieu que le badge flotte au milieu. */ body.dt-shell #screen-dashboard .dash-header .tr-head__text { gap: var(--sn-space-1); flex: 1 1 auto; } body.dt-shell .dt-greeting { display: block; font-family: var(--sn-font-ui); font-size: var(--sn-fs-h1); font-weight: 700; color: var(--sn-ink-100); } /* Le nom du magasin passe au second plan : sur un poste de travail, ce qui ouvre l'écran est la personne et le jour, pas l'enseigne — qui reste affichée, et reste lue par le module vocal via son identifiant. */ body.dt-shell #screen-dashboard .dash-header .sn-screen-header__title { font-size: var(--sn-fs-base-cockpit); font-weight: 600; color: var(--sn-ink-60); } body.dt-shell .dt-ident { display: flex; align-items: center; gap: var(--sn-space-3); } body.dt-shell .dt-ident__meta { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; } body.dt-shell .dt-ident__name { font-size: var(--sn-fs-base-cockpit); font-weight: 600; color: var(--sn-ink-100); } /* Le rôle est affiché tel que le jeton le porte, en typographie d'étiquette : capitaliser mot à mot produirait un « Manager Pdv » qui trahit un identifiant technique, et toute reformulation supposerait un mapping de rôles que cette session n'a pas à décider. */ body.dt-shell .dt-ident__role { font-family: var(--sn-font-ui); font-size: var(--sn-fs-label); font-weight: 500; letter-spacing: var(--sn-ls-label); text-transform: uppercase; color: var(--sn-ink-60); } body.dt-shell .dt-ident__logout { padding: var(--sn-space-2) var(--sn-space-3); border: 1px solid var(--sn-separator); border-radius: var(--sn-radius-m); background-color: var(--sn-bg); color: var(--sn-ink-80); font-family: var(--sn-font-ui); font-size: var(--sn-fs-caption); font-weight: 600; cursor: pointer; transition: background-color var(--sn-dur-base) var(--sn-ease), color var(--sn-dur-base) var(--sn-ease); } body.dt-shell .dt-ident__logout:hover { background-color: var(--sn-violet-10); color: var(--sn-accent-ink); } body.dt-shell .dt-ident__logout:focus-visible { outline: 2px solid var(--sn-accent); outline-offset: 2px; } /* ------------------------------------------------------------------------ S6 SL-4 — PASTILLE DE PROFIL Entre l'identité et la déconnexion : l'ordre du bandeau — nom, rôle, pastille, déconnexion — est celui que le brief demande. Le fond et les initiales sont posés par le script (`applyInitialsAvatar`, couleur déterministe tirée de la palette du kit) ; la photo, quand elle existe, arrive en image de fond par la même fonction que l'écran Réglages. Aucune couleur littérale ici : la teinte vient du script, qui la prend dans la palette d'accents déjà en place depuis A-2. ------------------------------------------------------------------------ */ body.dt-shell .dt-avatar { flex: 0 0 auto; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--sn-font-ui); font-size: var(--sn-fs-caption); font-weight: 700; letter-spacing: 0.02em; color: var(--sn-bg); background-size: cover; background-position: center; background-repeat: no-repeat; cursor: pointer; overflow: hidden; } body.dt-shell .dt-avatar:focus-visible { outline: 2px solid var(--sn-accent); outline-offset: 2px; } /* Une pastille qui porte une photo n'a plus d'initiales à afficher : le fond de couleur laisserait un liseré derrière l'image si elle ne la couvrait pas entièrement. */ body.dt-shell .dt-avatar.has-photo { color: transparent; } /* ---------------------------------------------------------------------- 5. CARTES D'INDICATEUR NORMALISÉES (S1 SL-4) `data-forme` est posé par app.js d'après la donnée reçue — présence d'un objectif exploitable ou non. Le CSS n'habille que cette décision ; il ne la prend jamais, sans quoi la forme dépendrait à nouveau d'une liste d'indicateurs écrite en dur. ---------------------------------------------------------------------- */ /* Anneau construit à la volée pour une carte qui n'en portait pas : valeur à gauche, anneau à droite. La carte CA garde sa composition propre — la règle ne vise que les anneaux créés par le script (`.dt-gauge-auto`). S4 SL-3 — même habillage pour l'anneau de POSITION sur une échelle bornée (`data-forme="echelle"`, une note sur 20) et pour une carte qui porte en plus une variation : la forme du bloc dépend de la présence de l'anneau, pas de la raison pour laquelle il est là. */ /* S6 SL-2 — `reference` rejoint la liste : un anneau de POSITION sur une référence mesurée s'habille comme les autres. La forme du bloc dépend de la présence de l'anneau, jamais de la raison pour laquelle il est là. */ body.dt-shell #screen-dashboard .sn-card-kpi[data-forme="anneau"]:has(> .dt-gauge-auto), body.dt-shell #screen-dashboard .sn-card-kpi[data-forme="echelle"]:has(> .dt-gauge-auto), body.dt-shell #screen-dashboard .sn-card-kpi[data-forme="reference"]:has(> .dt-gauge-auto), body.dt-shell #screen-dashboard .sn-card-kpi[data-forme="variation"]:has(> .dt-gauge-auto) { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: var(--sn-space-3); } body.dt-shell #screen-dashboard .sn-card-kpi[data-forme="anneau"] > .dt-gauge-auto, body.dt-shell #screen-dashboard .sn-card-kpi[data-forme="echelle"] > .dt-gauge-auto, body.dt-shell #screen-dashboard .sn-card-kpi[data-forme="reference"] > .dt-gauge-auto, body.dt-shell #screen-dashboard .sn-card-kpi[data-forme="variation"] > .dt-gauge-auto { grid-column: 2; grid-row: 1 / -1; --sn-gauge-size: 56px; --sn-gauge-thickness: 7px; } /* Variation servie sans objectif : la couleur d'état vient du kit (`sn-card-kpi__delta--up|down`), jamais d'une valeur littérale. */ body.dt-shell #screen-dashboard .dt-delta-auto { grid-column: 1; } /* Courbe de tendance — tracée uniquement quand une série réelle est servie. Trait d'encre neutre : la courbe montre une forme, elle n'encode aucun état, donc elle ne prend aucune des couleurs qui en portent un. */ body.dt-shell .dt-spark { display: block; width: 100%; height: 24px; margin-top: var(--sn-space-1); } body.dt-shell .dt-spark svg { display: block; width: 100%; height: 100%; } body.dt-shell .dt-spark polyline { fill: none; stroke: var(--sn-ink-40); stroke-width: 1.5; vector-effect: non-scaling-stroke; } /* Densité de la rangée d'indicateurs : la valeur reste dominante, la carte se resserre pour que quatre indicateurs tiennent sur une ligne. */ body.dt-shell #screen-dashboard .dt-kpi-row .sn-card-kpi { padding: var(--sn-space-3); gap: var(--sn-space-1); } /* La valeur ne se coupe jamais : « 16,4 / 20 » réparti sur deux lignes se lit comme deux nombres au lieu d'un rapport. */ body.dt-shell #screen-dashboard .dt-kpi-row .sn-card-kpi__value { font-size: var(--sn-fs-h2); white-space: nowrap; } /* Tous les nombres en chasse fixe, y compris ceux noyés dans les lignes de contexte : c'est ce qui aligne les colonnes de chiffres d'une carte à l'autre. */ body.dt-shell #screen-dashboard .sn-card-kpi__trend, body.dt-shell #screen-dashboard .tr-state, body.dt-shell #screen-dashboard .sn-badge { font-variant-numeric: tabular-nums; } /* ---------------------------------------------------------------------- 6. DISCIPLINE CHROMATIQUE (S1 SL-5) Le violet est le seul accent de structure (élément actif, boutons, liens). Vert, orange et rouge n'apparaissent que pour dire un état. ---------------------------------------------------------------------- */ /* S3 SL-0e — les trois règles `body.dt-shell .sn-gauge.sn-gauge--ok|warn|crit` posées par S1 sont retirées (dette F7 du rapport S2) : le correctif SL-0b de S2 pose les mêmes déclarations dans `terrain.css` sur `.tr-gauge-ca`, sans condition de shell, donc pour toutes les largeurs. Une seule des trois n'était pas strictement redondante : `components.css` déclare `--warn` et `--crit` pour TOUT `.sn-gauge`, mais pas `--ok`. La règle unique posée plus bas (hors media query) comble exactement ce trou, pour toutes les largeurs cette fois — voir « ANNEAU : ÉTAT OK ». */ /* ---------------------------------------------------------------------- 7. EMPLACEMENTS RÉSERVÉS ET ÉTATS VIDES (S1 SL-1 / SL-3) Un emplacement nommé et visiblement en attente vaut mieux qu'une absence : le manager sait ce qui viendra là, et les sessions S2/S3 n'ont plus qu'à apporter du contenu. S2 — les deux emplacements portent désormais du contenu réel : la bordure pointillée de l'attente n'a plus lieu d'être et est retirée. ---------------------------------------------------------------------- */ /* ====================================================================== 8. S2 (26/07/2026) — MISE EN CONFORMITÉ ET BRANCHEMENTS ====================================================================== */ /* --- 8a. Hiérarchie typographique des intertitres (SL-0a) --- La référence pose des intertitres de section en capitales très espacées et appuyées, plus contrastés que le gris clair d'origine : ce sont eux qui découpent l'écran, ils doivent se voir avant les contenus. Desktop seul. */ body.dt-shell #screen-dashboard .tr-section-title { font-weight: 700; letter-spacing: 0.14em; color: var(--sn-ink-80); } /* --- 8b. LEVIER DU JOUR (SL-3) --- Seul bloc en fond sombre de l'écran. Sa fonction est d'attirer l'œil en premier : c'est la réponse à « par quoi je commence ». Le halo violet est un accent de structure, pas un état — aucune des trois couleurs d'état n'entre dans ce bloc. */ /* ------------------------------------------------------------------------ S6 SL-1 — LES DEUX BLOCS DE TÊTE COMMENCENT ET FINISSENT À LA MÊME HAUTEUR Constat de départ : le bloc PULSE portait son intertitre de section, le levier non (la règle ci-dessous le masquait, pour éviter que « Levier du jour » ne se lise deux fois de suite). Résultat : le cadre sombre du levier démarrait à la hauteur de l'intertitre de PULSE, soit un décalage visible de toute la hauteur d'un intertitre entre les deux cadres. Les deux blocs sont désormais traités SYMÉTRIQUEMENT — chacun porte son intertitre, dans la graisse et à la hauteur des autres sections de l'écran. Retirer celui de PULSE aurait aligné aussi, mais en créant une exception : toutes les autres sections de l'écran en portent un. La répétition mot pour mot est levée à la source : c'est le SURTITRE interne du bloc sombre qui s'efface, puisque les mêmes mots figurent désormais juste au-dessus. Son élément reste dans le balisage — aucun identifiant n'est retiré, `#dt-levier-eyebrow` compris. ------------------------------------------------------------------------ */ body.dt-shell #dt-slot-principal > .tr-section-title { display: block; } body.dt-shell #dt-levier > .dt-hero__eyebrow { display: flex; } /* Même hauteur de cadre, quel que soit le contenu du levier : les deux blocs s'étirent sur toute la rangée (la grille est en `align-items: start`, qui les laisserait chacun à sa hauteur propre), et leur cadre intérieur occupe tout l'espace que l'intertitre lui laisse. Le levier finit donc exactement où PULSE finit, que sa proposition tienne en deux lignes ou en six. */ body.dt-shell #screen-dashboard .dashboard-scroll > #dt-slot-principal, body.dt-shell #screen-dashboard .dashboard-scroll > #dt-blk-pulse { align-self: stretch; } body.dt-shell #dt-slot-principal > .dt-hero, body.dt-shell #dt-blk-pulse > .tr-pulse { flex: 1 1 auto; } /* S7 SL-1 — les trois zones du bandeau commencent et finissent à la même hauteur, par le même moyen que la rangée de tête (S6) : la grille est en `align-items: start`, qui les laisserait chacune à sa hauteur propre. */ body.dt-shell #screen-dashboard .dashboard-scroll > #dt-blk-brief, body.dt-shell #screen-dashboard .dashboard-scroll > #dt-blk-equipe-jour, body.dt-shell #screen-dashboard .dashboard-scroll > #dt-blk-objectif { align-self: stretch; } body.dt-shell #dt-blk-brief > .tr-brief, body.dt-shell #dt-blk-equipe-jour > .tr-panel, body.dt-shell #dt-blk-objectif > .tr-panel { flex: 1 1 auto; } body.dt-shell .dt-hero { position: relative; display: flex; flex-direction: column; gap: var(--sn-space-3); overflow: hidden; padding: var(--sn-space-5) var(--sn-space-5); border-radius: var(--sn-radius-l); background-color: var(--sn-ink-100); color: var(--sn-bg); } body.dt-shell .dt-hero::before { content: ""; position: absolute; top: -5.5rem; right: -5.5rem; width: 17rem; height: 17rem; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--sn-accent) 50%, transparent), color-mix(in srgb, var(--sn-accent) 0%, transparent) 70%); pointer-events: none; } body.dt-shell .dt-hero > * { position: relative; } body.dt-shell .dt-hero__eyebrow { display: flex; align-items: center; gap: var(--sn-space-2); font-family: var(--sn-font-ui); font-size: var(--sn-fs-label); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, var(--sn-accent) 45%, var(--sn-bg)); } body.dt-shell .dt-hero__body { display: flex; align-items: flex-start; gap: var(--sn-space-6); } body.dt-shell .dt-hero__titre { flex: 1; margin: 0; max-width: 46ch; font-family: var(--sn-font-ui); font-size: var(--sn-fs-h2); font-weight: 600; line-height: 1.45; color: var(--sn-bg); } /* Bloc impact : jamais affiché sans donnée servie (app.js). La réserve fait partie du bloc — un impact affiché sans réserve devient un engagement. */ body.dt-shell .dt-hero__impact { flex: none; text-align: right; } body.dt-shell .dt-hero__impact-val { font-family: var(--sn-font-mono); font-variant-numeric: tabular-nums; font-size: var(--sn-fs-h1); font-weight: 700; } body.dt-shell .dt-hero__impact-unit { font-size: var(--sn-fs-caption); font-weight: 600; color: color-mix(in srgb, var(--sn-accent) 45%, var(--sn-bg)); } body.dt-shell .dt-hero__est { margin-top: var(--sn-space-1); font-size: var(--sn-fs-label); color: color-mix(in srgb, var(--sn-bg) 55%, transparent); } body.dt-shell .dt-hero__detail { margin: 0; font-family: var(--sn-font-ui); font-size: var(--sn-fs-base-terrain); line-height: 1.5; color: color-mix(in srgb, var(--sn-bg) 78%, transparent); } body.dt-shell .dt-hero__meta { font-family: var(--sn-font-ui); font-size: var(--sn-fs-caption); font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--sn-bg) 55%, transparent); } /* --- 8c. BRIEF DU JOUR (SL-1) et bouton de transmission (SL-2) --- Le brief est le seul bloc porté sur fond d'accent clair : il vient de l'extérieur du magasin, il ne se confond pas avec les mesures du jour. */ body.dt-shell #screen-dashboard .tr-brief { background-color: var(--sn-violet-10); border-color: color-mix(in srgb, var(--sn-accent) 25%, var(--sn-bg)); } body.dt-shell .tr-brief__sections { display: flex; flex-direction: column; } body.dt-shell .tr-brief__sec + .tr-brief__sec { margin-top: var(--sn-space-4); padding-top: var(--sn-space-4); border-top: 1px solid color-mix(in srgb, var(--sn-accent) 22%, var(--sn-bg)); } body.dt-shell .tr-brief__sec-title { margin-bottom: var(--sn-space-1); font-family: var(--sn-font-ui); font-size: var(--sn-fs-label); font-weight: 700; letter-spacing: var(--sn-ls-label); text-transform: uppercase; color: var(--sn-accent-ink); } body.dt-shell .tr-brief__sec-text, body.dt-shell .tr-brief__sec-action, body.dt-shell .tr-brief__sec-impact { margin: 0; font-family: var(--sn-font-ui); font-size: var(--sn-fs-base-terrain); line-height: 1.5; color: var(--sn-ink-80); } body.dt-shell .tr-brief__sec-action { margin-top: var(--sn-space-1); font-weight: 600; color: var(--sn-ink-100); } body.dt-shell .tr-brief__sec-impact { margin-top: var(--sn-space-1); font-size: var(--sn-fs-caption); color: var(--sn-ink-60); } body.dt-shell .dt-fwd { margin-top: var(--sn-space-4); } body.dt-shell .dt-fwd__btn { width: 100%; justify-content: center; } body.dt-shell .dt-fwd__note, body.dt-shell .dt-fwd__state { margin-top: var(--sn-space-2); font-family: var(--sn-font-ui); font-size: var(--sn-fs-label); line-height: 1.4; text-align: center; color: var(--sn-ink-60); } body.dt-shell .dt-fwd__state:empty { display: none; } /* --- 8c-bis. BRIEF — RETOUR PAR POINT (S17) --- Chaque point du brief devient une carte jugeable : deux verdicts exclusifs (✓ vu / ✗ pas pertinent) et un commentaire libre. Styles desktop uniquement (comme le reste du brief) ; dormant en prod tant qu'aucun brief du jour n'est servi. */ body.dt-shell .tr-brief__date { margin-bottom: var(--sn-space-3); font-family: var(--sn-font-ui); font-size: var(--sn-fs-caption); font-variant-numeric: tabular-nums; color: var(--sn-ink-60); } body.dt-shell .tr-brief__ouverture { margin: 0 0 var(--sn-space-4); font-family: var(--sn-font-ui); font-size: var(--sn-fs-base-terrain); line-height: 1.5; color: var(--sn-ink-80); } body.dt-shell .tr-brief__point + .tr-brief__point, body.dt-shell .tr-brief__ouverture + .tr-brief__point { margin-top: var(--sn-space-4); padding-top: var(--sn-space-4); border-top: 1px solid color-mix(in srgb, var(--sn-accent) 22%, var(--sn-bg)); } body.dt-shell .tr-brief__point .tr-brief__sec-title { margin-bottom: var(--sn-space-1); } body.dt-shell .tr-brief__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sn-space-2); margin-top: var(--sn-space-3); } body.dt-shell .tr-brief__verdicts { display: inline-flex; gap: var(--sn-space-2); } body.dt-shell .tr-brief__verdict { display: inline-flex; align-items: center; gap: var(--sn-space-1); padding: var(--sn-space-1) var(--sn-space-3); font: inherit; font-family: var(--sn-font-ui); font-size: var(--sn-fs-label); font-weight: 600; color: var(--sn-ink-80); background-color: var(--sn-bg); border: 1px solid color-mix(in srgb, var(--sn-accent) 30%, var(--sn-bg)); border-radius: var(--sn-radius-pill); cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; } body.dt-shell .tr-brief__verdict:hover:not(:disabled) { border-color: var(--sn-accent); color: var(--sn-accent-ink); } body.dt-shell .tr-brief__verdict--active { color: var(--sn-bg); background-color: var(--sn-accent); border-color: var(--sn-accent); } body.dt-shell .tr-brief__verdict:disabled { opacity: .55; cursor: default; } body.dt-shell .tr-brief__verdict-icone { font-weight: 700; } body.dt-shell .tr-brief__comment-toggle { padding: var(--sn-space-1) var(--sn-space-2); font: inherit; font-family: var(--sn-font-ui); font-size: var(--sn-fs-label); color: var(--sn-accent-ink); background: none; border: none; text-decoration: underline; cursor: pointer; } body.dt-shell .tr-brief__comment-input { flex: 1 1 100%; margin-top: var(--sn-space-2); padding: var(--sn-space-2) var(--sn-space-3); font-family: var(--sn-font-ui); font-size: var(--sn-fs-base-terrain); color: var(--sn-ink-100); background-color: var(--sn-bg); border: 1px solid color-mix(in srgb, var(--sn-accent) 30%, var(--sn-bg)); border-radius: var(--sn-radius-m); } body.dt-shell .tr-brief__comment-input[hidden] { display: none; } body.dt-shell .tr-brief__actions--busy { opacity: .7; } body.dt-shell .tr-brief__reco { display: flex; flex-direction: column; gap: var(--sn-space-1); margin-top: var(--sn-space-4); padding: var(--sn-space-3); background-color: color-mix(in srgb, var(--sn-accent) 8%, var(--sn-bg)); border-radius: var(--sn-radius-m); } body.dt-shell .tr-brief__reco-label { font-family: var(--sn-font-ui); font-size: var(--sn-fs-label); font-weight: 700; letter-spacing: var(--sn-ls-label); text-transform: uppercase; color: var(--sn-accent-ink); } body.dt-shell .tr-brief__reco-text { font-family: var(--sn-font-ui); font-size: var(--sn-fs-base-terrain); line-height: 1.5; color: var(--sn-ink-80); } /* --- 8d. ACTIONS DU JOUR (SL-5) --- Les terminées ne disparaissent pas : elles se replient sous une ligne qui porte leur nombre — la trace de ce qui a été fait dans la journée. */ body.dt-shell .dt-taches { padding: var(--sn-space-4) var(--sn-space-4) var(--sn-space-3); } body.dt-shell .dt-taches .checklist-item { cursor: pointer; } body.dt-shell .dt-taches__done { margin-top: var(--sn-space-2); } body.dt-shell .dt-taches__done-head { display: flex; justify-content: space-between; padding: var(--sn-space-3) 0 var(--sn-space-1); border-top: 1px solid var(--sn-separator); font-family: var(--sn-font-ui); font-size: var(--sn-fs-caption); font-weight: 600; color: var(--sn-ink-60); cursor: pointer; list-style: none; } body.dt-shell .dt-taches__done-head::-webkit-details-marker { display: none; } body.dt-shell .dt-taches__done-head:focus-visible { outline: 2px solid var(--sn-accent); outline-offset: 2px; } body.dt-shell .dt-taches__done-n { font-family: var(--sn-font-mono); font-variant-numeric: tabular-nums; color: var(--sn-ok); } body.dt-shell .dt-taches__foot { margin-top: var(--sn-space-3); } } /* -------------------------------------------------------------------------- S2 SL-0a — entre 1024 et 1280 px, la rangée n'a pas la largeur de quatre cartes : deux par ligne se lisent mieux qu'une rangée de trois suivie d'un orphelin. S4 SL-2b — exprimé en largeur de base plutôt qu'en nombre de colonnes, depuis que la rangée est une répartition souple : une carte esseulée en fin de ligne s'étire au lieu de rester sur une demi-largeur. Borne basse 1024 px : le téléphone est hors de portée de cette règle. -------------------------------------------------------------------------- */ @media (min-width: 1024px) and (max-width: 1279px) { body.dt-shell #screen-dashboard .dt-kpi-row > .sn-card-kpi { flex: 1 1 12rem; } body.dt-shell #screen-dashboard .dt-kpi-row > .tr-kpi--wide { flex: 1 1 100%; } } /* -------------------------------------------------------------------------- ÉTATS VIDES NOMMÉS — classe `dt-empty`, propre à cette couche. Hors media query parce que les écrans Stock et Merchandising la portent quelle que soit la largeur ; elle n'existe nulle part ailleurs, donc elle ne peut rien changer à ce qui existait. -------------------------------------------------------------------------- */ .dt-empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sn-space-3); padding: var(--sn-space-5); } .dt-empty__title { font-family: var(--sn-font-ui); font-size: var(--sn-fs-h2); font-weight: 700; color: var(--sn-ink-100); } .dt-empty__text { margin: 0; font-family: var(--sn-font-ui); font-size: var(--sn-fs-base-terrain); color: var(--sn-ink-60); } /* La courbe de tendance n'est tracée que sur le poste de travail : sous 1024 px la carte garde exactement la composition qu'elle avait. */ .dt-spark { display: none; } /* -------------------------------------------------------------------------- S2 SL-6 — DESTINATAIRE DU FEEDBACK. Hors media query, comme `.dt-empty` ci-dessus, parce que le manager doit savoir où part son retour quel que soit son appareil. `.feedback-dest` n'existe nulle part ailleurs dans le produit : la déclarer ici ne peut rien changer à ce qui existait. C'est la seule addition de cette session visible sous 1024 px en dehors de la couleur d'anneau (cf. rapport S2). -------------------------------------------------------------------------- */ .feedback-dest { display: flex; flex-direction: column; gap: var(--sn-space-1); margin-bottom: var(--sn-space-3); padding: var(--sn-space-3); border: 1px solid var(--sn-separator); border-radius: var(--sn-radius-m); background-color: var(--sn-surface); } .feedback-dest__label { font-family: var(--sn-font-ui); font-size: var(--sn-fs-label); font-weight: 700; letter-spacing: var(--sn-ls-label); text-transform: uppercase; color: var(--sn-ink-60); } .feedback-dest__text { font-family: var(--sn-font-ui); font-size: var(--sn-fs-caption); line-height: 1.45; color: var(--sn-ink-80); } /* ========================================================================== S3 — COUCHE DE SESSION Toutes les classes introduites ici sont NOUVELLES : aucune n'est portée par un élément préexistant, donc aucune règle ci-dessous ne peut changer ce qui était rendu avant la session. Zéro couleur littérale : uniquement des tokens. ========================================================================== */ /* -------------------------------------------------------------------------- ANNEAU : ÉTAT OK (S3 SL-0e) `components.css` déclare `--warn` et `--crit` pour tout `.sn-gauge`, mais pas `--ok` : sans cette règle, un anneau AUTRE que celui du CA passé en « objectif atteint » retomberait sur l'accent violet — une couleur qui n'encode rien. Hors media query, comme le correctif S2 : un état se lit à toutes les largeurs. Aucun effet visible aujourd'hui (le seul anneau rendu est `.tr-gauge-ca`, que `terrain.css` colore avec une spécificité supérieure). -------------------------------------------------------------------------- */ .sn-gauge--ok { --sn-gauge-color: var(--sn-ok); } /* -------------------------------------------------------------------------- S3 SL-2 — ÉCRAN ALERTES : ICÔNE, SÉVÉRITÉ, HORODATAGE Hors media query : la sévérité d'une alerte doit se lire de la même façon sur le téléphone et sur le poste de travail. C'est le seul écart mobile assumé de la session, et il porte uniquement l'écran Alertes — le Cockpit est intact. -------------------------------------------------------------------------- */ #screen-alertes .tr-alert .sn-alert-item { gap: var(--sn-space-3); } .tr-alert__ico { width: 1.875rem; height: 1.875rem; flex: none; display: flex; align-items: center; justify-content: center; border-radius: var(--sn-radius-m); } .tr-alert__ico svg { width: 0.9375rem; height: 0.9375rem; } .tr-alert__ico--crit { background-color: var(--sn-crit-10); color: var(--sn-crit); } .tr-alert__ico--warn { background-color: var(--sn-warn-10); color: var(--sn-warn); } .tr-alert__ico--info { background-color: var(--sn-surface); color: var(--sn-ink-40); } /* Filet de sévérité à gauche : `--crit` et `--warn` existent déjà au kit ; le niveau « pour information » n'en avait aucun, donc une alerte de ce niveau ne portait AUCUNE marque de niveau. */ .sn-alert-item--info { border-left-color: var(--sn-ink-20); } .tr-alert__meta { display: flex; align-items: center; gap: var(--sn-space-2); margin-bottom: var(--sn-space-1); flex-wrap: wrap; } .tr-alert__dom { font-family: var(--sn-font-ui); font-size: var(--sn-fs-label); font-weight: 700; letter-spacing: var(--sn-ls-label); text-transform: uppercase; color: var(--sn-ink-60); background-color: var(--sn-surface); border: 1px solid var(--sn-separator); border-radius: var(--sn-radius-s); padding: 0.125rem 0.5rem; } .tr-alert__time { margin-left: auto; font-family: var(--sn-font-mono); font-size: var(--sn-fs-caption); color: var(--sn-ink-40); font-variant-numeric: tabular-nums; } .tr-alert__sev--info { background-color: var(--sn-surface); color: var(--sn-ink-60); } @media (min-width: 1024px) { /* ------------------------------------------------------------------------ S3 SL-0b — CARTE SATISFACTION CLIENT `.dt-slot` la masque partout par défaut (règle S1) ; elle n'apparaît donc que sur le poste de travail, et app.js la masque de nouveau s'il n'y a aucun avis sur la période. ------------------------------------------------------------------------ */ body.dt-shell #screen-dashboard .dt-kpi-row > .dt-slot { display: flex; } /* ------------------------------------------------------------------------ S3 SL-2 — L'écran Alertes occupe sa colonne. Constat au poste de travail avant la session : la liste est une pile flex dont les items se réduisaient à leur contenu — les cartes mesuraient 2 px de large, l'écran était illisible au-delà de 1024 px. Elles prennent désormais la largeur de la colonne, comme la référence visuelle les pose. Dans la media query : le téléphone n'est pas concerné. ------------------------------------------------------------------------ */ body.dt-shell #screen-alertes .screen-body { align-items: stretch; } body.dt-shell #screen-alertes .tr-alert { width: 100%; } /* ------------------------------------------------------------------------ S3 SL-1 — PANNEAUX ÉQUIPE ------------------------------------------------------------------------ */ body.dt-shell #screen-team .screen-body > .dt-slot { display: block; } /* ------------------------------------------------------------------------ S13 SL-0a — UNE SEULE RÈGLE DE GOUTTIÈRE, PORTÉE PAR LE CONTENEUR. Troisième signalement du fondateur sur le même défaut : les noms de collaborateurs touchaient le bord gauche, l'axe des montants le bord droit, la première colonne du tableau des sept jours et sa légende les deux. Relevé d'ouverture, à 1440 px : quatre blocs sur cinq à 0 px de chaque côté — c'était l'écran entier, pas deux blocs. La cause : seule l'en-tête `.tr-panel__head` portait un retrait ; tout ce qui vient après était posé à même le cadre du panneau. Deux corrections ponctuelles ont déjà été jugées faites sans l'être. La gouttière est donc portée par le CONTENEUR : tout enfant direct d'un panneau la reçoit, y compris un contenu ajouté plus tard, qui ne peut donc pas la contourner. Le relevé chiffré est au rapport. ------------------------------------------------------------------------ */ body.dt-shell #screen-team { --tr-blk-gouttiere: var(--sn-space-4); } body.dt-shell #screen-team .tr-panel > * { padding-inline: var(--tr-blk-gouttiere); } /* L'en-tête portait déjà EXACTEMENT cette valeur : la règle ci-dessus ne la change pas d'un pixel, et son filet de séparation continue de traverser le panneau d'un bord à l'autre — un séparateur n'est pas du contenu. */ /* Les listes de rangées sont pleine largeur PAR DESSEIN : le filet qui sépare deux rangées traverse le panneau. Elles ne reçoivent donc pas la gouttière — leurs rangées la portent elles-mêmes, AU MÊME JETON, de sorte qu'il n'existe qu'une valeur à changer pour tout l'écran. */ body.dt-shell #screen-team .tr-panel > .dt-rangees { padding-inline: 0; } body.dt-shell #screen-team .dt-presence, body.dt-shell #screen-team .dt-absence, body.dt-shell #screen-team .dt-signalement { padding-inline: var(--tr-blk-gouttiere); } /* Un encadré — un enfant qui porte SON PROPRE filet — prend la gouttière en MARGE et non en retrait : posée en retrait, elle laisserait son filet toucher le cadre du panneau, c'est-à-dire précisément le défaut corrigé. Son retrait intérieur, lui, ne change pas. */ body.dt-shell #screen-team .tr-panel > .tr-planreco { padding-inline: var(--sn-space-3); margin-inline: var(--tr-blk-gouttiere); } /* S13 SL-0a — LE TABLEAU DES SEPT JOURS DÉBORDAIT SOUS 1280 px. Relevé à 1024 px avant correction : la dernière colonne dépassait le cadre du panneau de 123,4 px. Le panneau est en `overflow: hidden` — le tableau n'était donc pas seulement hors gouttière, il était COUPÉ : les journées de fin de semaine disparaissaient, sans que rien ne le dise. Huit colonnes de créneaux insécables ne tiennent pas dans une demi-largeur, et les serrer les rendrait illisibles. Il défile désormais dans SA PROPRE zone, à l'intérieur de la gouttière : le contenu reste atteignable, et rien ne peint au-delà du cadre. LA GOUTTIÈRE D'UNE ZONE QUI DÉFILE SE POSE EN MARGE, comme pour un encadré. Posée en retrait, elle ne tient pas : le contenu d'une zone à débordement est rogné au bord de sa BOÎTE DE REMPLISSAGE, et défile donc PAR-DESSOUS le retrait droit — mesuré à 0 px sur ce bloc avant correction, alors que le retrait était bien déclaré. */ body.dt-shell #screen-team .tr-panel > .dt-defile { overflow-x: auto; padding-inline: 0; margin-inline: var(--tr-blk-gouttiere); } /* S14 — LA RÉSERVE DE MESURE EST UN ENCADRÉ : elle porte son propre filet, elle prend donc la gouttière en MARGE et non en retrait, exactement comme `.tr-planreco`. Posée en retrait, son filet toucherait le cadre du panneau — le défaut corrigé en S13. */ body.dt-shell #screen-team .tr-panel > .tr-reserve { padding: var(--sn-space-3); margin-inline: var(--tr-blk-gouttiere); } /* ------------------------------------------------------------------------ S12 SL-1a / SL-3 — DEUX BLOCS QUI NE TIENNENT PAS DANS UNE COLONNE. La couverture porte une barre par collaborateur sur toute l'amplitude d'ouverture, et les sept jours portent une colonne par journée : enfermés dans une demi-largeur, les créneaux se tassent et le tableau se coupe. Ils prennent la largeur utile entière, comme les intertitres au-dessus d'eux. ------------------------------------------------------------------------ */ body.dt-shell #screen-team .screen-body > #dt-blk-couverture, body.dt-shell #screen-team .screen-body > #dt-blk-septjours { grid-column: 1 / -1; } body.dt-shell .tr-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sn-space-3); padding: var(--sn-space-4) var(--sn-space-4) var(--sn-space-2); border-bottom: 1px solid var(--sn-separator); } body.dt-shell .tr-panel__title { font-family: var(--sn-font-ui); font-size: var(--sn-fs-label); font-weight: 700; letter-spacing: var(--sn-ls-label); text-transform: uppercase; color: var(--sn-ink-80); margin: 0; } body.dt-shell .tr-panel__meta { font-family: var(--sn-font-mono); font-size: var(--sn-fs-caption); color: var(--sn-ink-60); font-variant-numeric: tabular-nums; } body.dt-shell .dt-presence { display: flex; align-items: center; justify-content: space-between; gap: var(--sn-space-3); padding: var(--sn-space-3) var(--sn-space-4); } /* S18 SL-1/SL-2 — la carte d'absence passe en COLONNE : rangée haute (identité + geste de validation), rangée basse (pastille de couverture CASTOR). `.dt-presence` reste en ligne. */ body.dt-shell .dt-absence { display: flex; flex-direction: column; align-items: stretch; gap: var(--sn-space-2); padding: var(--sn-space-3) var(--sn-space-4); } body.dt-shell .dt-absence__haut { display: flex; align-items: center; justify-content: space-between; gap: var(--sn-space-3); } body.dt-shell .dt-absence__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sn-space-2); flex: none; } body.dt-shell .dt-presence + .dt-presence, body.dt-shell .dt-absence + .dt-absence { border-top: 1px solid var(--sn-separator); } body.dt-shell .dt-presence__id, body.dt-shell .dt-absence__id { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; } body.dt-shell .dt-presence__nom, body.dt-shell .dt-absence__nom { font-family: var(--sn-font-ui); font-size: var(--sn-fs-body); font-weight: 600; color: var(--sn-ink-100); } body.dt-shell .dt-presence__role, body.dt-shell .dt-absence__meta { font-family: var(--sn-font-ui); font-size: var(--sn-fs-caption); color: var(--sn-ink-60); } body.dt-shell .dt-presence__creneau { display: flex; flex-direction: column; align-items: flex-end; gap: 0.125rem; flex: none; } body.dt-shell .dt-presence__heures { font-family: var(--sn-font-mono); font-size: var(--sn-fs-body); font-weight: 700; color: var(--sn-ink-100); font-variant-numeric: tabular-nums; white-space: nowrap; } body.dt-shell .dt-presence__type { font-family: var(--sn-font-ui); font-size: var(--sn-fs-label); letter-spacing: var(--sn-ls-label); text-transform: uppercase; color: var(--sn-ink-60); } /* « Non planifié » n'est pas une alerte : ton neutre, jamais rouge. */ body.dt-shell .dt-presence__creneau--vide { font-family: var(--sn-font-ui); font-size: var(--sn-fs-caption); color: var(--sn-ink-40); white-space: nowrap; } body.dt-shell .dt-absence__etat { font-family: var(--sn-font-ui); font-size: var(--sn-fs-caption); color: var(--sn-ink-60); flex: none; } body.dt-shell .dt-absence__btn { flex: none; } /* S18 SL-1 — deux verdicts : valider (vert) / refuser (rouge). Boutons cerclés, lisibles sur les deux thèmes ; la couleur porte le sens, le fond ne fait que l'appuyer. */ body.dt-shell .dt-absence__btn--valider { color: var(--sn-color-action-accept); border-color: color-mix(in srgb, #27AE60 55%, transparent); background: color-mix(in srgb, #27AE60 12%, transparent); } body.dt-shell .dt-absence__btn--refuser { color: var(--sn-color-action-reject); border-color: color-mix(in srgb, #C0392B 55%, transparent); background: color-mix(in srgb, #C0392B 10%, transparent); } /* Une absence déjà validée : ton discret, jamais une alerte. */ body.dt-shell .dt-absence__etat--validee { font-style: italic; color: var(--sn-ink-40); } /* S19 SL-0-3 — une absence REFUSÉE : rouge discret, italique ; décidée, jamais reproposée. */ body.dt-shell .dt-absence__etat--refusee { font-style: italic; color: #C0392B; } /* S18 SL-2 — LA SOLUTION DE COUVERTURE CASTOR : une pastille, cinq couleurs (une par solution). La couleur est sur la pastille, jamais seule porteuse du sens — le mot l'accompagne toujours. */ body.dt-shell .tr-castor-couv { display: inline-flex; align-items: center; gap: var(--sn-space-2); font-family: var(--sn-font-ui); font-size: var(--sn-fs-caption); color: var(--sn-ink-60); } body.dt-shell .tr-castor-couv__dot { inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; flex: none; background: var(--sn-ink-40); } body.dt-shell .tr-castor-couv--couverture_suffisante .tr-castor-couv__dot { background: #27AE60; } /* vert */ body.dt-shell .tr-castor-couv--interne .tr-castor-couv__dot { background: #3B7DD8; } /* azur */ body.dt-shell .tr-castor-couv--cross_pdv .tr-castor-couv__dot { background: #6C5CE7; } /* violet */ body.dt-shell .tr-castor-couv--interim .tr-castor-couv__dot { background: #F5A623; } /* ambre */ body.dt-shell .tr-castor-couv--non_couvert .tr-castor-couv__dot { background: #C0392B; } /* rouge */ /* ------------------------------------------------------------------------ S18 SL-3 — BOURSE DE COUVERTURE (consultation seule). Liste de créneaux ouverts cross-PDV de la zone (route réelle `bourse_list`). Pleine largeur, comme la couverture et les sept jours ; masquée quand vide (côté JS). ------------------------------------------------------------------------ */ body.dt-shell #screen-team .screen-body > #dt-blk-bourse { grid-column: 1 / -1; } body.dt-shell #screen-team .dt-bourse { padding-inline: var(--tr-blk-gouttiere); } body.dt-shell .dt-bourse { display: flex; align-items: center; justify-content: space-between; gap: var(--sn-space-3); padding: var(--sn-space-3) var(--sn-space-4); } body.dt-shell .dt-bourse + .dt-bourse { border-top: 1px solid var(--sn-separator); } body.dt-shell .dt-bourse__id { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; } body.dt-shell .dt-bourse__nom { font-family: var(--sn-font-ui); font-size: var(--sn-fs-body); font-weight: 600; color: var(--sn-ink-100); } body.dt-shell .dt-bourse__meta { font-family: var(--sn-font-ui); font-size: var(--sn-fs-caption); color: var(--sn-ink-60); } body.dt-shell .dt-bourse__marque { align-self: flex-start; margin-top: 0.125rem; font-family: var(--sn-font-ui); font-size: var(--sn-fs-label); letter-spacing: var(--sn-ls-label); text-transform: uppercase; color: var(--sn-ink-60); } body.dt-shell .dt-bourse__marque--cross { color: #6C5CE7; } body.dt-shell .dt-bourse__euro { font-family: var(--sn-font-mono); font-size: var(--sn-fs-caption); color: var(--sn-ink-60); font-variant-numeric: tabular-nums; flex: none; white-space: nowrap; } /* ------------------------------------------------------------------------ S19 SL-0-2 — TRANSFERTS CROSS-PDV EN COURS (sous la bourse). Une carte par transfert : identité + statut en français ; le geste (valider / refuser) n'apparaît que sur un `pending` dont je suis le prêteur. Même grammaire visuelle que la bourse et les absences (bouton vert / rouge cerclé). ------------------------------------------------------------------------ */ body.dt-shell .dt-transferts__head { margin: var(--sn-space-4) 0 0; padding-inline: var(--tr-blk-gouttiere); font-family: var(--sn-font-ui); font-size: var(--sn-fs-label); letter-spacing: var(--sn-ls-label); text-transform: uppercase; color: var(--sn-ink-40); } body.dt-shell #screen-team .dt-transfert { padding-inline: var(--tr-blk-gouttiere); } body.dt-shell .dt-transfert { display: flex; align-items: center; justify-content: space-between; gap: var(--sn-space-3); padding: var(--sn-space-3) var(--sn-space-4); } body.dt-shell .dt-transfert + .dt-transfert { border-top: 1px solid var(--sn-separator); } body.dt-shell .dt-transfert__id { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; } body.dt-shell .dt-transfert__nom { font-family: var(--sn-font-ui); font-size: var(--sn-fs-body); font-weight: 600; color: var(--sn-ink-100); } body.dt-shell .dt-transfert__meta { font-family: var(--sn-font-ui); font-size: var(--sn-fs-caption); color: var(--sn-ink-60); } body.dt-shell .dt-transfert__statut { align-self: flex-start; margin-top: 0.125rem; font-family: var(--sn-font-ui); font-size: var(--sn-fs-caption); color: var(--sn-ink-60); } /* La couleur porte un état, jamais seule : le mot l'accompagne toujours. */ body.dt-shell .dt-transfert__statut--pending { color: var(--sn-color-action-pending); font-weight: 600; } /* geste attendu */ body.dt-shell .dt-transfert__statut--accepte_collaborateur { color: var(--sn-color-action-accept); font-weight: 600; } /* confirmé */ body.dt-shell .dt-transfert__statut--refuse, body.dt-shell .dt-transfert__statut--expire, body.dt-shell .dt-transfert__statut--annule { color: var(--sn-ink-40); font-style: italic; } /* clos */ body.dt-shell .dt-transfert__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sn-space-2); flex: none; } body.dt-shell .dt-transfert__btn { flex: none; } body.dt-shell .dt-transfert__btn--valider { color: var(--sn-color-action-accept); border-color: color-mix(in srgb, #27AE60 55%, transparent); background: color-mix(in srgb, #27AE60 12%, transparent); } body.dt-shell .dt-transfert__btn--refuser { color: var(--sn-color-action-reject); border-color: color-mix(in srgb, #C0392B 55%, transparent); background: color-mix(in srgb, #C0392B 10%, transparent); } body.dt-shell .dt-signalement { padding: var(--sn-space-3) var(--sn-space-4); } body.dt-shell .dt-signalement + .dt-signalement { border-top: 1px solid var(--sn-separator); } body.dt-shell .dt-signalement__texte { font-family: var(--sn-font-ui); font-size: var(--sn-fs-body); line-height: 1.45; color: var(--sn-ink-80); } body.dt-shell .dt-signalement__meta { margin-top: var(--sn-space-1); font-family: var(--sn-font-ui); font-size: var(--sn-fs-caption); color: var(--sn-ink-60); } } /* -------------------------------------------------------------------------- S3 SL-0b — entre 1024 et 1280 px la dernière carte de la rangée d'indicateurs ne doit pas rester orpheline sur une demi-largeur : une carte pleine se lit, une carte orpheline non. S4 SL-2b — la répartition souple obtient ce résultat d'elle-même (la dernière carte d'une ligne incomplète s'étire), et pour toute quantité de cartes visibles, alors que la règle précédente ne visait que la dernière du DOM — laquelle est la satisfaction client, masquée dès qu'aucun avis n'est servi. La règle est donc portée par le gabarit ci-dessus plutôt que par un sélecteur de position. -------------------------------------------------------------------------- */ /* ========================================================================== S4 — CORRECTIFS D'INTERFACE MANAGER Hors media query : ce qui doit se lire de la même façon sur le téléphone et sur le poste de travail (alertes, ruptures, délégation). Toutes les classes introduites ici sont nouvelles — elles n'existent nulle part ailleurs dans le produit, donc les habiller ne peut rien changer à ce qui existait. Zéro couleur littérale : tout vient des variables du kit. ========================================================================== */ /* -------------------------------------------------------------------------- SL-4 — ALERTES : LE CONSTAT, PUIS L'ACTION ATTENDUE Les deux éléments sont visuellement séparés : l'action porte un filet et un intitulé propres, pour qu'on ne la confonde jamais avec le constat. -------------------------------------------------------------------------- */ .tr-alert__action { display: flex; flex-direction: column; gap: 0.125rem; margin-top: var(--sn-space-2); padding-left: var(--sn-space-3); border-left: 2px solid var(--sn-accent); } .tr-alert__action-label { font-family: var(--sn-font-ui); font-size: var(--sn-fs-label); font-weight: 700; letter-spacing: var(--sn-ls-label); text-transform: uppercase; color: var(--sn-accent-ink); } .tr-alert__action-text { font-family: var(--sn-font-ui); font-size: var(--sn-fs-body); line-height: 1.45; color: var(--sn-ink-100); } /* Le texte produit par le système : conservé, remis à sa place. C'est lui qui porte les chiffres — il n'est jamais remplacé, seulement subordonné. */ .tr-alert__brut { display: flex; flex-direction: column; gap: 0.125rem; margin-top: var(--sn-space-2); } .tr-alert__brut-label { font-family: var(--sn-font-ui); font-size: var(--sn-fs-label); font-weight: 700; letter-spacing: var(--sn-ls-label); text-transform: uppercase; color: var(--sn-ink-40); } .tr-alert__brut-text { font-family: var(--sn-font-ui); font-size: var(--sn-fs-caption); line-height: 1.4; color: var(--sn-ink-60); } /* Dépliage : des éléments rédigés, jamais l'objet technique. */ .tr-alert-diag__item { margin-bottom: var(--sn-space-3); } .tr-alert-diag__item:last-child { margin-bottom: 0; } .tr-alert-diag__label { font-family: var(--sn-font-ui); font-size: var(--sn-fs-label); font-weight: 700; letter-spacing: var(--sn-ls-label); text-transform: uppercase; color: var(--sn-ink-60); margin-bottom: 0.125rem; } .tr-alert-diag__text { margin: 0; font-family: var(--sn-font-ui); font-size: var(--sn-fs-body); line-height: 1.5; color: var(--sn-ink-80); } /* -------------------------------------------------------------------------- SL-3 — LE REPÈRE D'ÉTAT SE LIT DE LA MÊME FAÇON À TOUTES LES LARGEURS L'anneau et la variation construits par le script sont posés en regard de la valeur, sur le téléphone comme au poste de travail : sans cette mise en place, l'anneau se retrouvait empilé sous la valeur et allongeait la carte de 100 px. Ces deux sélecteurs exigent `data-forme` ET un élément que seul le script crée (`.dt-gauge-auto`, `.dt-delta-auto`) : ils ne peuvent atteindre aucun élément qui existait avant cette couche. Le poste de travail garde son anneau plus grand, posé plus bas dans la media query. -------------------------------------------------------------------------- */ #screen-dashboard .sn-card-kpi[data-forme="anneau"]:has(> .dt-gauge-auto), #screen-dashboard .sn-card-kpi[data-forme="echelle"]:has(> .dt-gauge-auto), #screen-dashboard .sn-card-kpi[data-forme="variation"]:has(> .dt-gauge-auto) { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: var(--sn-space-2); /* La grille du téléphone est en `1fr 1fr` : sans cette borne, l'anneau ajouté élargit la contribution minimale de la carte et décale les deux colonnes d'un pixel. Posée ici, elle ne touche que les cartes que le script a équipées. */ min-width: 0; } #screen-dashboard .sn-card-kpi > .dt-gauge-auto { grid-column: 2; grid-row: 1 / -1; --sn-gauge-size: 44px; --sn-gauge-thickness: 6px; } #screen-dashboard .dt-delta-auto { grid-column: 1; } /* -------------------------------------------------------------------------- SL-5 — RUPTURES : LE MONTANT EST NOMMÉ Le chiffre gardait sa pastille ; il porte désormais son étiquette, sous elle. -------------------------------------------------------------------------- */ .dt-rupture__impact { display: flex; flex-direction: column; align-items: flex-end; gap: 0.125rem; } .dt-rupture__impact-label { font-family: var(--sn-font-ui); font-size: var(--sn-fs-label); letter-spacing: var(--sn-ls-label); text-transform: uppercase; color: var(--sn-ink-40); white-space: nowrap; } /* -------------------------------------------------------------------------- SL-6c — DÉLÉGATION : CE QUI EST DÉLÉGUÉ, DIT AVANT LA DEMANDE -------------------------------------------------------------------------- */ .deleg-perimetre { margin-bottom: var(--sn-space-4); padding: var(--sn-space-3); border-radius: var(--sn-radius-m); background-color: var(--sn-violet-10); } .deleg-perimetre__label { font-family: var(--sn-font-ui); font-size: var(--sn-fs-label); font-weight: 700; letter-spacing: var(--sn-ls-label); text-transform: uppercase; color: var(--sn-accent-ink); margin-bottom: var(--sn-space-1); } .deleg-perimetre__text { margin: 0; font-family: var(--sn-font-ui); font-size: var(--sn-fs-caption); line-height: 1.5; color: var(--sn-ink-80); } .deleg-perimetre__text--note { margin-top: var(--sn-space-2); color: var(--sn-ink-60); } @media (min-width: 1024px) { /* ------------------------------------------------------------------------ SL-2a — LE DÉTAIL DU LEVIER, AU CLIC Le bloc du levier est le seul en fond sombre de l'écran : le dépliage suit ce fond, avec les encres claires du kit. `

` est atteignable au clavier nativement ; le focus reste visible. ------------------------------------------------------------------------ */ body.dt-shell .dt-hero__plus { margin-top: var(--sn-space-4); border-top: 1px solid var(--sn-inverse-30); padding-top: var(--sn-space-3); } body.dt-shell .dt-hero__plus-head { cursor: pointer; list-style: none; font-family: var(--sn-font-ui); font-size: var(--sn-fs-caption); font-weight: 700; color: var(--sn-inverse-70); } body.dt-shell .dt-hero__plus-head::-webkit-details-marker { display: none; } body.dt-shell .dt-hero__plus-head::after { content: " ›"; } body.dt-shell .dt-hero__plus[open] .dt-hero__plus-head::after { content: " ⌄"; } body.dt-shell .dt-hero__plus-head:hover { color: var(--sn-inverse-100); } body.dt-shell .dt-hero__plus-head:focus-visible { outline: 2px solid var(--sn-inverse-70); outline-offset: 2px; } body.dt-shell .dt-hero__plus-corps { margin-top: var(--sn-space-3); } body.dt-shell .dt-hero__plus-item { margin-bottom: var(--sn-space-3); } body.dt-shell .dt-hero__plus-item:last-child { margin-bottom: 0; } body.dt-shell .dt-hero__plus-label { font-family: var(--sn-font-ui); font-size: var(--sn-fs-label); font-weight: 700; letter-spacing: var(--sn-ls-label); text-transform: uppercase; color: var(--sn-inverse-70); margin-bottom: 0.125rem; } body.dt-shell .dt-hero__plus-text { margin: 0; font-family: var(--sn-font-ui); font-size: var(--sn-fs-body); line-height: 1.5; color: var(--sn-inverse-100); } } /* ========================================================================== S5 (27/07/2026) — QUALITÉ VISUELLE DE LA RANGÉE D'INDICATEURS SL-1 alignement · SL-2 remplissage progressif · SL-3 courbe de tendance ========================================================================== */ /* -------------------------------------------------------------------------- SL-2 — L'ANNEAU SE REMPLIT DEPUIS ZÉRO `--value` pilote l'arc de `.sn-gauge` (kit, LOT C). Une propriété personnalisée n'est animable qu'une fois DÉCLARÉE avec son type : sans cette déclaration, le navigateur la traite comme un simple jeton de texte et l'anneau saute directement à sa valeur. `inherits: true` est nécessaire — l'arc est peint par `.sn-gauge::before`, qui lit la valeur de son élément d'origine. Avec `inherits: false` le pseudo-élément retomberait sur la valeur initiale et l'anneau resterait vide. La déclaration seule ne change rien à ce qui s'affiche : elle donne un type à une valeur que le kit posait déjà à 0. -------------------------------------------------------------------------- */ @property --value { syntax: ''; inherits: true; initial-value: 0; } /* Le remplissage est court et ralentit en fin de course : l'arrêt est net et la valeur finale se lit immédiatement. SEULE `--value` est animée — la couleur d'état porte une information et est posée dès le départ, jamais découverte en cours de route. Posé hors media query : le remplissage est un déroulé dans le temps, pas une géométrie. Il ne déplace rien, la valeur finale et la mise en page du téléphone sont celles d'avant la session. */ #screen-dashboard .sn-card-kpi .sn-gauge { transition: --value 620ms cubic-bezier(0.16, 1, 0.3, 1); } /* Préférence système de réduction des animations : la valeur finale s'affiche directement. C'est aussi le comportement de repli sur tout moteur qui ignore `@property` — app.js écrit la valeur finale dans le même geste synchrone, de sorte qu'un anneau ne reste jamais immobile à zéro. */ @media (prefers-reduced-motion: reduce) { #screen-dashboard .sn-card-kpi .sn-gauge { transition: none; } } /* -------------------------------------------------------------------------- SL-3 — LA COURBE N'EXISTE QUE SUR LE POSTE DE TRAVAIL Même règle que `.dt-spark` qu'elle remplace : sous 1024 px la carte garde exactement la composition qu'elle avait. -------------------------------------------------------------------------- */ .dt-trend { display: none; } /* S6 SL-2 — la mention de comparaison n'existe qu'au poste de travail, comme l'anneau de position qu'elle explique : le Cockpit du téléphone est inchangé. */ .dt-refnote { display: none; } /* S6 SL-4 — la pastille suit `.dt-ident`, dont tout le contenu est propre au poste de travail : l'en-tête du téléphone garde exactement ce qu'il avait. */ .dt-avatar { display: none; } @media (min-width: 1024px) { /* ------------------------------------------------------------------------ SL-1 — UNE STRUCTURE COMMUNE À TOUTE LA RANGÉE Les cartes portent des contenus de longueurs différentes : intitulé sur une ou deux lignes, sous-titre présent ou absent, mention de date sur certaines. Tant que chaque carte empilait librement ses éléments, les anneaux se posaient à des hauteurs différentes et paraissaient de tailles inégales. Cinq bandes, les mêmes partout, de haut en bas : 1. intitulé — deux lignes RÉSERVÉES, qu'il en occupe une ou deux ; 2. valeur principale, l'anneau posé en regard sur la colonne de droite ; 3. mention secondaire — deux lignes réservées, texte écrêté au-delà ; 4. seconde mention (variation, écart) — réservée même quand elle est vide, sans quoi la bande de tendance ne commencerait pas à la même hauteur ; 5. zone de tendance, de hauteur fixe. Toutes les bandes étant de hauteur fixe, la hauteur totale est identique sur toute la rangée et chaque élément occupe la même bande d'une carte à l'autre. Les quatre sélecteurs reprennent les formes posées par S4 (`data-forme` + anneau construit par le script) : sans eux, la règle de S4 — plus spécifique — continuerait d'imposer sa propre grille à deux colonnes. ------------------------------------------------------------------------ */ body.dt-shell #screen-dashboard .dt-kpi-row { --dt-kpi-h-label: calc(var(--sn-fs-label) * 2.6); /* 2 lignes d'intitulé */ /* Hauteurs relevées sur le contenu RÉEL de la rangée, pas choisies a priori : la mention la plus longue (« tickets ÷ entrées · mesure du samedi 25 juillet », posée par S4 SL-0e) demande trois lignes, la variation la plus longue en demande deux. */ --dt-kpi-h-mention: calc(var(--sn-fs-caption) * 4.2); /* 3 lignes de mention */ --dt-kpi-h-mention2: calc(var(--sn-fs-caption) * 2.8); /* 2 lignes de variation */ --dt-kpi-h-tendance: var(--sn-space-6); /* bande de tendance */ } /* LA LARGEUR SUIT CE QUE LA CARTE DOIT TENIR. Une carte qui porte un anneau doit loger, côte à côte et sur la même ligne, sa valeur (« 15,2 / 20 » : 98 px, insécable par la règle de S4) et l'anneau (56 px). À 144 px — la largeur que S4 donnait à toutes les cartes étroites — les deux ne tiennent pas : avant cette session l'anneau débordait de 34 px sur la carte voisine. La largeur de base est donc donnée par le CONTENU : les cartes à anneau en reçoivent davantage, les autres n'en ont pas besoin. La rangée reste sur une seule ligne à 1440 px, et le total des bases (1 000 px) tient dans la largeur disponible (1 005 px). `:has(.sn-gauge)` suit la donnée : une carte qui perd son anneau reprend sa largeur ordinaire, comme la forme elle-même suit la donnée depuis S1. */ body.dt-shell #screen-dashboard .dt-kpi-row > .sn-card-kpi { flex: 1 1 8.5rem; } body.dt-shell #screen-dashboard .dt-kpi-row > .sn-card-kpi:has(.sn-gauge) { flex: 1 1 12rem; } body.dt-shell #screen-dashboard .dt-kpi-row > .tr-kpi--wide { flex: 1 1 13rem; } /* ------------------------------------------------------------------------ S6 SL-2 — DEUX RANGS DE TROIS, PLUTÔT QUE CINQ PUIS UNE. Le raisonnement de S5 tenait tant que trois cartes sur six portaient un anneau. Les six en portent un désormais, et six cartes à anneau ne tiennent pas sur une ligne de 1 065 px : chacune doit loger sa valeur (« 15,1 / 20 », 98 px, insécable) et son anneau (56 px) côte à côte, soit 178 px de contenu minimum ; six d'entre elles en réclament 1 128 px avec les écarts. Laissée à la base de S5, la rangée se repliait en cinq cartes puis une seule, étirée sur toute la largeur — un rang déséquilibré, et la satisfaction client lue comme un bloc à part alors qu'elle est un indicateur comme les autres. La base est donc portée à 20 rem : trois cartes tiennent sur un rang (3 × 320 + 24 = 984 ≤ 1 065), quatre n'y tiennent pas (1 316 px). Deux rangs de trois, cartes plus larges, anneaux à la même hauteur sur chaque rang, et l'alignement de S5 — même hauteur de carte, même taille d'anneau — intact. Réduire l'anneau n'aurait pas suffi : même à 44 px, six cartes en réclament 1 128 px. Réduire la valeur aurait attaqué le contenu lui-même. ------------------------------------------------------------------------ */ body.dt-shell #screen-dashboard .dt-kpi-row > .sn-card-kpi:has(.sn-gauge), body.dt-shell #screen-dashboard .dt-kpi-row > .tr-kpi--wide { flex: 1 1 20rem; } body.dt-shell #screen-dashboard .dt-kpi-row > .sn-card-kpi, body.dt-shell #screen-dashboard .dt-kpi-row > .sn-card-kpi[data-forme="anneau"]:has(> .dt-gauge-auto), body.dt-shell #screen-dashboard .dt-kpi-row > .sn-card-kpi[data-forme="echelle"]:has(> .dt-gauge-auto), body.dt-shell #screen-dashboard .dt-kpi-row > .sn-card-kpi[data-forme="reference"]:has(> .dt-gauge-auto), body.dt-shell #screen-dashboard .dt-kpi-row > .sn-card-kpi[data-forme="variation"]:has(> .dt-gauge-auto) { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: var(--dt-kpi-h-label) auto var(--dt-kpi-h-mention) var(--dt-kpi-h-mention2) var(--dt-kpi-h-tendance); align-items: start; column-gap: var(--sn-space-3); row-gap: var(--sn-space-1); position: relative; /* repère de la bande de tendance */ } /* 1 — intitulé : deux lignes réservées, la seconde écrêtée si besoin. */ body.dt-shell #screen-dashboard .dt-kpi-row > .sn-card-kpi > .sn-card-kpi__label { grid-row: 1; grid-column: 1 / -1; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* 2 — valeur principale. `display: contents` dissout les deux conteneurs de la carte du chiffre d'affaires : ses éléments deviennent des enfants directs de la grille et se posent dans les mêmes bandes que ceux des autres cartes, sans toucher au balisage ni à un seul identifiant. */ body.dt-shell #screen-dashboard .dt-kpi-row > .sn-card-kpi > .tr-kpi-gaugerow, body.dt-shell #screen-dashboard .dt-kpi-row .tr-kpi-gaugerow__main { display: contents; } body.dt-shell #screen-dashboard .dt-kpi-row .sn-card-kpi__value { grid-row: 2; grid-column: 1; align-self: center; } /* 3 et 4 — mentions secondaires. La première est écrêtée à deux lignes : sans cette borne, une mention longue (« mesure du samedi 25 juillet ») repousserait la bande de tendance de sa carte et rompt l'alignement de la rangée. */ body.dt-shell #screen-dashboard .dt-kpi-row .sn-card-kpi__trend { grid-row: 3; grid-column: 1; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } body.dt-shell #screen-dashboard .dt-kpi-row .sn-card-kpi__delta { grid-row: 4; /* Pleine largeur : la colonne de l'anneau s'arrête au-dessus (voir ci-dessous), de sorte que « ↑ +8,6 % vs période précédente » dispose de la carte entière. Contrainte à la colonne de gauche, elle perdait son dernier mot. */ grid-column: 1 / -1; align-self: start; /* « +8,6 % vs période précédente » ne tient pas sur une ligne : la bande en réserve deux et la variation s'y replie, plutôt que de déborder sur la zone de tendance. Le kit pose `inline-flex` sur cette variation : le texte y devient un élément flexible unique, qui se replie sur la largeur de son mot le plus long et réclame quatre lignes là où deux suffisent. Il redevient donc du texte ordinaire ici, et la flèche d'état — un pseudo-élément — reprend son écart par une marge. */ display: block; line-height: 1.4; max-height: var(--dt-kpi-h-mention2); overflow: hidden; } body.dt-shell #screen-dashboard .dt-kpi-row .sn-card-kpi__delta::before { padding-right: var(--sn-space-1); } /* ------------------------------------------------------------------------ S6 SL-2 — CE À QUOI L'ANNEAU COMPARE, ÉCRIT SUR LA CARTE Un anneau de position muet se lit comme une atteinte d'objectif : à 98 %, le lecteur comprend « objectif presque atteint » là où la carte dit « journée dans la normale du magasin ». La mention lève l'ambiguïté en une ligne. Elle occupe la bande 4 — celle de la variation, réservée par S5 et vide sur ces trois cartes : aucune sixième bande n'est ajoutée, la hauteur de la rangée est donc rigoureusement celle de S5. ------------------------------------------------------------------------ */ body.dt-shell #screen-dashboard .dt-kpi-row .dt-refnote { grid-row: 4; grid-column: 1 / -1; align-self: start; display: block; font-family: var(--sn-font-ui); font-size: var(--sn-fs-caption); line-height: 1.4; color: var(--sn-ink-60); max-height: var(--dt-kpi-h-mention2); overflow: hidden; } /* L'anneau : même colonne, même bande et même taille sur toutes les cartes qui en portent un — c'est le point de départ de ce sous-livrable. */ body.dt-shell #screen-dashboard .dt-kpi-row .sn-card-kpi .sn-gauge { /* L'anneau accompagne la valeur et la première mention ; la bande de variation lui passe dessous, en pleine largeur. Les bandes étant de hauteur fixe, l'anneau tombe à la même hauteur sur toutes les cartes qui en portent un. */ grid-row: 2 / 4; grid-column: 2; align-self: center; --sn-gauge-size: 56px; --sn-gauge-thickness: 7px; } /* ------------------------------------------------------------------------ SL-3 — LA COURBE DE TENDANCE, EN FOND DE LA BANDE INFÉRIEURE Elle occupe la cinquième bande sur toute la largeur de la carte, sous les mentions : elle ne passe jamais derrière la valeur, qui reste le contenu. ------------------------------------------------------------------------ */ body.dt-shell #screen-dashboard .dt-kpi-row .dt-trend { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--dt-kpi-h-tendance) + var(--sn-space-3)); pointer-events: none; border-bottom-left-radius: var(--sn-radius-l); border-bottom-right-radius: var(--sn-radius-l); overflow: hidden; } /* ------------------------------------------------------------------------ S12 SL-5 — DEUX BANDES, JAMAIS UN CHEVAUCHEMENT La mention de période était posée par-dessus la zone de tracé : une courbe qui descendait dans le bas de la carte traversait le texte (quatre cartes sur six concernées au constat du 28/07). Elles ont désormais chacune leur bande. La hauteur de la RANGÉE ne bouge pas : c'est la zone de tracé qui cède les quelques pixels de la mention, pas la carte qui grandit. ------------------------------------------------------------------------ */ body.dt-shell #screen-dashboard .dt-kpi-row .dt-trend { --dt-trend-periode-h: 0.95rem; } body.dt-shell #screen-dashboard .dt-kpi-row .dt-trend__zone { display: block; position: absolute; left: 0; right: 0; top: 0; bottom: var(--dt-trend-periode-h); } body.dt-shell #screen-dashboard .dt-kpi-row .dt-trend svg { display: block; width: 100%; height: 100%; } /* ------------------------------------------------------------------------ S6 SL-3c — LA PÉRIODE RÉELLEMENT COUVERTE, PRÈS DE LA COURBE Elle varie d'une carte à l'autre : sept jours pour les mesures quotidiennes, trente pour la satisfaction, une suite de relevés pour l'enquête de satisfaction. Sans elle, deux courbes de longueurs différentes se lisent comme deux tendances comparables. Posée DANS la bande de tendance, en bas à gauche, sur la partie où le dégradé est déjà transparent : elle n'ajoute aucune hauteur à la carte et ne recouvre jamais le tracé, qui occupe le haut de la bande. ------------------------------------------------------------------------ */ body.dt-shell #screen-dashboard .dt-kpi-row .dt-trend__periode { position: absolute; /* Alignée sur le texte de la carte, pas sur le bord de la bande : la bande de tendance court d'un bord à l'autre, la mention doit retomber sur la marge intérieure comme l'intitulé et la valeur au-dessus d'elle. S12 SL-5 : elle occupe SA bande, calée au bas de la carte — la zone de tracé s'arrête au-dessus d'elle et ne peut plus la traverser. */ left: var(--sn-space-3); right: var(--sn-space-3); bottom: 0; height: var(--dt-trend-periode-h); display: flex; align-items: center; max-width: calc(100% - 2 * var(--sn-space-3)); font-family: var(--sn-font-ui); font-size: var(--sn-fs-caption); line-height: 1.2; color: var(--sn-ink-40); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; } /* Aplat dégradé : teinte claire du kit en haut, la MÊME teinte rendue transparente en bas — la courbe se fond dans le fond de la carte au lieu de s'arrêter sur un bord franc. Zéro couleur littérale : les deux arrêts et le tracé lisent les variables du kit. */ body.dt-shell .dt-trend .dt-trend__haut { stop-color: var(--dt-trend-clair); stop-opacity: 1; } body.dt-shell .dt-trend .dt-trend__bas { stop-color: var(--dt-trend-clair); stop-opacity: 0; } body.dt-shell .dt-trend .dt-trend__ligne { fill: none; stroke: var(--dt-trend-trait); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } /* Dernier point de la série — la valeur de la journée affichée par la carte. */ body.dt-shell .dt-trend .dt-trend__point { position: absolute; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: var(--sn-radius-pill); background-color: var(--dt-trend-trait); } /* Famille de couleur : celle du repère que la carte porte déjà, l'accent principal quand elle n'en porte aucun. La courbe renforce le repère au lieu d'introduire une couleur de plus. */ body.dt-shell .dt-trend--accent { --dt-trend-clair: var(--sn-violet-10); --dt-trend-trait: var(--sn-accent); } body.dt-shell .dt-trend--ok { --dt-trend-clair: var(--sn-ok-10); --dt-trend-trait: var(--sn-ok); } body.dt-shell .dt-trend--warn { --dt-trend-clair: var(--sn-warn-10); --dt-trend-trait: var(--sn-warn); } body.dt-shell .dt-trend--crit { --dt-trend-clair: var(--sn-crit-10); --dt-trend-trait: var(--sn-crit); } /* ========================================================================== S15 SL-2/SL-3 — POTENTIEL À RÉCUPÉRER CETTE SEMAINE (potentiel par les pairs) ========================================================================== Remplace l'ancien second étage « Ce qui pèse le plus » (potentiel interne). Le résumé est un bouton (natif clavier) : montant central violet, fourchette, pastille « Estimé », ligne ROI mesuré. Au clic, le panneau se déplie sous le bloc (pas de modale). */ body.dt-shell .dt-pot { display: block; width: 100%; position: relative; padding: var(--sn-space-4); border: 1px solid var(--sn-separator); border-radius: var(--sn-radius-l); background: var(--sn-surface); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; } body.dt-shell .dt-pot:hover { border-color: var(--sn-accent); background: var(--sn-violet-10); } /* Le focus reste VISIBLE : le résumé est atteignable au clavier (c'est un `