/* Importation de la police d'écriture "Montserrat" depuis Google Fonts */
@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap);

* {
    font-family: 'Montserrat'; /* Police d'écriture "Montserrat pour tous les éléments */
    margin: 0; /* Réinitialisation de la marge extérieure */
    padding: 0; /* Réinitialisation de la marge intérieure */
}
html {
    font-size: 16px; /* Initialisation de la taille de la police de base */
}

body {
    /* Définition de l'image de fond à l'aide de plusieurs dégradés linéaires */
    background-image: linear-gradient(216deg, rgba(77, 77, 77,0.05) 0%, rgba(77, 77, 77,0.05) 25%,rgba(42, 42, 42,0.05) 25%, rgba(42, 42, 42,0.05) 38%,rgba(223, 223, 223,0.05) 38%, rgba(223, 223, 223,0.05) 75%,rgba(36, 36, 36,0.05) 75%, rgba(36, 36, 36,0.05) 100%),linear-gradient(44deg, rgba(128, 128, 128,0.05) 0%, rgba(128, 128, 128,0.05) 34%,rgba(212, 212, 212,0.05) 34%, rgba(212, 212, 212,0.05) 57%,rgba(25, 25, 25,0.05) 57%, rgba(25, 25, 25,0.05) 89%,rgba(135, 135, 135,0.05) 89%, rgba(135, 135, 135,0.05) 100%),linear-gradient(241deg, rgba(55, 55, 55,0.05) 0%, rgba(55, 55, 55,0.05) 14%,rgba(209, 209, 209,0.05) 14%, rgba(209, 209, 209,0.05) 60%,rgba(245, 245, 245,0.05) 60%, rgba(245, 245, 245,0.05) 69%,rgba(164, 164, 164,0.05) 69%, rgba(164, 164, 164,0.05) 100%),linear-gradient(249deg, rgba(248, 248, 248,0.05) 0%, rgba(248, 248, 248,0.05) 32%,rgba(148, 148, 148,0.05) 32%, rgba(148, 148, 148,0.05) 35%,rgba(202, 202, 202,0.05) 35%, rgba(202, 202, 202,0.05) 51%,rgba(181, 181, 181,0.05) 51%, rgba(181, 181, 181,0.05) 100%),linear-gradient(92deg, hsl(214,0%,11%),hsl(214,0%,11%));
    background-attachment: fixed; /* Fixer l'image de fond pour qu'elle ne bouge plus pendant la navigation */
}

/* CSS pour index.php */


/* Tête de page */

header {
    display: flex; /* Utilise Flexbox pour aligner les éléments horizontalement dans l'en-tête */
    align-items: center; /* Alignement vertical au centre */
}

/* Image du logo */
header img { 
    width: 150px; /* Définit une largeur à 150px */
}


/* Style pour la barre de recherche */
.search {
    position: absolute; /* Position absolue */
    display: flex; /* Utilise flexbox pour aligner les éléments horizontalement */
    height: 15px; /* Définit une hauteur de 15px */
    padding: 10px 30px; /* Ajoute une marge intérieur de 10px en haut et 30px sur la droite */
    background: #fff; /* Couleur de fond de la barre de recherche */
    border-radius: 30px; /* Ajoute des coins arrondis */
    align-items: center; /* Aligne les éléments verticalement au centre */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); /* Ajoute une ombre à la barre de recherche */
    transform: translate(-100%, -0%);  /* Translate pour déplacer la barre de recherche hors de la vue par défaut */
    left: 93vw; /* Position de la barre de recherche */
}

/* Style lorsque l'on survole la barre de recherche */
.search:hover input {
    width: 300px; /* Définis une largeur de 300px (vers la gauche) lorsqu'on survole la barre de recherche */
}

/* Style pour la zone de saisie de la barre de recherche */
.search input {
    width: 0px; /* Définit une largeur initiale de 0 pour masquer la zone de saisie */
    outline: none; /* Supprime les bordures lorsque l'on clique dessus */
    border: none; /* Supprime les bordures */
    font-weight: 500; /* Définit l'épaisseur du texte en gras à 500 */
    transition: 0.3s; /* Ajoute une transition lors du changement de largeur */
}

/* Style pour le bouton de recherche */
.search button {
    position: absolute; /* Position absolue pour positionner le bouton */
    color: #E70002; /* Couleur du texte */
    font-size: 17px; /* Taille de la police */
    border: none; /* Supprime les bordures */
    background: transparent; /* Arrière-plan transparent */
    cursor: pointer; /* Change le curseur lorsque l'on survole */
    right: 21px; /* Position du bouton */
}

/* Style pour l'icône d'utilisateur */
.fa-solid.fa-user {
    position: absolute; /* Position absolue pour positionner l'icône */
    display: flex; /* Utilise flexbox */
    left: 85vw; /* Position de l'icon */
    margin-top: 1.7%; /* Marge supérieure */
    font-size: 28px; /* Taille de l'icône */
}

/* Style pour l'icône de panier */
.fa-solid.fa-cart-shopping {
    position: absolute; /* Position absolue pour positionner l'icône */
    display: flex; /* Utilise flexbox */
    left: 90vw; /* Position de l'icon */
    margin-top: 1.7%; /* Marge supérieure */
    font-size: 28px; /* Taille de l'icône */
}

/* Style pour l'icône de menu */
.fa-solid.fa-bars {
    position: absolute; /* Position absolue pour positionner l'icône */
    display: flex; /* Utilise flexbox */
    left: 95vw; /* Position de l'icon */
    margin-top: 1.7%; /* Marge supérieure */
    font-size: 28px; /* Taille de l'icône */
}

/* Définit le style des icônes dans les boutons d'icônes */
.icon-btn i {
    color: #E70002; /* Couleur des icônes */
    transition: transform 0.1s ease; /* Ajoute une transition fluide */
}

/* Augmente la taille des icônes au survol */
.fa-solid:hover {
    transform: scale(1.2); /* Applique une mise à l'échelle de 1.2 fois au survol */
}

/* Contenu de l'en-tête */
.header-content {
    width: 50%; /* Largeur de 50% */
    height: 50%; /* Hauteur de 50% */
}

/* Style pour la barre de recherche dans le contenu de l'en-tête */
.header-content .search {
    margin: 0px 0px 100px; /* Marge extérieure de 100px vers le bas */
}

/* Style pour les boutons d'icône dans le contenu de l'en-tête */
.header-content .icon-btn {
    padding-top: 30px; /* Marge intérieure de 30px vers le haut*/
    margin-bottom: 5%; /* Marge extérieure de 5% vers le bas */
}

/* Menu déroulant */
.menu-dropleft {
    display: none; /* Masque le menu déroulant par défaut */
    position: absolute; /* Position absolue pour positionner le menu déroulant */
    top: 0; /* Position en haut */
    right: 0; /* Positionner le menu à droite */
    background-color: #fff; /* Couleur de fond */
    padding: 1% 4% 50% 0%; /* Marge intérieure */
    z-index: 100; /* Indique une priorité élever dans la profondeur de la pile */
}

/* Affiche le menu déroulant lorsque survolé */
.menu-supl:hover .menu-dropleft {
    display: block;
}

/* Style pour chaque élément de menu déroulant */
.menu-dropleft li {
    list-style-type: none; /* Supprime les puces de liste */
    margin: 0px 0px 5px 10px; /* Marge extérieure */
    position: relative; /* Position relative pour les sous-menus */
}

/* Change la couleur de fond et ajoute un bord arrondi lorsqu'un élément du menu est survolé */
.menu-dropleft li:hover {
    background-color: #A4A8A7; /* Changement de couleur de fond au survol */
    border-radius: 5px; /* Ajout d'un bord arrondi */
}

/* Style pour chaque lien dans le menu déroulant */
.menu-dropleft li a {
    color: black; /* Couleur du texte */
    text-decoration: none; /* Supprime l'effet de soulignement */
    font-size: 17px; /* Taille de la police */
    display: block; /* Afficher les liens en tant que blocs pour qu'ils occupent toute la largeur du li */
    padding: 10px; /* Ajouter un espace autour du texte pour que le lien soit cliquable sur toute la largeur */
}

/* Style pour les boutons dans le menu déroulant */
.menu-dropleft button {
    color: black; /* Style pour les boutons dans le menu déroulant */
    font-size: 17px; /* Taille de la police */
    padding: 10px; /* Ajoute une marge intérieure */
    border: none; /* Supprime les bordures */
    background: none; /* Supprime l'arrière-plan */
}

/* Style pour le nom d'utilisateur */
.user-name {
    position: absolute; /* Position absolue pour positionner le nom d'utilisateur */
    color: #fff;  /* Couleur du texte */
    margin-top: 2%; /* Marge supérieure */
    right: calc(14% + 10px); /* Positionné à droite de l'icône de connexion avec un espace de 10px */
}

/* Page de bienvenue (landing page) */

/* Style pour les images dans la section de la page de bienvenue */
.landing-page img {
    background-size: cover; /* Redimensionne l'image pour couvrir toute la zone */
    width: 100%; /* Largeur de l'image à 100% de la largeur du conteneur */
    height: auto; /* Hauteur automatique pour maintenir le rapport largeur/hauteur */
}

/* Style pour les images dans la section des meilleurs ventes */
.meilleurs_ventes img {
    border-radius: 15px; /* Ajoute une bordure de 15px pour arrondir les coins de l'image */
}

/* Menu de navigation */

/* Style de la barre de menu principale */
.menu {
    display: flex; /* Utilise flexbox pour organiser les éléments horizontalement */
    width: auto; /* Largeur automatique */
    height: 50px; /* Hauteur de la barre de menu */
    margin-left: 50px; /* Marge à gauche de 50px */
    background-color: #fff; /* Couleur de fond blanche */
    border-radius: 5px; /* Coins arrondis */
    border: 1.5px solid #CA1C1E; /* Bordure solide de couleur */
}

/* Style de la liste non ordonnée à l'intérieur de la barre de menu */
.menu > ul {
    display: flex; /* Utilise flexbox pour organiser les éléments horizontalement */
    list-style: none; /* Supprime les puces de liste */
    align-items: center; /* Alignement vertical au centre */
}

/* Style des liens dans la barre de menu */
.menu li a {
    text-decoration: none; /* Supprime l'effet de soulignement */
    color: #000; /* Couleur du texte noire */
    padding: 16px 20px; /* Marge intérieure (haut et bas) de 16px, Marge intérieure (gauche et droite) de 20px */
    transition: 0,1s ease; /* Effet de transition de 0.1 seconde */
    position: relative; /* Position relative */
}

/* Style des liens au survol dans la barre de menu */
.menu li a:hover {
    background-color: #A4A8A7; /* Couleur de fond au survol */
    border-radius: 5px; /* Coins arrondis */
    transform: scale(1.05); /* Effet d'échelle légèrement agrandie au survol */
}

/* Style de la liste déroulante du menu */
.menu-deroulant {
    list-style: none; /* Supprime les puces de liste */
    display: none; /* Cache la liste déroulante */
    position: absolute; /* Position absolue par rapport au parent */
    background-color: #fff; /* Couleur de fond blanche */
    border-radius: 5px; /* Coins arrondis */
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 1); /* Ombre */
    margin-top: 2vh; /* Marge extérieure en haut */
    width: auto; /* Largeur automatique */
    padding: 5px 5px; /* Marge intérieure (haut et bas) de 5px, marge intérieur (gauche et droite) de 5px */
    column-count: 3; /* Nombre de colonnes */
    column-gap: 20px; /* Espacement entre les colonnes */
}

/* Style des éléments de la liste dans la liste déroulante */
.menu-deroulant li {
    padding-top: 5px; /* Marge intérieure en haut de 5px */
    padding-bottom: 5px; /* Marge intérieure en bas de 5px */
    text-align: left; /* Alignement du texte à gauche */
    break-inside: avoid; /* Empêche les sauts de colonne à l'intérieur de l'élément */
}

/* Style des liens dans la liste déroulante */
.menu-deroulant li a {
    display: block; /* Affiche les liens en tant que blocs */
    padding: 5px; /* Marge intérieure de 5px */
    transition: 0.1s ease; /* Effet de transition de 0.1 seconde */
    white-space: nowrap; /* Empêche le texte de passer à la ligne */
}

/* Style de survol des liens dans la liste déroulante */
.menu-deroulant li a:hover {
    background: #A4A8A7; /* Couleur de fond au survol */
    border-radius: 3px; /* Coins arrondis */
}

/* Style pour le conteneur des sous-menus de navigation */
.sous-nav {
    padding-top: 20px; /* Marge intérieure en haut de 20px */
    padding-bottom: 20px;/* Marge intérieure en bas de 20px */
}

/* Style pour afficher la liste déroulante au survol de la barre de menu principale */
.sous-nav:hover .menu-deroulant{
    display: block; /* Affiche la liste déroulante */
    min-height: 100px; /* Hauteur minimale de la liste déroulante */
}

/* Meilleur Ventes */

/* Style pour l'en-tête "Meilleur Ventes" */
.meilleurs_ventes h2 {
    color: #fff; /* Couleur du texte en blanc */
    font-size: 30px; /* Taille de la police de 30 pixels */
    font-weight: 400; 
    margin-left: 2%; /* Marge extérieure à gauche de 2% */
}

/* Style pour la section "Meilleur Ventes" */
.meilleurs_ventes {
    display: flex; /* Utilise flexbox pour organiser les éléments */
    justify-content: center; /* Centre les éléments horizontalement */
}

.meilleurs_ventes img {
    width: 98%;
    height: auto;
    margin-top: 2vh;
    margin-bottom: 2vh;
}

/* Nos meilleurs figurine */

.title {
    color: #fff;
    font-size: 31px;
    font-weight: 500;
    margin-left: 0.5%;
}

.limite_car {
    max-width: 400px; /* Définissez la largeur maximale des titres */
    white-space: nowrap; /* Empêchez le texte de passer à la ligne */
    overflow: hidden; /* Masquez le texte dépassant la largeur */
    text-overflow: ellipsis; /* Ajoutez des points de suspension (...) pour indiquer que le texte est coupé */
}


[class^="produit_"] {
    display: inline-block;
    margin: 10px;
    width: calc(25% - 20px); /* Pour 4 cases par ligne avec marges */
    background-color: #fff;
    padding: 10px;
    box-sizing: border-box; /* Pour inclure les bordures et les rembourrages dans la largeur */
    text-align: center; /* Pour centrer le contenu */
}

[class^="produit_"] img {
    width: 100%;
    height: auto; /* JSP */
}

[class^="produit-bis_"] h3 {
    color: #000;
}

[class^="produit-bis_"] p {
    color: #000;
}

/* CSS pour connexion.php */

.separator {
    border-top: 1px solid #fff; /* Couleur et épaisseur de la barre */
    margin-top: 20px; /* Espacement par rapport au formulaire */
    width: 100%;
}

.inscription-text {
    color: #fff; /* Couleur du texte */
    text-align: center; /* Centrage du texte */
    margin-top: 20px; /* Espacement par rapport à la barre horizontale */
    width: auto;
}

.inscription-text a {
    background-color: #CA1C1E;
    color: #fff;
    text-decoration: none; 
    border-radius: 5px;
    padding: 10px;
}

.inscription-text a:hover {
    background-color: #A20A0B;
}


/* CSS pour inscription.php */

.inscription-body {
    display: flex;
    justify-content: center; /* Centrer horizontalement */
    align-items: center; /* Centrer verticalement */
    height: 100vh; /* Hauteur égale à la hauteur de la fenêtre */
}

.inscription-body form {
    background-color: #fff; /* Couleur de fond de la boîte */
    width: 300px; /* Largeur de la boîte */
    padding: 20px; /* Espacement intérieur */
    border-radius: 10px; /* Coins arrondis */
}

.inscription-body label {
    display: block; /* Affichage en bloc pour les étiquettes */
    margin-bottom: 8px; /* Espacement entre les étiquettes et les champs */
}

.inscription-body input[type="text"],
.inscription-body input[type="password"] {
    width: 100%; /* Largeur égale à 100% moins le remplissage */
    padding: 10px; /* Espacement intérieur */
    margin-bottom: 10px; /* Espacement entre les champs */
    border: 1px solid #000; /* Bordure grise */
    border-radius: 5px; /* Coins arrondis */
    box-sizing: border-box; /* Inclure la bordure dans la largeur */
}

.inscription-body input[type="submit"] {
    width: 100%; /* Bouton de largeur pleine */
    padding: 10px; /* Espacement intérieur */
    background-color: #CA1C1E; /* Couleur de fond bleue */
    color: #fff; /* Couleur du texte blanc */
    border: none; /* Pas de bordure */
    border-radius: 5px; /* Coins arrondis */
    cursor: pointer; /* Curseur de pointeur au survol */
}

.inscription-body input[type="submit"]:hover {
    background-color: #A20A0B; /* Couleur de fond rouge plus foncée au survol */
}

.inscription-header {
    display: flex;
    align-items: center;
}

.inscription-header img {
    width: 50%;
    margin-right: 20px;
}

/* CheckBox */

input[type=checkbox] + label {
    display: block;
    margin: 0.2em;
    cursor: pointer;
    padding: 0.2em;
}

input[type=checkbox] {
    display: none;
}

input[type=checkbox] + label:before {
    content:"\2714";
    border: 0.1em solid #000;
    border-radius: 0.2em;
    display: inline-block;
    width: 1em;
    height: 1em;
    padding-left: 0.2em;
    padding-bottom: 0.3em;
    margin-right: 0.3em;
    vertical-align: bottom;
    color: transparent;
    transition: 0.2s;
}

input[type=checkbox] + label:active:before {
    transform: scale(0);
}

input[type=checkbox]:checked + label:before {
    background-color: #CA1C1E;
    border-color: #CA1C1E;
    color: #fff;
}

/* Erreur */
#erreur {
    padding-top: 5%;
    text-align: center;
    font-weight: bold;
}

/* CSS pour Panier.php */

.Panier,
.Souhait,
.Total   {
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid #CA1C1E;
}

.Panier,
.Souhait {
    width: 60%; /* Largeur fixe pour le panier */
    padding: 10px;
    margin: 2% 0% 0% 3%;
    width: calc(60% - 10px); /* Utilisation de 50% de la largeur de la page moins la marge */
    float: left; /* Faire flotter à gauche */
}

.Total {
    width: 20%; /* Largeur fixe pour le total */
    float: right; /* Faire flotter à droite */
    margin: 2% 10% 0% 0%;
}

.Souhait {
    margin-bottom: 470px;
}

.Panier img,
.Souhait img {
    width: 90px; /* Définissez la largeur souhaitée */
    height: auto; /* Maintenez le rapport hauteur/largeur */
}

.souligne {
    text-decoration: underline; /* Souligner les titres h3 avec la classe 'souligne' */
    margin-bottom: 15px;
}

.container-total {
    display: flex;
    align-items: center; /* Centrer verticalement les éléments */
    padding: 10px;
}

.total-title {
    margin-right: 10px; /* Marge à droite pour espacer le titre du prix */
    text-decoration: underline; /* Souligner les titres h3 avec la classe 'souligne' */   
}

.Panier button,
.Souhait button {
    background-color: transparent; /* Fond transparent pour les boutons dans les sections Panier, Souhait et Total */
    border: none; /* Suppression de la bordure */
    display: block;
    color: #CA1C1E; /* Couleur du texte */
    font-size: 17px; /* Taille de la police */
    margin: 10px 0px 10px 15px;
}

.Panier button:hover,
.Souhait button:hover,
.Total button:hover {
    cursor: pointer; /* Curseur de la souris en pointer au survol */
}

.fig-separator {
    border-top: 1px solid #000; /* Couleur et épaisseur de la barre */
}

.Panier button[name="lienretour"] {
    margin-left: 12px; /* Ajouter une marge à gauche pour espacer l'icône du texte */
}

.Souhait button[name="lienretour1"] {
    margin-left: 12px; /* Ajouter une marge à gauche pour espacer l'icône du texte */
}

.Souhait button[name="deplacer"] {
    margin-left: 12px; /* Ajouter une marge à gauche pour espacer l'icône du texte */
}

.commande {
    background-color: #CA1C1E;
    color: #fff;
    border: 1px solid #fff;
    padding: 8px 16px;
    border-radius: 5px;
    box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    margin: 18% 0% 10% 26%;
}

.commande:hover {
    background-color: #A20A0B;
}

/* CSS pour Personnage */

.titre h3 {
    display: inline-block;
    background-color: #fff;
    border: 1.5px solid #CA1C1E;
    padding: 10px 10px;
    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
    margin: 1% auto 1% 2%;
    border-radius: 5px;
}

.image {
    display: flex;
    flex-direction: column;
    margin: 1% 0% 1% 7%;
}

.Image_Principale img {
    width: 100%; 
    max-width: 400px;
    border: none;
}

.Image_Secondaire {
    display: flex;
    justify-content: center; /* Centrer horizontalement les images secondaires */
    margin-top: 10px;
    margin-right: 45px;
}

.img-button {
    margin: 0 3px; /* Espace autour des boutons d'image */
}

.Image_Secondaire button {
    border: none;
    background: none;
    margin-right: 5px; /* Ajout de la marge à droite */
}

.Image_Secondaire button img {
    width: 93px; /* Taille des images secondaires */
    height: auto;
}

.container {
    display: flex;
    align-items: flex-start; /* Alignement vertical en haut */
    position: relative;
}

.caracteristiques {
    background-color: #fff;
    border: 1.5px solid #CA1C1E;
    padding: 25px 40px;
    border-radius: 5px;
    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
    width: 40%;
    margin: 2% 0% 0% 8%;
    padding-right: 30%;
}

.caracteristiques-header {
    display: flex;
    align-items: center; /* Aligner les éléments verticalement */
    margin-bottom: 20px; /* Ajouter un espacement sous l'en-tête */
}

.caracteristiques-header h3 {
    margin-right: 20px; /* Ajouter de l'espace à droite du titre */
    text-decoration: underline;
}

.admin_icon {
    background-color: transparent;
    border: none;
    color: #CA1C1E;
    font-size: 17px;
    cursor: pointer;
}

.caracteristiques li {
    list-style-type: none;
    margin-bottom: 12px; /* Ajouter un espacement entre chaque élément de la liste */
}

.description {
    background-color: #fff;
    border: 1.5px solid #CA1C1E;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
    width: 90%;
    margin: 1% 0% 0% 3%;
}

.description h3 {
    margin-bottom: 20px;
    text-decoration: underline;
}

.all-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.img-container {
    flex: 1;
    padding-left: 20px; /* Ajoutez un peu d'espace à droite des images */
    padding-right: 50px;
}

.caracteristique-container {
    flex: 2;
    display: flex;
    flex-direction: column;
}

.bouton-container {
    display: flex;
    justify-content: space-between;
    width: 65%; /* Réduisez la largeur pour centrer les boutons */
    margin: 30px auto; /* Ajoutez une marge en haut et en bas et centrez horizontalement */
    margin-left: 13%;
}

.ajouter-panier, .liste-souhaits {
    background-color: #CA1C1E;
    color: #fff;
    border: 1px solid #fff;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.5);
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    flex: 1; /* Les boutons prendront la même largeur */
}

.signaler {
    background-color: #CA1C1E;
    color: #fff;
    border: 1px solid #fff;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.5);
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    margin-left: 38.5%;
    margin-bottom: 30px;
}

.ajouter-panier:hover {
    background-color: #A20A0B;
}

.liste-souhaits:hover {
    background-color: #A20A0B;
} 

.signaler:hover {
    background-color: #A20A0B;
}

/* Commentaire */

.com-text textarea {
    width: calc(100% - 20px); /* Ajustement de la largeur du textarea */
    padding: 20px;
    border: 1px solid #CA1C1E;
    border-radius: 5px;
    margin-bottom: 10px;
    box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.5);
    width: 90%;
    margin: 1% 0% 0% 3%;
}

.com-text button {
    background-color: #CA1C1E;
    color: #fff;
    border: 1px solid #fff;
    padding: 8px 16px;
    border-radius: 5px;
    box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    margin-left: 3%;
    margin-top: 2px;
}

.com-text button:hover {
    background-color: #A20A0B;
}

.commentaires {
    background-color: #fff;
    border: 1.5px solid #CA1C1E;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
    width: 90%;
    margin: 1% 0% 0% 3%;
}

.commentaires h3 {
    margin-bottom: 20px;
    text-decoration: underline;
}

.commentaires ul {
    list-style-type: none; /* Supprime les puces de la liste */
    padding: 0; /* Supprime le padding par défaut de la liste */
    margin: 0; /* Supprime la marge par défaut de la liste */
}

.admin_icon_com {
    background-color: transparent;
    border: none;
    color: #CA1C1E;
    font-size: 17px;
    cursor: pointer;
    margin-left: 10px;
    align-items: center;
}

.commentaires li {
    margin-bottom: 15px; /* Augmentez l'espacement entre chaque commentaire */
}

/* popup */

#popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 98;
    display: none;
}

#popup-overlay.open {
    display: block !important;
}

.popup-content {
    max-width: 600px;
    width: 100%;
    padding: 30px; 
    box-sizing: border-box;
    background: #2A2E2D;
    color: #fff;
    position: absolute;
    border-radius: 5px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.popup-exit {
    position: absolute;
    top: -10px;
    right: -10px;
    text-decoration: none;
    color: #fff;
    background: #E70002;
    padding: 5px 10px;
    border-radius: 5px;
}

/* CSS pour profile.php */

.info,
.historique {
    margin: 30px auto;
    padding: 20px;
    width: 60%;
    background-color: #fff;
    border: 2px solid #CA1C1E;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}

.historique {
    margin-bottom: 260px;
}

.info h2 {
    text-decoration: underline;
    text-align: center;
    margin-bottom: 20px;
}

.info p {
    margin: 10px;
}

.historique h2 {
    text-decoration: underline;
    text-align: center;
    margin-bottom: 20px;
}

.historique img {
    width: 90px; /* Définissez la largeur souhaitée */
    height: auto; /* Maintenez le rapport hauteur/largeur */
}

.fig-separator {
    border-top: 1px solid #000; /* Couleur et épaisseur de la barre */
}

/* CSS pour vendre.php */

.container_vendre {
    padding-bottom: 10px;
}

.white_souligne {
    color: white;
    text-decoration: underline;
    margin: 0% 0% 2% 2%;
}

.container_vendre label {
    color: white;
    font-style: italic;
    font-weight: bold;
    margin-left: 3%;
}

.container_vendre input,textarea {
    width: 90%;
    padding: 15px;
    margin: 0% 0% 2% 3%;
    border: 1px solid #CA1C1E;
    border-radius: 5px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

#publier-btn {
    background-color: #CA1C1E;
    color: white;
    border: 2px solid white;
    border-radius: 5px;
    padding: 10px 30px;
    display: block;
    margin: auto; /* Centre le bouton horizontalement */
    margin-top: 20px; /* Ajoute un espace au-dessus du bouton */
    cursor: pointer;
    margin-bottom: 40px;
}

#publier-btn:hover {
    background-color: #A20A0B;
}

/* CSS pour profile_vendeur.php */

/* Style des liens */
.vendeur-liste a {
    color: black; /* Couleur du texte en noir */
    text-decoration: none; /* Pas de soulignement */
}

/* Style des conteneurs pour les pseudos des vendeurs */
.vendeur {
    background-color: #fff; /* Fond blanc */
    border: 1px solid #CA1C1E; /* Bordure rouge */
    border-radius: 5px; /* Coins arrondis */
    padding: 10px; /* Espacement intérieur */
    margin: 12px; /* Marge entre les éléments */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Ombre */
    font-size: 18px; /* Taille de police agrandie */
    text-align: center; /* Centrage du texte */
    min-width: 150px; /* Largeur minimale pour éviter la réduction excessive */
}

.vendeur:hover {
    background-color: #A4A8A7;
}

/* Réorganisation des conteneurs pour les pseudos */
.vendor:nth-child(6n+1) {
    clear: left; /* Retour à la ligne toutes les 6 div */
}

/* Conteneur pour la liste des vendeurs */
.vendeur-liste {
    width: 80%; /* Largeur définie */
    margin: 0 auto; /* Centré horizontalement */
    display: flex; /* Utilisation de flexbox */
    flex-wrap: wrap; /* Enveloppement des éléments sur plusieurs lignes */
    justify-content: center; /* Alignement horizontal au centre */
    margin-bottom: 510px;
}

/* CSS pour anime.php */

.margin_anime {
    margin-bottom: 220px;
}

.Erreur_Recherche {
    background-color: #fff;
    padding: 5px 10px; /* Petit padding autour du texte */
    border-radius: 10px; /* Bords arrondis */
    border: 1px solid #CA1C1E; /* Bordure rouge */
    margin-top: 170px;
    margin-bottom: 200px;
    display: inline-block; /* Affichage en ligne */
}

.erreur-container {
    text-align: center;
    margin-top: 50px;
}

/* CSS pour profile_public.php */

/* Style pour le titre "Pseudo" */
.profile_title {
    font-weight: bold; /* Texte en gras */
    text-decoration: underline; /* Soulignement */
}

/* Style pour le cadre du pseudo et le titre */
.profile_pseudo_container {
    display: flex; /* Utilisation de flexbox */
    align-items: center; /* Alignement vertical au centre */
    background-color: #fff; /* Fond blanc */
    border: 1px solid #CA1C1E; /* Bordure rouge */
    border-radius: 5px; /* Coins arrondis */
    padding: 10px; /* Espacement intérieur */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Ombre */
    margin-bottom: 20px; /* Marge en bas pour séparer des figurines */
    margin-left: 10px;
    width: fit-content; /* Adapter la largeur au contenu */
}

/* Style pour le pseudo */
.profile_pseudo {
    margin-left: 8px; /* Espace à gauche */
}

/* Ajout de margin en bas des figurines */
.profile_container {
    margin-bottom: 150px; /* Marge en bas */
}

.Signalement_Vendeur {
    background-color: transparent;
    border: none;
    color: #CA1C1E;
    font-size: 17px;
    cursor: pointer;
    margin-left: 10px;
    align-items: center;
}

/* CSS pour administrateur.php */

.Signalement,
.Signalement_utilisateur {
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid #CA1C1E;
    width: 60%;
    padding: 10px;
    margin: 2% 0% 0% 3%;
}

.Signalement_utilisateur {
    margin-bottom: 500px;
}

.Signalement h3 {
    text-decoration: underline;
    margin-bottom: 15px;
}

.Signalement_utilisateur h3 {
    text-decoration: underline;
    margin-bottom: 15px;
}

.Signalement img,
.Signalement_utilisateur img {
    width: 90px;
    height: auto;
}

.Signalement button,
.Signalement_utilisateur button {
    background-color: transparent;
    border: none;
    display: block;
    color: #CA1C1E;
    font-size: 17px;
    margin: 10px 0px 10px 15px;
}

.Signalement button:hover,
.Signalement_utilisateur button:hover {
    cursor: pointer;
}

.fig-separator {
    border-top: 1px solid #000;
}

.Signalement button[name="lienretour"],
.Signalement_utilisateur button[name="lienretour1"] {
    margin-left: 12px;
}

.align_icons {
    display: flex;
    align-items: center; /* Aligner les éléments verticalement */
}