/* Système de design Complia — tokens alignés sur templates/report-shell.html.njk (même marque que les rapports clients), tous vérifiés AA (server-a11y.test.js). */ :root { --brand: #0f4c81; --brand-deep: #0b3a63; --accent: #9ecbff; --ink: #12161b; --muted: #5b6770; --line: #d9e0e7; --bg: #ffffff; --bg-soft: #f6f8fa; --bg-brand-soft: #eef3f9; --ok: #1e7a46; --ok-soft: #e8f4ed; --warn: #995c00; --warn-soft: #fbf1e2; --ko: #a92e2e; --ko-soft: #f9ebeb; --nt: #5b6770; --nt-soft: #eef1f3; --radius: 10px; --radius-sm: 6px; --shadow: 0 1px 3px rgba(18,22,27,.08), 0 1px 2px rgba(18,22,27,.06); --shadow-lg: 0 4px 16px rgba(18,22,27,.10); } * { box-sizing: border-box; } body { font-family: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; margin: 0; color: var(--ink); background: var(--bg-soft); line-height: 1.55; -webkit-font-smoothing: antialiased; } /* Complément de libellé réservé aux technologies d'assistance : plusieurs boutons « Supprimer » dans une même page ont besoin d'un nom accessible distinct (WCAG 2.4.6), sans alourdir l'affichage visuel. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip { position: absolute; left: -9999px; } .skip:focus { left: 8px; top: 8px; z-index: 10; background: #fff; padding: .5rem .75rem; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); } /* En-tête applicatif */ header.topbar { background: linear-gradient(180deg, var(--brand) 0%, var(--brand-deep) 100%); color: #fff; padding: 0 1.25rem; display: flex; gap: 1.25rem; align-items: center; min-height: 3.5rem; box-shadow: var(--shadow); } header.topbar a { color: #fff; text-decoration: none; } .brand { display: flex; align-items: center; gap: .55rem; font-weight: 700; font-size: 1.1rem; letter-spacing: .01em; } .brand svg { display: block; width: 28px; height: 28px; border-radius: 7px; } header.topbar nav { display: flex; gap: 1rem; } header.topbar nav a { opacity: .92; padding: .35rem .1rem; border-bottom: 2px solid transparent; } header.topbar nav a:hover { opacity: 1; border-bottom-color: var(--accent); } .topbar-spacer { margin-left: auto; } .logout-btn { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.28); margin: 0; padding: .4rem .9rem; border-radius: 99px; font-size: .85rem; } .logout-btn:hover { background: rgba(255,255,255,.2); } /* Fil d'Ariane */ nav.breadcrumb { max-width: 64rem; margin: 1rem auto 0; padding: 0 1.25rem; } nav.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; font-size: .875rem; color: var(--muted); } nav.breadcrumb li { display: flex; align-items: center; gap: .35rem; } nav.breadcrumb li + li::before { content: "›"; color: var(--line); } nav.breadcrumb a { color: var(--brand); text-decoration: none; } nav.breadcrumb a:hover { text-decoration: underline; } nav.breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 600; } main { max-width: 64rem; margin: 0 auto; padding: 1.25rem 1.25rem 3rem; } h1 { font-size: 1.6rem; letter-spacing: -.01em; margin: .75rem 0 1rem; } h2 { font-size: 1.2rem; margin: 1.75rem 0 .75rem; padding-bottom: .35rem; border-bottom: 1px solid var(--line); } h3 { font-size: 1.02rem; margin: 1.5rem 0 .5rem; } /* Cartes */ .card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem; box-shadow: var(--shadow); margin-top: 1rem; } .card > :first-child { margin-top: 0; } /* Grille de KPI */ .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .75rem; margin-top: 1rem; } .kpi { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; box-shadow: var(--shadow); } /* min-height = 2 lignes de libellé : les libellés courts (1 ligne) réservent quand même la place de 2, pour que TOUS les chiffres démarrent à la même ligne quel que soit le retour à la ligne du libellé (ex. « CRITÈRES APPLICABLES »). */ .kpi .kpi-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; line-height: 1.25; min-height: 2.5em; } .kpi .kpi-value { font-size: 1.7rem; font-weight: 700; margin-top: .2rem; line-height: 1.1; } .kpi .kpi-hint { font-size: .8rem; color: var(--muted); margin-top: .15rem; } /* Formulaires */ label { display: block; margin-top: .85rem; font-weight: 600; font-size: .92rem; } /* display:block : chaque contrôle sur sa propre ligne, sinon un bouton placé après un champ (ex. « Créer la définition » après le textarea Notes) flotte à droite du champ au lieu de passer dessous. Les cases à cocher (dans un label flex) restent inline via leur contexte flex. */ input, select, textarea { display: block; font: inherit; padding: .5rem .6rem; margin-top: .3rem; width: 100%; max-width: 26rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; color: var(--ink); } input:focus, select:focus, textarea:focus { border-color: var(--brand); } fieldset { border: 1px solid var(--line); border-radius: var(--radius-sm); margin-top: 1rem; padding: .5rem 1rem 1rem; } fieldset label { display: flex; align-items: center; gap: .5rem; font-weight: 500; } fieldset input[type="checkbox"] { width: auto; margin: 0; } legend { font-weight: 700; padding: 0 .4rem; } /* Boutons */ button, .btn { font: inherit; font-weight: 600; margin-top: 1rem; padding: .55rem 1.15rem; cursor: pointer; border: 1px solid var(--brand); border-radius: var(--radius-sm); background: var(--brand); color: #fff; display: inline-block; text-decoration: none; } button:hover, .btn:hover { background: var(--brand-deep); border-color: var(--brand-deep); } .btn-ghost { background: #fff; color: var(--brand); } .btn-ghost:hover { background: var(--bg-brand-soft); color: var(--brand-deep); } .btn-danger { background: #fff; color: var(--ko); border-color: var(--ko); } .btn-danger:hover { background: var(--ko-soft); } .btn-sm { margin-top: 0; padding: .25rem .6rem; font-size: .82rem; font-weight: 600; } .actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } /* Dans un groupe d'actions, aucun élément ne porte le margin-top par défaut des boutons : sinon boutons, liens .btn et
se désalignent verticalement les uns par rapport aux autres. */ .actions form, .actions button, .actions .btn { margin-top: 0; } /* Tableaux */ table { border-collapse: collapse; width: 100%; margin-top: 1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } caption { text-align: left; color: var(--muted); font-size: .88rem; padding: .5rem .75rem; } th, td { border-bottom: 1px solid var(--line); padding: .6rem .75rem; text-align: left; vertical-align: top; } thead th { background: var(--bg-brand-soft); color: var(--brand-deep); font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; } tbody tr:last-child td { border-bottom: 0; } tbody tr:hover { background: var(--bg-soft); } /* Badges de statut de conformité (fond plein, texte blanc — tous AA) */ .badge { display: inline-block; padding: .2em .6em; border-radius: var(--radius-sm); font-size: .8rem; font-weight: 700; color: #fff; background: var(--nt); letter-spacing: .01em; white-space: nowrap; line-height: 1.3; } .badge.s-ok { background: var(--ok); } .badge.s-warn { background: var(--warn); } .badge.s-ko { background: var(--ko); } .badge.s-nt { background: var(--nt); } a { color: var(--brand); } a:hover { color: var(--brand-deep); } ul, ol { padding-left: 1.2rem; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } [role="alert"] { border: 1px solid var(--ko); background: var(--ko-soft); color: var(--ko); padding: .6rem 1rem; margin-top: 1rem; border-radius: var(--radius-sm); } .muted { color: var(--muted); } .nowrap { white-space: nowrap; } pre { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .75rem; overflow-x: auto; } /* Disclosure (formulaires de création repliés) */ details.disclosure { margin-top: 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-soft); } details.disclosure > summary { cursor: pointer; font-weight: 600; color: var(--brand); padding: .6rem .9rem; list-style: none; } details.disclosure > summary::-webkit-details-marker { display: none; } details.disclosure > summary::before { content: "＋"; display: inline-block; width: 1.1em; font-weight: 700; } details.disclosure[open] > summary::before { content: "－"; } details.disclosure[open] > summary { border-bottom: 1px solid var(--line); } details.disclosure > *:not(summary) { padding: 0 .9rem 1rem; } details.disclosure form { margin-top: .5rem; } /* Le 
 du Journal vit déjà dans la boîte du disclosure : pas de double
   cadre (bordure + fond) imbriqué, juste le texte monospace. */
#job-log { border: 0; background: transparent; padding: .6rem .9rem; margin: 0; }

/* Bandeau d'activité (jobs en cours) — signalé, compact, non dominant. */
.banner { border-left: 4px solid var(--brand); background: var(--bg-brand-soft); }
.banner .banner-title { font-weight: 700; color: var(--brand-deep); }
.job-line { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .5rem 0; border-top: 1px solid var(--line); }
.job-line:first-of-type { border-top: 0; }
.job-line .job-meta { color: var(--muted); font-size: .9rem; }
.job-line .spacer { margin-left: auto; }

/* En-tête de fiche : titre + méta + action principale sur une ligne */
.page-head { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: baseline; justify-content: space-between; }
.page-head h1 { margin-bottom: .25rem; }

/* Rapports d'un audit : une ligne par document, ses formats à droite. */
.report-row { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; padding: .65rem 0; border-top: 1px solid var(--line); }
.report-row:first-child { border-top: 0; }
.report-name { font-weight: 600; }
.report-row .btn { margin-top: 0; padding: .35rem .8rem; font-size: .85rem; }
/* Grille de captures d'écran (évidences) */
.shot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .6rem; }
.shot-grid img { width: 100%; height: 96px; object-fit: cover; object-position: top; border: 1px solid var(--line); border-radius: 6px; background: #fff; display: block; }

/* Viewer de rapport */
.report-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; margin-top: 1rem; }
.report-frame { width: 100%; height: calc(100vh - 15rem); min-height: 30rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); margin-top: .75rem; }

/* ── Utilitaires d'espacement ───────────────────────────────────────────────
   Remplacent les anciens attributs `style=` inline des vues. Un seul style=
   inline rendrait `style-src 'self'` inapplicable, et une CSP relâchée en
   'unsafe-inline' ne protège de rien : ces classes sont la contrepartie du
   garde-fou test/views-no-inline-style.test.js.
   Déclarées EN DERNIER : à specificité égale (0,1,0) avec les règles de
   composants ci-dessus (.btn, .card…), c'est l'ordre source qui tranche.
   Les valeurs reprennent à l'identique celles des styles inline supprimés —
   l'extraction ne change aucun rendu. */
.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }
.mt-lg { margin-top: 1.5rem; }
.stack-xs { margin: .25rem 0 0; }
.stack-sm { margin: .5rem 0 0; }
.stack-md { margin: .6rem 0 0; }
.stack-lg { margin: .75rem 0 0; }
.mb-xs { margin: 0 0 .25rem; }
.fw-normal { font-weight: 400; }

/* Indicateur de chargement htmx.
   htmx injecte normalement ces règles dans une balise