/* ============================================================================
   PROVIEW — « REGISTRE » · LOT 1 : LA COQUILLE
   ----------------------------------------------------------------------------
   Chargé APRÈS app.css. Cette feuille ne renomme AUCUNE classe : elle se branche
   sur les sélecteurs que `buildSidebar()`, `index.html` et `renderAccueil()`
   produisent déjà. Conséquence : **aucune ligne de JavaScript n'est modifiée**,
   donc aucun risque fonctionnel — et le retour en arrière consiste à retirer une
   balise <link>.

   Périmètre du lot : barre latérale, en-tête, lanceur d'applications, fond de la
   zone de travail, typographie. Le CONTENU des pages (pages.js et ses 2 734
   styles en ligne) n'est pas touché : il garde son apparence actuelle. C'est
   volontaire — on juge la coquille seule avant d'engager le gros œuvre.

   Ambiance : ARDOISE (coquille encre froide, feuille claire), celle validée sur
   le prototype. La barre latérale RESTE sombre : c'est la moindre rupture pour
   les utilisateurs actuels, et le contraste ainsi économisé retourne aux données.
   ========================================================================== */

@import url('fonts-plex.css');

:root {
  /* ── Typographie ────────────────────────────────────────────────────────
     Une seule famille pour fr/en/es/ar : le passage en RTL ne change pas
     d'identité. Mono réservé aux RÉFÉRENCES et aux nombres — dans un ERP, un
     code se lit caractère par caractère et se compare en colonne. */
  --rg-sans: 'IBM Plex Sans', 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif;
  --rg-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;

  /* ── Coquille (chrome) ──────────────────────────────────────────────────
     La navigation n'est pas du contenu : elle a sa propre matière. */
  --ch-bg:     #15181b;
  --ch-bg-2:   #1f2429;
  --ch-fg:     rgba(255,255,255,.82);
  --ch-fg-dim: rgba(255,255,255,.62);   /* ≥ 4,5:1 sur --ch-bg — mesuré */
  --ch-fg-hi:  #ffffff;
  --ch-line:   rgba(255,255,255,.11);

  /* ── Neutres — rampe papier, très légère chaleur ────────────────────── */
  --rg-00: #ffffff;  --rg-01: #f5f6f6;  --rg-02: #eceeef;  --rg-03: #dfe2e3;
  --rg-04: #c2c7c9;  --rg-05: #8e9599;  --rg-06: #626a6e;  --rg-07: #363c3f;
  --rg-08: #171b1d;

  /* L'accent suit la couleur de la société (--primary est posée à chaud par
     applyTheme). Sur une instance sans couleur choisie, --primary vaut un gris
     terne : on garde alors le vert de marque plutôt qu'un accent invisible.
     Le vrai correctif est la valeur par défaut d'applyTheme — proposé au lot 2,
     il touche du JS et sort du périmètre de celui-ci. */
  --rg-accent: #1FAA59;

  --rg-r: 2px;        /* rayon des éléments cliquables. Les contenants : 0. */
  --rg-rail: 3px;     /* le filet d'état / de navigation active */
  --rg-mo: 110ms cubic-bezier(.2,0,.3,1);
}

/* ── Typographie de base ──────────────────────────────────────────────────
   On change la FAMILLE, pas la taille : toucher au corps déplacerait chaque
   tableau produit par pages.js, ce que ce lot s'interdit. */
body,
.sidebar, .app-header, .drawer, .bottom-nav,
.btn, .field input, .field select, .field textarea {
  font-family: var(--rg-sans);
}
body { -webkit-font-smoothing: antialiased; background: var(--rg-01); }
.page-content { background: var(--rg-01); }

/* Les chiffres s'alignent en colonne partout : sans chasse fixe, deux montants
   superposés ne se comparent pas d'un coup d'œil. */
.erp-table td.num, .erp-table th.num, .kpi-value, .row-amount,
.type-tab-count, .filter-pill-count, .sidebar-item .item-count {
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   BARRE LATÉRALE
   ========================================================================== */
.sidebar {
  background: var(--ch-bg);
  border-right: 1px solid var(--ch-line);
  box-shadow: none;              /* une colonne fixe ne flotte pas au-dessus */
}
.sidebar-logo {
  border-bottom: 1px solid var(--ch-line);
  padding: 12px 12px;
}
/* Le carré de marque est le seul aplat de couleur pleine de la coquille :
   il ancre l'identité à un endroit fixe sans colorer le reste. */
.logo-sm {
  border-radius: var(--rg-r);
  position: relative;
  overflow: visible;
}
.sidebar-app-title { font-size: 15px; font-weight: 600; letter-spacing: -.015em; color: var(--ch-fg-hi); }

/* Bloc marque + état du connecteur — DISPOSITION VALIDÉE, NE PLUS Y TOUCHER.
   J'avais proposé de réduire « ● Sage connecté » à une pastille posée sur le logo.
   L'utilisateur a tranché le 31/08/2026 : on garde le logo, le nom et la ligne
   d'état tels qu'ils sont. Et il a raison sur le fond — la pastille verte est
   déjà là, portée par l'émoji que pose `app.js` : l'état se voit ET se lit,
   ce qu'une pastille seule n'aurait pas fait.
   On se contente donc de remettre la ligne à sa place typographique. */
.sidebar-sage-status {
  font-size: 10px; font-weight: 600; letter-spacing: .06em;
  color: var(--ch-fg-dim); margin-top: 2px;
}

.sidebar-toggle { border-radius: var(--rg-r); background: none; color: var(--ch-fg-dim); }
.sidebar-toggle:hover { background: var(--ch-bg-2); color: var(--ch-fg-hi); }

.sidebar-nav::-webkit-scrollbar-thumb { background: var(--ch-line); border-radius: 0; }

/* Titre de section : micro-capitales interlettrées au-dessus d'un filet.
   C'est ce qui donne au menu son air de sommaire plutôt que de liste de liens. */
.sidebar-section-title {
  font-size: 10px; font-weight: 600; letter-spacing: .09em;
  color: var(--ch-fg-dim);
  padding: 14px 10px 5px; margin-top: 4px;
  border-top: 1px solid var(--ch-line);
}
.sidebar-nav > .sidebar-section-title:first-child { border-top: none; margin-top: 0; }

/* ── L'entrée de menu ────────────────────────────────────────────────────
   La pastille verte pleine disparaît au profit d'un FILET de 3 px à gauche.
   Raison : c'est le même geste graphique que le filet d'état des lignes de
   tableau (lot 2) — un seul vocabulaire à apprendre pour toute l'application.
   Et un aplat de couleur sur 40 px de haut, répété, sature le regard sans rien
   dire de plus qu'un trait. */
.sidebar-item {
  border-radius: 0;
  border-left: var(--rg-rail) solid transparent;
  padding: 8px 10px 8px 9px;
  font-size: 13px; font-weight: 400;
  color: var(--ch-fg);
  margin-bottom: 0;
  transition: background var(--rg-mo), color var(--rg-mo), border-color var(--rg-mo);
}
.sidebar-item svg { width: 17px; height: 17px; color: var(--ch-fg-dim); transition: color var(--rg-mo); }
.sidebar-item:hover { background: var(--ch-bg-2); color: var(--ch-fg-hi); border-left-color: rgba(255,255,255,.18); }
.sidebar-item:hover svg { color: var(--ch-fg); }
.sidebar-item.active {
  background: var(--ch-bg-2);
  color: var(--ch-fg-hi);
  font-weight: 600;
  border-left-color: var(--rg-accent);
}
.sidebar-item.active svg { color: var(--rg-accent); }

/* En mode réduit, le filet se centre : sinon il colle au bord de l'écran. */
.sidebar.collapsed .sidebar-item { border-left-width: 0; border-right: var(--rg-rail) solid transparent; }
.sidebar.collapsed .sidebar-item.active { border-right-color: var(--rg-accent); }
.sidebar.collapsed .sidebar-section-title { border-top-color: var(--ch-line); }

.sidebar-footer { border-top: 1px solid var(--ch-line); }
.sidebar-user { gap: 9px; }
/* L'avatar est CARRÉ : le rond d'initiales est le marqueur des réseaux sociaux.
   Ici l'utilisateur est une fiche, pas un profil. */
.user-avatar {
  border-radius: var(--rg-r);
  font-weight: 600; font-size: 11px;
  overflow: hidden;
}
.user-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.user-name { font-size: 12px; font-weight: 600; color: var(--ch-fg-hi); }
.user-role {
  font-size: 10px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ch-fg-dim);
}

/* ============================================================================
   EN-TÊTE
   Trois zones séparées par des filets : où je suis · ce que je cherche ·
   ce qui me réclame. 56 → 48 px : huit pixels rendus au contenu, sur chaque
   écran, toute la journée.
   ========================================================================== */
.app-header {
  height: 48px;
  padding: 0 16px;
  gap: 14px;
  background: var(--rg-00);
  border-bottom: 1px solid var(--rg-03);
  box-shadow: none;              /* l'ombre est réservée à ce qui FLOTTE */
}
.app-title { font-size: 15px; font-weight: 600; color: var(--rg-08); letter-spacing: -.01em; }

.header-search { max-width: 460px; }
.header-search-input {
  height: 30px;
  border-radius: var(--rg-r);
  border: 1px solid var(--rg-03);
  background: var(--rg-01);
  font-size: 13px;
  box-shadow: none;
  transition: border-color var(--rg-mo), background var(--rg-mo);
}
.header-search-input:hover { border-color: var(--rg-04); background: var(--rg-00); }
.header-search-input:focus {
  border-color: var(--rg-accent); background: var(--rg-00);
  box-shadow: inset 0 0 0 1px var(--rg-accent);
}
.header-search-icon { width: 15px; height: 15px; color: var(--rg-05); }

/* Boutons d'icône : carrés, sans cadre au repos. Le cadre permanent de six
   boutons alignés faisait une rangée de cases vides. */
.icon-btn {
  width: 30px; height: 30px;
  border: 1px solid transparent;
  border-radius: var(--rg-r);
  background: none;
  color: var(--rg-06);
  transition: background var(--rg-mo), color var(--rg-mo);
}
.icon-btn:hover { background: var(--rg-02); color: var(--rg-08); border-color: transparent; }
.icon-btn svg { width: 17px; height: 17px; }
/* La pastille d'alerte est un CARRÉ : plus lisible qu'un rond à 6 px, et ce
   n'est pas la notification d'un réseau social. */
.notif-dot { border-radius: 1px; }

/* Bouton d'action de l'en-tête : le seul plein de l'écran. */
.app-header .btn-primary {
  border-radius: var(--rg-r);
  min-height: 30px;
  font-weight: 600;
  background: var(--rg-accent); border-color: var(--rg-accent);
}

/* Sélecteur de société — c'est un choix de CONTEXTE, pas une décoration. */
.societe-switcher {
  border-radius: var(--rg-r);
  border: 1px solid var(--rg-03);
  height: 30px;
  background: var(--rg-00);
}
.societe-switcher:hover { border-color: var(--rg-04); background: var(--rg-02); }
.soc-dot { border-radius: 1px; }
.societe-dropdown {
  border-radius: 0;
  border: 1px solid var(--rg-04);
  box-shadow: 0 4px 16px rgba(20,20,18,.14), 0 0 0 1px rgba(20,20,18,.08);
}
.soc-drop-item { border-radius: 0; border-left: var(--rg-rail) solid transparent; }
.soc-drop-item.active { border-left-color: var(--rg-accent); background: var(--rg-01); }
.soc-name { font-weight: 600; }
.soc-code { font-family: var(--rg-mono); font-size: 10px; }

/* ============================================================================
   LANCEUR D'APPLICATIONS (écran Accueil)
   Des tuiles arrondies qui flottent et se soulèvent au survol = le marqueur
   SaaS le plus visible de l'écran d'entrée. On les remplace par une GRILLE
   RÉGLÉE : les modules forment un sommaire, pas une galerie d'icônes.
   ========================================================================== */
.app-launcher { max-width: 1040px; }
.apps-grid, .app-launcher > div:last-child {
  border-top: 1px solid var(--rg-03);
  border-left: 1px solid var(--rg-03);
  background: var(--rg-00);
  gap: 0 !important;
}
.app-tile {
  border: 0;
  border-right: 1px solid var(--rg-03);
  border-bottom: 1px solid var(--rg-03);
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: 18px 14px;
  transition: background var(--rg-mo);
}
.app-tile:hover { background: var(--rg-01); transform: none; }
.app-tile-ico {
  background: none;
  border-radius: 0;
  color: var(--rg-06);
  width: auto; height: auto;
  box-shadow: none;
}
.app-tile:hover .app-tile-ico { color: var(--rg-accent); }
.app-tile-ico svg { width: 22px; height: 22px; }
.app-tile-name {
  font-size: 13px; font-weight: 500; color: var(--rg-08);
  margin-top: 10px;
}

/* ============================================================================
   RTL — le filet de navigation change de côté avec la lecture
   ========================================================================== */
[dir="rtl"] .sidebar-item { border-left: 0; border-right: var(--rg-rail) solid transparent; }
[dir="rtl"] .sidebar-item:hover { border-right-color: rgba(255,255,255,.18); }
[dir="rtl"] .sidebar-item.active { border-right-color: var(--rg-accent); }
[dir="rtl"] .soc-drop-item { border-left: 0; border-right: var(--rg-rail) solid transparent; }
[dir="rtl"] .soc-drop-item.active { border-right-color: var(--rg-accent); }

/* ============================================================================
   TACTILE — la densité est un choix de poste de travail, pas une valeur
   ========================================================================== */
@media (max-width: 768px) {
  .app-header { height: 52px; padding: 0 12px; }
  .icon-btn { width: 34px; height: 34px; }
  .sidebar-item { padding: 11px 10px 11px 9px; }
  .drawer { border-radius: 0; }
  .bottom-nav { border-top: 1px solid var(--rg-03); box-shadow: none; }
}