improve footer

css/styles.css

@@ -597,16 +597,74 @@ img {
 /* Footer */
 .footer {
     margin-top: 40px;
+    margin-left: 250px;
+    width: calc(100% - 250px);
     padding: 30px 20px;
     background-color: var(--footer-bg);
     text-align: center;
-    width: 100%;
     box-sizing: border-box;
     align-self: stretch;
 }
 
+.footer-columns {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    text-align: left;
+    margin-bottom: 30px;
+}
+
+.footer-column {
+    flex: 1;
+    min-width: 200px;
+    padding: 0 15px;
+    margin-bottom: 20px;
+}
+
+.footer-column:first-child {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.footer-title {
+    font-size: 18px;
+    font-weight: 600;
+    margin-bottom: 15px;
+    color: #333;
+}
+
+.footer-links {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
+
+.footer-links li {
+    margin-bottom: 8px;
+}
+
+.footer-links a {
+    color: #555;
+    text-decoration: none;
+    font-size: 14px;
+    transition: color 0.2s;
+}
+
+.footer-links a:hover {
+    color: var(--primary-red);
+}
+
+.footer-copyright {
+    padding-top: 20px;
+    border-top: 1px solid #e0e0e0;
+    font-size: 14px;
+    color: #666;
+}
+
 .footer-logo {
     margin-bottom: 20px;
+    align-self: flex-start;
 }
 
 .footer-logo img {
@@ -615,12 +673,13 @@ img {
 
 .footer-social {
     display: flex;
-    justify-content: center;
+    justify-content: flex-start;
     margin-bottom: 20px;
+    align-self: flex-start;
 }
 
 .footer-social a {
-    margin: 0 10px;
+    margin: 0 10px 0 0;
     font-size: 24px;
     color: var(--text-color);
 }
@@ -629,10 +688,12 @@ img {
     font-size: 18px;
     font-weight: 600;
     margin-bottom: 10px;
+    align-self: flex-start;
 }
 
 .footer-email {
     font-size: 16px;
+    align-self: flex-start;
 }
 
 /* Dark Mode Toggle */
@@ -690,7 +751,7 @@ img {
         width: 70px;
     }
     
-    .main-content {
+    .main-content, .footer {
         margin-left: 70px;
         width: calc(100% - 70px);
     }
@@ -747,7 +808,7 @@ img {
         display: none;
     }
     
-    .main-content {
+    .main-content, .footer {
         margin-left: 0;
         width: 100%;
     }
@@ -796,6 +857,15 @@ img {
     .hero-logo {
         font-size: 40px;
     }
+    
+    .footer-columns {
+        flex-direction: column;
+    }
+    
+    .footer-column {
+        text-align: center;
+        margin-bottom: 30px;
+    }
 }
 
 @media (max-width: 992px) {

includes/footer.php

@@ -1,17 +1,58 @@
 <!-- Footer -->
 <div class="footer">
-    <div class="footer-logo">
+    <div class="footer-columns">
-        <img src="img/logo.png" alt="Kaubuntu.re">
+        <div class="footer-column">
+            <div class="footer-logo">
+                <img src="img/logo.png" alt="Kaubuntu.re">
+            </div>
+            
+            <div class="footer-social">
+                <a target="_blank" rel="noreferrer" href="<?php echo FACEBOOK_URL; ?>"><i class="fab fa-facebook icon-facebook"></i></a>
+                <a target="_blank" rel="noreferrer" href="<?php echo YOUTUBE_URL; ?>"><i class="fab fa-youtube icon-youtube"></i></a>
+                <a target="_blank" rel="noreferrer" href="<?php echo INSTAGRAM_URL; ?>"><i class="fab fa-instagram icon-instagram"></i></a>
+                <a target="_blank" rel="noreferrer" href="<?php echo X_URL; ?>"><i class="fab fa-x-twitter icon-x"></i></a>
+                <a target="_blank" rel="noreferrer" href="<?php echo TIKTOK_URL; ?>"><i class="fab fa-tiktok icon-tiktok"></i></a>
+            </div>
+            
+            <div class="footer-contact">CONTACT</div>
+            <div class="footer-email">zinfos@kaubuntu.com</div>
+        </div>
+        
+        <div class="footer-column">
+            <h3 class="footer-title">Catégories</h3>
+            <ul class="footer-links">
+                <li><a href="index.php">Accueil</a></li>
+                <li><a href="#">Direct</a></li>
+                <li><a href="#">Explorer</a></li>
+                <li><a href="#">Actualité</a></li>
+                <li><a href="#">Musique</a></li>
+                <li><a href="#">Histoire</a></li>
+                <li><a href="#">Sport</a></li>
+            </ul>
+        </div>
+        
+        <div class="footer-column">
+            <h3 class="footer-title">Hashtags</h3>
+            <ul class="footer-links">
+                <li><a href="#">Interview</a></li>
+                <li><a href="#">Conférence</a></li>
+                <li><a href="#">Colonialisme</a></li>
+                <li><a href="#">La Réunion</a></li>
+                <li><a href="#">Afrique</a></li>
+            </ul>
+        </div>
+        
+        <div class="footer-column">
+            <h3 class="footer-title">Informations légales</h3>
+            <ul class="footer-links">
+                <li><a href="cgu.php">Conditions générales d'utilisation</a></li>
+                <li><a href="#">Politique de confidentialité</a></li>
+                <li><a href="#">Mentions légales</a></li>
+            </ul>
+        </div>
     </div>
     
-    <div class="footer-social">
+    <div class="footer-copyright">
-        <a target="_blank" rel="noreferrer" href="<?php echo FACEBOOK_URL; ?>"><i class="fab fa-facebook icon-facebook"></i></a>
+        © <?php echo date('Y'); ?> Kaubuntu.re - Tous droits réservés
-        <a target="_blank" rel="noreferrer" href="<?php echo YOUTUBE_URL; ?>"><i class="fab fa-youtube icon-youtube"></i></a>
-        <a target="_blank" rel="noreferrer" href="<?php echo INSTAGRAM_URL; ?>"><i class="fab fa-instagram icon-instagram"></i></a>
-        <a target="_blank" rel="noreferrer" href="<?php echo X_URL; ?>"><i class="fab fa-x-twitter icon-x"></i></a>
-        <a target="_blank" rel="noreferrer" href="<?php echo TIKTOK_URL; ?>"><i class="fab fa-tiktok icon-tiktok"></i></a>
     </div>
-    
-    <div class="footer-contact">CONTACT</div>
-    <div class="footer-email">zinfos@kaubuntu.com</div>
 </div>