@keyframes mdf-popoverIn {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}       .mdf-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
margin-bottom: var(--space-xl);
transition: opacity var(--transition-base);
}
@media (min-width: 30em) {
.mdf-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 64em) {
.mdf-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.mdf-grid--loading {
opacity: 0.4;
pointer-events: none;
}
.mdf-grid--loaded .mdf-card {
animation: mdf-fadeIn 0.3s ease-out;
} .mdf-card--as24 > a {
display: flex;
flex-direction: column;
height: 100%;
text-decoration: none;
color: inherit;
} .mdf-card,
.mdf-card--as24 {
display: flex;
flex-direction: column;
height: 100%;
}
.mdf-card__image {
position: relative;
width: 100%;
overflow: hidden;
background-color: var(--color-surface-2);
aspect-ratio: 4 / 3;
}
.mdf-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-base);
}
.mdf-card:hover .mdf-card__image img {
transform: scale(1.05);
} .mdf-card__no-image {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
height: 100%;
color: var(--color-muted);
font-size: 0.8125rem;
font-weight: 500;
}
.mdf-card__no-image svg {
opacity: 0.3;
}
.mdf-card__badges {
position: absolute;
top: 12px;
left: 12px;
display: flex;
flex-wrap: wrap;
gap: 6px;
z-index: 5;
}
.mdf-card__promo-tag {
position: absolute;
top: 12px;
right: 12px;
background-color: var(--color-accent-fill);
color: #fff;
padding: 6px 12px;
border-radius: var(--radius-sm);
font-family: var(--font-heading);
font-size: 0.6875rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
z-index: 5;
}
.mdf-card__body {
display: flex;
flex-direction: column;
flex-grow: 1;
padding: var(--space-md);
gap: var(--space-xs);
}
.mdf-card__brand {
color: var(--color-accent);
font-family: var(--font-heading);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.mdf-card__title {
font-size: 1.125rem;
font-weight: 700;
line-height: 1.3;
color: var(--color-text);
margin: 0;
}
.mdf-card__specs {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: var(--space-sm);
}
.mdf-card__spec {
display: inline-block;
padding: 3px 8px;
background-color: var(--color-surface-2);
border-radius: var(--radius-sm);
color: var(--color-muted);
font-size: 0.8125rem;
}
.mdf-card__spec--etat {
font-weight: 600;
color: var(--color-text);
} .mdf-card__footer {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-sm);
margin-top: auto;
padding-top: var(--space-md);
border-top: 1px solid var(--color-border);
}
.mdf-card__price {
display: flex;
flex-direction: row;
align-items: baseline;
gap: var(--space-sm);
flex-wrap: wrap;
}
.mdf-card__price-old {
font-size: 0.8125rem;
color: var(--color-muted);
text-decoration: line-through;
}
.mdf-card__price-current {
font-family: var(--font-heading);
font-size: 1.125rem;
font-weight: 800;
color: var(--color-accent);
}
.mdf-card__cta {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--color-accent);
font-family: var(--font-heading);
font-size: 0.8125rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
transition: transform var(--transition-fast);
white-space: nowrap;
}
.mdf-card:hover .mdf-card__cta {
transform: translateX(3px);
}
.mdf-card__cta svg {
flex-shrink: 0;
} .mdf-card--vendu {
opacity: 0.5;
}
.mdf-card--vendu:hover {
transform: none;
border-color: var(--color-border);
} @keyframes mdf-spin {
to { transform: rotate(360deg); }
}
@keyframes mdf-fadeIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}  .mdf-card__no-image--fallback {
display: none;
}
.mdf-card__image[data-broken] img {
display: none;
}
.mdf-card__image[data-broken] .mdf-card__no-image--fallback {
display: flex;
}