body {
    /*background-color: white; /* Beige */
    margin: 0; /* Supprime les marges par défaut */
    padding: 0; /* Supprime les espaces par défaut */
}

@font-face {
    font-family: 'mapolice1';
    src: url('../fonts/Cinzel-Regular.ttf') format('truetype');
    /*font-weight: normal;
    font-style: normal;*/
}

/* menu de navigation */
#navigation {
	position: fixed; /*c'était avant fixed */
	top: 0; /* Fixe le menu en haut */
	padding: 10px;
	height: 30px;
    display: flex;
    align-items: center;
	justify-content: center; /* pour centrer les liens au milieu */
	background-color: #151110; /* noir au lieu de transparent */
    z-index: 1000; /* Assure que le menu est au-dessus du contenu */
	left: 0;          /* collé à gauche */
    width: 100%;      /* pleine largeur */
	font-family: 'mapolice1', sans-serif;
}

#nav-list {
	list-style: none; /* Retire les puces de la liste */
	padding: 0;
  	margin: 0;
	display:flex;
}

/* Applique la séparation avec une ligne verticale */
#nav-list li {
  display: inline-block; /* Garde les éléments en ligne */
  position: relative; /* Nécessaire pour la ligne verticale */
  padding: 0 15px; /* Ajoute de l'espace autour des liens */
  color: white !important; /* Force la couleur */
}

/* Ajoute la ligne verticale sauf pour le premier élément */
#nav-list li:not(:first-child)::before {
  content: ""; /* Crée un pseudo-élément */
  position: absolute;
  left: 0; /* Place la ligne à gauche de l'élément */
  top: 50%; /* Centre verticalement */
  transform: translateY(-50%);
  width: 1px; /* Épaisseur de la ligne */
  height: 50%; /* Hauteur de la ligne */
  background-color: #ffc004; /* Couleur de la ligne */
}

#nav-list li a {
  color: white; /* Couleur du texte des liens */
  text-decoration: none;  /*Supprime le soulignement des liens */
}

#nav-list li a:hover {
    /*background-color: #ffc004;*/
	color:#ffc004; /* Nouvelle couleur du texte au survol */
    text-decoration: underline !important;
	text-underline-offset: 10px; /* espace entre texte et ligne */
    text-decoration-thickness: 5px; /* épaisseur de la ligne */
}
.eltmenu {
    /*font-family: 'Montserrat', sans-serif;'mapolice1', sans-serif;  'ma police hebergé*/
    /*font-weight: 600;  Correspond à Poppins-Medium */
	padding: 10px;
    /*color: white !important;*/
    /*font-size: large;*/
    /*text-decoration: none;*/
	/*background-color: #555;*/ /* Remplace #555 par la couleur désirée */
    border-radius: 0px;  /* Optionnel, pour arrondir les coins */
}
.selected {
    /*font-family: 'mapolice1', sans-serif;  'ma police hebergé*/
    /*font-weight: 600;  Correspond à Poppins-Medium */
	padding: 10px;
    color: #38b6ff !important;
    /*font-size: large;*/
    text-decoration: underline !important;
	text-underline-offset: 5px; /* espace entre texte et ligne */
    text-decoration-thickness: 5px; /* épaisseur de la ligne */
	/*background-color: #ffc004;  Remplace #555 par la couleur désirée */
    border-radius: 0px;  /* Optionnel, pour arrondir les coins */
}
.menu-icon {
    display: none; /* Par défaut, le menu hamburger est masqué */
    cursor: pointer;	/*margin-left: auto;*/	/*margin-right: 15px;*/
}
.bar { /* les traits du menu hamburger est masqué */
    width: 25px;
    height: 3px;
    background-color: #38b6ff;
    margin: 6px 0;
    transition: 0.4s;
}


/* le pied de page */
#footer {
    max-width: 100%;
	margin: 0 auto; /* Cette propriété centre un élément horizontalement lorsque sa largeur est définie ou limitée par max-width. */
	background-color: black; /* au lieu du jaune #ffc004 */
	height : auto;
    display: flex;
    align-items: center;
	justify-content : center;
	flex-direction: column;
}

.footer-content {
    /*background-color: #333;*/ /* Couleur sombre pour un bon contraste */
    padding: 10px;
    text-align: center;
}

.footer-link {
    font-size: 14px;
    color: white; /* Texte en blanc */
    margin-bottom: 10px; /* Espacement sous les éléments de contact */
	text-decoration: none;
}

.footer-copyright {
    font-size: 14px;
    
	/* Texte légèrement plus discret */
    margin-top: 10px;
}

.footer-contact {
    font-size: 20px;
    color: white; /* Texte légèrement plus discret */
    margin-top: 10px;
	font-weight: bold;
}

#whatsapp-icon {
	position: fixed;
	bottom: 30px;
	right: 20px;
	cursor: pointer;
}

#facebook-icon {
	position: fixed;
	bottom: 30px;
	right: 90px;
	cursor: pointer;
}

#instagram-icon {
	position: fixed;
	bottom: 30px;
	right: 160px;
	cursor: pointer;
}


#haut-icon {
	position: fixed;
    top: 50%;
    right: 20px; /* Ajustez cette valeur selon vos préférences */
    transform: translateY(-50%);
    z-index: 9999; /* Assurez-vous que l'icône reste au-dessus du contenu */
	/*Cela positionnera l'icône au milieu de la hauteur de l'écran (top: 50%) et à 20 pixels de la droite (right: 20px). La règle transform: translateY(-50%); permet de recentrer l'icône verticalement en fonction de sa propre hauteur. Avec ce code, l'icône devrait rester fixe au centre vertical et à droite de l'écran, peu importe le défilement vertical de la page.*/
}

/* main en général*/
main{
	margin-top: 60px; /* Ajustez la valeur selon la hauteur de votre menu */
	margin-bottom: 0px; /* était 10px"*/
}

.main-title {
    font-family: 'mapolice1', sans-serif; /* 'ma police hebergé*/
    font-size: 30px; /* Ajustez la taille du texte */
    font-weight: 400; /* Poids régulier */
    text-align: center; /* Centre le texte horizontalement */
    color: white; /* Couleur personnalisée */
	margin: 0; /* Supprime les marges par défaut */
    /*margin-top: 10px;  Espacement au-dessus */
    /*margin-bottom: 10px; Espacement en dessous */
    /*line-height: 1.2;  Ajuste l'espacement entre les lignes */
}
.sous-title {
    font-family: 'mapolice1', sans-serif; /* 'ma police hebergé*/
    font-size: 24px; /* Ajustez la taille du texte */
    font-weight: bold; /* texte en gras */
    text-align: center; /* Centre le texte horizontalement */
    color: #c40101; /* Couleur personnalisée */
    margin-top: 10px; /* Espacement au-dessus */
    margin-bottom: 10px; /* Espacement en dessous */
    line-height: 1.2; /* Ajuste l'espacement entre les lignes */
	/*cursor: pointer;  Change le pointeur en main */
}
/* Conteneur principal */
#photo-carousel {
    width: 100%; /* 80% de la largeur de la page */
    max-width: 100%; /* Largeur maximale de 1000px */
    aspect-ratio: 2; /* Définir un ratio largeur/hauteur (ici, 1000x700 donne environ 1.4) */
    margin: 20px auto; /* Centre horizontalement avec un espacement au-dessus et en dessous */
    overflow: hidden; /* Cache les parties des images en dehors de la zone visible */
    position: relative; /* Assure que les éléments à l'intérieur se positionnent correctement */
    background-color: white; /* Ajoute un fond noir pour les marges éventuelles */
	/*margin-bottom: 20px; /* Ajoute une marge en bas du carrousel pour que le contenu suivant soit visible */
}

/* ============================================================
   CAROUSEL INFINI - CSS PUR (remplace Swiper)
   Aucun JavaScript nécessaire, aucun scintillement, aucun vide
   ============================================================ */

.logo-carousel-container {
    width: 100%;
    overflow: hidden;
    padding: 10px 0;
    background-color: transparent;
    /* masque les bords pour un effet de fondu */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

/* Piste du carousel */
.carousel-track {
    display: flex;
    align-items: center;
    width: max-content; /* s'étend selon le contenu */
}

/* Animation défilement gauche (clients) */
.carousel-track-client {
    animation: scroll-left 30s linear infinite;
}

/* Animation défilement droite (fournisseurs) */
.carousel-track-fournisseur {
    animation: scroll-right 20s linear infinite;
}

/* Pause au survol (optionnel) */
.logo-carousel-container:hover .carousel-track {
    animation-play-state: paused;
}

@keyframes scroll-left {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* -50% car le HTML est dupliqué une fois */
}

@keyframes scroll-right {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

/* Chaque logo */
.carousel-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 180px;
    height: 120px;
    margin: 0 15px;
    flex-shrink: 0;
	overflow: hidden; /* ← empêche l'image de déborder hors des coins arrondis */
	border-radius: 15px;
}

.carousel-track-client .carousel-slide {
    background-color: white; /*#86d6ff si bleu ciel*/
}

.carousel-track-fournisseur .carousel-slide {
    background-color: white;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    max-width: 150px;
    max-height: 100px;
    object-fit: contain;
}

.pleinecran-image {
	width: 100%;
    height: auto;
    object-fit: cover; /* Remplit le conteneur sans déformation */
    display: block;
}
.photo-pleinecran {
    display: flex;
	width: 100%; /* 80% de la largeur de la page */
    max-width: 100%; /* Largeur maximale de 1000px */
    aspect-ratio: 2; /* Définir un ratio largeur/hauteur (ici, 1000x700 donne environ 1.4) */
    margin: 20px auto; /* Centre horizontalement avec un espacement au-dessus et en dessous */
    overflow: hidden; /* Cache les parties des images en dehors de la zone visible */
    position: relative; /* Assure que les éléments à l'intérieur se positionnent correctement */
    background-color: white; /* Ajoute un fond noir pour les marges éventuelles */
	/*margin-bottom: 20px; /* Ajoute une marge en bas du carrousel pour que le contenu suivant soit visible */
}

.image-container {
    display: flex;
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne lorsque la largeur est insuffisante */
    gap: 30px; /* Espace entre les images */
    justify-content: center; /* Centrer horizontalement */
	margin-top: 20px; /* Ajoute de l'espace en haut du bloc d'images */
	margin-bottom: 20px; /* Ajoute de l'espace en bas du bloc d'images */
	/*background-color: #f5f5dc; /* Couleur beige */
	max-width: 90%;
	flex-direction:row;

}
.image-container img {
    transition: transform 0.3s ease-in-out; /* Animation fluide */
}

.image-container img:hover {
    transform: scale(1.1); /* Zoom à 110% */
}
.image-container13 {
    flex:1;
	display: flex;
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne lorsque la largeur est insuffisante */
    gap: 30px; /* Espace entre les images */
    justify-content: center; /* Centrer horizontalement */
	margin-top: 20px; /* Ajoute de l'espace en haut du bloc d'images */
	margin-bottom: 20px; /* Ajoute de l'espace en bas du bloc d'images */
	/*background-color: #f5f5dc; /* Couleur beige */
	max-width: 33,33%;
}
.image-container13 img {
    transition: transform 0.3s ease-in-out; /* Animation fluide */
}

.image-container13 img:hover {
    transform: scale(1.1); /* Zoom à 110% */
}
.image-container12 {
    flex:1;
	display: flex;
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne lorsque la largeur est insuffisante */
    gap: 30px; /* Espace entre les images */
    justify-content: center; /* Centrer horizontalement */
	margin-top: 20px; /* Ajoute de l'espace en haut du bloc d'images */
	margin-bottom: 20px; /* Ajoute de l'espace en bas du bloc d'images */
	/*background-color: #f5f5dc; /* Couleur beige */
	max-width: 50%;
}
.image-container12 img {
    transition: transform 0.3s ease-in-out; /* Animation fluide */
}

.image-container12 img:hover {
    transform: scale(1.1); /* Zoom à 110% */
}
.video-container {
    display: flex;
    justify-content: center; /* Centrer horizontalement */
	max-width: 400px;
	width: 100%;
	aspect-ratio: 16 / 9; /* ajuste automatiquement la hauteur selon le format de la vidéo. Vous pouvez modifier cette valeur (ex: 4/3, 21/9). */
}
.contact-container {
            border: 2px solid #40B83B;
            border-radius: 8px;
            padding: 20px;
            width: fit-content;
            /*background-color: #ffe6e6;*/
			max-width: 50%;
}
#blocgeneral {
    display: flex;
    align-items: center; 
	flex-direction:column;
}
.presentation {
    font-family: 'minion-3-caption', Georgia, 'Times New Roman', Times, sans-serif;
	text-align: justify;
    margin: 5 px;
	max-width: 80%;
}
.presentationfooter {
    font-family: 'minion-3-caption', Georgia, 'Times New Roman', Times, sans-serif;
	text-align: justify;
    margin: 5 px;
	max-width: 80%;
	color: white;
}
.presentation13 {
	font-family: 'minion-3-caption', Georgia, 'Times New Roman', Times, sans-serif;
    flex:1;
	text-align: justify;
    margin: 5 px;
	max-width: 33,33%;
}
.presentation13 .special-strong {
    font-family: "Freestyle Script"; /* Remplacez 'Arial' par la police souhaitée , arizonia, allura, "sans-serif" */
    font-size: 40px;
	font-weight: bold; /* Ajustez si nécessaire */
	text-align: center;
    /*color: #D58138; /* Couleur personnalisée */
}
.presentation12 {
	font-family: 'minion-3-caption', Georgia, 'Times New Roman', Times, sans-serif;
    flex:1;
	text-align: justify;
    margin: 5 px;
	max-width: 50%;
}
.presentation23 {
	font-family: 'Luxury', sans-serif;
    flex:2;
	text-align: justify;
    margin: 5 px;
	max-width: 66,67%;
}

.fondcouleur1{
	background-color: #86d6ff; /*bleu ciel au lieu de #38b6ff bleu du logo*/
	display: flex;
    justify-content: center;
	width: 100%;
	flex-direction:column;
}
.fondcouleur3{
	background-color: #ffe082; /*bleu ciel au lieu de #38b6ff bleu du logo*/
	display: flex;
    justify-content: center;
	width: 100%;
}
.fondcouleur2{
	background-color: black; 
	display: flex;
    justify-content: center;
	width: 100%;
	padding: 10px 0;  /*Remplace les marges du h1 */
}

.sousblocH {
	display: flex;
    align-items: center;
	flex-direction:row;
	justify-content:center;
	gap: 30px;
	max-width: 90%;
}
.sousblocV {
	display: flex;
    align-items: center;
	flex-direction:column;
	justify-content:center;
	/*gap: 30px;*/
	max-width: 100%;
}
.sousblocVcarousel {
	display: flex;
    align-items: center;
	flex-direction:column;
	justify-content:center;
	/*gap: 30px;*/
	max-width: 100%;
}
.sousblocV12 {
	display: flex;
	flex-direction:column;
	justify-content:center;
	gap: 30px;
	max-width: 50%;
}
.photo{
	margin-top: 20px;
	margin-bottom: 20px;
	height: auto;
	max-width: 100%;
	border-radius: 8px;
}
.photoP{
	margin-top: 20px;
	margin-bottom: 20px;
	height: auto;
	max-height: 100px; 
	max-width: 100%;
	border-radius: 8px;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
.photoM{
	margin-top: 20px;
	margin-bottom: 20px;
	height: auto;
	max-height: 300px; 
	max-width: 100%;
	border-radius: 8px;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
.photoG{
	margin-top: 20px;
	margin-bottom: 20px;
	height: auto;
	max-height: 400px; 
	max-width: 100%;
	border-radius: 8px;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
.photo-pleinecranB {
	width: 100%;
    position: relative;
	padding-top: 40px; /* decaler l'image en dessous du menu*/
    /*z-index: 1;  L'image passe sous le menu */
}
.lignehorizontale {
    background-color: #ffc004;
    border : #ffc004;
	height: 2px;
	width: 400px;
    margin: 10px auto; /* Marge au-dessus et en dessous de la ligne */
}

/* Styles pour la carte produit */
#produits-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Espace entre les produits */
    justify-content: center; /* Centrer horizontalement */
    padding: 20px;
}
.produit {
    display: flex;
    flex-direction: column; /* Change la direction en colonne */
    margin: 20px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    max-width: 400px;
    transition: transform 0.3s ease;
}

.produit:hover {
    transform: translateY(-5px);
}

/* Styles pour l'image du produit */
.produit-image {
    width: 100%; /* L'image prend toute la largeur de la carte */
    margin-bottom: 15px; /* Ajout d'un espacement entre l'image et le texte */
}
.produit-img {
    width: 100%;
    height: auto; /* Laisse la hauteur s'ajuster automatiquement */
    max-height: 200px; /* Limite la hauteur maximale */
    object-fit: contain; /* Affiche l'image entière sans la couper */
    border-radius: 8px;
}
/* Styles pour les informations du produit */
.produit-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: 100%;
}

.produit-nom {
    font-size: 20px; /* 1.25rem -> 20px */
    font-weight: bold;
    margin-bottom: 10px;
}

.produit-description {
    font-size: 16px; /* 1rem -> 16px */
    margin-bottom: 10px;
}
.produit-id {
    font-size: 16px; /* 1rem -> 16px */
    margin-bottom: 10px;
	font-weight: bold;
}
/* Styles pour la catégorie */
.produit-categorie {
    font-size: 16px; /* 1rem -> 16px */
    font-weight: bold;
    color: #888;
    margin-top: 10px;
}
/* Styles pour le bouton Voir Plus */
.voir-plus {
    background-color: #38b6ff;
    color: black;
    border: none;
    padding: 10px 20px;
    margin-top: 10px;
    font-size: 15px;
	font-weight: bold; /* Texte en gras */
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.voir-plus:hover {
    background-color: #ffc004;
}

/*Agrandissement des données pour la fiche d'un produit*/
#produit-detail .produit-image img {
    width: 90%;
    max-width: 700px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    margin: 20px auto;
    display: block;
}

#produit-detail .produit-nom {
    font-size: 32px;
    text-align: center;
    margin-bottom: 15px;
}

#produit-detail .produit-description {
    font-size: 20px;
    text-align: center;
    max-width: 900px;
    line-height: 1.7;
    margin: 0 auto 20px;
}

#produit-detail .produit-categorie {
    font-size: 18px;
    font-weight: bold;
    color: #666;
    text-align: center;
    margin-bottom: 20px;
}

#produit-detail .voir-plus {
    background-color: #38b6ff;
    color: black;
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#produit-detail .voir-plus:hover {
    background-color: #ffc004;
}









/* Styles pour les écrans plus étroits (smartphones) */
@media only screen and (max-width: 768px) {
	#header, #navigation, #blocgeneral, .sousblocH, .sousblocH-footer, #footer, #nav-list {
        flex-direction: column;
    }
    
	.menu-icon {
        display: block; /* Affiche le menu hamburger en mode mobile */
		/*z-index: 1000; *//* Assignez un z-index bas pour la zone */
    }	
	#navigation {
        max-width: 100%;
		width: auto; /* Ajustez cette propriété pour annuler la largeur à 100% sur mobile */
		position: fixed;
		top: 20%; /* Position verticale au milieu */
        left: 0; /* Collé au bord gauche */
		border-color: rgba(0, 0, 0, 0.8); /* Noir avec 80% de transparence */
    	background-color:transparent; /* le fond sera dans nav-list */ /* Noir avec 80% de transparence */
		justify-content: center;
		z-index: 1000;
		transform: translateX(0%);
		border-radius: 10px; /* Ajoute des coins arrondis */
    }
    
	
	#nav-list li a {
   		color: white; 
		text-decoration: none !important;
	}
	
	#nav-list li a:hover {
  		color:#ffc004; /* Nouvelle couleur du texte au survol */
		text-decoration: none !important;
	}
	
	#nav-list li:not(:first-child)::before {
	  width: 0px; /* Épaisseur de la ligne */
	  height: 0%; /* Hauteur de la ligne */
	  /*background-color: transparent;  Couleur de la ligne */
	}
	
	#nav-list {
    display: none;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* fond global */
    border-radius: 10px;
}

	#nav-list.active {
    display: flex;
    flex-direction: column;
}
	.eltmenu {
        display: block;
		text-align: center; /* Centrer le texte des liens individuels */
    }	
	

	/* main en général*/
	main{
		margin-top: 0px; /* Ajustez la valeur selon la hauteur de votre menu */
		margin-bottom: 10px;
	}
	
	
	.lignehorizontale {
        width: 100%; /* Largeur de la ligne à 100% sur les écrans jusqu'à 768px de large */
    }
	
	.sousblocH, .sousblocH-footer, .sousblocV, .sousblocVcarousel {
		max-width: 100%;
	}
	
	.sousblocV12, .image-container12, .image-container13, .image-container12, .presentation12 , .presentation23, .contact-container, .contact-container-footer , .presentation{
		max-width: 80%;
	}
	.photo-pleinecranB {
	padding-top: 0px; /* remonter l'image*/
}
	#photo-carousel {
    width: 100%;
	}

}