/* Guillaume Le Louarn */

/* Global */

	/* Colors */

	:root {
		--mint: #46dbc9;
		--persian: #d4f7f3;
		--royal: #1b3c87;
		--cornflower: #546da5;
		--air: #f5f8ff;
		--cloud: #f0f4fb;
	}

	/* Scrollbar */

	::-webkit-scrollbar {
		width: 3px;
	}

	::-webkit-scrollbar-thumb {
		background-color: black;
	}

	/* Viewport */

	html {
		scroll-behavior: smooth;
		overflow-x: none;
	}

	body {
		margin: 0;
		padding: 0;
	}

	header {
		background-color: var(--air);
		text-align: left;
	}

	nav {
		width: 100%;
		display: flex;
		align-items: center;
		background-color: var(--air);
		justify-content: space-between;
	}

	section {
		background-color: white;
		text-align: left;
	}

	aside {
		text-align: center;
	}

	/* Shortcuts */

	.flex {
		display: flex;
	}

	.between {
		justify-content: space-between;
	}

	.text-center {
		text-align: center;
	}

	.text-left {
		text-align: left;
	}

		/* Responsive */

		.to_column {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

	/* Text */

	a {
		color: var(--cornflower);
		font-family: 'Mulish', sans-serif;
		font-weight: 400;
	}

	a:hover {
		color: var(--cornflower);
		text-decoration: underline;
	}

	p {
		font-family: 'Mulish', sans-serif;
		font-weight: 400;
		line-height: 1.5;
		color: var(--cornflower);
	}

	h1, h2, h3, h4 {
		font-family: 'Mulish', sans-serif;
		line-height: 1.2;
		font-weight: 900;
		color: var(--royal);
	}

	strong > p {
		font-family: 'Mulish', sans-serif;
		font-weight: 900;
	}

	/* Navigation */

	nav li {
		display: inline;
		list-style-type: none;
		white-space: nowrap;
		color: var(--cornflower);
		font-family: 'Mulish', sans-serif;
		font-weight: 400;
		padding: 15px;
	}

	nav > ul {
		margin: 0;
		right: 0px;
		background-color: white;
		border-radius: 10px;
		display: flex;
		align-items: center;
		padding: 0;
	}

	li {
		font-family: 'Mulish', sans-serif;
		font-weight: 400;
		line-height: 1.5;
		color: var(--cornflower);
	}

	/* Footer */

	footer {
		background-color: var(--air);
	}

	footer ul {
		padding: 0;
		margin: 0;
	}

	footer li {
		display: inline;
		list-style-type: none;
		white-space: nowrap;
		color: var(--cornflower);
		font-family: 'Mulish', sans-serif;
		font-weight: 400;
		padding-right: 15px;
	}

	#low {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	#low div {
		display: flex;
	}

	#low img {
		width: 50px;
	}

	.social {
		width: 50px;
		height: 50px;
		background-color: red;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 15px;
		background-color: var(--persian);
		margin: 0 5px;

	}

	#copyright li {
		display: inline;
		list-style-type: none;
		white-space: nowrap;
		color: var(--cornflower);
		font-family: 'Mulish', sans-serif;
		font-weight: 400;
		padding-right: 15px;
	}

	#copyright ul {
		text-align: center;
		margin: 0;
		padding: 20px 0;
	}

	/* Visuals */

	.illustration {
		background-position: center;
		background-size: cover;
		width: 640px;
	}

		/* Logo */

		.logo > p {
			font-family: 'Mulish', sans-serif;
			font-weight: 900;
			color: var(--royal);
			margin: 0;
			padding-left: 10px;
		}

		.logo {
			display: flex;
			align-items: center;
			padding: 10px 0;
		}

	/* Elements */

		/* Button */

		button {
			background-color: var(--mint);
			border: none;
			border-radius: 10px;
			padding: 10px 20px;
		}

		.btn_alt {
			background-color: white;
			border: solid var(--cornflower) 2px;
			border-radius: 10px;
			padding: 10px 20px;
			color: var(--cornflower);
		}

		button:hover {
			text-decoration: underline;
			cursor: pointer;
		}

	/* Card */

	.card {
		border: solid var(--air) 6px;
		border-radius: 10px;
		padding: 30px 15px;
		margin: 10px;
	}

	/* Grid */

	.grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
		gap: 3em 1em;
	}

	/* Icons */

	.icon {
		width: 30px;
		height: 30px;
		fill: var(--mint);
	}

/* Accueil */

	/* Features */

	.element {
		width: 60px;
		height: 60px;
		background-color: red;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10px;
		background-color: var(--persian);
		margin-top: -60px;
		margin-bottom: 15px;
	}

	/* Clients */

	#client {
		justify-content: space-between;
		align-items: center;
		display: flex;
		text-align: left;
	}

	#customer{
		background-position: center;
		background-size: cover;
		width: 100%;
	}

	.separator {
		height: 6px;
		background-color: var(--mint);
		border: 0;
		width: 100px;
		border-radius: 10px;
	}

	.profile {
		border-radius: 50%;
	}

	.quote {
		color: var(--mint);
		font-weight: 900;
	}

	/* Brands */

	.view {
		width: 15rem;
		padding: 30px;
	}

/* Tarifs */

#tarifs {
	align-items: center;
	justify-content: center;
}

#side {
	background-color: white;
	margin: 5px;
	border: 3px solid var(--cloud);
	border-radius: 10px;
	justify-content: center;
	align-items: center;
	display: flex;
	flex-direction: column;
	padding: 6rem 0;

}

#center {
	background-color: white;
	text-align: center;
	margin: 5px;
	border: 3px solid var(--mint);
	border-radius: 10px;
	justify-content: center;
	align-items: center;
	display: flex;
	text-align: center;
	flex-direction: column;
	padding: 9rem 0;

}

.specs {
	display: flex;
	width: 20rem;
	justify-content: flex-start;
	margin: 0 10px;
}

.tarifs_icon {
	width: 30px;
	height: 30px;
	fill: var(--mint);
	margin: 0 10px;
}

.p_m-0 {
	font-family: 'Mulish', sans-serif;
	font-weight: 400;
	line-height: 1.5;
	color: var(--cornflower);
	margin: 0;
}

.strike {
	text-decoration: line-through;
}

.disabled {
	fill: lightsteelblue;
}

.ask {
	display: flex;
	align-items: center;
}

.beside {
	background-color: var(--mint);
	color: var(--mint);
	-webkit-transform: rotate(90deg);
	width: 60px;
	height: 3px;
	border: 3px;
	border-radius: 10px;
}

/* Blog */

.carte {
	background-color: white;
	border: 3px solid var(--cloud);
	border-radius: 10px;
	padding: 30px 15px;
	flex-direction: column;
}

.stock {
	max-width: 22rem;
	border-radius: 10px;
	margin-top: -50px;
	margin-bottom: 30px;
	margin-right: auto;
	margin-left: auto;
	display: block;
}

/* Article */

.article {
	width: 100%;
}

#cover {
	border-radius: 20px 20px 0 0;
	width: 100%;
	height: 50vh;
	object-fit: cover;
	background-position: center;
}

.away {
	background-color: var(--mint);;
	color: var(--mint);
	-webkit-transform: rotate(90deg);
	width: 60px;
	height: 5px;
	border: 5px;
	border-radius: 10px;
	margin-top: 50px;
	margin-bottom: 50px;
}

.increase {
	font-size: 120%;
}

.w-100 {
	width: 100%;
}

.restrict {
	padding: 0 20%;
}

.short {
	padding: 0 25%;
}

	/* List */

	.square {
		list-style: none;
	}

	.square li::before {
		content: "\25A0";
		color: var(--mint);
		font-weight: bold;
		display: inline-block;
		width: 1em;
		margin-left: -1em;
		list-style-type: square;
	}

/* Media queries */

@media (min-width: 1280px) {

	/* Viewport */

	main, header, nav, #faq {
		padding: 4rem;
	}

	section, #client {
		padding: 4rem 0;
	}

	footer {
		padding: 2rem 4rem;
	}

	/* Text */

	body {
		font-size: 20px;
	}

	/* Visuals */

	.illustration, #customer {
		padding: 4rem;
	}

	/* Tarifs */

	#side, #center {
		width: 100%;
	}

}

@media (max-width: 1280px) {

	/* Viewport */

	main, header, nav, #faq {
		padding: 3rem;
	}

	section, #client {
		padding: 3rem 0;
	}

	footer {
		padding: 1.5rem 3rem;
	}

	/* Text */

	body {
		font-size: 18px;
	}

	/* Visuals */

	.illustration, #customer {
		padding: 3rem;
	}

	/* Tarifs */

	#side, #center {
		width: 100%;
	}

	/* Article */

	.restrict {
		padding: 0%;
	}

	.short {
		padding: 0 5%;
	}

}

@media (min-width: 768px) {

	/* Text */

	h1 {
		font-size: 48px;
	}

	p {
		font-size: 1.125em;
	}

}

@media (max-width: 768px) {

	/* Responsive */

	.to_column {
		flex-direction: column;
	}

	/* Viewport */

	main, header, nav, #faq {
		padding: 1.5rem;
	}

	section, #client {
		padding: 1.5rem 0;
	}

	footer {
		padding: 0.75rem 1.5rem;
	}

	/* Text */

	body {
		font-size: 16px;
	}

	h1 {
		font-size: 32px;
	}

	/* Global elements */

	.menu {
		margin: 20px 0;
	}

	.menu > li {
	padding: 10px;
	}

	.logo {
		justify-content: center;
	}

	/* Visuals */

	.illustration, #customer{
		width: unset;
		order: -1;
		padding: 1.5rem;
	}

	/* Tarifs */

	#side, #center {
		width: 100%;
	}

	/* Footer */

	#low {
		padding: 10px 0;
	}
}