/* ===== Tuile de base ===== */
.so-tile-widget {
  position: relative;
  display: block;
  width: 100%;
  background-color: var(--bg);
  text-decoration: none;
  transition: background-color 0.3s ease;
  overflow: hidden;
}
.so-tile-widget:hover {
  background-color: var(--bg-hover);
}

/* ===== Image cover/contain ===== */
.so-tile-widget.has-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--img);
  background-position: center;
  background-repeat: no-repeat;
  opacity: var(--img-opacity, 0.6);

  /* Zoom fluide sur l'image */
  transform: scale(1);
  transform-origin: center center;
  transition: opacity 0.3s ease, transform 0.6s ease;
  will-change: transform, opacity;

  pointer-events: none;
  z-index: 0;
}
.so-tile-widget.has-image.img-cover::before   { background-size: cover; }
.so-tile-widget.has-image.img-contain::before { background-size: auto; }
.so-tile-widget.has-image.img-right::before { background-size: auto; background-position: right 2rem center;}

.so-tile-widget.has-image:hover::before {
  opacity: var(--img-opacity-hover, 0.8);
  transform: scale(1.06); /* ajuste 1.04–1.10 selon l’effet désiré */
}

/* ===== Voile (scrim) ===== */
.so-tile-widget.has-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim-color, #000);
  opacity: var(--scrim-opacity, 0.35);
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}
.so-tile-widget.has-image:hover::after {
  opacity: var(--scrim-opacity-hover, 0.5);
}

/* ===== Zone de contenu ===== */
.so-tile-widget .so-tile-content {
  position: absolute;
  inset: 0;
  display: flex;
  padding: 2rem;
  z-index: 2;

  /* défaut centrée, surchargé par classes pos-... */
  justify-content: center;
  align-items: center;
}

/* Positionnement horizontal */
.so-tile-widget.pos-h-left  .so-tile-content { justify-content: flex-start; }
.so-tile-widget.pos-h-center .so-tile-content { justify-content: center; }
.so-tile-widget.pos-h-right .so-tile-content { justify-content: flex-end; }

/* Positionnement vertical */
.so-tile-widget.pos-v-top    .so-tile-content { align-items: flex-start; }
.so-tile-widget.pos-v-middle .so-tile-content { align-items: center; }
.so-tile-widget.pos-v-bottom .so-tile-content { align-items: flex-end; }

/* ===== Titre ===== */
.so-tile-widget .so-tile-title {
  margin: 0;
  font-size: 2rem;
  color: var(--title);
  transition: color 0.3s ease, transform 0.3s ease;
  line-height: 1.2;
  /*text-transform: uppercase; /* si tu l’utilises */
  text-align: center;        /* défaut */
}

/* Alignement du texte */
.so-tile-widget.pos-h-left  .so-tile-title { text-align: left; }
.so-tile-widget.pos-h-center .so-tile-title { text-align: center; }
.so-tile-widget.pos-h-right .so-tile-title { text-align: right; }

/* Ombre activable */
.so-tile-widget.shadow-on  .so-tile-title { text-shadow: 0 2px 6px rgba(0,0,0,.45); }
.so-tile-widget.shadow-off .so-tile-title { text-shadow: none; }

/* Hover titre (optionnel, si tu veux le scale) */
.so-tile-widget:hover .so-tile-title {
  color: var(--title-hover);
  /* transform: scale(1.1); */
}