.elementor-kit-6{--e-global-color-primary:#1E1E1E;--e-global-color-secondary:#1E1E1E;--e-global-color-text:#1E1E1E;--e-global-color-accent:#356EED;--e-global-color-6f87bc9:#356EED;--e-global-color-74370e5:#DA2865;--e-global-color-07dcd83:#F9E4ED;--e-global-color-b0f7a78:#E2EAF7;--e-global-color-b760be0:#FFFFFF;--e-global-typography-primary-font-family:"Satoshi";--e-global-typography-primary-font-weight:400;--e-global-typography-secondary-font-family:"Satoshi";--e-global-typography-secondary-font-weight:300;--e-global-typography-text-font-family:"Satoshi";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Satoshi";--e-global-typography-accent-font-weight:400;color:var( --e-global-color-primary );font-family:"Satoshi", Sans-serif;font-size:20px;font-weight:300;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 a{color:var( --e-global-color-6f87bc9 );}.elementor-kit-6 h1{color:var( --e-global-color-primary );font-family:"Satoshi", Sans-serif;font-size:55px;font-weight:900;}.elementor-kit-6 h2{color:var( --e-global-color-primary );font-family:"Satoshi", Sans-serif;font-size:35px;font-weight:900;}.elementor-kit-6 h3{color:var( --e-global-color-primary );font-family:"Satoshi", Sans-serif;font-size:25px;font-weight:700;}.elementor-kit-6 h4{color:var( --e-global-color-primary );font-family:"Satoshi", Sans-serif;font-size:2px;font-weight:700;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1300px;}.e-con{--container-max-width:1300px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//********************** general ******************/

.fondu-container {
    position: relative;
    overflow: hidden;
}

.fondu-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 10%);
    pointer-events: none;
    z-index: 1;
}

.fondu-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 10%);
    pointer-events: none;
    z-index: 1;
}

.swiper-wrapper {
    position: relative;
    z-index: 2; /* Assurer que les slides soient devant le dégradé */
}


.gradient{
background: #E2007A;
background: linear-gradient(to right, #E2007A 0%, #356EED 80%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;


}

.divider::before {
    content: '';
    width: 5px;
    width: 5px;
    height: 100%;
    display: block;
    background: linear-gradient(60deg, #356EED 0%, #7e3fbc 45%, #DA2865 100%);
    position: absolute;
    left: 0px;
    top: 0px;
    border-radius: 50px;
}

.divider h2, .divider h3{
    margin-left:20px;
}

/* bouton*/

.button {
     
      color: #313149;
      border: 5px solid transparent;
      display: inline-block;
      border-radius: 15px;
      
    }
    
    .button:hover {
    background-image: transparent;
      background: 
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(60deg, #356EED 0%, #7e3fbc 45%, #DA2865 100%) border-box;
      color: #313149;
      border: 5px solid transparent;
      display: inline-block;
      border-radius: 15px;
      
    }
    
    .button .elementor-button:hover {
       background-image: transparent; 
    } 
    
    .button svg{
        fill: #fff !important;
    }
     .button:hover svg{
        fill: #000 !important;
    }
    
  /*fin*/
 
 /* texte avec background gradient*/ 
  .bg-gradient{
     background-color: transparent;
    background-image: linear-gradient(215deg, var(--e-global-color-accent) 0%, #f2295b 75%);
    color: #fff !important;
    padding: 0 10px 5px 10px;
    border-radius: 10px;

  }
  
  .view ul{
    
    padding-left: 10px;
}

.timeline li .tl-circ {
        left: 49.6% !important;
}

/*************************************************/
/********************** HEADER *******************/
/*************************************************/


.header-change.active{
    top: 0px !important;
}

.menu-header li:first-child .e-n-menu-content {
    margin-left: 70px;
}

.menu-header li:last-child .e-n-menu-content {
    margin-left: -150px;
}

.menu-header li:nth-child(2) .e-n-menu-content {
    margin-left: 70px;
}


.bloc-sous-menu a {
    padding: 10px 15px;
}

.bloc-sous-menu .nolink {
    padding: 0px 15px !important;
}

.bloc-sous-menu a:hover{
    padding: 10px 15px;
    border-radius:10px;
    background-color: #e2eaf7;
}

.bloc-sous-menu{
    min-width: 330px;
}

.divider-sous-menu::before {
    content: '';
    width: 5px;
    width: 5px;
    height: 100%;
    display: block;
    background: linear-gradient(60deg, #356EED 0%, #7e3fbc 45%, #DA2865 100%);
    position: absolute;
    left: -10px;
    top: 0px;
    border-radius: 50px;
}

.logo-header img{
    width: 200px !important;
}

.menu-mobile ul li a, .menu-mobile ul li ul li a{
    text-transform: uppercase;
}

.menu-mobile ul li ul li a{
    font-size: 20px !important;
}

.menu-mobile ul li ul li ul li a{
    font-size: 17px !important;
   text-transform: none;
}

/* Style de base pour l'élément header */
    .header-change {
  transition: width 0.5s, transform 0.5s;
  border-bottom: 2px solid transparent;
}

/* Style appliqué quand l'utilisateur a scrollé plus de 100px */
.header-change.active {
   
  width: 100% !important;               /* Force la largeur à 100% */
  border-bottom: 2px solid;
  border-image: linear-gradient(to right, #ff0000, #0000ff) 1;
  border-radius: 0;
  left: 0 !important;                   /* Réinitialise la valeur left imposée par Elementor */
  transform: none !important;           /* Supprime la translation */
  margin: 0 auto;                       /* Centre l'élément si nécessaire */
}

/*************************************************/
/********************** FOOTER *******************/
/*************************************************/



/*************************************************/
/********************** ACCUEIL *****************/
/*************************************************/
.souligne{
    text-decoration: underline;
}


.listing ul{
    list-style: none;
    
}
.listing ul li{
    padding:5px 0; 
}

.listing ul li::before {
  content: "";
  display: inline-block;
  width: 20px; /* Taille de l'image */
  height: 20px; /* Taille de l'image */
  background-image: url('/wp-content/uploads/2025/02/arrow-right-short-svgrepo-com-1.svg');
  background-size: cover; /* Assurez-vous que l'image couvre la taille définie */
  margin-left: 5px; /* Espace entre l'image et le texte */
  position: relative;
  top: 5px;
}


/* Bouton par défaut */
#btn-form {
  border-radius: 15px !important;
  border: 3px solid transparent !important;
  padding: 20px 30px !important;
  /* Deux backgrounds :
     - Le premier (en haut) définit le fond intérieur (gris par défaut)
     - Le deuxième définit le dégradé pour la bordure */
  background-image: 
    
    linear-gradient(320deg, #356EED, #DA2865) !important;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: #fff !important;
  transition: all 0.3s ease;
}

/* Au survol/focus, le fond intérieur passe au blanc et le texte devient noir */
#btn-form:hover,
#btn-form:focus {
  background-image: 
    linear-gradient(#fff, #fff),
    linear-gradient(320deg, #356EED, #DA2865)!important;
  color: #000 !important;
}

/* Pour que l'icône SVG change de couleur en survol/focus */
#btn-form:hover svg,
#btn-form:focus svg {
  fill: #000 !important;
}


.categorie{
    transition: 0.3s all;
}
.categorie:hover{
    padding-left: 30px;
    transition: 0.3s all;
     border-width: 4px;
  border-style: solid;
  border-image: 
   linear-gradient(180deg, #356EED, #DA2865) 0 0 0 1;
}


/*************************************************/
/******************** CATEGORIE ******************/
/*************************************************/

.bloc-avantage{
    max-width: 400px;
}



/* fin*/

.texte-icone span{
   padding-right: 0px;
   transition:  padding-right 0.3s ease;
}


.texte-icone.active span{
   padding-right: 10px;
   transition:  padding-right 0.3s ease;
}

.texte-icone.active span::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  background-image: url("/wp-content/uploads/2025/01/right-arrow-svgrepo-com1.svg");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  filter: brightness(0) invert(1);
  animation: moveIcon 2s infinite;
}
@keyframes moveIcon {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(20px);
  }
  100% {
    transform: translateX(0);
  }
}

/* Bouton par défaut */
.btn-rdv .elementor-button,
.btn-rdv2 .elementor-button{
  border-radius: 15px !important;
  border: 3px solid transparent !important;
  padding: 20px 30px !important;
  /* Deux backgrounds :
     - Le premier (en haut) définit le fond intérieur (gris par défaut)
     - Le deuxième définit le dégradé pour la bordure */
  background-image: 
    
    linear-gradient(320deg, #356EED, #DA2865) !important;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: #fff !important;
  transition: all 0.3s ease;
}

/* Au survol/focus, le fond intérieur passe au blanc et le texte devient noir */
.btn-rdv .elementor-button:hover,
.btn-rdv .elementor-button:focus,
.btn-rdv2 .elementor-button:hover,
.btn-rdv2 .elementor-button:focus,
.btn-rdv3 .elementor-button:hover,
.btn-rdv3 .elementor-button:focus{
  background-image: 
    linear-gradient(#fff, #fff),
    linear-gradient(320deg, #356EED, #DA2865)!important;
  color: #000 !important;
}

/* Pour que l'icône SVG change de couleur en survol/focus */
.btn-rdv .elementor-button svg,
.btn-rdv2 .elementor-button svg
{
    fill: #ffffff;
}
.btn-rdv .elementor-button:hover svg,
.btn-rdv2 .elementor-button:hover svg,
.btn-rdv3 .elementor-button:hover svg{
    fill: #f000000;
}



/*************************************************/
/********************** SERVICE ******************/
/******************************.*******************/
.titre-faq h2 {
    line-height: 45px;
}


.accordeon-services h3{
    font-size:20px;
}

.services-wrapper {
  position: relative;
  height: 80vh; /* hauteur de la zone concernée */
  /* Pas d'overflow imposé par le parent */
  
}
.services {
  position: sticky;
  z-index: 10;
  display:flex;
  align-items:stretch;
}

.services-wrapper2 {
  position: relative;
  height: 80vh; /* hauteur de la zone concernée */
  /* Pas d'overflow imposé par le parent */
  
}
.services2 {
  position: sticky;
  z-index: 10;
  display:flex;
  align-items:stretch;
}

.bloc-gauche,
.bloc-droit {
  flex: 1;
}


.images-container {
  position: relative;
  width: 100%;
  height: 100%; /* ou une hauteur fixe */
}

.all-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none; /* toutes cachées par défaut */
  transition: opacity 0.2s ease-in-out; /* Pour une transition fluide */
}

.img-1 {
  display: block; /* l'image initiale visible */
}

.all-img img{
  border-radius: 20px;
}
.item {
  opacity: 0.6;
  transform: scale(1);
  background-color: transparent;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  margin: 0;
  transition: 
    opacity 0.2s ease-in-out, 
    transform 0.2s ease-in-out, 
    background-color 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out;
}

.item:hover {
  /* Optionnel : un léger effet de survol */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  opacity: 1;
}

.item.active {
  opacity: 1;
  transform: scale(1.05);
  background-color: #E2EAF7;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}


/*fin*/

/* animation carrousel de logos*/
.swiper-wrapper {
  transition-timing-function: linear !important; 
}

.avantage-icon.active {
        fill: #356eed !important;
    transform: scale(1.1);
    transition: all 0.2s ease;
}

.avantage-titre.active h3{
    color: #356eed!important;
    font-weight: bold;
    transition: color 0.2s ease;
}

.avantage-texte.active {
   
}

.logos{
    opacity: 0.3;
}
/*fin*/

/*************************************************/
/********************** ARTICLE ******************/
/*************************************************/
.cta h2 {
    margin-top: 0px !important;
    text-align: center;
}

.cta p:first-child {
    background: transparent!important;
    padding: 0px!important;
    border-radius: 0px!important;
}

.article .colonne-droite ul li p:first-child,
.article .colonne-droite ul li ul lip:first-child{
    background: transparent!important;
    padding: 0px!important;
    border-radius: 0px!important;
}


.article .colonne-droite p:first-child {
    background: #E2EAF7;
    padding: 20px;
    border-radius:20px;
}

.ez-toc-section::before {
    content: "";
    display: block;
    height: 100px; /* Ajustez cette valeur selon vos besoins */
    margin-top: -130px;
    pointer-events: none;
    visibility: hidden;
}


.ez-toc-widget-sticky-container ul.ez-toc-widget-sticky-list li.active {
    background-color: #E2EAF7!important;
    height: auto !important;
}

.ez-toc-widget-sticky-container li.active>a {
    color: #356eed !important;
}
.ez-toc-widget-sticky-container li a {
    font-size: 14px !important;
}


/* style sommaire */

.ez-toc-widget-sticky-container ul.ez-toc-widget-sticky-list li.active {
    background-color: #ededed;
    height: auto !important;
}

/* Bouton par défaut */
.icon-lire .elementor-button {
  
  border: 3px solid transparent !important;
  
  /* Deux backgrounds :
     - Le premier (en haut) définit le fond intérieur (gris par défaut)
     - Le deuxième définit le dégradé pour la bordure */
  background-image: 
    
    linear-gradient(320deg, #356EED, #DA2865) !important;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: #fff !important;
  transition: all 0.3s ease;
}

/* Au survol/focus, le fond intérieur passe au blanc et le texte devient noir */
.icon-lire .elementor-button:hover,
.icon-lire .elementor-button:focus {
  background-image: 
    linear-gradient(#fff, #fff),
    linear-gradient(320deg, #356EED, #DA2865)!important;
  color: #000 !important;
}

/* Pour que l'icône SVG change de couleur en survol/focus */
.icon-lire .elementor-button svg {
    fill: #ffffff;
}
.icon-lire.elementor-button:hover svg {
    fill: #f000000;
}


#ez-toc-container 
{
    display: none;
}

.sommaire a{
    color:#000;
}


.article h2{
    margin-top: 100px;
}

.article h3 {
    margin: 70PX 0PX 10px 0px;
}

.article ul{
    padding-left: 30px;
}

.article .colonne-gauche .chapitre{
    font-size: 18px;
    font-weight: 400;
}

.article .colonne-gauche .chapitre span{
    transition: ease 0.2s;
}

.article .colonne-gauche .chapitre span:hover{
    font-size: 18px;
    font-weight: 900;
}

.chapitre span:hover::before{
    content: '';
    width: 5px;
    width: 5px;
    height: 100%;
    display: block;
    background: linear-gradient(60deg, #356EED 0%, #7e3fbc 45%, #DA2865 100%);
    position: absolute;
    left: -20px;
    top: 0px;
    border-radius: 50px;

}

.article .colonne-droite p{
    text-align: justify;
}

.article .ez-toc-widget-sticky-container{
    position:static !important;
}

.article img {
   border-radius: 20px;
}

/*************************************************/
/************************ BLOG *******************/
/*************************************************/


/*************************************************/
/******************* RESPONSIVE ******************/
/*************************************************/
 @media screen and (max-width: 767px) {
   .article .colonne-gauche{
        position: static !important;
   }
   h2 {
     font-size: 30px !important;
    } 
    .grille-chiffres{
        position:relative;
        top: 0 !important;
    }
    h1 {
     font-size: 35px !important;
   }
   .titre-accueil h1{
     font-size: 25px !important;
    }
    .titre-accueil h2{
     font-size: 20px !important;
    }
   .logo-header img {
    max-width: 135px !important;
    }
    
    .menu-header .btn-rdv .elementor-button {
     padding: 10px 20px !important;
    }
    
    ul.timeline li .tl-circ {
       
        left: 17px !important;
    }

}
 
  @media (min-width:1025px) AND (max-width:1105px) {
   .compteur .elementor-counter .elementor-counter-number,
   .elementor-counter-number-prefix
   {
       font-size: 50px;
   }
 }
 
  @media screen and (max-width: 1024px) {
   .compteur .elementor-counter .elementor-counter-number, .elementor-counter-number-prefix{
       font-size: 40px;
   
   }
   
   .elementor-counter .elementor-counter-title {
   
    line-height: 19px !important;
    text-align:center;
  }
  
  .menu-header .btn-rdv .elementor-button {
     padding: 10px 10px !important;
    }
   
 }
  @media (min-width:1450px) AND (max-width:1605px){
.elementor-widget-n-menu .e-n-menu-title {
    padding: 10px 20px;
    }
    .elementor-widget-n-menu .e-n-menu:not([data-layout=dropdown]) .e-n-menu-item:not(:last-child) {
    margin-inline-end: 40px !important;
}
 
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Satoshi';
	font-style: normal;
	font-weight: 100;
	font-display: auto;
	src: url('http://proxiscreen.com/wp-content/uploads/2025/09/Satoshi-Light.woff2') format('woff2');
}
@font-face {
	font-family: 'Satoshi';
	font-style: normal;
	font-weight: 300;
	font-display: auto;
	src: url('http://proxiscreen.com/wp-content/uploads/2025/09/Satoshi-Regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Satoshi';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url('http://proxiscreen.com/wp-content/uploads/2025/09/Satoshi-Medium.woff2') format('woff2');
}
@font-face {
	font-family: 'Satoshi';
	font-style: normal;
	font-weight: 700;
	font-display: auto;
	src: url('http://proxiscreen.com/wp-content/uploads/2025/09/Satoshi-Bold.woff2') format('woff2');
}
@font-face {
	font-family: 'Satoshi';
	font-style: normal;
	font-weight: 900;
	font-display: auto;
	src: url('http://proxiscreen.com/wp-content/uploads/2025/09/Satoshi-Black.woff2') format('woff2');
}
/* End Custom Fonts CSS */