/* La page de la carte : châssis, écran du code, accueil, paramètres et classes `sb-*` partagées, sur les jetons du DS (jamais une couleur, un rayon ou une ombre inventés). Les composants du DS injectent leur propre CSS. L'arbre, le panneau et la visionneuse ont leur feuille (lots E, F, G). Reprise de commande-atelier-ldlc (ca-*), sans les commandes ; l'accent bleu est posé par app.mjs sur `.sb-app` (`data-accent="bleu"`, tokens/user-accents.css), jamais sur . */ /* Barre de défilement toujours présente : ouvrir un panneau ne décale pas l'interface. */ html { overflow-y: scroll; } html, body { margin: 0; min-height: 100%; background: var(--bg-base); } /* Châssis : barre de titre du DS (64 px) puis le contenu. Le thème (`data-theme`) se pose sur cette application, jamais sur depuis la logique : son fond et son encre suivent les jetons. */ .sb-app { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg-base); color: var(--text-1); } .sb-topbar { height: var(--ds-topbar-h); flex: none; display: flex; align-items: center; gap: 16px; padding: 0 22px; background: var(--surface-1); border-bottom: 1px solid var(--border-subtle); } .sb-topbar h1 { margin: 0; font: var(--type-title); letter-spacing: -0.01em; color: var(--text-1); } .sb-titres { display: flex; flex-direction: column; gap: 3px; } /* Le nom de la boutique : encre 2, lisible à 4,5:1 sous 18 px. */ .sb-topbar .sb-lieu { font: 400 12px/1 var(--font-sans); color: var(--text-2); } .sb-nav { display: flex; align-items: center; gap: 4px; margin-left: 18px; padding-left: 18px; border-left: 1px solid var(--border); } /* La vue ouverte se dit par son fond, sans déplacement ; l'anneau de focus reste celui du DS. */ .sb-nav .sb-vue.est-active { background: var(--accent-softer); color: var(--accent-ink); } .sb-topbar .sb-fin { margin-left: auto; display: flex; align-items: center; gap: 10px; } /* La barre d'un outil, sous celle de l'application : un palier de fond plus bas, un filet. Elle porte le nom de la vue et ce qui n'appartient qu'à elle — les compteurs du carnet, demain la provenance d'un export de devis. Posée par la maquette validée des devis (`docs/maquettes/devis-1-liste.html`), reprise ici telle quelle pour que les deux outils se présentent pareil. La barre de titre, elle, ne porte que l'application. */ .sb-barre-outil { flex: none; display: flex; align-items: center; gap: 16px; padding: 10px 22px; background: var(--surface-2); border-bottom: 1px solid var(--border-subtle); } .sb-barre-outil h2 { margin: 0; font: var(--type-title); letter-spacing: var(--tracking-tight); color: var(--text-1); } .sb-barre-outil .sb-fin { margin-left: auto; display: flex; align-items: center; gap: 10px; } /* La provenance des chiffres, dans la barre de l'outil : une donnée, donc encre 2. */ .sb-barre-outil .sb-source { font: var(--weight-regular) var(--text-xs)/var(--leading-normal) var(--font-sans); color: var(--text-2); font-variant-numeric: tabular-nums; } /* Le déclencheur d'un panneau, posé dans la ligne de titre de sa carte : le titre, puis son bouton carré à droite. Deux outils s'en servent — « Nouvelle commande » dans Commandes, « Déposer un export » dans Devis — et la maquette validée des deux le nomme ainsi (`docs/maquettes/devis-1-liste.html`). Il vivait dans css/commandes.css sous le nom `.sb-cmd-titre-plus` : renommé et remonté ici le 09/09/2026, quand Devis l'a repris. */ .sb-titre-plus { display: inline-flex; align-items: center; gap: 10px; } .sb-titre-plus .ds-btn { --_h: 24px; height: 24px; width: 24px; padding: 0; justify-content: center; } /* Champ obligatoire oublié : le tour de la case passe en rouge, le regard y va. Posé au clic sur Enregistrer, retiré dès que le champ est rempli — jamais avant d'avoir essayé. Elle vivait dans css/commandes.css sous le nom `.sb-cmd-erreur` : partagée ici le 09/09/2026, quand les devis l'ont reprise (arbitrage de Célian). RÉSERVE : `!important` parce que `Dropdown` n'a pas d'état d'erreur dans le design system, là où `Input` en a un. C'est un manque du système, à combler dans Press-Start ; après quoi ces deux lignes se retirent. */ .sb-erreur-champ .ds-dd__btn { border-color: var(--critical) !important; box-shadow: 0 0 0 2px var(--critical-soft) !important; } .sb-erreur-champ .ds-input { border-color: var(--critical); box-shadow: 0 0 0 2px var(--critical-soft); } .sb-contenu { flex: 1; padding: 16px 22px 40px; display: flex; flex-direction: column; gap: 12px; max-width: var(--ds-content-max); width: 100%; box-sizing: border-box; margin: 0 auto; } /* La barre de titre sous 1000 px : elle ne tient plus, et c'est la PAGE qui défilait latéralement (mesuré le 8 septembre 2026 : 742 px de contenu pour une fenêtre de 390, avant même la vue Relances ; 867 px avec elle). Rien ne rétrécit ni ne s'entasse — ce qui ne sert pas à se repérer s'efface, dans cet ordre : la mention de démonstration, puis qui est connecté, puis le nom de la boutique. La navigation et l'engrenage restent, toujours. */ @media (max-width: 1000px) { .sb-topbar .sb-demo { display: none; } } @media (max-width: 760px) { .sb-topbar { padding: 0 14px; gap: 10px; } .sb-topbar .sb-connecte { display: none; } .sb-nav { margin-left: 10px; padding-left: 10px; } .sb-contenu { padding-left: 14px; padding-right: 14px; } } @media (max-width: 560px) { .sb-topbar { padding: 0 10px; gap: 6px; } .sb-topbar .sb-lieu { display: none; } .sb-topbar h1 { font: var(--type-body-strong); } .sb-nav { margin-left: 6px; padding-left: 6px; } /* Les vues se réduisent à leur icône. Le libellé est masqué à l'œil, pas retiré : `display: none` lui ôterait son nom accessible et le bouton deviendrait muet au lecteur d'écran. */ .sb-nav .sb-vue-libelle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } /* Libellé présent pour les lecteurs d'écran, invisible à l'œil. */ .sb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Écran de connexion : une seule carte, centrée. Le prénom se clique, le mot de passe se tape. */ .sb-contenu--code { align-items: center; justify-content: center; padding-bottom: 96px; } .sb-connexion-carte { width: 360px; } .sb-connexion-carte form { display: flex; flex-direction: column; gap: 14px; } .sb-connexion-carte .sb-pied { margin: 0; } /* Le champ masqué et son bouton d'affichage : le bouton s'aligne sur le contrôle (38 px), pas sur le libellé ni sur l'indication d'erreur qui le suit. */ .sb-mot-de-passe { display: flex; align-items: flex-start; gap: 6px; } .sb-mot-de-passe > .ds-field { flex: 1; min-width: 0; } .sb-mot-de-passe > .ds-iconbtn { margin-top: 22px; } .sb-pied { display: flex; align-items: center; gap: 10px; margin-top: 4px; } .sb-pied .sb-fin { margin-left: auto; display: flex; gap: 10px; align-items: center; } /* Un refus se lit là où l'action a eu lieu, en encre critique, et reste jusqu'à traitement. */ .sb-refus { margin: 0; font: 500 12px/1.3 var(--font-sans); color: var(--critical-ink); } /* Un écran vide dit ce qui est, en encre 2 : c'est une donnée, pas un non-événement — et l'encre 3 tombe à 3,02:1 sous 18 px, sous le seuil de 4,5:1. */ .sb-vide { margin: 0; font: 400 13px/1.4 var(--font-sans); color: var(--text-2); } /* Qui est connecté sur ce poste (ADR-0003) : encre 2, c'est une donnée. */ .sb-connecte { font: 400 var(--text-sm)/1 var(--font-sans); color: var(--text-2); white-space: nowrap; } /* Un identifiant de sujet, à recopier sans faute : mono, tabulaire. */ .sb-identifiant { font: 500 12px/1.4 var(--font-mono, var(--font-sans)); color: var(--text-2); letter-spacing: 0.02em; } /* Vue Carte : l'arbre prend la place, le panneau du sujet choisi une colonne fixe de 440 px à droite. */ /* La vue Carte remplit la fenêtre sans faire défiler la page ; l'arbre et la fiche défilent seuls (lot M, choix 2). */ .sb-contenu--carte { max-width: none; padding: 0; gap: 0; flex-direction: row; align-items: stretch; flex: none; height: calc(100vh - var(--ds-topbar-h)); min-height: 0; } .sb-contenu--carte > .sb-arbre { flex: 1 1 auto; min-width: 0; } .sb-contenu--carte > .sb-panneau { flex: 0 0 440px; width: 440px; box-sizing: border-box; border-left: 1px solid var(--border-subtle); background: var(--surface-1); } /* Vue Accueil et vue Paramètres : cartes empilées, lues de haut en bas, 980 px au plus. */ /* [09/09/2026 — arbitrage de Célian] Toutes les vues à la largeur de l'outil Commandes. L'accueil et les paramètres étaient bridés à 980 px, les devis à 1180, la carte et les commandes à --ds-content-max : trois largeurs pour une même application, sans raison qu'on sache dire. Une seule logique partout, celle de `.sb-contenu`. */ .sb-parametres { display: flex; flex-direction: column; gap: 14px; } .sb-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; } /* Vue Accueil : l'avancement par section, puis les deux listes du bas (lot H). */ .sb-accueil { display: flex; flex-direction: column; gap: 14px; } /* Neuf sections, trois colonnes : la grille tient en une hauteur d'écran à 980 px de large. */ .sb-sections { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } /* La carte d'une section : le titre, la barre, puis le décompte. Rien d'autre. */ .sb-section .ds-card__body { display: flex; flex-direction: column; gap: 10px; } /* Le décompte sous la barre : ce qui reste à faire est du texte, jamais un badge. Encre 2 même quand la section n'a pas commencé — un décompte est une donnée. */ .sb-section-compte { font: 400 12px/1.3 var(--font-sans); color: var(--text-2); font-variant-numeric: tabular-nums; } /* Les deux listes du bas : un chiffre par ligne, une entrée de journal par ligne. */ .sb-derniers { list-style: none; margin: 0; padding: 0; } .sb-derniers > li { padding: 9px 0; border-top: 1px solid var(--border-subtle); } .sb-derniers > li:first-child { border-top: none; padding-top: 0; } .sb-derniers > li:last-child { padding-bottom: 0; } /* Un chiffre clé : le libellé à gauche, la valeur et son unité à droite, alignées. */ .sb-chiffre-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 12px; } .sb-chiffre-libelle { font: 400 13px/1.35 var(--font-sans); color: var(--text-1); } .sb-chiffre-valeur { font: 600 14px/1.35 var(--font-sans); color: var(--text-1); font-variant-numeric: tabular-nums; white-space: nowrap; } .sb-chiffre-valeur .sb-unite { font-weight: 400; color: var(--text-2); } /* La ligne de contexte : la période, puis le sujet d'où le chiffre vient. */ .sb-ou { display: flex; align-items: baseline; gap: 8px; margin-top: 3px; font: 400 12px/1.35 var(--font-sans); color: var(--text-2); font-variant-numeric: tabular-nums; } .sb-ou .sb-lien { font: inherit; } /* Une entrée de journal : qui et quand, puis le texte. */ .sb-note-tete { display: flex; align-items: baseline; gap: 8px; font: 400 12px/1.35 var(--font-sans); color: var(--text-2); font-variant-numeric: tabular-nums; } .sb-note-tete b { font: 600 12px/1.35 var(--font-sans); color: var(--text-1); } .sb-note-texte { margin: 3px 0 0; font: 400 13px/1.45 var(--font-sans); color: var(--text-1); } /* La fiche du sujet : sa hauteur est bornée par la vue, son contenu défile seul (css/panneau.css). Les squelettes du socle (titre, liste des sections, sujet, cadre de visionneuse) sont partis avec la fusion des lots E, F et G, qui portent chacun sa feuille. */ .sb-panneau { min-height: 0; } /* Un lien vers un sujet : l'encre d'accent (`--accent-ink`, choix 1 du lot M, posé dans le DS), soulignée au survol seulement, sans changement de gabarit. */ .sb-lien { font: 400 13px/1.4 var(--font-sans); color: var(--accent-ink); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; text-decoration: none; } .sb-lien:hover { text-decoration: underline; text-underline-offset: 2px; } /* Listes et réglages partagés par Paramètres et l'administration (lot H). Grille partagée entre les lignes (subgrid) : la colonne du nombre prend la même largeur partout. */ .sb-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; } .sb-liste li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; gap: 10px; min-height: 36px; padding: 4px 0; border-top: 1px solid var(--border-subtle); font: 400 13px/1 var(--font-sans); color: var(--text-1); } .sb-liste li:first-child { border-top: none; } .sb-liste .sb-nombre { font: 400 12px/1 var(--font-sans); color: var(--text-2); font-variant-numeric: tabular-nums; text-align: right; } /* La ligne d'ajout ouvre la liste : son filet la referme, en dessous (09/09/2026). */ .sb-ajout { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border-subtle); } .sb-ajout > div:first-child { flex: 1 1 auto; } .sb-ajout + .sb-refus { display: block; margin-top: 8px; } /* Une ligne de réglage : titre et détail à gauche, le contrôle à droite. */ .sb-reglage { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid var(--border-subtle); } .sb-reglage:first-child { border-top: none; padding-top: 0; } .sb-reglage:last-child { padding-bottom: 0; } .sb-reglage .sb-titre { display: block; font: 600 13px/1.3 var(--font-sans); color: var(--text-1); } .sb-reglage .sb-detail { display: block; margin-top: 3px; font: 400 12px/1.3 var(--font-sans); color: var(--text-2); } .sb-chips { display: flex; gap: 6px; } /* Champ, case et bouton alignés sur leur bas : le bouton se met à la hauteur du champ, pas de celle de son libellé. */ .sb-acces { display: flex; gap: 8px; align-items: flex-end; } .sb-acces > div:first-child { width: 260px; } /* La case « Éditeur » d'une création : centrée sur la hauteur d'un contrôle (38 px). */ .sb-acces-case { display: flex; align-items: center; height: 38px; } /* La création d'un accès, sous la liste : séparée par un filet, comme les autres ajouts. */ .sb-acces-neuf { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-subtle); } /* Administration des accès : une ligne par personne, le nom puis son dernier usage, le rôle en Tag. */ .sb-acces-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto auto; align-items: center; gap: 16px; padding: 8px 0; border-top: 1px solid var(--border-subtle); } .sb-acces-ligne:first-child { border-top: none; } .sb-acces-qui { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .sb-acces-qui > b { font: 600 13px/1.3 var(--font-sans); color: var(--text-1); } /* Encre 2 : un dernier usage est une donnée. Encre 3 seulement pour ce qui n'a pas eu lieu. */ .sb-acces-usage { font: 400 12px/1.3 var(--font-sans); color: var(--text-2); font-variant-numeric: tabular-nums; } .sb-revocation { grid-column: 1 / -1; } /* Poser le mot de passe de quelqu'un : un panneau en ligne, à la place du bouton qui l'ouvre. Réversible — on en repose un autre —, donc la teinte d'avertissement, jamais le rouge. */ .sb-poser { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--warning-border); border-radius: 10px; background: var(--warning-soft); } .sb-poser .sb-titre { font: 600 13px/1.3 var(--font-sans); color: var(--text-1); } .sb-poser-ligne { display: flex; align-items: center; gap: 10px; } .sb-poser-ligne > .ds-field { flex: 1; min-width: 0; } /* Le code d'un accès neuf : une donnée, montrée une seule fois, à recopier sans faute. */ .sb-code-neuf { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-subtle); } /* Le registre, sous le code d'un accès neuf : même respiration qu'entre deux listes. */ .sb-code-neuf + .ds-sechead { margin-top: 14px; } .sb-code-neuf code { display: block; margin-top: 6px; font: 600 15px/1.4 var(--font-mono, var(--font-sans)); color: var(--text-1); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; } /* Le registre : instant, qui, quoi. */ /* ── Une liste repliée : ses dernières lignes, le reste derrière un bouton (repli.mjs) ────── */ .sb-repli-bouton { margin-top: 8px; } /* Une entrée du registre qui en regroupe plusieurs : la ligne se clique pour les montrer, et le détail passe à la ligne, sur toute la largeur. */ .sb-registre-depli { appearance: none; padding: 0; border: 0; background: none; cursor: pointer; font: 400 12px/1.3 var(--font-sans); color: var(--text-2); text-align: left; display: inline-flex; align-items: center; gap: 5px; } .sb-registre-depli:hover { color: var(--text-1); } .sb-registre-depli:focus-visible { outline: none; border-radius: var(--ds-radius-control); box-shadow: var(--focus-ring-shadow); } .sb-registre-detail { grid-column: 1 / -1; list-style: none; margin: 2px 0 2px 18px; padding: 0 0 0 12px; border-left: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 4px; } /* La classe est répétée : `.sb-registre li` pose une grille de trois colonnes à même spécificité, et sans cela le détail héritait de ses 132 px et se cassait en trois. */ .sb-registre .sb-registre-detail li { display: block; padding: 0; border: 0; font: 400 12px/1.3 var(--font-sans); color: var(--text-2); } .sb-registre { list-style: none; margin: 0; padding: 0; } .sb-registre li { display: grid; grid-template-columns: 132px 96px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--border-subtle); } .sb-registre li:first-child { border-top: none; } .sb-registre-instant { font: 400 12px/1.3 var(--font-sans); color: var(--text-2); font-variant-numeric: tabular-nums; } .sb-registre-qui { font: 600 12px/1.3 var(--font-sans); color: var(--text-1); } .sb-registre-quoi { font: 400 12px/1.3 var(--font-sans); color: var(--text-2); } /* Les sauvegardes : ce que c'est, quand, combien de sujets, et de quoi y revenir. */ .sb-sauvegardes { list-style: none; margin: 0; padding: 0; } .sb-sauvegarde { display: grid; grid-template-columns: minmax(0, 1fr) 132px 116px auto; gap: 12px; align-items: center; min-height: 30px; padding: 4px 0; border-top: 1px solid var(--border-subtle); } .sb-sauvegarde:first-child { border-top: none; } .sb-sauvegarde-quoi { font: 600 13px/1.3 var(--font-sans); color: var(--text-1); font-variant-numeric: tabular-nums; } .sb-sauvegarde-quand, .sb-sauvegarde-detail { font: 400 12px/1.3 var(--font-sans); color: var(--text-2); font-variant-numeric: tabular-nums; } /* « hors fenêtre » est un fait, pas un blanc : encre 2, comme le reste de la ligne (lot M, choix 2). */ .sb-sauvegarde-hors { font: 400 12px/1.3 var(--font-sans); color: var(--text-2); text-align: right; } .sb-restauration { grid-column: 1 / -1; } .sb-sauvegardes + .ds-sechead, .sb-repli + .ds-sechead { margin-top: 14px; } /* La seule phrase fixe de l'outil, sous la liste des sauvegardes. */ .sb-sauvegardes-note { margin-top: 14px; } .sb-restauration-faite { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--border-subtle); font: 400 12px/1.4 var(--font-sans); color: var(--text-2); font-variant-numeric: tabular-nums; }