@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,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><circle cx='16' cy='16' r='14' fill='%23a288e3' stroke='black' stroke-width='1'/><circle cx='16' cy='16' r='10' fill='none' stroke='black' stroke-width='1'/><circle cx='16' cy='16' r='6' fill='none' stroke='black' stroke-width='1'/><circle cx='16' cy='16' r='2' fill='black'/></svg>") 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,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><circle cx='16' cy='16' r='14' fill='%23a288e3' stroke='black' stroke-width='1'/><circle cx='16' cy='16' r='10' fill='none' stroke='black' stroke-width='1'/><circle cx='16' cy='16' r='6' fill='none' stroke='black' stroke-width='1'/><circle cx='16' cy='16' r='2' fill='black'/></svg>") 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);
}






/* ==========================================================
   🦊 IMAGE SUR LA CARTE NARUTO (Dans la Bibliothèque)
   ========================================================== */

/* On cible l'image qui est UNIQUEMENT à l'intérieur de la carte Naruto */
.carte-naruto img {
    width: 100%; /* L'image prend toute la largeur de la carte */
    height: 150px; /* On limite la hauteur pour ne pas écraser le texte */
    object-fit: contain; /* Empêche l'image de se déformer, elle garde ses proportions */
    margin-bottom: 15px; /* Un petit espace entre l'image et le titre */
    filter: drop-shadow(0px 5px 10px rgba(255, 153, 0, 0.4)); /* Petite ombre orange */
    transition: transform 0.3s ease; /* Pour l'effet au survol */
}

/* Bonus : L'image grandit un peu quand on survole la carte entière ! */
.carte-naruto:hover img {
    transform: scale(1.1); /* L'image grossit de 10% */
}


/* ==========================================================
   🌀 UNIFORMISATION ET EFFET RASENGAN (Bibliothèque)
   ========================================================== */

/* 1. On applique une taille uniforme à TOUTES les images de cartes 'livre'
      pour que la bibliothèque reste propre et alignée */
.livre img {
    width: 100%; /* Prend toute la largeur de la carte */
    height: 150px; /* Force une hauteur fixe de 150px pour tout le monde */
    object-fit: contain; /* Garde les proportions de l'image (pas de déformation) */
    margin-bottom: 15px; /* Espace avec le titre */
    transition: transform 0.3s ease, filter 0.3s ease; /* Prépare l'animation fluide */
}

/* 2. Au survol de la carte Techniques, l'image grandit (comme Sakura) */
.carte-techniques:hover img {
    transform: scale(1.1); /* L'image grossit de 10% */
}

/* 3. EFFET CHAKRA : Au survol, on ajoute une aura bleue au Rasengan 🔵💥 */
.carte-techniques:hover img {
    filter: drop-shadow(0px 10px 20px rgba(0, 150, 255, 0.8)); /* Halo bleu intense */
}



/* ==========================================================
   🍥 EFFET SPÉCIAL NARUTOMAKI
   ========================================================== */

/* L'ombre rose de base pour le Narutomaki */
.carte-significations img {
    filter: drop-shadow(0px 5px 10px rgba(255, 105, 180, 0.4)); 
    transition: transform 0.3s ease, filter 0.3s ease; /* Pour que l'animation soit fluide */
}

/* L'effet au survol : l'image grossit et l'ombre rose explose ! */
.carte-significations:hover img {
    transform: scale(1.1); 
    filter: drop-shadow(0px 10px 20px rgba(255, 105, 180, 0.9)); 
}






/* ==========================================================
   🌸 EFFET CHAKRA MÉDICAL (SAKURA)
   ========================================================== */

/* 1. Ombre rose de base sur l'image de Sakura */
.carte-sakura img {
    /* 👇 Ombre rose discrète 👇 */
    filter: drop-shadow(0px 5px 10px rgba(255, 113, 224, 0.4)); 
    transition: transform 0.3s ease, filter 0.3s ease; /* Pour que l'animation soit fluide */
}

/* 2. L'effet au survol : l'aura rose explose ! 🌸💥 */
.carte-sakura:hover img {
    /* L'image grossit un peu wesh ! */
    transform: scale(1.1); 
    
    /* 👇 Ombre rose intense et large 👇 */
    filter: drop-shadow(0px 10px 25px rgba(255, 71, 215, 0.9)); 
}






/* ==========================================================
   🔴 JUTSU SPÉCIAL AKATSUKI SHADOW
   ========================================================== */

/* 1. On prépare l'animation de l'ombre sur l'image pour que ce soit fluide */
.akatsuki-card img {
    transition: filter 0.3s ease-in-out;
}

/* 2. On applique une ombre rouge de base sur l'IMAGE png elle-même 👇 */
.akatsuki-card img {
    /* 👇 Petite lueur rouge sang discrète 👇 */
    filter: drop-shadow(0px 5px 10px rgba(255, 0, 0, 0.5)); 
}

/* 3. L'ombre rouge explose au survol de la carte 👇💥 */
.akatsuki-card:hover img {
    /* 👇 Halo rouge intense et effrayant 👇 */
    filter: drop-shadow(0px 10px 25px rgba(255, 0, 0, 0.9)); 
}

/* ==========================================================
   🛑 ANTI-VIOLET (PARAGRAPHE AKATSUKI)
   ========================================================== */

/* On force la couleur du texte du paragraphe, cliqué ou pas ! */
.akatsuki-card p {
    color: white; /* Texte en blanc (ou #cccccc pour un gris clair stylé) */
    font-family: Bangers,cursive; /* Une police simple pour bien lire la description */
    font-size: 1rem;
    margin-top: 10px; /* Un petit espace entre le titre h3 et le texte */
    text-decoration: none; /* Sécurité pour enlever le soulignement */
}

/* Sécurité absolue : on interdit le violet sur toute la carte */
.akatsuki-card:visited, .akatsuki-card:link {
    color: inherit;
    text-decoration: none;
}




/* =========================================
   📱 JUTSU RESPONSIVE (MOBILE FIRST) - BIBLIOTHÈQUE
   ========================================= */

@media (max-width: 768px) {
    /* 1. On réduit la taille du grand titre */
    h1 {
        font-size: 2rem;
        padding: 0 10px;
    }

    /* 2. On adapte la barre de recherche pour les petits écrans */
    .search-box {
        width: 90% !important; /* Force la barre à prendre 90% de l'écran, pas plus */
        margin: 10px auto !important;
    }

    #inputParchemin {
        font-size: 1.2rem; /* Texte plus petit pour que ça rentre */
        padding: 10px 15px;
    }

    /* 3. On empile les cartes de livres parfaitement au centre */
    #liste-livres {
        display: flex;
        flex-direction: column; /* Empile les cartes de haut en bas */
        align-items: center; /* Centre les cartes */
        width: 100%;
        gap: 20px; /* Un peu moins d'espace entre les cartes sur mobile */
        margin-top: 20px;
    }

    /* 4. On ajuste la taille de TOUTES les cartes (Livres + Akatsuki) */
    .livre, .akatsuki-card {
        width: 85%; /* La carte prend 85% de l'écran du tel */
        margin: 10px 0; /* Enlève les marges sur les côtés pour centrer parfaitement */
        box-sizing: border-box; /* Empêche les débordements */
    }

    /* 5. On ajuste les boutons du haut (Retour et Zen) */
    .btn-retour, .btn-zen {
        width: 85%;
        margin: 10px auto;
        display: block; /* Force le bouton à prendre sa propre ligne */
        box-sizing: border-box;
    }
}


.lettre-secrete {
  color: inherit; /* Garde la même couleur que le reste du mot */
  cursor: inherit; /* ⬅️ LE SECRET EST LÀ : copie le curseur des autres lettres */
  /* Si "inherit" ne marche pas bien, mets "cursor: text;" ou "cursor: default;" */
}

/* Si tu veux être absolument indétectable, n'ajoute AUCUN effet :hover ou :active */

/* Petit bonus : un effet au clic pour que le gars comprenne qu'il a touché un truc */
.lettre-secrete:active {
  color: white; /* Le O clignote en blanc une fraction de seconde au clic */
}

/* ==========================================================
   😈 PIÈGE UWU (SUGGESTION MYSTÈRE)
   ========================================================== */

/* On donne un style unique à la ligne mystère dans les suggestions */
.suggestion-mystere {
    color: #ff00ff !important; /* Texte en rose flashy UWU ! */
    font-weight: bold;
    font-family: 'Bangers', cursive !important; /* Police stylée */
    text-shadow: 0 0 8px rgba(255, 0, 255, 0.6);
    border-top: 2px dashed #ff00ff !important; /* Petite séparation pointillée au-dessus */
}

/* L'effet quand la victime passe sa souris dessus */
.suggestion-mystere:hover {
    background-color: #1a1a1a !important; /* Fond noir sombre */
    color: white !important;
    box-shadow: inset 0 0 15px #ff00ff; /* Lueur rose à l'intérieur */
}