/* =========================================
   1. VARIABLES DE COULEURS
   ========================================= */
:root {
    --bleu:       #3498db;
    --vert:       #27ae60;
    --rouge:      #c0392b;
    --bleu-nuit:  #2c3e50;
    --gris-fond:  #ecf0f1;
}

/* =========================================
   2. STYLE GLOBAL DE LA PAGE
   ========================================= */
body {
    font-family: Arial, sans-serif;
    background-color: var(--gris-fond);
    margin: 0;
}

a {
    text-decoration: none;
}

/* =========================================
   3. EN-TÊTE (Barre de navigation)
   ========================================= */
.navbar {
    background-color: var(--bleu-nuit);
    color: white;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between; /* Espace le titre et les liens */
}

/* =========================================
   4. CONTENEURS ET CARTES BLANCHES
   ========================================= */
.container {
    max-width: 1000px;
    margin: 30px auto; /* Centrage automatique */
}

.card, .form-panel, .login-card {
    background: white;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre legere */
}

/* =========================================
   5. FORMULAIRES (Champs de saisie)
   ========================================= */
input, select {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box; /* Garde la largeur a 100% avec le padding */
}

/* =========================================
   6. BOUTONS D'ACTION
   ========================================= */
.btn {
    padding: 10px 15px;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* Alignement parfait pour la lecture rapide */
.btn-primary   { background-color: var(--bleu); }
.btn-success   { background-color: var(--vert); }
.btn-danger    { background-color: var(--rouge); }
.btn-secondary { background-color: gray; }

/* =========================================
   7. TABLEAUX DE DONNÉES
   ========================================= */
table {
    width: 100%;
    border-collapse: collapse; /* Fusion des bordures */
}

th, td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

th {
    background-color: var(--bleu-nuit);
    color: white;
}

/* =========================================
   8. ALERTES ET BADGES CAPTEURS
   ========================================= */
.alert {
    padding: 15px;
    margin-bottom: 15px;
    text-align: center;
    border-radius: 5px;
}

.alert-error   { background-color: #fadbd8; color: red; }
.alert-success { background-color: #d4edda; color: green; }

.badge {
    padding: 5px 10px;
    border-radius: 10px;
    color: white;
    font-size: 12px;
}

.bg-elec { background-color: orange; }
.bg-eau  { background-color: blue; }
.bg-air  { background-color: gray; }

/* =========================================
   9. ALIGNEMENT SPÉCIFIQUE (Connexion & Grilles)
   ========================================= */
.login-wrapper {
    display: flex;
    justify-content: center; /* Centrage horizontal */
    align-items: center;     /* Centrage vertical */
    height: 100vh;           /* Plein ecran */
}

.row-flex {
    display: flex;
    gap: 10px;
}

.col-half {
    flex: 1;
}