/* Support-site design layer, copied verbatim from the WordPress mettevo-theme
   style.css captured in helpcenter/design-reference/css/. The generated pages
   load the same webflow CSS as the public site; this is the layer on top that
   the WordPress theme added, and the reason the help center matches it.
   Do not hand-edit: re-copy from design-reference if the theme ever changes. */
/*!
Theme Name: mettevo-theme
Theme URI: https://mettevo.com/
Author: Van Revo
Author URI: http://mettevo.com/
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: mettevo-theme
Domain Path: /lang

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

mettevo-theme is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
[btn-type="primary"] {
	background: var(--button--background) !important;
	color: var(--button--text) !important;
	border-color: var(--button--border) !important;
	box-shadow: inset 0px -2px 0px var(--button--border);
}
[btn-type="primary"]:hover {
	background: var(--button--background-hover) !important;
	color: var(--button--text-hover) !important;
	border-color: var(--button--border-hover) !important;
	box-shadow: inset 0px 0px 0px var(--button--border);
}
[btn-type="secondary"] {
	background: var(--button--secondary-background) !important;
	color: var(--button--secondary-text) !important;
	border-color: var(--button--secondary-border) !important;
}
[btn-type="secondary"]:hover {
	background: var(--button--secondary-background-hover) !important;
	color: var(--button--secondary-text-hover) !important;
	border-color: var(--button--secondary-border-hover) !important;
}
[btn-type="ghost"] {
	background: var(--button--ghost-background) !important;
	color: var(--button--ghost-text) !important;
	border-color: var(--button--ghost-border) !important;
}
[btn-type="ghost"]:hover {
	background: var(--button--ghost-background-hover) !important;
	color: var(--button--ghost-text-hover) !important; 
	border-color: var(--button--ghost-border-hover) !important;
}
[btn-type="link"] {
	background: var(--colors--main--transparent) !important;
	color: var(--colors--main--text-primary) !important;
	border-color: var(--colors--main--transparent) !important;
}
[btn-type="link"]:hover {
	background: var(--colors--emerald--200) !important;
}
/* Button sizes */
[btn-size="xSmall"] {
	padding: var(--button--xs-pad-top-bottom) var(--button--xs-pad-left-right) !important;
	font-size: var(--button--xs-size) !important;
	font-weight: var(--button--xs-font-weight) !important;
	border-radius: 8px !important;
}
[btn-size="small"] {
	padding: var(--button--s-pad-top-bottom) var(--button--s-pad-left-right) !important;
	font-size: var(--button--s-size) !important;
	font-weight: var(--button--s-font-weight) !important;
	border-radius: 8px !important;
}
[btn-size="normal"] {
	padding: var(--button--m-pad-top-bottom) var(--button--m-pad-left-right) !important;
	font-size: var(--button--m-size) !important;
	font-weight: var(--button--m-font-weight) !important;
	border-radius: 10px !important;
}
[btn-size="large"] {
	padding: var(--button--l-pad-top-bottom) var(--button--l-pad-left-right) !important;
	font-size: var(--button--l-size) !important;
	font-weight: var(--button--l-font-weight) !important;
	border-radius: 12px !important;
}
/* FA icons Sizes */
[fa-icon="xxsmall"] {
	font-size: 8px !important;
}
[fa-icon="xsmall"] {
	font-size: 12px !important;
}
[fa-icon="small"] {
	font-size: 16px !important;
}
[fa-icon="normal"] {
	font-size: 20px !important;
}
[fa-icon="large"] {
	font-size: 24px !important;
}
[fa-icon="xlarge"] {
	font-size: 32px !important;
}
[fa-icon="xxlarge"] {
	font-size: 40px !important;
}
[mode="dark"] {  
	/* background and text */
	--colors--main--background: var(--dark--background);
	--colors--main--text-primary: var(--dark--text-primary);
	--colors--main--text-secondary: var(--dark--text-secondary);
	/* button primary */
	--button--background: var(--dark--button-background);
	--button--text: var(--dark--button-text);
	--button--border: var(--dark--button-border);
	/* button secondary */
	--button--secondary-background: var(--dark--button-secondary-background);
	--button--secondary-text: var(--dark--button-secondary-text);
	--button--secondary-border: var(--dark--button-secondary-border);
	/* button ghost */
	--button--ghost-background: var(--dark--button-ghost-background);
	--button--ghost-text: var(--dark--button-ghost-text);
	--button--ghost-border: var(--dark--button-ghost-border);
	/* greys */
	--colors--gray--900: var(--dark--grey-900);
	--colors--gray--800: var(--dark--grey-800);
	--colors--gray--700: var(--dark--grey-700);
	--colors--gray--600: var(--dark--grey-600);
	--colors--gray--500: var(--dark--grey-500);
	--colors--gray--400: var(--dark--grey-400);
	--colors--gray--300: var(--dark--grey-300);
	--colors--gray--200: var(--dark--grey-200);
	--colors--gray--100: var(--dark--grey-100);
	--colors--gray--50: var(--dark--grey-50);
}
:root {
	--font-weight--100: 100;
	--font-weight--200: 200;
	--font-weight--300: 300;
	--font-weight--400: 400;
	--font-weight--500: 500;
	--font-weight--600: 600;
	--font-weight--700: 700;
	--font-weight--800: 800;
	--font-weight--900: 900;
}
/* Responsive technique - https://finsweet.com/client-first/docs/fluid-responsive */
html { font-size: 1.125rem; }
@media screen and (max-width:1920px) { html { font-size: calc(0.625rem + 0.41666666666666674vw); } }
@media screen and (max-width:1440px) { html { font-size: 1rem; } }
@media screen and (max-width:479px) { html { font-size: calc(0.8747384937238494rem + 0.41841004184100417vw); } }
/* Container Max Width + Center alignment */
.container-medium, .container-small, .container-large, .container-none {
	width: 100%;
	height: 100%;
	margin-right: auto !important;
	margin-left: auto !important;
}
/* mobile */
@media screen and (max-width: 767px) {
	body {
		----container--global-desktop: var(--container--global-mobile);
	}
}
/* No bounce scroll on top or bottom of page, no horizontal scrolling + Crisper font */
body {
	overscroll-behavior: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
/* Prevents horizontal scroll, but still allows sticky elements */
.main-wrapper {
	overflow: clip;
}
/* Border radius fix SAFARI (add more classes if necessary) */
.br-0, .br-2, .br-4, .br-6, .br-8, .br-10, .br-12, .br-16, .br-20, .br-24, .br-32, .br-40, .br-pill { 
	-webkit-transform: translateZ(0);
}
/* Balance the lines in longer descriptions */
.text-balanced {
	text-wrap: balance;
}
/* Break any link on new row (Default is no wrap) */
a {
	word-wrap: break-word;
}
/* Limit long paragraphs to less lines */
.text-2lines {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.text-4lines {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
}
/* Get rid of top margin on first element in any rich text element */
.w-richtext > :not(div):first-child, .w-richtext > div:first-child > :first-child {
	margin-top: 0 !important;
}
/* Get rid of bottom margin on last element in any rich text element */
.w-richtext>:last-child, .w-richtext ol li:last-child, .w-richtext ul li:last-child {
	margin-bottom: 0 !important;
}
/* Navigation Default */
@media only screen and (min-width: 991px) {
	.navigation {
		--ease: cubic-bezier(0.6, 0.6, 0, 1);
		--duration: 1s;
		/*background-color: #fff !important;*/
		transition: background-color var(--duration) var(--ease);
	}
	.navigation .container-medium.nav {
		background-color: rgb(255, 255, 255, 0);
		border-radius: 0px;
		border-width: 1px;
		border-color: transparent;
		/*width: 1519.2px;*/
		/*padding: 16px 96px;*/
		margin-top: 0px;
		transition: width var(--duration) var(--ease),
		margin-top var(--duration) var(--ease),
		padding var(--duration) var(--ease),
		border-color var(--duration) var(--ease);
	}
	.navigation .nav__logo {
		position: relative;
		width: 160px;
		overflow: hidden;
		transition: width var(--duration) var(--ease);
	}
	.navigation.scrolled .logo-mark {
		padding-right: 0;
		transition: padding-right var(--duration) var(--ease);
	}
	.navigation .nav__logo .nav__line {
		position: absolute;
		top: 50%;
		left: 40px;
		transform: translateY(-50%);
		opacity: 0;
		display: none;
	}
	.navigation .nav__links-wrapper {
		transform: translate(0, 0);
		transition: transform var(--duration) var(--ease);
	}
	/* Navigation Scrolled */
	.navigation.scrolled {
		background-color: transparent;
	}
	.navigation.scrolled .container-medium.nav {
		border-radius: 8px;
		width: 60rem;
		margin-top: 0.5rem;
		padding: 0.5rem;
		border-color: var(--colors--grey-200);
		background-color: rgb(255, 255, 255, 0.60);
		backdrop-filter: blur(36px);
	}
	.navigation.scrolled .nav__logo {
		width: 42px;
	}
	.navigation.scrolled .logo-mark {
		padding-right: 10px;
	}
	.navigation.scrolled .nav__logo .nav__line {
		opacity: 1;
		display: block;
	}
	.navigation.scrolled .nav__links-wrapper {
		transform: translate(-3.5rem, 0.2rem);
	}
}
.footer-link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background-color: var(--colors--main--text-primary);
	transform-origin: left;
	transform: scaleX(var(--scale-x, 0));
}
.home-hero-underline-one {
	position: relative;
	display: inline;
}
.home-hero-underline-two {
	position: relative;
	display: inline;
}
.home-hero-underline-one::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 5px;
	background-color: #C2E78A;
	transform: scaleX(0);
	transform-origin: bottom left;
	animation: underline-one 0.6s ease-in-out forwards;
}
.home-hero-underline-two::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 5px;
	background-color: #C2E78A;
	transform: scaleX(0);
	transform-origin: bottom left;
	animation: underline-two 0.8s ease-in-out forwards 0.6s;
}
@keyframes underline-one {
	from {
		transform: scaleX(0);
		transform-origin: bottom left;
	}
	to {
		transform: scaleX(1);
		transform-origin: bottom left;
	}
}
@keyframes underline-two {
	from {
		transform: scaleX(0);
		transform-origin: bottom left;
	}
	to {
		transform: scaleX(1);
		transform-origin: bottom left;
	}
}
.blog-filter__scrollbar::-webkit-scrollbar {
  display: none;
}
.blog-filter__scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.sab-title{
	margin-bottom: 1.5rem!important;
}
.sab-p{
	margin-bottom: 2.5rem!important;
}
.sidebar-banner-title{
	margin-bottom: 0.5rem!important;
}
.sidebar-banner-p{
	margin-bottom: 1.5rem!important;
}
.black-sidebar-text{
	color: var(--colors--main--text-primary);
}
.footer-cta-title{
	margin-bottom: 1.5rem;
}
.footer-cta-p{
	margin-bottom: 2.5rem;
}
@media (max-width: 991.98px){
	.blog__tags-filter{
		overflow-x: auto;
		max-width: 100%;
	}
	.blog__tags-filter .p-body.black-sidebar-text{
		white-space: nowrap;
	}
	.blog-filter__scrollbar{
		width: 100%!important;
	}
}
.blog__article-tags-wrap.p-small{
	margin-bottom: 1.5rem;
}
@media (max-width: 767.98px){
	.blog__article-tags-wrap.p-small{
		flex-wrap: wrap;
		gap: 10px;
	}
}
.sticky-toc-mettevo {
	padding: 0px;
}

.article-nav__item {
	color: var(--colors--main--brand-dark);
	cursor: pointer;
	

    font-family: var(--body--font-body);
    font-size: var(--content--p-body-size);
    line-height: var(--content--p-body-height);

    font-weight: 500;

	color: var(--colors--main--text-primary);

	position: relative;

	list-style: none;

	padding:8px 0 5px 10px;
}
.article-nav__item.active{
	font-weight: 800;
	opacity: 1 !important;
}
.article-nav__item.title3{
	padding-left: 20px;
	font-size: 90%;
	opacity: 0.8;
}
.article-nav__item:before{
	height: 100%;
	width: 2px;
	background-color: var(--colors--main--brand-primary);
	content: "";
	display: inline-block;
	position: absolute;
	left:0;
	top:0;
}
.toc-container{
	width: 100%;
}
.mettevo-toc-title{
	font-size: var(--h5--size);
	line-height: var(--h5--line-height);
	letter-spacing: var(--h5--letter-spacing);
	font-weight: var(--h5--font-weight);
	margin-top: 0;
}
@media (max-width: 991.98px){
	.toc-container{
		display: none!important;
	}
}
#search-suggestions{
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: white;
	border: 1px solid #ccc;
	max-height: 200px;
	overflow-y: auto;
	display: none;
	z-index: 9999;
	box-sizing: border-box;
}
.blog__search-wrapper{
	position: relative; 
	width: 300px; 
	max-width: 100%;
}
.mettevo-share-buttons{
	display: flex; 
	gap: 10px;
	margin-bottom: 10px;
	margin-left: auto;
	justify-content: flex-end;
}
.mettevo-share-buttons button{
	background-color: transparent;
}
.dfaic > a{
	display: flex;
	align-items: center;
}




.category-banner{
	padding: 80px 0 60px;
	background-color: #F3F6F0;
}
.category-banner-container{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.category-banner__search{
	position: relative;
	max-width: 554px;
	width: 100%;
}
.search-icon{
	position: absolute;
	top:50%;
	right:16px;
	transform: translateY(-50%);
}

@media (max-width: 767px){
	.category-banner-container{
		flex-direction: column;
		margin-left: 1rem;
		margin-right: 1rem;
		gap:1rem;
	}
}
.blog__grid-opr{
	grid-template-columns: 1fr;
	gap:76px;
}
.blog__article-link{
	border-bottom: none;
}
.blog__article-content{
	border-top: 1px solid #CAE795;
	padding-top: 16px;
}
.category-back{
	margin-bottom: 3rem;
}
.category-card{
	display: flex;
	flex-direction: column;
	gap:14px;
	padding: 16px 0;
}
.category-card-title{
	color:#1F2D1B;
	font-size: 32px;
	font-style: normal;
	font-weight: 500;
	line-height: 116%;
	letter-spacing: -0.32px;
}
.category-card-description{
	color: rgba(22, 31, 24, 0.70);
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 120%;
	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4; /* Limits to 4 lines */
    overflow: hidden;
	font-family: var(--body--font-body);
	font-size: var(--body--font-size);
    color: var(--colors--main--text-primary);
}
.row-border{
    border-top: 1px solid #CAE795;
    grid-column: 1 / 3;
}
.categories-page-title{
	margin-bottom: 44px;
}
.home-banner{
	padding: 100px 0 80px;
	background-color: #F3F6F0;
	position: relative;
}
.home-banner:before{
	content:"";
	width: 100vw;
	height: 100%;
	position: absolute;
	top:0;
	left:50%;
	transform: translate(-50%);
	display: block;

	background-color: #F3F6F0;
	z-index: -1;
}
.home-banner__title{
	text-align: center;
}
.home-banner__search{
	max-width: 554px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}
.search-icon{
	position: absolute;
	top:50%;
	right:16px;
	transform: translateY(-50%);
}

@media (max-width: 767px){
	.row-border{
	    display: none;
	}
	.category-card{
		border-top: 1px solid #CAE795;
	}
}
.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    margin: 10px 0;
}
.breadcrumb-item a {
    text-decoration: none;
    color: #1F2D1B;
}
.breadcrumb-item a:hover {
    text-decoration: underline;
}
.breadcrumb-item.active {
    color: #71717A;
    font-weight: bold;
}
.breadcrumb-item svg {
    vertical-align: middle;
    width: 20px;
    height: 20px;
}
.breadcrumb-separator {
    color: #71717A;
}

.blog__search-field.w-input{
	margin-bottom: 0;
	height: 56px;
	border-radius: 12px;
}
.rm-card-btn{
	margin-top:10px;
}

.alert{
	padding: 1rem;
	border-radius: 5px;
	background: #ffd40035;
	border-left: 4px solid #f59e0b;
	margin-bottom: 1rem;
}

.alert.alert-danger, .alert.alert-error{
	background: #ff6a551a;
	border-left: 4px solid #ff6a55;
}

.alert.alert-info{
	background: #2a85ff1a;
	border-left: 4px solid #2a85ff;
}
.alert.alert-success{
	background: ##72a33324;
	border-left: 4px solid #72a333;
}

.alert .lead{
	font-size: 1.4rem
}

.text-2lines {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    min-height: calc(1.2em * 2);
}

.text-5lines {
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

hr {
    margin: 20px 0;
    border: 0;
    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid #ffffff;
}

.blog__rich-text .sommaire {
    display: none;
}

.search-icon{
	cursor:pointer;
}

/* The breadcrumb home and search icons are Font Awesome glyphs rather than the
   theme's inline SVGs, so they are downloaded once with the font instead of
   being repeated in all 1526 generated pages. These two rules carry the colour
   and alignment that were attributes on the SVGs. */
.breadcrumb-item .breadcrumb-home {
	vertical-align: middle;
	color: #71717A;
}
span.search-icon {
	color: #3F3F46;
	line-height: 1;
}

@media screen and (max-width: 991px) {
	/* On the index the rail lists the same categories as the cards under it,
	   so on a phone it stays below them rather than pushing the cards - which
	   carry the counts and descriptions - past the fold. Category and article
	   pages keep it first, where nothing duplicates it. */
	.blog__parent--index .blog__wrapper {
		order: 2;
	}
}