/* Style du bandeau */
        .bandeau {
        	    display: flex;
        	
            background-color: red; /* Couleur de fond rouge */
            color: white;         /* Texte en blanc */
            overflow: hidden;     /* Cache les débordements */
            position: relative;   /* Position relative pour l'animation */
            font-size: 1.2rem;      /* Taille de texte relative */
        }

        /* Style pour le texte défilant */
.message-defilant {
    display: inline-block;
    white-space: nowrap;
    animation: defilement 10s linear infinite;
}

        /* Animation */
        @keyframes defilement {
            from {
                transform: translateX(300%); /* Commence en dehors à droite */
            }
            to {
                transform: translateX(-100%); /* Termine en dehors à gauche */
            }
        }

        /* Media query pour les écrans plus petits */
        @media (max-width: 768px) {
            .bandeau {
                font-size: 0.9rem; /* Réduction de la taille du texte */
                padding: 8px 0;    /* Moins d'espacement vertical */
            }
        }

        @media (max-width: 480px) {
            .bandeau {
                font-size: 0.8rem; /* Texte encore plus petit pour les petits écrans */
                padding: 6px 0;    /* Réduction supplémentaire de l'espacement */
            }
        }
        /* Ajuster le contenu principal pour qu'il démarre après le bandeau */
		.container {
    	margin-top: 20px; /* Ajuste en fonction de la hauteur du bandeau */
	}
/* Fin Style du bandeau */
        

/* debut Style image index */
.row {
  display: flex;
    width: 100%; /* Remplir tout l'espace */
    justify-content: center; /* Centrer les colonnes dans la ligne */
	min-height: 400px; /* Hauteur minimale pour s'assurer que les colonnes prennent de l'espace vertical */
    gap: 20px; /* Espacement réduit entre les colonnes */
              
      
}
.column {
    flex: 1 1 50%; /* Chaque colonne prend 50% de l'espace sur un grand écran */
  padding: 20px;
        width: 100%; /* Remplir tout l'espace */
  
}


.image-gallery {
    flex: 1 1 50%; /* Prend la moitié de l'espace en largeur */
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 20px; /* Ajoute un espace à droite de la galerie d'images */
}

.main-image {
    width: 100%; /* Utilise toute la largeur du conteneur */
    max-width: 400px; /* Taille maximale de l'image */
    height: auto;
    object-fit: contain; /* l'image s'ajuste à la taille du conteneur sans être déformée, tout en conservant ses proportions*/
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
}

.thumbnail-images {
    display: flex;
    gap: 5px; /* Espacement entre les miniatures */
    margin-top: 10px;
}

.thumbnail {
    width: 60px; /* Taille ajustée des miniatures */
    height: 60px;
    object-fit: cover;
    cursor: pointer;
    border-radius: 8px;
    border: 2px solid transparent;
    transition: border-color 0.3s;
}

.thumbnail:hover {
    border-color: #007bff; /* Bordure bleue au survol */
}

.product-details {
    flex: 1 1 40%; /* Prend environ 40% de l'espace en largeur */
    max-width: 400px; /* Limiter la largeur des détails */
    text-align: center;
    margin-top: 20px;
}

.description {
    font-size: 1rem;
    color: #333;
    margin: 10px 0;
}

label {
    font-weight: bold;
    display: inline-block;
    margin: 10px 0;
}

input[type="number"] {
    width: 60px;
    padding: 5px;
    font-size: 1rem;
    text-align: center;
    border: 2px solid #ccc;
    border-radius: 4px;
}

.product-info {
    margin-top: 20px;
    text-align: center;
}

#content img {
    max-width: 100%; /* Limite la largeur des images */
    height: auto;
    max-height: 300px; /* Limite la hauteur des images */
}

/* Styles responsives : Sur les petits écrans, on passe à une disposition verticale */
@media (max-width: 768px) {
    .product-page {
        flex-direction: column; /* Disposition en colonne sur petit écran */
        align-items: center;
        padding: 10px; /* Réduit le padding pour les petits écrans */
    }

    .image-gallery, .product-details {
        flex: 1 1 100%; /* Les deux sections prennent toute la largeur */
        max-width: 100%; /* Pas de largeur maximale */
        margin: 0; /* Pas de marge sur les petites tailles */
    }

    .thumbnail {
        width: 80px; /* Réduit la taille des miniatures sur mobile */
        height: 80px;
    }
}

/* Ajuster le contenu principal pour qu'il démarre après le bandeau */
.container {
    margin-top: 20px; /* Ajuste en fonction de la hauteur du bandeau */
}



/* Style du bandeau rouge */
.redbanner {
    background-color: red; /* Couleur du fond du bandeau */
    color: white; /* Couleur du texte */
    padding: 10px; /* Espacement intérieur */
    text-align: center; /* Centrer le texte */
    font-size: 18px; /* Taille du texte */
    margin-bottom: 20px; /* Espace entre le bandeau et les détails du produit */
}

/* Container to center and add padding */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        /* Row styling for responsive layout */
        .row {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }

        /* Column styling to adjust width for different screen sizes */
        .column {
            flex: 1 1 100%; /* Full width by default */
            max-width: 100%;
        }

        /* For larger screens, show columns side by side */
        @media (min-width: 600px) {
            .column {
                flex: 1 1 calc(50% - 20px); /* Two columns on tablets */
                max-width: calc(50% - 20px);
            }
        }

        @media (min-width: 900px) {
            .column {
                flex: 1 1 calc(25% - 20px); /* Four columns on larger screens */
                max-width: calc(25% - 20px);
            }
        }

        /* Make images responsive */
        img {
            width: 100%;
            height: auto; /* Maintains aspect ratio */
            max-width: 300px; /* Limits maximum width */
        }

        /* Add styling for content */
        .content {
            text-align: center;
            padding: 10px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
        }
        
        /* Style du conteneur du décompte */
        .countdown {
            font-size: 3rem; /* Taille du texte ajustée */
            font-weight: bold;
            color: #333;
            padding: 20px 30px;
            background-color: #ffcc00;
            border-radius: 15px;
            border: 5px solid #ff9900;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s ease-in-out, background-color 0.3s ease;
            text-align: center;
            width: fit-content;
            margin: 20px auto;
            position: fixed; /* Positionnement absolu */
            top: 40px;  /* À 20px du haut */
            right: 20px; /* À 20px de la droite */
        }

        /* Effet quand le décompte est terminé */
        .countdown.end {
            background-color: #28a745;
            color: white;
            border-color: #218838;
        }

        @keyframes bounce {
            0% { transform: scale(1); }
            50% { transform: scale(1.2); }
            100% { transform: scale(1); }
        }
		.userDashboard {
            position: fixed; /* Positionnement absolu */
		}

/* Fin Style du image gallery */
        
/* Fin Style du image gallery */

/* nouveau css */
/* Conteneur général */
.custom-product-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    margin: 40px auto;
    max-width: 1200px;
    padding: 20px;
}

/* Colonne Galerie */
.custom-product-gallery {
    flex: 1 1 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Image principale */
.main-image {
    width: 100%;
    max-width: 450px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.4s ease;
    object-fit: contain;
}

/* Zoom au survol */
.main-image:hover {
    transform: scale(1.05);
}

/* Miniatures */
.thumbnails {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.thumbnail {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid #ddd;
    cursor: pointer;
    transition: border-color 0.3s;
}

.thumbnail:hover {
    border-color: #007bff;
}

/* Colonne Info Produit */
.custom-product-info {
    flex: 1 1 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

/* Bannière Rouge */
.redbanner {
    background-color: red;
    color: white;
    padding: 10px;
    margin-bottom: 20px;
    font-size: 1.2rem;
    border-radius: 8px;
}

/* Titre Produit */
.product-title {
    font-size: 2rem;
    margin-bottom: 10px;
}

/* Description Produit */
.product-description {
    font-size: 1rem;
    color: #555;
    margin-bottom: 20px;
}

/* Formulaire */
.product-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.product-form input[type="number"] {
    width: 80px;
    padding: 8px;
    font-size: 1rem;
    border: 2px solid #ccc;
    border-radius: 6px;
    text-align: center;
}

.add-to-cart {
    padding: 10px 20px;
    background-color: #ff0000;
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

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

/* Quantité totale */
.quantity-info {
    margin-top: 20px;
    font-weight: bold;
    font-size: 1.1rem;
}

/* Bouton Retour */
.back-home {
    margin-top: 30px;
    padding: 10px 20px;
    background-color: #ff0000;
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

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

/* Responsive */
@media (max-width: 768px) {
    .custom-product-container {
        flex-direction: column;
        align-items: center;
    }

    .custom-product-gallery, .custom-product-info {
        flex: 1 1 100%;
        max-width: 90%;
    }
}

/* fin css */