@font-face {

font-family: "Spotify Font";
src: url("Spotify-Font/Gotham-Bold.9c35bf87f23c.otf") format("opentype"),
	 url("Spotify-Font/GothamBold.db33e70bc9de.ttf") format("truetype");
}

@import url("https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap");

* {
	font-family: Spotify Font, Arial;
}

html {
	padding: 0;
	width: 100%;
	overflow-x: hidden;
	margin: 0;
}

body{
	background: #1E1C1C;
	padding: 0;
	margin: 0;
	overflow-x: hidden;
	width: 100%;
}

a {text-decoration: none; color: inherit;}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid #FFFFFF;
	outline-offset: 3px;
}

.buttonLvt {
	border: 1px solid #FFF;
	border-radius: 10px;
	padding: 10px;
	cursor: pointer;
}

p {margin: 0 auto;}

ul {padding: 0;}

nav.responsive {background: #1E1C1C;}


.buttonLvt:hover {box-shadow: 0px 0px 6px #FFF; transition: all .6s ease;}
.buttonLvt.last:hover {box-shadow: 0px 0px 6px #1E1C1C; transition: all .6s ease;}

.dark {background: #1E1C1C; color: #FFF; border-color: transparent;}

.underline {text-decoration: underline;}

.navbar-fixed-top.scrolled {
  background-color: #1E1C1C !important;
  transition: background-color .2s ease;
  z-index: 5;
}

.nav-link:hover {text-decoration: none; color: #FF0100;}

.homepage{
	background: url("images/wallpapers/bg.c52c4c1ccfb5.png");
	background-size: cover;
	width: 100%;
	color: #FFF;
	margin: 0;
	padding: 0;
	height: 120vh;
	position: static;
	top: 0;
	left: 0;
}

video {
  object-fit: contain; /* Permet d'ajuster la vidéo sans dépasser ses limites */
  max-height: 100%; /* Limite la hauteur */
  max-width: 100%; /* Limite la largeur */
  display: block; /* Assure un comportement stable */
}

nav {
	display: flex;
  gap: 10px;
  top: 0;
	border-bottom: 1px solid #FFF;
	height: 80px;
	width: 100%;
	align-items: center;
	position: fixed;
	overflow: hidden;
	z-index: 4;
}

nav ul {margin: 0;}

nav .menu-items {
	text-align: left;
	vertical-align: middle;
	flex-grow: 3;
}
nav .menu-login {
	text-align: right;
	vertical-align: middle;
	flex-grow: 2;
}

nav .icon {display: none;}
nav .hamburger {font-size: 40px; border-radius: 50px; padding: 3px 10px; background: rgba(0, 0, 0, .2);}

.menu-login .buttonLvt.last {background: #1E1C1C; color: #FFF;border-color: transparent;}

nav ul li {
	font-size: 18px;
	display: inline-block;
	list-style-type: none;
	color: #FFF;
	margin: 8px 15px;
	vertical-align: text-top;
}

nav ul li:hover {color: #F5F5F5; transition: all .5s ease;}

.nav-logo {
	flex-grow: 1;
	padding-left: 8px;
}
.logo-img {width: 100px; height: auto;}


.home-layout {
	display: flex;
	flex-direction: column;
	height: 70%;
	width: 60%;
	margin: auto;
	padding-top: 80px;
	gap: 60px;
	align-items: center;
	vertical-align: middle;
}

.homepage h1 {
	font-size: 80px; 
	text-shadow: 1px 1px 0px #FFF, 
	0 0 1em #FFF, 0 0 1em #FFF;
	text-align: center;
}

.message {
	flex-grow: 2;
	height: 100%;
	text-align: center;
}
.message span {font-size: 20px; width: 100%;line-height: 30px;}
.message div {margin-top: 40px;}

.message .buttonLvt {padding: 15px 10px;}

.charts {
	display: flex;
	flex-grow: 5;
	width: 100%;
	height: 100%; 
	border-radius: 15px; 
	margin: auto;
	box-shadow: 0 0px 15px #aaa;
	padding: 0;
	overflow: hidden;
}

.charts video {
	object-fit: cover;
	overflow: hidden;
	width: 100%;
	-webkit-transform: translateZ(0);
	box-shadow: 0 19px 51px 0 rgba(0,0,0,0.16), 0 14px 19px 0 rgba(0,0,0,0.07);
}

.topic {
	width: 100%;
	text-align: center;
	padding-bottom: 35px;
}

.topic h2 {
	font-size: 50px;
	color: #FFF;
}

.confirmation {
	background: #FFF;
	border-top-left-radius: 25px;
	border-top-right-radius: 25px;
	box-shadow: 0 2px 18px #FFF;
	padding: 8% 30px;
	height: 70vh;
	text-align: center;
	overflow-y: hidden;
}

.confirmation h2 {
	font-size: 60px;
	width: 70%;
	text-align: center;
	margin: 50px auto;
	background: linear-gradient(#7DFF7D, #7DFF7D, #7DF5FF, #7DF5FF, #7D9DFF, #7D9DFF, #C67DFF, #C67DFF, #FF7DDF, #FF7D81);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.confirmation span {
	display: block;
	margin: auto; 
	font-size: 22px; 
	line-height: 30px;
	width: 50%;
}

.phone {
	display: flex;
	align-content: center;
	width: 350px;
	height: 700px;
	border-radius: 50px;
	box-shadow: 0 2px 18px #aaa;
	background: #FFF;
	margin: auto;
	margin-top: 30px;

}

.phone .screen {
	background: url("images/wallpapers/grey-bg.9b093fc9a61e.png");
	background-size: cover;
	background-position: top;
	border-radius: 40px;
	width: 320px;
	margin: auto;
	height: 675px;
	color: #FFF;
}

.slide {
	display: flex;
	align-items: center;
	border-radius: 20px;
	padding: 6px;
	background: #1E1C1C;
	width: 110px;
	height: 110px;
	justify-content: center;
	margin: auto;
	margin-top: 30px;
	color: #FFF;
	font-size: 50px;
	cursor: pointer;
}

.slide:hover {
	box-shadow: 0 0 10px #1E1C1C;
	transition: all ease .3s;
}

.confirmation button {
	display: block;
	color: #FFF;
	background: linear-gradient(35deg, #F99BFF, #FF0000, #F000FF, #F99BFF);
	padding: 15px;
	font-size: 20px;
	width: 30%;
	border: none;
	border-radius: 20px;
	box-shadow: 0 0 10px #F99BFF;
	margin: 10px auto;
	margin-top: 50px;
	font-weight: bolder;
}
.confirmation button:hover {background: #000; transition: all ease .8s; cursor: pointer;}

.confirmation img {width: 300px; height: 300px; margin: 20px auto;}

.confirmation .banking {
	margin: 20px auto;
	text-align: center;
	border-radius: 18px;
	background: #F7F7F7;
	padding: 12px;
	box-shadow: 0 0 15px #D6D6D6;
}

.confirmation .banking span {
	border: 1px dashed #000;
	padding: 8px;
	border-radius: 10px;
}

.options {
	width: 90%;
	margin: 5% auto;
	display: flex;
	align-items: stretch;
}

.option {
	background: #F4FFFE;
	color: #1E1C1C;
	border-radius: 10px;
	margin: 0 auto;
	width: 48%;
	padding: 0;
	box-shadow: 0px 0px 6px #FFF;
}

.option .up {
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	background: #CAFFFB;
	height: 40px;
	padding: 12px 0;
}
.option .up span {font-size: 30px; color: #1E1C1C; font-weight: bolder;}

.option .middle {
	background: #FFF;
	text-align: left;
	padding: 50px;
	line-height: 30px;
	font-size: 17px;
}

.option .middle .buttonLvt {
	margin: auto;
}

.option .middle p {
	margin-bottom: 20px;
}

.option .down {
	border-top: 0.01em solid #1E1C1C;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	text-align: left;
	font-size: 14px;
}
.option .down ul {padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px}

.option .down span {color: #1C1E1E; padding-left: 20px;}

.option .down li {
	display: inline-block; 
	list-style-type: none; 
	padding: 12px;
	background: #1E1C1C;
	font-weight: bold;
	color: #FFF;
	border-radius: 15px;
	padding: 8px;
	font-size: 12px;
}

.banner{background: transparent; display: block; height: 65vh; overflow: hidden;}

.mission {
	background: #F7F7F7;
	padding: 5% 0;
}

.mission h2 {
	margin: 0 auto; 
	padding-top: 15px; 
	margin: auto; 
	text-align: center;
	font-size: 35px;
}

.mission .img.one {background: url("images/wallpapers/people.2182880e2a04.png"); background-size: cover; background-position: center;}
.mission .img.two {background: url("images/wallpapers/sneakers.bd5cce4f94f1.png"); background-size: cover; background-position: bottom;}

.grid {
	display: flex;
	flex-wrap: wrap;
}

.mission .row {
	display: flex;
	justify-content: space-between;
	height: 40vh;
	padding: 10px 10%;
	margin-top: 30px;
}

.mission .row .description {
	display: flex;
	flex-grow: 5;
	width: 10%;
	text-align: center;
	line-height: 35px;
	font-size: 22px;
	padding: 0 26px;
	align-items: center;
}

.row .description p {display: inline;}

.mission .img {
	border-radius: 40px;
	flex-grow: 5;
	gap: 0;
}

.row.one p {
	text-align: left;
}

.partners {
	width: 100%; 
	color: #FFF; 
	border-bottom: 1px solid #FFF;
	padding: 40px 0;
	background: url("images/wallpapers/night.e62e24d730c9.png");
	background-size: contain;
	background-attachment: fixed;
}

.partners ul li {list-style-type: none; display: inline-block;}

.partners ul {margin: auto; width: auto; padding: 0; text-align: center;}

.firm-logo {
	width: 200px;
	height: 50px;
}

.firm-logo.one {background: url("images/logo/p1.5c22102f632a.png"); background-size: 115%; background-position: center;}
.firm-logo.two {background: url("images/logo/p2.50b8c8f52625.png"); background-size: 115%; background-position: center;}
.firm-logo.three {background: url("images/logo/p3.77799f7878d0.png"); background-size: 115%; background-position: center;}
.firm-logo.four {background: url("images/logo/p4.24a95e910db3.png"); background-size: 115%; background-position: center;}
.firm-logo.five {background: url("images/logo/p5.2b12ccace0be.png"); background-size: 115%; background-position: center;}

.signup-home {
	background: url("images/wallpapers/night.e62e24d730c9.png");
	background-size: cover;
	background-position: top;
	background-attachment: fixed;
	line-height: 35px;
	padding-top: 35px;
}

.signup-home span {
	display: block;
	width: 50%;
	font-size: 26px;
	margin: auto;
	color: #FFF;
	text-align: center;
}

.advantages {

	width: 90%;
	margin: 5% auto;
	display: flex;
	align-items: stretch;
	align-content: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

.advantages .advantage {
	background: #FFF;
	box-shadow: 0px 0px 3px #FFF;
	border-radius: 40px;
	text-align: justify;
	font-size: 14px;
	line-height: 26px;
	width: 30%;
}

.advantages .advantage .img {
	border-top-right-radius: 40px;
	border-top-left-radius: 40px;
	object-fit: cover;
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 200px;
	margin: auto;
}


.signup-link {
	display: flex;
	background: url("images/wallpapers/design.368333d35f17.png");
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 90vh;
	border-radius: 20px;
	align-items: center;
	justify-content: center;
}

.signup-link .buttonLvt {border:  5px solid #1E1C1C; color: #1E1C1C; font-weight: bolder;}
.signup-link .buttonLvt:hover {border-color: #FFF; background-color: #ccc; border-radius: 18px;}

.advantages .advantage p, .advantages .advantage h3 {padding: 0 16px;}
.advantages .advantage p {margin-bottom: 20px;}

.img404 {
	display: flex;
	justify-content: center;
	background: url("images/wallpapers/404.1e3eecaa0324.png");
	background-size: cover;
	width: 100%;
	margin: auto;
	height: 80vh;
	object-fit: cover;
	background-position: center;
	margin: auto;
	flex-direction: column;
}

.img404 a {
	color: #ccc;
	padding: 12px;
	width: 150px;
	text-align: center;
	border-radius: 8px;
	box-shadow: 0 0 3px #ccc;
	margin: auto;
}

.img404 h1 {
	margin: auto;
	color: #FFF;
	letter-spacing: 20px;
}

footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	background: url("images/wallpapers/night.e62e24d730c9.png");
	background-size: cover;
	background-position: bottom;
	background-attachment: fixed;
	width: 90%;
	min-height: 30vh;
	color: #FFF;
	padding: 5%;
}

footer section {
	width:90%; 
	text-align: center; 
	margin: auto; 
	display: flex;
	justify-content: center;
	 }

footer .titles {
	width: 90%;
	display: flex;
	margin: auto;
	text-align: center; 
	margin: auto; 
	justify-content: center;
	border-bottom: 1px solid #ccc;
	padding-bottom: 15px;
	font-size: 20px;
	color: #FFF;
	font-weight: bold;
}

footer li {
	display: inline-block;
	list-style-type: none;
	width: 30%;
}

footer li a {
	display: block;
	color: #FFF;
	font-size: 18px;
	line-height: 30px;

}

footer .row {
	padding: 0;
	display: flex;
	width: 90%;
	align-items: top;
	justify-content: center;
}

footer .row .bottom {
	align-items: center;
}

.legal {
	width: 80%;
	margin: auto;
	padding: 5%;
	color: #1E1C1C;
	background: #FFF;
	border-radius: 10px;
	min-height: 100%;
	margin-top: 30px;
}

.legal form {width: 350px; margin: auto;}

.legal form input, .legal form button {
	display: block;
	margin: 10px;
	width: 300px;
	height: 50px;
	text-align: center;
	font-size: 20px;
}

.ltf-img {
	width: 45%;
	height: 150px;
	background: url("images/logo/lft.ce192441bfde.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: bottom;
}

.lvt-img {
	width: 160px;
	height: 90px;
	background: url("images/logo/4.848f612127b1.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: bottom;
}

.unwanted {display: none;}

.register-container {
	display: grid;
	margin: 0;
	width: 100%;
	height: 100vh;
	padding: 0;
	background: url("images/wallpapers/night.e62e24d730c9.png");
	background-size: cover;
}

.register {
	display: flex;
	flex-direction: column;
	margin: auto;
	width: 60%;
	justify-content: space-around;
	align-items: center;
	background: #FFF;
	border-radius: 20px;
	color: #1E1C1C;
}

.register form {
	width: 350px;
}

.register .iti {width: 100%}

.register input, .register select, .register .buttonLvt {
	display: block;
	margin: 10px auto;
	border-radius: 10px;
	border: none;
	box-shadow: 0px 0px 3px #ccc;
	font-size: 16px;
	padding: 12px 0;
	width: 100%;
	text-align: center;
}

.register select {
	width: 30%;
	display: inline-block;
	margin-right: 1%;
	margin-left: 1%;
}

.register .reset {display: block; margin: 12px auto;}
.register .reset:hover {color: #4b4b4b; transition: all ease .2s;}

.register label {
	display: block;
	font-size: 14px;
	font-weight: bold;
	margin-top: 10px;
}

.register .buttonLvt:hover {
	background: url("images/wallpapers/night.e62e24d730c9.png");
	box-shadow: 0px 0px 3px #1E1C1C;
	background-size: cover;
	transition: all ease .5s ;
}

.register a.underline {
	display: block;
	margin: 10px auto;
}

.register-logo {display: flex; align-items: center; color: #FFF;}

.register-logo .logo-img {
	background: url("images/logo/1t.5af5048792e7.png");
	background-size: contain;
	background-repeat: no-repeat;
	width: 50px;
	height: 50px;
	float: left;
}

.errors {
	display: block;
	background: #FF6B6B;
	border-radius: 5px;
	padding: 6px;
	font-size: 14px;
	color: #FFF;
}

.main-container {
	color: #FFF;
	background: #FFF;
}

.main-container div {
	color: #FFF;
}

.dsb-container {
	display: flex;
	border-radius: 30px;
	padding: 2%;
	overflow: hidden;
}

.dsb-container.portfolio {
	color: #1E1C1C;
	width: 100%;
	height: 80vh;
	padding: 0;
	align-items: stretch;
	margin: auto;
	justify-content: space-between;
}

.portfolio .portfolio-left {
	display: flex;
	flex-grow: 2;
	height: 100%;
	width: 100%;
	flex-direction: column;
	background: url("images/wallpapers/grey-bg.9b093fc9a61e.png");
	background-size: cover;
}

.portfolio .portfolio-top, .portfolio .portfolio-middle {
	display: flex;
	width: 100%;
	justify-content: space-around;
	align-items: center;
	padding-top: 20px;
}


.portfolio .data {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.portfolio .data .number {
	display: block;
	font-size: 30px;
	font-weight: bold;
}

.portfolio .data-label {
	color: #FFF;
}

.portfolio-bottom {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	width: 90%;
	padding-top: 0;
	gap: 20px;
	margin: auto;
	margin-top: 0;
}

.dsb-container .investment {
	display: flex;
	width: 90%;
	height: 90%;
	margin: auto;
	flex-direction: column;
	background: #767676;
	border-radius: 30px;
	text-align: center;
	justify-content: space-around;
}

.dsb-container .investment:hover {
	box-shadow: 0px 0px 10px #9C9C9C; transition: all .6s ease;
}

.dsb-container .investment .top-info {
	display: flex;
	justify-content: flex-end;
	font-size: 12px;
	color: #aaa;
	padding-right: 6px;
}

.dsb-container .investment-label {
	display: block;
	padding: 12px 0;
	font-size: 18px;
	color: #FFF;
	font-weight: bold;
}

.dsb-container .investment ul, .dsb-container .investment-bottom {
	display: flex;
	justify-content: space-around;
	align-items: baseline;
}

.dsb-container .investment-bottom {
	justify-content: space-around;
	border-top: 1px solid #FFF;
	padding-top: 8px;
}

.dsb-container .investment li {
	display: inline-block;
	list-style-type: none;
	font-size: 14px;
	border-radius: 20px;
	padding: 6px;
	width: 40%;
	color: #1E1C1C;
	background: rgba(254, 255, 221, .3);
}

.dsb-container .investment a {
	text-decoration: none;
	color: initial;
	display: block;
	width: 100%;
}

.dsb-container .investment strong {
	display: block;
	margin: 10px auto;
}

.portfolio-right .messages {
	width: 100%;
}

.portfolio-right .message {
	border-radius: 20px;
	padding: 20px;
	border: 1px solid #1E1C1C;
	width: 80%;
	height: auto;
	margin: 6px auto;
}

.portfolio-right .messages-title {
	text-align: center;
	font-size: 26px;
	font-weight: bold;
	border-bottom: 1px solid #D3FFF2;
	width: 80%;
	height: 50px;
	margin: 20px auto;
}


.general-layout {
	display: flex;
	height: 70vh;
	width: 100%;
	margin: 0;
	margin-top: 20px;
	padding-top: 80px;
	align-items: center;
	vertical-align: middle;
	background: #FFE4EC;
}

.title-layout {
	display: flex;
	width: 50%;
	height: 100%;
	flex-direction: column;
	justify-content: center;
	gap: 15px;
}

.title-layout span, .title-layout h1 {
	width: 60%;
	margin: 0 auto;
}

.title-layout h1 {font-size: 36px}
.title-layout span {font-size: 18px}
.title-layout .links-layout {margin: 10px auto; text-align: left;}


.illustration-layout {
	width: 50%;
	height: 100%;
}

.illustration-layout .dsb-demo {
	background: url("images/wallpapers/levites_dashboard.da5723d7dfee.png");
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
	height: 90%;
	border-radius: 22px;
	border: 14px solid #1E1C1C;
	box-shadow: 0 0 5px 2px #1E1C1C;
	margin: auto;
	margin-top: 12px;
}

.offers {background: #FFF; width: 100%}

.offer {
	display: flex;
	flex-direction: column;
	width: 90%;
	margin: 0 auto;
	box-shadow: 0 0 0px 0px #1E1C1C;
	border-radius: 15px;
	text-align: left;
	padding-bottom: 50px;
}

.offer-content {
	width: 50%;
	margin: auto;
}

.offer p {margin: 18px auto; font-size: 18px}

.offer span {font-size: 14px; font-weight: bold;}

.offer img {width: auto; height: 60px; margin-right: 20px;}
.offer li {
	list-style-type: none; 
	font-size: 16px; 
	display: flex; 
	align-items: center;
	width: 100%;
	justify-content: space-between;
	margin: 12px auto;
}
.offer h2 {font-size: 22px; text-align: center;}
.offer h2 b {font-size: 80px;  -webkit-text-stroke: 2px #1E1C1C; color: #FFF}
.offer .gapline {height: 1px; background: #1E1C1C; margin: 20px auto;}
.offer button {background: transparent; border: 1px solid #FFF; border-color: #1E1C1C; padding: 8px; border-radius: 6px; cursor: pointer;}

.hidden {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    opacity: 0;
    visibility: hidden;
}

.visible {
    max-height: 1000px; /* Ajustez la hauteur maximale selon votre besoin */
    transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    opacity: 1;
    visibility: visible;
}

/* Animation pour une transition de défilement fluide */
@keyframes slideDown {
  from {
    max-height: 0;
    opacity: 0;
  }
  to {
    max-height: auto; /* Ajustez la hauteur maximale selon votre besoin */
    opacity: 1;
  }
}

.result-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}
.result-table th, .result-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
}
.result-table th {
    background-color: #f2f2f2;
}
.summary-box {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid #4CAF50;
    border-radius: 12px;
    background-color: #f9fff9;
    font-size: 1.2em;
}

 .warning {
    color: red;
    font-size: 0.9em;
    display: none;
}

.ressources small {font-size: 10px; text-align: justify; color: #aaa}

.toggle-buttons {width: 80%; margin: auto; padding-top: 50px}

.toggle-buttons button {
	border-radius: 4px;
	border: none;
	background: #FFF8F3;
	color: #1E1C1C;
	padding: 4px 10px;
	font-size: 18px;
	cursor: pointer;
	transition: all .3s ease;
}

.toggle-buttons button.active {background: #1E1C1C; text-shadow: 0px 0px 0px #FFF; color: #FFF}

.toggle-buttons button:hover {transition: all .3s ease; text-shadow: 0px 0px 0px #1E1C1C;}

#retreatContent {background: #1E1C1C; color: #FFF}
#retreatContent button {color: #FFF; border-color: #FFF}
#retreatContent h2 b {-webkit-text-stroke: 2px #FFF; color: #1E1C1C}
#retreatContent .gapline {background: #FFF}

.content-page nav {background: #FF1040; top: 0;}
.layer {
	width: 100%;
	height: 65vh;
	display: flex;
}

.layer .text-content {
	line-height: 32px;
	font-size: 20px;
	display: flex;
	align-items: center;
}

.layer .text-content p {width: 80%; margin: 0 auto; font-weight: bold;}

.layer.one .text-content {text-align: center; width: 50%; color: #00363C;}
.layer.two .text-content {text-align: justify; width: 70%; color: #00363C; padding-right: 20px; flex-direction: column; align-items: center;}
.layer.three .text-content {color: #FFF; width: 50%; padding: 30px; text-align: left;}

.layer.four {flex-direction: column; background: #FFF}
.layer.four h2 {text-align: center; margin-bottom: 0}

.market-slide {
	display: flex;
	flex-direction: column;
	min-width: 300px;
	height: auto;
	border-radius: 15px;
	background: #FFF;
	padding: 15px;
	margin: auto;
	box-shadow: 0 0 1px #1E1C1C;
}

.horizontal-scroll-wrapper {
	display: flex;
  width: 100%;
  height: 500px;
  margin: auto;
  overflow-y: auto;
  overflow-x: scroll;
  gap: 20px;
  padding: 0 12px;
  padding-right: 20px;
}

.market-slide .img.one {background: url("images/logo/laptop-stock.d0b1b0d3af12.png"); background-size: contain; background-position: center; background-repeat: no-repeat;}
.market-slide .img.two {background: url("images/logo/yeezy.de70a51e297e.png"); background-size: contain; background-position: center; background-repeat: no-repeat;}
.market-slide .img.three {background: url("images/logo/wine-barrels.bd536ea107d8.png"); background-size: contain; background-position: center; background-repeat: no-repeat;}
.market-slide .img.four {background: url("images/logo/nft.031af4047564.png"); background-size: contain; background-position: center; background-repeat: no-repeat;}
.market-slide .img.five {background: url("images/logo/house.be550494c4ca.png"); background-size: contain; background-position: center; background-repeat: no-repeat;}
.market-slide .img.six {background: url("images/logo/joconde.f06f692d8591.png"); background-size: contain; background-position: center; background-repeat: no-repeat;}
.market-slide .img.seven {background: url("images/logo/rolex.348b1ff42608.png"); background-size: contain; background-position: center; background-repeat: no-repeat;}
.market-slide .img.eight {background: url("images/logo/pokemon.02d9696777da.png"); background-size: contain; background-position: center; background-repeat: no-repeat;}
.market-slide .img.nine {background: url("images/logo/shop.9b59547a8ff9.png"); background-size: contain; background-position: center; background-repeat: no-repeat;}
.market-slide .img.ten {background: url("images/logo/gold.369de9da4920.png"); background-size: contain; background-position: center; background-repeat: no-repeat;}

.market-slide .img {background: red; height: 200px; width: 100%}
.market-slide.ret {background: #1E1C1C; color: #FFF}
.market-slide span {font-size: 12px; font-weight: bold; margin: 8px 0}
.market-slide p {font-size: 14px; line-height: 22px}

.layer.one {
	background: #FFF;
	padding-top: 80px;
	border-top: 2px dashed #1E1C1C;
}

.layer.one .bg {background: url("images/wallpapers/logo-firms.2d462ae2b231.png"); background-size: contain; background-position: center; width: 50%;
cursor: crosshair; background-repeat: no-repeat;}

.layer.one .bg:hover {transform: scale(1.1); 
	-webkit-transition: all 5s;
    -moz-transition: all 5s;
    -o-transition: all 5s;
    transition: all 5s;
  }
.layer.two .bg {background: url("images/wallpapers/money-tree.4ce44d23defe.png"); background-size: contain; background-position: center; width: 30%; 
background-repeat: no-repeat;}
.layer.three .bg {background: url("images/wallpapers/markets.c2c5568fdbd7.png"); background-size: cover; background-position: center; width: 50%;}

.layer.two {
	background: #FFF;
	justify-content: flex-end;
}

.layer.three {
	background: #1E1C1C;
}

/* Style général pour la page des tarifs */
header.pricingpage {
    background: transparent;
    height: 20vh;
    color: #FFF;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pricing {
    background: #F9F9F9;
    padding: 40px 0;
    color: #333;
}

/* Style pour les sections */
.pricing section {
    margin: 40px auto;
    padding: 20px;
    border-radius: 12px;
    background: #FFF;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    width: 50%;
}

.pricing section.ret {background: #1E1C1C; color: #FFF}

/* Style pour les titres de section */
.pricing section h2 {
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
    color: #1E1C1C;
}

.pricing section.ret h2 {color: #00F7FF}

/* Style pour les tableaux */
.pricing table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    text-align: left;
}

.pricing section.ret tbody td {Border-bottom: 1px solid #FFF;}

.pricing thead th {
    font-weight: bold;
    padding: 15px;
    border: none;
    text-transform: uppercase;
}


.pricing tbody td {
    padding: 15px;
    border-bottom: 1px solid #1E1C1C;
    font-size: 16px;
}


/* Style pour les explications */
.explanation p {
    margin-bottom: 20px;
    border-left: 4px solid #1E1C1C;
    padding-left: 12px;
    font-size: 16px;
    line-height: 1.8;
}

/* Style pour les liens d'action */
.pricing .cta-button {
    display: inline-block;
    margin: 20px auto;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    color: #FFF;
    background: #012DD0;
    border-radius: 6px;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

.pricing .cta-button:hover {
    background: #0056B3;
    transform: translateY(-3px);
}

.how-banner {
	background: url("images/wallpapers/night.e62e24d730c9.png");
	background-size: cover;
	background-position: center;
	height: 90vh;
	display: flex;
	align-items: center;
}

.header-flex {display: flex; width: 100%; height: 80vh; align-items: center;}
.header-flex .header-content {
	margin: auto; 
	color: #FFF;
	line-height: 1.4;
	flex-direction: column;
	justify-content: space-between;
}

.header-content h1 {font-size: 50px; width: 80%; margin: auto; text-align: left; line-height: 1.2; margin-bottom: 22px}
.header-content span, .header-content div {position: relative; font-size: 22px; width: 80%; display: block; margin: 20px auto; 
	text-align: left; z-index: 3;}
.header-content div {margin-top: 50px}

.header-flex .header-img {
	height: 50vh; 
	width: 40%; 
	background: #FFF; 
	display: flex; 
	align-items: baseline; 
	background: url("images/wallpapers/city3d.a0083c952eef.png");
	background-size: cover;
	background-position: center;
}

#drag-container, #spin-container {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: auto;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: rotateX(-10deg);
          transform: rotateX(-10deg);
}

#drag-container img, #drag-container video {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  line-height: 200px;
  font-size: 50px;
  text-align: center;
  -webkit-box-shadow: 0 0 8px #fff;
          box-shadow: 0 0 8px #fff;
  -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0005);
}

#drag-container img:hover, #drag-container video:hover {
  -webkit-box-shadow: 0 0 15px #fffd;
          box-shadow: 0 0 15px #fffd;
  -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0007);
}

#drag-container p {
  font-family: Serif;
  position: absolute;
  top: 100%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%) rotateX(90deg);
          transform: translate(-50%,-50%) rotateX(90deg);
  color: #fff;
}

#ground {
  width: 900px;
  height: 900px;
  position: absolute;
  top: 100%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%) rotateX(90deg);
          transform: translate(-50%,-50%) rotateX(90deg);
  background: -webkit-radial-gradient(center center, farthest-side , #9993, transparent);
}

#music-container {
  position: absolute;
  top: 0;
  left: 0;
}

@-webkit-keyframes spin {
  from{
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  } to{
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}

@keyframes spin {
  from{
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  } to{
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}
@-webkit-keyframes spinRevert {
  from{
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  } to{
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
}
@keyframes spinRevert {
  from{
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  } to{
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
}


.step.one {
	display: flex;
	background: #FFF;
	align-items: center;
	color: #1E1C1C;

}

.step-content {text-align: center;}
.step.one .img {
	width: 100%; 
	height: 45vh; 
	background: url("images/wallpapers/young-plant.41ff576c6ad1.png");
	background-size: cover;
	background-position: center;}

.step-content h2, .step-content p {margin: 40px auto;}
.step-content-container {width : 60%; margin: auto; text-align: left;}
.step-content a {position: relative; z-index: 3}

.step.two {
	color: #FFF;
	min-height: auto;
	margin: 60px 0;
}

.step.two h2 {text-align: center;}

.step.two .list {
	display: flex;
	width: 80%;
	margin: 0 auto;
	justify-content: space-around;
	align-items: center;
	text-align: center;
}
.step.two .list-element {
	display: flex;
	flex-direction: column;
	width: 300px;
	min-height: 50px;
	border: 2px solid "FFF";
	flex-wrap: wrap;
}

.list-element .top-e i {display: block; font-size: 30px}
.list-element .top-e span {font-size: 18px; font-weight: bold;}

.step.three {
	background: #e7f9ff;	
}

.step.three h2 {width: 80%; margin: 20px auto; padding-top: 50px}

.list-features {
	width: auto;
	padding-bottom: 50px;
	margin: auto;
	display: flex;
	align-items: stretch;
	row-gap: 50px;
	flex-wrap: wrap;
	justify-content: space-evenly;
}

.feature {
	display: flex;
	flex-direction: column;
	border-radius: 16px;
	background: #FFF;
	width: 22%;
	min-height: 400px;
	box-shadow: 0px 0px 4px #FFF;
	align-items: center;
	text-align: justify;
}

.feature p {
	font-size: 14px;
	width: 80%;
	margin: auto;
	padding: 0;
}

.feature .top-f {
	display: flex;
	align-items: center;
	background: #ffd2bd;
	width: 100%;
	margin-bottom: 20px;
	min-height: 30%;
	font-size: 14px;
	font-weight: bold;
	border-top-right-radius: 16px;
	border-top-left-radius: 16px;
}

.feature .top-f span {margin: auto; text-align: center;}


.step {
	min-height: 80vh;
	padding: 0;
	width: 100%;
	margin: 0;
}

.step h2 {font-size: 36px; line-height: 1.2}
.step p,.step span {line-height: 1.8;}

.rain {
  position: absolute;
  left: 0;
  width: 100%;
  margin: auto;
  height: 60%;
  z-index: 2;
}

.rain.back-row {
  display: none;
  z-index: 1;
  bottom: 60px;
  opacity: 0.5;
}

body.back-row-toggle .rain.back-row {
  display: block;
}

.drop {
  position: absolute;
  bottom: 100%;
  width: 15px;
  height: 120px;
  pointer-events: none;
  animation: drop 0.5s linear infinite;
}

.ressources-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

.ressources .link-container {
	border-radius: 15px;
	height: 250px;
	border: 1px solid #1E1C11;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	align-items: center;
	width: 310px;
	margin: 20px auto;
}

.ressources .link-container:hover {
	background: #FFFEFA;
	border-color: #56FFF7;
	transition: all ease .3s;
	border-radius: 12px;
}

.ressources .link-container .img-link {
	width: 80px;
	height: 80px;
	background: #000;
}

.ressources .link-container .img-link.one {
	background: url("images/logo/robot.dfe3b4a7fbf9.png");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
.ressources .link-container .img-link.two {
	background: url("images/logo/robot.dfe3b4a7fbf9.png");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
.ressources .link-container .img-link.three {
	background: url("images/logo/question.0473198b1aa9.png");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

.ressources .link-container span {
	font-weight: bold;
	margin: 15px auto;
}

.ressources-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.ressources .link-container {
    border-radius: 15px;
    height: 250px;
    border: 1px solid #1E1C11;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;
    width: 310px;
    margin: 20px auto;
}

.ressources .link-container:hover {
    background: #FFFEFA;
    border-color: #56FFF7;
    transition: all ease 0.3s;
    border-radius: 12px;
}

.ressources .link-container .img-link {
    width: 80px;
    height: 80px;
    background: #000;
}

.ressources .link-container span {
    font-weight: bold;
    margin: 15px auto;
}

.ressources {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    min-height: 80vh;
    width: 80%;
    background: #FFF;
    margin: auto;
    margin-bottom: 10vh;
    border-radius: 15px;
    box-shadow: 0px 0px 6px #FFF;
}

.ressources .form-group {
    margin: 16px auto;
    width: 100%;
}

.ressources input,
.ressources select {
    text-align: center;
    width: 100%;
    max-width: 300px;
    height: 60px;
    font-size: 16px;
    border-radius: 15px;
    border: 1px solid #1E1C1C;
    background: transparent;
}

.ressources label {
    display: block;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 6px;
}

.ressources button {
    width: 100%;
    max-width: 150px;
    height: 50px;
    border-radius: 8px;
    background: #151515;
    border: none;
    color: #FFF;
    cursor: pointer;
}

/* Tableau de résultats */
.result-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    overflow-x: auto;
}

.result-table th,
.result-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
    font-size: 14px;
}

.result-table th {
    background-color: #f2f2f2;
}

.summary-box {
    margin-top: 20px;
    padding: 15px;
    border: 2px solid #4CAF50;
    background-color: #f9fff9;
    font-size: 1em;
    text-align: center;
}

/* Message d'avertissement */
.warning {
    color: red;
    font-size: 0.9em;
    display: none;
    text-align: center;
    margin-top: 10px;
}


.ressources details {
    border: 1px solid #151515;
    border-radius: 15px;
    padding: 12px;
    width: 90%;
    cursor: pointer;
    margin: 15px auto;
}

.ressources summary {
    font-weight: bold;
    margin: auto;
    padding: 8px;
}

.ressources details[open] {
    padding: 8px;
    line-height: 24px;
}

.ressources details[open] summary {
    border-bottom: 1px solid #aaa;
    margin-bottom: 0.5em;
    color: #1E1C1C;
}



@keyframes drop {
  0% {
    transform: translateY(0vh);
  }
  75% {
    transform: translateY(90vh);
  }
  100% {
    transform: translateY(90vh);
  }
}

.stem {
  width: 1px;
  height: 60%;
  margin-left: 7px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25));
  animation: stem 0.5s linear infinite;
}

@keyframes stem {
  0% {
    opacity: 1;
  }
  65% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.splat {
  width: 15px;
  height: 10px;
  border-top: 2px dotted rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  opacity: 1;
  transform: scale(0);
  animation: splat 0.5s linear infinite;
  display: none;
}

body.splat-toggle .splat {
  display: block;
}

@keyframes splat {
  0% {
    opacity: 1;
    transform: scale(0);
  }
  80% {
    opacity: 1;
    transform: scale(0);
  }
  90% {
    opacity: 0.5;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

.splat-toggle {
  top: 20px;
}

.back-row-toggle {
  top: 90px;
  line-height: 12px;
  padding-top: 14px;
}

.single-toggle {
  top: 160px;
}

body.single-toggle .drop:nth-child(10) {
  display: block;
}


[class*="reveal-"] { opacity: 0; transform: translateY(-30px);}

.reveal-visible {opacity: 3; transform: translateY(0); transition: .6s;}

.reveal-1 {transition-delay: .5s;}
.reveal-2 {transition-delay: .1s;}
.reveal-3 {transition-delay: .2s;}

@media screen and (max-width: 1150px) {
	.option {width: 80%;}
	.options {display: block; width: auto;}
	.options .down {padding: 30px 0; margin-bottom: 40px;}
	.option .middle {height: auto;}
	.topic h2, .confirmation h2 {font-size: 40px;}
	.mission .row .description, .signup-home span {font-size: 18px;}

	.layer.three .text-content {font-size: 14px;}

	.homepage h1 {font-size: 60px;}
}

@media screen and (max-width: 970px) {
	
	nav.responsive {position: fixed; height: 100vh; display: block; transition: all 100ms linear; width: 96%; 
		padding: 20px 2%; z-index: 5;}
	nav.responsive .buttonLvt.last {background: #FFF; color: #1E1C1C;}
  nav .icon {position: absolute; right: 10px; top: 10px;}
  nav.responsive li {display: block; float: none; text-align: left; height: 50px;}
  nav.responsive ul {display: initial; margin: 20px 0;}
  nav.responsive .logo-img {;margin-bottom: 30px;}
  nav.responsive .buttonLvt, nav.responsive .buttonLvt.last {}
  nav a.icon {float: right; display: block; color: #FFF;}
  nav ul {display: none;}

  .header-flex {flex-direction: column;}

	.confirmation h2, .mission h2 {width: 80%;}
	.advantages {display: block;}
	.advantages .advantage {width: 80%; margin: 20px auto; padding-bottom: 15px;}
	.advantages .advantage .img {height: 350px;}
	.mission .row .description {display: block; width: 80%; padding: 15px auto; text-align: left; margin: auto;}
	.mission .row {display: block; height: auto; margin: auto;}
	.mission .img {height: 250px; width: 80%; margin: auto;}

	.layer .text-content {font-size: 16px; width: 100%; margin: auto;padding: 8px; text-align: center;}
	.layer.three .text-content {flex-direction: column;}
	.layer .bg,.layer.one .text-content, .layer.two .text-content, .layer.three .text-content,.layer.four .text-content 
	{width: 100%; }
	 .layer .text-content p {width: 80%;}
	.layer.four {background: #FFF;}
	.layer.two .text-content {font-size: 14px; justify-content: inherit;}
	.layer {flex-direction: column;}
	.layer {min-height: 60vh; }

	.general-layout {flex-direction: column; height: auto;}
	.title-layout {width: 100%; gap: 30px; margin-bottom: 16px}
	.illustration-layout{width: 90%; height: 50vh}

	.feature {width: 40%}
	.step.two .list-element {min-width: 40%; margin: 16px auto;}
	.step.two .list {flex-wrap: wrap;}

	.step.one {flex-direction: column;}
	.step {width: 100%}

	.pricing section {width: 80%}
	.pricing th {font-size: 14px}
}

@media screen and (max-width: 810px) {
	.main {width: 100%;}
	.dsb-container span, .dsb-container .number, .portfolio .data .number {font-size: 14px;}
	.dsb-container li {font-size: 14px;}
	.dsb-container div, .portfolio-top {display: block; padding: 10px; overflow-x: hidden;}
	.dsb-container .investment {flex-direction: initial;}
	.phone {display: none;}
	.portfolio-top {overflow: hidden;}
	.confirmation {height: auto;}
	.ressources {
        width: 95%;
        padding: 15px;
    }



    .ressources .link-container {
        width: 100%;
        height: auto;
    }

    .ressources input,
    .ressources select,
    .ressources button {
        width: 100%;
        max-width: 100%;
    }

    .result-table th,
    .result-table td {
        font-size: 12px;
        padding: 6px;
    }

    .summary-box {
        font-size: 1em;
    }
}

@media screen and (max-width: 750px) {
	.home-layout {display: block; width: 80%;}
	.message span  {font-size: 14px}
	.charts {display: none;}
	.grid {display: block;}
	.confirmation h2, .mission h2, .mission .row .description, .mission .img, .advantages .advantage, .option, 
	.confirmation span {width: 94%;}
	.topic h2, .confirmation h2, .mission h2 {font-size: 24px;}
	.homepage h1 {font-size: 30px;}
	.advantages .advantage .img {height: 150px;}
	.option .middle, .option .down {padding: 10px;}
	.mission .row .description, .signup-home span, .confirmation span, .option .middle  {font-size: 16px; width: 94%;}
	.topic h2 {margin-top: 50px;}

	.register {width: 98%;}
	.register form {width: 300px;}

	footer li a, footer .titles {font-size: 15px;}
	footer {padding: 12px; padding-top: 50px; width: 100%}

	.homepage {height: 90vh;}
	.message .buttonLvt {border: solid 1px #aaa;}
	.offer-content {width: 85%}

	.step-content-container {width: 90%}

	.layer .text-content p {width: 90%; font-size: 16px; line-height: 22px; text-align: center; margin: auto; padding: 12px 0;}
	.layer.one .bg,.layer.two .bg ,.layer.three .bg ,.layer.four .bg {height: 30vh; width: 100%; display: block;}
	.layer.one .text-content, .layer.two .text-content, .layer.three .text-content, .layer.four .text-content {padding: 0;}

	.layer {height: auto;}
	.pricing table {height: auto;}
	.pricing section {overflow-x: scroll;}
	
	.feature {width: 90%}
	.step.two .list-element {min-width: 90%;}
	.how-banner .header-img {display: none;}
	.how-banner h1 {font-size: 28px}
	.how-banner span {font-size: 18px}
	.how-banner  {margin-top: 0}
	
}

@media screen and (max-width: 500px) {
	.step p, .step li {font-size: 14px;}
	.step h1 {font-size: 18px;}
	.step h2 {font-size: 16px;}

	.ressources {width: 90%; padding: 10px}
	.ressources h1 {font-size: 22px; text-align: center; width: 300px}
	.ressources input, .ressources select {width: 300px; font-size: 15px;}

	.title-layout span, .title-layout h1 {width: 90%}
	.title-layout .links-layout {display: flex; flex-direction: column; gap: 14px}

	.pricing th, .pricing td {font-size: 10px}

	.ressources {
        padding: 10px;
        margin-bottom: 5vh;
    }

    .ressources .link-container {
        width: 100%;
        margin: 10px 0;
    }

    .result-table th,
    .result-table td {
        font-size: 10px;
        padding: 4px;
    }

    .summary-box {
        font-size: 0.9em;
    }

}