/* Style de base */
body, html {
    margin: 0;
    height: 100%;
    background-color: black;
}

/* Conteneur principal */
.carte-container {
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

/* Titre ne haut à gauche */
.titre {
    margin: 0;
    padding: 0%;
    position: absolute;
    top: 1%;
    left: 1%;
    margin: 0;
    color: white;
    font-family: 'Cinzel', serif;
    /*font-size: 2rem;*/
    text-shadow: 0 0 5px rgba(241, 236, 236, 0.345);
}

/* Paragraphe en haut à droite */
.boussole {
    margin: 0;
    padding: 0%;
    position: absolute;
    top: 1%;
    right: 1%;
    margin: 0;
    color: white;
    /*font-size: 1rem;*/
}

/* Cadre central contenant la carte du ciel */
.cadre {
    width: 100vw;
    height: auto;
    aspect-ratio: 1 / 1;
    position: relative;
    max-width: 100vw;
    max-height: 100vh;
    /*background-image: url('FinalSkyMap.PNG');*/
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}


.label {
    position: absolute;
    width: 5%;       /* Taille du "clicable" en % pour rester responsive */
    height: 5%;
    cursor: pointer;
}

.label-tooltip {
    position: absolute;
    top: -40px; /* un peu plus haut pour éviter de cacher la zone */
    left: 0;
    background-color: #001f3f; /* bleu foncé */
    color: white;
    padding: 8px 12px;
    border-radius: 8px; /* coins arrondis */
    border: 1px solid white; /* bordure blanche */
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    pointer-events: auto;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 14px;
    z-index: 10;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* ombre légère pour l'effet "boîte" */
}

.label:hover .label-tooltip {
    opacity: 1;
}

.label:hover::after {
    opacity: 1;
}

/* Position des zones */

#polaris {top: 26%; left: 49.5%; width: 1%; height: 1%;}

#grandeOurs {top: 37%; left: 48%; width: 4%; height: 2%;}

#pleiades {top: 36%; left: 60%; width: 1%; height: 1%;}

/* Le Zodiaque */

#belier {top: 30%; left: 62%; width: 1%; height: 2%}

#taureau {top: 42%; left: 61%; width: 2%; height: 3%;}

#gemeaux {top: 43%; left: 56%; width: 2%; height: 3%;}




/* La Lune et le Soleil */

.label-lune {
    position: absolute;
    top: 20%;  /* change selon l'endroit souhaité */
    left: 35%; /* idem */
    width: 2%; /* ajuste selon la taille de lune.png */
    height: auto;
    cursor: pointer;
}

.label-soleil {
    position: absolute;
    top: 30%;  /* change selon l'endroit souhaité */
    left: 65%; /* idem */
    width: 4%; /* ajuste selon la taille de lune.png */
    height: auto;
    cursor: pointer;
}


.lune-lien img, .soleil-lien img {
    width: 100%;
    height: auto;
    display: block;
    transform: rotate(-12deg);
    transition: transform 0.3s ease;
}
.lune-lien img {
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.3));
}

.soleil-lien img {
    filter: drop-shadow(0 0 12px rgba(255, 255, 0, 0.3));
}



.label-lune img, .label-soleil img {
    width: 100%;
    height: auto;
    display: block;
    transform: rotate(18deg);
}

.label-lune .tooltip, .label-soleil .tooltip, .label-venus .tooltip {
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #001f3f;
    color: white;
    padding: 6px 10px;
    border-radius: 8px;
    border: 0.5px solid white;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    pointer-events: none;
    z-index: 10;
    text-shadow: 0 0 4px rgba(255,255,255,0.2);
}

.label-lune:hover .tooltip, .label-soleil:hover .tooltip, .label-venus:hover .tooltip {
    opacity: 1;
}


/* Vénus */

.label-venus {
    position: absolute;
    top: 41%;    /* À ajuster selon l'emplacement désiré */
    left: 66%;   /* Idem */
    width: 5%;   /* Taille de la boîte cliquable */
    height: 5%;
    cursor: pointer;
}

.venus-lien {
    display: block;
    width: 100%;
    height: 100%;
}

.venus-hitbox {
    width: 100%;
    height: 100%;
    position: relative;
}

.venus-img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3%;    /* Taille de l'image à l'intérieur de la hitbox */
    height: auto;
    transform: translate(-50%, -50%) rotate(10deg); /* centrée dans la boîte */
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.4));
}