/* Global */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    background-color: #f9f9f9;
}

main {
    padding: 20px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.intro {
    text-align: center;
    margin: 20px 0;
}

/* Menu principal */
header {
    background-color: #343a40; /* Fond sombre */
    color: white;  
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
}  

header img {
    margin-right: 15px;
    height: 50px; /* Assure une taille uniforme */
}

.menu ul {
    list-style: none;
    margin: 0;
    padding: 10px 0;
    display: flex;
    gap: 20px;
    justify-content: center;
}

.menu a {
    text-decoration: none;
    font-size: 1.1rem;
    color: white;
}

.menu a:hover,
.menu a.active {
    color: #ffc107;
    font-weight: bold;
}

/* Barre secondaire */
.menu-bar {
    background-color: #495057; /* Gris foncé */
    border-top: 1px solid #343a40;
    padding: 8px 0;
}

.menu-secondary ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
   justify-content: center;
    gap: 20px;	   
	align-items: center;
}
	  
.menu-secondary li {
    display: flex;
    align-items: center; /* Assure que l'icône et le texte sont alignés */
}

.menu-secondary a {
    text-decoration: none;
    font-size: 1.2rem;
    color: #f8f9fa;
    display: flex;
    align-items: center;
}

.menu-secondary a:hover {
    color: #ffc107;
}

.menu-secondary i {
    font-size: 1.2rem; /* Taille des icônes */
    margin-right: 8px; /* Espacement entre l'icône et le texte */
    vertical-align: middle; /* Aligne l'icône avec le texte */
}

/* Footer */
footer {
    text-align: center;
    padding: 20px;
    background-color: #333;
    color: white;	 
	width: 100%;
	position: relative;
	bottom: 0;
}

.buttons {
    text-align: center;
    margin: 20px 0;
}

button {
    border: none;
    padding: 10px 20px;
    font-size: 1rem;
    border-radius: 5px;
    cursor: pointer;
    margin: 5px;
}

.btn-primary {
    background-color: #007bff;
    color: white;
}

.btn-primary:hover {
    background-color: #0056b3;
}

.btn-secondary {
    background-color: #28a745;
    color: white;
}

.btn-secondary:hover {
    background-color: #218838;
}

.btn-tertiary {
    background-color: #ffc107;
    color: black;
}

.btn-tertiary:hover {
    background-color: #e0a800;
}
 
.book-preview {
    display: flex;
    flex-direction: column; /* Aligne les éléments verticalement */
    align-items: center; /* Centre horizontalement */
    gap: 10px; /* Espace entre l'image et les autres éléments */
}		

.responsive-image {
    max-width: 100%; /* L'image ne dépasse jamais la largeur de son conteneur */
    height: auto; /* Maintient les proportions de l'image */
    max-height: 400px; /* Limite la hauteur maximale pour réduire sa taille */
    display: block; /* Évite les espaces supplémentaires avec des images inline */
    margin: 0 auto; /* Centre l'image horizontalement */
}

.star-rating-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.star-rating {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 5px;
}

.star-rating .current-rating {
    background-color: gold;
    height: 20px;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    color: #fff;
    font-weight: bold;
    border-radius: 5px;
}

.star-rating li {
    cursor: pointer;
}

.star-rating .fa-star {
    color: #ccc;
}

.star-rating .fa-star:hover,
.star-rating li:hover ~ li .fa-star {
    color: gold;
}

.vote-count {
    font-size: 0.9rem;
    color: #555;
} 

/* Conteneur principal */
.vote-container {
    display: flex;
    align-items: center;
    gap: 10px; /* Espace entre les éléments */
    font-family: Arial, sans-serif;
}

/* Style pour le titre */
.vote-container h2 {
    margin: 0;
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

/* Conteneur pour la note et les étoiles */
.vote-details {
    display: flex;
    align-items: center;
    gap: 10px;
}


/* Style commun à toutes les étoiles */
.star {
    display: inline-block;
    font-size: 20px; /* Taille des étoiles */
    color: #ccc; /* Couleur par défaut des étoiles non sélectionnées */
    cursor: pointer; /* Afficher un curseur pointer pour inciter au clic */
    transition: color 0.3s ease; /* Transition douce pour l'effet au survol */
}

/* Style pour les étoiles spécifiques */
.star-1-star:hover ~ .star,
.star-2-star:hover ~ .star,
.star-3-star:hover ~ .star,
.star-4-star:hover ~ .star,
.star-5-star:hover ~ .star {
    color: #ffc107; /* Jaune doré au survol */
}

/* Classe pour changer la couleur des étoiles spécifiques (remplies après clic ou moyenne affichée) */
.star-1-star { color: #ffcc00; }
.star-2-star { color: #ffcc33; }
.star-3-star { color: #ffcc66; }
.star-4-star { color: #ffcc99; }
.star-5-star { color: #ffccbb; }

/* Hover pour les étoiles dynamiques */
.star:hover,
.star:hover ~ .star {
    color: #ffa500; /* Couleur dorée au survol pour les étoiles interactives */
}


.inline-rating {
  display: inline-block;
  vertical-align: middle;
}

.align-vertical {
    display: flex;
    align-items: center;
    gap: 15px; 
}

.btn {
    display: inline-block;
    padding: 10px 15px;
    font-size: 1rem;
    text-decoration: none;
    color: white;
    background-color: #007bff;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #0056b3;
}

.responsive-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 1rem;
    text-align: left;
}

.responsive-table thead tr {
    background-color: #fea51a;
    color: white;
}

.responsive-table th, .responsive-table td {
    padding: 10px;
    border: 1px solid #ddd;
}

.responsive-table tbody tr:nth-child(even) {
    background-color: #f2f2f2;
}

.responsive-table tfoot tr {
    background-color: #fea51a;
    color: white;
    font-weight: bold;
}	
	   
.menu {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.menu-label {
    display: none;
}		  

#wrapper {
    margin: 0 auto;
    padding: 20px;
    max-width: 1200px;
    text-align: center;
}

/* Article Container */
.align-vertical {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre les éléments horizontalement */
    margin: 20px auto; /* Ajoute un espacement autour des articles */
}

/* Images Responsive */
.align-vertical img {
    max-width: 100%; /* Limite la largeur à celle du conteneur parent */
    height: auto; /* Maintient les proportions */
    margin-bottom: 15px; /* Ajoute un espace sous l'image */
}

/* Boutons */
.btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 1rem;
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 10px;
}

.btn:hover {
    background-color: #0056b3;
}

/* Table Responsive */
table {
    width: 100%; /* Rend les tableaux fluides */
    border-collapse: collapse;
    margin-bottom: 20px;
}

table td {
    padding: 10px;
    text-align: left;
    font-size: 1rem;
}				

.articles-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
}

.article-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.article-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.article-image img {
    width: 100%;
    height: auto;
    display: block;
}

.article-details {
    padding: 15px;
    text-align: center;
}

.article-details h2 {
    font-size: 1.2rem;
    margin: 10px 0;
}

.article-details .price {
    font-size: 1.1rem;
    font-weight: bold;
    color: #28a745;
}

.article-details .stock-status {
    color: #dc3545;
    font-size: 0.9rem;
}

.btn-add-cart {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 20px;
    margin: 10px 0;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.btn-add-cart:hover {
    background-color: #0056b3;
}

.btn-reviews {
    text-decoration: none;
    color: #17a2b8;
    font-size: 0.9rem;
}
 
@media (max-width: 768px) {
    header {
        flex-direction: column; /* Permet de réorganiser les éléments en colonne */
        padding: 20px;
    }

 	.menu {
        display: none; /* Cache le menu horizontal */
    }

    .menu-label {
        display: block; /* Affiche le mot "Menu" pour les petits écrans */
        font-size: 1.2rem;
        cursor: pointer;
        text-align: center;
        background-color: #343a40;
        color: white;
        padding: 10px;
    }

    .menu.active {
        display: flex; /* Affiche le menu en mode burger */
        flex-direction: column;
        background-color: #343a40;
    }

    .menu ul {
        flex-direction: column;
        gap: 10px;
    }

    .menu a {
        color: white;
        padding: 10px;
        text-align: center;
    }

	footer {
        padding: 15px 5px; /* Réduire les marges et le padding sur mobile */
    }

    footer p {
        font-size: 0.9rem; /* Réduire la taille de la police pour les petits écrans */
    }

    footer img {
        width: 50%; /* Réduire la largeur de l'image Stripe */
        margin: 10px 0; /* Espacement vertical pour l'image */
    }  
	
	.align-vertical {
        flex-direction: column; /* Superpose les éléments en colonne */
        align-items: center;
    }

    .align-vertical img {
        width: 90%; /* Limite l'image à 90% de l'écran */
    }

    table {
        font-size: 0.9rem; /* Réduit la taille du texte dans les tableaux */
    }

    .btn {
        width: 90%; 
        font-size: 0.9rem;		  
		margin: 10px auto;
    }
	
}