@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Reggae+One&display=swap');
body {
background-color: black;
color: #ff9900;
font-family: 'Bangers', cursive;
text-align: center;
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: url("data:image/svg+xml;utf8,") 16 16, auto !important;
}
h1 { font-family: 'Reggae One', cursive; font-size: 2.5rem; }
.btn-retour, button {
background-color: #ff9900;
color: black;
border: 2px solid #000;
padding: 12px 25px;
margin: 20px;
font-family: 'Bangers', cursive;
font-size: 18px;
border-radius: 8px;
text-decoration: none;
transition: 0.3s;
display: inline-block;
cursor: url("data:image/svg+xml;utf8,") 16 16, pointer !important;
}
/* ==========================================================
--- CARTE AKATSUKI (Dans la Bibliothèque) ---
========================================================== */
.akatsuki-card {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none; /* Enlève le trait moche du lien */
/* Le design sombre de la carte */
background-color: #111; /* Un gris trèèès foncé, presque noir */
border: 2px solid red; /* La bordure rouge Akatsuki */
border-radius: 15px; /* Bords arrondis */
padding: 20px;
width: 250px; /* Adapte la largeur selon tes autres cartes */
margin: 20px;
/* L'ombre rouge de base */
box-shadow: 0 5px 15px rgba(255, 0, 0, 0.2);
/* Prépare l'animation fluide */
transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
/* L'image à l'intérieur de la carte */
.akatsuki-card img {
width: 100%; /* Prend toute la largeur de la carte */
height: auto;
border-radius: 10px;
margin-bottom: 15px;
}
/* Le titre de la carte */
.akatsuki-card h3 {
color: red;
font-family: 'Bangers', cursive;
font-size: 2rem;
margin: 0;
letter-spacing: 2px;
transition: color 0.3s ease, text-shadow 0.3s ease;
}
/* --- L'EFFET AU SURVOL (Lévitation et Chakra) --- */
.akatsuki-card:hover {
/* La carte monte de 10px (Comme Sakura !) */
transform: translateY(-10px);
/* L'ombre rouge devient énorme */
box-shadow: 0 15px 30px rgba(255, 0, 0, 0.7);
/* Le fond devient noir absolu */
background-color: #000;
}
/* Le texte change aussi au survol */
.akatsuki-card:hover h3 {
color: white; /* Le texte devient blanc */
text-shadow: 0 0 10px red, 0 0 20px red; /* Halo rouge autour du blanc */
}
.btn-retour:hover, button:hover {
background-color: white !important;
color: #ff9900 !important;
transform: scale(1.1);
box-shadow: 0 0 20px white;
}
.btn-zen {
background: #1a1a1a;
color: #ff9900;
border: 2px solid #ff9900;
padding: 10px 20px;
font-family: 'Bangers', cursive;
border-radius: 30px;
cursor: pointer;
transition: 0.3s;
margin-bottom: 20px;
}
.btn-zen:hover {
box-shadow: 0 0 15px #ff9900;
transform: scale(1.05);
}
.btn-musique {
background-color: #1a1a1a;
color: #ff9900;
border: 2px solid #ff9900;
padding: 10px 25px;
font-family: 'Bangers', cursive;
font-size: 18px;
border-radius: 50px;
cursor: pointer;
transition: 0.3s;
margin: 20px;
}
.btn-musique:hover {
background-color: #ff9900;
color: black;
box-shadow: 0 0 20px #ff9900;
transform: scale(1.1);
}
/* --- LA BARRE DE RECHERCHE --- */
#inputParchemin {
width: 100%;
padding: 15px 25px;
font-size: 1.8rem;
font-family: 'Bangers', cursive;
color: white;
background-color: #222; /* Fond sombre pour coller à ta page */
border: 3px solid #ff9900; /* La bordure orange demandée */
border-radius: 30px;
outline: none;
box-sizing: border-box;
transition: box-shadow 0.3s ease;
text-align: center;
}
/* Effet quand on clique dans la barre */
#inputParchemin:focus {
box-shadow: 0 0 20px #ff9900;
}
/* --- LES SUGGESTIONS --- */
.suggestions {
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: white;
border-radius: 15px;
margin-top: 10px;
padding: 0;
list-style: none;
max-height: 200px;
overflow-y: auto;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
display: none; /* Caché par défaut */
z-index: 10;
text-align: left; /* Plus lisible d'avoir les suggestions alignées à gauche */
}
.suggestions li {
padding: 12px 20px;
color: black;
font-family: sans-serif; /* Une police classique pour bien lire les titres */
font-size: 1.2rem;
cursor: pointer;
border-bottom: 1px solid #ddd;
transition: background 0.2s;
}
/* Effet orange au survol d'une suggestion */
.suggestions li:hover {
background-color: #ff9900;
color: white;
}
/* --- LE CONTENEUR DES LIVRES --- */
#liste-livres {
display: flex;
flex-wrap: wrap; /* Permet aux cartes de passer à la ligne sur les petits écrans */
justify-content: center; /* Centre les cartes au milieu de la page */
gap: 30px; /* Espace entre chaque carte */
margin-top: 40px;
max-width: 1000px;
}
/* --- LE STYLE D'UNE CARTE LIVRE --- */
.livre {
background-color: #1a1a1a; /* Fond sombre ninja */
border: 2px solid #ff9900; /* Bordure orange */
border-radius: 15px; /* Coins arrondis */
padding: 20px;
width: 250px; /* Largeur fixe pour que toutes les cartes soient pareilles */
text-decoration: none; /* Enlève la ligne de soulignement des liens */
color: white; /* Le texte de description en blanc */
transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
display: flex;
flex-direction: column;
justify-content: center;
}
/* --- LE TITRE DANS LA CARTE --- */
.livre h2 {
color: #ff9900; /* Titre en orange pour ressortir */
margin-top: 0;
font-size: 1.5rem;
}
/* --- L'ANIMATION AU SURVOL --- */
.livre:hover {
transform: translateY(-10px); /* La carte monte légèrement */
box-shadow: 0 10px 25px rgba(255, 153, 0, 0.4); /* Aura orange (chakra) */
background-color: #222; /* Le fond s'éclaircit un petit peu */
}
/* --- STYLE SPÉCIAL POUR LA CARTE SAKURA --- */
/* 1. Le titre en rose */
.carte-sakura h2 {
color: rgb(255, 71, 215); /* Le beau rose que tu avais utilisé pour son bouton */
}
/* 2. Bonus : On change aussi la bordure de la carte en rose */
.carte-sakura {
border-color: rgb(255, 71, 215);
}
/* 3. Bonus : L'aura (l'ombre) devient rose quand on passe la souris dessus */
.carte-sakura:hover {
box-shadow: 0 10px 25px rgba(255, 71, 215, 0.4);
}