<?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>Règles de la fête — 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">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" class="active">Règles d'or</a>
            <a href="rsvp.php">Confirmer la présence</a>
        </div>
    </nav>

    <!-- CONTENU RÈGLES -->
    <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">Consignes</div>
            <h1 class="main-title" style="font-size: clamp(2.5rem, 6vw, 4.5rem);">Les Règles<br><span>D'Or de la Fête</span></h1>
            <p class="date-line">Pour que tout se passe au top du top</p>
        </div>

        <!-- GRILLE DES RÈGLES -->
        <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;">1. Comité restreint</h3>
                <p style="color: var(--text-muted); font-size: 0.9rem;">Pas d'invités en plus surprises, on garde un petit comité ultra qualitatif entre nous pour en profiter un max.</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;">2. Restons sur place</h3>
                <p style="color: var(--text-muted); font-size: 0.9rem;">Une fois qu'on y est, on ne sort pas de l'endroit pendant toute la fête pour garder l'ambiance intacte.</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;">3. Une petite attention</h3>
                <p style="color: var(--text-muted); font-size: 0.9rem;">Pour marquer ses 18 ans comme il se doit, un petit cadeau de participation fait toujours super plaisir à la reine du jour !</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;">4. Respect du matériel</h3>
                <p style="color: var(--text-muted); font-size: 0.9rem;">On fait super attention aux lieux, au son et au matériel mis à disposition pour que tout reste nickel du début à la fin.</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;">5. Dress code Full Black</h3>
                <p style="color: var(--text-muted); font-size: 0.9rem;">On respecte la tenue exigée pour assurer de superbes photos de groupe et une harmonie totale.</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;">6. Lâcher de téléphone</h3>
                <p style="color: var(--text-muted); font-size: 0.9rem;">On profite du moment présent un maximum les yeux dans les yeux, les stories attendront un peu !</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;">7. Mode chill & open bar</h3>
                <p style="color: var(--text-muted); font-size: 0.9rem;">Chacun gère son rythme entre les grillades, les discussions et le ravito sans se prendre la tête.</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;">8. Jeu de rôle actif</h3>
                <p style="color: var(--text-muted); font-size: 0.9rem;">On joue le jeu à fond pour les activités, les blind tests et les délires prévus tout au long de la journée.</p>
            </div>

        </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>