.card-footer a:hover::after {
  width : auto !important;
  content: attr(data-title); /* Récupère le contenu de l'attribut title */
  position: absolute;
  top: 30px; /* Positionne l'info-bulle au-dessus du badge */
  left: 50px; /* Centre l'info-bulle horizontalement */
  transform: translateX(-50%); /* Centre l'info-bulle exactement au-dessus du badge */
  padding: 2px;
  background-color: var(--blue-dark-transparent);
  word-break: keep-all;
  white-space: nowrap;
  color: white;
  font-size: 11px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Ajout de l'ombre */
  z-index: 99999999; /* Valeur supérieure pour être au-dessus de l'encadré */
  transition: opacity 0.3s ease-in-out; /* Ajout d'une transition d'opacité */
}


/* Créer une nouvelle discussion */

.ajouter-reponse {
  height: auto;
  font-size: 17px;
  display: inline-block;

  padding: 15px;
  background-color: var(--orange);
  text-decoration: none;
  border-radius: 10px;
  margin-bottom : 15px;
  width : auto;
  position: relative;
  left: calc(100% - 272px);
  box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.15);
  margin-top: 15px;
}

.ajouter-reponse:hover {
  background-color: var(--orange-dark);
}



/* Barre de recherche */



@media (min-width: 1420px) {
  .filter-container {
    width : 1270px;
    margin: 0 auto; /* Centrer horizontalement */
    margin-bottom : 70px;
  }  
}

@media (max-width: 1420px) and (min-width: 1420px) {
  .filter-container {
    width : 1260px;
    margin-left: 25px; /* Centrer horizontalement */
    margin-bottom : 70px;
  }
}


@media (max-width: 1420px) {
  .filter-container {
    width : calc(100% - 20pxs);
    margin: 0 auto; /* Centrer horizontalement */
    margin-bottom : 70px;
  }
}


.form-container {
  height : 100px;
  margin: 0px;
}


@media (min-width: 1450px) {
  .keywords-filter-container {
    font-size : 20px;
    font-family: var(--font4);
    border-radius : 10px;
    border-top-right-radius : 15px;
    border-top-left-radius : 15px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.15);
    border: 1px solid var(--blue);
    height : 102px;
    width: 100%;
  }
  
}

@media (max-width: 1450px) and (min-width: 1150px) {
  .keywords-filter-container {
    font-size : 20px;
    font-family: var(--font4);
    border-radius : 10px;
    border-top-right-radius : 15px;
    border-top-left-radius : 15px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.15);
    border: 1px solid var(--blue);
    width: 100%;
    margin-left: auto;
    margin-right : auto;
    height : 102px;
  } 
}


@media (max-width: 1150px) {
  .keywords-filter-container {
    font-size : 20px;
    font-family: var(--font4);
    border-radius : 10px;
    border-top-right-radius : 15px;
    border-top-left-radius : 15px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.15);
    border: 1px solid var(--blue);
    width: 100%;
    margin-left: auto;
    margin-right : auto;
    height : 102px;
  }
}

.titre-keywords {
  background-color: var(--blue);
  color: white;
  border-top-right-radius : 10px;
  border-top-left-radius : 10px;
  padding : 8px 10px;
  font-size: 15px;
  font-family: var(--font4);
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  height : 18px;
}

.titre-keywords i {
  margin-right : 5px;
  color: white;
}


@media (min-width : 700px) {
  .search-area {
    display: inline-flex; 
    align-items: center;
    margin-left: 15px;
    width : 95%;
    height : 64px;
  }
}

@media (max-width : 700px) {
  .search-area {
    display: inline-flex; 
    align-items: center;
    margin-left: 15px;
    width : 80%;
    height : 64px;
  }
}




@media (min-width: 1150px) {

  .keywords-input{
    width : 700px;
    padding: 10px 20px;
    background-color: rgb(246, 246, 246);
    border : none;
    margin-bottom : 10px;
    margin-top: 10px;
    font-family: var(--font4);
    font-size: 15px;
    border: 2px solid var(--blue); 
    border-top-left-radius : 4px;
    border-bottom-left-radius : 4px;
    display: grid;
    grid-template-columns: 1fr ;
    grid-template-rows: 30px 70px;
    height : 20px;
  }
}

@media (max-width: 1150px) {
  .keywords-input{
    width : 100%;
    padding: 10px 20px;
    background-color: rgb(246, 246, 246);
    border : none;
    margin-bottom : 10px;
    margin-top: 10px;
    font-family: var(--font4);
    font-size: 15px;
    border: 2px solid var(--blue); 
    border-top-left-radius : 4px;
    border-bottom-left-radius : 4px;
    display: grid;
    grid-template-columns: 1fr ;
    grid-template-rows: 30px 70px;
    height : 20px;
  }
}


.search-button {
  width : 44px;
  height: 44px;
  background-color: var(--blue);
  border: none;
  display: flex;
  align-items: center;
  cursor: pointer;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.search-button:hover {
  background-color: var(--blue-dark);
}


.search-button i {
  color: white;
}

.keywords-input:focus {
  outline: none;
}

/* ribbon-forum favori */


.forum-box {
  position: relative;
}

.favori-container {
  top: 0px;
  position: absolute;
  right: 70px;
}

.ribbon-forum {
  --accent-color:var(--blue);
  --col-gap: 10px;
  --barH: 10px;;
  --roleH: 10px;
  --flapH: 25px;

  width: 50px;
  position: absolute;
  top: -8px;

  margin-inline: auto;

  display: flex;
  flex-wrap: wrap;

  gap: var(--col-gap);
  padding-inline: calc(var(--col-gap) / 2);

  justify-content: center;
  align-items: flex-start;
  list-style: none;
  display: -webkit-flex; /* Ajouté pour la compatibilité avec Safari */
  -webkit-justify-content: center; /* Ajouté pour la compatibilité avec Safari */
  -webkit-align-items: flex-start; /
}


.ribbon-forum li {
  width: 50px;
  display: grid;
  grid-template:
    "role"
    "icon"
    "title"
    "descr";
  align-items: flex-start;
  padding-block-end: calc(var(--flapH) + 10px);
  text-align: center;
  background: var(--accent-color);
  background-image: linear-gradient(
    rgba(0, 0, 0, 0.6) var(--roleH),
    rgba(0, 0, 0, 0.4) calc(var(--roleH) + 2px),
    rgba(0, 0, 0, 0) calc(var(--roleH) + 12px)
  );
  -webkit-clip-path: polygon(
    calc(var(--col-gap) / -2 - 5px) 0,
    calc(100% + var(--col-gap) / 2 + 5px) 0,
    calc(100% + var(--col-gap) / 2 + 5px ) calc(100% - var(--flapH)),
    50% 100%,
    calc(var(--col-gap) / -2 - 5px) calc(100% - var(--flapH))
    );
    clip-path: polygon(
      calc(var(--col-gap) / -2 - 5px) 0,
      calc(100% + var(--col-gap) / 2 + 5px) 0,
      calc(100% + var(--col-gap) / 2 + 5px ) calc(100% - var(--flapH)),
      50% 100%,
      calc(var(--col-gap) / -2 - 5px) calc(100% - var(--flapH))
    );
}

.ribbon-forum li::after {
  content: "";
  grid-area: role;
  background: var(--accent-color);
  background-image: linear-gradient(
    rgba(255, 255, 255, 0.4),
    rgba(255, 255, 255, 0.2) 30%,
    rgba(255, 255, 255, 0.1) 40%,
    rgba(0, 0, 0, 0.1) 60%,
    rgba(0, 0, 0, 0.2) 70%,
    rgba(0, 0, 0, 0.4)
  );
  height: var(--roleH);
  width: 50px;
}

.ribbon-forum li .icon {
  padding-inline: 10px;
  color: white;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  height : 20px;
}

.ribbon-forum li .icon {
  font-size: 25px;
  left: -20px;
}

.star-class{
  top: 20px;
  right : 17px;
  position: absolute;
  color: rgb(235, 190, 55);
  cursor: pointer;

}

.icon:hover .empty {
  display: block;
}

@media (min-width: 1420px) {

  .container-total {
    width : 1300px;
    margin: 0 auto; /* Centrer horizontalement */
    text-align: right; /* Alignement à droite */
  }

  .forum-box {
    border: 1px solid rgb(205, 194, 205);
    padding: 15px;
    width: 1200px;
    height: 150px;
    margin: 0 auto; /* Centrer horizontalement */
    text-align: left; /* Centrer le contenu */
    margin-bottom: 20px;
    padding-left: 50px;
    padding-top: 0px;
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
    border-radius: 20px;
    background-color: white;
    height : auto;
  }

  .info-box {
    background-color: #FFDDF8; /* Couleur de fond */
    color: rgb(0, 0, 0); /* Couleur du texte */
    padding-left: 10px; /* Espace intérieur */
    padding-right: 10px; /* Espace intérieur */
    padding-top : 5px;
    padding-bottom: 5px;
    border-radius: 13px; /* Bords arrondis */
    display: inline-block; /* S'ajuste à la taille du contenu */
    margin-top : 10px;
    font-size: 13px; /* Augmenter la taille de la police */
  }

  .card-header {
    display: grid;
    grid-template-columns: 600px 200px;
  }

  .discussion-link {
    font-size: 25px; /* Augmenter la taille de la police */
    text-decoration: none; /* Enlever le soulignement automatique */
    color: black; /* Couleur de base */
  }

}


@media (max-width: 1420px) {

  .container-total {
    width : 100%;
    margin: 0 auto; /* Centrer horizontalement */
    text-align: right; /* Alignement à droite */
  }

  .forum-box {
    border: 1px solid rgb(205, 194, 205);
    padding: 10px;
    width: min(calc(100% - 35px), 95%);
    height: auto;
    margin: 0 auto; /* Centrer horizontalement */
    text-align: left; /* Centrer le contenu */
    margin-bottom: 20px;
    padding-left: 20px;
    padding-top: 0px;
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
    border-radius: 20px;
    background-color: white;
  }

  .info-box {
    background-color: #FFDDF8; /* Couleur de fond */
    color: rgb(0, 0, 0); /* Couleur du texte */
    padding-left: 7px; /* Espace intérieur */
    padding-right: 7px; /* Espace intérieur */
    padding-top : 4px;
    padding-bottom: 4px;
    border-radius: 13px; /* Bords arrondis */
    display: inline-block; /* S'ajuste à la taille du contenu */
    margin-top : 5px;
    font-size: 11px; /* Augmenter la taille de la police */
  }

  .card-header {
    display: grid;
    grid-template-rows: 40px 25px;
    margin-top: 0px;
    max-width: calc(100% - 100px);
    align-items: center; /* Cette propriété centre les éléments verticalement dans leur "row" respectif */
  }

  .card-header p {
    display: block; /* Force le paragraphe à prendre toute la largeur disponible */
    margin-right: 5px; /* Espacement à droite */
  }
  
  .discussion-link {
    font-size: 25px; /* Augmenter la taille de la police */
    text-decoration: none; /* Enlever le soulignement automatique */
    color: black; /* Couleur de base */
    margin-top: 20px;
    margin-bottom: 20px;
  }
  
}



.forum-box:hover {
  transform: perspective(500px) translateZ(12px);
}


@media (hover: none) {
  .forum-box:hover {
    transform: inherit;
  }
}


.discussion-link:hover {
  color: var(--blue); /* Couleur au survol de la souris */
  text-decoration: none; /* Enlever le soulignement au survol de la souris */
}

.forum-box:hover .dicsussion-link {
  color: var(--blue); /* Couleur au survol de la souris */
  text-decoration: none; /* Enlever le soulignement au survol de la souris */
}


/* Sujets */

.sub-box-9 {
  height : 58px;
  width : 250px;
  position: relative;
  cursor: pointer;
}


.box-sujet1,
.box-sujet2,
.box-sujet3 {
  width: 100%;
  height: 80%;
  display: flex;
  align-items: center;

}


.box-sujet1 p {
  margin-left : 20px;
  font-size : 15px;
  width : 200px;
  font-weight: bold;
  color: var(--green);
}

.box-sujet2 p {
  margin-left : 25px;
  font-size : 15px;
  width : 180px;
  margin-right : 5px;
  color: var(--blue);
  font-weight: bold;
}

.box-sujet3 p {
  margin-left : 25px;
  font-size : 15px;
  width : 170px;
  margin-right : 5px;
  color: var(--red);
  font-weight: bold;
}

.chevron-up,
.chevron-up-sujet1,
.chevron-up-sujet2,
.chevron-up-sujet3 {
  width : 15px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer;
}

.fa-chevron-up {
  position: relative;  
}


.chevron-up-sujet1 {
  color: var(--green);
}

.chevron-up-sujet2 {
  color: var(--blue);
}

.chevron-up-sujet3 {
  color: var(--red);
}


.box-sujet {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  background-color: white;
  box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
}


.box-sujet p {
  margin-left: 20px;
  font-size: 18px;
  width: 200px;
}

.choices-sujet {
  position: absolute;
  width : 250px;
  background-color: white;
  z-index: 1000;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border: 1px solid #ccc;
  border-top : 3px solid white;
  box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
  max-height : 1450px;
  overflow-y: auto;
}

@media (min-width : 750px) {
  .selected-tags {
    display: flex;
    flex-wrap: wrap;
    margin-left: 10px;
    margin-right : 10px;
    max-height : 58px;
    overflow-y: auto;    /* Fait apparaitre une barre de défilement si nécessaire */
  }

  .sujet-sub-container {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 250px calc(100% - 250px);
    border-radius: 10px;
  }
}

@media (max-width : 750px) {
  .selected-tags {
    display: flex;
    flex-wrap: wrap;
    margin-left: 10px;
    margin-right : 10px;
    max-height : 80px;
    overflow-y: auto;    /* Fait apparaitre une barre de défilement si nécessaire */
  }

  .sujet-sub-container {
    margin-top: 10px;
    display: grid;
    grid-template-rows: 70px auto;
    border-radius: 10px;
  }
}


.tag,
.tag-niveau1,
.tag-niveau2,
.tag-niveau3,
.tag-niveau4 {
  display: flex;
  align-items: center;
  background-color: var(--green-light);
  border-radius: 4px;
  padding: 4px 8px;
  margin-right: 5px;
  margin-bottom: 5px;
  height : 16px;
}

.tag-niveau1 {
  background-color: var(--green-light);
}

.tag-niveau2 {
  background-color: var(--blue-very-light);
}

.tag-niveau3 {
  background-color: var(--red-light);
}

.tag-niveau4 {
  background-color: var(--orange-light);
}

.tag i,
.tag-niveau1 i,
.tag-niveau2 i,
.tag-niveau3 i,
.tag-niveau4 i {
  margin-left: 5px;
  cursor: pointer;
  color: var(--green);
}

.tag-niveau1 i {
  color : var(--green)
}

.tag-niveau2 i {
  color : var(--blue)
}

.tag-niveau3 i {
  color : var(--red)
}
.tag-niveau4 i {
  color : var(--orange)
}


/* Styles personnalisés pour la case à cocher */
.custom-checkbox input[type="checkbox"] {
  /* Cacher la case à cocher par défaut */
  display: none;
}

/* Styles pour la zone de la case à cocher */
.custom-checkbox .checkbox-container {
  display: inline-block;
  position: relative;
  width: 15px;
  height: 15px;
  background-color: white; /* Couleur de fond par défaut */
  border-radius: 4px;
  border : 1px solid rgb(196, 195, 195);
  margin-right : 10px;
  cursor: pointer;
}

.custom-checkbox-sujet1 .checkbox-container {
  border : 1px solid var(--green);
}

.custom-checkbox-sujet2 .checkbox-container{
  border : 1px solid var(--blue);
}

.custom-checkbox-sujet3 .checkbox-container {
  border : 1px solid var(--red);
}

.custom-checkbox-sujet4 .checkbox-container {
  border : 1px solid var(--orange);
}

/* Styles pour la coche */
.custom-checkbox .checkbox-container::before {
  content: "\2713"; /* Code Unicode pour le symbole de coche */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px; /* Taille de la coche */
  font-weight: bold; /* Épaisseur de la coche */
  color: var(--green); /* Couleur de la coche par défaut */
  display: none; /* Cacher la coche par défaut */
}

.custom-checkbox-sujet1 .checkbox-container::before {
  color: var(--green); /* Couleur de la coche par défaut */
}


.custom-checkbox-sujet2 .checkbox-container::before {
  color: var(--blue);
}


.custom-checkbox-sujet3 .checkbox-container::before {
  color: var(--red);
}

.custom-checkbox-sujet4 .checkbox-container::before {
  color: var(--orange);
}

.custom-checkbox-sujet4 {
  color: var(--orange);
}

/* Styles pour la coche lorsque la case est cochée */
.custom-checkbox input[type="checkbox"]:checked + .checkbox-container::before {
  display: block; /* Afficher la coche lorsque la case est cochée */
}

.search-bar input {
  width : calc(100% - 30px);
  height : 100%;
  padding: 5px 10px;
  background-color: rgb(246, 246, 246);
  border : none;
  margin-bottom : 10px;
  border-radius : 4px;
  box-shadow: 1px 2px 3px 0px rgba(0,0,0,0.15);
  margin-top: 10px;
  font-family: var(--font4);
}

.search-bar input:focus {
  outline: none;
  border: none;
}


.choices-sujet1 {
  position: relative;
  margin-left: 10px;
  font-family: var(--font4);
}


.filter-button {
  background-color : var(--orange);
  padding : 5px 10px;
  border-radius : 5px;
  border : none;
  box-shadow: 3px 4px 8px 0px rgba(0,0,0,0.2);
  cursor: pointer;
  font-family : var(--font4);
  font-size: 15px;
  color: white;
  margin: 10px;
  float : right;
}

.filter-button:hover {
  background-color: var(--orange-dark)
}