/*
Theme Name: Stal Child
Theme URI: http://stal.qodeinteractive.com
Description: A child theme of Stal
Author: Mikado Themes
Author URI: http://themeforest.net/user/mikado-themes
Version: 1.0.0
Text Domain: stal
Template: stal
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/


/* 1- GENERAL ****************************************************/
/* Tarte au citron couleur */
:root {
	--main-color: #e20613;
}

body{
	font-family: "Maven Pro", sans-serif;
	font-weight: 400;
	font-style: normal;
}
h1,
h2,
h3,
h4,
h5,
h6{
	font-family: prometo, sans-serif;
	font-style: normal;
	line-height: normal !important;
}
h2{
	color : #e20613;
	font-size : 28px; 
	font-weight : 700;
	letter-spacing : 0.2px;
	text-transform : uppercase;
	margin: 0 0 10px;
}
h3{
	color : #000;
	font-size : 25px; 
	font-weight : 300;
	letter-spacing : 0px;
	text-transform : uppercase;
	margin: 20px 0 4px 0;
}
h4{
	color : #000;
	font-size : 23px; 
	font-weight : 300;
	letter-spacing : 0px;
	text-transform : uppercase;
	margin: 20px 0 4px 0;
}
h5{
	color : #000;
	font-size : 20px; 
	font-weight : 300;
	letter-spacing : 0px;
	text-transform : uppercase;
	margin: 20px 0 4px 0;
}
h6{
	color : #000;
	font-size : 20px; 
	font-weight : 300;
	letter-spacing : 0px;
	margin: 20px 0 4px 0;
}
p{
	color : #000; 
	font-size : 20px; 
	line-height: 26px;
	text-align : justify;
	hyphens: auto;
	margin : 0 0 15px 0;
}
ol, ul {
    list-style-position: outside;
    margin: 0 20px 1.5em;
}
li{
	color : #000; 
	font-size : 20px; 
	line-height: 26px;
	text-align : justify;
	hyphens: auto;
	margin : 0px 0 10px;
}
::selection {
    color: #fff;
    background: #e20613;
}
.e-con {
    --container-max-width: 1300px !important;
}
/* 2-ENTETE ****************************************************/
/* LOGO */
#qodef-page-header .qodef-header-logo-link img {
    width: 100% !important;
    max-width: 290px;
    height: auto;
}
/* MENU */
.qodef-header-navigation>ul>li{
	padding: 0 12px;
}
.qodef-header-navigation>ul>li a{
	font-family: prometo, sans-serif;
    font-weight: 500;
    font-style: normal;
	text-transform : uppercase;
	color : #808080;
	letter-spacing : 0.4px
}
.qodef-header-navigation>ul>li a:after{
    content: '';
    background-color: #e20613;
    height: 30px;
    width: 2px;
    display: inline-block;
    margin: 0 0 0 22px;
}
.qodef-header-navigation>ul>li a:hover,
.qodef-header-navigation>ul>li a:focus,
.qodef-header-navigation>ul>li a:active, 
.qodef-header-navigation>ul>li.current-menu-ancestor>a, 
.qodef-header-navigation>ul>li.current-menu-item>a{
	color :  #e20613;
}
.qodef-header-navigation>ul>li:last-child a:after{
	content : none;
}
.qodef-header-navigation>ul>li>a .qodef-menu-item-inner:before{
	content : none;
}
.qodef-header-navigation .hide-destock{
	display : none; 
}
/* ICONE CONTACT  */
.qodef-icon-holder a {
    background: #e20613;
    padding: 10px;
    border-radius: 50%;
    color: #fff;
	border : 1px solid #e20613;
	transition: opacity .3s ease;
}
.qodef-icon-holder a:before {
	content: "";
    position: absolute;
    height: 0%;
    width: 100%;
	top: 0;
    left: 0;
    border-radius: 50%;
	transition: .3s cubic-bezier(.785,.135,.15,.86);
}
.qodef-icon-holder a:hover:before {
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
}
.qodef-icon-holder .qodef-icon{
	z-index : 10;
	position: relative;
    color: #fff;
}
/* 3-PIED DE PAGE ****************************************************/
/* Coordonnées */
#qodef-page-footer .widget_block[data-area="footer_top_area_column_2"]{
	margin: 0;
}
.widget_block[data-area="footer_top_area_column_2"] p {
	font-size : 17px; 
	color : #000; 
	letter-spacing : 0.2px;
	font-weight : 500;
	padding: 0 0 0 30px;
	text-align: left;
}
.widget_block[data-area="footer_top_area_column_2"] p:before {
    content: '';
    width: 25px;
    height: 25px;
    position: absolute;
	left: 0;
}
.widget_block[data-area="footer_top_area_column_2"] p.adresse:before {
	background-image : url('img/adresse.svg'); 
}
.widget_block[data-area="footer_top_area_column_2"] p.telephone:before {
	background-image : url('img/telephone.svg'); 
}
.widget_block[data-area="footer_top_area_column_2"] p.horaire:before {
	background-image : url('img/horaire.svg'); 
}
/* LOGOS LABELS */
.widget_block[data-area="footer_top_area_column_3"] .wp-block-gallery{
	gap: 50px;
}
.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2), 
.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2)~figure.wp-block-image:not(#individual-image){
	width : auto;
	max-width: max-content;
}
/* MENU FOOTER */
#qodef-page-footer .widget.widget_nav_menu div>ul>li{
	display: inline-block;
    list-style-type: none;
    line-height: 1.625em;
	margin: 10px 25px ;
}
#qodef-page-footer .widget.widget_nav_menu div>ul>li:first-child{
	margin-left : 0px;
}
#qodef-page-footer .widget.widget_nav_menu div>ul>li:last-child{
	margin-right : 0px;
}
#qodef-page-footer .widget.widget_nav_menu div>ul>li:before{
	content : none; 
}
#qodef-page-footer .widget.widget_nav_menu div>ul>li a{
	color : #fff;
	font-size : 15px;
	letter-spacing : 0.2px; 
	font-weight : 700;
}
#qodef-page-footer .widget.widget_nav_menu div>ul>li a:hover,
#qodef-page-footer .widget.widget_nav_menu div>ul>li a:active,
#qodef-page-footer .widget.widget_nav_menu div>ul>li a:focus{
	color : #fff;
	text-decoration : underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 0.1px;
}
/* COPYRIGHT */
#qodef-page-footer .widget .copyright{
	text-align: right;
	line-height: 1.625em;
    margin: 10px 25px;
}
#qodef-page-footer .widget .copyright a{
	color : #fff;
	font-size : 15px;
	letter-spacing : 0.2px; 
	font-weight : 700;
}
#qodef-page-footer .widget .copyright a:hover,
#qodef-page-footer .widget .copyright a:active,
#qodef-page-footer .widget .copyright a:focus{
	color : #fff;
	text-decoration : underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 0.1px;
}
/* BACK TO TOP  */
#qodef-back-to-top{
    bottom: 20px;
    background-color: #e20613;
}
#qodef-back-to-top:after, 
#qodef-back-to-top:before{
    background-color: rgba(0, 0, 0, 0.2);
}
/* 4-MODULE ****************************************************/
/* BOUTON ROUGE */
.elementor.elementor .e-con>.elementor-widget[data-widget_type="button.default"]{
	max-width : max-content;
}
div [data-widget_type="button.default"] .elementor-button{
	background-color: #e20613;
    border-radius: 0px;
	font-family: prometo, sans-serif;
    padding: 20px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.8px;
	transition: opacity .3s ease;
}
div [data-widget_type="button.default"] .elementor-button:after, 
div [data-widget_type="button.default"] .elementor-button:before {
    background-color: rgba(0, 0, 0, 0.2);
	content: "";
    position: absolute;
    height: 0;
    width: 50%;
    z-index: 1;
    transition: .3s cubic-bezier(.785,.135,.15,.86);
}
div [data-widget_type="button.default"] .elementor-button:before {
    bottom: 0;
    left: 0;
    top: auto
}

div [data-widget_type="button.default"] .elementor-button:after {
    top: 0;
    right: 0;
    bottom: auto
}
div [data-widget_type="button.default"] .elementor-button:hover:before,
div [data-widget_type="button.default"] .elementor-button:active:before,
div [data-widget_type="button.default"] .elementor-button:focus:before {
    height: 100%;
    top: 0;
    bottom: auto;
}
div [data-widget_type="button.default"] .elementor-button:hover:after,
div [data-widget_type="button.default"] .elementor-button:active:after,
div [data-widget_type="button.default"] .elementor-button:focus:after {
    height: 100%;
    bottom: 0;
    top: auto;
}

div [data-widget_type="button.default"] .elementor-button span{
	z-index : 10;
}
/* IMAGE SEULE COIN TRIANGLE */
.elementor-widget-image:before{
	content: "";
	display: inline-block;
    height: 0;
    width: 0;
    border-top: 130px solid #e20613;
    border-right: 130px solid transparent;
	position: absolute;
}
/* BOITE D'ICONE (GAUCHE) */
.elementor-widget-icon-box .elementor-icon{
	font-size: 18px;
	fill : #4d4d4d;
	margin: 4px 0 0 0;
}
.elementor-widget-icon-box .elementor-icon-box-title{
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 10px;
    text-transform: uppercase;
    color: #4d4d4d;
    text-align: left;
}
/* BOITE D'ICONE (GAUCHE + ENCADREMENT) */
.elementor.elementor .elementor-widget-icon-box.elementor-shape-circle .elementor-icon {
    background-color : #e20613;
}
.elementor-widget-icon-box .elementor-icon-box-description{
	text-align: left;
}
/* 5-ACCUEIL ****************************************************/
.home  #qodef-page-inner{
	padding : 0px 0px 45px;
}
.home h1{
	color : #e20613;
	font-size : 40px; 
	font-weight : 700;
	letter-spacing : 0.2px;
	text-transform : uppercase;
}
.home h2{
	color : #000;
	font-size : 28px; 
	font-weight : 300;
	letter-spacing : 0px;
	text-transform : uppercase;
}
.engagement .elementor-heading-title{
	font-size: 30px; 
	font-weight : 700; 
	color : #4d4d4d;
}
/* SMART */
.n2-ss-static-slide .n2-ss-layer-content{
	background-size: contain !important;
}
/* REASSURANCE  */
.reassurance h2{
	color : #e20613;
	font-weight : 700;
	letter-spacing : 0.2px;
	text-transform : uppercase;
	font-size: 35px;
}
.reassurance h3{
	color : #e20613;
}
.reassurance .elementor-widget-image:before{
	content : none;
}
/* 6-TITRE DE PAGE ****************************************************/
.qodef-page-title{
	height: 180px;
}
.qodef-page-title .qodef-m-content{
	margin: 0 180px;
    width: calc(100% - 360px);
}
.qodef-page-title .qodef-m-inner{
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.5), transparent);
}
.qodef-page-title.qodef--has-image{
	height: 300px;
}
.qodef-page-title:before{
	content: "";
	display: inline-block;
    height: 0;
    width: 0;
    border-top: 180px solid #e20613;
    border-right: 180px solid transparent;
	position: absolute;
	top: 0;
	left: 0;
	z-index : 9;
}
.qodef-page-title:after{
	content: "";
	display: inline-block;
    height: 0;
    width: 0;
    border-bottom: 180px solid #999999;
    border-left: 180px solid transparent;
	position: absolute;
	right: 0;
	bottom: 0;
}
.qodef-page-title h1{
	font-size : 40px;
	letter-spacing : 0.8px; 
	text-transform : uppercase;
}
/* 7-PORTFOLIO ****************************************************/

/* GALERIE ACCUEIL PORTFOLIO */

.justified-gallery h2.qodef-e-title.entry-title {
    font-size: 20px;
    color: #000;
    text-transform: none;
    font-weight: 500;
	font-family: 'Maven Pro';
}
.qodef-portfolio-list.qodef-item-layout--info-on-hover .qodef-e-content  .qodef-e-content-inner .qodef-e-info-category a {
    line-height: 1.08em;
    color: #e20613;
    text-transform: none;
    font-family: 'Maven Pro';
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0;
    padding-bottom: 3px;
    display: inline-block;
}
.qodef-portfolio-list.qodef-item-layout--info-on-hover .qodef-e-inner:after{
	content : none;
}
/* Page de détail */
.portfolio-item{
	max-width : 880px;
	margin : 0 auto;
}
.elementor-image-carousel img {
    max-height: 645px;
    padding: 10px;
}
.portfolio-item h2 {
    font-size: 26px;
    margin: 0 0 15px;
}
.info-portfolio h3{
	font-size : 22px; 
	text-transform : uppercase; 
	margin : 0px 0px 5px;
	font-weight: 700;
}
.info-portfolio p{
    margin: 0 0 25px 0;
}
.info-portfolio .elementor-shortcode{
	color: #000;
    font-size: 20px;
    line-height: 26px;
    text-align: left;
    hyphens: auto;
    margin: 0 0 25px 0;
}
.elementor-swiper-button-prev, 
.elementor-swiper-button-next {
    background-color: #999999;
    padding: 10px;
	margin: 0 15px
}
.elementor-element .swiper .elementor-swiper-button svg, 
.elementor-element .swiper~.elementor-swiper-button svg, 
.elementor-lightbox .swiper .elementor-swiper-button svg, 
.elementor-lightbox .swiper~.elementor-swiper-button svg {
    fill: #fff;
}
.icon-arrows-slim-left:before{
	content: ""; 
	background : url('/wp-content/themes/stal-child/img/arrow-left.svg');
    display: block;
    width: 15px;
    height: 15px;
    background-repeat: no-repeat;
}
.icon-arrows-slim-right:before {
	content: ""; 
	background : url('/wp-content/themes/stal-child/img/arrow-right.svg');
    display: block;
    width: 15px;
    height: 15px;
    background-repeat: no-repeat;
}

/* 8-CONTENU ****************************************************/
#qodef-page-inner {
    padding: 70px 0 70px;
}
/* Formulaire */
.wpcf7-form {
	display : flex; 
	flex-wrap : wrap; 
	gap : 20px;
}
.wpcf7-form .demi {
    margin-bottom: 20px;
    width: calc(50% - 10px);
}
.wpcf7-form .plein{
    width: calc(100%);
    margin-bottom: 20px;
}
.wpcf7-form label {
    color: #000;
    font-weight: 600;
    font-size: 18px;
}
.wpcf7-form input[type=email], 
.wpcf7-form input[type=number], 
.wpcf7-form input[type=password], 
.wpcf7-form input[type=tel], 
.wpcf7-form input[type=text], 
.wpcf7-form input[type=url], 
.wpcf7-form textarea{
    padding: 0 0 8px 0;
    color: #000;
    font-size: 18px;
}
.wpcf7-form textarea{
	margin-bottom : 0px;
	height: 135px;
}
.qodef-theme-button, 
button[type=submit], 
input[type=submit]{
    font-family: prometo, sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.8px;
    padding: 12px 24px;
}
.qodef-theme-button svg, 
button[type=submit] svg, 
input[type=submit] svg{
	display : none !important;
}
.qodef-qi-contact-form-7 button[type=submit]:focus, 
.qodef-qi-contact-form-7 button[type=submit]:hover, 
.qodef-qi-contact-form-7 input[type=submit]:focus, 
.qodef-qi-contact-form-7 input[type=submit]:hover {
    color: #fff;
    background-color: #ee0d08;
}
.qodef-button.qodef-layout--splitted .qodef-m-split{
	background:  rgba(0, 0, 0, 0.2);
}
/* CTA Ligne contenu */
.ligne-cta .e-con-inner{
    border: 2px solid #ee0d08;
    padding-top: 50px !important;
    padding-bottom: 50px !important;
    padding-inline-end: 15% !important;
    padding-inline-start: 15% !important;
	margin-top: 50px !important;
	position : relative;
}
.ligne-cta .e-con-inner:before {
    content: "";
    display: inline-block;
    height: 0;
    width: 0;
    border-top: 130px solid #e20613;
    border-right: 130px solid transparent;
    position: absolute;
	top : 0px; 
	left : 0px;
}

/* ZZ-RESPONSIVE ---------------------------------------- */
@media (max-width: 1400px) {
	.qodef-header-navigation>ul>li a{
		max-width: 240px;
		white-space: normal;
		hyphens: none;
		text-align: center;
		line-height: normal;
	}

}
@media (max-width: 1200px) {
	.qodef-grid.qodef-layout--columns.qodef-col-num--2>.qodef-grid-inner>.qodef-grid-item:first-child {
		width: 75%;
	}
	.qodef-grid.qodef-layout--columns.qodef-col-num--2>.qodef-grid-inner>.qodef-grid-item:last-child {
		width: 25%;
	}
}
@media (max-width: 1020px) {
		.hide-destock{
		display : block; 
	}
	#qodef-page-mobile-header .qodef-mobile-header-logo-link img{
		padding: 10px;
	}
}
@media (max-width: 960px) {
	.qodef-page-title:after{
		border-bottom: 75px solid #999999;
		border-left: 75px solid transparent;
	}
	.qodef-page-title:before{
		border-top: 75px solid #e20613;
		border-right: 75px solid transparent;
	}
	.qodef-page-title .qodef-m-content{
		margin: 0 50px;
		width: calc(100% - 100px);
	}

}
@media (max-width: 768px) {
	div#n2-ss-2 .n-uc-Zr26toI2R4q1-inner{
		background-position: -230px center !important;
	}
	.qodef-grid.qodef-layout--columns.qodef-col-num--2>.qodef-grid-inner>.qodef-grid-item {
		width: 100% !important;
	}
	.qodef-page-title h1{
		font-size: 28px;
	}
	h2{
		font-size: 25px;
	}
	h3{
		font-size: 22px;
	}
	#qodef-page-footer .widget.widget_nav_menu div>ul>li{
		display: block;
		list-style-type: none;
		line-height: 1rem;
		margin: 0;
		text-align: center;	
	}
	#qodef-page-footer .widget .copyright{
		text-align : center;
	}
	#qodef-page-footer .widget.widget_media_image {
		margin-bottom: 25px !important;
	}
    .qodef-content-grid {
        width:calc(100% - 50px);
    }

	.widget_block[data-area="footer_top_area_column_3"] .wp-block-gallery {
		gap: 30px;
		justify-content: center;
		margin: 20px 0 0;
	}
	#qodef-page-footer-top-area #qodef-page-footer-top-area-inner{
		padding: 65px 30px  65px;
	}
	.elementor-widget-image:before{
		border-top: 75px solid #e20613;
		border-right: 75px solid transparent;
	}
	.elementor-widget-icon-box.elementor-mobile-position-top .elementor-icon-box-wrapper{
		flex-direction: row !important;
	}
	.reassurance h2{
		font-size: 30px;
	}
	.reassurance h3 {
		font-size: 22px;
	}
	.qodef-portfolio-list.qodef-item-layout--info-on-hover .qodef-e-content{
		clip-path: inset(0 0 0 0);
		-webkit-clip-path: inset(0 0 0 0);
		transition: clip-path .3s cubic-bezier(.63, .24, .26, .91) .1s;
	}
	.qodef-item-layout--info-on-hover.qodef-hover-animation--fade-in .qodef-e-info-category, 
	.qodef-item-layout--info-on-hover.qodef-hover-animation--fade-in .qodef-e-title {
		opacity: 1;
		transform: translateY(0);
	}
	.portfolio-item h2{
		font-size: 18px;
	}
	.qodef-portfolio-list.qodef-item-layout--info-on-hover .qodef-e-content .qodef-e-content-inner .qodef-e-info-category a{
		font-size: 14px;
	}
	.qodef-portfolio-list.qodef-item-layout--info-on-hover .qodef-e-content {
		left: 10px;
		bottom: 10px;
		padding: 10px;
	}
	.info-portfolio h3 {
		font-size: 18px;
	}
	.elementor-element .swiper .elementor-swiper-button-next, .elementor-element .swiper~.elementor-swiper-button-next, .elementor-lightbox .swiper .elementor-swiper-button-next, .elementor-lightbox .swiper~.elementor-swiper-button-next {
		right: 0 !important;
	}
	.elementor-element .swiper .elementor-swiper-button-prev, .elementor-element .swiper~.elementor-swiper-button-prev, .elementor-lightbox .swiper .elementor-swiper-button-prev, .elementor-lightbox .swiper~.elementor-swiper-button-prev {
		left: 0px !important;
	}
	.ligne-cta .e-con-inner:before{
		border-top: 75px solid #e20613;
		border-right: 75px solid transparent;
	}
	.ligne-cta .e-con-inner{
		padding-inline-end: 10% !important;
		padding-inline-start: 10% !important;	
	}
	.portfolio-item h4{
		    font-size: 18px;
	}
	.wpcf7-form .demi{
		width: 100%;
	}
}