/* -------------------- Header -------------------- */
header{
    background-image: url("/ressources/photo/sectionBleu--circle.png"), linear-gradient(67deg, #121624 -8.79%, #3374FF 146.39%);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    height: calc(112vh);
    position: relative;
    overflow: hidden;
    padding: 2.5rem 5rem;
}

.demo{position: relative;width: fit-content;translate:0 16vh}
iframe{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);border-radius: 40px;width: 90%;height: 96%;}
.true{position: absolute;pointer-events: none;width: auto;height: 92vh;}
.ghost{pointer-events: none;width: auto;height: 92vh;}
.center_content{display: flex;gap: 7.5rem;align-items: center;justify-content: center;height: 90vh;}
.text_button{color: white; width: 29.919vw;}
.text_button p{margin-bottom: 2.5rem;}
.loader {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);border-radius: 2vw;width: 92%;height: 95%;background-color: white;}

/* Responsive ----------------------------------------*/
/* For-big-desktop-up */
@media (min-width: 1801px) {
}
/* For-desktop-up */
@media (max-width: 1800px) {
}
/* For-tablet-landscape-up */
@media (max-width: 1200px) {
}
/* For-tablet-portrait-up */
@media (max-width: 900px) {
	header {height: auto;padding: 2.5rem;}
	.center_content {flex-direction: column; height: auto;gap: 20rem;}
	.demo{position: relative;width: fit-content;margin-top: 8vh;}
	.text_button{width: 80vw; text-align: left;}
	.text_button button{width: 100%;}
}
/* For-phone-only  */
@media (max-width: 600px) {
}

/* Loader en dessou de l'iframe */
.data-loader {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 200px;
	margin-left: -100px;
	margin-top: -26px;
	text-align: center;
	padding: 2px;
}

.data-loader > div:last-child {
	position: relative;
	width: 80px;
	height: 15px;
	margin: 1em auto;
}

.data-loader > div:last-child > div {
	position: absolute;
	top: 0;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #000;
	animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.data-loader > div:last-child > div:nth-child(1) {
	left: 8px;
	animation: data-loader-1 0.6s infinite;
}

.data-loader > div:last-child > div:nth-child(2) {
	left: 8px;
	animation: data-loader-2 0.6s infinite;
}

.data-loader > div:last-child > div:nth-child(3) {
	left: 32px;
	animation: data-loader-2 0.6s infinite;
}

.data-loader > div:last-child > div:nth-child(4) {
	left: 56px;
	animation: data-loader-3 0.6s infinite;
}

@keyframes data-loader-1 {
	0% {
		transform: scale(0);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes data-loader-2 {
	0% {
		transform: translate(0, 0);
	}
	100% {
		transform: translate(24px, 0);
	}
}

@keyframes data-loader-3 {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(0);
	}
}