From 19fc787f6821aa4eb6ec50dfac2ac39981a5a065 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= <c.pronzola@tuta.io>
Date: Fri, 11 Apr 2025 07:17:24 +0400
Subject: [PATCH] add separator

---
 css/styles.css | 46 +++++++++++++++++++++++++++++++++++-----------
 index.php      | 16 ++++++++++++++++
 2 files changed, 51 insertions(+), 11 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index dbb91ae..a9e2491 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -2041,17 +2041,6 @@ i.icon-x,
     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);
@@ -2121,4 +2110,39 @@ i.icon-x,
         justify-content: center;
         align-content: center;
     }
+}
+
+/* Séparateur de section */
+.section-divider {
+    height: 1px;
+    background-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.1) 50%, transparent);
+    border: none;
+    margin: 40px 0;
+    position: relative;
+    overflow: visible;
+}
+
+.section-divider::before {
+    content: '';
+    display: block;
+    width: 40px;
+    height: 5px;
+    background-color: var(--primary-red);
+    position: absolute;
+    top: -2px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-radius: 2px;
+}
+
+/* Version responsive du séparateur */
+@media (max-width: 768px) {
+    .section-divider {
+        margin: 30px 0;
+    }
+    
+    .section-divider::before {
+        width: 30px;
+        height: 4px;
+    }
 } 
\ No newline at end of file
diff --git a/index.php b/index.php
index ecc8fa7..8f1661e 100644
--- a/index.php
+++ b/index.php
@@ -100,6 +100,9 @@
             ?>
         </div>
         
+        <!-- Séparateur stylisé -->
+        <hr class="section-divider">
+        
         <!-- Section Shorts -->
         <div class="video-section">
             <div class="section-header">
@@ -147,6 +150,9 @@
             </div>
         </div>
         
+        <!-- Séparateur stylisé -->
+        <hr class="section-divider">
+        
         <!-- Section Dernières vidéos -->
         <div class="video-section">
             <div class="section-header">
@@ -202,6 +208,9 @@
             <button class="view-more">Voir plus</button>
         </div>
         
+        <!-- Séparateur stylisé -->
+        <hr class="section-divider">
+        
         <!-- Section Tendances -->
         <div class="video-section">
             <div class="section-header">
@@ -257,6 +266,9 @@
             <button class="view-more">Voir plus</button>
         </div>
         
+        <!-- Séparateur stylisé -->
+        <hr class="section-divider">
+        
         <!-- Sections par catégorie -->
         <?php
         // Récupérer les catégories avec leurs vidéos
@@ -308,6 +320,10 @@
             
             <button class="view-more">Voir plus</button>
         </div>
+        
+        <!-- Séparateur stylisé -->
+        <hr class="section-divider">
+        
         <?php 
             endif;
         endforeach;