/* page_comment-choisir.less */

@import "main.less";

.page_comment-choisir {
	.row {
		@media @small {
			--bs-gutter-x: 0;
		}
	}

	h2 {
		@media @small {
			font-size    : 32px;
			margin-bottom: 10px;
		}
	}

	nav {
		ul.nav-pills {
			border       : solid 2px #445B6D;
			border-radius: 60px;
			display      : inline-flex;
			float        : none;
			width        : auto;

			@media @small {
				border-radius: 20px;
				border-width : 1px;
				width        : 100%;
			}

			li.nav-item {

				@media @small {
					display: block;
					width  : 90%;
					padding: 5px 0;
					margin : 0 auto;
				}

				button {
					border-radius : 56px;
					color         : #445b6d;
					cursor        : pointer;
					font-size     : 12px;
					font-weight   : 500;
					padding       : 18px;
					text-transform: uppercase;
					min-width     : fit-content;

					@media @small {
						border-radius: 30px;
						font-weight  : 400;
						padding      : 10px 0;
						width        : 100%;
					}

					&.first {
						margin-left: -2px;

						@media @small {
							margin-left: -1px;
						}
					}

					&.last {
						margin-right: -2px;

						@media @small {
							margin-right: -1px;
						}
					}

					&.active {
						background-color: #445B6D;
						color           : #FFFFFF;

					}
				}
				.active {
					background-color: #445B6D;
					color           : #FFFFFF;

				}
			}
		}
	}

	.content_wrapper {
		padding: 0 100px;

		@media @small {
			padding-left : 10px !important;
			padding-right: 10px !important;
		}
	}

	.introduction_wrapper {
		background-image   : url('/userfiles/images/comment-choisir/hero.png');
		background-position: center;
		background-repeat  : no-repeat;
		background-size    : cover;
		color              : #FFFFFF;
		height             : 80vh;
		padding            : 0 100px;

		@media @small {
			padding-left : 10px !important;
			padding-right: 10px !important;
		}

		h1 {
			color         : #FFFFFF;
			font-size     : 56px;
			text-transform: uppercase;

			@media @small {
				font-size: 36px;
			}
		}

		a.btn {
			border: solid 2px #FFFFFF;
			color : #FFFFFF;

			@media @small {
				display: block;
			}

			&:hover {
				background-color: #FFFFFF;
				color           : #445B6D;
			}
		}
	}

	.starting_wrapper {
		background-color: #EAF0F4;
		padding-bottom  : 100px;
		padding-top     : 100px;

		@media @small {
			padding-bottom: 50px;
			padding-top   : 50px;
		}

		hr {
			border-top: solid 1px #445B6D;
			margin    : 25px 25px 0;

			@media @small {
				margin: 19px 15px 0;
			}
		}

		p {
			color: #445B6D;
		}
	}

	.needs_wrapper {
		background-color: #EAF0F4;
		padding-top     : 16px;
		padding-bottom  : 46px;

		img {
			padding-top: 26px;
		}

		h3 {
			color         : #B0BCC5;
			font-size     : 26px;
			text-transform: uppercase;
		}

		h4 {
			color         : #445B6D;
			font-size     : 16px;
			font-weight   : 400;
			margin-bottom : 16px;
			padding-top   : 20px;
			text-transform: uppercase;
		}

		ol {
			color       : #445B6D;
			padding-left: 1.5rem;

			li {
				color        : #23272A;
				font-size    : 20px;
				margin-bottom: 20px;

				strong {
					color  : #445B6D;
					display: block;
				}
			}
		}

		.container-examples {
			@media @small {
				margin-top: 50px;
			}
		}

		.col-needs {
			padding: 30px 50px;

			p {
				font-size: 16px;
			}
		}

		.col-chambre {
			border-right: solid 1px #B0BCC5;
			padding-top : 5px;
			position    : relative;

			@media @small_medium {
				border-bottom: solid 1px #B0BCC5;
				border-right : none;
			}

			&::after {
				background-color: #B0BCC5;
				bottom          : 0;
				content         : '';
				height          : 1px;
				position        : absolute;
				right           : 0;
				width           : 55%;

				@media @small {
					display: none;
				}
			}
		}

		.col-salon {
			padding-top: 5px;
			position   : relative;

			@media @small_medium {
				border-bottom: solid 1px #B0BCC5;
			}

			&::after {
				background-color: #B0BCC5;
				bottom          : 0;
				content         : '';
				height          : 1px;
				left            : 0;
				position        : absolute;
				width           : 55%;

				@media @small {
					display: none;
				}
			}
		}

		.col-cuisine {
			border-right  : solid 1px #B0BCC5;
			padding-bottom: 5px;

			@media @small_medium {
				border-bottom : solid 1px #B0BCC5;
				border-right  : none;
				padding-bottom: 30px;
			}
		}

		.col-bain {
			padding-bottom: 5px;
		}
	}

	.elements_wrapper {
		background-color: #EAF0F4;
		padding-bottom  : 100px;
		padding-top     : 100px;

		@media @small {
			padding-bottom: 50px;
			padding-top   : 25px;
		}

		hr {
			border-top: solid 1px #445B6D;
			margin    : 25px 25px 0;

			@media @small {
				margin: 19px 15px 0;
			}
		}

		p {
			color: #445B6D;
		}
	}

	.navbar_wrapper {
		background-color: #445B6D;
		display         : inline-flex;
		font-size       : 28px;
		font-weight     : 600;
		padding         : 22px 0;
		width           : 100%;

		@media @small {
			padding: 12px 0 !important;
		}

		.nav-link {
			color         : #8A949B;
			cursor        : pointer;
			font-family   : 'Barlow Semi Condensed', sans-serif;
			font-size     : 25px;
			font-weight   : 600;
			text-transform: uppercase;

			@media @medium {
				font-size: 16px;
			}

			@media @small {
				display  : block;
				font-size: 16px;
				padding  : 2px 0;
				width    : 100%;
			}

			&.active {
				background-color: transparent;
				color           : #FFFFFF;

				span {
					position: relative;

					&::before {
						background-color: #FFFFFF;
						content         : '';
						height          : 1px;
						position        : absolute;
						left            : -50px;
						top             : 15px;
						width           : 35px;

						@media @small_medium {
							left : -40px;
							top  : 9px;
							width: 25px;
						}
					}
				}
			}

			&:hover {
				color: #FFFFFF;
			}
		}
	}

	.measurements_wrapper {
		background-color: #F5F6F6;
		margin-top      : 100px;
		padding         : 100px;

		@media @small {
			margin-top    : 0;
			padding-bottom: 50px;
			padding-top   : 50px;
		}

		nav {
			padding: 30px 0 50px;
		}

		h3 {
			color         : #445B6D;
			font-size     : 24px;
			font-weight   : 600;
			margin-bottom : 10px;
			text-transform: uppercase;
		}

		.measurements-text {
			display: none;

			&.active {
				display: block !important;
			}

			strong {
				color  : #445B6D;
				display: block;
			}
		}

		.measurements-image {
			display: none;

			&.active {
				display: block !important;
			}

			img {
				width: 100%;
			}
		}
	}

	.dressings_wrapper {
		padding: 100px;

		@media @small {
			padding-bottom: 50px;
			padding-top   : 50px;
		}

		h2 {
			text-transform: uppercase;
			font-family   : 'Barlow Semi Condensed', sans-serif;
			font-weight   : 700;
			font-size     : 42px;
			color         : #445B6D;
		}

		.col-dressing {
			margin-top: 50px;

			.col-image {
				background-image: linear-gradient(180deg, #FFFFFF 50%, #EAF0F4 50%);

				img {
					width: 100%;
				}
			}

			.col-text {
				margin-top   : 50px;
				padding-left : 25px;
				padding-right: 75px;

				@media @small {
					padding: 0;
				}
			}
		}
	}

	.fabrics_wrapper {
		background-color: #F5F6F6;
		padding         : 100px;

		@media @small {
			padding-bottom: 50px;
			padding-top   : 50px;
		}

		h2.sub-header {
			color         : #445B6D;
			font-size     : 24px;
			font-weight   : 600;
			margin-bottom : 10px;
			margin-top    : 50px;
			text-transform: uppercase;
		}

		.row>* {
			padding-left : 3px;
			padding-right: 3px;
		}

		.col-image {
			margin-top: 25px;

			img {
				width: 100%;
			}
		}

		.col-text {
			padding-right: 50px;

			h2 {
				color         : #445B6D;
				font-size     : 20px;
				font-weight   : 600;
				margin-top    : 25px;
				text-transform: uppercase;
			}
		}
	}

	.choice_wrapper {
		background-color: #EBEDED;
		padding         : 100px;

		@media @small {
			padding-bottom: 50px;
			padding-top   : 50px;
		}

		nav {
			margin: 40px 0 50px;
		}

		.choice-text {
			display: none;

			&.active {
				display: block !important;
			}
		}

		.choice-image {
			display: none;

			&.active {
				display: block !important;
			}
		}

		.window-choice {
			position: relative;

			img {
				width: 100%;
			}

			.choice {
				display: none;

				&.active {
					display: block !important;
				}
			}

			#choice-opaque-image {
				background-color: rgba(68, 91, 109, 1);
				border-radius   : 5px;
				height          : 50%;
				left            : 0;
				position        : absolute;
				top             : -4px;
				width           : 100%;
			}

			#choice-translucide-image {
				background-color: #c6c6c6;
				border-radius   : 5px;
				height          : 50%;
				left            : 0;
				position        : absolute;
				top             : -4px;
				width           : 100%;
			}

			#choice-transparent-image {
				background-color: rgba(198, 198, 198, 0.5);
				border-radius   : 5px;
				height          : 50%;
				left            : 0;
				position        : absolute;
				top             : -4px;
				width           : 100%;
			}
		}
	}

	.uniques_wrapper {
		background-color: #F5F6F6;
		padding         : 100px;

		@media @medium {
			padding: 80px 0;
		}

		@media @small {
			padding: 50px 0;
		}

		h3 {
			color        : #445B6D;
			font-size    : 26px;
			font-weight  : 600;
			margin-bottom: 10px;
		}

		.row-list {
			.col-unique {
				padding-top: 50px;

				img {
					height    : 100%;
					max-height: 80px;
				}

				h4 {
					color      : #445B6D;
					font-family: 'Barlow Semi Condensed', sans-serif;
					font-size  : 20px;
					font-weight: 400;
					margin-top : 20px;
				}
			}
		}

		a.btn {
			background-color: #000000;
			color           : #FFFFFF;
			margin-top      : 50px;

			@media @small {
				display: block;
			}

			&:hover {
				background-color: #445B6D;
			}
		}
	}

	.systems_wrapper {
		padding: 100px;

		@media @small {
			padding-bottom: 50px;
			padding-top   : 50px;
		}

		.manual-vs-automatic {
			margin-top: 50px;

			img {
				width: 100%;
			}

			h4 {
				color         : #445B6D;
				font-size     : 20px;
				font-weight   : 600;
				margin-bottom : 10px;
				margin-top    : 20px;
				text-transform: uppercase;
			}

			p {
				padding-right: 50px;
			}
		}
	}

	.windings_wrapper {
		padding: 100px;

		@media @small_medium {
			padding: 20px 0
		}

		h3 {
			color         : #445B6D;
			font-size     : 26px;
			font-weight   : 600;
			margin-bottom : 10px;
			text-transform: uppercase;
		}

		nav {
			margin: 40px 0 50px;
		}

		h4 {
			color         : #445B6D;
			font-size     : 20px;
			font-weight   : 600;
			margin-bottom : 10px;
			text-transform: uppercase;
		}

		.winding-text {
			display: none;

			&.active {
				display: block !important;
			}
		}

		.winding-image {
			display: none;

			@media @small_medium {
				margin: 30px 0;
			}

			&.active {
				display: block !important;
			}

			img {
				width: 90%;
			}
		}

		a.btn {
			background-color: #000000;
			color           : #FFFFFF;
			margin-top      : 50px;

			@media @small {
				display: block;
			}

			&:hover {
				background-color: #445B6D;
			}
		}
	}

	.accessories_wrapper {
		background-color: #F5F6F6;
		padding         : 100px;

		@media @small {
			padding-bottom: 50px;
			padding-top   : 50px;
		}

		h4 {
			color         : #445B6D;
			font-size     : 20px;
			font-weight   : 600;
			margin-bottom : 10px;
			margin-top    : 20px;
			text-transform: uppercase;
		}

		p {
			padding-right: 25px;
		}

		img {
			width     : 100%;
			object-fit: cover;
		}

		a.btn {
			background-color: #000000;
			color           : #FFFFFF;
			margin-top      : 50px;

			@media @small {
				display: block;
			}

			&:hover {
				background-color: #445B6D;
			}
		}
	}

	.projects_wrapper {

		.col-4-link {
			display    : flex;
			align-items: center;
		}
	}
}