@charset "utf-8"; /* ════════════════════════════════════════════════════════════════════════ DIGITS · CSS MÉTIER — suivi des règlements de services ───────────────────────────────────────────────────────────────────────── RÈGLE (iManage DESIGN.md) : ce fichier ne contient QUE 1. les tokens de marque DIGITS (--accent et dérivés) ; 2. les composants propres au projet, préfixés `dg-*`. Interdits ici : tout CSS de composant du socle (im-page-header, list-view, form-container…), toute surcharge de Bootstrap, toute valeur en dur. Une surcharge indispensable irait dans un `css/override.css` dédié, chargé AVANT app.css. Il n'y en a aucune pour l'instant. Ordre de chargement : bootstrap → composants iManage → app.css ════════════════════════════════════════════════════════════════════════ */ /* Inter — self-hostée, identique aux autres projets iManage. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/inter-var.woff2") format("woff2"); } /* ════════════════════════════════════════════════════════════════════════ 1. TOKENS DE MARQUE — la seule couleur que l'app redéfinit ════════════════════════════════════════════════════════════════════════ */ :root { /* Vert DIGITS, relevé sur la charte du pitchdeck (#0a7c42). Contraste du blanc sur ce vert : 4,84:1 → AA sur du texte normal. */ --accent: #0a7c42; --accent-hover: #075c31; --accent-active: #054526; --accent-soft: #e7f3ec; --accent-border: #b9dcc8; /* Vert pour du TEXTE posé sur --accent-soft : --accent y tombe sous 4,5:1. --accent-hover donne 6,1:1 sans introduire de couleur nouvelle. */ --accent-ink: #075c31; /* Fond de page — porté par , jamais par (voir override.css §6). Un demi-ton sous le blanc des cartes : sans cet écart, un panneau posé sur la page ne se distingue plus d'elle. */ --bg-page: #FAFAFB; /* ── ARRONDIS : 4px PARTOUT (décision du propriétaire, 06/09/2026) ──── L'échelle du socle va de 4 à 20px selon l'élément ; elle est aplatie ici à un seul cran. app.css étant chargé après imanage.css, ces redéfinitions priment sans qu'aucune règle du socle soit touchée — c'est un réglage de JETONS, pas une surcharge, d'où sa place ici et non dans override.css. Les éléments réellement RONDS ne passent pas par ces jetons : ils portent `border-radius: 50%` (avatars, pastilles de statut, badges numériques) et restent ronds. Seul `--radius-full`, qui servait aux pilules, s'aplatit — c'est voulu. */ --radius-xs: 4px; --radius-sm: 4px; --radius-md: 4px; --radius-lg: 4px; --radius-xl: 4px; --radius-full: 4px; --radius: 4px; /* Propagation à Bootstrap — prescrite par iManage/COLORS.md. Sans ces variables, `.btn-primary` reste au bleu Bootstrap : le bouton principal de chaque écran sort d'une autre marque que le reste de l'application. */ --bs-primary: #0a7c42; --bs-primary-rgb: 10, 124, 66; --bs-link-color: #0a7c42; --bs-link-hover-color: #075c31; } .btn-primary { --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: var(--accent-hover); --bs-btn-hover-border-color: var(--accent-hover); --bs-btn-active-bg: var(--accent-active); --bs-btn-active-border-color: var(--accent-active); } .btn-outline-primary { --bs-btn-color: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: var(--accent); --bs-btn-hover-border-color: var(--accent); --bs-btn-active-bg: var(--accent-hover); } .badge.bg-primary { background-color: var(--accent) !important; } a { color: var(--accent); } a:hover { color: var(--accent-hover); } .page-item.active .page-link { background-color: var(--accent); border-color: var(--accent); } /* ════════════════════════════════════════════════════════════════════════ 2. COMPOSANTS MÉTIER `dg-*` ════════════════════════════════════════════════════════════════════════ */ /* ── 2.1 Enveloppe de page ──────────────────────────────────────────────── Une seule responsabilité : le retrait haut commun à tous les écrans, pour que deux pages différentes démarrent à la même hauteur. Le reste de l'entête vient de `im-page-header` (socle) — ne pas le réassembler ici. */ .dg-page { padding-top: var(--spacing-lg); } /* ── 2.1ter Marque dans la barre ────────────────────────────────────────── Le logotype est blanc sur fond NOIR opaque (JPEG, pas de transparence) : il se fond dans la barre sombre sans qu'on ait à lui poser un fond. Il tient dans la hauteur d'un contrôle, sinon il déforme la barre. */ .dg-brand { display: inline-flex; align-items: center; padding: 0; } .dg-brand-logo { height: 18px; width: auto; display: block; border-radius: var(--radius-xs); } /* ── 2.1quater Rangée des onglets ───────────────────────────────────────── Les onglets à gauche, les filtres de l'écran à droite, sur une SEULE ligne. Le filet du classeur passe sous la rangée entière, pas seulement sous les onglets : c'est lui qui fait lire « dossier », il doit traverser. Les onglets perdent donc leur propre filet et leur marge, sinon on en verrait deux, décalés. */ .dg-barre-onglets { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--spacing-md); border-bottom: 1px solid var(--border-color); margin-bottom: var(--spacing-lg); } .dg-barre-onglets > .im-tabs { border-bottom: 0; margin-bottom: 0; } .dg-barre-filtres { display: flex; align-items: center; gap: var(--spacing-sm); padding-bottom: var(--spacing-sm); margin-left: auto; } .dg-barre-filtres > .form-select, .dg-barre-filtres > .form-control { width: auto; flex: 0 0 auto; } /* Sous 768px la rangée se casse : les onglets défilent, les filtres passent en dessous et prennent la largeur — un menu étroit se vise mal au doigt. */ @media (max-width: 767.98px) { .dg-barre-filtres { width: 100%; margin-left: 0; } .dg-barre-filtres > .form-select, .dg-barre-filtres > .form-control { flex: 1 1 0; width: auto; } } /* ── 2.1bis Filtre d'entête ─────────────────────────────────────────────── Tout filtre d'écran porte cette classe. Elle ne fixe qu'une largeur confortable : le comportement de rangée est posé une fois dans override.css, pour qu'aucun écran ne puisse l'oublier. */ .dg-filtre { min-width: 9rem; max-width: 14rem; } /* ── 2.2 Bandeau de chiffres clés (tableau de bord) ─────────────────────── */ .dg-kpis { display: grid; grid-template-columns: 1fr; gap: var(--spacing-lg); margin-bottom: var(--spacing-2xl); } /* UNE seule rangée dès qu'il y a la place, quel que soit le nombre de cartes : `auto-fit` répartit ce qu'on lui donne. Trois indicateurs empilés en 2 + 1 font croire à deux familles de chiffres là où il n'y en a qu'une. */ @media (min-width: 768px) { .dg-kpis { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); } } .dg-kpi { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: var(--spacing-lg) var(--spacing-xl); display: flex; flex-direction: column; gap: var(--spacing-xs); } /* Le libellé EXPLIQUE le chiffre : un cran sous le corps, en gris secondaire (DESIGN.md §1). Jamais --text-tertiary : le contraste y tombe à ~3:1. */ .dg-kpi-label { font-size: var(--font-size-sm); color: var(--text-secondary); text-transform: none; } /* Le montant est un TITRE de bloc, pas du corps de texte : 21px = R × φ, le seul palier autorisé au-dessus du menu. */ .dg-kpi-value { font-size: var(--font-size-xl); font-weight: 600; color: var(--text-primary); line-height: 1.2; font-variant-numeric: tabular-nums; } .dg-kpi-value--accent { color: var(--accent-ink); } .dg-kpi-value--danger { color: var(--status-danger); } .dg-kpi-meta { font-size: var(--font-size-xs); color: var(--text-tertiary); } /* ── 2.3 Pastilles de statut ────────────────────────────────────────────── Le statut se lit à la COULEUR ET AU TEXTE : la couleur seule exclut les daltoniens et ne survit pas à l'impression en noir et blanc. */ .dg-statut { display: inline-flex; align-items: center; gap: var(--spacing-xs); padding: 2px var(--spacing-sm); border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: 600; white-space: nowrap; border: 1px solid transparent; } .dg-statut::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .dg-statut--brouillon { background: var(--bg-subtle); color: var(--text-secondary); border-color: var(--border-color); } .dg-statut--emise { background: var(--status-info-soft); color: var(--status-info); } .dg-statut--partielle { background: var(--status-warning-soft);color: var(--status-warning); } .dg-statut--reglee { background: var(--status-success-soft);color: var(--status-success); } .dg-statut--annulee { background: var(--status-danger-soft); color: var(--status-danger); } .dg-statut--retard { background: var(--status-danger-soft); color: var(--status-danger); } /* Règlements */ .dg-statut--annonce { background: var(--status-warning-soft);color: var(--status-warning); } .dg-statut--confirme { background: var(--status-success-soft);color: var(--status-success); } .dg-statut--rejete { background: var(--status-danger-soft); color: var(--status-danger); } /* ── 2.4 Montants ───────────────────────────────────────────────────────── Chiffres tabulaires : sans eux, une colonne de montants ne s'aligne pas verticalement et l'œil ne peut plus comparer deux lignes d'un coup. */ .dg-montant { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; } .dg-montant--du { color: var(--status-danger); font-weight: 600; } .dg-montant--solde { color: var(--text-tertiary); } .dg-devise { font-size: var(--font-size-xs); color: var(--text-tertiary); margin-left: 2px; } /* Le code de la monnaie accolé à un montant, toujours en petit : le chiffre est ce qu'on lit, la devise ne sert qu'à distinguer les francs des dollars. Elle HÉRITE la couleur du montant — un reste dû rouge garde sa devise rouge, sinon la ligne se casse en deux. Posé par DG.montant(). */ .dg-mnt-devise { font-size: var(--font-size-xs); font-weight: 500; } /* ── 2.5 Panneau (fiche client, fiche facture) ────────────────────────── */ .dg-panel { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: var(--spacing-xl); margin-bottom: var(--spacing-2xl); } .dg-panel-title { font-size: var(--font-size-menu); font-weight: 600; margin: 0 0 var(--spacing-md); color: var(--text-primary); } .dg-panel + .dg-panel { margin-top: var(--spacing-2xl); } /* Couple libellé / valeur d'une fiche. */ .dg-champs { display: grid; grid-template-columns: 1fr; gap: var(--spacing-md); } @media (min-width: 768px) { .dg-champs { grid-template-columns: repeat(2, 1fr); } } .dg-champ-label { font-size: var(--font-size-sm); color: var(--text-secondary); display: block; margin-bottom: 2px; } .dg-champ-valeur { font-size: var(--font-size-base); color: var(--text-primary); } .dg-champ-valeur:empty::after { content: "—"; color: var(--text-tertiary); } /* ── 2.6 Échéancier — une ligne = une période due ────────────────────── */ .dg-echeance { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md) 0; border-bottom: 1px solid var(--border-color); } .dg-echeance:last-child { border-bottom: 0; } .dg-echeance-periode { flex: 1 1 auto; min-width: 0; } .dg-echeance-client { font-size: var(--font-size-base); color: var(--text-primary); } .dg-echeance-detail { font-size: var(--font-size-sm); color: var(--text-secondary); } /* Une échéance dépassée se signale par son MONTANT en rouge et par sa mention de retard — jamais par une barre ni un liseré. */ .dg-echeance--retard .dg-montant { color: var(--status-danger); } /* ── 2.7 Formulaires (tiroirs et overlays) ──────────────────────────────── Le socle ne fournit que le CONTENANT (form-container) ; la mise en page interne d'un formulaire appartient au projet. Bootstrap fournit les contrôles (.form-control, .form-select) — on n'y touche pas. */ .dg-form { display: flex; flex-direction: column; gap: var(--spacing-lg); } /* Les actions restent en haut, visibles sans faire défiler la saisie : sur un tiroir long, un bouton « Enregistrer » en pied se découvre trop tard. */ .dg-form-actions { display: flex; justify-content: flex-end; gap: var(--spacing-sm); position: sticky; top: 0; z-index: 2; padding-bottom: var(--spacing-sm); background: var(--bg-surface); } .dg-form-group { display: flex; flex-direction: column; gap: var(--spacing-xs); } .dg-form-row { display: grid; grid-template-columns: 1fr; gap: var(--spacing-lg); } @media (min-width: 768px) { .dg-form-row { grid-template-columns: 1fr 1fr; } } .dg-form-label { font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary); } .dg-required { color: var(--status-danger); } /* Texte d'aide : un cran sous le corps, en gris secondaire (DESIGN.md §1). */ .dg-hint { font-size: var(--font-size-sm); color: var(--text-secondary); font-weight: 400; } /* ── 2.6bis Pastille d'état en tête de ligne ────────────────────────────── Un disque de 8px, sans bordure : il dit l'état d'une facture avant qu'on lise le reste de la ligne. La couleur ne porte jamais seule le sens — le `title` et l'`aria-label` la doublent (DESIGN.md §6). */ .dg-etat { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; } .dg-etat--nontransmis { background: var(--status-danger); } .dg-etat--attente { background: var(--status-warning); } .dg-etat--paye { background: var(--status-success); } .dg-etat--annule { background: var(--text-tertiary); } /* ── 2.6ter Case « Payé » de la fiche facture ───────────────────────────── Le suivi tient en une case. Elle vit dans la rangée d'actions, donc à la hauteur des boutons : 30px, comme eux. */ .dg-case-paye { display: inline-flex; align-items: center; gap: var(--spacing-xs); height: 30px; font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary); cursor: pointer; } .dg-case-paye input { cursor: pointer; margin: 0; } /* ── 2.6quater Actions de ligne ─────────────────────────────────────────── Les boutons d'action d'une rangée tiennent sur UNE ligne, séparés d'un espace. Laissés libres dans une cellule étroite, ils passent l'un sous l'autre et doublent la hauteur de toutes les rangées du tableau. */ .dg-actions-ligne { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: var(--spacing-xs); } /* Catégorie d'un service : une pastille neutre, sous la désignation. Elle classe, elle n'alerte pas — d'où le gris et non une couleur de statut. */ .dg-statut--categorie { background: var(--bg-subtle); color: var(--text-secondary); margin-top: var(--spacing-xs); } /* ── 2.7bis Lignes d'un contrat ─────────────────────────────────────────── Le contrat porte les lignes qui seront facturées : libellé, détails, quantité, prix unitaire. Grille et non tableau — les quatre champs doivent pouvoir se replier l'un sous l'autre sur un écran étroit. */ .dg-lignes { display: flex; flex-direction: column; gap: var(--spacing-sm); } .dg-ligne { display: grid; grid-template-columns: 1fr; gap: var(--spacing-xs); padding: var(--spacing-sm); border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-subtle); } .dg-ligne-chiffres { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--spacing-xs); align-items: center; } .dg-ligne-total { font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary); text-align: right; padding-top: var(--spacing-xs); } .dg-lignes-somme { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--spacing-sm); border-top: 1px solid var(--border-color); font-weight: 600; } /* ── 2.7ter Sélecteur de période mensuelle ──────────────────────────────── « ‹ Septembre 2026 › », porté de LEMAI (js/scripts/dg_periode.js). Il vit dans la rangée d'onglets, à droite : il pilote tout le contenu de l'écran. Ses métriques sont celles des boutons — 30px de haut, bordure comprise — pour qu'il se fonde dans la rangée au lieu d'y détonner. */ .dg-periode-hote { position: relative; display: inline-block; } .dg-periode { display: inline-flex; align-items: stretch; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-surface); overflow: hidden; transition: border-color var(--transition-fast); } .dg-periode:hover { border-color: var(--accent); } .dg-periode-nav, .dg-periode-libelle { height: 28px; background: none; border: 0; font-size: var(--font-size-sm); color: var(--text-primary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background var(--transition-fast), color var(--transition-fast); } .dg-periode-nav { width: 28px; color: var(--text-secondary); } .dg-periode-libelle { padding: 0 var(--spacing-md); gap: var(--spacing-xs); font-weight: 600; min-width: 9.5rem; /* Séparateurs internes : un filet plein de 1px, jamais un accent épais. */ border-left: 1px solid var(--border-color); border-right: 1px solid var(--border-color); } .dg-periode-nav:hover, .dg-periode-libelle:hover { background: var(--accent-soft); color: var(--accent-ink); } .dg-periode-nav:disabled { opacity: .35; pointer-events: none; } /* Panneau : la grille des douze mois. */ .dg-periode-pop { position: absolute; right: 0; z-index: 60; margin-top: var(--spacing-xs); background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: var(--spacing-sm); min-width: 15rem; } .dg-periode-pop[hidden] { display: none; } .dg-periode-pop-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-sm); } .dg-periode-pop-tete > span { font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary); } .dg-periode-a-prec, .dg-periode-a-suiv { width: 26px; height: 26px; border: 0; background: none; color: var(--text-secondary); cursor: pointer; border-radius: var(--radius-xs); transition: background var(--transition-fast), color var(--transition-fast); } .dg-periode-a-prec:hover, .dg-periode-a-suiv:hover { background: var(--accent-soft); color: var(--accent-ink); } .dg-periode-a-prec:disabled, .dg-periode-a-suiv:disabled { opacity: .35; pointer-events: none; } .dg-periode-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-xs); } .dg-periode-m { height: 30px; border: 1px solid transparent; background: none; border-radius: var(--radius-xs); font-size: var(--font-size-sm); color: var(--text-primary); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); } .dg-periode-m:hover { background: var(--accent-soft); color: var(--accent-ink); } .dg-periode-m:disabled { opacity: .3; pointer-events: none; } /* « Toute l'année » barre les trois colonnes, sous les douze mois : c'est une PORTÉE, pas un mois de plus. */ .dg-periode-m--annee { grid-column: 1 / -1; margin-top: var(--spacing-xs); padding-top: var(--spacing-xs); border-top: 1px solid var(--border-color); border-radius: 0 0 var(--radius-xs) var(--radius-xs); } .dg-periode-m.is-active { background: var(--accent); color: var(--text-on-dark); border-color: var(--accent); } /* Rangée « Écritures plus anciennes » : elle traverse toute la grille du journal, au-dessus de la plus ancienne ligne affichée. */ .dg-jrn-suite { grid-column: 1 / -1; display: flex; justify-content: center; padding: var(--spacing-sm) 0; } /* ── 2.8 Tuile client ─────────────────────────────────────────────────── */ .dg-tile { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: var(--spacing-lg); height: 100%; display: flex; flex-direction: column; gap: var(--spacing-sm); cursor: pointer; transition: box-shadow var(--transition-fast), border-color var(--transition-fast); } .dg-tile:hover { box-shadow: var(--shadow-md); border-color: var(--accent-border); } /* Un client qui doit de l'argent se repère au MONTANT, en rouge, dans la tuile — pas à un liseré. Aucune bordure épaisse dans cette application. */ .dg-tile-head { display: flex; align-items: center; gap: var(--spacing-md); } .dg-tile-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: 16px; } /* Un client redevable se signale par son AVATAR en rouge — l'élément que l'œil rencontre en premier sur la tuile, et qui ne coûte aucun ornement. Placé APRÈS la règle de base : à spécificité égale, c'est le dernier qui gagne. */ .dg-tile-avatar--du { background: var(--status-danger-soft); color: var(--status-danger); } .dg-tile-name { font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); line-height: 1.35; /* La coupure tombait au milieu d'un mot sur les raisons sociales longues. La césure la place entre deux syllabes ; overflow-wrap sert de filet pour les sigles d'un seul tenant, qui ne se césurent pas. */ hyphens: auto; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .dg-tile-row { display: flex; align-items: center; gap: var(--spacing-xs); font-size: var(--font-size-sm); color: var(--text-secondary); min-width: 0; } .dg-tile-row > span:not(.bi) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dg-tile-foot { margin-top: auto; padding-top: var(--spacing-sm); border-top: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; font-size: var(--font-size-xs); color: var(--text-tertiary); } /* ── 2.10 État vide ───────────────────────────────────────────────────── */ .dg-vide { text-align: center; padding: var(--spacing-2xl) var(--spacing-lg); color: var(--text-secondary); font-size: var(--font-size-sm); } .dg-vide .bi { font-size: 28px; display: block; margin-bottom: var(--spacing-sm); color: var(--text-tertiary); } /* ── 2.11 Pastille d'ancienneté d'une créance (liste « à relancer ») ───── L'âge de la dette se lit d'un coup d'œil, SANS ornement de bord : une pastille ronde, aux bornes de la balance âgée déjà en place (30 / 90 jours), toujours doublée d'un `title` — la couleur seule exclut les daltoniens et disparaît à l'impression noir et blanc. La forme vient de `.dg-etat`. */ .dg-etat--retard-recent { background: var(--status-info); } .dg-etat--retard-installe { background: var(--status-warning); } .dg-etat--retard-ancien { background: var(--status-danger); } /* ── 2.12 Journal du compte client — relevé débit / crédit ─────────────── Le relevé qu'on envoie au client quand il conteste. Une grille UNIQUE par devise — et non une suite de lignes indépendantes : c'est la seule façon d'aligner les colonnes de montants d'une écriture à l'autre, et deux soldes qui ne s'alignent pas ne se comparent plus. Les cellules sont les enfants DIRECTS de la grille ; le filet de séparation est porté par chaque cellule (1px, jamais davantage, jamais de liseré) — posé sur la ligne, une cellule vide de montant l'interromprait. Débit et crédit ne se distinguent JAMAIS par la seule couleur : le mot est écrit dans le détail de l'écriture, la colonne le répète en tête, le signe le confirme. La couleur ne fait que redoubler. */ .dg-jrn-bloc + .dg-jrn-bloc { margin-top: var(--spacing-2xl); } .dg-jrn-entete { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--spacing-md); margin-bottom: var(--spacing-md); } .dg-jrn-entete .dg-panel-title { margin-bottom: 0; } .dg-jrn-devise { font-size: var(--font-size-sm); font-weight: 600; color: var(--text-secondary); } .dg-jrn-soldes { font-size: var(--font-size-sm); color: var(--text-secondary); } .dg-jrn { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content max-content max-content; column-gap: var(--spacing-md); /* Surtout PAS d'align-items : les cellules doivent s'étirer sur toute la hauteur de leur écriture. Alignées sur la ligne de base, elles portaient chacune son filet à SA propre hauteur, et un libellé qui passe à la ligne décalait le trait sous le montant — le relevé se lisait en escalier. */ } .dg-jrn > * { padding: var(--spacing-sm) 0; border-bottom: 1px solid var(--border-color); min-width: 0; } .dg-jrn-th { font-size: var(--font-size-xs); font-weight: 600; color: var(--text-secondary); } .dg-jrn-th--mnt { text-align: right; } .dg-jrn-date { font-size: var(--font-size-sm); color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; } .dg-jrn-titre { font-size: var(--font-size-base); color: var(--text-primary); } .dg-jrn-detail { font-size: var(--font-size-sm); color: var(--text-secondary); } .dg-jrn-mnt { font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; } .dg-jrn-mnt--credit { color: var(--status-success); } .dg-jrn-solde { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; } /* Le pied porte les totaux ; le dernier filet de la grille lui sert de trait de séparation, il n'en ajoute pas un second. */ .dg-jrn-pied { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--spacing-md); padding-top: var(--spacing-sm); font-size: var(--font-size-sm); color: var(--text-secondary); } /* Sur un téléphone, cinq colonnes de montants ne tiennent pas. La date prend sa propre ligne au-dessus de l'écriture, et la cellule de montant vide disparaît : chaque écriture retombe alors sur exactement trois colonnes — écriture, mouvement, solde — sans rien perdre, le mot « Débit » ou « Crédit » restant écrit dans le détail. */ @media (max-width: 767.98px) { .dg-jrn { grid-template-columns: minmax(0, 1fr) max-content max-content; } .dg-jrn > .dg-jrn-th { display: none; } .dg-jrn > .dg-jrn-date { grid-column: 1 / -1; padding-bottom: 0; border-bottom: 0; } .dg-jrn > .dg-jrn-mnt:empty { display: none; } } /* ════════════════════════════════════════════════════════════════════════ 3. IMPRESSION — les règles communes viennent de imanage-print.css. Ici : uniquement ce qui est propre aux documents DIGITS. ════════════════════════════════════════════════════════════════════════ */ @media print { /* Les pastilles perdent leur fond à l'impression (économie d'encre, et un aplat pâle sort gris sale) : le texte suffit, il est déjà explicite. */ .dg-statut { background: none; border-color: currentColor; } .dg-kpi, .dg-panel { box-shadow: none; break-inside: avoid; } .dg-echeance { break-inside: avoid; } /* Un relevé de vingt écritures ne tient pas sur une page : le panneau du journal est le seul qui doive pouvoir se couper. Les écritures, elles, restent insécables — une ligne coupée en deux ne se lit plus. */ .dg-panel--journal { break-inside: auto; } .dg-jrn > * { break-inside: avoid; } }