.shimmer {
    padding: 5px;
    margin: 10px auto;
    background: #ffffff;
}
.shimmer .image-card {
    height: 40px;
    width: 200px;
    border-radius: 5px;
}

/*.wrapper {
    width: 0px;
    animation: fullView 0.5s forwards linear;
}*/

.title {
  width: 40%;
}
.link {
  width: 60%;
}
.description {
  width: 70%;
}
.shimmer {
  padding: 5px;
  width: 95%;
  height: 30px; /* Ajusté pour correspondre à une ligne de tableau */
  margin: 10px auto;
  background: #ffffff;
}
/*.shimmer .image-card {
  height: 90px;
  width: 90px;
  float: right;
  border-radius: 8px;
}*/
.stroke {
  height: 35px;
  width: 12%;
  background: #777;
  margin-top: 20px;
}

.wrapper {
  width: 100%;
  display: flex;
  animation: fullView 0.5s forwards linear;
}

@keyframes fullView {
  100% {
    width: 100%;
  }
}

.animate {
  animation: shimmer 3s;
  animation-iteration-count: infinite;
  background: linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%);
  background-size: 1000px 100%;
}

@keyframes shimmer {
  from {
    background-position: -1000px 0;
  }
  to {
    background-position: 1000px 0;
  }
}

/* Tableau adapté pour l'effet shimmer */
.shimmer-table {
  width: 100%;
  margin-top: 20px;
}

.shimmer-table-header, .shimmer-table-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.shimmer-table-header .title,
.shimmer-table-header .link,
.shimmer-table-header .description,
.shimmer-table-row .title,
.shimmer-table-row .link,
.shimmer-table-row .description {
  height: 30px; /* Ajusté pour correspondre à une ligne de tableau */
  background: #f0f0f0;
  border-radius: 4px;
}

.shimmer-table-row .title,
.shimmer-table-header .title {
  width: 40%;
}

.shimmer-table-row .link,
.shimmer-table-header .link {
  width: 60%;
}

.shimmer-table-row .description,
.shimmer-table-header .description {
  width: 70%;
}

.shimmer-table-header .title,
.shimmer-table-header .link,
.shimmer-table-header .description {
  background: #e0e0e0; /* Légèrement plus clair pour l'en-tête */
}

/* Application de l'effet shimmer sur les lignes du tableau */
.shimmer-table-header .title,
.shimmer-table-header .link,
.shimmer-table-header .description,
.shimmer-table-row .title,
.shimmer-table-row .link,
.shimmer-table-row .description {
  animation: shimmer 3s;
  animation-iteration-count: infinite;
  background: linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%);
  background-size: 1000px 100%;
}



.custom-shimmer {
  padding: 10px;
  width: 95%;
  height: 50px;
  background: #ffffff;
  display: flex; /* Utilisation de flexbox pour aligner l'image et le texte */
  align-items: center; /* Aligner verticalement les éléments au centre */
}

.custom-shimmer .custom-image-card {
  height: 40px;
  width: 60px;
  border-radius: 8px;
  margin-right: 20px; /* Espacement entre l'image et le texte */
}

.custom-title {
  width: 100%; /* Permet d'avoir une largeur maximale pour le titre */
  margin-bottom: 2px; /* Espacement entre le titre et la description */
}

.custom-link {
  width: 100%; /* Occupation totale de la ligne */
}

.custom-stroke {
  height: 15px;
  background: #777;
  margin-top: 10px;
}

.custom-wrapper {
  width: 100%;
}

.custom-animate {
  animation: shimmer 3s;
  animation-iteration-count: infinite;
  background: linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%);
  background-size: 1000px 100%;
}

@keyframes shimmer {
  from {
    background-position: -1000px 0;
  }
  to {
    background-position: 1000px 0;
  }
}