/* ------------------------------------------------------------------
   Syndixa — jetons de l'identité visuelle
   Source de vérité : syndixa-DA/. Ne pas modifier dans une appli :
   corriger ici, puis répercuter dans chaque projet.
   ------------------------------------------------------------------ */

:root {
  /* Action ------------------------------------------------------- */
  --syx-action:         #5B45C7;  /* boutons primaires, liens, courbe du logo */
  --syx-action-hover:   #4A369F;
  --syx-action-active:  #3B2A78;  /* aussi : texte violet en petite taille */
  --syx-tint:           #EEEAFB;  /* survol de ligne, ligne sélectionnée */
  --syx-tint-border:    #D8CFF5;
  --syx-violet-marque:  #5D3FD3;  /* violet d'origine — réservé au statut « en procédure » */

  /* Texte -------------------------------------------------------- */
  --syx-ink:            #1A1A1F;  /* titres, données */
  --syx-ink-2:          #43414C;  /* texte courant */
  --syx-muted:          #6A6770;  /* libellés, métadonnées */

  /* Surfaces ----------------------------------------------------- */
  --syx-bg:             #F5F4F1;  /* fond d'application */
  --syx-surface:        #FFFFFF;  /* cartes, tableaux, panneaux */
  --syx-border:         #DEDCE3;  /* bordure d'interface, 1px */
  --syx-border-soft:    #EDECE8;  /* séparateur de lignes */
  --syx-rule:           #201E1D;  /* filet de marque, 2px */

  /* Statuts ------------------------------------------------------ */
  --syx-st-neutre-fg:   #3F3B4A; --syx-st-neutre-bg:   #E9E7E2; --syx-st-neutre-bd:   #CCC9C2;
  --syx-st-relance-fg:  #4127C4; --syx-st-relance-bg:  #EBE3FF; --syx-st-relance-bd:  #C4B0FF;
  --syx-st-demeure-fg:  #B0350B; --syx-st-demeure-bg:  #FFE7D8; --syx-st-demeure-bd:  #FFBE97;
  --syx-st-solde-fg:    #10763F; --syx-st-solde-bg:    #DDF7E6; --syx-st-solde-bd:    #9FE3B8;

  /* Typographie -------------------------------------------------- */
  --syx-font-titre: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --syx-font-ui:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  /* Trame -------------------------------------------------------- */
  --syx-space-1: 4px;  --syx-space-2: 8px;  --syx-space-3: 12px;
  --syx-space-4: 16px; --syx-space-5: 20px; --syx-space-6: 28px; --syx-space-7: 40px;
  --syx-control-h: 40px;
  --syx-radius: 0;
}

/* Base ----------------------------------------------------------- */
body {
  margin: 0;
  background: var(--syx-bg);
  color: var(--syx-ink);
  font-family: var(--syx-font-ui);
  font-size: 14px;
  line-height: 1.55;
}
h1, h2, h3, .syx-num {
  font-family: var(--syx-font-titre);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
}
h1 { font-size: 30px; } h2 { font-size: 22px; } h3 { font-size: 17px; }
.syx-num { font-weight: 700; font-variant-numeric: tabular-nums; }
a { color: var(--syx-action-active); text-decoration: none; border-bottom: 1px solid currentColor; }
a:hover { color: var(--syx-action); }
:focus-visible { outline: 2px solid var(--syx-action); outline-offset: 2px; }
::selection { background: var(--syx-tint); color: var(--syx-ink); }
.syx-label {
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--syx-muted);
}

/* Boutons -------------------------------------------------------- */
.syx-btn {
  font-family: var(--syx-font-ui); font-weight: 500; font-size: 14px;
  height: var(--syx-control-h); padding: 0 18px;
  border-radius: var(--syx-radius); border: 1px solid transparent;
  text-align: left; cursor: pointer;
}
.syx-btn:disabled { opacity: 0.45; cursor: default; }
.syx-btn-primaire { background: var(--syx-action); border-color: var(--syx-action); color: #FFF; }
.syx-btn-primaire:hover:not(:disabled) { background: var(--syx-action-hover); border-color: var(--syx-action-hover); }
.syx-btn-primaire:active:not(:disabled) { background: var(--syx-action-active); border-color: var(--syx-action-active); }
.syx-btn-secondaire { background: var(--syx-surface); border-color: var(--syx-action); color: var(--syx-action-active); }
.syx-btn-secondaire:hover:not(:disabled) { background: var(--syx-tint); }
.syx-btn-secondaire:active:not(:disabled) { background: var(--syx-tint-border); }
.syx-btn-discret { background: transparent; color: var(--syx-ink-2); }
.syx-btn-discret:hover:not(:disabled) { background: #F0EFEC; color: var(--syx-ink); }

/* Champs --------------------------------------------------------- */
.syx-champ { display: flex; flex-direction: column; gap: 6px; }
.syx-input {
  font-family: var(--syx-font-ui); font-size: 14px; color: var(--syx-ink);
  height: var(--syx-control-h); padding: 0 12px; box-sizing: border-box;
  background: var(--syx-surface); border: 1px solid var(--syx-border); border-radius: var(--syx-radius);
}
.syx-input:focus { border-color: var(--syx-action); outline: 2px solid var(--syx-action); outline-offset: 1px; }
.syx-input::placeholder { color: var(--syx-muted); }

/* Statuts — le libellé porte l'information, jamais la couleur seule */
.syx-statut {
  display: inline-block; font-weight: 500; font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 9px;
  border: 1px solid transparent; border-radius: var(--syx-radius);
}
.syx-statut-neutre  { color: var(--syx-st-neutre-fg);  background: var(--syx-st-neutre-bg);  border-color: var(--syx-st-neutre-bd); }
.syx-statut-relance { color: var(--syx-st-relance-fg); background: var(--syx-st-relance-bg); border-color: var(--syx-st-relance-bd); }
.syx-statut-demeure { color: var(--syx-st-demeure-fg); background: var(--syx-st-demeure-bg); border-color: var(--syx-st-demeure-bd); }
.syx-statut-solde   { color: var(--syx-st-solde-fg);   background: var(--syx-st-solde-bg);   border-color: var(--syx-st-solde-bd); }
.syx-statut-procedure { color: #FFF; background: var(--syx-violet-marque); }

/* Surfaces et tableaux ------------------------------------------- */
.syx-carte { background: var(--syx-surface); border: 1px solid var(--syx-border); border-radius: var(--syx-radius); }
.syx-table { width: 100%; border-collapse: collapse; background: var(--syx-surface); }
.syx-table th {
  font-weight: 500; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--syx-muted); text-align: left; background: var(--syx-bg);
  padding: 10px 20px; border-bottom: 1px solid var(--syx-border);
}
.syx-table td { padding: 14px 20px; border-bottom: 1px solid var(--syx-border-soft); vertical-align: middle; }
.syx-table tr:hover td { background: var(--syx-tint); }
.syx-table .syx-montant { font-family: var(--syx-font-titre); font-weight: 500; font-size: 15px; text-align: right; font-variant-numeric: tabular-nums; }
.syx-table .syx-ref { font-family: var(--syx-font-titre); font-weight: 500; color: var(--syx-action-active); }
.syx-filet { height: 2px; background: var(--syx-rule); border: 0; margin: 0; }

/* En-tête d'application ------------------------------------------ */
.syx-entete {
  display: flex; align-items: center; gap: var(--syx-space-4);
  padding: 14px 20px; background: var(--syx-surface); border-bottom: 1px solid var(--syx-border);
}
.syx-marque { font-family: var(--syx-font-titre); font-weight: 500; font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; }
.syx-onglet { color: var(--syx-muted); }
.syx-onglet-actif { color: var(--syx-ink); font-weight: 500; border-bottom: 2px solid var(--syx-action); padding-bottom: 2px; }