/* Bareshoes.fr — Grandes vignettes de l'accueil (module bareshoes_grandesvignettes).
   Une vignette = 685 × 250 « unités » (comme les anciens bandeaux cp_cmsbanner3) ; textes et
   marges sont proportionnels à 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.
   Toute la vignette est un seul lien. Au survol, la photo s'agrandit dans son cadre (pas de carte qui se soulève). */

.bhs-gv { clear: both; float: left; width: 100%; margin: 20px 0; }
.bhs-gv__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.bhs-gv__grille--1 { grid-template-columns: minmax(0, 685px); justify-content: center; }
.bhs-gv__grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.bhs-gv__carte {
  position: relative; display: block; aspect-ratio: 685 / 250; overflow: hidden;
  background: #ebebeb; text-decoration: none; container-type: inline-size;
}
.bhs-gv__carte:hover, .bhs-gv__carte:focus { text-decoration: none; }
.bhs-gv__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-gv autour. */
.bhs-gv__carte > .bhs-gv__image,
.bhs-gv .bhs-gv__carte .bhs-gv__image {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none;
}
/* Survol (1.0.1) : la photo s'agrandit doucement dans son cadre, comme les anciens bandeaux du thème
   (scale 1.06 en 0,5 s). Les textes ne bougent pas. */
.bhs-gv__carte > .bhs-gv__image,
.bhs-gv .bhs-gv__carte .bhs-gv__image { transition: transform .5s ease; }
.bhs-gv__carte:hover > .bhs-gv__image,
.bhs-gv .bhs-gv__carte:hover .bhs-gv__image { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .bhs-gv__carte > .bhs-gv__image, .bhs-gv .bhs-gv__carte .bhs-gv__image { transition: none; }
}

.bhs-gv__textes {
  position: absolute; left: 10cqw; max-width: 50cqw;
  display: flex; flex-direction: column; align-items: flex-start; gap: .7cqw;
  text-align: left;
}
.bhs-gv__carte--haut .bhs-gv__textes { top: 4.4cqw; }
.bhs-gv__carte--centre .bhs-gv__textes { top: 50%; transform: translateY(-50%); }
.bhs-gv__carte--bas .bhs-gv__textes { bottom: 4.4cqw; }

.bhs-gv__textes > span {
  display: block; line-height: 1.15; overflow-wrap: anywhere;
  font-size: calc(var(--t, 14) * 1px);
  /* Taille saisie telle quelle tant que la vignette fait au moins 456 px de large (comme le
     thème), réduite au-dessous dans les mêmes proportions (tablette, téléphone). */
  font-size: min(calc(var(--t, 14) * 1px), calc(var(--t, 14) * 100cqw / 456));
}
.bhs-gv__badge {
  padding: .35em .75em; border-radius: 999px; text-transform: uppercase;
  letter-spacing: .04em; margin-bottom: .3em;
}
.bhs-gv__btn { text-transform: uppercase; text-decoration: underline; text-underline-offset: .15em; margin-top: .9em; }

/* 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-gv__carte--vitre-bouton .bhs-gv__btn,
.bhs-gv__carte--vitre-textes .bhs-gv__textes {
  background: rgba(255, 255, 255, var(--vitre, .15));
}
.bhs-gv__carte--vitre-bouton .bhs-gv__btn {
  padding: .55em 1em; border-radius: 0; text-decoration: none;
}
.bhs-gv__carte--vitre-textes .bhs-gv__textes {
  padding: 3cqw 3.6cqw; border-radius: 0; margin-left: -3cqw;
}
.bhs-gv__carte--vitre-textes.bhs-gv__carte--haut .bhs-gv__textes { top: 3cqw; }
.bhs-gv__carte--vitre-textes.bhs-gv__carte--bas .bhs-gv__textes { bottom: 3cqw; }

/* Tablette : toujours côte à côte, un peu moins d'espace entre les deux. */
@media (max-width: 991px) {
  .bhs-gv__grille, .bhs-gv__grille--3 { gap: 16px; }
}
/* Téléphone : les vignettes s'empilent, en pleine largeur. */
@media (max-width: 575px) {
  .bhs-gv__grille, .bhs-gv__grille--3 { grid-template-columns: minmax(0, 1fr); }
}