/* --- CSS GLOBAL --- */
.planet4Container {
    position: relative;
}

#btnCroix {
    padding: 1em;
    width: 125px;
    transition: all 0.15s ease-in-out;
    cursor: pointer;
    position: fixed;
    top: 0%;
    right: 0%;
    display: none;
    z-index: 1000;
}

#btnCroix:hover {
    transform: scale(1.1);
}

/* CORRECTION Z-INDEX : On s'assure que les consignes passent DEVANT le jeu */
#consignes {
    z-index: 2000; /* Très haut pour passer devant l'inventaire et la planète */
    position: fixed; /* Assure que le z-index s'applique bien */
}

/* CORRECTION Z-INDEX : On s'assure que les détails passent DEVANT tout */
#details {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    justify-content: center;
    align-items: center;
    z-index: 3000; /* Le plus haut (sauf curseur) */
}

/* Inventaire centré verticalement */
.ongletWrapperPlante {
    width: 350px;
    position: fixed;
    top: 50%;
    left: 15%;
    transform: translate(-50%, -50%);
    z-index: 200; /* Reste derrière les consignes/détails */
}

.objetsContainer {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 311px;
    top: 23%;
    left: 5.7%;
}

.object {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.disabled {
    filter: grayscale(1);
    opacity: 0.3;
    cursor: not-allowed;
}

/* --- LE WRAPPER PRINCIPAL --- */
#planetWrapper {
    position: fixed;
    top: 80%; 
    left: 50%;
    transform: translate(-50%, -50%);
    width: 45%; 
    z-index: 50; /* Reste derrière les consignes/détails */
}

/* 1. PLANÈTE (Niveau 0) */
#planet4zoom {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 0;
}

/* 2. GRAINE (Niveau 1) */
#plantseed {
    position: absolute;
    top: 10%; 
    left: 50%;
    transform: translateX(-50%);
    width: 12%; 
    display: none;
    z-index: 1; 
}

/* 3. CACHE (Niveau 2) */
#cacheplanete4zoom {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; 
    height: auto;
    z-index: 3; 
    pointer-events: none; 
}

/* 4. PLANTE (Niveau 3) */
.plante {
    display: none;
    position: absolute;
    bottom: 80%; 
    left: 50%;
    transform: translateX(-50%);
    width: 25%; 
    z-index: 2; 
    
    /* IMPORTANT : Par défaut, on ne peut pas cliquer dessus (pour cliquer sur la terre en dessous) */
    pointer-events: none; 
    
    transform-origin: bottom center; 
}

/* 5. ZONE CLIQUABLE (Invisible) */
.growplante {
    position: absolute;
    top: 0%; 
    left: 50%;
    transform: translateX(-50%);
    width: 40%; 
    height: 30%; 
    background-color: transparent; 
    cursor: pointer; 
    z-index: 100; 
}

/* --- CURSEUR & ANIMATIONS --- */
body.holding-item, 
body.holding-item * {
    cursor: none !important;
}

@keyframes pourWater {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    50% { transform: translate(-50%, -50%) rotate(-45deg); }
    100% { transform: translate(-50%, -50%) rotate(0deg); }
}
.watering-anim {
    animation: pourWater 0.5s ease;
}

/* Correction spécifique pour la plante 3 */
img[src*="plante3.png"] {
    transform: translateX(-55%) !important; 
}

/* --- STYLE DE LA PLANÈTE DE BASE (Miniature) --- */

/* Le conteneur global centré */
.planet4Container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%; /* Taille de la planète de base (ajuste ici pour grossir/réduire tout le monde) */
    z-index: 1;
}

/* Le wrapper qui garde tout aligné */
#planetBaseWrapper {
    position: relative; /* Important pour positionner les enfants en absolute */
    width: 100%;
    height: auto;
}

/* Image de la planète */
.planetBaseImg {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 0;
    cursor: pointer; /* Pour montrer qu'on peut cliquer pour lancer le jeu */
}

/* Cache (croissant vert) */
#baseCache {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100; /* Devant la graine */
    pointer-events: none;
}

/* Graine (Miniature) */
#baseSeed {
    position: absolute;
    /* Mêmes réglages que le jeu pour l'effet enterré */
    top: 10%; 
    left: 50%;
    transform: translateX(-50%);
    width: 12%; 
    z-index: 2; /* Derrière le cache */
    pointer-events: none;
}

/* Plante (Miniature) */
#basePlant {
    position: absolute;
    /* Mêmes réglages que le jeu */
    bottom: 80%; 
    left: 50%;
    transform: translateX(-50%);
    width: 25%;
    z-index: 6; /* Devant le cache */
    pointer-events: none;
    transform-origin: bottom center;
}

/* Correction spécifique pour la plante 3 sur la base (comme dans le jeu) */
#basePlant[src*="plante3.png"] {
    transform: translateX(-55%);
}

.fleurs {
    z-index: 10;
    position: absolute;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.fleurs:hover {
    transform: scale(1.2);
    cursor: pointer;
}

#imagedetailsfleur {
    max-width: 60%;
    max-height: 110%;
    height: auto;
    display: inline-block;
    width: auto;
    object-fit: contain;
}