/* ==========================================================================
*
* Custom CSS Stylesheet. This is where you should add your own styles!
*
** ========================================================================== */

/* Simple style overrides or custom adds */

.some-css-selector {font-size:13px;}





/* ==========================================================================
** Responsive styles custom rules
* These rules are ready to be used for either overrides
* or just your own custom rules.
========================================================================== */


/** Higher screens+ **/
@media only screen and (min-width : 1921px){

}


/** Desktop+ **/
@media (min-width: 1200px) {

}


/** Laptop **/
@media (max-width: 1200px) {

}


/** Laptop+ **/
@media (min-width: 991px) {

}


/** Laptop **/
@media (min-width: 992px) and (max-width: 1199px) {

}


/** Large Tablets **/
@media (max-width: 992px) {

}


/** Tablets (landscape mode)  **/
@media (min-width: 768px) and (max-width: 991px) {

}


/** Tablets+  **/
@media (min-width: 768px) {

}


/** Tablets (portrait mode)  **/
@media (min-width : 481px) and (max-width : 768px) {

}


/** Smartphone landscape mode / Mini Tablet **/
@media (max-width: 767px) {

}


/** Smartphone landscape mode / Mini Tablet **/
@media (max-width: 600px) {

}


/** Smartphone portrait mode **/
@media (max-width: 480px) {

}


/** Normal phone portrait mode+ **/
@media (min-width: 320px) {
	
}

/* Main Css */
a:hover,
.cart-container>.widget_shopping_cart_content .checkout,
.sc-infopop__btn,
.m_title,
.smallm_title,
.circle_title,
.zn_text_box-title--style1,
.feature_box .title,
.services_box--classic .services_box__title,
.latest_posts.default-style .hoverBorder:hover h6,
.latest_posts.style2 ul.posts .title,
.recentwork_carousel--1 .recentwork_carousel__crsl-title,
.acc--default-style .acc-tgg-button,
.acc--style3 .acc-tgg-button:after,
.screenshot-box .left-side h3.title,
.vertical_tabs.kl-style-1 .tabbable .nav>li.active>a,
.services_box_element .box .list li,
.shop-latest .tabbable .nav li.active a,
.product-list-item:hover .details h3,
.product-category .product-list-item:hover h3,
.eBlog .itemContainer:not(.featured-post) .post_details .catItemAuthor a,
.theHoverBorder:hover,
.text-custom,
.text-custom-hover:hover,
.statbox h4,
#bbpress-forums .bbp-topics li.bbp-body .bbp-topic-title>a,
.ib2-text-color-light-theme .ib2-info-message:before,
.tbk--color-theme.tbk-symbol--icon .tbk__icon,
.pricing-table-element .plan-column .plan-title,
.process_steps--style2 .process_steps__step-icon,
.vertical_tabs.kl-style-2 .tabbable .nav>li>a:hover,
.vertical_tabs.kl-style-2 .tabbable .nav>li.active>a [data-zn_icon]:before,
.vertical_tabs.kl-style-2 .tabbable .nav>li>a:hover [data-zn_icon]:before,
.services_box--boxed .services_box__fonticon,
.services_box--boxed .services_box__list li,
.woocommerce ul.product_list_widget li .star-rating,
.woocommerce .woocommerce-product-rating .star-rating,
body .static-content__infopop .sc-infopop__btn,
.hg_accordion_element.style3 .th-accordion .acc-group>a,
.grid-ibx__item:hover .grid-ibx__icon,
.kl-iconbox__title,
.full-portfolio .hg-portfolio-sortable #portfolio-nav li a:hover,
.full-portfolio .hg-portfolio-sortable #portfolio-nav li.current a,
ul.thumbs.style2 .appreciate::before,
.product-list-item:hover .kw-details-title,
.kl-store-page ul.products li.product .product-list-item:hover .kw-details-title,
.kl-store.widget ul.product_list_widget li .star-rating,
.testimonial_slider.quoter-style .testimonialbox .who strong,
.hg_accordion_element.default-style .th-accordion .acc-group>button,
.team-member .mmb-position,
.kl-iconbox.stage:hover .kl-iconbox__icon,
.priceListElement-itemPrice,
.hg_accordion_element.style2 .th-accordion .acc-group>button,
.fun-fact .fun-number,
.site-header .kl-header-toptext a,
.testimonial_slider__carousel-wrapper .testimonialbox .who strong,
.image-boxes__carousel-wrapper .inner-slide:hover a {
    color: #a6da07;
}

.tcolor,
.vertical_tabs .tabbable .nav>li.active>a,
.vertical_tabs .tabbable .nav>li>a:hover,
.vertical_tabs .tabbable .nav>li.active>a>span,
.vertical_tabs .tabbable .nav>li>a:hover>span,
.services_boxes_wgt li:hover .kl-icon,
.works_carousel.stl-simple .inner-slide:hover a,
.works_carousel.stl-simple .inner-slide a:hover,
.orange,
.blue,
.works_carousel .cfs--navigation a:hover::before,
.vertical_tabs .tabbable .nav>li>a.active,
.vertical_tabs .tabbable .nav>li>a.active>span,
.hg_accordion_element.style4 .th-accordion .acc-group a {
    color: #a6da07 !important;
}

.tbg,
.photo-wall .pw-item::after,
.bg-default,
.site-header .kl-cart-button .fas:after,
.logo-container .logo-infocard .right-side,
.hg_accordion_element.style5 .th-accordion a::before,
.image-boxes__carousel-wrapper .inner-slide .imgprev,
.hg_accordion_element.style4>h3,
.hg_accordion_element.style3 .th-accordion .acc-group a:before,
.keywordbox.keywordbox-4 {
    background-color: #a6da07 !important;
}

.acc--style4,
#page-loading:after,
.ib2-text-color-light-theme .ib2-info-message:before,
.itemThumbnail .overlay__inner a:hover,
.acc--style4 .acc-tgg-button .acc-icon,
.btn-lined.lined-custom,
.hg_accordion_element.style4 .th-accordion {
    border-color: #a6da07;
}

.btn-lined.lined-custom:hover {
    border-color: rgba(39, 174, 96, 0.7);
}

.acc--style3 .acc-tgg-button:hover,
.acc--style3 .acc-tgg-button:hover:after,
.acc--default-style .acc-tgg-button,
.acc--style2 .acc-tgg-button,
.acc--style3 .acc-tgg-button,
.acc--style4 .acc-tgg-button,
.btn-lined.lined-custom {
    color: #a6da07;
}

.tabs_style5>ul.nav>li.active>a,
.wgt-title>span,
.tabs_style5>ul.nav>li>a.active {
    border-bottom: 2px solid #a6da07;
}

header.style1,
header.style2 .site-logo a,
header.style3 .site-logo a {
    border-top: 3px solid #a6da07;
}

.tabs_style1>ul.nav>li.active>a,
.tabs_style1>ul.nav>li>a.active {
    box-shadow: inset 0 3px 0 #a6da07;
}

.main-nav>ul>li>a:before,
.main-nav .zn_mega_container li a:not(.zn_mega_title):before,
.social-icons.sc--normal li a:hover,
.action_box,
body .circlehover,
body .kl-flex--classic .zn_general_carousel-arr:hover,
body .kl-ioscaption--style1 .more:before,
body .kl-ioscaption--style1 .more:after,
body .kl-ioscaption--style2 .more,
body .nivo-directionNav a:hover,
body .th-wowslider a.ws_next:hover,
body .th-wowslider a.ws_prev:hover,
body .ca-more,
body .title_circle,
body .title_circle:before,
body ul.links li a,
.hg-portfolio-sortable #portfolio-nav li a:hover,
.hg-portfolio-sortable #portfolio-nav li.current a,
.kl-ioscaption--style1 .more:before,
.kl-ioscaption--style1 .more:after,
.btn-flat,
.zn_limited_offers li:after,
.login-panel .login_facebook,
.imgboxes_style1 .hoverBorder h6,
.circlehover:before,
.kl-cta-ribbon,
.newsletter-signup input[type=submit],
.recentwork_carousel--1 .recentwork_carousel__bg,
.zn-acc--style4 .acc-title,
.zn-acc--style3 .acc-tgg-button:before,
.process_box .content:before,
#bbpress-forums div.bbp-search-form input[type=submit],
#bbpress-forums .bbp-submit-wrapper button,
#bbpress-forums #bbp-your-profile fieldset.submit button,
.bg-custom,
.bg-custom-hover:hover,
.site-header.style8 .kl-main-header .kl-cta-lined,
.site-header.style9 .kl-cta-lined,
.latest_posts.default-style.kl-style-2 .lp-title,
.latest_posts.default-style.kl-style-2 .post:not(.lp-title) .m_title:after,
.latest_posts.default-style .hoverBorder h6,
.itemThumbnail .overlay__inner a:hover,
.elm-searchbox--normal .elm-searchbox__submit,
.elm-searchbox--transparent .elm-searchbox__submit,
.itemThumbnail .overlay__inner a:hover,
.zn-acc--style4 .acc-tgg-button .acc-icon:before,
span.zn_badge_sale,
span.zn_badge_sale:after,
.zn_limited_offers li:before,
.style3 .action_box_inner,
.style3 .action_box_inner:before,
.action_box.style3:before,
.circlehover.style2,
.circlehover.style2:before,
body .kl-flex--classic .zn_simple_carousel-arr:hover,
.main-nav .hg_mega_container li a:not(.zn_mega_title):before {
    background-color: #a6da07;
}

.breadcrumbs li:after,
.ib2-text-color-light-theme .ib2-inner,
.breadcrumbs li:after,
.breadcrumbs2 li:after,
.photogallery-widget .pg-thumb:nth-child(even) .pg-caption::before,
.portfolio-item-details.travel li::before {
    border-left-color: #a6da07;
}

.kl-cta-ribbon .trisvg path,
.kl-bottommask .bmask-customfill,
.kl-slideshow .kl-loader svg path,
.kl-slideshow.kl-loadersvg rect,
.kl-diagram circle,
.kl-cta-ribbon .trisvg {
    fill: #a6da07;
}

.how_to_shop .number,
.newsletter-signup input[type=submit],
.th-map_controls,
.hg-portfolio-sortable #portfolio-nav li.current a,
.ptcarousel .controls>a:hover,
.itemLinks span a:hover,
.product-list-item .kw-actions a,
.woocommerce ul.products li.product .product-list-item .kw-actions a,
.shop-features .shop-feature:hover,
.btn-flat,
.redbtn,
.imgboxes_style1 .hoverBorder h6,
.feature_box.style3 .box:hover,
.services_box--classic:hover .services_box__icon,
services_box_element:hover .box .icon,
.latest_posts.default-style .hoverBorder h6,
.process_steps--style1 .process_steps__intro,
.process_steps--style2 .process_steps__intro,
.recentwork_carousel.style2 li a .details .plus,
.gobox.ok:before,
.gobox.ok:after,
.gobox.ok,
.recentwork_carousel--1 .recentwork_carousel__bg,
.circlehover:before,
.kl-ioscaption--style1 .more:before,
.kl-ioscaption--style1 .more:after,
.kl-ioscaption--style2 .more {
    background-color: #a6da07;
}

.hover-box:hover {
    background-color: #a6da07 !important;
}

.vertical_tabs.kl-style-1 .tabbable .nav>li.active>a,
.vertical_tabs.kl-style-1 .tabbable .nav>li>a.active {
    box-shadow: inset -3px 0 0 0 #a6da07 !important;
}

.action_box:before,
.action_box:after,
.site-header.style1,
.site-header.style6,
.site-header.style4 .site-logo a,
.site-header.style5 {
    border-top-color: #a6da07;
}

.process_steps--style1 .process_steps__intro:after,
body .nivo-caption,
body .kl-flex--classic .flex-caption,
body .th-wowslider .ws-title,
.process_box[data-align=left] .content:after,
body .ls--laptop .ls__item-caption {
    border-left-color: #a6da07;
}

.process_box[data-align=right] .content:after,
.photogallery-widget .pg-thumb:nth-child(odd) .pg-caption::before {
    border-right-color: #a6da07;
}

.theHoverBorder:hover {
    box-shadow: 0 0 0 5px #a6da07 inset;
}

.vertical_tabs.kl-style-1 .tabbable .nav>li.active>a {
    box-shadow: inset -3px 0 0 0 #a6da07 inset;
}

.offline-page .containerbox {
    border-bottom: 5px solid #a6da07;
}

.offline-page .containerbox:after {
    border-top: 20px solid #a6da07;
}

.site-header.style2 .site-logo a,
.site-header.style5,
.site-header.style6 .site-logo a {
    border-top: 3px solid #a6da07;
}

body .kl-ioscaption--style2 .title_big,
body .kl-ioscaption--style2 .title_small {
    border-left: 5px solid #a6da07;
}

body .kl-ioscaption--style2.fromright .title_big,
body .kl-ioscaption--style2.fromright .title_small {
    border-right: 5px solid #a6da07;
}

#buddypress form#whats-new-form p.activity-greeting:after {
    border-top-color: #a6da07;
}

#buddypress input[type=submit],
#buddypress input[type=button],
#buddypress input[type=reset],
#buddypress .activity-list li.load-more a,
.stg-bigblog .bb-title .bb-category,
.product-list-item .kw-actions a,
.kl-store-page ul.products li.product .product-list-item .kw-actions a,
.btn-flat,
.kl-store-page a.button,
.kl-store-page button.button,
.kl-store-page button.button.alt,
.kl-store-page input.button,
.kl-store-page input#button,
.kl-store-page #review_form #submit,
.fancy-list li:hover::before,
.testimonial_slider.quoter-style .cfs--pagination a.selected,
.photogallery-widget .pg-thumb .pg-caption,
ul.dash-list li::before,
.kl-iconbox--sh-circle span.kl-iconbox__icon,
.process-list .processitems li:hover .ico-wrapper>span,
.works_carousel.stl-simple .inner-slide .imgprev {
    background: #a6da07;
}

#buddypress div.item-list-tabs ul li.selected a,
#buddypress div.item-list-tabs ul li.current a {
    border-top: 2px solid #a6da07;
}

#buddypress form#whats-new-form p.activity-greeting,
.widget.buddypress ul.item-list li:hover {
    background-color: #a6da07;
}

.widget.buddypress div.item-options a.selected,
#buddypress div.item-list-tabs ul li.selected a,
#buddypress div.item-list-tabs ul li.current a,
#buddypress div.activity-meta a,
#buddypress div.activity-meta a:hover,
#buddypress .acomment-options a {
    color: #a6da07;
}

.keywordbox.keywordbox-2,
.hg_post_image,
.hg_full_image {
    border-bottom: 5px solid #a6da07;
}

.keywordbox.keywordbox-3 {
    border-bottom: solid 10px #a6da07;
}

.process_box4 .number:before,
.loginbox-popup input[type=submit],
.login-panel .login_facebook {
    background: #a6da07;
}

.statistics-horizontal .v-line {
    border-bottom: dotted 1px #a6da07;
}

.statistics-vertical::before {
    border-left: dotted 1px #a6da07;
}

.circle-text-box.style3 .wpk-circle-span,
.circle-text-box.style2 .wpk-circle-span::before {
    background: #a6da07;
}

.circle-text-box:not(.style3) .wpk-circle-span:after {
    background-color: #a6da07;
}

.circle-text-box .wpk-circle-title,
.media-container .media-container__link--style-borderanim2 .media-container__text:hover {
    color: #a6da07;
}

.services_box--modern .services_box__icon {
    box-shadow: inset 0 0 0 2px #a6da07;
}

.services_box--modern:hover .services_box__icon {
    box-shadow: inset 0 0 0 40px #a6da07;
}

.services_box--modern .services_box__fonticon {
    color: #a6da07;
}

.services_box--modern .services_box__list li:before {
    box-shadow: 0 0 0 2px #a6da07;
}

.services_box--modern .services_box__list li:hover:before {
    box-shadow: 0 0 0 3px #a6da07;
}

.kl-has-overlay .img-intro:hover .overlay {
    box-shadow: inset 0 -8px 0 0 #a6da07;
}

.kl-cta-ribbon,
.hg_accordion_element.style3 .th-accordion .acc-group>a:before,
.tbk-symbol--line_border .tbk__symbol span,
.stl-hoverstyle .cfs--navigation a:hover {
    background-color: #a6da07
}

.kl-cta-ribbon .trisvg path {
    fill: #a6da07
}

.logo-container .logo-infocard {
    background: #a6da07
}

body .kl-ioscaption--style4 .more:before {
    border-color: #a6da07;
    background: rgba(39, 174, 96, 0.7)
}

body .kl-ioscaption--style4 .more:hover:before,
.cart-container .buttons .button.wc-forward:hover,
.logo-container .logo-infocard .left-side,
.kl-ios-selectors-block.bullets2 .item.selected::before,
.kl-ios-selectors-block.bullets2 .item:hover:before {
    background: rgba(39, 174, 96, 0.9)
}

.timeline_box:hover:before {
    background-color: #a6da07
}

body .kl-ioscaption--style3.s3ext .main_title::before,
body .kl-ios-selectors-block.bullets2 .item.selected::before,
.iosslider__item .kl-ioscaption--style5 .klios-separator-line span,
.btn-fullcolor,
.btn-fullcolor:focus,
.btn-fullcolor.btn-skewed:before,
.cart-container .buttons .button.wc-forward,
body .kl-flex--modern .flex-underbar,
.tbk--color-theme.tbk-symbol--line .tbk__symbol span,
.tbk--color-theme.tbk-symbol--line_border .tbk__symbol span,
.ls__nav-item.selected,
.site-header.style7 .kl-cart-button .glyphicon:after,
.how_to_shop .number,
.recentwork_carousel--2 .recentwork_carousel__title:after,
.recentwork_carousel_v3 .btn::before,
.recentwork_carousel--2 .recentwork_carousel__cat,
.recentwork_carousel_v2 .recentwork_carousel__plus,
.recentwork_carousel_v3 .recentwork_carousel__cat,
.pricing-table-element .plan-column.featured .subscription-price .inner-cell,
.shop-latest .tabbable .nav li.active a:before,
.product-list-item .kw-actions a,
.woocommerce ul.products li.product .product-list-item .kw-actions a,
.latest_posts.style2 ul.posts .details span.date,
.eBlog .related-articles .rta-post>a:after,
.shop-features .shop-feature:hover,
.cart-container .buttons .button.wc-forward,
.media-container__link--style-borderanim1>i,
.site-header .kl-cart-button .glyphicon:after,
.chaser .main-menu li.active>a,
.imgboxes_style4 .imgboxes-title:after,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce button.button.alt,
.woocommerce input.button,
.woocommerce input#button,
.woocommerce #review_form #submit {
    background-color: #a6da07;
}

.borderanim2-svg__shape {
    stroke: #a6da07 !important;
}

.btn-fullcolor.btn-skewed:hover:before,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button:hover,
.woocommerce input#button:hover,
.woocommerce #review_form #submit:hover {
    background-color: #a41a1b
}

.site-header.style8 .kl-main-header,
.site-header.style9,
.shop-latest .tabbable .nav li.active a:after,
.zn_post_image,
.zn_full_image,
.sidebar .widget .widgettitle:after,
.imgboxes_style4.kl-title_style_bottom .imgboxes-border-helper,
.imgboxes_style4.kl-title_style_bottom:hover .imgboxes-border-helper,
.statistic-box__line,
.read-more-link:hover {
    border-bottom-color: #a6da07
}

.fake-loading:after {
    border: 2px solid rgba(39, 174, 96, 0.15);
    border-top-color: #a6da07;
    border-right-color: #a6da07;
}

.latest_posts.style2 ul.posts .details span.date:after {
    border-top-color: #a6da07;
}

.eluidf3608cd8 .kl-bg-source__overlay {
    background: #a6da07;
}

.kl-iconbox--sh-circle:hover span.kl-iconbox__icon:after,
.kl-iconbox--sh-circle:hover span.kl-iconbox__icon,
.btn-fullcolor:hover {
    background: rgba(39, 174, 96, 0.7)
}

.btn-fullcolor.btn-skewed:hover:before,
.section-video-icons .right-side {
    background-color: rgba(39, 174, 96, 0.7) !important;
}

.skills_wgt .skill-bar>i {
    background: #a6da07 !important;
}

.works_carousel .inner-slide:hover .imgprev::after {
    border-bottom: 8px solid #a6da07 !important;
}

.site-header.style2 .kl-main-header,
.site-header.style3,
.site-header.style10 {
    border-bottom: 3px solid #a6da07;
}
/* 94px est la taille max de l'image sans agrandir le header. */
.site-logo img {
    max-height: 94px;
    max-width: 100%;
}
/* End Of Main CSS */

/* Custom CSS  header article blog */

/* Partie générale du header */
#page_header {
    position: relative;
    /* Ajuster la hauteur pour un bon affichage */
    min-height: 300px; /* Cette valeur peut être ajustée selon le besoin */
    padding-top: 50px; /* Espacement en haut pour éviter que le contenu ne soit trop collé */
}

/* Media Queries pour les appareils mobiles en portrait */
@media (max-width: 768px) and (orientation: portrait) {
    #page_header {
        /* Ajouter plus de marge en haut pour laisser de l'espace et éviter le découpage */
        padding-top: 100px; /* Ajuster selon l'espace disponible */
        min-height: 350px; /* Ajuster la hauteur min pour éviter que le contenu soit coupé */
    }

    .page-subheader .container {
        /* Centrer le contenu verticalement si nécessaire */
        padding-top: 0; 
    }

    /* Ajuster les titres et les espacements dans le formulaire */
    .subheader-titles h2 {
        font-size: 1.5em; /* Taille plus petite du titre pour les petits écrans */
        margin-bottom: 15px; /* Ajoute un peu d'espace sous le titre */
    }

    .subheader-titles h4 {
        font-size: 1.2em; /* Ajuste la taille du sous-titre */
    }

    .breadcrumbs {
        font-size: 0.9em; /* Ajuster la taille des breadcrumbs pour les petits écrans */
    }

    .subheader-currentdate {
        font-size: 1em; /* Ajuster la taille de la date pour les petits écrans */
        margin-top: 15px; /* Espacement pour la date */
    }
}

/* Media Queries pour les appareils en paysage (plus larges que les portraits) */
@media (max-width: 768px) and (orientation: landscape) {
    #page_header {
        padding-top: 80px; /* Moins d'espacement que en portrait */
        min-height: 300px; /* Ajuster selon la taille */
    }
}


/* End of Custom CSS  header article blog */

/* Boutton Intégrer le club */
  /*=============== GOOGLE FONTS ===============*/
  @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap");
/*=============== VARIABLES CSS ===============*/
:root {
    /*========== Colors ==========*/
    /*Color mode HSL(hue, saturation, lightness)*/
    /* --body-color: #393937; */
    --accent-color: #a6da07;
    --white-color: #fff;
    --box-shadow: 0 0 5px #a6da07, 0 0 25px #a6da07, 0 0 50px #a6da07, 0 0 100px #a6da07;
    /*========== Font and typography ==========*/
    /*.5rem = 8px | 1rem = 16px ...*/
    --body-font: "Montserrat", sans-serif;
    --normal-font-size: 1rem;
    /*========== Font weight ==========*/
    --font-regular: 400;
    --font-semi-bold: 600;
    /*========== z index ==========*/
    --z-tooltip: 10;
    --z-fixed: 100;
}
/*=============== BASE ===============*/
* {
    box-sizing: border-box;
}
body {
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    background: var(--body-color);
    min-height: 100vh;
    /* display: flex; */
    justify-content: center;
    align-items: center;
}
ul {
    list-style: none;
}
a {
    text-decoration: none;
}
.button-animation {
    position: relative;
    display: inline-block;
    padding: 20px 30px;
    color: var(--accent-color);
    text-transform: uppercase;
    overflow: hidden;
    transition: 0.5s;
}
.button-animation span {
    position: absolute;
    display: block;
}
.button-animation span:nth-child(1) {
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-color));
    animation: btn-anim1 1s linear infinite;
}
@keyframes btn-anim1 {
    0% {
        left: -100%;
    }
    100%,
    50% {
        left: 100%;
    }
}
.button-animation span:nth-child(2) {
    top: -100%;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent, var(--accent-color));
    animation: btn-anim2 1s linear infinite;
    animation-delay: 0.25s;
}
@keyframes btn-anim2 {
    0% {
        top: -100%;
    }
    100%,
    50% {
        top: 100%;
    }
}
.button-animation span:nth-child(3) {
    bottom: 0;
    right: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(270deg, transparent, var(--accent-color));
    animation: btn-anim3 1s linear infinite;
    animation-delay: 0.5s;
}
@keyframes btn-anim3 {
    0% {
        right: -100%;
    }
    100%,
    50% {
        right: 100%;
    }
}
.button-animation span:nth-child(4) {
    bottom: -100%;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(360deg, transparent, var(--accent-color));
    animation: btn-anim4 1s linear infinite;
    animation-delay: 0.75s;
}
@keyframes btn-anim4 {
    0% {
        bottom: -100%;
    }
    100%,
    50% {
        bottom: 100%;
    }
}
.button-animation:hover {
    background-color: var(--accent-color);
    color: var(--white-color);
    border-radius: 2px;
    box-shadow: var(--box-shadow);
}
.hidden {
    display: none;
}
/* End of Boutton Intégrer le club */

/* Telegram CSS */
/* Telegram CSS */
.telegram-container {
    position: fixed; /* Position fixe pour rester visible */
    bottom: 20px; /* Distance du bas de la fenêtre */
    display: flex;
    align-items: center;
    z-index: 9999; /* Assurez-vous qu'il reste au-dessus des autres éléments */
    cursor: pointer;
    left: 20px; /* Distance par rapport au bord gauche */
}

.telegram-icon {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.telegram-icon:hover {
    animation: bounce 0.5s;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.telegram-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Gère les proportions de l'image */
}

.ch-pending-msg {
    position: absolute;
    right: -4px;
    top: -4px;
    width: 16px;
    height: 16px;
    text-align: center;
    background-color: red;
    color: #fff;
    font-size: 10px;
    line-height: 16px;
    border-radius: 50%;
    z-index: 1101;
}

.telegram-text {
    background-color: #f1f1f1;
    padding: 10px 20px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    font-size: 16px;
    color: #333;
    position: relative;
    margin-left: 10px;
    transition: all 0.3s ease; /* Transition fluide pour largeur et contenu */
    white-space: nowrap;
    max-width: 400px; /* Largeur augmentée pour inclure tout le texte */
    overflow: hidden;
    text-overflow: ellipsis;
}

.telegram-text.short {
    max-width: 150px; /* Largeur réduite pour les textes courts */
    padding: 10px 15px; /* Ajuste les marges internes */
}


.telegram-text::before {
    content: "";
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-width: 10px;
    border-style: solid;
    border-color: transparent #f1f1f1 transparent transparent;
}

.telegram-text.short {
    max-width: 150px; /* Réduit la largeur pour les textes courts */
    padding: 10px 15px; /* Ajuste les marges internes */
}

/* Responsive Design */
@media (max-width: 768px) {
    .telegram-container {
        bottom: 15px; /* Réduit l'écart avec le bas */
        left: 15px; /* Réduit l'écart avec le bord gauche */
        flex-direction: column; /* Change l'alignement en vertical */
        align-items: flex-start; /* Aligne à gauche */
    }

    .telegram-icon {
        width: 40px; /* Réduit la taille de l'icône */
        height: 40px;
    }

    .telegram-icon img {
        width: 100%;
        height: 100%;
    }

    .telegram-text {
        font-size: 14px; /* Réduit la taille du texte */
        padding: 8px 16px; /* Ajuste les marges internes */
        margin-left: 0; /* Supprime l'espacement gauche */
        margin-top: 5px; /* Ajoute un espacement vertical */
        white-space: normal; /* Permet au texte de s'étendre sur plusieurs lignes */
    }
}

@media (max-width: 480px) {
    .telegram-container {
        bottom: 10px; /* Réduit encore l'écart avec le bas */
        left: 10px; /* Réduit encore l'écart avec le bord gauche */
    }

    .telegram-icon {
        width: 35px; /* Réduit davantage la taille de l'icône */
        height: 35px;
    }

    .telegram-icon img {
        width: 100%;
        height: 100%;
    }

    .telegram-text {
        font-size: 12px; /* Réduit davantage la taille du texte */
        padding: 6px 12px; /* Ajuste les marges internes */
    }
}

    /* End Of Telegram CSS */

    /* Accordions element style 4 - section with custom paddings */


/* Styles spécifiques à la section FAQ */
.frequent-questions-section {
    /* Couleur pour le texte principal */
    .tbk__title {
        color: #a6da07 !important;
    }

    /* Couleur pour le symbole en bas du titre */
    .tbk__symbol span {
        background-color: #a6da07 !important;
    }

    /* Couleur pour les icônes des étoiles */
    .ts-pt-testimonials__stars .fas {
        color: #a6da07 !important;
    }

    /* Couleur pour le texte des témoignages */
    .ts-pt-testimonials__text,
    .ts-pt-testimonials__name,
    .ts-pt-testimonials__position {
        color: #a6da07 !important;
    }

    /* Couleur pour les titres des partenaires */
    .ts-pt-partners__title {
        color: #a6da07 !important;
    }

    /* Couleur pour les logos des partenaires */
    .ts-pt-partners__img {
        filter: brightness(0) saturate(100%) invert(45%) sepia(77%) saturate(425%) hue-rotate(64deg) brightness(90%) contrast(88%);
    }
}

    /* End Of Accordions element style 4 - section with custom paddings */


/* Styles spécifiques à la section Partenaires et Témoignages */
.partners-testimonials-section {
    /* Arrière-plan */
    .kl-bg-source__overlay {
        background: rgba(52, 52, 52, 1);
        background: -moz-linear-gradient(left, rgba(52, 52, 52, 1) 0%, rgba(52, 52, 52, 1) 100%);
        background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(52, 52, 52, 1)), color-stop(100%, rgba(52, 52, 52, 1)));
        background: -webkit-linear-gradient(left, rgba(52, 52, 52, 1) 0%, rgba(52, 52, 52, 1) 100%);
        background: -o-linear-gradient(left, rgba(52, 52, 52, 1) 0%, rgba(52, 52, 52, 1) 100%);
        background: -ms-linear-gradient(left, rgba(52, 52, 52, 1) 0%, rgba(52, 52, 52, 1) 100%);
        background: linear-gradient(to right, rgba(52, 52, 52, 1) 0%, rgba(52, 52, 52, 1) 100%);
    }

    /* Couleur du texte principal */
    .tbk__title {
        color: #ffffff;
    }

    /* Couleur du symbole sous le titre */
    .tbk__symbol span {
        background-color: #ffffff;
    }

    /* Couleur du texte des témoignages */
    .ts-pt-testimonials__text,
    .ts-pt-testimonials__name,
    .ts-pt-testimonials__position {
        color: #a6da07;
    }

    /* Couleur des étoiles */
    .ts-pt-testimonials__stars .fas {
        color: #ffd700; /* Jaune doré */
    }

    /* Styles des logos des partenaires */
    .ts-pt-partners__img {
        /*filter: none; /* Rétablir les couleurs normales si nécessaire */
    }
}

/* Partie Formulaire Connexion */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&display=swap');

.box {
    position: relative;
    width: 380px;
    height: 450px;
    background: #1c1c1c;
    border-radius: 8px;
    overflow: hidden;
    padding: 10px;
    margin: 0 auto; /* Centrer horizontalement */
}

/* Media Queries */

/* Pour les grands écrans */
@media (min-width: 768px) {
    .box {
        width: 500px;
        margin-left: 50px;
    }

    .box form {
        padding: 50px 40px;
    }
}

/* Pour les appareils mobiles en portrait */
@media (max-width: 768px) and (orientation: portrait) {
    /* Réajuster la largeur et s'assurer qu'il est centré */
    .box {
        width: 90%; /* Utilise 90% de la largeur de l'écran */
        min-height: 400px; /* Assurez-vous qu'il y ait une hauteur minimale pour éviter qu'il ne soit trop "plat" */
        margin: 20px auto; /* Centrer horizontalement */
    }

    .box form {
        padding: 25px 20px; /* Réduit les marges internes pour mieux utiliser l'espace */
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* Aligne les éléments depuis le haut */
    }

    .box form h2 {
        font-size: 1.2em;
        margin-bottom: 15px;
        text-align: center; /* Centrer le titre */
    }

    .box form .inputBox {
        width: 100%; /* S'assurer que les champs occupent toute la largeur */
        margin-top: 20px;
    }

    .box form .inputBox input {
        font-size: 1.1em;
        padding: 15px 10px; /* Assurez-vous que les champs ont suffisamment d'espace */
    }

    .box form .inputBox span {
        font-size: 1em;
    }

    .box form .links {
        flex-direction: column; /* Empile les liens verticalement */
        align-items: center; /* Centre les liens */
        margin-top: 15px;
    }

    .box form .links a {
        font-size: 1em;
        margin: 10px 0; /* Ajoute un espacement vertical */
    }

    #submit {
        padding: 12px 30px;
        font-size: 1.1em;
        width: 100%; /* Le bouton occupe toute la largeur */
        margin-top: 15px;
    }
}

/* Pour les appareils mobiles en paysage */
@media (max-width: 768px) and (orientation: landscape) {
    .box {
        width: 60%;
        margin-left: auto;
        margin-right: auto;
    }

    .box form {
        padding: 30px 20px;
    }

    .box form h2 {
        font-size: 1.2em;
    }

    .box form .inputBox input {
        font-size: 1.2em;
    }

    .box form .links {
        flex-direction: row; /* Aligne les liens horizontalement */
    }

    .box form .links a {
        font-size: 1em;
        margin: 0 10px;
    }

    #submit {
        padding: 12px 35px;
        font-size: 1.1em;
    }
}

/* Fin des Media Queries */

.box::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 380px;
    height: 420px;
    background: linear-gradient(0deg, transparent, transparent, #a6da07, #d4ff5e, #a6da07);
    z-index: 1;
    transform-origin: bottom right;
    animation: animate 6s linear infinite;
}

.box::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 380px;
    height: 420px;
    background: linear-gradient(0deg, transparent, transparent, #a6da07, #d4ff5e, #a6da07);
    z-index: 1;
    transform-origin: bottom right;
    animation: animate 6s linear infinite;
    animation-delay: -3s;
}

.borderLine::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 380px;
    height: 420px;
    background: linear-gradient(0deg, transparent, transparent, #a6da07, #d4ff5e, #a6da07);
    z-index: 1;
    transform-origin: bottom right;
    animation: animate 6s linear infinite;
    animation-delay: -1.5s;
}

.borderLine::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 380px;
    height: 420px;
    background: linear-gradient(0deg, transparent, transparent, #a6da07, #d4ff5e, #a6da07);
    z-index: 1;
    transform-origin: bottom right;
    animation: animate 6s linear infinite;
    animation-delay: -4.5s;
}

@keyframes animate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.box form {
    position: absolute;
    inset: 4px;
    background: #222;
    padding: 50px 40px;
    border-radius: 8px;
    z-index: 2;
    display: flex;
    flex-direction: column;
}

.box form h2 {
    color: #fff;
    font-weight: 500;
    text-align: center;
    letter-spacing: 0.1em;
}

.box form .inputBox {
    position: relative;
    width: 300px;
    margin-top: 35px;
}

.box form .inputBox input {
    position: relative;
    width: 100%;
    padding: 20px 10px 10px;
    background: transparent;
    outline: none;
    border: none;
    box-shadow: none;
    color: #23242a;
    font-size: 1em;
    letter-spacing: 0.05em;
    transition: 0.5s;
    z-index: 10;
}

.box form .inputBox span {
    position: absolute;
    left: 0;
    padding: 20px 0px 10px;
    pointer-events: none;
    color: #8f8f8f;
    font-size: 1em;
    letter-spacing: 0.05em;
    transition: 0.5s;
}

.box form .inputBox input:valid ~ span,
.box form .inputBox input:focus ~ span {
    color: #fff;
    font-size: 0.75em;
    transform: translateY((-34px));
}

.box form .inputBox i {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    transition: 0.5s;
    pointer-events: none;
}

.box form .inputBox input:valid ~ i,
.box form .inputBox input:focus ~ i {
    height: 44px;
}

.box form .links {
    display: flex;
    justify-content: space-between;
}

.box form .links a {
    margin: 10px 0;
    font-size: 0.75em;
    color: #8f8f8f;
    text-decoration: none;
}

.box form .links a:hover,
.box form .links a:nth-child(2) {
    color: #fff;
}

#submit {
    border: none;
    outline: none;
    padding: 9px 25px;
    cursor: pointer;
    font-size: 0.9em;
    border-radius: 4px;
    font-weight: 600;
    width: 100px;
    margin-top: 10px;
}

#submit:active {
    opacity: 0.8;
}

/* End of Formulaire de connexion */

/* bouton rejoindre le club */

.btn-element.btn-fullcolor {
    color: #fff !important;
}

/* End of bouton rejoindre le club */

/* Bordure noire fine en tout temps pour hoverBorder */
.latest_posts .hoverBorder,
.hoverBorder {
    border: 1px solid #161616 !important;
    transition: border-color 0.18s cubic-bezier(.49,.36,.32,1.36);
}
.latest_posts .hoverBorder:hover,
.hoverBorder:hover {
    border-color: #161616 !important;
    box-shadow: 0 0 0 4px #a6da07 !important; /* Vert fluo en box-shadow au hover */
}