.container{
  max-width: unset;
  padding: 0;
}
  
  /*Css pour la presentation*/
  
  .image {
    width: 70%;
  }
  
  .col-lg-8 p{
      color:black;
  }
  #presentation a:link {
    /* Masquer l'apparence du lien */
    color: black;
    text-decoration: none;
    cursor: default;
  }
  
  #presentation{
    padding-top: 40px;
    max-width: 1300px;
    margin: 0 auto;
  }

   /*Css pour la presentation*/

  body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #ffffff;
}
.hero {
  position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 50px;
    color: #000000;
    background: #FFDBE3;
    min-height: 550px !important;
}
.hero img {
    width: 300px;
    height: auto;
    border-radius: 10px;
}
.hero-content {
    padding: 20px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: #FE396A;
}

.hero-content p {
  color: #FE396A;
  font-family: 'popins', sans-serif;
}

.hero h1 {
    margin: 0 0 10px 0;
}
.buttons {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}
.btn-1{
  text-decoration: none;
  padding: 10px 20px;
  background: #FE396A;
  color: white;
  border-radius: 5px;
}
.btn-1:hover{
  color: #FFF;
}

.btn-2:hover{
  color: #FFF;
}
.btn-2 {
  text-decoration: none;
  padding: 10px 20px;
  background: #FF6C0A;
  color: white;
  border-radius: 5px;
}
.photo-tache{
  position: absolute;
  top: 0;
  right: 0;
  width: 40vw !important;
}

/* Style général pour chaque carte */
.card {
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  transition: transform 0.3s ease;
  border-radius: 30px
}

/* Ajout d'un effet au survol des cartes */
.card:hover {
  transform: scale(1.05);
}

/* Limiter la taille des images */
.card-img-top {
  height: 200px;
  object-fit: cover;
  border-radius: 8px 8px 0 0;
}

/* Ajustement de la taille de texte des cartes */
.card-title {
  font-size: 1.25rem;
  font-weight: bold;
}

.card-text {
  font-size: 0.875rem;
  color: #555;
}

.carousel-item {
 background-color: #F9E7D2;
}

/* Espacement entre les éléments du carrousel */
.carousel-item {
  padding: 20px 70px;
}

/* Ajustement pour les petits écrans */
@media (max-width: 768px) {
  .carousel-item .col-md-4 {
      flex: 0 0 100%; /* Un élément par ligne sur petits écrans */
  }
  .photo-tache{
    width: 50vw !important;
  }
  .hero-content{
    margin-top: 70px;
  }
}
.carousel-control-prev, .carousel-control-next {
  background-color: rgba(0, 0, 0, 0.3); /* Fond semi-transparent */
  border-radius: 50%; /* Forme circulaire */
  width: 40px; /* Taille des boutons */
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Ombre pour un effet de profondeur */
  transition: background-color 0.3s, transform 0.3s ease; /* Transition douce */
}

.carousel-control-prev:hover, .carousel-control-next:hover {
  background-color: rgba(0, 0, 0, 0.6); /* Fond plus foncé au survol */
  transform: scale(1.1); /* Agrandissement léger du bouton */
}

/* Personnalisation des icônes de navigation */
.carousel-control-prev-icon, .carousel-control-next-icon {
  width: 20px; /* Taille des flèches */
  height: 20px;
  border-radius: 50%; /* Icônes en forme ronde */
}

/* Espacement pour un meilleur alignement */
.carousel-control-prev {
  left: 15px;
  top: 40%;
}

.carousel-control-next {
  right: 15px;
  top: 40%;
}

/* Adaptation sur petits écrans */
@media (max-width: 768px) {
  .carousel-control-prev, .carousel-control-next {
      width: 35px; /* Taille plus petite sur mobile */
      height: 35px;
  }

  .carousel-control-prev-icon, .carousel-control-next-icon {
      width: 18px; /* Taille réduite des flèches */
      height: 18px;
  }
  .carousel-inner{
    max-height: unset;
  }
} 
 
.inspiration {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 20px;
  height: 80px;
  width: 100%;
  background: #FF6C0A;
  color: white;
  font-family: 'Opake', sans-serif;
}
.inspiration p {
  color: #fff;
  font-size:larger;
}

.carousel-inner{
  max-height: 330px;
}