/* ============================================================
   APIXEN AGENCY — Mon Espace Client
   core.css — Design system, variables, layout, composants
   ============================================================ */

/* ------------------------------------------------------------
   1. VARIABLES — Design tokens Apixen
   ------------------------------------------------------------ */
:root {
  /* Fonds */
  --me-bg:            #F9F4EB;
  --me-bg2:           #F2EAD9;
  --me-surface:       #FFFFFF;

  /* Bordures */
  --me-border:        #E8DEC8;
  --me-border2:       #D4C9B0;

  /* Texte */
  --me-text:          #2C2420;
  --me-text2:         #5C5040;
  --me-text3:         #A09278;

  /* Accent principal — Sunrise */
  --me-accent:        #d97757;
  --me-accent-light:  #FDF2E8;
  --me-accent-200:    #FAD8B0;
  --me-accent-dark:   #C4561A;

  /* Accent secondaire — Slate */
  --me-blue:          #3A7FA8;
  --me-blue-light:    #EBF3F8;
  --me-blue-dark:     #205A7C;

  /* Succès — Sage */
  --me-green:         #3A9648;
  --me-green-light:   #EBF5ED;
  --me-green-dark:    #206E2C;

  /* Danger */
  --me-red:           #C4561A;
  --me-red-light:     #FDF2E8;

  /* Warning */
  --me-yellow:        #d97757;
  --me-yellow-light:  #FDF2E8;

  /* Sidebar */
  --me-sidebar-bg:    #2C2420;
  --me-sidebar-w:     230px;

  /* Typographie */
  --me-sans:          'DM Sans', sans-serif;
  --me-serif:         'Playfair Display', serif;

  /* Rayons */
  --me-radius:        14px;
  --me-radius-sm:     8px;
  --me-radius-xs:     6px;
  --me-radius-pill:   100px;

  /* Ombres */
  --me-shadow:        0 1px 4px rgba(44,36,32,.07);
  --me-shadow-md:     0 4px 16px rgba(44,36,32,.10);
}

/* ------------------------------------------------------------
   2. RESET & BASE
   ------------------------------------------------------------ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  font-family:      var(--me-sans);
  font-size:        14px;
  color:            var(--me-text);
  background:       var(--me-bg);
  line-height:      1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: var(--me-sans);
  cursor: pointer;
  border: none;
  background: none;
}

input, textarea, select {
  font-family: var(--me-sans);
  font-size: 13px;
}

/* ------------------------------------------------------------
   3. LAYOUT PRINCIPAL
   ------------------------------------------------------------ */
.me-layout {
  display: grid;
  grid-template-columns: var(--me-sidebar-w) 1fr;
  min-height: 100vh;
}

.me-main {
  overflow-y: auto;
  padding: 28px 32px;
  max-width: 960px;
}

/* ------------------------------------------------------------
   4. SIDEBAR
   ------------------------------------------------------------ */
.me-sidebar {
  background:   var(--me-sidebar-bg);
  display:      flex;
  flex-direction: column;
  height:       100vh;
  position:     sticky;
  top:          0;
  overflow-y:   auto;
}

.me-sidebar-header {
  padding: 20px 18px 16px;
  border-bottom: 0.5px solid rgba(255,255,255,.07);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.me-logo-mark {
  width: 32px;
  height: 32px;
  background: var(--me-accent);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.me-logo-mark svg {
  width: 16px;
  height: 16px;
}

.me-logo-name {
  font-family: var(--me-serif);
  font-size: 15px;
  color: #F9F4EB;
  line-height: 1.1;
}

.me-logo-name span {
  color: var(--me-accent);
}

.me-logo-sub {
  font-size: 9px;
  color: var(--me-text3);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-top: 2px;
}

.me-sidebar-client {
  padding: 12px 18px 14px;
  border-bottom: 0.5px solid rgba(255,255,255,.07);
  flex-shrink: 0;
  background: rgba(255,255,255,.03);
}

.me-sidebar-client-name {
  font-size: 13px;
  font-weight: 500;
  color: #F9F4EB;
  margin-bottom: 3px;
  letter-spacing: -.01em;
}

.me-sidebar-client-offre {
  font-size: 10px;
  color: rgba(160,146,120,.7);
  letter-spacing: .04em;
}

.me-sidebar-nav {
  flex: 1;
  padding: 4px 0 12px;
  overflow-y: auto;
}

.me-nav-section {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--me-text3);
  padding: 10px 14px 3px;
}

.me-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 12px;
  color: #A09278;
  cursor: pointer;
  border-radius: 0 var(--me-radius-xs) var(--me-radius-xs) 0;
  margin: 1px 8px 1px 0;
  transition: background .15s, color .15s;
  user-select: none;
  border-left: 2px solid transparent;
}

.me-nav-item:hover {
  background: rgba(249,244,235,.06);
  color: #F9F4EB;
}

.me-nav-item.active {
  background: var(--me-accent-light);
  color: var(--me-accent);
  font-weight: 500;
  border-left-color: var(--me-accent);
  margin-left: 0;
  padding-left: 12px;
}

.me-nav-item.soon {
  opacity: .45;
  cursor: default;
  pointer-events: none;
}

.me-nav-item i {
  font-size: 15px;
  flex-shrink: 0;
}

.me-nav-badge {
  margin-left: auto;
  background: var(--me-red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--me-radius-pill);
  min-width: 18px;
  text-align: center;
}

.me-nav-soon {
  margin-left: auto;
  font-size: 9px;
  padding: 2px 7px;
  border-radius: var(--me-radius-pill);
  background: rgba(249,244,235,.07);
  color: var(--me-text3);
  border: 0.5px solid rgba(255,255,255,.08);
}

.me-nav-chevron {
  margin-left: auto;
  font-size: 12px;
  transition: transform .2s;
}

.me-nav-chevron.open {
  transform: rotate(90deg);
}

.me-nav-sub {
  display: none;
}

.me-nav-sub.open {
  display: block;
}

.me-nav-sub .me-nav-item {
  padding-left: 34px;
  font-size: 12px;
}

.me-nav-sub .me-nav-item.active {
  padding-left: 32px;
}

.me-sidebar-footer {
  padding: 12px 16px;
  border-top: 0.5px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}

.me-logout {
  font-size: 12px;
  color: var(--me-text3);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color .15s;
}

.me-logout:hover {
  color: #F9F4EB;
}

/* ------------------------------------------------------------
   5. COMPOSANTS — Cards
   ------------------------------------------------------------ */
.me-card {
  background: var(--me-surface);
  border: 0.5px solid var(--me-border);
  border-radius: var(--me-radius);
  padding: 18px;
}

.me-card + .me-card {
  margin-top: 12px;
}

.me-card-title {
  font-family: var(--me-serif);
  font-size: 15px;
  color: var(--me-text);
  margin-bottom: 14px;
}

.me-card-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--me-text3);
  margin-bottom: 10px;
}

/* ------------------------------------------------------------
   6. COMPOSANTS — Grilles de stats
   ------------------------------------------------------------ */
.me-stats {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.me-stats-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.me-stats-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.me-stats-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

.me-stat {
  background: var(--me-bg2);
  border-radius: var(--me-radius-sm);
  padding: 12px 14px;
}

.me-stat-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--me-text3);
  margin-bottom: 5px;
}

.me-stat-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--me-text);
}

.me-stat-value.ok    { color: var(--me-green); }
.me-stat-value.warn  { color: var(--me-yellow); }
.me-stat-value.err   { color: var(--me-red); }

/* ------------------------------------------------------------
   7. COMPOSANTS — Boutons
   ------------------------------------------------------------ */
.me-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: var(--me-radius-pill);
  font-family: var(--me-sans);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
  border: none;
  letter-spacing: .02em;
}

.me-btn:active { transform: scale(.98); }

.me-btn-primary {
  background: var(--me-accent);
  color: #fff;
}

.me-btn-primary:hover { opacity: .88; }

.me-btn-secondary {
  background: transparent;
  color: var(--me-text2);
  border: 1px solid var(--me-border2);
}

.me-btn-secondary:hover {
  background: var(--me-bg2);
}

.me-btn-sm {
  padding: 6px 12px;
  font-size: 11px;
}

/* ------------------------------------------------------------
   8. COMPOSANTS — Formulaires
   ------------------------------------------------------------ */
.me-field {
  margin-bottom: 14px;
}

.me-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--me-text3);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 5px;
}

.me-input {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--me-border);
  border-radius: var(--me-radius-sm);
  background: var(--me-surface);
  color: var(--me-text);
  font-size: 13px;
  outline: none;
  transition: border-color .15s;
}

.me-input:focus {
  border-color: var(--me-accent);
}

.me-textarea {
  resize: vertical;
  min-height: 80px;
}

/* ------------------------------------------------------------
   9. COMPOSANTS — Badges & Pills
   ------------------------------------------------------------ */
.me-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--me-radius-pill);
  font-size: 11px;
  font-weight: 500;
}

.me-badge-ok     { background: var(--me-green-light); color: var(--me-green-dark); }
.me-badge-warn   { background: var(--me-accent-light); color: var(--me-accent-dark); }
.me-badge-err    { background: var(--me-red-light); color: var(--me-red); }
.me-badge-info   { background: var(--me-blue-light); color: var(--me-blue-dark); }
.me-badge-soon   { background: var(--me-bg2); color: var(--me-text3); border: 0.5px solid var(--me-border2); }

/* ------------------------------------------------------------
   10. COMPOSANTS — Toast notifications
   ------------------------------------------------------------ */
#me-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.me-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--me-radius-sm);
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--me-shadow-md);
  animation: me-toast-in .25s ease;
  max-width: 320px;
}

.me-toast.ok   { background: var(--me-green); color: #fff; }
.me-toast.err  { background: var(--me-red); color: #fff; }
.me-toast.info { background: var(--me-sidebar-bg); color: #F9F4EB; }

@keyframes me-toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------
   11. COMPOSANTS — Panel header
   ------------------------------------------------------------ */
.me-panel-header {
  margin-bottom: 20px;
}

.me-panel-title {
  font-family: var(--me-serif);
  font-size: 22px;
  color: var(--me-text);
  line-height: 1.2;
  margin-bottom: 4px;
}

.me-panel-subtitle {
  font-size: 13px;
  color: var(--me-text3);
}

/* ------------------------------------------------------------
   12. COMPOSANTS — Divider
   ------------------------------------------------------------ */
.me-divider {
  height: 0.5px;
  background: var(--me-border);
  margin: 16px 0;
}

/* ------------------------------------------------------------
   13. COMPOSANTS — Loading skeleton
   ------------------------------------------------------------ */
.me-skeleton {
  background: linear-gradient(90deg, var(--me-bg2) 25%, var(--me-border) 50%, var(--me-bg2) 75%);
  background-size: 200% 100%;
  animation: me-skeleton 1.4s ease infinite;
  border-radius: var(--me-radius-xs);
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes me-skeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ------------------------------------------------------------
   14. UTILITAIRES
   ------------------------------------------------------------ */
.me-text-accent  { color: var(--me-accent); }
.me-text-muted   { color: var(--me-text3); }
.me-text-ok      { color: var(--me-green); }
.me-text-err     { color: var(--me-red); }
.me-text-serif   { font-family: var(--me-serif); }

.me-mt-sm  { margin-top: 8px; }
.me-mt     { margin-top: 14px; }
.me-mt-lg  { margin-top: 24px; }
.me-mb-sm  { margin-bottom: 8px; }
.me-mb     { margin-bottom: 14px; }
.me-mb-lg  { margin-bottom: 24px; }

.me-flex   { display: flex; align-items: center; }
.me-flex-between { display: flex; align-items: center; justify-content: space-between; }
.me-gap-sm { gap: 6px; }
.me-gap    { gap: 10px; }
.me-gap-lg { gap: 16px; }

/* ------------------------------------------------------------
   15. PAGE LOGIN
   ------------------------------------------------------------ */
.me-login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--me-bg);
  padding: 24px;
}

.me-login-box {
  background: var(--me-surface);
  border: 0.5px solid var(--me-border);
  border-radius: var(--me-radius);
  padding: 36px 32px;
  width: 100%;
  max-width: 380px;
  box-shadow: var(--me-shadow-md);
}

.me-login-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}

.me-login-title {
  font-family: var(--me-serif);
  font-size: 20px;
  color: var(--me-text);
  margin-bottom: 6px;
}

.me-login-sub {
  font-size: 13px;
  color: var(--me-text3);
  margin-bottom: 24px;
}

.me-login-error {
  background: var(--me-red-light);
  color: var(--me-red);
  border: 0.5px solid var(--me-accent-200);
  border-radius: var(--me-radius-sm);
  padding: 10px 13px;
  font-size: 12px;
  margin-bottom: 14px;
  display: none;
}

.me-login-error.visible {
  display: block;
}