feat: show WordPress posts

css/styles.css

@@ -469,6 +469,24 @@ img {
     --mt-color-content-txt: var(--text-color);
 }
 
+/* Override couleurs Mastodon - Theme rouge */
+.mt-container, .mt-container[data-theme=light], .mt-dialog, .mt-dialog[data-theme=light] {
+    --mt-color-btn-bg: var(--primary-red) !important;
+    --mt-color-btn-bg-hover: #cc0000 !important; 
+    --mt-color-link: var(--primary-red) !important;
+}
+
+.mt-container[data-theme=dark], .mt-dialog[data-theme=dark] {
+    --mt-color-btn-bg: var(--primary-red) !important;
+    --mt-color-btn-bg-hover: #ff6666 !important;
+    --mt-color-link: #ff6666 !important;
+}
+
+/* Icône Mastodon en rouge */
+.mt-title i.fa-mastodon {
+    color: var(--primary-red) !important;
+}
+
 [data-theme="dark"] img {
     opacity: 0.9;
 }
@@ -499,15 +517,35 @@ img {
 
 /* Hero Section */
 .hero-mastodon-wrapper {
-    display: flex;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
     gap: 20px;
     margin-bottom: 30px;
     padding-top: 5px;
+    align-items: start;
+}
+
+/* Responsive breakpoint intermédiaire pour les 3 éléments */
+@media (max-width: 1200px) and (min-width: 1025px) {
+    .hero-mastodon-wrapper {
+        grid-template-columns: 1fr;
+        grid-template-rows: auto auto;
+    }
+    
+    .timeline-wordpress-container {
+        grid-column: 1 / -1;
+        grid-template-columns: 1fr;
+        gap: 15px;
+    }
+    
+    .timeline-wordpress-container .wordpress-section {
+        width: 100%;
+    }
 }
 
 .hero {
     position: relative;
-    width: 50%;
+    width: 100%;
     height: 400px;
     background-color: #888;
     overflow: hidden;
@@ -633,7 +671,7 @@ img {
 }
 
 #mt-container {
-    width: 50%;
+    width: 100%;
     height: 400px;
     border-radius: 8px;
     display: flex;
@@ -1730,7 +1768,7 @@ img {
     }
     
     .hero-mastodon-wrapper {
-        flex-direction: column;
+        grid-template-columns: 1fr;
     }
     
     .hero, #mt-container {
@@ -1738,10 +1776,15 @@ img {
         height: 300px;
     }
     
-    #mt-container {
+    .hero-mastodon-wrapper #mt-container {
         height: 600px;
     }
     
+    /* Pour le nouveau layout timeline-wordpress */
+    .timeline-wordpress-container #mt-container {
+        height: 400px;
+    }
+    
     /* Réduire la taille des boutons du footer Mastodon en mobile */
     .mt-footer .mt-btn-violet {
         font-size: 12px !important;