.carte-specialite{
    width: calc(480px * var(--scale));
    max-width: 95%;
    margin: calc(1.2em * var(--scale)) auto;
    text-align: center;
}

.cadre-specialite{
    position: relative;
    width: 100%;
    height: calc(600px * var(--scale));
    padding: calc(10px * var(--scale));
    border-radius: calc(28px * var(--scale));
    background: linear-gradient(to bottom, #8b6b4e, #5a3f2c);
    box-shadow:
        0 calc(12px * var(--scale)) calc(24px * var(--scale)) rgba(0,0,0,0.35),
        inset 0 calc(2px * var(--scale)) 0 rgba(255,255,255,0.25),
        inset 0 calc(-3px * var(--scale)) calc(8px * var(--scale)) rgba(0,0,0,0.35);
    border: 1px solid rgba(61,42,29,0.9);
    overflow: hidden;
    cursor: pointer;
}

.cadre-specialite::before{
    content: "";
    position: absolute;
    inset: calc(6px * var(--scale));
    border-radius: calc(20px * var(--scale));
    pointer-events: none;
    box-shadow:
        inset 0 calc(1px * var(--scale)) 0 rgba(255,255,255,0.18),
        inset 0 calc(-8px * var(--scale)) calc(16px * var(--scale)) rgba(0,0,0,0.18);
}

.img-specialite{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
    display: block;
    border-radius: calc(20px * var(--scale));
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.08),
        0 calc(4px * var(--scale)) calc(10px * var(--scale)) rgba(0,0,0,0.22);
    transition: transform 0.2s ease, filter 0.2s ease;
}

.cadre-specialite:hover .img-specialite{
    transform: scale(1.03);
    filter: saturate(1.05) contrast(1.03);
}

.nom-specialite{
    margin-top: calc(0.7em * var(--scale));
    padding: calc(0.45em * var(--scale)) calc(0.8em * var(--scale));
    border-radius: calc(16px * var(--scale));
    display: inline-block;
    background: linear-gradient(to bottom, rgba(255,245,230,0.96), rgba(232,210,180,0.92));
    box-shadow:
        0 calc(4px * var(--scale)) calc(10px * var(--scale)) rgba(0,0,0,0.18),
        inset 0 calc(1px * var(--scale)) 0 rgba(255,255,255,0.6);
    border: 1px solid rgba(90,63,44,0.45);
    font-weight: bold;
    text-transform: capitalize;
    font-size: calc(18px * var(--scale));
    line-height: 1.3;
}

@media (max-width:700px){

    .carte-specialite{
        width: 95%;
    }

    .cadre-specialite{
        height: calc(500px * var(--scale));
        border-radius: calc(24px * var(--scale));
    }

    .cadre-specialite::before{
        inset: calc(5px * var(--scale));
        border-radius: calc(18px * var(--scale));
    }

    .img-specialite{
        border-radius: calc(18px * var(--scale));
    }

    .nom-specialite{
        font-size: calc(17px * var(--scale));
        border-radius: calc(14px * var(--scale));
    }

}