add MOVEMENT_DESCRIPTION and improve implémentation

css/styles.css

@@ -790,9 +790,10 @@ img {
 }
 
 .info-header {
-    font-size: 24px;
+    margin-top: 0;
-    font-weight: 600;
     margin-bottom: 20px;
+    font-size: 1.25rem;
+    line-height: 1.4;
 }
 
 .info-text {
@@ -847,8 +848,64 @@ img {
 }
 
 .info-image {
-    width: 100%;
+    max-width: 100%;
-    margin: 20px 0;
+    height: auto;
+    border-radius: 8px;
+}
+
+/* Styles for movement figure and caption */
+.movement-figure {
+    margin: 0;
+    padding: 0;
+    text-align: center;
+}
+
+.info-image {
+    max-width: 60%;
+    height: auto;
+    border-radius: 6px;
+    margin-bottom: 15px;
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+}
+
+.movement-caption {
+    font-size: 0.9rem;
+    line-height: 1.5;
+    color: var(--text-color-secondary);
+    text-align: justify;
+    margin-top: 10px;
+}
+
+/* Style pour le titre centré */
+.section-title.centered {
+    text-align: center;
+    margin: 0 0 20px;
+    position: relative;
+    padding-bottom: 15px;
+}
+
+.section-title.centered::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 60px;
+    height: 3px;
+    background-color: var(--primary-red);
+}
+
+/* Media queries pour le responsive */
+@media (max-width: 576px) {
+    .movement-caption {
+        font-size: 12px;
+    }
+    
+    .info-image {
+        max-width: 80%;
+    }
 }
 
 /* Footer */
@@ -1938,3 +1995,95 @@ i.icon-x,
     color: var(--primary-red);
     background-color: rgba(255, 0, 0, 0.05);
 }
+
+/* Styles pour le conteneur flex des sections Informations et Tendances Hashtags */
+.info-tags-container {
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+    margin-bottom: 40px;
+    margin-top: 60px;
+    position: relative;
+}
+
+/* Ajouter une séparation visuelle avant info-tags-container */
+.info-tags-container::before {
+    content: '';
+    position: absolute;
+    top: -30px;
+    left: 0;
+    width: 100%;
+    height: 1px;
+    background-color: var(--divider-color);
+}
+
+/* Conteneur pour la section des tags */
+.tags-section-container {
+    background-color: var(--card-bg);
+    border-radius: 8px;
+    padding: 25px 20px;
+    box-shadow: var(--card-shadow);
+    display: flex;
+    flex-direction: column;
+}
+
+/* Section info */
+.info-section {
+    background-color: var(--card-bg);
+    border-radius: 8px;
+    padding: 25px 20px;
+    box-shadow: var(--card-shadow);
+}
+
+.info-header {
+    margin-top: 0;
+    margin-bottom: 20px;
+    font-size: 1.25rem;
+    line-height: 1.4;
+}
+
+/* Media Queries pour grands écrans */
+@media (min-width: 992px) {
+    .info-tags-container {
+        flex-direction: row;
+        align-items: flex-start;
+        margin-top: 30px;
+    }
+    
+    .info-section, 
+    .tags-section-container {
+        display: flex;
+        flex-direction: column;
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+    
+    .info-section {
+        flex: 3;
+        margin-right: 30px;
+    }
+    
+    .tags-section-container {
+        flex: 2;
+        align-self: stretch;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+    
+    /* Quand la section info n'est pas présente, la section tags prend toute la largeur */
+    .info-tags-container:not(:has(.info-section)) .tags-section-container {
+        flex: 1;
+        max-width: 800px;
+        margin: 0 auto;
+    }
+    
+    .tags-section {
+        flex-grow: 1;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-content: center;
+    }
+} 

includes/config.local.php.sample

@@ -228,3 +228,10 @@ define('PRIORITY_CATEGORIES', [
 // define('LEGAL_LICENSE_URL', 'https://www.gnu.org/licenses/agpl-3.0.html');
 // define('LEGAL_SOURCE_CODE_URL', 'https://codeberg.org/Ka-Ubuntu/kaubuntu.re');
 // define('LEGAL_SERVICE_DESCRIPTION', 'est une plateforme multimédia proposant des contenus vidéo, des actualités et des informations liées au mouvement politique indépendantiste et panafricaniste réunionnais Ka-Ubuntu.');
+
+// =========================================
+// Texte de présentation du mouvement
+// =========================================
+
+// Pour désactiver le bloc de présentation, commentez cette ligne:
+// define('MOVEMENT_DESCRIPTION', 'KA UBUNTU est un mouvement politique indépendantiste et panafricaniste réunionnais qui a 5 objectifs :');

index.php

@@ -313,29 +313,39 @@
         endforeach;
         ?>
         
-        <!-- Section Tendances Hashtags -->
+        <!-- Section Flexbox pour Informations et Tendances Hashtags -->
-        <div class="video-section">
+        <div class="info-tags-container">
-            <h2 class="section-title">Tendances</h2>
+            <?php if (defined('MOVEMENT_DESCRIPTION') && !empty(MOVEMENT_DESCRIPTION)): ?>
+            <!-- Section Informations -->
+            <div class="info-section">
+                <h2 class="info-header"><?php echo MOVEMENT_DESCRIPTION; ?></h2>
                 
-            <div class="tags-section">
+                <figure class="movement-figure">
-                <?php 
+                    <img src="img/movement_presentation.png" alt="Les 5 objectifs de Ka-Ubuntu" class="info-image">
-                if (defined('POPULAR_TAGS') && !empty(POPULAR_TAGS)):
+                    <figcaption class="movement-caption">
-                    foreach (POPULAR_TAGS as $tag):
+                        Nos 5 points de lutte. 1. Activer la conscience politique et historique de notre peuple 2. Défendre le droit à I'autodétermination des peuples africains et afro-descendants 3. Arracher I'indépendance de notre pays La Réunion 4. Établir une unité politique, économique et culturelle de l'Afrique 5. Construire une solidarité entre les peuples opprimés
-                        $encodedTag = urlencode('#' . $tag);
+                    </figcaption>
-                ?>
+                </figure>
-                <a href="recherche.php?q=<?php echo $encodedTag; ?>" class="tag">#<?php echo htmlspecialchars($tag); ?></a>
-                <?php 
-                    endforeach;
-                endif;
-                ?>
             </div>
-        </div>
+            <?php endif; ?>
             
-        <!-- Section Informations -->
+            <!-- Section Tendances Hashtags -->
-        <div class="info-section">
+            <div class="tags-section-container">
-            <h2 class="info-header">KA UBUNTU est un mouvement politique indépendantiste et panafricaniste réunionnais qui a 5 objectifs :</h2>
+                <h2 class="section-title centered">Tendances</h2>
                 
-            <img src="img/ka-ubuntu-manifesto.png" alt="KA UBUNTU manifesto" class="info-image">
+                <div class="tags-section">
+                    <?php 
+                    if (defined('POPULAR_TAGS') && !empty(POPULAR_TAGS)):
+                        foreach (POPULAR_TAGS as $tag):
+                            $encodedTag = urlencode('#' . $tag);
+                    ?>
+                    <a href="recherche.php?q=<?php echo $encodedTag; ?>" class="tag">#<?php echo htmlspecialchars($tag); ?></a>
+                    <?php 
+                        endforeach;
+                    endif;
+                    ?>
+                </div>
+            </div>
         </div>
     </div>
     <?php include 'includes/footer.php'; ?>