* {
  margin: 0;
  padding: 0;
}

#liste-groupe {
  width: 60%;

  background-color: #454040;
  margin: 5px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  flex-wrap: wrap;
  margin-left: 18%;
}

.card-description {
  margin-bottom: 10px;
}

#menu {
  margin-left: 50%;

}

#recherche {
  text-align: center;
}

.container {
  width: 100vh;
  text-align: center;
}

.conteneur-recherche {
  margin: 3% auto;
  width: 25%;
  border: 3px solid darkred;
  text-align: left;
}


.recherche-label {
  margin: 1px;
}

.titre-recherche-avance {
  text-align: center;
  font-weight: 600;
}


.h1Article {
  color: #fff;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  background-color: rgb(85, 82, 82);
  padding: 5px;
  bottom: 4px;
  box-shadow: 0px 10px 10px rgb(130, 118, 3);
  font-size: 35px;


}

.card {
  margin: 15px;


}
.contenu-all{
  margin-left:25%;
}


.card-body {
  height: 5%;
}

.membre {
  display: flex;
  justify-content: center;
  margin-left: 5%;
  /*justify-content:space-around;*/
}

.groupe {
  padding: 0;
  border: 2px solid black;
  color: #fff;
  justify-content: right;
  margin: 0 auto;
  width: 90%;

}

.stats {

  display: flex;
}

.images {
  display: inline-block;
  /* float:left;  */

  width: 80%;

  margin: 20px;
  padding: 30px;
  background-color: #520504;
  border-radius: 10px;
  box-shadow: 0 0 10px 0 #f8e703;

}

.illustration {
  float: left;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  margin: 10px;
  shape-outside: circle();
}


.illustration2 {
  float: left;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  margin: 10px;
  shape-outside: circle();
}

.bouton {
  display: block;
  text-align: center;
  margin: 2% auto 0 auto;
  background-color: #090808;
  width: 40%;
  padding: 15px 32px;
  text-decoration: none;
  border-radius: 5px;
  border: 0;
  font-size: 1em;
  color: #f3f307;
}

.container2 {
  background-color: #938f8f;
  margin: 5%;
}

.form-control {
  margin: 1%;

}

.bouton:hover {
  background-color: rgb(86, 79, 79);
  color: #f7dada;
}

.nom,
.date_creation,
.dernier_album {
  text-align: center;
  font-size: 40px;
}

footer {
  display: flex;
  padding: 20px;
  background-color: rgb(134, 129, 114);

}

section {
  margin-bottom: 12%;
}

.text {

  text-align: left;
  margin-left: 15%;
  width: 75%;
  margin: 2%;


}

#contenu-css {
  width: 50%;
  margin-left: 25%;
}

input {
  border-color: #454040;
}

.btn-primary {
  width: 20%;

}

#btn-bouton {
  width: 20%;
  margin-left: 35%;
}

#button-gestion {

  width: 25%;
  margin: 5%;
  margin-left: 35%;
}

#img-fluide{
  width:15%;

}


.vignette {

  max-width: 30%;
  
  overflow: hidden;
 flex: 1 1 auto; 
  background-color: #b0a2a2;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 20px;
  margin:10px;
  box-sizing: border-box;
  height: 350px;
  width:50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;  
  margin-left: 20px; 
  border: 2px solid transparent;  
  transition: border-color 0.3s ease;
  cursor: pointer;

}


#dashboard {
  display: flex;
}

.flex-container {
  display: flex;

  
}

.vignette-container{

  -webkit-text-size-adjust: 100%;
  box-sizing: border-box;
  flex: 1 1 100%;
  flex-direction: row;
  flex-wrap: wrap;
  list-style: none;
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin-left: auto;
  margin-top: 0;
}

#caption{
  text-decoration: #fff;
}


/* CSS pour les graphiques */
.chart-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
.boutons-container {
  margin-left: 25px;
}

/* CSS pour l'image aléatoire */
#img-fluide {
  width:60%;
  height: auto; 
  max-height: 80%;
  margin-bottom: 20px; /
}

#bouton-container{
width:80%;
  margin:10px;
}

/* CSS pour les boutons */
.boutons {
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
}

.vignette.caption {
  position: relative;
}
.vignette:hover, .vignette.selected {
  border-color: black; /* Couleur de la bordure au survol ou lorsqu'elle est sélectionnée */
}



.Principal{
  border-radius:0;
 border:0px solid #000;
 color: #fff;
 cursor:pointer;
 font-size:16px;
 text-transform: uppercase;
 font-weight: 700;
 line-height:1;

}

.tapOeil{
  position:relative;
  box-sizing: border-box;
  display: flex;
  flex: 1 1 100%;
  flex-direction: row;
  flex-wrap: wrap;
  list-style: none;
  justify-content: center;
  margin: -6% 2.5% 15px ;
  text-align: right;
  color: #fff;
  font-size:56px;

}

.TapOeil2{
  position:relative;
  bottom: 20px;
  right:2%;
  
  text-align:right;
  color:#fff;
  font-size:22px;
}

.TapOeil3{
  position: relative;
 left:10%;
 bottom: 22%;
 border-radius:0;
 border:1px solid #daf703;
 padding: 15px;
 color: #fff;
 cursor:pointer;
 font-size:16px;
 text-transform: uppercase;
 font-weight: 700;
 line-height:1;
 text-align: center;
 transition: all .2s ease;
 text-decoration:none;
 background-color:#000;
 box-sizing:border-box;
 font-family: proxima-nova,sans-serif;
 
 
}

.TapOeil3:hover{
  border:1px solid #000;
  position:relative;
  transition: all .2s ease;
  background-color:#fff;
  color:#000;
  text-decoration:underline;
}

.cards-container {
  display: flex;
  justify-content: space-around; /* Ajustez selon vos préférences */
}

.card {
  width: 35%; /* Ajustez la largeur des cartes selon vos préférences */
  border: 5px solid black;
  padding: 20px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

.card-content {
  margin-bottom: 20px;
}