/* Global Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --primary-pink: #ff006e;
            --primary-blue: #3a86ff;
            --accent-gold: #ffd60a;
            --dark-bg: #0a0a0a;
            --light-text: #ffffff;
            --code-green: #00ff88;
        }

        body {
            overflow-x: hidden;
            line-height: 1.6;
            margin: 0;
            padding: 0;

        }

        /* Matrix Rain Background */
        #matrix-canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            opacity: 0.15;
            pointer-events: none;
        }

        /* Loading Screen */
        .loading-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--dark-bg);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: opacity 1s ease, visibility 1s ease;
        }

        .loading-screen.hidden {
            opacity: 0;
            visibility: hidden;
        }

        .terminal-loader {
            font-family: 'Space Mono', monospace;
            font-size: clamp(0.9rem, 2vw, 1.2rem);
            color: var(--code-green);
            text-align: left;
            max-width: 90%;
            padding: 2rem;
        }

        .terminal-line {
            opacity: 0;
            animation: fadeInLine 0.5s ease forwards;
            margin: 0.5rem 0;
        }

        .terminal-line:nth-child(1) {
            animation-delay: 0s;
        }

        .terminal-line:nth-child(2) {
            animation-delay: 0.5s;
        }

        .terminal-line:nth-child(3) {
            animation-delay: 1s;
        }

        .terminal-line:nth-child(4) {
            animation-delay: 1.5s;
        }

        .terminal-line:nth-child(5) {
            animation-delay: 2s;
        }

        @keyframes fadeInLine {
            to {
                opacity: 1;
            }
        }

        .cursor {
            display: inline-block;
            width: 10px;
            height: 20px;
            background: var(--code-green);
            animation: blink 1s infinite;
            margin-left: 5px;
        }

        @keyframes blink {

            0%,
            50% {
                opacity: 1;
            }

            51%,
            100% {
                opacity: 0;
            }
        }

        /* Countdown */
        .countdown-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgb(0, 0, 0);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 9998;
            transition: opacity 1s ease;
        }

        .countdown-container.active {
            display: flex;
        }

        .countdown-container.hidden {
            opacity: 0;
            visibility: hidden;
        }

        .countdown-number {
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            font-size: clamp(6rem, 20vw, 15rem);
            font-weight: 900;
            background: white;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: countPulse 0.5s ease;
        }

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

            50% {
                transform: scale(1.2);
            }

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

        /* Confetti Canvas */
        #confetti-canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 9997;
        }

        /* Fireworks Canvas */
        /* #fireworks-canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 9996;
        } */

        #fireworks-canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 999;
            /* plus haut que tout */
        }

        /* Main Container */
        .container {
            position: relative;
            z-index: 2;
               flex: 1;
        }

        /* Hero Section */
        .hero {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            position: relative;
            padding: 4rem 2rem;
            opacity: 0;
            pointer-events: none;
            background:
                linear-gradient(rgba(0, 0, 0, 0.570), rgba(0, 0, 0, 0.444), rgba(0, 0, 0, 0.570)),
                url('../img/bgh1.png');

            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
             /* animation: zoomBg 20s ease-in-out infinite alternate; */
            animation: moveBg 25s linear infinite;
        }

        .hero.show {
    opacity: 1;
    pointer-events: auto;
}


        @keyframes moveBg {
            0% {
                background-position: center top;
            }

            50% {
                background-position: center center;
            }

            100% {
                background-position: center bottom;
            }
        }

        @keyframes zoomBg {
            from {
                background-size: 100%;
            }

            to {
                background-size: 120%;

            }
        }

        @keyframes heroFadeIn {
            to {
                opacity: 1;
            }
        }

        .glitch-wrapper {
            position: relative;
            margin-bottom: 2rem;
            animation: slideInFromTop 1s ease 0.3s backwards;
        }

        @keyframes slideInFromTop {
            from {
                opacity: 0;
                transform: translateY(-50px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .hero-title {
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            font-size: clamp(2rem, 6vw, 5rem);
            font-weight: 900;
            /* background: white; */
            color: white;
            /* background-clip: text; */
            text-transform: uppercase;
            animation: glow 2s ease-in-out infinite alternate;
            position: relative;
            animation: glow2 2s ease-in-out infinite;
        }

    @keyframes glow2 {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}


        .hero-subtitle {
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            font-size: clamp(1.5rem, 3vw, 2.5rem);
            color: white;
            margin-top: -1rem;
            margin-bottom: 0.5rem;
            font-style: italic;
            animation: fadeInUp 1s ease 0.5s backwards;
            animation: fadeInUp 1s ease-out 1s both;
        }

        .hero-message {
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            font-size: clamp(1rem, 2vw, 1.3rem);
            max-width: 800px;
            margin: 2rem auto;
            line-height: 1.8;
            color: rgba(255, 255, 255, 0.9);
            animation: fadeInUp 1s ease 1s backwards;
            animation: fadeInUp 1s ease-out 1s both;
        }

        .hero-name {
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            font-weight: 700;
            background: white;
            background-clip: text;
            font-size: 1.8em;
            display: block;
            margin-top: 1rem;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }


        .scroll-indicator {
            position: absolute;
            bottom: 2rem;
            left: 50%;
            transform: translateX(-50%);
            animation: fadeInUp 1s ease 1.5s backwards, bounce 2s ease infinite 2.5s;
            color: white;
            cursor: pointer;
        }

        @keyframes bounce {

            0%,
            100% {
                transform: translateX(-50%) translateY(0);
            }

            50% {
                transform: translateX(-50%) translateY(-10px);
            }
        }

        .scroll-indicator span {
            font-size: 2rem;
            color: var(--accent-gold);
        }

        /* Section Styling */
       section {
    padding: 6rem 2rem;
    position: relative;
}

     .section-light {
    background: #ffffff;
    color: #333;
}

      .section-light .section-title-text {
    background: linear-gradient(135deg, var(--primary-pink), var(--primary-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

       .section-light .message-text,
.section-light .question-text {
    color: #333;
}

       /* Section Titles Centrés avec chevrons collés */
.section-title {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    text-align: center;
    margin: 0 auto 4rem;
    display: inline-block; /* Inline pour centrer avec chevrons */
    position: relative;
     text-align: center;        /* centre le texte à l'intérieur */
    margin: 0 auto 4rem;       /* centre le bloc horizontalement */
    display: block;          
}

/* Chevrons intégrés inline pour rester centré */
.section-title::before {
    content: '<';
    margin-right: 0.2em; /* petit espace avant le texte */
    color: var(--primary-pink);
}

.section-title::after {
    content: '/>';
    margin-left: 0.2em; /* petit espace après le texte */
    color: var(--primary-pink);
}

/* Responsive */
@media (max-width: 768px) {
    .section-title {
        font-size: clamp(1.5rem, 6vw, 2.5rem);
    }
    .section-title::before,
    .section-title::after {
        margin: 0 0.1em;
    }
}

@media (max-width: 480px) {
    .section-title {
        font-size: clamp(1.2rem, 5vw, 2rem);
    }
    .section-title::before,
    .section-title::after {
        margin: 0 0.05em;
    }
}

        /* Scroll animations */
        .animate-on-scroll {
            opacity: 0;
            transform: translateY(50px);
            transition: opacity 0.8s ease, transform 0.8s ease;
        }

        .animate-on-scroll.animated {
            opacity: 1;
            transform: translateY(0);
        }

        .fade-in-left {
            opacity: 0;
            transform: translateX(-50px);
            transition: opacity 0.8s ease, transform 0.8s ease;
        }

        .fade-in-left.animated {
            opacity: 1;
            transform: translateX(0);
        }

        .fade-in-right {
            opacity: 0;
            transform: translateX(50px);
            transition: opacity 0.8s ease, transform 0.8s ease;
        }

        .fade-in-right.animated {
            opacity: 1;
            transform: translateX(0);
        }

        .zoom-in {
            opacity: 0;
            transform: scale(0.8);
            transition: opacity 0.8s ease, transform 0.8s ease;
        }

        .zoom-in.animated {
            opacity: 1;
            transform: scale(1);
        }

        /* Gallery Section */
        .gallery-grid {
            display: grid;
            /* grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); */
                grid-template-columns: repeat(3, 1fr); /* 3 par ligne */
            gap: 2rem;
            padding: 4rem 0;
            max-width: 1200px;
            margin: 0 auto;
        }

        .gallery-item {
            position: relative;
            aspect-ratio: 1;
            overflow: hidden;
            border-radius: 15px;
            cursor: pointer;
            transition: transform 0.4s ease, box-shadow 0.4s ease;
            border: 2px solid transparent;
            background: linear-gradient(var(--dark-bg), var(--dark-bg)) padding-box,
                linear-gradient(135deg, var(--primary-pink), var(--primary-blue)) border-box;
        }

        .gallery-item:hover {
            transform: scale(1.05) rotate(2deg);
            box-shadow: 0 20px 60px rgba(255, 0, 110, 0.3);
        }

        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }

        .gallery-item:hover img {
            transform: scale(1.1);
        }

        .gallery-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
            display: flex;
            align-items: flex-end;
            padding: 1.5rem;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .gallery-item:hover .gallery-overlay {
            opacity: 1;
        }

        .gallery-caption {
            font-family: 'Playfair Display', serif;
            font-size: 1.2rem;
            color: var(--accent-gold);
        }

        /* Quiz Section */
        #quiz{
             background-image:linear-gradient(rgba(0, 0, 0, 0.462), rgba(0, 0, 0, 0.462)), url("../img/bgh.png");
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
        .quiz-container {
            max-width: 800px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            padding: 3rem;
            backdrop-filter: blur(6px);
           
        }

        .section-light .quiz-container {
    background: rgba(58, 134, 255, 0.05);
    border: 1px solid rgba(58, 134, 255, 0.2);
}
        .quiz-question {
            display: none;
            animation: slideIn 0.5s ease;
        }

        .quiz-question.active {
            display: block;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(-30px);
            }

            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .question-text {
            font-family: 'Orbitron', sans-serif;
            font-size: clamp(1.2rem, 3vw, 1.5rem);
            margin-bottom: 2rem;
            color: var(--light-text);
        }

        .quiz-options {
            display: grid;
            gap: 1rem;
            color: var(--light-text);
        }

        .quiz-option {
            background: rgba(255, 255, 255, 0.05);
            border: 2px solid rgba(255, 255, 255, 0.1);
            padding: 1.5rem;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: clamp(1rem, 2vw, 1.1rem);
        }

       .section-light .quiz-option {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(58, 134, 255, 0.3);
}


        .quiz-option:hover {
            background: rgba(58, 134, 255, 0.2);
            border-color: var(--primary-blue);
            transform: translateX(10px);
        }

        section:nth-child(even) .quiz-option:hover {
            background: rgba(58, 134, 255, 0.15);
        }

        .quiz-option.correct {
            background: rgba(0, 255, 136, 0.2);
            border-color: var(--code-green);
        }

        .quiz-option.wrong {
            background: rgba(255, 0, 110, 0.2);
            border-color: var(--primary-pink);
        }

        .quiz-result {
            display: none;
            text-align: center;
            font-size: clamp(1.2rem, 3vw, 1.5rem);
            margin-top: 2rem;
            color: var(--light-text);
        }

        .quiz-result.show {
            display: block;
            animation: fadeInUp 0.5s ease;
        }

        .quiz-score {
            font-family: 'Orbitron', sans-serif;
            font-size: clamp(2rem, 6vw, 3rem);
            color: var(--accent-gold);
            margin: 2rem 0;
        }

        .quiz-restart {
            background: linear-gradient(135deg, var(--primary-pink), var(--primary-blue));
            color: white;
            border: none;
            padding: 1rem 3rem;
            font-size: clamp(1rem, 2vw, 1.2rem);
            font-family: 'Orbitron', sans-serif;
            border-radius: 50px;
            cursor: pointer;
            transition: transform 0.3s ease;
            margin-top: 2rem;
        }

        .quiz-restart:hover {
            transform: scale(1.1);
        }

        /* Messages Section */
        .messages-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            padding: 2rem 0;
            max-width: 1400px;
            margin: 0 auto;
        }

        .message-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            padding: 2rem;
            position: relative;
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            box-shadow: 0 10px 30px rgba(58, 134, 255, 0.2);
        }

        .section-light .message-card {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(58, 134, 255, 0.2);
}


        .message-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, var(--primary-pink), var(--primary-blue));
        }

        .message-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(58, 133, 255, 0.64);
        }

        .message-author {
            font-family: 'Orbitron', sans-serif;
            font-size: clamp(1.1rem, 2.5vw, 1.3rem);
            color: var(--primary-blue);
            margin-bottom: 1rem;
        }

        .message-text {
            font-size: clamp(0.95rem, 2vw, 1.1rem);
            line-height: 1.8;
            color: rgba(255, 255, 255, 0.9);
        }

        section:nth-child(even) .message-text {
            color: #333;
        }

        .message-icon {
            position: absolute;
            top: 1rem;
            right: 1rem;
            font-size: clamp(2rem, 5vw, 3rem);
            opacity: 0.1;
        }

        /* Music Player */
        .music-player {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            z-index: 1000;
            background: rgba(0, 0, 0, 0.9);
            border: 2px solid var(--primary-blue);
            border-radius: 50px;
            padding: 1rem 1.5rem;
            display: flex;
            align-items: center;
            gap: 1rem;
            backdrop-filter: blur(10px);
            box-shadow: 0 10px 30px rgba(58, 134, 255, 0.3);
            transition: transform 0.3s ease;
        }

        .music-player:hover {
            transform: scale(1.05);
        }

        .music-toggle {
            background: linear-gradient(135deg, var(--primary-pink), var(--primary-blue));
            border: none;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 1.5rem;
            transition: transform 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
        }

        .music-toggle:hover {
            transform: scale(1.1) rotate(10deg);
        }

        .music-info {
            font-size: 0.9rem;
            color: var(--light-text);
        }

        /* Floating Particles */
        .particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }

        .particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: var(--accent-gold);
            border-radius: 50%;
            animation: float 10s infinite;
            opacity: 0.5;
        }

        @keyframes float {

            0%,
            100% {
                transform: translateY(0) translateX(0);
                opacity: 0;
            }

            10% {
                opacity: 0.5;
            }

            90% {
                opacity: 0.5;
            }

            100% {
                transform: translateY(-100vh) translateX(50px);
                opacity: 0;
            }
        }

        /* Code snippet decoration */
        .code-snippet {
            font-family: 'Space Mono', monospace;
            background: rgba(0, 255, 136, 0.1);
            padding: 0.2rem 0.5rem;
            border-radius: 5px;
            color: var(--code-green);
            border: 1px solid rgba(0, 255, 136, 0.3);
        }

        /* Responsive */
        @media (max-width: 768px) {
            .hero {
                padding: 2rem 1rem;
            }

            .section-title::before,
            .section-title::after {
                display: none;
            }

            .quiz-container {
                padding: 1.5rem;
            }

            .messages-grid,
            .gallery-grid {
                grid-template-columns: 1fr;
            }

            .music-player {
                bottom: 1rem;
                right: 1rem;
                padding: 0.75rem 1rem;
            }

            .music-info {
                display: none;
            }

            section {
                padding: 4rem 1rem;
            }
        }

        @media (max-width: 480px) {
            .terminal-loader {
                font-size: 0.85rem;
                padding: 1rem;
            }

            .music-toggle {
                width: 45px;
                height: 45px;
                font-size: 1.2rem;
            }

            .gallery-grid {
                gap: 1rem;
            }
        }

@keyframes fadeInUp {
        from {
          opacity: 0;
          transform: translateY(30px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      
      #fireworks-canvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
}


/* MESSAGE GÉNÉRAL */
/* MESSAGE GÉNÉRAL */
.message-general {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    padding: 2rem;
}

.message-general-container {
    text-align: center;
    max-width: 650px;
    width: 100%;
}

.message-logo {
    width: 120px;
    max-width: 40%;
    margin: 0 auto 1rem;
    display: block;
}

.message-card {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 15px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 10px 30px rgba(58, 134, 255, 0.2);
}

.message-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(58, 133, 255, 0.64);
}

.message-icon {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: clamp(2rem, 5vw, 3rem);
    opacity: 0.1;
}

.message-text {
    font-size: clamp(0.95rem, 2vw, 1.1rem);
    line-height: 1.8;
    color: #333;
}

.message-author {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(1.1rem, 2.5vw, 1.3rem);
    color: var(--primary-blue);
    margin-top: 1.5rem;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .message-general {
        padding: 1.5rem;
    }

    .message-general-container {
        max-width: 90%;
    }

    .message-logo {
        width: 100px;
    }

    .message-text {
        font-size: 1rem;
    }

    .message-author {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .message-general {
        padding: 1rem;
    }

    .message-logo {
        width: 80px;
    }

    .message-text {
        font-size: 0.95rem;
    }

    .message-author {
        font-size: 1rem;
    }
}


/* ===== SECTION FINALE CÉLÉBRATION ===== */
.final-celebration-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 60vh;
    padding: 4rem 2rem;
    background: linear-gradient(135deg, var(--primary-pink), var(--primary-blue));
    color: #fff;
    animation: fadeInUp 1s ease forwards;
}

.final-title {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 900;
    margin-bottom: 1rem;
}

.final-emoji {
    font-size: clamp(3rem, 8vw, 5rem);
    margin-bottom: 1rem;
    animation: bounceEmoji 1s ease infinite alternate;
}

.final-subtitle {
    font-family: 'Verdana', sans-serif;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 600;
}

/* Animation emoji */
@keyframes bounceEmoji {
    0% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0); }
}

/* ===== FOOTER ===== */
.footer {
    background: #111;
    color: #fff;
    padding: 2rem 1rem;
    text-align: center;
    margin-top: auto;
 
}

.footer-content {
    max-width: 800px;
    margin: 0 auto;
}

.footer-divider {
    width: 60px;
    height: 2px;
    background: var(--primary-pink);
    margin: 1rem auto;
}

.footer-text, .footer-creator {
    margin: 0.5rem 0;
    font-family: 'Verdana', sans-serif;
}

.footer-heart {
    color: var(--primary-pink);
}

/* Responsive Footer & Section Finale */
@media (max-width: 768px) {
    .final-title {
        font-size: clamp(2.5rem, 7vw, 4rem);
    }
    .final-emoji {
        font-size: clamp(2.5rem, 10vw, 4rem);
    }
    .final-subtitle {
        font-size: clamp(1.2rem, 4vw, 2rem);
    }
}

@media (max-width: 480px) {
    .final-title {
        font-size: clamp(2rem, 8vw, 3.5rem);
    }
    .final-emoji {
        font-size: clamp(2rem, 12vw, 3.5rem);
    }
    .final-subtitle {
        font-size: clamp(1rem, 5vw, 1.8rem);
    }
    .footer-divider {
        width: 40px;
    }
}