:root {
    --bleu: #2b4a6f;
    --bleu-clair: #e8eef5;
    --gris: #6b7685;
    --fond: #f4f6f9;
    --carte: #ffffff;
    --bord: #dfe4ea;
    --rouge: #b03535;
    --rayon: 10px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--fond);
    color: #26303c;
    line-height: 1.5;
}

.centre {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.carte {
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    padding: 28px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.connexion {
    width: 100%;
    max-width: 360px;
    text-align: center;
}

.connexion h1 {
    margin: 0 0 4px;
    font-size: 1.35rem;
    color: var(--bleu);
}

.sous-titre {
    margin: 0 0 20px;
    color: var(--gris);
    font-size: 0.9rem;
}

form label {
    display: block;
    text-align: left;
    margin-bottom: 14px;
    font-size: 0.85rem;
    color: var(--gris);
}

form input {
    width: 100%;
    margin-top: 5px;
    padding: 10px 12px;
    border: 1px solid var(--bord);
    border-radius: 7px;
    font-size: 1rem;
}

button[type="submit"] {
    width: 100%;
    padding: 11px;
    border: 0;
    border-radius: 7px;
    background: var(--bleu);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
}

button[type="submit"]:hover { background: #22395a; }

.erreur {
    background: #fbeaea;
    color: var(--rouge);
    border: 1px solid #efc6c6;
    border-radius: 7px;
    padding: 9px 12px;
    font-size: 0.85rem;
    margin: 0 0 16px;
}

/* Barre du haut (pages connectées) */
.barre {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--bleu);
    color: #fff;
    padding: 12px 20px;
}

.barre .marque { font-weight: 600; }
.barre .espace { flex: 1; }
.barre .util { opacity: 0.85; font-size: 0.9rem; }
.sel-poste {
    background: rgba(255, 255, 255, 0.14); color: #fff; border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 7px; padding: 6px 10px; font-size: 0.88rem; max-width: 240px;
}
.sel-poste option { color: #26303c; }
.enligne { margin: 0; display: inline; }

.lien {
    background: none;
    border: 0;
    color: #fff;
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0;
}

.contenu { padding: 24px; max-width: 1200px; margin: 0 auto; }
.contenu h1 { color: var(--bleu); margin-top: 0; font-size: 1.3rem; }
.contenu h2 { font-size: 1rem; color: var(--bleu); margin: 0 0 14px; }

/* Onglets */
.onglets { display: flex; gap: 4px; margin-left: 20px; }
.onglet {
    background: transparent; border: 0; color: #cdd8e6; cursor: pointer;
    padding: 8px 14px; border-radius: 7px; font-size: 0.92rem;
}
.onglet:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.onglet.actif { background: rgba(255, 255, 255, 0.18); color: #fff; font-weight: 600; }

.vue { display: block; }
.vue.cachee { display: none; }

.ligne-titre { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.bornes { color: var(--gris); font-size: 0.9rem; margin: 0 0 16px; }
.aide { color: var(--gris); font-size: 0.85rem; margin: -4px 0 16px; }

.nav-date { display: flex; align-items: center; gap: 8px; }
.nav-date input { padding: 7px 10px; border: 1px solid var(--bord); border-radius: 7px; }

.btn { background: #eef2f7; border: 1px solid var(--bord); border-radius: 7px; padding: 7px 12px; cursor: pointer; font-size: 0.9rem; }
.btn:hover { background: #e2e8f0; }
.btn.primaire { background: var(--bleu); color: #fff; border-color: var(--bleu); }
.btn.primaire:hover { background: #22395a; }
.btn.mini { padding: 4px 9px; font-size: 0.8rem; }

/* Cartes KPI */
.cartes-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.kpi { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 16px; text-align: center; }
.kpi-val { display: block; font-size: 1.6rem; font-weight: 700; color: var(--bleu); }
.kpi-lib { display: block; font-size: 0.82rem; color: var(--gris); margin-top: 4px; }
.kpi.prod .kpi-val { color: var(--vert, #2e8b57); }
.kpi.perso .kpi-val { color: #c0603a; }

.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.grille-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
.carte + .carte, .vue > .carte { margin-bottom: 16px; }

/* Mini-listes (top 5) */
.mini-ligne { position: relative; display: flex; justify-content: space-between; align-items: center;
    padding: 7px 8px; border-radius: 6px; overflow: hidden; font-size: 0.88rem; }
.mini-barre { position: absolute; left: 0; top: 0; bottom: 0; background: #eaf0f7; z-index: 0; }
.mini-nom, .mini-dur { position: relative; z-index: 1; }
.mini-nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }
.mini-dur { color: var(--gris); font-variant-numeric: tabular-nums; }
.vide { color: var(--gris); font-size: 0.88rem; font-style: italic; }

/* Badges catégorie */
.badge { color: #fff; font-size: 0.72rem; padding: 1px 7px; border-radius: 10px; vertical-align: middle; }

/* Tables */
.tab { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.tab th, .tab td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--bord); }
.tab th { color: var(--gris); font-weight: 600; cursor: pointer; user-select: none; white-space: nowrap; }
.tab td.droite, .tab th.droite { text-align: right; font-variant-numeric: tabular-nums; }
.tab td.ok { color: #2e8b57; } .tab td.sous { color: #c0603a; }
.tab select { padding: 3px 6px; border: 1px solid var(--bord); border-radius: 6px; }

/* Formulaires de réglage */
.form-objectif, .form-regle { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.form-objectif label { font-size: 0.85rem; color: var(--gris); }
.form-objectif input, .form-regle input, .form-regle select {
    padding: 8px 10px; border: 1px solid var(--bord); border-radius: 7px; font-size: 0.92rem; }
.form-regle input { min-width: 240px; }
.msg { color: #2e8b57; font-size: 0.85rem; }

@media (max-width: 820px) {
    .cartes-kpi { grid-template-columns: repeat(2, 1fr); }
    .grille-2, .grille-3 { grid-template-columns: 1fr; }
    .onglets { margin-left: 8px; }
}