/* Page boutique. Composition à ordre fixe : titre, héros, puis les familles.
   Réemploie `.ub-vignette` et les jetons `--ub-carrousel-*` de carrousel.css,
   dont cette feuille dépend (voir ubayd_boutique_enqueue_style). */

.ub-boutique {
  padding-block-end: 3rem;
}

/* Le titre de la page reprend exactement le dessin des titres de section du
   site — celui du carrousel de l'accueil (`.ub-carrousel .ub-section-titre`) :
   serif de la marque, graisse 400, taille fluide, sans capitales. Il était en
   sans et en petites capitales, ce qui en faisait le seul titre du site à ne
   ressembler à aucun autre.
   Les valeurs sont recopiées plutôt que partagées par un sélecteur commun : la
   règle du carrousel est volontairement enfermée dans `.ub-carrousel`, parce
   que `.ub-section-titre` sert aussi aux intertitres du panneau produit, qui
   eux gardent la petite capitale espacée. Les factoriser ici imposerait ce
   dessin aux deux. */
.ub-boutique__titre {
  font-family: var(--ub-serif);
  font-size: clamp(1.4rem, 3.4vw, 2.3rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.2;

  /* Le titre ouvre désormais la page : c'est lui qui prend la respiration sous
     la barre d'en-tête, valeur calée sur la gouttière comme le faisait l'image
     avant l'inversion du 2026-08-16. En bas, un écart resserré : le titre et
     l'image forment une seule unité, et les espacer autant les dissocierait. */
  margin-block: var(--ub-gouttiere-page) 1.2rem;
  text-align: center;
}

.ub-boutique__famille {
  margin-block-end: 3rem;
}

/* Agrandis et centrés le 2026-08-24, à la demande du client. Ils étaient à
   1.05rem, alignés à gauche : une étiquette de rayon plutôt qu'un titre de
   section, alors que la page s'ouvre sur un titre centré.

   Un cran SOUS le titre de page (2.3rem au plus) : « BOUTIQUE » doit rester le
   titre du document, et deux échelles identiques en feraient deux titres de même
   rang.

   L'interlettrage descend de 0.12em à 0.09em : la valeur d'origine dessinait une
   petite capitale, et la garder à ce corps étalerait « ENSEMBLES » au point de
   le faire lire lettre à lettre. */
.ub-boutique__intertitre {
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  letter-spacing: 0.09em;
  margin-block-end: 0.5rem;
  padding-inline: var(--ub-gouttiere-page);
  text-align: center;
  text-transform: uppercase;
}

/* « Dernières pièces » est un fait de famille, porté une fois sous l'intertitre,
   et non un badge répété sur chacune des quatre vignettes.

   Centrée sous son titre depuis le 2026-08-24, et BORNÉE en mesure de lecture :
   la note des t-shirts fait trois phrases, et centrée sur toute la largeur d'un
   écran de 1440 px elle formerait une ligne que l'œil ne peut pas suivre. Les
   marges automatiques sont nécessaires au centrage du bloc lui-même — sans
   elles, le texte serait centré à l'intérieur d'un bloc resté collé à gauche.

   Même patron que la phrase de désir d'une fiche et que celle d'un carrousel :
   trois endroits, une seule grammaire. */
.ub-boutique__note {
  color: var(--ub-gris);
  font-size: clamp(0.9rem, 1.7vw, 1.05rem);
  line-height: 1.6;
  margin-block: 0 1.2rem;
  margin-inline: auto;
  max-inline-size: 62ch;
  padding-inline: var(--ub-gouttiere-page);
  text-align: center;
  text-wrap: balance;
}

/* Le héros est la seule exception au bord-à-bord du thème, et c'est assumé :
   la source ne fait que 1080 px de large, il n'en existe pas de plus définie,
   et l'étirer sur un grand écran la rendrait visiblement molle. Tranché avec le
   client le 2026-08-16. À revoir le jour où une source plus large arrive. */
.ub-boutique__hero {
  aspect-ratio: 1 / 1;

  /* Rayon sur les quatre coins, et non seulement en bas : le héros ne touche
     plus l'en-tête depuis la marge ci-dessous, il se lit donc comme une carte
     posée sur la page et non comme une bande encastrée sous la barre.
     Jeton partagé du thème, le même que les bandes du compte et de l'accueil —
     une valeur propre au héros aurait dérivé au premier ajustement. */
  border-radius: var(--ub-rayon-bande);

  /* L'image ne touche plus l'en-tête depuis que le titre est passé au-dessus
     (2026-08-16) : c'est lui qui porte la respiration du haut. Ne reste ici que
     l'écart du bas, qui détache l'image du premier intertitre de famille. */
  margin-block: 0 2.4rem;
  margin-inline: auto;

  /* Deux bornes en une. La limite à 1100 px tient la définition de l'image, qui
     ne fait que 1080 px de large et deviendrait molle étirée sur un grand écran
     — c'est l'exception au bord-à-bord du thème, assumée avec le client.
     Le second terme réserve la gouttière de page de chaque côté : sans lui le
     héros touche les bords en mobile, ses coins latéraux sortent de l'écran et
     le rayon n'y est tout simplement pas visible. Il aligne aussi le bord du
     héros sur celui des vignettes en dessous. */
  max-inline-size: min(1100px, 100% - 2 * var(--ub-gouttiere-page));

  /* Indispensable au rayon : l'image remplit le cadre en `cover`, et sans
     découpe ses angles carrés dépasseraient des coins arrondis. */
  overflow: hidden;
}

/* L'image adopte le rapport du cadre, comme les vignettes : WooCommerce et
   Kadence posent `height: auto` sur les images avec une spécificité supérieure
   à celle d'une simple classe, et un `block-size: 100%` posé sur le seul
   conteneur n'y survit pas. Le rapport doit être porté par l'image elle-même. */
.ub-boutique__hero-media {
  aspect-ratio: inherit;
  display: block;
  inline-size: 100%;
  object-fit: cover;
  /* Ancré en haut : le sujet occupe presque toute la hauteur de l'image carrée,
     et la main levée doit rester entière. Les rapports 16:9 et 5:3 ont été
     essayés et écartés — ils coupent trop haut, la pose assise cesse de se lire. */
  object-position: center 8%;
}

/* Repli tant que le fichier n'est pas déposé : une bande de marque, plutôt
   qu'une image cassée en tête de page. */
.ub-boutique__hero--repli {
  background: var(--ub-creme);
}

@media (min-width: 768px) {
  .ub-boutique__hero {
    aspect-ratio: 3 / 2;
  }
}

/* MOBILE — une piste par famille.
   Une piste unique pour tout le catalogue a été écartée : sept pièces à la file
   imposent six glissements sans aucun repère de progression. Une piste par
   famille donne au défilement vertical le rôle de parcourir les familles, et à
   l'horizontal celui de parcourir les pièces d'une famille.

   Ces règles reproduisent celles de `.ub-carrousel__piste` sans en dépendre :
   cette dernière est écrite en `.ub-carrousel__cadre .ub-carrousel__piste` pour
   gagner contre une règle de Kadence, et la boutique n'a pas de cadre. Les
   jetons `--ub-carrousel-*`, eux, sont bien partagés — l'intervalle et la
   gouttière doivent rester les mêmes d'une page à l'autre.

   Le dimensionnement des vignettes, lui, vient de `.ub-piste-defilante`
   (carrousel.css) : c'est exactement ce que l'extraction a rendu réemployable.

   Sélecteur à deux classes (0,2,0) comme dans carrousel.css : Kadence pose
   `.single-content ul { margin: 0 0 …; padding-left: 2em }` (0,1,1) sur toute
   zone de contenu, et un simple `.ub-boutique__pieces` (0,1,0) perdrait
   l'arbitrage — c'est ce qui décalerait la première vignette. */
.ub-boutique .ub-boutique__pieces {
  display: flex;
  gap: var(--ub-carrousel-intervalle);
  list-style: none;
  margin: 0;
  overflow-x: auto;
  padding-block: 0;
  padding-inline: var(--ub-carrousel-gouttiere) 0;
  scroll-behavior: smooth;
  scroll-padding-inline-start: var(--ub-carrousel-gouttiere);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.ub-boutique .ub-boutique__pieces::-webkit-scrollbar {
  display: none;
}

/* DESKTOP — rythme alterné.
   Une pièce en grand dans une colonne 2fr, les suivantes empilées dans une
   colonne 1fr, et le côté du grand format s'inverse à chaque rangée.

   Le passage en `display: grid` suffit à neutraliser le dimensionnement de
   `.ub-piste-defilante` : `flex` ne s'applique qu'aux enfants d'un conteneur
   FLEX, et `scroll-snap-align` ne fait rien hors conteneur de défilement.
   Aucune surcharge à écrire — c'était tout l'objet de l'extraction. */
@media (min-width: 768px) {
  .ub-boutique .ub-boutique__pieces {
    align-content: start;
    display: grid;
    grid-template-columns: 2fr 1fr;
    overflow-x: visible;
    padding-inline: var(--ub-gouttiere-page);
  }

  /* La grande couvre autant de rangées qu'il y a de petites à côté d'elle.
     `grid-row: 1 / -1` ne conviendrait pas : `-1` désigne la fin de la grille
     EXPLICITE, et les petites créent des rangées implicites — la grande ne
     couvrirait que la première. D'où le span, calculé en PHP et borné
     (`ubayd_boutique_span`). */
  .ub-boutique .ub-boutique__pieces > .ub-vignette:first-child {
    grid-column: 1;
    grid-row: 1 / span var(--ub-boutique-petites, 1);
  }

  .ub-boutique .ub-boutique__pieces > .ub-vignette:not(:first-child) {
    grid-column: 2;
  }

  .ub-boutique .ub-boutique__pieces--inverse {
    grid-template-columns: 1fr 2fr;
  }

  .ub-boutique .ub-boutique__pieces--inverse > .ub-vignette:first-child {
    grid-column: 2;
  }

  .ub-boutique .ub-boutique__pieces--inverse > .ub-vignette:not(:first-child) {
    grid-column: 1;
  }

  /* Une famille d'une seule pièce ne se prête pas au rythme : elle rend une
     vignette simple, à l'échelle des petites, et non un placard sur deux tiers
     de la page. */
  .ub-boutique .ub-boutique__pieces--seule {
    grid-template-columns: repeat(3, 1fr);
  }

  .ub-boutique .ub-boutique__pieces--seule > .ub-vignette:first-child {
    grid-column: 1;
    grid-row: auto;
  }
}