« Modèle:Card/styles.css » : différence entre les versions
De Nefald
Autres actions
Aucun résumé des modifications |
Aucun résumé des modifications |
||
| Ligne 341 : | Ligne 341 : | ||
.home-card__image { | .home-card__image { | ||
height: 180px; | height: 180px; | ||
} | |||
} | |||
/* ============================================================================= | |||
LAYOUT AVEC SIDEBAR | |||
============================================================================= */ | |||
.home-layout-with-sidebar { | |||
display: grid; | |||
grid-template-columns: 1fr 320px; | |||
gap: 24px; | |||
margin: 24px 0; | |||
width: 100%; | |||
align-items: start; | |||
} | |||
/* Colonne principale (gauche) */ | |||
.home-main-content { | |||
display: flex; | |||
flex-direction: column; | |||
gap: 24px; | |||
} | |||
/* Sidebar (droite) */ | |||
.home-sidebar { | |||
position: sticky; | |||
top: 20px; | |||
display: flex; | |||
flex-direction: column; | |||
gap: 16px; | |||
} | |||
/* Grilles pour la colonne principale */ | |||
.home-cards-grid-1, | |||
.home-cards-grid-2 { | |||
display: grid; | |||
gap: 24px; | |||
width: 100%; | |||
} | |||
.home-cards-grid-1 { | |||
grid-template-columns: 1fr; | |||
} | |||
.home-cards-grid-2 { | |||
grid-template-columns: repeat(2, 1fr); | |||
} | |||
/* ============================================================================= | |||
RESPONSIVE - Adaptation mobile | |||
============================================================================= */ | |||
@media (max-width: 1024px) { | |||
.home-layout-with-sidebar { | |||
grid-template-columns: 1fr; | |||
gap: 16px; | |||
} | |||
.home-sidebar { | |||
position: static; | |||
order: -1; /* Sidebar en haut sur mobile */ | |||
} | |||
} | |||
@media (max-width: 768px) { | |||
.home-cards-grid-2 { | |||
grid-template-columns: 1fr; | |||
gap: 16px; | |||
} | } | ||
} | } | ||