/*mon fichier style*/ 

/*mes styles*/
	h1 {
		font-family: 'Gasoek One', sans-serif;                                 
	}

	h3 {
		text-align: center;
		color: dimgrey;
		font-family: 'Gasoek One', sans-serif;
	}
	p {
		font-family: 'Margesh', sans-serif;
		font-size: 20px ;
	}
/*fin de mes styles*/

/*mes id*/
	#entete {
		background-image: url("images/phoque3.jpg");
		background-size:cover;
		background-position: 50% 50%;
	}

	#entete2 {
		background-image: url("images/largha0.jpg");
		background-size:cover;
		background-position: 50% 50%;
	}

	#entete3 {
		background-image: url("images/med0.jpg");
		background-size:cover;
		background-position: 50% 50%;
	}
/*fin de mes id*/


/*mes classes*/
	/*impacte toutes les pages*/	
		.soustitre {
			font-family: 'Margesh', sans-serif;                                              
		}
		
		.petit-cadre {
			border: 1px solid hotpink;
			padding: 20px;
			border-radius: 15px;
			margin: 5px;
		}

		.img-responsive {
			max-width: 100%;
			height:auto;
			display: block;
			border-radius:15px;
		}

		.entete{
			background-color: rgba(0, 0, 0, 0.5);
			padding:20px;
			color:white;
			border-radius:15px;
		}

		.btn{
			color: black;
		}

		.button{
			display:flex;
			gap: 10px;
			justify-content: center;
		}	

		.progress{
			background-color: #d3d3d3 ;
		}
	/*fin impacte toutes les pages*/


	/*index*/
		.navbar {
			background-color: lightpink;
		}

		.jumbotron{
			background-image: url("images/phoque3.jpg");
			background-size: cover;
			background-position: center;
			padding: 70px;
		}

		.btn-primary {
			background-color: lightpink;
			border-color: lightpink;
		}

		.btn-primary:hover {
			background-color: hotpink;
			border-color: hotpink;
		}
	/*fin index*/


	/*largha*/
		#menu2{
			background-color: lightyellow;
		}	

		.btn-second {
			background-color: lightyellow;
			border-color: lightyellow;
		}

		.btn-second:hover {
			background-color: #ffee8c;
			border-color: #ffee8c;
		}

		.progress-bar2{
			background-color: lightyellow;
			text-align: center;
			color: black;
		}
	/*fin largha*/

	/*méditerranée*/
			#menu3{
				background-color: lightblue;
			}

			.btn-third {
			background-color: lightblue;
			border-color: lightblue;
		}

		.btn-third:hover {
			background-color: #48cae4;
			border-color: #48cae4;
		}

			.progress-bar3{
				background-color: lightblue;
				text-align: center;
			}
	/*fin méditerranée*/

	/*mosaïque images*/
			.photo-grid {
			  padding: 5px;
			}

			.photo-grid img {
			  width: 100%;
			  height: 350px; 
			  object-fit: cover; 
			  border: 1px solid hotpink;
			  border-radius: 15px;
			  display: block;
			}
	/* fin mosaïque images*/

	/*footer*/
			#footer{
				display: flex;
				justify-content: space-evenly;
				}

			.rs{
				width:30px;
				fill: dimgrey;
			}

			.text-footer {
				font-family: 'Margesh', sans-serif;
				color: hotpink;
			}
	/*fin footer*/

/*fin de mes classes*/