@charset "UTF-8";
/* CSS Document */
/* ©pascale moise v1 aout 2025 */
/*     pascalemoise.com       */

.vinylcuts {
	font-family: 'VinylCuts';
}

/*------------------------- VIDEO  ---------------------*/
body.countdown section.video {
	position: absolute;
	display: block;
	width: 100vw;
	height: calc(100% - 180px);
	overflow: hidden;
	background: url(../img/poster_hero_desktop_countdown.jpg)no-repeat center center;
	background-size: cover;
}


body.countdown section.video  video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  height: 100%;
  transform: translate(-50%,  -50%);
  object-fit: cover;
}


@media (orientation:portrait) {
	body.countdown section.video  {
		background-image: url(../img/poster_hero_mobile.jpg);
	}
	body.countdown section.video video {
	  height: 100%;
	  transform: translate(-50%,  -50%);
	}
}
body.countdown section.video button.sound {
	right: 3vw;
	top: 3vw;
	z-index: 99;
}
body.countdown section.video div.infosound {
	position: absolute;
	right: 4vw;
	top: 10vw;
	width: 180px;
	text-align: right;
	padding-right: 30px;
}
body.countdown section.video div.infosound span {
	color: #fff;
	line-height:1.25rem;
}

@keyframes wiggle-arrow {
  0%   { transform: rotate(-90deg) translateX(0px); }
  50%  { transform: rotate(-90deg) translateX(10px); }
  100% { transform: rotate(-90deg) translateX(0px); }
}

body.countdown section.video div.infosound::before {
	content: ' ';
	position: absolute;
	right: -10px;
	top: 10px;
	display: inline-block;
	width: 40px;
	height: 20px;
	background: url(../img/arrow.svg)no-repeat center center;
	background-size: contain;
	animation: wiggle-arrow 1s ease-in-out infinite;
}
@media (orientation:portrait) {
	body.countdown section.video div.infosound {
		right: 2vh;
		top: 7vh;
	}
}


/*------------------------- COUNTDOWN  ---------------------*/


body.countdown main {
	position: absolute;
	top: 0;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
}

body.countdown #countdown {
	width: 100%;
	height: auto;
	text-align: center;
	font-size: 16vw;
	color: #fff;
	font-weight: 600;
	display: flex;
	justify-content:space-around;
	align-items:center;
	flex-wrap: wrap;
}
body.countdown #countdown div.dday {
	color: #fff;
	font-size: 30px;
}
body.countdown #countdown div.dday span{
	font-size: 12vw;
}
body.countdown #countdown div span {
	color: #fff;
	display: block;
}
body.countdown #countdown div span.amount {
	font-weight: 600;
	font-size: 60px;
	width: 100px;
}
body.countdown #countdown div span.label {
	font-weight: 300;
	font-size: .85rem;
}
body.countdown #countdown div.days  {
	width: 100%;
}
body.countdown #countdown div.days span.amount {
	font-size: 200px;
	width: 100%;
	line-height: 200px;
}


/*------------------------- footer  ---------------------*/
body.countdown main div.wrapper {
	width: 700px;
	max-width: 100%;
}
body.countdown main > div.wrapper {
	height: calc(100% - 180px);
	display: flex;
	justify-content:center;
	align-items: center;
}

body.countdown #leads {
	position: absolute;
	bottom: 0;
	height: auto;
	width: 100%;
	background: var(--jaune);
	text-align: center;
	transition: max-height .5s ease-in-out 0s;
	margin-bottom: -30px;
}

body.countdown #leads form {
	padding: 0;
}
body.countdown #leads fieldset {
	padding: 0;
	width: 100%;
	max-width: 100%;
	margin: auto;
}
body.countdown #leads form.leads input {
	font-size: min(3.5vw, 1rem);
}

body.countdown #leads form.leads input[type=email],body.countdown #leads form.leads input[type=email]:focus {
	outline: 10px solid var(--jaune);
	border: 1px solid #fff;
	outline-offset: 0;
	padding-left: min(2vw, 30px);
}
body.countdown #leads form.leads input[type=submit]:disabled {
	opacity: .6;
}

/*
body.countdown #leads h1 {
	display: inline-block;
	border-radius: 60px 60px 0 0;
	background: var(--jaune);
	padding: 0 30px;
	font-size: 120px;
	line-height: 100px;
	margin-top: -60px;
	margin-bottom: -60px;
}
*/
body.countdown #leads h1 {
	display: inline-block;
	width: 100%;
	text-indent: -999em;
	background: var(--jaune) url(../img/la_machine.svg)no-repeat 60% center;
	background-size: 90%;
	border-radius: 60px 60px 0 0;
	padding: 0 30px;
	font-size: 120px;
	line-height: 100px;
	margin-top: -60px;
	margin-bottom: -60px;
}

body.countdown #leads .msg {
	height: 70px;
}
body.countdown #leads h2 {
	font-size: 2vh;
	font-weight: normal;
}
body.countdown div.content {
	width: 600px;
	max-width: calc(100% - 40px);
	margin: auto;
}
body.countdown div.content p {
	line-height: 1.5rem;
	margin-top: 0;
}
body.countdown div.content p span.vinylcuts {
	font-size: 2em;
}

@media screen and (max-width:600px) {
	body.countdown #countdown div.days span.amount {
		font-size: 40vw;
		line-height: 40vw;
	}
	body.countdown #countdown > div {
		width: 30%;
	}
	body.countdown #countdown div span.amount {
		font-size: 15vw;
		display: inline-block;
		text-align: center;
	}
	body.countdown #leads h1 {
		border-radius: 10vw;
		height: 20vw;
		margin-top: -10vw;
		margin-bottom: -10vw;
		line-height: 20vh;
	}
	body.countdown div.content {
		margin-top: -3vh;
	}
	body.countdown div.content p {
		font-size: 2.25vh;
		line-height: 3vh;
	}
	body.countdown #leads form.leads input[type=email], body.countdown #leads form.leads input[type=email]:focus {
		border-radius: 4vw;
		height: 8vw;
		font-size: 3vw;
	}
	body.countdown #leads form.leads input[type=submit] {
		font-size: 3vw;
		right: .5vw;
		top: .5vw;
		height: 7vw;
		line-height: 7vw;
	}

}
@media (orientation:landscape) and (max-height: 700px) {
	body.countdown section.video {
		width: 100vw;
		height: 74vh;
	}
	body.countdown #countdown div span.amount {
		font-size: 5vh;
	}
	body.countdown #countdown div.days span.amount {
		font-size: 20vh;
		line-height: 20vh;
	}
	body.countdown #leads h1 {
		width: 60vh;
		border-radius: 7vh;
		line-height: 14vh;
		margin-top: -7vh;
	}
	body.countdown div.content  {
		font-size: .9rem;
		line-height: 1.25rem;
		margin-top: -3vh;
	}
	body.countdown div.content p {
		font-size: .85rem;
		line-height: 1rem;
	}
	body.countdown #leads form.leads input[type=email], body.countdown #leads form.leads input[type=email]:focus {
		border-radius: 4vh;
		height: 8vh;
		font-size: 3vh;
	}
	body.countdown #leads form.leads input[type=submit] {
		font-size: 3vh;
		right: .5vh;
		top: .5vh;
		height: 7vh;
		line-height: 7vh;
	}
	body.countdown #leads .msg {
		height: 12vh;
	}
}