Programme
Aucun programme pour cette journée.
/* —– Variables palette —– */
.a1tv-app { –a1-red1: #e00114; –a1-red2: #e94150; –a1-white: #ffffff; –glass: rgba(255,255,255,0.06); –muted: rgba(255,255,255,0.85); font-family: -apple-system, BlinkMacSystemFont, « Segoe UI », Roboto, « Helvetica Neue », Arial; }
/* —– Container plein écran —– */
.a1tv-app {
width: 100%;
min-height: 100vh;
box-sizing: border-box;
display: flex;
flex-direction: column;
background: linear-gradient(160deg, var(–a1-red1) 0%, var(–a1-red2) 60%);
color: var(–a1-white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding: 0;
overflow: hidden;
}
/* —– Header —– */
.a1tv-header {
padding: 12px 16px;
backdrop-filter: blur(6px);
background: linear-gradient(180deg, rgba(0,0,0,0.08), transparent);
box-shadow: 0 6px 18px rgba(0,0,0,0.18);
z-index: 20;
}
.a1tv-header-inner {
max-width: 1100px;
margin: 0 auto;
display:flex;
align-items:center;
gap:12px;
}
.a1tv-logo { width:48px; height:48px; object-fit:contain; border-radius:8px; background:var(–a1-white); padding:4px; }
.a1tv-title { display:flex; flex-direction:column; line-height:1; }
.a1tv-channel { font-weight:700; font-size:18px; letter-spacing:0.3px; }
.a1tv-live {
margin-top:6px;
font-size:11px;
font-weight:700;
background: linear-gradient(90deg, var(–a1-white), rgba(255,255,255,0.6));
color: var(–a1-red1);
padding:4px 8px;
border-radius:999px;
display:inline-block;
}
/* Favorite button */
.a1tv-fav {
margin-left:auto;
background:transparent;
border:1px solid rgba(255,255,255,0.12);
color:var(–a1-white);
padding:8px 10px;
border-radius:10px;
font-size:16px;
cursor:pointer;
}
/* —– Main layout —– */
.a1tv-main {
width:100%;
max-width:1100px;
margin: 18px auto;
padding: 0 16px 24px;
display:flex;
flex-direction:column;
gap:16px;
flex:1 1 auto;
}
/* Player card (mobile app look) */
.player-card {
background: linear-gradient(180deg, rgb(255 255 255), rgb(6 6 6));
border-radius:18px;
padding:12px;
box-shadow: 0 8px 30px rgba(0,0,0,0.28);
position:relative;
overflow:hidden;
}
/* make player area keep 16:9 ratio and be responsive */
.player-frame {
position:relative;
width:100%;
padding-top:56.25%; /* 16:9 ratio */
background:var(–glass);
border-radius:12px;
overflow:hidden;
}
/* If the shortcode injects an iframe/video, ensure it fills the box */
.player-frame > * {
position:absolute !important;
top:0; left:0; width:100% !important; height:100% !important;
border-radius:12px;
}
/* small translucent overlay logo */
.player-overlay {
position:absolute;
bottom:18px;
right:18px;
width:56px;
height:56px;
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.12));
box-shadow: 0 6px 18px rgba(0,0,0,0.32);
pointer-events:none;
}
.player-overlay img { width:42px; height:auto; opacity:0.95; }
/* —– Viewer count (nouveau) —– */
.viewer-count {
margin:12px 10px 0;
display:inline-flex;
align-items:center;
gap:10px;
background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
border-radius:999px;
padding:8px 12px;
font-weight:700;
font-size:13px;
color:var(–a1-white);
box-shadow: 0 8px 20px rgba(0,0,0,0.22);
width: fit-content;
transition: transform 220ms ease, box-shadow 220ms ease, opacity 220ms ease;
will-change: transform;
}
.viewer-icon { opacity:0.95; transform: translateY(1px); }
.viewer-number { font-feature-settings: « tnum »; margin-left:2px; }
.viewer-label { margin-left:4px; font-weight:600; font-size:12px; opacity:0.95; color: rgba(255,255,255,0.95); }
/* Animation when le nombre change */
.viewer-count.update {
transform: translateY(-4px) scale(1.03);
box-shadow: 0 14px 30px rgba(0,0,0,0.32);
}
.viewer-count .viewer-number {
transition: transform 280ms cubic-bezier(.2,.9,.2,1), opacity 180ms;
}
.viewer-count.pulse .viewer-number {
transform: scale(1.06);
opacity:1;
}
/* Schedule card */
.schedule-card {
background: rgba(255,255,255,0.03);
border-radius:14px;
padding:12px;
box-shadow: 0 6px 18px rgba(0,0,0,0.22);
display:flex;
flex-direction:column;
gap:10px;
max-height: calc(100vh – 300px); /* laisse de la place pour player et header */
overflow:auto;
}
.schedule-title {
font-size:14px;
font-weight:700;
letter-spacing:0.3px;
display:flex;
align-items:center;
gap:8px;
}
.schedule-title::before {
content: » »;
width:10px; height:10px;
background: radial-gradient(circle at 30% 30%, var(–a1-white), var(–a1-red2));
border-radius:2px;
box-shadow:0 6px 14px rgba(233,65,80,0.18);
}
/* Ensure schedule content (shortcode output) is readable */
.schedule-frame {
color:var(–a1-white);
font-size:14px;
line-height:1.4;
}
/* Links / controls inside schedule */
.schedule-frame a, .schedule-frame button {
color:var(–a1-white);
text-decoration:none;
}
/* Footer */
.a1tv-footer {
padding:10px 16px;
text-align:center;
font-size:12px;
opacity:0.9;
color:rgba(255,255,255,0.85);
}
/* —– Responsive tweaks —– */
@media (min-width:900px){
.a1tv-main { flex-direction:row; align-items:flex-start; gap:20px; }
.player-card { flex: 1 1 65%; padding:16px; }
.schedule-card { flex: 1 1 35%; max-height: calc(100vh – 140px); }
.player-frame { padding-top:56.25%; }
}
@media (max-width:420px){
.a1tv-logo { width:44px; height:44px; }
.a1tv-channel { font-size:16px; }
.player-overlay { width:48px; height:48px; right:12px; bottom:12px; }
.viewer-count { margin-left:8px; }
}
(function () {
// IIFE pour éviter collisions globales
function formatNumber(n) {
// espace comme séparateur de milliers
return String(Math.round(n)).replace(/\B(?=(\d{3})+(?!\d))/g, » « );
}
// cherche l’élément viewer-number dans le widget
var root = document.querySelector(‘.a1tv-app’);
if (!root) return;
var viewerNumberEl = root.querySelector(‘.viewer-number’);
var viewerCountWrapper = root.querySelector(‘.viewer-count’);
// initialisation sûre
if (!viewerNumberEl || !viewerCountWrapper) return;
// nombre de départ aléatoire : entre 800 et 12 000
var current = Math.floor(Math.random() * (12000 – 800 + 1)) + 800;
viewerNumberEl.textContent = formatNumber(current);
// fonction qui applique une petite variation aléatoire et anime le changement
function updateViewerCount() {
// variation relative entre -7% et +10% mais limitée pour garder du réalisme
var ratio = (Math.random() * 0.17) – 0.07; // [-0.07, +0.10]
var delta = Math.round(current * ratio);
// parfois faire un petit pic aléatoire
if (Math.random() < 0.06) { delta += Math.round(Math.random() * 800); }
current = Math.max(12, current + delta); // ne pas descendre sous 12
// animation
viewerCountWrapper.classList.add('update');
// pulse effect for number
viewerCountWrapper.classList.add('pulse');
// update texte
viewerNumberEl.textContent = formatNumber(current);
// retire les classes d'animation après transition
setTimeout(function () {
viewerCountWrapper.classList.remove('pulse');
}, 250);
setTimeout(function () {
viewerCountWrapper.classList.remove('update');
}, 420);
}
// lance la variation de façon répétée à intervalle aléatoire entre 3s et 8s
function scheduleNext() {
var delay = Math.floor(Math.random() * 5000) + 3000; // 3000..8000 ms
setTimeout(function () {
updateViewerCount();
scheduleNext();
}, delay);
}
// Démarrage après que la page soit prête (permet au shortcode d'injecter si besoin)
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', scheduleNext);
} else {
scheduleNext();
}
// Optionnel : rendre le nombre rafraîchissable au clic (utile pour tests)
viewerCountWrapper.addEventListener('click', function () {
updateViewerCount();
});
})();
