/* ═══════════════════════════════════════════════════════════════════════════
   ITATA — Design System v5
   Extension du v4 : Cards premium · Glassmorphism · Bento Grid · Fluid Type
   Micro-animations · Composants manquants · Palette étendue · Accessibilité
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   SECTION 1 — PALETTE ÉTENDUE & NOUVELLES VARIABLES
   ══════════════════════════════════════════════════════════════ */

:root {
  /* ── Indigo académique (cours, matières, programmes) ─────── */
  --indigo:      #6366F1;
  --indigo-lo:   rgba(99,102,241,0.10);
  --indigo-hi:   rgba(99,102,241,0.20);
  --indigo-glow: rgba(99,102,241,0.30);

  /* ── Gradients signature ────────────────────────────────── */
  --gradient-hero:     linear-gradient(135deg, #FF7A00 0%, #FF4500 50%, #C20000 100%);
  --gradient-academic: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
  --gradient-success:  linear-gradient(135deg, #10B981 0%, #059669 100%);
  --gradient-premium:  linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  --gradient-social:   linear-gradient(135deg, #3B82F6 0%, #6366F1 100%);
  --gradient-danger:   linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
  --gradient-dark:     linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
  --gradient-card:     linear-gradient(135deg, rgba(255,122,0,0.06) 0%, rgba(99,102,241,0.04) 100%);

  /* ── Surfaces colorées (backgrounds de sections) ─────────── */
  --surface-orange:  rgba(255, 122,   0, 0.04);
  --surface-indigo:  rgba( 99, 102, 241, 0.04);
  --surface-green:   rgba( 16, 185, 129, 0.04);
  --surface-red:     rgba(239,  68,  68, 0.04);
  --surface-amber:   rgba(245, 158,  11, 0.04);
  --surface-blue:    rgba( 59, 130, 246, 0.04);

  /* ── Système d'ombres à 4 niveaux ───────────────────────── */
  --shadow-xs:  0 1px 3px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.18);
  --shadow-sm:  0 4px 12px rgba(0,0,0,0.30), 0 2px 6px rgba(0,0,0,0.20);
  --shadow-md:  0 8px 28px rgba(0,0,0,0.36), 0 4px 12px rgba(0,0,0,0.24);
  --shadow-lg:  0 16px 56px rgba(0,0,0,0.44), 0 8px 24px rgba(0,0,0,0.30);
  --shadow-xl:  0 32px 80px rgba(0,0,0,0.56), 0 16px 40px rgba(0,0,0,0.36);

  /* Glow shadows par couleur */
  --glow-orange:  0 0 0 1px rgba(255,122,0,0.20), 0 12px 40px rgba(255,122,0,0.14);
  --glow-indigo:  0 0 0 1px rgba(99,102,241,0.20), 0 12px 40px rgba(99,102,241,0.14);
  --glow-green:   0 0 0 1px rgba(16,185,129,0.20), 0 12px 40px rgba(16,185,129,0.14);
  --glow-red:     0 0 0 1px rgba(239,68,68,0.20),  0 12px 40px rgba(239,68,68,0.14);
  --glow-blue:    0 0 0 1px rgba(59,130,246,0.20), 0 12px 40px rgba(59,130,246,0.14);

  /* ── Radius unifié ───────────────────────────────────────── */
  --r-card:  14px;
  --r-hero:  20px;
  --r-input: 10px;
  --r-btn:   9px;
  --r-badge: 6px;

  /* ── Fluid type scale (clamp) ────────────────────────────── */
  --t-xs:   clamp(10px, 1.1vw, 11px);
  --t-sm:   clamp(11px, 1.25vw, 12.5px);
  --t-base: clamp(13px, 1.4vw, 14px);
  --t-md:   clamp(14px, 1.6vw, 16px);
  --t-lg:   clamp(16px, 1.9vw, 20px);
  --t-xl:   clamp(20px, 2.4vw, 26px);
  --t-2xl:  clamp(26px, 3.2vw, 38px);
  --t-3xl:  clamp(34px, 4.8vw, 54px);

  /* ── Timing functions raffinées ──────────────────────────── */
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:     cubic-bezier(0.22, 1, 0.36, 1);

  /* ── Transitions ──────────────────────────────────────────── */
  --t-fast:   0.12s var(--ease-out-expo);
  --t-base-d: 0.20s var(--ease-out-expo);
  --t-slow:   0.32s var(--ease-spring);
}

/* Light mode overrides pour les nouvelles variables */
html.light-mode {
  --surface-orange: rgba(255,122,0,0.06);
  --surface-indigo: rgba(99,102,241,0.06);
  --surface-green:  rgba(16,185,129,0.06);
  --shadow-xs: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm: 0 4px 12px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.07);
  --shadow-md: 0 8px 28px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 16px 56px rgba(0,0,0,0.16), 0 8px 24px rgba(0,0,0,0.10);
  --shadow-xl: 0 32px 80px rgba(0,0,0,0.20), 0 16px 40px rgba(0,0,0,0.12);
}


/* ══════════════════════════════════════════════════════════════
   SECTION 2 — TYPOGRAPHIE FLUID
   ══════════════════════════════════════════════════════════════ */

/* DM Sans pour les titres hero */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,700;0,9..40,800;0,9..40,900&display=swap');

.ep-title-hero {
  font-family: 'DM Sans', 'Inter', system-ui, sans-serif;
  font-size: var(--t-3xl);
  font-weight: 900;
  letter-spacing: -2.5px;
  line-height: 1.06;
  color: var(--text);
}
.ep-title-xl {
  font-family: 'DM Sans', 'Inter', system-ui, sans-serif;
  font-size: var(--t-2xl);
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1.1;
}
.ep-title-lg {
  font-size: var(--t-xl);
  font-weight: 800;
  letter-spacing: -0.8px;
  line-height: 1.2;
}
.ep-text-base { font-size: var(--t-base); }
.ep-text-sm   { font-size: var(--t-sm); }
.ep-text-xs   { font-size: var(--t-xs); }

/* Texte gradient */
.ep-text-gradient {
  background: var(--gradient-hero);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ep-text-gradient-academic {
  background: var(--gradient-academic);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ══════════════════════════════════════════════════════════════
   SECTION 3 — CARDS PREMIUM
   ══════════════════════════════════════════════════════════════ */

/* ── 3.1 Card de base modernisée ─────────────────────────────── */
.ep-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  transition: box-shadow var(--t-base-d), transform var(--t-base-d), border-color var(--t-base-d);
  position: relative;
  overflow: hidden;
}
.ep-card:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
  border-color: var(--border-md);
}

/* ── 3.2 Card avec gradient border animé ─────────────────────── */
.ep-card-glow {
  background: var(--card);
  border-radius: var(--r-card);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform var(--t-base-d), box-shadow var(--t-base-d);
}
.ep-card-glow::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: calc(var(--r-card) + 1.5px);
  background: conic-gradient(
    from 180deg at 50% 70%,
    rgba(255,122,0,0.0) 0deg,
    rgba(255,122,0,0.5) 72deg,
    rgba(255,122,0,0.0) 144deg,
    rgba(99,102,241,0.3) 216deg,
    rgba(255,122,0,0.0) 288deg,
    rgba(255,122,0,0.5) 360deg
  );
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.ep-card-glow::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--r-card) - 0.5px);
  background: var(--card);
  z-index: -1;
}
.ep-card-glow:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.ep-card-glow:hover::before { opacity: 1; }

/* ── 3.3 Glassmorphism card ─────────────────────────────────── */
.ep-card-glass {
  background: rgba(15, 17, 24, 0.72);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-card);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    var(--shadow-lg);
}
html.light-mode .ep-card-glass {
  background: rgba(255,255,255,0.82);
  border-color: rgba(0,0,0,0.10);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.9) inset,
    var(--shadow-lg);
}

/* ── 3.4 Card Hero (featured / CTA) ─────────────────────────── */
.ep-card-hero {
  background: linear-gradient(135deg, rgba(255,122,0,0.12) 0%, rgba(99,102,241,0.08) 60%, var(--card) 100%);
  border: 1px solid rgba(255,122,0,0.20);
  border-radius: var(--r-hero);
  box-shadow: var(--shadow-sm), 0 0 0 1px rgba(255,122,0,0.06) inset;
  position: relative;
  overflow: hidden;
}
.ep-card-hero::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,122,0,0.15) 0%, transparent 70%);
  pointer-events: none;
}

/* ── 3.5 Card académique (indigo) ───────────────────────────── */
.ep-card-academic {
  background: linear-gradient(135deg, rgba(99,102,241,0.10) 0%, var(--card) 60%);
  border: 1px solid rgba(99,102,241,0.20);
  border-radius: var(--r-card);
}
.ep-card-academic:hover { box-shadow: var(--glow-indigo); }

/* ── 3.6 Card stat avec sparkline (like Stripe) ─────────────── */
.ep-stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 20px 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--t-base-d), transform var(--t-base-d);
  will-change: transform;
}
.ep-stat-card:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.ep-stat-card-label {
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  font-family: var(--mono);
}
.ep-stat-card-value {
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 900;
  letter-spacing: -1.5px;
  line-height: 1;
  color: var(--text);
  font-feature-settings: 'tnum';
}
.ep-stat-card-trend {
  display: flex; align-items: center; gap: 4px;
  font-size: var(--t-xs); font-weight: 700;
  font-family: var(--mono);
  margin-top: 4px;
}
.ep-stat-card-trend.up   { color: var(--green); }
.ep-stat-card-trend.down { color: var(--red); }
.ep-stat-card-trend.flat { color: var(--text-3); }
.ep-stat-card-sparkline {
  position: absolute;
  bottom: 0; right: 0;
  width: 100px; height: 48px;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.ep-stat-card:hover .ep-stat-card-sparkline { opacity: 0.9; }

/* ── 3.7 Bento Grid system ────────────────────────────────── */
.ep-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.ep-bento-1  { grid-column: span 1; }
.ep-bento-2  { grid-column: span 2; }
.ep-bento-3  { grid-column: span 3; }
.ep-bento-4  { grid-column: span 4; }
.ep-bento-6  { grid-column: span 6; }
.ep-bento-8  { grid-column: span 8; }
.ep-bento-12 { grid-column: span 12; }
.ep-bento-row-2 { grid-row: span 2; }

@media (max-width: 900px) {
  .ep-bento { grid-template-columns: repeat(6, 1fr); }
  .ep-bento-8 { grid-column: span 6; }
  .ep-bento-4 { grid-column: span 3; }
}
@media (max-width: 640px) {
  .ep-bento { grid-template-columns: 1fr 1fr; gap: 10px; }
  [class*="ep-bento-"] { grid-column: span 2; }
  .ep-bento-3, .ep-bento-4 { grid-column: span 1; }
}

/* ── 3.8 Card elevated (pour les panels, widgets) ─────────── */
.ep-card-elevated {
  background: var(--raised);
  border: 1px solid var(--border-md);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-xs);
}

/* ── 3.9 Card avec accent bar coloré ─────────────────────── */
.ep-card-accent {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  border-top: 3px solid var(--orange);
  overflow: hidden;
}
.ep-card-accent.indigo { border-top-color: var(--indigo); }
.ep-card-accent.green  { border-top-color: var(--green); }
.ep-card-accent.blue   { border-top-color: var(--blue); }
.ep-card-accent.red    { border-top-color: var(--red); }
.ep-card-accent.amber  { border-top-color: var(--amber); }
.ep-card-accent.teal   { border-top-color: var(--teal); }

/* ── 3.10 Card Liste (remplace les tables sur mobile) ──────── */
.ep-list-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
}
.ep-list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  transition: background var(--t-fast);
  cursor: pointer;
}
.ep-list-item:last-child { border-bottom: none; }
.ep-list-item:hover { background: rgba(255,255,255,0.025); }
.ep-list-item-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.ep-list-item-content { flex: 1; min-width: 0; }
.ep-list-item-title {
  font-size: 13px; font-weight: 700;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ep-list-item-sub {
  font-size: 11.5px; color: var(--text-3);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ep-list-item-meta {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0;
}


/* ══════════════════════════════════════════════════════════════
   SECTION 4 — MICRO-ANIMATIONS
   ══════════════════════════════════════════════════════════════ */

/* ── 4.1 Keyframes ─────────────────────────────────────────── */
@keyframes ep-slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ep-slide-down {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ep-slide-left {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes ep-slide-right {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes ep-scale-in {
  from { opacity: 0; transform: scale(0.90); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes ep-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ep-bounce-in {
  0%   { opacity: 0; transform: scale(0.6); }
  60%  { opacity: 1; transform: scale(1.06); }
  100% { transform: scale(1); }
}
@keyframes ep-ripple {
  0%   { transform: scale(0); opacity: 0.5; }
  100% { transform: scale(4); opacity: 0; }
}
@keyframes ep-pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(255,122,0,0.5); }
  70%  { box-shadow: 0 0 0 10px rgba(255,122,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,122,0,0); }
}
@keyframes ep-gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes ep-spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes ep-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

/* ── 4.2 Classes d'animation directes ─────────────────────── */
.ep-anim-up    { animation: ep-slide-up   0.45s var(--ease-spring) both; }
.ep-anim-down  { animation: ep-slide-down 0.35s var(--ease-spring) both; }
.ep-anim-left  { animation: ep-slide-left 0.40s var(--ease-spring) both; }
.ep-anim-right { animation: ep-slide-right 0.40s var(--ease-spring) both; }
.ep-anim-scale { animation: ep-scale-in   0.30s var(--ease-out-back) both; }
.ep-anim-fade  { animation: ep-fade-in    0.25s ease both; }
.ep-float      { animation: ep-float 3s ease-in-out infinite; }

/* ── 4.3 Stagger — entrées en cascade ─────────────────────── */
.ep-stagger > * {
  animation: ep-slide-up 0.42s var(--ease-spring) both;
}
.ep-stagger > *:nth-child(1)  { animation-delay: 0ms; }
.ep-stagger > *:nth-child(2)  { animation-delay: 55ms; }
.ep-stagger > *:nth-child(3)  { animation-delay: 110ms; }
.ep-stagger > *:nth-child(4)  { animation-delay: 165ms; }
.ep-stagger > *:nth-child(5)  { animation-delay: 220ms; }
.ep-stagger > *:nth-child(6)  { animation-delay: 275ms; }
.ep-stagger > *:nth-child(7)  { animation-delay: 330ms; }
.ep-stagger > *:nth-child(8)  { animation-delay: 385ms; }
.ep-stagger > *:nth-child(9)  { animation-delay: 440ms; }
.ep-stagger > *:nth-child(10) { animation-delay: 495ms; }
.ep-stagger > *:nth-child(n+11) { animation-delay: 550ms; }

/* ── 4.4 Délais utilitaires ───────────────────────────────── */
.ep-delay-1  { animation-delay: 50ms !important; }
.ep-delay-2  { animation-delay: 100ms !important; }
.ep-delay-3  { animation-delay: 150ms !important; }
.ep-delay-4  { animation-delay: 200ms !important; }
.ep-delay-5  { animation-delay: 300ms !important; }

/* ── 4.5 Ripple Effect sur les boutons ─────────────────────── */
.ep-ripple-wrap {
  position: relative;
  overflow: hidden;
}
.ep-ripple-wrap .ripple-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  transform: scale(0);
  animation: ep-ripple 0.6s linear;
  pointer-events: none;
}

/* ── 4.6 will-change pour les éléments animés ──────────────── */
.ep-kpi-item,
.ep-card,
.ep-card-glow,
.ep-stat-card,
.ep-list-item,
.ep-nav-link,
.ep-btn { will-change: transform; }

/* ── 4.7 Respect prefers-reduced-motion ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ep-stagger > *,
  [class*="ep-anim-"],
  .ep-float { animation: none !important; transition-duration: 0.01ms !important; }
  .ep-ripple-wrap .ripple-circle { display: none !important; }
}


/* ══════════════════════════════════════════════════════════════
   SECTION 5 — COMPOSANTS MANQUANTS
   ══════════════════════════════════════════════════════════════ */

/* ── 5.1 Command Palette (Cmd+K) ─────────────────────────── */
#ep-cmd-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: rgba(0,0,0,0.60);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: clamp(60px, 15vh, 140px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.20s ease;
}
#ep-cmd-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
#ep-cmd-box {
  width: min(640px, calc(100vw - 32px));
  background: var(--card);
  border: 1px solid var(--border-md);
  border-radius: 18px;
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(255,255,255,0.06) inset;
  overflow: hidden;
  transform: scale(0.94) translateY(-10px);
  transition: transform 0.22s var(--ease-out-expo);
}
#ep-cmd-overlay.open #ep-cmd-box {
  transform: scale(1) translateY(0);
}
.ep-cmd-header {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}
.ep-cmd-icon {
  color: var(--text-3); font-size: 16px; flex-shrink: 0;
}
#ep-cmd-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 500;
}
#ep-cmd-input::placeholder { color: var(--text-3); }
.ep-cmd-shortcut {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-3);
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 3px 7px;
  flex-shrink: 0;
}
.ep-cmd-results {
  max-height: 400px;
  overflow-y: auto;
  padding: 8px 0;
}
.ep-cmd-section {
  padding: 4px 14px 2px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  font-family: var(--mono);
  margin-top: 4px;
}
.ep-cmd-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background var(--t-fast);
  border-radius: 0;
  text-decoration: none;
  color: var(--text);
}
.ep-cmd-item:hover,
.ep-cmd-item.active {
  background: rgba(255,122,0,0.08);
}
.ep-cmd-item.active { border-left: 2px solid var(--orange); padding-left: 14px; }
.ep-cmd-item-icon {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: var(--raised);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--text-2);
  flex-shrink: 0;
}
.ep-cmd-item-label { font-size: 13.5px; font-weight: 600; flex: 1; }
.ep-cmd-item-sub   { font-size: 11px; color: var(--text-3); margin-top: 1px; }
.ep-cmd-item-kbd   {
  font-family: var(--mono); font-size: 10px; color: var(--text-3);
  background: var(--raised); border: 1px solid var(--border);
  border-radius: 4px; padding: 2px 6px; flex-shrink: 0;
}
.ep-cmd-empty {
  text-align: center; padding: 32px 20px;
  color: var(--text-3); font-size: 13px;
}
.ep-cmd-empty i { font-size: 24px; display: block; margin-bottom: 8px; opacity: 0.4; }
.ep-cmd-footer {
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  display: flex; gap: 16px;
  font-size: 11px; color: var(--text-3);
  font-family: var(--mono);
}
.ep-cmd-footer kbd {
  background: var(--raised); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 5px; font-size: 10px;
}

/* ── 5.2 Empty States illustrés ─────────────────────────── */
.ep-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 52px 24px;
  gap: 14px;
}
.ep-empty-icon {
  width: 80px; height: 80px;
  border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem;
  margin-bottom: 6px;
  position: relative;
}
/* Halo animé autour de l'icône */
.ep-empty-icon::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 30px;
  border: 1px solid currentColor;
  opacity: 0.15;
  animation: ep-pulse-ring 2.5s ease infinite;
}
.ep-empty-icon.orange  { background: var(--orange-lo);  color: var(--orange);  }
.ep-empty-icon.indigo  { background: var(--indigo-lo);  color: var(--indigo);  }
.ep-empty-icon.blue    { background: var(--blue-lo);    color: var(--blue);    }
.ep-empty-icon.green   { background: var(--green-lo);   color: var(--green);   }
.ep-empty-icon.neutral { background: var(--raised);     color: var(--text-3);  }
.ep-empty-title {
  font-size: 16px; font-weight: 800; color: var(--text);
  letter-spacing: -0.4px;
}
.ep-empty-desc {
  font-size: 13px; color: var(--text-3);
  max-width: 280px; line-height: 1.6;
}

/* ── 5.3 Tooltip universel ──────────────────────────────── */
[data-tooltip] {
  position: relative;
}
[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap;
  background: var(--raised);
  color: var(--text);
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 7px;
  border: 1px solid var(--border-md);
  box-shadow: var(--shadow-sm);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 9999;
  max-width: 200px;
  white-space: normal;
  text-align: center;
}
[data-tooltip]::after {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 5px solid transparent;
  border-top-color: var(--raised);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 9999;
}
[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* Tooltip en bas */
[data-tooltip-pos="bottom"]::before {
  bottom: auto; top: calc(100% + 7px);
  transform: translateX(-50%) translateY(-4px);
}
[data-tooltip-pos="bottom"]::after {
  bottom: auto; top: calc(100% + 2px);
  border-top-color: transparent;
  border-bottom-color: var(--raised);
  transform: translateX(-50%) translateY(-4px);
}
[data-tooltip-pos="bottom"]:hover::before,
[data-tooltip-pos="bottom"]:hover::after {
  transform: translateX(-50%) translateY(0);
}
/* Tooltip à droite */
[data-tooltip-pos="right"]::before {
  bottom: auto; left: calc(100% + 8px);
  top: 50%; transform: translateY(-50%) translateX(-4px);
}
[data-tooltip-pos="right"]::after { display: none; }
[data-tooltip-pos="right"]:hover::before {
  transform: translateY(-50%) translateX(0);
}

/* ── 5.4 Drawer (side panel) ────────────────────────────── */
.ep-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.ep-drawer-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.ep-drawer {
  position: fixed;
  top: 0; right: 0;
  height: 100vh;
  width: min(480px, 100vw);
  background: var(--surface);
  border-left: 1px solid var(--border);
  z-index: 9001;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.32s var(--ease-out-expo);
  box-shadow: -20px 0 60px rgba(0,0,0,0.40);
  overflow: hidden;
}
.ep-drawer.open { transform: translateX(0); }
.ep-drawer-header {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ep-drawer-title {
  flex: 1;
  font-size: 15px; font-weight: 800; color: var(--text);
  letter-spacing: -0.3px;
}
.ep-drawer-close {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  border: none;
  color: var(--text-2);
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.ep-drawer-close:hover { background: rgba(255,255,255,0.10); color: var(--text); }
.ep-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
.ep-drawer-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  display: flex; gap: 10px;
  flex-shrink: 0;
}

/* ── 5.5 Drawer du bas (mobile Bottom Sheet) ─────────────── */
.ep-sheet-overlay {
  position: fixed; inset: 0;
  z-index: 9000;
  background: rgba(0,0,0,0.50);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.ep-sheet-overlay.open { opacity: 1; pointer-events: auto; }
.ep-sheet {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 9001;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-radius: 20px 20px 0 0;
  max-height: 85vh;
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.34s var(--ease-out-expo);
  box-shadow: 0 -20px 60px rgba(0,0,0,0.50);
}
.ep-sheet.open { transform: translateY(0); }
.ep-sheet-handle {
  width: 40px; height: 4px;
  background: var(--border-md);
  border-radius: 2px;
  margin: 12px auto 0;
  flex-shrink: 0;
}
.ep-sheet-header {
  padding: 14px 20px 10px;
  font-size: 15px; font-weight: 800;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ep-sheet-body {
  flex: 1; overflow-y: auto;
  padding: 12px 0 24px;
  -webkit-overflow-scrolling: touch;
}

/* ── 5.6 Avatar rings par rôle ───────────────────────────── */
.ep-avatar { border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.ep-avatar[data-role="admin"]    { box-shadow: 0 0 0 2.5px #EF4444, 0 0 0 4px rgba(239,68,68,0.15); }
.ep-avatar[data-role="director"] { box-shadow: 0 0 0 2.5px #8B5CF6, 0 0 0 4px rgba(139,92,246,0.15); }
.ep-avatar[data-role="teacher"]  { box-shadow: 0 0 0 2.5px var(--orange), 0 0 0 4px rgba(255,122,0,0.15); }
.ep-avatar[data-role="student"]  { box-shadow: 0 0 0 2.5px #3B82F6, 0 0 0 4px rgba(59,130,246,0.15); }
.ep-avatar[data-role="parent"]   { box-shadow: 0 0 0 2.5px #14B8A6, 0 0 0 4px rgba(20,184,166,0.15); }

/* Tailles d'avatar */
.ep-avatar-xs  { width: 24px;  height: 24px;  font-size: 9px;  }
.ep-avatar-sm  { width: 32px;  height: 32px;  font-size: 11px; }
.ep-avatar-md  { width: 40px;  height: 40px;  font-size: 14px; }
.ep-avatar-lg  { width: 52px;  height: 52px;  font-size: 17px; }
.ep-avatar-xl  { width: 72px;  height: 72px;  font-size: 24px; }
.ep-avatar-2xl { width: 96px;  height: 96px;  font-size: 32px; }

/* Avatar initiales */
.ep-avatar-initials {
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #fff;
  background: var(--orange);
  text-transform: uppercase;
  font-family: var(--mono);
  letter-spacing: 0.5px;
  width: 100%; height: 100%;
}

/* Indicateur en ligne */
.ep-avatar-wrap { position: relative; display: inline-block; }
.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); }
.ep-online-dot.busy    { background: var(--amber); }

/* Stack d'avatars */
.ep-avatar-stack {
  display: flex;
  flex-direction: row-reverse;
}
.ep-avatar-stack .ep-avatar-wrap {
  margin-left: -10px;
  border: 2px solid var(--card);
  border-radius: 50%;
}
.ep-avatar-stack .ep-avatar-wrap:last-child { margin-left: 0; }
.ep-avatar-stack-more {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--raised);
  border: 2px solid var(--card);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: var(--text-3);
  font-family: var(--mono);
  margin-left: -10px;
}

/* ── 5.7 Progress Steps (flux multi-étapes) ──────────────── */
.ep-steps {
  display: flex; align-items: center; gap: 0;
  position: relative;
  padding: 0 0 20px;
}
.ep-step {
  display: flex; flex-direction: column; align-items: center; flex: 1;
  position: relative;
}
.ep-step-line {
  position: absolute;
  top: 16px; left: calc(50% + 16px);
  right: calc(-50% + 16px);
  height: 2px;
  background: var(--border-md);
  transition: background 0.3s;
}
.ep-step.done .ep-step-line,
.ep-step.active .ep-step-line { background: var(--orange); }
.ep-step:last-child .ep-step-line { display: none; }

.ep-step-circle {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--border-md);
  background: var(--card);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
  color: var(--text-3);
  z-index: 1;
  transition: all 0.25s var(--ease-out-expo);
}
.ep-step.active .ep-step-circle {
  border-color: var(--orange);
  background: var(--orange);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(255,122,0,0.20);
}
.ep-step.done .ep-step-circle {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}
.ep-step-label {
  font-size: 11px; font-weight: 600;
  color: var(--text-3); margin-top: 6px;
  text-align: center;
}
.ep-step.active .ep-step-label { color: var(--orange); }
.ep-step.done   .ep-step-label { color: var(--green); }

/* ── 5.8 Confirm Dialog ──────────────────────────────────── */
.ep-confirm-overlay {
  position: fixed; inset: 0; z-index: 10002;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.22s ease;
}
.ep-confirm-overlay.open { opacity: 1; pointer-events: auto; }
.ep-confirm-box {
  background: var(--card);
  border: 1px solid var(--border-md);
  border-radius: 18px;
  box-shadow: var(--shadow-xl);
  padding: 28px 28px 24px;
  width: min(400px, calc(100vw - 32px));
  text-align: center;
  transform: scale(0.88);
  transition: transform 0.25s var(--ease-out-back);
}
.ep-confirm-overlay.open .ep-confirm-box { transform: scale(1); }
.ep-confirm-icon {
  width: 60px; height: 60px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  margin: 0 auto 16px;
}
.ep-confirm-icon.danger  { background: var(--red-lo);  color: var(--red);  }
.ep-confirm-icon.warning { background: var(--amber-lo); color: var(--amber); }
.ep-confirm-icon.info    { background: var(--blue-lo);  color: var(--blue);  }
.ep-confirm-title {
  font-size: 17px; font-weight: 800;
  color: var(--text); letter-spacing: -0.4px;
  margin-bottom: 8px;
}
.ep-confirm-desc {
  font-size: 13.5px; color: var(--text-2);
  line-height: 1.6; margin-bottom: 24px;
}
.ep-confirm-actions { display: flex; gap: 10px; justify-content: center; }
.ep-confirm-actions .ep-btn { flex: 1; justify-content: center; }

/* ── 5.9 Tags & Badges améliorés ─────────────────────────── */
.ep-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: var(--r-badge);
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid transparent;
}
.ep-tag.orange { background: var(--orange-lo); color: var(--orange); border-color: rgba(255,122,0,0.20); }
.ep-tag.indigo { background: var(--indigo-lo); color: var(--indigo); border-color: rgba(99,102,241,0.20); }
.ep-tag.green  { background: var(--green-lo);  color: var(--green);  border-color: rgba(34,197,94,0.20); }
.ep-tag.red    { background: var(--red-lo);    color: var(--red);    border-color: rgba(239,68,68,0.20); }
.ep-tag.amber  { background: var(--amber-lo);  color: var(--amber);  border-color: rgba(245,158,11,0.20); }
.ep-tag.blue   { background: var(--blue-lo);   color: var(--blue);   border-color: rgba(59,130,246,0.20); }
.ep-tag.teal   { background: var(--teal-lo);   color: var(--teal);   border-color: rgba(20,184,166,0.20); }
.ep-tag.neutral{ background: var(--raised);    color: var(--text-3); border-color: var(--border-md); }
/* Dot indicateur dans le tag */
.ep-tag::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.ep-tag.no-dot::before { display: none; }

/* ── 5.10 Skeleton loading amélioré ──────────────────────── */
@keyframes ep-shimmer {
  0%   { background-position: -800px 0; }
  100% { background-position:  800px 0; }
}
.ep-sk {
  background: linear-gradient(
    90deg,
    var(--card) 25%,
    rgba(255,255,255,0.055) 50%,
    var(--card) 75%
  );
  background-size: 800px 100%;
  animation: ep-shimmer 1.5s infinite linear;
  border-radius: 6px;
}
html.light-mode .ep-sk {
  background: linear-gradient(90deg, #e2e8f0 25%, #f0f4f8 50%, #e2e8f0 75%);
  background-size: 800px 100%;
}
.ep-sk-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.ep-sk-row    { display: flex; align-items: center; gap: 12px; }
.ep-sk-circle { border-radius: 50%; flex-shrink: 0; }
.ep-sk-line   { height: 12px; border-radius: 6px; }
.ep-sk-line.sm  { height: 10px; }
.ep-sk-line.lg  { height: 16px; }
.ep-sk-line.w20 { width: 20%; }
.ep-sk-line.w30 { width: 30%; }
.ep-sk-line.w50 { width: 50%; }
.ep-sk-line.w70 { width: 70%; }
.ep-sk-line.w90 { width: 90%; }
.ep-sk-line.full { width: 100%; }
.ep-sk-block  { border-radius: var(--r-card); }

/* ── 5.11 Toast amélioré (disparition progressive) ────────── */
.ep-toast-v5 {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid transparent;
  box-shadow: var(--shadow-md);
  min-width: 280px;
  max-width: 380px;
  pointer-events: auto;
  position: relative;
  overflow: hidden;
  animation: ep-slide-right 0.35s var(--ease-spring) both;
}
/* Progress bar auto-dismiss */
.ep-toast-v5::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  height: 2px;
  background: currentColor;
  opacity: 0.4;
  animation: ep-toast-timer 5s linear forwards;
}
@keyframes ep-toast-timer {
  from { width: 100%; }
  to   { width: 0%; }
}
.ep-toast-v5.success { background: rgba(34,197,94,0.10);  border-color: rgba(34,197,94,0.25);  color: var(--green); }
.ep-toast-v5.error   { background: rgba(239,68,68,0.10);  border-color: rgba(239,68,68,0.25);  color: var(--red); }
.ep-toast-v5.warning { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.25); color: var(--amber); }
.ep-toast-v5.info    { background: rgba(99,102,241,0.10); border-color: rgba(99,102,241,0.25); color: var(--indigo); }
.ep-toast-v5-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.ep-toast-v5-content { flex: 1; }
.ep-toast-v5-title   { font-size: 13px; font-weight: 800; color: var(--text); }
.ep-toast-v5-desc    { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.ep-toast-v5-close   {
  background: none; border: none; color: var(--text-3);
  cursor: pointer; font-size: 13px; padding: 2px;
  flex-shrink: 0; transition: color var(--t-fast);
}
.ep-toast-v5-close:hover { color: var(--text); }

/* ── 5.12 Skip Links (accessibilité) ─────────────────────── */
.ep-skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 99999;
  background: var(--orange);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 10px 10px;
  font-weight: 800;
  font-size: 13px;
  text-decoration: none;
  transition: top 0.2s;
}
.ep-skip-link:focus { top: 0; }

/* ── 5.13 Indicateur de chargement inline ──────────────────── */
.ep-inline-loader {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text-3); font-size: 13px;
}
.ep-inline-loader::before {
  content: '';
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid var(--border-md);
  border-top-color: var(--orange);
  animation: ep-spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes ep-spin {
  to { transform: rotate(360deg); }
}


/* ══════════════════════════════════════════════════════════════
   SECTION 6 — FORMULAIRES MODERNISÉS
   ══════════════════════════════════════════════════════════════ */

/* ── 6.1 Float label input ──────────────────────────────── */
.ep-field {
  position: relative;
  margin-bottom: 20px;
}
.ep-field-input {
  width: 100%;
  background: var(--raised);
  border: 1.5px solid var(--border-md);
  border-radius: var(--r-input);
  padding: 22px 14px 8px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  transition: border-color 0.18s, box-shadow 0.18s;
  outline: none;
  appearance: none;
}
.ep-field-input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255,122,0,0.15);
}
.ep-field-label {
  position: absolute;
  left: 14px; top: 14px;
  font-size: 14px;
  color: var(--text-3);
  font-weight: 500;
  pointer-events: none;
  transition: all 0.18s var(--ease-out-expo);
  transform-origin: left top;
}
.ep-field-input:focus + .ep-field-label,
.ep-field-input:not(:placeholder-shown) + .ep-field-label {
  top: 7px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orange);
}
.ep-field-input:placeholder-shown { color: transparent; }
.ep-field-input::placeholder { color: transparent; }
/* Fix pour les navigateurs qui ne supportent pas :not(:placeholder-shown) */
.ep-field-input:not(:placeholder-shown) { color: var(--text); }

.ep-field-hint {
  font-size: 11px; color: var(--text-3);
  margin-top: 5px; padding-left: 2px;
}
.ep-field.error .ep-field-input  { border-color: var(--red); }
.ep-field.error .ep-field-hint   { color: var(--red); }
.ep-field.error .ep-field-label  { color: var(--red); }
.ep-field.success .ep-field-input { border-color: var(--green); }

/* ── 6.2 Search input raffiné ───────────────────────────── */
.ep-search {
  position: relative; display: flex; align-items: center;
}
.ep-search-icon {
  position: absolute; left: 13px;
  color: var(--text-3); font-size: 14px;
  pointer-events: none;
  transition: color 0.18s;
}
.ep-search-input {
  width: 100%;
  background: var(--raised);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px 10px 38px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--text);
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.ep-search-input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,122,0,0.12); }
.ep-search-input:focus ~ .ep-search-icon,
.ep-search:focus-within .ep-search-icon { color: var(--orange); }
.ep-search-input::placeholder { color: var(--text-3); }


/* ══════════════════════════════════════════════════════════════
   SECTION 7 — BOUTONS AMÉLIORÉS
   ══════════════════════════════════════════════════════════════ */

/* Bouton avec effet ripple */
.ep-btn { position: relative; overflow: hidden; }

/* Bouton gradient hero */
.ep-btn-hero {
  background: var(--gradient-hero);
  background-size: 200% 200%;
  color: #fff;
  border: none;
  border-radius: var(--r-btn);
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
  transition: transform 0.18s, box-shadow 0.18s, background-position 0.4s;
  box-shadow: 0 4px 20px rgba(255,122,0,0.35);
}
.ep-btn-hero:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(255,122,0,0.50);
  background-position: 100% 0;
  color: #fff;
  text-decoration: none;
}
.ep-btn-hero:active { transform: translateY(0); }

/* Bouton academic */
.ep-btn-academic {
  background: var(--gradient-academic);
  color: #fff;
  border: none;
  border-radius: var(--r-btn);
  padding: 10px 20px;
  font-size: 13px; font-weight: 700; font-family: inherit;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
  transition: transform 0.18s, box-shadow 0.18s;
  box-shadow: 0 4px 16px rgba(99,102,241,0.30);
}
.ep-btn-academic:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(99,102,241,0.45);
  color: #fff; text-decoration: none;
}

/* Bouton ghost avec border animée */
.ep-btn-outline-animated {
  background: transparent;
  border: 1.5px solid var(--border-md);
  border-radius: var(--r-btn);
  padding: 9px 18px;
  font-size: 13px; font-weight: 700; font-family: inherit;
  color: var(--text-2);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
  transition: all 0.20s;
  position: relative;
}
.ep-btn-outline-animated:hover {
  border-color: var(--orange);
  color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255,122,0,0.10);
  background: var(--orange-lo);
}

/* Bouton icon-only perfectionné */
.ep-icon-btn {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: var(--raised);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all var(--t-fast);
  flex-shrink: 0;
}
.ep-icon-btn:hover { background: rgba(255,255,255,0.08); color: var(--text); border-color: var(--border-md); }
.ep-icon-btn.active { background: var(--orange-lo); color: var(--orange); border-color: var(--border-hi); }
.ep-icon-btn.danger:hover { background: var(--red-lo); color: var(--red); border-color: rgba(239,68,68,0.25); }


/* ══════════════════════════════════════════════════════════════
   SECTION 8 — NAVIGATION MOBILE BOTTOM BAR
   ══════════════════════════════════════════════════════════════ */

.ep-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 200;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.ep-bottom-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 56px;
  max-width: 640px;
  margin: 0 auto;
}
.ep-bottom-nav-item {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 4px 4px;
  color: var(--text-3);
  text-decoration: none;
  font-size: 10px;
  font-weight: 600;
  transition: color var(--t-fast);
  position: relative;
  border: none; background: none; cursor: pointer; font-family: inherit;
}
.ep-bottom-nav-item i { font-size: 20px; transition: transform 0.20s var(--ease-out-back); }
.ep-bottom-nav-item.active { color: var(--orange); }
.ep-bottom-nav-item.active i { transform: scale(1.15); }
.ep-bottom-nav-badge {
  position: absolute; top: 4px; left: 50%;
  transform: translateX(4px);
  background: var(--orange);
  color: #fff;
  font-size: 9px; font-weight: 900;
  min-width: 16px; height: 16px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  border: 2px solid var(--surface);
  font-family: var(--mono);
  animation: ep-bounce-in 0.4s var(--ease-out-back) both;
}

@media (max-width: 768px) {
  .ep-bottom-nav { display: block; }
  /* Décaler le contenu pour la bottom nav */
  .ep-app .ep-main { padding-bottom: 64px; }
}


/* ══════════════════════════════════════════════════════════════
   SECTION 9 — TABLEAUX MODERNES
   ══════════════════════════════════════════════════════════════ */

.ep-table-wrap {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
}
.ep-table {
  width: 100%;
  border-collapse: collapse;
}
.ep-table thead th {
  padding: 11px 16px;
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-3);
  font-family: var(--mono);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  text-align: left;
  cursor: pointer;
  user-select: none;
  transition: color 0.15s;
}
.ep-table thead th:hover { color: var(--text-2); }
.ep-table thead th.sorted { color: var(--orange); }
.ep-table thead th .sort-icon {
  display: inline-flex; align-items: center;
  margin-left: 4px; color: var(--text-3); font-size: 9px;
}
.ep-table tbody tr {
  border-bottom: 1px solid rgba(255,255,255,0.035);
  transition: background var(--t-fast);
}
.ep-table tbody tr:last-child { border-bottom: none; }
.ep-table tbody tr:hover { background: rgba(255,255,255,0.025); }
.ep-table tbody td {
  padding: 12px 16px;
  font-size: 13px;
  color: var(--text);
  vertical-align: middle;
}

/* Responsive table : scroll horizontal avec fade */
.ep-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
@media (max-width: 640px) {
  .ep-table tbody td, .ep-table thead th { padding: 10px 12px; }
}


/* ══════════════════════════════════════════════════════════════
   SECTION 10 — GRAPHIQUES & VISUALISATION
   ══════════════════════════════════════════════════════════════ */

/* Sparkline SVG inline */
.ep-sparkline {
  display: block;
  overflow: visible;
}
.ep-sparkline-line {
  fill: none;
  stroke: var(--orange);
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ep-sparkline-area {
  fill: url(#ep-sparkline-grad);
  opacity: 0.3;
}
.ep-sparkline-dot {
  fill: var(--orange);
  stroke: var(--card);
  stroke-width: 2px;
}

/* Barre de progression grade */
.ep-grade-bar {
  height: 6px;
  background: var(--raised);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 6px;
}
.ep-grade-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 1s var(--ease-out-expo);
}
.ep-grade-fill.grade-a { background: var(--green); }
.ep-grade-fill.grade-b { background: var(--blue); }
.ep-grade-fill.grade-c { background: var(--amber); }
.ep-grade-fill.grade-d { background: #F97316; }
.ep-grade-fill.grade-e { background: var(--red); }

/* Donut/Ring progress */
.ep-ring {
  position: relative;
  display: inline-flex;
  align-items: center; justify-content: center;
}
.ep-ring-svg { transform: rotate(-90deg); }
.ep-ring-track { fill: none; stroke: var(--raised); }
.ep-ring-fill  {
  fill: none;
  stroke: var(--orange);
  stroke-linecap: round;
  transition: stroke-dashoffset 1.2s var(--ease-out-expo);
}
.ep-ring-label {
  position: absolute;
  font-size: 13px; font-weight: 900;
  color: var(--text); font-family: var(--mono);
  letter-spacing: -0.5px;
}


/* ══════════════════════════════════════════════════════════════
   SECTION 11 — ÉTATS & BADGES ENRICHIS
   ══════════════════════════════════════════════════════════════ */

/* Status dot animé */
.ep-status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ep-status-dot.active  { background: var(--green); animation: ep-pulse-ring 2s ease infinite; }
.ep-status-dot.pending { background: var(--amber); }
.ep-status-dot.error   { background: var(--red); }
.ep-status-dot.offline { background: var(--text-3); }

/* Pill status */
.ep-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}
.ep-pill.active  { background: rgba(34,197,94,0.12);  color: var(--green); }
.ep-pill.pending { background: rgba(245,158,11,0.12); color: var(--amber); }
.ep-pill.error   { background: rgba(239,68,68,0.12);  color: var(--red); }
.ep-pill.info    { background: var(--blue-lo);         color: var(--blue); }
.ep-pill.neutral { background: var(--raised);          color: var(--text-3); }
.ep-pill.premium { background: var(--orange-lo);       color: var(--orange); }
.ep-pill.academic{ background: var(--indigo-lo);       color: var(--indigo); }

/* Numéro badge (coin des cards) */
.ep-corner-badge {
  position: absolute;
  top: -6px; right: -6px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--card);
  font-family: var(--mono);
}


/* ══════════════════════════════════════════════════════════════
   SECTION 12 — UTILITAIRES
   ══════════════════════════════════════════════════════════════ */

/* Dividers */
.ep-divider {
  height: 1px;
  background: var(--border);
  margin: 20px 0;
}
.ep-divider-labeled {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0;
  color: var(--text-3); font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.ep-divider-labeled::before,
.ep-divider-labeled::after {
  content: ''; flex: 1;
  height: 1px; background: var(--border);
}

/* Surfaces colorées */
.ep-surface-orange { background: var(--surface-orange); }
.ep-surface-indigo { background: var(--surface-indigo); }
.ep-surface-green  { background: var(--surface-green);  }
.ep-surface-blue   { background: var(--surface-blue);   }

/* Gradient text */
.ep-grad-text-orange {
  background: linear-gradient(135deg, var(--orange), #FF4500);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.ep-grad-text-indigo {
  background: var(--gradient-academic);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* Box highlight */
.ep-highlight {
  border: 1px solid var(--border-hi);
  background: linear-gradient(135deg, rgba(255,122,0,0.06), transparent);
  border-radius: var(--r-card);
  padding: 16px 18px;
}

/* Truncate avec ellipsis */
.ep-truncate   { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ep-line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ep-line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Flex helpers */
.ep-flex-center { display: flex; align-items: center; justify-content: center; }
.ep-flex-between { display: flex; align-items: center; justify-content: space-between; }
.ep-flex-col { display: flex; flex-direction: column; }
.ep-gap-4  { gap: 4px;  }
.ep-gap-8  { gap: 8px;  }
.ep-gap-12 { gap: 12px; }
.ep-gap-16 { gap: 16px; }
.ep-gap-20 { gap: 20px; }
.ep-gap-24 { gap: 24px; }

/* Scrollable avec masque de fade */
.ep-fade-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  mask-image: linear-gradient(to right, transparent, black 20px, black calc(100% - 20px), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 20px, black calc(100% - 20px), transparent);
}
.ep-fade-scroll::-webkit-scrollbar { display: none; }


/* ══════════════════════════════════════════════════════════════
   SECTION 13 — LIGHT MODE OVERRIDES v5
   ══════════════════════════════════════════════════════════════ */

html.light-mode .ep-card { background: #fff; }
html.light-mode .ep-list-card { background: #fff; }
html.light-mode .ep-stat-card { background: #fff; }
html.light-mode .ep-card-elevated { background: #f8fafc; }
html.light-mode .ep-table-wrap { background: #fff; }
html.light-mode .ep-table thead th { background: #f8fafc; }
html.light-mode .ep-cmd-box  { background: #fff; }
html.light-mode .ep-confirm-box { background: #fff; }
html.light-mode .ep-drawer { background: #f8fafc; }
html.light-mode .ep-sheet  { background: #f8fafc; }
html.light-mode .ep-bottom-nav { background: rgba(255,255,255,0.92); }
html.light-mode .ep-card-hero {
  background: linear-gradient(135deg, rgba(255,122,0,0.08) 0%, rgba(99,102,241,0.05) 60%, #fff 100%);
}
html.light-mode [data-tooltip]::before {
  background: #1e293b;
  color: #fff;
  border-color: transparent;
}
html.light-mode [data-tooltip]::after { border-top-color: #1e293b; }


/* ══════════════════════════════════════════════════════════════
   SECTION 14 — PRINT STYLES
   ══════════════════════════════════════════════════════════════ */

@media print {
  .ep-nav, .ep-panel, .ep-bottom-nav,
  #ep-cmd-overlay, .ep-drawer, .ep-sheet,
  .ep-confirm-overlay, #ep-install-banner,
  #ep-page-loader { display: none !important; }

  .ep-main { margin-left: 0 !important; }
  .ep-card { box-shadow: none !important; border: 1px solid #ddd !important; }
  body { background: #fff !important; color: #000 !important; }
}


/* ══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — Corrections design_v5
   ══════════════════════════════════════════════════════════════ */

/* ── Breakpoint 992px ──────────────────────────────────────── */
@media (max-width: 992px) {

  /* ── Notification / Message panels : bottom-sheet sur mobile ── */
  .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;
    overflow: hidden;
    animation: epNotifIn .18s ease;
  }
  .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;
    overflow: hidden;
    animation: epMsgIn .18s ease;
  }

  /* ── Filtres : passage en colonne ─────────────────────────── */
  .ep-filter-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .ep-filter-bar select,
  .ep-filter-bar input {
    width: 100% !important;
  }

  /* ── KPI grids ─────────────────────────────────────────────── */
  .ep-kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Sections avec 3+ colonnes → 2 colonnes ───────────────── */
  .ep-grid-3,
  .ep-grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Cards actions empilées ────────────────────────────────── */
  .ep-actions-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Section head compact ──────────────────────────────────── */
  .ep-section-head {
    padding: 10px 14px;
  }
}

/* ── Breakpoint 640px ──────────────────────────────────────── */
@media (max-width: 640px) {

  /* ── Tous les grids → 1 colonne ───────────────────────────── */
  .ep-kpi-grid,
  .ep-grid-2,
  .ep-grid-3,
  .ep-grid-4,
  .ep-actions-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Post card actions compactes ──────────────────────────── */
  .ep-post-card-actions {
    gap: 6px;
    flex-wrap: wrap;
  }
  .ep-post-action-btn {
    font-size: 12px;
    padding: 5px 9px;
  }

  /* ── Émojis réaction dans post ─────────────────────────────── */
  .ep-quick-emoji { width: 32px; height: 32px; font-size: 16px; }

  /* ── Tags wrappent ─────────────────────────────────────────── */
  .ep-tags { flex-wrap: wrap; gap: 6px; }
  .ep-tag { font-size: 10px; }

  /* ── Avatars plus petits ─────────────────────────────────────── */
  .ep-avatar-lg { width: 52px !important; height: 52px !important; font-size: 18px !important; }
  .ep-avatar-xl { width: 64px !important; height: 64px !important; font-size: 22px !important; }

  /* ── Stats / métriques compactes ──────────────────────────── */
  .ep-metric { padding: 12px 14px; }
  .ep-metric-val { font-size: 1.4rem; }

  /* ── Gamification ──────────────────────────────────────────── */
  .ep-gm-badges { grid-template-columns: repeat(3, 1fr) !important; }
  .gm-badge { padding: 10px 6px; }

  /* ── Formulaires ───────────────────────────────────────────── */
  .ep-input, .ep-select, .ep-textarea {
    font-size: 14px;
  }

  /* ── Boutons ─────────────────────────────────────────────────── */
  .ep-btn-sm {
    padding: 6px 12px;
    font-size: 12px;
  }

  /* ── Tables custom : headers très compacts ─────────────────── */
  .ec-table thead th,
  .ech-tbl thead th,
  .abs-table th {
    font-size: 10px !important;
    padding: 7px 10px !important;
    white-space: nowrap;
  }
  .ec-table tbody td,
  .ech-tbl tbody td,
  .abs-table td {
    font-size: 11px !important;
    padding: 7px 10px !important;
  }
}

/* ── Breakpoint 400px ──────────────────────────────────────── */
@media (max-width: 400px) {
  /* Bottom nav labels très petits */
  .ep-bottom-nav-item { font-size: 9px; }
  .ep-bottom-nav-item i { font-size: 18px; }

  /* Post card padding minimal */
  .ep-post-card-body { padding: 10px 12px !important; }
  .ep-post-card-header { padding: 12px 12px 0 !important; }

  /* Challenge cards */
  .ep-ch-card { padding: 12px; }
}