h1 {
    font-size: bold;
    font-size: 25px;
}
h2 {
    font-size: 15px;
}
h3 {
    font-size: bold;
    font-size: 15px;
}
h6 {
	font-size: bold;
    font-size: 28px;
}

/* Style global */
html, body {
    height: 100%; /* Assure que le corps prend toute la hauteur */
    margin: 0; /* Supprime les marges par défaut */
    padding: 0; /* Supprime le padding par défaut */
    font-family: Arial, sans-serif; /* Police de caractères */
}

/* Flexbox pour la mise en page */
body {
    display: flex;
    flex-direction: column; /* Colonne pour empiler les éléments */
}

/* En-tête */
header {
    background: linear-gradient(135deg, #4CAF50, #81C784); /* Dégradé de couleur */
    color: white; /* Couleur du texte */
    padding: 20px; /* Espacement interne */
    text-align: center; /* Centrer le texte */
}

/* Conteneur principal */
.container {
    flex: 1; /* Permet au conteneur de prendre tout l'espace restant */
    max-width: 800px; /* Largeur maximale */
    margin: auto; /* Centrer le conteneur */
    padding: 20px; /* Espacement interne */
    text-align: center; /* Centrer le texte */
}

/* Navigation */
nav {
    margin: 10px 0; /* Marges autour des nav */
}

/* Disposition des liens en haut */
.top-links {
    display: flex; /* Utiliser flexbox pour la disposition */
    justify-content: center; /* Centrer les éléments */
    gap: 20px; /* Espacement entre les éléments */
}

/* Disposition des liens du milieu et du bas */
.middle-links, .bottom-links {
    margin-top: 20px; /* Marge supérieure pour l'espacement */
}

/* Boutons */
.button {
    background-color: #4CAF50; /* Couleur de fond */
    border: none; /* Pas de bordure */
    color: white; /* Couleur du texte */
    padding: 15px 20px; /* Espacement interne */
    text-align: center; /* Centrer le texte */
    text-decoration: none; /* Pas de soulignement */
    border-radius: 5px; /* Coins arrondis */
    transition: background-color 0.3s; /* Transition pour effet de survol */
    font-size: 16px; /* Taille de la police */
    display: inline-block; /* Permet d'utiliser margin */
    margin: 5px; /* Espace entre tous les boutons */
}

.button:hover {
    background-color: #388E3C; /* Couleur au survol */
}

/* Pied de page */
footer {
    background-color: #333; /* Couleur de fond */
    color: white; /* Couleur du texte */
    text-align: center; /* Centrer le texte */
    padding: 10px 0; /* Espacement interne */
    position: relative; /* Position relative pour le positionner correctement */
    bottom: 0; /* Toujours en bas */
    width: 100%; /* Prendre toute la largeur */
}




/* Style global */
body {
    font-family: Arial, sans-serif; /* Police globale */
    margin: 20px; /* Marge autour du corps */
    line-height: 1.6; /* Hauteur de ligne pour un meilleur espacement */
}

/* Style pour le formulaire */
.client-form {
    margin: 20px 0; /* Marge autour du formulaire */
    padding: 15px; /* Espacement interne */
    border: 1px solid #ccc; /* Bordure légère */
    border-radius: 5px; /* Coins arrondis */
    background-color: #f9f9f9; /* Couleur de fond */
}

/* Espacement entre les champs du formulaire */
.input-field {
    margin-bottom: 10px; /* Espace entre les inputs */
    padding: 10px; /* Espacement interne pour les inputs */
    width: calc(100% - 22px); /* Largeur totale moins padding */
    border: 1px solid #ccc; /* Bordure pour les inputs */
    border-radius: 4px; /* Coins arrondis pour les inputs */
}

/* Style pour les boutons */
.button {
    padding: 10px 15px; /* Espacement interne pour les boutons */
    background-color: #4CAF50; /* Couleur de fond */
    color: white; /* Couleur du texte */
    border: none; /* Pas de bordure */
    border-radius: 5px; /* Coins arrondis */
    cursor: pointer; /* Curseur en main */
    transition: background-color 0.3s; /* Transition au survol */
}

/* Effet de survol pour les boutons */
.button:hover {
    background-color: #388E3C; /* Couleur au survol */
}

/* Style pour les messages de succès ou d'erreur */
.success {
    color: green; /* Couleur pour les messages de succès */
}

.error {
    color: red; /* Couleur pour les messages d'erreur */
}

/* Style pour les informations des clients */
.client-info {
    margin: 20px 0; /* Espace autour des informations des clients */
    padding: 10px; /* Espacement interne */
    border-bottom: 1px solid #ccc; /* Ligne de séparation */
}
.product-info {
    margin: 20px 0; /* Espace autour des informations des clients */
    padding: 10px; /* Espacement interne */
    border-bottom: 1px solid #ccc; /* Ligne de séparation */
}

/* Styles pour les formulaires */
form {
    margin: 20px 0; /* Marge autour du formulaire */
    padding: 15px; /* Espacement interne */
    border: 1px solid #ccc; /* Bordure légère */
    border-radius: 5px; /* Coins arrondis */
    background-color: #f9f9f9; /* Couleur de fond */
}

/* Styles pour les étiquettes des champs */
label {
    font-weight: bold; /* Texte en gras pour les étiquettes */
}

/* Styles pour les champs de saisie */
input[type="text"], select {
    margin-bottom: 10px; /* Espace entre les inputs */
    padding: 10px; /* Espacement interne pour les inputs */
    width: calc(100% - 22px); /* Largeur totale moins padding */
    border: 1px solid #ccc; /* Bordure pour les inputs */
    border-radius: 4px; /* Coins arrondis pour les inputs */
}

/* Style pour les boutons de soumission */
input[type="submit"] {
    background-color: #4CAF50; /* Couleur de fond */
    color: white; /* Couleur du texte */
    padding: 10px 15px; /* Espacement interne pour les boutons */
    border: none; /* Pas de bordure */
    border-radius: 5px; /* Coins arrondis */
    cursor: pointer; /* Curseur en main */
    transition: background-color 0.3s; /* Transition au survol */
}

input[type="submit"]:hover {
    background-color: #388E3C; /* Couleur au survol */
}

/* Style pour les messages de confirmation */
.confirmation {
    color: green; /* Couleur pour les messages de succès */
}

/* Style pour les messages d'erreur */
.error {
    color: red; /* Couleur pour les messages d'erreur */
}

/* Styles pour les tables */
table {
    width: 100%; /* Largeur totale de la table */
    border-collapse: collapse; /* Fusionner les bordures */
}

th, td {
    border: 1px solid #ccc; /* Bordure des cellules */
    padding: 10px; /* Espacement interne des cellules */
    text-align: left; /* Alignement à gauche */
}

th {
    background-color: #f2f2f2; /* Couleur de fond des en-têtes */
}


/* Styles spécifiques pour la gestion des clients et des produits */

/* Style pour les titres des sections */
.section-title {
    font-size: 20px; /* Taille du texte pour les sous-titres */
    margin: 20px 0; /* Espacement autour des sous-titres */
    color: #333; /* Couleur de texte pour les titres */
}

/* Style pour les sous-titres */
.sub-section-title {
    font-size: 18px; /* Taille du texte pour les sous-sous-titres */
    margin: 15px 0; /* Espacement autour des sous-sous-titres */
    color: #555; /* Couleur de texte pour les sous-titres */
}

/* Style pour les éléments du formulaire */
label {
    font-weight: bold; /* Mettre les labels en gras */
    display: block; /* Afficher les labels en bloc pour une meilleure mise en page */
    margin: 10px 0 5px; /* Espacement autour des labels */
}

/* Style pour les champs de saisie */
input[type="text"],
select {
    padding: 10px; /* Espacement interne pour les champs */
    width: calc(100% - 22px); /* Largeur totale moins le padding */
    border: 1px solid #ccc; /* Bordure pour les champs */
    border-radius: 4px; /* Coins arrondis pour les champs */
    margin-bottom: 20px; /* Espace entre les champs */
}

/* Style pour les boutons */
button {
    background-color: #4CAF50; /* Couleur de fond pour les boutons */
    color: white; /* Couleur du texte */
    padding: 10px 15px; /* Espacement interne pour les boutons */
    border: none; /* Pas de bordure */
    border-radius: 5px; /* Coins arrondis */
    cursor: pointer; /* Curseur en main */
    transition: background-color 0.3s; /* Transition au survol */
}

/* Effet de survol pour les boutons */
button:hover {
    background-color: #388E3C; /* Couleur au survol des boutons */
}

/* Style pour les messages de confirmation */
.confirmation {
    color: green; /* Couleur pour les messages de succès */
    margin: 15px 0; /* Espace autour des messages de confirmation */
}

/* Style pour les items des listes de clients et produits */
.item {
    margin: 15px 0; /* Espace entre les éléments */
    padding: 10px; /* Espacement interne */
    border: 1px solid #ccc; /* Bordure pour délimiter les éléments */
    border-radius: 5px; /* Coins arrondis pour les éléments */
}

/* Style pour les titres à l'intérieur des items */
.item h3, .item h4 {
    margin: 10px 0; /* Espacement autour des titres */
    color: #444; /* Couleur spécifique pour les titres d'items */
}


/* Styles pour le formulaire de sélection de commande */
.commande-selection {
    margin-bottom: 20px;
}

.commande-selection label {
    display: block;
    margin-bottom: 5px;
}

.commande-selection select {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Styles pour le formulaire de modification de commande */
.commande-modification {
    margin-bottom: 20px;
}

.commande-modification label {
    display: block;
    margin-bottom: 5px;
}

.commande-modification input,
.commande-modification select {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.commande-modification button {
    background-color: #4CAF50; /* Couleur de fond */
    color: white; /* Couleur du texte */
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.commande-modification button:hover {
    background-color: #45a049; /* Couleur au survol */
}

/* Styles pour la table des commandes */
.commandes-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.commandes-table th,
.commandes-table td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: left;
}

.commandes-table th {
    background-color: #f2f2f2;
}

.confirmation {
    color: green;
    font-weight: bold;
    margin-top: 10px;
}