/* ═══════════════════════════════════════════════════════════════
   ITATA — Design System v4
   Style: Editorial Dark · inspiré Aetherfield × Social Feed
   Palette: Orange #FF7A00 · Noir #08090E · Editorial Inter
═══════════════════════════════════════════════════════════════ */

/* ─── VARIABLES ───────────────────────────────────────────── */
:root {
  /* Fonds */
  --bg:        #08090E;
  --surface:   #0C0E16;
  --card:      #0F1118;
  --raised:    #141720;

  /* Bordures minimalistes */
  --border:    rgba(255,255,255,0.07);
  --border-md: rgba(255,255,255,0.11);
  --border-hi: rgba(255,122,0,0.22);

  /* Orange */
  --orange:    #FF7A00;
  --orange-lo: rgba(255,122,0,0.10);
  --orange-hi: rgba(255,122,0,0.20);

  /* Couleurs sémantiques — utilisées dans les badges, KPI, actions */
  --blue:      #3B82F6;
  --blue-lo:   rgba(59,130,246,0.10);
  --blue-hi:   rgba(59,130,246,0.20);
  --green:     #22C55E;
  --green-lo:  rgba(34,197,94,0.10);
  --green-hi:  rgba(34,197,94,0.20);
  --purple:    #8B5CF6;
  --purple-lo: rgba(139,92,246,0.10);
  --purple-hi: rgba(139,92,246,0.20);
  --red:       #EF4444;
  --red-lo:    rgba(239,68,68,0.10);
  --red-hi:    rgba(239,68,68,0.20);
  --amber:     #F59E0B;
  --amber-lo:  rgba(245,158,11,0.10);
  --amber-hi:  rgba(245,158,11,0.20);
  --teal:      #14B8A6;
  --teal-lo:   rgba(20,184,166,0.10);

  /* Texte */
  --text:      #ECEEF4;
  --text-2:    #8A8FA8;
  --text-3:    #64748B;  /* ratio 5.2:1 sur fond --bg (WCAG AA ✓) */

  /* Mono accent (labels, numéros) */
  --mono: 'SF Mono', 'Fira Code', 'Courier New', monospace;

  /* Layout */
  --nav-w:    248px;
  --panel-w:  288px;
  --feed-max: 700px;

  /* Radii */
  --r:    10px;
  --r-sm: 6px;
  --r-xs: 4px;
  --r-pill: 999px;

  --t: 0.16s ease;

  /* ─── Aliases de compatibilité (anciens noms) ──────────── */
  --ep-orange:       #FF7A00;
  --ep-orange-dark:  #E06600;
  --ep-orange-glow:  rgba(255,122,0,0.35);
  --ep-orange-50:    rgba(255,122,0,0.06);
  --ep-orange-100:   rgba(255,122,0,0.10);
  --ep-orange-200:   rgba(255,122,0,0.20);
  --ep-orange-deep:  #E06600;
  --ep-dark:         #08090E;
  --ep-dark-2:       #0C0E16;
  --ep-dark-3:       #0F1118;
  --ep-slate:        #8A8FA8;
  --ep-slate-light:  #5A607A;
  --ep-bg:           #08090E;
  --ep-border:       rgba(255,255,255,0.07);
  --ep-radius:       10px;
  --ep-radius-xl:    16px;
  --ep-transition:   0.16s ease;
}

/* ─── LIGHT MODE ──────────────────────────────────────────── */
html.light-mode {
  --bg:        #F1F3F8;
  --surface:   #FFFFFF;
  --card:      #FFFFFF;
  --raised:    #F8FAFC;
  --border:    rgba(0,0,0,0.09);
  --border-md: rgba(0,0,0,0.13);
  --border-hi: rgba(255,122,0,0.28);
  --text:      #0F172A;
  --text-2:    #475569;
  --text-3:    #64748B;  /* ratio 4.6:1 sur fond --bg light (WCAG AA ✓) */
  --orange-lo: rgba(255,122,0,0.08);
  --ep-bg:     #F1F3F8;
  --ep-dark:   #F1F3F8;
  --ep-dark-2: #FFFFFF;
  --ep-dark-3: #FFFFFF;
  --ep-slate:  #475569;
  --ep-border: rgba(0,0,0,0.09);
}
html.light-mode body { background: var(--bg); color: var(--text); }

/* ─── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* ─── ACCESSIBILITÉ ───────────────────────────────────────── */
/* focus-visible : anneau visible au clavier, invisible à la souris */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Désactiver les animations pour les utilisateurs sensibles */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .ep-spinner { animation: none !important; border-top-color: var(--orange); }
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; font-family: inherit; }

/* Scrollbar */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-md); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--orange); }


/* ════════════════════════════════════════════════════════════
   LAYOUT 3 COLONNES
════════════════════════════════════════════════════════════ */

.ep-app { display: flex; min-height: 100vh; }

/* ── Navigation gauche ───────────────────────────────────── */
.ep-nav {
  width: var(--nav-w);
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  z-index: 200;
  overflow-y: auto;
  overflow-x: hidden;
  /* scrollbar caché par défaut, visible au survol */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.ep-nav:hover {
  scrollbar-color: rgba(255,255,255,0.12) transparent;
}
.ep-nav::-webkit-scrollbar { width: 3px; }
.ep-nav::-webkit-scrollbar-track { background: transparent; }
.ep-nav::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; transition: background 0.2s; }
.ep-nav:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); }

/* Logo */
.ep-nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 22px 20px 18px;
  flex-shrink: 0;
}

.ep-nav-logo-icon {
  width: 34px; height: 34px;
  background: linear-gradient(135deg, #FF7A00, #FF4500);
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 15px; flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(255,122,0,0.35), 0 0 0 1px rgba(255,122,0,0.2);
}

/* Logo officiel ITATA (image) — remplace l'ancien badge FA dans l'en-tête/drawer */
.ep-nav-logo-img {
  width: 34px; height: 34px;
  border-radius: 9px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

.ep-nav-logo-text {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text);
}
.ep-nav-logo-text span { color: var(--orange); }

/* User card */
.ep-nav-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 14px;
  flex-shrink: 0;
}

.ep-nav-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--orange);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff;
  flex-shrink: 0; text-transform: uppercase;
  letter-spacing: 0.5px;
  overflow: hidden;
}
.ep-nav-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ep-nav-user-name {
  font-size: 12.5px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--text);
}
.ep-nav-user-role {
  font-size: 10px;
  font-family: var(--mono);
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-top: 1px;
}

/* Nav corps */
.ep-nav-body {
  flex: 1;
  padding: 10px 10px;
  display: flex; flex-direction: column; gap: 1px;
  overflow-y: auto;
}

/* Section label (style Aetherfield numéroté) */
.ep-nav-section {
  font-size: 9.5px;
  font-family: var(--mono);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-3);
  padding: 14px 10px 5px;
}

.ep-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  transition: all var(--t);
}
.ep-nav-link i {
  width: 16px; text-align: center; font-size: 13px;
  color: var(--text-3); transition: color var(--t); flex-shrink: 0;
}
.ep-nav-link:hover { background: rgba(255,255,255,0.04); color: var(--text); }
.ep-nav-link:hover i { color: var(--text-2); }
.ep-nav-link.active {
  background: linear-gradient(90deg, rgba(255,122,0,0.14) 0%, rgba(255,122,0,0.04) 100%);
  color: var(--orange); font-weight: 700;
  border-left: 2px solid var(--orange);
  padding-left: 10px; /* compense la bordure */
  box-shadow: inset 0 0 0 0 transparent;
}
.ep-nav-link.active i { color: var(--orange); }
.ep-nav-link.danger { color: #E35D5D; }
.ep-nav-link.danger i { color: #E35D5D; }
.ep-nav-link.danger:hover { background: rgba(227,93,93,0.08); }

.ep-nav-badge {
  margin-left: auto;
  background: var(--orange);
  color: #fff;
  font-size: 9px; font-weight: 800;
  min-width: 17px; height: 17px;
  border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  font-family: var(--mono);
}

/* Groupes collapsibles */
.ep-nav-group-toggle {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all var(--t); user-select: none;
}
.ep-nav-group-toggle:hover { background: rgba(255,255,255,0.04); color: var(--text); }
.ep-nav-group-toggle .main { width: 16px; text-align: center; font-size: 13px; color: var(--text-3); }
.ep-nav-group-toggle .chevron {
  margin-left: auto; font-size: 9px;
  transition: transform var(--t); color: var(--text-3);
}
.ep-nav-group.open .chevron { transform: rotate(90deg); }

.ep-nav-group-body { display: none; padding-left: 16px; padding-top: 1px; }
.ep-nav-group.open .ep-nav-group-body { display: flex; flex-direction: column; gap: 1px; }

.ep-nav-sub-link {
  display: flex; align-items: center; gap: 8px;
  padding: 6.5px 12px;
  border-radius: var(--r-sm);
  color: var(--text-3); font-size: 12px; font-weight: 500;
  transition: all var(--t);
}
.ep-nav-sub-link i { width: 13px; text-align: center; font-size: 11px; }
.ep-nav-sub-link:hover { color: var(--text-2); background: rgba(255,255,255,0.03); }
.ep-nav-sub-link.active { color: var(--orange); }

.ep-nav-footer {
  padding: 8px 10px 16px;
  border-top: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0;
}

/* ── Zone principale ─────────────────────────────────────── */
.ep-main {
  margin-left: var(--nav-w);
  margin-right: 0;
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  transition: margin-right 0.30s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Feed central */
.ep-feed {
  flex: 1;
  min-width: 0;
  max-width: var(--feed-max);
  min-height: 100vh;
  padding-top: 24px;
  padding-bottom: 32px;
}

/* Le feed de posts a son propre sticky header */
body.page-feed .ep-feed {
  padding-top: 24px;
}

/* Wrapper centré commun à toutes les pages non-feed */
/* padding-top:0 car ep-feed fournit déjà 24px en haut */
.ep-pg-wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 16px 32px;
}

.ep-feed-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(8,9,14,0.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  padding: 0 24px;
  height: 52px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}

.ep-feed-title {
  font-size: 13px; font-weight: 700; letter-spacing: -0.2px;
}

/* Panel droit */
.ep-panel {
  position: fixed; top: 52px; right: 0;
  width: var(--panel-w);
  height: calc(100vh - 52px);
  overflow-y: auto;
  background: var(--bg);
  z-index: 150;
  display: flex; flex-direction: column; gap: 14px;
  padding: 20px 16px 20px 20px;
  /* Hidden by default — JS/CSS override per page type */
  transform: translateX(calc(100% + 8px));
  pointer-events: none;
  transition: transform 0.30s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.30s ease;
}

.ep-panel-widget {
  background: var(--card);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.ep-panel-widget-head {
  padding: 10px 14px;
  font-size: 9.5px;
  font-family: var(--mono);
  font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--text-3);
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.ep-panel-widget-body { padding: 4px 0; }

.ep-panel-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  color: var(--text-2); font-size: 12.5px;
  transition: all var(--t);
}
.ep-panel-link:hover { background: rgba(255,255,255,0.03); color: var(--text); }
.ep-panel-link i { width: 14px; text-align: center; color: var(--text-3); font-size: 12px; }

.ep-panel-badge {
  margin-left: auto;
  background: var(--orange);
  color: #fff;
  font-size: .6rem;
  font-weight: 800;
  padding: .15rem .45rem;
  border-radius: 100px;
  min-width: 18px;
  text-align: center;
  font-family: var(--mono);
  flex-shrink: 0;
}

.ep-panel-user {
  padding: 20px 14px 16px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 6px;
}

.ep-panel-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--orange);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; color: #fff;
  text-transform: uppercase; letter-spacing: 0.5px;
  border: 2px solid rgba(255,122,0,0.2);
  margin-bottom: 4px;
}

.ep-panel-name { font-size: 13px; font-weight: 700; color: var(--text); }
.ep-panel-role {
  font-size: 9.5px; font-family: var(--mono);
  color: var(--orange); text-transform: uppercase; letter-spacing: 0.8px;
}

.ep-panel-notif {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background var(--t);
}
.ep-panel-notif:last-child { border-bottom: none; }
.ep-panel-notif:hover { background: rgba(255,255,255,0.02); }

.ep-panel-notif-dot {
  width: 5px; height: 5px;
  border-radius: 50%; background: var(--orange);
  flex-shrink: 0; margin-top: 7px;
}
.ep-panel-notif-text { font-size: 11.5px; color: var(--text-2); line-height: 1.5; }
.ep-panel-notif-time {
  font-size: 10px; font-family: var(--mono);
  color: var(--text-3); margin-top: 2px;
}

/* Online friends panel */
.ep-panel-friend {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  color: var(--text-2); font-size: 12.5px;
  text-decoration: none;
  transition: background var(--t);
}
.ep-panel-friend:hover { background: rgba(255,255,255,0.03); color: var(--text); }

.ep-panel-friend-av {
  position: relative;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--orange);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff;
  flex-shrink: 0;
  text-transform: uppercase;
}
.ep-panel-friend-dot {
  position: absolute; bottom: -1px; right: -1px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #3b82f6;
  border: 2px solid var(--surface);
}
.ep-panel-friend-dot.offline { background: var(--text-3); }

.ep-panel-friend-info { flex: 1; min-width: 0; }
.ep-panel-friend-name {
  font-size: 12px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ep-panel-friend-status {
  font-size: 10.5px; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ep-panel-friend-status.online { color: #3b82f6; }

/* Online dot on sidebar avatars (messaging) */
.msg-sidebar-av-wrap {
  position: relative; flex-shrink: 0;
}
.msg-sidebar-online-dot {
  position: absolute; bottom: 0; right: 0;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #3b82f6;
  border: 2px solid var(--bg);
}


/* ════════════════════════════════════════════════════════════
   WELCOME — style Aetherfield
════════════════════════════════════════════════════════════ */

.ep-welcome {
  padding: 32px 28px 28px;
  position: relative;
  overflow: hidden;
}

/* Trait orange vertical gauche */
.ep-welcome::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--orange);
}

.ep-welcome-eyebrow {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px;
  font-family: var(--mono);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--orange);
  margin-bottom: 10px;
}
.ep-welcome-eyebrow::before {
  content: '';
  display: inline-block;
  width: 16px; height: 1px;
  background: var(--orange);
}

.ep-welcome-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.15;
  color: var(--text);
}

.ep-welcome-sub {
  font-size: 13px; color: var(--text-2); margin-top: 8px;
  font-family: var(--mono); letter-spacing: -0.1px;
}


/* ════════════════════════════════════════════════════════════
   SECTION HEADER — style numéroté Aetherfield
════════════════════════════════════════════════════════════ */

.ep-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 28px 14px;
}

.ep-section-label {
  display: flex; align-items: center; gap: 10px;
}

.ep-section-num {
  font-size: 9px;
  font-family: var(--mono);
  font-weight: 800;
  color: var(--orange);
  letter-spacing: 0.5px;
  background: var(--orange-lo);
  border: 1px solid rgba(255,122,0,0.18);
  border-radius: var(--r-pill);
  padding: 3px 9px;
  line-height: 1.4;
}

.ep-section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.ep-divider-v {
  width: 1px; height: 12px; background: var(--border-md); opacity: 0.6;
}


/* ════════════════════════════════════════════════════════════
   KPI GRID
════════════════════════════════════════════════════════════ */

.ep-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1px;
  background: rgba(255,255,255,0.04);
  border-radius: 0 0 var(--r) var(--r);
  overflow: hidden;
}

.ep-kpi-item {
  padding: 28px 26px 24px;
  background: var(--card);
  display: flex; flex-direction: column; gap: 6px;
  transition: background 0.24s ease, box-shadow 0.28s ease, transform 0.24s ease;
  position: relative;
  overflow: hidden;
}
/* Ligne d'accent colorée en haut — TOUJOURS VISIBLE */
.ep-kpi-item::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--orange);
  transform: scaleX(1);
  transform-origin: left;
  transition: height 0.22s cubic-bezier(0.4,0,0.2,1);
}
.ep-kpi-item:hover {
  transform: translateY(-2px);
}
.ep-kpi-item:hover::before { height: 4px; }

/* Variantes de couleur de la ligne d'accent */
.ep-kpi-item--blue::before   { background: var(--blue);   }
.ep-kpi-item--green::before  { background: var(--green);  }
.ep-kpi-item--purple::before { background: var(--purple); }
.ep-kpi-item--orange::before { background: var(--orange); }
.ep-kpi-item--red::before    { background: var(--red);    }
.ep-kpi-item--amber::before  { background: var(--amber);  }
.ep-kpi-item--teal::before   { background: var(--teal);   }

/* Gradient de fond subtil par variante — institutionnel */
.ep-kpi-item--blue   { background: linear-gradient(145deg, rgba(59,130,246,0.07)  0%, var(--card) 55%); }
.ep-kpi-item--green  { background: linear-gradient(145deg, rgba(34,197,94,0.07)   0%, var(--card) 55%); }
.ep-kpi-item--purple { background: linear-gradient(145deg, rgba(139,92,246,0.07)  0%, var(--card) 55%); }
.ep-kpi-item--orange { background: linear-gradient(145deg, rgba(255,122,0,0.07)   0%, var(--card) 55%); }
.ep-kpi-item--red    { background: linear-gradient(145deg, rgba(239,68,68,0.07)   0%, var(--card) 55%); }
.ep-kpi-item--amber  { background: linear-gradient(145deg, rgba(245,158,11,0.07)  0%, var(--card) 55%); }
.ep-kpi-item--teal   { background: linear-gradient(145deg, rgba(20,184,166,0.07)  0%, var(--card) 55%); }

/* Glow coloré au hover */
.ep-kpi-item--blue:hover   { box-shadow: 0 0 0 1px rgba(59,130,246,0.18),  0 12px 40px rgba(59,130,246,0.10);  }
.ep-kpi-item--green:hover  { box-shadow: 0 0 0 1px rgba(34,197,94,0.18),   0 12px 40px rgba(34,197,94,0.10);   }
.ep-kpi-item--purple:hover { box-shadow: 0 0 0 1px rgba(139,92,246,0.18),  0 12px 40px rgba(139,92,246,0.10);  }
.ep-kpi-item--orange:hover { box-shadow: 0 0 0 1px rgba(255,122,0,0.18),   0 12px 40px rgba(255,122,0,0.10);   }
.ep-kpi-item--red:hover    { box-shadow: 0 0 0 1px rgba(239,68,68,0.18),   0 12px 40px rgba(239,68,68,0.10);   }
.ep-kpi-item--amber:hover  { box-shadow: 0 0 0 1px rgba(245,158,11,0.18),  0 12px 40px rgba(245,158,11,0.10);  }
.ep-kpi-item--teal:hover   { box-shadow: 0 0 0 1px rgba(20,184,166,0.18),  0 12px 40px rgba(20,184,166,0.10);  }

/* Numéro en coin style Aetherfield */
.ep-kpi-num {
  font-size: 9px;
  font-family: var(--mono);
  font-weight: 700;
  color: var(--text-3);
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  opacity: 0.6;
}

.ep-kpi-icon {
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  background: var(--orange-lo);
  border: 1px solid rgba(255,122,0,0.14);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; color: var(--orange); flex-shrink: 0;
  margin-bottom: 6px;
  transition: transform 0.20s ease, background 0.20s ease;
}
.ep-kpi-item:hover .ep-kpi-icon {
  transform: scale(1.08);
  background: rgba(255,122,0,0.15);
}

/* Couleurs d'icônes par variante */
.ep-kpi-item--blue   .ep-kpi-icon { background: var(--blue-lo);   color: var(--blue);   border-color: rgba(59,130,246,0.16);  }
.ep-kpi-item--green  .ep-kpi-icon { background: var(--green-lo);  color: var(--green);  border-color: rgba(34,197,94,0.16);   }
.ep-kpi-item--purple .ep-kpi-icon { background: var(--purple-lo); color: var(--purple); border-color: rgba(139,92,246,0.16);  }
.ep-kpi-item--orange .ep-kpi-icon { background: var(--orange-lo); color: var(--orange); border-color: rgba(255,122,0,0.16);   }
.ep-kpi-item--red    .ep-kpi-icon { background: var(--red-lo);    color: var(--red);    border-color: rgba(239,68,68,0.16);   }
.ep-kpi-item--amber  .ep-kpi-icon { background: var(--amber-lo);  color: var(--amber);  border-color: rgba(245,158,11,0.16);  }
.ep-kpi-item--teal   .ep-kpi-icon { background: var(--teal-lo);   color: var(--teal);   border-color: rgba(20,184,166,0.16);  }

.ep-kpi-val {
  font-size: 52px;
  font-weight: 900;
  letter-spacing: -3px;
  color: var(--text);
  line-height: 1;
  font-feature-settings: 'tnum';
}

/* Chiffre coloré par variante — impact institutionnel */
.ep-kpi-item--blue   .ep-kpi-val { color: var(--blue);   }
.ep-kpi-item--green  .ep-kpi-val { color: var(--green);  }
.ep-kpi-item--purple .ep-kpi-val { color: var(--purple); }
.ep-kpi-item--orange .ep-kpi-val { color: var(--orange); }
.ep-kpi-item--red    .ep-kpi-val { color: var(--red);    }
.ep-kpi-item--amber  .ep-kpi-val { color: var(--amber);  }
.ep-kpi-item--teal   .ep-kpi-val { color: var(--teal);   }

.ep-kpi-label {
  font-size: 10px;
  font-family: var(--mono);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-top: 4px;
  font-weight: 700;
}

.ep-kpi-trend { font-size: 11px; font-weight: 600; font-family: var(--mono); }
.ep-kpi-trend.up   { color: #22C55E; }
.ep-kpi-trend.down { color: #EF4444; }


/* ════════════════════════════════════════════════════════════
   ACTIONS — grille style Aetherfield
════════════════════════════════════════════════════════════ */

.ep-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1px;
  background: rgba(255,255,255,0.04);
  overflow: hidden;
}

.ep-action-item {
  display: flex; flex-direction: column;
  align-items: flex-start; gap: 12px;
  padding: 24px 22px 22px;
  background: var(--card);
  color: var(--text-2);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: background 0.22s ease, color 0.22s ease, box-shadow 0.28s ease, transform 0.22s ease;
  text-decoration: none; position: relative; overflow: hidden;
}
/* Flèche top-right */
.ep-action-item::after {
  content: '↗';
  position: absolute; top: 14px; right: 14px;
  font-size: 12px; color: var(--text-3);
  transition: transform 0.20s ease, opacity 0.20s ease, color 0.20s ease;
  opacity: 0;
  transform: translate(-4px, 4px);
}
/* Trait de couleur en bas à gauche (barre de progression visuelle) */
.ep-action-item::before {
  content: '';
  position: absolute; bottom: 0; left: 0;
  width: 3px; height: 0;
  background: var(--orange);
  transition: height 0.24s cubic-bezier(0.4,0,0.2,1);
  border-radius: 0 2px 0 0;
}
.ep-action-item:hover {
  background: var(--raised);
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 8px 28px rgba(0,0,0,0.28);
  transform: translateY(-1px);
}
.ep-action-item:hover::after {
  opacity: 1;
  color: var(--orange);
  transform: translate(0, 0);
}
.ep-action-item:hover::before { height: 100%; }

/* Variantes couleur de la barre */
.ep-action-item--blue::before   { background: var(--blue);   }
.ep-action-item--green::before  { background: var(--green);  }
.ep-action-item--purple::before { background: var(--purple); }
.ep-action-item--orange::before { background: var(--orange); }
.ep-action-item--red::before    { background: var(--red);    }
.ep-action-item--amber::before  { background: var(--amber);  }
.ep-action-item--teal::before   { background: var(--teal);   }

.ep-action-item-icon {
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; color: var(--text-2);
  transition: color 0.20s ease, background 0.20s ease, border-color 0.20s ease, transform 0.20s ease;
  background: var(--raised);
}
.ep-action-item:hover .ep-action-item-icon {
  border-color: var(--border-hi);
  color: var(--orange);
  background: var(--orange-lo);
  transform: scale(1.08);
}

/* Couleurs d'icônes par variante */
.ep-action-item--blue:hover   .ep-action-item-icon { color: var(--blue);   background: var(--blue-lo);   border-color: rgba(59,130,246,0.22);  }
.ep-action-item--green:hover  .ep-action-item-icon { color: var(--green);  background: var(--green-lo);  border-color: rgba(34,197,94,0.22);   }
.ep-action-item--purple:hover .ep-action-item-icon { color: var(--purple); background: var(--purple-lo); border-color: rgba(139,92,246,0.22);  }
.ep-action-item--orange:hover .ep-action-item-icon { color: var(--orange); background: var(--orange-lo); border-color: rgba(255,122,0,0.22);   }
.ep-action-item--red:hover    .ep-action-item-icon { color: var(--red);    background: var(--red-lo);    border-color: rgba(239,68,68,0.22);   }
.ep-action-item--amber:hover  .ep-action-item-icon { color: var(--amber);  background: var(--amber-lo);  border-color: rgba(245,158,11,0.22);  }
.ep-action-item--teal:hover   .ep-action-item-icon { color: var(--teal);   background: var(--teal-lo);   border-color: rgba(20,184,166,0.22);   }

.ep-action-item-label { font-size: 13px; font-weight: 700; color: inherit; letter-spacing: -0.2px; }
.ep-action-item-sub { font-size: 10.5px; color: var(--text-3); font-family: var(--mono); margin-top: -6px; line-height: 1.4; }


/* ════════════════════════════════════════════════════════════
   ACTIVITÉ FEED
════════════════════════════════════════════════════════════ */

.ep-activity {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background var(--t);
}
.ep-activity:last-child { border-bottom: none; }
.ep-activity:hover { background: rgba(255,255,255,0.012); }

.ep-activity-av {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--orange);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #fff;
  flex-shrink: 0; text-transform: uppercase;
}
.ep-activity-av.icon {
  background: var(--raised); border: 1px solid var(--border-md);
  color: var(--orange); font-size: 14px;
}

.ep-activity-body { flex: 1; min-width: 0; }
.ep-activity-text { font-size: 13px; line-height: 1.55; color: var(--text); }
.ep-activity-text strong { font-weight: 700; }
.ep-activity-time {
  font-size: 10px; font-family: var(--mono);
  color: var(--text-3); margin-top: 4px;
}


/* ════════════════════════════════════════════════════════════
   CARDS
════════════════════════════════════════════════════════════ */

.ep-card {
  background: var(--card);
  border-radius: var(--r);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.32);
  transition: box-shadow 0.28s ease, border-color 0.28s ease, transform 0.28s ease;
}
.ep-card:hover {
  box-shadow: 0 10px 36px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.07);
  border-color: var(--border-md);
  transform: translateY(-2px);
}

.ep-card-head {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.ep-card-head-title {
  font-size: 11px; font-weight: 700;
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 1px;
  color: var(--text-2);
}
.ep-card-body { padding: 20px; }
.ep-card-footer { padding: 12px 20px; border-top: 1px solid var(--border); }


/* ════════════════════════════════════════════════════════════
   BOUTONS
════════════════════════════════════════════════════════════ */

.ep-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border-radius: var(--r-sm);
  font-size: 12.5px; font-weight: 700;
  cursor: pointer; transition: all var(--t);
  border: none; text-decoration: none; white-space: nowrap;
  font-family: inherit; letter-spacing: -0.1px;
}

.ep-btn-primary {
  background: var(--orange); color: #fff;
}
.ep-btn-primary:hover { background: #ff8c1a; color: #fff; }

.ep-btn-ghost {
  background: transparent; color: var(--text-2);
  border: 1px solid var(--border-md);
}
.ep-btn-ghost:hover { border-color: var(--border-hi); color: var(--text); background: var(--raised); }

.ep-btn-danger {
  background: rgba(227,93,93,0.10); color: #E35D5D;
  border: 1px solid rgba(227,93,93,0.18);
}
.ep-btn-danger:hover { background: rgba(227,93,93,0.18); }

.ep-btn-sm { padding: 4px 10px; font-size: 11.5px; }
.ep-btn-lg { padding: 10px 22px; font-size: 14px; }

/* État de chargement sur les boutons */
.ep-btn.ep-loading {
  pointer-events: none;
  opacity: .7;
  position: relative;
}
.ep-btn.ep-loading > *:not(.ep-spin) { visibility: hidden; }
.ep-btn.ep-loading::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: ep-spin .6s linear infinite;
}

/* Spinner standalone */
.ep-spinner {
  display: inline-block;
  width: 20px; height: 20px;
  border: 2px solid var(--border-md);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: ep-spin .6s linear infinite;
}
.ep-spinner-lg { width: 32px; height: 32px; border-width: 3px; }

@keyframes ep-spin { to { transform: rotate(360deg); } }

/* Overlay de chargement pleine page */
#ep-page-loader {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(8,9,14,.6);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
#ep-page-loader.active { opacity: 1; pointer-events: all; }
#ep-page-loader .ep-loader-box {
  background: var(--card);
  border: 1px solid var(--border-md);
  border-radius: var(--r);
  padding: 28px 36px;
  text-align: center;
  min-width: 180px;
}
#ep-page-loader .ep-loader-label {
  color: var(--text-2); font-size: 13px; margin-top: 12px;
}


/* ════════════════════════════════════════════════════════════
   BADGES
════════════════════════════════════════════════════════════ */

.ep-badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: var(--r-pill);
  font-size: 10px; font-weight: 700; font-family: var(--mono);
  text-transform: uppercase; letter-spacing: 0.5px;
}

.ep-badge-orange { background: var(--orange-lo); color: var(--orange); }
.ep-badge-green  { background: rgba(61,214,140,0.12); color: #3DD68C; }
.ep-badge-red    { background: rgba(227,93,93,0.12); color: #E35D5D; }
.ep-badge-blue   { background: rgba(99,152,255,0.12); color: #6398FF; }
.ep-badge-amber  { background: rgba(245,158,11,0.12); color: #F59E0B; }
.ep-badge-purple { background: rgba(139,92,246,0.12); color: #8B5CF6; }
.ep-badge-gray   { background: rgba(255,255,255,0.05); color: var(--text-3); }


/* ════════════════════════════════════════════════════════════
   TABLEAUX
════════════════════════════════════════════════════════════ */

.ep-table-wrap { overflow-x: auto; }
.ep-table { width: 100%; border-collapse: collapse; }

.ep-table th {
  padding: 10px 20px;
  text-align: left;
  font-size: 9.5px; font-family: var(--mono);
  font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  color: var(--text-3);
  background: var(--surface);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  white-space: nowrap;
}

.ep-table td {
  padding: 13px 20px;
  font-size: 13px; color: var(--text);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  vertical-align: middle;
}

.ep-table tr:hover td { background: rgba(255,255,255,0.015); }
.ep-table tr:last-child td { border-bottom: none; }


/* ════════════════════════════════════════════════════════════
   FORMULAIRES
════════════════════════════════════════════════════════════ */

.ep-label {
  display: block;
  font-size: 10px; font-family: var(--mono); font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--text-3); margin-bottom: 6px;
}

.ep-input, .ep-select, .ep-textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border-md);
  border-radius: var(--r-sm);
  color: var(--text); padding: 10px 14px;
  font-size: 13.5px; font-family: inherit;
  transition: border-color var(--t), box-shadow var(--t);
  outline: none; appearance: none;
}
.ep-input:focus, .ep-select:focus, .ep-textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 2px rgba(255,122,0,0.1);
}
.ep-input::placeholder { color: var(--text-3); }


/* ════════════════════════════════════════════════════════════
   BOOTSTRAP OVERRIDES
════════════════════════════════════════════════════════════ */

/* Cards */
.card { background: var(--card) !important; border: none !important; border-radius: var(--r) !important; color: var(--text) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.28), 0 0 0 1px rgba(255,255,255,0.04) !important; }
.card-header { background: var(--surface) !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important; color: var(--text) !important; padding: 12px 20px !important; }
.card-footer { background: var(--surface) !important; border-top: 1px solid rgba(255,255,255,0.05) !important; }
.card-body { color: var(--text) !important; }

/* Legacy form-card pattern (older templates) */
.form-card { background: var(--card) !important; border: none !important; border-radius: var(--r) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.28), 0 0 0 1px rgba(255,255,255,0.04) !important; color: var(--text) !important; }
.form-title { color: var(--orange) !important; }
.form-card .form-label { color: var(--text-2) !important; }
.icon-input i { color: var(--orange) !important; }
.btn-submit { background: var(--orange) !important; border-color: var(--orange) !important; color: #fff !important; }
.btn-submit:hover { background: #ff8c1a !important; border-color: #ff8c1a !important; }

/* Legacy welcome-banner / light info panels from older templates */
.welcome-banner { background: var(--card) !important; border-left-color: var(--orange) !important; color: var(--text) !important; }
.welcome-banner h4, .welcome-banner h5, .welcome-banner p { color: var(--text-2) !important; }
.table-card { background: var(--card) !important; border-color: var(--border) !important; box-shadow: none !important; }
.table-card-header { background: var(--surface) !important; border-bottom-color: var(--border) !important; color: var(--text) !important; }

/* Legacy info-card headers with light backgrounds */
.info-card .card-header { background: var(--surface) !important; border-bottom-color: var(--border) !important; color: var(--orange) !important; }

/* Legacy stat-mini cards — keep colored backgrounds, just fix text */
.stat-mini { color: #fff !important; }
.stat-mini .sm-label, .stat-mini .sm-val { color: #fff !important; }

/* Legacy accordion in dark theme */
.accordion-item { background: var(--card) !important; border-color: var(--border) !important; }
.accordion-button { background: var(--surface) !important; color: var(--text) !important; }
.accordion-button:not(.collapsed) { background: var(--raised) !important; color: var(--orange) !important; box-shadow: none !important; }
.accordion-button::after { filter: invert(1) sepia(1) saturate(5) hue-rotate(360deg); }
.accordion-body { background: var(--card) !important; color: var(--text-2) !important; }

/* Forms */
.form-control, .form-select {
  background-color: var(--surface) !important; border-color: var(--border-md) !important; color: var(--text) !important;
  border-radius: var(--r-sm) !important; font-size: 13px !important;
}
.form-control:focus, .form-select:focus {
  background-color: var(--surface) !important; border-color: var(--orange) !important;
  box-shadow: 0 0 0 2px rgba(255,122,0,0.1) !important; color: var(--text) !important;
}
.form-control::placeholder { color: var(--text-3) !important; }
.input-group-text { background-color: var(--card) !important; border-color: var(--border-md) !important; color: var(--text-3) !important; }
.form-label { color: var(--text-2) !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.8px !important; }
.form-text { color: var(--text-3) !important; font-size: 11px !important; }
.form-check-input { background-color: var(--raised) !important; border-color: var(--border-md) !important; }
.form-check-input:checked { background-color: var(--orange) !important; border-color: var(--orange) !important; }

/* Tables */
.table { color: var(--text) !important; }
.table > :not(caption) > * > * { background-color: transparent !important; color: var(--text) !important; border-bottom-color: rgba(255,255,255,0.05) !important; }
.table-hover > tbody > tr:hover > * { background-color: rgba(255,255,255,0.015) !important; }
.table thead th { color: var(--text-3) !important; font-size: 10px !important; font-family: var(--mono) !important; text-transform: uppercase !important; letter-spacing: 1px !important; }

/* Modals — base (remplace Bootstrap CSS manquant) */
.modal { display: none; position: fixed; top: 0; left: 0; z-index: 1055; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; outline: 0; }
.modal.show { display: block; }
.modal-dialog { position: relative; width: auto; margin: 1.75rem auto; pointer-events: none; }
.modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 3.5rem); }
.modal-lg { max-width: 800px; }
.modal-xl { max-width: 1140px; }
.modal-sm { max-width: 300px; }
.modal-content { position: relative; display: flex; flex-direction: column; width: 100%; pointer-events: auto; border-radius: var(--r); outline: 0; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; }
.modal-body { position: relative; flex: 1 1 auto; padding: 16px 20px; }
.modal-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; padding: 12px 20px; gap: 8px; }
.modal-backdrop { position: fixed; top: 0; left: 0; z-index: 1050; width: 100vw; height: 100vh; background-color: #000; }
.modal-backdrop.fade { opacity: 0; }
.modal-backdrop.show { opacity: 0.7; }
.fade { transition: opacity .15s linear; }
.fade:not(.show) { opacity: 0; }
/* Modals — theme */
.modal-content { background: var(--card) !important; border: 1px solid var(--border-md) !important; color: var(--text) !important; }
.modal-header { border-bottom: 1px solid var(--border) !important; background: var(--surface) !important; }
.modal-title { font-size: 14px !important; font-weight: 800 !important; }
.modal-footer { border-top: 1px solid var(--border) !important; }
.btn-close { filter: invert(1) !important; opacity: 0.5 !important; }

/* Badges — base */
.badge { display: inline-block; font-family: var(--mono) !important; font-size: 9.5px !important; letter-spacing: 0.5px !important; padding: 3px 7px !important; border-radius: var(--r-xs) !important; font-weight: 700; line-height: 1; white-space: nowrap; }
/* Bootstrap 5 classes */
.badge.bg-success,.badge-success { background: rgba(61,214,140,0.15) !important; color: #3DD68C !important; }
.badge.bg-danger,.badge-danger   { background: rgba(227,93,93,0.15) !important; color: #E35D5D !important; }
.badge.bg-warning,.badge-warning { background: rgba(251,191,36,0.15) !important; color: #FBBF24 !important; }
.badge.bg-primary,.badge-primary { background: var(--orange-lo) !important; color: var(--orange) !important; }
.badge.bg-secondary,.badge-secondary { background: rgba(255,255,255,0.06) !important; color: var(--text-2) !important; }
.badge.bg-info,.badge-info { background: rgba(99,152,255,0.15) !important; color: #6398FF !important; }

/* Alerts */
.alert { border-radius: var(--r-sm) !important; border: 1px solid !important; font-size: 13px !important; }
.alert-success { background: rgba(61,214,140,0.08) !important; border-color: rgba(61,214,140,0.2) !important; color: #3DD68C !important; }
.alert-danger  { background: rgba(227,93,93,0.08) !important; border-color: rgba(227,93,93,0.2) !important; color: #E35D5D !important; }
.alert-warning { background: rgba(251,191,36,0.08) !important; border-color: rgba(251,191,36,0.2) !important; color: #FBBF24 !important; }
.alert-info    { background: var(--orange-lo) !important; border-color: var(--border-hi) !important; color: var(--orange) !important; }

/* Buttons */
.btn { border-radius: var(--r-sm) !important; font-size: 12.5px !important; font-weight: 700 !important; letter-spacing: -0.1px !important; }
.btn-primary { background: var(--orange) !important; border-color: var(--orange) !important; color: #fff !important; }
.btn-primary:hover { background: #ff8c1a !important; border-color: #ff8c1a !important; }
.btn-outline-primary { border-color: var(--border-hi) !important; color: var(--orange) !important; background: transparent !important; }
.btn-outline-primary:hover { background: var(--orange-lo) !important; }
.btn-secondary { background: var(--raised) !important; border-color: var(--border-md) !important; color: var(--text-2) !important; }
.btn-secondary:hover { background: rgba(255,255,255,0.08) !important; color: var(--text) !important; }
.btn-outline-secondary { border-color: var(--border-md) !important; color: var(--text-2) !important; background: transparent !important; }
.btn-outline-secondary:hover { background: var(--raised) !important; color: var(--text) !important; }
.btn-danger { background: rgba(227,93,93,0.1) !important; border-color: rgba(227,93,93,0.2) !important; color: #E35D5D !important; }
.btn-danger:hover { background: rgba(227,93,93,0.18) !important; }
.btn-outline-danger { border-color: rgba(227,93,93,0.25) !important; color: #E35D5D !important; background: transparent !important; }
.btn-outline-danger:hover { background: rgba(227,93,93,0.1) !important; }
.btn-success { background: rgba(61,214,140,0.1) !important; border-color: rgba(61,214,140,0.2) !important; color: #3DD68C !important; }
.btn-success:hover { background: rgba(61,214,140,0.18) !important; }
.btn-light, .btn-outline-light { border-color: var(--border-md) !important; color: var(--text-2) !important; background: transparent !important; }
.btn-light:hover, .btn-outline-light:hover { background: var(--raised) !important; color: var(--text) !important; }

/* Pagination — base */
.pagination { display: flex; list-style: none; padding: 0; margin: 0; gap: 2px; flex-wrap: wrap; }
.page-link { background: var(--card) !important; border: 1px solid var(--border-md) !important; color: var(--text-2) !important; border-radius: var(--r-xs) !important; padding: 5px 11px !important; font-size: 12px !important; font-family: var(--mono) !important; }
.page-link:hover { background: var(--orange-lo) !important; color: var(--orange) !important; border-color: var(--border-hi) !important; }
.page-item.active .page-link { background: var(--orange) !important; border-color: var(--orange) !important; color: #fff !important; }
.page-item.disabled .page-link { opacity: 0.4 !important; }

/* Nav Tabs */
.nav-tabs { border-bottom: 1px solid var(--border) !important; gap: 0; padding: 0 4px; }
.nav-tabs .nav-link { color: var(--text-3) !important; border: none !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; padding: 12px 14px !important; font-size: 12px !important; font-weight: 700 !important; font-family: var(--mono) !important; text-transform: uppercase; letter-spacing: 0.5px; background: transparent !important; transition: all var(--t) !important; }
.nav-tabs .nav-link:hover { color: var(--text-2) !important; }
.nav-tabs .nav-link.active { color: var(--orange) !important; border-bottom-color: var(--orange) !important; background: transparent !important; }

/* List group */
.list-group-item { background: transparent !important; border-color: var(--border) !important; color: var(--text) !important; }
.list-group-item:hover { background: rgba(255,255,255,0.02) !important; }
.list-group-item.active { background: var(--orange-lo) !important; border-color: var(--border-hi) !important; color: var(--orange) !important; }

/* Dropdown */
.dropdown-menu { background: var(--card) !important; border: 1px solid var(--border-md) !important; border-radius: var(--r) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important; padding: 5px !important; }
.dropdown-item { color: var(--text-2) !important; border-radius: var(--r-xs) !important; font-size: 12.5px !important; padding: 7px 12px !important; }
.dropdown-item:hover { background: rgba(255,255,255,0.05) !important; color: var(--text) !important; }
.dropdown-divider { border-color: var(--border) !important; }

/* Progress */
.progress { background: rgba(255,255,255,0.05) !important; border-radius: var(--r-pill) !important; height: 4px !important; }
.progress-bar { background: var(--orange) !important; border-radius: var(--r-pill) !important; }

/* Text helpers */
.text-muted { color: var(--text-3) !important; }
.text-primary { color: var(--orange) !important; }
.text-success { color: #3DD68C !important; }
.text-danger  { color: #E35D5D !important; }
.text-warning { color: #FBBF24 !important; }
.text-info    { color: #6398FF !important; }
.text-secondary { color: var(--text-2) !important; }
.text-white { color: #fff !important; }
.text-dark  { color: var(--text) !important; }
.text-center { text-align: center !important; }
.text-right, .text-end { text-align: right !important; }

/* Background utilities */
.bg-light, .bg-secondary { background: var(--surface) !important; color: var(--text) !important; }
.bg-white { background: var(--card) !important; color: var(--text) !important; }
.bg-primary { background: var(--orange) !important; color: #fff !important; }
.bg-success { background: rgba(61,214,140,0.15) !important; color: #3DD68C !important; }
.bg-danger  { background: rgba(227,93,93,0.15) !important; color: #E35D5D !important; }
.bg-warning { background: rgba(251,191,36,0.15) !important; color: #FBBF24 !important; }
.bg-info    { background: rgba(99,152,255,0.15) !important; color: #6398FF !important; }

/* Shadows → remplace par bordure */
.shadow, .shadow-sm, .shadow-lg { box-shadow: none !important; }

/* Bootstrap grid — base minimal pour compatibilité */
.container { width: 100%; max-width: 1140px; margin-right: auto; margin-left: auto; padding-right: 12px; padding-left: 12px; }
.container-fluid { width: 100%; padding-right: 12px; padding-left: 12px; }
.row { display: flex; flex-wrap: wrap; margin-right: -12px; margin-left: -12px; }
.row.g-3 { gap: 0; }
.row.g-3 > * { padding: 8px; }
[class*="col-"] { position: relative; width: 100%; padding-right: 12px; padding-left: 12px; }
.col-12 { flex: 0 0 100%; max-width: 100%; }
.col-sm-6 { flex: 0 0 50%; max-width: 50%; }
.col-md-2 { flex: 0 0 16.666%; max-width: 16.666%; }
.col-md-3 { flex: 0 0 25%; max-width: 25%; }
.col-md-4 { flex: 0 0 33.333%; max-width: 33.333%; }
.col-md-5 { flex: 0 0 41.666%; max-width: 41.666%; }
.col-md-6 { flex: 0 0 50%; max-width: 50%; }
.col-md-8 { flex: 0 0 66.666%; max-width: 66.666%; }
.col-md-12 { flex: 0 0 100%; max-width: 100%; }
.col-lg-4 { flex: 0 0 33.333%; max-width: 33.333%; }
.col-lg-6 { flex: 0 0 50%; max-width: 50%; }
.col-lg-8 { flex: 0 0 66.666%; max-width: 66.666%; }
@media (max-width: 768px) {
  .col-sm-6,[class*="col-md-"],[class*="col-lg-"] { flex: 0 0 100%; max-width: 100%; }
}

/* Bootstrap spacing utilities */
.mb-2 { margin-bottom: 8px !important; }
.mb-3 { margin-bottom: 12px !important; }
.mb-4 { margin-bottom: 16px !important; }
.mt-4, .mt-5 { margin-top: 20px !important; }
.my-5 { margin-top: 32px !important; margin-bottom: 32px !important; }
.me-1, .me-2 { margin-right: 6px !important; }
.ms-auto { margin-left: auto !important; }
.p-4 { padding: 16px !important; }
.d-flex { display: flex !important; }
.d-none { display: none !important; }
.flex-wrap { flex-wrap: wrap !important; }
.align-items-center { align-items: center !important; }
.align-items-end { align-items: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-end { justify-content: flex-end !important; }
.gap-2 { gap: 8px !important; }
.gap-3 { gap: 12px !important; }
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold { font-weight: 700 !important; }
.small { font-size: 12px !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.img-fluid { max-width: 100%; height: auto; }
.rounded { border-radius: var(--r) !important; }
.border-0 { border: none !important; }
.border-top { border-top: 1px solid var(--border) !important; }
.opacity-75 { opacity: 0.75 !important; }
.position-fixed { position: fixed !important; }
.position-relative { position: relative !important; }
.bottom-0 { bottom: 0 !important; }
.end-0 { right: 0 !important; }
.overflow-hidden { overflow: hidden !important; }

/* input-group */
.input-group { display: flex; flex-wrap: nowrap; align-items: stretch; }
.input-group > .form-control, .input-group > .form-select { flex: 1 1 auto; min-width: 0; }
.input-group-text { display: flex; align-items: center; padding: 6px 10px; font-size: 13px; white-space: nowrap; }


/* ════════════════════════════════════════════════════════════
   TOASTS
════════════════════════════════════════════════════════════ */

.ep-toasts {
  position: fixed; top: 20px; right: 20px; z-index: 9999;
  display: flex; flex-direction: column; gap: 8px;
  width: 320px; pointer-events: none;
}

.ep-toast {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 12px 14px;
  border-radius: var(--r);
  background: var(--card);
  border: 1px solid var(--border-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  font-size: 12.5px;
  animation: toastIn 0.22s ease;
  pointer-events: auto; cursor: pointer;
}
.ep-toast i { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.ep-toast-msg { flex: 1; color: var(--text); line-height: 1.5; }

.ep-toast-success { border-color: rgba(61,214,140,0.25); }
.ep-toast-success i { color: #3DD68C; }
.ep-toast-error   { border-color: rgba(227,93,93,0.25); }
.ep-toast-error i { color: #E35D5D; }
.ep-toast-warning { border-color: rgba(251,191,36,0.25); }
.ep-toast-warning i { color: #FBBF24; }
.ep-toast-info    { border-color: var(--border-hi); }
.ep-toast-info i  { color: var(--orange); }

@keyframes toastIn  { from { transform: translateX(110%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toastOut { to   { transform: translateX(110%); opacity: 0; } }


/* ════════════════════════════════════════════════════════════
   MOBILE TOPBAR
════════════════════════════════════════════════════════════ */

.ep-topbar {
  display: none;
  position: fixed; top: 0; left: 0; right: 0;
  height: 52px;
  background: var(--surface);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05);
  align-items: center; justify-content: space-between;
  padding: 0 16px; z-index: 300;
}

.ep-topbar-btn {
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  background: transparent; border: 1px solid var(--border-md);
  color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 14px; transition: all var(--t);
}
.ep-topbar-btn:hover { border-color: var(--border-hi); color: var(--orange); }

.ep-topbar-brand {
  font-size: 14px; font-weight: 800; letter-spacing: -0.4px; color: var(--text);
}


.ep-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(3px); z-index: 199;
}
.ep-overlay.show { display: block; }


/* ════════════════════════════════════════════════════════════
   PAGE PUBLIQUE (base.html)
════════════════════════════════════════════════════════════ */

.ep-navbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: 60px;
  background: rgba(8,9,14,0.9);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; z-index: 500;
}

.ep-navbar-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 0 28px; width: 100%;
  display: flex; align-items: center; gap: 24px;
}

.ep-navbar-brand {
  font-size: 16px; font-weight: 800; letter-spacing: -0.5px;
  color: var(--text); display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.ep-navbar-brand span { color: var(--orange); }

.ep-navbar-links { display: flex; align-items: center; gap: 2px; flex: 1; }
.ep-navbar-link {
  padding: 5px 11px; border-radius: var(--r-xs);
  color: var(--text-2); font-size: 13px; font-weight: 500; transition: all var(--t);
}
.ep-navbar-link:hover { color: var(--text); }
.ep-navbar-link.active { color: var(--text); }

.ep-navbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ep-public-main { padding-top: 60px; }


/* ════════════════════════════════════════════════════════════
   UTILITAIRES
════════════════════════════════════════════════════════════ */

.ep-divider { height: 1px; background: var(--border); margin: 0; }

.ep-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 48px 20px; gap: 10px; text-align: center;
}
.ep-empty-icon {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--border-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--text-3);
}
.ep-empty-title { font-size: 14px; font-weight: 800; color: var(--text); }
.ep-empty-text { font-size: 12px; color: var(--text-3); max-width: 240px; font-family: var(--mono); }

.text-orange { color: var(--orange) !important; }
.bg-orange   { background: var(--orange) !important; }
.mono        { font-family: var(--mono) !important; }

.ep-reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.4s ease, transform 0.4s ease; }
.ep-reveal.visible { opacity: 1; transform: translateY(0); }


/* ════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════ */

@media (max-width: 1280px) {
  /* panel hidden via transform (base rule) — no display:none needed */
  .ep-main { margin-right: 0 !important; }
  .ep-feed { max-width: 100%; border-right: none; }
}

@media (max-width: 992px) {
  /* Mobile : panel truly removed from render */
  .ep-panel { display: none !important; }
}

@media (max-width: 992px) {
  .ep-nav {
    transform: translateX(-100%);
    transition: transform 0.26s cubic-bezier(0.4,0,0.2,1);
    box-shadow: 4px 0 32px rgba(0,0,0,0.5);
  }
  .ep-nav.open { transform: translateX(0); }
  .ep-topbar { display: flex; }
  .ep-main { margin-left: 0; padding-top: 52px; }
  .ep-feed { border-left: none; }
  /* ep-kpi-grid et ep-actions-grid gérés par auto-fill */
}

@media (max-width: 520px) {
  .ep-kpi-val { font-size: 26px; }
  .ep-kpi-item { padding: 16px 18px; }
  .ep-kpi-grid    { grid-template-columns: 1fr 1fr; }
  .ep-actions-grid { grid-template-columns: 1fr 1fr; }
  .ep-welcome { padding: 22px 20px 18px; }
  .ep-welcome-title { font-size: 22px; }
}

@media (max-width: 360px) {
  .ep-kpi-grid    { grid-template-columns: 1fr; }
  .ep-actions-grid { grid-template-columns: 1fr; }
}


/* ════════════════════════════════════════════════════════════
   PAGES PUBLIQUES — NAVBAR COMPLÈTE
════════════════════════════════════════════════════════════ */

.pub-body { background: var(--bg); color: var(--text); }

/* Navbar */
.pub-nav {
  position: fixed; top: 0; left: 0; right: 0;
  height: 62px; z-index: 500;
  background: rgba(8,9,14,0.0);
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease;
  display: flex; align-items: center;
}
.pub-nav.scrolled {
  background: rgba(8,9,14,0.95);
  border-bottom-color: var(--border);
  backdrop-filter: blur(20px);
}

.pub-nav-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 0 28px; width: 100%;
  display: flex; align-items: center; gap: 32px;
}

.pub-brand {
  font-size: 17px; font-weight: 900; letter-spacing: -0.6px;
  color: var(--text); display: flex; align-items: center; gap: 9px; flex-shrink: 0;
}
.pub-brand-icon {
  width: 32px; height: 32px; background: var(--orange);
  border-radius: 8px; display: flex; align-items: center;
  justify-content: center; font-size: 14px; color: #fff;
}

/* Logo officiel en <img> : retire le fond orange du badge, garde la taille/rayon */
img.pub-brand-icon, img.pub-footer-brand-icon { background: none !important; object-fit: contain; box-shadow: none; }

.pub-links {
  display: flex; align-items: center; gap: 2px; flex: 1;
}
.pub-link {
  padding: 5px 12px; border-radius: var(--r-xs);
  color: var(--text-2); font-size: 13px; font-weight: 500;
  transition: color var(--t);
}
.pub-link:hover { color: var(--text); }
.pub-link.active { color: var(--orange) !important; font-weight: 700; }

.pub-actions {
  display: flex; align-items: center; gap: 8px; margin-left: auto;
}

.pub-icon-btn {
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 14px; transition: all var(--t);
  position: relative;
}
.pub-icon-btn:hover { color: var(--text); border-color: var(--border-md); }

.pub-badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--orange); color: #fff;
  font-size: 9px; font-weight: 800; font-family: var(--mono);
  min-width: 16px; height: 16px;
  border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
}

.pub-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 300px;
  background: var(--card);
  border: 1px solid var(--border-md);
  border-radius: var(--r);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  display: none; flex-direction: column;
  z-index: 600;
}
.pub-dropdown.show { display: flex; }
.pub-dropdown--user { width: 200px; }

/* ── Dropdowns sur écran étroit ────────────────────────────────────────────────
   Le panneau est ancré à SON bouton (`right:0`) et fait 300px de large : il se
   déploie donc vers la GAUCHE. Or la cloche n'est pas au bord droit de la barre
   (avatar, thème et menu la suivent) — sur un petit écran, ces 300px sortaient de
   l'écran par la gauche et le texte était amputé (« ICATIONS », « ontrat signé »).

   Un panneau ancré à un bouton ne peut pas tenir dans un viewport plus étroit que
   lui : sous 640px on le détache du bouton et on l'épingle au viewport, entre deux
   marges. Il ne peut alors plus déborder, quelle que soit la position du bouton.
   `left`+`right` (et non `width`) fixent la largeur : elle s'adapte à l'écran. */
@media (max-width: 640px) {
  .pub-dropdown,
  .pub-dropdown--user {
    position: fixed;
    top: 70px;                  /* juste sous la barre (62px) */
    left: 12px; right: 12px;
    width: auto;
    max-width: none;
  }
  /* Le contenu ne doit pas dépasser l'écran en hauteur non plus : sur un mobile
     bas, une liste de 280px + en-tête + pied sortait sous le pli. */
  .pub-dropdown-body { max-height: calc(100vh - 190px); }
}

.pub-dropdown-head {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-family: var(--mono);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--text-3);
}
.pub-dropdown-head a { color: var(--orange); font-size: 10px; text-transform: none; }

.pub-dropdown-body { max-height: 280px; overflow-y: auto; }
.pub-dropdown-foot {
  padding: 10px 14px; border-top: 1px solid var(--border);
  text-align: center; font-size: 12px; color: var(--orange);
}

.pub-notif-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px; transition: background var(--t);
  border-bottom: 1px solid var(--border);
}
.pub-notif-item:last-child { border-bottom: none; }
.pub-notif-item:hover { background: rgba(255,255,255,0.02); }

.pub-notif-av {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--orange-lo);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--orange); flex-shrink: 0;
}
.pub-notif-title { font-size: 12px; color: var(--text); font-weight: 600; line-height: 1.4; }
.pub-notif-time { font-size: 10px; font-family: var(--mono); color: var(--text-3); margin-top: 2px; }
.pub-notif-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); flex-shrink: 0; margin-top: 6px; }

/* Mobile nav */
.pub-hamburger {
  display: none; width: 36px; height: 36px;
  border-radius: var(--r-sm); background: rgba(255,255,255,0.06);
  border: 1px solid var(--border); color: var(--text-2);
  align-items: center; justify-content: center;
  cursor: pointer; font-size: 14px;
}

.pub-mobile-menu {
  display: none; position: fixed; inset: 0; z-index: 700;
  background: var(--bg); flex-direction: column;
  padding: 80px 24px 32px;
}
.pub-mobile-menu.open { display: flex; }

.pub-mobile-close {
  position: absolute; top: 20px; right: 20px;
  width: 38px; height: 38px; border-radius: var(--r-sm);
  background: rgba(255,255,255,0.06); border: 1px solid var(--border);
  color: var(--text-2); display: flex; align-items: center;
  justify-content: center; cursor: pointer; font-size: 16px;
}

.pub-mobile-link {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: var(--r);
  color: var(--text); font-size: 15px; font-weight: 700;
  transition: background var(--t); margin-bottom: 4px;
}
.pub-mobile-link:hover { background: rgba(255,255,255,0.04); }
.pub-mobile-link i { width: 20px; text-align: center; color: var(--orange); font-size: 14px; }
.pub-mobile-link.danger { color: #E35D5D; }
.pub-mobile-link.danger i { color: #E35D5D; }


/* ════════════════════════════════════════════════════════════
   HERO
════════════════════════════════════════════════════════════ */

.pub-hero {
  min-height: 100vh;
  display: flex; align-items: center;
  padding: 100px 0 80px;
  position: relative; overflow: hidden;
}

/* Grille de fond */
.pub-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 0%, black 20%, transparent 80%);
}

/* Orbe orange */
.pub-hero::after {
  content: '';
  position: absolute;
  top: -200px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 600px;
  background: radial-gradient(ellipse at center, rgba(255,122,0,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.pub-hero-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 28px; width: 100%;
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: 64px; position: relative; z-index: 1;
}

.pub-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-family: var(--mono); font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.5px; color: var(--orange);
  margin-bottom: 20px;
}
.pub-hero-eyebrow::before {
  content: '';
  display: inline-block;
  width: 20px; height: 1px; background: var(--orange);
}

.pub-hero-title {
  font-size: clamp(36px, 5vw, 62px);
  font-weight: 900;
  letter-spacing: -2.5px;
  line-height: 1.05;
  color: var(--text);
  margin-bottom: 20px;
}

.pub-hero-title .accent { color: var(--orange); }

.pub-hero-sub {
  font-size: 15px; line-height: 1.75;
  color: var(--text-2); max-width: 480px;
  margin-bottom: 32px;
}

.pub-hero-ctas { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Mockup côté droit */
.pub-hero-visual {
  position: relative;
}

.pub-mockup {
  background: var(--surface);
  border: 1px solid var(--border-md);
  border-radius: 16px;
  padding: 20px;
  position: relative;
}

.pub-mockup-header {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 16px;
}
.pub-mockup-dot { width: 10px; height: 10px; border-radius: 50%; }

.pub-mockup-row { display: flex; gap: 12px; margin-bottom: 12px; }
.pub-mockup-bar {
  height: 8px; border-radius: 4px;
  background: rgba(255,255,255,0.07); flex: 1;
}
.pub-mockup-bar.w60 { flex: 0.6; }
.pub-mockup-bar.orange { background: rgba(255,122,0,0.3); }

.pub-mockup-card {
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: 10px; padding: 14px;
  margin-bottom: 10px;
}

.pub-mockup-kpi {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; margin-bottom: 10px;
}
.pub-mockup-kpi-item {
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: 10px; padding: 14px;
  text-align: center;
}
.pub-mockup-kpi-val {
  font-size: 22px; font-weight: 900; letter-spacing: -1px; color: var(--orange);
}
.pub-mockup-kpi-lab {
  font-size: 9px; font-family: var(--mono); color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.8px;
}

/* Floating badges sur le mockup */
.pub-float {
  position: absolute;
  background: var(--card);
  border: 1px solid var(--border-md);
  border-radius: 10px; padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  white-space: nowrap; font-size: 12px; font-weight: 700;
  animation: floatUpDown 3s ease-in-out infinite alternate;
}
.pub-float-icon {
  width: 28px; height: 28px; border-radius: 7px;
  background: var(--orange-lo);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--orange); flex-shrink: 0;
}
.pub-float-sub { font-size: 10px; color: var(--text-3); font-family: var(--mono); }
.pub-float:nth-child(2) { animation-delay: 1.5s; }

@keyframes floatUpDown {
  from { transform: translateY(0); }
  to   { transform: translateY(-10px); }
}


/* ════════════════════════════════════════════════════════════
   STATS BAR / TICKER
════════════════════════════════════════════════════════════ */

.pub-stats-bar {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 32px 0;
}

.pub-stats-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 28px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.pub-stat {
  padding: 16px 32px;
  border-right: 1px solid var(--border);
  text-align: center;
}
.pub-stat:last-child { border-right: none; }

.pub-stat-num {
  font-size: 36px; font-weight: 900; letter-spacing: -2px;
  color: var(--text); line-height: 1;
}
.pub-stat-label {
  font-size: 10px; font-family: var(--mono); font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--text-3); margin-top: 6px;
}


/* ════════════════════════════════════════════════════════════
   SECTIONS GÉNÉRIQUES
════════════════════════════════════════════════════════════ */

.pub-section {
  padding: 80px 0;
  max-width: 1200px; margin: 0 auto; padding-left: 28px; padding-right: 28px;
}

.pub-section-eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: 10px; font-family: var(--mono); font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-3);
  margin-bottom: 16px;
}
.pub-section-num { color: var(--orange); }

.pub-section-title {
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 900; letter-spacing: -1.5px; line-height: 1.1;
  color: var(--text); margin-bottom: 16px;
}

.pub-section-sub {
  font-size: 15px; color: var(--text-2); line-height: 1.75;
  max-width: 520px;
}

/* Features grid */
.pub-features-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
  margin-top: 48px;
}

.pub-feature {
  background: var(--card); padding: 32px 28px;
  transition: background var(--t);
}
.pub-feature:hover { background: var(--raised); }

.pub-feature-icon {
  width: 44px; height: 44px; border-radius: var(--r);
  border: 1px solid var(--border-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; margin-bottom: 18px;
  color: var(--orange);
}

.pub-feature-num {
  font-size: 9px; font-family: var(--mono); font-weight: 700;
  color: var(--text-3); letter-spacing: 0.5px; margin-bottom: 8px;
}

.pub-feature-title {
  font-size: 16px; font-weight: 800; letter-spacing: -0.4px;
  color: var(--text); margin-bottom: 8px;
}

.pub-feature-desc {
  font-size: 13px; color: var(--text-2); line-height: 1.65;
}

/* Steps */
.pub-steps {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
  margin-top: 48px;
}

.pub-step {
  background: var(--card); padding: 28px 24px;
  border-right: 1px solid var(--border);
  position: relative;
}
.pub-step:last-child { border-right: none; }

.pub-step-num {
  font-size: 32px; font-weight: 900; letter-spacing: -2px;
  color: var(--orange-lo);
  font-family: var(--mono); margin-bottom: 16px;
  -webkit-text-stroke: 1px rgba(255,122,0,0.3);
  color: transparent;
}

.pub-step-title { font-size: 15px; font-weight: 800; margin-bottom: 8px; }
.pub-step-desc { font-size: 12.5px; color: var(--text-2); line-height: 1.6; }

/* CTA section */
.pub-cta-section {
  border-top: 1px solid var(--border);
  padding: 80px 0;
  text-align: center; position: relative; overflow: hidden;
}
.pub-cta-section::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(255,122,0,0.06) 0%, transparent 70%);
}

.pub-cta-inner {
  max-width: 640px; margin: 0 auto; padding: 0 28px;
  position: relative; z-index: 1;
}

.pub-cta-title {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 900; letter-spacing: -2px; line-height: 1.1;
  margin-bottom: 16px;
}

.pub-cta-sub {
  font-size: 15px; color: var(--text-2); margin-bottom: 32px; line-height: 1.65;
}


/* ════════════════════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════════════════════ */

.pub-footer {
  border-top: 1px solid var(--border);
  padding: 60px 0 0;
}

.pub-footer-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 28px;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
  gap: 48px; margin-bottom: 48px;
}

.pub-footer-brand {
  font-size: 18px; font-weight: 900; letter-spacing: -0.6px;
  display: flex; align-items: center; gap: 9px; margin-bottom: 14px;
}

.pub-footer-brand-icon {
  width: 30px; height: 30px; background: var(--orange);
  border-radius: 7px; display: flex; align-items: center;
  justify-content: center; font-size: 13px; color: #fff;
}

.pub-footer-desc {
  font-size: 12.5px; color: var(--text-3); line-height: 1.75;
}

.pub-footer-socials { display: flex; gap: 8px; margin-top: 16px; }
.pub-social-btn {
  width: 34px; height: 34px; border-radius: var(--r-sm);
  border: 1px solid var(--border-md); color: var(--text-3);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; transition: all var(--t);
}
.pub-social-btn:hover { border-color: var(--border-hi); color: var(--orange); }

.pub-footer-heading {
  font-size: 10px; font-family: var(--mono); font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-3);
  margin-bottom: 16px;
}

.pub-footer-link {
  display: block; color: var(--text-2); font-size: 13px;
  padding: 4px 0; transition: color var(--t);
}
.pub-footer-link:hover { color: var(--text); }

.pub-footer-newsletter { display: flex; gap: 8px; margin-top: 8px; }
.pub-footer-newsletter input {
  flex: 1; background: var(--raised); border: 1px solid var(--border-md);
  border-radius: var(--r-sm); padding: 9px 12px;
  color: var(--text); font-size: 12.5px; font-family: inherit;
  outline: none; transition: border-color var(--t);
}
.pub-footer-newsletter input:focus { border-color: var(--orange); }
.pub-footer-newsletter input::placeholder { color: var(--text-3); }

.pub-footer-bottom {
  border-top: 1px solid var(--border);
  padding: 20px 28px;
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}

.pub-footer-copy {
  font-size: 11.5px; font-family: var(--mono); color: var(--text-3);
}

.pub-footer-legal { display: flex; gap: 20px; }
.pub-footer-legal a { font-size: 11.5px; color: var(--text-3); transition: color var(--t); }
.pub-footer-legal a:hover { color: var(--text-2); }


/* ════════════════════════════════════════════════════════════
   RESPONSIVE PUBLIC
════════════════════════════════════════════════════════════ */

@media (max-width: 992px) {
  .pub-hamburger { display: flex; }
  .pub-links { display: none; }

  .pub-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .pub-hero-visual { display: none; }
  .pub-hero-title { font-size: 40px; }

  .pub-stats-inner { grid-template-columns: repeat(2, 1fr); }
  .pub-stat:nth-child(2) { border-right: none; }
  .pub-stat:nth-child(3) { border-right: 1px solid var(--border); border-top: 1px solid var(--border); }
  .pub-stat:nth-child(4) { border-right: none; border-top: 1px solid var(--border); }

  .pub-features-grid { grid-template-columns: 1fr; }
  .pub-steps { grid-template-columns: 1fr 1fr; }
  .pub-step:nth-child(2) { border-right: none; }
  .pub-step:nth-child(3) { border-top: 1px solid var(--border); }
  .pub-step:nth-child(4) { border-top: 1px solid var(--border); border-right: none; }

  .pub-footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 600px) {
  .pub-hero { padding: 90px 0 60px; }
  .pub-hero-title { font-size: 32px; letter-spacing: -1.5px; }
  .pub-stats-inner { grid-template-columns: 1fr 1fr; }
  .pub-steps { grid-template-columns: 1fr; }
  .pub-step { border-right: none; border-bottom: 1px solid var(--border); }
  .pub-footer-inner { grid-template-columns: 1fr; }
  .pub-footer-bottom { flex-direction: column; text-align: center; }
  .pub-footer-legal { flex-wrap: wrap; justify-content: center; gap: 12px; }
}


/* ════════════════════════════════════════════════════════════
   AUTH PAGES (Login / Register)
════════════════════════════════════════════════════════════ */

.ep-auth-wrap {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: row;
}

.ep-auth-left {
  width: 50%;
  min-height: 100vh;
  background: linear-gradient(135deg, #0f1623 0%, #1a1f2e 50%, #0f1623 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  position: relative;
  overflow: hidden;
  border-right: 2px solid rgba(255, 122, 0, .15);
  box-sizing: border-box;
}

/* Decorative orbs */
.ep-hero-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.ep-hero-orb-1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(255,122,0,0.12) 0%, transparent 70%);
  top: -150px; right: -100px;
}
.ep-hero-orb-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(255,122,0,0.06) 0%, transparent 70%);
  bottom: -100px; left: -80px;
}
.ep-hero-orb-3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(96,165,250,0.05) 0%, transparent 70%);
  top: 40%; left: 20%;
}

.ep-auth-right {
  width: 50%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  background: var(--bg);
  box-sizing: border-box;
}

.ep-auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px;
}

.ep-auth-card h1 { color: var(--text); }
.ep-auth-card p { color: var(--text-2); }

/* Form fields */
.ep-form-group { margin-bottom: 18px; }

.ep-form-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-2);
  margin-bottom: 6px;
}

.ep-form-control {
  width: 100%;
  background: var(--raised);
  border: 1px solid var(--border-md);
  border-radius: var(--r);
  padding: 11px 14px 11px 42px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color var(--t);
}
.ep-form-control:focus { border-color: var(--orange); }
.ep-form-control::placeholder { color: var(--text-3); }

/* ── <select> indicatif téléphonique ─────────────────────────────────────────
   .ep-form-control réserve 42px à gauche pour une icône : ce select n'en a pas,
   d'où « +224 » tronqué en « +22 ». On rétablit un padding normal + place pour
   la flèche native. */
select.ep-phone-prefix {
  padding: 11px 30px 11px 12px;
  text-overflow: ellipsis;
}
/* Options lisibles dans le menu déroulant natif : sans couleur explicite, le
   texte clair du thème sombre s'affiche sur le fond blanc de l'OS = invisible. */
.ep-form-control option {
  background: #14151f;
  color: #eceef4;
}
html.light-mode .ep-form-control option {
  background: #ffffff;
  color: #1a1c22;
}

.ep-form-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  font-size: 13px;
  pointer-events: none;
}

@media (max-width: 768px) {
  .ep-auth-wrap { flex-direction: column; }
  .ep-auth-left { display: none; }
  .ep-auth-right { width: 100%; padding: 24px 16px; }
  .ep-auth-card { padding: 28px 24px; }
}

/* ── Post card ──────────────────────────────────────────────────────────── */
.ep-post-card {
  background: var(--card);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 2px 8px rgba(0,0,0,0.22), 0 0 0 1px rgba(255,255,255,0.03);
  transition: box-shadow .2s, transform .2s;
  position: relative;
}
.ep-post-card::before {
  content: '';
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 3px;
  background: var(--cat-color, var(--orange));
  opacity: 0.7;
}
.ep-post-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,0.38), 0 0 0 1px rgba(255,255,255,0.07);
  transform: translateY(-1px);
}
.ep-post-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px 12px 20px;
}
.ep-post-av {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange) 0%, #ff5500 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 900; color: #fff; flex-shrink: 0;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(255,122,0,0.35);
  text-decoration: none;
  overflow: hidden;
}
.ep-post-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ep-post-meta { flex: 1; min-width: 0; }
.ep-post-author-row {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.ep-post-author { font-weight: 800; font-size: .9rem; color: var(--text); text-decoration: none; line-height: 1.2; }
.ep-post-author:hover { color: var(--orange); }
.ep-post-role-badge {
  font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 20px;
  background: rgba(255,122,0,.13); color: var(--orange);
  border: 1px solid rgba(255,122,0,.22);
  flex-shrink: 0;
}
.ep-post-sub { font-size: .72rem; color: var(--text-3); margin-top: 4px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.ep-post-cat-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 20px; font-size: .67rem; font-weight: 700;
  background: rgba(var(--cat-color-rgb, 255,122,0),.12);
  color: var(--cat-color, var(--orange));
  border: 1px solid rgba(var(--cat-color-rgb, 255,122,0),.2);
}
.ep-post-cat-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.ep-post-time-sep { color: var(--text-3); opacity: .4; font-size: .65rem; }

.ep-post-actions { display: flex; align-items: center; gap: 4px; position: relative; flex-shrink: 0; }
.ep-post-menu-btn {
  background: none; border: none;
  color: var(--text-3); cursor: pointer;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .88rem; transition: background var(--t), color var(--t);
}
.ep-post-menu-btn:hover { background: var(--surface); color: var(--text); }
.ep-post-menu {
  position: absolute; top: 100%; right: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  min-width: 168px;
  box-shadow: 0 12px 32px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,0.05);
  z-index: 200;
  display: none;
  overflow: hidden;
}
.ep-post-menu-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%; background: none; border: none;
  padding: 10px 16px; font-size: .84rem;
  color: var(--text-2); cursor: pointer;
  transition: background var(--t);
  text-align: left;
}
.ep-post-menu-item:hover { background: var(--surface); color: var(--text); }
.ep-post-menu-item.danger:hover { color: #E35D5D; background: rgba(227,93,93,.07); }
.ep-post-menu-item.active { color: var(--orange); }
.ep-post-menu-item i { width: 15px; opacity: .7; }

.ep-post-content {
  padding: 0 20px 14px 20px;
  font-size: .91rem;
  color: var(--text);
  line-height: 1.7;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: pre-line;
}
.ep-post-content a { color: var(--orange); text-decoration: underline; text-underline-offset: 2px; }
.ep-post-content p { margin: 0 0 .5em; }
.ep-post-content p:last-child { margin-bottom: 0; }

.ep-post-media { margin-top: 2px; }
.ep-post-media-single {
  width: 100%; max-height: 460px;
  object-fit: cover; display: block;
  cursor: zoom-in;
}
video.ep-post-media-single { cursor: default; background: #000; }

.ep-post-media-grid { display: grid; gap: 2px; }
.ep-post-media-grid img, .ep-post-media-grid video {
  width: 100%; height: 210px;
  object-fit: cover; display: block; cursor: zoom-in;
}
.ep-grid-2 { grid-template-columns: 1fr 1fr; }
.ep-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.ep-grid-4 { grid-template-columns: 1fr 1fr; }

.ep-post-file-dl {
  display: flex; align-items: center; gap: 10px;
  margin: 8px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  text-decoration: none;
  color: var(--text-2);
  font-size: .85rem;
  transition: border-color var(--t);
}
.ep-post-file-dl:hover { border-color: var(--orange); color: var(--text); }
.ep-post-file-dl i { color: var(--orange); font-size: 1.1rem; flex-shrink: 0; }
.ep-post-file-size { margin-left: auto; font-size: .73rem; color: var(--text-3); flex-shrink: 0; }

.ep-reactions-bar {
  display: flex; flex-wrap: wrap; gap: 5px;
  padding: 8px 20px 4px;
  min-height: 20px;
}
.ep-reaction-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 11px;
  font-size: .8rem;
  cursor: pointer;
  display: flex; align-items: center; gap: 4px;
  color: var(--text-2);
  transition: all .15s;
}
.ep-reaction-btn:hover { border-color: var(--orange); color: var(--orange); background: rgba(255,122,0,.06); }
.ep-reaction-btn.active { background: rgba(255,122,0,.12); border-color: var(--orange); color: var(--orange); }

.ep-post-footer {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 8px 14px 14px;
  border-top: 1px solid rgba(255,255,255,0.05);
  margin-top: 4px;
}
.ep-footer-btn {
  background: none; border: none;
  color: var(--text-3); cursor: pointer;
  padding: 7px 12px; border-radius: 10px;
  font-size: .82rem; font-weight: 600;
  display: flex; align-items: center; gap: 6px;
  transition: background .15s, color .15s;
  flex: 1; justify-content: center;
}
.ep-footer-btn:hover { background: var(--surface); color: var(--text); }
.ep-footer-btn i { font-size: .85rem; }
.ep-comments-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  background: rgba(255,122,0,.15); color: var(--orange);
  border-radius: 999px; font-size: .68rem; font-weight: 800;
  padding: 0 5px;
}

.ep-emoji-picker {
  position: absolute; bottom: calc(100% + 8px); left: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px;
  display: flex; flex-wrap: wrap; gap: 4px;
  box-shadow: 0 12px 32px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,0.05);
  z-index: 200;
  min-width: 220px;
}
.ep-emoji-btn {
  background: none; border: none;
  font-size: 1.3rem; cursor: pointer;
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t);
}
.ep-emoji-btn:hover { background: var(--surface); }

.ep-comments-section { border-top: 1px solid rgba(255,255,255,0.05); padding: 14px 18px; }
.ep-comment-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.ep-comment { display: flex; gap: 9px; align-items: flex-start; }
.ep-comment-av {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--orange) 0%, #ff5500 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 900; color: #fff; flex-shrink: 0;
  text-transform: uppercase;
}
.ep-comment-body {
  flex: 1; min-width: 0;
  background: var(--surface);
  border-radius: 12px;
  padding: 8px 12px;
  border: 1px solid var(--border);
}
.ep-comment-name {
  font-size: .78rem; font-weight: 700; color: var(--text);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-bottom: 3px;
}
.ep-comment-time { font-weight: 400; color: var(--text-3); font-size: .7rem; }
.ep-comment-del {
  background: none; border: none; color: var(--text-3);
  cursor: pointer; font-size: .7rem; padding: 0 2px; margin-left: auto;
}
.ep-comment-del:hover { color: #E35D5D; }
.ep-comment-text { font-size: .84rem; color: var(--text-2); word-break: break-word; line-height: 1.5; }
.ep-comment-input-row { display: flex; align-items: center; gap: 8px; }
.ep-comment-input-av {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--orange) 0%, #ff5500 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 900; color: #fff; flex-shrink: 0;
  text-transform: uppercase;
  overflow: hidden;
}
.ep-comment-input-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ep-comment-input {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 8px 16px;
  color: var(--text);
  font-size: .84rem;
  outline: none;
  transition: border-color var(--t);
}
.ep-comment-input:focus { border-color: var(--orange); }
.ep-comment-input::placeholder { color: var(--text-3); }
.ep-comment-send {
  background: none; border: none; color: var(--text-3); cursor: pointer;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; transition: background var(--t), color var(--t);
}
.ep-comment-send:hover { background: var(--surface); color: var(--orange); }

/* ═══════════════════════════════════════════════════════════════
   C3 — Système de toasts / snackbars
═══════════════════════════════════════════════════════════════ */
#ep-toast-container {
  position: fixed; bottom: 24px; right: 24px;
  z-index: 9999; display: flex; flex-direction: column; gap: 10px;
  max-width: 380px;
}
.ep-toast {
  background: var(--raised); color: var(--text);
  border: 1px solid var(--border-md); border-radius: 10px;
  padding: 14px 18px; font-size: 13px; font-weight: 500;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.45);
  animation: ep-toast-in .25s ease; position: relative;
}
.ep-toast.success { border-left: 3px solid var(--success, #22c55e); }
.ep-toast.error   { border-left: 3px solid var(--danger, #ef4444); }
.ep-toast.warning { border-left: 3px solid var(--warning, #f59e0b); }
.ep-toast.info    { border-left: 3px solid var(--primary, #3b82f6); }
.ep-toast-close { cursor:pointer; opacity:.5; margin-left:auto; background:none; border:none; color:inherit; font-size:16px; }
.ep-toast-close:hover { opacity:1; }
@keyframes ep-toast-in { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }
@keyframes ep-toast-out { to { opacity:0; transform:translateY(20px); } }

/* C4 — Skeleton loaders */
.ep-skeleton {
  background: linear-gradient(90deg, var(--surface) 25%, var(--raised) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: ep-skeleton-wave 1.5s infinite;
  border-radius: 6px;
}
@keyframes ep-skeleton-wave { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.ep-skeleton-text  { height: 14px; margin-bottom: 8px; }
.ep-skeleton-title { height: 22px; margin-bottom: 12px; width: 60%; }
.ep-skeleton-card  { height: 120px; border-radius: 12px; }

/* C5 — Modal recherche globale */
#ep-search-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.75); z-index: 10000;
  display: none; align-items: flex-start; justify-content: center; padding-top: 80px;
}
#ep-search-overlay.open { display: flex; }
#ep-search-box {
  background: var(--card); border: 1px solid var(--border-md); border-radius: 14px;
  width: 100%; max-width: 600px; overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
  animation: ep-search-drop .2s ease;
}
@keyframes ep-search-drop { from { opacity:0; transform:scale(.97) translateY(-10px); } to { opacity:1; transform:none; } }
#ep-search-input {
  width: 100%; padding: 18px 20px; font-size: 16px; font-weight: 500;
  background: transparent; border: none; outline: none; color: var(--text);
}
#ep-search-input::placeholder { color: var(--text-3); }
#ep-search-results { max-height: 420px; overflow-y: auto; }
.ep-search-category { padding: 8px 20px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; color: var(--text-3); letter-spacing: .08em; }
.ep-search-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 20px;
  cursor: pointer; transition: background .12s;
}
.ep-search-item:hover, .ep-search-item.focused { background: var(--raised); }
.ep-search-item i { width: 20px; text-align: center; color: var(--text-2); }
.ep-search-item-label { font-weight: 500; font-size: 13px; }
.ep-search-item-sub   { font-size: 11px; color: var(--text-3); margin-top: 1px; }
.ep-search-empty { padding: 32px; text-align: center; color: var(--text-3); font-size: 13px; }
#ep-search-hint { padding: 10px 20px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-3); display: flex; gap: 12px; }
.ep-kbd { background: var(--surface); border: 1px solid var(--border-md); border-radius: 4px; padding: 2px 6px; font-family: monospace; font-size: 11px; }

/* C6 — Onboarding wizard */
.ep-wizard-steps {
  display: flex; align-items: center; gap: 0; margin-bottom: 32px;
}
.ep-wizard-step {
  display: flex; align-items: center; gap: 8px; flex: 1;
}
.ep-wizard-step-num {
  width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--border-md);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
  background: var(--surface); color: var(--text-2); flex-shrink: 0;
}
.ep-wizard-step.active .ep-wizard-step-num { background: var(--primary, #3b82f6); border-color: var(--primary, #3b82f6); color: #fff; }
.ep-wizard-step.done   .ep-wizard-step-num { background: var(--success, #22c55e); border-color: var(--success, #22c55e); color: #fff; }
.ep-wizard-step-line   { flex: 1; height: 2px; background: var(--border-md); }
.ep-wizard-step.done .ep-wizard-step-line { background: var(--success, #22c55e); }

/* C8 — Print CSS */
@media print {
  .ep-sidebar, .ep-header, .ep-header-actions, .ep-btn, nav,
  #ep-search-overlay, #ep-toast-container, .no-print { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .ep-card { border: 1px solid #ddd !important; box-shadow: none !important; }
  .ep-table th, .ep-table td { border: 1px solid #ddd !important; }
  a[href]:after { content: " (" attr(href) ")"; font-size: 10px; color: #666; }
}

/* ═══════════════════════════════════════════════════════════════
   ITATA — Premium Layer v5
   Shadows · Gradients · Micro-interactions · Color System
   ══════════════════════════════════════════════════════════════ */

/* ─── Extended Color Tokens ──────────────────────────────────── */
:root {
  --blue:        #6398FF;
  --blue-lo:     rgba(99,152,255,.10);
  --blue-hi:     rgba(99,152,255,.20);
  --blue-glow:   rgba(99,152,255,.30);

  --green:       #3DD68C;
  --green-lo:    rgba(61,214,140,.10);
  --green-hi:    rgba(61,214,140,.20);
  --green-glow:  rgba(61,214,140,.30);

  --purple:      #A78BFA;
  --purple-lo:   rgba(167,139,250,.10);
  --purple-hi:   rgba(167,139,250,.20);
  --purple-glow: rgba(167,139,250,.30);

  --red:         #F87171;
  --red-lo:      rgba(248,113,113,.10);
  --red-hi:      rgba(248,113,113,.20);

  --amber:       #FBBF24;
  --amber-lo:    rgba(251,191,36,.10);
  --amber-hi:    rgba(251,191,36,.20);

  /* Shadow scale */
  --shadow-xs:  0 1px 3px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.04);
  --shadow-sm:  0 2px 10px rgba(0,0,0,.36), 0 0 0 1px rgba(255,255,255,.05);
  --shadow-md:  0 6px 22px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06);
  --shadow-lg:  0 14px 40px rgba(0,0,0,.58), 0 0 0 1px rgba(255,255,255,.07);
  --shadow-glow-orange: 0 6px 28px rgba(255,122,0,.30);
  --shadow-glow-blue:   0 6px 28px rgba(99,152,255,.25);
  --shadow-glow-green:  0 6px 28px rgba(61,214,140,.22);
  --shadow-glow-purple: 0 6px 28px rgba(167,139,250,.25);

  /* Directional gradients */
  --grad-orange: linear-gradient(135deg, #E06600 0%, #FF7A00 55%, #ff9d45 100%);
  --grad-blue:   linear-gradient(135deg, #3a65e0 0%, #6398FF 55%, #93b4ff 100%);
  --grad-green:  linear-gradient(135deg, #059669 0%, #3DD68C 55%, #6ee7b7 100%);
  --grad-purple: linear-gradient(135deg, #6d28d9 0%, #A78BFA 55%, #c4b5fd 100%);
}

/* ─── Light mode tokens ───────────────────────────────────────── */
html.light-mode {
  --shadow-xs: 0 1px 4px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.06);
  --shadow-sm: 0 2px 10px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.07);
  --shadow-md: 0 6px 22px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.08);
  --shadow-lg: 0 14px 40px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.09);
  --shadow-glow-orange: 0 6px 28px rgba(255,122,0,.22);
  --shadow-glow-blue:   0 6px 28px rgba(99,152,255,.18);
  --shadow-glow-green:  0 6px 28px rgba(61,214,140,.16);
  --shadow-glow-purple: 0 6px 28px rgba(167,139,250,.18);
}

/* ─── Entrance Animations ─────────────────────────────────────── */
@keyframes ep-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ep-scale-in {
  from { opacity: 0; transform: scale(.95); }
  to   { opacity: 1; transform: scale(1); }
}
.ep-anim-up { animation: ep-fade-up .36s ease both; }
.ep-anim-up:nth-child(2) { animation-delay: .06s; }
.ep-anim-up:nth-child(3) { animation-delay: .12s; }
.ep-anim-up:nth-child(4) { animation-delay: .18s; }
.ep-anim-up:nth-child(5) { animation-delay: .24s; }
.ep-anim-up:nth-child(6) { animation-delay: .30s; }
@media (prefers-reduced-motion: reduce) { .ep-anim-up { animation: none !important; } }

/* KPI Cards — variantes définies dans le bloc principal (lignes ~621-730) */

/* ─── Action Cards — Color Variants ─────────────────────────── */
.ep-action-item--blue   .ep-action-item-icon { color: var(--blue);   background: var(--blue-lo);   border-color: rgba(99,152,255,.22);  }
.ep-action-item--green  .ep-action-item-icon { color: var(--green);  background: var(--green-lo);  border-color: rgba(61,214,140,.22);  }
.ep-action-item--purple .ep-action-item-icon { color: var(--purple); background: var(--purple-lo); border-color: rgba(167,139,250,.22); }
.ep-action-item--orange .ep-action-item-icon { color: var(--orange); background: var(--orange-lo); border-color: rgba(255,122,0,.22);   }
.ep-action-item--amber  .ep-action-item-icon { color: var(--amber);  background: var(--amber-lo);  border-color: rgba(251,191,36,.22);  }
.ep-action-item--teal   .ep-action-item-icon { color: var(--teal);   background: var(--teal-lo);   border-color: rgba(20,184,166,.22);   }

.ep-action-item--blue:hover   { background: rgba(59,130,246,.05) !important; }
.ep-action-item--green:hover  { background: rgba(34,197,94,.05) !important; }
.ep-action-item--purple:hover { background: rgba(139,92,246,.05) !important; }
.ep-action-item--orange:hover { background: rgba(255,122,0,.05) !important; }
.ep-action-item--amber:hover  { background: rgba(245,158,11,.05) !important; }
.ep-action-item--teal:hover   { background: rgba(20,184,166,.05) !important; }
.ep-action-item--red:hover    { background: rgba(239,68,68,.05) !important; }

.ep-action-item--blue:hover   .ep-action-item-icon { color: var(--blue);   border-color: var(--blue);   background: var(--blue-hi);   }
.ep-action-item--green:hover  .ep-action-item-icon { color: var(--green);  border-color: var(--green);  background: var(--green-hi);  }
.ep-action-item--purple:hover .ep-action-item-icon { color: var(--purple); border-color: var(--purple); background: var(--purple-hi); }
.ep-action-item--orange:hover .ep-action-item-icon { color: var(--orange); border-color: var(--orange); background: var(--orange-hi); }
.ep-action-item--amber:hover  .ep-action-item-icon { color: var(--amber);  border-color: var(--amber);  background: var(--amber-hi);  }
.ep-action-item--teal:hover   .ep-action-item-icon { color: var(--teal);   border-color: var(--teal);   background: var(--teal-hi);   }

/* ─── Buttons — Micro-interactions ──────────────────────────── */
.ep-btn {
  transition: background var(--t), color var(--t), border-color var(--t),
              box-shadow .15s ease, transform .1s ease !important;
}
.ep-btn:hover  { transform: translateY(-1px); }
.ep-btn:active { transform: translateY(0) scale(.97); }
.ep-btn-primary:hover { box-shadow: var(--shadow-glow-orange); }

/* ─── Form Inputs — Glow Focus ───────────────────────────────── */
.ep-input:focus,
.ep-select:focus,
.ep-textarea:focus {
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 3px rgba(255,122,0,.14);
  outline: none;
}

/* ep-card depth — défini dans le bloc principal Cards */

/* ─── Gradient Text Utilities ────────────────────────────────── */
.ep-text-grad         { background: var(--grad-orange); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ep-text-grad-blue    { background: var(--grad-blue);   -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ep-text-grad-green   { background: var(--grad-green);  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ep-text-grad-purple  { background: var(--grad-purple); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ─── Dir-Stat Cards ─────────────────────────────────────────── */
.dir-stat {
  box-shadow: var(--shadow-xs);
  transition: box-shadow .2s ease, transform .15s ease !important;
}
.dir-stat:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ─── Table Row Hover ────────────────────────────────────────── */
.abs-table tbody tr { transition: background .12s; }
.abs-table tbody tr:hover td { background: rgba(255,255,255,.024); }

/* ─── Me-Cards — Type Glow ───────────────────────────────────── */
.me-card {
  box-shadow: var(--shadow-xs);
  transition: border-color .15s, transform .15s, box-shadow .2s !important;
}
.me-card:hover { transform: translateY(-3px); }
.me-card--blue:hover   { border-color: var(--blue);   box-shadow: var(--shadow-md), var(--shadow-glow-blue);   }
.me-card--green:hover  { border-color: var(--green);  box-shadow: var(--shadow-md), var(--shadow-glow-green);  }
.me-card--purple:hover { border-color: var(--purple); box-shadow: var(--shadow-md), var(--shadow-glow-purple); }
.me-card--orange:hover { border-color: var(--orange); box-shadow: var(--shadow-md), var(--shadow-glow-orange); }

/* Stats colored per type */
.me-card--blue   .me-card-stats .s-val { color: var(--blue);   }
.me-card--green  .me-card-stats .s-val { color: var(--green);  }
.me-card--purple .me-card-stats .s-val { color: var(--purple); }

/* CTA button color per type */
.me-card--blue   .me-btn-primary { background: var(--blue);  }
.me-card--blue   .me-btn-primary:hover { background: #4f7bff; opacity: 1; }
.me-card--green  .me-btn-primary { background: var(--green); color: #0a1f14; }
.me-card--green  .me-btn-primary:hover { background: #2ec87d; opacity: 1; }
.me-card--purple .me-btn-primary { background: var(--purple); }
.me-card--purple .me-btn-primary:hover { background: #9b7cfa; opacity: 1; }

/* ─── Me-stat Cards ──────────────────────────────────────────── */
.me-stat {
  box-shadow: var(--shadow-xs);
  transition: box-shadow .18s ease, transform .15s ease !important;
}
.me-stat:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }

/* ─── License Cards ──────────────────────────────────────────── */
.lic-card {
  box-shadow: var(--shadow-xs);
  transition: border-color .18s, box-shadow .22s, transform .15s !important;
}
.lic-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.lic-card--blue:hover   { box-shadow: var(--shadow-lg), var(--shadow-glow-blue);   }
.lic-card--green:hover  { box-shadow: var(--shadow-lg), var(--shadow-glow-green);  }
.lic-card--purple:hover { box-shadow: var(--shadow-lg), var(--shadow-glow-purple); }

.lic-card--blue   .lic-card-top { background: linear-gradient(135deg, rgba(99,152,255,.09) 0%, transparent 80%); }
.lic-card--green  .lic-card-top { background: linear-gradient(135deg, rgba(61,214,140,.09) 0%, transparent 80%); }
.lic-card--purple .lic-card-top { background: linear-gradient(135deg, rgba(167,139,250,.09) 0%, transparent 80%); }

.lic-card .lic-icon { width: 46px; height: 46px; border-radius: 12px; font-size: 18px; }
.lic-card--blue   .lic-icon { background: rgba(99,152,255,.16)  !important; color: var(--blue)   !important; }
.lic-card--green  .lic-icon { background: rgba(61,214,140,.16)  !important; color: var(--green)  !important; }
.lic-card--purple .lic-icon { background: rgba(167,139,250,.16) !important; color: var(--purple) !important; }

/* ─── Me-Demande Cards ────────────────────────────────────────── */
.me-demande-card {
  box-shadow: var(--shadow-xs);
  transition: border-color .15s, box-shadow .2s, transform .15s !important;
}
.me-demande-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md), var(--shadow-glow-orange);
}

/* ─── Section Number — Pill ──────────────────────────────────── */
.ep-section-num {
  background: var(--orange-lo);
  color: var(--orange);
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 9.5px;
}

/* ─── Strip enhanced ─────────────────────────────────────────── */
.me-card-strip { height: 4px; }
.me-card--blue   .me-card-strip { background: linear-gradient(90deg, #3a65e0, #6398FF, #93b4ff); }
.me-card--green  .me-card-strip { background: linear-gradient(90deg, #059669, #3DD68C, #6ee7b7); }
.me-card--purple .me-card-strip { background: linear-gradient(90deg, #6d28d9, #A78BFA, #c4b5fd); }

/* ─── Public Feature Cards — Premium ─────────────────────────── */
.pub-feature {
  position: relative;
  transition: background var(--t), box-shadow .2s ease !important;
  overflow: hidden;
}
.pub-feature::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--grad-orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s ease;
}
.pub-feature:hover { background: rgba(255,255,255,.025) !important; }
.pub-feature:hover::after { transform: scaleX(1); }

.pub-feature:nth-child(2)::after { background: var(--grad-blue); }
.pub-feature:nth-child(3)::after { background: var(--grad-purple); }

.pub-feature-icon {
  width: 48px; height: 48px;
  border-radius: 12px !important;
  font-size: 22px !important;
  transition: transform .2s ease, box-shadow .2s ease;
}
.pub-feature:hover .pub-feature-icon {
  transform: scale(1.08);
}
.pub-feature-title { letter-spacing: -0.5px; }

/* ─── Public Steps — Hover ───────────────────────────────────── */
.pub-step { transition: background var(--t); }
.pub-step:hover { background: rgba(255,255,255,.018) !important; }

/* ─── Advantage Grid Items ───────────────────────────────────── */
.pub-advantage-item {
  background: var(--surface);
  padding: 28px;
  transition: background var(--t), transform .15s ease;
}
.pub-advantage-item:hover {
  background: rgba(255,255,255,.028);
  transform: translateY(-1px);
}
.pub-advantage-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  margin-bottom: 16px;
  transition: transform .2s ease;
}
.pub-advantage-item:hover .pub-advantage-icon { transform: scale(1.1); }

/* ─── Testimonial Cards ──────────────────────────────────────── */
.pub-testimonial {
  transition: box-shadow .2s ease, transform .15s ease !important;
  box-shadow: var(--shadow-xs) !important;
}
.pub-testimonial:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md) !important;
}

/* ─── Hero button glow ───────────────────────────────────────── */
.pub-hero-ctas .ep-btn-primary:hover {
  box-shadow: 0 6px 28px rgba(255,122,0,.38);
}

/* ═══════════════════════════════════════════════════════════════
   Premium Layer v6 — Colors red/amber + dir-stat + skeleton
═══════════════════════════════════════════════════════════════ */

/* KPI red/amber — variantes définies dans le bloc principal (lignes ~621-730) */

/* ── Action item red variant ─────────────────────────────────── */
.ep-action-item--red .ep-action-item-icon { color: var(--red);   background: rgba(248,113,113,.1); border-color: rgba(248,113,113,.2); }
.ep-action-item--red:hover                { background: rgba(248,113,113,.04) !important; }
.ep-action-item--red:hover .ep-action-item-icon { color: var(--red); border-color: var(--red); background: rgba(248,113,113,.15); }

/* ── Dir-stat (shared stat strip for teacher/director) ───────── */
.ep-dir-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: .85rem;
}
.ep-dir-stat-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  box-shadow: var(--shadow-xs);
  transition: box-shadow .2s, transform .2s;
  cursor: pointer;
}
.ep-dir-stat-item:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.ep-dir-stat-icon { font-size: 1.2rem; margin-bottom: .1rem; }
.ep-dir-stat-val  { font-size: 1.55rem; font-weight: 900; color: var(--text); line-height: 1.1; }
.ep-dir-stat-label{ font-size: .7rem;  font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }

/* ── Skeleton loading ─────────────────────────────────────────── */
@keyframes ep-skeleton-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.ep-skeleton {
  background: linear-gradient(90deg, var(--raised) 25%, var(--surface) 50%, var(--raised) 75%);
  background-size: 800px 100%;
  animation: ep-skeleton-shimmer 1.4s infinite linear;
  border-radius: 6px;
}
.ep-skeleton-text  { height: 14px; width: 80%; margin-bottom: .5rem; }
.ep-skeleton-title { height: 20px; width: 55%; margin-bottom: .7rem; }
.ep-skeleton-card  { height: 90px; border-radius: 12px; margin-bottom: .75rem; }

/* ── Enhanced card hover ─────────────────────────────────────── */
.ep-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-xs);
  transition: box-shadow .2s ease, transform .2s ease;
}
.ep-card:hover {
  box-shadow: var(--shadow-md);
}

/* ── Toast info color ────────────────────────────────────────── */
.ep-toast-info { border-color: rgba(99,152,255,.25); }
.ep-toast-info i { color: var(--blue); }

/* ── Notification dot pulse ──────────────────────────────────── */
@keyframes ep-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .6; transform: scale(1.2); }
}
.ep-notif-pulse { animation: ep-pulse 1.8s ease-in-out infinite; }

/* ── Smooth scrollbar (webkit) ───────────────────────────────── */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 100px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* ── Focus-visible ring ─────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Selection color ────────────────────────────────────────── */
::selection { background: rgba(255,122,0,.22); color: var(--text); }


/* ═══════════════════════════════════════════════════════════════
   Premium Layer v7 — Design Perfection
   Grades · Glass · Metrics · Timeline · Mobile · Interactions
   ═══════════════════════════════════════════════════════════════ */

/* ─── Color tokens supplémentaires ──────────────────────────── */
:root {
  --teal:      #2DD4BF;
  --teal-lo:   rgba(45,212,191,.10);
  --teal-hi:   rgba(45,212,191,.20);
  --pink:      #F472B6;
  --pink-lo:   rgba(244,114,182,.10);
  --pink-hi:   rgba(244,114,182,.20);

  /* Grade system */
  --grade-a:   #3DD68C;
  --grade-b:   #6398FF;
  --grade-c:   #FBBF24;
  --grade-d:   #FF7A00;
  --grade-e:   #F87171;

  /* Transition riche */
  --t-smooth: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── GRADE SYSTEM — visualisation notes ─────────────────────── */

/* Badge de note avec couleur dynamique */
.ep-grade {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 900; font-family: var(--mono);
  padding: 3px 10px; border-radius: var(--r-pill);
  letter-spacing: 0.5px;
}
.ep-grade-a  { background: rgba(61,214,140,.14);  color: var(--grade-a); border: 1px solid rgba(61,214,140,.25);  }
.ep-grade-b  { background: rgba(99,152,255,.14);  color: var(--grade-b); border: 1px solid rgba(99,152,255,.25);  }
.ep-grade-c  { background: rgba(251,191,36,.14);  color: var(--grade-c); border: 1px solid rgba(251,191,36,.25);  }
.ep-grade-d  { background: rgba(255,122,0,.14);   color: var(--grade-d); border: 1px solid rgba(255,122,0,.25);   }
.ep-grade-e  { background: rgba(248,113,113,.14); color: var(--grade-e); border: 1px solid rgba(248,113,113,.25); }

/* Barre de progression de note */
.ep-score-bar {
  width: 100%; height: 6px;
  background: rgba(255,255,255,.06);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.ep-score-fill {
  height: 100%; border-radius: var(--r-pill);
  background: var(--grade-a);
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.ep-score-fill.grade-a { background: linear-gradient(90deg, #059669, #3DD68C); }
.ep-score-fill.grade-b { background: linear-gradient(90deg, #3a65e0, #6398FF); }
.ep-score-fill.grade-c { background: linear-gradient(90deg, #d97706, #FBBF24); }
.ep-score-fill.grade-d { background: linear-gradient(90deg, #E06600, #FF7A00); }
.ep-score-fill.grade-e { background: linear-gradient(90deg, #dc2626, #F87171); }

/* Card de note détaillée */
.ep-note-card {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  transition: all var(--t-smooth);
}
.ep-note-card:hover {
  border-color: var(--border-md);
  background: var(--raised);
  transform: translateX(2px);
}
.ep-note-val {
  width: 52px; height: 52px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 900; font-family: var(--mono);
  flex-shrink: 0; letter-spacing: -0.5px;
}
.ep-note-val.grade-a { background: rgba(61,214,140,.12);  color: var(--grade-a); }
.ep-note-val.grade-b { background: rgba(99,152,255,.12);  color: var(--grade-b); }
.ep-note-val.grade-c { background: rgba(251,191,36,.12);  color: var(--grade-c); }
.ep-note-val.grade-d { background: rgba(255,122,0,.12);   color: var(--grade-d); }
.ep-note-val.grade-e { background: rgba(248,113,113,.12); color: var(--grade-e); }
.ep-note-body { flex: 1; min-width: 0; }
.ep-note-mat  { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-note-meta { font-size: 11px; color: var(--text-3); font-family: var(--mono); margin-top: 2px; }
.ep-note-bar  { margin-top: 6px; }


/* ─── GLASSMORPHISM CARD ──────────────────────────────────────── */
.ep-glass {
  background: rgba(15,17,24,.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
}
html.light-mode .ep-glass {
  background: rgba(255,255,255,.75);
  border-color: rgba(0,0,0,.08);
}


/* ─── METRIC CARD — stat compacte avec tendance ──────────────── */
.ep-metric {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 6px;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--t-smooth), transform var(--t-smooth);
  position: relative; overflow: hidden;
}
.ep-metric:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.ep-metric-label {
  font-size: 10px; font-family: var(--mono); font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px; color: var(--text-3);
}
.ep-metric-val {
  font-size: 28px; font-weight: 900; letter-spacing: -1.5px;
  color: var(--text); line-height: 1; font-feature-settings: 'tnum';
}
.ep-metric-sub {
  font-size: 11px; color: var(--text-3); font-family: var(--mono);
}
.ep-metric-trend {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 700; font-family: var(--mono);
  padding: 2px 7px; border-radius: var(--r-pill);
}
.ep-metric-trend.up   { background: rgba(61,214,140,.10);  color: var(--grade-a); }
.ep-metric-trend.down { background: rgba(248,113,113,.10); color: var(--grade-e); }
.ep-metric-trend.flat { background: rgba(255,255,255,.05); color: var(--text-3); }
.ep-metric-accent {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px; background: var(--orange);
}
.ep-metric--blue   .ep-metric-accent { background: var(--grad-blue);   }
.ep-metric--green  .ep-metric-accent { background: var(--grad-green);  }
.ep-metric--purple .ep-metric-accent { background: var(--grad-purple); }
.ep-metric--orange .ep-metric-accent { background: var(--grad-orange); }
.ep-metric--red    .ep-metric-accent { background: linear-gradient(90deg, #dc2626, #F87171); }


/* ─── TIMELINE — historique & activité ──────────────────────── */
.ep-timeline { display: flex; flex-direction: column; }
.ep-tl-item {
  display: flex; gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  position: relative;
}
.ep-tl-item:last-child { border-bottom: none; }
.ep-tl-left {
  display: flex; flex-direction: column; align-items: center;
  flex-shrink: 0; width: 32px;
}
.ep-tl-dot {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0;
  border: 2px solid transparent;
}
.ep-tl-dot--orange { background: var(--orange-lo); color: var(--orange); border-color: rgba(255,122,0,.2); }
.ep-tl-dot--green  { background: var(--green-lo);  color: var(--green);  border-color: rgba(61,214,140,.2); }
.ep-tl-dot--blue   { background: var(--blue-lo);   color: var(--blue);   border-color: rgba(99,152,255,.2); }
.ep-tl-dot--red    { background: var(--red-lo);    color: var(--red);    border-color: rgba(248,113,113,.2); }
.ep-tl-dot--amber  { background: var(--amber-lo);  color: var(--amber);  border-color: rgba(251,191,36,.2); }
.ep-tl-line {
  width: 1px; flex: 1; min-height: 16px;
  background: rgba(255,255,255,.06); margin-top: 4px;
}
.ep-tl-body { flex: 1; min-width: 0; padding-bottom: 4px; }
.ep-tl-title { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.4; }
.ep-tl-sub   { font-size: 11.5px; color: var(--text-2); margin-top: 2px; line-height: 1.5; }
.ep-tl-time  { font-size: 10px; font-family: var(--mono); color: var(--text-3); margin-top: 4px; }


/* ─── STAT ROW — ligne de stat horizontale ──────────────────── */
.ep-stat-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.04);
}
.ep-stat-row:last-child { border-bottom: none; }
.ep-stat-row-label { font-size: 12.5px; color: var(--text-2); display: flex; align-items: center; gap: 8px; }
.ep-stat-row-label i { width: 14px; text-align: center; color: var(--text-3); font-size: 11px; }
.ep-stat-row-val { font-size: 14px; font-weight: 800; color: var(--text); font-family: var(--mono); font-feature-settings: 'tnum'; }


/* ─── AVATAR enrichi ─────────────────────────────────────────── */
.ep-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--orange);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: #fff;
  text-transform: uppercase; letter-spacing: 0.5px;
  flex-shrink: 0;
  position: relative;
}
.ep-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ep-avatar-sm { width: 32px; height: 32px; font-size: 11px; }
.ep-avatar-lg { width: 56px; height: 56px; font-size: 20px; }
.ep-avatar-xl { width: 72px; height: 72px; font-size: 26px; }

.ep-avatar-ring {
  position: absolute; inset: -3px;
  border-radius: 50%;
  background: conic-gradient(var(--orange) 0%, var(--orange) 75%, rgba(255,122,0,.15) 75%);
  z-index: -1;
}
.ep-avatar-ring::after {
  content: ''; position: absolute; inset: 3px;
  border-radius: 50%; background: var(--bg);
}
.ep-online-dot {
  position: absolute; bottom: 0; right: 0;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--green); border: 2px solid var(--bg);
}
.ep-online-dot.offline { background: var(--text-3); }


/* ─── PAGE HEADER — en-tête de page structuré ───────────────── */
.ep-page-header {
  padding: 40px 32px 32px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
  position: relative;
  overflow: hidden;
  /* Gradient ambiant orange institutionnel */
  background:
    radial-gradient(ellipse 70% 140% at 0% -10%, rgba(255,122,0,0.08) 0%, transparent 55%),
    linear-gradient(180deg, rgba(255,122,0,0.02) 0%, transparent 100%);
}

/* Ligne de prestige orange en haut */
.ep-page-header::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    var(--orange) 0%,
    rgba(255,122,0,0.35) 45%,
    transparent 68%);
  z-index: 1;
}

/* Mesh grid décoratif en arrière-plan */
.ep-page-header::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(ellipse 90% 160% at 5% -5%, rgba(0,0,0,0.5) 0%, transparent 65%);
  mask-image: radial-gradient(ellipse 90% 160% at 5% -5%, rgba(0,0,0,0.5) 0%, transparent 65%);
  pointer-events: none;
  z-index: -1; /* derrière tout le contenu */
}

.ep-page-header-left { min-width: 0; position: relative; z-index: 1; }
.ep-page-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; position: relative; z-index: 1; }

.ep-page-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10px; font-family: var(--mono); font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.4px;
  color: var(--orange); margin-bottom: 10px;
  background: linear-gradient(90deg, rgba(255,122,0,0.14), rgba(255,122,0,0.06));
  border: 1px solid rgba(255,122,0,0.22);
  border-radius: var(--r-pill);
  padding: 4px 12px 4px 9px;
  width: fit-content;
}
/* Point pulsant */
.ep-page-eyebrow::before {
  content: ''; width: 6px; height: 6px;
  background: var(--orange); border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(255,122,0,0.6);
  animation: epEyebrowPulse 2.4s ease-in-out infinite;
}
@keyframes epEyebrowPulse {
  0%,100% { opacity: 1; box-shadow: 0 0 6px rgba(255,122,0,0.6); }
  50%      { opacity: 0.6; box-shadow: 0 0 12px rgba(255,122,0,0.9); }
}

.ep-page-title {
  font-size: 30px; font-weight: 900; letter-spacing: -1.5px;
  color: var(--text); line-height: 1.15;
}
.ep-page-sub {
  font-size: 11.5px; color: var(--text-3); margin-top: 6px; font-family: var(--mono);
  letter-spacing: 0.2px;
}


/* ─── INFO CARD — carte informative avec icône colorée ───────── */
.ep-info-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); padding: 16px 18px;
  display: flex; align-items: flex-start; gap: 14px;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--t-smooth);
}
.ep-info-card:hover { box-shadow: var(--shadow-sm); }
.ep-info-card-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.ep-info-card-icon--orange { background: var(--orange-lo); color: var(--orange); }
.ep-info-card-icon--blue   { background: var(--blue-lo);   color: var(--blue);   }
.ep-info-card-icon--green  { background: var(--green-lo);  color: var(--green);  }
.ep-info-card-icon--red    { background: var(--red-lo);    color: var(--red);    }
.ep-info-card-icon--amber  { background: var(--amber-lo);  color: var(--amber);  }
.ep-info-card-icon--purple { background: var(--purple-lo); color: var(--purple); }
.ep-info-card-body { flex: 1; min-width: 0; }
.ep-info-card-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.ep-info-card-text  { font-size: 12px; color: var(--text-2); line-height: 1.55; }


/* ─── ALERT BANNER — bannière d'alerte inline ────────────────── */
.ep-alert {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px; border-radius: var(--r);
  border: 1px solid; margin-bottom: 16px;
}
.ep-alert i { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.ep-alert-body { flex: 1; font-size: 13px; line-height: 1.5; }
.ep-alert-title { font-weight: 700; margin-bottom: 2px; }
.ep-alert--info    { background: var(--orange-lo); border-color: rgba(255,122,0,.25); color: var(--orange); }
.ep-alert--success { background: var(--green-lo);  border-color: rgba(61,214,140,.25); color: var(--green); }
.ep-alert--warning { background: var(--amber-lo);  border-color: rgba(251,191,36,.25); color: var(--amber); }
.ep-alert--danger  { background: var(--red-lo);    border-color: rgba(248,113,113,.25); color: var(--red);  }
.ep-alert--blue    { background: var(--blue-lo);   border-color: rgba(99,152,255,.25);  color: var(--blue); }


/* ─── DATA LIST — liste de données structurée ────────────────── */
.ep-dl { display: grid; grid-template-columns: auto 1fr; gap: 0; }
.ep-dl-item {
  display: contents;
}
.ep-dl-label {
  font-size: 10.5px; font-family: var(--mono); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--text-3); padding: 9px 16px 9px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  white-space: nowrap;
}
.ep-dl-val {
  font-size: 13px; color: var(--text); padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.ep-dl-item:last-child .ep-dl-label,
.ep-dl-item:last-child .ep-dl-val { border-bottom: none; }


/* ─── QUICK STATS STRIP ──────────────────────────────────────── */
.ep-qs-strip {
  display: flex; gap: 1px; background: rgba(255,255,255,.04);
  border-radius: var(--r); overflow: hidden; margin-bottom: 24px;
}
.ep-qs-item {
  flex: 1; padding: 14px 16px; background: var(--card);
  display: flex; flex-direction: column; gap: 4px;
  transition: background var(--t);
}
.ep-qs-item:hover { background: var(--raised); }
.ep-qs-icon { font-size: 14px; margin-bottom: 4px; }
.ep-qs-val  { font-size: 22px; font-weight: 900; letter-spacing: -1px; color: var(--text); font-feature-settings: 'tnum'; }
.ep-qs-label{ font-size: 10px; font-family: var(--mono); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.8px; }
.ep-qs-item--blue   .ep-qs-icon, .ep-qs-item--blue   .ep-qs-val { color: var(--blue);   }
.ep-qs-item--green  .ep-qs-icon, .ep-qs-item--green  .ep-qs-val { color: var(--green);  }
.ep-qs-item--orange .ep-qs-icon, .ep-qs-item--orange .ep-qs-val { color: var(--orange); }
.ep-qs-item--red    .ep-qs-icon, .ep-qs-item--red    .ep-qs-val { color: var(--red);    }
.ep-qs-item--amber  .ep-qs-icon, .ep-qs-item--amber  .ep-qs-val { color: var(--amber);  }
.ep-qs-item--purple .ep-qs-icon, .ep-qs-item--purple .ep-qs-val { color: var(--purple); }


/* ─── CHART CONTAINER ────────────────────────────────────────── */
.ep-chart-wrap {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); padding: 20px;
  box-shadow: var(--shadow-xs);
}
.ep-chart-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.ep-chart-title {
  font-size: 12px; font-weight: 700; font-family: var(--mono);
  text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-2);
}
.ep-chart-body { position: relative; }
.ep-chart-body canvas { display: block; }


/* ─── STATUS PILL ────────────────────────────────────────────── */
.ep-status {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 10.5px; font-weight: 700; font-family: var(--mono);
  letter-spacing: 0.4px;
}
.ep-status::before {
  content: ''; width: 5px; height: 5px;
  border-radius: 50%; flex-shrink: 0;
}
.ep-status--active    { background: rgba(61,214,140,.12);  color: var(--green);  }
.ep-status--active::before  { background: var(--green); box-shadow: 0 0 0 2px rgba(61,214,140,.25); }
.ep-status--pending   { background: rgba(251,191,36,.12);  color: var(--amber);  }
.ep-status--pending::before { background: var(--amber); }
.ep-status--inactive  { background: rgba(255,255,255,.05); color: var(--text-3); }
.ep-status--inactive::before{ background: var(--text-3); }
.ep-status--danger    { background: rgba(248,113,113,.12); color: var(--red);    }
.ep-status--danger::before  { background: var(--red);   animation: ep-pulse 1.4s ease infinite; }
.ep-status--info      { background: rgba(99,152,255,.12);  color: var(--blue);   }
.ep-status--info::before    { background: var(--blue);  }


/* ─── CARD PREMIUM avec border-gradient ──────────────────────── */
.ep-card-premium {
  position: relative;
  background: var(--card);
  border-radius: 14px;
  padding: 1px;
  box-shadow: var(--shadow-sm);
}
.ep-card-premium::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 14px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,122,0,.3), rgba(255,255,255,.06), rgba(255,122,0,.08));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.ep-card-premium-inner { background: var(--card); border-radius: 13px; overflow: hidden; }


/* ─── PROGRESS RING (circulaire) ─────────────────────────────── */
.ep-ring-wrap {
  width: 80px; height: 80px;
  position: relative; flex-shrink: 0;
}
.ep-ring-svg {
  width: 80px; height: 80px;
  transform: rotate(-90deg);
}
.ep-ring-track {
  fill: none; stroke: rgba(255,255,255,.06); stroke-width: 6;
}
.ep-ring-fill {
  fill: none; stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 201; /* 2π × 32px radius */
  stroke-dashoffset: 201;
  transition: stroke-dashoffset 1s cubic-bezier(.4,0,.2,1);
}
.ep-ring-fill.grade-a { stroke: var(--grade-a); }
.ep-ring-fill.grade-b { stroke: var(--grade-b); }
.ep-ring-fill.grade-c { stroke: var(--grade-c); }
.ep-ring-fill.grade-d { stroke: var(--grade-d); }
.ep-ring-fill.grade-e { stroke: var(--grade-e); }
.ep-ring-label {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.ep-ring-val  { font-size: 16px; font-weight: 900; letter-spacing: -0.5px; font-family: var(--mono); }
.ep-ring-sub  { font-size: 8px; font-family: var(--mono); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.8px; }


/* ─── FILE UPLOAD ZONE ───────────────────────────────────────── */
.ep-upload-zone {
  border: 1.5px dashed var(--border-md);
  border-radius: var(--r);
  padding: 32px;
  text-align: center;
  cursor: pointer;
  transition: all var(--t-smooth);
  background: rgba(255,255,255,.01);
}
.ep-upload-zone:hover, .ep-upload-zone.drag-over {
  border-color: var(--orange);
  background: var(--orange-lo);
  color: var(--orange);
}
.ep-upload-zone input[type="file"] { display: none; }
.ep-upload-icon { font-size: 28px; color: var(--text-3); margin-bottom: 8px; transition: color var(--t); }
.ep-upload-zone:hover .ep-upload-icon { color: var(--orange); }
.ep-upload-text { font-size: 13px; font-weight: 600; color: var(--text-2); }
.ep-upload-sub  { font-size: 11px; color: var(--text-3); font-family: var(--mono); margin-top: 4px; }


/* ─── MOBILE BOTTOM NAV ──────────────────────────────────────── */
.ep-bottom-nav {
  display: none;
  position: fixed;
  bottom: 10px;
  left: 10px;
  right: 10px;
  height: 64px;
  background: rgba(13,14,22,.97);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  z-index: 400;
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  box-shadow: 0 8px 32px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.35);
  overflow: hidden;
}
.ep-bottom-nav-inner {
  display: flex;
  align-items: stretch;
  width: 100%;
  height: 64px;
  padding: 0 6px;
}

/* ── Bottom nav — icône + label ────────────────────────────── */

.ep-bnav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: rgba(255,255,255,.40);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: color .2s ease;
  min-width: 0;
  padding: 0 2px;
}
.ep-bnav-item:active { transform: scale(.90); transition: transform .1s; }

/* Pill autour de l'icône */
.ep-bnav-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 28px;
  border-radius: 14px;
  transition: background .2s ease, box-shadow .2s ease;
}

/* Wrapper icône (positionne le badge) */
.ep-bnav-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
}

/* Label toujours visible */
.ep-bnav-lbl {
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: .01em;
  line-height: 1;
}

/* Badge compteur */
.ep-bnav-badge {
  position: absolute;
  top: -5px; right: -6px;
  background: var(--orange); color: #fff;
  font-size: 7px; font-weight: 800;
  min-width: 14px; height: 14px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
  border: 1.5px solid rgba(13,14,22,.97);
  line-height: 1;
}
.ep-bnav-badge-msg { background: #6366f1; }

/* Item actif */
.ep-bnav-item.active { color: var(--orange); }
.ep-bnav-item.active .ep-bnav-pill {
  background: rgba(255,122,0,.15);
  box-shadow: 0 0 16px rgba(255,122,0,.22);
}

/* Compat anciennes classes */
.ep-bottom-nav-item { display: none; }
.ep-bottom-nav-badge { display: none; }

@media (max-width: 992px) {
  .ep-bottom-nav { display: flex; }
  .ep-main { padding-bottom: calc(64px + 10px + 6px + env(safe-area-inset-bottom, 0px)); }
  #ep-fab-root { bottom: calc(64px + 10px + 14px + env(safe-area-inset-bottom, 0px)) !important; }
  .ep-bottom-nav { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}

/* Très petits écrans ≤360px */
@media (max-width: 360px) {
  .ep-bottom-nav { left: 6px; right: 6px; }
  .ep-bnav-icon  { font-size: 18px; }
  .ep-bnav-pill  { width: 40px; height: 26px; }
  .ep-bnav-lbl   { font-size: 9px; }
}


/* ─── TABLE AMÉLIORÉE ────────────────────────────────────────── */
.ep-table tr.ep-table-row-link { cursor: pointer; }
.ep-table th.sortable {
  cursor: pointer; user-select: none;
  transition: color var(--t);
}
.ep-table th.sortable:hover { color: var(--text-2); }
.ep-table th.sort-asc::after  { content: ' ↑'; color: var(--orange); }
.ep-table th.sort-desc::after { content: ' ↓'; color: var(--orange); }

/* Zebra optionnel */
.ep-table.striped tbody tr:nth-child(even) td { background: rgba(255,255,255,.015); }

/* Sticky header */
.ep-table-sticky thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface);
}


/* ─── FORM VALIDATION STATES ─────────────────────────────────── */
.ep-input.is-valid, .ep-select.is-valid, .ep-textarea.is-valid {
  border-color: var(--green) !important;
}
.ep-input.is-invalid, .ep-select.is-invalid, .ep-textarea.is-invalid {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 3px rgba(248,113,113,.10);
}
.ep-field-error {
  font-size: 11px; color: var(--red); margin-top: 4px;
  font-family: var(--mono); display: flex; align-items: center; gap: 4px;
}
.ep-field-hint {
  font-size: 11px; color: var(--text-3); margin-top: 4px; font-family: var(--mono);
}
.ep-char-count {
  font-size: 10px; font-family: var(--mono); color: var(--text-3);
  text-align: right; margin-top: 4px;
}
.ep-char-count.near-limit { color: var(--amber); }
.ep-char-count.at-limit   { color: var(--red); }


/* ─── WELCOME GRADIENT MESH ──────────────────────────────────── */
.ep-welcome-mesh {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.ep-welcome-mesh::before {
  content: '';
  position: absolute; top: -60px; right: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(ellipse at center, rgba(255,122,0,.06) 0%, transparent 70%);
  border-radius: 50%;
}
.ep-welcome-mesh::after {
  content: '';
  position: absolute; bottom: -30px; right: 20px;
  width: 120px; height: 120px;
  background: radial-gradient(ellipse at center, rgba(99,152,255,.06) 0%, transparent 70%);
  border-radius: 50%;
}


/* ─── HOVER NAV LINK INDICATOR ───────────────────────────────── */
.ep-nav-link {
  border-left: 2px solid transparent;
  margin-left: -2px;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding-left: 14px;
}
.ep-nav-link.active {
  border-left-color: var(--orange);
}


/* ─── KPI Item enrichi (taille compteur + micro glow) ────────── */
.ep-kpi-item {
  cursor: pointer;
}
.ep-kpi-item a, .ep-kpi-item[href] {
  text-decoration: none;
}
/* Subtle glow background on hover */
.ep-kpi-item--blue:hover   { background: rgba(99,152,255,.04) !important; }
.ep-kpi-item--green:hover  { background: rgba(61,214,140,.04) !important; }
.ep-kpi-item--purple:hover { background: rgba(167,139,250,.04) !important; }
.ep-kpi-item--orange:hover { background: rgba(255,122,0,.04) !important; }


/* ─── EP-CARD enrichi avec animated border ───────────────────── */
.ep-card-glow {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--t-smooth), border-color var(--t-smooth), transform var(--t-smooth);
}
.ep-card-glow:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-md);
  transform: translateY(-2px);
}
.ep-card-glow--orange:hover { box-shadow: var(--shadow-md), var(--shadow-glow-orange); border-color: rgba(255,122,0,.25); }
.ep-card-glow--blue:hover   { box-shadow: var(--shadow-md), var(--shadow-glow-blue);   border-color: rgba(99,152,255,.25); }
.ep-card-glow--green:hover  { box-shadow: var(--shadow-md), var(--shadow-glow-green);  border-color: rgba(61,214,140,.25); }
.ep-card-glow--purple:hover { box-shadow: var(--shadow-md), var(--shadow-glow-purple); border-color: rgba(167,139,250,.25); }


/* ─── EMPTY STATE enrichi avec bouton CTA ────────────────────── */
.ep-empty-v2 {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 64px 24px; gap: 12px; text-align: center;
}
.ep-empty-v2-icon {
  width: 72px; height: 72px; border-radius: 20px;
  border: 1px solid var(--border-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: var(--text-3);
  background: rgba(255,255,255,.02);
  margin-bottom: 4px;
}
.ep-empty-v2-title { font-size: 16px; font-weight: 800; color: var(--text); letter-spacing: -0.3px; }
.ep-empty-v2-text  { font-size: 12.5px; color: var(--text-3); max-width: 280px; line-height: 1.6; font-family: var(--mono); }
.ep-empty-v2-cta   { margin-top: 8px; }


/* ─── SCROLL PROGRESS BAR (page) ─────────────────────────────── */
#ep-scroll-progress {
  position: fixed; top: 0; left: 0;
  height: 2px; z-index: 9999;
  background: var(--orange);
  width: 0%; transition: width 0.1s linear;
  pointer-events: none;
}


/* ─── TOOLTIP AMÉLIORÉ ───────────────────────────────────────── */
[data-ep-tip] { position: relative; cursor: help; }
[data-ep-tip]::after {
  content: attr(data-ep-tip);
  position: absolute; bottom: calc(100% + 8px);
  left: 50%; transform: translateX(-50%) scale(.9);
  background: var(--raised);
  border: 1px solid var(--border-md);
  color: var(--text); font-size: 11px; font-family: var(--mono);
  padding: 5px 10px; border-radius: var(--r-sm);
  white-space: nowrap; z-index: 1000;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t), transform var(--t);
  box-shadow: var(--shadow-sm);
}
[data-ep-tip]:hover::after {
  opacity: 1; transform: translateX(-50%) scale(1);
}


/* ─── SEARCH INPUT with icon ─────────────────────────────────── */
.ep-search-input-wrap {
  position: relative;
}
.ep-search-input-wrap .ep-input {
  padding-left: 36px;
}
.ep-search-input-wrap .ep-search-ico {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-3); font-size: 13px; pointer-events: none;
}


/* ─── BADGE PULSE pour notifications actives ─────────────────── */
.ep-nav-badge.has-new {
  animation: ep-badge-pop 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes ep-badge-pop {
  0%, 100% { transform: scale(1); }
  30%       { transform: scale(1.35); }
  60%       { transform: scale(0.9); }
}


/* ─── IMPROVED SCROLLBAR ─────────────────────────────────────── */
.ep-scroll {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-md) transparent;
}
.ep-scroll::-webkit-scrollbar { width: 4px; }
.ep-scroll::-webkit-scrollbar-thumb { background: var(--border-md); border-radius: 4px; }
.ep-scroll::-webkit-scrollbar-thumb:hover { background: var(--text-3); }


/* ─── LIGHT MODE ajustements v7 ──────────────────────────────── */
html.light-mode .ep-metric   { box-shadow: var(--shadow-xs); }
html.light-mode .ep-glass    { background: rgba(255,255,255,.85); }
html.light-mode .ep-ring-track { stroke: rgba(0,0,0,.07); }
html.light-mode .ep-tl-line  { background: rgba(0,0,0,.08); }
html.light-mode .ep-qs-strip { background: rgba(0,0,0,.04); }
html.light-mode .ep-score-bar { background: rgba(0,0,0,.07); }
html.light-mode .ep-upload-zone { background: rgba(0,0,0,.015); border-color: rgba(0,0,0,.12); }
html.light-mode .ep-bottom-nav { background: rgba(255,255,255,.94) !important; }


/* ─── RESPONSIVE v7 ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .ep-page-header { flex-direction: column; align-items: flex-start; }
  .ep-qs-strip { flex-wrap: wrap; }
  .ep-qs-item  { min-width: 45%; }
  .ep-metric-val { font-size: 22px; }
  .ep-ring-wrap  { width: 64px; height: 64px; }
  .ep-ring-svg   { width: 64px; height: 64px; }
}
@media (max-width: 520px) {
  .ep-qs-item  { min-width: 100%; flex: 0 0 50%; }
  .ep-note-val { width: 44px; height: 44px; font-size: 15px; }
}


/* ════════════════════════════════════════════════════════════════════
   ITATA — Premium Layer v8  ·  Cards · Skeleton · Animations
   ════════════════════════════════════════════════════════════════════ */

/* ─── SKELETON LOADING ────────────────────────────────────────── */
@keyframes skeleton-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.ep-skeleton {
  background: linear-gradient(90deg, var(--surface) 25%, rgba(255,255,255,.06) 50%, var(--surface) 75%);
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
  border-radius: 6px;
}
.ep-skeleton-text  { height: 14px; margin-bottom: 8px; }
.ep-skeleton-title { height: 22px; margin-bottom: 12px; width: 60%; }
.ep-skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.ep-skeleton-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 20px;
}

/* ─── CARD FLIP / 3D ─────────────────────────────────────────── */
.ep-card-flip-wrap {
  perspective: 1000px;
}
.ep-card-flip {
  position: relative;
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.ep-card-flip:hover { transform: rotateY(180deg); }
.ep-card-flip-front, .ep-card-flip-back {
  backface-visibility: hidden;
}
.ep-card-flip-back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  background: var(--card);
  border-radius: var(--r);
  border: 1px solid var(--border);
}

/* ─── STAT BADGE ROW ──────────────────────────────────────────── */
.ep-stat-badge-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.ep-stat-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: .35rem .75rem;
  border-radius: 100px;
  font-size: .76rem;
  font-weight: 700;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  transition: all .2s;
}
.ep-stat-badge:hover { border-color: var(--orange); color: var(--orange); }
.ep-stat-badge i { font-size: .7rem; }
.ep-stat-badge--orange { background: var(--orange-lo); border-color: rgba(255,122,0,.3); color: var(--orange); }
.ep-stat-badge--blue   { background: var(--blue-lo);   border-color: rgba(99,152,255,.3); color: var(--blue); }
.ep-stat-badge--green  { background: var(--green-lo);  border-color: rgba(61,214,140,.3); color: var(--green); }
.ep-stat-badge--red    { background: rgba(227,93,93,.1); border-color: rgba(227,93,93,.3); color: var(--red); }
.ep-stat-badge--purple { background: var(--purple-lo); border-color: rgba(167,139,250,.3); color: var(--purple); }

/* ─── FEATURE CARD (plans, fonctionnalités) ───────────────────── */
.ep-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}
.ep-feature-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.4rem;
  transition: box-shadow .2s, transform .18s, border-color .2s;
  position: relative;
  overflow: hidden;
}
.ep-feature-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-orange);
  opacity: 0;
  transition: opacity .2s;
}
.ep-feature-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: var(--border-md);
}
.ep-feature-card:hover::before { opacity: 1; }
.ep-feature-card-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  margin-bottom: .9rem;
}
.ep-feature-card-title {
  font-size: .92rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: .35rem;
  letter-spacing: -.015em;
}
.ep-feature-card-desc {
  font-size: .8rem;
  color: var(--text-3);
  line-height: 1.6;
}

/* ─── ACTIVITY FEED ──────────────────────────────────────────── */
.ep-activity-feed {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.ep-activity-item {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--border);
  transition: background .15s;
  text-decoration: none;
}
.ep-activity-item:last-child { border-bottom: none; }
.ep-activity-item:hover { background: rgba(255,255,255,.02); }
.ep-activity-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-top: .35rem;
  flex-shrink: 0;
}
.ep-activity-dot--orange { background: var(--orange); }
.ep-activity-dot--blue   { background: var(--blue); }
.ep-activity-dot--green  { background: var(--green); }
.ep-activity-dot--red    { background: var(--red); }
.ep-activity-dot--purple { background: var(--purple); }
.ep-activity-dot--amber  { background: var(--amber); }
.ep-activity-title {
  font-size: .84rem;
  font-weight: 600;
  color: var(--text-2);
  line-height: 1.4;
}
.ep-activity-meta {
  font-size: .72rem;
  color: var(--text-3);
  margin-top: .2rem;
}

/* ─── HORIZONTAL DIVIDER WITH LABEL ──────────────────────────── */
.ep-divider-label {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1.25rem 0;
  color: var(--text-3);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.ep-divider-label::before,
.ep-divider-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ─── COMPARISON TABLE ────────────────────────────────────────── */
.ep-compare-table { width: 100%; border-collapse: collapse; }
.ep-compare-table th {
  padding: .65rem 1rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-3);
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.ep-compare-table td {
  padding: .75rem 1rem;
  font-size: .85rem;
  color: var(--text-2);
  border-bottom: 1px solid rgba(255,255,255,.03);
  vertical-align: middle;
}
.ep-compare-table tr:last-child td { border-bottom: none; }
.ep-compare-table tr:hover td { background: rgba(255,255,255,.015); }
.ep-compare-check  { color: var(--green); font-size: .85rem; }
.ep-compare-cross  { color: var(--red);   font-size: .85rem; }

/* ─── PILL TABS ───────────────────────────────────────────────── */
.ep-pill-tabs {
  display: flex;
  gap: 4px;
  background: var(--surface);
  border-radius: 100px;
  padding: 4px;
  width: fit-content;
  margin-bottom: 1.25rem;
}
.ep-pill-tab {
  padding: .35rem .9rem;
  border-radius: 100px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--text-3);
  cursor: pointer;
  transition: all .18s;
  border: none;
  background: none;
  text-decoration: none;
}
.ep-pill-tab:hover { color: var(--text-2); }
.ep-pill-tab.active, .ep-pill-tab[aria-selected="true"] {
  background: var(--card);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}

/* ─── DATA HIGHLIGHT BOX ──────────────────────────────────────── */
.ep-data-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .9rem 1.1rem;
  display: flex;
  align-items: center;
  gap: .9rem;
}
.ep-data-box-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem;
  flex-shrink: 0;
}
.ep-data-box-label {
  font-size: .72rem;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 700;
  margin-bottom: .2rem;
}
.ep-data-box-value {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--text);
  line-height: 1.1;
  letter-spacing: -.025em;
}
.ep-data-box-sub {
  font-size: .72rem;
  color: var(--text-3);
  margin-top: .15rem;
}

/* ─── FLOATING ACTION BUTTON ─────────────────────────────────── */
.ep-fab {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 6px 20px rgba(255,122,0,.45);
  cursor: pointer;
  border: none;
  transition: transform .2s, box-shadow .2s;
  z-index: 400;
  text-decoration: none;
}
.ep-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 28px rgba(255,122,0,.55);
  color: #fff;
}
.ep-fab:active { transform: scale(.96); }
@media (max-width: 992px) { .ep-fab { bottom: 88px; } }

/* ─── NOTIFICATION TRAY ──────────────────────────────────────── */
.ep-notif-item {
  display: flex;
  gap: .8rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .15s;
  text-decoration: none;
  color: inherit;
}
.ep-notif-item:last-child { border-bottom: none; }
.ep-notif-item:hover { background: rgba(255,255,255,.025); }
.ep-notif-item.unread { background: rgba(255,122,0,.035); }
.ep-notif-item.unread:hover { background: rgba(255,122,0,.055); }
.ep-notif-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem;
  font-weight: 700;
  color: #fff;
}
.ep-notif-body { flex: 1; min-width: 0; }
.ep-notif-title { font-size: .82rem; font-weight: 600; color: var(--text-2); line-height: 1.4; }
.ep-notif-item.unread .ep-notif-title { color: var(--text); font-weight: 700; }
.ep-notif-time { font-size: .68rem; color: var(--text-3); margin-top: .2rem; }
.ep-notif-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--orange);
  flex-shrink: 0;
  margin-top: .35rem;
}

/* ─── BREADCRUMB ─────────────────────────────────────────────── */
.ep-breadcrumb {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  color: var(--text-3);
  margin-bottom: .75rem;
  flex-wrap: wrap;
}
.ep-breadcrumb a { color: var(--text-3); text-decoration: none; transition: color .15s; }
.ep-breadcrumb a:hover { color: var(--orange); }
.ep-breadcrumb-sep { color: var(--text-3); opacity: .5; font-size: .7rem; }
.ep-breadcrumb-current { color: var(--text-2); font-weight: 600; }

/* ─── STEP WIZARD ─────────────────────────────────────────────── */
.ep-wizard-steps {
  display: flex;
  gap: 0;
  margin-bottom: 1.75rem;
  position: relative;
}
.ep-wizard-steps::before {
  content: '';
  position: absolute;
  top: 18px; left: 0; right: 0;
  height: 2px;
  background: var(--border);
  z-index: 0;
}
.ep-wizard-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  position: relative;
  z-index: 1;
}
.ep-wizard-step-num {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem;
  font-weight: 800;
  color: var(--text-3);
  transition: all .2s;
}
.ep-wizard-step.done .ep-wizard-step-num {
  background: var(--green-lo);
  border-color: var(--green);
  color: var(--green);
}
.ep-wizard-step.active .ep-wizard-step-num {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(255,122,0,.18);
}
.ep-wizard-step-label {
  font-size: .7rem;
  font-weight: 700;
  color: var(--text-3);
  text-align: center;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ep-wizard-step.active .ep-wizard-step-label { color: var(--orange); }
.ep-wizard-step.done  .ep-wizard-step-label  { color: var(--green); }

/* ─── SPLIT INFO ROW ──────────────────────────────────────────── */
.ep-split-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.ep-split-row-item {
  flex: 1;
  min-width: 160px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .85rem 1rem;
}
.ep-split-row-label {
  font-size: .68rem;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .3rem;
}
.ep-split-row-value {
  font-size: .92rem;
  font-weight: 700;
  color: var(--text);
}

/* ─── PULSING LIVE INDICATOR ─────────────────────────────────── */
.ep-live-dot {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .72rem;
  font-weight: 700;
  color: var(--green);
}
.ep-live-dot::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  animation: ep-pulse 1.8s ease-in-out infinite;
  flex-shrink: 0;
}

/* ─── KEYBOARD SHORTCUT KEY ──────────────────────────────────── */
.ep-kbd {
  display: inline-block;
  padding: .1rem .4rem;
  border-radius: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: .65rem;
  font-family: var(--mono);
  color: var(--text-3);
  font-weight: 700;
}

/* ─── FROSTED GLASS MODAL STYLE ──────────────────────────────── */
.ep-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(6px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.ep-modal-overlay.open { display: flex; }
.ep-modal {
  background: var(--card);
  border: 1px solid var(--border-md);
  border-radius: 18px;
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
  animation: fadeUp .3s ease;
}
.ep-modal-head {
  padding: 1.25rem 1.4rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.ep-modal-title { font-size: 1rem; font-weight: 800; color: var(--text); letter-spacing: -.02em; }
.ep-modal-close {
  width: 28px; height: 28px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface);
  border: none;
  cursor: pointer;
  color: var(--text-3);
  font-size: .85rem;
  transition: all .15s;
  flex-shrink: 0;
}
.ep-modal-close:hover { background: var(--raised); color: var(--text); }
.ep-modal-body { padding: 1.25rem 1.4rem; }
.ep-modal-footer {
  padding: 1rem 1.4rem;
  border-top: 1px solid var(--border);
  display: flex;
  gap: .75rem;
  justify-content: flex-end;
}

/* ─── FORM FIELD GROUPS V2 ────────────────────────────────────── */
.ep-form-row {
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
}
.ep-form-row-2 { grid-template-columns: 1fr 1fr; }
.ep-form-row-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 640px) { .ep-form-row-2, .ep-form-row-3 { grid-template-columns: 1fr; } }

.ep-field {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.ep-field-label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .07em;
}
.ep-field-hint {
  font-size: .72rem;
  color: var(--text-3);
  margin-top: .2rem;
  line-height: 1.5;
}
.ep-field-error {
  font-size: .72rem;
  color: var(--red);
  margin-top: .2rem;
  display: flex;
  align-items: center;
  gap: 4px;
}
.ep-field.has-error .ep-form-control {
  border-color: rgba(227,93,93,.5) !important;
  box-shadow: 0 0 0 3px rgba(227,93,93,.1) !important;
}
.ep-field.has-success .ep-form-control {
  border-color: rgba(61,214,140,.5) !important;
}

/* Input with inner prefix/suffix */
.ep-input-group {
  display: flex;
  align-items: stretch;
}
.ep-input-prefix, .ep-input-suffix {
  display: flex;
  align-items: center;
  padding: 0 .85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-3);
  font-size: .82rem;
  font-weight: 600;
  transition: border-color .2s;
  flex-shrink: 0;
}
.ep-input-prefix { border-right: none; border-radius: var(--r-sm) 0 0 var(--r-sm); }
.ep-input-suffix { border-left: none; border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.ep-input-group .ep-form-control { border-radius: 0 !important; }
.ep-input-group .ep-form-control:focus ~ .ep-input-suffix,
.ep-input-group:focus-within .ep-input-prefix,
.ep-input-group:focus-within .ep-input-suffix { border-color: var(--orange); }

/* ─── LIGHT MODE v8 ───────────────────────────────────────────── */
html.light-mode .ep-skeleton {
  background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%);
  background-size: 800px 100%;
}
html.light-mode .ep-feature-card { box-shadow: none; }
html.light-mode .ep-activity-item:hover { background: rgba(0,0,0,.02); }
html.light-mode .ep-notif-item.unread { background: rgba(255,122,0,.05); }
html.light-mode .ep-pill-tabs { background: rgba(0,0,0,.06); }
html.light-mode .ep-pill-tab.active { background: #fff; }
html.light-mode .ep-modal-overlay { background: rgba(0,0,0,.45); }
html.light-mode .ep-modal { border: 1px solid rgba(0,0,0,.1); box-shadow: 0 24px 60px rgba(0,0,0,.2); }


/* ─── RESPONSIVE v8 ───────────────────────────────────────────── */
@media (max-width: 640px) {
  .ep-fab { bottom: 90px; right: 18px; width: 46px; height: 46px; font-size: 1rem; }
  .ep-wizard-step-label { display: none; }
  .ep-split-row-item { min-width: 100%; }
}


/* ════════════════════════════════════════════════════════════
   RESPONSIVE ULTRA v9 — Mobile-First Global Layer
   Couvre toutes les pages de l'application via classes partagées.
   Les !important sont intentionnels : ils écrasent les styles
   inline des templates (cascade order < !important).
   ════════════════════════════════════════════════════════════ */

/* ── 1. TABLES : scrollables horizontalement ──────────────── */
.ep-tbl-wrap,
.ep-table-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}
/* Assure que les tables débordent correctement dans leur wrapper */
.ep-tbl-wrap table,
.ep-table-wrap table,
.ep-tbl-wrap .ep-table,
.ep-table-wrap .ep-table {
  min-width: 560px;
}

/* ── 2. TOASTS ─────────────────────────────────────────────── */
@media (max-width: 520px) {
  .ep-toasts {
    width: calc(100vw - 24px) !important;
    right: 12px !important;
    left: 12px !important;
    top: 12px !important;
  }
}

/* ── 3. NOTIFICATION PANEL → bottom sheet ──────────────────── */
@media (max-width: 520px) {
  .ep-notif-panel {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 82vh;
    overflow-y: auto;
  }
  .ep-msg-panel {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 82vh;
    overflow-y: auto;
  }
}

/* ── 4. MODAL → bottom sheet on mobile ────────────────────── */
@media (max-width: 640px) {
  .ep-modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .ep-modal {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 88vh;
    margin: 0;
  }
}

/* ── 5. KPI / STATS grids ──────────────────────────────────── */
@media (max-width: 480px) {
  .ep-kpi-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 340px) {
  .ep-kpi-grid { grid-template-columns: 1fr !important; }
}

/* ── 6. UC-STATS (stat bars dans pages user/comptes) ──────── */
@media (max-width: 640px) {
  .uc-stats { flex-wrap: wrap !important; }
  .uc-stat  { min-width: calc(50% - 6px) !important; flex: none !important; }
}
@media (max-width: 360px) {
  .uc-stat  { min-width: 100% !important; }
}

/* ── 7. CL-STATS (3-col classes page) ─────────────────────── */
@media (max-width: 640px) {
  .cl-stats { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 360px) {
  .cl-stats { grid-template-columns: 1fr !important; }
}

/* ── 8. FORM ROWS (named grid helpers) ────────────────────── */
@media (max-width: 640px) {
  .ep-form-row-2,
  .ep-form-row-3 { grid-template-columns: 1fr !important; }
}

/* ── 9. CONTENT WRAPS padding serré mobile ─────────────────── */
@media (max-width: 480px) {
  .uc-wrap, .cl-wrap { padding: 16px 10px 72px !important; }
  .ep-main { padding: 52px 10px 80px !important; }
}

/* ── 10. CARD GRIDS (user/class/établissement) ─────────────── */
@media (max-width: 400px) {
  .uc-grid, .cl-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── 11. TOOLBAR → colonne sur mobile ──────────────────────── */
@media (max-width: 640px) {
  .uc-toolbar, .cl-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .uc-tf, .cl-tf { min-width: 0 !important; width: 100% !important; }
  .uc-sel, .cl-sel { min-width: 0 !important; width: 100% !important; }
  .uc-pills { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
}

/* ── 12. LEVEL FILTER PILLS → scroll horizontal ────────────── */
@media (max-width: 640px) {
  .cl-pills {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cl-pills::-webkit-scrollbar { display: none; }
  .cl-pill { flex-shrink: 0; }
}

/* ── 13. UC-CARD / CL-CARD chips → wrap ok ─────────────────── */
@media (max-width: 360px) {
  .uc-chips, .cl-chips { flex-wrap: wrap; }
  .uc-foot, .cl-foot { flex-direction: column; gap: 8px; }
  .uc-cta, .cl-cta { align-self: flex-end; }
}

/* ── 14. EP-ACTIONS-GRID touch targets ─────────────────────── */
@media (max-width: 640px) {
  .ep-action-item { min-height: 56px; }
  .ep-btn { min-height: 40px; }
}

/* ── 15. TOPBAR — search icon only on tiny screens ─────────── */
@media (max-width: 360px) {
  .ep-topbar { padding: 0 10px; }
}

/* ── 16. HEADER search bar cache sur très petits écrans ─────── */
@media (max-width: 420px) {
  .ep-header-search-shortcut { display: none; }
}

/* ── 17. PAGE HEADERS inline → colonne ─────────────────────── */
@media (max-width: 480px) {
  .ep-page-header { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
}

/* ── 18. BREADCRUMB wrap ───────────────────────────────────── */
.uc-bread, .cl-bread {
  flex-wrap: wrap;
}

/* ── 19. TABLE inside ep-card — ne pas forcer display:block ────
   Le scroll horizontal est géré par .ep-table-scroll/.ep-table-wrap
   wrappant la table. Changer display:block casse l'alignement cols. */
.ep-card table, .ep-card-glow table {
  width: 100%;
}

/* ── 20. INPUT/SELECT sizing touch-friendly ─────────────────── */
@media (max-width: 640px) {
  .ep-form-control,
  .ep-input, .ep-select, .ep-textarea {
    font-size: 16px !important; /* évite zoom iOS */
    min-height: 44px;
  }
  select.ep-form-control { min-height: 44px; }
}

/* ── 21. ACTIONS-GRID 3-col → 2-col mobile ─────────────────── */
@media (max-width: 480px) {
  .ep-actions-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── 22. Horizontal scroll hint indicator ──────────────────── */
.ep-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--border-md) transparent;
}
.ep-scroll-x::-webkit-scrollbar { height: 3px; }
.ep-scroll-x::-webkit-scrollbar-thumb { background: var(--border-md); border-radius: 3px; }

/* ── 23. Grilles 2-col inline : classe utilitaire responsive ── */
.ep-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.ep-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 640px) {
  .ep-grid-2 { grid-template-columns: 1fr !important; }
  .ep-grid-3 { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 380px) {
  .ep-grid-3 { grid-template-columns: 1fr !important; }
}

/* ── 24. Stat section générique 3-col ──────────────────────── */
@media (max-width: 640px) {
  [style*="grid-template-columns:repeat(3"] { /* couvert par JS */ }
  .ep-stat-3 { grid-template-columns: 1fr 1fr !important; }
}

/* ── 25. Min touch target size helper ──────────────────────── */
@media (max-width: 640px) {
  .ep-touch { min-height: 44px; min-width: 44px; }
}

/* ── 26. Annonces / cards flexbox responsive ────────────────── */
@media (max-width: 640px) {
  .ep-card-row { flex-direction: column !important; }
  .ep-card-row > * { min-width: 0 !important; }
}

/* ── 27. Overflow texte dans tableaux ──────────────────────── */
@media (max-width: 640px) {
  .ep-table td, .ep-table th {
    white-space: nowrap;
  }
}

/* ── 28. Inputs dans formulaires: no zoom iOS ──────────────── */
input[type="text"],
/* font-size min 16px uniquement mobile pour éviter le zoom iOS */
@media (max-width: 640px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="search"],
  select, textarea {
    font-size: 16px !important;
  }
}

/* ── 29. Images responsives globales ───────────────────────── */
img { max-width: 100%; height: auto; }

/* ── 30. Inline flex wrap safe ─────────────────────────────── */
@media (max-width: 480px) {
  .ep-header-actions { gap: 4px !important; }
}

/* ── 31. WELCOME section ─────────────────────────────────────── */
@media (max-width: 480px) {
  .ep-welcome { padding: 18px 16px 16px !important; }
  .ep-welcome-title { font-size: 19px !important; }
  .ep-welcome-sub { font-size: 12px !important; }
}

/* ── 32. Search results / dropdown mobile ────────────────────── */
@media (max-width: 640px) {
  .ep-search-results {
    position: fixed !important;
    top: 52px !important; /* sous topbar */
    left: 0 !important; right: 0 !important;
    border-radius: 0 0 16px 16px !important;
    max-height: 70vh;
    overflow-y: auto;
  }
}

/* ── 33. EP-TOPBAR : search accessible ──────────────────────── */
@media (max-width: 992px) {
  .ep-topbar { gap: 8px; }
}

/* ── 34. Padding horizontal pages auth ────────────────────────── */
@media (max-width: 480px) {
  .ep-auth-card { padding: 24px 18px !important; }
  .ep-auth-right { padding: 16px !important; }
}

/* ── 35. Sidebar — Mes Établissements ───────────────────────── */
.ep-etab-link { border-left: 2px solid #f97316; padding-left: 10px; }
.ep-etab-link--uni  { border-left-color: #6398ff; }
.ep-etab-link--form { border-left-color: #2dd4bf; }
.ep-etab-link-icon  { color: #f97316 !important; flex-shrink: 0; }
.ep-etab-link--uni  .ep-etab-link-icon { color: #6398ff !important; }
.ep-etab-link--form .ep-etab-link-icon { color: #2dd4bf !important; }
.ep-etab-link-text  { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ep-etab-link-arrow { font-size: 9px; opacity: 0; transition: opacity .15s, transform .15s; flex-shrink: 0; }
.ep-etab-link:hover .ep-etab-link-arrow { opacity: .6; transform: translateX(2px); }

/* ── 35b. Sidebar — Mes Établissements cards (legacy) ────────── */
.ep-etab-card {
  display: block;
  margin: 4px 8px 6px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,122,0,.18);
  background: var(--card);
  text-decoration: none;
  transition: transform .2s cubic-bezier(.34,1.4,.64,1), box-shadow .2s, border-color .2s;
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.ep-etab-card:hover {
  transform: translateY(-3px) scale(1.013);
  box-shadow: 0 10px 32px rgba(255,122,0,.18), 0 0 0 1px rgba(255,122,0,.35);
  border-color: rgba(255,122,0,.45);
}

/* Banner gradient — overridden per type via inline style */
.ep-etab-banner {
  height: 38px;
  background: linear-gradient(135deg, #4a1300 0%, #8a2800 50%, #c94500 100%);
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 7px 9px 0;
  flex-shrink: 0;
}
.ep-etab-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 50%, rgba(255,255,255,.10) 0%, transparent 60%);
}
.ep-etab-type-pill {
  font-size: 8px; font-weight: 800;
  color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.22);
  padding: 2px 8px; border-radius: 100px;
  letter-spacing: .6px; text-transform: uppercase;
  position: relative; z-index: 1;
  backdrop-filter: blur(4px);
}

.ep-etab-av-wrap {
  display: flex;
  justify-content: center;
  margin-top: -22px;
  margin-bottom: 6px;
  position: relative; z-index: 2;
}
.ep-etab-av {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4a1300, #c94500);
  color: #fff;
  font-size: 15px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid var(--card);
  box-shadow: 0 4px 14px rgba(0,0,0,.45), 0 0 0 1px rgba(255,122,0,.25);
  overflow: hidden; flex-shrink: 0;
  text-transform: uppercase;
  transition: box-shadow .2s;
}
.ep-etab-card:hover .ep-etab-av {
  box-shadow: 0 6px 18px rgba(0,0,0,.5), 0 0 0 2px rgba(255,122,0,.5);
}
.ep-etab-av img { width: 100%; height: 100%; object-fit: cover; }

/* Per-type gradient overrides */
.ep-etab-av--uni  { background: linear-gradient(135deg, #1a237e, #3949ab); box-shadow: 0 4px 14px rgba(0,0,0,.45), 0 0 0 1px rgba(99,152,255,.25); }
.ep-etab-av--form { background: linear-gradient(135deg, #004d40, #00897b); box-shadow: 0 4px 14px rgba(0,0,0,.45), 0 0 0 1px rgba(45,212,191,.25); }
.ep-etab-card:hover .ep-etab-av--uni  { box-shadow: 0 6px 18px rgba(0,0,0,.5), 0 0 0 2px rgba(99,152,255,.5); }
.ep-etab-card:hover .ep-etab-av--form { box-shadow: 0 6px 18px rgba(0,0,0,.5), 0 0 0 2px rgba(45,212,191,.5); }

.ep-etab-body {
  text-align: center;
  padding: 0 12px 8px;
}
.ep-etab-nom {
  font-size: 12px; font-weight: 900;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 4px; line-height: 1.3;
}
.ep-etab-sub {
  font-size: 9.5px; color: var(--text-3);
  font-family: monospace; letter-spacing: .3px;
}

.ep-etab-foot {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  font-size: 10.5px; font-weight: 700;
  color: #f97316;
  background: rgba(255,122,0,.04);
  transition: background .15s;
}
.ep-etab-foot--uni  { color: #6398ff; background: rgba(99,152,255,.04); }
.ep-etab-foot--form { color: #2dd4bf; background: rgba(45,212,191,.04); }
.ep-etab-card:hover .ep-etab-foot      { background: rgba(255,122,0,.10); }
.ep-etab-card:hover .ep-etab-foot--uni  { background: rgba(99,152,255,.10); }
.ep-etab-card:hover .ep-etab-foot--form { background: rgba(45,212,191,.10); }
.ep-etab-foot i {
  font-size: 9px;
  transition: transform .15s;
}
.ep-etab-card:hover .ep-etab-foot i { transform: translateX(3px); }


/* ─── Section Demain (sidebar étudiant) ──────────────────────────── */
.ep-dmn-section {
  display: flex; align-items: center; justify-content: space-between;
  padding-right: 10px;
}
.ep-dmn-section i { color: var(--orange); font-size: 9px; }
.ep-dmn-day { color: var(--orange); font-weight: 800; font-size: 9.5px; letter-spacing: 0; text-transform: none; }
/* Liens séances */
.ep-dmn-seance { border-left-color: rgba(255,122,0,.5) !important; }
.ep-dmn-t { font-size: 10px; font-weight: 800; color: var(--orange); min-width: 36px; flex-shrink: 0; }
.ep-dmn-m { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; }
.ep-dmn-s { font-size: 9px; color: var(--text-3); flex-shrink: 0; }
/* Devoir alerte */
.ep-dmn-devoir-link { color: #d97706 !important; }
.ep-dmn-devoir-link i { color: #d97706 !important; }
.ep-dmn-edt-link:hover { opacity: 1; }


/* ════════════════════════════════════════════════════════════
   RESPONSIVE FINAL v10 — Polishing Layer
   Couvre les patterns non gérés par le JS responsive helper
   et les composants spécifiques aux pages avancées.
   ════════════════════════════════════════════════════════════ */

/* ── 36. SECTION HEAD padding mobile ───────────────────────── */
@media (max-width: 640px) {
  .ep-section-head { padding: 18px 14px 10px !important; }
}
@media (max-width: 480px) {
  .ep-section-head { padding: 14px 10px 8px !important; flex-wrap: wrap; gap: 8px; }
  .ep-section-head .ep-btn { align-self: flex-end; }
}

/* ── 37. DIRECTOR ALERT PENDING flex wrap ──────────────────── */
@media (max-width: 480px) {
  .dir-alert-pending { flex-wrap: wrap !important; gap: 10px !important; }
  .dir-alert-pending .ep-btn { width: 100%; justify-content: center; }
}

/* ── 38. DIR-STAT-GRID (auto-fill already responsive) ──────── */
@media (max-width: 360px) {
  .dir-stat-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ── 39. LIC-STATS overflow mobile ─────────────────────────── */
@media (max-width: 480px) {
  .lic-stats { flex-wrap: wrap !important; }
  .lic-stat { flex: 1 1 45% !important; }
  .lic-stat + .lic-stat { border-left: none !important; border-top: 1px solid var(--border); }
}

/* ── 40. CHALLENGE FEED CARD VS row compact ─────────────────── */
@media (max-width: 380px) {
  .ep-chal-feed-vs { padding: 10px 10px !important; gap: 4px !important; }
  .ep-chal-feed-av { width: 30px !important; height: 30px !important; font-size: .72rem !important; }
  .ep-chal-feed-name { max-width: 72px !important; font-size: .78rem !important; }
  .ep-chal-feed-pts { font-size: 1.15rem !important; }
}

/* ── 40b. DEVOIR EMBED (post card) ──────────────────────────── */
.ep-dv-embed{display:flex;align-items:center;gap:12px;margin:10px 14px;padding:12px 14px;background:var(--surface);border:1px solid var(--border);border-radius:12px;border-left:3px solid var(--orange);}
.ep-dv-embed-icon{width:38px;height:38px;border-radius:10px;background:rgba(255,122,0,.1);display:flex;align-items:center;justify-content:center;color:var(--orange);font-size:1rem;flex-shrink:0;}
.ep-dv-embed-body{flex:1;min-width:0;}
.ep-dv-embed-label{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--orange);margin-bottom:2px;}
.ep-dv-embed-title{font-size:.88rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ep-dv-embed-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:3px;font-size:.68rem;color:var(--text-3);}
.ep-dv-embed-cta{display:inline-flex;align-items:center;gap:6px;padding:.38rem .85rem;border-radius:8px;background:var(--orange);color:#fff;font-size:.76rem;font-weight:700;text-decoration:none;white-space:nowrap;flex-shrink:0;transition:opacity .15s;}
.ep-dv-embed-cta:hover{opacity:.85;}
@media(max-width:480px){
  .ep-dv-embed{flex-wrap:wrap;gap:8px;}
  .ep-dv-embed-cta{width:100%;justify-content:center;}
}

/* ── 41. MOBILE MONEY steps (5-col) ─────────────────────────── */
@media (max-width: 400px) {
  .mm-step { font-size: .65rem !important; padding: 8px 2px !important; }
}

/* ── 42. POST COMPOSER footer wrapping ──────────────────────── */
@media (max-width: 640px) {
  .ep-composer-footer { flex-direction: column; align-items: stretch; }
  .ep-post-btn { width: 100%; justify-content: center; }
}
@media (max-width: 420px) {
  .ep-composer-meta { flex-direction: column; align-items: stretch; }
  .ep-composer-select { width: 100%; }
}

/* ── 43. AUDIENCE SELECT min-width on mobile ─────────────────── */
@media (max-width: 640px) {
  .ep-audience-select { min-width: 0 !important; width: 100% !important; }
  .ep-audience-row { flex-wrap: wrap !important; }
}

/* ── 44. SEARCH FORM full-width on mobile ────────────────────── */
@media (max-width: 640px) {
  form[action*="recherche"] { flex-wrap: wrap !important; }
}

/* ── 45. STU-PAGE responsive padding ─────────────────────────── */
@media (max-width: 640px) {
  .stu-page { padding: 16px 12px 60px !important; }
}
@media (max-width: 400px) {
  .stu-page { padding: 12px 8px 60px !important; }
  .stu-title { font-size: 18px !important; }
  .stu-header-kpi { padding: 8px 14px !important; }
  .stu-kpi-big { font-size: 20px !important; }
}

/* ── 46. CONV-CARD and STU-ITEM wrapping on mobile ───────────── */
@media (max-width: 480px) {
  .stu-item { padding: 12px 14px !important; }
  .conv-card { padding: 14px 14px !important; }
  .conv-card-hd { flex-wrap: wrap; }
}

/* ── 47. TC-GRID (teacher cards) minimum width mobile ────────── */
@media (max-width: 360px) {
  .tc-grid { grid-template-columns: 1fr !important; }
}

/* ── 48. MAT-GRID (subject cards) minimum on very small ─────── */
@media (max-width: 360px) {
  .mat-grid { grid-template-columns: 1fr !important; }
}

/* ── 49. AMIS LAYOUT mobile max-width ────────────────────────── */
@media (max-width: 640px) {
  .amis-layout { padding: 4px 0 16px !important; }
  .friends-grid { padding: 12px 10px !important; gap: 10px !important; }
}

/* ── 50. EP-COMPOSER on very small screens ───────────────────── */
@media (max-width: 360px) {
  .ep-composer { padding: 12px 10px !important; }
  .ep-composer-av { width: 30px !important; height: 30px !important; font-size: 11px !important; }
  .ep-tool-btn { width: 28px !important; height: 28px !important; }
}

/* ── 51. EP-REACTIONS-BAR single-line overflow scroll ────────── */
@media (max-width: 480px) {
  .ep-reactions-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .ep-reactions-bar::-webkit-scrollbar { display: none; }
  .ep-reaction-btn { flex-shrink: 0; }
}

/* ── 52. EP-POST-ACTIONS-BAR center on mobile ───────────────── */
@media (max-width: 480px) {
  .ep-post-actions-bar { gap: 0 !important; }
  .ep-post-action-btn { flex: 1 !important; justify-content: center !important; font-size: .8rem !important; }
}

/* ── 53. SUBSCRIPTION CONTRACT DETAIL grid ───────────────────── */
@media (max-width: 640px) {
  .ep-contract-grid { grid-template-columns: 1fr !important; }
}

/* ── 54. WIZARD (setup) responsive helpers ───────────────────── */
@media (max-width: 640px) {
  .ep-wizard-steps { overflow-x: auto; flex-wrap: nowrap !important; padding-bottom: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .ep-wizard-steps::-webkit-scrollbar { display: none; }
  .ep-wizard-step { flex-shrink: 0; }
  .ep-wizard-pane { padding: 20px 14px !important; }
}

/* ── 55. EP-FEED-FILTERS + EP-FILTER-PILL — global ──────────── */
.ep-feed-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.ep-filter-pill {
  padding: .3rem .9rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--t);
  white-space: nowrap;
  flex-shrink: 0;
}
.ep-filter-pill:hover { border-color: var(--orange); color: var(--orange); }
.ep-filter-pill.active { background: var(--orange); color: #fff; border-color: var(--orange); }

@media (max-width: 767px) {
  .ep-feed-filters {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 6px;
    gap: 6px;
  }
  .ep-feed-filters::-webkit-scrollbar { display: none; }
  .ep-filter-pill {
    flex-shrink: 0;
    padding: .25rem .7rem;
    font-size: .74rem;
  }
}
@media (max-width: 380px) {
  .ep-feed-filters { gap: 4px; }
  .ep-filter-pill { padding: .2rem .6rem; font-size: .72rem; }
}

/* ── 56. EP-PAGE-HEADER-ACTIONS wrap on mobile ──────────────── */
@media (max-width: 640px) {
  .ep-page-header-actions { flex-wrap: wrap; gap: 6px; }
}
@media (max-width: 380px) {
  .ep-page-header-actions .ep-btn { font-size: .78rem !important; padding: 5px 10px !important; }
}

/* ── 57. FICHE DIRECTOR form padding mobile ──────────────────── */
@media (max-width: 640px) {
  .ep-wizard-section { padding: 16px 12px !important; }
}

/* ── 58. BOTTOM NAV safe area (notch) ───────────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .ep-bottom-nav { padding-bottom: env(safe-area-inset-bottom); }
}

/* ── 59. Prevent text overflow in ep-badge ──────────────────── */
.ep-badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 60. ECHEANCIER TIMELINE mobile ─────────────────────────── */
@media (max-width: 480px) {
  .ech-timeline { padding-left: 18px !important; }
  .ech-item { gap: 10px !important; }
  .ech-dot { width: 28px !important; height: 28px !important; font-size: .75rem !important; }
}

/* ── 61. PARENT PRESENCES stats grid 5-col → 3-col → 2-col ─── */
/* Handled by JS for repeat() patterns, this is a CSS fallback */
@media (max-width: 640px) {
  [style*="repeat(5,1fr)"], [style*="repeat(5, 1fr)"] {
    grid-template-columns: 1fr 1fr 1fr !important;
  }
}
@media (max-width: 420px) {
  [style*="repeat(5,1fr)"], [style*="repeat(5, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ── 62. MEDIA QUERIES — print de sécurité ──────────────────── */
@media print {
  .ep-sidebar, .ep-topbar, .ep-bottom-nav, .ep-fab,
  .ep-notif-panel, .ep-msg-panel, .ep-toasts { display: none !important; }
  .ep-main { margin-left: 0 !important; padding: 0 !important; }
  .ep-content { max-width: 100% !important; }
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE GLOBAL v11 — Couverture Tous Écrans
   Breakpoints manquants, overflow, dropdowns, tableaux, auth
   ════════════════════════════════════════════════════════════ */

/* ── 63. PUB-DROPDOWN — empêche le débordement latéral ────── */
.pub-dropdown {
  max-width: min(300px, calc(100vw - 24px));
}
@media (max-width: 480px) {
  .pub-dropdown {
    right: 0 !important;
    left: auto !important;
    max-width: calc(100vw - 16px);
    width: calc(100vw - 16px);
  }
}

/* ── 64. BREAKPOINTS TABLETTE (768px–900px) manquants ─────── */
@media (max-width: 900px) and (min-width: 768px) {
  .ep-3col-grid { grid-template-columns: 1fr 1fr !important; }
  .ep-4col-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ── 65. TABLES — défilement horizontal sur mobile ─────────── */
@media (max-width: 640px) {
  .ep-table-wrap {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .ep-table-wrap::-webkit-scrollbar { height: 4px; }
  .ep-table-wrap::-webkit-scrollbar-thumb { background: var(--border-md); border-radius: 4px; }
}

/* ── 66. AUTH — collapse 50/50 layout sur mobile ──────────── */
@media (max-width: 640px) {
  .ep-auth-wrap { flex-direction: column; min-height: 100svh; }
  .ep-auth-left  { display: none; }
  .ep-auth-right {
    width: 100% !important;
    padding: 24px 16px !important;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
@media (max-width: 360px) {
  .ep-auth-right { padding: 16px 12px !important; }
  .ep-auth-form  { padding: 20px 14px !important; }
}

/* ── 67. EP-SIDEBAR — géré par le breakpoint 992px en base_app ─ */
/* La sidebar devient un drawer slide-out à ≤992px (position:fixed),
   donc aucune règle tablette supplémentaire n'est nécessaire ici. */

/* ── 68. CARTES DE STATS — 2 colonnes sur mobile ───────────── */
@media (max-width: 640px) {
  .ep-stats-row { flex-wrap: wrap !important; }
  .ep-stat-card { flex: 1 1 calc(50% - 6px) !important; min-width: 120px !important; }
}
@media (max-width: 340px) {
  .ep-stat-card { flex: 1 1 100% !important; }
}

/* ── 69. EP-CARD-GRID — auto-adapt sur petits écrans ────────── */
@media (max-width: 640px) {
  .ep-card-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (min-width: 641px) and (max-width: 900px) {
  .ep-card-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── 70. LIKE PICKER — centré et pleine largeur mobile ─────── */
@media (max-width: 480px) {
  .ep-like-picker {
    width: calc(100vw - 32px) !important;
    max-width: 320px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
}

/* ── 71. SHARE MODAL — bottom sheet sur mobile ─────────────── */
@media (max-width: 640px) {
  #epShareModal .ep-modal {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    margin: 0 !important;
  }
  #epShareModal {
    align-items: flex-end !important;
    padding: 0 !important;
  }
}

/* ── 72. EP-TOPBAR sur très petits écrans ───────────────────── */
@media (max-width: 360px) {
  .ep-topbar { padding: 0 10px !important; gap: 8px !important; }
  .ep-topbar-search { display: none !important; }
}

/* ── 73. BOTTOM NAV — géré dans les règles ep-bnav-* ─────────── */

/* ── 74. LIKE WALLET WIDGET — compact sur mobile ────────────── */
@media (max-width: 480px) {
  .ep-wallet-widget { padding: 14px !important; }
  .ep-wallet-num   { font-size: 2rem !important; }
}

/* ── 75. PUB-NAV — réduction padding sur mobiles ───────────── */
@media (max-width: 480px) {
  .pub-nav-inner { padding: 0 16px !important; gap: 12px !important; }
  .pub-brand     { font-size: 15px !important; }
}
@media (max-width: 360px) {
  .pub-nav-inner { padding: 0 10px !important; }
  /* Écran minuscule : on ne garde que l'icône. La règle visait auparavant
     `span:not(.pub-brand-icon)`, ce qui ne masquait QUE le « TA » — le logo affichait
     alors « ITA », le nom de la marque tronqué. On masque le mot entier. */
  .pub-brand .brand-word { display: none; }
}

/* ── 76. LP HOME — corrections orbs et hero sur mobile ─────── */
@media (max-width: 480px) {
  .lp-hero { padding: 80px 0 48px !important; min-height: auto !important; }
  .lp-hero-inner { padding: 0 16px !important; }
  .lp-hero-h1 { font-size: 30px !important; }
  .lp-hero-sub { font-size: 15px !important; }
  .lp-ctas { flex-direction: column; gap: 10px !important; }
  .lp-btn-p, .lp-btn-g { width: 100%; justify-content: center; }
}
@media (max-width: 360px) {
  .lp-hero-h1 { font-size: 26px !important; }
  .lp-pill    { font-size: 10px !important; padding: 4px 10px 4px 6px !important; }
}

/* ── 77. LP HOME — sections padding réduit sur mobile ──────── */
@media (max-width: 640px) {
  .lp-sec { padding: 60px 16px !important; }
  .lp-h2  { font-size: 26px !important; }
}
@media (max-width: 420px) {
  .lp-sec { padding: 48px 14px !important; }
  .lp-rpanel-inner { padding: 18px 14px !important; gap: 16px !important; }
  .lp-steps-wrap .lp-step { padding: 0 10px !important; margin-bottom: 28px; }
  .lp-cta-in { padding: 72px 16px !important; }
  .lp-cta-h2 { font-size: 26px !important; }
}

/* ── 78. LP HOME — tablette (680px–1024px) ─────────────────── */
@media (max-width: 1024px) and (min-width: 681px) {
  .lp-hero { padding: 100px 0 60px; }
  .lp-hero-inner { padding: 0 28px; gap: 28px; }
  .lp-estab-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ── 79. FONDATEUR — layout tablette ───────────────────────── */
@media (max-width: 768px) {
  .lp-founder-inner { grid-template-columns: 1fr !important; gap: 24px !important; }
  .lp-founder-img   { max-width: 240px; margin: 0 auto; }
}

/* ── 80. STATS SECTION — 1 col sur très petit écran ────────── */
@media (max-width: 420px) {
  .lp-stats-in { grid-template-columns: 1fr 1fr !important; }
  .lp-stat { padding: 14px 10px !important; }
  .lp-stat-n { font-size: 26px !important; }
}

/* ── 81. EP-POST-CARD — typographie très petit écran ────────── */
@media (max-width: 340px) {
  .ep-post-author-name { font-size: .8rem !important; }
  .ep-post-text        { font-size: .88rem !important; }
  .ep-post-footer-btn  { font-size: .72rem !important; padding: 5px 6px !important; }
}

/* ── 82. EP-FEED-PAGE — padding latéral réduit ──────────────── */
@media (max-width: 380px) {
  .ep-feed-page,
  .ep-content { padding-left: 10px !important; padding-right: 10px !important; }
  .ep-post-card { padding: 14px 10px !important; }
}

/* ── 83. SAFE AREA top pour les notchs iPhone ───────────────── */
@supports (padding-top: env(safe-area-inset-top)) {
  .pub-nav { padding-top: env(safe-area-inset-top); height: calc(62px + env(safe-area-inset-top)); }
  .ep-topbar { padding-top: env(safe-area-inset-top); }
}

/* ══════════════════════════════════════════════════════════════════
   ── 84. PREMIUM DESIGN SYSTEM v12 ─────────────────────────────
   Aurora · Glassmorphism · Shimmer · Gradient Borders · Glow
   Appliqué à TOUTE l'application
══════════════════════════════════════════════════════════════════ */

/* ── P1. TOKENS PREMIUM ─────────────────────────────────────── */
:root {
  --shadow-card:  0 4px 24px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.03) inset;
  --t-smooth:     .22s cubic-bezier(.4,0,.2,1);
  --gradient-btn: linear-gradient(135deg, #FF7A00 0%, #FF9A40 100%);
}

/* ── P2. KEYFRAMES GLOBAUX ──────────────────────────────────── */
@keyframes ep-shimmer-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}
@keyframes ep-ambient-pulse {
  0%,100% { opacity:.38; transform:scale(1); }
  50%      { opacity:.6;  transform:scale(1.09); }
}

/* ── P3. BOUTONS — GRADIENT + SHIMMER + GLOW ─────────────────── */
.ep-btn { transition: all var(--t-smooth) !important; }

.ep-btn-primary {
  background: var(--gradient-btn) !important;
  box-shadow: 0 4px 18px rgba(255,122,0,.32), inset 0 1px 0 rgba(255,255,255,.18) !important;
  border: none !important;
  position: relative !important;
  overflow: hidden !important;
}
.ep-btn-primary::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, transparent 20%, rgba(255,255,255,.28) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: ep-shimmer-sweep 3s ease-in-out infinite;
  pointer-events: none;
}
.ep-btn-primary:hover {
  background: var(--gradient-btn) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 0 0 1px rgba(255,122,0,.3), 0 0 40px rgba(255,122,0,.36),
              0 10px 28px rgba(255,122,0,.22), inset 0 1px 0 rgba(255,255,255,.18) !important;
  color: #fff !important;
}
.ep-btn-primary:active { transform: translateY(0) !important; }

.ep-btn-ghost {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  backdrop-filter: blur(8px) !important;
}
.ep-btn-ghost:hover {
  background: rgba(255,122,0,.07) !important;
  border-color: rgba(255,122,0,.3) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.3) !important;
  color: var(--text) !important;
}

.ep-btn-danger {
  background: linear-gradient(135deg, rgba(239,68,68,.14), rgba(239,68,68,.07)) !important;
  border: 1px solid rgba(239,68,68,.22) !important;
  color: #f87171 !important;
}
.ep-btn-danger:hover {
  background: linear-gradient(135deg, rgba(239,68,68,.24), rgba(239,68,68,.14)) !important;
  border-color: rgba(239,68,68,.4) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 0 24px rgba(239,68,68,.18), 0 6px 20px rgba(0,0,0,.28) !important;
  color: #fca5a5 !important;
}

/* ── P4. CARDS PREMIUM ──────────────────────────────────────── */
.ep-card {
  background: linear-gradient(160deg, rgba(18,18,30,.97) 0%, rgba(11,11,22,.98) 100%) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: var(--shadow-card) !important;
  border-radius: 14px !important;
  transition: all var(--t-smooth) !important;
}
.ep-card:hover {
  border-color: rgba(255,255,255,.11) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,122,0,.06),
              0 1px 0 rgba(255,255,255,.04) inset !important;
  transform: translateY(-3px) !important;
}

/* ── P5. KPI — GLOW RENFORCÉ + LIFT ─────────────────────────── */
.ep-kpi-item { transition: all var(--t-smooth) !important; border-radius: 14px !important; }
.ep-kpi-item:hover { transform: translateY(-5px) !important; }
.ep-kpi-item--blue:hover   { box-shadow: 0 0 0 1px rgba(59,130,246,.28), 0 16px 48px rgba(59,130,246,.16) !important; }
.ep-kpi-item--green:hover  { box-shadow: 0 0 0 1px rgba(34,197,94,.28),  0 16px 48px rgba(34,197,94,.14)  !important; }
.ep-kpi-item--purple:hover { box-shadow: 0 0 0 1px rgba(139,92,246,.28), 0 16px 48px rgba(139,92,246,.14) !important; }
.ep-kpi-item--orange:hover { box-shadow: 0 0 0 1px rgba(255,122,0,.3),   0 16px 48px rgba(255,122,0,.16)  !important; }
.ep-kpi-item--red:hover    { box-shadow: 0 0 0 1px rgba(239,68,68,.28),  0 16px 48px rgba(239,68,68,.14)  !important; }
.ep-kpi-item--amber:hover  { box-shadow: 0 0 0 1px rgba(245,158,11,.28), 0 16px 48px rgba(245,158,11,.14) !important; }
.ep-kpi-item--teal:hover   { box-shadow: 0 0 0 1px rgba(20,184,166,.28), 0 16px 48px rgba(20,184,166,.14) !important; }
.ep-kpi-item:hover .ep-kpi-icon { transform: scale(1.12) rotate(-4deg) !important; }

/* ── P6. SIDEBAR — GLASSMORPHISM ─────────────────────────────── */
.ep-nav {
  background: rgba(7,8,13,.93) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  border-right: none !important;
  box-shadow: none !important;
}
.ep-nav-link.active {
  background: linear-gradient(90deg, rgba(255,122,0,.16) 0%, rgba(255,122,0,.05) 100%) !important;
  box-shadow: inset 0 0 24px rgba(255,122,0,.06) !important;
}
.ep-nav-logo-icon {
  box-shadow: 0 4px 20px rgba(255,122,0,.42), 0 0 0 1px rgba(255,122,0,.22),
              0 0 40px rgba(255,122,0,.14) !important;
}
.ep-nav-avatar { box-shadow: 0 0 0 2px rgba(255,122,0,.28) !important; }
.ep-nav-user:hover .ep-nav-avatar {
  box-shadow: 0 0 0 2px var(--orange), 0 0 18px rgba(255,122,0,.3) !important;
}

/* ── P7. FORM CONTROLS — GLASS + FOCUS GLOW ──────────────────── */
.ep-form-control {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 10px !important;
  transition: all .2s cubic-bezier(.4,0,.2,1) !important;
}
.ep-form-control:focus {
  border-color: rgba(255,122,0,.45) !important;
  box-shadow: 0 0 0 3px rgba(255,122,0,.1), 0 0 24px rgba(255,122,0,.1) !important;
  background: rgba(255,122,0,.03) !important;
}

/* ── P8. MODAUX PREMIUM ──────────────────────────────────────── */
.ep-modal {
  background: linear-gradient(160deg, rgba(16,16,28,.99) 0%, rgba(9,9,18,.99) 100%) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  box-shadow: 0 40px 120px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.04) !important;
  border-radius: 18px !important;
  position: relative !important; overflow: hidden !important;
}
.ep-modal::before {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,122,0,.45), rgba(96,165,250,.25), transparent);
  pointer-events: none;
}
.modal-content {
  background: linear-gradient(160deg, rgba(16,16,28,.99) 0%, rgba(9,9,18,.99) 100%) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  box-shadow: 0 40px 120px rgba(0,0,0,.75) !important;
  border-radius: 18px !important;
}

/* ── P9. TABLES PREMIUM ──────────────────────────────────────── */
.ep-table thead th, table.table thead th {
  background: linear-gradient(135deg, rgba(255,122,0,.055) 0%, rgba(59,130,246,.025) 100%) !important;
  border-bottom: 1px solid rgba(255,122,0,.16) !important;
  color: rgba(255,255,255,.55) !important;
  font-size: 10px !important; letter-spacing: .1em !important; text-transform: uppercase !important;
}
.ep-table tbody tr, table.table tbody tr {
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
  transition: background .15s ease !important;
}
.ep-table tbody tr:hover, table.table tbody tr:hover { background: rgba(255,122,0,.04) !important; }

/* ── P10. SCROLLBARS PREMIUM ─────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,.015); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,122,0,.35); }

/* ── P11. PAGE HEADERS — MESH GRID + GLOW ───────────────────── */
.ep-page-header { position: relative !important; overflow: hidden !important; }
.ep-page-header::before {
  content: '';
  position: absolute; top: -60px; right: -40px;
  width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,122,0,.07) 0%, transparent 65%);
  pointer-events: none; z-index: 0;
}
.ep-page-header::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none; z-index: 0;
}
.ep-page-header > * { position: relative; z-index: 1; }

/* ── P12. AMBIENT AURORA — fond global app ───────────────────── */
.ep-main::before {
  content: '';
  position: fixed;
  top: -200px; right: -120px;
  width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,122,0,.04) 0%, transparent 65%);
  pointer-events: none; z-index: 0;
  animation: ep-ambient-pulse 22s ease-in-out infinite;
}
.ep-main::after {
  content: '';
  position: fixed;
  bottom: -180px; left: 60px;
  width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,.03) 0%, transparent 65%);
  pointer-events: none; z-index: 0;
  animation: ep-ambient-pulse 28s ease-in-out infinite reverse;
}

/* ── P13. WIDGET / PANEL DROIT PREMIUM ──────────────────────── */
.ep-widget, .ep-panel-widget {
  background: linear-gradient(160deg, rgba(15,15,26,.98) 0%, rgba(9,9,18,.99) 100%) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.45) !important;
}

/* ── P14. HEADER ACTION BUTTONS ─────────────────────────────── */
.ep-header-action-btn {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  transition: all .2s ease !important;
}
.ep-header-action-btn:hover {
  background: rgba(255,122,0,.1) !important;
  border-color: rgba(255,122,0,.3) !important;
  color: var(--orange) !important;
  box-shadow: 0 0 16px rgba(255,122,0,.15) !important;
}
.ep-header-search-input:focus {
  background: rgba(255,122,0,.04) !important;
  border-color: rgba(255,122,0,.4) !important;
  box-shadow: 0 0 0 3px rgba(255,122,0,.1), 0 0 24px rgba(255,122,0,.1) !important;
}

/* ── P15. BOTTOM NAV MOBILE — light mode ─────────────────────── */
html.light-mode .ep-bnav-item { color: rgba(0,0,0,.38); }
html.light-mode .ep-bottom-nav { background: rgba(255,255,255,.94) !important; }

/* ── P16. POST CARDS PREMIUM ─────────────────────────────────── */
.ep-post-card {
  background: linear-gradient(160deg, rgba(16,16,28,.97) 0%, rgba(10,10,20,.98) 100%) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 14px !important;
  transition: all var(--t-smooth) !important;
}
.ep-post-card:hover {
  border-color: rgba(255,255,255,.1) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.4) !important;
}

/* ── P17. ALERTS PREMIUM ─────────────────────────────────────── */
.ep-alert-success { background: rgba(34,197,94,.08)  !important; border: 1px solid rgba(34,197,94,.2)  !important; }
.ep-alert-danger  { background: rgba(239,68,68,.08)   !important; border: 1px solid rgba(239,68,68,.2)   !important; }
.ep-alert-info    { background: rgba(59,130,246,.08)  !important; border: 1px solid rgba(59,130,246,.2)  !important; }
.ep-alert-warning { background: rgba(245,158,11,.08)  !important; border: 1px solid rgba(245,158,11,.2)  !important; }

/* ── P18. LIGHT MODE GUARD ───────────────────────────────────── */
html.light-mode .ep-card { background: #fff !important; box-shadow: 0 2px 12px rgba(0,0,0,.07) !important; border-color: var(--border) !important; }
html.light-mode .ep-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.1) !important; }
html.light-mode .ep-btn-primary::before { display: none; }
html.light-mode .ep-nav { background: var(--bg) !important; backdrop-filter: none !important; box-shadow: none !important; border-right: none !important; }
html.light-mode .ep-main::before, html.light-mode .ep-main::after { display: none; }
html.light-mode .ep-modal, html.light-mode .modal-content { background: #fff !important; border-color: var(--border) !important; }
html.light-mode .ep-modal::before, html.light-mode .modal-content::before { display: none; }
html.light-mode .ep-widget, html.light-mode .ep-panel-widget { background: #fff !important; border-color: var(--border) !important; box-shadow: 0 2px 12px rgba(0,0,0,.06) !important; }
html.light-mode .ep-btn-ghost { background: rgba(0,0,0,.04) !important; border-color: var(--border-md) !important; }
html.light-mode .ep-post-card { background: #fff !important; border-color: var(--border) !important; box-shadow: 0 2px 10px rgba(0,0,0,.07) !important; }
html.light-mode .ep-post-card:hover { border-color: var(--border-md) !important; box-shadow: 0 6px 24px rgba(0,0,0,.10) !important; }
html.light-mode .ep-page-header::before, html.light-mode .ep-page-header::after { display: none; }
html.light-mode table.table thead th { background: rgba(0,0,0,.025) !important; border-bottom: 1px solid rgba(0,0,0,.08) !important; }
html.light-mode ::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); }
html.light-mode ::-webkit-scrollbar-thumb:hover { background: rgba(255,122,0,.45); }

/* ── P19. LIGHT MODE — OVERRIDES GLOBAUX ────────────────────── */

/* Navigation — hover + scrollbar */
html.light-mode .ep-nav:hover { scrollbar-color: rgba(0,0,0,.15) transparent; }
html.light-mode .ep-nav:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); }
html.light-mode .ep-nav-link:hover { background: rgba(0,0,0,.05) !important; }
html.light-mode .ep-nav-group-toggle:hover { background: rgba(0,0,0,.05) !important; }
html.light-mode .ep-nav-sub-link:hover { background: rgba(0,0,0,.04) !important; }
html.light-mode .ep-nav-footer { border-top-color: var(--border) !important; }

/* Panel droit — borders + hovers */
html.light-mode .ep-panel-widget-head { border-bottom-color: var(--border) !important; }
html.light-mode .ep-panel-link:hover { background: rgba(0,0,0,.04) !important; }
html.light-mode .ep-panel-notif { border-bottom-color: var(--border) !important; }
html.light-mode .ep-panel-notif:hover { background: rgba(0,0,0,.03) !important; }
html.light-mode .ep-panel-friend:hover { background: rgba(0,0,0,.04) !important; }

/* KPI grid — gap color (1px gaps between cells) */
html.light-mode .ep-kpi-grid { background: var(--border) !important; }

/* Cartes Bootstrap + formulaires */
html.light-mode .card { box-shadow: 0 2px 10px rgba(0,0,0,.08) !important; border: 1px solid var(--border) !important; }
html.light-mode .card-header { border-bottom-color: var(--border) !important; background: var(--raised) !important; }
html.light-mode .card-footer { border-top-color: var(--border) !important; background: var(--raised) !important; }
html.light-mode .form-card { box-shadow: 0 2px 10px rgba(0,0,0,.08) !important; border: 1px solid var(--border) !important; }

/* Tables Bootstrap */
html.light-mode .table > :not(caption) > * > * { border-bottom-color: var(--border) !important; }
html.light-mode .table-hover > tbody > tr:hover > * { background-color: rgba(0,0,0,.025) !important; }

/* Tables custom */
html.light-mode .ep-table tr:hover td { background: rgba(0,0,0,.025) !important; }
html.light-mode .ep-table thead th { border-bottom-color: var(--border) !important; }
html.light-mode .ep-table tbody td { border-bottom-color: var(--border) !important; }
html.light-mode .ep-table.striped tbody tr:nth-child(even) td { background: rgba(0,0,0,.025) !important; }

/* Badges + boutons + progress */
html.light-mode .ep-badge-gray { background: rgba(0,0,0,.07) !important; color: var(--text-3) !important; }
html.light-mode .badge.bg-secondary, html.light-mode .badge-secondary { background: rgba(0,0,0,.08) !important; color: var(--text-2) !important; }
html.light-mode .btn-secondary:hover { background: rgba(0,0,0,.07) !important; color: var(--text) !important; }
html.light-mode .progress { background: rgba(0,0,0,.08) !important; }

/* Listes + dropdowns Bootstrap */
html.light-mode .list-group-item:hover { background: rgba(0,0,0,.03) !important; }
html.light-mode .dropdown-item:hover { background: rgba(0,0,0,.05) !important; color: var(--text) !important; }
html.light-mode .dropdown-menu { background: var(--card) !important; border-color: var(--border) !important; box-shadow: var(--shadow-md) !important; }

/* Feed — séparateurs + hovers */
html.light-mode .ep-feed-header { border-bottom-color: var(--border) !important; background: var(--surface) !important; }
html.light-mode .ep-activity { border-bottom-color: var(--border) !important; }
html.light-mode .ep-activity:hover { background: rgba(0,0,0,.025) !important; }
html.light-mode .ep-activity-item:hover { background: rgba(0,0,0,.02) !important; }

/* Commentaires */
html.light-mode .ep-comments-section { border-top-color: var(--border) !important; }

/* Sections d'actions (ep-section-card intérieur) */
html.light-mode .ep-section-title { border-bottom-color: var(--border) !important; }

/* Modal overlay */
html.light-mode .ep-modal { box-shadow: var(--shadow-lg) !important; }

/* Métriques */
html.light-mode .ep-metric-trend.flat { background: rgba(0,0,0,.06) !important; }
html.light-mode .ep-qs-head { border-bottom-color: var(--border) !important; }
html.light-mode .ep-qs-item { border-bottom-color: var(--border) !important; }
html.light-mode .ep-tl-row { border-bottom-color: var(--border) !important; }

/* Notifications public */
html.light-mode .pub-notif-item:hover { background: rgba(0,0,0,.03) !important; }

/* Bouton tab count */
html.light-mode .pp-tab-count { background: rgba(0,0,0,.07) !important; color: var(--text-3) !important; }
html.light-mode .pp-tab.active .pp-tab-count { background: var(--rcb) !important; color: var(--rc) !important; }

/* Table abs (directeur) */
html.light-mode .abs-table td { border-bottom-color: var(--border) !important; }
html.light-mode .abs-table tbody tr:hover td { background: rgba(0,0,0,.025) !important; }

/* Gamification stats (student) */
html.light-mode .gm-stat { background: var(--raised) !important; }
html.light-mode .gm-badge.locked { background: var(--raised) !important; }

/* Pill tabs (notification/messages panel) */
html.light-mode .ep-pill-tabs { background: rgba(0,0,0,.06) !important; }
html.light-mode .ep-pill-tab.active { background: #fff !important; box-shadow: 0 1px 4px rgba(0,0,0,.1) !important; }

/* ep-status inactive */
html.light-mode .ep-status--inactive { background: rgba(0,0,0,.06) !important; }

/* Feed wallet widget */
html.light-mode .ep-wallet-track { background: rgba(0,0,0,.08) !important; }
html.light-mode .ep-wallet-reset-row { background: var(--raised) !important; border-color: var(--border) !important; }

/* ═══ LANDING PAGE — sections ══════════════════════════════ */
/* Feature cards — fond dark → fond clair */
html.light-mode .lp-fc {
  background: var(--card) !important;
  border-color: var(--border) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.07) !important;
}
html.light-mode .lp-fc-wrap:hover .lp-fc {
  box-shadow: 0 12px 40px rgba(0,0,0,.12) !important;
}
/* Testimonials — fond quasi-transparent → fond card */
html.light-mode .lp-testi {
  background: var(--card) !important;
  border-color: var(--border) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.07) !important;
}
html.light-mode .lp-testi:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,.12) !important;
  border-color: rgba(255,122,0,.25) !important;
}
/* Grille fond hero */
html.light-mode .lp-grid {
  background-image:
    linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px) !important;
}

/* ═══ PUBLIC NAV (landing page) ════════════════════════════ */
/* Nav initiale : transparente, texte foncé (lisible sur fond clair) */
html.light-mode .pub-nav {
  color: var(--text);
}
/* Nav scrollée : fond blanc au lieu du noir opaque */
html.light-mode .pub-nav.scrolled {
  background: rgba(255,255,255,.96) !important;
  border-bottom-color: var(--border) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 1px 0 var(--border), 0 4px 16px rgba(0,0,0,.07) !important;
}
/* Boutons icônes dans la nav */
html.light-mode .pub-icon-btn { background: var(--raised) !important; }
html.light-mode .pub-icon-btn:hover { background: var(--bg) !important; border-color: var(--border-md) !important; }
/* Hamburger mobile */
html.light-mode .pub-hamburger { background: var(--raised) !important; }
html.light-mode .pub-mobile-close { background: var(--raised) !important; }
/* Liens du menu mobile */
html.light-mode .pub-mobile-link:hover { background: rgba(0,0,0,.05) !important; }
/* Hover notifs dans dropdown */
html.light-mode .pub-notif-item:hover { background: rgba(0,0,0,.03) !important; }
/* Grille de fond style.css hero (pub-hero) */
html.light-mode .pub-hero::before {
  background-image:
    linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.04) 1px, transparent 1px) !important;
}

/* Shimmer / skeleton */
html.light-mode .ep-skeleton {
  background: linear-gradient(90deg, #e2e8f0 25%, #f8fafc 37%, #e2e8f0 63%) !important;
  background-size: 400% 100% !important;
}


/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE GLOBAL v2 — Ciblé, non-destructif
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. Wrappers de table scrollable ────────────────────────── */
/* Le wrapper scrolle, la table garde son display:table normal   */
.ep-table-scroll,
.ep-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
/* Les tables dans les wrappers ont une largeur min garantie     */
.ep-table-scroll > table,
.ep-table-scroll > .ep-table,
.ep-table-scroll > .ec-table,
.ep-table-scroll > .ech-tbl,
.ep-table-scroll > .abs-table,
.ep-table-wrap > table,
.ep-table-wrap > .ep-table {
  min-width: 520px;
}

/* ── 2. Notification list — classes dédiées ─────────────────── */
.ep-notif-list-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  transition: background .15s;
  text-decoration: none;
  color: inherit;
}
.ep-notif-list-item:hover { background: var(--raised); }
.ep-notif-list-item-body { flex: 1; min-width: 0; }
.ep-notif-list-item-subj {
  font-size: .88rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ep-notif-list-item-msg {
  font-size: .8rem;
  color: var(--text-3);
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: 3px;
}
.ep-notif-list-item-time {
  font-size: .72rem;
  color: var(--text-3);
  font-family: var(--mono);
  margin-top: 4px;
}

/* ── 3. Panels notif/message → bottom-sheet sur mobile ─────── */
@media (max-width: 992px) {
  .ep-notif-panel.open {
    position: fixed !important;
    top: auto !important;
    bottom: 72px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
    max-height: 78vh;
    border-radius: 20px !important;
  }
  .ep-msg-panel.open {
    position: fixed !important;
    top: auto !important;
    bottom: 72px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
    max-height: 78vh;
    border-radius: 20px !important;
  }
  .ep-pg-wrap { padding-left: 12px !important; padding-right: 12px !important; }
}

/* ── 4. Ajustements mobiles ─────────────────────────────────── */
@media (max-width: 768px) {
  .ep-page-title { font-size: clamp(1.15rem, 5vw, 1.55rem) !important; }
  .ep-pg-wrap { padding-left: 8px !important; padding-right: 8px !important; padding-bottom: 80px !important; }

  /* Tables : en-têtes ne wrappent pas */
  .ep-table-scroll > table thead th,
  .ep-table-scroll > .ec-table thead th,
  .ep-table-scroll > .ech-tbl thead th,
  .ep-table-scroll > .abs-table th {
    white-space: nowrap;
  }
}

/* ── Mot de marque « ITATA » ───────────────────────────────────────────────────
   Le balisage était `ITA<span>TA</span>` posé DIRECTEMENT dans un conteneur flex
   (`.pub-brand`, `.pub-footer-brand`, `.ep-topbar-brand` — tous `display:flex` avec
   `gap`). Flex enveloppe un texte nu dans un item anonyme : « ITA » et « TA » devenaient
   donc DEUX items, et le `gap` — prévu pour séparer l'icône du mot — s'insérait entre
   les deux. Le logo s'affichait « ITA TA ».

   Le mot est désormais un SEUL élément (`.brand-word`) : flex ne voit plus qu'un item,
   il n'a plus rien à écarter. `white-space:nowrap` interdit en plus toute césure du nom
   de la marque en fin de ligne. */
.brand-word { white-space: nowrap; }
.brand-word span { color: var(--orange); }