/* ============================================================================
   NEUS LOGPRO — CHARTE GRAPHIQUE  (style.css)
   Système de design unifié pour le FRONT (site public) et le BACK (back-office).
   Tout passe par des variables CSS (tokens) + des composants préfixés .nl-*.
   Police : Figtree (UI/titres) + IBM Plex Mono (labels, codes, références).
   ----------------------------------------------------------------------------
   Sommaire
     1. Polices
     2. Tokens (:root)
     3. Reset & base
     4. Typographie
     5. Boutons
     6. Formulaires
     7. Badges · Tags · Chips · Étoiles
     8. Cartes
     9. Tableaux
    10. Navigation (sidebar · onglets · fil d’Ariane)
    11. Avatars & divers
    12. Layout & utilitaires
    13. Contexte sombre (.nl-dark)
   ========================================================================== */

/* 1. POLICES ------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800;900&family=IBM+Plex+Mono:wght@500;600;700&display=swap');

/* 2. TOKENS -------------------------------------------------------------- */
:root {
  /* — Bleu de marque (échelle issue du logo) — */
  --blue-50:  #eef4fe;
  --blue-100: #dbe7fd;
  --blue-200: #bcd3fb;
  --blue-300: #8fb6f7;
  --blue-400: #5a8cef;
  --blue-500: #2f6bdf;   /* couleur primaire */
  --blue-600: #2659c0;
  --blue-700: #1f4fae;
  --blue-800: #1a3f88;
  --blue-900: #16315f;

  /* — Neutres (gris légèrement froids) — */
  --ink:      #1c2230;   /* texte le plus fort */
  --gray-900: #1f2430;
  --gray-800: #2a3142;
  --gray-700: #3a4150;
  --gray-600: #5b6273;
  --gray-500: #737a8a;
  --gray-400: #a6acba;
  --gray-300: #cdd2db;
  --gray-200: #e9ebf0;
  --gray-100: #f1f3f7;
  --gray-50:  #f7f8fb;
  --white:    #ffffff;

  /* — Couleurs d’état — */
  --success:    #1c8a5a;  --success-bg: #e6f6ee;
  --warning:    #b07d12;  --warning-bg: #fdf2dc;
  --danger:     #cc4433;  --danger-bg:  #fde7e4;
  --info:       #2f6bdf;  --info-bg:    #e8f0fe;

  /* — Rôles sémantiques — */
  --primary:        var(--blue-500);
  --primary-hover:  var(--blue-600);
  --primary-active: var(--blue-700);
  --primary-weak:   var(--blue-50);
  --primary-on:     #ffffff;

  --bg:            var(--gray-50);    /* fond d’application */
  --surface:       var(--white);      /* cartes, panneaux */
  --surface-2:     #fafbfc;           /* en-têtes de table, zones secondaires */
  --border:        var(--gray-200);
  --border-strong: #dfe2e8;
  --overlay:       rgba(15, 19, 32, .55);

  --text:        var(--gray-900);
  --text-soft:   var(--gray-700);
  --text-muted:  var(--gray-500);
  --text-faint:  var(--gray-400);
  --link:        var(--primary);

  --dark:        #0f1320;             /* sidebars/footers sombres éventuels */
  --dark-2:      #1a2030;

  /* — Typographie — */
  --font-sans: 'Figtree', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-xs:    0.75rem;    /* 12 */
  --text-sm:    0.8125rem;  /* 13 */
  --text-base:  0.9375rem;  /* 15 — base UI */
  --text-md:    1rem;       /* 16 */
  --text-lg:    1.125rem;   /* 18 */
  --text-xl:    1.3125rem;  /* 21 */
  --text-2xl:   1.6875rem;  /* 27 */
  --text-3xl:   2.25rem;    /* 36 */
  --text-display: 3rem;     /* 48 */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-extra:   800;

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-base:  1.55;

  /* — Espacements (base 4) — */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px;

  /* — Rayons — */
  --radius-sm:  6px;
  --radius-md:  9px;
  --radius-lg:  12px;
  --radius-card:14px;
  --radius-xl:  16px;
  --radius-pill: 999px;

  /* — Ombres — */
  --shadow-xs: 0 1px 2px rgba(20,25,40,.04);
  --shadow-sm: 0 1px 3px rgba(20,25,40,.06);
  --shadow-md: 0 4px 14px rgba(20,25,40,.07);
  --shadow-lg: 0 18px 60px rgba(20,25,40,.10);
  --shadow-primary: 0 2px 8px rgba(47,107,223,.30);
  --ring: 0 0 0 3px rgba(47,107,223,.22);

  /* — Mouvement — */
  --t-fast: .12s ease;
  --t-base: .18s ease;

  /* — Layout — */
  --sidebar-w: 236px;
  --content-max: 1320px;
  --container: 1180px;
}

/* 3. RESET & BASE -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }
hr { border: none; border-top: 1px solid var(--border); margin: var(--space-6) 0; }
::selection { background: var(--blue-200); }

/* 4. TYPOGRAPHIE --------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--fw-extra); line-height: var(--lh-tight); letter-spacing: -.02em; color: var(--text); }

.nl-display { font-size: var(--text-display); font-weight: 900; letter-spacing: -.03em; line-height: 1.05; }
.nl-h1 { font-size: var(--text-3xl); }
.nl-h2 { font-size: var(--text-2xl); }
.nl-h3 { font-size: var(--text-xl); }
.nl-h4 { font-size: var(--text-lg); font-weight: var(--fw-bold); }
.nl-lead { font-size: var(--text-lg); color: var(--text-soft); line-height: var(--lh-snug); font-weight: var(--fw-medium); }

.nl-body  { font-size: var(--text-base); color: var(--text-soft); }
.nl-small { font-size: var(--text-sm); }
.nl-muted { color: var(--text-muted); }
.nl-faint { color: var(--text-faint); }
.nl-mono  { font-family: var(--font-mono); }

/* sur-titre / label de section */
.nl-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: var(--fw-bold);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-faint);
}

/* lien “Ouvrir →” */
.nl-link-arrow { font-weight: var(--fw-semibold); color: var(--primary); }

/* 5. BOUTONS ------------------------------------------------------------- */
.nl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--fw-bold);
  line-height: 1; white-space: nowrap; cursor: pointer;
  padding: 11px 18px; border-radius: var(--radius-md);
  border: 1px solid transparent; background: transparent; color: var(--text);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.nl-btn:disabled { opacity: .5; cursor: not-allowed; }

.nl-btn--primary { background: var(--primary); color: var(--primary-on); box-shadow: 0 1px 2px rgba(47,107,223,.3); }
.nl-btn--primary:hover { background: var(--primary-hover); }
.nl-btn--primary:active { background: var(--primary-active); }

.nl-btn--secondary { background: var(--surface); color: var(--text-soft); border-color: var(--border-strong); }
.nl-btn--secondary:hover { background: var(--surface-2); border-color: var(--gray-300); color: var(--text); }

.nl-btn--ghost { background: transparent; color: var(--text-soft); }
.nl-btn--ghost:hover { background: var(--gray-100); color: var(--text); }

.nl-btn--danger { background: var(--danger); color: #fff; }
.nl-btn--danger:hover { filter: brightness(.95); }

.nl-btn--sm { padding: 8px 13px; font-size: var(--text-sm); border-radius: var(--radius-sm); }
.nl-btn--lg { padding: 14px 24px; font-size: var(--text-md); }

.nl-btn-icon {
  display: inline-grid; place-items: center; width: 38px; height: 38px;
  border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface);
  color: var(--text-soft); cursor: pointer; transition: background var(--t-fast), color var(--t-fast);
}
.nl-btn-icon:hover { background: var(--gray-100); color: var(--text); }

/* 6. FORMULAIRES --------------------------------------------------------- */
.nl-field { display: flex; flex-direction: column; gap: var(--space-2); }
.nl-label { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-soft); }
.nl-input, .nl-select, .nl-textarea {
  width: 100%; font-family: var(--font-sans); font-size: var(--text-base); color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  padding: 10px 13px; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.nl-input::placeholder, .nl-textarea::placeholder { color: var(--text-faint); }
.nl-input:focus, .nl-select:focus, .nl-textarea:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
.nl-textarea { min-height: 96px; resize: vertical; line-height: var(--lh-base); }
.nl-hint { font-size: var(--text-xs); color: var(--text-muted); }

/* champ de recherche compact */
.nl-search {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--gray-100); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 8px 12px; color: var(--text-faint);
}
.nl-search input { border: none; background: none; outline: none; font: inherit; font-size: var(--text-sm); color: var(--text); width: 100%; }

/* interrupteur */
.nl-switch { position: relative; display: inline-block; width: 40px; height: 23px; flex-shrink: 0; }
.nl-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.nl-switch span { position: absolute; inset: 0; background: var(--gray-300); border-radius: var(--radius-pill); transition: background var(--t-fast); }
.nl-switch span::after { content: ""; position: absolute; top: 2.5px; left: 2.5px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform var(--t-base); }
.nl-switch input:checked + span { background: var(--primary); }
.nl-switch input:checked + span::after { transform: translateX(17px); }

/* 7. BADGES · TAGS · CHIPS · ÉTOILES ------------------------------------- */
.nl-badge { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-xs); font-weight: var(--fw-bold); padding: 3px 10px; border-radius: var(--radius-pill); white-space: nowrap; background: var(--gray-100); color: var(--gray-600); }
.nl-badge--success { background: var(--success-bg); color: var(--success); }
.nl-badge--warning { background: var(--warning-bg); color: var(--warning); }
.nl-badge--danger  { background: var(--danger-bg);  color: var(--danger); }
.nl-badge--info    { background: var(--info-bg);    color: var(--info); }
.nl-badge--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* référence / valeur technique */
.nl-tag { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--fw-semibold); background: var(--gray-100); color: var(--gray-600); padding: 3px 8px; border-radius: var(--radius-sm); white-space: nowrap; }

/* puce de sélection (modules / suggestions) */
.nl-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 9px 16px; font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--text-soft);
  box-shadow: var(--shadow-xs); cursor: pointer; transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.nl-chip:hover { border-color: var(--gray-300); color: var(--text); }
.nl-chip.is-active, .nl-chip--active { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: var(--shadow-primary); }
.nl-chip .nl-chip-meta { font-size: var(--text-xs); color: var(--text-faint); font-weight: var(--fw-medium); }

/* notation */
.nl-stars { color: #f5a623; letter-spacing: 1px; font-size: 14px; }
.nl-stars .off { color: var(--gray-200); }

/* 8. CARTES -------------------------------------------------------------- */
.nl-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); }
.nl-card--flat { box-shadow: none; }
.nl-card--accent { border-left: 3px solid var(--primary); }
.nl-card--success { border-left: 3px solid var(--success); }
.nl-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 18px 20px; border-bottom: 1px solid var(--gray-100); }
.nl-card-head h3 { font-size: var(--text-md); font-weight: var(--fw-bold); }
.nl-card-body { padding: 20px; }
.nl-count { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--fw-bold); background: var(--gray-100); color: var(--gray-600); padding: 2px 9px; border-radius: var(--radius-pill); }

/* 9. TABLEAUX ------------------------------------------------------------ */
.nl-table { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
.nl-table th {
  text-align: left; font-family: var(--font-mono); font-size: 10.5px; font-weight: var(--fw-bold);
  letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint);
  padding: 12px 20px; background: var(--surface-2); border-bottom: 1px solid var(--gray-100); white-space: nowrap;
}
.nl-table td { padding: 14px 20px; border-bottom: 1px solid #f3f4f7; color: var(--text-soft); vertical-align: middle; }
.nl-table tbody tr:last-child td { border-bottom: none; }
.nl-table tbody tr:hover { background: #fafbfd; }
.nl-table .nl-td-strong { font-weight: var(--fw-bold); color: var(--text); }
.nl-num { font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); }

/* 10. NAVIGATION --------------------------------------------------------- */
/* sidebar */
.nl-sidebar { width: var(--sidebar-w); background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 18px 16px; }
.nl-nav { display: flex; flex-direction: column; gap: 1px; }
.nl-nav-item { display: flex; align-items: center; gap: var(--space-3); padding: 9px 12px; border-radius: var(--radius-md); font-size: var(--text-base); font-weight: var(--fw-medium); color: var(--text-soft); cursor: pointer; }
.nl-nav-item:hover { background: var(--gray-100); text-decoration: none; }
.nl-nav-item.is-active { background: var(--primary-weak); color: var(--primary); font-weight: var(--fw-semibold); }

/* onglets primaires (modules) — voir aussi .nl-chip */
.nl-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* onglets secondaires (sections) */
.nl-subtabs { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; }
.nl-subtab { padding: 8px 15px; border: none; background: transparent; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-muted); cursor: pointer; }
.nl-subtab:hover { background: var(--gray-100); color: var(--text); }
.nl-subtab.is-active { background: var(--primary-weak); color: var(--primary); }
.nl-subtab--add { color: var(--text-faint); border: 1px dashed var(--border-strong); }
.nl-subtab--add:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-weak); }

/* fil d’Ariane */
.nl-crumb { font-size: var(--text-sm); color: var(--text-muted); }
.nl-crumb .sep { margin: 0 7px; color: var(--gray-300); }
.nl-crumb b { color: var(--primary); font-weight: var(--fw-bold); }

/* 11. AVATARS & DIVERS --------------------------------------------------- */
.nl-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--blue-100); color: var(--blue-700); font-size: var(--text-sm); font-weight: var(--fw-bold); flex-shrink: 0; }
.nl-avatar--square { border-radius: var(--radius-md); }
.nl-divider { height: 1px; background: var(--border); }

/* tuile de marque / icône arrondie */
.nl-logo-tile { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--blue-400), var(--blue-700)); color: #fff; }

/* 12. LAYOUT & UTILITAIRES ---------------------------------------------- */
.nl-app { display: flex; min-height: 100vh; background: var(--bg); }
.nl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 30px 38px 44px; max-width: var(--content-max); }
.nl-container { max-width: var(--container); margin-inline: auto; padding-inline: var(--space-6); }
.nl-section { padding-block: var(--space-16); }

.nl-row { display: flex; align-items: center; gap: var(--space-3); }
.nl-row--between { justify-content: space-between; }
.nl-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.nl-grid { display: grid; gap: var(--space-4); }
.nl-grid--2 { grid-template-columns: repeat(2, 1fr); }
.nl-grid--3 { grid-template-columns: repeat(3, 1fr); }
.nl-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .nl-grid--3, .nl-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .nl-grid--2, .nl-grid--3, .nl-grid--4 { grid-template-columns: 1fr; } }

.nl-gap-2 { gap: var(--space-2); } .nl-gap-4 { gap: var(--space-4); } .nl-gap-6 { gap: var(--space-6); }
.nl-mt-2 { margin-top: var(--space-2); } .nl-mt-4 { margin-top: var(--space-4); } .nl-mt-6 { margin-top: var(--space-6); } .nl-mt-8 { margin-top: var(--space-8); }
.nl-text-center { text-align: center; }
.nl-flex-1 { flex: 1; }
.nl-wrap { flex-wrap: wrap; }

/* 13. CONTEXTE SOMBRE ---------------------------------------------------- */
/* à poser sur tout conteneur foncé (sidebar/footer sombre, panneau) */
.nl-dark { background: var(--dark); color: rgba(255,255,255,.78); }
.nl-dark a { color: #fff; }
.nl-dark .nl-nav-item { color: rgba(255,255,255,.66); }
.nl-dark .nl-nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.nl-dark .nl-nav-item.is-active { background: var(--primary); color: #fff; }
.nl-dark .nl-eyebrow { color: rgba(255,255,255,.45); }
.nl-dark .nl-divider { background: rgba(255,255,255,.1); }
.nl-dark h1, .nl-dark h2, .nl-dark h3 { color: #fff; }