/* Carrousel « La collection » de la page d'accueil.
   Maquette : .superpowers/brainstorm/14359-1785256295/content/skeleton-casablanca.html
   et la capture client du 2026-07-30 (panneau arrondi, texte centré). */

/* Les réglages du carrousel sont posés sur `:root` et non sur `.ub-carrousel` :
   déclarés sur le bloc, ils ne seraient visibles que de ses propres
   descendants.

   La gouttière n'est pas une valeur du carrousel mais le retrait de référence de
   la page, tenu par `--ub-gouttiere-page` dans `base.css` : la bande soins
   reprend le même pour aligner son bord gauche sur celui du carrousel (demande
   du client du 2026-07-31), et deux valeurs littérales auraient divergé au
   premier ajustement. L'alias local est conservé pour que les règles ci-dessous
   restent lisibles et qu'un futur décalage propre au carrousel n'ait qu'un seul
   endroit à changer. Il suit le point de rupture du jeton, sans le redéclarer. */
:root {
  --ub-carrousel-visible: 1.15;
  --ub-carrousel-gouttiere: var(--ub-gouttiere-page);
  --ub-carrousel-intervalle: 1rem;
}

@media (min-width: 768px) {
  :root {
    --ub-carrousel-intervalle: 1.75rem;
  }
}

/* Le nombre de vignettes visibles est posé sur la section et non plus sur
   `:root` : la page d'accueil porte deux carrousels, et l'attribut `visibles`
   du shortcode permet à chacun d'en demander un autre — la collection
   précédente en montre quatre.
   Le repli des `var()` reproduit exactement les valeurs d'avant, si bien qu'un
   carrousel sans attribut se comporte comme auparavant. Le mobile, lui, garde la
   valeur globale en toutes circonstances : quatre vignettes sur 390px de large
   feraient des cartes de 90px, illisibles, et ce n'est pas au contenu d'une page
   d'en décider. */
@media (min-width: 768px) {
  .ub-carrousel {
    --ub-carrousel-visible: var(--ub-carrousel-visible-large, 3);
  }
}

@media (min-width: 1200px) {
  .ub-carrousel {
    --ub-carrousel-visible: var(--ub-carrousel-visible-large, 4);
  }
}

.ub-carrousel {
  padding-block: 2.4rem;
}

/* Tête centrée : depuis le retrait du lien « Tout voir » (2026-08-09), le titre
   est seul dans la tête et le `space-between` qui les écartait n'avait plus rien
   à écarter — il collait le titre au bord gauche. */
.ub-carrousel__tete {
  align-items: baseline;
  display: flex;
  justify-content: center;
  margin-block-end: 1rem;
  padding-inline: var(--ub-carrousel-gouttiere);
  text-align: center;
}

/* Le titre du carrousel est un titre de section à part entière : serif de la
   marque, à l'échelle des titres de page. Il porte la classe `.ub-section-titre`
   pour son rôle, mais plus le dessin de la petite capitale espacée — celle-ci
   reste juste pour les intertitres du panneau produit (« La pièce »,
   « Matière », « Entretien », inc/product-editorial.php), d'où un sélecteur
   qui ne sort pas du carrousel. */
.ub-carrousel .ub-section-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;
}

/* Onglets centrés, filet d'encre sous l'actif : la grammaire de l'en-tête. */
.ub-carrousel__onglets {
  display: flex;
  gap: 2rem;
  justify-content: center;
  margin-block-end: 1.6rem;
  position: relative;
}

.ub-carrousel__onglet {
  border-block-end: 1px solid transparent;
  color: var(--ub-gris);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  padding-block-end: 0.2rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 200ms ease;
}

.ub-carrousel__onglet.is-actif {
  border-block-end-color: var(--ub-encre);
  color: var(--ub-encre);
}

/* --- filet glissant ------------------------------------------------------
   Le soulignement de l'onglet actif devient un filet unique qui coulisse d'un
   onglet à l'autre, plutôt que deux bordures dont l'une s'allume et l'autre
   s'éteint — une bordure ne peut pas se déplacer, il n'y a rien à animer.

   La classe `a-filet-glissant` et les deux variables sont écrites par
   `assets/js/carrousel.js`. Sans script, rien de tout ceci ne s'applique et la
   bordure de `.is-actif` ci-dessus marque l'onglet comme avant : le dessin
   reste juste, il perd seulement son animation. */
.ub-carrousel__onglets.a-filet-glissant .ub-carrousel__onglet.is-actif {
  border-block-end-color: transparent;
}

.ub-carrousel__onglets.a-filet-glissant::after {
  background: var(--ub-encre);
  block-size: 1px;
  content: '';
  inline-size: var(--ub-filet-l, 0);
  inset-block-end: 0;
  inset-inline-start: 0;
  position: absolute;
  /* `translate` et `inline-size` plutôt que `left`/`width` : la première est
     une propriété composée par le navigateur, la seconde force un recalcul de
     mise en page à chaque image. L'animation reste fluide même sur la largeur,
     qui ne peut pas s'en passer — les deux libellés n'ont pas la même
     longueur, et un filet de largeur fixe déborderait de l'un ou l'autre. */
  transition:
    translate 320ms cubic-bezier(0.32, 0.72, 0, 1),
    inline-size 320ms cubic-bezier(0.32, 0.72, 0, 1);
  translate: var(--ub-filet-x, 0) 0;
}

/* Le filet se pose sans coulisser pour qui a demandé moins de mouvement : il
   marque toujours l'onglet actif, ce qui est sa fonction — seul le trajet
   disparaît. */
@media (prefers-reduced-motion: reduce) {
  .ub-carrousel__onglets.a-filet-glissant::after {
    transition: none;
  }
}

.ub-carrousel__cadre {
  position: relative;
}

/* La piste porte une gouttière à gauche seulement : la dernière vignette est
   coupée par le bord droit, ce qui signale qu'on peut faire défiler.
   Sélecteur à deux classes (0,2,0) : le thème parent Kadence pose
   `.single-content ul, .single-content ol { margin: 0 0 var(--global-md-spacing);
   padding-left: 2em }` (0,1,1) dans content.min.css, sur toute zone de
   contenu. Un simple `.ub-carrousel__piste` (0,1,0) perd contre cette règle —
   c'est ce qui décalait la première vignette de 22 px du titre de section en
   desktop. On corrige par la spécificité, pas par l'ordre de chargement ni un
   `!important` : ça reste vrai même si Kadence change l'ordre de ses feuilles
   à une mise à jour. */
.ub-carrousel__cadre .ub-carrousel__piste {
  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-carrousel__cadre .ub-carrousel__piste::-webkit-scrollbar {
  display: none;
}

.ub-vignette {
  flex: 0 0 calc(
    (100% - var(--ub-carrousel-gouttiere)
      - (var(--ub-carrousel-visible) - 1) * var(--ub-carrousel-intervalle))
    / var(--ub-carrousel-visible)
  );
  position: relative;
  scroll-snap-align: start;

  /* Fait de `.ub-vignette` un conteneur de requête de taille (axe inline
     seulement) : `.ub-vignette__options`, plus bas, s'en sert pour calculer
     le bas du panneau image via `cqw` sans dépendre de la hauteur du nom du
     produit. `flex-basis` fixe déjà la largeur explicitement (calc ci-dessus,
     pas une largeur déduite du contenu) : ce conteneur ne change donc ni ce
     calcul de largeur ni le `scroll-snap-align` posé juste au-dessus — la
     containment ne s'applique qu'à l'intérieur de la vignette, jamais à la
     piste qui la contient. */
  container-type: inline-size;
}

.ub-vignette__lien {
  color: var(--ub-encre);
  display: block;
  text-decoration: none;
}

/* Le nom et le prix restent à l'encre au survol. Kadence colore tout `a:hover` de
   sa teinte d'accentuation avec une pseudo-classe de plus que la règle ci-dessus,
   qui perdait donc l'arbitrage : le titre et le prix de la vignette viraient au
   bleu dès que la souris passait — mesuré, rgb(33, 83, 135). Le survol est déjà
   signalé par l'apparition du bouton ; changer aussi la couleur du texte ajoute un
   effet que la maquette ne prévoit pas. */
.ub-vignette__lien:hover,
.ub-vignette__lien:focus,
.ub-vignette__lien:focus-visible {
  color: var(--ub-encre);
}

.ub-vignette__panneau {
  /* Le rapport du panneau, porté par une variable parce que l'image doit adopter
     LE MÊME (voir `.ub-vignette__media`) : deux valeurs écrites en double
     dériveraient, et le débordement reviendrait sans bruit. */
  --ub-vignette-rapport: 4 / 5;

  aspect-ratio: var(--ub-vignette-rapport);
  background: var(--ub-creme);
  border-radius: 14px;
  display: block;
  overflow: hidden;
  position: relative;
}

/* Le produit tient ENTIER dans le panneau (demande client du 2026-08-06).
   `cover` remplissait le panneau 4/5 avec une image que WooCommerce avait déjà
   recadrée au carré : l'écart de rapport se payait en rognage latéral, soit un
   cinquième de la largeur — les manches des t-shirts. `contain` laisse un peu de
   crème au-dessus et en dessous, comme la fiche produit, et la source passe à
   `woocommerce_single`, non recadrée (inc/carrousel.php).

   `object-fit: contain` est ce qui garantit l'absence de perte, et il doit être
   conservé quoi qu'il arrive à la boîte. Une tentative l'a remplacé par
   `block-size: auto` + `max-block-size: 100%`, au motif que les règles des
   éléments remplacés recalculeraient la largeur pour préserver le rapport : c'est
   faux dès qu'`inline-size: 100%` fixe cette largeur. La hauteur était rabotée
   sans que la largeur suive, et le `fill` par défaut étirait l'Ensemble Everest
   de 6 % sur les trois profils — un défaut plus sournois que le rognage qu'il
   corrigeait, puisqu'aucun bord ne manquait.

   La hauteur vient du RAPPORT et non d'un `block-size: 100%`, qui ne survit pas
   ici : WooCommerce déclare `height: auto` sur les images de ses boucles avec une
   spécificité supérieure à celle d'une simple classe, et sa feuille est enfilée
   après celle du thème enfant. Mesuré : l'image tombait à sa hauteur intrinsèque
   (375,78 px au lieu des 388,75 px du panneau), ce qui passait inaperçu sur les
   t-shirts — plus courts que le panneau — et faisait déborder l'Ensemble Everest
   de 26 px. Forcer la déclaration en `!important` la rétablissait, preuve que le
   pourcentage se résolvait et que seule la cascade était en cause.

   Avec `aspect-ratio` et une largeur pleine, `height: auto` devient un allié : la
   hauteur se déduit du rapport, donc du panneau, et `contain` inscrit le produit
   dedans sans en perdre un bord. */
.ub-vignette__media {
  aspect-ratio: var(--ub-vignette-rapport);
  display: block;
  inline-size: 100%;
  object-fit: contain;
}

.ub-vignette__panneau--vide {
  align-items: center;
  color: var(--ub-gris);
  display: flex;
  font-size: 0.62rem;
  justify-content: center;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* `line-height` en nombre pur (pas `normal`) : la hauteur de chaque ligne
   devient un multiple exact de `font-size`, donc calculable en CSS — voir
   `--ub-vignette-bloc-texte` sur `.ub-vignette__options` plus bas, qui en
   dépend pour ne jamais recouvrir ce bloc. */
.ub-vignette__nom,
.ub-vignette__prix {
  display: block;
  line-height: 1.3;
  text-align: center;
}

.ub-vignette__nom {
  font-size: 0.8rem;
  margin-block: 0.7rem 0.25rem;
}

.ub-vignette__prix {
  font-size: 0.85rem;
}

/* Prix en promotion : WooCommerce rend le prix initial dans un `del` et le
   prix courant dans un `ins`. Sans ces règles, l'`ins` arrive souligné (défaut
   du navigateur) et les deux prix se valent visuellement. */
.ub-vignette__prix del {
  margin-inline-end: 0.4em;
  opacity: 0.55;
}

.ub-vignette__prix ins {
  text-decoration: none;
}

/* Le bouton n'apparaît au survol que là où le survol existe. Sur un écran
   tactile il reste affiché : masqué, il serait inatteignable au doigt.

   `.ub-vignette__panneau` est un `<span>` DANS le lien principal
   `.ub-vignette__lien`, tandis que ce bouton est FRÈRE de ce lien (un `<a>`
   dans un `<a>` serait un HTML invalide) : il ne peut donc pas être positionné
   par rapport au seul panneau via un `position: relative` posé dessus — le
   référentiel de positionnement (`position: relative` sur `.ub-vignette`)
   reste forcément toute la vignette, panneau + nom + prix compris.

   Premier correctif (abandonné) : ancrer `inset-block-end` sur la hauteur
   calculée du bloc nom + prix. Ça calait bien le bouton pour UNE ligne de nom,
   mais la hauteur du nom dépend du catalogue (un nom de produit long passe à
   deux lignes) : le bouton recommençait à déborder du panneau dès qu'un nom
   dépassait une ligne, alors que le test ne le voyait pas puisque les cinq
   produits du catalogue actuel ont des noms courts. Piste rejetée : plus
   jamais ancrer ce bouton sur une grandeur qui dépend du contenu produit.

   Correctif retenu : ancrer sur la géométrie du panneau lui-même, pas sur le
   texte. `.ub-vignette` est un conteneur de requête de taille (inline-size,
   voir plus haut) : `100cqw` vaut donc la largeur de la vignette, identique à
   celle du panneau (`.ub-vignette__lien` et `.ub-vignette__panneau` sont tous
   deux `display: block`, pleine largeur, sans marge avant eux). Comme le
   panneau a `aspect-ratio: 4 / 5` et démarre à l'origine de la vignette, son
   bas vaut exactement `100cqw * 5 / 4`. On y retranche l'intervalle voulu
   (0.8rem) puis la hauteur du bouton lui-même : cette hauteur ne peut plus
   être déduite du texte du nom (variable), mais celle du bouton n'a jamais
   été variable — c'est le libellé fixe du thème « Voir les options ». On la
   fige donc explicitement via `block-size` plutôt que de la deviner à partir
   de la fonte : une seule variable, utilisée à la fois pour dimensionner la
   boîte et pour le calcul de position, ne peut pas dériver entre les deux. */
.ub-vignette__options {
  --ub-vignette-options-hauteur: 2.1rem;

  align-items: center;
  background: var(--ub-panneau-fond);
  block-size: var(--ub-vignette-options-hauteur);
  border: 1px solid var(--ub-encre);
  color: var(--ub-encre);
  display: flex;
  font-size: 0.6rem;
  inset-block-start: calc(
    100cqw * 5 / 4 - 0.8rem - var(--ub-vignette-options-hauteur)
  );
  inset-inline: 0.8rem;
  justify-content: center;
  letter-spacing: 0.14em;
  position: absolute;
  text-decoration: none;
  text-transform: uppercase;
}

@media (hover: hover) {
  /* Le bouton monte en apparaissant (demande client du 2026-08-06) : le fondu
     seul se remarquait mal sur un fond crème clair. Le déplacement reste court —
     0,5 rem — parce qu'il part de sa position finale et non d'ailleurs : plus
     ample, il donnerait l'impression d'un élément qui arrive du bas du panneau
     alors qu'il en fait partie.

     `transform` et `opacity` sont les deux seules propriétés que le navigateur
     anime sans recalculer la mise en page — un glissement porté par `inset` ou
     `margin` ferait ramer la piste au défilement. */
  .ub-vignette__options {
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity 180ms ease, transform 180ms ease;
  }

  .ub-vignette:hover .ub-vignette__options,
  .ub-vignette:focus-within .ub-vignette__options {
    opacity: 1;
    transform: translateY(0);
  }

  /* Un visiteur qui a demandé moins d'animation garde l'apparition, sans le
     déplacement : c'est le mouvement qui gêne, pas le changement d'état. */
  @media (prefers-reduced-motion: reduce) {
    .ub-vignette__options {
      transform: none;
      transition: opacity 180ms ease;
    }
  }
}

/* La carte de fin n'a rien à proposer en options. */
.ub-vignette--fin .ub-vignette__options {
  display: none;
}

/* Les flèches de défilement ont été retirées du balisage le 2026-08-09 à la
   demande du client (`inc/carrousel.php`). Leurs styles partent avec elles :
   du CSS qui ne vise plus rien survit aux relectures et finit par ressusciter
   un dessin que personne n'a redemandé.

   La piste reste défilable au doigt, à la molette, au glissement et au clavier.
   Le repère visuel qu'il reste — une rangée volontairement coupée au bord du
   cadre — est ce qui annonce qu'il y a une suite. */