/* ===== Plan Entreprise — Ultra Premium Minimalist SaaS Design ===== */

/* ---------- Animations ---------- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes peFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes progressLoad {
  from {
    width: 0;
  }
}

/* ---------- Variables & Base ---------- */
body.pe-canvas {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: #f7f8fa;
  color: #0f172a;
}

:root {
  --pe-bg: #f4f6f8;
  --pe-card: #ffffff;
  --pe-ink: #0f172a;
  --pe-ink-soft: #334155;
  --pe-muted: #64748b;
  --pe-faint: #94a3b8;
  --pe-border: #e5e7eb;
  --pe-border-soft: #eef0f2;
  --pe-line: rgba(15, 23, 42, 0.08);
  --pe-line-soft: rgba(15, 23, 42, 0.05);

  --pe-primary: #4f46e5;
  --pe-primary-soft: #eef2ff;
  --pe-primary-glow: rgba(79, 70, 229, 0.14);

  --pe-green: #10b981;
  --pe-orange: #f59e0b;
  --pe-blue: #3b82f6;
  --pe-red: #ef4444;

  /* Flat SaaS shadows (light, subtle elevation) */
  --pe-nm-flat: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --pe-nm-flat-hover: 0 6px 20px rgba(15, 23, 42, 0.10);
  --pe-nm-inset: inset 0 0 0 1px var(--pe-border);
  --pe-nm-inset-soft: inset 0 0 0 1px var(--pe-border-soft);
  --pe-nm-flat-sm: 0 1px 2px rgba(15, 23, 42, 0.05);

  /* Neumorphic Shadows (Dark Sidebar) */
  --pe-sb-bg: #121824;
  --pe-sb-nm-flat: 8px 8px 16px #070a10, -8px -8px 16px #1d2639;
  --pe-sb-nm-inset: inset 6px 6px 12px #070a10, inset -6px -6px 12px #1d2639;
  --pe-sb-nm-flat-sm: 4px 4px 8px #070a10, -4px -4px 8px #1d2639;
  --pe-sb-nm-inset-sm: inset 4px 4px 8px #070a10, inset -4px -4px 8px #1d2639;

  --pe-r: 24px;
  --pe-r-sm: 16px;
}

.pe-app {
  max-width: 1480px;
  padding: 20px 20px 20px 360px;
  font-family: "Cairo", system-ui, -apple-system, sans-serif !important;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.pe-app h1,
.pe-app h2,
.pe-app h3,
.pe-app h4,
.pe-app h5,
.pe-app h6,
.pe-app p,
.pe-app a,
.pe-app span:not([class*="fa-"]),
.pe-app div,
.pe-app button,
.pe-app input,
.pe-app textarea,
.pe-app select,
.pe-app label,
.pe-app legend,
.pe-app strong,
.pe-app em,
.pe-app ul,
.pe-app li {
  font-family: "Cairo", system-ui, -apple-system, sans-serif !important;
}

@media(max-width:760px) {
  .pe-app {
    padding: 24px 16px;
  }

  .pe-tabs-wrapper {
    top: 24px;
  }

  .admin-bar .pe-tabs-wrapper {
    top: 70px;
    /* 46px barre admin mobile + 24px padding */
  }
}

.pe-app * {
  box-sizing: border-box;
}