.mdf-archive-header {
padding: var(--space-xl) 0 var(--space-lg);
text-align: center;
}
.mdf-archive-title {
font-family: var(--font-heading);
font-size: 2rem;
font-weight: 800;
margin-bottom: var(--space-sm);
}
@media (min-width: 48em) {
.mdf-archive-title {
font-size: 2.5rem;
}
}
.mdf-archive-subtitle {
color: var(--color-muted);
font-size: 1.0625rem;
max-width: 500px;
margin: 0 auto;
} .mdf-filterbar {
display: none;
}
@media (min-width: 48em) {
.mdf-filterbar {
display: flex;
align-items: center;
gap: var(--space-md);
padding: 10px var(--space-lg);
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
margin-bottom: var(--space-md);
position: sticky;
top: 0;
z-index: 50;
}
}
.mdf-filterbar__dropdowns {
display: flex;
align-items: center;
gap: 6px;
}
.mdf-filterbar__right {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
}
.mdf-filterbar__sort {
width: auto;
min-width: 150px;
padding: 6px 10px;
background-color: var(--color-surface-2);
border: 1px solid var(--color-border);
border-radius: 100px;
color: var(--color-text);
font-family: var(--font-body);
font-size: 0.8125rem;
font-weight: 500;
cursor: pointer;
transition: border-color var(--transition-fast);
}
.mdf-filterbar__sort:hover {
border-color: var(--color-accent-border);
}
.mdf-filterbar__sort:focus {
border-color: var(--color-accent);
outline: none;
}
.mdf-filterbar__reset {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
flex-shrink: 0;
background: none;
border: 1px solid var(--color-border);
border-radius: 50%;
color: var(--color-muted);
cursor: pointer;
transition: all var(--transition-fast);
}
.mdf-filterbar__reset:hover {
color: var(--color-accent);
border-color: var(--color-accent-border);
background-color: var(--color-accent-bg);
}
.mdf-filterbar__reset[hidden] {
display: none;
} .mdf-dropdown {
position: relative;
}
.mdf-dropdown__btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
background-color: var(--color-surface-2);
border: 1px solid var(--color-border);
border-radius: 100px;
color: var(--color-text);
font-family: var(--font-body);
font-size: 0.8125rem;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
transition: all var(--transition-fast);
}
.mdf-dropdown__btn:hover {
border-color: var(--color-accent-border);
}
.mdf-dropdown__btn[aria-expanded="true"] {
border-color: var(--color-accent);
background-color: var(--color-accent-bg);
color: var(--color-accent);
}
.mdf-dropdown__btn--has-value {
border-color: var(--color-accent);
background-color: var(--color-accent-bg);
color: var(--color-accent);
font-weight: 600;
}
.mdf-dropdown__chevron {
transition: transform var(--transition-fast);
}
.mdf-dropdown__btn[aria-expanded="true"] .mdf-dropdown__chevron {
transform: rotate(180deg);
}
.mdf-dropdown__popover {
display: none;
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 200px;
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-sm);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
z-index: 60;
animation: mdf-popoverIn 0.15s ease-out;
}
.mdf-dropdown__popover--open {
display: block;
}
@keyframes mdf-popoverIn {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.mdf-dropdown__options {
display: flex;
flex-direction: column;
gap: 4px;
}
.mdf-dropdown__options .mdf-pill {
width: 100%;
justify-content: center;
text-align: center;
white-space: nowrap;
}
.mdf-dropdown__options--grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 4px;
} .mdf-chips {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
margin-bottom: var(--space-md);
}
.mdf-chips[hidden] {
display: none;
}
.mdf-chips--desktop {
display: none;
}
@media (min-width: 48em) {
.mdf-chips--desktop {
display: flex;
}
.mdf-chips--mobile {
display: none;
}
}
@media (max-width: 47.99em) {
.mdf-chips--desktop {
display: none;
}
.mdf-chips--mobile {
display: flex;
}
}
.mdf-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background-color: var(--color-accent-bg);
border: 1px solid var(--color-accent-border);
border-radius: 100px;
color: var(--color-accent);
font-size: 0.8125rem;
font-weight: 600;
cursor: pointer;
transition: background-color var(--transition-fast);
}
.mdf-chip:hover {
background-color: var(--color-accent-border);
}
.mdf-chip svg {
flex-shrink: 0;
opacity: 0.7;
}  .mdf-filters-toggle {
display: flex;
align-items: center;
gap: var(--space-sm);
width: 100%;
padding: var(--space-md) var(--space-lg);
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
color: var(--color-text);
font-family: var(--font-heading);
font-size: 0.9375rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
cursor: pointer;
margin-bottom: var(--space-md);
transition: border-color var(--transition-fast);
}
.mdf-filters-toggle:hover {
border-color: var(--color-accent-border);
}
.mdf-filters-toggle svg {
flex-shrink: 0;
color: var(--color-accent);
}
.mdf-filters-toggle__count {
margin-left: auto;
color: var(--color-accent);
font-size: 0.8125rem;
}
@media (min-width: 48em) {
.mdf-filters-toggle {
display: none;
}
} .mdf-drawer {
display: none;
position: fixed;
inset: 0;
z-index: 1000;
background-color: rgba(0, 0, 0, 0.6);
}
.mdf-drawer--open {
display: block;
}
.mdf-drawer__panel {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
background-color: var(--color-bg);
animation: mdf-fadeIn 0.2s ease-out;
}
.mdf-drawer__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-md) var(--space-lg);
border-bottom: 1px solid var(--color-border);
flex-shrink: 0;
}
.mdf-drawer__title {
font-family: var(--font-heading);
font-size: 1.125rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.mdf-drawer__close {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: none;
border: 1px solid var(--color-border);
border-radius: 50%;
color: var(--color-text);
cursor: pointer;
transition: all var(--transition-fast);
}
.mdf-drawer__close:hover {
border-color: var(--color-accent-border);
color: var(--color-accent);
}
.mdf-drawer__body {
flex-grow: 1;
overflow-y: auto;
padding: var(--space-lg);
-webkit-overflow-scrolling: touch;
}
.mdf-drawer__section {
margin-bottom: var(--space-lg);
}
.mdf-drawer__section:last-child {
margin-bottom: 0;
}
.mdf-drawer__label {
display: block;
font-family: var(--font-heading);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-muted);
margin-bottom: var(--space-sm);
}
.mdf-drawer__footer {
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: var(--space-sm);
padding: var(--space-md) var(--space-lg);
padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
border-top: 1px solid var(--color-border);
background-color: var(--color-bg);
}
.mdf-drawer__apply {
width: 100%;
padding: var(--space-md);
background-color: var(--color-accent);
border: none;
border-radius: var(--radius-md);
color: #fff;
font-family: var(--font-heading);
font-size: 1rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
cursor: pointer;
transition: background-color var(--transition-fast);
}
.mdf-drawer__apply:hover {
background-color: var(--color-accent-hover);
}
.mdf-drawer__reset {
padding: var(--space-sm) var(--space-md);
background: none;
border: none;
color: var(--color-muted);
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
text-align: center;
transition: color var(--transition-fast);
}
.mdf-drawer__reset:hover {
color: var(--color-accent);
}
@media (min-width: 48em) {
.mdf-drawer {
display: none !important;
}
} .mdf-pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.mdf-pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 7px 14px;
background-color: var(--color-surface-2);
border: 1px solid var(--color-border);
border-radius: 100px;
color: var(--color-text);
font-family: var(--font-body);
font-size: 0.8125rem;
font-weight: 500;
cursor: pointer;
transition: all var(--transition-fast);
}
@media (max-width: 47.99em) {
.mdf-pill {
padding: 10px 16px;
font-size: 0.875rem;
min-height: 44px;
}
}
.mdf-pill:hover {
border-color: var(--color-accent-border);
background-color: var(--color-accent-bg);
}
.mdf-pill--active {
background-color: var(--color-accent-bg);
border-color: var(--color-accent);
color: var(--color-accent);
font-weight: 600;
}
.mdf-pill--disabled {
opacity: 0.35;
cursor: default;
pointer-events: none;
}
.mdf-pill svg {
flex-shrink: 0;
width: 18px;
height: 18px;
} .mdf-results-bar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-lg);
padding-bottom: var(--space-md);
border-bottom: 1px solid var(--color-border);
}
.mdf-results-bar__count {
color: var(--color-muted);
font-size: 0.9375rem;
font-weight: 500;
}
.mdf-results-bar__select {
width: auto;
min-width: 160px;
padding: 8px 12px;
font-size: 0.875rem;
}
@media (min-width: 48em) {
.mdf-results-bar__sort--mobile-only {
display: none;
}
} .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-grid__empty {
grid-column: 1 / -1;
padding: var(--space-xl);
text-align: center;
color: var(--color-muted);
background-color: var(--color-surface);
border-radius: var(--radius-lg);
font-size: 1.0625rem;
} .mdf-card__link,
.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-badge--permis {
background-color: rgba(14, 165, 233, 0.15);
color: var(--color-electric);
font-weight: 800;
}
.mdf-badge--reserve {
background-color: rgba(251, 191, 36, 0.15);
color: #FBBF24;
}
.mdf-badge--neuf {
background-color: rgba(34, 197, 94, 0.15);
color: #22C55E;
}
.mdf-badge--occasion {
background-color: rgba(107, 107, 107, 0.2);
color: #999;
}
.mdf-card__promo-tag {
position: absolute;
top: 12px;
right: 12px;
background-color: var(--color-accent);
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 .mdf-prix {
font-size: 1.125rem;
}
.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-prix--sur-demande {
background-color: var(--color-accent-bg);
color: var(--color-accent);
padding: 4px 10px;
border-radius: var(--radius-sm);
border: 1px solid var(--color-accent-border);
font-size: 0.8125rem;
font-weight: 600;
}
.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 .mdf-card__link {
pointer-events: none;
}
.mdf-card--vendu:hover {
transform: none;
border-color: var(--color-border);
} .mdf-loader {
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-xl);
}
.mdf-loader[hidden] {
display: none;
}
.mdf-loader__spinner {
width: 40px;
height: 40px;
border: 3px solid var(--color-border);
border-top-color: var(--color-accent);
border-radius: 50%;
animation: mdf-spin 0.7s linear infinite;
}
@keyframes mdf-spin {
to { transform: rotate(360deg); }
}
@keyframes mdf-fadeIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}