@font-face{font-family:asap_condensedregular;src:url("https://www.out-of-nothing.life/fonts/asapcondensed-regular-webfont.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
        :root {
            --gold: #c9a227;
            --gold-light: #e8d48a;
            --deep-purple: #1a0a2e;
            --purple-mid: #2d1b4e;
            --cream: #f5f0e6;
            --turquoise: #00c5dc;
            --card-width: 90px;
            --card-height: 145px;
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: asap_condensedregular, Arial, sans-serif;
            background: linear-gradient(135deg, var(--deep-purple) 0%, #0d0015 100%);
            min-height: 100vh;
            color: var(--cream);
            padding: 20px;
        }
		
		body::before {
            content: '';
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: radial-gradient(ellipse at top, rgba(45, 27, 78, 0.8) 0%, transparent 70%);
            pointer-events: none;
            z-index: -1;
        }
        .container { max-width: 1000px; margin: 0 auto; }
        header { text-align: center; margin-bottom: 30px; }
        h1 { font-size: 2.5rem; color: var(--gold); margin-bottom: 10px; }
        .subtitle { font-size: 1.2rem; opacity: 0.8; }
        
        .user-status {
            position: absolute; top: 20px; right: 20px;
            display: flex; align-items: center; gap: 15px;
        }
        .user-badge {
            display: flex; align-items: center; gap: 8px;
            background: rgba(201, 162, 39, 0.1);
            border: 1px solid rgba(201, 162, 39, 0.3);
            padding: 8px 15px; border-radius: 25px;
        }
        .user-badge.premium { border-color: var(--gold); background: rgba(201, 162, 39, 0.2); }
        .login-btn, .logout-btn {
            padding: 8px 20px; border-radius: 20px; text-decoration: none;
            font-size: 0.9rem; transition: all 0.3s ease;
        }
        .login-btn { background: var(--gold); color: var(--deep-purple); }
        .logout-btn { border: 1px solid rgba(255,255,255,0.3); color: var(--cream); }
        
        /* Menu hamburger */
        .menu-container {
            position: relative;
        }
        .menu-toggle {
            background: rgba(201, 162, 39, 0.1);
            border: 1px solid rgba(201, 162, 39, 0.3);
            padding: 10px 15px;
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--cream);
            font-family: asap_condensedregular;
            font-size: 1rem;
            transition: all 0.3s ease;
        }
        .menu-toggle:hover {
            border-color: var(--gold);
            background: rgba(201, 162, 39, 0.2);
        }
        .menu-toggle .hamburger {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .menu-toggle .hamburger span {
            display: block;
            width: 20px;
            height: 2px;
            background: var(--gold);
            transition: all 0.3s ease;
        }
        .menu-dropdown {
            position: absolute;
            top: calc(100% + 10px);
            right: 0;
            background: linear-gradient(135deg, var(--deep-purple) 0%, #2d1b4e 100%);
            border: 1px solid var(--gold);
            border-radius: 12px;
            min-width: 280px;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: all 0.3s ease;
            z-index: 1000;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
            overflow: hidden;
        }
        .menu-dropdown.open {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        .menu-section {
            border-bottom: 1px solid rgba(201, 162, 39, 0.2);
        }
        .menu-section:last-child {
            border-bottom: none;
        }
        .menu-section-title {
            padding: 12px 20px;
            font-size: 0.85rem;
            color: var(--gold);
            text-transform: uppercase;
            letter-spacing: 1px;
            background: rgba(201, 162, 39, 0.1);
        }
        .menu-item {
            display: block;
            padding: 14px 20px;
            color: var(--cream);
            text-decoration: none;
            transition: all 0.3s ease;
            font-size: 1rem;
        }
        .menu-item:hover {
            background: rgba(201, 162, 39, 0.15);
            color: var(--gold);
            padding-left: 25px;
        }
        .menu-item.active {
            background: rgba(201, 162, 39, 0.2);
            color: var(--gold);
            border-left: 3px solid var(--gold);
        }
        .menu-item .menu-icon {
            margin-right: 10px;
        }
        .menu-item .badge-new {
            background: var(--turquoise);
            color: var(--deep-purple);
            font-size: 0.7rem;
            padding: 2px 6px;
            border-radius: 10px;
            margin-left: 8px;
        }
        .menu-item .badge-soon {
            background: rgba(255,255,255,0.2);
            color: var(--cream);
            font-size: 0.7rem;
            padding: 2px 6px;
            border-radius: 10px;
            margin-left: 8px;
            opacity: 0.7;
        }
        
        .step-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
        .step.active { opacity: 1; }
        .step.completed { opacity: 0.7; }
        .step-number {
            width: 40px; height: 40px; border-radius: 50%;
            background: rgba(201, 162, 39, 0.2);
            border: 2px solid var(--gold);
            display: flex; align-items: center; justify-content: center;
            font-weight: bold; color: var(--gold); font-size: 1.1rem;
        }
        .step.active .step-number { background: var(--gold); color: var(--deep-purple); }
        .step.completed .step-number { background: #4a9c6d; border-color: #4a9c6d; color: white; }
        .step-label { font-size: 1rem; color: var(--cream); }
        
        .instructions {
            text-align: center; padding: 20px;
            background: linear-gradient(135deg, rgba(201, 162, 39, 0.1) 0%, rgba(45, 27, 78, 0.5) 100%);
            border: 1px solid rgba(201, 162, 39, 0.2);
            border-radius: 8px; margin-bottom: 30px;
            font-size: 1.2rem;
			margin-top : 2rem
        }
        .instructions strong { color: var(--gold); }
        
        /* Zone de tirage interactive */
        .tirage-zone {
            display: flex; flex-direction: column; align-items: center;
            margin-bottom: 30px;
        }
        
        .deck-container {
            position: relative; width: 120px; height: 195px;
            margin: 30px auto; cursor: pointer;
            perspective: 1000px;
        }
        .deck-card {
            position: absolute; width: 100%; height: 100%;
            border-radius: 10px;
            background-image: url('media/dos-tirage-du-jour.png');
            background-size: cover;
            background-position: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
            transition: all 0.3s ease;
        }
       /* Animation BATTRE - cartes s'éparpillent */
        /* Animation BATTRE - cartes s'éparpillent sur la table */
        @keyframes battre1 {
            0% { transform: translateX(0) translateY(0) rotate(0deg); }
            20% { transform: translateX(-120px) translateY(-60px) rotate(-25deg); }
            40% { transform: translateX(80px) translateY(40px) rotate(15deg); }
            60% { transform: translateX(-60px) translateY(-30px) rotate(-10deg); }
            80% { transform: translateX(40px) translateY(20px) rotate(5deg); }
            100% { transform: translateX(0) translateY(0) rotate(0deg); }
        }
        @keyframes battre2 {
            0% { transform: translateX(0) translateY(0) rotate(0deg); }
            20% { transform: translateX(100px) translateY(-50px) rotate(20deg); }
            40% { transform: translateX(-90px) translateY(35px) rotate(-18deg); }
            60% { transform: translateX(50px) translateY(-25px) rotate(8deg); }
            80% { transform: translateX(-30px) translateY(15px) rotate(-5deg); }
            100% { transform: translateX(0) translateY(0) rotate(0deg); }
        }
        @keyframes battre3 {
            0% { transform: translateX(0) translateY(0) rotate(0deg); }
            20% { transform: translateX(-80px) translateY(70px) rotate(-30deg); }
            40% { transform: translateX(110px) translateY(-45px) rotate(22deg); }
            60% { transform: translateX(-45px) translateY(35px) rotate(-12deg); }
            80% { transform: translateX(25px) translateY(-18px) rotate(6deg); }
            100% { transform: translateX(0) translateY(0) rotate(0deg); }
        }
       .deck-container.battre .deck-card:nth-child(1) { animation: battre1 1.2s ease-in-out infinite; }
.deck-container.battre .deck-card:nth-child(2) { animation: battre2 1.2s ease-in-out infinite; animation-delay: 0.1s; }
.deck-container.battre .deck-card:nth-child(3) { animation: battre3 1.2s ease-in-out infinite; animation-delay: 0.2s; }
.deck-container.battre .deck-card:nth-child(4) { animation: battre1 1.2s ease-in-out infinite; animation-delay: 0.15s; }
.deck-container.battre .deck-card:nth-child(5) { animation: battre2 1.2s ease-in-out infinite; animation-delay: 0.25s; }
.deck-container.battre .deck-card:nth-child(6) { animation: battre3 1.2s ease-in-out infinite; animation-delay: 0.27s; }
.deck-container.battre .deck-card:nth-child(7) { animation: battre1 1.2s ease-in-out infinite; animation-delay: 0.18s; }
.deck-container.battre .deck-card:nth-child(8) { animation: battre2 1.2s ease-in-out infinite; animation-delay: 0.14s; }
.deck-container.battre .deck-card:nth-child(9) { animation: battre3 1.2s ease-in-out infinite; animation-delay: 0.21s; }
.deck-container.battre .deck-card:nth-child(10) { animation: battre1 1.2s ease-in-out infinite; animation-delay: 0.23s; }
.deck-container.battre .deck-card:nth-child(11) { animation: battre2 1.2s ease-in-out infinite; animation-delay: 0.12s; }
.deck-container.battre .deck-card:nth-child(12) { animation: battre3 1.2s ease-in-out infinite; animation-delay: 0.19s; }
.deck-container.battre .deck-card:nth-child(13) { animation: battre1 1.2s ease-in-out infinite; animation-delay: 0.26s; }
.deck-container.battre .deck-card:nth-child(14) { animation: battre2 1.2s ease-in-out infinite; animation-delay: 0.11s; }
.deck-container.battre .deck-card:nth-child(15) { animation: battre3 1.2s ease-in-out infinite; animation-delay: 0.22s; }
.deck-container.battre .deck-card:nth-child(16) { animation: battre1 1.2s ease-in-out infinite; animation-delay: 0.16s; }
.deck-container.battre .deck-card:nth-child(17) { animation: battre2 1.2s ease-in-out infinite; animation-delay: 0.24s; }
.deck-container.battre .deck-card:nth-child(18) { animation: battre3 1.2s ease-in-out infinite; animation-delay: 0.13s; }
.deck-container.battre .deck-card:nth-child(19) { animation: battre1 1.2s ease-in-out infinite; animation-delay: 0.28s; }
.deck-container.battre .deck-card:nth-child(20) { animation: battre2 1.2s ease-in-out infinite; animation-delay: 0.17s; }
.deck-container.battre .deck-card:nth-child(21) { animation: battre3 1.2s ease-in-out infinite; animation-delay: 0.09s; }
.deck-container.battre .deck-card:nth-child(22) { animation: battre1 1.2s ease-in-out infinite; animation-delay: 0.20s; }
        
        /* Animation MÉLANGER - riffle shuffle (deux paquets s'intercalent) */
        @keyframes melanger-split {
            0% { transform: translateX(0) translateY(0) rotate(0deg); }
            30% { transform: translateX(-50px) translateY(0) rotate(-5deg); }
            50% { transform: translateX(-50px) translateY(-20px) rotate(-5deg); }
            70% { transform: translateX(0) translateY(-10px) rotate(0deg); }
            100% { transform: translateX(0) translateY(0) rotate(0deg); }
        }
        @keyframes melanger-split-right {
            0% { transform: translateX(0) translateY(0) rotate(0deg); }
            30% { transform: translateX(50px) translateY(0) rotate(5deg); }
            50% { transform: translateX(50px) translateY(-20px) rotate(5deg); }
            70% { transform: translateX(0) translateY(-10px) rotate(0deg); }
            100% { transform: translateX(0) translateY(0) rotate(0deg); }
        }
        @keyframes melanger-cascade {
            0%, 30% { transform: translateY(0); }
            40% { transform: translateY(-30px); }
            50% { transform: translateY(-25px); }
            60% { transform: translateY(-20px); }
            70% { transform: translateY(-10px); }
            100% { transform: translateY(0); }
        }
      	   .deck-container.melanger .deck-card:nth-child(1) { animation: melanger-split 1s ease-in-out infinite; animation-delay: 0.05s; }
.deck-container.melanger .deck-card:nth-child(3) { animation: melanger-split 1s ease-in-out infinite; animation-delay: 0.1s; }
.deck-container.melanger .deck-card:nth-child(5) { animation: melanger-split 1s ease-in-out infinite; animation-delay: 0.15s; }
.deck-container.melanger .deck-card:nth-child(7) { animation: melanger-split 1s ease-in-out infinite; animation-delay: 0.2s; }
.deck-container.melanger .deck-card:nth-child(9) { animation: melanger-split 1s ease-in-out infinite; animation-delay: 0.25s; }
.deck-container.melanger .deck-card:nth-child(11) { animation: melanger-split 1s ease-in-out infinite; animation-delay: 0.3s; }
.deck-container.melanger .deck-card:nth-child(13) { animation: melanger-split 1s ease-in-out infinite; animation-delay: 0.35s; }
.deck-container.melanger .deck-card:nth-child(15) { animation: melanger-split 1s ease-in-out infinite; animation-delay: 0.4s; }
.deck-container.melanger .deck-card:nth-child(17) { animation: melanger-split 1s ease-in-out infinite; animation-delay: 0.45s; }
.deck-container.melanger .deck-card:nth-child(19) { animation: melanger-split 1s ease-in-out infinite; animation-delay: 0.5s; }
.deck-container.melanger .deck-card:nth-child(21) { animation: melanger-split 1s ease-in-out infinite; animation-delay: 0.55s; }

/* Paquet droit (pairs 2-22) */
.deck-container.melanger .deck-card:nth-child(2) { animation: melanger-split-right 1s ease-in-out infinite; animation-delay: 0.08s; }
.deck-container.melanger .deck-card:nth-child(4) { animation: melanger-split-right 1s ease-in-out infinite; animation-delay: 0.13s; }
.deck-container.melanger .deck-card:nth-child(6) { animation: melanger-split-right 1s ease-in-out infinite; animation-delay: 0.18s; }
.deck-container.melanger .deck-card:nth-child(8) { animation: melanger-split-right 1s ease-in-out infinite; animation-delay: 0.23s; }
.deck-container.melanger .deck-card:nth-child(10) { animation: melanger-split-right 1s ease-in-out infinite; animation-delay: 0.28s; }
.deck-container.melanger .deck-card:nth-child(12) { animation: melanger-split-right 1s ease-in-out infinite; animation-delay: 0.33s; }
.deck-container.melanger .deck-card:nth-child(14) { animation: melanger-split-right 1s ease-in-out infinite; animation-delay: 0.38s; }
.deck-container.melanger .deck-card:nth-child(16) { animation: melanger-split-right 1s ease-in-out infinite; animation-delay: 0.43s; }
.deck-container.melanger .deck-card:nth-child(18) { animation: melanger-split-right 1s ease-in-out infinite; animation-delay: 0.48s; }
.deck-container.melanger .deck-card:nth-child(20) { animation: melanger-split-right 1s ease-in-out infinite; animation-delay: 0.53s; }
.deck-container.melanger .deck-card:nth-child(22) { animation: melanger-split-right 1s ease-in-out infinite; animation-delay: 0.58s; }
        
        
        /* Animation COUPER - paquet du dessus se soulève et glisse en dessous */
        @keyframes couper-lift {
            0% { transform: translateX(0) translateY(0) rotate(0deg); }
            30% { transform: translateX(0) translateY(-60px) rotate(0deg); }
            50% { transform: translateX(-80px) translateY(-60px) rotate(-3deg); }
            70% { transform: translateX(-80px) translateY(20px) rotate(-3deg); }
            90% { transform: translateX(0) translateY(10px) rotate(0deg); }
            100% { transform: translateX(0) translateY(0) rotate(0deg); }
        }
        .deck-container.couper .deck-card:nth-child(n+11) {
            animation: couper-lift 1.2s ease-in-out forwards;
        }
        
        /* Animation d'étalement des cartes */
        .spread-card {
            opacity: 0;
            transform: scale(0.8);
        }
        .spread-card.dealing {
            animation: dealCard 0.3s ease-out forwards;
        }
        @keyframes dealCard {
            0% {
                opacity: 0;
                transform: translateX(-200px) translateY(-100px) scale(0.5) rotate(-20deg);
            }
            60% {
                opacity: 1;
                transform: translateX(10px) translateY(5px) scale(1.05);
            }
            100% {
                opacity: 1;
                transform: translateX(0) translateY(0) scale(1);
            }
        }
        
        .tirage-controls {
            display: flex; gap: 20px; justify-content: center;
            margin: 20px 0;
        }
        .control-btn {
            padding: 15px 35px; font-family: asap_condensedregular;
            font-size: 1.1rem; border-radius: 8px; cursor: pointer;
            transition: all 0.3s ease; border: none;
        }
        .control-btn.primary {
            background: linear-gradient(135deg, var(--gold) 0%, #a8841f 100%);
            color: var(--deep-purple);
        }
        .control-btn.secondary {
            background: transparent; border: 2px solid var(--gold);
            color: var(--gold);
        }
        .control-btn:disabled { opacity: 0.4; cursor: not-allowed; }
        .control-btn:not(:disabled):hover { transform: translateY(-2px); }
        
        /* Éventail de cartes */
        .spread-container {
            position: relative; width: 100%; max-width: 900px;
            height: 280px; margin: 30px auto; display: none;
        }
        .spread-container.visible { display: block; }
        .spread-card {
            position: absolute; width: 80px; height: 130px;
            border-radius: 8px; cursor: pointer;
            background-image: url('media/dos-tirage-du-jour.png');
            background-size: cover;
            background-position: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
            transition: all 0.4s ease;
            transform-style: preserve-3d;
        }
        .spread-card:hover:not(.selected) {
            transform: translateY(-20px) scale(1.1);
            box-shadow: 0 15px 40px rgba(201, 162, 39, 0.4);
            z-index: 100 !important;
        }
        .spread-card.selected {
            opacity: 0.3; pointer-events: none;
        }
        .spread-card.flipping {
            animation: flipCard 0.6s ease-in-out forwards;
        }
        @keyframes flipCard {
            0% { transform: rotateY(0deg); }
            50% { transform: rotateY(90deg); }
            100% { transform: rotateY(0deg); }
        }
        
        /* Zone des cartes tirées */
        .drawn-cards-zone {
            display: flex; justify-content: center; gap: 40px;
            margin: 40px 0; opacity: 0;
            transition: opacity 0.5s ease;
        }
        .drawn-cards-zone.visible { opacity: 1; }
        .drawn-card {
            text-align: center;
        }
        .drawn-card-label {
            font-size: 1rem; color: var(--gold);
            margin-bottom: 10px; font-weight: bold;
        }
        .drawn-card-slot {
            width: 120px; height: 195px;
            border: 3px dashed rgba(201, 162, 39, 0.4);
            border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            background: rgba(26, 10, 46, 0.6);
            transition: all 0.3s ease;
        }
        .drawn-card-slot.filled {
            border-style: solid;
            border-color: var(--gold);
            background: transparent;
        }
        .drawn-card-slot img {
            width: 100%; height: 100%;
            object-fit: cover; border-radius: 8px;
        }
        .drawn-card-name {
            margin-top: 10px; font-size: 1rem;
            color: var(--cream); min-height: 20px;
        }
        
        /* Zone d'interprétation */
        .interpretation-zone {
            margin-top: 50px; opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease;
            pointer-events: none;
        }
        .interpretation-zone.visible {
            opacity: 1; transform: translateY(0);
            pointer-events: all;
        }
        .interpretation-title {
            font-size: 2rem; color: var(--gold);
            text-align: center; margin-bottom: 30px;
        }
        .interpretation-content {
            background: linear-gradient(145deg, #ffffff 0%, #e8e4f0 100%);
            border-radius: 16px; padding: 35px;
            color: #777; font-size: 1.15rem; line-height: 1.5;
        }
        .interpretation-content p { margin-bottom: 15px; }
        .interpretation-content strong { color: #555; }
		
		.interpretation-content p:last-child {
            background-color: #978db2;
            padding: 1rem;
            color: white;
            border-radius: 8px;
            margin-top: 20px;
        }
        .interpretation-content p:last-child strong {
            color: white;
        }
        
        .tirage-actions {
            display: flex; justify-content: center; gap: 20px;
            margin-top: 40px;
        }
        .action-btn {
            padding: 15px 30px; font-family: asap_condensedregular;
            font-size: 1rem; border-radius: 8px; cursor: pointer;
            transition: all 0.3s ease; display: flex;
            align-items: center; gap: 10px;
        }
        .action-btn.primary {
            background: linear-gradient(135deg, var(--gold) 0%, #a8841f 100%);
            border: none; color: var(--deep-purple);
        }
        .action-btn.secondary {
            background: transparent; border: 2px solid var(--gold);
            color: var(--gold);
        }
        
        /* Partage */
        .share-zone {
            margin-top: 40px; padding: 25px;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1);
            display: none;
        }
        .share-zone.visible { display: block; }
        .share-buttons {
            display: flex; flex-wrap: wrap; gap: 10px;
            justify-content: center;
        }
        .share-btn {
            padding: 10px 20px; border-radius: 8px; border: none;
            cursor: pointer; font-family: asap_condensedregular;
            font-size: 0.95rem; display: flex; align-items: center;
            gap: 8px; transition: all 0.3s ease;
        }
        .share-btn.facebook { background: #1877f2; color: white; }
        .share-btn.twitter { background: #000; color: white; }
        .share-btn.whatsapp { background: #25d366; color: white; }
        .share-btn.copy { background: var(--gold); color: var(--deep-purple); }
        
        /* Toast */
        .toast {
            position: fixed; bottom: 30px; left: 50%;
            transform: translateX(-50%) translateY(100px);
            background: var(--deep-purple); border: 1px solid var(--gold);
            padding: 15px 30px; border-radius: 8px;
            opacity: 0; transition: all 0.3s ease; z-index: 1000;
        }
        .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
        .toast.success { border-color: #4a9c6d; }
        .toast.error { border-color: #e74c3c; }
        
		@media (max-width: 576px) {
    .step-indicator {
        display: grid;
        grid-template-columns: repeat(2, auto);
        justify-content: center;
        justify-items: start;
        gap: 15px 40px;
		margin-top: 3rem;
    }
    
    .step {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }
    
    .step-number {
        flex-shrink: 0;
    }
    
    .step-label {
        white-space: nowrap;
    }
}
		
        @media (max-width: 768px) {
            h1 { font-size: 1.8rem; }
            .user-status { position: static; justify-content: center; margin-bottom: 20px; }
            .step-indicator { flex-direction: column; gap: 15px; align-items: center; }
            .drawn-cards-zone { flex-direction: column; align-items: center; }
            .spread-card { width: 75px; height: 120px; }
            .tirage-controls { flex-direction: column; }
            .control-btn { width: 100%; }
        }