/* ──────────────────────────────────────────────────────── Ngento — © 2026 Jean-François Pellet. Tous droits réservés. Auteur : Jean-François Pellet. Œuvre protégée (droit d'auteur, L111-1 CPI). ref:NGENTOJFP-1f4d9e7a2b6c4f80 ──────────────────────────────────────────────────────── */ /* Bloc compta_pro — UI mobile-first, sobre, lisible */ :root { /* Thème CLAIR moderne */ --c-bg: #f4f6fb; --c-surface: #ffffff; --c-surface-2: #eef2f8; --c-border: #e4e9f0; --c-text: #1e293b; --c-muted: #64748b; --c-accent: #2563eb; --c-accent-soft: #e8f0fe; --c-success: #16a34a; --c-warning: #d97706; --c-error: #dc2626; --c-debit: #b45309; --c-credit: #2563eb; --radius: 12px; --radius-sm: 8px; --shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.07); --shadow-lg: 0 10px 30px rgba(16,24,40,.10); } * { box-sizing: border-box; } body.compta-body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: var(--c-bg); color: var(--c-text); line-height: 1.5; font-size: 15px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Conteneur de requête (axe inline seul) : le repli de la barre d'outils se fonde sur la LARGEUR RÉELLE de la colonne, pas sur le viewport. Sur desktop ng-frame réduit le à 440px alors que le viewport reste large -> les @media viewport ne se déclenchaient pas et les menus débordaient sur 3 lignes (régression 2026-06-28). Voir @container plus bas. inline-size = pas de containment de hauteur -> aucun effet sur le header sticky. */ container: compta / inline-size; } .compta-header { background: var(--c-surface); border-bottom: 1px solid var(--c-border); box-shadow: var(--shadow); padding: 0.8em 1em; display: grid; gap: 0.6em; grid-template-columns: 1fr auto; align-items: center; position: sticky; top: 0; z-index: 30; } .compta-title { margin: 0; font-size: 1.15em; font-weight: 700; } .compta-nav { grid-column: 1 / -1; display: flex; gap: 0.15em; flex-wrap: wrap; overflow-x: auto; } .compta-nav a { color: var(--c-muted); text-decoration: none; padding: 0.45em 0.85em; border-radius: 6px; font-weight: 500; white-space: nowrap; transition: background 0.15s, color 0.15s; } .compta-nav a:hover { background: var(--c-surface-2); color: var(--c-text); } .compta-nav a.active { background: var(--c-accent); color: white; } .compta-exercice-switch { display: flex; align-items: center; gap: 0.5em; font-size: 0.9em; } .compta-exercice-switch select { padding: 0.3em 0.5em; } .compta-main { max-width: 1400px; margin: 0 auto; padding: 1em; } .compta-footer { text-align: center; padding: 1.5em 1em; color: var(--c-muted); border-top: 1px solid var(--c-border); margin-top: 3em; } h1, h2, h3 { color: var(--c-text); } h2 { font-size: 1.3em; margin: 0.5em 0 0.8em; } h3 { font-size: 1.05em; margin: 1.2em 0 0.6em; } .muted { color: var(--c-muted); } .muted.ok { color: var(--c-success); } .page-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5em; margin-bottom: 0.8em; } /* Cards */ .card, .card-init { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1em 1.3em; margin-bottom: 1em; } .card-init h2 { margin-top: 0; } .card-compact summary { cursor: pointer; padding: 0.5em 0.8em; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); margin-bottom: 0.5em; font-weight: 600; } .card-compact[open] summary { border-radius: var(--radius) var(--radius) 0 0; } .card-compact[open] form { background: var(--c-surface); border: 1px solid var(--c-border); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); padding: 0.9em 1.2em; } .dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.8em; margin-bottom: 1em; } .dashboard-grid .card h3 { margin-top: 0; font-size: 0.95em; color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.05em; } .dashboard-grid .kpi { font-size: 2.4em; font-weight: 700; margin: 0.1em 0; color: var(--c-accent); } .card-balance .mini-balance { width: 100%; font-size: 0.9em; } .card-balance .mini-balance td { padding: 0.2em 0; } .card-balance .mini-balance .row-total td { border-top: 1px solid var(--c-border); padding-top: 0.4em; font-weight: 600; } .card-warning { border-color: var(--c-warning); } .card-warning .warning { color: var(--c-warning); font-weight: 600; } .card-cta-import { background: linear-gradient(135deg, var(--c-surface) 0%, var(--c-surface-2) 100%); border-style: dashed; } /* Forms */ .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.7em 1em; margin: 1em 0; } .form-grid-compact { gap: 0.4em 0.8em; } .form-grid label { display: flex; flex-direction: column; gap: 0.2em; font-size: 0.92em; } .form-grid label > span:first-child { color: var(--c-muted); font-weight: 500; } .form-grid label em { color: var(--c-warning); font-style: normal; } .form-grid .full-width { grid-column: 1 / -1; } .form-grid .checkbox-line { flex-direction: row; align-items: center; gap: 0.5em; } .form-grid .checkbox-line input { width: auto; } input, select, textarea { background: var(--c-surface); color: var(--c-text); border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: 0.6em 0.75em; font-size: 0.95em; font-family: inherit; width: 100%; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } input.amount-input { text-align: right; font-variant-numeric: tabular-nums; } /* Buttons */ .btn { display: inline-block; padding: 0.6em 1.2em; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; font-size: 0.95em; font-weight: 600; font-family: inherit; text-decoration: none; text-align: center; transition: background 0.15s, border-color 0.15s, box-shadow 0.15s; } .btn-primary { background: var(--c-accent); color: white; box-shadow: var(--shadow); } .btn-primary:hover:not(:disabled) { background: #1d4ed8; } .btn-secondary { background: var(--c-surface-2); color: var(--c-text); border-color: var(--c-border); } .btn-secondary:hover { background: var(--c-border); } .btn-icon { padding: 0.3em 0.55em; background: var(--c-surface-2); color: var(--c-muted); border: 1px solid var(--c-border); } .btn-icon:hover { color: var(--c-error); } .btn:disabled { opacity: 0.6; cursor: not-allowed; } /* Filters */ .filters { display: flex; gap: 0.5em; flex-wrap: wrap; margin-bottom: 1em; align-items: center; } .filters input, .filters select { width: auto; flex: 0 1 220px; } /* Tables */ .data-table { width: 100%; border-collapse: collapse; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; font-size: 0.9em; margin-bottom: 1em; } .data-table th, .data-table td { padding: 0.55em 0.7em; text-align: left; border-bottom: 1px solid var(--c-border); vertical-align: top; } .data-table th { background: var(--c-surface-2); font-weight: 600; color: var(--c-muted); text-transform: uppercase; font-size: 0.85em; letter-spacing: 0.04em; } .data-table tr:last-child td { border-bottom: 0; } .data-table tr:hover td { background: var(--c-surface-2); } .data-table .amount { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .data-table .debit { color: var(--c-debit); } .data-table .credit { color: var(--c-credit); } .data-table .totals-row td { background: var(--c-surface-2); font-weight: 600; } .data-table .totals-row td.amount { color: var(--c-accent); } .data-table-balance .classe-header td { background: var(--c-bg); border-top: 2px solid var(--c-accent); font-size: 1em; color: var(--c-accent); } .data-table-balance .classe-subtotal td { background: var(--c-surface-2); font-style: italic; color: var(--c-muted); border-top: 1px dashed var(--c-border); } .data-table-balance .solde-debit { color: var(--c-debit); font-weight: 600; } .data-table-balance .solde-credit { color: var(--c-credit); font-weight: 600; } /* Saisie écriture */ .lignes-fieldset { border: 1px solid var(--c-border); border-radius: var(--radius); padding: 0.9em 1em; background: var(--c-surface); } .lignes-fieldset legend { padding: 0 0.5em; color: var(--c-muted); font-weight: 600; } .lignes-table { width: 100%; border-collapse: collapse; font-size: 0.9em; } .lignes-table th { color: var(--c-muted); font-weight: 600; padding: 0.3em 0.4em; text-align: left; } .lignes-table td { padding: 0.25em 0.3em; } .lignes-table input { padding: 0.4em 0.55em; } .lignes-table tfoot td { padding-top: 0.6em; border-top: 2px solid var(--c-border); } .lignes-preview { margin: 0.3em 0; padding-left: 1em; font-size: 0.85em; } .lignes-preview li { display: flex; justify-content: space-between; gap: 0.5em; } .lignes-preview .amount { display: flex; gap: 0.6em; } .compte-libelle { display: block; min-height: 1.1em; font-size: 0.8em; } .compte-libelle.error { color: var(--c-error); } /* Badges */ .badge { display: inline-block; padding: 0.18em 0.55em; border-radius: 999px; font-size: 0.8em; font-weight: 600; background: var(--c-surface-2); color: var(--c-muted); } .badge.ok { background: rgba(74, 222, 128, 0.15); color: var(--c-success); } .badge.pending { background: rgba(251, 191, 36, 0.15); color: var(--c-warning); } .badge.error { background: rgba(248, 113, 113, 0.15); color: var(--c-error); } .badge.agent { background: rgba(124, 58, 237, 0.12); color: #6d28d9; } /* Alerts */ .alert { padding: 0.75em 1em; border-radius: var(--radius); margin-bottom: 1em; border: 1px solid transparent; } .alert-success { background: rgba(22, 163, 74, 0.1); border-color: var(--c-success); color: #15803d; } .alert-error { background: rgba(220, 38, 38, 0.08); border-color: var(--c-error); color: #b91c1c; } .alert-info { background: var(--c-accent-soft); border-color: var(--c-accent); color: #1d4ed8; } .alert-warning { background: rgba(217, 119, 6, 0.1); border-color: var(--c-warning); color: #b45309; } /* KV grid (détails) */ .kv-grid { display: grid; grid-template-columns: max-content 1fr; gap: 0.4em 1.2em; margin: 0; } .kv-grid dt { font-weight: 600; color: var(--c-muted); } .kv-grid dd { margin: 0; } /* Grand livre sections */ .compte-section { margin-bottom: 1.5em; } .compte-section h3 { margin-bottom: 0.4em; color: var(--c-accent); } /* Mobile */ @media (max-width: 720px) { .compta-main { padding: 0.6em; } .compta-header { padding: 0.6em 0.8em; } .compta-title { font-size: 1em; } .hide-mobile { display: none; } .data-table { font-size: 0.85em; } .data-table th, .data-table td { padding: 0.4em 0.45em; } .form-grid { grid-template-columns: 1fr; } .filters input, .filters select { flex: 1 1 100%; } .lignes-table { font-size: 0.85em; } .lignes-table th:nth-child(5), .lignes-table td:nth-child(5) { display: none; } /* hide auxiliaire on mobile */ } @media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; } } pre code { font-size: 0.85em; } code { font-family: "JetBrains Mono", "Fira Code", Consolas, monospace; font-size: 0.92em; } /* ── Barre supérieure unifiée (toolbar : identité + menus + actions) ───────── */ .cx-bar{grid-column:1/-1;width:100%;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;} .cx-home{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;font-weight:700;color:var(--c-accent);background:var(--c-accent-soft);border:1px solid transparent;padding:.45rem .8rem;border-radius:var(--radius-sm);white-space:nowrap;} .cx-home:hover{border-color:var(--c-accent);} .cx-id{flex:1;min-width:140px;text-decoration:none;color:var(--c-text);} .cx-id b{font-size:1.05em;color:var(--c-text);} .cx-id-sub{display:block;font-size:.8em;color:var(--c-muted);} .cx-menus{display:flex;gap:.4rem;flex-wrap:wrap;} .cx-actions{display:flex;gap:.3rem;} .cx-menu{position:relative;} .cx-menu>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .8rem;border:1px solid var(--c-border);border-radius:var(--radius-sm);background:var(--c-surface);font-size:.88em;white-space:nowrap;color:var(--c-text);} /* icônes SVG filaires de la barre */ .cx-bar svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block;flex:none;} .cx-mi{display:inline-flex;} /* couleurs distinctes par icône */ .cx-home svg{stroke:#2563eb;} /* Liasse — bleu */ .ic-doc .cx-mi svg{stroke:#d97706;} /* Documents — ambre */ .ic-rev .cx-mi svg{stroke:#7c3aed;} /* Révision — violet */ .ic-set>summary svg{stroke:#0891b2;} /* Paramètres — cyan */ .ic-dl>summary svg{stroke:#16a34a;} /* Télécharger — vert */ .ic-sh>summary svg{stroke:#0ea5e9;} /* Partager — ciel */ .cx-icon>summary{padding:.4rem .55rem;border-radius:var(--radius-sm);} .cx-icon>summary:hover{background:var(--c-surface-2);} .cx-menu>summary::-webkit-details-marker{display:none;} .cx-menu[open]>summary{border-color:var(--c-accent);color:var(--c-accent);} .cx-icon>summary{font-size:1.1em;padding:.4rem .6rem;} .cx-pop{position:absolute;z-index:40;top:115%;left:0;min-width:240px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:.35rem;display:flex;flex-direction:column;} .cx-pop-r{left:auto;right:0;} .cx-pop a{padding:.55rem .7rem;border-radius:var(--radius-sm);color:var(--c-text);text-decoration:none;font-size:.9em;display:flex;align-items:center;gap:.5rem;} .cx-pop a:hover{background:var(--c-surface-2);} .cx-soon{padding:.55rem .7rem;color:var(--c-muted);font-size:.85em;font-style:italic;display:flex;align-items:center;gap:.5rem;} /* Icônes des items de popover : plus petites que les icônes de barre, colorées par groupe de menu (sens), items « bientôt » en gris estompé. */ .cx-pop a svg,.cx-soon svg{width:18px;height:18px;} .ic-doc .cx-pop svg{stroke:#d97706;} /* Documents — ambre */ .ic-rev .cx-pop svg{stroke:#7c3aed;} /* Révision — violet */ .ic-set .cx-pop svg{stroke:#0891b2;} /* Paramètres — cyan */ .ic-dl .cx-pop svg{stroke:#16a34a;} /* Télécharger — vert */ .ic-sh .cx-pop svg{stroke:#0ea5e9;} /* Partager — ciel */ .cx-pop span.cx-soon svg{stroke:var(--c-muted);} /* « bientôt » — estompé */ /* Titre (branche sans entreprise, hors .cx-bar) : icône graphe bleue. */ .compta-title{display:inline-flex;align-items:center;gap:.4rem;} .compta-title svg{width:20px;height:20px;fill:none;stroke:#2563eb;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;} /* Icônes inline dans le contenu (listes, titres, boutons) : suivent la taille du texte ; couleur du texte par défaut, accents sémantiques via .c-*. */ .ci{display:inline-flex;vertical-align:-.15em;} .ci svg{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;} .ci.c-ok svg{stroke:#16a34a;} /* succès / validé — vert */ .ci.c-warn svg{stroke:#dc2626;} /* alerte — rouge */ .ci.c-info svg{stroke:#2563eb;} /* information — bleu */ .ci.c-idea svg{stroke:#d97706;} /* action / idée — ambre */ .ci.c-agent svg{stroke:#7c3aed;} /* agent IA — violet */ .cx-exo-sel{margin:0;} .cx-exo-sel select{width:auto;padding:.4rem 1.4rem .4rem .6rem;border:1px solid var(--c-border);border-radius:var(--radius-sm);background:var(--c-surface);color:var(--c-text);font-size:.85em;font-weight:600;cursor:pointer;} .cx-menu>summary .cx-ml{margin-left:0;} /* Repli de la barre d'outils : piloté par la LARGEUR DE COLONNE (@container) et non plus par le viewport. ng-frame plafonne le à 440px sur desktop -> ce repli s'y applique enfin (libellés de menus masqués, menus en icône seule) et « Documents » + « Révision » tiennent sur la même ligne. Comportement mobile inchangé (la colonne y vaut le viewport, < 680px). Repli historique conservé à l'identique, seule la condition d'activation change. */ @container compta (max-width: 680px){ .compta-header{padding:.55rem .7rem;gap:.45rem;} .cx-bar{gap:.4rem;} .cx-home-t{display:none;} /* 📄 seul */ .cx-id{min-width:0;flex:1 1 auto;overflow:hidden;} .cx-id b{font-size:.95em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;} .cx-id-sub{display:none;} /* masque forme/régime/TVA */ .cx-menu>summary{padding:.45rem .6rem;} /* menus : icône seule */ .cx-menu>summary .cx-mi{font-size:1.15em;} .cx-menu>summary .cx-ml{display:none;} .cx-exo-sel select{font-size:.8em;} /* menus déroulants en pleine largeur (évite tout débordement -> scroll latéral) */ .cx-pop{position:fixed;left:.7rem;right:.7rem;top:auto;min-width:0;width:auto;} } /* Garde-fou : pas de scroll horizontal de page */ html,body.compta-body{max-width:100%;overflow-x:hidden;} /* Place réservée au bouton retour flottant unifié (.ng-back : 40px @ left 8px) pour qu'il ne recouvre pas le contenu de l'en-tête. Placé après les media-queries -> gagne la cascade sur padding-left à toutes les largeurs. */ .compta-header{padding-left:58px;}