@import url('common.css');

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

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

.seo-thtt .main-top.fs14
{
	font-size: 14pt;
}

.seo-thtt .main-top .left
{
	width: 600px;
	max-width: 95vw;
}

.seo-thtt .main-top H1
{
	margin-bottom: 40px;
	font-size: 26pt;
	text-align: center;
}

.seo-thtt .main-top.fs14 H1
{
	font-size: 20pt;
}

.seo-thtt .main-top .left DIV:last-child
{
	margin-top: 10px;
}

.seo-thtt .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-thtt .chapo
{
	padding: 20px;
}

.seo-thtt .chapo .ttl
{
	width: fit-content;
	margin-left: 20px;
	padding: 12px 30px;
	font-size: 18pt;
	font-weight: bold;
	background-color: var(--v-smky2-base);
}

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

.seo-thtt .chapo.im-fi .subpane
{
	padding: 20px 20px 1px;
}

.seo-thtt .paragraph1,
.seo-thtt .keys,
.seo-thtt .panel0,
.seo-thtt .panel1,
.seo-thtt .panel2,
.seo-thtt .panel4,
.seo-thtt .panel5,
.seo-thtt .panel6,
.seo-thtt .panel7,
.seo-thtt .panel8,
.seo-thtt .panel9
{
	max-width: 1032px;
	margin: 20px auto 40px;
}

.seo-thtt .paragraph1,
.seo-thtt .keys .steps,
.seo-thtt .panel1.prices P
{
	font-size: 14pt;
}

.seo-thtt .keys .item P
{
	padding-left: 31px;
}

.seo-thtt .panel0
{
	position: relative;
	display: flex;
	align-items: center;
	max-width: 1000px;
	margin: 20px auto 0;
}

.seo-thtt .panel0 .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-thtt .panel0 .subpane :first-child
{
	font-weight: bold;
}

.seo-thtt .panel0 .picture
{
	min-width: 138px;
	max-width: 138px;
	margin-right: 10px;
	height: 266px;
	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-thtt .testimonies
{
	position: relative;
	height: 30px
}

.seo-thtt .testimonies .ship
{
	position: absolute;
	left: -10px;
	top: -70px;
	width: 140px;
	height: 140px;
	padding: 46px 5px;
	text-align: center;
	font-size: 12pt;
	font-weight: bold;
	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-thtt .panel1 .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-thtt .panel1 .item
{
	display: flex;
	align-items: center;
	max-width: 500px;
	height: 60px;
	padding-left: 70px;
	font-size: 14pt;
	background: url(../assets/public/metiers/maintenance.png) no-repeat left center;
	background-size: 52px;
}
.seo-thtt .panel1 .item.i2 { background-image: url(../assets/public/metiers/work-progress.png) }
.seo-thtt .panel1 .item.i3 { background-image: url(../assets/public/metiers/checklist.png) }
.seo-thtt .panel1 .item.i4 { background-image: url(../assets/public/metiers/secure.png) }
.seo-thtt .panel1 .item.i5 { background-image: url(../assets/public/metiers/house.png) }
.seo-thtt .panel1 .item.i6 { background-image: url(../assets/public/metiers/gear.png) }
.seo-thtt .panel1 .item.i7 { background-image: url(../assets/public/metiers/write.png) }
.seo-thtt .panel1 .item.i8 { background-image: url(../assets/public/metiers/house2.png) }
.seo-thtt .panel1 .item.i9 { background-image: url(../assets/public/metiers/data-analytics.png) }

.seo-thtt .panel1.im-fi .item { max-width: 470px }
.seo-thtt .panel1.im-fi .item.i1 { background-image: url(../assets/public/metiers/house2.png) }
.seo-thtt .panel1.im-fi .item.i2 { background-image: url(../assets/public/metiers/loupe.png) }
.seo-thtt .panel1.im-fi .item.i3 { background-image: url(../assets/public/metiers/data-analytics.png) }
.seo-thtt .panel1.im-fi .item.i4 { background-image: url(../assets/public/metiers/machine.png) }
.seo-thtt .panel1.im-fi .item.i5 { background-image: url(../assets/public/metiers/handshake.png) }

.seo-thtt .panel1 .keywords
{
	margin-top: 10px;
}

.seo-thtt .panel1 .keywords .capitalize
{
	font-size: 15pt;
	font-style: italic;
}

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

.seo-thtt .panel2 .others
{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 30px;
	font-size: 14pt;
}

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

.seo-thtt .panel2 .item A
{
	color: white;
	text-decoration: none;
}

.seo-thtt .panel3 .ttl
{
	width: fit-content;
	margin: 20px auto;
	padding: 8px 20px;
	font-weight: 400;
	color: var(--v-smky1fg-base);
	background-color: var(--v-smky1-base);
}

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

.seo-thtt .panel4 .ttl
{
	width: fit-content;
	margin-left: -20px;
	padding: 14px;
	font-weight: bold;
	color: var(--v-smky1fg-base);
	background-color: var(--v-smky1-base);
}

.seo-thtt .panel4.im-fi .ttl
{
	color: var(--v-smky1-base);
	background-color: transparent;
}

.seo-thtt .panel4 .subpane
{
	padding: 16px 20px 0;
	font-size: 14pt;
	border: 1px solid gray;
	border-radius: 20px;
}

.seo-thtt .panel4.im-fi .subpane
{
	border: none;
}

.seo-thtt .panel4 .subpane .item
{
	margin-bottom: 10px;
	padding-left: 40px;
	background: url(../assets/ico/check-outline.svg) no-repeat left center;
}

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

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

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

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

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

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

.seo-thtt .panel6 .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-bkgray-base);
	background-size: 36px;
	border-radius: 20px;
}
.seo-thtt .panel6 .item.i2 { background-image: url(../assets/btn/star-y.svg) }
.seo-thtt .panel6 .item.i3 { background-image: url(../assets/btn/conversation-y.svg) }
.seo-thtt .panel6 .item.i4 { background-image: url(../assets/btn/phone-y.svg) }
.seo-thtt .panel6 .item.i5 { background-image: url(../assets/btn/sell-y.svg) }

.seo-thtt .panel6 .note
{
	margin: 40px;
	padding: 10px;
	text-align: center;
	font-size: smaller;
	background-color: #E0CA5F;
	border-radius: 20px;
}

.seo-thtt .panel8
{
	padding: 1px;
	background-color: var(--v-smky1-base);
}

.seo-thtt .panel8 .start-project
{
	margin: 12px auto;
}

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

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

.seo-thtt .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-thtt .panel-3steps H2
{
	text-align: center;
}

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

.seo-thtt .panel-3steps.im-fi .list
{
	margin: 30px 10px;
}

.seo-thtt .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-thtt .panel-3steps .item.i2 { background-image: url(../assets/public/metiers/gear.png) }
.seo-thtt .panel-3steps .item.i3 { background-image: url(../assets/public/metiers/house3.png) }
.seo-thtt .panel-3steps.im-fi .item.i2 { background-image: url(../assets/public/metiers/gear2.png) }

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

.seo-thtt .panel-3steps .note
{
	width: fit-content;
	margin: 20px auto;
	padding: 12px;
	text-align: center;
	font-size: 14pt;
	font-style: italic;
	font-weight: 500;
	color: var(--v-smky2fg-base);
	background-color: var(--v-smky2-base);
	border-radius: 20px;
}

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

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

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

.seo-thtt .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-thtt .panel-bottom .item.i2 { background-image: url(../assets/public/commons/euro.png) }
.seo-thtt .panel-bottom .item.i3 { background-image: url(../assets/public/commons/idea.png) }
.seo-thtt .panel-bottom .item.i4 { background-image: url(../assets/immo/ecran.png) }
.seo-thtt .panel-bottom .item.i5 { background-image: url(../assets/public/financing/immo/euro-house.jpg) }

.seo-thtt .panel-bottom .dept
{
	text-align: center;
}

@media (max-width: 1280px)
{
	.seo-thtt .testimonies
	{
		width: 150px;
		height: unset;
		margin: -20px auto 30px;
	}

	.seo-thtt .testimonies .ship
	{
		position: unset;
	}
}

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

	.seo-thtt .panel0
	{
		margin-top: 60px;
	}

	.seo-thtt .ship-testimonies
	{
		top: -88px;
		left: 20px;
	}

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

	.seo-thtt .panel6 .list
	{
		overflow: auto;
		justify-content: unset;
		margin-left: 20px;
	}

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

	.seo-thtt .panel-3steps.im-fi .list
	{
		margin: 30px 10px -30px;
	}
}

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

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

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

	.seo-thtt .panel0
	{
		flex-direction: column;
		margin-top: 100px;
	}

	.seo-thtt .panel0 .subpane
	{
		margin: 0 30px;
		padding: 20px;
	}

	.seo-thtt .panel0 .picture
	{
		margin: -15px 0 0;
	}

	.seo-thtt .ship-testimonies
	{
		top: -120px;
		left: calc(50% - 80px);
	}

	.seo-thtt .panel-3steps .list
	{
		gap: 50px;
	}

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

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

	.seo-thtt .main-top.fs14 H1
	{
		font-size: 18pt;
	}

	.seo-thtt .main-top.fs14,
	.seo-thtt .paragraph1,
	.seo-thtt .keys .steps
	{
		font-size: 12pt;
	}

	.seo-thtt .paragraph1 > DIV,
	.seo-thtt .keys .steps
	{
		padding: 0 10px;
	}

	.seo-thtt .keys .item P
	{
		padding-left: 28px;
	}

	.seo-thtt .panel2 .others
	{
		gap: 10px;
	}

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

	.seo-thtt .panel6 .list
	{
		max-width: 95vw;
		margin: 40px auto;
	}

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

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

	.seo-thtt .panel-3steps .list
	{
		overflow: auto;
		justify-content: unset
	}

	.seo-thtt .panel-3steps .item
	{
		min-width: 200px;
		padding-top: 80px;
		background-size: 60px;
	}
}