/* ========================= */
/* ====== STYLE GLOBAL ====== */
/* ========================= */

/* Importation de la police Roboto */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

body {
    font-family: 'Roboto', Arial, sans-serif; /* Police harmonisée */
    background-color: #f0f2f5; /* Fond harmonisé avec accueil.css et gestion_stocks.css */
    color: #333; /* Couleur de texte par défaut harmonisée */
    line-height: 1.6; /* Cohérence avec les autres CSS */
    margin: 0;
    padding: 0;
    display: flex; /* Ajouté pour le sticky footer */
    flex-direction: column; /* Ajouté pour le sticky footer */
    min-height: 100vh; /* Ajouté pour le sticky footer */
}

/* ================================ */
/* ====== BARRE DE NAVIGATION ====== */
/* ================================ */

.navbar {
    background-color: #007bff; /* Couleur primaire conservée */
    padding: 15px 30px; /* Espacement ajusté */
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Ombre subtile */
    flex-shrink: 0; /* Empêche le header de rétrécir */
}

.navbar .logo {
    font-size: 1.5em; /* Taille ajustée */
    font-weight: 700; /* Poids de police cohérent */
    color: white;
    text-decoration: none;
}
.navbar .logo:hover {
    text-decoration: none;
    opacity: 0.9;
}

.navbar nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center; /* Alignement vertical des éléments de la nav */
}

.navbar nav ul li {
    margin: 0 10px; /* Espacement ajusté */
}

.navbar nav ul li:last-child {
    margin-right: 0;
}

.navbar nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: 500; /* Poids de police cohérent */
    padding: 8px 12px; /* Ajout du padding pour une meilleure zone cliquable */
    border-radius: 6px; /* Bords arrondis pour les liens */
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.navbar nav ul li a:hover {
    background-color: rgba(255, 255, 255, 0.15); /* Surbrillance subtile */
    text-decoration: none; /* Pas de soulignement ici, le fond suffit */
}

/* Style spécifique pour le lien "Moi" actif (vert) ou inactif (rouge) */
.navbar nav ul li a.nav-link-moi-active {
    /* La couleur est gérée par style inline dans le HTML, mais on peut ajouter un fond si besoin */
}
.navbar nav ul li a.nav-link-moi-inactive {
    font-size:1.2em;
    color: #db737e !important; /* Rouge clair pour la lisibilité sur fond bleu */
}


/* Style pour le lien de déconnexion */
.navbar nav ul li a.logout {
    background-color: #dc3545; /* Rouge pour la déconnexion, cohérent avec .btn-logout d'accueil */
    border: 1px solid #dc3545;
}

.navbar nav ul li a.logout:hover {
    background-color: #c82333;
    border-color: #bd2130;
}

/* Bouton pour menu hamburger sur mobile */
.navbar .menu-toggle {
    display: none; /* Caché par défaut */
    background: none;
    border: none;
    color: white;
    font-size: 1.8em;
    cursor: pointer;
}

/*
================================================================
===== STYLE POUR UNE BARRE DE DÉFILEMENT HORIZONTALE VISIBLE =====
================================================================
*/

/* --- Conteneur principal du défilement --- */
.navbar nav {
    overflow-x: auto; /* Active le défilement horizontal si le contenu dépasse */
    overflow-y: hidden; /* Empêche tout défilement vertical accidentel */

    /* --- Styles pour la barre de défilement --- */

    /* Pour Firefox : 'auto' est plus épais que 'thin' */
    scrollbar-width: auto;
    /* Pour Firefox : couleur du curseur (gris clair) et de la piste (bleu foncé) */
    scrollbar-color: #c5c5c5 #0056b3;
    align-self: stretch;
    display: flex;
    align-items: center;
}


/* --- Styles pour les navigateurs WebKit (Chrome, Safari, Edge) --- */

/* La piste de la barre de défilement (le fond) */
.navbar nav::-webkit-scrollbar-track {
    background: #0056b3; /* Un bleu plus foncé que la navbar pour bien la distinguer */
    border-radius: 10px;
}

/* La barre de défilement elle-même (le curseur/pouce) */
.navbar nav::-webkit-scrollbar-thumb {
    background-color: #c5c5c5; /* Un gris clair, très visible sur le fond bleu foncé */
    border-radius: 10px; /* Bords arrondis */
    border: 2px solid #0056b3; /* Ajoute une bordure de la couleur de la piste pour un effet "incrusté" */
}

/* Effet au survol de la souris sur le curseur */
.navbar nav::-webkit-scrollbar-thumb:hover {
    background-color: #ffffff; /* Le curseur devient blanc au survol pour un retour visuel clair */
}

/* La barre de défilement globale */
.navbar nav::-webkit-scrollbar {
    height: 12px; /* Augmentation significative de l'épaisseur de la barre */
}
/* ================================ */
/* ====== CONTENU PRINCIPAL ====== */
/* ================================ */

main {
    flex-grow: 1; /* Permet  main de prendre l'espace disponible pour le sticky footer */
    padding: 25px; /*  général pour le contenu */
    text-align: center;
    box-sizing: border-box;
}

.better-container {
      max-width: 700px;
      margin: 20px auto;
      padding: 25px;
      background-color: #ffffff;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      border: 1px solid #e0e0e0;
    }

.better-container h1 {
    text-align: center;
    color: #333;
    margin-bottom: 25px;
}

/* ========================== */
/* ====== PIED DE PAGE ====== */
/* ========================== */

footer {
    background-color: #343a40; /* Couleur foncée conservée */
    color: #adb5bd; /* Couleur de texte plus douce pour le pied de page */
    padding: 20px 30px; /* Espacement ajusté */
    text-align: center;
    font-size: 0.9em;
    flex-shrink: 0; /* Empêche le footer de rétrécir */
}

footer p {
    margin: 0;
}

footer .report-bug-link {
    color: red; /* Rouge plus doux pour le lien de bug */
    font-weight: 500;
    text-decoration: none;
    margin-left: 10px; /* Espace par rapport au copyright */
}

footer .report-bug-link i {
    margin-right: 5px;
}

footer .report-bug-link:hover {
    color: #ff5252; /* Rouge plus vif au survol */
    text-decoration: underline;
}

/* ======================= */
/* RESPONSIVE DESIGN       */
/* ======================= */

@media (max-width: 992px) { /* Seuil pour le menu hamburger, ajustez si besoin */
    .navbar nav ul {
        display: none; /* Cache le menu normal */
        flex-direction: column;
        position: absolute;
        top: 70px; /* Hauteur de la navbar */
        left: 0;
        width: 100%;
        background-color: #0069d9; /* Un bleu légèrement différent pour le menu déroulant */
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        z-index: 1000;
        padding: 10px 0;
    }

    .navbar nav ul.active {
        display: flex; /* Affiche le menu quand .active est présent */
    }

    .navbar nav ul li {
        margin: 0;
        width: 100%;
        text-align: center;
    }

    .navbar nav ul li a {
        display: block;
        padding: 12px 15px;
        border-radius: 0; /* Pas de coins arrondis en mode liste */
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
     .navbar nav ul li:last-child a {
        border-bottom: none;
    }

    .navbar nav ul li a:hover {
        background-color: rgba(255, 255, 255, 0.2);
    }

    .navbar .menu-toggle {
        display: block; /* Affiche le bouton hamburger */
    }
}


@media (max-width: 768px) {
    body {
        /* Ajustements mineurs si nécessaire, la plupart des styles sont déjà fluides */
    }

    .navbar {
        padding: 15px 20px;
    }

    .navbar .logo {
        font-size: 1.3em;
    }

    main {
        padding: 20px;
    }

    footer {
        padding: 15px 20px;
        font-size: 0.85em;
    }
}

@media (max-width: 480px) {
    main {
        padding: 15px;
    }

    .navbar .logo {
        font-size: 1.2em;
    }
     .navbar .menu-toggle {
        font-size: 1.6em;
    }
}