@charset "UTF-8";
/* 
  --bg: #080808;
  --text-gris-fonce: #444;
  --text-clair: #e0e0e0;
  --rose: #f591f1;
*/

/*--------- intégration des fonts hors Google fonts ------------*/
@font-face {
    font-family: 'Ballet';
    src: url("fonts/Ballet-Regular-VariableFont_opsz.ttf");
	src: url("fonts/Ballet-Regular-VariableFont_opsz.woff");
	src: url("fonts/Ballet-Regular-VariableFont_opsz.woff2");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Cross_Stitch_Cursive';
	src: url("fonts/Cross Stitch Cursive W95 Rg.ttf");
	src: url("fonts/Cross Stitch Cursive W95 Rg.woff");
	src: url("fonts/Cross Stitch Cursive W95 Rg.woff2");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Aeonik_Regular';
	src: url("fonts/Aeonik-Regular.ttf");
	src: url("fonts/Aeonik-Regular.woff");
	src: url("fonts/Aeonik-Regular.woff2");
    font-weight: normal;
    font-style: normal;
}


/*--------- paramétrages généraux ------------*/
body, html {
	margin: 0;
	padding: 0;
	background-color: #080808;
	color: #e0e0e0;
	font-family: "Aeonik_regular", sans-serif;
	-webkit-font-smoothing: antialiased;
	display: flex;
	flex-direction: column;
}
h1, html {
	font-family: "Aeonik_regular", sans-serif;
	color: #faf700 ; 
	
	
}

.container{
    display: flex; /* Reste flexible */
    width: 100%; /* Largeur fixe à 100% de l'écran */
    height: calc(100vh - 30px); /* Hauteur fixe (écran - header) */
    overflow: hidden; /* Empêche le défilement du conteneur */
}



/*--------- header collé en haut de l'écran ------------*/
.sticky-header {
	width: 100%;
	height: 30px;
	position: sticky;
    top: 0;
    background-color: #faf700;
    color: #080808;
    display: flex;
    align-items: center;
    z-index: 100;
	overflow: hidden;
}

.sticky-header p {
	font-family: 'Cross_Stitch_Cursive';
	font-size: 1.8rem;
	letter-spacing: 0.04em;
	color: #000000;
}

span{
	font-family: 'Cross_Stitch_Cursive';
	font-size: 1.8rem;
	letter-spacing: 0.04em;
	color: #FFFFFF;
}

/* Animation du texte */
.scrolling-text {
    display: inline-block;
	width: 100%;
    animation: scroll-text 18s linear infinite; /* Animation en boucle */
    white-space: nowrap;
}
/* Définition de l'animation */
@keyframes scroll-text {
    0% {
        transform: translateX(0); /* Position initiale */
    }
    100% {
        transform: translateX(-50%); /* Défile vers la gauche */
    }
}


/*--------- structure de l'écran ------------*/
.container {
	display: flex;
	flex: 1;
	overflow-y: auto;
}

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

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


/* Pour masquer la scrollbar du Chrome */
.left-section::-webkit-scrollbar {
  display: none; /* Chrome */
}
/* Pour masquer la scrollbar du Firefox */
.left-section {
  scrollbar-width: none; /* Firefox */
}



.right-section {
	width: 70%;
	height: calc(100vh - 30px);
	overflow: hidden; /* Bloque le défilement */
	display: flex;
	align-items: center;
	justify-content: center;
}

/*--------- boite du gif "scroll" ------------*/
.anim-scroll {
	display: flex;
	justify-content: center;
	margin-top: 6rem;
}


/*--------- carrousel animé ------------*/
.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 */
}


/*--------- styles textes ------------*/
.focus-text{
	font-family: 'Ballet';
	font-size: 3rem;
 	line-height: 1.1;
	color: #080808;
	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;
}

/*--------- animer le h2 avec le scroll ------------*/
.project {
	view-timeline-name: --project;
  	view-timeline-axis: block;
}

.focus-text {
  	animation-name: reveal-title;
  	animation-duration: 1s;
  	animation-timeline: --project;
  
  /* Déclenchement */
 	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: #080808;
  }
  to {
    filter: blur(0);
	opacity: 1;
    transform: translateY(0) scale(1);
	color: #faf700;
  }
}


/*--------- pour placer son nom et prénom ------------*/
.closing-section{
	font-family: 'Aeonik_Regular';
	height: 25vh;
	display: inline-flex;
  	align-items: flex-end;
  	margin-bottom: 4vh;
	
}

.closer{
	font-size: 0.9rem;
  	font-weight: 200;
  	color: #faf700;
}


/*--------- boutons pour le son ------------*/
.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 #faf700;
	color: #faf700;
	font-family: 'Cross_Stitch_Cursive';
    font-size: 1.3rem;
	cursor: pointer;
	transition: background-color 0.3s;
}

.audio-button:hover {
    background-color: #faf700;
	color: #000000;
}

/* Style des curseurs */
.slider-container {
    margin-bottom: 0.8rem;
}

.slider-container label {
	display: block;
	font-family: 'CRoss_Stitch_Cursive';
	font-size: 1.5rem
}

input[type="range"] {
  	accent-color: #faf700;
}


/*---- ajouter des boutons pour voir les images selon le texte ----*/
.button-container {
  	display: flex;
  	gap: 20px;
  	margin: 20px 0;
}

.btn-wrapper {
	position: relative;
}

/* Boutons */
.btn {
	width: 35px;
	height: 35px;
	background-color: #faf700;
	border: 1px solid #000000;
	border-radius: 50%; /* Rend le bouton parfaitement rond */
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #000000;
	font-family: 'Aeonik_regular';
	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: #000000;
	color: #faf700;
	border-color: #faf700;
}

/* 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;
}