body {
	font-family: Georgia, serif;
	font-size: 14px;
	letter-spacing: 2px;
	word-spacing: 2px;
	color: #000000;
	font-weight: normal;
	text-decoration: none;
	font-style: normal;
	font-variant: normal;
	text-transform: none;
    background-color: #fef9f3;
    margin: 0;
    padding: 0;
}

h1 {
	font-size: 20px; /* Taille du titre */
	color: #03aebe; /* Couleur du titre */

}
h3 {
	font-size: 15px; /* Taille du titre */
	color: #ff4f02; /* Couleur du titre */
	
}
a {
	color: #760076;
	font-weight: bold;
	text-decoration: none
}
a:hover {
	text-decoration: underline; /* Ajoute le soulignement au survol */
}
table {
	font-family: arial, sans-serif;
	border-collapse: collapse;
	width: 100%;
}
td,
th {
	border: 0px;
	text-align: left;
	padding: 8px;
}
tr:nth-child(even) {
	background-color: #e5edfc;
}

div {
	float: left;
}

div#accueil {
	width: 1068px;
    display: flex; /* Utiliser flexbox pour aligner les éléments */
    flex-wrap: wrap; /* Permet aux éléments de revenir à la ligne */
    justify-content: flex-start; /* Justifie à gauche */
    clear: both; /* Évite des conflits avec les colonnes flottantes */
}

div#container {
	width: 1068px;
	margin: 15px;
    display: flex; 
}
div#colonne1 {
	float: left;
	width: 668px;
	padding: 15px;
}
div#colonne2 {
	float: right;
	width: 340px;
	padding: 15px;
	text-align: right;
}
div#colonne3 {
	float: left;
	width: 330px;
	padding: 40px;
}
:root {
    --icon-color: teal; /* Définir une variable de couleur */
	--cat-color: #FFCF03;
	--book-color: #ffd40a;
}

.fa-eye {
    color: var(--icon-color); /* Utiliser la variable de couleur */
}
.fa-pencil {
    color: var(--icon-color); /* Utiliser la variable de couleur */
}
.fa-trash {
    color: var(--icon-color); /* Utiliser la variable de couleur */
}
.fa-book-open {
    color: var(--icon-color); /* Utiliser la variable de couleur */
}
.fa-book {
    color: var(--book-color); /* Utiliser la variable de couleur */
}
.fa-pen-nib {
    color: var(--icon-color); /* Utiliser la variable de couleur */
}
.fa-cat{
    color: var(--cat-color); /* Utiliser la variable de couleur */
}
/*
.book-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Cela devrait déjà justifier à gauche 
    width: 100%; /* Ajustez selon vos besoins 
    clear: both; /* Pour s'assurer qu'il n'y a pas d'impact des colonnes flottantes 
}
*/
#book-list {
    display: flex; /* Utiliser flexbox pour aligner les éléments */
    flex-wrap: wrap; /* Permet aux éléments de revenir à la ligne */
    justify-content: flex-start; /* Justifie à gauche */
    width: 1068px; /* Prendre toute la largeur de l'élément parent */
    clear: both; /* Évite des conflits avec les colonnes flottantes */
}
.book {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    margin: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    width: 180px;
	height: 400px;
    text-align: center;
}
.grandBook {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    margin: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    width: 250px;
    text-align: center;
}
.cover {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.title {
    font-size: 1.2em;
    margin: 10px 0 5px;
}

.author {
    color: #555;
}

.container {
    display: flex; 
    justify-content: flex-start; 
    flex-wrap: wrap; 
	margin: 18px;
}

.pave {
    background-color: white; /* Couleur de fond des pavés */
    color: black; /* Couleur du texte */
    padding: 10px; /* Espacement intérieur */
    /*margin: 10px;  Espacement extérieur */
    /*flex: 0 1 30%;  Permet de définir une largeur */
    box-sizing: border-box; /* Inclure padding et margin dans la taille */
	flex-basis: 150;
}
.GrandPave {
    background-color: white; /* Couleur de fond des pavés */
    color: black; /* Couleur du texte */
    padding: 10px; /* Espacement intérieur */
    /*margin: 10px;  Espacement extérieur */
    /*flex: 0 1 30%;  Permet de définir une largeur */
    box-sizing: border-box; /* Inclure padding et margin dans la taille */
	flex-basis: 200;
}
#nuage-mots {
    width: 1048px;
    height: auto;
	padding: 10px;
    background-image: url('/Image/bckgrd_nuage.png'); /* Ajouter l'image de fond */
    background-position: top; /* Centre l'image dans l'élément */
    background-repeat: repeat-x; /* Évite la répétition de l'image */
}

    .word {
        display: inline-block;
        margin: 1px;
        padding: 0.5px 1px; /* Ajout de padding pour un meilleur espacement */
        transition: background-color 0.3s, color 0.3s; /* Transition douce */
    }

    .word a {
        text-decoration: none; /* Supprime le soulignement des liens */
        font-weight: bold; /* Met en gras */
    }

    .word:hover {
        transform: scale(1.2); /* Agrandit le mot au survol */
        color: #BD2FC6; /* Change la couleur au survol */
		background-color: #f3fea8;
    }


#bookDetail {
        display: table;
        clear: both;
}
.bookDetailLivre {
    width: 550px; 
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    margin: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	background-color: #fff0db;
	display:inline-block;
}
.bookDetailAuteurice {
    width: 460px;  
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    margin: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	background-color: #eedbff;
	min-height: 250px;
	display:inline-block;
}
.bookDetailEditeurice {
    width: 460px;  
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    margin: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	background-color: #daf2ff;
	height: 250px;
	display:inline-block;
}
.image-left {
    float: left; /* Positions the image to the left */
    margin-right: 10px; /* Adds space between the image and the text */
    width: 150px; /* You can adjust the size */
}