@import url('common.css');
@import url('faq.css');

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

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

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

.seo-thtc .main-top H1
{
	margin-bottom: 40px;
}

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

.seo-thtc .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-thtc .menu
{
	display: flex;
	align-items: center;
	justify-content: space-around;
	min-height: 78px;
	padding: 6px;
	font-size: 14pt;
	font-style: italic;
	background-color: var(--v-smky1-base);
}

.seo-thtc .menu.im-fi
{
	margin-bottom: 40px;
}

.seo-thtc .menu .start-project
{
	margin: 8px auto;
}

.seo-thtc .chapo
{
	padding: 20px;
	text-align: center;
}

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

.seo-thtc .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-thtc .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-thtc .panel1 .item.i2 { background-image: url(../assets/public/metiers/work-progress.png) }
.seo-thtc .panel1 .item.i3 { background-image: url(../assets/public/metiers/checklist.png) }
.seo-thtc .panel1 .item.i4 { background-image: url(../assets/public/metiers/secure.png) }
.seo-thtc .panel1 .item.i5 { background-image: url(../assets/public/metiers/house.png) }
.seo-thtc .panel1 .item.i6 { background-image: url(../assets/public/metiers/gear.png) }
.seo-thtc .panel1 .item.i7 { background-image: url(../assets/public/metiers/write.png) }
.seo-thtc .panel1 .item.i8 { background-image: url(../assets/public/metiers/house2.png) }
.seo-thtc .panel1 .item.i9 { background-image: url(../assets/public/metiers/data-analytics.png) }

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

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

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

.seo-thtc .panel2 .list .item
{
	margin: 14px 0 14px 30px;
}

.seo-thtc .panel2 .wrapper
{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	margin: 30px 0;
	color: var(--v-smky1fg-base);
	background-color: var(--v-smky1-base);
	border-radius: 20px;
}

.seo-thtc .panel2 .wrapper > DIV:first-child
{
	text-align: center;
	padding: 3px 8px;
}

.seo-thtc .panel2 .subscribe
{
	width: 240px;
	margin: 14px;
	padding: unset;
	background: unset;
}

.seo-thtc.no-pro .panel3,
.seo-thtc.no-pro .panel2 .wrapper
{
	display: none;
}

.seo-thtc .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-thtc .pro-list
{
	min-height: 340px;
	padding: 25px 0;
	background-color: var(--v-bkgray-base);
	border-radius: 24px;
}

.seo-thtc .pro-list IFRAME
{
	width: 100%;
	height: 100%;
	border: none;
}

.seo-thtc .panel4.im-fi
{
	margin-bottom: 0;
}

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

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

.seo-thtc .panel4 .others .item
{
	width: 310px;
	min-width: fit-content;
	padding: 8px 10px;
	white-space: nowrap;
	font-weight: 400;
	background-color: #747474;
}

.seo-thtc .panel4 .item A
{
	color: white;
	text-decoration: none;
}

.seo-thtc .panel5 .list
{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	font-size: 14pt;
}

.seo-thtc .panel5 .list > .item
{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 230px;
	min-height: 200px;
	margin: 30px auto;
	padding: 100px 10px 0 10px;
	text-align: center;
	font-weight: bold;
	background: url(../assets/public/commons/yellow-1.svg) no-repeat center 30px var(--v-bkgray-base);
	background-size: 48px;
	border-radius: 20px;
}
.seo-thtc .panel5 .list > .item.i2 { background-image: url(../assets/public/commons/yellow-2.svg) }
.seo-thtc .panel5 .list > .item.i3 { background-image: url(../assets/public/commons/yellow-3.svg) }
.seo-thtc .panel5 .list > .item.i4 { background-image: url(../assets/public/commons/yellow-4.svg) }

.seo-thtc .panel5 .list > .item .ttl
{
	padding: 0 30px;
}

.seo-thtc .panel5 .sublist
{
	min-height: 30px;
	margin-bottom: -14px;
	background: url(../assets/public/commons/arrow-down-circle-blue.svg) no-repeat center top;
	background-size: 30px;
	cursor: pointer;
}

.seo-thtc .panel5 .item:not(.expanded) .sublist .item
{
	display: none;
}

.seo-thtc .panel5 .item.expanded .sublist
{
	font-size: 11pt;
	font-weight: 400;
	background-position-y: 28px;
}

.seo-thtc .panel5 .item.expanded .sublist .item:first-child
{
	margin-top: 70px;
}

.seo-thtc .panel5 .item.expanded .sublist .item:last-child
{
	margin-bottom: 30px;
}

.seo-thtc .panel5 .item.expanded .sublist .item:not(:last-child)
{
	margin-bottom: 8px;
}

.seo-thtc .panel5 .note
{
	margin: 30px 10px;
	padding: 16px 20px;
	text-align: center;
	background-color: var(--v-bkgray-base);
	border-radius: 30px;
}

.seo-thtc .panel6 .subpane
{
	display: flex;
	align-items: center;
	justify-content: space-around;
	margin: 40px 0;
}

.seo-thtc .panel6 .list
{
	min-width: 370px;
	max-width: 600px;
	padding: 10px 20px;
	color: var(--v-smky1fg-base);
	background-color: var(--v-smky1-base);
	border-radius: 20px;
	box-shadow: 0 10px 30px 20px #0000000D;
}

.seo-thtc .panel6 .item
{
	padding: 10px 10px 10px 50px;
	background: url(../assets/btn/magnify-y.svg) no-repeat 5px center;
	background-size: 32px;
}
.seo-thtc .panel6 .item.i2 { background-image: url(../assets/public/commons/lightbulb-y.svg); background-size: 24px; background-position-x: 8px }
.seo-thtc .panel6 .item.i3 { background-image: url(../assets/public/partners/pro/file-y.svg) }

.seo-thtc .panel6 .picture
{
	width: 135px;
	min-width: 135px;
	height: 280px;
	margin: 0 10px 0 -40px;
	background: url(../assets/public/commons/smartphone-project-details.png) no-repeat center center;
	background-size: 135px;
	border-radius: 10px;
	box-shadow: 0 10px 30px 20px #0000000D;
}

.seo-thtc .panel6 .note
{
	margin: 40px 70px;
	padding-left: 60px;
	text-align: center;
	font-weight: bold;
	background: url(../assets/public/commons/green-check.svg) no-repeat left center;
	background-size: 40px;
}

.seo-thtc .panel6 HR
{
	width: 280px;
	max-width: 90vw;
	margin: 0 auto 40px;
}

.seo-thtc .app-links
{
	display: flex;
	align-items: center;
	gap: 30px;
	user-select: none;
}

.seo-thtc .app-links DIV:first-child
{
	padding: 0 60px 6px 0;
	text-align: center;
	background: url(../assets/images/yellow-arrowflea.svg) no-repeat right 9px;
	background-size: 44px;
}

.seo-thtc .app-links IMG
{
	height: 60px;
}

.seo-thtc .panel6.im-fi
{
	max-width: unset;
	margin: 40px auto;
	padding: 20px 20px 1px;
	background-color: #E6E6E6;
}

.seo-thtc .panel6.im-fi H2
{
	max-width: 1032px;
	margin: auto;
	padding: 12px;
	text-align: center;
	font-size: 21pt;
	color: var(--v-smky1-base);
	background-color: var(--v-mainbk-base);
	border-radius: 20px;
}

.seo-thtc .panel6.im-fi .top
{
	display: flex;
	align-items: center;
	max-width: 1032px;
	margin: 20px auto;
	background-color: var(--v-mainbk-base);
	border-radius: 20px;
}

.seo-thtc .panel6.im-fi .top DIV:first-child
{
	padding-left: 85px;
	background: url(../assets/public/commons/blue-arrowflea.svg) no-repeat 10px center;
	background-size: 60px;
}

.seo-thtc .panel6.im-fi .top .img
{
	width: 300px;
	height: 200px;
	background: url(../assets/public/estimates/bzh2.png) no-repeat center 30px;
	background-size: contain;
}

.seo-thtc .panel6.im-fi .list
{
	max-width: 700px;
	color: var(--v-mainfg-base);
	background-color: var(--v-mainbk-base);
}

.seo-thtc .panel6.im-fi .item { background-size: 40px; background-position-x: left }
.seo-thtc .panel6.im-fi .item.i1 { background-image: url(../assets/btn/2arrows-y.svg) }
.seo-thtc .panel6.im-fi .item.i2 { background-image: url(../assets/btn/magnify-y.svg) }
.seo-thtc .panel6.im-fi .item.i3 { background-image: url(../assets/btn/check-y.svg) }
.seo-thtc .panel6.im-fi .item.i4 { background-image: url(../assets/btn/phone-y.svg) }

.seo-thtc .panel6.im-fi .app-links
{
	justify-content: center;
}

.seo-thtc .panel6.im-fi .app-links DIV:first-child
{
	padding: 0;
	background: none;
}

.seo-thtc .panel6.im-fi .app-links IMG
{
	height: 40px;
}

.seo-thtc .panel6.im-fi .note
{
	max-width: 850px;
	margin: 30px auto;
	padding: 12px 12px 12px 50px;
	background-color: var(--v-mainbk-base);
	background-position: 20px 15px;
	background-size: 30px;
	border-radius: 20px;
}

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

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

.seo-thtc .panel-bottom .ttl
{
	width: 100%;
	text-align: center;
	font-weight: bold;
}

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

	.seo-thtc .app-links
	{
		flex-wrap: wrap;
		justify-content: center;
	}

	.seo-thtc .app-links DIV:first-child
	{
		padding: 0 20px;
		background: none;
	}
}

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

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

	.seo-thtc .panel5 .list
	{
		gap: 8px;
	}
}

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

	.seo-thtc .panel4 .others
	{
		gap: 10px;
	}

	.seo-thtc .panel6.im-fi .top
	{
		padding-top: 20px;
	}

	.seo-thtc .panel6.im-fi .top,
	.seo-thtc .panel6 .subpane
	{
		flex-direction: column;
		gap: 20px;
	}

	.seo-thtc .panel6 .list
	{
		max-width: 95vw;
	}

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