/*-----------------*/
/* LOADER */
/*-----------------*/
#loader-wrapper{background: var(--gradient-color)}
#loader-logo {
    animation: clignotement 1.5s ease-in-out infinite;
}

/* Définition des étapes de l'animation */
@keyframes clignotement {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.3; /* Le logo devient semi-transparent */
        transform: scale(0.95); /* Effet de légère réduction pour dynamiser */
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/*-----------------*/
/* ELEMENTS */
/*-----------------*/
.has-drop-cap:first-letter{
	font-family: var(--font-title);
	font-size: 130px!important;
}
.title.white small{color: var(--secondary-color);}
.title.white:after{background-color: var(--secondary-color);}
/*-----------------*/
/* HEADER */
/*-----------------*/
#header:after{background: var(--gradient-color);}
#info-toogle {
    display: flex;
    justify-self: flex-end
}

#info-toogle svg circle {
    stroke-dasharray: 160;
    stroke-dashoffset: 0;
    transform-origin: center;
    transform: rotate(0deg);
    transition: transform 1.2s cubic-bezier(.23,1,.32,1) , stroke-dashoffset 1.2s cubic-bezier(.23,1,.32,1)
}

body:not(.is-toggle-open) #info-toogle:hover svg circle {
    transform: rotate(2turn);
    stroke-dashoffset: 160
}

#info-toogle svg path {
    stroke-dashoffset: 0
}

#info-toogle svg path:first-of-type {
    stroke-dasharray: 28;
    transition: stroke-dashoffset .8s cubic-bezier(.23,1,.32,1) .4s
}

#info-toogle svg path:nth-of-type(2) {
    stroke-dasharray: 20;
    transition: stroke-dashoffset .8s cubic-bezier(.23,1,.32,1) .5s
}

#info-toogle .header__toggler-bar {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 15px;
    height: 2px;
    background-color: var(--white);
    transition: transform .8s cubic-bezier(.23,1,.32,1)
}

#info-toogle .header__toggler-bar:nth-child(2) {
    transform: translate(-50%,-50%) rotate(45deg) scaleX(0);
    transition-delay: 0s
}

#info-toogle .header__toggler-bar:nth-child(3) {
    transform: translate(-50%,-50%) rotate(-45deg) scaleX(0);
    transition-delay: .1s
}
body.is-toggle-open #info-toogle svg circle{stroke: var(--white);}
body.is-toggle-open #info-toogle .header__toggler-bar:nth-child(2) {
    transform: translate(-50%,-50%) rotate(45deg) scaleX(1);
    transition-delay: .4s
}

body.is-toggle-open #info-toogle .header__toggler-bar:nth-child(3) {
    transform: translate(-50%,-50%) rotate(-45deg) scaleX(1);
    transition-delay: .5s;
}

body.is-toggle-open #info-toogle svg path:first-of-type {
    stroke-dashoffset: 28;
    transition-delay: .1s
}

body.is-toggle-open #info-toogle svg path:nth-of-type(2) {
    stroke-dashoffset: 20;
    transition-delay: 0s
}


#header-coordonnees {
    position: fixed;
    top: 0;
    right: -310px;
    width: 310px;
    height: 100%;
    min-height: 100%;
    padding: 70px 40px 65px;
    background: var(--title-color);
    background-position: center;
    background-size: cover;
    overflow: hidden;
    visibility: hidden;
    overflow: scroll;
    z-index: 9998;
    transition: all .6s cubic-bezier(.77,0,.175,1);
    text-align: left;
    box-shadow: 0 0 30px #00000057;
}
#header-coordonnees .flex > div{margin: 15px 0;}



body.is-toggle-open #header-coordonnees {
    right: 0;
    visibility: visible;
}
#header-coordonnees #logoCoordonnees {
    order: -1;
    margin-bottom: 30px;
}

/*-----------------*/
/* NAVPRIMARY */
/*-----------------*/
.navigmenu .naviglink.lvl-0 span:after,
.navigmenu .naviglink span:before {
    content: '';
    display: block;
    position: absolute;
    left: -.1em;
    bottom: -.4em;
    width: 100%;
    height: 1px;
    border-top: 1px solid currentColor;
    transform: scale(0,1);
    transform-origin: 0 50%;
    transition: transform .4s cubic-bezier(.48,.57,.33,.89) .1s;
}

.navigmenu .naviglink span:before {
    padding-bottom: 4px;
    transition: transform .4s cubic-bezier(.48,.57,.33,.89);
}


#navprimary .navigmenu .active .naviglink.lvl-0 {color: var(--secondary-color);}

#navprimary .navigmenu .active .naviglink.lvl-0 span:after,
#navprimary .navigmenu .naviglink.lvl-0:hover span:after,
#navprimary .navigmenu .active .naviglink.lvl-0 span:before,
#navprimary .navigmenu .naviglink.lvl-0:hover span:before {transform: scale(1,1)}


/*-----------------*/
/* HEADERHOME */
/*-----------------*/
#headerHome-content{
	padding: 50px 100px 50px 50px;
	width: 500px;
}
#headerHome-accroche{
	color: var(--title-color);
	text-transform: uppercase;
}

#headerHome-img{
	height: 400px;
	width: 100%;
	min-height: 400px;
}
#headerHome-img .bloc-img{height: 100%;}
#headerHome-img .bloc-img-1{width: 70%;}
#headerHome-img .bloc-img > div {border: solid 1px var(--white);}
#headerHome-img .bloc-img-2{
	width: 30%;
    display: flex;
    flex-direction: column;
}
#headerHome-img .bloc-img-2 > div{height: 50%;}

/*-----------------*/
/* GALLERY HEADER HOME */
/*-----------------*/
#galleryHeaderHome{margin-top: 50px;}


/*-----------------*/
/* PRODUITS  */
/*-----------------*/
#gallerysinglewoo, #tabssinglewoo{margin-bottom: 50px;}


.products .product .product-content{
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
	color: var(--white);
	top: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	text-transform: uppercase;
	font-family: var(--font-bold);
	font-size: 16px;
	padding: 20px;
	z-index: 2;
}
.products .product .product-content .titleproduct{
	opacity: 0;
	transition: all 0.4s cubic-bezier(0.42, 0, 0.41, 1.29);
	transform: translateY(50px) ;
	position: relative;
}
.products {grid-auto-rows: 400px;}
.products .product:hover .product-content .titleproduct{
   opacity: 1;
   transform: translateY(0);
}
.products .product:hover .product-img{opacity: 0.2;}
/*-----------------*/
/* CONTENT */
/*-----------------*/

/*-----------------*/
/* PRESTATIONS */
/*-----------------*/

/*-----------------*/
/* ACTU */
/*-----------------*/
#choixActuSlider{
	align-items: center;
	height: 350px;
}
#choixActu {
	z-index: 10;
	top: 50%;
	transform: translateY(-50%);
	position: absolute;
	width: 50%;
	right: 20px;
}
#choixActu .linkActu{
	position: relative;
	cursor: pointer;
	padding: 10px;
	min-width: 33.33333%;
	max-width: 33.33333%;
}

.subtitleActu{
	overflow: hidden;
	height: 300px;
	transition: 250ms all ease-in-out;
}
.subtitleActu_img{
	height: 100%;
	border-radius: 10px;
	overflow: hidden;
}
.subtitleActu_img img{transition: transform 1s cubic-bezier(.215,.61,.355,1);}
.subtitleActu_img:before{
	 z-index: 1;
	 background: linear-gradient(to top, rgb(0 0 0 / 70%) 0%, rgba(0, 0, 0, 0) 100%);
}
.linkActu:hover .subtitleActu_img img{transform: scale(1.1);}

#choixActu .subtitleActu .subtitleActu_content{
	z-index: 1;
	transition: 500ms ease all;
	color: var(--white);
	font-size: 16px;
	line-height: 1.3;
	display: inline-block;
	font-family: var(--font-bold);
	display: block;
	font-weight: bold;
	z-index: 1;
	--dist: 15px;
	bottom: var(--dist);
	left: var(--dist);
	right: var(--dist);
}


#choixActu .linkActu.active .subtitleActu{
	height: 350px;
	
}
#choixActu .linkActu.active .subtitleActu_img{border: solid 1px var(--white);}

#news .wrapper_slider{
	padding: 0;
	min-width: auto!important;
	max-width: none;
}

#news .content_slider {
    position: absolute;
    color: var(--white);
    z-index: 2;
    max-width: 700px;
    width: 35%;
    padding: 30px;
    transition: 500ms ease all;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

#news .thumbnail_slider {
    position: relative;
    height: 750px;
    z-index: 1;
    transition: 250ms all ease-in-out;
    display: block;
    width: 100%;
}
#news .thumbnail_slider:before{
    z-index: 0;
    background: linear-gradient(to right, rgb(0 0 0 / 70%) 0%, rgba(0, 0, 0, 0) 100%);
}

#news .title_link_slider{
	color: var(--white);
	text-shadow: 0px 0px 4px #000000;
}
#news .title_link_slider:hover{color: var(--secondary-color)}

/*----------------- CKSLIDER CONTROLS -----------------*/
#news .ckctrldiv .counter span{
    --size: 8px;
    height: var(--size);
    width: var(--size);
    margin: 0 5px;
    background: #ddd;
    border-radius: 10px;
}

#news .ckctrldiv .counter span:hover,
#news .ckctrldiv .counter span.active{background: var(--primary-color);}

#news .ckctrldiv .counter span.active{width: 30px;}

#news .ckslidercontrols :is(.next, .prev){
	background: none!important;
	--size: 80px;
	height: auto;
	bottom: -100px;
	bottom: 0;
	transition: .5s;
	border: none!important;
}
#news .ckslidercontrols :is(.next, .prev) svg{
	display: block;
    transition: .5s;
}

#news .ckslidercontrols .prev svg .ckslider-svg-wrap{transform: translateY(353px);}
#news .ckslidercontrols .next svg .ckslider-svg-wrap{
	transform: translateY(353px) rotateY(180deg);
    transform-origin: 80px 0px 0px;
}


#news .ckslidercontrols :is(.next, .prev) svg .ckslider-svg-circle-wrap{
	transition: .5s;
    transform-origin: -20px 40px;
    opacity: 1;
}
#news .ckslidercontrols :is(.next, .prev) svg circle {
    transition: .5s;
    /* stroke-width: 2px; */
    /* stroke: var(--white); */
    fill: none;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: 1;
    transform-origin: 0px 0px 0px;
    fill: var(--primary-color);
}
#news .ckslidercontrols :is(.next, .prev) .ckslider-svg-arrow {
    transition: .5s;
    fill: var(--white);
    transform: rotateY(180deg) translate(-57px, 32.2px) scale(2.95);
}
#news .ckslidercontrols :is(.next, .prev) .ckslider-svg-line {
    transition: .5s;
    stroke: var(--white);
    stroke-width: 4px;
    transform: translate(50px, 42px);
}

#news .ckslidercontrols .prev:hover svg{transform: translate(-16px);}
#news .ckslidercontrols .next:hover svg{transform: translate(16px);}

#news .ckslidercontrols :is(.next, .prev):hover .ckslider-svg-circle-wrap {transform: scale(1.1);}
#news .ckslidercontrols :is(.next, .prev):hover circle {
    stroke-dasharray: 4px;
    stroke-dashoffset: 4px;
    opacity: 1;
}
#news .ckslidercontrols :is(.next, .prev):hover .ckslider-svg-arrow {transform: rotateY(180deg) translate(-40px, 33.1px) scale(2.75);}
#news .ckslidercontrols :is(.next, .prev):hover .ckslider-svg-line {transform: translate(35px, 42px) scaleX(0.4);}

#news .ckslidercontrols :is(.next, .prev):hover svg circle,
#news .ckslidercontrols :is(.next, .prev):hover .ckslider-svg-line{stroke: var(--black);}
#news .ckslidercontrols :is(.next, .prev):hover .ckslider-svg-arrow{fill: var(--black);}


/*-----------------*/
/* SECTIONS */
/*-----------------*/
.sectionsbloc:nth-child(4n+1 of .sectionsbloc) .blocthumb img {height: 100%;}
/*-----------------*/
/* REASSURANCES */
/*-----------------*/


.nohome #reassurances{background-image: url(../images/bg-reassurances.jpg);}
.nohome #reassurances:before{background: var(--overlay-color);}

.home #reassurances:before{background: var(--title-color);}
#reassurances .picto-bloc .picto-img .icon-box{
    display: flex;
    align-items: center;
}
.picto-container{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	position: relative;
	margin: 140px 0 70px;
	display: grid;
}

.picto-container .picto-content{
	margin: 0 ;
	text-align: left;
}
.picto-container li p{
	margin:  0;
	font-size: 15px;
	color: var(--white);
}
.picto-container li p strong{
    display: block;
    font-family: var(--font-title);
    font-size: 22px;
    line-height: 1.3;
    margin-bottom: 6px;
	letter-spacing: 1px;
}
.picto-container  .picto-img{
	position:absolute;
	background: var(--primary-color);
	top: 0;
	left: 0;
	padding: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}


/*-----------------*/
/* PARTENAIRES */
/*-----------------*/

/*-----------------*/
/* NEWSLETTER */
/*-----------------*/

/*-----------------*/
/* SHARE */
/*-----------------*/

/*-----------------*/
/* AGENCES */
/*-----------------*/

/*-----------------*/
/* CONTACTFORM */
/*-----------------*/

/*-----------------*/
/* FOOTER */
/*-----------------*/
#footer:before{
    background: url(../images/home-bg4.jpg);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#footer:after{
    background: var(--gradient-color);
    z-index: -2;
    top: auto;
    bottom: 0;
    height: 50%;
}
.wrapperContact {
    padding: 0;
    background: var(--tertiary-color);
    box-shadow: 0px 0px 30px #1a1a2612;
    width: auto;
}
#wrapperForm {padding: 50px;}
#wrapperForm .title{max-width: 500px;margin: 0 auto 30px;}

.imgContact{
    background: url(../images/img-footer.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#footerLinks{padding-bottom: 30px;}
body.template-contact-php #footer:before{content: none}
body.template-contact-php #footer:after{height: 100%;}