/* ==========================================================================
   bloc-vitrine.css
   Style du bloc "produits/prestations + horaires + adresse".
   Toutes les classes préfixées bv- pour ne jamais entrer en collision
   avec le reste du système de conception (style-base.css).
   Couleur d'accent pilotable par site via --bv-accent (posée en inline
   par blocVitrine.js sur les conteneurs concernés).
   ========================================================================== */

.bv-section {
  padding: 0 0 48px;
}

.bv-enveloppe {
  width: 100%;
  max-width: var(--largeur-site, 96rem);
  margin-inline: auto;
  padding-inline: var(--gouttiere, clamp(0.75rem, 2vw, 1.25rem));
}

.bv-titre {
  font-family: var(--display, "Bricolage Grotesque", Georgia, serif);
  font-weight: 700;
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem);
  margin: 0 0 1.75rem;
  letter-spacing: -.02em;
}

/* Filet coloré sous le titre, identique à celui du bloc présentation
   (.pr-titre::after dans presentation.css). Les deux titres de section
   de la page d'accueil se répondent ainsi visuellement. Si tu changes
   l'épaisseur ou la largeur ici, fais-le aux deux endroits, sinon le
   décalage se voit immédiatement en faisant défiler la page. */
.bv-titre::after {
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  margin-top: .8rem;
  background: var(--bv-accent, var(--feria, #C1272D));
}

.bv-grille {
  display: grid;
  gap: clamp(1.25rem, 3vw, 1.75rem) clamp(2rem, 5vw, 3rem);
  grid-template-columns: 1fr;
  grid-template-areas:
    "photos"
    "bouton"
    "infos";
}

@media (min-width: 60rem) {
  .bv-grille {
    /* Les pistes sont en minmax(0, …) et non en 1.15fr / 1fr secs :
       une piste "1fr" vaut en réalité "minmax(auto, 1fr)", donc elle
       refuse de descendre sous la largeur min-content de son contenu
       et fait déborder la page vers la droite. Le minmax(0, …)
       l'autorise à se comprimer normalement. */
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    /* Zones nommées plutôt qu'un simple empilement d'enfants : l'encadré
       horaires+carte (colonne de droite) ne partage sa ligne qu'avec le
       bloc photos, pas avec le bouton — il s'étire donc pour égaler la
       hauteur des photos SEULES, et s'arrête là. Le bouton vit dans sa
       propre ligne, sous les photos, sans influencer cette hauteur
       partagée. La cellule vide (.) sous "infos" reste simplement libre. */
    grid-template-areas:
      "photos infos"
      "bouton .";
    align-items: stretch;
  }
  .bv-grille--simple {
    grid-template-columns: 1fr;
    max-width: 32rem;
  }
}

/* Page dédiée /prestations (pas d'encadré horaires à côté) : une seule
   colonne qui utilise toute la largeur disponible, contrairement à
   .bv-grille--simple qui est volontairement étroite (c'est un aperçu
   sur l'accueil, pas la page complète). Placée après le media query
   ci-dessus pour l'emporter à toutes les tailles d'écran. */
.bv-grille--pleine-largeur {
  grid-template-columns: 1fr;
  max-width: none;
}

.bv-colonne-produits {
  grid-area: photos;
  min-width: 0;
}
.bv-voir-plus { grid-area: bouton; justify-self: start; align-self: start; }
.bv-infos { grid-area: infos; }

/* --------------------------------- Alignement haut ET bas des colonnes --- */
/* L'encadré horaires+carte est presque toujours plus haut que les photos
   (la carte carrée + le bloc note + sept lignes d'horaires). La grille
   étire donc la ligne à SA hauteur, et la colonne photos hérite d'un
   surplus. Deux mauvaises réponses ont déjà été essayées ici : laisser
   les photos collées en haut (tout le vide s'accumule en bas), puis les
   centrer verticalement (le vide se répartit moitié en haut, moitié en
   bas — ce qui est pire, ça décale les deux bords à la fois).
   La bonne réponse est de faire DESCENDRE l'étirement jusqu'aux images :
   la colonne devient flex, la grille de produits absorbe la hauteur
   restante, chaque carte devient flex verticale, et l'image abandonne
   son ratio 4/5 pour prendre tout ce qui reste sous le nom + le prix.

   Deux pièges déjà rencontrés, ne pas les réintroduire :

   1. Le :has(.bv-infos) n'est pas décoratif. La page dédiée
      /prestations réutilise .bv-colonne-produits SANS encadré à côté :
      là, rien ne fixe la hauteur de la ligne, et des images en
      flex-basis 0 s'écraseraient jusqu'à leur min-height. Ces règles
      ne doivent s'appliquer QUE lorsque l'encadré est présent.
      Écrit en descendant (sans le chevron ">") pour rester vrai même
      si le générateur enveloppe l'encadré dans un conteneur.

   2. Les min-width: 0. Devenue élément flex, .bv-produits hérite d'un
      min-width: auto implicite qui l'empêche de descendre sous sa
      largeur min-content (la somme de ses 3 colonnes) : elle élargit
      alors la piste de grille et provoque un scroll horizontal sur
      toute la page. Même chose pour .bv-produit à l'intérieur. */
@media (min-width: 60rem) {
  .bv-grille:has(.bv-infos) .bv-colonne-produits {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .bv-grille:has(.bv-infos) .bv-produits {
    flex: 1 1 auto;
    grid-auto-rows: 1fr;
    min-width: 0;
  }

  .bv-grille:has(.bv-infos) .bv-produit {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .bv-grille:has(.bv-infos) .bv-produit__image {
    flex: 1 1 0;
    aspect-ratio: auto;
    min-height: 12rem;
  }
}

/* ------------------------------------------------------------- Produits --- */

.bv-produits {
  display: grid;
  gap: 1rem;
}
/* 1 élément */
.bv-produits:not(:has(> :nth-child(2))) {
  grid-template-columns: 1fr;
}
/* 2 éléments */
.bv-produits:has(> :nth-child(2)):not(:has(> :nth-child(3))) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* 3 éléments et + : on plafonne à 3 colonnes, au-delà ça passe
   automatiquement à la ligne suivante — pas besoin d'une règle par
   nombre exact, la grille gère le retour à la ligne toute seule dès
   qu'il y a plus de 3 éléments pour seulement 3 colonnes définies.
   minmax(0, 1fr) et non 1fr sec : voir l'explication sur .bv-grille,
   c'est exactement la même mécanique de débordement. */
.bv-produits:has(> :nth-child(3)) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Cas particulier : exactement 4 éléments. Avec la règle "3 colonnes"
   ci-dessus, un 4e produit se retrouverait seul sur une deuxième ligne,
   créant un creux visible et cassant l'alignement avec le bloc
   horaires+carte à côté. Cette règle vient après, donc elle l'emporte
   spécifiquement pour ce cas — dès qu'il y a un 5e élément, on repasse
   à 3 colonnes normalement. */
.bv-produits:has(> :nth-child(4)):not(:has(> :nth-child(5))) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Sur mobile, les règles ci-dessus (3 ou 4 colonnes fixes) donneraient
   des cartes minuscules et illisibles. Le !important est nécessaire ici
   car :has() a une spécificité plus élevée qu'une classe seule — sans
   lui, cette surcharge mobile n'aurait aucune chance de l'emporter. */
@media (max-width: 30rem) {
  .bv-produits:has(> :nth-child(2)) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

.bv-produit {
  background: var(--papier-vif, #fff);
  border: 1px solid var(--sable, #ddd);
  overflow: hidden;
  min-width: 0;
}

.bv-produit__image {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  background: var(--sable, #eee);
}

.bv-produit__texte {
  padding: .7rem .8rem .9rem;
  min-width: 0;
}

.bv-produit__nom {
  font-family: var(--display, "Bricolage Grotesque", Georgia, serif);
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 .3rem;
  overflow-wrap: anywhere;
}

.bv-produit__description {
  font-size: .85rem;
  color: var(--encre-doux, #666);
  margin: 0 0 .5rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.bv-produit__prix {
  font-family: var(--chiffre, ui-monospace, monospace);
  font-weight: 600;
  font-size: .9rem;
  color: var(--bv-accent, #C1272D);
  margin: 0;
}

/* ------------------------------------------------------ Horaires/adresse --- */

.bv-infos {
  background: var(--papier-vif, #fff);
  border: 1px solid var(--sable, #ddd);
  padding: 1.5rem;
  /* min-width: 22rem sec remplacé par une valeur bornée : sur un écran
     entre 960 et 1100 px, 22rem d'encadré + la colonne photos
     dépassaient la largeur disponible et sortaient de l'écran. */
  min-width: min(22rem, 100%);
  /* Contenu calé en haut. Le centrage vertical qui était ici avant
     produisait le même défaut que le centrage de la colonne photos :
     dans le cas (rare mais possible, avec deux rangées de produits) où
     ce sont les photos qui sont plus hautes, le contenu de l'encadré
     flottait au milieu et les deux bords se décalaient. */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.bv-note {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  flex-wrap: wrap;
  padding-bottom: 1.2rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px dashed var(--sable, #ddd);
}
.bv-note__etoile { color: #E8A93C; font-size: 1rem; }
.bv-note__valeur {
  font-family: var(--display, "Bricolage Grotesque", Georgia, serif);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--encre, #222);
}
.bv-note__avis {
  font-size: .82rem;
  color: var(--encre-doux, #666);
}

.bv-horaires {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
}

.bv-horaires caption {
  text-align: left;
  font-family: var(--chiffre, ui-monospace, monospace);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--encre-doux, #888);
  margin-bottom: .8rem;
}

.bv-horaires__ligne th,
.bv-horaires__ligne td {
  padding: .38rem 0;
  border-bottom: 1px solid var(--sable, #eee);
  font-size: .86rem;
  text-align: left;
  font-weight: 400;
}

.bv-horaires__ligne th {
  font-weight: 600;
  padding-right: 1rem;
  white-space: nowrap;
}

.bv-horaires__ligne--ferme td {
  color: var(--encre-doux, #999);
  font-style: italic;
}

.bv-adresse {
  border-top: 1px dashed var(--sable, #ddd);
  padding-top: 1.2rem;
}

.bv-adresse__etiquette {
  font-family: var(--chiffre, ui-monospace, monospace);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bv-accent, #C1272D);
  display: block;
  margin-bottom: .5rem;
}

.bv-adresse__texte {
  margin: 0 0 .6rem;
  font-size: .95rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.bv-adresse__tel {
  display: inline-block;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  color: inherit;
  margin-bottom: 1rem;
}
.bv-adresse__tel:hover {
  color: var(--bv-accent, #C1272D);
}

/* --------------------------------------------- Horaires + lieu, côte à côte --- */

.bv-infos__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  min-width: 0;
}
/* Deux colonnes dès que l'encadré a la place (horaires | adresse+carte),
   comme sur la maquette. En dessous, tout repasse en une colonne pour
   rester lisible sur mobile ou dans un encadré étroit. */
@media (min-width: 32rem) {
  .bv-infos__grille { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}

.bv-infos__horaires { min-width: 0; }
.bv-infos__lieu {
  min-width: 0;
  border-top: 1px dashed var(--sable, #ddd);
  padding-top: 1.2rem;
}
@media (min-width: 32rem) {
  .bv-infos__lieu {
    border-top: none;
    border-left: 1px dashed var(--sable, #ddd);
    padding-top: 0;
    padding-left: 1.5rem;
  }
}
@media (max-width: 32rem) {
.bv-section{
padding: 0 0 32px;
}
}
.bv-carte {
  margin-top: .8rem;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--sable, #ddd);
}
.bv-carte iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  border: 0;
}

.bv-itineraire {
  display: inline-block;
  margin-top: .6rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--bv-accent, #C1272D);
  text-decoration: none;
}
.bv-itineraire:hover { text-decoration: underline; }

/* --------------------------------------------------------- Voir plus --- */

.bv-voir-plus {
  display: inline-block;
  padding: .75rem 1.5rem;
  background: var(--bouton-fond, var(--bv-accent, #C1272D));
  color: var(--bouton-texte, #fff);
  text-decoration: none;
  font-weight: 600;
  font-size: .9rem;
  border-radius: 4px;
}
.bv-voir-plus:hover {
  background: var(--bouton-fond-hover, var(--bv-accent, #C1272D));
  color: var(--bouton-texte-hover, var(--bouton-texte, #fff));
  opacity: .9;
}