.elementor-kit-6{--e-global-color-primary:#CDC9BC;--e-global-color-secondary:#FFFFFF;--e-global-color-text:#5A5953;--e-global-color-accent:#CDC9BC;--e-global-color-bda0e0e:#E9E8E4;--e-global-color-cb55b0a:#5A5953;--e-global-color-7291881:#DAD8D3;--e-global-color-f3a8c2a:#858377;--e-global-color-41a0fca:#302F2C;--e-global-typography-primary-font-family:"Poppins";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Poppins";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Poppins";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Poppins";--e-global-typography-accent-font-weight:500;background-color:var( --e-global-color-bda0e0e );color:var( --e-global-color-text );font-family:"Poppins", Sans-serif;font-size:16px;font-weight:500;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{background-color:#5A595300;color:var( --e-global-color-text );border-style:solid;border-width:1px 1px 1px 1px;border-radius:25px 25px 25px 25px;}.elementor-kit-6 button:hover,.elementor-kit-6 button:focus,.elementor-kit-6 input[type="button"]:hover,.elementor-kit-6 input[type="button"]:focus,.elementor-kit-6 input[type="submit"]:hover,.elementor-kit-6 input[type="submit"]:focus,.elementor-kit-6 .elementor-button:hover,.elementor-kit-6 .elementor-button:focus{background-color:var( --e-global-color-text );color:var( --e-global-color-secondary );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-text );border-radius:25px 25px 25px 25px;}.elementor-kit-6 e-page-transition{background-color:var( --e-global-color-cb55b0a );}.elementor-kit-6 a{color:var( --e-global-color-text );}.elementor-kit-6 a:hover{color:var( --e-global-color-primary );}.elementor-kit-6 h1{color:var( --e-global-color-text );font-family:"Kantata Aksara", Sans-serif;font-size:45px;font-weight:500;}.elementor-kit-6 h2{color:var( --e-global-color-cb55b0a );font-family:"Kantata Aksara", Sans-serif;font-size:36px;}.elementor-kit-6 h3{color:var( --e-global-color-f3a8c2a );font-size:22px;}.elementor-kit-6 h4{color:var( --e-global-color-accent );font-size:20px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1400px;}.e-con{--container-max-width:1400px;}.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 *//* ========================= */
/*      Style du Slider      */
/* ========================= */
/* --- Conteneur global du slider --- */
.swiper-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 20px 0;
  box-sizing: border-box;
  /* Optionnel : pour centrer et limiter la largeur sur desktop
     max-width: 960px;
     margin: 0 auto;
  */
}

/* --- Définition de la largeur des slides par breakpoints --- */

/* Par défaut sur mobile (<768px) : 1 slide occupe 100% */
@media (max-width: 767px) {
  .swiper-slide {
    width: 100% !important;
  }
}

/* Entre 768px et 829px : 2 slides, avec un espace de 20px entre */
@media (min-width: 768px) and (max-width: 829px) {
  .swiper-slide {
    width: calc((100% - 20px) / 2) !important;
  }
}

/* Sur desktop (≥830px) : 3 slides, avec deux gaps de 20px (40px au total) */
@media (min-width: 830px) {
  .swiper-slide {
    width: calc((100% - 40px) / 3) !important;
  }
}

/* --- Style de chaque slide --- */
.swiper-slide {
  box-sizing: border-box;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* L'item actif a un léger agrandissement et une ombre */
/*.swiper-slide.active-slide {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}*/

/* --- Conteneur interne pour conserver un ratio fixe --- */
/* Ici, on utilise la technique du padding-bottom pour obtenir un ratio de 300x450 (soit 1:1.5) */
.slide-inner {
  position: relative;
  width: 100%;
  padding-bottom: 170%;  /* 150% du width pour obtenir la hauteur */
  overflow: hidden;
}

/* --- Conteneur pour l'image en arrière-plan --- */
.slide-image-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;        /* L'image couvre tout le container */
  background-repeat: no-repeat;    /* Pas de répétition */
  background-position: center;     /* Centrée */
  border-radius: 10px;
  transition: transform 0.3s ease;
}

/* Effet survol sur l'image */
.swiper-slide:hover .slide-image-container {
  transform: scale(1.05);
}

/* --- Navigation Swiper (flèches) --- */
.swiper-button-next,
.swiper-button-prev {
  position: absolute;
  top: 50%;
  width: 40px;
  height: 40px;
  margin-top: -20px; /* Pour centrer verticalement */
  background: #5a5953;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff !important;
  font-size: 18px;
  width:40px !important;
  height: 40px !important;
}

.swiper-button-next:after, .swiper-button-prev:after {
   
    font-size: 15px !important;
    font-weight: 700 ! important;
    
}

/* Flèche précédente à gauche, en dehors du conteneur */
.swiper-button-prev {
  left: -50px;
}

/* Flèche suivante à droite, en dehors du conteneur */
.swiper-button-next {
  right: -50px;
}

/* --- Boutons de filtre --- */
.livres-filters {
  text-align: center;
  margin-bottom: 20px;
}

.filter-button {
  background-color: #f0f0f0;
  color: #333;
  border: none;
  padding: 8px 16px;
  margin: 5px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.filter-button:hover {
  background-color: #ddd;
}

.filter-button.active {
  background-color: #333;
  color: #fff;
}


.carrousel-livre{
    width: 80%;
}

.label {
  font-weight: 700;
  margin-right: 5px;
  color: #333; /* Vous pouvez adapter la couleur si nécessaire */
}

.btn-livre{
    border-color:#5a5953;
    margin-top:10px;
}

/**** END*********/ 

.page ul{
    margin-left: 30px;
    margin-bottom: 30px;
}

/* font */
@font-face {
  font-family: 'KantataAksara';
  src: url('http://portaildelumiere.com/wp-content/uploads/2024/12/KantataAksara.ttf') format('truetype');
}
/*fin*/

/*****fin***********/

/************ bloc introducti**************/





/********** fin ************/



.card {
border-radius: 50px;
background: #e0e0e0;
box-shadow:  15px 15px 30px #cacaca,
             -15px -15px 30px #f6f6f6;
}
.card2 {
border-radius: 45px;
opacity: 0.6;
background: linear-gradient(145deg, #cacaca, #f0f0f0);
box-shadow:   15px 15px 30px #cacaca,
             -15px -15px 30px #f6f6f6;
             
}
/* menu sticky*/
.elementor-nav-menu__container{
top:0px!important;
}
#menuhopin.headershow{
transform: none;
}
#menuhopin{
position: fixed;
top:0;
width: 100%;
-webkit-transition: transform 0.34s ease;
transition : transform 0.34s ease;
transform: translateY(-100px); /*adjust this value to the height of your header*/
}

/* menu sticky*/
.elementor-nav-menu__container{
top:0px!important;
}
#menuhopin2.headershow{
transform: none;
}
#menuhopin2{
position: fixed;
top:0;
width: 100%;
-webkit-transition: transform 0.34s ease;
transition : transform 0.34s ease;
transform: translateY(-100px); 
}

/* bandeau */

.bandeau{
    background-position: top -350px center !important;
}



/* bloc vignette vidéo*/

.lien-chaine-video a{
    colr:#fff;
}




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


/*style bouton*/

@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400');
@import url('https://fonts.googleapis.com/css?family=Roboto:100');

[type=button]:hover,
.button:hover {
    color:#5a5953;
    background-color: #5a5953;
    text-decoration: none;
}

.button-container-1 {
  position: relative;
  width: 350px;
  height: 60px;
  margin: 0px auto 0;
  overflow: hidden;
  font-family: "Kantata Aksara", Sans-serif;
  font-weight: normal;
  font-size: 30px;
  transition: 0.5s;
  letter-spacing: 1px;
  border-radius: 8px;
}

.button-container-2 {
  position: relative;
  width: 300px;
  height: 44px;
  margin: 0px auto 0;
  overflow: hidden;
  font-family: "Kantata Aksara", Sans-serif;
  font-weight: normal;
  font-size: 22px;
  transition: 0.5s;
  letter-spacing: 1px;
  border-radius: 8px;
}

.button-container-1 button {
    width: 350px;
    height: 100%;
    font-family:"Kantata Aksara", Sans-serif;
    font-weight: normal;
    font-size: 30px;
    letter-spacing: 1px;
    cursor: pointer;
    color: #fff;
    border-radius: 50px;
    text-shadow: 0px 0px 16px rgba(0, 0, 0, 0.3);
}

.button-container-2 button {
    width: 300px;
    height: 100%;
    font-family:"Kantata Aksara", Sans-serif;
    font-weight: normal;
    font-size: 22px;
    letter-spacing: 1px;
    cursor: pointer;
    color: #fff;
    border-radius: 50px;
    text-shadow: 0px 0px 16px rgba(0, 0, 0, 0.3);
}

.button-container-1 button,
.button-container-2 button{
  background: #5a5953;
  -webkit-mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite.png");
  mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite.png");
  -webkit-mask-size: 2300% 100%;
  mask-size: 2300% 100%;
  border: none;
  -webkit-animation: ani2 0.7s steps(22) forwards;
  animation: ani2 0.7s steps(22) forwards;
}


.button-container-1 button:hover,
.button-container-2 button:hover{
  -webkit-animation: ani 0.7s steps(22) forwards;
  animation: ani 0.7s steps(22) forwards;
}

.mas {
    position: absolute;
    color: #5a5953;
    text-align: center;
    width: 350px;
    height: 60px;
    font-family: "Kantata Aksara", Sans-serif;
    font-weight: normal;
    font-size: 30px;
    padding-top: 6px;
    overflow: hidden;
    border: 1px solid #5a5953;
    border-radius: 50px;
}

.mas2 {
    position: absolute;
    color: #5a5953;
    text-align: center;
    width: 300px;
    height: 44px;
    font-family: "Kantata Aksara", Sans-serif;
    font-weight: normal;
    font-size: 22px;
    padding-top: 6px;
    overflow: hidden;
    border: 1px solid #5a5953;
    border-radius: 50px;
}

@-webkit-keyframes ani {
  from {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
  to {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
}

@keyframes ani {
  from {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
  to {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
}

@-webkit-keyframes ani2 {
  from {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
  to {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}

@keyframes ani2 {
  from {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
  to {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}

a {
  color: #00ff95;
}

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


/* 📌 Placement et style des flèches sous le carrousel */
.custom-swiper-navigation {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 15px;
}

.custom-swiper-prev, .custom-swiper-next {
  background-color: #0073e6;
  color: white;
  border: none;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  font-size: 20px;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}

.custom-swiper-prev:hover, .custom-swiper-next:hover {
  background-color: #005bb5;
}

.custom-swiper-prev:active, .custom-swiper-next:active {
  transform: scale(0.9);
}

/************************************/
/*************** GENERAL ************/
/************************************/

.picker__box, .picker__nav--next:hover, .picker__nav--prev:hover, .um .um-field-group-head, .um .um-members-pagi span.current, .um .um-members-pagi span.current:hover, .um .um-profile-nav-item.active a, .um .um-profile-nav-item.active a:hover, .um-modal-btn, .um-modal-btn.disabled, .um-modal-btn.disabled:hover, .um-modal-header, .upload, div.uimob800 .um-account-side li a.current, div.uimob800 .um-account-side li a.current:hover {
    background: #858377 !important;
}

.um-request-button {
    background-color: #837D77!important;
    color: #fff!important;
    
}

.um a.um-button, .um a.um-button.um-disabled:active, .um a.um-button.um-disabled:focus, .um a.um-button.um-disabled:hover, .um input[type=submit].um-button, .um input[type=submit].um-button:focus {
     background-color: #837D77!important;
    color: #fff!important;
}

.liste ul{
  margin-left:5px;  
}
.liste ul li,
.liste ol li{
  margin-top:20px;  
}




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


.menu span{
    text-align: center;
}

/*.menu span {
    text-align: center;
    display: flex !important
;
    flex-direction: column;
    column-gap: 0;
    justify-content: flex-start;
}*/

/*<p class="gras">Les spirituels</p><br><p>anonymes</p>*/

/************************************/
/*************** ACCUEIL ************/
/************************************/


/************************************/
/*************** PAGE ************/
/************************************/
 /*.page h2{
     font-size:25px;
     color:#858377;
    font-family: "Poppins", Sans-serif;
 }*/

 .card a{
       color:#5A5953;
       font-weight: 700;
       text-decoration: underline;
 }
 .card a:hover{
       color:#fff;
 }

 .page h2 {
    color:#cb55b0a;
    font-family: "Kantata Aksara", Sans-serif;
    font-size: 36px;
}

.bloc-vignette{
    min-height: 350px;
}

/* Overlay positionné sur l'image */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0); /* transparent au départ */
  transition: background-color 0.3s ease;
  z-index: 1;
  width: 100%;
  height: 100%;
}

/* Titre centré et caché initialement */
.title-vignette{
  position: absolute;
  color: #fff;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* Bouton positionné en bas à droite */
.toggleButton {
  position: absolute;
  bottom: 0;
  right: 10px;
  z-index: 999;
  padding: 8px 12px !important;
  font-size: 16px;
  cursor: pointer;
}

.toggleButton .elementor-icon {
    animation-name: elementor-animation-pulse;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* État actif : overlay sombre et titre visible */
.top-block.active .overlay {
  background-color: rgba(0, 0, 0, 0.5);
}

.top-block.active .title-vignette{
  opacity: 1;
  transition: opacity 0.4s ease;
  
}

.top-block.active::before {
    background-color: #03030390;
    --background-overlay: '';
}
/************************************/
/*************** ARTICLE ************/
/************************************/


.article ul{
    margin-left: 25px;
}

.article h3 {
   margin-top: 30px;
}
/************************************/
/*************** FOOTER ************/
/************************************/


/************************************/
/*************** RESPONSIVE ************/
/************************************/
@media (max-width: 767px) {
        .menu-sticky .elementor-widget-off-canvas .e-off-canvas__main {
    top:146px;
    }
    
    .icon-accueil{
        color:#837D77;
    }
    .header-accueil{
        background-color:#302F2C;
    }
    
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Kantata Aksara';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('http://portaildelumiere.com/wp-content/uploads/2024/12/KantataAksara.ttf') format('truetype');
}
/* End Custom Fonts CSS */