.fortune-container {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        /* --- Roue --- */

        .wheel-wrapper {
            position: relative;
            width: 340px;
            height: 340px;
            margin: 0 auto 30px;
            perspective: 1000px; /* pour l'effet 3D */
        }

        /* Flèche en haut, pointant vers le bas */
        .wheel-arrow {
            position: absolute;
            top: 7px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 14px solid transparent;
            border-right: 14px solid transparent;
            border-top: 22px solid #ffd700; /* pointe vers le bas */
            z-index: 30;
            filter: drop-shadow(0 0 6px rgba(0,0,0,.8));
        }

        /* Disque qui tourne, effet 3D + parts de gâteau + bordure fine entre chaque case */
        .wheel-disc {
            position: relative;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            overflow: hidden;
            background:
                radial-gradient(circle at 30% 20%, #ffffff, #ffe9b0 40%, #d8a63f 70%, #8b5a00 100%),
                conic-gradient(
                    /* 5 parts de 72° avec ~2° de bordure claire entre chaque */
                    #f6d365 0deg 70deg,
                    #fffdf5 70deg 72deg,      /* bordure */
                    #fda085 72deg 142deg,
                    #fffdf5 142deg 144deg,    /* bordure */
                    #fbc2eb 144deg 214deg,
                    #fffdf5 214deg 216deg,    /* bordure */
                    #a1c4fd 216deg 286deg,
                    #fffdf5 286deg 288deg,    /* bordure */
                    #c2e9fb 288deg 358deg,
                    #fffdf5 358deg 360deg     /* bordure */
                );
            box-shadow:
                0 10px 20px rgba(0,0,0,0.50),
                inset 0 4px 8px rgba(255,255,255,0.5),
                inset 0 -4px 8px rgba(0,0,0,0.35);
            transform-origin: 50% 50%;
            transform: rotateX(10deg); /* léger tilt pour la 3D */
            transition: transform 4s cubic-bezier(0.15, 0.85, 0.15, 1); /* gros ease-in-out */
        }

        /* halo intérieur */
        .wheel-disc::before {
            content: "";
            position: absolute;
            inset: 12px;
            border-radius: 50%;
            border: 3px solid rgba(255,255,255,0.5);
            box-shadow:
                0 0 10px rgba(255,255,255,0.6),
                inset 0 0 12px rgba(0,0,0,0.5);
        }

        /* segments : placement des images au centre de chaque part */
        .wheel-segment {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 80px;
            height: 80px;
            margin: -40px 0 0 -40px;
            transform-origin: 50% 50%;
        }

        /* angle de chaque part (5 parts de 72°) + distance au centre */
        .seg-0 { transform: rotate(0deg)   translateY(-105px); }
        .seg-1 { transform: rotate(72deg)  translateY(-105px); }
        .seg-2 { transform: rotate(144deg) translateY(-105px); }
        .seg-3 { transform: rotate(216deg) translateY(-105px); }
        .seg-4 { transform: rotate(288deg) translateY(-105px); }

        .segment-content {
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, rgba(0,0,0,0.5), transparent 70%);
            border-radius: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .segment-content img {
            width: 52px;
            height: 52px;
            object-fit: contain;
            filter: drop-shadow(0 0 4px rgba(0,0,0,.7));
        }

        .segment-content .qm {
            margin-top: 4px;
            font-size: 24px;
            font-weight: 700;
            color: #fff;
            text-shadow: 0 0 4px rgba(0,0,0,.9);
        }

        /* --- Bouton central (ne tourne pas, effet buzzer) --- */

        .wheel-center {
            position: absolute;
            z-index: 40;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 120px;
            height: 120px;
            border-radius: 50%;
            border: none;
            background:
                radial-gradient(circle at 30% 20%, #fffdf7, #ffeaa7 40%, #f6c453 75%, #b8860b 100%);
            box-shadow:
                0 8px 15px rgba(0,0,0,0.5),
                inset 0 3px 6px rgba(255,255,255,0.7),
                inset 0 -3px 6px rgba(0,0,0,0.35);
            cursor: pointer;
            font-size: 15px;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: #5a3b00;
        }

        .wheel-center span {
            text-shadow: 0 1px 2px rgba(255,255,255,0.9);
        }

        .wheel-center:active {
            box-shadow:
                0 4px 8px rgba(0,0,0,0.6),
                inset 0 2px 4px rgba(255,255,255,0.7),
                inset 0 -2px 4px rgba(0,0,0,0.5);
        }

        /* Effet buzzer pendant le spin */
        .wheel-wrapper.spinning .wheel-center {
            animation: buzzerPulse 0.15s linear infinite;
        }

        @keyframes buzzerPulse {
            0%   { transform: translate(-50%, -50%) rotate(0deg); }
            25%  { transform: translate(-50%, -50%) rotate(2deg); }
            50%  { transform: translate(-50%, -50%) rotate(-2deg); }
            75%  { transform: translate(-50%, -50%) rotate(1deg); }
            100% { transform: translate(-50%, -50%) rotate(0deg); }
        }

        /* --- Paillettes autour de la roue --- */

        .sparkles {
            pointer-events: none;
            position: absolute;
            inset: 0;
            z-index: 20;
        }

        .sparkle {
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: radial-gradient(circle, #fff, #ffd700);
            opacity: 0;
            transform: scale(0);
        }

        .s1 { top: 5%; left: 20%; }
        .s2 { top: 12%; right: 18%; }
        .s3 { bottom: 10%; left: 22%; }
        .s4 { bottom: 8%; right: 22%; }
        .s5 { top: 50%; left: 6%; }
        .s6 { top: 55%; right: 6%; }

        .wheel-wrapper.spinning .sparkle {
            animation: sparkleSpin 0.8s linear infinite;
        }

        .wheel-wrapper.win .sparkle {
            animation: sparkleBurst 1.1s ease-out;
        }

        @keyframes sparkleSpin {
            0%   { opacity: 0; transform: scale(0) translate(0,0); }
            50%  { opacity: 1; transform: scale(1.4) translate(3px,-4px); }
            100% { opacity: 0; transform: scale(0) translate(-3px,4px); }
        }

        @keyframes sparkleBurst {
            0%   { opacity: 1; transform: scale(0.2); }
            80%  { opacity: 1; transform: scale(2.3); }
            100% { opacity: 0; transform: scale(3); }
        }

        /* --- Zone de gain + feux d’artifice --- */

        .win-zone {
            position: absolute;
            text-align: center;
            width:80%;
            max-width:600px;
            color:#000000;
            background: rgba(255, 255, 255, 0.9);
            box-shadow: 0px 0px 40px 133px rgba(255, 255, 255, 0.9);
            padding: 40px;
            transition: opacity 1.5s ease, transform .5s ease;
            opacity:0;
            z-index:-1;
        }
        
        .win-zone.show {
            display:block;
            opacity:1;
            z-index:1;
        } 
        
        .win-message {
            opacity: 0;
            transform: translateY(10px);
            transition: opacity 1.5s ease, transform .5s ease;
            font-size: 20px;
            font-weight: 600;
            text-shadow: 0 0 6px rgba(0,0,0,0.8);
        }

        .win-zone.show .win-message {
            opacity: 1;
            transform: translateY(0);
        }

        /* feu d’artifice autour du texte */
        .fireworks {
            position: absolute;
            inset: 0;
            pointer-events: none;
        }

        .firework {
            position: absolute;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: radial-gradient(circle, #fff, #ffcc00);
            opacity: 0;
            transform: scale(0);
        }

        .f1 { top: 10%; left: 25%; }
        .f2 { top: 0%; right: 25%; }
        .f3 { bottom: 0%; left: 50%; }

        .win-zone.show .firework {
            animation: fireworkBurst 1.2s ease-out forwards;
        }

        @keyframes fireworkBurst {
            0%   { opacity: 1; transform: scale(0.2); box-shadow: 0 0 4px 2px #fff; }
            40%  { opacity: 1; transform: scale(2);   box-shadow: 0 0 14px 4px #ffe680; }
            100% { opacity: 0; transform: scale(3);   box-shadow: 0 0 0 0 transparent; }
        }