/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */
/************************STYLE DEFAULT WEBSITE*********************/
*{
	outline: none;
} 
a:focus {
	outline: none;
}
ul.list-default{
	margin: 0;
}
.elementor-widget-text-editor p:last-child{ 
	margin-bottom:0px;
}
div.wrapper-icon div.elementor-icon-wrapper {
	display: flex;
}
section.splide button.splide__arrow--prev {
    display: none;
    opacity: 1;
    left: -2.8rem;
    border-radius: 0;
    background-color: #FFF;
    font-size: 22px;
}
section.splide button.splide__arrow--next {
    right: -2.8rem;
    opacity: 1;
    background-color: #FFF;
    border-radius: 0;
    display: none;
    font-size: 22px;
}
section.splide ul.splide__pagination {
    position: relative;
    padding: 0;
    margin-top: 1rem;
}
.splide__pagination__page.is-active {
    background: #000000 !important;
    transform: scale(1) !important;
}
section.splide ul.splide__pagination button.splide__pagination__page {
    background-color: #979797 !important;
    display: flex;
    height: 10px;
    width: 10px;
    transform: scale(1) !important;
}
/*****************************TEST SLIDER*************************************/
section.sld-food {
	height: 840px;
	overflow: hidden;
}

section.sld-food .splide__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.centered-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	text-align: center;
}

.centered-text h1 {
	font-size: 3rem;
}

/*****************************CONTACT FORM*****************************/
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.contact-form .card-form {
    display: flex;
    gap: 20px;
}
.contact-form .form-col {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 50%;
}
.contact-form label {
    font-size: 14px;
    font-weight: 700;
	color: #FFF;
}
.contact-form .box-form {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.contact-form input.card-input, .contact-form select.card-input, .contact-form textarea.card-message {
    padding: 12px 16px;
    background-color: #FFF;
    border: 1px solid #C5CFEA;
	border-radius: 8px;
	font-size: 14px;
	color: #6B7A99;
}
.contact-form input.card-input::placeholder, .contact-form select.card-input::placeholder, .contact-form textarea.card-message::placeholder{
	font-size: 14px;
	color: #6B7A99;
}
.contact-form input.card-input:focus-visible, .contact-form select.card-input:focus-visible, .contact-form textarea.card-message:focus-visible{
	outline: none !important;
	outline-offset: 0;
	box-shadow: none;
}
.contact-form textarea.card-message {
	height: 128px;
	resize: none;
}
.btn-form button.btn-send {
    width: 100%;
    background-color: #F2BA1D;
    border-radius: 100px;
	font-weight: 500;
    color: #FFF;
	padding: 14px 16px;
    display: flex;
	border: none;
    flex-direction: row;
    gap: 10px;
    align-items: center;
	justify-content: center;
	white-space: normal;
}
.btn-form button.btn-send:hover {
	background-color: #D4A843;
}
.contact-form .toggle-group .wpcf7-radio {
    display: flex;
    height: 40px;
    padding: 4px;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    background: #F0F4FF;
    border-radius: 16px;
    border: none;
}

.contact-form .toggle-group .wpcf7-list-item {
    margin: 0;
    flex: 1;
    text-align: center;
    position: relative;
}

.contact-form .toggle-group input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 100% !important;
    height: 100% !important;
    top: 0;
    left: 0;
    cursor: pointer;
    z-index: 2;
    margin: 0 !important;
}

.contact-form .toggle-group .wpcf7-list-item-label {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 16px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: #6B7A99;
    cursor: pointer;
    transition: all 0.3s;
}

.contact-form .toggle-group input[type="radio"]:checked + span {
    background: #FAC833;
    color: #fff;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
}
.menu-mob .elementor-nav-menu a.elementor-item.elementor-item-active, .menu-mob .elementor-nav-menu a.elementor-sub-item.elementor-item-active  {
    font-weight: 700 !important;
}
.elementor-element.card-hov { 
    transition: border 0.1s ease-in-out; 
}
.elementor-element.card-hov:hover {
    border: 2px solid #FAC833;
}
.elementor-element.card-hov:hover .elementor-view-framed .elementor-icon{
	background-color: #fac833;
}
.elementor-element.card-hov:hover .elementor-view-framed .elementor-icon svg{
	color: #fff;
	border-color: #fff;
}
.box-sliders .e-n-carousel {
    padding-left: 5px;
}
.card-tab .e-n-tabs-heading .e-n-tab-title {
    justify-content: space-between;
}
.card-tab .e-n-tabs-heading > .e-n-tab-title {
    transition: border-radius 0.2s ease-in-out;
}
.card-tab .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"], .card-tab .e-n-tabs-heading > .e-n-tab-title:hover {
    border-radius: 66px;
}
.card-tab .e-n-tabs-heading svg {
    fill: none !important;
}
.card-tab .e-n-tabs-heading > .e-n-tab-title .e-n-tab-icon {
    background: #00357A;
    border-radius: 100%;
    padding: 8px;
}
.card-tab .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"] .e-n-tab-icon, .card-tab .e-n-tabs-heading > .e-n-tab-title:hover .e-n-tab-icon  {
    background: #FAC833;
    border-radius: 100%;
    padding: 8px;
}
span.number-st {
    padding-right: 20px;
}
.content-blog h2, .content-blog h3  {
    font-size: 26px;
    line-height: 34px;
    color: #00295F;
    font-weight: 700;
}
.breadcrum-blog nav.rank-math-breadcrumb p, .breadcrum-blog nav.rank-math-breadcrumb p a {
    font-size: 14px;
    margin: 0;
    color: #00295F;
    line-height: 16px;
    letter-spacing: 0.5px;
}
.content-blog .card-blog {
    padding: 24px;
    border-radius: 0 16px 16px 0;
    border-left: 4px solid #D4A843;
    background: #F8FAFC;
}
/**PAGE SECTEURS***/

.hero-secteurs {
    margin-left: 35px !important;
    margin-right: 35px !important;
    width: calc(100% - 70px) !important;
    border-radius: 20px !important;
    overflow: hidden;
}

.badge-secteurs {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 53, 122, 0.29);
    border: 1px solid #00357A;
    border-radius: 100px;
    padding: 6px 14px;
    font-size: 13px;
    color: #00357A;
    width: fit-content;
}

/* Flip Card Base */
.flip-card {
    perspective: 1000px;
    position: relative;
    height: 450px;
    cursor: pointer;
}

.flip-card-front,
.flip-card-back {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    backface-visibility: hidden;
    border-radius: 20px;
    padding: 36px !important;
    transition: transform 0.6s;
    overflow: hidden;
}

.flip-card-front {
    background-size: cover !important;
    background-position: center !important;
    z-index: 2;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.flip-card-front::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 53, 122, 0.85);
    border-radius: 20px;
    z-index: 0;
}

.flip-card-front > * {
    position: relative;
    z-index: 1;
}

.flip-card-back {
    transform: rotateY(180deg);
}

/* Flip Animation */
.flip-card.flipped .flip-card-front {
    transform: rotateY(-180deg);
}

.flip-card.flipped .flip-card-back {
    transform: rotateY(0deg);
}

/* CARD 1 */
.flip-card-back {
    transform: rotateY(180deg);
    background: #00357A;
}

/* Card 2  */
.flip-card-gold .flip-card-front::before { background: rgba(194, 155, 40, 0.66); }
.flip-card-gold .flip-card-back { background: #C29B28; } 

/* Card 3 */
.flip-card-slate .flip-card-front::before { background: rgba(0, 29, 67, 0.66); }
 .flip-card-slate .flip-card-back { background: #001D43; } 

.flip-card {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.flip-card-front,
.flip-card-back {
    -webkit-font-smoothing: antialiased;
    -webkit-transform-style: preserve-3d;
    will-change: transform;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .flip-card-container > .e-con-inner {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 20px !important;
    }
    
    .flip-card-container .flip-card {
        width: calc(50% - 10px) !important;
        max-width: calc(50% - 10px) !important;
        flex-basis: calc(50% - 10px) !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
    }
     .flip-card {
        height: auto !important;
        min-height: 400px !important;
    }
    
    .flip-card-front,
    .flip-card-back {
        position: relative !important;
        height: auto !important;
        min-height: 400px !important;
        padding: 24px !important;
    }
    
    .flip-card-back {
        position: absolute !important;
    }
}



/*BANNER*/

.banner-couvreurs {
    overflow: hidden;
    margin-left: 40px !important;
    margin-right: 40px !important;
    width: calc(100% - 80px) !important;
    position: relative;
    min-height: 400px;
}
@media (max-width: 767px) {
    .banner-couvreurs {
        margin-left: 10px !important;
        margin-right: 10px !important;
        width: calc(100% - 20px) !important;
        min-height: auto !important;
        flex-direction: column-reverse !important;
    }
    
    .banner-couvreurs > .elementor-element {
        width: 100% !important;
    }
       .banner-img {
        min-height: 300px !important;
    }
}
@media (min-width: 768px) and (max-width: 1024px) {
    .banner-couvreurs {
        margin-left: 10px !important;
        margin-right: 10px !important;
        width: calc(100% - 20px) !important;
    }
    
    .banner-img {
        min-height: 250px !important;
    }
}
.giant-number {
    font-size: 150px;
    font-weight: 900;
    line-height: 0.8;
    background: url('/wp-content/uploads/number.webp') center/cover no-repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    float: right;
    margin-top: -40px;
}

.plus-sign h2 {
    color: #FAC833;
    font-size: 120px;
    font-weight: 900;
    margin-left: -40px;
    margin-top: 90px;
}

@media (max-width: 767px) {
    .plus-sign h2 {
        font-size: 60px;
        margin-left: -50px;
        margin-top: 80px;
    }
}
@media (min-width: 768px) and (max-width: 1024px) {
    .plus-sign h2 {
        font-size: 80px;
        margin-left: 130px;
        margin-top: -40px;
    }
}
/*FORM */

.form-soumission-secteurs input[type="text"],
.form-soumission-secteurs input[type="email"],
.form-soumission-secteurs input[type="tel"],
.form-soumission-secteurs select,
.form-soumission-secteurs textarea {
    background: #F0F4FF;
    border: 1px solid #C5CFEA;
}
.form-soumission-secteurs select {
    background: #F0F4FF !important;
    border: 1px solid #C5CFEA !important;
}
.form-soumission-secteurs input:focus,
.form-soumission-secteurs select:focus {
    border-color: #00357A;
    outline: none;
}

.form-soumission-secteurs label {
    font-weight: 700;
    font-size: 14px;
    color: #0F172A;
}

.form-soumission-secteurs .toggle-group .wpcf7-radio {
    display: flex;
    padding: 4px;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    background: #F0F4FF;
    border-radius: 16px;
    border: none;
}

.form-soumission-secteurs .toggle-group .wpcf7-list-item {
    margin: 0;
    flex: 1;
    text-align: center;
    position: relative;
}

.form-soumission-secteurs .toggle-group input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 100% !important;
    height: 100% !important;
    top: 0;
    left: 0;
    cursor: pointer;
    z-index: 2;
    margin: 0 !important;
}

.form-soumission-secteurs .toggle-group .wpcf7-list-item-label {
    display: block;
    padding: 10px 16px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: #6B7A99;
    cursor: pointer;
    transition: all 0.3s;
}

.form-soumission-secteurs .toggle-group input[type="radio"]:checked + .wpcf7-list-item-label {
    background: #FAC833;
    color: #fff;
}



/*ZONES PAGES*/

/*PAGE BEAUPORT*/

.card-solution-img {
    position: relative;
    overflow: hidden;
}

.card-solution-img::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(180deg, rgba(0, 17, 40, 0.00) 0%, rgba(0, 41, 95, 0.60) 32.2%, #00357A 80.5%);
    z-index: 0;
    border-radius: 0;
}

.card-solution-img > * {
    position: relative;
    z-index: 1;
}

@media (max-width: 767px) {
    .card-solution-img::after {
        bottom: -1px;
        left: -1px;
        right: -1px;
        height: 80%;
    }
}

.badge-couvreurs1 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 100px;
    padding: 6px 14px;
    font-size: 13px;
    color: #F5C842;
    width: fit-content !important;
}

.badge-couvreurs {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 100px;
    padding: 6px 14px;
    font-size: 13px;
    color: #F5C842;
    width: fit-content !important;
}

.check-inline .elementor-icon-list-items {
    display: flex !important;
    flex-direction: row !important;
    gap: 20px;
}

.check-inline .elementor-icon-list-item {
    display: flex;
    align-items: center;
    gap: 6px;
}
@media (max-width: 767px) {
    .check-inline .elementor-icon-list-items {
        flex-direction: column !important;
        gap: 10px;
    }
}

/*Divider grid*/
.stats-row > .e-con {
    border-right: 1px solid #E2E8F0;
    padding: 20px 40px;
    position: relative;
}

.stats-row > .e-con::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 60px;
    width: 2px;
    background: #E2E8F0;
}

.stats-row > .e-con:last-child::after {
    display: none;
}

.stats-row > .e-con {
    border-right: none;
}

@media (max-width: 767px) {
    .stats-row {
        flex-direction: column !important;
        gap: 20px;
    }
    
    .stats-row > .e-con::after {
        display: none;
    }
    
    .stats-row > .e-con {
        border-bottom: 1px solid #E2E8F0;
        padding: 0 0 20px 0;
    }
    
    .stats-row > .e-con:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
}


/*CARDS SLIDER ZONES*/
/*
@media (max-width: 767px) {
    .cards-slider-zones {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 16px !important;
        padding-bottom: 20px;
    }
    
    .cards-slider-zones > .e-con {
        min-width: 100% !important;
        max-width: 100% !important;
        flex-shrink: 0 !important;
        scroll-snap-align: center;
    }
    
    .cards-slider-zones::-webkit-scrollbar {
        display: none;
    }
    
    .cards-slider-zones {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
}
.slider-dots-zones {
    display: none;
}

@media (max-width: 767px) {
    .slider-dots-zones {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 16px;
    }
    
    .slider-dot-zones {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255,255,255,0.3);
        transition: all 0.3s;
    }
    
    .slider-dot-zones.active {
        background: #FAC833;
        width: 24px;
        border-radius: 4px;
    }
}*/


/************************************SERVICES*******************************/
.elementor-element.banner-acier::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(101deg, #00357A 30.05%, rgba(0, 53, 122, 0.96) 39.47%, rgba(0, 53, 122, 0.53) 64.09%, rgba(0, 53, 122, 0.00) 99.65%); 
}
/******************************************************************/
/* # Media Queries (mobile-first)
---------------------------------------------------------------------------------------------------- */
@media only screen and (min-width: 545px) {}
@media only screen and (min-width: 768px) {}
@media only screen and (min-width: 993px) {}
@media only screen and (min-width: 1025px) {
	.card-info .swiper-pagination {
 	   display: none;
	}
	.box-sld{
		box-shadow: 0 2px 8px 0 rgba(15, 30, 54, 0.04);
	}
}
@media only screen and (min-width: 1200px) {}
@media only screen and (min-width: 1300px) {
	/************************STYLE DEFAULT WEBSITE*********************/
	section.splide button.splide__arrow--prev,
	section.splide button.splide__arrow--next {
        display: block;
    }
}


/* # Media Queries (mobile-second)
---------------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 1159px) {
	div.box-form.toggle-group span.wpcf7-form-control.wpcf7-radio{
		flex-direction: column;
		height: 100%;
	}
	div.box-form.toggle-group span.wpcf7-form-control.wpcf7-radio span.wpcf7-list-item{
		width: 100%;
	}
}
@media only screen and (max-width: 1024px) {
	.elementor-element.card-info-sld {
    	padding: 20px;
    	border-radius: 16px;
    	background: #FFF;
    	box-shadow: 0 4px 8.9px 0 rgba(0, 0, 0, 0.10);
	}
}
@media only screen and (max-width: 992px) {}
@media only screen and (max-width: 767px) {
	span.number-st {
    	padding-right: 10px;
	}
	.content-blog h2, .content-blog h3  {
		font-size: 20px;
		line-height: 28px;
	}
}
@media only screen and (max-width: 544px) {
    .contact-form .card-form {
		flex-direction: column;
	}
	.contact-form .form-col{
		width: 100%;
	}
}