.font-t {
    font-family: 'Times New Roman', Times, serif;
}

.font-a {
    font-family: 'Roboto', sans-serif;
}

.color-1 {
    color: #5a4631 !important;
}

h1 {
    font-size: 12vh !important;
    line-height: 1 !important;
    margin-bottom: 50px !important;
}

h4 {
    font-size: 3vw !important;
}

h2 {
    font-size: 3vw !important;
}

p {
    font-size: 3vh;
    color: #5a4631;
}

.it {
    font-style: italic !important;
}

.reduit {
    line-height: 1.2; /* Réduit l'interligne */
}

.font-reduce {
    font-weight: 200 !important;
}

.font-reduce-1 {
    font-weight: 300 !important;
}

.btn-perso-pink {
    border-radius: 50%; /* Bords arrondis */
    color: rgb(255, 255, 255) !important; /* Texte en noir */
    background-color: #f8a5a5 !important; /* Fond blanc */
    border: 1.2px solid rgb(255, 255, 255) !important; /* Bordure visible et noire */
    min-width: 130px !important;
    min-width: 150px !important;
}

.btn-perso-pink:hover {
    transform: translateY(-2px); /* Soulève la carte au survol */
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1); /* Accentue l'ombre */
    text-decoration: none !important;
    color: inherit; /* Hérite des couleurs par défaut du texte */
}

.mw {
    max-width: 330px;
}

/* Styles pour la carte */
.clickable-card {
    display: block; /* Rend toute la carte cliquable */
    text-decoration: none; /* Supprime le soulignement des liens */
    color: inherit; /* Hérite des couleurs par défaut du texte */
    border: 2px solid #5a4631; /* Bordure marron */
    border-radius: 30px; /* Coins arrondis */
    padding: 20px;
    padding-top: 35px;
    transition: transform 0.3s, box-shadow 0.3s; /* Animation au survol */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Ombre légère */
    text-align: center; /* Centre le texte */
    width: auto; /* Largeur fixe */
}

.clickable-card:hover {
    transform: translateY(-5px); /* Soulève la carte au survol */
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2); /* Accentue l'ombre */
    text-decoration: none !important;
    color: inherit; /* Hérite des couleurs par défaut du texte */
}

.clickable-card h3 {
    font-size: 3vh;
    font-weight: bold;
    color: #5a4631; /* Marron */
    margin-bottom: 15px;
}

.clickable-card p {
    font-size: 2.2vh;
    line-height: 1.5;
    margin-bottom: 10px;
}

.clickable-card .subtitle {
    font-style: italic;
    color: #5a4631;
    font-weight: 200;
}

.visage {
    max-width: 5vw;
}

@media (max-width: 992px) {
    p {
        font-size: 20px !important;
    }

    h3 {
        font-size: 35px !important;
    }

    h4 {
        font-size: 40px !important;
    }

    h2 {
        font-size: 60px !important;
        line-height: 1 !important;
    }

    .home1{
        max-width: 320px;
    }

    .body{
        overflow-x: none;
    }

    .mw {
        max-width: 400px;
    }

    .visage {
        max-height: 90px;
        min-width: 90px;

    }

    .text-avis {
        font-size: 25px !important;
    }
}

.hidden-text {
    opacity: 0;
    transform: translateY(70px);
    transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}

.visible-text {
    opacity: 1;
    transform: translateY(0);
}