@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Reggae+One&display=swap');


body{background-color: black;
    color: #ff9900;
    font-family: Bangers,cursive;
    
    
}
.btn-retour-biblio {
    text-align: left;
    display: inline-block;
    background-color: #1a1a1a;
    color: #ff9900;
    border: 2px solid #ff9900;
    padding: 10px 20px;
    margin: 20px;
    text-decoration: none;
    font-family: 'Bangers', cursive;
    font-size: 18px;
    border-radius: 5px;
    transition: 0.3s;
    /* On garde ton curseur Rinnegan ! */
    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;
}

.btn-retour-biblio:hover {
    background-color: #ff9900;
    color: black;
    box-shadow: 0 0 15px #ff9900;
    transform: translateX(-5px); /* Petit effet de glissement vers la gauche */
}

.btn-retour-biblio span {
    margin-right: 10px;
}
h1{
    text-align: center;
    font-family: Bangers;
}

h2{
    text-align: center;
}
h3{text-align: center;}




div{text-align: center;}
























/* ==========================================================
   🖼️ JUTSU DES IMAGES ET DESCRIPTIONS
   ========================================================== */

.boite-image {
    text-align: center; /* Centre l'image et le texte */
    margin: 30px auto; /* Espace au-dessus et en dessous */
    max-width: 350px; /* La largeur max pour pas que ce soit géant */

}

.boite-image img {
    width: 100%; /* L'image prend toute la largeur de sa boîte */
    height: auto;
    filter: drop-shadow(0px 10px 15px rgba(255, 0, 0, 0.3)); /* Une petite ombre rouge stylée ! */
}

.boite-image figcaption {
    font-family: 'Reggae One', cursive; /* On utilise l'autre police pour que ça ressorte ! */
    font-size: 1rem;
    color: white; /* Texte en blanc ou gris clair */
    margin-top: 10px;
    font-style: italic; /* Met le texte légèrement penché */
}





/* ==========================================================
   🌀 JUTSU DU FLEXBOX (TEXTE À GAUCHE, IMAGES À DROITE)
   ========================================================== */

.conteneur-histoire {
    display: flex;
    align-items: center; /* Aligne tout bien au centre verticalement */
    justify-content: space-between;
    max-width: 1200px; /* On donne de la place au conteneur */
    margin: 40px auto;
    gap: 50px; /* L'espace entre le texte et les images */
    padding: 0 20px;
}

.texte-histoire {
    flex: 1; /* Le texte prend toute la place disponible à gauche */
    text-align: justify; /* Fait des lignes bien droites comme dans un livre */
}

.texte-histoire p {
    margin: 0; 
    max-width: 100%; /* Annule l'ancienne limite de largeur pour ce texte précis */
}

.texte-histoire h3 {
    text-align: left;
    font-size: 2.5rem;
    color: #ff9900;
    margin-bottom: 20px;
}

.images-naruto {
    display: flex;
    flex-direction: column; /* Superpose les deux images à droite */
    gap: 20px;
    width: 400px; /* Définit la taille de la colonne de droite */
}

/* =========================================
   📱 RESPONSIVE DU FLEXBOX (MOBILE)
   ========================================= */
@media (max-width: 768px) {
    .conteneur-histoire {
        flex-direction: column; /* Sur mobile, on rempile de haut en bas ! */
        gap: 20px;
    }

    .images-naruto {
        width: 100%; /* Les images reprennent toute la largeur */
    }

    .texte-histoire h3 {
        text-align: center; /* On recentre le titre sur mobile */
    }
}




/* ==========================================================
   🚀 JUTSU DE LÉVITATION (ANIMATION AU SURVOL)
   ========================================================== */

/* 1. On rend le mouvement de la boîte fluide */
.boite-image {
    transition: transform 0.3s ease-in-out;
}

/* 2. L'image s'envole quand on met la souris dessus */
.boite-image:hover {
    transform: translateY(-10px); /* Monte de 10 pixels */
    cursor: pointer;
}

/* 3. On rend l'animation de l'ombre de l'image fluide aussi */
.boite-image img {
    transition: filter 0.3s ease-in-out;
}

/* 4. Le chakra (l'ombre rouge) s'intensifie au survol ! */
.boite-image:hover img {
    filter: drop-shadow(0px 15px 30px rgba(255, 0, 0, 0.7)); /* Ombre plus grande et plus rouge */
}












/* =========================================
   📱 JUTSU RESPONSIVE (MOBILE FIRST) - HISTOIRE NARUTO
   ========================================= */


/* =========================================
   🛑 JUTSU DE LISIBILITÉ SUR PC (HISTOIRE NARUTO)
   ========================================= */

div, p {
    max-width: 800px; /* Le texte s'arrête à 800px de large max */
    margin: 30px auto; /* Centre le texte parfaitement au milieu de l'écran */
    padding: 0 20px; /* Petite marge de sécurité */
    line-height: 1.6; /* Aère bien les lignes pour la lecture */
    font-size: 1.2rem; /* Une bonne taille de police pour PC */
}


@media (max-width: 768px) {
    /* 1. On rétrécit un peu les titres */
    h1 {
        font-size: 2rem;
        padding: 0 10px;
    }
    
    h2 {
        font-size: 1.5rem;
        padding: 0 10px;
    }

    h3 {
        font-size: 1.3rem;
    }

    /* 2. On empêche le texte de coller aux bords de l'écran */
    div, p {
        width: 90%;
        margin: 0 auto 15px auto; /* Centre le bloc et met un espace en bas */
        font-size: 1.1rem;
        text-align: left; /* Aligné à gauche, c'est plus agréable à lire sur mobile */
        line-height: 1.5; /* Aère les lignes de texte */
        box-sizing: border-box;
    }

    /* 3. On adapte le bouton de retour */
    .btn-retour-biblio {
        display: block; /* Force le bouton à prendre sa ligne */
        width: 85%; /* S'étale joliment */
        text-align: center; /* Centre le texte du bouton */
        margin: 20px auto; /* Centre le bouton lui-même */
        box-sizing: border-box;
    }

    /* Petite astuce : on enlève le glissement sur le côté sur mobile 
       pour éviter que l'écran ne tremble quand on pose le doigt dessus */
    .btn-retour-biblio:hover {
        transform: translateY(-3px); /* Il montera au lieu d'aller à gauche */
    }
}