.ub-produit-recit {
  border-block: 1px solid var(--ub-ligne);
  margin-block: 1.4rem;
  padding-block: 1.2rem;
}

.ub-produit-recit__traduction {
  color: var(--ub-gris);
  font-family: var(--ub-serif);
  font-size: 0.85rem;
  font-style: italic;
  margin-block: 0.5rem 0.3rem;
}

.ub-produit-recit__lieu {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ub-encre);
  margin: 0;
}

.ub-produit-details {
  display: grid;
  gap: 1.2rem;
  margin-block-start: 1.6rem;
}

.ub-produit-details p {
  color: var(--ub-gris);
  font-size: 0.85rem;
  line-height: 1.75;
  margin-block-start: 0.35rem;
}

@media (min-width: 768px) {
  .ub-produit-details { grid-template-columns: 1fr 1fr; }
}

/* ─── Fiche produit ─────────────────────────────────────────────────────────
   Kadence borne le contenu à --global-content-width. La fiche doit filer aux
   bords de la fenêtre : la règle passe par la classe du thème enfant, toujours
   présente sur le body, pour reprendre la main sur le CSS inline de Kadence
   sans !important — le même arbitrage que le fond de page dans base.css. */
body.wp-child-theme-ubayd-clothing.single-product .site-container,
body.wp-child-theme-ubayd-clothing.single-product .content-container,
body.wp-child-theme-ubayd-clothing.single-product .entry-content {
  max-width: none;
  padding-inline: 0;
}

.ub-fiche {
  display: grid;
  gap: 0;
}

/* La fiche touche l'en-tête (demande client du 2026-08-06).
   Deux causes distinctes, et corriger l'une sans l'autre laisse le défaut
   visible : Kadence pose 80 px de marge haute sur `.content-area` — la bande
   blanche mesurée entre l'en-tête et la photo — et la barre porte un filet bas
   qui, une fois le contenu remonté contre elle, se lirait comme une soudure.

   Même levier que `.ub-page-flottante` pour l'accueil (assets/css/header.css) :
   la marge est neutralisée par une classe de contexte, jamais globalement, pour
   que le reste du site garde ses respirations. `single-product` est posée par
   WooCommerce sur le body — elle ne vaut que pour une fiche.

   Le filet de la barre est retiré ici et non dans `header.css` : c'est la fiche
   qui le rend inutile, et le lire à côté de la règle de marge évite d'en
   supprimer une seule des deux. */
.single-product .content-area {
  margin-block-start: 0;
}

.single-product .ub-barre {
  border-block-end: 0;
}

.ub-fiche__visuels {
  background: var(--ub-creme);
  /* Les visuels se touchent : c'est la pile qui porte ses propres séparations. */
  display: grid;
  gap: 0;
}

/* Fiche sans aucun visuel : le conteneur de gauche reste dans le document —
   les extensions branchées sur `woocommerce_before_single_product_summary` y
   rendent encore — mais il perd son fond, sinon il occupe une demi-page crème
   vide face à une colonne d'achat haute d'un écran. La bascule de la grille se
   fait plus bas, dans la requête de média qui pose les deux colonnes. */
.ub-fiche--sans-visuels .ub-fiche__visuels {
  background: none;
}

.ub-fiche__achat {
  background: var(--ub-panneau-fond);
}

/* Les deux retraits de la colonne vivent dans des variables parce que le retour
   de catégorie les retrouve en absolu (voir `.ub-fiche__retour`) : la zone de
   positionnement d'un absolu est le PADDING BOX, si bien qu'un zéro tombe sous
   la bordure et non au bord du contenu. Recopier les valeurs — dont un
   `clamp()` — les ferait diverger au premier ajustement. */
.ub-fiche__achat-corps {
  --ub-fiche-retrait: var(--ub-gouttiere-page);
  --ub-fiche-retrait-haut: 2rem;

  padding: var(--ub-fiche-retrait-haut) var(--ub-fiche-retrait) 3rem;
}

@media (min-width: 768px) {
  .ub-fiche {
    grid-template-columns: 1fr 1fr;
  }

  .ub-fiche--sans-visuels {
    grid-template-columns: 1fr;
  }

  /* Le collage n'a lieu que si la galerie est plus haute que la colonne : la
     classe est posée par le gabarit à partir de deux visuels. */
  .ub-fiche--collante .ub-fiche__achat-corps {
    position: sticky;
    top: var(--ub-barre-h);
  }

  .ub-fiche__achat-corps {
    --ub-fiche-retrait: clamp(1.5rem, 6vw, 5rem);

    display: grid;
    align-content: center;
    min-block-size: calc(100vh - var(--ub-barre-h));
    padding-inline: var(--ub-fiche-retrait);
    text-align: center;
  }
}

/* ─── Galerie de visuels ────────────────────────────────────────────────────
   Remplace la galerie flexslider de WooCommerce : la pile défile avec la page
   sur ordinateur, et devient une piste à balayage horizontal sous 768 px. */
.ub-galerie {
  display: grid;
  gap: 0;
  position: relative;
}

.ub-galerie__vue {
  margin: 0;
  /* Un rapport constant : les packshots n'ont pas tous la même hauteur, et une
     pile irrégulière ferait sauter le point actif d'une vue à l'autre. */
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  overflow: hidden;
  /* Référence de positionnement de l'image, qui est en absolu — voir plus bas. */
  position: relative;
}

/* L'image tient ENTIÈRE dans la vue, quel que soit son format.
   Le positionnement absolu n'est pas un caprice : `object-fit: contain` ne
   contraint rien tant que la boîte de l'image n'a pas de hauteur définie, et
   `block-size: 100%` n'en donnait pas — le pourcentage ne s'accroche pas à un
   parent dont la hauteur vient d'un `aspect-ratio`, il retombe sur `auto`,
   c'est-à-dire la hauteur intrinsèque du fichier. `inset: 0` définit les quatre
   bords, donc une vraie hauteur, et `contain` reprend son office.

   Trois autres pistes ont été mesurées et rejetées sur cette même page :
   `max-block-size: 100%` (même pourcentage, même retombée sur `auto`),
   `place-self: stretch` et `align-self: stretch` (l'étirement ne s'applique pas
   à un élément remplacé qui porte déjà un rapport intrinsèque). Toutes trois
   laissaient le packshot de l'huile à barbe — 462 × 1024, le plus vertical du
   catalogue — dépasser de 377 px sous sa vue, rogné par `overflow: hidden`.
   Le défaut était invisible sur les t-shirts, presque carrés, donc plus petits
   que leur vue : c'est ce qui l'avait laissé passer.

   `place-items: center` du bloc ci-dessus ne concerne plus l'image, sortie du
   flux ; il reste pour tout autre contenu qu'une vue viendrait à porter.

   Le sélecteur passe par `.ub-galerie` pour peser deux classes. Kadence pose
   `.woocommerce img { height: auto }` (woocommerce.min.css), de spécificité
   exactement égale à un `.ub-galerie__vue img` — et sa feuille est enfilée APRÈS
   celles du thème enfant, si bien qu'à égalité elle l'emportait. La hauteur
   retombait alors sur `auto` : pour un élément remplacé en absolu, `auto`
   signifie la hauteur du fichier et fait ignorer `bottom`, ce qui ramenait le
   débordement que `inset` venait de supprimer. */
/* De l'air autour du visuel, pour qu'il ne touche pas les bords du cadre
   (demande client du 2026-08-06).

   Il est porté par les décalages et la taille de l'image, NON par un `padding`
   sur le cadre : un élément en absolu se cale sur le padding box de son
   conteneur et ignore donc son retrait — essayé, mesuré, sans effet.

   Les deux déclarations doivent rester d'accord, d'où la variable : les
   décalages seuls ne suffisent pas, car une image en `auto` reprendrait la
   taille de son fichier et ferait ignorer `bottom`, ce qui ramènerait le
   débordement. Les pourcentages, eux, se résolvent bien ici : le conteneur de
   positionnement a une hauteur définie, contrairement au même calcul tenté en
   flux plus haut.

   L'air vaut 6 % de la hauteur en haut et en bas, 6 % de la largeur sur les
   côtés — c'est la base de résolution des pourcentages en CSS, et le léger
   écart entre les deux ne se lit pas sur un cadre 4/5. */
.ub-galerie__vue {
  --ub-visuel-air: 6%;
}

.ub-galerie .ub-galerie__vue img {
  block-size: calc(100% - 2 * var(--ub-visuel-air));
  inline-size: calc(100% - 2 * var(--ub-visuel-air));
  inset: var(--ub-visuel-air);
  object-fit: contain;
  position: absolute;
}

.ub-galerie__points {
  display: flex;
  gap: 0.55rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ub-galerie__point {
  background: rgb(var(--ub-encre-rgb) / 22%);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  block-size: 6px;
  inline-size: 6px;
  padding: 0;
  transition: background-color 200ms ease, scale 200ms ease;
}

.ub-galerie__point[aria-current='true'] {
  background: var(--ub-encre);
  scale: 1.35;
}

/* Mobile : une vue à la fois, balayage natif. Pas de JavaScript — le défilement
   du système garde son inertie et reste utilisable au clavier. */
@media (max-width: 767px) {
  .ub-galerie {
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .ub-galerie::-webkit-scrollbar { display: none; }

  .ub-galerie__vue { scroll-snap-align: center; }

  /* Les points sortent du flux de la piste : dans la grille en colonnes, ils
     compteraient comme une vue de plus et la piste défilerait sur du vide. */
  .ub-galerie__points {
    inset-block-end: 0.9rem;
    inset-inline: 0;
    justify-content: center;
    position: absolute;
    z-index: 1;
  }
}

/* Desktop : les points suivent le défilement le long du bord gauche, comme sur
   la maquette. */
@media (min-width: 768px) {
  .ub-galerie__points {
    flex-direction: column;
    /* `inset-inline-start` n'a aucun effet ici : combiné à `position: sticky` et
       `block-size: 0`, Chromium calcule le décalage (visible dans les styles
       calculés) sans jamais l'appliquer au rendu — le point reste collé au bord
       de fenêtre. `margin-inline-start` produit le même décalage visuel sans
       passer par les propriétés d'inset, et se comporte comme attendu. */
    margin-inline-start: var(--ub-gouttiere-page);
    position: sticky;
    top: 50vh;
    block-size: 0;
    z-index: 1;
  }
}

/* ─── Colonne d'achat ───────────────────────────────────────────────────────
   Retour catégorie, badge, titre, prix, attributs, bouton, puis les trois
   liens vers le panneau d'informations. */
/* Le retour se lit à gauche et non au centre : c'est une sortie de page, pas un
   élément de la présentation du produit, que la colonne centre par ailleurs
   toute entière (demande client du 2026-08-06). */
.ub-fiche__retour {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  margin: 0 0 2rem;
  text-align: start;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  /* Le retour quitte le flux pour se caler tout en haut de la colonne blanche.
     En desktop le corps est centré verticalement sur la hauteur de la fenêtre
     (`align-content: center`), et le retour y était emporté au milieu, à hauteur
     du titre.

     Les décalages reprennent les variables de retrait du corps : la zone de
     positionnement d'un absolu est le padding box, donc zéro tomberait sous la
     bordure et collerait le retour au bord de la colonne — mesuré.

     La référence de positionnement est le corps lui-même : `position: sticky`
     en fait déjà un conteneur pour les fiches collantes, et `relative` prend le
     relais pour celles qui ne le sont pas — moins de deux visuels — sans jamais
     entrer en conflit, la règle `--collante` étant la plus spécifique. */
  .ub-fiche__achat-corps {
    position: relative;
  }

  .ub-fiche__retour {
    inset-block-start: var(--ub-fiche-retrait-haut);
    inset-inline-start: var(--ub-fiche-retrait);
    margin: 0;
    position: absolute;
  }
}

.ub-fiche__retour a {
  color: var(--ub-gris);
  text-decoration: none;
}

.ub-fiche__retour a:hover,
.ub-fiche__retour a:focus-visible {
  color: var(--ub-encre);
}

/* Le badge de la boucle est posé en absolu sur sa vignette (home.css). Dans la
   colonne d'achat il n'a pas de vignette hôte : il se calait en haut à gauche
   du premier ancêtre positionné, très au-dessus du titre et hors de l'axe
   centré de la colonne. Il reprend donc le flux, juste au-dessus du titre.
   Sans fond ni remplissage : la pastille blanche du carrousel serait invisible
   sur une colonne déjà blanche. */
.ub-fiche__achat .ub-badge {
  background: none;
  color: var(--ub-gris);
  display: inline-block;
  font-size: 0.65rem;
  inset: auto;
  justify-self: center;
  letter-spacing: var(--ub-titre-espace);
  margin-block-end: 0.7rem;
  padding: 0;
  position: static;
  text-transform: uppercase;
}

.ub-fiche__achat .product_title {
  font-family: var(--ub-serif);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  letter-spacing: 0.02em;
  line-height: 1.25;
  margin: 0 0 1rem;
  text-transform: uppercase;
}

/* ─── Taille et ajout au panier ─────────────────────────────────────────────
   Le formulaire natif arrive habillé par Kadence : bouton bleu délavé, hors
   charte, et sélecteur de taille au style du navigateur.

   Le préfixe est le même arbitrage que le fond de page dans base.css, en un cran
   plus haut : WooCommerce cible ce bouton par
   `.woocommerce div.product .button.single_add_to_cart_button` (quatre classes),
   et sa feuille est enfilée après celles du thème enfant. Cinq classes reprennent
   la main sans `!important`. Mesuré, pas supposé : à quatre classes le bouton
   restait bleu. */
body.wp-child-theme-ubayd-clothing.single-product .ub-fiche__achat .cart .single_add_to_cart_button {
  background: var(--ub-encre);
  border: 1px solid var(--ub-encre);
  border-radius: var(--ub-rayon-bouton);
  color: var(--ub-creme);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.95rem;
  /* La pleine largeur passe par l'étirement du conteneur souple et non par
     `inline-size: 100%` : la largeur du bouton est fixée ailleurs dans la
     cascade WooCommerce, l'alignement croisé ne l'est pas. */
  align-self: stretch;
  /* Kadence fixe une hauteur de bouton : sans cette remise à `auto`, le
     remplissage ci-dessous n'ouvrirait pas le bouton, il écraserait son texte. */
  block-size: auto;
  letter-spacing: 0.02em;
  line-height: 1.3;
  padding: 1rem;
  text-transform: none;
  transition: opacity 200ms ease;
}

/* `box-shadow` en plus du fond : Kadence pose une ombre portée de 25 px sur tout
   `button:hover`, et ce bouton n'a pas de classe `ub-` — la neutralisation
   générique de assets/css/kadence-integration.css ne l'atteint donc pas. */
body.wp-child-theme-ubayd-clothing.single-product .ub-fiche__achat .cart .single_add_to_cart_button:hover,
body.wp-child-theme-ubayd-clothing.single-product .ub-fiche__achat .cart .single_add_to_cart_button:focus,
body.wp-child-theme-ubayd-clothing.single-product .ub-fiche__achat .cart .single_add_to_cart_button:active {
  background: var(--ub-encre);
  box-shadow: none;
  color: var(--ub-creme);
  opacity: 0.88;
}

body.wp-child-theme-ubayd-clothing.single-product .ub-fiche__achat .cart .single_add_to_cart_button:focus-visible {
  outline: 2px solid var(--ub-terra);
  outline-offset: 3px;
}

/* WooCommerce ne pose pas l'attribut `disabled` sur une taille en rupture : son
   script de déclinaisons ajoute la classe. L'état doit rester lisible. */
body.wp-child-theme-ubayd-clothing.single-product .ub-fiche__achat .cart .single_add_to_cart_button.disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

/* La taille, la quantité et le bouton s'empilent.

   Pas d'`align-items` ici, délibérément : les éléments gardent leur étirement
   par défaut. Un `align-items: center` avait été essayé et retiré — il réduisait
   chaque enfant à son contenu, y compris le conteneur qui porte le bouton, et
   celui-ci ne pouvait alors plus atteindre la largeur de la colonne quelles que
   soient ses propres règles. */
.ub-fiche__achat form.cart {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/* Seule la quantité reste à sa taille, au milieu. */
.ub-fiche__achat form.cart > .quantity,
.ub-fiche__achat .variations_button > .quantity {
  align-self: center;
}

/* Le champ de quantité de la fiche est figé à 1 (demande client du
   2026-08-05, inc/product-quantite.php) : le gabarit substitué ne rend plus
   qu'un `input[type=hidden]`, déjà retiré du rendu visuel et du parcours au
   clavier par nature. `display: none` sur son conteneur évite seulement que
   la grille flexible du formulaire ne réserve un espacement (`gap`) autour
   d'une boîte sans contenu visible — l'espacement avant le bouton reste ainsi
   celui d'un seul `gap`, généreux, entre la ligne « Taille » et le bouton. */
.ub-fiche-quantite-figee {
  display: none;
}

.ub-fiche__achat .variations_button {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-block-start: 0.6rem;
}

/* Harmonisation sobre du sélecteur de taille, pas une refonte : il reprend le
   rayon et la largeur du bouton, et laisse la charte décider de ses couleurs. */
body.wp-child-theme-ubayd-clothing.single-product .ub-fiche__achat .variations select {
  background: var(--ub-panneau-fond);
  border: 1px solid var(--ub-ligne);
  border-radius: var(--ub-rayon-bouton);
  color: var(--ub-encre);
  font-family: inherit;
  font-size: 0.9rem;
  inline-size: 100%;
  padding: 0.85rem 1rem;
}

body.wp-child-theme-ubayd-clothing.single-product .ub-fiche__achat .variations select:focus-visible {
  outline: 2px solid var(--ub-terra);
  outline-offset: 2px;
}

.ub-fiche__achat .variations,
.ub-fiche__achat .variations tbody,
.ub-fiche__achat .variations tr,
.ub-fiche__achat .variations th,
.ub-fiche__achat .variations td {
  border: 0;
  display: block;
  inline-size: 100%;
  padding: 0;
  text-align: inherit;
}

.ub-fiche__achat .variations .label {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  margin-block-end: 0.5rem;
  text-transform: uppercase;
}

/* La mention de stock arrive en bleu de lien Kadence, juste au-dessus du
   bouton : même harmonisation sobre que le sélecteur.
   Depuis le retrait de la mention sur les produits disponibles
   (inc/product-stock.php), seuls la rupture et la précommande passent encore
   ici — la règle générique reste, elle porte la forme commune aux deux. */
/* Le préfixe `.woocommerce div.product` n'est pas décoratif : Kadence pose
   `.woocommerce div.product .stock { color: var(--global-palette-highlight) }`,
   dont le `div` suffit à l'emporter sur un sélecteur de même nombre de classes.
   Mesuré le 2026-08-08 : les deux règles ci-dessous étaient MORTES depuis leur
   écriture, et la mention s'affichait en bleu de lien — y compris pour une
   rupture, qui n'a donc jamais été terra à l'écran. Aucun test ne pouvait le
   dire : ils vérifiaient la classe, pas la couleur obtenue. */
.woocommerce div.product .ub-fiche__achat .stock {
  color: var(--ub-gris);
  font-size: 0.8rem;
  margin: 0;
}

.woocommerce div.product .ub-fiche__achat .stock.out-of-stock {
  color: var(--ub-terra);
}

/* « Bientôt disponible » n'est pas une rupture : le terra dit l'incident, le
   camel de la marque dit l'attente. La classe REMPLACE `out-of-stock`
   (inc/domain/disponibilite.php) plutôt que de s'y ajouter — les deux couleurs
   se disputeraient sinon la même déclaration, et l'ordre du fichier trancherait
   à notre place. */
.woocommerce div.product .ub-fiche__achat .stock.ub-bientot {
  color: var(--ub-camel);
  font-weight: 500;
}

.ub-fiche__achat .reset_variations {
  color: var(--ub-gris);
  display: inline-block;
  font-size: 0.7rem;
  margin-block-start: 0.6rem;
}

/* ─── Ligne « Taille » et panneau de choix ──────────────────────────────────
   Le menu déroulant natif quitte la VUE, jamais le document : c'est encore lui
   que WooCommerce écoute pour résoudre la déclinaison et remplir `variation_id`
   (inc/product-taille.php). D'où ce masquage plutôt qu'un `display: none` :
   l'élément garde une boîte mesurable, reste `:visible` au sens de jQuery, et
   les scripts qui le cherchent le trouvent toujours.

   La classe vient du body (`ubayd_taille_body_class`) et non d'un sélecteur
   large : sur un produit décliné sur deux attributs, la ligne ne se rend pas et
   le menu natif doit rester le moyen d'acheter.

   Le préfixe `body.wp-child-theme-ubayd-clothing.single-product` est le même
   arbitrage que celui du bouton d'ajout au panier plus bas dans cette feuille :
   Kadence pose `.woocommerce div.product form.cart .variations { width: 100% }`
   dans `woocommerce.min.css`, chargée après cette feuille, dont la spécificité
   (quatre classes, deux sélecteurs de type) dépassait celle du sélecteur à trois
   classes essayé d'abord — la largeur restait alors à 720px, mesurée dans un
   vrai navigateur, quand seule la hauteur avait suivi `block-size`. Sans effet
   visuel, `clip-path: inset(50%)` masquant déjà tout, mais contraire à
   l'intention documentée ci-dessus (une boîte 1×1) et donc laissé tel quel
   plutôt que supposé correct. Cinq classes, comme pour le bouton, l'emportent
   sans `!important`. */
body.wp-child-theme-ubayd-clothing.single-product.ub-taille-panneau .ub-fiche__achat .variations {
  block-size: 1px;
  clip-path: inset(50%);
  inline-size: 1px;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Compacte et centrée, comme le titre et le prix — une mention cliquable, pas
   un champ de formulaire (demande client du 2026-08-05). Ni filet ni pleine
   largeur : `text-align: center` sur le paragraphe centre le bouton, réduit à
   son contenu par `display: inline-flex`. */
.ub-fiche-taille {
  margin: 0.4rem 0 0;
  text-align: center;
}

.ub-fiche-taille__ligne {
  align-items: center;
  background: none;
  border: 0;
  border-radius: var(--ub-rayon-bouton);
  /* Kadence pose une ombre portée sur tout `button` générique
     (`global.min.css`, chargée après cette feuille) : mesurée par
     `getComputedStyle`, `rgba(0, 0, 0, 0.1) 0px 15px 25px -7px`. C'est un
     résidu de bouton plein, contraire à l'intention d'une simple mention
     cliquable ; la retirer ici évite un halo visible autour du texte. */
  box-shadow: none;
  color: var(--ub-encre);
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 0.85rem;
  gap: 0.35rem;
  justify-content: center;
  /* La ligne est compacte à l'œil, pas au doigt : le remplissage garde une
     cible tactile confortable malgré l'absence de filet et de pleine largeur. */
  padding: 0.75rem 1rem;
}

/* Même résidu bleu que celui déjà neutralisé sur les onglets du panneau
   d'informations (cf. commentaire A2 plus bas dans cette feuille) : Kadence
   pose `button:hover, button:focus, button:active { background:
   var(--global-palette-btn-bg-hover) }` dans `global.min.css`, chargée après
   cette feuille. Sa spécificité (un sélecteur de type + une pseudo-classe)
   dépasse celle de la règle `background: none` ci-dessus (une seule classe) —
   visible dès la fermeture du panneau, qui rend le focus à cette ligne. Un
   sélecteur à deux classes l'emporte, sans `!important`, même arbitrage que
   pour les onglets. */
.ub-fiche-taille .ub-fiche-taille__ligne:hover,
.ub-fiche-taille .ub-fiche-taille__ligne:focus,
.ub-fiche-taille .ub-fiche-taille__ligne:active {
  background: none;
  box-shadow: none;
}

.ub-fiche-taille__libelle {
  color: var(--ub-gris);
}

/* La valeur choisie se lit comme une valeur affirmée, pas comme une invite —
   qu'elle porte l'invitation au choix ou la taille retenue, elle reste dans la
   couleur d'encre du thème, plus marquée que le libellé. */
.ub-fiche-taille__valeur {
  color: var(--ub-encre);
  font-weight: 600;
}

.ub-fiche-taille__ligne:hover .ub-fiche-taille__valeur {
  color: var(--ub-terra);
}

.ub-fiche-taille__ligne:focus-visible {
  outline: 2px solid var(--ub-terra);
  outline-offset: 3px;
}

.ub-fiche-taille__chevron {
  color: var(--ub-gris);
  font-size: 1.1rem;
  line-height: 1;
}

.ub-panneau-taille__titre {
  font-family: var(--ub-serif);
  font-size: 1.1rem;
  margin: 0;
}

.ub-panneau-taille__guide {
  border-block-end: 1px solid var(--ub-ligne);
  margin: 0;
  padding: 0 var(--ub-gouttiere-page) 1rem;
}

.ub-panneau-taille__guide-lien {
  background: none;
  border: 0;
  color: var(--ub-gris);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.8rem;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* Même neutralisation que pour les liens de la colonne : ce bouton est nu, le
   style de Kadence lui posait un fond bleu au survol. */
.ub-panneau-taille__guide-lien:hover,
.ub-panneau-taille__guide-lien:focus,
.ub-panneau-taille__guide-lien:active {
  background: none;
}

.ub-panneau-taille__guide-lien:hover,
.ub-panneau-taille__guide-lien:focus-visible {
  color: var(--ub-terra);
}

.ub-panneau-taille__guide-lien:focus-visible {
  outline: 2px solid var(--ub-terra);
  outline-offset: 3px;
}

.ub-panneau-taille__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Une taille par ligne, séparées par un filet — la maquette du client. */
.ub-panneau-taille__choix {
  align-items: center;
  border-block-end: 1px solid var(--ub-ligne);
  cursor: pointer;
  display: flex;
  font-size: 0.9rem;
  gap: 0.8rem;
  padding: 1rem var(--ub-gouttiere-page);
}

.ub-panneau-taille__radio {
  accent-color: var(--ub-encre);
  block-size: 1rem;
  flex: none;
  inline-size: 1rem;
  margin: 0;
}

.ub-panneau-taille__nom {
  flex: 1 1 auto;
}

/* La taille épuisée reste lisible et reste annoncée : la masquer priverait le
   visiteur de l'information qu'elle existe. */
.ub-panneau-taille__choix--epuise {
  color: var(--ub-gris);
  cursor: not-allowed;
  opacity: 0.55;
}

.ub-panneau-taille__mention {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* L'anneau se pose sur la ligne entière : le bouton radio lui-même fait 1rem,
   un anneau à sa taille se verrait à peine. */
.ub-panneau-taille__choix:has(.ub-panneau-taille__radio:focus-visible) {
  outline: 2px solid var(--ub-terra);
  outline-offset: -2px;
}

/* Les trois liens suivent le bouton de près, sans filet au-dessus d'eux
   (demande client du 2026-08-06). Le vide de 138 px mesuré avant ce resserrage
   ne venait pas d'une seule valeur : la marge basse que Kadence pose sur
   `form.cart` s'ajoutait à la marge haute des liens puis à leur retrait, et
   couper la seule marge des liens n'aurait donc pas suffi — d'où la règle sur le
   formulaire, juste en dessous.
   Le filet du conteneur disparaît, pas ceux des liens empilés sous 768 px : ils
   viennent de `.ub-fiche__lien` et portent la séparation entre les lignes. */
.ub-fiche__liens {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  justify-content: center;
  margin-block-start: 1.2rem;
}

/* WooCommerce donne 2em de marge basse au formulaire d'ajout au panier.
   Neutralisé sur la seule fiche : c'est le dernier écart qui séparait encore les
   liens du bouton.

   Le sélecteur est long à dessein. La règle d'origine,
   `.woocommerce div.product form.cart`, pèse trois classes et deux éléments ;
   un `.ub-fiche__achat form.cart` pourtant plus précis à la lecture perdait
   l'arbitrage et laissait les 34 px en place — vérifié en mesurant. `.ub-fiche`
   porte la classe `product` de WooCommerce, ce qui permet de reprendre son
   propre motif plutôt que d'empiler des classes au hasard, et évite le
   `!important` qu'un ajustement ultérieur ne pourrait plus surcharger.

   Reste sous le bouton l'espace réservé au lien « Effacer » de WooCommerce,
   masqué en `visibility` jusqu'au choix d'une taille : il n'est pas retiré, sans
   quoi la page sauterait de 47 px à la première sélection. */
.ub-fiche.product .ub-fiche__achat form.cart {
  margin-block-end: 0;
}

.ub-fiche__lien {
  background: none;
  border: 0;
  color: var(--ub-encre);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.8rem;
  padding: 0;
}

/* Le fond reste transparent dans tous les états. Sans cette déclaration, le
   style de bouton de Kadence reprenait la main et posait son bleu au survol
   (voir assets/css/kadence-integration.css, qui neutralise l'ombre associée).
   `:focus` et `:active` comptent autant que `:hover` : Kadence les habille de la
   même façon, et le bleu revenait donc au clic et au focus clavier. */
.ub-fiche__lien:hover,
.ub-fiche__lien:focus,
.ub-fiche__lien:active {
  background: none;
}

.ub-fiche__lien:hover,
.ub-fiche__lien:focus-visible {
  color: var(--ub-terra);
}

@media (max-width: 767px) {
  .ub-fiche__liens {
    flex-direction: column;
    gap: 0;
  }

  /* Empilés, chaque lien devient une ligne à part entière, séparée comme les
     rubriques du pied de page. */
  .ub-fiche__lien {
    border-block-end: 1px solid var(--ub-ligne);
    padding-block: 0.9rem;
    text-align: start;
    inline-size: 100%;
  }
}

.ub-panneau-produit__titre {
  font-family: var(--ub-serif);
  font-size: 1.1rem;
  margin: 0;
}

/* A1 — les trois libellés tiennent dans la largeur du panneau.
   « Détails du produit », « Guide des tailles » et « Livraison et retours » ne
   tenaient pas : la barre défilait, et le troisième paraissait coupé au bord dès
   l'ouverture. Trois leviers combinés plutôt qu'un seul poussé à l'extrême —
   une police plus petite, des espacements resserrés, et le panneau élargi sous
   768 px, où la contrainte est la plus dure (86vw d'un iPhone 14 ne laissent que
   335 px). `text-overflow: ellipsis` est écarté : un libellé abrégé n'est pas un
   libellé lisible.
   Le `overflow-x` reste, en filet de sécurité : un client qui rebaptise un
   onglet ne doit pas rendre la rubrique inatteignable. */
/* Sur grand écran, le panneau va jusqu'au milieu de la page. À 420 px, les deux
   colonnes du contenu (« La pièce » / « Matière ») tombaient à cinq ou six mots
   par ligne : le texte était haché et la rubrique demandait de faire défiler pour
   une poignée de phrases. La moitié de l'écran leur rend une longueur de ligne
   lisible.
   L'imbrication `min(max(...))` plutôt qu'un `clamp()` : `clamp(420px, 50vw,
   94vw)` retournerait 420 px sur un téléphone, où 94vw vaut moins que la borne
   basse — soit un panneau plus large que l'écran. Ici, `max` fixe le plancher de
   420 px et `min` laisse 94vw reprendre la main dès qu'il devient le plus petit
   des deux, ce qui préserve exactement le comportement mobile d'origine. */
#ub-panneau-produit {
  inline-size: min(max(420px, 50vw), 94vw);
}

.ub-panneau-produit__onglets {
  border-block-end: 1px solid var(--ub-ligne);
  display: flex;
  gap: 0.9rem;
  justify-content: space-between;
  overflow-x: auto;
  padding-inline: 1rem;
  scrollbar-width: none;
}

.ub-panneau-produit__onglets::-webkit-scrollbar { display: none; }

.ub-panneau-produit__onglet {
  /* A2 — le fond bleu au clic était la sélection de texte du navigateur : deux
     clics rapides sur un onglet surlignaient son libellé. Rien à voir avec
     l'état actif, qui est le seul soulignement sombre ci-dessous. */
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  border-block-end: 2px solid transparent;
  color: var(--ub-gris);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.72rem;
  padding: 0 0 0.7rem;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* A2 (suite) — le second fond bleu venait de l'anneau de focus natif, que la
   souris déclenche aussi. On le retire du clic SANS le retirer du clavier :
   `:focus-visible` le rend au tabulateur, aux jetons du thème, comme le bouton
   d'ajout au panier et les liens de la colonne. Un `outline: none` sec aurait
   rendu la barre d'onglets impossible à suivre au clavier. */
.ub-panneau-produit__onglet:focus {
  outline: none;
}

.ub-panneau-produit__onglet:focus-visible {
  outline: 2px solid var(--ub-terra);
  outline-offset: 3px;
}

/* A2 (suite) — un troisième fond bleu, repéré seulement sur le projet mobile
   (WebKit réel derrière le préréglage « iPhone 14 », quand Chromium ne montrait
   rien) : Kadence pose une règle globale
   `button:hover, button:focus, button:active, … { background:
   var(--global-palette-btn-bg-hover); }` dans `global.min.css`, chargée après
   nos feuilles. Sa spécificité (un sélecteur de type + une pseudo-classe)
   dépasse celle de `.ub-panneau-produit__onglet { background: none }` (une
   seule classe) : elle l'emporte sur ce point précis, silencieusement, et
   colore l'onglet actif ou survolé en bleu de palette au lieu du fond neutre
   voulu ici. Une sélectivité supérieure à la sienne, sans `!important`, neutralise
   les trois états d'un coup — l'ordre des feuilles n'a pas besoin d'y changer. */
.ub-panneau-produit__onglets .ub-panneau-produit__onglet:hover,
.ub-panneau-produit__onglets .ub-panneau-produit__onglet:focus,
.ub-panneau-produit__onglets .ub-panneau-produit__onglet:active {
  background: none;
}

.ub-panneau-produit__onglet[aria-selected='true'] {
  border-block-end-color: var(--ub-encre);
  color: var(--ub-encre);
}

.ub-panneau-produit__contenu {
  font-size: 0.9rem;
  line-height: 1.75;
  padding: 1.8rem var(--ub-gouttiere-page);
}

/* Le récit garde sa mise en forme, sans les filets qui le séparaient du reste
   de la colonne d'achat : dans le panneau il n'a plus de voisin. */
.ub-panneau-produit__contenu .ub-produit-recit {
  border: 0;
  margin-block: 0 1.4rem;
  padding-block: 0;
}

/* ─── Vous pourriez aussi aimer ─────────────────────────────────────────── */
.ub-similaires {
  background: var(--ub-panneau-fond);
  padding-block: 3.5rem 4.5rem;
}

/* Le centrage de la tête et le masquage du lien « Tout voir » vivaient ici :
   cette bande les voulait quand les autres carrousels gardaient un titre à
   gauche et un lien à droite. Depuis le 2026-08-09 tous les carrousels sont
   centrés et le lien a été retiré du balisage (`inc/carrousel.php`) : les deux
   règles ne visaient plus rien de particulier et sont parties. */