add MOVEMENT_DESCRIPTION and improve implémentation

css/styles.css

@@ -790,9 +790,10 @@ img {
 }
 
 .info-header {
-    font-size: 24px;
-    font-weight: 600;
+    margin-top: 0;
     margin-bottom: 20px;
+    font-size: 1.25rem;
+    line-height: 1.4;
 }
 
 .info-text {
@@ -847,8 +848,64 @@ img {
 }
 
 .info-image {
-    width: 100%;
-    margin: 20px 0;
+    max-width: 100%;
+    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 */
@@ -1937,4 +1994,96 @@ i.icon-x,
 .mobile-menu .nav-item:hover {
     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;
+    }
 }