/* ====================
   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: 40px;
		background: url('images/background.png') no-repeat center;
		background-size: cover;
		font-size: clamp(0.8rem, 2.5vw, 1.5rem);
	}

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

	.hero-image {
		width: 100%;
		max-width: 847px; /* Largeur maximale */
		height: auto;
		aspect-ratio: 1277 / 871; /* 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 Vidéo
==================== */
.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-container {
  position: relative;
  padding-bottom: 56.25%; /* Ratio 16:9 */
  height: 0;
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}




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

/* Conteneur général de la section À propos */
.about {
    padding-top: 1rem; /* Ajoute de l'espace autour de la section */
	text-align: center;
	margin: 1rem;
	font-size: clamp(0.8rem, 2.5vw, 1.5rem);
}

/* Texte dans la section */
.about .text{
	max-width: 100%; /* Empêche le dépassement */	
	align-items: center;
	margin-top: 0; /* Supprime l'espace par défaut au-dessus du texte */
	padding-left: 1rem;
	padding-right: 1rem;
}

.about .image-trio {
	max-width: 100%; /* Empêche le dépassement */	
	align-items: center;
	margin-top: 0; /* Supprime l'espace par défaut au-dessus du texte */
}

/* Image trio */
.image-trio {
    height: 100%; /* Remplit la hauteur du conteneur parent */
    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 */
    object-fit: cover; /* Ajuste l'image pour qu'elle remplisse l'espace */
}

/* Section Témoignages */
#temoignage {
  background-image: url('images/temoignage-background.png'); /* Chemin vers l'image */
  background-size: cover; /* Couvre toute la section */
  background-position: center; /* Centre l'image */
  background-repeat: no-repeat; /* Empêche la répétition */
  padding: 1rem; /* Ajoute de l'espace intérieur */
  color: #000; /* Texte en noir pour le contraste */
  
}

.temoignage {
	text-align: center;
	font-size: clamp(0.8rem, 2.5vw, 1.5rem);
	margin-bottom: 0; /* Supprime l'espace sous la section Témoignages */
    padding-bottom: 0; /* Ajuste l'espace interne si nécessaire */
}

.contact {
	text-align: center;
}


/* Compense le menu fixe */
#contact {
  scroll-margin-top: 40px; /* 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) */
  position: relative; /* Ou relative si nécessaire */
  bottom: auto;
  margin-top: 0; /* Supprime l'espace au-dessus du footer */
  padding-top: 3rem; /* Ajuste l'espace interne si nécessaire */
}

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