* {
    list-style: none;
    text-decoration: none;
}

body{

    background-image: url("../Images/Image_Home.jpg");
    background-position: center;
    background-attachment: fixed; 
    background-repeat: no-repeat;
    background-size: cover;
    font-family: 'Poppins';
}

#logo{
    display: block;
    width: 20%;
    height: auto;
}

#logo_compte {
    width: 1.5em !important; /* Ajoute !important si nécessaire */
    height: auto !important;
  	align-items: center;
}



#logo2{
    display: block;
    width: 100%;
    height: auto;
}

.menu{

    position: relative;
    display: flex;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}

.menu .a {

    width: 20px;
}

.menu .nav_links ul{

    display: flex;
    font-size: 2em;

}

.menu .nav_links ul li{

    margin: 0 20px;

}

.menu .troisb{
    display: none;
    align-items: center;
    width: 35px;
    position: absolute;
    right: 50px;

}

a{
    color: white;
    
}

.nav_links.mobile-menu{

    margin-left: 0
}

.nav_links li{
  	max-width: 200px
}
@media screen and (max-width: 500px) {
  
  .menu #logo2 {
        margin: 25px;
    	width: 10vh
    }
}


@media screen and (max-width: 900px) {
  
  	 body {
        background-image: url("../Images/Image_Home_mobile.png");
        background-attachment: fixed;
    }

    .menu {
        padding: 0;
        margin: 0;
    }
    
  	.menu #logo2 {
        margin: 25px;
    	width: 10vh
    }

    .nav_links {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(73, 73, 73, 0.9);
        backdrop-filter: blur(7px);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 9999;
        margin-left: -110%;
        transition: all 0.5s ease;
    }


    .nav_links ul {
        display: flex;
        flex-direction: column;
      	align-items: center;
    }

    .menu .troisb {
        display: block;
        width: 35px;
        position: absolute;
        top: 15px;
        right: 15px;
        z-index: 10000;
        cursor: pointer;
      	align-items: center;
    }

    .nav_links.mobile-menu {
        margin-left: 0;
    }

    .menu .nav_links ul li {
        margin: 20px 0;
    }
}

h1{

    color:white;
    font-size: 200%;
    font-weight: bold;
    text-align: center;
}

h3{
	
  	color:white;
    font-size: 150%;
    text-align: left;

}

#box {
    width: 75%;
    margin: 0 auto;
    background-color: rgb(83, 83, 83);
    border-radius: 10px;
    padding: 20px;
  	order:2;
}

/* Box header */
.tete_box {
    width: 100%;
    background-color: #8c52ff;
    border-radius: 10px;
    text-align: center;
    font-size: 1.5em;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;

    margin: 0 auto;
  	height: 10vh
}
footer {
    text-align: center;
    padding: 3px;
    background-color: #8c52ff;
    color: white;
    margin-top: 10px;
    height:max-content
  }


.watch-button:hover {
    background: #e84118;
}

#anime-of-the-day-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

#anime-of-the-day {
  width: 60%;
  display: flex;
  justify-content: center;
}

#film-of-the-day-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

#film-of-the-day {
  width: 60%;
  display: flex;
  justify-content: center;
}

.anime-card {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: row; /* Image à gauche et contenu à droite */
  align-items: flex-start; /* Aligne le contenu en haut */
  max-height: 1000px; /* Limite la hauteur de la carte */
  width: 100%;
}

.anime-card img {
  width: 17vw;
  height: 30vh; /* L'image garde une hauteur fixe */
  object-fit: cover;
  border-radius: 8px;
  margin-right: 20px; /* Espace entre l'image et le contenu */
}

.anime-card .content {
  display: flex;
  flex-direction: column; /* Organise le texte en colonne sous l'image */
  justify-content: flex-start; /* Aligne le contenu en haut */
  height: 100%; /* Prend toute la hauteur disponible à droite */
  text-align:center;
}

.anime-card a {
  color: inherit;
  text-decoration: none;    
}

.anime-card .synopsis {
  font-size: 14px;
  color: #555;
  margin-bottom: 10px; /* Espacement entre le synopsis et les genres */
}

.anime-card .genres {
  font-size: 12px;
  color: black;
  font-style: italic;
  margin-bottom: 10px; /* Espacement entre les genres et la note */
}

.anime-card .rating {
  margin-top: 10px;
  font-weight: bold;
  color: #8c52ff;
}

.anime-card h3 {
	color: #8c52ff;
  	font-weight:bold;
  	font-size:2em;
}

@media (max-width: 900px) {
  #anime-of-the-day {
    height: 80vh;
    width: 100%; /* S'assure que le conteneur anime-of-the-day occupe toute la largeur */
  }
  
  #film-of-the-day {
    height: 80vh;
    width: 100%; /* S'assure que le conteneur anime-of-the-day occupe toute la largeur */
  }

  .anime-card {
    flex-direction: column;
    position: relative;
    height: 100%;
    width: 60%;
    padding: 0;
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
  }

  .anime-card img {
    width: 100%; /* L'image prend toute la largeur de la carte sur mobile */
    height: 100%; /* L'image occupe toute la hauteur de la carte */
    object-fit: cover;
    display: block;
    margin: 0;
    padding: 0;
  }

  .anime-card .content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%; /* Prendre la moitié de la hauteur de la carte */
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    backdrop-filter: blur(3px);
  }

  .anime-card .titre {
    font-size: 20px;
    margin-bottom: 5px;
  }

  .anime-card .synopsis,
  .anime-card .voir-plus {
    display: none;
  }

  .anime-card .genres,
  .anime-card .rating {
    font-size: 14px;
    margin-top: 5px;
    color: #f0f0f0;
  }
    .anime-card .watch-list-btn {
    margin-top: 10px;
    padding: 8px 16px;
    background-color: #8c52ff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease;
  }

  .anime-card .watch-list-btn:hover {
    background-color: #7b44e1;
  }
}

@media (max-width: 1400px) and (min-width: 900px) {
  #anime-of-the-day {
    width: 60%;
    display: flex;
    justify-content: center;
    text-align:center;
  }
  
  #film-of-the-day {
    width: 60%;
    display: flex;
    justify-content: center;
    text-align:center;
  }

  .anime-card {
    height: auto;
    flex-direction: column; /* L'image et le texte sont empilés */
    display: flex;
    justify-content: center;
    align-items:center;
    
  }

  .anime-card img {
    width: 17vw;
    height: 30vh; /* Taille de l'image plus petite */
    margin-right: 0; /* Retirer l'espace entre l'image et le texte */
  }

  .anime-card .content {
    padding: 10px;
    width: 100%;
    text-align:center;
  }

  .anime-card .titre {
    font-size: 22px;
    margin-top: 10px;
  }

  .anime-card .synopsis {
    display:none;
  }

  .anime-card .voir-plus {
    display: none; /* Enlever le bouton "Voir plus" sur les petits écrans */
  }
}



@media (max-width: 900px) {
    #anime-of-the-day {
    width: 100%;
    display: flex;
    justify-content: center;
    text-align:center;
  }
  
  #film-of-the-day {
    width: 100%;
    display: flex;
    justify-content: center;
    text-align:center;
  }
  
    .anime-card {
    flex-direction: column;
    position: relative;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
  }
}

#page {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    margin: 0 auto;
}

@media (max-width: 1200px) {
	#page {
        flex-direction: column; /* Empile les éléments en colonne sur petits écrans */
        align-items: center;
		}
  
  	#left-ad-container,
    #right-ad-container {
      	display: none;
  		}
    .ad-container {
  	 	width: 75%;  /* Les publicités occupent plus d'espace sur mobile */
        margin-bottom: 15px;
      	height: 7vh   
  		}
}
  
@media (min-width: 1200px) {

  #top-ad-container,
  #bottom-ad-container {
    display: none;
  }
}

.ad-container {
    width: 10%;  /* Taille des blocs publicitaires */
    background-color: #f0f0f0;
    padding: 10px;
    text-align: center;
    margin: 10px;
  	height: 100%
}

.ad-container2 {
    width: 100%;  
    background-color: #f0f0f0;
    padding: 10px;
    text-align: center;
    margin: 10px;
  	height: 7vh;
}

#left-ad-container {
    order: 1;  /* Publicité à gauche */
  	position: sticky;
    top: 0; 
}

#right-ad-container {
    order: 3;  /* Publicité à droite */
  	height: 100%;
  	position: sticky;
    top: 0; 
}

#top-ad-container {
    order: 1;  /* Publicité à gauche */
}

#bottom-ad-container {
    order: 3;  /* Publicité à droite */
}