From 5457f6fae0256824ef7099d3ff990b2c5d1c1182 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= <c.pronzola@tuta.io>
Date: Sat, 25 Jul 2026 18:45:11 +0400
Subject: [PATCH] style: feature trending hashtags card with accent bar and
 icon

---
 css/styles.css | 22 +++++++++++++++++++++-
 index.php      |  2 +-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index 9d7a61d..698dcdf 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -3528,12 +3528,31 @@ i.icon-mastodon,
     }
 }
 
-/* Section « Tendances » (aside de l'accueil) : carte aérée et centrée */
+/* Section « Tendances » (aside de l'accueil) : carte « mise en avant » */
 .tags-section-container {
+    position: relative;
     align-items: center;
     justify-content: center;
     text-align: center;
     gap: 6px;
+    border: 1px solid var(--tag-border);
+    overflow: hidden;
+}
+
+/* Barre d'accent identitaire en haut de la carte (rouge → jaune → vert) */
+.tags-section-container::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: linear-gradient(90deg, var(--primary-red) 0%, #FFD700 50%, var(--primary-green) 100%);
+}
+
+/* Icône du titre */
+.trending-title-icon {
+    color: var(--primary-red);
 }
 
 .tags-section-container .tags-section {
@@ -3546,6 +3565,7 @@ i.icon-mastodon,
 .tags-section-container .tag {
     font-size: 1rem;
     padding: 10px 22px;
+    border: 1px solid var(--tag-border);
 }
 
 /* Rangée d'emoji décorative au-dessus des hashtags « Tendances » (accueil) */
diff --git a/index.php b/index.php
index b868b73..88fc02f 100644
--- a/index.php
+++ b/index.php
@@ -667,7 +667,7 @@ if (defined('CASTOPOD_ENABLED') && CASTOPOD_ENABLED && defined('CASTOPOD_URL') &
 
             <!-- Section Tendances Hashtags -->
             <aside class="tags-section-container" aria-labelledby="hashtags-heading">
-                <h2 id="hashtags-heading" class="section-title centered">Tendances</h2>
+                <h2 id="hashtags-heading" class="section-title centered"><i class="fas fa-fire trending-title-icon" aria-hidden="true"></i> Tendances</h2>
                 <p class="trending-hashtag-emojis" aria-hidden="true">🎙️🔥📈🔝⬆️↗️🚩🇲🇶</p>
 
                 <div class="tags-section">