/*custom CSS*/
.custom-whatsapp-footer {
  position: fixed !important;
  bottom: 100px !important;
  right: 20px !important;
  z-index: 9999 !important;
}

.custom-whatsapp-footer img {
  width: 60px !important;
  height: 60px !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2) !important;
  display: block !important;
}

.kickx-newsletter {
  max-width: 420px;
  margin: 40px 0 40px 40px;
  color: #000;
  font-family: 'Arial', sans-serif;
  text-align: left;
}

.kickx-newsletter h3 {
  font-size: 24px;
  color: #e60000; /* Rouge Kickx */
  margin-bottom: 8px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.kickx-newsletter p {
  font-size: 14px;
  color: #333;
  margin-bottom: 18px;
}

.kickx-newsletter form {
  display: flex;
}

.kickx-newsletter input[type="email"] {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid #e60000;
  font-size: 14px;
  outline: none;
  background: #fff;
}

.kickx-newsletter button {
  background-color: #e60000;
  color: white;
  border: none;
  padding: 12px 20px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s;
}

.kickx-newsletter button:hover {
  background-color: #cc0000;
}

.block_newsletter {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px 0;
}

.block_newsletter .block_content {
  text-align: left;
}

.block_newsletter form {
  display: flex;
  gap: 0;
}

.block_newsletter input[type="email"] {
  flex: 1;
  padding: 12px;
  border-radius: 0;
  border: 1px solid #ccc;
}

.block_newsletter button {
  border-radius: 0;
}

.menu-promos > a {
  color: #e3342f !important; /* Rouge Kickx */
  font-weight: bold;
}

.leo-slideshow .owl-item {
  opacity: 1 !important;
  transition: none !important;
}

.leo-slideshow .owl-stage-outer {
  animation: none !important;
}

a.open-review-form {
  color: transparent !important;
  position: relative;
  display: inline-block;
  background: #f1f1f1; /* couleur de fond optionnelle */
  padding: 8px 16px;
  border-radius: 25px;
  font-size: 14px;
  transition: background 0.3s ease;
}

a.open-review-form:hover {
  background: #e0e0e0; /* léger effet au survol */
}

a.open-review-form::after {
  content: "Donner votre avis";
  color: #000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-weight: 500;
}
.icon-wrapper svg {
  width: 60px;
  height: 60px;
  display: block;
  margin: 0 auto 20px auto;
  transition: transform 0.3s ease;
  /* ❌ ne PAS mettre fill ici */
}
.icon-wrapper svg:hover {
  transform: scale(1.1);
}
.h-logo img {
  max-height: 80px !important; /* à adapter : 80px, 100px, etc. */
  height: auto;
  width: auto;
}
.iview-strip {
  display: none !important;
}
.h-logo {
  max-height: 100px !important;
}

/* Cacher boutons PayPal dans le panier uniquement (colonne de droite) */
body#cart .paypal-shortcut-signup,
body#cart .paypal-bnpl-signup,
body#cart [data-paypal-source-page="cart"] {
  display: none !important;
}
/* Masquer complètement les blocs langue et devise si une seule option */
.language-selector li + li,
.currency-selector li + li {
  display: list-item !important;
}

/* Si une seule langue/devise, cacher tout le bloc */
.language-selector li:not(:nth-child(2)) ~ li,
.language-selector li:first-child:last-child,
.currency-selector li:not(:nth-child(2)) ~ li,
.currency-selector li:first-child:last-child {
  display: none !important;
}

.language-selector,
.currency-selector {
  display: none !important;
}
/* Ajout d'espacement autour du bloc newsletter */
.block_newsletter {
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}
.block_newsletter h4 {
  margin-bottom: 15px !important;
}

.block_newsletter p {
  margin-bottom: 10px !important;
}
.myacc-select.hidden {
  display: block !important;
}

.myacc-mobile-dropdown {
  display: block;
  width: 100%;
  padding: 8px;
  font-size: 14px;
  margin-bottom: 15px;
}

.myacc-select {
  width: 100%;
  max-width: 350px;
  margin: 20px auto;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 6px;
  display: none;
}

.myacc-select.hidden {
  display: none !important;
}

@media (max-width: 991px) {
  .myacc-select {
    display: block !important;
  }

  .myacc_left a {
    display: none;
  }
}
.custom-account-links {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 15px;
  border-radius: 8px;
  background: #f9f9f9;
  border: 1px solid #ddd;
}

.custom-account-links a {
  display: block;
  background: white;
  padding: 12px 16px;
  border-radius: 6px;
  color: #333;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.custom-account-links a:hover {
  background: #efefef;
  color: #000;
}
/* themes/at_movic/assets/css/custom.css */
@media (max-width: 767px) {
  #footer_account_list.collapse {
    display: block !important; /* Affiche toujours le menu */
    height: auto !important;
  }
  
  .accordion_small_screen .title[data-toggle="collapse"],
  .material-icons.add, 
  .material-icons.remove {
    display: none !important; /* Cache le bouton toggle */
  }
}


/* -------- Desktop : on garde tout tel quel -------- */
@media screen and (min-width: 768px) {
  .myacc_left {
    display: block !important;
  }
  .myacc-select {
    display: none !important;
  }
}

@media screen and (max-width: 767px) {
  .myacc_left {
    display: none !important;
    background: #fff;
    padding: 10px;
    border: 1px solid #ddd;
    margin-top: 10px;
  }

  .myacc_left.active {
    display: block !important;
  }

  .myacc_left a {
    display: block;
    padding: 10px;
    border-bottom: 1px solid #eee;
    color: #000;
    text-decoration: none;
    font-weight: 500;
  }

  .myacc_left a:hover {
    background: #f9f9f9;
  }

  .myacc-select {
    display: block !important;
    width: 100%;
    padding: 12px;
    background: #f1f1f1;
    border: 1px solid #ccc;
    font-weight: bold;
    cursor: pointer;
    text-align: left;
    font-size: 16px;
    margin-bottom: 10px;
  }
}


#account-menu {
  position: fixed;
  top: 80px;
  left: 0;
  height: 100%;
  width: 240px;
  background: #f8f8f8;
  border-right: 1px solid #ddd;
  padding: 20px 15px;
  box-shadow: 2px 0 5px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  z-index: 1000;
}

.account-menu-toggle {
  display: none;
  background: #f8f8f8;
  color: #333;
  border: 1px solid #ccc;
  padding: 8px 12px;
  margin: 15px;
  cursor: pointer;
}

.account-menu-title {
  font-weight: bold;
  margin-bottom: 1rem;
}

.account-menu-link {
  display: flex;
  align-items: center;
  color: #333;
  text-decoration: none;
  padding: 10px 5px;
  border-bottom: 1px solid #eee;
}

.account-menu-link i {
  margin-right: 10px;
}

.account-menu-link.active {
  font-weight: bold;
  background: #eaeaea;
}

/* Mobile */
@media (max-width: 767px) {
  #account-menu {
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background: #fff;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
  }
  #account-menu.open {
    transform: translateY(0);
  }
  .account-menu-toggle {
    display: block;
  }
}

/***** Kickx – Page Mon Compte (my-account) *****/
/* Portée stricte à la page compte pour éviter les effets de bord */
body#my-account, body.page-my-account {}

/* === 1) Menu select (mobile) === */
body#my-account .myacc_mobile_menu,
body.page-my-account .myacc_mobile_menu {
  display: block;
  margin-bottom: 16px;
}

body#my-account .myacc_mobile_menu select,
body.page-my-account .myacc_mobile_menu select {
  width: 100%;
  height: 44px;
  border-radius: 10px;
  border: 1px solid #e5e5e5;
  padding: 0 12px;
  font-size: 16px;
  background: #fff;
}

/* === 2) Sidebar (desktop) – style propre === */
body#my-account .myacc_left,
body.page-my-account .myacc_left {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 16px;
}

/* Liens du menu latéral */
body#my-account .myacc_left .account-menu-link,
body.page-my-account .myacc_left .account-menu-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: #222;
  border: 1px solid transparent;
  margin-bottom: 6px;
}

body#my-account .myacc_left .account-menu-link:hover,
body.page-my-account .myacc_left .account-menu-link:hover {
  background: #f7f7f7;
  border-color: #eee;
}

body#my-account .myacc_left .account-menu-link.active,
body.page-my-account .myacc_left .account-menu-link.active {
  background: #111;
  color: #fff;
}

/* === 3) Layout responsive === */
/* Mobile (<992px) : on cache la sidebar et on étire le contenu */
@media (max-width: 991.98px) {
  body#my-account .myacc_left,
  body.page-my-account .myacc_left {
    display: none !important;
  }

  body#my-account .account-container .account-content,
  body.page-my-account .account-container .account-content {
    max-width: 100% !important;
    flex: 0 0 100% !important;
    width: 100% !important;
  }
}

/* Desktop (≥992px) : on cache le select et on montre la sidebar */
@media (min-width: 992px) {
  body#my-account .myacc_mobile_menu,
  body.page-my-account .myacc_mobile_menu {
    display: none !important;
  }

  body#my-account .myacc_left,
  body.page-my-account .myacc_left {
    display: block !important;
  }
}

/* === 4) Sécurité : neutraliser l’ancien menu “drawer” s’il traine encore === */
body#my-account #account-menu,
body#my-account .account-menu-toggle,
body.page-my-account #account-menu,
body.page-my-account .account-menu-toggle {
  display: none !important;
}

@media (max-width: 575.98px) {
  /* Largeur et centrage */
  #apcModal_1 .modal-dialog {
    width: 85% !important;
    max-width: 360px !important;
    margin: 10px auto !important;
  }

  /* Moins d'espace interne */
  #apcModal_1 .newsletter-section {
    padding: 12px !important;
  }

  /* Titre plus compact */
  #apcModal_1 .newsletter-section h2,
  #apcModal_1 .newsletter-section h3 {
    font-size: 1.2rem !important;
    margin-bottom: 8px !important;
  }

  /* Texte plus petit et moins espacé */
  #apcModal_1 .newsletter-section p {
    font-size: 0.85rem !important;
    margin-bottom: 8px !important;
    line-height: 1.3 !important;
  }

  /* Champs et boutons plus compacts */
  #apcModal_1 input[type="email"] {
    font-size: 0.85rem !important;
    padding: 7px 9px !important;
    margin-bottom: 8px !important;
  }

  #apcModal_1 button {
    font-size: 0.85rem !important;
    padding: 7px 12px !important;
  }


  /* Cases à cocher rapprochées */
  #apcModal_1 label {
    font-size: 0.8rem !important;
    margin-right: 8px !important;
  }

  /* Logo en bas plus petit */
  #apcModal_1 img {
    max-width: 70px !important;
  }
}
/* Page Mon compte uniquement */
body#my-account .myacc_left .myacc-select,
body#my-account .myacc_left select.myacc-select,
body#my-account .myacc_left .account-menu-toggle { 
  display: none !important;
}

/* Au cas où un item vide reste dans la liste gauche */
body#my-account .myacc_left .links > *:empty {
  display: none !important;
}
/* Supprime totalement le select vide du flux */
.myacc_left .myacc-select { 
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
/* Si un bloc “groupe” d’éléments ajoute une marge avant “Mes alertes” */
.myacc_left > * { margin-bottom: 0; }
.myacc_left li { margin: 0; }
.myacc_left li + li { margin-top: .5rem; } /* spacing propre entre items */

/* vire complètement le select fantôme */
.myacc_left > select.myacc-select.hidden,
.myacc_left > select.myacc-select,
.myacc_left .myacc-select,
.myacc-select.hidden {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}


.myacc_left li { margin: 0 !important; }
.myacc_left li + li { margin-top: .5rem !important; } /* espacement propre */


/* 1) Le <select> fantôme : hors flux */
.myacc_left select.myacc-select { display:none !important; }

/* 2) Annule TOUTES les marges/paddings des enfants directs */
.myacc_left > * { margin:0 !important; padding:0 !important; }

/* 3) Si le thème met des espacements sur des listes/blocs, on écrase */
.myacc_left ul,
.myacc_left li,
.myacc_left .list-group,
.myacc_left .block,
.myacc_left .group,
.myacc_left .account-menu,
.myacc_left .account-menu-title { margin:0 !important; padding:0 !important; border:0 !important; }

/* 4) Remets un espacement propre et constant entre items */
.myacc_left { display:flex; flex-direction:column; gap:8px !important; }
.myacc_left li + li { margin-top:0 !important; } /* au cas où */
/* >>> À mettre tout à la fin du custom.css <<< */
.myacc_left > select.myacc-select.hidden,
.myacc_left > select.myacc-select {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}


/* Masquer le lien "Mes commandes" dès le 1er paint (pas de flash) */

/* Masquer aussi l’option du select mobile si elle existe */

/* Et corrige la contradiction que tu avais : */
.myacc-select.hidden { display:none !important; }  /* (pas block) */
.myacc_left { gap:0 !important; } /* tu avais gap:8px qui crée un vide */


/* 1) Supprime toute apparition de l’ancien toggle mobile (select OU button) */
.myacc-select { display:none !important; }

/* 2) Empêche tout lien vide de réserver de la place */
.myacc_left .links a:empty { 
  display: none !important; 
  height: 0 !important; 
  padding: 0 !important; 
  margin: 0 !important; 
  border: 0 !important;
}



/* 4) Ne force PAS un flex hasardeux : remet le container en bloc propre */
.myacc_left .links { 
  display: block !important; 
  
}

/* 5) (optionnel) style propre si tu veux des colonnes en mobile */
@media (max-width: 767px) {
  .myacc_left .links a { display:block; }
}


/* Catégorie (mobile) : centrer tri + bouton FILTRE */
@media (max-width: 767px) {
  body#category #js-product-list-top .products-selection,
  body#category #js-product-list-top .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    text-align: center;
  }

  /* Bouton FILTRE (quel que soit le sélecteur utilisé par le thème) */
  body#category #js-product-list-top .open-filters,
  body#category #js-product-list-top .js-search-filters-toggle,
  body#category #js-product-list-top #search_filter_toggler,
  body#category #js-product-list-top .btn[data-target="#search_filters"],
  body#category #js-product-list-top button[data-target="#search_filters"] {
    display: inline-flex;
    margin: 0 auto;
  }

  /* Tri “Pertinence” : évite de prendre toute la largeur */
  body#category #js-product-list-top .products-sort-order,
  body#category #js-product-list-top .sort-by {
    width: auto;
    margin: 0 auto;
  }
}
/* Kickx – cacher la newsletter par défaut, on la montrera en JS */
.apc-popup,
.newsletter-popup,
#newsletter-popup,
.popup-newsletter,
.apc-modal,
.apc_newsletter {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
/* Mon compte : forcer MAJUSCULES à gauche + à droite */
.myacc_left .links a,
.myacc_left .links a span,
#content.myacc_content .links a,
#content.myacc_content .links a span,
.myacc_name {
  text-transform: capitalize !important;
  letter-spacing: .02em;
}

/* Optionnel: uniformiser les libellés de la liste droite */
#content.myacc_content .links a {
  display: block;
  padding: 8px 12px;
}


/* ====== NOUVEAUX PRODUITS : aligner tri + bouton FILTRE comme sur Catégorie ====== */
@media (max-width: 767px) {
  body#new-products #js-product-list-top .products-selection,
  body#new-products #js-product-list-top .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    text-align: center;
  }

  /* Bouton FILTRE (quel que soit le sélecteur utilisé par le thème) */
  body#new-products #js-product-list-top .open-filters,
  body#new-products #js-product-list-top .js-search-filters-toggle,
  body#new-products #js-product-list-top #search_filter_toggler,
  body#new-products #js-product-list-top .btn[data-target="#search_filters"],
  body#new-products #js-product-list-top button[data-target="#search_filters"] {
    display: inline-flex;
    margin: 0 auto;
  }

  /* Tri “Pertinence” : largeur auto, pas full-width */
  body#new-products #js-product-list-top .products-sort-order,
  body#new-products #js-product-list-top .sort-by {
    width: auto;
    margin: 0 auto;
  }
}

/* (Optionnel) Harmoniser aussi en desktop si besoin */
body#new-products #js-product-list-top .products-sort-order select,
body#new-products #js-product-list-top .products-sort-order .dropdown-toggle {
  max-width: 320px;
}

/* Évite que le dropdown passe sous d’autres éléments (Android/MIUI) */
body#new-products .products-sort-order .dropdown-menu {
  z-index: 1051;
}

.custom-google-review-badge{display:none!important;visibility:hidden!important;pointer-events:none!important;}


#thumb-gallery.product-thumb-images { display:flex !important; gap:8px; flex-wrap:wrap; }
#thumb-gallery img { max-width:80px; height:auto; cursor:pointer; display:block; }
#thumb-gallery.product-thumb-images {
  display: flex !important;
  gap: 12px;              /* espace entre miniatures */
  flex-wrap: wrap;
  justify-content: flex-start;
}

#thumb-gallery img {
  max-width: 120px;       /* augmente la largeur des thumbs */
  height: auto;
  cursor: pointer;
  display: block;
  border: 2px solid transparent;   /* petit style au choix */
  transition: transform 0.2s, border-color 0.2s;
}

#thumb-gallery img:hover {
  transform: scale(1.05);
  border-color: #e60000;  /* rouge Kickx au survol */
}

#thumb-gallery .thumb-container.active img {
  border-color: #000;     /* met en avant la vignette active */
}
/* Cache complètement le texte existant (HT, etc.) */
.tax-shipping-delivery-label {
  font-size: 0 !important;   /* rend invisible le texte */
}

/* Affiche "TTC" à la place */
.tax-shipping-delivery-label::after {
  content: "TTC";
  font-size: 14px !important; /* taille normale du texte */
  color: #000;                /* adapte la couleur si besoin */
}
/* Forcer l'affichage du bouton retour haut */
#back-top,
.progress-wrap {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;

  position: fixed !important;
  bottom: 80px !important;   /* au-dessus de WhatsApp */
  right: 20px !important;
  z-index: 99999 !important;

  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #e60000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M12 4l-8 8h5v8h6v-8h5z'/%3E%3C/svg%3E") center/50% no-repeat;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  transition: opacity 0.3s;
}

/* Effet hover */
#back-top:hover,
.progress-wrap:hover {
  background-color: #cc0000 !important;
}
/* WhatsApp (reste à right:20px; z-index:9999) */
.custom-whatsapp-footer { right:20px; bottom:20px; z-index:9999 !important; }

/* Back-to-top : à gauche de WhatsApp */
#back-top, .progress-wrap {
  position: fixed !important;
  bottom: 20px !important;
  right: 88px !important;          /* décale pour ne pas se superposer */
  width: 48px; height: 48px;
  border-radius: 50%;
  background: #e60000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M12 4l-8 8h5v8h6v-8h5z'/%3E%3C/svg%3E") center/50% no-repeat;
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
  cursor: pointer;
  z-index: 9998 !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}
#back-top:hover, .progress-wrap:hover { background-color:#cc0000 !important; }

/* lissage du scroll des ancres (au cas où) */
html { scroll-behavior: smooth; }

/* léger ajustement sur mobile */
@media (max-width: 575px){
  #back-top, .progress-wrap { right: 76px !important; width:44px; height:44px; }
}
/* On cache le bouton du thème pour éviter tout doublon */
#back-top, .progress-wrap { display: none !important; }

/* Bouton Kickx “Back to top” (juste sous WhatsApp) */
#kickx-backtop{
  position: fixed;
  /* WhatsApp = 60px (d’après ton CSS) + 12px d’écart + 20px de marge bas */
  bottom: calc(20px + 60px + 12px);
  right: 20px;

  width: 52px; height: 52px;
  border: none; border-radius: 999px;
  background: #e60000;           /* fond rouge */
  color: #fff;
  display: none;                  /* sera affiché via JS quand on scrolle */
  align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  z-index: 9998;                  /* sous le WhatsApp qui est à 9999 */
  cursor: pointer;
}
#kickx-backtop:hover { filter: brightness(0.92); }
#kickx-backtop svg { width: 22px; height: 22px; display:block; }


/* Défilement doux des liens ancre */
html { scroll-behavior: smooth; }

/* Bouton retour haut (thème = #back-top.progress-wrap) : style rond blanc, bord noir */
#back-top,
.progress-wrap{
  position: fixed;
  bottom: 20px;
  right: 20px;                 /* passe à 88px si tu veux le mettre à gauche de WhatsApp */
  width: 48px; height: 48px;
  background: #fff;
  border: 2px solid #111;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  display: none;               /* masqué par défaut, on affiche via .is-visible */
  align-items: center;
  justify-content: center;
  z-index: 9998;
  cursor: pointer;
  text-decoration: none;
}

/* ⚠️ On neutralise le “progress circle” du thème */
#back-top svg,
.progress-wrap svg { display: none !important; }

/* On enlève toute pseudo-flèche du thème s'il y en a */
#back-top::before, #back-top::after,
.progress-wrap::before, .progress-wrap::after { content: none !important; }

/* Notre petite flèche noire */
#back-top > i,           /* si jamais une icône existe, on ne l’utilise pas */
.progress-wrap > i { display:none !important; }

#back-top .arrow,
.progress-wrap .arrow {  /* on posera un span.arrow en JS si besoin */
  width: 12px; height: 12px;
  border-left: 2px solid #111;
  border-bottom: 2px solid #111;
  transform: rotate(135deg);   /* ↑ */
  margin-top: 2px;
}

/* Affichage quand on scrolle */
#back-top.is-visible,
.progress-wrap.is-visible { display: flex; }

#back-top:hover,
.progress-wrap:hover { background: #f8f8f8; }
// === BOUTON RETOUR HAUT KICKX - CODE SIMPLE ET EFFICACE ===

// Attendre que le document soit complètement chargé
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', initBackToTop);
} else {
  initBackToTop();
}

function initBackToTop() {
  // Créer le bouton
  var backButton = document.createElement('div');
  backButton.id = 'kickx-backtop-btn';
  document.body.appendChild(backButton);
  
  // Fonction pour afficher/masquer le bouton
  function toggleBackToTop() {
    if (window.scrollY > 300) {
      backButton.classList.add('show');
    } else {
      backButton.classList.remove('show');
    }
  }
  
  // Fonction pour remonter en haut
  function scrollToTop() {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  }
  
  // Événements
  window.addEventListener('scroll', toggleBackToTop);
  backButton.addEventListener('click', scrollToTop);
  
  // Vérifier l'état initial
  toggleBackToTop();
}