/* Feuille de style pour le site Neurodesign.fr 
développé par Greg BARRY @ Neurodesign  - May 2025 © */

* {
  font-family: "bai jamjuree", sans-serif;
}


/* Styles par défaut pour les écrans très petits (moins de 480px) */


body {
    font-family: "bai jamjuree", sans-serif;
    font-size: 10px;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
  }
  
  html,
  body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }
  
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  #topAnchor {
    width: 4rem;
    height: 4rem;
}

.strong {
  font-weight: 700;
}




/* HERO Banner */

/* Styles par défaut pour les écrans très petits (moins de 480px) */
/* Base pour les mobiles : image en bas */

.hero-banner {
    display: flex;
    flex-direction: column-reverse;
    min-height:40vh;
    background-color: #21d3d3;
    color: white;
    /* Suppression du padding qui causait des soucis */
    text-align: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding-top: 100px; /* Exemple de padding-top pour la hauteur de la navbar (ajuste si besoin) */
    justify-content: flex-end; /* Pousse le contenu vers le bas */
    margin-top: 0rem;
  }
  
  .hero-image {
    width: 60%;
    height: auto;
    bottom: 0;
    z-index: 1;
    margin: 0 auto;
  }
  
  .hero-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    height: 100%;
    margin-top: 50px;
  }
  
  .hero-content {
   max-width: 90%;
    position: relative;
    z-index: 2;
    margin-bottom: 20px; 
    margin-top: 1rem;
  }
  
  .hero-content h1 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
  }
  
  .hero-content p {
    font-size: 1rem;
    color:#300640;
  }

 /* Graisse des paragraphes */
  #firstParag, #CreationsParagraphe {
    font-weight: 500;}

   /* CAROUSELS */ 

   .carousels {
    padding: 1.25rem 0;
}

.carousel_1, .carousel_3 {
    background-color:#19203B;
}

.carousel_2 {
    background-color: #FA9C1D;
}

/* === Carrousel 1 (Droite > Gauche) === */
.carousel-container:nth-child(1) {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.carousel-container:nth-child(1) .carousel-track {
    display: flex;
    width: max-content;
    animation: scrollRightLeft_1 30s linear infinite; /* Nouvelle animation */
}

.carousel-container:nth-child(1) .carousel-track img {
    width: 480px;
    height: 270px;
    margin-right: 10px;
}

@keyframes scrollRightLeft_1 {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-1 * (480px + 10px) * 5)); /* Déplace vers la gauche */
    }
}


/* === Carrousel 2 (Gauche > Droite) === */
.container_carousel.carousel_2 {
    width: 100%;
    overflow-x: hidden;
}

.container_carousel.carousel_2 .track_carousel {
    display: flex;
    animation: scrollLeftRight_2 15s linear infinite; /* Nouvelle animation */
    width: calc((480px + 10px) * 5);
}

.container_carousel.carousel_2 .track_carousel img {
    width: 480px;
    height: 270px;
    margin-right: 10px;
}

@keyframes scrollLeftRight_2 {
    0% {
        transform: translateX(calc(-1 * (480px + 10px) * 5)); /* Départ à gauche */
    }
    100% {
        transform: translateX(0%); /* Arrivée à droite */
    }
}

/* === Carrousel 3 (Droite > Gauche, boucle continue - approche duplication HTML) === */
.carousel-container.carousel_3 {
    overflow: hidden;
    width: 100%;
}

.carousel-container.carousel_3 .track_carousel {
    display: flex;
    animation: scrollRightLeftLoop_3 30s linear infinite;
    width: calc((480px + 10px) * 10); /* Double la largeur */
}

.carousel-container.carousel_3 .track_carousel img {
    width: 480px;
    height: 270px;
    margin-right: 10px;
}

@keyframes scrollRightLeftLoop_3 {
    0% {
    transform: translateX(0%);
    }
    100% {
    transform: translateX(calc(-1 * (480px + 10px) * 5)); /* Déplace d'une "série" */
    }
}

/* Animation des produits en slide-up */
@keyframes slide-up-bounce {
    0% {
      opacity: 0;
      transform: translateY(80px);
      filter: blur(4px);
    }
    60% {
      opacity: 1;
      transform: translateY(-10px);
      filter: blur(0);
    }
    80% {
      transform: translateY(4px);
    }
    100% {
      transform: translateY(0);
    }
  }
  .product.animate {
    animation: slide-up-bounce 0.8s ease-out forwards;
  }
  

/* Styles communs */

.purpleOne {
    width: 100%;
    margin:0 auto;
    background-color: #300640;
    padding: 0 auto;

}

/* PRODUITS */

/* Promos */

.Promos {
  width: 18rem;
  height: 12rem;
  margin: 7rem auto 0 auto;
  background-color:#e6de12;
  border: #21d3d3 solid 4px;
  padding-bottom:1rem;
  transform: rotate(-3deg);
  }

  .textesPromo {
    margin: auto;   
  }

  #DatePromo {
    font-size: 1rem;
    color: #000;
    margin: .3rem 0 0 0;
    padding:1rem 0 .5rem 0;
    text-align: center;
    width: 100%;
    font-weight: 400;
  }

  #Slog {
    margin: 0;
    font-size: 2rem;
    color:#FFF;
    width: 100%;
    text-align: center;
    color: rgb(227, 24, 24);
  }
  .prefixe, .code {
    font-size: 1.5rem;
  }
 .bold {

    font-weight: 800;
  }


/* Article Produits et Services */
#produitServices {
    width: 80%;
    margin: 0rem auto

}

#productContainer {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    padding: 4rem 0;
  }
  
  .product {
    width: 100%;
    text-align: center;
    padding: 8% 2%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 2rem 0;
   
  }
  
  .textesProduitServices h2 {
    color: #21d3d3;
    padding-top: 2rem;
    margin: 0;
    font-size: 1.5rem;
  }

  .textesProduitServices p {
    color: #9580D3;
    font-size: 1rem;
  }

  .imageProduct {
    width: 50%; 
  }
  
  .h3Products {
    text-align: center;
    font-size: 1rem;
    padding: 2rem  0 0 0;
    margin: 0;
    color: #21d3d3;
  }
  
  .paragrapheProducts {
    text-align: center;
    padding: 0;
    margin: .5rem 0;
    color: #9580D3;
    font-size: .9rem;
  }
  
  .priceProducts {
    text-align: center;
    color:green;
    align-self: center;
    padding: .4rem 0;
    margin: 0;
    font-size: 1rem;
  }
  
  .specialeType {
    color: #867190;
    font-size: .7rem;
  }
  

  /* Bouton En Savoir +  Produits */

.butonSavoirPlus {
    background-color:#523d91;
    border-radius: .5rem;
    padding: .5rem 2rem;
    margin: 1rem;
}

.linkButton_EnSavoirPlus {
text-decoration: none;
color: #21d3d3;

}

  /* Annimation des Produits */

  
    /* Cards Produits et Services */
  
    .mauve {
        background-color: #523d91;
        padding-top:4rem;
        margin: 0;
    }

    .mauve h2 {
        width: 20rem;
        color: #21d3d3;
        margin: 0 auto;
        font-size: 2rem;
    }
   .mauve p {
        width:20rem;
        margin: 0 auto;
        font-size: 1rem;
        color:#FFF;
        font-weight: 300;
        margin-top: 1rem;
        margin-bottom:2rem;
    }
  
  .produitsCreations {
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    flex-basis: 100%;
    background-color: #523d91;
    justify-content: center;
    padding: 3rem 0 0rem 0;
    flex-direction:column;
    margin: 0 auto;
    align-items: center;
    margin-top: -3rem;
  }
  
  .produitsCreations .cards {
    width: 16rem;
    text-align: center;
    padding: 0 0 2rem 0;
    margin: 2rem;
    border: #523d91 solid 1px;
    background-color: #ffffff;
    border-radius: 2rem;
    overflow: hidden;
  }
  .cards h3 {
    font-size: 1.2rem;
    font-weight: 500;
    color: #523d91;
  }
 .cards p {
    font-size: 0.8rem;
    text-align: center;
    padding: 0 1.2rem;
    color: #867190;
    display: block;

  }
  
  /*positionement de l'image dans les cartes */
    
  #img_Print {
    margin-top: 1rem;
  }
  
  #card-3 img {
  width: 100%;
  }
  
  #card-2 img {
  width: 100%;
  }
  
  #card-1 img
  {
    width: 100%;
    margin: 0;
  
  }
  
  /* Bouton voir */
  
  .boutonVoir {
    padding: 2rem 0 1rem 0;
  }
  
  .boutonVoir a {
    background-color: #e6de12;
    padding: 0.8rem 2rem;
    color: #523d91;
    border-radius: 1rem;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
  }


  /* Zone : On en Discute ? */
.containerDiscute {
    padding: 7rem 0 3rem 0;
    margin: 0;
}

aside #botAnim {
    margin: 0;
}

 .purpleOne #zoneDiscute {
    width: 80%;
    margin:0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border:#21d3d3 solid 8px;
    border-radius: 1.5rem;
    padding:1rem;
    background-color: #FFF;
  }

  #blocTextDiscute h2 {
    margin: 1rem 0;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #523d91;
  }

  #blocTextDiscute {
    margin:2rem;

  }

  #blocTextDiscute p {
    font-family: "bai jamuree", sans-serif;
    font-size: 1.2em;
    line-height: 1.3em;
    color: #523d91;
    font-weight: 200;
    margin: 0;
    padding: 0;
  }

/* Zone info complémentaires */

#infosPlus {
  width: 20rem;
  margin: 2rem auto;
  padding-bottom: 2rem; 
}
#infosPlus h2 {
  font-size:2rem;
  color: #21d3d3;
}
#infosPlus h3 {
  font-size: 1rem;
  color: #21d3d3;
}

#infosPlus p {
  color: #9580D3;
  font-size: .9rem;
}

.pictoTextes {
  display: flex;
  flex-direction:column;
  justify-content:center;
  text-align: center;
  padding-top: 2rem;
  margin: 4rem auto;
  align-items: center;

}
.textes_pictogrammes {
  width: 60%;
  padding: 1.5rem 0;
}

.textes_pictogrammes img {
  width: 50%;
}

#firstImagePicto {
  width: 40%;
}
#lastImagePicto {
  width:39.5%;
}
  /* Zone On en discute ? */


  #blocTextDiscute #paragDiscute {
    padding:0;
    margin:0;
    width: 100%;
    text-align: justify;
  }

  /* hot spot Contact */

  #hotSpotContact {
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 2rem; 
  }

  /* CTA J'ai un Projet */
  #boutonProjet {
    font-family: "bai jamjuree", sans-serif;
    padding: 1rem 0rem;
    border: #523d91 solid 3px;
    background-color: #523d91;
    border-radius: 2rem;
    margin: 0;
    width: 11rem;
    text-align: center;
    margin-bottom: .6rem;
   
  }

  #boutonProjet a {
    color: #fff;
    text-decoration: none;
    font-size: .9rem;
  }

  #blocTextDiscute #zoneTel {
    display: flex;
    flex-direction: column;
    padding: .4rem 0;
    margin-top: .6rem;
    width: 11rem;
    justify-content: center;
    align-items: center;
    border:#e6de12 1px solid;
    border-radius: 2rem;
  }
  #zoneTel a {
    font-size: 1rem;
    color:#523d91;
    padding-left: 0rem;
    padding-top: 1rem;
    font-weight: 600;

  }

  #zoneTel p {
    font-size: .5rem;
    margin-top: -.05rem;
  }

  #blocNum {
    margin-top: .05rem;
  }

  #blocNum img {
    margin-right: .5rem;
    width: 1rem;
  }

  /* Bloc Réseaux sociaux */

  #socialBloc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 1rem 2rem 1rem;
  }
  #socialBloc h3 {
    color: #21d3d3;
    font-weight: 400;
    font-size: 1.2rem;
    width: 80%;
    text-align: center;
    margin: 6rem auto 1rem auto;
  }
  #socialBloc p {
    font-family: "bai jamjuree", sans-serif;
    text-align: left;
    font-size: 0.9rem;
    font-weight: 300;
    color: #9580D3;
    margin-bottom: 0.4rem;
    width: 90%;
    text-align: center;
    margin: 1rem auto;
  }
  .break {
    display: inline;
  }
  #socialBloc img {
    width: 32px;
    height: 32px;
    margin: 1rem;
    opacity: 0.8;
  }
  #socialIcones {
    display: flex;
    justify-content: center;
    margin-left: -0.4rem;
    margin-bottom: 0.5rem;
  }
  
  #socialIcones a img:hover {
    opacity: 1;
  }
  
  
  
  /*-------------------------------------*/
  /*                                     */
  /* Very small device (more than 480px) */
  /*                                     */
  /*-------------------------------------*/
  
  @media (min-width: 480px) {

    /* Hero banner */
   
    .hero-image {
        width: 50%;
        height: auto;
        bottom: 0;
        z-index: 1;
        margin: 0 auto;
      }

    .hero-content {
        padding-top: 2rem;
    }
    .hero-content h1 {
    font-size: 1.8rem;
    }

     .hero-content p {
        font-size: 1.1rem;
    }

/* Promos */

.Promos {
  width: 22rem;
  height: 12rem;
  margin: 7rem auto 0 auto;
  background-color:#e6de12;
  border: #21d3d3 solid 4px;
  padding-bottom:1rem;
  transform: rotate(-3deg);
  }

  .textesPromo {
    margin: auto;   
  }

  #DatePromo {
    font-size: 1rem;
    color: #000;
    margin: .3rem 0 0 0;
    padding:1rem 0 .5rem 0;
    text-align: center;
    width: 100%;
    font-weight: 400;
  }

  #Slog {
    margin: 0;
    font-size: 2rem;
    color:#FFF;
    width: 100%;
    text-align: center;
    color: rgb(227, 24, 24);
  }

 .bold {
    font-weight: 800;
    display: block;
  }
  }

  
  /*-------------------------------------------------*/
  /*                                                 */
  /* Applies to tablets and larger (more than 768px) */
  /*                                                 */
  /*-------------------------------------------------*/
  
  @media (min-width: 768px) {

    #topAnchor {
        width: 6rem;
        height: 6rem;
    }

    /* Hero Banner */
    .hero-banner {
        align-items: flex-end; /* Aligne le contenu en bas (l'image y est déjà) */
        justify-content: flex-end; /* S'assure que le contenu reste en bas */
        padding-top: 60px; /* Conserve le padding pour la navbar */
      }
      
      .hero-content {
       margin-top: 4rem;
       margin: 8rem auto 2rem auto;
         }

         .hero-content h1 {
            font-size: 2rem;
            margin-bottom: 0.5rem;
            width: 60%;
            margin: 0 auto;
          }
          
          .hero-content p {
            font-size: 1rem;
            text-align: left;
            width: 80%;
            margin: 2rem auto 0 auto;
          }



    /* PRODUITS */

 /* Promos */

.Promos {
  width: 30rem;
  height: 10rem;
  margin: 7rem auto 0 auto;
  background-color:#e6de12;
  border: #21d3d3 solid 4px;
  padding-bottom:1rem;
  transform: rotate(-3deg);
  }

  .textesPromo {
    margin: auto;   
  }

  #DatePromo {
    font-size: 1rem;
    color: #000;
    margin: .3rem 0 0 0;
    padding:1rem 0 .5rem 0;
    text-align: center;
    width: 100%;
    font-weight: 400;
  }

  #Slog {
    margin: 0;
    font-size: 2rem;
    color:#FFF;
    width: 100%;
    text-align: center;
    color: rgb(227, 24, 24);
  }
 

 .bold {
    font-weight: 800;
    display: inline;
  }

  /*Produits */

    #productContainer {
        display: flex;
        flex: 1;
        flex-wrap: wrap;
        justify-content: space-around;
        align-content: center;
        width: 100%;
        margin: 4rem auto 0 auto;
        align-self: center;
    }
    
    .product {
        width: 50%;
        text-align: center;
        padding: 4% 2%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    
    }
    
    .imageProduct {
        width: 45%; 
    }
    
    .h3Products {
        text-align: center;
        font-size: 1rem;
        padding: 2rem  0 0 0;
        margin: 0;
        color: #21d3d3;
    }
    
    .paragrapheProducts {
        text-align: center;
        padding: .5rem 0;
        margin: 0;
        color: #9580D3;
        font-size: .85rem;
    }
    
    .priceProducts {
        text-align: center;
        color:green;
        align-self: center;
        padding: .4rem 0;
        margin: 0;
        font-size: 1rem;
    }
    
    .specialeType {
        color: #867190;
        font-size: .7rem;
    }
    
    
    /* Bouton En Savoir +  Produits */
    
    .butonSavoirPlus {
        background-color:#523d91;
        border-radius: .5rem;
        padding: .5rem 2rem;
        margin: 1rem;
    }
    
    .linkButton_EnSavoirPlus {
    text-decoration: none;
    color: #21d3d3;
    
    }
  /* Annimation des Poduits */
    

        /* CARDS Créations */

        .mauve h2 {
            width: 40rem;
            color: #21d3d3;
            margin: 0 auto;
            font-size: 2rem;
        }
        .mauve p {
            width: 40rem;
            margin: 0 auto;
            font-size: 1rem;
            color:#FFF;
            margin-top: 1rem;
        }

        .produitsCreations {  
            padding: 6rem 0 4rem 0;  
          }        

   /* Créations */ 

    .mauve {
      background-color: #523d91;
      padding-top:4rem;
      margin: 0;
  }
    
  .mauve h2 {
      width: 20rem;
      color: #21d3d3;
      margin: 0 auto;
      font-size: 2rem;
  }
 .mauve p {
      width:24rem;
      margin: 0 auto;
      font-size: 1rem;
      color:#FFF;
      font-weight: 300;
      margin-top: 1rem;
      margin-bottom:2rem;
  }

/* Zone info complémentaires */

#infosPlus {
  width: 40rem;
  margin: 2rem auto;
  padding-bottom: 2rem; 
}
#infosPlus h2 {
  font-size:2rem;
  color: #21d3d3;
}
#infosPlus h3 {
  font-size: 1rem;
  color: #21d3d3;
}

#infosPlus p {
  color: #9580D3;
  font-size: .9rem;
}

.pictoTextes {
  display: flex;
  flex-direction:column;
  justify-content:center;
  text-align: center;
  padding-top: 4rem;
  margin: 4rem auto;
  align-items: center;

}
.textes_pictogrammes {
  width: 60%;
  padding: 3rem 0;
}

.textes_pictogrammes img {
  width: 50%;
}

#firstImagePicto {
  width: 40%;
}
#lastImagePicto {
  width:39.5%;
}

  /* Bloc On en Discute ? */

 /* Zone : On en Discute ? */

 .containerDiscute {
  padding: 5rem 0 1rem 0;
}
.purpleOne #zoneDiscute {
  width: 32rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: #21d3d3 solid 8px;
  background-color: #fff;
  border-radius: 1.5rem;
  padding: 2rem 8rem 1rem 8rem;
  margin: 4rem auto;
  flex-direction:column;
}

#botAnim {
  /* Icone HumanBot animée */
  margin-left: -2rem;
}

#blocTextDiscute #paragDiscute {
  padding: 0;
  margin: 0;
}

#blocTextDiscute .typing h2{
  font-family: "bai jamjuree", sans-serif;
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #523d91;   
}

#blocTextDiscute {
  margin-left: 2rem;
  width: 100%;
 
}

#blocTextDiscute p {
  font-family: "bai jamuree", sans-serif;
  font-size: 1.4em;
  line-height: 1.3em;
  color: #523d91;
  font-weight: 200;
  text-align: justify;
  margin: 0;
  padding: 0;
}

/* hot spot Contact */

#hotSpotContact {
  display: flex;
  justify-content:center;
  margin-top: 2rem;
  margin-bottom: .8rem;
  flex-direction: column;
  align-items: center;

}

/* CTA J'ai un Projet */
#boutonProjet {
  font-family: "bai jamjuree", sans-serif;
  padding: 1rem 0rem;
  border: #523d91 solid 3px;
  background-color: #523d91;
  border-radius: 2rem;
  margin: 0;
  width: 18rem;
}

#boutonProjet a {
  color: #fff;
  text-decoration: none;
  font-size: 1.4em;

}

#blocTextDiscute #zoneTel {
  display: flex;
  flex-direction: column;
  padding: .4rem 1rem;
  width: 18rem;
  justify-content: center;
  align-items: center;
  border:#e6de12 1px solid;
  border-radius: 2rem;
  margin-bottom: .5rem;

}
#zoneTel a {
  font-size: 1.2rem;
  color:#523d91;
 padding-left: 1rem;
  padding-top: 1rem;

}

#zoneTel p {
  font-size: .7rem;
  margin-top: -.05rem;
margin-bottom: .2rem;
}

#blocNum {
  margin-top: .05rem;
}
      
        
    
    }
  
  /*----------------------------------------*/
  /*                                        */
  /* Large devices (desktops, 992px and up) */
  /*                                        */
  /*----------------------------------------*/
  
  @media (min-width: 992px) {
    
    #topAnchor {
        width: 4rem;
        height: 4rem;
    }

    .hero-banner {
        flex-direction: row;
        text-align:left;
        align-items:center;
        padding: 0rem 20px;
        padding-top: 100px;
        position: relative;
        min-height: 40vh;
      }

      .hero-image {
        flex: 1;
        max-width: 40%;
        height: auto; 
       margin: 0;
        position: absolute; 
        bottom: 0;
        left: 2rem;
        z-index: 1;
        overflow: hidden;
        display: flex;
        align-items: flex-end;
      }

      .hero-image img {
       display: block;
        width: 75%;
        height: auto;
        object-fit: contain;
        margin-left: -2rem; 
      }

      .hero-content {
        flex: 2;
        max-width: 70%;
        padding-left:50px;
        text-align: left;
        z-index: auto;
        margin:2rem 2rem 2rem 15%;
    
      }

      .hero-content h1 {
        font-size: 2.5rem;
        margin-bottom: 0.5rem;
        width: 100%;
       
      }

      .hero-content p {
        font-size: 1.2rem;
        width: 100%;
        text-align: justify;
      }

      .break {
        display: block;
      }

      /* Styles communs à la page */

    .purpleOne {
    background-color: #300640;
    padding:2rem 0 2rem 0;
    margin: 0 auto;


}

    /* CAROUSELS */ 

    .carousels {
        padding: 1.25rem 0;
    }

    .carousel_1, .carousel_3 {
        background-color:#19203B;
    }

    .carousel_2 {
        background-color: #FA9C1D;
    }

    /* === Carrousel 1 (Droite > Gauche) === */
    .carousel-container:nth-child(1) {
        width: 100%;
        overflow: hidden;
        position: relative;
    }

    .carousel-container:nth-child(1) .carousel-track {
        display: flex;
        width: max-content;
        animation: scrollRightLeft_1 30s linear infinite; /* Nouvelle animation */
    }

    .carousel-container:nth-child(1) .carousel-track img {
        width: 480px;
        height: 270px;
        margin-right: 10px;
    }

    @keyframes scrollRightLeft_1 {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(calc(-1 * (480px + 10px) * 5)); /* Déplace vers la gauche */
        }
    }


    /* === Carrousel 2 (Gauche > Droite) === */
    .container_carousel.carousel_2 {
        width: 100%;
        overflow-x: hidden;
    }

    .container_carousel.carousel_2 .track_carousel {
        display: flex;
        animation: scrollLeftRight_2 15s linear infinite; /* Nouvelle animation */
        width: calc((480px + 10px) * 5);
    }

    .container_carousel.carousel_2 .track_carousel img {
        width: 480px;
        height: 270px;
        margin-right: 10px;
    }

    @keyframes scrollLeftRight_2 {
        0% {
            transform: translateX(calc(-1 * (480px + 10px) * 5)); /* Départ à gauche */
        }
        100% {
            transform: translateX(0%); /* Arrivée à droite */
        }
    }

    /* === Carrousel 3 (Droite > Gauche, boucle continue - approche duplication HTML) === */
    .carousel-container.carousel_3 {
        overflow: hidden;
        width: 100%;
    }
    
    .carousel-container.carousel_3 .track_carousel {
        display: flex;
        animation: scrollRightLeftLoop_3 30s linear infinite;
        width: calc((480px + 10px) * 10); /* Double la largeur */
    }
    
    .carousel-container.carousel_3 .track_carousel img {
        width: 480px;
        height: 270px;
        margin-right: 10px;
    }
    
    @keyframes scrollRightLeftLoop_3 {
        0% {
        transform: translateX(0%);
        }
        100% {
        transform: translateX(calc(-1 * (480px + 10px) * 5)); /* Déplace d'une "série" */
        }
    }


 /* PRODUITS ET SERVICES */

 /* Promos */

.Promos {
  width: 50rem;
  height: 8rem;
  margin: 7rem auto 0 auto;
  background-color:#e6de12;
  border: #21d3d3 solid 4px;
  padding-bottom:1rem;
  transform: rotate(-3deg);
  }

  .textesPromo {
    margin: auto;   
  }

  #DatePromo {
    font-size: 1rem;
    color: #000;
    margin: .3rem 0 0 0;
    padding:1rem 0 .5rem 0;
    text-align: center;
    width: 100%;
    font-weight: 400;
  }

  #Slog {
    margin: 0;
    font-size: 2rem;
    color:#FFF;
    width: 100%;
    text-align: center;
    color: rgb(227, 24, 24);
  }

  .prefixe, .code {
    font-size: 2rem;
  }

 .bold {
    font-weight: 800;
    display: inline;
  }


  #produitServices {
/* largeur et marges de l'article */
    margin: 0rem auto 5rem auto;
    width: 60rem; 
  }

  .textesProduitServices h2 {
    color:#21d3d3;
    font-size: 2rem;
  }


 .textesProduitServices p {
    font-family: "bai jamjuree", sans-serif;
    width:70%;
    margin-bottom: 2rem;
    font-size: 1rem;
    color: #9580D3;
    font-weight: 300;
    width: 60%;
    text-align: justify;
  }


  .textesProduitServices {
    margin-left: 2rem;
  }

  /* PRODUITS */
#productContainer {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  width: 80%;
  margin: 0rem auto 0 auto;
  align-self: center;
  padding-bottom: 0rem;
}

.product {
  width: 33.333%;
  text-align: center;
  padding: 4% 2%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
 
}

.imageProduct {
  width: 45%; 
}

.h3Products {
  text-align: center;
  font-size: 1rem;
  padding: 2rem  0 0 0;
  margin: 0;
  color: #21d3d3;
}

.paragrapheProducts {
  text-align: center;
  padding: .5rem 0;
  margin: 0;
  color: #9580D3;
  font-size: .85rem;
}

.priceProducts {
  text-align: center;
  color:green;
  align-self: center;
  padding: .4rem 0;
  margin: 0;
  font-size: 1rem;
}

.specialeType {
  color: #867190;
  font-size: .7rem;
}


/* Bouton En Savoir +  Produits */

.butonSavoirPlus {
    background-color:#523d91;
    border-radius: .5rem;
    padding: .5rem 2rem;
    margin: 1rem;
}

.linkButton_EnSavoirPlus {
text-decoration: none;
color: #21d3d3;

}

/* Annimation des Poduits */

/* CARDS */

 /* Cards Produits et Services */

 .mauve {
    background-color: #523d91;
    padding-top:4rem;
    margin: 0;
}

.mauve h2 {
    width: 56rem;
    color: #21d3d3;
    margin: 0 auto;
    font-size: 2rem;
}
.mauve p {
    width: 56rem;
    margin: 0 auto;
    font-size: 1rem;
    font-weight: 300;
    color:#FFF;
    margin-top: 1rem;
}

.produitsCreations {
   display: flex;
   width: 100%;
   flex-wrap: nowrap;
   flex-basis: 33.3333%;
   background-color: #523d91;
   justify-content:center;
   padding: 4rem 0rem;
   flex-direction: row;
 }

 .produitsCreations .cards {
   width: 25%;
   text-align: center;
   padding: 0 0 2rem 0;
   margin: 2rem;
   border: #523d91 solid 1px;
   background-color: #ffffff;
   border-radius: 2rem;
   overflow: hidden;
 }
 .cards h3 {
   font-size: 1.2rem;
   font-weight: 500;
   color: #523d91;
 }
 .cards p {
   font-size: 0.8rem;
   text-align: center;
   color: #867190;
 }

 /*positionement de l'image dans les cartes */
 
 #img_Print {
   margin-top: 1rem;
 }

 #card-3 img {
 width: 100%;
 }

 #card-2 img {
 width: 100%;
 }

 #card-1 img
 {
   width: 100%;
   margin: 0;

 }

 /*positionement vertical : icone Produits et Services*/
 #img_Print {
   margin-top: 1rem;
 }

 /* Bouton voir */

 .boutonVoir {
   padding: 2rem 0 1rem 0;
 }

 .boutonVoir a {
   background-color: #e6de12;
   padding: 0.8rem 2rem;
   color: #523d91;
   border-radius: 1rem;
   text-decoration: none;
   font-size: 0.8rem;
   font-weight: 600;
 }

/* Zone info complémentaires */

#infosPlus {
  width: 56rem;
  margin: 2rem auto;
  padding-bottom: 2rem; 
}
#infosPlus h2 {
  font-size:2rem;
  color: #21d3d3;
}
#infosPlus h3 {
  font-size: 1rem;
  color: #21d3d3;
}

#infosPlus p {
  color: #9580D3;
  font-size: .9rem;
}

.pictoTextes {
  display: flex;
  flex-direction:row;
  justify-content:space-between;
  text-align: center;
  padding-top: 4rem;
  margin: 4rem auto;
  align-items: center;

}
.textes_pictogrammes {
  width: 30%;
  padding: 0;
}

.textes_pictogrammes img {
  width: 50%;
}

#firstImagePicto {
  width: 40%;
}
#lastImagePicto {
  width:39.5%;
}

 /* Bloc On en Discute ? */

 /* Zone : On en Discute ? */

 .containerDiscute {
    padding: 5rem 0 1rem 0;
 }
 .purpleOne #zoneDiscute {
    width: 55rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: #21d3d3 solid 8px;
    background-color: #fff;
    border-radius: 1.5rem;
    padding: 2rem 8rem 1rem 8rem;
    margin: 4rem auto;
    flex-direction:row;
  }

  #botAnim {
    /* Icone HumanBot animée */
    margin-left: -2rem;
  }
 
 #blocTextDiscute #paragDiscute {
    padding: 0;
    margin: 0;
  }

  #blocTextDiscute .typing {
    font-family: "bai jamjuree", sans-serif;
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #523d91;   
  }

  #blocTextDiscute {
    margin-left: 2rem;
    width: 100%;
   
  }

  #blocTextDiscute p {
    font-family: "bai jamuree", sans-serif;
    font-size: 1.4em;
    line-height: 1.3em;
    color: #523d91;
    font-weight: 200;
    text-align: justify;
    margin: 0;
    padding: 0;
  }

  /* hot spot Contact */

  #hotSpotContact {
    display: flex;
    justify-content:space-between;
    margin-top: 2rem;
    margin-bottom: .8rem;
    flex-direction: row;
    align-items: center;
 
}

  /* CTA J'ai un Projet */
  #boutonProjet {
    font-family: "bai jamjuree", sans-serif;
    padding: 1rem 0rem;
    border: #523d91 solid 3px;
    background-color: #523d91;
    border-radius: 2rem;
    margin: 0;
    width: 10rem;
  }

  #boutonProjet a {
    color: #fff;
    text-decoration: none;
    font-size: 1.4em;

  }

  #blocTextDiscute #zoneTel {
    display: flex;
    flex-direction: column;
    padding: .4rem 1rem;
    width: 16rem;
    justify-content: center;
    align-items: center;
    border:#e6de12 1px solid;
    border-radius: 2rem;
    margin-bottom: .5rem;
  
  }
  #zoneTel a {
    font-size: 1.2rem;
    color:#523d91;
   padding-left: 1rem;
    padding-top: 1rem;

  }

  #zoneTel p {
    font-size: .7rem;
    margin-top: -.05rem;
  margin-bottom: .2rem;
  }

  #blocNum {
    margin-top: .05rem;
  }


/* Bloc Réseaux sociaux */
  #socialBloc {
    display: flex;
    align-items:center;
    justify-content:center;
    margin: 0 0 5rem 0;
    flex-direction: column;
  }
  #socialBloc h3 {
    width: 100%;
    text-align: center;
    color:#21d3d3;
    font-weight: 600;
    font-size: 1.2rem;
  }
  #socialBloc p {
    width: 100%;
    font-family: "bai jamjuree", sans-serif;
    text-align: right;
    font-size: 0.9rem;
    font-weight: 300;
    color:#9580D3;
    margin-bottom: 0.4rem;
  }
 
  #socialIcones {
    margin-top:2rem;
    display: flex;
  }

  #socialBloc img {
    width: 48px;
    height: 48px;
    margin: 0.2rem 0.6rem;
    opacity: 0.8;
  }

  #socialIcones a img:hover {
    opacity: 1;
  }

}
  
  /* ----------------------------------------------- */
  /*                                                 */
  /* X-Large devices (large desktops, 1200px and up) */
  /*                                                 */
  /* ----------------------------------------------- */
  
  @media (min-width: 1200px) {
    /* Ajustements pour les très grands écrans */

    /* Hero Banner */
    .hero-image img {
        width: 70%;
        margin-left: 4rem;
      }

      .hero-content {
        flex: 2;
        max-width: 60%;
        padding-left:0px;
        text-align: left;
        z-index: auto;
        margin: 3rem 0;
      }
    
    
    .hero-content h1 {
        font-size: 3rem;
      }
    
      .hero-content p {
        font-size: 1rem;
        padding-right: 7rem;
      }

/* PRODUITS */
#productContainer {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    width: 90%;
    margin: 2rem auto 0 auto;
  }
  
  .product {
    width: 33.333%;
    text-align: center;
    padding: 4% 2%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
   
  }
  
  .imageProduct {
    width: 45%; 
  }
  
  .h3Products {
    text-align: center;
    font-size: 1rem;
    padding: 2rem  0 0 0;
    margin: 0;
    color: #21d3d3;
  }
  
  .paragrapheProducts {
    text-align: center;
    padding: .5rem 0;
    margin: 0;
    color: #9580D3;
    font-size: .85rem;
  }
  
  .priceProducts {
    text-align: center;
    color:green;
    align-self: center;
    padding: .4rem 0;
    margin: 0;
    font-size: 1rem;
  }
  
  .specialeType {
    color: #867190;
    font-size: .7rem;
  }

/* Zone info complémentaires */

#infosPlus {
  width: 75rem;
  margin: 2rem auto;
  padding-bottom: 2rem; 
}
#infosPlus h2 {
  font-size:2rem;
  color: #21d3d3;
}
#infosPlus h3 {
  font-size: 1rem;
  color: #21d3d3;
}

#infosPlus p {
  color: #9580D3;
  font-size: .9rem;
}

.pictoTextes {
  display: flex;
  flex-direction:row;
  justify-content:space-between;
  text-align: center;
  padding-top: 4rem;
  margin: 4rem auto;
  align-items: center;

}
.textes_pictogrammes {
  width: 30%;
  padding: 0;
}

.textes_pictogrammes img {
  width: 50%;
}

#firstImagePicto {
  width: 40%;
}
#lastImagePicto {
  width:39.5%;
}
  /* Bloc Réseaux sociaux */
  #socialBloc {
    display: flex;
    align-items:center;
    justify-content:center;
    margin: 0 0 5rem 0;
    flex-direction: column;
  }
  

/* On en discute */

#blocTextDiscute .typing {
  font-family: "bai jamjuree", sans-serif;
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #523d91;   
}

    }

  
  
  /*---------------------------------*/
  /*                                 */
  /* Big screen size (1400px and up) */
  /*                                 */
  /*---------------------------------*/
  
  @media (min-width: 1400px) {
    /* Ajustements pour les écrans encore plus grands */

    /* Hero Banner */ 

    .hero-image img {
        width: 45%; 
        margin-left: 20%;
    }

    .hero-content {
        flex: 2;
        max-width: 70%;
        padding-left:50px;
        text-align: left;
        z-index: auto;
        margin:3rem 0;
    }

    .hero-content h1 {
        font-size: 3rem;
      }
    
      .hero-content p {
        font-size: 1rem;
        width: 61%;
        margin: 2rem 0 0 0;
        padding: 0;
      }

/* Styles communs à la page */

.purpleOne {
    background-color: #300640;
    padding: 0 ;
    margin: 0 auto;
    width: 100%;


}

    /* CAROUSELS */ 

    .carousels {
        padding: 1.25rem 0;
    }

    .carousel_1, .carousel_3 {
        background-color:#19203B;
    }

    .carousel_2 {
        background-color: #FA9C1D;
    }

    /* === Carrousel 1 (Droite > Gauche) === */
    .carousel-container:nth-child(1) {
        width: 100%;
        overflow: hidden;
        position: relative;
    }

    .carousel-container:nth-child(1) .carousel-track {
        display: flex;
        width: max-content;
        animation: scrollRightLeft_1 30s linear infinite; /* Nouvelle animation */
    }

    .carousel-container:nth-child(1) .carousel-track img {
        width: 480px;
        height: 270px;
        margin-right: 10px;
    }

    @keyframes scrollRightLeft_1 {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(calc(-1 * (480px + 10px) * 5)); /* Déplace vers la gauche */
        }
    }


    /* === Carrousel 2 (Gauche > Droite) === */
    .container_carousel.carousel_2 {
        width: 100%;
        overflow-x: hidden;
    }

    .container_carousel.carousel_2 .track_carousel {
        display: flex;
        animation: scrollLeftRight_2 15s linear infinite; /* Nouvelle animation */
        width: calc((480px + 10px) * 5);
    }

    .container_carousel.carousel_2 .track_carousel img {
        width: 480px;
        height: 270px;
        margin-right: 10px;
    }

    @keyframes scrollLeftRight_2 {
        0% {
            transform: translateX(calc(-1 * (480px + 10px) * 5)); /* Départ à gauche */
        }
        100% {
            transform: translateX(0%); /* Arrivée à droite */
        }
    }

    /* === Carrousel 3 (Droite > Gauche, boucle continue - approche duplication HTML) === */
    .carousel-container.carousel_3 {
        overflow: hidden;
        width: 100%;
    }
    
    .carousel-container.carousel_3 .track_carousel {
        display: flex;
        animation: scrollRightLeftLoop_3 30s linear infinite;
        width: calc((480px + 10px) * 10); /* Double la largeur */
    }
    
    .carousel-container.carousel_3 .track_carousel img {
        width: 480px;
        height: 270px;
        margin-right: 10px;
    }
    
    @keyframes scrollRightLeftLoop_3 {
        0% {
        transform: translateX(0%);
        }
        100% {
        transform: translateX(calc(-1 * (480px + 10px) * 5)); /* Déplace d'une "série" */
        }
    }




 /* PRODUITS ET SERVICES */


/* Promos */

.Promos {
  width: 70rem;
  height: 7rem;
  margin: 7rem auto 0 auto;
  background-color:#e6de12;
  border: #21d3d3 solid 4px;
  padding-bottom:1rem;
  transform: rotate(-3deg);
  }

  .textesPromo {
    margin: auto;   
  }

  #DatePromo {
    font-size: 1rem;
    color: #000;
    margin: .3rem 0 0 0;
    padding:1rem 0 0 0;
    text-align: center;
    width: 100%;
    font-weight: 400;
  }

  #Slog {
    margin: 0;
    font-size: 2rem;
    color:#FFF;
    width: 100%;
    text-align: center;
    color: rgb(227, 24, 24);
  }

 .bold {
    font-weight: 800;
  }

/* Entête Produits et Services */
  #produitServices {
    /* largeur et marges de l'article */
    margin: 1rem auto 0rem auto;
    width: 80rem;
    
  }

  .textesProduitServices h2 {
    color:#21d3d3;
    font-size: 2rem;
  }


 .textesProduitServices p {
    font-family: "bai jamjuree", sans-serif;
    width:70%;
    margin-bottom: 2rem;
    font-size: 1rem;
    color: #9580D3;
    font-weight: 300;
    width: 60%;
    text-align: justify;
  }


  .textesProduitServices {
    margin-left: 2rem;
  }

  /* PRODUITS */
#productContainer {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  justify-content: center;
  align-content:center;
  width: 80%;
  margin:0 auto;
  padding-bottom: 5rem;

}

.product {
  width: 33.333%;
  text-align: center;
  padding: 4% 2%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
 
}

.imageProduct {
  width: 45%; 
}

.h3Products {
  text-align: center;
  font-size: 1rem;
  padding: 2rem  0 0 0;
  margin: 0;
  color: #21d3d3;
}

.paragrapheProducts {
  text-align: center;
  padding: .5rem 0;
  margin: 0;
  color: #9580D3;
  font-size: .85rem;
}

.priceProducts {
  text-align: center;
  color:green;
  align-self: center;
  padding: .4rem 0;
  margin: 0;
  font-size: 1rem;
}

.specialeType {
  color: #867190;
  font-size: .7rem;
}



/* Bouton En Savoir +  Produits */

.butonSavoirPlus {
    background-color:#523d91;
    border-radius: .5rem;
    padding: .5rem 2rem;
    margin: 1rem;
}

.linkButton_EnSavoirPlus {
text-decoration: none;
color: #21d3d3;

}

/* CARDS */

 /* Cards Produits et Services */

.mauve h2 {
    width: 75rem;
}
.mauve p {
    width: 75rem;
    font-weight: 300;
}
.mauve {
    padding: 5rem 0 3rem 0;
}

.produitsCreations {
   display: flex;
   width: 100%;
   flex-wrap: nowrap;
   flex-basis: 33.3333%;
   background-color: #523d91;
   justify-content: center;
   padding: 4rem 0rem;
   flex-direction: row;
 }

 .cards {
   width: 25%;
   text-align: center;
   padding: 0 0 2rem 0;
   margin: 2rem;
   border: #523d91 solid 1px;
   background-color: #ffffff;
   border-radius: 2rem;
   overflow: hidden;
 }
 .cards h3 {
   font-size: 1.2rem;
   font-weight: 500;
   color: #523d91;
 }
 .cards p {
   font-size: 0.8rem;
   text-align: center;
   color: #867190;
 }

 /*positionement de l'image dans les cartes */
 
 #img_Print {
   margin-top: 1rem;
 }

 #card-3 img {
 width: 100%;
 }

 #card-2 img {
 width: 100%;
 }

 #card-1 img
 {
   width: 100%;
   margin: 0;

 }

 /*positionement vertical : icone Produits et Services*/
 #img_Print {
   margin-top: 1rem;
 }

 /* Bouton voir */

 .boutonVoir {
   padding: 2rem 0 1rem 0;
 }

 .boutonVoir a {
   background-color: #e6de12;
   padding: 0.8rem 2rem;
   color: #523d91;
   border-radius: 1rem;
   text-decoration: none;
   font-size: 0.8rem;
   font-weight: 600;
 }


/* Zone info complémentaires */

#infosPlus {
  width: 75rem;
  margin: 2rem auto;
  padding-bottom: 2rem; 
}
#infosPlus h2 {
  font-size:2rem;
  color: #21d3d3;
}
#infosPlus h3 {
  font-size: 1rem;
  color: #21d3d3;
}

#infosPlus p {
  color: #9580D3;
  font-size: .9rem;
}

.pictoTextes {
  display: flex;
  flex-direction:row;
  justify-content:space-between;
  text-align: center;
  padding-top: 4rem;
  margin: 4rem auto;
  align-items: center;

}
.textes_pictogrammes {
  width: 30%;
  padding: 0;
}

.textes_pictogrammes img {
  width: 50%;
}

#firstImagePicto {
  width: 40%;
}
#lastImagePicto {
  width:39.5%;
}

 /* Bloc On en Discute ? */

 /* Zone : On en Discute ? */

 .containerDiscute {
    padding: 5rem 0 1rem 0;
 }
 .purpleOne #zoneDiscute {
    width: 60rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: #21d3d3 solid 8px;
    background-color: #fff;
    border-radius: 1.5rem;
    padding: 2rem 8rem 1rem 8rem;
    margin: 4rem auto 2rem auto;
    flex-direction:row;
  }

  #botAnim {
    /* Icone HumanBot animée */
    margin-left: -2rem;
  }
 
 #blocTextDiscute #paragDiscute {
    padding: 0;
    margin: 0;
  }

  #blocTextDiscute .typing {
    font-family: "bai jamjuree", sans-serif;
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #523d91;   
  }

  #blocTextDiscute {
    margin-left: 2rem;
    width: 100%;
   
  }

  #blocTextDiscute p {
    font-family: "bai jamuree", sans-serif;
    font-size: 1.4em;
    line-height: 1.3em;
    color: #523d91;
    font-weight: 200;
    text-align: justify;
    margin: 0;
    padding: 0;
  }

  /* hot spot Contact */

  #hotSpotContact {
    display: flex;
    justify-content:space-around;
    margin-top: 2rem;
    margin-bottom: .8rem;
    flex-direction: row;
    align-items: center;
 
}

  /* CTA J'ai un Projet */
  #boutonProjet {
    font-family: "bai jamjuree", sans-serif;
    padding: 1rem 0rem;
    border: #523d91 solid 3px;
    background-color: #523d91;
    border-radius: 2rem;
    margin: 0;
    width: 12rem;
  }

  #boutonProjet a {
    color: #fff;
    text-decoration: none;
    font-size: 1.4em;

  }

  #zoneTel {
    display: flex;
    flex-direction: column;
    padding: .4rem 1rem;
    width: 18rem;
    justify-content: center;
    align-items: center;
    border:#e6de12 1px solid;
    border-radius: 2rem;
    margin-bottom: .5rem;
  
  }
  #zoneTel a {
    font-size: 1.2rem;
    color:#523d91;
   padding-left: 1rem;
    padding-top: 1rem;

  }

  #zoneTel p {
    font-size: .7rem;
    margin-top: -.05rem;
  margin-bottom: .2rem;
  }

  #blocNum {
    margin-top: .05rem;
  }


/* Bloc Réseaux sociaux */
  #socialBloc {
    display: flex;
    align-items:center;
    justify-content:center;
    margin: 0 0 5rem 0;
    flex-direction: column;
  }
  #socialBloc h3 {
    width: 100%;
    text-align: center;
    color:#21d3d3;
    font-weight: 600;
    font-size: 1.2rem;
  }
  #socialBloc p {
    width: 100%;
    font-family: "bai jamjuree", sans-serif;
    text-align: right;
    font-size: 0.9rem;
    font-weight: 300;
    color:#9580D3;
    margin-bottom: 0.4rem;
  }
 
  #socialIcones {
    margin-top:2rem;
    display: flex;
  }

  #socialBloc img {
    width: 48px;
    height: 48px;
    margin: 0.2rem 0.6rem;
    opacity: 0.8;
  }

  #socialIcones a img:hover {
    opacity: 1;
  }
  
}