@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ============================================================
   Portal Fiduciaire — design system aligné sur ZCA-Compta
   (Apple 2026, épuré). Polices Cormorant Garamond / Inter / JetBrains Mono.

   MARQUE BLANCHE CONSERVÉE : --brand-primary / --brand-secondary restent
   les variables d'override par partenaire (injectées par partials/header.php).
   Par défaut, elles valent l'identité ZCA (encre / bronze).
   ============================================================ */

:root {
  /* Aligné sur ZCA-Compta : neutres adoucis + accent ocre→TAUPE + tokens RGB pour le sombre. */
  --encre-rgb:27,38,59; --encre:rgb(var(--encre-rgb));
  --bronze-rgb:148,137,122; --bronze:rgb(var(--bronze-rgb)); --bronze-fonce:#5f574b;
  --valide-rgb:63,125,94; --valide:rgb(var(--valide-rgb)); --valide-fonce:#2f5e47;
  --ambre-rgb:181,121,31; --ambre:rgb(var(--ambre-rgb)); --ambre-fonce:#7d5f1f;
  --ia-rgb:122,94,168; --ia:rgb(var(--ia-rgb)); --ia-fonce:#5b4488;
  --rouge-rgb:165,64,47; --rouge:rgb(var(--rouge-rgb)); --rouge-fonce:#a5402f;
  --bleu:#3E6CA6;
  --fond:#F2F1EE; --surface:#FCFCFC;
  --hairline:rgba(var(--encre-rgb),.06);
  --texte:rgba(var(--encre-rgb),.80);
  --ombre:0 1px 2px rgba(var(--encre-rgb),.025), 0 6px 18px rgba(var(--encre-rgb),.04);
  --radius:16px; --radius-sm:12px;

  /* Marque blanche (overridable par partenaire) — FIXE, indépendante du thème. */
  --brand-primary:#1B263B;
  --brand-secondary:#94897A;

  --primary:var(--brand-primary);
  --secondary:var(--brand-secondary);
  --background:var(--fond);
  --card:var(--surface);
  --text:var(--texte);
  --muted:rgba(var(--encre-rgb),.55);
  --border:var(--hairline);
}
/* ===== Mode sombre — auto (système) + bascule [data-theme] ===== */
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --encre-rgb:226,229,236; --fond:#14171D; --surface:#1C212A;
    --hairline:rgba(var(--encre-rgb),.11); --texte:rgba(var(--encre-rgb),.82);
    --ombre:0 1px 2px rgba(0,0,0,.28),0 8px 24px rgba(0,0,0,.34);
    --bronze-rgb:179,167,149; --bronze-fonce:#cabfad;
    --valide-rgb:95,160,129; --valide-fonce:#9fcfb6; --ambre-rgb:214,160,63; --ambre-fonce:#e6c590;
    --ia-rgb:164,136,207; --ia-fonce:#cdbce9; --rouge-rgb:209,107,90; --rouge-fonce:#e6a99c; --bleu:#5E92CD;
  }
}
[data-theme=dark]{
  --encre-rgb:226,229,236; --fond:#14171D; --surface:#1C212A;
  --hairline:rgba(var(--encre-rgb),.11); --texte:rgba(var(--encre-rgb),.82);
  --ombre:0 1px 2px rgba(0,0,0,.28),0 8px 24px rgba(0,0,0,.34);
  --bronze-rgb:179,167,149; --bronze-fonce:#cabfad;
  --valide-rgb:95,160,129; --valide-fonce:#9fcfb6; --ambre-rgb:214,160,63; --ambre-fonce:#e6c590;
  --ia-rgb:164,136,207; --ia-fonce:#cdbce9; --rouge-rgb:209,107,90; --rouge-fonce:#e6a99c; --bleu:#5E92CD;
}
:root{color-scheme:light dark;}

* { box-sizing:border-box; }

body {
  margin:0;
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color:var(--texte);
  background:var(--fond);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

a { color:inherit; }
.mono { font-family:'JetBrains Mono', ui-monospace, monospace; }

/* =================== Layout =================== */
.app-layout { display:flex; min-height:100vh; }

/* ---- Sidebar : BLANCHE par défaut (ZCA), VARIANTE colorée par partenaire ---- */
.sidebar {
  width:248px; flex:0 0 248px;
  background:var(--surface); color:var(--encre);
  border-right:1px solid var(--hairline);
  padding:18px 14px;
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}

.sidebar-logo {
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:23px; font-weight:600; letter-spacing:.2px;
  margin-bottom:14px; padding:4px 8px;
}
.sidebar-logo img { max-width:100%; height:auto; display:block; }

/* Bloc contexte (utilisateur) */
.sidebar-user {
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border:1px solid var(--hairline); border-radius:12px;
  margin-bottom:10px; font-size:13px; line-height:1.35;
}
.sidebar-user .av {
  width:30px; height:30px; flex:0 0 auto; border-radius:8px;
  background:var(--brand-primary); color:#fff;
  display:grid; place-items:center; font-size:11px; font-weight:600;
}
.sidebar-user strong { display:block; font-size:13px; font-weight:600; color:var(--encre); }
.sidebar-user small { color:rgba(var(--encre-rgb),.5); font-size:12px; }

/* Groupes & items de navigation */
.sb-group { margin-top:10px; }
.sb-group .lbl {
  font-size:10px; text-transform:uppercase; letter-spacing:.6px;
  color:rgba(var(--encre-rgb),.4); padding:0 8px 5px; font-weight:600;
}
.sidebar nav { display:flex; flex-direction:column; gap:1px; }
.sidebar nav a {
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:9px;
  font-size:14px; font-weight:500; text-decoration:none;
  color:rgba(var(--encre-rgb),.72);
  transition:background .15s ease, color .15s ease;
}
.sidebar nav a:hover { background:var(--fond); color:var(--encre); }
.sidebar nav a.active { background:rgba(var(--bronze-rgb),.13); color:var(--encre); font-weight:600; }

.sb-foot {
  margin-top:auto; padding-top:14px; border-top:1px solid var(--hairline);
  display:flex; align-items:center; gap:10px; font-size:13px; color:rgba(var(--encre-rgb),.65);
}

/* ---- Variante COLORÉE (sidebar peinte avec la couleur primaire du partenaire) ---- */
.sidebar.is-colored {
  background:var(--brand-primary); color:#fff; border-right-color:transparent;
}
.sidebar.is-colored .sidebar-logo,
.sidebar.is-colored .sidebar-user strong { color:#fff; }
.sidebar.is-colored .sidebar-user { border-color:rgba(255,255,255,.18); }
.sidebar.is-colored .sidebar-user small { color:rgba(255,255,255,.65); }
.sidebar.is-colored .sidebar-user .av { background:#fff; color:var(--brand-primary); }
.sidebar.is-colored .sb-group .lbl { color:rgba(255,255,255,.5); }
.sidebar.is-colored nav a { color:rgba(255,255,255,.82); }
.sidebar.is-colored nav a:hover { background:rgba(255,255,255,.10); color:#fff; }
.sidebar.is-colored nav a.active { background:rgba(255,255,255,.16); color:#fff; }
.sidebar.is-colored .sb-foot { border-top-color:rgba(255,255,255,.16); color:rgba(255,255,255,.7); }

/* Pastille de menu (notifications) */
.menu-notif-dot {
  margin-left:auto; min-width:18px; height:18px; padding:0 5px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; background:#c0392b; color:#fff; font-size:11px; font-weight:700; line-height:1;
}
.menu-ok-dot { margin-left:auto; width:8px; height:8px; border-radius:999px; background:var(--valide); }

.content {
  flex:1; min-width:0; max-width:1180px; margin:0 auto;
  padding:34px 40px 64px;
}

/* =================== En-têtes =================== */
.page-header { margin-bottom:26px; }

.eyebrow {
  margin:0 0 8px;
  color:var(--brand-secondary);
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.5px;
}

h1 {
  margin:0 0 10px;
  color:var(--encre);
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:32px; font-weight:600; letter-spacing:.2px; line-height:1.12;
}

h2 { font-size:18px; font-weight:600; color:var(--encre); margin:0 0 14px; }
h3 { font-weight:600; }

.muted { color:rgba(var(--encre-rgb),.55); }

/* =================== Cartes / KPI =================== */
.cards {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:16px; margin-top:24px;
}
.card {
  background:var(--surface); border:1px solid var(--hairline);
  border-radius:var(--radius); padding:20px; box-shadow:var(--ombre);
}
.card h3 {
  margin:0 0 10px; font-size:11px; text-transform:uppercase;
  letter-spacing:.5px; color:rgba(var(--encre-rgb),.45); font-weight:600;
}
.card span {
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:30px; font-weight:500; color:var(--encre); letter-spacing:-.5px;
}

/* =================== Panels =================== */
.panel {
  margin-top:20px; background:var(--surface);
  border:1px solid var(--hairline); border-radius:var(--radius);
  padding:22px 24px; box-shadow:var(--ombre);
}
.panel h2 { margin:0 0 16px; color:var(--encre); }

/* =================== Tables =================== */
table { width:100%; border-collapse:collapse; font-size:14px; }
th, td { padding:13px 14px; border-bottom:1px solid var(--hairline); text-align:left; }
th {
  color:rgba(var(--encre-rgb),.5); font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:.4px;
}
tbody tr:last-child td { border-bottom:none; }

/* =================== Badges =================== */
.badge {
  display:inline-block; padding:4px 10px; border-radius:999px;
  font-size:11px; font-weight:600; letter-spacing:.3px; text-transform:uppercase;
}
.badge.success { background:rgba(var(--valide-rgb),.12); color:var(--valide-fonce); }
.badge.warning { background:rgba(var(--ambre-rgb),.12); color:var(--ambre-fonce); }

/* =================== Boutons =================== */
/* Par défaut : marque primaire (encre par défaut, ou couleur partenaire). */
button, .btn, input[type="submit"], .content button {
  font-family:'Inter', sans-serif; font-size:14px; font-weight:600; cursor:pointer;
  border:1px solid transparent; border-radius:10px; padding:9px 16px;
  background:var(--brand-primary); color:#fff;
  transition:filter .15s ease, transform .12s ease;
}
button:hover, .btn:hover, input[type="submit"]:hover, .content button:hover {
  filter:brightness(1.08); transform:translateY(-1px);
}
.btn { display:inline-block; text-decoration:none; }

/* =================== Login & pages d'auth =================== */
.login-page {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--fond);
}
.login-wrapper { width:100%; padding:24px; }
.login-card {
  width:100%; max-width:420px; margin:auto;
  background:var(--surface); border:1px solid var(--hairline);
  border-radius:20px; padding:38px;
  box-shadow:0 1px 2px rgba(var(--encre-rgb),.04), 0 20px 50px rgba(var(--encre-rgb),.10);
}
.brand { text-align:center; margin-bottom:30px; }
.brand-mark {
  width:64px; height:64px; margin:0 auto 18px; border-radius:16px;
  background:var(--brand-primary); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:'Cormorant Garamond', Georgia, serif; font-size:24px; font-weight:600;
}
.brand h1 { font-size:28px; }
.brand p { color:rgba(var(--encre-rgb),.55); }

.login-form { display:grid; gap:12px; }
.login-form label { font-weight:500; font-size:12px; color:rgba(var(--encre-rgb),.6); }
.login-form input {
  width:100%; height:46px;
  border:1px solid var(--hairline); border-radius:10px;
  padding:0 13px; font-size:15px; font-family:'Inter', sans-serif;
  background:var(--fond); color:var(--encre);
}
.login-form input:focus { outline:2px solid rgba(var(--bronze-rgb),.35); border-color:transparent; }
.login-form button { margin-top:10px; height:48px; width:100%; }

/* =================== Actions rapides =================== */
.quick-actions {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
  gap:14px; margin-top:18px;
}
.quick-actions a {
  display:block; padding:15px 16px;
  border:1px solid var(--hairline); border-radius:var(--radius-sm);
  text-decoration:none; color:var(--encre); font-weight:600;
  background:var(--surface); box-shadow:var(--ombre);
  transition:transform .14s ease, border-color .15s ease;
}
.quick-actions a:hover { transform:translateY(-1px); border-color:var(--brand-secondary); }

/* =================== Formulaires (grille) =================== */
.form-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:18px; margin-top:20px; }
.form-grid .full { grid-column:1 / -1; }
.form-grid label { display:block; margin-bottom:7px; font-weight:500; font-size:12px; color:rgba(var(--encre-rgb),.6); }
.form-grid input, .form-grid select, .form-grid textarea {
  width:100%; border:1px solid var(--hairline); border-radius:10px;
  padding:11px 13px; font-size:14px; font-family:'Inter', sans-serif;
  background:var(--fond); color:var(--encre);
}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus {
  outline:2px solid rgba(var(--bronze-rgb),.35); border-color:transparent;
}
.form-grid textarea { min-height:100px; resize:vertical; }
.form-grid button { grid-column:1 / -1; height:48px; }

/* Formulaires « simples » (label > input) hors grille — ex. tickets, loupe */
.content form label { display:block; margin:0 0 12px; font-size:13px; color:rgba(var(--encre-rgb),.7); }
.content form label input,
.content form label select,
.content form label textarea {
  display:block; width:100%; margin-top:5px;
  border:1px solid var(--hairline); border-radius:10px;
  padding:10px 12px; font-size:14px; font-family:'Inter', sans-serif;
  background:var(--fond); color:var(--encre);
}
.content form label input:focus,
.content form label select:focus,
.content form label textarea:focus { outline:2px solid rgba(var(--bronze-rgb),.35); border-color:transparent; }
.content form textarea { resize:vertical; min-height:70px; }

/* =================== Responsive =================== */
/* La sidebar reste TOUJOURS à côté du contenu (jamais de nav horizontale).
   Elle se rétrécit sur écran moyen, et ne s'empile que sur vrai mobile. */
@media (max-width:1024px) {
  .content { padding:28px 24px 56px; }
}
@media (max-width:760px) {
  .sidebar { width:208px; flex:0 0 208px; }
  .form-grid { grid-template-columns:1fr; }
  .panel { overflow-x:auto; }      /* tables larges : défilent au lieu de déborder */
  h1 { font-size:27px; }
}
@media (max-width:560px) {
  .app-layout { flex-direction:column; }
  .sidebar {
    width:auto; flex:0 0 auto; height:auto; position:static;
    border-right:none; border-bottom:1px solid var(--hairline);
  }
  .content { padding:20px 14px 44px; }
}