/* crowdfunding — styles page (migration DA, ne pas dupliquer la coque) */

body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(ellipse 800px 400px at 20% 30%, rgba(249, 115, 22, 0.06) 0%, transparent 70%),
                radial-gradient(ellipse 600px 300px at 80% 70%, rgba(255, 107, 53, 0.05) 0%, transparent 60%),
                radial-gradient(ellipse 400px 200px at 50% 20%, rgba(234, 88, 12, 0.04) 0%, transparent 50%),
                radial-gradient(ellipse 500px 250px at 10% 80%, rgba(255, 107, 53, 0.03) 0%, transparent 65%),
                radial-gradient(ellipse 700px 350px at 90% 10%, rgba(249, 115, 22, 0.04) 0%, transparent 55%);
            animation: organicFloat 25s ease-in-out infinite;
            z-index: 0;
            pointer-events: none;
        }

        @keyframes gradientShift {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }

        @keyframes organicFloat {
            0%, 100% { 
                transform: translateX(0px) translateY(0px) rotate(0deg) scale(1);
            }
            25% { 
                transform: translateX(10px) translateY(-15px) rotate(2deg) scale(1.05);
            }
            50% { 
                transform: translateX(-5px) translateY(10px) rotate(-1deg) scale(0.98);
            }
            75% { 
                transform: translateX(8px) translateY(-8px) rotate(1deg) scale(1.02);
            }
        }

        /* Points colorés qui pop (même DA que la page d'accueil / login) */
        .floating-dots {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: hidden;
            z-index: 1;
        }

        .dot {
            position: absolute;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            animation: dotPop 3s ease-in-out infinite;
        }

        .dot:nth-child(1) { background: #ff6b35; top: 20%; left: 10%; animation-delay: 0s; }
        .dot:nth-child(2) { background: #f7931e; top: 30%; left: 85%; animation-delay: 0.5s; }
        .dot:nth-child(3) { background: #ff6b35; top: 60%; left: 15%; animation-delay: 1s; }
        .dot:nth-child(4) { background: #f7931e; top: 70%; left: 90%; animation-delay: 1.5s; }
        .dot:nth-child(5) { background: #ff6b35; top: 40%; left: 5%; animation-delay: 2s; }
        .dot:nth-child(6) { background: #f7931e; top: 80%; left: 95%; animation-delay: 2.5s; }
        .dot:nth-child(7) { background: #ff6b35; top: 10%; left: 50%; animation-delay: 0.3s; }
        .dot:nth-child(8) { background: #f7931e; top: 90%; left: 30%; animation-delay: 1.8s; }

        @keyframes dotPop {
            0%, 100% { 
                opacity: 0; 
                transform: scale(0) translateY(0px); 
            }
            50% { 
                opacity: 1; 
                transform: scale(1) translateY(-20px); 
            }
        }

        /* Citations marketing en arrière-plan (phrases et mots-clés qui flottent) */
        .marketing-quotes {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: hidden;
            z-index: 1;
        }

        .marketing-quote {
            position: absolute;
            color: rgba(249, 115, 22, 0.08);
            font-weight: 600;
            font-style: italic;
            transition: opacity 2.5s ease-in-out;
            opacity: 0;
            white-space: nowrap;
            text-shadow: 0 2px 10px rgba(249, 115, 22, 0.1);
        }

        .marketing-quote.fade-in {
            opacity: 1;
        }

        /* Animation qui préserve la rotation initiale */
        @keyframes shimmer {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }

        .animate-shimmer {
            animation: shimmer 2s infinite;
        }

        @keyframes quoteFloat {
            0%, 100% { 
                transform: translateX(0px) translateY(0px) rotate(var(--initial-rotation, 0deg));
            }
            20% { 
                transform: translateX(25px) translateY(-30px) rotate(var(--initial-rotation, 0deg));
            }
            40% { 
                transform: translateX(-20px) translateY(25px) rotate(var(--initial-rotation, 0deg));
            }
            60% { 
                transform: translateX(30px) translateY(-15px) rotate(var(--initial-rotation, 0deg));
            }
            80% { 
                transform: translateX(-25px) translateY(20px) rotate(var(--initial-rotation, 0deg));
            }
        }

        .glass-card:hover {
            transform: translateY(-5px);
            border-color: rgba(249, 115, 22, 0.5);
        }

        .tier-card {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 16px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .tier-card:hover {
            transform: translateY(-5px);
            border-color: rgba(249, 115, 22, 0.5);
        }

        .tier-inner {
            position: relative;
            z-index: 1;
        }

        .goal-bar-track {
            position: relative;
            overflow: hidden;
            border-radius: 999px;
            background: rgba(15,23,42,0.9);
            border: 1px solid rgba(148,163,184,0.4);
        }

        .goal-bar-fill {
            height: 100%;
            border-radius: 999px;
            background: linear-gradient(90deg, #f97316, #fb923c, #fbbf24);
            box-shadow: 0 0 16px rgba(249,115,22,0.75);
        }

        .goal-bar-glow {
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: radial-gradient(circle at 0% 50%, rgba(251,191,36,0.7), transparent 70%);
            mix-blend-mode: screen;
            opacity: 0.7;
        }

        .support-button {
            background: linear-gradient(135deg, #f97316, #ea580c);
            color: white;
            border-radius: 999px;
            padding: 0.8rem 1.8rem;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            box-shadow: 0 4px 15px rgba(249, 115, 22, 0.3);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
            border: none;
        }

        .support-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(249, 115, 22, 0.5);
            background: linear-gradient(135deg, #ff6b35, #f7931e);
        }

        .support-button:active {
            transform: translateY(0);
            box-shadow: 0 2px 10px rgba(249, 115, 22, 0.4);
        }

        .badge-populaire {
            position: absolute;
            top: -0.9rem;
            left: 50%;
            transform: translateX(-50%);
            background: linear-gradient(135deg, #facc15, #f97316);
            color: #1f2937;
            font-size: 0.7rem;
            font-weight: 800;
            padding: 0.25rem 0.9rem;
            border-radius: 999px;
            box-shadow: 0 6px 18px rgba(250,204,21,0.6);
            text-transform: uppercase;
            letter-spacing: 0.08em;
            z-index: 10;
        }

        /* Permettre au badge de dépasser de la carte */
        .tier-card.has-badge {
            overflow: visible;
        }

        .testimony-card {
            width: 100%;
            max-width: 350px;
            border-radius: 18px;
            border: 1px solid rgba(148,163,184,0.35);
            background: radial-gradient(circle at top left, rgba(15,23,42,0.9), rgba(15,23,42,0.98));
        }

        /* Cartes d'objectifs : aligner les barres de progression */
        .goal-card {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-height: 230px;
        }

        .goal-card .goal-desc {
            min-height: 72px; /* même hauteur pour les descriptions, pour aligner les barres */
        }

        /* Header Navigation (même style que login.html) */
        .header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: rgba(15, 15, 15, 0.8);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            z-index: 100;
            padding: 0.5rem 1.25rem;
        }

        .header-content {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo-header {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 1.2rem;
            font-weight: 800;
            background: linear-gradient(135deg, #f97316, #ea580c);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-decoration: none;
        }

        .header-logo-img {
            height: 36px;
            width: auto;
            filter: drop-shadow(0 2px 4px rgba(249, 115, 22, 0.4));
            animation: logoImgFloat 3s ease-in-out infinite;
        }

        @keyframes logoImgFloat {
            0%, 100% { 
                transform: translateY(0px);
                filter: drop-shadow(0 2px 4px rgba(249, 115, 22, 0.4));
            }
            50% { 
                transform: translateY(-3px);
                filter: drop-shadow(0 4px 8px rgba(249, 115, 22, 0.6));
            }
        }

        .nav-links {
            display: flex;
            gap: 2rem;
            align-items: center;
        }

        #auth-section {
            display: flex;
            align-items: center;
        }

        .nav-link {
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
            font-size: 0.9375rem;
        }

        .nav-link:hover {
            color: #f97316;
        }

        .btn-header {
            background: linear-gradient(135deg, #f97316, #ea580c);
            color: white;
            padding: 0.625rem 1.5rem;
            border-radius: 10px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            font-size: 0.875rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            box-shadow: 0 4px 15px rgba(249, 115, 22, 0.3);
        }

        .btn-header:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(249, 115, 22, 0.5);
            background: linear-gradient(135deg, #ff6b35, #f7931e);
        }

        .btn-header:active {
            transform: translateY(0);
            box-shadow: 0 2px 10px rgba(249, 115, 22, 0.4);
        }

        .user-profile-link {
            display: flex;
            align-items: center;
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .user-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: 2px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
        }

        .user-profile-link:hover .user-avatar {
            border-color: #f97316;
            box-shadow: 0 0 12px rgba(249, 115, 22, 0.4);
        }

        .logout-icon {
            color: rgba(255, 255, 255, 0.7);
            font-size: 1.25rem;
            text-decoration: none;
            padding: 0.5rem;
            border-radius: 8px;
            transition: all 0.3s ease;
        }

        .logout-icon:hover {
            color: #f97316;
            background: rgba(249, 115, 22, 0.1);
        }

        /* Footer */
        .footer {
            background: rgba(15, 15, 15, 0.9);
            backdrop-filter: blur(20px);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding: 3rem 2rem 2rem;
            margin-top: 4rem;
            position: relative;
            z-index: 10;
            overflow: hidden;
        }
        .footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(249, 115, 22, 0.5), rgba(251, 191, 36, 0.5), rgba(249, 115, 22, 0.5), transparent);
            background-size: 200% 100%;
            animation: footerShimmer 3s ease-in-out infinite;
        }
        @keyframes footerShimmer {
            0% { background-position: -100% 0; }
            100% { background-position: 100% 0; }
        }

        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 3rem;
            margin-bottom: 2rem;
            position: relative;
            z-index: 1;
        }

        .footer-section h3 {
            font-size: 1.125rem;
            font-weight: 700;
            margin-bottom: 1rem;
            color: #f97316;
        }

        .footer-links {
            list-style: none;
        }

        .footer-links li {
            margin-bottom: 0.5rem;
        }

        .footer-links a {
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            transition: color 0.3s ease;
            font-size: 0.875rem;
        }

        .footer-links a:hover {
            color: #f97316;
        }

        .footer-bottom {
            max-width: 1200px;
            margin: 0 auto;
            padding-top: 2rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            text-align: center;
            color: rgba(255, 255, 255, 0.5);
            font-size: 0.875rem;
            position: relative;
            z-index: 1;
        }
        .footer-bottom::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(249, 115, 22, 0.4), rgba(251, 191, 36, 0.4), rgba(249, 115, 22, 0.4), transparent);
            background-size: 200% 100%;
            animation: footerShimmer 3s ease-in-out infinite;
        }
        .footer::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 50%;
            background: 
                radial-gradient(ellipse 300px 150px at 15% 80%, rgba(249, 115, 22, 0.03) 0%, transparent 70%),
                radial-gradient(ellipse 250px 125px at 85% 90%, rgba(255, 107, 53, 0.025) 0%, transparent 65%),
                radial-gradient(circle 3px at 20% 70%, rgba(249, 115, 22, 0.6) 0%, transparent 60%),
                radial-gradient(circle 2.5px at 35% 85%, rgba(251, 191, 36, 0.7) 0%, transparent 60%),
                radial-gradient(circle 3px at 50% 75%, rgba(249, 115, 22, 0.5) 0%, transparent 60%),
                radial-gradient(circle 2px at 65% 80%, rgba(255, 107, 53, 0.6) 0%, transparent 60%),
                radial-gradient(circle 2.5px at 80% 75%, rgba(251, 191, 36, 0.55) 0%, transparent 60%);
            pointer-events: none;
            z-index: 0;
            animation: sparkleTwinkle 4s ease-in-out infinite;
        }
        @keyframes sparkleTwinkle {
            0%, 100% { 
                opacity: 1;
                filter: brightness(1);
            }
            50% { 
                opacity: 0.6;
                filter: brightness(1.5);
            }
        }