/* =================================================================
   Thème Nouvel An - Kawtar Beauty (Gala Chic & Feux d'artifice)
   ==================================================================== */

:root {
    --color-primary: hsl(43, 65%, 52%);
    --color-nye-gold: #e5c158;
    --color-nye-silver: #d1d5db;
    --color-nye-border: #3f3a2a;
    --card-dark: #131317;
}

body {
    background-color: var(--card-dark) !important;
}

/* Titre Hero : Fond noir de jais, bordures dorées et texte en dégradé Or & Argent */
.hero-banner h1 {
    background: #050507 !important;
    border-top: 1px solid rgba(229, 193, 88, .6) !important;
    border-bottom: 1px solid rgba(209, 213, 219, .6) !important;
    padding: 25px 20px !important;
    margin-inline: auto !important;
    width: max-content !important;
    max-width: 90% !important;
}

.hero-banner h1 span, .hero-banner h1 {
    background: linear-gradient(135deg, var(--color-nye-gold), var(--color-nye-silver)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

.nye-gold-silver-text {
    background: linear-gradient(135deg, var(--color-nye-gold), var(--color-nye-silver)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* Boutons principaux unifiés Or & Argent */
.btn-admin-primary, .btn-primary, button[type="submit"], .btn-gold {
    background: linear-gradient(135deg, var(--color-nye-gold), var(--color-nye-silver)) !important;
    border: none !important;
    color: #0b0b0d !important; /* Texte foncé contrasté sur le bouton brillant */
    box-shadow: 0 4px 20px rgba(229, 193, 88, 0.4) !important;
    font-weight: 600;
    transition: filter 0.3s ease, transform 0.3s ease;
}

.btn-admin-primary:hover, .btn-gold:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
}

/* Correction des icônes et textes à l'intérieur des boutons pour qu'ils restent bien visibles */
.btn-gold *, .btn-admin-primary *, .btn-primary *, button[type="submit"] * {
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    color: #0b0b0d !important;
}

.admin-card, .service-card, .card {
    background-color: var(--card-dark) !important;
    border-color: var(--color-nye-border) !important;
}

/* =================================================================
   ÉLÉMENT VISUEL UNIQUE : La Bannière "Compte à Rebours Festif" (Fixe en haut)
   ==================================================================== */

.nye-banner-header {
    background: linear-gradient(90deg, #131317, #1f1b10, #131317);
    border-bottom: 1px solid rgba(229, 193, 88, 0.3);
    text-align: center;
    padding: 10px 15px;
    font-family: var(--font-accent, serif);
    font-size: 0.95rem;
    letter-spacing: 2px;
    color: var(--color-nye-gold);
    z-index: 997;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

/* =================================================================
   ANIMATION D'ARRIÈRE-PLAN : Feux d'artifice et Éclats de Champagne
   ==================================================================== */

.nye-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 9999;
}

/* Éclats lumineux et étoiles scintillantes */
.sparkle-particle {
    position: absolute;
    top: -20px;
    font-size: var(--sparkle-size, 14px);
    color: var(--sparkle-color, #e5c158);
    user-select: none;
    animation: sparkleFall linear infinite;
    animation-duration: var(--sparkle-duration, 6s);
    animation-delay: var(--sparkle-delay, 0s);
    filter: drop-shadow(0 0 8px currentColor);
}

@keyframes sparkleFall {
    0% {
        transform: translateY(0) translateX(0) scale(0.5) rotate(0deg);
        opacity: 0;
    }
    15% {
        opacity: 1;
        transform: translateY(20vh) translateX(15px) scale(1.2) rotate(90deg);
    }
    85% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(105vh) translateX(-20px) scale(0.6) rotate(360deg);
        opacity: 0;
    }
}