/* styles.css */

@font-face {
    font-family: 'GT Extended';
    src: url('../fonts/GT-Extended-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

body {
    margin: 0;
    padding: 0;
    background-color: black;
    font-family: 'GT Extended', sans-serif;
    color: white;
    overflow-y: auto; /* Permet le défilement vertical */
}

/* Styles spécifiques pour la page Hugo */
body.hugo-page {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* Ajustement de la position du texte "HUGO NATALIS" */
.name {
    font-size: 190px;  /* Taille du texte par défaut */
    font-weight: bold;
    color: white;
    margin: 20px;
    text-transform: uppercase;
    line-height: 0.9;
    text-align: right; /* Aligne le texte à droite */
    position: absolute;
    bottom: 40px; /* Ajustez cette valeur pour déplacer le texte vers le haut */
    right: 0;
    z-index: 10;
}

/* Media query pour les écrans plus petits */
@media (max-width: 840px) {
    .name {
        font-size: 22vw; /* Ajuste la taille du texte en pourcentage de la largeur de la fenêtre */
        margin: 0; /* Réduit la marge pour occuper plus d'espace */
        right: 0; /* Aligne le texte à droite */
        bottom: 40px; /* Ajustez cette valeur pour déplacer le texte vers le haut */
        text-align: right; /* Centre le texte horizontalement */
    }
}


/* Barre centrale */
.separator {
    position: absolute;
    top: 0;
    width: 2px; /* Largeur du trait */
    height: 100vh;
    background-color: white;
    transition: opacity 0.3s ease; /* Transition pour la disparition */
    opacity: 1; /* Assurer que la barre est visible par défaut */
}

.separateur-contact {
    position: absolute;
    top: 0;
    width: 2px; /* Largeur du trait */
    height: 100vh;
    background-color: white;
    transition: opacity 0.3s ease; /* Transition pour la disparition */
    opacity: 1; /* Assurer que la barre est visible par défaut */
}

.dropdown-nav {
    position: fixed; /* Change position to fixed */
    top: 20px; /* Ajustez la position du menu */
    right: 20px;
    z-index: 1000; /* Assurez-vous qu'il est au-dessus des autres éléments */
}

.dropdown-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dropdown-menu > li {
    position: relative;
    display: inline-block;
}

.dropdown-menu > li > a, #play-pause-btn {
    display: block;
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    background-color: black;
    border: 1px solid white;
    cursor: pointer;
}

.dropdown-menu > li > a:hover, #play-pause-btn:hover {
    background-color: #333;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: black;
    min-width: 160px; /* Ajustez la largeur du sous-menu */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content li {
    display: block;
}

.dropdown-content li a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content li a:hover {
    background-color: #333;
}

.dropdown:hover .dropdown-content {
    display: block;
}

/* Styles spécifiques pour le GIF et l'image */
.gif-container {
    position: fixed;
    top: 50%; /* Vertical center of the viewport */
    left: 25%; /* Horizontal offset from the left edge of the viewport */
    transform: translate(-50%, -50%); /* Center the container vertically and horizontally */
    width: 40vw; /* Width is 25% of the viewport width */
    height: auto; /* Height will adjust according to the aspect ratio of the GIF */
    background: transparent; /* Make the container transparent */
    z-index: 5; /* Ensure it is above other elements */
    pointer-events: none; /* Ensure it doesn't block interaction */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Adjust styles for screens less than 670px wide */
@media (max-width: 840px){
    .gif-container {
        top: 45%; /* Center vertically */
        left: 50%; /* Center horizontally */
        transform: translate(-50%, -50%); /* Adjust for centering */
        width: 70vw; /* Adjust width to fit smaller screens */
        height: auto; /* Maintain aspect ratio */
        opacity: 75%;
    }
}
@media (max-height: 550px) {
    .gif-container {
        top: 25%;
        left: 25%;
        width: 35vw;
        transform: translateX(-25%);
        opacity: 75%;
    }
}



.gif-container img {
    width: 100%; /* Make the image fit the container width */
    height: auto; /* Maintain the aspect ratio */
}


/* Image container */
.image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
    display: none; /* Hidden by default */
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 840px) {
    .image-container {
        position: fixed; /* Fixe le conteneur d'images pour qu'il soit visible au-dessus de tout autre contenu */
        top: 50%; /* Centré verticalement */
        left: 50%; /* Centré horizontalement */
        transform: translate(-50%, -50%); /* Centre le conteneur */
        width: 90vw; /* Largeur ajustée pour les petits écrans */
        height: auto; /* Hauteur automatique pour maintenir l'aspect ratio */
        z-index: 998; /* Assurez-vous que le conteneur d'image est derrière le GIF mais devant le contenu */
        background: transparent; /* Fond transparent */
        display: none; /* Masqué par défaut, visible au survol */
    }

    .image-container img {
        width: 100%; /* Adapte l'image à la largeur du conteneur */
        height: auto; /* Maintient l'aspect ratio */
    }
}


/* Galerie de photos */
.photo-gallery {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 20px;
}

.photo-row {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 20px;
}

.photo {
    width: 48%;  /* Chaque image prend environ la moitié de la largeur de l'écran */
    margin: 1%;
}

/* Style pour le conteneur de la lightbox */
.lightbox {
    display: none; /* Par défaut, caché */
    position: fixed;
    z-index: 1000;
    padding-top: 0; /* Retiré pour un meilleur centrage */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Assurez-vous que les éléments ne débordent pas */
    background-color: rgba(0,0,0,0.9); /* Noir avec opacité */
    text-align: center; /* Centre le contenu horizontalement */
}

/* Style pour l'image en lightbox */
.lightbox-content {
    position: absolute;
    top: 50%; /* Place le centre de l'image à 50% de la hauteur du viewport */
    left: 50%; /* Place le centre de l'image à 50% de la largeur du viewport */
    transform: translate(-50%, -50%); /* Centre l'image exactement au milieu */
    max-width: 90%;
    max-height: 90%;
    display: block;
    z-index: 10;
}

/* Styles pour les flèches de navigation */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: 8vw; /* Largeur proportionnelle au viewport */
    height: auto; /* Conserve les proportions de l'image */
    transform: translateY(-50%); /* Centre verticalement les flèches */
    transition: 0.3s ease;
    z-index: 15;
}

.prev {
    left: 2vw; /* Position fixe à gauche */
}

.next {
    right: 2vw; /* Position fixe à droite */
}

/* Assurez-vous que les images PNG sont ajustées correctement */
.prev img, .next img {
    width: 100%; /* Adapte l'image à la taille du conteneur */
    height: auto; /* Conserve les proportions de l'image */
}

/* Media Queries pour les écrans plus petits */
@media (max-width: 600px) {
    .prev, .next {
        width: 12vw; /* Ajuste la largeur pour les petits écrans */
    }
}

@media (max-width: 400px) {
    .prev, .next {
        width: 15vw; /* Ajuste la largeur pour les très petits écrans */
    }
}

/* Style pour le bouton de fermeture */
.close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #fff;
    font-size: 5vw; /* Ajuste la taille en pourcentage de la largeur du viewport */
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
    z-index: 20;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
}


/* Play/Pause Button */
#play-pause-btn {
    padding: 10px 10px;
    background-color: black;
    color: white;
    border: 1px solid white;
    font-size: 16px;
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
}

#play-pause-btn img {
    width: 25px; /* Ajustez la largeur de l'icône */
    height: 25px; /* Ajustez la hauteur de l'icône */
}

/* Crédit */
.credit {
    position: fixed;
    bottom: 20px; /* Ajustez la position en bas */
    left: 20px; /* Ajustez la position à gauche */
    color: white;
    font-size: 0.8em;
    font-weight: bold;
}

/* Loading GIF styles */
#loading {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: transparent; /* Background color for the loading screen */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    pointer-events: none;
}

#loading img {
    width: 100px; /* Adjust the size of the GIF */
}

/* Styles spécifiques pour la page Hugo */
body.hugo-page {
    display: flex;
    flex-direction: column; /* Permet à la page de s'adapter verticalement */
    justify-content: center;
    align-items: center;
    height: auto; /* Permet à la hauteur de s'ajuster automatiquement */
    overflow-y: auto; /* Permet le défilement vertical */
    position: relative;
}

/* Assurez-vous que le conteneur de contenu est également configuré pour permettre le défilement */
body.hugo-page .content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto; /* Inclut les marges et les bordures dans la largeur totale */
}

/* Pour s'assurer que les images et autres éléments ne débordent pas */
body.hugo-page .character-container {
    overflow: hidden;
}

body.hugo-page .character {
    max-height: 80vh; /* Permet à l'image de s'adapter à la hauteur de l'écran */
    margin-left: 20px;
}

body.hugo-page #smileCanvas {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

body.hugo-page .intro-text {
    text-align: left;
    width: 50%;
    font-size: 1.5em;
    font-weight: bold;
    margin-right: 20px;
}

body.hugo-page .custom-cursor {
    position: fixed;
    width: 40px; /* Ajuste la taille selon tes besoins */
    height: 40px; /* Ajuste la taille selon tes besoins */
    pointer-events: none; /* Assure que le curseur ne bloque pas les clics */
    z-index: 9999; /* Assure que le curseur est au-dessus des autres éléments */
}

/* Media query pour les écrans plus petits */
@media (max-width: 800px) {
    body.hugo-page {
        flex-direction: column; /* Stack character and text vertically */
        height: auto; /* Allow height to adjust to content */
        padding: 20px;
    }

    body.hugo-page .content {
        flex-direction: column;
        align-items: center;
    }

    body.hugo-page .character {
        margin: 0 0 20px 0; /* Margin below the character image */
        width: 100%;
        max-height: auto;
    }

    body.hugo-page .intro-text {
        width: 100%;
        text-align: center;
        margin: 0;
    }

    body.hugo-page #smileCanvas,
    body.hugo-page .custom-cursor {
        display: none; /* Hide custom cursor and smile canvas on small screens */
    }

    body.hugo-page .character-container {
        display: flex;
        justify-content: center;
    }

    body.hugo-page .character-container img {
        content: url('/img/hugo.png'); /* Use the fixed image for small screens */
        width: 80%; /* Adjust the width as needed */
        height: auto;
    }
}

body.contact-page {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body.contact-page .contact-container {
    display: flex;
    width: 100vw;
    height: 100vh;
    overflow: hidden; /* Assurez que les éléments ne débordent pas */
}

body.contact-page .contact-logo {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

body.contact-page .contact-logo img {
    width: 50vw; /* Assurez que l'image prend toute la largeur du conteneur */
    height: 50vw; /* Assurez que l'image prend toute la hauteur du conteneur */
    object-fit: cover; /* Ajustez l'image pour couvrir entièrement le conteneur */
}