body {
  font-family: 'proxima-nova',arial,sans-serif;
}

body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overscroll-behavior: none;
}

.container {
  display: flex;
  flex-direction: column; /* Utilisez 'row' si vous voulez les éléments côte à côte */
  align-items: center; /* Centre verticalement les enfants dans le conteneur */
  justify-content: center; /* Centre horizontalement si nécessaire */
  text-align: center;
  max-width: 100%;
}


.container2{
    max-width: 1080px;
    margin: auto;
}


h2{
   font-size: 3rem;
   font-weight: 800;
}

h5{
    font-weight: lighter;
    line-height: inherit;
    font-size: 1rem;
    letter-spacing:0.5px;
    color: #0D4DFF;
    text-transform:none;
    text-decoration: none;
    text-transform: uppercase;
}

h6{
   font-weight: lighter;
   font-size: 11px;
   letter-spacing:0.5px;
   color: #CCCCCC;
}


@media screen and (max-width:1080px){
    h2{
      font-size:2.5rem;
    }
    
    h5{
      font-size: 0.9rem;  
    }
}

@media screen and (max-width:768px){
    h2{
      font-size:2.3rem;
    }
    h5{
      font-size: 0.8rem;  
    }
}

@media screen and (max-width:450px){
    h2{
      font-size:2rem;
    }
    h5{
      font-size: 0.7rem;  
    }
}

.no-scroll {
  overflow: hidden;
}

/* MESSAGE ERREUR POUR ECRAN -300PX */ 

/* Cache le message d'erreur par défaut */
.error-message {
  display: none; /* Caché par défaut */
  position: fixed; /* Positionnement fixe pour couvrir tout l'écran */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #0D4DFF;
  color: white; /* Couleur du texte en blanc pour le contraste */
  text-align: center; /* Centre le texte horizontalement */
  font-size: 16px; /* Taille de la police */
  padding: 20px; /* Espacement autour du texte */
  align-items: center; /* Centre verticalement */
  justify-content: center; /* Centre horizontalement */
  font-family: 'proxima-nova',arial,sans-serif;
  font-weight: 300;
}

/* Media query pour les écrans de moins de 300px de large */
@media only screen and (max-width: 300px) {
  .error-message {
      display: flex; /* S'assure que le message d'erreur est affiché */
  }

  body > *:not(.error-message) {
      display: none; /* Cache tout le contenu du body sauf le message d'erreur */
  }
}

/* MESSAGE ERREUR POUR ECRAN PAYSAGE SUR SMARTPHONE */ 


#landscape-warning {
  display: none; /* Masquer par défaut */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 1);
  justify-content: center;
  align-items: center;
  text-align: center;
  z-index: 10000;
}

.warning-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#landscape-warning img {
  max-width: 150px;
  margin-bottom: 20px;
}

/* Afficher le message uniquement sur les petits écrans en mode paysage */
@media (max-width: 768px) and (orientation: landscape) {
  #landscape-warning {
    display: flex;
  }
}

@media (min-width: 769px) {
    #landscape-warning {
        display: none !important;
    }
}



/* HEADER */ /* HEADER */ /* HEADER */ /* HEADER */ /* HEADER */ /* HEADER */ /* HEADER */ 

.header{
    margin:0;
}


.header-container {
  display: flex;
  align-items: center;
  padding: 0px;
  margin:0px;
  background-color: #007bff; /* Couleur de fond du header */
  position: relative; /* Assure que le positionnement absolu de .header-text est relatif à ce conteneur */
}

.header-text {
  position: absolute;
  top: 0; /* Aligné tout en haut */
  left: 50%; /* Centré horizontalement par rapport au .header-container */
  transform: translateX(-50%); /* Ajustement pour centrer précisément l'élément */
  margin: 0;
  padding: 0; /* Ajustez pour l'espace vertical */
  margin-top:-10px;
  background-color: transparent; /* Ou la couleur de fond souhaitée */
  text-align: center; /* Centre le texte à l'intérieur de .header-text */
}

.header-text h5{
  font-size: 0.8em;
}

/* BARRE ETHIQUE */ /* BARRE ETHIQUE */ /* BARRE ETHIQUE */ /* BARRE ETHIQUE */ /* BARRE ETHIQUE */ /* BARRE ETHIQUE */ /* BARRE ETHIQUE */ /* BARRE ETHIQUE */ /* BARRE ETHIQUE */ /* BARRE ETHIQUE */ /* BARRE ETHIQUE */ /* BARRE ETHIQUE */ /* BARRE ETHIQUE */ /* BARRE ETHIQUE */ 


.barre-ethique .le-plus {
  background: none; /* Supprime le fond */
  border: none; /* Supprime la bordure */
  position: absolute; /* Permet de positionner précisément le bouton */
  top: 0; /* Positionne le bouton tout en haut */
  left: 0; /* Positionne le bouton à gauche */
  /* Ajoute un peu d'espace autour de l'icône, ajustez selon les besoins */
  margin-top:15px;
  margin-left:15px;
  font-family: 'proxima-nova',arial,sans-serif;
  font-weight: 200;
  color: #FFF;
  letter-spacing: 2px;
  font-size: 18px!important;
}



.barre-ethique .le-plus:hover {
  transform: scale(1.1); /* Agrandit l'icône de 10% au survol */
  transition: transform 0.3s ease; /* Ajoute une transition douce */
  background-color: transparent;
}

@media screen and (max-width:400px){
  .barre-ethique .le-plus {
    font-size: 12px!important;
    margin-top:20px;
    margin-left:15px;
  }

  .barre-ethique .le-gift img {
    width:18px!important; /* ou la taille désirée pour l'icône */ 
  }
  }

  .barre-ethique .le-gift {
    cursor:pointer;
    position: absolute;
    top: 48%;
    right: 15px; /* Ajustez selon la marge désirée par rapport au bord droit */
    transform: translateY(-50%); /* Centrer verticalement */
    display: flex;
    align-items: center;
    justify-content: center;
    background: none; /* Assurez-vous qu'il n'y a pas de fond */
    border: none; /* Assurez-vous qu'il n'y a pas de bordure */
}

.barre-ethique .le-gift img {
  width: 25px; /* ou la taille désirée pour l'icône */
  height: auto;
}

@media screen and (max-width:768px){
  .barre-ethique .le-gift img {
    width: 22px; /* ou la taille désirée pour l'icône */
  }
}

.le-gift img:hover {
  transform: scale(1.1); /* Agrandit l'icône de 10% au survol */
  transition: transform 0.3s ease; /* Ajoute une transition douce */
}

/* POP UP FULL SCREEN OBESICIEL*/ /* POP UP FULL SCREEN OBESICIEL*/ /* POP UP FULL SCREEN OBESICIEL*/ /* POP UP FULL SCREEN OBESICIEL*/ /* POP UP FULL SCREEN OBESICIEL*/ /* POP UP FULL SCREEN OBESICIEL*/ /* POP UP FULL SCREEN OBESICIEL*/ /* POP UP FULL SCREEN OBESICIEL*/ /* POP UP FULL SCREEN OBESICIEL*/



.fullscreen-popup {
  display: none; /* Caché par défaut */
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0D4DFF; /* Couleur de fond bleue */
  z-index: 10000;
  overflow: auto; /* Barre de défilement sur la fenêtre de navigation */
}

.fullscreen-popup .popup-content-obesiciel {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%; /* Pleine largeur */
  height: 100%; /* Pleine hauteur */
  padding: 20px;
  border-radius: 0; /* Retirer les bords arrondis */
  text-align: left;
  overflow: auto; /* Ajouté pour permettre le défilement si le contenu dépasse */
}


.fullscreen-popup .left-aligned-content {
  padding: 20px 0; /* Ajouter du padding en haut et en bas */
  text-align: left;
  width: 60%; /* Réduire la largeur du texte */
  max-width: 900px; /* Largeur maximale du bloc de texte */
  margin: auto; /* Centrer le bloc de texte */
  background-color: transparent;
}

@media (max-width: 992px) {
  .fullscreen-popup .left-aligned-content {
      width: 90%; /* Largeur du texte à 90% en dessous de 992px */
  }
}


.fullscreen-popup .popup-content-obesiciel h1 {
  padding-top:50px;
  padding-bottom:20px;
  text-align: center;
  color: white; /* Texte en noir pour contraste */
  font-size: 2em;
  font-weight: 200;
  margin: 10px 0;
}

.fullscreen-popup .popup-content-obesiciel p {
  text-align: left;
  color: white; /* Texte en noir pour contraste */
  font-size: 1em;
  font-weight: 200; /* Police normale */
  margin: 10px 0;
  line-height: 1.6; /* Hauteur de ligne pour une meilleure lisibilité */
}

.fullscreen-popup .popup-content-obesiciel h2 {
  font-size: 1.5em;
  color: white; /* Texte en noir pour contraste */
  font-weight: 600; /* Police légèrement plus épaisse */
  margin: 15px 0 10px;
}

.close-popup-btn {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 2em;
  color: white;
  cursor: pointer;
}

/* Afficher la version longue par défaut et masquer la version courte */
.long-text {
  display: block;
}

.short-text {
  display: none;
}

/* Pour les écrans de moins de 768px, afficher la version courte et masquer la version longue */
@media (max-width: 768px) {
  .long-text {
      display: none;
  }

  .short-text {
      display: block;
  }
}



/* POP UP CHARTE ETHIQUE */  /* POP UP CHARTE ETHIQUE */  /* POP UP CHARTE ETHIQUE */  /* POP UP CHARTE ETHIQUE */  /* POP UP CHARTE ETHIQUE */ /* POP UP CHARTE ETHIQUE */  /* POP UP CHARTE ETHIQUE */  /* POP UP CHARTE ETHIQUE */  /* POP UP CHARTE ETHIQUE */  /* POP UP CHARTE ETHIQUE */ /* POP UP CHARTE ETHIQUE */  /* POP UP CHARTE ETHIQUE */  /* POP UP CHARTE ETHIQUE */  /* POP UP CHARTE ETHIQUE */  /* POP UP CHARTE ETHIQUE */ 



/* la barre latérale haute */


#popupEthique {
  display: none;
}

.barre-ethique {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #0D4DFF; /* Couleur de fond par défaut */
  color: #FFF;
  text-align: center;
  line-height: 50px;
  z-index: 1000; /* Maintient la barre au-dessus des autres éléments */
  opacity: 1; /* Assure que la barre est totalement opaque */
  transform: translateY(0); /* Aucun déplacement, affiche la barre à sa position initiale */
  transition: background-color 0.5s ease; /* Transition douce pour le changement de couleur */
}


.barre-ethique p {
  display: inline-block;
  margin: 0;
  padding: 0 10px;
  color: #FFF; /* Couleur du texte */
  font-size: 1.1rem;
  font-weight: 100;
}

#barreEthique button.bouton-ethique  {
  width: 25px; /* Largeur du bouton */
  height: 25px; /* Hauteur du bouton */
  padding: 5px; /* Padding pour assurer un espace interne */
  /* Utiliser 'min-width' et 'min-height' pour s'assurer que le bouton ne devient pas trop petit sur les appareils avec un écran étroit */
  min-width: 25px;
  min-height: 25px;
  border-radius: 50%; /* Rend les coins complètement arrondis */
  background-color: transparent;
  color: #FFF; /* Couleur du texte */
  border: 1px solid #FFF;
  font-size: 1rem!important;
  font-weight: 300;
  display: flex; /* Utilise Flexbox pour le centrage */
  align-items: center; /* Centre verticalement */
  justify-content: center; /* Centre horizontalement */
  cursor: pointer; /* Change le curseur en pointeur */
  font-size: 15px;
  font-family: proxima-nova; 
  font-weight: 600;
  transition: background-color 0.3s ease, transform 0.3s ease; 
}


#barreEthique button.bouton-ethique:hover  {
border: none;
color: #0D4DFF;
background-color: #FFF;
}

/* Ajustements pour les écrans plus petits */
@media only screen and (max-width: 640px) {
  #barreEthique button.bouton-ethique {
    width: 20px; /* Réduire la largeur */
    height: 20px; /* Réduire la hauteur */
    font-size: 12px; /* Réduire la taille de la police */
    padding: 5px; /* Ajuster le padding si nécessaire */
    /* Ajoutez ou modifiez d'autres propriétés selon les besoins */
    min-width: 20px;
    min-height: 20px;
    padding: 5px;
    font-size: 0.8rem;
  }

}

@media only screen and (max-width: 768px) {
  #barreEthique button.bouton-ethique {
    margin-right: 10px; /* Ajustement de la marge à droite */
  }
}

@media only screen and (max-width: 400px) {
  .barre-ethique p {  
    font-size: 0.8rem;
  }
}


/* le popup */

.popup-ethique, .popup-ethique * {
  box-sizing: border-box;
}

.popup-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: none; /* Caché par défaut */
  align-items: center;
  justify-content: center;
  z-index: 1050;
  overflow: auto; /* Permettre le défilement */
  -webkit-backdrop-filter: blur(10px); /* Préfixe spécifique pour Safari */
  backdrop-filter: blur(10px); /* Appliquez un effet de flou */
}

.popup-ethique {
  position: relative;
  top: 50px; /* Décalage initial */
  margin: auto; /* Centrer horizontalement */
  width: 80%; /* Largeur par défaut */
  box-sizing: border-box;
  border-radius: 5px;
  background: rgba(255, 255, 255, 1);
  transition: top 0.3s ease; /* Transition douce */
  max-height: none; /* Permettre au contenu de dépasser */
}

@media screen and (min-width: 1920px) {
  .popup-ethique {
    width: 60%; /* Ajustez en fonction de vos besoins */  
  }
}

@media screen and (max-width: 1080px) {
  .popup-ethique {
    top:0px!important;
    width: 100%;
    border-radius: 0;
  }

}


.no-scroll {
  overflow: hidden;
}

/* Contenu du popup */

.popup-content-ethique {
width: 100%;
max-height: 100%;
overflow-y: auto;
padding: 20px;
box-sizing: border-box; /* Assure que le padding est inclus dans la largeur */
display: flex;
flex-direction: column;
align-items: center;
overflow-x: hidden; 
}

.popup-wrapper.show {
display: flex;
}

/* Styles par défaut pour .close-btn-ethique */
.close-btn-ethique {
  position: fixed; /* Positionnement relatif au conteneur parent */
  top: 50px; /* Espace depuis le haut du pop-up */
  right: calc((100% - 80%) / 2 - 60px); /* Espace depuis la droite du pop-up */
  background-color: rgba(255, 255, 255, 0.5);
  color: white; /* Couleur du texte du bouton */
  border: none; /* Pas de bordure */
  border-radius: 50%; /* Forme circulaire */
  cursor: pointer; /* Curseur en forme de main lors du survol */
  padding: 10px; /* Espace intérieur autour de la croix */
  display: flex; /* Utilisation de Flexbox pour centrer la croix */
  align-items: center; /* Centre verticalement le contenu dans le flex container */
  justify-content: center; /* Centre horizontalement le contenu dans le flex container */
  width: 20px; /* Largeur du bouton */
  height: 20px; /* Hauteur du bouton */
  line-height: 30px; /* Hauteur de la ligne pour centrer le texte si flex n'est pas pris en charge */
  font-size: 20px; /* Taille de la croix */
  z-index: 1052; /* Assure que le bouton est au-dessus des autres éléments */
}

@media screen and (min-width: 1920px) {
  .close-btn-ethique {
      right: calc((100% - 60%) / 2 - 60px);
  }
}

/* Styles pour les écrans en dessous de 1080px de largeur */
@media screen and (max-width: 1080px) {
  .close-btn-ethique {
      top: 20px; /* Espace depuis le haut du pop-up */
      right: 20px; /* Espace depuis la droite du pop-up */
      color: #FFF !important; /* Couleur du texte du bouton */
      background-color: rgba(0, 0, 0, 0.3)!important;
      width: 20px !important; /* Largeur du bouton */
      height: 20px !important; /* Hauteur du bouton */
      position: fixed !important;
  }
}

/* Media query pour les écrans de 768px de largeur */
@media screen and (max-width: 768px) {
  .close-btn-ethique {
      top: 20px; /* Ajustez cette valeur selon votre besoin */
      right: 20px; /* Ajustez cette valeur selon votre besoin */
      color: #FFF;
      background-color: rgba(0, 0, 0, 0.3);
      width: 20px;
      height: 20px;
      position: fixed !important;
  }
}


.blurred-background {
overflow: visible;
}

.blurred-background::before {
content: "";
position: fixed; /* Utilisez absolute si votre main-container n'est pas déjà en position fixed ou relative */
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Couleur noire avec transparence */
backdrop-filter: blur(10px); /* Appliquez un effet de flou */
z-index: 1040; /* Doit être inférieur à celui du popup et supérieur à celui du contenu de la page */
}

.main-container {
position: relative; /* Ou 'fixed' si nécessaire */
/* Vos autres styles ici */
}



/* la composition */


.popup-content-ethique h1, .popup-content-ethique h2, .popup-content-ethique p {
text-align: center;
/* Autres styles spécifiques à h1, h2 et p... */
}

.popup-content-ethique h1 {
margin-top:2em;
margin-bottom: 0.8em; /* Espace en dessous du titre */
font-size: 7vh; /* Taille de la police du titre */
font-weight: 600;
line-height: 1.2;
}

.popup-content-ethique h2 {
  margin-bottom: 1em; /* Espace en dessous du titre */
  font-size: 1.2em; /* Taille de la police du titre */
  font-weight: 400;
}

.popup-content-ethique p {
  margin: 0 auto 5em; /* Centrage horizontal et espace en dessous */
  font-weight: lighter;
  line-height: inherit;
  font-size: 1em;
  letter-spacing: 0.5px;
  color: #808080;
  text-transform: none;
  font-weight: 100;
}

.eco-communication-block {
display: flex;
flex-direction: column; /* Empile les éléments verticalement */
width: 100%;
padding:30px;
}

.eco-communication-block, .pictogrammes-grid, .skills {
width: 100%; /* Assurez-vous que ces conteneurs occupent toute la largeur disponible */
}

.eco-communication-block h1,
.eco-communication-block p {
  width: 100%; /* S'assure que le texte prend la pleine largeur pour centrer */
}

.no-wrap {
white-space: nowrap;
}


.pictogramme-item img {
  width: 100%; /* Image réactive */
  max-width: 200px; /* Largeur maximale */
  height: auto; /* Maintien du ratio aspect */
}

.pictogrammes-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-around; /* Assure une répartition égale de l'espace autour des éléments */
/* Assurez-vous que la largeur est définie pour contenir trois éléments par ligne. Par exemple, 100% pour occuper toute la largeur disponible */
width: 100%;
}

.pictogramme-item {
/* Utilisez flex-basis pour définir la largeur initiale de chaque élément. Avec 33.333%, trois éléments rempliront la ligne. */
flex-basis: calc(33.333% - 20px); /* Soustrayez la marge totale si nécessaire pour un alignement correct */
display: flex;
flex-direction: column;
align-items: center; /* Centre le contenu des pictogrammes verticalement */
margin: 10px; /* Ajustez la marge selon vos besoins pour créer de l'espace entre les pictogrammes */
}

/* Pour les écrans plus larges, ajustez le flex-basis pour avoir 3 éléments par ligne */
@media (min-width: 992px) {


.pictogramme-item {
  flex-basis: calc(33.333% - 20px); /* Ajustez le calc pour inclure la marge si nécessaire */
  margin: 10px;
}
}

/* Nouvelle règle pour les écrans de 992px ou moins */
@media (max-width: 992px) {

  .pictogramme-item {
    flex-basis: calc(50% - 20px); /* 2 éléments par ligne */
    margin: 10px;
  }
}

/* Nouvelle règle pour les écrans de 576px ou moins */
@media (max-width: 576px) {

  .pictogramme-item {
    flex-basis: 100%; /* 1 élément par ligne */
    margin: 10px auto; /* Centrer les éléments */
    max-width: 240px;
  }
}


.skills {
display: flex;
flex-direction: column;
align-items: center; /* Centre les éléments horizontalement */
width: 100%; /* Assurez-vous que le conteneur prend toute la largeur disponible */  
}


.progress-bar {
width: 100%; /* Ajustez en fonction du pourcentage de progression */
background-color: #0D4DFF;
border-radius: 25px;
height: 20px; /* Ajustez la hauteur au besoin */
display: flex;
align-items: center;
justify-content: center;
}

.skills .progress{
margin: 0 auto;
width: calc(100% - 40px);
border-radius: 25px;
background: #ddd;
}

.skills .progress h5{
  padding:8px;
  letter-spacing: 1px;
  font-weight:500;
  color: #00FFA9;
}

.eco-communication-block .progress {
margin-bottom: 2em; /* Ajoutez l'espace en dessous de la barre de progression */
}

.progress-text {
padding: 0 20px; /* Ajoute de l'espace à gauche et à droite */
margin-top: 20px; /* Ajoute de l'espace au-dessus du texte */
}

@media screen and (max-width: 768px) {

 .popup-content-ethique h1 {
    margin-top:2em;
    font-size: 5vh; /* Taille de la police du titre */
  
    }
.popup-ethique .progress-bar-container {
  border-radius: 0px; /* Supprimez les bordures arrondies pour la barre de progression spécifique */
}

.popup-ethique .progress-bar {
  border-radius: 0px; /* Supprimez les bordures arrondies */
}

.popup-ethique .progress {
  width: 100%; /* Assurez-vous que la barre de progression utilise toute la largeur */
  border-radius: 0px; /* Supprimez les bordures arrondies */
  margin-bottom: 20px; /* Ajoutez une marge en dessous de la barre de progression */
}

.popup-ethique .skills p {
  margin-top: 20px; /* Ajoutez une marge au-dessus du paragraphe pour plus de lisibilité */
}


.popup-ethique .eco-communication-block, 
.popup-ethique .skills, 
.popup-ethique .popup-content-ethique {
  padding: 0; /* Réduisez ou supprimez le padding */
  /* Ne pas réinitialiser les marges ici pour ne pas écraser les marges spécifiques ajoutées ci-dessus */
}
}


/* BARRE DE RECHERCHE *//* BARRE DE RECHERCHE *//* BARRE DE RECHERCHE *//* BARRE DE RECHERCHE */ /* BARRE DE RECHERCHE *//* BARRE DE RECHERCHE *//* BARRE DE RECHERCHE *//* BARRE DE RECHERCHE */


.logo-search-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 100px;
  padding: 0;
  min-height: 600px;
  position: relative;
  background: linear-gradient(to bottom, 
    rgba(13, 77, 255, 1) 20%, 
    rgba(13, 77, 255, 0.8) 40%, 
    rgba(13, 77, 255, 0.4) 60%, 
    rgba(255, 255, 255, 1) 100%);
  transition: background 0.5s ease; /* Ajoute une transition pour un effet doux */
}



@media (max-width: 768px) {
  .logo-search-container {
    min-height: 400px; /* Ajustez cette valeur selon vos besoins */
  }
}

.logo-search-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  filter: blur(10px); /* Adjust the blur value as needed */
  z-index: -1;
}


.centered-logo {
  width: 50%; /* Adapte la largeur du logo à celle de son conteneur jusqu'à un certain point */
  max-width: 400px; /* Empêche le logo de devenir trop grand sur les grands écrans */
  height: auto; /* Garde le rapport hauteur/largeur original du logo */
    margin-bottom: 100px; /* Espace entre le logo et la barre de recherche */
    margin-top: 200px;
}


@media (max-width: 768px) {
  .centered-logo {
    margin-bottom: 150px;
    width: 80%; /* Adapte la largeur pour les petits écrans */
  }
}

@media (max-width: 576px) {
  .centered-logo {
    width: 90%; /* Adapte la largeur pour les petits écrans */
  }
}

.search-bar {
  padding: 20px;
  font-size: 16px;
  border: none; /* Aucune bordure pour garder un design épuré */
  background-color: #FFF; /* Couleur de fond */
  border-radius: 30px; /* Coins arrondis */
  position: relative; /* Positionnement correct */
  width: 100%; /* Utilisation de 100% de la largeur du conteneur */
  box-sizing: border-box; /* Le padding est inclus dans la largeur calculée */
  transition: border-radius 0.01s ease; /* Transition douce pour les bordures */
  outline: none; /* Suppression du contour lors de la sélection */
  color: #0D4DFF; /* Couleur du texte */
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.10); /* Ombre portée légère pour ajouter de la profondeur */
}

@media (max-width: 768px) {
  .search-bar {
    margin-left: 10px; /* Espace à gauche */
    margin-right: 10px; /* Espace à droite */
    width: calc(100% - 20px); /* Ajustement de la largeur pour compenser les marges */
  }
}

.search-bar::placeholder {
  color: #808080; /* Couleur grise pour le texte placeholder */
  font-weight: 200;
  font-family: 'proxima-nova',arial,sans-serif;
}

.search-bar:focus {
  color: #0D4DFF; /* Couleur noire pour le texte lorsque l'utilisateur tape */
}

.search-wrapper {
    width: 100%; /* Cela permettra au wrapper de prendre toute la largeur */
    max-width: 600px; /* ou la largeur maximale que vous souhaitez pour la barre de recherche */
    min-width: 150px; /* ou la largeur minimale que vous souhaitez pour la barre de recherche */
    margin: auto; /* Cela va centrer le wrapper */
}


/* Lorsque le conteneur de suggestions a des éléments, ajustez ses bordures supérieures */
.search-bar.active-suggestions {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Style des éléments de suggestion individuels */
.suggestion-item {
    padding: 20px;
    border-bottom: 1px solid #eee; /* un fond de séparateur léger */
    cursor: pointer;
}

.suggestion-item:last-child {
    border-bottom: none; /* pas de bordure sur le dernier élément */
}

.suggestion-item:hover {
    background-color: #f9f9f9; /* un léger changement de couleur sur le survol */
}

.search-suggestions {
    position: absolute;
    top: 100%;
    left: 50%; /* Centrer le conteneur sur la page */
    transform: translateX(-50%); /* Aligner précisément au centre */
    width: 100%; /* Adjuster la largeur en fonction du padding de .search-bar */
    max-width: inherit; /* Largeur maximale pour correspondre au .search-wrapper */
    min-width: inherit; /* Largeur minimale pour correspondre au .search-wrapper */
    background-color: #FFF;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.10); /* Ombre portée légère pour ajouter de la profondeur */
    border-radius: 0 0 30px 30px;
    z-index: 5;
    color: #0D4DFF;
    border-top: none;
    max-height: 0;
    overflow: hidden;
    transition: none;
    box-sizing: border-box; /* Ajouté pour inclure le padding dans la largeur */
}


/* Lorsque les suggestions sont visibles */
.search-suggestions.active {
    max-height: 500px; /* Hauteur maximale une fois ouvert */
    overflow-y: auto;
}

.search-bar:not(.active-suggestions) {
    transition: border-radius 0s;
}

.search-bar:focus {
    transition: border-radius 0s;
}

.search-bar:focus + .search-suggestions {
    max-height: 500px;
}

.search-wrapper {
    position: relative;
    width: 100%;
}

/* Masquer la croix de réinitialisation dans les champs de recherche */
/* Masquer la croix de réinitialisation par défaut */
input[type="search"]::-webkit-search-cancel-button {
    display: none;
}

input[type="search"]::-moz-search-cancel-button {
    display: none;
}

input[type="search"]::-ms-clear {
    display: none;
}

.search{
   color:#00FFA9;
}

/* Style pour le bouton de réinitialisation personnalisé */
.reset-search {
    position: absolute;
    right: 20px;
    top: 53%;
    transform: translateY(-50%);
    background: transparent;
    color: #808080;
    border: none;
    cursor: pointer;
    font-size: 20px;
    font-family: proxima-nova,arial,sans-serif !important;
    font-weight: 600;
    /* Ajoutez d'autres styles ici pour correspondre à votre design */
}

/* Cachez le bouton par défaut si vous utilisez un input de type search */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

.search-bar {
  font-size: 16px; /* Empêche le zoom automatique sur Safari */
}



/* POPUP BIENVENUE */ /* POPUP BIENVENUE *//* POPUP BIENVENUE *//* POPUP BIENVENUE *//* POPUP BIENVENUE *//* POPUP BIENVENUE *//* POPUP BIENVENUE *//* POPUP BIENVENUE *//* POPUP BIENVENUE *//* POPUP BIENVENUE *//* POPUP BIENVENUE *//* POPUP BIENVENUE */

/* Style pour le popup de bienvenue en forme de rectangle centré */
.welcome-banner {
  display: none; /* Masqué par défaut */
  position: fixed;
  bottom: 20px; /* Positionné juste au-dessus du bas */
  left: 50%;
  transform: translateX(-50%); /* Centre horizontalement */
  background-color: rgba(255, 255, 255, 0.8); /* Fond blanc avec transparence */
  color: #333333;
  padding: 20px 30px;
  border-radius: 20px; /* Bords arrondis */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); /* Ombre subtile pour un effet flottant */
  max-width: 500px;
  width: 90%; /* S'adapte aux petits écrans tout en restant centré */
  font-family: Arial, sans-serif;
  text-align: center;
  backdrop-filter: blur(10px); /* Effet de flou d'arrière-plan */
  z-index: 1000;
}

/* Animation d'apparition vers le haut */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translate(-50%, 30px); /* Position initiale en bas */
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0); /* Position finale en haut */
  }
}

/* Animation de disparition vers le bas */
@keyframes slideDown {
  from {
    opacity: 1;
    transform: translate(-50%, 0); /* Position de départ au centre */
  }
  to {
    opacity: 0;
    transform: translate(-50%, 30px); /* Position finale en bas */
  }
}

/* Classe pour afficher le popup avec l'animation d'apparition */
.welcome-banner.show {
  display: block;
  animation: slideUp 0.5s ease forwards; /* Animation d'apparition */
}

/* Classe pour la disparition du popup */
.welcome-banner.hide {
  animation: slideDown 0.5s ease forwards; /* Animation de disparition */
}

.welcome-image {
  max-width: 100px; /* Ajuste la taille de l'image pour un meilleur équilibre visuel */
  height: auto;
  margin-right: 20px;
}

.welcome-content {
  display: flex;
  align-items: center; /* Centre l'image et le texte verticalement */
  justify-content: center; /* Centre le contenu horizontalement */
  gap: 15px; /* Espace entre l'image et le texte */
  text-align: left;
  padding: 10px;
}

.welcome-text {
  display: flex;
  flex-direction: column; /* Empile le h2 et le p verticalement */
  justify-content: center; /* Centre verticalement le texte par rapport à l'image */
}

.welcome-text h2 {
  font-size: 1.2rem;
  font-weight: 600; /* Ajuste la graisse pour correspondre au titre des vignettes */
  margin: 0; /* Espace entre le h2 et le p */
  color: #000000;
  font-family: 'proxima-nova', arial, sans-serif; /* Utilise la même police que le titre de vignette */
}

.welcome-text p {
  font-size: 0.8rem; /* Taille similaire au descriptif des vignettes */
  font-weight: 200; /* Police plus légère */
  color: #000000; /* Couleur grise, similaire à celle des descriptions */
  font-family: 'proxima-nova', arial, sans-serif; /* Assure une continuité avec les vignettes */
  margin-top: 10px;
  line-height: 1.2;
}

@media (max-width: 556px) {
  .welcome-banner {
    border-radius: 0; /* Suppression des coins arrondis */
    padding: 15px 20px; /* Réduction du padding interne */
    bottom: 0px; /* Positionné juste au-dessus du bas */
  }

  .welcome-image {
    display: none; /* Masque l'image sur les petits écrans */
  }

  .welcome-content {
    justify-content: center; /* Centre le contenu horizontalement */
    text-align: center; /* Centre le texte */
  }

  .welcome-text h2 {
    font-size: 1rem; /* Réduction de la taille de police du titre */
  }

  .welcome-text p {
    font-size: 0.75rem; /* Réduction de la taille de police du texte */
    text-align: center; /* Centre le texte horizontalement */
  }
}

/* Style de la croix de fermeture */
.close-banner {
  position: absolute;
  top: 10px; /* Positionné en haut du popup */
  right: 10px; /* Positionné à droite du popup */
  font-size: 1.25rem;
  color: #333333;
  background-color: transparent;
  cursor: pointer;
}


/* LE BOUTON PLUS */ /* LE BOUTON PLUS */ /* LE BOUTON PLUS */ /* LE BOUTON PLUS */ /* LE BOUTON PLUS */ /* LE BOUTON PLUS */ /* LE BOUTON PLUS */ /* LE BOUTON PLUS */ /* LE BOUTON PLUS */ /* LE BOUTON PLUS */ /* LE BOUTON PLUS */ /* LE BOUTON PLUS */ 

.load-more-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  margin-bottom:20px;
}

.load-more-btn {
  padding: 10px 30px; /* Ajusté pour une meilleure visibilité */
  background-color: #0D4DFF;
  color: #FFF;
  border: 1px solid #0D4DFF; /* Ajout d'une bordure pour améliorer le design */
  border-radius: 45px; /* Arrondi plus prononcé pour correspondre à la charte graphique */
  cursor: pointer;
  font-family: 'proxima-nova', arial, sans-serif;
  font-weight: 600;
  font-size: 1rem; /* Taille de police ajustée pour une meilleure lisibilité */
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.load-more-btn:hover {
  background-color: #FFF;
  color: #0D4DFF;
  border-color: #0D4DFF; /* Bordure assortie lors du survol */
}



/* POP UP CONTACT */  /* POP UP CONTACT */  /* POP UP CONTACT */  /* POP UP CONTACT */  /* POP UP CONTACT */ /* POP UP CONTACT */  /* POP UP CONTACT */  /* POP UP CONTACT */  /* POP UP CONTACT */  /* POP UP CONTACT */ /* POP UP CONTACT */  /* POP UP CONTACT */  /* POP UP CONTACT */  /* POP UP CONTACT */  /* POP UP CONTACT */ 

/* Bouton de contact flottant */
.bouton-contact {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #0D4DFF; /* Bleu */
  color: white;
  border: none;
  border-radius: 50%;
  width: 60px; /* Taille du bouton */
  height: 60px; /* Taille du bouton */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  transition: background-color 0.3s ease, transform 0.3s ease;
  z-index: 1000;
}

.bouton-contact img {
  height: 30px; /* Ajustez la taille de l'icône */
  width: 30px; /* Ajustez la taille de l'icône */
}

.bouton-contact:hover {
  transform: scale(1.1); /* légère augmentation de la taille */
}

/* Modal de contact */
.chat-modal {
  display: none; /* Caché par défaut */
  position: fixed;
  right: 20px;
  bottom: 20px; /* Ajusté pour ne pas superposer le bouton de contact */
  background: #FFF;
  border-radius: 20px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  width: 300px;
  max-width: 80%;
  z-index: 1001;
  padding:0;
  border:none;
}

/* Barre supérieure bleue */
.chat-question {
  background-color: #0D4DFF; /* Fond rouge */
  color: #FFFFFF; /* Texte blanc */
  padding: 22px 20px; /* Ajouter du padding pour la barre */
  margin: 0; /* Assurez-vous qu'il n'y a pas de marge */
  border-top-left-radius: 18px; /* Appliquer le radius seulement en haut */
  border-top-right-radius: 20px;
  border-bottom-left-radius: 0; /* Pas de radius en bas */
  border-bottom-right-radius: 0;
  font-size: 1.1rem;
  font-weight: 100;
  margin-bottom: 10px;
  font-family: 'proxima-nova'!important;
}


.chat-modal-content {
  padding: 0;
  border-bottom-left-radius: 20px; /* Appliquer le radius seulement en bas */
  border-bottom-right-radius: 20px;
  background-color: transparent;
}

.close-chat-modal {
  position: absolute;
  top: 17px;
  right: 20px;
  cursor: pointer;
  font-size: 25px;
  color: #FFF;
}

#chatInput{
resize: none;
}

.separator {
  height: 2px;
  background-color: #F2F2F2;
  margin: 10px 0;
}


#chatInput, #emailInput {
  /* autres propriétés déjà définies */
  padding: 10px 10px 10px 20px; /* Top, Right, Bottom, Left */
  margin: 0;
  width: calc(100% - 40px); /* Ajuste la largeur pour tenir compte du padding additionnel à gauche */
  border: none;
  color:#808080;
  background-color: #FFF;
  font-family: Arial, sans-serif;
  font-size: 14px;
}

#chatInput::placeholder, #emailInput::placeholder {
  color: #808080; /* Couleur grise pour le texte placeholder */
  font-weight: 200;
  font-family: 'proxima-nova',arial,sans-serif;
}

/* Styles pour le texte saisi */
#chatInput, #emailInput {
  color: #0D4DFF; /* Couleur noire pour le texte saisi, par défaut */
}

#chatInput:focus, #emailInput:focus {
  color: #0D4DFF; /* Couleur bleue pour le texte lors de la saisie, par exemple */
}

#sendButton { /* Styles pour le bouton Envoyer */
  color: #0D4DFF;
  background-color: #FFF;
  border: 1px solid #0D4DFF;
  border-radius: 20px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.3s;
  display: block; /* Assurez-vous que le bouton est toujours visible */
  margin: 10px auto; /* Centre le bouton */
  margin-top:20px;
  margin-bottom:20px; 
}

#sendButton:hover {
  color: #FFF;
  background-color: #0D4DFF; /* Bleu */
}

.thank-you-message {
  padding: 15px; /* Ajoute un padding autour du texte */
  text-align: center; /* Centre le texte si souhaité */
  /* Autres styles comme margin, color, etc. */
}


@media screen and (max-width: 768px) {
  .chat-modal {
      bottom: 2%;
  }
}

input.error::placeholder, textarea.error::placeholder {
  color: #0D4DFF; /* Couleur rouge pour indiquer une erreur */
  font-weight: 100;
}

/* Pour une compatibilité multi-navigateurs, vous pourriez avoir besoin d'ajouter des préfixes spécifiques aux navigateurs */
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: inherit;
}
::-moz-placeholder { /* Firefox 19+ */
  color: inherit;
  opacity: 1; /* Firefox place un 'opacity' par défaut sur les placeholders */
}
:-ms-input-placeholder { /* IE 10+ */
  color: inherit;
}
:-moz-placeholder { /* Firefox 18- */
  color: inherit;
  opacity: 1;
}



/* POPUP MODAL REMERCIEMENT LIKE/NO LIKE THUMBNAILS */




/* THUMBNAIL PROJET EN COURS *//* THUMBNAIL PROJET EN COURS *//* THUMBNAIL PROJET EN COURS *//* THUMBNAIL PROJET EN COURS *//* THUMBNAIL PROJET EN COURS *//* THUMBNAIL PROJET EN COURS *//* THUMBNAIL PROJET EN COURS *//* THUMBNAIL PROJET EN COURS *//* THUMBNAIL PROJET EN COURS *//* THUMBNAIL PROJET EN COURS */

.projet_en_cours{
   background-color:#FFF;
   border-radius: 5px;
}

.projet_en_cours .image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

.projet_en_cours .item-title{
    text-align: center;
}

.projet_en_cours .item-description{
    text-align: center;
}


/* THUMBNAIL */ /* THUMBNAIL */ /* THUMBNAIL */ /* THUMBNAIL */ /* THUMBNAIL */ /* THUMBNAIL */ /* THUMBNAIL */ /* THUMBNAIL */ /* THUMBNAIL */ /* THUMBNAIL */ /* THUMBNAIL */ /* THUMBNAIL */ /* THUMBNAIL */ /* THUMBNAIL */ /* THUMBNAIL */ /* THUMBNAIL */ /* THUMBNAIL */

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 25px;
  padding: 25px;
   
}

@media screen and (max-width:768px){
  .grid-container {
    padding: 15px;
     
  }
}

@media screen and (max-width:576px){
  .grid-container {
    padding: 10px;
     
  }
}

.grid-item {
  background-color: none;
  border: none;
  box-shadow: none;
  overflow: hidden !important;
}

.grid-item .image-container {
  position: relative;
}


.grid-item .image-container:hover::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.1); /* Opacité noire */
  cursor: pointer;
}

.grid-item.projet_en_cours .image-container:hover::after {
  content: none;
}

.grid-item .image-container .insert-3D {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #0D4DFF; /* Fond bleu semi-transparent */
  color: white;
  padding: 5px 10px;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: light;
  z-index: 10;
  pointer-events: none;
}

.grid-item .image-container .insert-new {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #0D4DFF; /* Fond bleu semi-transparent */
  color:  white;
  padding: 5px 10px;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: light;
  z-index: 10;
  pointer-events: none;
}


.image-container {
  width: 100%;
  height: 0; /* Set height to 0 */
  padding-top: 71.43%; /* 250/350 * 100 */
  position: relative; /* Needed for absolute positioning of the image */
  overflow: hidden;
  border-radius: 5px;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

.text-container {
  height: 40px; /* Fixed height */
  padding: 5px 0px 20px 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  color:#333;

}

.pourcentage{
  font-size: 0.8em;
  padding-left: 5px;
  color:#0D4DFF;
  font-weight: 500;
  font-family: proxima-nova,arial,sans-serif;
}

.text-content {
  /* Assurez-vous que le contenu textuel et les pictogrammes ne se chevauchent pas */
  flex: 1;
}

.pictogram-container {
  position: absolute; /* Positionnement absolu par rapport au titre */
  right: 0px; /* Aligné à droite, avec un peu d'espace */
  top: 0; /* Aligné en haut avec le titre */
  padding-top:5px;
  display: flex;
  align-items: center; /* Alignement vertical des pictogrammes */
}


.pictogram-container img {
  height: 15px; /* Taille fixe pour les pictogrammes */
  width: 15px; /* Largeur fixe pour les pictogrammes */
  margin-left: 10px; /* Espace entre les pictogrammes */
}

.like-icon:hover {
  cursor: pointer; /* Change le curseur en une main lorsque survolé */
}


.more-options {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 15px; /* Assurez-vous que cela correspond aux dimensions de vos autres pictogrammes */
  width: 15px; /* Assurez-vous que cela correspond aux dimensions de vos autres pictogrammes */
  letter-spacing:0.5px;
  margin-left: 5px;
  margin-top: 5px;
  text-decoration: none;
  font-weight: 800;
  font-size: 12px; /* Ajustez la taille de l'icône si nécessaire */
  color: #000; /* Ou toute autre couleur que vous utilisez pour vos CTA */
  border-radius: 50%; /* Pour rendre le bouton circulaire */
}

.item-title, .item-description {
  margin: 0; /* Removes default margins */  
}

.item-title {
  font-size: 1em;
  font-weight: 600;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative; /* Pour que les pictogrammes soient positionnés par rapport au titre */ 
  margin-bottom: -2px; /* Ajustez cette valeur selon vos besoins */ 
}

.item-description {
  font-size: 0.8em;
  color: #808080; /* Couleur grise pour le texte placeholder */
  font-weight: 200;
  font-family: 'proxima-nova',arial,sans-serif;
  margin-top: 0;
}

@media screen and (max-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
  }
 
  .image-container, .text-container {
    width: 100%; /* Full width on small screens */
  }
}



/* POP UP THUMBNAIL*//* POP UP THUMBNAIL*//* POP UP THUMBNAIL*//* POP UP THUMBNAIL*//* POP UP THUMBNAIL*//* POP UP THUMBNAIL*//* POP UP THUMBNAIL*//* POP UP THUMBNAIL*//* POP UP THUMBNAIL*//* POP UP THUMBNAIL*//* POP UP THUMBNAIL*//* POP UP THUMBNAIL*//* POP UP THUMBNAIL*//* POP UP THUMBNAIL*//* POP UP THUMBNAIL*/

.popupOverlay, .popup * {
  box-sizing: border-box;
}

/* Styles pour #popupOverlay */
#popupOverlay {
  display: none; /* Caché par défaut */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1040; /* Doit être inférieur à celui du popup et supérieur à celui du contenu de la page */
  overflow-y: auto; /* Permettre le défilement global */
  -webkit-overflow-scrolling: touch; /* Assurez la compatibilité avec iOS */
}

#popupOverlay::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3); /* Couleur noire avec transparence */
  backdrop-filter: blur(10px); /* Appliquez un effet de flou */
  -webkit-backdrop-filter: blur(10px); /* Préfixe spécifique pour Safari */
  z-index: -1; /* Derrière le contenu du popupOverlay */
}

/* Styles spécifiques pour Safari */
@supports (-webkit-backdrop-filter: blur(10px)) and (not (backdrop-filter: blur(10px))) {
  #popupOverlay::before {
    backdrop-filter: none;
    -webkit-backdrop-filter: blur(10px); /* Préfixe spécifique pour Safari */
  }
}

/* Styles pour le contenu du popup */
#popupOverlay .popup {
  position: absolute;
  top: 50px; /* Décalage initial */
  left: 50%;
  transform: translateX(-50%);
  width: 80%; /* Largeur par défaut */
  max-width: 80%;
  height: auto; /* S'ajuster à la hauteur du contenu */
  background: rgba(255, 255, 255, 1);
  z-index: 1050; /* Doit être supérieur à celui de #popupOverlay */
  padding: 50px;
  box-sizing: border-box;
  overflow-y: auto; /* Permettre le défilement global */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  border-radius: 5px;
}

#popupOverlay .popup::-webkit-scrollbar {
  width: 0;  /* Safari et Chrome */
  display: none; /* Masquer la scrollbar */
}

/* Media Queries */
@media screen and (min-width: 1920px) {
  #popupOverlay .popup {
    width: 50%; /* Ajustez en fonction de vos besoins */
  }
}

@media screen and (max-width: 1080px) {
  #popupOverlay .popup {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    top: 0; /* Décalage initial */
  }
}

@media screen and (max-width: 768px) {
  #popupOverlay .popup {
    padding: 0;
  }
}

/* Neutraliser toute classe supplémentaire ajoutée par Safari */
#popupOverlay.scrolled::before,
#popupOverlay.open::before,
#popupOverlay.active::before,
#popupOverlay.focused::before {
  background-color: rgba(0, 0, 0, 0.3) !important; /* Assurez-vous que l'opacité reste constante */
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}





/* Désactiver le défilement de la page lorsqu'un popup est ouvert */
.no-scroll {
  overflow: hidden;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: none; /* Caché par défaut */  
}

.overlay-inner {
  width: 80%; /* ou la largeur que vous souhaitez */
  max-width: 500px; /* une largeur maximale peut être utile */
  margin: auto; /* Centre le contenu */
 
  /* Ajoutez du padding, des bordures, des ombres ou d'autres styles comme vous le souhaitez */
}

.popup-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* Centrer verticalement */
  max-width: 70vw;
  margin: auto;
  padding: 0;
  box-sizing: border-box;
  height: 100%; /* Prendre toute la hauteur disponible */
}

@media screen and (max-width: 768px) {
  .popup-content {
      align-items: center; /* Aligner les éléments verticalement */
      justify-content: center; /* Aligner les éléments horizontalement */
  }

  .popup-content .colonne-gauche,
  .popup-content .colonne-droite {
      margin: 0; /* Réinitialise les marges */
      padding: 10px; /* Ajoute un padding pour ajuster l'alignement */
  }
}

.image-principale-et-progressbar {
  text-align: center; /* Centrer le contenu de la barre de progression et de l'image principale */
  width: 100%; /* S'assurer que le conteneur prend toute la largeur disponible */
}

.loadingIndicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none; /* Cacher par défaut */
}

.loaded {
  display: block !important; /* Afficher une fois que l'image est chargée */
}


/* Container pour les deux colonnes */
.columns-container {
  display: flex; /* Utiliser flex pour organiser les enfants horizontalement */
  width: 100%; /* Prendre toute la largeur disponible */
  padding-top:100px;
}

.colonne-gauche {
  flex-basis: 40%; /* Prendre environ un tiers de l'espace disponible */
  padding-right: 20px; /* Espace entre les colonnes si nécessaire */
}


.colonne-gauche .texte-description{
  color: #808080;
}

.colonne-droite {
  flex-basis: 60%; /* Prendre les deux tiers de l'espace disponible */
  padding-left: 10px; /* Espace entre les colonnes si nécessaire */
}

/* Style pour les vidéos dans la colonne de droite */
.colonne-droite video {
  max-width: 100%; /* Ajuste cette valeur selon la taille désirée */
  max-height: none; /* Ajuste ou supprime cette propriété selon le besoin */
  height: auto;
  margin: 10px 0; /* Espacement entre les vidéos */
}

@media screen and (max-width: 1080px) {
  .columns-container {
    flex-direction: column; /* Les colonnes sont empilées verticalement */
  }

  .colonne-droite{
   padding:0px; 
  }

  .colonne-droite, .colonne-gauche {
    width: 100%; /* Les colonnes prennent toute la largeur disponible */
  }
}

.carousel-spacer {
  height: 100px; /* Hauteur de l'espaceur */
}

.swiper-container {
  width: 100%; /* Ajuster la largeur du carrousel */
  height: auto; /* Hauteur automatique en fonction de l'image */
  margin: 0 auto; /* Centrer le carrousel si nécessaire */
  position: relative;
  overflow: hidden;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  justify-content: center;
  align-items: center;
  width: 100%; 
  visibility: hidden;
  opacity: 0; /* Rend les slides non actives moins visibles */
  transition: none; /* Transition douce pour l'opacité */
}

.swiper-slide-active {
  opacity: 1; /* Les slides actives sont pleinement visibles */
  display: block;
  visibility: visible;
}

.swiper-slide.swiper-slide-visible {
  visibility: visible; /* Seule la diapositive avec la classe `swiper-slide-visible` est visible */
}

.swiper-slide-hidden {
  visibility: hidden;
}

.swiper-slide img {
  width: auto; /* ou 100% si vous voulez que l'image couvre tout le slide */
  max-height: 100%; /* pour s'assurer que l'image ne dépasse pas la hauteur du slide */
}


.swiper-button-prev, .swiper-button-next {
  position: absolute;
  top: 50%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  z-index: 10;
  cursor: pointer;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.2); /* Fond plus visible */
  font-weight: 800;
}

@media (max-width: 768px) {
  .swiper-button-prev,
  .swiper-button-next {
    display: none;
  }
}


/* Styles spécifiques pour le bouton Prev */
.swiper-button-prev {
  left: 10px;
}

.swiper-button-prev::after {
  font-size: 10px;
  color: #ffffff;
 
  vertical-align: middle;
}

/* Styles spécifiques pour le bouton Next */
.swiper-button-next {
  right: 10px;
}

.swiper-button-next::after {
  font-size: 10px;
  color: #ffffff;
 
}


/* Styles spécifiques à Safari */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  .swiper-button-prev, .swiper-button-next {
      -webkit-transform: translate3d(0, 0, 0); /* Pour Safari */
      transform: translate3d(0, 0, 0); /* La version standard pour les autres navigateurs */
  }

  .swiper-button-prev::after, .swiper-button-next::after {
      -webkit-font-smoothing: antialiased; /* Améliore le rendu des polices sur WebKit */
  }
}


.swiper-pagination-bullet {
  background: #000; /* ou la couleur souhaitée */
}

.carousel-feedback-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  color: white;
  z-index: 100; /* Assurez-vous qu'il est au-dessus des images du carrousel */
  display: none; /* Initialement caché */
}


/* POP UP : Images à l'intérieur du popup */

.colonne-droite img {
  cursor: zoom-in; /* Change le curseur en forme de main lors du survol */
}

.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: none; /* Caché par défaut */
  justify-content: center;
  align-items: center;
  z-index: 1050; /* S'assure que la lightbox est au-dessus des autres éléments */
}

.lightbox img {
  max-width: 80%; /* Ajuste à la taille désirée */
  max-height: 80%; /* Ajuste à la taille désirée */
}

@media screen and (max-width: 768px) {
  .lightbox img {
    max-width: 100%; /* Ajuste à la taille désirée */
    max-height: 100%; /* Ajuste à la taille désirée */
  } 
}

/* Style pour l'image principale */
.popup-content .image-principale img {
  max-width: 100%;
  max-height: 100vh;
  height: auto;
  margin: 10px 0; /* Espacement entre les images */ 
}

@media screen and (max-width: 768px) {
  .popup-content .image-principale img {
     margin:-10px 0; /* Espacement entre les images */ 
  }
}

/* Style pour les images secondaires */
.popup-content .colonne-droite img {
  max-width: 100%; /* Ajuste cette valeur selon la taille désirée */
  max-height: none; /* Ajuste ou supprime cette propriété selon le besoin */
  height: auto;
  margin: 10px 0; /* Espacement entre les images */
}



@media screen and (max-width: 768px) {
  .popup-content img {
    max-width: 100%;
  } 
    
  .popup-content{
     max-width: 100vw;
  }
    
  .popup {
  padding: 0px;     
  } 
    
  .progress-text {
   padding:30px;
   margin-top:0px;
   margin-bottom:0px;
   }
    
  .popup-content .image-grid img:not(:first-child) {
    margin: 20px 0; /* Applique une marge seulement aux images qui ne sont pas la première */
  }    
}

.image-spacer {
  height: 50px; /* Ou la hauteur que vous souhaitez pour l'espace */
  width:100%;
}

/* POP UP : Le bouton de fermeture en haut à droite */

.close-btn {
  position: fixed; /* Positionnement relatif au conteneur parent */
  top: 50px; /* Espace depuis le haut du pop-up */
  right: calc((100% - 80%) / 2 - 60px); /* Espace depuis la droite du pop-up */
  background-color: rgba(255, 255, 255, 0.5);
  color: white; /* Couleur du texte du bouton */
  border: none; /* Pas de bordure */
  border-radius: 50%; /* Forme circulaire */
  cursor: pointer; /* Curseur en forme de main lors du survol */
  padding: 10px; /* Espace intérieur autour de la croix */
  display: flex; /* Utilisation de Flexbox pour centrer la croix */
  align-items: center; /* Centre verticalement le contenu dans le flex container */
  justify-content: center; /* Centre horizontalement le contenu dans le flex container */
  width: 20px; /* Largeur du bouton */
  height: 20px; /* Hauteur du bouton */
  line-height: 30px; /* Hauteur de la ligne pour centrer le texte si flex n'est pas pris en charge */
  font-size: 20px; /* Taille de la croix */
  z-index: 1052; /* Assure que le bouton est au-dessus des autres éléments */
}

@media screen and (min-width:1920px){
  .close-btn {
    right: calc((100% - 50%) / 2 - 70px); /* Espace depuis la droite du pop-up */
  }
}

@media screen and (max-width:1080px){
 
  .close-btn  {
    
    top: 20px; /* Espace depuis le haut du pop-up */
    right: 20px; /* Espace depuis la droite du pop-up */
    color: #FFF!important; /* Couleur du texte du bouton */
    background-color: rgba(0, 0, 0, 0.3);
    width: 20px!important; /* Largeur du bouton */
    height: 20px!important; /* Hauteur du bouton */
  }

  .columns-container {
    padding-top: 50px; /* Réduire ou supprimer le padding en haut du conteneur des colonnes */
  }
  
  .colonne-gauche {
    margin-top: 20px; /* Réduire ou supprimer la marge en haut de la colonne de gauche */
  }
}


/* POP UP : Progress-bar */

.progress-bar-container {
  width: 100%; /* Full width */
  background-color: #F2F2F2; /* Light grey background */
  border-radius: 30px; /* Rounded corners */
  margin: 20px auto; /* Centré horizontalement avec une marge supérieure et inférieure */
  box-sizing: border-box;
  position: relative; /* Position relative pour le positionnement absolu des enfants */
}

.progress-bar {
  width: 0%; /* Largeur initiale, à modifier dynamiquement avec JS */
  height: 35px; /* Height of the progress bar */
  border-radius: 30px 0 0 30px; /* Rounded corners */
  transition: width 0.5s; /* Smooth transition for width changes */
  position: relative; /* Needed for proper z-index functioning */
  z-index: 1; /* Ensure the bar is above the text */
  background-color: #0D4DFF;
}

@media screen and (min-width: 1200px) {
  .progress-bar-container {
    margin: 50px auto 10px; /* Centré horizontalement avec une marge supérieure et inférieure */
  }
}

@media screen and (max-width: 768px) {
  .popup-content img {
  margin: -50px 0px; /* Espacement entre les images */  
  }
    
  .progress-bar-container {
    margin: 0px auto 10px;
    /* Assurez-vous que la barre de progression ne touche pas les bords de l'écran */
    border-radius: 0; /* Si vous voulez des bords carrés */
  }
    
 .progress-bar {
  border-radius: 0px;      
  }  
}

.progress-bar-text {
  position: absolute; /* Absolute position relative to the parent */
  top: 0; /* Align top of the text with the container */
  left: 0; /* Align left of the text with the container */
  width: 100%; /* Full width to ensure centering */
  line-height: 38px; /* Adjust this to match the height of your progress bar */
  z-index: 2; /* Ensure the text is above the progress bar */
  color: #00FFA9; /* Text color - change as needed */
  font-weight: 400; /* Bold text - optional */
}


/* POP UP : Texte */


.popup-title{
   margin-top:0px;
   margin-bottom:20px;
   font-weight: 600; /* Ajoutez cette ligne pour une graisse de police semibold */
   line-height: 1.2;
}


.popup-subtitle{
  padding-top:10px;
   margin-top:0px;
   margin-bottom:0px;
}

#popupOverlay .popup .colonne-gauche .popup-subtitle {
  line-height: 2.9 !important;
}


.colonne-gauche .texte-description{
 text-align: left;
 margin-top: 30px; /* Adjust spacing as needed */
 margin-bottom: 30px;
 
 line-height: inherit;
 font-size: 18px;
 letter-spacing:0.5px;
 color: #808080; /* Couleur grise pour le texte placeholder */
 font-weight: 100!important;
 font-family: 'proxima-nova',arial,sans-serif;
 text-transform:none;
  /* Add styles for your text here */
}



.popup-pictogram-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px; /* Espace entre les pictogrammes */
  margin-top: 20px; /* Espace au-dessus du conteneur de pictogrammes */
  margin-bottom: 50px;
}

.ethical-commitment{
  font-weight: 100!important;
  color: #0D4DFF;
  font-size: 14px;
  font-family: 'proxima-nova',arial,sans-serif;
  text-transform: uppercase;
}

@media screen and (max-width: 768px) {
  .colonne-gauche .texte-description{
    margin-bottom: 50px;
  }
  #popupOverlay .popup .colonne-gauche{
      padding: 30px;
    }

  .popup-pictogram-container {
    margin-top:30px;
    margin-bottom:30px;
   
  }

  .progress-text {
    margin-bottom: -20px; /* Adjust spacing as needed */
     /* Add styles for your text here */
   }
   
}

/* Ajoutez ceci à votre fichier CSS existant */


/* FOOTER *//* FOOTER *//* FOOTER *//* FOOTER *//* FOOTER *//* FOOTER *//* FOOTER *//* FOOTER *//* FOOTER *//* FOOTER *//* FOOTER *//* FOOTER *//* FOOTER *//* FOOTER *//* FOOTER *//* FOOTER *//* FOOTER *//* FOOTER *//* FOOTER *//* FOOTER *//* FOOTER *//* FOOTER *//* FOOTER *//* FOOTER *//* FOOTER *//* FOOTER */

.container3 {
  display: flex;
  flex-wrap: wrap; /* Permet aux colonnes de passer à la ligne sur des petits écrans */
  gap: 20px; /* Espacement entre les colonnes */
  padding:50px;
  
}

.footer-col {
  flex: 1; /* Les colonnes prennent une part égale de l'espace disponible */
  min-width: 250px; /* Largeur minimum de chaque colonne pour éviter qu'elles deviennent trop étroites */
}

@media (max-width: 776px) {

  .container3 {
    padding:5px;
  }

  .footer-col {
      flex-basis: 100%; /* Chaque colonne prend la pleine largeur sur les petits écrans */
  }
}

footer h6, footer p {
  color: #CCCCCC;  /* Couleur grise pour le texte placeholder */
 font-weight: 200!important;
 font-family: 'proxima-nova',arial,sans-serif;
}

footer{
padding-bottom:10px; 
}

footer .copyright{
margin-bottom:1vh;
text-align: center;
background-color:#FFF;
    
}

footer .copyright a{
color: #CCCCCC; 
text-decoration: none;

}

footer .copyright a:hover{
opacity: 0.5;    
}

.fas.fa-chevron-down {
    padding-top:5px;
    color: #0D4DFF; /* Remplacez ceci par la couleur de votre choix */
}

:focus {
    outline: none;
}

.arrow-down, .arrow-up {
    cursor: pointer;
    /* Autres styles pour la flèche (couleur, taille, etc.) */
}



#arrow {
  padding-top:2px;
  cursor: pointer; /* Ajoute un effet de pointeur au survol */
  width: 10px; /* Ajustez la taille selon vos besoins */
  height: 10px; /* Ajustez la taille selon vos besoins */
  vertical-align: middle; /* Pour aligner verticalement le chevron avec le texte */
  transition: transform 0.3s ease; /* Animation douce de la rotation */
}

.rotated {
  transform: rotate(180deg); /* Rotation lorsque la classe .rotated est ajoutée */
}

.rotated {
    transform: rotate(180deg);
}

/*MADE BY COCONUT VALLEY*/

#made-by-CoconutValley{
    padding: 15px 0 40px 0;    
}


#made-by-CoconutValley .font-made-by-CoconutValley{
   padding:20px 20px;
}

#made-by-CoconutValley h2{
  text-transform: uppercase;
  padding-bottom:10px;
  color: #000;
  font-size: 1rem;
  font-weight: 300;
  
}

#made-by-CoconutValley p{
  text-transform: uppercase;
  color: #000;
  font-size: 0.8rem;
  text-align: left;
  padding-bottom:50px;
  font-weight: 300;
  
}

@media screen and (max-width:776px){
  #made-by-CoconutValley p{
  text-align:left;    
  }  
}

/*GENERAL-TERMS*/

#legal-notices-trademarks{
    padding: 45px 0 80px 0;    
}

#legal-notices-trademarks a{
 
   color:#0D4DFF; 
}

#legal-notices-trademarks .picture-legal-notices-trademarks{
   display:block;
   margin:auto;
   max-width:80%;
}

#legal-notices-trademarks .font-legal-notices-trademarks{
   padding:50px 20px;
}


@media screen and (max-width:776px){
  #legal-notices-trademarks p{
  text-align:left;    
  }  
}

.close-footer{
    text-align: center;
    padding: 10px;
    font-weight: 300;
    cursor: pointer;
    /* Stylez selon vos préférences (couleur, taille, hover effect, etc.) */
}

/* Styles spécifiques pour Safari */
@media not all and (min-resolution: .001dpcm) { 
  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
    #popupOverlay, .popup {
      overflow-y: scroll !important; /* Forcer le défilement */
    }
  }
}