/* Variables */
:root {
	--primary-color: #4c6ca0;
	--secondary-color: #3b5998;
}

/* Reset */
* {

	margin: 0;
	padding: 0;
	box-sizing: border-box;

}











































a {
    text-decoration: none;
    color: white;
}



.acceuil {
    background-image: url('background3.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center; /* Centrer l'image */

	
}



/* Main Styling */
body {
	background-color: rgba(214, 214, 214, 0.233);
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	line-height: 1.6;
	color: #000000;
}

p {
	margin: 10px 0;
}

i {
	display: inline;
}

ul {
	list-style: none;
}


#home {
	height: 93vh;
}

section {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	height: auto;
	padding: 0rem 2rem 0rem 2rem;
}

section>* {
	margin: 0 auto;
	max-width: auto;

}

/* Navbar Styling */
/* Add this new class */
.nav-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}



/* Modify this class */
.navbar {
	display: flex;
	flex-direction: row;
	align-items: center;
	box-shadow: 0px -5px 20px 0px rgb(68, 68, 68);
	/* justify-content: space-between; */
	/* Remove this line */
	width: 100%;
	height: 7vh;
	background: #fff;
	position: sticky;
	top: 0;
	padding: 1.25rem;
	z-index: 2 !important;
}

.bouton-header {
	margin-left: auto;
}

.navbar .logo {
	font-size: 2rem;
}











li {
	padding: 1px !important;
}








.nav-menu {
	display: flex;
	justify-content: center;
	/* Centrer les éléments horizontalement */
	align-items: center;
	width: 100%;
	/* Ajouter cette ligne */
	text-align: center;
	/* Centrer le texte horizontalement */
}

.bouton-header {
	position: absolute;
	/* Ajouter cette ligne */
	right: 0;
	/* Ajouter cette ligne */
	padding-right: 50px;
}

.navbar {
	padding-right: 2rem;
	/* Ajouter cette ligne */
}

.nav-menu .nav-item {
	display: flex;
	text-align: center !important;
	/* Centrer le texte */
}


.nav-menu .nav-item a {
	display: flex;
	text-align: center !important;
	/* Centrer le texte */
	text-decoration: none;
	color: #000000;
	font-family: 'Poppins', sans-serif;
	letter-spacing: -0.5px;
	font-weight: 700;
}

.nav-menu .nav-item a {
	padding: 1rem 1.4rem 1rem 1rem;
	transition: color 0.3s ease;
	color: #000000;
}

.hamburger {
	display: none;
}

.bar {
	display: block;
	width: 25px;
	height: 3px;
	margin: 5px auto;
	transition: all 0.3s ease-in-out;
	background-color: #050505;
}

.btn {
	transition: all 0.3s ease-in-out;
	font-family: 'Poppins', sans-serif;
	font-weight: 800;


}

.btn {
	width: 140px;
	height: 35px;
	border-radius: 50px;
	background-image: linear-gradient(45deg, #eed025, #d3461c);
	box-shadow: 5px 10px 20px -6px rgb(255, 233, 133);
	outline: none;
	cursor: pointer;
	border: none;
	font-size: 15px;
	color: white;
}

.btn:hover {
	transform: translateY(3px);
	box-shadow: none;
}

.btn:active {
	opacity: 0.5;
}



.titreContainer1,
.titreContainer2 {
	width: fit-content;
	box-shadow: 0px 0px 25px 5px rgb(255, 164, 89);
	background: linear-gradient(45deg, #fa5c00, #ffd000);
	padding: 0.2em 0.7em;
	/* Ajuster les paddings avec des unités relatives */
	margin: auto;
	color: white;
	font-family: 'Poppins';
	font-weight: 800;
	
	/* Utiliser des unités relatives pour la taille de police */
	text-align: center;
	/* Centrer le texte */

}







.titreContainer1 p,
.titreContainer2 p {
	color: #ffffff;
	text-shadow: 0 0 80px #e7e7e7, 0 0 80px #e7e7e7, 0 0 80px #e7e7e7, 0 0 80px #e7e7e7;
	font-size: 0.9em !important;
}

/*
@keyframes fadeInMove {
	0% {
		opacity: 0.7;
		transform: translateY(-15vh);
	}

	100% {
		opacity: 1;
		transform: translateY(0vh);
	}
}



.scroll1 {
	animation: appear linear;
	animation-timeline: view();
	animation-range-start: 125vh;
}

@keyframes appear {

	to {
		opacity: 0.7;
		filter: blur(10px);
	    box-shadow: 0 0px 50px 5px rgb(59, 59, 59);
	}
}
*/



.btn-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0.4em 0.8em;
    font-size: 0.9em !important;
    font-weight: bold;
    color: white;
    background: linear-gradient(45deg, #fa5c00, #ffd000); /* Utilisez le même dégradé que les titres */
    border: none;
    border-radius: 1em;
    box-shadow: 0px 0px 25px 5px rgb(255, 164, 89); /* Utilisez la même ombre que les titres */
    cursor: pointer;

    transition: background-color 0.3s ease;
    font-family: 'Poppins', sans-serif; /* Utilisez la police Poppins */
}

.btn-center:hover {
    background: linear-gradient(45deg, #ffd000, #fa5c00); /* Inversez le dégradé pour l'effet de survol */
}


.titreContainerB {
	width: 100%;
    position: relative; /* Permet le positionnement absolu des enfants */
    height: 100%; /* Assurez-vous que le conteneur a une hauteur définie */
}

.titreContainerA {
    position: absolute;
    bottom: 3vh; /* Positionne en bas */
    left: 0vw; /* Positionne à gauche */
}


@media (max-width: 768px) {

	.titreContainer1,
	.titreContainer2 {
		padding: 1vh 4vw;
		/* Réduire encore les paddings pour les très petits écrans */
		font-size: 4vw;
		/* Réduire encore la taille de police pour les très petits écrans */
	}


}

@media (min-width: 768px) {

	.titreContainer1,
	.titreContainer2 {
		padding: 1vw 2vw;
		/* Réduire encore les paddings pour les très petits écrans */
		font-size: 3vw;
		/* Réduire encore la taille de police pour les très petits écrans */
	}
}

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

.hamburgerContainer {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-left: auto;
}

@media only screen and (max-width: 768px) {
	.bouton-header {
        display: none;
    }

	.test {
		position: absolute;
		right: 2rem;
	}
}













@media only screen and (max-width: 768px) {
    .nav-menu {
      position: fixed;
      /* 
        You can change the position of the navbar 
        ----------------------------------------------------------------------------------
        To succesfully do this, you must change the .nav-menu.active to the chosen position
        * right: -100%;
        * .right-menu.active { right: 0;}
        -----------------------------------------------------------------------------------
      */
      right: -100%;
      top: 0rem;
      flex-direction: column;
      /* This controls the width of the navbar container*/
      width: 50%;
      /* This controls the height of the navbar container */
      height: 100%;
      text-align: right;
      transition: 0.3s;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
      /* This controls the background color of the navbar container*/
      background-color: #f4f4f4;
    }
  
    .nav-menu.active {
      right: 0;
    }
  
    .nav-menu li:first-child {
       margin-top: 4.5rem;
       border-top: 1px solid #ccc;
    }
  
    .nav-item {
      width: 100%;
      border-bottom: 1px solid #ccc;
    }
  
    .hamburger {
      display: block;
      cursor: pointer;
    }
  
    .hamburger.active .bar:nth-child(2) {
      opacity: 0;
    }
  
    .hamburger.active .bar:nth-child(1) {
      transform: translateY(8px) rotate(45deg);
    }
  
    .hamburger.active .bar:nth-child(3) {
      transform: translateY(-8px) rotate(-45deg);
    }
  }











#home {
	position: relative;
	/* Make the section relatively positioned */
}


/* Style the .titreContainer div */
.titreContainer {
	position: relative;
	/* Make the div relatively positioned */
	z-index: 1;
	/* Position the div above the .parallaxContainer div */
	text-align: center;
	padding-top: 10%;
	/* Add some padding to the top of the div */
}



@keyframes scrolling {
	to {
		width: 100%;
	}
}


.progress {
	height: 1vh;
	position: fixed;
	bottom: 0;

	animation: scrolling linear;
	animation-timeline: scroll();

	z-index: 100;
	transform-origin: left;
	background-image: linear-gradient(45deg, #be3c00, #ffb20c);
	box-shadow: 0px 0px 3% 1% rgba(83, 83, 83, 0.5);
	width: 0;
}



body {
	touch-action: pan-y;
  }



  p.horaires {
    justify-content: center;
    display: flex; /* Utilise inline-flex pour que le texte soit traité comme un bloc en ligne */
    align-items: center;
    font-family: 'Poppins';
    color: black;
    font-weight: 700;
    font-size: 3vw;
    margin: auto;
    margin-top: 5vh;


	text-decoration: underline;
	text-decoration-color: #f1b024;
	text-decoration-thickness: 0.2em;


    margin-bottom: 1vh;

    padding-bottom: 0; /* Adjust this value as needed */
}









/*

.scroll3 {
	animation: titreAnimation linear;
	animation-fill-mode: forwards;
	animation-timeline: view();
	animation-range-start:-5vh;
	animation-range-end: 50vh;
}

*/

/* Safari 
@supports (background: -webkit-named-image(i)) {

	.scroll3,
	.scroll1,
	.scroll2,
	.scroll4,
	.scroll5 {
		animation: none !important;
	}
  }
  

  @supports not (background: -webkit-named-image(i)) {

  }
  
*/
  /*
  .scroll2 {
    
	animation: underlineAnimation linear;
	animation-timeline: view();
	animation-range-start: 40vh;
	animation-range-end: 60vh;
	animation-fill-mode: forwards;
	


}



@keyframes titreAnimation {
    0% {
		filter: blur(10px);
        opacity: 0.3;
		transform: translateY(-12vh);
		scale: 0.7;

    }
    



    100% {
		filter: blur(0px);
        opacity: 1;
		transform: translateY(1vh);
		scale: 1;
    }
}

@keyframes iframeEntry {
    from {opacity: 0.4; filter: blur(3px);} to {opacity: 1; filter: blur(0px);}
}
*/


.iframeflex {
	display: flex;
	justify-content: center;
	align-items: center;
}

/*
.scroll4 {
	animation-timeline: view();
	animation-range-start: entry;
	animation-range-end: 80vh;
	animation-name: iframeEntry;
}
	*/

.iframe-container1 {
	
    position: relative;
    width: 90%;
	height: auto;
    padding-bottom: 88%; /* ratio 552/560 */
  }
  
  .iframe-container1 iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  iframe {
	border-radius: 4%;
  }


  .iframe-container2 {
    position: relative;
    width: 90%;
	height: auto;
    padding-bottom: 93.47826086956522%; /* ratio 476/460 */
  }
  
  .iframe-container2 iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .iframe-container3 {
    position: relative;
    width: 95%;
	height: auto;
    padding-bottom: 165%; /* ratio 476/460 */
  }
  
  .iframe-container3 iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }




  .carte-container {
    position: relative;
    width: 100%;
    padding-bottom: 75%; /* ratio 450/600 */
  }
  
  .carte-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }































.adulteTextContainer p {

    font-family: 'Poppins';
	color: black;
	font-weight: 700;
	font-size: 2.5vw;
}

.adulteTextContainer ul li:not(.trajet, .jours) {
    
    font-family: 'Poppins';
	color: black;
	font-weight: 700;
	font-size: 1.2em !important;
	padding: 0.5em;
}




#equipement {
	margin-top: 5vh;
}


.adulteTextContainer {
	padding-left: 1em;
}




.adulteTextContainer ul li {
    font-family: 'Poppins';
	color: black;
	font-weight: 700;
	font-size: 0.95em;
}


.AdulteTitre {
	padding-top:15% ;
}



@media (max-width : 700px) {



    p.horaires {
 
    font-size: 8.5vw;
    }   



	

.adulteTextContainer p {
	position: relative;
	padding-bottom: 0; /* Adjust this value as needed */
	display: inline-block;
}
.adulteTextContainer p::after {
	content: '';
	position: absolute;

	left: 0;
	bottom: 0;
	width: 100%;
	height: 0.2em; /* Adjust this value as needed */
	background-color: #f1b024; /* Adjust the color as needed */
}





.adulteTextContainer p {
/*
	text-decoration: underline;
	text-decoration-color: rgb(242, 177, 36) ;
	text-decoration-thickness: 0.25em;
*/

	font-weight: 700;
	font-size: 1.3em;
}




.voirplus {
	color: black;
	text-decoration-color: rgb(53, 9, 70);
	font-family: 'Poppins'; 
	font-weight:800;
	font-size:0.9em; 
}


.voirplus {
	display: inline-block;
    position: relative;
    padding-bottom: 0; /* Adjust this value as needed */
}

.voirplus::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0.2em; /* Adjust this value as needed */
    background-color: #000000; /* Adjust the color as needed */
}

/*

.scroll5 {
	animation: apparitionSmooth linear;
	animation-timeline: view();
	animation-range-end: 60vh;
	animation-range-start: entry;
	animation-range-start: entry;
	animation-fill-mode: forwards;
}




    
}



@keyframes apparitionSmooth {
	from {opacity:0.2; filter: blur(5px);} to {opacity: 1; filter: blur(0);}
}





*/






















@media (min-width : 768px) {
	.numMobile {
		display: none !important;
	}
}	






iframe {
	box-shadow: 0px 0px 1.5em 0.1em rgb(39, 36, 26);
}








.social {

	display: flex;
	width: 90%;
	background-color: #ffe7d000;
	
	border-radius: 2em;
	box-shadow: 0px 0px 1em 0.1em rgb(160, 160, 160);
	height: 10vh;
}

.social a {
	display: flex;
	margin: auto;
}

.socialImg {
	display: flex;
	padding: auto;
	width: auto;
	margin: auto;
	align-items: center !important;
	height: 5vh;
	justify-content: space-between !important;
}

.victoire {
	margin-top: 3.5vh !important;
	margin-bottom: 3.5vh !important;
	margin: auto;
	display: flex;
	width: 95%;
	align-items: center;
	height: auto;
	box-shadow: 0px 0px 1em 0.1em rgb(160, 160, 160);
	justify-content: center;
	border-radius: 4%;
}





.materielImg {


	width: 70vw;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: auto;
	height: auto;
}


/*

button {
	--glow-color: rgb(217, 176, 255);
	--glow-spread-color: rgba(191, 123, 255, 0.781);
	--enhanced-glow-color: rgb(231, 206, 255);
	--btn-color: rgb(100, 61, 136);
	border: .25em solid var(--glow-color);
	padding: 1em 3em;
	color: var(--glow-color);
	font-size: 15px;
	font-weight: bold;
	background-color: var(--btn-color);
	border-radius: 1em;
	outline: none;
	box-shadow: 0 0 1em .25em var(--glow-color),
		   0 0 4em 1em var(--glow-spread-color),
		   inset 0 0 .75em .25em var(--glow-color);
	text-shadow: 0 0 .5em var(--glow-color);
	position: relative;
	transition: all 0.3s;
   }
   
   button::after {
	pointer-events: none;
	content: "";
	position: absolute;
	top: 120%;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: var(--glow-spread-color);
	filter: blur(2em);
	opacity: .7;
	transform: perspective(1.5em) rotateX(35deg) scale(1, .6);
   }
   
   button:hover {
	color: var(--btn-color);
	background-color: var(--glow-color);
	box-shadow: 0 0 1em .25em var(--glow-color),
		   0 0 4em 2em var(--glow-spread-color),
		   inset 0 0 .75em .25em var(--glow-color);
   }
   
   button:active {
	box-shadow: 0 0 0.6em .25em var(--glow-color),
		   0 0 2.5em 2em var(--glow-spread-color),
		   inset 0 0 .5em .25em var(--glow-color);
   }

*/


















.groupeVideo {
	width: 90vw;
	height: auto;
	margin-left: 5vw;
	margin-right: auto;
	border-radius: 1.5em;
}