/* Sorti de resources/views/site_app.blade.php le 10/11/2026 (gabarit allégé) : copie exacte du bloc <style>, servie par Apache
   et gardée par le navigateur. Le modifier ici, plus dans la vue. */
        /* --- 1. MODALE CENTRALE --- */
        #gamificationModal {
            z-index: 100000 !important;
        }

        .modal-backdrop {
            /* z-index: 99999 !important; CORRECTION SYMBIOTEK POUR RESTAURER BANDE ANNONCE */
        }

        .modal-gamification .modal-content {
            border-radius: 30px;
            border: none;
            text-align: center;
            background: #fff;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
            overflow: hidden;
        }

        .gamification-header {
            background: linear-gradient(45deg, #fd267a, #ff6036);
            padding: 30px 20px;
            color: white;
        }

        .gamification-body {
            padding: 40px 20px;
        }

        .reward-title {
            font-size: 24px;
            font-weight: 800;
            color: #333;
            margin-bottom: 15px;
        }

        .reward-desc {
            color: #555;
            font-size: 16px;
            margin-bottom: 25px;
            line-height: 1.5;
        }

        .bold-highlight {
            font-weight: bold;
            color: #fd267a;
            font-size: 1.1em;
        }

        .btn-action {
            background: linear-gradient(45deg, #fd267a, #ff6036);
            border: none;
            border-radius: 50px;
            padding: 12px 40px;
            color: white;
            font-weight: bold;
            font-size: 18px;
            box-shadow: 0 4px 15px rgba(253, 38, 122, 0.4);
            cursor: pointer;
        }

        /* --- 2. BANDEAU (Streak) --- */
        #streak-banner {
            position: fixed;
            top: -150px;
            left: 0;
            width: 100%;
            background: var(--tertiary-color, #6c5ce7);

            color: white;
            z-index: 99999;
            padding: 20px 0;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
            transition: top 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            pointer-events: none;
            overflow: hidden;
        }

        .banner-sparkles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
            /* Derrière le texte */
            background-image:
                radial-gradient(white 1px, transparent 1px),
                radial-gradient(white 2px, transparent 2px);
            background-size: 50px 50px, 100px 100px;
            background-position: 0 0, 25px 25px;
            opacity: 0.3;
            animation: twinkle 4s linear infinite;
        }

        @keyframes twinkle {
            0% {
                transform: translateY(0);
                opacity: 0.3;
            }

            50% {
                opacity: 0.6;
            }

            100% {
                transform: translateY(-50px);
                opacity: 0.3;
            }
        }

        #streak-banner>div {
            position: relative;
            z-index: 2;
        }

        #streak-banner.visible {
            top: 0;
        }

        .streak-container {
            display: flex;
            align-items: center;
            gap: 15px;
            position: relative;
            margin-top: 10px;
        }

        .streak-line-bg {
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            height: 4px;
            background: #444;
            z-index: 0;
            transform: translateY(-50%);
            border-radius: 4px;
        }

        .streak-line-fill {
            position: absolute;
            top: 50%;
            left: 0;
            height: 4px;
            background: #fd267a;
            z-index: 1;
            transform: translateY(-50%);
            width: 0%;
            transition: width 1.5s ease-out;
            border-radius: 4px;
        }

        .streak-step {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: #333;
            border: 2px solid #444;
            z-index: 2;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.5s;
        }

        .streak-step.active {
            background: #fd267a;
            border-color: #fd267a;
            box-shadow: 0 0 10px #fd267a;
            transform: scale(1.2);
        }

        .streak-step.done {
            background: #fd267a;
            border-color: #fd267a;
        }

        .streak-step i {
            font-size: 12px;
            display: none;
        }

        .streak-step.done i,
        .streak-step.active i {
            display: block;
        }

        .streak-gift {
            width: 40px;
            height: 40px;
            background: #444;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2;
            border: 2px solid #666;
            color: #888;
        }

        .streak-gift.unlocked {
            background: var(--tertiary-color, #e8b500);
            border-color: #fff;
            color: #fff;
            animation: bounce 1s infinite;
        }

        /* --- 3. CAGNOTTE WIDGET --- */
        .cagnotte-wrapper {
            position: fixed;
            top: 120px;
            right: -350px;
            /* Caché par défaut */
            z-index: 99998;
            cursor: pointer;
            text-decoration: none;
            /* Important car c'est un lien <a> */

            /* Transition pour l'apparition (Slide) */
            transition: right 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);

            /* Bordure et Forme */
            padding: 4px;
            /* Épaisseur de la bordure animée */
            border-radius: 50px;
            overflow: hidden;

            /* Animation de tremblement */
            animation: tremblement 3s infinite ease-in-out;
        }

        /* L'état visible (Slide-in) */
        .cagnotte-wrapper.visible {
            right: 20px;
        }

        /* L'animation de la bordure (Le dégradé tournant) */
        .cagnotte-wrapper::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: conic-gradient(transparent,
                    var(--primary-color, #E05C70),
                    var(--tertiary-color, #e8b500),
                    var(--secondary-color, #84b97a),
                    transparent 30%);
            animation: tourner 4s linear infinite;
            z-index: 0;
        }

        /* L'intérieur du bouton (Texte et Fond) */
        .cagnotte-content {
            position: relative;
            background-color: var(--primary-enhanced-color, #ab2546);
            color: #fff;
            padding: 10px 25px;
            border-radius: 46px;
            /* Ajusté pour matcher le wrapper */
            font-size: 1.1rem;
            font-weight: bold;
            z-index: 1;
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
        }

        .cagnotte-content .icon {
            font-size: 1.4rem;
        }

        /* Le nombre de points */
        #points-value {
            color: var(--tertiary-color, #e8b500);
            font-family: monospace;
            font-size: 1.3rem;
            margin-left: 5px;
        }

        .gami-pill-wrapper {
            position: fixed;
            top: -100px;
            /* Caché tout là-haut */
            left: 50%;
            transform: translateX(-50%);
            /* Centré parfaitement */
            z-index: 100002;
            /* Au-dessus de tout */

            background: #1e1e2f;
            /* Fond sombre bleuté */
            color: white;

            padding: 10px 25px;
            border-radius: 50px;
            /* Forme de pilule */
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.1);

            display: flex;
            align-items: center;
            gap: 15px;

            transition: top 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
            /* Effet élastique */
            pointer-events: none;
            /* L'utilisateur peut cliquer "à travers" si besoin */
        }

        /* Classe pour l'afficher */
        .gami-pill-wrapper.active {
            top: 30px;
        }

        .gami-pill-icon {
            width: 32px;
            height: 32px;
            background: linear-gradient(135deg, #10c469, #09944d);
            /* Vert succès */
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            color: white;
            box-shadow: 0 0 10px rgba(16, 196, 105, 0.4);
        }

        .gami-pill-content {
            display: flex;
            flex-direction: column;
        }

        .gami-pill-title {
            font-size: 13px;
            font-weight: 700;
            color: #fff;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .gami-pill-points {
            font-size: 12px;
            color: #10c469;
            /* Vert fluo */
            font-weight: 600;
        }

        /* Animations clés */
        @keyframes tourner {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes tremblement {
            0% {
                transform: translate(0, 0) rotate(0deg);
            }

            2% {
                transform: translate(1px, 1px) rotate(0.5deg);
            }

            4% {
                transform: translate(-1px, -1px) rotate(-0.5deg);
            }

            6% {
                transform: translate(-1px, 1px) rotate(0deg);
            }

            8% {
                transform: translate(1px, -1px) rotate(0.5deg);
            }

            10% {
                transform: translate(0, 0) rotate(0deg);
            }

            100% {
                transform: translate(0, 0) rotate(0deg);
            }
        }

        /* --- NOUVEAU STYLE 1 : CARD FLIP (Loot Box 3D) --- */
        .sim-card-perspective {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            perspective: 1000px;
            opacity: 0;
            transition: opacity 0.3s;
            pointer-events: none;
        }

        .sim-card-perspective.visible {
            opacity: 1;
            pointer-events: auto;
        }

        .sim-card-inner {
            position: relative;
            width: 260px;
            height: 360px;
            text-align: center;
            transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transform-style: preserve-3d;
            cursor: pointer;
        }

        .sim-card-perspective.visible .sim-card-inner {
            transform: rotateY(180deg);
        }

        /* L'animation se lance à l'ajout de la classe */

        .sim-card-front,
        .sim-card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        /* Face Mystère (Dos de la carte) */
        .sim-card-front {
            background: linear-gradient(135deg, #2b2b2b 0%, #1a1a1a 100%);
            border: 2px solid rgba(255, 255, 255, 0.1);
            color: #fff;
        }

        .sim-card-icon-mystery {
            font-size: 60px;
            opacity: 0.5;
            animation: pulse 2s infinite;
        }

        /* Face Récompense (Devant) */
        .sim-card-back {
            background: #fff;
            transform: rotateY(180deg);
            border: 4px solid var(--tertiary-color, #ffd700);
        }

        /* --- NOUVEAU STYLE 2 : ACHIEVEMENT (Style Xbox/PlayStation) --- */
        .sim-achievement {
            position: fixed;
            bottom: 40px;
            left: 50%;
            transform: translateX(-50%) translateY(100px);
            background: #1f1f1f;
            color: #fff;
            width: auto;
            min-width: 350px;
            padding: 15px 25px;
            border-radius: 50px;
            /* Forme de pilule allongée */
            display: flex;
            align-items: center;
            gap: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.1);
            z-index: 9999;
            opacity: 0;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .sim-achievement.visible {
            transform: translateX(-50%) translateY(0);
            opacity: 1;
        }

        .sim-achievement-icon {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background: var(--tertiary-color, #ffd700);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: #fff;
            box-shadow: 0 0 15px var(--tertiary-color);
        }

        /* --- NOUVEAU STYLE 3 : NEON SPLASH (Explosion visuelle) --- */
        .sim-neon-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(10, 10, 10, 0.9);
            z-index: 10000;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s;
        }

        .sim-neon-overlay.visible {
            opacity: 1;
            pointer-events: auto;
        }

        .sim-neon-content {
            transform: scale(0.5);
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            text-align: center;
        }

        .sim-neon-overlay.visible .sim-neon-content {
            transform: scale(1);
        }

        .sim-neon-title {
            font-size: 40px;
            font-weight: 900;
            color: #fff;
            text-transform: uppercase;
            text-shadow: 0 0 10px var(--tertiary-color, #ffd700), 0 0 20px var(--tertiary-color, #ffd700);
            margin-bottom: 20px;
            letter-spacing: 2px;
        }

        .sim-neon-points {
            font-size: 80px;
            font-weight: 800;
            color: #fff;
            line-height: 1;
            -webkit-text-stroke: 2px var(--tertiary-color, #ffd700);
            text-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
                opacity: 0.5;
            }

            50% {
                transform: scale(1.1);
                opacity: 0.8;
            }

            100% {
                transform: scale(1);
                opacity: 0.5;
            }
        }