/*
 Theme Name:   Template CPL 2022
 Theme URI:    https://www.commparlimage.ca/
 Description:  Thème en développement
 Author:       Jordan Ouellet
 Author URI:   https://www.commparlimage.ca
 Template:     blankslate
 Version:      1.0.0
 Text Domain:  templatecpl
*/

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

html{
	font-size: 18px;
	font-family: 'Lato', sans-serif;
	font-weight:300;
	touch-action: manipulation;
	overflow-x: hidden;
}

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, 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;
	height: auto;
	max-height: 100%;
	max-width: 100%;
	width: auto\9; /* ie8 */
	object-fit: cover;
}

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

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


#human{display:none !important;}


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

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

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

/********************************************************************************************************************/
/* BACKGROUNDS */


/********************************************************************************************************************/
/* SPECIAL CLASSES */

.wrap{position:relative; margin:0 auto; width: 1400px;}
.specialheight{min-height:760px;}
.bold{font-weight:700;}
.light{font-weight:300;}
.flex{display:flex;}
.grid{display:grid;}
body.no-scroll{overflow: hidden;}

.dark-overlay{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.35;}
.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;}

/* ALIGN */
.text-center{text-align: center;}
.align-right{margin-left: auto;}
.align-center{margin-left: auto; margin-right: auto;}
.side{width: 95%;}
.mid{width: 90%;}
.half{height:400px;}
.wide{height: 400px;}

/* SCROLL */
.animate-scroll-left{opacity: 0; transform: translateX(10vw); transition: all 1s;}
.animate-scroll-right{opacity: 0; transform: translateX(-10vw); transition: all 1s;}
.animate-scroll-up{opacity: 0; transform: translateY(20vh); transition: all 1s;}
.scrolled{opacity: 1; transform: none;}

/* ELEMENTS CLASSES */

.titre{position: relative; font-size: 36px; text-transform: uppercase; color: var(--second-color); padding-left: 25px; margin-bottom: 30px;}
.titre:before{display: block; content: ''; position: absolute; left: 0; width: 5px; height: 100%; background-color: var(--my-color);}
.titre-white{position: relative; font-size: 36px; text-transform: uppercase; color: #fff; padding-left: 25px; margin-bottom: 30px;}
.titre-white:before{display: block; content: ''; position: absolute; left: 0; width: 5px; height: 100%; background-color: #fff;}
.titre-underline{position: relative; font-size: 36px; text-transform: uppercase; color: var(--second-color); padding-bottom: 25px; margin-bottom: 30px;}
.titre-underline:after{display: block; content: ''; position: absolute; left: 0; right: 0; bottom: 0; width: 200px; height: 5px; background-color: var(--my-color); margin: auto;}
.titre-underline-white{position: relative; font-size: 36px; text-transform: uppercase; color: #fff; padding-bottom: 25px; margin-bottom: 30px;}
.titre-underline-white:after{display: block; content: ''; position: absolute; left: 0; right: 0; bottom: 0; width: 200px; height: 5px; background-color: #fff; margin: auto;}
p{color: var(--font-color); line-height: 1.6em;}
p{color: var(--font-color); line-height: 1.6em;}

.sous-titre h2{font-size: 30px; text-transform: uppercase; padding-bottom: 10px; width: max-content; border-bottom: 5px solid var(--my-color);}

.sous-titre p{font-size:24px; line-height: 1.6em;}

h1 span{color: var(--my-color); font-weight: 700;}

.btn-blue{display: block; width: max-content; text-transform: uppercase; color: #fff; padding: 15px 20px; border-radius: 15px; margin-top: 30px;
	background-color: var(--my-color);
	transition: all 0.4s;
}
.btn-blue:hover{background-color: var(--hover-color);}

.btn-white{display: block; width: max-content; text-transform: uppercase; color: #fff; padding: 15px 20px; border: 3px solid #fff;border-radius: 15px; margin-top: 30px;
	background-image: linear-gradient(to top right, var(--my-color) 50%, transparent 50%); background-size: 200% 200%; background-position: top right;
	transition: all 0.8s;
}
.btn-white:hover{background-position: bottom left; border: 3px solid var(--my-color);}
.btn-underline{display: block; width: max-content; align-items: center; gap: 20px; color: var(--second-color); font-weight: 400; text-transform: uppercase; margin-top: 30px;}
.btn-underline img{display: inline-block; margin-left: 10px;}
.btn-underline:after{content: ''; display: block; border-bottom: 1px solid var(--my-color); transform: scaleX(0); transform-origin: 0 50%; padding-top: 5px;
	transition: all 0.4s;
}
.btn-underline:hover:after{transform: scaleX(1);}

.anchor{display: block; position: relative; top: -150px; visibility: hidden;}

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

#lang{position: fixed; right: 30px; bottom: 30px; font-weight: 600; color: #fff; background-color: var(--my-color); padding: 10px;
	border-radius: 35%; z-index: 1000; transition: all 0.3s;
}
#lang:hover{background-color: var(--second-color);}

#nav{position: fixed; width: 100%; z-index: 1000; top: 0;
	transition: all 0.8s;
}
#nav .top{background-color: #00000033; padding: 10px 0; text-align: right; margin-bottom: 20px;}
#nav .top .item{display: inline-flex; gap: 10px; align-items: center; margin-left: 20px;
	transition: all 0.4s;
}
#nav .top .item:hover{opacity: 0.7;}
#nav .top .item a{color: #fff; font-weight: 400;}
#nav .top .socials{display: inline-flex; gap: .5rem; float: left; position: relative; top: 3px;}
#nav .top .socials .social-icon{width: 24px; height: 24px;
	background-color: #fff;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	-webkit-mask-position: center center;
	mask-repeat: no-repeat;
	mask-size: contain;
	mask-position: center center;
	transition: all 0.4s;
}
#nav .top .socials .social-icon:hover{opacity: 0.7;}
#nav .bottom{display: flex; align-items: center; justify-content: space-between; padding: 20px 0;}
#nav .bottom .left{display: flex; gap: 50px; align-items: center;}
#nav .bottom .logo{opacity: 1; transition: all 0.4s;}
#nav .bottom .logo:hover{opacity: 0.7;}
#nav .bottom .logo img{max-width: 206px; transition: all 0.4s;}
#nav .bottom .logo .white{display: block;}
#nav .bottom .logo .dark{display: none;}
#nav .bottom .left .menu{display: flex; gap: 30px;}
#nav .bottom .left .menu > li > a{text-transform: uppercase; color: #fff; font-weight: 400; font-size: 18px;
	transition: all 0.4s;
}
#nav .bottom .left .menu > li > a::after{
	content: '';
	display: block;
	border-bottom: 1px solid #fff;
	padding-top: 3px;
	transform: scaleX(0);
	transition: transform .3s;
}
#nav .bottom .left .menu > li > a:hover::after,
#nav .bottom .left .menu .menu-item-has-children:hover > a::after{
	transform: scaleX(1);
}
#nav .bottom .socials{display: flex; gap: 15px;}
#nav .bottom .socials .social-icon{width: 24px; height: 24px;
	background-color: #fff;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	-webkit-mask-position: center center;
	mask-repeat: no-repeat;
	mask-size: contain;
	mask-position: center center;
	transition: all 0.4s;
}
#nav .bottom .socials .social-icon:hover{opacity: 0.7;}
#nav .bottom .socials.dark{display: none;}
#nav .bottom .menu-icons{display: none; position: relative;}
#nav .bottom .menuicon{display: none; cursor: pointer; opacity: 1; transform: translateX(0);
	transition: visibility 0.4s, opacity 0.4s, transform 0.4s;
}
#nav .bottom .menuicon.open{opacity: 0; transform: translateX(-100px);}
#nav .bottom .closeicon{position: absolute; top: 0; left: 0; right: 0; margin: auto; opacity: 0; transform: translateX(100px); cursor: pointer;
	transition: visibility 0.4s,opacity 0.4s, transform 0.4s;
}
#nav .bottom .closeicon.show{opacity: 1; transform: translateX(0);}
#nav .bottom .menuicon:hover, #nav .bottom .closeicon:hover{opacity: 0.7;}

#nav .sub-menu{display: block; position: absolute; width: 220px; padding: 15px 0 0; overflow: hidden; opacity: 0; visibility: hidden;
	transition: all 0.4s;
}
#nav .sub-menu a{display: block; padding: 10px; font-size: 16px; color: #fff; font-weight: 400; border-left: 1px solid #dddddd;
	transition: all 0.4s;
}
#nav .sub-menu a:hover{padding-left: 15px; background-color: #dddddd; color: var(--my-color);}
#nav .menu-item-has-children:hover .sub-menu{opacity: 1; visibility: visible;}

#nav .ecom-links .ecom-icon{
	display: inline-block;
	position: relative;
	width: 1.5rem;
	height: 1.5rem;
	margin-left: .5rem;
	transition: opacity .3s;
}

#nav .ecom-links .ecom-icon:hover{
	opacity: .6;
}

#nav .ecom-links .ecom-icon svg path,
#nav .ecom-links .ecom-icon svg circle,
#nav .ecom-links .ecom-icon svg polyline{
	stroke: #fff;
}

#nav .ecom-links .ecom-icon .cart-count{
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: -15px;
	right: -15px;
	width: 1rem;
	height: 1rem;
	font-size: .875rem;
	font-weight: 700;
	color: #fff;
	background-color: var(--second-color);
	border-radius: 50%;
	padding: .3rem;
}

#nav.scrolled .ecom-links .ecom-icon svg path,
#nav.scrolled .ecom-links .ecom-icon svg circle,
#nav.scrolled .ecom-links .ecom-icon svg polyline{
	stroke: #333;
}

/*
#nav .ecom-links .ecom-icon:hover svg path,
#nav .ecom-links .ecom-icon:hover svg circle,
#nav .ecom-links .ecom-icon:hover svg polyline,
#nav.scrolled .ecom-links .ecom-icon:hover svg path,
#nav.scrolled .ecom-links .ecom-icon:hover svg circle,
#nav.scrolled .ecom-links .ecom-icon:hover svg polyline{
	stroke: var(--my-color);
}
*/


/* SCROLLED */
#nav.scrolled{background-color: #fff; top: -64px; box-shadow: 0 0 10px #00000066;}
#nav.scrolled .bottom .logo img{
	max-width: 140px;
}
#nav.scrolled .bottom .logo .white{display: none;}
#nav.scrolled .bottom .logo .dark{display: block;}
#nav.scrolled .bottom .left .menu > li > a{color: #333; border-left: none;
	transition: all 0.4s;
}
#nav.scrolled .bottom .left .menu > li > a:hover, #nav.scrolled .bottom .left .menu .menu-item-has-children:hover > a{color: var(--second-color);}
#nav.scrolled .bottom .socials{display: none;}
#nav.scrolled .bottom .socials.dark{display: flex;}
#nav.scrolled .menuicon, #nav.scrolled .closeicon{filter: brightness(0.3);}
#nav.scrolled .sub-menu{background-color: #fff;}
#nav.scrolled .sub-menu:after{content: '';}
#nav.scrolled .sub-menu a{color: #333;}
#nav.scrolled .sub-menu a:hover{color: var(--my-color);}
#nav.scrolled .menu-item-has-children:hover > a{color: var(--my-color);}

/* MOBILE MENU */
#mobile-menu{position: fixed; left: -50%; top: 0; background-color: #f0f0f0; height: 100%; width: 50%; padding: 30px; box-sizing: border-box; z-index: 1000;
	transition: all 0.6s;
}
#mobile-menu.show{left: 0;}
#mobile-menu ul li{transition: all 0.4s;}
#mobile-menu ul li:not(:last-child){border-bottom: 1px solid #dddddd;}
#mobile-menu ul li:hover{background-color: #dddddd;}
#mobile-menu ul li:hover a{padding-left: 15px;}
#mobile-menu ul li a{display: block; color: var(--my-color); font-weight: 400; text-transform: uppercase; padding: 15px 15px 15px 0;
	transition: all 0.4s;
}
#mobile-menu .extra{display: flex; flex-direction: column; gap: 30px; margin-top: 15px;}
#mobile-menu .extra a{color: #333; opacity: 1; font-weight: 400;
	transition: all 0.4s;
}
#mobile-menu .extra a:hover{opacity: 0.7;}
#mobile-menu .extra .socials{display: flex; gap: 15px;}
#mobile-menu:after{content: ''; display: block;}

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

#accueil-top{position: relative; height: 100vh;}
#accueil-top.mg-bottom{margin-bottom: 100px;}
#accueil-top .slider .slide{position: relative; /*overflow: hidden;*/}
#accueil-top .slider .slide:not(:first-child){/*display: none;*/}
#accueil-top .slider .slogan{position: absolute; top: 28%; z-index: 5; height: max-content;}
#accueil-top .slider .slogan h1{font-size: 72px; font-weight: 300; color: #fff; margin-bottom: 20px;}
#accueil-top .slider .slogan h1 span{
	color: #fff;
}
#accueil-top .slider .slogan a{display: block; width: max-content; color: #fff; font-size: 24px; text-transform: uppercase; border: 3px solid #fff; border-radius: 20px; padding: 20px 30px;
	background-image: linear-gradient(to top right, var(--my-color) 50%, transparent 50%); background-size: 200% 200%; background-position: top right;
	transition: all 0.8s;
}
#accueil-top .slider .slogan a:hover{background-position: bottom left; border: 3px solid var(--my-color);}

/* Content positions */
#accueil-top .slider .slogan.right{right: 0; text-align: right;}
#accueil-top .slider .slogan.right a{margin-left: auto;}
#accueil-top .slider .slogan.middleY{top: 0; bottom: 0; margin: auto;}
#accueil-top .slider .slogan.middleX{left: 0; right: 0; margin: auto; text-align: center;}
#accueil-top .slider .slogan.middleX a{margin: auto;}
#accueil-top .slider .slogan.bottom{top: unset; bottom: 25%;}
#accueil-top .slider .slogan.left{right: unset; left: 0; text-align: left;}
#accueil-top .slider .slogan.left a{margin-left: 0;}

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

#accueil-content .stats{display: flex; gap: 50px; position: absolute; top: -150px; left: 0; right: 0; margin: auto; width: 75%; color: #fff; background-color: rgba(var(--my-color-rgb), 0.9); text-align: center; padding: 50px 30px; box-sizing: border-box; box-shadow: 0 10px 15px #00000033;
	transition: all 1s; opacity: 0;
}
#accueil-content .stats.show{opacity: 1;}
#accueil-content .stats h2{font-size: 30px; margin: 15px 0;}
#accueil-content .stats p{color: #fff;}
#accueil-content .stats .icon{
	width: 100px;
	height: 100px;
	max-width: 100px;
	max-height: 100px;
	background-color: #fff;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center center;
	-webkit-mask-size: 100% 80%;
	mask-repeat: no-repeat;
	mask-position: center center;
	mask-size: 100% auto;
}

#accueil-content .stats .one{
	width: 100%;
}

#accueil-content .apropos{display: flex; align-items: center; gap: 100px; margin-bottom: 100px;}
#accueil-content .apropos .text{width: 100%;}
#accueil-content .apropos .text > p:not(:last-child){margin-bottom: 20px;}
#accueil-content .apropos .images{position: relative; display: flex; flex-direction: column; gap: 20px; width: 100%;}
#accueil-content .apropos .images:after{content: ''; display: block; position: absolute; top: 0; bottom: 0; margin: auto; height: 60%; width: 100%; z-index: -1;
	background-image: linear-gradient(to right, var(--first-grad-color), var(--second-grad-color));
}

#accueil-content .services{display: flex; align-items: center; gap: 100px; margin-bottom: 100px;}
#accueil-content .services .text{width: 100%;}
#accueil-content .services .text > p:not(:last-child){margin-bottom: 20px;}
#accueil-content .services .image{position: relative; width: 100%;}
#accueil-content .services .image:after{content: ''; display: block; position: absolute; top: 0; bottom: 0; margin: auto; height: 80%; width: 100%; z-index: -1;
	background-color: var(--second-color);
}
#accueil-content .services .list{display: flex; flex-direction: column; gap: 10px; margin-top: 30px;}
#accueil-content .services .list .flex{align-items: center; gap: 20px; font-weight: 400;}
#accueil-content .services .list .flex .check-icon{
	width: 22px;
	height: 22px;
	background-color: var(--second-color);
	-webkit-mask-image: url(img/icons/check.png);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	-webkit-mask-position: center center;
	mask-image: url(img/icons/check.png);
	mask-repeat: no-repeat;
	mask-size: contain;
	mask-position: center center;
}


#accueil-content .produits .text p{
	width: 80%;
	margin: auto;
}

#accueil-content .produits ul.products{
	margin: 3rem 0 4rem;
}

#accueil-content .produits ul.products li.product a{
	color: var(--font-color);
}

#accueil-content .produits ul.products li.product .price{
	margin-bottom: 1rem;
}

#accueil-content .produits ul.products li.product .button{
	color: #fff;
	margin: auto;
}

#accueil-content .bande{display: flex; align-items: center; position: relative; color: #fff; padding: 75px 0;}
#accueil-content .bande .text{position: relative; z-index: 5; text-align: center; width: 60%;}
#accueil-content .bande .text h2{font-weight: 300; font-size: 48px;}
#accueil-content .bande .text p{font-size: 24px;}
#accueil-content .bande .text h2 span, #accueil-content .bande .text p{color: #fff;}
#accueil-content .bande .text .underline{width: 30%; height: 3px; background-color: #fff; margin: 30px auto;}
#accueil-content .bande .text a{margin: 20px auto 0 auto;}

#accueil-content .blogue{margin-bottom: 100px;}
#accueil-content .blogue .grid{grid-template-columns: repeat(3, 1fr); gap: 75px;}
#accueil-content .blogue .article > .image{display: block; width: 100%; aspect-ratio: 16/10;}
#accueil-content .blogue .article > .image img{width: 100%;}
#accueil-content .blogue .article h2{color: var(--second-color); font-size: 30px; font-weight: 400; text-transform: uppercase; margin: 30px 0 10px 0;}

#accueil-content .temoignages{position: relative;}
#accueil-content .temoignages .image{position: relative; width: 50%; height: 500px;}
#accueil-content .temoignages .image img{width: 100%; height: 100%; object-fit: cover;}
#accueil-content .temoignages .image:after{content: ''; display: block; position: absolute; top: 0; bottom: 0; margin: auto; height: 80%; width: 100%; z-index: -1;
	background-color: var(--second-color);
}
#accueil-content .temoignages .box{position: absolute; bottom: -200px; right: 0; width: 80%; padding: 50px 50px 125px 50px; box-shadow: 0 10px 15px #00000033; box-sizing: border-box;
	background-image: linear-gradient(165deg, var(--my-color) 50%, rgba(var(--my-color-rgb), 0.95) 50%);
}
#accueil-content .temoignages .box .grid{grid-template-columns: repeat(3, 1fr); gap: 50px;}
#accueil-content .temoignages .box .grid h3{color: #fff; font-size: 24px;}
#accueil-content .temoignages .box .grid p{color: #fff; margin: 20px 0;}
#accueil-content .temoignages .box .stars img{display: inline-block;}
#accueil-content .spacer-temoignages{width:100%; height:300px;}

#accueil-content .real .flex{gap: 10px;}
#accueil-content .real .one{position: relative; flex-basis: 0; flex-grow: 1; height: 400px; cursor: pointer; opacity: 1;
	transition: all 0.8s;
}
#accueil-content .real .one:hover{flex-grow: 4; opacity: 0.7;}
#accueil-content .real .one img{width: 100%; height: 100%; object-fit: cover;}
#accueil-content .real .one h2{position: absolute; bottom: 0; color: #fff; font-size: 24px; margin:  0 0 10px 20px; text-transform: uppercase; text-shadow: 0 0 10px #000;
	visibility: hidden; opacity: 0;
	transition: all 0.4s;
}
#accueil-content .real .one h2.show{visibility: visible; opacity: 1;}

#accueil-content .contact{display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 100px; padding-top: 100px; margin-bottom: 100px;}
#accueil-content .contact form{display: flex; flex-direction: column; gap: 20px;}
#accueil-content .contact form .input{background-image: linear-gradient(160deg, var(--my-color) 50%, #cccccc 50%); background-size: 200% 200%; background-position: bottom right; padding: 2px;
	transition: all 1s;
}
#accueil-content .contact form .input.focus{background-position: top left;}
#accueil-content .contact form input[type="text"]{all: unset; width: 100%; color: var(--my-color); padding: 10px; box-sizing: border-box; background-color: #fff;}
#accueil-content .contact form textarea{all: unset; display: block; width: 100%; height: 100px; color: var(--my-color); padding: 10px; box-sizing: border-box; background-color: #fff;}
#accueil-content .contact form input[type="submit"]{all: unset; text-transform: uppercase; color: #fff; padding: 15px 20px; border-radius: 15px; cursor: pointer; font-weight: 400;
	background-color: var(--my-color);
	transition: all 0.4s;
}
#accueil-content .contact form input[type="submit"]:hover{background-color: var(--hover-color);}
#accueil-content .contact iframe{box-shadow: 0 10px 15px #00000033;}

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

#page-top{position: relative; height: 500px; background-repeat: no-repeat; background-position: center center; background-size: cover;}
#page-top:after{content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: #000; opacity: 0.3; z-index: 0;}
#page-top .wrap{height: 100%;}
#page-top h1{position: absolute; bottom: 50px; color: #fff; font-size: 48px; text-transform: uppercase; border-left: 5px solid #fff; padding-left: 20px; z-index: 10;}

.page-content > .wrap{padding: 100px 0;}
.page-content > .wrap > *:not(:last-child){margin-bottom: 100px;}
.page-content .section-flex{display: flex; align-items: center; gap: 100px;}
.page-content .section-flex-col{display: flex; flex-direction: column; align-items: center; gap: 30px;}
.page-content .section-flex > *, .page-content .section-flex-col > *{width: 100%;}
.page-content .section-img{position: relative;}
.page-content .section-img *{height: 100%;}
.page-content .section-img > a{display: block; overflow: hidden;}
.page-content .section-img:after, .page-content .section-form:after{content: ''; display: block; position: absolute; top: 0; bottom: 0; margin: auto; height: 60%; width: 100%; z-index: -1;
	background-image: linear-gradient(to right, var(--first-grad-color), var(--second-grad-color));
}
.page-content .section-text h3{
	color: var(--second-color);
	margin: 1rem 0;
}
.page-content .section-text > p:not(:last-child){margin-bottom: 20px;}
.page-content .section-text > ul{
	padding-left: 3rem;
	font-weight: 400;
	color: var(--font-color);
}
.page-content .section-text > ul li{
	list-style-type: disc;
	line-height: 1.5rem;
}
.page-content .section-text > ul li:not(:last-child){
	margin-bottom: .5rem;
}
.page-content .section-text > p > a,
.page-content .section-text > ul > li > a{
	color: var(--second-color);
}
.page-content .section-text > p > a:hover,
.page-content .section-text > ul > li > a:hover{
	text-decoration: underline;
}

.page-content .section-btns{justify-content: center; gap: 30px;}

.page-content .elements-list{display: flex; flex-direction: column; gap: 10px; margin-top: 30px;}
.page-content .elements-list .flex{align-items: center; gap: 20px; font-weight: 400;}

.page-content .section-questions{cursor: pointer;}
.page-content .section-questions > h2{display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 0 25px; margin: 0;
	background-image: linear-gradient(to right, var(--my-color) 50%, transparent 50%); background-size: 200% 200%; background-position: right;
	transition: all 0.4s;
}
.page-content .section-questions > h2 .separator{flex-grow: 1; height: 1px; background-color: #ececec;}
.page-content .section-questions > h2 img{filter: var(--filter-my-color); transform: rotate(180deg); transition: all 0.4s;}
.page-content .section-questions > h2.open{padding: 20px 25px; color: #fff; background-position: left;}
.page-content .section-questions > h2.open img{filter: var(--filter-white); transform: rotate(0);}
.page-content .section-questions .answers{display: none; padding-left: 20px; padding-top: 30px; border-left: 5px solid var(--my-color);}
.page-content .section-questions .answers > h3{color: var(--font-color); margin-bottom: 10px;}
.page-content .section-questions .answers > p:not(:last-child){margin-bottom: 15px;}

.page-content .section-gallery{display: flex; justify-content: center; flex-wrap: wrap; gap: 30px; width: 75%; margin: auto;}
.page-content .section-gallery a{max-width: 30%; transition: opacity .3s;}
.page-content .section-gallery a:hover{opacity: .6;}
.page-content .section-gallery a img{aspect-ratio: 1/1;}

.page-content .banner{padding: 50px 0; background-image: linear-gradient(to right, var(--first-grad-color), var(--second-grad-color));}
.page-content .banner .grid{grid-template-columns: repeat(3, 1fr); gap: 50px;}

.page-content .banner.stats .grid .element h1{font-size: 48px; color: #fff;}
.page-content .banner.stats .grid .element h3{color: #fff;}
.page-content .banner.stats .grid .element p{font-size: 24px; color: #fff; text-transform: uppercase;}

.page-content .banner.icon-boxes .grid .element .icon{
	width: 128px;
	height: 128px;
	background-color: #fff;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	-webkit-mask-position: center center;
	mask-repeat: no-repeat;
	mask-size: contain;
	mask-position: center center;
	margin: auto;
}
.page-content .banner.icon-boxes .grid .element h3{color: #fff; margin: 15px 0;}
.page-content .banner.icon-boxes .grid .element p{color: #fff;}

#general-page h2,
#general-page h3,
#general-page h4{
	color: var(--second-color);
	text-transform: uppercase;
	margin-bottom: 1rem;
}

#general-page * + h2,
#general-page * + h3,
#general-page * + h4{
	margin-top: 1.5rem;
}

#general-page p:not(:last-child){
	margin-bottom: .75rem;
}

:where(body:not(.woocommerce-cart)) #general-page ul{
	margin-top: 1rem;
	margin-left: 2rem;
}

:where(body:not(.woocommerce-cart, .woocommerce-account)) #general-page ul > li{
	list-style-type: disc;
	color: var(--font-color);
	line-height: 1.6rem;
}

:where(body:not(.woocommerce-cart)) #general-page ul > li:not(:last-child){
	margin-bottom: .75rem;
}

/********************************************************************************************************************/
/* À PROPOS */

#apropos .avantages .grid{grid-template-columns: repeat(3, 1fr); gap: 50px; margin-top: 50px;}
#apropos .avantages .grid img{filter: var(--filter-my-color);}
#apropos .avantages .grid h3{margin: 30px 0; color: var(--second-color);}

/********************************************************************************************************************/
/* SERVICES */

#services .services-list{grid-template-columns: repeat(3, 1fr); gap: 50px;}
#services .services-list .element{gap: 30px;}
#services .services-list .element h3{font-size: 24px; color: var(--second-color); margin-bottom: 15px;}
#services .services-list .element .img{position: relative; flex-shrink: 0; width: max-content; height: max-content; overflow: hidden;}
#services .services-list .element .img > img{width: 150px; height: 150px;}
#services .services-list .element .img .img-arrow-border{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--my-color); padding: 0 20px; transform: translateX(calc(-100% + 10px)); box-sizing: border-box;
	transition: transform .4s, background-color .4s;
}
#services .services-list .element .text{transition: opacity .4s;}
#services .services-list .element .img .img-arrow-border img{position: relative; top: 50%; transform: translateY(-50%); margin: auto;}
#services .services-list .element:hover .img .img-arrow-border{transform: translateX(0); background-color: rgb(var(--my-color-rgb), 0.7);}
#services .services-list .element:hover .text{opacity: 0.8;}

#service-form{position:relative; margin:0 auto 50px; width:50%;}

/********************************************************************************************************************/
/* CONTACT */

#contact .coords{justify-content: space-evenly; align-items: center; gap: 50px;}
#contact .coords .element{align-items: center; gap: 30px;}
#contact .coords .element .icon{background-color: #ececec; border-radius: 50%;}
#contact .coords .element .icon img{width: 32px; padding: 15px; filter: var(--filter-my-color);}
#contact .coords .element p{font-weight: 500;}

#contact .section-img iframe{width: 100%; height: 100%;}

#contact .section-form{position: relative;}
#contact .section-form form{display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 95%; background-color: #ececec; padding: 30px; border-radius: 15px; box-sizing: border-box;}
#contact .section-form form .input{background-image: linear-gradient(160deg, var(--my-color) 50%, #ececec 50%); background-size: 200% 200%; background-position: bottom right; padding: 2px;
	transition: all 1s;
}
#contact .section-form form .full-width{grid-column: span 2;}
#contact .section-form form .input.focus{background-position: top left;}
#contact .section-form form input[type="text"]{all: unset; width: 100%; color: var(--my-color); padding: 10px; box-sizing: border-box; background-color: #fff;}
#contact .section-form form textarea{all: unset; display: block; width: 100%; height: 100px; color: var(--my-color); padding: 10px; box-sizing: border-box; background-color: #fff;}
#contact .section-form form input[type="submit"]{all: unset; text-transform: uppercase; color: #fff; padding: 15px 20px; border-radius: 15px; cursor: pointer; font-weight: 400;
	background-color: var(--my-color);
	transition: all 0.4s;
}
#contact .section-form form input[type="submit"]:hover{background-color: rgba(var(--my-color-rgb), 0.7);}

#contact .section-flex.form .section-text{width: 80%;}

/********************************************************************************************************************/
/* RÉALISATIONS */

#realisations .section-realisations .filters{justify-content: center; gap: 50px; margin-bottom: 50px;}
#realisations .section-realisations .filters a{color: #818181; text-transform: uppercase; cursor: pointer; transition: all 0.4s;}
#realisations .section-realisations .filters a:hover{opacity: 0.7;}
#realisations .section-realisations .filters a.active{color: var(--font-color); font-weight: 500;}
#realisations .section-realisations .grid{grid-template-columns: repeat(4, 1fr); gap: 10px;}
#realisations .section-realisations .grid > a{display: block; position: relative; background-color: #000;}
#realisations .section-realisations .grid > a img{aspect-ratio: 1; width: 100%; height: 100%; transition: all 0.4s;}
#realisations .section-realisations .grid > a:hover img{opacity: 0.7;}
#realisations .section-realisations .grid > a h2{position: absolute; bottom: 0; color: #fff; font-size: 24px; margin: 10px; text-transform: uppercase; text-shadow: 0 0 10px #000; z-index: 10;
	visibility: hidden; opacity: 0;
	transition: all 0.4s;
}
#realisations .section-realisations .grid > a h2.show{visibility: visible; opacity: 1;}

#realisations .realisation-info{margin-top: 200px;}
#realisations .realisation-single a > img{transition: all 0.4s;}
#realisations .realisation-single a:hover > img{transform: scale(1.1);}
#realisations .realisation-single .section-flex{padding: 0 30px;}
#realisations .realisation-single .section-text .term{color: #818181;}
#realisations .realisation-single .realisation-images{display: none; grid-template-columns: repeat(6, 1fr); gap: 30px; padding: 0 30px; margin-top: 50px;}
#realisations .realisation-single .realisation-images img{aspect-ratio: 1;}
#realisations .realisation-single .section-img .photos-number{
	position: absolute;
    bottom: .5rem;
    left: .5rem;
    display: flex;
    align-items: center;
    color: #fff;
    font-weight: 400;
    height: auto;
    background-color: #00000099;
    padding: .5rem .75rem;
    box-sizing: border-box;
}
#realisations .realisation-single .section-img .photos-number::before{
	content: '';
	display: block;
	width: 1.25rem;
	height: 1.25rem;
	background-color: #fff;
	-webkit-mask-image: url(img/icons/pictures-icon.svg);
	-webkit-mask-size: contain;
	-webkit-mask-position: center center;
	-webkit-mask-repeat: no-repeat;
	mask-image: url(img/icons/pictures-icon.svg);
	mask-size: contain;
	mask-position: center center;
	mask-repeat: no-repeat;
	margin-right: .5rem;
}
#realisations .realisation-arrows{justify-content: center; gap: 50px;}
#realisations .realisation-arrows .prev, #realisations .realisation-arrows .next{cursor: pointer; transition: all 0.4s;}
#realisations .realisation-arrows .prev:hover{opacity: 0.7; transform: translateX(-5px);}
#realisations .realisation-arrows .next:hover{opacity: 0.7; transform: translateX(5px);}

#realisations .slick-list{user-select: text;}

#realisations.page-content .section-img:after{
	content: none;
}

/********************************************************************************************************************/
/* BLOGUE */

#blogue .blog-container{gap: 100px;}
#blogue .blog-container .main-content{width: 75%; grid-template-columns: 1fr 1fr; gap: 50px;}
#blogue .blog-container .main-content > h2{color: var(--second-color); font-size: 30px; font-weight: 400; text-transform: uppercase; margin-bottom: 30px;}
#blogue .blog-container .main-content article .meta{color: var(--second-color); font-size: 16px; margin: 20px 0 5px;}
#blogue .blog-container .main-content article > a > img{width: 100%; aspect-ratio: 16/10}
#blogue .blog-container .main-content article h2{color: var(--second-color); font-size: 24px; font-weight: 400; text-transform: uppercase; margin-bottom: 10px;}

#blogue .blog-container .side-content{position: sticky; top: 150px; width: 25%; height: max-content; padding-left: 15px; border-left: 2px solid var(--my-color); box-sizing: border-box;}
#blogue .blog-container .side-content aside:not(:last-child){margin-bottom: 30px;}
#blogue .blog-container .side-content aside h2{color: var(--second-color); font-size: 18px; font-weight: 400; text-transform: uppercase; margin-bottom: 10px;}
#blogue .blog-container .side-content aside li{margin-bottom: 10px;}
#blogue .blog-container .side-content aside li a{color: var(--font-color); font-size: 16px; text-transform: uppercase; transition: all 0.4s;}
#blogue .blog-container .side-content aside li time{color: var(--font-color); font-size: 14px; transition: all 0.4s;}
#blogue .blog-container .side-content aside li a:hover, #blogue .blog-container .side-content aside li a:hover + time{color: var(--my-color);}
#blogue .blog-container .side-content aside .wp-block-search__input{border-left: 1px solid var(--my-color); border-top: 1px solid var(--my-color); border-right: 0; border-bottom: 1px solid var(--my-color);}
#blogue .blog-container .side-content aside .wp-block-search__input:focus{outline: none;}
#blogue .blog-container .side-content aside .wp-block-search__button{background-color: transparent; border-left: 0; border-top: 1px solid var(--my-color); border-right: 1px solid var(--my-color); border-bottom: 1px solid var(--my-color); margin-left: 0;}


#blogue.single .blog-container article h1{color: var(--second-color); font-size: 36px; font-weight: 400; text-transform: uppercase; margin-bottom: 30px;}
#blogue.single .blog-container article p{margin-bottom: 30px;}

/********************************************************************************************************************/
/* BOUTIQUE */
/********************************************************************************************************************/

/**
 * Shop page styling
 */

#shop-page .shop-container{
	display: flex;
	padding: 3rem 0;
}

#shop-page .shop-container > *:first-child{
	width: 70%;
}

#shop-page .shop-container > *:last-child{
	width: 30%;
}

#shop-page .shop-container #sidebar{
	margin-left: 3rem;
}

#shop-page #sidebar .widget-container{
	margin-bottom: 2rem;
}

#shop-page #sidebar .widget-container h2,
#shop-page #sidebar .widget-container h3,
#shop-page #sidebar .widget-container .wp-block-heading{
	font-size: 1.125rem;
	font-weight: 400;
	color: var(--second-color);
	text-transform: uppercase;
	margin-bottom: 1rem;
}

#shop-page #sidebar .wc-block-product-categories-list-item:not(:last-child){
	margin-bottom: .5rem;
}

#shop-page #sidebar .wc-block-product-categories-list-item > a{
	color: var(--font-color);
	transition: color .3s;
}

#shop-page #sidebar .wc-block-product-categories-list-item > a:hover{
	color: var(--my-color);
}

#shop-page #sidebar .widget-container .product_list_widget .product-title{
	color: var(--second-color);
}

#shop-page #sidebar .widget-container .product_list_widget del{
	opacity: .5;
}

#shop-page #sidebar .widget-container .product_list_widget > li:hover{
	opacity: .6;
}

/* Single product page */

#single-product .product .product_title{
	margin-bottom: 1rem;
}

#single-product .product .price{
	color: var(--font-color);
}

#single-product .product .woocommerce-product-details__short-description{
	margin: 1rem 0;
}

#single-product .product .woocommerce-variation-price{
	margin-bottom: 1rem;
}

#single-product .product .woocommerce-variation-price .price{
	font-weight: 700;
	color: var(--my-color);
}

#single-product .product .variations .label{
	text-align: left;
}

#single-product .product .variations select{
	font-family: 'Lato', sans-serif;
	width: 100%;
	padding: .5rem;
}

#single-product .product .single_add_to_cart_button.disabled{
	background-color: var(--second-color);
	opacity: .5;
}

#single-product .product .single_add_to_cart_button.alt:hover{
	background-color: var(--second-color);
}

#single-product .product .quantity .qty{
	border: 1px solid #666;
	margin-top: 8px;
	margin-right: 8px;
}

#single-product .product .product_meta > *{
	display: block;
	margin-bottom: 1rem;
}

#single-product .product .product_meta a{
	color: var(--my-color);
}

#single-product .product .product_meta a:hover{
	text-decoration: underline;
}

#single-product .woocommerce-Tabs-panel h2,
#single-product .related h2{
	color: var(--second-color);
	text-transform: uppercase;
	margin-bottom: 1rem;
}

.produits ul.products li.product a.added_to_cart,
.woocommerce ul.products li.product a.added_to_cart{
	color: var(--font-color);
}

.produits ul.products li.product a.added_to_cart::after,
.woocommerce ul.products li.product a.added_to_cart::after{
	content: '';
	display: block;
	border-bottom: 1px solid var(--my-color);
	transform: scaleX(0);
	transform-origin: 0 50%;
	padding-top: 5px;
	transition: transform 0.4s;
}

.produits ul.products li.product a.added_to_cart:hover::after,
.woocommerce ul.products li.product a.added_to_cart:hover::after{
	transform: scaleX(1);
}

.woocommerce .page-content > .wrap{
	padding: 50px 0;
}

.woocommerce .price-free{
	color: green;
}

.woocommerce #review_form{
	color: var(--font-color);
}

.woocommerce #review_form .comment-form-rating label{
	display: block;
	margin: 1rem 0 .5rem;
}

.woocommerce p.stars a{
	color: var(--my-color);
}

del,
.woocommerce .price del,
.woocommerce-cart .price del{
	text-decoration: line-through;
	opacity: .5;
}

/**
 * Woocommerce style overrides
 */

.woocommerce .woocommerce-breadcrumb{
	margin: 0 0 1.5rem;
}

.woocommerce ul.products li.product .woocommerce-loop-category__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h3{
	font-size: 1.125rem;
	color: var(--second-color);
}

.woocommerce:where(body:not(.woocommerce-uses-block-theme)) ul.products li.product .price{
	font-size: 1rem;
	font-weight: 700;
	color: var(--font-color);
}

.woocommerce ul.products li.product .button,
.woocommerce div.product form.cart .button,
.woocommerce #review_form #respond .form-submit input,
.wc-block-components-totals-coupon-link,
.wc-block-components-button,
.woocommerce table.my_account_orders .button,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button,
.wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link{
	display: inline-block;
	font-size: .75rem;
	font-weight: 500;
	text-transform: uppercase;
	color: #fff;
	padding: 12px 15px;
	border: none;
	border-radius: 15px;
	background-color: var(--my-color);
	transition: background-color .4s !important;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce div.product form.cart .button:hover,
.woocommerce #review_form #respond .form-submit input:hover,
.wc-block-components-button:hover,
.woocommerce table.my_account_orders .button:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button:hover,
.wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link:hover{
	color: #fff;
	background-color: var(--second-color);
}

.wc-block-components-totals-coupon-link{
	background-color: transparent;
	color: var(--my-color);
	border: 1px solid var(--my-color);
	transition: color .4s !important, background-color .4s !important;
}

.wc-block-components-totals-coupon-link:hover{
	color: #fff;
	background-color: var(--my-color);
}

.woocommerce span.onsale{
	background-color: red;
}

.woocommerce .woocommerce-ordering select{
	font-family: 'Lato', sans-serif;
	color: var(--second-color);
	border: 1px solid var(--my-color);
	padding: .5rem;
}

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

.woocommerce-message{
	border-top-color: var(--second-color);
}

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

/** Cart / checkout styling **/

.wc-block-components-product-badge,
.wc-block-cart-item__total-price-and-sale-badge-wrapper .wc-block-components-sale-badge{
	color: var(--my-color);
	border-color: var(--my-color);
}

table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name{
	color: var(--second-color);
	font-weight: 700;
}

table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name:hover{
	text-decoration: underline;
}

table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link:hover{
	color: var(--my-color) !important;
}

.wc-block-components-checkout-return-to-cart-button:hover{
	color: var(--my-color);
}

.wc-block-components-checkout-return-to-cart-button:hover svg{
	fill: var(--my-color);
}

.woocommerce table.shop_table td a{
	color: var(--my-color);
	font-weight: 400;
}

.woocommerce table.shop_table td a:hover{
	text-decoration: underline;
}

.woocommerce .woocommerce-order .woocommerce-notice{
	margin-bottom: 2rem;
}

.woocommerce .woocommerce-order h2{
	margin-bottom: 1rem;
}

/** My Account page styling **/

.woocommerce-MyAccount-content > p > a{
	color: var(--my-color);
	font-weight: 400;
	transition: color .4s;
}

.woocommerce-MyAccount-content > p > a:hover{
	color: var(--second-color);
	text-decoration: underline;
}

.woocommerce-MyAccount-content .input-text{
	font-family: 'Lato', sans-serif;
	padding: .5rem;
	box-sizing: border-box;
}

.woocommerce-MyAccount-content .woocommerce-EditAccountForm .woocommerce-Button,
.woocommerce-MyAccount-content .woocommerce-address-fields button[type=submit],
.woocommerce-MyAccount-content .woocommerce-Addresses{
	margin-top: 1rem;
}

.woocommerce-MyAccount-content h3{
	color: var(--second-color);
	margin-bottom: .75rem;
}

.wc-block-grid__product .wc-block-grid__product-title{
	font-size: 1rem;
	color: var(--second-color);
}

.wc-block-grid__product .wc-block-grid__product-price{
	font-size: 1rem;
	font-weight: 400;
}

/**
 * Woocommerce widgets/plugins overrides
 */

/* Search plugin */

.dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp{
	padding: 10px 0;
}

.dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input{
	background: none;
	border: 1px solid var(--second-color);
	border-radius: 0;
}

.dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit{
	left: 10px;
	top: 18px;
}

.dgwt-wcas-suggestions-wrapp{
	border: 1px solid #f4f4f4;
}

/* Filter by price widget */

.wc-block-components-price-slider__range-input-progress{
	--range-color: var(--my-color) !important;
}

.wc-block-components-price-slider--is-input-inline .wc-block-components-price-slider__controls .wc-block-components-price-slider__amount{
	border-color: var(--second-color) !important;
	border-radius: 0 !important;
}

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

#footer{border-top: 3px solid var(--my-color);}
#footer .top{display: flex; align-items: center; gap: 100px; padding: 50px 0;}
#footer .top .logo{display: flex; flex-direction: column; align-items: center; gap: 20px;}
#footer .top .logo > a{transition: all 0.4s;}
#footer .top .logo > a:hover{opacity: 0.7;}
#footer .top .logo .socials{display: flex; gap: 15px;}
#footer .top .logo .socials a{
	width: 1.25rem;
	height: 1.25rem;
	background-color: var(--my-color);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-repeat: no-repeat;
	mask-size: contain;
	transition: all 0.4s;
}
#footer .top .logo .socials a:hover{opacity: 0.7;}
#footer .top h2{color: var(--second-color); font-weight: 400; text-transform: uppercase; font-weight: 400; margin-bottom: 30px;}
#footer .top > .menu{align-self: flex-start;}
#footer .top > .menu ul, #footer .top .coords .info{display: flex; flex-direction: column; gap: 15px;}
#footer .top > .menu ul a{display: inline-block; color: var(--font-color);}
#footer .top > .menu ul a:after{content: ''; display: block; border-bottom: 1px solid var(--my-color); transform: scaleX(0); transform-origin: 0 50%; margin-top: 2px;
	transition: all 0.4s;
}
#footer .top > .menu ul a:hover:after{transform: scaleX(1);}
#footer .top .coords{align-self: flex-start;}
#footer .top .coords .info .flex{align-items: center; gap: 10px; color: var(--font-color);
	transition: all 0.4s;
}
#footer .top .coords .info .flex:hover{opacity: 0.7;}
#footer .top .coords .info .flex .coords-icon{
	width: 18px; height: 18px;
	background-color: var(--my-color);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	-webkit-mask-position: center center;
	mask-repeat: no-repeat;
	mask-size: contain;
	mask-position: center center;
}
#footer .bottom{display: flex; justify-content: space-between; padding: 50px 0;}
#footer .bottom a{color: var(--font-color);
	transition: color 0.4s;
}
#footer .bottom a:hover{color: var(--my-color);}
#footer .bottom .top-arrow{transform: translateY(0); filter: var(--filter-my-color);}
#footer .bottom .top-arrow:hover{
	animation-duration: 0.8s;
	animation-iteration-count: infinite;
	animation-name: topArrow;
}

@keyframes topArrow{
	0%{transform: translateY(0);}
	50%{transform: translateY(-5px);}
	100%{transform: translateY(0);}
}

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

.form-result{color: #fff; padding: 20px; margin-bottom: 30px;}
.form-result.error{background-color: red;}
.form-result.success{background-color: var(--my-color);}

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

#page-not-found{padding: 100px; text-align: center;}
#page-not-found h2{font-size: 36px; color: var(--second-color); margin-bottom: 15px;}
#page-not-found a{margin-left: auto; margin-right: auto;}

.otgs-development-site-front-end{display: none;}
.gform_confirmation_message{background:green; color:white; padding:30px;}

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

/* COVER CLASS::START */
.tall-img {
	height: auto;
	width: 100%;
	max-height: none;
	text-align: center;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
.wide-img {
	width: auto;
	height: 100%;
	max-width: none;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
}
.cover {
	position: relative;
	overflow: hidden;
}
.cover > img{
	position:absolute;
}

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

/* CSS MEDIA QUERIES - WIDTH */

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

}

@media screen and (max-width: 1450px) {
	.wrap{width:1100px;}

	#nav .bottom .left .menu > li > a,
	#nav .menu-item-has-children > a{
		font-size: .75rem;
	}

	#services .services-list{gap: 50px 30px;}
	#service-form{width:70%;}
	#footer .top{gap: 75px;}
}

@media screen and (max-width: 1150px) {
	.wrap{width:900px;}

	#nav .bottom .socials, #nav.scrolled .bottom .socials.dark{display: none;}

	#nav .bottom .logo .white,
	#nav.scrolled .bottom .logo .dark{
		max-width: 120px;
	}

	#accueil-content .stats{width: 85%;}
	#accueil-content .stats .one img{width: 35%;}
	#accueil-content .stats .one h2{font-size: 24px;}
	#accueil-content .temoignages .image{width: 75%;}
	#accueil-content .temoignages .box{bottom: -200px; padding: 50px;}
	#accueil-content .spacer-temoignages{height: 300px;}
	#accueil-content .contact iframe{width: 100%;}

	#services .services-list{grid-template-columns: 1fr 1fr;}

	#realisations .section-realisations .filters{font-size: 14px;}

	#footer .top{gap: 50px;}
	#footer .top h2{font-size: 18px;}

	.woocommerce ul.products li.product,
	.woocommerce-page ul.products li.product{
		width: 46%;
	}
	
	#service-form{width:100%;}

}

@media screen and (max-width: 950px) {
	.wrap{width:700px;}

	.titre{font-size: 30px;}
	.wide{height: 250px;}

	#nav .top .item{font-size: 14px;}
	#nav .top .socials{display: none;}
	#nav .bottom .logo img,
	#nav.scrolled .bottom .logo img{
		max-width: 125px;
	}
	#nav .bottom .left .menu{display: none;}
	#nav .bottom .menu-icons{display: block;}
	#nav .bottom .menuicon{display: block;}
	#nav .bottom .ecom-links{
		margin-left: auto;
		margin-right: 3rem;
	}

	#accueil-top .slider .slogan h1{font-size: 60px;}

	#accueil-content .stats{width: 100%;}
	#accueil-content .apropos{flex-direction: column;}
	#accueil-content .produits .text p{width: 100%;}
	#accueil-content .services{flex-direction: column-reverse;}
	#accueil-content .bande .text{width: 75%;}
	#accueil-content .bande .text h2{font-size: 36px;}
	#accueil-content .bande .text p{font-size: 18px;}
	#accueil-content .blogue{padding-top: 50px;}
	#accueil-content .blogue .grid{grid-template-columns: auto;}
	#accueil-content .temoignages{margin-bottom: 100px;}
	#accueil-content .temoignages .image{width: 100%; height: 400px;}
	#accueil-content .temoignages .box{position: static; width: 100%;}
	#accueil-content .temoignages .box .grid{grid-template-columns: auto;}
	#accueil-content .spacer-temoignages{display: none;}
	#accueil-content .real .flex{flex-wrap: wrap;}
	#accueil-content .real .one{flex: 33%;}
	#accueil-content .contact{grid-template-columns: auto;}

	#page-top{height: 350px;}
	#page-top h1{font-size: 36px;}

	.page-content .section-flex{flex-direction: column; gap: 50px;}

	.page-content .banner.stats .grid .element h1{font-size: 36px;}
	.page-content .banner.stats .grid .element p{font-size: 18px;}

	#services .services-list{grid-template-columns: auto;}

	#realisations .section-realisations .grid{grid-template-columns: 1fr 1fr;}
	#realisations .section-realisations .filters{gap: 30px 30px; flex-wrap: wrap;}
	#realisations .realisation-single .realisation-images{grid-template-columns: repeat(3, 1fr); gap: 10px;}
	#realisations .realisation-arrows{margin-top: -100px;}

	#blogue .blog-container{gap: 50px;}
	#blogue .blog-container .main-content{width: 60%; grid-template-columns: auto;}
	#blogue .blog-container .side-content{width: 40%;}
	#blogue.single .blog-container article h1{font-size: 24px;}

	#contact .coords{flex-direction: column; width: max-content; align-items: flex-start; margin-left: auto; margin-right: auto;}
	#contact .section-flex.form .section-text{width: 100%;}

	#shop-page #sidebar .widget-container h2,
	#shop-page #sidebar .widget-container h3,
	#shop-page #sidebar .widget-container .wp-block-heading{
		font-size: 1rem;
	}

	.dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input{
		font-size: .75rem;
		padding: .75rem 0 .75rem 2.5rem;
	}

	.dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit{
		left: 6px;
	}

	#footer .top{flex-wrap: wrap; justify-content: space-between;}
	#footer .top .logo{flex-basis: 100%;}
	#footer .bottom{font-size: 14px; flex-direction: column; align-items: center; gap: 10px; text-align: center;}
	#footer .bottom .top-arrow{order: -1; margin-bottom: 30px;}
}

@media screen and (max-width: 750px) {
	.wrap{width: 500px;}
	.half{height: 250px;}

	#mobile-menu{width: 75%; left: -75%;}

	#accueil-top .slider .slogan h1{font-size: 48px;}
	
	#accueil-content .stats{width: 85%;}
	#accueil-content .stats{flex-direction: column;}
	#accueil-content .stats .one img{width: auto;}
	#accueil-content .spacer-stats{height: 850px;}

	.img-half{height: 250px;}

	#apropos .avantages .grid{grid-template-columns: auto;}

	#blogue.single .blog-container{flex-direction: column;}
	#blogue.single .blog-container .main-content, #blogue.single .blog-container .side-content{width: 100%;}
	#blogue.single .blog-container .side-content{position: relative; top: unset;}

	#shop-page .shop-container{
		flex-direction: column;
	}

	#shop-page .shop-container > *:first-child,
	#shop-page .shop-container > *:last-child{
		width: 100%;
	}

	#shop-page .shop-container #sidebar{
		margin-left: 0;
	}

	#footer .top > .menu{
		max-width: 160px;
	}

}

@media screen and (max-width: 550px) {
	.wrap{width: 90%;}
	html,
	p{font-size: 14px;}
	.titre, .titre-white, .titre-underline, .titre-underline-white{font-size: 24px;}
	.btn-blue{font-size: 14px; padding: 10px;}
	.btn-underline{font-size: 14px; margin-top: 10px;}
	.wide{height: 150px;}

	#nav .top{display: none;}
	#nav .bottom .logo{width: 75%;}
	#nav .bottom .logo img,
	#nav.scrolled .bottom .logo img{
		max-width: 100px;
	}
	#nav.scrolled{top: 0;}
	#mobile-menu .extra a{font-size: 14px;}
	#mobile-menu ul li a{font-size: 16px}

	#accueil-top.mg-bottom{margin-bottom: 50px;}
	#accueil-top .slider .slogan h1{font-size: 30px;}
	#accueil-top .slider .slogan a{font-size: 18px; padding: 10px 20px; border: 2px solid #fff;}
	#accueil-top .slider .slogan a:hover{border: 2px solid var(--my-color);}

	#accueil-content .stats{top: -100px; padding: 30px;}
	#accueil-content .stats .one img{width: 35%;}
	#accueil-content .stats .one h2{font-size: 18px; margin: 5px 0;}
	#accueil-content .apropos{gap: 50px; margin-bottom: 50px;}
	#accueil-content .services{gap: 50px; margin-bottom: 50px;}
	#accueil-content .bande{padding: 50px 0;}
	#accueil-content .bande .text h2{font-size: 24px;}
	#accueil-content .bande .text .underline{margin: 15px auto;}
	#accueil-content .blogue{margin-bottom: 50px;}
	#accueil-content .blogue .grid{gap: 50px;}
	#accueil-content .blogue .article h2{font-size: 24px;}
	#accueil-content .temoignages{margin-bottom: 50px;}
	#accueil-content .temoignages .image{height: 250px;}
	#accueil-content .temoignages .box{padding: 30px;}
	#accueil-content .real .one{flex: 100%; height: 100px;}
	#accueil-content .real .one h2{visibility: visible; opacity: 1; font-size: 18px;}
	#accueil-content .contact{gap: 50px; padding-top: 50px; margin-bottom: 50px;}

	#page-top{height: 250px;}
	#page-top h1{font-size: 24px;}

	.page-content > .wrap{padding: 50px 0;}
	.page-content > .wrap > *:not(:last-child){margin-bottom: 50px;}
	.page-content .section-flex{gap: 50px;}
	.page-content .section-btns{flex-direction: column; gap: 0; align-items: center;}

	.page-content .banner{padding: 30px 0;}
	.page-content .banner .grid{grid-template-columns: auto; gap: 30px;}
	.page-content .banner.icon-boxes .grid .element .icon{width: 64px; height: 64px;}

	.page-content .section-gallery{
		width: 85%;
		gap: 10px;
	}

	#apropos .avantages .grid img{width: 72px;}
	#apropos .avantages .grid h3{margin: 10px 0;}

	#services .services-list .element{flex-direction: column; gap: 15px;}

	#realisations .section-realisations .grid > a h2{
		font-size: 18px;
	}
	#realisations .realisation-info{margin-top: 150px;}
	#realisations .realisation-single .realisation-images{grid-template-columns: 1fr 1fr;}
	#realisations .realisation-arrows{margin-top: -40px;}

	#blogue .blog-container{flex-direction: column;}
	#blogue .blog-container .main-content, #blogue .blog-container .side-content{width: 100%;}
	#blogue .blog-container .side-content{position: relative; top: unset;}

	#contact .section-form form{grid-template-columns: auto;}
	#contact .section-form form .full-width{grid-column: unset;}
	
	#footer .top > .menu{
		max-width: 100%;
		width: 100%;
	}

	#footer .top .menu ul, #footer .top .coords .info{
		flex-direction: row; flex-wrap: wrap;
	}

	.woocommerce ul.products li.product .woocommerce-loop-category__title,
	.woocommerce ul.products li.product .woocommerce-loop-product__title,
	.woocommerce ul.products li.product h3{
		font-size: 1rem;
	}

	.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit,
	.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button,
	.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button,
	.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button,
	:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce #respond input#submit,
	:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button,
	:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button,
	:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce input.button{
		font-size: .625rem;
	}

	.woocommerce:where(body:not(.woocommerce-uses-block-theme)) ul.products li.product .price{
		font-size: .875rem;
	}

}

/* CSS MEDIA QUERIES - HEIGHT */


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

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

@media (pointer: coarse) and (hover: none) {

	#services .services-list .element h3{
		text-decoration: underline;
	}

}