/* ============================================================ 1. RESET GLOBAL (S'applique aux deux thèmes) ============================================================ */ * { box-sizing: border-box; } img, video { max-width: 100%; height: auto; } /* ============================================================ 2. THÈME TOM PEARL (Style Rose / Index.php) S'applique par défaut OU quand la classe .theme-tompearl est là ============================================================ */ body:not(.theme-scatube), .theme-tompearl { background-color: black; text-align: center; margin: 0; padding: 0; color: white; font-family: Arial, sans-serif; } /* Fix centrage image de tête */ body:not(.theme-scatube) img, .theme-tompearl img { margin: 0 auto; display: block; } /* Ta boîte rose */ #carte { max-width: 800px; width: 90%; margin: 0 auto; background-color: #D823A3; padding: 20px; } /* Tes titres */ h1 { color: #87CEEB; } h2 { color: yellow; } /* Effet de zoom et bordure sur le GIF au survol */ a img { transition: transform 0.2s ease-in-out, border-color 0.2s; border: 3px solid transparent; border-radius: 8px; display: inline-block; } a:hover img { transform: scale(1.1); /* L'image grossit */ border-color: #ffff00; /* Bordure jaune */ box-shadow: 0 0 20px #ffff00; /* Effet néon jaune */ } /* Amélioration de la lisibilité du texte sur fond rose */ p { text-shadow: 2px 2px 0px #000; /* Ombre noire derrière les lettres */ } /* Animation de clignotement pour l'instruction */ .blink-text { font-weight: bold; color: #ffff00; animation: blinker 1.5s linear infinite; text-shadow: 2px 2px 0px #000; } @keyframes blinker { 50% { opacity: 0; } } /* Bouton Play et Formulaires */ .play-button { background-color: #000; color: #ffcc00; border: 3px solid #ffcc00; padding: 15px 30px; border-radius: 10px; cursor: pointer; font-family: 'Arial Black'; } #feedback-list { background: rgba(0, 0, 0, 0.7); border: 2px solid #5d3a1a; max-height: 350px; overflow-y: auto; } /* Scrollbar Tom Pearl */ #feedback-list::-webkit-scrollbar { width: 10px; } #feedback-list::-webkit-scrollbar-track { background: #1a1005; } #feedback-list::-webkit-scrollbar-thumb { background: #ffcc00; border-radius: 5px; } /* ============================================================ 3. THÈME SCATUBE (Style YouTube / Noir) S'active UNIQUEMENT avec ============================================================ */ /* ============================================================ FIX SPÉCIFIQUE POUR PAGE1.HTML (ScaTube) ============================================================ */ /* ============================================================ SCATUBE - FIX FINAL POUR PAGE1.HTML ============================================================ */ .theme-scatube { background-color: #0f0f0f !important; color: white !important; margin: 0; padding: 0; text-align: left !important; /* Force l'alignement YouTube partout */ } /* On s'assure que le container prend toute la largeur */ .theme-scatube .scatube-container { display: grid; grid-template-columns: 1fr 400px; /* Colonne vidéo | Colonne Up Next */ gap: 24px; max-width: 1700px; margin: 0 auto; padding: 20px; } /* Force la vidéo à ne pas dépasser et à rester propre */ .theme-scatube #mainPlayer { width: 100% !important; max-height: 75vh; background: black; border-radius: 12px; } /* Aligne les titres et les stats à gauche */ .theme-scatube h2, .theme-scatube .video-stats, .theme-scatube .comments-section { text-align: left !important; } /* FIX DES COMMENTAIRES : Pour qu'ils ne soient pas invisibles */ .theme-scatube #commentsList div { text-align: left !important; } .theme-scatube #commentsList p { color: #f1f1f1 !important; /* Texte des commentaires en blanc/gris clair */ margin: 4px 0 !important; } .theme-scatube #commentsList strong { color: #3ea6ff !important; /* Noms d'utilisateurs en bleu YouTube */ } /* Responsive pour Mobile */ @media (max-width: 1000px) { .theme-scatube .scatube-container { grid-template-columns: 1fr; /* Une seule colonne sur mobile */ } .theme-scatube .video-sidebar { display: none; /* Cache les suggestions sur petit écran pour gagner de la place */ } }