@import url('common.css');

.seo-thta
{
	font-size: 16pt;
}

.seo-thta .main-top
{
	display: flex;
	align-items: center;
	gap: 20px;
}

.seo-thta .main-top .left
{
	width: 600px;
	max-width: 95vw;
	text-align: center;
}

.seo-thta .main-top H1
{
	margin-bottom: 40px;
	font-size: 26pt;
}

.seo-thta .main-top .left DIV:last-child
{
	margin-top: 10px;
	font-size: 16pt;
}

.seo-thta .main-top .picture
{
	width: 680px;
	max-width: 95vw;
	height: 580px;
	max-height: 70vw;
	background: url(../assets/blank.png) no-repeat center center;
	background-size: cover;
}

.seo-thta .av-cntnr
{
	min-height: 110px;
}

.seo-thta .chapo
{
	padding: 20px;
}

.seo-thta .chapo .ttl
{
	padding: 12px 40px;
	text-align: center;
	font-size: 18pt;
	font-weight: bold;
	color: var(--v-smky1-base);
}

.seo-thta .chapo.im-fi .ttl
{
	width: fit-content;
	margin-left: 20px;
	padding: 12px 30px;
	color: var(--v-smky2fg-base);
	background-color: var(--v-smky2-base);
}

.seo-thta .chapo .subpane
{
	position: relative;
	max-width: 1032px;
	margin: 30px auto 10px;
	padding: 20px 40px 1px;
	font-size: 14pt;
	text-align: center;
	color: var(--v-smky1fg-base);
	background-color: var(--v-smky1-base);
	border-radius: 20px;
}

.seo-thta .chapo.im-fi .subpane
{
	margin-top: 0;
}

.seo-thta .chapo .testimonies
{
	position: absolute;
	left: -100px;
	top: -40px;
	width: 140px;
	height: 140px;
	padding: 46px 5px;
	text-align: center;
	font-size: 12pt;
	font-weight: bold;
	color: var(--v-smky2fg-base);
	background: url(../assets/public/commons/blue-line.svg) no-repeat 69% 98px var(--v-smky2-base);
	background-size: 110px;
	border-radius: 70px;
	transform: rotate(-12deg);
	cursor: pointer;
}

.seo-thta .panel-act,
.seo-thta .panel1,
.seo-thta .panel2,
.seo-thta .panel4,
.seo-thta .panel5,
.seo-thta .panel6,
.seo-thta .panel8
{
	max-width: 1032px;
	margin: 20px auto 40px;
}

.seo-thta .panel1:not(.immo)
{
	display: flex;
	align-items: center;
	max-width: 1000px;
	margin: 20px auto 0;
}

.seo-thta .panel1 .subpane
{
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 750px;
	margin: 0 -40px 0 100px;
	padding: 20px 80px 30px 40px;
	background-color: #FFF5E7;
	border-radius: 30px;
}

.seo-thta .panel1 .subpane :first-child
{
	font-weight: bold;
}

.seo-thta .panel1 .picture
{
	min-width: 160px;
	max-width: 160px;
	margin-right: 10px;
	height: 300px;
	background: url(../assets/public/commons/mathieu-smarpthone.png) no-repeat center center;
	background-size: contain;
	border-radius: 21px;
	box-shadow: 0 10px 30px 20px #0000000D;
}

.seo-thta .panel1.immo H2
{
	margin-bottom: 20px;
	padding: 8px 16px;
	color: var(--v-smky2fg-base);
	background-color: var(--v-smky2-base);
}

.seo-thta .panel1.immo .no-ann
{
	margin-top: 40px;
	text-align: center;
	font-style: italic;
}

.seo-thta .panel1.immo .panel-bottom .item
{
	max-width: 400px;
}

.seo-thta .app-links
{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 50px;
	user-select: none;
}

.seo-thta .app-links IMG
{
	height: 50px;
}

.seo-thta .panel2 P
{
	padding: 0 10px;
}

.seo-thta .panel2 .list
{
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex-wrap: wrap;
	gap: 20px;
	margin: 20px 10px 40px;
	font-size: 12pt;
}

.seo-thta .panel2 .item
{
	padding-left: 40px;
	background: url(../assets/btn/check-y.svg) no-repeat left center;
	background-size: 30px;
}

.seo-thta .panel2 HR
{
	width: 300px;
	height: 3px;
	margin: 30px auto;
	color: var(--v-smky1-base);
	background-color: var(--v-smky1-base);
}

.seo-thta .panel3
{
	padding: 10px;
	text-align: center;
	background-color: var(--v-bkgray-base);
	border-radius: 4px;
}

.seo-thta .panel3 .ttl,
.seo-thta .panel3 .note
{
	width: fit-content;
	margin: 20px auto;
	padding: 8px 20px;
	font-weight: bold;
	background-color: var(--v-mainbk-base);
	border-radius: 14px;
}

.seo-thta .panel3 .ttl
{
	color: var(--v-smky1-base);
}

.seo-thta .panel3 .list
{
	display: flex;
	align-items: center;
	justify-content: space-around;
	overflow: auto;
	gap: 8px;
	margin: 40px 0;
	font-size: 13pt;
}

.seo-thta .panel3 .item
{
	min-width: 190px;
	max-width: 190px;
	height: 185px;
	padding: 60px 10px 10px;
	text-align: center;
	background: url(../assets/btn/check-y.svg) no-repeat center 16px var(--v-mainbk-base);
	background-size: 36px;
	border-radius: 20px;
}
.seo-thta .panel3 .item.i2 { background-image: url(../assets/btn/star-y.svg) }
.seo-thta .panel3 .item.i3 { background-image: url(../assets/btn/conversation-y.svg) }
.seo-thta .panel3 .item.i4 { background-image: url(../assets/btn/phone-y.svg) }
.seo-thta .panel3 .item.i5 { background-image: url(../assets/btn/sell-y.svg) }

.seo-thta .panel3 .note
{
	font-weight: 350;
}

.seo-thta .pro-list
{
	min-height: 340px;
	padding: 25px 0;
	background-color: var(--v-bkgray-base);
	border-radius: 24px;
}

.seo-thta .reviews
{
	min-height: 460px;
	background-color: var(--v-bkgray-base);
}

.seo-thta .smky-reviews
{
	min-height: 285px;
}

.seo-thta .photos
{
	min-height: 375px;
}

.seo-thta .panel4
{
	margin-top: 20px;
}

.seo-thta .panel4 .subpane
{
	padding: 16px 20px 1px;
	font-size: 12pt;
	background-color: var(--v-bkgray-base);
	border-radius: 20px;
}

.seo-thta .panel4 .subpane .item
{
	margin-bottom: 10px;
	padding-left: 36px;
	background: url(../assets/public/immo-ads/green-check.svg) no-repeat left center;
	background-size: 26px;
}

.seo-thta .panel4 .note
{
	margin: 20px;
}

.seo-thta .panel4 .list
{
	font-size: smaller;
	padding: 0 12px;
}

.seo-thta .panel8 .ttl
{
	margin: 20px 0;
	font-weight: bold;
	color: var(--v-smky1-base);
}

.seo-thta .panel4 .others,
.seo-thta .panel8 .others
{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 30px;
}

.seo-thta .panel4 .others .item,
.seo-thta .panel8 .others .item
{
	width: 370px;
	min-width: fit-content;
	max-width: 100vw;
	padding: 8px 10px;
	font-weight: 400;
	background-color: #747474;
}

.seo-thta .panel4 .item A,
.seo-thta .panel8 .item A
{
	color: white;
	text-decoration: none;
}

.seo-thta .panel7
{
	max-width: 460px;
	margin: 30px auto;
	padding: 10px;
	background-color: var(--v-smky1-base);
	border-radius: 20px;
}

.seo-thta .panel7 .start-project
{
	margin: 12px auto;
}
.seo-thta .panel-act .list
{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 34px;
	margin: 30px 0;
	padding: 20px;
	border: 1px solid gray;
	border-radius: 30px;
}

.seo-thta .panel-act .item
{
	display: flex;
	align-items: center;
	max-width: 470px;
	height: 60px;
	padding-left: 70px;
	font-size: 14pt;
	background: url(../assets/public/metiers/house2.png) no-repeat left center;
	background-size: 52px;
}
.seo-thta .panel-act .item.i2 { background-image: url(../assets/public/metiers/loupe.png) }
.seo-thta .panel-act .item.i3 { background-image: url(../assets/public/metiers/data-analytics.png) }
.seo-thta .panel-act .item.i4 { background-image: url(../assets/public/metiers/machine.png) }
.seo-thta .panel-act .item.i5 { background-image: url(../assets/public/metiers/handshake.png) }

.seo-thta .carrousel-metiers
{
	padding-top: 0;
}

.seo-thta .carrousel-metiers.course
{
	justify-content: space-around;
	flex-wrap: wrap;
	gap: 30px;
	padding: 30px 0 60px;
	user-select: all;
}

.seo-thta .carrousel-metiers.course .item
{
	border: 1px solid var(--v-bkgray-darken1);
}

.seo-thta .carrousel-metiers.course .item A
{
	cursor: default;
}

.seo-thta .carrousel-metiers.course .item .num
{
	position: absolute;
	width: 100%;
	height: 40px;
	top: 20px;
	background: url(../assets/public/commons/yellow-1.svg) no-repeat center center;
	background-size: contain;
}
.seo-thta .carrousel-metiers.course .item.i2 .num { background-image: url(../assets/public/commons/yellow-2.svg) }
.seo-thta .carrousel-metiers.course .item.i3 .num { background-image: url(../assets/public/commons/yellow-3.svg) }

.seo-thta .carrousel-metiers.course .item .ttl
{
	width: 100%;
	top: 80px;
	text-align: center;
	font-size: 11pt;
	white-space: break-spaces;
}

.seo-thta .carrousel-metiers.course .item .ttl STRONG
{
	display: block;
	font-size: 13pt;
}

.seo-thta .carrousel-metiers.course .item .ttl::before
{
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.seo-thta .carrousel-metiers .item:hover .img
{
	background-size: auto 250px;
}

.seo-thta .carrousel-metiers .item:hover .ttl
{
	font-weight: unset;
}

.seo-thta .panel-bilan
{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 30px;
	max-width: 1032px;
	margin: 50px auto 20px;
	padding: 12px 20px;
	font-size: 15pt;
	font-weight: bold;
	background-color: #EEE;
	border-radius: 20px;
}

.seo-thta .panel-bilan .item
{
	max-width: 310px;
	padding: 10px 0 10px 10px;
	border-left: 4px var(--v-smky2-base) solid;
}

.seo-thta .panel-bilan .item .stars
{
	width: 128px;
	height: 22px;
	margin-bottom: 4px;
	background: url(../assets/public/financing/immo/stars-y.svg) repeat-x, left, top;
	background-size: contain;
}

.seo-thta .panel-3steps H2
{
	text-align: center;
}

.seo-thta .panel-3steps .list
{
	display: flex;
	gap: 90px;
	margin: 30px 10px;
	justify-content: center;
	font-size: 14pt;
}

.seo-thta .panel-3steps .item
{
	max-width: 300px;
	padding-top: 100px;
	text-align: center;
	background: url(../assets/public/metiers/write.png) no-repeat center top;
	background-size: 80px;
}
.seo-thta .panel-3steps .item.i2 { background-image: url(../assets/public/metiers/gear.png) }
.seo-thta .panel-3steps .item.i3 { background-image: url(../assets/public/metiers/house3.png) }
.seo-thta .panel-3steps.im-fi .item.i2 { background-image: url(../assets/public/metiers/gear2.png) }

.seo-thta .panel-3steps .item DIV
{
	font-size: smaller;
}

.seo-thta .panel-smky-reviews
{
	margin-top: 40px;
	background-color: #EEE;
}

.seo-thta .panel-smky-reviews H2
{
	padding: 20px 0 0 20px;
}

.seo-thta .panel-bottom
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 40px;
	margin: 30px auto;
}

.seo-thta .panel-bottom .item
{
	margin: 0 10px 0 40px;
	padding: 28px 10px 28px 100px;
	background: url(../assets/public/commons/path.png) no-repeat left center;
	background-size: 76px;
}
.seo-thta .panel-bottom .item.i2 { background-image: url(../assets/public/commons/euro.png) }
.seo-thta .panel-bottom .item.i3 { background-image: url(../assets/public/commons/idea.png) }
.seo-thta .panel-bottom .item.i4 { background-image: url(../assets/immo/ecran.png) }
.seo-thta .panel-bottom .item.i0 { background: none; padding-left: 10px; }

@media (max-width: 1250px)
{
	.seo-thta .chapo .subpane
	{
		max-width: 80vw;
	}

	.seo-thta .panel3 .list
	{
		justify-content: center;
		gap: 20px;
	}
}

@media (max-width: 1050px)
{
	.seo-thta
	{
		font-size: 15pt;
	}

	.seo-thta .main-top .left DIV:last-child
	{
		font-size: 14pt;
	}

	.seo-thta .panel1
	{
		margin-top: 60px;
	}

	.seo-thta .chapo .testimonies
	{
		top: 90px;
		left: -40px;
	}

	.seo-thta .panel3 .list
	{
		justify-content: start;
	}

	.seo-thta .panel4 .ttl
	{
		margin-left: 0;
	}

	.seo-thta .panel-bilan
	{
		margin: 40px 20px 0;
		font-size: 13pt;
	}
}

@media (max-width: 800px)
{
	.seo-thta .main-top
	{
		flex-direction: column;
	}

	.seo-thta .main-top .left
	{
		width: 95vw;
	}

	.seo-thta .chapo .ttl
	{
		margin: auto;
		text-align: center;
		font-size: 20pt;
	}

	.seo-thta .chapo .subpane
	{
		max-width: 95vw;
		padding-bottom: 20px;
		font-size: 12pt;
	}

	.seo-thta .chapo .testimonies
	{
		position: unset;
		margin: auto;
	}

	.seo-thta .panel1
	{
		flex-direction: column;
		margin: 10px auto 20px;
	}

	.seo-thta .panel1 .subpane
	{
		margin: 0 30px;
		padding: 20px;
	}

	.seo-thta .panel1 .picture
	{
		margin: -15px 0 0;
	}

	.seo-thta .panel2 .list
	{
		justify-content: start;
		margin-left: 13vw;
	}

	.seo-thta .panel-3steps .list
	{
		overflow: auto;
		justify-content: start;
		gap: 50px;
	}

	.seo-thta .panel-3steps .item
	{
		min-width: 250px;
		padding-top: 100px;
		background-size: 80px;
	}

	.seo-thta .panel-smky-reviews H2
	{
		font-size: 20pt;
	}
}

@media (max-width: 600px)
{
	.seo-thta .main-top H1
	{
		margin-bottom: 20px;
		font-size: 21pt;
	}

	.seo-thta .start-project
	{
		width: 98%;
  	}

	.seo-thta .app-links
	{
		gap: 20px;
	}

	.seo-thta .panel2 .list
	{
		margin-left: 5vw;
	}

	.seo-thta .panel4 .others,
	.seo-thta .panel8 .others
	{
		gap: 10px;
	}

	.seo-thta .panel6 .subpane
	{
		flex-direction: column;
		gap: 20px;
	}

	.seo-thta .panel6 .list,
	.seo-thta .panel7
	{
		max-width: 95vw;
	}

	.seo-thta .panel6 .picture
	{
		margin: 0;
	}
}