<?php
require_once 'db.php';
$conn = dbconnect();
?>
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Détails — 18 ANS Martchella</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Montserrat:wght@300;400;600;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="invitation.css">
</head>
<body>

    <!-- PARTICULES -->
    <div id="particles"></div>

    <!-- MENU ÉPURÉ -->
    <nav>
        <span>18yoo</span>
        <div>
            <a href="index.php">Accueil</a>
            <a href="details.php" class="active">Détails de la fete</a>
            <a href="soundboard.php">Proposer des sons</a>
            <a href="activites.php">Proposer des Jeus/Activités</a>
            <a href="regles.php">Règles d'or</a>
            <a href="rsvp.php">Confirmer la présence</a>
        </div>
    </nav>

    <!-- CONTENU DÉTAILS -->
    <main style="padding: 10rem 2rem 5rem 2rem; max-width: 950px; margin: 0 auto; position: relative; z-index: 1;">
        
        <div style="text-align: center; margin-bottom: 4rem;">
            <div class="badge">Au Programme</div>
            <h1 class="main-title" style="font-size: clamp(2.5rem, 6vw, 4.5rem);">Les Détails<br><span>De La Fête</span></h1>
            <p class="date-line">Vendredi 11 Septembre 2026 — Dès 13h00</p>
        </div>

        <!-- GRILLE DES INFORMATIONS -->
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; margin-bottom: 3rem;">
            
            <div class="countdown-item" style="padding: 2.5rem 2rem; text-align: left; background: var(--bg-card);">
                <h3 style="font-family: 'Playfair Display', serif; color: var(--gold-light); font-size: 1.3rem; margin-bottom: 0.8rem;">Dress Code : Full Black</h3>
                <p style="color: var(--text-muted); font-size: 0.9rem;">Pas de thème prise de tête, sortez vos meilleures tenues en <strong>Full Black</strong>. Élégance et sobriété exigées pour marquer le coup.</p>
            </div>

            <div class="countdown-item" style="padding: 2.5rem 2rem; text-align: left; background: var(--bg-card);">
                <h3 style="font-family: 'Playfair Display', serif; color: var(--gold-light); font-size: 1.3rem; margin-bottom: 0.8rem;">Cocktails & Bar Libre</h3>
                <p style="color: var(--text-muted); font-size: 0.9rem;">Bar en libre-service avec toutes les boissons autorisées. Si tu as une bouteille ou un alcool précis en tête, ramène-le sans hésiter.</p>
            </div>

            <div class="countdown-item" style="padding: 2.5rem 2rem; text-align: left; background: var(--bg-card);">
                <h3 style="font-family: 'Playfair Display', serif; color: var(--gold-light); font-size: 1.3rem; margin-bottom: 0.8rem;">Grillades & Brochettes</h3>
                <p style="color: var(--text-muted); font-size: 0.9rem;">De quoi se caler le ventre toute la journée et en soirée : grillades, brochettes et du lourd au menu pour tout le monde.</p>
            </div>

            <div class="countdown-item" style="padding: 2.5rem 2rem; text-align: left; background: var(--bg-card);">
                <h3 style="font-family: 'Playfair Display', serif; color: var(--gold-light); font-size: 1.3rem; margin-bottom: 0.8rem;">Piste de Danse & DJ Set</h3>
                <p style="color: var(--text-muted); font-size: 0.9rem;">Une zone dédiée pour enflammer le dancefloor, enchaîner les sons et bouger toute la nuit.</p>
            </div>

            <div class="countdown-item" style="padding: 2.5rem 2rem; text-align: left; background: var(--bg-card);">
                <h3 style="font-family: 'Playfair Display', serif; color: var(--gold-light); font-size: 1.3rem; margin-bottom: 0.8rem;">Karaoké & Blind Test</h3>
                <p style="color: var(--text-muted); font-size: 0.9rem;">Prépare ta voix pour le karaoké géant et affûte tes oreilles pour le blind test musical entre invités.</p>
            </div>

            <div class="countdown-item" style="padding: 2.5rem 2rem; text-align: left; background: var(--bg-card);">
                <h3 style="font-family: 'Playfair Display', serif; color: var(--gold-light); font-size: 1.3rem; margin-bottom: 0.8rem;">La Boîte à Souvenirs</h3>
                <p style="color: var(--text-muted); font-size: 0.9rem;">Une boîte sera mise à disposition pour que chacun puisse y glisser son prénom et un souvenir particulier partagé avec Martchella.</p>
            </div>

            <div class="countdown-item" style="padding: 2.5rem 2rem; text-align: left; background: var(--bg-card);">
                <h3 style="font-family: 'Playfair Display', serif; color: var(--gold-light); font-size: 1.3rem; margin-bottom: 0.8rem;">Espace Fumeur</h3>
                <p style="color: var(--text-muted); font-size: 0.9rem;">Un coin dédié est prévu pour ceux qui veulent fumer afin de profiter tranquillement sans déranger les autres.</p>
            </div>

            <div class="countdown-item" style="padding: 2.5rem 2rem; text-align: left; background: var(--bg-card);">
                <h3 style="font-family: 'Playfair Display', serif; color: var(--gold-light); font-size: 1.3rem; margin-bottom: 0.8rem;">Pyjama Night & Chill</h3>
                <p style="color: var(--text-muted); font-size: 0.9rem;">Pour ceux qui restent jusqu'au bout de la nuit : prévois ton pyjama pour enchaîner sur une pyjama night légendaire.</p>
            </div>

        </div>

        <!-- RÈGLES / INFOS IMPORTANTES -->
            <!-- <div style="background: var(--bg-card); border: 1px solid var(--border); padding: 2.5rem; border-radius: 4px; text-align: center;">
                <h3 style="font-family: 'Playfair Display', serif; color: var(--gold); font-size: 1.4rem; margin-bottom: 1rem;">Bon à savoir</h3>
                <p style="color: var(--text-main); font-size: 0.95rem; line-height: 1.8; margin-bottom: 1.5rem;">
                    Le compte à rebours est lancé. Viens avec ta meilleure énergie, on est là pour célébrer ça comme il se doit. 
                </p>
                <a href="rsvp.php" class="btn-submit" style="display: inline-block; max-width: 250px; text-decoration: none;">Confirmer ma venue</a>
            </div> -->

    </main>

    <!-- FOOTER -->
    <footer>
        <div class="footer-glam">See you there twinnn !</div>
        <p>Martchella — 18 ans — 11.09.2026</p>
    </footer>

    <script src="script.js"></script>
</body>
</html>