.wp-block-button .wp-block-button__link {
    color: #ffffff; /* Base color */
    background-color: rgba(199, 88, 117, 1); /* Primary color */
    padding: 15px 15px 15px 15px;
    border: none; /* Remove border */
    font-size: 0.8rem; /* Medium font size */
    transition: background-color 0.3s ease, transform 0.2s ease;
    position: relative;
    border-top-left-radius: 26px;
    border-top-right-radius: 26px;
    border-bottom-right-radius: 26px;
    border-bottom-left-radius: 26px;
}

.wp-block-button .wp-block-button__link:hover {
    background-color: rgba(199, 88, 117, 0.5) !important; /* 50% transparent background on hover */
    transform: scale(1.05); /* Slightly enlarge on hover */
}


.remove-bottom-space {
margin-bottom: 0 !important;
}

.remove-top-space {
margin-top: 0 !important;
}

.calendly {
    overflow: hidden !important; /* Hide overflow to prevent scrollbars */
    width: 100%; /* Full width of the parent container */
    height: 1000px !important; /* Adjust height automatically to content */

}











/*tuile service*/
.tile-wrapper {
    display: flex;
    justify-content: space-around;
    gap: 25px; /* Espace entre les tuiles */
    margin-bottom: 20px; /* Espace entre les lignes de tuiles */
    flex-wrap: wrap;
}

.flip-container {
    perspective: 1100px; /* Augmenter la perspective pour éviter l'overlap */
	  width: 500px;
    height: 500px; /* Hauteur fixe */
    position: relative; /* Nécessaire pour le positionnement absolu des faces */
    margin-bottom: 20px; /* Espace entre les tuiles sur mobile */
}

.flip-container .flipper {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d; /* Assure que les faces respectent le style 3D */
    transition: transform 0.6s; /* Transition pour le retournement */
    cursor: pointer;
}

/* Ajouter le flip sur click */
.flip-container.flipped .flipper {
    transform: rotateY(180deg); /* Rotation lors du clic */
}

/* Les faces avant et arrière */
.front, .back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; /* Cache la face arrière lors du flip */
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    font-size: 19px;
    color: #333; /* Couleur du texte */
    text-align: center; /* Centrer le texte */
    overflow: hidden; /* Assure que le contenu ne dépasse pas */
}

/* Face avant */
.front {
    z-index: 2;
    background-color: #FAE9F0; /* Couleur de fond rose pour la face avant */
    font-weight: bold;
    font-size: 26px; /* Taille de la police légèrement plus grande */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Aligné en haut */
    align-items: center;
    padding-top: 20px;
    border-radius: 25px; /* Assure la bordure arrondie */
}

/* Image principale */
.front img.main-image {
    max-width: 65%; /* Réduit la taille de l'image principale */
    height: auto-flow;
     /* Espace entre le titre et l'image */
}

/* Image d'angle */
.front img.corner-image {
    max-width: 7%; /* Réduit la taille de l'image d'angle */
    height: auto;
    position: absolute;
    bottom: 10px;
    right: 10px;
}

/* Face arrière */
.back {
    transform: rotateY(180deg); /* Positionne la face arrière */
    background-color: #ffc0cb; /* Couleur de fond rose plus clair pour la face arrière */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: justify;
}

/* Styles pour le titre et le texte */
.back h2 {
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 10px;
}

.back p {
    font-size: 22px;
    margin: 0;
}








/* Conteneur pour les cartes de tarification */
.pricing-table {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    padding: 20px;
    border-radius: 15px;
}

/* Carte de tarification individuelle */
.pricing-card {
    background-color: #fff;
    border-radius: 15px;
    padding: 15px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    flex: 1 1 calc(50% - 40px); /* Deux cartes par ligne par défaut */
}

/* Media query pour les écrans plus larges : 4 cartes par ligne */
@media (min-width: 1200px) {
    .pricing-card {
        flex: 1 1 calc(25% - 40px); /* Quatre cartes par ligne */
    }
}

/* Media query pour les petits écrans : 1 carte par ligne */
@media (max-width: 768px) {
    .pricing-card {
        flex: 1 1 100%; /* Une carte par ligne */
    }
}

/* Autres styles restent inchangés */

/* Style du titre dans la carte de tarification */
.pricing-card h3 {
    color: #333;
    font-size: 1em;
    margin-bottom: 15px;
}

/* Conteneur des boutons dans la carte de tarification */
.pricing-card .btn-container {
    margin-top: 15px;
    display: flex;
    justify-content: center;
}

/* Style des boutons dans la carte de tarification */
.pricing-card .btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #c85876;
    color: #fff;
    text-decoration: none;
    border-radius: 15px;
    transition: background-color 0.3s;
    outline: none;
    margin: 0 5px;
}

/* Effet de survol du bouton */
.pricing-card .btn:hover {
    background-color: #e1a2b2;
	  outline: none; /* Retire l'effet de focus (les pointillés) */
    text-decoration: none; /* Assure qu'il n'y a pas de soulignement ou pointillé */
}

/* Positionnement du prix dans la carte de tarification */
.pricing-card .price {
    margin-top: 15px;
    font-size: 1.4em;
    color: #c85876;
}

/* Positionnement des bullet points dans la carte de tarification */
.pricing-card ul {
    list-style: none;
    padding: 0;
    margin-top: 15px;
    text-align: left;
    width: 100%;
}

/* Style des éléments de la liste */
.pricing-card ul li {
    margin: 10px 0;
    color: #666;
    display: flex;
    align-items: center;
    padding-left: 5px;
}

/* Style de l'icône des éléments de la liste */
.pricing-card ul li img {
    margin-right: 10px;
	  font-size: 1em;
    width: 8px;
    height: 8px;
}

/* Style de la note dans la carte de tarification */
.note {
    font-size: 1em;
    color: #666;
    margin-top: 10px;
    text-align: center;
}



/* Taille de titre site dynamique */
/* Adjust title size for different screen sizes */
/* Default title size for desktop */
.wp-block-site-title {
    font-size: 20px !important;
}

/* Title size for tablets */
@media (max-width: 1024px) {
    .wp-block-site-title {
        font-size: 19px !important;
    }
}

/* Title size for mobile devices */
@media (max-width: 768px) {
    .wp-block-site-title {
        font-size: 15px !important;
    }
}

/* Title size for smaller mobile devices */
@media (max-width: 480px) {
    .wp-block-site-title {
        font-size: 15px !important;
    }
}









/***********************************/
/* Code Service detail */
.custom-container {
    padding: calc(0.5 * var(--wp--style--root--padding-right));
    max-width: 1200px;
    margin: 0 auto;
}

.custom-block {
    margin-bottom: 1rem;
}

.custom-row {
    display: flex;
    flex-wrap: wrap; /* Permet aux colonnes de s'empiler sur mobile */
    justify-content: space-between;
    align-items: flex-start; /* Aligne verticalement en haut */
    margin-bottom: 1rem;
}

.custom-heading {
    font-style: normal;
    font-weight: bold;
    color: rgb(200, 88, 118);
    flex-basis: 100%; /* Colonne complète sur mobile */
    text-align: left;
    margin-bottom: 0.5rem; /* Espace sous le titre */
}

.custom-text {
    flex-basis: 100%; /* Colonne complète sur mobile */
    text-align: left;
    position: relative;
}

.custom-text details {
    position: relative;
    margin-top: 1rem;
}

.custom-text summary {
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

.custom-text summary::after {
    content: ''; /* Cache le triangle par défaut */
    display: none;
}

.custom-text details[open] summary .more-info-toggle {
    display: none; /* Cache "En savoir plus" lorsqu'ouvert */
}

.custom-text .more-info-content {
    display: none; /* Cache le contenu détaillé par défaut */
}

.custom-text details[open] .more-info-content {
    display: block; /* Affiche le contenu détaillé lorsque ouvert */
}

.custom-separator {
    background-color: #4747471a;
    color: #4747471a;
    margin: 0.5rem 0;
}


/* Responsive pour mobile */
@media (max-width: 599px) {
    .custom-row {
        align-items: flex-start; /* Alignement vertical en haut */
    }

    .custom-heading, .custom-text {
        flex-basis: 100%; /* 100% sur mobile pour chaque colonne */
    }
}