/* BTPaie — feuille de style de l'application, bâtie sur la charte graphique (static/charte).
   Règle : aucun code couleur en dur ; uniquement les variables de btpaie-variables.css. */
@import url("charte/btpaie-variables.css");
@import url("charte/btpaie-composants.css");

/* ------------------------------------------------------------------ base */
:root { --haut-topbar: 56px; --haut-sousnav: 0px; --haut-menus: calc(var(--haut-topbar) + var(--haut-sousnav)); --haut-entete: var(--haut-menus); }
* { box-sizing: border-box; }
html { background: var(--bg-page); }
body { margin: 0; font-family: var(--font-sans); font-size: 14px; line-height: 20px; color: var(--ink); background: var(--bg-page); font-variant-numeric: tabular-nums; }
a { color: var(--cyan-700); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font: 800 22px/28px var(--font-sans); text-transform: uppercase; letter-spacing: .02em; color: var(--nuit-900); margin: 0 0 var(--space-4); display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
h1 small, h1 .nav-periode, h1 .badge, h1 .bt-badge, h1 a.badge { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 14px; }
h2 { font: 700 15px/20px var(--font-sans); text-transform: uppercase; letter-spacing: .04em; color: var(--nuit-900); margin: 0 0 var(--space-2); }
h3 { font: 700 15px/20px var(--font-sans); text-transform: uppercase; letter-spacing: .04em; color: var(--nuit-900); margin: 0 0 var(--space-2); }
h4 { margin: var(--space-4) 0 var(--space-2); font: 600 13px/18px var(--font-sans); color: var(--ink-muted); }
p { margin: 0 0 var(--space-3); }
.muted { color: var(--ink-muted); }
.pas-majuscules { text-transform: none; }
b, strong { font-weight: 700; }
main { max-width: 1480px; margin: var(--space-6) auto; padding: 0 var(--space-8) var(--space-8); }
footer { text-align: center; color: var(--ink-muted); font-size: 12px; padding: var(--space-4); }
.ic { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -4px; flex-shrink: 0; }
.ic.petit { width: 14px; height: 14px; vertical-align: -2px; }

/* ------------------------------------------------------------------ barre de menu */
.topbar { display: flex; align-items: center; gap: var(--space-4); background: var(--nuit-900); color: var(--on-dark); padding: 0 var(--space-6); height: var(--haut-topbar); position: sticky; top: 0; z-index: 10; }
.topbar .brand { display: flex; align-items: center; height: 100%; margin-right: var(--space-2); }
.topbar .brand img { height: 28px; width: auto; display: block; }
.topbar nav { display: flex; gap: var(--space-1); height: 100%; flex: 1; }
.topbar nav > a { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-3); color: var(--on-dark-muted); font-weight: 600; font-size: 13px; border-bottom: 3px solid transparent; white-space: nowrap; }
.topbar nav > a:hover { color: var(--on-dark); text-decoration: none; }
.topbar nav > a.actif { color: var(--on-dark); border-bottom-color: var(--cyan-500); }
.topbar nav > a small { font-weight: 400; color: var(--on-dark-muted); margin-left: var(--space-1); }
.topbar .dossier label, .topbar .periode label { color: var(--on-dark-muted); font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: var(--space-2); }
.topbar .dossier .combo { min-width: 260px; }
.topbar .combo-input, .topbar .periode input { border: 1px solid transparent; border-radius: var(--radius-sm); padding: 6px var(--space-2); background: var(--bg-card); color: var(--ink); font: 400 13px/18px var(--font-sans); }
.topbar .combo-list, .topbar .combo-item, .topbar .combo-vide { color: var(--ink); }
.burger { display: none; background: none; border: 1px solid var(--on-dark-muted); color: var(--on-dark); border-radius: var(--radius-sm); width: 36px; height: 32px; cursor: pointer; align-items: center; justify-content: center; }
.topbar nav > a { position: relative; }
.topbar nav .lib-court { display: none; }
/* écrans moyens : icône + libellé court en dessous, pour laisser la place au dossier et au mois */
@media (min-width: 1151px) and (max-width: 1560px) {
  .topbar nav > a { flex-direction: column; justify-content: center; gap: 2px; padding: 0 var(--space-2); font-size: 11px; line-height: 13px; min-width: 58px; }
  .topbar nav .lib-long { display: none; }
  .topbar nav .lib-court { display: inline; }
  .topbar nav > a .pastille { position: absolute; top: 6px; right: 4px; margin: 0; }
}
@media (max-width: 1150px) {
  .topbar { flex-wrap: wrap; height: auto; min-height: var(--haut-topbar); padding: var(--space-2) var(--space-3); gap: var(--space-2); }
  .burger { display: inline-flex; }
  .topbar nav { display: none; flex-basis: 100%; flex-direction: column; gap: 0; border-top: 1px solid var(--nuit-700); padding-top: var(--space-1); height: auto; }
  body.menu-ouvert .topbar nav { display: flex; }
  .topbar nav > a { padding: var(--space-2) var(--space-3); border-bottom: 0; border-left: 3px solid transparent; }
  .topbar nav > a.actif { border-left-color: var(--cyan-500); }
  .topbar .dossier { flex: 1; } .topbar .periode { flex-basis: 100%; }
  main { padding: 0 var(--space-4) var(--space-8); }
}

/* sous-menu du dossier */
/* sous-menu du dossier : figé sous la barre principale, fond clair contrasté (nuit-100 = onglet actif / sélection de la charte) */
.sousnav { background: var(--nuit-100); color: var(--nuit-900); padding: 0 var(--space-6); display: flex; gap: var(--space-1); align-items: center; flex-wrap: wrap; min-height: 44px;
  position: sticky; top: var(--haut-topbar); z-index: 9; border-bottom: 1px solid var(--line-strong); box-shadow: var(--shadow-card); }
.sousnav-nom { font-weight: 800; color: var(--nuit-900); margin-right: var(--space-4); text-transform: uppercase; font-size: 13px; letter-spacing: .03em; padding-right: var(--space-4); border-right: 2px solid var(--line-strong); }
.sousnav a { display: inline-flex; align-items: center; gap: var(--space-1); padding: 11px var(--space-3) 9px; color: var(--nuit-700); font-weight: 600; font-size: 13px; border-bottom: 3px solid transparent; }
.sousnav a:hover { color: var(--nuit-900); text-decoration: none; background: var(--bg-card); }
.sousnav a.actif { color: var(--nuit-900); text-decoration: none; background: var(--bg-card); border-bottom-color: var(--cyan-500); }

/* ------------------------------------------------------------------ messages */
.flash { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); margin-bottom: var(--space-3); background: var(--cyan-100); color: var(--ink); border: 1px solid var(--line); display: flex; gap: var(--space-2); align-items: flex-start; }
.flash.ok { background: var(--succes-100); }
.flash.error { background: var(--danger-100); }
.flash.warn { background: var(--alerte-100); }
.flash form.inline { display: inline-flex; margin: var(--space-1) 0 0 var(--space-2); }
.toasts { position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: 40; display: flex; flex-direction: column; gap: var(--space-2); max-width: 420px; }
.toast { background: var(--nuit-900); color: var(--on-dark); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); display: flex; gap: var(--space-2); align-items: center; font-size: 13px; animation: toast-in .25s ease-out; }
.toast .ic { color: var(--cyan-500); }
.toast.disparait { opacity: 0; transition: opacity .4s; }
.toast.error { background: var(--danger-700); color: #fff; }
.toast.error .ic { color: #fff; }
.toast.warn { background: var(--alerte-100); color: var(--alerte-700); border: 1px solid var(--alerte-500); }
.toast.warn .ic { color: var(--alerte-700); }
.toast.info { background: var(--cyan-100); color: var(--ink); border: 1px solid var(--line); }
.toast.info .ic { color: var(--cyan-700); }
.toast span { flex: 1; }
.toast-fermer { background: none; border: 0; color: inherit; font-size: 18px; line-height: 1; cursor: pointer; opacity: .7; padding: 0 0 0 var(--space-2); align-self: flex-start; }
.toast-fermer:hover { opacity: 1; }
@media (max-width: 640px) { .toasts { left: var(--space-4); right: var(--space-4); bottom: var(--space-4); max-width: none; } }
@keyframes toast-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ------------------------------------------------------------------ boutons (anciennes classes alignées sur bt-btn) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-md); font: 600 13px/18px var(--font-sans); border: 1px solid var(--line-strong); cursor: pointer; text-decoration: none; background: var(--bg-card); color: var(--nuit-900); white-space: nowrap; }
.btn:hover { background: var(--neutre-100); text-decoration: none; }
.btn:focus-visible { outline: 3px solid var(--cyan-500); outline-offset: 2px; }
.btn.primaire, .btn.ok { background: var(--nuit-900); color: var(--on-dark); border-color: var(--nuit-900); }
.btn.primaire:hover, .btn.ok:hover { background: var(--nuit-700); }
.btn.secondary { background: var(--bg-card); color: var(--nuit-900); border-color: var(--line-strong); }
.btn.secondary:hover { background: var(--neutre-100); }
.btn.ghost { background: transparent; color: var(--cyan-700); border-color: transparent; }
.btn.ghost:hover { background: var(--nuit-100); }
.btn.danger, .btn.warn { background: var(--bg-card); color: var(--danger-700); border-color: var(--danger-700); }
.btn.danger:hover, .btn.warn:hover { background: var(--danger-100); }
.btn.small { min-height: 32px; padding: 0 var(--space-3); font-size: 12px; }
.btn.icone { width: 32px; min-height: 32px; padding: 0; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn .ic { width: 18px; height: 18px; vertical-align: middle; }
.btn.small .ic { width: 16px; height: 16px; }
.btn.right { margin-left: auto; }
.actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.actions form { margin: 0; }
.actions form.right { margin-left: auto; }
.barre { margin-bottom: var(--space-4); }
.barre-secondaire { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; margin-bottom: var(--space-4); }
.echeance { font-size: 12px; color: var(--ink-muted); margin-left: auto; }
.bt-stepper { margin: 0 0 var(--space-4); list-style: none; padding: 0; }
.bt-step .act { margin-top: var(--space-2); }
.bt-step .act form { margin: 0; }
.bt-step .bt-step-dot .ic { stroke-width: 3; width: 14px; height: 14px; }
@media (max-width: 900px) { .bt-stepper { flex-wrap: wrap; } .bt-step { flex-basis: 33%; border-bottom: 1px solid var(--line); } }

/* ------------------------------------------------------------------ pastilles de statut (cinq pastilles de la charte) */
.badge, .bt-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px 10px 2px 8px; border-radius: var(--radius-pill); font: 600 12px/18px var(--font-sans); white-space: nowrap; background: var(--neutre-100); color: var(--neutre-700); text-transform: none; }
.badge::before { content: ""; width: 14px; height: 14px; flex-shrink: 0; background: currentColor; -webkit-mask: var(--icone-badge) center / contain no-repeat; mask: var(--icone-badge) center / contain no-repeat; }
.badge, .badge.gris, .badge.neutre { --icone-badge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E"); }
.badge.ok { background: var(--succes-100); color: var(--succes-700); --icone-badge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.badge.info { background: var(--cyan-100); color: var(--cyan-700); --icone-badge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E"); }
.badge.warn { background: var(--alerte-100); color: var(--alerte-700); --icone-badge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E"); }
.badge.danger { background: var(--danger-100); color: var(--danger-700); --icone-badge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"); }
.badge a, a.badge { text-decoration: none; }
a.badge:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ cartes, panneaux, indicateurs */
.panel, .card, .formulaire fieldset, .bt-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-6); margin: 0 0 var(--space-4); }
.card.ghost { border-style: dashed; box-shadow: none; color: var(--ink-muted); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-4); }
.kpi { list-style: none; padding: 0; margin: var(--space-2) 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.indicateurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }
.bt-kpi { cursor: default; }
.bt-kpi.cliquable { cursor: pointer; transition: box-shadow .15s; }
.bt-kpi.cliquable:hover, .bt-kpi.actif { box-shadow: var(--shadow-pop); border-color: var(--cyan-500); }
.bt-kpi--alerte .bt-kpi-icon { background: var(--alerte-100); color: var(--alerte-700); }
.bt-kpi .bt-kpi-texte { flex: 1; min-width: 0; }
.zone-danger { border: 1px solid var(--danger-700); background: var(--danger-100); border-radius: var(--radius-md); padding: var(--space-4); margin-top: var(--space-4); }
.zone-danger h3 { color: var(--danger-700); }
.proposition { background: var(--cyan-100); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font-size: 13px; margin: var(--space-2) 0; }
.vide { background: var(--bg-card); border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); padding: var(--space-8); text-align: center; color: var(--ink-muted); margin: var(--space-3) 0; }
.vide .btn { margin-top: var(--space-3); }
details.panel summary, details summary { cursor: pointer; }
details > form { margin-top: var(--space-2); }
details.sommeil summary { font-weight: 600; color: var(--ink-muted); padding: var(--space-3) 0; }

/* aide repliée derrière « ? » */
.aide-btn { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--bg-card); color: var(--cyan-700); font: 700 14px/1 var(--font-sans); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-transform: none; }
.aide-btn:hover, .aide-btn.actif { background: var(--nuit-100); }
.aide-texte[hidden] { display: none; }
.aide-texte { background: var(--cyan-100); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); color: var(--ink); font-size: 13px; }

/* pastille d'initiales */
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; color: var(--on-dark); font: 700 12px/1 var(--font-sans); letter-spacing: .02em; flex-shrink: 0; text-transform: uppercase; }
.avatar.petit { width: 24px; height: 24px; font-size: 10px; }
.avatar.c1 { background: var(--nuit-900); } .avatar.c2 { background: var(--cyan-700); } .avatar.c3 { background: var(--succes-700); } .avatar.c4 { background: var(--alerte-700); }
.avatar.c5 { background: var(--danger-700); } .avatar.c6 { background: var(--neutre-700); } .avatar.c7 { background: var(--nuit-700); } .avatar.c8 { background: var(--logo-cyan); }
.personne { display: inline-flex; align-items: center; gap: var(--space-2); }
.personne .nom { font-weight: 600; color: var(--nuit-900); }
.personne .sous { display: block; font-size: 12px; line-height: 16px; color: var(--ink-muted); font-weight: 400; }
.point { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: 0; }
.point.ok { background: var(--succes-700); } .point.info { background: var(--cyan-700); } .point.warn { background: var(--alerte-500); } .point.danger { background: var(--danger-700); } .point.neutre { background: var(--neutre-700); }

/* ------------------------------------------------------------------ tableaux */
table.liste, .bt-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); font-size: 14px; overflow: visible; margin-bottom: var(--space-4); }
table.liste th { position: sticky; top: var(--haut-entete); z-index: 3; background: var(--bg-card); text-align: left; font: 600 12px/16px var(--font-sans); color: var(--ink-muted); padding: var(--space-3); border-bottom: 2px solid var(--nuit-900); white-space: nowrap; }
table.liste th:first-child { border-top-left-radius: var(--radius-lg); } table.liste th:last-child { border-top-right-radius: var(--radius-lg); }
table.liste td { padding: var(--space-3); border-bottom: 1px solid var(--line); vertical-align: middle; }
table.liste tbody tr:nth-child(even) td { background: var(--bg-band); }
table.liste tbody tr:hover td { background: var(--nuit-100); }
table.liste tbody tr:last-child td { border-bottom: 0; }
table.liste tr.inactif td { color: var(--ink-muted); }
table.liste tr.total td { font-weight: 700; border-top: 2px solid var(--nuit-900); background: var(--bg-card); }
table.liste.compact td, table.liste.compact th { padding: var(--space-1) var(--space-2); font-size: 12px; }
table.liste td.actions { white-space: nowrap; display: table-cell; }
table.liste td.actions .btn + .btn, table.liste td.actions form + form { margin-left: var(--space-1); }
table.liste tr.cliquable { cursor: pointer; }
td.num, th.num, .bt-right { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.barre-filtre { display: flex; gap: var(--space-3); align-items: center; margin-bottom: var(--space-3); flex-wrap: wrap; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-2) var(--space-4); }
.barre-filtre input[type=search] { flex: 1; min-width: 240px; max-width: 520px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); padding: 0 var(--space-3); height: 40px; font: 400 14px/20px var(--font-sans); color: var(--ink); background: var(--bg-card); }
.barre-filtre select { border: 1px solid var(--line-strong); border-radius: var(--radius-md); height: 40px; padding: 0 var(--space-3); font: 400 13px/18px var(--font-sans); background: var(--bg-card); color: var(--ink); }
.barre-filtre.figee { position: sticky; top: var(--haut-menus); z-index: 8; }
.progression { display: inline-flex; gap: 3px; margin-right: var(--space-2); vertical-align: middle; }
.progression span { width: 14px; height: 8px; background: var(--neutre-100); border-radius: 2px; display: inline-block; }
.progression span.fait { background: var(--succes-700); }
.urgence { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.urgence.proche { color: var(--danger-700); font-weight: 600; }
.bt-sub { display: block; font-size: 12px; line-height: 16px; color: var(--ink-muted); font-weight: 400; }
.bt-name { font-weight: 600; color: var(--nuit-900); }
.court { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.ccn { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }

/* ------------------------------------------------------------------ formulaires */
.formulaire legend { color: var(--nuit-900); font: 700 13px/18px var(--font-sans); text-transform: uppercase; letter-spacing: .04em; padding: 0 var(--space-2); }
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3) var(--space-4); }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3) var(--space-4); margin-bottom: var(--space-2); }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3) var(--space-4); margin-bottom: var(--space-2); }
@media (max-width: 1100px) { .grid3, .grid4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .grid2, .grid3, .grid4 { grid-template-columns: 1fr; } }
.champ { display: flex; flex-direction: column; gap: var(--space-1); font-size: 13px; }
.champ > span { font: 600 13px/18px var(--font-sans); color: var(--ink); }
.champ small { color: var(--ink-muted); font-size: 12px; line-height: 16px; }
input, select, textarea, button { font-family: var(--font-sans); }
.champ input, .champ select, textarea, .saisie input, .saisie select, .inline input, .inline select, .formulaire input:not([type=checkbox]):not([type=radio]):not([type=file]), .formulaire select {
  border: 1px solid var(--line-strong); border-radius: var(--radius-md); padding: 0 var(--space-3); height: 40px; font: 400 14px/20px var(--font-sans); color: var(--ink); background: var(--bg-card); width: 100%; }
textarea { height: auto; padding: var(--space-2) var(--space-3); line-height: 20px; }
.champ input:focus, .champ select:focus, textarea:focus, .saisie input:focus, .formulaire input:focus, .formulaire select:focus, .barre-filtre input:focus, .barre-filtre select:focus { outline: none; border-color: var(--nuit-900); box-shadow: 0 0 0 3px var(--cyan-500); }
.champ.case { flex-direction: row; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.champ.case input, .formulaire input[type=checkbox], .formulaire input[type=radio] { width: 18px; height: 18px; accent-color: var(--nuit-900); }
.champ.herite input, .champ.herite select { background: var(--nuit-100); color: var(--ink-muted); }
.heritage label { display: block; font-size: 12px; margin: 2px 0; }
input[readonly] { background: var(--neutre-100); color: var(--ink-muted); }
input.touche:invalid { border-color: var(--danger-700); background: var(--danger-100); }
.inline { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin: var(--space-2) 0; }
.inline label { font-size: 13px; display: flex; align-items: center; gap: var(--space-1); }
.inline input, .inline select { width: auto; }
.nir-info { display: block; font-size: 11px; margin-top: 2px; color: var(--ink-muted); }
.nir-info.ok { color: var(--succes-700); } .nir-info.erreur { color: var(--danger-700); }
.champ select[name=ville] { width: 100%; }
.logo-apercu { max-height: 60px; max-width: 180px; border: 1px solid var(--line); padding: var(--space-1); background: var(--bg-card); border-radius: var(--radius-sm); }
/* tableaux de saisie compacts (bulletin, paramètres) : champs de 32 px */
table.saisie { width: 100%; border-collapse: collapse; margin-bottom: var(--space-2); }
table.saisie th { font: 600 11px/16px var(--font-sans); text-align: left; color: var(--ink-muted); padding: 2px var(--space-1); }
table.saisie td { padding: 2px var(--space-1); }
table.saisie input, table.saisie select, table.liste input:not([type=checkbox]):not([type=radio]), table.liste select, table.saisie-groupee input:not([type=checkbox]), table.saisie-groupee select, table.cal td input {
  height: 32px; padding: 0 var(--space-2); font-size: 13px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--ink); }
table.saisie input:focus, table.liste input:focus, table.saisie-groupee input:focus, table.saisie select:focus, table.saisie-groupee select:focus { outline: none; border-color: var(--nuit-900); box-shadow: 0 0 0 2px var(--cyan-500); }
.saisie input[size="5"], .saisie input[size="6"] { width: 64px; }
.saisie input.auto { background: var(--cyan-100); }
table.cal td input { width: 60px; text-align: right; }
.deux-colonnes { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--space-4); align-items: start; }
@media (max-width: 1100px) { .deux-colonnes { grid-template-columns: 1fr; } }

/* listes déroulantes avec recherche */
.combo { position: relative; width: 100%; }
.combo-select { position: absolute; opacity: 0; pointer-events: none; height: 0; width: 0; }
.combo-input { width: 100%; }
.combo-list { position: absolute; z-index: 50; top: 100%; left: 0; right: 0; max-height: 260px; overflow: auto; background: var(--bg-card); border: 1px solid var(--line-strong); border-radius: 0 0 var(--radius-md) var(--radius-md); box-shadow: var(--shadow-pop); }
.combo-item { padding: var(--space-2) var(--space-3); cursor: pointer; font-size: 13px; }
.combo-item:hover, .combo-item.survol { background: var(--nuit-100); }
.combo-item.actif { font-weight: 700; color: var(--nuit-900); }
.combo-vide { padding: var(--space-2) var(--space-3); color: var(--ink-muted); font-size: 12px; }

/* onglets */
.onglets { display: flex; gap: var(--space-1); flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: var(--space-4); }
.onglets a { padding: var(--space-2) var(--space-4); color: var(--ink-muted); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.onglets a.actif { color: var(--nuit-900); border-bottom-color: var(--cyan-500); }
.onglets a:hover { text-decoration: none; color: var(--nuit-900); background: var(--nuit-100); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.onglet[hidden] { display: none; }
.nav-periode { display: inline-flex; gap: var(--space-2); align-items: center; font-size: 15px; margin-left: var(--space-2); }
.nav-periode b { color: var(--nuit-900); }

/* ------------------------------------------------------------------ aperçu du bulletin à l'écran */
.apercu-bulletin { background: var(--bg-card); border: 1px solid var(--line-strong); padding: var(--space-4); font-size: 11.5px; font-family: var(--font-sans); }
.ab-entete { display: flex; justify-content: space-between; gap: var(--space-6); border-bottom: 1px solid var(--line-strong); padding-bottom: var(--space-2); margin-bottom: var(--space-2); line-height: 1.5; }
.ab-entete .droite { text-align: left; min-width: 45%; }
table.ab { width: 100%; border-collapse: collapse; }
table.ab th { font-size: 10px; text-align: left; border-bottom: 1px solid var(--line-strong); padding: 3px 4px; background: var(--bg-band); }
table.ab td { padding: 2px 4px; }
table.ab tr.section td { font-weight: 700; color: var(--nuit-900); font-size: 10.5px; padding-top: 5px; }
table.ab tr.total td { font-weight: 700; border-top: 1px solid var(--line-strong); }
table.ab tr.final td { background: var(--nuit-100); font-size: 12.5px; }
table.ab tr.com td { color: var(--ink-muted); font-style: italic; }
.ab-pied { display: flex; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-3); border-top: 1px solid var(--line-strong); padding-top: var(--space-2); font-size: 11px; line-height: 1.6; }
pre.code { background: var(--nuit-900); color: var(--on-dark); padding: var(--space-3); border-radius: var(--radius-md); font-size: 12px; overflow: auto; max-height: 600px; }
pre.code.dsn span { display: block; }
pre.code .b-s10 { color: var(--cyan-500); } pre.code .b-s20 { color: var(--alerte-100); } pre.code .b-s90 { color: var(--on-dark-muted); } pre.code .b-ind { color: var(--succes-100); font-weight: 700; }
pre.readme { white-space: pre-wrap; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); line-height: 1.5; }
textarea.code { width: 100%; font-family: Consolas, monospace; font-size: 12px; }

/* saisie des absences et des primes dans le bulletin (deux lignes) */
table.saisie.absences tbody.absence { border-bottom: 1px solid var(--line); }
table.saisie.absences tbody.absence tr:first-child td { padding-top: var(--space-2); }
table.saisie.absences td.abs-type { min-width: 230px; }
table.saisie.absences tr.abs-libelle td { padding-bottom: var(--space-2); display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
table.saisie.absences tr.abs-libelle label { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; color: var(--ink-muted); white-space: nowrap; flex: 1; min-width: 320px; }
table.saisie.absences tr.abs-libelle input { flex: 1; font-size: 13px; }
table.saisie.absences .abs-ijss { display: inline-flex; gap: var(--space-4); margin-left: var(--space-4); font-size: 12px; color: var(--ink-muted); }
table.saisie.absences .abs-ijss label { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; }
table.saisie.primes td:first-child { min-width: 200px; }
table.saisie.deux-lignes tbody.ligne { border-bottom: 1px solid var(--line); }
table.saisie.deux-lignes tbody.ligne tr:first-child td { padding-top: var(--space-2); }
table.saisie.deux-lignes tr.detail td { padding-bottom: var(--space-2); }
table.saisie.deux-lignes tr.detail label { font-size: 12px; color: var(--ink-muted); display: inline-flex; align-items: center; gap: var(--space-1); margin-right: var(--space-3); }
table.saisie.deux-lignes tr.detail input[type=text], table.saisie.deux-lignes tr.detail input:not([type]) { width: 90px; }
table.saisie.deux-lignes td.large { min-width: 260px; }
table.saisie.deux-lignes .type-dsn { min-width: 300px; }

/* ------------------------------------------------------------------ tableau des variables de paie */
table.saisie-groupee td { vertical-align: top; }
table.saisie-groupee select.pas-combo { min-width: 300px; max-width: 420px; }
table.saisie-groupee .rub-ligne { display: flex; gap: var(--space-1); margin-bottom: var(--space-1); align-items: center; flex-wrap: wrap; }
table.saisie-groupee .com-btn { border: 1px solid var(--line-strong); background: var(--bg-card); border-radius: var(--radius-sm); cursor: pointer; font-size: 11px; padding: 2px 5px; color: var(--cyan-700); height: 24px; }
table.saisie-groupee .com-btn.actif { background: var(--cyan-100); }
table.saisie-groupee .com-btn[hidden] { display: none; }
table.saisie-groupee input.commentaire { display: block; width: 100%; margin-top: 3px; font-size: 12px; font-style: italic; }
table.saisie-groupee input.commentaire[hidden] { display: none; }
table.saisie-groupee.coms-visibles input.commentaire[hidden] { display: block; }
table.saisie-groupee td.salarie a { color: var(--nuit-900); }
.tableau-fige { overflow: auto; max-height: calc(100vh - 230px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-card); box-shadow: var(--shadow-card); margin-bottom: var(--space-3); }
.tableau-fige table.saisie-groupee { border: 0; border-radius: 0; box-shadow: none; width: auto; min-width: 0; margin: 0; }
.tableau-fige table.saisie-groupee thead th { position: sticky; top: 0; z-index: 6; vertical-align: top; min-width: 110px; background: var(--bg-card); }
.tableau-fige table.saisie-groupee thead th.coin { left: 0; z-index: 8; min-width: 250px; }
.tableau-fige table.saisie-groupee td.nom-cell { position: sticky; left: 0; z-index: 5; background: var(--bg-card); min-width: 250px; max-width: 340px; box-shadow: 1px 0 0 var(--line); }
.tableau-fige table.saisie-groupee tbody tr:nth-child(even) td { background: var(--bg-band); }
.tableau-fige table.saisie-groupee td.cel { white-space: nowrap; position: relative; }
.tableau-fige table.saisie-groupee td.cel input[inputmode=decimal] { width: 84px; text-align: right; }
.tableau-fige table.saisie-groupee td.cel.modifie input[inputmode=decimal] { background: var(--alerte-100); border-color: var(--alerte-500); }
.tableau-fige table.saisie-groupee td.cel.avec-com::before { content: ""; position: absolute; top: 3px; right: 3px; width: 0; height: 0; border-style: solid; border-width: 0 9px 9px 0; border-color: transparent var(--alerte-500) transparent transparent; }
.tableau-fige table.saisie-groupee tfoot td { font-weight: 700; background: var(--bg-card); text-align: right; white-space: nowrap; position: sticky; bottom: 0; border-top: 2px solid var(--nuit-900); z-index: 4; }
.tableau-fige table.saisie-groupee tfoot td.nom-cell { text-align: left; z-index: 5; }
.tableau-fige th .th-fam { font-weight: 400; font-size: 10px; color: var(--ink-muted); }
.tableau-fige th .th-lib { font-weight: 700; max-width: 220px; white-space: normal; color: var(--ink); }
.tableau-fige th .th-lib small { font-weight: 400; color: var(--ink-muted); }
.tableau-fige th .th-outils { margin-top: var(--space-1); font-size: 11px; font-weight: 400; text-transform: none; display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; }
.tableau-fige th .th-outils label { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; cursor: pointer; }
.panneau-rubrique { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-4); margin: 0 0 var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-start; }
.panneau-rubrique[hidden] { display: none; }
.panneau-rubrique .choix { display: flex; flex-direction: column; gap: var(--space-1); font-size: 13px; }
.panneau-rubrique .choix label { display: inline-flex; align-items: center; gap: var(--space-1); }
.panneau-rubrique select.pas-combo { min-width: 380px; max-width: 520px; }
.legende-tableau { font-size: 12px; color: var(--ink-muted); margin: var(--space-2) 0 0; }
.etat-saisie { font-size: 12px; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--succes-100); color: var(--succes-700); font-weight: 600; }
.etat-saisie.modifie { background: var(--alerte-100); color: var(--alerte-700); }

/* ------------------------------------------------------------------ absences : tableau, panneau latéral, calendrier */
table.absences-tableau { width: 100%; }
table.absences-tableau tr.abs-ligne { display: table-row; margin: 0; }
table.absences-tableau td .lib-mobile { display: none; }
table.absences-tableau input[inputmode=decimal] { width: 68px; text-align: right; }
table.absences-tableau input[type=date] { width: 138px; }
table.absences-tableau select { max-width: 240px; }
table.absences-tableau tr.incoherent td { background: var(--danger-100); }
table.absences-tableau tr.debut-salarie td { border-top: 2px solid var(--line-strong); }
.defilant-x { overflow-x: auto; }
.defilant-x table.liste th, .calendrier-defilant th { position: static; }
@media (max-width: 900px) {
  .defilant-x { overflow-x: visible; }
  table.absences-tableau thead { display: none; }
  table.absences-tableau tr, table.absences-tableau tr.abs-ligne { display: block; border-top: 2px solid var(--line-strong); padding: var(--space-1) 0; }
  table.absences-tableau td { display: flex; gap: var(--space-2); align-items: center; border: 0; padding: var(--space-1) var(--space-3); }
  table.absences-tableau td .lib-mobile { display: inline-block; min-width: 120px; font-size: 12px; color: var(--ink-muted); font-weight: 600; }
}
.panneau-lateral { position: fixed; top: 0; right: 0; height: 100vh; width: min(440px, 100vw); background: var(--bg-card); box-shadow: var(--shadow-pop); z-index: 30; padding: var(--space-6); overflow: auto; display: flex; flex-direction: column; gap: var(--space-3); }
.panneau-lateral[hidden] { display: none; }
.panneau-lateral .champ.case { background: var(--bg-band); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); }
.panneau-lateral .pied { margin-top: auto; display: flex; gap: var(--space-2); }
.panneau-lateral .erreur { color: var(--danger-700); font-size: 12px; min-height: 16px; }
.voile { position: fixed; inset: 0; background: var(--nuit-900); opacity: .35; z-index: 29; }
.voile[hidden] { display: none; }
table.calendrier { border-collapse: collapse; background: var(--bg-card); font-size: 11px; }
table.calendrier th, table.calendrier td { border: 1px solid var(--line); padding: 2px 0; text-align: center; min-width: 22px; height: 24px; }
table.calendrier th.nom, table.calendrier td.nom { text-align: left; padding: 2px var(--space-2); min-width: 170px; white-space: nowrap; position: sticky; left: 0; background: var(--bg-card); }
table.calendrier th { background: var(--bg-band); font-weight: 600; color: var(--ink-muted); }
table.calendrier th.we, table.calendrier td.we, table.calendrier th.ferie, table.calendrier td.ferie { background: var(--neutre-100); color: var(--ink-muted); }
table.calendrier td.cat-cp { background: var(--succes-700); } table.calendrier td.cat-arret { background: var(--danger-700); }
table.calendrier td.cat-non_remuneree { background: var(--alerte-500); } table.calendrier td.cat-remuneree { background: var(--nuit-900); }
table.calendrier td.cat-cp, table.calendrier td.cat-arret, table.calendrier td.cat-non_remuneree, table.calendrier td.cat-remuneree { color: var(--on-dark); font-weight: 700; }
table.calendrier td.sans-date { text-align: left; padding: 2px var(--space-2); color: var(--ink-muted); white-space: nowrap; }
.legende { display: flex; gap: var(--space-4); flex-wrap: wrap; font-size: 12px; margin: var(--space-2) 0; }
.legende span::before { content: ""; display: inline-block; width: 14px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; background: var(--neutre-100); }
.legende .cat-cp::before { background: var(--succes-700); } .legende .cat-arret::before { background: var(--danger-700); } .legende .cat-non_remuneree::before { background: var(--alerte-500); } .legende .cat-remuneree::before { background: var(--nuit-900); }
.calendrier-defilant { overflow: auto; }

/* ------------------------------------------------------------------ écran de chargement */
.chargement { position: fixed; inset: 0; background: var(--bg-page); z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); opacity: 0; pointer-events: none; transition: opacity .2s; }
.chargement.visible { opacity: 1; pointer-events: auto; }
.chargement img { width: 72px; height: 72px; animation: pulse 1.2s ease-in-out infinite; }
.chargement p { color: var(--ink-muted); font-weight: 600; }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.92); opacity: .7; } }

/* ------------------------------------------------------------------ impression (IMPRESSION.md) */
@page { size: A4 portrait; margin: 14mm 12mm; }
@page paysage { size: A4 landscape; }
.bt-print-landscape { page: paysage; }
@media print {
  body { background: var(--bg-card); color: var(--ink); }
  .topbar, .sousnav, .btn, .bt-btn, .bt-no-print, .actions, .barre, .barre-secondaire, .barre-filtre, .com-btn, .panneau-rubrique, .panneau-lateral, .voile, .toasts, .chargement, .aide-btn, footer, .burger { display: none !important; }
  h1, h2, h3 { text-transform: uppercase; font-weight: 800; color: var(--ink); }
  table { border-collapse: collapse; width: 100%; }
  thead { display: table-header-group; }
  tr { break-inside: avoid; }
  th { border-bottom: 1.5pt solid var(--ink); position: static !important; }
  table.liste, .tableau-fige { box-shadow: none; border: 0; border-radius: 0; max-height: none; overflow: visible; }
  tbody tr:nth-child(even) td, table.liste tbody tr:nth-child(even) td, .tableau-fige table.saisie-groupee tbody tr:nth-child(even) td { background: var(--bg-band-print) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .badge, .bt-badge { background: none !important; border: 0.75pt solid var(--ink); color: var(--ink) !important; }
  table.calendrier td.cat-cp, table.calendrier td.cat-arret, table.calendrier td.cat-non_remuneree, table.calendrier td.cat-remuneree { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .onglet[hidden] { display: block; }
  main { max-width: none; margin: 0; padding: 0; }
}

/* retours DSN en clair et champ signalé */
.retour-clair { margin-bottom: var(--space-2); line-height: 1.5; }
ol.anomalies-clair { margin: var(--space-2) 0 0; padding-left: var(--space-6); }
ol.anomalies-clair li { margin-bottom: var(--space-3); line-height: 1.5; }
ol.anomalies-clair li .btn { margin-top: var(--space-1); }
.a-corriger, .a-corriger:focus { border-color: var(--danger-700) !important; box-shadow: 0 0 0 3px var(--alerte-500) !important; background: var(--alerte-100) !important; }
.bandeau-correction { position: sticky; top: var(--haut-menus); z-index: 7; }

/* Veille sociale */
.pastille { display: inline-flex; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--alerte-500); color: var(--on-dark);
  font: 700 11px/18px var(--font-sans); justify-content: center; margin-left: 4px; }
.veille-tb ul, .veille-controles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.veille-tb h3 { display: flex; align-items: center; gap: var(--space-2); }
.veille-tb h3 .btn { margin-left: auto; }
.liste-veille { display: grid; gap: var(--space-3); }
.veille-item h4 { margin: var(--space-2) 0; text-transform: none; letter-spacing: 0; }
.veille-item.traite, .veille-item.sans_objet { opacity: .75; }
.veille-entete { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.veille-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.veille-actions input[type=text] { flex: 1 1 260px; min-width: 0; }
.defilant-etat { overflow-x: auto; max-width: 100%; }
.defilant-etat table.liste th { position: static; }

/* Lecture d'un retour DSN */
.fiche-retour { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); margin: 0 0 var(--space-3); }
.fiche-retour dt { color: var(--ink-muted); font-weight: 600; }
.fiche-retour dd { margin: 0; overflow-wrap: anywhere; }
table.contenu-retour td.valeur { overflow-wrap: anywhere; white-space: pre-line; }
table.contenu-retour tr.bloc td { background: var(--neutre-100); }
pre.xml-brut { max-height: 60vh; overflow: auto; background: var(--neutre-100); padding: var(--space-3); border-radius: var(--radius-sm); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
ol.anomalies-clair .btn { white-space: normal; height: auto; min-height: 32px; text-align: left; max-width: 100%; }

/* ---- Lot 10 : comptes, sécurité, espaces, consommation ---- */
.barre-admin { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-4); }
.codes-secours { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--space-2); list-style: none; padding: 0; margin: var(--space-3) 0; }
.codes-secours code { display: block; text-align: center; padding: var(--space-2); border: 1px dashed var(--line); border-radius: var(--radius-sm); font-size: 15px; letter-spacing: .08em; }
.etapes-2fa li { margin-bottom: var(--space-3); }
.qr-2fa { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-2); }
.qr-2fa svg { width: 240px; height: 240px; flex-shrink: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.qr-2fa svg path { stroke-width: 1; }
.cle-2fa { max-width: 420px; }
.cle-2fa code { font-size: 15px; letter-spacing: .5px; }
.qr-2fa code { overflow-wrap: anywhere; }
.journal-audit tr.refus td { background: var(--alerte-100); }
.journal-audit td.details { max-width: 420px; overflow-wrap: anywhere; font-size: 12px; }
.journal-audit td.nowrap { white-space: nowrap; }
.kpi-conso { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.kpi-conso li { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); }
.kpi-conso li span { color: var(--ink-muted); font-size: 12px; }
.kpi-conso li b { font-size: 22px; }
.saisie-espace input { width: 100%; min-width: 120px; }
body.espace .menu-espace { display: flex; margin-left: auto; }
@media (max-width: 700px) { body.espace .menu-espace a small { display: none; } }
@media print { .codes-secours code { border-style: solid; } }