:root {
    --shadow-color: rgba(200, 168, 130, 0.25);
    --shadow: 0 0 6px 0 var(--shadow-color);
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Regular.ttf') format('tff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins-Medium';
    src: url('../fonts/Poppins-Medium.ttf') format('tff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins-SemiBold';
    src: url('../fonts/Poppins-SemiBold.ttf') format('tff');
    font-weight: 600;
    font-style: normal;
}

body {
    font-family: 'Poppins', sans-serif;
}

h1 {
    font-family: 'Poppins-SemiBold', sans-serif;
}

p {
    font-family: 'Poppins-SemiBold', sans-serif !important;
}

.title-h1h2 h1 {
    font-weight: none !important;
    line-height: none !important;
    margin-bottom: none !important;
}

.imgg {
    width: 100%;
}

.my-cat-container {
    position: relative;
    background-color: #FFFFFF;
    width: 100%;
    box-shadow: var(--shadow);
    border-radius: 16px;
    overflow: hidden;
}

.modular-features .column {
    padding: 0.5rem !important;
}

.label {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: #C8A882;
    color: white;
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 0.6rem;
    z-index: 1;
}

.indisponible {
    background-color: #bb2828 !important;
    color: white !important;
}

.disponible {
    background-color: #3fb135 !important;
    color: white !important;
}

.reserver {
    background-color: #7c837b !important;
    color: white !important;
}

.avenir {
    background-color: #3a75b9 !important;
    color: white !important;
}

.tilte-card {
    /* background-color: rgb(104, 104, 158);*/

}

.tilte-card p {
    margin: 0;
    padding: 0;
    font-size: 1.2rem;
    text-align: left;
    color: #252525;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.age-card p {
    margin: 0;
    margin-top: 8px;
    padding: 0;
    font-size: 0.9rem;
    text-align: left;
    color: #252525;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.color-card p {
    margin: 0;
    padding: 0;
    font-size: 0.9rem;
    text-align: left;
    color: #252525;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.description-card p {
    margin: 0;
    margin-top: 8px;
    padding: 0;
    font-size: 0.8rem;
    text-align: left;
    color: #252525;

    display: -webkit-box;
    /*-webkit-line-clamp: 2;*/
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.us-cat {
    background-color: #FDFBF7;
}

.us-new-cat {
    background-color: #FBF8F3;
}

.information-card {
    padding: 16px;
    /*background-color: red;*/
    width: 100%;
    height: 100%;
}

.back {
    width: 100%;
    height: 180px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-card-new {
    background-color: white;
    display: flex;
    align-items: center;
    height: 40px;
}

.tilte-card-new {
    /*flex: 0 0 55%;*/
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /*background-color: #C8A882;*/
}

.date-card-new {
    /*flex: 0 0 45%;*/
    text-align: right !important;
    margin-left: 16px;

}

.date-card-new p {
    color: #C8A882 !important;
    text-align: right;
    margin: 0;
}

.date-with-icon {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4em;
    color: #C8A882;
    margin: 0;
}

.icon-calendar {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}



.tilte-card-new p {
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 1.2rem;
    text-align: left;
    color: #252525;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}

.parent-card {
    text-align: left;
}

.parent-card p {
    margin: 0;
    margin-top: 8px;
    padding: 0;
    font-size: 0.9rem;
    text-align: left;
    color: #252525;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.parents-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    margin: 0;
    margin-top: 8px;
    padding: 0;
    font-size: 0.9rem;
    text-align: left;
    color: #252525;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.icon-heart {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    stroke: #C8A882;
}

.btn-more-new {
    padding: 8px 24px;
    background-color: #C8A882;
    color: white;
    border-radius: 14px;
    font-size: .9rem;
}

.separator {
    height: 32px;
}

.block-sante {
    background-color: #F8F2E8;
    padding: 32px;
    border-radius: 16px;
}

.block-sante h4 {
    padding: 0;
    margin: 0;
    margin-bottom: 24px;
    color: #C8A882;
}

.block-sante p {
    padding: 0;
    margin: 0;
    color: #8B8680;
}

.heroo-cat {
    background-color: #FBF8F3;
}

.modulegaleri {
    background-color: #FDFBF7;
}

.heroo-cat .divv {
    height: 100%;
    width: 100%;
   /* margin: 10px;*/

    flex: 1;
    /* prend toute la largeur disponible */
    display: flex;
    /* pour que img remplisse le conteneur */
    flex-direction: column;
    /* optionnel, utile si tu as texte + img */
    overflow: hidden;
    /* cache tout ce qui dépasse */
    border-radius: 16px;
}

.divv img.imgg {
    width: 100%;
    /* prend toute la largeur du conteneur */
    height: 100%;
    /* prend toute la hauteur du conteneur */
    object-fit: cover;
    /* recadre l’image pour remplir sans déformer */
    display: block;
    /* évite l’espace blanc sous l’image */
}

.heroo-cat .columns {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.heroo-cat .divv {
    flex: 1;
    min-width: 250px;
    text-align: left;
    box-shadow: var(--shadow);
}

.heroo-cat .divv:first-child {
    border-radius: 0px;
    box-shadow: none;
}

.heroo-cat .divv h4 {
    padding: 0;
    margin: 0;
    margin-bottom: 16px;
    font-family: 'Poppins-SemiBold', sans-serif;
}

.heroo-cat .divv p {
    text-align: left;
}

.bloc-hero {
    flex: 1;
    min-width: 250px;
    background-color: white;
    padding: 16px;
    box-sizing: border-box;
    border-radius: 16px;
    box-shadow: var(--shadow);
    display: flex;
    /* active Flexbox */
    flex-direction: column;
    /* empile les enfants verticalement */
    align-items: center;
    /* centre horizontalement tous les enfants */
    text-align: center;
}

.bloc-hero h4 {
    margin-top: 16px;
}

.bloc-hero .icon-hero {
    height: 64px;
    width: 64px;
    border-radius: 50%;
    background-color: #FAF7F3;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bloc-hero .icon-hero svg{
    height: 35px;
    width: 35px;
    /*background-color: #a06313;*/
}



@media (max-width: 768px) {
    .heroo-cat .columns {
        flex-direction: column;
    }

    .contact .columns {
        flex-direction: column;
    }
}

.btn .btn-primary .btn-lg {
    background-color: #C8A882 !important;
    color: white !important;
    border-radius: 14px !important;

}

.galllery {
    background-color: #FBF8F3;
}

.contact {
    background-color: #FBF8F3;
}

.contact .divv {
    background-color: white;
    flex: 1;
    min-width: 250px;
    box-shadow: var(--shadow);
    border-radius: 16px;
    margin: 8px;
    padding: 32px;
}

.contact .divv h5,
.contact .divv p,
.contact .divv h3 {
    text-align: left;
    color: #8B8680;
}

.con-body {
    /*background-color: #3a75b9;*/
}

.con-color {
    background-color: #F8F2E8 !important;
}

.con-color h3 {
    color: #C8A882 !important;
}

.contact .divv h3 {
    margin-top: 8px !important;
}

.contact .b-con {
    /* background-color: #3a75b9;*/
    height: 40px;
    width: 100%;
    display: flex;
    margin-bottom: 16px;
}

.l-con {
    background-color: #FAF7F3;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.r-con {
    /*background-color: #23c70e;*/
    height: 40px;
    width: calc(100% - 40px);
}

.r-con div {
    height: 20px;
    width: 100%;
    color: #8B8680;
    align-items: center;
    display: flex;
}

.r-con div:nth-child(2) p {
    color: #C8A882;
    font-size: 0.8rem !important;
}


.r-con div p {
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-left: 16px !important;
}

.p-r-s {
    height: 60px;
    width: 100%;
    display: flex;
}

.r-s {
    height: 60px;
    width: 60px;
    border-radius: 50%;
    background-color: #C8A882;
    margin-right: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

}

.r-s .i {
    height: 40px;
    width: 40px;
}

.r-s .svg {
    height: 40px;
    width: 40px;
}

.l-con .o {
    height: 40px;
    width: 40px;
}

.itemm {
    padding-top: .4rem;
    padding-bottom: .4rem;
}