@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Reggae+One&display=swap');
@keyframes rotation-konoha {
from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(360deg); }
}
body {
background-color: #000000;
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;
overflow-x: hidden;
position: relative;
/* CURSEUR RINNEGAN SVG */
cursor: url("data:image/svg+xml;utf8,") 16 16, auto !important;
}
body::before {
content: "";
position: fixed;
top: 50%; left: 50%;
width: 750px; height: 750px;
background-image: url('telechargement.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
z-index: -1;
opacity: 0.3;
animation: rotation-konoha 25s linear infinite;
}
h1 { font-family: 'Reggae One', cursive; font-size: 2.5rem; margin: 10px 0; }
h2 { font-size: 1.5rem; margin-top: 20px; }
p, li { font-size: 1.1rem; list-style: none; }
button, .btn-bibliotheque, .btn-naruto {
background-color: #ff9900;
color: black;
border: 2px solid #000;
padding: 10px 20px;
margin: 10px;
font-family: 'Bangers', cursive;
font-size: 18px;
border-radius: 8px;
text-decoration: none;
display: inline-block;
transition: 0.3s;
cursor: url("data:image/svg+xml;utf8,") 16 16, pointer !important;
}
button:hover, .btn-bibliotheque:hover, .btn-naruto:hover {
background-color: white !important;
color: #ff9900 !important;
transform: scale(1.1);
box-shadow: 0 0 20px white;
}
#bouton-sharingan {
background-color: black;
color: #ff0000;
border: 2px solid #ff0000;
border-radius: 50px;
}
#bouton-sharingan:hover {
background-color: #ff0000 !important;
color: white !important;
box-shadow: 0 0 25px red;
}
.mode-genjutsu { filter: invert(100%) hue-rotate(180deg) !important; }
/* ==========================================================
🍜 HEADER DE NAVIGATION (BARRE DU HAUT)
========================================================== */
/* La barre noire tout en haut */
.navbar {
background-color: black;
width: 100%;
padding: 15px 0;
display: flex;
justify-content: center;
gap: 40px; /* L'espace entre les mots */
position: sticky; /* Reste en haut quand on descend la page */
top: 0;
z-index: 1000;
border-bottom: 2px solid #222; /* Petite ligne discrète pour séparer du fond */
}
/* Le style de base du texte (Blanc) */
.nav-link {
color: white;
font-family: 'Bangers', cursive;
font-size: 1.5rem;
text-decoration: none;
position: relative; /* Indispensable pour placer le trait en dessous */
padding-bottom: 5px; /* Laisse de la place pour le trait */
transition: color 0.3s ease;
}
/* Le petit trait INVISIBLE par défaut */
.nav-link::after {
content: '';
position: absolute;
width: 0; /* Il fait 0 de largeur, donc on ne le voit pas */
height: 3px;
bottom: 0;
left: 0;
background-color: white; /* Trait blanc au survol */
transition: width 0.3s ease; /* Animation fluide de la largeur */
}
/* L'animation : quand on passe la souris, le trait prend 100% de la largeur */
a.nav-link:hover::after {
width: 100%;
}
/* 🟠 STYLE DE LA PAGE ACTUELLE (Force absolue du orange) */
a.nav-link.active {
color: #ff9900 !important;
}
/* Le trait orange reste tout le temps affiché pour la page actuelle */
a.nav-link.active::after {
width: 100% !important;
background-color: #ff9900 !important;
}
/* =========================================
📱 JUTSU RESPONSIVE POUR LA NAVBAR
========================================= */
@media (max-width: 768px) {
.navbar {
gap: 15px; /* Moins d'espace entre les mots sur mobile */
padding: 10px 0;
flex-wrap: wrap; /* Si y'a trop de liens, ça passe à la ligne proprement */
}
.nav-link {
font-size: 1.2rem; /* Texte un peu plus petit sur téléphone */
}
}
/* --- FIX DE LA NAVBAR ET DU BOUTON ARCADE --- */
/* On s'assure que la navbar aligne tout bien au centre verticalement */
.navbar {
display: flex;
align-items: center;
}
/* Le style spécifique pour le bouton Arcade */
.arcade-link {
/* Fini la couleur forcée ! Il prendra le blanc normal, ou le orange si '.active' est là */
display: inline-flex;
align-items: center;
transition: transform 0.3s ease, color 0.3s ease; /* Le grossissement sera bien fluide */
}
/* On gère la manette pour pas qu'elle casse l'alignement */
.icone-manette {
font-size: 1.2rem;
margin-right: 8px;
filter: drop-shadow(0px 0px 5px rgba(255, 153, 0, 0.5));
}
/* L'effet au survol : on le fait grossir (et l'effet de la barre en bas marchera toujours) */
.arcade-link:hover {
transform: scale(1.1);
}
/* =========================================
📱 JUTSU RESPONSIVE (MOBILE FIRST)
========================================= */
@media (max-width: 768px) {
/* 1. On rétrécit le logo tournant de Konoha pour qu'il tienne sur l'écran */
body::before {
width: 300px;
height: 300px;
}
/* 2. On empile les boutons d'en haut pour éviter qu'ils se chevauchent */
.header-buttons {
display: flex;
flex-direction: column; /* Aligne de haut en bas */
width: 90%; /* Prend presque toute la largeur du tel */
margin: 20px auto;
}
/* Les boutons prennent toute la largeur disponible */
.header-buttons button,
.header-buttons .btn-bibliotheque {
width: 100%;
margin: 8px 0; /* Un peu d'espace entre chaque bouton */
box-sizing: border-box; /* Empêche le bouton de déborder */
}
/* 3. On réduit un peu les gros titres pour les petits écrans */
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.3rem;
}
/* 4. On donne un peu d'air à la fiche ninja */
.fiche-ninja {
width: 90%;
padding: 10px;
text-align: left; /* C'est souvent plus lisible à gauche sur mobile */
}
}