/* =============================================================================
   Gate.Billing — direction « Registre »
   ---------------------------------------------------------------------------
   L'app est un grand livre, pas un dashboard : la structure vient des filets
   et du blanc, pas des cartes. Le sérif est réservé à deux moments — le titre
   de page et l'argent. Tout le reste est grotesque ou mono.

   Typographie : Instrument Serif (titres + montants) · Inter Tight (UI)
                 Geist Mono (références, étiquettes, données)
   Couleur     : blanc + dégradé cobalt #2563EB → cyan #06B6D4 (charte Gate)
   Thèmes      : clair + sombre, préférence système puis choix manuel
   ============================================================================= */

/* ---------- 1. Polices auto-hébergées (CSP font-src 'self') ---------------- */

@font-face {
  font-family: 'Instrument Serif';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/static/fonts/InstrumentSerif-normal-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;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/static/fonts/InstrumentSerif-normal-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic; font-weight: 400; font-display: swap;
  src: url('/static/fonts/InstrumentSerif-italic-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;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic; font-weight: 400; font-display: swap;
  src: url('/static/fonts/InstrumentSerif-italic-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/static/fonts/InterTight-normal-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;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/static/fonts/InterTight-normal-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('/static/fonts/GeistMono-normal-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;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('/static/fonts/GeistMono-normal-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 2. Jetons ------------------------------------------------------ */

:root {
  /* familles */
  --serif: 'Instrument Serif', ui-serif, Georgia, 'Times New Roman', serif;
  --sans:  'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono:  'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* échelle typographique */
  --t-micro: 9.5px;   /* étiquettes mono capitales */
  --t-mono:  11px;    /* références, données mono */
  --t-xs:    12px;
  --t-sm:    12.8px;
  --t-base:  13.6px;
  --t-lead:  15px;
  --t-h3:    14.5px;
  --t-h2:    18px;
  --t-h1:    32px;
  --t-chiffre: 33px;  /* montants du bandeau registre */

  /* rythme — dense, base 4 */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 20px; --e6: 28px; --e7: 40px; --e8: 56px;

  /* rayons — plus doux au contenant, plus serré à l'intérieur */
  --r-contenant: 14px; --r-bloc: 10px; --r-champ: 9px; --r-puce: 6px;

  /* couleur de marque — invariante entre les deux thèmes */
  --cobalt: #2563EB;
  --cyan:   #06B6D4;
  --grad:   linear-gradient(102deg, #2563EB 0%, #06B6D4 100%);

  --sidebar: 244px;
  --mesure:  1180px;

  /* motion */
  --duree-court: 140ms;
  --duree:       220ms;
  --sortie:      150ms;
  --courbe:      cubic-bezier(.32, .72, 0, 1);

  --z-fond: 0; --z-contenu: 10; --z-barre: 30; --z-flottant: 50;

  color-scheme: light dark;
}

/* --- thème clair (défaut) --- */
:root, :root[data-theme="light"] {
  --canvas:      #FFFFFF;
  --releve:      #FAFBFD;   /* fond de zone secondaire */
  --releve-2:    #F2F5FA;   /* survol de ligne, puces */
  --filet:       #E8EBF1;
  --filet-fort:  #D3D9E4;

  --encre:       #0A1020;
  --encre-2:     #545C6E;   /* 6,7:1 sur blanc */
  --encre-3:     #6E7789;   /* 4,6:1 sur blanc — plancher AA */

  --accent:      #1D4ED8;   /* 6,7:1 sur blanc */
  --accent-voile: rgba(37, 99, 235, .07);
  --accent-trait: rgba(37, 99, 235, .28);

  --ok:   #12724A;  --ok-voile:   rgba(18, 114, 74, .09);
  --alerte: #8A5106; --alerte-voile: rgba(138, 81, 6, .09);
  --erreur: #C42B2B; --erreur-voile: rgba(196, 43, 43, .08);

  --sur-plein: #FFFFFF;     /* texte sur aplat cobalt */
  --plein:     linear-gradient(102deg, #2563EB 0%, #0891B2 100%);
  --plein-encre: #0A1020;

  --ombre-1: 0 1px 2px rgba(10, 20, 55, .05);
  --ombre-2: 0 4px 14px -4px rgba(10, 20, 55, .10), 0 1px 3px rgba(10, 20, 55, .05);
  --ombre-3: 0 18px 44px -22px rgba(23, 62, 160, .34), 0 1px 3px rgba(10, 20, 55, .05);
  --voile-haut: radial-gradient(120% 62% at 22% -14%, rgba(37, 99, 235, .055), transparent 66%);
}

/* --- thème sombre --- */
:root[data-theme="dark"] {
  --canvas:      #0B0F1A;
  --releve:      #111726;
  --releve-2:    #172033;
  --filet:       #1E2637;
  --filet-fort:  #2E3852;

  --encre:       #E8ECF4;
  --encre-2:     #99A2B5;   /* 7,5:1 */
  --encre-3:     #737D92;   /* 4,6:1 — plancher AA */

  --accent:      #7FA9FF;   /* 8,2:1 */
  --accent-voile: rgba(127, 169, 255, .10);
  --accent-trait: rgba(127, 169, 255, .32);

  --ok:   #4FBF89;  --ok-voile:   rgba(79, 191, 137, .12);
  --alerte: #E0A33F; --alerte-voile: rgba(224, 163, 63, .12);
  --erreur: #FF7A7A; --erreur-voile: rgba(255, 122, 122, .11);

  --sur-plein: #061024;
  --plein:     linear-gradient(102deg, #4F86FF 0%, #22C7E0 100%);
  --plein-encre: #E8ECF4;

  --ombre-1: 0 1px 2px rgba(0, 0, 0, .40);
  --ombre-2: 0 4px 16px -4px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .40);
  --ombre-3: 0 20px 48px -24px rgba(0, 0, 0, .78), 0 1px 3px rgba(0, 0, 0, .45);
  --voile-haut: radial-gradient(120% 62% at 22% -14%, rgba(56, 116, 255, .13), transparent 66%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --canvas: #0B0F1A; --releve: #111726; --releve-2: #172033;
    --filet: #1E2637; --filet-fort: #2E3852;
    --encre: #E8ECF4; --encre-2: #99A2B5; --encre-3: #737D92;
    --accent: #7FA9FF; --accent-voile: rgba(127, 169, 255, .10);
    --accent-trait: rgba(127, 169, 255, .32);
    --ok: #4FBF89; --ok-voile: rgba(79, 191, 137, .12);
    --alerte: #E0A33F; --alerte-voile: rgba(224, 163, 63, .12);
    --erreur: #FF7A7A; --erreur-voile: rgba(255, 122, 122, .11);
    --sur-plein: #061024;
    --plein: linear-gradient(102deg, #4F86FF 0%, #22C7E0 100%);
    --plein-encre: #E8ECF4;
    --ombre-1: 0 1px 2px rgba(0, 0, 0, .40);
    --ombre-2: 0 4px 16px -4px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .40);
    --ombre-3: 0 20px 48px -24px rgba(0, 0, 0, .78), 0 1px 3px rgba(0, 0, 0, .45);
    --voile-haut: radial-gradient(120% 62% at 22% -14%, rgba(56, 116, 255, .13), transparent 66%);
  }
}

/* ---------- 3. Socle ------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 100%;
  scroll-behavior: smooth;
  background: var(--canvas);
}

body {
  margin: 0;
  display: flex;
  min-height: 100dvh;
  font-family: var(--sans);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.5;
  color: var(--encre);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv05' 1, 'ss01' 1;
}

h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { text-wrap: pretty; }

h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-h1);
  line-height: 1.04;
  letter-spacing: -.015em;
}
h2 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--t-h2);
  line-height: 1.25;
  letter-spacing: -.011em;
}
h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: 1.3;
  letter-spacing: -.006em;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2.5px; text-decoration-thickness: 1px; }

:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 2px;
  border-radius: var(--r-puce);
}
:root[data-theme="dark"] :focus-visible { outline-color: var(--accent); }

::selection { background: var(--accent-voile); color: var(--encre); }

code, .mono { font-family: var(--mono); }
code {
  background: var(--releve-2);
  border-radius: var(--r-puce);
  padding: 1.5px 6px;
  font-size: .86em;
}

.lien-evasion {
  position: absolute; left: -9999px; top: 0; z-index: var(--z-flottant);
  background: var(--encre); color: var(--canvas);
  padding: 10px 16px; border-radius: var(--r-champ);
  font-weight: 600;
}
.lien-evasion:focus { left: 10px; top: 10px; text-decoration: none; }

/* ---------- 4. Étiquettes mono — la signature du registre ------------------ */

.etiquette, .sur-titre, .menu-titre, table.liste th, label, .statut, .badge {
  font-family: var(--mono);
  font-weight: 500;
  text-transform: uppercase;
  font-feature-settings: 'ss01' 1;
}
.etiquette, .sur-titre, .menu-titre, table.liste th, label {
  font-size: var(--t-micro);
  letter-spacing: .15em;
  color: var(--encre-3);
}

/* ---------- 5. Barre latérale ---------------------------------------------- */

.laterale {
  display: flex; flex-direction: column;
  width: var(--sidebar); flex: none;
  height: 100dvh; position: sticky; top: 0; z-index: var(--z-barre);
  padding: var(--e6) var(--e3) var(--e4);
  background: var(--canvas);
  border-right: 1px solid var(--filet);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Masthead éditorial — pas de logo en boîte */
.marque { display: block; padding: 0 var(--e3) var(--e6); text-decoration: none; }
.marque:hover { text-decoration: none; }
.marque-nom {
  display: block;
  font-family: var(--serif);
  font-size: 25px; line-height: 1;
  letter-spacing: -.018em;
  color: var(--encre);
}
.marque-nom .point {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.marque-sous {
  display: block; margin-top: 7px;
  font-family: var(--mono); font-size: 8.5px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--encre-3);
}

nav.menu { display: flex; flex-direction: column; gap: 1px; }
.menu-titre { padding: var(--e5) var(--e3) var(--e2); }

.item {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  padding: 9px var(--e3);
  border-radius: var(--r-bloc);
  min-height: 38px;
  color: var(--encre-2);
  font-size: var(--t-base); font-weight: 500;
  text-decoration: none;
  transition: background var(--duree-court) var(--courbe),
              color var(--duree-court) var(--courbe);
}
.item svg { width: 16px; height: 16px; flex: none; opacity: .78; }
.item:hover { background: var(--releve-2); color: var(--encre); text-decoration: none; }
.item:hover svg { opacity: 1; }
.item[aria-current="page"] {
  background: var(--accent-voile);
  color: var(--encre);
  font-weight: 600;
}
.item[aria-current="page"] svg { opacity: 1; color: var(--accent); }
.item[aria-current="page"]::before {
  content: ""; position: absolute; left: -1px; top: 8px; bottom: 8px;
  width: 2.5px; border-radius: 0 3px 3px 0; background: var(--grad);
}
.item .compteur {
  margin-left: auto;
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--accent); background: var(--accent-voile);
  border-radius: var(--r-puce); padding: 1.5px 7px;
}

.laterale-pied {
  margin-top: auto; padding-top: var(--e4);
  border-top: 1px solid var(--filet);
  display: flex; flex-direction: column; gap: 2px;
}
.compte-chip { display: flex; align-items: center; gap: 10px; padding: var(--e2) var(--e3) var(--e3); }
.compte-chip .pastille {
  width: 28px; height: 28px; flex: none;
  border-radius: 9px;                       /* squircle, pas un cercle */
  display: flex; align-items: center; justify-content: center;
  background: var(--releve-2); border: 1px solid var(--filet);
  color: var(--encre-2);
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase;
}
.compte-chip b {
  display: block; max-width: 148px;
  font-size: var(--t-xs); font-weight: 600; color: var(--encre);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.compte-chip span {
  font-family: var(--mono); font-size: 8.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--encre-3);
}

.pied-actions { display: flex; align-items: center; gap: var(--e1); }
form.sortie { flex: 1; }
form.sortie button {
  width: 100%; justify-content: flex-start;
  background: none; border: none; box-shadow: none;
  color: var(--encre-3); font-size: var(--t-xs); font-weight: 500;
  padding: 7px var(--e3); min-height: 34px; border-radius: var(--r-champ);
}
form.sortie button:hover {
  background: var(--erreur-voile); color: var(--erreur);
  border: none; box-shadow: none;
}

/* Bascule de thème */
.bascule-theme {
  width: 34px; height: 34px; min-height: 34px; flex: none;
  padding: 0; justify-content: center;
  border-radius: var(--r-champ);
  background: none; border: 1px solid transparent; box-shadow: none;
  color: var(--encre-3);
}
.bascule-theme:hover {
  background: var(--releve-2); color: var(--encre);
  border-color: var(--filet); box-shadow: none;
}
.bascule-theme svg { width: 15px; height: 15px; }
.bascule-theme .icone-sombre { display: none; }
:root[data-theme="dark"] .bascule-theme .icone-clair { display: none; }
:root[data-theme="dark"] .bascule-theme .icone-sombre { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .bascule-theme .icone-clair { display: none; }
  :root:not([data-theme]) .bascule-theme .icone-sombre { display: block; }
}

/* ---------- 6. Zone principale --------------------------------------------- */

.principale { flex: 1; min-width: 0; position: relative; background: var(--canvas); }
.principale::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 420px;
  background: var(--voile-haut);
  pointer-events: none; z-index: var(--z-fond);
}

main {
  position: relative; z-index: var(--z-contenu);
  max-width: var(--mesure);
  margin: 0 auto;
  padding: var(--e7) var(--e7) var(--e8);
}

/* En-tête de page : sur-titre mono, titre sérif, actions à droite */
.page-tete {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--e4); flex-wrap: wrap;
  padding-bottom: var(--e5);
  margin-bottom: var(--e6);
  border-bottom: 1px solid var(--filet);
}
.page-tete .sur-titre { display: block; margin-bottom: var(--e2); }
.page-tete .sur-titre a { color: var(--encre-3); }
.page-tete .sur-titre a:hover { color: var(--accent); }
.page-tete h1 { max-width: 22ch; }
.page-actions { display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap; }

/* ---------- 7. Sections — filets et blanc, pas de cartes ------------------- */

.section { margin-bottom: var(--e7); }
.section + .section { padding-top: var(--e6); border-top: 1px solid var(--filet); }
.section-tete { margin-bottom: var(--e4); }
.section-tete h2 { margin-bottom: var(--e1); }
.sous-titre {
  margin: 0; max-width: 78ch;
  color: var(--encre-2); font-size: var(--t-sm); line-height: 1.55;
}
.section-tete + .defilable { margin-top: var(--e4); }

/* Surface élevée — réservée à l'interactif (Aria, formulaires, aperçus) */
.panneau {
  background: var(--canvas);
  border: 1px solid var(--filet);
  border-radius: var(--r-contenant);
  padding: var(--e5) var(--e6);
  margin-bottom: var(--e4);
  box-shadow: var(--ombre-1);
}
.panneau > h2 { margin-bottom: var(--e1); }
.panneau > .sous-titre { margin-bottom: var(--e4); }
.panneau:last-child { margin-bottom: 0; }

/* ---------- 8. Bandeau registre (KPI) -------------------------------------- */

.registre {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
  border-top: 1px solid var(--filet-fort);
  border-bottom: 1px solid var(--filet);
  margin-bottom: var(--e7);
  position: relative;
}
.registre::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 92px; height: 1px;
  background: var(--grad);
}
.registre-cellule {
  padding: var(--e5) var(--e5) var(--e5) 0;
  border-right: 1px solid var(--filet);
}
.registre-cellule:last-child { border-right: none; }
.registre-cellule:not(:first-child) { padding-left: var(--e5); }
.registre-cellule .etiquette { display: block; margin-bottom: var(--e3); }
.registre-cellule .valeur {
  display: block;
  font-family: var(--serif); font-weight: 400;
  font-size: var(--t-chiffre); line-height: 1;
  letter-spacing: -.014em;
  color: var(--encre);
  font-variant-numeric: tabular-nums;
}
.registre-cellule .valeur.texte {
  font-family: var(--sans); font-weight: 600;
  font-size: var(--t-lead); letter-spacing: -.008em; line-height: 1.35;
}
.registre-cellule .note {
  display: block; margin-top: var(--e2);
  font-size: var(--t-xs); color: var(--encre-3);
}
.registre-cellule .valeur .unite {
  font-family: var(--sans); font-size: var(--t-xs); font-weight: 500;
  color: var(--encre-3); letter-spacing: 0;
  margin-left: 7px; vertical-align: 3px;
}

/* ---------- 9. Alertes ------------------------------------------------------ */

/* Notices : des lignes de registre, pas des boîtes. Une bordure d'accent
   colorée sur un rectangle arrondi est le tic visuel le plus reconnaissable
   des interfaces générées — et surtout, empilée deux fois, elle mange le haut
   de chaque écran et parle avant le titre. Ici : un filet, une icône dont la
   FORME porte déjà le niveau (triangle / cercle-bang / cercle-coché), et le
   texte. La couleur reste un renfort, jamais le seul signal. */
.alerte {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--filet);
  color: var(--encre-2);
  font-size: var(--t-sm); line-height: 1.5;
}
.alerte svg { width: 14px; height: 14px; flex: none; margin-top: 3px; color: var(--alerte); }
.alerte.rouge { color: var(--encre); }
.alerte.rouge svg { color: var(--erreur); }
.alerte.verte svg { color: var(--ok); }

.bandeau-alertes {
  border-top: 1px solid var(--filet-fort);
  margin-bottom: var(--e6);
}
.bandeau-alertes:empty { display: none; }
/* Sur la page de connexion, la notice reprend la largeur de la carte. */
body.auth .bandeau-alertes { border-top: none; }
body.auth .alerte { border-bottom: none; padding: 0 0 var(--e3); }

/* ---------- 10. Tableaux — le cœur du registre ----------------------------- */

.defilable {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  /* Indispensable : sans bloc conteneur ici, un enfant en position absolue
     (les libellés .sr-only des en-têtes) échappe au clipping et fait défiler
     la page entière horizontalement sur mobile. */
  position: relative;
}

table.liste {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
table.liste th {
  text-align: left;
  padding: 0 var(--e3) var(--e2);
  border-bottom: 1px solid var(--filet-fort);
  white-space: nowrap;
  font-size: var(--t-micro);
}
table.liste th:first-child, table.liste td:first-child { padding-left: 2px; }
table.liste th:last-child,  table.liste td:last-child  { padding-right: 2px; }
table.liste td {
  padding: 11px var(--e3);
  border-bottom: 1px solid var(--filet);
  vertical-align: middle;
}
table.liste tbody tr { position: relative; }
table.liste tbody tr:hover td { background: var(--releve); }
table.liste tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 var(--cobalt); }
table.liste td, table.liste th { transition: background var(--duree-court) var(--courbe); }
table.liste th.montant, table.liste td.montant {
  text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
table.liste td.montant { font-weight: 500; }
table.liste .principal-cellule {
  font-weight: 500; color: var(--encre);
  min-width: 11ch;
}
/* Deux statuts sur la même cellule (« envoyé » + « validé ») : empilés serrés,
   pas côte à côte — la colonne resterait trop large. */
table.liste td .statut + .statut { display: flex; margin-top: 3px; }

/* Colonne « objet » : c'est elle qui absorbe la place restante. */
table.liste td.muted { min-width: 16ch; }

/* Notice isolée dans un panneau (validation bloquée) : elle n'a pas de bandeau
   pour la délimiter, on lui rend un filet haut. */
.panneau .alerte { border-top: 1px solid var(--filet); margin-top: var(--e3); }

/* Référence de document : mono, c'est un identifiant */
.num {
  font-family: var(--mono); font-weight: 500;
  font-size: var(--t-mono); letter-spacing: .02em;
  color: var(--accent); white-space: nowrap;
}
a.num:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Cible tactile : le texte fait 14 px de haut, la zone cliquable en fait 26.
   Le retrait négatif compense le remplissage, la mise en page ne bouge pas. */
table.liste a.num {
  display: inline-block;
  padding: 6px 3px; margin: -6px -3px;
}

/* Statut : puce + texte mono coloré (jamais la couleur seule) */
.statut {
  font-size: 10px; letter-spacing: .09em;
  color: var(--encre-2); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.statut::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; flex: none;
}
.statut.ok { color: var(--ok); }
.statut.warn { color: var(--alerte); }
.statut.err { color: var(--erreur); }
.statut.accent { color: var(--accent); }

.badge {
  display: inline-block;
  font-size: 9px; letter-spacing: .1em;
  padding: 2.5px 6px; border-radius: var(--r-puce);
  white-space: nowrap;
  color: var(--accent); background: var(--accent-voile);
  border: 1px solid var(--accent-trait);
}
.badge.ok { color: var(--ok); background: var(--ok-voile); border-color: color-mix(in srgb, var(--ok) 32%, transparent); }
.badge.warn { color: var(--alerte); background: var(--alerte-voile); border-color: color-mix(in srgb, var(--alerte) 32%, transparent); }
.badge.err { color: var(--erreur); background: var(--erreur-voile); border-color: color-mix(in srgb, var(--erreur) 34%, transparent); }

/* État vide — composé, pas une ligne grise */
.vide { padding: var(--e7) var(--e5); text-align: center; }
.vide svg { width: 26px; height: 26px; color: var(--encre-3); opacity: .55; margin-bottom: var(--e3); }
.vide p { margin: 0 auto; max-width: 46ch; color: var(--encre-2); font-size: var(--t-sm); }
.vide p + p { margin-top: var(--e2); color: var(--encre-3); font-size: var(--t-xs); }
td .vide { text-align: left; padding: var(--e6) 2px; }
td .vide p { margin-left: 0; }

/* ---------- 11. Boutons ----------------------------------------------------- */

button, .btn, .icone-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 36px; padding: 8px 14px;
  border-radius: var(--r-champ);
  border: 1px solid var(--filet-fort);
  background: var(--canvas);
  color: var(--encre);
  font-family: var(--sans); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: -.002em;
  text-decoration: none; cursor: pointer;
  box-shadow: var(--ombre-1);
  transition: background var(--duree-court) var(--courbe),
              border-color var(--duree-court) var(--courbe),
              color var(--duree-court) var(--courbe),
              box-shadow var(--duree-court) var(--courbe),
              transform var(--duree-court) var(--courbe);
}
button:hover, .btn:hover {
  background: var(--releve-2); border-color: var(--filet-fort);
  text-decoration: none; box-shadow: var(--ombre-2);
}
button:active, .btn:active, .icone-btn:active {
  transform: scale(.985); box-shadow: var(--ombre-1);
}
button svg, .btn svg { width: 14px; height: 14px; flex: none; }
button[disabled], .btn[aria-disabled="true"] {
  opacity: .45; cursor: not-allowed; box-shadow: none;
}
button[disabled]:hover { background: var(--canvas); transform: none; }

/* Action principale — un seul dégradé par écran */
button.principal, .btn.principal {
  background: var(--plein);
  color: var(--sur-plein);
  border-color: transparent;
  padding: 9px 18px;
  box-shadow: 0 1px 2px rgba(10, 20, 55, .12), 0 6px 18px -8px rgba(37, 99, 235, .55);
}
button.principal:hover, .btn.principal:hover {
  filter: saturate(1.08) brightness(1.05);
  box-shadow: 0 1px 2px rgba(10, 20, 55, .14), 0 10px 26px -10px rgba(37, 99, 235, .62);
}

button.discret, .btn.discret {
  background: none; border-color: var(--filet); color: var(--encre-2);
  box-shadow: none;
}
button.discret:hover, .btn.discret:hover {
  background: var(--releve-2); color: var(--encre);
  border-color: var(--filet-fort); box-shadow: none;
}

button.danger {
  background: var(--canvas); color: var(--erreur);
  border-color: color-mix(in srgb, var(--erreur) 40%, transparent);
}
button.danger:hover { background: var(--erreur-voile); border-color: var(--erreur); }

.icone-btn {
  width: 30px; height: 30px; min-height: 30px; padding: 0;
  border-radius: var(--r-champ);
  color: var(--encre-3);
  border-color: var(--filet);
  box-shadow: none;
}
.icone-btn:hover {
  color: var(--accent); border-color: var(--accent-trait);
  background: var(--accent-voile); box-shadow: none;
}
.icone-btn svg { width: 13px; height: 13px; }

.actions { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; }
.actions--espace { margin-top: var(--e4); }

/* ---------- 12. Filtres ----------------------------------------------------- */

.filtres {
  display: flex; gap: var(--e1); flex-wrap: wrap;
  margin-bottom: var(--e5);
  padding-bottom: var(--e3);
  border-bottom: 1px solid var(--filet);
}
.filtres a {
  padding: 6px 12px; border-radius: var(--r-champ);
  color: var(--encre-2); font-size: var(--t-sm); font-weight: 500;
  border: 1px solid transparent;
  transition: background var(--duree-court) var(--courbe),
              color var(--duree-court) var(--courbe);
}
.filtres a:hover { background: var(--releve-2); color: var(--encre); text-decoration: none; }
.filtres a[aria-current="page"] {
  background: var(--accent-voile); color: var(--accent);
  border-color: var(--accent-trait); font-weight: 600;
}

/* ---------- 13. Formulaires -------------------------------------------------- */

label { display: block; margin-bottom: 6px; }

input[type=text], input[type=email], input[type=password], input[type=number],
textarea, select {
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid var(--filet-fort);
  border-radius: var(--r-champ);
  background: var(--canvas);
  color: var(--encre);
  font-family: var(--sans); font-size: var(--t-base);
  transition: border-color var(--duree-court) var(--courbe),
              box-shadow var(--duree-court) var(--courbe);
}
input::placeholder, textarea::placeholder { color: var(--encre-3); }
input:hover, textarea:hover, select:hover { border-color: var(--encre-3); }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--cobalt);
  box-shadow: 0 0 0 3.5px var(--accent-voile);
}
:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] textarea:focus,
:root[data-theme="dark"] select:focus { border-color: var(--accent); }
select {
  appearance: none;
  padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) 17px, calc(100% - 10px) 17px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
input[type=checkbox] { width: auto; min-height: auto; accent-color: var(--cobalt); }

.champ { margin-bottom: var(--e4); }
.champ:last-of-type { margin-bottom: var(--e5); }
.grille { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.forme-etroite { max-width: 420px; }
.forme-etroite label:not(:first-child) { margin-top: var(--e3); }

/* ---------- 14. Aria — la seule surface vraiment élevée -------------------- */

.aria {
  position: relative;
  border: 1px solid var(--filet);
  border-radius: var(--r-contenant);
  background: var(--canvas);
  padding: var(--e5) var(--e6) var(--e6);
  margin-bottom: var(--e7);
  box-shadow: var(--ombre-3);
  overflow: hidden;
}
.aria::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--grad);
}
.aria-tete { display: flex; align-items: center; gap: 11px; margin-bottom: var(--e2); }
.aria-avatar {
  width: 30px; height: 30px; flex: none;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--plein); color: var(--sur-plein);
  font-family: var(--serif); font-size: 17px; line-height: 1;
  padding-bottom: 1px;
}
.aria-tete h2 { font-family: var(--serif); font-weight: 400; font-size: 21px; letter-spacing: -.01em; }
.aria-tete .etiquette { margin-left: auto; }

.chat {
  display: flex; flex-direction: column; gap: var(--e2);
  max-height: 380px; overflow-y: auto; overscroll-behavior: contain;
  margin: var(--e4) 0;
  padding: var(--e4);
  background: var(--releve);
  border: 1px solid var(--filet);
  border-radius: var(--r-bloc);
  scrollbar-width: thin;
}
.msg {
  max-width: 84%;
  padding: 9px 13px;
  border-radius: var(--r-bloc);
  font-size: var(--t-base); line-height: 1.5;
  white-space: pre-wrap;
  animation: entree-msg 260ms var(--courbe) both;
}
.msg.nico {
  align-self: flex-end;
  background: var(--encre); color: var(--canvas);
  border-bottom-right-radius: 3px;
}
.msg.assistant {
  align-self: flex-start;
  background: var(--canvas); border: 1px solid var(--filet);
  border-bottom-left-radius: 3px;
}
.msg.outil {
  align-self: stretch; max-width: 100%;
  background: none; border: none; border-left: 2px solid var(--filet-fort);
  border-radius: 0; padding: 2px 11px;
  font-family: var(--mono); font-size: 10.5px; color: var(--encre-3);
}
.msg.erreur {
  align-self: stretch; max-width: 100%;
  background: var(--erreur-voile); color: var(--erreur);
  font-size: var(--t-sm);
}
.chat .vide { padding: var(--e5) 0; margin: auto 0; }

.aria-composeur { display: flex; gap: var(--e2); align-items: flex-end; }
.aria-composeur textarea {
  flex: 1; min-height: 44px; resize: vertical;
  background: var(--canvas);
}
.aria-etat { margin: var(--e2) 0 0; min-height: 18px; }

/* Indicateur htmx — pulsation, pas de spinner générique */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator {
  display: inline-flex; align-items: center; gap: 7px;
}
.htmx-indicator::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--cobalt);
  animation: pouls 1.15s var(--courbe) infinite;
}

/* ---------- 15. Intégrations (Mon compte) ---------------------------------- */

.integration { padding: var(--e5) 0; border-top: 1px solid var(--filet); }
.integration:first-of-type { border-top: none; padding-top: var(--e2); }
.integration-tete { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; margin-bottom: var(--e1); }
.integration .muted { margin: 0 0 var(--e3); }
/* Un champ de saisie ne s'étale pas sur 1000 px : au-delà, l'œil perd le
   point de départ du texte et le bouton part à l'autre bout de l'écran. */
.ligne-jeton { display: flex; gap: var(--e2); flex-wrap: wrap; max-width: 660px; }
.ligne-jeton input { flex: 1; min-width: 220px; width: auto; }
.grille { max-width: 820px; }

.apercu-email {
  margin-top: var(--e3);
  border: 1px solid var(--filet);
  border-radius: var(--r-bloc);
  overflow: hidden;
  background: #FFFFFF;
}
.apercu-email iframe { display: block; width: 100%; height: 380px; border: 0; }

.liste-puces { margin: 0; padding-left: 17px; color: var(--encre-2); font-size: var(--t-sm); }
.liste-puces li + li { margin-top: var(--e1); }
.liste-puces::marker, .liste-puces li::marker { color: var(--encre-3); }

/* ---------- 15 bis. File de validation — le dossier ------------------------ */

.dossier { padding: var(--e6); }
.dossier-tete {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--e5); flex-wrap: wrap;
  padding-bottom: var(--e4); margin-bottom: var(--e4);
  border-bottom: 1px solid var(--filet);
}
.dossier-num { display: block; margin-bottom: 5px; }
.dossier-tete h2 { margin-bottom: var(--e1); }
.dossier-montant { text-align: right; flex: none; }
.dossier-montant .etiquette { display: block; margin-bottom: 5px; }
.dossier-montant .valeur {
  display: block;
  font-family: var(--serif); font-size: 27px; line-height: 1;
  letter-spacing: -.014em; font-variant-numeric: tabular-nums;
  color: var(--encre);
}
.dossier-montant .badge { margin-top: var(--e2); }

.destinataire {
  padding: var(--e3) var(--e4);
  background: var(--releve);
  border: 1px solid var(--filet);
  border-radius: var(--r-bloc);
  margin-bottom: var(--e3);
}
.destinataire .etiquette { display: block; margin-bottom: 5px; }
.destinataire p { font-size: var(--t-sm); }

.case-confirmation {
  display: flex; align-items: flex-start; gap: var(--e2);
  margin: 0 0 var(--e3);
  max-width: 52ch;
  font-family: var(--sans); font-size: var(--t-sm); font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--encre-2);
  cursor: pointer;
}
.case-confirmation input { margin-top: 2px; flex: none; }

/* ---------- 16. Utilitaires -------------------------------------------------- */

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
/* Surtout pas de display:flex sur un <td> : la cellule sort de l'algorithme
   de table et les largeurs de colonnes partent en vrille. */
.actions-cellule { white-space: nowrap; text-align: right; }
.actions-cellule > * { display: inline-flex; vertical-align: middle; }
.actions-cellule > * + * { margin-left: var(--e1); }
.aligne-bas { align-self: flex-end; }
.pleine-largeur { width: 100%; }
.titre-num { font-size: .68em; margin-right: .3em; vertical-align: .12em; }
.aide-champ { margin: 6px 0 0; font-size: var(--t-xs); color: var(--encre-3); }
.secret {
  display: block; margin: var(--e2) 0 4px;
  font-family: var(--mono); font-size: 13px; letter-spacing: .1em;
  color: var(--encre);
  background: var(--releve-2); border: 1px solid var(--filet);
  border-radius: var(--r-puce); padding: 7px 10px;
  overflow-wrap: anywhere;
}
.etapes li + li { margin-top: var(--e3); }
.etapes .tres-discret { display: block; overflow-wrap: anywhere; }
.registre-cellule .valeur.suivi {
  display: flex; flex-wrap: wrap; gap: var(--e1) var(--e3);
  font-family: var(--mono);
}
table.liste tfoot .total td {
  border-bottom: none; border-top: 1px solid var(--filet-fort);
  padding-top: var(--e3);
  font-weight: 600; color: var(--encre);
}
table.liste tfoot .total td:first-child {
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .15em; text-transform: uppercase; color: var(--encre-3);
  font-weight: 500;
}
table.liste tbody tr:hover td { background: var(--releve); }
table.liste tfoot tr:hover td { background: none; }

.muted { color: var(--encre-2); font-size: var(--t-sm); }
.tres-discret { color: var(--encre-3); font-size: var(--t-xs); }
.horodatage { font-family: var(--mono); font-size: 10px; color: var(--encre-3); white-space: nowrap; }
.citation {
  margin: var(--e3) 0 0; padding-left: var(--e3);
  border-left: 2px solid var(--filet-fort);
  color: var(--encre-2); font-size: var(--t-sm); white-space: pre-wrap;
}
.sans-marge { margin: 0; }

/* ---------- 17. Écran de connexion ------------------------------------------ */

body.auth { display: block; background: var(--canvas); }
body.auth .principale::before { height: 100dvh; }
.auth-cadre {
  position: relative; z-index: var(--z-contenu);
  max-width: 396px; margin: 0 auto;
  min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--e7) var(--e5);
}
.auth-marque { text-align: center; margin-bottom: var(--e2); }
.auth-marque .marque-nom { font-size: 40px; }
.auth-sous {
  text-align: center; margin: 0 0 var(--e6);
  color: var(--encre-2); font-size: var(--t-sm);
}
.auth-carte {
  background: var(--canvas);
  border: 1px solid var(--filet);
  border-radius: var(--r-contenant);
  padding: var(--e6);
  box-shadow: var(--ombre-3);
}
.auth-liens { text-align: center; margin-top: var(--e4); font-size: var(--t-sm); }
.auth-liens a { color: var(--encre-2); }
.auth-liens a:hover { color: var(--accent); }
.auth-pied {
  text-align: center; margin: var(--e5) 0 0;
  font-family: var(--mono); font-size: 9px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--encre-3);
}
body.auth .bandeau-alertes { max-width: 396px; margin: 0 auto var(--e4); padding: 0 var(--e5); }

/* ---------- 18. Motion ------------------------------------------------------- */

@keyframes entree {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}
@keyframes entree-msg {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}
@keyframes pouls {
  0%, 100% { opacity: .25; transform: scale(.8); }
  50%      { opacity: 1;   transform: scale(1); }
}

main > * { animation: entree 380ms var(--courbe) both; }
main > *:nth-child(1) { animation-delay: 0ms; }
main > *:nth-child(2) { animation-delay: 45ms; }
main > *:nth-child(3) { animation-delay: 90ms; }
main > *:nth-child(4) { animation-delay: 130ms; }
main > *:nth-child(n+5) { animation-delay: 165ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  main > * { animation: none; opacity: 1; transform: none; }
}

/* ---------- 19. Responsive --------------------------------------------------- */

@media (max-width: 1120px) {
  main { padding: var(--e6) var(--e5) var(--e8); }
  :root { --t-h1: 28px; --t-chiffre: 29px; }
}

@media (max-width: 880px) {
  body { flex-direction: column; }

  .laterale {
    width: 100%; height: auto;
    flex-direction: row; align-items: center; gap: var(--e1);
    padding: var(--e2) var(--e3);
    border-right: none; border-bottom: 1px solid var(--filet);
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* la barre grise sous la nav est parasite */
  }
  .laterale::-webkit-scrollbar { display: none; }
  .marque { padding: 0 var(--e3) 0 var(--e2); flex: none; }
  .marque-nom { font-size: 18px; }
  .marque-sous { display: none; }

  nav.menu { flex-direction: row; gap: 1px; }
  .menu-titre { display: none; }
  .item { padding: 8px 11px; white-space: nowrap; min-height: 40px; }
  .item[aria-current="page"]::before {
    left: var(--e3); right: var(--e3); top: auto; bottom: 3px;
    width: auto; height: 2px; border-radius: 2px;
  }

  .laterale-pied {
    margin: 0 0 0 auto; padding: 0; border: none;
    flex-direction: row; align-items: center; gap: var(--e1);
  }
  .compte-chip { display: none; }
  .pied-actions { flex-direction: row; }
  form.sortie button { padding: 8px 10px; white-space: nowrap; }

  main { padding: var(--e5) var(--e4) var(--e8); }
  .page-tete { align-items: flex-start; }
  .panneau, .aria { padding: var(--e4); }
  .aria { border-radius: var(--r-bloc); }

  .registre { grid-template-columns: 1fr 1fr; }
  .registre-cellule { padding: var(--e4) var(--e4) var(--e4) 0; border-bottom: 1px solid var(--filet); }
  .registre-cellule:nth-child(even) { padding-left: var(--e4); border-right: none; }
  .registre-cellule:nth-child(odd) { border-right: 1px solid var(--filet); }
  .registre-cellule:last-child { border-bottom: none; }

  .actions > form, .actions > .btn, .actions > button:not(.icone-btn) { width: 100%; }
  .actions > form button { width: 100%; }
  .msg { max-width: 92%; }
}

@media (max-width: 520px) {
  :root { --t-h1: 26px; --t-chiffre: 26px; }
  main { padding: var(--e4) var(--e3) var(--e7); }
  .registre { grid-template-columns: 1fr; }
  .registre-cellule,
  .registre-cellule:nth-child(even),
  .registre-cellule:nth-child(odd) {
    padding: var(--e3) 0; border-right: none; padding-left: 0;
  }
  .aria-composeur { flex-direction: column; align-items: stretch; }
  .aria-composeur button { width: 100%; }
}

/* ---------- 20. Impression --------------------------------------------------- */

@media print {
  .laterale, .page-actions, .actions, .filtres, .bandeau-alertes { display: none !important; }
  body { display: block; }
  main { max-width: none; padding: 0; }
  .principale::before { display: none; }
  .panneau, .aria { border: none; box-shadow: none; padding: 0; }
  table.liste { font-size: 10pt; }
}