/* =============================================================================
   ACS Insurance, systeme de design
   Les jetons ci-dessous sont repris tels quels du design valide. Aucune valeur
   n'est reinventee : couleurs, echelles d'espacement et de typographie, rayons
   et hauteurs de ligne proviennent du fichier de reference.
   ============================================================================= */

:root {
  --ink: #1b1a18; --ink-2: #4a4741; --ink-3: #78746c; --ink-inv: #f4f1ec;
  --line: #d9d5cd; --line-2: #e8e4dc; --line-strong: #b5afa4;
  --bg: #f7f5f1; --surface: #ffffff; --surface-2: #f2efe9; --surface-3: #e9e5dd;
  --header: #241f1a; --header-2: #332c25;
  --primary: #7a4a2e; --primary-hover: #5f3922; --primary-soft: #f4eae2; --primary-line: #d8bfa9;
  --success: #2f6b46; --success-soft: #e6efe8; --success-line: #b3ccbc;
  --warning: #8a6414; --warning-soft: #f6eed9; --warning-line: #dcc890;
  --danger: #9c3327; --danger-soft: #f7e6e3; --danger-line: #dbb0a9;
  --info: #3d5a80; --info-soft: #e8edf4; --info-line: #b6c3d6;
  --r: 3px; --r-sm: 2px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;
  --t-xs: 11px; --t-sm: 12px; --t-base: 13px; --t-md: 14px; --t-lg: 16px; --t-xl: 20px; --t-2xl: 26px; --t-3xl: 32px;
  --row-h: 34px;
  --shadow-modal: 0 12px 40px rgba(27, 26, 24, .28);
  --sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-base);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); text-decoration: underline; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
table { border-collapse: collapse; width: 100%; }
th { text-align: left; font-weight: 500; }

@keyframes acsIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes acsFade { from { opacity: 0; } to { opacity: 1; } }

/* -----------------------------------------------------------------------------
   Mise en page
   ----------------------------------------------------------------------------- */
.app { min-height: 100vh; display: grid; grid-template-columns: 232px 1fr; }

.sidebar {
  background: var(--header);
  color: var(--ink-inv);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  position: sticky;
  top: 0;
  height: 100vh;
}
.sidebar__brand {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s5) var(--s4);
  border-bottom: 1px solid rgba(244, 241, 236, .12);
}
.sidebar__mark {
  width: 26px; height: 26px; border: 1.5px solid var(--ink-inv); border-radius: var(--r-sm);
  display: grid; place-items: center; font-family: var(--mono); font-size: var(--t-sm);
}
.sidebar__name { font-weight: 600; letter-spacing: -.01em; }
.sidebar__group { padding: var(--s4) var(--s4) var(--s1); }
.sidebar__group-label {
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .06em;
  text-transform: uppercase; color: #8a8078;
}
.sidebar__link {
  display: flex; align-items: center; gap: var(--s2);
  padding: 6px var(--s4); color: #c9c2b8; font-size: var(--t-base);
  border-left: 2px solid transparent;
}
.sidebar__link:hover { background: var(--header-2); color: var(--ink-inv); text-decoration: none; }
.sidebar__link--active {
  background: var(--header-2); color: var(--ink-inv); border-left-color: var(--primary-line);
}
.sidebar__num { font-family: var(--mono); font-size: var(--t-xs); color: #8a8078; }

.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s3) var(--s6);
  background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
.topbar__title { font-size: var(--t-lg); font-weight: 600; letter-spacing: -.01em; }
.topbar__spacer { margin-left: auto; }
.topbar__user { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-sm); }
.avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--primary-soft); color: var(--primary);
  display: grid; place-items: center; font-size: var(--t-xs); font-weight: 600;
}

.content { padding: var(--s6); animation: acsIn .18s ease-out; }
.page-header { display: flex; align-items: flex-start; gap: var(--s4); margin-bottom: var(--s5); }
.page-header__title { font-size: var(--t-xl); font-weight: 600; letter-spacing: -.01em; margin: 0; }
.page-header__subtitle { color: var(--ink-3); margin-top: var(--s1); }
.page-header__actions { margin-left: auto; display: flex; gap: var(--s2); }

/* -----------------------------------------------------------------------------
   Surfaces
   ----------------------------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
}
.card__header {
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; gap: var(--s3);
}
.card__title { font-weight: 500; }
.card__body { padding: var(--s4); }

.grid { display: grid; gap: var(--s4); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Indicateurs */
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4); }
.kpi__label {
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3);
}
.kpi__value { font-size: var(--t-2xl); font-weight: 500; letter-spacing: -.02em; margin-top: var(--s2); }
.kpi__hint { color: var(--ink-3); font-size: var(--t-sm); margin-top: var(--s1); }

/* -----------------------------------------------------------------------------
   Tableaux
   ----------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
.table { font-size: var(--t-base); }
.table th {
  padding: 7px var(--s3); background: var(--surface-2); border-bottom: 1px solid var(--line);
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3);
  white-space: nowrap;
}
.table td { padding: 7px var(--s3); border-bottom: 1px solid var(--line-2); height: var(--row-h); }
.table tbody tr:hover { background: var(--surface-2); }
.table .num { text-align: right; font-family: var(--mono); font-size: var(--t-sm); white-space: nowrap; }
.table .mono { font-family: var(--mono); font-size: var(--t-xs); }

/* -----------------------------------------------------------------------------
   Badges et etats
   ----------------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px var(--s2); border-radius: var(--r-sm);
  font-size: var(--t-xs); border: 1px solid transparent; white-space: nowrap;
}
.badge--neutral { background: var(--surface-3); border-color: var(--line); color: var(--ink-2); }
.badge--primary { background: var(--primary-soft); border-color: var(--primary-line); color: var(--primary); }
.badge--success { background: var(--success-soft); border-color: var(--success-line); color: var(--success); }
.badge--warning { background: var(--warning-soft); border-color: var(--warning-line); color: var(--warning); }
.badge--danger  { background: var(--danger-soft);  border-color: var(--danger-line);  color: var(--danger); }
.badge--info    { background: var(--info-soft);    border-color: var(--info-line);    color: var(--info); }

/* Les quatre dimensions de statut d'une police sont affichees separement,
   jamais fusionnees en un libelle unique (section 17.1). */
.status-row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.status-row__item { display: flex; flex-direction: column; gap: 2px; }
.status-row__label {
  font-family: var(--mono); font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-3);
}

/* -----------------------------------------------------------------------------
   Formulaires
   ----------------------------------------------------------------------------- */
.field { display: block; margin-bottom: var(--s4); }
.field__label { display: block; font-size: var(--t-sm); font-weight: 500; margin-bottom: var(--s1); }
.field__hint { color: var(--ink-3); font-size: var(--t-xs); margin-top: var(--s1); }
.input, .select, .textarea {
  width: 100%; height: 34px; padding: 0 var(--s3);
  border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface);
}
.textarea { height: auto; min-height: 80px; padding: var(--s2) var(--s3); }
.input:disabled, .select:disabled { background: var(--surface-2); color: var(--ink-3); }
.input--error { border-color: var(--danger); }

.btn {
  display: inline-flex; align-items: center; gap: var(--s2); justify-content: center;
  height: 34px; padding: 0 var(--s4);
  border: 1px solid var(--line-strong); border-radius: var(--r);
  background: var(--surface); color: var(--ink);
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn--primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn--primary:hover { background: var(--primary-hover); color: #fff; }
.btn--danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn--sm { height: 28px; padding: 0 var(--s3); font-size: var(--t-sm); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.toolbar {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line-2);
}
.toolbar__search { flex: 1 1 260px; max-width: 380px; }

/* -----------------------------------------------------------------------------
   Messages
   ----------------------------------------------------------------------------- */
.alert {
  border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--s3) var(--s4); margin-bottom: var(--s4); line-height: 1.5;
}
.alert__title { font-weight: 500; }
.alert__body { font-size: var(--t-sm); margin-top: 2px; }
.alert--danger  { background: var(--danger-soft);  border-color: var(--danger-line);  color: var(--danger); }
.alert--warning { background: var(--warning-soft); border-color: var(--warning-line); color: var(--warning); }
.alert--success { background: var(--success-soft); border-color: var(--success-line); color: var(--success); }
.alert--info    { background: var(--info-soft);    border-color: var(--info-line);    color: var(--info); }

/* Un ecran de liste vide affiche un message explicite et une action suggeree,
   jamais une page blanche (section 25.3). */
.empty { padding: var(--s10) var(--s6); text-align: center; color: var(--ink-3); }
.empty__title { font-size: var(--t-md); color: var(--ink-2); margin-bottom: var(--s2); }

.pagination {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); border-top: 1px solid var(--line-2);
  font-size: var(--t-sm); color: var(--ink-3);
}
.pagination__spacer { margin-left: auto; }

/* -----------------------------------------------------------------------------
   Bandeau financier de la fiche police
   ----------------------------------------------------------------------------- */
.money-band {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
  overflow: hidden;
}
.money-band__cell { padding: var(--s3) var(--s4); border-right: 1px solid var(--line-2); }
.money-band__cell:last-child { border-right: 0; }
.money-band__label {
  font-family: var(--mono); font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-3);
}
.money-band__value { font-size: var(--t-lg); font-weight: 500; margin-top: var(--s1); font-variant-numeric: tabular-nums; }

/* Ecran d'affectation : les trois totaux restent visibles en permanence. */
.allocation-totals {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4);
  padding: var(--s4); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r); margin-bottom: var(--s4);
}
.allocation-totals__value { font-size: var(--t-xl); font-weight: 500; font-variant-numeric: tabular-nums; }
.allocation-totals__value--over { color: var(--danger); }

/* Rapprochement : distinction visuelle exacte contre tolerance (RG-075). */
.match--exact { border-left: 3px solid var(--success); }
.match--tolerated { border-left: 3px solid var(--warning); }
.match--anomaly { border-left: 3px solid var(--danger); }

/* Champs OCR sous le seuil de confiance, regroupes et signales (RG-081). */
.ocr-field { display: grid; grid-template-columns: 180px 1fr 90px; gap: var(--s3); align-items: center; padding: var(--s2) 0; border-bottom: 1px solid var(--line-2); }
.ocr-field--review { background: var(--warning-soft); }
.ocr-confidence { font-family: var(--mono); font-size: var(--t-xs); text-align: right; }

/* Verification d'un cheque : la piece et la saisie restent cote a cote. Faire
   defiler l'une pour lire l'autre rendrait la comparaison peu fiable. */
.check-verify { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); align-items: start; }
.check-preview {
  display: block; width: 100%; height: auto; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--surface-2);
}

.text-muted { color: var(--ink-3); }
.text-sm { font-size: var(--t-sm); }
.text-mono { font-family: var(--mono); }
.num { font-variant-numeric: tabular-nums; }
.mt-4 { margin-top: var(--s4); }
.mb-4 { margin-bottom: var(--s4); }
.flex { display: flex; }
.gap-2 { gap: var(--s2); }
.items-center { align-items: center; }

/* Ecran etroit : les colonnes secondaires sont masquees plutot que compressees. */
@media (max-width: 1366px) {
  .app { grid-template-columns: 200px 1fr; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .money-band { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .check-verify { grid-template-columns: minmax(0, 1fr); }
  .col-secondary { display: none; }
}

/* =============================================================================
   Tableau de bord : indicateurs cliquables, serie mensuelle, vieillissement.
   Les trois representations viennent du design valide. Elles sont dessinees en
   CSS, sans bibliotheque de graphiques : douze barres et quatre jauges ne
   justifient pas cent kilo-octets de JavaScript, et le rendu reste imprimable.
   ============================================================================= */
.kpi--link { display: block; text-align: left; width: 100%; }
.kpi--link:hover { border-color: var(--line-strong); text-decoration: none; }
.kpi__drill { margin-top: var(--s2); font-size: var(--t-xs); color: var(--primary); }
.kpi--tone-primary { border-left: 3px solid var(--primary); }
.kpi--tone-info { border-left: 3px solid var(--info); }
.kpi--tone-success { border-left: 3px solid var(--success); }
.kpi--tone-warning { border-left: 3px solid var(--warning); }
.kpi--tone-danger { border-left: 3px solid var(--danger); }

.chart { display: flex; align-items: flex-end; gap: var(--s2); height: 190px;
  margin-top: var(--s4); border-bottom: 1px solid var(--line); }
.chart__month { flex: 1 1 0; display: flex; align-items: flex-end; gap: 2px; height: 100%; }
.chart__bar { flex: 1 1 0; display: block; }
.chart__bar--collected { background: var(--primary); }
.chart__bar--remitted { background: var(--info); }
.chart__axis { display: flex; gap: var(--s2); margin-top: 6px; }
.chart__label { flex: 1 1 0; text-align: center; font-family: var(--mono);
  font-size: var(--t-xs); color: var(--ink-3); }
.chart__legend { margin-left: auto; display: flex; gap: var(--s3);
  font-size: var(--t-xs); color: var(--ink-2); }
.chart__key { display: flex; align-items: center; gap: 5px; }
.chart__swatch { width: 9px; height: 9px; display: inline-block; }

.ageing { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s4); }
.ageing__row { display: block; width: 100%; text-align: left; }
.ageing__row:hover { text-decoration: none; opacity: .8; }
.ageing__head { display: flex; justify-content: space-between; font-size: var(--t-sm); }
.ageing__amount { font-family: var(--mono); }
/* La piste et sa jauge sont des `span` a l'interieur d'un lien : sans
   `display: block`, leur hauteur reste nulle et la barre disparait. */
.ageing__track { display: block; margin-top: 6px; height: 6px; background: var(--line-2);
  border-radius: 100px; overflow: hidden; }
.ageing__fill { height: 100%; display: block; }
.ageing__fill--0 { background: var(--info); }
.ageing__fill--31 { background: var(--warning); }
.ageing__fill--61 { background: var(--primary); }
.ageing__fill--91 { background: var(--danger); }

/* -----------------------------------------------------------------------------
   Bandeau d'indicateurs
   Une seule rangee, huit cellules separees par un filet vertical, sur le modele
   du bandeau financier de la fiche police. Huit cartes empilees repoussaient
   les graphiques sous la ligne de flottaison.
   La cellule entiere est cliquable : un chiffre qu'on ne peut pas ouvrir n'est
   pas verifiable, et viser un lien de trois mots au clavier est penible.
   ----------------------------------------------------------------------------- */
.kpi-band {
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr));
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden;
}
.kpi-band__cell {
  display: block; padding: var(--s3) var(--s4);
  border-left: 1px solid var(--line-2); color: var(--ink);
}
.kpi-band__cell:first-child { border-left: 0; }
.kpi-band__cell:hover { background: var(--surface-2); text-decoration: none; }
/* Le libelle se replie plutot que d'etre coupe : « Taux de recouvrem... » ne
   dit plus de quoi il s'agit, et la grille egalise de toute facon la hauteur
   des huit cellules. */
.kpi-band__label {
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3); line-height: 1.3;
}
.kpi-band__value {
  margin-top: var(--s1); font-size: var(--t-lg); font-weight: 500;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.kpi-band__value--danger { color: var(--danger); }
.kpi-band__hint { margin-top: var(--s1); font-size: var(--t-xs); color: var(--ink-3); }

/* Sous 1400 px, huit colonnes deviennent illisibles : le bandeau passe a
   quatre, puis a deux. Les filets suivent, sans quoi ils flottent. */
@media (max-width: 1400px) {
  .kpi-band { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kpi-band__cell:nth-child(4n + 1) { border-left: 0; }
  .kpi-band__cell:nth-child(n + 5) { border-top: 1px solid var(--line-2); }
}
@media (max-width: 900px) {
  .kpi-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-band__cell:nth-child(2n + 1) { border-left: 0; }
  .kpi-band__cell:nth-child(n + 3) { border-top: 1px solid var(--line-2); }
}

/* -----------------------------------------------------------------------------
   Entete de section et filtres
   La partie analytique du tableau de bord porte ses propres filtres. Ils sont
   places a cote du titre qu'ils gouvernent, et nulle part ailleurs : un filtre
   loin de ce qu'il filtre se retrouve applique sans qu'on s'en souvienne.
   ----------------------------------------------------------------------------- */
.section-head {
  display: flex; align-items: flex-end; gap: var(--s4);
  margin: var(--s8) 0 var(--s4); padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
}
.section-head__title { font-size: var(--t-lg); font-weight: 600; margin: 0; }
.filters { margin-left: auto; display: flex; align-items: flex-end; gap: var(--s3); flex-wrap: wrap; }
.filters__field { display: flex; flex-direction: column; gap: 2px; }
.filters__label {
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3);
}
.select--sm { height: 28px; font-size: var(--t-sm); width: auto; min-width: 120px; }

/* -----------------------------------------------------------------------------
   Courbes de progression
   Dessinees en SVG, sans bibliotheque : trois polylignes ne justifient pas cent
   kilo-octets de JavaScript, et le rendu reste imprimable. Le repere est
   normalise de 0 a 100 par le service ; `preserveAspectRatio: none` etire le
   trace a la largeur disponible, et `non-scaling-stroke` empeche l'epaisseur du
   trait de s'etirer avec lui.
   ----------------------------------------------------------------------------- */
.lines { margin-top: var(--s2); }
.lines__svg {
  display: block; width: 100%; height: 220px;
  border-bottom: 1px solid var(--line); overflow: visible;
}
.lines--short .lines__svg { height: 130px; }
.lines__grid { stroke: var(--line-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lines__path { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.lines__path--info { stroke: var(--info); }
.lines__path--success { stroke: var(--success); }
.lines__path--primary { stroke: var(--primary); }
.lines__path--warning { stroke: var(--warning); }
.lines__axis { display: flex; margin-top: 6px; }
.lines__label {
  flex: 1 1 0; text-align: center; font-family: var(--mono);
  font-size: var(--t-xs); color: var(--ink-3);
}
.chart__swatch--info { background: var(--info); }
.chart__swatch--success { background: var(--success); }
.chart__swatch--primary { background: var(--primary); }
.chart__swatch--warning { background: var(--warning); }

/* -----------------------------------------------------------------------------
   Jauges de classement et tuiles
   ----------------------------------------------------------------------------- */
.gauge {
  display: block; min-width: 60px; height: 6px;
  background: var(--line-2); border-radius: 100px; overflow: hidden;
}
.gauge__fill { display: block; height: 100%; }
.gauge__fill--success { background: var(--success); }
.gauge__fill--info { background: var(--info); }
.gauge__fill--warning { background: var(--warning); }
.gauge__fill--danger { background: var(--danger); }

.rank { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) 0; }
.rank__label { flex: 0 0 40%; font-size: var(--t-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank .gauge { flex: 1 1 auto; }
.rank__value { font-family: var(--mono); font-size: var(--t-sm); min-width: 2.5em; text-align: right; }

.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
.tiles__cell { background: var(--surface-2); border-radius: var(--r); padding: var(--s3); }
.tiles__label {
  font-family: var(--mono); font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-3);
}
.tiles__value { font-size: var(--t-lg); font-weight: 500; margin-top: var(--s1); font-variant-numeric: tabular-nums; }