.audiowide-regular {
  font-family: "Audiowide", sans-serif;
  font-weight: 400;
  font-style: normal;
}                                                                     
.card a {
  text-decoration: none;
}

/*  
 /$$$$$$$                  /$$          
| $$__  $$                | $$          
| $$  \ $$  /$$$$$$   /$$$$$$$ /$$   /$$
| $$$$$$$  /$$__  $$ /$$__  $$| $$  | $$
| $$__  $$| $$  \ $$| $$  | $$| $$  | $$
| $$  \ $$| $$  | $$| $$  | $$| $$  | $$
| $$$$$$$/|  $$$$$$/|  $$$$$$$|  $$$$$$$
|_______/  \______/  \_______/ \____  $$
                               /$$  | $$
                              |  $$$$$$/
                               \______/ 
*/

body {
  margin: 0;
  background-color: rgb(0, 0, 46);
  font-family: 'Times New Roman', Times, serif;
  color: rgb(0, 0, 46);
}

/* Juste pour le tri (N'EST PAS SENSE ETRE VISIBLE) */
h4 {
  margin-top: 75px;
  font-size: 0.25em;
  opacity: 0;
}

/* 
 /$$   /$$                      /$$                       /$$     /$$                    
| $$$ | $$                     |__/                      | $$    |__/                    
| $$$$| $$  /$$$$$$  /$$    /$$ /$$  /$$$$$$   /$$$$$$  /$$$$$$   /$$  /$$$$$$  /$$$$$$$ 
| $$ $$ $$ |____  $$|  $$  /$$/| $$ /$$__  $$ |____  $$|_  $$_/  | $$ /$$__  $$| $$__  $$
| $$  $$$$  /$$$$$$$ \  $$/$$/ | $$| $$  \ $$  /$$$$$$$  | $$    | $$| $$  \ $$| $$  \ $$
| $$\  $$$ /$$__  $$  \  $$$/  | $$| $$  | $$ /$$__  $$  | $$ /$$| $$| $$  | $$| $$  | $$
| $$ \  $$|  $$$$$$$   \  $/   | $$|  $$$$$$$|  $$$$$$$  |  $$$$/| $$|  $$$$$$/| $$  | $$
|__/  \__/ \_______/    \_/    |__/ \____  $$ \_______/   \___/  |__/ \______/ |__/  |__/
                                    /$$  \ $$                                            
                                   |  $$$$$$/                                            
                                    \______/                                             
*/

nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 10px 25px;
  background-color: rgb(54, 178, 209);
  color: white;
  font-size: 1.5em;
}

nav .NomSite {
  margin: 0;
  font-size: 1.6em;
  font-family: 'Audiowide', sans-serif;
  text-decoration: none;
  color: rgb(255, 255, 255);
}


.nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: clamp(0.5rem, 2vw, 2rem);
}

.nav-links a {
  text-decoration: none;
  color: black;
  font-size: 1em;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Ajoute un peu de marge à droite sur grand écran */
.nav-links a:last-child {
  margin-right: 20px; 
}

.nav-links a[href*="search"]::before {
  content: "🔍";
}

/* Responsive */
@media (max-width: 600px) {
nav {
  flex-direction: column;
  align-items: center; 
  font-size: 1.2em;
}

.nav-links {
  flex-direction: column;
  align-items: center; 
  width: 100%;
  margin-top: 0.5rem;
  gap: 0.5rem;
  padding-left: 0; 
  padding-right: 0; 
}

.nav-links a {
  text-align: center; 
}
}

/*
 /$$$$$$ /$$                            
  |_$$_/| $$                            
  | $$ /$$$$$$    /$$$$$$  /$$$$$$/$$$$ 
  | $$|_  $$_/   /$$__  $$| $$_  $$_  $$
  | $$  | $$    | $$$$$$$$| $$ \ $$ \ $$
  | $$  | $$ /$$| $$_____/| $$ | $$ | $$
 /$$$$$$|  $$$$/|  $$$$$$$| $$ | $$ | $$
|______/ \___/   \_______/|__/ |__/ |__/
*/

.item {
  margin: 20px;
  padding: 5px 10px;
  padding-bottom: 20px;
  width: 225px;
  height: 411px;
  position: relative;
  overflow: hidden;
  text-align: center;
  background-color: rgb(54, 178, 209);
  border-radius: 10px;
  box-shadow: 0 0 10px rgb(85, 161, 155);
  transition: transform 0.4s ease-out, box-shadow 0.4s ease-out, background-size 0.4s ease-out;
  color: rgb(0, 0, 0);
}

.item:hover {
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 10px rgb(85, 161, 155);
}

.item h3 {
  margin: 0;
  padding-top: 5px;
  font-size: 1.5em;
}

.item p {
  margin: 0;
  padding: 5px 0 10px;
  text-wrap: wrap;
}

.item img {
  vertical-align: middle; 
}

.item:hover .covering, .item .covering:focus {
  opacity: 0.95;
}

.item:hover .anime {
  margin-top: 55px;
  scale: 1.5;
  transition-delay: 0.2s;
}

@media (max-width: 450px) {
  .item {
    justify-content: center;
    margin: 0px;
  }
}

/*
  /$$$$$$            /$$                        
 /$$__  $$          |__/                        
| $$  \ $$ /$$$$$$$  /$$ /$$$$$$/$$$$   /$$$$$$ 
| $$$$$$$$| $$__  $$| $$| $$_  $$_  $$ /$$__  $$
| $$__  $$| $$  \ $$| $$| $$ \ $$ \ $$| $$$$$$$$
| $$  | $$| $$  | $$| $$| $$ | $$ | $$| $$_____/
| $$  | $$| $$  | $$| $$| $$ | $$ | $$|  $$$$$$$
|__/  |__/|__/  |__/|__/|__/ |__/ |__/ \_______/
*/

.anime {
  margin: 10px auto 5px auto;
  font-size: 1em;
  color: black;
  border-radius: 10px;
  text-align: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  width: 200px;
  height: 300px;
}

/*
  /$$$$$$                                          /$$                    
 /$$__  $$                                        |__/                    
| $$  \__/  /$$$$$$  /$$    /$$ /$$$$$$   /$$$$$$  /$$ /$$$$$$$   /$$$$$$ 
| $$       /$$__  $$|  $$  /$$//$$__  $$ /$$__  $$| $$| $$__  $$ /$$__  $$
| $$      | $$  \ $$ \  $$/$$/| $$$$$$$$| $$  \__/| $$| $$  \ $$| $$  \ $$
| $$    $$| $$  | $$  \  $$$/ | $$_____/| $$      | $$| $$  | $$| $$  | $$
|  $$$$$$/|  $$$$$$/   \  $/  |  $$$$$$$| $$      | $$| $$  | $$|  $$$$$$$
 \______/  \______/     \_/    \_______/|__/      |__/|__/  |__/ \____  $$
                                                                 /$$  \ $$
                                                                |  $$$$$$/
                                                                 \______/ 
*/

.covering {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  padding: 30px;

  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;

  text-decoration: none;
  background-color: rgba(0, 0, 0, 0.95);
  background-position: center;
  color: white;
  border-radius: 10px;

  opacity: 0;
  transition: opacity 0.25s ease-in-out;
}

.covering h3{
  margin-top: 0px;
  margin-bottom: 25px;
}

a .selected-page {
  font-size: 2em;
}

/* 
 /$$$$$$$$                    /$$                        
| $$_____/                   | $$                        
| $$     /$$$$$$   /$$$$$$  /$$$$$$    /$$$$$$   /$$$$$$ 
| $$$$$ /$$__  $$ /$$__  $$|_  $$_/   /$$__  $$ /$$__  $$
| $$__/| $$  \ $$| $$  \ $$  | $$    | $$$$$$$$| $$  \__/
| $$   | $$  | $$| $$  | $$  | $$ /$$| $$_____/| $$      
| $$   |  $$$$$$/|  $$$$$$/  |  $$$$/|  $$$$$$$| $$      
|__/    \______/  \______/    \___/   \_______/|__/      
*/

.footer {
  margin-top: 50px;
  background-color: rgb(54, 178, 209);
  color: rgb(255, 255, 255);
  padding: 2rem;
  font-family: 'Segoe UI', sans-serif;
  font-size: 1rem;
}

.footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: auto;
}

.legal-section h3 {
  text-align: center;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  color: rgb(255, 255, 255);
  border-bottom: 2px solid rgb(68, 68, 68);
  padding-bottom: 0.3rem;
}

.legal-section p {
  margin: 0.4rem 0;
  line-height: 1.4;
}

.legal-section a {
  color: rgb(0, 35, 190);
  text-decoration: none;
}

.legal-section a:hover {
  text-decoration: underline;
}

.footer .bottom-part p {
  text-align: center;
}

@media (min-width:750px) {
  .footer-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    max-width: 1200px;
    margin: auto;
  }
}

@media (max-width: 751px) {
  .footer{
    padding: 1rem;
    text-align: center;
  }

  .footer-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    max-width: 1200px;
    margin: auto;
  }
}