#loader {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255); /* Fond semi-transparent pour le loader */
    z-index: 999; /* Assure que le loader est au-dessus de tout */
}

.loaded body {
    overflow: visible; /* Affichez le débordement une fois que l'image est chargée */
}

/* Styles communs */
body {
  font-family: 'Roboto', Arial, sans-serif;
  margin: 20px;
}

.header{
    display: flex;
    max-height: 150px;

}

/* CSS pour le logo */
.logo-container {
    max-width: 100px; /* Taille fixe pour le logo-container */

    margin-right: 20px;
    border-radius: 10px;
    background-color: #c7c8ca;
}

/* CSS pour le header */
header {
    position: relative;
    display: flex;
    max-height: 150px;
    justify-content: space-between;
    align-items: center;
    border-radius: 10px;
    background-image: url('background.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
}

header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;

    background-color: rgba(0, 0, 0, 0.35); /* Couleur semi-transparente */
    z-index: 1; /* Pour s'assurer que le voile est en arrière-plan */
}


img.logo {
    width: 100px;
}

header h1, header a {
    margin: 0;
    color: #fff;
padding: 20px;
    z-index: 2;

}

header nav {

    z-index: 3;

}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-left: 20px;
}

nav ul li:first-child {
    margin-left: 0;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2em;
    margin-right: 20px;
}

h1 {
    font-size: 2em;
    color: #fff;
}

p {
  line-height: 1.5;
}

li {
  margin-bottom: 10px;
}

         
.btn-grad {
    background-image: linear-gradient(to right, #016131 0%, #23b9ec 51%, #016131 100%);
    padding: 20px 60px; /* Increase padding for a larger button */
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    border-radius: 10px; /* Increase border-radius for larger rounded corners */
    display: block;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-size: 1.2em; /* Optional: Increase font size for better visibility */
}

.btn-grad:hover {
    background-position: right center;
    color: #fff;
    text-decoration: none;
}

/* Styles pour les éléments sur les écrans d'ordinateur */
@media (min-width: 768px) {
    .btn-grad {
        max-width: 300px; /* Largeur maximale pour éviter qu'il ne soit trop large */
    }
}

/* Styles pour les éléments sur les appareils mobiles */
@media (max-width: 767px) {
    .btn-grad {
        width: auto; /* Largeur fixée à 100% pour les appareils mobiles */
    }
}

/* Styles pour supprimer le surlignage lors du survol */
a {
    text-decoration: none; /* Supprime le sous-lignage au survol */
}
         

/* Section Les producteurs avec défilement */
.producer-carousel {
  width: auto;
  height: auto;
  overflow: hidden;
  position: relative;
  background-image: linear-gradient(to right, #016131, #23b9ec);
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.track {
  display: flex;
  animation: scroll 75s linear infinite;
}

.track.paused {
  animation-play-state: paused;
}




.producer {
  flex-shrink: 0;
  padding: 20px;
  margin: 0 20px;
  background-color: #fff;
  border-radius: 10px;
  text-align: center;
}

.producer h3 {
  margin-bottom: 0.5em;
  color: #016131;
}

.producer p {
  font-size: 0.9em;
  color: #8c8d8f;
  line-height: 1.4;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    /* Adjust the translateX value to match the total width of your items */
    transform: translateX(-3517.5px);
  }
}

.pause-button {
    position: absolute;
    top: 10px; /* Ajustez la position verticale selon vos préférences */
    right: 10px; /* Ajustez la position horizontale selon vos préférences */
    z-index: 1; /* Assurez-vous que le bouton est au-dessus du contenu du carrousel */
    border-radius: 10px;
    background: none;
    border: none;
    cursor: pointer;
    width: 45px; /* Définir la largeur du bouton */
    height: 45px; /* Définir la hauteur du bouton */
    background-color: white;
    border-color: white;
}

.pause-button img {
    width: 100%; /* Assurez-vous que l'image remplit le bouton */
    height: auto;
}


.pause-button.paused {
    /* Style pour l'icône de pause active, par exemple changer l'image */
    background-image: url('play-button.svg'); /* Remplacez par l'icône de lecture */
}

footer {
    display: flex;
    justify-content: center; /* Centrer le contenu horizontalement */
    align-items: center;
    padding: 20px;
    color: #fff;
    background-image: linear-gradient(to right, #016131, #23b9ec);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.footer-column {
    margin-right: 50px;
    text-align: center;
}

.footer-column:last-child {
    margin-right: 0; /* Suppression de la marge à droite de la dernière colonne */
}

.logos img {
    height: 65px; /* Ajustement de la taille des logos */
    margin-right: 10px; /* Ajout de marge entre les logos */
}

.copyrigth {
    text-align: center; /* Centrer le texte */
}




/* Section Liens presse avec défilement */
.press-links {
  overflow: hidden;
  position: relative;
  padding: 20px;
  background-image: linear-gradient(to right, #016131, #23b9ec);
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.press-track {
  display: flex;
  flex-wrap: wrap; /* Permet aux éléments de se mettre à la ligne si nécessaire */
}

.press-item {
  flex: 1; /* Fait en sorte que les éléments occupent la même quantité d'espace */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  margin: 20px 10px;
  background-color: #fff;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.press-item img {
  width: 100px; /* Ajuste la taille des logos */
  height: auto;
  margin-bottom: 10px;
}

.press-item blockquote {
  font-style: italic;
  color: #8c8d8f;
  margin-top: 10px;
  /* Pour forcer le texte à se mettre à la ligne si nécessaire */
  word-wrap: break-word;
  font-size: 14px; /* Taille de police par défaut */
}

/* Styles pour la carte Google Maps */
.google-map {
    margin-top: 20px;
    border-radius: 10px;
    overflow: hidden;

}

.google-map iframe {
    width: 100%;
    height: 400px; /* Ajustez la hauteur selon vos préférences */
}

/* Ajoutez d'autres styles pour votre contenu existant... */


        .contact-container {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            padding: 20px;
        }

        .contact-info {
            flex: 1;
            margin-right: 20px;
        }

        .contact-form {
            flex: 1;
            margin-left: 20px;
        }

        /* Media query pour les écrans plus petits */
        @media (max-width: 767px) {
            .contact-container {
                flex-direction: column;
                align-items: stretch;
            }
            .contact-info,
            .contact-form {
                margin: 0;
            }
    header h1 {
        font-size: 1em; /* Ajustez la taille de la police pour les appareils mobiles */
    }
        }
        /* Form styles */
        form {
            margin: 20px;
            padding: 20px;
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 10px;
            box-shadow: 0 0 20px #eee;
        }

        label {
            display: block;
            margin-bottom: 10px;
            color: #333;
        }

        input[type="text"],
        input[type="email"],
        textarea {
            width: 100%;
            padding: 10px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-sizing: border-box; /* Ensure padding and border are included in width */
        }

        input[type="submit"] {
            background-image: linear-gradient(to right, #016131 0%, #23b9ec 51%, #016131 100%);
            border: none;
            color: white;
            padding: 15px 30px;
            border-radius: 5px;
            cursor: pointer;
            transition: background-image 0.5s;
        }

        input[type="submit"]:hover {
            background-position: right center;
        }

        /* Media query for smaller screens */
        @media (max-width: 767px) {
            header {
                padding: 10px;
            }

            header h1,  header a {
                font-size: 1.1em;
            }

            form {
                margin: 10px;
                padding: 10px;
            }

            input[type="text"],
            input[type="email"],
            textarea {
                padding: 5px;
            }

            input[type="submit"] {
                padding: 10px 20px;
            }
        }