/* ============================================================
   Thème Simple ERP — couche de personnalisation au-dessus de Bootstrap
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --brand: #4f46e5;
    --brand-2: #7c3aed;
    --brand-rgb: 79, 70, 229;
    --accent: #f59e0b;
    --ink: #14152b;
    --paper: #faf9f7;

    --bs-primary: #4f46e5;
    --bs-primary-rgb: 79, 70, 229;
    --bs-link-color: #4f46e5;
    --bs-link-color-rgb: 79, 70, 229;
    --bs-link-hover-color: #3f37c9;
    --bs-body-color: #2b2c44;
    --bs-body-bg: #faf9f7;
    --bs-border-color: #ece9e3;
    --bs-border-radius: .85rem;
    --bs-border-radius-lg: 1.1rem;
    --bs-body-font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.logo {
    width: 42px!important;
}

body {
    font-family: var(--bs-body-font-family);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .navbar-brand, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    letter-spacing: -.02em;
}

/* ---------- Couleurs de marque sur les composants ---------- */
.btn-primary {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: #3f37c9;
    --bs-btn-hover-border-color: #3f37c9;
    --bs-btn-active-bg: #372fb5;
    --bs-btn-active-border-color: #372fb5;
    box-shadow: 0 8px 20px -8px rgba(var(--brand-rgb), .6);
}
.btn-outline-primary { --bs-btn-color: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand); }
.btn { --bs-btn-padding-x: 1.15rem; --bs-btn-padding-y: .6rem; --bs-btn-font-weight: 600; border-radius: .7rem; transition: transform .15s ease, box-shadow .15s ease; }
.btn-lg { --bs-btn-padding-x: 1.5rem; --bs-btn-padding-y: .8rem; border-radius: .8rem; }
.btn-primary:hover, .btn-dark:hover { transform: translateY(-2px); }
.text-primary { color: var(--brand) !important; }
.bg-primary-subtle { background-color: #ede9fe !important; }
.text-primary-emphasis { color: #4338ca !important; }
a { text-decoration: none; }

/* ---------- Navbar ---------- */
.navbar {
    background: rgba(250, 249, 247, .82) !important;
    backdrop-filter: saturate(1.5) blur(10px);
    border-bottom: 1px solid var(--bs-border-color) !important;
}
.navbar-brand { font-weight: 800; }
.navbar-brand .mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 9px;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    color: #fff; font-weight: 800; margin-right: .5rem;
    box-shadow: 0 6px 14px -6px rgba(var(--brand-rgb), .7);
}
.navbar .nav-link { font-weight: 500; color: #4a4c63; border-radius: .6rem; padding: .45rem .85rem; }
.navbar .nav-link:hover { color: var(--ink); background: rgba(20, 21, 43, .05); }
.navbar .nav-link.active { color: var(--brand); font-weight: 600; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: 6rem 0 4.5rem; }
.hero::before {
    content: ''; position: absolute; inset: -30% -10% auto -10%; height: 720px; z-index: 0;
    background:
        radial-gradient(720px 340px at 80% 4%, rgba(124, 58, 237, .20), transparent 60%),
        radial-gradient(620px 320px at 8% -4%, rgba(var(--brand-rgb), .16), transparent 62%),
        radial-gradient(500px 260px at 60% 30%, rgba(245, 158, 11, .10), transparent 60%);
    pointer-events: none;
}
.hero > .container-fluid { position: relative; z-index: 1; }
.hero h1 { font-weight: 800; }

/* badge "eyebrow" */
.badge.rounded-pill.bg-primary-subtle {
    border: 1px solid #ddd6fe; padding: .5rem .9rem; font-weight: 600; font-size: .8rem;
}

/* ---------- Mockup applicatif (visuel hero) ---------- */
.app-mock {
    border-radius: 1.1rem; background: #fff; border: 1px solid var(--bs-border-color);
    box-shadow: 0 40px 80px -30px rgba(20, 21, 43, .35); overflow: hidden;
    transform: rotate(.6deg);
}
.app-mock .bar { display: flex; gap: 6px; padding: 12px 14px; background: #f4f3ef; border-bottom: 1px solid var(--bs-border-color); }
.app-mock .bar span { width: 11px; height: 11px; border-radius: 50%; background: #d9d6cf; }
.app-mock .bar span:nth-child(1) { background: #ff5f57; }
.app-mock .bar span:nth-child(2) { background: #febc2e; }
.app-mock .bar span:nth-child(3) { background: #28c840; }
.app-mock .mock-app { display: flex; min-height: 320px; }
.mock-side { width: 168px; flex-shrink: 0; background: #fbfbfa; border-right: 1px solid var(--bs-border-color); padding: 14px 10px; }
.mock-brand { display: flex; align-items: center; font-weight: 800; font-size: .82rem; color: var(--brand); margin-bottom: 6px; }
.mock-brand .mark { width: 20px; height: 20px; border-radius: 6px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .62rem; margin-right: 6px; }
.mock-search { background: #fff; border: 1px solid var(--bs-border-color); border-radius: 7px; font-size: .62rem; color: #b3b1bf; padding: 6px 9px; margin: 8px 0 12px; }
.mock-navlabel { font-size: .55rem; text-transform: uppercase; letter-spacing: .08em; color: #b3b1bf; margin: 12px 6px 5px; font-weight: 700; }
.mock-nav { display: block; font-size: .74rem; color: #555; padding: 6px 8px; border-radius: 7px; margin-bottom: 1px; }
.mock-nav.active { background: #eef0fe; color: var(--brand); font-weight: 600; }
.mock-main { flex: 1; padding: 16px; background: #fff; min-width: 0; }
.mock-title { font-weight: 700; font-size: 1rem; margin-bottom: 12px; }
.mock-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.mock-kpi { border: 1px solid var(--bs-border-color); border-radius: 10px; padding: 9px 12px; }
.mock-kpi .l { font-size: .6rem; color: #9a98a8; display: block; }
.mock-kpi .v { font-weight: 800; font-size: 1.05rem; line-height: 1.2; }
.mock-chartcard { border: 1px solid var(--bs-border-color); border-radius: 10px; padding: 11px 12px; margin-top: 10px; }
.mock-tabs { display: flex; gap: 6px; margin-bottom: 9px; }
.mock-tabs span { font-size: .62rem; padding: 3px 9px; border-radius: 6px; color: #8a8898; background: #f3f2ef; }
.mock-tabs span.on { background: var(--brand); color: #fff; }
.app-mock .bars { display: flex; align-items: flex-end; gap: 7px; height: 70px; }
.app-mock .bars i { display: block; flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--brand), #a5a0f5); }

#formBeta {
    display: none;
}

@media (max-width: 575.98px) { .mock-side { display: none; } }

/* ---------- Sections & cartes ---------- */
section { scroll-margin-top: 80px; }
.kicker { color: var(--brand); text-transform: uppercase; font-weight: 700; letter-spacing: .08em; font-size: .78rem; }
.card { border-radius: var(--bs-border-radius-lg); transition: transform .2s ease, box-shadow .2s ease; }
.card.shadow-sm { box-shadow: 0 2px 4px rgba(20,21,43,.04), 0 18px 40px -24px rgba(20,21,43,.25) !important; }
.card.shadow-sm:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(20,21,43,.10), 0 30px 60px -30px rgba(20,21,43,.4) !important; }

.feature-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 3.1rem; height: 3.1rem; border-radius: .95rem;
    background: linear-gradient(135deg, rgba(var(--brand-rgb), .14), rgba(124,58,237,.14));
    color: var(--brand); font-size: 1.45rem;
}

/* ---------- Bandeau CTA & sections sombres ---------- */
.cta-band {
    background: radial-gradient(900px 400px at 80% -20%, rgba(124,58,237,.5), transparent 60%), linear-gradient(135deg, #1c1d33, #14152b);
    color: #fff; border-radius: 1.5rem; box-shadow: 0 40px 80px -40px rgba(20,21,43,.6);
}

/* ---------- Strip de confiance ---------- */
.trust-strip { border-top: 1px solid var(--bs-border-color); border-bottom: 1px solid var(--bs-border-color); background: #fff; }
.trust-strip .item { color: #6b6c82; font-weight: 600; font-size: .95rem; }
.trust-strip .item i { color: var(--brand); margin-right: .4rem; }

/* ---------- Formulaires ---------- */
.form-control, .form-select { border-radius: .65rem; padding: .65rem .85rem; border-color: #e4e1da; }
.form-control:focus, .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 .25rem rgba(var(--brand-rgb), .15); }
.form-label { font-weight: 600; }

/* ---------- Tables admin ---------- */
.table > :not(caption) > * > * { padding: .85rem 1rem; }
.nav-pills .nav-link.active { background: var(--brand); }
.nav-pills .nav-link { color: #4a4c63; font-weight: 600; }

/* ---------- Footer ---------- */
footer.site { background: #fff !important; }
footer.site a { color: #6b6c82; }
footer.site a:hover { color: var(--brand); text-decoration: none; }

@media (max-width: 991.98px) {
    .app-mock { transform: none; margin-top: 2.5rem; }
    .hero { padding: 4rem 0 3rem; }
}

/* Carte cliquable (espace compte) */
.card-hover { transition: transform .15s ease, box-shadow .15s ease; }
.card-hover:hover { transform: translateY(-3px); box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.08) !important; }