/* La page des commandes : mise en page et classes `ca-*`, sur les jetons du DS (jamais une couleur, un rayon ou une ombre inventés). Les composants du DS injectent leur propre CSS. */ /* Barre de défilement toujours présente : ouvrir une fiche ne décale pas l'interface. Mesuré dans Chrome 152 : scrollbar-gutter: stable sur html ne réserve rien en mode standard, overflow-y: scroll si. */ 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 qui défile. Le thème (`data-theme`) se pose sur cette application, jamais sur depuis la logique : son fond et son encre suivent les jetons. */ .ca-app { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg-base); color: var(--text-1); } .ca-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); } .ca-topbar h1 { margin: 0; font: var(--type-title); letter-spacing: -0.01em; color: var(--text-1); } .ca-titres { display: flex; flex-direction: column; gap: 3px; } /* Le nom de la boutique, seule fois où il s'écrit : encre 2, lisible à 4,5:1 (axe-core, #7) ; l'encre 3 du sous-titre de SubPageHeader tombait à 3:1 sur 12 px. */ .ca-topbar .ca-lieu { font: 400 12px/1 var(--font-sans); color: var(--text-2); } .ca-compteurs { display: flex; align-items: center; gap: 14px; margin-left: 18px; } .ca-compteur { display: flex; align-items: baseline; gap: 5px; padding-left: 14px; border-left: 1px solid var(--border); } .ca-compteur b { font: 700 14px/1 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--text-1); } .ca-compteur span { font: 400 12px/1 var(--font-sans); color: var(--text-2); } .ca-compteur.est-vide b { color: var(--text-3); font-weight: 600; } .ca-topbar .ca-fin { margin-left: auto; display: flex; align-items: center; gap: 10px; } .ca-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; } /* Libellé présent pour les lecteurs d'écran, invisible à l'œil (filtres de la table). */ .ca-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Écran du code d'accès : une seule carte, centrée. */ .ca-contenu--code { align-items: center; justify-content: center; padding-bottom: 96px; } .ca-code-carte { width: 360px; } .ca-code-carte form { display: flex; flex-direction: column; gap: 14px; } .ca-code-carte .ca-pied { margin: 0; } /* Filtres dans l'en-tête de la table. */ .ca-filtres { display: flex; align-items: center; gap: 8px; } .ca-filtres .ca-champ { width: 198px; } .ca-filtres .ca-recherche { width: 160px; } /* Grille des champs, partagée par la création et la fiche. */ .ca-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 14px; } .ca-grille .ca-large { grid-column: span 2; } .ca-grille .ca-pleine { grid-column: 1 / -1; } .ca-champs { display: flex; flex-direction: column; gap: 14px; } .ca-champs > .ds-sechead, .ca-pliage .ds-sechead { margin: 10px 0 -2px; } .ca-lien { display: flex; align-items: flex-end; gap: 6px; } .ca-lien > div:first-child { flex: 1 1 auto; min-width: 0; } .ca-pied { display: flex; align-items: center; gap: 10px; margin-top: 4px; } .ca-pied .ca-fin { margin-left: auto; display: flex; gap: 10px; align-items: center; } .ca-refus { font: 500 12px/1.3 var(--font-sans); color: var(--critical-ink); } /* Champ obligatoire oublié : le tour de la case passe en rouge, le regard y va. */ .ca-erreur .ds-dd__btn { border-color: var(--critical) !important; box-shadow: 0 0 0 2px var(--critical-soft) !important; } /* Titre « Nouvelle commande » et son « + » à la taille du titre (15 px) : 24 px de côté. */ .ca-titre-plus { display: inline-flex; align-items: center; gap: 10px; } .ca-titre-plus .ds-btn { --_h: 24px; height: 24px; width: 24px; padding: 0; justify-content: center; } /* Dépliage du bloc facultatif : la rangée de grille passe de 0fr à 1fr (accordéon), 210 ms ease-out du DS. prefers-reduced-motion est déjà neutralisé par motion.css sur tout .ds-root. */ .ca-pliage { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--dur) var(--ease-out), opacity var(--dur-fast) var(--ease-out); } .ca-pliage.est-ouvert { grid-template-rows: 1fr; opacity: 1; } .ca-pliage > div { overflow: hidden; min-height: 0; display: flex; flex-direction: column; gap: 14px; } .ca-chevron-pliage { display: inline-flex; transition: transform var(--dur) var(--ease-out); } .ca-chevron-pliage.est-ouvert { transform: rotate(180deg); } /* La table : code B en encre pleine, dates en tabulaire, échéance en texte sauf l'exception. */ .ca-code { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; color: var(--text-1); } .ca-date { font-variant-numeric: tabular-nums; color: var(--text-2); } .ca-echeance { font: 400 12px/1 var(--font-sans); color: var(--text-2); font-variant-numeric: tabular-nums; } .ca-vide-liste { padding: 28px 20px; font: 400 13px/1.4 var(--font-sans); color: var(--text-2); } .ca-chevron { color: var(--text-3); display: inline-flex; transition: transform var(--dur-fast) var(--ease-out); } .ca-ouverte .ca-chevron { transform: rotate(90deg); color: var(--accent); } /* La ligne ouverte se dit par son fond et le chevron tourné, sans filet accent (arbitrage de Célian du 3 septembre). */ .ca-ouverte td { background: var(--accent-softer); border-bottom-color: transparent; } /* La fiche dépliée sous sa ligne : champs à gauche, colonne Suivi et Journal à droite. */ .ca-fiche-cellule { white-space: normal !important; padding: 0 !important; background: var(--surface-1); } .ca-fiche { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 0; } .ca-fiche-champs { padding: 18px 20px 16px; border-right: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 14px; } .ca-fiche-cote { padding: 18px 20px 16px; display: flex; flex-direction: column; gap: 16px; background: var(--surface-2); } .ca-fiche .ca-pied { grid-column: 1 / -1; margin: 0; padding: 12px 20px; border-top: 1px solid var(--border-subtle); } .ca-fiche .ca-pied .ca-fin { align-items: flex-end; } /* La confirmation de suppression prend la place de son bouton, à gauche du pied, sans pousser les boutons de droite hors de vue. */ .ca-fiche .ca-pied .ca-suppression { width: 360px; max-width: 100%; box-sizing: border-box; } .ca-probleme { display: grid; grid-template-columns: 1fr; gap: 10px; } /* Le bloc « Par » : le champ, puis le refus en ligne dessous ; dans le pied de la fiche, le refus se lit à gauche du champ. */ .ca-par { display: flex; flex-direction: column; gap: 8px; } .ca-fin .ca-par { flex-direction: row-reverse; align-items: flex-end; gap: 10px; } /* Colonne droite : une fiche de propriétés, libellé à gauche, valeur à droite. */ .ca-props { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 10px 12px; align-items: center; margin: 0; } .ca-props dt { margin: 0; font: 500 12px/1.3 var(--font-sans); color: var(--text-2); } .ca-props dd { margin: 0; min-width: 0; font: 400 var(--text-sm)/1.3 var(--font-sans); color: var(--text-1); font-variant-numeric: tabular-nums; } .ca-props dd.est-absent { color: var(--text-3); } .ca-props dd .ds-btn { max-width: 100%; } .ca-vide { font: 400 12px/1 var(--font-sans); color: var(--text-3); } .ca-journal { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .ca-journal li { display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 7px 0; border-top: 1px solid var(--border-subtle); font: 400 12px/1.4 var(--font-sans); color: var(--text-1); } .ca-journal li:first-child { border-top: none; padding-top: 0; } /* L'instant d'une entrée est une donnée (règle des trois encres) : encre 2, pas encre 3 (3:1 sur 12 px, axe-core). */ .ca-journal time { font-variant-numeric: tabular-nums; color: var(--text-2); } .ca-journal small { display: block; font: 400 var(--text-2xs)/1.3 var(--font-sans); color: var(--text-2); } /* Vue Paramètres (docs/maquettes/parametres.html) : cinq cartes empilées, lues de haut en bas, 980 px au plus. */ .ca-contenu--parametres { max-width: 980px; gap: 14px; } .ca-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; } /* Grille partagée entre les lignes (subgrid) : la colonne du nombre prend la même largeur partout, donc tous les champs de nom font la même largeur. */ .ca-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; } .ca-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); } .ca-liste li:first-child { border-top: none; } /* « n commandes » est une donnée (encre 2) ; « aucune commande », ce qui n'a pas eu lieu, s'écrit en retrait (encre 3). */ .ca-liste .ca-nombre { font: 400 12px/1 var(--font-sans); color: var(--text-2); font-variant-numeric: tabular-nums; text-align: right; } .ca-liste .ca-nombre.est-absent { color: var(--text-3); } /* Le nom est un champ de saisie, le même que ceux du panneau de création : on écrit dedans, on clique ailleurs, c'est enregistré. Aucun bouton pour le dire. */ .ca-nom { min-width: 0; } .ca-ajout { display: flex; gap: 8px; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-subtle); } .ca-ajout > div:first-child { flex: 1 1 auto; } .ca-ajout + .ca-refus { display: block; margin-top: 8px; } /* Une ligne de réglage : titre et détail à gauche, le contrôle à droite. */ .ca-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); } .ca-reglage:first-child { border-top: none; padding-top: 0; } .ca-reglage:last-child { padding-bottom: 0; } .ca-reglage .ca-titre { display: block; font: 600 13px/1.3 var(--font-sans); color: var(--text-1); } .ca-reglage .ca-detail { display: block; margin-top: 3px; font: 400 12px/1.3 var(--font-sans); color: var(--text-2); } .ca-reglage .ca-detail.est-absent { color: var(--text-3); } .ca-reglage .ca-etroit { width: 96px; } .ca-unite { display: flex; align-items: center; gap: 8px; } .ca-unite > span { font: 400 var(--text-sm)/1 var(--font-sans); color: var(--text-2); } .ca-chips { display: flex; gap: 6px; } .ca-acces { display: flex; gap: 8px; align-items: flex-start; } .ca-acces > div:first-child { width: 260px; }