﻿
/*#region BANDEAUX*/

	#milieu > div#bandeaux {
		position:relative;
		width:100%; max-width:1290px;
		text-align:center;
		margin:46px auto 45px;
		aspect-ratio:unset;
	}

		#milieu > div#bandeaux .textes {
			position:relative; 
			padding:0;
			width:100%;
			text-align:center;
		}

			#milieu > div#bandeaux .textes p {
				font-weight:700; color:#1D3FA0;
				text-transform:uppercase;
				margin:0px; padding:0px;
			}

			#milieu > div#bandeaux .textes p.contenu {
				font-size:2rem;
				text-shadow:1px 1px 5px rgba(0,0,0,0.4);
				padding-bottom:40px;
			}

			#milieu > div#bandeaux .textes p.titre {
				font-size:1.625rem; color:#E85A2C;
			}

				#milieu > div#bandeaux .textes p span {
					display:block; padding-top:10px;
					font-size:2rem; 
					
				}

				#milieu > div#bandeaux .centres {
					display:table;
					width:100%; height:400px;
					margin-top:20px;
				}

					#milieu > div#bandeaux .centres > div {
						display:table-cell;
						width:50%;
						padding:0px 0px 20px;
						text-align:center; vertical-align:bottom;
						background-position:center center; background-repeat:no-repeat;
					}
					#milieu > div#bandeaux .centres > div.centre-spr { background-image:url(/images/accueil/centre-saintpryve.png); }
					#milieu > div#bandeaux .centres > div.centre-fla { background-image:url(/images/accueil/centre-fleury.png); }

						#milieu > div#bandeaux .centres > div > div {
							display:inline-block;
							text-align:center;
						}

							#milieu > div#bandeaux .centres > div > div span {
								display:block;
								font-size:2.0625rem; font-weight:700; color:white; 
								padding:0px 20px 20px;
								text-shadow:0px 0px 8px #1D3FA0;
							}

							#milieu > div#bandeaux .centres > div > div a {
								display:inline-block;
								font-size:1.4375rem; color:white; 
								background-color:#E85A2C;
								background-image:linear-gradient(to right, #E85A2C, #F3A23C);
								border:solid 1px #97796f; border-radius:100px;
								padding:16px 20px;
								min-width:210px; min-height:60px;
							}


/*#endregion BANDEAUX*/

/*#region SLIDER*/

	#milieu > .blocslider {
		text-align:center;
		margin:45px auto 0px;
		max-width:1290px;
	}

/*#endregion SLIDER*/

/*#region Jouer Apprendre Entreprises*/

#jouerappent {
	position:relative; display:table;
	width:calc(100% - 40px); max-width:980px;
	margin:0px auto; padding:50px 0px 0px;
}

	#jouerappent > div {
		position:relative; display:table-cell; z-index:2;
		vertical-align:middle;
		width:50%;
	}

	#jouerappent .img {
		display:block; 
		width:420px; height:397px;
		background:url(/images/accueil/jouer-apprendre.jpg) no-repeat center center;
		background-size:contain;
		border-radius:16px;
	}

	#jouerappent .liens { z-index:1; }

	#jouerappent .liens ul { margin:0px 40px 0px 200px; }

		#jouerappent .liens ul li {
			position:relative; display:block;
			transform:translateX(-500px) scale(50%);
			opacity:0;
			transition:all 0.6s ease-out;
		}
		#jouerappent .liens ul li.fin {
			transform:none;
			opacity:1;
		}

		#jouerappent .liens ul li:not(:last-child) { margin-bottom:95px; }
		#jouerappent .liens ul li:nth-child(1) { margin-left:000px; }
		#jouerappent .liens ul li:nth-child(2) { margin-left:000px; }
		#jouerappent .liens ul li:nth-child(3) { margin-left:000px; }

			#jouerappent .liens ul li::before {
				position:absolute; display:block;
				content:url(/images/accueil/jouer_app_ent_bullet.png);
				left:-107px; top:50%;
				transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%);
			}

			#jouerappent .liens ul li a {
				display:inline-block;
				font-size:2.6875rem; font-weight:700; color:#E85A2C;
				text-transform:uppercase;
				text-align:center;
				background-image:linear-gradient(to right, #E85A2C, #F3A23C);
				-webkit-text-fill-color:transparent; -webkit-background-clip:text;
			}

/*#endregion Jouer Apprendre Entreprises*/

/*#region RESTAURANT*/

	#restaurant { margin:80px auto 0px; max-width:1200px; }

		#restaurant .bloc { display:table; margin:0px auto; width:100%; max-width:1290px; }

			#restaurant .bloc > div { display:table-cell; vertical-align:middle; }
			#restaurant .bloc > div.textes { padding-right:20px; }
			#restaurant .bloc > div.images { max-width:640px; width:50%; }

				#restaurant .bloc .textes > div { font-weight:500; text-transform:uppercase; text-align:center; }

				#restaurant .bloc .textes .titre {
					font-family:Anton; font-size:2.75rem; color:#E85A2C; letter-spacing:3px;
					padding-bottom:5px;
				}

				#restaurant .bloc .textes .texte {
					font-family:Anton; font-size:2.0rem; color:#1D3FA0;
					padding-bottom:60px;
				}

				#restaurant .bloc .textes .btn {
				}

					#restaurant .bloc .textes .btn a {
						display:inline-block;
						padding:16px 20px;
						min-width:150px; min-height:60px;
						border:solid 1px #97796f; border-radius: 100px;
						background-color:#E85A2C;
						background-image:linear-gradient(to right, #E85A2C, #F3A23C);
						font-size:1.4375rem; color:white; 
					}
					#restaurant .bloc .textes .btn a:hover { color:#1D3FA0; }


/*#endregion RESTAURANT*/

/*#region INSTAGRAM*/

#insta { margin-top:80px; }

	#insta .bloc { 
		position:relative;
		margin:0px auto; 
		width:100%; max-width:1290px; 
		text-align:right;
	}

		#insta .titre {
			position:relative; display:inline-block;
			font-size:2.75rem; font-weight:bold; color:white;
			width:auto;
			margin:0px 0px 50px auto; padding:28px 70px 28px 93px;
			background:linear-gradient(to right, #9aabd2, #3567af);
			text-transform:uppercase;
			border-radius:15px 0px 0px 15px;
		}
			#insta .titre::before {
				position:absolute; content:url(/images/accueil/insta-titre-logo.png);
				top:50%; left:28px;
				transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%);
				font-size:0;
			}

		#insta .publications {
			width:100%; height:357px;
			background:repeating-linear-gradient(135deg, #ffffff 0px, #ffffff 17px, #eeeeee 17px, #eeeeee 20px);
		}

/*#endregion INSTAGRAM*/

/*#region QUAND VENIR*/

#quandvenir { margin:80px auto 0px; max-width:1200px; }

	#quandvenir .bloc { 
		position:relative;
		margin:0px auto; 
		width:100%; max-width:1290px; 
		text-align:center;
	}

			#quandvenir .quand .horaires { 
				position:relative;
				background-color:#1D3FA0;
				width:100%;
				padding:60px 0px 100px;
			}

				#quandvenir .quand .horaires .titre { 
					font-size:2.375rem; font-weight:bold; color:#F7F3EA; 
					text-align:center; text-transform:uppercase;
					padding:0px 10px 40px;
				}

				#quandvenir .quand .horaires .tableau { 
					display:table; 
					border-spacing:0px 0px; 
					margin:0px auto; 
				}

					#quandvenir .quand .horaires > div > div { 
						display:table-cell; 
						vertical-align:middle; text-align:center;
						width:50%;
						padding:20px 30px;
						font-size:1.6875rem; font-weight:bold; color:white;
						text-transform:uppercase; 
					}
					#quandvenir .quand .horaires > div > div:first-child { padding-right:70px; }
					#quandvenir .quand .horaires > div > div:last-child { padding-left:70px; }

				#quandvenir .quand .horaires::before { 
					position:absolute; content:url(/images/accueil/quand-chevrons-gauche.png);
					top:20px; left:-23px;
				}

				#quandvenir .quand .horaires::after { 
					position:absolute; content:url(/images/accueil/quand-chevrons-droite.png);
					bottom:20px; right:-18px;
				}


		#quandvenir .contact { text-align:center; padding:30px 0px 0px; }

			#quandvenir .contact a {
				font-size:1.875rem; color:white; 
				background-color:#E85A2C;
				padding:8px 40px;
				border-radius:20px;
				text-transform:uppercase;
			}
			#quandvenir .contact a:hover { color:#1D3FA0; }

/*#endregion QUAND VENIR*/

/*#region QR*/

#qr { margin-top:80px; }

	#qr .bloc { 
		position:relative;
		margin:0px auto; 
		width:100%; max-width:1200px; 
		text-align:left;
	}

		#qr .titre {
			position:relative; display:inline-block;
			font-size:2.75rem; font-weight:bold; line-height:145%;
			width:auto;
			margin:0px 0px 50px auto; padding-left:20px;
			text-transform:uppercase;
			background:linear-gradient(to right, #E85A2C, #FF914D);
			background-clip:text; -webkit-background-clip:text;
			-webkit-text-fill-color:transparent;
			color:transparent;
		}
			#qr .titre::before {
				position:absolute; content:url(/images/accueil/qr-titre.png);
				top:75%; right:-160px;
				transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%);
				font-size:0;
			}

		#qr .contenu {
			border:solid 2px #92BAD6; border-radius:15px;
			padding:20px;
		}

			#qr .contenu .liste {}

				#qr .contenu .liste > div { padding-bottom:20px; }

					#qr .contenu .liste .question {
						font-size:1.875rem; font-weight:bold; color:#1D3FA0;
						text-transform:uppercase;
					}

					#qr .contenu .liste .reponse {
						font-size:1.25rem; font-weight:normal; color:#E85A2C;
						text-transform:uppercase;
					}

			#qr .contenu .autres { padding:30px 0px 0px; }

				#qr .contenu .autres .autrequestion {
					font-size:1.625rem; font-weight:bold; color:#1D3FA0;
					text-transform:uppercase;
					text-align:center;
				}

				#qr .contenu .autres .liens { 
					text-align:center; 
					padding:30px 0px 0px;
				}

					#qr .contenu .autres .liens a {
						font-size:1.5rem; color:white; 
						background-color:#E85A2C;
						padding:6px 20px 7px;
						border-radius:23px;
						text-transform:uppercase;
					}
					#qr .contenu .autres .liens a:hover { color:#1D3FA0; }
					#qr .contenu .autres .liens a:first-child { margin-right:50px; }

/*#endregion QR*/

/*#region AVIS*/

	#avis { 
		background-color:#F5F0E6; margin-top:70px; 
		text-align:center;
		padding:40px 20px 20px; 
	}

		#avis .titre { 
			padding:0px 0px 50px; 
			font-size:2.6875rem; font-weight:600; color:#1D3FA0;
			text-transform:uppercase;
			text-align:center;
		}

		#avis .bloc { margin:0px auto; width:100%; max-width:1200px; }

			#avis .bloc .liste { display:table; margin:0px auto; border-collapse:separate; border-spacing:83px 0px; }

				#avis .bloc .liste > div { 
					display:table-cell;
					vertical-align:top; 
					border:solid 2px black; border-radius:10px;
					width:302px; height:203px;
					background-color:white;
				}

/*#endregion AVIS*/

/*#region BAS*/

	#bas {
		margin-top:80px;
	}

/*#endregion BAS*/

/*#region RACCOURCIS*/

	#raccourcis { margin:120px auto 0px; text-align:center; }

		#raccourcis > ul { display:block; margin:0px auto; font-size:0px; }

		#raccourcis > ul > li { display:inline-block; padding:0px 6px; }

			#raccourcis > ul > li > a {
				position:relative; display:block;
				width:166px; height:163px;
				background-color:white; background-position:center center; background-repeat:no-repeat; background-size:115%;
				border:solid 2px #E85A2C;
				border-radius:50%;
				transition:all 0.5s;
			}

			#raccourcis > ul > li.restauration > a { background-image:url(/images/accueil/raccourcis-restauration.svg); }
			#raccourcis > ul > li.hotellerie   > a { background-image:url(/images/accueil/raccourcis-hotellerie.svg); }
			#raccourcis > ul > li.location     > a { background-image:url(/images/accueil/raccourcis-location.svg); }
			#raccourcis > ul > li.bar          > a { background-image:url(/images/accueil/raccourcis-bar.svg); }
			#raccourcis > ul > li.comptoir     > a { background-image:url(/images/accueil/raccourcis-comptoir.svg); }

			#raccourcis > ul > li > a:hover { background-color:#e4e9e5; }


				#raccourcis > ul > li > a::after {
					position:absolute; display:block; content:attr(title); z-index:-1;
					top:70%; left:50%;
					padding:10px 0px 0px;
					transform:translateX(-50%) scaleX(20%); -ms-transform:translateX(-50%) scaleX(20%); -webkit-transform:translateX(-50%) scaleX(20%); 
					font-size:1.5rem; font-weight:400; color:#528457;
					text-decoration:underline; white-space:nowrap;
					transition:all 0.5s;
				}

				#raccourcis > ul > li > a:hover::after { 
					top:calc(100%); 
					transform:translateX(-50%) scaleX(100%); -ms-transform:translateX(-50%) scaleX(100%); -webkit-transform:translateX(-50%) scaleX(100%); 
				}

/*#endregion RACCOURCIS*/

/*#region RESPONSIVE*/

@media all and (max-width:1300px) {

	#milieu > div#bandeaux .centres {
		width:calc(100% - 40px);
		margin:20px auto 0px;
	}

	#milieu > .blocslider { padding:0px 20px; }

	#quandvenir { padding:0px 20px; }

}

@media all and (max-width:1100px) {

	#restaurant .bloc > div.images { max-width:400px; }

}

@media all and (max-width:960px) {

	#jouerappent .img {
		width:100%; height:auto;
		aspect-ratio:420/397;
	}

	#quandvenir .quand .horaires { padding:30px 0px 50px; }

		#quandvenir .quand .horaires > div > div:first-child { padding-right:30px; }
		#quandvenir .quand .horaires > div > div:last-child { padding-left:30px; }

	#quandvenir .quand .horaires::before { 
		top:-10px; left:-75px;
		transform:scale(50%); -ms-transform:scale(50%); -webkit-transform:scale(50%);
	}

	#quandvenir .quand .horaires::after { 
		bottom:-10px; right:-68px;
		transform:scale(50%); -ms-transform:scale(50%); -webkit-transform:scale(50%);
	}

}

@media all and (max-width:880px) {

	#jouerappent .liens ul { margin:0px 40px 0px 100px; }

	#jouerappent .liens ul li:not(:last-child) { margin-bottom:50px; }

		#jouerappent .liens ul li a { font-size:2.0rem; }

	#jouerappent .liens ul li::before {
		left:-70px;
		transform:translateY(-50%) scale(50%); -ms-transform:translateY(-50%) scale(50%); -webkit-transform:translateY(-50%) scale(50%);
	}

}

@media all and (max-width:800px) {

	#milieu > div#bandeaux .centres {
		display:block;
		height:auto;
	}

		#milieu > div#bandeaux .centres > div {
			display:table;
			width:100%; max-width:645px; aspect-ratio:650/450;
			margin:0px auto;
			background-size:contain;
		}
		#milieu > div#bandeaux .centres > div:first-child { margin-bottom:20px; }

			#milieu > div#bandeaux .centres > div > div {
				display:table-cell;
				vertical-align:bottom;
			}

				#milieu > div#bandeaux .centres > div > div span { padding-bottom:10px; }

				#milieu > div#bandeaux .centres > div > div a {
					padding:8px 20px;
					min-width:210px; min-height:0px;
				}

}

@media all and (max-width:638px) {

	#restaurant .bloc { display:block; }

		#restaurant .bloc > div { display:block; text-align:center; width:100%; }

		#restaurant .bloc > div.images { width:100%; max-width:80%; margin:0px auto; padding-bottom:60px; }

		#restaurant .bloc > div.textes { padding-right:0px; }

			#restaurant .bloc .textes .texte { padding-bottom:20px; }

			#restaurant .bloc .textes .btn {
				position:absolute;
				bottom:0px; left:50%;
				transform:translateX(-50%); 
			}
				#restaurant .bloc .textes .btn a {
					padding:12px 20px;
					min-height:30px;
				}

	#quandvenir .quand .horaires { padding:80px 0px 60px; }

		#quandvenir .quand .horaires > div > div { display:block; width:100%; padding:0px 10px 20px!important; }

}

@media all and (max-width:580px) {

	#jouerappent .img {
		width:100%; height:190px;
		aspect-ratio:auto;
		background-size:cover;
	}

	#jouerappent .liens ul { margin:0px 10px 0px 80px; }

	#jouerappent .liens ul li:not(:last-child) { margin-bottom:40px; }

		#jouerappent .liens ul li a { font-size:1.625rem; }

}

@media all and (max-width:500px) {

	#milieu > div#bandeaux .centres > div > div span { font-size:1.5rem; }

}

/*#endregion RESPONSIVE*/
