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



body{

background-color: black;
color: #ff9900;
font-family: Bangers,cursive;

}

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

div{
    color: rgb(39, 116, 204) ;
    font-size: large;
    text-align: center;
}
.Rasengan{
text-align: center;
    color:rgb(39, 116, 204)  ;
}







.btn-retour {
    background-color: #ff4500; /* Orange vif */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px; /* Coins arrondis */
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    transition: 0.3s; /* Pour que le changement soit fluide */
}

/* Quand on passe la souris sur le bouton */
.btn-retour:hover {
    background-color: #cc3700; /* Un orange plus foncé */
    transform: scale(1.1); /* Il grandit un tout petit peu */
}




.Rasengan {
    color: #00d2ff; /* Un bleu clair électrique */
    text-shadow: 0 0 10px #00d2ff, 0 0 20px #0088ff, 0 0 30px #0044ff;
    font-weight: bold;
}

div{
    color: #00d2ff; /* Un bleu clair électrique */
    text-shadow: 0 0 10px #00d2ff, 0 0 20px #0088ff, 0 0 30px #0044ff;
    font-weight: bold;
}




















/* ================= ==========================================
   🌀 JUTSU SPÉCIAL RASENGAN (Ombre Bleue)
   ================ ========================================== */

/* On prend la même base que .boite-image mais on change juste l'ombre pour le bleu Rasengan */
.boite-rasengan img {
    /* 👇 Ombre bleue intense et large 👇 */
    filter: drop-shadow(0px 10px 20px rgba(0, 150, 255, 0.6));
}

/* Optionnel : Si tu veux un titre spécial pour la section techniques */
.techniques-naruto h2 {
    color: #00ccff; /* Bleu Rasengan pour le titre */
    text-shadow: 0 0 10px rgba(0, 204, 255, 0.5);
}



/* ==========================================================
   🛑 CORRECTIF : CONFINEMENT DU RASENGAN GIGA GROS
   ========================================================== */

/* On cible spécifiquement la boîte du Rasengan pour réduire sa taille */
.boite-rasengan {
    max-width: 250px !important; /* 👇 On force la taille à 250px max (au lieu de 350px par défaut) 👇 */
    margin: 20px auto; /* Toujours bien centré avec un peu d'espace autour */
}

/* On s'assure que l'image à l'intérieur s'adapte à cette nouvelle taille */
.boite-rasengan img {
    width: 100%;
    height: auto;
}









/* =========================================
   🛑 JUTSU DE LISIBILITÉ ET RESPONSIVE (TECHNIQUES)
   ========================================= */

/* 1. Sur PC : On empêche le texte de s'allonger à l'infini */
div, .Rasengan {
    max-width: 800px; /* Largeur max bloquée */
    margin: 30px auto; /* "auto" centre le bloc parfaitement au milieu */
    padding: 0 20px; /* Petite marge de sécurité */
    line-height: 1.6; /* Aère les lignes */
}

/* 2. Sur Mobile : On adapte tout pour les petits écrans */
@media (max-width: 768px) {
    h1 { font-size: 2rem; padding: 0 10px; }
    h2 { font-size: 1.5rem; }
    
    div, .Rasengan {
        width: 90%; /* Prend 90% de l'écran du tel */
        margin: 0 auto 20px auto;
        font-size: 1.1rem;
        text-align: left; /* Plus facile à lire à gauche sur mobile */
    }

    .btn-retour {
        display: block;
        width: 85%;
        margin: 20px auto;
        box-sizing: border-box;
    }
}











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

/* 1. On prépare l'animation pour que ce soit super fluide */
.boite-image, .boite-rasengan {
    transition: transform 0.3s ease-in-out; /* Prépare le mouvement */
}

/* 2. L'effet de lévitation quand la souris est dessus ! */
.boite-image:hover, .boite-rasengan:hover {
    transform: translateY(-10px); /* Fait monter l'image de 10 pixels vers le haut */
    cursor: pointer; /* Transforme la souris en petite main */
}

/* 3. BONUS : Le chakra du Rasengan brille encore plus fort quand il monte ! */
.boite-rasengan img {
    transition: filter 0.3s ease-in-out; /* Rend le changement de lumière fluide */
}

.boite-rasengan:hover img {
    filter: drop-shadow(0px 15px 30px rgba(0, 150, 255, 0.9)); /* L'ombre bleue devient géante ! */
}