@font-face {
    font-family: "crash test";
    src: url('Crashtestdummy.woff') format('woff'),
         url('Crashtestdummy.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "creato";
    src: url('CreatoDisplay-Regular.woff') format('woff'),
         url('CreatoDisplay-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}


.alexsachandra {
    position: fixed; top: 20px; left: 20px; z-index: 100;
    color: ghostwhite;
    text-decoration: none;
    font-family: 'crash test', sans-serif; font-size: 55px;
}

.power {
    position: fixed; top: 70px; left: 20px; z-index: 100;
    text-decoration: none; color: ghostwhite;
    font-family: 'creato', sans-serif; font-size: 14px;
}

/* --- Curseur (Appliqué partout) --- */
*, html, body, input, textarea, a, button, label, span {
    cursor: url('souris.png'), auto !important;
    animation: clignotement 0.1s ease-in-out infinite;
}

body {
    background-image: url(bg.png);
    background-size: 100%;
    overflow-x: hidden;
    
}

/* --- SYSTÈME PAPILLON --- */

/* Le conteneur qui englobe toute la zone */
.papillon {
    position: relative; 
    width: 100%;
    height: 100vh; 
    pointer-events: none; /* Laisse passer les clics au travers vers le fond */
}

/* Les boîtes individuelles */
.papillon1, .papillon2, .papillon3 {
    position: absolute;
    pointer-events: auto; /* Réactive le clic/hover pour le papillon */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 500px; /* On définit une taille de boîte pour que les 20% de l'image fonctionnent */
    z-index: 10;
}

/* PLACEMENT PRÉCIS */
.papillon1 {
    bottom: 350px;    
    left: 440px;     
}

.papillon2 {
    bottom: 400px; /* Un peu plus haut que le bord pour être sûr */
    left: 20px;     
}

.papillon3 {
    bottom: 350px;
    right: 30px;     
}

/* --- TEXTES ET IMAGES --- */

.titre1, .titre2, .titre3 {
    position: absolute;      
    width: 200%;      /* Largeur augmentée pour éviter que le titre revienne à la ligne */
    text-align: center;
    font-family: 'crash test', sans-serif; /* Ta police de titre */
    color: whitesmoke;
    font-size: 20px;
    z-index: 4;       /* Au-dessus de l'image */
    pointer-events: none; /* La souris traverse le titre pour toucher le papillon */
}

.titre1{
    top: -170px;
}

.titre2{
    top: -130px;
    left: -265px;
}

.titre3{
    top: -160px;
    left: -265px;
}

.ici {
    position: relative; 
    z-index: 1001;      
    color: rgb(190, 0, 193);        
    text-decoration: underline;
    pointer-events: auto;
    cursor: url('souris.png'), pointer !important;
}



.imgpapillon1, .imgpapillon2, .imgpapillon3 {
    position: absolute;
    z-index: 3;
    transition: all 0.3s ease;
    width: 100%; 
    pointer-events: none;
}

/* --- EFFET HOVER --- */
.papillon1:hover .imgpapillon1 { content: url('ferme1.png'); }
.papillon2:hover .imgpapillon2 { content: url('ferme2.png'); }
.papillon3:hover .imgpapillon3 { content: url('ferme3.png'); }


.texte1, .texte2, .texte3 {
    font-family: 'creato', sans-serif;
    position: absolute;
    top: 100%;             /* Se place pile sous le bas de la boîte du papillon */
    left: 47%;
    transform: translateX(-50%); /* Centre la boîte horizontalement */
    
    width: 350px;          /* Largeur de ton parchemin */
    max-height: 0;         /* Caché par défaut (hauteur 0) */
    overflow: hidden;      /* Empêche le texte de dépasser quand c'est fermé */
    
    background: rgba(255, 255, 255, 0.7); /* Boîte semi-opaque blanche */
    backdrop-filter: blur(5px);           /* Petit effet de flou derrière (très joli) */
    border-radius: 10px;
    padding: 0 15px;       /* Pas de padding vertical au début */
    
    transition: all 0.6s ease-in-out; /* C'est ça qui crée l'animation fluide */
    opacity: 0;
    z-index: 1;
}


.texte1, .texte2, .texte3 {
    position: absolute;
    z-index: 2;
    text-align: center;
    font-family: 'creato', sans-serif;
    padding: 10px;
    pointer-events: auto;
}

/* --- L'ANIMATION AU SURVOL --- */

.papillon1:hover .texte1, 
.papillon2:hover .texte2,
.papillon3:hover .texte3 {
    max-height: 1000px;     /* La boîte se déroule jusqu'à 200px max */
    opacity: 1;            /* Elle devient visible */
    padding: 15px;         /* Le texte respire enfin */
    margin-top: 10px;      /* Petit espace entre le papillon et le texte */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}



.croix-poussiere {
    position: absolute;
    pointer-events: none;
    z-index: 9999;
    font-family: 'creato', sans-serif; /* Utilise ta police fine */
    font-weight: bold;
    
    /* Lueur plus fine pour ne pas noyer la forme de la croix */
    text-shadow: 0 0 3px currentColor;
    
    animation: chute-croix 1.2s ease-out forwards;
}

@keyframes chute-croix {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) scale(0);
        opacity: 0;
    }
    20% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(90deg) scale(1.2);
    }
    100% {
        /* Chute avec une grande rotation finale */
        transform: translate(calc(-50% + 10px), 120px) rotate(450deg) scale(0.5);
        opacity: 0;
    }
}

@keyframes clignotement {
    0% {
        filter: brightness(0.95); /* Sombre (50% de luminosité) */
    }
    50% {
        filter: brightness(0.97); /* Plus clair (120% de luminosité) */
    }
    100% {
        filter: brightness(0.95); /* Retour au sombre */
    }
}


@keyframes flottaison {
    0% {
        transform: translate(-50%, -50%) translateY(0px);
    }
    50% {
        transform: translate(-50%, -50%) translateY(15px); /* Descend de 15px */
    }
    100% {
        transform: translate(-50%, -50%) translateY(0px);
    }
}


/* --- Style pour le décor sous le Papillon 1 --- */

.grille2 {
    position: absolute;
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
    width: 120%;
    z-index: 0; 
    pointer-events: none; 
    opacity: 0.5;
    animation: flottaison 5s ease-in-out infinite;
}

.grille3 {
    position: absolute;
    left: 50%; 
    top: 300px;
    transform: translate(-50%, -50%); 
    width: 120%;
    z-index: 0; 
    pointer-events: none; 
    opacity: 0.5;
    animation: flottaison 5s ease-in-out infinite;
}