/* ============================================
   OPERIA v2 — Layout application (sidebar + topbar)
   ============================================ */

.app-shell {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: 1fr;
  /* Le strip gauche (largeur sidebar) reprend la couleur sombre du panneau,
     pour que même si on scrolle au-delà du sticky 100dvh, la sidebar visuelle
     descende jusqu'au bas de la page sans laisser apparaitre une bande claire. */
  background:
    linear-gradient(to right,
      #14141A 0,
      #14141A var(--sidebar-w),
      var(--ink-50) var(--sidebar-w),
      var(--ink-50) 100%);
}

/* Backdrop is always out-of-flow so it never steals a grid column.
   Only becomes visible/interactive when the sidebar is opened on mobile. */
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: var(--z-drawer);
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms var(--ease);
}
.sidebar-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

/* ---------- Sidebar ---------- */
.sidebar {
  background: var(--grad-dark-panel);
  color: var(--ink-200);
  display: flex;
  flex-direction: column;
  height: 100dvh;
  position: sticky;
  top: 0;
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  z-index: 20;
}

.sidebar-brand {
  padding: var(--sp-6) var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.sidebar-brand-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(15, 23, 42, 0.4));
  flex-shrink: 0;
}
.sidebar-brand-text { min-width: 0; }
.sidebar-brand-name {
  font-size: var(--fs-lg);
  font-weight: var(--fw-extrabold);
  color: white;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.sidebar-brand-sub {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--violet-300);
  font-weight: var(--fw-semibold);
  margin-top: 3px;
}

.sidebar-search {
  padding: var(--sp-4) var(--sp-5);
}
.sidebar-search .input-group .input {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: white;
  height: 40px;
  font-size: var(--fs-sm);
}
.sidebar-search .input-group .input::placeholder { color: rgba(255, 255, 255, 0.4); }
.sidebar-search .input-group .input:focus {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--violet-400);
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.25);
}
.sidebar-search .input-group-icon { color: rgba(255, 255, 255, 0.5); }

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-2) var(--sp-3) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
}

.sidebar-section-title {
  padding: var(--sp-4) var(--sp-3) var(--sp-2);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px 12px;
  border-radius: var(--r-md);
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  transition: all var(--t-base);
  cursor: pointer;
  position: relative;
}
.nav-item i { width: 18px; text-align: center; font-size: 16px; color: rgba(255, 255, 255, 0.5); }
.nav-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: white;
}
.nav-item:hover i { color: white; }
.nav-item.active {
  background: rgba(255, 255, 255, 0.08);
  color: white;
  font-weight: var(--fw-semibold);
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 22px;
  border-radius: 0 4px 4px 0;
  background: var(--grad-brand);
  box-shadow: 0 0 16px rgba(15, 23, 42, 0.6);
}
.nav-item.active i { color: var(--violet-300); }
.nav-item .nav-count {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  color: white;
}
.nav-item.active .nav-count {
  background: var(--violet-600);
}
/* Badge d'alerte rouge (ex. contrats non géolocalisés à corriger). Masqué par
   défaut, affiché par JS uniquement quand le compteur est > 0. */
.nav-item .nav-alert {
  margin-left: 6px;
  background: #dc2626;
  color: #fff;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  display: none;
  white-space: nowrap;
}

.sidebar-footer {
  padding: var(--sp-4);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--t-base);
}
.sidebar-user:hover { background: rgba(255, 255, 255, 0.06); }
.sidebar-user-name { color: white; font-weight: var(--fw-semibold); font-size: var(--fs-sm); line-height: 1.2; }
.sidebar-user-role { color: rgba(255, 255, 255, 0.5); font-size: 11px; }
.sidebar-user i { color: rgba(255, 255, 255, 0.5); margin-left: auto; }

/* ---------- Main ---------- */
.app-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100dvh;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  height: var(--topbar-h);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ink-100);
  padding: 0 var(--sp-8);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.topbar-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--ink-900);
  letter-spacing: -0.02em;
}
.topbar-sub {
  font-size: var(--fs-sm);
  color: var(--ink-500);
}

.topbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.topbar-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  color: var(--ink-600);
  background: transparent;
  transition: all var(--t-base);
  position: relative;
}
.topbar-btn:hover { background: var(--ink-100); color: var(--ink-900); }
.topbar-btn .notif-dot {
  position: absolute;
  top: 8px; right: 10px;
  width: 8px; height: 8px;
  background: var(--danger);
  border-radius: 50%;
  border: 2px solid white;
}

/* Mobile menu toggle */
.topbar-menu {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  align-items: center;
  justify-content: center;
  color: var(--ink-700);
  background: transparent;
}

.content {
  flex: 1;
  padding: var(--sp-8);
  max-width: 100%;
}

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-bottom: var(--sp-6);
  flex-wrap: wrap;
}
.page-header h1 { font-size: var(--fs-3xl); letter-spacing: -0.03em; }
.page-header p { color: var(--ink-500); margin-top: var(--sp-1); }

.page-tools {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  align-items: center;
}

/* Grids */
.grid-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-4);
}
.grid-2 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--sp-6);
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--sp-6);
}
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-4);
}

/* ---------- Dashboard specific ---------- */
/* Hero accueil : image 4K d'équipe de nettoyage en arrière-plan,
   léger voile dégradé pour garder le texte blanc lisible.
   Pour changer l'image : remplacer l'URL Unsplash par /img/hero-cleaning.jpg
   (déposer un JPG ≥ 2000px de large dans public/img/). */
.hero-card {
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.78) 0%, rgba(15, 23, 42, 0.55) 55%, rgba(15, 23, 42, 0.40) 100%),
    url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=2400&q=85') center 40% / cover no-repeat;
  color: white;
  border-radius: var(--r-2xl);
  padding: var(--sp-8);
  position: relative;
  overflow: hidden;
  margin-bottom: var(--sp-6);
  min-height: 220px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
}
.hero-card::before {
  /* Voile radial subtil supplémentaire pour adoucir les contrastes */
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(at 25% 30%, rgba(255,255,255,0.08) 0%, transparent 55%);
  pointer-events: none;
}
.hero-card > * { position: relative; z-index: 1; }
.hero-card h2 { color: white; font-size: var(--fs-3xl); letter-spacing: -0.03em; margin-bottom: var(--sp-2); }
.hero-card p { color: rgba(255, 255, 255, 0.7); max-width: 560px; }
.hero-card-stats {
  display: flex;
  gap: var(--sp-8);
  flex-wrap: wrap;
  margin-top: var(--sp-6);
}
.hero-stat-value { font-size: var(--fs-3xl); font-weight: var(--fw-extrabold); letter-spacing: -0.03em; }
.hero-stat-label { color: rgba(255, 255, 255, 0.6); font-size: var(--fs-sm); }

.activity-chart {
  height: 180px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: var(--sp-2) 0;
}
.activity-bar {
  flex: 1;
  min-height: 8px;
  background: var(--grad-brand);
  border-radius: var(--r-sm);
  position: relative;
  transition: opacity var(--t-base), transform var(--t-base);
  cursor: pointer;
}
.activity-bar:hover { opacity: 0.85; transform: translateY(-2px); }
.activity-bar::after {
  content: attr(data-count);
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: var(--fw-bold);
  color: var(--ink-700);
}
.activity-label {
  text-align: center;
  font-size: 11px;
  color: var(--ink-500);
  margin-top: 6px;
  text-transform: capitalize;
}

/* ---------- Filter bar ---------- */
.filter-bar {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
  align-items: center;
}
.filter-bar .input-group { flex: 1; min-width: 220px; max-width: 420px; }
.filter-bar .input { height: 40px; }

/* ---------- Item cards (contracts, collaborators) ---------- */
.item-card {
  background: white;
  border-radius: var(--r-xl);
  border: 1px solid var(--ink-100);
  padding: var(--sp-5);
  transition: all var(--t-base);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.item-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--accent-color, var(--grad-brand));
}
.item-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: var(--violet-200);
}

.item-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.item-card-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--ink-900);
  line-height: 1.3;
}
.item-card-sub { color: var(--ink-500); font-size: var(--fs-sm); margin-top: 2px; }

.item-card-info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  color: var(--ink-600);
  font-size: var(--fs-sm);
}
.item-card-info div { display: flex; align-items: center; gap: 8px; }
.item-card-info i { color: var(--ink-400); width: 14px; }

.item-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--ink-100);
}

.card-qr-btn {
  width: 30px; height: 30px;
  border-radius: var(--r-sm);
  background: var(--ink-50);
  border: 1px solid var(--ink-100);
  color: var(--ink-600);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all var(--t-base);
  font-size: 14px;
}

/* ---------- Activity timeline (journal de suivi) ---------- */
.activity-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding-left: 28px;
}
.activity-timeline::before {
  content: '';
  position: absolute;
  left: 13px; top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(to bottom, var(--ink-100), var(--ink-50));
}
.activity-row {
  position: relative;
  display: flex;
  gap: var(--sp-3);
}
.activity-dot {
  position: absolute;
  left: -28px;
  top: 2px;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: white;
  font-size: 11px;
  box-shadow: 0 0 0 3px white;
}
.activity-body { flex: 1; min-width: 0; padding-top: 2px; }
.card-qr-btn:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
  transform: scale(1.05);
}

/* ---------- Issue priority stripe ---------- */
.issue-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  border: 1px solid var(--ink-100);
  transition: all var(--t-base);
  cursor: pointer;
  background: white;
}
.issue-row:hover { background: var(--ink-50); border-color: var(--violet-200); }
.issue-priority {
  width: 4px;
  height: 40px;
  border-radius: 999px;
  flex-shrink: 0;
}
.issue-priority.critical { background: var(--danger); }
.issue-priority.high { background: var(--warning); }
.issue-priority.medium { background: var(--info); }
.issue-priority.low { background: var(--ink-300); }

/* ---------- Detail drawer ---------- */
.detail-hero {
  background: var(--grad-brand);
  color: white;
  padding: var(--sp-6);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  position: relative;
  overflow: hidden;
}
.detail-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-hero);
  opacity: 0.6;
  pointer-events: none;
}
.detail-hero > * { position: relative; z-index: 1; }
.detail-hero h3 { color: white; font-size: var(--fs-2xl); letter-spacing: -0.02em; }
.detail-hero p { color: rgba(255, 255, 255, 0.8); }

/* ---------- Login / Landing ---------- */
.auth-page {
  min-height: 100dvh;
  background: var(--ink-50);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
}
.auth-hero {
  background: var(--grad-dark-panel);
  color: white;
  padding: var(--sp-12);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.auth-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-hero);
}
.auth-hero > * { position: relative; z-index: 1; }
.auth-hero h1 { color: white; font-size: var(--fs-5xl); line-height: 1.05; letter-spacing: -0.035em; }
.auth-hero h1 .accent {
  background: linear-gradient(90deg, #CBD5E1 0%, #CBD5E1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.auth-hero p { color: rgba(255, 255, 255, 0.7); font-size: var(--fs-lg); max-width: 520px; margin-top: var(--sp-4); }

.auth-features {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}
.auth-feature {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-4);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-lg);
  backdrop-filter: blur(10px);
}
.auth-feature-icon {
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.08);
  color: var(--violet-300);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.auth-feature h4 { color: white; font-size: var(--fs-sm); margin-bottom: 2px; }
.auth-feature p { color: rgba(255, 255, 255, 0.6); font-size: var(--fs-xs); margin: 0; }

.auth-form-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sp-12);
  max-width: 520px;
  width: 100%;
  margin: 0 auto;
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

/* ---------- Page transitions ---------- */
.page-enter {
  animation: pageIn 400ms var(--ease);
}
@keyframes pageIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Timeline ---------- */
.timeline { position: relative; padding-left: var(--sp-6); }
.timeline::before {
  content: '';
  position: absolute;
  left: 8px; top: 0; bottom: 0;
  width: 2px;
  background: var(--ink-100);
}
.timeline-item {
  position: relative;
  padding-bottom: var(--sp-5);
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: -24px; top: 4px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--primary);
}
.timeline-item.success::before { border-color: var(--success); }
.timeline-item.warning::before { border-color: var(--warning); }

/* ---------- Utility: stat inline ---------- */
.stat-inline {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}
.stat-inline .v { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: -0.02em; }
.stat-inline .l { color: var(--ink-500); font-size: var(--fs-sm); }

/* ============================================
   RESPONSIVE
   ============================================ */

/* Tablet */
@media (max-width: 1100px) {
  .grid-2 { grid-template-columns: 1fr; }
  .content { padding: var(--sp-6); }
}

/* Mobile + tablette : sidebar en overlay dès que la largeur devient serrée */
@media (max-width: 1024px) {
  .app-shell {
    grid-template-columns: 1fr;
    /* En mobile la sidebar est en overlay : on revient au fond clair simple. */
    background: var(--ink-50);
  }
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 86%;
    max-width: 320px;
    transform: translateX(-100%);
    transition: transform 320ms var(--ease);
    z-index: calc(var(--z-drawer) + 1);
  }
  .sidebar.open { transform: translateX(0); }
  .topbar-menu { display: grid; }
}

/* Mobile strict */
@media (max-width: 768px) {
  .topbar {
    padding: 0 var(--sp-4);
    gap: var(--sp-2);
  }
  .topbar-title { font-size: var(--fs-lg); }
  .topbar-sub { display: none; }
  .topbar-actions { gap: var(--sp-1); }
  /* Hide helper icon buttons to keep only avatar + menu trigger */
  .topbar-actions .topbar-btn[title="Aide"] { display: none; }
  .topbar-btn { width: 36px; height: 36px; }

  .content { padding: var(--sp-4); }
  .page-header { gap: var(--sp-3); margin-bottom: var(--sp-4); }
  .page-header h1 { font-size: var(--fs-2xl); }
  .hero-card { padding: var(--sp-6); }
  .hero-card h2 { font-size: var(--fs-2xl); }
  .hero-card-stats { gap: var(--sp-4); }
  .hero-stat-value { font-size: var(--fs-xl); }

  .grid-kpi { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  .grid-cards { grid-template-columns: 1fr; gap: var(--sp-3); }
  .grid-3 { grid-template-columns: 1fr; gap: var(--sp-4); }
  .kpi-value { font-size: var(--fs-3xl); }
  .kpi { padding: var(--sp-4); }
  .kpi-icon { width: 36px; height: 36px; top: var(--sp-3); right: var(--sp-3); }

  .auth-page { grid-template-columns: 1fr; }
  .auth-hero { padding: var(--sp-8) var(--sp-6); }
  .auth-hero h1 { font-size: var(--fs-3xl); }
  .auth-features { display: none; }
  .auth-form-wrap { padding: var(--sp-6); }

  .drawer { max-width: 100%; }
  .modal { max-height: 100dvh; border-radius: var(--r-xl) var(--r-xl) 0 0; margin-top: auto; }
  .modal-backdrop { align-items: flex-end; padding: 0; }

  .page-tools { width: 100%; }
  .page-tools .btn {
    flex: 1 1 auto;
    padding: 0 var(--sp-3);
    font-size: var(--fs-xs);
  }

  /* Segmented control scrolls horizontally instead of wrapping awkwardly */
  .filter-bar { gap: var(--sp-2); }
  .filter-bar .input-group { max-width: 100%; }
  .segmented {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .segmented::-webkit-scrollbar { display: none; }
  .segmented button { flex: 0 0 auto; white-space: nowrap; }

  /* Detail hero (drawer) — keep grid breathing */
  .detail-hero { padding: var(--sp-5); }
  .detail-hero h3 { font-size: var(--fs-xl); }
}

/* Utility : table scrollable horizontalement sur mobile */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-responsive table { min-width: 640px; }

@media (max-width: 480px) {
  .grid-kpi { grid-template-columns: 1fr 1fr; }
  .kpi-value { font-size: var(--fs-2xl); }
  .segmented button { padding: 8px 10px; font-size: var(--fs-xs); }
  .hero-card-stats { gap: var(--sp-4); }
  .hero-card { padding: var(--sp-5); }
  .hero-card h2 { font-size: var(--fs-xl); }
  .hero-card p { font-size: var(--fs-sm); }

  /* Edge-to-edge cards on very small screens */
  .item-card { padding: var(--sp-4); border-radius: var(--r-lg); }
  .item-card-title { font-size: var(--fs-md); }

  /* Forms: make 2/3-col grids stack automatically on tight widths */
  .modal form [style*="grid-template-columns: 1fr 1fr"],
  .modal form [style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Topbar: on super-narrow, hide the mode badge text entirely */
  .mode-badge { display: none; }
}

/* Tiny phones : KPI en une colonne pour éviter les troncages */
@media (max-width: 400px) {
  .grid-kpi { grid-template-columns: 1fr; }
}

/* ═════════════════════════════════════════════════════════════════════
   MOBILE — fixes ciblés pour les vues Fleet/Planning/MySites/MyDocs
   Ajoutés en 2026.05 pour résoudre les problèmes d'affichage signalés.
   ═════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  /* Tables structurées en grid (Fleet, Planning, etc.) → scroll horizontal
     forcé pour ne pas tronquer le contenu. Ajout d'une ombre droite pour
     indiquer visuellement qu'on peut scroller. */
  .card [style*="grid-template-columns"][style*="repeat"]:not(.grid-kpi) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Page-header en colonne sur mobile pour éviter les conflits flex */
  .page-enter > .flex.justify-between {
    flex-direction: column;
    align-items: stretch !important;
  }
  .page-enter > .flex.justify-between > div:first-child + div,
  .page-enter > .flex.justify-between > .flex {
    width: 100%;
  }
  .page-enter > .flex.justify-between .btn { width: 100%; }

  /* Drawer plein écran sur mobile */
  .drawer {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 0 !important;
  }
  .drawer-header { padding: 14px 16px; }
  .drawer-content { padding: 0; }
  .drawer-footer {
    padding: 12px 16px !important;
    flex-wrap: wrap;
    gap: 6px !important;
  }
  .drawer-footer .btn {
    flex: 1 1 calc(50% - 3px);
    font-size: 12.5px;
    padding: 0 10px;
  }

  /* Hero détaillé (graphite) — réduit le padding interne */
  .detail-hero {
    padding: var(--sp-4) var(--sp-4) !important;
    border-radius: 0 !important;
  }
  .detail-hero h3 { font-size: 18px !important; }
  .hero-kpis {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--sp-3) !important;
  }

  /* Tabs — scroll horizontal smooth */
  .tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { flex: 0 0 auto; white-space: nowrap; }

  /* Cards de site (my-sites) — padding réduit */
  .site-card { padding: var(--sp-3) !important; }
  .site-card [style*="grid-template-columns: repeat(auto-fit, minmax(180px"] {
    grid-template-columns: 1fr !important;
  }

  /* Topbar — bouton ouverture sidebar bien visible */
  .topbar-menu {
    display: grid !important;
    width: 40px; height: 40px;
    place-items: center;
  }
}

/* Très petit (≤ 480px) : drawer header titre tronqué */
@media (max-width: 480px) {
  .drawer-header h3,
  .drawer-header .drawer-title { font-size: 15px !important; }
  /* Forms : grids 3-col forcés en 1-col sur mobile */
  .modal form [style*="grid-template-columns: 1fr 1fr 1fr"],
  .drawer form [style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* Tap targets ≥ 44px sur mobile pour fermetures de modale/drawer */
@media (max-width: 768px) {
  .modal-header .btn,
  .modal-header button,
  .drawer .drawer-close,
  .drawer button[aria-label="Fermer"],
  .drawer button[title="Fermer"] {
    min-width: 44px;
    min-height: 44px;
  }
  .modal, .drawer { border-radius: 0; }
  .modal { max-width: 100%; max-height: 100dvh; }
  .drawer { width: 100%; max-width: 100%; }
}

/* Print */
@media print {
  .sidebar, .topbar, .page-tools { display: none !important; }
  .app-shell { grid-template-columns: 1fr; }
  body { background: white; }
}

/* ---------- Company selector (sidebar) ---------- */
.sidebar-company {
  padding: 0 var(--sp-5) var(--sp-4);
}
.sidebar-company-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--violet-300);
  font-weight: var(--fw-semibold);
  margin-bottom: 6px;
}
.sidebar-company-label i { font-size: 11px; }
.input.input-dark {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  height: 38px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  border-radius: var(--r-md);
  width: 100%;
  padding: 0 10px;
  cursor: pointer;
  transition: all .15s ease;
}
.input.input-dark:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
}
.input.input-dark:focus {
  outline: 0;
  border-color: var(--violet-400);
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.2);
}
.input.input-dark option {
  background: #1a1630;
  color: white;
}

/* ---------- Mode badge (topbar) ---------- */
.mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: all .2s ease;
  user-select: none;
}
.mode-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
}
.mode-badge-live {
  color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.mode-badge-live .mode-dot {
  animation: mode-pulse 2s ease-in-out infinite;
}
.mode-badge-demo {
  color: var(--violet-400);
  background: rgba(15, 23, 42, 0.1);
  border: 1px solid rgba(15, 23, 42, 0.24);
}
.mode-badge-offline {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.28);
}
@keyframes mode-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
  50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}
@media (max-width: 768px) {
  .mode-badge span:not(.mode-dot) { display: none; }
  .mode-badge { padding: 6px; }
}

/* ---- Pill dropdown popover (Statut / Priorité / Assigné dans le drawer signalement) ---- */
.pill-popover {
  position: absolute;
  z-index: 1400;
  min-width: 220px;
  max-height: 320px;
  overflow-y: auto;
  background: white;
  border: 1px solid var(--ink-200);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 36, 0.12), 0 2px 6px rgba(15, 23, 36, 0.06);
  padding: 4px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.pill-popover.open { opacity: 1; transform: translateY(0); }
.pill-popover .pill-opt {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font: inherit; font-size: 13px;
  color: var(--ink-800);
  text-align: left;
  transition: background 0.1s ease;
  white-space: nowrap;
}
.pill-popover .pill-opt:hover { background: var(--ink-50); }
.pill-popover .pill-opt.active { background: var(--violet-50, #F1F5F9); color: var(--primary); font-weight: 600; }
.pill-popover .pill-opt-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.pill-popover .pill-opt-label { flex: 1; }
.pill-popover .pill-opt-check {
  font-size: 11px; color: var(--primary); margin-left: 4px;
}

/* ---- Issue detail: photo gallery + lightbox ---- */
.issue-photos .issue-photo:hover img { transform: scale(1.04); }
.issue-photos .issue-photo img { transition: transform .2s ease; }

.photo-lightbox {
  position: fixed; inset: 0; z-index: 1500;
  background: rgba(10, 10, 20, 0.92);
  display: grid; place-items: center;
  animation: pl-fade-in .15s ease-out;
}
@keyframes pl-fade-in { from { opacity: 0; } to { opacity: 1; } }
.photo-lightbox .pl-stage {
  position: relative;
  max-width: 92vw; max-height: 88vh;
  display: grid; place-items: center;
  min-width: 200px; min-height: 200px;
}
.photo-lightbox .pl-img {
  max-width: 92vw; max-height: 84vh;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  background: #1a1a2e;
}
.photo-lightbox .pl-loading {
  display: grid; place-items: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 32px;
}
.photo-lightbox .pl-error {
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  padding: 32px;
  max-width: 400px;
}
.photo-lightbox .pl-close,
.photo-lightbox .pl-prev,
.photo-lightbox .pl-next {
  position: absolute;
  background: rgba(255, 255, 255, 0.12);
  color: white;
  border: 0;
  width: 46px; height: 46px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  display: grid; place-items: center;
  transition: background .15s;
}
.photo-lightbox .pl-close { top: 20px; right: 20px; }
.photo-lightbox .pl-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.photo-lightbox .pl-next { right: 20px; top: 50%; transform: translateY(-50%); }
.photo-lightbox .pl-close:hover,
.photo-lightbox .pl-prev:hover,
.photo-lightbox .pl-next:hover { background: rgba(255, 255, 255, 0.25); }
.photo-lightbox .pl-counter {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  color: white; font-size: 13px;
  background: rgba(0,0,0,0.4);
  padding: 6px 14px; border-radius: 20px;
  font-weight: 600;
}

/* ============================================================
   FLUIDITY — transitions douces, prévention flash blanc, easing
   ============================================================ */

/* Page transitions plus rapides et moins violentes */
.page-enter { animation: pageIn 240ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes pageIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Skeleton → content : fondu sur le contenu qui arrive */
.content > .page-enter { animation-delay: 0ms; }

/* Skeleton shimmer plus subtil */
.skeleton {
  background: linear-gradient(90deg, var(--ink-100, #f1f5f9) 0%, var(--ink-50, #f8fafc) 50%, var(--ink-100, #f1f5f9) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Alertes : slide-in discret depuis le haut */
.alert-banner {
  animation: alertIn 320ms cubic-bezier(0.16, 1, 0.3, 1);
  transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.alert-banner:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
@keyframes alertIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Drawer : easing plus naturel + backdrop fade */
.drawer {
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 260ms ease;
}
.sidebar-backdrop {
  transition: opacity 200ms ease;
  opacity: 0;
}
.sidebar-backdrop.open { opacity: 1; }

/* Modal overlay : fade-in au lieu du flash */
.modal-overlay {
  animation: overlayFade 180ms ease-out;
}
@keyframes overlayFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.modal-overlay > .card,
.modal-overlay > .modal,
.modal-overlay > [role="dialog"] {
  animation: modalPop 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalPop {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Nav items : feedback hover plus doux */
.nav-item {
  transition: background 160ms ease, color 160ms ease, padding-left 160ms ease;
}
.nav-item:hover:not(.active) { padding-left: calc(var(--sp-3, 12px) + 3px); }

/* KPI cards : hover lift léger */
.kpi, .hero-stat, .card {
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.card.interactive:hover,
.card[onclick]:hover,
button.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  cursor: pointer;
}

/* Toast : entrée depuis le bas */
.toast {
  animation: toastIn 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Tableaux : fade des lignes pour éviter flash sur update */
table tbody tr {
  animation: rowIn 220ms ease-out backwards;
}
table tbody tr:nth-child(1) { animation-delay: 0ms; }
table tbody tr:nth-child(2) { animation-delay: 20ms; }
table tbody tr:nth-child(3) { animation-delay: 40ms; }
table tbody tr:nth-child(4) { animation-delay: 60ms; }
table tbody tr:nth-child(5) { animation-delay: 80ms; }
table tbody tr:nth-child(n+6) { animation-delay: 100ms; }
@keyframes rowIn {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Respect de prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .page-enter, .alert-banner, .toast, table tbody tr,
  .modal-overlay, .modal-overlay > .card, .modal-overlay > .modal,
  .modal-overlay > [role="dialog"] {
    animation: none !important;
  }
  .skeleton { animation: none !important; }
  .drawer, .sidebar-backdrop, .nav-item, .kpi, .hero-stat, .card {
    transition: none !important;
  }
}

/* Prévenir le flash blanc entre deux renders de la même page :
   le container .content garde son background. */
.content { background: var(--bg-app, #F8FAFC); min-height: 100%; }

/* ═════════════════════════════════════════════════════════════
   REPORT EDITOR V3 — drawer plein écran + sidebar collapse + preview
   ═════════════════════════════════════════════════════════════ */
.rpe-overlay {
  position: fixed; inset: 0; z-index: 9995;
  background: #F1F5F9;
  display: flex; flex-direction: column;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ═══════════════════════════════════════════════════════════════════════
   ÉDITEUR V2 — toolbar plate + canvas plein écran + popovers
   ═══════════════════════════════════════════════════════════════════════ */
.rpe-overlay-v2 .rpe-body { display: none !important; }

.rpe-toolbar2 {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  background: #FFFFFF;
  border-bottom: 1px solid #E5E7EB;
  flex: 0 0 auto;
  position: relative;
}
.rpe-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 8px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px; font-weight: 500;
  color: #0F172A;
  transition: all .12s ease;
  white-space: nowrap;
}
.rpe-pill:hover { border-color: #0F172A; background: #F8FAFC; }
.rpe-pill-active { border-color: #0F172A; background: #0F172A; color: white; }
.rpe-pill-active .rpe-pill-chev { color: white; }
.rpe-pill-ghost { background: transparent; border-color: transparent; color: #475569; }
.rpe-pill-ghost:hover { background: #F1F5F9; border-color: #E2E8F0; color: #0F172A; }
.rpe-pill-swatch {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.6);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12);
  flex-shrink: 0;
}
.rpe-pill-active .rpe-pill-swatch { border-color: rgba(255,255,255,0.9); }
.rpe-pill-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 18px; font-size: 14px; font-weight: 700;
  color: #0F172A;
}
.rpe-pill-active .rpe-pill-icon { color: white; }
.rpe-pill-icon-fa { color: #475569; }
.rpe-pill-active .rpe-pill-icon-fa { color: white; }
.rpe-pill-logo {
  width: 22px; height: 18px; object-fit: contain; border-radius: 3px;
  background: white; padding: 1px;
}
.rpe-pill-chev { font-size: 9px; color: #94A3B8; margin-left: 2px; }

/* Canvas plein écran */
.rpe-canvas {
  flex: 1 1 auto; position: relative; overflow: auto;
  padding: 32px 24px; display: flex;
  justify-content: center; align-items: flex-start;
  background: #F1F5F9;
}
.rpe-canvas-frame {
  position: relative; width: 100%; max-width: 800px;
}
.rpe-canvas-frame iframe {
  width: 100%; max-width: 580px;
  height: calc(100vh - 200px);
  border: none; background: #FFFFFF;
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.12);
  border-radius: 8px;
  margin: 0 auto; display: block;
  transition: max-width 180ms ease;
}
.rpe-zoom-float {
  position: fixed; bottom: 24px; right: 24px;
  display: inline-flex;
  background: rgba(255,255,255,0.96); border: 1px solid #E2E8F0;
  border-radius: 999px; padding: 4px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.10);
  backdrop-filter: blur(8px);
  z-index: 50;
}
.rpe-zoom-float .rpe-zoom-btn {
  border: 0; background: transparent; padding: 6px 12px;
  font-size: 12px; font-weight: 600; color: #475569; cursor: pointer;
  border-radius: 999px;
}
.rpe-zoom-float .rpe-zoom-btn:hover { background: #F1F5F9; color: #0F172A; }
.rpe-zoom-float .rpe-zoom-btn.rpe-zoom-active { background: #0F172A; color: white; }

/* ─── POPOVER unique partagé par toutes les pills ─────────────────────── */
.rpe-popover {
  position: absolute; z-index: 100;
  min-width: 320px; max-width: 380px;
  background: #FFFFFF; border: 1px solid #E2E8F0;
  border-radius: 14px;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
  padding: 16px;
  animation: rpePopIn 140ms cubic-bezier(.32,.72,0,1);
}
@keyframes rpePopIn {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.rpe-pop-title {
  font-size: 13px; font-weight: 700; color: #0F172A;
  margin: 0 0 6px;
}
.rpe-pop-title-sm {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: #64748B; margin: 4px 0;
}
.rpe-pop-help {
  font-size: 11.5px; color: #64748B; margin: 0 0 12px;
  line-height: 1.4;
}
.rpe-pop-divider {
  height: 1px; background: #E2E8F0; margin: 12px 0;
}
.rpe-pop-row {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
}
.rpe-pop-mini-lbl { font-size: 11px; color: #64748B; flex-shrink: 0; }
.rpe-pop-color-input {
  width: 32px; height: 32px; border: 1px solid #E2E8F0;
  border-radius: 8px; cursor: pointer; padding: 0;
}
.rpe-pop-input {
  flex: 1; height: 32px; padding: 0 10px;
  border: 1px solid #E2E8F0; border-radius: 8px;
  font-size: 13px; color: #0F172A;
  background: white;
  transition: border-color .12s;
}
.rpe-pop-input:focus { outline: none; border-color: #0F172A; }
.rpe-pop-input-mono { font-family: ui-monospace, monospace; font-size: 12px; }

.rpe-pop-field { margin-bottom: 10px; }
.rpe-pop-field label {
  display: block; font-size: 11.5px; font-weight: 600;
  color: #475569; margin-bottom: 4px;
}
.rpe-pop-field .rpe-pop-input { width: 100%; }
.rpe-pop-toggle {
  display: flex !important; align-items: center; gap: 8px;
  cursor: pointer; font-size: 13px; color: #0F172A;
}
.rpe-pop-toggle input { accent-color: #0F172A; cursor: pointer; }

.rpe-color-grid {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px;
  margin-bottom: 8px;
}
.rpe-color-chip {
  width: 100%; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid white; cursor: pointer;
  box-shadow: 0 0 0 1px #E2E8F0;
  transition: transform .12s, box-shadow .12s;
  padding: 0;
}
.rpe-color-chip:hover { transform: scale(1.1); }
.rpe-color-chip-active {
  box-shadow: 0 0 0 2px #0F172A;
  transform: scale(1.1);
}

.rpe-font-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.rpe-font-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 8px;
  background: #F8FAFC; border: 1px solid #E2E8F0;
  border-radius: 10px; cursor: pointer;
  transition: all .12s;
}
.rpe-font-card:hover { border-color: #0F172A; background: white; }
.rpe-font-card-active { border-color: #0F172A; background: white; box-shadow: 0 0 0 2px rgba(15,23,42,0.08); }
.rpe-font-sample { font-size: 28px; font-weight: 700; color: #0F172A; line-height: 1; }
.rpe-font-label { font-size: 12px; font-weight: 600; color: #0F172A; }
.rpe-font-note { font-size: 10px; color: #64748B; text-align: center; }

.rpe-pop-slider-row {
  display: flex; align-items: center; gap: 12px;
}
.rpe-pop-slider {
  flex: 1; accent-color: #0F172A;
}
.rpe-pop-slider-val {
  font-size: 12px; font-weight: 600; color: #0F172A;
  min-width: 50px; text-align: right;
  font-variant-numeric: tabular-nums;
}

.rpe-logo-pop-preview {
  display: flex; align-items: center; justify-content: center;
  height: 80px; background: #F8FAFC; border: 1px dashed #E2E8F0;
  border-radius: 10px; margin-bottom: 10px; padding: 8px;
}
.rpe-logo-pop-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.rpe-logo-pop-empty { color: #94A3B8; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; }
.rpe-pop-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  margin-bottom: 10px;
}
.rpe-pop-badge.ok { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.rpe-pop-badge.custom { background: #FEF3C7; color: #92400E; border: 1px solid #FCD34D; }
.rpe-pop-actions {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px;
}

/* Header */
.rpe-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px;
  background: #FFFFFF;
  border-bottom: 1px solid #E5E7EB;
  flex: 0 0 auto;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.rpe-header-left, .rpe-header-right { display: flex; align-items: center; gap: 12px; }
.rpe-close {
  width: 36px; height: 36px; border-radius: 8px;
  border: none; background: #F3F4F6; color: #374151;
  cursor: pointer; display: grid; place-items: center;
  transition: background 120ms, color 120ms;
}
.rpe-close:hover { background: #E5E7EB; color: #111827; }
.rpe-title-main { font-size: 15px; font-weight: 600; color: #111827; }
.rpe-title-sub  { font-size: 12px; color: #6B7280; margin-top: 2px; }
.rpe-dirty { margin-left: 4px; color: #B45309; font-weight: 500; }

.rpe-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; font-size: 13px; font-weight: 500;
  border-radius: 8px; border: 1px solid transparent; cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms, box-shadow 120ms;
}
.rpe-btn:focus-visible { outline: 2px solid #334155; outline-offset: 2px; }
.rpe-btn-ghost { background: transparent; color: #374151; border-color: #E5E7EB; }
.rpe-btn-ghost:hover { background: #F3F4F6; }
.rpe-btn-primary { background: #1E293B; color: #FFFFFF; }
.rpe-btn-primary:hover { background: #111E33; }
.rpe-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.rpe-btn-secondary { background: #F3F4F6; color: #111827; border-color: #E5E7EB; }
.rpe-btn-secondary:hover { background: #E5E7EB; }
.rpe-btn-full { width: 100%; justify-content: center; margin-top: 10px; }
.rpe-btn-sm { padding: 5px 10px; font-size: 12px; }

/* Body */
.rpe-body {
  flex: 1 1 auto;
  display: grid; grid-template-columns: 340px 1fr;
  min-height: 0;
}
.rpe-sidebar {
  background: #FFFFFF; border-right: 1px solid #E5E7EB;
  overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column;
  padding: 8px;
}
.rpe-preview {
  display: flex; flex-direction: column;
  background: #E2E8F0;
  position: relative; min-width: 0;
}
.rpe-preview-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 20px;
  background: #F8FAFC;
  border-bottom: 1px solid #E5E7EB;
  flex: 0 0 auto;
}
.rpe-preview-zoom { display: flex; gap: 4px; background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 8px; padding: 2px; }
.rpe-zoom-btn {
  padding: 4px 10px; font-size: 12px; font-weight: 500;
  background: transparent; color: #6B7280; border: none; border-radius: 6px; cursor: pointer;
}
.rpe-zoom-btn:hover { color: #111827; }
.rpe-zoom-btn.rpe-zoom-active { background: #1E293B; color: #FFFFFF; }

/* Toggle "Afficher les zones interactives" */
.rpe-toggle-zones {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: #475569; cursor: pointer;
  user-select: none; margin-left: 8px;
}
.rpe-toggle-zones input { accent-color: #0F172A; cursor: pointer; }
.rpe-toggle-zones:hover { color: #0F172A; }

/* Barre de progression fine (remplace le spinner — plus discret) */
.rpe-preview-progress {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: transparent; overflow: hidden; pointer-events: none;
  z-index: 5;
}
.rpe-preview-progress .rpe-progress-bar {
  height: 100%; width: 30%; background: linear-gradient(90deg, transparent, #0F172A, transparent);
  position: absolute; left: -30%; transition: opacity 200ms;
  opacity: 0;
}
.rpe-preview-progress.rpe-progress-active .rpe-progress-bar {
  opacity: 1;
  animation: rpeProgressSlide 900ms ease-in-out infinite;
}
@keyframes rpeProgressSlide {
  0%   { left: -30%; }
  100% { left: 100%; }
}

.rpe-preview-spinner {
  display: none; align-items: center; gap: 6px;
  font-size: 12px; color: #6B7280;
}

/* ─── ZONES INTERACTIVES — placées dans les MARGES, jamais sur le doc ────
   Le frame de preview a un padding 20px et une iframe centrée max-width 560px.
   Les zones se placent dans l'espace libre à gauche/droite de l'iframe avec
   une fine flèche pointant vers le PDF. Aucun chevauchement du contenu. */
.rpe-zones {
  position: absolute; inset: 20px;
  pointer-events: none;
  z-index: 10;
}
.rpe-zone {
  position: absolute; pointer-events: auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 4px; border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  cursor: pointer; transition: all .16s ease;
  font-family: inherit; font-size: 11.5px; font-weight: 600;
  color: #0F172A;
  white-space: nowrap;
}
/* Colonne gauche : la chip est ancrée par sa droite, à 14px du bord
   gauche de l'iframe (qui est centrée max-width 560px). On utilise calc()
   pour se placer juste à gauche de l'iframe. */
.rpe-zone-left {
  right: calc(50% + 280px + 12px); /* 50% du frame - moitié iframe (280) - 12px gap */
  left: auto;
}
.rpe-zone-right {
  left: calc(50% + 280px + 12px);
  right: auto;
}
/* Si l'écran est étroit (sidebar prise de la place), on les ramène en
   marge interne du frame plutôt qu'en marge externe. */
@media (max-width: 1100px) {
  .rpe-zone-left  { right: auto; left: 6px; }
  .rpe-zone-right { left: auto; right: 6px; }
}

.rpe-zone-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: #0F172A; color: white;
  font-size: 11px; font-weight: 700;
  flex-shrink: 0;
}
.rpe-zone-lbl { padding-right: 4px; }
/* Flèches fines pointant vers le document */
.rpe-zone-arrow {
  display: inline-block; width: 14px; height: 1px;
  background: #94A3B8; flex-shrink: 0;
  position: relative;
}
.rpe-zone-arrow-right {
  margin-left: 4px;
  margin-right: -14px; /* dépasse à droite, vers l'iframe */
}
.rpe-zone-arrow-left {
  margin-right: 4px;
  margin-left: -14px; /* dépasse à gauche, vers l'iframe */
}
.rpe-zone-arrow::after {
  content:''; position: absolute; right: -4px; top: -2px;
  width: 0; height: 0;
  border-left: 5px solid #94A3B8;
  border-top: 2.5px solid transparent;
  border-bottom: 2.5px solid transparent;
}
.rpe-zone-arrow-left::after {
  right: auto; left: -4px;
  border-left: none;
  border-right: 5px solid #94A3B8;
}
.rpe-zone:hover {
  border-color: #0F172A;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.14);
  transform: translateY(-1px);
}
.rpe-zone:hover .rpe-zone-arrow,
.rpe-zone:hover .rpe-zone-arrow::after { background: #0F172A; }
.rpe-zone:hover .rpe-zone-arrow-right::after { border-left-color: #0F172A; }
.rpe-zone:hover .rpe-zone-arrow-left::after  { border-right-color: #0F172A; }
.rpe-zone:active { transform: translateY(0); }
.rpe-zone-pulse {
  animation: rpeZonePulse 600ms ease-out;
}
@keyframes rpeZonePulse {
  0%   { box-shadow: 0 0 0 0 rgba(15, 23, 42, 0.5); }
  100% { box-shadow: 0 0 0 14px rgba(15, 23, 42, 0); }
}
.rpe-preview-frame {
  flex: 1 1 auto; position: relative; overflow: auto;
  padding: 20px; display: flex; justify-content: center; align-items: flex-start;
}
.rpe-preview-frame iframe {
  width: 100%; max-width: 560px; height: calc(100vh - 140px);
  border: none; background: #FFFFFF;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  border-radius: 6px;
  /* Pas de CSS transform pour le zoom : on redimensionne l'iframe pour que
     le viewer PDF re-rasterise vectoriellement → zéro perte de qualité. */
  transition: max-width 180ms ease, opacity 180ms;
}
.rpe-preview-skeleton {
  position: absolute; inset: 20px;
  max-width: 560px; margin: 0 auto; height: 400px;
  background: #FFFFFF; padding: 40px;
  border-radius: 6px; box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  display: flex; flex-direction: column; gap: 14px;
}
.rpe-skel-line { height: 16px; background: linear-gradient(90deg, #F3F4F6, #E5E7EB, #F3F4F6); background-size: 200% 100%; border-radius: 4px; animation: rpeShimmer 1.4s infinite; }
.rpe-skel-block { height: 220px; background: linear-gradient(90deg, #F3F4F6, #E5E7EB, #F3F4F6); background-size: 200% 100%; border-radius: 4px; animation: rpeShimmer 1.4s infinite; margin-top: 20px; }
@keyframes rpeShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Sidebar categories */
.rpe-cat { margin-bottom: 4px; }
.rpe-cat-header {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; font-size: 13px; font-weight: 600; color: #374151;
  background: transparent; border: none; border-radius: 8px;
  cursor: pointer; text-align: left;
  transition: background 120ms;
}
.rpe-cat-header:hover { background: #F9FAFB; }
.rpe-cat-active > .rpe-cat-header { background: #EEF2F7; color: #1E293B; }
.rpe-cat-icon { width: 22px; color: #6B7280; }
.rpe-cat-active .rpe-cat-icon { color: #1E293B; }
.rpe-cat-label { flex: 1; }
.rpe-cat-chev { font-size: 10px; color: #9CA3AF; }
.rpe-cat-body { max-height: 0; overflow: hidden; transition: max-height 180ms ease; }
.rpe-cat-body-open { max-height: none; padding: 10px 12px 16px 12px; animation: rpeFadeIn 180ms ease; }
@keyframes rpeFadeIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } }

/* Field labels */
.rpe-field-label {
  display: block; font-size: 11px; font-weight: 600; color: #6B7280;
  text-transform: uppercase; letter-spacing: 0.5px;
  margin: 12px 0 6px 0;
}

/* Inputs */
.rpe-input {
  width: 100%; padding: 8px 10px; font-size: 13px;
  border: 1px solid #E5E7EB; border-radius: 6px; background: #FFFFFF;
  color: #111827;
}
.rpe-input:focus { outline: 2px solid #1E293B; outline-offset: -1px; border-color: #1E293B; }
.rpe-hex { font-family: ui-monospace, monospace; max-width: 100px; }

/* Preset cards (Modèles) */
.rpe-preset-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.rpe-preset-card {
  position: relative; padding: 6px; border: 2px solid #E5E7EB;
  background: #FFFFFF; border-radius: 10px; cursor: pointer;
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color 150ms, transform 150ms, box-shadow 150ms;
  text-align: left;
}
.rpe-preset-card:hover { border-color: #94A3B8; transform: translateY(-1px); }
.rpe-preset-card.rpe-preset-active { border-color: #1E293B; box-shadow: 0 0 0 3px rgba(30,58,95,0.12); }
.rpe-preset-card.rpe-preset-flash { animation: rpeFlash 350ms ease; }
@keyframes rpeFlash { 0% { box-shadow: 0 0 0 0 rgba(30,58,95,0.4); } 100% { box-shadow: 0 0 0 12px rgba(30,58,95,0); } }
.rpe-preset-thumb {
  width: 100%; aspect-ratio: 3 / 4;
  border-radius: 6px; overflow: hidden; background: #F9FAFB; border: 1px solid #E5E7EB;
}
.rpe-preset-thumb svg { width: 100%; height: 100%; display: block; }
.rpe-preset-meta { padding: 0 2px 2px 2px; }
.rpe-preset-name { font-size: 13px; font-weight: 600; color: #111827; }
.rpe-preset-tagline { font-size: 11px; color: #6B7280; margin-top: 1px; }
.rpe-preset-check {
  position: absolute; top: 8px; right: 8px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #1E293B; color: #FFFFFF;
  display: grid; place-items: center; font-size: 10px;
}
.rpe-preset-desc {
  font-size: 11.5px; color: #6B7280; line-height: 1.5;
  margin: 10px 0 0 0;
}

/* Color presets */
.rpe-color-presets {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.rpe-color-preset {
  display: flex; padding: 4px; border: 1px solid #E5E7EB; border-radius: 6px;
  background: #FFFFFF; cursor: pointer; gap: 2px; overflow: hidden;
  transition: border-color 120ms, transform 120ms;
}
.rpe-color-preset:hover { border-color: #94A3B8; transform: translateY(-1px); }
.rpe-color-swatch { flex: 1; height: 28px; border-radius: 4px; display: block; }
.rpe-color-row {
  display: flex; align-items: center; gap: 8px;
}
.rpe-color-row input[type="color"] {
  width: 44px; height: 36px; padding: 0; border: 1px solid #E5E7EB; border-radius: 6px;
  background: transparent; cursor: pointer;
}

/* Typo cards */
.rpe-typo-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.rpe-typo-card {
  padding: 8px; border: 2px solid #E5E7EB; background: #FFFFFF; border-radius: 8px;
  cursor: pointer; text-align: center;
  transition: border-color 120ms, transform 120ms;
}
.rpe-typo-card:hover { border-color: #94A3B8; }
.rpe-typo-card.rpe-typo-active { border-color: #1E293B; box-shadow: 0 0 0 2px rgba(30,58,95,0.12); }
.rpe-typo-sample { font-size: 26px; font-weight: 700; color: #111827; line-height: 1; }
.rpe-typo-label { font-size: 11px; color: #374151; margin-top: 4px; font-weight: 500; }
.rpe-typo-note { font-size: 10px; color: #9CA3AF; }

/* Sliders */
.rpe-slider-row { margin-top: 12px; }
.rpe-slider-head { display: flex; align-items: center; justify-content: space-between; }
.rpe-slider-value { font-size: 11px; color: #1E293B; font-weight: 600; font-family: ui-monospace, monospace; background: #F3F4F6; padding: 2px 6px; border-radius: 4px; }
.rpe-slider { width: 100%; -webkit-appearance: none; appearance: none; height: 4px; background: #E5E7EB; border-radius: 2px; margin-top: 6px; }
.rpe-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #1E293B; cursor: pointer; border: 2px solid #FFFFFF; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.rpe-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #1E293B; cursor: pointer; border: 2px solid #FFFFFF; }

/* Segmented controls */
.rpe-segmented {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px;
  background: #F3F4F6; border-radius: 8px; padding: 2px;
}
.rpe-segmented button {
  padding: 6px 4px; font-size: 11px; font-weight: 500;
  background: transparent; color: #6B7280; border: none; border-radius: 6px;
  cursor: pointer; transition: background 120ms, color 120ms;
}
.rpe-segmented button:hover { color: #111827; }
.rpe-segmented button.rpe-seg-active { background: #FFFFFF; color: #1E293B; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }

/* Checkboxes */
.rpe-checkbox {
  display: flex; align-items: center; gap: 8px; padding: 4px 0;
  font-size: 13px; color: #374151; cursor: pointer;
}
.rpe-checkbox input[type="checkbox"] { width: 16px; height: 16px; accent-color: #1E293B; cursor: pointer; }
.rpe-checkbox-big { padding: 8px 0; font-weight: 500; color: #111827; }

/* Blocks list */
.rpe-block-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.rpe-block-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 6px;
}
.rpe-block-row.rpe-block-dragging { opacity: 0.5; }
.rpe-block-handle { color: #9CA3AF; cursor: grab; font-size: 11px; }
.rpe-block-handle:active { cursor: grabbing; }
.rpe-block-row .rpe-checkbox { flex: 1; margin: 0; }
.rpe-block-actions { display: flex; gap: 2px; }
.rpe-mini-btn {
  width: 24px; height: 24px; border: 1px solid #E5E7EB; background: #FFFFFF;
  border-radius: 4px; color: #6B7280; cursor: pointer; font-size: 10px;
  display: grid; place-items: center;
}
.rpe-mini-btn:hover:not(:disabled) { background: #F3F4F6; color: #111827; }
.rpe-mini-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Drop zone (logo) */
.rpe-drop {
  border: 2px dashed #E5E7EB; border-radius: 8px; padding: 16px;
  background: #F9FAFB; cursor: pointer; text-align: center;
  transition: border-color 120ms, background 120ms;
}
.rpe-drop:hover, .rpe-drop-hover { border-color: #1E293B; background: #EEF2F7; }
.rpe-drop-placeholder { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #6B7280; font-size: 12px; }
.rpe-drop-placeholder i { font-size: 22px; color: #94A3B8; }
.rpe-logo-preview { max-width: 100%; max-height: 80px; object-fit: contain; }

/* Badge sous le logo : "Logo société (paramètres)" ou "Logo personnalisé" */
.rpe-logo-badge {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px; padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0;
}
.rpe-logo-badge i { font-size: 11px; }
.rpe-logo-badge-custom {
  background: #FEF3C7; color: #92400E; border-color: #FCD34D;
}
/* Bouton groupe pour Remplacer / Restaurer / Retirer */
.rpe-logo-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 8px;
}
.rpe-logo-actions .rpe-btn { font-size: 11.5px; padding: 4px 10px; }
.rpe-field-hint {
  font-size: 11px; font-weight: 400; color: #94A3B8;
  margin-left: 4px;
}

/* Mobile */
@media (max-width: 820px) {
  .rpe-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .rpe-sidebar { border-right: none; border-bottom: 1px solid #E5E7EB; max-height: 45vh; }
  .rpe-preview-frame iframe { max-width: 100%; height: calc(100vh - 100px); }
  .rpe-preset-grid { grid-template-columns: 1fr 1fr; }
  .rpe-header-right .rpe-btn:not(.rpe-btn-primary) { display: none; }
  .rpe-title-main { font-size: 14px; }
  .rpe-title-sub { display: none; }
}

/* Focus ring global pour accessibilité */
.rpe-overlay button:focus-visible,
.rpe-overlay input:focus-visible,
.rpe-overlay label:focus-visible { outline: 2px solid #1E293B; outline-offset: 2px; }

/* ==========================================================================
   Très petits écrans (<360px) — réduction discrète des tailles
   Ne s'applique qu'en dessous de 360px pour préserver le layout standard.
   ========================================================================== */
@media (max-width: 360px) {
  .kpi { font-size: 14px; }
  .topbar { padding: 8px; }
  .btn { font-size: 13px; }
  .topbar .logo,
  .topbar .brand,
  header .logo { font-size: 24px; }
  header .logo img,
  .topbar .logo img { height: 24px; }
}

/* ============================================================
   BREATHING ROOM — v3 (densité réduite)
   ============================================================
   Augmente paddings, gaps et hauteurs de ligne pour donner
   plus d'air au layout. Modifications scope=desktop (>768px) ;
   le mobile garde ses tailles compactes via mobile-app.css.
   ============================================================ */
@media (min-width: 769px) {
  /* Hauteur de ligne globale + un poil plus aérée */
  body { line-height: 1.6; }

  /* Conteneur principal : marges plus généreuses */
  .content { padding: var(--sp-10) var(--sp-10) var(--sp-16); }

  /* En-tête de page : plus d'espace sous le titre, plus d'écart titre/actions */
  .page-header {
    gap: var(--sp-8);
    margin-bottom: var(--sp-10);
    padding-bottom: var(--sp-6);
    border-bottom: 1px solid var(--ink-100);
  }
  .page-header p { margin-top: var(--sp-3); font-size: var(--fs-md); line-height: 1.55; }

  /* Cartes : intérieur plus respirant */
  .card-header { padding: var(--sp-6) var(--sp-8); }
  .card-body   { padding: var(--sp-8); }
  .card-body.tight   { padding: var(--sp-5); }
  .card-body.compact { padding: var(--sp-3); }
  .card-footer { padding: var(--sp-5) var(--sp-8); }

  /* KPI cards : valeur et trend mieux séparés */
  .kpi { padding: var(--sp-8) var(--sp-6); }
  .kpi-value { margin-top: var(--sp-3); }
  .kpi-trend { margin-top: var(--sp-4); }

  /* Grilles : gaps plus larges */
  .grid-kpi   { gap: var(--sp-5); }
  .grid-2     { gap: var(--sp-8); }
  .grid-3     { gap: var(--sp-8); }
  .grid-cards { gap: var(--sp-5); }

  /* Sections empilées dans une page */
  .content > .card + .card,
  .content > section + section,
  .content > .grid-kpi + *,
  .content > .grid-2 + *,
  .content > .grid-3 + *,
  .content > .grid-cards + * {
    margin-top: var(--sp-8);
  }

  /* Titres : un poil plus d'air en-dessous */
  .card-header h3 { line-height: 1.3; }
  h1, h2, h3 { letter-spacing: -0.025em; }

  /* Tableaux : lignes plus aérées */
  .table th,
  .table td { padding: 14px 18px; }
  .table th { font-size: var(--fs-xs); letter-spacing: 0.06em; }

  /* Boutons : taille standard un peu plus généreuse */
  .btn { padding: 0 var(--sp-5); height: 42px; }
  .btn-lg { padding: 0 var(--sp-6); height: 50px; }

  /* Form controls : champs plus aérés */
  .input { padding: 0 var(--sp-4); height: 44px; }
  .form-group { margin-bottom: var(--sp-5); }
  .form-group label { margin-bottom: var(--sp-2); display: inline-block; }

  /* Topbar : plus d'air horizontal */
  .topbar { padding: 0 var(--sp-8); }

  /* Chips/badges : padding visuel plus généreux */
  .chip { padding: 6px 14px; }
}

/* Variante large écran : encore un peu plus d'espace */
@media (min-width: 1280px) {
  .content { padding: var(--sp-12) var(--sp-12) var(--sp-20); }
  .grid-2, .grid-3 { gap: var(--sp-10); }
  .page-header { margin-bottom: var(--sp-12); }
}

/* ============================================================
   LIGHTER UI — v4 (palette plus claire)
   ============================================================
   Réduit la sensation "trop sombre" :
   - Sidebar passe en clair (blanc cassé + accents violets)
   - Textes principaux légèrement adoucis (moins de noir pur)
   - Fond app un poil plus clair
   ============================================================ */

/* — Fond app + textes adoucis — */
body {
  background: #FAFBFE;
  color: #353756;
}
h1, h2, h3, h4, h5, h6 { color: #1E2040; }

/* — Sidebar claire — */
.sidebar {
  background: #FFFFFF;
  color: var(--ink-700);
  border-right: 1px solid var(--ink-100);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}
/* L'.app-shell peint une bande gauche PLEINE HAUTEUR derrière la sidebar
   sticky (sinon, en scroll, la sidebar "s'arrête" au bas du viewport). En
   thème clair cette bande doit être BLANCHE comme la sidebar — avant elle
   restait sombre (#14141A/violet) → rupture : la sidebar ne descendait pas
   jusqu'en bas et le fond clair débordait. On met aussi la même ligne de
   séparation (ink-100) que le border-right de la sidebar, sur toute la hauteur. */
.app-shell {
  background:
    linear-gradient(to right,
      #FFFFFF 0,
      #FFFFFF calc(var(--sidebar-w) - 1px),
      var(--ink-100) calc(var(--sidebar-w) - 1px),
      var(--ink-100) var(--sidebar-w),
      var(--bg-app, #F8FAFC) var(--sidebar-w),
      var(--bg-app, #F8FAFC) 100%);
}
.sidebar-brand {
  border-bottom: 1px solid var(--ink-100);
}
.sidebar-brand-name { color: var(--ink-900); }
.sidebar-brand-sub  { color: var(--violet-600); }

.sidebar-search .input-group .input {
  background: var(--ink-50);
  border-color: var(--ink-100);
  color: var(--ink-800);
}
.sidebar-search .input-group .input::placeholder { color: var(--ink-400); }
.sidebar-search .input-group .input:focus {
  background: #FFFFFF;
  border-color: var(--violet-300);
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.12);
}
.sidebar-search .input-group-icon { color: var(--ink-400); }

.sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--ink-200);
}
.sidebar-section-title { color: var(--ink-400); }

.nav-item { color: var(--ink-600); }
.nav-item i { color: var(--ink-400); }
.nav-item:hover {
  background: var(--ink-50);
  color: var(--ink-900);
}
.nav-item:hover i { color: var(--violet-600); }
.nav-item.active {
  background: var(--violet-50);
  color: var(--violet-700);
  font-weight: var(--fw-semibold);
}
.nav-item.active i { color: var(--violet-600); }
.nav-item.active::before {
  background: var(--grad-brand);
  box-shadow: 0 0 12px rgba(15, 23, 42, 0.35);
}
.nav-item .nav-count {
  background: var(--ink-100);
  color: var(--ink-700);
}
.nav-item.active .nav-count {
  background: var(--violet-600);
  color: white;
}

.sidebar-footer { border-top: 1px solid var(--ink-100); }
.sidebar-user:hover { background: var(--ink-50); }
.sidebar-user-name { color: var(--ink-900); }
.sidebar-user-role { color: var(--ink-500); }
.sidebar-user i    { color: var(--ink-400); }

/* — Topbar : aligne sur le clair — */
.topbar {
  background: rgba(255, 255, 255, 0.85);
  border-bottom-color: var(--ink-100);
}

/* — Cards : ombre plus douce, plus aérien — */
.card {
  border-color: var(--ink-100);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.kpi {
  border-color: var(--ink-100);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

/* ===== Harmonisation typo avec le site Nessalys Group (écrans de connexion) ===== */
.auth-page { font-family: 'Inter', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; }
.auth-hero h1, .op-wordmark { font-family: 'Space Grotesk', 'Inter', sans-serif; }