.ub-piece { padding-block: 2.6rem; }

.ub-piece__titre {
  font-family: var(--ub-serif);
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  margin-block: 0.5rem 0.6rem;
}

.ub-piece__texte {
  color: var(--ub-gris);
  font-size: 0.92rem;
  line-height: 1.8;
  max-inline-size: 34ch;
}

/* --- bloc soins : deux moitiés, ambiance à gauche, panneau crème à droite ---
   Aucune gouttière ne sépare les deux moitiés, qui doivent se toucher comme sur
   la maquette.

   La bande est portée par un hôte plein cadre (`.ub-soins-hote`, `alignfull`),
   exactement comme le carrousel l'est par `.ub-carrousel-hote`, et se retire
   ensuite de la gouttière de la page : son bord gauche tombe donc là où
   commence le contenu du carrousel, à toutes les tailles d'écran — demande du
   client du 2026-08-01. Réutiliser l'hôte plein cadre du thème plutôt que
   calculer un débord en `100vw` nous épargne la barre de défilement, que `vw`
   compte et qui décalerait la bande par rapport au carrousel.

   Le retrait est une marge de la bande, pas une marge intérieure de l'hôte :
   Kadence remet à zéro les marges intérieures de tout `.alignfull` du contenu,
   et l'emporterait en spécificité.

   La bande garde ainsi un retrait des deux côtés et ne touche jamais les bords
   de la fenêtre, ce que le client a demandé explicitement.

   Le retrait vient de `--ub-gouttiere-page` (`base.css`) et non de l'alias
   `--ub-carrousel-gouttiere` : `carrousel.css` n'est enfilée que sur les pages
   portant le carrousel (inc/assets.php), alors que le pattern peut être inséré
   n'importe où. Le jeton global est défini sur toute page, donc sans repli ni
   point de rupture à recopier ici.

   Le crème est posé sur le bloc racine, pas sur le panneau : celui-ci l'hérite
   par transparence. Si le visuel d'ambiance manque, WordPress supprime au rendu
   le bloc image dont le `src` est vide : il ne reste aucune figure, le panneau
   glisse dans la première moitié de la grille et la seconde reste crème et vide.
   La bande ne s'effondre pas, mais l'ordre visuel s'inverse. */
.ub-soins {
  background: var(--ub-creme);
  border-radius: var(--ub-rayon-bande);
  display: grid;
  gap: 0;
  grid-template-columns: 1fr 1fr;
  margin-block: 2.6rem;
  margin-inline: var(--ub-gouttiere-page);
  overflow: hidden;
}

/* Tout `wp:group` de WordPress intercale un `.wp-block-group__inner-container`
   entre lui et ses enfants — `.ub-soins` et `.ub-soins__panneau` en sont deux.
   `display: contents` efface ce conteneur de la mise en forme : la grille et
   le centrage flex agissent directement sur les vrais enfants (ambiance,
   panneau, puis titre/packshot/légende/bouton), que WordPress choisisse ou
   non d'émettre ce conteneur. */
.ub-soins .wp-block-group__inner-container {
  display: contents;
}

/* `!important` sur la marge : Kadence pose une marge basse sur toute
   `figure.wp-block-image` dans le contenu, qui décollerait l'ambiance du bord
   de la grille. */
.ub-soins__ambiance {
  margin: 0 !important;
  overflow: hidden;
}

.ub-soins__ambiance img {
  block-size: 100%;
  display: block;
  inline-size: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}

.ub-soins__panneau {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3.2rem 1.6rem;
  text-align: center;
}

.ub-soins__titre {
  font-family: var(--ub-serif);
  font-size: clamp(1.4rem, 3.2vw, 2.2rem);
  font-weight: 400;
  letter-spacing: var(--ub-titre-espace);
  margin: 0;
  text-transform: uppercase;
}

/* Le flacon occupait 41 % du panneau, jugé trop grand par le client le
   2026-08-01 : ramené à environ 30 %. Le pourcentage se calcule sur la boîte de
   contenu du panneau, marges intérieures déduites — d'où 32 % ici pour un
   flacon qui mesure bien ~30 % de la largeur visible du panneau. */
.ub-soins__produit {
  margin: 2.2rem 0 !important;
  max-inline-size: 32%;
}

/* Le packshot est centré optiquement, pas géométriquement : le PNG porte une
   ombre portée qui s'étend vers la droite, si bien qu'une image centrée sur sa
   boîte laisse le flacon paraître décalé à gauche (constat du client du
   2026-08-02).

   Le décalage est mesuré, pas estimé. Sur `golden-oud-transparent` (462px de
   large), les pixels franchement opaques du flacon — capuchon, col doré,
   étiquette, base — se centrent tous sur x ≈ 167, alors que le centre de la
   boîte tombe à 231 : le flacon est donc 64px, soit 13,85 % de la largeur, à
   gauche du centre. La translation le remet dans l'axe.

   `translate` plutôt qu'une marge : la boîte de la figure ne bouge pas, donc le
   flacon se recentre sans déplacer la légende ni le bouton, et le décalage reste
   proportionnel à la taille affichée de l'image à toutes les largeurs d'écran.

   Le jour où le client remplace le packshot depuis WooCommerce, ce chiffre ne
   vaut plus : une image détourée sans ombre, ou avec une ombre symétrique, doit
   repasser à 0. La valeur vit donc dans un jeton, seul endroit à corriger. */
.ub-soins__produit img {
  /* Repassé à 0 le 2026-08-09, cas prévu par le commentaire ci-dessus : le
     packshot en base a été remplacé par une version où le flacon est déjà
     centré. Mesuré sur le PNG servi, pixels sombres isolés comme le fait
     soins.spec.js — le flacon occupe x=607..1081 sur 1687 de large, centre à
     844 pour un cadre centré à 843, soit 0,03 % d'écart. La compensation ne
     corrigeait donc plus rien : elle décalait le flacon de 27 px vers la
     droite, ce que le test attrapait sans qu'on l'ait relié à cette cause. */
  --ub-packshot-recentrage: 0%;

  block-size: auto;
  display: block;
  inline-size: 100%;
  translate: var(--ub-packshot-recentrage);
}

.ub-soins__legende {
  color: var(--ub-gris);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  margin: 0 0 1.6rem;
}

/* Sélecteur renforcé à dessein : `kadence-integration.css` pose
   `.entry-content .wp-block-button__link.wp-element-button { border-radius: 0; }`
   pour neutraliser le rayon 3px que Kadence impose par défaut
   (`global.min.css`), et cette règle compte trois classes — plus que les deux
   des présentes, qui perdaient donc la course à la spécificité malgré un
   chargement postérieur. Reprendre `.entry-content` et cibler aussi
   `.wp-element-button` porte le sélecteur à quatre classes : la pilule de la
   maquette l'emporte sans `!important`.

   Seul le rayon manquait : le fond transparent, le filet d'encre et la couleur
   du texte viennent déjà de la règle `.is-style-outline` de
   `kadence-integration.css`, que ce bouton porte. Les redéclarer ici n'aurait
   fait qu'un second endroit à corriger le jour où la charte bouge. */
.entry-content .ub-soins__bouton .wp-block-button__link.wp-element-button {
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  padding: 0.85rem 2.6rem;
  text-transform: uppercase;
}

/* Emplacement laissé pour le visuel du client : discret, pas une image
   factice qui donnerait une fausse impression de contenu final. */
.ub-attente-visuel {
  align-items: center;
  background: var(--ub-creme);
  border: 1px dashed var(--ub-ligne);
  color: var(--ub-gris);
  display: flex;
  font-size: 0.75rem;
  justify-content: center;
  letter-spacing: 0.08em;
  min-block-size: 16rem;
  text-transform: uppercase;
}

/* Sur mobile, l'alternance gauche/droite n'a plus de sens : tout s'empile
   dans l'ordre du document. */
@media (max-width: 767px) {
  .ub-piece .wp-block-columns { gap: 1.2rem; }

  /* Une seule colonne : l'ambiance passe au-dessus du panneau. Sans ratio
     imposé, l'image perdrait toute hauteur une fois la grille dépliée. */
  .ub-soins { grid-template-columns: 1fr; }

  .ub-soins__ambiance { aspect-ratio: 4 / 5; }

  .ub-soins__panneau { padding: 2.4rem 1.2rem; }
}