/*	==================================================
	MAIN
====================================================== */
body{
	--header-main-height : 6rem;
	position: relative;
	min-height: 100vh;
	padding-top: var(--header-main-height);
	padding-bottom: 0;
}

/*	==================================================
	HEADER MAIN
====================================================== */
#header_main {
	position: fixed;
    height: var(--header-main-height);
    padding: 0;
    background: #f5f5f5;
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
#header_main .col{
	padding: 0;
}
#header_main #logo{
	display: inline-block;
	height: var(--header-main-height);
}
#header_main #logo a{
	display: flex;
	height: var(--header-main-height);
	padding: 0 2rem;
	background: #000;
}
#header_main #nav {
	display: inline-block;
	height: var(--header-main-height);
}
#header_main #nav ul{
	height: var(--header-main-height);
	margin-left: 2rem;
}
#header_main #nav li{
	display: inline-flex;
	height: var(--header-main-height);
	margin: 0;
	padding: 0;
}
#header_main #nav li + li::before{
	position: static;
	display: inline-block !important;
    margin: 0 2rem;
    padding-top: 2.4rem;
	content: "\f105";
	font-family: "Font Awesome 5 Free";
	font-style: normal;
	font-weight: 700;
	color: #909090;
}
#header_main #nav li a,
#header_main #nav li span{
	display: inline-block;
	padding-top: 2.4rem;
	text-transform: uppercase;
}
#header_main #espace_client {
    position: absolute;
    top: 0;
    right: 0;
    height: var(--header-main-height);
    border-left: 1px solid rgba(0, 0, 0, 0.2);
    z-index: 2;
}
#header_main #espace_client a{
	display: block;
	height: var(--header-main-height);
	line-height: var(--header-main-height);
	padding: 5px 4rem 0 4rem;
	color: #000;
	font-size: var(--font-size);
	text-transform: uppercase;
}
#header_main #espace_client a:hover{
	background-color: rgba(0, 0, 0, 0.2);
}

/*	==================================================
	ZONE DE CONTENU
====================================================== */
main{padding-bottom: 10rem;}
main .row{margin: 10rem 0;}
main .row:last-child{margin-bottom: 0;}

/*	==================================================
	PAGE > COMPANY
====================================================== */
/* Header */
p#slogan{margin-bottom: 2rem; font-family: "Baloo 2", sans-serif; font-weight: bold; color: #000; font-size: 2.2rem;}
#company-business-sectors{padding-right: 300px;}
#company-business-sectors span{display: inline-block; margin: 0 10px 10px 0; padding: 8px 20px; font-size: 1.4rem; text-transform: uppercase; border: 1px solid #000; border-radius: 5px;}
#h1-note p#nb_testimonies{color: gold;}
#nb_testimonies span{font-size: 3rem; font-family: "Baloo 2", sans-serif; font-weight: bold;}
/* Content */
#company-qualities-wrapper{margin-top: 7rem;}
#company-top-qualities-wrapper{display: grid; grid-template-columns: repeat(4, 4fr); gap: 2rem; justify-content: start;}
#company-top-qualities-wrapper.x3_items{grid-template-columns: repeat(3, 3fr);}
#company-top-qualities-wrapper > div{position: relative; margin-bottom: 3rem; padding: 8rem 2rem; text-align: center; background-color: gold; border-radius: 8px;}
#company-top-qualities-wrapper > div::before{position: absolute; top: 0; left: 50%; transform: translate3D(-50%, -50%, 0); width: 60px; height: 60px; line-height: 50px; content: "\f164"; font-size: 2rem; font-family: "Font Awesome 5 Free"; font-weight: 900; color: gold; background: #000; border: 5px solid #fff; border-radius: 100%;}
#company-top-qualities-wrapper div .quality_name{position: relative; z-index: 1;  font-family: "Baloo 2", sans-serif; font-weight: bold; color: #000; font-size: 2.5rem;}
#company-top-qualities-wrapper div .quality_explain{position: relative; z-index: 1; color: #000; font-size: 1.3rem; font-weight: 200;}
#company-top-qualities-wrapper div .quality_explain span{font-weight: 600;}
#company-top-qualities-wrapper div div.bgrd{position: absolute; z-index: 0; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.5; background-image: url(../images/icon_qualite_blanc.png); background-repeat: no-repeat; background-size: auto 60%; background-position: center;}
#company-other-qualities-wrapper span{display: inline-block; margin: 0 10px 10px 0; padding: 8px 20px 8px 12px; color: #fff; background: #000; border-radius: 10px;}
#company-bandeau-promo-row{margin-top: 12rem;}
#company-other-qualities-wrapper span::before{width: 50px; margin-right: 15px; content: "\f164"; font-size: 2rem; font-family: "Font Awesome 5 Free"; font-weight: 900; color: gold;}
#company-bandeau-promo-wrapper{padding: 4rem 0;}
#company-bandeau-promo-wrapper h2{font-size: 4rem; font-weight: 100; line-height: 120%;}
#company-bandeau-promo-wrapper h2 span{font-weight: 900;}
.widget_wrapper{margin-top: 4rem;}
.collaborators_wrapper{margin-top: 4rem;}

/*	==================================================
	PAGE > TESTIMONY (public/pages/rewrite-pages/testimony/show_testimony.php)
====================================================== */
#contact-wrapper{padding: 20px 0; border-bottom: 1px solid #ddd;}
.with_logo #contact-wrapper{padding-top: 70px;}
#contact-wrapper #contact-image{position: absolute; left: 0; top: 0; height: 120px; width: auto; transform: translateY(calc(-50% - var(--col-v-padding))); border: 1px solid #ddd; border-radius: 8px; overflow: hidden;}
#contact-wrapper #contact-image img{height: 120px; width: auto;}
#testimony-wrapper{padding: 20px 0;}
#testimony-wrapper > p{position: relative; padding-top: 40px; font-size: 2.5rem; line-height: 150%; font-weight: 200; font-style: italic;}
#testimony-wrapper > p:first-child::before{position: absolute; top: 0; left: 0; width: 100px; height: 100px; content: "\f10d"; font-family: "Font Awesome 5 Free"; font-weight: 900; color: var(--color-main);}
#contact-note{margin-top: 20px;}
#contact-note p, #contact-note span{line-height: 1; vertical-align: bottom; font-weight: 200; color: #909090;}

#qualities-wrapper{margin-top: 4rem; padding-top: 6rem; border-top: 1px solid #ddd;}

#company-wrapper{position: relative; padding-top: 60px;}
#company-wrapper #company-image{position: absolute; left: 0; top: 0; display: flex; align-items: center; height: 100px; max-width: 300px; transform: translateX(-25px) translateY(calc(-50% - var(--col-v-padding))); padding: 20px 30px; border: 1px solid #ddd; background: #fff; border-radius: 8px; overflow: hidden;}
#company-wrapper #company-image p{margin-bottom: 0;}
#company-wrapper #company-image img{max-height: 60px; width: auto; mix-blend-mode: multiply;}
#company-about-wrapper{padding: 20px 0;}
#company-about-wrapper #company_keywords{margin-bottom: 20px;}
#company-about-wrapper #company_keywords span{display: inline-block; margin: 0 10px 10px 0; padding: 8px 20px; font-size: 1.4rem; text-transform: uppercase; border: 1px solid #000; border-radius: 5px;}

#user-wrapper #user-image{position: absolute; left: 0; top: 0; display: flex; align-items: center; height: 100px; max-width: 300px; transform: translateX(-25px) translateY(calc(-50% - var(--col-v-padding))); padding: 20px 30px; border: 1px solid #ddd; background: #ffffff; border-radius: 8px; overflow: hidden;}
#user-wrapper #user-image p{margin-bottom: 0;}
#user-wrapper #user-image img{max-height: 60px; width: auto; mix-blend-mode: multiply;}
#user-about-wrapper{padding: 20px 0;}
#user-about-wrapper #user_keywords{margin-bottom: 20px;}
#user-about-wrapper #user_keywords span{display: inline-block; margin: 0 10px 10px 0; padding: 8px 20px; font-size: 1.4rem; text-transform: uppercase; border: 1px solid #000; border-radius: 5px;}
#user-about-links{margin-top: 40px;}
#user-about-links a.btn{margin-right: 20px;}

#legal-col p, #legal-col li, #legal-col a{font-weight: 200; color: #909090; font-size: 1.3rem;}
#legal-col span{color: inherit;}
#legal-col strong{font-weight: 600;}
#legal-col a{text-decoration: underline;}
#legal-col a:hover{color: #000}
/*
.layout-clients header nav{display: inline-block; margin: 0 0 0 1rem; padding: 0;}
.layout-clients header nav li{display: inline-block;}
.layout-clients header nav li a, .layout-clients header nav li span{display: inline-block; padding: 0; line-height: 49px; color: #909090; font-size: 1.3rem;}
.layout-clients header nav li + li a::before, .layout-clients header nav li + li span::before{padding: 0 1rem; content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 1rem;}
.layout-clients header nav li + li a:hover::before, .layout-clients header nav li + li span:hover::before{color: #909090;}
.layout-clients header nav li a:hover{color: var(--color-main);}
.layout-clients header #connect{display: inline-block; line-height: 44px; margin: 0; border-left: 1px solid #e5e5e5;}
.layout-clients header #connect a{display: inline-block; padding: 0 2rem; line-height: 44px; color: #909090; font-size: 1.3rem;}
.layout-clients header #connect a:hover{color: var(--color-main); background: #e5e5e5;}
*/