« Modèle:Card/styles.css » : différence entre les versions

Navigation interactive dans l’historique

← Modification précédente

@@ Ligne 240 : / Ligne 240 : @@
      color: var(--color-progressive, #4d90fe);
 }
 /* =============================================================================
-    GRILLES - Layouts multiples
+    GRILLES - Layouts multiples AVEC ESPACEMENTS RÉDUITS
     ============================================================================= */
@@ Ligne 250 : / Ligne 249 : @@
 .home-cards-grid-3 {
      display: grid;
-     gap: 24px;
+     gap: 12px; /* ← RÉDUIT de 24px à 12px */
-     margin: 24px 0;
+     margin: 0 !important; /* ← SUPPRIMÉ margin 24px */
      width: 100%;
 }
@@ Ligne 274 : / Ligne 273 : @@
 .home-cards-grid-3 {
      grid-template-columns: repeat(3, 1fr);
+}
+/* =============================================================================
+   LAYOUT AVEC SIDEBAR - ESPACEMENTS OPTIMISÉS
+   ============================================================================= */
+.home-layout-with-sidebar {
+    display: grid;
+    grid-template-columns: 1fr 300px;
+    gap: 0 16px; /* ← 0 vertical, 16px horizontal */
+    margin: 0 !important;
+    padding: 0 !important;
+    width: 100%;
+    align-items: start;
+}
+/* Colonne principale (gauche) */
+.home-main-content {
+    display: flex;
+    flex-direction: column;
+    gap: 12px; /* ← Espacement entre sections */
+    margin: 0 !important;
+    padding: 0 !important;
+}
+/* Sidebar (droite) */
+.home-sidebar {
+    position: sticky;
+    top: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    margin: 0 !important;
+    padding: 0 !important;
+}
+/* Override des grilles dans le layout sidebar */
+.home-layout-with-sidebar .home-cards-grid-1,
+.home-layout-with-sidebar .home-cards-grid-2,
+.home-layout-with-sidebar .home-cards-grid-3 {
+    gap: 12px;
+    margin: 0 !important;
+}
+/* =============================================================================
+   SUPPRESSION DES MARGES MEDIAWIKI PAR DÉFAUT
+   ============================================================================= */
+/* Supprimer les marges des éléments générés par MediaWiki */
+.home-layout-with-sidebar p,
+.home-main-content p,
+.home-sidebar p {
+    margin: 0 !important;
+}
+/* Supprimer les marges des divs conteneurs */
+.home-main-content > div,
+.home-sidebar > div {
+    margin: 0 !important;
+}
+/* Forcer la suppression des marges inline */
+.home-layout-with-sidebar [style*="margin"],
+.home-main-content [style*="margin"],
+.home-sidebar [style*="margin"] {
+    margin: 0 !important;
+}
+/* =============================================================================
+   RÉDUCTION DES MARGES INTERNES DES CARDS
+   ============================================================================= */
+/* Classe optionnelle pour cards encore plus compactes */
+.home-card-compact .home-card__content {
+    padding: 12px !important;
+}
+.home-card-compact .home-card__image {
+    height: 160px !important;
+    margin-bottom: 8px !important;
+}
+.home-card-compact .home-card__title {
+    margin-bottom: 6px !important;
+    font-size: 1.1rem !important;
 }
@@ Ligne 281 : / Ligne 365 : @@
 @media (max-width: 1024px) {
+    /* Grille 3 colonnes → 2 colonnes */
      .home-cards-grid-3 {
          grid-template-columns: repeat(2, 1fr);
+    }
+    /* Layout sidebar → empilé */
+    .home-layout-with-sidebar {
+        grid-template-columns: 1fr;
+        gap: 12px;
+    }
+    .home-sidebar {
+        position: static;
+        order: -1; /* Sidebar en haut sur tablette */
      }
 }
 @media (max-width: 768px) {
+    /* Toutes les grilles → 1 colonne */
      .home-cards-grid,
      .home-cards-grid-2,
      .home-cards-grid-3 {
          grid-template-columns: 1fr;
-         gap: 16px;
+         gap: 12px;
+    }
+    .home-layout-with-sidebar,
+    .home-main-content,
+    .home-sidebar {
+        gap: 12px;
      }
@@ Ligne 308 : / Ligne 411 : @@
 @media (max-width: 480px) {
-     .home-card__image {
+    /* Mobile très petit → espacement minimal */
-         height: 180px;
+    .home-cards-grid,
+    .home-cards-grid-1,
+    .home-cards-grid-2,
+     .home-cards-grid-3 {
+         gap: 8px;
      }
-}
+    .home-layout-with-sidebar,
-/* =============================================================================
+     .home-main-content,
-   RESPONSIVE
+    .home-sidebar {
-   ============================================================================= */
+         gap: 8px;
-/* Tablet et mobile */
-@media (max-width: 768px) {
-     .home-cards-grid {
-        grid-template-columns: 1fr;
-         gap: 16px;
      }
      .home-card__image {
-         height: 200px;
+         height: 180px;
      }
      .home-card__content {
-         padding: 16px;
+         padding: 12px;
-    }
-    .home-card__title {
-        font-size: 1.25rem;
      }
 }
-/* Petit mobile */
+/* =============================================================================
-@media (max-width: 480px) {
+   NETTOYAGE FINAL - FORCE TOUT À 0 SI PROBLÈME PERSISTE
-    .home-card__image {
+   ============================================================================= */
-        height: 180px;
-     }
+/* Décommenter si l'espacement persiste malgré tout */
+/*
+.home-layout-with-sidebar,
+.home-layout-with-sidebar *,
+.home-main-content,
+.home-main-content *,
+.home-sidebar,
+.home-sidebar * {
+    margin-top: 0 !important;
+     margin-bottom: 0 !important;
 }
+*/