première version

3 weeks ago · eb0ab73f09
10 changed files with 1234 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,612 @@
 <!DOCTYPE html>
 <html lang="fr">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Gymnastique Volontaire de Conches-en-Ouche — Séances multisports adaptées à tous, affiliée FFEPGV. Lundi, Mercredi, Vendredi 9h-10h.">
    <title>Gymnastique Volontaire de Conches-en-Ouche</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        :root {
            --gvdc-purple: #5B3FA6;
            --gvdc-purple-dark: #472f85;
            --gvdc-teal: #00A8C6;
            --gvdc-light: #f5f2fb;
        }
        /* ── Navbar ── */
        .navbar {
            background: white;
            box-shadow: 0 2px 10px rgba(0,0,0,0.08);
        }
        .navbar-brand img { height: 48px; }
        .navbar-brand span {
            color: var(--gvdc-purple);
            font-size: 0.85rem;
            font-weight: 700;
            line-height: 1.3;
        }
        .nav-link {
            color: #444 !important;
            font-weight: 500;
            transition: color .2s;
        }
        .nav-link:hover, .nav-link.active {
            color: var(--gvdc-purple) !important;
        }
        /* ── Sections ── */
        section { padding: 80px 0; }
        [id] { scroll-margin-top: 72px; }
        .bg-light-purple { background-color: var(--gvdc-light); }
        .section-title {
            color: var(--gvdc-purple);
            font-weight: 700;
            position: relative;
            padding-bottom: 0.75rem;
            margin-bottom: 2.5rem;
        }
        .section-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 56px;
            height: 3px;
            background: var(--gvdc-teal);
            border-radius: 2px;
        }
        /* ── Hero ── */
        #accueil {
            min-height: 100vh;
            display: flex;
            align-items: center;
            background: linear-gradient(135deg, rgba(91,63,166,.82) 0%, rgba(0,168,198,.72) 100%),
                        url('photo-gym2.jpeg') center/cover no-repeat;
        }
        /* ── Schedule cards ── */
        .schedule-card {
            border: none;
            border-left: 4px solid var(--gvdc-purple);
            border-radius: 0 .75rem .75rem 0;
            transition: transform .2s, box-shadow .2s;
        }
        .schedule-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 24px rgba(91,63,166,.15) !important;
        }
        /* ── Icon circle ── */
        .icon-circle {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: var(--gvdc-light);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--gvdc-purple);
            font-size: 1.2rem;
            flex-shrink: 0;
        }
        /* ── Pricing ── */
        .pricing-card {
            border: 2px solid transparent;
            border-radius: 1rem;
            transition: transform .2s, box-shadow .2s;
        }
        .pricing-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 12px 32px rgba(91,63,166,.18) !important;
        }
        .pricing-card.featured {
            border-color: var(--gvdc-purple);
        }
        .price-amount {
            font-size: 2.5rem;
            font-weight: 800;
            color: var(--gvdc-purple);
        }
        .check-purple { color: var(--gvdc-purple); }
        .check-teal   { color: var(--gvdc-teal); }
        /* ── Gallery ── */
        .gallery-item {
            overflow: hidden;
            border-radius: .75rem;
        }
        .gallery-item img {
            width: 100%;
            height: 300px;
            object-fit: cover;
            transition: transform .35s;
        }
        .gallery-item:hover img { transform: scale(1.05); }
        /* ── Contact cards ── */
        .contact-card {
            border: none;
            border-radius: 1rem;
            background: white;
        }
        /* ── Footer ── */
        footer {
            background: #1e1e2e;
            color: #aaa;
        }
        footer a { color: var(--gvdc-teal); text-decoration: none; }
        footer a:hover { color: white; }
    </style>
 </head>
 <body data-bs-spy="scroll" data-bs-target="#mainNav" data-bs-offset="80">
 <!-- ═══════════════════════════════════════════════
     NAVBAR
 ════════════════════════════════════════════════ -->
 <nav id="mainNav" class="navbar navbar-expand-lg sticky-top">
    <div class="container">
        <a class="navbar-brand d-flex align-items-center gap-2" href="#accueil">
            <img src="visuel-club.png" alt="Logo Gymnastique Volontaire de Conches-en-Ouche">
            <span>Gymnastique Volontaire<br>de Conches-en-Ouche</span>
        </a>
        <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navMenu" aria-label="Menu">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navMenu">
            <ul class="navbar-nav ms-auto gap-1">
                <li class="nav-item"><a class="nav-link px-3" href="#accueil">Accueil</a></li>
                <li class="nav-item"><a class="nav-link px-3" href="#apropos">À propos</a></li>
                <li class="nav-item"><a class="nav-link px-3" href="#activites">Activités</a></li>
                <li class="nav-item"><a class="nav-link px-3" href="#tarifs">Tarifs</a></li>
                <li class="nav-item"><a class="nav-link px-3" href="#galerie">Galerie</a></li>
                <li class="nav-item"><a class="nav-link px-3" href="#actualites">Actualités</a></li>
                <li class="nav-item"><a class="nav-link px-3" href="#contact">Contact</a></li>
            </ul>
        </div>
    </div>
 </nav>
 <!-- ═══════════════════════════════════════════════
     HERO — ACCUEIL
 ════════════════════════════════════════════════ -->
 <section id="accueil">
    <div class="container text-center text-white py-5">
        <p class="text-uppercase fw-semibold tracking-wide mb-2" style="letter-spacing:.12em; opacity:.85;">Conches-en-Ouche · Eure (27)</p>
        <h1 class="display-4 fw-bold mb-4">
            Gymnastique Volontaire<br>de Conches-en-Ouche
        </h1>
        <p class="lead mb-5 mx-auto" style="max-width:680px;">
            Des séances sportives adaptées aux capacités de chacun, quelles que soient sa forme
            et ses envies. Multisports, diversifiées, pour progresser harmonieusement dans tous
            les domaines&nbsp;: tonus musculaire, souplesse, endurance et équilibre.
        </p>
        <div class="d-flex flex-wrap justify-content-center gap-3 mb-4">
            <a href="#contact" class="btn btn-light btn-lg px-5 fw-semibold" style="color:var(--gvdc-purple);">
                <i class="bi bi-person-plus me-2"></i>Rejoignez-nous
            </a>
            <a href="#activites" class="btn btn-outline-light btn-lg px-5">
                <i class="bi bi-calendar3 me-2"></i>Nos horaires
            </a>
        </div>
        <span class="badge fs-6 px-4 py-2 rounded-pill" style="background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.35);">
            <i class="bi bi-gift-fill me-2"></i>2 séances d'essai gratuites
        </span>
    </div>
 </section>
 <!-- ═══════════════════════════════════════════════
     À PROPOS
 ════════════════════════════════════════════════ -->
 <section id="apropos">
    <div class="container">
        <h2 class="section-title text-center">À propos de notre association</h2>
        <div class="row g-5 align-items-center">
            <div class="col-lg-7">
                <p class="mb-3">
                    Depuis <strong>1984</strong>, notre association propose des séances sportives adaptées aux capacités
                    de chacun, quelles que soient sa forme et ses envies. Nos séances sont multisports, suffisamment
                    diversifiées pour que vous puissiez prendre du plaisir et progresser harmonieusement dans tous les
                    domaines&nbsp;: <strong>tonus musculaire, souplesse, endurance et équilibre</strong>.
                </p>
                <p class="mb-3">
                    Nous sommes affiliés à la <strong>Fédération Française d'Éducation Physique et de Gymnastique
                    Volontaire (FFEPGV)</strong>, 1<sup>re</sup> fédération non-compétitive, reconnue d'utilité publique.
                    Un Comité Départemental (CODEP) situé à Évreux nous apporte un soutien administratif et technique.
                </p>
                <p class="mb-3">
                    Nous sommes signataires du <em>contrat d'engagement républicain</em> et nous nous engageons
                    à&nbsp;: <em>«&nbsp;favoriser dans tous les milieux sociaux l'épanouissement de chaque individu
                    par la pratique éducative des activités physiques à toutes les périodes de la vie et, chaque fois
                    qu'il se peut, en milieu naturel, la recherche de son autonomie et le développement de ses
                    possibilités de communication&nbsp;»</em>.
                </p>
                <p class="mb-4">
                    Nous attachons une grande importance aux <strong>relations conviviales</strong> en offrant des
                    moments de rencontres aux adhérent(e)s à l'occasion de petits-déjeuners, repas, sorties en
                    pleine nature…
                </p>
                <!-- Logos partenaires -->
                <div class="d-flex flex-wrap align-items-center gap-4">
                    <img src="logo.png" alt="Label Qualité Club Sport Santé FFEPGV 2025-2029" style="height:80px;">
                    <img src="logo-ffsv.jpeg" alt="Fédération Française Sport Vitalité" style="height:44px;">
                    <img src="logo-cc-conches.png" alt="Communauté de Communes du Pays de Conches" style="height:56px;">
                </div>
                <p class="text-muted small mt-2">Association n°&nbsp;27015 — Référencée «&nbsp;Sport-Santé&nbsp;»</p>
            </div>
            <div class="col-lg-5 text-center">
                <img src="infos-utiles4.png" alt="Recommandations activité physique" class="img-fluid rounded-3 shadow">
                <p class="text-muted small mt-2">Recommandations en matière d'activité physique</p>
            </div>
        </div>
    </div>
 </section>
 <!-- ═══════════════════════════════════════════════
     ACTIVITÉS & HORAIRES
 ════════════════════════════════════════════════ -->
 <section id="activites" class="bg-light-purple">
    <div class="container">
        <h2 class="section-title text-center">Cours & Activités</h2>
        <div class="text-center mb-5">
            <p class="lead mb-2">Séances animées par <strong>Mathieu DANJEAN</strong></p>
            <div class="d-inline-flex align-items-center gap-2 rounded-3 px-4 py-2 bg-white shadow-sm text-muted">
                <i class="bi bi-info-circle-fill" style="color:var(--gvdc-teal);"></i>
                Prévoir une tenue adaptée, des chaussures de sport, son tapis et de l'eau.
            </div>
        </div>
        <div class="row g-4 justify-content-center">
            <div class="col-md-4">
                <div class="card schedule-card shadow-sm h-100 p-4">
                    <div class="d-flex align-items-center gap-3 mb-3">
                        <div class="icon-circle"><i class="bi bi-calendar-day"></i></div>
                        <h4 class="mb-0 fw-bold" style="color:var(--gvdc-purple);">Lundi</h4>
                    </div>
                    <p class="fs-5 fw-semibold mb-2">9h00 – 10h00</p>
                    <p class="text-muted mb-0">
                        <i class="bi bi-geo-alt-fill me-1" style="color:var(--gvdc-teal);"></i>
                        Salle Jacques Prévert<br>
                        <span class="small">1 rue de la Forge, Conches-en-Ouche</span>
                    </p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card schedule-card shadow-sm h-100 p-4">
                    <div class="d-flex align-items-center gap-3 mb-3">
                        <div class="icon-circle"><i class="bi bi-calendar-day"></i></div>
                        <h4 class="mb-0 fw-bold" style="color:var(--gvdc-purple);">Mercredi</h4>
                    </div>
                    <p class="fs-5 fw-semibold mb-2">9h00 – 10h00</p>
                    <p class="text-muted mb-0">
                        <i class="bi bi-geo-alt-fill me-1" style="color:var(--gvdc-teal);"></i>
                        Salle des Fêtes, Mairie<br>
                        <span class="small">Sainte-Marthe</span>
                    </p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card schedule-card shadow-sm h-100 p-4">
                    <div class="d-flex align-items-center gap-3 mb-3">
                        <div class="icon-circle"><i class="bi bi-calendar-day"></i></div>
                        <h4 class="mb-0 fw-bold" style="color:var(--gvdc-purple);">Vendredi</h4>
                    </div>
                    <p class="fs-5 fw-semibold mb-2">9h00 – 10h00</p>
                    <p class="text-muted mb-0">
                        <i class="bi bi-geo-alt-fill me-1" style="color:var(--gvdc-teal);"></i>
                        Salle Jacques Prévert<br>
                        <span class="small">1 rue de la Forge, Conches-en-Ouche</span>
                    </p>
                </div>
            </div>
        </div>
        <p class="text-center text-muted small mt-4">
            <i class="bi bi-exclamation-circle me-1"></i>Séances hors congés scolaires
        </p>
    </div>
 </section>
 <!-- ═══════════════════════════════════════════════
     TARIFS
 ════════════════════════════════════════════════ -->
 <section id="tarifs">
    <div class="container">
        <h2 class="section-title text-center">Tarifs 2025-2026</h2>
        <div class="row g-4 justify-content-center">
            <!-- Licence -->
            <div class="col-md-4 col-lg-3">
                <div class="card pricing-card shadow text-center p-4 h-100">
                    <div class="mb-3">
                        <i class="bi bi-patch-check-fill fs-1" style="color:var(--gvdc-teal);"></i>
                    </div>
                    <h5 class="fw-bold mb-1">Licence</h5>
                    <p class="text-muted small mb-3">Obligatoire</p>
                    <div class="price-amount">29<span class="fs-4">,80&nbsp;€</span></div>
                    <p class="text-muted small mb-3">par saison</p>
                    <hr>
                    <ul class="list-unstyled text-start small">
                        <li class="mb-2"><i class="bi bi-check-circle-fill check-teal me-2"></i>Affiliation FFEPGV</li>
                        <li class="mb-2"><i class="bi bi-check-circle-fill check-teal me-2"></i>Assurance incluse</li>
                        <li class="mb-2"><i class="bi bi-check-circle-fill check-teal me-2"></i>Espace personnel FFEPGV</li>
                        <li class="mb-2"><i class="bi bi-check-circle-fill check-teal me-2"></i>Reçu fiscal</li>
                    </ul>
                </div>
            </div>
            <!-- 1 cours/semaine -->
            <div class="col-md-4 col-lg-3">
                <div class="card pricing-card featured shadow-lg text-center p-4 h-100">
                    <span class="badge rounded-pill mb-3 px-3 py-2" style="background:var(--gvdc-purple);">
                        Le plus populaire
                    </span>
                    <div class="mb-3">
                        <i class="bi bi-1-circle-fill fs-1" style="color:var(--gvdc-purple);"></i>
                    </div>
                    <h5 class="fw-bold mb-1">1 cours / semaine</h5>
                    <p class="text-muted small mb-3">Cotisation annuelle</p>
                    <div class="price-amount">100<span class="fs-4">,00&nbsp;€</span></div>
                    <p class="text-muted small mb-3">par saison</p>
                    <hr>
                    <ul class="list-unstyled text-start small">
                        <li class="mb-2"><i class="bi bi-check-circle-fill check-purple me-2"></i>Au choix&nbsp;: Lundi, Mercredi ou Vendredi</li>
                        <li class="mb-2"><i class="bi bi-check-circle-fill check-purple me-2"></i>1 heure par séance</li>
                        <li class="mb-2"><i class="bi bi-check-circle-fill check-purple me-2"></i>Cours multisports</li>
                        <li class="mb-2"><i class="bi bi-check-circle-fill check-purple me-2"></i>Moniteur qualifié</li>
                    </ul>
                    <p class="text-muted small mt-auto">+ 29,80&nbsp;€ de licence</p>
                </div>
            </div>
            <!-- 2 cours/semaine -->
            <div class="col-md-4 col-lg-3">
                <div class="card pricing-card shadow text-center p-4 h-100">
                    <div class="mb-3">
                        <i class="bi bi-2-circle-fill fs-1" style="color:var(--gvdc-teal);"></i>
                    </div>
                    <h5 class="fw-bold mb-1">2 cours / semaine</h5>
                    <p class="text-muted small mb-3">Cotisation annuelle</p>
                    <div class="price-amount">155<span class="fs-4">,00&nbsp;€</span></div>
                    <p class="text-muted small mb-3">par saison</p>
                    <hr>
                    <ul class="list-unstyled text-start small">
                        <li class="mb-2"><i class="bi bi-check-circle-fill check-teal me-2"></i>Parmi les 3 créneaux</li>
                        <li class="mb-2"><i class="bi bi-check-circle-fill check-teal me-2"></i>1 heure par séance</li>
                        <li class="mb-2"><i class="bi bi-check-circle-fill check-teal me-2"></i>Progression optimisée</li>
                        <li class="mb-2"><i class="bi bi-check-circle-fill check-teal me-2"></i>Moniteur qualifié</li>
                    </ul>
                    <p class="text-muted small mt-auto">+ 29,80&nbsp;€ de licence</p>
                </div>
            </div>
        </div>
        <p class="text-center text-muted mt-4">
            <i class="bi bi-gift-fill me-2" style="color:var(--gvdc-purple);"></i>
            <strong>2 séances d'essai gratuites</strong> avant tout engagement —
            <a href="#contact" style="color:var(--gvdc-purple);">contactez-nous</a>
        </p>
    </div>
 </section>
 <!-- ═══════════════════════════════════════════════
     GALERIE
 ════════════════════════════════════════════════ -->
 <section id="galerie" class="bg-light-purple">
    <div class="container">
        <h2 class="section-title text-center">Galerie</h2>
        <div class="row g-4">
            <div class="col-md-6">
                <div class="gallery-item shadow">
                    <img src="photo-gym1.png" alt="Séance de détente et souplesse">
                </div>
            </div>
            <div class="col-md-6">
                <div class="gallery-item shadow">
                    <img src="photo-gym2.jpeg" alt="Séance de renforcement musculaire">
                </div>
            </div>
        </div>
    </div>
 </section>
 <!-- ═══════════════════════════════════════════════
     ACTUALITÉS
 ════════════════════════════════════════════════ -->
 <section id="actualites">
    <div class="container">
        <h2 class="section-title text-center">Actualités</h2>
        <div class="row justify-content-center">
            <div class="col-lg-7 text-center">
                <div class="p-5 rounded-4 bg-light">
                    <i class="bi bi-newspaper fs-1 text-muted mb-3 d-block"></i>
                    <h5 class="text-muted fw-normal">Aucune actualité pour le moment</h5>
                    <p class="text-muted small mb-0">
                        Suivez-nous sur
                        <a href="https://www.conches-en-ouche.fr/associations/175709" target="_blank" rel="noopener" style="color:var(--gvdc-purple);">l'application Intramuros</a>
                        pour rester informé(e) des événements du club.
                    </p>
                </div>
            </div>
        </div>
    </div>
 </section>
 <!-- ═══════════════════════════════════════════════
     CONTACT
 ════════════════════════════════════════════════ -->
 <section id="contact" class="bg-light-purple">
    <div class="container">
        <h2 class="section-title text-center">Nous contacter</h2>
        <!-- Bureau -->
        <div class="row g-4 mb-4">
            <div class="col-md-4">
                <div class="card contact-card shadow-sm p-4 h-100">
                    <div class="d-flex align-items-center gap-3 mb-3">
                        <div class="icon-circle"><i class="bi bi-person-badge-fill"></i></div>
                        <div>
                            <div class="text-muted small">Président</div>
                            <div class="fw-bold">Didier MASSÉ</div>
                        </div>
                    </div>
                    <a href="tel:+33687751115" class="btn btn-outline-secondary btn-sm">
                        <i class="bi bi-telephone me-2"></i>06 87 75 11 15
                    </a>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card contact-card shadow-sm p-4 h-100">
                    <div class="d-flex align-items-center gap-3 mb-3">
                        <div class="icon-circle"><i class="bi bi-person-badge-fill"></i></div>
                        <div>
                            <div class="text-muted small">Secrétaire</div>
                            <div class="fw-bold">Patricia ODEN</div>
                        </div>
                    </div>
                    <a href="tel:+33684440307" class="btn btn-outline-secondary btn-sm">
                        <i class="bi bi-telephone me-2"></i>06 84 44 03 07
                    </a>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card contact-card shadow-sm p-4 h-100">
                    <div class="d-flex align-items-center gap-3 mb-3">
                        <div class="icon-circle"><i class="bi bi-person-badge-fill"></i></div>
                        <div>
                            <div class="text-muted small">Trésorière</div>
                            <div class="fw-bold">Monique LORIEUL</div>
                        </div>
                    </div>
                    <a href="tel:+33620174754" class="btn btn-outline-secondary btn-sm">
                        <i class="bi bi-telephone me-2"></i>06 20 17 47 54
                    </a>
                </div>
            </div>
        </div>
        <!-- Adresse & Email -->
        <div class="row g-4 justify-content-center mb-5">
            <div class="col-md-5">
                <div class="card contact-card shadow-sm p-4 h-100">
                    <div class="d-flex align-items-start gap-3">
                        <div class="icon-circle"><i class="bi bi-geo-alt-fill"></i></div>
                        <div>
                            <div class="fw-bold mb-1">Adresse postale</div>
                            <p class="text-muted mb-0">
                                39 bis rue François Décorchemont<br>
                                27190 Conches-en-Ouche
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-5">
                <div class="card contact-card shadow-sm p-4 h-100">
                    <div class="d-flex align-items-start gap-3">
                        <div class="icon-circle"><i class="bi bi-envelope-fill"></i></div>
                        <div>
                            <div class="fw-bold mb-1">Email</div>
                            <a href="mailto:gymnastiquevolontaireconches@gmail.com"
                               style="color:var(--gvdc-purple); word-break:break-all;">
                                gymnastiquevolontaireconches@gmail.com
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Liens utiles -->
        <div class="text-center">
            <h6 class="fw-bold mb-3" style="color:var(--gvdc-purple);">Liens utiles</h6>
            <div class="d-flex flex-wrap justify-content-center gap-3">
                <a href="https://www.conches-en-ouche.fr/associations/175709" target="_blank" rel="noopener"
                   class="btn btn-outline-secondary">
                    <i class="bi bi-phone me-2"></i>Intramuros
                </a>
                <a href="https://ffepgv.fr/" target="_blank" rel="noopener"
                   class="btn btn-outline-secondary">
                    <i class="bi bi-globe me-2"></i>Site FFEPGV
                </a>
                <a href="https://ffepgv.fr/" target="_blank" rel="noopener"
                   class="btn btn-outline-secondary">
                    <i class="bi bi-person-circle me-2"></i>Mon espace FFEPGV
                </a>
            </div>
        </div>
    </div>
 </section>
 <!-- ═══════════════════════════════════════════════
     FOOTER
 ════════════════════════════════════════════════ -->
 <footer class="py-4">
    <div class="container">
        <div class="row align-items-center gy-3">
            <div class="col-md-7 text-center text-md-start">
                <p class="mb-1 small">
                    &copy; 2025 Gymnastique Volontaire de Conches-en-Ouche
                </p>
                <p class="mb-0 small" style="color:#777;">
                    Association n°&nbsp;27015 affiliée à la FFEPGV — Référencée «&nbsp;Sport-Santé&nbsp;»
                </p>
            </div>
            <div class="col-md-5 text-center text-md-end">
                <img src="logo.png" alt="Label Qualité Club Sport Santé FFEPGV" style="height:60px;">
            </div>
        </div>
    </div>
 </footer>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc4s9bIOgUxi8T/jzmMcFPaXos0qhK2bJFRW5u+n2Kfq" crossorigin="anonymous"></script>
 <script>
    /* Active nav link on scroll */
    const sections = document.querySelectorAll('section[id]');
    const navLinks = document.querySelectorAll('#mainNav .nav-link');
    const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                navLinks.forEach(l => l.classList.remove('active'));
                const active = document.querySelector(`#mainNav .nav-link[href="#${entry.target.id}"]`);
                if (active) active.classList.add('active');
            }
        });
    }, { threshold: 0.35 });
    sections.forEach(s => observer.observe(s));
    /* Close mobile menu on link click */
    navLinks.forEach(link => link.addEventListener('click', () => {
        const collapse = document.querySelector('#navMenu');
        if (collapse.classList.contains('show'))
            bootstrap.Collapse.getOrCreateInstance(collapse).hide();
    }));
 </script>
 </body>
 </html>
--- a/netlify.toml
+++ b/netlify.toml
@ -0,0 +1,10 @@
 [build]
  publish = "public"
 [[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"
    X-Content-Type-Options = "nosniff"
    Referrer-Policy = "strict-origin-when-cross-origin"
    Permissions-Policy = "camera=(), microphone=(), geolocation=()"
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,612 @@
 <!DOCTYPE html>
 <html lang="fr">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Gymnastique Volontaire de Conches-en-Ouche — Séances multisports adaptées à tous, affiliée FFEPGV. Lundi, Mercredi, Vendredi 9h-10h.">
    <title>Gymnastique Volontaire de Conches-en-Ouche</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        :root {
            --gvdc-purple: #5B3FA6;
            --gvdc-purple-dark: #472f85;
            --gvdc-teal: #00A8C6;
            --gvdc-light: #f5f2fb;
        }
        /* ── Navbar ── */
        .navbar {
            background: white;
            box-shadow: 0 2px 10px rgba(0,0,0,0.08);
        }
        .navbar-brand img { height: 48px; }
        .navbar-brand span {
            color: var(--gvdc-purple);
            font-size: 0.85rem;
            font-weight: 700;
            line-height: 1.3;
        }
        .nav-link {
            color: #444 !important;
            font-weight: 500;
            transition: color .2s;
        }
        .nav-link:hover, .nav-link.active {
            color: var(--gvdc-purple) !important;
        }
        /* ── Sections ── */
        section { padding: 80px 0; }
        [id] { scroll-margin-top: 72px; }
        .bg-light-purple { background-color: var(--gvdc-light); }
        .section-title {
            color: var(--gvdc-purple);
            font-weight: 700;
            position: relative;
            padding-bottom: 0.75rem;
            margin-bottom: 2.5rem;
        }
        .section-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 56px;
            height: 3px;
            background: var(--gvdc-teal);
            border-radius: 2px;
        }
        /* ── Hero ── */
        #accueil {
            min-height: 100vh;
            display: flex;
            align-items: center;
            background: linear-gradient(135deg, rgba(91,63,166,.82) 0%, rgba(0,168,198,.72) 100%),
                        url('photo-gym2.jpeg') center/cover no-repeat;
        }
        /* ── Schedule cards ── */
        .schedule-card {
            border: none;
            border-left: 4px solid var(--gvdc-purple);
            border-radius: 0 .75rem .75rem 0;
            transition: transform .2s, box-shadow .2s;
        }
        .schedule-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 24px rgba(91,63,166,.15) !important;
        }
        /* ── Icon circle ── */
        .icon-circle {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: var(--gvdc-light);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--gvdc-purple);
            font-size: 1.2rem;
            flex-shrink: 0;
        }
        /* ── Pricing ── */
        .pricing-card {
            border: 2px solid transparent;
            border-radius: 1rem;
            transition: transform .2s, box-shadow .2s;
        }
        .pricing-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 12px 32px rgba(91,63,166,.18) !important;
        }
        .pricing-card.featured {
            border-color: var(--gvdc-purple);
        }
        .price-amount {
            font-size: 2.5rem;
            font-weight: 800;
            color: var(--gvdc-purple);
        }
        .check-purple { color: var(--gvdc-purple); }
        .check-teal   { color: var(--gvdc-teal); }
        /* ── Gallery ── */
        .gallery-item {
            overflow: hidden;
            border-radius: .75rem;
        }
        .gallery-item img {
            width: 100%;
            height: 300px;
            object-fit: cover;
            transition: transform .35s;
        }
        .gallery-item:hover img { transform: scale(1.05); }
        /* ── Contact cards ── */
        .contact-card {
            border: none;
            border-radius: 1rem;
            background: white;
        }
        /* ── Footer ── */
        footer {
            background: #1e1e2e;
            color: #aaa;
        }
        footer a { color: var(--gvdc-teal); text-decoration: none; }
        footer a:hover { color: white; }
    </style>
 </head>
 <body data-bs-spy="scroll" data-bs-target="#mainNav" data-bs-offset="80">
 <!-- ═══════════════════════════════════════════════
     NAVBAR
 ════════════════════════════════════════════════ -->
 <nav id="mainNav" class="navbar navbar-expand-lg sticky-top">
    <div class="container">
        <a class="navbar-brand d-flex align-items-center gap-2" href="#accueil">
            <img src="visuel-club.png" alt="Logo Gymnastique Volontaire de Conches-en-Ouche">
            <span>Gymnastique Volontaire<br>de Conches-en-Ouche</span>
        </a>
        <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navMenu" aria-label="Menu">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navMenu">
            <ul class="navbar-nav ms-auto gap-1">
                <li class="nav-item"><a class="nav-link px-3" href="#accueil">Accueil</a></li>
                <li class="nav-item"><a class="nav-link px-3" href="#apropos">À propos</a></li>
                <li class="nav-item"><a class="nav-link px-3" href="#activites">Activités</a></li>
                <li class="nav-item"><a class="nav-link px-3" href="#tarifs">Tarifs</a></li>
                <li class="nav-item"><a class="nav-link px-3" href="#galerie">Galerie</a></li>
                <li class="nav-item"><a class="nav-link px-3" href="#actualites">Actualités</a></li>
                <li class="nav-item"><a class="nav-link px-3" href="#contact">Contact</a></li>
            </ul>
        </div>
    </div>
 </nav>
 <!-- ═══════════════════════════════════════════════
     HERO — ACCUEIL
 ════════════════════════════════════════════════ -->
 <section id="accueil">
    <div class="container text-center text-white py-5">
        <p class="text-uppercase fw-semibold tracking-wide mb-2" style="letter-spacing:.12em; opacity:.85;">Conches-en-Ouche · Eure (27)</p>
        <h1 class="display-4 fw-bold mb-4">
            Gymnastique Volontaire<br>de Conches-en-Ouche
        </h1>
        <p class="lead mb-5 mx-auto" style="max-width:680px;">
            Des séances sportives adaptées aux capacités de chacun, quelles que soient sa forme
            et ses envies. Multisports, diversifiées, pour progresser harmonieusement dans tous
            les domaines&nbsp;: tonus musculaire, souplesse, endurance et équilibre.
        </p>
        <div class="d-flex flex-wrap justify-content-center gap-3 mb-4">
            <a href="#contact" class="btn btn-light btn-lg px-5 fw-semibold" style="color:var(--gvdc-purple);">
                <i class="bi bi-person-plus me-2"></i>Rejoignez-nous
            </a>
            <a href="#activites" class="btn btn-outline-light btn-lg px-5">
                <i class="bi bi-calendar3 me-2"></i>Nos horaires
            </a>
        </div>
        <span class="badge fs-6 px-4 py-2 rounded-pill" style="background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.35);">
            <i class="bi bi-gift-fill me-2"></i>2 séances d'essai gratuites
        </span>
    </div>
 </section>
 <!-- ═══════════════════════════════════════════════
     À PROPOS
 ════════════════════════════════════════════════ -->
 <section id="apropos">
    <div class="container">
        <h2 class="section-title text-center">À propos de notre association</h2>
        <div class="row g-5 align-items-center">
            <div class="col-lg-7">
                <p class="mb-3">
                    Depuis <strong>1984</strong>, notre association propose des séances sportives adaptées aux capacités
                    de chacun, quelles que soient sa forme et ses envies. Nos séances sont multisports, suffisamment
                    diversifiées pour que vous puissiez prendre du plaisir et progresser harmonieusement dans tous les
                    domaines&nbsp;: <strong>tonus musculaire, souplesse, endurance et équilibre</strong>.
                </p>
                <p class="mb-3">
                    Nous sommes affiliés à la <strong>Fédération Française d'Éducation Physique et de Gymnastique
                    Volontaire (FFEPGV)</strong>, 1<sup>re</sup> fédération non-compétitive, reconnue d'utilité publique.
                    Un Comité Départemental (CODEP) situé à Évreux nous apporte un soutien administratif et technique.
                </p>
                <p class="mb-3">
                    Nous sommes signataires du <em>contrat d'engagement républicain</em> et nous nous engageons
                    à&nbsp;: <em>«&nbsp;favoriser dans tous les milieux sociaux l'épanouissement de chaque individu
                    par la pratique éducative des activités physiques à toutes les périodes de la vie et, chaque fois
                    qu'il se peut, en milieu naturel, la recherche de son autonomie et le développement de ses
                    possibilités de communication&nbsp;»</em>.
                </p>
                <p class="mb-4">
                    Nous attachons une grande importance aux <strong>relations conviviales</strong> en offrant des
                    moments de rencontres aux adhérent(e)s à l'occasion de petits-déjeuners, repas, sorties en
                    pleine nature…
                </p>
                <!-- Logos partenaires -->
                <div class="d-flex flex-wrap align-items-center gap-4">
                    <img src="logo.png" alt="Label Qualité Club Sport Santé FFEPGV 2025-2029" style="height:80px;">
                    <img src="logo-ffsv.jpeg" alt="Fédération Française Sport Vitalité" style="height:44px;">
                    <img src="logo-cc-conches.png" alt="Communauté de Communes du Pays de Conches" style="height:56px;">
                </div>
                <p class="text-muted small mt-2">Association n°&nbsp;27015 — Référencée «&nbsp;Sport-Santé&nbsp;»</p>
            </div>
            <div class="col-lg-5 text-center">
                <img src="infos-utiles4.png" alt="Recommandations activité physique" class="img-fluid rounded-3 shadow">
                <p class="text-muted small mt-2">Recommandations en matière d'activité physique</p>
            </div>
        </div>
    </div>
 </section>
 <!-- ═══════════════════════════════════════════════
     ACTIVITÉS & HORAIRES
 ════════════════════════════════════════════════ -->
 <section id="activites" class="bg-light-purple">
    <div class="container">
        <h2 class="section-title text-center">Cours & Activités</h2>
        <div class="text-center mb-5">
            <p class="lead mb-2">Séances animées par <strong>Mathieu DANJEAN</strong></p>
            <div class="d-inline-flex align-items-center gap-2 rounded-3 px-4 py-2 bg-white shadow-sm text-muted">
                <i class="bi bi-info-circle-fill" style="color:var(--gvdc-teal);"></i>
                Prévoir une tenue adaptée, des chaussures de sport, son tapis et de l'eau.
            </div>
        </div>
        <div class="row g-4 justify-content-center">
            <div class="col-md-4">
                <div class="card schedule-card shadow-sm h-100 p-4">
                    <div class="d-flex align-items-center gap-3 mb-3">
                        <div class="icon-circle"><i class="bi bi-calendar-day"></i></div>
                        <h4 class="mb-0 fw-bold" style="color:var(--gvdc-purple);">Lundi</h4>
                    </div>
                    <p class="fs-5 fw-semibold mb-2">9h00 – 10h00</p>
                    <p class="text-muted mb-0">
                        <i class="bi bi-geo-alt-fill me-1" style="color:var(--gvdc-teal);"></i>
                        Salle Jacques Prévert<br>
                        <span class="small">1 rue de la Forge, Conches-en-Ouche</span>
                    </p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card schedule-card shadow-sm h-100 p-4">
                    <div class="d-flex align-items-center gap-3 mb-3">
                        <div class="icon-circle"><i class="bi bi-calendar-day"></i></div>
                        <h4 class="mb-0 fw-bold" style="color:var(--gvdc-purple);">Mercredi</h4>
                    </div>
                    <p class="fs-5 fw-semibold mb-2">9h00 – 10h00</p>
                    <p class="text-muted mb-0">
                        <i class="bi bi-geo-alt-fill me-1" style="color:var(--gvdc-teal);"></i>
                        Salle des Fêtes, Mairie<br>
                        <span class="small">Sainte-Marthe</span>
                    </p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card schedule-card shadow-sm h-100 p-4">
                    <div class="d-flex align-items-center gap-3 mb-3">
                        <div class="icon-circle"><i class="bi bi-calendar-day"></i></div>
                        <h4 class="mb-0 fw-bold" style="color:var(--gvdc-purple);">Vendredi</h4>
                    </div>
                    <p class="fs-5 fw-semibold mb-2">9h00 – 10h00</p>
                    <p class="text-muted mb-0">
                        <i class="bi bi-geo-alt-fill me-1" style="color:var(--gvdc-teal);"></i>
                        Salle Jacques Prévert<br>
                        <span class="small">1 rue de la Forge, Conches-en-Ouche</span>
                    </p>
                </div>
            </div>
        </div>
        <p class="text-center text-muted small mt-4">
            <i class="bi bi-exclamation-circle me-1"></i>Séances hors congés scolaires
        </p>
    </div>
 </section>
 <!-- ═══════════════════════════════════════════════
     TARIFS
 ════════════════════════════════════════════════ -->
 <section id="tarifs">
    <div class="container">
        <h2 class="section-title text-center">Tarifs 2025-2026</h2>
        <div class="row g-4 justify-content-center">
            <!-- Licence -->
            <div class="col-md-4 col-lg-3">
                <div class="card pricing-card shadow text-center p-4 h-100">
                    <div class="mb-3">
                        <i class="bi bi-patch-check-fill fs-1" style="color:var(--gvdc-teal);"></i>
                    </div>
                    <h5 class="fw-bold mb-1">Licence</h5>
                    <p class="text-muted small mb-3">Obligatoire</p>
                    <div class="price-amount">29<span class="fs-4">,80&nbsp;€</span></div>
                    <p class="text-muted small mb-3">par saison</p>
                    <hr>
                    <ul class="list-unstyled text-start small">
                        <li class="mb-2"><i class="bi bi-check-circle-fill check-teal me-2"></i>Affiliation FFEPGV</li>
                        <li class="mb-2"><i class="bi bi-check-circle-fill check-teal me-2"></i>Assurance incluse</li>
                        <li class="mb-2"><i class="bi bi-check-circle-fill check-teal me-2"></i>Espace personnel FFEPGV</li>
                        <li class="mb-2"><i class="bi bi-check-circle-fill check-teal me-2"></i>Reçu fiscal</li>
                    </ul>
                </div>
            </div>
            <!-- 1 cours/semaine -->
            <div class="col-md-4 col-lg-3">
                <div class="card pricing-card featured shadow-lg text-center p-4 h-100">
                    <span class="badge rounded-pill mb-3 px-3 py-2" style="background:var(--gvdc-purple);">
                        Le plus populaire
                    </span>
                    <div class="mb-3">
                        <i class="bi bi-1-circle-fill fs-1" style="color:var(--gvdc-purple);"></i>
                    </div>
                    <h5 class="fw-bold mb-1">1 cours / semaine</h5>
                    <p class="text-muted small mb-3">Cotisation annuelle</p>
                    <div class="price-amount">100<span class="fs-4">,00&nbsp;€</span></div>
                    <p class="text-muted small mb-3">par saison</p>
                    <hr>
                    <ul class="list-unstyled text-start small">
                        <li class="mb-2"><i class="bi bi-check-circle-fill check-purple me-2"></i>Au choix&nbsp;: Lundi, Mercredi ou Vendredi</li>
                        <li class="mb-2"><i class="bi bi-check-circle-fill check-purple me-2"></i>1 heure par séance</li>
                        <li class="mb-2"><i class="bi bi-check-circle-fill check-purple me-2"></i>Cours multisports</li>
                        <li class="mb-2"><i class="bi bi-check-circle-fill check-purple me-2"></i>Moniteur qualifié</li>
                    </ul>
                    <p class="text-muted small mt-auto">+ 29,80&nbsp;€ de licence</p>
                </div>
            </div>
            <!-- 2 cours/semaine -->
            <div class="col-md-4 col-lg-3">
                <div class="card pricing-card shadow text-center p-4 h-100">
                    <div class="mb-3">
                        <i class="bi bi-2-circle-fill fs-1" style="color:var(--gvdc-teal);"></i>
                    </div>
                    <h5 class="fw-bold mb-1">2 cours / semaine</h5>
                    <p class="text-muted small mb-3">Cotisation annuelle</p>
                    <div class="price-amount">155<span class="fs-4">,00&nbsp;€</span></div>
                    <p class="text-muted small mb-3">par saison</p>
                    <hr>
                    <ul class="list-unstyled text-start small">
                        <li class="mb-2"><i class="bi bi-check-circle-fill check-teal me-2"></i>Parmi les 3 créneaux</li>
                        <li class="mb-2"><i class="bi bi-check-circle-fill check-teal me-2"></i>1 heure par séance</li>
                        <li class="mb-2"><i class="bi bi-check-circle-fill check-teal me-2"></i>Progression optimisée</li>
                        <li class="mb-2"><i class="bi bi-check-circle-fill check-teal me-2"></i>Moniteur qualifié</li>
                    </ul>
                    <p class="text-muted small mt-auto">+ 29,80&nbsp;€ de licence</p>
                </div>
            </div>
        </div>
        <p class="text-center text-muted mt-4">
            <i class="bi bi-gift-fill me-2" style="color:var(--gvdc-purple);"></i>
            <strong>2 séances d'essai gratuites</strong> avant tout engagement —
            <a href="#contact" style="color:var(--gvdc-purple);">contactez-nous</a>
        </p>
    </div>
 </section>
 <!-- ═══════════════════════════════════════════════
     GALERIE
 ════════════════════════════════════════════════ -->
 <section id="galerie" class="bg-light-purple">
    <div class="container">
        <h2 class="section-title text-center">Galerie</h2>
        <div class="row g-4">
            <div class="col-md-6">
                <div class="gallery-item shadow">
                    <img src="photo-gym1.png" alt="Séance de détente et souplesse">
                </div>
            </div>
            <div class="col-md-6">
                <div class="gallery-item shadow">
                    <img src="photo-gym2.jpeg" alt="Séance de renforcement musculaire">
                </div>
            </div>
        </div>
    </div>
 </section>
 <!-- ═══════════════════════════════════════════════
     ACTUALITÉS
 ════════════════════════════════════════════════ -->
 <section id="actualites">
    <div class="container">
        <h2 class="section-title text-center">Actualités</h2>
        <div class="row justify-content-center">
            <div class="col-lg-7 text-center">
                <div class="p-5 rounded-4 bg-light">
                    <i class="bi bi-newspaper fs-1 text-muted mb-3 d-block"></i>
                    <h5 class="text-muted fw-normal">Aucune actualité pour le moment</h5>
                    <p class="text-muted small mb-0">
                        Suivez-nous sur
                        <a href="https://www.conches-en-ouche.fr/associations/175709" target="_blank" rel="noopener" style="color:var(--gvdc-purple);">l'application Intramuros</a>
                        pour rester informé(e) des événements du club.
                    </p>
                </div>
            </div>
        </div>
    </div>
 </section>
 <!-- ═══════════════════════════════════════════════
     CONTACT
 ════════════════════════════════════════════════ -->
 <section id="contact" class="bg-light-purple">
    <div class="container">
        <h2 class="section-title text-center">Nous contacter</h2>
        <!-- Bureau -->
        <div class="row g-4 mb-4">
            <div class="col-md-4">
                <div class="card contact-card shadow-sm p-4 h-100">
                    <div class="d-flex align-items-center gap-3 mb-3">
                        <div class="icon-circle"><i class="bi bi-person-badge-fill"></i></div>
                        <div>
                            <div class="text-muted small">Président</div>
                            <div class="fw-bold">Didier MASSÉ</div>
                        </div>
                    </div>
                    <a href="tel:+33687751115" class="btn btn-outline-secondary btn-sm">
                        <i class="bi bi-telephone me-2"></i>06 87 75 11 15
                    </a>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card contact-card shadow-sm p-4 h-100">
                    <div class="d-flex align-items-center gap-3 mb-3">
                        <div class="icon-circle"><i class="bi bi-person-badge-fill"></i></div>
                        <div>
                            <div class="text-muted small">Secrétaire</div>
                            <div class="fw-bold">Patricia ODEN</div>
                        </div>
                    </div>
                    <a href="tel:+33684440307" class="btn btn-outline-secondary btn-sm">
                        <i class="bi bi-telephone me-2"></i>06 84 44 03 07
                    </a>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card contact-card shadow-sm p-4 h-100">
                    <div class="d-flex align-items-center gap-3 mb-3">
                        <div class="icon-circle"><i class="bi bi-person-badge-fill"></i></div>
                        <div>
                            <div class="text-muted small">Trésorière</div>
                            <div class="fw-bold">Monique LORIEUL</div>
                        </div>
                    </div>
                    <a href="tel:+33620174754" class="btn btn-outline-secondary btn-sm">
                        <i class="bi bi-telephone me-2"></i>06 20 17 47 54
                    </a>
                </div>
            </div>
        </div>
        <!-- Adresse & Email -->
        <div class="row g-4 justify-content-center mb-5">
            <div class="col-md-5">
                <div class="card contact-card shadow-sm p-4 h-100">
                    <div class="d-flex align-items-start gap-3">
                        <div class="icon-circle"><i class="bi bi-geo-alt-fill"></i></div>
                        <div>
                            <div class="fw-bold mb-1">Adresse postale</div>
                            <p class="text-muted mb-0">
                                39 bis rue François Décorchemont<br>
                                27190 Conches-en-Ouche
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-5">
                <div class="card contact-card shadow-sm p-4 h-100">
                    <div class="d-flex align-items-start gap-3">
                        <div class="icon-circle"><i class="bi bi-envelope-fill"></i></div>
                        <div>
                            <div class="fw-bold mb-1">Email</div>
                            <a href="mailto:gymnastiquevolontaireconches@gmail.com"
                               style="color:var(--gvdc-purple); word-break:break-all;">
                                gymnastiquevolontaireconches@gmail.com
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Liens utiles -->
        <div class="text-center">
            <h6 class="fw-bold mb-3" style="color:var(--gvdc-purple);">Liens utiles</h6>
            <div class="d-flex flex-wrap justify-content-center gap-3">
                <a href="https://www.conches-en-ouche.fr/associations/175709" target="_blank" rel="noopener"
                   class="btn btn-outline-secondary">
                    <i class="bi bi-phone me-2"></i>Intramuros
                </a>
                <a href="https://ffepgv.fr/" target="_blank" rel="noopener"
                   class="btn btn-outline-secondary">
                    <i class="bi bi-globe me-2"></i>Site FFEPGV
                </a>
                <a href="https://ffepgv.fr/" target="_blank" rel="noopener"
                   class="btn btn-outline-secondary">
                    <i class="bi bi-person-circle me-2"></i>Mon espace FFEPGV
                </a>
            </div>
        </div>
    </div>
 </section>
 <!-- ═══════════════════════════════════════════════
     FOOTER
 ════════════════════════════════════════════════ -->
 <footer class="py-4">
    <div class="container">
        <div class="row align-items-center gy-3">
            <div class="col-md-7 text-center text-md-start">
                <p class="mb-1 small">
                    &copy; 2025 Gymnastique Volontaire de Conches-en-Ouche
                </p>
                <p class="mb-0 small" style="color:#777;">
                    Association n°&nbsp;27015 affiliée à la FFEPGV — Référencée «&nbsp;Sport-Santé&nbsp;»
                </p>
            </div>
            <div class="col-md-5 text-center text-md-end">
                <img src="logo.png" alt="Label Qualité Club Sport Santé FFEPGV" style="height:60px;">
            </div>
        </div>
    </div>
 </footer>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc4s9bIOgUxi8T/jzmMcFPaXos0qhK2bJFRW5u+n2Kfq" crossorigin="anonymous"></script>
 <script>
    /* Active nav link on scroll */
    const sections = document.querySelectorAll('section[id]');
    const navLinks = document.querySelectorAll('#mainNav .nav-link');
    const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                navLinks.forEach(l => l.classList.remove('active'));
                const active = document.querySelector(`#mainNav .nav-link[href="#${entry.target.id}"]`);
                if (active) active.classList.add('active');
            }
        });
    }, { threshold: 0.35 });
    sections.forEach(s => observer.observe(s));
    /* Close mobile menu on link click */
    navLinks.forEach(link => link.addEventListener('click', () => {
        const collapse = document.querySelector('#navMenu');
        if (collapse.classList.contains('show'))
            bootstrap.Collapse.getOrCreateInstance(collapse).hide();
    }));
 </script>
 </body>
 </html>
--- a/public/infos-utiles4.png
+++ b/public/infos-utiles4.png
--- a/public/logo-cc-conches.png
+++ b/public/logo-cc-conches.png
--- a/public/logo-ffsv.jpeg
+++ b/public/logo-ffsv.jpeg
--- a/public/logo.png
+++ b/public/logo.png
--- a/public/photo-gym1.png
+++ b/public/photo-gym1.png
--- a/public/photo-gym2.jpeg
+++ b/public/photo-gym2.jpeg
--- a/public/visuel-club.png
+++ b/public/visuel-club.png