@font-face {
	font-family: 'Myungjo';
	src: url("AdobeMyungjoStd-Medium.otf") format("truetype");
}


*
{
	margin:0;
	padding:0;

}



/*body*/
body
{
	overflow-y: scroll;
	overflow-x: hidden;
	font-family: "Myungjo", sans-serif;
}

h3{
    text-shadow: 1px 1px white;
	font-size: 18px;
}

/*headers*/
.header
{
	background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(img/Salle-Restaurant-La-Coquille.jpg);
	height:80vh;
	background-position:center;
	background-size:cover;
}

.header2
{
	background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(img/Assiette-huitres-Restaurant-La-Coquille.jpg);
	height:30vh;
	background-position:center;
	background-size:cover;
	background-attachment:fixed;
}

@media screen and (max-width: 768px) {
	.header2 {
		height: 30vh; /* ou une autre valeur adaptée */
		background-attachment:scroll;

	}
}

.instagram-media {
	margin-right: 10px;
}

#instagram-embed-0{
	margin-right: 20px;
}

.content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 50px;
	overflow: hidden;

	font-family: 'Myungjo', sans-serif;
	font-size: 30px;
	line-height: 40px;
	color: #ecf0f1;
	width: 80%; /* Ajustez en fonction de la largeur souhaitée */
	max-width: 400px; /* Maximum width */
	margin-top: 40px; /* Espace sous le logo */
	margin-left: 30px;

}



.content__container {
	 font-weight: 400;
	 overflow: hidden;
	 height: 40px;
	 padding:0px;
}



.content__container:after,
.content__container:before {
			  position: absolute;
			  top: 0;

			  color: #16a085;
			  font-size: 30px;
			  line-height: 40px;

			  -webkit-animation-name: opacity;
			  -webkit-animation-duration: 2s;
			  -webkit-animation-iteration-count: infinite;
			  animation-name: opacity;
			  animation-duration: 2s;
			  animation-iteration-count: infinite;
		  }

.content__container__text {
	 display: inline;
	 float: left;
	 margin: 0;
 }

.content__container__list {
	margin-top: 0;
	padding-left: 205px;
	text-align: left;
	list-style: none;

	-webkit-animation-name: change;
	-webkit-animation-duration: 10s;
	-webkit-animation-iteration-count: infinite;
	animation-name: change;
	animation-duration: 10s;
	animation-iteration-count: infinite;
}
.content__container__list__item {
	 line-height:40px;

	margin: 0;
 }


@-webkit-keyframes opacity {
	0%, 100% {opacity:0;}
	50% {opacity:1;}
}

@-webkit-keyframes change {
	0%, 12.66%, 100% {transform:translate3d(0,0,0);}
	16.66%, 29.32% {transform:translate3d(0,-25%,0);}
	33.32%,45.98% {transform:translate3d(0,-50%,0);}
	49.98%,62.64% {transform:translate3d(0,-75%,0);}
	66.64%,79.3% {transform:translate3d(0,-50%,0);}
	83.3%,95.96% {transform:translate3d(0,-25%,0);}
}

@-o-keyframes opacity {
	0%, 100% {opacity:0;}
	50% {opacity:1;}
}

@-o-keyframes change {
	0%, 12.66%, 100% {transform:translate3d(0,0,0);}
	16.66%, 29.32% {transform:translate3d(0,-25%,0);}
	33.32%,45.98% {transform:translate3d(0,-50%,0);}
	49.98%,62.64% {transform:translate3d(0,-75%,0);}
	66.64%,79.3% {transform:translate3d(0,-50%,0);}
	83.3%,95.96% {transform:translate3d(0,-25%,0);}
}

@-moz-keyframes opacity {
	0%, 100% {opacity:0;}
	50% {opacity:1;}
}

@-moz-keyframes change {
	0%, 12.66%, 100% {transform:translate3d(0,0,0);}
	16.66%, 29.32% {transform:translate3d(0,-25%,0);}
	33.32%,45.98% {transform:translate3d(0,-50%,0);}
	49.98%,62.64% {transform:translate3d(0,-75%,0);}
	66.64%,79.3% {transform:translate3d(0,-50%,0);}
	83.3%,95.96% {transform:translate3d(0,-25%,0);}
}

@keyframes opacity {
	0%, 100% {opacity:0;}
	50% {opacity:1;}
}

@keyframes change {
	0%, 12.66%, 100% {transform:translate3d(0,0,0);}
	16.66%, 29.32% {transform:translate3d(0,-25%,0);}
	33.32%,45.98% {transform:translate3d(0,-50%,0);}
	49.98%,62.64% {transform:translate3d(0,-75%,0);}
	66.64%,79.3% {transform:translate3d(0,-50%,0);}
	83.3%,95.96% {transform:translate3d(0,-25%,0);}
}






.container {
	background: #f9f9f9;
}

.logo img{
	width:250px;
	margin-top:90px;
	margin-bottom:40px;
}

.logoh img{
	width:50px;

}


.logo{
	width:250px;
	margin-top:90px;
	margin-bottom:40px;
	padding-bottom: 50px;
	opacity: 0;
	animation: fadeInUp 1s ease-in-out 1s forwards;
}


/*navbar*/
.navbar{
	background-color:white;
}

.navbar-brand {
font-family: "AppleGothic", AppleGothic, cursive;
}

span{
	font-family: "Avenir",Avenir,sans-serif;

}

.navbar .navbar-nav .active{
	border-bottom:1px solid  white;
}

.navbar .navbar-nav .nav-item a{
	color:#3A3B3B;
}

.navbar .navbar-nav .nav-item a:hover {
	background-color: #d1c8c8; /* Couleur de survol */
	color: black;
	transition: background-color 0.3s, color 0.3s; /* Transition douce */
}

.header-button .btn{
    
margin-top:40vh;
}

.header h2, .header2 h2 {
	opacity: 0;
	transform: translateY(-40px);
	animation: fadeInUp 1s ease-in-out 1s forwards;
}

@keyframes fadeInUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}


/*gallerie*/
.gallery .img-fluid {
	max-height: 300px; /* ou la hauteur que vous préférez */
	object-fit: cover;
	width: 100%; /* cela garantit que la largeur est toujours la même que celle de la colonne */
}

.event1{
	margin-top: 20px;
}

.flex-column {
	max-width : 260px;
}
@media only screen and (max-width: 500px) {
	.content {
		width: 95%;
		font-size: 25px;
		max-width: 400px;
		margin-top: 20%;
		margin-left: 30px;

	}
	.content__container{
		font-weight: 300;

	}
	.content__container__list{
		margin-left: -35px;

	}

	.

}

@media only screen and (max-width: 520px) {
	.img-fluid {
		max-width: 240px; /* ou la taille que vous souhaitez */
		height: auto; /* pour maintenir le ratio d'aspect */

	}
	.flex-column {
		max-width : 180px;
	}
}

@media only screen and (max-height: 600px){
	.content {
		margin-top: 100px;
	}
}

@media (max-width: 765px) {
	.menu.Cocktail {
		flex-direction: column; /* Les conteneurs sont empilés l'un au-dessus de l'autre */
		align-items: center; /* Centrer les éléments horizontalement dans le conteneur */
	}

	.responsive-image{
		width: 100%;
	}
}

@media only screen and (min-width: 780px) and (max-width: 1040px) {
	.flex-column {
		max-width : 350px;
	}

}
@media only screen and (max-width: 500px ) {

	.img-fluid_carte {
		max-width: 47%;
	}

	img#img1event {
		margin-top: 23px;
	}
}
@media only screen and (max-width: 395px) {
img#img1event {
	margin-top: 1.5em;
}

}

.row {
  margin: 15px;
}

.nav-link {
	cursor:pointer;
}

/*footer*/
.footer{
padding-top:30px;
padding-bottom:30px;
color:black;
animation: fadeIn 1s ease-in-out;
}


@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

.social-icon a{
	margin:0 16px 20px 16px;
	display:inline-block;
}

.social-icon .fa{

	color:black;
	width:50px;
	height: 50px;
	border-radius:50%;
	background:lightgray;
	transition: .3s;
	border:10px solid lightgray;

	font-size: 30px;
	text-align: center;
}

.social-icon a:hover .fa{
	border:5px solid black;
}
.social-icon .fa:hover {
	color: black; /* Changez la couleur au survol */
	transform: scale(1.1); /* Agrandir légèrement l'icône */
	transition: color 0.3s, transform 0.3s; /* Transition douce */
}


.bordernow{
	width:80px;
	border-bottom:2px solid white;
	margin:0 auto;
	margin-top:20px;
}

.TextPhoto{
	color: #f9f9f9;
	font-size: large;
	text-align: center;
}

.fa:hover {
	opacity: 0.7;
}

.fa-facebook {
	background: #3B5998;
	color: white;
}

.hov:hover{
	border: 5px solid #555;

}

.animated-border-button {
	padding: 10px 20px;
	text-decoration: none;
	font-weight: bold;
	position: relative;
	transition: color 0.3s ease;
	animation: border-color-change 3s linear infinite;
}

@keyframes border-color-change {
	0% { border-color: black; }
	25% { border-color: white; }
	50% { border-color: black; }
	75% { border-color: white; }
	100% { border-color: black; }
}

/* Style du conteneur pour centrer le bouton */
.button-container {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Style du bouton */
.custom-button {
	padding: 10px 20px;
	background-color: transparent; /* Fond transparent */
	border: 2px solid #000000; /* Bordure noire */
	color: #000000; /* Texte noir */
	text-align: center;
	text-decoration: none;
	border-radius: 5px; /* Coins arrondis */
	cursor: pointer;
	transition: background-color 0.3s, color 0.3s;
}

/* Style du bouton au survol */
.custom-button:hover {
	background-color: #000000; /* Fond noir au survol */
	color: #ffffff; /* Texte blanc au survol */
}


.container.avis{
	padding-bottom: 2em;

}

.carousel-inner.avis{
	padding-left: 15%;
	padding-right: 15%;
	margin-bottom: 60px;
	background-color: white;
	padding-bottom: 2em;
	border-radius: 10%;
}

.signature{
	font-style: italic;
}

.fa.fa-star{
	color: rgb(246,161,37);
	font-style: inherit;
	font-size: x-large;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
	filter: invert(100%) grayscale(100%);
}



label {
	display: block;
	margin-bottom: 10px;
}

input[type="email"] {
	padding: 5px;
	width: 200px;
}

.btn:link,
.btn:visited {
	text-transform: uppercase;
	text-decoration: none;
	color: rgb(27, 27, 27);
	padding: 10px 30px;
	border: 1px solid;
	border-radius: 1000px;
	display: inline-block;
	transition: all .2s;
	position: relative;
}

.btn:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 20px rgba(149, 149, 149, .5);
}

.btn:active {
	transform: translateY(-3px);
}

.btn::after {
	content: "";
	display: inline-block;
	height: 100%;
	width: 100%;
	border-radius: 100px;
	top: 0;
	left: 0;
	position: absolute;
	z-index: -1;
	transition: all .3s;
}

.btn:hover::after {
	background-color: rgb(0, 238, 255);
	transform: scaleX(1.4) scaleY(1.5);
	opacity: 0;
}
form {
	max-width: 400px;
	margin: 20px auto;
	text-align: center;
	gap: 20px; /* Espace entre les éléments du formulaire */
	display: flex;
	flex-direction: column;
	align-items: center;
}

input[type="email"] {
	width: 100%;
	padding: 12px 15px;
	margin-top: 10px;
	font-size: 16px;
	border: 1px solid #ccc;
	border-radius: 25px;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease-in-out;
	font-family: 'Arial', sans-serif;
}

/* Effets au focus */
input[type="email"]:focus {
	border-color: #007BFF;
	outline: none;
	box-shadow: 0 0 8px rgba(0, 123, 255, 0.3);
}

/* Placeholder */
input[type="email"]::placeholder {
	color: #aaa;
	font-style: italic;
}
button {
	padding: 12px 25px;
	font-size: 16px;
	color: #fff;
	background: linear-gradient(135deg, #3b82f6, #2563eb); /* Gradient moderne */
	border: none;
	border-radius: 30px !important; /* Bouton totalement arrondi */
	cursor: pointer;
	transition: all 0.3s ease;
	font-family: 'Arial', sans-serif;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Légère ombre pour le relief */
}

/* Effet au survol */
button:hover {
	background: linear-gradient(135deg, #2563eb, #1d4ed8); /* Couleur légèrement assombrie */
	transform: translateY(-2px); /* Effet de levée subtile */
	box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); /* Ombre accentuée au survol */
}

/* Effet au clic */
button:active {
	transform: translateY(0); /* Supprime la levée temporairement */
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre normale */
	background: linear-gradient(135deg, #3b82f6, #2563eb); /* Couleur d'origine */
}


/* Responsive pour petits écrans */
@media (max-width: 768px) {
	form {
		padding: 0 15px;
	}
	input[type="email"] {
		font-size: 14px;
	}
	button {
		font-size: 14px;
	}
}

.confirmation-message {
	display: none; /* Caché par défaut */
	margin-top: 15px;
	padding: 10px;
	color: #155724;
	background-color: #d4edda;
	border: 1px solid #c3e6cb;
	border-radius: 5px;
	font-size: 14px;
}
.confirmation-message {
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
}
.confirmation-message.show {
	display: block;
	opacity: 1;
}
.confirmation-message {
	display: none;
	margin-top: 15px;
	padding: 10px;
	color: #155724;
	background-color: #d4edda;
	border: 1px solid #c3e6cb;
	border-radius: 5px;
}
.error-message {
	display: none;
	margin-top: 15px;
	padding: 10px;
	color: #721c24;
	background-color: #f8d7da;
	border: 1px solid #f5c6cb;
	border-radius: 5px;
}