/* ============================================================
   FACTURLY — Design System v2  ·  « fintech épuré »
   Couche d'identité partagée (landing + app).
   Charger APRÈS Bootstrap et AVANT style.css / landing.css.
   ============================================================ */

:root {
    /* ---- Marque ---- */
    --brand-50:  #F0FDF4;
    --brand-100: #DCFCE7;
    --brand-200: #BBF7D0;
    --brand-300: #86EFAC;
    --brand-400: #4ADE80;
    --brand-500: #16A34A;   /* accent vif */
    --brand-600: #15803D;   /* couleur d'action principale (vert profond) */
    --brand-700: #166534;
    --brand-800: #14532D;
    --brand:     #15803D;
    --brand-rgb: 21, 128, 61;

    /* ---- Encre & neutres (teinte bleutée froide) ---- */
    --ink:        #0B1220;   /* texte fort, sidebar, footer */
    --ink-700:    #1E2636;
    --ink-600:    #3A4256;
    --text:       #2B3242;   /* corps */
    --text-soft:  #5B6472;   /* secondaire */
    --text-muted: #8A93A3;   /* tertiaire / labels */

    /* ---- Surfaces ---- */
    --bg:         #FBFBFD;   /* fond de page */
    --surface:    #FFFFFF;   /* cartes */
    --surface-2:  #F5F6F9;   /* zones douces */
    --surface-3:  #EEF0F4;

    /* ---- Bordures ---- */
    --border:        #E8EBF0;   /* hairline */
    --border-strong: #D8DCE4;

    /* ---- Sémantiques ---- */
    --success:    #16A34A;  --success-bg: #E7F6EC;
    --warning:    #B9740A;  --warning-bg: #FBF1E0;
    --danger:     #E02424;  --danger-bg:  #FCE9E9;
    --info:       var(--brand-600);

    /* ---- Rayons ---- */
    --r-sm: 8px;
    --r:    11px;
    --r-lg: 16px;
    --r-xl: 22px;
    --r-pill: 999px;

    /* ---- Ombres (très douces, étagées) ---- */
    --sh-xs: 0 1px 2px rgba(11,18,32,.05);
    --sh-sm: 0 1px 3px rgba(11,18,32,.06), 0 1px 2px rgba(11,18,32,.04);
    --sh:    0 4px 14px rgba(11,18,32,.07);
    --sh-md: 0 8px 28px rgba(11,18,32,.09);
    --sh-lg: 0 20px 48px rgba(11,18,32,.14);
    --sh-brand: 0 10px 30px rgba(var(--brand-rgb), .22);

    /* ---- Bootstrap overrides (variables natives 5.3) ---- */
    --bs-primary: var(--brand-600);
    --bs-primary-rgb: var(--brand-rgb);
    --bs-body-color: var(--text);
    --bs-body-bg: var(--bg);
    --bs-border-color: var(--border);
    --bs-link-color: var(--brand-700);
    --bs-link-hover-color: var(--brand-800);
    --bs-border-radius: var(--r);
    --bs-font-sans-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---- Base ---- */
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
    font-family: var(--bs-font-sans-serif);
    color: var(--text);
    background: var(--bg);
    font-feature-settings: "cv05" 1, "ss01" 1;
    letter-spacing: -0.011em;
}

/* Titres : Inter serré pour le côté « produit » */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--ink);
    font-weight: 700;
    letter-spacing: -0.022em;
}

/* Chiffres / montants alignés */
.tnum, .table td, .table th, .lp-plan-price, .stat-value, .invoice-wrap { font-variant-numeric: tabular-nums; }

/* ---- Boutons : sobres, pas de glow ---- */
.btn {
    --bs-btn-font-weight: 600;
    border-radius: var(--r-sm);
    padding: .55rem 1.05rem;
    font-size: .9rem;
    letter-spacing: -0.006em;
    transition: background-color .15s, border-color .15s, box-shadow .15s, transform .04s;
}
.btn:active { transform: translateY(.5px); }
.btn-lg { padding: .8rem 1.5rem; font-size: 1rem; border-radius: var(--r); }
.btn-sm { padding: .4rem .8rem; font-size: .82rem; }

.btn-primary {
    --bs-btn-bg: var(--brand-600);
    --bs-btn-border-color: var(--brand-600);
    --bs-btn-hover-bg: var(--brand-700);
    --bs-btn-hover-border-color: var(--brand-700);
    --bs-btn-active-bg: var(--brand-800);
    --bs-btn-active-border-color: var(--brand-800);
    --bs-btn-disabled-bg: var(--brand-400);
    --bs-btn-disabled-border-color: var(--brand-400);
    box-shadow: var(--sh-xs);
}
.btn-outline-primary {
    --bs-btn-color: var(--brand-700);
    --bs-btn-border-color: var(--border-strong);
    --bs-btn-hover-bg: var(--brand-600);
    --bs-btn-hover-border-color: var(--brand-600);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--brand-700);
    --bs-btn-active-border-color: var(--brand-700);
}
.btn-light {
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--border);
    --bs-btn-hover-bg: var(--surface-2);
    --bs-btn-hover-border-color: var(--border-strong);
    --bs-btn-color: var(--ink-700);
    box-shadow: var(--sh-xs);
}

/* ---- Cartes ---- */
.card {
    --bs-card-border-color: var(--border);
    --bs-card-border-radius: var(--r-lg);
    --bs-card-bg: var(--surface);
    box-shadow: var(--sh-sm);
}

/* ---- Formulaires ---- */
.form-control, .form-select {
    border-color: var(--border-strong);
    border-radius: var(--r-sm);
    padding: .55rem .8rem;
    font-size: .92rem;
    color: var(--text);
    background-color: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.form-control:focus, .form-select:focus {
    border-color: var(--brand-400);
    box-shadow: 0 0 0 3.5px rgba(var(--brand-rgb), .15);
}
.form-control::placeholder { color: var(--text-muted); }
.form-label { font-size: .82rem; font-weight: 600; color: var(--text-soft); margin-bottom: .35rem; }
.input-group-text { background: var(--surface-2); border-color: var(--border-strong); color: var(--text-soft); }

/* ---- Badges (pills discrets) ---- */
.badge { font-weight: 600; letter-spacing: -0.005em; border-radius: var(--r-pill); padding: .34em .7em; }
.badge-soft { display:inline-flex; align-items:center; gap:.32rem; border-radius: var(--r-pill);
    font-size: .74rem; font-weight: 600; padding: .28rem .66rem; line-height: 1; }
.badge-soft.is-success { background: var(--success-bg); color: var(--success); }
.badge-soft.is-warning { background: var(--warning-bg); color: var(--warning); }
.badge-soft.is-danger  { background: var(--danger-bg);  color: var(--danger); }
.badge-soft.is-brand   { background: var(--brand-50);   color: var(--brand-700); }
.badge-soft.is-muted   { background: var(--surface-3);  color: var(--text-soft); }

/* ---- Tables ---- */
.table {
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--border);
    margin-bottom: 0;
}
.table > :not(caption) > * > * { padding: .85rem 1rem; }
.table thead th {
    font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px;
    color: var(--text-muted); border-bottom: 1px solid var(--border); background: transparent;
}
.table-hover > tbody > tr { transition: background-color .12s; }
.table-hover > tbody > tr:hover > * { background: var(--brand-50); }

/* ---- Alertes ---- */
.alert { border: 1px solid transparent; border-radius: var(--r); font-size: .9rem; }
.alert-warning { background: var(--warning-bg); border-color: #F2DDB4; color: #8A5708; }
.alert-success { background: var(--success-bg); border-color: #BFE9D6; color: #0A7A54; }
.alert-danger  { background: var(--danger-bg);  border-color: #F4C7C7; color: #B01919; }

/* ---- Liens & focus accessibles ---- */
a { text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }

/* ---- Scrollbar discrète ---- */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 3px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover { background: #C2C7D2; }

/* ---- Utilitaires ---- */
.text-soft { color: var(--text-soft) !important; }
.text-ink  { color: var(--ink) !important; }
.hairline  { border-color: var(--border) !important; }
.shadow-soft { box-shadow: var(--sh) !important; }