/* ════════════════════════════════════════════════════════════════════════
ESSAI — direction « grand livre » (frontend-design, branche essai-frontend-design)
Sujet : comptabilité publique locale (M57) — le comptable public valide et
tamponne un mandat, tient un registre, aligne des colonnes de montants.
Signature : les statuts (Payé/Validé/Rejeté) redessinés en tampons d'encre.
Typo : Marianne (typographie officielle de l'État français, DSFR) pour les
titres — cohérent avec le sujet ; IBM Plex Mono pour tous les montants et
références (alignement tabulaire réel, pas décoratif).
════════════════════════════════════════════════════════════════════════ */
@font-face { font-family: 'Marianne'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/Marianne-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Marianne'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/Marianne-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Marianne'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/Marianne-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Plex Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/plex-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'Plex Mono'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/plex-mono-500.woff2') format('woff2'); }
@font-face { font-family: 'Plex Mono'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/plex-mono-600.woff2') format('woff2'); }
/* ════════════════════════════════════════════════════════════════════════
Palette officielle Uneeti — couleurs de la convention, FIGÉES et PARTAGÉES.
Servie par la lib : ~/_content/Uneeti.SharedUi/css/uneeti-theme.css
À charger dans le de chaque application, APRÈS Bootstrap et AVANT
le thème local de l'app. Source unique de vérité : on modifie ici, toutes
les applications suivent au prochain bump du paquet.
Teintes alignées sur l'application de référence ComptaCo (sidebar bleu marine).
════════════════════════════════════════════════════════════════════════ */
:root {
/* Typo (essai « grand livre ») */
--uneeti-font-display: 'Marianne', 'Segoe UI', sans-serif;
--uneeti-font-mono: 'Plex Mono', ui-monospace, monospace;
/* Encres de tampon (statuts — le comptable public valide/rejette)
Teinte « navy » dérivée du violet de marque (pas un bleu générique) pour
que le tampon dialogue avec la sidebar plutôt que de la contredire. */
--uneeti-ink-navy: #4f4478;
--uneeti-ink-red: #8c2f3a;
--uneeti-ink-green: #1f6b45;
--uneeti-ink-amber: #96650c;
--uneeti-ink-dark: #2b2f38;
/* Barres */
--uneeti-navbar: #9085bf; /* [essai] barre du haut — violet */
--uneeti-menu: #1a3a5c; /* fond de la sidebar (bleu marine) */
--uneeti-menu-grad-start:#6e5fa8; /* [essai] dégradé sidebar — départ (assombri pour contraste texte blanc) */
--uneeti-menu-grad-end: #8577b0; /* [essai] dégradé sidebar — arrivée (assombri pour contraste texte blanc) */
--uneeti-menu-fg: #ffffff; /* [essai] texte du menu — blanc */
--uneeti-menu-fg-strong: #ffffff; /* texte de menu survolé / actif */
--uneeti-menu-section: #ffffff; /* [essai] titres de section — blanc */
--uneeti-menu-box: #5c4f8a; /* [essai] listbox/dropdowns (assombri pour contraste texte blanc) */
--uneeti-menu-box-border:#ffffff; /* [essai] bordure listbox/dropdowns — blanche */
--uneeti-menu-active-bg: #ffffff; /* [essai] item de menu sélectionné */
--uneeti-menu-active-fg: #6b5fa0; /* [essai] texte de l'item sélectionné */
/* Accent de marque (liens actifs, focus clavier, surbrillances) */
--uneeti-accent: #6b5fa0; /* [essai] violet primaire (ex-bleu) */
--uneeti-accent-rgb: 107,95,160;
--uneeti-accent-hover: #5c4f8a; /* [essai] violet survol (plus foncé) */
--uneeti-accent-active: #4f4478; /* [essai] violet actif (encore +fonc) */
--uneeti-accent-subtle-bg: #ece9f5; /* [essai] fond très clair (alerts) */
--uneeti-accent-subtle-border:#b8aed4; /* [essai] bordure claire (alerts) */
--uneeti-on-accent: #ffffff; /* texte posé sur l'accent */
/* Couleurs d'état / divers */
--uneeti-pin: #fdb813; /* item épinglé (étoile) */
--uneeti-success: #198754;
--uneeti-danger: #dc3545;
--uneeti-surface: #f3f4f2; /* [essai grand livre] fond de contenu — papier froid, pas la crème IA */
/* ── Alias de compatibilité (apps héritées de PatternGlobal) ──────────
Le layout des apps lit --pg-menu / --pg-menu-fg ; on les fait pointer
vers la palette officielle pour que la couleur soit centralisée. */
--pg-menu: var(--uneeti-menu);
--pg-menu-fg: var(--uneeti-menu-fg);
}
/* Titres en Marianne, avec parcimonie (h1-h3, marque) — le corps de texte reste
sur la police système pour rester calme et lisible dans un contexte dense. */
h1, h2, h3, .navbar-brand, .sidebar .brand-word { font-family: var(--uneeti-font-display); font-weight: 700; letter-spacing: -0.01em; }
.card-header { font-family: var(--uneeti-font-display); font-weight: 500; letter-spacing: -0.005em; }
/* Montants, références de mandat/titre, codes M57 : chiffres tabulaires réels
(alignement en colonne), pas un choix décoratif. Ajouter la classe .num sur
ces éléments dans les vues pour en bénéficier. */
.num, .table td.text-end, td.montant, .montant,
.fs-1.fw-bold, .fs-2.fw-bold, .fs-3.fw-bold, .fs-4.fw-bold, .fs-5.fw-bold,
.fw-bold.fs-1, .fw-bold.fs-2, .fw-bold.fs-3, .fw-bold.fs-4, .fw-bold.fs-5,
.fw-semibold.text-nowrap {
font-family: var(--uneeti-font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
/* ════════════════════════════════════════════════════════════════════════
Signature « tampon d'encre » — les statuts (Payé/Validé/Rejeté/À transmettre)
empruntent la forme d'un vrai tampon de comptable public : contour, pas de
remplissage plein, légère rotation, typo mono en capitales espacées.
Un seul geste marquant, appliqué uniquement ici — le reste du châssis reste sobre.
════════════════════════════════════════════════════════════════════════ */
.badge {
font-family: var(--uneeti-font-mono); font-weight: 600; font-size: 0.72em;
letter-spacing: 0.045em; text-transform: uppercase;
background: color-mix(in srgb, currentColor 7%, transparent) !important;
border: 1.5px solid currentColor; border-radius: 3px;
padding: 0.3em 0.55em; display: inline-block; transform: rotate(-1.5deg);
}
.badge.bg-success, .badge.text-bg-success { color: var(--uneeti-ink-green) !important; }
.badge.bg-danger, .badge.text-bg-danger { color: var(--uneeti-ink-red) !important; }
.badge.bg-warning, .badge.text-bg-warning { color: var(--uneeti-ink-amber) !important; }
.badge.bg-info, .badge.text-bg-info,
.badge.bg-primary, .badge.text-bg-primary { color: var(--uneeti-ink-navy) !important; }
.badge.bg-secondary, .badge.text-bg-secondary { color: #5b6472 !important; }
.badge.bg-dark, .badge.text-bg-dark { color: var(--uneeti-ink-dark) !important; }
/* ════════════════════════════════════════════════════════════════════════
Essai (2e vague) — « grand livre relié » : filets de ligne façon papier
comptable réglé, marge de reliure sur les cartes, références en mono.
════════════════════════════════════════════════════════════════════════ */
.table > :not(caption) > * > * {
border-bottom-color: color-mix(in srgb, var(--uneeti-ink-navy, #4f4478) 45%, transparent);
}
.table > thead > tr > th {
border-bottom: 2px solid color-mix(in srgb, var(--uneeti-ink-navy, #4f4478) 35%, transparent);
font-family: var(--uneeti-font-display); font-weight: 600; letter-spacing: -0.005em;
}
/* Références de pièce (mandat/titre) : premier lien de chaque ligne de tableau. */
.table > tbody > tr > td:first-child a,
.table > tbody > tr > td:first-child.num {
font-family: var(--uneeti-font-mono); letter-spacing: -0.01em;
}
/* ════════════════════════════════════════════════════════════════════════
Châssis partagé (_LayoutUneeti) : barre du haut + menu latéral + zone de
contenu. Centralisé ici → toutes les apps sur _LayoutUneeti sont identiques.
════════════════════════════════════════════════════════════════════════ */
/* Collante en haut : la sidebar est en position fixed avec top:56px, elle suppose que la
navbar occupe toujours cet espace — sans ça, la navbar défile avec le contenu et semble
« disparaître » pendant que la sidebar reste plaquée en haut. */
.navbar { position: sticky; top: 0; z-index: 200; border-bottom: 1px solid rgba(255,255,255,.14); }
.navbar.bg-dark { background-color: var(--uneeti-navbar) !important; }
.navbar-brand { font-weight: 700; letter-spacing: .04em; }
.uneeti-brand-name {
font-family: var(--uneeti-font-display, inherit); font-weight: 700;
letter-spacing: 0.03em; font-size: 1.05rem;
}
.uneeti-brand-subtitle {
font-family: var(--uneeti-font-mono, inherit); font-weight: 400; font-size: 0.66rem;
letter-spacing: 0.02em; color: rgba(255,255,255,.68); text-transform: uppercase;
}
/* Sceau rond (remplace les picto-émojis ad hoc type 🏛) : signature graphique
cohérente avec les tampons de statut — un cercle, pas un décor superflu. */
.uneeti-seal {
display: inline-block; width: 22px; height: 22px; border-radius: 50%;
border: 2px solid currentColor; position: relative; flex-shrink: 0;
}
.uneeti-seal::after {
content: ''; position: absolute; inset: 4px; border-radius: 50%; border: 1px solid currentColor; opacity: .55;
}
#sidebar-toggle { background: transparent; border: none; color: var(--uneeti-menu-fg); font-size: 1.2rem; padding: 4px 8px; cursor: pointer; line-height: 1; }
#sidebar-toggle:hover { color: var(--uneeti-menu-fg-strong); }
.sidebar {
width: 240px; position: fixed; top: 56px; left: 0; bottom: 0;
background: linear-gradient(180deg, var(--uneeti-menu-grad-start), var(--uneeti-menu-grad-end));
overflow-y: auto; overflow-x: hidden;
z-index: 100; transition: width .25s ease;
}
.sidebar.collapsed { width: 56px; }
.main-content {
background: var(--uneeti-surface); margin-left: 240px;
min-height: calc(100vh - 56px); overflow-y: auto; transition: margin-left .25s ease;
}
.main-content.sidebar-collapsed { margin-left: 56px; }
/* Skin « rail » (64px) : la zone de contenu s'ajuste à la largeur du rail. */
.sidebar.skin-rail ~ .main-content { margin-left: 64px; }
/* Item de menu (base attendue par nav.css, qui n'ajoute que l'accordéon/épingles). */
.sidebar .nav-link {
display: flex; align-items: center; gap: .55rem;
color: var(--uneeti-menu-fg); text-decoration: none; white-space: nowrap;
padding: .5rem .7rem; border-radius: 6px;
text-shadow: 0 1px 2px rgba(0,0,0,.35); /* [essai] détache le blanc du fond mauve clair */
}
.sidebar .nav-link:hover { background: rgba(255,255,255,.08); color: var(--uneeti-menu-fg-strong); }
.sidebar .nav-link.active { background: var(--uneeti-menu-active-bg); color: var(--uneeti-menu-active-fg); }
/* [essai] Icônes uniformisées (thème ET sous-items) : même largeur/taille/alignement
quel que soit le glyphe FontAwesome (les glyphes ont des boîtes visuelles différentes). */
.sidebar .nav-icon, .sidebar .nav-theme-ic {
display: inline-flex; align-items: center; justify-content: center;
min-width: 20px; font-size: .95rem; text-align: center;
}
/* [essai] Sous-items décalés vers la droite par rapport à l'entête de thème (PILOTAGE, BUDGET…). */
.nav-theme-body .nav-link { padding-left: 1.5rem; }
.sidebar.collapsed .nav-theme-body .nav-link { padding-left: 0; }
.sidebar.collapsed .nav-label { display: none; }
.sidebar.collapsed .nav-link { justify-content: center; padding: .5rem 0; }
/* Tuiles de statistiques (_UneetiStats) : liseré d'accent au survol si cliquable. */
.uneeti-stat-link > .border { transition: box-shadow .15s, border-color .15s; }
.uneeti-stat-link:hover > .border { box-shadow: 0 0 0 2px rgba(var(--uneeti-accent-rgb),.27); border-color: var(--uneeti-accent) !important; }
/* Assistant IA — bouton flottant commun (_LayoutUneeti, option ShowAiAssistant). */
.uneeti-ai-fab {
/* z-index sous les offcanvas Bootstrap (.offcanvas 1045, .offcanvas-backdrop 1040) : sinon le
bouton flottant chevauche visuellement les actions d'un panneau ouvert (ex. _FiltrePanel). */
position: fixed; bottom: 28px; right: 28px; z-index: 1035;
width: 52px; height: 52px; border-radius: 50%;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
border: none; box-shadow: 0 4px 16px rgba(99,102,241,.45);
color: #fff; font-size: 1.4rem; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: transform .15s, box-shadow .15s;
}
.uneeti-ai-fab:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(99,102,241,.6); }
.uneeti-ai-fab:active { transform: scale(.95); }
/* ════════════════════════════════════════════════════════════════════════
[essai] Retint Bootstrap "primary" (bleu #0d6efd/#0b5ed7/#0a58ca/#0a53be…)
en violet de marque (--uneeti-accent). Bootstrap 5.3 fige ces teintes en
valeurs littérales par composant (--bs-btn-bg, etc.) plutôt que de les
dériver de --bs-primary : on doit donc les redéfinir composant par
composant plutôt que de ne toucher que la variable racine.
════════════════════════════════════════════════════════════════════════ */
:root {
--bs-primary: var(--uneeti-accent);
--bs-primary-rgb: var(--uneeti-accent-rgb);
--bs-link-color: var(--uneeti-accent);
--bs-link-color-rgb: var(--uneeti-accent-rgb);
--bs-link-hover-color: var(--uneeti-accent-hover);
--bs-primary-text-emphasis: var(--uneeti-accent-active);
--bs-primary-bg-subtle: var(--uneeti-accent-subtle-bg);
--bs-primary-border-subtle: var(--uneeti-accent-subtle-border);
}
a { color: var(--uneeti-accent); }
a:hover { color: var(--uneeti-accent-hover); }
.btn-primary {
--bs-btn-bg: var(--uneeti-accent);
--bs-btn-border-color: var(--uneeti-accent);
--bs-btn-hover-bg: var(--uneeti-accent-hover);
--bs-btn-hover-border-color: var(--uneeti-accent-hover);
--bs-btn-focus-shadow-rgb: var(--uneeti-accent-rgb);
--bs-btn-active-bg: var(--uneeti-accent-active);
--bs-btn-active-border-color: var(--uneeti-accent-active);
--bs-btn-disabled-bg: var(--uneeti-accent);
--bs-btn-disabled-border-color: var(--uneeti-accent);
}
.btn-outline-primary {
--bs-btn-color: var(--uneeti-accent);
--bs-btn-border-color: var(--uneeti-accent);
--bs-btn-hover-bg: var(--uneeti-accent);
--bs-btn-hover-border-color: var(--uneeti-accent);
--bs-btn-focus-shadow-rgb: var(--uneeti-accent-rgb);
--bs-btn-active-bg: var(--uneeti-accent);
--bs-btn-active-border-color: var(--uneeti-accent);
--bs-btn-disabled-color: var(--uneeti-accent);
}
.text-primary { color: var(--uneeti-accent) !important; }
.bg-primary:not(.badge) { background-color: var(--uneeti-accent) !important; }
.border-primary { border-color: var(--uneeti-accent) !important; }
.link-primary { color: var(--uneeti-accent) !important; }
.form-control:focus, .form-select:focus {
border-color: var(--uneeti-accent-hover);
box-shadow: 0 0 0 .25rem rgba(var(--uneeti-accent-rgb), .25);
}
.form-check-input:checked { background-color: var(--uneeti-accent); border-color: var(--uneeti-accent); }
.form-check-input:focus { border-color: var(--uneeti-accent-hover); box-shadow: 0 0 0 .25rem rgba(var(--uneeti-accent-rgb), .25); }
.page-link { color: var(--uneeti-accent); }
.page-item.active .page-link { background-color: var(--uneeti-accent); border-color: var(--uneeti-accent); }
.dropdown-item.active, .dropdown-item:active { background-color: var(--uneeti-accent); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--uneeti-accent); }
.progress-bar { background-color: var(--uneeti-accent); }
.list-group-item-primary { color: var(--uneeti-accent-active); background-color: var(--uneeti-accent-subtle-bg); }
.alert-primary {
color: var(--uneeti-accent-active);
background-color: var(--uneeti-accent-subtle-bg);
border-color: var(--uneeti-accent-subtle-border);
}
.spinner-border.text-primary, .spinner-grow.text-primary { color: var(--uneeti-accent) !important; }
/* Fiche cliquable : toute carte/zone data-edit-url ouvre l'écran de modification (lists.js / table-rowclick.js) */
[data-edit-url] { cursor: pointer; }
/* Ligne de filtre des listes (lists.js ET son équivalent "Homemade" table-filter.js) : la cellule
du bouton "recharger" (🔄, colonne des cases à cocher) doit faire exactement la même hauteur que
les cellules de recherche voisines, sinon la bordure basse de la ligne se décale d'une cellule à
l'autre. Cette hauteur de ligne dépend du contenu le plus haut (ex. filtre "select" sur une autre
colonne) et n'est PAS une hauteur CSS "définie" pour la cellule (auto-layout de tableau) : un
`height:100%` sur le bouton ne s'y résout donc pas de façon fiable (constaté avec des lignes de
données multi-lignes qui agrandissent la ligne d'en-tête bien au-delà de la taille intrinsèque du
bouton, le laissant plaqué en haut de cellule au lieu d'être centré). On centre donc au niveau de
la CELLULE via `vertical-align:middle` (Bootstrap réinitialise les | / | à `vertical-align:top`)
plutôt que de faire dépendre le bouton d'un pourcentage de hauteur. Les deux moteurs partagent les
classes `no-sort-filter` / `dt-refresh-btn`, d'où la règle commune ci-dessous (pas besoin de
dupliquer par moteur). */
.dt-filter-row th.no-sort-filter, .filter-row th.no-sort-filter { padding: 0 !important; vertical-align: middle; }
.dt-filter-row .dt-refresh-btn, .filter-row .dt-refresh-btn {
width: 100%; min-height: 31px; margin: 0; border-radius: 0;
display: flex; align-items: center; justify-content: center; box-sizing: border-box;
font-size: 1.25rem; padding: 6px 0;
}
/* Variante sans case à cocher (lists.js) : aucune colonne n'est sans recherche, donc pas de
cellule dédiée pour le bouton "recharger" — il est inséré à côté du champ de recherche de la
1ère colonne (même cellule). Pas de `display:flex` sur la | elle-même (cf. note ci-dessus :
ça la sort du calcul de hauteur de ligne) : on aligne bouton + champ en flottant le bouton et en
réduisant la largeur du champ d'autant, ce qui reste dans le flux normal de la cellule. */
.dt-filter-row th.dt-refresh-btn-inline { vertical-align: middle; }
.dt-refresh-btn-inline .dt-refresh-btn {
width: 28px; height: 31px; min-height: 31px; box-sizing: border-box;
float: left; margin-right: 4px; font-size: 1.1rem; padding: 0; line-height: 1;
display: flex; align-items: center; justify-content: center; text-align: center;
}
.dt-refresh-btn-inline .dt-col-search { width: calc(100% - 32px); display: inline-block; }
/* ════════════════════════════════════════════════════════════════════════
Essai (3e vague) — « document officiel » : les écrans de bordereau/export
(PES V2, Chorus Pro) empruntent un filet d'en-tête épais façon papier à
en-tête, pour se distinguer visuellement des écrans de saisie courants.
════════════════════════════════════════════════════════════════════════ */
.doc-officiel {
border-top: 3px solid var(--uneeti-ink-navy, #4f4478) !important;
}
|