/*!

 * Module: picturehome

 * Affiche une image pleine largeur avec texte centré (blanc + ombre),

 * coins arrondis en bas à gauche et en bas à droite.

 */



/* Section conteneur */

section.picturehome {

  position: relative;

  margin-top: 0px;

  margin-bottom: 5px;

  width: 100%;

}



/* Wrapper qui porte le rayon uniquement en bas + masque les débordements */

.picturehome .picturehome-wrapper {

  position: relative;

  overflow: hidden;

  border-radius: 0 0 16px 16px; /* coins arrondis en bas droite et bas gauche */

  box-shadow: 0 6px 16px rgba(17,17,17,.06);

  background: #000; /* fallback au cas où l'image ne charge pas */

}



/* Image responsive */

.picturehome .picturehome-img {

  display: block;

  width: 100%;

  height: auto;

  vertical-align: middle;

  object-fit: cover;

}



/* Texte centré en overlay au milieu de l'image */

.picturehome .picturehome-overlay {

  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;



  padding: 24px;

  color: #fff;

  font-weight: 800;

  letter-spacing: .02em;



  /* ombre portée pour lisibilité du texte blanc */

  text-shadow:

    0 2px 8px rgba(0,0,0,.45),

    0 4px 18px rgba(0,0,0,.35);

}



/* Taille de police adaptative */

.picturehome .picturehome-overlay {

  font-size: clamp(1.25rem, 2.5vw + .5rem, 3rem);

  line-height: 1.2;

}



/* Option: si vous voulez une hauteur mini pour le visuel lorsqu'il n'y a pas d'aspect imposé par l'image

.picturehome .picturehome-wrapper {

  min-height: 40vh;

}

*/



/* Mobile: resserrer les paddings */

@media (max-width: 767.98px) {

  .picturehome .picturehome-overlay {

    padding: 16px;

  }

}