/* Bareshoes.fr — Vignettes de l'accueil (module bareshoes_vignettes).
   Une vignette = 447 × 223 « unités » ; tout (textes, marges) est proportionnel à sa largeur
   grâce aux unités de conteneur (cqw) : même rendu à toutes les tailles d'écran,
   identique à l'aperçu du back-office. Fond gris #ebebeb + image en « multiply »
   (le blanc de l'image devient gris). */

.bhs-vig { clear: both; float: left; width: 100%; margin: 30px 0; }
.bhs-vig__grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.bhs-vig__grille--1 { grid-template-columns: minmax(0, 447px); justify-content: center; }
.bhs-vig__grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.bhs-vig__carte {
  position: relative; display: block; aspect-ratio: 447 / 223; overflow: hidden;
  background: #ebebeb; border-radius: 5px; text-decoration: none;
  container-type: inline-size; transition: transform .3s ease;
}
.bhs-vig__carte:hover { transform: translateY(-6px); text-decoration: none; }
.bhs-vig__carte:focus-visible { outline: 2px solid #141414; outline-offset: 3px; }
/* Deux sélecteurs : le second (plus fort) l'emporte sur les règles d'images du thème sur la home ;
   le premier sert à l'aperçu du back-office, où il n'y a pas de bloc .bhs-vig autour. */
.bhs-vig__carte > .bhs-vig__image,
.bhs-vig .bhs-vig__carte .bhs-vig__image {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  mix-blend-mode: multiply; border-radius: 5px; max-width: none;
}

.bhs-vig__textes {
  position: absolute; left: 7.6cqw; max-width: 47cqw;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.1cqw;
  text-align: left;
}
.bhs-vig__carte--haut .bhs-vig__textes { top: 5.8cqw; }
.bhs-vig__carte--centre .bhs-vig__textes { top: 50%; transform: translateY(-50%); }
.bhs-vig__carte--bas .bhs-vig__textes { bottom: 4.9cqw; }

.bhs-vig__textes > span {
  display: block; line-height: 1.15; overflow-wrap: anywhere;
  font-size: calc(var(--t, 14) * 1px);
  font-size: calc(var(--t, 14) * 100cqw / 447);
}
.bhs-vig__badge {
  padding: .35em .75em; border-radius: 999px; text-transform: uppercase;
  letter-spacing: .04em; margin-bottom: .3em;
}
.bhs-vig__btn { text-transform: uppercase; text-decoration: underline; text-underline-offset: .15em; margin-top: .45em; }

/* Effet vitre (photos foncées) : voile blanc à peine visible, sans flou ni bordure, derrière le bouton,
   ou derrière tout le bloc de texte. */
.bhs-vig__carte--vitre-bouton .bhs-vig__btn,
.bhs-vig__carte--vitre-textes .bhs-vig__textes {
  background: rgba(255, 255, 255, var(--vitre, .15));
}
.bhs-vig__carte--vitre-bouton .bhs-vig__btn {
  padding: .55em 1em; border-radius: 0; text-decoration: none;
}
.bhs-vig__carte--vitre-textes .bhs-vig__textes {
  padding: 3.4cqw 4cqw; border-radius: 0; margin-left: -3cqw;
}
.bhs-vig__carte--vitre-textes.bhs-vig__carte--haut .bhs-vig__textes { top: 3.4cqw; }
.bhs-vig__carte--vitre-textes.bhs-vig__carte--bas .bhs-vig__textes { bottom: 3.4cqw; }

/* Tablette : 3 vignettes côte à côte deviendraient trop petites pour être lues.
   Elles défilent donc à l'horizontale (on en voit une et demie), à leur taille réelle ou presque. */
@media (min-width: 576px) and (max-width: 991px) {
  .bhs-vig { margin: 20px 0; }
  .bhs-vig__grille, .bhs-vig__grille--2 {
    display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 8px; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  }
  .bhs-vig__grille--1 { justify-content: center; }
  .bhs-vig__carte { flex: 0 0 min(447px, 62%); scroll-snap-align: start; }
  .bhs-vig__carte:hover { transform: none; }
}
/* Téléphone : les vignettes s'empilent, en pleine largeur. */
@media (max-width: 575px) {
  .bhs-vig { margin: 20px 0; }
  .bhs-vig__grille, .bhs-vig__grille--2 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .bhs-vig__carte:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bhs-vig__carte { transition: none; }
  .bhs-vig__carte:hover { transform: none; }
}