/* ========================================================================== CCA Documents — base commune (maquette CCADocs/Briefs/documents-web/maquette.html). Le reste du style vit dans chaque composant (.razor.css). Couleurs : UNIQUEMENT des variables --cca-* (CCA.Web.Desktop.UI/wwwroot/cca-tokens.css). Les --doc-* ci-dessous ne sont que des alias : un nom de la maquette → un token. Q-006 (Luc, 2026-09-23) : on garde le « feel » des couleurs du desktop ; les valeurs de la maquette sans token exact (marquées « ≈ ») prennent le token desktop le plus proche, aucun token n'est ajouté. Les alias se résolvent sur , qui porte data-theme (cca-theme.js) : ils suivent le thème. ========================================================================== */ :root { --doc-chrome: var(--cca-dark-color); --doc-chrome-text: var(--cca-dark-color-text); /* Bleu d'accent SUR le fond de contenu (compagnie courante, roue, bordure active). En sombre, le bleu de la barre (#2A4965) disparaît sur #1E1E1E : on prend alors --cca-main-color (#7DA3CC), comme l'accent du mobile sombre. */ --doc-accent: var(--cca-dark-color); --doc-page: var(--cca-grid-header-background); /* ≈ maquette #EEF1F4 */ --doc-content: var(--cca-grid-background); --doc-text: var(--cca-grid-cell-foreground); --doc-text-2: var(--cca-grid-header-foreground); --doc-text-3: var(--cca-grid-read-only-foreground); /* ≈ maquette #8A8A85 */ --doc-grid-alt: var(--cca-grid-alt-row-background); --doc-grid-border: var(--cca-grid-cell-border); --doc-grid-head-bg: var(--cca-grid-header-background); --doc-grid-head-fg: var(--cca-grid-header-foreground); --doc-grid-head-border: var(--cca-grid-header-border); --doc-row-active: var(--cca-grid-row-active-background); /* Ligne choisie (bleu de navigation de la grille) et autres lignes de la même livraison (plus pâle). */ --doc-row-selected: var(--cca-grid-cell-nav-background); --doc-row-group: var(--cca-grid-row-active-background); --doc-nav-border: var(--cca-grid-cell-nav-border); --doc-warn-bg: var(--cca-grid-manual-background); --doc-warn-fg: var(--cca-grid-manual-foreground); --doc-input-bg: var(--cca-grid-cell-background); --doc-input-border: var(--cca-grid-header-border); /* ≈ maquette #B9B9B4 */ --doc-btn-bg: var(--cca-grid-read-only-background); --doc-btn-border: var(--cca-grid-header-border); /* ≈ maquette #C6C6C1 */ --doc-chip-bg: var(--cca-grid-group-header-background); --doc-chip-fg: var(--cca-grid-group-header-foreground); --doc-shadow: var(--cca-shadow-bottom); } [data-theme="dark"] { --doc-accent: var(--cca-main-color); --doc-page: var(--cca-content-background); /* ≈ maquette #171A1D */ --doc-text-2: var(--cca-grid-calc-foreground); /* ≈ maquette #A8A8A3 */ --doc-input-bg: var(--cca-grid-alt-row-background); /* Sombre : row-active (#2A2D2E) ne se distingue pas des lignes alternées (#252526) (Luc, 2026-09-23). Groupe = bleu nuit du pied de groupe de la grille (#1A3550), entre le fond et la sélection (#094771). */ --doc-row-group: var(--cca-grid-group-footer-background); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--doc-page); color: var(--doc-text); font: 13px/1.4 "Segoe UI", system-ui, -apple-system, sans-serif; } button, input, select { font: inherit; color: inherit; } button { cursor: pointer; } :focus-visible { outline: 2px solid var(--doc-nav-border); outline-offset: 1px; } [hidden] { display: none !important; } /* ---- utilitaires de la maquette ---- */ .tnum { font-variant-numeric: tabular-nums; } .muted { color: var(--doc-text-3); } .sub { color: var(--doc-text-2); font-size: 12px; } .ico { width: 16px; height: 16px; fill: currentColor; vertical-align: -3px; } .panel { background: var(--doc-content); border: 1px solid var(--doc-grid-border); } /* Logo selon le thème (Components/CcaLogo.razor) : les deux images sont là, une seule est visible. */ .cca-logo-dark { display: none; } [data-theme="dark"] .cca-logo-light { display: none; } [data-theme="dark"] .cca-logo-dark { display: inline; } /* ---- champs (barre d'outils, connexion) ---- */ .field { display: grid; gap: 3px; } .field label { color: var(--doc-text-2); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; } .field input, .field select { min-height: 30px; padding: 5px 8px; background: var(--doc-input-bg); border: 1px solid var(--doc-input-border); border-radius: 2px; } /* ---- boutons ---- */ .btn { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 5px 12px; background: var(--doc-btn-bg); border: 1px solid var(--doc-btn-border); border-radius: 2px; color: var(--doc-text); } .btn.primary { background: var(--doc-chrome); border-color: var(--doc-chrome); color: var(--doc-chrome-text); } .btn:disabled { opacity: .55; cursor: default; } .btn svg { width: 15px; height: 15px; fill: currentColor; } /* ---- gabarit Blazor : erreur non gérée, progression du chargement ---- */ #blazor-error-ui { position: fixed; bottom: 0; left: 0; z-index: 1000; display: none; width: 100%; padding: 0.6rem 1.25rem 0.7rem 1.25rem; background: var(--cca-specification-alert-color); color: var(--cca-specification-alert-color-text); box-shadow: var(--cca-shadow-bottom); } #blazor-error-ui .dismiss { position: absolute; top: 0.5rem; right: 0.75rem; cursor: pointer; } .loading-progress { position: absolute; inset: 20vh 0 auto 0; display: block; width: 8rem; height: 8rem; margin: 0 auto; } .loading-progress circle { fill: none; stroke: var(--cca-light-color); stroke-width: 0.6rem; transform-origin: 50% 50%; transform: rotate(-90deg); } .loading-progress circle:last-child { stroke: var(--cca-dark-color); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; transition: stroke-dasharray 0.05s ease-in-out; } .loading-progress-text { position: absolute; inset: calc(20vh + 3.25rem) 0 auto 0.2rem; font-weight: bold; text-align: center; } .loading-progress-text:after { content: var(--blazor-load-percentage-text, "Chargement"); }