/* =====================================================================
   GESTION LOCATIVE — AZANWOGBE CONSULTANTS
   Design system autonome : aucune compilation, aucun framework.

   Refonte novembre 2026 : langage visuel de la maquette « tableau de bord »
   (cartes arrondies, barre latérale en dégradé, barre supérieure flottante,
   typographie Plus Jakarta Sans) appliqué aux classes existantes. Les douze
   écrans en héritent sans modification de leurs gabarits.

   Couleurs de marque inchangées, vérifiées sur le logo :
     vert #0A3D2C · jaune #FFDE59
   ===================================================================== */

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

:root {
    /* Vert AZANWOGBE — teintes dérivées du logo (#0A3D2C) */
    --v-950: #06291d;
    --v-900: #0a3d2c;
    --v-800: #0b4f37;
    --v-700: #146651;
    --v-600: #1a7d63;
    --v-500: #229b7b;
    --v-100: #d8ede6;
    --v-50:  #eef6f2;

    /* Jaune du logo — accent, jamais en fond de texte clair */
    --or-500: #ffde59;
    --or-600: #e8c534;
    --or-700: #8a6d00;
    --or-50:  #fff9e3;

    /* Neutres — légèrement verdis, pour s'accorder à la marque */
    --s-900: #18221e;
    --s-800: #2c3833;
    --s-700: #46544e;
    --s-600: #64746e;
    --s-400: #9aa8a2;
    --s-300: #d5dbd6;
    --s-200: #e6e9e4;
    --s-100: #f1f4f0;
    --s-50:  #f5f6f2;
    --blanc: #ffffff;

    /* Sémantique — chaque couleur de texte tient le contraste AA sur son fond */
    --danger:     #dc2626;
    --danger-txt: #b91c1c;
    --danger-bg:  #fef2f2;
    --danger-bd:  #fecaca;
    --warn:       #b45309;
    --warn-bg:    #fffbeb;
    --warn-bd:    #fde68a;
    --ok:         #047857;
    --ok-bg:      #ecfdf5;
    --ok-bd:      #a7f3d0;
    --info:       #1d4ed8;
    --info-bg:    #eff6ff;
    --info-bd:    #bfdbfe;

    --r:    10px;
    --r-lg: 16px;
    --ombre:    0 2px 10px rgba(16, 24, 20, .035);
    --ombre-lg: 0 18px 44px rgba(16, 24, 20, .14);
    --sidebar: 270px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--s-900);
    background: var(--s-50);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--v-800); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.3; }
h1 { font-size: 23px; font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: 16.5px; }
h3 { font-size: 15px; }

/* ---------- Structure ---------- */
.app { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar);
    background: linear-gradient(180deg, var(--v-900) 0%, var(--v-950) 100%);
    color: rgba(255, 255, 255, .78);
    padding: 0;
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    overflow-y: auto;
    box-shadow: 4px 0 24px rgba(0, 0, 0, .06);
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .15); border-radius: 4px; }

.sidebar .marque {
    display: block;
    padding: 24px 24px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    margin-bottom: 6px;
}
.sidebar .sigle {
    width: 40px; height: 40px; flex-shrink: 0;
    border: 1px solid rgba(255, 222, 89, .3); border-radius: 12px;
    background: rgba(255, 222, 89, .12);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 15px; color: var(--or-500); letter-spacing: -.5px;
}
.sidebar .marque img { width: 100%; max-width: 196px; display: block; margin: 0 auto; }
.sidebar .marque .sous {
    font-size: 10px; color: rgba(255, 255, 255, .55); letter-spacing: .16em;
    text-transform: uppercase; margin-top: 11px; text-align: center; font-weight: 600;
}
.sidebar .nom { font-size: 13px; font-weight: 700; color: #fff; line-height: 1.35; }
.sidebar .sous { font-size: 11px; color: rgba(255, 255, 255, .55); }

.nav { padding: 6px 14px 14px; }
.nav-groupe {
    padding: 18px 12px 7px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: rgba(255, 255, 255, .42);
}
.nav a {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 13px; margin-bottom: 3px;
    color: rgba(255, 255, 255, .78); font-size: 13.5px; font-weight: 500;
    text-decoration: none;
    border-radius: var(--r);
    border-left: 3px solid transparent;
    transition: background .2s, color .2s, transform .2s;
}
.nav a:hover {
    background: rgba(255, 255, 255, .08); color: #fff;
    text-decoration: none; transform: translateX(3px);
}
.nav a.actif {
    background: rgba(255, 222, 89, .14); color: #fff;
    border-left-color: var(--or-500); font-weight: 600;
}
.nav a.actif:hover { transform: none; }
.nav a .ico {
    width: 19px; height: 19px; flex-shrink: 0;
    opacity: .7; stroke: currentColor; fill: none;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
    transition: color .2s, opacity .2s;
}
.nav a:hover .ico { opacity: 1; color: var(--or-500); }
.nav a.actif .ico { opacity: 1; color: var(--or-500); }

.sidebar .pied {
    margin-top: auto; padding: 16px 18px 18px;
    background: rgba(0, 0, 0, .2);
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: 12px;
}
.sidebar .pied .compte {
    display: flex; align-items: center; gap: 12px;
    padding: 6px 6px; margin-bottom: 12px;
    border-radius: var(--r); color: inherit; text-decoration: none;
    transition: background .2s;
}
.sidebar .pied .compte:hover { background: rgba(255, 255, 255, .07); text-decoration: none; }
.sidebar .pied .avatar {
    width: 40px; height: 40px; flex-shrink: 0;
    border-radius: 50%; background: var(--or-500); color: var(--v-900);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800;
}
.sidebar .pied .util {
    color: #fff; font-weight: 700; font-size: 13.5px; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar .pied .role { color: rgba(255, 255, 255, .6); font-size: 11.5px; text-transform: capitalize; }

/* Bouton de déconnexion : discret, il ne rougit qu'au survol */
.btn-deco {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 9px 12px;
    font-size: 13px; font-weight: 500; font-family: inherit;
    color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--r); cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
}
.btn-deco:hover {
    background: rgba(220, 38, 38, .2);
    border-color: rgba(220, 38, 38, .4);
    color: #fca5a5;
}
.btn-deco svg {
    width: 16px; height: 16px; stroke: currentColor; fill: none;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.principal { flex: 1; margin-left: var(--sidebar); min-width: 0; }

/* Barre supérieure flottante */
.entete {
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--s-200);
    padding: 16px 32px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    position: sticky; top: 0; z-index: 30;
}
.entete .fil {
    font-size: 12.5px; font-weight: 500; color: var(--s-600); margin-bottom: 1px;
}
.entete .fil::first-letter { text-transform: uppercase; }
.contenu { padding: 28px 32px 64px; max-width: 1480px; margin: 0 auto; }

/* ---------- Cartes ---------- */
.carte {
    background: var(--blanc);
    border: 1px solid var(--s-200);
    border-radius: var(--r-lg);
    box-shadow: var(--ombre);
    overflow: hidden;
}
.carte-t {
    padding: 18px 22px;
    border-bottom: 1px solid var(--s-200);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-wrap: wrap;
}
/* Lien d'en-tête de carte (« Tous les baux → ») traité en pastille */
.carte-t > a {
    font-size: 13px; font-weight: 600; color: var(--v-800);
    padding: 5px 10px; border-radius: 8px;
    transition: background .2s;
}
.carte-t > a:hover { background: rgba(11, 79, 55, .08); text-decoration: none; }
.carte-c { padding: 22px; }
.carte-c.serre { padding: 0; }

/* ---------- Statistiques ---------- */
/* Les blocs de statistiques comptent quatre cartes (tableau de bord, fiche
   bail) : 2 × 2 ou 4 × 1, jamais 3 + 1 avec une carte orpheline. */
.stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px; margin-bottom: 26px;
}
@media (min-width: 1300px) {
    .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.stat {
    background: var(--blanc);
    border: 1px solid var(--s-200);
    border-radius: var(--r-lg);
    padding: 20px 21px;
    box-shadow: var(--ombre);
    position: relative;
    container-type: inline-size;
    transition: transform .2s, box-shadow .2s;
}
.stat:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(16, 24, 20, .05); }
.stat .lab {
    font-size: 13px; font-weight: 600; color: var(--s-600);
    display: flex; align-items: center; gap: 6px; width: 100%;
}
/* nowrap : sans lui, l'espace des milliers autorise un retour à la ligne
   et « 1 130 000 » se coupe en deux sur une carte étroite. */
/* La taille suit la largeur de la carte (unité cqi), pas celle de l'écran :
   un montant à huit chiffres tient toujours, même sur une carte étroite.
   La première déclaration sert de repli aux navigateurs anciens. */
.stat .val {
    display: block; width: 100%;
    font-size: 25px;
    font-size: clamp(19px, 13cqi, 27px);
    font-weight: 800; letter-spacing: -.02em; line-height: 1.2;
    margin-top: 6px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.stat .val small { font-size: 14px; font-weight: 600; color: var(--s-600); letter-spacing: 0; }
.stat .det { display: block; width: 100%; font-size: 12.5px; color: var(--s-600); margin-top: 5px; }
.stat.accent {
    border-left: 4px solid var(--v-800);
    background: linear-gradient(135deg, #fff 62%, var(--v-50) 100%);
}

/* CORRECTIF : `.alerte` est aussi la classe des bandeaux d'alerte, qui sont
   en `display: flex`. Une carte « stat alerte » en héritait, et son libellé,
   son montant et son détail s'affichaient côte à côte au lieu de s'empiler
   (cartes « Impayés » du tableau de bord et « Solde dû » de la fiche bail).
   Cette règle, plus spécifique, rétablit la carte et neutralise le bandeau. */
.stat.alerte {
    display: block;
    margin-bottom: 0;
    padding: 20px 21px;
    font-size: inherit;
    color: inherit;
    border: 1px solid var(--s-200);
    border-left: 4px solid var(--danger);
    border-radius: var(--r-lg);
    background: linear-gradient(135deg, #fff 62%, var(--danger-bg) 100%);
}
.stat.alerte .val { color: var(--danger); }

/* En-tête de carte statistique avec pastille d'icône */
.kpi-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kpi-ico {
    width: 42px; height: 42px; flex-shrink: 0;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
}
.kpi-ico svg {
    width: 21px; height: 21px; stroke: currentColor; fill: none;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.kpi-ico.petit { width: 36px; height: 36px; border-radius: 10px; }
.kpi-ico.petit svg { width: 18px; height: 18px; }
.ico-vert  { background: var(--ok-bg);     color: var(--ok); }
.ico-rouge { background: var(--danger-bg); color: var(--danger-txt); }
.ico-bleu  { background: var(--info-bg);   color: var(--info); }
.ico-or    { background: #fef9c3;          color: #a16207; }

/* Jauge fine (taux d'occupation) */
.jauge { height: 6px; border-radius: 10px; background: var(--s-200); margin-top: 11px; overflow: hidden; }
.jauge > span { display: block; height: 100%; border-radius: inherit; background: var(--v-800); }

/* ---------- Listes du tableau de bord ---------- */
/* Deux listes côte à côte seulement si chacune dispose d'au moins 440 px :
   en dessous, les lignes se replient sur trois niveaux et deviennent
   illisibles. Sur un portable de 1100 px, elles s'empilent donc. */
.panneaux {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
    gap: 20px;
}
.titre-groupe { display: flex; align-items: center; gap: 11px; }
.ligne {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--s-200);
    transition: background .15s;
}
.ligne:last-child { border-bottom: 0; }
.ligne:hover { background: #fafbf9; }
.ligne .infos { flex: 1; min-width: 0; }
.ligne .nom {
    display: block;
    font-weight: 700; font-size: 14px; color: var(--s-900);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ligne a.nom { color: var(--v-800); }
.ligne .meta {
    font-size: 12.5px; color: var(--s-600);
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px;
    margin-top: 1px;
}
.ligne .meta strong { color: var(--s-800); font-weight: 600; }

.avatar-l {
    width: 38px; height: 38px; flex-shrink: 0;
    border-radius: 10px;
    background: var(--v-50); color: var(--v-800);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 12.5px; letter-spacing: .02em;
}
.avatar-l.retard { background: var(--danger-bg); color: var(--danger-txt); }

.montant {
    font-weight: 800; font-size: 15px; white-space: nowrap;
    font-variant-numeric: tabular-nums; color: var(--s-900);
}
.montant small { font-size: 12px; font-weight: 500; color: var(--s-600); }
.montant.du { color: var(--danger); }
.montant.du small { color: var(--danger); opacity: .75; }

/* Bouton carré à icône (relance) */
.btn-ico {
    width: 34px; height: 34px; flex-shrink: 0;
    border-radius: 8px;
    border: 1px solid var(--s-200); background: var(--blanc); color: var(--s-600);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .2s, border-color .2s, color .2s;
}
.btn-ico:hover { background: var(--v-800); border-color: var(--v-800); color: #fff; text-decoration: none; }
.btn-ico svg {
    width: 16px; height: 16px; stroke: currentColor; fill: none;
    stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Tableaux ---------- */
.tab-wrap { overflow-x: auto; }
table.tab { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tab th {
    text-align: left; padding: 13px 18px;
    font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--s-600); background: #f8f9f6;
    border-bottom: 1px solid var(--s-200); white-space: nowrap;
}
table.tab td { padding: 14px 18px; border-bottom: 1px solid var(--s-200); vertical-align: middle; }
table.tab tbody tr { transition: background .15s; }
table.tab tbody tr:hover { background: #fafbf9; }
table.tab tbody tr:last-child td { border-bottom: 0; }

/* Les colonnes chiffrées : en-tête ET cellules alignés à droite.
   La règle doit être aussi spécifique que `table.tab th` pour s'appliquer. */
table.tab th.num,
table.tab td.num { text-align: right; }
table.tab th.centre,
table.tab td.centre { text-align: center; }
table.tab th.actions,
table.tab td.actions { text-align: right; white-space: nowrap; }
table.tab td.actions .btn + .btn { margin-left: 4px; }

/* Un badge dans une colonne alignée à droite doit suivre l'alignement */
table.tab td.num .badge { margin-left: auto; }
table.tab td.num > .badge { display: inline-flex; }

.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tab td, .tab th { font-variant-numeric: tabular-nums; }
.mono { font-variant-numeric: tabular-nums; }
.principal-cell { font-weight: 700; }
a.principal-cell, .principal-cell a { color: var(--v-800); }
.sous-cell { font-size: 12.5px; color: var(--s-600); }

.vide { padding: 48px 20px; text-align: center; color: var(--s-600); }
.vide .ico {
    width: 36px; height: 36px; display: block; margin: 0 auto 12px;
    stroke: var(--s-400); fill: none; stroke-width: 1.4;
    stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Boutons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 9px 16px;
    font-size: 13.5px; font-weight: 600; font-family: inherit; line-height: 1.4;
    border: 1px solid var(--s-200); border-radius: var(--r);
    background: var(--blanc); color: var(--s-900);
    cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: background .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.btn:hover { background: var(--s-50); border-color: var(--s-300); text-decoration: none; }
.btn:active { transform: translateY(.5px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn svg {
    width: 16px; height: 16px; stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.btn-p {
    background: var(--v-800); border-color: var(--v-800); color: #fff;
    box-shadow: 0 4px 12px rgba(11, 79, 55, .2);
}
.btn-p:hover {
    background: var(--v-900); border-color: var(--v-900); color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(11, 79, 55, .28);
}
.btn-d {
    background: var(--danger); border-color: var(--danger); color: #fff;
    box-shadow: 0 4px 12px rgba(220, 38, 38, .18);
}
.btn-d:hover { background: var(--danger-txt); border-color: var(--danger-txt); color: #fff; }
.btn-sm { padding: 6px 12px; font-size: 12.5px; border-radius: 8px; }
.btn-sm.btn-p, .btn-sm.btn-d { box-shadow: none; }
.btn-sm.btn-p:hover { box-shadow: 0 4px 10px rgba(11, 79, 55, .2); }
.btn-lien { border: 0; background: none; color: var(--v-800); padding: 4px 8px; box-shadow: none; }
.btn-lien:hover { background: var(--v-50); }
.btn-bloc { width: 100%; }

/* ---------- Formulaires ---------- */
.champ { margin-bottom: 16px; }
.champ label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; color: var(--s-700); }
.champ .aide { font-size: 12px; color: var(--s-600); margin-top: 5px; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=month], input[type=tel], select, textarea {
    width: 100%; padding: 9px 13px; min-height: 42px;
    font-size: 14px; font-family: inherit; color: var(--s-900);
    border: 1px solid var(--s-300); border-radius: var(--r);
    background-color: var(--blanc);
    box-shadow: 0 1px 2px rgba(16, 24, 20, .03);
    transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--v-800);
    box-shadow: 0 0 0 3px rgba(11, 79, 55, .12);
}
select {
    -webkit-appearance: none; appearance: none;
    padding-right: 36px; cursor: pointer; font-weight: 500;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364746e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 15px;
}
input.err, select.err, textarea.err { border-color: var(--danger); }
input.err:focus, select.err:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); }
.err-msg { font-size: 12px; color: var(--danger-txt); margin-top: 5px; font-weight: 500; }
textarea { min-height: 84px; resize: vertical; }

/* Champs de recherche des barres d'outils : loupe intégrée */
.barre .grandir input[type=text] {
    padding-left: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364746e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 13px center;
    background-size: 17px;
}

/* Champs de date et de mois : rendu natif disparate d'un navigateur
   à l'autre (police système, icône brute). On l'harmonise. */
input[type=date], input[type=month] {
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
    padding-right: 8px;
    cursor: pointer;
}
input[type=date]::-webkit-calendar-picker-indicator,
input[type=month]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .45;
    padding: 3px;
    border-radius: 4px;
    transition: opacity .12s, background .12s;
}
input[type=date]:hover::-webkit-calendar-picker-indicator,
input[type=month]:hover::-webkit-calendar-picker-indicator {
    opacity: .9;
    background: var(--v-50);
}
@-moz-document url-prefix() {
    input[type=date], input[type=month] { padding-right: 13px; }
}

/* Sélecteur de période mis en avant dans les barres d'outils */
.selecteur-periode {
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--blanc);
    border: 1px solid var(--s-300);
    border-radius: var(--r);
    padding: 3px 4px 3px 13px;
    box-shadow: 0 1px 2px rgba(16, 24, 20, .03);
}
.selecteur-periode label {
    font-size: 11px; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--s-600); margin: 0;
    white-space: nowrap;
}
.selecteur-periode input {
    border: 0; background: none; padding: 5px 4px; min-height: 0; box-shadow: none;
    font-size: 14px; font-weight: 700; width: auto; min-width: 128px;
}
.selecteur-periode input:focus { box-shadow: none; }
.selecteur-periode:focus-within { border-color: var(--v-800); box-shadow: 0 0 0 3px rgba(11, 79, 55, .12); }
.grille { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* ---------- Badges ---------- */
.badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 10px; border-radius: 20px;
    border: 1px solid transparent;
    font-size: 11.5px; font-weight: 700; white-space: nowrap; line-height: 1.6;
}
.b-ok     { background: var(--ok-bg);     color: var(--ok);         border-color: var(--ok-bd); }
.b-danger { background: var(--danger-bg); color: var(--danger-txt); border-color: var(--danger-bd); }
.b-warn   { background: var(--warn-bg);   color: var(--warn);       border-color: var(--warn-bd); }
.b-info   { background: var(--info-bg);   color: var(--info);       border-color: var(--info-bd); }
.b-gris   { background: var(--s-100);     color: var(--s-700);      border-color: var(--s-200); }
.b-or     { background: var(--or-50);     color: var(--or-700);     border-color: #f6e39a; }

/* ---------- Alertes (bandeaux) ---------- */
.alerte {
    padding: 13px 16px; border-radius: 12px;
    font-size: 13.5px; margin-bottom: 18px;
    border: 1px solid; border-left-width: 4px;
    display: flex; align-items: flex-start; gap: 10px;
}
.a-ok     { background: var(--ok-bg);     border-color: var(--ok-bd);     border-left-color: var(--ok);     color: #065f46; }
.a-danger { background: var(--danger-bg); border-color: var(--danger-bd); border-left-color: var(--danger); color: #991b1b; }
.a-warn   { background: var(--warn-bg);   border-color: var(--warn-bd);   border-left-color: #d97706;       color: #92400e; }
.a-info   { background: var(--info-bg);   border-color: var(--info-bd);   border-left-color: #2563eb;       color: #1e40af; }

/* ---------- Modale ---------- */
.fond {
    position: fixed; inset: 0; background: rgba(10, 22, 16, .45);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 40px 16px; z-index: 60; overflow-y: auto;
}
.modale {
    background: var(--blanc); border-radius: var(--r-lg);
    width: 100%; max-width: 620px; box-shadow: var(--ombre-lg);
    margin: auto;
}
.modale-t {
    padding: 18px 22px; border-bottom: 1px solid var(--s-200);
    display: flex; justify-content: space-between; align-items: center;
}
.modale-t h2 { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.modale-c { padding: 22px; }
.modale-p {
    padding: 16px 22px; border-top: 1px solid var(--s-200);
    display: flex; justify-content: flex-end; gap: 10px;
    background: var(--s-50); border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.fermer {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0; border-radius: 8px;
    font-size: 22px; line-height: 1; color: var(--s-600); cursor: pointer; padding: 0;
    transition: background .2s, color .2s;
}
.fermer:hover { background: var(--s-100); color: var(--s-900); }

/* ---------- Connexion ---------- */
.login-page {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 18% 12%, #12553f 0%, var(--v-900) 42%, var(--v-950) 100%);
    padding: 20px;
}
.login-carte {
    background: var(--blanc); border-radius: 20px;
    padding: 38px 34px; width: 100%; max-width: 410px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}
.login-carte .logo-l { width: 100%; max-width: 230px; display: block; margin: 0 auto 24px; }
.login-carte .sigle-l {
    width: 62px; height: 62px; margin: 0 auto 16px;
    border: 2px solid var(--v-800); border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 21px; font-weight: 800; color: var(--v-800);
}

/* ---------- Divers ---------- */
.barre { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
.barre .grandir { flex: 1; min-width: 220px; }
.barre select { width: auto; min-width: 170px; font-weight: 600; }
.pagination-wrap { padding: 14px 22px; border-top: 1px solid var(--s-200); }
.pagination-wrap nav { display: flex; gap: 5px; align-items: center; font-size: 13px; flex-wrap: wrap; }
.pagination-wrap svg { width: 15px; height: 15px; }
.muet { color: var(--s-600); }
.mini { font-size: 12.5px; }
.mb0 { margin-bottom: 0; }
.mt16 { margin-top: 16px; }
.entre { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wire-charge { opacity: .55; pointer-events: none; transition: opacity .12s; }

.burger {
    display: none;
    width: 38px; height: 38px;
    align-items: center; justify-content: center;
    background: var(--blanc); border: 1px solid var(--s-200); border-radius: var(--r);
    font-size: 18px; cursor: pointer; color: var(--s-800); padding: 0;
}

@media (max-width: 860px) {
    .sidebar { transform: translateX(-100%); transition: transform .25s ease; }
    .sidebar.ouvert { transform: translateX(0); box-shadow: 8px 0 40px rgba(0, 0, 0, .3); }
    .principal { margin-left: 0; }
    .contenu { padding: 18px 15px 50px; }
    .entete { padding: 13px 15px; }
    .burger { display: inline-flex; }
    .panneaux { grid-template-columns: 1fr; }
    .ligne { padding: 13px 16px; }
}

/* Téléphone : les cartes restent en 2 × 2, plus compactes. La pastille
   d'icône disparaît des statistiques — elle repousserait le libellé sur
   deux lignes — mais reste dans les en-têtes de listes. */
@media (max-width: 560px) {
    .stats { gap: 12px; margin-bottom: 20px; }
    .stat, .stat.alerte { padding: 15px; }
    .stat:hover { transform: none; }
    .stats .kpi-ico { display: none; }
    .stat .lab { font-size: 12px; }
    .stat .det { font-size: 11.5px; }
    h1 { font-size: 20px; }
}