/* ══════════════════════════════════════════════════════
   JobFacileAI — Style global futuriste
   ══════════════════════════════════════════════════════ */

:root {
  --bg-main:    #080f1a;
  --bg-card:    #0d1825;
  --bg-nav:     #06101a;
  --border:     #1a2d42;
  --border-mid: #2a4a6b;
  --text-main:  #e0e8f0;
  --text-muted: #8bacc8;
  --accent:     #4fc3f7;
  --accent2:    #818cf8;
  --success:    #34d399;
  --warning:    #f59e0b;
  --danger:     #f87171;
  --purple:     #c084fc;
}

/* ── BASE ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; }

body {
  background: var(--bg-main);
  color: var(--text-main);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  min-height: 100vh;
}

/* ── NAVBAR ──────────────────────────────────────────── */
.navbar {
  background: var(--bg-nav) !important;
  border-bottom: 1px solid var(--border);
  padding: .7rem 1.5rem;
  backdrop-filter: blur(10px);
}
.navbar-brand {
  color: var(--accent) !important;
  font-size: 1.15rem; font-weight: 800;
  letter-spacing: -.01em;
}
.nav-link {
  color: var(--text-muted) !important;
  font-size: .85rem; font-weight: 500;
  transition: color .2s;
  padding: .4rem .75rem !important;
  border-radius: 8px;
}
.nav-link:hover { color: var(--accent) !important; background: rgba(79,195,247,.06); }
.nav-link.active {
  color: var(--accent) !important;
  background: rgba(79,195,247,.1);
}
.badge.bg-success  { background:#34d39922 !important; color:#34d399; border:1px solid #34d39944; }
.badge.bg-warning  { background:#f59e0b22 !important; color:#f59e0b; border:1px solid #f59e0b44; }

/* ── CARDS GENERIQUES ────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
}
.card-header {
  background: #08111c !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 16px 16px 0 0 !important;
  padding: .85rem 1.25rem;
  font-size: .85rem;
}
.card-body { padding: 1.5rem; }

.feature-card {
  background: linear-gradient(145deg, #111d2e, #0d1825);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.25rem;
  transition: border-color .25s, transform .2s, box-shadow .25s;
}
.feature-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px -10px rgba(79,195,247,.2);
}

/* ── FORMS ───────────────────────────────────────────── */
.form-control, .form-select {
  background: #060e18 !important;
  border: 1px solid var(--border) !important;
  color: var(--text-main) !important;
  border-radius: 10px !important;
  padding: .5rem .9rem;
  font-size: .88rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(79,195,247,.12) !important;
  background: #08111c !important;
}
.form-control::placeholder { color: #3a5a7a; }
.form-label { font-size: .82rem; font-weight: 600; color: var(--text-muted); margin-bottom: .4rem; }

/* ── BUTTONS ─────────────────────────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, #1a56b0, #1d4ed8) !important;
  border: none !important; border-radius: 10px !important;
  font-weight: 600; font-size: .85rem;
  transition: all .2s;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #1d4ed8, #2563eb) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px -4px rgba(59,130,246,.4) !important;
}
.btn-success {
  background: linear-gradient(135deg, #047857, #059669) !important;
  border: none !important; border-radius: 10px !important;
  font-weight: 600;
}
.btn-success:hover { background:linear-gradient(135deg,#059669,#10b981) !important; }
.btn-sm { font-size:.8rem; padding:.4rem .9rem; border-radius:8px !important; }

/* ── ALERTS ──────────────────────────────────────────── */
.alert { border-radius: 12px !important; border: none !important; font-size: .88rem; }
.alert-warning { background: rgba(245,158,11,.08) !important; color: #fbbf24; border:1px solid #f59e0b33 !important; }
.alert-success  { background: rgba(52,211,153,.08) !important; color: #34d399; border:1px solid #34d39933 !important; }
.alert-danger   { background: rgba(248,113,113,.08) !important; color: #f87171; border:1px solid #f8717133 !important; }
.alert-info     { background: rgba(79,195,247,.08)  !important; color: #4fc3f7; border:1px solid #4fc3f733 !important; }

/* ── TABLES ──────────────────────────────────────────── */
.table { color: var(--text-main); }
.table-dark { background: transparent; }
.table-dark thead th, .table thead th {
  background: #06101a;
  color: var(--text-muted);
  border-color: var(--border) !important;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  padding: .75rem 1rem;
}
.table-dark td, .table td {
  border-color: var(--border) !important;
  vertical-align: middle;
  padding: .8rem 1rem;
  font-size: .85rem;
}
.table-dark tbody tr:hover td,
.table-hover tbody tr:hover td {
  background: rgba(79,195,247,.04) !important;
}

/* ── BADGES ──────────────────────────────────────────── */
.badge { border-radius: 8px !important; font-weight: 600; font-size: .72rem; }
.bg-success-soft { background: rgba(52,211,153,.15) !important; color:#34d399; }
.bg-primary-soft { background: rgba(79,195,247,.15) !important; color:#4fc3f7; }
.bg-secondary-soft{ background:rgba(148,163,184,.1) !important;  color:#94a3b8; }

/* ── SCROLLBAR ───────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── HR ──────────────────────────────────────────────── */
hr { border-color: var(--border) !important; margin: 1.5rem 0; }

/* ── FONT MONOSPACE CONSOLE ──────────────────────────── */
.font-monospace { font-family: 'Cascadia Code', 'Consolas', monospace; }

/* ── UTILITAIRES ─────────────────────────────────────── */
.text-accent   { color: var(--accent)  !important; }
.text-purple   { color: var(--purple)  !important; }
.text-emerald  { color: var(--success) !important; }
.border-accent { border-color: var(--accent) !important; }

/* ── RESPONSIVE GLOBAL ───────────────────────────────── */
@media (max-width: 767px) {
  /* Réduction du padding latéral sur mobile */
  .container-fluid.py-4 {
    padding-left: .75rem !important;
    padding-right: .75rem !important;
  }
  /* Navbar : plus compact */
  .navbar {
    padding: .5rem .85rem;
  }
  /* Cards : moins de padding */
  .card-body { padding: 1rem; }
  .card-header { padding: .65rem 1rem; }
  /* Tables Bootstrap standard : scrollable */
  .table-responsive-auto {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Boutons pleine largeur sur mobile si dans col-12 */
  .btn-block-mobile { width: 100%; }
}

@media (max-width: 575px) {
  /* Évite les débordements horizontaux globaux */
  body { overflow-x: hidden; }
  .row { --bs-gutter-x: .75rem; }
  h2, h3 { font-size: 1.2rem; }
  h5 { font-size: .95rem; }
  /* Badges + chips : wrap proprement */
  .d-flex.gap-3 { gap: .5rem !important; }
  .d-flex.gap-4 { gap: .75rem !important; }
}