/* Version plus précise avec ajustement de l'image */
.fond-chat {
    position: relative;
    background-image: url('../image/chat-mouche.png');
    background-repeat: no-repeat;
    background-position: right bottom; /* Ou right center selon votre préférence */
    background-size: auto 90%; /* Hauteur à 90% de la div, largeur automatique */
    min-height: 200px;
    padding-bottom: 20px; /* Espace en bas pour que le chat ne soit pas coupé */
}
.fond-velo {
    position: relative;
    background-image: url('../image/velo.png');
    background-repeat: no-repeat;
    background-position: left bottom; 
    background-size: auto 90%; /* Hauteur à 90% de la div, largeur automatique */
   min-height: 300px; 
}


.fond-musicien {
    position: relative;
    background-image: url('../image/musicienun.png');
    background-repeat: no-repeat;
    background-position: right top; 
    background-size: auto 90%; 
    min-height: 600px;
    padding-bottom: 20px; /* Espace en bas pour que le chat ne soit pas coupé */
}
.fond-femme-livre-cafe {
    position: relative;
    background-image: url('../image/femme-livre-cafe.png');
    background-repeat: no-repeat;
    background-position: right top; 
    background-size: auto 90%; 
    min-height: 600px;
    padding-bottom: 20px; /* Espace en bas pour que le chat ne soit pas coupé */
}

/* ici les image a metre en place*/
/* fond adaptatif a la hauteur de la div */
/*
.fond-femme-tabouret-livre-cafe {
    position: relative;
    background-image: url('../image/femme-livre-cafe.png');
    background-repeat: no-repeat;
    background-position: right top; 
    background-size: contain; /* L'image s'adapte à la hauteur disponible 
    background-size: auto 100%; 
}*/

.fond-femme-tabouret-livre-cafe {
    position: relative;
    /* Couleur de fond (celle de WordPress) */
    background-color: transparent; /* ou la couleur par défaut */
   
}

.fond-femme-tabouret-livre-cafe::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%; /* ou une largeur spécifique si nécessaire */
    height: 120%;
    background-image: url('../image/femme-livre-cafe.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;
    z-index: 1; /* L'image sera au-dessus du fond */
    pointer-events: none; /* Permet les clics à travers l'image */
}

/* Si vous avez du contenu à l'intérieur, assurez-vous qu'il reste au-dessus */
.fond-femme-tabouret-livre-cafe > * {
    position: relative;
    z-index: 2;
}


.fond-danseuse {
    position: relative;
    background-color: transparent;
}

.fond-danseuse::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 120%;
    background-image: url('../image/danseuse.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;
    z-index: 1;
    pointer-events: none;
}

.fond-danseuse > * {
    position: relative;
    z-index: 2;
}

/* ------------------------------ */

.fond-enfant-musicienne {
    position: relative;
    background-color: transparent;
}

.fond-enfant-musicienne::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 120%;
    background-image: url('../image/enfant-musicienne.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;
    z-index: 1;
    pointer-events: none;
}

.fond-enfant-musicienne > * {
    position: relative;
    z-index: 2;
}

/* ------------------------------ */

.fond-enfant-deguisee {
    position: relative;
    background-color: transparent;
}

.fond-enfant-deguisee::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 120%;
    background-image: url('../image/enfant-deguisee.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;
    z-index: 1;
    pointer-events: none;
}

.fond-enfant-deguisee > * {
    position: relative;
    z-index: 2;
}

/* ------------------------------ */

.fond-enfant {
    position: relative;
    background-color: transparent;
}

.fond-enfant::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 120%;
    background-image: url('../image/enfant.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;
    z-index: 1;
    pointer-events: none;
}

.fond-enfant > * {
    position: relative;
    z-index: 2;
}

/* ------------------------------ */

.fond-femm-livres {
    position: relative;
    background-color: transparent;
}

.fond-femm-livres::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 120%;
    background-image: url('../image/femm-livres.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;
    z-index: 1;
    pointer-events: none;
}

.fond-femm-livres > * {
    position: relative;
    z-index: 2;
}

/* ------------------------------ */

.fond-femme-agee {
    position: relative;
    background-color: transparent;
}

.fond-femme-agee::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 120%;
    background-image: url('../image/femme-agee.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;
    z-index: 1;
    pointer-events: none;
}

.fond-femme-agee > * {
    position: relative;
    z-index: 2;
}

/* ------------------------------ */

.fond-femme-deux {
    position: relative;
    background-color: transparent;
}

.fond-femme-deux::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 120%;
    background-image: url('../image/femme-deux.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;
    z-index: 1;
    pointer-events: none;
}

.fond-femme-deux > * {
    position: relative;
    z-index: 2;
}

/* ------------------------------ */

.fond-femme-trois {
    position: relative;
    background-color: transparent;
}

.fond-femme-trois::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 120%;
    background-image: url('../image/femme-trois.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;
    z-index: 1;
    pointer-events: none;
}

.fond-femme-trois > * {
    position: relative;
    z-index: 2;
}

/* ------------------------------ */

.fond-femmes-et-enfants {
    position: relative;
    background-color: transparent;
}

.fond-femmes-et-enfants::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 120%;
    background-image: url('../image/femmes-et-enfants.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;
    z-index: 1;
    pointer-events: none;
}

.fond-femmes-et-enfants > * {
    position: relative;
    z-index: 2;
}

/* ------------------------------ */

.fond-homme-age-deux {
    position: relative;
    background-color: transparent;
}

.fond-homme-age-deux::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 120%;
    background-image: url('../image/homme-age-deux.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;
    z-index: 1;
    pointer-events: none;
}

.fond-homme-age-deux > * {
    position: relative;
    z-index: 2;
}

/* ------------------------------ */

.fond-homme-age {
    position: relative;
    background-color: transparent;
}

.fond-homme-age::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 120%;
    background-image: url('../image/homme-age.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;
    z-index: 1;
    pointer-events: none;
}

.fond-homme-age > * {
    position: relative;
    z-index: 2;
}

/* ------------------------------ */

.fond-homme-gateau {
    position: relative;
    background-color: transparent;
}

.fond-homme-gateau::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 120%;
    background-image: url('../image/homme-gateau.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;
    z-index: 1;
    pointer-events: none;
}

.fond-homme-gateau > * {
    position: relative;
    z-index: 2;
}

/* ------------------------------ */

.fond-homme-musique {
    position: relative;
    background-color: transparent;
}

.fond-homme-musique::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 120%;
    background-image: url('../image/homme-musique.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;
    z-index: 1;
    pointer-events: none;
}

.fond-homme-musique > * {
    position: relative;
    z-index: 2;
}

/* ------------------------------ */

.fond-jeune-smartphone {
    position: relative;
    background-color: transparent;
}

.fond-jeune-smartphone::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 120%;
    background-image: url('../image/jeune-smartphone.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;
    z-index: 1;
    pointer-events: none;
}

.fond-jeune-smartphone > * {
    position: relative;
    z-index: 2;
}

/* ------------------------------ */

.fond-musicien-deux {
    position: relative;
    background-color: transparent;
}

.fond-musicien-deux::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 120%;
    background-image: url('../image/musicien-deux.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;
    z-index: 1;
    pointer-events: none;
}

.fond-musicien-deux > * {
    position: relative;
    z-index: 2;
}

/* ------------------------------ */

.fond-musicienne-deux {
    position: relative;
    background-color: transparent;
}

.fond-musicienne-deux::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 120%;
    background-image: url('../image/musicienne-deux.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;
    z-index: 1;
    pointer-events: none;
}

.fond-musicienne-deux > * {
    position: relative;
    z-index: 2;
}

/* ------------------------------ */

.fond-musicienne-un {
    position: relative;
    background-color: transparent;
}

.fond-musicienne-un::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 120%;
    background-image: url('../image/musicienne-un.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;
    z-index: 1;
    pointer-events: none;
}

.fond-musicienne-un > * {
    position: relative;
    z-index: 2;
}

/* ------------------------------ */

.fond-musicienun {
    position: relative;
    background-color: transparent;
}

.fond-musicienun::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 120%;
    background-image: url('../image/musicienun.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;
    z-index: 1;
    pointer-events: none;
}

.fond-musicienun > * {
    position: relative;
    z-index: 2;
}

/* ------------------------------ */

.fond-plante {
    position: relative;
    background-color: transparent;
}

.fond-plante::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 120%;
    background-image: url('../image/plante.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;
    z-index: 1;
    pointer-events: none;
}

.fond-plante > * {
    position: relative;
    z-index: 2;
}

/* Si vous voulez que l'image soit toujours visible même sur mobile */
@media (max-width: 768px) {
    .fond-chat {
        background-size: auto 60%; /* Plus petit sur mobile */
        background-position: right center;
    }
    .fond-velo {
        min-height: 200px; 
    }
}