.accueil-container {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: lampeChargement 1s ease-in-out;
  margin-bottom: 1rem;
}

.accueil-top-container {
  width: 100%;
  height: calc(100vh - 150px);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2rem;
}

.accueil-top-img {
  height: 100%;
  width: 100%;
  animation: lampeChargement 2s ease-in-out;
  object-fit: cover;
}

@keyframes lampeChargement {
  0% {
    filter: brightness(0);
  }
  100% {
    filter: brightness(1);
  }
}

.accueil-content-container {
  width: 70%;
  height: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  align-items: stretch; /* Assure que les enfants ont la même hauteur */
  gap: 2rem;
  --s: 50px; /* the size on the corner */
  --t: 4px; /* the thickness of the border */
  --g: 20px; /* the gap between the border and image */

  outline: var(--t) solid #c2802f9d; /* the color here */
  outline-offset: calc(-1 * var(--t));
  mask: conic-gradient(at var(--s) var(--s), #0000 75%, #000 0) 0 0 /
      calc(100% - var(--s)) calc(100% - var(--s)),
    linear-gradient(#000 0 0) content-box;

  border-radius: 25px;
}

.accueil-content-left {
  width: 60%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  justify-content: center;
 
  

  /* border: 1px solid red; */
}

.accueil-content-title-img {
  width: 90%;
  margin-bottom: 2rem;
}



.accueil-content-right {
  width: 40%;
  height: fit-content;
}

.accueil-content-img {
  width: 100%;
  height: auto;
}
/* Assurez-vous que le carrousel prend toute la largeur de son parent */
#splide {
  width: 100%;
}

/* Ajuster les slides pour qu'ils remplissent correctement l'espace */
.splide__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Adaptation de l'image sans distorsion */
  display: block; /* Empêche les marges autour des images */
}

/* Optionnel : ajuster la hauteur du carrousel selon ton besoin */
.splide__track {
  height: 90vh; /* Ajuste cette valeur pour définir la hauteur du carrousel */
}

/*    responsive */

@media (max-width: 862px) {
  .accueil-top-container {
    width: 100%;
    height: fit-content; /* Hauteur de l'image égale à la hauteur de l'écran */
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden; /* Assure que rien ne dépasse du conteneur */
  }

  .accueil-top-img {
    width: 100%; /* L'image prend toute la largeur du conteneur */
    height: 50vh; /* L'image prend toute la hauteur du conteneur */
    object-fit: cover; /* Remplit le conteneur tout en maintenant le ratio de l'image */
    align-items: center;
  }

  .accueil-content-container {
    flex-direction: column;
    width: 95%;
    align-items: center;
    --b: 3px; /* Largeur de la bordure */
    --c: 3em; /* Taille du coin */
    --r: 2em; /* Arrondi des coins */
  }

  .accueil-content-left {
    width: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    justify-content: center;
  
    /* gap: 2rem; */

    /* border: 1px solid red; */
  }

  .accueil-content-title-img {
    width: 80%;
  }

  .accueil-content-right {
    width: 100%;
    height: fit-content;
  }

  /* Optionnel : ajuster la hauteur du carrousel selon ton besoin */
  .splide__track {
    height: 50vh; /* Ajuste cette valeur pour définir la hauteur du carrousel */
  }
}