@charset "UTF-8";
*, *:before, *:after {
  box-sizing: border-box;
}

html, body, div, span, object, iframe, figure, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, code, em, img, small, strike, strong, sub, sup, tt, b, u, i, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td, main, canvas, embed, footer, header, nav, section, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
     -moz-text-size-adjust: none;
          text-size-adjust: none;
}

footer, header, nav, section, main {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 0;
}

.card_manga {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 250px;
  height: 350px;
  overflow: hidden;
  -o-object-fit: cover;
     object-fit: cover;
  text-align: center;
  cursor: pointer;
  filter: grayscale(100%);
}
.card_manga:hover {
  transition: all 0.5s ease-in-out;
  filter: grayscale(0%);
}
.card_manga img {
  width: 100%;
  height: 100%;
}

.card_anime {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 250px;
  height: 350px;
  overflow: hidden;
  -o-object-fit: cover;
     object-fit: cover;
  text-align: center;
  cursor: pointer;
}
.card_anime img {
  width: 100%;
  height: 100%;
}

nav {
  background-color: #333;
  overflow: hidden;
  margin-bottom: 10px;
}
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
nav ul li {
  float: left;
}
nav ul li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
nav ul li a:hover {
  background-color: #111;
}

#filter {
  width: 15%;
  -webkit-appearance: auto;
     -moz-appearance: auto;
          appearance: auto;
  background-color: lightgrey;
  height: 90vh;
}
#filter h2 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}
#filter .Filter-title {
  font-size: 18px;
  font-weight: bold;
  color: #000000;
  margin-top: 5px;
}
#filter label {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}
#filter input[type=checkbox] {
  -webkit-appearance: none; /* Annuler l'apparence par défaut */
  -moz-appearance: none;
  appearance: none;
  background-color: #fff; /* Couleur de fond */
  border: 2px solid #555; /* Bordure */
  padding: 5px; /* Padding pour la taille */
  border-radius: 3px; /* Coins arrondis */
  display: inline-block; /* Permet d'aligner avec le label */
  position: relative;
  top: 3px; /* Alignement vertical avec le texte */
  cursor: pointer; /* Cursor pointer pour indiquer qu'il s'agit d'un élément cliquable */
}
#filter input[type=checkbox]:checked {
  background-color: rgba(85, 85, 85, 0.3333333333); /* Couleur de fond quand elle est cochée */
}

#pagination_controls {
  position: fixed;
  bottom: 20px; /* Position à 20px du bas de la fenêtre */
  left: 0;
  width: 100%; /* Occupe la largeur complète de la fenêtre */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff; /* Fond blanc pour la visibilité */
  padding: 10px 0; /* Rembourrage haut et bas pour l'espace interne */
  z-index: 1000; /* Assurez-vous que les boutons apparaissent au-dessus du contenu */
}
#pagination_controls button {
  margin: 0 10px;
  padding: 10px 20px;
  font-size: 16px;
  background-color: #333;
  color: white;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
#pagination_controls button:hover {
  background-color: #111;
}
#pagination_controls span {
  margin: 0 10px;
  font-size: 16px;
  color: #333;
}

.navigation-buttons {
  position: fixed;
  bottom: 20px; /* Position à 20px du bas de la fenêtre */
  left: 0;
  width: 100%; /* Occupe la largeur complète de la fenêtre */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff; /* Fond blanc pour la visibilité */
  padding: 10px 0; /* Rembourrage haut et bas pour l'espace interne */
  z-index: 1000; /* Assurez-vous que les boutons apparaissent au-dessus du contenu */
}
.navigation-buttons button {
  margin: 0 10px;
  padding: 10px 20px;
  font-size: 16px;
  background-color: #333;
  color: white;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.navigation-buttons button:hover {
  background-color: #111;
}
.navigation-buttons span {
  margin: 0 10px;
  font-size: 16px;
  color: #333;
}

.manga_title {
  text-align: center;
  font-size: 32px;
  margin: 20px 0;
}

.manga_detail {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  border: 2px solid #ccc; /* Bordure */
  border-radius: 8px; /* Coins arrondis */
  background-color: #f9f9f9; /* Fond */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre */
  padding: 30px; /* Espacement interne */
  width: 50%;
  margin: 0 auto; /* Centre la carte horizontalement */
}
.manga_detail .manga_img {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 250px;
  height: 350px;
  overflow: hidden;
  -o-object-fit: cover;
     object-fit: cover;
  text-align: center;
  border: 2px solid #ccc; /* Bordure */
  border-radius: 8px; /* Coins arrondis */
}
.manga_detail .manga_img img {
  width: 100%;
  height: 100%;
}
.manga_detail .manga_info {
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: 350px;
  width: 700px;
  border: 2px solid #ccc; /* Bordure */
  border-radius: 8px; /* Coins arrondis */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre */
  padding: 30px; /* Espacement interne */
}
.manga_detail .manga_info .detail-label {
  font-weight: bold;
}
.manga_detail .manga_info p {
  line-height: 2rem;
}

.anime_title {
  text-align: center;
  font-size: 32px;
  margin: 20px 0;
}

.anime_detail {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  border: 2px solid #ccc; /* Bordure */
  border-radius: 8px; /* Coins arrondis */
  background-color: #f9f9f9; /* Fond */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre */
  padding: 30px; /* Espacement interne */
  width: 50%;
  margin: 0 auto; /* Centre la carte horizontalement */
}
.anime_detail .anime_img {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 250px;
  height: 350px;
  overflow: hidden;
  -o-object-fit: cover;
     object-fit: cover;
  text-align: center;
  border: 2px solid #ccc; /* Bordure */
  border-radius: 8px; /* Coins arrondis */
}
.anime_detail .anime_img img {
  width: 100%;
  height: 100%;
}
.anime_detail .anime_info {
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 700px;
  border: 2px solid #ccc; /* Bordure */
  border-radius: 8px; /* Coins arrondis */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre */
  padding: 30px; /* Espacement interne */
}
.anime_detail .anime_info .detail-label {
  font-weight: bold;
}
.anime_detail .anime_info p {
  line-height: 2rem;
}

.manga {
  display: flex;
  flex-direction: row;
}
.manga .manga_show {
  width: 85%;
  display: flex;
  flex-direction: column;
}
.manga .manga_show #cards_container {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  gap: 5px;
  margin: 0;
  padding: 0 20px;
  height: 85vh;
}

.index #container {
  max-width: 960px;
  margin: auto;
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.index header {
  text-align: center;
  margin-bottom: 20px;
  font-size: 32px;
  font-weight: bold;
}
.index section {
  margin: 30px 100px;
  line-height: 1.5;
}
.index section h2 {
  font-size: 24px;
  margin-bottom: 10px;
}
.index section ul {
  margin-left: 20px;
  list-style-type: disc;
}
.index section ol {
  margin-left: 20px;
  list-style-type: disc;
}
.index section a {
  color: #007bff;
  text-decoration: none;
}
.index section a:hover {
  text-decoration: underline;
}
.index footer {
  text-align: center;
  margin-top: 50px;
}
.index footer h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.anime {
  display: flex;
  flex-direction: row;
}
.anime .anime_show {
  width: 85%;
  display: flex;
  flex-direction: column;
}
.anime .anime_show #cards_container {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  gap: 5px;
  margin: 0;
  padding: 0 20px;
  height: 85vh;
}/*# sourceMappingURL=style.css.map */