/* Ouvrage — charte de Peevo Sightline (« instrument », cote au millimètre), couleur principale #42145F.
 *
 * Deux déclinaisons d'une même charte : claire par défaut (lecture de documents),
 * sombre au choix ou selon le système. Toute couleur ajoutée doit exister dans les
 * trois blocs (clair, sombre système, sombre forcé).
 */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600 800; font-display: swap; src: url('fonts/archivo.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/plex-sans.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/plex-sans-italic.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/plex-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/plex-mono-500.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/montserrat-700.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/montserrat-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/plex-mono-600.woff2') format('woff2'); }

:root {
  color-scheme: light;
  --bg: #f5f4f7;
  --panel: #ffffff;
  --panel-2: #ece9f0;
  --raised: #ffffff;
  --ink: #1d1724;
  --muted: #655c70;
  --line: #dcd7e2;
  --line-soft: #e8e4ed;
  --accent: #42145f;
  --accent-ink: #ffffff;
  --ok: #1f7a4d;
  --warn: #9c6f13;
  --bad: #b23a2b;
  --mark: #f3e3a6;
  --viewer: #ffffff;
  --text: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --marque: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: #131016; --panel: #1d1922; --panel-2: #25202b; --raised: #2d2733;
    --ink: #ebe6f0; --muted: #a097ab; --line: #352e3c; --line-soft: #221d27;
    --accent: #b48fd8; --accent-ink: #1a0f22;
    --ok: #2e9e63; --warn: #e4b33c; --bad: #d14b3c; --mark: #5a4a14; --viewer: #131016;
  }
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #131016; --panel: #1d1922; --panel-2: #25202b; --raised: #2d2733;
  --ink: #ebe6f0; --muted: #a097ab; --line: #352e3c; --line-soft: #221d27;
  --accent: #b48fd8; --accent-ink: #1a0f22;
  --ok: #2e9e63; --warn: #e4b33c; --bad: #d14b3c; --mark: #5a4a14; --viewer: #131016;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--text); font-size: 0.875rem; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.012em; margin: 0; text-wrap: balance; }
h1 { font-size: 1.5rem; line-height: 1.2; }
h2 { font-size: 1.0625rem; margin-top: 1.25rem; }
h3 { font-size: 0.95rem; margin-top: 0.75rem; }
h1 small, h2 small { font-family: var(--mono); font-weight: 400; font-size: 0.8rem; color: var(--muted); margin-left: 0.4rem; }
p { margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 0.82rem; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 0.92em; }
.rev { color: var(--bad); }
.icon { flex: none; vertical-align: -0.15em; }

/* ---- Barre haute ---- */
.topbar {
  position: sticky; top: 0; z-index: 50; height: 3rem;
  display: flex; align-items: center; gap: 1.1rem; padding: 0 1.25rem;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.logo { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--marque); font-size: 1rem; line-height: 1; color: var(--ink); white-space: nowrap; margin: 0; }
.logo:hover { text-decoration: none; }
.logo-peevo { font-weight: 700; letter-spacing: -0.01em; }
.logo-sep { width: 1px; height: 0.95em; background: var(--line); }
.logo-app { font-weight: 500; color: var(--accent); }
.op { font-size: 0.78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 16rem; padding-left: 1.1rem; border-left: 1px solid var(--line); }
.tabs { display: flex; gap: 0.15rem; height: 100%; }
.tabs a {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0 0.6rem; height: 100%;
  color: var(--muted); font-size: 0.82rem; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.tabs a:hover { color: var(--ink); text-decoration: none; }
.tabs a[aria-current='page'] { color: var(--ink); border-bottom-color: var(--accent); }
.spacer { flex: 1; }
.quick { position: relative; }
.quick .icon { position: absolute; left: 0.6rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.quick input { width: 15rem; height: 2rem; padding: 0 0.7rem 0 2rem; border-radius: 7px; background: var(--panel-2); border: 1px solid var(--line); color: var(--ink); font: inherit; font-size: 0.82rem; }
.quick input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }

.wrap { max-width: 76rem; margin: 0 auto; padding: 1.75rem 2rem 3rem; display: flex; flex-direction: column; gap: 1rem; }
.wrap.wide { max-width: min(100%, 120rem); padding: 1.25rem 1.5rem 2rem; }

/* ---- En-têtes et blocs ---- */
.head { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.25rem; }
.head p { max-width: 78ch; }
.kick { color: var(--accent); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.68rem; font-weight: 600; margin: 0; }
.sub { font-size: 0.84rem; color: var(--muted); max-width: 78ch; }
.card { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 12px; padding: 1.1rem 1.25rem; }
.cote { display: flex; align-items: center; gap: 0.6rem; color: var(--muted); margin: 1rem 0 0; }
.cote::before, .cote::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.cote span { font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; }

/* Indicateurs */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.75rem; }
.kpis > div, .kpis > a.kpi-lien { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 12px; padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.kpis b { font-family: var(--display); font-weight: 700; font-size: 1.6rem; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.kpis b small { font-family: var(--mono); font-size: 0.8rem; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.kpis span { font-size: 0.78rem; color: var(--muted); line-height: 1.35; }
.small-kpis b { font-size: 1.3rem; }
.t-bloquant { color: var(--bad); } .t-important { color: var(--warn); }
.bar { height: 4px; background: var(--panel-2); border-radius: 2px; overflow: hidden; min-width: 70px; }
.bar i { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.prog { display: flex; align-items: center; gap: 0.6rem; min-width: 11rem; }
.prog .bar { flex: 1; }
.prog .mono { flex: none; width: 4.6rem; text-align: right; color: var(--muted); }
.prog.fini .mono { color: var(--ink); }

/* ---- Tableaux ---- */
.scroll { overflow-x: auto; background: var(--panel); border: 1px solid var(--line-soft); border-radius: 12px; }
table { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
th, td { text-align: left; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
thead th {
  font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--muted); font-weight: 600; border-bottom-color: var(--line); white-space: nowrap;
  position: sticky; top: 0; background: var(--panel);
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: color-mix(in srgb, var(--panel-2) 60%, transparent); }
td.num, th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chemin { display: block; font-size: 0.76rem; color: var(--muted); margin-top: 0.1rem; word-break: break-word; }
.docs td:nth-child(2) { min-width: 20rem; }
tr.total td { font-weight: 600; border-top: 1px solid var(--line); }

/* ---- Pastilles ---- */
.st, .tag {
  display: inline-flex; align-items: center; gap: 0.35rem; height: 1.35rem; padding: 0 0.55rem;
  border-radius: 999px; font-size: 0.72rem; font-weight: 500; white-space: nowrap;
  background: var(--panel-2); color: var(--muted);
}
.tag { font-family: var(--mono); font-size: 0.68rem; border-radius: 5px; height: 1.2rem; padding: 0 0.4rem; }
.st::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.9; }
.st-lu { background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent); }
.st-verifie, span.a-trouve { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
span.a-partiel, .tag.warn { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); }
span.a-manquant, .tag.rev { background: color-mix(in srgb, var(--bad) 13%, transparent); color: var(--bad); }
.st-doublon, .st-hors_perimetre, .st-a_lire { color: var(--muted); }
b.a-trouve { color: var(--ok); } b.a-manquant { color: var(--bad); } b.a-partiel { color: var(--warn); }

/* ---- Filtres, formulaires, boutons ---- */
.filtres { display: flex; flex-wrap: wrap; gap: 0.6rem 0.9rem; align-items: flex-end; padding: 0.8rem 1rem; background: var(--panel); border: 1px solid var(--line-soft); border-radius: 12px; }
.filtres label, .form label, .statut label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.74rem; font-weight: 600; color: var(--muted); }
.filtres label.grow { flex: 1; min-width: 15rem; }
select, input, textarea {
  font: inherit; font-size: 0.85rem; color: var(--ink); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 8px; padding: 0.42rem 0.6rem;
}
select { padding-right: 1.6rem; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.btn {
  display: inline-flex; align-items: center; gap: 0.4rem; height: 2rem; padding: 0 0.85rem;
  background: var(--accent); color: var(--accent-ink); border: 1px solid transparent; border-radius: 7px;
  font: 600 0.8125rem var(--text); white-space: nowrap; cursor: pointer;
}
.btn:hover { filter: brightness(1.08); text-decoration: none; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { background: var(--panel-2); filter: none; }
.btn.quiet { background: transparent; color: var(--muted); border-color: transparent; }
.btn.quiet:hover { color: var(--ink); background: var(--panel-2); filter: none; }
.btn.icon { width: 2rem; padding: 0; justify-content: center; }

/* ---- Fiche document ---- */
.docnav { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; font-size: 0.82rem; }
.docnav .spacer { flex: 1; }
.docname { word-break: break-word; font-size: 1.3rem; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: 1rem; align-items: start; }
.viewer { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.viewer-bar { display: flex; gap: 1rem; padding: 0.5rem 0.9rem; border-bottom: 1px solid var(--line-soft); font-size: 0.8rem; }
.viewer iframe { width: 100%; height: calc(100vh - 12rem); min-height: 32rem; border: 0; background: var(--viewer); }
.placeholder { padding: 4rem 1.25rem; text-align: center; color: var(--muted); }
.side { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 12px; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.75rem; position: sticky; top: 4rem; max-height: calc(100vh - 5rem); overflow: auto; }
.side h2 { font-size: 0.95rem; margin-top: 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--line-soft); }
.meta { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.9rem; margin: 0; font-size: 0.82rem; }
.meta dt { color: var(--muted); } .meta dd { margin: 0; }
.fiche { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.85rem; }
.fiche h3 { font-size: 0.72rem; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); font-weight: 600; margin-top: 0.4rem; }
.fiche ul { padding-left: 1.1rem; margin: 0; display: flex; flex-direction: column; gap: 0.2rem; }

/* ---- Constats ---- */
.constat {
  background: var(--panel); border: 1px solid var(--line-soft); border-radius: 12px;
  padding: 0.9rem 1.1rem 0.9rem 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.85rem;
  position: relative; overflow: hidden;
}
.constat::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--line); }
.constat.g-bloquant::before { background: var(--bad); }
.constat.g-important::before { background: var(--warn); }
.constat.g-a_confirmer::before { background: var(--accent); }
.constat header { display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; }
.constat header b { font-size: 0.92rem; }
.constat header .spacer { flex: 1; }
.constat .pied { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.constat .ink { color: var(--ink); }
.gv-bloquant { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); }
.gv-important { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); }
.gv-a_confirmer { background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent); }
select.compact { font-size: 0.76rem; padding: 0.2rem 1.4rem 0.2rem 0.5rem; height: 1.7rem; border-radius: 6px; }
.side .constat { padding: 0.7rem 0.8rem 0.7rem 1rem; border-color: var(--line); }
.enjeux { display: grid; grid-template-columns: 11rem 1fr; gap: 0.3rem 1rem; margin: 0; font-size: 0.82rem; }
.enjeux dt { color: var(--muted); font-weight: 600; }
.enjeux dd { margin: 0; }
.side .enjeux { grid-template-columns: 1fr; gap: 0.1rem; }
.side .enjeux dd { margin-bottom: 0.3rem; }
blockquote { margin: 0; padding: 0.45rem 0.7rem; background: var(--panel-2); border-radius: 7px; font-family: var(--mono); font-size: 0.76rem; white-space: pre-wrap; color: var(--muted); }
form.inline { display: inline; }
.form { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.6rem; }
.form .row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
details summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 0.82rem; }

/* ---- Texte extrait, recherche, journal ---- */
.texte { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 12px; padding: 0.9rem 1.1rem; }
.texte h3 { display: flex; gap: 0.5rem; align-items: center; }
.texte pre { white-space: pre-wrap; font-family: var(--mono); font-size: 0.76rem; background: var(--panel-2); border-radius: 8px; padding: 0.7rem 0.8rem; max-height: 26rem; overflow: auto; }
.resultats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.resultats li { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 12px; padding: 0.8rem 1rem; }
.resultats .titre { font-weight: 600; word-break: break-word; color: var(--ink); }
.resultats .chemin { margin: 0.15rem 0 0.4rem; display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.extrait { font-size: 0.82rem; margin: 0.25rem 0; color: var(--muted); }
.extrait a { margin-right: 0.3rem; }
mark { background: var(--mark); color: var(--ink); padding: 0 2px; border-radius: 2px; }
.journal { list-style: none; padding: 0; margin: 0; font-size: 0.82rem; display: flex; flex-direction: column; }
.journal li { padding: 0.45rem 0; border-bottom: 1px solid var(--line-soft); display: flex; gap: 0.75rem; flex-wrap: wrap; }
.journal li:last-child { border-bottom: 0; }
.journal.card { padding: 0.3rem 1.1rem; }
.journal .mono { color: var(--muted); min-width: 9.5rem; }
.sommaire { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.sommaire a { padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--panel-2); color: var(--ink); font-size: 0.78rem; }

/* ---- Synthèse et courrier (écran et impression) ---- */
.sommaire a[aria-current='page'] { background: var(--accent); color: var(--accent-ink); }
.doc-imprime { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 12px; padding: 2rem 2.25rem; display: flex; flex-direction: column; gap: 0.9rem; }
.doc-imprime section { display: flex; flex-direction: column; gap: 0.7rem; }
.doc-entete { display: flex; flex-direction: column; gap: 0.3rem; }
.liste-courte { margin: 0; padding-left: 1.4rem; display: flex; flex-direction: column; gap: 0.3rem; }
.liste-courte .st { margin-right: 0.3rem; }
table.manques { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
table.manques th, table.manques td { text-align: left; vertical-align: top; padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--line-soft); }
table.manques td[rowspan] { font-weight: 600; }
.courrier { font-size: 0.92rem; max-width: 52rem; }
.courrier .adresses { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.courrier .dest { padding-top: 4rem; }
.courrier .lieu { text-align: right; }
.courrier .lot h3 { margin-top: 0.4rem; }
.courrier ol { margin: 0; padding-left: 1.6rem; display: flex; flex-direction: column; gap: 0.55rem; }
.courrier .ref { font-size: 0.8rem; color: var(--muted); word-break: break-word; }
.courrier .prio { font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bad); margin-left: 0.3rem; }
.a-remplir { background: var(--mark); border-radius: 3px; padding: 0 0.2rem; }
body.export .doc-imprime { border: 0; }

@media print {
  @page { size: A4; margin: 16mm 15mm; }
  body { background: #fff; font-size: 10pt; }
  .topbar, .noprint { display: none !important; }
  .wrap { max-width: none; padding: 0; }
  .doc-imprime { border: 0; padding: 0; border-radius: 0; }
  .courrier { max-width: none; font-size: 10.5pt; }
  .saut { break-before: page; }
  .constat, .courrier li, table.manques tr { break-inside: avoid; }
  .constat { border-color: #ccc; }
  .a-remplir { background: none; }
}

@media (max-width: 1100px) {
  .tabs a span { display: none; }
  .op { display: none; }
}
@media (max-width: 1000px) {
  .split { grid-template-columns: 1fr; }
  .side { position: static; max-height: none; }
}
@media (max-width: 720px) {
  .topbar { padding: 0 0.9rem; gap: 0.6rem; overflow-x: auto; }
  .quick input { width: 9rem; }
  .wrap { padding: 1rem 0.9rem 2rem; }
  .enjeux { grid-template-columns: 1fr; }
}

/* ---- Connexion (écran partagé, comme Sightline) et compte ---- */
.page-connexion { position: fixed; inset: 0; display: grid; grid-template-columns: minmax(360px, 440px) minmax(0, 1fr); }
.cnx-cote { display: flex; align-items: center; justify-content: center; padding: 2.5rem; background: var(--panel); border-right: 1px solid var(--line); }
.cnx-form { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 0.95rem; }
.cnx-form label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.74rem; font-weight: 600; color: var(--muted); }
.cnx-form input { height: 2.5rem; }
.cnx-form .btn { justify-content: center; height: 2.6rem; font-size: 0.9rem; margin-top: 0.2rem; }
.logo-grand { font-size: 1.75rem; gap: 0.7rem; margin-bottom: 1.2rem; }
.cnx-pied { font-size: 0.74rem; color: var(--muted); text-align: center; }
.cnx-vue { position: relative; overflow: hidden; background: var(--viewer); }
.cnx-legende { position: absolute; left: 1.5rem; bottom: 1.25rem; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.cnx-theme { position: fixed; top: 1rem; right: 1rem; width: 2.2rem; padding: 0; justify-content: center; background: var(--panel); }
.illus { position: absolute; inset: 0; width: 100%; height: 100%; }
.illus .trame { fill: none; stroke: var(--line-soft); stroke-width: 1; }
.illus .trame-f { fill: none; stroke: var(--line); stroke-width: 1; }
.illus .trait, .illus .trait-g, .illus .trait-f { fill: none; stroke: var(--accent); vector-effect: non-scaling-stroke; }
.illus .trait { stroke-width: 1.1; opacity: 0.75; }
.illus .trait-g { stroke-width: 1.8; }
.illus .trait-f { stroke-width: 0.8; opacity: 0.4; }
.illus .cote { fill: none; stroke: var(--muted); stroke-width: 0.8; opacity: 0.8; }
.illus .txt { font-family: var(--mono); font-size: 11px; fill: var(--muted); }
.illus .lien { fill: none; stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.5; }
.illus .pastille { stroke: var(--viewer); stroke-width: 3; }
.illus .pastille.ok, .illus .barre.ok { fill: var(--ok); }
.illus .pastille.alerte, .illus .barre.alerte { fill: var(--warn); }
.illus .num { font-family: var(--mono); font-size: 11px; font-weight: 600; fill: #fff; }
.illus .etiquette { fill: var(--panel); stroke: var(--line); }
.illus .et-t { font-family: var(--text); font-size: 13px; font-weight: 600; fill: var(--ink); }
.illus .et-s { font-family: var(--mono); font-size: 11px; }
.illus .et-s.ok { fill: var(--ok); } .illus .et-s.alerte { fill: var(--warn); }
@media (max-width: 860px) {
  .page-connexion { grid-template-columns: 1fr; }
  .cnx-vue { display: none; }
  .cnx-cote { border-right: 0; padding: 1.5rem 1rem; }
}
.form.etroit { gap: 0.85rem; margin-top: 0; }
.form.etroit { max-width: 26rem; }
.alerte, .info { padding: 0.5rem 0.7rem; border-radius: 8px; font-size: 0.82rem; }
.alerte { background: color-mix(in srgb, var(--bad) 13%, transparent); color: var(--bad); }
.info { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.topbar form.inline { display: flex; }

/* ---- Données : onglets, fiches d'intervenants, produits par lot, frise ---- */
a.kpi-lien { color: var(--ink); transition: border-color 0.15s; }
a.kpi-lien:hover { text-decoration: none; border-color: var(--accent); }
.kpis span em { font-style: normal; }
.barre-onglets { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); position: sticky; top: 3rem; z-index: 10; background: var(--bg); padding-top: 0.4rem; }
.onglets { display: flex; gap: 0.2rem; flex-wrap: wrap; }
.onglets a { display: inline-flex; gap: 0.45rem; align-items: center; padding: 0.55rem 0.8rem; color: var(--muted); font-weight: 600; font-size: 0.85rem; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.onglets a:hover { color: var(--ink); text-decoration: none; }
.onglets a[aria-current='page'] { color: var(--ink); border-bottom-color: var(--accent); }
.onglets .mono { font-size: 0.72rem; color: var(--muted); background: var(--panel-2); border-radius: 999px; padding: 0 0.45rem; }
.outils { display: flex; gap: 0.5rem; padding-bottom: 0.45rem; }
.outils select { width: 13rem; }
.outils input[type=search] { width: 14rem; }
.groupe { display: flex; flex-direction: column; gap: 0.6rem; }
.groupe h2 { margin-top: 0.5rem; }
.fiches { display: grid; grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); gap: 0.7rem; }
.fiche-int { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 12px; padding: 0.8rem 0.95rem; display: flex; flex-direction: column; gap: 0.45rem; font-size: 0.84rem; }
.fiche-int header { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; }
.fiche-int header b { font-size: 0.92rem; }
.fiche-int .lots { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.fiche-int .coord { line-height: 1.45; }
.fiche-int footer { margin-top: auto; padding-top: 0.45rem; border-top: 1px solid var(--line-soft); display: flex; gap: 0.3rem; align-items: center; flex-wrap: wrap; }
.fiche-int footer .spacer { flex: 1; }
a.src { font-size: 0.72rem; padding: 0.05rem 0.35rem; border-radius: 5px; background: color-mix(in srgb, var(--accent) 9%, transparent); white-space: nowrap; }
a.src:hover { text-decoration: none; background: color-mix(in srgb, var(--accent) 18%, transparent); }
.jf { display: inline-flex; gap: 0.25rem; align-items: baseline; font-size: 0.76rem; padding: 0.1rem 0.45rem; border-radius: 6px; margin: 0.1rem 0; background: var(--panel-2); color: var(--muted); }
.jf b { font-weight: 600; color: var(--ink); }
.jf-valide { background: color-mix(in srgb, var(--ok) 12%, transparent); } .jf-valide .mono { color: var(--ok); }
.jf-expire { background: color-mix(in srgb, var(--bad) 11%, transparent); } .jf-expire .mono { color: var(--bad); }
.jl { display: flex; gap: 0.3rem; align-items: center; flex-wrap: wrap; margin: 0.1rem 0; }
table.produits { table-layout: fixed; min-width: 52rem; }
table.produits th:nth-child(1) { width: 31%; } table.produits th:nth-child(2) { width: 27%; }
table.produits th:nth-child(3) { width: 32%; } table.produits th:nth-child(4) { width: 10%; }
.etats { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.puce { font: 600 0.78rem var(--text); color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 0.25rem 0.75rem; cursor: pointer; display: inline-flex; gap: 0.35rem; align-items: center; }
.puce:hover { color: var(--ink); }
.puce[aria-pressed='true'] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.puce[aria-pressed='true'] .mono { color: inherit; }
.etats .aide { margin-left: 0.5rem; }
.frise { list-style: none; margin: 0; padding: 0 0 0 0.4rem; display: flex; flex-direction: column; }
.frise li { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; position: relative; padding: 0.55rem 0 0.55rem 1.2rem; border-left: 1px solid var(--line); }
.frise li::before { content: ''; position: absolute; left: -5px; top: 0.95rem; width: 9px; height: 9px; border-radius: 50%; background: var(--panel); border: 2px solid var(--accent); }
.frise .quand { color: var(--muted); padding-top: 0.1rem; }
.frise p { margin-top: 0.15rem; }
.vide { display: flex; flex-direction: column; gap: 0.6rem; }
.vide h2 { margin: 0; }
.vide .row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
@media (max-width: 760px) {
  .barre-onglets { position: static; }
  .outils, .outils input[type=search] { width: 100%; }
  .frise li { grid-template-columns: 1fr; gap: 0.1rem; }
}

/* ---- Icônes des lots (templates/_lots.html) ---- */
.lot-nom { display: inline-flex; align-items: center; gap: 0.6rem; }
a.lot-nom { color: var(--ink); font-weight: 500; }
a.lot-nom:hover { color: var(--accent); text-decoration: none; }
a.lot-nom:hover .lot-tuile { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.lot-tuile { flex: none; display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 9px;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent); transition: background 0.15s; }
h2 .lot-tuile { width: 1.9rem; height: 1.9rem; }
.lot-ico { display: inline-flex; color: var(--accent); }
.lot-nom.muted, .lot-nom.small { gap: 0.3rem; }
.lot-tuile svg .f, .lot-ico svg .f { fill: currentColor; fill-opacity: 0.16; }
a.compte { display: inline-block; min-width: 2rem; padding: 0.1rem 0.4rem; border-radius: 6px; color: inherit; font-variant-numeric: tabular-nums; }
a.compte:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); text-decoration: none; }
table.par-lot td { vertical-align: middle; padding-top: 0.5rem; padding-bottom: 0.5rem; }
.ecartes { display: inline-block; min-width: 2.2rem; margin-left: 0.15rem; text-align: left; font-family: var(--mono); font-size: 0.72rem; color: var(--muted); }
table.par-lot tfoot td { vertical-align: middle; border-top: 1px solid var(--line); border-bottom: 0; }

/* ---- Filtres en ligne (templates/_filtres.html) ---- */
.barre-filtres { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
.choix-bloc { position: relative; display: inline-flex; align-items: center; }
.choix { position: relative; }
.choix > summary { list-style: none; display: inline-flex; align-items: center; gap: 0.45rem; height: 2.25rem; padding: 0 0.7rem 0 0.8rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; user-select: none; white-space: nowrap;
  font-size: 0.82rem; color: var(--ink); transition: border-color 0.15s, background 0.15s; }
.choix > summary::-webkit-details-marker { display: none; }
.choix > summary:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.choix[open] > summary { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.choix-l { color: var(--muted); font-weight: 500; }
.choix-v { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; max-width: 15rem; overflow: hidden; text-overflow: ellipsis; }
.choix .chev { color: var(--muted); transition: transform 0.15s; }
.choix[open] .chev { transform: rotate(180deg); }
.choix.actif > summary { background: color-mix(in srgb, var(--accent) 9%, var(--panel)); border-color: color-mix(in srgb, var(--accent) 40%, transparent); padding-right: 1.9rem; }
.choix.actif .choix-v { color: var(--accent); }
.choix.actif .chev { display: none; }
.choix-retirer { position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%); width: 1.35rem; height: 1.35rem; display: grid; place-items: center;
  border-radius: 50%; color: var(--accent); font-size: 1rem; line-height: 1; }
.choix-retirer:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); text-decoration: none; }
.choix-menu { position: absolute; z-index: 60; top: calc(100% + 0.4rem); left: 0; min-width: 15rem; max-height: min(24rem, 70vh); overflow: auto;
  background: var(--raised); border: 1px solid var(--line); border-radius: 12px; padding: 0.3rem;
  box-shadow: 0 12px 32px -8px rgb(0 0 0 / 0.18), 0 2px 6px rgb(0 0 0 / 0.06); }
.choix-menu.large { min-width: 21rem; }
.choix-menu a { display: flex; align-items: center; gap: 0.55rem; padding: 0.42rem 0.6rem; border-radius: 8px; color: var(--ink); font-size: 0.83rem; white-space: nowrap; }
.choix-menu a:hover, .choix-menu a:focus-visible { background: var(--panel-2); text-decoration: none; outline: none; }
.choix-menu a[aria-current] { background: color-mix(in srgb, var(--accent) 11%, transparent); color: var(--accent); font-weight: 600; }
.choix-menu a:first-child { border-bottom: 1px solid var(--line-soft); border-radius: 8px 8px 0 0; margin-bottom: 0.2rem; }
.choix-deco { width: 1rem; display: inline-flex; justify-content: center; flex: none; }
.choix-deco:empty { width: 0; margin-right: -0.55rem; }
.choix-nom { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.choix-n { font-family: var(--mono); font-size: 0.7rem; color: var(--muted); }
.pt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pt.st-a_lire, .pt.st-doublon, .pt.st-hors_perimetre { color: var(--muted); opacity: 0.6; }
.recherche-nom { position: relative; flex: 1; min-width: 12rem; display: flex; }
.recherche-nom .icon { position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.recherche-nom input { width: 100%; height: 2.25rem; padding-left: 2.2rem; border-radius: 999px; background: var(--panel); }
.doublon-de { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin-top: 0.3rem; font-size: 0.78rem; color: var(--muted); }
.doublon-de .chemin { flex-basis: 100%; margin: 0; }
.tag.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.pt.g-bloquant { color: var(--bad); } .pt.g-important { color: var(--warn); } .pt.g-a_confirmer { color: var(--accent); } .pt.g-mineur { color: var(--muted); }
.pt.a-trouve { color: var(--ok); } .pt.a-partiel { color: var(--warn); } .pt.a-manquant { color: var(--bad); } .pt.a-a_verifier, .pt.a-sans_objet { color: var(--muted); }
.outils .choix-bloc { align-self: center; }