/* Studio SVB — cadeau.html · Extracted Phase 5 */

:root {
            --svb-green-light: #98D0B3; 
            --svb-green-dark: #4A8D84;  
            --svb-sand: #F2E6CF;        
            --svb-peach: #E8B496;
            --svb-text: #2F4F4F;
        }

        body {
            font-family: 'Montserrat', sans-serif;
            background-color: var(--svb-green-light);
            color: var(--svb-text);
            min-height: 100vh;
            overflow-x: hidden;
            position: relative;
        }

        /* === SPLASH SCREEN === */
        #splash-screen {
      display: none;
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(180deg, #98D0B3 0%, #F2E6CF 100%);
            z-index: 9999; display: flex; justify-content: center; align-items: center;
            transition: opacity 0.8s ease-in-out, visibility 0.8s;
        }
        #splash-logo {
            width: 150px; opacity: 0; transform: scale(0.8);
            filter: brightness(0) invert(1);
        }
        .animate-logo { animation: logoIntro 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
        @keyframes logoIntro {
            0% { opacity: 0; transform: scale(0.8); }
            50% { opacity: 1; transform: scale(1.1); }
            100% { opacity: 1; transform: scale(1); }
        }
        .splash-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

        h1, h2, h3, .font-hand { font-family: 'Dancing Script', cursive; }

        /* FOND IMMERSIF */
        .ambient-bg {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -2;
            background: linear-gradient(180deg, #98D0B3 0%, #F2E6CF 100%);
            overflow: hidden;
        }
        .blob {
            position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.6;
            animation: moveBlob 25s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
        }
        .blob-1 { top: -10%; left: -10%; width: 50vw; height: 50vw; background: var(--svb-green-dark); }
        .blob-2 { bottom: -10%; right: -10%; width: 60vw; height: 60vw; background: var(--svb-peach); animation-delay: -5s; }
        @keyframes moveBlob { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(30px, -50px) scale(1.1); } }
        
        .noise-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.05;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
            pointer-events: none;
        }

        /* ANIMATIONS CONTENU */
        .reveal-load { opacity: 0; transform: translateY(30px); transition: all 1s ease-out; }
        .content-visible .reveal-load { opacity: 1; transform: translateY(0); }
    nav.reveal-load, header.reveal-load { opacity: 1 !important; transform: translateY(0) !important; }
        .d-1 { transition-delay: 0.2s; }
        .d-2 { transition-delay: 0.4s; }

        /* === DESIGN CARTE CADEAU "LUXE" === */
        .gift-container {
            background: rgba(255, 255, 255, 0.85); /* Plus opaque pour la lisibilité */
            backdrop-filter: blur(25px);
            -webkit-backdrop-filter: blur(25px);
            border: 2px solid white;
            border-radius: 40px;
            padding: 0; /* Padding géré à l'intérieur */
            box-shadow: 0 30px 60px rgba(0,0,0,0.1);
            max-width: 900px;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
        }

        /* Bandeau décoratif en haut */
        .gift-header {
            background: linear-gradient(135deg, var(--svb-peach) 0%, #f6d0b9 100%);
            padding: 30px 20px;
            text-align: center;
            color: white;
            position: relative;
        }

        /* Effet de texture sur le bandeau */
        .gift-header::after {
            content: ''; position: absolute; top:0; left:0; width:100%; height:100%;
            background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
            opacity: 0.3;
        }

        /* Le corps de la carte */
        .gift-body {
            padding: 40px;
        }

        /* Étapes */
        .steps-row {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin-bottom: 40px;
            flex-wrap: wrap;
        }
        .step-item {
            text-align: center;
            width: 120px;
        }
        .step-icon {
            width: 50px; height: 50px;
            background: var(--svb-green-light);
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            margin: 0 auto 10px;
            color: white; font-size: 1.2rem;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .step-text { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--svb-green-dark); }

        /* Widget Sportigo Container */
        #sportigo-container-giftcard {
            width: 100%;
            min-height: 400px;
            border-radius: 20px;
            overflow: hidden;
        }

        /* Petit ruban décoratif en CSS */
        .ribbon {
            position: absolute; top: -10px; right: 30px; width: 60px; height: 80px;
            background: var(--svb-green-dark);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        .ribbon::after {
            content: ''; position: absolute; bottom: -20px; left: 0;
            border-left: 30px solid var(--svb-green-dark);
            border-right: 30px solid var(--svb-green-dark);
            border-bottom: 20px solid transparent;
        }