:root {
    --salam-pink: #E91E63;
    --salam-navy: #1A237E;
    --salam-dark: #0A0F29;
}

/* CONTAINER PRINCIPAL FIXÉ */
#salam-player-container {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 90px !important; /* Hauteur bloquée */
    background: var(--salam-dark);
    color: white;
    z-index: 99999 !important;
    border-top: 3px solid var(--salam-pink);
    font-family: 'Segoe UI', Arial, sans-serif;
    box-sizing: border-box !important;
}

.salam-player-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    height: 100%;
}

/* GAUCHE */
.salam-left { display: flex; align-items: center; width: 25%; overflow: hidden; }
.salam-mini-logo { height: 50px; margin-right: 12px; border-radius: 5px; }
.salam-live-label { display: block; color: var(--salam-pink); font-size: 0.7rem; font-weight: bold; }
#salam-track-title { font-weight: bold; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* CENTRE */
.salam-center { width: 50%; display: flex; flex-direction: column; align-items: center; gap: 6px; }

.salam-inline-ticker {
    display: flex; background: rgba(233, 30, 99, 0.1);
    border-radius: 20px; padding: 2px 15px; width: 100%; align-items: center;
}
.ticker-prefix { color: var(--salam-pink); font-weight: bold; font-size: 0.7rem; margin-right: 10px; }
.ticker-window { overflow: hidden; width: 100%; position: relative; }
.ticker-track { white-space: nowrap; animation: salamScroll 30s linear infinite; font-size: 0.8rem; }

.salam-socials { display: flex; align-items: center; gap: 12px; }
.salam-socials a { color: white; transition: 0.3s; display: flex; }
.salam-socials a:hover { color: var(--salam-pink); transform: translateY(-2px); }
.svg-social { width: 18px; height: 18px; fill: currentColor; }
.dashicons { font-size: 20px; width: 20px; height: 20px; }

#open-dedicace {
    background: var(--salam-pink); border: none; color: white;
    font-size: 0.6rem; font-weight: bold; padding: 3px 10px;
    border-radius: 15px; cursor: pointer; margin-left: 10px;
}

/* DROITE */
.salam-right { width: 25%; display: flex; justify-content: flex-end; }
.play-pause-btn {
    background: var(--salam-pink); border: none; width: 50px; height: 50px;
    border-radius: 50%; cursor: pointer; fill: white; display: flex;
    align-items: center; justify-content: center;
}

/* MODAL (FIXÉ ET INDÉPENDANT) */
#dedicace-modal {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100vw !important; height: 100vh !important;
    background: rgba(0,0,0,0.85);
    z-index: 1000000 !important;
    display: none; align-items: center; justify-content: center;
}
.modal-content {
    background: var(--salam-navy); padding: 30px; border-radius: 15px;
    width: 90%; max-width: 400px; border: 2px solid var(--salam-pink);
    text-align: center;
}

/* FIX COULEUR TEXTE INPUTS */
.modal-content input, .modal-content textarea,
.salam-form-page input, .salam-form-page textarea {
    width: 100% !important; margin-bottom: 10px !important;
    padding: 10px !important; border-radius: 5px !important; border: none !important;
    background: #FFFFFF !important; color: #000000 !important; /* Texte noir sur blanc */
}

.salam-btn-pink { background: var(--salam-pink); color: white; border: none; padding: 12px; width: 100%; border-radius: 5px; cursor: pointer; font-weight: bold; }
#close-modal { background: none; border: none; color: #ccc; margin-top: 10px; cursor: pointer; font-size: 0.8rem; }
.emoji-bar { margin-bottom: 10px; }
.emoji-btn { font-size: 1.5rem; cursor: pointer; margin: 0 5px; }

@keyframes salamScroll { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }

@media (max-width: 800px) { .salam-center { display: none; } .salam-left { width: 70%; } .salam-right { width: 30%; } }