/* ====================
   Styles généraux
==================== */
body {
  font-family: 'Raleway', sans-serif;
  font-weight: 100;
  margin: 0;
  padding: 0;
  background-image: url(images/background.png);
  background-size: 100% 100%;
  color: #333;
}

a {
  text-decoration: none !important;
  color: inherit;
}

/* Supprime les marges et le padding de tous les éléments <ul> */
ul {
  margin: 0; /* Supprime la marge extérieure */
  padding: 0; /* Supprime le padding interne */
}

 section {
  scroll-margin-top: 120px; /* Ajustez la marge en fonction de l'espace souhaité */
}

	h2 {
    font-size: clamp(0.8rem, 5vw, 1.5rem);
    line-height: 1.2; /* Facultatif, pour ajuster l'espacement vertical */
    margin: 0; /* Facultatif, pour éviter des marges non désirées */
}

/* ====================
   Barre de navigation
==================== */

/* Styles pour le header */
.fixed-header {
  position: fixed; /* Reste en place même lors du défilement */
  top: 0; /* Fixe la barre au sommet */
  left: 0; /* Aligne sur le bord gauche */
  width: 100%; /* Occupe toute la largeur */
  display: flex; /* Utilise Flexbox pour aligner horizontalement */
  justify-content: center; /* Espace entre le logo et le menu */
  align-items: center; /* Aligne verticalement */
  padding: 0rem 0rem; /* Espacement interne */
  background: rgba(255, 255, 255, 1); /* Couleur blanche avec 90% de transparence */
  z-index: 1000; /* Assure que la barre reste au-dessus des autres éléments */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Ajoute une ombre pour effet visuel */
}

/* Logo à gauche */
.logo {
  position: static; /* Position par défaut */
  padding-left: 0px; /* Ajoute un espace à gauche pour éloigner le contenu du bord */
  margin: 0; /* Ajustez les marges si nécessaire */
  flex-shrink: 0; /* Empêche le logo de rétrécir */
  animation: slideIn 1s ease-out;
}

.logo-img {
  height: 50px; /* Ajustez la taille du logo à votre convenance */
  width: auto;
}

/* Animation pour faire arriver le logo depuis la gauche */
@keyframes slideIn {
  0% {
    transform: translateX(-1000%) translateY(0px); /* Commence hors de la vue à gauche */
  }
  100% {
    transform: translateX(0) translateY(0px); /* Position finale */
  }
}

/* Barre de navigation - Menu */
.nav-bar {
  display: flex; /* Aligne les éléments en ligne */
  align-items: center; /* Aligne verticalement */
  justify-content: space-between; /* Sépare le logo et le menu avec de l'espace */
  list-style: none; /* Supprime les puces */
  padding-right: 0px; /* Ajoute un espace à droite pour éloigner le contenu du bord */
  margin-top: 0px; /* Supprime les marges externes du conteneur */
  margin-bottom: 0px; /* Supprime les marges externes du conteneur */
}

.nav-bar li {
  margin: 0 20px;
}

.nav-bar a {
  text-decoration: none; /* Supprime le soulignement */
  color: #8C9896;
  font-weight: 600;
  font-family: 'Raleway', sans-serif;
  transition: color 0.3s ease;
}

.nav-bar a:hover {
  color: #333;
}


/* Styles spécifiques pour les grands écrans */
@media screen and (min-width: 769px) {
    .nav-bar {
        display: flex; /* Affiche la barre de navigation pour les grands écrans */
        align-items: center; /* Aligne verticalement */
		flex-direction: row; /* Horizontal pour les grands écrans */
		justify-content: space-between; /* Sépare le logo et le menu avec de l'espace */
        position: relative;
		top: 0; /* Fixe en haut */
		padding: 0px 20px; /* Ajoute un espacement interne pour le confort */
        background: rgba(255, 255, 255, 1);
        width: auto; /* Taille normale */
        padding-right: 0px; /* Ajoute un espace à droite pour éloigner le contenu du bord */
		margin-top: 0px; /* Supprime les marges externes du conteneur */
		margin-bottom: 0px; /* Supprime les marges externes du conteneur */
		list-style: none; /* Supprime les puces */
    }

    .menu-toggle {
        display: none; /* Masque le bouton burger sur les grands écrans */
    }
} 

/* Affichage spécifique pour les petits écrans */
@media screen and (max-width: 768px) {

    /* Menu mobile - caché par défaut */
	.nav-bar {
		display: none; /* Caché par défaut pour les petits écrans */
		flex-direction: column;
		position: absolute;
		top: 120px;
		left: 20%;
		transform: translate(-50%, -50%); /* Centre le conteneur */
		background: white;
		width: 30%; /* Largeur du menu (modifiable selon vos besoins) */
		max-width: 150px;
		padding: 10px;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		border-radius: 10px;
		z-index: 999;
		text-align: center;
		gap: clamp(10px, 2vw, 15px); /* Ajoute un espace adaptatif entre les éléments */
		margin-left: 1rem;
		font-size: clamp(0.8rem, 2vw, 1.5rem);
		transition: background-color 0.3s ease, color 0.3s ease; /* Transition douce */
	}

	.nav-bar a {
		padding: 10px;
		text-align: center;
		color: #8C9896; /* Couleur initiale */
		transition: color 0.3s ease;
	}
	
	.nav-bar a:hover {
    color: #333; /* Couleur au survol */
  }


	/* Bouton pour le menu burger */
	.menu-toggle {
		display: none;
		position: fixed; /* Position fixe pour rester visible lors du défilement */
		top: 20px; /* Ajustez la distance depuis le haut */
		left: 20px; /* Distance depuis la gauche */
		background: none;
		border: none;
		font-size: 1.5rem;
		cursor: pointer;
		color: #333;
		z-index: 1000; /* Toujours au-dessus des autres éléments */
	}

	.menu-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .menu-toggle {
        display: block;
    }

    .nav-bar.active {
        display: flex; /* Affiche le menu lorsqu'il est actif */
    }
}

/* Hero Section */
@media screen and (min-width: 769px) {
	.hero {
		text-align: center;
		padding: 20px 20px;
		padding-top: 80px;
		background: url('images/background.png') no-repeat center;
		background-size: cover;
	}

	.hero-title, {
		width: 80%;
		max-width: 620px; /* Largeur maximale */
		height: auto;
	}

	.hero-image {
		width: 100%;
		max-width: 847px; /* Largeur maximale */
		height: auto;
		aspect-ratio: 847 / 464; /* Assure que l'image conserve ces proportions */
		border: 5px solid #8C9896; /* Bordure grise */
		border-radius: 5px; /* Coins arrondis */
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Ombre pour plus de profondeur */
		margin-top: 0rem; /* Espace au-dessus */
		margin-bottom: 2rem auto; /* Espace au-dessous */
		object-fit: cover; /* Recadre l'image si besoin, tout en la remplissant */
	}
	
	.hero-heading {
		font-size: 2rem;
		color: #333;
	}
}

@media screen and (max-width: 768px) {
	.hero {
		text-align: center;
		padding: 10px 10px;
		padding-top: 5px;
		background: url('images/background.png') no-repeat center;
		background-size: cover;
	}

	.hero-title {
		max-width: 70%;
		height: auto;
	}

	.hero-image {
		max-width: 80%;
		height: auto;
		aspect-ratio: 847 / 464; /* Assure que l'image conserve ces proportions */
		border: 2px solid #8C9896; /* Bordure grise */
		border-radius: 5px; /* Coins arrondis */
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Ombre pour plus de profondeur */
		margin-top: 0rem; /* Espace au-dessus */
		margin-bottom: 0 auto ; /* Espace au-dessous */
		object-fit: cover; /* Recadre l'image si besoin, tout en la remplissant */
	}
	

	
	.hero-heading {
    font-size: clamp(1rem, 5vw, 2rem);
	color: #555;
	}

}	

/* ====================
 Section À propos
 ==================== */

/* Conteneur général de la section À propos */
.about {
    display: flex; /* Dispose le texte et l'image côte à côte */
    flex-wrap: wrap; /* Permet de s'adapter sur petits écrans */
    justify-content: center; /* Ajoute de l'espace entre les deux colonnes */
    align-items: flex-start; /* Aligne les éléments en haut du conteneur */
    gap: 1rem; /* Espace entre les colonnes */
    padding: 1rem; /* Ajoute de l'espace autour de la section */
	text-align: center
	margin-top:1rem;
}

/* Texte dans la section */
.about .text {
    flex: 1; /* Prend toute la largeur disponible */
    min-width: 200px; /* Assure une largeur minimale */
	max-width: 422px;
	font-size: clamp(0.5rem, 2.5vw, 1.5rem);
	align-items: center
	margin-top: 0; /* Supprime l'espace par défaut au-dessus du texte */
}

/* Conteneur de l'image */
.about .image {
    flex: 1; /* Prend toute la largeur disponible */
	max-width: 422px;
    text-align: center; /* Centre le contenu dans le conteneur */
	align-items: center;
}

/* Image de l'album */
.album-cover {
    max-width: 422px; /* Largeur maximale */
    width: 100%; /* Prend 100% du conteneur parent */
    height: auto; /* Ajuste la hauteur proportionnellement */
    border: 2px solid #8C9896; /* Bordure grise */
    border-radius: 2px; /* Coins arrondis */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Ombre pour plus de profondeur */
    margin-bottom: 2rem; /* Espace en dessous */
	object-fit: contain; /* Contient l’image dans la zone définie sans déformer */
}

.about .btn {
  display: inline-block;
  margin-top: 0rem;
  width: clamp(50px, 20vw, 164.5px);  /* Largeur min: 100px, relative: 20% de la largeur de l'écran, max: 300px */
  height: clamp(15px, 5vw, 50px);   /* Hauteur min: 40px, relative: 5% de la largeur de l'écran, max: 80px */
  padding: clamp(5px, 2vw, 10px);   /* Padding adaptable */
  font-size: clamp(10px, 2vw, 18px); /* Taille de police */
  border-radius: clamp(5px, 1vw, 20px); /* Coins arrondis */
  background: #849898;
  color: #fff; /* Couleur du texte */
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.about .btn:hover {
  background: #083030;
}



/* ====================
Section Audios
==================== */

.audio-title {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
} 

.audio-section {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
  padding: 1rem;
}

.audio-wrapper {
  display: flex;
  justify-content: center;
  flex-direction: column; /* Par défaut, empile les éléments verticalement */
  align-items: center;
  padding: 1rem;
  background: #60A89E;
  gap: 1rem;
  max-width: 90%; /* Pour éviter que le wrapper ne dépasse l'écran */
  border: 2px solid #8C9896;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  margin: 0;
}

.audio-image {
  max-width: 285px; /* Limite la taille de l'image */
  width: 100%;
  height: auto; /* Garde les proportions de l'image */
  padding: 0rem;
  border: 2px solid #8C9896;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);	
}

/* Widget Audio */
.audio-widget {
  max-width: 270px;
  margin: 0 auto;
  padding: clamp(0.2rem, 3vw, 0.5rem);
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  border: 2px solid #8C9896;
}

.audio-player-container {
  margin-bottom: 20px;
}

.audio-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px; /* Espacement entre les éléments */
  margin-top: 10px;
  flex-wrap: wrap; /* Permet de passer les éléments à la ligne si nécessaire */
}

.audio-controls button {
  background: #60a89e;
  color: #fff;
  border: none;
  padding: 1px 2px;
  border-radius: 5px;
  cursor: pointer;
  font-size: clamp(0.5rem, 3vw, 1rem);
}

.audio-controls button:hover {
  background: #4f877e;
}

.audio-controls #seekBar {
  flex-grow: 1; /* La barre de progression occupe tout l'espace disponible */
  margin: 0 10px;
  height: 8px; /* Hauteur de la barre */
  border-radius: 5px;
  background: #ddd;
  -webkit-appearance: none; /* Supprime le style par défaut */
}

.audio-controls #seekBar::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  background: #60a89e;
  border-radius: 50%;
  cursor: pointer;
}

.audio-controls #seekBar::-moz-range-thumb {
  width: 15px;
  height: 15px;
  background: #60a89e;
  border-radius: 50%;
  cursor: pointer;
}
	
.audio-playlist {
  list-style: none;
  padding: 0;
  margin-top: 1rem;
  width: 100%;
}

.audio-playlist li {
  padding: 0.5rem;
  cursor: pointer;
  border-bottom: 1px solid #ddd;
  transition: background-color 0.3s;
}

.audio-playlist li:hover {
  background-color: #f0f0f0;
}

.audio-playlist li.active {
  background-color: #d8bce6; /* Couleur de la chanson en cours */
  color: white;
}

/* Ajustements pour les grands écrans */
@media (min-width: 769px) {
    .audio-wrapper {
        flex-direction: row; /* Positionne les éléments côte à côte */
        align-items: flex-start; /* Aligne le haut des éléments */
		max-width: 686px;
    }

    .audio-image,
    .audio-widget {
        width: 48%; /* L'image et le widget occupent chacun 48% du wrapper */
    }
}


/* ====================
Section Vidéos
==================== */
.video-title {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 1rem;
} 

.video-section {
    margin-bottom: 4rem; /* Ajoute un espace sous la section vidéo */
}

.video-widget {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    max-width: 620px;
	border-radius: 10px; /* Arrondit légèrement les coins */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Ajoute une ombre à l'image */
    margin: 0 auto;
}

.video-wrapper {
  display: flex; /* Affiche les éléments en ligne */
  flex-direction: column;
  padding: 1rem; /* Ajoute un espace interne pour éviter que les éléments touchent la bordure */
  border: 2px solid #8C9896; /* Bordure grise de 2 pixels */
  border-radius: 10px; /* Coins arrondis pour un design plus agréable */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Ombre légère pour donner de la profondeur */
  max-width: 620px; /* Largeur maximale de l'ensemble */
  background-color: #60A89E; /* Arrière-plan clair pour contraster avec la bordure */
}

.video-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap; /* Les contrôles passent à la ligne si nécessaire */
    width: 100%;
    margin-top: 10px;
    gap: clamp(5px, 2vw, 15px); /* Espace adaptatif entre les éléments */
}

.video-controls button {
    font-size: clamp(12px, 2vw, 18px); /* Taille de la police des icônes adaptative */
}

#seekBar {
    flex-grow: 1;
    margin: clamp(5px, 1vw, 10px) clamp(10px, 2vw, 20px); /* Marges adaptatives */
    height: clamp(5px, 1vw, 10px); /* Hauteur de la barre de progression */
}

.video-playlist {
    margin-top: 20px;
    list-style-type: none;
    padding: 0;
    text-align: left;
    width: 100%;
}

.video-playlist li {
    cursor: pointer;
    padding: 5px;
    background: #f0f0f0;
    margin-bottom: 5px;
}

.video-playlist li:hover {
    background: #d0d0d0;
}

.video-playlist li.active {
    background-color: #d8bce6; /* Couleur d'arrière-plan */
    color: white; /* Couleur du texte */
    font-weight: bold;
}

/* ====================
Styles Responsives
==================== */

/* Petits écrans (smartphones) */
@media (max-width: 480px) {
   
    .video-wrapper {
        max-width: 90%; /* Pour éviter que le wrapper ne dépasse l'écran */
		padding: 0.5rem; /* Réduit les espaces internes */
        border-width: 1px; /* Bordure plus fine */
    }

    #video-player {
        width: 100%; /* Vidéo prend toute la largeur */
    }

  .video-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 10px;
}

    #seekBar {
        margin: 10px 0; /* Ajuste les marges */
        width: 100%; /* Barre de progression pleine largeur */
    }

    .video-playlist {
        font-size: 0.9rem; /* Texte plus petit */
    }
}

/* Tablettes */
@media (max-width: 768px) {
    
    .video-wrapper {
        max-width: 90%; /* Pour éviter que le wrapper ne dépasse l'écran */
		padding: 1rem;
    }

 #video-player {
        width: 100%; /* Vidéo prend toute la largeur */
    }
	
    .video-controls {
        gap: 15px; /* Plus d'espace entre les contrôles */
    }
}

.contact {
	text-align: center;
}

/* Compense le menu fixe */
#contact {
  scroll-margin-top: 100px; /* Ajustez selon la hauteur du menu */
}

/* ====================
Footer
==================== */
footer {
  display: flex;
  align-items: flex-start;
  justify-content: center; /* Centre horizontalement */
  padding: 2rem;
  padding-bottom: 150px; /* Ajoutez de l'espace au besoin */
  background: #333;
  color: #fff;
  font-size: 1.2rem; /* Taille de la police (par exemple 1.2rem pour agrandir) */
  margin-top: 2rem; /* Ajoute un espace au-dessus du footer */
  position: relative; /* Ou relative si nécessaire */
  bottom: auto;
}

footer a {
  color: #fff;
  text-decoration: none;
  font-size: 1.2rem; /* Agrandir aussi la taille des liens si nécessaire */
  font-style: italic;
}