/* Styles globaux */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Styles CSS Génériques pour les Modales */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex; /* Pour centrer le .modal-content */
    align-items: center;
    justify-content: center;
    z-index: 2100; /* z-index de base pour les modales, peut être surchargé */
    /* Par défaut, une modale est visible si elle n'a pas .modal-hidden */
    /* La transition d'opacité peut être ajoutée ici si souhaité */
    /* opacity: 1; visibility: visible; transition: opacity 0.3s, visibility 0.3s; */
}

.modal-hidden {
    display: none !important; /* Règle cruciale pour cacher les modales */
    /* opacity: 0 !important; visibility: hidden !important; */ /* Alternative pour transitions */
}

/* Styles pour l'overlay de modale (si utilisé individuellement par modale) */
.modal-overlay {
    position: absolute; /* Changé de fixed à absolute pour être relatif au .modal parent */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.65); /* Fond semi-transparent un peu plus sombre */
    z-index: -1; /* Pour être derrière le .modal-content mais dans le .modal */
    /* backdrop-filter: blur(2px); /* Optionnel */
}

.modal-content {
    position: relative; /* Pour que l'overlay interne reste contenu s'il est un enfant direct */
    background: var(--neutral-color-medium, #333);
    border: var(--border-base, 1px solid #555);
    border-radius: var(--border-radius-large, 8px);
    box-shadow: 0 5px 25px rgba(0,0,0,0.4);
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Pour que le border-radius s'applique bien aux enfants */
    max-width: 90vw; /* Limite la largeur */
    max-height: 90vh; /* Limite la hauteur */
    animation: modalEnterSimple 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

@keyframes modalEnterSimple {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

body {
    font-family: 'Poppins', sans-serif; /* Police Poppins par défaut */
    background-color: var(--neutral-color-dark); /* Couleur de fond du skin neutre */
    color: var(--neutral-color-light); /* Couleur de texte du skin neutre */
    overflow: hidden; /* Empêche les barres de défilement */
}

/* Bouton retour à l'accueil */
.back-to-home {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 10001;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    width: auto;
    min-width: 50px;
    height: 50px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
    font-size: 1.1rem;
    font-weight: bold;
    padding: 0 15px;
    gap: 8px;
}

.back-to-home:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.back-to-home-text {
    font-weight: 600;
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .back-to-home-text {
        display: none;
    }
    .back-to-home {
        width: 50px;
        border-radius: 50%;
        padding: 0;
    }
}

/* Modale d'introduction StreamOS */
.intro-modal-wrapper {
    z-index: 20000;
    background: rgba(0, 0, 0, 0.95);
}

.intro-modal-content {
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    background: linear-gradient(135deg, var(--neutral-color-light), #f8f9fa);
    border: 2px solid #667eea;
    box-shadow: 0 20px 60px rgba(102, 126, 234, 0.3);
}

.intro-modal-content .modal-header {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    text-align: center;
    padding: 20px;
    border-radius: 15px 15px 0 0;
}

.intro-modal-content .modal-header h2 {
    margin: 0 0 5px 0;
    font-size: 1.8em;
    font-weight: bold;
}

.intro-modal-version {
    font-size: 0.9em;
    opacity: 0.9;
    font-weight: 300;
}

.intro-modal-body {
    padding: 25px;
    color: var(--neutral-color-dark);
    line-height: 1.6;
}

.intro-section {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.2);
}

.intro-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.intro-section h3 {
    color: #667eea;
    margin-bottom: 15px;
    font-size: 1.3em;
    font-weight: 600;
}

.intro-section p {
    margin-bottom: 10px;
}

.intro-section ul {
    margin-left: 20px;
    margin-bottom: 15px;
}

.intro-section li {
    margin-bottom: 8px;
    list-style-type: none;
    position: relative;
    padding-left: 5px;
}

.intro-warning {
    background: rgba(255, 193, 7, 0.1);
    border-left: 4px solid #ffc107;
    padding: 15px;
    border-radius: 5px;
    font-weight: 500;
}

.intro-steps {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 15px;
}

.intro-step {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 15px;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 10px;
    border-left: 4px solid #667eea;
}

.step-number {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
    font-size: 0.9em;
}

.step-content {
    flex: 1;
}

.step-content strong {
    color: #667eea;
    display: block;
    margin-bottom: 5px;
}

.intro-modal-footer {
    padding: 20px 25px;
    background: rgba(102, 126, 234, 0.05);
    display: flex;
    justify-content: space-between;
    gap: 15px;
    border-radius: 0 0 15px 15px;
}

.intro-btn {
    padding: 12px 25px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 600;
    font-size: 1em;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 200px;
    justify-content: center;
}

.intro-btn-primary {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.intro-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.intro-btn-secondary {
    background: transparent;
    color: #666;
    border: 2px solid #ddd;
}

.intro-btn-secondary:hover {
    background: #f8f9fa;
    border-color: #667eea;
    color: #667eea;
}

/* Responsive pour la modale d'intro */
@media (max-width: 768px) {
    .intro-modal-content {
        max-width: 95%;
        max-height: 95vh;
        margin: 2.5vh auto;
    }
    
    .intro-modal-body {
        padding: 20px;
    }
    
    .intro-modal-footer {
        flex-direction: column;
        gap: 10px;
    }
    
    .intro-btn {
        min-width: auto;
        width: 100%;
    }
    
    .intro-steps {
        gap: 10px;
    }
    
    .intro-step {
        padding: 12px;
    }
}

/* Styles de l'introduction */
#intro-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* Arrière-plan animé - Palette ajustée et animation plus lente */
    background: linear-gradient(-45deg, #0a031a, #1c1642, #24243e, #111118);
    background-size: 400% 400%;
    animation: gradientBG 25s ease infinite; /* Animation plus lente */
    z-index: 1000; /* Au-dessus de tout */
}

/* Couche pour le wallpaper personnalisé */
#custom-wallpaper-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1; /* Au-dessus des ::before/::after du body, mais sous le contenu principal */
    background-size: cover; /* Par défaut, sera modifié par JS */
    background-position: center center;
    background-repeat: no-repeat;
    pointer-events: none; /* Ne pas interférer avec les clics */
    opacity: 0.6; /* MODIFIÉ: Opacité réduite pour mieux voir à travers */
}

.intro-content {
    /* Styles pour le conteneur du contenu si nécessaire */
}

.intro-content * { /* Appliquer aussi spécifiquement aux enfants de l'intro */
    font-family: 'Poppins', sans-serif;
}

#intro-logo {
    display: block;
    margin: 0 auto 30px auto; /* Plus de marge en bas */
    max-width: 480px; /* Augmenté de 350px à 480px */
    filter: drop-shadow(0 0 15px #0f0) drop-shadow(0 0 30px #0f0);
    animation: pulse-neon 2s infinite alternate;
}

#intro-title {
    font-size: 6em; /* Encore plus grand */
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(90deg, #ffffff, #c0d0ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 15px rgba(200, 220, 255, 0.4), 0 0 5px rgba(255, 255, 255, 0.5); /* Ombre plus prononcée */
    margin-bottom: 20px; /* Marge ajustée */
    animation: fade-in 1.5s ease-out; /* Animation légèrement plus longue */
}

#intro-animated-name {
    font-size: 2.2em;
    font-weight: 400;
    color: #90ffff; /* Couleur cyan clair pour contraster */
    text-shadow: 0 0 8px rgba(144, 255, 255, 0.7); /* Léger halo cyan */
    margin-bottom: 30px; /* Marge ajustée */
    opacity: 0;
    /* Animation différente - exemple : zoom léger en arrivant */
    animation: scale-fade-in 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.8s forwards;
}

#intro-subtitle,
#intro-credits {
    font-size: 0.9em; /* Plus petit */
    font-weight: 300;
    color: rgba(240, 240, 240, 0.7); /* Moins opaque */
    opacity: 0;
    animation: fade-in 1.2s ease-out 2s forwards; /* Arrive plus tard */
}

#intro-credits {
    font-size: 0.8em; /* Encore plus petit */
    animation-delay: 2.2s; /* Léger décalage */
}

/* Keyframes pour les animations */
@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Ancienne animation pour le nom */
/* @keyframes slide-fade-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
} */

/* Nouvelle animation pour le nom */
@keyframes scale-fade-in {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse-neon {
    from { filter: drop-shadow(0 0 15px #0f0) drop-shadow(0 0 30px #0f0); }
    to { filter: drop-shadow(0 0 20px #3f3) drop-shadow(0 0 40px #3f3); }
}

/* Styles pour la transition (overlay) */
#transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--neutral-color-dark); /* Même couleur que le fond body */
    transform: scale(0); /* Commence invisible/rétréci */
    border-radius: 50%;
    z-index: 999; /* Juste en dessous de l'intro */
    /* La transition sera gérée par JS */
}

/* Styles pour l'interface principale (juste pour cacher au début) */
#main-interface {
    /* display: none; est mis inline pour l'instant */
    position: relative; /* Nécessaire pour le contexte de stacking */
    z-index: 1;       /* Pour être au-dessus du wallpaper et des effets de fond de thème */
}

/* Ajout Keyframes pour le fond */
@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Styles pour le Menu Burger - ADAPTÉ POUR LES THÈMES */
#burger-menu-panel {
    /* Style de base du panneau - Utilise les variables du thème */
    background-color: var(--secondary-background, #1a1a1a); /* Fond secondaire du thème */
    border-left: 1px solid var(--border-color, var(--neutral-color-grey)); /* Bordure du thème */
    box-shadow: -5px 0 15px rgba(0,0,0,0.3); /* Ombre gardée pour l'instant, pourrait devenir variable */
    position: fixed;
    top: 0;
    right: 0;
    width: 100vw; /* Pleine largeur pour le mode plein écran */
    height: 100vh;
    padding: 20px;
    z-index: 1100;
    transform: translateX(100%); /* Caché par défaut */
    transition: transform 0.4s cubic-bezier(0.7, 0, 0.3, 1);
    overflow-y: auto;
}

#burger-menu-panel.burger-panel-visible {
    transform: translateX(0); /* Visible */
}

#burger-menu-panel.burger-panel-fullscreen {
    /* Style du panneau plein écran - Utilise les variables du thème */
    background: var(--primary-background, rgba(20,20,30,0.98)); /* Fond principal du thème (peut être semi-transparent) */
    box-shadow: 0 8px 48px 0 rgba(0,0,0,0.25); /* Ombre gardée */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90vw;
    height: 90vh;
    border-radius: 24px;
    /* Passage à CSS Grid */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px; /* Espacement entre les cartes */
    align-content: flex-start; /* Aligne les lignes de la grille en haut */
    padding: 20px;
    z-index: 2000;
    overflow-y: auto; 
    /* scrollbar-width: thin; */ /* Ces styles de scrollbar peuvent être réactivés si besoin */
}

@media (max-width: 900px) {
    #burger-menu-panel.burger-panel-fullscreen {
        /* grid-template-columns: 1fr; Commenté car on est en flex */
        padding: 10px; /* Padding réduit pour mobile */
        gap: 15px; /* Si on revient à grid, sinon marges sur les items */
        justify-content: center; /* Centrer les items sur mobile si flex */
    }
}

#burger-menu-panel.burger-panel-fullscreen::-webkit-scrollbar {
    width: 10px;
    background: #222;
    border-radius: 8px;
}

#burger-menu-panel.burger-panel-fullscreen::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 8px;
    border: 2px solid #222;
}

#burger-menu-panel.burger-panel-fullscreen::-webkit-scrollbar-thumb:hover {
    background: #666;
}

#burger-menu-panel.burger-panel-hidden {
    display: none !important;
}

#burger-menu-panel h2, 
#burger-menu-panel h3 {
    /* Style titres - Utilise les variables du thème */
    color: var(--accent-color, var(--neutral-color-light)); /* Couleur d'accentuation du thème */
    font-family: var(--font-display, 'Poppins', sans-serif); /* Police display du thème */
    border-bottom: 1px solid var(--border-color, var(--neutral-color-grey)); /* Bordure du thème */
    padding-bottom: 5px;
}

#burger-menu-panel.burger-panel-fullscreen h2,
#burger-menu-panel.burger-panel-fullscreen h2:hover,
#burger-menu-panel.burger-panel-fullscreen h2:focus,
#burger-menu-panel.burger-panel-fullscreen h2:active {
    border: none !important;
    border-bottom: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: none !important;
    color: var(--text-color, #fff) !important; /* Couleur texte principale du thème */
    font-family: var(--font-display, 'Poppins', sans-serif); /* Police display du thème */
    text-decoration: none !important;
    cursor: default;
}

#burger-menu-panel .menu-category {
    /* Style des cartes de catégorie - Utilise les variables du thème */
    background: var(--widget-background, rgba(40,40,60,0.95)); /* Fond des widgets du thème */
    border-radius: var(--border-radius-large, 18px); /* Utilise l'arrondi large du thème */
    box-shadow: 0 2px 12px rgba(0,0,0,0.12); /* Ombre gardée */
    padding: 20px 24px 15px 24px; /* Cohérence avec ci-dessus */
    min-width: 280px; /* Peut être redondant avec minmax, mais ne gêne pas forcément */
    /* max-width: 340px; */ /* Commenté pour l'instant */
    /* flex: 1 1 300px; */ /* Supprimé car géré par Grid */
    /* margin-bottom: 0; */ /* Supprimé, gap de la grille gère l'espacement */
    display: flex; /* Garder flex pour l'alignement interne du contenu de la carte */
    flex-direction: column; /* Organiser le contenu en colonne */
    align-items: flex-start;
    gap: 10px; /* Espacement interne */
}

#burger-menu-panel .menu-category h3 {
    /* Style titres de catégorie - Utilise les variables du thème */
    color: var(--accent-color-secondary, var(--text-color)); /* Couleur accent secondaire ou texte */
    font-family: var(--font-display, 'Poppins', sans-serif);
    border-bottom: 1px solid var(--border-color, var(--neutral-color-grey));
    padding-bottom: 8px; /* Padding sous le titre réduit */
    margin: 0; /* Retirer la marge par défaut du h3 */
    font-size: 1.2em; /* Taille ajustée */
    width: 100%; /* S'assurer que la bordure prend toute la largeur */
}

#widget-visibility-list li {
    list-style: none;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

#widget-visibility-list label {
    margin-left: 10px;
    cursor: pointer;
}

#close-burger-menu {
    margin-top: 20px;
    padding: 8px 15px;
    background-color: var(--widget-titlebar-background, var(--neutral-color-dark));
    color: var(--widget-text-color, var(--neutral-color-light));
    border: var(--border-base, 1px solid var(--neutral-color-grey));
    border-radius: var(--border-radius-base, 4px);
    cursor: pointer;
}

#close-burger-menu:hover {
    background-color: var(--neutral-color-medium);
}

/* Style pour les boutons dans le menu burger - Utilise les variables de boutons du thème */
#burger-menu-panel button,
#burger-menu-panel .menu-category button /* Être plus spécifique si nécessaire */
{
    background-color: var(--button-background, var(--widget-titlebar-background));
    color: var(--button-text-color, var(--widget-text-color));
    border: var(--button-border-width, 1px) solid var(--button-border-color, var(--border-color));
    border-radius: var(--button-border-radius, var(--border-radius-base));
    font-family: var(--button-font, inherit); /* Utilise la police bouton du thème ou hérite */
    padding: var(--button-padding, 10px 18px); /* Utilise le padding bouton du thème ou fallback */
    /* ... autres styles ... */
}

#burger-menu-panel button:hover,
#burger-menu-panel .menu-category button:hover {
    background-color: var(--button-hover-background, var(--neutral-color-medium));
    color: var(--button-hover-text-color, var(--button-text-color));
    border-color: var(--button-hover-border-color, var(--button-border-color)); /* Optionnel: changement couleur bordure au survol */
}

/* Style pour les inputs et textarea dans le menu burger - Utilise les variables input du thème */
#burger-menu-panel input[type="text"],
#burger-menu-panel input[type="number"],
#burger-menu-panel input[type="checkbox"],
#burger-menu-panel input[type="password"],
#burger-menu-panel textarea,
#burger-menu-panel select {
    background-color: var(--input-background, var(--neutral-color-light));
    color: var(--input-text-color, var(--neutral-color-dark));
    border: 1px solid var(--input-border-color, var(--border-color));
    border-radius: var(--input-border-radius, var(--border-radius-base));
    padding: var(--input-padding, 8px 10px);
    font-family: var(--input-font, inherit);
}

#burger-menu-panel input[type="text"]::placeholder,
#burger-menu-panel textarea::placeholder {
    color: var(--input-placeholder-color, var(--text-color-secondary)); /* Variable spécifique ou fallback */
    opacity: 0.7;
}

#burger-menu-panel input[type="text"]:focus,
#burger-menu-panel input[type="number"]:focus,
#burger-menu-panel input[type="password"]:focus,
#burger-menu-panel textarea:focus,
#burger-menu-panel select:focus {
    border-color: var(--input-focus-border-color, var(--accent-color));
    box-shadow: 0 0 3px var(--input-focus-border-color, var(--accent-color));
    outline: none;
}

#burger-menu-panel input[type="checkbox"] {
    /* Style spécifique pour les checkboxes si besoin */
    accent-color: var(--accent-color); /* Couleur moderne pour la coche */
}

/* Styles pour la liste des widgets */
#widget-visibility-list label {
    color: var(--text-color, #f0f0f0);
}

/* Style du bouton Fermer (peut aussi utiliser les variables bouton) */
#close-burger-menu {
    /* ... peut hériter du style bouton générique ou avoir des styles spécifiques ... */
    /* Exemple: utiliser une couleur d'accent secondaire pour fermer */
    /* background-color: var(--accent-color-secondary, #dc3545); */ 
    /* border-color: var(--accent-color-secondary, #dc3545); */
    /* color: var(--neutral-color-light, #fff); */
}

#close-burger-menu:hover {
    /* ... style de survol ... */
}

/* === FIN Adaptation Thème Menu Burger === */

/* Style pour les boutons dans le menu burger */
#burger-menu-panel button#connect-tmi-button {
    font-weight: 600;
}

/* Surcharge pour le bouton fermer si besoin */
#close-burger-menu {
    margin-top: 20px;
    /* background-color: red; /* Exemple */
}

/* Styles pour la modale musique */
#music-modal.modal-hidden {
    display: none;
}

#music-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2200 !important;
}

#music-modal-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
}

#music-modal-content {
    width: 80vw; /* Largeur par défaut, limitée par max-width de .modal-content */
    height: 80vh; /* Hauteur par défaut, limitée par max-height de .modal-content */
    display: flex;
    flex-direction: column;
    background: var(--neutral-color-medium);
    border: var(--border-base);
    border-radius: var(--border-radius-large); /* Utiliser le radius du thème */
    overflow: hidden;
    animation: none; /* Remplacé par l'animation de .modal-content */
}

@keyframes modalEnter {
    from { opacity: 0; transform: translate(-50%, -55%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: var(--widget-titlebar-background);
    border-bottom: var(--border-base);
    color: var(--widget-text-color);
}

.modal-header h2 {
    margin: 0;
    font-size: 1.5em;
    flex-grow: 1; /* Permet au titre de prendre l'espace disponible */
}

/* Styles pour le conteneur des boutons dans .modal-header */
.modal-header > div {
    display: flex;
    align-items: center;
    gap: 8px; /* Espace entre les boutons */
}

/* Styles unifiés pour les boutons dans l'en-tête des modales */
.modal-header > div > button {
    background-color: transparent;
    border: none;
    color: var(--modal-header-icon-color, var(--neutral-color-light, #f0f0f0)); /* Couleur de l'icône/texte */
    font-size: 1.2rem; /* Taille pour les icônes/croix */
    padding: 5px;
    cursor: pointer;
    line-height: 1; /* Pour un alignement vertical correct */
    transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.modal-header > div > button:hover {
    color: var(--modal-header-icon-hover-color, var(--accent-color-primary, #007bff)); /* Couleur au survol */
    transform: scale(1.1);
}

/* Forcer la police FontAwesome pour les icônes spécifiques */
.modal-header .modal-set-bg-btn i.fas.fa-image,
.modal-header .modal-remove-bg-btn i.fas.fa-trash-alt {
    font-family: "Font Awesome 6 Free", "FontAwesome", sans-serif !important;
    font-weight: 900 !important; /* Les icônes solides (fas) utilisent souvent ce poids */
    font-style: normal !important;
}

/* Style spécifique pour le bouton de fermeture (X) s'il est textuel */
.modal-header .modal-close-btn {
    font-weight: bold;
    font-size: 1.5rem; /* Peut nécessiter une taille légèrement différente */
}

#close-music-modal { /* Exemple d'ID spécifique si encore utilisé et non remplacé par classe */
    background: none;
    border: none;
    color: var(--widget-text-color);
    font-size: 1.5em;
    cursor: pointer;
}

.modal-body {
    padding: 15px;
    background: var(--neutral-color-medium);
    flex-grow: 1;
    overflow-y: auto;
}

/* Amélioration de la mise en page de la modale musique */
#music-modal-content .modal-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#music-modal-content .modal-body input[type="file"] {
    width: 100%;
    padding: 8px;
    background: var(--neutral-color-light);
    border: var(--border-base);
    border-radius: var(--border-radius-base);
    cursor: pointer;
}

#music-list {
    flex-grow: 1;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    background: var(--neutral-color-dark);
    border: var(--border-base);
    border-radius: var(--border-radius-base);
}

#music-list li {
    padding: 8px 12px;
    border-bottom: 1px solid var(--neutral-color-grey);
    cursor: pointer;
    color: var(--neutral-color-light);
}

#music-list li:hover {
    background: var(--neutral-color-medium);
}

#music-player {
    width: 100%;
    border-radius: var(--border-radius-base);
    outline: none;
}

/* Styles pour les onglets de la modale musique */
#music-tabs {
    min-height: 30px; /* Pour voir la zone même vide */
    /* background-color: rgba(0,0,0,0.1); */ /* Fond de debug si besoin */
    margin-bottom: 15px; /* Espacement avant l'input/liste */
}

.music-tab {
    flex: none;
    padding: 8px 16px;
    text-align: center;
    background: var(--neutral-color-dark);
    border-radius: var(--border-radius-base) var(--border-radius-base) 0 0;
    color: var(--neutral-color-light);
    cursor: pointer;
    font-weight: 500;
    transition: background 0.2s ease;
}

.music-tab + .music-tab {
    margin-left: 4px;
}

.music-tab.active {
    background: var(--widget-titlebar-background);
    color: var(--widget-text-color);
}

.music-tab:not(.active):hover {
    background: var(--neutral-color-medium);
}

/* Styles pour les sous-onglets de catégories */
.category-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.category-tabs.hidden {
    display: none !important;
}

.category-tab {
    padding: 6px 12px;
    background: var(--neutral-color-dark);
    color: var(--neutral-color-light);
    border: var(--border-base);
    border-radius: var(--border-radius-base);
    cursor: pointer;
    font-size: 0.9em;
}

.category-tab.active {
    background: var(--neutral-color-medium);
    font-weight: bold;
}

.category-tab:not(.active):hover {
    background: var(--neutral-color-medium);
}

/* Styles pour la modale Wallpaper */
#wallpaper-modal.modal-hidden {
    display: none;
}

#wallpaper-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2200 !important;
}

#wallpaper-modal-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
}

#wallpaper-modal-content {
    width: 80vw; /* Largeur par défaut, limitée par max-width de .modal-content */
    height: 80vh; /* Hauteur par défaut, limitée par max-height de .modal-content */
    display: flex;
    flex-direction: column;
    background: var(--neutral-color-medium);
    border: var(--border-base);
    border-radius: var(--border-radius-large); /* Utiliser le radius du thème */
    overflow: hidden;
}

/* Réutilisation des classes génériques .modal-header et .modal-body */

#wallpaper-modal-content .modal-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#wallpaper-modal-content .modal-body input[type="file"] {
    width: 100%;
    padding: 8px;
    background: var(--neutral-color-light);
    border: var(--border-base);
    border-radius: var(--border-radius-base);
    cursor: pointer;
}

#wallpaper-list {
    display: grid;
    /* Grille avec colonnes plus larges pour des miniatures plus grandes */
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    padding: 10px;
    overflow-y: auto;
    margin: 0;
    background: var(--neutral-color-dark);
    border: var(--border-base);
    border-radius: var(--border-radius-base);
}

#wallpaper-list li {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    cursor: pointer;
    color: var(--neutral-color-light);
}

#wallpaper-list li:hover {
    background: var(--neutral-color-medium);
}

/* Miniatures en pleine largeur avec ratio 16/9 */
#wallpaper-list li img {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: var(--border-radius-base);
}

/* Styles pour la modale Clips de Bienvenue */
#welcome-modal.modal-hidden {
    display: none; /* Garder ceci si on ne veut pas d'animation de disparition pour celle-ci */
}

#welcome-modal {
    /* Hérite de .modal pour position, display flex, z-index etc. */
    /* On peut surcharger le z-index si nécessaire, mais essayons d'abord sans pour voir si 2100 suffit */
     z-index: 2101; /* Légèrement au-dessus des autres si besoin spécifique */
}

#welcome-modal-overlay {
    /* Devrait hériter de .modal-overlay si la structure HTML est correcte */
    /* Les styles ici sont ok et similaires à .modal-overlay, mais pourraient être redondants */
    /* Si #welcome-modal a un .modal-overlay enfant, pas besoin de le redéfinir ici */
}

#welcome-modal-content {
    /* La plupart des styles de .modal-content devraient s'appliquer. */
    /* On va surcharger uniquement ce qui est spécifique et nécessaire. */
    width: 70vw; /* Taille plus raisonnable */
    max-width: 800px; /* Limite maximale */
    min-height: 400px; /* Hauteur minimale pour le contenu */
    aspect-ratio: auto; /* Retirer l'aspect-ratio forcé */
    border-radius: var(--border-radius-large, 8px); /* Utiliser le radius standard */
    /* Les autres propriétés comme background, border, display:flex, flex-direction, overflow proviendront de .modal-content */
}

#welcome-modal-content .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: var(--widget-titlebar-background);
    border-bottom: var(--border-base);
    color: var(--widget-text-color);
}

#welcome-modal-content .modal-header h2 {
    margin: 0;
    font-size: 1.2em;
}

#welcome-modal-content .modal-body {
    padding: 15px;
    background: var(--neutral-color-medium);
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#twitch-channel-input,
#clip-folder-input {
    width: 100%;
    padding: 8px;
    background: var(--neutral-color-light);
    border: var(--border-base);
    border-radius: var(--border-radius-base);
    cursor: pointer;
}

/* Styles pour la modale Messages de Bienvenue */
#welcome-messages-modal.modal-hidden { display: none; }
#welcome-messages-modal {
    /* position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; */ /* Déjà dans .modal */
    /* z-index: 1200; */ /* Peut être hérité ou ajusté par .modal si nécessaire */
    /* Les propriétés ci-dessus sont héritées de la classe .modal si elle est appliquée */
    /* Assurons-nous que les propriétés de centrage de .modal s'appliquent */
    /* display: flex; align-items: center; justify-content: center; */ /* Devrait être sur la classe .modal */
}
#welcome-messages-modal-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    /* z-index: -1; doit être géré par rapport à .modal-content si .modal est flex */
}
#welcome-messages-modal-content {
    /* position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); */ /* Supprimé pour utiliser le flex du parent */
    /* width: 100vw; aspect-ratio: 16/9; max-height: 100vh; */ /* Supprimé pour des dimensions plus classiques de modale */
    
    /* Utiliser des dimensions plus typiques pour une modale de message */
    width: 500px; /* Ou un pourcentage comme 50vw */
    max-width: 90vw; /* S'assure qu'elle ne dépasse pas trop sur petits écrans */
    min-height: 200px; /* Hauteur minimale pour le contenu */
    /* max-height est déjà défini par .modal-content (90vh) */

    /* display: flex; flex-direction: column; */ /* Déjà dans .modal-content */
    /* background: var(--neutral-color-medium); */ /* Déjà dans .modal-content */
    /* border: var(--border-base); */ /* Déjà dans .modal-content */
    /* overflow: hidden; */ /* Déjà dans .modal-content */
    /* padding: 20px; */ /* Ajout d'un padding si pas déjà dans .modal-body */
    border-radius: var(--border-radius-large, 8px); /* Assurer la cohérence */
    box-shadow: 0 5px 25px rgba(0,0,0,0.4); /* Assurer la cohérence */
}
#welcome-messages-modal-content .modal-header,
#welcome-messages-modal-content .modal-body { /* réutilisable */ }

/* Styles pour la modale Sons de Bienvenue */
#welcome-sounds-modal.modal-hidden { display: none; }
#welcome-sounds-modal {
    /* position: fixed; top: 0; left: 0; */ /* Devrait être hérité de la classe .modal */
    /* width: 100vw; height: 100vh; z-index: 1200; */ /* Devrait être hérité de .modal */
}
#welcome-sounds-modal-overlay {
    position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.6);
}
#welcome-sounds-modal-content {
    /* Supprimer les anciennes règles de positionnement et de taille plein écran */
    /* position: fixed; top:50%; left:50%; transform: translate(-50%, -50%); */
    /* width: 100vw; aspect-ratio: 16/9; max-height: 100vh; */

    /* Appliquer des dimensions plus classiques, héritant du centrage flex de .modal */
    width: 600px; 
    max-width: 90vw;
    min-height: 300px;
    /* max-height vient de .modal-content */
    /* display: flex; flex-direction: column; vient de .modal-content */
    /* background: var(--neutral-color-medium); vient de .modal-content */
    /* border: var(--border-base); vient de .modal-content */
    /* overflow: hidden; vient de .modal-content */
    border-radius: var(--border-radius-large, 8px); /* Surcharge pour cohérence si .modal-content ne l'a pas */
    box-shadow: 0 5px 25px rgba(0,0,0,0.4); /* Surcharge pour cohérence si .modal-content ne l'a pas */
}

/* Styles pour les catégories dans le menu burger */
#burger-menu-panel .menu-category {
    min-width: 280px;
    max-width: 340px;
    flex: 1 1 320px;
    margin-bottom: 0;
}
#burger-menu-panel h2 {
    font-size: 2.2em;
    color: var(--widget-titlebar-background, #fff);
    margin-bottom: 30px;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    gap: 16px;
}
#burger-menu-panel .burger-close-btn {
    position: absolute;
    top: 24px;
    right: 36px;
    background: none !important;
    border: none !important;
    color: #fff;
    font-size: 2.2em;
    cursor: pointer;
    z-index: 2100;
    transition: color 0.2s;
    box-shadow: none !important;
    outline: none !important;
    pointer-events: auto;
}
#burger-menu-panel .burger-close-btn:hover,
#burger-menu-panel .burger-close-btn:focus,
#burger-menu-panel .burger-close-btn:active {
    color: #ff4b4b;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    text-decoration: none !important;
}
#burger-menu-panel .menu-category {
    background: rgba(40,40,60,0.95);
    border-radius: 18px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.12);
    padding: 20px 24px 15px 24px; /* Cohérence avec ci-dessus */
    min-width: 280px; /* Peut être redondant avec minmax, mais ne gêne pas forcément */
    /* max-width: 340px; */ /* Commenté pour l'instant */
    /* flex: 1 1 300px; */ /* Supprimé car géré par Grid */
    /* margin-bottom: 0; */ /* Supprimé, gap de la grille gère l'espacement */
    display: flex; /* Garder flex pour l'alignement interne du contenu de la carte */
    flex-direction: column; /* Organiser le contenu en colonne */
    align-items: flex-start;
    gap: 10px; /* Espacement interne */
}
#burger-menu-panel .menu-category h3 {
    /* Style titres de catégorie - Utilise les variables du thème */
    color: var(--accent-color-secondary, var(--text-color)); /* Couleur accent secondaire ou texte */
    font-family: var(--font-display, 'Poppins', sans-serif);
    border-bottom: 1px solid var(--border-color, var(--neutral-color-grey));
    padding-bottom: 8px; /* Padding sous le titre réduit */
    margin: 0; /* Retirer la marge par défaut du h3 */
    font-size: 1.2em; /* Taille ajustée */
    width: 100%; /* S'assurer que la bordure prend toute la largeur */
}
#burger-menu-panel .menu-category button {
    display: block;
    width: 100%;
    text-align: left;
    margin-top: 0; /* Géré par le gap de .menu-category */
    padding: 10px 18px; /* Padding des boutons réduit */
    background-color: var(--widget-titlebar-background);
    color: var(--widget-text-color);
    border: var(--border-base);
    border-radius: var(--border-radius-base);
    cursor: pointer;
}
#burger-menu-panel .menu-category button:hover {
    background-color: var(--neutral-color-medium);
}
#burger-menu-panel .menu-category ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#burger-menu-panel .menu-category ul li {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}
@media (max-width: 700px) {
    #burger-menu-panel.burger-panel-fullscreen {
        padding: 10px 0 0 0;
    }
    #burger-menu-panel .menu-category {
        padding: 14px 8vw 10px 8vw;
        max-width: 98vw;
    }
    #burger-menu-panel h2 {
        font-size: 1.3em;
    }
}
body.menu-open {
    background: rgba(10,10,20,0.85) !important;
    overflow: hidden;
}

/* === Styles spécifiques au thème Metal Gear Solid 1 === */
body.theme-mgs1 {
    font-family: var(--main-font, sans-serif); /* Police condensée par défaut */
    background-color: var(--primary-background, #1A2B20); /* Fond principal MGS1 */
    color: var(--primary-text-color, #88A290);
}

body.theme-mgs1::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: var(--scanline-overlay-weak, none);
    opacity: 0.6;
    pointer-events: none;
    z-index: -2; /* MODIFIÉ: Derrière la couche wallpaper */
}

/* Styles des widgets pour MGS1 */
body.theme-mgs1 .widget {
    background-color: var(--widget-background, rgba(45, 65, 50, 0.75)); /* Plus de transparence */
    border: 2px solid var(--mgs-medium-green, #5A7A5F); /* Bordure plus affirmée */
    box-shadow: var(--box-shadow-inset, inset 0 2px 4px rgba(0,0,0,0.6)), 
                0 3px 6px rgba(0,0,0,0.4); /* Ombre inset plus forte et ombre externe */
    border-radius: 3px 3px 0 0; /* Rayon seulement en haut, ou très faible partout */
    /* Forme angulaire avec un coin coupé */
    clip-path: polygon(
        0 0, /* coin sup gauche */
        calc(100% - 15px) 0, /* coin sup droit - décalage pour la coupe */
        100% 15px, /* point de début de la coupe sur le côté droit */
        100% 100%, /* coin inf droit */
        0 100% /* coin inf gauche */
    );
    /* Ajouter une petite transition pour le survol si on en ajoute un */
    transition: transform var(--transition-speed-normal) var(--transition-easing);
}

/* On pourrait ajouter un effet au survol du widget */
/* body.theme-mgs1 .widget:hover {
    transform: scale(1.01);
    box-shadow: var(--box-shadow-inset, inset 0 2px 4px rgba(0,0,0,0.6)), 
                0 5px 15px rgba(var(--mgs-codec-blue-rgb, 96, 160, 192), 0.3); 
} */

body.theme-mgs1 .widget-titlebar {
    background: linear-gradient(to bottom, var(--mgs-olive-drab, #3D5240), var(--mgs-deep-green, #1A2B20)); /* Dégradé subtil */
    color: var(--mgs-codec-text, #9DD8FF);
    font-family: var(--font-family-display, 'Orbitron', sans-serif); /* Police Display */
    text-transform: uppercase; /* Titres en majuscules */
    letter-spacing: 1.5px; /* Espacement des lettres */
    padding: 8px 12px;
    border-bottom: 2px solid var(--mgs-codec-blue, #60A0C0); /* Bordure codec affirmée */
    border-radius: 0; /* Pas de rayon ici si le widget a un clip-path */
    position: relative; /* Pour les pseudo-éléments décoratifs */
}

/* Ligne décorative sur la barre de titre */
body.theme-mgs1 .widget-titlebar::before {
    content: '//'; /* Ou un autre symbole MGS-esque */
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mgs-codec-blue-darker, #3A6F8F);
    font-size: 0.8em;
    font-weight: bold;
}

body.theme-mgs1 .widget-title {
    font-weight: 500; /* Orbitron a plusieurs graisses */
    text-shadow: 0 0 6px var(--mgs-codec-blue, #60A0C0), 0 0 3px var(--mgs-codec-blue, #60A0C0); /* Lueur plus prononcée */
    margin-left: 20px; /* Laisser de la place pour le ::before */
}

body.theme-mgs1 .widget-controls button {
    color: var(--mgs-codec-text, #9DD8FF);
    background-color: rgba(var(--mgs-near-black-rgb, 15,18,16), 0.4); /* Fond sombre semi-transparent pour les boutons */
    border: 1px solid var(--mgs-codec-blue-darker, #3A6F8F);
    font-family: var(--codec-font, monospace);
    font-size: 0.9em; /* Ajuster la taille des icônes/texte des boutons */
    padding: 3px 6px;
    border-radius: 2px;
    min-width: 28px; /* Assurer une largeur minimale */
    text-align: center;
    transition: all var(--transition-speed-fast) var(--transition-easing);
}

body.theme-mgs1 .widget-controls button:hover {
    color: var(--mgs-pure-white, #FFF);
    background-color: var(--mgs-codec-blue, #60A0C0);
    border-color: var(--mgs-codec-text, #9DD8FF);
    box-shadow: 0 0 8px var(--mgs-codec-blue, #60A0C0);
    transform: scale(1.1);
}

/* Ajustement des modales pour MGS1 */
body.theme-mgs1 .modal-content {
    background: var(--modal-background, #282C30); 
    border: 1px solid var(--modal-border-color, #4A525A);
    border-radius: var(--border-radius-large, 4px);
    /* Les dimensions par défaut sont héritées des styles globaux des modales */
}

body.theme-mgs1 .modal-header {
    background: var(--modal-header-background, #4A525A);
    color: var(--accent-text-color, #9DD8FF);
    font-family: var(--font-family-display, 'Orbitron', sans-serif);
    border-bottom: 1px solid var(--mgs-codec-blue-darker, #3A6F8F);
}

body.theme-mgs1 .modal-header h2 {
    text-shadow: var(--text-shadow-codec, 0 0 5px var(--mgs-codec-blue));
}

body.theme-mgs1 .modal-body {
    background: var(--modal-background, #282C30);
    color: var(--primary-text-color, #88A290);
    font-family: var(--main-font, sans-serif);
}

body.theme-mgs1 .modal-overlay {
    background: var(--modal-overlay-background, rgba(10, 20, 15, 0.75));
    backdrop-filter: blur(2px); /* Flou léger pour MGS1 */
    -webkit-backdrop-filter: blur(2px);
}

/* Style pour les labels de fichiers dans les modales MGS1 */
body.theme-mgs1 .modal-file-label {
    background: var(--mgs-medium-grey, #4A525A);
    color: var(--mgs-codec-text, #9DD8FF);
    border: 1px solid var(--mgs-codec-blue-darker, #3A6F8F);
    border-radius: var(--border-radius-base, 2px); /* Bords plus nets */
    padding: 8px 15px;
    font-family: var(--main-font, sans-serif);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: var(--box-shadow-inset, inset 0 1px 2px rgba(0,0,0,0.4));
}

body.theme-mgs1 .modal-file-label:hover {
    background: var(--mgs-codec-blue-darker, #3A6F8F);
    color: var(--mgs-pure-white, #FFF);
    border-color: var(--mgs-codec-blue, #60A0C0);
    box-shadow: var(--box-shadow-inset, inset 0 1px 2px rgba(0,0,0,0.4)), 0 0 5px var(--mgs-codec-blue, #60A0C0);
}

body.theme-mgs1 .modal-file-label i {
    margin-right: 10px;
    color: var(--mgs-caution-orange, #D08040); /* Icône en orange */
}

/* === Fin des Styles spécifiques au thème Metal Gear Solid 1 === */

/* === Styles spécifiques au thème Cyberpunk === */
body.theme-cyberpunk {
    font-family: var(--cp-font-primary, sans-serif);
    background-color: var(--primary-background, #030305);
    color: var(--primary-text-color, #E0E0FF);
    overflow: hidden; /* Assurer qu'aucun effet de fond ne dépasse */
}

/* Effet de grille digitale en fond pour Cyberpunk */
body.theme-cyberpunk::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw; height: 100vh;
    background-image: linear-gradient(rgba(var(--cp-electric-blue-rgb,0,191,255), 0.05) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(var(--cp-electric-blue-rgb,0,191,255), 0.05) 1px, transparent 1px);
    background-size: 30px 30px; /* Taille de la grille */
    pointer-events: none;
    z-index: -2; /* Derrière la couche wallpaper */
    opacity: 0.7;
}

/* Superposition d'un léger bruit/static pour l'ambiance */
body.theme-cyberpunk::after {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw; height: 100vh;
    background-image: var(--noise-overlay); /* Défini dans Cyberpunk.css */
    opacity: 0.03; /* Très subtil */
    pointer-events: none;
    z-index: -2; /* Derrière la couche wallpaper */
}

/* Styles des widgets pour Cyberpunk */
body.theme-cyberpunk .widget {
    background-color: rgba(var(--cp-night-sky-rgb,10,15,26), 0.85); /* Fond sombre bleuté, semi-transparent */
    border: 1px solid var(--cp-electric-blue, #00BFFF);
    box-shadow: var(--box-shadow-neon-outline-blue, 0 0 5px var(--cp-electric-blue)),
                0 0 20px rgba(var(--cp-electric-blue-rgb,0,191,255),0.2); /* Lueur diffuse */
    border-radius: var(--border-radius-base, 1px); 
    /* Forme angulaire agressive */
    clip-path: polygon(
        0 0,                 /* Coin sup gauche */
        100% 0,              /* Coin sup droit */
        100% calc(100% - 10px), /* Point avant biseau inf droit */
        calc(100% - 10px) 100%, /* Point biseau inf droit */
        0 100%               /* Coin inf gauche */
    ); 
    padding: 1px; /* Pour que le clip-path ne coupe pas trop la bordure */
}

body.theme-cyberpunk .widget-titlebar {
    background: linear-gradient(to right, rgba(var(--cp-cyber-purple-rgb,157,0,255),0.3), rgba(var(--cp-electric-blue-rgb,0,191,255),0.2));
    color: var(--cp-acid-yellow, #DFFF00);
    font-family: var(--cp-font-display, 'Rajdhani', sans-serif);
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--cp-neon-pink, #FF00FF);
    border-radius: 0;
    text-shadow: var(--text-shadow-neon-pink, 0 0 5px var(--cp-neon-pink));
}

body.theme-cyberpunk .widget-title {
    font-weight: 500;
}

body.theme-cyberpunk .widget-controls button {
    color: var(--cp-electric-blue, #00BFFF);
    background-color: transparent;
    border: none;
    font-family: var(--cp-font-monospace, monospace);
    font-size: 1.1em; /* Icônes un peu plus grandes */
    text-shadow: 0 0 3px var(--cp-electric-blue, #00BFFF);
    padding: 2px;
}

body.theme-cyberpunk .widget-controls button:hover {
    color: var(--cp-acid-yellow, #DFFF00);
    text-shadow: 0 0 5px var(--cp-acid-yellow, #DFFF00), 0 0 10px var(--cp-acid-yellow, #DFFF00);
}

/* Styles des modales pour Cyberpunk */
body.theme-cyberpunk .modal-content {
    background: rgba(var(--cp-dark-purple-rgb,24,8,32), 0.92); /* Fond violet sombre, plus opaque */
    border: 1px solid var(--cp-neon-pink, #FF00FF);
    box-shadow: var(--box-shadow-neon-outline-pink, 0 0 5px var(--cp-neon-pink)),
                0 0 30px rgba(var(--cp-neon-pink-rgb,255,0,255),0.3); /* Forte lueur rose */
    border-radius: var(--border-radius-large, 2px);
    /* clip-path: polygon(0 10px, 10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); */ /* Forme plus complexe pour modales */
}

body.theme-cyberpunk .modal-header {
    background: transparent; /* Le fond de .modal-content est déjà sombre */
    color: var(--cp-neon-pink, #FF00FF);
    font-family: var(--cp-font-display, 'Rajdhani', sans-serif);
    text-transform: uppercase;
    border-bottom: 1px dashed var(--cp-cyber-purple, #9D00FF); /* Bordure pointillée */
    padding: 15px 20px;
}

body.theme-cyberpunk .modal-header h2 {
    text-shadow: var(--text-shadow-neon-pink, 0 0 5px var(--cp-neon-pink));
    letter-spacing: 1px;
}

body.theme-cyberpunk .modal-body {
    background: transparent;
    color: var(--cp-primary-text, #E0E0FF);
    font-family: var(--cp-font-primary, sans-serif);
}

body.theme-cyberpunk .modal-overlay {
    background: var(--modal-overlay-background, rgba(3,3,5,0.85));
    backdrop-filter: blur(3px) saturate(150%); /* Flou plus saturé */
    -webkit-backdrop-filter: blur(3px) saturate(150%);
}

/* === Fin des Styles spécifiques au thème Cyberpunk === */

/* Correction spécifique pour le widget burger dans le thème Cyberpunk */
body.theme-cyberpunk #widget-burger .widget-content {
    overflow: hidden !important; /* Forcer le masquage du contenu débordant */
}

/* === Styles spécifiques au thème Hot Love === */
body.theme-hotlove {
    font-family: var(--hl-font-primary, sans-serif);
    background-color: var(--primary-background, #1B171A); /* Noir velouté */
    color: var(--primary-text-color, #F7E7CE);
    overflow-x: hidden; /* Empêcher le scroll horizontal dû à des effets de bord */
}

/* Superposition de dentelle discrète sur le fond */
body.theme-hotlove::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw; height: 100vh;
    background-image: var(--heart-pattern-overlay); /* MODIFIÉ ICI pour utiliser le motif de cœurs */
    background-repeat: repeat;
    opacity: 0.7; /* Assez visible mais pas envahissant */
    pointer-events: none;
    z-index: -2; /* MODIFIÉ: Derrière la couche wallpaper */
}

/* Styles généraux pour les widgets Hot Love */
body.theme-hotlove .widget {
    background: var(--widget-background, rgba(106,13,173,0.85)); /* Violet profond, semi-transparent */
    border: 1px solid var(--widget-border-color, #B76E79); /* Or rose */
    border-radius: var(--border-radius-large, 25px); /* Très arrondi */
    box-shadow: var(--box-shadow-soft-diffuse, 0 8px 25px rgba(27,23,26, 0.3)),
                var(--box-shadow-subtle-glow, 0 0 15px rgba(253,63,146, 0.2)); /* Ombre douce et lueur fuchsia */
    /* La couleur du texte est gérée par la variable --widget-text-color dans le fichier theme, qui a été mise à noir */
    transition: transform var(--transition-speed-normal) var(--transition-easing), 
                box-shadow var(--transition-speed-normal) var(--transition-easing);
}

body.theme-hotlove .widget:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: var(--box-shadow-soft-diffuse, 0 12px 30px rgba(27,23,26, 0.4)),
                var(--box-shadow-subtle-glow, 0 0 25px rgba(253,63,146, 0.35));
}

body.theme-hotlove .widget-titlebar {
    background-color: var(--widget-titlebar-background, #1B171A); /* Noir velouté */
    color: var(--hl-primary-text, #F7E7CE); /* CHANGÉ ICI: Forcer la couleur claire pour la barre de titre */
    font-family: var(--widget-title-font, serif); /* Doit être Dancing Script via la variable */
    font-weight: 400; /* Normal pour Dancing Script, bold peut être trop épais */
    padding: 10px 20px;
    border-bottom: 1px solid var(--hl-light-rose-gold, #DAB8BF); /* Bordure sous le titre reste rose gold clair */
    border-radius: var(--border-radius-large, 25px) var(--border-radius-large, 25px) 0 0; /* Coins supérieurs arrondis */
    text-shadow: var(--text-shadow-soft-glow, none);
}

/* Cibler .widget-title spécifiquement pour la taille de la police */
body.theme-hotlove .widget-titlebar .widget-title {
    font-size: 1.5em; /* Augmenté pour plus d'impact */
    margin: 0;
    line-height: 1.2; /* Ajuster si la police dépasse */
    color: inherit; /* Hérite de la couleur définie pour .widget-titlebar */
}

body.theme-hotlove .widget-controls button {
    background: transparent;
    border: none;
    color: var(--hl-boudoir-pink, #F8C8DC);
    font-size: 1.1em;
    opacity: 0.8;
    transition: color var(--transition-speed-fast) var(--transition-easing), transform var(--transition-speed-fast) var(--transition-easing);
}

body.theme-hotlove .widget-controls button:hover {
    color: var(--hl-fuchsia-flash, #FD3F92);
    transform: scale(1.15);
}

body.theme-hotlove .widget-content {
    padding: 15px;
    border-radius: 0 0 var(--border-radius-large, 25px) var(--border-radius-large, 25px); /* Coins inférieurs arrondis */
    color: var(--widget-text-color); /* Assure que le contenu utilise bien la variable modifiée (noir) */
}

/* Styles pour les Modales Hot Love */
body.theme-hotlove .modal-content {
    background: var(--modal-background, rgba(27,23,26, 0.92)); /* Noir velouté plus opaque */
    border: 1px solid var(--modal-border-color, #FD3F92); /* Fuchsia */
    border-radius: var(--border-radius-large, 25px);
    box-shadow: var(--box-shadow-soft-diffuse, 0 10px 30px rgba(0,0,0,0.5)), 
                0 0 20px rgba(var(--hl-fuchsia-flash-rgb,253,63,146),0.3);
    color: var(--modal-text-color, #F7E7CE);
    max-width: 60vw; /* Un peu plus larges pour un effet luxueux */
}

body.theme-hotlove .modal-header {
    background: var(--modal-header-background, #6A0DAD); /* Aubergine */
    color: var(--hl-champagne-glow, #F7E7CE);
    font-family: var(--widget-title-font, serif);
    padding: 15px 25px;
    border-bottom: 1px solid var(--hl-rose-gold, #B76E79);
    border-radius: var(--border-radius-large, 25px) var(--border-radius-large, 25px) 0 0;
}

body.theme-hotlove .modal-header h2 {
    font-size: 1.6em;
    text-shadow: var(--text-shadow-soft-glow, none);
}

body.theme-hotlove .modal-close-btn {
    /* Réutiliser le style des boutons de contrôle de widget */
    background-color: var(--w98-button-face, #C0C0C0);
    border: 1px solid transparent;
    border-top-color: var(--w98-button-highlight, #FFFFFF);
    border-left-color: var(--w98-button-highlight, #FFFFFF);
    border-bottom-color: var(--w98-button-shadow, #808080);
    border-right-color: var(--w98-button-shadow, #808080);
    color: var(--w98-text-black, #000000);
    font-family: 'Marlett', 'Webdings';
    font-size: 10px;
    width: 16px;
    height: 14px;
    padding: 0;
    line-height: 14px;
    text-shadow: none;
    opacity: 1;
}
body.theme-hotlove .modal-close-btn::before { content: "r"; } 

body.theme-hotlove .modal-body {
    padding: 20px 25px;
    background-color: transparent; /* Le fond est sur modal-content */
}

body.theme-hotlove .modal-overlay {
    background: var(--modal-overlay-background, rgba(27,23,26, 0.7));
    backdrop-filter: blur(3px) saturate(150%); /* Effet boudoir, flou et couleurs riches */
    -webkit-backdrop-filter: blur(3px) saturate(150%);
}

/* Styles pour les boutons génériques dans le thème W98 */
body.theme-w98se button,
body.theme-w98se input[type="button"],
body.theme-w98se input[type="submit"],
body.theme-w98se .modal-button-action,
body.theme-w98se .modal-file-label {
    background-color: var(--w98-button-face, #C0C0C0);
    border: 1px solid transparent;
    border-top-color: var(--w98-button-highlight, #FFFFFF);
    border-left-color: var(--w98-button-highlight, #FFFFFF);
    border-bottom-color: var(--w98-button-shadow, #808080);
    border-right-color: var(--w98-button-shadow, #808080);
    box-shadow: 1px 1px 0px var(--w98-text-black, #000000); /* Légère ombre externe */
    color: var(--w98-text-black, #000000);
    font-family: var(--w98-font-primary, Tahoma, sans-serif);
    font-size: 12px;
    padding: 3px 12px; /* Padding typique des boutons W98 */
    border-radius: 0 !important;
    cursor: default;
    text-align: center;
    min-width: 75px; /* Largeur minimale des boutons OK/Annuler */
}

body.theme-w98se button:active,
body.theme-w98se input[type="button"]:active,
body.theme-w98se input[type="submit"]:active,
body.theme-w98se .modal-button-action:active,
body.theme-w98se .modal-file-label:active {
    border-top-color: var(--w98-button-shadow, #808080);
    border-left-color: var(--w98-button-shadow, #808080);
    border-bottom-color: var(--w98-button-highlight, #FFFFFF);
    border-right-color: var(--w98-button-highlight, #FFFFFF);
    padding: 4px 11px 2px 13px; /* Simuler l'enfoncement */
    box-shadow: none;
}

/* Supprimer les icônes FontAwesome des boutons généraux, W98 n'en utilise pas comme ça */
body.theme-w98se button i,
body.theme-w98se .modal-button-action i,
body.theme-w98se .modal-file-label i {
    display: none !important;
}

/* Input text et textarea */
body.theme-w98se input[type="text"],
body.theme-w98se input[type="number"],
body.theme-w98se input[type="password"],
body.theme-w98se textarea {
    background-color: var(--w98-text-white, #FFFFFF);
    border: 1px solid transparent;
    border-top-color: var(--w98-button-shadow, #808080);    /* Effet sunken */
    border-left-color: var(--w98-button-shadow, #808080);   /* Effet sunken */
    border-bottom-color: var(--w98-button-highlight, #FFFFFF);
    border-right-color: var(--w98-button-highlight, #FFFFFF);
    padding: 3px 4px;
    font-family: var(--w98-font-primary, Tahoma, sans-serif);
    font-size: 12px;
    color: var(--w98-text-black, #000000);
    border-radius: 0 !important;
}

/* Boutons de contrôle de fenêtre W98 (très simplifié pour l'instant) */
body.theme-w98se .widget-controls {
    display: flex;
    flex-direction: row; /* Assurer l'alignement horizontal */
    align-items: center;
}

body.theme-w98se .widget-controls button {
    /* Vider le contenu textuel potentiel pour ne garder que le ::before */
    color: transparent; /* Rend le texte du bouton HTML invisible */
    font-size: 0; /* Empêche le texte HTML de prendre de la place */
    position: relative; /* Nécessaire pour positionner le ::before correctement */
}

body.theme-w98se .widget-controls button::before {
    /* Styles communs pour les ::before des boutons */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--w98-text-black, #000000); /* Couleur du symbole */
    font-family: var(--w98-font-primary, Tahoma, sans-serif);
    /* La taille et le poids seront spécifiques à chaque bouton ci-dessous */
}

body.theme-w98se .widget-btn-minimize::before {
    content: ""; 
    display: block;
    width: 7px;  
    height: 2px; 
    background-color: var(--w98-text-black, #000000);
    /* Les propriétés top/left/transform du parent s'appliquent via le style commun ::before */
}

body.theme-w98se .widget-btn-close::before {
    content: "X"; 
    font-weight: normal; 
    font-size: 9px; 
    line-height: 1; 
    /* Les propriétés top/left/transform du parent s'appliquent */
}

/* Masquer les boutons non-W98 */
/* ... existing code ... */

/* Styles des "fenêtres" (widgets) W98 */
body.theme-w98se .widget {
    /* ... styles existants ... */
    border-radius: 0 !important; /* Assurer angles droits */
    clip-path: none !important; /* Assurer pas de clip-path */
}

body.theme-w98se .widget-titlebar {
    background: linear-gradient(to right, var(--w98-window-title-active, #000080) 0%, var(--w98-window-title-gradient-light, #1084D0) 100%) !important; /* RÉTABLI et FORCÉ */
    color: var(--w98-text-white, #FFFFFF) !important; /* FORCÉ pour la barre */
    font-family: var(--widget-title-font, Tahoma, Verdana, Arial, sans-serif);
    font-weight: bold;
    font-size: 11px; 
    padding: 3px 5px 4px 5px; 
    border-bottom: none; 
    border-radius: 0 !important;
    text-shadow: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 20px; 
}

body.theme-w98se .widget-titlebar .widget-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: inherit; 
    font-weight: bold;
    margin: 0;
    line-height: normal;
    color: var(--w98-text-white, #FFFFFF) !important; /* FORCÉ pour le titre lui-même */
}

/* Boutons de contrôle de fenêtre W98 */
body.theme-w98se .widget-controls {
    display: flex;
    flex-direction: row; 
    align-items: center;
}

body.theme-w98se .widget-controls button {
    background-color: var(--w98-button-face, #C0C0C0);
    border: 1px solid var(--w98-text-black, #000000); 
    border-top-color: var(--w98-button-highlight, #FFFFFF);
    border-left-color: var(--w98-button-highlight, #FFFFFF);
    border-bottom-color: var(--w98-button-shadow, #808080);
    border-right-color: var(--w98-button-shadow, #808080);
    box-shadow: none; 
    color: transparent; 
    font-size: 0; 
    width: 14px; /* Réduit à 14px */
    height: 14px; /* Réduit à 14px pour rester carré */
    padding: 0 !important; 
    margin-left: 3px; /* Léger espacement entre boutons */
    border-radius: 0 !important;
    cursor: default;
    opacity: 1;
    transition: none;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; 
    box-sizing: border-box; /* Ajouté pour inclure la bordure dans la taille */
}

body.theme-w98se .widget-controls button::before {
    position: absolute;
    color: var(--w98-text-black, #000000); 
    font-family: var(--w98-font-primary, Tahoma, sans-serif); 
}

body.theme-w98se .widget-controls button:active {
    border-top-color: var(--w98-button-shadow, #808080);
    border-left-color: var(--w98-button-shadow, #808080);
    border-bottom-color: var(--w98-button-highlight, #FFFFFF);
    border-right-color: var(--w98-button-highlight, #FFFFFF);
    /* Décalage du contenu pour simuler l'enfoncement */
}
body.theme-w98se .widget-controls button:active::before {
    transform: translate(1px, 1px);
}

body.theme-w98se .widget-btn-minimize::before {
    content: ""; 
    display: block;
    width: 8px;  /* Largeur de la barre */
    height: 2px; /* Épaisseur de la barre */
    background-color: var(--w98-text-black, #000000);
    position: absolute; /* Centrage manuel car ce n'est pas du texte */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

body.theme-w98se .widget-btn-close::before {
    content: "×"; /* Caractère X de multiplication, plus fin */ 
    font-weight: normal; /* Pas de gras */
    font-size: 11px;  /* Ajuster pour un bon rendu */
    line-height: 1; 
    position: absolute; /* Centrage manuel */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Masquer les boutons non-W98 */
/* ... existing code ... */

body.theme-w98se {
    font-family: var(--w98-font-primary, Tahoma, Verdana, Arial, sans-serif);
    background-color: var(--primary-background, #008080);
    color: var(--primary-text-color, #000000);
}

body.theme-w98se .widget-controls button::before {
    position: absolute;
    color: var(--w98-text-black, #000000); 
    font-family: var(--w98-font-primary, Tahoma, sans-serif); 
    /* RÉTABLI: Centrage explicite du contenu du ::before */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

body.theme-w98se .widget-controls button:active::before {
    /* transform: translate(1px, 1px); Déjà en place, ok */
}

body.theme-w98se .widget-btn-minimize::before {
    content: ""; 
    display: block;
    width: 8px;  
    height: 2px; 
    background-color: var(--w98-text-black, #000000);
    /* position, top, left, transform sont hérités ou gérés par le ::before commun */
}

body.theme-w98se .widget-btn-close::before {
    content: "×"; 
    font-weight: normal; 
    font-size: 11px;  
    line-height: 1; 
    /* position, top, left, transform sont hérités ou gérés par le ::before commun */
}

/* Forcer le fond des widgets spécifiques pour W98 */
body.theme-w98se #widget-screen-1,
body.theme-w98se #widget-livesplits {
    background-color: var(--w98-window-background, #C0C0C0) !important;
}

body.theme-w98se #widget-livesplits .widget-content {
    background-color: var(--w98-window-background, #C0C0C0) !important; /* Spécifique pour le contenu si besoin */
}

/* === Fin des Styles spécifiques au thème Windows 98 SE === */

/* === Styles spécifiques au thème Gnome 46 (Adwaita Light) === */
body.theme-gnome46 {
    font-family: var(--gnome-font-primary, 'Noto Sans', sans-serif);
    background-color: var(--primary-background, #f6f5f4); /* Fond général Adwaita light */
    color: var(--primary-text-color, #2e3436);
    font-size: 10pt; /* Taille de base Gnome */
    line-height: 1.5;
}

body.theme-gnome46::before, body.theme-gnome46::after {
    content: none !important; /* Supprimer les overlays des autres thèmes */
}

/* Styles des "fenêtres" (widgets) Gnome */
body.theme-gnome46 .widget {
    background-color: var(--widget-background, #ffffff);
    border: 1px solid var(--widget-border-color, #b0b0b0);
    border-radius: var(--border-radius-large, 12px) !important; /* Arrondi Gnome pour fenêtres */
    box-shadow: var(--box-shadow-dialog, 0 4px 12px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.05)) !important;
    color: var(--widget-text-color, #2e3436);
    padding: 0; /* Le padding est géré par la titlebar et le content */
    clip-path: none !important; 
}

/* HeaderBar Gnome */
body.theme-gnome46 .widget-titlebar {
    background-color: var(--widget-titlebar-background, #ebebeb);
    color: var(--widget-text-color, #2e3436);
    font-family: var(--widget-title-font, 'Noto Sans', sans-serif);
    font-weight: 500; 
    font-size: 10.5pt; 
    padding: 0 8px; /* Padding horizontal pour espacer les bords et les boutons */
    border-bottom: 1px solid var(--gnome-border-color, #c2c2c2);
    border-radius: var(--border-radius-large, 12px) var(--border-radius-large, 12px) 0 0 !important; 
    text-shadow: none;
    display: flex;
    justify-content: space-between; /* MODIFIÉ: pour pousser les éléments aux extrémités */
    align-items: center;
    height: auto; 
    min-height: 40px; /* Hauteur minimale typique d'une HeaderBar */
}

body.theme-gnome46 .widget-titlebar .widget-title {
    font-size: inherit; 
    font-weight: inherit;
    color: inherit;
    text-align: center; 
    flex-grow: 1; /* MODIFIÉ: Permet au titre de prendre l'espace et de se centrer */
    /* Ajouter un peu de padding pour ne pas coller aux boutons si pas de boutons à gauche */
    padding-left: 38px; /* Espace pour d'éventuels boutons à gauche (placeholder) */
    padding-right: 38px; /* Espace pour les boutons de droite */
    overflow: hidden; /* Pour gérer les titres trop longs avec text-overflow */
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Boutons de contrôle de fenêtre Gnome (simplifié) */
body.theme-gnome46 .widget-controls {
    display: flex; /* Reste flex pour aligner les boutons à l'intérieur */
    align-items: center;
    /* position: absolute; right: 8px; top: 50%; transform: translateY(-50%); SUPPRIMÉ */
    /* Les boutons sont maintenant un enfant flex normal de la titlebar */
}

body.theme-gnome46 .widget-controls button {
    background-color: transparent;
    border: none;
    color: var(--gnome-text-secondary, #5c616c);
    font-family: 'Noto Sans', sans-serif; /* Utiliser la police standard pour les symboles */
    font-size: 14px; /* Taille des symboles X, _ */
    width: 30px; 
    height: 30px; 
    padding: 0;
    margin-left: 4px;
    border-radius: var(--border-radius-base, 6px) !important;
    cursor: pointer;
    opacity: 1;
    transition: background-color var(--transition-speed-fast) var(--transition-easing), color var(--transition-speed-fast) var(--transition-easing);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ... existing code ... */

/* Styles pour les contrôles personnalisés type Winamp pour le lecteur vidéo des clips */
#winamp-controls {
    padding: 5px;
    /* background-color: #ccc; /* Couleur de fond type Winamp (à ajuster) */
    /* border: 2px outset #eee; */ /* Effet de bordure 3D (à ajuster) */
    border-radius: 3px;
    margin-bottom: 10px; /* Pour espacer de ce qui pourrait être en dessous */
}

.winamp-btn {
    background-color: #ddd; /* Gris clair */
    border: 1px solid #555; /* Bordure plus foncée */
    color: #333; /* Couleur de l'icône */
    padding: 8px 10px;
    margin: 0 3px;
    cursor: pointer;
    font-size: 0.9em; /* Taille de l'icône */
    border-radius: 3px;
    box-shadow: 1px 1px 1px #aaa;
    transition: background-color 0.2s, box-shadow 0.2s;
}

.winamp-btn:hover {
    background-color: #ccc;
}

.winamp-btn:active {
    background-color: #bbb;
    box-shadow: inset 1px 1px 1px #999;
}

/* Style spécifique pour le bouton play (peut-être une couleur verte ?) */
#wc-play-btn /*, #wc-pause-btn */ {
    /* color: green; */ /* Si on veut l'icône en vert */
}

/* Si on veut une barre de progression personnalisée plus tard */
/*
#wc-progress-bar {
    -webkit-appearance: none;
    appearance: none;
    width: calc(100% - 180px); 
    height: 8px;
    background: #555;
    outline: none;
    opacity: 0.7;
    transition: opacity .2s;
    margin: 0 10px;
    vertical-align: middle;
}

#wc-progress-bar:hover {
    opacity: 1;
}

#wc-progress-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background: #ddd;
    cursor: pointer;
    border-radius: 50%;
}

#wc-progress-bar::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: #ddd;
    cursor: pointer;
    border-radius: 50%;
    border: none;
}
*/

/* Nouvelle Modale pour Lecture de Clip en "Plein Écran" */
#fullscreen-clip-modal .modal-content {
    width: 85vw; /* Largeur de la modale */
    height: 85vh; /* Hauteur de la modale */
    max-width: 1600px; /* Limite pour très grands écrans */
    max-height: 900px;  /* Limite pour très grands écrans */
    background-color: var(--neutral-color-dark, #1a1a1a); /* Fond un peu plus sombre pour le focus */
    border: none; /* SUPPRIMÉ: border: 2px solid var(--accent-color, #007bff); */ /* Bordure d'accentuation */
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

#fullscreen-clip-modal .modal-header h2 {
    font-size: 1.3em;
}

#fullscreen-clip-modal .modal-body {
    flex-grow: 1; /* Pour que le corps prenne la place restante */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Centrer le contenu (vidéo et infos) */
    padding: 15px; /* Un peu de padding */
    gap: 15px; /* Espace entre les infos et la vidéo */
    overflow: hidden; /* Empêcher les barres de scroll sur le corps de la modale plein écran */
}

#fullscreen-clip-info {
    color: var(--neutral-color-light, #f0f0f0);
    padding: 5px 10px;
    border-radius: var(--border-radius-base, 4px);
    /* background-color: rgba(0,0,0,0.2); */ /* Optionnel: léger fond pour les infos */
    text-align: center;
}

#fullscreen-clip-info #fs-clip-pseudo {
    font-size: 1.4em;
    font-weight: bold;
    color: var(--accent-color, #007bff);
    display: block;
}

#fullscreen-clip-info #fs-clip-filename {
    font-size: 0.9em;
    opacity: 0.8;
    margin-top: 4px;
    display: block;
}

#fullscreen-clip-video-player {
    display: block; /* S'assurer qu'il est block pour width/height 100% */
    width: 100%; 
    height: auto; /* Ajustement automatique à la largeur */
    max-height: calc(100% - 60px); /* Laisser de la place pour les infos et padding (ajuster 60px si besoin) */
    object-fit: contain; /* Assure que toute la vidéo est visible, avec letterboxing si besoin */
    background-color: #000000; /* Fond noir pour la vidéo */
    border-radius: var(--border-radius-base, 4px); /* Coins arrondis pour le lecteur vidéo */
}

/* Wrapper pour l'enrobage thématique de la modale plein écran */
.fullscreen-clip-modal-theme-wrapper.modal-content {
    /* Style par défaut, sera surchargé par les thèmes */
    border-width: 3px; /* Un peu plus épais pour l'effet d'enrobage */
    /* transition: border-color 0.3s; (si la couleur de bordure change avec le thème) */
}

/* Exemple pour le thème MGS1 (à mettre dans Metal gear solid 1.css ou ici si global) */
body.theme-mgs1 .fullscreen-clip-modal-theme-wrapper.modal-content {
    border-color: var(--mgs-codec-blue, #60A0C0);
    box-shadow: 0 0 15px var(--mgs-codec-blue, #60A0C0), 0 0 30px rgba(var(--mgs-codec-blue-rgb, 96, 160, 192), 0.5);
    background-color: rgba(var(--mgs-deep-green-rgb, 26, 43, 32), 0.95); /* Fond MGS */
}
body.theme-mgs1 #fullscreen-clip-info #fs-clip-pseudo {
    color: var(--mgs-codec-text, #9DD8FF);
    font-family: var(--font-family-display, 'Orbitron');
}

/* Enrobage thématique pour Cyberpunk */
body.theme-cyberpunk .fullscreen-clip-modal-theme-wrapper.modal-content {
    border-color: var(--cp-neon-pink, #FF00FF);
    box-shadow: var(--box-shadow-neon-outline-pink, 0 0 10px var(--cp-neon-pink)),
                0 0 40px rgba(var(--cp-neon-pink-rgb,255,0,255),0.4); /* Lueur plus forte */
    background-color: rgba(var(--cp-dark-purple-rgb,24,8,32), 0.97); /* Presque opaque */
    /* clip-path: polygon(0 10px, 10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); */ /* Optionnel */
}
body.theme-cyberpunk #fullscreen-clip-info #fs-clip-pseudo {
    color: var(--cp-acid-yellow, #DFFF00);
    font-family: var(--cp-font-display, 'Rajdhani');
    text-shadow: var(--text-shadow-neon-pink, 0 0 5px var(--cp-neon-pink));
}

/* Enrobage thématique pour Hot Love */
body.theme-hotlove .fullscreen-clip-modal-theme-wrapper.modal-content {
    border-color: var(--hl-fuchsia-flash, #FD3F92);
    border-radius: var(--border-radius-large, 25px); /* Garder les arrondis */
    box-shadow: var(--box-shadow-soft-diffuse, 0 10px 30px rgba(0,0,0,0.5)), 
                0 0 25px rgba(var(--hl-fuchsia-flash-rgb,253,63,146),0.4);
    background-color: var(--modal-background, rgba(27,23,26, 0.97));
}
body.theme-hotlove #fullscreen-clip-info #fs-clip-pseudo {
    color: var(--hl-fuchsia-flash, #FD3F92);
    font-family: var(--widget-title-font, 'Dancing Script'); /* Police élégante */
}

/* Enrobage thématique pour Windows 98 SE */
body.theme-w98se .fullscreen-clip-modal-theme-wrapper.modal-content {
    border: 2px outset var(--w98-window-background, #C0C0C0);
    background-color: var(--w98-window-background, #C0C0C0);
    box-shadow: none; /* Pas d'ombre portée moderne */
    border-radius: 0 !important;
}
body.theme-w98se #fullscreen-clip-modal .modal-header {
    background: linear-gradient(to right, var(--w98-window-title-active, #000080) 0%, var(--w98-window-title-gradient-light, #1084D0) 100%);
    color: var(--w98-text-white, #FFFFFF);
    padding: 3px 5px;
    border-bottom: none;
}
body.theme-w98se #fullscreen-clip-modal .modal-header h2,
body.theme-w98se #fullscreen-clip-info #fs-clip-pseudo {
    color: var(--w98-text-white, #FFFFFF);
    font-family: var(--w98-font-primary, Tahoma);
    font-weight: bold;
    font-size: 11pt;
}
body.theme-w98se #fullscreen-clip-info #fs-clip-filename {
    color: var(--w98-text-black, #000000);
}
body.theme-w98se #fullscreen-clip-video-player {
    border: 2px inset var(--w98-border-dark, #808080);
}

/* Enrobage thématique pour Gnome 46 */
body.theme-gnome46 .fullscreen-clip-modal-theme-wrapper.modal-content {
    border-color: var(--gnome-border-color, #b0b0b0);
    border-radius: var(--border-radius-large, 12px) !important;
    box-shadow: var(--box-shadow-dialog, 0 4px 12px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.05)) !important;
    background-color: var(--widget-background, #ffffff); 
}
body.theme-gnome46 #fullscreen-clip-modal .modal-header {
    background-color: var(--widget-titlebar-background, #ebebeb);
    color: var(--widget-text-color, #2e3436);
    border-bottom: 1px solid var(--gnome-border-color, #c2c2c2);
    border-radius: var(--border-radius-large, 12px) var(--border-radius-large, 12px) 0 0 !important;
}
body.theme-gnome46 #fullscreen-clip-info #fs-clip-pseudo {
    color: var(--gnome-text-primary, #2e3436);
    font-family: var(--gnome-font-primary, 'Noto Sans');
    font-weight: 500;
}

/* Fin des styles d'enrobage thématique */

/* === WIDGET SPECIFIC STYLES === */

/* Widget Transmission - cacher la barre de scroll */
#widget-transmission .widget-content {
    overflow: hidden; /* Empêche les barres de défilement si la vidéo interne cause un micro-dépassement */
}

/* ... autres styles de widgets ... */

/* Widget Top Streamer Content Styles */
.top-streamer-widget-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pousse la nav en bas, info en haut */
    height: 100%;
    padding: 6px;
    gap: 4px;
    background-color: var(--widget-content-background, transparent);
    color: var(--widget-text-color, inherit);
    overflow: hidden;
}

.top-streamer-info {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 0;
    overflow: hidden;
}

.top-streamer-img {
    width: 36px;
    height: 36px;
    border-radius: 50% !important;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--widget-border-color, rgba(255,255,255,0.2));
}

.top-streamer-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    min-width: 0;
    overflow: hidden;
}

.top-streamer-link {
    color: inherit;
    text-decoration: none;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
}
.top-streamer-link:hover {
    text-decoration: underline;
}

.top-streamer-pseudo {
    font-weight: bold;
    font-size: 0.85em;
    color: inherit;
}

.top-streamer-url-text {
    font-size: 0.65em;
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    line-height: 1.2;
    margin-top: 1px;
}

.top-streamer-bio {
    font-size: 0.65em;
    opacity: 0.8;
    line-height: 1.2;
    white-space: nowrap; /* Forcer sur une seule ligne */
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    margin-top: 2px;
    color: var(--widget-secondary-text-color, var(--widget-text-color));
}

.top-streamer-nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.top-streamer-nav button {
    background: var(--widget-button-background, rgba(0,0,0,0.2));
    border: 1px solid var(--widget-button-border-color, rgba(255,255,255,0.2));
    color: var(--widget-button-text-color, inherit);
    padding: 1px 5px;
    border-radius: var(--border-radius-base);
    cursor: pointer;
    font-size: 0.85em;
    line-height: 1;
}

.top-streamer-nav button:hover {
    background: var(--widget-button-hover-background, rgba(0,0,0,0.4));
    border-color: var(--widget-button-hover-border-color, var(--accent-color));
}

/* Animation Fade-in pour le carrousel */
.top-streamer-info.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}
/* Fin Widget Top Streamer Content Styles */

/* === Fin des Styles spécifiques au thème Metal Gear Solid 1 === */

/* === Fin des Styles spécifiques au thème Gnome 46 === */

/* Animation d'éjection pour les messages de bot */
@keyframes botEjectAnimation {
  0% {
    opacity: 1;
    transform: scaleY(1) translateX(0);
    max-height: 50px; /* Hauteur initiale approx */
    margin-bottom: 4px; /* Marge initiale */
    overflow: hidden;
  }
  80% {
    opacity: 0;
    transform: scaleY(0.1) translateX(100px); /* Rétrécit et déplace vers la droite */
    max-height: 0;
    margin-bottom: 0;
  }
  100% {
    opacity: 0;
    transform: scaleY(0) translateX(100px);
    max-height: 0;
    margin-bottom: 0;
    padding: 0; /* Retire le padding aussi à la fin */
    border: none; /* Retire la bordure aussi */
  }
}

.bot-eject {
  animation: botEjectAnimation 0.8s ease-out forwards;
  transform-origin: top; /* L'échelle se fait depuis le haut */
  pointer-events: none; /* Empêche interaction pendant l'anim */
}

/* Styles pour le widget CODEC (si besoin d'ajustements spécifiques non liés aux thèmes) */
/* ... */

/* Styles Génériques pour les Boutons de Modales */
.modal .modal-body button,
.modal .modal-footer button,
.modal button.modal-button-action {
    /* Style de base inspiré des boutons du menu burger */
    display: inline-block; /* ou block si pleine largeur est préférée */
    padding: 8px 15px;
    margin: 5px; /* Ajout de marge pour espacement */
    background-color: var(--widget-titlebar-background, var(--neutral-color-dark)); /* Utilise le fond de la barre de titre ou fallback */
    color: var(--widget-text-color, var(--neutral-color-light));
    border: var(--border-base, 1px solid var(--neutral-color-grey));
    border-radius: var(--border-radius-base, 4px);
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    font-family: inherit; /* Hérite la police de la modale */
    font-size: 0.95em;
}

.modal .modal-body button:hover,
.modal .modal-footer button:hover,
.modal button.modal-button-action:hover {
    background-color: var(--neutral-color-medium, #555); /* Fallback générique au survol */
    border-color: var(--accent-color, var(--neutral-color-light)); /* Utilise la couleur d'accent si définie */
}

/* Style pour les labels agissant comme des boutons (upload) */
.modal .modal-file-label {
    display: inline-block;
    padding: 8px 15px;
    margin: 5px;
    background-color: var(--widget-titlebar-background, var(--neutral-color-dark));
    color: var(--widget-text-color, var(--neutral-color-light));
    border: var(--border-base, 1px solid var(--neutral-color-grey));
    border-radius: var(--border-radius-base, 4px);
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.modal .modal-file-label:hover {
    background-color: var(--neutral-color-medium, #555);
    border-color: var(--accent-color, var(--neutral-color-light));
}

.modal .modal-file-label i {
    margin-right: 8px; /* Espace entre icône et texte */
}

/* Correction pour le bouton burger dans le thème Hot Love */
body.theme-hotlove #burger-button {
    color: var(--hl-primary-text, #F7E7CE) !important; /* Forcer couleur claire pour l'icône */
    background-color: var(--widget-titlebar-background, var(--hl-velvet-black)); /* Conserver fond sombre */
}

/* Correction pour les inputs dans le menu principal du thème Hot Love */
body.theme-hotlove #burger-menu-panel input[type="text"],
body.theme-hotlove #burger-menu-panel textarea {
    background-color: rgba(var(--hl-champagne-glow-rgb, 247,231,206), 0.9); /* Fond champagne légèrement transparent */
    color: var(--hl-velvet-black, #1B171A) !important; /* Texte sombre contrastant - FORCÉ */
    border: var(--border-base); /* Assurer la bordure du thème */
    border-radius: var(--border-radius-base); /* Assurer l'arrondi du thème */
    padding: 8px 10px; /* Ajuster padding si besoin */
}

body.theme-hotlove #burger-menu-panel input[type="text"]::placeholder,
body.theme-hotlove #burger-menu-panel textarea::placeholder {
    color: var(--hl-velvet-black, #1B171A) !important; /* Placeholder sombre - FORCÉ */
    opacity: 0.6; /* Placeholder légèrement estompé */
}

/* Fin des Styles Spécifiques pour le Thème Rétro Vibes */

/* Correction pour le fond des barres de titre des widgets pour Rétro Vibes */
body.theme-retro-vibes .widget-titlebar {
    background: var(--widget-header-background); /* Appliquer le dégradé défini dans le thème */
    border-bottom: var(--widget-border-width, 3px) solid var(--widget-border-color, var(--retro-magenta)); /* Assurer une bordure cohérente */
}

/* Correction pour la couleur du titre des widgets pour Rétro Vibes */
body.theme-retro-vibes .widget-titlebar .widget-title {
    color: var(--widget-header-text-color); /* Utiliser la variable jaune définie */
    text-shadow: 1px 1px 0px var(--retro-black); /* Ajouter une ombre portée pour améliorer la lisibilité */
}

/* === Styles Spécifiques aux THÈMES pour le Menu Burger === */

/* --- Thème Neutre (styles par défaut via variables génériques) --- */
/* Pas de règles spécifiques nécessaires ici, car les variables de neutral_skin.css */
/* sont souvent utilisées comme fallbacks dans les règles générales ci-dessus. */

/* --- Thème Metal Gear Solid 1 --- */
body.theme-mgs1 #burger-menu-panel {
    /* Exemple: Fond légèrement différent, bordure codec */
    background: var(--mgs-deep-green, #1A2B20); 
    border-left: 2px solid var(--mgs-codec-blue, #60A0C0);
}
body.theme-mgs1 #burger-menu-panel.burger-panel-fullscreen {
    background: rgba(var(--mgs-near-black-rgb, 15,18,16), 0.97);
    border: 2px solid var(--mgs-codec-blue, #60A0C0);
}
body.theme-mgs1 #burger-menu-panel .menu-category {
    background: rgba(var(--mgs-olive-drab-rgb, 61,82,64), 0.7);
    border: 1px solid var(--mgs-medium-green, #5A7A5F);
    border-radius: 0; /* Style angulaire */
}
body.theme-mgs1 #burger-menu-panel h2, body.theme-mgs1 #burger-menu-panel h3 {
    color: var(--mgs-codec-text, #9DD8FF);
    font-family: var(--font-family-display, 'Orbitron'); 
    border-bottom-color: var(--mgs-medium-green, #5A7A5F);
}
body.theme-mgs1 #burger-menu-panel button {
    font-family: var(--main-font, sans-serif);
    /* Les couleurs/fonds sont gérés par les variables bouton MGS déjà définies */
}

/* --- Thème Cyberpunk --- */
body.theme-cyberpunk #burger-menu-panel {
    background: rgba(var(--cp-dark-purple-rgb, 24,8,32), 0.95);
    border-left: 1px solid var(--cp-neon-pink, #FF00FF);
}
body.theme-cyberpunk #burger-menu-panel.burger-panel-fullscreen {
     background: rgba(var(--cp-night-sky-rgb,10,15,26), 0.98);
     border: 1px solid var(--cp-electric-blue, #00BFFF);
}
body.theme-cyberpunk #burger-menu-panel .menu-category {
    background: rgba(var(--cp-dark-purple-rgb,24,8,32), 0.85);
    border: 1px solid var(--cp-cyber-purple, #9D00FF);
    border-radius: var(--border-radius-base, 1px);
}
body.theme-cyberpunk #burger-menu-panel h2, body.theme-cyberpunk #burger-menu-panel h3 {
    color: var(--cp-acid-yellow, #DFFF00);
    font-family: var(--cp-font-display, 'Rajdhani');
    text-shadow: var(--text-shadow-neon-pink, 0 0 5px var(--cp-neon-pink));
    border-bottom-color: var(--cp-cyber-purple, #9D00FF);
}
body.theme-cyberpunk #burger-menu-panel button {
    font-family: var(--cp-font-primary, sans-serif);
    /* Couleurs/fonds gérés par variables bouton CP */
}

/* --- Thème Hot Love --- */
body.theme-hotlove #burger-menu-panel {
    background: var(--hl-velvet-black, #1B171A);
    border-left: 2px solid var(--hl-rose-gold, #B76E79);
}
body.theme-hotlove #burger-menu-panel.burger-panel-fullscreen {
    background: var(--modal-background, rgba(27,23,26, 0.97)); /* Utilise le fond de modale Hot Love */
    border: 2px solid var(--modal-border-color, #FD3F92); /* Utilise la bordure de modale Hot Love (fuchsia) */
    border-radius: var(--border-radius-large, 25px) !important; /* FORCER l'arrondi large */
    box-shadow: var(--box-shadow-soft-diffuse, 0 10px 30px rgba(0,0,0,0.5)), 
                0 0 25px rgba(var(--hl-fuchsia-flash-rgb,253,63,146),0.4); /* Utilise l'ombre de modale Hot Love */
}
body.theme-hotlove #burger-menu-panel .menu-category {
    background: var(--widget-background, rgba(106,13,173,0.7)); /* Utilise le fond de widget Hot Love (aubergine) */
    border: 1px solid var(--widget-border-color, #B76E79); /* Utilise la bordure de widget Hot Love (rose gold) */
    border-radius: var(--border-radius-large, 25px) !important; /* FORCER l'arrondi large */
}
body.theme-hotlove #burger-menu-panel h2, 
body.theme-hotlove #burger-menu-panel h3,
body.theme-hotlove #burger-menu-panel .menu-category h3 /* Plus spécifique */
{
    color: var(--hl-fuchsia-flash, #FD3F92); /* Titres en fuchsia */
    font-family: var(--widget-title-font, serif); /* Police Dancing Script via variable */
    border-bottom-color: var(--hl-light-rose-gold, #DAB8BF); /* Bordure rose gold clair */
    text-shadow: var(--text-shadow-soft-glow, none); /* Appliquer l'ombre douce si définie */
}
body.theme-hotlove #burger-menu-panel.burger-panel-fullscreen h2 {
    /* Style spécifique pour le titre principal en fullscreen */
    color: var(--hl-primary-text, #F7E7CE) !important; /* Couleur texte principale */
    font-family: var(--hl-font-display, 'Playfair Display'); /* Police display si définie */
    font-size: 2em; /* Taille plus grande pour le titre principal */
    border-bottom: none !important; /* Pas de bordure pour titre principal */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* Ombre simple pour lisibilité */
}

/* Assurer que boutons et inputs dans le menu utilisent les variables Hot Love */
body.theme-hotlove #burger-menu-panel button,
body.theme-hotlove #burger-menu-panel .modal-button-action,
body.theme-hotlove #burger-menu-panel .modal-file-label {
    border-radius: var(--button-border-radius, 15px) !important; /* FORCER l'arrondi bouton Hot Love */
    /* Les couleurs/fonds devraient venir des variables --button-* du thème */
}

body.theme-hotlove #burger-menu-panel input[type="text"],
body.theme-hotlove #burger-menu-panel textarea {
    border-radius: var(--input-border-radius, 15px) !important; /* FORCER l'arrondi input Hot Love */
    /* Les couleurs/fonds devraient venir des variables --input-* du thème */
    /* Les corrections spécifiques pour placeholder/texte sombre sont déjà présentes plus bas */
}

/* --- Thème Windows 98 SE --- */
body.theme-w98se #burger-menu-panel {
    background: var(--w98-button-face, #C0C0C0);
    border-left: none; /* Pas de bordure gauche spécifique */
    box-shadow: none;
}
body.theme-w98se #burger-menu-panel.burger-panel-fullscreen {
    background: var(--w98-window-background, #C0C0C0);
    border: 2px outset var(--w98-button-highlight, #FFFFFF);
    border-radius: 0 !important;
}
body.theme-w98se #burger-menu-panel .menu-category {
    background: var(--w98-window-background, #C0C0C0);
    border: 1px solid var(--w98-text-black, #000000); /* Bordure simple */
    border-radius: 0 !important;
    box-shadow: none;
}
body.theme-w98se #burger-menu-panel h2, body.theme-w98se #burger-menu-panel h3 {
    color: var(--w98-text-black, #000000);
    font-family: var(--w98-font-primary, Tahoma);
    font-weight: bold;
    border-bottom-color: var(--w98-button-shadow, #808080);
}
/* Les boutons/inputs utilisent déjà les styles W98 génériques */

/* --- Thème Gnome 46 --- */
body.theme-gnome46 #burger-menu-panel {
    background: var(--gnome-base-color, #f6f5f4);
    border-left-color: var(--gnome-border-color, #c2c2c2);
}
body.theme-gnome46 #burger-menu-panel.burger-panel-fullscreen {
    background: var(--widget-background, #ffffff);
    border: 1px solid var(--widget-border-color, #b0b0b0);
    border-radius: var(--border-radius-large, 12px) !important;
    box-shadow: var(--box-shadow-dialog, 0 4px 12px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.05)) !important;
}
body.theme-gnome46 #burger-menu-panel .menu-category {
    background: var(--gnome-base-color, #f6f5f4);
    border: 1px solid var(--gnome-border-color, #c2c2c2);
    border-radius: var(--border-radius-base, 6px) !important;
    box-shadow: none;
}
body.theme-gnome46 #burger-menu-panel h2, body.theme-gnome46 #burger-menu-panel h3 {
    color: var(--gnome-text-primary, #2e3436);
    font-family: var(--gnome-font-primary, 'Noto Sans');
    font-weight: 500;
    border-bottom-color: var(--gnome-border-color, #c2c2c2);
}
/* Les boutons/inputs devraient hériter correctement des styles Adwaita via variables */

/* --- Thème Rétro Vibes --- */
body.theme-retro-vibes #burger-menu-panel {
    background: var(--retro-black, #0A0A0A);
    border-left: 2px solid var(--retro-cyan, #00FFFF);
}
body.theme-retro-vibes #burger-menu-panel.burger-panel-fullscreen {
    background: rgba(var(--retro-charcoal-rgb, 28,28,28), 0.98);
    border: 2px solid var(--retro-magenta, #FF00FF);
    border-radius: 0 !important;
}
body.theme-retro-vibes #burger-menu-panel .menu-category {
    background: rgba(var(--retro-purple-rgb, 61,31,79), 0.7);
    border: 1px solid var(--retro-cyan, #00FFFF);
    border-radius: 0 !important;
}
body.theme-retro-vibes #burger-menu-panel h2, 
body.theme-retro-vibes #burger-menu-panel h3,
body.theme-retro-vibes #burger-menu-panel .menu-category h3 /* Assurer la priorité */
{
    color: var(--retro-yellow, #FFFF00);
    font-family: var(--font-display, 'Press Start 2P'); 
    text-shadow: 1px 1px 0px var(--retro-black);
    border-bottom-color: var(--retro-magenta, #FF00FF);
}
body.theme-retro-vibes #burger-menu-panel button {
    /* Utilise déjà les variables bouton rétro */
}
body.theme-retro-vibes #burger-menu-panel input[type="text"],
body.theme-retro-vibes #burger-menu-panel textarea {
    /* Utilise déjà les variables input rétro */
}

/* === FIN Styles Spécifiques Thèmes Menu Burger === */

/* Correction pour le fond des barres de titre des widgets pour Rétro Vibes */
/* ... existing code ... */

/* Styles spécifiques pour les widgets avec le thème Rétro Vibes */
body.theme-retro-vibes .widget {
    /* Les variables de Retro_Vibes.css s'appliquent déjà. */
    /* Appliquer la bordure standard en utilisant les variables du thème */
    border: var(--widget-border-width, 3px) var(--widget-border-style, solid) var(--widget-border-color, var(--retro-cyan)); 
    /* Retirer l'ancienne simulation de bordure via box-shadow */
    box-shadow: var(--widget-shadow, 0 0 10px var(--retro-cyan)); /* Garder seulement la lueur */
    background-clip: padding-box; /* Important pour les box-shadow inset avec padding, moins pertinent pour border mais ne gêne pas */
}

/* === Styles Spécifiques au Thème DEEP SPACE EXPLORER === */

@keyframes move-stars {
    from { background-position: 0 0; }
    to { background-position: -10000px 5000px; } /* Déplacement lent et diagonal */
}

body.theme-deep-space::before {
    content: '';
    position: fixed;
    top: 0; left: 0; width: 200%; height: 200%; /* Agrandir pour l'animation */
    z-index: -2;
    background-image: 
        radial-gradient(1px 1px at 20px 30px, var(--dse-star-color-1, white), transparent), 
        radial-gradient(1px 1px at 40px 70px, var(--dse-star-color-2, grey), transparent), 
        radial-gradient(1px 1px at 50px 160px, var(--dse-star-color-1, white), transparent), 
        radial-gradient(2px 2px at 90px 40px, var(--dse-star-color-1, white), transparent), 
        radial-gradient(1.5px 1.5px at 130px 80px, var(--dse-star-color-2, grey), transparent), 
        radial-gradient(1px 1px at 160px 120px, var(--dse-star-color-1, white), transparent); 
    background-repeat: repeat;
    background-size: 200px 200px; /* Taille du motif d'étoiles */
    opacity: 0.5; /* Ajuster l'opacité */
    animation: move-stars var(--dse-star-speed, 60s) linear infinite;
    will-change: background-position; /* Optimisation */
}

/* Styles des widgets DSE */
body.theme-deep-space .widget {
    background-color: rgba(var(--dse-dark-panel-rgb, 17, 24, 45), 0.85); /* Fond panneau un peu transparent */
    border: 1px solid var(--widget-border-color, var(--dse-metallic-grey));
    box-shadow: var(--widget-shadow, 0 0 8px rgba(var(--dse-engine-cyan-rgb), 0.5)),
                inset 0 0 10px rgba(var(--dse-deep-space-blue-rgb, 5, 8, 24), 0.4); /* Ombre interne sombre */
    border-radius: var(--widget-border-radius, 4px);
    position: relative; /* Pour pseudo-éléments si besoin */
}

/* Effet de grille fine sur le fond du contenu des widgets */
body.theme-deep-space .widget-content::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: linear-gradient(var(--dse-widget-grid-color, transparent) 1px, transparent 1px),
                      linear-gradient(90deg, var(--dse-widget-grid-color, transparent) 1px, transparent 1px);
    background-size: 15px 15px;
    opacity: 0.5;
    pointer-events: none;
    z-index: 0; /* Derrière le contenu réel */
}

body.theme-deep-space .widget-content {
    position: relative; /* Contexte pour le ::before */
    background-color: transparent; /* Le fond est sur .widget */
    z-index: 1; /* Contenu au-dessus de la grille ::before */
}

body.theme-deep-space .widget-titlebar {
    background: var(--widget-header-background, linear-gradient(to right, #3a4158, #11182d));
    color: var(--widget-header-text-color, var(--dse-engine-cyan));
    font-family: var(--widget-title-font, 'Orbitron');
    border-bottom: 1px solid var(--widget-border-color, var(--dse-metallic-grey));
    border-radius: var(--widget-border-radius, 4px) var(--widget-border-radius, 4px) 0 0;
    text-shadow: 0 0 3px var(--widget-header-text-color, var(--dse-engine-cyan));
}

body.theme-deep-space .widget-titlebar .widget-title {
     color: var(--widget-header-text-color, var(--dse-engine-cyan)); /* Assurer la bonne couleur */
     text-shadow: inherit;
}

body.theme-deep-space .widget-controls button {
    color: var(--dse-hud-grey, #A0B0C8);
    background-color: rgba(var(--dse-deep-space-blue-rgb, 5, 8, 24), 0.3);
    border: 1px solid var(--dse-metallic-grey, #3a4158);
    border-radius: 2px;
}

body.theme-deep-space .widget-controls button:hover {
    color: var(--dse-engine-cyan, #00FFFF);
    border-color: var(--dse-engine-cyan, #00FFFF);
    background-color: rgba(var(--dse-engine-cyan-rgb, 0, 255, 255), 0.1);
    box-shadow: 0 0 5px var(--dse-engine-cyan, #00FFFF);
}

/* Menu Burger DSE */
body.theme-deep-space #burger-menu-panel {
    border-left-color: var(--dse-engine-cyan);
}

body.theme-deep-space #burger-menu-panel.burger-panel-fullscreen {
    background: rgba(var(--dse-deep-space-blue-rgb, 5, 8, 24), 0.96);
    border: 1px solid var(--dse-engine-cyan);
    box-shadow: 0 0 25px rgba(var(--dse-engine-cyan-rgb), 0.4);
    border-radius: 8px;
}

body.theme-deep-space #burger-menu-panel .menu-category {
    background: rgba(var(--dse-dark-panel-rgb, 17, 24, 45), 0.8);
    border: 1px solid var(--dse-metallic-grey);
    border-radius: var(--border-radius, 4px);
}

body.theme-deep-space #burger-menu-panel h2, 
body.theme-deep-space #burger-menu-panel h3,
body.theme-deep-space #burger-menu-panel .menu-category h3 {
    color: var(--accent-color-secondary, var(--dse-alert-orange)); /* Titres menu en orange */
    font-family: var(--font-display, 'Orbitron'); 
    text-shadow: 0 0 4px var(--accent-color-secondary, var(--dse-alert-orange));
    border-bottom-color: var(--dse-metallic-grey);
}

body.theme-deep-space #burger-menu-panel.burger-panel-fullscreen h2 {
    color: var(--text-color, var(--dse-star-white)) !important; /* Titre principal en blanc */
    text-shadow: 0 0 5px var(--text-color, var(--dse-star-white));
}

/* === FIN Styles Spécifiques Thème DEEP SPACE EXPLORER === */

/* ... existing code ... */

/* === Styles Spécifiques au Thème DIGITAL SENTINEL === */

@keyframes digital-scanline {
    0% { background-position: 0 0; }
    100% { background-position: 0 100px; } /* Défilement vertical */
}

body.theme-digital-sentinel::before {
    content: '';
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: -2; /* Derrière le contenu et le wallpaper */
    background-image: repeating-linear-gradient(
        transparent 0px,
        transparent 2px,
        var(--ds-scanline-color, rgba(0, 255, 65, 0.1)) 3px, 
        var(--ds-scanline-color, rgba(0, 255, 65, 0.1)) 4px
    );
    background-size: 100% 4px;
    opacity: 0.6;
    animation: digital-scanline 3s linear infinite; /* Animation de défilement */
    will-change: background-position;
    pointer-events: none;
}

/* Styles des widgets DS */
body.theme-digital-sentinel .widget {
    background-color: var(--widget-background, var(--ds-dark-grey));
    border: var(--widget-border-width, 1px) solid var(--widget-border-color, var(--ds-matrix-green));
    box-shadow: var(--widget-shadow, 0 0 5px rgba(var(--ds-matrix-green-rgb), 0.6));
    border-radius: var(--widget-border-radius, 0px);
    clip-path: none; /* Assurer pas de clip-path */
}

body.theme-digital-sentinel .widget-titlebar {
    background: var(--widget-header-background, var(--ds-medium-grey));
    color: var(--widget-header-text-color, var(--ds-pure-white));
    font-family: var(--widget-title-font, 'Share Tech Mono');
    border-bottom: 1px solid var(--widget-border-color, var(--ds-matrix-green));
    border-radius: 0;
    padding: 4px 8px; /* Padding réduit */
    height: 22px; /* Hauteur fixe plus petite */
    align-items: center;
}

body.theme-digital-sentinel .widget-titlebar .widget-title {
    color: inherit;
    font-size: 0.9em;
    text-shadow: none; /* Pas d'ombre sur le titre blanc */
    letter-spacing: 1px;
}

body.theme-digital-sentinel .widget-controls button {
    color: var(--ds-matrix-green);
    background: transparent;
    border: 1px solid transparent;
    font-size: 1.1em; /* Taille pour les icônes 🎨 _ X */
    padding: 0 3px;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
}

body.theme-digital-sentinel .widget-controls button:hover {
    color: var(--ds-hal-red);
    border-color: var(--ds-hal-red);
    background-color: rgba(var(--ds-hal-red-rgb), 0.1);
    box-shadow: 0 0 4px var(--ds-hal-red);
}

/* Effet HAL pour bouton Fermer ? */
body.theme-digital-sentinel .widget-controls button.widget-btn-close {
     /* color: var(--ds-hal-red); */ /* Optionnel: toujours rouge */
     /* animation: hal-pulse 2s infinite alternate; */ /* Optionnel: pulsation */
}

@keyframes hal-pulse {
    from { box-shadow: 0 0 3px var(--ds-hal-red); }
    to { box-shadow: 0 0 8px var(--ds-hal-red); }
}

/* Menu Burger DS */
body.theme-digital-sentinel #burger-menu-panel {
    background-color: var(--secondary-background, var(--ds-dark-grey));
    border-left: 1px solid var(--ds-matrix-green);
}

body.theme-digital-sentinel #burger-menu-panel.burger-panel-fullscreen {
    background: rgba(0,0,0,0.97); /* Presque noir opaque */
    border: 1px solid var(--ds-matrix-green);
    border-radius: 0;
}

body.theme-digital-sentinel #burger-menu-panel .menu-category {
    background: var(--ds-dark-grey);
    border: 1px solid var(--ds-medium-grey);
    border-radius: 0;
}

body.theme-digital-sentinel #burger-menu-panel h2, 
body.theme-digital-sentinel #burger-menu-panel h3,
body.theme-digital-sentinel #burger-menu-panel .menu-category h3 {
    color: var(--ds-pure-white); /* Titres menu en blanc */
    font-family: var(--font-display, 'Share Tech Mono'); 
    text-shadow: 0 0 3px var(--ds-pure-white);
    border-bottom-color: var(--ds-light-grey);
    letter-spacing: 2px;
}

body.theme-digital-sentinel #burger-menu-panel button {
    /* Style bouton du thème est déjà appliqué via variables */
}

body.theme-digital-sentinel #burger-menu-panel input[type="text"],
body.theme-digital-sentinel #burger-menu-panel textarea {
    /* Style input du thème est déjà appliqué via variables */
    background: rgba(0,0,0,0.5); /* Fond input un peu transparent */
}

/* === FIN Styles Spécifiques Thème DIGITAL SENTINEL === */

/* ... existing code ... */

/* === Amélioration de la modale Choisir un fond === */
#widget-bg-modal .modal-content {
    /* On ne force plus le background ni la couleur, on laisse le thème gérer */
    border-radius: var(--border-radius-large, 16px);
    border: 1.5px solid var(--modal-border-color, var(--border-color, #888));
    padding: 32px 24px 24px 24px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    font-family: inherit;
}

#widget-bg-modal h2 {
    font-size: 1.6em;
    margin-bottom: 18px;
    letter-spacing: 1px;
    text-transform: none;
}

#widget-bg-modal h3 {
    font-size: 1.1em;
    margin: 18px 0 8px 0;
    text-transform: none;
    letter-spacing: 0.5px;
}

#widget-bg-modal input[type="file"] {
    display: none;
}

#widget-bg-modal .modal-file-label {
    display: inline-block;
    background: var(--button-background, #444);
    color: var(--button-text-color, #fff);
    border: 1px solid var(--button-border-color, #888);
    border-radius: 6px;
    padding: 6px 16px;
    cursor: pointer;
    margin-bottom: 8px;
    margin-right: 10px;
    font-size: 1em;
}

#widget-bg-modal .gradient-presets,
#widget-bg-modal .color-presets,
#widget-bg-modal .grid-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
    align-items: center;
}

#widget-bg-modal .preset-item,
#widget-bg-modal .grid-pattern {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    border: 1.5px solid #444;
    background: #222;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}

#widget-bg-modal .grid-pattern:hover,
#widget-bg-modal .preset-item:hover {
    border: 2px solid var(--accent-color, #00fff0);
    box-shadow: 0 0 8px var(--accent-color, #00fff0);
}

/* Aperçus de grilles animées */
.grid-fine-lines { background-image: repeating-linear-gradient(0deg, #888 0, #888 1px, transparent 1px, transparent 8px); }
.grid-dots { background-image: radial-gradient(#888 1.5px, transparent 2px); background-size: 10px 10px; }
.grid-cross { background-image: repeating-linear-gradient(0deg, #888 0, #888 1px, transparent 1px, transparent 8px), repeating-linear-gradient(90deg, #888 0, #888 1px, transparent 1px, transparent 8px); }
.grid-waves { background-image: url('data:image/svg+xml;utf8,<svg width="48" height="48" xmlns="http://www.w3.org/2000/svg"><path d="M0 24 Q12 0 24 24 T48 24" stroke="%23888" fill="none"/></svg>'); }
.grid-hex { background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><polygon points="12,2 22,7 22,17 12,22 2,17 2,7" stroke="%23888" fill="none"/></svg>'); }
.grid-mesh { background-image: repeating-linear-gradient(0deg, #888 0, #888 1px, transparent 1px, transparent 8px), repeating-linear-gradient(90deg, #888 0, #888 1px, transparent 1px, transparent 8px); }
.grid-circles { background-image: radial-gradient(circle, #888 1.5px, transparent 2px); background-size: 16px 16px; }
.grid-diagonal { background-image: repeating-linear-gradient(45deg, #888 0, #888 1px, transparent 1px, transparent 8px); }
.grid-pixels { background-image: repeating-linear-gradient(0deg, #888 0, #888 2px, transparent 2px, transparent 8px), repeating-linear-gradient(90deg, #888 0, #888 2px, transparent 2px, transparent 8px); }
.grid-rings { background-image: repeating-radial-gradient(circle, #888 1.5px, transparent 2px); background-size: 20px 20px; }

#widget-bg-modal .grid-presets label {
    display: block;
    text-align: center;
    font-size: 0.8em;
    color: #bbb;
    margin-top: 2px;
}

/* Fin amélioration modale choisir un fond */

#widget-bg-modal .color-swatch {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    border: 1.5px solid #444;
    background: #222;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border 0.2s, box-shadow 0.2s;
    margin-right: 6px;
    margin-bottom: 6px;
}
#widget-bg-modal .color-swatch:hover {
    border: 2px solid var(--accent-color, #00fff0);
    box-shadow: 0 0 8px var(--accent-color, #00fff0);
}

#widget-bg-modal .grid-pattern {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    border: 1.5px solid #444;
    /* background: none !important;  SUPPRIMÉ pour ne pas écraser les motifs */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border 0.2s, box-shadow 0.2s;
    margin-right: 6px;
    margin-bottom: 6px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
#widget-bg-modal .grid-pattern:hover {
    border: 2px solid var(--accent-color, #00fff0);
    box-shadow: 0 0 8px var(--accent-color, #00fff0);
}

/* Forcer l'affichage des motifs de grille */
.grid-fine-lines { background-image: repeating-linear-gradient(0deg, #888 0, #888 1px, transparent 1px, transparent 8px) !important; }
.grid-dots { background-image: radial-gradient(#888 1.5px, transparent 2px) !important; background-size: 10px 10px !important; }
.grid-cross { background-image: repeating-linear-gradient(0deg, #888 0, #888 1px, transparent 1px, transparent 8px), repeating-linear-gradient(90deg, #888 0, #888 1px, transparent 1px, transparent 8px) !important; }
.grid-waves { background-image: url('data:image/svg+xml;utf8,<svg width="48" height="48" xmlns="http://www.w3.org/2000/svg"><path d="M0 24 Q12 0 24 24 T48 24" stroke="%23888" fill="none"/></svg>') !important; }
.grid-hex { background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><polygon points="12,2 22,7 22,17 12,22 2,17 2,7" stroke="%23888" fill="none"/></svg>') !important; }
.grid-mesh { background-image: repeating-linear-gradient(0deg, #888 0, #888 1px, transparent 1px, transparent 8px), repeating-linear-gradient(90deg, #888 0, #888 1px, transparent 1px, transparent 8px) !important; }
.grid-circles { background-image: radial-gradient(circle, #888 1.5px, transparent 2px) !important; background-size: 16px 16px !important; }
.grid-diagonal { background-image: repeating-linear-gradient(45deg, #888 0, #888 1px, transparent 1px, transparent 8px) !important; }
.grid-pixels { background-image: repeating-linear-gradient(0deg, #888 0, #888 2px, transparent 2px, transparent 8px), repeating-linear-gradient(90deg, #888 0, #888 2px, transparent 2px, transparent 8px) !important; }
.grid-rings { background-image: repeating-radial-gradient(circle, #888 1.5px, transparent 2px) !important; background-size: 20px 20px !important; }

/* Dégradés animés pour la modale Choisir un fond */
.bg-anim-1 {
    background: linear-gradient(135deg, #ff00cc, #3333ff);
    background-size: 200% 200%;
    animation: gradientMove1 3s linear infinite alternate;
}
@keyframes gradientMove1 {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

.bg-anim-2 {
    background: linear-gradient(90deg, #00ff99, #00ccff, #ffcc00);
    background-size: 200% 200%;
    animation: gradientMove2 4s ease-in-out infinite alternate;
}
@keyframes gradientMove2 {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

.bg-anim-3 {
    background: linear-gradient(45deg, #ff0000, #ffff00, #00ff00);
    background-size: 200% 200%;
    animation: gradientMove3 5s ease-in-out infinite alternate;
}
@keyframes gradientMove3 {
    0% { background-position: 0% 100%; }
    100% { background-position: 100% 0%; }
}

.bg-anim-4 {
    background: linear-gradient(120deg, #00c3ff, #ffff1c, #ff1c68);
    background-size: 200% 200%;
    animation: gradientMove4 3.5s linear infinite alternate;
}
@keyframes gradientMove4 {
    0% { background-position: 100% 0%; }
    100% { background-position: 0% 100%; }
}

.bg-anim-5 {
    background: linear-gradient(60deg, #8e2de2, #4a00e0, #00c6ff);
    background-size: 200% 200%;
    animation: gradientMove5 4.5s linear infinite alternate;
}
@keyframes gradientMove5 {
    0% { background-position: 50% 0%; }
    100% { background-position: 50% 100%; }
}

.bg-anim-6 {
    background: linear-gradient(90deg, #f7971e, #ffd200, #21d4fd);
    background-size: 200% 200%;
    animation: gradientMove6 4s linear infinite alternate;
}
@keyframes gradientMove6 {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

.bg-anim-7 {
    background: linear-gradient(135deg, #fc466b, #3f5efb);
    background-size: 200% 200%;
    animation: gradientMove7 3.2s linear infinite alternate;
}
@keyframes gradientMove7 {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

.bg-anim-8 {
    background: linear-gradient(45deg, #11998e, #38ef7d);
    background-size: 200% 200%;
    animation: gradientMove8 3.8s linear infinite alternate;
}
@keyframes gradientMove8 {
    0% { background-position: 100% 0%; }
    100% { background-position: 0% 100%; }
}

.bg-anim-9 {
    background: linear-gradient(120deg, #ee0979, #ff6a00);
    background-size: 200% 200%;
    animation: gradientMove9 4.2s linear infinite alternate;
}
@keyframes gradientMove9 {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

.bg-anim-10 {
    background: linear-gradient(60deg, #43cea2, #185a9d);
    background-size: 200% 200%;
    animation: gradientMove10 4.8s linear infinite alternate;
}
@keyframes gradientMove10 {
    0% { background-position: 50% 0%; }
    100% { background-position: 50% 100%; }
}

#widget-bg-modal .preset-item {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    border: 1.5px solid #444;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border 0.2s, box-shadow 0.2s;
    margin-right: 6px;
    margin-bottom: 6px;
    /* Pas de background ici pour ne pas écraser le dégradé animé */
}
#widget-bg-modal .preset-item:hover {
    border: 2px solid var(--accent-color, #00fff0);
    box-shadow: 0 0 8px var(--accent-color, #00fff0);
}

#widget-bg-modal .preset-item[class*="bg-anim-"] {
    background-size: 200% 200% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-color: transparent !important;
}

#widget-bg-modal .preset-item.bg-anim-1 { background-image: linear-gradient(135deg, #ff00cc, #3333ff) !important; }
#widget-bg-modal .preset-item.bg-anim-2 { background-image: linear-gradient(90deg, #00ff99, #00ccff, #ffcc00) !important; }
#widget-bg-modal .preset-item.bg-anim-3 { background-image: linear-gradient(45deg, #ff0000, #ffff00, #00ff00) !important; }
#widget-bg-modal .preset-item.bg-anim-4 { background-image: linear-gradient(120deg, #00c3ff, #ffff1c, #ff1c68) !important; }
#widget-bg-modal .preset-item.bg-anim-5 { background-image: linear-gradient(60deg, #8e2de2, #4a00e0, #00c6ff) !important; }
#widget-bg-modal .preset-item.bg-anim-6 { background-image: linear-gradient(90deg, #f7971e, #ffd200, #21d4fd) !important; }
#widget-bg-modal .preset-item.bg-anim-7 { background-image: linear-gradient(135deg, #fc466b, #3f5efb) !important; }
#widget-bg-modal .preset-item.bg-anim-8 { background-image: linear-gradient(45deg, #11998e, #38ef7d) !important; }
#widget-bg-modal .preset-item.bg-anim-9 { background-image: linear-gradient(120deg, #ee0979, #ff6a00) !important; }
#widget-bg-modal .preset-item.bg-anim-10 { background-image: linear-gradient(60deg, #43cea2, #185a9d) !important; }

/* ===== ANNOTATIONS ALPHA - LIMITATIONS ===== */

/* Notice de limitation Alpha */
.alpha-limitation-notice {
    background: linear-gradient(135deg, rgba(230, 126, 34, 0.2) 0%, rgba(231, 76, 60, 0.2) 100%);
    border: 2px solid #e67e22;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    position: relative;
    overflow: hidden;
}

.alpha-limitation-notice::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #e67e22, #e74c3c, #f39c12);
    animation: alpha-gradient-slide 3s ease-in-out infinite;
}

@keyframes alpha-gradient-slide {
    0%, 100% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
}

.alpha-limitation-notice.compact {
    padding: 8px;
    margin-bottom: 8px;
    flex-direction: column;
    gap: 6px;
}

.alpha-limitation-notice.compact .alpha-text {
    flex-direction: column;
    gap: 4px;
}

.alpha-icon {
    font-size: 1.2em;
    color: #e67e22;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    animation: alpha-pulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes alpha-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

.alpha-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.alpha-title {
    font-weight: bold;
    color: #e67e22;
    font-size: 0.9em;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

.alpha-description {
    font-size: 0.8em;
    color: #666;
    line-height: 1.3;
}

/* Contenu mockup/démonstration */
.alpha-mock-content {
    opacity: 0.6;
    filter: grayscale(20%);
    pointer-events: none;
    position: relative;
}

.alpha-mock-content::after {
    content: 'DÉMO';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    background: rgba(230, 126, 34, 0.8);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.7em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    z-index: 10;
}

.alpha-mock {
    opacity: 0.7;
    filter: grayscale(30%);
}

/* Boutons désactivés Alpha */
.alpha-disabled {
    opacity: 0.4;
    cursor: not-allowed !important;
    filter: grayscale(50%);
    position: relative;
}

.alpha-disabled::after {
    content: '🔒';
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 0.7em;
    opacity: 0.8;
}

/* Styles spécifiques aux widgets mockés */
.mock-timer {
    font-size: 2em;
    font-weight: bold;
    text-align: center;
    color: #666;
    margin: 10px 0;
    font-family: 'Courier New', monospace;
}

.mock-splits {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 10px;
}

.mock-split {
    padding: 4px 8px;
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
    font-size: 0.8em;
    color: #888;
    font-family: 'Courier New', monospace;
}

.screen-mock-content {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.screen-placeholder {
    text-align: center;
    color: #666;
    font-size: 1.1em;
}

/* Guide d'introduction amélioré */
.intro-guide-enhanced .intro-steps {
    margin-top: 15px;
}

.intro-step.enhanced {
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.1) 0%, rgba(46, 204, 113, 0.1) 100%);
    border-left: 4px solid #3498db;
    padding: 15px;
    margin-bottom: 12px;
    border-radius: 0 8px 8px 0;
    transition: all 0.3s ease;
}

.intro-step.enhanced:hover {
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.15) 0%, rgba(46, 204, 113, 0.15) 100%);
    border-left-color: #2ecc71;
    transform: translateX(5px);
}

.intro-step.enhanced .step-number {
    background: linear-gradient(135deg, #3498db, #2ecc71);
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.9em;
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
}

.intro-step.enhanced .step-content {
    flex: 1;
    margin-left: 15px;
}

.step-details {
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.05);
    border-radius: 6px;
    font-size: 0.85em;
    line-height: 1.4;
    border-left: 3px solid rgba(52, 152, 219, 0.3);
}

.step-details code {
    background: rgba(0,0,0,0.2);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    color: #9146ff;
}

/* Badges de version */
.version-badge {
    display: inline-block;
    background: linear-gradient(135deg, #e67e22, #f39c12);
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.7em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    margin-left: auto;
    margin-right: 10px;
}

.version-badge.alpha {
    background: linear-gradient(135deg, #e67e22, #e74c3c);
}

.version-badge.complete {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
}

/* Animations pour attirer l'attention */
@keyframes alpha-attention {
    0%, 100% { box-shadow: 0 0 0 0 rgba(230, 126, 34, 0.4); }
    50% { box-shadow: 0 0 0 10px rgba(230, 126, 34, 0); }
}

.alpha-limitation-notice:hover {
    animation: alpha-attention 1.5s ease-in-out;
}

/* Animation d'apparition */
.alpha-limitation-notice {
    animation: alpha-slide-in 0.6s ease-out;
}

@keyframes alpha-slide-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}