/* ========================================================================== Système de design — sobre, inspiré du DSFR, sans élément d'identité d'État. Tous les tokens sont surchargeables par la configuration de l'application. ========================================================================== */ :root { --brand: #000091; --brand-dark: #1212ff; --brand-soft: #e3e3fd; --ink: #161616; --ink-2: #3a3a3a; --ink-muted: #666666; --border: #dddddd; --border-strong: #929292; --bg: #ffffff; --bg-alt: #f6f6f6; --bg-contrast: #eeeeee; --radius: 4px; --focus: #0a76f6; --success: #18753c; --success-bg: #b8fec9; --warning: #b34000; --warning-bg: #ffe9e6; --error: #ce0500; --error-bg: #ffdedd; --info: #0063cb; --info-bg: #e8edff; --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --font-doc: "Times New Roman", Times, Georgia, serif; --space: 8px; color-scheme: light; } /* ========================================================================== Mode sombre. Le thème est posé sur `` (voir lib/theme.js) : c'est une préférence de poste, pas une donnée du référentiel. Seule la CHROME de l'application s'assombrit — le papier des actes, lui, reste blanc (`[data-theme="dark"] .paper` rétablit les jetons clairs pour tout ce qu'il contient) : un acte s'imprime sur du papier blanc, et l'aperçu doit montrer le document tel qu'il sera imprimé. Les jetons ci-dessous sont l'équivalent sombre de ceux de `:root` ; les quelques couleurs écrites en dur dans la chrome (badges, encadrés, schémas) sont reprises plus bas, à la suite, pour rester lisibles. ========================================================================== */ [data-theme="dark"] { --ink: #e9ebf1; --ink-2: #c3c8d4; --ink-muted: #9aa0af; --border: #343a46; --border-strong: #5d6472; --bg: #1b1e26; --bg-alt: #14161d; --bg-contrast: #272b35; --success: #7fd8a3; --success-bg: #1e3b2b; --warning: #f5b183; --warning-bg: #3b2716; --error: #ff8f88; --error-bg: #3d1f1c; --info: #9dbcff; --info-bg: #1f2b49; --focus: #7fb0ff; /* Repli si la configuration n'a pas posé `--brand` (voir applyBrand). */ --brand: #8f92ff; --brand-soft: #262a44; color-scheme: dark; } /* Copies thématiques destinées au recueil public. Le CSS publié d'un acte (sa charte graphique) pose ses propres `--ink` et `--brand` sur le conteneur du texte : le recueil a besoin des valeurs THÉMÉES de l'application, il les lit donc sous ces noms-là, que le CSS publié ne touche pas (voir lib/recueil.js, `CSS_DOCUMENT_WEB`). */ :root { --ink-public: var(--ink); --ink-2-public: var(--ink-2); --brand-public: var(--brand); } * { box-sizing: border-box; } /* L'attribut `hidden` doit TOUJOURS l'emporter — c'est ainsi que l'application cache ce qui ne sert pas (un panneau fermé, un bouton sans objet, une zone de saisie sans moteur) : partout dans le code, on écrit `el.hidden = true`, jamais `style.display`. La plateforme Perchance injecte cette règle ; une page servie en statique (GitHub Pages) ne l'a pas, et une classe qui pose `display: flex` sur l'élément gagne alors contre le `display: none` du navigateur — le sélecteur de type `` (0,1,0) bat le sélecteur de type (0,0,1) de la feuille de style du navigateur. Sans cette reprise, un panneau fermé ne se ferme pas hors de Perchance. */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; background: var(--bg-alt); color: var(--ink); font-family: var(--font-ui); font-size: 16px; line-height: 1.5; text-align: left; } h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.25; font-weight: 700; } h1 { font-size: 1.5rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1rem; } p { margin: 0 0 .75em; } a { color: var(--brand); } code, kbd, pre { font-family: var(--font-mono); font-size: .875em; } ::selection { background: var(--brand-soft); } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } /* ---------------------------------------------------------------- structure */ .app { min-height: 100vh; display: flex; flex-direction: column; } /* Écran « plein » (l'éditeur de trame) : la coquille est bornée à la fenêtre, si bien que les volets et le canvas défilent SUR PLACE au lieu d'allonger la page. Sans cela, la hauteur du contenu l'emporte et l'éditeur devient une longue page — les volets perdent le défilement interne pour lequel ils sont écrits (`.editor__scroll`, `.canvas`). */ .app--plein { height: 100vh; overflow: hidden; } @supports (height: 100dvh) { .app--plein { height: 100dvh; } } /* Le pied de l'ATELIER : la mention de l'éditeur du logiciel (voir src/ui/mention.js et Administration › Identité). Il est discret — un filet, une ligne de petit texte —, et s'efface quand l'écran occupe toute la hauteur (éditeur de trame) : la feuille ne partage pas sa place. */ .app-pied { border-top: 1px solid var(--border); background: var(--bg); padding: 10px 20px; text-align: left; } .app-pied__mention { margin: 0; font-size: .76rem; color: var(--ink-muted); } .app--plein .app-pied { display: none; } /* À l'écran de connexion, le pied ferme une colonne centrée : il se pose sans filet, sur le fond de la page. */ .app-pied--connexion { background: transparent; border-top: 0; text-align: center; padding: 12px 16px 16px; } /* Bandeau de démonstration : en tête de l'application, au-dessus de l'en-tête. Il n'apparaît que si le DÉPLOIEMENT allume la démonstration (voir src/lib/demo.js) — le réglage du référentiel ne joue que sans déploiement. */ .app-demo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 5px 20px; min-height: 32px; background: var(--warning-bg); color: var(--warning); border-bottom: 1px solid rgba(179, 64, 0, .22); font-size: .78rem; line-height: 1.35; text-align: left; } .app-demo__tag { display: inline-flex; align-items: center; gap: 5px; flex: none; background: var(--warning); color: #fff; border-radius: 2px; padding: 2px 8px; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; } .app-demo__text { flex: 1 1 220px; } .app-demo .fr-btn { flex: none; } .app-demo .fr-btn.fr-btn--tertiary { color: var(--warning); text-decoration: underline; padding: 2px 8px; min-height: 22px; font-size: .74rem; } .app-demo .fr-btn.fr-btn--tertiary:hover:not(:disabled) { background: rgba(179, 64, 0, .12); } /* Bandeau « référentiel vierge » : démonstration éteinte et rien de construit. Il dit au premier écran ce qu'il y a à faire, au lieu de laisser des écrans vides (voir src/ui/notice.js). */ .app-vierge { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 5px 20px; min-height: 32px; background: var(--info-bg); color: var(--info); border-bottom: 1px solid rgba(0, 99, 203, .22); font-size: .78rem; line-height: 1.35; text-align: left; } .app-vierge__tag { display: inline-flex; align-items: center; gap: 5px; flex: none; background: var(--info); color: #fff; border-radius: 2px; padding: 2px 8px; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; } .app-vierge__text { flex: 1 1 220px; } .app-vierge .fr-btn { flex: none; } .app-vierge .fr-btn.fr-btn--tertiary { color: var(--info); text-decoration: underline; padding: 2px 8px; min-height: 22px; font-size: .74rem; } .app-vierge .fr-btn.fr-btn--tertiary:hover:not(:disabled) { background: rgba(0, 99, 203, .12); } .app-header { background: var(--bg); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 16px; padding: 10px 20px; position: sticky; top: 0; z-index: 30; flex-wrap: wrap; } .app-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; } .app-mark { display: inline-flex; flex: none; color: var(--ink); } .app-brand__text { display: flex; flex-direction: column; line-height: 1.15; } .app-brand__name { font-size: .95rem; } .app-brand__sub { font-size: .72rem; color: var(--ink-muted); font-weight: 400; } /* Rappel de la structure : l'application sert plusieurs entités du référentiel. */ .app-org { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 5px; border: 1px solid var(--border); border-radius: 999px; } .app-org img { height: 22px; width: auto; display: block; border-radius: var(--radius); } .app-org__mark { width: 22px; height: 22px; border-radius: var(--radius); background: var(--brand); color: #fff; flex: none; display: grid; place-items: center; font-size: .6rem; letter-spacing: .04em; } .app-org__name { font-size: .82rem; font-weight: 600; color: var(--ink); white-space: nowrap; } .app-header__spacer { flex: 1 1 auto; } .app-header__tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .app-body { flex: 1 1 auto; display: flex; align-items: stretch; min-height: 0; } .app-nav { width: 232px; flex: none; background: var(--bg); border-right: 1px solid var(--border); padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; } .app-nav__group { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); margin: 14px 8px 6px; } .app-nav .app-nav__item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius); border: 0; background: none; cursor: pointer; font: inherit; color: var(--ink); text-align: left; width: 100%; } .app-nav__item:hover { background: var(--bg-alt); } .app-nav .app-nav__item.is-active { background: var(--brand-soft); color: var(--brand); font-weight: 600; } .app-nav__item .fr-icon { color: inherit; } .app-main { flex: 1 1 auto; min-width: 0; padding: 20px; display: flex; flex-direction: column; gap: 16px; } .app-main--flush { padding: 0; } .page-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; } .page-head__text { flex: 1 1 320px; } .page-head__title { margin: 0; } .page-head__sub { color: var(--ink-muted); margin: 4px 0 0; font-size: .9rem; } .page-head__actions { display: flex; gap: 8px; flex-wrap: wrap; } /* Les contrôles de formulaire : la plateforme injecte un reset qui remet `box-sizing: content-box` sur input/select/textarea (le `*` global ne suffit pas, un sélecteur d'élément est plus spécifique). Sans cette règle, un champ en `width: 100%` déborde de 24 px de son conteneur. */ input.fr-input, select.fr-select, textarea.fr-textarea { box-sizing: border-box; } /* le reset de la plateforme contient « input[type="search"] { box-sizing: content-box } » (spécificité 0,1,1) : il faut donc qualifier l'attribut pour le neutraliser. */ input[type="search"].fr-input { box-sizing: border-box; } /* -------------------------------------------------------------- composants */ .fr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 14px; min-height: 36px; border-radius: var(--radius); border: 1px solid transparent; font: inherit; font-size: .875rem; font-weight: 500; cursor: pointer; text-decoration: none; background: none; color: inherit; white-space: nowrap; } .fr-btn:disabled { opacity: .45; cursor: not-allowed; } /* la spécificité est doublée volontairement : un reset injecté par la plateforme (button:not([disabled]) { color: inherit }) écrase toute règle à une seule classe. */ .fr-btn.fr-btn--primary { background: var(--brand); color: #fff; } .fr-btn.fr-btn--primary:hover:not(:disabled) { background: var(--brand-dark); } .fr-btn.fr-btn--secondary { border-color: var(--border); background: var(--bg); } .fr-btn.fr-btn--secondary:hover:not(:disabled) { background: var(--bg-alt); } .fr-btn.fr-btn--tertiary { color: var(--brand); padding: 7px 8px; } .fr-btn.fr-btn--tertiary:hover:not(:disabled) { background: var(--brand-soft); } .fr-btn.fr-btn--danger { color: var(--error); border-color: transparent; } .fr-btn.fr-btn--danger:hover:not(:disabled) { background: var(--error-bg); } .fr-btn--sm { min-height: 28px; padding: 3px 9px; font-size: .8rem; } .fr-btn--icon { padding: 6px; min-height: 30px; } /* Bouton « allumé » : un état durable, pas un survol — la punaise qui dit « cet acte est à la une » (voir views/actes.js). */ .fr-btn.is-on { color: var(--brand); background: var(--brand-soft); } .fr-icon { display: inline-flex; align-items: center; flex: none; } .fr-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .72rem; font-weight: 600; line-height: 1.5; background: var(--bg-contrast); color: var(--ink-2); } .fr-badge--success { background: var(--success-bg); color: #1b5e2c; } .fr-badge--warning { background: var(--warning-bg); color: var(--warning); } .fr-badge--error { background: var(--error-bg); color: var(--error); } .fr-badge--info { background: var(--info-bg); color: var(--info); } .fr-badge--brand { background: var(--brand-soft); color: var(--brand); } .fr-alert { position: relative; padding: 12px 14px 12px 16px; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--border); border-left: 4px solid var(--info); margin: 0 0 10px; } .fr-alert__title { margin: 0; font-weight: 700; font-size: .92rem; } .fr-alert__title + p { margin-top: 4px; } .fr-alert p:last-child { margin-bottom: 0; } .fr-alert--info { border-left-color: var(--info); background: var(--info-bg); } .fr-alert--success { border-left-color: var(--success); background: #e9f7ee; } .fr-alert--warning { border-left-color: var(--warning); background: var(--warning-bg); } .fr-alert--error { border-left-color: var(--error); background: var(--error-bg); } .fr-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; } /* Une carte dont la rangée d'ACTIONS est en bas (carte de trame, carte de choix d'une trame à rédiger) : la rangée est collée au bas de la carte, si bien que les boutons s'alignent d'une carte à l'autre dans une grille, quel que soit le nombre de badges ou la longueur de la description. */ .fr-card--pied { display: flex; flex-direction: column; } .fr-card--pied > .fr-row:last-child { margin-top: auto; } .fr-card__title { margin: 0 0 4px; font-size: 1rem; } .fr-card__sub { color: var(--ink-muted); font-size: .85rem; margin: 0 0 12px; } .fr-field { margin-bottom: 14px; } .fr-label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 4px; } .fr-required { color: var(--error); } .fr-hint { margin: 0 0 5px; font-size: .78rem; color: var(--ink-muted); } .fr-error-text { margin: 4px 0 0; font-size: .78rem; color: var(--error); } .fr-input, .fr-select, .fr-textarea { width: 100%; padding: 7px 10px; min-height: 36px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--bg); color: var(--ink); font: inherit; font-size: .875rem; } .fr-textarea { min-height: 76px; resize: vertical; line-height: 1.45; } /* La flèche native du menu déroulant se dessine à l'intérieur du champ : sans cette réserve, le texte de l'option choisie passe dessous et paraît rogné. */ .fr-select { padding-right: 30px; } .fr-input:focus, .fr-select:focus, .fr-textarea:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); } .fr-input[readonly] { background: var(--bg-alt); color: var(--ink-muted); } .fr-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .fr-check { display: flex; gap: 8px; align-items: flex-start; font-size: .875rem; margin-bottom: 6px; cursor: pointer; } .fr-check input { margin-top: 3px; accent-color: var(--brand); } .fr-choices { display: flex; flex-wrap: wrap; gap: 6px; } .fr-choice { border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 5px 10px; font-size: .82rem; cursor: pointer; background: var(--bg); } .fr-choice.is-on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); font-weight: 600; } .fr-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 14px; flex-wrap: wrap; } .fr-tabs .fr-tab { padding: 8px 14px; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: .875rem; cursor: pointer; color: var(--ink-muted); } .fr-tabs .fr-tab--active { border-bottom-color: var(--brand); color: var(--brand); font-weight: 700; } .fr-tab__count { margin-left: 6px; font-size: .72rem; color: var(--ink-muted); } .fr-table { width: 100%; border-collapse: collapse; font-size: .85rem; background: var(--bg); } .fr-table th, .fr-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; } .fr-table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-muted); font-weight: 600; } .fr-table tbody tr:hover { background: var(--bg-alt); } .fr-table__empty { padding: 28px; text-align: center; color: var(--ink-muted); } .fr-grid { display: grid; gap: 16px; } /* `min(300px, 100%)` : sous 300 px de conteneur, la colonne se réduit au lieu de déborder — sur un écran très étroit, les formulaires restent dans la page. */ .fr-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); } .fr-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); } .fr-stack { display: flex; flex-direction: column; gap: 10px; } .fr-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .fr-muted { color: var(--ink-muted); } .fr-small { font-size: .78rem; } .fr-mono { font-family: var(--font-mono); font-size: .8rem; } .fr-spacer { flex: 1 1 auto; } .fr-sep { height: 1px; background: var(--border); margin: 12px 0; border: 0; } .fr-modal-overlay { position: fixed; inset: 0; background: rgba(22, 22, 22, .55); display: grid; place-items: center; padding: 20px; z-index: 100; } .fr-modal { background: var(--bg); border-radius: var(--radius); width: min(620px, 100%); max-height: 88vh; display: flex; flex-direction: column; /* Un élément de grille ne descend jamais sous sa largeur « min-content » : sans cela, une fenêtre au contenu large déborde de l'écran au lieu de rétrécir (aperçu étroit, téléphone). */ min-width: 0; } .fr-modal--wide { width: min(1000px, 100%); } .fr-modal__header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); } .fr-modal__title { margin: 0; font-size: 1.05rem; flex: 1 1 auto; } .fr-modal__body { padding: 16px; overflow: auto; } .fr-modal__footer { padding: 12px 16px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; } .fr-toast { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 12px); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: var(--radius); font-size: .85rem; opacity: 0; transition: opacity .2s, transform .2s; z-index: 200; max-width: 90vw; } .fr-toast.is-visible { opacity: 1; transform: translate(-50%, 0); } .fr-toast--error { background: var(--error); color: #fff; } .fr-toast--success { background: var(--success); color: #08130c; } /* formulaire de rédaction : formulaire + aperçu */ .rediger-grid { display: grid; gap: 16px; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); align-items: start; } .fr-table-wrap { overflow-x: auto; } .fr-table-wrap .fr-table { min-width: 640px; } /* ------------------------------------------------------- éditeur de trame */ /* Bannière de tête de l'éditeur : un import en cours, ou une trame encore en brouillon. C'est un ÉTAT de la trame, pas une notification : elle tient toute la largeur, collée aux bords, sous la barre de navigation. */ .editor__banniere { border-radius: 0; margin: 0; border-top: none; border-right: none; } .editor { display: grid; grid-template-columns: 250px minmax(0, 1fr) 340px; gap: 0; flex: 1 1 auto; min-height: 0; background: var(--bg); } .editor__col { min-width: 0; display: flex; flex-direction: column; min-height: 0; } .editor__col--left { border-right: 1px solid var(--border); } .editor__col--right { border-left: 1px solid var(--border); } .editor__colhead { padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); display: flex; align-items: center; gap: 6px; } .editor__scroll { overflow: auto; padding: 12px; flex: 1 1 auto; } .outline { display: flex; flex-direction: column; gap: 2px; } .outline__item { display: flex; align-items: center; gap: 7px; padding: 5px 7px; border-radius: var(--radius); border: 0; background: none; font: inherit; font-size: .82rem; cursor: pointer; text-align: left; width: 100%; color: var(--ink-2); } .outline__item:hover { background: var(--bg-alt); } .outline__item.is-active { background: var(--brand-soft); color: var(--brand); font-weight: 600; } .outline__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; } .outline__sub { padding-left: 22px; } .canvas { background: var(--bg-alt); overflow: auto; padding: 22px 12px 60px; flex: 1 1 auto; } .paper { width: 21cm; min-height: 29.7cm; margin: 0 auto; background: #fff; /* Les marges du papier viennent de la charte (feuille de style) : la vue qui affiche l'aperçu pose `--paper-pad` (voir `applyPaper`, lib/render.js). À défaut, les marges A4 de `paper.js`. */ padding: var(--paper-pad, 2cm 1.8cm); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); font-size: 11pt; line-height: 1.5; color: #111; font-family: var(--font-doc); /* un jeton non résolu ou une valeur longue ne doit jamais déborder la page */ overflow-wrap: break-word; } /* ------------------------------------------------------- zoom et déplacement Trois écrans montrent un contenu plus large que leur colonne — l'organigramme des délégations, la trame, le document en cours de rédaction. `cadreZoom` (src/ui/zoom.js) les traite comme un canvas : le plateau réserve la place du contenu réduit, le cadre défile comme n'importe quelle zone, et la barre flottante règle le cran. L'organisation est décrite dans l'en-tête du module. `.zoom-cadre` enveloppe le cadre pour que la barre ne défile pas avec lui. */ .zoom-cadre { position: relative; min-width: 0; } /* Dans un écran à hauteur fixée (l'éditeur de trame), le cadre doit prendre la place restante et défiler sur place : la chaîne flex lui en donne la hauteur. */ .zoom-cadre--plein { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .zoom-cadre--plein > .zoom { flex: 1 1 auto; min-height: 0; } .zoom { position: relative; min-width: 0; } /* Le plateau réserve la place du contenu réduit (`largeur × cran`), écrit par le module ; le contenu, hors flux, est réduit depuis son coin haut-gauche. */ .zoom__plateau { position: relative; margin: 0 auto; } .zoom__contenu { position: absolute; top: 0; left: 0; transform-origin: 0 0; } /* Un arbre prend sa largeur naturelle, quelle que soit la place offerte : c'est ce qui l'empêche de se replier au lieu de s'étendre. */ .zoom--canvas .zoom__contenu { width: max-content; } /* La gouttière est réservée en permanence : la largeur disponible d'une feuille fluide ne fait ainsi pas danser le papier quand une barre de défilement apparaît (voir `mesurer`, src/ui/zoom.js). */ .zoom--feuille { scrollbar-gutter: stable; } .zoom--canvas { cursor: grab; } .zoom--canvas.is-glisse { cursor: grabbing; } .zoom__bar { position: absolute; top: 8px; right: 8px; z-index: 4; display: flex; align-items: center; gap: 1px; background: var(--bg); border: 1px solid var(--border-strong); border-radius: 999px; padding: 2px; box-shadow: 0 1px 4px rgba(0, 0, 0, .14); } .zoom__btn, .zoom__pct { border: 0; background: none; font: inherit; cursor: pointer; color: var(--ink-2); border-radius: 999px; padding: 2px 8px; font-size: .78rem; line-height: 1.5; } .zoom__btn { font-size: .95rem; min-width: 26px; } .zoom__btn:hover, .zoom__pct:hover { background: var(--bg-alt); color: var(--brand); } .zoom__btn--fit { font-size: .76rem; } [data-theme="dark"] .zoom__bar { box-shadow: 0 1px 6px rgba(0, 0, 0, .6); } /* blocs éditables — `.blk` n'existe que dans l'éditeur de trame. Les blocs sont posés dans un conteneur `.doc` (comme le document compilé), si bien que les règles de `.doc-…` valent aussi ici ; la coquille du bloc (survol, outils, prise) s'écrit, elle, sous `.blk`. */ .blk { position: relative; border-radius: 2px; } .blk:hover { background: rgba(0, 0, 145, .03); } .blk--sel { background: rgba(0, 0, 145, .06); box-shadow: inset 2px 0 0 var(--brand); } .blk__tools { position: absolute; right: -4px; top: -14px; gap: 2px; background: transparent; border: 1px solid transparent; border-radius: var(--radius); padding: 1px; z-index: 5; /* Toujours là (on ne devine pas un survol), mais effacée : elle s'affirme sur le bloc survolé ou sélectionné — et ne masque jamais le texte au repos. */ display: flex; align-items: center; opacity: .3; transition: opacity .12s, background .12s; } .blk:hover > .blk__tools, .blk--sel > .blk__tools, .blk__tools:hover { opacity: 1; background: var(--bg); border-color: var(--border); } .blk__tools .fr-btn--icon { min-height: 22px; padding: 2px 4px; } /* Le bouton « commenter ce bloc » de la barre d'outils, et le repère de marge des blocs commentés (voir ui/annotations.js). Le repère, lui, ne s'efface jamais : c'est lui qui rend un commentaire impossible à manquer. */ .blk__note { display: inline-flex; align-items: center; gap: 3px; min-height: 22px; padding: 2px 4px; border: 0; border-radius: var(--radius); background: none; color: var(--ink-2); cursor: pointer; } .blk__note:hover { color: var(--brand); background: var(--brand-soft); } .blk__note.is-on { color: var(--info); } .blk__note-count { font-size: .62rem; font-weight: 700; font-family: var(--font-ui); } .blk__annot-flag { position: absolute; right: calc(100% + 2px); top: 1px; z-index: 4; display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 3px; border: 0; border-radius: 999px; background: var(--info); color: #fff; cursor: pointer; font-family: var(--font-ui); font-size: .62rem; font-weight: 700; line-height: 16px; } .blk__annot-flag:hover { background: var(--brand); } .chip { display: inline-block; padding: 0 4px; border-radius: 3px; cursor: default; background: var(--brand-soft); color: var(--brand); font-family: var(--font-mono); font-size: .78em; border: 1px solid rgba(0, 0, 145, .18); /* une pastille courte reste sur une ligne ; une expression longue (condition ternaire, filtre) se replie au lieu de dépasser la largeur de la page */ white-space: pre-wrap; max-width: 100%; overflow-wrap: anywhere; } .chip--missing { background: var(--error-bg); color: var(--error); border-style: dashed; } .chip--value { background: #e9f7ee; color: #1b5e2c; border-color: rgba(24, 117, 60, .25); } /* ========================================================================== LES COMMENTAIRES (annotations d'un bloc). Ils ne vivent pas dans une marge : ils s'affichent DANS la page, sous le bloc qu'ils visent, en bande nettement distincte du texte de l'acte (fond coloré, intitulé en petites capitales, filet pointillé). Un commentaire ne peut donc pas passer inaperçu — ni dans l'éditeur de trame, où on l'écrit, ni dans la rédaction, où le rédacteur le lit. Voir `src/ui/annotations.js`. ========================================================================== */ .annot { margin: 6px 0 12px; padding: 7px 10px 9px; border: 1px dashed var(--border-strong); border-left: 3px solid var(--info); border-radius: var(--radius); background: var(--info-bg, #e8edff); font-family: var(--font-ui); font-size: .82rem; line-height: 1.45; text-align: left; } .annot--redaction { border-left-color: var(--brand); background: var(--brand-soft); } .annot--bare { margin: 0; padding: 0; border: 0; background: none; } .annot__head { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); } .annot__icon { display: inline-flex; color: var(--brand); } .annot__title { font-weight: 700; } .annot__add { display: inline-flex; align-items: center; justify-content: center; height: 20px; padding: 0 6px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--brand); cursor: pointer; font: inherit; font-size: .7rem; } .annot__add:hover { background: var(--brand-soft); } .annot__item { padding: 5px 0 3px; border-top: 1px solid rgba(0, 0, 145, .1); } .annot__item:first-of-type { border-top: 0; } .annot__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .68rem; color: var(--ink-muted); } .annot__meta .fr-badge { font-size: .6rem; } .annot__quote { margin: 4px 0 0; font-style: italic; color: var(--ink-2); } .annot__quote::before { content: "« "; } .annot__quote::after { content: " »"; } .annot__text { margin: 3px 0 0; white-space: pre-wrap; } .annot__actions { display: inline-flex; gap: 2px; } .annot__btn { display: inline-flex; align-items: center; justify-content: center; padding: 1px 3px; border: 0; border-radius: 3px; background: none; color: var(--ink-muted); cursor: pointer; } .annot__btn:hover { color: var(--brand); background: var(--brand-soft); } .annot__btn--danger:hover { color: var(--error); background: var(--error-bg); } .annot-flash { box-shadow: 0 0 0 3px var(--focus) !important; border-radius: 3px; } /* La pastille qui suit une sélection de texte dans la page : « Commenter ». */ .sel-bubble { position: fixed; z-index: 60; display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--brand); font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, .22); } .sel-bubble:hover { background: var(--brand-soft); } /* La fenêtre d'écriture d'un commentaire (voir `noteComposer`). */ .note-quote { margin: 0 0 10px; padding: 6px 10px; border-left: 3px solid var(--border-strong); background: var(--bg-alt); color: var(--ink-2); font-style: italic; border-radius: 0 var(--radius) var(--radius) 0; } .note-quote::before { content: "« "; } .note-quote::after { content: " »"; } .note-context { margin: 0 0 4px; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); } /* Les commentaires dans l'inspecteur : un groupe par bloc visé. */ .cmt-group { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 8px; overflow: hidden; } .cmt-group.is-open { border-color: var(--brand); } .cmt-group__head { display: flex; align-items: center; gap: 6px; padding: 5px 6px; background: var(--bg-alt); } .cmt-group__jump { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 auto; border: 0; background: none; font: inherit; font-size: .8rem; color: var(--ink-2); cursor: pointer; text-align: left; } .cmt-group__jump:hover { color: var(--brand); } .cmt-group__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cmt-group__body { padding: 6px; } .cmt-group__body .note-card { margin-bottom: 6px; } .cmt-group__body .note-card:last-child { margin-bottom: 0; } /* Compteurs cliquables de l'en-tête de l'éditeur de trame. */ .editor__counts { border: 0; background: none; padding: 0; font: inherit; font-size: .78rem; color: var(--ink-muted); cursor: pointer; text-align: left; } .editor__counts:hover { color: var(--brand); text-decoration: underline; } .editor__counts.is-on { color: var(--brand); font-weight: 600; } [contenteditable="true"] { outline: none; min-height: 1em; } [contenteditable="true"]:hover { background: rgba(10, 118, 246, .06); border-radius: 2px; } [contenteditable="true"]:focus { background: rgba(10, 118, 246, .08); box-shadow: 0 0 0 2px var(--focus); border-radius: 2px; } .insert-bar { display: flex; align-items: center; justify-content: center; gap: 6px; opacity: 0; transition: opacity .12s; height: 16px; margin: -4px 0; } .insert-bar:hover, .insert-bar:focus-within { opacity: 1; } .insert-bar .insert-bar__btn { border: 1px dashed var(--border-strong); background: var(--bg); color: var(--brand); border-radius: 999px; font-size: .72rem; padding: 0 10px; line-height: 20px; cursor: pointer; } .insert-bar .insert-bar__btn:hover { background: var(--brand-soft); } /* ========================================================================== LA RÉSERVE ET LE GLISSER-DÉPOSER (éditeur de trame). Le public visé ne programme pas : on ne lui demande pas de choisir un identifiant de champ dans une liste déroulante. On glisse une puce dans le document — ou on la clique (elle s'« arme ») puis on clique dans le texte. Pendant un glisser, `` porte `dnd-actif` : toutes les cibles possibles se signalent d'elles-mêmes, ce qui évite d'avoir à expliquer où lâcher. ========================================================================== */ .reserve { margin-top: 14px; border-top: 1px solid var(--border); } .editor__colhead--sub { position: sticky; top: 0; z-index: 2; background: var(--bg); } .palette { padding: 10px 12px 16px; display: flex; flex-direction: column; gap: 13px; } .palette__groupe { display: flex; flex-direction: column; gap: 6px; } .palette__titre { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); } .palette__aide { font-size: .7rem; line-height: 1.35; color: var(--ink-muted); margin: 0; } .palette__puces { display: flex; flex-wrap: wrap; gap: 5px; } .puce { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 9px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--bg); color: var(--ink-2); font: inherit; font-size: .75rem; line-height: 1.45; cursor: grab; } .puce:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); } .puce:active { cursor: grabbing; } .puce__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16ch; } .puce--neuf { border-style: dashed; color: var(--brand); } /* --- le choix du type d'un champ ------------------------------------------ Une liste de cartes, jamais une liste déroulante : chaque type se reconnaît à son dessin et à son exemple, et se clique d'un seul geste. C'est le réglage le plus fréquent de la création d'une trame ; il ne doit demander aucun vocabulaire technique. */ .typecards { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; } .typecards__sep { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); margin: 7px 0 2px; } .typecard { display: flex; align-items: flex-start; gap: 8px; width: 100%; text-align: left; padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--ink-2); font: inherit; cursor: pointer; } .typecard:hover { border-color: var(--brand); background: var(--brand-soft); } .typecard.is-on { border-color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); } .typecard__ic { flex: 0 0 auto; display: inline-flex; color: var(--ink-muted); margin-top: 1px; } .typecard.is-on .typecard__ic { color: var(--brand); } .typecard__tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .typecard__lb { font-size: .79rem; font-weight: 600; } .typecard__hint { font-size: .68rem; line-height: 1.28; color: var(--ink-muted); } .typecard.is-on .typecard__lb { color: var(--brand); } .typecard__ok { flex: 0 0 auto; color: var(--brand); font-size: .95rem; font-weight: 700; line-height: 1.2; } /* Placer un champ dans le texte, depuis la question elle-même (et non seulement depuis la réserve) : c'est là qu'on y pense. */ .champ__placer { margin-top: 10px; border-top: 1px dashed var(--border); padding-top: 8px; } .champ__placer .fr-row { align-items: center; gap: 8px; } /* La poignée de déplacement. Ce n'est pas la seule prise : le bloc entier se saisit (voir ui/dnd.js) — mais la poignée reste le repère visible, et assez large pour être visée sans y penser. */ .blk__grip { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; min-height: 22px; padding: 0 5px; border-radius: var(--radius); color: var(--ink-muted); font-size: .9rem; line-height: 1; cursor: grab; user-select: none; } .blk__grip:hover { color: var(--brand); background: var(--brand-soft); } .blk__grip:active { cursor: grabbing; } /* Un intitulé d'article ou de division se saisit comme la poignée : on attrape « cet article-là » par son titre. */ .blk__prise-cible { cursor: grab; } .blk__prise-cible:active { cursor: grabbing; } /* Le bandeau qui dit où cliquer quand une puce a été cliquée. */ .editor__arme { display: flex; align-items: center; gap: 8px; margin: 8px 12px 0; padding: 6px 10px; border: 1px solid var(--border); border-left: 3px solid var(--brand); border-radius: var(--radius); background: var(--brand-soft); color: var(--brand); font-size: .8rem; } /* --- pendant le glisser --------------------------------------------------- */ html.dnd-actif { user-select: none; -webkit-user-select: none; cursor: grabbing; } /* La hauteur des barres « + » ne change PAS pendant le glisser : les faire grandir décalerait tout le document sous le pointeur, et l'on déposerait à côté de ce que l'on visait. Seule l'opacité les révèle. */ html.dnd-actif .insert-bar { opacity: .55; } .insert-bar__hint { display: none; font-size: .68rem; color: var(--brand); white-space: nowrap; } html.dnd-actif .insert-bar__hint { display: inline; } html.dnd-actif .blk { outline: 1px dashed var(--border-strong); outline-offset: 2px; } .dnd-source { opacity: .4; } /* Une prise qui répond au doigt (la poignée ⠿) : le contact y démarre un glisser au lieu de faire défiler la page. Voir ui/dnd.js. */ .dnd-prise-doigt { touch-action: none; } /* L'étiquette qui suit le pointeur pendant un glisser : elle dit ce qu'on déplace, et elle est le seul repère dont dispose le doigt (qui ne voit pas le curseur « déplacer » du navigateur). */ .dnd-fantome { position: fixed; z-index: 9999; pointer-events: none; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 11px; border-radius: 999px; background: var(--brand); color: #fff; font-family: var(--font-ui); font-size: .74rem; line-height: 1.5; box-shadow: 0 4px 14px rgba(0, 0, 0, .22); } .dnd-sur { position: relative; } .blk.dnd-sur, .outline__item.dnd-sur { background: var(--brand-soft); box-shadow: inset 0 0 0 2px var(--brand); } .insert-bar.dnd-sur { opacity: 1; background: var(--brand-soft); border-radius: 999px; } [contenteditable="true"].dnd-sur { background: rgba(0, 0, 145, .1); box-shadow: inset 0 0 0 2px var(--brand); } .fcard.dnd-sur { box-shadow: inset 3px 0 0 var(--brand); } /* le trait qui montre l'endroit exact du rangement (avant / après la cible) */ .blk.dnd-avant::before, .blk.dnd-apres::after, .outline__item.dnd-avant::before, .outline__item.dnd-apres::after, .fcard.dnd-avant::before, .fcard.dnd-apres::after { content: ""; position: absolute; left: 0; right: 0; height: 3px; background: var(--brand); border-radius: 2px; z-index: 6; } .blk.dnd-avant::before, .outline__item.dnd-avant::before, .fcard.dnd-avant::before { top: -3px; } .blk.dnd-apres::after, .outline__item.dnd-apres::after, .fcard.dnd-apres::after { bottom: -3px; } .outline__item.dnd-avant::before, .outline__item.dnd-apres::after { left: 2px; right: 2px; } /* « Réglages avancés » d'un champ : là, mais repliés (identifiant technique, conditions d'affichage — le vocabulaire du code, pas celui d'un rédacteur). */ .inspector__plus { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; } .inspector__plus > summary { cursor: pointer; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); } .inspector__plus[open] > summary { margin-bottom: 8px; } /* --- une question du formulaire (onglet « Questions ») -------------------- Repliée, elle tient en une ligne : le nom, le type, et l'on voit d'un coup d'œil tout le formulaire. Dépliée, elle livre ses réglages. Le tout est construit sur
/ : le clavier et les lecteurs d'écran le comprennent sans qu'on ait rien à ajouter. */ .fcard { position: relative; border-bottom: 1px solid var(--border); background: var(--bg); } .fcard__tete { display: flex; align-items: center; gap: 7px; padding: 9px 12px; cursor: pointer; list-style: none; } .fcard__tete::-webkit-details-marker { display: none; } .fcard__tete:hover { background: var(--brand-soft); } .fcard__nom { flex: 1 1 auto; min-width: 0; font-size: .84rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fcard__type { flex: 0 0 auto; font-size: .7rem; color: var(--ink-muted); } .fcard__chev { flex: 0 0 auto; display: inline-flex; color: var(--ink-muted); transform: rotate(-90deg); transition: transform .15s; } .fcard[open] .fcard__chev { transform: rotate(0deg); } .fcard__corps { padding: 2px 12px 14px; } .fcard__pied { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 8px; border-top: 1px dashed var(--border); } .inspector__section { border-bottom: 1px solid var(--border); padding: 12px; } .inspector__section:last-child { border-bottom: 0; } .inspector__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); margin-bottom: 6px; display: block; } .inspector textarea { width: 100%; } .note-card { border: 1px solid var(--border); border-left: 3px solid var(--info); border-radius: var(--radius); padding: 8px; margin-bottom: 8px; background: var(--bg); } .note-card--legal { border-left-color: var(--error); } .note-card--question { border-left-color: var(--warning); } .note-card--watch { border-left-color: var(--success); } .note-card__head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: .75rem; } .rule-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; margin-bottom: 8px; background: var(--bg); } .rule-card--blocking { border-left: 3px solid var(--error); } .rule-card--warning { border-left: 3px solid var(--warning); } .rule-card--info { border-left: 3px solid var(--info); } .expr { font-family: var(--font-mono); font-size: .78rem; background: var(--bg-alt); padding: 6px 8px; border-radius: var(--radius); overflow-x: auto; } /* --------------------------------------- ce que la signature donnera, et les visas L'aperçu d'une fiche de délégation : c'est la seule façon de vérifier l'accord en genre, l'ordre des étages et la série des visas sans rédiger un acte pour voir. Voir src/lib/delegations.js et views/delegations.js. */ .deleg-apercu { border: 1px solid var(--border); border-left: 3px solid var(--brand); border-radius: var(--radius); background: var(--bg); padding: 10px 12px; margin: 8px 0 4px; } .deleg-apercu__l { margin: 0; font-size: .82rem; line-height: 1.45; color: var(--ink-2); } .deleg-apercu__l--nom { font-weight: 600; letter-spacing: .02em; } .deleg-apercu__l--tete { font-weight: 600; } /* Le lien d'une décision, dans l'aperçu : c'est exactement ce que portera l'acte publié (recueil, PDF). */ .deleg-apercu__lien { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; } .deleg-apercu__lien:hover { text-decoration-color: currentColor; } .deleg-lien { color: var(--brand); word-break: break-all; text-decoration: underline; text-underline-offset: 2px; } /* --- les deux décisions d'une délégation ---------------------------------- */ .deleg-decision { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-alt); padding: 12px 14px; } .deleg-decision__tete { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; } .deleg-decision__titre { font-weight: 700; font-size: .92rem; } .deleg-decision__aide { font-size: .8rem; color: var(--ink-muted); line-height: 1.45; } .deleg-decision__corps:not(:empty) { margin-bottom: 4px; } .deleg-decision__state { margin: 6px 0 0; font-size: .8rem; } .deleg-decision__state.is-ok { color: var(--success); } .deleg-decision__state.is-manque { color: var(--warning); } .deleg-decision__intitule { margin: 0; font-size: .86rem; line-height: 1.45; } .deleg-decision__etat > p { margin: 0; } /* ----------------------------------------------------------------- lecture */ .doc { font-family: var(--font-doc); color: #111; font-size: 11pt; line-height: 1.5; } .doc--compact { font-size: 10pt; } .doc-title { font-size: 1.06em; font-weight: 700; text-align: center; margin: 0 0 .9em; } .doc-authority { margin: 0 0 .8em; } .doc-visas { margin: 0 0 .9em; padding-left: 0; list-style: none; } .doc-visas li { text-align: justify; margin-bottom: .25em; } /* Une décision fondant la signature est un LIEN (recueil en ligne ou adresse externe) : souligné dans le document, et couleur d'accent dans le recueil, où il se lit comme un lien de site. Voir src/lib/render.js. */ .doc-visas-link { color: inherit; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 2px; } .doc-visas-link:hover { text-decoration-color: currentColor; } .recueil-acte .doc-visas-link { color: var(--brand); } /* Un lien écrit sous forme d'identifiant ELI, RÉSOLU par le recueil : l'acte cité est ouvert DANS l'instance (voir lib/recueil.js, `resoudreLiensEli`). Quand l'acte cité n'est pas publié ici, la mention reste — mais sans lien : le lecteur voit l'identifiant, et non un lien qui ne mène nulle part. */ .recueil-acte .recueil-lien-eli { color: var(--brand); } .recueil-acte .recueil-lien-eli--hors { color: inherit; text-decoration: none; cursor: help; border-bottom: 1px dotted var(--border-strong); } .doc-recitals { margin: 0 0 .9em; } .doc-recitals p { text-align: justify; margin: 0 0 .4em; } .doc-enact { text-align: center; font-weight: 700; margin: 1em 0; } /* Divisions du texte : Livre, Titre, Chapitre, Section… (voir schema.js). Un échelon plus haut s'entoure d'air et s'écrit plus gros ; chaque échelon se distingue du suivant par la taille et par l'alignement, sans couleur — un acte administratif n'est pas une page de magazine. */ .doc-division { margin: 1.4em 0 1em; } .doc-division--n2 { margin-left: .6em; } .doc-division--n3 { margin-left: 1.2em; } .doc-division--n4, .doc-division--n5, .doc-division--n6 { margin-left: 1.8em; } .doc-division-head { font-weight: 700; margin: 0 0 .5em; } .doc-division--n1 > .doc-division-head { font-size: 1.08em; text-align: center; margin-top: 1.2em; } .doc-division--n2 > .doc-division-head { font-size: 1.02em; } .doc-division--n3 > .doc-division-head { font-size: 1em; } .doc-division--n4 > .doc-division-head, .doc-division--n5 > .doc-division-head { font-size: .98em; font-style: italic; } .doc-division-num { font-weight: 700; } .doc-division-heading { font-weight: 700; } /* En édition (trame comme rédaction), une division se repère à son filet. */ .blk .doc-division, .doc--redaction .doc-division { border-top: 1px solid var(--border); padding-top: .6em; } /* La liste des annexes d'un acte, à la fin du dispositif. */ .doc-annexes { margin: 1.4em 0 .8em; } .doc-annexes-title { font-size: 1em; font-weight: 700; margin: 0 0 .4em; } .doc-annexes-list { margin: 0; padding-left: 1.4em; } .doc-annexes-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; } /* La partie ANNEXÉE : le texte de l'annexe, imprimé à la suite de l'acte qui l'adopte (voir src/lib/annexe-docs.js). À l'impression, elle commence sur une page neuve ; dans l'atelier, où elle est montrée en lecture seule sous le document, un filet et son intitulé la séparent de l'acte. */ .doc-annexe-part { break-before: page; page-break-before: always; margin-top: 18px; } .doc-annexe-part__head { border-top: 1px solid var(--border-strong); padding-top: 8px; margin: 0 0 .9em; } .doc-annexe-part__label { font-size: .72em; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); margin: 0; } .doc-annexe-part__title { font-weight: 700; margin: .12em 0 0; } /* Les deux cartes de l'écran de rédaction : l'acte qui ADOPTE le document (une annexe) et les documents ANNEXÉS à l'acte. Voir src/ui/views/rediger.js. */ .rx-annexe, .rx-annexes { margin-top: 10px; } .rx-annexe__titre { margin: 0 0 6px; font-weight: 700; font-size: .9rem; } .rx-annexes .rx-annexe__ligne { padding: 3px 0; border-top: 1px solid var(--border); } /* Le renvoi d'une fiche vers l'autre acte du couple acte/annexe. */ .rx-annexe__lien { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; } /* Le TEXTE des documents ANNEXÉS, montré en lecture seule sous le document dans l'atelier de rédaction : il suit l'acte dans l'original signé, mais il ne se rédige pas ici — il vit dans son propre acte (voir src/ui/views/rediger.js). */ .rx-annexes-doc { margin-top: 12px; } .rx-annexe-paper__bandeau { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 2px 0; } .rx-annexe-paper__label { font-size: .72em; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); } .rx-annexe-paper__titre { font-weight: 700; font-size: .9rem; } .rx-annexe-paper__note { margin: 2px 2px 8px; } /* La ligne de parcours de l'écran de rédaction — les étapes de l'acte (rédiger, soumettre au circuit, réviser, signer, publier), celle où l'on se trouve mise en avant, et le rappel que l'export n'est pas la fin du chemin. Voir src/ui/views/rediger.js. */ .rx-parcours { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-alt); } .rx-parcours__liste { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } .rx-parcours__etape { display: flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; font-size: .84rem; color: var(--ink-muted); } .rx-parcours__etape + .rx-parcours__etape::before { content: "›"; margin-right: 6px; margin-left: -4px; color: var(--border-strong); } .rx-parcours__puce { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; flex: none; font-size: .72rem; font-weight: 700; border: 1px solid var(--border-strong); color: var(--ink-muted); } .rx-parcours__etape--fait { color: var(--ink); } .rx-parcours__etape--fait .rx-parcours__puce { background: var(--success); border-color: var(--success); color: #fff; } .rx-parcours__etape--fait .rx-parcours__puce::before { content: "✓"; } .rx-parcours__etape--fait .rx-parcours__num { display: none; } .rx-parcours__etape--encours { color: var(--ink); font-weight: 700; background: rgba(0, 0, 145, .07); } .rx-parcours__etape--encours .rx-parcours__puce { background: var(--brand); border-color: var(--brand); color: #fff; } .rx-parcours__note { margin-left: auto; font-size: .78rem; color: var(--ink-muted); } @media (max-width: 720px) { .rx-parcours__note { margin-left: 0; } } .paper--lecture { box-shadow: inset 0 0 0 1px var(--border); } .doc-article { margin-bottom: 1em; } .doc-article-head { font-size: 1em; font-weight: 700; margin: 0 0 .35em; } .doc-article-num { font-weight: 700; } .doc-p { text-align: justify; margin: 0 0 .55em; } /* Blocs déplaçables du document (rédaction, et division en rédaction) : la poignée et les deux flèches sont TOUJOURS là — un peu effacées au repos, nettes dès qu'on survole le bloc. On ne devine pas un geste. */ .mv { position: relative; border-radius: 3px; } .mv:hover { background: rgba(0, 0, 145, .03); } .mv__tools { position: absolute; right: -2px; top: -15px; z-index: 5; display: flex; align-items: center; gap: 1px; padding: 1px; border: 1px solid transparent; border-radius: var(--radius); opacity: .28; transition: opacity .12s, background .12s, border-color .12s; } .mv:hover > .mv__tools, .mv:focus-within > .mv__tools, .mv__tools:hover { opacity: 1; background: var(--bg); border-color: var(--border); } .mv__grip { cursor: grab; user-select: none; padding: 0 3px; line-height: 1; color: var(--ink-muted); font-size: 1rem; } .mv__grip:hover { color: var(--brand); background: var(--brand-soft); border-radius: 3px; } .mv__grip:active { cursor: grabbing; } .mv.dnd-sur { background: var(--brand-soft); box-shadow: inset 0 0 0 2px var(--brand); } .mv.dnd-avant::before, .mv.dnd-apres::after { content: ""; position: absolute; left: 2px; right: 2px; height: 3px; background: var(--brand); border-radius: 2px; z-index: 6; } .mv.dnd-avant::before { top: -3px; } .mv.dnd-apres::after { bottom: -3px; } .doc-list { margin: 0 0 .7em; padding-left: 1.4em; } .doc-list li { text-align: justify; margin-bottom: .25em; } .doc-table-wrap { margin: 0 0 .8em; overflow-x: auto; } .doc-table-caption { font-size: .9em; margin: 0 0 .3em; font-style: italic; } .doc-table { border-collapse: collapse; width: 100%; font-size: .92em; } .doc-table th, .doc-table td { border: 1px solid #8993A5; padding: 3px 6px; text-align: left; vertical-align: top; } .doc-table th { background: #f0f0f0; } /* --- Paramètres propres aux blocs --------------------------------------- Ce que règle l'onglet « Ce bloc » de l'éditeur de trame : retrait et encadré d'un paragraphe, filets d'un tableau, légende au-dessous, etc. (voir `paramsBloc`, src/lib/schema.js — et les mêmes règles dans `documentCss`, src/lib/export.js, pour le HTML autonome et le Word.) Le sélecteur part de `.doc` : un réglage de BLOC est un choix explicite, il doit l'emporter sur la feuille de style — dont les règles sont plus spécifiques à l'écran (`[data-sheet="…"] .doc-table th`). Les couleurs viennent des variables de la feuille, avec une valeur de repli. */ .doc .doc-p--boxed { border: 1px solid var(--doc-rule, #8993A5); padding: .5em .7em; } .doc .doc-p--indent-first { text-indent: 1.5em; } .doc .doc-p--indent-none { text-indent: 0; } .doc .doc-p--indent-all { margin-left: 1.5em; } .doc .doc-recitals--inline p { margin: 0; } .doc .doc-table--rows th, .doc .doc-table--rows td { border: 0; border-bottom: 1px solid var(--doc-grid, #8993A5); } .doc .doc-table--rows th { background: transparent; border-bottom: 2px solid var(--doc-rule, #8993A5); } .doc .doc-table--zebra tbody tr:nth-child(even) { background: var(--doc-neutral, #f0f0f0); } .doc .doc-table--center th, .doc .doc-table--center td { text-align: center; } .doc .doc-table--right th, .doc .doc-table--right td { text-align: right; } .doc-table-wrap > .doc-table + .doc-table-caption { margin: .3em 0 0; } .doc-signature { margin-top: 1.6em; display: flex; justify-content: space-between; align-items: flex-end; gap: 1em; } .doc-signature-place { margin: 0; } .doc-signature-block { text-align: center; min-width: 40%; } .doc-signature-role, .doc-signature-name { margin: 0; } .doc-signature-role { white-space: pre-line; } .doc-mention { text-align: justify; font-size: .92em; margin: 1em 0 0; color: #222; } /* --------------------------------------------------- modifications apparentes Version consolidée : ce qui a été ajouté, ce qui a été supprimé. Les couleurs sont douces pour rester lisibles à l'impression en noir et blanc (le fond clair et les bordures restent visibles, et le texte supprimé est barré). */ .doc-quote { margin: .3em 0 .7em; padding: 0 0 0 14px; border-left: 2px solid var(--border-strong); } .doc-quote::before { content: "«\00a0"; } .doc-quote::after { content: "\00a0»"; } .doc-ins { background: rgba(24, 117, 60, .10); box-shadow: inset 0 0 0 1px rgba(24, 117, 60, .35); } .doc-del { background: rgba(206, 5, 0, .07); box-shadow: inset 0 0 0 1px rgba(206, 5, 0, .30); } .doc-del .doc-p, .doc-del p, .doc-del li, .doc-del .doc-article-head { text-decoration: line-through; color: var(--ink-muted); } .doc-mod { background: rgba(179, 64, 0, .05); } .doc-consolidation { border: 1px solid #d9c98b; background: #fffdf3; padding: 10px 12px; margin: 0 0 1.2em; font-family: var(--font-ui); font-size: .78rem; line-height: 1.4; } .doc-consolidation__title { margin: 0 0 4px; font-weight: 700; } .doc-consolidation__notice, .doc-consolidation__meta { margin: 0 0 4px; } .doc-consolidation__legend { margin: 6px 0 0; display: flex; gap: 8px; flex-wrap: wrap; } .doc-consolidation__legend span { padding: 1px 6px; font-size: .72rem; } .doc-consolidation__hint { margin: 6px 0 0; } /* Suivi des modifications NON affiché : l'article porte seulement la mention de l'acte qui l'a modifié, en italique sous son intitulé. */ .doc-amend-mention { font-style: italic; font-size: .92em; color: var(--ink-muted); margin: -.15em 0 .55em; } .doc-trail { margin-top: 2.2em; border-top: 1px solid var(--border-strong); padding-top: 12px; font-family: var(--font-ui); } .doc-trail__title { font-size: .9rem; margin: 0 0 8px; } .doc-trail__entry { margin: .7em 0 .3em; font-weight: 700; font-size: .85rem; } .doc-trail__table { font-size: .76rem; } /* En-tête et pied d'une charte graphique (feuille de style). Les valeurs précises — hauteur du logo, filets, couleurs — viennent de la feuille, dans `#sheet-css` (voir lib/styles.js). Ici, seulement la charpente, pour que le document reste lisible même sans charte. */ .doc-sheet-header { display: flex; gap: 14px; align-items: center; margin: 0 0 14px; } .doc-sheet-logo { height: 42px; width: auto; max-width: 45%; flex: none; } .doc-sheet-headtext { margin: 0; font-size: .86em; color: var(--ink-muted); } .doc-sheet-footer { margin-top: 1.6em; padding-top: 8px; font-size: .78em; color: var(--ink-muted); text-align: center; } /* ------------------------------------------------------- feuilles de style L'écran « Feuilles de style » : la liste des chartes à gauche, les réglages, et l'aperçu du document habillé — l'aperçu colle au défilement, pour qu'un changement de police ou de filet se voie sans quitter le champ. Deux modes, deux dispositions (mêmes colonnes) : — « Réglages » : liste | tous les réglages | aperçu ; — « Édition directe » : liste | aperçu | réglages de l'élément cliqué. Dans les deux cas l'aperçu reste le vrai rendu du document. */ .styles-grid { display: grid; grid-template-columns: minmax(220px, 260px) minmax(0, 1fr); gap: 18px; align-items: start; } /* Un enfant de grille a `min-width: auto` : sans cette remise à zéro, la colonne s'élargit au minimum du contenu et déborde — visible sur un volet étroit. */ .styles-grid > * { min-width: 0; } /* En dessous de 1440 px, il n'y a que deux colonnes : la liste des feuilles à gauche, tout le reste empilé dans la seconde colonne (l'aperçu, puis les réglages — ou les réglages, puis l'aperçu). */ .styles-preview, .styles-inspector, .styles-editor { grid-column: 2; } .styles-editor { min-width: 0; } @media (min-width: 1440px) { /* Trois colonnes : l'ordre du document décide — liste | réglages | aperçu en vue « Réglages », liste | aperçu | réglages en édition directe. */ .styles-grid { grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) minmax(360px, 440px); } .styles-preview, .styles-inspector, .styles-editor { grid-column: auto; } .styles-grid > .styles-preview { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; } } @media (max-width: 1080px) { .styles-grid { grid-template-columns: 1fr; } .styles-preview, .styles-inspector, .styles-editor { grid-column: 1; } } /* les réglages, en deux colonnes de champs */ /* les réglages, en colonnes de champs — `min(…, 100%)` évite qu'une colonne plus large que son conteneur (volet étroit) ne fasse déborder la page */ .styles-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 0 14px; } .styles-fields .fr-field { margin-bottom: 12px; } .styles-field--wide { grid-column: 1 / -1; } .styles-group-title { font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); margin: 16px 0 6px; } .styles-group-title:first-of-type { margin-top: 10px; } /* bascule Réglages / Édition directe */ .styles-tabs { display: inline-flex; padding: 2px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); } .styles-tab { border: 0; background: none; font: inherit; font-size: .82rem; padding: 5px 13px; border-radius: 999px; cursor: pointer; color: var(--ink-2); } .styles-tab:hover { background: var(--bg-alt); } .styles-tab.is-on { background: var(--brand); color: #fff; font-weight: 600; } [data-theme="dark"] .styles-tab.is-on { color: #101219; } /* modèles de départ */ .styles-presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 8px; } .styles-preset { text-align: left; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); padding: 9px 11px; cursor: pointer; font: inherit; color: var(--ink); } .styles-preset:hover { border-color: var(--brand); background: var(--brand-soft); } .styles-preset__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; } .styles-preset__name { font-weight: 600; font-size: .86rem; } .styles-preset__badge { flex: none; font-size: .6rem; text-transform: uppercase; letter-spacing: .04em; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border); color: var(--ink-muted); } .styles-preset__badge--warning { border-color: var(--warning); color: var(--warning); background: var(--warning-bg); } .styles-preset__hint { display: block; font-size: .74rem; color: var(--ink-muted); margin-top: 2px; } .styles-preset:hover .styles-preset__hint { color: var(--ink-2); } .styles-sep { border: 0; border-top: 1px solid var(--border); margin: 14px 0; } .styles-identity > summary { cursor: pointer; font-size: .85rem; color: var(--brand); margin-bottom: 8px; } /* éditeur direct : cliquer l'élément du document */ .styles-pickbar { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; } .styles-chip { border: 1px solid var(--border); background: var(--bg); border-radius: 999px; font: inherit; font-size: .76rem; padding: 3px 10px; cursor: pointer; color: var(--ink-2); } .styles-chip:hover { border-color: var(--brand); color: var(--brand); } .styles-chip.is-on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); font-weight: 600; } .styles-pickstatus { margin: 0 0 10px; } .styles-pickable .styles-pick-hover { outline: 2px dashed var(--brand); outline-offset: 2px; background: rgba(0, 0, 145, .04); } .styles-pickable .styles-pick-on { outline: 2px solid var(--focus); outline-offset: 2px; } .styles-pickable .styles-pick-on.styles-pick-hover { outline-style: solid; } .paper-box--sheet { padding: 16px; } .styles-sheet { display: block; width: 100%; text-align: left; border: 1px solid var(--border); background: var(--bg); border-radius: var(--radius); padding: 9px 11px; margin-bottom: 7px; cursor: pointer; } .styles-sheet:hover { border-color: var(--border-strong); } .styles-sheet.is-on { border-color: var(--brand); box-shadow: inset 3px 0 0 var(--brand); } .styles-sheet__label { display: block; font-weight: 600; font-size: .88rem; } .styles-sheet__sub { display: block; font-size: .74rem; color: var(--ink-muted); margin-top: 2px; } .styles-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--border-strong); vertical-align: -2px; margin-right: 5px; } .styles-color-row { display: flex; align-items: center; gap: 8px; } .styles-color-row input[type="color"] { width: 42px; height: 34px; padding: 2px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: #fff; } /* les côtés d'un encadré : quatre pastilles à basculer (voir `styleField`) */ .styles-sides { display: flex; flex-wrap: wrap; gap: 6px; } .styles-side { border: 1px solid var(--border); background: var(--bg); border-radius: var(--radius); font: inherit; font-size: .78rem; padding: 5px 11px; cursor: pointer; color: var(--ink-muted); } .styles-side:hover { border-color: var(--brand); color: var(--brand); } .styles-side.is-on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); font-weight: 600; } .styles-font { display: grid; gap: 6px; } .styles-font__custom { display: grid; gap: 2px; } /* ---------------------------------------------------------- modifier un acte Le document est édité en place (colonne de gauche) ; les modifications relevées et les deux documents produits (acte modificatif / version consolidée) sont dans la colonne de droite — voir `redaction-grid`. */ .paper-box { background: var(--bg-alt); padding: 16px; border-radius: var(--radius); overflow: auto; } /* Barre d'options d'affichage d'un document (ex. suivi des modifications de la version consolidée), au-dessus de la feuille. */ .doc-optbar { display: flex; flex-direction: column; gap: 2px; margin: 0 0 10px; } .fr-card--soft { background: var(--bg-alt); } .fr-table--small { font-size: .82rem; } /* ---------------------- modifier un acte : édition directe du document Le dispositif se réécrit dans la page : chaque passage éditable est marqué quand il s'écarte du texte publié, et chaque article porte ses outils (abroger / insérer) qui n'apparaissent qu'au survol. */ .amend-region { border-radius: 2px; min-height: 1.1em; transition: background .12s; } .amend-region:hover { background: rgba(10, 118, 246, .05); box-shadow: inset 0 -1px 0 rgba(10, 118, 246, .35); } .amend-region:focus { background: rgba(10, 118, 246, .07); box-shadow: 0 0 0 2px var(--focus); } .amend-region--inline { display: inline; } .amend-region--changed { background: rgba(179, 64, 0, .08); box-shadow: inset 3px 0 0 var(--warning); padding-left: 4px; } .amend-region--changed:hover { background: rgba(179, 64, 0, .12); } .amend-region--changed:focus { box-shadow: inset 3px 0 0 var(--warning), 0 0 0 2px var(--focus); } .amend-article { position: relative; } .amend-article--removed { opacity: .5; } .amend-article--removed .doc-p, .amend-article--removed .doc-list, .amend-article--removed .doc-article-head { text-decoration: line-through; } .amend-tools { float: right; display: none; gap: 4px; margin-left: 8px; font-family: var(--font-ui); font-weight: 400; } .amend-article:hover .amend-tools { display: inline-flex; } .amend-tool { border: 1px solid var(--border-strong); background: var(--bg); color: var(--brand); border-radius: 999px; font-size: .7rem; line-height: 18px; padding: 0 9px; cursor: pointer; font-family: var(--font-ui); } .amend-tool:hover { background: var(--brand-soft); } .amend-tool--demo { border: 1px dashed var(--border-strong); cursor: default; margin: 0 2px; } .amend-removed-note { font-family: var(--font-ui); font-size: .78rem; color: var(--ink-muted); margin: 4px 0 0; } .amend-article--inserted { border: 1px dashed rgba(24, 117, 60, .55); background: rgba(24, 117, 60, .05); border-radius: var(--radius); padding: 8px 10px 4px; margin-bottom: 1em; } .amend-article--inserted .doc-article-head { color: #14622f; } .amend-ins__block { position: relative; } .amend-ins__tools { float: right; display: none; } .amend-ins__block:hover .amend-ins__tools { display: inline-flex; } .amend-ins__actions { display: flex; gap: 6px; margin: 6px 0 2px; font-family: var(--font-ui); } .amend-append { text-align: center; margin: 14px 0 4px; } /* Structure du texte : chaque bloc — ou chaque ligne — porte ses outils. Un paragraphe les montre au survol, à droite de sa première ligne ; une liste ou un tableau, sous lui ; le tableau ajoute une colonne d'outils, qui n'appar- tient pas au texte (elle disparaît à l'impression et de l'aperçu). */ .amend-block { position: relative; } .amend-block__tools { position: absolute; right: 0; top: -2px; display: none; gap: 3px; } .amend-block:hover > .amend-block__tools { display: inline-flex; } .amend-blockgroup { position: relative; } .amend-blockbar { display: flex; gap: 5px; flex-wrap: wrap; font-family: var(--font-ui); margin: 2px 0 10px; opacity: .5; } .amend-blockbar:hover, .amend-block:hover .amend-blockbar { opacity: 1; } .doc-list li:hover > .amend-line__tools { display: inline-flex; } .amend-line__tools { float: right; display: none; gap: 3px; margin-left: 6px; } .amend-th__tools, .amend-td__tools { border: 1px dashed var(--border-strong); background: none; width: 1%; white-space: nowrap; text-align: right; } .amend-th__tools { color: var(--ink-muted); font-size: .7rem; } .amend-td__tools .amend-tool { padding: 0 6px; margin-left: 3px; } /* --- un TABLEAU édité en place (éditeur de trame) ------------------------ Le tableau de l'aperçu est le formulaire : chaque case se réécrit, et une gouttière d'outils — jamais imprimée — porte les gestes. Même dispositif que l'éditeur de modification (`.amend-*-tools`, ci-dessus), avec ses propres classes pour que les deux écrans restent libres d'évoluer séparément. */ .tbl-tools-td { border: 1px dashed var(--border-strong); background: none; width: 1%; white-space: nowrap; text-align: right; } .tbl-tools { display: inline-flex; gap: 1px; margin-left: 4px; opacity: 0; transition: opacity .12s; vertical-align: middle; } th:hover > .tbl-tools, td:hover > .tbl-tools, .tbl-tools:focus-within { opacity: 1; } .tbl__geste { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 1px solid transparent; border-radius: var(--radius); background: none; color: var(--ink-muted); cursor: pointer; font-family: var(--font-ui); } .tbl__geste:hover { color: var(--brand); background: var(--brand-soft); border-color: var(--border); } .tbl__bar { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; font-family: var(--font-ui); opacity: .55; transition: opacity .12s; } .doc-table-wrap:hover > .tbl__bar, .tbl__bar:focus-within { opacity: 1; } .tbl__btn { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border: 1px dashed var(--border-strong); border-radius: 999px; background: none; color: var(--brand); font: inherit; font-size: .72rem; cursor: pointer; } .tbl__btn:hover { background: var(--brand-soft); } .tbl__hint { font-size: .7rem; color: var(--ink-muted); } /* La formule d'un considérant, montrée par l'éditeur devant chaque élément : elle n'est pas saisie là (elle appartient au bloc), elle s'annonce. */ .doc-recitals__formule, .doc-recitals__fin { color: var(--ink-muted); } /* --- la GRILLE d'un tableau, dans l'inspecteur --------------------------- */ .tbl-edit { display: grid; gap: 4px; align-items: center; margin-top: 4px; } .tbl-edit__coin, .tbl-edit__num { font-size: .7rem; color: var(--ink-muted); font-family: var(--font-ui); padding-right: 2px; text-align: right; } .tbl-edit__coin { font-weight: 700; } .tbl-edit__entete { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .tbl-edit__case { min-width: 0; font-size: .8rem; padding: 3px 5px; } .tbl-edit__outils { display: inline-flex; gap: 1px; justify-content: flex-end; } .tbl-edit__pied { display: flex; } .tbl-edit__geste { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; justify-self: start; border: 1px dashed var(--border-strong); border-radius: 999px; background: none; color: var(--brand); font: inherit; font-size: .7rem; cursor: pointer; } .tbl-edit__geste:hover { background: var(--brand-soft); } .amend-num { border: 1px solid var(--border-strong); background: var(--bg); color: var(--brand); border-radius: 999px; font-size: .66rem; line-height: 16px; padding: 0 7px; margin: 0 7px 0 0; cursor: pointer; font-family: var(--font-ui); font-weight: 400; vertical-align: middle; } .amend-num:hover { background: var(--brand-soft); } .amend-article:hover .amend-num { background: var(--brand-soft); } .mod-preview { background: var(--bg-alt); } .mod-preview--full { display: flex; justify-content: center; } .mod-preview--full .paper { width: 21cm; box-shadow: none; } .mod-preview__opt { margin: 0 0 12px; } .mod-col--doc { min-width: 0; } /* récapitulatif des modifications (colonne étroite : liste, pas tableau) */ .mod-changes { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; } .mod-change { border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; background: var(--bg); } .mod-change__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .mod-change__article { font-weight: 700; } .mod-change__action { font-size: .8rem; color: var(--ink-muted); flex: 1 1 auto; } .mod-change__detail { margin: 4px 0 0; font-size: .82rem; color: var(--ink-muted); /* deux lignes au plus : le détail complet s'affiche dans l'aperçu */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mod-hist--current { background: var(--brand-soft); } .doc-notes { margin-top: 2em; border-top: 1px dashed var(--border-strong); padding-top: 10px; font-family: var(--font-ui); font-size: .8rem; } .doc-notes__title { font-size: .85rem; margin-bottom: 6px; } .doc-notes__list { list-style: none; padding: 0; margin: 0; } .doc-notes__item { display: flex; gap: 6px; margin-bottom: 4px; } .doc-notes__kind { font-size: .68rem; text-transform: uppercase; color: var(--ink-muted); flex: none; min-width: 80px; } .doc-notes__quote { color: var(--ink-2); font-style: italic; flex: none; max-width: 40%; } .doc-notes__author { color: var(--ink-muted); } /* impression L'aperçu de l'application est déjà un papier A4 (21 × 29,7 cm, marges de 2 cm / 1,8 cm : voir `src/lib/paper.js`). À l'impression (Ctrl+P, ou « Imprimer / PDF » depuis l'export), on ne peut pas déléguer les marges au bloc : c'est `@page` qui porte la page A4, et le papier se contente de remplir la surface imprimable. Les nombres sont ceux de `paper.js`. */ @media print { body { background: #fff; } .app-header, .app-nav, .no-print { display: none !important; } /* L'éditeur en place ne doit pas imprimer ses outils ni ses surlignages. */ .amend-tools, .amend-append, .amend-ins__actions, .amend-ins__tools { display: none !important; } .amend-num, .amend-blockbar, .amend-block__tools, .amend-line__tools, .amend-th__tools, .amend-td__tools { display: none !important; } /* Les commandes du tableau de l'aperçu (gouttière, barre de gestes) ne sont pas de l'acte : elles ne s'impriment jamais. */ .tbl-tools, .tbl-tools-td, .tbl__bar { display: none !important; } .amend-region--changed { background: none !important; box-shadow: none !important; padding-left: 0 !important; } .amend-article--inserted { border: 0 !important; background: none !important; padding: 0 !important; } .paper { box-shadow: none; width: auto; min-height: 0; padding: 0; } @page { size: A4 portrait; margin: 20mm 18mm; } .doc-title, .doc-article-head, .doc-enact, .doc-signature, .doc-consolidation, .doc-trail__entry, .doc-amend-mention { break-after: avoid; page-break-after: avoid; } .doc-title, .doc-signature, .doc-consolidation, .doc-trail__entry, .doc-table-caption, .doc-amend-mention { break-inside: avoid; page-break-inside: avoid; } tr { break-inside: avoid; page-break-inside: avoid; } .doc-p, .doc-list li, .doc-mention { orphans: 2; widows: 2; } .doc-trail__table thead { display: table-header-group; } } /* mode étroit : un seul panneau à la fois, sélectionné par onglets */ .editor--narrow .editor__col { display: none; max-height: none; border: 0; } .editor--narrow .editor__col.is-panel { display: flex; } .editor--narrow .canvas { padding: 12px 8px 40px; } .editor--narrow .editor__colhead { display: none; } /* -------------------------------------------------------------- responsive */ @media (max-width: 1100px) { .editor { grid-template-columns: minmax(0, 1fr); } .editor__col--left, .editor__col--right { border: 0; border-top: 1px solid var(--border); max-height: 320px; } .paper { width: 100%; padding: 18px; min-height: 0; } } @media (max-width: 760px) { .app-body { flex-direction: column; } .app-nav { width: auto; flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--border); padding: 8px; } .app-nav__group { display: none; } .app-nav__item { width: auto; white-space: nowrap; } .app-main { padding: 12px; } /* En-tête compact : la devise et le nom de la structure passent à la trappe, seuls le sigle et le logo restent (la structure est rappelée dans la page). */ .app-brand__sub, .app-org__name { display: none; } .app-org { padding: 3px; } } @media (max-width: 900px) { .rediger-grid { grid-template-columns: minmax(0, 1fr); } .page-head__actions { width: 100%; flex-wrap: wrap; align-items: stretch; } .page-head__actions .fr-field { flex: 1 1 160px; } .page-head__actions .fr-btn { flex: 1 1 auto; justify-content: center; } } /* ========================================================================== Guide d'utilisation (wiki). Public visé : agents peu à l'aise avec l'informatique — texte plus grand, étapes numérotées, encadrés lisibles. ========================================================================== */ .help-link { display: inline-flex; align-items: center; gap: 6px; flex: none; background: none; border: 0; padding: 4px 6px; border-radius: var(--radius); color: var(--brand); font: inherit; font-size: .85rem; cursor: pointer; } .help-link:hover { background: var(--brand-soft); } .welcome { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; max-width: none; margin-bottom: 16px; border-left: 4px solid var(--brand); } .welcome__text { flex: 1 1 320px; } .welcome__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .guide { max-width: 900px; } .guide__hero { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 18px; } .guide__hero-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; } .guide__brand { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); } .guide__brand .app-mark { color: var(--brand); } .guide__title { font-size: 1.7rem; margin-bottom: 6px; } .guide__sub { color: var(--ink-2); margin-bottom: 8px; max-width: 60ch; } .guide__h2 { margin: 26px 0 12px; } .guide__searchbox { margin-bottom: 18px; } .guide__search { width: 100%; max-width: 460px; font-size: 1rem; padding: 10px 12px; } .guide__cards { display: grid; gap: 10px; } .guide__paths { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: 8px; } .gpath { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; } .gpath__title { margin: 0 0 2px; font-size: 1.05rem; } .gpath__hint { color: var(--ink-muted); font-size: .85rem; margin: 0 0 10px; } .gpath__links { display: flex; flex-direction: column; gap: 4px; } .gpath__link { text-align: left; background: none; border: 0; padding: 6px 8px; border-radius: var(--radius); color: var(--brand); font: inherit; font-size: .92rem; cursor: pointer; display: flex; gap: 8px; align-items: baseline; } .gpath__link::before { content: "→"; color: var(--ink-muted); flex: none; } .gpath__link:hover { background: var(--brand-soft); } .gcard { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; } .gcard--link { cursor: pointer; } .gcard--link:hover { border-color: var(--brand); background: #fcfcff; } .gcard__row { display: flex; gap: 14px; align-items: flex-start; } .gcard__num { flex: none; width: 30px; height: 30px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; } .gcard__text { flex: 1 1 auto; min-width: 0; } .gcard__title { margin: 0 0 2px; font-size: 1.05rem; } .gcard__sub { margin: 0; color: var(--ink-2); font-size: .92rem; } .gcard__tags { display: flex; gap: 8px; align-items: center; margin-top: 6px; } .gcard__go { color: var(--ink-muted); flex: none; } .gcard--steps { margin: 14px 0; } .gcard--steps .gcard__title { margin-bottom: 10px; } .gchip { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .72rem; font-weight: 600; background: var(--bg-contrast); color: var(--ink-2); } .gchip--admin { background: var(--info-bg); color: var(--info); } .gchapter__head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .gchapter__meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; } .gcount { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--brand); } .gtime { font-size: .82rem; color: var(--ink-muted); } .gchapter__title { font-size: 1.55rem; margin-bottom: 6px; } .gchapter__lead { color: var(--ink-2); font-size: 1rem; margin-bottom: 18px; } .gchapter__body { font-size: 1.02rem; line-height: 1.65; } .gtext { max-width: 68ch; } .glist { max-width: 68ch; padding-left: 22px; margin: 0 0 14px; } .glist li { margin-bottom: 6px; } .gkbd { background: var(--bg-contrast); border-radius: 3px; padding: 1px 5px; font-size: .85em; } .gsteps { list-style: none; counter-reset: gstep; margin: 16px 0; padding: 0; max-width: 70ch; } .gstep { counter-increment: gstep; display: flex; gap: 12px; padding: 0 0 16px; position: relative; } .gstep::before { content: counter(gstep); flex: none; width: 30px; height: 30px; border-radius: 999px; background: var(--brand); color: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .gstep__text { font-weight: 600; } .gstep__detail { color: var(--ink-2); font-weight: 400; font-size: .92rem; margin-top: 2px; } .gsteps--compact .gstep { padding-bottom: 8px; } .gnote { border-radius: var(--radius); padding: 12px 14px; margin: 16px 0; border-left: 4px solid var(--info); background: var(--info-bg); } .gnote--warn { border-color: var(--warning); background: var(--warning-bg); } .gnote--ok { border-color: var(--success); background: #e8f6ec; } .gnote__title { display: flex; align-items: center; gap: 8px; font-size: .98rem; margin: 0 0 4px; } .gnote p { margin: 0; } .gterms { margin: 12px 0 18px; max-width: 70ch; } .gterms__term { font-weight: 700; margin-top: 10px; } .gterms__def { margin: 2px 0 0 0; color: var(--ink-2); } .gtable { width: 100%; border-collapse: collapse; font-size: .92rem; } .gtable th, .gtable td { border: 1px solid var(--border); padding: 8px 10px; text-align: left; vertical-align: top; } .gtable th { background: var(--bg-alt); } .gfaq { margin: 14px 0; } .gfaq__item { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 8px; background: var(--bg); } .gfaq__q { cursor: pointer; padding: 12px 14px; font-weight: 600; list-style: none; } .gfaq__q::marker { content: ""; } .gfaq__q::before { content: "+"; display: inline-block; width: 18px; color: var(--brand); font-weight: 700; } .gfaq__item[open] .gfaq__q::before { content: "–"; } .gfaq__a { padding: 0 14px 12px 32px; margin: 0; color: var(--ink-2); } .gshot { margin: 18px 0; } .gshot__frame { position: relative; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg); } .gshot__frame img { display: block; width: 100%; height: auto; } .gshot__box { position: absolute; transform: translate(-50%, -50%); border: 2px dashed var(--error); border-radius: 4px; background: rgba(206, 5, 0, .06); pointer-events: none; } .gshot__mark { position: absolute; transform: translate(-50%, -50%); width: 24px; height: 24px; border-radius: 999px; background: var(--error); color: #fff; font-weight: 700; font-size: .78rem; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.35); border: 2px solid #fff; } .gshot__pending { padding: 40px; text-align: center; color: var(--ink-muted); background: var(--bg-alt); } .gshot__caption { font-size: .88rem; color: var(--ink-muted); margin: 6px 0 0; } .gshot__legend { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 4px; } .gshot__legend li { display: flex; gap: 8px; align-items: baseline; font-size: .92rem; color: var(--ink-2); } .gshot__num { flex: none; width: 22px; height: 22px; border-radius: 999px; background: var(--error); color: #fff; font-size: .75rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } /* schéma « message électronique » (illustration, pas une capture) */ .gmail { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin: 16px 0; background: var(--bg); max-width: 640px; } .gmail__bar { background: var(--bg-contrast); padding: 8px 14px; font-weight: 600; font-size: .92rem; border-bottom: 1px solid var(--border); } .gmail__body { padding: 10px 14px 14px; } .gmail__row { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-bottom: 1px dashed var(--border); } .gmail__row:last-child { border-bottom: 0; } .gmail__label { flex: none; width: 110px; color: var(--ink-muted); font-size: .85rem; padding-top: 3px; } .gmail__value { flex: 1 1 auto; min-width: 0; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 3px; padding: 6px 8px; font-size: .9rem; } .gmail__attach { display: inline-flex; align-items: center; gap: 8px; background: var(--brand-soft); color: var(--brand); border-radius: 999px; padding: 5px 12px; font-size: .85rem; font-weight: 600; } .gmail__send { background: var(--brand); color: #fff; border-radius: var(--radius); padding: 7px 18px; font-size: .9rem; font-weight: 600; } .gcontact { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin: 18px 0; } .gcontact__title { display: flex; align-items: center; gap: 8px; font-size: 1.02rem; margin: 0 0 6px; } .gcontact p { margin: 0 0 4px; } .gnext { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; margin: 22px 0 6px; } .gnav { display: flex; align-items: center; gap: 10px; margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--border); flex-wrap: wrap; } .gnav__hint { width: 100%; margin: 0 0 8px; } .gdot { display: inline-block; width: 12px; height: 12px; border-radius: 999px; margin-right: 8px; vertical-align: baseline; } .gdot--ok { background: var(--success); } .gdot--ko { background: var(--error); } .gdot--warn { background: var(--warning); } @media (max-width: 760px) { .guide { max-width: none; } .guide__hero { padding: 16px; } .guide__title { font-size: 1.4rem; } .gchapter__title { font-size: 1.3rem; } .gmail__label { width: 84px; } .gcard__row { gap: 10px; } } /* impression du guide */ @media print { .guide__hero-actions, .guide__searchbox, .gchapter__head, .gnav, .gnext, .help-link { display: none !important; } .gcard--link { border-color: var(--border); } .gfaq__item { page-break-inside: avoid; } .gshot { page-break-inside: avoid; } } /* ========================================================================== Rédaction en place (WYSIWYG). Le document EST le formulaire : les zones de texte sont éditables et les champs sont des pastilles cliquables. Ce qui a été réécrit par rapport à la trame est marqué (`.rw-region--ecart`) — c'est le même signal que celui vu par les administrateurs dans le registre et la fiche de l'acte. ========================================================================== */ .redaction-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 16px; align-items: start; } .redaction-hint { padding: 10px 12px; } .redaction-entity .fr-select { width: auto; max-width: 280px; } .paper--edit { padding: var(--paper-pad, 1.7cm 1.5cm); } /* Sur un écran étroit, l'atelier ne peut pas garder les marges de la page A4 : à elles seules, elles mangeraient la moitié de la largeur et ne laisseraient qu'une colonne illisible. La mise en page de la page (les marges réglées dans la charte) reste celle de l'impression et de l'export ; l'atelier, lui, s'adapte à l'écran. */ @media (max-width: 1100px) { .paper--edit { padding: 18px; } } /* zone de texte éditable */ .rw-region { outline: none; border-radius: 2px; min-height: 1.1em; } .rw-inline { display: inline; } .rw-region:hover { background: rgba(10, 118, 246, .05); box-shadow: inset 0 -1px 0 rgba(10, 118, 246, .35); } .rw-region:focus { background: rgba(10, 118, 246, .07); box-shadow: 0 0 0 2px var(--focus); } .rw-region--ecart { background: rgba(179, 64, 0, .06); box-shadow: inset 3px 0 0 var(--warning); } .rw-region--ecart:hover { background: rgba(179, 64, 0, .10); } .rw-region--ecart:focus { box-shadow: inset 3px 0 0 var(--warning), 0 0 0 2px var(--focus); } /* pastille de champ */ .rw-tok { display: inline; padding: 0 3px; border-radius: 3px; cursor: pointer; background: var(--brand-soft); color: var(--brand); box-shadow: inset 0 -1px 0 rgba(0, 0, 145, .35); white-space: pre-wrap; overflow-wrap: anywhere; } .rw-tok:hover { background: #dfe3fa; } .rw-tok--ref { background: #eef1f8; color: #3a4463; box-shadow: inset 0 -1px 0 rgba(58, 68, 99, .35); } .rw-tok--empty { background: #fff4d6; color: #7a5000; box-shadow: inset 0 0 0 1px #e0a800; } .rw-tok--empty::before { content: "✎ "; font-family: var(--font-ui); } .rw-tok__hint { font-family: var(--font-ui); font-size: .72em; letter-spacing: .01em; } .rw-tok--flash { animation: rwflash 1.4s ease-out; } @keyframes rwflash { 0%, 100% { box-shadow: inset 0 -1px 0 rgba(0, 0, 145, .35); } 25% { box-shadow: 0 0 0 4px rgba(224, 168, 0, .55); } } .rw-hint-inline { font-family: var(--font-ui); font-size: .78em; color: var(--ink-muted); font-style: italic; } .rw-tagmini { display: inline-block; background: #fff4d6; border: 1px solid #e0a800; border-radius: 3px; padding: 0 4px; font-size: .74rem; } /* bulle d'édition d'un champ */ .rw-pop { position: fixed; z-index: 300; width: min(340px, 92vw); background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: 0 10px 28px rgba(0, 0, 0, .18); font-family: var(--font-ui); } .rw-pop__head { padding: 10px 12px 7px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; } .rw-pop__title { font-weight: 700; font-size: .9rem; } .rw-pop__body { padding: 12px; } .rw-pop__value { background: var(--bg-alt); border-radius: var(--radius); padding: 6px 8px; font-size: .85rem; margin: 0 0 8px; } .rw-pop__foot { padding: 10px 12px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 6px; flex-wrap: wrap; } /* panneau de droite */ .rx-group { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); margin: 12px 0 6px; } .rx-field { border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; margin-bottom: 8px; background: var(--bg); } .rx-field--empty { border-left: 3px solid var(--warning); } .rx-field__head { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; } .rx-field__label { font-size: .85rem; font-weight: 600; } .rx-jump { border: 1px solid var(--border-strong); background: var(--bg); border-radius: var(--radius); padding: 2px 6px; cursor: pointer; color: var(--brand); display: inline-flex; align-items: center; } .rx-jump:hover { background: var(--brand-soft); } .rx-out { font-size: .66rem; color: var(--ink-muted); border: 1px dashed var(--border-strong); border-radius: 999px; padding: 0 6px; } .rx-opt { font-size: .66rem; color: var(--ink-muted); font-style: italic; } .rx-hidden { margin-top: 10px; font-size: .82rem; } .rx-hidden summary { cursor: pointer; color: var(--brand); } .rx-h3 { font-size: .92rem; margin: 0 0 8px; } .rx-ecart { border: 1px solid var(--border); border-left: 3px solid var(--warning); border-radius: var(--radius); padding: 8px 10px; margin-bottom: 8px; background: var(--bg); } .rx-ecart__head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; } .rx-ecart__where { font-size: .78rem; font-weight: 600; } .rx-ecart__line { margin: 0 0 3px; font-size: .76rem; display: flex; gap: 6px; } .rx-ecart__k { flex: none; width: 46px; color: var(--ink-muted); text-transform: uppercase; font-size: .64rem; padding-top: 2px; } .rx-ecart__was { color: var(--ink-muted); text-decoration: line-through; text-decoration-color: rgba(206, 5, 0, .5); } .rx-ecart__now { color: var(--ink); background: rgba(24, 117, 60, .10); } .rx-signature { margin-top: 8px; border-top: 1px dashed var(--border-strong); padding-top: 7px; } .rx-signature__label { margin: 0 0 4px; font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); } .rx-signature .doc-signature-role { font-size: .8rem; line-height: 1.4; color: var(--ink-2); } .rx-signature .doc-signature-name { margin-top: 3px; font-size: .85rem; font-weight: 600; letter-spacing: .02em; } .rx-signature__note { margin: 5px 0 0; font-size: .72rem; color: var(--ink-muted); } /* --- le bloc désigné, et les outils de structure --------------------------- Cliquer un bloc, c'est le désigner : il se marque dans la page et ses options s'ouvrent dans le panneau (onglet « Bloc »). Les outils posés sur le bloc (ajouter après, retirer, options) appartiennent à `.mv__tools`, qui n'apparaît qu'au survol — sauf le repère de désignation. */ .mv--sel { background: rgba(10, 118, 246, .07); box-shadow: inset 2px 0 0 var(--brand); } .mv__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 22px; padding: 2px 4px; border: 0; border-radius: var(--radius); background: none; color: var(--ink-2); cursor: pointer; line-height: 1; } .mv__btn:hover { color: var(--brand); background: var(--brand-soft); } .mv__btn--danger:hover { color: var(--error); background: rgba(206, 5, 0, .08); } /* Les outils d'un élément de liste (un visa, un considérant) : ils ne s'affichent qu'au survol de la ligne, et jamais à l'impression. */ .piece__tools { display: inline-flex; align-items: center; gap: 1px; margin-left: 4px; opacity: 0; transition: opacity .12s; vertical-align: middle; } li:hover > .piece__tools, p:hover > .piece__tools, .piece__tools:focus-within { opacity: 1; } .piece__btn { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1px solid transparent; border-radius: var(--radius); background: none; color: var(--ink-muted); cursor: pointer; font-family: var(--font-ui); } .piece__btn:hover { color: var(--brand); background: var(--brand-soft); border-color: var(--border); } .piece__btn--danger:hover { color: var(--error); background: rgba(206, 5, 0, .08); } /* « Ajouter un visa », à la fin d'une liste : toujours visible (c'est le geste qu'on cherche), discret (ce n'est pas du texte de l'acte). */ .piece--ajout { list-style: none; margin: .1em 0 0; } .piece__add { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border: 1px dashed var(--border-strong); border-radius: 999px; background: none; color: var(--brand); font: inherit; font-size: .72rem; font-family: var(--font-ui); cursor: pointer; opacity: .55; transition: opacity .12s, background .12s; } .piece--ajout:hover .piece__add, .piece__add:focus-visible { opacity: 1; background: var(--brand-soft); } /* --- la bibliothèque de variables (panneau de droite) -------------------- Elle reste ouverte au-dessus des onglets : les variables du document ne se cherchent pas, elles se glissent. */ .var-lib { padding: 0; } .var-lib__head { display: flex; align-items: center; gap: 6px; padding: 9px 12px; cursor: pointer; font-family: var(--font-ui); list-style: none; } .var-lib__head::-webkit-details-marker { display: none; } .var-lib__title { font-weight: 700; font-size: .84rem; } .var-lib__aide { font-size: .7rem; color: var(--ink-muted); } .var-lib__search { margin: 0 12px 8px; width: auto; } .var-lib__chips { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 9px; max-height: 176px; overflow: auto; } /* Dans la bibliothèque, une variable se lit EN ENTIER : « Nom de la collectivité » doit s'afficher en toutes lettres, quitte à passer à la ligne. (Ailleurs, les puces sont des raccourcis qu'un libellé tronqué suffit à reconnaître.) */ .var-lib .puce__label { max-width: none; white-space: normal; overflow: visible; } /* Le panneau est étroit : un libellé d'onglet ne se coupe pas au milieu d'un mot, la barre passe à la ligne. */ .redaction-col--side .fr-tabs .fr-tab { padding: 7px 10px; font-size: .82rem; white-space: nowrap; } .var-lib__groupe { display: flex; flex-direction: column; gap: 5px; } .var-lib__titre { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); } .puce.is-on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); } /* Choix du signataire : la fonction d'abord, la personne ensuite (voir src/ui/signer-picker.js). Les deux listes tiennent sur une ligne quand la place le permet (la fenêtre de modification d'acte, large), et s'empilent dans le panneau de rédaction, étroit — les qualités et les noms y sont longs et ne doivent pas être tronqués. */ .signer__corps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; } .signer .fr-field { margin-bottom: 0; } .signer__info { margin: 6px 0 0; grid-column: 1 / -1; } .signer__info--warn { border-left: 3px solid var(--warning, #b34000); padding-left: 8px; } @media (max-width: 1100px) { .redaction-grid { grid-template-columns: minmax(0, 1fr); } /* Écran étroit : la liste des champs passe au-dessus du document, sinon il faudrait faire défiler tout l'acte pour atteindre le premier champ. */ .redaction-col--side { order: -1; } } @media (max-width: 760px) { .redaction-hint { display: none; } .rw-pop { width: min(320px, 94vw); } } @media print { .rw-tok { background: none !important; box-shadow: none !important; color: #000 !important; } .rw-tok--empty::before { content: ""; } .rw-region--ecart { background: none !important; box-shadow: none !important; } .rw-pop, .redaction-hint { display: none !important; } /* Les outils de l'atelier ne sont pas de l'acte : ni les barres de bloc, ni les boutons « ajouter » des listes, ni le marquage du bloc désigné. */ .mv__tools, .piece__tools, .piece--ajout, .mv--sel { display: none !important; } } /* ========================================================================== Signature électronique, publication et consultation (ELI). Trois écrans : le circuit de signature (envoi au prestataire, retour de l'acte signé), l'API et son journal d'échanges, et la consultation publique d'une version en ligne (façon recueil officiel). ========================================================================== */ .sig-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; align-items: start; } .sig-list { display: flex; flex-direction: column; gap: 6px; } .sig-item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; width: 100%; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); cursor: pointer; font: inherit; font-size: .875rem; text-align: left; color: inherit; /* Les étiquettes d'état sont longues (« Recours introduit — contentieux en cours ») et ne se coupent pas : sur un écran étroit, elles passent à la ligne au lieu de pousser la liste hors de la page. */ flex-wrap: wrap; } .sig-item:hover { background: var(--bg-alt); } .sig-item.is-on { border-color: var(--brand); background: var(--brand-soft); } .sig-item__num { flex: none; font-weight: 600; } .sig-item__obj { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; } .sig-item .fr-badge { white-space: nowrap; flex: none; } .sig-kv { overflow-wrap: anywhere; } /* Le rappel du CIRCUIT de signature de l'acte (électronique ou externe) : une étiquette, et ce qui a décidé (la trame, ou le réglage général). */ .sig-circuit-mode { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; flex-wrap: wrap; } .sig-steps { display: flex; flex-direction: column; margin: 10px 0 0; } .sig-step { display: flex; gap: 10px; padding: 0 0 12px; position: relative; } .sig-step::before { content: ""; position: absolute; left: 9px; top: 21px; bottom: 0; width: 1px; background: var(--border); } .sig-step:last-child::before { display: none; } .sig-step__dot { width: 20px; height: 20px; flex: none; border-radius: 50%; z-index: 1; background: var(--bg-contrast); color: var(--ink-muted); display: grid; place-items: center; font-size: .7rem; font-weight: 700; } .sig-step.is-done .sig-step__dot { background: var(--success); color: #fff; } .sig-step__title { margin: 0; font-size: .86rem; font-weight: 600; } .sig-step__line { margin: 2px 0 0; font-size: .76rem; color: var(--ink-muted); } .sig-tool { display: flex; flex-direction: column; gap: 10px; } .sig-tool__bar { display: flex; align-items: center; gap: 10px; background: #0f2b46; color: #fff; padding: 8px 12px; border-radius: var(--radius); } .sig-tool__mark { background: #fff; color: #0f2b46; font-weight: 800; padding: 1px 6px; border-radius: 3px; font-size: .8rem; } .sig-tool__title { display: flex; flex-direction: column; line-height: 1.2; flex: 1 1 auto; } .sig-tool__title span { font-size: .72rem; opacity: .8; } .sig-tool__ext { font-family: var(--font-mono); font-size: .7rem; opacity: .8; } .sig-tool__body { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 14px; align-items: start; } .sig-tool__side h3 { margin: 0 0 6px; font-size: .9rem; } .sig-tool__doc { max-height: 52vh; overflow: auto; } .sig-paper .paper { padding: var(--paper-pad, 1.2cm 1cm); } .sig-cert { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; background: var(--bg); } .sig-cert h3 { margin: 0 0 6px; font-size: .9rem; } .sig-doc-view { height: 70vh; } /* Le document montré dans la fenêtre de signature est un `.paper-box` : il porte déjà son propre défilement, mais sans hauteur contrainte il grandissait à la hauteur du papier et débordait de son cadre — c'est la fenêtre entière qui défilait alors, et l'aperçu « 38vh » ne servait à rien. On le contraint donc à la hauteur de son cadre. */ .sig-doc-view > .paper-box { height: 100%; } .sig-doc-frame { width: 100%; height: 100%; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; } .sig-pub__head { display: flex; align-items: center; gap: 8px; justify-content: space-between; flex-wrap: wrap; } .sig-pub__meta { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; } .sig-pub__line { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); flex-wrap: wrap; } /* La file du signataire (« Ma signature ») : avec quel compte il signe, ce qui l'attend, et ce qui est signé au titre de sa délégation. */ .sig-ident { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .sig-ident > .fr-stack { border-left: 3px solid var(--border); padding-left: 10px; } .sig-file { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .sig-file__item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); } .sig-file__item--action { border-left: 3px solid var(--brand); } .sig-file__num { flex: none; font-weight: 600; } .sig-file__obj { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; } .sig-tool__warn { border-left: 3px solid var(--warning, #b34000); padding-left: 8px; } .oppo-preview { border-left: 3px solid var(--success); background: #f2f8f4; padding: 8px 10px; border-radius: 3px; margin: 8px 0; display: flex; flex-direction: column; gap: 2px; font-size: .82rem; } .oppo-preview strong { font-size: .86rem; } .api-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; } .api-base { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0; } .api-base code { background: var(--bg-alt); padding: 2px 6px; border-radius: 3px; } .api-token { word-break: break-all; } .api-group { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); margin: 14px 0 6px; } .api-op { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 6px; background: var(--bg); } .api-op > summary { display: flex; align-items: center; gap: 8px; padding: 7px 10px; cursor: pointer; list-style: none; flex-wrap: wrap; } .api-op > summary::-webkit-details-marker { display: none; } .api-op > summary code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .api-op[open] > summary { border-bottom: 1px solid var(--border); background: var(--bg-alt); } .api-op__sum { font-size: .8rem; color: var(--ink-2); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .api-op__body { padding: 10px 12px; } .api-op__body ul { margin: 4px 0 8px; padding-left: 18px; } .api-method { font-family: var(--font-mono); font-size: .68rem; font-weight: 700; padding: 1px 6px; border-radius: 3px; flex: none; } .api-method--get { background: #e8edff; color: #0063cb; } .api-method--post { background: #b8fec9; color: #1b5e2c; } .api-journal { display: flex; flex-direction: column; gap: 5px; max-height: 60vh; overflow: auto; } .api-entry { border: 1px solid var(--border); border-left: 3px solid var(--info); border-radius: var(--radius); background: var(--bg); } .api-entry--prestataire { border-left-color: #7b3fa0; } .api-entry--legalite { border-left-color: #0b5a2b; } .api-entry--numerotation { border-left-color: #b34000; } .api-entry > summary { display: flex; align-items: center; gap: 8px; padding: 6px 9px; cursor: pointer; list-style: none; } .api-entry > summary::-webkit-details-marker { display: none; } .api-svc { font-size: .64rem; text-transform: uppercase; letter-spacing: .04em; padding: 1px 5px; border-radius: 3px; background: var(--info-bg); color: var(--info); flex: none; } .api-entry--prestataire .api-svc { background: #f3e9f9; color: #7b3fa0; } .api-entry--legalite .api-svc { background: #eaf5ee; color: #0b5a2b; } .api-entry--numerotation .api-svc { background: #fdece2; color: #b34000; } .api-entry__url { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .api-ms { white-space: nowrap; flex: none; } .api-entry__body { padding: 8px 10px; border-top: 1px solid var(--border); } .api-entry__h { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-muted); margin: 6px 0 3px; } .fr-codebox { background: #0f1720; color: #e6edf3; padding: 10px 12px; border-radius: var(--radius); overflow: auto; max-height: 260px; font-size: .74rem; line-height: 1.45; margin: 0; } .pub-head { display: flex; align-items: center; gap: 10px; justify-content: space-between; background: var(--bg); border: 1px solid var(--border); border-left: 4px solid var(--brand); border-radius: var(--radius); padding: 10px 14px; flex-wrap: wrap; } .pub-head__left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pub-head__recueil { font-weight: 700; } .pub-head__eli { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pub-head__eli code { background: var(--bg-alt); padding: 2px 6px; border-radius: 3px; } .pub-title { margin: 0; } .pub-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; } .pub-dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 4px 0 0; font-size: .82rem; } .pub-dl dt { color: var(--ink-muted); } .pub-dl dd { margin: 0; } .pub-frame { margin-top: 12px; } .pub-frame__el { width: 100%; height: 420px; display: block; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; } .pub-version { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); } .pub-version.is-on { background: var(--bg-alt); } .oppo { border-left: 4px solid var(--success); background: #f2f8f4; border-radius: var(--radius); padding: 10px 12px; margin-bottom: 12px; } .oppo > strong { display: block; font-size: .9rem; margin-bottom: 4px; } .pub-table td { vertical-align: middle; } /* Zone sensible : le retrait d'une publication du recueil. Un acte administratif publié ne se retire pas — l'avertissement doit se voir avant tout le reste, et le geste demande un motif. La bordure rouge marque la carte, l'encadré rouge porte l'avertissement lui-même. */ .pub-danger { border: 2px solid var(--error); } .pub-danger__hero { border: 2px solid var(--error); border-radius: var(--radius); background: var(--error-bg); padding: 14px 16px; margin: 6px 0 12px; } .pub-danger__alert { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 1.2rem; font-weight: 800; line-height: 1.25; color: var(--error); } .pub-danger__alert svg { flex: none; } .pub-danger__text { margin: 0 0 8px; font-size: .88rem; line-height: 1.5; } .pub-danger__text:last-child { margin-bottom: 0; } .fr-modal .pub-danger__hero { margin-top: 0; } @media (max-width: 1100px) { .sig-grid, .api-grid, .pub-grid { grid-template-columns: minmax(0, 1fr); } .sig-tool__body { grid-template-columns: minmax(0, 1fr); } } @media print { .api-journal, .sig-tool, .pub-frame { display: none !important; } } /* ============================================================== compte connecté */ .app-user-wrap { position: relative; } .app-user { display: flex; align-items: center; gap: 8px; padding: 3px 10px 3px 4px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--bg); color: var(--ink); font: inherit; cursor: pointer; } .app-user:hover { background: var(--bg-alt); } .app-user__avatar { width: 26px; height: 26px; border-radius: 999px; flex: none; background: var(--brand); color: #fff; font-size: .68rem; font-weight: 700; display: grid; place-items: center; letter-spacing: .02em; } .app-user__text { display: flex; flex-direction: column; line-height: 1.12; text-align: left; } .app-user__name { font-size: .82rem; font-weight: 600; } .app-user__role { font-size: .68rem; color: var(--ink-muted); } .app-user__menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 264px; z-index: 60; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 14px 34px rgba(16, 18, 35, .18); padding: 6px; text-align: left; } .app-user__head { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; } .app-user__headname { font-weight: 700; font-size: .9rem; } .app-user__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: none; border-radius: var(--radius); font: inherit; font-size: .85rem; color: var(--ink); cursor: pointer; text-align: left; } .app-user__item:hover { background: var(--brand-soft); color: var(--brand); } .app-user__sep { border: 0; border-top: 1px solid var(--border); margin: 6px 0; } /* Version du logiciel en service — bas du menu du compte (voir lib/version.js). */ .app-user__version { margin-top: 6px; padding: 7px 10px 3px; border-top: 1px solid var(--border); font-size: .72rem; color: var(--ink-muted); } /* ================================================================= connexion */ .connexion { min-height: 100vh; display: flex; flex-direction: column; background: #f2f3f7; position: relative; } .connexion__theme { position: absolute; top: 14px; right: 16px; z-index: 5; } /* Le bouton d'apparence flotte au-dessus du bandeau de démonstration : on lui réserve sa place, sinon le bouton recouvre la fin du texte sur un écran étroit (le bandeau est le premier élément de l'écran de connexion). */ .connexion .app-demo { padding-right: 62px; } .connexion__stage { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 24px 16px; } .connexion__card { width: 100%; max-width: 780px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 26px 28px 22px; box-shadow: 0 18px 50px rgba(16, 18, 35, .12); text-align: left; max-height: 94vh; overflow: auto; } .connexion__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; color: var(--ink); } .connexion__name { margin: 0; font-weight: 700; font-size: 1rem; } .connexion__tag { margin: 2px 0 0; font-size: .74rem; color: var(--ink-muted); } .connexion__title { margin: 0 0 4px; font-size: 1.5rem; } .connexion__sub { margin: 0 0 18px; font-size: .9rem; color: var(--ink-2); } .connexion__group { margin-bottom: 16px; } .connexion__grouphead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 6px; } .connexion__groupsum { font-size: .78rem; color: var(--ink-muted); } .connexion__user { display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 6px; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); font: inherit; color: var(--ink); cursor: pointer; text-align: left; } .connexion__user:hover { border-color: var(--brand); background: #fbfbff; } .connexion__logo { height: 30px; width: auto; border-radius: var(--radius); flex: none; } .connexion__initials { width: 30px; height: 30px; border-radius: 999px; flex: none; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; font-size: .74rem; font-weight: 700; } .connexion__who { flex: 1 1 auto; display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .connexion__fullname { font-weight: 600; } .connexion__meta { font-size: .76rem; color: var(--ink-muted); overflow-wrap: anywhere; } .connexion__qualites { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; } .connexion__id { font-size: .78rem; color: var(--ink-muted); } .connexion__go { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--brand); white-space: nowrap; } .connexion__note { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border); font-size: .76rem; line-height: 1.55; color: var(--ink-muted); } /* La porte du retour au recueil public. Le recueil EST la page d'accueil du site (voir src/ui/app.js) : l'écran de connexion ne doit donc pas être un cul-de-sac — on revient au recueil d'un clic, sans chercher le bouton « Précédent ». Elle se place sous le sous-titre, au-dessus de la liste des comptes : ainsi elle ne dépend pas du défilement interne de la carte, qui peut être long. */ .connexion__retour { margin: -8px 0 16px; } .connexion__retour-lien { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; color: var(--brand); text-decoration: none; } .connexion__retour-lien:hover { text-decoration: underline; } /* ------------------------------------ connexion par mot de passe ---------- */ /* Les écrans du mode « comptes locaux » (src/ui/mot-de-passe.js). Le champ de mot de passe porte son œil DANS la boîte de saisie : c'est le geste courant, et un bouton posé à côté se cherche. */ .mdp-connexion { display: flex; flex-direction: column; gap: 12px; } .mdp-messages:empty { display: none; } .mdp-messages > * { margin-bottom: 10px; } .mdp-form { display: flex; flex-direction: column; } .mdp-form__actions { display: flex; flex-wrap: wrap; } .mdp-form__actions .fr-btn { flex: 0 0 auto; } .mdp-champ { position: relative; display: block; } .mdp-champ .fr-input { padding-right: 42px; } .mdp-champ__oeil { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--radius); background: transparent; color: var(--ink-muted); cursor: pointer; } .mdp-champ__oeil:hover { background: var(--bg-alt); color: var(--brand); } .mdp-champ__oeil.is-on { color: var(--brand); } /* Le raccourci de démonstration, quand le déploiement l'a laissé ouvert : une ligne repliée, pour ne pas encombrer l'écran d'un service réel. */ .mdp-demo { border-top: 1px solid var(--border); padding-top: 10px; } .mdp-demo > summary { cursor: pointer; font-size: .82rem; color: var(--ink-2); } .mdp-demo > p { margin: 8px 0 10px; } .mdp-demo__liste { margin-top: 4px; } /* L'administration d'un mot de passe (fenêtre depuis « Comptes et rôles »). */ .mdp-admin { display: flex; flex-direction: column; } .mdp-admin__actions { flex-wrap: wrap; margin-top: 10px; } /* ------------------------------------------- écran « pas d'accès » --------- */ /* Compte authentifié mais sans rôle d'application : on explique la situation, on donne le contact du service qui gère l'application, et on ramène le visiteur vers l'espace public. La mise en page reprend celle de l'écran de connexion (même carte centrée) — voir src/ui/views/sans-acces.js. */ .sans-acces__card { max-width: 640px; } .sans-acces__ident { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-alt); } .sans-acces__motif { margin: 14px 0 0; font-size: .9rem; color: var(--ink-2); } .sans-acces__contact { margin-top: 16px; padding: 12px 14px; border-left: 3px solid var(--brand); background: var(--brand-soft); } .sans-acces__contact p { margin: 5px 0 0; } .sans-acces__contact-title { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .95rem; } .sans-acces__actions { margin-top: 18px; flex-wrap: wrap; } /* ------------------------------------------- connexion par annuaire (OIDC) */ .oidc-login { display: flex; flex-direction: column; gap: 12px; } .oidc-login__provider { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .oidc-login__url { font-size: .78rem; color: var(--ink-muted); overflow-wrap: anywhere; } .oidc-login__cta { justify-content: center; padding: 12px 18px; font-size: 1rem; } .oidc-login__messages > * { margin-bottom: 8px; } .oidc-login__recovery { border-top: 1px solid var(--border); padding-top: 10px; } .oidc-login__recovery summary { cursor: pointer; font-size: .8rem; color: var(--ink-2); } .oidc-login__recovery p { margin: 8px 0; } .oidc-test { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } .oidc-test__row { display: grid; grid-template-columns: minmax(170px, 1.3fr) minmax(120px, 1fr) auto; gap: 10px; align-items: center; text-align: left; font: inherit; color: inherit; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; cursor: pointer; min-width: 0; } .oidc-test__row:hover { border-color: var(--brand); background: var(--bg-alt); } .oidc-test__row.is-denied { opacity: .72; } .oidc-test__name { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; } .oidc-test__claims { font-size: .72rem; color: var(--ink-muted); overflow-wrap: anywhere; min-width: 0; } .oidc-test__role { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; } @media (max-width: 700px) { .oidc-test__row { grid-template-columns: 1fr; } .oidc-test__role { justify-content: flex-start; } } .oidc-checks th, .oidc-checks td { vertical-align: top; } .oidc-sub { margin: 16px 0 6px; font-size: .95rem; } .oidc-endpoints { margin-top: 10px; } .oidc-rolemap__row { align-items: flex-end; } .oidc-rolemap__row .fr-field { flex: 1 1 240px; min-width: 0; } .oidc-rolemap__row .fr-btn { flex: none; } @media (max-width: 640px) { .oidc-rolemap__row { align-items: stretch; } .oidc-rolemap__row .fr-field { flex: 1 1 100%; } .oidc-rolemap__row .fr-btn { margin-left: auto; } } .fr-details { margin-top: 10px; } .fr-details summary { cursor: pointer; font-size: .85rem; color: var(--ink-2); } .fr-details .fr-field:first-of-type { margin-top: 8px; } /* ================================================================== comptes */ .compte__who { display: flex; align-items: center; gap: 8px; } .compte__initials { width: 26px; height: 26px; border-radius: 999px; flex: none; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; font-size: .68rem; font-weight: 700; } .compte__name { display: block; font-weight: 600; } .compte__service { display: block; font-size: .74rem; color: var(--ink-muted); } .fr-table tr.is-me { background: var(--brand-soft); } .perm-matrix { max-width: 720px; } .perm-matrix th.perm-matrix__role, .perm-matrix td.perm-matrix__cell { text-align: center; } .perm-matrix td.perm-matrix__cell.is-on { background: #f3f8f4; } .perm-yes { color: #18753c; font-weight: 700; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; } .perm-no { color: var(--ink-muted); } /* ---- éditeur de périmètre (Comptes et rôles) */ .compte-scope { margin-top: 4px; } .compte-scope__list { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; } .compte-scope__svc { font-weight: 600; } .compte-scope__bureaux { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 4px 22px; padding-left: 10px; border-left: 2px solid var(--border); } .compte-scope__hint { margin: 0 0 6px 22px; } /* ---- rôles cumulés et compétence d'un réviseur */ .compte__roles { display: flex; flex-wrap: wrap; gap: 4px; } .compte-revision__label { display: block; margin-top: 4px; font-size: .72rem; color: var(--ink-muted); } .compte-roles__cumuls { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; padding-left: 10px; border-left: 2px solid var(--border); } .compte-revision { margin-top: 4px; padding: 10px 12px; border-radius: 6px; background: var(--bg-alt); } .compte-revision .fr-field:last-child { margin-bottom: 0; } /* ---- qualité de réviseur portée par un service (Administration › Services) */ .service-reviseur { margin-top: 10px; padding: 10px 12px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); } .service-reviseur .fr-field { margin-top: 8px; margin-bottom: 0; } /* ---- rapport de conformité du réviseur */ .rev-rapport__groupe { margin-top: 8px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; } .rev-rapport__groupe summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; } .rev-rapport__groupe summary::-webkit-details-marker { display: none; } .rev-rapport__titre { flex: 1 1 auto; font-weight: 600; font-size: .85rem; } .rev-check { display: flex; gap: 8px; padding: 6px 0 4px 6px; border-top: 1px solid var(--border); } .rev-rapport__groupe summary + .rev-check { border-top: none; } .rev-check__dot { flex: none; width: 18px; height: 18px; border-radius: 999px; display: grid; place-items: center; font-size: .68rem; font-weight: 700; background: var(--bg-alt); color: var(--ink-muted); } .rev-check--erreur .rev-check__dot { background: var(--error-bg); color: var(--error); } .rev-check--attention .rev-check__dot { background: var(--warning-bg); color: var(--warning); } .rev-check--info .rev-check__dot { background: var(--info-bg); color: var(--info); } .rev-check--ok .rev-check__dot { background: var(--success-bg); color: var(--success); } .rev-check__label { margin: 0; font-size: .8rem; } .rev-check__detail { margin: 2px 0 0; font-size: .75rem; color: var(--ink-muted); } @media (max-width: 760px) { .compte-scope__bureaux { margin-left: 12px; } .compte-scope__hint { margin-left: 12px; } } @media (max-width: 760px) { .app-header__ref { display: none; } .app-user__text { display: none; } .app-user { padding: 3px; } .app-demo { padding: 5px 12px; gap: 6px; font-size: .72rem; } .app-demo__tag { font-size: .62rem; padding: 1px 6px; } .app-demo__text { flex-basis: 100%; } .app-vierge { padding: 5px 12px; gap: 6px; font-size: .72rem; } .app-vierge__tag { font-size: .62rem; padding: 1px 6px; } .app-vierge__text { flex-basis: 100%; } .connexion__card { padding: 18px 16px; } .connexion__id { display: none; } } /* ================================================== documentation technique */ .docs-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; } .docs-side { position: sticky; top: 12px; } .docs-side__group { margin: 12px 0 4px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); } .docs-side__group:first-of-type { margin-top: 4px; } .docs-side__item { display: block; width: 100%; text-align: left; cursor: pointer; background: none; border: 0; border-left: 3px solid transparent; border-radius: 0 var(--radius) var(--radius) 0; padding: 7px 10px; font: inherit; color: var(--ink); } .docs-side__item:hover { background: var(--bg-alt); } .docs-side__item.is-on { border-left-color: var(--brand); background: var(--brand-soft); } .docs-side__item strong { display: block; font-size: .9rem; } .docs-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .docs-head__actions { flex: 0 0 auto; } .docs-path { margin: 6px 0 0; } .docs-path code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .78rem; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 3px; padding: 2px 6px; } .docs-view { line-height: 1.6; } .docs-loading { display: flex; align-items: center; gap: 8px; } /* Attente d'un service (numérotation, etc.) : un mouvement, pour que l'on voie que la demande est en cours et non terminée. */ .spinner { display: inline-block; width: 13px; height: 13px; flex: none; border: 2px solid var(--border-strong); border-top-color: var(--brand); border-radius: 50%; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .docs-toc { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-alt); padding: 10px 14px; margin-bottom: 18px; font-size: .85rem; } .docs-toc strong { display: block; margin-bottom: 6px; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); } .docs-toc__link { display: block; color: var(--brand); text-decoration: none; padding: 1px 0; } .docs-toc__link:hover { text-decoration: underline; } .docs-toc__link.is-sub { padding-left: 14px; color: var(--ink-2); } /* rendu markdown (ui/markdown.js) */ /* La colonne de lecture est large : on borne la mesure du TEXTE (au-delà d'une centaine de caractères, l'œil perd la ligne) mais on laisse les tableaux et les schémas ASCII utiliser toute la largeur disponible. */ .md { max-width: none; } .md > p, .md > ul, .md > ol, .md > blockquote { max-width: 84ch; } .md-h1 { font-size: 1.55rem; margin: 0 0 .6em; } .md-h2 { font-size: 1.18rem; margin: 1.8em 0 .5em; padding-bottom: .2em; border-bottom: 1px solid var(--border); scroll-margin-top: 16px; } .md-h3 { font-size: 1.02rem; margin: 1.4em 0 .4em; scroll-margin-top: 16px; } .md-h4 { font-size: .95rem; margin: 1.2em 0 .3em; scroll-margin-top: 16px; } .md p { margin: 0 0 .8em; } .md-list { margin: 0 0 1em; padding-left: 1.3em; } .md-list li { margin-bottom: .25em; } .md-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .86em; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 3px; padding: 1px 4px; } .md-pre { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; overflow-x: auto; margin: 0 0 1.1em; } .md-pre code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .78rem; line-height: 1.4; white-space: pre; } .md-table-wrap { overflow-x: auto; margin: 0 0 1.1em; } .md-table { border-collapse: collapse; width: 100%; font-size: .84rem; } .md-table th, .md-table td { border: 1px solid var(--border); padding: 5px 8px; text-align: left; vertical-align: top; } .md-table th { background: var(--bg-alt); font-weight: 700; } .md-quote { margin: 0 0 1.1em; padding: 8px 14px; border-left: 3px solid var(--border-strong); background: var(--bg-alt); color: var(--ink-2); } .md-quote p { margin: 0; } .md-hr { border: 0; border-top: 1px solid var(--border); margin: 1.8em 0; } .guide__tech { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 22px; } .guide__tech-text { min-width: 240px; flex: 1 1 auto; } @media (max-width: 1100px) { .docs-grid { grid-template-columns: minmax(0, 1fr); } .docs-side { position: static; } } /* ========================================================================== Mode sombre — la Chrome de l'application. Les jetons généraux sont dans le bloc `[data-theme="dark"]` en tête de fichier ; ici, ce qui ne passe pas par un jeton : les quelques couleurs écrites en dur (badges, schémas d'illustration, écran de connexion) et les éléments dont le fond est la couleur de marque (bouton principal, avatar). Le papier des documents, lui, reste clair — voir le bloc suivant. ========================================================================== */ [data-theme="dark"] .fr-btn.fr-btn--primary, [data-theme="dark"] .fr-btn.fr-btn--primary:hover:not(:disabled), [data-theme="dark"] .app-org__mark, [data-theme="dark"] .app-user__avatar, [data-theme="dark"] .gstep::before, [data-theme="dark"] .gmail__send, [data-theme="dark"] .sig-step.is-done .sig-step__dot, [data-theme="dark"] .gshot__mark, [data-theme="dark"] .gshot__num { color: #101219; } [data-theme="dark"] .fr-badge--success { color: var(--success); } [data-theme="dark"] .fr-alert--success { background: var(--success-bg); } [data-theme="dark"] .gnote--ok { background: var(--success-bg); } [data-theme="dark"] .gcard--link:hover { background: var(--bg-alt); } [data-theme="dark"] .oppo, [data-theme="dark"] .oppo-preview { background: var(--success-bg); } [data-theme="dark"] .api-method--get { background: var(--info-bg); color: var(--info); } [data-theme="dark"] .api-method--post { background: var(--success-bg); color: var(--success); } [data-theme="dark"] .api-entry--prestataire { border-left-color: #b98ce0; } [data-theme="dark"] .api-entry--prestataire .api-svc { background: #2c2138; color: #c79ce8; } [data-theme="dark"] .api-entry--legalite { border-left-color: #6cc48a; } [data-theme="dark"] .api-entry--legalite .api-svc { background: #1e2f24; color: #8fd6a7; } [data-theme="dark"] .api-entry--numerotation { border-left-color: #e0864f; } [data-theme="dark"] .api-entry--numerotation .api-svc { background: #35241a; color: #efa173; } [data-theme="dark"] .connexion { background: var(--bg-alt); } [data-theme="dark"] .connexion__user:hover { background: var(--bg-alt); } [data-theme="dark"] .perm-matrix td.perm-matrix__cell.is-on { background: var(--success-bg); } [data-theme="dark"] .perm-yes { color: var(--success); } [data-theme="dark"] .gshot__box { background: rgba(255, 143, 136, .08); } [data-theme="dark"] .app-demo__tag { color: #2a1a0c; } [data-theme="dark"] .fr-toast--error { color: #2a0f0d; } [data-theme="dark"] .fr-codebox { background: #0c0f15; border: 1px solid var(--border); } [data-theme="dark"] .app-demo { border-bottom-color: rgba(245, 177, 131, .25); } [data-theme="dark"] .app-demo .fr-btn.fr-btn--tertiary:hover:not(:disabled) { background: rgba(245, 177, 131, .14); } [data-theme="dark"] .app-vierge { border-bottom-color: rgba(157, 188, 255, .28); } [data-theme="dark"] .app-vierge__tag { color: #0c1220; } [data-theme="dark"] .app-vierge .fr-btn.fr-btn--tertiary:hover:not(:disabled) { background: rgba(157, 188, 255, .14); } /* Les pastilles de rédaction (champs, notes) et les étiquettes de tableau n'ont pas de variante sombre : elles vivent DANS le papier, qui reste clair — les jetons clairs y sont rétablis par le bloc `[data-theme="dark"] .paper`. */ [data-theme="dark"] .rw-tagmini { background: #fff4d6; color: #7a5000; border-color: #e0a800; } [data-theme="dark"] .rw-pop { box-shadow: 0 12px 32px rgba(0, 0, 0, .55); } [data-theme="dark"] .app-user__menu { box-shadow: 0 16px 38px rgba(0, 0, 0, .55); } [data-theme="dark"] .connexion__card { box-shadow: 0 18px 50px rgba(0, 0, 0, .5); } [data-theme="dark"] .paper { box-shadow: 0 1px 4px rgba(0, 0, 0, .6); } [data-theme="dark"] .fr-modal-overlay { background: rgba(6, 8, 12, .66); } /* Le papier reste clair : à l'intérieur d'une feuille, les jetons reprennent leurs valeurs claires — un acte administratif s'imprime sur du papier blanc, et les pastilles de rédaction (champs, notes) doivent rester lisibles sur ce fond. `--brand` reprend la couleur de la collectivité non éclaircie (`--brand-light`, posée par applyBrand). */ [data-theme="dark"] .paper { --ink: #161616; --ink-2: #3a3a3a; --ink-muted: #666666; --border: #dddddd; --border-strong: #929292; --bg: #ffffff; --bg-alt: #f6f6f6; --bg-contrast: #eeeeee; --brand: var(--brand-light, #000091); --brand-soft: #e3e3fd; --success: #18753c; --success-bg: #b8fec9; --warning: #b34000; --warning-bg: #ffe9e6; --error: #ce0500; --error-bg: #ffdedd; --info: #0063cb; --info-bg: #e8edff; --focus: #0a76f6; } /* ---------------------------------------------------------- bouton de thème */ .app-theme { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--ink); cursor: pointer; } .app-theme:hover { background: var(--bg-alt); border-color: var(--border-strong); } .app-theme__pref { font-size: .68rem; color: var(--ink-muted); margin-left: 6px; } .app-user__theme { padding: 8px 10px 4px; } .app-user__themelabel { display: flex; align-items: center; gap: 6px; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); margin-bottom: 6px; } .app-user__themes { display: flex; gap: 4px; } .app-user__themebtn { flex: 1 1 auto; border: 1px solid var(--border); background: var(--bg); color: var(--ink-2); font: inherit; font-size: .78rem; padding: 5px 6px; border-radius: var(--radius); cursor: pointer; } .app-user__themebtn:hover { border-color: var(--brand); color: var(--brand); } .app-user__themebtn.is-on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); font-weight: 600; } /* Les assistants : l'agent les masque pour son seul compte (menu du nom). Un assistant éteint reste lisible, mais son icône s'estompe : on voit d'un coup d'œil ce qui s'affiche et ce qui ne s'affiche pas. */ .app-user__assist { padding: 4px 10px 6px; } .app-user__assistlabel { display: flex; align-items: center; gap: 6px; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); margin-bottom: 6px; } .app-user__assists { display: flex; gap: 4px; } .app-user__assistbtn { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--border); background: var(--bg); color: var(--ink-2); font: inherit; font-size: .78rem; padding: 4px 6px; border-radius: var(--radius); cursor: pointer; } .app-user__assistbtn:hover { border-color: var(--brand); color: var(--brand); } .app-user__assistbtn.is-on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); font-weight: 600; } .app-user__assistimg { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex: none; } .app-user__assistimg.is-off { filter: grayscale(1); opacity: .45; } /* Sur un écran étroit, l'en-tête se replie sur plusieurs lignes et le bouton du compte change de place : un menu ancré au bouton sortirait de la fenêtre. On en fait une feuille en bas de l'écran, toujours entièrement visible. */ @media (max-width: 640px) { .app-user__menu { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; min-width: 0; max-height: 70vh; overflow-y: auto; } } /* L'écran d'administration des assistants : l'aperçu du nom et de l'icône, mis à jour à la frappe — sans redessiner, pour ne pas perdre le champ de saisie. */ .assist-admin__apercu { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-alt); } .assist-admin__apercu-img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; } .assist-admin__apercu-nom { font-weight: 600; color: var(--ink); } @media print { [data-theme="dark"] .paper { box-shadow: none; } } /* ========================================================================== Parapheur, exécution et délais. Deux écrans jumeaux : une file à gauche, le dossier de l'acte à droite. Ils reprennent les briques de l'écran de signature (`.sig-list`, `.sig-item`, `.sig-steps`) pour que les mêmes objets se lisent partout de la même façon. ========================================================================== */ .parapheur-resume { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; } .parapheur-resume__item { display: flex; align-items: baseline; gap: 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); padding: 8px 12px; min-width: 150px; } .parapheur-resume__item strong { font-size: 1.25rem; line-height: 1; font-variant-numeric: tabular-nums; } .parapheur-resume__item span { font-size: .8rem; color: var(--ink-muted); } .parapheur-resume__item.is-hot { border-color: var(--brand); background: var(--brand-soft); } .parapheur-resume__item.is-hot strong { color: var(--brand); } .parapheur-grid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 16px; align-items: start; } .sig-item.is-todo { border-left: 3px solid var(--brand); } .sig-step.is-open .sig-step__dot { background: var(--brand); color: #fff; } .sig-step.is-open .sig-step__title { color: var(--brand); } .parapheur-comment { font-style: italic; color: var(--ink-2); } .parapheur-decision { border-left: 3px solid var(--brand); } .parapheur-decision .fr-textarea { width: 100%; } .exec-formalites { display: flex; flex-direction: column; gap: 8px; } .exec-formalite { border: 1px solid var(--border); border-left: 3px solid var(--warning); border-radius: var(--radius); padding: 9px 11px; background: var(--bg); } .exec-formalite.is-done { border-left-color: var(--success); } .exec-formalite__head { display: flex; align-items: center; gap: 8px; justify-content: space-between; flex-wrap: wrap; } .exec-formalite p { margin: 3px 0 0; } .exec-formalite .fr-row { margin-top: 6px; } .exec-alerte--error { color: var(--error); } .exec-alerte--warning { color: var(--warning); } .exec-alerte--info { color: var(--ink-2); } /* Certificat de transmission au contrôle de légalité, déposé sur le document. */ .exec-certificat { border-left: 3px solid var(--success); padding: 6px 9px; border-radius: 3px; } .exec-certificat strong { display: block; } /* Observation portée sur un recours : la note de l'agent, entre guillemets. */ .exec-observation { border-left: 3px solid var(--border-strong); padding: 4px 9px; border-radius: 3px; font-style: italic; color: var(--ink-2); } /* ------------------------------------------------------ recherche (en-tête) */ .app-search { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--bg); color: var(--ink-muted); font: inherit; font-size: .82rem; padding: 5px 10px; cursor: pointer; } .app-search:hover { background: var(--bg-alt); color: var(--ink); } .app-search kbd { font-family: var(--font-mono); font-size: .68rem; border: 1px solid var(--border); border-radius: 3px; padding: 0 4px; color: var(--ink-muted); background: var(--bg-alt); } /* ------------------------------------------- présence et notifications (en-tête) */ .app-collab { display: flex; align-items: center; gap: 6px; } .collab-presence { position: relative; } .collab-presence__btn { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); padding: 3px 8px 3px 4px; cursor: pointer; font: inherit; } .collab-presence__btn:hover { background: var(--bg-alt); } .collab-presence__dots { display: flex; } .collab-presence__dot { width: 22px; height: 22px; border-radius: 999px; flex: none; background: var(--brand); color: #fff; font-size: .62rem; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--bg); margin-left: -6px; } .collab-presence__dots .collab-presence__dot:first-child { margin-left: 0; } .collab-presence__n { font-size: .72rem; color: var(--ink-muted); } .collab-cloche { position: relative; } .collab-cloche__btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--ink); cursor: pointer; } .collab-cloche__btn:hover { background: var(--bg-alt); } .collab-cloche__btn.is-on { border-color: var(--brand); color: var(--brand); } .collab-cloche__n { position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--error); color: #fff; font-size: .64rem; font-weight: 700; display: grid; place-items: center; } .collab-panel { position: absolute; right: 0; top: calc(100% + 8px); width: 340px; max-width: 84vw; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 18px 40px rgba(16, 20, 30, .18); z-index: 40; overflow: hidden; } .collab-panel__head { padding: 9px 12px; border-bottom: 1px solid var(--border); background: var(--bg-alt); font-size: .82rem; } .collab-panel__body { max-height: 52vh; overflow: auto; } .collab-panel__row { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--border); background: var(--bg); color: inherit; font: inherit; cursor: pointer; } .collab-panel__row:hover { background: var(--bg-alt); } .collab-panel__row.is-me { background: var(--bg-alt); } .collab-panel__row--notif.is-new { border-left: 3px solid var(--brand); } .collab-panel__row--notif .collab-panel__text { padding-left: 6px; } .collab-panel__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .collab-panel__text strong { font-size: .82rem; } .collab-panel__text span { overflow-wrap: anywhere; } .collab-panel__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 12px; background: var(--bg-alt); } /* ---------------------------------------------------- recherche globale (superposition) */ .gs { position: fixed; inset: 0; z-index: 60; background: rgba(14, 18, 26, .42); display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px 16px; } .gs__box { width: min(620px, 100%); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 24px 60px rgba(10, 14, 22, .35); overflow: hidden; } .gs__bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--ink-muted); } .gs__input { flex: 1 1 auto; border: 0; outline: none; background: transparent; color: var(--ink); font: inherit; font-size: 1rem; } .gs__kbd { font-family: var(--font-mono); font-size: .68rem; border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px; } .gs__results { max-height: 58vh; overflow: auto; } .gs__group { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); padding: 9px 12px 4px; background: var(--bg-alt); } .gs__item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 8px 12px; border: 0; background: var(--bg); color: inherit; font: inherit; cursor: pointer; } .gs__item.is-on { background: var(--brand-soft); } .gs__item-icon { color: var(--ink-muted); display: inline-flex; flex: none; } .gs__item-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; } .gs__item-title { font-size: .88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gs__item-sub { font-size: .74rem; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gs__empty { padding: 18px 14px; margin: 0; font-size: .84rem; color: var(--ink-muted); } .gs__help { margin: 0; padding: 7px 12px; border-top: 1px solid var(--border); background: var(--bg-alt); font-size: .72rem; color: var(--ink-muted); } @media (max-width: 1100px) { .parapheur-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 900px) { .app-search span { display: none; } .app-search kbd { display: none; } } @media (max-width: 700px) { .parapheur-resume__item { min-width: 0; flex: 1 1 45%; } .collab-panel { position: fixed; right: 8px; left: 8px; width: auto; } } @media print { .app-search, .app-collab, .gs { display: none !important; } } [data-theme="dark"] .collab-panel { box-shadow: 0 18px 44px rgba(0, 0, 0, .6); } [data-theme="dark"] .gs__box { box-shadow: 0 24px 60px rgba(0, 0, 0, .6); } [data-theme="dark"] .collab-presence__dot, [data-theme="dark"] .collab-cloche__n { color: #101219; } [data-theme="dark"] .parapheur-resume__item.is-hot .parapheur-resume__item strong { color: var(--brand); } [data-theme="dark"] .collab-panel__row--notif.is-new { border-left-color: var(--brand); } /* ========================================================================== Journal d'audit, relances du registre, et cartes ajoutées à la fiche d'acte (parapheur, caractère exécutoire, historique des brouillons). Ces styles prolongent les blocs « parapheur » et « exécution » : mêmes objets, mêmes repères visuels. ========================================================================== */ /* Bandeau de relances du registre des actes : ce qui attend un geste, résumé sur une ligne, avec un lien direct vers l'écran concerné. */ .actes-relances { align-items: center; gap: 10px; flex-wrap: wrap; color: var(--ink-muted); } /* Journal d'audit : une ligne par fait, la date à gauche (colonne fixe, pour que les faits s'alignent et se lisent comme un registre), le fait à droite. */ .journal-liste { display: flex; flex-direction: column; margin-top: 10px; max-height: 62vh; overflow: auto; } .journal-line { display: flex; gap: 14px; align-items: flex-start; padding: 10px 4px; border-top: 1px solid var(--border); } .journal-line__when { display: flex; flex-direction: column; flex: 0 0 96px; line-height: 1.25; } .journal-line__body { flex: 1 1 auto; min-width: 0; } .journal-line__body .fr-row { align-items: center; gap: 8px; flex-wrap: wrap; } .journal-line__body p { margin: 4px 0 0; } @media (max-width: 640px) { .journal-line { flex-direction: column; gap: 6px; } .journal-line__when { flex-direction: row; gap: 8px; flex-basis: auto; } } /* Sur un téléphone, les compteurs de synthèse (parapheur, échéancier) passent à la ligne : deux par ligne, le texte devient illisible. */ @media (max-width: 460px) { .parapheur-resume__item { flex: 1 1 100%; } } /* Les formalités rappelées sur la fiche d'un acte sont plus compactes que sur l'échéancier : la fiche informe, l'échéancier pilote. */ .fr-card .exec-formalites .exec-formalite { padding: 8px 10px; } [data-theme="dark"] .journal-line__when strong { color: var(--ink); } /* ========================================================================== Recueil public (l'ESPACE PUBLIC est à la RACINE ; « ?acte= », « ?page=… » et « ?info= » dans la page, « /recueil/ » sur un déploiement serveur ; l'ancien « ?recueil=1 » reste reconnu). Un site à part, servi par la même page : l'identité de la structure, le titre du recueil, une recherche, la liste des actes — et, pour chacun, son texte rendu DANS la page. Aucune brique de l'atelier n'y paraît. La décision n'est pas enfermée dans une feuille : la notice, le texte et les pièces s'enchaînent comme sur un recueil officiel en ligne. Le document n'est pas rendu avec sa charte de publication — celle-ci vaut pour le papier (PDF, Word, page autonome) — mais avec les styles de lecture du site, dans l'apparence thémée du recueil (voir lib/recueil.js). ========================================================================== */ .recueil { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg-alt); /* La largeur du contenu est une variable : une collectivité peut la réduire (une colonne de lecture) ou l'élargir (un registre large) depuis sa feuille de personnalisation — Administration › Publication › Apparence. */ --recueil-largeur: 1180px; } /* Le bandeau de démonstration marque aussi le recueil public : il s'aligne sur l'en-tête du site (même retrait latéral). */ .recueil > .app-demo { padding-left: 20px; padding-right: 20px; } .recueil--acte > .app-demo { padding-left: clamp(20px, 3.5vw, 64px); padding-right: clamp(20px, 3.5vw, 64px); } /* L'en-tête reste sous les yeux : sur un recueil long, on remonte d'un clic au recueil, au sommaire ou à la connexion sans remonter la page. Le fond est translucide et flouté — le contenu passe dessous sans le parasiter. */ .recueil-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: saturate(180%) blur(10px); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--border); } .recueil-header__in { max-width: var(--recueil-largeur); margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 16px; } .recueil-ident { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; min-width: 0; } .recueil-ident__logo { height: 44px; width: auto; max-width: 120px; object-fit: contain; flex: none; } .recueil-ident__logo--mark { display: grid; place-items: center; width: 44px; height: 44px; background: var(--brand); color: #fff; font-weight: 700; font-size: .8rem; letter-spacing: .04em; } .recueil-ident__text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } .recueil-ident__org { font-size: .8rem; color: var(--ink-muted); } .recueil-ident__title { font-size: 1.05rem; font-weight: 700; } .recueil-header__out { margin-left: auto; flex: none; } .recueil-out { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--ink-muted); text-decoration: none; } .recueil-out:hover { color: var(--brand); } /* « Se connecter » est la porte de l'application depuis l'espace public : elle mérite plus qu'un lien gris, sans pour autant crier au milieu du recueil. */ .recueil-out--entree { padding: 5px 12px; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--ink); font-weight: 600; } .recueil-out--entree:hover { border-color: var(--brand); color: var(--brand); background: var(--bg-alt); } .recueil-main { flex: 1 1 auto; width: 100%; max-width: var(--recueil-largeur); margin: 0 auto; padding: 18px 20px 48px; display: flex; flex-direction: column; gap: 14px; } /* La page d'un acte : le texte publié occupe TOUTE la largeur disponible (la liste, elle, garde une largeur de lecture confortable). */ .recueil--acte .recueil-header__in { max-width: none; padding-left: clamp(20px, 3.5vw, 64px); padding-right: clamp(20px, 3.5vw, 64px); } .recueil--acte .recueil-main { max-width: none; padding-left: clamp(20px, 3.5vw, 64px); padding-right: clamp(20px, 3.5vw, 64px); } /* --- l'accueil : l'entrée, le carrousel, les thèmes ------------------------ Le recueil n'est pas un registre : c'est un site. On y entre par une phrase et une recherche, on y voit ce qui vient d'être publié, et on y circule par matière — les thèmes — avant de descendre dans la liste complète. */ .recueil-hero { padding: 26px 0 24px; border-bottom: 1px solid var(--border); } .recueil-hero__eyebrow { margin: 0 0 7px; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--brand); } .recueil-hero__title { margin: 0; font-size: clamp(1.7rem, 1.1rem + 2vw, 2.35rem); line-height: 1.18; letter-spacing: -.01em; } .recueil-hero__lead { margin: 11px 0 0; max-width: 66ch; color: var(--ink-2); } .recueil-hero__stats { margin: 13px 0 0; font-size: .84rem; color: var(--ink-muted); } .recueil-hero .recueil-recherche { margin-top: 17px; max-width: 640px; } .recueil-recherche--hero { padding: 1px 13px; } .recueil-recherche--hero .recueil-input { padding: 12px 0; font-size: 1rem; } .recueil-section { margin-top: 30px; } .recueil-section__tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; } .recueil-section__titres { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .recueil-section__title { margin: 0; font-size: 1.16rem; } .recueil-section__sous { margin: 3px 0 0; color: var(--ink-muted); font-size: .86rem; } /* --- les derniers actes : un carrousel ------------------------------------ */ .recueil-carrousel__nav { display: flex; align-items: center; gap: 8px; } .recueil-carrousel__fleche { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; background: var(--bg); color: var(--ink-2); border: 1px solid var(--border-strong); border-radius: 50%; cursor: pointer; } .recueil-carrousel__fleche:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); } .recueil-carrousel__fleche:disabled { opacity: .35; cursor: default; } .recueil-carrousel__points { display: flex; align-items: center; gap: 6px; } /* Le point du carrousel : la cible TACTILE fait 24 px (RGAA/WCAG 2.5.8), la pastille visible en fait 8 — le rembourrage est transparent, la pastille est dessinée par ::after. Une cible de 8 px était hors d'atteinte au doigt. */ .recueil-carrousel__point { position: relative; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; } .recueil-carrousel__point::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--border-strong); } .recueil-carrousel__point.is-on::after { background: var(--brand); transform: scale(1.25); } .recueil-carrousel__piste { list-style: none; margin: 0; padding: 2px 2px 12px; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; } .recueil-carrousel__piste:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .recueil-carte { flex: 0 0 min(84vw, 300px); scroll-snap-align: start; background: var(--bg); border: 1px solid var(--border); border-top: 4px solid hsl(var(--h, 220) 52% 46%); border-radius: calc(var(--radius) + 2px); box-shadow: 0 1px 2px rgb(0 0 0 / .04); transition: box-shadow .15s ease, transform .15s ease; } .recueil-carte:hover { box-shadow: 0 8px 20px rgb(0 0 0 / .10); transform: translateY(-2px); } .recueil-carte__lien { display: flex; flex-direction: column; gap: 5px; padding: 14px 15px; min-height: 152px; text-decoration: none; color: inherit; } .recueil-carte__lien:hover { background: var(--bg-alt); } .recueil-carte__theme { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: hsl(var(--h, 220) 52% 36%); } .recueil-carte__theme.is-sans { color: var(--ink-muted); } .recueil-carte__objet { font-size: 1.02rem; font-weight: 600; line-height: 1.35; } .recueil-carte__lien:hover .recueil-carte__objet { color: var(--brand); } .recueil-carte__meta, .recueil-carte__date { font-size: .8rem; color: var(--ink-muted); } .recueil-carte__date { margin-top: auto; } /* --- la mise en avant : la bande « À la une » ------------------------------ */ /* Les actes ÉPINGLÉS depuis l'onglet « Actes » (voir views/actes.js) — le règlement intérieur, la charte, le document qu'on vient chercher. Ils ont leur propre bande, avant les derniers actes publiés : le filet de tête prend la couleur de la marque, et un repère écrit dit pourquoi ils sont là. */ .recueil-une { margin-top: 22px; } .recueil-carte--une { border-top-color: var(--brand); background: var(--brand-soft); } .recueil-carte__epingle, .recueil-item__epingle { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--brand); } .recueil-item__epingle { font-size: .66rem; } /* La marque d'un acte à DIFFUSION RESTREINTE (réservé aux agents connectés) : visible seulement par les agents, puisque le public ne le voit pas. */ .recueil-item__reserve { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--error); } /* --- les thèmes : une grille de tuiles ------------------------------------ */ .recueil-themes__grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 10px; } .recueil-theme { display: flex; align-items: flex-start; gap: 10px; width: 100%; height: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; } .recueil-theme:hover { border-color: var(--border-strong); background: var(--bg-alt); } .recueil-theme.is-on { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); } .recueil-theme__puce { flex: none; width: 12px; height: 12px; margin-top: 5px; border-radius: 3px; background: hsl(var(--h, 220) 52% 46%); } .recueil-theme.is-sans .recueil-theme__puce { background: var(--border-strong); } .recueil-theme__corps { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; } .recueil-theme__nom { font-weight: 600; line-height: 1.3; } .recueil-theme__desc { font-size: .8rem; line-height: 1.4; color: var(--ink-muted); } .recueil-theme__n { flex: none; padding-top: 2px; font-size: .76rem; color: var(--ink-muted); white-space: nowrap; } .recueil-recherche { display: flex; align-items: center; gap: 8px; flex: 1 1 300px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--bg); padding: 0 10px; color: var(--ink-muted); } .recueil-recherche:focus-within { border-color: var(--focus); outline: 2px solid var(--focus); outline-offset: 0; } .recueil-input { flex: 1 1 auto; border: 0; background: transparent; font: inherit; color: var(--ink); padding: 9px 0; outline: none; min-width: 0; } /* Cible tactile de la croix de recherche : 24 x 24 px au minimum. */ .recueil-recherche__x { border: 0; background: none; font-size: 1.15rem; line-height: 1; color: var(--ink-muted); cursor: pointer; padding: 0 2px; display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; } .recueil-select { border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--bg); color: var(--ink); font: inherit; font-size: .84rem; padding: 8px 10px; max-width: 230px; } .recueil-lien { border: 0; background: none; color: var(--brand); font: inherit; font-size: .84rem; cursor: pointer; text-decoration: underline; padding: 0; } .recueil-resultats { scroll-margin-top: 14px; } .recueil-filtres { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .recueil-filtres__label { font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); } /* « Afficher les versions antérieures » : un filtre du recueil, discret, à côté des sélecteurs — il ne paraît que si des versions antérieures existent. */ .recueil-anciennes { display: inline-flex; align-items: center; gap: 7px; margin-left: 4px; font-size: .82rem; color: var(--ink-2); cursor: pointer; } .recueil-anciennes input { width: 15px; height: 15px; accent-color: var(--brand); } .recueil-listes { display: flex; flex-direction: column; gap: 18px; } .recueil-annee__title { margin: 0 0 6px; padding-bottom: 5px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); border-bottom: 2px solid var(--border); } .recueil-actes { list-style: none; margin: 0; padding: 0; } .recueil-item { background: var(--bg); border: 1px solid var(--border); border-left: 3px solid var(--brand-soft); border-radius: calc(var(--radius) + 2px); transition: box-shadow .15s ease, border-color .15s ease; } .recueil-item:hover { border-left-color: var(--brand); box-shadow: 0 4px 14px rgb(0 0 0 / .08); } .recueil-item + .recueil-item { margin-top: 8px; } .recueil-item__lien { display: block; padding: 12px 15px; text-decoration: none; color: inherit; border-radius: var(--radius); } .recueil-item__lien:hover { background: var(--bg-alt); } .recueil-item__lien:hover .recueil-item__objet { color: var(--brand); } .recueil-item__haut { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .recueil-item__theme { font-size: .73rem; font-weight: 700; letter-spacing: .01em; color: var(--brand); background: var(--brand-soft, var(--bg-alt)); border-radius: 3px; padding: 1px 7px; } .recueil-item__nature { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); } .recueil-item__num { font-family: var(--font-mono); font-size: .82rem; color: var(--ink-2); } .recueil-item__marque { font-size: .7rem; color: var(--warning); } .recueil-item__objet { display: block; margin: 3px 0 0; font-size: .96rem; color: var(--ink); } .recueil-item__bas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 3px; font-size: .78rem; color: var(--ink-muted); } .recueil-fil { display: flex; gap: 8px; flex-wrap: wrap; font-size: .8rem; color: var(--ink-muted); } .recueil-fil a { color: var(--brand); } /* Marques d'un acte : sa nature, sa version. */ .recueil-badge { display: inline-block; border: 1px solid var(--border-strong); border-radius: 3px; padding: 2px 8px; font-size: .72rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-2); background: var(--bg); } .recueil-badge--nature { border-color: var(--brand); color: var(--brand); } .recueil-badge--theme { background: var(--brand-soft, var(--bg-alt)); border-color: transparent; color: var(--brand); text-transform: none; letter-spacing: 0; font-weight: 700; } .recueil-badge--version { background: var(--brand-soft); border-color: transparent; color: var(--brand); text-transform: none; letter-spacing: 0; } .recueil-badge--info { background: var(--bg-alt); border-color: var(--border-strong); color: var(--ink-2); text-transform: none; letter-spacing: 0; } .recueil-badge--ok { border-color: var(--success); color: var(--success); background: var(--success-bg); text-transform: none; letter-spacing: 0; } .recueil-badge--note { color: var(--ink-muted); text-transform: none; letter-spacing: 0; } /* --- la page d'un acte ---------------------------------------------------- La notice (titre, marques, métadonnées) puis le texte (toute la largeur disponible, dans la police de l'interface), puis les blocs (pièces, signature, versions) : la décision est INTÉGRÉE à la page, comme sur un recueil officiel en ligne. */ .recueil-notice { padding-bottom: 18px; border-bottom: 1px solid var(--border); } .recueil-notice__marques { display: flex; gap: 7px; flex-wrap: wrap; margin: 0 0 12px; } .recueil-notice__titre { margin: 0; font-family: var(--font-ui); font-size: 1.75rem; line-height: 1.28; font-weight: 700; color: var(--ink); letter-spacing: -.01em; } .recueil-notice__sous { margin: 8px 0 0; font-size: .88rem; color: var(--ink-muted); } /* L'avertissement d'un texte publié A TITRE INFORMATIF (un règlement) : il ne doit pas se confondre avec un acte opposable — la phrase le dit, et le style la met en avant sans crier. */ .recueil-notice__info { margin: 12px 0 0; padding: 10px 12px; font-size: .86rem; line-height: 1.5; color: var(--ink-2); background: var(--bg-alt); border-left: 3px solid var(--border-strong); border-radius: 3px; } /* Le bloc de métadonnées : la touche d'un recueil officiel. */ .recueil-meta { display: flex; flex-wrap: wrap; gap: 8px 30px; margin: 16px 0 0; padding: 12px 16px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); } .recueil-meta__item { display: flex; gap: 6px; align-items: baseline; font-size: .84rem; } .recueil-meta dt { color: var(--ink-muted); } .recueil-meta dd { margin: 0; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; } .recueil-meta__eli dd { font-weight: 400; } .recueil-meta__eli code { font-family: var(--font-mono); font-size: .78rem; word-break: break-all; } .recueil-lecture { margin-top: 26px; } /* --- les blocs sous le texte ---------------------------------------------- */ .recueil-bloc { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--border); } .recueil-bloc__title { margin: 0 0 12px; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); font-weight: 700; } .recueil-pieces { display: flex; flex-wrap: wrap; gap: 8px; } .recueil-versions { display: flex; flex-direction: column; } .recueil-version { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px solid var(--border); flex-wrap: wrap; } .recueil-version:first-child { border-top: 0; } .recueil-version.is-on { font-weight: 600; } .recueil-version__texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .recueil-version__fin { display: flex; align-items: center; gap: 8px; } .recueil-dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 16px; margin: 0 0 12px; font-size: .85rem; } .recueil-dl dt { color: var(--ink-muted); } .recueil-dl dd { margin: 0; overflow-wrap: anywhere; } /* Sur un téléphone, la colonne des libellés mange celle des valeurs : une empreinte SHA-256 (64 caractères) devient illisible. On empile. */ @media (max-width: 640px) { .recueil-dl { grid-template-columns: 1fr; gap: 0; } .recueil-dl dt { margin-top: 9px; font-size: .78rem; } .recueil-dl dd { font-size: .84rem; } } .recueil-side__note { color: var(--ink-muted); font-size: .8rem; } .recueil-verif-box { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .recueil-verif { margin: 0; font-size: .84rem; } .recueil-verif.is-ok { color: var(--success); } .recueil-verif.is-ko { color: var(--error); } /* --- l'original d'un acte du CIRCUIT EXTERNE : la version signée (PDF) ----- Le recueil la montre TELLE QU'ELLE A ÉTÉ MISE EN LIGNE : un cadre de lecture, et le lien pour l'ouvrir ou la télécharger quand l'affichage intégré n'est pas disponible (mobile, visionneuse absente). */ .recueil-pdf { margin: 0 0 12px; } .recueil-pdf__frame { width: 100%; height: 70vh; min-height: 380px; display: block; border: 1px solid var(--border-strong); border-radius: var(--radius); background: #fff; } @media (max-width: 820px) { .recueil-pdf__frame { height: 58vh; min-height: 320px; } } @media print { .recueil-pdf { display: none !important; } } .recueil-certif { border-left: 4px solid var(--brand-public, var(--brand)); background: var(--bg); padding: 12px 14px; border-radius: 3px; margin: 0 0 12px; } .recueil-certif__titre { margin: 0 0 6px; font-size: .95rem; } .recueil-certif__statut { font-weight: 600; } .recueil-certif__points { margin: 8px 0 0; padding-left: 18px; font-size: .82rem; color: var(--ink-2); } .recueil-vide { background: var(--bg); border: 1px dashed var(--border-strong); border-radius: var(--radius); padding: 26px 22px; text-align: center; color: var(--ink-2); } .recueil-vide h2 { margin-top: 0; } /* Les actions d'un écran vide (réessayer, revenir) : centrées comme lui, un intervalle entre elles — voir la panne passagère du recueil public. */ .recueil-vide__actions { display: flex; gap: 12px; justify-content: center; align-items: center; margin-top: 14px; flex-wrap: wrap; } /* Le pied du recueil : le texte suit l'alignement du contenu (à gauche). Un pied centré sous un contenu aligné à gauche se lit mal et désoriente. */ .recueil-pied { border-top: 1px solid var(--border); background: var(--bg); padding: 16px 20px; text-align: left; } /* Lien d'évitement du recueil : hors écran jusqu'à ce qu'il ait le focus. Au clavier, la première tabulation l'atteint et mène droit au contenu (RGAA 12.7 — « aller au contenu principal »). */ .recueil-evitement { position: absolute; left: -9999px; top: 0; z-index: 100; } .recueil-evitement:focus { position: fixed; left: 12px; top: 12px; z-index: 100; background: var(--bg); color: var(--ink); padding: 10px 14px; border: 2px solid var(--focus); border-radius: var(--radius); text-decoration: none; } .recueil-pied__ligne { margin: 0 0 3px; font-size: .84rem; color: var(--ink-2); } .recueil-pied__note { margin: 0; font-size: .76rem; color: var(--ink-muted); } .recueil-pied__ouvert { margin: 6px 0 0; font-size: .76rem; color: var(--ink-muted); } .recueil-pied__sep { color: var(--border-strong); } /* --- Les mentions du pied de page ---------------------------------------- Les mentions légales et les mentions d'accessibilité de l'espace public (voir src/lib/recueil.js, `mentionsPubliques`). Un texte se replie sous son titre — présent dans la page, mais sans noyer le pied de page ; un lien s'affiche tel quel. Le tout reste aligné à gauche dans un pied centré. */ .recueil-pied__mentions { max-width: 780px; margin: 14px 0 0; text-align: left; } .recueil-mention { border-top: 1px solid var(--border); padding: 9px 0 2px; } .recueil-mention[open] { padding-bottom: 8px; } .recueil-mention__titre { cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--ink-2); } .recueil-mention__titre:hover { color: var(--ink); } .recueil-mention__titre::marker { color: var(--border-strong); } .recueil-mention__texte { font-size: .8rem; line-height: 1.55; color: var(--ink-2); } .recueil-mention__texte p { margin: 7px 0 0; } .recueil-mention__liste { margin: 7px 0 0; padding-left: 18px; } .recueil-pied__mention-lien { margin: 9px 0 0; font-size: .82rem; } /* --- « Vous ne trouvez pas ce que vous recherchez ? » ---------------------- Le renvoi du recueil vers les recueils qu'il ne gère pas (recueil « bis », recueils inactifs avec leur période) et vers les sites de référence. Il vit en bas de page de l'espace public, et au bout des résultats de recherche (`.recueil-ailleurs--resultats`) — jamais deux fois sur la même page. */ .recueil-ailleurs { max-width: 780px; margin: 0 auto 18px; padding: 0 0 16px; text-align: left; } .recueil-ailleurs__titre { margin: 0 0 5px; font-size: 1.05rem; } .recueil-ailleurs__lead { margin: 0 0 12px; font-size: .86rem; color: var(--ink-2); } /* La mention des actes à diffusion restreinte (réservés aux agents connectés) : elle se distingue du renvoi vers d'autres recueils, sans crier. */ .recueil-ailleurs__lead--agents { font-size: .82rem; color: var(--ink-muted); border-left: 3px solid var(--border-strong); padding-left: 10px; } .recueil-ailleurs__groupe { margin-top: 12px; } .recueil-ailleurs__groupe-titre { margin: 0 0 6px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); } .recueil-ailleurs__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; } .recueil-ailleurs__item { display: flex; flex-direction: column; gap: 3px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 13px; } .recueil-ailleurs__item.is-inactif { border-style: dashed; } .recueil-ailleurs__lien { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; font-weight: 600; color: var(--brand); text-decoration: none; line-height: 1.35; } .recueil-ailleurs__lien:hover { text-decoration: underline; } .recueil-ailleurs__lien svg { flex: 0 0 auto; opacity: .75; } .recueil-ailleurs__tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; } .recueil-ailleurs__type { border: 1px solid var(--border-strong); border-radius: 3px; padding: 1px 7px; font-size: .71rem; font-weight: 700; letter-spacing: .02em; color: var(--ink-2); } .recueil-ailleurs__type--bis { color: var(--brand); border-color: var(--brand); } .recueil-ailleurs__type--inactif { color: var(--warning); border-color: var(--warning); } .recueil-ailleurs__type--ressource { color: var(--ink-2); } .recueil-ailleurs__periode { font-size: .78rem; color: var(--ink-muted); } .recueil-ailleurs__note { font-size: .82rem; color: var(--ink-2); } .recueil-ailleurs--resultats { max-width: none; margin: 22px 0 0; padding: 16px 0 0; border-top: 1px solid var(--border); } /* --- les sous-pages du site (1.5.3) --------------------------------------- Mentions légales, accessibilité, conditions de réutilisation et informations publiées : chacune a son adresse (« ?page=… », « ?info=… ») et se lit comme une page — un titre, un fil d'Ariane, une largeur de lecture confortable. */ .recueil-souspage { max-width: min(var(--recueil-largeur), 900px); } .recueil-souspage__tete { margin: 6px 0 18px; } .recueil-souspage__titre { margin: 0; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); line-height: 1.2; letter-spacing: -.01em; } .recueil-souspage__chapo { margin: 10px 0 0; max-width: 68ch; font-size: 1rem; color: var(--ink-2); } .recueil-souspage__texte > p { margin: 0 0 1em; max-width: 78ch; line-height: 1.65; } .recueil-souspage__texte .recueil-mention__liste { max-width: 78ch; line-height: 1.65; } /* --- les informations (les billets de l'administration) -------------------- Côté public, une information se présente comme un billet : une date, un titre, un résumé, et le renvoi vers la page complète. Sur l'accueil, trois cartes ; sur la page des informations, la liste entière. */ .recueil-reserve-note { display: flex; align-items: center; gap: 9px; margin: 0; padding: 9px 13px; border: 1px solid var(--border-strong); border-left: 3px solid var(--error); border-radius: calc(var(--radius) + 2px); background: var(--bg); color: var(--ink-2); font-size: .84rem; } .recueil-reserve-note svg { flex: none; color: var(--error); } .recueil-infos__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .recueil-infos__liste--accueil { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); } .recueil-info-carte { background: var(--bg); border: 1px solid var(--border); border-radius: calc(var(--radius) + 2px); box-shadow: 0 1px 2px rgb(0 0 0 / .04); transition: box-shadow .15s ease, transform .15s ease; } .recueil-info-carte:hover { box-shadow: 0 8px 20px rgb(0 0 0 / .10); transform: translateY(-2px); } .recueil-info-carte.is-epinglee { border-top: 3px solid var(--brand); } .recueil-info-carte__lien { display: flex; flex-direction: column; gap: 6px; padding: 15px 16px; height: 100%; text-decoration: none; color: inherit; } .recueil-info-carte__epingle { align-self: flex-start; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--brand); } .recueil-info-carte__date { font-size: .78rem; color: var(--ink-muted); } .recueil-info-carte__titre { font-size: 1.05rem; font-weight: 650; line-height: 1.32; } .recueil-info-carte__lien:hover .recueil-info-carte__titre { color: var(--brand); } .recueil-info-carte__resume { font-size: .88rem; line-height: 1.5; color: var(--ink-2); } .recueil-info-carte__pied { display: flex; gap: 12px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; font-size: .76rem; color: var(--ink-muted); } .recueil-info { max-width: 78ch; } .recueil-info__meta { margin: 6px 0 8px; font-size: .82rem; color: var(--ink-muted); } .recueil-info__titre { margin: 0; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); line-height: 1.2; letter-spacing: -.01em; } .recueil-info__chapo { margin: 12px 0 4px; font-size: 1.02rem; line-height: 1.6; color: var(--ink-2); } .recueil-info__corps { margin-top: 18px; line-height: 1.65; } .recueil-info__corps .md-h2 { font-size: 1.2rem; } .recueil-info__retour { margin: 26px 0 0; padding-top: 14px; border-top: 1px solid var(--border); font-size: .86rem; } .recueil-info-carte__resume, .recueil-info__chapo { text-wrap: pretty; } /* --- LE BULLETIN : la page des numéros, la page d'un numéro, l'abonnement -- Le bulletin est le recueil rassemblé par période : mêmes cartes, mêmes listes, un cran plus sobre — un sommaire de numéros, puis dans un numéro les entités, leurs thématiques et leurs actes. */ .recueil-bulletins-zone { margin: 26px 0 0; } .recueil-bulletins-zone__chapo { margin: 6px 0 0; max-width: 70ch; font-size: .92rem; color: var(--ink-2); } .recueil-bulletins__cadence { margin: 8px 0 0; font-size: .88rem; color: var(--ink-2); } .recueil-bulletins__liens { margin: 8px 0 0; font-size: .86rem; } .recueil-bulletins__liste { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; } .recueil-bulletins__item { display: flex; flex-direction: column; gap: 3px; padding: 13px 15px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); } .recueil-bulletins__titre { font-weight: 650; line-height: 1.3; text-decoration: none; color: var(--ink); } .recueil-bulletins__titre:hover { color: var(--brand); } .recueil-bulletins__meta { font-size: .84rem; color: var(--ink-muted); } .recueil-bulletins__formats { font-size: .8rem; } .recueil-bulletin { margin-top: 10px; } .recueil-bulletin__entite { margin: 24px 0 0; } .recueil-bulletin__nom { margin: 0 0 6px; padding-bottom: 5px; border-bottom: 2px solid var(--brand); font-size: .84rem; text-transform: uppercase; letter-spacing: .07em; color: var(--brand); } .recueil-bulletin__theme > h3 { margin: 16px 0 6px; font-size: 1rem; } .recueil-bulletin__actes { list-style: none; margin: 0; padding: 0; } .recueil-bulletin__acte { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--border); } .recueil-bulletin__meta { font-size: .82rem; color: var(--ink-muted); } /* L'abonnement : un formulaire simple, dans une carte, avec sa phrase de double consentement — on ne s'étonne pas de ne rien recevoir tout de suite. */ .recueil-abon { margin: 20px 0 8px; padding: 16px 18px; max-width: 560px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius); } .recueil-abon__titre { margin: 0 0 6px; font-size: 1.05rem; } .recueil-abon__aide { margin: 0 0 12px; font-size: .9rem; color: var(--ink-2); } .recueil-abon__form { display: flex; flex-direction: column; gap: 6px; } .recueil-abon__label { font-size: .82rem; color: var(--ink-muted); } .recueil-abon__message { margin: 6px 0 0; } .recueil-pied__bulletin { margin: 8px 0 0; font-size: .82rem; } /* --- l'écran d'administration du Bulletin --------------------------------- Des chiffres d'abord (cadence, prochaine parution, abonnés), puis des tableaux : les numéros, les abonnés, les envois. */ .bul-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 14px 0 6px; } .bul-stat { display: flex; flex-direction: column; gap: 2px; padding: 11px 13px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); } .bul-stat__l { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); } .bul-stat__v { font-size: 1.02rem; } .bul-stat__d { font-size: .78rem; color: var(--ink-muted); } .bul-liens { display: flex; flex-direction: column; gap: 4px; margin: 12px 0 0; font-size: .84rem; } .bul-lien { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .bul-lien .fr-link { word-break: break-all; } .bul-table { width: 100%; } .bul-table__actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; } .bul-apercu { border-left: 4px solid var(--brand); } .bul-apercu__tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .bul-apercu__actions { margin-top: 12px; } .bul-corps { margin-top: 12px; } .bul-ent { margin: 16px 0 0; } .bul-ent__nom { margin: 0 0 4px; padding-bottom: 4px; border-bottom: 1px solid var(--border-strong); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--brand); } .bul-ent__theme { margin: 12px 0 2px; font-size: .88rem; font-weight: 600; } .bul-ent__actes { list-style: none; margin: 0; padding: 0 0 0 14px; } .bul-ent__actes li { padding: 3px 0; } /* --- le pied de page : le sommaire du site et la porte de l'application ---- */ .recueil-pied__pages { margin: 12px 0 0; font-size: .82rem; } .recueil-pied__acces { margin: 14px 0 0; } .recueil-pied__connexion { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--bg); color: var(--ink); font-weight: 600; font-size: .86rem; text-decoration: none; } .recueil-pied__connexion:hover { border-color: var(--brand); color: var(--brand); background: var(--bg-alt); } .recueil-pied__licence { margin: 4px 0 0; font-size: .76rem; color: var(--ink-muted); } /* La mention de l'éditeur du logiciel ferme le pied de page du recueil (voir src/ui/mention.js) : « Propulsé par Scribae — GPLv3 ». Elle se règle dans Administration › Identité, et vaut « affichée » par défaut. */ .recueil-pied__propulse { margin: 10px 0 0; font-size: .76rem; color: var(--ink-muted); } .mention-editeur__lien { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .mention-editeur__lien:hover { color: var(--brand); } /* --- le recueil ouvert : les représentations lisibles par machine --------- Un acte publié est une donnée publique : sous une adresse propre (`?acte=&format=md` sur la page, `/recueil/.md` sur un déploiement serveur), il se sert sans aucun habillage de site — le document seul, tel qu'un moteur ou un agent le lit. */ .recueil-machine { background: var(--bg); min-height: 100vh; padding: 20px clamp(16px, 4vw, 48px) 40px; } .recueil-machine__contenu { margin: 0; font-family: var(--font-mono); font-size: .82rem; line-height: 1.6; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; } .recueil-machine__note { margin: 22px 0 0; padding-top: 14px; border-top: 1px solid var(--border); font-size: .8rem; color: var(--ink-muted); } /* --- les adresses du recueil ouvert, sous le texte de l'acte -------------- */ .recueil-donnees__resume { cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--brand); } .recueil-donnees > p { margin: 12px 0; } .recueil-donnees__titre { margin: 18px 0 4px; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); } .recueil-adresse { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0; } .recueil-adresse + .recueil-adresse { border-top: 1px solid var(--border); } .recueil-adresse__url { font-family: var(--font-mono); font-size: .78rem; color: var(--brand); overflow-wrap: anywhere; text-decoration: none; } .recueil-adresse__url:hover { text-decoration: underline; } .recueil-adresse__label { flex: 1 1 200px; font-size: .78rem; color: var(--ink-muted); } @media (max-width: 980px) { .recueil-notice__titre { font-size: 1.45rem; } .recueil-lecture { max-width: none; } } @media (max-width: 620px) { .recueil-header__in, .recueil-main { padding-left: 12px; padding-right: 12px; } .recueil--acte .recueil-header__in, .recueil--acte .recueil-main { padding-left: 12px; padding-right: 12px; } .recueil > .app-demo, .recueil--acte > .app-demo { padding-left: 12px; padding-right: 12px; } .recueil-ident__logo, .recueil-ident__logo--mark { height: 34px; width: 34px; } .recueil-item__lien { padding: 10px 4px; } .recueil-select { max-width: none; flex: 1 1 140px; } .recueil-notice__titre { font-size: 1.25rem; } .recueil-badge { padding: 2px 7px; font-size: .68rem; } .recueil-meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 10px; align-items: baseline; padding: 10px 12px; } .recueil-meta__item { display: contents; } /* L'accueil sur un téléphone : l'entrée se resserre, les tuiles s'empilent (une colonne), et le carrousel garde une carte et un peu de la suivante — c'est ce qui montre qu'il y a de la suite. */ .recueil-hero { padding-top: 18px; } .recueil-hero__lead { font-size: .95rem; } .recueil-themes__grille { grid-template-columns: 1fr; } .recueil-carte { flex-basis: min(86vw, 280px); } .recueil-carte__lien { min-height: 0; } .recueil-section { margin-top: 22px; } .recueil-section__tete { align-items: flex-start; } } /* En sombre, les teintes de thème s'éclaircissent : une même couleur ne se lit pas de la même façon sur fond clair et sur fond sombre. */ [data-theme="dark"] .recueil-carte { border-top-color: hsl(var(--h, 220) 58% 58%); } /* La mise en avant garde la couleur de la marque, quelle que soit la teinte du thème : c'est elle qui la distingue des cartes ordinaires. */ [data-theme="dark"] .recueil-carte--une { border-top-color: var(--brand); } [data-theme="dark"] .recueil-carte__theme { color: hsl(var(--h, 220) 70% 74%); } [data-theme="dark"] .recueil-theme__puce { background: hsl(var(--h, 220) 58% 58%); } @media print { .recueil-header, .recueil-bar, .recueil-pied, .recueil-fil, .recueil-pieces, .recueil-verif-box, .recueil-donnees { display: none !important; } /* Le carrousel et les thèmes sont la porte d'entrée : sur le papier, seule la liste compte. */ .recueil-hero, .recueil-carrousel, .recueil-une, .recueil-themes, .recueil-filtres { display: none !important; } .recueil { background: #fff; } .recueil-main { max-width: none; padding: 0; gap: 0; } .recueil-lecture { max-width: none; margin-top: 0; } .recueil-bloc { break-inside: avoid; } } [data-theme="dark"] .recueil-ident__logo--mark { color: #101219; } /* ========================================================================== Les assistants — Plume dans l'atelier, Publia sur le recueil. Deux personnages frère et sœur, posés dans le coin, et le panneau de conversation qui s'ouvre au-dessus d'eux. L'ensemble vit HORS de la coquille (voir src/ui/assistant.js) : il n'est pas reconstruit à chaque redessin, et une conversation en cours ne se perd pas quand on change d'écran. Sa visibilité, elle, suit la route. Le personnage flotte doucement, et s'anime pendant qu'il rédige : c'est le clin d'œil à l'aide contextuelle d'autrefois, en plus discret. ========================================================================== */ .assist { position: fixed; right: 16px; bottom: 16px; z-index: 80; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none; } .assist[hidden] { display: none; } .assist > * { pointer-events: auto; } /* --- la pastille : le personnage, toujours là ---------------------------- */ .assist__pastille { display: inline-flex; align-items: center; gap: 9px; padding: 4px 15px 4px 4px; border: 1px solid var(--border); background: var(--bg); border-radius: 999px; cursor: pointer; font: inherit; box-shadow: 0 8px 22px rgba(16, 18, 25, .18); animation: assist-flotte 4.5s ease-in-out infinite; } .assist__pastille:hover { border-color: var(--brand); box-shadow: 0 10px 26px rgba(16, 18, 25, .24); } .assist__avatar-assis { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; display: block; background: var(--bg-alt); flex: none; } .assist__pastille-nom { font-size: .84rem; font-weight: 600; color: var(--ink); } @keyframes assist-flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } /* Pendant la rédaction, le personnage « travaille » : la pastille respire. */ .assist.is-occupe .assist__avatar-assis { animation: assist-respire 1.3s ease-in-out infinite; } @keyframes assist-respire { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } } /* --- la bulle d'invitation ----------------------------------------------- */ .assist__bulle { position: relative; max-width: min(310px, calc(100vw - 32px)); display: flex; align-items: flex-start; gap: 4px; background: var(--bg); border: 1px solid var(--border-strong); border-radius: 12px; padding: 9px 6px 9px 12px; box-shadow: 0 12px 32px rgba(16, 18, 25, .2); animation: assist-entre .22s ease-out; } .assist__bulle::after { content: ""; position: absolute; right: 24px; bottom: -7px; width: 12px; height: 12px; background: var(--bg); border-right: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong); transform: rotate(45deg); } .assist__bulle-corps { border: 0; background: none; font: inherit; text-align: left; cursor: pointer; padding: 0; display: grid; gap: 2px; } .assist__bulle-tete { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--brand); } .assist__bulle-texte { font-size: .83rem; line-height: 1.4; color: var(--ink); } .assist__bulle-corps:hover .assist__bulle-texte { color: var(--brand); } .assist__bulle-fermer { border: 0; background: none; cursor: pointer; color: var(--ink-muted); display: inline-flex; align-items: center; justify-content: center; padding: 2px; min-width: 24px; min-height: 24px; border-radius: 4px; flex: none; } .assist__bulle-fermer:hover { background: var(--bg-alt); color: var(--ink); } @keyframes assist-entre { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* --- le panneau de conversation ------------------------------------------ */ .assist__panneau { width: min(392px, calc(100vw - 32px)); height: min(566px, calc(100vh - 128px)); display: flex; flex-direction: column; overflow: hidden; background: var(--bg); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 20px 54px rgba(16, 18, 25, .26); animation: assist-entre .18s ease-out; } .assist__tete { display: flex; align-items: center; gap: 10px; flex: none; padding: 9px 10px 9px 12px; border-bottom: 1px solid var(--border); background: var(--bg-alt); } .assist__avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: none; background: var(--bg); border: 1px solid var(--border); } .assist__ident { display: flex; flex-direction: column; line-height: 1.2; flex: 1 1 auto; min-width: 0; } .assist__nom { font-size: .92rem; } .assist__titre { font-size: .72rem; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .assist__tete-outils { display: flex; gap: 2px; flex: none; } .assist__fil { flex: 1 1 auto; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; } .assist__msg { display: flex; gap: 8px; align-items: flex-start; } .assist__msg--moi { justify-content: flex-end; } .assist__mini { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: none; margin-top: 2px; background: var(--bg-alt); } .assist__contenu { max-width: 86%; padding: 8px 11px; border-radius: 12px; font-size: .86rem; line-height: 1.5; background: var(--bg-alt); border: 1px solid var(--border); overflow-wrap: anywhere; } .assist__msg--moi .assist__contenu { background: var(--brand-soft); border-color: transparent; } .assist__contenu > :first-child { margin-top: 0; } .assist__contenu > :last-child { margin-bottom: 0; } .assist__contenu p { margin: 0 0 .55em; } .assist__contenu ul, .assist__contenu ol { margin: 0 0 .55em; padding-left: 1.3em; } .assist__contenu li { margin-bottom: .2em; } .assist__contenu .md-h1, .assist__contenu .md-h2, .assist__contenu .md-h3, .assist__contenu .md-h4 { font-size: .9rem; margin: .55em 0 .3em; } .assist__contenu .md-code { background: var(--bg); border: 1px solid var(--border); border-radius: 3px; padding: 0 3px; font-size: .92em; } .assist__contenu .fr-alert { padding: 8px 10px; } .assist__points { display: inline-flex; gap: 4px; align-items: center; height: 19px; } .assist__points i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-muted); animation: assist-points 1.1s ease-in-out infinite; } .assist__points i:nth-child(2) { animation-delay: .15s; } .assist__points i:nth-child(3) { animation-delay: .3s; } @keyframes assist-points { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } } .assist__pied { flex: none; border-top: 1px solid var(--border); padding: 10px 12px 9px; display: flex; flex-direction: column; gap: 8px; } .assist__suggestions { display: flex; flex-wrap: wrap; gap: 6px; } .assist__suggestion { border: 1px solid var(--border); background: var(--bg); border-radius: 999px; cursor: pointer; font: inherit; font-size: .76rem; padding: 4px 10px; color: var(--brand); text-align: left; } .assist__suggestion:hover { background: var(--brand-soft); border-color: var(--brand); } .assist__avertissement { margin: 0; } .assist__saisie { display: flex; flex-direction: column; gap: 6px; } .assist__champ { width: 100%; min-height: 46px; max-height: 130px; resize: vertical; border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 7px 9px; font: inherit; font-size: .86rem; background: var(--bg); color: var(--ink); } .assist__champ:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); } .assist__champ:disabled { background: var(--bg-alt); } .assist__actions { display: flex; justify-content: flex-end; gap: 6px; } .assist__note { margin: 0; font-size: .68rem; line-height: 1.35; color: var(--ink-muted); } @media (max-width: 620px) { .assist { right: 10px; bottom: 10px; } .assist__panneau { width: calc(100vw - 20px); height: min(566px, calc(100vh - 110px)); } } @media (prefers-reduced-motion: reduce) { .assist__pastille, .assist.is-occupe .assist__avatar-assis { animation: none; } } @media print { .assist { display: none !important; } } /* L'éditeur des questions proposées, dans Administration › Assistants. */ .assist-prompt { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 10px 2px; background: var(--bg-alt); } .assist-prompt__tete { display: flex; align-items: flex-start; gap: 8px; } .assist-prompt__num { flex: none; width: 22px; height: 22px; margin-top: 24px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-size: .72rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .assist-prompt__etiquette { flex: 1 1 auto; min-width: 0; } .assist-prompt .fr-field { margin-bottom: 8px; } .assist-essai:empty { display: none; } .assist-essai { margin-top: 10px; } /* ========================================================================== Organigramme des délégations de signature (src/ui/views/delegations.js). L'arbre est dessiné par des pseudo-éléments, sans un seul
décoratif : le conteneur des enfants porte la descente depuis le parent, et chaque branche porte sa moitié de barre horizontale — la première ne tire que vers la droite, la dernière que vers la gauche, et l'enfant unique n'en a pas. L'accroche (« org- ») est propre à cet écran : ces règles ne peuvent pas déborder sur le reste de l'application. ========================================================================== */ .org-outils { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 2px 0 14px; } .org-lecseule { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 10px 0 0; font-size: .82rem; color: var(--ink-muted); } .org-bascule { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .org-bascule__btn { border: 0; background: var(--bg); color: var(--ink-2); font: inherit; font-size: .82rem; padding: 6px 12px; cursor: pointer; } .org-bascule__btn + .org-bascule__btn { border-left: 1px solid var(--border); } .org-bascule__btn:hover { background: var(--bg-alt); } .org-bascule__btn.is-active { background: var(--brand-soft); color: var(--brand); font-weight: 600; } .org-legende { display: flex; gap: 12px; flex-wrap: wrap; } .org-legende__i { font-size: .72rem; color: var(--ink-muted); } .org-legende__i::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: middle; } .org-legende__i--tete::before { background: var(--brand); } .org-legende__i--del::before { background: var(--info); } .org-legende__i--sous::before { background: var(--warning); } /* --- la toile ------------------------------------------------------------- */ /* L'organigramme est un CANVAS : une fenêtre de hauteur bornée, qu'on déplace au curseur et que la molette (ou la barre de zoom) agrandit — voir src/ui/zoom.js. Sans la borne, la page grandirait avec l'arbre et il n'y aurait rien à déplacer. */ .org-scroll { overflow: auto; padding: 2px 2px 10px; height: min(72vh, 820px); min-height: 280px; } .org { display: flex; gap: 46px; justify-content: center; align-items: flex-start; min-width: max-content; } .org-branch { position: relative; display: flex; flex-direction: column; align-items: center; } .org-children { position: relative; display: flex; justify-content: center; padding-top: 28px; } /* la descente, du bas du parent jusqu'à la barre des enfants */ .org-children::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 28px; background: var(--border-strong); transform: translateX(-50%); } .org-children > .org-branch { padding: 28px 14px 0; } /* la barre horizontale entre frères, puis l'accroche vers chaque nœud */ .org-children > .org-branch::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--border-strong); } .org-children > .org-branch::after { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 28px; background: var(--border-strong); transform: translateX(-50%); } .org-children > .org-branch:first-child::before { left: 50%; } .org-children > .org-branch:last-child::before { right: 50%; } .org-children > .org-branch:only-child::before { display: none; } /* --- un nœud -------------------------------------------------------------- */ .org-node { display: flex; flex-direction: column; gap: 7px; width: 238px; padding: 10px 12px; text-align: left; font: inherit; color: inherit; cursor: pointer; background: var(--bg); border: 1px solid var(--border); border-left: 3px solid var(--border-strong); border-radius: var(--radius); } .org-node:hover { border-color: var(--brand); box-shadow: 0 1px 8px rgba(0, 0, 0, .1); } .org-node:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .org-node--tete { border-left-color: var(--brand); } .org-node--del { border-left-color: var(--info); } .org-node--sous { border-left-color: var(--warning); } .org-node--vide { border-style: dashed; border-left-style: solid; } .org-node--off { background: var(--bg-alt); } .org-node--off .org-node__nom { color: var(--ink-2); } /* Une délégation sans ses deux décisions n'établit pas le pouvoir de signer : le nœud le signale (voir src/lib/delegations.js). */ .org-node--incomplet { box-shadow: inset 0 0 0 1px var(--warning); } .org-node__haut { display: flex; align-items: center; gap: 10px; } .org-node__init { flex: none; width: 34px; height: 34px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: .76rem; font-weight: 700; letter-spacing: .02em; background: var(--bg-contrast); color: var(--ink-2); } .org-node__init--tete { background: var(--brand-soft); color: var(--brand); } .org-node__init--del { background: var(--info-bg); color: var(--info); } .org-node__init--sous { background: var(--warning-bg); color: var(--warning); } .org-node__init--lg { width: 50px; height: 50px; font-size: 1rem; } .org-node__corps { display: flex; flex-direction: column; min-width: 0; } .org-node__nom { font-weight: 600; font-size: .86rem; line-height: 1.25; color: var(--ink); } .org-node__qual { font-size: .75rem; line-height: 1.3; color: var(--ink-muted); } .org-node__pied { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .org-node__ent { font-size: .68rem; font-weight: 600; color: var(--ink-muted); border: 1px solid var(--border); border-radius: 999px; padding: 0 6px; } .org-badge { font-size: .68rem; font-weight: 600; letter-spacing: .02em; padding: 1px 7px; border-radius: 999px; background: var(--bg-contrast); color: var(--ink-2); } .org-badge--tete { background: var(--brand-soft); color: var(--brand); } .org-badge--del { background: var(--info-bg); color: var(--info); } .org-badge--sous { background: var(--warning-bg); color: var(--warning); } .org-badge--off { background: var(--error-bg); color: var(--error); } .org-badge--manque { background: transparent; border: 1px dashed var(--warning); color: var(--warning); } /* --- la liste indentée ---------------------------------------------------- */ .org-liste { display: flex; flex-direction: column; gap: 8px; } .org-liste__ligne { display: flex; align-items: center; gap: 8px; } .org-liste__cran { flex: none; color: var(--border-strong); font-size: .95rem; } .org-node--ligne { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; width: auto; max-width: 680px; flex: 1 1 auto; } /* --- délégations non rattachées ------------------------------------------- */ .org-orph { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } .org-orph__item { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; text-align: left; font: inherit; cursor: pointer; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; } .org-orph__item:hover { border-color: var(--brand); } .org-orph__nom { font-weight: 600; font-size: .86rem; } /* --- la fiche ------------------------------------------------------------- */ .org-fiche { display: flex; flex-direction: column; gap: 12px; } .org-fiche__tete { display: flex; align-items: center; gap: 14px; } .org-fiche__ident { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .org-fiche__nom { font-size: 1.05rem; } .org-fiche__qual { font-size: .9rem; color: var(--ink-2); } .org-fiche__bloc { display: flex; flex-direction: column; } .org-fiche__ligne { display: flex; align-items: baseline; gap: 12px; padding: 6px 0; border-bottom: 1px dotted var(--border); } .org-fiche__ligne:last-child { border-bottom: 0; } .org-fiche__etq { flex: 0 0 210px; font-size: .78rem; color: var(--ink-muted); } .org-fiche__val { flex: 1 1 auto; font-size: .86rem; min-width: 0; } @media (max-width: 760px) { .org-node { width: 210px; } .org { gap: 28px; } .org-fiche__ligne { flex-direction: column; gap: 2px; } .org-fiche__etq { flex: none; } } /* Le thème sombre : l'ombre du survol doit se voir SUR un fond sombre. */ [data-theme="dark"] .org-node:hover { box-shadow: 0 1px 10px rgba(0, 0, 0, .5); } @media print { .org-bascule, .org-legende, .org-orph, .page-head__actions { display: none; } .org-node { break-inside: avoid; } } /* ========================================================================== Organigramme des entités, services et bureaux (src/ui/views/organigramme.js). Même toile que l'organigramme des délégations (voir plus haut) : la vue réutilise ses règles « org- » sans les redéfinir. Ne figurent donc ici que les mailles que les délégations n'ont pas — le SERVICE et le BUREAU. ========================================================================== */ /* Un service : la maille intermédiaire, entre l'entité et le bureau. Sa barre d'accroche est neutre (ni la couleur d'une entité, ni celle d'un bureau). */ .org-node--svc { width: 216px; border-left-color: var(--border-strong); background: var(--bg-alt); } .org-node--svc:hover { background: var(--bg); } /* Un bureau : la maille fine. Le nœud est plus étroit, et sans badge de pied lorsque le nom du service suffit à le situer. */ .org-node--petit { width: 194px; padding: 8px 10px; } .org-node--petit .org-node__nom { font-size: .8rem; font-weight: 500; } .org-node__init--svc { background: var(--bg-contrast); color: var(--ink-2); } .org-legende__i--svc::before { background: var(--border-strong); } /* --- les bureaux d'un service, dans la fiche ------------------------------- */ .org-bureau-ligne { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px dotted var(--border); } .org-bureau-ligne:last-child { border-bottom: 0; } /* ========================================================================== Chrono de numérotation (src/ui/views/chrono.js). Un tableau dense — un rang par ligne — précédé de ses compteurs et de ses filtres. Les deux états qui ne sont PAS des actes ordinaires ont leur présentation propre : le rang jamais attribué (italique grisé) et le numéro annulé (barré) : un trou dans le chrono doit s'expliquer au premier regard. ========================================================================== */ .chrono-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 10px; margin: 2px 0 16px; } .chrono-kpi { display: flex; flex-direction: column; gap: 1px; padding: 10px 12px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius); } .chrono-kpi__val { font-size: 1.42rem; font-weight: 700; line-height: 1.15; } .chrono-kpi__lab { font-size: .78rem; color: var(--ink-2); } .chrono-kpi__det { font-size: .7rem; color: var(--ink-muted); } .chrono-kpi--ok { border-color: var(--success); } .chrono-kpi--ok .chrono-kpi__val { color: var(--success); } .chrono-kpi--libre { border-color: var(--warning); } .chrono-kpi--libre .chrono-kpi__val { color: var(--warning); } .chrono-kpi--annule { border-color: var(--error); } .chrono-kpi--annule .chrono-kpi__val { color: var(--error); } .chrono-filtres { margin-bottom: 14px; } .chrono-filtres__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 10px 16px; margin-top: 10px; } .chrono-filtres__cases { flex-wrap: wrap; gap: 14px; margin-top: 10px; } .chrono-table-wrap { overflow-x: auto; } .chrono-table th, .chrono-table td { vertical-align: middle; } .chrono-th { cursor: pointer; user-select: none; white-space: nowrap; } .chrono-th:hover { color: var(--brand); } .chrono-th.is-sorted { color: var(--brand); } .chrono-th__sens { font-size: .68rem; } .chrono-th--act, .chrono-td--act { width: 1%; text-align: right; white-space: nowrap; } .chrono-objet { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chrono-tr--clic { cursor: pointer; } .chrono-tr--clic:hover { background: var(--bg-alt); } .chrono-tr--libre td { color: var(--ink-muted); font-style: italic; } .chrono-tr--annule td { color: var(--ink-muted); } .chrono-tr--annule td:first-child { text-decoration: line-through; } /* ========================================================================== Référence de l'API REST et son panneau de commande (src/ui/views/api-reference.js). Deux colonnes : à gauche l'index des routes (groupes et opérations), à droite la fiche de l'opération choisie. Sous 900 px, l'index passe au-dessus. ========================================================================== */ .api-ref { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 16px; align-items: start; } .api-ref__side { position: sticky; top: 8px; max-height: calc(100vh - 40px); overflow: auto; } .api-ref__main { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .api-ref__liste { padding: 10px 12px; } .api-ref__groupe { margin: 12px 0 6px; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); } .api-ref__groupe:first-child { margin-top: 2px; } .api-ref__item { display: flex; align-items: flex-start; gap: 8px; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; background: none; border: 0; border-radius: var(--radius); padding: 6px 8px; } .api-ref__item:hover { background: var(--bg-alt); } .api-ref__item.is-on { background: var(--brand-soft); } .api-ref__item.is-on .api-ref__item-nom { color: var(--brand); } .api-ref__item-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .api-ref__item-nom { font-size: .82rem; font-weight: 600; line-height: 1.25; } .api-ref__doc { min-width: 0; } .api-ref__tete { margin-bottom: 0; } .api-ref__chemin { font-size: .86rem; font-weight: 600; overflow-wrap: anywhere; } .api-ref__sous { margin: 16px 0 6px; font-size: .9rem; } .api-ref__commande { min-width: 0; } .api-ref__resultat { display: flex; flex-direction: column; gap: 6px; } .api-ref__corps, .api-ref__curl { margin: 0; padding: 10px 12px; max-height: 320px; overflow: auto; background: var(--bg-contrast); border: 1px solid var(--border); border-radius: var(--radius); font-size: .78rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; } @media (max-width: 900px) { .api-ref { grid-template-columns: minmax(0, 1fr); } .api-ref__side { position: static; max-height: 260px; } } /* ========================================================================== LA PORTE DE SERVICE (src/ui/views/connexion.js). Quand l'annuaire est branché, le formulaire de connexion par mot de passe reste offert SOUS le bouton de l'annuaire, dans un bloc distinct, pour que le compte d'administration du déploiement puisse entrer même si l'annuaire est injoignable. Voir src/ui/oidc.js et src/lib/auth.js. ========================================================================== */ .connexion__local { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); } .connexion__local-titre { margin: 0 0 4px; font-size: .82rem; font-weight: 700; letter-spacing: .02em; } /* Les deux emblèmes d'un en-tête d'acte, quand le second est renseigné : le logo de gauche, le texte au centre, la marque de droite repoussée à l'autre bout du filet (le CSS livré avec la feuille, lui, est engendré par src/lib/styles.js). */ .doc-sheet-header--duo .doc-sheet-headtext { flex: 1 1 auto; } .doc-sheet-header--duo .doc-sheet-logo--right { margin-left: auto; } /* ========================================================================== Informations publiées (l'écran de l'atelier) Les billets du recueil public : une liste à gauche, le billet ouvert à droite. La liste porte sa recherche et son filtre d'état ; le billet porte ses champs, son aperçu et ses deux drapeaux (publiée, épinglée). ========================================================================== */ .infos { display: grid; grid-template-columns: minmax(240px, 300px) 1fr; gap: 16px; align-items: start; margin-top: 14px; } @media (max-width: 860px) { .infos { grid-template-columns: 1fr; } } .infos__liste { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .infos__filtres { display: flex; flex-direction: column; gap: 8px; } .infos__items { display: flex; flex-direction: column; gap: 6px; } .infos__item { display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left; padding: 10px 12px; background: var(--bg); color: inherit; font: inherit; border: 1px solid var(--border); border-radius: calc(var(--radius) + 2px); cursor: pointer; } .infos__item:hover { border-color: var(--border-strong); background: var(--bg-alt); } .infos__item.is-on { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); } .infos__item-haut { display: flex; flex-wrap: wrap; gap: 6px; } .infos__item-titre { font-weight: 600; line-height: 1.35; } .infos__item-pied { display: flex; justify-content: space-between; gap: 10px; font-size: .76rem; color: var(--ink-muted); } .infos__billet { min-width: 0; display: flex; flex-direction: column; gap: 12px; } .infos__vide { padding: 18px; } .infos__billet-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .infos__billet-titres { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; } .infos__billet-corps { display: flex; flex-direction: column; gap: 4px; } .infos__form { display: flex; flex-direction: column; gap: 12px; } .infos__deux { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; } .infos__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 4px; } .infos__actions-pousse { flex: 1 1 auto; } .infos__apercu { display: flex; flex-direction: column; gap: 8px; } .infos__lecture { padding: 16px; background: var(--bg); border: 1px solid var(--border); border-radius: calc(var(--radius) + 2px); } .infos__lecture-meta { margin: 0 0 6px; font-size: .8rem; color: var(--ink-muted); } .infos__lecture-titre { margin: 0 0 8px; font-size: 1.35rem; line-height: 1.25; } .infos__lecture-chapo { margin: 0 0 12px; color: var(--ink-2); } .infos__lecture-corps { max-width: 78ch; } /* Une zone de texte qui contient du CODE (CSS de la collectivité, liste d'adresses) : police à chasse fixe, interligne serré, retour à la ligne désactivé — une liste d'adresses se lit ligne par ligne. */ .code-area { font-family: var(--font-mono); font-size: .8rem; line-height: 1.5; white-space: pre; overflow-wrap: normal; overflow-x: auto; }