/* style.css */
body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    transition: none;
}

.navbar {
    position: fixed;
    left: 0;
    top: 0;
    height: 17vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 70px;
    z-index: 1000; /* S'assure que la navbar est au-dessus de tout */
    background-color: transparent;
    transition: background 0.3s ease-in-out;
}

/* Texte WORK IN PROGRESS tournant */
.wip-rotating {
    position: absolute;
    bottom: 30px;       /* Tu peux changer la position */
    right: 50%;
    transform: translateX(50%);
    
    font-size: 18px;
    font-family: 'Source Code Pro', monospace;
    font-weight: 300;
    color: #444;
    opacity: 0.7;

    border: 1px dashed #c0c0c0;
    padding: 8px 14px;
    border-radius: 6px;
    
    animation: rotatingWIP 6s linear infinite;
}

@keyframes rotatingWIP {
    0%   { transform: translateX(50%) rotate(0deg); }
    100% { transform: translateX(50%) rotate(360deg); }
}

.navbar a {
    display: inline-block;
    margin: 5px 0;
    text-decoration: none;
    color: rgb(0, 0, 0);
    font-size: 15px;
    cursor: pointer;
    transition: color 0.3s ease;
    font-weight: 200;
}

.navbar a:hover {
    color: #747474;
}

.navbar a span {
    display: inline-block;
    transition: transform 0.3s ease;
}

.navbar a:hover span {
    animation: wave 0.6s forwards ease-in-out;
}

@keyframes wave {
    0% {
        transform: translateY(0);
    }
    20% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}

#canvas-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 3;
}

#container {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    z-index: 2;
}

@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

.overlay-image {
animation: rotate 10s linear infinite;
}

.right-text {
position: absolute;
right: 75px;
top: 30px;
text-align: right;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end; /* Alignement à droite */
z-index: 5;
}

.right-text h1 {
font-size: 40px;
color: #000;
margin: 0;
font-family: 'Source Code Pro', monospace;
font-weight: 300; /* Applique le poids Extra Light */
}

.right-text p {
display: flex;
flex-direction: column; /* Aligner les éléments en colonne */
font-size: 12px;
margin: 0px 0 0 0; /* Ajuste la marge */
color: #555;
align-items: flex-end; /* Aligne les textes à droite */
}

.right-text p span {
display: block; /* Affiche chaque élément en bloc */
margin: 5px 0; /* Espacement entre les éléments */
transition: transform 0.3s ease;
}

.right-text p span:hover {
transform: translateY(-5px);
}


/* Section Vidéos */
#video-section {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: white; /* Fond blanc */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.5s ease, transform 0.5s ease;
    z-index: 100;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto; /* Permet le défilement si nécessaire */
}

#video-section.show {
    opacity: 1;
    transform: translateY(0);
}

.video-container {
    width: 80vw; /* Ajuste la largeur des vidéos */
    max-width: 800px; /* Limite la largeur maximale */
    margin-bottom: 20px; /* Espacement entre les vidéos */
    background: #ffffff; /* Fond léger pour chaque vidéo */
    padding: 0px;
    border-radius: 0px;
    box-shadow: 0 0px 0px rgba(0,0,0,0.2); /* Ombre portée */
    text-align: center;
    cursor: pointer; /* Changer le curseur pour indiquer que c'est cliquable */
}
.video-container video.paused {
display: none;
}

.video-title {
    font-size: 15px;
    margin-bottom: 10px;
    color: #616161;
}

video {
    width: 100%;
    height: auto;
    display: block;
}

/* Style pour le logo Instagram */
.instagram-logo {
    padding-left: 0px;
    padding-right: 0px;
    margin-left: 0%;
    width: 22px;
    height: 22px;
    cursor: pointer;
    transition: transform 0.3s ease;
    display: flex;
    justify-content: left;
    align-items: left;
    opacity:40%;
    left: 0%;
    right: 0%;            
}

.instagram-logo img {
    width: 100%;
    height: auto;
}

.instagram-logo:hover {
    transform: translateY(-5px);
}