/* ═══════════════════════════════════════════════
   VARIABLES GLOBALES
═══════════════════════════════════════════════ */
:root {
  --ink:        #0F1E3D;
  --ink-800:    #1A2F55;
  --ink-700:    #213668;
  --ink-600:    #2B4480;
  --ink-500:    #3A5698;
  --gold:       #D4A832;
  --gold-lt:    #E8C547;
  --gold-glow:  rgba(232,197,71,0.20);
  --sapphire:   #2563EB;
  --sapphire-lt:#4B8AF7;
  --emerald:    #10B981;
  --ruby:       #EF4444;
  --amber:      #F59E0B;
  --white:      #FFFFFF;
  --slate-400:  #B8CCEA;
  --text-bright:#EFF6FF;
  --text-mid:   #B8CCEA;
  --text-dim:   #7A96BE;
  --border:     rgba(255,255,255,0.10);
  --border-gold:rgba(232,197,71,0.35);
  --border-blue:rgba(75,138,247,0.45);
  --card:       rgba(26,47,85,0.88);
  --topbar-h:   64px;
  --radius:     12px;
  --radius-lg:  18px;
  --radius-xl:  24px;
  --t:          all 0.22s cubic-bezier(0.4,0,0.2,1);
  --font:       'Sora', sans-serif;
  --mono:       'JetBrains Mono', monospace;
}

/* ═══════════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  height: 100%;
  max-height: 100%;
  /* Empêche tout scroll/rebond sur iOS */
  position: fixed;
  width: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font);
  background: var(--ink);
  color: var(--text-bright);
  /* Hauteur dynamique : s'adapte à la barre d'adresse mobile */
  height: 100dvh;
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  /* Empêche le rebond/scroll de la page entière */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding-bottom: env(safe-area-inset-bottom);
}

body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 90% 60% at 10% 5%,  rgba(232,197,71,0.14) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 90% 95%, rgba(37,99,235,0.20) 0%, transparent 50%);
  pointer-events: none;
}

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink-500); border-radius: 4px; }

/* ═══════════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════════ */
@keyframes fadeUp     { from { opacity:0; transform:translateY(6px); }  to { opacity:1; transform:translateY(0); } }
@keyframes fadeDown   { from { opacity:0; transform:translateY(-14px); } to { opacity:1; transform:translateY(0); } }
@keyframes dashSlideIn{ from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:translateY(0); } }
@keyframes spin       { to { transform: rotate(360deg); } }
@keyframes pulse      { 0%,100%{opacity:1;} 50%{opacity:.5;} }
@keyframes shake      { 0%,100%{transform:translateX(0);} 20%,60%{transform:translateX(-8px);} 40%,80%{transform:translateX(8px);} }
@keyframes pwaSlideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes pwaGlow    { 0%,100%{ box-shadow: 0 0 0 0 rgba(99,102,241,0); } 50%{ box-shadow: 0 0 10px 3px rgba(99,102,241,0.35); } }

.shake { animation: shake 0.4s ease; }

/* ═══════════════════════════════════════════════
   ÉCRAN DE CONNEXION
═══════════════════════════════════════════════ */
#loginScreen {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink);
  overflow-y: auto;
  padding: 2rem 1rem;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
#loginScreen::before {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 100% 70% at 15% 10%, rgba(212,175,55,0.12) 0%, transparent 55%),
    radial-gradient(ellipse 70% 60% at 85% 90%, rgba(26,79,168,0.15) 0%, transparent 50%),
    linear-gradient(145deg, #0F1E3D 0%, #1A2F55 45%, #0F1E3D 100%);
  pointer-events: none;
}

.login-wrap {
  position: relative; z-index: 1;
  width: 100%; max-width: 400px;
  display: flex; flex-direction: column; align-items: center; gap: 1.8rem;
}
.login-header { text-align: center; animation: fadeDown 0.6s ease both; }
.login-logo-ring {
  width: 62px; height: 62px; border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(212,175,55,0.70);
  box-shadow: 0 6px 22px rgba(0,0,0,0.28), 0 0 0 4px rgba(255,255,255,0.10);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 0.75rem; overflow: hidden;
}
.login-logo-inner { width:100%; height:100%; border-radius:50%; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.login-logo-inner img { width:100%; height:100%; object-fit:contain; }
.login-brand { font-size: 2rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; margin-bottom: 0.3rem; }
.login-brand .e    { background: linear-gradient(110deg, #16a34a 0%, #ffffff 45%, #c8843a 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.login-brand .dash { color: rgba(255,255,255,0.3); }
.login-brand .solde{ background: linear-gradient(110deg, #c8843a 0%, #ffffff 42%, #16a34a 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.login-subtitle { font-size: 0.67rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.login-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(212,175,55,0.12); border: 1px solid rgba(212,175,55,0.2); padding: 4px 12px; border-radius: 20px; margin-top: 0.6rem; font-size: 0.68rem; font-weight: 600; color: var(--gold-lt); letter-spacing: 0.06em; }

.login-card {
  width: 100%;
  background: rgba(15,26,53,0.92);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius-xl); padding: 2rem;
  box-shadow: 0 24px 80px rgba(0,0,0,0.45), 0 4px 20px rgba(0,0,0,0.2);
  backdrop-filter: blur(20px);
  animation: fadeUp 0.5s ease both 0.1s;
  position: relative; overflow: hidden;
}
.login-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #C8962A 0%, #D4AF37 50%, #1A4FA8 100%);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.login-card-title { font-size: 0.73rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.4rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--border); }
.field-group { margin-bottom: 1rem; }
.field-label { display: block; font-size: 0.71rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mid); margin-bottom: 6px; }
.field-input { width: 100%; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem 1rem; color: var(--text-bright); font-family: var(--font); font-size: 0.9rem; transition: var(--t); outline: none; }
.field-input::placeholder { color: var(--text-dim); }
.field-input:focus { border-color: var(--border-blue); background: rgba(37,99,235,0.06); box-shadow: 0 0 0 3px rgba(37,99,235,0.12); }
.field-input.mono { font-family: var(--mono); letter-spacing: 0.05em; }
.field-input-wrap { position: relative; }
.field-eye { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--text-dim); cursor: pointer; font-size: 15px; transition: color 0.15s; }
.field-eye:hover { color: var(--text-mid); }

.login-btn { width: 100%; padding: 0.9rem; background: linear-gradient(135deg, #C8962A 0%, #D4AF37 100%); border: none; border-radius: var(--radius); color: #000; font-family: var(--font); font-size: 0.9rem; font-weight: 800; cursor: pointer; transition: var(--t); display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 0.5rem; box-shadow: 0 4px 20px rgba(200,150,42,0.4); letter-spacing: 0.03em; }
.login-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 28px rgba(200,150,42,0.55); }
.login-btn:active { transform: translateY(0); }
.login-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.login-footer { text-align: center; font-size: 0.69rem; color: rgba(255,255,255,0.22); animation: fadeUp 0.6s ease both 0.3s; }
.login-footer a { color: rgba(200,150,42,0.55); text-decoration: none; }

/* ═══════════════════════════════════════════════
   APP SHELL & STRUCTURE
═══════════════════════════════════════════════ */
#appShell {
  display: none;
  position: fixed;          /* fixé à l'écran, ne bouge jamais */
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100dvh;           /* hauteur dynamique viewport mobile */
  overflow: hidden;
}
#appShell.visible { display: flex; }

.main {
  margin-left: 0;
  flex: 1;
  height: 100dvh;           /* hauteur dynamique */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════
   TOPBAR
═══════════════════════════════════════════════ */
.topbar { height: calc(var(--topbar-h) + env(safe-area-inset-top)); background: var(--ink-800); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: env(safe-area-inset-top) 18px 0; gap: 10px; flex-shrink: 0; position: sticky; top: 0; z-index: 500; }
.topbar-logo { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.topbar-logo-icon { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg,#C8962A,#1A4FA8); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #fff; }
.topbar-logo-text { font-size: 14px; font-weight: 800; letter-spacing: -0.04em; }
.topbar-logo-text span { background: linear-gradient(120deg,#D4AF37,#2563EB); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.topbar-sep { width: 1px; height: 22px; background: var(--border); flex-shrink: 0; }
.topbar-nav { display: flex; align-items: center; gap: 2px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.topbar-nav::-webkit-scrollbar { display: none; }
.topbar-nav-item { display: flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 8px; cursor: pointer; font-size: 12.5px; font-weight: 500; color: var(--text-mid); border: 1px solid transparent; transition: var(--t); white-space: nowrap; position: relative; flex-shrink: 0; }
.topbar-nav-item:hover { background: rgba(255,255,255,0.05); color: var(--text-bright); }
.topbar-nav-item.active { background: var(--gold-glow); border-color: var(--border-gold); color: var(--gold-lt); }
.topbar-nav-item i { font-size: 13px; }
.topbar-nav-badge { position: absolute; top: 2px; right: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--ruby); border: 2px solid var(--ink-800); }
.topbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.topbar-user-btn { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 9px; border: 1px solid var(--border); background: var(--ink-700); cursor: pointer; transition: var(--t); }
.topbar-user-btn:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
.topbar-logout { display: flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 9px; border: 1px solid rgba(220,38,38,0.2); background: rgba(220,38,38,0.06); color: rgba(220,38,38,0.7); font-size: 12px; font-weight: 600; cursor: pointer; transition: var(--t); }
.topbar-logout:hover { background: rgba(220,38,38,0.12); border-color: rgba(220,38,38,0.4); color: #EF4444; }

/* ═══════════════════════════════════════════════
   BOUTONS ICÔNE & ACTIONS
═══════════════════════════════════════════════ */
.icon-btn { width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--border); background: var(--ink-700); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--t); color: var(--text-mid); font-size: 15px; position: relative; flex-shrink: 0; }
.icon-btn:hover { background: rgba(255,255,255,0.07); color: var(--text-bright); }
.icon-btn .notif-dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--ruby); border: 2px solid var(--ink-800); }

#btnNotifAgent { width:36px; height:36px; border-radius:9px; border:1px solid rgba(212,175,55,0.3); background:rgba(212,175,55,0.12); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:var(--t); color:var(--gold); font-size:15px; flex-shrink:0; }
#btnNotifAgent:hover { background:rgba(212,175,55,0.2); }

#btnInstallPWA { display: none; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 9px; border: 1px solid rgba(99,102,241,0.4); background: rgba(99,102,241,0.12); color: #818CF8; font-size: 12px; font-weight: 700; cursor: pointer; transition: var(--t); flex-shrink: 0; animation: pwaGlow 2s ease-in-out infinite; }
#btnInstallPWA:hover { background: rgba(99,102,241,0.22); border-color: rgba(99,102,241,0.6); color: #A5B4FC; }

/* ═══════════════════════════════════════════════
   CONTENU & PAGES
═══════════════════════════════════════════════ */
.content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 26px;
  -webkit-overflow-scrolling: touch;  /* scroll fluide sur iOS */
  overscroll-behavior-y: contain;     /* empêche le rebond vers la page */
  min-width: 0;                       /* empêche le débordement des enfants flex */
  max-width: 100%;                    /* bloque tout dépassement horizontal */
  box-sizing: border-box;
}
.page { display: none; }
.page.active { display: block; animation: fadeUp 0.2s ease both; }

/* Optimisation mobile : évite le recalcul de rendu sur les cartes */
@media (max-width: 768px) {
  .card, .stat-card, .quick-card {
    will-change: auto;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }
}

/* ═══════════════════════════════════════════════
   CARDS
═══════════════════════════════════════════════ */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: var(--t); }
.card:hover { border-color: rgba(255,255,255,0.10); }
.card-header { padding: 14px 18px 12px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.card-title { font-size: 13px; font-weight: 700; color: var(--text-bright); display: flex; align-items: center; gap: 8px; }
.card-title i { font-size: 14px; color: var(--gold); }
.card-body { padding: 18px; }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 10px; flex-wrap: wrap; }
.section-title { font-size: 18px; font-weight: 800; letter-spacing: -0.03em; }

/* ═══════════════════════════════════════════════
   BANNIÈRE D'ACCUEIL
═══════════════════════════════════════════════ */
/* ── Ancienne classe conservée pour compatibilité éventuelle ── */
.portal-welcome { background: linear-gradient(135deg, rgba(15,26,53,0.95) 0%, rgba(22,32,64,0.95) 60%, rgba(10,20,45,0.95) 100%); border: 1px solid rgba(212,175,55,0.18); border-radius: var(--radius-xl); padding: 0; margin-bottom: 20px; position: relative; overflow: hidden; }
.portal-welcome::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #C8962A 0%, #D4AF37 40%, #2563EB 100%); }
.portal-welcome::after { content: ''; position: absolute; right: -60px; top: -60px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(212,175,55,0.09) 0%, transparent 65%); border-radius: 50%; pointer-events: none; }

/* ── STICKY : partie haute (nom/avatar/Quitter) — ne bouge pas au scroll ── */
.portal-welcome-sticky {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(135deg, rgba(12,22,48,0.98) 0%, rgba(18,28,58,0.98) 60%, rgba(8,16,40,0.98) 100%);
  border: 1px solid rgba(212,175,55,0.22);
  border-bottom: 1px solid rgba(212,175,55,0.10);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  overflow: hidden;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  position: relative;
  box-shadow: 0 4px 24px rgba(0,0,0,0.45);
}
.portal-welcome-sticky::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #C8962A 0%, #D4AF37 40%, #2563EB 100%);
}
.portal-welcome-sticky::after {
  content: '';
  position: absolute; right: -60px; top: -60px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(212,175,55,0.09) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}

/* ── BODY SCROLLABLE : strip emploi/catégorie/parts/recrutement ── */
.portal-welcome-body {
  background: linear-gradient(135deg, rgba(15,26,53,0.95) 0%, rgba(22,32,64,0.95) 60%, rgba(10,20,45,0.95) 100%);
  border: 1px solid rgba(212,175,55,0.18);
  border-top: none;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  overflow: hidden;
}
.welcome-main { display: flex; align-items: flex-start; gap: 18px; padding: 22px 26px 18px; flex-wrap: wrap; position: relative; z-index: 1; }
.welcome-avatar { width: 58px; height: 58px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #6366F1, #8B5CF6); border: 2.5px solid rgba(212,175,55,0.4); box-shadow: 0 4px 18px rgba(0,0,0,0.35), 0 0 0 5px rgba(212,175,55,0.07); }
.welcome-text { flex: 1; min-width: 0; }
.welcome-greeting { font-size: 10.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.welcome-name { font-size: 22px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; }
.welcome-meta { font-size: 12px; color: var(--text-mid); margin-top: 5px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.welcome-meta-chip { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,0.05); border: 1px solid var(--border); padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 500; }
.welcome-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.welcome-strip { border-top: 1px solid rgba(255,255,255,0.06); display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); position: relative; z-index: 1; }
.welcome-strip-item { padding: 13px 20px; display: flex; flex-direction: column; gap: 3px; border-right: 1px solid rgba(255,255,255,0.06); transition: var(--t); }
.welcome-strip-item:last-child { border-right: none; }
.welcome-strip-item:hover { background: rgba(255,255,255,0.03); }
.welcome-strip-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); }
.welcome-strip-val { font-size: 15px; font-weight: 800; letter-spacing: -0.03em; }
.welcome-strip-sub { font-size: 10.5px; color: var(--text-dim); }

/* ═══════════════════════════════════════════════
   STAT CARDS
═══════════════════════════════════════════════ */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px; min-width: 0; max-width: 100%; }
.stat-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 16px 14px; transition: var(--t); position: relative; overflow: hidden; cursor: default; }
.stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; }
.stat-card.blue::before  { background: linear-gradient(90deg, #1A4FA8, #2563EB); }
.stat-card.gold::before  { background: linear-gradient(90deg, #C8962A, #D4AF37); }
.stat-card.green::before { background: linear-gradient(90deg, #059669, #10B981); }
.stat-card.amber::before { background: linear-gradient(90deg, #D97706, #F59E0B); }
.stat-card:hover { border-color: rgba(255,255,255,0.12); box-shadow: 0 8px 28px rgba(0,0,0,0.2); }
.stat-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.stat-icon { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.stat-icon.blue  { background: rgba(26,79,168,0.18);  color: #60A5FA; }
.stat-icon.gold  { background: rgba(200,150,42,0.18);  color: var(--gold-lt); }
.stat-icon.green { background: rgba(5,150,105,0.18);   color: #34D399; }
.stat-icon.amber { background: rgba(217,119,6,0.15);   color: #FCD34D; }
.stat-trend { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 20px; display: inline-flex; align-items: center; gap: 3px; }
.stat-trend.up   { background: rgba(5,150,105,0.15);    color: #34D399; }
.stat-trend.same { background: rgba(148,163,184,0.12);  color: var(--text-mid); }
.stat-value { font-size: 28px; font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.stat-label { font-size: 11.5px; color: var(--text-mid); margin-top: 5px; font-weight: 500; }
.stat-bar { height: 3px; border-radius: 3px; background: rgba(255,255,255,0.07); margin-top: 12px; overflow: hidden; }
.stat-bar-fill { height: 100%; border-radius: 3px; }
.stat-bar-fill.blue  { background: linear-gradient(90deg,#1A4FA8,#2563EB); width:83%; }
.stat-bar-fill.gold  { background: linear-gradient(90deg,#C8962A,#D4AF37); width:100%; }
.stat-bar-fill.green { background: linear-gradient(90deg,#059669,#10B981); width:83%; }
.stat-bar-fill.amber { background: linear-gradient(90deg,#D97706,#F59E0B); width:40%; }

/* ═══════════════════════════════════════════════
   ACTIONS RAPIDES
═══════════════════════════════════════════════ */
.quick-actions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; min-width: 0; max-width: 100%; }
.quick-card { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 14px; cursor: pointer; transition: var(--t); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.quick-card:hover { background: rgba(255,255,255,0.06); border-color: rgba(212,175,55,0.25); }
.quick-card-icon { width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.quick-card-label { font-size: 12px; font-weight: 700; color: var(--text-bright); }
.quick-card-sub { font-size: 10.5px; color: var(--text-dim); margin-top: -6px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; min-width: 0; max-width: 100%; }

/* ═══════════════════════════════════════════════
   SALAIRE
═══════════════════════════════════════════════ */
.salary-row { display: flex; align-items: baseline; gap: 6px; margin-bottom: 14px; }
.salary-amount { font-size: 28px; font-weight: 800; letter-spacing: -0.05em; color: var(--text-bright); }
.salary-currency { font-size: 15px; font-weight: 600; color: var(--gold); }
.salary-period { font-size: 11px; color: var(--text-dim); margin-left: 2px; }
.salary-line { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 12.5px; }
.salary-line:last-child { border-bottom: none; }
.salary-line-lbl { color: var(--text-mid); display: flex; align-items: center; gap: 7px; }
.salary-line-val { font-weight: 700; }

/* ═══════════════════════════════════════════════
   BADGES & BOUTONS
═══════════════════════════════════════════════ */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; line-height: 1.5; }
.badge.active   { background: rgba(5,150,105,0.15);  color: #34D399;  border: 1px solid rgba(5,150,105,0.25); }
.badge.pending  { background: rgba(217,119,6,0.15);  color: #FCD34D;  border: 1px solid rgba(217,119,6,0.25); }
.badge.new      { background: rgba(37,99,235,0.15);  color: #60A5FA;  border: 1px solid rgba(37,99,235,0.3); }
.badge.rejected { background: rgba(220,38,38,0.15);  color: #F87171;  border: 1px solid rgba(220,38,38,0.25); }

.btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: var(--radius); font-family: var(--font); font-size: 13px; font-weight: 600; cursor: pointer; transition: var(--t); border: 1px solid transparent; line-height: 1.2; text-decoration: none; white-space: nowrap; }
.btn-primary { background: linear-gradient(135deg, #C8962A, #D4AF37); color: #000; box-shadow: 0 2px 12px rgba(200,150,42,0.3); }
.btn-primary:hover { box-shadow: 0 4px 20px rgba(200,150,42,0.5); transform: translateY(-1px); }
.btn-blue { background: linear-gradient(135deg, #1A4FA8, #2563EB); color: #fff; box-shadow: 0 2px 12px rgba(26,79,168,0.3); }
.btn-blue:hover { box-shadow: 0 4px 20px rgba(26,79,168,0.5); transform: translateY(-1px); }
.btn-ghost { background: rgba(255,255,255,0.05); color: var(--text-mid); border-color: var(--border); }
.btn-ghost:hover { background: rgba(255,255,255,0.09); color: var(--text-bright); }
.btn-sm { padding: 5px 12px; font-size: 12px; }
.btn-danger { background: rgba(220,38,38,0.12); color: #F87171; border-color: rgba(220,38,38,0.25); }
.btn-danger:hover { background: rgba(220,38,38,0.2); }

.nav-badge { background: var(--ruby); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 20px; line-height: 1.5; }
.nav-badge.gold { background: var(--gold); color: #000; }

/* ═══════════════════════════════════════════════
   ONGLETS
═══════════════════════════════════════════════ */
.tabs { display: flex; gap: 4px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 10px; padding: 4px; margin-bottom: 18px; width: fit-content; }
.tab { padding: 7px 16px; border-radius: 7px; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: var(--t); color: var(--text-mid); white-space: nowrap; }
.tab.active { background: var(--ink-600); color: var(--text-bright); }
.tab:hover:not(.active) { color: var(--text-bright); }

/* ═══════════════════════════════════════════════
   FORMULAIRES
═══════════════════════════════════════════════ */
.form-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px; }
.form-input,
.form-select,
.form-textarea { width: 100%; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: var(--radius); padding: 9px 12px; color: var(--text-bright); font-family: var(--font); font-size: 13px; transition: var(--t); outline: none; }
.form-input:focus,
.form-select:focus,
.form-textarea:focus { border-color: var(--border-gold); background: rgba(212,175,55,0.04); box-shadow: 0 0 0 3px rgba(212,175,55,0.08); }
.form-input::placeholder,
.form-textarea::placeholder { color: var(--text-dim); }
.form-select { cursor: pointer; }
.form-select option { background: var(--ink-700); }
.form-textarea { resize: vertical; min-height: 100px; line-height: 1.6; }
.form-group { margin-bottom: 14px; }

/* ═══════════════════════════════════════════════
   BULLETINS
═══════════════════════════════════════════════ */
.bulletin-card { display: flex; align-items: center; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,0.04); gap: 14px; transition: var(--t); }
.bulletin-card:last-child { border-bottom: none; }
.bulletin-card:hover { background: rgba(255,255,255,0.03); }
.bulletin-icon { width: 42px; height: 42px; border-radius: 10px; background: rgba(220,38,38,0.12); display: flex; align-items: center; justify-content: center; font-size: 20px; color: #F87171; flex-shrink: 0; }
.bulletin-icon.downloaded { background: rgba(5,150,105,0.12); color: #34D399; }
.bulletin-info { flex: 1; min-width: 0; }
.bulletin-mois { font-size: 13.5px; font-weight: 700; }
.bulletin-meta { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }
.bulletin-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ═══════════════════════════════════════════════
   DEMANDES
═══════════════════════════════════════════════ */
.demande-card { padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,0.04); transition: var(--t); }
.demande-card:last-child { border-bottom: none; }
.demande-card:hover { background: rgba(255,255,255,0.02); }
.demande-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.demande-type { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 7px; }
.demande-desc { font-size: 12px; color: var(--text-mid); margin-top: 3px; }
.demande-date { font-size: 11px; color: var(--text-dim); }
.demande-footer { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════
   MESSAGES
═══════════════════════════════════════════════ */
.msg-item { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid rgba(255,255,255,0.04); cursor: pointer; transition: var(--t); }
.msg-item:last-child { border-bottom: none; }
.msg-item:hover { background: rgba(255,255,255,0.03); }
.msg-item.unread { background: rgba(37,99,235,0.04); }
.msg-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #fff; flex-shrink: 0; }
.msg-content { flex: 1; min-width: 0; }
.msg-from { font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; }
.msg-subject { font-size: 12.5px; color: var(--text-mid); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-date { font-size: 11px; color: var(--text-dim); flex-shrink: 0; }
.msg-unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sapphire-lt); flex-shrink: 0; }

/* ═══════════════════════════════════════════════
   ACTIVITÉ
═══════════════════════════════════════════════ */
.activity-item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.activity-item:last-child { border-bottom: none; }
.activity-text { font-size: 12.5px; line-height: 1.5; }
.activity-time { font-size: 11px; color: var(--text-dim); margin-top: 2px; }

/* ═══════════════════════════════════════════════
   INFO BOXES
═══════════════════════════════════════════════ */
.info-box { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--radius); border: 1px solid; margin-bottom: 10px; font-size: 12.5px; }
.info-box.green { border-color: rgba(5,150,105,0.2);  background: rgba(5,150,105,0.06);  color: #6EE7B7; }
.info-box.blue  { border-color: rgba(37,99,235,0.2);  background: rgba(37,99,235,0.06);  color: #93C5FD; }
.info-box.amber { border-color: rgba(217,119,6,0.2);  background: rgba(217,119,6,0.06);  color: #FCD34D; }
.info-box i { flex-shrink: 0; margin-top: 1px; }

/* ═══════════════════════════════════════════════
   MODALS
═══════════════════════════════════════════════ */
.modal-overlay { display: none; position: fixed; inset: 0; z-index: 8000; background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); align-items: center; justify-content: center; padding: 1.5rem; }
.modal-overlay.open { display: flex; }
.modal-box { background: var(--ink-700); border: 1px solid var(--border); border-radius: var(--radius-xl); max-width: 480px; width: 100%; box-shadow: 0 24px 80px rgba(0,0,0,0.5); overflow: hidden; animation: fadeUp 0.3s ease; }
.modal-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.modal-title { font-size: 14px; font-weight: 800; }
.modal-close { background: none; border: none; color: var(--text-dim); font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: var(--t); }
.modal-close:hover { color: var(--text-bright); background: rgba(255,255,255,0.06); }
.modal-body { padding: 20px; }
.modal-footer { padding: 0 20px 20px; display: flex; gap: 8px; justify-content: flex-end; }

/* ═══════════════════════════════════════════════
   PROFIL
═══════════════════════════════════════════════ */
.profil-av { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #6366F1, #8B5CF6); flex-shrink: 0; border: 3px solid rgba(212,175,55,0.3); box-shadow: 0 4px 16px rgba(0,0,0,0.3); }
.profil-field { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.profil-field:last-child { border-bottom: none; }
.profil-field-lbl { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); min-width: 120px; margin-top: 1px; }
.profil-field-val { font-size: 13px; font-weight: 500; }

/* ═══════════════════════════════════════════════
   PROGRESS
═══════════════════════════════════════════════ */
.progress { background: rgba(255,255,255,0.08); border-radius: 20px; height: 6px; overflow: hidden; }
.progress-bar { height: 100%; border-radius: 20px; transition: width 0.6s ease; }
.progress-bar.blue  { background: linear-gradient(90deg, #1A4FA8, #2563EB); }
.progress-bar.gold  { background: linear-gradient(90deg, #C8962A, #D4AF37); }
.progress-bar.green { background: linear-gradient(90deg, #059669, #10B981); }

/* ═══════════════════════════════════════════════
   ÉTATS VIDES
═══════════════════════════════════════════════ */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--text-dim); font-size: 13px; }
.empty-state i { font-size: 2.5rem; display: block; margin-bottom: 1rem; color: var(--text-dim); }

/* ═══════════════════════════════════════════════
   TOASTS
═══════════════════════════════════════════════ */
#toastContainer { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; }
.toast { display: flex; align-items: center; gap: 10px; background: var(--ink-700); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; box-shadow: 0 8px 32px rgba(0,0,0,0.4); min-width: 280px; max-width: 360px; animation: fadeUp 0.3s ease; }
.toast-icon { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.toast-title { font-size: 13px; font-weight: 700; }
.toast-msg { font-size: 12px; color: var(--text-mid); margin-top: 1px; }
.toast-close { margin-left: auto; cursor: pointer; color: var(--text-dim); font-size: 14px; padding: 2px; transition: color 0.15s; flex-shrink: 0; }
.toast-close:hover { color: var(--text-bright); }

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media (max-width: 768px) {
  .topbar-logo-text { display: none; }
  .topbar-nav-item span { display: none; }
  .topbar-nav { gap: 0; }
  .topbar-nav-item { padding: 6px 9px; }
  .topbar-logout span { display: none; }
  .grid-2 { grid-template-columns: 1fr; }
  .content { padding: 16px; }
  .quick-actions-grid { grid-template-columns: repeat(2, 1fr); }
  .topbar-logout-mobile { display: flex !important; }
  .topbar-logout-desktop { display: none !important; }
}
@media (min-width: 769px) {
  .topbar-logout-mobile { display: none !important; }
  .topbar-logout-desktop { display: flex !important; }
}

/* ═══════════════════════════════════════════════
   BOTTOM NAV (MOBILE)
═══════════════════════════════════════════════ */
.bottom-nav {
  height: 60px;
  background: var(--ink-800);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-shrink: 0;              /* ne se compresse jamais */
  position: relative;
  z-index: 50;
  /* Safe area pour les iPhones avec barre home */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  min-height: calc(60px + env(safe-area-inset-bottom, 0px));
}
.bottom-nav-item { display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; padding: 6px 20px; border-radius: 10px; color: var(--text-mid); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; transition: var(--t); position: relative; flex: 1; }
.bottom-nav-item i { font-size: 18px; }
.bottom-nav-item:hover { color: var(--text-bright); background: rgba(255,255,255,0.05); }
.bottom-nav-item.active,
.bottom-nav-item.active i { color: var(--gold-lt); }
.bottom-nav-badge-dot { position: absolute; top: 4px; right: calc(50% - 14px); width: 7px; height: 7px; border-radius: 50%; background: var(--ruby); border: 2px solid var(--ink-800); }

/* ═══════════════════════════════════════════════
   BOUTON RETOUR
═══════════════════════════════════════════════ */
.back-btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 10px; background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: var(--text-mid); font-size: 13px; font-weight: 600; cursor: pointer; transition: var(--t); margin-bottom: 16px; }
.back-btn:hover { background: rgba(255,255,255,0.09); color: var(--text-bright); border-color: rgba(255,255,255,0.12); }
.back-btn i { font-size: 14px; }

/* ═══════════════════════════════════════════════
   PWA INSTALL POPUP
═══════════════════════════════════════════════ */
#pwa-popup { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 99999; padding: 0 0 env(safe-area-inset-bottom, 0); animation: pwaSlideUp .4s cubic-bezier(.16,1,.3,1) both; }
#pwa-popup.show { display: block; }
.pwa-inner { background: #1e293b; border-top: 1px solid rgba(255,255,255,0.08); border-radius: 20px 20px 0 0; padding: 20px 20px 24px; box-shadow: 0 -8px 40px rgba(0,0,0,.45); }
.pwa-drag { width: 40px; height: 4px; background: rgba(255,255,255,0.2); border-radius: 2px; margin: 0 auto 16px; }
.pwa-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.pwa-icon { width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg,#1a4fa8,#22c55e); display: flex; align-items: center; justify-content: center; font-size: 26px; flex-shrink: 0; box-shadow: 0 4px 16px rgba(26,79,168,.4); overflow: hidden; }
.pwa-icon img { width:100%; height:100%; object-fit:contain; border-radius:14px; }
.pwa-titles { flex: 1; }
.pwa-app-name { font-family: var(--font); font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 2px; }
.pwa-app-name span { color: #22c55e; }
.pwa-app-sub { font-size: .75rem; color: rgba(255,255,255,.5); font-family: var(--font); }
.pwa-close-x { background: rgba(255,255,255,.08); border: none; border-radius: 50%; width: 28px; height: 28px; color: rgba(255,255,255,.5); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pwa-desc { font-size: .8rem; color: rgba(255,255,255,.65); font-family: var(--font); line-height: 1.5; margin-bottom: 16px; }
.pwa-steps { display: none; background: rgba(255,255,255,.05); border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; flex-direction: column; gap: 0; }
.pwa-steps.show { display: flex; }
.pwa-step { display: flex; align-items: center; gap: 10px; font-size: .78rem; color: rgba(255,255,255,.75); font-family: var(--font); padding: 5px 0; background: none; border: none; border-radius: 0; }
.pwa-step-num { width: 22px; height: 22px; border-radius: 50%; background: #1a4fa8; color: #fff; font-size: .68rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pwa-step-icon { font-size: 1.1rem; }
.pwa-btn-install { width: 100%; padding: 14px; background: linear-gradient(135deg,#1a4fa8,#2563eb); color: #fff; border: none; border-radius: 14px; font-size: .95rem; font-weight: 700; font-family: var(--font); cursor: pointer; letter-spacing: .03em; box-shadow: 0 4px 18px rgba(26,79,168,.45); transition: transform .15s, box-shadow .15s; }
.pwa-btn-install:active { transform: scale(.97); }
.pwa-btn-later { display: block; width: 100%; margin-top: 10px; padding: 10px; background: none; border: none; color: rgba(255,255,255,.4); font-size: .8rem; font-family: var(--font); cursor: pointer; text-align: center; }