/* -------------------------------------------------------------------------- */
/* 1. RESET & GOOGLE TRANSLATE (INDISPENSABLE)                                */
/* -------------------------------------------------------------------------- */
[class*="skiptranslate"] { display: none !important; }
#goog-gt-vt { display: none !important; }
body { position: unset !important; top: 0 !important; }
html, body { height: 100%; scroll-behavior: smooth; background-color: #030712 !important; }

/* -------------------------------------------------------------------------- */
/* 2. VARIABLES DARK & NEON                                                   */
/* -------------------------------------------------------------------------- */
:root {
    --oz-bg: #030712;
    --oz-card-bg: #111827;

    /* new: panels + soft */
    --oz-panel: #0b1220;
    --oz-panel2: #0e1830;
    --oz-soft: rgba(255,255,255,0.04);

    --oz-ink: #f8fafc;
    --oz-muted: #94a3b8;

    --oz-primary: #3b82f6;
    --oz-primary-2: #2563eb;
    --oz-accent: #10b981;
    --oz-purple: #8b5cf6;

    --oz-border: rgba(255, 255, 255, 0.08);
    --oz-border2: rgba(255,255,255,0.14);

    --oz-radius: 20px;
    --oz-shadow: 0 18px 45px rgba(0, 0, 0, 0.5);
}

/* -------------------------------------------------------------------------- */
/* 3. BASE & BACKGROUNDS                                                      */
/* -------------------------------------------------------------------------- */
body {
    background-color: var(--oz-bg) !important;
    background-image:
        radial-gradient(circle at 10% 20%, rgba(59, 130, 246, 0.12) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(139, 92, 246, 0.08) 0%, transparent 40%) !important;
    color: white;
    font-family: 'Inter', system-ui, sans-serif;
    margin: 0;
}

/* Suppression forcée des fonds blancs Bootstrap */
section.bg-white, .navbar.bg-white, .bg-white, .card.bg-white {
    background: transparent !important;
    border-color: var(--oz-border) !important;
}

/* Helpers globaux (réutilisables sur toutes les pages) */
.oz-wrap { padding-top: 18px; padding-bottom: 32px; }
.oz-muted { color: var(--oz-muted) !important; }
.oz-table-wrap { overflow-x: auto; }

.oz-panel {
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
    border: 1px solid var(--oz-border);
    border-radius: var(--oz-radius);
    box-shadow: var(--oz-shadow);
}

/* Chips / Pills */
.oz-chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 10px;
    border-radius: 999px;
    border: 1px solid var(--oz-border);
    background: rgba(255,255,255,0.03);
    font-size: 13px;
    color: rgba(248,250,252,0.92);
}

/* KPI icon container */
.oz-kpi-icon{
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--oz-border2);
    background: rgba(255,255,255,0.03);
}

/* -------------------------------------------------------------------------- */
/* 4. NAVBAR (GLASSMORPHISM)                                                  */
/* -------------------------------------------------------------------------- */
.navbar {
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--oz-border);
    background: rgba(3, 7, 18, 0.8) !important;
}
.navbar .navbar-brand { color: #fff !important; font-weight: 800; }
.navbar .nav-link { color: var(--oz-muted) !important; font-weight: 500; }
.navbar .nav-link:hover { color: var(--oz-primary) !important; }

/* -------------------------------------------------------------------------- */
/* 5. HERO (HEADER)                                                           */
/* -------------------------------------------------------------------------- */
header.py-5 { position: relative; padding: 100px 0 !important; }

header h1 {
    font-weight: 800;
    letter-spacing: -1.5px;
    color: #ffffff !important;
    background: linear-gradient(to bottom, #ffffff 60%, #94a3b8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
header .lead { color: var(--oz-muted) !important; }

/* -------------------------------------------------------------------------- */
/* 6. CARDS (FEATURES & CONTENT)                                              */
/* -------------------------------------------------------------------------- */
.card {
    background: var(--oz-card-bg) !important;
    border: 1px solid var(--oz-border) !important;
    border-radius: var(--oz-radius);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--oz-ink) !important;
}
.card:hover {
    transform: translateY(-8px);
    border-color: rgba(59, 130, 246, 0.4) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}
.card h3, .card .h5, .card .h6 { color: #fff !important; }
.card .text-secondary { color: var(--oz-muted) !important; }

/* Headers/footers de cards (Bootstrap) en dark, lisibles partout */
.card-header, .card-footer{
    background: rgba(255,255,255,0.03) !important;
    border-color: var(--oz-border) !important;
    color: rgba(248,250,252,0.92) !important;
}

/* Icônes Style Ozi-AI */
.card .fa-lg.text-primary {
    color: var(--oz-primary) !important;
    background: rgba(59, 130, 246, 0.1);
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.2);
}

/* -------------------------------------------------------------------------- */
/* 7. FORMULAIRE & BOUTONS                                                    */
/* -------------------------------------------------------------------------- */
.form-control {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--oz-border) !important;
    color: #fff !important;
    border-radius: 12px !important;
}
.input-group-text {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--oz-border) !important;
    color: #fff;
}
.btn-primary {
    background: linear-gradient(135deg, var(--oz-primary), var(--oz-purple)) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
    font-weight: 600;
}
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.1); }
.btn-outline-secondary { border-color: var(--oz-border) !important; color: #fff !important; }

/* -------------------------------------------------------------------------- */
/* 8. LOADING OVERLAY (TON SPINNER RÉCUPÉRÉ)                                  */
/* -------------------------------------------------------------------------- */
#loadingOverlay {
    display: none; position: fixed; inset: 0;
    background: rgba(3, 7, 18, 0.9);
    backdrop-filter: blur(8px);
    z-index: 100000; align-items: center; justify-content: center;
}
#loadingOverlay .box {
    display: flex; align-items: center; gap: 14px; padding: 20px 25px;
    border: 1px solid var(--oz-border); border-radius: var(--oz-radius);
    background: var(--oz-card-bg); box-shadow: var(--oz-shadow);
}
#loadingOverlay .spinner {
    width: 44px; height: 44px; border-radius: 50%;
    border: 5px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--oz-primary);
    animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
#loadingOverlay .txt { color: #fff; font-size: 14px; font-weight: 500; }

/* -------------------------------------------------------------------------- */
/* 9. ACCORDÉON & FAQ                                                         */
/* -------------------------------------------------------------------------- */
.accordion-item {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid var(--oz-border) !important;
    border-radius: 12px !important;
    margin-bottom: 10px;
}
.accordion-button { background: transparent !important; color: #fff !important; box-shadow: none !important; }
.accordion-button:not(.collapsed) { color: var(--oz-primary) !important; }

/* -------------------------------------------------------------------------- */
/* 10. FOOTER                                                                 */
/* -------------------------------------------------------------------------- */
footer {
    background: #000 !important;
    border-top: 1px solid var(--oz-border) !important;
    padding: 60px 0;
}

/* -------------------------------------------------------------------------- */
/* 11. POLISH: LINKS / TEXT / BADGES                                           */
/* -------------------------------------------------------------------------- */
a {
  color: #93c5fd;
  text-decoration: none;
}
a:hover {
  color: #bfdbfe;
  text-decoration: underline;
}

body .text-secondary,
body .text-muted,
body .text-body-secondary,
body .text-body {
  color: white !important;
}

.badge,
.badge.text-bg-light,
.badge.text-bg-secondary {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--oz-border) !important;
  color: #e5e7eb !important;
}

/* -------------------------------------------------------------------------- */
/* 12. NAVBAR MOBILE (TOGGLER VISIBILITY)                                      */
/* -------------------------------------------------------------------------- */
.navbar .navbar-toggler {
  border: 1px solid var(--oz-border) !important;
}
.navbar .navbar-toggler-icon {
  filter: invert(1) opacity(.9);
}

/* dropdown/lang select better on dark */
.navbar .form-select {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid var(--oz-border) !important;
  color: #fff !important;
}
.navbar .form-select option {
  background: #0b1220;
  color: #fff;
}

/* -------------------------------------------------------------------------- */
/* 13. BUTTONS COMPLETE (OUTLINE + HOVER)                                      */
/* -------------------------------------------------------------------------- */
.btn {
  border-radius: 14px !important;
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn-outline-primary {
  border: 1px solid rgba(59,130,246,0.45) !important;
  color: #fff !important;
}
.btn-outline-primary:hover {
  background: rgba(59,130,246,0.12) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.10);
}

.btn-outline-secondary:hover {
  background: rgba(255,255,255,0.06) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.06);
}

/* -------------------------------------------------------------------------- */
/* 14. FORMS (FOCUS STATES + PLACEHOLDER)                                      */
/* -------------------------------------------------------------------------- */
.form-control::placeholder {
  color: rgba(148,163,184,0.85) !important;
}
.form-control:focus,
.form-select:focus {
  border-color: rgba(59,130,246,0.55) !important;
  box-shadow: 0 0 0 .25rem rgba(59,130,246,0.15) !important;
  outline: none !important;
}

/* -------------------------------------------------------------------------- */
/* 15. SECTIONS RHYTHM + DIVIDERS                                              */
/* -------------------------------------------------------------------------- */
section {
  padding-top: 70px;
  padding-bottom: 70px;
}

section.border-top,
section.border-bottom {
  border-color: var(--oz-border) !important;
}

/* petite “lueur” subtile sur les sections clés */
#features, #faq {
  background-image:
    radial-gradient(circle at 20% 10%, rgba(16,185,129,0.08) 0%, transparent 35%),
    radial-gradient(circle at 85% 70%, rgba(59,130,246,0.10) 0%, transparent 40%);
}

/* -------------------------------------------------------------------------- */
/* 16. CARDS: HEADER / BODY CONTRAST                                           */
/* -------------------------------------------------------------------------- */
.card .card-body {
  color: rgba(248,250,252,0.88) !important;
}
.card .small {
  color: rgba(148,163,184,0.95) !important;
}

/* -------------------------------------------------------------------------- */
/* 17. ACCORDION IMPROVEMENTS                                                 */
/* -------------------------------------------------------------------------- */
.accordion-button::after {
  filter: invert(1) opacity(.8);
}
.accordion-body {
  color: rgba(148,163,184,0.95) !important;
}

/* -------------------------------------------------------------------------- */
/* 18. FOOTER LINKS + BETTER CONTRAST                                          */
/* -------------------------------------------------------------------------- */
footer .text-secondary,
footer small,
footer {
  color: rgba(148,163,184,0.95) !important;
}
footer a {
  color: rgba(191,219,254,0.95) !important;
}
footer a:hover {
  color: #ffffff !important;
  text-decoration: underline;
}

/* -------------------------------------------------------------------------- */
/* 19. OPTIONAL: Nicer scrollbar (Chrome/Edge)                                 */
/* -------------------------------------------------------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); }
::-webkit-scrollbar-thumb {
  background: rgba(59,130,246,0.35);
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.06);
}
::-webkit-scrollbar-thumb:hover { background: rgba(59,130,246,0.55); }

/* -------------------------------------------------------------------------- */
/* 20. TABLES + PROGRESS (DASHBOARD & FUTURES PAGES)                           */
/* -------------------------------------------------------------------------- */
.table{
  color: inherit !important;
  background: inherit !important;
  --bs-table-bg: inherit;
}
.table thead th{
  color: inherit !important;
  border-color: var(--oz-border) !important;
}
.table td, .table th{
  border-color: var(--oz-border) !important;
}
.table-hover tbody tr:hover{
  background: rgba(255,255,255,0.04) !important;
}

/* Progress bars visibles sur fond dark */
.progress{
  background: rgba(255,255,255,0.08) !important;
}
.progress-bar{
  background-color: var(--oz-primary) !important;
}

/* -------------------------------------------------------------------------- */
/* 21. FOOTER TEXT CLASS (OPTIONNEL SUR PAGES)                                 */
/* -------------------------------------------------------------------------- */
.oz-footer{
  font-size: 13px;
  color: rgba(148,163,184,0.95) !important;
}

  .oz-wrap { padding: 26px 0 34px; }
  .oz-card {
    background: var(--oz-card-bg, #111827);
    border: 1px solid var(--oz-border, rgba(255,255,255,.08));
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(0,0,0,.35);
    color: var(--oz-ink, #f8fafc);
  }
  .oz-muted { color: var(--oz-muted, #94a3b8); }
  .oz-label { color: var(--oz-ink, #f8fafc); font-weight: 600; font-size: .92rem; }
  .oz-input:focus, .oz-select:focus {
    box-shadow: 0 0 0 .2rem rgba(59,130,246,.25) !important;
    border-color: rgba(59,130,246,.55) !important;
  }
  .oz-help { color: var(--oz-muted, #94a3b8); font-size: .86rem; }
  .oz-actions { display:flex; gap:10px; flex-wrap: wrap; }
  .oz-badge {
    display:inline-flex; align-items:center; gap:8px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
    border-radius: 999px;
    padding: 6px 10px;
    color: var(--oz-muted, #94a3b8);
    font-size: .85rem;
  }
  code.oz-code { color: rgba(255,255,255,.7); }
 .oz-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.78);
    font-size: .85rem;
    white-space: nowrap;
  }
  .oz-badge.ok { border-color: rgba(16,185,129,.35); background: rgba(16,185,129,.10); }
  .oz-badge.warn { border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.10); }
  .oz-badge.off { border-color: rgba(148,163,184,.25); background: rgba(148,163,184,.10); color: rgba(255,255,255,.62); }

  .oz-actions { display:flex; gap:10px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .oz-top { display:flex; gap:12px; flex-wrap: wrap; align-items:center; justify-content: space-between; }
  .oz-top-left { min-width: 240px; }
  .oz-top-right { display:flex; gap:10px; flex-wrap: wrap; align-items:center; }

  .oz-domain { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: .92rem; color: rgba(255,255,255,.85); }
  .oz-mini { font-size: .9rem; }
  .oz-empty {
    text-align: center;
    padding: 26px 12px;
  }
  .oz-empty i { font-size: 34px; opacity: .85; }