/* --- VARIABLES ET STYLES DE BASE --- */
:root {
    --neon-blue: #00FFFF;
    --neon-blue-light: #88FFFF;
    --neon-blue-dark: #008080;
    --bg-dark: #0a0a0a;
    --bg-medium: #1a1a1a;
    --bg-light: #2c2c2c;
    --text-color: #e0e0e0;
    --error-red: #ff3b3b;
    --sidebar-width: 350px; 
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bg-dark);
    color: var(--text-color);
    padding: 20px;
    min-height: 100vh;
    overflow-x: hidden;
}

/* ------------------------------------------------------------------------- */
/* --- EN-TÊTE (MISE À JOUR CLÉ) --- */
/* ------------------------------------------------------------------------- */
header {
    /* ACTIVER FLEXBOX pour aligner les éléments sur une ligne */
    display: flex;
    justify-content: space-between; /* Pour pousser le titre à gauche et le bouton à droite/centre (si le nav est là) */
    align-items: center; /* Centrer verticalement */
    max-width: 1600px;
    margin: 0 auto 20px auto; /* Centrage et marge du bas */
    padding: 0 0; /* Ajuster au besoin */
}




h1 {
    color: var(--neon-blue);
    text-shadow: 0 0 5px var(--neon-blue), 0 0 10px var(--neon-blue);
    font-size: 2.2rem;
    text-align: left; /* Aligner le titre à gauche */
    margin: 0; /* Réinitialiser la marge du h1 pour l'alignement */
}

.top-nav {
    display: flex;
    justify-content: center;
    padding: 2rem;
    gap: 2rem;
}

/* ------------------------------------------------------------------------- */
/* --- BOUTON TOGGLE "CHAÎNES" (ADAPTÉ AU FLUX DU HEADER) --- */
/* ------------------------------------------------------------------------- */
.toggle-button {
    /* Retiré : position: fixed, top, left, z-index élevés. Il est dans le flux. */
    position: static; 
    
    /* Rendre le bouton plus petit pour qu'il tienne à côté du titre */
    width: auto; 
    padding: 0.5rem 0.8rem;
    font-size: 0.9rem;
    transform: none; 
    
    background: var(--bg-medium);
    border-color: var(--neon-blue-dark);
    /* Ajoutez une marge à gauche pour séparer du titre */
    margin-left: 20px;
    
    /* Assure qu'il est cliquable */
    z-index: 10; 
}

.toggle-button:hover {
    transform: scale(1.05); 
}

/* Style général des autres boutons .live-button (conservé) */
.live-button {
    text-decoration: none;
    color: #00e6e6; 
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%); 
    border-radius: 50px; 
    font-family: 'Montserrat', sans-serif; 
    font-weight: 700;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); 
    box-shadow: 
        0 0 15px rgba(0, 230, 230, 0.4), 
        0 0 5px rgba(0, 230, 230, 0.6) inset; 
    border: 2px solid #00e6e6; 
    position: relative;
    overflow: hidden; 
}
.live-button:not(.toggle-button) {
    padding: 1rem 2.5rem;
    font-size: 1.2rem;
}
.live-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1); 
    transform: skewX(-30deg);
    transition: all 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.live-button:not(.toggle-button):hover {
    transform: translateY(-5px) scale(1.05);
}
.live-button:hover::before {
    left: 100%; 
}

/* ------------------------------------------------------------------------- */
/* --- LAYOUT PRINCIPAL : CONTENEUR UNIQUE DE LA VIDÉO --- */
/* ------------------------------------------------------------------------- */
.main-container {
    width: 100%;
    max-width: 1600px;
    margin-inline: auto;
    background-color: var(--bg-medium);
    border-radius: 12px;
    border: 1px solid var(--neon-blue-dark);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.3), 0 0 10px rgba(0, 255, 255, 0.15);
    overflow: hidden; 
    position: relative;
}

/* --- LECTEUR VIDÉO --- */
#videoPlayer {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #000;
    flex-shrink: 0;
}
/* ... (Reste des styles de la vidéo/placeholder inchangés) ... */
#video, #iframePlayer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: none;
    object-fit: cover;
}
#video.player-active, #iframePlayer.player-active {
    display: block;
}
#videoPlaceholder {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 2;
    transition: opacity 0.3s ease-in-out;
}
#videoPlaceholder.hidden { opacity: 0; pointer-events: none; }
#videoPlaceholder img { width: 100%; height: 100%; object-fit: cover; }
.play-overlay {
    position: absolute;
    color: var(--neon-blue-light);
    text-shadow: 0 0 5px var(--neon-blue);
    font-size: 1.5rem;
    font-weight: bold;
    pointer-events: none;
}


/* ------------------------------------------------------------------------- */
/* --- LISTE DES CHAÎNES (CONSERVE TON DESIGN NÉON) --- */
#channelListContainer {
    position: fixed; 
    top: 0;
    width: var(--sidebar-width);
    height: 100%;
    z-index: 1000; 
    
    background-color: var(--bg-medium); 
    border-left: 1px solid var(--neon-blue); 
    box-shadow: -5px 0 20px rgba(0, 255, 255, 0.2);
    
    display: flex;
    flex-direction: column;
    padding: 15px 0 0 0;
    overflow-y: hidden;
    
    /* Transition fluide pour le mouvement */
    transition: transform 0.3s ease-in-out, left 0.1s, right 0.1s;
    visibility: hidden;
}

/* Positionnement à GAUCHE (Conducteur) */
#channelListContainer.left-side {
    left: calc(var(--sidebar-width) * -1);
    right: auto;
    visibility: visible;
    border-right: 1px solid var(--neon-blue);
    border-left: none;
}

/* Positionnement à DROITE (Passager) */
#channelListContainer.right-side {
    right: calc(var(--sidebar-width) * -1);
    left: auto;
    visibility: visible;
    border-left: 1px solid var(--neon-blue);
    border-right: none;
}

/* Animation d'entrée */
#channelListContainer.left-side.visible {
    transform: translateX(100%);
}

#channelListContainer.right-side.visible {
    transform: translateX(-100%);
}

/* En-tête de la sidebar avec le bouton de fermeture */
.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px 15px 15px;
    border-bottom: 2px solid var(--neon-blue);
    margin-bottom: 10px;
    flex-shrink: 0;
}

.sidebar-header h2 {
    color: var(--neon-blue-light);
    font-size: 1.4rem;
}

.close-sidebar-btn {
    background: none;
    border: none;
    color: var(--neon-blue-light);
    font-size: 1.5rem;
    cursor: pointer;
    transition: color 0.2s;
}
.close-sidebar-btn:hover {
    color: var(--neon-blue);
}

/* --- Styles des contrôles dans la sidebar --- */
#currentTime, .category-filter, #recordControls {
    padding: 10px 15px; 
    border-bottom: 1px solid var(--neon-blue-dark);
    background-color: var(--bg-dark);
    flex-shrink: 0; 
    margin-top: 0;
}
#currentTime { 
    color: var(--neon-blue-light); 
    font-size: 1.2rem; 
    /* AJOUTÉ : Supprime tout soulignement sur l'heure */
    text-decoration: none;
    /* AJOUTÉ : Centre l'heure horizontalement */
    text-align: center; 
}

#category-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--neon-blue-dark);
    border-radius: 6px;
    background-color: var(--bg-light);
    color: var(--text-color);
    cursor: pointer;
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%2388FFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 20px;
    outline: none;
}
#category-select:hover {
    border-color: var(--neon-blue);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.4);
}

/* --- LA GRILLE DE CHAÎNES QUI DÉFILE --- */
#channelList {
    flex-grow: 1;
    overflow-y: auto; 
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); 
    gap: 10px; 
    padding: 15px;
}

/* --- STYLE DES "CARTES" DE CHAÎNES DANS LA GRILLE --- */
.channel-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 10px 8px; 
    background-color: var(--bg-light);
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    text-align: center;
    min-height: 100px; 
}
.channel-item:hover {
    background-color: var(--bg-dark);
    transform: translateY(-3px);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.6);
    border-color: var(--neon-blue);
}
.channel-item.active {
    background-color: var(--neon-blue-dark);
    border-color: var(--neon-blue);
    box-shadow: 0 0 15px var(--neon-blue);
}
.channel-item.active .channel-name { color: var(--neon-blue-light); }
.channel-item.active img { border-color: var(--neon-blue-light); }
.channel-item.hidden { display: none; }

.channel-item img {
    width: 40px; 
    height: 40px;
    border-radius: 50%;
    object-fit: contain;
    background-color: rgba(0, 0, 0, 0.4);
    border: 2px solid var(--neon-blue-dark);
    flex-shrink: 0;
}
.channel-item .channel-name {
    font-weight: bold;
    color: var(--text-color);
    font-size: 0.85rem; 
}

/* --- Contrôles d'enregistrement --- */
#recordControls {
    display: flex; 
    align-items: center;
    justify-content: space-between; 
}
.record-btn {
    padding: 8px 15px;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.1s;
    background-color: var(--neon-blue-dark);
    color: var(--neon-blue-light);
}
.record-btn.is-recording {
    background-color: #f44336; 
}
.record-btn:hover {
    opacity: 0.9;
}
.status-indicator {
    font-size: 1.1em;
    color: #f44336; 
    font-weight: bold;
}


/* --- MODALES ET POPUPS (Inchangé) --- */
.modal {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 20px;
}
.modal-content {
    background-color: var(--bg-medium);
    padding: 30px;
    border-radius: 12px;
    border: 2px solid var(--neon-blue-light);
    box-shadow: 0 0 25px var(--neon-blue);
    text-align: center;
    position: relative;
    max-width: 500px;
    width: 100%;
}
.close-button {
    position: absolute;
    top: 15px;
    right: 18px;
    font-size: 28px;
    cursor: pointer;
    color: var(--neon-blue-light);
    transition: color 0.2s ease, transform 0.2s ease;
}
.close-button:hover { color: var(--neon-blue); transform: scale(1.1); }
#passwordInput {
    width: 100%;
    padding: 12px 15px;
    margin: 20px 0;
    border: 2px solid var(--neon-blue-dark);
    border-radius: 6px;
    background-color: var(--bg-dark);
    color: var(--neon-blue-light);
    font-size: 1.1rem;
    outline: none;
    transition: all 0.3s ease;
}
#passwordInput:focus { border-color: var(--neon-blue); box-shadow: 0 0 10px var(--neon-blue); }
#submitPassword {
    padding: 12px 25px;
    background-color: var(--neon-blue-dark);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: bold;
    transition: all 0.3s ease;
}
#submitPassword:hover { background-color: var(--neon-blue); box-shadow: 0 0 10px var(--neon-blue); }
.error-message { color: var(--error-red); margin-top: 10px; font-weight: bold; }

/* ------------------------------------------------------------------------- */
/* --- MEDIA QUERIES (ADAPTATION MOBILE) --- */
/* ------------------------------------------------------------------------- */
@media (max-width: 768px) { 
    
    /* Le header doit reprendre toute sa place */
    header {
        flex-direction: column;
        align-items: center;
    }
    
    /* Le bouton de bascule redevient fixe pour flotter sur l'interface */
    .toggle-button {
        position: fixed; 
        top: 20px;
        left: 20px;
        z-index: 900;
        transform: none; 
        /* Réduire encore un peu la taille sur mobile si besoin */
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
    }

    /* La navigation principale redevient verticale */
    .top-nav {
        flex-direction: column; 
        padding: 1rem;
        gap: 1rem;
        width: 100%;
    }
    .top-nav .live-button {
        width: 80%; 
        text-align: center;
    }

    /* La sidebar prend tout l'écran en hauteur/largeur sur mobile */
    #channelListContainer {
        width: 100%; 
        transform: translateX(100%); 
    }
    
    #channelList {
         grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
         gap: 8px;
    }
}

/* AJOUTEZ CECI dans style.css */
.channel-item:focus-visible, 
.live-button:focus-visible,
#category-select:focus-visible {
    outline: 2px solid var(--neon-blue-light);
    outline-offset: 3px;
    box-shadow: 0 0 10px var(--neon-blue);
}

/* AJOUTEZ CECI dans style.css */
.main-container.playing {
    /* Augmente la lueur lorsque le contenu est actif */
    box-shadow: 0 0 35px rgba(0, 255, 255, 0.6), 0 0 15px rgba(0, 255, 255, 0.45); 
}

/* VÉRIFIEZ ET AJOUTEZ CECI */
#video, #iframePlayer {
    /* ... vos styles existants ... */
    opacity: 0; /* Commence invisible */
    transition: opacity 0.5s ease-in-out; /* Transition de 0.5 seconde */
}
#video.player-active, #iframePlayer.player-active {
    display: block;
    opacity: 1; /* Devient visible */
}

.guide-btn {
    background-color: #1e92eb; /* Bleu Tesla */
    color: white;
    padding: 8px 15px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    font-size: 1rem;
    transition: background 0.3s;
    display: flex;
    align-items: center;
    gap: 8px; /* Espace entre l'icône et le texte */
}

.guide-btn:hover {
    background-color: #00bcd4; /* Cyan au survol */
    color: #000;
}

/* --- AIDE & MODAL --- */
.help-trigger {
    position: fixed; bottom: 20px; right: 20px;
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--primary); color: white; border: none;
    font-weight: 800; font-size: 20px; cursor: pointer;
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 1000;
}
.help-trigger:hover { transform: scale(1.1) rotate(10deg); }

.modal {
    position: fixed; inset: 0; background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(8px); display: flex;
    align-items: center; justify-content: center; z-index: 2000;
}
.modal-content {
    background: white; padding: 40px; border-radius: 28px;
    max-width: 500px; width: 90%; position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.close-modal {
    position: absolute; top: 20px; right: 25px;
    font-size: 28px; cursor: pointer; color: var(--text-sub);
}

.help-grid { display: flex; flex-direction: column; gap: 20px; margin-top: 25px; }
.help-item h4 { margin: 0 0 6px 0; color: var(--primary); font-size: 16px; }
.help-item p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-sub); }

Pour rendre votre modal (popup) lisible et élégant, voici un code CSS moderne qui utilise des arrondis, des ombres portées et une structure en grille (grid) pour bien organiser les icônes et le texte.

Vous pouvez copier ce bloc dans votre balise <style> ou dans votre fichier style.css :

CSS

/* --- Style du Modal (Fond noir transparent) --- */
.modal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Fond sombre pour faire ressortir le modal */
    backdrop-filter: blur(5px); /* Flou d'arrière-plan moderne */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Conteneur Blanc du Modal --- */
.modal-content {
    background-color: #ffffff;
    color: #333;
    padding: 30px;
    border-radius: 20px;
    width: 90%;
    max-width: 600px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Titre --- */
.modal-content h2 {
    text-align: center;
    color: #1e92eb;
    margin-bottom: 25px;
    font-size: 1.5rem;
}

/* --- Grille d'aide (2 colonnes) --- */
.help-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.help-item {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 12px;
    border-left: 4px solid #1e92eb;
}

.help-item h4 {
    margin-top: 0;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

.help-item p {
    font-size: 0.9rem;
    line-height: 1.4;
    color: #666;
    margin-bottom: 0;
}

/* --- Bouton Fermer (X) --- */
.close-modal, .close-button {
    position: absolute;
    right: 20px;
    top: 15px;
    font-size: 28px;
    font-weight: bold;
    color: #bbb;
    cursor: pointer;
    transition: 0.3s;
}

.close-modal:hover {
    color: #e51553;
}

/* --- Bouton "J'ai compris" --- */
.btn-primary {
    display: block;
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #1e92eb, #1565c0);
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
    font-size: 1rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(30, 146, 235, 0.4);
}
#videoPlaceholder {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: black;
}

#introVideo, #finalImage {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Pour bien remplir le player sans bandes noires */
}

.hidden {
    display: none;
}




.swipe-container {
  display: flex;
  justify-content: space-between; /* Écarte à gauche et à droite */
  align-items: center;            /* Centre verticalement les éléments */
  
  position: absolute;             /* Souvent utilisé pour mettre par-dessus un slider */
  top: 50%;                       /* Place le haut du conteneur au milieu */
  transform: translateY(-50%);    /* Ajuste pour un centrage parfait */
  
  width: 100%;                    /* Prend toute la largeur */
  pointer-events: none;           /* Permet de cliquer à travers le conteneur si besoin */
  z-index: 10;                    /* Passe au-dessus du reste */
}

.swipe-indicator {
  pointer-events: auto;
  margin: 0 30px;
  display: flex;
  align-items: center;
  transition: all 0.5s ease; /* Transition plus douce */
  cursor: pointer;
  background: none;
  border: none;
  /* Opacité globale très faible au repos */
  opacity: 0.3; 
}

.swipe-indicator:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

/* On garde l'effet de zoom au survol mais plus discret 
swipe-indicator:hover {
  transform: scale(1.2);
  filter: drop-shadow(0 0 5px rgba(255,255,255,0.5));
}*/

.arrow-wrapper {
  display: flex;
  align-items: center;
  gap: 5px; /* Espace réduit entre le trait et la flèche */
}

.line {
  width: 25px;
  height: 2px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.8));
  border-radius: 2px;
}

.arrow {
  width: 10px;
  height: 10px;
  border-top: 2px solid rgba(255,255,255,0.8);
  border-right: 2px solid rgba(255,255,255,0.8);
  display: inline-block;
}

/* Flèche GAUCHE pointant vers la DROITE */
.left .line { background: linear-gradient(to right, transparent, white); }
.left .arrow { transform: rotate(45deg); }

/* Flèche DROITE pointant vers la GAUCHE */
.right .line { background: linear-gradient(to left, transparent, white); }
.right .arrow { transform: rotate(-135deg); }

/* Animation de respiration */
@keyframes pulse {
  0% { opacity: 0.3; transform: translateX(0); }
  50% { opacity: 0.6; transform: translateX(5px); }
  100% { opacity: 0.3; transform: translateX(0); }
}

.right .arrow-wrapper {
  animation: pulse 2s infinite ease-in-out;
}

@keyframes pulse-left {
  0% { opacity: 0.3; transform: translateX(0); }
  50% { opacity: 0.6; transform: translateX(-5px); }
  100% { opacity: 0.3; transform: translateX(0); }
}

.left .arrow-wrapper {
  animation: pulse-left 2s infinite ease-in-out;
}

.contact-github {
    position: sticky;
    bottom: 0;
    background: #111; /* ou la couleur de votre menu */
    padding: 10px;
    z-index: 10;
}
#currentTime {
    cursor: pointer; /* Change le curseur en main au survol */
    transition: 0.3s;
}
#currentTime:hover {
    text-shadow: 0 0 10px #00FFFF; /* Petit effet brillant au survol */
}