@font-face {
	font-family: "ed-gothic";
	src: url('fonts/Ed-Gothic.otf') format("opentype");
}

@font-face {
	font-family: "avenir";
	src: url('fonts/Avenir/Avenir-Medium-09.ttf') format("truetype");
}

@font-face {
	font-family: "avenir-book";
	src: url('fonts/Avenir/Avenir-Book-01.ttf') format("truetype");
}

:root{
	--fond-color: #00B5EB;
	--red: #F90004;
	--green: #41934E;
	--footer-bg: #FFF;
	--footer-text: #000;
	--content-radius: 35px;
	--btn-radius: 20px;
	--input-radius: 5px;
}

*, *:before, *:after { box-sizing:border-box; -webkit-box-sizing:border-box; }
img { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

html, body{max-width: 100vw;min-height:100vh;height: 100%;}

html{
}

body {
	font-family:"ed-gothic";
	font-size: 33px;
	color: white;
	margin:0;
	padding:0;
	width:100%;
	height: auto;
	min-height:100vh;
	position:relative;
	background: url('imgs/fond.png?v3');
	background-color: var(--fond-color);
	background-position: top center;
	background-size: 1600px auto;
	background-repeat: no-repeat;
}
body.home{
	background: url('imgs/fond-home.png?v4');
	background-color: var(--fond-color);
	background-position: top center;
	background-size: 1600px auto;
	background-repeat: no-repeat;
}
#title, .offre h1{font-size: 70px; line-height: 100%; text-transform: uppercase;width: 100%; max-width: 521px;margin:0; padding: 0;margin-top: 3px;margin-left: 4px;}
h1{color: white; font-size: 70px;margin: 0; padding: 0;text-shadow: rgba(0,0,0,0.3) 3px 3px 5px;transition: font-size .3s ease;}
p{margin: 0; padding: 0;}

a { color:#006837; text-decoration:none; }
#content { max-width:941px; margin:0 auto; position:relative; z-index:200; text-align:center;display: flex; flex-direction: column; align-items: center;width: 100%;}
.content{
	display: flex;
	display:-webkit-flex;
	flex-direction: column;
	-webkit-flex-direction: column;
	align-items: center;
	-webkit-flex-align: center;
	min-height: -webkit-fill-available;
	position: relative;
	margin-top: -39px;
	width: 100%;
	max-width: 810px;
	transition: margin-bottom .3s ease, padding-bottom .3s ease;
}
.content > div[class*="-content"]{transition: margin-bottom .3s ease, padding-bottom .3s ease;box-shadow: rgba(0,0,0,0.3) 3px 3px 10px;}

.logo img{margin-top: 29px;transition: max-height .3s ease;}
.persos img{position: absolute;top: 10px;left: 50%;transform: translateX(-51.5%);width: 100%; max-width: 990px;transition: opacity .3s ease;}
.separator img{margin-top: 72px;transition: margin-top .3s ease;}
.offre{position: relative;margin-top: -29px;text-align: center;transition: margin-top .3s ease;}
.offre img{width: 100%; max-width: 941px;transition: max-width .3s ease;}
.offre h1{max-width: 100%;position: absolute; top: 28px; transform: rotateZ(-2.5deg);letter-spacing: 0.017em;margin-left: -2px;transition: top .3s ease;}
.offre span{font-size: 36px;text-shadow: rgba(0,0,0,0.3) 3px 3px 5px;position: relative;
	top: -22px;
	left: 10px;}
.offre img.custom{
	object-fit: cover;
}
.conditions{;position: absolute; left:50%; width: 1600px;transform: translateX(-50%);top:0}
.conditions p{font-family: 'avenir-book'; font-size: 14px; color: #000;transform: rotateZ(-90deg) translate(-109%, -419px);position: absolute;width: fit-content;white-space: nowrap; top:0; left: 0;}

.btn, input[type="submit"]{width: 100%; max-width:406px; height: 97px; background: var(--red);border-radius: var(--btn-radius); -webkit-border-radius: var(--btn-radius);position: relative;transition: transform .2s ease;color: #FFF; padding: 0;box-shadow: rgba(0,0,0,0.3) 3px 3px 5px;}
.btn:hover, input[type="submit"]:hover{color: #FFF;}
.btn:hover{transform: scale(1.1)}
.btn p{font-size: 73px;letter-spacing: 0.02em;}
.btn a{width: 100%; height: 100%;position: absolute;top: 0; left: 0;}

.footer{width: 100%;max-width: 1600px;margin: 0 auto;position: relative;}
.footer img{width: 100%;}
.footer .separator{width: 100%;height: 4px;background: var(--green);margin-top: -62px; position: absolute;z-index: 2; opacity: 1; transition: opacity .3s ease;}
.footer .text{background: var(--footer-bg);margin-top: -58px;padding-top:37px;padding-bottom: 12px}
.footer .text-content{display: flex;margin: 0 auto;width: 100%; max-width: 1200px;justify-content: space-between;}
.footer .text p, .footer .text a{font-family: 'avenir'; font-size: 19px; color: var(--footer-text);}
.footer .text p{text-transform: uppercase;margin-left: 29px;}
.footer .text p a{text-transform: lowercase;}
.footer .links{margin-right: 9px;display: flex; align-items: flex-start;width: 100%; max-width: 259px;justify-content: space-between;margin-top: 4px;}
.footer .links a{font-size: 12px;}

#myModal .modal-header{background: var(--fond-color);}
#myModal p{color: black;font-size: 17px; font-family: 'avenir'}
#myModal h5{color: #FFF;font-size: 28px;}
#myModal .modal-footer button{height: 30px;width: fit-content; padding: 0px 30px;}


/*
-----------------------------------
				Home
-----------------------------------
*/

.home .text1, .home .bouton, .home .image1{width: 100%; display: flex; justify-content: flex-end;}
.home .text1 h1{max-width: 381px;letter-spacing: 0.02em;font-size: 64px;line-height: 100%;letter-spacing: 0.035em;margin-right: 10px;margin-top: -13px;transition: margin-top .3s ease;}
.home .bouton{margin-top: 42px;padding-right: 10px;}
.home .image1{margin-top: 23px;margin-right: -54px;padding-left: 152px}
.home .coffret-lot{
	margin-right: -51px;
}


	/*
    -----------------------------------
                Formulaire
    -----------------------------------
    */
.form form{width: 100%;}
.form .content{margin-bottom: 20px;margin-top: 0}
.form .form-content{background: var(--red);border-radius: var(--content-radius);border: var(--green) 5px solid;width: 100%;padding-top: 10px;padding-bottom: 24px;}
.form .form-content > p{line-height: 1.2em;}
.form form > p{font-size: 33px;width: 100%;}
.form .fbloc{display: flex; flex-direction: column;width: 100%; max-width: 322px; margin: 0 auto;padding-top: 6px;margin-bottom: 6px;}
.form .fbloc p{font-size: 15px;margin-top: 5px;}
.check-bloc {display: flex;justify-content: flex-start;position: relative;max-width: 600px;margin: 0 auto;margin-top: 18px;}

/* Les composants */
input:not([type='submit']), select{width: 100%; max-width: 322px;height: 49px;box-shadow: inset 3px 3px 10px rgba(0,0,0,0.5);border: none; border-radius: var(--input-radius); -webkit-border-radius: var(--input-radius);text-align: center;font-family: 'Roboto'; font-size: 18px;font-weight: bold;color: var(--green);}
label{font-family: 'Roboto'; font-size: 14px; font-weight: bold;width: fit-content;margin-bottom: 5px;}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}
input[type=number] {-moz-appearance: textfield;}
.check-bloc input {padding: 0;height: initial;width: initial;margin-bottom: 0;display: none;cursor: pointer;margin-right: 10px;min-width: 20px;}
.check-bloc label{font-size: 26px;padding-left: 45px;font-family: 'ed-gothic';text-align: left;letter-spacing: 0.014em;}
.check-bloc label::after {width: 0px;height: 0px;transition: width 0.2s;top: 6px;left: 4px;transform: rotate(-45deg);background-color: var(--blue-text-color);}
.check-bloc label::before, .check-bloc label::after {content: '';position: absolute;}
.check-bloc label::before {width: 29px;height: 29px;background-color: white;top: 0;left: 0;box-shadow: inset 3px 3px 10px rgba(0,0,0,0.5);}
.check-bloc label::after {width: 0px;height: 0px;transition: width 0.2s;top: 6px;left: 4px;background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23F90004' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");}
.check-bloc input:checked + label::after {content: '';
	display: block;
	position: absolute;
	top: 3px;
	left: 5px;
	width: 22px;
	height: 22px;
	transform: rotate(-7deg);}
input[type="submit"]{margin-top: 51px;position: absolute; z-index: 3;font-family: 'ed-gothic'; font-size: 68px; color: white;left: 50%; transform: translateX(-50%);border: none;box-shadow: rgba(0,0,0,0.3) 3px 3px 5px;}
option{font-family: 'Roboto'; font-size: 14px; font-weight: bold; color: var(--green);}

/*
-----------------------------------
				Jeu
-----------------------------------
*/
.game .content{margin-top: 39px;position: relative;margin-bottom: 243px;}
.game .game-content{background: var(--red);border-radius: var(--content-radius);border: var(--green) 5px solid;width: 100%;padding-top: 40px;padding-bottom: 24px;}
.game #game{display: flex; justify-content: space-between;padding: 0 23px;margin-top: 58px;margin-bottom: 20px;}
.game #game .piece{position: relative;width: 232px;height: 232px; border-radius: 50%; -webkit-border-radius: 50%;background: white;display: flex; justify-content: center; align-items: center;transition: width .3s ease, height.3s ease;}
.game #game .piece img{position: absolute; left: 50%;top: 50%; transform: translate(-50%, -50%);max-width: 232px; max-height: 232px;transition: opacity .5s linear, width .3s ease, height.3s ease;}
.game #game .piece img:last-of-type{opacity: 0;}
.game #game .piece.show img:first-of-type{opacity: 0;}
.game #game .piece.show img:last-of-type{opacity: 1;}
.game .game-content > p{line-height: 1.2em; width: 80%;margin: 23px auto 0 auto;}

/*
-----------------------------------
				Win
-----------------------------------
*/

.win .content{ margin-top: 39px}
.win .win-content{background: var(--red);border-radius: var(--content-radius);border: var(--green) 5px solid;width: 100%;padding-top: 10px;padding-bottom: 24px;padding-left: 88px;position: relative;}
.win .win-content h2{margin-top: 36px;text-align: left;font-size: 53px;letter-spacing: -0.003em;margin-bottom: 5px;}
.win .win-content p{text-align: left;}
.win .win-content p:last-of-type{margin-top: 29px;line-height: 1.2em;}
.win form{margin-top: 30px;text-align: left;margin-bottom: 30px;}
.win .fbloc{text-align: left;}
.win form input[type='submit']{position: relative;background: var(--fond-color);font-size: 38px; max-width: 206px; height: 45px;left: 0; transform: unset;margin-top: 21px;border-radius: 10px;padding: 0;line-height: 1.0em;}
.win .win-content > img{position: absolute; right: -70px;bottom: 34px;}

/*
-----------------------------------
				Winner
-----------------------------------
*/
.winner .winner-content{background: var(--red);border-radius: var(--content-radius);border: var(--green) 5px solid;width: 100%;padding-top: 10px;padding-bottom: 24px;padding-left: 88px;position: relative;padding-bottom: 73px;margin-bottom: 281px;}
.winner .winner-content h2{margin-top: 36px;text-align: left;font-size: 53px;letter-spacing: -0.003em;margin-bottom: 5px;}
.winner .winner-content p{text-align: left;line-height: 1.2em;}
.winner .winner-content .text1{margin-top: 10px;}
.winner .winner-content .text2{margin-top: 32px;max-width: 468px;}
.winner .winner-content .text3{margin-top: 18px;line-height: 1.2em;}

.winner .winner-content > img{position: absolute; right: -109px;bottom: -70px;}
/*
-----------------------------------
				Lost
-----------------------------------
*/
.lost .content{ margin-top: 39px}
.lost .lost-content{margin-bottom: 281px;}
.lost .lost-content{background: var(--red);border-radius: var(--content-radius);border: var(--green) 5px solid;width: 100%;padding-top: 10px;padding-left: 88px;padding-bottom: 208px;position: relative;}
.lost .lost-content h2{margin-top: 36px;text-align: left;font-size: 53px;letter-spacing: -0.003em;margin-bottom: 5px;}
.lost .lost-content p{text-align: left;max-width: 312px;margin-top: 81px;line-height: 1.2em;}
.lost .lost-content > img{position: absolute; right: -20px; bottom: 0;}


.home .bouteille img{
	width: 100%;
	max-width: 900px;
	height: auto;
}
.home .qr-code{
	width: 40%;
	height: auto;
}
.home .coffret-lot{
	width: 80%;
	height: auto;
}
.content-home{
	display: flex;
	flex-direction: row;
	margin-top: 1px;
	max-width: 900px;
}
.offre-custom .h1-block{display: flex; justify-content: center; max-width: 650px;align-items: center; margin: 0 auto}
.content-home .coffre-qrcode{display: none}
.content-home .coffre-qrcode{display: flex; width: 50%}
.offre-custom h1{font-size: 42px; line-height: 100%; text-transform: uppercase;width: auto; max-width: inherit;margin:0; padding: 0;margin-top: 3px;margin-left: 4px; }
.home .text1 h1{
	font-size: 50px;
	margin-top: 0;
	margin-bottom: 10px;
}
.home .text1{
	margin-top: -14px;
}
.home .bouton{
	margin-top: 0;
}
.separator{
	margin-top: -30px;
}
.offre.offre-custom{
	display: flex;
	flex-direction: column;
}

.image-coffret {
	max-width: 57%;
}

.image-qrcode{
	max-width: 38%;
}
.image-coffret img{
	width: 100%;
	height: auto;
}

.image-qrcode img{
	width: 100%;
	height: auto;
}

@media (max-width: 1600px) {
	.footer .separator{opacity: 0;}
	.conditions{width: 100%;top: unset; bottom: 0;background: white;position: absolute;}
	.conditions p{transform: unset;white-space: unset;position: relative;}
	input[type="submit"]{position: relative;left: 0; transform: unset;}
}

@media (max-width: 1024px) {
	.logo img{max-height: 180px;}
	.persos img{opacity: 0}
	.separator img{margin-top: 0px;}
}

@media (max-width: 941px) {
	.home .bouteille{
		padding-left: 10px;
		padding-right: 10px;
	}
	.home .coffret-lot{
		width: 50%;
	}
	.home .coffret-lot{
		margin-right: 0;
	}
	.home .qr-code{
		width: 30%;
		height: auto;
	}
	.offre img{max-width: 800px;}
	.offre h1{font-size: 50px!important;}

	.offre-custom h1{
		font-size: 42px !important;
	}
	.home .text1 h1{margin-top: 0;}
	.offre span{display: none;}
	.game #game .piece{width: 180px; height: 180px;}
	.game #game .piece img{max-width: 90%; max-height: 90%;object-fit: contain;}
	.win form{text-align: center}
	.win .fbloc{text-align: center;margin: 0 auto;}
	.lost .lost-content > img, .winner .winner-content > img,.win .win-content > img{position: relative; right: 0px;bottom: 20px;max-width: 50%;margin-top: 20px;}
	.lost .lost-content, .winner .winner-content,.win .win-content{padding: 0!important;}
	.lost .lost-content h2, .winner .winner-content h2,.win .win-content h2{text-align: center;}
	.lost .lost-content p, .winner .winner-content p,.win .win-content p{max-width: 100%;text-align: center;}
	.winner .winner-content, .lost .lost-content{margin-bottom: 20px;}
	.winner .winner-content .text2{margin-left: auto; margin-right: auto;}

}

@media (max-width: 800px) {
	.content{margin-top: 0!important; margin-bottom: 20px !important;padding-left: 15px; padding-right: 15px;}
	h1{font-size: 50px!important;margin-left: 0!important; margin-right: 0!important;}
	img{width: 100%;}
	.logo img{width: unset;}

	.home .image1{margin-right: 0;}
	.home .image1{width: 90%;}
	.offre{margin-top: 0;}
	.offre img{max-width: 600px;}
	.offre h1{font-size: 35px!important;}
	.btn, input[type="submit"]{
		max-width: 357px;
	}
}

@media (max-width: 680px) {

	.offre h1{font-size: 5vw!important;}
	.game #game .piece{width: 120px; height: 120px;}
}

@media (max-width: 480px) {
	.content-home{
		flex-direction: column;
	}
	.content-home .coffre-qrcode{
		width: 100%;
	}
	.home .image1{padding-left: 15%}
	body{background-position: top center;background-size: cover;}
	p{font-size: 20px;padding-left: 15px;padding-right: 15px;}
	h1{font-size: 35px!important;}
	.form .fbloc, .check-bloc,.win .fbloc{width: 90%;}
	.check-bloc label{font-size: 14px;}
	.logo img{max-height: 150px;}
	.btn,input[type="submit"]{max-width: 80%;height: max-content; padding: 10px 20px;}
	input[type="submit"]{font-size: 35px;}
	.btn p{font-size: 35px;}
	.game #game{flex-direction: column; align-items: center;}
	.game #game .piece{margin-bottom: 20px;}
	.game .game-content > p{width: 95%;}
	.lost .lost-content p, .winner .winner-content p,.win .win-content p{margin-top: 20px;}

	.footer .text-content{flex-direction: column;}
	.footer .text p{font-size: 12px;text-align: center;margin-top: 20px;}
	.footer .links{flex-direction: column;align-items: center;max-width: 100%;}
}
@media (max-width: 412px) {
	.offre h1{
		margin-top: -10px;
	}
}