/* Styles Globaux */
body {
    font-family: Arial, sans-serif; /* Utilise une police sans-serif pour un rendu moderne */
    background-color: #f4f4f4; /* Couleur d'arrière-plan légère */
    color: #333; /* Couleur du texte */
    margin: 0; /* Supprime la marge par défaut */
    padding: 0; /* Supprime le remplissage par défaut */
}

/* Style pour le conteneur du formulaire d'authentification */
.form-container {
    max-width: 600px; /* Largeur maximale du conteneur */
    margin: 100px auto; /* Centre le conteneur horizontalement avec un espacement en haut */
    padding: 20px; /* Remplissage interne */
    background: #fff; /* Couleur de fond blanche */
    border-radius: 8px; /* Bords arrondis */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Ombre légère */
}

/* Style pour le conteneur des articles */
.article-list-container {
    max-width: 1000px; /* Largeur maximale du conteneur */
    margin: 20px auto; /* Centre le conteneur horizontalement */
    padding: 20px; /* Remplissage interne */
    background: #fff; /* Couleur de fond blanche */
    border-radius: 8px; /* Bords arrondis */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Ombre légère */
}

/* Style pour les cartes d'articles */
.article-card {
    border: 1px solid #ccc; /* Bordure grise claire */
    border-radius: 5px; /* Bords arrondis */
    padding: 15px; /* Remplissage interne */
    margin-bottom: 20px; /* Espacement entre les cartes */
    background-color: #f9f9f9; /* Couleur de fond légèrement plus foncée */
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); /* Ombre légère */
}

.article-card h2 {
    font-size: 1.5em; /* Taille de la police pour le titre */
    margin-bottom: 10px; /* Marge en bas */
}

/* Styles pour les images d'articles */
.article-image {
    max-width: 200px; /* Limite la largeur à 200 pixels */
    height: auto; /* Maintient le ratio d'aspect */
    border-radius: 4px; /* Bords arrondis pour les images */
    margin-top: 10px; /* Marge en haut */
}

/* Styles pour les états des articles */
.status-ok {
    background-color: #d4edda; /* Vert clair */
}

.status-not-ok {
    background-color: #f8d7da; /* Rouge clair */
}

.status-text {
    font-weight: bold; /* Texte en gras */
    margin-top: 10px; /* Marge en haut */
    margin: 10px; /* Marge autour */
}

/* Styles pour les paragraphes */
p {
    margin: 10px 0; /* Marge en haut et en bas */
}

/* Style pour le bouton de modification */
.article-button {
    display: inline-block; /* Affiche le lien comme un bloc */
    padding: 10px 15px; /* Remplissage interne */
    color: white; /* Couleur du texte */
    background-color: #007bff; /* Couleur de fond */
    border-radius: 5px; /* Bords arrondis */
    text-decoration: none; /* Supprime le soulignement */
}

.article-button:hover {
    background-color: #0056b3; /* Couleur au survol */
}

/* Styles pour les statuts */
.article-status-container {
    display: flex; /* Utilise le modèle Flexbox */
    align-items: flex-start; /* Aligne les éléments en haut */
    margin-top: 10px; /* Marge en haut */
}


.article-status img {
    width: 20px; /* Largeur de l'image de statut */
    margin-left: 10px; /* Marge à gauche */
}

/* Style pour le formulaire */
form {
    max-width: 600px; /* Largeur maximale du formulaire */
    margin: 20px auto; /* Centre le formulaire horizontalement */
    padding: 20px; /* Remplissage interne */
    background: #fff; /* Couleur de fond blanche */
    border-radius: 8px; /* Bords arrondis */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Ombre légère */
}

/* Styles pour les fieldsets */
fieldset {
    border: 1px solid #ccc; /* Bordure grise claire */
    padding: 15px; /* Espacement interne */
    border-radius: 5px; /* Bords arrondis */
}

/* Styles pour les légendes */
legend {
    font-size: 1.5em; /* Taille de la police pour le légende */
    font-weight: bold; /* Met le texte en gras */
}

/* Styles pour les étiquettes */
label {
    display: block; /* Affiche chaque étiquette sur une nouvelle ligne */
    margin-bottom: 10px; /* Marge en bas */
    font-weight: bold; /* Met le texte en gras */
}

/* Styles pour les champs de saisie */
input[type="text"],
input[type="password"],
input[type="file"],
select,
textarea {
    width: 100%; /* Prend 100% de la largeur du conteneur */
    padding: 10px; /* Remplissage interne */
    margin: 10px 0; /* Marge en haut et en bas */
    border: 1px solid #ccc; /* Bordure grise claire */
    border-radius: 4px; /* Bords arrondis */
    box-sizing: border-box; /* Inclut le padding et la bordure dans la largeur totale */
}

/* Styles pour les zones de texte */
textarea {
    resize: vertical; /* Permet de redimensionner verticalement */
    /* Ajoutez éventuellement cette ligne pour éviter les débordements */
    max-width: 100%; /* Limite la largeur maximale à 100% du conteneur */
}

/* Styles pour les boutons de soumission */
input[type="submit"] {
    background-color: #5cb85c; /* Couleur de fond du bouton */
    color: white; /* Couleur du texte */
    border: none; /* Pas de bordure */
    padding: 10px 15px; /* Remplissage interne */
    cursor: pointer; /* Curseur pointer */
    border-radius: 5px; /* Bords arrondis */
    display: block; /* Rend le bouton comme un bloc */
    margin: 20px auto; /* Centre le bouton avec marge automatique */
    width: 50%; /* Ajuste la largeur du bouton si nécessaire */
}

/* Styles au survol des boutons de soumission */
input[type="submit"]:hover {
    background-color: #4cae4c; /* Couleur au survol */
}

/* Styles pour les zones de texte */
textarea {
    resize: vertical; /* Permet de redimensionner verticalement */
}

/* Styles pour les liens */
a {
    text-decoration: none; /* Supprime le soulignement */
    color: white; /* Couleur du texte */
    background-color: #d9534f; /* Couleur de fond */
    padding: 10px 15px; /* Remplissage interne */
    border-radius: 5px; /* Bords arrondis */
}

/* Styles au survol des liens */
a:hover {
    background-color: #c9302c; /* Couleur au survol */
}
.logout-button-container {
    text-align: center;
    margin-bottom: 20px;
}

.logout-button-container button {
    padding: 10px 20px;
    background-color: #f44336; /* Rouge */
    color: white;
    border: none;
    cursor: pointer;
    font-size: 16px;
    border-radius: 5px;
	text-align: center;
}

.logout-button-container button:hover {
    background-color: #d32f2f;
}
.center-button-container {
            display: flex; /* Utilise Flexbox */
            justify-content: center; /* Centre horizontalement */
            /*align-items: center; /* Centre verticalement */
            height: auto; /* Prend toute la hauteur de la fenêtre */
        }
.article-image {
    display: block;          /* permet le centrage */
    margin: 15px auto;       /* centre horizontalement */
    max-width: 300px;        /* ajuste si besoin */
    height: auto;
    border-radius: 4px;
}

.flash-success {
    background-color: #d4edda;
    color: #155724;
    padding: 12px;
    border: 1px solid #c3e6cb;
    border-radius: 5px;
    margin-bottom: 20px;
    text-align: center;
    font-weight: bold;
}
.flash-error {
    background-color: #f8d7da;
    color: #721c24;
    padding: 12px;
    border: 1px solid #f5c6cb;
    border-radius: 5px;
    margin-bottom: 15px;
    text-align: center;
    font-weight: bold;
}
.logout-button-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;

    background: #fff;
    padding: 10px 12px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Optionnel : réduire le logo */
.logout-button-container img {
    width: 80px;
    display: block;
    margin: 0 auto 8px;
}

/* Bouton déconnexion */
.logout-button-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;

    background: transparent;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
}

.logout-button-container button:hover {
    background-color: #b02a37;
}
.header-logo {
    text-align: center;
    margin: 20px 0;
}

.header-logo img {
    max-width: 200px;
    height: auto;
}
.header-container {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;

    border: 2px solid #ccc;
    border-radius: 10px;
    background-color: #fff;

    text-align: center;
}

.header-logo {
    max-width: 100%;
    height: auto;
}
.back-button-container {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9999;
}

.back-button {
    display: inline-block;
    background-color: #6c757d; /* gris pro */
    color: #fff;
    padding: 10px 16px;
    border-radius: 6px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}

.back-button:hover {
    background-color: #5a6268;
}