/*
Theme Name: JOYA

Author: Lanouvelle
Author URI: http://lanouvelle.agency/
Description: Thème développé spécialement pour JOYA
Version: 1.0
Tags: Joya
*/

/*@font-face {
    font-family: 'Montserrat Regular';
    src: url('montserrat/montserrat-regular.eot');
    src: url('montserrat/montserrat-regular.eot?#iefix') format('embedded-opentype'),
        url('montserrat/montserrat-regular.woff2') format('woff2'),
        url('montserrat/montserrat-regular.woff') format('woff'),
        url('montserrat/montserrat-regular.ttf') format('truetype'),
        url('montserrat/montserrat-regular.svg#Kronika') format('svg');
    font-weight: normal;
    font-style: normal;
}*/
@font-face {
    font-family: 'Montserrat Light';
    src: url('fonts/montserrat/montserrat-light.eot');
    src: url('fonts/montserrat/montserrat-light.eot?#iefix') format('embedded-opentype'),
        url('fonts/montserrat/montserrat-light.woff2') format('woff2'),
        url('fonts/montserrat/montserrat-light.woff') format('woff'),
        url('fonts/montserrat/montserrat-light.ttf') format('truetype'),
        url('fonts/montserrat/montserrat-light.svg#Kronika') format('svg');
    font-weight: normal;
    font-style: normal;
}
/*@font-face {
    font-family: 'Montserrat Bold';
    src: url('montserrat/montserrat-bold.eot');
    src: url('montserrat/montserrat-bold.eot?#iefix') format('embedded-opentype'),
        url('montserrat/montserrat-bold.woff2') format('woff2'),
        url('montserrat/montserrat-bold.woff') format('woff'),
        url('montserrat/montserrat-bold.ttf') format('truetype'),
        url('montserrat/montserrat-bold.svg#Kronika') format('svg');
    font-weight: bold;
    font-style: normal;
}*/
/*@font-face {
    font-family: 'Montserrat Black';
    src: url('montserrat/montserrat-black.eot');
    src: url('montserrat/montserrat-black.eot?#iefix') format('embedded-opentype'),
        url('montserrat/montserrat-black.woff2') format('woff2'),
        url('montserrat/montserrat-black.woff') format('woff'),
        url('montserrat/montserrat-black.ttf') format('truetype'),
        url('montserrat/montserrat-black.svg#Kronika') format('svg');
    font-weight: normal;
    font-style: normal;
}*/
/*@font-face {
    font-family: 'Fuzzy Bubbles Regular';
    src: url('Fuzzy_Bubbles/FuzzyBubbles-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}*/
/*@font-face {
    font-family: 'Fuzzy Bubbles Bold';
    src: url('Fuzzy_Bubbles/FuzzyBubbles-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}*/

/*@font-face {
    font-family: 'Open Sans';
    src: url('Open_Sans/OpenSans-VariableFont_wdth,wght.ttf') format('ttf supports variations'),
       url('Open_Sans/OpenSans-VariableFont_wdth,wght.ttf') format('ttf-variations');
    font-weight: 300 800;
    font-stretch: 75% 100%;
}*/

/*@font-face {
    font-family: 'Oswald-Regular';
    src: url('Oswald/static/Oswald-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Oswald-Light';
    src: url('Oswald/static/Oswald-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Oswald-Bold';
    src: url('Oswald/static/Oswald-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}*/

@font-face {
    font-family: 'QanelasRegular';
    src: url('fonts/qanelas/QanelasRegular.otf') format('otf'),
        url('fonts/qanelas/QanelasRegular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'QanelasSemiBold';
    src: url('fonts/qanelas/QanelasSemiBold.otf') format('otf'),
        url('fonts/qanelas/QanelasSemiBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'QanelasBold';
    src: url('fonts/qanelas/QanelasBold.otf') format('otf'),
        url('fonts/qanelas/QanelasBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Olivier';
    src: url('fonts/olivier/Letters-Numbers-Olivier.otf') format('otf'),
        url('fonts/olivier/Letters-Numbers-Olivier.woff') format('woff');
}

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

body { background-color: #fff; font-family: "Montserrat Light", arial, sans-serif; font-size: 18px; color: #33435b; }
body, html, header, h1 { 
	padding: 0; 
	margin: 0; 
}
body, html, header.home { 
	width: 100%; 
	height: 100%; 
}
img, svg { vertical-align: top; }
h1, h2, h3 { color: #673278; line-height: 0.8em; font-family: 'QanelasRegular' }
p { color: #673278; }
@media screen and (max-width: 1025px) {
    body { font-size: 16px; }
    h1, h2, h3 { line-height: 0.7em; }
}

/* /////////////////////////////////////////////////// */
/* commun */
/* /////////////////////////////////////////////////// */
#main { color: #673278; }
.joya-home { max-width: 1920px; margin: 0 auto; margin-top:-7px; position: relative}
.joya-content { max-width: 1920px; margin: 70px auto 0; }
.joya-default { margin: 104px auto 0; }
#navbarsJoya{margin-right: 3%}

h1 {  font-size: 5rem; line-height: 5rem; color: #ffffff; text-shadow: 3px 3px 30px black; padding-bottom: 20px; }
h1.page { display: inline-block; color: #673278;  font-size: 5rem; text-shadow: 0px 0px 0px white; }

h2 { font-size: 4rem; color: #673278; }
h2.home { display: inline-block; font-size: 3.5rem; }
h2.home span { font-family: "Montserrat Light", arial, sans-serif; font-size: 2.3rem; }

#joya-default { background-color: #ffffff; }
#joya-default .joya-default  { background-color: #ffffff; }
#joya-default .joya-default .wrapper { margin: 0 auto; padding: 100px 20px 50px;}
#joya-default .joya-default .wrapper h1 { margin: 0 0 50px; text-align: center; color: #673278; font-size: 5rem; text-shadow: 0px 0px 0px white; }

#page404 .page404  { background-color: #ded3f1; padding: 0; margin-bottom: 100px; }
#page404 .page404 .wrapper { text-align: center; margin: 0 auto; padding: 100px 0 50px;}
#page404 .page404 .wrapper h1 { padding-bottom: 50px; }

#btn-gototop { position: fixed; bottom: 10%; right: 5%; border: 0px solid #cccccc; background-color: #f1eef7; width: 42px; border-radius: 50%; background-image: url(images/arrow-scroll-top.png); background-repeat: no-repeat; background-position: center; z-index:20; }
#btn-gototop { height: 0; transition: height 0.5s ease-out }
#btn-gototop.visible { height: 42px ; border: 1px solid #cccccc; }

@media screen and (max-width: 1025px) { 
.joya-content { max-width: 1920px; margin: 56px auto 0; }
.joya-default { margin: 56px auto 0; }
}
@media screen and (min-width: 1025px) and (max-width: 1199px) {
    h1 { font-size: 4rem; line-height: 4rem; }
}
@media screen and (min-width: 768px) and (max-width: 1025px) {
    h1 { font-size: 4rem; line-height: 4rem; }
}
@media screen and (min-width: 320px) and (max-width: 767px) {
    h1 { font-size: 2rem; line-height: 2rem;color: #673278; text-shadow: 0px 0px 0px white; }
    h2.home { font-size: 2.5rem; }
    h2.home span { font-family: "Montserrat Light", arial, sans-serif; font-size: 1.6rem; }
}
/* --------------navbar-------------- */
.navbar { background-color: #673277; /*box-shadow: -1px 5px 19px 0px rgba(87,83,83,0.75);*/ }
.navbar .container-fluid {  background-size: contain; background-image: url(images/joya-logo.png); background-repeat: no-repeat; background-position: top left+3%;}

.navbar-nav { line-height: 72px; transition: line-height 0.5s ease-out; }
.navbar-nav.retract { line-height: 30px; }

.navbar-nav ul.navbar-nav { min-height: 90px; }
.navbar-collapse { justify-content: flex-end; }
.navbar-expand-lg .navbar-nav .nav-link { padding-right: 1.5rem; padding-left: 1.5rem; color: white; font-weight: bold; font-family: 'QanelasSemiBold'; font-size: 1em; }

#menu-main .nav-item.current-menu-item .nav-link { background-image: url(images/navbar-active.png); background-repeat: no-repeat; background-position: center; }
   
.navbar-expand-lg .navbar-nav .dropdown-menu { line-height: 30px; margin-top: 11px; padding-bottom: 20px; border-radius: 0 0 10% 10%; }
.dropdown-item:focus, .dropdown-item:hover { color: #673276; background-color: #f1eef7; }
.dropdown-item:focus, a.dropdown-item { color: #673276; padding: 4px 50px 4px 25px; }
.dropdown-toggle::after { margin-left: 0.5em; vertical-align: 0.1em; }

.navbar-toggler { padding: 0.25rem 0.75rem;  font-size: 1.25rem; line-height: 1; background-color: #673278; color: #ffffff; border: 1px solid #673278; border-radius: 0.25rem; transition: box-shadow .15s ease-in-out; }
.navbar-brand img { margin-top: 10px; }
span.navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    background-image: url(images/toggler-icon.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

@media screen and (max-width: 1025px) { 
  .navbar .container-fluid {  background-size: 53px 39px; }
  .navbar-nav { line-height: 40px; padding-bottom: 1rem; }
  .navbar-expand-lg .navbar-nav .nav-item { text-align: center; }
  /*.navbar-expand-lg .navbar-nav .nav-link { font-size: 1.2rem; }*/
  .navbar-expand-lg .navbar-nav .dropdown-menu { border-radius: 0; }
  .dropdown-item { text-align: center; }
    #csl-header .csl-header .wrapper p{max-width: 90% !important}
}
/* --------------btn-------------- */
.btn { display: inline-block; padding: 0.5em 2em; text-decoration: none; border-radius: 50px; cursor: pointer; outline: none; margin-top: 1em; text-transform: uppercase; font-weight: normal; }
.btn-primary { font-size: 1rem; color: #fff; background: #673278; border-color: #673278; }
.btn-primary:hover { background: #DED4F2; border-color: #DED4F2; transition: background 0.3s ease-in-out border-color 0.3s ease-in-out; }
.btn-secondary { font-size: 1rem; color: #663175; font-weight: bold; background: #ded3f1; border-color: #ded3f1; }
.btn-secondary:hover { background: #DED4F2; border-color: #DED4F2; font-weight: normal; transition: background 0.3s ease-in-out border-color 0.3s ease-in-out; }
.btn-tertiary { font-size: 0.8rem; color: #f9d8d1; font-weight: normal; background: #ce6754; border-color: #ce6754; padding: 0.5em 2em 0.5em 2em; }
.btn-tertiary img { vertical-align: bottom; padding-right: 10px; }
.btn-tertiary:hover { font-weight: normal; transition: background 0.3s ease-in-out border-color 0.3s ease-in-out; color:#f9d8d1}
.btn-guide { writing-mode: vertical-rl; text-orientation: mixed; font-size: 1rem; color: #fff; background: #673278; border-color: #673278; padding: 2em 0.6em; border-radius: 20px 0 0 20px; }
.btn-guide:hover { background: #DED4F2; border-color: #DED4F2; transition: background 0.3s ease-in-out border-color 0.3s ease-in-out; }

/* --------------swiper-------------- */
.swiper { width: 100%; padding-top: 50px; padding-bottom: 50px; }
.swiper-slide { background: #fff; display: flex; justify-content: center; align-items: center; height: auto; }
.swiper-slide { width: 100%; }

.swiper-content { display: flex; flex-direction: row; align-items: center; justify-content: center; }
.swiper-content .content-image { flex:1.4; }
.swiper-content .content-text { flex:1; }
.swiper-content .content-text h2 { font-size: 5rem; color: #673276; line-height: 1.1em }
.swiper-content .content-text h2.with_img{position: relative; padding:20px 90px}
.swiper-content .content-text h2.with_img img{position:absolute; left:-50px; top:-50px; max-width: 180px;}
.swiper-content .content-image img {  padding: 20px; display: block; width: 100%; height: 100%; border-radius: 15%;  }
.joya-home .swiper-content .content-image img { padding:8%; max-height: 250px; width:auto !important; margin:auto; margin-top:7% }
.myHomepageProduitSwiper .swiper-content .content-image img,
.myHomepageConseilSwiper .swiper-content .content-image img {  width: 50%; height: 50%; }
.myHomepageProduitSwiper .swiper-slide.swiper-slide-active .swiper-content .content-image { background-image: url(images/coeur.png); background-position: center; background-repeat: no-repeat; background-size: contain; text-align: center}
.myHomepageProduitSwiper .swiper-slide.swiper-slide-active .swiper-content .content-image img,
.myHomepageConseilSwiper .swiper-slide.swiper-slide-active .swiper-content .content-image img { width: 100%; height: 100%; }
.myHomepageConseilSwiper .swiper-slide.swiper-slide-active .swiper-content .content-image img { border-radius: 10%;}
.swiper-content .content-text { padding: 20px; text-align: left; }

.swiper-barre { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; width: 35%; height: 100px; margin: 0 16%; padding-bottom: 50px; }
.myHomepageConseilSwiper .swiper-barre { padding-top: 30px; }

.myHomepageProduitSwiper .swiper-slide.swiper-slide-prev .swiper-content,
.myHomepageConseilSwiper .swiper-slide.swiper-slide-prev .swiper-content { flex-direction: row-reverse; }
.myHomepageProduitSwiper .swiper-slide.swiper-slide-prev .swiper-content .content-image img,
.myHomepageConseilSwiper .swiper-slide.swiper-slide-prev .swiper-content .content-image img { float: right; margin-top: 25%; }
.myHomepageProduitSwiper .swiper-slide.swiper-slide-next .swiper-content .content-image img,
.myHomepageConseilSwiper .swiper-slide.swiper-slide-next .swiper-content .content-image img { float: left; margin-top: 25%; }

.swiper-cadre { display: inline-block; margin: 0 20px; padding: 0.8em 2.2em; text-decoration: none; border-radius: 50px; /*box-shadow: 4px 2px 2px #ded3f3;*/ cursor: default; outline: none; background-color: #F1EEF6; }
.swiper-cadre .swiper-pagination { position: relative; background-color: transparent; }
.swiper-cadre .swiper-pagination-bullets.swiper-pagination-horizontal { width: auto; bottom: auto; /*top: 5px;*/ left: auto;}
.swiper-cadre .swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet { width: 12px; height: 12px; background-color: #DED4F2; opacity:1 }
.swiper-cadre .swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 16px; height: 16px; background-color: #673278;  }

div .swiper-button-next:after, div .swiper-button-prev:after,
div .swiper-button-next:after, div .swiper-button-prev:after { font-size: 25px; }
div .swiper-button-next, div .swiper-button-prev,
div .swiper-button-next, div .swiper-button-prev { padding: 8px 12px; border: 1px solid #fefeff; border-radius: 50%;/* box-shadow: 4px 2px 2px #ded3f3;*/ background-color: #F1EEF6; position: relative; z-index: 10; cursor: pointer; display: block; width: 57px; height: 57px; color: #673278; font-weight: bold; margin: 0; bottom: auto; top: auto; left: auto; right: auto; padding: 15px 0 15px 20px; }
.swiper-button-next:after { padding-left: 4px; }

@media screen and (max-width: 1025px) { 
    .swiper-barre { width: 57%; height: 100px; margin: 0 0%; padding-bottom: 50px; }
    .swiper-cadre .swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet { width: 8px; height: 8px;  }
    .swiper-cadre .swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 12px; height: 12px; }

 }
 @media screen and (min-width: 768px) and (max-width: 1025px) { }
 @media screen and (max-width: 767px) { 
    .myHomepageProduitSwiper .swiper-content,
    .myHomepageConseilSwiper .swiper-content,
     .complexe .swiper-content{
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .swiper-barre { width: 100% !important; }
     #csl-section .swiper{padding-top:0 !important}
 }
/* --------------footer-------------- */
#footer {
    background-color: #673278;
    background-image: url(images/logo-footer.png);
    background-repeat: no-repeat;
    background-position: 10% 50%;
    background-size: 150px;
    color: #ffffff;
    padding: 20px 0 10px;
    min-height: 300px;
}
#footer p { margin-bottom: 0; color: #ffffff; }
/*#footer ul {}*/
#footer ul li a { color: #ffffff; text-decoration: none; font-weight: normal; }
#footer ul li a img { width: 100%; }
.footer-text { text-align: center;  padding: 20px 0 30px; margin-bottom: -20px}
.footer-text p { font-family: 'Olivier', cursive; font-size: 3rem; color: #ffffff; }

.footer-text p span { border-bottom: solid 20px transparent; background-image: url(images/footer-souligne.png); background-origin: border-box; background-repeat: no-repeat; background-position: center bottom; }

@media screen and (max-width: 1439px) { 
    #footer { background-size: 100px; background-position: 5% 50%; }
    #footer ul li a img { width: 75%; }
    .footer-text { padding: 40px 0 20px; }
    .footer-text p { font-size: 2.5rem; }
}
@media screen and (max-width: 1025px) { 
    #footer { background-size: 100px; background-position: 5% 50%; }
    #footer ul li.nav-item { width: 10%; }
    #footer ul li a img { width: 100%; }
    .footer-text { padding: 40px 0 20px; }
    .footer-text p { font-size: 2rem; }
}
@media screen and (min-width: 320px) and (max-width: 767px) {
    #footer { background-size: 100px; background-position: top center; padding-top:155px; }
    .footer-text { padding: 0px 0 20px ; }
    #footer ul li.nav-item { width: 20%; }
}
/* /////////////////////////////////////////////////// */
/* homepage */
/* /////////////////////////////////////////////////// */
.home-header { text-align: center; position: relative; background-color: #ded3f1; max-width: 1920px; margin: 0 auto; }
.header-video.normal { max-width: 1920px; width:100%; }
.header-video.mobile { display: none; }
.header-wrapper { position:absolute; text-align: center; top: 40%; left : 20%; right: 20%; margin: 0 auto; }
.header-wrapper .content { width: 100%; }

/*#header-background-video { height: 100vh; width: 100vw; object-fit: cover; object-position: 50% top; position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; }
#joya-header .wrapper { display: table; width: 75%; height: 100%; margin: 0 auto; }
#joya-header .wrapper .content { display: table-cell; text-align: center; vertical-align: middle; }
#joya-header .wrapper .content .btn-primary { font-size: 1.2rem; } */

#section1 { background-color: #ffffff; }
#section1 .section1  { background-color: #673277; padding: 0; }
#section1 .section1 .wrapper { text-align: center; margin: 0 auto; padding: 100px 0 50px; }
#section1 .section1 .wrapper p { max-width: 70%; text-align: center; margin: 0 auto; color:white }
#section1 .section1 .wrapper .home{color:white !important; position: relative; margin-bottom: 20px;}
#section1 .section1 .wrapper .home::after { content: url('images/section1-deco.png');
    display: inline-block;
    width: 50px;
    height: 70px; position: absolute; top:-20px;}

#section2 { background-color: #ffffff; }
#section2 .section2   { background-color: #ffffff; padding: 0; }

#section3 { background-color: #ffffff; }
#section3 .section3   { background-color: #f9d8cf; color: #f28872; padding: 0; }
#section3 .section3 .wrapper { display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 100px 50px 50px; }
#section3 .section3 .wrapper .item p { color: #f28872; text-align: center; }
#section3 .section3 .wrapper .item p.title { color: #f28872; font-family: 'Olivier', cursive; font-size: 4em; text-align: center; font-weight: 400}
#section3 .section3 .wrapper .item { text-align: center; padding: 0 60px; color: #f28872; font-weight: bold; }
#section3 .section3 .wrapper .item img { padding-bottom: 40px; max-height: 130px;}

#section4 .section4 { position: relative; padding: 0; background-color: #DED4F2; }
#section4 .section4 .wrapper { position: relative; }
#section4 .section4 .wrapper .wrapper-content { position: absolute; top: 35%; left: 7%; }
#section4 .section4 .wrapper .wrapper-content .content { width: 40%; }
#section4 .section4 .wrapper .wrapper-content .content h2 { font-size: 2.5em; margin-bottom: 40px; }
#section4 .section4 .wrapper .wrapper-content .content h2.qanelas { font-family: 'QanelasRegular'; font-size: 2em; margin-bottom: 20px; }
#section4 .section4 .wrapper .wrapper-content .content p { font-size: 1.1em; line-height: 1.315em; padding: 30px 0 20px; }
#section4 .section4 .image-arrondie { position: absolute; top: 0;  }
#section4 .section4 .image-arrondie img  { width: 100%; }

@media screen and (max-width: 1350px) {
    #section4 .section4 .wrapper .wrapper-content{top:20% !important}
    .swiper-content .content-text h2{font-size:3rem;}
}
@media screen and (max-width: 1025px) {
    #section3 .section3 .wrapper { flex-wrap: wrap; padding: 40px 10px 30px; }
    #section3 .section3 .wrapper .item { padding: 0 0px; width:25%}
    #section3 .section3 .wrapper .item img { padding:0 10%; padding-bottom: 10px;  max-height: 84px}
    #section3 .section3 .wrapper .item p{font-size:0.8em}
    #section3 .section3 .wrapper .item p.title { padding: 0 20px; font-size:2em }
    .swiper-content .content-text h2{font-size:2rem;}
    .swiper-content .content-text h2.with_img{padding-right: 0}
     #section4 .section4 .wrapper .wrapper-content{top:7% !important}
    .swiper-content .content-text h2.with_img img{max-width: 150px}
    #section4 .section4 .wrapper .wrapper-content .content p{font-size:1em}
    #section4 .section4 .wrapper .wrapper-content .content h2{font-size:2em}
    .btn-primary{font-size: 0.9rem}
    #section4 .section4 .wrapper{min-height: 500px}
    #section4 .section4 .wrapper img{min-height: 500px; object-fit: cover;}
}
#section4 { background-color: #ffffff; }
#section4 .section4   { background-color: #ffffff; padding: 0; }

@media screen and (min-width: 768px) and (max-width: 1025px) { 
    .header-wrapper { top: 33%; }
}
@media screen and (min-width: 320px) and (max-width: 768px) { 
    .swiper.complexe .swiper-slide .swiper-content .content-text{clear: both}
    .home-header {
        text-align: center; position: relative; background-color: #ffffff; max-width: 767px; margin: 56px auto 0; }
    .header-wrapper { /*position: relative; text-align: center; top: 35%; left: 0; right: 0; margin: 0 auto; */}
    .header-wrapper h1{color:white !important}
    .header-wrapper .content { padding: 30px 20px; }
    .header-video.normal { display: none;  }
    .header-video.mobile { display: block; /*max-width: 430px;*/ width:100%; }

    #section1 { background-color: #ffffff; }
    #section1 .section1  {  padding: 0; }
    #section1 .section1 .wrapper { text-align: center; margin: 0 auto ; padding: 30px 15px 15px;}
    #section1 .section1 .wrapper p { max-width: 100%; text-align: center; margin: 0 auto; }
    .swiper-content .content-text{padding:10%; margin-left: 0 !important;/* margin-top:10%;*/}
    .swiper-content .content-text h2{font-size:2rem}
    #section4 .section4 .wrapper .wrapper-content{position: relative; top:0; left:0;}
    #section4 .section4 .wrapper .wrapper-content .content{width:100%; padding:10% 15%; background-color:#DED4F2}
    #section4 .section4 .wrapper .wrapper-content .content h2{margin-bottom: 0}
    #section4 .section4 .wrapper .wrapper-content .content .btn{padding:5px 15px;}
    .swiper-button-next, .swiper-button-prev{display: none !important}
    .swiper-cadre{/*position: absolute; top:38%;*/ padding:0.5em 1.4em}
    #prd-header .prd-header .wrapper p{max-width: 90% !important}
    #prd-guide-taille .guide-taille{display: none !important}
    #prd-section .swiper{padding-top:0 !important}
    .swiper-content .content-text h2.with_img img{top:-5px; left: -20px; max-width: 80px;}
    .swiper-content .content-text h2.with_img{padding-right:0 !important; padding-left:60px}
    #prd-section .swiper.myProduit8Swiper{max-width: 100% !important}
}

/* /////////////////////////////////////////////////// */
/* Page qui-sommes-nous */
/* /////////////////////////////////////////////////// */
.image-arrondie { position: absolute; top: 0;  }
.image-arrondie img  { width: 100%; }
#qsn-header .qsn-header   { background-color: #f1eef7; padding: 0; }
#qsn-header .qsn-header .wrapper { text-align: center; margin: 0 auto; padding: 100px 0;}
#qsn-header .qsn-header .wrapper img { display: inline-block; margin-top: 15px; margin-left: 10px; width: 45px; }
#qsn-header .qsn-header .wrapper .intro { width: 70%; text-align: center;  margin: 0 auto; padding-top: 40px; }

/*#qsn-section1 { background-color: #ffffff; }
#qsn-section1 .qsn-section1   { background-color: #f1eef7; padding: 0; }
#qsn-section1 .qsn-section1 .wrapper { text-align: center; margin: 0 auto; padding: 100px 0 50px;}
#qsn-section1 .qsn-section1 .wrapper img { display: inline-block; }
#qsn-section1 .qsn-section1 .wrapper h1::after { content: url('images/qsn-h1-deco-right.png');
    display: inline-block;
    width: 80px;
    height: 66px; }
#qsn-section1 .qsn-section1 .wrapper p { max-width: 50%; text-align: center; margin: 0 auto; padding-top: 30px; }*/

#qsn-section1 .qsn-section1 { position: relative; padding: 0; background-color: #DED4F2; }
#qsn-section1 .qsn-section1 .wrapper { position: relative; }
#qsn-section1 .qsn-section1 .wrapper .wrapper-content { display: flex; flex-direction: row; align-items: center; }
#qsn-section1 .qsn-section1 .wrapper .wrapper-content .visuel { width: 100%; overflow: hidden; }
#qsn-section1 .qsn-section1 .wrapper .wrapper-content .visuel img { object-fit: none; object-position: right 50%; }
#qsn-section1 .qsn-section1 .wrapper .wrapper-content .content { width: 100%;   }
#qsn-section1 .qsn-section1 .wrapper .wrapper-content .content h2 { text-align: center; padding-bottom: 40px; font-size:3.5rem; margin-top:40px;}
#qsn-section1 .qsn-section1 .wrapper .wrapper-content .content .content-items { display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 40px; padding: 0 15%; }
#qsn-section1 .qsn-section1 .wrapper .wrapper-content .content .content-items .item.titre { width: 100%; text-align: center; margin-bottom: 40px; }
#qsn-section1 .qsn-section1 .wrapper .wrapper-content .content .content-items .item { width: 50%; text-align: center; margin-bottom: 50px; }
#qsn-section1 .qsn-section1 .wrapper .wrapper-content .content .content-items .item p { font-size: 1em; margin-top: 20px; font-family: 'QanelasRegular';}
#qsn-section1 .qsn-section1 .wrapper .wrapper-content .content .content-items .item p strong{font-weight: 600; font-family: 'QanelasSemiBold'}


#qsn-section2 .qsn-section2 {  padding: 0; background-color: #FFFFFF; }

/*#qsn-section2 .qsn-section2 .wrapper { display: flex; flex-direction: row; align-items: center; }
#qsn-section2 .qsn-section2 .wrapper .visuel { width: 100%; display: flex; flex-direction: row; align-items: center; justify-content:flex-end; margin: 100px 0 50px; }
#qsn-section2 .qsn-section2 .wrapper .visuel .item { width: 20%; margin: 0 40px 0 0; }
#qsn-section2 .qsn-section2 .wrapper .visuel .item:first-child { width: 40%; }
#qsn-section2 .qsn-section2 .wrapper .content { width: 100%;  }
#qsn-section2 .qsn-section2 .wrapper .content h2 { padding-bottom: 40px; }
#qsn-section2 .qsn-section2 .wrapper .content .text { padding: 0 50% 0 0; }*/

#qsn-section3 .qsn-section3 {  background-color: #f9d8cf; padding: 0; }
#qsn-section3 .qsn-section3 .wrapper { position: relative; background-image: url("images/qsn-section3-background.png"); background-repeat: no-repeat; background-position: top; background-size: cover; }
#qsn-section3 .qsn-section3 .wrapper .wrapper-content { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; }
#qsn-section3 .qsn-section3 .wrapper .wrapper-content .content { padding: 12% 40% 80px 0; max-width: 90%}
#qsn-section3 .qsn-section3 .wrapper .wrapper-content .content .h2-deco img { width: 54px; margin-left: -54px; padding-right: 5px; }
#qsn-section3 .qsn-section3 .wrapper .wrapper-content .content .h2-deco h2 { color: #ce6852; padding-top: 20px; font-size:3.5rem}

#qsn-section3 .qsn-section3 .wrapper .wrapper-content .content .h2-deco h2 span { border: solid 20px transparent; background-image: url(images/qsn-section3-deco-right.png); background-origin: border-box; background-repeat: no-repeat; background-position: bottom; background-size: contain; }
#qsn-section3 .qsn-section3 .wrapper .wrapper-content .content .text { display: flex; flex-direction: row; flex-wrap: wrap; padding: 40px 35% 0 0 }
#qsn-section3 .qsn-section3 .wrapper .wrapper-content .content .text p { color: #ce6852; font-size: 1.1em; }

@media screen and (min-width: 992px) and (max-width: 1199px) { /*PCportable*/
    #qsn-header .qsn-header .wrapper { padding: 80px 0; }
    #qsn-section1 .qsn-section1 .wrapper .wrapper-content .content .content-items { padding: 0; }
    #qsn-section2 .qsn-section2 .swiper.complexe .swiper-barre { margin: 20px 0 0 17%; }
    #qsn-section3 .qsn-section3 .wrapper .wrapper-content .content { padding: 12% 30% 80px 10%; }
}
@media screen and (min-width: 768px) and (max-width: 1025px) { /*tablette*/
    #qsn-header .qsn-header .wrapper { padding: 60px 0; }
    #qsn-header .qsn-header .wrapper .intro { width: 70%; }
    #qsn-section1 .qsn-section1 .wrapper .wrapper-content { flex-direction: column; align-items: center; }
    #qsn-section1 .qsn-section1 .wrapper .wrapper-content .visuel { width: 100%; overflow: hidden; }
    #qsn-section1 .qsn-section1 .wrapper .wrapper-content .visuel img { object-fit: cover; object-position: center 100%; width: 100%; }
    #qsn-section1 .qsn-section1 .wrapper .wrapper-content .content .content-items .item.titre { margin-bottom: 0; }
    #qsn-section1 .qsn-section1 .wrapper .wrapper-content .content .content-items { padding: 0 10px; }
    #qsn-section1 .qsn-section1 .wrapper .wrapper-content .content .content-items .item { width: 25%; }
    #qsn-section1 .qsn-section1 .wrapper .wrapper-content .content .content-items img { width: 90%; }
    #qsn-section1 .qsn-section1 .wrapper .wrapper-content .content .content-items .item p { font-size: 1em;}

    
    #qsn-section2 .qsn-section2 .swiper.complexe .swiper-barre {
    position: absolute;
    width: 66%;
    /*top: 0px;
    margin: 184px auto 20px 18%;*/
    flex-wrap: wrap; bottom:-40px;
}

    #qsn-section3 .qsn-section3 .wrapper .wrapper-content .content { padding: 16% 30% 80px 10%; }
}

@media screen and (min-width: 320px) and (max-width: 767px) { /*mobile*/
    #qsn-header .qsn-header .wrapper { padding: 60px 0 30px; }
    #qsn-header .qsn-header .wrapper h1, h1.page { font-size: 2.8em; }
    #csl-header .csl-header .wrapper img{width:40px !important}
    #qsn-header .qsn-header .wrapper img { margin-top: 0px; margin-left: 4px; width: 30px; }
    #qsn-header .qsn-header .wrapper .intro { width: 90%; }
    #qsn-section1 .qsn-section1 .wrapper .wrapper-content { flex-direction: column; align-items: center; }
    #qsn-section1 .qsn-section1 .wrapper .wrapper-content .visuel { width: 100%; overflow: hidden; }
    #qsn-section1 .qsn-section1 .wrapper .wrapper-content .visuel img { object-fit: cover; object-position: center 100%; width: 100%; }
    #qsn-section1 .qsn-section1 .wrapper .wrapper-content .content .content-items .item.titre { margin-bottom: 0; }
    #qsn-section1 .qsn-section1 .wrapper .wrapper-content .content .content-items .item { width: 50%; }
    #qsn-section1 .qsn-section1 .wrapper .wrapper-content .content .content-items img { width: 80%; }
    #qsn-section1 .qsn-section1 .wrapper .wrapper-content .content .content-items .item p { font-size: 1em; margin-top: 10px; }

    #qsn-section2 .qsn-section2 { padding: 40px 0; }
    #qsn-section2 .qsn-section2 .swiper.complexe .swiper-barre { margin: 0px auto; }
    /*#qsn-section2 .qsn-section2 .wrapper { flex-direction: column-reverse; align-items: center; text-align: center; padding: 0; }
    #qsn-section2 .qsn-section2 .wrapper .content { width: 90%; margin: 0 auto; }
    #qsn-section2 .qsn-section2 .wrapper .content h2 { padding: 0 0 40px; text-align: center; }
    #qsn-section2 .qsn-section2 .wrapper .content .text { padding: 0 0 30px; }
    #qsn-section2 .qsn-section2 .wrapper .visuel { flex-direction: column-reverse; margin: 50px 0 0; }
    #qsn-section2 .qsn-section2 .wrapper .visuel .item { margin: 30px 0 0; }
    #qsn-section2 .qsn-section2 .wrapper .visuel .item:first-child { width: 65%; }
    #qsn-section2 .qsn-section2 .wrapper .visuel .item:last-child { width: 25%; transform: rotate(0.75turn); margin: 20px; }*/

    #qsn-section3 .qsn-section3 .wrapper { background-image: url(images/qsn-section3.png); background-repeat: no-repeat; background-position: right+20px bottom; background-size: 35%; }
    #qsn-section3 .qsn-section3 .wrapper .wrapper-content { padding: 0 0 30px 0;} 
    #qsn-section3 .qsn-section3 .wrapper .wrapper-content .content { width: 80%; margin: 0 auto; padding: 0; }
    #qsn-section3 .qsn-section3 .wrapper .wrapper-content .content .h2-deco img { width: 30px; margin-left:  -30px; }
    #qsn-section3 .qsn-section3 .wrapper .wrapper-content .content .h2-deco h2 { font-size: 1.9em; }
    #qsn-section3 .qsn-section3 .wrapper .wrapper-content .content .h2-deco h2 span { border: solid 13px transparent; }
    #qsn-section3 .qsn-section3 .wrapper .wrapper-content .content .text { padding: 30px 0; width: 60%; text-align: left; } 
    #qsn-section3 .qsn-section3 .wrapper .wrapper-content .content .cta { width: 80%; text-align: left; }
    
    .anim-link{font-size:0.6em}
    #prd-menuancre .radio-wrapper .radio-item { background-position: center 71% !important; }
    #prd-menuancre .radio-wrapper .radio-item.prems { background-position: right 71% !important; }
    #prd-menuancre .radio-wrapper .radio-item.der { background-position: left 71% !important; }
    #prd-menuancre .radio-wrapper .radio-item .item .ill{max-width: 80%}
}

@property --num {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

span.counter {
  transition: --num 5s;
  counter-set: num var(--num);
  font: 800 40px system-ui;
}
span.counter::after {
  content: counter(num);
}
span.counter:hover {
  --num: 100;
}


/* /////////////////////////////////////////////////// */
/* Page produits */
/* /////////////////////////////////////////////////// */
/*#prd-guide-taille {  }*/
#prd-guide-taille .guide-taille { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 20; }
#prd-guide-taille a { writing-mode: vertical-rl; text-orientation: mixed; }

#prd-submenu .prd-submenu { position: fixed; top: 106px; transition: top 0.5s ease-out; right:6%; z-index: 1000; background-color: #ffffff; background-clip: padding-box; border: 1px solid rgba(0,0,0,.15); border-radius: 0 0 10% 10%;}
#prd-submenu .prd-submenu .wrapper { display: flex; flex-direction: column; padding: 0.5rem 0 20px; font-size: 1rem;}
#prd-submenu .prd-submenu .wrapper .item { line-height: 30px;padding: 4px 50px 4px 25px;}
#prd-submenu .prd-submenu .wrapper .item a { text-decoration: none; color: #673276;}
#prd-submenu .prd-submenu.retract { top: 66px; }  

@media screen and (max-width: 1025px) {
    #prd-submenu .prd-submenu { position: fixed; top: 58px; transition: top 0.5s ease-out; right:0; z-index: 1000; background-color: #ffffff; background-clip: padding-box; border: 1px solid rgba(0,0,0,.15); border-radius: 20px 0 0 20px; }
    #prd-submenu .prd-submenu .wrapper { display: flex; flex-direction: row; padding:0.5rem 0; font-size: 1rem; justify-content: center; }
    #prd-submenu .prd-submenu .wrapper .item { line-height: 30px; padding: 4px 10px 4px 20px; }
    #prd-submenu .prd-submenu .wrapper .item a { text-decoration: none; color: #673276; }
    #prd-submenu .prd-submenu.retract { top: 58px; }  
}

#prd-header { background-color: #ffffff; }
#prd-header .prd-header   {  padding: 0; }
#prd-header .prd-header .wrapper { background-color: #ded3f1; text-align: center; margin: 0 auto; padding: 100px 0 50px;}
#prd-header .prd-header .wrapper h1 { line-height: 100px; }
#prd-header .prd-header .wrapper h1::before { width: 62px; height: 90px; content: ' '; display: inline-block; background-image: url(images/prd-h1-deco-left.png); background-repeat: no-repeat; background-position: left; background-size: 100%; }
#prd-header .prd-header .wrapper h1::after { width: 48px; height: 90px; content: ' '; display: inline-block; background-image: url(images/prd-h1-deco-right.png); background-repeat: no-repeat; background-position: top; background-size: 100%; }

/*#prd-header .prd-header .wrapper h1::after { content: url(images/prd-h1-deco-right.png); display: inline-block; width: 20px; height: 20px;}
#prd-header .prd-header .wrapper img { display: inline-block; }*/
#prd-header .prd-header .wrapper p { max-width: 50%; text-align: center; margin: 0 auto; padding-top: 10px; }

#prd-menuancre .prd-menuancre   { padding: 0; background-color: #FFFFFF; }
#prd-menuancre .prd-menuancre .wrapper { background-color: #F1EEF6; text-align: center; margin: 0 auto; padding: 30px 0 50px;}
#prd-menuancre .prd-menuancre .wrapper p.item-category { font-size: 1.1em; font-family: 'QanelasSemiBold'; padding: 20px 0 0 0; }
#prd-menuancre .prd-menuancre .wrapper p.item-category:first-child { padding-top: 40px; }
#prd-menuancre .prd-menuancre .wrapper p.item-category a { text-decoration: none; font-size: 1.1em; color: #673277; /*transition : all 1s ease-out ;*/ }

.anim-link { position: relative; z-index: 1; }
.anim-link::before { transform: scaleX(0); transform-origin: bottom right; }
.anim-link:hover::before { transform: scaleX(1); transform-origin: bottom left; }
.anim-link::before { content: " "; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0 0 0 0; background-color: #DED4F2; z-index: -1; transition: transform .3s ease; }

#prd-menuancre .anim-link::before { background-color: #DED4F2; }
#prd-menuancre .radio-wrapper { margin-top: 20px; }
#prd-menuancre .radio-wrapper .radio-item { background-position: center 62%; }
#prd-menuancre .radio-wrapper .radio-item.prems { background-position: right 62%; }
#prd-menuancre .radio-wrapper .radio-item.der { background-position: left 62%; }
#prd-menuancre .radio-wrapper .radio-item .item .picto-wrapper{height: 100px; display: flex; text-align: center; align-items: flex-end}
#prd-menuancre .radio-wrapper .radio-item .item .ill { display: block; /*width: 60%; */margin: 0 auto; max-height: 100%}
#prd-menuancre input:checked { background-color: #F1EEF6; }

.prd-section { padding: 0; background-color: #ffffff; }
.prd-section.not_sub { background-color: #F1EEF6; }
.prd-section.not_sub .swiper-cadre, .prd-section.not_sub .swiper-button-prev, .prd-section.not_sub .swiper-button-next{background-color:#ffffff}

#prd-section .swiper { /*width: 70%; */height: 70%; background-color: transparent; padding-top: 70px; }
#prd-section .swiper.myProduit8Swiper, #prd-section .swiper.myProduit7Swiper, #prd-section .swiper.myProduit6Swiper{max-width: 75%}
#prd-section .swiper-slide { background-color: transparent; }
#prd-section .swiper-content .content-image { flex:1; }
#prd-section .swiper-content .content-image img {  width: 100%; height: 100%; }
#prd-section .swiper-barre { width: 65%; margin: 0; padding-bottom: 70px; }

.modal-dialog-scrollable .modal-content { background-color: #ded3f1; border-radius: 30px; }

.modal-header { border-bottom: 0px solid #dee2e6; }
.modal-header .btn-close { padding: 0.8rem 0.8rem; margin: -0.5rem -0.5rem -0.5rem auto; }
.modal-body h2 { text-align: center; margin-bottom: 40px; padding-top:10px; }

.table>:not(:last-child)>:last-child>* {
    background-color: #DED4F2; 
    color: #673277; 
    font-weight: bold;
    border: 2px solid #ffffff;
}
.table>:not(caption)>*>* {
    padding: 0.5rem 0.5rem;
    background-color: transparent;
    color: #673278;
    font-weight: bold;
    border: 2px solid #ffffff;
    box-shadow: 0;
    text-align: center;
}
.table tbody tr th{text-align: left; padding-left:30px}
.table tbody tr th.th-color { background-color: #DED4F2; font-weight: normal; }
.table tbody tr th.th-color.mini, .table tbody tr td.mini { background-color: #FFFADF;  font-weight: bold; }
.table tbody tr th.th-color img { vertical-align: middle; }
.table tbody tr th.th-color.midi, .table tbody tr td.midi { background-color: #DCEDEE; font-weight: bold; }
.table tbody tr th.th-color.maxi, .table tbody tr td.maxi { background-color: #FAE3CC;  font-weight: bold; }
.table tbody tr th.th-color.junior, .table tbody tr td.junior { background-color: #E3EDCD;  font-weight: bold; }
.table tbody tr th.th-color.juniorplus, .table tbody tr td.juniorplus { background-color: #D7EBE2; font-weight: bold; }

.modal-body .jumbo>div{margin:20px;}
.modal-body .jumbo img{max-height: 116px; }

@media (min-width: 992px) { 
    .modal-dialog { max-width: 75%; } 
    .modal-body { padding: 0 5% 80px; } 
}

/* /////////////////////////////////////////////////// */
/* Page conseils */
/* /////////////////////////////////////////////////// */
#csl-header { background-color: #ffffff; }
#csl-header .csl-header  { padding: 0; }
#csl-header .csl-header .wrapper { background-color: #f9d8cf; text-align: center; margin: 0 auto; padding: 100px 0 50px;}

#csl-header .csl-header .wrapper img { display: inline-block; width: 72px; }
#csl-header .csl-header .wrapper p { max-width: 50%; text-align: center; margin: 0 auto; }
#csl-header .csl-header .radio-wrapper { display: inline-block; margin: 80px 0 50px; }
#csl-header .csl-header .radio-wrapper .radio-item { display: inline-block; }
#csl-header .csl-header .radio-wrapper .radio-item .item { display: block; padding: 0 40px; width: 100%; }

#csl-header .csl-header .radio-wrapper { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-end; justify-content: center; }
#csl-header .csl-header .radio-wrapper .radio-item { background-color: transparent; background-image: url(images/trait2.png); background-repeat: repeat-x; background-position: center 28%; background-size: 100px 4px; padding: 0; width: 200px; }
#csl-header .csl-header .radio-wrapper .radio-item.prems { background-repeat: no-repeat; background-position: right 28%; background-size: 100px 4px; }
#csl-header .csl-header .radio-wrapper .radio-item.der { background-repeat: no-repeat; background-position: left 28%; background-size: 100px 4px; }
#csl-header .csl-header .radio-wrapper .radio-item .item { display: block; padding: 0 10px; width: 100%; }

.radio-wrapper { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-end; justify-content: center; margin: 75px 0 0; }
.radio-wrapper .radio-item { background-color: transparent; background-image: url(images/trait.png); background-repeat: repeat-x; background-position: center 30%; background-size: 100px 4px; padding: 0; width: 200px; }
.radio-wrapper .radio-item.prems { background-repeat: no-repeat; background-position: right 30%; background-size: 100px 4px; }
.radio-wrapper .radio-item.der { background-repeat: no-repeat; background-position: left 30%; background-size: 100px 4px; }
.radio-wrapper .radio-item .item { display: block; padding: 0 10px; width: 100%;  }


label { display: block; opacity:0.5; cursor: pointer; }
input { appearance: none; cursor: pointer; border-radius: 50%; width: 38px; height: 38px; background-color: transparent; background-image: url(images/radio-bullet.png); background-repeat: no-repeat; background-position: center center; transition: 0.2s all linear; margin-right: 5px; position: relative; top: 4px; }
input:checked { background-color: #FFFFFF; border: 2px solid #673277; width: 38px; height: 38px; }
input:checked ~ label { font-weight: bold; opacity:1; }

@media screen and (min-width: 768px) and (max-width: 1025px) { /*tablette*/
    .radio-wrapper .radio-item { background-size: 150px 4px; width: 150px; }
    .radio-wrapper .radio-item.prems { background-size: 75px 4px; }
    .radio-wrapper .radio-item.der   { background-size: 75px 4px; }
}
@media screen and (max-width: 767px) { /*mobile*/
    .radio-wrapper { margin:0 !important}
    .radio-wrapper .radio-item { background-size: 80px 4px; width: 80px; background-position: center 32%; }
    .radio-wrapper .radio-item.prems { background-size: 40px 4px; background-position: right 32%; }
    .radio-wrapper .radio-item.der   { background-size: 40px 4px; background-position: left 32%; }
}

.csl-section { padding: 0; background-color: #ffffff; }
.csl-section:nth-child(even) { background-color: #f1eef7; }
.csl-section:nth-child(even) .swiper-cadre, .csl-section:nth-child(even) .swiper-button-prev, .csl-section:nth-child(even) .swiper-button-next{background-color:#FEFEFF}

#csl-section .swiper { width: 100%; height: auto; background-color: transparent; padding-top: 70px; }
#csl-section .swiper-slide { background-color: transparent; }
#csl-section .swiper-content .content-image { flex:1; }
#csl-section .swiper-content .content-image img {  width: 100%; height: 100%; }
#csl-section .swiper-barre { width: 65%; margin: 0; padding-bottom: 70px; margin-top:30px;}

@media screen and (min-width: 768px) and (max-width: 1025px) {
    #csl-header .csl-header .radio-wrapper .radio-item { background-size: 150px 4px; width: 150px; }
    #csl-header .csl-header .radio-wrapper .radio-item.prems { background-size: 75px 4px; }
    #csl-header .csl-header .radio-wrapper .radio-item.der { background-size: 75px 4px; }
}
@media screen and (max-width: 767px) {
    #csl-header .csl-header .radio-wrapper .radio-item { background-size: 80px 4px; width: 80px; background-position: center top 21px; }
    #csl-header .csl-header .radio-wrapper .radio-item.prems { background-size: 40px 4px; background-position: right  top 21px; }
    #csl-header .csl-header .radio-wrapper .radio-item.der { background-size: 40px 4px; background-position: left  top 21px; }
}

#csl-header input:checked { background-color: #F9D8D0; }

#csl-header .csl-header .wrapper .radio-wrapper .radio-item .item label.anim-link::before { background-color: #F28872; }
/* /////////////////////////////////////////////////// */

.swiper.complexe { width: 100%; padding: 65px 0; }
.swiper.complexe .swiper-slide.swiper-slide-prev .swiper-content { flex-direction: row-reverse; }
.swiper.complexe .swiper-slide .swiper-content .content-image { flex:1.4; }
.swiper.complexe .swiper-slide .swiper-content .content-image img {  width: 65% !important; height: auto !important; }
.swiper.complexe .swiper-slide.swiper-slide-active .swiper-content .content-image img{}
.swiper.complexe .swiper-slide.swiper-slide-prev .swiper-content .content-image img { float: right; margin-top: 13%; }
.swiper.complexe .swiper-slide.swiper-slide-next .swiper-content .content-image img { float: left; margin-top: 13%; }
.swiper.complexe .swiper-slide.swiper-slide-active .swiper-content .content-image img { width: 100% !important; height: auto !important; border-radius: 10%; }
.swiper.complexe .swiper-slide .swiper-content .content-text { margin-left: 20px; }
.swiper.complexe .swiper-slide .swiper-content .content-text p{margin-bottom: 0}
.swiper.complexe .swiper-slide .swiper-content .content-text p strong{font-family: 'QanelasBold'}

@media screen and (min-width: 1400px) {
    .joya-home .swiper-content .content-image img{padding:20px;}
}

@media screen and (max-width: 768px) {
    .qsn-section2 .swiper.complexe .swiper-slide .swiper-content .content-image img {width:100% !important}
    .swiper-slide-prev{opacity:0}
    .swiper-content{display: block}
}