feat: improve live info style

css/styles.css

@@ -750,6 +750,40 @@ img {
     display: flex;
     flex-direction: row;
     overflow: hidden;
+    /* Arrière-plan flou - sera défini en ligne avec l'URL de l'image */
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+/* Overlay d'assombrissement pour améliorer la lisibilité */
+.hero-next-live::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+        to right,
+        rgba(0, 0, 0, 0.3) 0%,
+        rgba(0, 0, 0, 0.6) 50%,
+        rgba(0, 0, 0, 0.85) 100%
+    );
+    z-index: 1;
+}
+
+/* Effet de flou sur l'arrière-plan */
+.hero-next-live::after {
+    content: '';
+    position: absolute;
+    top: -10px;
+    left: -10px;
+    right: -10px;
+    bottom: -10px;
+    background: inherit;
+    filter: blur(20px);
+    z-index: 0;
 }
 
 .hero-next-live-image-container {
@@ -757,8 +791,9 @@ img {
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: var(--bg-dark);
     padding: 15px;
+    position: relative;
+    z-index: 2;
 }
 
 .hero-next-live-image {
@@ -766,55 +801,65 @@ img {
     height: 100%;
     object-fit: contain;
     object-position: center;
+    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.6));
+    position: relative;
+    z-index: 2;
 }
 
 .hero-next-live-content {
     flex: 0 0 50%;
-    padding: 20px 15px;
+    padding: 25px 20px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-align: center;
-    background: linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.95) 100%);
+    background: rgba(0, 0, 0, 0.65);
+    backdrop-filter: blur(10px);
     color: white;
+    position: relative;
+    z-index: 2;
 }
 
 .hero-next-live-content i.fa-calendar-alt {
     font-size: 35px;
-    margin-bottom: 8px;
+    margin-bottom: 10px;
     color: var(--primary-red);
 }
 
 .hero-next-live-content h2 {
-    font-size: 20px;
+    font-size: 19px;
     font-weight: 700;
-    margin-bottom: 8px;
+    margin-bottom: 12px;
     color: white;
-    line-height: 1.2;
+    line-height: 1.4;
+    max-width: 90%;
 }
 
 .hero-next-live-content p {
     font-size: 14px;
     margin: 0 auto 12px;
     color: rgba(255, 255, 255, 0.95);
-    line-height: 1.3;
+    line-height: 1.4;
+    max-width: 95%;
 }
 
 .hero-next-live-date {
-    font-size: 15px !important;
+    font-size: 13px !important;
     font-weight: 600;
     color: white !important;
     background: var(--primary-red);
-    padding: 7px 14px;
+    padding: 8px 12px;
     border-radius: 8px;
     display: inline-block;
-    margin-bottom: 12px !important;
+    margin-bottom: 10px !important;
     box-shadow: 0 4px 12px rgba(255, 0, 0, 0.3);
+    max-width: 90%;
+    line-height: 1.4;
 }
 
 .hero-next-live-date i {
-    margin-right: 8px;
+    margin-right: 6px;
 }
 
 .hero-next-live-datetime {
@@ -824,21 +869,24 @@ img {
 .hero-next-live-timezones {
     display: flex;
     flex-wrap: wrap;
-    gap: 8px;
+    gap: 6px;
     justify-content: center;
-    margin-top: 12px;
+    margin-top: 10px;
-    padding: 12px 16px;
+    padding: 10px 12px;
     background-color: rgba(255, 255, 255, 0.15);
     border-radius: 8px;
+    max-width: 95%;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 .hero-timezone-item {
-    font-size: 13px;
+    font-size: 11px;
     color: rgba(255, 255, 255, 0.95);
     white-space: nowrap;
     line-height: 1.5;
     background-color: rgba(0, 0, 0, 0.3);
-    padding: 5px 10px;
+    padding: 4px 8px;
     border-radius: 5px;
     border: 1px solid rgba(255, 255, 255, 0.15);
     flex: 0 1 auto;
@@ -2492,8 +2540,43 @@ i.icon-mastodon,
     flex-direction: row;
     border-radius: 8px;
     overflow: hidden;
-    background-color: var(--card-bg);
     min-height: 500px;
+    position: relative;
+    /* Arrière-plan flou - sera défini en ligne avec l'URL de l'image */
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+/* Overlay d'assombrissement pour améliorer la lisibilité */
+.next-live-announcement::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+        to right,
+        rgba(0, 0, 0, 0.3) 0%,
+        rgba(0, 0, 0, 0.6) 50%,
+        rgba(0, 0, 0, 0.85) 100%
+    );
+    z-index: 1;
+}
+
+/* Effet de flou sur l'arrière-plan */
+.next-live-announcement::after {
+    content: '';
+    position: absolute;
+    top: -10px;
+    left: -10px;
+    right: -10px;
+    bottom: -10px;
+    background: inherit;
+    filter: blur(20px);
+    z-index: 0;
+    border-radius: 8px;
 }
 
 .next-live-image-container {
@@ -2501,8 +2584,9 @@ i.icon-mastodon,
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: var(--bg-dark);
     padding: 20px;
+    position: relative;
+    z-index: 2;
 }
 
 .next-live-image {
@@ -2511,6 +2595,9 @@ i.icon-mastodon,
     object-fit: contain;
     object-position: center;
     max-height: 600px;
+    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.7));
+    position: relative;
+    z-index: 2;
 }
 
 .next-live-content {
@@ -2521,7 +2608,10 @@ i.icon-mastodon,
     justify-content: center;
     align-items: center;
     text-align: center;
-    background: linear-gradient(135deg, var(--card-bg) 0%, var(--bg-dark) 100%);
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(15px);
+    position: relative;
+    z-index: 2;
 }
 
 .next-live-content i.fa-calendar-alt {
@@ -2534,16 +2624,18 @@ i.icon-mastodon,
     font-size: 32px;
     font-weight: 700;
     margin-bottom: 20px;
-    color: var(--text-color);
+    color: white;
     line-height: 1.3;
+    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
 }
 
 .next-live-content p {
     font-size: 20px;
     margin: 0 auto 25px;
-    color: var(--text-muted);
+    color: rgba(255, 255, 255, 0.95);
     line-height: 1.5;
     max-width: 100%;
+    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
 }
 
 .next-live-date {
@@ -2813,6 +2905,42 @@ i.icon-mastodon,
     }
 }
 
+/* Media query pour très petits écrans (iPhone 4S, etc.) */
+@media (max-width: 360px) {
+    /* Réduction de l'icône calendar pour .next-live-announcement sur direct.php */
+    .next-live-content i.fa-calendar-alt {
+        font-size: 35px;
+        margin-bottom: 8px;
+    }
+
+    .next-live-content h2 {
+        font-size: 20px;
+        margin-bottom: 12px;
+    }
+
+    .next-live-content p {
+        font-size: 14px;
+        margin-bottom: 15px;
+    }
+
+    .next-live-date {
+        font-size: 14px !important;
+        padding: 8px 14px;
+        margin-bottom: 12px !important;
+    }
+
+    .next-live-timezones {
+        gap: 6px;
+        padding: 10px 12px;
+        margin-top: 10px;
+    }
+
+    .timezone-item {
+        font-size: 11px;
+        padding: 4px 8px;
+    }
+}
+
 /* Catégories */
 .category-page {
     width: 100%;

direct.php

@@ -157,8 +157,13 @@ $liveStream = getLiveStream();
 
                     if ($showNextLiveAnnouncement) {
                         // Afficher l'annonce du prochain live
+                        // Définir l'image de fond si disponible
+                        $bgImageStyle = '';
+                        if (!empty(NEXT_LIVE_IMAGE) && file_exists(NEXT_LIVE_IMAGE)) {
+                            $bgImageStyle = 'background-image: url(\'' . htmlspecialchars(NEXT_LIVE_IMAGE) . '\');';
+                        }
                         ?>
-                        <div class="next-live-announcement">
+                        <div class="next-live-announcement" style="<?php echo $bgImageStyle; ?>">
                             <?php if (!empty(NEXT_LIVE_IMAGE) && file_exists(NEXT_LIVE_IMAGE)): ?>
                                 <div class="next-live-image-container">
                                     <img src="<?php echo htmlspecialchars(NEXT_LIVE_IMAGE); ?>"

index.php

@@ -147,8 +147,13 @@ setSecurityHeaders();
 
                     if ($showNextLiveAnnouncement) {
                         // Afficher l'annonce du prochain live
+                        // Définir l'image de fond si disponible
+                        $bgImageStyle = '';
+                        if (!empty(NEXT_LIVE_IMAGE) && file_exists(NEXT_LIVE_IMAGE)) {
+                            $bgImageStyle = 'background-image: url(\'' . htmlspecialchars(NEXT_LIVE_IMAGE) . '\');';
+                        }
                         ?>
-                        <div class="hero-next-live">
+                        <div class="hero-next-live" style="<?php echo $bgImageStyle; ?>">
                             <?php if (!empty(NEXT_LIVE_IMAGE) && file_exists(NEXT_LIVE_IMAGE)): ?>
                                 <div class="hero-next-live-image-container">
                                     <img src="<?php echo htmlspecialchars(NEXT_LIVE_IMAGE); ?>"