/*
 Theme Name:   SCE Électrique 2025
 Theme URI:    https://www.commparlimage.ca/sce/wp
 Description:  Thème en développement
 Author:       Jordan Ouellet
 Author URI:   https://www.commparlimage.ca
 Template:     blankslate
 Version:      1.0.0
 Text Domain:  sce
*/

/********************************************************************************************************************/

html{
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
}

html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, tt, var, legend, fieldset {
	margin: 0;
	padding: 0;
	text-decoration: none; 
}

img, fieldset {
	border: 0;
}

/* set image max width to 100% */
img {
	display: block;
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}

/* set html5 elements to block */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
}

ul li {
	list-style-type: none;
}

address {
	font-style: normal;
}


#human{display:none !important;}


html, body {
	width: 100%;
	height: 100%;
	scroll-behavior: smooth;
}

body {
	color: #fff;
	background-color: #111;
}

p {
	font-size: 1.125rem;
	line-height: 1.35;
}

p > a {
	font-weight: 500;
	color: inherit;
	text-decoration: underline;
	transition: color .2s;
}

p > a:hover {
	color: var(--hover-blue);
}

button {
	appearance: none;
	font-family: 'Montserrat';
	display: inline-block;
	border: none;
	background: none;
	cursor: pointer;
}

::before,
::after {
	display: block;
}

/* INITIALISATION ***************************************************************************************************/

.table{display:table;}
.flex{display:flex;}
.grid{display:grid;}

/********************************************************************************************************************/

.wrap{
	position: relative;
	width: 1360px;
	margin: 0 auto;
}

.wrap-lg {
	position: relative;
	max-width: 1800px;
	width: 95%;
	margin: 0 auto;
}

.specialheight{min-height:760px;}
.bold{font-weight:700;}
.light{font-weight:300;}
.container{display:flex;}
body.no-scroll{overflow: hidden;}

.dark-overlay{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.2;}
.blue-overlay{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--my-color); opacity: 0.6;}
.shadow{
	width:80%; padding-bottom:7%; z-index:-1; margin: auto;
	background:url(img/shadow.png) no-repeat top center/contain;
}
.anchor{position:relative; visibility:hidden; top:-150px; display:block;}
.overlay{position: fixed; width: 100%; height: 100%; background-color: #000; visibility: hidden; opacity: 0; z-index: 500;
	transition: all 0.6s;
}
.overlay.appear{visibility: visible; opacity: 0.3;}

/********************************************************************************************************************/
/*** General elements styling ****/
/********************************************************************************************************************/

/**
 * Utility classes
 **/

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

.text-center img {
	margin: 0 auto;
}

.align-center {
	margin: auto;
}

.col-align-center {
	align-items: center;
}

.rounded {
	border-radius: 30px;
}

/**
 * Title elements
 **/

.icon-title {
	display: flex;
	align-items: center;
	gap: 1rem;
	max-width: 440px;
	color: #fff;
	font-size: 1.5rem;
}

.icon-title::before {
	content: '';
	display: block;
	flex-shrink: 0;
	width: 3.75rem;
	height: 5.75rem;
	background-color: #fff;
	-webkit-mask: url(img/icons/flash-outline-icon.svg) no-repeat center center/contain;
	mask: url(img/icons/flash-outline-icon.svg) no-repeat center center/contain;
}

.section-title {
	font-size: 1.875rem;
	margin-bottom: 2rem;
}

/**
 * Text elements
 **/

.text-block h2 {
	font-size: 1.875rem;
	margin-bottom: 1rem;
}

.text-block > p:not(:last-child) {
	margin-bottom: 1rem;
}

.block-center {
	max-width: 85%;
	margin: auto;
}

.large-text p {
	font-size: 1.5rem;
}

.text-block.large-text h2,
.text-block.large-text > p:not(:last-child) {
	margin-bottom: 1.5rem;
}

/**
 * Buttons
 **/

.outline-btn {
	display: inline-block;
	font-size: 1.125rem;
	font-weight: 600;
	color: #fff;
	text-align: center;
	background-image: linear-gradient(#fff, #fff);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 0% 100%;
	padding: .75rem 1.5rem;
	border: 2px solid #fff;
	border-radius: 100px;
	transition: background-size .4s, color .4s;
}

.outline-btn:hover {
	color: var(--dark-blue);
	background-size: 100% 100%;
}

.colour-btn {
	position: relative;
	display: inline-block;
	font-size: 1.125rem;
	font-weight: 600;
	color: #fff;
	text-align: center;
	background-color: var(--dark-blue);
	background-image: linear-gradient(var(--hover-blue), var(--hover-blue));
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 0% 100%;
	padding: .75rem 1.5rem;
	border-radius: 100px;
	text-decoration: none;
	transition: background-size .4s;
}

.colour-btn:hover {
	color: #fff;
	background-size: 100% 100%;
}

/**
 * Socials section
 **/

.socials {
	color: #fff;
	align-items: center;
	gap: .5rem;
}

.socials .social-icon {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
	background-color: #fff;
	transition: background-color .2s;
}

.socials .social-icon.facebook {
	-webkit-mask: url(img/icons/facebook-icon.svg) no-repeat center center/contain;
	mask: url(img/icons/facebook-icon.svg) no-repeat center center/contain;
}

.socials .social-icon.twitter {
	-webkit-mask: url(img/icons/twitter-icon.svg) no-repeat center center/contain;
	mask: url(img/icons/twitter-icon.svg) no-repeat center center/contain;
}

.socials .social-icon.instagram {
	-webkit-mask: url(img/icons/instagram-icon.png) no-repeat center center/contain;
	mask: url(img/icons/instagram-icon.png) no-repeat center center/contain;
}

.socials .social-icon.youtube {
	-webkit-mask: url(img/icons/youtube.png) no-repeat center center/contain;
	mask: url(img/icons/youtube.png) no-repeat center center/contain;
}

.socials .social-icon:hover {
	background-color: var(--light-blue);
}

/**
 * Blocks
 **/

.col-2 {
	display: flex;
	gap: 5rem;
}

.col-2 > * {
	width: 100%;
	flex-grow: 1;
}

.col-2 > img {
	aspect-ratio: 16 / 10;
    min-width: 0;
    object-fit: cover;
}

.row-reverse {
	flex-direction: row-reverse;
}

/* Block with image and text */

.image-container {
	position: relative;
	display: block;
	background-color: var(--dark-blue);
	border-radius: 35px;
	overflow: hidden;
}

.image-container > img,
.image-container > picture {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
}

.image-container .overlay-content {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 50%;
	min-height: inherit;
	color: #fff;
	background-image: linear-gradient(to right, var(--dark-blue) 65%, transparent);
	padding: 3rem 0;
	box-sizing: border-box;
	z-index: 1;
}

/* Boxes with title, text and buttons */

.link-blocks {
	display: flex;
	justify-content: center;
	gap: 2rem;
	flex-wrap: wrap;
}

.link-blocks .block {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2rem;
	width: calc((100% / 3 ) - 2rem + (2rem / 3));
	min-height: 565px;
	color: #fff;
	padding: 3.5rem 2rem;
	box-sizing: border-box;
	border-radius: 25px;
	overflow: hidden;
}

.link-blocks .block::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 50%;
	background-image: linear-gradient(to bottom, var(--dark-blue), transparent);
}

.link-blocks .block::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--dark-blue);
	opacity: 0;
	transition: opacity .5s;
}

.link-blocks .block:hover::after {
	opacity: .75;
}

.link-blocks .block .bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	z-index: -1;
	transition: transform 1s;
}

.link-blocks .block:hover .bg {
	transform: scale(1.15);
}

.link-blocks .block > * {
	position: relative;
	z-index: 2;
}

.link-blocks .block h3 {
	font-size: 1.875rem;
}

.link-blocks .block a {
	align-self: flex-start;
	margin-top: auto;
}

.link-blocks .block p,
.link-blocks .block a {
	opacity: 0;
	visibility: hidden;
	transform: translateX(-30px);
	transition: opacity .3s, visibility .3s, transform .3s, background-size .4s, color .4s;
}

.link-blocks .block:hover p,
.link-blocks .block:hover a {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}

.link-blocks .block:hover a {
	transition-delay: .3s, .3s, .3s, 0s, 0s;
}

/* Image gallery */

.gallery {
	display: grid;
}

.gallery .gallery-image {
	overflow: hidden;
	aspect-ratio: 1;
	border-radius: 20px;
}

.gallery .gallery-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s;
}

.gallery .gallery-image:hover img {
	transform: scale(1.15);
}

/* Section backgrounds */

.colour-box {
	background: var(--dark-blue);
	padding: 3rem;
	border-radius: 25px;
}

.gray-box {
	color: #000;
	background: #dfdfdf;
	padding: 3rem;
	border-radius: 25px;
}

/********************************************************************************************************************/
/*** Navbar styling ****/
/********************************************************************************************************************/

nav {
	position: absolute;
	width: 100%;
	z-index: 1000;
	top: 0;
	transition: background-color .5s;
}

nav.open-menu,
nav.nav-scrolled.open-menu {
	background-color: transparent;
	box-shadow: none;
}

/**
 * Navbar top
 **/

nav .nav-top {
	background-color: #111;
	padding: 1rem 0;
}

nav.page-nav .nav-top {
	background-color: #11111199;
}

nav .nav-top > .container {
	gap: 3rem;
}

nav .nav-top .nav-top-group {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

nav .nav-top .nav-top-group:nth-child(2) {
	margin-left: auto;
}

nav .nav-top .top-item {
	display: flex;
	align-items: center;
	gap: .75rem;
	font-size: .95rem;
	color: #fff;
}

nav .nav-top a.top-item {
	transition: color .2s;
}

nav .nav-top a.top-item:hover {
	color: var(--light-blue);
}

nav .nav-top .top-item::before {
	content: '';
	display: block;
	width: 1.25rem;
	height: 1.25rem;
	background-color: #fff;
}

nav .nav-top .top-item.address::before {
	-webkit-mask: url(img/icons/address-icon.svg) no-repeat center center/contain;
	mask: url(img/icons/address-icon.svg) no-repeat center center/contain;
}

nav .nav-top .top-item.phone::before {
	-webkit-mask: url(img/icons/phone-icon.svg) no-repeat center center/contain;
	mask: url(img/icons/phone-icon.svg) no-repeat center center/contain;
}

nav .nav-top a.top-item::before {
	transition: background-color .2s;
}

nav .nav-top a.top-item:hover::before {
	background-color: var(--light-blue);
}

nav .nav-top .socials > p {
	font-size: .95rem;
}

/**
 * Navbar main
 **/

nav .nav-main {
	position: relative;
	padding: 1.25rem 0;
}

nav .nav-main .container {
	justify-content: space-between;
	align-items: center;
	gap: 3rem;
}

nav .nav-main .container .logo,
nav .nav-main .container .nav-cta-btns {
	flex-grow: 1;
	flex-basis: 0;
}

nav .nav-main .logo {
	transition: opacity .2s;
}

nav .nav-main .logo:hover {
	opacity: .75;
}

nav .nav-main .logo img {
	position: absolute;
	top: 0;
	width: 20vw;
	max-width: 200px;
	transition: max-width .4s, opacity .2s;
}

nav .nav-main .logo.large img {
	max-width: 376px;
	width: 20vw;
}

nav .nav-main .menu {
	display: flex;
	align-items: center;
}

nav .nav-main .menu > li > a {
	font-size: 1.125rem;
	font-weight: 400;
	color: #fff;
	padding: .75rem;
	border-bottom: 2px solid transparent;
	border-radius: 8px 8px 0 0;
	transition: background-color .2s, border-bottom .2s;
}

nav .nav-main .menu > li > a:hover,
nav .nav-main .menu > li.menu-item-has-children:hover > a {
	background-color: var(--dark-blue);
	border-bottom: 2px solid #fff;
}

nav .nav-main .menu li.menu-item-has-children {
	position: relative;
}

nav .nav-main .menu li.menu-item-has-children > a {
	display: flex;
	align-items: center;
	gap: .3rem;
}

nav .nav-main .menu li.menu-item-has-children > a::after {
	content: '';
	display: block;
	width: 1rem;
	height: 1rem;
	background-color: #fff;
	-webkit-mask: url(img/icons/flash-icon.svg) no-repeat center center/contain;
	mask: url(img/icons/flash-icon.svg) no-repeat center center/contain;
}

nav .nav-main .menu li.menu-item-has-children .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	width: 300px;
	border-radius: 0 8px 8px 8px;
	overflow: hidden;
}

nav .nav-main .menu li.menu-item-has-children .sub-menu::after {
	content: '';
	display: block;
	position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 3px 12px #00000033;
    z-index: -1;
}

nav .nav-main .menu li.menu-item-has-children:hover .sub-menu {
	display: block;
}

nav .nav-main .menu li.menu-item-has-children .sub-menu > li > a {
	display: block;
	color: #fff;
	background-color: var(--dark-blue);
	padding: .75rem;
	box-sizing: border-box;
	transition: background-color .2s;
}

nav .nav-main .menu li.menu-item-has-children .sub-menu > li > a:hover {
	background-color: var(--hover-blue);
}

nav .nav-main .nav-cta-btns {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 1rem;
}

nav .nav-main .cart-btn {
	position: relative;
	display: block;
}

nav .nav-main .cart-icon {
	width: 1.5rem;
	height: 1.5rem;
	background: #fff;
	-webkit-mask: url(img/icons/bag-icon.svg) no-repeat center center/contain;
	mask: url(img/icons/bag-icon.svg) no-repeat center center/contain;
	transition: background .2s;
}

nav .nav-main .cart-icon:hover {
	background: var(--light-blue);
}

nav .nav-main .cart-count{
	position: absolute;
	top: -20px;
	right: -12px;
	width: 25px;
	height: 25px;
	font-size: .875rem;
	line-height: 25px;
	text-align: center;
	color: #fff;
	background-color: red;
	border-radius: 50%;
	z-index: 2;
}

/**
 * Navbar - scrolled
 **/

nav.nav-scrolled {
	position: fixed;
	background-color: #333;
	visibility: visible;
	opacity: 1;
	box-shadow: 0 0 15px #00000099;
	transform: translateY(0);
	transition: transform 1s, opacity 1s, visibility 1s, background-color .5s, box-shadow .5s;
}

nav.nav-scrolled.hidden {
	visibility: hidden;
	opacity: 0;
	transform: translateY(-100%);
}

nav .nav-main .logo {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: 1.25rem;
	font-weight: 700;
	color: #fff;
}

nav.nav-scrolled .nav-main .logo img,
nav.page-nav .nav-main .logo img {
	position: static;
	max-width: 125px;
}

nav .nav-main .logo .logo-text {
	font-family: 'Roboto';
	font-weight: 900;
/*	font-size: 1rem;*/
	color: #fff;
	text-transform: uppercase;
	/*padding: .5rem;
	box-sizing: border-box;
	background-color: #fff;*/
	transform: skew(-10deg, 0);
}

/**
 * Mobile menu
 **/

nav .nav-main .mobile-menu-btn {
	display: none;
	width: 2.5rem;
	height: 2.5rem;
	background-color: #fff;
	-webkit-mask: url(img/icons/mobile-menu.svg) no-repeat center center/contain;
	mask: url(img/icons/mobile-menu.svg) no-repeat center center/contain;
	transition: background-color .2s;
}

nav .nav-main .mobile-menu-btn.close-menu {
	-webkit-mask: url(img/icons/close-icon.svg) no-repeat center center/contain;
	mask: url(img/icons/close-icon.svg) no-repeat center center/contain;
}

@media ( hover: hover ) {

	nav .nav-main .mobile-menu-btn:hover {
		background-color: var(--hover-blue);
	}

}

#mobile-menu {
	position: fixed;
	top: 0;
	right: -100%;
	width: 100%;
	height: 100vh;
	background-color: #333;
	background-image: url(img/mobile-bg.svg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: left;
	padding: 250px 3rem 3rem;
	box-sizing: border-box;
	overflow-y: auto;
	z-index: 999;
	transition: right .5s;
}

#mobile-menu.scrolled {
	padding-top: 120px;
}

#mobile-menu.open-menu {
	right: 0;
}

#mobile-menu .mobile-container {
	display: flex;
	justify-content: space-between;
}

#mobile-menu .mobile-container .mobile-btn-container {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

#mobile-menu .menu {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-bottom: 3rem;
}

#mobile-menu .menu > li > a {
	font-size: 1.5rem;
	font-weight: 500;
	color: #fff;
	padding-bottom: .3rem;
	border-bottom: 2px solid transparent;
	transition: border-bottom .2s;
}

#mobile-menu .menu > li > a:hover {
	border-bottom: 2px solid #fff;
}

#mobile-menu .menu-btn {
	display: none;
	width: max-content;
	font-size: 1rem;
	margin-bottom: 1rem;
}

#mobile-menu .address-block {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding-top: 2rem;
}

#mobile-menu .address-block::before {
	content: '';
	display: block;
	width: 1.5rem;
	height: 1.5rem;
	background: #fff;
	-webkit-mask: url(img/icons/address-icon.svg) no-repeat center center/contain;
	mask: url(img/icons/address-icon.svg) no-repeat center center/contain;
}

#mobile-menu .address-block h3 {
	font-size: 1.25rem;
	margin-bottom: .5rem;
}

#mobile-menu .address-block p {
	font-size: 1rem;
	margin-bottom: .5rem;
}

#mobile-menu .address-block a {
	display: inline-block;
	color: #fff;
	font-size: 1rem;
	font-weight: 500;
	padding-bottom: 3px;
	border-bottom: 1px solid transparent;
	transition: border-bottom .2s;
}

#mobile-menu .address-block a:hover {
	border-bottom: 1px solid #fff;
}

#mobile-menu .cart-btn {
	position: relative;
	display: none;
	align-items: center;
	gap: 1rem;
	margin-top: 3rem;
}

#mobile-menu .cart-icon {
	position: relative;
	width: 1.5rem;
	height: 1.5rem;
	background: #fff;
	-webkit-mask: url(img/icons/bag-icon.svg) no-repeat center center/contain;
	mask: url(img/icons/bag-icon.svg) no-repeat center center/contain;
	transition: background .2s;
}

#mobile-menu .cart-btn:hover .cart-icon {
	background: var(--dark-blue);
}

#mobile-menu .cart-count {
	position: absolute;
	top: -8px;
	right: 8px;
	width: 25px;
	height: 25px;
	font-size: .875rem;
	line-height: 25px;
	text-align: center;
	color: #fff;
	background-color: red;
	border-radius: 50%;
	z-index: 2;
}

/********************************************************************************************************************/
/*** Home-page - Hero section styling ****/
/********************************************************************************************************************/

#hero-section {
	position: relative;
	height: 100vh;
	height: 100dvh;
	height: 100%;
	overflow: hidden;
	transition: border-radius .5s, scale .5s;
}

#hero-section.scrolled {
	border-radius: 50px;
	scale: .95;
}

#hero-section .hero-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	object-fit: cover;
}

#hero-section .hero-overlay-shape {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	z-index: 2;
	transition: left 2s;
}

#hero-section .hero-overlay-shape.slide-out {
	left: -100%;
}

#hero-section .hero-slider,
#hero-section .hero-content {
	height: 100%;
}

#hero-section .hero-content .hero-title {
	position: absolute;
    top: 12.5rem;
    right: 10%;
    width: 50%;
	font-size: 2.75rem;
	color: #fff;
	text-shadow: 1.414px 1.414px 4.85px rgba(0, 0, 0, 0.75);
}

#hero-section .hero-content .hero-cta {
	position: absolute;
	width: max-content;
	max-width: 100%;
	bottom: 5%;
	font-size: 1.5rem;
	background-image: linear-gradient(#fff, #fff);
	z-index: 5 !important;
	transition: background-size .4s, color .4s;
}

#hero-section .hero-content .hero-cta:hover {
	color: var(--dark-blue);
}

#hero-section .hero-content .hero-title.centered,
#hero-section .hero-content .hero-cta.centered {
	left: 0;
	right: 0;
	text-align: center;
	margin: auto;
}

/********************************************************************************************************************/
/*** Home-page - Home content section styling ****/
/********************************************************************************************************************/

#home-content > * {
	padding: 4rem 0;
}

/**
 * Secteurs section
 **/

#home-content .secteurs {
	padding-top: 1.5rem;
}

#home-content .secteurs .icon-title {
	margin-bottom: 3rem;
}

/**
 * Services section
 **/

#home-content .services .wrap-lg::before {
	content: '';
	display: block;
	position: absolute;
	top: -425px;
	aspect-ratio: 2.5/1;
	width: 100%;
	background: url(img/logo-sce-dark.svg) no-repeat center center/contain;
	opacity: .02;
	z-index: -2
}

#home-content .services .container {
	align-items: flex-start;
	gap: 3rem;
}

#home-content .services .service-blocks {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6rem 3rem;
}

#home-content .services .service-blocks .service {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	color: #fff;
}

#home-content .services .service-blocks .service::before {
	content: '';
	display: block;
	flex-shrink: 0;
	width: 1.5rem;
	height: 1.5rem;
	background-color: var(--dark-blue);
	-webkit-mask: url(img/icons/arrow-right-icon.svg) no-repeat center center/contain;
	mask: url(img/icons/arrow-right-icon.svg) no-repeat center center/contain;
	margin-top: 5px;
}

#home-content .services .service-blocks .service h3 {
	font-size: 1.875rem;
	margin-bottom: 1rem;
}

#home-content .services .service-blocks .service p {
	max-width: 75%;
}

/**
 * À propos section
 **/

#home-content .apropos .image-container {
	min-height: 800px;
}

#home-content .apropos .image-container > img,
#home-content .apropos .image-container > picture,
#home-content .apropos .image-container > picture > img {
	right: 0;
	height: 100%;
	object-fit: cover;
}

#home-content .apropos .image-container .overlay-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding-left: 50px;
}

#home-content .apropos h2 {
	font-size: 3rem;
	margin-bottom: 1.5rem;
}

#home-content .apropos p {
	font-size: 1.5rem;
	line-height: 1.5;
	margin-bottom: 3rem;
}

#home-content .apropos .text-block > * {
	max-width: 85%;
}

/**
 * Projets section
 **/

#home-content .projets .container {
	align-items: center;
	gap: 2rem;
	color: #fff;
	padding: 0 50px;
	margin-bottom: 5rem;
}

#home-content .projets .container .text-block h2 {
	font-size: 1.875rem;
	margin-bottom: 1rem;
}

#home-content .projets .container a {
	flex-shrink: 0;
}

#home-content .projets .projet-slider::before,
#home-content .projets .projet-slider::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	height: 100%;
	width: 12%;
	z-index: 2;
}

#home-content .projets .projet-slider::before {
	left: 0;
	background-image: linear-gradient(to right, #111, rgba(17, 17, 17, .75),  transparent);
}

#home-content .projets .projet-slider::after {
	right: 0;
	background-image: linear-gradient(to left, #111, rgba(17, 17, 17, .75),  transparent);
}

#home-content .projets .projet-slide {
	display: flex;
	align-items: stretch;
	width: clamp(200px, 75%, 1360px);
	background-color: #202020;
	border-radius: 25px;
	overflow: hidden;
}

#home-content .projets .projet-slide > img {
	width: 45%;
	aspect-ratio: 1.05;
	object-fit: cover;
}

#home-content .projets .projet-slide .projet-content {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-direction: column;
	width: 55%;
	color: #fff;
	padding: 2rem;
	box-sizing: border-box;
}

#home-content .projets .projet-slide .projet-content h3 {
	font-size: 1.5rem;
	margin-bottom: 1.5rem;
}

#home-content .projets .projet-slide .projet-content a {
	margin-top: 2.5rem;
}

#home-content .projets .projet-slider .slide-arrow {
	all: unset;
	display: inline-block;
	position: absolute;
	top: 50%;
	width: 1.5rem;
	height: 1.5rem;
	background-color: #fff;
    transform: translateY(-50%);
    z-index: 5;
    cursor: pointer;
    transition: background-color .3s;
}

#home-content .projets .projet-slider .slide-arrow:hover {
	background-color: var(--hover-blue);
}

#home-content .projets .projet-slider .slide-arrow.slide-prev {
	left: 2rem;
	-webkit-mask: url(img/icons/arrow-left-icon.svg) no-repeat center center/contain;
	mask: url(img/icons/arrow-left-icon.svg) no-repeat center center/contain;
}

#home-content .projets .projet-slider .slide-arrow.slide-next {
	right: 2rem;
	-webkit-mask: url(img/icons/arrow-right-icon.svg) no-repeat center center/contain;
	mask: url(img/icons/arrow-right-icon.svg) no-repeat center center/contain;
}

/**
 * Video section
 **/

#home-content .video-wrap{position:relative; margin:0 auto; width:1000px;}

#home-content .video-section{position:relative;}

#home-content .video-section .wrap {
	justify-content: center;
	align-items: center;
	display:flex;
	flex-wrap:wrap;
	gap: 5rem;
}

#home-content .video-section img {
	width: 30%;
}

#home-content .video-section iframe {
	width: 55%;
	height: auto;
	aspect-ratio: 16/9;
}

#home-content .video-section .video_only iframe{
	width:100% !important;
}

#home-content .video-section .single-video{width:100%; display:flex; align-items: center; justify-content:space-between;}
#home-content .video-section .half-video{width:47%; max-width: calc(50% - 2.5rem);}

/**
 * Clients section
 **/

#home-content .clients .container {
	align-items: center;
	gap: 3rem;
}

#home-content .clients .container img {
	position: relative;
	border-radius: 25px;
	z-index: 2;
}

#home-content .clients .client-boxes {
	display: flex;
	gap: 2rem;
	width: 87%;
	margin-top: -50px;
	margin-left: auto;
}

#home-content .clients .client-boxes .box {
	width: calc((100% / 3) - 2rem + (100% - 2rem));
	flex-grow: 1;
	color: #000;
	background-color: #dfdfdf;
	padding: 4.75rem 2rem;
	box-sizing: border-box;
	border-radius: 25px;
}

#home-content .clients .client-boxes .box p:not(:last-child) {
	margin-bottom: 2rem;
}

#home-content .clients .client-boxes .box .client-name {
	font-weight: 700;
}

/**
 * Contact section
 **/

#home-content .contact .container {
	background-color: var(--dark-blue);
	border-radius: 25px;
	overflow: hidden;
}

#home-content .contact .form-section {
	width: 47%;
	background-color: var(--dark-blue);
	padding: 3rem 4.5rem;
	box-sizing: border-box;
}

.form-section form {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 2rem;
	margin-top: 2rem;
}

.form-section form > * {
	width: 100%;
}

.form-section form .half {
	width: 46.5%;
}

.form-section form .third {
	width: 29.5%;
}

.form-section form input,
.form-section form select,
.form-section form textarea {
	font-family: 'Montserrat';
	font-size: 1.125rem;
	color: #fff;
	background: none;
	padding: 0;
	padding-bottom: .75rem;
	border: none;
	border-bottom: 1px solid #fff;
}

.form-section form input:focus,
.form-section form textarea:focus {
	outline: none;
	border-bottom: 1px solid var(--light-blue);
}

.form-section form textarea {
/*	height: 25px;*/
	margin-top: 2rem;
}

.form-section form ::placeholder {
	color: #fff;
	opacity: .75;
}

.form-section form button[type=submit] {
	color: var(--dark-blue);
	background-color: #fff;
	background-image: none;
	border: 0;
	cursor: pointer;
	transition: background-color .4s, color .4s;
}

.form-section form button[type=submit]:hover {
	color: #fff;
	background-color: var(--hover-blue);
}

#map {
	width: 53%;
	border-radius: 25px 0 0 25px;
	overflow: hidden;
}

#map .maplibregl-marker {
	cursor: pointer;
}

#map .maplibregl-popup h3,
#map .maplibregl-popup p {
	font-size: .875rem;
	color: #000;
}

#home-content .contact iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: inherit;
	border: none;
}

/**
 * Bannière section
 **/

#home-content .banner .image-container {
	min-height: 275px;
}

#home-content .banner .image-container > img {
	width: 100%;
	height: 100%;
	left: -150px;
	object-fit: cover;
	transition: opacity .4s;
}

#home-content .banner .image-container:hover > img {
	opacity: .75;
}

#home-content .banner .image-container .overlay-content {
	width: 45%;
	padding-left: 100px;
	background-image: linear-gradient(to left, var(--dark-blue) 40%, rgba(var(--dark-blue-rgb), .9), transparent);
	margin-left: auto;
	transition: width .4s;
}

#home-content .banner .image-container:hover .overlay-content {
	width: 65%;
}

#home-content .banner .text-block > img {
	max-width: 12.5rem;
	margin-bottom: .5rem;
}

#home-content .banner .logo-text {
	font-size: 1.875rem;
	font-weight: 600;
}

.logos-associations-section{position:relative; background:#ddd; padding:30px 0; text-align:center; border-radius:50px;}
.logos-associations-section ul{display:inline-flex; flex-wrap:wrap; justify-content:center;}
.logos-associations-section ul li{margin:0 40px;}
.logos-associations-section ul li img{position:relative; max-height:200px; width:auto;}

/********************************************************************************************************************/
/*** General page styling ****/
/********************************************************************************************************************/

#page-top {
	position: relative;
	min-height: 600px;
	background-image: linear-gradient(to top, var(--hover-blue), var(--dark-blue));
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	overflow: hidden;
	transition: border-radius .5s, scale .5s;
}

#page-top.scrolled {
	border-radius: 50px;
	scale: .95;
}

#page-top::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: .35;
}

/*#page-top::after {
	content: '';
	display: block;
	position: absolute;
	top: 12%;
	left: -80px;
	width: 500px;
	height: 100%;
	background: url(img/background-shape.svg) no-repeat center center/cover;
	transform: scale(1.25);
}*/

#page-top h1 {
	position: absolute;
	bottom: 20%;
	left: 0;
	right: 0;
	font-size: 3rem;
	text-align: center;
	text-shadow: 1.414px 1.414px 4.85px rgba(0, 0, 0, 0.75);
	z-index: 5;
}

#page-top h1 small {
	display: block;
	font-size: 2rem;
	font-weight: 600;
}

.page-content {
	padding-top: 4rem;
}

.page-content section {
	padding: 4rem 0;
}

#general-page h2,
#general-page h3 {
	margin: 2rem 0 1rem;
}

#general-page h3,
#general-page p {
	margin-bottom: 10px;
}

#general-page p + h2,
#general-page ul + h2 {
	margin-top: 30px;
}

body:not(.woocommerce-page) #general-page ul {
	padding: 1.5rem  0 1.5rem 3rem;
}

body:not(.woocommerce-page) #general-page ul li {
	font-size: 1.125rem;
	list-style-type: initial;
	color: var(--font-color);
	line-height: 1.35;
	margin-bottom: 10px;
}

/********************************************************************************************************************/
/*** À propos styling ****/
/********************************************************************************************************************/

#apropos .section-1 img {
	border-radius: 25px;
	margin-top: 6rem;
}

#apropos .timeline-container {
	background: var(--dark-blue);
	padding: 3rem;
	box-sizing: border-box;
	border-radius: 30px;
}

#apropos .timeline {
	position: relative;
}

#apropos .timeline::before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	width: 3px;
	height: 100%;
	background: #fff;
	margin: auto;
}

#apropos .timeline .block {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 2rem 0;
}

#apropos .timeline .block:nth-child(even),
#apropos .timeline .block:nth-child(even) .year {
	flex-direction: row-reverse;
}

#apropos .timeline .block::before {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	width: 1.25rem;
	height: 1.25rem;
	background: var(--dark-blue);
	border: 4px solid #fff;
	box-sizing: border-box;
	border-radius: 50%;
	transform: translateY(-50%);
	margin: auto;
}

#apropos .timeline .block .text-block {
	width: 47%;
}

#apropos .timeline .block .year {
	display: flex;
	align-items: center;
	gap: 3rem;
	width: 47%;
}

#apropos .timeline .block .year h3 {
	font-size: 3rem;
}

#apropos .timeline .block .year img {
	min-width: 0;
	border-radius: 20px;
}

#apropos .icon-title {
	justify-content: center;
}

#apropos .link-blocks {
	margin-top: 2rem;
}

#apropos .link-blocks .block {
	width: calc((90% / 3 ) - 2rem + (2rem / 3));
}

/********************************************************************************************************************/
/*** Services styling ****/
/********************************************************************************************************************/

/**
 * Services page
 */

#services .service-list {
	background: #dfdfdf;
	color: #000;
}

#services .service-list .icon-title {
	color: #000;
	padding-top: 2.5rem;
}

#services .service-list .icon-title::before {
	background-color: #000;
}

#services .service-list .container {
	flex-wrap: wrap;
	gap: 3rem 1.5rem;
	padding: 3.5rem 5rem;
}

#services .service-list .service {
	display: flex;
	gap: .75rem;
	width: calc((100% / 3) - 1.5rem + (1.5rem / 3));
}

#services .service-list .service::before {
	content: '';
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
	background: var(--dark-blue);
	-webkit-mask: url(img/icons/arrow-down-icon.svg) no-repeat center center/contain;
	mask: url(img/icons/arrow-down-icon.svg) no-repeat center center/contain;
}

#services .service-list .service.open::before {
	transform: scale(-1);
}

#services .service-list .service h3 {
	cursor: pointer;
	transition: color .2s;
}

#services .service-list .service h3:hover,
#services .service-list .service.open h3 {
	color: var(--dark-blue);
}

#services .service-list .service .service-text {
	display: none;
}

#services .service-list .service .service-text p {
	font-size: 1rem;
	margin-top: 1rem;
}

/**
 * Individual service page
 */

#service-single .section-2 .col-2,
#service-single .section-3 .col-2 {
	align-items: center;
}

#service-single .section-5 .icon-title {
	height: max-content;
	flex-shrink: 0;
}

#service-single .section-5 .container {
	gap: 5rem;
}

#service-single .col-2 img {
	aspect-ratio: 16/10;
	min-width: 0;
	object-fit: cover;
}

#service-single .text-block ul {
	padding: 1rem 0 0 1.5rem;
}

#service-single .text-block ul li {
	display: flex;
	align-items: center;
	gap: .75rem;
}

#service-single .text-block ul li::before {
	content: '';
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
	background: var(--dark-blue);
	-webkit-mask: url(img/icons/arrow-right-icon.svg) no-repeat center center/contain;
	mask: url(img/icons/arrow-right-icon.svg) no-repeat center center/contain;
}

.colour-box .text-block ul li::before{background:#fff !important;}
.colour-box .text-block ul{padding:1rem 0 1.5rem 1.5rem !important;}

#service-single .text-block ul li:not(:last-child) {
	margin-bottom: 1.25rem;
}

#service-single .faq {
	flex-grow: 1;
}

#service-single .faq .question {
	padding: 1.5rem 2rem;
	border: 2px solid #dfdfdf;
	box-sizing: border-box;
	cursor: pointer;
	transition: color .4s, background .4s;
}

#service-single .faq .question:hover,
#service-single .faq .question.open {
	color: #000;
	background: #dfdfdf;
}

#service-single .faq .question:not(:last-child) {
	margin-bottom: 1.25rem;
}

#service-single .faq .question h3 {
	font-size: 1.25rem;
}

#service-single .faq .question .answer {
	display: none;
	margin-top: 1rem;
}

#service-single .gallery {
	grid-template-columns: repeat(4, 1fr);
	gap: 3rem;
	margin: 4rem 0;
}

#service-single .gallery .gallery-image {
	display: none;
}

#service-single .gallery .gallery-image:nth-child(-n+8) {
	display: block;
}

#service-single .gallery-btn {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	color: #fff;
	font-weight: 700;
	font-size: 1.25rem;
}

#service-single .gallery-btn::after {
	content: '';
	width: 1.25rem;
	height: 1.25rem;
	background: #fff;
	-webkit-mask: url(img/icons/arrow-down-icon.svg) no-repeat center center/contain;
	mask: url(img/icons/arrow-down-icon.svg) no-repeat center center/contain;
}

#service-single .gallery-btn.show-less-btn::after {
	transform: scale(-1);
}

#service-single .btn-container {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 2rem 5rem;
}

#service-single .image-container {
	min-height: 800px;
}

#service-single .image-container > img {
	right: 0;
	height: 100%;
}

.section-7 .image-container > img{height:auto !important;}

#service-single .image-container .overlay-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding-left: 50px;
}

#service-single .image-container .overlay-content h2 {
	font-size: 3rem;
	margin-bottom: 1.5rem;
}

#service-single .image-container .overlay-content p {
	font-size: 1.5rem;
	line-height: 1.5;
	margin-bottom: 3rem;
}

#service-single .image-container .overlay-content .text-block > * {
	max-width: 85%;
}

/********************************************************************************************************************/
/*** Carrières styling ****/
/********************************************************************************************************************/

#careers .section-3 .flex {
	justify-content: center;
	flex-wrap: wrap;
	gap: 3rem;
}

#careers .section-3 .block {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	max-width: 45%;
	color: #000;
	background: #dfdfdf;
	padding: 2rem;
	box-sizing: border-box;
	border-radius: 15px;
}

#careers .section-3 .block p {
	font-size: 1rem;
}

#careers .section-3 .block .outline-btn {
    color: var(--dark-blue);
    background-image: linear-gradient(var(--dark-blue), var(--dark-blue));
    padding: .75rem 3rem;
    border: 2px solid var(--dark-blue);
}

#careers .section-3 .block .outline-btn:hover {
	color: #fff;
}

/********************************************************************************************************************/
/*** Clients styling ****/
/********************************************************************************************************************/

#clients .client-boxes .grid {
	position: relative;
	grid-template-columns: 1fr 1fr;
	gap: 5.5rem;
}

#clients .client-boxes .box {
	position: absolute;
	color: #000;
	background: #dfdfdf;
	padding: 1.8rem 1.8rem 2.5rem;
	box-sizing: border-box;
}

#clients .client-boxes .box::after {
	content: '';
	position: absolute;
	left: 100px;
	bottom: -28px;
	width: 30px;
	height: 30px;
	background: #dfdfdf;
	clip-path: polygon(0 0, 100% 0, 100% 100%);
}

#clients .client-boxes .box h2 {
	font-size: 1.875rem;
	margin-bottom: 1.5rem;
}

#clients .client-boxes .box h3 {
	font-size: 1.5rem;
	margin: 1.5rem 0 .3rem
}

#clients .client-boxes .box img {
	display: block;
	max-width: 240px;
	max-height: 100px;
	object-fit: contain;
	object-position: left;
	margin-top: 1.5rem;
}

/********************************************************************************************************************/
/*** Projets styling ****/
/********************************************************************************************************************/

#projets .main {
	width: 60%;
}

#projets .main .grid {
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
}

#projets .main .projet .projet-image {
	aspect-ratio: 1;
}

#projets .main .projet h3 {
	margin: 1rem 0;
}

/* Individual project page */

#projets.single .main h3 {
	font-size: 1.5rem;
	margin: 2rem 0;
}

#projets.single .main-text p {
	margin-bottom: 1.25rem;
}

#projets.single .main-text ul {
	margin: 2rem 0 2rem 3rem;
}

#projets.single .main-text ul li {
	list-style-type: disc;
	margin-bottom: .3rem;
}

#projets.single .main .category {
	font-size: 1.125rem;
	margin: 2rem 0 3rem;
}

#projets.single .main .main-image {
	margin-top: 3rem;
}

#projets .main .projet .projet-image,
#projets.single .main .main-image {
	display: block;
	width: 100%;
	border-radius: 20px;
	overflow: hidden;
}

#projets .main .projet .projet-image img,
#projets.single .main .main-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s;
}

#projets .main .projet .projet-image:hover img,
#projets.single .main .main-image:hover img {
	transform: scale(1.15);
}

#projets.single .main .gallery {
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-top: 1.5rem;
}

#projets .sidebar {
	position: sticky;
	top: 100px;
	width: 40%;
	height: max-content;
	margin-left: 4rem;
}

#projets .sidebar .category-link {
	display: block;
	font-size: 1.5rem;
	font-weight: 600;
	color: #fff;
	background: var(--dark-blue);
	padding: 1.25rem 1.5rem;
	border-radius: 15px;
	margin-bottom: 1.25rem;
	transition: background .2s;
}

#projets .sidebar .category-link:hover {
	background: var(--hover-blue);
}

#projets .sidebar .sidebar-cta-box {
	color: #000;
	background: #dfdfdf;
	padding: 1.5rem;
	box-sizing: border-box;
	border-radius: 15px;
	margin-top: 3rem;
}

#projets .sidebar .sidebar-cta-box h2 {
	font-size: 1.125rem;
}

#projets .sidebar .sidebar-cta-box .outline-btn {
	color: var(--dark-blue);
	background-image: linear-gradient(var(--dark-blue), var(--dark-blue));
	padding: .75rem 3rem;
	border: 2px solid var(--dark-blue);
}

#projets .sidebar .sidebar-cta-box .outline-btn:hover {
	color: #fff;
}

#projets .sidebar .sidebar-cta-box > *:not(:last-child) {
	margin-bottom: 1rem;
}

/********************************************************************************************************************/
/*** Blogue styling ****/
/********************************************************************************************************************/

#blog .main {
	width: 60%;
}

#blog:not(.single) .main article {
	margin-bottom: 4rem
}

#blog .main article .article-image {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 20px;
	margin-bottom: 1.5rem;
}

#blog.single .main article img {
	display: block;
	border-radius: 20px;
	margin-bottom: 1.5rem;
}

#blog:not(.single) .main article h2 {
	font-size: 1.5rem;
	color: #fff;
	transition: color .2s;
}

#blog:not(.single) .main article:hover h2 {
	color: var(--light-blue);
}

#blog:not(.single) .main article header > *:not(:last-child) {
	display: block;
	margin-bottom: 1.25rem;
}

#blog:not(.single) .main article .article-date {
	position: absolute;
	top: 0;
	right: 0;
	font-weight: 700;
	color: #fff;
	text-align: right;
	text-transform: uppercase;
	background: var(--light-blue);
	padding: 1rem;
	box-sizing: border-box;
	border-bottom-left-radius: 15px;
}

#blog .main article .more-link {
	color: #fff;
}

#blog .sidebar {
	position: sticky;
	top: 100px;
	width: 40%;
	height: max-content;
	margin-left: 4rem;
}

#blog .sidebar .widget_block {
	margin-bottom: 2rem;
}

#blog .sidebar .cat-item a {
	display: block;
	font-size: 1.5rem;
	font-weight: 600;
	color: #fff;
	background: var(--dark-blue);
	padding: 1.25rem 1.5rem;
	border-radius: 15px;
	margin-bottom: 1.25rem;
	transition: background .2s;
}

#blog .sidebar .cat-item a:hover {
	background: var(--hover-blue);
}

#blog .sidebar .wp-block-latest-posts {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	background: #dfdfdf;
	padding: 1.5rem;
	box-sizing: border-box;
	border-radius: 15px;
}

#blog .sidebar .wp-block-latest-posts a {
	display: block;
	font-size: 1.5rem;
	font-weight: 600;
	color: #000;
	transition: color .2s, transform .2s;
}

#blog .sidebar .wp-block-latest-posts a:hover {
	color: var(--dark-blue);
	transform: translateX(10px);
}

#blog .sidebar .wp-block-latest-posts a time {
	display: block;
	font-size: 1rem;
	font-weight: 300;
}

/**
 * Single blog
 **/

#blog.single .main h1 {
	font-size: 2rem;
	margin: 2rem 0 .5rem;
}

#blog.single .main h2 {
	font-size: 1.5rem;
	margin: 2rem 0;
}

#blog.single .main h3 {
	font-size: 1.25rem;
	margin: 1.5rem 0 1rem;
}

#blog.single .main header {
	margin-bottom: 3rem;
}

#blog.single .main header .entry-date {
	text-transform: uppercase;
	opacity: .85;
}

#blog.single .main p {
	margin-bottom: 1rem;
}

#blog.single .main ul {
	margin: 2rem 0 2rem 3rem;
}

#blog.single .main ul li {
	list-style-type: disc;
	margin-bottom: .3rem;
}

/********************************************************************************************************************/
/*** Équipe styling ****/
/********************************************************************************************************************/

#equipe section.equipe h2 {
	font-size: 1.5rem;
	margin-bottom: 1.5rem;
}

#equipe .section-2 .text-block img {
	margin-top: 2.5rem;
}

#equipe .section-equipe{position:relative; display:flex; justify-content:space-between; flex-wrap:wrap; padding:4rem 0;}
#equipe .section-equipe .membre{width:50%; display:inline-flex; align-self:flex-start;}
#equipe .section-equipe .membre .left{width:auto; margin:20px 2%;}
#equipe .section-equipe .membre .left img{position:relative; width:200px; border-radius:15px;}
#equipe .section-equipe .membre .right{width:auto; margin:20px 2%;}
#equipe .section-equipe .membre .right h3{color:#fff; margin-bottom:10px;}
#equipe .section-equipe .membre .right h4{color:#fff; margin-bottom:20px;}
#equipe .section-equipe .membre .right a{color:#fff; display:block; padding:10px; background:#222; margin-bottom:10px;}
#equipe .section-equipe .membre .right a:hover{background:#000;}
#equipe .section-equipe .membre .right span{color:#fff;}

/********************************************************************************************************************/
/*** Contact styling ****/
/********************************************************************************************************************/

#contact .form-container {
	display: flex;
	align-items: center;
	gap: 3rem;
}

#contact .form-container h2 {
	font-size: 1.875rem;
	text-align: center;
	margin-bottom:;
}

#contact .form-container .form-section {
	width: 45%;
	background-color: var(--dark-blue);
	padding: 4rem;
	box-sizing: border-box;
	border-radius: 25px;
	margin-left: auto;
}

#contact .coords .coords-title {
	font-size: 1.5rem;
}

#contact .coords .coords-item:not(:last-child) {
	margin-bottom: 3rem;
}

#contact .coords .coords-item > .email,
#contact .coords .coords-item > .phone,
#contact .coords .coords-item > .address {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-size: 1.5rem;
	font-weight: 700;
	color: #fff;
	margin: .875rem 0;
	transition: color .2s;
}

#contact .coords .coords-item > a:hover {
	color: var(--hover-blue);
}

#contact .coords .coords-item > .email::before,
#contact .coords .coords-item > .phone::before,
#contact .coords .coords-item > .address::before {
	content: '';
	display: block;
	width: 2rem;
	height: 2rem;
	background: #fff;
	transition: background .2s;
}

#contact .coords .coords-item > a:hover::before {
	background: var(--hover-blue);
}

#contact .coords .coords-item > .email::before {
	-webkit-mask: url(img/icons/mail-icon.svg) no-repeat center center/contain;
	mask: url(img/icons/mail-icon.svg) no-repeat center center/contain;
}

#contact .coords .coords-item > .phone::before {
	-webkit-mask: url(img/icons/phone-icon.svg) no-repeat center center/contain;
	mask: url(img/icons/phone-icon.svg) no-repeat center center/contain;
}

#contact .coords .coords-item > .address::before {
	-webkit-mask: url(img/icons/address-icon.svg) no-repeat center center/contain;
	mask: url(img/icons/address-icon.svg) no-repeat center center/contain;
}

#contact #map {
	width: 100%;
	height: 480px;
	border-radius: 25px;
}

/********************************************************************************************************************/
/*** Soumission styling ****/
/********************************************************************************************************************/

#quote .form-section {
	width: 85%;
	background-color: var(--dark-blue);
	padding: 4rem;
	box-sizing: border-box;
	border-radius: 25px;
	margin: auto;
}

#quote form h3:not(:first-of-type) {
	margin-top: 2rem;
}

#quote .form-section form {
	margin-top: 0;
}

#quote .form-section form input,
#quote .form-section form select,
#quote .form-section form textarea {
	font-size: 1rem;
}

#quote form .file {
	display: flex;
}

#quote form .file #filenames {
	flex-grow: 1;
	padding-bottom: .75rem;
	border-bottom: 1px solid #fff;
	margin-right: 2rem;
}

#quote form .file #filenames p {
	font-size: 1rem;
}

#quote form .file label {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	font-weight: 500;
	padding: .5rem 1.5rem;
	box-sizing: border-box;
	cursor: pointer;
}

#quote form .file-section .file input[type="file"] {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	position: absolute;
}

#quote .form-section form button[type=submit] {
	margin-top: 2rem;
}

/********************************************************************************************************************/
/*** Footer styling ****/
/********************************************************************************************************************/

footer {
	margin-top: 6.25rem;
}

footer .wrap-footer {
	max-width: 90%;
	margin: auto;
}

footer .wrap-lg {
	background-color: #0c0c0c;
	padding-top: 4rem;
	border-radius: 35px 35px 0 0;
}

/**
 * Footer - top
 **/

footer .footer-main {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 2.5rem;
}

footer .footer-main h3 {
	font-size: 1.125rem;
	font-weight: 600;
	margin-bottom: 1.5rem;
}

footer .footer-block {
	width: 20%;
	max-width: 220px;
}

footer .footer-block .menu {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

footer .menu li > a,
footer .footer-block .menu li > a {
	font-size: 1.125rem;
	color: #fff;
	transition: color .4s;
}

footer .menu li > a:hover,
footer .footer-block .menu li > a:hover {
	color: var(--light-blue);
}

footer address {
	font-size: 1.125rem;
}

footer address p {
	margin-bottom: 1.5rem;
}

footer address a {
	display: block;
	color: #fff;
	margin-top: .5rem;
	transition: color .4s;
}

footer address a:hover {
	color: var(--light-blue);
}

footer .newsletter-form {
	max-width: 500px;
}

footer .newsletter-form p {
	max-width: 70%;
}

footer .newsletter-form form {
	position: relative;
	margin-top: 1rem;
}

footer .newsletter-form form input {
	font-family: 'Montserrat';
	font-size: 1rem;
	font-weight: 600;
	width: 100%;
	padding: 1rem 1.5rem;
	border: 2px solid #fff;
	box-sizing: border-box;
	border-radius: 100px;
	transition: border .2s;
}

footer .newsletter-form form input:focus {
	outline: 0;
	border: 2px solid var(--light-blue);
}

footer .newsletter-form form button {
	all: unset;
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 25px;
	width: 2rem;
	height: 2rem;
	background-color: #000;
	-webkit-mask: url(img/icons/mail-icon.svg) no-repeat center center/contain;
	mask: url(img/icons/mail-icon.svg) no-repeat center center/contain;
	margin: auto;
	cursor: pointer;
	transition: background-color .4s;
}

footer .newsletter-form form button:hover {
	background-color: var(--hover-blue);
}

footer .menu-politiques-container .menu {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	margin-top: 1.5rem;
}

/**
 * Footer - middle
 **/

footer .footer-mid {
	display: flex;
	justify-content: space-between;
	gap: 1rem 2rem;
	margin: 5rem auto 2.5rem;
}

footer .footer-mid a {
	color: #fff;
	transition: color .4s;
}

footer .footer-mid a:hover {
	color: var(--light-blue);
}

/**
 * Footer - bottom
 **/

footer .footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 2rem 0;
	border-top: 1px solid #2a2a2a;
	margin-top: 2rem;
}

footer .footer-bottom .logo {
	max-width: 150px;
}

footer .footer-bottom .logo img {
	display: block;
	width: 100%;
}

/********************************************************************************************************************/
/* WOOCOMMERCE STYLES */

.woocommerce-container {
	padding-top: 4rem;
}

.woocommerce-breadcrumb {
	display: none;
	position: relative;
	margin-bottom: 2rem;
}

.woocommerce .woocommerce-ordering {
	margin: 0 0 2.5rem;
}

.woocommerce .woocommerce-ordering select {
	appearance: none;
	font-family: 'Montserrat';
	font-weight: 500;
	position: relative;
	color: #fff;
	background-image: url(img/icons/arrow-down-white-icon.svg);
	background-repeat: no-repeat;
	background-position: 95% center;
	background-size: .85rem;
	background-color: transparent;
	padding: .5rem;
	border: none;
	border-bottom: 1px solid #fff;
}

.woocommerce-shop ul.products {
	margin-top: 3rem;
}

.woocommerce ul.products li.product,
.wc-block-grid__product.wc-block-grid__product {
	transition: transform .3s;
}

.woocommerce ul.products li.product:hover,
.wc-block-grid__product.wc-block-grid__product:hover {
	transform: scale(.97);
}

.woocommerce ul.products li.product .button {
	margin-right: 1rem;
}

.woocommerce .related.products {
	clear: both;
}

.woocommerce .related.products h2 {
	margin-bottom: 1.5rem;
}

/*.woocommerce .woo-product-desc {
	margin: 1.25rem 0;
}*/

.woocommerce .product .summary .price {
	font-size: 1.5rem;
	font-weight: 500;
	margin: 1rem 0;
}

.woocommerce .product .summary .quantity .qty {
	font-family: 'Montserrat';
	font-size: 1rem;
	font-weight: 600;
	color: #fff;
	background: none;
	padding: 8px;
	border: 2px solid #fff;
	border-radius: 50px;
	margin-right: 1rem;
}

.woocommerce .product .summary .single_add_to_cart_button,
.woocommerce-page .wc-block-cart__submit-button,
.woocommerce-page .wc-block-components-totals-coupon__button,
.woocommerce-page .wc-block-components-checkout-place-order-button,
#employees .woocommerce ul.products li.product .button {
	position: relative;
	display: inline-block;
	font-size: 1.125rem;
	font-weight: 600;
	color: #fff;
	text-align: center;
	background-color: var(--dark-blue);
	background-image: linear-gradient(var(--hover-blue), var(--hover-blue));
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 0% 100%;
	padding: .75rem 1.5rem;
	border-radius: 100px;
	transition: background-size .4s !important;
}

.woocommerce .product .summary .single_add_to_cart_button:hover,
.woocommerce-page .wc-block-cart__submit-button:hover,
.woocommerce-page .wc-block-components-totals-coupon__button:hover,
.woocommerce-page .wc-block-components-checkout-place-order-button:hover,
#employees .woocommerce ul.products li.product .button:hover {
	background-size: 100% 100%;
}

.woocommerce-message a {
	color: var(--dark-blue);
}

.woocommerce-message a:hover {
	text-decoration: underline;
}

.wc-block-components-product-name {
	font-size: 1.25rem;
	font-weight: 700;
	color: #fff;
	margin-bottom: 8px;
}

.wc-block-components-checkbox__label a {
	color: #fff;
	text-decoration: underline;
}

.wc-block-components-checkbox__label a:hover {
	color: var(--light-blue);
}

.woocommerce-page .wc-block-grid__product.wc-block-grid__product {
	text-align: left;
	list-style-type: none !important;
}

.woocommerce table.shop_table td a {
	color: #fff;
	text-decoration: underline;
}

.woocommerce table.shop_table td a:hover {
	color: var(--light-blue);
}

.woocommerce a.added_to_cart {
	font-wight: 500;
	color: #fff;
	margin-top: 8px;
	transition: color .3s;
}

.woocommerce a.added_to_cart:hover {
	color: var(--light-blue);
}

/**
 * WOOCOMMERCE OVERRIDES
 **/

.woocommerce ul.products li.product .woocommerce-loop-category__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h3,
.wc-block-grid__product .wc-block-grid__product-title {
	color: #fff;
	font-size: 1.25rem;
}

.woocommerce ul.products li.product .price,
.wc-block-grid__product .wc-block-grid__product-price .amount {
	font-size: 1.125rem;
}

.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price,
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) ul.products li.product .price {
	color: #fff;
}

.woocommerce ul.products li.product a.woocommerce-loop-product__link .woocommerce-loop-product__title,
.woocommerce ul.products li.product a.woocommerce-loop-product__link .price,
.wc-block-grid__product.wc-block-grid__product .wc-block-grid__product-title,
.wc-block-grid__product .wc-block-grid__product-price .amount {
	transition: color .3s;
}

.woocommerce ul.products li.product a.woocommerce-loop-product__link:hover .woocommerce-loop-product__title,
.woocommerce ul.products li.product a.woocommerce-loop-product__link:hover .price,
.wc-block-grid__product.wc-block-grid__product .wc-block-grid__product-link:hover .wc-block-grid__product-title,
.wc-block-grid__product.wc-block-grid__product .wc-block-grid__product-link:hover .wc-block-grid__product-price .amount {
	color: var(--light-blue);
}

.woocommerce div.product form.cart {
	display: flex;
	align-items: center;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: var(--light-blue);
}

.woocommerce-message::before {
	color: var(--light-blue);
}

.is-large .wc-block-checkout__sidebar.is-sticky {
	top: 118px;
}

.woocommerce-page .wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link {
	position: relative;
	display: inline-block;
	width: auto;
	font-size: 1.125rem;
	font-weight: 600;
	color: #fff;
	text-align: center;
	background-color: var(--dark-blue);
	background-image: linear-gradient(var(--hover-blue), var(--hover-blue));
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 0% 100%;
	padding: .75rem 1.5rem;
	border-radius: 100px;
	transition: background-size .4s;
}

.woocommerce-page .wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link:hover {
	background-size: 100% 100%;
}

.return-shop-btn {
	display: inline-flex;
	align-items: center;
	color: #fff;
	font-size: 1.125rem;
	font-weight: 700;
	margin-bottom: 2.5rem;
	transition: color .3s;
}

.return-shop-btn:hover {
	color: var(--light-blue);
}

.return-shop-btn::before {
	content: '';
	width: 20px;
	height: 20px;
	background-color: #fff;
	-webkit-mask: url(img/icons/arrow-left-icon.svg) no-repeat center center/contain;
	mask: url(img/icons/arrow-left-icon.svg) no-repeat center center/contain;
	margin-right: 1rem;
	transition: background-color .3s;
}

.return-shop-btn:hover::before {
	background-color: var(--light-blue);
}

/********************************************************************************************************************/

/********************************************************************************************************************/

.form-result {
	padding: 1rem;
	margin: 1.5rem 0 2rem;
}

.form-result p {
	font-size: 1rem;
}

.form-result p:not(:last-child) {
	margin-bottom: .3rem;
}

.form-result.error {
	background-color: red;
}

.form-result.success {
	color: var(--dark-blue);
	background-color: #fff;
}

/********************************************************************************************************************/

.form-section{background:var(--dark-blue); padding:70px !important; border-radius:50px;}
.form-section .file-section .file{margin-bottom:40px;}

/********************************************************************************************************************/

.post-password-form {
	text-align: center;
}

.post-password-form > p:last-child {
	margin-top: 1.5rem;
}

/********************************************************************************************************************/

.video-single{position:relative; margin:50px 0;}
.video-single-container{position:relative; width:100%; aspect-ratio:16 / 9;}
.video-single-container iframe{position:absolute; top:0; left:0; width:100%; height:100%; border:0;}

/********************************************************************************************************************/

.projects-year{font-size:2em; color:#fff; margin-bottom:20px;}
.projects-spacing{padding-bottom:80px;}

/********************************************************************************************************************/

/* CSS MEDIA QUERIES - WIDTH */

@media screen and (min-width: 2000px) {

	#page-top {
		min-height: 800px;
	}

}

@media screen and (max-width: 1530px) {

	nav .nav-top > .container {
		gap: 1.5rem;
	}

	nav .nav-top .top-item,
	nav .nav-top .socials > p {
		font-size: .85rem;
	}

	nav .nav-top .top-item {
		gap: .5rem;
	}

	nav .nav-top .socials .social-icon {
		width: 1rem;
	}
	
/*	#home-content .video-section .wrap{margin:0 50px;}*/

}

@media screen and (max-width: 1450px) {

	.wrap{width:1100px;}

	.link-blocks .block p,
	.link-blocks .block a {
		font-size: 1rem;
	}

	nav .nav-main .logo,
	nav.nav-scrolled .nav-main .menu > li > a {
		font-size: 1rem;
	}

	nav.nav-scrolled .nav-main .logo img,
	nav.page-nav .nav-main .logo img {
		max-width: 100px;
	}

	#hero-section .hero-content .hero-title {
		width: 65%;
	}

	#hero-section .hero-overlay-shape {
		left: -8%;
	}

	.link-blocks .block h3,
	#home-content .services .service-blocks .service h3 {
		font-size: 1.5rem;
	}

	#home-content .services .service-blocks {
		gap: 6rem 1.5rem;
	}

	#home-content .apropos .image-container,
	#service-single .image-container {
		min-height: 600px;
	}

	#home-content .apropos h2,
	#service-single .image-container .overlay-content h2 {
		font-size: 2.5rem;
	}

	#home-content .apropos p,
	#service-single .image-container .overlay-content p {
		font-size: 1.25rem;
	}

	#home-content .clients .client-boxes {
		width: 93%;
		gap: 1rem;
	}

	#home-content .banner .image-container {
		min-height: 200px;
	}

	footer address,
	footer address p,
	footer .menu li > a,
	footer .footer-block .menu li > a {
		font-size: 1rem;
	}

	footer .newsletter-form {
		width: 40%;
	}

	footer .newsletter-form p {
		font-size: 1rem;
		max-width: 100%;
	}
	
	

}

@media screen and (max-width: 1310px) {

	nav .nav-top,
	nav .nav-main .menu {
		display: none;
	}

	nav .nav-main .nav-cta-btns {
		margin-left: auto;
	}

	nav .nav-main .mobile-menu-btn {
		display: inline-block;
	}

}

@media screen and (max-width: 1286px) {

	nav .nav-top .socials {
		display: none;
	}

}

@media screen and (max-width: 1150px) {

	.wrap{width:900px;}

	.colour-btn,
	.outline-btn {
		font-size: 1rem;
	}

	.link-blocks .block {
		width: calc((100% / 2 ) - 2rem + (2rem / 2));
	}

	nav .nav-main .container .logo,
	nav .nav-main .container .nav-cta-btns {
		flex-grow: unset;
		flex-basis: unset;
	}

	nav .nav-main .logo {
		font-size: 1.25rem;
	}

	nav.nav-scrolled .nav-main .logo img,
	nav.page-nav .nav-main .logo img {
		max-width: 125px;
	}

	#hero-section .hero-overlay-shape {
		left: -12%;
	}

	#home-content .services .container {
		flex-direction: column;
		align-items: center;
	}

	#home-content .services .wrap-lg::before {
		top: -300px;
	}

	#home-content .services .service-blocks .service p {
		max-width: 100%;
	}

	#home-content .apropos .image-container,
	#service-single .image-container {
		min-height: 500px;
	}

	#home-content .apropos h2,
	#service-single .image-container .overlay-content h2 {
		font-size: 2rem;
	}

	#home-content .apropos p,
	#service-single .image-container .overlay-content p {
		font-size: 1.125rem;
	}

	#home-content .clients .client-boxes {
		flex-wrap: wrap;
		margin-top: -40px;
	}

	#home-content .clients .client-boxes .box {
		width: 48%;
	}

	#home-content .contact .container {
		flex-direction: column;
	}

	#home-content .contact .form-section {
		width: 100%;
	}

	#home-content .contact #map {
		width: 100%;
		min-height: 500px;
	}

	#home-content .banner .image-container > img {
		left: -80px;
	}

	#home-content .banner .text-block > img {
		max-width: 8.5rem;
	}

	#home-content .banner .logo-text {
		font-size: 1.5rem;
	}

	/*******************************/

	#apropos .timeline .block .year,
	#apropos .timeline .block .text-block {
		width: 44%;
	}

	#apropos .timeline .block .year {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}

	#apropos .timeline .block:nth-child(even) .year {
		flex-direction: column;
		align-items: flex-end;
	}

	#services .service-list .container {
		padding: 2.5rem 3rem 4rem;
	}

	#services .service-list .service {
		width: calc((100% / 2) - 1.5rem + (1.5rem / 2));
	}

	#service-single .section-5 .container {
		gap: 2rem;
	}

	#blog .sidebar,
	#projets .sidebar {
		margin-left: 2rem;
	}

	#blog .sidebar .cat-item a,
	#projets .sidebar .category-link {
		font-size: 1.125rem;
	}

	#blog .sidebar .wp-block-latest-posts a {
		font-size: 1.25rem;
	}

	#contact .form-container .form-section {
		width: 60%;
	}

	/*******************************/

	footer .footer-main {
		flex-wrap: wrap;
	}

	footer .newsletter-form {
		width: 100%;
		max-width: 85%;
	}
	
	#equipe .section-equipe .membre{width:100%;}

}

@media screen and (max-width: 950px) {

	.wrap{width:700px;}

	p {
		font-size: 1rem;
	}

	.col-2 {
		gap: 2.5rem;
	}

	.image-container > img,
	.image-container > picture {
		position: relative;
	}

	.image-container .overlay-content {
		width: 100%;
		padding: 3rem;
	}

	.form-section form .half,
	.form-section form .third {
		width: 100%;
	}

	nav .nav-top .top-item {
		font-size: .875rem;
	}

	#hero-section .hero-content .hero-title {
		font-size: 2.25rem;
		top: 24%;
		width: 85%;
	}

	#hero-section .hero-content .hero-title,
	#hero-section .hero-content .hero-cta {
		left: 0;
		right: 0;
		text-align: center;
		margin: auto;
	}

	#hero-section .hero-overlay-shape {
		display: none;
	}

	#home-content .apropos .image-container > img,
	#home-content .apropos .image-container > picture,
	#home-content .apropos .image-container > picture > img {
		height: auto;
	}

	#home-content .apropos .image-container .overlay-content,
	#service-single .image-container .overlay-content {
		min-height: auto;
		background-image: none;
		padding: 3rem;
	}

	#home-content .apropos .text-block > *,
	#service-single .image-container .overlay-content .text-block > * {
		max-width: 100%;
	}

	#home-content .projets .container {
		padding: 0;
	}

	#home-content .projets .projet-slide .projet-content h3 {
		font-size: 1.25rem;
	}

	#home-content .video-section .wrap {
		gap: 3rem;
	}

	#home-content .clients .client-boxes {
		width: 100%;
		margin-top: 3rem;
	}

	#home-content .clients .client-boxes .box {
		width: 100%;
		padding: 2rem;
	}

	#home-content .banner .image-container {
		min-height: auto;
	}

	#home-content .banner .image-container > img {
		left: 0;
	}

	#home-content .banner .image-container .overlay-content {
		width: 100%;
		min-height: auto;
		background-image: none;
		padding: 1rem 3rem;
	}

	#home-content .banner .image-container:hover .overlay-content {
		width: 100%;
	}

	/*******************************/

	#apropos .link-blocks .block {
		width: calc((100% / 2 ) - 2rem + (2rem / 2));
	}

	#service-single .section-2 .col-2{
		flex-direction: column;
	}

	#service-single .section-5 .container {
		flex-direction: column;
	}

	#service-single .gallery {
		grid-template-columns: 1fr 1fr;
	}

	#blog > .container,
	#projets > .container {
		flex-direction: column;
	}

	#blog .main,
	#projets .main {
		width: 100%;
	}

	#blog .sidebar,
	#projets .sidebar {
		width: 100%;
		margin-left: 0;
	}

	#contact .form-container {
		flex-direction: column-reverse;
	}

	#contact .form-container .form-section {
		width: 100%;
	}

	/*******************************/

	footer .footer-mid {
		justify-content: space-around;
		flex-wrap: wrap;
	}

	/*******************************/

	.woocommerce ul.products li.product .button,
	#employees .woocommerce ul.products li.product .button {
		font-size: .75rem;
		padding: .75rem 1rem;
	}

	.woocommerce ul.products li.product .woocommerce-loop-category__title,
	.woocommerce ul.products li.product .woocommerce-loop-product__title,
	.woocommerce ul.products li.product h3,
	.wc-block-grid__product .wc-block-grid__product-title,
	.woocommerce ul.products li.product .price,
	.wc-block-grid__product .wc-block-grid__product-price .amount {
		font-size: 1rem;
	}
	
	

}

@media screen and (max-width: 768px) {

	.wrap{width:500px;}

	/*******************************/

	.col-2 {
		flex-direction: column;
	}

	.large-text p {
		font-size: 1.25rem;
	}

	/*******************************/

	nav .nav-main .container .nav-cta-btns {
		display: none;
	}

	nav .nav-main .logo img,
	nav .nav-main .logo.large img {
		width: 25vw;
	}

	nav .nav-main .logo {
		font-size: 1rem;
	}

	#mobile-menu {
		padding-top: 200px;
	}

	#mobile-menu .menu-btn {
		display: block;
	}

	/*******************************/

	#home-content > *,
	.page-content section {
		padding: 2rem 0;
	}

	#home-content .services .wrap-lg::before {
		top: -200px;
	}

	#home-content .services .service-blocks {
		grid-template-columns: auto;
		gap: 3rem 1.5rem;
	}

	#home-content .projets .container {
		flex-direction: column;
		align-items: flex-start;
	}

	#home-content .projets .projet-slide {
		flex-direction: column;
	}

	#home-content .projets .projet-slide > img,
	#home-content .projets .projet-slide .projet-content {
		width: 100%;
	}

	#home-content .video-section .wrap {
		flex-direction: column;
	}

	#home-content .video-section img {
		width: 65%;
	}

	#home-content .video-section iframe,
	#home-content .video-section .half-video {
		width: 100%;
		max-width: 100%;
	}
	
	#home-content .video-section .video_img{transform:none;}

	#home-content .video-section .single-video {
		flex-direction: column;
		gap: 3rem;
	}

	#home-content .clients .container {
		flex-direction: column;
		text-align: center;
	}

	.form-section form input,
	.form-section form select,
	.form-section form textarea {
		font-size: 1rem;
	}

	/*******************************/

	#page-top {
		min-height: 400px;
	}

	/*#page-top::after {
		top: 0;
		left: -80px;
		width: 350px;
		transform: scale(1);
	}*/

	#page-top h1 {
		font-size: 2.5rem;
	}

	#page-top h1 small {
		font-size: 1.5rem;
	}

	/*******************************/

	#apropos .section-1 img {
		margin-top: 3.5rem;
	}

	#apropos .timeline::before,
	#apropos .timeline .block::before {
		content: unset;
	}

	#apropos .timeline .block {
		flex-wrap: wrap;
		gap: 2rem;
	}

	#apropos .timeline .block:not(:last-child) {
		border-bottom: 2px solid #fff;
	}

	#apropos .timeline .block .year,
	#apropos .timeline .block:nth-child(even) .year {
		order: -1;
		align-items: flex-start;
		width: 100%;
	}

	#apropos .timeline .block .text-block {
		width: 100%;
	}

	#apropos .link-blocks .block {
		width: 90%;
	}

	#services .service-list .service {
		width: 100%;
	}

	#careers .section-3 .block {
		max-width: 100%;
	}

	#clients .client-boxes .box h2 {
		font-size: 1.5rem;
	}

	#clients .client-boxes .box h3 {
		font-size: 1.25rem;
	}

	#clients .client-boxes .box img {
		max-width: 60%;
	}

	#projets .main .grid {
		grid-template-columns: auto;
	}

	#projets.single .main .gallery {
		grid-template-columns: 1fr 1fr;
	}

	#contact .coords .coords-title {
		font-size: 1.25rem;
	}

	#contact .coords .coords-item > .email,
	#contact .coords .coords-item > .phone,
	#contact .coords .coords-item > .address {
		font-size: 1.125rem;
	}

	#contact .coords .coords-item > .email::before,
	#contact .coords .coords-item > .phone::before,
	#contact .coords .coords-item > .address::before {
		width: 1.25rem;
		height: 1.25rem;
	}

	#quote .form-section {
		width: 100%;
	}

	#quote form .file {
		flex-wrap: wrap;
	}

	#quote form .file #filenames {
		border-bottom: none;
		padding: 0;
		margin-right: 0;
	}

	#quote form .file label {
		width: 100%;
		justify-content: center;
		margin-top: 1.5rem;
	}

	/*******************************/

	footer .footer-block {
		width: 45%;
		max-width: 100%;
		flex-grow: 1;
		text-align: center;
	}

	footer .newsletter-form {
		max-width: 100%;
		text-align: center;
	}

	/*******************************/

	.woocommerce ul.products li.product .button,
	#employees .woocommerce ul.products li.product .button {
		font-size: 1rem;
	}
	
	#equipe .section-equipe .membre{flex-direction:column;}
	#equipe .section-equipe .membre .left img{width:100%;}
	#equipe .section-equipe .membre .right{margin:20px 2% 80px;}

}

@media screen and (max-width: 550px) {

	.wrap{width: 90%;}

	p,
	ul,
	.colour-btn, .outline-btn,
	.form-result p,
	#careers .section-3 .block p,
	#general-page ul li {
		font-size: .875rem;
	}

	.large-text p {
		font-size: 1.125rem;
	}

	.block-center {
		max-width: 100%;
	}

	.icon-title {
		max-width: 75%;
		font-size: 1.25rem;
	}

	.icon-title::before {
		width: 3.5rem;
		height: 3.5rem;
	}

	.section-title {
		font-size: 1.5rem;
		margin-bottom: 1.25rem;
	}

	.link-blocks .block {
		width: 100%;
		min-height: auto;
	}

	.colour-box,
	.gray-box {
		padding: 2rem 1.5rem;
	}

	/*******************************/

	/*#mobile-menu  {
		padding-top: 135px;
	}*/

	#mobile-menu .menu {
		gap: 1.25rem;
	}

	#mobile-menu .menu > li > a {
		font-size: 1.25rem;
	}

	/*******************************/

	.text-block h2,
	#home-content .apropos h2,
	#home-content .projets .container .text-block h2,
	#service-single .image-container .overlay-content h2 {
		font-size: 1.5rem;
	}

	#hero-section .hero-content .hero-title {
		width: 100%;
		font-size: 2rem;
	}

	#hero-section .hero-content .hero-cta {
		font-size: 1.25rem;
		bottom: 10%;
	}

	.link-blocks .block h3,
	#home-content .services .service-blocks .service h3 {
		font-size: 1.25rem;
	}

	#home-content .services .wrap-lg::before {
		content: unset;
	}

	#home-content .apropos p,
	#service-single .image-container .overlay-content p {
		font-size: 1rem;
		margin-bottom: 2rem;
	}

	#home-content .apropos .image-container .overlay-content,
	#home-content .contact .form-section,
	#service-single .image-container .overlay-content {
		padding: 2rem;
	}

	#home-content .projets .projet-slide .projet-content {
		padding: 2rem 1rem;
	}

	#home-content .projets .projet-slider .slide-arrow.slide-prev {
		left: 1rem;
	}

	#home-content .projets .projet-slider .slide-arrow.slide-next {
		right: 1rem;
	}

	#home-content .banner .text-block > img {
		max-width: 6.5rem;
	}

	/*******************************/

	#page-top {
		min-height: 300px;
	}

	/*#page-top::after {
		content: unset;
	}*/

	#page-top h1 {
		font-size: 1.75rem;
		bottom: 10%;
	}

	#page-top h1 small {
		font-size: 1.25rem;
	}

	/*******************************/

	#apropos .timeline .block .year h3 {
		font-size: 2.5rem;
	}

	#equipe section.equipe h2 {
		font-size: 1.25rem;
	}

	#services .service-list .container {
		padding: 2.5rem 2rem 3rem;
	}

	#service-single .faq .question h3 {
		font-size: 1rem;
	}

	#service-single .gallery {
		gap: 1.5rem;
	}

	#careers .section-3 .flex {
		gap: 1.5rem;
	}

	#careers .section-3 .block h2 {
		font-size: 1.25rem;
	}

	#projets .sidebar .sidebar-cta-box .outline-btn {
		padding: .75rem 1.5rem;
	}

	#quote .form-section,
	#contact .form-container .form-section {
		padding: 3rem 2rem;
	}

	/*******************************/

	footer .footer-bottom .logo {
		max-width: 100px;
	}
	
	.logos-associations-section ul li img{width:200px; margin:20px 0;}

}

@media screen and (max-width: 430px) {

	.icon-title {
		max-width: 100%;
	}

	#mobile-menu .menu {
		margin-bottom: 1.5rem;
	}

	#mobile-menu .menu > li > a {
		font-size: 1rem;
	}

	#mobile-menu .address-block {
		padding-top: 1.5rem;
	}

	#mobile-menu .address-block h3 {
		font-size: 1.125rem;
	}

	#mobile-menu .address-block p {
		font-size: .875rem;
	}

	#services .service-list .icon-title {
		max-width: 92%;
		font-size: 1.125rem;
	}

}

/* CSS MEDIA QUERIES - HEIGHT */


@media screen and (max-height: 850px) {

	#hero-section .hero-content .hero-title {
		top: 12.5rem;
	}

	#blog .sidebar {
		position: static;
	}
	
}

@media screen and (max-height: 810px) {
	
}