/* 1. Application de la police partout avec l'import web */
body {
    background-image: url('Fondsite.png'); /* Remplace par le nom exact de ton image */
    background-repeat: repeat;
    background-attachment: fixed;
    margin: 0;
    padding: 20px;
    animation: apparitionPage 0.8s ease-in;
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
}

/* 2. Ta boîte blanche version "Boîte de dialogue Rétro" */
.bloc-principal {
    background-color: #ffffff;
    color: #000000;
    max-width: 500px; /* Idéal pour le rendu mobile que tu as sur tes captures */
    margin: 20px auto;
    padding: 20px;
    
    /* Grosse bordure noire et ombre rigide style Web 1.0 / Windows 95 */
    border: 3px solid #000000;
    box-shadow: 6px 6px 0px #000000;
}

/* 3. Ton menu de navigation amélioré */
.navigation-site {
    text-align: center;
    margin: 15px 0;
    padding: 10px 0;
    border-top: 2px dashed #000000;
    border-bottom: 2px dashed #000000;
}

.navigation-site a {
    display: inline-block;
    margin: 0 10px;
    text-decoration: none;
    color: #0000ff; /* Bleu hypertexte vintage */
    font-weight: bold;
    font-size: 16px;
}

/* Effet arc-en-ciel nostalgique au survol des liens du menu */
.navigation-site a:hover {
    background: linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #9400d3);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: animeArcEnCiel 2s linear infinite;
    text-decoration: underline;
}

/* Animation pour faire bouger l'arc-en-ciel */
@keyframes animeArcEnCiel {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes apparitionPage {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
.texte-arcenciel {
    font-weight: bold;
    background: linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #9400d3);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: animeArcEnCiel 3s linear infinite;
}

/* L'animation qui fait bouger les couleurs */
@keyframes animeArcEnCiel {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
/* Ta classe pour l'alignement parfait */
/* Ta classe pour l'alignement parfait (inchangée) */
.ligne-parfaite {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
}

/* 1. Le Logo */
.logo-site {
    height: 40px;  /* On fixe la hauteur à 40 pixels */
    width: auto;   /* La largeur s'adapte toute seule pour ne pas déformer l'image */
}
/* 1. On nettoie la liste pour enlever les ronds noirs par défaut */
ul {
    list-style: none; /* Supprime définitivement les puces de base */
    padding-left: 20px; /* Laisse de l'espace à gauche pour nos étoiles */
}

/* 2. On injecte l'étoile de force devant chaque ligne */
ul li {
    position: relative;
    padding-left: 25px; /* Crée l'espace exact pour l'émoji */
    font-family: 'Comic Sans MS', cursive; /* Optionnel : remet ta police */
    margin-bottom: 8px; /* Un petit espace entre chaque ligne */
}

ul li::before {
    content: "⭐"; /* Ton émoji étoile */
    position: absolute;
    left: 0; /* Aligne l'étoile tout à gauche */
    top: 50%;
    transform: translateY(-50%); /* Centre l'étoile verticalement par rapport au texte */
    font-size: 16px; /* Ajuste la taille de l'étoile si besoin */
}
.souligne-arcenciel {
    text-decoration: none; /* On enlève le vieux soulignement classique */
    position: relative;
    padding-bottom: 3px;   /* Un petit espace entre le texte et la ligne */
    
    /* On crée le dégradé arc-en-ciel */
    background-image: linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #9400d3);
    
    /* On force le dégradé à se placer uniquement tout en bas (hauteur de 3px) */
    background-size: 400% 3px;
    background-repeat: no-repeat;
    background-position: bottom left;
    
    /* On lance l'animation pour faire défiler les couleurs */
    animation: animeSoulignement 3s linear infinite;
}

/* L'animation qui fait bouger l'arc-en-ciel */
@keyframes animeSoulignement {
    0% { background-position: 0% 100%; }
    50% { background-position: 100% 100%; }
    100% { background-position: 0% 100%; }
}
/* 1. On aligne tout sur la même ligne */
.ligne-parfaite {
    display: flex;         /* Met les éléments côte à côte */
    align-items: center;   /* Centre parfaitement l'image et le texte verticalement */
    gap: 8px;              /* Crée un petit espace très propre entre l'image et le texte */
}

/* 2. On rend la taille de l'image identique à celle du texte */
.ligne-parfaite img {
    height: 1em;           /* L'image prend exactement la hauteur du texte ! */
    width: auto;           /* Garde les bonnes proportions de l'image */
}

/* Optionnel : tu peux changer la taille du texte ici, l'image suivra toute seule ! */
.ligne-parfaite p {
    font-size: 20px;
    margin: 0;             /* Enlève les marges invisibles du paragraphe pour un alignement parfait */
}
.bouton-xp {
    display: inline-block;
    padding: 6px 18px;
    
    /* La police système officielle de Windows XP */
    font-family: 'Tahoma', 'Segoe UI', sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7); /* Ombre sur le texte */
    text-decoration: none;
    
    /* Le dégradé bleu "effet plastique bombé" */
    background: linear-gradient(to bottom, #7da7e8 0%, #4a7ac9 12%, #194da6 88%, #032b75 100%);
    
    /* Les bordures légèrement arrondies */
    border: 1px solid #002060;
    border-radius: 4px;
    
    /* Effet de relief 3D (une ligne claire en haut, une ombre en bas) */
    box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.4), 
                1px 1px 2px rgba(0, 0, 0, 0.3);
    
    cursor: pointer;
    transition: all 0.1s ease;
}

/* 🟠 Le survol : il devient orange brillant comme dans le menu XP ! */
.bouton-xp:hover {
    color: #ffffff;
    border-color: #df6e00;
    background: linear-gradient(to bottom, #ffdfb0 0%, #ffad5b 10%, #df7100 88%, #9c4e00 100%);
    box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.6), 
                1px 1px 3px rgba(0, 0, 0, 0.4);
}

/* Le clic : le bouton s'enfonce visuellement */
.bouton-xp:active {
    background: linear-gradient(to bottom, #032b75 0%, #194da6 20%, #4a7ac9 100%);
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.6);
    transform: translateY(1px);
}
/* --- LA GALERIE RETRO --- */
.galerie-personnages {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    justify-content: center;
    margin-top: 30px;
}

/* Base de la carte : Style "Fenêtre / Bouton Windows 95" */
.carte-perso {
    display: block;
    width: 150px;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    color: #000000;
    
    /* Le secret rétro : une bordure 3D "extrudée" et AUCUN arrondi */
    border: 4px outset #ffffff; 
    background-color: #c0c0c0; /* Le fameux gris souris d'époque */
    
    /* Ombre noire ultra rigide (pas de flou) */
    box-shadow: 5px 5px 0px #000000; 
}

/* Effet interactif : quand on clique, la carte s'enfonce physiquement ! */
.carte-perso:active {
    border: 4px inset #ffffff;
    box-shadow: 2px 2px 0px #000000;
    transform: translate(3px, 3px);
}

/* L'image à l'intérieur : pixelisée et brute */
.carte-perso img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    border: 3px inset #ffffff; /* Image encastrée dans la carte */
    image-rendering: pixelated; /* Force le côté rétro si c'est du pixel art */
}

/* Le nom du personnage en Comic Sans, souligné au survol */
.carte-perso h3 {
    margin: 10px 0 0 0;
    font-size: 16px;
    font-family: 'Comic Sans MS', cursive;
}
.carte-perso:hover h3 {
    text-decoration: underline;
    color: #0000ff; /* Devient bleu hypertexte au survol */
}

/* =========================================
   VARIATIONS DE COULEURS LOOK 90's
   ========================================= */

/* Option Bleu Néon Crayon */
.carte-bleue {
    background-color: #00ffff; /* Cyan pur */
    border: 4px ridge #0000ff;  /* Bordure en relief brillante */
}

/* Option Rose Barbie Flashy */
.carte-rose {
    background-color: #ff00ff; /* Magenta pur */
    border: 4px ridge #ffffff;
}

/* L'Arc-en-ciel version "GIF animé des années 90" */
.carte-arcenciel {
    border: 4px double #000000;
    /* Couleurs saturées et brutes */
    background: linear-gradient(45deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff);
    background-size: 400% 400%;
    animation: arcEnCielBrutal 2s steps(8) infinite; /* Le "steps" donne un effet saccadé très rétro */
}

@keyframes arcEnCielBrutal {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
/* --- GESTION DES 3 HUMEURS --- */

/* 1. Par défaut, on cache les images de survol et de clic */
.zone-humeur .img-survol,
.zone-humeur .img-clic {
    display: none;
}

/* 2. Quand on SURVOLE la carte : on cache la normale, on montre le survol */
.carte-perso:hover .img-normal { display: none; }
.carte-perso:hover .img-survol { display: block; }

/* 3. Quand on CLIQUE sur la carte : on cache tout le reste, on montre le clic */
.carte-perso:active .img-normal,
.carte-perso:active .img-survol { display: none !important; }
.carte-perso:active .img-clic { display: block !important; }


/* --- STRUCTURE ET LOOK RETRO DES CARTES --- */
.galerie-personnages {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    justify-content: center;
    margin-top: 30px;
}

.carte-perso {
    display: block;
    width: 150px;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    color: #000000;
    border: 4px outset #ffffff; 
    box-shadow: 5px 5px 0px #000000; 
}

.carte-perso:active {
    border: 4px inset #ffffff;
    box-shadow: 2px 2px 0px #000000;
    transform: translate(3px, 3px);
}

.zone-humeur img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    border: 3px inset #ffffff;
    image-rendering: pixelated;
}

.carte-perso h3 {
    margin: 10px 0 0 0;
    font-size: 16px;
    font-family: 'Comic Sans MS', cursive;
}


/* --- TOUTES LES NOUVELLES COULEURS FLASHY --- */

.carte-bleue { background-color: #00ffff; border-color: #008b8b; }
.carte-rose { background-color: #ff00ff; border-color: #8b008b; }

/* Violet Électrique */
.carte-violette {
    background-color: #9400d3;
    border: 4px ridge #4b0082;
    color: #ffffff; /* Texte en blanc pour que ce soit lisible */
}

/* Jaune Moutarde Cyber */
.carte-jaune {
    background-color: #ffff00;
    border: 4px ridge #808000;
}

/* Rouge Alerte 95 */
.carte-rouge {
    background-color: #ff0000;
    border: 4px ridge #8b0000;
    color: #ffffff;
}

/* Vert Matrice / Terminal */
.carte-verte {
    background-color: #00ff00;
    border: 4px ridge #008000;
}

/* Orange Volcanique */
.carte-orange {
    background-color: #ff4500;
    border: 4px ridge #ff8c00;
}
/* --- LE STYLE DES CARTES --- */
.galerie-primaires {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.carte-primaire {
    width: 150px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    font-weight: bold;
    border: 3px solid #000;
    box-shadow: 4px 4px 0px #000; /* Ombre rétro */
    transition: transform 0.1s;
}

.carte-primaire:active {
    transform: translate(3px, 3px); /* Effet d'enfoncement au clic */
    box-shadow: 1px 1px 0px #000;
}

/* Les Couleurs Primaires Pures */
.rouge { background-color: #ff0000; color: #ffffff; }
.bleu { background-color: #0000ff; color: #ffffff; }
.jaune { background-color: #ffff00; color: #000000; }

/* --- LE STYLE DES POPUPS --- */
.fond-popup {
    display: none; /* Caché par défaut */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Fond noir semi-transparent */
    z-index: 10000; /* S'affiche par-dessus tout le reste */
    align-items: center;
    justify-content: center;
}

.fenetre-popup {
    background-color: #ffffff;
    padding: 30px;
    width: 300px;
    text-align: center;
    position: relative;
    border: 4px solid #000;
    box-shadow: 8px 8px 0px #000;
}

/* Bordures colorées pour rappeler la carte cliquée */
.bord-rouge { border-color: #ff0000; }
.bord-bleu { border-color: #0000ff; }
.bord-jaune { border-color: #ffff00; }

.bouton-fermer {
    position: absolute;
    top: 5px;
    right: 5px;
    background: #ff0000;
    color: white;
    border: 2px solid #000;
    font-weight: bold;
    cursor: pointer;
    padding: 2px 8px;
}
/* --- GESTION DES 3 HUMEURS --- */

/* 1. Par défaut, on cache les images de survol et de clic */
.zone-humeur .img-survol,
.zone-humeur .img-clic {
    display: none;
}

/* 2. Quand on SURVOLE la carte : on cache la normale, on montre le survol */
.carte-perso:hover .img-normal { display: none; }
.carte-perso:hover .img-survol { display: block; }

/* 3. Quand on CLIQUE sur la carte : on cache tout le reste, on montre le clic */
.carte-perso:active .img-normal,
.carte-perso:active .img-survol { display: none !important; }
.carte-perso:active .img-clic { display: block !important; }


/* --- STRUCTURE ET LOOK RETRO DES CARTES --- */
.galerie-personnages {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    justify-content: center;
    margin-top: 30px;
}

.carte-perso {
    display: block;
    width: 150px;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    color: #000000;
    border: 4px outset #ffffff; 
    box-shadow: 5px 5px 0px #000000; 
}

.carte-perso:active {
    border: 4px inset #ffffff;
    box-shadow: 2px 2px 0px #000000;
    transform: translate(3px, 3px);
}

.zone-humeur img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    border: 3px inset #ffffff;
    image-rendering: pixelated;
}

.carte-perso h3 {
    margin: 10px 0 0 0;
    font-size: 16px;
    font-family: 'Comic Sans MS', cursive;
}


/* --- TOUTES LES NOUVELLES COULEURS FLASHY --- */

.carte-bleue { background-color: #00ffff; border-color: #008b8b; }
.carte-rose { background-color: #ff00ff; border-color: #8b008b; }

/* Violet Électrique */
.carte-violette {
    background-color: #9400d3;
    border: 4px ridge #4b0082;
    color: #ffffff; /* Texte en blanc pour que ce soit lisible */
}

/* Jaune Moutarde Cyber */
.carte-jaune {
    background-color: #ffff00;
    border: 4px ridge #808000;
}

/* Rouge Alerte 95 */
.carte-rouge {
    background-color: #ff0000;
    border: 4px ridge #8b0000;
    color: #ffffff;
}

/* Vert Matrice / Terminal */
.carte-verte {
    background-color: #00ff00;
    border: 4px ridge #008000;
}

/* Orange Volcanique */
.carte-orange {
    background-color: #ff4500;
    border: 4px ridge #ff8c00;
}
/* --- GESTION DES 3 HUMEURS --- */

/* 1. Par défaut, on cache les images de survol et de clic */
.zone-humeur .img-survol,
.zone-humeur .img-clic {
    display: none;
}

/* 2. Quand on SURVOLE la carte : on cache la normale, on montre le survol */
.carte-perso:hover .img-normal { display: none; }
.carte-perso:hover .img-survol { display: block; }

/* 3. Quand on CLIQUE sur la carte : on cache tout le reste, on montre le clic */
.carte-perso:active .img-normal,
.carte-perso:active .img-survol { display: none !important; }
.carte-perso:active .img-clic { display: block !important; }


/* --- STRUCTURE ET LOOK RETRO DES CARTES --- */
.galerie-personnages {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    justify-content: center;
    margin-top: 30px;
}

.carte-perso {
    display: block;
    width: 150px;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    color: #000000;
    border: 4px outset #ffffff; 
    box-shadow: 5px 5px 0px #000000; 
}

.carte-perso:active {
    border: 4px inset #ffffff;
    box-shadow: 2px 2px 0px #000000;
    transform: translate(3px, 3px);
}

.zone-humeur img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    border: 3px inset #ffffff;
    image-rendering: pixelated;
}

.carte-perso h3 {
    margin: 10px 0 0 0;
    font-size: 16px;
    font-family: 'Comic Sans MS', cursive;
}


/* --- TOUTES LES NOUVELLES COULEURS FLASHY --- */

.carte-bleue { background-color: #00ffff; border-color: #008b8b; }
.carte-rose { background-color: #ff00ff; border-color: #8b008b; }

/* Violet Électrique */
.carte-violette {
    background-color: #9400d3;
    border: 4px ridge #4b0082;
    color: #ffffff; /* Texte en blanc pour que ce soit lisible */
}

/* Jaune Moutarde Cyber */
.carte-jaune {
    background-color: #ffff00;
    border: 4px ridge #808000;
}

/* Rouge Alerte 95 */
.carte-rouge {
    background-color: #ff0000;
    border: 4px ridge #8b0000;
    color: #ffffff;
}

/* Vert Matrice / Terminal */
.carte-verte {
    background-color: #00ff00;
    border: 4px ridge #008000;
}

/* Orange Volcanique */
.carte-orange {
    background-color: #ff4500;
    border: 4px ridge #ff8c00;
}