/**********
 * FONT *
 *********/



/**********
 * GLOBAL *
 *********/

:root {
	--primary-color: #FFF;
	--secondary-color: #FFEC00;
}

html{
	margin: 0px;
	padding: 0px;
	color: var(--primary-color);
	font-size: 12px;
	border: 0px solid transparent;
	font-family: 'Josefin Sans', Arial, sans-serif;
	background: #000;
}
body{
	margin: 0px;
	padding: 0px;
	width: 100%;
}

* {
	margin:0;
	padding:0;
}

a{ 
	outline: none;
	text-decoration: none;
	cursor: pointer;
	color: inherit;
}
img {
	border: none; 
	max-width: 100%;
}
.pure-g [class*="pure-u"] {
	font-family: 'Josefin Sans', Arial, sans-serif;
}
ul{	list-style-type: none; }
.italic { font-style: italic; }

h1{
	font-family: 'Josefin Sans','Arial',sans-serif;
	font-size: 50px;
	text-transform: uppercase;
	padding-bottom: 15px;
	font-weight: 400;
	margin: 0px;
}
p{
	font-family: 'Josefin Sans','Arial',sans-serif;
	font-size: 16px;
	line-height: 22px;
}

.btn{
	font-family: 'Josefin Sans','Arial',sans-serif;
	display: inline-flex;
	font-size: 15px;
	color: #FFF;
	border: solid 1px var(--secondary-color);
	padding: 0px 15px;
	font-weight: 700;
	border-radius: 60px;
	text-transform: uppercase;
	padding: 10px 25px;
	letter-spacing: 2px;
	-webkit-transition: background 0.2s ease-out;
	-moz-transition: background 0.2s ease-out;
	-o-transition: background 0.2s ease-out;
	transition: background 0.2s ease-out;		
}
.btn:hover{
	background: var(--secondary-color);
	color: #000;
	-webkit-transition: background 0.3s ease-in-out!important;
	-moz-transition: background 0.3s ease-in-out!important;
	-o-transition: background 0.3s ease-in-out!important;
	transition: background 0.3s ease-in-out!important;	
}
.btn.min{
	font-size: 16px;
	padding: 0px 15px;
	height: 35px;
	line-height: 35px;
}
.btn.bis{
	font-size: 18px;
	color: var(--primary-color);
}


/**********
 * RTOTOP *
 *********/

#returnOnTop {
	bottom: 5%;
	cursor: pointer;
	display: none;
	position: fixed;
	right: .55%;
	width: 60px;
	height: 60px;
	background: #000;
	border-radius: 60px;
	text-align: center;
	font-size: 3em;
	color: #FFF;
	line-height: 60px;
	z-index: 9999;
	color: var(--secondary-color);
}
#returnOnTop:hover {

}

/**********
 * FOCUS *
 *********/

:focus {
	outline:none;
}
::-moz-focus-inner {
	border:0;
}
::-moz-selection { 
	color: #000; 
	background: var(--primary-color); 
}
::selection  { 
	color: #000; 
	background: var(--primary-color); 
}

/**********
 * PLACEHOLDER *
 *********/

 /* WebKit, Blink, Edge */
::-webkit-input-placeholder {
	color: rgba(253, 63, 146, 0.2);	
}
/* Mozilla Firefox 4 to 18 */
:-moz-placeholder { 
	color: rgba(253, 63, 146, 0.2);	
	opacity:  1;
}
/* Mozilla Firefox 19+ */
::-moz-placeholder { 
	color: rgba(253, 63, 146, 0.2);	
	opacity:  1;
}
/* Internet Explorer 10-11 */
:-ms-input-placeholder { 
	color: rgba(253, 63, 146, 0.2);	
}
:placeholder-shown {
	color: rgba(253, 63, 146, 0.2);	
}

/**********
 * STANDARD *
 *********/

button:focus { outline: none !important; box-shadow: none !important; }

.alc{ text-align: center!important; }
.alr{ text-align: right!important; }
.all{ text-align: left!important; }
.prel { position: relative; }
.absolute{ position: absolute; }
.height100{ height: 100%; }
.ovhid{ overflow: hidden; }
.din{ display: none; }
.dib{ display: block!important; }
.dinb{ display: inline-block!important; }
.dit{ display: table!important; }
.m0auto { margin: 0 auto; }
.mauto { margin: auto; }
.pt5 {	padding-top: 5px;}
.pt10 {	padding-top: 10px;}
.pt15 {	padding-top: 15px;}
.pt20 {	padding-top: 20px;}
.pt25 {	padding-top: 25px;}
.pt30 {	padding-top: 30px;}
.pt50 {	padding-top: 50px;}
.pt70 {	padding-top: 70px;}
.pt90 {	padding-top: 90px;}
.pt100 { padding-top: 100px;}
.pb10 {	padding-bottom: 10px;}
.pb25 {	padding-bottom: 25px;}
.pb50 {	padding-bottom: 50px; }
.pb75 {	padding-bottom: 75px; }
.pl10 { padding-left: 10px; }
.plr10 { padding: 0 10px; }
.plr15 { padding: 0 15px; }
.plr30 { padding: 0 30px; }
.plr25 { padding: 0 25px; }
.plr50 { padding: 0 50px; }
.ptb10 { padding: 10px 0; }
.ptb15 { padding: 15px 0; }
.ptb25 { padding: 25px 0; }
.ptb30 { padding: 30px 0; }
.ptb20 { padding: 20px 0; }
.ptb25 { padding: 25px 0; }
.ptb50 { padding: 50px 0; }
.ptb50lr25 { padding: 50px 25px; }
.ptb70 { padding: 70px 0; }
.ptb100 { padding: 100px 0; }
.ptb200 { padding: 200px 0; }
.pb20{ padding: 0 0 20px 0; }
.pb30{ padding: 0 0 30px 0; }
.pb50{ padding: 0 0 50px 0; }
.mt25 { margin: 25px 0 0 0; }
.mt30 { margin: 30px 0 0 0; }
.mt50 { margin: 50px 0 0 0; }
.mt100 { margin: 100px 0 0 0; }
.mtb25 { margin: 20px 0!important; }
.mb10{ margin-bottom: 10px!important;}
.mb20{ margin-bottom: 20px!important;}
.mtb25auto { margin: 25px auto; }
.pad5{ padding: 5px; }
.pad10{ padding: 10px; }
.pad15{ padding: 15px; }
.pad20{ padding: 20px; }
.padL10{ padding: 0 0 0 10px; }
.padT10{ padding: 10px 0 0 0; }
.padT30{ padding: 30px 0 0 0; }
.pad25{	padding: 25px; }
.pad30 { padding: 30px; }
.pad50 { padding: 50px; }
.pad60 { padding: 60px; }
.pad70 { padding: 70px; }
.pad80 { padding: 80px; }
.pOption{ padding: 20px 10px 10px 0px; }
.pad50NoTop { padding: 0 50px 50px 50px; }
.pad50NoTopRight { padding: 0 0 50px 50px; }
.is-hidden{display: none;}
.w50{ width: 50%!important; }
.w90{ width: 90%!important; }
.w100{ width: 100%!important; }
.h100{ height: 100%!important; }
.mw900{ max-width: 900px; }
.mw500{ max-width: 500px; }
.m-2 {  margin:.5rem!important }
.fin{ clear:both; line-height:0; height:0; font-size:1px; }
.br10{ border-radius: 10px; }
.br20{ border-radius: 20px; }
.c-white{ color: #FFF!important; }
.c-primary{ color: var(--primary-color)!important; }
.c-secondary{ color: var(--secondary-color)!important; }
.c-global{ color: var(--global-background-color)!important; }
.bg-black{ background-color: rgba(0,0,0,0.8)!important; }
.bg-white{ background-color: #FFF!important; }
.bg-primary{ background-color: var(--primary-color)!important; }
.bg-secondary{ background-color: var(--secondary-color)!important; }
.bg-tertiary{ background-color: var(--tertiary-color)!important; }
.bg-global{ background-color: var(--global-background-color)!important; }
.bg-blur{ 
	background:none!important;
	-webkit-backdrop-filter: blur(10px);
	-moz-backdrop-filter: blur(10px);	
	backdrop-filter: blur(10px); 
}
.mar0auto{ margin: 0 auto!important;}
.mar0autoSpec{ margin: 5px auto 20px auto!important;}
.maxW450{ max-width: 450px;}
.bold { font-weight: 700!important; }

input[type="text"]:-moz-read-only,
textarea:-moz-read-only,
input[type="text"]:read-only,
textarea:read-only {
	background: var(--secondary-background-color)!important;
	color: var(--global-title-color);
}

.content_max_width {
	max-width: 1280px;
	margin: 0 auto;
	position: relative;
	z-index: 10;
	overflow: hidden;
}

.mw800{
	max-width: 800px;
}

/**********
 * SWAL *
 *********/

#strErreur, 
#strInfo,
#strValide,
#strLink{ display: none; }

/**********
 * FLEX *
 *********/

.flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex!important;
}
.flex.sb {
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
.flex.sa {
	-ms-flex-pack: distribute;
	justify-content: space-around;
}
.flex.start {
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start; 
}
.flex.end {
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end; 
}
.flex.jcc {
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
.flex.jcb {
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
.flex.ac {
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
.flex.aend {
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: end;
}
.flex.col { 
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column; 
}
.acc {
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
.ast {
	-webkit-box-align: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
}
.as {
	-ms-flex-item-align: start;
	-ms-grid-row-align: start;
	align-self: flex-start;
}
.ac {
	-ms-flex-item-align: center;
	-ms-grid-row-align: center;
	align-self: center;
}
.ae {
	-ms-flex-item-align: end;
	-ms-grid-row-align: end;
	align-self: flex-end;
}
.wrap {
	-ms-flex-wrap: wrap;
		flex-wrap: wrap;
}
.flex-1-1-0{
	flex: 1 1 0;
}
.fb33{ flex-basis: 33.33333333333333333%; }
.fb70{flex-basis: 70%}
.fb30{flex-basis: 30%}
.fb100{ flex-basis: 100%; }
.fb50{ flex-basis: 50%; }
.fg1{ flex-grow: 1; }

form fieldset{
	padding: 10px;
	border: none;
	display: block;
}	
form label{
	font-family: 'Josefin Sans','Arial',sans-serif;
	color: var(--secondary-color);
	font-size: 20px;
	font-weight: 500;
	padding-bottom: 5px;
	display: block;
	white-space: nowrap;
}
input.std,
select.std{
	background: #FFF;
	border: none;
	display: block;
	width: 100%;
	height: 35px;	
	text-indent: 10px;
}
select.std{
	background: #000;
	color: #FFF;
	border: solid 1px var(--secondary-color);
	font-family: 'Josefin Sans','Arial',sans-serif;
	font-size: 15px;
	border-radius: 60px;
	font-size: 15px;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-weight: 700;
	padding: 0 15px;
	text-indent: 0px;
	width: auto;
}
form input[type="submit"].std{
	cursor: pointer;
	text-align: center;
	background: var(--secondary-color);
	font-size: 20px;
	font-family: 'Josefin Sans','Arial',sans-serif;
	padding: 0 20px;
	color: var(--primary-color);
	font-weight: 500;
}

/**********
 * CSS *
 *********/

nav{
	padding: 20px 0;
}
nav a{
	font-family: 'Josefin Sans','Arial',sans-serif;
	display: inline-flex;
	margin: 0 20px;
	font-weight: 300;
	font-size: 20px;	
	padding-bottom: 10px;
	color: var(--primary-color);
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;		
}
nav a:hover, 
nav a.sel{
	color: var(--secondary-color);
	font-weight: 700;
	-webkit-transition: all 0.3s ease-in-out!important;
	-moz-transition: all 0.3s ease-in-out!important;
	-o-transition: all 0.3s ease-in-out!important;
	transition: all 0.3s ease-in-out!important;
}

.carte-categorie{
	padding: 50px
}
.carte-categorie li{
	padding: 15px 15px 15px 25px;
	border-bottom: solid 1px #FFF;
	font-size: 17px;
	font-weight: 300;
	text-transform: uppercase;
}
.carte-categorie li a.active{
	font-weight: 700;
	color: var(--secondary-color);
}
.carte-categorie li:nth-child(4n+1) {
    background: url('/imgs/picto-1.png') left center no-repeat;
}
.carte-categorie li:nth-child(4n+2) {
    background: url('/imgs/picto-2.png') left center no-repeat;
}
.carte-categorie li:nth-child(4n+3) {
    background: url('/imgs/picto-3.png') left center no-repeat;
}
.carte-categorie li:nth-child(4n+0) {
    background: url('/imgs/picto-4.png') left center no-repeat;
}

.header-area{
	padding: 30px 0;
	position: relative;
	z-index: 10;
}

h2.carte{
	font-size: 36px;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 400;
}
strong.carte{
	display: inline-block;
	font-family: 'Angelface','Arial','sans-serif';
	font-size: 34px;
	transform: skewX(15deg);
	letter-spacing: -1px;
	padding-top: 5px;
}

.item-title{
	color: var(--secondary-color);
	font-size: 17px;
	font-weight: 400;
	padding-bottom: 5px;
}
.item-text{
	font-weight: 300;
}
.item-price{
	color: var(--secondary-color);
	font-size: 17px;
	font-weight: 400;
	padding-left: 5px;
}

.loc{
	font-size: 17px;
	font-weight: 300;
}
.loc i{
	display: inline-block;
	margin-right: 10px;
	font-size: 30px;
}
.loc2{
	font-size: 17px;
	font-weight: 300;
}
.loc2 span{
	font-size: 18px;
	font-weight: 600;
	color: #E03714;
}

.map{
	margin-top: 20px;
}

/**********************/

footer{
	margin: 0 auto;
	max-width: 1280px;
}
.footer-bg{
	background: url('/imgs/bg-bot.jpg') center top no-repeat;
	min-height: 370px;
	padding-top: 45px;
	border-top: solid 1px #FFF;
}
footer a{
	font-size: 14px;
	font-weight: 700;
}
footer .bot{
	padding: 30px 0;
}

strong.bot-1{
	font-size: 20px;
	padding-left: 150px;
	display: inline-block;
	text-transform: uppercase;
	font-weight: 300;
	padding-top: 50px;
}
strong.bot-2{
	font-size: 20px;
	display: inline-block;
	font-weight: 300;
	text-transform: uppercase;
	padding-top: 50px;
}
strong.bot-2 span{
	display: inline-block;
	padding-top: 5px;
}

.logo{
	width: 100%;
}
.logo a{
	display: block;
	margin-left: 25px;
}

.backHome{
	background: url('/imgs/back-home.png') calc(100% - 50px) center no-repeat;
}

.liste-insta{
	background: url('/imgs/bg-insta.jpg') 50px center no-repeat;
	padding: 50px 0 50px 550px;
}
.liste-insta a{
	width: 150px;
	height: 150px;
	display: block;
	overflow: hidden;
	position: relative;
}
.liste-insta video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reseaux-pad{
	padding-right: 50px;
	position: relative;
	max-width: 1280px;
	margin: 0 auto;
}
.reseaux-cont{
	background: #000;
	position: absolute;
	right: 0px;
	top: 0;
	width: 30px;
	height: 100%;
	text-align: center;
	z-index: 9999;
}
.reseaux-cont-icon{
	background: #000;
	width: 30px;
	position: fixed;
	top: 20vh;
	padding: 5px 0;
}
.reseaux-cont-icon a{
	display: block;
	font-size: 30px;
	margin: 5px 0;
}
.reseaux-cont::before{
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%; 
    background-color: #FFF;
    transform: translateX(-50%); 
	z-index: -1;
}

.font-effect{
	color: #000;
	letter-spacing: 10px;
	text-shadow: 
    1px 1px 0 white, 
   -1px 1px 0 white, 
    1px -1px 0 white, 
   -1px -1px 0 white,
    2px 0 0 white, 
   -2px 0 0 white, 
    0 2px 0 white, 
    0 -2px 0 white,
    1px 0 0 white, 
   -1px 0 0 white, 
    0 1px 0 white, 
    0 -1px 0 white;
}

.font-effect-bis{
	color: #000;
	letter-spacing: 3px;
	text-shadow: 
    1px 1px 0 var(--secondary-color), 
   -1px 1px 0 var(--secondary-color), 
    1px -1px 0 var(--secondary-color), 
   -1px -1px 0 var(--secondary-color), 
    2px 0 0 var(--secondary-color), 
   -2px 0 0 var(--secondary-color), 
    0 2px 0 var(--secondary-color), 
    0 -2px 0 var(--secondary-color), 
    1px 0 0 var(--secondary-color), 
   -1px 0 0 var(--secondary-color), 
    0 1px 0 var(--secondary-color), 
    0 -1px 0 var(--secondary-color);
}

.font-piratte{
	font-family: 'Angelface','Arial','sans-serif';
	text-transform: none;
}
h1.home{
	border-bottom: solid 1px #FFF;
	padding-bottom: 30px;
	padding-left: 10px;
	display: inline-block;
}
h1 .font-piratte{
	font-size: 96px;
	line-height: 60px;
	display: inline-block;
	letter-spacing: 1px;
}
h2.home{
	font-size: 22px;
	font-weight: 300;
	line-height: 26px;
}

.home-icone{
	text-align: center;
}
.home-icone img{
	display: inline-block;
	margin-left: 15vw;
}

.bg-carte{
	background: url('/imgs/bg-carte.jpg') no-repeat center / cover;
	height: 320px;
}

h1.carte{
	text-align: right;
	font-size: 43px;
	font-weight: 300;
}

.bg-contact{
	background: url('/imgs/bg-contact.jpg') no-repeat center / 100%;
	height: 400px;
	max-width: 995px;
	margin: 30px auto;
}

strong.contact{
	font-size: 20px;
	display: block;
	width: 100%;
}
a.a-contact{
	font-size: 37px;
	color: var(--secondary-color);
	display: block;
	width: 100%;
}
a.a-contact.min{
	font-size: 22px;
}

ul.rgpd li strong{
	padding: 30px 0 10px 0;
  	display: inline-block;
}

/*************
* QR CODE *
*************/

.sidenav {
	height: 100%; 
	width: 0; 
	position: fixed; 
	z-index: 1;
	top: 0;
	left: 0;
	overflow-x: hidden;
	padding-top: 50px;
	transition: 0.5s;
	background: var(--secondary-color) url('/imgs/icone-poolette.png') no-repeat center calc(100% - 60px) / 40%;
}
.sidenav a {
	padding: 10px 5px 10px 20px;
	text-decoration: none;
	font-size: 22px;
	color: #000;
	display: block;
	transition: 0.3s;
}
.sidenav a.sel{
	background: #000;
	color: var(--secondary-color);
}
.sidenav a:hover, .offcanvas a:focus{
	color: #FFF;
}

nav.topnav{
	position: fixed;
	width: 100%;
	padding: 20px 0;
	max-width: 1280px;
	background: #000 url('/imgs/back-qrcode.png') no-repeat center / cover;
}
nav a span{
	padding: 0 0 0 15px;
	font-size: 30px;
	font-weight: 700;
	color: var(--secondary-color);
}
.sidenav .closebtn {
	position: absolute;
	top: 10px;
	right: 20px;
	font-size: 40px;
	border: none;
	padding: 0px;
}

.qrcodePad{
	padding: 0 10px 0 30px;
}

/*************
* RESPONSIVE *
*************/

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

/* Styles pour les tablettes en paysage */
@media screen and (max-width: 1024px) {

}

/* Styles pour les tablettes en portrait */
@media screen and (max-width: 768px) {
	nav a{
		font-size: 18px;
		padding: 0px;
		margin: 0 5px;
		text-align: center;
	}

	h1{
		font-size: 34px;
	}

	h1 .font-piratte{
		font-size: 86px;
	}

	.btn{
		font-size: 14px;
		padding: 10px 15px;
	}

	.btn.qrcode{
		font-size: 18px;
		width: 80%;	
		margin: 0 auto;
		padding: 15px 20px;		
		text-align: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;		
	}

	.bloc-quote::before{
		font-size: 200px;
		left: -30px;
		top: -35px;
	}

	.loc{
		padding-left: 10px;
	}
	.loc i{
		font-size: 10px;
		margin-right: 2.5px;
	}
	.loc, .loc2{
		font-size: 12px;
	}
	.loc2{
		text-align: right;
		padding-right: 20px;
	}
	.loc2 span{
		font-size: 14px;
	}

  	.img-2{
		opacity: 0.2;
  	}

	.header-area{
		padding: 15px 0;
	}

	.logo{
		text-align: center;
	}

	.backHome{
		background: url('/imgs/back-home.png') center no-repeat;
	}

	.ptb50{
		padding-top: 25px;
		padding-bottom: 25px;
		padding-left: 15px;
		padding-right: 15px;
	}

	h2.home{
		padding-top: 25px;
		padding-bottom: 25px;
		padding-left: 15px;
		padding-right: 15px;	
	}

	.bloc-2 .pad{
		padding-left: 40px;		
		padding-right: 45px;		
	}

	.plr50{
		padding: 0 25px;
	}

	.mentions div.pad10.alr{
		text-align: left!important;
	}

	.home-btn{
		display: flex;
		justify-content:center;
	}

	.home-icone{
		position: initial;
		text-align: center;
		margin-top: 30px;
	}
	
	footer a{
		flex-basis: 100%;
		text-align: center;
		padding: 10px 0;
	}

	.btn.bis{
		font-size: 16px;
	}

	.part-2 .bloc-1 .bot strong{
		padding-bottom: 20px;
	}

	.pad50{
		padding: 30px;
	}

	.part-2 .bloc-1{
		background: rgba(255,249,214,0.8);
	}

	.alc-resp{ text-align: center; }
	.alr-resp{ text-align: center!important; }

	.part-2 .bloc-1{
		padding: 35px;
	}

	a.connexion{
		font-size: 14px;
		right: 10px;
		height: 40px;
		line-height: 40px;
	}

	strong.bot-1{
		padding-left: 0px;
	}

	.reseaux-pad{
		padding-right: 20px;
	}

	.ptb50lr25{
		padding: 25px;
	}

	h1.carte{
		padding: 15px;
		font-size: 38px;
	}

	strong.carte{
		font-size: 26px;
	}

	.bg-contact{
		height: auto;
		background: url('/imgs/bg-contact-2.jpg') no-repeat center top / 100%;	
		margin: 15px auto;		
	}

	.contact.mt30{
		margin-top: 280px;
	}

	strong.bot-2 span{
		font-size: 16px;
	}

	.resp-1.ac{
		-webkit-box-align: start;
		-ms-flex-align: start;
		align-items: start;
	}

	.bg-carte{
		display: none;
	}

	.carte-categorie{
		padding: 25px;
	}

	.liste-insta{
		background-size: contain;
		background-position: center top;
		padding: 200px 0 0 0;
	}

	.liste-insta a{
		width: 100%;
		margin-bottom: 5px;
	}
}


/* Styles pour les grands téléphones (type iPhone Plus, Galaxy Note) */
@media screen and (max-width: 568px){

}


/*********
 * POPUP *
 ********/

.popup-event{
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10000;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	padding: 30px;
}
.popup-event[hidden]{
	display: none;
}

.popup-event-fond{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.85);
	opacity: 0;
	-webkit-transition: opacity 0.3s ease-out;
	-o-transition: opacity 0.3s ease-out;
	transition: opacity 0.3s ease-out;
}
.popup-event.ouvert .popup-event-fond{
	opacity: 1;
}

.popup-event-boite{
	position: relative;
	width: 100%;
	max-width: 860px;
	max-height: 92vh;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	overflow: hidden;
	background: #000;
	border-radius: 4px;
	-webkit-box-shadow: 0 25px 60px rgba(0,0,0,0.6);
	box-shadow: 0 25px 60px rgba(0,0,0,0.6);
	opacity: 0;
	-webkit-transform: translateY(12px) scale(0.98);
	-ms-transform: translateY(12px) scale(0.98);
	transform: translateY(12px) scale(0.98);
	-webkit-transition: opacity 0.3s ease-out, -webkit-transform 0.3s ease-out;
	-o-transition: opacity 0.3s ease-out, transform 0.3s ease-out;
	transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
.popup-event.ouvert .popup-event-boite{
	opacity: 1;
	-webkit-transform: none;
	-ms-transform: none;
	transform: none;
}

.popup-event-boite img{
	display: block;
	width: 100%;
	height: auto;
	max-height: 68vh;
	-o-object-fit: contain;
	object-fit: contain;
}

.popup-event-fermer{
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	background: #000;
	color: #FFF;
	font-size: 18px;
	line-height: 1;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-transition: background 0.2s ease-out, color 0.2s ease-out;
	-o-transition: background 0.2s ease-out, color 0.2s ease-out;
	transition: background 0.2s ease-out, color 0.2s ease-out;
}
.popup-event-fermer:hover{
	background: var(--secondary-color);
	color: #000;
}

.popup-event-cta{
	padding: 22px 20px 26px;
	text-align: center;
}
.popup-event-cta .btn{
	background: var(--secondary-color);
	border-color: var(--secondary-color);
	color: #000;
}
.popup-event-cta .btn:hover{
	background: transparent;
	color: var(--secondary-color);
}

body.popup-ouvert{
	overflow: hidden;
}

@media screen and (max-width: 880px){

	.popup-event{
		padding: 15px;
	}

	.popup-event-boite img{
		max-height: 58vh;
	}

	.popup-event-fermer{
		top: 8px;
		right: 8px;
		width: 34px;
		height: 34px;
		font-size: 16px;
	}

	.popup-event-cta{
		padding: 18px 15px 20px;
	}
}

@media (prefers-reduced-motion: reduce){

	.popup-event-fond,
	.popup-event-boite{
		-webkit-transition: none;
		-o-transition: none;
		transition: none;
	}
}