/* Pink #fa5bdd */

@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,600,700");

body {
  font-family: Montserrat;
  overflow-x: hidden;
}

/* giftCard */

#img-header-giftCard {
  width: 100%;
}

/* GIFTCARD */
.gift-card {
  width: 100%;
  max-width: 380px;
  /* Largeur maximale */
  aspect-ratio: 1.5;
  /* Ratio rectangulaire 1.5:1 */
  background-image: url("../images/giftCard-f7c9b599999f03be3ebc20d72667538d.png");
  /* Remplace par ton image de fond */
  background-size: cover;
  /* L'image occupe toute la zone */
  background-position: center;
  /* Centre l'image */
  border-radius: 10px;
  /* Coins arrondis */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
  /* Ombre subtile */
  position: relative;
  /* Permet de positionner les enfants avec `absolute` */
  overflow: hidden;
  /* Cache le contenu débordant */
}

/* Nom du client - centré au milieu */
.gift-card p.client-name {
  position: absolute;
  top: 60%;
  /* Au centre vertical */
  left: 50%;
  /* Au centre horizontal */
  transform: translate(-50%, -50%);
  /* Centre précis */
  font-size: 1.6rem;
  /* Taille du texte */
  color: #7b480d;
  /* Couleur du texte */
  text-align: center;
  /* Centrage du texte */
  /* font-weight: bold; */
  /* Gras */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  /* Ombre pour lisibilité */
}

/* Nom de la prestation - en bas à gauche */
.gift-card p.prestation-name {
  position: absolute;
  bottom: 5px;
  /* Juste au-dessus du bord bas */
  left: 10px;
  /* Proche du bord gauche */
  font-size: 0.7rem;
  /* Taille du texte */
  font-weight: bold;
  /* Texte en gras */
  color: #000;
  /* Texte noir */
  background-color: rgba(255, 255, 255, 0.8);
  /* Fond semi-transparent */
  padding: 5px 10px;
  /* Espacement interne */
  border-radius: 5px;
  /* Coins arrondis */
  text-align: left;
  /* Aligné à gauche */
}

/* Code de la carte - en haut à gauche */
.gift-card p.card-code {
  position: absolute;
  top: 10px;
  /* Proche du bord haut */
  left: 10px;
  /* Proche du bord gauche */
  font-size: 1rem;
  /* Taille du texte */
  font-weight: bold;
  /* Texte en gras */
  color: #000;
  /* Texte noir */
  background-color: rgba(255, 255, 255, 0.8);
  /* Fond semi-transparent */
  padding: 5px 10px;
  /* Espacement interne */
  border-radius: 5px;
  /* Coins arrondis */
  text-align: left;
  /* Aligné à gauche */
}