@charset "UTF-8";
@font-face {
    font-family: 'Avara-Black';
    src: url("fonts/Avara-Black.ttf");
    src: url("fonts/Avara-Black.woff");
    src: url("fonts/Avara-Black.woff2");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Avara-Bold';
    src: url("fonts/Avara-Black.ttf");
    src: url("fonts/Avara-Black.woff");
    src: url("fonts/Avara-Black.woff2");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Avara-BoldItalic';
    src: url("fonts/Avara-Black.ttf");
    src: url("fonts/Avara-Black.woff");
    src: url("fonts/Avara-Black.woff2");
    font-weight: normal;
    font-style: normal;
}


body, html {
	margin: 0;
	padding: 0;
	background-color: #080808;
	color: #e0e0e0; /*couleur des textes*/
font-family: « Quicksand », sans-serif; /*police utilisée par défaut*/
-webkit-font-smoothing: antialiased; /*applique un lissage aux contours des caractères pour les rendre plus doux et plus lisibles*/
display: flex; /*pour créer des dispositions flexibles et dynamiques d’une page web*/
flex-direction: column; /*définit la direction de l’axe principal*/

}

.sticky-header{
	width: 100%;
    height: 30px;
    position: sticky;
    top: 0;
    background-color: #003CD7;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    z-index: 100;
    overflow: hidden;
}

span{
    font-family: 'Avara-Bold';
}

/* Animation du texte */
.scrolling-text {
     display: inline-block; /*éléments en ligne */
     width: 100%;
     animation: scroll-text 18s linear infinite; /* Animation en boucle */
     white-space: nowrap; /*Pas de retour à la ligne automatique (texte sur une seule ligne)*/
}

/* Définition de l’animation */
@keyframes scroll-text { 0% {
transform: translateX(0); /* Position initiale */
    } 100% {
transform: translateX(-50%); /* Défile vers la gauche */
    }
}

.container{
	display: flex; /* reste flexible */
flex: 1;
overflow-y: auto; /*contenu rogné dans sa boîte dans la hauteur avec barre de défilement*/
}

.left-section{
	width: 30%;
	height: 100vh;
padding: 0px 30px;
box-sizing: border-box; 
overflow-y: auto;
	
	scroll-timeline-name: --left-scroll;
 scroll-timeline-axis: block;
	
}

.left-section section {
margin-top: 30rem;
}

.left-section::-webkit-scrollbar{
	display: none;
}


.right-section {
width: 70%;
height: calc(100vh – 30px);
overflow: hidden; 
display: flex;
align-items: center; 
justify-content: center;
}

/*carrousel de droite*/

.carousel {
width: 70%;
height: 100vh;
overflow: hidden; /* Assure que le carrousel ne dépasse pas */
position: fixed;
}
.carousel .slides {
display: flex;
align-content: flex-end;
width: 300%; /* 3 slides, donc 300% de la largeur */
height: 100vh;
animation: slideAnimation 14s infinite;
}
@keyframes slideAnimation {
0% { transform: translateX(0); }
33.33% { transform: translateX(-33.33%); }
66.66% { transform: translateX(-66.66%); }
100% { transform: translateX(0); }
}
.carousel .slide {
width: 33.33%; /* Chaque slide prend 1/3 de la largeur totale */
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.carousel .slide img {
max-width: 100%; /* Limite la largeur de l’image à celle du slide */
max-height: 90%;
object-fit: contain; /* Conserve les proportions de l’image */
}



.focus-text {
font-family: 'Avara-BoldItalic';
font-size: 3rem;
line-height: 1.1;
color: #FFFFFF;
margin: 0;
letter-spacing: 0.04em;
}
.description {
font-size: 1.1rem;
margin-top: 1.5rem;
margin-left: 1.3rem;
margin-right: 0.5rem;
line-height: 1.6rem; 
font-weight: 200; 
}


.projet {
    view-timeline-name: --projet; 
    view-timeline-axis: block; 
}

.focus-text{
	animation-name: reveal-title; 
    animation-duration: 2s;
    animation-timeline: ––projet; 
    animation-range: entry 0% cover 50%; 
    animation-fill-mode: both; 
}

@keyframes reveal-title{
from{
filter: blur(30px);
opacity: 0;
transform: translateY(60px) scale(0.6);
color: #444;
  }
to{
filter: blur(0);
opacity: 1;
transform: translateY(0) scale(1);
color: #FFFFFF;
  }
}


.audio-controls {
margin-top: 50px;
padding: 15px;
width: 100%;
}
.audio-button {
display: block;
width: 40%;
padding: 10px;
margin-bottom: 30px;
background-color: #080808;
border: 1px solid #e0e0e0;
color: #003CD7;
font-family: 'Avara-Black';
font-size: 1.3rem;
cursor: pointer; /*transforme le curseur en une main avec un doigt pointé*/
transition: background-color 0.3s; /*changement progressif sur une durée donnée*/
}
.audio-button:hover {
background-color: #e0e0e0;
}
/* Style des curseurs */
.slider-container {
margin-bottom: 0.8rem;
}
.slider-container label {
display: block;
font-family: 'Avara-Bold';
}
input[type= "range"] { 
accent-color: #003CD7; /*pour changer la couleur des curseurs*/
}

.button-container {
display: flex;
gap: 20px;
margin: 20px 0;
}
.btn-wrapper {
position: relative; /*voir schéma plus bas pour comprendre la différence entre position relative ou absolute*/
}

.btn{
width: 35px;
height: 35px;
background-color: #003CD7;
border: 1px solid #e0e0e0;
border-radius: 50%; /* Rend le bouton parfaitement rond */
cursor: crosshair;
display: flex;
align-items: center;
justify-content: center;
color: #e0e0e0;
font-family: 'Avara-Black';
font-size: 1.2rem;
transition: transform 0.2s, background-color 0.2s;
padding: 0; /* Supprime le padding par défaut */
}
/* Effet hover sur les boutons*/
.btn:hover{
transform: scale(1.1); /* Petit zoom au hover */
background-color: #e0e0e0;
color: #003CD7;
border-color: #003CD7;
}
/* Images masquées par défaut */
.hover-image{
display: none;
position: absolute;/* permet de placer l’image n’importe où */
z-index: 9999; /* au-dessus de tous les éléments */
width: 200px; /* taille par défaut */
height: auto;
top: 80px;
left: 30px;
box-shadow: 0 10px 30px #080808;
transition: opacity 0.5s ease;
pointer-events: none; /* pour que la souris ne bloque pas le hover */
}
/* Affichage de l’image au hover du bouton correspondant */
.btn-wrapper:hover .hover-image{
display: block;
}


.anim-scroll {
display: flex;
justify-content: center;
margin-top: 6rem;
}

.closing-section {
height: 25vh;
display: inline-flex;
align-items: flex-end;
margin-bottom: 4vh;
}
.closer {
font-size: 0.9rem;
font-weight: 200;
color: #FFFFFF;
}