:root { /* Identité reprise du Department of Justice : bleu marine institutionnel, bleu de liaison fédéral et or du sceau. Surfaces teintées navy plutôt que gris neutre, chaque niveau franchement plus clair que le précédent. */ --bg-body: #070b12; --bg-sidebar: #0b111c; --bg-panel: #111a28; --bg-card: #0f1723; --bg-card-hover: #17222f; --bg-input: #141e2c; --border-color: #26374f; --border-soft: rgba(160, 195, 235, .11); /* Contrastes relevés : --text-faint passait sous le seuil de lisibilité AA sur les fonds sombres, or il porte tous les libellés secondaires. */ --text-primary: #eef3f9; --text-muted: #a8b8cd; --text-faint: #8496ad; /* #1a4480 est le navy officiel du DOJ ; il sert de fond d'action, tandis que le bleu clair porte le texte et les icônes sur fond sombre. */ --navy: #1a4480; --accent: #4a90d9; --accent-2: #1a4480; --accent-hover: #5fa3e8; --accent-soft: rgba(74, 144, 217, 0.16); --accent-gradient: linear-gradient(135deg, #2f6fb0, #1a4480); /* Or du sceau : réservé aux marqueurs d'autorité (numéros de dossier, sceau, onglet actif) pour qu'il garde sa valeur de signal. */ --gold: #c9a227; --gold-bright: #e0bd4a; --gold-soft: rgba(201, 162, 39, .14); --success: #3fa96b; --danger: #dc4b47; --warning: #d4a017; /* Public Sans est la police des sites fédéraux américains ; Tinos reprend les métriques de Times New Roman, imposé par les dépôts judiciaires. */ --font-ui: "Public Sans", "Segoe UI", system-ui, sans-serif; --font-serif: "Tinos", "Times New Roman", Times, serif; --font-mono: "Courier New", ui-monospace, monospace; --radius: 14px; --radius-sm: 9px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow-md: 0 8px 24px rgba(0, 0, 0, .35); --shadow-glow: 0 0 0 1px rgba(74, 144, 217, .18), 0 8px 28px rgba(26, 68, 128, .22); --focus-ring: 0 0 0 3px rgba(74, 144, 217, .4); --ease: cubic-bezier(.4, 0, .2, 1); --font-size-scale: 1; /* Alias : ces noms étaient déjà employés dans la feuille sans jamais être définis, ce qui annulait silencieusement les règles concernées. */ --text: var(--text-primary); --border: var(--border-color); --surface: var(--bg-card); --surface-raised: var(--bg-card-hover); } * { box-sizing: border-box; } /* ── Barres de défilement ───────────────────────────────────────────────────── Rien au repos, un filet au survol du conteneur qu'elles desservent. Un gris translucide plutôt qu'une couleur du thème : il s'éclaircit sur les fonds sombres du panel et s'assombrit sur le papier blanc d'un document, donc la même règle sert partout sans devenir invisible d'un côté. Chrome ignore les pseudo-éléments ::-webkit-scrollbar dès que scrollbar-color est déclaré ; les deux jeux de règles sont donc posés en miroir, le standard pour les navigateurs récents, l'autre pour les plus anciens. */ :root { --scroll-thumb: rgba(132, 150, 173, .38); } /* La liste des conteneurs est explicite parce que scrollbar-color s'hérite : la poser sur `*:hover` rendrait toutes les barres visibles dès que la souris entre dans la fenêtre, puisque le survol remonte jusqu'à . */ html { font-size: calc(14px * var(--font-size-scale)); scrollbar-width: thin; scrollbar-color: transparent transparent; } :is(body, .content, .sidebar-scroll, .studio-preview, .fine-scroll, .stats-scroll, .doc-versions, .modal-pane-scroll, .notif-panel, .ss-panel, .coj-grid-scroll, .coj-modal, .calc-main, .calc-sidebar, .dos-tabs, .dos-stepper):hover { scrollbar-color: var(--scroll-thumb) transparent; } ::-webkit-scrollbar { width: 8px; height: 8px; } /* Les boutons fléchés des extrémités : rien ne les masque par défaut, et ils restent dessinés même sur une barre par ailleurs invisible. */ ::-webkit-scrollbar-button { display: none; width: 0; height: 0; } ::-webkit-scrollbar-track, ::-webkit-scrollbar-track-piece, ::-webkit-scrollbar-corner { background: transparent; } /* La bordure transparente tient lieu de marge : le curseur ne fait que 4 px de large et flotte à distance du bord au lieu d'y être collé. */ ::-webkit-scrollbar-thumb { background: transparent; background-clip: content-box; border: 2px solid transparent; border-radius: 999px; } :is(body, .content, .sidebar-scroll, .studio-preview, .fine-scroll, .stats-scroll, .doc-versions, .modal-pane-scroll, .notif-panel, .ss-panel, .coj-grid-scroll, .coj-modal, .calc-main, .calc-sidebar, .dos-tabs, .dos-stepper):hover::-webkit-scrollbar-thumb { background: var(--scroll-thumb); background-clip: content-box; } body { margin: 0; background: radial-gradient(1100px 600px at 12% -10%, rgba(74, 144, 217, .08), transparent 60%), radial-gradient(900px 500px at 100% 0%, rgba(26, 68, 128, .06), transparent 55%), var(--bg-body); background-attachment: fixed; color: var(--text-primary); font-family: var(--font-ui); font-size: 1rem; line-height: 1.55; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } svg { flex-shrink: 0; } /* Les champs et boutons n'héritent pas de la police du document par défaut. */ input, select, textarea, button { font-family: inherit; } /* Une ligne trop longue devient pénible à suivre : on borne le texte courant sans contraindre les grilles et tableaux. */ p, li, dd, blockquote { overflow-wrap: break-word; } textarea { line-height: 1.6; resize: vertical; } /* Repère clavier visible partout, sans polluer la navigation à la souris. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .form-control:focus-visible { outline: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ---------- Shell & sidebar ---------- */ /* La taille d'affichage s'applique à toute l'interface — barre latérale et barre supérieure comprises — et non plus à la seule zone de contenu. La hauteur est divisée par l'échelle pour qu'après zoom le shell occupe exactement la fenêtre, sans bande vide ni débordement. */ .app-shell { display: flex; zoom: var(--font-size-scale, 1); /* Hauteur de la fenêtre exprimée dans les unités de ce sous-arbre zoomé. Tout ce qui est à l'intérieur doit passer par --vh : un `100vh` brut y vaut la fenêtre entière AVANT le zoom, donc une hauteur fausse dès que la taille d'affichage n'est pas M. */ --vh: calc(100vh / var(--font-size-scale, 1)); height: var(--vh); } .sidebar { width: 290px; background: var(--bg-sidebar); border-right: 1px solid var(--border-soft); display: flex; flex-direction: column; padding: 16px 12px; } .sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; margin-bottom: 8px; border-bottom: 1px solid var(--border-soft); } .seal { width: 36px; height: 36px; border-radius: 50%; background: var(--accent-gradient); border: 1px solid var(--gold); box-shadow: 0 0 0 1px rgba(201, 162, 39, .25), 0 6px 18px rgba(7, 11, 18, .6); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: #fff; flex-shrink: 0; overflow: hidden; } .seal img { width: 100%; height: 100%; object-fit: cover; } .sidebar-brand-text { min-width: 0; } .sidebar-brand-text strong { display: block; font-size: 15px; line-height: 1.3; } .sidebar-brand-text span { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; } .sidebar-scroll { flex: 1; overflow-y: auto; min-height: 0; } .nav-group { margin-bottom: 2px; } .nav-group summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 9px 8px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); cursor: pointer; user-select: none; transition: color .15s var(--ease), background .15s var(--ease); } .nav-group summary:hover { color: var(--text-muted); background: var(--bg-card-hover); } .nav-group summary::-webkit-details-marker { display: none; } .nav-group summary .chevron { transition: transform .15s ease; color: var(--text-faint); } .nav-group[open] summary .chevron { transform: rotate(90deg); } .nav-section-flat { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); margin: 14px 8px 6px; } .nav-link { position: relative; display: flex; /* Libellé sur deux lignes : l'icône s'aligne sur la première ligne plutôt que de flotter au milieu du bloc de texte. */ align-items: flex-start; gap: 11px; padding: 9px 12px; margin: 2px 0; border-radius: var(--radius-sm); color: var(--text-muted); font-weight: 500; font-size: 14px; line-height: 1.32; transition: background .15s var(--ease), color .15s var(--ease); } .nav-label { min-width: 0; /* Répartit le libellé sur des lignes de longueur voisine plutôt que de laisser un mot seul en dessous (« Acte d'accusation / (Indictment) »). */ text-wrap: balance; overflow-wrap: break-word; } .nav-link .icon { color: var(--text-faint); /* Recentre optiquement l'icône de 20 px sur une ligne de texte de ~19 px. */ margin-top: 1px; transition: color .15s var(--ease); } .nav-link:hover { background: var(--bg-card-hover); color: var(--text-primary); } .nav-link.active { background: var(--accent-soft); color: var(--text-primary); font-weight: 600; } .nav-link.active::before { content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; border-radius: 0 4px 4px 0; background: var(--gold); } .nav-link.active .icon { color: var(--accent); } .sidebar-footer { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border-soft); } .size-toggle-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); margin: 8px 8px 6px; } .size-toggle { display: flex; gap: 6px; padding: 0 8px 12px; } .size-toggle button { flex: 1; background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-muted); border-radius: var(--radius-sm); padding: 6px 0; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); } .size-toggle button:hover { color: var(--text-primary); } .size-toggle button.active { background: var(--accent-gradient); color: #fff; border-color: var(--accent); } .profile-card { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: var(--radius-sm); background: var(--bg-card); border: 1px solid var(--border-soft); } .profile-card-btn { width: 100%; cursor: pointer; transition: background var(--ease), border-color var(--ease); text-align: left; color: inherit; font-family: inherit; } .profile-card-btn:hover { background: var(--surface-raised); border-color: var(--accent); } .profile-info { flex: 1; min-width: 0; } .profile-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-gradient); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; overflow: hidden; } .profile-avatar img { width: 100%; height: 100%; object-fit: cover; } .profile-card .profile-name { font-size: 14px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .profile-card .profile-role { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; } /* ---------- Modal profil ---------- */ .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(3px); z-index: 9999; align-items: center; justify-content: center; } .modal-overlay.open { display: flex; } .modal-box { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 14px; width: 100%; max-width: 440px; box-shadow: var(--shadow-md); overflow: hidden; } .modal-header { display: flex; align-items: center; gap: 14px; padding: 20px 20px 16px; border-bottom: 1px solid var(--border); position: relative; } .modal-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--accent-gradient); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; flex-shrink: 0; overflow: hidden; } .modal-avatar img { width: 100%; height: 100%; object-fit: cover; } .modal-close { position: absolute; top: 14px; right: 14px; background: none; border: none; color: var(--text-faint); font-size: 16px; cursor: pointer; line-height: 1; padding: 4px 6px; border-radius: 6px; } .modal-close:hover { background: var(--surface-raised); color: var(--text); } .modal-tabs { display: flex; border-bottom: 1px solid var(--border); padding: 0 20px; gap: 4px; } .modal-tab { background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-faint); font-size: 14px; font-weight: 600; padding: 12px 8px; cursor: pointer; transition: color var(--ease), border-color var(--ease); margin-bottom: -1px; } .modal-tab.active { color: var(--accent); border-bottom-color: var(--accent); } .modal-tab:hover:not(.active) { color: var(--text-muted); } .modal-pane { padding: 20px; } .modal-field { margin-bottom: 14px; } .modal-field label { display: block; font-size: 13px; font-weight: 600; color: var(--text-muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .05em; } /* ---------- Main / topbar ---------- */ .main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .topbar { height: 64px; border-bottom: 1px solid var(--border-soft); background: rgba(16, 16, 21, .78); backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: space-between; padding: 0 28px; flex-shrink: 0; /* .content porte un zoom, ce qui en fait un contexte d'empilement peint après la barre. Sans ce z-index, le panneau de notifications se retrouve recouvert par le contenu de la page. */ position: relative; z-index: 20; } .topbar h1 { font-size: 19px; margin: 0; font-weight: 700; letter-spacing: -.01em; } .topbar-actions { display: flex; align-items: center; gap: 16px; color: var(--text-muted); } .content { flex: 1; overflow-y: auto; padding: 28px 32px 56px; /* Place de la barre verticale réservée en permanence. Sans ça, un contenu qui frôle la hauteur de la fenêtre fait apparaître puis disparaître la barre en boucle : la page se met à vibrer. */ scrollbar-gutter: stable; } /* ---------- Hero header card ---------- */ .hero-card { background: linear-gradient(155deg, var(--bg-card) 0%, var(--bg-panel) 100%); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 22px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 20px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; } .hero-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px 200px at 0% 0%, rgba(74, 144, 217, .12), transparent 70%); pointer-events: none; } .hero-card .hero-left { display: flex; align-items: center; gap: 16px; } .hero-card .seal { width: 52px; height: 52px; font-size: 18px; } .hero-card .hero-eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .badge-pill { display: inline-flex; align-items: center; gap: 4px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; } .hero-card h2 { margin: 0; font-size: 22px; } .hero-card .hero-motto { margin: 4px 0 0; font-style: italic; color: var(--text-muted); font-size: 14px; } .hero-card .hero-right { text-align: right; flex-shrink: 0; } .hero-card .hero-right .hero-name { font-size: 15px; font-weight: 700; } .hero-card .hero-right .hero-role { color: var(--text-muted); font-size: 13px; } .hero-card .hero-right .hero-date { color: var(--text-faint); font-size: 13px; margin-top: 4px; display: flex; align-items: center; justify-content: flex-end; gap: 6px; } /* ---------- Cards / stats ---------- */ .card { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); transition: border-color .15s var(--ease); } .card + .card { margin-top: 16px; } /* Ces conteneurs espacent déjà leurs enfants avec `gap`. Sans cette annulation, la marge d'empilement ci-dessus s'ajoute au deuxième élément et le décale vers le bas, au lieu de l'aligner sur le premier. */ :is(.dos-grid-2, .proc-layout, .proc-main, .proc-aside, .dos-evidence-grid, .dos-hearing-list, .dos-note-list, .dos-link-list, .inv-act-list, .inv-lead-list, .db-row-2, .db-row-3) > .card + .card { margin-top: 0; } /* Une carte structurée porte ses marges dans ses sections : sans ça, le padding de .card s'ajoutait à celui de .card-header / .card-body, d'où des cartes deux fois trop espacées un peu partout. */ .card:has(> .card-header), .card:has(> .card-body) { padding: 0; overflow: hidden; } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 20px; } .stat-card { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 18px; display: flex; align-items: center; gap: 14px; box-shadow: var(--shadow-sm); transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease); } .stat-card:hover { transform: translateY(-2px); border-color: rgba(74, 144, 217, .3); box-shadow: var(--shadow-md); } .stat-icon-box { width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--accent-gradient); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: var(--shadow-glow); } .stat-card .stat-value { font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; } .stat-card .stat-label { color: var(--text-muted); font-size: 13px; } /* ---------- Tables ---------- */ table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; } th { position: sticky; top: 0; z-index: 1; background: var(--bg-panel); color: var(--text-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; } tbody tr { transition: background .12s var(--ease); } tbody tr:hover { background: var(--bg-card-hover); } tbody tr:last-child td { border-bottom: none; } .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 6px; font-size: 12px; font-weight: 700; line-height: 1.5; text-transform: uppercase; letter-spacing: .06em; border: 1px solid transparent; white-space: nowrap; } .badge::before { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: currentColor; } .badge-pending { background: rgba(234,179,8,.12); color: #d4a017; border-color: rgba(234,179,8,.25); } .badge-active { background: rgba(34,197,94,.12); color: #16a34a; border-color: rgba(34,197,94,.25); } .badge-suspended{ background: rgba(239,68,68,.12); color: #dc2626; border-color: rgba(239,68,68,.25); } .badge-majeur { background: rgba(249,115,22,.12); color: #ea6500; border-color: rgba(249,115,22,.25); } /* ---------- Buttons / forms ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: none; border-radius: var(--radius-sm); padding: 10px 18px; min-height: 38px; font-weight: 600; font-size: 14px; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: background .15s var(--ease), border-color .15s var(--ease), transform .1s var(--ease), box-shadow .15s var(--ease); } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent-gradient); color: #fff; box-shadow: 0 4px 14px rgba(74, 144, 217, .28); } .btn-primary:hover { filter: brightness(1.08); box-shadow: 0 6px 18px rgba(74, 144, 217, .38); } .btn-ghost { background: transparent; border: 1px solid var(--border-color); color: var(--text-primary); } .btn-ghost:hover { background: var(--bg-card-hover); border-color: rgba(255, 255, 255, .14); } .btn-danger { background: rgba(239, 68, 68, .15); color: var(--danger); } .btn-danger:hover { background: rgba(239, 68, 68, .24); } .btn-sm { padding: 7px 12px; min-height: 32px; font-size: 13px; } .btn[disabled] { opacity: .45; cursor: not-allowed; filter: none; transform: none; box-shadow: none; } .form-group { margin-bottom: 14px; } .form-group-row { display: flex; gap: 12px; align-items: flex-start; } .form-group-row .form-group { flex: 1; margin-bottom: 0; } .form-group label { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 7px; } .form-control { width: 100%; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 10px 13px; min-height: 40px; color: var(--text-primary); font-size: 14px; font-family: inherit; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); } .form-control::placeholder { color: var(--text-faint); } .form-control:hover:not(:disabled) { border-color: rgba(255, 255, 255, .16); } .form-control:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); } textarea.form-control { min-height: 0; } .form-control:disabled { opacity: .6; cursor: not-allowed; } /* ---------- Listes déroulantes filtrables ---------- */ .ss { position: relative; width: 100%; } /* Le select natif reste dans le formulaire et porte la valeur envoyée ; masqué en display:none, il est écarté de la validation HTML — un champ requis mais non focusable empêcherait la soumission sans afficher de message. */ .ss-native { display: none; } .ss-input { cursor: text; padding-right: 34px; } .ss::after { content: ''; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -5px; border-right: 2px solid var(--text-faint); border-bottom: 2px solid var(--text-faint); transform: rotate(45deg); pointer-events: none; transition: transform .15s var(--ease); } .ss.open::after { margin-top: -2px; transform: rotate(225deg); } .ss-panel { display: none; position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; right: 0; max-height: 288px; overflow-y: auto; overscroll-behavior: contain; background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); padding: 5px; } .ss.open .ss-panel { display: block; } .ss.ss-up .ss-panel { top: auto; bottom: calc(100% + 4px); } .ss-opt { padding: 9px 11px; border-radius: 6px; font-size: 13px; line-height: 1.4; color: var(--text-primary); cursor: pointer; } .ss-opt.selected { font-weight: 700; color: var(--accent); } .ss-opt.active, .ss-opt:hover { background: var(--accent-soft); color: var(--accent); } .ss-empty { padding: 14px 11px; font-size: 13px; color: var(--text-faint); text-align: center; } .flash { border-radius: var(--radius); padding: 14px 18px; margin-bottom: 18px; font-size: 14px; line-height: 1.5; font-weight: 500; } .flash-success { background: rgba(34, 197, 94, .12); color: var(--success); border: 1px solid rgba(34, 197, 94, .3); } .flash-error { background: rgba(239, 68, 68, .12); color: var(--danger); border: 1px solid rgba(239, 68, 68, .3); } /* ---------- Auth screens ---------- */ .auth-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(900px 500px at 50% -10%, rgba(74, 144, 217, .14), transparent 60%), var(--bg-body); } .auth-card { width: 100%; max-width: 420px; background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: 18px; padding: 32px; box-shadow: var(--shadow-md); } .auth-card .seal { width: 56px; height: 56px; font-size: 20px; margin: 0 auto 16px; } .auth-avatar-wrap { display: flex; justify-content: center; margin-bottom: 16px; } .auth-avatar-preview { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: var(--accent-gradient); border: 2px solid var(--border-soft); box-shadow: var(--shadow-glow); } .auth-avatar-preview img { width: 100%; height: 100%; object-fit: cover; } .auth-card h1 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 6px; text-align: center; } .auth-card p.subtitle { color: var(--text-muted); margin: 0 0 24px; font-size: 14px; } .auth-card .form-footer { margin-top: 18px; text-align: center; font-size: 14px; color: var(--text-muted); } .auth-card .form-footer a { color: var(--accent); font-weight: 600; } /* ---------- Documents ---------- */ .badge-brouillon { background: rgba(74, 144, 217,.12); color: #7fb2e5; border-color: rgba(74, 144, 217,.28); } .badge-emis { background: rgba(59,130,246,.12); color: #60a5fa; border-color: rgba(59,130,246,.28); } .badge-signe { background: rgba(34,197,94,.12); color: #4ade80; border-color: rgba(34,197,94,.28); } /* Statuts dossiers */ .badge-ouvert { background: rgba(59,130,246,.12); color: #60a5fa; border-color: rgba(59,130,246,.28); } .badge-enquete { background: rgba(249,115,22,.12); color: #fb923c; border-color: rgba(249,115,22,.28); } .badge-audition { background: rgba(74, 144, 217,.12); color: #7fb2e5; border-color: rgba(74, 144, 217,.28); } .badge-mise_en_examen { background: rgba(239,68,68,.12); color: #f87171; border-color: rgba(239,68,68,.28); } .badge-instruction { background: rgba(234,179,8,.12); color: #facc15; border-color: rgba(234,179,8,.28); } .badge-audience { background: rgba(74, 144, 217,.14); color: #a9cdf0; border-color: rgba(74, 144, 217,.3); } .badge-delibere { background: rgba(59,130,246,.14); color: #93c5fd; border-color: rgba(59,130,246,.3); } .badge-jugement { background: rgba(34,197,94,.12); color: #4ade80; border-color: rgba(34,197,94,.28); } .badge-classe { background: rgba(107,114,128,.12); color: #9ca3af; border-color: rgba(107,114,128,.25); } .badge-archive { background: rgba(55,48,48,.3); color: #6b7280; border-color: rgba(107,114,128,.15); } .badge-rendu { background: rgba(34,197,94,.12); color: #4ade80; border-color: rgba(34,197,94,.28); } .badge-revoque { background: rgba(239,68,68,.12); color: #f87171; border-color: rgba(239,68,68,.28); } .filters-bar { display: flex; gap: 12px; margin-bottom: 16px; } .filters-bar select { min-width: 200px; } .type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .type-card { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 16px; display: block; transition: transform .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease); } .type-card:hover { background: var(--bg-card-hover); border-color: rgba(74, 144, 217, .4); transform: translateY(-2px); box-shadow: var(--shadow-md); } .type-card .type-card-label { font-weight: 600; font-size: 15px; margin-bottom: 4px; } .type-card .type-card-org { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; } .document-paper { background: #fdfcf8; color: #1a1a1a; border-radius: var(--radius); padding: 48px 56px; font-family: var(--font-serif); position: relative; box-sizing: border-box; width: 210mm; min-height: 297mm; max-width: 100%; margin: 0 auto; box-shadow: 0 4px 24px rgba(0, 0, 0, .35); } .document-paper-card { background: transparent; box-shadow: none; padding: 0; width: auto; min-height: 0; } /* Document paginé : une bande de la couleur du fond marque la fin de chaque page. Les cales insérées par le script garantissent qu'aucun contenu ne s'y trouve, si bien que la coupure du PDF tombe toujours dans le vide. */ .document-paper.is-paged { background: repeating-linear-gradient( to bottom, transparent 0, transparent calc(var(--page-height) - var(--page-gap)), var(--bg-body) calc(var(--page-height) - var(--page-gap)), var(--bg-body) var(--page-height) ), #fdfcf8; } .paper-gap { /* Espace réservé : ne doit jamais capter d'interaction ni recevoir de style hérité qui modifierait sa hauteur. */ margin: 0; padding: 0; border: 0; pointer-events: none; } .document-paper .paper-seal { width: 64px; height: 64px; border-radius: 50%; border: 2px solid #1a1a1a; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 22px; overflow: hidden; flex-shrink: 0; } .document-paper .paper-seal img { width: 100%; height: 100%; object-fit: cover; } /* ---------- En-tête / lettre officielle ---------- */ .paper-letterhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; border-bottom: 2px solid #1a1a1a; padding-bottom: 18px; margin-bottom: 22px; } .paper-doc-title { font-size: 22px; font-weight: 700; margin: 0 0 4px; letter-spacing: .01em; } .paper-org-line { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #555; margin: 0; } .paper-org-sub { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #8a8a8a; margin: 2px 0 0; } .paper-state-tag { display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: #555; margin-bottom: 4px; } /* ---------- Boîte dossier (style certificat/lettre) ---------- */ .paper-infobox { display: grid; grid-template-columns: 1fr 1fr; border: 2px solid #1a1a1a; margin-bottom: 22px; background: #f4f1e8; } .paper-infobox-cell { padding: 10px 14px; border-left: 2px solid #1a1a1a; } .paper-infobox-cell:first-child { border-left: none; } .paper-infobox-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #6b6b6b; margin: 0 0 2px; } .paper-infobox-value { font-family: var(--font-mono); font-size: 15px; font-weight: 700; margin: 0; } /* ---------- Caption tribunal (style pleading) ---------- */ .paper-caption { display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid #1a1a1a; border-bottom: 2px solid #1a1a1a; margin-bottom: 22px; min-height: 130px; } .paper-caption-col { padding: 14px 18px; border-left: 1px solid #1a1a1a; display: flex; flex-direction: column; justify-content: space-between; } .paper-caption-col:first-child { border-left: none; } .paper-caption-plaintiff, .paper-caption-defendant { text-transform: uppercase; font-weight: 700; margin: 0 0 4px; } .paper-caption-role { text-align: right; font-style: italic; font-size: 14px; margin: 0; padding-right: 24px; } .paper-caption-vs { text-align: center; font-style: italic; font-weight: 700; font-size: 16px; margin: 10px 0; } .paper-meta-label { font-size: 12px; font-weight: 700; margin: 0; } .paper-meta-value { font-family: var(--font-mono); font-size: 16px; font-weight: 700; margin: 2px 0 12px; } .paper-meta-title { font-size: 15px; font-weight: 700; text-decoration: underline; text-transform: uppercase; margin: 0; } .paper-meta-date { font-size: 11px; font-weight: 700; color: #555; margin: 12px 0 0; } /* ---------- Corps du document ---------- */ .paper-body { font-size: 15px; line-height: 1.75; text-align: left; } .paper-body p { margin: 0 0 14px; } .paper-body p.indent { text-indent: 2em; } .paper-body p.pre { white-space: pre-wrap; } .paper-body h3 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; border-left: 3px solid #1a1a1a; padding-left: 8px; margin: 22px 0 8px; } .paper-body table { width: 100%; border-collapse: collapse; margin: 10px 0 16px; font-size: 13px; } .paper-body table caption { background: #1a1a1a; color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 6px; text-align: center; } .paper-body th, .paper-body td { border: 1px solid #c9c2ae; padding: 6px 8px; text-align: left; } .paper-body th { background: #f4f1e8; font-size: 11px; text-transform: uppercase; } /* Le survol sombre des tableaux de l'interface s'appliquait aussi ici : sur le papier, fond blanc et texte noir, la ligne survolée virait au noir illisible. Un document ne réagit pas au survol, il s'imprime. */ .paper-body tbody tr:hover { background: transparent; } .paper-field { margin-bottom: 16px; } .paper-field-label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #6b6b6b; margin-bottom: 3px; } .paper-field-value { font-size: 15px; white-space: pre-wrap; } /* ---------- Pied : form code ---------- */ .paper-formcode { margin-top: 28px; padding-top: 16px; border-top: 1px solid #c9c2ae; display: flex; justify-content: space-between; font-size: 11px; color: #8a8a8a; text-transform: uppercase; letter-spacing: .08em; } .document-paper .paper-footer { margin-top: 32px; padding-top: 16px; border-top: 1px solid #c9c2ae; font-size: 12px; color: #6b6b6b; display: flex; justify-content: space-between; } .document-actions { display: flex; gap: 10px; margin-top: 20px; } /* ---------- Registre : tableau paginé ---------- */ .reg-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; } .reg-search-row { display: flex; align-items: center; gap: 10px; flex: 1; } .reg-search-wrap { position: relative; flex: 1; max-width: 460px; } .reg-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-faint); pointer-events: none; } .reg-search-input { width: 100%; padding: 9px 36px 9px 36px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 14px; outline: none; transition: border-color var(--ease); } .reg-search-input:focus { border-color: var(--accent); } .reg-search-clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 14px; line-height: 1; padding: 2px 4px; } .reg-search-clear:hover { color: var(--text); } .reg-filter-select { padding: 9px 32px 9px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 13px; font-weight: 500; outline: none; cursor: pointer; transition: border-color var(--ease); white-space: nowrap; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; } .reg-filter-select:focus { border-color: var(--accent); } .reg-filter-select option { background: var(--bg-card, #1a1a2e); color: var(--text); } input[type="date"].reg-filter-select { color-scheme: dark; background-image: none; padding-right: 12px; } .reg-table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .reg-table { width: 100%; border-collapse: collapse; } .reg-table thead tr { border-bottom: 1px solid var(--border); } .reg-table th { padding: 13px 16px; text-align: left; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); white-space: nowrap; } .reg-row { border-bottom: 1px solid var(--border); cursor: pointer; transition: background var(--ease); } .reg-row:last-child { border-bottom: none; } .reg-row:hover { background: var(--surface-raised); } .reg-row td { padding: 13px 16px; font-size: 14px; color: var(--text); vertical-align: middle; } .reg-td-num { font-family: var(--font-mono); font-size: 13px !important; color: var(--text-muted) !important; font-weight: 700; white-space: nowrap; } .reg-td-title { font-weight: 600; max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .reg-td-type { color: var(--text-muted) !important; font-size: 13px !important; white-space: nowrap; } .reg-td-meta { color: var(--text-muted) !important; font-size: 13px !important; white-space: nowrap; } .reg-td-arrow { color: var(--text-faint); text-align: right; padding-right: 14px !important; } .reg-row:hover .reg-td-arrow { color: var(--accent); } .reg-empty { padding: 48px 16px !important; text-align: center; color: var(--text-faint) !important; font-size: 14px !important; } .reg-pagination { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px 0; } .reg-pag-info { font-size: 13px; color: var(--text-faint); } .reg-pag-controls { display: flex; align-items: center; gap: 4px; } .reg-pag-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 6px; background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); font-size: 13px; font-weight: 600; text-decoration: none; transition: background var(--ease), border-color var(--ease), color var(--ease); } .reg-pag-btn:hover { background: var(--surface-raised); color: var(--text); border-color: var(--border-soft); } .reg-pag-btn-active { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; } .reg-pag-btn-disabled { opacity: .35; pointer-events: none; } /* ---------- Show page : layout deux colonnes ---------- */ .show-layout { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; } .show-paper { min-width: 0; } .show-sidebar { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 0; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); } .show-sidebar-section { padding: 16px 18px; border-bottom: 1px solid var(--border-soft); } .show-sidebar-section:last-child { border-bottom: none; } .show-sidebar-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); margin: 0 0 12px; } .show-status-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .show-case-num { font-size: 12px; font-family: var(--font-mono); color: var(--text-faint); } .show-action-btn { display: flex; align-items: center; justify-content: center; width: 100%; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; cursor: pointer; border: none; margin-bottom: 7px; text-align: center; text-decoration: none; transition: background .15s var(--ease), filter .15s; } .show-action-btn:last-child { margin-bottom: 0; } .show-action-btn-primary { background: var(--accent-gradient); color: #fff; box-shadow: 0 4px 14px rgba(74, 144, 217, .28); } .show-action-btn-primary:hover { filter: brightness(1.08); } .show-action-btn-ghost { background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border-color); } .show-action-btn-ghost:hover { background: var(--bg-card-hover); } .show-action-btn-muted { color: var(--text-muted); font-size: 13px; } .show-action-btn-danger { background: rgba(239, 68, 68, .15); color: var(--danger); } .show-action-btn-danger:hover { background: rgba(239, 68, 68, .25); } .show-sig-code { display: flex; align-items: center; gap: 10px; background: rgba(74, 144, 217, .1); border: 1px solid rgba(74, 144, 217, .3); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 4px; } .show-sig-code-value { font-family: var(--font-mono); font-size: 20px; font-weight: 700; color: var(--accent); letter-spacing: .15em; flex: 1; text-align: center; } .show-link-box { display: flex; align-items: center; gap: 8px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 8px 10px; } .show-link-text { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; /* L'URL est tronquée par la gauche : la fin, le jeton, est la partie qui distingue un document d'un autre. */ direction: rtl; text-align: left; } .show-link-hint { margin: 7px 0 0; font-size: 11px; color: var(--text-faint); line-height: 1.45; } .show-link-btns { display: flex; gap: 4px; flex-shrink: 0; } @media (max-width: 1000px) { .show-layout { grid-template-columns: 1fr; } .show-sidebar { position: static; } } /* ---------- Show page : lien public + barre d'actions ---------- */ .doc-public-link { display: flex; align-items: center; gap: 14px; margin-top: 16px; background: var(--bg-card); border: 1px solid var(--border-soft); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-sm); } .doc-public-link-icon { flex-shrink: 0; color: var(--accent); opacity: .8; } .doc-public-link-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .doc-public-link-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); } .doc-public-link-url { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .doc-public-link-actions { display: flex; gap: 6px; flex-shrink: 0; } .doc-icon-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-muted); cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); text-decoration: none; } .doc-icon-btn:hover { background: var(--bg-card-hover); color: var(--text-primary); border-color: rgba(255, 255, 255, .12); } .doc-action-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 10px 14px; box-shadow: var(--shadow-sm); } .doc-action-group { display: flex; align-items: center; gap: 6px; } .doc-action-group + .doc-action-group { margin-left: auto; } .doc-action-group + .doc-action-group + .doc-action-group { margin-left: 0; } .doc-revoke-zone { overflow: hidden; } .doc-revoke-zone summary { list-style: none; display: flex; align-items: center; gap: 7px; cursor: pointer; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--danger); user-select: none; opacity: .75; transition: opacity .15s; } .doc-revoke-zone summary:hover { opacity: 1; } .doc-revoke-zone summary::-webkit-details-marker { display: none; } .doc-revoke-form { display: flex; flex-direction: column; gap: 8px; padding: 10px 0 0; } .doc-revoke-form .form-control { font-size: 13px; } .permission-matrix label { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 4px 0; color: var(--text-primary); text-transform: none; } /* ---------- Document studio (create/edit) ---------- */ .studio-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 16px; } .studio-breadcrumb { display: flex; align-items: center; gap: 10px; font-weight: 600; min-width: 0; } .studio-toolbar-actions { display: flex; gap: 8px; flex-shrink: 0; } .studio-toolbar-actions .btn[disabled] { opacity: .4; cursor: not-allowed; } .studio-layout { display: grid; grid-template-columns: 380px 1fr; gap: 20px; align-items: start; } .studio-form { display: flex; flex-direction: column; gap: 0; } /* Collé sous la barre du haut, l'aperçu occupe toute la hauteur restante : 64 px de barre + 1 px de filet + 24 px de décalage + 24 px de marge basse. */ .studio-preview { position: sticky; top: 24px; max-height: calc(var(--vh, 100vh) - 113px); overflow-y: auto; } .studio-section { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; } .studio-section summary { list-style: none; cursor: pointer; padding: 12px 14px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); display: flex; justify-content: space-between; align-items: center; } .studio-section summary::-webkit-details-marker { display: none; } .studio-section summary::after { content: "\203A"; transform: rotate(90deg); transition: transform .15s ease; color: var(--text-faint); } .studio-section[open] summary::after { transform: rotate(-90deg); } .studio-section-body { padding: 0 14px 14px; } .form-group-highlight .form-control { border-color: var(--danger); } .signature-field { display: flex; flex-direction: column; gap: 8px; } .signature-image-row { display: flex; gap: 8px; } .signature-image-row .form-control { flex: 1; } .btn-icon { background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm); width: 38px; flex-shrink: 0; cursor: pointer; font-size: 15px; } .btn-icon-ghost { background: none; border: none; color: var(--text-faint); cursor: pointer; padding: 4px 6px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; } .btn-icon-ghost:hover { background: rgba(239,68,68,.1); color: var(--danger); } .btn-icon:hover { background: var(--accent-hover); } .paper-signatures { display: flex; gap: 32px; margin-top: 36px; padding-top: 24px; border-top: 2px solid #1a1a1a; flex-wrap: wrap; } .paper-signature-block { flex: 1; min-width: 160px; text-align: center; } .paper-signature-block img { max-height: 50px; max-width: 100%; margin-bottom: 4px; } .paper-signature-name { font-family: var(--font-serif); font-style: italic; font-size: 22px; border-bottom: 1px solid #1a1a1a; padding-bottom: 6px; min-height: 34px; } .paper-signature-title { font-size: 11px; font-weight: 700; color: #1a1a1a; margin-top: 6px; text-transform: uppercase; letter-spacing: .06em; } #signature-pad-dialog { border: 1px solid var(--border-color); border-radius: var(--radius); background: var(--bg-panel); padding: 16px; } #signature-pad-dialog::backdrop { background: rgba(0, 0, 0, .6); } #signature-pad-canvas { background: #fff; border-radius: var(--radius-sm); cursor: crosshair; touch-action: none; } .signature-pad-actions { display: flex; gap: 8px; margin-top: 12px; justify-content: flex-end; } @media (max-width: 980px) { .studio-layout { grid-template-columns: 1fr; } .studio-preview { position: static; max-height: none; } } /* ---------- Calculateur pénal ---------- */ .charges-table-hidden { display: none; } .calc-fab { position: fixed; bottom: 24px; right: 24px; width: 52px; height: 52px; border-radius: 50%; border: none; background: linear-gradient(135deg, var(--accent), #1a4480); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 20px rgba(0, 0, 0, .4); z-index: 40; } .calc-fab:hover { filter: brightness(1.1); } #penal-calculator-dialog { border: 1px solid var(--border-color); border-radius: var(--radius); background: var(--bg-panel); padding: 0; width: 860px; max-width: 92vw; max-height: 86vh; color: var(--text-primary); } #penal-calculator-dialog::backdrop { background: rgba(0, 0, 0, .6); } .calc-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border-color); } .calc-head-icon { width: 38px; height: 38px; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--accent), #1a4480); display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; } .calc-head-text { display: flex; flex-direction: column; flex: 1; } .calc-head-text span { font-size: 13px; color: var(--text-muted); } .calc-close { background: transparent; border: none; color: var(--text-muted); font-size: 20px; cursor: pointer; line-height: 1; } .calc-body { display: flex; height: 58vh; } .calc-sidebar { width: 170px; flex-shrink: 0; border-right: 1px solid var(--border-color); padding: 14px 10px; overflow-y: auto; } .calc-sidebar-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); padding: 0 6px 8px; } .calc-cat, .calc-book { display: block; width: 100%; text-align: left; background: transparent; border: none; color: var(--text-muted); padding: 9px 10px; border-radius: var(--radius-sm); font-size: 14px; cursor: pointer; margin-bottom: 2px; } .calc-cat:hover, .calc-book:hover { background: var(--bg-card-hover); } .calc-cat.active, .calc-book.active { background: var(--accent); color: #fff; } .calc-main { flex: 1; min-width: 0; padding: 14px; overflow-y: auto; } .calc-main-toolbar { display: flex; gap: 10px; margin-bottom: 12px; } .calc-search { margin-bottom: 0; flex: 1; } .calc-selection-toggle { flex-shrink: 0; background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-muted); border-radius: var(--radius-sm); padding: 0 14px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); } .calc-selection-toggle:hover { color: var(--text-primary); } .calc-selection-toggle.active { background: var(--accent-gradient); color: #fff; border-color: var(--accent); } .calc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .calc-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 12px; } .calc-card-head { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; } .calc-card-head input { margin-top: 3px; } .calc-card-title { flex: 1; font-size: 14px; font-weight: 600; } .calc-card-fine { font-size: 14px; font-weight: 700; white-space: nowrap; } .calc-card-meta { display: flex; align-items: center; gap: 8px; margin: 6px 0 4px; } .calc-card-penalty { font-size: 12px; color: var(--text-muted); } .calc-card-code { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; } .calc-cat-contravention { background: rgba(34, 197, 94, .15); color: var(--success); } .calc-cat-delit_mineur { background: rgba(234, 179, 8, .15); color: var(--warning); } .calc-cat-delit_majeur { background: rgba(249, 115, 22, .15); color: #f97316; } .calc-cat-crime { background: rgba(239, 68, 68, .15); color: var(--danger); } .calc-card-edit { display: flex; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border-color); } .calc-card-edit input { padding: 6px 8px; font-size: 13px; } .calc-card-edit .calc-edit-fine { width: 80px; flex-shrink: 0; } .calc-foot { display: flex; align-items: center; gap: 16px; padding: 14px 20px; border-top: 1px solid var(--border-color); } .calc-foot-row { display: flex; align-items: center; gap: 8px; } .calc-adjust-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); white-space: nowrap; } .calc-adjust { width: 170px; } .calc-total { margin-left: auto; text-align: right; } .calc-total-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); } .calc-total-value { font-size: 20px; font-weight: 700; color: var(--success); } @media (max-width: 720px) { .calc-body { flex-direction: column; height: 64vh; } .calc-sidebar { width: auto; display: flex; gap: 6px; border-right: none; border-bottom: 1px solid var(--border-color); } .calc-grid { grid-template-columns: 1fr; } } /* ---------- Members ---------- */ .pending-card { border-top: 3px solid var(--warning); } .pending-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border-color); } .pending-count-badge { background: var(--warning); color: #000; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 99px; line-height: 1.6; } .pending-list { display: flex; flex-direction: column; gap: 10px; } .pending-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--bg-input); border-radius: var(--radius-sm); border: 1px solid var(--border-color); transition: border-color .15s; } .pending-item:hover { border-color: rgba(234, 179, 8, .35); } .pending-info { flex: 1; min-width: 0; } .pending-info-name { font-size: 15px; font-weight: 600; } .pending-info-sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; } .pending-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .mem-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--accent-soft); border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; color: var(--accent); flex-shrink: 0; overflow: hidden; } .mem-avatar img { width: 100%; height: 100%; object-fit: cover; } .mem-avatar-sm { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; color: var(--accent); flex-shrink: 0; overflow: hidden; } .mem-avatar-sm img { width: 100%; height: 100%; object-fit: cover; } .mem-cell { display: flex; align-items: center; gap: 10px; } .mem-name { font-size: 14px; font-weight: 500; line-height: 1.3; } .mem-username { font-size: 12px; color: var(--text-muted); } .grade-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; padding: 3px 9px; border-radius: 20px; background: var(--bg-input); border: 1px solid var(--border-color); white-space: nowrap; } .grade-pill-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .members-search { width: 220px; font-size: 14px; } /* ---------- Grades & permissions ---------- */ .grades-layout { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: start; } .grades-list { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); overflow: hidden; position: sticky; top: 20px; } .grades-list-header { padding: 10px 14px; font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--text-muted); text-transform: uppercase; border-bottom: 1px solid var(--border-color); } .grade-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border: none; border-bottom: 1px solid var(--border-color); background: none; cursor: pointer; text-align: left; color: var(--text-primary); font-family: inherit; font-size: 14px; transition: background .12s; } .grade-item:last-child { border-bottom: none; } .grade-item:hover { background: var(--bg-card-hover); } .grade-item.active { background: var(--accent-soft); } .grade-item.active .grade-item-name { color: var(--accent); } .grade-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .grade-item-info { flex: 1; min-width: 0; } .grade-item-name { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .grade-item-org { display: block; font-size: 12px; color: var(--text-muted); margin-top: 1px; } .grades-detail-wrap { min-width: 0; } .grades-detail-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .grades-detail-title { display: flex; align-items: center; gap: 10px; } .grade-org-badge { font-size: 12px; color: var(--text-muted); background: var(--bg-input); padding: 2px 8px; border-radius: 20px; border: 1px solid var(--border-color); } .perm-matrix { display: flex; flex-direction: column; gap: 20px; } .perm-group { border: 1px solid var(--border-color); border-radius: var(--radius-sm); overflow: hidden; } .perm-group-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: var(--bg-input); border-bottom: 1px solid var(--border-color); font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--text-muted); text-transform: uppercase; } .perm-group-toggle { display: flex; align-items: center; gap: 5px; cursor: pointer; color: var(--accent); font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; user-select: none; } .perm-group-toggle:hover { color: var(--accent-hover); } .perm-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); padding: 8px; gap: 2px; } .perm-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 14px; color: var(--text-primary); transition: background .1s; } .perm-item:hover { background: var(--bg-card-hover); } .perm-item input[type="checkbox"] { accent-color: var(--accent); width: 14px; height: 14px; flex-shrink: 0; cursor: pointer; } .grades-create-toggle { cursor: pointer; } .grades-create-toggle summary { list-style: none; } .grades-create-toggle summary::-webkit-details-marker { display: none; } /* ═══════════════════════════════════════════════════════════════ UTILITAIRES COMMUNS (card-header / card-body / card-title) ═══════════════════════════════════════════════════════════════ */ .card-header { padding: 14px 20px; border-bottom: 1px solid var(--border-soft); background: rgba(255, 255, 255, .015); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .card-title { font-size: 15px; font-weight: 700; margin: 0; line-height: 1.3; color: var(--text-primary); } .card-body { padding: 20px; } .card-body > *:first-child { margin-top: 0; } .card-body > *:last-child { margin-bottom: 0; } .form-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .06em; } /* ═══════════════════════════════════════════════════════════════ DOSSIERS — mise en accusation ═══════════════════════════════════════════════════════════════ */ /* ── Badges de statut de procédure ───────────────────────────── */ .badge-dos-brouillon { background: rgba(255,255,255,.06); color: var(--text-muted); border-color: var(--border-color); } .badge-dos-depose { background: rgba(59,130,246,.14); color: #60a5fa; border-color: rgba(59,130,246,.35); } .badge-dos-en_cours { background: rgba(234,179,8,.14); color: #facc15; border-color: rgba(234,179,8,.35); } .badge-dos-juge { background: rgba(16,185,129,.14); color: #34d399; border-color: rgba(16,185,129,.35); } .badge-dos-classe { background: rgba(74, 144, 217,.14); color: #7fb2e5; border-color: rgba(74, 144, 217,.35); } .dos-muted { font-size: 13px; color: var(--text-muted); } .dos-field-hint { font-size: 12px; color: var(--text-faint); margin: 6px 0 0; } .dos-num { font-family: var(--font-mono); font-weight: 700; white-space: nowrap; } .dos-prose { font-size: 14px; line-height: 1.75; margin: 0; color: var(--text-primary); } /* Conservé pour le registre des jugements COJ. */ .dos-empty-state { text-align: center; padding: 48px 20px; color: var(--text-faint); font-size: 14px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); } .dos-empty { text-align: center; padding: 44px 20px; color: var(--text-faint); font-size: 14px; background: var(--bg-card); border: 1px dashed var(--border-color); border-radius: var(--radius); margin-top: 14px; } /* ── Modale création / modification ──────────────────────────── */ .modal-box-lg { max-width: 720px; max-height: 90vh; display: flex; flex-direction: column; } .modal-box-lg form { display: flex; flex-direction: column; min-height: 0; } .modal-icon { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; background: var(--accent-soft); border: 1px solid rgba(74, 144, 217, .3); color: var(--accent); } .modal-title { font-size: 16px; font-weight: 700; } .modal-subtitle { font-size: 13px; color: var(--text-faint); margin-top: 2px; } .modal-pane-scroll { overflow-y: auto; min-height: 0; } .modal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 14px; } .modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border-soft); background: var(--bg-panel); } /* ── Registre : barre de synthèse ────────────────────────────── */ .dos-statbar { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 16px; } @media (max-width: 900px) { .dos-statbar { grid-template-columns: repeat(3, 1fr); } } .dos-statbar-item { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; background: var(--bg-card); border: 1px solid var(--border-soft); border-top: 2px solid var(--border-color); border-radius: var(--radius-sm); transition: background .15s var(--ease), border-color .15s var(--ease); } .dos-statbar-item:hover { background: var(--bg-card-hover); } .dos-statbar-item.active { border-top-color: var(--accent); background: var(--accent-soft); } .dos-statbar-value { font-size: 20px; font-weight: 800; line-height: 1; } .dos-statbar-label { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint); } .dos-flow-depose { border-top-color: rgba(59,130,246,.5); } .dos-flow-en_cours { border-top-color: rgba(234,179,8,.5); } .dos-flow-juge { border-top-color: rgba(16,185,129,.5); } .dos-flow-classe { border-top-color: rgba(74, 144, 217,.5); } /* ── Registre : grille de cartes ─────────────────────────────── */ .dos-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; } .dos-card { display: flex; flex-direction: column; gap: 9px; padding: 15px 17px; background: var(--bg-card); border: 1px solid var(--border-soft); border-left: 3px solid var(--border-color); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: background .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease); } .dos-card:hover { background: var(--bg-card-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); } .dos-card.dos-priority-urgente { border-left-color: var(--warning); } .dos-card.dos-priority-critique { border-left-color: var(--danger); } .dos-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .dos-ref { font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--gold-bright); } .dos-card-badges { display: flex; gap: 5px; flex-wrap: wrap; } .dos-card-title { font-size: 15px; font-weight: 700; line-height: 1.35; } .dos-card-summary { font-size: 13px; line-height: 1.6; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .dos-card-progress { display: flex; gap: 3px; } .dos-card-progress-step { flex: 1; height: 3px; border-radius: 999px; background: var(--border-color); } .dos-card-progress-step.done { background: var(--accent); } .dos-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .dos-card-meta { display: flex; gap: 5px; flex-wrap: wrap; } .dos-card-counts { display: flex; gap: 10px; font-size: 12px; color: var(--text-faint); } .dos-card-counts span { display: inline-flex; align-items: center; gap: 3px; } .dos-card-author { font-size: 12px; color: var(--text-faint); padding-top: 8px; border-top: 1px solid var(--border-soft); } .dos-card-hearing { color: var(--warning); font-weight: 600; } .dos-badge-priority { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 999px; border: 1px solid transparent; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; } .dos-priority-badge-normale { background: rgba(255,255,255,.07); color: var(--text-muted); border-color: var(--border-color); } .dos-priority-badge-urgente { background: rgba(234,179,8,.15); color: var(--warning); border-color: rgba(234,179,8,.35); } .dos-priority-badge-critique { background: rgba(239,68,68,.15); color: var(--danger); border-color: rgba(239,68,68,.35); } .dos-type-pill, .dos-org-pill, .dos-share-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--border-color); font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; } .dos-share-pill { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.3); color: var(--success); } /* ── Fiche : en-tête ─────────────────────────────────────────── */ .dos-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 20px 22px; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius); box-shadow: var(--shadow-sm); margin-bottom: 14px; } .dos-hero-left { flex: 1; min-width: 0; } .dos-hero-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 9px; } .dos-hero-title { font-size: 22px; font-weight: 800; margin: 0 0 6px; line-height: 1.25; } .dos-hero-sub { font-size: 13px; color: var(--text-muted); } .dos-hero-sub strong { color: var(--text-primary); } .dos-hero-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* ── Fiche : étapes de procédure ─────────────────────────────── */ .dos-stepper { position: relative; display: flex; justify-content: space-between; padding: 18px 24px 14px; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius); margin-bottom: 14px; overflow-x: auto; } .dos-stepper-line { position: absolute; top: 32px; left: 60px; right: 60px; height: 2px; background: var(--border-color); } .dos-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 96px; } .dos-step-btn { display: flex; flex-direction: column; align-items: center; gap: 7px; background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; } .dos-step-dot { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bg-panel); border: 2px solid var(--border-color); color: var(--text-faint); font-size: 13px; font-weight: 700; transition: all .18s var(--ease); } .dos-step-label { font-size: 12px; font-weight: 600; color: var(--text-faint); text-align: center; transition: color .18s var(--ease); } .dos-step-btn:hover .dos-step-dot { border-color: var(--accent); color: var(--accent); } .dos-step-btn:hover .dos-step-label { color: var(--text-primary); } .dos-step.done .dos-step-dot { background: var(--accent-2); border-color: var(--accent-2); color: #fff; } .dos-step.done .dos-step-label { color: var(--text-muted); } .dos-step.active .dos-step-dot { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 0 4px rgba(74, 144, 217,.2); } .dos-step.active .dos-step-label { color: var(--accent); font-weight: 700; } /* ── Fiche : onglets ─────────────────────────────────────────── */ .dos-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border-color); margin-bottom: 18px; overflow-x: auto; } .dos-tab { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-muted); font-family: inherit; font-size: 14px; white-space: nowrap; cursor: pointer; transition: color .15s var(--ease), border-color .15s var(--ease); } .dos-tab:hover { color: var(--text-primary); } .dos-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; } .dos-tab-lock { font-size: 11px; opacity: .7; } .dos-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: rgba(255,255,255,.08); font-size: 11px; font-weight: 700; color: var(--text-muted); } /* ── Fiche : mises en page communes ──────────────────────────── */ .dos-grid-2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; align-items: start; } @media (max-width: 1000px) { .dos-grid-2 { grid-template-columns: 1fr; } } .dos-details { padding: 0; margin-bottom: 14px; } .dos-details > summary { cursor: pointer; list-style: none; user-select: none; } .dos-details > summary::-webkit-details-marker { display: none; } .dos-details > summary .card-title { color: var(--accent); } .dos-details[open] > summary { border-bottom: 1px solid var(--border-soft); } .dos-form-wrap { max-width: 820px; } .dos-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; } .dos-check { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-primary); cursor: pointer; } .dos-check-row { display: flex; gap: 20px; flex-wrap: wrap; margin: 4px 0 12px; } .dos-check-lg { font-size: 14px; font-weight: 600; } .dos-deflist { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; margin: 0; font-size: 13px; } .dos-deflist dt { color: var(--text-faint); white-space: nowrap; } .dos-deflist dd { margin: 0; color: var(--text-primary); } .dos-deflist-sm { font-size: 12px; margin-top: 8px; } .dos-mini-select { padding: 4px 8px; border-radius: var(--radius-sm); background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-primary); font-family: inherit; font-size: 12px; cursor: pointer; } .dos-card-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-soft); } .dos-inline-delete { display: inline; } .dos-inline-edit > summary { list-style: none; display: inline-flex; } .dos-inline-edit > summary::-webkit-details-marker { display: none; } .dos-inline-form { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; padding: 12px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); } /* ── Aperçu : recevabilité & peine encourue ──────────────────── */ .dos-percent { font-size: 15px; font-weight: 800; color: var(--accent); } .dos-progress { height: 6px; border-radius: 999px; background: var(--bg-input); overflow: hidden; margin-bottom: 14px; } .dos-progress-fill { height: 100%; border-radius: 999px; background: var(--accent-gradient); transition: width .4s var(--ease); } .dos-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; } .dos-checklist li { display: flex; align-items: center; gap: 9px; font-size: 13px; } .dos-checklist li.ok { color: var(--text-primary); } .dos-checklist li.todo { color: var(--text-faint); } .dos-check-mark { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; font-size: 11px; font-weight: 700; flex-shrink: 0; } .dos-checklist li.ok .dos-check-mark { background: rgba(34,197,94,.15); color: var(--success); } .dos-checklist li.todo .dos-check-mark { background: rgba(255,255,255,.05); color: var(--text-faint); } .dos-exposure-amount { font-family: var(--font-mono); font-size: 26px; font-weight: 800; color: var(--danger); line-height: 1; } .dos-exposure-list { list-style: none; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--text-muted); } .dos-exposure-list li::before { content: '— '; color: var(--text-faint); } /* ── Aperçu : prochaine audience & verdict ───────────────────── */ .dos-next-hearing { border-color: rgba(74, 144, 217,.3); background: rgba(74, 144, 217,.05); cursor: pointer; } .dos-next-hearing:hover { background: rgba(74, 144, 217,.09); } .dos-next-hearing-body { display: flex; align-items: center; gap: 16px; } .dos-next-hearing-date { display: flex; flex-direction: column; align-items: center; padding: 9px 14px; border-radius: var(--radius-sm); background: rgba(74, 144, 217,.12); border: 1px solid rgba(74, 144, 217,.3); } .dos-next-hearing-day { font-size: 22px; font-weight: 800; color: var(--accent); line-height: 1; } .dos-next-hearing-month { font-size: 11px; font-weight: 600; color: var(--accent); } .dos-next-hearing-label { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint); } .dos-next-hearing-type { font-size: 15px; font-weight: 700; margin: 2px 0; } .dos-verdict-card { border-color: rgba(16,185,129,.3); } .dos-verdict-peine { font-size: 14px; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--border-soft); } /* ── Parties ─────────────────────────────────────────────────── */ .dos-person-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 12px; } .dos-person-card { padding: 15px 17px; background: var(--bg-card); border: 1px solid var(--border-soft); border-left: 3px solid var(--border-color); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .dos-person-card.dos-role-accuse { border-left-color: var(--danger); } .dos-person-card.dos-role-victime, .dos-person-card.dos-role-plaignant { border-left-color: #60a5fa; } .dos-person-card.dos-role-temoin { border-left-color: var(--warning); } .dos-person-card.dos-role-avocat_defense, .dos-person-card.dos-role-avocat_accusation { border-left-color: var(--accent); } .dos-person-head { display: flex; align-items: flex-start; gap: 12px; } .dos-person-avatar { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; background: var(--bg-input); border: 1px solid var(--border-color); font-size: 16px; font-weight: 700; color: var(--text-muted); overflow: hidden; } .dos-person-avatar img { width: 100%; height: 100%; object-fit: cover; } .dos-person-ident { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; } .dos-person-name { font-size: 15px; font-weight: 700; } .dos-person-alias { font-size: 13px; font-weight: 400; color: var(--text-muted); font-style: italic; } .dos-person-desc { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin: 10px 0 0; } .dos-role-pill { display: inline-flex; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--border-color); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); } .dos-role-pill-accuse { background: rgba(239,68,68,.13); color: #f87171; border-color: rgba(239,68,68,.3); } .dos-role-pill-victime, .dos-role-pill-plaignant { background: rgba(59,130,246,.13); color: #60a5fa; border-color: rgba(59,130,246,.3); } .dos-role-pill-temoin { background: rgba(234,179,8,.13); color: #facc15; border-color: rgba(234,179,8,.3); } .dos-role-pill-avocat_defense, .dos-role-pill-avocat_accusation { background: rgba(74, 144, 217,.13); color: #7fb2e5; border-color: rgba(74, 144, 217,.3); } .dos-flag { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .dos-flag-custody { background: rgba(239,68,68,.15); color: #f87171; } .dos-flag-secret { background: rgba(234,179,8,.15); color: #facc15; } .dos-flag-auto { background: rgba(255,255,255,.06); color: var(--text-faint); } .dos-flag-sworn { background: rgba(34,197,94,.15); color: #4ade80; } .dos-flag-pin { background: rgba(74, 144, 217,.15); color: #7fb2e5; } /* ── Chefs d'accusation ──────────────────────────────────────── */ .dos-charge-table td { vertical-align: middle; } .dos-charge-code { display: inline-block; font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--accent); margin-right: 7px; } .dos-charge-label { font-weight: 600; } .dos-charge-abandonnee, .dos-charge-acquittee { opacity: .45; text-decoration: line-through; } .dos-charge-total td { padding: 12px 14px; border-top: 2px solid var(--border-color); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); } .dos-charge-total .dos-num { color: var(--danger); font-size: 15px; } .dos-cat-pill { display: inline-flex; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--border-color); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); white-space: nowrap; } .dos-cat-crime { background: rgba(239,68,68,.14); color: #f87171; border-color: rgba(239,68,68,.3); } .dos-cat-delit_majeur { background: rgba(249,115,22,.14); color: #fb923c; border-color: rgba(249,115,22,.3); } .dos-cat-delit_mineur { background: rgba(234,179,8,.14); color: #facc15; border-color: rgba(234,179,8,.3); } .dos-cat-contravention { background: rgba(59,130,246,.14); color: #60a5fa; border-color: rgba(59,130,246,.3); } /* ── Timeline ────────────────────────────────────────────────── */ .dos-timeline { position: relative; padding-left: 22px; } .dos-timeline::before { content: ''; position: absolute; top: 6px; bottom: 6px; left: 5px; width: 2px; background: var(--border-color); } .dos-tl-item { position: relative; padding-bottom: 16px; } .dos-tl-dot { position: absolute; left: -22px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg-body); border: 2px solid var(--text-faint); } .dos-tl-procedure .dos-tl-dot { border-color: var(--accent); } .dos-tl-arrestation .dos-tl-dot { border-color: var(--danger); } .dos-tl-audience .dos-tl-dot { border-color: #22d3ee; } .dos-tl-preuve .dos-tl-dot { border-color: var(--warning); } .dos-tl-charge .dos-tl-dot { border-color: #fb923c; } .dos-tl-deposition .dos-tl-dot { border-color: var(--success); } .dos-tl-document .dos-tl-dot { border-color: #60a5fa; } .dos-tl-body { padding: 11px 14px; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); } .dos-tl-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; } .dos-tl-time { font-family: var(--font-mono); font-size: 12px; color: var(--accent); font-weight: 700; } .dos-tl-type { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); } .dos-tl-title { font-size: 14px; font-weight: 600; } .dos-tl-desc { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin: 5px 0 0; } .dos-tl-author { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--text-faint); margin-top: 7px; } /* ── Pièces à conviction ─────────────────────────────────────── */ .dos-dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 26px 18px; margin-bottom: 14px; border: 2px dashed var(--border-color); border-radius: var(--radius); background: var(--bg-input); text-align: center; transition: border-color .15s var(--ease), background .15s var(--ease); } .dos-dropzone.over { border-color: var(--accent); background: var(--accent-soft); } .dos-dropzone-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .dos-dropzone-text { font-size: 14px; color: var(--text-muted); display: flex; flex-direction: column; gap: 3px; } .dos-dropzone-text strong { color: var(--text-primary); } .dos-dropzone-file { font-size: 13px; font-weight: 600; color: var(--accent); } .dos-evidence-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; } .dos-evidence-card { display: flex; flex-direction: column; gap: 9px; } .dos-evidence-secret { border-color: rgba(234,179,8,.3); } .dos-evidence-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .dos-evidence-ref { font-family: var(--font-mono); font-size: 13px; font-weight: 800; color: var(--gold-bright); } .dos-evidence-state { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; background: rgba(255,255,255,.05); color: var(--text-muted); } .dos-evstate-scelle { background: rgba(74, 144, 217,.14); color: #7fb2e5; } .dos-evstate-en_analyse { background: rgba(234,179,8,.14); color: #facc15; } .dos-evstate-au_dossier { background: rgba(34,197,94,.14); color: #4ade80; } .dos-evstate-detruit { background: rgba(239,68,68,.14); color: #f87171; } .dos-evidence-title { font-size: 15px; font-weight: 700; } .dos-evidence-desc { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin: 0; } .dos-evidence-media { border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-input); border: 1px solid var(--border-color); } .dos-evidence-media img, .dos-evidence-media video { width: 100%; max-height: 260px; object-fit: contain; display: block; background: #000; } .dos-evidence-media audio { width: 100%; padding: 8px; } .dos-file-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: var(--radius-sm); background: var(--bg-input); border: 1px solid var(--border-color); font-size: 13px; color: var(--text-primary); } .dos-file-chip:hover { border-color: var(--accent); } /* Chaîne de possession */ .dos-custody > summary { display: flex; align-items: center; gap: 7px; padding: 8px 0; cursor: pointer; list-style: none; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); border-top: 1px solid var(--border-soft); } .dos-custody > summary::-webkit-details-marker { display: none; } .dos-custody > summary:hover { color: var(--accent); } .dos-custody-body { padding-top: 4px; } .dos-custody-list { list-style: none; margin: 0 0 12px; padding: 0 0 0 16px; border-left: 2px solid var(--border-color); display: flex; flex-direction: column; gap: 11px; } .dos-custody-list li { position: relative; } .dos-custody-list li::before { content: ''; position: absolute; left: -21px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } .dos-custody-line { display: flex; align-items: center; gap: 8px; } .dos-custody-action { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); } .dos-custody-time { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); } .dos-custody-holders { font-size: 13px; color: var(--text-primary); margin-top: 2px; } .dos-custody-arrow { color: var(--text-faint); margin: 0 4px; } .dos-custody-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; padding: 11px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); } .dos-custody-form .btn { grid-column: 1 / -1; } /* ── Dépositions ─────────────────────────────────────────────── */ .dos-testimony { margin-bottom: 12px; } .dos-testimony-content { margin: 0; padding: 14px 18px; border-left: 3px solid var(--accent); background: var(--bg-input); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 14px; line-height: 1.8; color: var(--text-primary); } .dos-textarea-lg { font-family: inherit; line-height: 1.7; } /* ── Audiences ───────────────────────────────────────────────── */ .dos-hearing-list { display: flex; flex-direction: column; gap: 10px; } .dos-hearing { display: flex; align-items: center; gap: 16px; padding: 14px 17px; } .dos-hearing-annulee, .dos-hearing-reportee { opacity: .55; } .dos-hearing-date { display: flex; flex-direction: column; align-items: center; padding: 8px 13px; border-radius: var(--radius-sm); background: var(--bg-input); border: 1px solid var(--border-color); flex-shrink: 0; } .dos-hearing-day { font-size: 20px; font-weight: 800; line-height: 1; color: var(--accent); } .dos-hearing-month { font-size: 11px; color: var(--text-muted); } .dos-hearing-time { font-size: 11px; font-family: var(--font-mono); color: var(--text-faint); margin-top: 2px; } .dos-hearing-main { flex: 1; min-width: 0; } .dos-hearing-type { font-size: 15px; font-weight: 700; margin-bottom: 3px; } .dos-hearing-actions { display: flex; align-items: center; gap: 7px; flex-shrink: 0; } /* ── Documents & liens ───────────────────────────────────────── */ .dos-link-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .dos-link-item { display: flex; align-items: center; gap: 10px; padding: 11px 15px; } .dos-link-item > a, .dos-link-item > span:first-child { flex: 1; display: flex; align-items: center; gap: 9px; min-width: 0; } .dos-link-item:hover { border-color: rgba(74, 144, 217,.3); } .dos-link-label { font-size: 14px; font-weight: 600; } /* ── Notes internes ──────────────────────────────────────────── */ .dos-banner { display: flex; align-items: center; gap: 9px; padding: 11px 15px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 14px; } .dos-banner-lock { background: rgba(234,179,8,.08); border: 1px solid rgba(234,179,8,.25); color: #facc15; } .dos-note-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; } .dos-note { padding: 14px 17px; } .dos-note-pinned { border-color: rgba(74, 144, 217,.35); background: rgba(74, 144, 217,.05); } .dos-note-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .dos-note-author { display: flex; align-items: center; gap: 8px; font-size: 13px; } .dos-note-avatar { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--bg-input); border: 2px solid var(--accent); font-size: 12px; font-weight: 700; overflow: hidden; } .dos-note-avatar img { width: 100%; height: 100%; object-fit: cover; } .dos-note-actions { display: flex; gap: 4px; } .dos-note-content { font-size: 14px; line-height: 1.7; margin: 0; white-space: pre-wrap; } /* ── Partage ─────────────────────────────────────────────────── */ .dos-share-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft); } .dos-share-stats > div { display: flex; flex-direction: column; gap: 2px; } .dos-share-stat-value { font-size: 15px; font-weight: 700; color: var(--text-primary); } .dos-visibility-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; } .dos-visibility-list li { display: flex; align-items: flex-start; gap: 9px; line-height: 1.5; } .dos-visibility-list li::before { flex-shrink: 0; font-size: 12px; font-weight: 700; line-height: 1.4; } .dos-visibility-list li.shown { color: var(--text-primary); } .dos-visibility-list li.shown::before { content: '👁'; } .dos-visibility-list li.hidden { color: var(--text-faint); } .dos-visibility-list li.hidden::before { content: '🔒'; } /* ═══════════════════════════════════════════════════════════════ PROCÉDURES — registre du parquet ═══════════════════════════════════════════════════════════════ */ /* ── Filtres rapides ─────────────────────────────────────────── */ .proc-chiprow { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; } .proc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--bg-card); border: 1px solid var(--border-soft); font-size: 13px; font-weight: 600; color: var(--text-muted); transition: color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease); } .proc-chip:hover { color: var(--text-primary); border-color: rgba(255,255,255,.14); } .proc-chip.active { background: var(--accent-soft); border-color: rgba(74, 144, 217,.45); color: var(--accent); } .proc-chip-count { padding: 0 6px; border-radius: 999px; background: rgba(255,255,255,.07); font-size: 11px; font-weight: 700; } .proc-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; font-size: 13px; color: var(--text-muted); white-space: nowrap; cursor: pointer; } /* ── Tags d'état ─────────────────────────────────────────────── */ .proc-tag { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 6px; border: 1px solid transparent; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; } .proc-tag-nouvelle { background: rgba(255,255,255,.06); color: var(--text-muted); border-color: var(--border-color); } .proc-tag-en_cours { background: rgba(59,130,246,.14); color: #60a5fa; border-color: rgba(59,130,246,.3); } .proc-tag-requisition_envoyee { background: rgba(74, 144, 217,.14); color: #7fb2e5; border-color: rgba(74, 144, 217,.3); } .proc-tag-attente_reponse { background: rgba(234,179,8,.14); color: #facc15; border-color: rgba(234,179,8,.3); } .proc-tag-negociation { background: rgba(249,115,22,.14); color: #fb923c; border-color: rgba(249,115,22,.3); } .proc-tag-audience_fixee { background: rgba(6,182,212,.14); color: #22d3ee; border-color: rgba(6,182,212,.3); } .proc-tag-jugee { background: rgba(16,185,129,.14); color: #34d399; border-color: rgba(16,185,129,.3); } .proc-tag-classee { background: rgba(107,114,128,.16); color: #9ca3af; border-color: rgba(107,114,128,.28); } .proc-tag-abandonnee { background: rgba(239,68,68,.12); color: #f87171; border-color: rgba(239,68,68,.28); } /* États des enquêtes : mêmes pastilles que les procédures. */ .proc-tag-ordonnee { background: rgba(139,92,246,.14); color: #a9cdf0; border-color: rgba(74,144,217,.3); } .proc-tag-suspendue { background: rgba(249,115,22,.14); color: #fb923c; border-color: rgba(249,115,22,.3); } .proc-tag-cloturee { background: rgba(16,185,129,.14); color: #34d399; border-color: rgba(16,185,129,.3); } .proc-tag-classee_sans_suite { background: rgba(107,114,128,.16); color: #9ca3af; border-color: rgba(107,114,128,.28); } .proc-msg-acte .proc-msg-type { background: rgba(74,144,217,.15); color: #7fb2e5; } .proc-msg-rapport .proc-msg-type { background: rgba(201,162,39,.16); color: var(--gold-bright); } .inv-findings { border-left: 3px solid var(--success); } /* ── Enquêtes : classification et indicateurs ────────────────── */ .inv-classif { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 6px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; border: 1px solid transparent; } .inv-classif-confidentielle { background: rgba(201,162,39,.14); color: var(--gold-bright); border-color: rgba(201,162,39,.4); } .inv-classif-secrete { background: rgba(220,75,71,.16); color: #f87171; border-color: rgba(220,75,71,.45); } .inv-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; } .inv-metric { display: flex; flex-direction: column; gap: 2px; padding: 11px 13px; border-radius: var(--radius-sm); background: var(--bg-input); border: 1px solid var(--border-soft); } .inv-metric-alert { border-color: rgba(220,75,71,.4); } .inv-metric-value { font-size: 20px; font-weight: 800; line-height: 1; } .inv-metric-label { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; } /* ── Personnes d'intérêt ─────────────────────────────────────── */ .inv-role-cible { border-left-color: var(--danger); } .inv-role-suspect, .inv-role-complice { border-left-color: #fb923c; } .inv-role-temoin { border-left-color: var(--warning); } .inv-role-victime { border-left-color: #60a5fa; } .inv-role-informateur { border-left-color: var(--gold); } .inv-pstatus { display: inline-flex; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; background: rgba(255,255,255,.06); color: var(--text-muted); } .inv-pstatus-a_localiser { background: rgba(234,179,8,.14); color: #facc15; } .inv-pstatus-sous_surveillance { background: rgba(74,144,217,.14); color: #7fb2e5; } .inv-pstatus-interpelle { background: rgba(220,75,71,.16); color: #f87171; } .inv-pstatus-entendu { background: rgba(16,185,129,.14); color: #34d399; } .inv-pstatus-hors_de_cause { background: rgba(107,114,128,.16); color: #9ca3af; } /* ── Actes d'enquête ─────────────────────────────────────────── */ .inv-act-list { display: flex; flex-direction: column; gap: 12px; } .inv-act { border-left: 3px solid var(--border-color); } .inv-act-execute { border-left-color: var(--success); } .inv-act-autorise { border-left-color: var(--accent); } .inv-act-demande { border-left-color: var(--warning); } .inv-act-refuse, .inv-act-annule { border-left-color: var(--danger); opacity: .65; } .inv-act-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; } .inv-act-type { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); } .inv-act-title { font-size: 15px; font-weight: 700; margin-bottom: 8px; } .inv-act-result { margin-top: 10px; padding: 10px 13px; border-radius: var(--radius-sm); background: var(--bg-input); border-left: 2px solid var(--success); font-size: 13px; line-height: 1.6; } .inv-astatus { padding: 2px 9px; border-radius: 5px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; background: rgba(255,255,255,.06); color: var(--text-muted); } .inv-astatus-demande { background: rgba(234,179,8,.14); color: #facc15; } .inv-astatus-autorise { background: rgba(74,144,217,.14); color: #7fb2e5; } .inv-astatus-execute { background: rgba(16,185,129,.14); color: #34d399; } .inv-astatus-refuse, .inv-astatus-annule { background: rgba(220,75,71,.14); color: #f87171; } /* ── Pistes ──────────────────────────────────────────────────── */ .inv-lead-list { display: flex; flex-direction: column; gap: 10px; } .inv-lead { border-left: 3px solid var(--warning); } .inv-lead-couverte { border-left-color: var(--success); opacity: .75; } .inv-lead-negative, .inv-lead-abandonnee { border-left-color: var(--border-color); opacity: .6; } .inv-lead-overdue { border-left-color: var(--danger); background: rgba(220,75,71,.04); } .inv-lead-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .inv-lead-label { font-size: 15px; font-weight: 700; } .inv-lstatus { padding: 2px 9px; border-radius: 999px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; background: rgba(255,255,255,.06); color: var(--text-muted); } .inv-lstatus-en_cours { background: rgba(74,144,217,.14); color: #7fb2e5; } .inv-lstatus-couverte { background: rgba(16,185,129,.14); color: #34d399; } .inv-lstatus-negative { background: rgba(107,114,128,.16); color: #9ca3af; } .inv-block-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); margin-bottom: 6px; } .proc-tag-priority-urgente { background: rgba(234,179,8,.15); color: var(--warning); border-color: rgba(234,179,8,.35); } .proc-tag-priority-critique { background: rgba(239,68,68,.15); color: var(--danger); border-color: rgba(239,68,68,.35); } .proc-tag-pending { background: rgba(234,179,8,.12); color: #facc15; border-color: rgba(234,179,8,.28); } .proc-tag-overdue { background: rgba(239,68,68,.16); color: #f87171; border-color: rgba(239,68,68,.35); } .proc-chip-requisition_envoyee.active { background: rgba(74, 144, 217,.16); color: #7fb2e5; border-color: rgba(74, 144, 217,.4); } .proc-chip-attente_reponse.active { background: rgba(234,179,8,.14); color: #facc15; border-color: rgba(234,179,8,.35); } .proc-late { color: var(--danger); font-weight: 600; } /* ── Registre : cartes ───────────────────────────────────────── */ .proc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; } .proc-card { display: flex; flex-direction: column; gap: 9px; padding: 15px 17px; background: var(--bg-card); border: 1px solid var(--border-soft); border-left: 3px solid var(--border-color); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: background .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease); } .proc-card:hover { background: var(--bg-card-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); } .proc-card.proc-priority-urgente { border-left-color: var(--warning); } .proc-card.proc-priority-critique { border-left-color: var(--danger); } .proc-card-closed { opacity: .62; } .proc-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .proc-ref { font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--gold-bright); } .proc-agency { padding: 2px 8px; border-radius: 5px; background: rgba(255,255,255,.06); border: 1px solid var(--border-color); font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--text-muted); } .proc-card-name { font-size: 16px; font-weight: 700; line-height: 1.3; } .proc-card-tags { display: flex; gap: 5px; flex-wrap: wrap; } .proc-card-summary { font-size: 13px; line-height: 1.6; color: var(--text-muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .proc-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 9px; border-top: 1px solid var(--border-soft); } .proc-card-prosecutor { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-primary); } .proc-card-metrics { display: flex; gap: 9px; font-size: 12px; color: var(--text-faint); } .proc-card-activity { font-size: 12px; color: var(--text-faint); } .proc-avatar { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; background: var(--bg-input); border: 1px solid var(--border-color); font-size: 11px; font-weight: 700; color: var(--text-muted); overflow: hidden; } .proc-avatar img { width: 100%; height: 100%; object-fit: cover; } .proc-avatar-sm { width: 26px; height: 26px; font-size: 12px; border-width: 2px; } /* ── Fiche : en-tête ─────────────────────────────────────────── */ .proc-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 20px 22px; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius); box-shadow: var(--shadow-sm); margin-bottom: 16px; } .proc-hero-left { flex: 1; min-width: 0; } .proc-hero-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 9px; } .proc-hero-title { font-size: 22px; font-weight: 800; margin: 0 0 6px; line-height: 1.25; } .proc-hero-sub { font-size: 13px; color: var(--text-muted); } .proc-hero-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; } .proc-status-select { width: auto; padding: 6px 10px; font-size: 13px; font-weight: 600; } /* ── Fiche : colonnes ────────────────────────────────────────── */ .proc-layout { display: grid; grid-template-columns: 1.7fr 1fr; gap: 14px; align-items: start; } @media (max-width: 1050px) { .proc-layout { grid-template-columns: 1fr; } } .proc-main, .proc-aside { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .proc-main .card, .proc-aside .card { margin: 0; } /* ── En-tête de procédure ────────────────────────────────────── */ .proc-brief { border-left: 3px solid var(--accent); } .proc-brieflist { display: grid; grid-template-columns: auto 1fr; gap: 9px 18px; margin: 0; font-size: 14px; align-items: center; } .proc-brieflist dt { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); white-space: nowrap; } .proc-brieflist dd { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .proc-summary { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft); font-size: 14px; line-height: 1.7; color: var(--text-primary); } .proc-phone { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--accent); padding: 2px 8px; border-radius: 5px; background: var(--accent-soft); } .proc-phone:hover { filter: brightness(1.2); } .proc-extlink, .proc-linkchip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--radius-sm); background: var(--bg-input); border: 1px solid var(--border-color); font-size: 13px; font-weight: 600; color: var(--text-primary); } .proc-extlink:hover, .proc-linkchip:hover { border-color: var(--accent); color: var(--accent); } /* ── Chefs d'inculpation ─────────────────────────────────────── */ .proc-exposure { font-family: var(--font-mono); font-size: 14px; font-weight: 800; color: var(--danger); } .proc-charges { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .proc-charge { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bg-input); border: 1px solid var(--border-soft); } .proc-charge-abandonne, .proc-charge-acquitte { opacity: .45; text-decoration: line-through; } .proc-charge-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .proc-charge-label { font-size: 14px; font-weight: 600; } .proc-charge-count { font-size: 12px; font-weight: 700; color: var(--warning); } .proc-charge-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 12px; text-align: right; } .proc-charge-actions { display: flex; align-items: center; gap: 5px; flex-shrink: 0; } .proc-penalties { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-soft); } .proc-penalty { padding: 2px 8px; border-radius: 999px; background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.25); font-size: 12px; color: #f87171; } /* ── Formulaires repliés ─────────────────────────────────────── */ .proc-inline-details { margin-top: 12px; } .proc-inline-details > summary { list-style: none; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--accent); padding: 7px 0; user-select: none; } .proc-inline-details > summary::-webkit-details-marker { display: none; } .proc-inline-details > summary:hover { filter: brightness(1.15); } .proc-inline-form { display: flex; flex-direction: column; gap: 7px; padding: 12px; border-radius: var(--radius-sm); background: var(--bg-input); border: 1px solid var(--border-color); } .proc-inline-row { display: flex; gap: 7px; align-items: center; } .proc-inline-row .form-control { flex: 1; } /* ── Fil de suivi ────────────────────────────────────────────── */ .proc-composer { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border-soft); } .proc-composer-row { display: flex; align-items: center; gap: 10px; } .proc-composer-row .form-control { width: auto; } .proc-composer-row .btn { margin-left: auto; } .proc-thread { display: flex; flex-direction: column; gap: 14px; } .proc-msg { display: flex; gap: 11px; } .proc-msg-pinned { padding: 11px; margin: -11px; border-radius: var(--radius-sm); background: rgba(74, 144, 217,.06); border: 1px solid rgba(74, 144, 217,.22); } .proc-msg-body { flex: 1; min-width: 0; } .proc-msg-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; margin-bottom: 3px; } .proc-msg-type { padding: 1px 7px; border-radius: 4px; background: rgba(255,255,255,.06); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); } .proc-msg-attente .proc-msg-type { background: rgba(234,179,8,.15); color: #facc15; } .proc-msg-action .proc-msg-type { background: rgba(59,130,246,.15); color: #60a5fa; } .proc-msg-decision .proc-msg-type { background: rgba(16,185,129,.15); color: #34d399; } .proc-msg-contact .proc-msg-type { background: rgba(74, 144, 217,.15); color: #7fb2e5; } .proc-msg-systeme .proc-msg-content { color: var(--text-faint); font-style: italic; } .proc-msg-time { font-size: 12px; color: var(--text-faint); } .proc-msg-actions { display: flex; gap: 3px; margin-left: auto; } .proc-msg-content { font-size: 14px; line-height: 1.65; white-space: pre-wrap; } /* ── Éléments en attente ─────────────────────────────────────── */ .proc-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .proc-task { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bg-input); border: 1px solid var(--border-soft); border-left: 3px solid var(--warning); } .proc-task-recu { border-left-color: var(--success); opacity: .7; } .proc-task-refuse { border-left-color: var(--danger); opacity: .7; } .proc-task-sans_objet { border-left-color: var(--border-color); opacity: .55; } .proc-task-overdue { border-left-color: var(--danger); background: rgba(239,68,68,.05); } .proc-task-head { display: flex; align-items: center; gap: 8px; justify-content: space-between; } .proc-task-label { font-size: 14px; font-weight: 600; } .proc-task-recu .proc-task-label { text-decoration: line-through; } .proc-task-meta { font-size: 12px; color: var(--text-faint); margin-top: 3px; } .proc-task-actions { display: flex; align-items: center; gap: 5px; margin-top: 8px; } /* ── Documents versés ────────────────────────────────────────── */ .proc-docs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .proc-doc { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border-radius: var(--radius-sm); background: var(--bg-input); border: 1px solid var(--border-soft); transition: border-color .15s var(--ease); } .proc-doc:hover { border-color: var(--accent); } .proc-doc-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .proc-doc-ref { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--gold-bright); } .proc-doc-title { font-size: 14px; font-weight: 600; } .proc-doc-actions { display: flex; align-items: center; gap: 7px; flex-shrink: 0; } /* ── Contacts ────────────────────────────────────────────────── */ .proc-contacts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .proc-contact { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border-radius: var(--radius-sm); background: var(--bg-input); border: 1px solid var(--border-soft); } .proc-contact-name { font-size: 14px; font-weight: 600; } .proc-contact-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .proc-contact-role { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); } /* ═══════════════════════════════════════════════════════════════ VUE PUBLIQUE D'UN DOSSIER ═══════════════════════════════════════════════════════════════ */ .pub-body { padding-bottom: 60px; } .pub-header { position: sticky; top: 0; z-index: 10; background: rgba(14, 14, 18, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-color); } .pub-header-inner { max-width: 1040px; margin: 0 auto; padding: 13px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .pub-brand { display: flex; align-items: center; gap: 12px; } .pub-brand-name { font-size: 15px; font-weight: 700; } .pub-brand-sub { font-size: 12px; color: var(--text-faint); } .pub-header-actions { display: flex; align-items: center; gap: 10px; } .pub-main { max-width: 1040px; margin: 0 auto; padding: 30px 24px; } .pub-case-head { padding-bottom: 22px; margin-bottom: 8px; border-bottom: 2px solid var(--border-color); } .pub-case-ref { font-family: var(--font-mono); font-size: 14px; font-weight: 700; letter-spacing: .06em; color: var(--gold-bright); } .pub-case-title { font-size: 28px; font-weight: 800; margin: 8px 0 12px; line-height: 1.2; } .pub-case-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--text-muted); } .pub-case-meta strong { color: var(--text-primary); } .pub-nav { display: flex; gap: 4px; flex-wrap: wrap; padding: 14px 0 26px; } .pub-nav a { padding: 6px 12px; border-radius: 999px; background: var(--bg-card); border: 1px solid var(--border-soft); font-size: 13px; color: var(--text-muted); transition: color .15s var(--ease), border-color .15s var(--ease); } .pub-nav a:hover { color: var(--accent); border-color: rgba(74, 144, 217,.4); } .pub-section { margin-bottom: 38px; scroll-margin-top: 80px; } .pub-section-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--text-faint); margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border-color); } .pub-footer { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--border-color); font-size: 13px; color: var(--text-muted); line-height: 1.7; } @media print { .pub-header, .pub-nav, .dos-card-actions { display: none !important; } .pub-body { background: #fff !important; color: #111 !important; } .pub-main { max-width: 100%; padding: 0; } .card, .dos-person-card, .dos-tl-body { background: #fff !important; border-color: #ccc !important; color: #111 !important; box-shadow: none !important; break-inside: avoid; } .pub-case-title, .dos-person-name, .dos-evidence-title, .dos-tl-title { color: #111 !important; } .dos-custody { display: block; } .dos-custody[open] > summary { color: #111 !important; } } /* ════════════════════════════════════════════════════════════════════════════ COJ — Planning ════════════════════════════════════════════════════════════════════════════ */ .coj-plan-wrap { display: flex; flex-direction: column; gap: 10px; } /* En-tête */ .coj-plan-header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .coj-plan-title-block { display: flex; align-items: center; gap: 8px; } .coj-plan-title { font-size: 18px; font-weight: 700; margin: 0; } .coj-plan-week-nav { display: flex; align-items: center; gap: 6px; margin-left: auto; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 4px 10px; } .coj-week-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; color: var(--text-muted); text-decoration: none; transition: background .15s, color .15s; flex-shrink: 0; } .coj-week-btn:hover { background: var(--bg-panel); color: var(--text-primary); } .coj-week-label { font-size: 14px; color: var(--text-muted); white-space: nowrap; padding: 0 6px; } .coj-week-label strong { color: var(--text-primary); } /* Onglets ressources */ .coj-resource-tabs { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .coj-tab-group { display: flex; align-items: center; gap: 2px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 3px 5px; } .coj-tab-group-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--text-faint); padding: 0 6px; } .coj-res-tab { display: flex; align-items: center; gap: 6px; padding: 5px 11px; font-size: 13px; font-weight: 600; border-radius: 5px; color: var(--text-muted); text-decoration: none; transition: background .15s, color .15s; white-space: nowrap; } .coj-res-tab:hover { background: var(--bg-panel); color: var(--text-primary); } .coj-res-tab.active { background: color-mix(in srgb, var(--rc, #6b7280) 18%, transparent); color: var(--rc, #6b7280); border: 1px solid color-mix(in srgb, var(--rc, #6b7280) 35%, transparent); } .coj-res-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } /* Bandeau ressource active */ .coj-resource-banner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 10px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border-color); background: var(--bg-card); } .coj-res-type-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--text-faint); margin-right: 8px; } .coj-res-banner-name { font-size: 15px; font-weight: 700; } .coj-res-banner-title { font-size: 14px; color: var(--text-muted); } /* Légende */ .coj-legend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .coj-leg-item { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; border: 1px solid transparent; } .coj-leg-penale { background: rgba(234,179,8,.18); color: #fef08a; border-color: rgba(234,179,8,.35); } .coj-leg-civile { background: rgba(59,130,246,.18); color: #93c5fd; border-color: rgba(59,130,246,.35); } .coj-leg-indispo { background: rgba(239,68,68,.18); color: #fca5a5; border-color: rgba(239,68,68,.35); } .coj-leg-autre { background: rgba(34,197,94,.15); color: #86efac; border-color: rgba(34,197,94,.3); } .coj-leg-block { background: rgba(239,68,68,.12); color: #fca5a5; border-color: rgba(239,68,68,.35); border-style: dashed; } /* ── Grille planning ─────────────────────────────────────────────────────── */ .coj-grid-outer { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); overflow: hidden; /* clip border-radius */ } /* Conteneur scroll unique — tout dedans */ .coj-grid-scroll { overflow-y: auto; overflow-x: hidden; height: calc(var(--vh, 100vh) - 320px); min-height: 420px; max-height: 800px; position: relative; } /* En-tête jours — sticky DANS le scroll */ .coj-grid-head { display: flex; position: sticky; top: 0; z-index: 10; background: var(--bg-panel); border-bottom: 2px solid var(--border-color); } .coj-gh-corner { flex: 0 0 56px; border-right: 1px solid var(--border-color); position: sticky; left: 0; z-index: 11; background: var(--bg-panel); } .coj-gh-day { flex: 1; min-width: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 4px; border-right: 1px solid var(--border-color); gap: 1px; } .coj-gh-dayname { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); } .coj-gh-date { font-size: 20px; font-weight: 700; color: var(--text-primary); line-height: 1; } .coj-gh-month { font-size: 11px; color: var(--text-faint); } .coj-gh-day.coj-today { background: rgba(74, 144, 217,.06); } .coj-today-num { color: var(--accent) !important; } /* Corps */ .coj-grid-body-inner { display: flex; } /* Colonne horaires — sticky gauche dans le scroll */ .coj-time-col { flex: 0 0 56px; position: sticky; left: 0; z-index: 5; background: var(--bg-panel); border-right: 1px solid var(--border-color); } .coj-tc-slot { height: 40px; position: relative; border-bottom: 1px solid rgba(255,255,255,.04); } .coj-tc-slot.coj-hour { border-bottom-color: rgba(255,255,255,.08); } /* Label centré sur la ligne d'heure */ .coj-hr-label { position: absolute; top: -0.55em; left: 4px; right: 4px; font-size: 12px; font-weight: 600; color: var(--text-muted); white-space: nowrap; line-height: 1; text-align: right; } /* Colonnes jours */ .coj-days-wrap { flex: 1; display: grid; grid-template-columns: repeat(7, minmax(100px, 1fr)); } .coj-day-col { position: relative; border-right: 1px solid var(--border-color); cursor: crosshair; background-image: repeating-linear-gradient(to bottom, rgba(255,255,255,.035) 0, rgba(255,255,255,.035) 1px, transparent 1px, transparent 40px), repeating-linear-gradient(to bottom, rgba(255,255,255,.09) 0, rgba(255,255,255,.09) 1px, transparent 1px, transparent 160px); } .coj-day-col.coj-today-col { background-color: rgba(74, 144, 217,.025); } .coj-day-col:hover { background-color: rgba(255,255,255,.015); } /* Zone d'indisponibilité (hachures rouges) */ .coj-block-overlay { position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; background: repeating-linear-gradient( -45deg, rgba(239,68,68,.22) 0px, rgba(239,68,68,.22) 4px, rgba(239,68,68,.06) 4px, rgba(239,68,68,.06) 10px ); border-top: 1px solid rgba(239,68,68,.45); border-bottom: 1px solid rgba(239,68,68,.45); } /* Événements */ .coj-event { position: absolute; left: 3px; right: 3px; border-radius: 5px; padding: 3px 7px; font-size: 12px; line-height: 1.35; overflow: hidden; cursor: pointer; z-index: 2; transition: filter .15s, box-shadow .15s; border-left-width: 3px; border-left-style: solid; } .coj-event:hover { filter: brightness(1.12); box-shadow: 0 2px 8px rgba(0,0,0,.3); z-index: 4; } .coj-ev-time { font-size: 11px; font-weight: 700; opacity: .8; white-space: nowrap; } .coj-ev-label { font-weight: 600; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .coj-ev-ref { font-size: 11px; opacity: .7; margin-top: 1px; } .coj-ev-audience_penale { background: rgba(234,179,8,.22); border-color: #eab308; color: #fef08a; } .coj-ev-audience_civile { background: rgba(59,130,246,.22); border-color: #60a5fa; color: #bfdbfe; } .coj-ev-indisponible { background: rgba(239,68,68,.22); border-color: #ef4444; color: #fca5a5; } .coj-ev-autre { background: rgba(34,197,94,.18); border-color: #22c55e; color: #86efac; } /* ── Modals planning ─────────────────────────────────────────────────────── */ .coj-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(2px); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; } .coj-modal { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; box-shadow: 0 24px 64px rgba(0,0,0,.55); } .coj-modal-sm { max-width: 380px; } .coj-modal-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 16px 20px; border-bottom: 2px solid var(--border-color); gap: 12px; } .coj-modal-head h3 { margin: 0; font-size: 15px; font-weight: 700; } .coj-modal-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 999px; border: 1px solid transparent; text-transform: uppercase; letter-spacing: .06em; } .coj-modal-close { background: none; border: none; font-size: 16px; color: var(--text-muted); cursor: pointer; padding: 2px 6px; border-radius: 4px; flex-shrink: 0; } .coj-modal-close:hover { background: var(--bg-panel); color: var(--text-primary); } .coj-modal-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; } .coj-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--border-color); } /* Détail créneau */ .coj-detail-row { display: flex; gap: 12px; font-size: 14px; padding: 6px 0; border-bottom: 1px solid var(--border-color); } .coj-detail-row:last-child { border-bottom: none; } .coj-detail-key { color: var(--text-faint); font-weight: 600; min-width: 70px; flex-shrink: 0; } /* Blocs indisponibilité — gestion */ .coj-block-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .coj-block-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: var(--bg-panel); border: 1px solid var(--border-color); border-left: 3px solid rgba(156,163,175,.5); border-radius: var(--radius-sm); } .coj-block-info { display: flex; align-items: center; gap: 10px; } .coj-block-dot { width: 10px; height: 10px; background: rgba(156,163,175,.4); border-radius: 2px; flex-shrink: 0; background: repeating-linear-gradient(-45deg, rgba(156,163,175,.5) 0, rgba(156,163,175,.5) 2px, transparent 2px, transparent 5px); } .coj-block-hours { font-size: 14px; font-weight: 700; } .coj-block-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .coj-block-del { background: none; border: none; color: var(--text-faint); cursor: pointer; padding: 4px; border-radius: 4px; display: flex; align-items: center; flex-shrink: 0; transition: color .15s, background .15s; } .coj-block-del:hover { color: #ef4444; background: rgba(239,68,68,.1); } .coj-block-add-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); border-top: 1px solid var(--border-color); padding-top: 16px; margin-top: 4px; margin-bottom: 12px; } .coj-block-add-form { display: flex; flex-direction: column; gap: 0; } /* ── Ressources (page) ───────────────────────────────────────────────────── */ .coj-res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; } @media (max-width: 700px) { .coj-res-grid { grid-template-columns: 1fr; } } .coj-res-row { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--border-color); } /* ════════════════════════════════════════════════════════════════════════════ COJ — Jugements (liste) ════════════════════════════════════════════════════════════════════════════ */ .coj-jug-list { display: flex; flex-direction: column; gap: 8px; } .coj-jug-card { display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); text-decoration: none; transition: background .15s, border-color .15s; } .coj-jug-card:hover { background: var(--bg-card-hover); border-color: rgba(74, 144, 217,.3); } .coj-jug-card-left { flex: 1; min-width: 0; } .coj-jug-card-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; } .coj-jug-ref { font-size: 12px; font-weight: 700; color: var(--accent); letter-spacing: .05em; margin-bottom: 4px; } .coj-jug-defendant { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 5px; } .coj-jug-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--text-muted); } .coj-jug-type { font-weight: 700; } .coj-type-penal { color: #f87171; } .coj-type-civil { color: #60a5fa; } .coj-decision-badge { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .06em; } .coj-dec-condamnation { background: rgba(239,68,68,.15); color: #f87171; border: 1px solid rgba(239,68,68,.3); } .coj-dec-acquittement { background: rgba(34,197,94,.12); color: #4ade80; border: 1px solid rgba(34,197,94,.3); } .coj-dec-non_lieu { background: rgba(59,130,246,.12); color: #60a5fa; border: 1px solid rgba(59,130,246,.3); } .coj-dec-classement_sans_suite { background: rgba(255,255,255,.06); color: var(--text-muted); border: 1px solid var(--border-color); } .coj-dec-autre { background: rgba(74, 144, 217,.12); color: #86bde8; border: 1px solid rgba(74, 144, 217,.3); } .coj-jug-status { font-size: 12px; font-weight: 600; color: var(--text-faint); } .coj-jstatus-brouillon { color: var(--text-faint); } .coj-jstatus-rendu { color: var(--success); } .coj-jstatus-archive { color: var(--text-faint); } /* ════════════════════════════════════════════════════════════════════════════ COJ — Formulaire jugement (refait) ════════════════════════════════════════════════════════════════════════════ */ /* Barre supérieure */ .jf-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border-color); } .jf-topbar-left { display: flex; align-items: center; gap: 10px; } .jf-topbar-right { display: flex; align-items: center; gap: 8px; } .jf-breadcrumb { font-size: 14px; color: var(--text-muted); display: flex; align-items: center; gap: 5px; } .jf-bc-sep { color: var(--text-faint); } .jf-submit-btn { padding: 8px 22px; } /* Layout corps */ .jf-body { display: grid; grid-template-columns: 1fr 280px; gap: 20px; align-items: flex-start; } @media (max-width: 900px) { .jf-body { grid-template-columns: 1fr; } } .jf-main { display: flex; flex-direction: column; gap: 16px; } .jf-sidebar { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 16px; } /* Cartes sections */ .jf-section-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); overflow: hidden; } .jf-section-header { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--bg-panel); border-bottom: 1px solid var(--border-color); } .jf-section-num { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-style: italic; } .jf-section-title { font-size: 15px; font-weight: 700; } .jf-section-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .jf-section-body { padding: 18px; display: flex; flex-direction: column; gap: 12px; } .jf-big-area { font-family: var(--font-serif); font-size: 14px; line-height: 1.75; resize: vertical; } /* Pills décision */ .jf-decision-group { display: flex; flex-wrap: wrap; gap: 6px; } .jf-dec-pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--border-color); font-size: 14px; font-weight: 600; cursor: pointer; transition: all .15s; user-select: none; } .jf-dec-pill input { display: none; } .jf-dec-pill:hover { border-color: var(--dc, #6b7280); background: rgba(107,114,128,.08); } .jf-dec-pill.active { background: color-mix(in srgb, var(--dc, #6b7280) 15%, transparent); border-color: var(--dc, #6b7280); color: var(--dc, var(--text-primary)); } /* Sidebar preview */ .jf-preview-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); overflow: hidden; } .jf-preview-header { padding: 10px 14px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); background: var(--bg-panel); border-bottom: 1px solid var(--border-color); } .jf-preview-body { padding: 14px; display: flex; flex-direction: column; gap: 6px; } .jf-prev-seal { font-size: 28px; text-align: center; margin-bottom: 4px; } .jf-prev-institution { text-align: center; font-size: 12px; font-weight: 700; color: var(--text-muted); line-height: 1.5; margin-bottom: 4px; } .jf-prev-divider { height: 1px; background: var(--border-color); margin: 4px 0; } .jf-prev-row { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; color: var(--text-muted); } .jf-prev-row span:last-child { color: var(--text-primary); font-weight: 600; text-align: right; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jf-prev-sections { display: flex; flex-direction: column; gap: 3px; } .jf-prev-sec { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--text-faint); padding: 3px 8px; border-radius: 4px; border: 1px dashed var(--border-color); transition: all .2s; } .jf-prev-sec.filled { color: var(--success); border-color: rgba(34,197,94,.3); background: rgba(34,197,94,.06); } .jf-prev-decision { font-size: 14px; font-weight: 800; text-align: center; padding: 8px; border-radius: var(--radius-sm); background: var(--bg-panel); } /* ════════════════════════════════════════════════════════════════════════════ COJ — Document jugement (show) — Style papier blanc ════════════════════════════════════════════════════════════════════════════ */ .coj-jug-actions-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; } /* Conteneur document — fond blanc comme un vrai papier */ .coj-doc-wrap { background: #fff; color: #111; max-width: 820px; margin: 0 auto; padding: 40px 60px; border: 1px solid #ddd; border-radius: 4px; font-family: var(--font-serif); font-size: 14px; line-height: 1.7; box-shadow: 0 4px 24px rgba(0,0,0,.15); } /* Sceau/logo centré */ .coj-doc-logo { display: block; margin: 0 auto 12px; width: 100px; height: 100px; object-fit: contain; } /* Lignes de séparation */ .coj-doc-hr { border: none; border-top: 1px solid #999; margin: 12px 0; } .coj-hr-thick { border-top: 2px solid #555; margin: 20px 0; } /* Ligne info adresse / références */ .coj-doc-info-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; font-size: 13px; line-height: 1.6; color: #333; margin: 12px 0; } .coj-doc-info-right { text-align: right; } /* Titre principal */ .coj-doc-main-title { text-align: center; font-size: 20px; font-weight: 800; letter-spacing: .05em; margin: 20px 0 6px; color: #000; } .coj-doc-sub-title { text-align: center; font-size: 14px; font-weight: 700; color: #333; margin-bottom: 16px; } /* Encadré affaire */ .coj-doc-case-box { border: 2px solid #222; text-align: center; padding: 10px 20px; font-size: 16px; font-weight: 700; margin: 16px 0 20px; color: #000; } /* Parties */ .coj-doc-parties-block { margin: 16px 0; } .coj-doc-parties-block p { margin: 6px 0; text-align: justify; } /* Sections numérotées */ .coj-doc-section-block { margin: 20px 0; } .coj-doc-section-num-title { display: flex; align-items: baseline; gap: 10px; font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 12px; color: #000; } .coj-rom { min-width: 28px; } .coj-doc-sub-heading { font-size: 14px; font-weight: 700; margin: 10px 0 4px; color: #111; } .coj-doc-text { text-align: justify; color: #222; font-size: 14px; line-height: 1.75; } .coj-doc-charges { margin-bottom: 12px; } /* PAR CES MOTIFS */ .coj-doc-par-motifs { font-size: 15px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; margin: 16px 0 8px; color: #000; } .coj-doc-dispositif { margin-top: 8px; } .coj-doc-dispositif strong { font-weight: 800; text-transform: uppercase; } /* Décision encadrée */ .coj-doc-decision-frame { border: 3px solid currentColor; text-align: center; padding: 16px 40px; font-size: 22px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; margin: 20px auto; max-width: 480px; } /* Sentence */ .coj-doc-sentence-block { margin: 12px 0; } .coj-doc-sentence-block p { margin: 4px 0; } /* Signatures */ .coj-doc-signature-block { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 32px; padding-top: 16px; border-top: 1px solid #ccc; } .coj-doc-sig-left { font-size: 15px; } .coj-sig-italic { font-style: italic; margin: 0; } .coj-doc-seal-bottom { width: 90px; height: 90px; object-fit: contain; opacity: .85; } /* ══════════════════════════════════════════════════════════════════════════ DASHBOARD ══════════════════════════════════════════════════════════════════════════ */ /* Hero */ .db-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; background: linear-gradient(135deg, #1a1030 0%, #0e0e12 60%); border: 1px solid rgba(74, 144, 217,.2); border-radius: var(--radius); padding: 24px 28px; margin-bottom: 24px; } .db-hero-left { display: flex; align-items: center; gap: 16px; } .db-hero-seal { width: 52px; height: 52px; object-fit: contain; opacity: .85; } .db-hero-eyebrow { font-size: 12px; color: var(--text-faint); letter-spacing: .05em; text-transform: uppercase; margin-bottom: 4px; } .db-org-pill { display: inline-block; background: var(--accent-soft); color: var(--accent); border-radius: 4px; padding: 1px 6px; font-size: 11px; font-weight: 600; letter-spacing: .04em; margin-right: 6px; text-transform: uppercase; } .db-hero-org { font-size: 22px; font-weight: 700; color: var(--text-primary); } .db-hero-grade { font-size: 13px; color: var(--text-muted); margin-bottom: 4px; } .db-kpi-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 16px; display: flex; align-items: center; gap: 14px; position: relative; } .db-kpi-body { flex: 1 1 0; min-width: 0; } .db-kpi-val { font-size: 26px; font-weight: 700; color: var(--text-primary); line-height: 1; } .db-kpi-lbl { font-size: 12px; color: var(--text-muted); margin-top: 4px; line-height: 1.3; } .db-kpi-link { position: absolute; right: 14px; top: 14px; font-size: 11px; color: var(--text-faint); text-decoration: none; transition: color .15s; } .db-kpi-link:hover { color: var(--accent); } /* Charts */ .db-charts-row { display: grid; grid-template-columns: 1fr 380px; gap: 16px; margin-bottom: 16px; } /* Rangée réduite à un seul bloc : il occupe toute la largeur au lieu de laisser la colonne latérale vide. */ .db-charts-row:has(> :only-child), .db-row-2:has(> :only-child), .db-row-3:has(> :only-child) { grid-template-columns: 1fr; } .db-chart-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 20px; min-width: 0; } .db-chart-wide { /* full row handled by grid */ } .db-chart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; } .db-chart-title { font-size: 14px; font-weight: 600; color: var(--text-primary); } .db-chart-body { position: relative; } .db-list-more { font-size: 12px; color: var(--text-faint); text-decoration: none; transition: color .15s; } .db-list-more:hover { color: var(--accent); } .db-empty { padding: 24px 16px; text-align: center; color: var(--text-faint); font-size: 14px; } /* Responsive */ @media (max-width: 900px) { .db-charts-row { grid-template-columns: 1fr; } } @media (max-width: 600px) { .db-kpi-row { grid-template-columns: 1fr 1fr; } .db-hero { flex-direction: column; align-items: flex-start; } } /* ── Impression ── */ @media print { .no-print, .sidebar, .topbar, .coj-jug-actions-bar, nav { display: none !important; } body, .main-content, .page-content, .content-wrap { background: #fff !important; padding: 0 !important; } .coj-doc-wrap { box-shadow: none !important; border: none !important; max-width: 100% !important; padding: 20px 40px !important; } .coj-doc-decision-frame { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } /* ═══════════════════════════════════════════════════════════════ NOTIFICATIONS, ÉCHÉANCIER ET STATISTIQUES ═══════════════════════════════════════════════════════════════ */ /* ── Cloche ──────────────────────────────────────────────────── */ .notif { position: relative; } .notif-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-sm); background: none; border: 1px solid transparent; color: var(--text-muted); cursor: pointer; } .notif-btn:hover { background: var(--bg-card-hover); color: var(--text-primary); } .notif-dot { position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 800; line-height: 17px; text-align: center; } .notif-panel { display: none; position: absolute; z-index: 80; top: calc(100% + 8px); right: 0; width: 380px; max-width: calc(100vw - 40px); max-height: 460px; overflow-y: auto; background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 6px; } .notif.open .notif-panel { display: block; } .notif-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 10px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); border-bottom: 1px solid var(--border-soft); } .notif-head a { color: var(--accent); font-weight: 600; text-transform: none; letter-spacing: 0; } .notif-empty { padding: 22px 12px; text-align: center; font-size: 13px; color: var(--text-faint); } .notif-item { display: block; padding: 10px; border-radius: var(--radius-sm); border-left: 3px solid var(--accent); } .notif-item:hover { background: var(--bg-card-hover); } .notif-item.notif-late { border-left-color: var(--danger); } .notif-item.notif-dormant, .notif-item.notif-signature { border-left-color: var(--warning); } .notif-label { display: block; font-size: 13px; font-weight: 600; } .notif-detail { display: block; font-size: 12px; color: var(--text-muted); } .notif-when { display: block; font-size: 11px; color: var(--text-faint); margin-top: 2px; } .notif-late .notif-when { color: var(--danger); font-weight: 700; } .nav-badge { margin-left: auto; min-width: 19px; padding: 1px 6px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 800; text-align: center; } /* ── Échéancier ──────────────────────────────────────────────── */ .agenda-late-stat { border-top-color: var(--danger); } .agenda-day { display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border-soft); } .agenda-date { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 78px; flex-shrink: 0; padding: 10px 0; border-radius: var(--radius-sm); background: var(--bg-card); border: 1px solid var(--border-soft); align-self: flex-start; } .agenda-day-late .agenda-date { border-color: rgba(220, 75, 71, .4); } .agenda-date-day { font-size: 22px; font-weight: 800; line-height: 1; color: var(--accent); } .agenda-day-late .agenda-date-day { color: var(--danger); } .agenda-date-month { font-size: 11px; color: var(--text-muted); } .agenda-date-weekday { font-size: 10px; text-transform: uppercase; color: var(--text-faint); } .agenda-items { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; } .agenda-item { display: flex; align-items: center; gap: 14px; padding: 11px 14px; border-radius: var(--radius-sm); background: var(--bg-card); border: 1px solid var(--border-soft); border-left: 3px solid var(--accent); } .agenda-item:hover { background: var(--bg-card-hover); } .agenda-prescription, .agenda-attente { border-left-color: var(--warning); } .agenda-audience { border-left-color: #22d3ee; } .agenda-piste { border-left-color: #fb923c; } .agenda-kind { width: 96px; flex-shrink: 0; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); } .agenda-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .agenda-label { font-size: 13px; font-weight: 600; } .agenda-detail { font-size: 12px; color: var(--text-muted); } .agenda-when { font-size: 12px; font-weight: 700; color: var(--text-faint); white-space: nowrap; } /* ── Statistiques ────────────────────────────────────────────── */ .stats-of { font-size: 14px; font-weight: 500; color: var(--text-faint); } .stats-rate { text-align: center; padding: 10px 0 18px; border-bottom: 1px solid var(--border-soft); margin-bottom: 16px; } .stats-rate-value { display: block; font-size: 40px; font-weight: 800; line-height: 1; color: var(--accent); } .stats-rate-label { font-size: 12px; color: var(--text-muted); } .stats-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .stats-bars li { display: grid; grid-template-columns: minmax(120px, 34%) 1fr 44px; align-items: center; gap: 12px; font-size: 12px; } .stats-bar-label { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stats-bar-value { text-align: right; font-weight: 700; color: var(--text-muted); } .stats-bar { height: 9px; border-radius: 999px; background: var(--bg-input); overflow: hidden; } .stats-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--accent-gradient); } .stats-delays { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .stats-delays li { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); font-size: 13px; } .stats-delays strong { font-size: 20px; font-weight: 800; color: var(--accent); } /* ── Historique des versions ─────────────────────────────────── */ .doc-versions { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; } .doc-version { padding: 9px 11px; border-radius: var(--radius-sm); background: var(--bg-input); border: 1px solid var(--border-soft); } .doc-version-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--text-muted); } .doc-version-title { font-size: 12px; margin: 3px 0 6px; } /* ── Tableau de bord : actions et listes ─────────────────────── */ .db-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .db-action { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: var(--radius-sm); background: var(--bg-input); border: 1px solid var(--border-color); font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; transition: border-color .15s var(--ease), background .15s var(--ease); } .db-action:hover { border-color: var(--accent); background: var(--bg-card-hover); } .db-action-primary { background: var(--accent-gradient); border-color: transparent; color: #fff; } .db-action-primary:hover { filter: brightness(1.08); } .db-clear strong { font-size: 14px; color: var(--success); } .db-clear span { font-size: 12px; color: var(--text-muted); } .db-rows { display: flex; flex-direction: column; gap: 2px; } .db-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13px; } .db-row:hover { background: var(--bg-card-hover); } .db-row-bar { width: 3px; height: 22px; border-radius: 999px; flex-shrink: 0; } .db-row-ref { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--gold-bright); white-space: nowrap; } .db-row-main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .db-row-side { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* Tableau large dans une colonne étroite : il défile plutôt que de pousser toute la page en débordement horizontal. */ .stats-scroll { overflow-x: auto; } .stats-scroll .num { text-align: right; } /* ── Alertes : effacement ────────────────────────────────────── */ .notif-item { display: flex; align-items: flex-start; gap: 6px; } .notif-body { flex: 1; min-width: 0; } .notif-item form { flex-shrink: 0; } .notif-clear { background: none; border: none; padding: 0; font-size: 11px; font-weight: 600; color: var(--text-faint); cursor: pointer; text-transform: none; letter-spacing: 0; } .notif-clear:hover { color: var(--danger); } /* L'entrée d'échéancier devient un conteneur : le lien occupe la place, le bouton d'effacement reste à côté (un formulaire ne peut pas vivre dans une ancre). */ .agenda-body { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; } /* ── Accueil : tuiles d'indicateurs ──────────────────────────── */ .db-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 12px; margin-bottom: 18px; } .db-tile { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--radius); background: var(--bg-card); border: 1px solid var(--border-soft); overflow: hidden; transition: transform .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease); } /* Filet de couleur : identifie le module d'un coup d'œil. */ .db-tile::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--tone, var(--accent)); } .db-tile:hover { transform: translateY(-1px); background: var(--bg-card-hover); border-color: rgba(255,255,255,.14); } .db-tile-blue { --tone: #4a90d9; } .db-tile-gold { --tone: var(--gold); } .db-tile-green { --tone: var(--success); } .db-tile-slate { --tone: #8496ad; } .db-tile-alert { --tone: var(--danger); border-color: rgba(220,75,71,.4); } .db-tile-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 11px; background: color-mix(in srgb, var(--tone) 16%, transparent); color: var(--tone); } .db-tile-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .db-tile-val { font-size: 25px; font-weight: 800; line-height: 1.1; } .db-tile-total { font-size: 14px; font-weight: 500; color: var(--text-faint); } .db-tile-lbl { font-size: 12px; color: var(--text-muted); } /* ── Accueil : rangées ───────────────────────────────────────── */ /* align-items: stretch (défaut) : les cartes d'une même rangée ont la même hauteur, sinon la courbe et la liste d'échéances se décalent. */ .db-row-2, .db-row-3 { display: grid; gap: 16px; margin-bottom: 16px; } .db-row-2 { grid-template-columns: 1.5fr 1fr; } .db-row-3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 1250px) { .db-row-3 { grid-template-columns: 1fr 1fr; } } @media (max-width: 1050px) { .db-row-2, .db-row-3 { grid-template-columns: 1fr; } } /* La carte se remplit sur toute la hauteur de sa cellule et pousse le corps à occuper le reste : les listes courtes ne laissent plus de trou. */ .db-card { display: flex; flex-direction: column; min-width: 0; } .db-card > .card-body { flex: 1; } /* Hauteur fixée : sans elle, Chart.js mesure un parent en flex:1 dont la hauteur dépend du canvas, et la courbe grandit à chaque redimensionnement. */ .db-chart-box { position: relative; height: 265px; } .db-inline-stat { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-soft); font-size: 12px; color: var(--text-muted); } .db-inline-stat strong { font-size: 20px; font-weight: 800; color: var(--accent); margin-right: 6px; } /* Journal d'audit : un simple fil vertical, sans encadrer chaque ligne. */ .db-feed { display: flex; flex-direction: column; } .db-feed-item { display: flex; align-items: flex-start; gap: 11px; padding: 7px 0; position: relative; } .db-feed-item::before { content: ''; position: absolute; left: 3px; top: 0; bottom: 0; width: 1px; background: var(--border-soft); } .db-feed-item:first-child::before { top: 14px; } .db-feed-item:last-child::before { bottom: calc(100% - 14px); } .db-feed-dot { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; flex-shrink: 0; background: var(--accent); box-shadow: 0 0 0 3px var(--bg-card); position: relative; } .db-feed-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .db-feed-action { font-size: 13px; text-transform: capitalize; } .db-feed-meta { font-size: 11px; color: var(--text-faint); } /* Le tableau de bord n'affiche que quelques entrées : pas de pastille de date ni de regroupement par jour, l'échéance suffit. */ .db-card .agenda-item { padding: 9px 12px; } .db-card .agenda-kind { width: 78px; } .db-void { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 16px; font-size: 13px; color: var(--text-faint); } .db-void-icon { opacity: .35; } .db-clear { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 30px 16px; text-align: center; border-radius: var(--radius-sm); background: rgba(63, 169, 107, .07); border: 1px solid rgba(63, 169, 107, .25); } .db-clear-mark { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(63, 169, 107, .16); color: var(--success); font-size: 16px; font-weight: 800; } /* Le hero reste compact : il informe, il ne doit pas manger la page. */ .db-hero { align-items: center; } .db-actions { justify-content: flex-end; } /* ══════════════════════════════════════════════════════════════════════════ AMENDES — Titre XI ══════════════════════════════════════════════════════════════════════════ */ /* Rappel du barème : la même frise que le code, en haut du registre. */ .fine-law { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 12px 16px; margin-bottom: 16px; border-radius: var(--radius); background: var(--bg-card); border: 1px solid var(--border-soft); font-size: 12px; } .fine-law-title { font-family: var(--font-serif); font-size: 13px; font-weight: 700; color: var(--gold-bright); padding-right: 8px; border-right: 1px solid var(--border-soft); } .fine-law-step { display: flex; align-items: baseline; gap: 6px; color: var(--text-muted); } .fine-law-step b { color: var(--text-primary); font-weight: 700; } .fine-law-art { font-size: 10px; color: var(--text-faint); letter-spacing: .03em; } .fine-law-arrow { color: var(--text-faint); } .fine-law-final, .fine-law-final b { color: var(--danger); } /* ── Totaux ── */ .fine-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; } .fine-total { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: var(--radius); background: var(--bg-card); border: 1px solid var(--border-soft); } .fine-total-val { font-size: 21px; font-weight: 800; line-height: 1.15; font-family: var(--font-mono); } .fine-total-lbl { font-size: 12px; color: var(--text-muted); } .fine-total-up { color: var(--warning); } .fine-total-ok { color: var(--success); } .fine-total-off { color: var(--text-faint); } /* ── Pastilles de palier ── */ .fine-chip-majoration_10.active { background: rgba(212,160,23,.14); color: #e8b93b; border-color: rgba(212,160,23,.4); } .fine-chip-majoration_50.active { background: rgba(234,110,40,.14); color: #f0904e; border-color: rgba(234,110,40,.4); } .fine-chip-retention.active { background: rgba(220,75,71,.16); color: #f08b88; border-color: rgba(220,75,71,.45); } /* ── Tableau ── Beaucoup de colonnes chiffrées : il défile dans son cadre plutôt que de pousser la page entière en débordement horizontal. Attention, ce conteneur rogne tout descendant positionné : les actions secondaires passent par une modale, pas par un menu déroulant. */ .fine-scroll { overflow-x: auto; } .fine-table { min-width: 940px; } .fine-table .num { text-align: right; font-family: var(--font-mono); white-space: nowrap; } .fine-row { cursor: default; } /* Filet de gauche : le palier se lit sans chercher la colonne d'état. */ .fine-row td:first-child { border-left: 3px solid transparent; } .fine-row-initial td:first-child { border-left-color: var(--accent); } .fine-row-majoration_10 td:first-child { border-left-color: var(--warning); } .fine-row-majoration_50 td:first-child { border-left-color: #ea6e28; } .fine-row-retention td:first-child { border-left-color: var(--danger); } .fine-row-payee td:first-child { border-left-color: var(--success); } .fine-row-payee, .fine-row-annulee, .fine-row-convertie { opacity: .62; } .fine-name { font-weight: 600; } .fine-firstname { font-weight: 400; color: var(--text-muted); } .fine-motive { font-size: 13px; } .fine-date { white-space: nowrap; } .fine-amount { color: var(--text-muted); } .fine-sub { font-size: 11px; color: var(--text-faint); margin-top: 2px; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Plusieurs amendes impayées au même nom. */ .fine-repeat { display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 999px; background: rgba(220,75,71,.16); color: #f08b88; font-size: 10px; font-weight: 800; } /* Colonnes de majoration : grisées tant que le palier n'est pas atteint. */ .fine-col-calc { color: var(--text-faint); font-size: 12px; } .fine-cell-active { color: var(--text-primary); font-weight: 700; } .fine-col-due { min-width: 150px; } .fine-col-act { width: 1%; } .fine-due { font-size: 15px; font-weight: 800; color: var(--gold-bright); white-space: nowrap; } .fine-due-paid { color: var(--success); } .fine-due-off { color: var(--text-faint); font-weight: 500; } .fine-badge { display: inline-block; padding: 3px 9px; border-radius: 999px; border: 1px solid transparent; font-size: 11px; font-weight: 700; white-space: nowrap; } .fine-badge-initial { background: rgba(74,144,217,.14); color: #7fb2e5; border-color: rgba(74,144,217,.35); } .fine-badge-majoration_10 { background: rgba(212,160,23,.14); color: #e8b93b; border-color: rgba(212,160,23,.35); } .fine-badge-majoration_50 { background: rgba(234,110,40,.14); color: #f0904e; border-color: rgba(234,110,40,.35); } .fine-badge-retention { background: rgba(220,75,71,.18); color: #f08b88; border-color: rgba(220,75,71,.45); } .fine-badge-payee { background: rgba(63,169,107,.14); color: #5fc98d; border-color: rgba(63,169,107,.35); } .fine-badge-annulee, .fine-badge-convertie { background: rgba(255,255,255,.06); color: var(--text-muted); border-color: var(--border-color); } /* ── Actions ── */ .fine-actions { display: flex; align-items: center; gap: 6px; } .fine-act { padding: 5px 10px; border-radius: var(--radius-sm); background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-muted); font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: border-color .15s var(--ease), color .15s var(--ease); } .fine-act:hover { color: var(--text-primary); border-color: var(--accent); } .fine-act-pay { color: var(--success); border-color: rgba(63,169,107,.4); } .fine-act-pay:hover { color: #7ddba6; border-color: var(--success); } .fine-act-more { padding: 5px 8px; font-weight: 800; color: var(--text-faint); } /* ── Modale des actions secondaires ── */ .fine-choices { display: flex; flex-direction: column; gap: 8px; } .fine-choice { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 11px 14px; border-radius: var(--radius-sm); background: var(--bg-input); border: 1px solid var(--border-soft); text-align: left; cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease); } .fine-choice:hover { background: var(--bg-card-hover); border-color: var(--accent); } .fine-choice-label { font-size: 13px; font-weight: 700; color: var(--text-primary); } .fine-choice-hint { font-size: 11px; color: var(--text-faint); } .fine-choice-ok:hover { border-color: var(--success); } .fine-choice-danger:hover { border-color: var(--danger); } .fine-choice-danger .fine-choice-label { color: var(--danger); } /* ── Aperçu du barème dans la modale ── */ .fine-preview { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; } .fine-preview-step { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bg-input); border: 1px solid var(--border-soft); } .fine-preview-when { font-size: 11px; color: var(--text-faint); } .fine-preview-when b { color: var(--text-muted); font-weight: 600; } .fine-preview-amount { font-size: 15px; font-weight: 800; font-family: var(--font-mono); color: var(--gold-bright); } .fine-preview-art { font-size: 10px; color: var(--text-faint); } .fine-preview-final { border-color: rgba(220, 75, 71, .35); } .fine-preview-final .fine-preview-amount { color: var(--danger); font-size: 13px; } @media (max-width: 820px) { .fine-preview { grid-template-columns: 1fr 1fr; } } /* ── Échéancier : amendes ── */ .agenda-amende { border-left-color: var(--warning); } .agenda-retention { border-left-color: var(--danger); } /* ══════════════════════════════════════════════════════════════════════════ RECHERCHE TRANSVERSALE ══════════════════════════════════════════════════════════════════════════ */ /* Barre de la barre du haut : elle prend la place laissée entre le titre et les actions, sans jamais les repousser. */ .topbar-search { display: flex; align-items: center; gap: 8px; flex: 1; max-width: 380px; margin: 0 auto 0 28px; padding: 0 12px; height: 34px; border-radius: 999px; background: var(--bg-input); border: 1px solid var(--border-soft); color: var(--text-faint); transition: border-color .15s var(--ease); } .topbar-search:focus-within { border-color: var(--accent); color: var(--text-muted); } .topbar-search input { flex: 1; min-width: 0; border: none; background: none; outline: none; color: var(--text-primary); font: inherit; font-size: 13px; } @media (max-width: 900px) { .topbar-search { display: none; } } /* Page de résultats */ .sr-bar { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; margin-bottom: 16px; border-radius: var(--radius); background: var(--bg-card); border: 1px solid var(--border-soft); } .sr-bar-icon { color: var(--text-faint); flex-shrink: 0; } .sr-bar-input { flex: 1; min-width: 0; border: none; background: none; outline: none; color: var(--text-primary); font: inherit; font-size: 15px; } .sr-count { font-size: 13px; color: var(--text-muted); margin: 0 0 14px; } .sr-groups { display: flex; flex-direction: column; gap: 16px; } .sr-group-count { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--text-faint); } /* Filet de couleur : le module se lit sans relire le titre de la carte. */ .sr-row { border-left: 3px solid transparent; } .sr-row-dossier { border-left-color: #4a90d9; } .sr-row-procedure { border-left-color: var(--gold); } .sr-row-enquete { border-left-color: var(--success); } .sr-row-amende { border-left-color: var(--warning); } .sr-row-document { border-left-color: #8496ad; } .sr-detail { display: block; font-size: 11px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Pagination : compléments au bloc existant. */ .reg-pag-gap { color: var(--text-faint); padding: 0 2px; } .reg-pag-total { text-align: right; padding-top: 10px; } /* ══════════════════════════════════════════════════════════════════════════ VOILE DE TRANSITION ══════════════════════════════════════════════════════════════════════════ */ .page-veil { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; background: var(--bg-body, #0b0f14); /* Non peint tant qu'il est inutile : `visibility` le sort aussi du calcul de survol, un simple `opacity: 0` intercepterait les clics. */ opacity: 0; visibility: hidden; transition: opacity .22s var(--ease), visibility .22s var(--ease); } .page-veil.on { opacity: 1; visibility: visible; } .page-veil-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; } .page-veil-seal { width: 62px; height: 62px; object-fit: contain; animation: veil-pulse 1.6s var(--ease) infinite; } .page-veil-name { font-family: var(--font-serif); font-size: 13px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-bright); } /* Barre indéterminée : on ne connaît pas la durée du chargement, elle balaie. */ .page-veil-bar { width: 190px; height: 2px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; } .page-veil-bar > span { display: block; width: 40%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, transparent, var(--gold-bright), transparent); animation: veil-sweep 1.1s ease-in-out infinite; } @keyframes veil-pulse { 0%, 100% { opacity: .55; transform: scale(.97); } 50% { opacity: 1; transform: scale(1); } } @keyframes veil-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } } /* ══════════════════════════════════════════════════════════════════════════ CODE PÉNAL ══════════════════════════════════════════════════════════════════════════ */ /* Grille souple. Les colonnes en `1fr` refusaient de descendre sous la largeur naturelle de leurs champs : huit d'entre eux réclamaient plus de 1400 px, la page débordait et les deux barres de défilement se battaient. */ .pc-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 12px; align-items: end; } .pc-form .form-group { margin: 0; min-width: 0; } .pc-form .pc-wide { grid-column: span 2; } .pc-add { margin-bottom: 20px; } @media (max-width: 640px) { .pc-form .pc-wide { grid-column: span 1; } } /* Le tableau : mêmes colonnes pour l'en-tête et les lignes, et des parts qui peuvent se comprimer (`minmax(0, …)`) au lieu de pousser la page. */ .pc-table { padding: 0; overflow: hidden; } .pc-head, .pc-row { display: grid; grid-template-columns: 92px 220px minmax(0, 1fr) 184px 100px 220px 72px 96px; gap: 12px; align-items: center; } .pc-head { padding: 10px 14px; border-bottom: 1px solid var(--border-color); font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--text-muted); text-transform: uppercase; } .pc-item { border-bottom: 1px solid var(--border-color); } .pc-item:last-child { border-bottom: none; } .pc-row { list-style: none; cursor: pointer; padding: 10px 14px; font-size: 13px; } .pc-row::-webkit-details-marker { display: none; } .pc-row:hover { background: var(--bg-card-hover); } .pc-item[open] .pc-row { background: var(--bg-card-hover); } /* Un libellé long tronque au lieu d'élargir sa colonne. */ .pc-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pc-muted { color: var(--text-muted); font-size: 12px; } .pc-edit { color: var(--accent); font-size: 12px; } .pc-edit-pane { padding: 14px; border-top: 1px solid var(--border-color); background: rgba(255, 255, 255, .012); } .pc-delete { margin-top: 10px; } .pc-empty { padding: 18px 14px; color: var(--text-muted); } @media (max-width: 1100px) { .pc-head { display: none; } .pc-row { grid-template-columns: 90px minmax(0, 1fr) 130px 90px; } .pc-row > span:nth-child(2), .pc-row > span:nth-child(6), .pc-row > span:nth-child(7) { display: none; } } /* ══════════════════════════════════════════════════════════════════════════ AMENDES — étiquettes, coloration de ligne et suivi ══════════════════════════════════════════════════════════════════════════ */ /* Tons partagés par les pastilles, les cases à cocher et le fond de ligne : une seule définition sert aux trois usages. */ .fine-tag-danger { --tag: var(--danger); --tag-text: #f08b88; } .fine-tag-warning { --tag: var(--warning); --tag-text: #e8b93b; } .fine-tag-info { --tag: #4a90d9; --tag-text: #7fb2e5; } .fine-tag-success { --tag: var(--success); --tag-text: #5fc98d; } .fine-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; } .fine-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; line-height: 1.5; white-space: nowrap; background: color-mix(in srgb, var(--tag) 16%, transparent); color: var(--tag-text); border: 1px solid color-mix(in srgb, var(--tag) 38%, transparent); } /* Pastille de filtre teintée par le ton de l'étiquette. */ .fine-chip-tag.active { background: color-mix(in srgb, var(--tag) 16%, transparent); color: var(--tag-text); border-color: color-mix(in srgb, var(--tag) 42%, transparent); } /* La ligne entière prend le ton de l'étiquette la plus grave — ou le rouge du mandat dès que les délais du Titre XI sont épuisés. */ .fine-tone-danger { --tone: var(--danger); } .fine-tone-warning { --tone: var(--warning); } .fine-tone-info { --tone: #4a90d9; } .fine-tone-success { --tone: var(--success); } tr.fine-row[class*="fine-tone-"] td { background: color-mix(in srgb, var(--tone) 9%, transparent); } tr.fine-row[class*="fine-tone-"]:hover td { background: color-mix(in srgb, var(--tone) 15%, transparent); } tr.fine-row[class*="fine-tone-"] td:first-child { border-left-color: var(--tone); } .fine-warrant { color: var(--danger) !important; font-weight: 700; } .fine-name a { color: inherit; } .fine-name a:hover { color: var(--accent); } /* ── Choix des étiquettes ── */ .fine-tag-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .fine-tag-choice { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 999px; background: var(--bg-input); border: 1px solid var(--border-soft); font-size: 12px; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease); } .fine-tag-choice input { accent-color: var(--tag); margin: 0; cursor: pointer; } .fine-tag-choice:hover { border-color: color-mix(in srgb, var(--tag) 45%, transparent); } .fine-tag-choice:has(input:checked) { background: color-mix(in srgb, var(--tag) 15%, transparent); border-color: color-mix(in srgb, var(--tag) 45%, transparent); color: var(--tag-text); } .btn-block { width: 100%; justify-content: center; } .fine-sep { margin: 16px 0 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); border-top: 1px solid var(--border-soft); padding-top: 12px; } /* ══════════════════════════════════════════════════════════════════════════ AMENDES — fiche ══════════════════════════════════════════════════════════════════════════ */ .fine-back { display: inline-block; margin-bottom: 14px; font-size: 13px; color: var(--text-muted); } .fine-back:hover { color: var(--accent); } .fine-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 20px 24px; margin-bottom: 16px; border-radius: var(--radius); background: var(--bg-card); border: 1px solid var(--border-soft); border-left: 4px solid var(--tone, var(--accent)); } .fine-head[class*="fine-tone-"] { background: color-mix(in srgb, var(--tone) 7%, var(--bg-card)); } /* Le bloc de gauche occupe la place restante : sans quoi un nom long ou une ligne de rattachements deborde au lieu de se replier. */ .fine-head-main { flex: 1; min-width: 0; } .fine-head-ref { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--gold-bright); } .fine-head-name { font-size: 24px; font-weight: 800; margin: 2px 0 5px; } .fine-head-meta { font-size: 12px; color: var(--text-muted); } .fine-head-money { text-align: right; flex-shrink: 0; } .fine-head-due { font-family: var(--font-mono); font-size: 30px; font-weight: 800; line-height: 1.1; color: var(--gold-bright); } .fine-head-sub { font-size: 12px; color: var(--text-faint); margin-bottom: 7px; } .fine-alert { padding: 13px 16px; margin-bottom: 16px; border-radius: var(--radius); background: rgba(220, 75, 71, .09); border: 1px solid rgba(220, 75, 71, .38); font-size: 13px; color: var(--text-muted); line-height: 1.55; } .fine-alert strong { color: var(--danger); } /* ── Barème appliqué ── */ .fine-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .fine-step { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-soft); opacity: .45; } .fine-step:last-child { border-bottom: none; } .fine-step-past { opacity: 1; } .fine-step-now { margin: 0 -12px; padding: 10px 12px; border-radius: var(--radius-sm); background: rgba(201, 162, 39, .09); border-bottom-color: transparent; } .fine-step-date { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); white-space: nowrap; } .fine-step-body { flex: 1; min-width: 0; display: flex; flex-direction: column; } .fine-step-text { font-size: 13px; font-weight: 600; } .fine-step-art { font-size: 10px; color: var(--text-faint); } .fine-step-amount { font-family: var(--font-mono); font-size: 13px; font-weight: 700; white-space: nowrap; } .fine-step-now .fine-step-amount { color: var(--gold-bright); } /* ── Suivi ── */ .fine-post { border-bottom: 1px solid var(--border-soft); } .fine-post-form { display: flex; gap: 8px; align-items: center; } .fine-post-form input[type="text"] { flex: 1; } .fine-post-type { width: 150px; flex-shrink: 0; } .fine-timeline { display: flex; flex-direction: column; } .fine-event { display: flex; gap: 12px; padding: 9px 0; position: relative; } .fine-event::before { content: ''; position: absolute; left: 3px; top: 0; bottom: 0; width: 1px; background: var(--border-soft); } .fine-event:first-child::before { top: 16px; } .fine-event:last-child::before { bottom: calc(100% - 16px); } .fine-event-dot { width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; flex-shrink: 0; background: var(--text-faint); box-shadow: 0 0 0 3px var(--bg-card); position: relative; } .fine-event-mandat .fine-event-dot { background: var(--danger); } .fine-event-paiement .fine-event-dot { background: var(--success); } .fine-event-contact .fine-event-dot { background: var(--accent); } .fine-event-info .fine-event-dot { background: var(--gold); } .fine-event-body { flex: 1; min-width: 0; } .fine-event-top { display: flex; align-items: baseline; gap: 8px; } .fine-event-kind { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); } .fine-event-meta { font-size: 11px; color: var(--text-faint); flex: 1; } .fine-event-text { font-size: 13px; margin-top: 1px; } .fine-event-del { background: none; border: none; padding: 0 2px; color: var(--text-faint); font-size: 11px; cursor: pointer; } .fine-event-del:hover { color: var(--danger); } @media (max-width: 700px) { .fine-head { flex-direction: column; } .fine-head-money { text-align: left; } .fine-post-form { flex-wrap: wrap; } .fine-post-type { width: 100%; } }