@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --mur:       #e4eae9;
  --mur-haut:  #eef2f1;
  --papier:    #f8faf9;
  --encre:     #0e2033;
  --encre-2:   #4a5f73;
  --encre-3:   #8698a7;
  --trait:     #c7d3d1;
  --rouge:     #e8312a;
  --ambre:     #d98326;
  --craie:     #4f7d6b;
  --rail:      #b9c7c5;

  --bg:       var(--papier);
  --bg1:      var(--papier);
  --bg2:      var(--mur);
  --bg3:      var(--mur-haut);
  --bg0:      var(--mur);
  --border:   var(--trait);
  --border2:  #aebdbb;
  --text:     var(--encre);
  --text1:    var(--encre);
  --text2:    var(--encre-2);
  --text3:    var(--encre-3);

  --primary:     var(--encre);
  --primary2:    #07121f;
  --primary-dark:#07121f;
  --primary-bg:  rgba(14,32,51,0.08);
  --hover:       rgba(14,32,51,0.05);
  --blue:        var(--encre);
  --green:       var(--craie);
  --orange:      var(--ambre);

  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body:    'Archivo', system-ui, sans-serif;

  --radius:    3px;
  --radius-sm: 3px;
  --radius-lg: 4px;

  --shadow:    none;
  --shadow-md: 0 1px 0 rgba(14,32,51,0.06);

  --sidebar-bg:     #0e2033;
  --sidebar-bg2:    #14293f;
  --sidebar-text:   #9db0bf;
}

body { font-family: var(--font-body); font-variant-numeric: tabular-nums; }

.main-content { background: var(--mur); }

.card {
  background: var(--papier);
  border: 1px solid var(--trait);
  border-left: 3px solid var(--rail);
  border-radius: 0;
  box-shadow: none;
  transition: border-left-color .3s, transform .18s cubic-bezier(.22,.9,.3,1), box-shadow .18s;
}
.card:hover {
  border-color: var(--trait);
  border-left-color: var(--encre-3);
  box-shadow: -3px 0 0 0 rgba(14,32,51,.08);
}

.card-title {
  font-weight: 700;
  font-stretch: 95%;
  letter-spacing: .06em;
  color: var(--encre-2);
}

.section-header h1,
.modal-header h2 {
  font-weight: 700;
  font-stretch: 92%;
  letter-spacing: -0.015em;
}

.global-topbar {
  background: var(--mur-haut);
  border-bottom: 1px solid var(--trait);
  box-shadow: none;
}
.gtb-title { display: none; }
.gtb-icon { color: var(--encre-2); }
.gtb-divider { background: var(--trait); }
.gtb-sub-btn { font-weight: 600; border-radius: 3px; }
.gtb-sub-btn.active {
  color: var(--encre);
  background: transparent;
  box-shadow: inset 0 -2px 0 var(--encre);
  border-radius: 0;
}

.fil {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 7px;
  min-width: 0;
  font-size: 13.5px;
  color: var(--encre-2);
}
.fil:empty { display: none; }
.fil-item {
  font: inherit;
  color: var(--encre-2);
  background: none;
  border: 0;
  padding: 0;
  white-space: nowrap;
}
button.fil-item { cursor: pointer; text-decoration: underline transparent; text-underline-offset: 3px; transition: color .15s, text-decoration-color .15s; }
button.fil-item:hover { color: var(--encre); text-decoration-color: currentColor; }
button.fil-item:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }
.fil-sep { color: var(--encre-3); }
.fil-courant { color: var(--encre); font-weight: 700; font-stretch: 95%; letter-spacing: -.01em; font-size: 15px; }
.fiche-titre { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.modal { border-radius: 0; border: 1px solid var(--trait); }
.modal-header { background: var(--mur-haut); }

.btn-primary,
.btn-sm.btn-primary {
  background: var(--encre);
  border-radius: 3px;
  font-weight: 600;
  box-shadow: none;
}
.btn-primary:hover,
.btn-sm.btn-primary:hover { background: #1c3550; }
.btn-ghost, .btn-sm { border-radius: 3px; }

input, select, textarea { border-radius: 3px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--encre); outline-offset: 1px; border-color: var(--encre); }

.nav-item { border-radius: 0; font-weight: 600; font-stretch: 95%; }
.nav-item.active { border-left-color: var(--rouge); background: rgba(255,255,255,0.08); }
.nav-item.active svg { color: #fff; }
.sidebar-logo-sub { letter-spacing: .12em; }

.clients-tab.active { color: var(--encre); border-bottom-color: var(--encre); }

@media (prefers-reduced-motion: reduce) {
  .card, .fil-item { transition: none !important; }
}

@media (max-width: 768px) {
  .fil { font-size: 12.5px; }
  .fil-courant { font-size: 14px; }
}