<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bal de Promo - Élection</title>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Montserrat:wght@300;400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1 id="main-title">Bal de Promo</h1>
        <nav>
            <button id="nav-vote" class="active">Voter</button>
            <button id="nav-results">Résultats</button>
        </nav>
    </header>

    <main>
        <div class="event-details">
            <h3 class="school" id="school-name">Lycée De Saint Anne d'Auray / Saint Louis</h3>
            <p class="invite-text">Vous convie à son bal de fin d'année !</p>
            <div class="theme-box">
                <span class="theme-label">Thème :</span>
                <h2 class="theme-name">FESTIVAL DE CANNES</h2>
            </div>
            <div class="event-meta">05 JUIN | À 18h30</div>
        </div>

        <hr class="separator">

        <section id="register-section">
            <h2>Identification</h2>
            <form id="register-form">
                <input type="text" id="code-acces" placeholder="Code d'accès" required>
                <p id="register-error" class="error hidden"></p>
                <button type="submit">Accéder aux votes</button>
            </form>
        </section>

        <section id="vote-section" class="hidden">
            <h2 id="vote-title">Votez !</h2>
            <p>Code actif : <strong id="user-display"></strong></p>
            
            <div id="container-roi-box">
                <h3 id="roi-label">👑 Élection du Roi</h3>
                <div class="candidates" id="roi-container"></div>
            </div>

            <div id="container-reine-box">
                <h3 id="reine-label">👑 Élection de la Reine</h3>
                <div class="candidates" id="reine-container"></div>
            </div>

            <button id="btn-confirm-vote" class="hidden" style="margin-top: 2rem; width: 100%;">Confirmer mon vote</button>
        </section>

        <section id="thanks-section" class="hidden">
            <h2>Merci !</h2>
            <p>Votre vote a bien été enregistré.</p>
        </section>

        <section id="results-section" class="hidden">
            <h2>Résultats</h2>
            <div id="admin-login">
                <input type="password" id="admin-code" placeholder="Code secret">
                <button id="btn-admin">Déverrouiller</button>
                <p id="admin-msg" class="error"></p>
            </div>
            <div id="results-display" class="hidden">
                <div id="results-sa">
                    <h3 style="color:var(--primary)">Sainte Anne</h3>
                    <h4>Rois</h4><ul id="list-sa-roi"></ul>
                    <h4>Reines</h4><ul id="list-sa-reine"></ul>
                </div>
                <div id="results-sl" style="margin-top:20px; border-top: 1px solid #444; padding-top:10px;">
                    <h3 style="color:var(--primary)">Saint Louis</h3>
                    <h4>Lauréats</h4><ul id="list-sl"></ul>
                </div>
                <button id="btn-reset" class="danger">Réinitialiser les votes</button>
            </div>
        </section>
    </main>

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