add links to search

css/styles.css

@@ -115,18 +115,31 @@ img {
 }
 
 .tag-item {
+    position: relative;
     display: flex;
     align-items: center;
-    padding: 8px 15px;
+    padding: 10px 15px 10px 25px;
-    font-size: 16px;
+    color: var(--text-color);
+    text-decoration: none;
+    transition: all 0.2s ease;
+    font-size: 14px;
 }
 
-.tag-item .tag-dot {
+.tag-item:hover {
-    width: 16px;
+    background-color: rgba(0, 0, 0, 0.05);
-    height: 16px;
+    color: var(--primary-red);
-    border-radius: 50%;
+    transform: translateX(5px);
-    background-color: var(--primary-red);
+}
-    margin-right: 15px;
+
+.tag-icon {
+    color: var(--primary-red);
+    font-size: 0.9em;
+    margin-right: 10px;
+    transition: transform 0.2s ease;
+}
+
+.tag-item:hover .tag-icon {
+    transform: scale(1.5);
 }
 
 /* Header */
@@ -139,6 +152,7 @@ img {
     position: sticky;
     top: 0;
     z-index: 50;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 }
 
 .search-container {
@@ -154,23 +168,54 @@ img {
 
 .search-container input {
     width: 100%;
-    padding: 12px 15px;
+    padding: 12px 45px 12px 15px;
-    border: none;
+    border: 1px solid #e0e0e0;
-    border-radius: 4px;
+    border-radius: 25px;
-    background-color: var(--search-bg);
+    background-color: #f8f8f8;
     font-size: 16px;
+    transition: all 0.3s ease;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+    color: var(--text-color);
+}
+
+.search-container input:focus {
+    outline: none;
+    border-color: var(--primary-red);
+    background-color: white;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.search-container input::placeholder {
+    color: #9e9e9e;
+    transition: opacity 0.3s ease;
+}
+
+.search-container input:focus::placeholder {
+    opacity: 0.7;
 }
 
 .search-container button {
     position: absolute;
-    right: 10px;
+    right: 5px;
     top: 50%;
     transform: translateY(-50%);
-    background: none;
+    background-color: var(--primary-red);
+    color: white;
     border: none;
+    border-radius: 50%;
+    width: 35px;
+    height: 35px;
     cursor: pointer;
-    color: #555;
+    display: flex;
-    font-size: 18px;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    transition: all 0.3s ease;
+}
+
+.search-container button:hover {
+    background-color: #d40000;
+    transform: translateY(-50%) scale(1.05);
 }
 
 .social-icons, .action-icons {
@@ -1672,4 +1717,175 @@ i.icon-x,
     .category-videos {
         grid-template-columns: 1fr;
     }
+}
+
+/* Page de recherche */
+.search-page {
+    margin-bottom: 40px;
+}
+
+.search-form-container {
+    margin: 20px 0 30px;
+}
+
+.search-form {
+    display: flex;
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+.search-form input[type="text"] {
+    flex: 1;
+    padding: 12px 15px;
+    font-size: 16px;
+    border: 2px solid #ddd;
+    border-right: none;
+    border-radius: 4px 0 0 4px;
+    width: 100%;
+}
+
+.search-form button {
+    background-color: var(--primary-red);
+    color: white;
+    border: none;
+    padding: 0 20px;
+    cursor: pointer;
+    border-radius: 0 4px 4px 0;
+    font-size: 16px;
+    transition: background-color 0.3s;
+}
+
+.search-form button:hover {
+    background-color: #d40000;
+}
+
+.search-results-count {
+    text-align: center;
+    margin-bottom: 20px;
+    padding: 10px;
+    background-color: #f9f9f9;
+    border-radius: 4px;
+}
+
+.search-instructions {
+    text-align: center;
+    margin: 40px auto;
+    max-width: 500px;
+    padding: 30px;
+    background-color: #f9f9f9;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+}
+
+.search-instructions i {
+    font-size: 48px;
+    color: var(--primary-red);
+    margin-bottom: 15px;
+    opacity: 0.7;
+}
+
+.search-instructions h3 {
+    font-size: 22px;
+    margin-bottom: 15px;
+    color: #333;
+}
+
+.search-instructions p {
+    color: #666;
+    line-height: 1.5;
+    margin-bottom: 10px;
+}
+
+.search-instructions .mt-2 {
+    margin-top: 20px;
+}
+
+.search-instructions strong {
+    color: var(--primary-red);
+    font-weight: 600;
+}
+
+/* Pagination */
+.pagination {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 30px;
+    margin-bottom: 20px;
+}
+
+.page-numbers {
+    display: flex;
+    align-items: center;
+}
+
+.page-number {
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 5px;
+    border-radius: 4px;
+    background-color: #f5f5f5;
+    text-decoration: none;
+    color: #333;
+    font-weight: 500;
+    transition: all 0.2s;
+}
+
+.page-number:hover {
+    background-color: #e0e0e0;
+}
+
+.page-number.current {
+    background-color: var(--primary-red);
+    color: white;
+    cursor: default;
+}
+
+.page-link {
+    display: flex;
+    align-items: center;
+    padding: 8px 15px;
+    border-radius: 4px;
+    background-color: #f5f5f5;
+    text-decoration: none;
+    color: #333;
+    font-weight: 500;
+    margin: 0 10px;
+    transition: all 0.2s;
+}
+
+.page-link:hover {
+    background-color: #e0e0e0;
+}
+
+.page-link.prev i {
+    margin-right: 8px;
+}
+
+.page-link.next i {
+    margin-left: 8px;
+}
+
+.page-dots {
+    margin: 0 5px;
+    color: #666;
+}
+
+/* Styles pour les hashtags dans le menu mobile */
+.mobile-menu .nav-item .fas.fa-hashtag {
+    color: var(--primary-red);
+    font-size: 0.9em;
+    transition: transform 0.2s ease;
+}
+
+.mobile-menu .nav-item:hover .fas.fa-hashtag {
+    transform: scale(1.2);
+}
+
+.mobile-menu .nav-item:hover {
+    color: var(--primary-red);
+    background-color: rgba(255, 0, 0, 0.05);
 } 

css/video-page.css

@@ -460,11 +460,17 @@
     font-size: 0.8125rem;
     color: #222;
     text-decoration: none;
-    transition: background-color 0.2s;
+    transition: all 0.2s ease;
+    border: 1px solid #e0e0e0;
+    display: inline-flex;
+    align-items: center;
 }
 
 .tag:hover {
     background-color: #e0e0e0;
+    color: var(--primary-red);
+    transform: translateY(-2px);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 /* Commentaires */

includes/footer.php

@@ -31,10 +31,10 @@
         <div class="footer-column">
             <h3 class="footer-title">Hashtags</h3>
             <ul class="footer-links">
-                <li><a href="#">Colonialisme</a></li>
+                <li><a href="recherche.php?q=%23Colonialisme">Colonialisme</a></li>
-                <li><a href="#">La Réunion</a></li>
+                <li><a href="recherche.php?q=%23La%20R%C3%A9union">La Réunion</a></li>
-                <li><a href="#">Panafricanisme</a></li>
+                <li><a href="recherche.php?q=%23Panafricanisme">Panafricanisme</a></li>
-                <li><a href="#">Conférence</a></li>
+                <li><a href="recherche.php?q=%23Conf%C3%A9rence">Conférence</a></li>
             </ul>
         </div>
         

includes/header.php

@@ -1,8 +1,8 @@
 <!-- Header avec barre de recherche et icônes -->
 <div class="header">
     <div class="search-container">
-        <form action="search.php" method="get">
+        <form action="recherche.php" method="get">
-            <input type="text" name="q" placeholder="Recherche">
+            <input type="text" name="q" placeholder="Rechercher...">
             <button type="submit"><i class="fas fa-search"></i></button>
         </form>
     </div>

includes/mobile-menu.php

@@ -5,8 +5,8 @@
     </button>
     
     <div class="search-container">
-        <form action="search.php" method="get">
+        <form action="recherche.php" method="get">
-            <input type="text" name="q" placeholder="Recherche">
+            <input type="text" name="q" placeholder="Rechercher...">
             <button type="submit"><i class="fas fa-search"></i></button>
         </form>
     </div>
@@ -57,16 +57,16 @@
     <div class="nav-divider"></div>
     
     <h3 class="mobile-section-title">Hashtags populaires</h3>
-    <a href="#" class="nav-item">
+    <a href="recherche.php?q=%23Colonialisme" class="nav-item">
         <i class="fas fa-hashtag"></i> Colonialisme
     </a>
-    <a href="#" class="nav-item">
+    <a href="recherche.php?q=%23La%20R%C3%A9union" class="nav-item">
         <i class="fas fa-hashtag"></i> La Réunion
     </a>
-    <a href="#" class="nav-item">
+    <a href="recherche.php?q=%23Panafricanisme" class="nav-item">
         <i class="fas fa-hashtag"></i> Panafricanisme
     </a>
-    <a href="#" class="nav-item">
+    <a href="recherche.php?q=%23Conf%C3%A9rence" class="nav-item">
         <i class="fas fa-hashtag"></i> Conférence
     </a>
     

includes/sidebar.php

@@ -54,17 +54,17 @@
             <i class="fas fa-hashtag"></i> <span>Hashtags</span>
         </div>
         
-        <a href="#" class="tag-item" data-title="Colonialisme">
+        <a href="recherche.php?q=%23Colonialisme" class="tag-item" data-title="Colonialisme">
-            <div class="tag-dot"></div> <span>Colonialisme</span>
+            <i class="fas fa-hashtag tag-icon"></i> <span>Colonialisme</span>
         </a>
-        <a href="#" class="tag-item" data-title="La Réunion">
+        <a href="recherche.php?q=%23La%20R%C3%A9union" class="tag-item" data-title="La Réunion">
-            <div class="tag-dot"></div> <span>La Réunion</span>
+            <i class="fas fa-hashtag tag-icon"></i> <span>La Réunion</span>
         </a>
-        <a href="#" class="tag-item" data-title="Panafricanisme">
+        <a href="recherche.php?q=%23Panafricanisme" class="tag-item" data-title="Panafricanisme">
-            <div class="tag-dot"></div> <span>Panafricanisme</span>
+            <i class="fas fa-hashtag tag-icon"></i> <span>Panafricanisme</span>
         </a>
-        <a href="#" class="tag-item" data-title="Conférence">
+        <a href="recherche.php?q=%23Conf%C3%A9rence" class="tag-item" data-title="Conférence">
-            <div class="tag-dot"></div> <span>Conférence</span>
+            <i class="fas fa-hashtag tag-icon"></i> <span>Conférence</span>
         </a>
     </nav>
 </div>

video.php

@@ -298,7 +298,7 @@ if (empty($videoData) || isset($videoData['error'])) {
                     <?php if (!empty($video['tags'])): ?>
                     <div class="video-tags">
                         <?php foreach ($video['tags'] as $tag): ?>
-                            <a href="search.php?q=<?php echo urlencode($tag); ?>" class="tag">#<?php echo htmlspecialchars($tag); ?></a>
+                            <a href="recherche.php?q=<?php echo urlencode('#' . $tag); ?>" class="tag">#<?php echo htmlspecialchars($tag); ?></a>
                         <?php endforeach; ?>
                     </div>
                     <?php endif; ?>