/* Bareshoes.fr — Bandeau de l'accueil (module bareshoes_slider).
   L'image ordinateur fait 1903 × 680 « unités » : la taille et la position des textes sont
   proportionnelles à la largeur du bandeau (unités de conteneur cqw), donc identiques sur tous
   les écrans d'ordinateur et dans l'aperçu du back-office.
   Téléphone (moins de 768 px) : soit les textes passent sous l'image, sur un bandeau de couleur
   (« dessous »), soit une image 4:5 dédiée les reçoit à leurs positions téléphone (« image »). */

.bhs-sl { position: relative; width: 100%; overflow: hidden; background: var(--bhs-sl-fond, transparent); }
.bhs-sl__piste {
  display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; outline: none;
}
.bhs-sl__piste::-webkit-scrollbar { display: none; }
.bhs-sl__slide { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; min-width: 0; }

.bhs-sl__lien { position: relative; display: block; color: inherit; text-decoration: none; container-type: inline-size; height: 100%; }
.bhs-sl__lien:hover, .bhs-sl__lien:focus { text-decoration: none; color: inherit; }
.bhs-sl__lien:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.bhs-sl__visuel { position: relative; }
.bhs-sl__visuel picture { display: block; }
.bhs-sl .bhs-sl__image { display: block; width: 100%; height: auto; aspect-ratio: 1903 / 680; object-fit: cover; max-width: none; }

/* --- Textes : position et taille proportionnelles au bandeau (ordinateur) --- */
.bhs-sl__textes { position: absolute; inset: 0; pointer-events: none; }
.bhs-sl .bhs-sl__el {
  position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  margin: 0; padding: 0; display: block; white-space: nowrap; pointer-events: auto;
  font-size: calc(var(--t) * 100cqw / 1903);
  letter-spacing: var(--ls, 0); line-height: var(--lh, 1.15);
  text-shadow: var(--ombre, none); border: 0; background-clip: padding-box;
}
.bhs-sl .bhs-sl__el--gauche { text-align: left; transform: none; }
.bhs-sl .bhs-sl__el--centre { text-align: center; transform: translateX(-50%); }
.bhs-sl .bhs-sl__el--droite { text-align: right; transform: translateX(-100%); }
.bhs-sl__ligne { display: block; }
/* Lignes 2 et 3 du titre décalées (en % de la largeur du bandeau) */
.bhs-sl__el--titre .bhs-sl__ligne + .bhs-sl__ligne { margin-left: calc(var(--ind, 0) * 1cqw); }
.bhs-sl .bhs-sl__el--btn {
  padding: .5em 2.3em .54em; line-height: 1.1; border-radius: 0; margin-top: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 0;
  background-color: var(--btn-fond, #141414); color: var(--btn-texte, #fff);
  background-image: linear-gradient(var(--btn-texte, #fff), var(--btn-texte, #fff));
  background-repeat: no-repeat; background-position: left center; background-size: 0% 100%;
  transition: background-size .35s cubic-bezier(.4, 0, .2, 1), color .3s ease, gap .3s ease, padding .3s ease, scale .15s ease;
}
/* Effet « signature du site » (même geste que « Ajouter au panier ») : au survol du bouton,
   la couleur du texte remplit le bouton de gauche à droite, le texte prend la couleur du bouton
   et un chevron plein apparaît. Sur écran tactile : léger battement toutes les 4 s. */
.bhs-sl .bhs-sl__el--btn::after {
  content: ""; display: inline-block; flex: none; width: 0; height: .8em; opacity: 0; transform: translateX(-.4em);
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M5%203h6.5l9%209-9%209H5l9-9z%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M5%203h6.5l9%209-9%209H5l9-9z%22/%3E%3C/svg%3E") center / contain no-repeat;
  transition: width .3s ease, opacity .3s ease, transform .3s ease;
}
/* L'effet se déclenche sur le bouton lui-même (pas sur toute l'image), et le bouton garde exactement
   la même largeur : le chevron et son espace (.5em + .8em) sont pris sur les marges intérieures
   (2,3em → 1,65em de chaque côté), donc rien ne bouge sous la souris. */
@media (hover: hover) and (pointer: fine) {
  .bhs-sl .bhs-sl__el--btn:hover, .bhs-sl .bhs-sl__lien:focus-visible .bhs-sl__el--btn {
    background-size: 100% 100%; color: var(--btn-fond, #141414); gap: .5em; padding-left: 1.65em; padding-right: 1.65em;
  }
  .bhs-sl .bhs-sl__el--btn:hover::after, .bhs-sl .bhs-sl__lien:focus-visible .bhs-sl__el--btn::after {
    width: .8em; opacity: 1; transform: translateX(0);
  }
  .bhs-sl .bhs-sl__el--btn:active { scale: .98; }
}
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  .bhs-sl a.bhs-sl__lien .bhs-sl__el--btn { animation: bhs-sl-battement 4s ease-in-out 2s infinite; }
}
@keyframes bhs-sl-battement { 0%, 80%, 100% { scale: 1; } 88% { scale: 1.06; } 94% { scale: .99; } }

/* --- Commandes --- */
.bhs-sl__fleche {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border: 0; border-radius: 50%; padding: 0; cursor: pointer;
  background: rgba(255, 255, 255, .78); color: #141414; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .25s ease, background .2s ease;
}
.bhs-sl:hover .bhs-sl__fleche, .bhs-sl__fleche:focus-visible { opacity: 1; }
.bhs-sl__fleche:hover { background: #fff; }
.bhs-sl__fleche--prec { left: 18px; }
.bhs-sl__fleche--suiv { right: 18px; }
.bhs-sl__fleche svg, .bhs-sl__pause svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bhs-sl__commandes {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 3;
  display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 999px;
  background: rgba(20, 20, 20, .28);
}
.bhs-sl__points { display: flex; gap: 8px; }
.bhs-sl__point { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .55); cursor: pointer; transition: width .25s ease, background .25s ease; }
.bhs-sl__point[aria-current="true"] { width: 22px; border-radius: 5px; background: #fff; }
.bhs-sl__pause { width: 24px; height: 24px; padding: 0; border: 0; background: transparent; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.bhs-sl__pause svg { width: 16px; height: 16px; }
.bhs-sl__pause .i-lecture { display: none; fill: currentColor; stroke: none; }
.bhs-sl--arret .bhs-sl__pause .i-pause { display: none; }
.bhs-sl--arret .bhs-sl__pause .i-lecture { display: inline; }
.bhs-sl__fleche:focus-visible, .bhs-sl__point:focus-visible, .bhs-sl__pause:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px #141414; }

/* --- Téléphone --- */
@media (max-width: 767px) {
  .bhs-sl__fleche { display: none; }
  .bhs-sl__commandes { bottom: 10px; }

  /* Mode « image téléphone » : image 4:5, textes à leurs positions téléphone. */
  .bhs-sl__slide--image .bhs-sl__image { aspect-ratio: 4 / 5; }
  .bhs-sl .bhs-sl__slide--image .bhs-sl__el {
    left: calc(var(--xm) * 1%); top: calc(var(--ym) * 1%);
    font-size: calc(var(--tm) * 100cqw / 390);
  }
  .bhs-sl__slide--image .bhs-sl__el--titre .bhs-sl__ligne + .bhs-sl__ligne { margin-left: 0; }

  /* Mode « dessous » : image entière, puis les textes empilés et centrés sur le bandeau de couleur. */
  .bhs-sl__slide--dessous .bhs-sl__lien { background: var(--bande, #1c2420); }
  .bhs-sl__slide--dessous .bhs-sl__textes {
    position: static; display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 22px 20px 46px; text-align: center;
  }
  .bhs-sl .bhs-sl__slide--dessous .bhs-sl__el {
    position: static; transform: none; text-align: center; white-space: normal;
    font-size: calc(var(--tm) * 100cqw / 390);
  }
  .bhs-sl__slide--dessous .bhs-sl__el--titre .bhs-sl__ligne { display: inline; }
  .bhs-sl__slide--dessous .bhs-sl__el--titre .bhs-sl__ligne + .bhs-sl__ligne { margin-left: .28em; }
  .bhs-sl__slide--dessous .bhs-sl__el--btn { margin-top: 4px; }
  .bhs-sl .bhs-sl__el--sans-mobile { display: none; }
  .bhs-sl__slide--dessous ~ .bhs-sl__commandes, .bhs-sl:has(.bhs-sl__slide--dessous) .bhs-sl__commandes { bottom: 10px; }
}


/* Aperçu « téléphone » du back-office (écran large) : mêmes règles, sous la classe .bhs-sl--mobile. */
.bhs-sl--mobile .bhs-sl__fleche { display: none; }
.bhs-sl--mobile .bhs-sl__commandes { bottom: 10px; }
.bhs-sl--mobile .bhs-sl__slide--image .bhs-sl__image { aspect-ratio: 4 / 5; }
.bhs-sl.bhs-sl--mobile .bhs-sl__slide--image .bhs-sl__el {
    left: calc(var(--xm) * 1%); top: calc(var(--ym) * 1%);
    font-size: calc(var(--tm) * 100cqw / 390);
  }
.bhs-sl--mobile .bhs-sl__slide--image .bhs-sl__el--titre .bhs-sl__ligne + .bhs-sl__ligne { margin-left: 0; }
.bhs-sl--mobile .bhs-sl__slide--dessous .bhs-sl__lien { background: var(--bande, #1c2420); }
.bhs-sl--mobile .bhs-sl__slide--dessous .bhs-sl__textes {
    position: static; display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 22px 20px 46px; text-align: center;
  }
.bhs-sl.bhs-sl--mobile .bhs-sl__slide--dessous .bhs-sl__el {
    position: static; transform: none; text-align: center; white-space: normal;
    font-size: calc(var(--tm) * 100cqw / 390);
  }
.bhs-sl--mobile .bhs-sl__slide--dessous .bhs-sl__el--titre .bhs-sl__ligne { display: inline; }
.bhs-sl--mobile .bhs-sl__slide--dessous .bhs-sl__el--titre .bhs-sl__ligne + .bhs-sl__ligne { margin-left: .28em; }
.bhs-sl--mobile .bhs-sl__slide--dessous .bhs-sl__el--btn { margin-top: 4px; }
.bhs-sl.bhs-sl--mobile .bhs-sl__el--sans-mobile { display: none; }
.bhs-sl--mobile .bhs-sl__slide--dessous ~ .bhs-sl__commandes { bottom: 10px; }

@media (prefers-reduced-motion: reduce) {
  .bhs-sl__piste { scroll-behavior: auto; }
  .bhs-sl__fleche, .bhs-sl__point, .bhs-sl .bhs-sl__el--btn, .bhs-sl .bhs-sl__el--btn::after { transition: none; }
}