descendant, donc le bouton, qui prend alors la taille de
* l'image — et son `border-radius: 999px` en fait un gros rond rouge. Le
* `:not(#individual-image)` donne à ce sélecteur le poids d'un identifiant :
* `!important` est le seul moyen de repasser devant.
* ------------------------------------------------------------------- */
.mpn-pin .mpn-pin-btn {
width: auto !important;
height: auto !important;
}
/* Le conteneur s'intercale entre la figure et l'image, là où la galerie
* attend un enfant direct. Ces deux règles lui font tenir le rôle du
* que le cœur y met lui-même — sans quoi l'image perd son recadrage carré et
* la vignette ne remplit plus sa case. */
.wp-block-gallery.has-nested-images figure.wp-block-image > .mpn-pin {
display: block;
flex-direction: column;
flex-grow: 1;
margin: 0;
}
.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image > .mpn-pin {
display: flex;
}
/* Écrans tactiles : aucun survol possible, le bouton reste visible. */
@media (hover: none) {
.mpn-pin-btn {
opacity: 1;
pointer-events: auto;
transform: none;
/* Un peu plus discret, puisqu'il ne s'efface jamais. */
background-color: rgba(230, 0, 35, .92);
}
}
@media (prefers-reduced-motion: reduce) {
.mpn-pin-btn {
transition: none;
}
}