/* =====================================================================
   Fred.net - Feuille de style globale
   Theme: bleu / blanc, moderne, professionnel
   ===================================================================== */

:root {
    --fn-blue-900: #06265c;
    --fn-blue-800: #0b3d91;
    --fn-blue-700: #1249ad;
    --fn-blue-600: #1a5cc8;
    --fn-blue-500: #2f74e0;
    --fn-blue-100: #e8f0fd;
    --fn-blue-50: #f4f8fd;
    --fn-white: #ffffff;
    --fn-gray-900: #1c2b4a;
    --fn-gray-600: #5a6b8c;
    --fn-gray-400: #97a3bd;
    --fn-gray-200: #e3e9f5;
    --fn-gray-100: #f4f7fc;
    --fn-success: #16a34a;
    --fn-warning: #d97706;
    --fn-danger: #dc2626;
    --fn-radius: 12px;
    --fn-shadow: 0 4px 18px rgba(11, 61, 145, 0.08);
    --fn-shadow-lg: 0 10px 34px rgba(11, 61, 145, 0.14);
    --fn-sidebar-width: 268px;
    --fn-sidebar-collapsed: 84px;
    --fn-topbar-height: 68px;
}

* { box-sizing: border-box; }

body {
    font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
    background: var(--fn-gray-100);
    color: var(--fn-gray-900);
    margin: 0;
}

a { text-decoration: none; }

/* --- Marque -------------------------------------------------------- */
.fn-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 1.35rem;
    color: var(--fn-blue-800);
    letter-spacing: .3px;
}
.fn-brand .fn-logo {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--fn-blue-600), var(--fn-blue-900));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 900;
    font-size: 1.1rem;
    box-shadow: var(--fn-shadow);
}
.fn-brand small {
    display: block;
    font-size: .65rem;
    font-weight: 500;
    color: var(--fn-gray-600);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* --- Boutons --------------------------------------------------------- */
.btn-fn-primary {
    background: var(--fn-blue-800);
    border-color: var(--fn-blue-800);
    color: #fff;
}
.btn-fn-primary:hover, .btn-fn-primary:focus {
    background: var(--fn-blue-900);
    border-color: var(--fn-blue-900);
    color: #fff;
}
.btn-fn-outline {
    border: 1.5px solid var(--fn-blue-800);
    color: var(--fn-blue-800);
    background: transparent;
}
.btn-fn-outline:hover {
    background: var(--fn-blue-100);
    color: var(--fn-blue-900);
}

/* --- Cartes / conteneurs ---------------------------------------------- */
.fn-card {
    background: var(--fn-white);
    border: 1px solid var(--fn-gray-200);
    border-radius: var(--fn-radius);
    box-shadow: var(--fn-shadow);
}
.fn-card-body { padding: 1.5rem; }

/* --- Pages publiques (accueil, login, register) ------------------------ */
.fn-public-nav {
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--fn-gray-200);
    position: sticky;
    top: 0;
    z-index: 100;
}

.fn-hero {
    background: radial-gradient(1200px 500px at 80% -10%, rgba(47,116,224,.18), transparent),
                linear-gradient(180deg, var(--fn-blue-900) 0%, var(--fn-blue-800) 55%, var(--fn-blue-700) 100%);
    color: #fff;
    padding: 100px 0 130px;
    position: relative;
    overflow: hidden;
}
.fn-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.5) 0, transparent 60%),
                       radial-gradient(2px 2px at 70% 60%, rgba(255,255,255,.35) 0, transparent 60%),
                       radial-gradient(1.5px 1.5px at 40% 80%, rgba(255,255,255,.4) 0, transparent 60%),
                       radial-gradient(1.5px 1.5px at 90% 20%, rgba(255,255,255,.3) 0, transparent 60%);
    pointer-events: none;
}
.fn-hero h1 { font-weight: 800; letter-spacing: -.5px; }
.fn-hero .lead { color: rgba(255,255,255,.85); }

.fn-badge-soft {
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    border-radius: 999px;
    padding: .35rem .9rem;
    font-size: .8rem;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.fn-feature-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--fn-blue-100);
    color: var(--fn-blue-800);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

.fn-section-title {
    color: var(--fn-blue-900);
    font-weight: 800;
}

footer.fn-footer {
    background: var(--fn-blue-900);
    color: rgba(255,255,255,.75);
}
footer.fn-footer a { color: rgba(255,255,255,.85); }

/* --- Auth pages (login / register / forgot) ---------------------------- */
.fn-auth-wrap {
    min-height: 100vh;
    display: flex;
}
.fn-auth-side {
    background: linear-gradient(160deg, var(--fn-blue-900), var(--fn-blue-700));
    color: #fff;
    position: relative;
    overflow: hidden;
}
.fn-auth-side::after {
    content: "";
    position: absolute; inset: 0;
    background-image: radial-gradient(2px 2px at 25% 25%, rgba(255,255,255,.5) 0, transparent 60%),
                       radial-gradient(2px 2px at 75% 65%, rgba(255,255,255,.35) 0, transparent 60%),
                       radial-gradient(1.5px 1.5px at 50% 85%, rgba(255,255,255,.4) 0, transparent 60%);
}
.fn-auth-form-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
.fn-auth-card { width: 100%; max-width: 440px; }

.form-control:focus, .form-select:focus {
    border-color: var(--fn-blue-600);
    box-shadow: 0 0 0 .2rem rgba(26, 92, 200, .15);
}

.fn-password-strength {
    height: 5px;
    border-radius: 3px;
    background: var(--fn-gray-200);
    overflow: hidden;
    margin-top: .4rem;
}
.fn-password-strength > div { height: 100%; width: 0%; transition: width .25s ease, background .25s ease; }

/* --- Alerts / toasts ---------------------------------------------------- */
.fn-toast-stack {
    position: fixed;
    top: 20px; right: 20px;
    z-index: 2000;
    display: flex; flex-direction: column; gap: .6rem;
}

/* --- Tables -------------------------------------------------------------- */
.table-fn thead th {
    background: var(--fn-blue-50);
    color: var(--fn-blue-900);
    font-weight: 700;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    border-bottom: 2px solid var(--fn-gray-200);
}
.table-fn td { vertical-align: middle; }
.table-fn tbody tr:hover { background: var(--fn-blue-50); }

.fn-badge-status {
    padding: .3rem .65rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
    text-transform: capitalize;
}
.fn-badge-active, .fn-badge-completed, .fn-badge-paid, .fn-badge-resolved { background: #e8f8ee; color: var(--fn-success); }
.fn-badge-suspended, .fn-badge-pending, .fn-badge-unpaid, .fn-badge-open { background: #fff4e5; color: var(--fn-warning); }
.fn-badge-terminated, .fn-badge-failed, .fn-badge-overdue, .fn-badge-faulty { background: #fdecec; color: var(--fn-danger); }
.fn-badge-cancelled, .fn-badge-expired, .fn-badge-closed, .fn-badge-retired { background: var(--fn-gray-200); color: var(--fn-gray-600); }

/* --- Utilitaires ---------------------------------------------------------- */
.text-fn-blue { color: var(--fn-blue-800) !important; }
.bg-fn-blue { background: var(--fn-blue-800) !important; }
.bg-fn-blue-50 { background: var(--fn-blue-50) !important; }
.fn-empty-state { padding: 3rem 1rem; text-align: center; color: var(--fn-gray-400); }