/* ==========================================================================
   Missebo — carte produit
   Meme langage que la fiche produit : blanc, or, petites capitales espacees,
   angles arrondis. Utilisee sur la liste produits et les sections d'accueil.
   ========================================================================== */

.mmc {
    --or: #c9971b;
    --n: #14130f;
    --gris: #6f6a62;
    --trait: #e8e4dc;
    --fond: #f7f5f1;

    position: relative;
    background: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.mmc-visuel {
    display: block;
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: var(--fond);
    text-decoration: none;
}
.mmc-visuel img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    transition: transform 0.45s ease;
}
.mmc:hover .mmc-visuel img { transform: scale(1.04); }

.mmc-etiquette {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    background: var(--n);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.3rem 0.55rem;
    border-radius: 6px;
}
.mmc-etiquette.mmc-remise { background: #c0392b; }

.mmc-coeur {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 2;
}
.mmc-coeur .btn-icon,
.mmc-coeur button,
.mmc-coeur a {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(4px);
    border: 0;
    color: var(--n);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.mmc-corps {
    padding: 0.7rem 0.15rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    flex: 1;
}

.mmc-meta {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--gris);
    margin: 0;
}

.mmc-titre {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mmc-titre a { color: var(--n); text-decoration: none; }
.mmc-titre a:hover { color: var(--or); }

.mmc-prix-ligne {
    margin: 0.15rem 0 0;
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
}
.mmc-prix {
    font-size: 1.0625rem;
    font-weight: 800;
    color: var(--or);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.mmc-prix-barre {
    font-size: 0.8125rem;
    color: var(--gris);
    text-decoration: line-through;
}

.mmc-panier { margin-top: auto; padding-top: 0.6rem; }
.mmc-cta {
    width: 100%;
    border: 1px solid var(--n);
    background: #fff;
    color: var(--n);
    border-radius: 999px;
    padding: 0.55rem 0.8rem;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.mmc-cta:hover { background: var(--n); color: #fff; }
.mmc-cta:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }

@media (max-width: 575px) {
    .mmc-titre { font-size: 0.8125rem; }
    .mmc-prix { font-size: 1rem; }
    .mmc-cta { font-size: 0.75rem; padding: 0.5rem 0.7rem; }
}

@media (prefers-reduced-motion: reduce) {
    .mmc-visuel img { transition: none; }
}