/* Arrière-plan avec flou optimisé */
body::before { 
    content: ""; 
    position: fixed; 
    opacity: .4; 
    inset: 0; 
    z-index: -1; 
    background: url("background.webp") center center / cover no-repeat; 
    filter: blur(8px); 
}

/* Style spécifique pour tes titres H2 (FAQ) */
h2 { 
    color: #0077B5 !important; /* Bleu LinkedIn */
    font-weight: bold !important; 
    font-size: 11pt !important; 
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

/* Petit texte sous le titre principal */
h1 small { 
    color: #889; 
}

/* Gestion du placeholder de l'éditeur de texte */
#editor:empty:before { 
    content: attr(data-placeholder); 
    color: #94a3b8; 
}

/* Animation et style du Toast (notification de copie) */
.toast { 
    visibility: hidden; 
    opacity: 0; 
    transform: translate(-50%, -20px); 
    transition: all 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28); 
    position: fixed; 
    top: 2rem; 
    left: 50%; 
    background: #0f172a; 
    color: white; 
    padding: 0.75rem 2rem; 
    border-radius: 9999px; 
    z-index: 100; 
    font-weight: bold; 
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.toast.show { 
    visibility: visible; 
    opacity: 1; 
    transform: translate(-50%, 0); 
}

/* Simulation du "Voir plus" LinkedIn (tronquage à 3 lignes) */
.li-truncated { 
    display: -webkit-box; 
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical; 
    overflow: hidden; 
}

/* Personnalisation de la barre de défilement de la liste d'emojis */
#emoji-list::-webkit-scrollbar { 
    width: 6px; 
}
#emoji-list::-webkit-scrollbar-track { 
    background: transparent; 
}
#emoji-list::-webkit-scrollbar-thumb { 
    background: #cbd5e1; 
    border-radius: 10px; 
}
#emoji-list::-webkit-scrollbar-thumb:hover { 
    background: #94a3b8; 
}

/* Utilitaires pour l'éditeur */
#editor {
    min-height: 200px;
}