/* Console Justice — palette beige / marron sur blanc cassé. * * `gmao.css` porte toute la mise en page ; on ne redéfinit ici que les * variables et les quelques couleurs que la feuille GMAO a écrites en dur * (bordures du rail, bandeau de démonstration). * * Couleurs et calques (refonte du 30/09/2026, maquette validée par Lucas : rag-justice/maquettes/) : * 1. Une échelle de tons, un rôle par ton (méthode Radix Colors) : sable n1 à n12 pour les neutres, brun a3 à a11 * pour l'accent. Pas d'hexadécimal isolé pour une surface, un trait ou un texte. * 2. Trois niveaux, toujours dans le même sens (couches de Material 3 et d'IBM Carbon) : le SOL (n2) porte les * colonnes, le PAPIER (n1) porte ce qu'on lit (réponse, dossier, champs, fenêtres), le REMPLISSAGE (n3) sert au * survol et aux jetons. Plus c'est proche, plus c'est clair ; une fenêtre flottante gagne une ombre, pas une teinte. * Avant : la liste des questions était blanche et la réponse sur le beige, la navigation passait devant le contenu. * 3. 60-30-10 : 60 % de papier, 30 % de sol et de rail, 10 % d'accent, réservé à ce qui se clique. * 4. Une grande surface paraît plus saturée : le sol est un blanc cassé à peine chaud, le beige reste au rail et aux * accents (l'ancien sol #f6f2ea donnait un aspect « papier jauni »). * 5. Contraste WCAG 2.2 AA : texte secondaire à 5,7:1 sur le sol ; bord des champs (n5) plus marqué que celui des * cartes (n4). */ :root { --n1: #fffefc; /* papier : réponse, blocs du dossier, champs, fenêtres */ --n2: #f6f4f0; /* sol : les colonnes */ --n3: #eeeae3; /* remplissage : survol, jetons, en-têtes */ --n4: #e3ddd3; /* trait : bord des cartes, séparateurs */ --n5: #cbc2b5; /* trait fort : bord des champs */ --n11: #6b5f55; /* texte secondaire */ --n12: #2a211b; /* texte */ --a3: #f4ebe0; /* accent, fond teinté : question ouverte, pastilles de citation */ --a6: #e2c7a4; /* accent, trait */ --a9: #8a5a2b; /* accent plein : boutons, liens, état actif */ --a11: #6b4420; /* accent, texte sur fond teinté */ --fond: var(--n2); --bg: var(--n1); --panel: var(--n3); --line: var(--n4); --bordure: var(--n5); --text: var(--n12); --muted: var(--n11); --accent: var(--a9); --ok: #4f6d3a; --warn: #a8641f; --err: #a13b2c; --rail: #2b1d14; --rail-texte: #e6d8c7; --rail-actif: #45301f; /* Tons du rail, variables depuis les couleurs personnalisées (theme.js, 30/09/2026) : trait, texte secondaire, accent (parrainage, jours d'essai), case vide de la barre d'essai. */ --rail-trait: #45301f; --rail-doux: #b9a38c; --rail-accent: #d9a86a; --rail-vide: #5a4029; --ombre-carte: 0 1px 2px rgba(43, 29, 20, .06); } #rail nav.tech, #pied { border-top-color: var(--rail-trait); } #pied select { border-color: var(--rail-trait); } #rail nav.tech button, #pied .lien, #btnRail { color: var(--rail-doux); } .avatar small { color: var(--rail-doux); } .domaine { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--rail-doux); padding: 0 10px 10px; font-weight: 600; } #rail.replie .domaine { display: none; } .marque-portail { display: flex; align-items: center; gap: 12px; } .marque-domaine { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--accent); } .zone-demo { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); } .zone-demo button { width: 100%; } /* Le bandeau d'essai ou de démonstration informe sans alarmer : remplissage neutre et icône d'information. */ .bandeau-demo { background: var(--n3); border-bottom: 1px solid var(--n4); color: var(--n11); font-size: 12.5px; } .bandeau-demo b { color: var(--n12); } .bandeau-demo svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--n11); stroke-width: 1.6; stroke-linecap: round; } button.primary { background: var(--accent); border-color: var(--accent); } button:hover:not(:disabled) { border-color: var(--accent); } /* Les trois colonnes sur le même sol ; la question ouverte prend l'accent. */ .colonne-liste { background: var(--n2); } .colonne-liste input, .colonne-liste .nouveau { background: var(--n1); border-color: var(--n4); } .q-item.actif { background: var(--a3); border-color: transparent; box-shadow: inset 3px 0 0 var(--a9); } .q-item.actif b { color: var(--a11); } /* Le papier : un trait et une ombre à peine visible. */ .carte-reponse, .bloc-dossier { box-shadow: var(--ombre-carte); } /* Les pastilles de citation prennent l'accent : elles mènent aux sources. */ .cite { background: var(--a3); border-color: var(--a6); color: var(--a11); } .cite:hover { background: var(--a9); border-color: var(--a9); color: #fff; } /* Les champs : un bord plus marqué que celui des cartes, un anneau d'accent quand on écrit. */ .saisie { border-color: var(--n5); box-shadow: var(--ombre-carte); } .saisie:focus-within { border-color: var(--a9); box-shadow: 0 0 0 3px var(--a3); } .segment, #vue select, .filtres input { border-color: var(--n5); } /* Filtres de la recherche : portée et ancienneté, au-dessus de la saisie. */ .filtres { display: flex; gap: 8px 18px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; font-size: 12px; color: var(--muted); } /* Chaque libellé reste collé à son champ (24/09/2026) : un groupe passe à la ligne en entier. Sur un écran étroit, « Chercher dans » peut se poser au-dessus de ses boutons, trop larges pour tenir à côté. */ .filtre { display: inline-flex; align-items: center; gap: 6px; flex-wrap: nowrap; } .filtre-portee { flex-wrap: wrap; } .filtres select { width: auto; padding: 5px 8px; font-size: 13px; } /* La feuille commune met tous les champs à 100 % : la date passait seule à la ligne, loin de son libellé. */ .filtres input[type=date] { width: auto; padding: 5px 8px; font-size: 13px; } /* Listes déroulantes : la flèche native se posait sur le texte selon le navigateur (« toutes » dans « Décisions depuis », 24/09/2026). Flèche dessinée ici, dans une marge droite qui lui est réservée. */ #vue select { appearance: none; -webkit-appearance: none; padding-right: 28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237a6a5e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 10px 6px; } .segment { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--bg); } .segment button { border: 0; border-radius: 0; background: none; padding: 5px 12px; font-size: 13px; } .segment button.actif { background: var(--accent); color: #fff; } /* Étiquette de type sur les sources. Trois couleurs au lieu de dix (30/09/2026) : la règle (codes, lois, décrets, conventions), son application (toutes les juridictions, la CNIL, les documents de la Cour), le cabinet. Le libellé garde le détail (« Cassation », « Juge du fond »…) et le dossier est déjà rangé par famille. */ .type-source { display: inline-block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; padding: 2px 7px; border-radius: 5px; margin-right: 6px; vertical-align: 1px; } .type-source.article, .type-source.reglement, .type-source.convention { background: #e6ecdc; color: #3d5a2a; } .type-source.decision, .type-source.commentaire, .type-source.fond, .type-source.admin, .type-source.constit, .type-source.cnil { background: #f3e7d6; color: #7a4c1c; } .type-source.cabinet { background: #e1e8f0; color: #33506e; } /* Une source du dossier (30/09/2026) : son titre ouvre le texte officiel (Légifrance, Cour de cassation), « Lire ici » le lit dans la console (versions, passages surlignés) ; l'extrait est une citation, plus une boîte dans la boîte ; le chemin d'un article (« Partie législative > … > Paragraphe 1 ») tenait jusqu'à sept lignes : ses deux derniers niveaux, le chemin entier au survol. */ .source-extrait { background: none; border-radius: 0; border-left: 2px solid var(--n4); padding: 1px 0 1px 10px; } .source-titre a { color: var(--n12); text-decoration: none; } .source-titre a:hover { color: var(--a9); text-decoration: underline; text-underline-offset: 3px; } .source-titre a svg { width: 11px; height: 11px; margin-left: 5px; vertical-align: 0; fill: none; stroke: var(--n11); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .source-titre a:hover svg { stroke: var(--a9); } .source-meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .source-meta .lien { font-size: 11.5px; font-weight: 600; } .chemin { font-size: 12px; color: var(--n11); margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .depot-cabinet { border: 2px dashed var(--bordure, #c9b99a); border-radius: 10px; padding: 26px; text-align: center; cursor: pointer; transition: background-color .15s, border-color .15s; } .depot-cabinet.survol { background: var(--a3); border-color: var(--a9); } .statut-cabinet.pret { color: #3f5a2c; } .statut-cabinet.erreur { color: #a33; } .statut-cabinet.en_attente { color: #7a4e1c; } .source-item.non-cite { opacity: .72; } .similarite { font-variant-numeric: tabular-nums; } /* Corps d'une source ouverte dans le volet de droite. */ .texte-source { white-space: pre-wrap; font-size: 13.5px; line-height: 1.6; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; max-height: 60vh; overflow: auto; } .texte-source mark { background: #f3dfb5; padding: 0 2px; border-radius: 3px; } .zone-titre { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin: 14px 0 4px; } .timeline { margin: 0; padding: 0; list-style: none; font-size: 13px; } .timeline li { padding: 6px 0; border-top: 1px solid var(--line); display: flex; gap: 10px; } .timeline li:first-child { border-top: 0; } .timeline .muted { flex: 0 0 90px; } /* Onglet Corpus : jauges d'avancement. */ .jauge { height: 8px; background: var(--panel); border-radius: 99px; overflow: hidden; margin-top: 6px; } .jauge > span { display: block; height: 100%; background: var(--accent); border-radius: 99px; } .ligne-jauge { display: grid; grid-template-columns: 200px 1fr 130px; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; } .ligne-jauge:first-child { border-top: 0; } .stats { margin-bottom: 14px; } .stat { background: var(--bg); } /* Rail (30/09/2026) : le parrainage est une rubrique comme les autres (plus de pavé doré, qui était l'élément le plus lumineux de l'écran) ; le compte, l'essai et son compte à rebours descendent en bas, sous Paramètres, à la place de la barre du haut. À deux jours de la fin, l'essai passe en orange. Le parrainage n'est pas dans une