@page "/"
@page "/index.html"

<PageTitle>ChessCubing Arena | Accueil</PageTitle>
<PageBody BodyClass="home-body" />

<div class="ambient ambient-left"></div>
<div class="ambient ambient-right"></div>

<div class="rules-shell">
    <header class="hero hero-home">
        <div class="hero-copy">
            <a class="logo-lockup" href="index.html" aria-label="Accueil ChessCubing">
                <img class="hero-logo-icon" src="logo.png" alt="Icone ChessCubing" />
                <img class="hero-logo" src="transparent.png" alt="Logo ChessCubing" />
            </a>
            <p class="eyebrow">Association ChessCubing</p>
            <h1>Les echecs rencontrent le Rubik's Cube</h1>
            <p class="lead">
                ChessCubing propose un jeu hybride simple a comprendre, intense a
                vivre et tres plaisant a regarder. On joue une partie d'echecs, on
                passe par une phase cube obligatoire, puis la partie repart avec un
                nouveau rythme.
            </p>
            <div class="hero-actions">
                <a class="button primary" href="application.html">Ouvrir l'application</a>
                <a class="button secondary" href="reglement.html">Lire le reglement</a>
                <a class="button ghost" href="/ethan/">Ouvrir l'appli d'Ethan</a>
                <a class="button ghost" href="/brice/">Ouvrir l'appli de Brice</a>
            </div>
        </div>

        <aside class="hero-preview">
            <div class="preview-card">
                <p class="micro-label">Le principe</p>
                <ol class="phase-list">
                    <li>Deux joueurs disputent une partie d'echecs courte et nerveuse.</li>
                    <li>Une phase cube coupe le rythme et relance la tension.</li>
                    <li>Le resultat du cube influence immediatement la suite du match.</li>
                </ol>
            </div>
            <div class="preview-banner">
                <span class="mini-chip">Decouverte rapide</span>
                <strong>On comprend en quelques minutes</strong>
                <p>
                    Le format donne envie de jouer meme quand on decouvre seulement
                    l'un des deux univers. On peut venir pour les echecs, pour le
                    cube, ou simplement pour l'energie du duel.
                </p>
            </div>
        </aside>
    </header>

    <main class="rules-grid">
        <section class="panel panel-wide">
            <div class="section-heading">
                <div>
                    <p class="eyebrow">L'association</p>
                    <h2>Une passerelle entre deux passions</h2>
                </div>
                <p class="section-copy">
                    L'association ChessCubing veut creer des moments de rencontre, de
                    decouverte et de jeu partage autour d'un format hybride.
                </p>
            </div>

            <div class="home-story-grid">
                <article class="stage-card">
                    <span class="micro-label">Partager</span>
                    <strong>Faire decouvrir un format original</strong>
                    <p>
                        L'idee est simple : reunir des profils differents autour d'un
                        jeu lisible, vivant et immediatement intriguant.
                    </p>
                </article>
                <article class="stage-card">
                    <span class="micro-label">Rassembler</span>
                    <strong>Creer un terrain commun</strong>
                    <p>
                        Joueurs d'echecs, cubers, curieux, familles ou clubs peuvent se
                        retrouver dans une experience facile a lancer et a commenter.
                    </p>
                </article>
                <article class="stage-card">
                    <span class="micro-label">Animer</span>
                    <strong>Donner envie de revenir jouer</strong>
                    <p>
                        Le melange de reflexion, de vitesse et de rebondissements donne
                        au format un cote spectaculaire qui marche tres bien en
                        initiation comme en evenement.
                    </p>
                </article>
            </div>
        </section>

        <section class="panel panel-half">
            <div class="section-heading">
                <div>
                    <p class="eyebrow">Le jeu en simple</p>
                    <h2>Comment se passe une partie</h2>
                </div>
            </div>

            <div class="home-mini-grid">
                <article class="mini-panel">
                    <span class="micro-label">1</span>
                    <strong>On joue une partie d'echecs</strong>
                    <p>
                        La partie avance par sequences courtes, ce qui garde un tres bon
                        rythme et rend l'action facile a suivre.
                    </p>
                </article>
                <article class="mini-panel">
                    <span class="micro-label">2</span>
                    <strong>On resout un cube</strong>
                    <p>
                        Les deux joueurs enchainent avec une phase cube obligatoire qui
                        sert de relance, de pression et de bascule.
                    </p>
                </article>
                <article class="mini-panel">
                    <span class="micro-label">3</span>
                    <strong>Le match repart</strong>
                    <p>
                        Selon le mode choisi, la phase cube donne l'initiative ou agit
                        sur les chronos. Le duel ne retombe jamais.
                    </p>
                </article>
            </div>
        </section>

        <section class="panel panel-half">
            <div class="section-heading">
                <div>
                    <p class="eyebrow">Pourquoi ca plait</p>
                    <h2>Un format qui donne envie d'essayer</h2>
                </div>
            </div>

            <div class="home-mini-grid two-columns">
                <article class="mini-panel">
                    <strong>Tres lisible</strong>
                    <p>On comprend vite quand la pression monte et pourquoi le cube change tout.</p>
                </article>
                <article class="mini-panel">
                    <strong>Toujours relance</strong>
                    <p>Chaque phase cube remet du suspense dans la partie et ouvre de nouvelles options.</p>
                </article>
                <article class="mini-panel">
                    <strong>Convivial</strong>
                    <p>Le format marche bien en initiation, en animation de club ou en demonstration publique.</p>
                </article>
                <article class="mini-panel">
                    <strong>Memorable</strong>
                    <p>On ressort d'une partie avec des coups, des temps et des retournements dont on se souvient.</p>
                </article>
            </div>
        </section>

        <section class="panel panel-wide">
            <div class="section-heading">
                <div>
                    <p class="eyebrow">Deux formats</p>
                    <h2>Deux manieres de vivre le duel</h2>
                </div>
                <p class="section-copy">
                    Le reglement officiel propose deux lectures du meme concept, l'une
                    plus orientee initiative, l'autre plus orientee gestion du temps.
                </p>
            </div>

            <div class="rules-compare">
                <article class="format-card twice-card">
                    <div class="format-head">
                        <span class="mini-chip">ChessCubing Twice</span>
                        <h3>Le cube donne l'elan</h3>
                        <p>
                            Le joueur le plus rapide sur la phase cube prend le depart de
                            la partie suivante et peut meme obtenir un double coup dans
                            certaines situations.
                        </p>
                    </div>
                    <div class="format-badges">
                        <span>Mode nerveux</span>
                        <span>Initiative forte</span>
                        <span>Effet immediat</span>
                    </div>
                </article>

                <article class="format-card time-card">
                    <div class="format-head">
                        <span class="mini-chip">ChessCubing Time</span>
                        <h3>Le cube agit sur les chronos</h3>
                        <p>
                            Ici, on garde le trait mais la performance sur le cube retire
                            ou ajoute du temps selon l'alternance des blocs.
                        </p>
                    </div>
                    <div class="format-badges">
                        <span>Gestion de temps</span>
                        <span>Blocs - et +</span>
                        <span>Suspense permanent</span>
                    </div>
                </article>
            </div>
        </section>

        <section class="panel panel-wide cta-panel">
            <div class="section-heading">
                <div>
                    <p class="eyebrow">Envie de tester</p>
                    <h2>Choisis ton entree</h2>
                </div>
                <p class="section-copy">
                    Tu peux decouvrir le jeu tranquillement avec la page reglement ou
                    aller directement vers l'application officielle de match.
                </p>
            </div>

            <div class="source-grid">
                <a class="source-card" href="application.html">
                    <span class="micro-label">Application</span>
                    <strong>Ouvrir la partie arbitrage</strong>
                    <p>Configurer une rencontre, lancer le chrono et enchainer avec la phase cube.</p>
                </a>
                <a class="source-card" href="reglement.html">
                    <span class="micro-label">Reglement</span>
                    <strong>Comprendre les formats officiels</strong>
                    <p>Retrouver une presentation claire du Twice, du Time et des regles de match.</p>
                </a>
                <a class="source-card" href="ChessCubing_Twice_Reglement_Officiel_V2-1.pdf" target="_blank">
                    <span class="micro-label">PDF officiel</span>
                    <strong>Lire le texte source</strong>
                    <p>Consulter directement le document officiel si tu veux tous les details.</p>
                </a>
            </div>
        </section>
    </main>
</div>