/**
 * Styles personnalisés pour le Jeu de Noël
 * Ce fichier peut être utilisé pour ajouter vos propres styles
 * au-delà de Tailwind CSS
 */

/* ===================================
   Variables CSS (Couleurs de Noël)
   =================================== */
:root {
    --color-christmas-red: #c41e3a;
    --color-christmas-green: #165b33;
    --color-christmas-gold: #ffd700;
    --color-christmas-white: #f8fafc;
    --color-christmas-dark: #1a1a1a;
}

/* ===================================
   Animations personnalisées
   =================================== */

/* Animation de flocons de neige (optionnel) */
@keyframes snowfall {
    0% {
        transform: translateY(-100vh) translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) translateX(100px);
        opacity: 0;
    }
}

.snowflake {
    position: fixed;
    top: -10px;
    z-index: 9999;
    color: white;
    font-size: 1em;
    pointer-events: none;
    animation: snowfall linear infinite;
}

/* Animation de scintillement pour les éléments de Noël */
@keyframes sparkle {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.05);
    }
}

.sparkle {
    animation: sparkle 2s ease-in-out infinite;
}

/* Animation d'apparition en douceur */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
}

/* ===================================
   Styles pour les boutons
   =================================== */

/* Effet de brillance sur les boutons */
.btn-shine {
    position: relative;
    overflow: hidden;
}

.btn-shine::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transition: left 0.5s;
}

.btn-shine:hover::before {
    left: 100%;
}

/* ===================================
   Styles pour les cartes partenaires
   =================================== */

.partner-card {
    transition: all 0.3s ease;
}

.partner-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Badge "GAGNANT" */
.winner-badge {
    background: linear-gradient(135deg, var(--color-christmas-gold) 0%, #ffa500 100%);
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
    animation: sparkle 2s ease-in-out infinite;
}

/* ===================================
   Styles pour le modal
   =================================== */

/* Overlay du modal avec effet de flou */
.modal-overlay {
    backdrop-filter: blur(5px);
}

/* Animation du modal */
@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-content {
    animation: modalSlideIn 0.3s ease-out;
}

/* ===================================
   Styles pour les formulaires
   =================================== */

/* Focus visible pour l'accessibilité */
input:focus,
button:focus,
a:focus {
    outline: 3px solid var(--color-christmas-red);
    outline-offset: 2px;
}

/* Amélioration du checkbox */
input[type="checkbox"] {
    cursor: pointer;
}

input[type="checkbox"]:checked {
    background-color: var(--color-christmas-red);
    border-color: var(--color-christmas-red);
}

/* ===================================
   Styles pour la FAQ (accordéon)
   =================================== */

.faq-item {
    transition: all 0.3s ease;
}

.faq-item:hover {
    background-color: #f9fafb;
}

/* ===================================
   Gradient de Noël
   =================================== */

.christmas-gradient {
    background: linear-gradient(
        135deg,
        var(--color-christmas-red) 0%,
        var(--color-christmas-green) 50%,
        var(--color-christmas-gold) 100%
    );
}

/* Gradient plus doux pour les arrière-plans */
.christmas-gradient-soft {
    background: linear-gradient(
        135deg,
        rgba(196, 30, 58, 0.1) 0%,
        rgba(22, 91, 51, 0.1) 50%,
        rgba(255, 215, 0, 0.1) 100%
    );
}

/* ===================================
   Fond neigeux
   =================================== */

.snow-bg {
    background-color: var(--color-christmas-white);
    background-image:
        radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.8) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(196, 30, 58, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(22, 91, 51, 0.1) 0%, transparent 50%);
}

/* ===================================
   Styles pour les carrousels Swiper
   =================================== */

.swiper-button-next,
.swiper-button-prev {
    color: var(--color-christmas-red) !important;
}

.swiper-pagination-bullet-active {
    background-color: var(--color-christmas-red) !important;
}

/* ===================================
   Responsive - Améliorations mobile
   =================================== */

@media (max-width: 640px) {
    /* Réduire les marges sur mobile */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Boutons pleine largeur sur mobile */
    .btn-mobile-full {
        width: 100%;
    }
}

/* ===================================
   Accessibilité - Mode de contraste élevé
   =================================== */

@media (prefers-contrast: high) {
    :root {
        --color-christmas-red: #b30000;
        --color-christmas-green: #006400;
    }

    input:focus,
    button:focus,
    a:focus {
        outline-width: 4px;
    }
}

/* ===================================
   Mode sombre (si souhaité dans le futur)
   =================================== */

@media (prefers-color-scheme: dark) {
    /* Décommentez si vous souhaitez un mode sombre automatique
    body {
        background-color: #1a1a1a;
        color: #ffffff;
    }

    .bg-white {
        background-color: #2d2d2d !important;
        color: #ffffff;
    }
    */
}

/* ===================================
   Impression (pour règlement, mentions légales)
   =================================== */

@media print {
    header, footer, nav, .no-print {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }
}

/* ===================================
   Styles utilitaires personnalisés
   =================================== */

/* Texte avec effet brillant/doré */
.text-gold {
    color: var(--color-christmas-gold);
    text-shadow: 0 2px 4px rgba(255, 215, 0, 0.3);
}

/* Ombre portée de Noël */
.shadow-christmas {
    box-shadow: 0 10px 30px rgba(196, 30, 58, 0.2);
}

/* Bordure de Noël */
.border-christmas {
    border: 3px solid var(--color-christmas-red);
}

/* ===================================
   Animation de chargement (optionnel)
   =================================== */

.loading-spinner {
    border: 4px solid rgba(196, 30, 58, 0.1);
    border-left-color: var(--color-christmas-red);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ===================================
   État de succès/erreur pour les messages
   =================================== */

.message-success {
    background-color: #d1fae5;
    border-left: 4px solid #10b981;
    color: #065f46;
}

.message-error {
    background-color: #fee2e2;
    border-left: 4px solid #ef4444;
    color: #991b1b;
}

.message-info {
    background-color: #dbeafe;
    border-left: 4px solid #3b82f6;
    color: #1e40af;
}